body {
    background-color: #F5F1E6;
}

header {
    width: 100%;
    position: relative;
    background-image: url(../img/pc/header.svg);
    background-size: cover;
    width: 100%;
    height: 840px;
    /* background-position: 0px; */
    background-position: 0px -20px;
    /* top:-20px; */
}

header .header__top {
    width: 100%;
    margin: 0px auto;
    background-color: #fff;
    /* height: 25px; */
}

header .header__top .header__top__inner {
    width: 1080px;
    margin: 0 auto;
}

header .header__main {
    position: absolute;
    /* background-image: url(../img/pc/header.svg);
    background-size: cover;
    width: 100%;
    height: 750px;
    top:-20px; */
}

header .header__main .tel {
    position: absolute;
    top : 35vw;
    left: 50vw;
}

header .header__main .tel img.patlamp {
    position: absolute;
    top: 100px;
    left:30px;
    z-index: 10;
    width: 80px;
}

header .header__main .tel a img {
    position: absolute;
    top: 40px;
    left:0px;
    z-index: 5;
    /* width: 80%; */
}

.helptel {
    display: none;
}

/*************************************
 *
 * troubles / トラブル
 *
 ************************************/
.troubles {
    padding: 50px 0px;
    background-color: #F5F1E6;
}

.troubles .container .box30 {
        width: 31%;
    display: inline-block;
    margin: 2em 1%;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);

}

.troubles .container .box30 .box-title {
    font-size: 1.2em;
    background: #EE8033;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.troubles .container .box30 p {
    padding: 15px 20px;
    margin: 0;
}

.troubles .container .box30 p.box-image {
    width: 86%;
    padding: 15px 7% 0px;
}

.troubles .container .box30 p.box-image img {
    width: 100%;
}


.troubles .container .box30 .icon_engine,
.troubles .container .box30 .icon_light,
.troubles .container .box30 .icon_attetion  {
    position: relative;
    height: 50px;
}

.troubles .container .box30 .icon_engine p.icon {
    content: "";
    background-image: url(../img/pc/icon_engine.svg);
    position: absolute;
    top: 0%;
    left: 0%;
    background-repeat: no-repeat;
    width: 98%;
    text-align: left;
}

.troubles .container .box30 .icon_light p.icon {
    content: "";
    background-image: url(../img/pc/icon_light.svg);
    position: absolute;
    top: 0%;
    left: 0%;
    background-repeat: no-repeat;
    width: 98%;
    text-align: left;
}

.troubles .container .box30 .icon_attetion p.icon {
    content: "";
    background-image: url(../img/pc/icon_attetion.svg);
    position: absolute;
    top: 0%;
    left: 0%;
    background-repeat: no-repeat;
    width: 98%;
    text-align: left;
}

.troubles .container {
    width: 1080px;
    margin: 0 auto;
}

.troubles .container .troubleshooting {
    padding: 50px 0px 30px;
    text-align: center;
}

.troubles .container .troubles__grid {
    padding: 20px 0px 80px;
}

.troubles .container .troubles__grid .troubleCard {
    background-color: #fff;
    display: inline-block;
    border-radius: 10px;
    padding: 0.5%;
    margin: 0 2%;
    width: 300px;
}

.troubleCard__line {
    border-radius: 10px;
    padding: 10%;
    border: 3px solid #EE8033;
    position: relative;
}

.troubleCard__no1 {
    background-image: url(../img/pc/case1.jpeg);
    /* opacity: 0.8; */
    background-size: cover;
}

.troubleCard__no2 {
    background-image: url(../img/pc/case4.jpeg);
    /* opacity: 0.8; */
    background-size: cover;
}

.troubleCard__no3 {
    background-image: url(../img/pc/case2.jpeg);
    /* opacity: 0.8; */
    background-size: cover;
}


.troubleCard__no {
    position: absolute;
    top: 0;
    right: 1px;
}

.troubleCard__title {
    font-size: 20px;
    font-weight: 600;
    padding: 10px 0px;
    color:#fff;
    /* color: #363636; */
}

.troubleCard__desc {
    color: #fff;
}

.arrow {
    padding-top: 80px;
    text-align: center;
}

.troubles__note {
    padding-bottom: 30px;
}

