@charset "utf-8";
/* CSS Document */



/*PC_px*/
/*@media screen and (min-width: 1680px) {}*/



/*PC*/
@media print, screen and (min-width: 768px) {


/* =====================
   セクションレイアウト
===================== */
.sec01,
.sec02,
.sec03,
.sec04,
.sec05,
.sec06,
.sec07,
.sec_form { width: 100%; margin: 0 auto; text-align: center; }
.inner { margin: auto; }
.sec01 .inner { padding-bottom: 80px; position: relative;}
.sec01 .inner::after { content: ""; width: 122px; height: 22px; background: url("../images/index/sec01_arrow.png") 0 0; background-size: cover; position: absolute; bottom: 30px; left: 0; right: 0; margin: 0 auto;}

.sec02 { background: var(--color01); }
.sec02 .bg { padding: 50px 0; }
.sec02 h2 { color: var(--color02); margin-bottom: 50px; }

.sec03 .bg .inner {}
.sec03 h3 { background: var(--color05); color: var(--color01); padding: 16px 0; font-size: 25px; }
.sec04 .bg .inner { padding: 20px 0 50px;}

.sec05 .bg { background: var(--color01); }
.sec05 .bg .inner { padding: 80px 0 50px;}

.sec06 {}
.sec06 .bg .inner { padding: 80px 0 50px;}

.sec07 {}
.sec07 .bg .inner { padding: 80px 0 100px;}

.sec_form {}
.sec_form .bg { background: var(--color01); }
.sec_form .bg .inner { padding: 0 0 50px;}


/* =====================
   ボタン
===================== */

.btn-group { margin-top: 50px;}
.btn-viewmore { max-width: 200px; margin: auto;}
.btn-viewmore a { border: 2px solid var(--color05); background: var(--color00); color: var(--color05); border-radius: 50px; padding: 15px 0; display: block; width: 100%; font-size: 18px; text-align: center;}
.btn-viewmore a:hover { border: 2px solid var(--color05); background: var(--color99); color: var(--color00);}
.btn-advice { max-width: 1000px; margin: 32px auto 50px;}
.btn-advice a { background: #c1272d url("../images/index/btn_bg.png") center center no-repeat; color: var(--color00); width: 100%; height: 110px; display: block; align-content: center; font-size: 34px; border-radius: 100px; box-shadow: 5px 5px 5px -5px rgba(0,0,0,0.3);}
.btn-advice a:hover { opacity: 0.6;}


/* =====================
   Works・Planリスト
===================== */
.works-lead { font-size: 20px; margin-bottom: 50px;}
.works-list { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1000px; margin: 0 auto 50px;}

.card { width: calc( 50% - 15px ); margin-top: 40px;}
.card:nth-of-type(1),
.card:nth-of-type(2) { margin-top: 0;}
.youtube__wrap { position: relative; width: 100%; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;}
.youtube__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.youtube__wrap iframe { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 2;}
.youtube__wrap.active .youtube__thumbnail { display: none;}
.youtube__wrap.active iframe { display: block;}

.caption { display: flex; justify-content: center; padding: 10px 0;}
.caption p { font-size: 18px; font-weight: 500; color: var(--color03);}

.plan-wrap { max-width: 1030px; margin: auto; overflow: hidden; padding-bottom: 50px;}
.plan-wrap .swiper-slide { height: auto;}
.plan-wrap .swiper .swiper-slide-item { height: 100%;}
.plan-wrap .swiper-slide.regular .plan-title,
.plan-wrap .swiper-slide.bronze .plan-title,
.plan-wrap .swiper-slide.silver .plan-title,
.plan-wrap .swiper-slide.gold .plan-title,
.plan-wrap .swiper-slide.platinum .plan-title { color: var(--color05); padding: 15px 0;}
.plan-wrap .swiper-slide.regular .plan-title { background: var(--color11); color: var(--color00); }
.plan-wrap .swiper-slide.bronze .plan-title { background: var(--color21); color: var(--color00); }
.plan-wrap .swiper-slide.silver .plan-title { background: var(--color31); color: var(--color00); }
.plan-wrap .swiper-slide.gold .plan-title { background: var(--color41); color: var(--color00); }
.plan-wrap .swiper-slide.platinum .plan-title { background: var(--color51); color: var(--color00); }
.plan-wrap .swiper-slide.regular { background: var(--color12);}
.plan-wrap .swiper-slide.bronze { background: var(--color22);}
.plan-wrap .swiper-slide.silver { background: var(--color32);}
.plan-wrap .swiper-slide.gold { background: var(--color42);}
.plan-wrap .swiper-slide.platinum { background: var(--color52);}
.plan-wrap .box { height: 100%;}

.swiper-button-prev { position: relative; top: inherit !important; bottom: 0 !important; left:  42% !important;}
.swiper-button-next { position: relative; top: inherit !important; bottom: 0 !important; right: 42% !important;}

.swiper-button-prev::after,
.swiper-button-next::after { font-size: 20px !important; color: #000 !important; font-weight: 700 !important;}


/* =====================
   マップ
===================== */
.map { max-width: 750px; height: 420px; background: #eee; margin: 0 auto 50px; }
.map iframe { width: 100%; height: 100%; border: none; }

/* =====================
   補足・小パーツ
===================== */
.ttl-jp { font-size: 14px; font-weight: 500; color: var(--color02); margin-bottom: 30px;}
/*.ttl-jp::before { content: attr(data-en); display: block; font-size: 30px; font-weight: 600; color: var(--color99); margin-bottom: 10px;}*/
.ttl-jp span::before { content: attr(data-en); display: block; font-size: 30px; font-weight: 600; color: var(--color99); margin-bottom: 10px;}
.note { font-size: 18px; color: #111; padding: 0 30px;}
.faq-list { text-align:left; display:inline-block; }
.change-list { background: var(--color00); border-radius:8px; padding:15px; display:inline-block; text-align: left; }
.change-list li { font-size: 24px; padding-left: 45px; position: relative; margin-top: 10px;}
.change-list li:nth-of-type(1) { margin-top: 0;}
.change-list li::before { content: ""; background: url("../images/index/check_img.png") 0 0; width: 39px; height: 28px; display: block; position: absolute; bottom: 2px; left: 0;}
.flow-list { text-align:left; display:inline-block; }

/* =====================
   変化リスト囲み線
===================== */
.line { padding: 30px 0; margin: 40px auto 60px; max-width: 990px; position: relative;}
.line::before { content: ""; position: absolute; top: 0; left: 0; right: 10px; bottom: 0; border: solid 2px var(--color99); border-radius: 40px;}
.line::after  { content: ""; position: absolute; top: 0; left: 0; right: 10px; bottom: 0; border: solid 2px var(--color99); border-radius: 40px; transform: translateX(10px) translateY(10px);}

/* =====================
   よくある悩みイラスト
===================== */
.faq-illust-list { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 24px auto; max-width: 1000px; gap: 32px; }
.faq-illust-list li { width: 226px; text-align: center; margin-bottom: 24px; }
.faq-illust-list li:nth-child(n+5) { width: 226px; }
.faq-illust-list img { width: 100%; height: auto; object-fit: contain; margin-bottom: 8px; }
.faq-illust-list p { font-size: 18px; margin: 0; }
.faq-message { margin: 32px auto 0; padding: 60px 0;  font-size: 20px; line-height: 2.0; font-weight: 600; color: var(--color99); text-align: center; max-width: 1000px; background: var(--color00); position: relative;} 
.faq-message::before { content: ""; height: 30px; background: url("../images/index/faq-message_bg.png") 0 0 repeat-x; position: absolute; top: 0; left: 0; right: 0;} 
.faq-message::after { content: ""; height: 30px; background: url("../images/index/faq-message_bg.png") 0 0 repeat-x; position: absolute; bottom: 0; left: 0; right: 0;} 

/* =====================
   FLOWセクション
===================== */
.flow-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 40px 0; counter-reset: flow-num; max-width: 820px; margin-left: auto; margin-right: auto; }
.flow-list li { background: var(--color00); border-radius: 12px; padding: 24px 16px; width: 100%; position: relative; text-align: left; display: flex; flex-direction: row; align-items: flex-start; margin-top: 24px;}
.flow-list li:nth-of-type(1) { margin-top: 0;}

.flow-step { display: flex; flex-direction: row; align-items: center; flex-grow: 1; position: relative; }
.flow-step::before { content: ''; position: absolute; left: 96px; top: 0; bottom: 0; width: 2px; background: var(--color05); border-radius: 1px; }
.flow-no { width: 98px; text-align: center; font-size: 30px;}
.flow-no span { font-size: 15px; display: block;}

.flow-box { height: 100%; padding: 0 0 0 20px; display: flex; justify-content: flex-start; align-items: center; }
.flow-box .flow-img { width: 80px; margin-right: 20px;}
.flow-txt { height: 100%;}
.flow-step h4 { font-size: 20px; }
.flow-step p { font-size: 15px; margin: 8px 0 0;}
.flow-txt span { font-size: 0.85em; color: #d32f2f; }
.flow-lead { font-size: 20px; color: var(--color05); margin: 8px 0 15px; text-align: center; }
.flow-note { font-size: 16px; color: var(--color03); margin: 0 0 55px 0; text-align: center; }


.plan-lead { font-size: 20px; color: var(--color05); margin: 8px 0 0 0; text-align: center; }
.plan-note { font-size: 17px; color: var(--color03); margin: 2px 0 40px 0; text-align: center; }
.plan-kana { font-size: 16px; color: var(--color03); letter-spacing: 0.1em; margin-bottom: 2px; display: inline-block; }
.plan-title { text-align: center; margin-bottom: 4px; }
.plan-title h3 { margin: 0 0 2px 0; font-size: 26px; }
.plan-title .plan-kana { margin-bottom: 0; }
.plan-price { font-size: 50px; font-weight: bold; text-align: center; margin-bottom: 4px; position: relative; }
.plan-price::after { content: ''; display: block; width: 100%; height: 2px; background: var(--color05); margin: 10px auto 0 auto; border-radius: 1px; }
.plan-price span { font-size: 28px; color: var(--color03); margin-left: 2px; }
.plan-detail { margin-bottom: 4px; text-align: left; padding: 5px 10px 10px; flex-grow: 1;}
.plan-detail p { font-size: 17px; margin: 0 0 20px 0; }
.plan-detail ul { padding-left: 0; margin: 0; }
.plan-detail ul li { color: var(--color05); font-size: 17px; padding-left: 1.2em; position: relative;}
.plan-detail ul li::before { content: "●"; position: absolute; top: 0; left: 0;}
.plan-title h3, .plan-title .plan-kana { color: var(--color05); }
.office-desc { text-align: center; font-size: 20px; margin: 8px 0 30px 0; }
.office-sub { text-align: center; font-size: 1.15em; font-weight: bold; margin: 10px 0 4px 0; color: var(--color05); }
.hero-img { width: 1066px; display: block; margin-left: auto; margin-right: auto; }
.catch-copy { background: #111; color: var(--color00); width: 520px; margin: 16px auto; text-align: center; padding: 10px 0; border-radius: 6px; font-size: 20px; font-weight: bold;}





}



/*sp*/
@media only screen and (max-width: 767px) {

/* =====================
   セクションレイアウト
===================== */
.sec01,
.sec02,
.sec03,
.sec04,
.sec05,
.sec06,
.sec07,
.sec_form { width: 100%; margin: 0 auto; text-align: center; }
.inner { margin: auto; }
.sec01 .inner { padding-bottom: 12.5vw; position: relative;}
.sec01 .inner::after { content: ""; width: 19.063vw; height: 3.438vw; background: url("../images/index/sec01_arrow.png") 0 0; background-size: cover; position: absolute; bottom: 4.688vw; left: 0; right: 0; margin: 0 auto;}

.sec02 { background: var(--color01); }
.sec02 .bg { padding: 7.813vw 0 1.563vw; }
.sec02 h2 { color: var(--color02); margin-bottom: 7.813vw; }

.sec03 .bg .inner {}
.sec03 h3 { background: var(--color05); color: var(--color01); padding: 2.5vw 0; font-size: 3.906vw; }
.sec04 .bg .inner { padding: 3.125vw 0 12.5vw;}

.sec05 .bg { background: var(--color01); }
.sec05 .bg .inner { padding: 12.5vw 0 7.813vw;}

.sec06 {}
.sec06 .bg .inner { padding: 12.5vw 0 0;}

.sec07 {}
.sec07 .bg .inner { padding: 3.125vw 0 12.5vw;}

.sec_form {}
.sec_form .bg { background: var(--color01); }
.sec_form .bg .inner { padding: 0 0 7.813vw;}


/* =====================
   ボタン
===================== */

.btn-group { margin-top: 7.813vw;}
.btn-viewmore { max-width: 31.25vw; margin: auto;}
.btn-viewmore a { border: 2px solid var(--color05); background: var(--color00); color: var(--color05); border-radius: 7.813vw; padding: 2.344vw 0; display: block; width: 100%; font-size: 2.813vw; text-align: center;}
.btn-viewmore a:hover { border: 2px solid var(--color05); background: var(--color99); color: var(--color00);}
.btn-advice { max-width: 95.313vw; margin: 5vw auto 7.813vw;}
.btn-advice a { background: #c1272d url("../images/index/btn_bg_sp.png") center center no-repeat; background-size: contain; color: var(--color00); width: 100%; height: 17.188vw; display: block; align-content: center; font-size: 5.313vw; border-radius: 15.625vw; box-shadow: 5px 5px 5px -5px rgba(0,0,0,0.3);}
.btn-advice a:hover { opacity: 0.6;}


/* =====================
   Works・Planリスト
===================== */
.works-lead { font-size: 3.125vw; margin-bottom: 4.688vw;}
.works-list { display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; width: auto; margin: 0 4.688vw 4.688vw;}

.card { width: 100%; margin-top: 6.25vw;}
.card:nth-of-type(1) { margin-top: 0;}
.youtube__wrap { position: relative; width: 100%; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;}
.youtube__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.youtube__wrap iframe { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 2;}
.youtube__wrap.active .youtube__thumbnail { display: none;}
.youtube__wrap.active iframe { display: block;}

.caption { display: flex; justify-content: center; padding: 1.563vw 0;}
.caption p { font-size: 2.031vw; font-weight: 500; color: var(--color03);}

.plan-wrap { width: auto; margin: auto 4.688vw; overflow: hidden; position: relative; padding-bottom: 50px;}
.plan-wrap .swiper-slide { height: auto;}
.plan-wrap .swiper .swiper-slide-item { height: 100%;}
.plan-wrap .swiper-slide.regular .plan-title,
.plan-wrap .swiper-slide.bronze .plan-title,
.plan-wrap .swiper-slide.silver .plan-title,
.plan-wrap .swiper-slide.gold .plan-title,
.plan-wrap .swiper-slide.platinum .plan-title { color: var(--color05); padding: 15px 0;}
.plan-wrap .swiper-slide.regular .plan-title { background: var(--color11); color: var(--color00); }
.plan-wrap .swiper-slide.bronze .plan-title { background: var(--color21); color: var(--color00); }
.plan-wrap .swiper-slide.silver .plan-title { background: var(--color31); color: var(--color00); }
.plan-wrap .swiper-slide.gold .plan-title { background: var(--color41); color: var(--color00); }
.plan-wrap .swiper-slide.platinum .plan-title { background: var(--color51); color: var(--color00); }
.plan-wrap .swiper-slide.regular { background: var(--color12);}
.plan-wrap .swiper-slide.bronze { background: var(--color22);}
.plan-wrap .swiper-slide.silver { background: var(--color32);}
.plan-wrap .swiper-slide.gold { background: var(--color42);}
.plan-wrap .swiper-slide.platinum { background: var(--color52);}
.plan-wrap .box { height: 100%;}

.swiper-button-prev { position: relative; top: inherit !important; bottom: 0 !important; left:  42% !important;}
.swiper-button-next { position: relative; top: inherit !important; bottom: 0 !important; right: 42% !important;}

.swiper-button-prev::after,
.swiper-button-next::after { font-size: 20px !important; color: #000 !important; font-weight: 700 !important;}


/* =====================
   マップ
===================== */
.map { max-width: 117.188vw; height: 65.625vw; background: #eee; margin: 0 auto 7.813vw; }
.map iframe { width: 100%; height: 100%; border: none; }

/* =====================
   補足・小パーツ
===================== */
.ttl-jp { font-size: 2.188vw; font-weight: 500; color: var(--color02); margin-bottom: 4.688vw;}
.ttl-jp span::before { content: attr(data-en); display: block; font-size: 6.25vw; font-weight: 600; color: var(--color99); margin-bottom: 2.344vw;}
.note { font-size: 2.813vw; color: #111; }
.faq-list { text-align:left; display:inline-block; }
.change-list { background: var(--color00); border-radius: 1.25vw; padding: 2.344vw 6.25vw; display: block; text-align: left; }
.change-list li { font-size: 4.063vw; padding-left: 7.031vw; position: relative; margin-top: 1.563vw;}
.change-list li:nth-of-type(1) { margin-top: 0;}
.change-list li::before { content: ""; background: url("../images/index/check_img.png") 0 0; background-size: cover; width: 6.094vw; height: 4.375vw; display: block; position: absolute; top: 1.094vw; left: 0;}
.flow-list { text-align:left; display:inline-block; }

/* =====================
   変化リスト囲み線
===================== */
.line { padding: 4.688vw 0; margin: 6.25vw 3.125vw 9.375vw; max-width: 154.688vw; position: relative;}
.line::before { content: ""; position: absolute; top: 0; left: 0; right: 1.563vw; bottom: 0; border: solid 2px var(--color99); border-radius: 6.25vw;}
.line::after  { content: ""; position: absolute; top: 0; left: 0; right: 1.563vw; bottom: 0; border: solid 2px var(--color99); border-radius: 6.25vw; transform: translateX(1.563vw) translateY(1.563vw);}

/* =====================
   よくある悩みイラスト
===================== */
.faq-illust-list { display: flex; justify-content: center; padding: 0; margin: 2.344vw auto; width: 100%; }
.faq-illust-list:nth-of-type(1) { gap: 5%; }
.faq-illust-list:nth-of-type(2) { gap: 2%; }
.faq-illust-list:nth-of-type(3) { gap: 5%; }
.faq-illust-list li { text-align: center; }
.faq-illust-list:nth-of-type(1) li { width: 35%; }
.faq-illust-list:nth-of-type(2) li { width: 30%; }
.faq-illust-list:nth-of-type(3) li { width: 35%; }
.faq-illust-list img { width: 100%; height: auto; object-fit: contain; margin-bottom: 1.25vw; }
.faq-illust-list p { font-size: 2.813vw; margin: 0; }
.faq-message { margin: 5vw auto 0; padding: 9.375vw 0;  font-size: 3.125vw; line-height: 2.0; font-weight: 600; color: var(--color99); text-align: center; max-width: 156.25vw; background: var(--color00); position: relative;} 
.faq-message::before { content: ""; height: 4.688vw; background: url("../images/index/faq-message_bg.png") 0 0 repeat-x; background-size: contain; position: absolute; top: 0; left: 0; right: 0;} 
.faq-message::after { content: ""; height: 4.688vw; background: url("../images/index/faq-message_bg.png") 0 0 repeat-x; background-size: contain; position: absolute; bottom: 0; left: 0; right: 0;} 

/* =====================
   FLOWセクション
===================== */
.flow-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 6.25vw 3.125vw 0; counter-reset: flow-num; width: auto; }
.flow-list li { background: var(--color00); border-radius: 1.875vw; padding: 3.75vw 2.5vw; width: 100%; position: relative; text-align: left; display: flex; flex-direction: row; align-items: flex-start; margin-top: 3.75vw;}
.flow-list li:nth-of-type(1) { margin-top: 0;}

.flow-step { display: flex; flex-direction: row; align-items: center; flex-grow: 1; position: relative; }
.flow-step::before { content: ''; position: absolute; left: 15vw; top: 0; bottom: 0; width: 0.313vw; background: var(--color05); border-radius: 0.156vw; }
.flow-no { width: 15.313vw; text-align: center; font-size: 4.688vw;}
.flow-no span { font-size: 2.344vw; display: block;}

.flow-box { width: calc( 100% - 15.313vw ); height: 100%; padding: 0 0 0 3.125vw; display: flex; justify-content: flex-start; align-items: center; }
.flow-box .flow-img { width: 12.5vw; margin-right: 3.125vw;}
.flow-txt { width: calc( 100% - 15.625vw ); height: 100%;}
.flow-step h4 { font-size: 3.125vw; }
.flow-step p { font-size: 2.344vw; margin: 1.25vw 0 0;}
.flow-txt span { font-size: 0.85em; color: #d32f2f; }
.flow-lead { font-size: 3.125vw; color: var(--color05); margin: 1.25vw 0 1.563vw; text-align: center; }
.flow-note { font-size: 2.5vw; color: var(--color03); margin: 0 0 6.25vw 0; text-align: center; }


.plan-lead { font-size: 3.125vw; color: var(--color05); margin: 1.25vw 0 0 0; text-align: center; }
.plan-note { font-size: 2.656vw; color: var(--color03); margin: 0.313vw 0 6.25vw 0; text-align: center; }
.plan-kana { font-size: 2.5vw; color: var(--color03); letter-spacing: 0.1em; margin-bottom: 0.313vw; display: inline-block; }
.plan-title { text-align: center; margin-bottom: 0.625vw; }
.plan-title h3 { margin: 0 0 0.313vw 0; font-size: 4.063vw; }
.plan-title .plan-kana { margin-bottom: 0; }
.plan-price { font-size: 7.813vw; font-weight: bold; text-align: center; margin-bottom: 0.625vw; position: relative; }
.plan-price::after { content: ''; display: block; width: 100%; height: 0.313vw; background: var(--color05); margin: 1.563vw auto 0 auto; border-radius: 0.156vw; }
.plan-price span { font-size: 4.375vw; color: var(--color03); margin-left: 0.313vw; }
.plan-detail { margin-bottom: 0.625vw; text-align: left; padding: 0.781vw 2.344vw 2.344vw; }
.plan-detail p { font-size: 2.656vw; margin: 0 0 3.125vw 0; }
.plan-detail ul { padding-left: 0; margin: 0; }
.plan-detail ul li { color: var(--color05); font-size: 2.656vw; padding-left: 1.2em; position: relative;}
.plan-detail ul li::before { content: "●"; position: absolute; top: 0; left: 0;}
.plan-title h3, .plan-title .plan-kana { color: var(--color05); }
.office-desc { text-align: center; font-size: 3.125vw; margin: 1.25vw 0 4.688vw 0; }
.office-sub { text-align: center; font-size: 1.15em; font-weight: bold; margin: 1.563vw 0 0.625vw 0; color: var(--color05); }
.hero-img { width: 166.563vw; display: block; margin-left: auto; margin-right: auto; }
.catch-copy { background: #111; color: var(--color00); width: 75vw; margin: 16px auto; text-align: center; padding: 1.563vw 0; font-size: 4.063vw; font-weight: bold;}




}



/*sp_px*/
@media screen and (width: 640px) {

/* =====================
   セクションレイアウト
===================== */
.sec01,
.sec02,
.sec03,
.sec04,
.sec05,
.sec06,
.sec07,
.sec_form { width: 100%; margin: 0 auto; text-align: center; }
.inner { margin: auto; }
.sec01 .inner { padding-bottom: 80px; position: relative;}
.sec01 .inner::after { content: ""; width: 122px; height: 22px; background: url("../images/index/sec01_arrow.png") 0 0; background-size: cover; position: absolute; bottom: 30px; left: 0; right: 0; margin: 0 auto;}

.sec02 { background: var(--color01); }
.sec02 .bg { padding: 50px 0 10px; }
.sec02 h2 { color: var(--color02); margin-bottom: 50px; }

.sec03 .bg .inner {}
.sec03 h3 { background: var(--color05); color: var(--color01); padding: 16px 0; font-size: 25px; }
.sec04 .bg .inner { padding: 20px 0 80px;}

.sec05 .bg { background: var(--color01); }
.sec05 .bg .inner { padding: 80px 0 50px;}

.sec06 {}
.sec06 .bg .inner { padding: 80px 0 0;}

.sec07 {}
.sec07 .bg .inner { padding: 20px 0 80px;}

.sec_form {}
.sec_form .bg { background: var(--color01); }
.sec_form .bg .inner { padding: 0 0 50px;}


/* =====================
   ボタン
===================== */

.btn-group { margin-top: 50px;}
.btn-viewmore { max-width: 200px; margin: auto;}
.btn-viewmore a { border: 2px solid var(--color05); background: var(--color00); color: var(--color05); border-radius: 50px; padding: 15px 0; display: block; width: 100%; font-size: 18px; text-align: center;}
.btn-viewmore a:hover { border: 2px solid var(--color05); background: var(--color99); color: var(--color00);}
.btn-advice { max-width: 610px; margin: 32px auto 50px;}
.btn-advice a { background: #c1272d url("../images/index/btn_bg_sp.png") center center no-repeat; background-size: contain; color: var(--color00); width: 100%; height: 110px; display: block; align-content: center; font-size: 34px; border-radius: 100px; box-shadow: 5px 5px 5px -5px rgba(0,0,0,0.3);}
.btn-advice a:hover { opacity: 0.6;}


/* =====================
   Works・Planリスト
===================== */
.works-lead { font-size: 20px; margin-bottom: 30px;}
.works-list { display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; width: auto; margin: 0 30px 30px;}

.card { width: 100%; margin-top: 40px;}
.card:nth-of-type(1) { margin-top: 0;}
.youtube__wrap { position: relative; width: 100%; cursor: pointer; aspect-ratio: 16 / 9; overflow: hidden;}
.youtube__thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.youtube__wrap iframe { display: none; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 2;}
.youtube__wrap.active .youtube__thumbnail { display: none;}
.youtube__wrap.active iframe { display: block;}

.caption { display: flex; justify-content: center; padding: 10px 0;}
.caption p { font-size: 13px; font-weight: 500; color: var(--color03);}

.plan-wrap { width: auto; margin: auto 30px; overflow: hidden; position: relative; padding-bottom: 50px;}
.plan-wrap .swiper-slide { height: auto;}
.plan-wrap .swiper .swiper-slide-item { height: 100%;}
.plan-wrap .swiper-slide.regular .plan-title,
.plan-wrap .swiper-slide.bronze .plan-title,
.plan-wrap .swiper-slide.silver .plan-title,
.plan-wrap .swiper-slide.gold .plan-title,
.plan-wrap .swiper-slide.platinum .plan-title { color: var(--color05); padding: 15px 0;}
.plan-wrap .swiper-slide.regular .plan-title { background: var(--color11); color: var(--color00); }
.plan-wrap .swiper-slide.bronze .plan-title { background: var(--color21); color: var(--color00); }
.plan-wrap .swiper-slide.silver .plan-title { background: var(--color31); color: var(--color00); }
.plan-wrap .swiper-slide.gold .plan-title { background: var(--color41); color: var(--color00); }
.plan-wrap .swiper-slide.platinum .plan-title { background: var(--color51); color: var(--color00); }
.plan-wrap .swiper-slide.regular { background: var(--color12);}
.plan-wrap .swiper-slide.bronze { background: var(--color22);}
.plan-wrap .swiper-slide.silver { background: var(--color32);}
.plan-wrap .swiper-slide.gold { background: var(--color42);}
.plan-wrap .swiper-slide.platinum { background: var(--color52);}
.plan-wrap .box { height: 100%;}

.swiper-button-prev { position: relative; top: inherit !important; bottom: 0 !important; left:  42% !important;}
.swiper-button-next { position: relative; top: inherit !important; bottom: 0 !important; right: 42% !important;}

.swiper-button-prev::after,
.swiper-button-next::after { font-size: 20px !important; color: #000 !important; font-weight: 700 !important;}


/* =====================
   マップ
===================== */
.map { max-width: 750px; height: 420px; background: #eee; margin: 0 auto 50px; }
.map iframe { width: 100%; height: 100%; border: none; }

/* =====================
   補足・小パーツ
===================== */
.ttl-jp { font-size: 14px; font-weight: 500; color: var(--color02); margin-bottom: 30px;}
.ttl-jp span::before { content: attr(data-en); display: block; font-size: 40px; font-weight: 600; color: var(--color99); margin-bottom: 15px;}
.note { font-size: 18px; color: #111; }
.faq-list { text-align:left; display:inline-block; }
.change-list { background: var(--color00); border-radius: 8px; padding: 15px 40px; display: block; text-align: left; }
.change-list li { font-size: 26px; padding-left: 45px; position: relative; margin-top: 10px;}
.change-list li:nth-of-type(1) { margin-top: 0;}
.change-list li::before { content: ""; background: url("../images/index/check_img.png") 0 0; background-size: cover; width: 39px; height: 28px; display: block; position: absolute; top: 7px; left: 0;}
.flow-list { text-align:left; display:inline-block; }

/* =====================
   変化リスト囲み線
===================== */
.line { padding: 30px 0; margin: 40px 20px 60px; max-width: 990px; position: relative;}
.line::before { content: ""; position: absolute; top: 0; left: 0; right: 10px; bottom: 0; border: solid 2px var(--color99); border-radius: 40px;}
.line::after  { content: ""; position: absolute; top: 0; left: 0; right: 10px; bottom: 0; border: solid 2px var(--color99); border-radius: 40px; transform: translateX(10px) translateY(10px);}

/* =====================
   よくある悩みイラスト
===================== */
.faq-illust-list { display: flex; justify-content: center; padding: 0; margin: 15px auto; width: 100%; }
.faq-illust-list:nth-of-type(1) { gap: 5%; }
.faq-illust-list:nth-of-type(2) { gap: 2%; }
.faq-illust-list:nth-of-type(3) { gap: 5%; }
.faq-illust-list li { text-align: center; }
.faq-illust-list:nth-of-type(1) li { width: 35%; }
.faq-illust-list:nth-of-type(2) li { width: 30%; }
.faq-illust-list:nth-of-type(3) li { width: 35%; }
.faq-illust-list img { width: 100%; height: auto; object-fit: contain; margin-bottom: 8px; }
.faq-illust-list p { font-size: 18px; margin: 0; }
.faq-message { margin: 32px auto 0; padding: 60px 0;  font-size: 20px; line-height: 2.0; font-weight: 600; color: var(--color99); text-align: center; max-width: 1000px; background: var(--color00); position: relative;} 
.faq-message::before { content: ""; height: 30px; background: url("../images/index/faq-message_bg.png") 0 0 repeat-x; background-size: contain; position: absolute; top: 0; left: 0; right: 0;} 
.faq-message::after { content: ""; height: 30px; background: url("../images/index/faq-message_bg.png") 0 0 repeat-x; background-size: contain; position: absolute; bottom: 0; left: 0; right: 0;} 

/* =====================
   FLOWセクション
===================== */
.flow-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 40px 20px 0; counter-reset: flow-num; width: auto; }
.flow-list li { background: var(--color00); border-radius: 12px; padding: 24px 16px; width: 100%; position: relative; text-align: left; display: flex; flex-direction: row; align-items: flex-start; margin-top: 24px;}
.flow-list li:nth-of-type(1) { margin-top: 0;}

.flow-step { display: flex; flex-direction: row; align-items: center; flex-grow: 1; position: relative; }
.flow-step::before { content: ''; position: absolute; left: 96px; top: 0; bottom: 0; width: 2px; background: var(--color05); border-radius: 1px; }
.flow-no { width: 98px; text-align: center; font-size: 30px;}
.flow-no span { font-size: 15px; display: block;}

.flow-box { width: calc( 100% - 98px ); height: 100%; padding: 0 0 0 20px; display: flex; justify-content: flex-start; align-items: center; }
.flow-box .flow-img { width: 80px; margin-right: 20px;}
.flow-txt { width: calc( 100% - 100px ); height: 100%;}
.flow-step h4 { font-size: 20px; }
.flow-step p { font-size: 15px; margin: 8px 0 0;}
.flow-txt span { font-size: 0.85em; color: #d32f2f; }
.flow-lead { font-size: 20px; color: var(--color05); margin: 8px 0 10px; text-align: center; }
.flow-note { font-size: 16px; color: var(--color03); margin: 0 0 40px 0; text-align: center; }


.plan-lead { font-size: 20px; color: var(--color05); margin: 8px 0 0 0; text-align: center; }
.plan-note { font-size: 17px; color: var(--color03); margin: 2px 0 40px 0; text-align: center; }
.plan-kana { font-size: 16px; color: var(--color03); letter-spacing: 0.1em; margin-bottom: 2px; display: inline-block; }
.plan-title { text-align: center; margin-bottom: 4px; }
.plan-title h3 { margin: 0 0 2px 0; font-size: 26px; }
.plan-title .plan-kana { margin-bottom: 0; }
.plan-price { font-size: 50px; font-weight: bold; text-align: center; margin-bottom: 4px; position: relative; }
.plan-price::after { content: ''; display: block; width: 100%; height: 2px; background: var(--color05); margin: 10px auto 0 auto; border-radius: 1px; }
.plan-price span { font-size: 28px; color: var(--color03); margin-left: 2px; }
.plan-detail { margin-bottom: 4px; text-align: left; padding: 5px 15px 15px; }
.plan-detail p { font-size: 17px; margin: 0 0 20px 0; }
.plan-detail ul { padding-left: 0; margin: 0; }
.plan-detail ul li { color: var(--color05); font-size: 17px; padding-left: 1.2em; position: relative;}
.plan-detail ul li::before { content: "●"; position: absolute; top: 0; left: 0;}
.plan-title h3, .plan-title .plan-kana { color: var(--color05); }
.office-desc { text-align: center; font-size: 20px; margin: 8px 0 30px 0; }
.office-sub { text-align: center; font-size: 1.15em; font-weight: bold; margin: 10px 0 4px 0; color: var(--color05); }
.hero-img { width: 1066px; display: block; margin-left: auto; margin-right: auto; }
.catch-copy { background: #111; color: var(--color00); width: 480px; margin: 16px auto; text-align: center; padding: 10px 0; font-size: 26px; font-weight: bold;}



}