/*************************************
 *
 * reasons / 選ばれる理由
 *
 ************************************/
.reasons {
    background-color: #F5F1E6;
}

.reasons .container {
    width: 1080px;
    margin: 80px auto;
    position: relative;
    height: 400px;
}

.reasons .container .feature {
    position: absolute;
    left: 80px;
    z-index: 2;
}

.reasons .container .feature img {
    
}

.reasons .container .map {
    position: absolute;
    left: 600px;
    z-index: 1;
}

.reasons .container .map img {
    width: 100%;
}

.reasons__contactHint {
    width: 1080px;
    margin: 0px auto 0px;
    padding-bottom: 100px;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    position: relative;
    color: #363636;
}

.reasons__contactHint span {
    color: #EE8033;
}

.reasons__contactHint img {
    position: absolute;
    top: -20px;
    left: 200px;
}

/*************************************
 *
 * price / 料金について
 *
 ************************************/
.price {
    background-color: #fff;
}

.price .introduction {
    width: 1080px;
    margin: 0px auto;
    padding: 120px 0px;
    /* margin: 120px auto; */
}

.price .introduction .sectionTitle {
    position: relative;
    height: 300px;
}

.price .introduction .sectionTitle .cost1 {
    position: absolute;
    top: -50px;
    left: 200px;
}

.price .introduction .sectionTitle .cost2 {
    position: absolute;
    top: -50px;
    right: 200px;
}

.price .introduction h2 {
    color: #EE8033;
    border-bottom: 3px solid #EE8033;
    font-size: 35px;
    font-weight: 600;
    width: 290px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    padding: 10px 10px 5px;
}

.price .introduction h2::before {
    content: "";
    background-image: url(../img/pc/icon_yen.svg);
    position: absolute;
    width: 44px;
    height: 44px;
    left: 10px;
}

.price .pay {
    /* width: 1080px; */
    margin: 50px auto;
    width: 100%;
    border-top: 5px solid #CFCFCF;
    border-bottom: 5px solid #CFCFCF;
}

.price .pay .container {
    width: 1080px;
    margin: 80px auto;
}

.pricePanel {
    /* background-color: #FFDF69;
    border-radius: 10px;
    height: 174px; */
    width: 1000px;
    margin: 50px auto;
}

.pricePanel .pricePanel__left {
    display: inline-block;
    width: 350px;
    padding: 50px;
    vertical-align: top;
}

.pricePanel .pricePanel__left .pricePanel__small {
    font-size: 18px;
    font-weight: 600;
}

.pricePanel .pricePanel__left .pricePanel__label {
    font-size: 28px;
    font-weight: 600;
}

.pricePanel .pricePanel__right {
    display: inline-block;
    width: 617px;
    background-color: #fff;
    margin-top: 8px;
    height: 160px;
    vertical-align: top;
    border-radius: 10px;
}

.pricePanel__main {
    font-size: 64px;
    font-weight: 600;
}

.pay__text {
    width: 500px;
    font-size: 28px;
    font-weight: 600;
    display: inline-block;
    vertical-align: top;
    color:#363636;
}

.pay__text span {
    font-size: 20px;
}

.pay__logos {
    display: inline-block;
    padding-left: 20px;
    vertical-align: top;
}

.pay__logos p {
    font-size: 12px;
}

.compare {
    width: 1080px;
    margin: 80px auto 0px;
}

.compare .contact {
    text-align: center;
    padding: 50px 0;
}

.compare .contact p {
    font-size: 24px;
    color:#363636;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 0 45px;
}

.compare .contact p:before, .compare .contact p:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;

}

.compare .contact p:before {
  left:0;
    -webkit-transform: rotate(-120deg);
  transform: rotate(-120deg);
}

.compare .contact p:after {
  right: 0;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.compare .contact ul {
    /* text-align: center; */
}

.compare .contact ul li {
    padding: 40px;
    display: inline-block;
}

.compare .contact ul li img {
    width: 400px;
}

/*************************************
 *
 * faq / よくあるご質問
 *
 ************************************/
.faq {
    background-color: #F5F1E6;
}

.faq .container {
    width: 1080px;
    margin: 0px auto;
    padding: 100px 0px;
}

.faq .container h2.sectionTitle {
    color: #EE8033;
    border-bottom: 3px solid #EE8033;
    font-size: 35px;
    font-weight: 600;
    width: 320px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    padding: 10px 10px 5px;    
}

.faq .container h2::before {
    content: "";
    background-image: url(../img/pc/icon_question.svg);
    position: absolute;
    width: 44px;
    height: 44px;
    left: 10px;
}


/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* アコーディオンパネルの設定 */
.accordion-area {
	list-style: none;
    padding: 30px 0px;
}
.accordion-area li {
	margin: 10px 2%;
    display: inline-block;
    width: 44%;
    vertical-align: top;
        background: #fff;
}
.accordion-area section {
	border: #000 3px solid;
    border-radius: 10px;
}
.accordion-area .title {								/* アコーディオンのタイトル */
	position: relative;
	cursor: pointer;
	font-size: 1rem;
	font-weight: normal;
	padding: 10px 60px 10px 20px;
	transition: all .5s ease;
}
.accordion-area .title::before,							/* アコーディオンのアイコン */
.accordion-area .title::after {
	position: absolute;
	content: '';
	width: 15px;
	height: 2px;
	/* background: #333; */
}
.accordion-area .title::before {
	/* top: 48%; */
	right: 10px;
	transform: rotate(0deg);
    background-image: url(../img/pc/icon_plus.png);
    width: 30px;
    height: 30px;
}
.accordion-area .title::after {
	top: 48%;
	right: 15px;
	transform: rotate(90deg);
}
.accordion-area .title.close::before {
	transform: rotate(45deg);
    background-image: url(../img/pc/icon_plus.png);
    width: 30px;
    height: 30px;
}
.accordion-area .title.close::after {
	transform: rotate(-45deg);
}
.accordion-area .box {									/* アコーディオンの内容 */
	display: none;
	/* padding: 20px; */
    	padding: 5px 0px;
	margin: 0 20px 20px 20px;
	/* background: #eee; */
}
/* ▲▲▲ CSS（ここまで） ▲▲▲ */

.accordion-area .title .icon_part,
.accordion-area .box .icon_part
 {
    width: 30px;
    display: inline-block;
    vertical-align: top;
}

.accordion-area .title .title_part,
.accordion-area .box .title_part {
    width: 340px;
    display: inline-block;
    padding-left: 5px;
    vertical-align: top;
}

/*************************************
 *
 * company / 会社概要
 *
 ************************************/
.company {
        border-top-left-radius: 1000px 50px;
    border-top-right-radius: 1000px 50px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #FF9757;
    color: #fff;
    padding: 80px 0px;
    padding-bottom: 180px;
}

.company h2.sectionTitle {
    color: #fff;
    border-bottom: 3px solid #fff;
    font-size: 35px;
    font-weight: 600;
    width: 250px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    padding: 10px 10px 5px;
}

.company h2.sectionTitle::after {
    content: "";
    background-image: url(../img/pc/icon_company.svg);
    position: absolute;
    width: 44px;
    height: 44px;
    left: 10px;
}

.company .footerFrame {
    width: 1080px;
    margin: 0 auto;
}

.company .footerFrame .container {
    width: 800px;
    margin: 0 auto;
}

.company .footerFrame .container table {
    border-collapse: collapse; /* 線をまとめる */
    width: 100%;
    margin: 50px 0px;
}

.company .footerFrame .container table tr {
     border: 1px solid #99A1AF; /* 線を引く */
}

.company .footerFrame .container table tr th {
     border: 1px solid #99A1AF; /* 線を引く */
    background-color: #99A1AF;
    padding: 1%;
}

.company .footerFrame .container table tr td {
     border: 1px solid #99A1AF; /* 線を引く */
    background-color: #fff;
    padding: 1%;
    color: #000;
}

/*************************************
 *
 * flow / 追従フッターメニュー
 *
 ************************************/
.flow {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    z-index: 20;
}

.flow .contact {
    padding: 0px 0 10px;
}

.flow .contact ul {
    /* width: 100%;
    margin: 0 auto; */
    text-align: center;
}

.flow .contact ul li {
    padding: 10px;
    display: inline-block;
        vertical-align: middle;
}

.v_pc {
    display: block;
}

.v_sp {
    display: none;
}

/*************************************
 * serviceFlow / ご利用の流れ
 ************************************/
.serviceFlow {
    background: #fff;
    padding: 90px 0 70px;
    overflow: hidden;
}

.serviceFlow__inner {
    width: min(1080px, calc(100% - 40px));
    margin: 0 auto;
}

.serviceFlow__title {
    color: #0B2341;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;
    text-align: center;
    margin: 0 0 50px;
    letter-spacing: 0.05em;
    position: relative;
}

.serviceFlow__title::before,
.serviceFlow__title::after {
    content: "";
    display: inline-block;
    width: 52px;
    height: 34px;
    background: linear-gradient(45deg, transparent 43%, #F08A00 44%, #F08A00 52%, transparent 53%);
    vertical-align: middle;
    margin: 0 20px;
}

.serviceFlow__title::after {
    background: linear-gradient(135deg, transparent 43%, #F08A00 44%, #F08A00 52%, transparent 53%) !important;
}

.serviceFlow__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    margin: 0;
    padding: 0;
    counter-reset: flow;
}

.serviceFlow__item {
    position: relative;
    text-align: center;
}

.serviceFlow__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 190px;
    right: -28px;
    width: 0;
    height: 0;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 26px solid #F08A00;
}

.serviceFlow__head {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.serviceFlow__num {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, #FF9B00, #F07800);
    font-size: 34px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(240, 120, 0, 0.25);
}

.serviceFlow__head h3 {
    margin: 0;
    color: #0B2341;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}

.serviceFlow__head small {
    color: #F07800;
    font-size: 18px;
    font-weight: 800;
}

.serviceFlow__circle {
    width: 210px;
    height: 210px;
    margin: 18px auto 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #F5F1E6;
    box-shadow: inset 0 0 0 8px #fff, 0 10px 26px rgba(11, 35, 65, 0.12);
    position: relative;
    overflow: hidden;
}

.serviceFlow__circle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), transparent 35%), linear-gradient(135deg, rgba(255,151,87,.25), rgba(245,241,230,.2));
}

.serviceFlow__icon {
    position: relative;
    z-index: 1;
    font-size: 82px;
    line-height: 1;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,.12));
}

.serviceFlow__circle--phone .serviceFlow__icon,
.serviceFlow__circle--engine .serviceFlow__icon {
    color: #F07800;
}

.serviceFlow__item p {
    margin: 0;
    color: #222;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.8;
}

.serviceFlow__item p span {
    color: #F07800;
    font-weight: 800;
}

.serviceFlow__message {
    width: min(620px, 100%);
    margin: 46px auto 0;
    padding: 18px 24px;
    border-radius: 12px;
    background: #FFF4D8;
    color: #0B2341;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}

.service_flow_image {
    width: 100%;
    display: inline-block;
    /* padding: 1%; */
}

.service_flow_image img {
    width: 100%;
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
    .serviceFlow__list {
        gap: 22px;
    }

    .serviceFlow__circle {
        width: 180px;
        height: 180px;
    }

    .serviceFlow__item:not(:last-child)::after {
        top: 178px;
        right: -22px;
        border-top-width: 18px;
        border-bottom-width: 18px;
        border-left-width: 22px;
    }

    .serviceFlow__head h3 {
        font-size: 20px;
    }

    .serviceFlow__item p {
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    .serviceFlow {
        padding: 60px 0 50px;
    }

    .serviceFlow__inner {
        width: 92%;
    }

    .serviceFlow__title {
        font-size: 34px;
        margin-bottom: 32px;
    }

    .serviceFlow__title::before,
    .serviceFlow__title::after {
        display: none;
    }

    .serviceFlow__list {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .serviceFlow__item {
        padding-bottom: 36px;
    }

    .serviceFlow__item:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -12px;
        transform: translateX(50%) rotate(90deg);
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 22px solid #F08A00;
    }

    .serviceFlow__head {
        min-height: auto;
    }

    .serviceFlow__head h3 {
        font-size: 22px;
    }

    .serviceFlow__circle {
        width: 72vw;
        max-width: 280px;
        height: 72vw;
        max-height: 280px;
    }

    .serviceFlow__message {
        font-size: 18px;
        line-height: 1.6;
        width: 94%;
        padding: 3%;
    }
}