@charset "utf-8";
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/*==============================================================================
【common】
================================================================================*/
*,*::before,*::after { box-sizing: border-box;}
html { font-size: 100%; scroll-padding-top: var(--header-height, 0px); /*scroll-behavior: smooth;*/}
body { background: #fff; color:#000; font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))), 16px); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 1.5; margin:0; padding:0; text-size-adjust: 100%; position:relative; width:100%; -webkit-text-size-adjust: 100%;}

/*グローバルメニューの開始幅で設定
------------------------------------------------*/
@media screen and (min-width: 0px) and (max-width: 1365px){
html,body { overflow-x: hidden;}
html, body, #app { touch-action: pan-y; overscroll-behavior-x: contain;}

body.menu-open { overflow: hidden; position: relative;  height: 100vh;}
}

img, picture, video, canvas, svg { display: block; height: auto; min-width: 0; max-width: 100%;}
ul, ol, li { list-style:none; padding:0; margin:0; }
a, a:active, a:focus, a:hover {text-decoration: none;}
a img { border-style:none; backface-visibility:hidden;}
a:hover img { text-decoration: none;}

input, button, textarea, select, fieldset { font-family: inherit; font-size: 100%; margin: 0;}
button, input[type="button"], input[type="submit"] { cursor: pointer;}

.clearfix:before,
.clearfix:after { content:" "; display:table; }
.clearfix:after { clear:both; }

/*hover時の挙動
------------------------------------------------*/
a,
img { transition: 0.3s ease-in-out; }
a:hover img { opacity: 0.8; }

/*Bootstrapのガター調整
------------------------------------------------*/
.no-gutter { margin-left: 0; margin-right: 0;}
.no-gutter > [class*="col-"] { padding-left: 0; padding-right: 0;}


/*ハンバーガーメニューの時だけ表示・非表示
⇒今回は1365pxで切り替え
------------------------------------------------*/
.d-1365-none {  display: none;}
@media (max-width: 1365px) {
.d-1365-none { display: inline-block;}
}

/*基本のSP用の表示・非表示*/
.appearForPC { display: block;}
.appearForSP { display: none;}

@media (max-width: 768px) {
.appearForPC { display: none;}
.appearForSP { display: block;}
}

/*共用のwrap
------------------------------------------------*/
.wrap { margin: 0 auto; padding: 0; max-width: 1320px;}
@media (max-width: 1399px) { .wrap { max-width: 1140px; } }
@media (max-width: 1199px) { .wrap { max-width: 960px; } }
@media (max-width: 991px) { .wrap { max-width: 720px; } }
@media (max-width: 767px) { .wrap { max-width: 640px; padding: 0 10px; } }
@media (max-width: 575px) { .wrap { max-width: 100%; padding: 0 10px; } }

.wrap_800 { margin: 0 auto; padding: 0; max-width: 800px;}



/*基本のタイトル
------------------------------------------------*/
h2.secTtl { font-size: clamp(24px, calc(24px + (36 - 24) * ((100vw - 320px) / (1920 - 320))), 36px); font-weight: 700; line-height: 1.5; margin: 0 0 40px 0; text-align: center;}

@media (max-width: 991px) {
h2.secTtl { margin: 0 0 20px 0; }
}

/*文中で青色にして下線を付ける*/
h2.secTtl em { border-bottom: 1px solid #2EA7E0; color: #2EA7E0; display: inline-block; font-style: normal; }

/*青色の英文字*/
h2.secTtl span { color: #2EA7E0;; display: block; font-family: "Kanit"; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0.75px; margin: 14px 0 0 0;}

@media (max-width: 991px) {
h2.secTtl span { margin: 7px 0 0 0;}
}

/*サブタイトルがつく場合*/
h2.secTtl small { display: block; font-size: clamp(16px, calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320))), 24px); font-weight: 700; line-height: 1; margin: 0 0 8px 0;}

/*オレンジ背景のバッジ*/
.badge { display: flex; justify-content: center; align-items: center; gap: 10px;}
.badge span { background: #EA5514; color: #fff; font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 700; margin: 0 0 10px 0; padding: 10px; }

/*改行の表示・非表示*/
h2.secTtl br { display: none;}
@media (max-width: 430px) { h2.secTtl br { display: block;} }



/*==============================================================================
【ヘッダー】ハンバーガーメニューは後述
===============================================================================*/
#header { background: rgba(255,255,255,1); display: flex; align-content: space-between; align-items: center; flex-wrap: nowrap; justify-content: space-between; margin: 0 auto; position: fixed; top: 0; left: 0; padding: 0 4px; width:100%; z-index: 100; }


/*ロゴ
------------------------------------------------*/
#header h1 { flex-shrink: 0; margin: 0; padding: 0 0 0 36px;}
#header h1 img { max-height: 68px; max-width: 200px;}

@media (max-width: 1365px) {
#header h1 { flex-shrink: 0; margin: 0; padding: 0;}
}


/*PC版メニュー大枠
------------------------------------------------*/
.menu { display: flex; align-content: flex-end; align-items: center; flex-grow: 1; flex-wrap: nowrap; justify-content: flex-end;}

/*PC版メニューリスト一式*/
.menu ul { display: flex; align-content: center; align-items: center; flex-grow: 1; flex-shrink: 1; flex-wrap: nowrap; justify-content: space-evenly; list-style: none; margin: 0; padding: 0; max-width: 75%; }
.menu ul li a span {  display: block; font-size: 16px; font-weight: 700; line-height: 1;}

/*リンク色*/
.menu ul li a,
.menu ul li a:visited { color: #000; white-space: nowrap; }
.menu ul li a:hover,
.menu ul li a:active { color: #0E6EB8;}


/*ハンバーガーメニュー（1365px）になるまでの文字調整*/
@media (max-width: 1510px) {
 	.menu ul li a span { font-size: 15px; }
}
@media (max-width: 1490px) {
  .menu ul li a span { font-size: 14px; }
}
@media (max-width: 1420px) {
  .menu ul li a span { font-size: 13px; }
}

/*==============================================================================
ハンバーガーメニュー（1365pxで実行）
==============================================================================*/
/*実行前はdisplay:none;*/
.hamburger { cursor: pointer; display: none; height: 21px; position: relative; width: 25px; z-index: 90; }

/*実行後の見た目
------------------------------------------------*/
@media (max-width: 1365px) {
#header { display: flex; align-items: center; justify-content: space-between; padding: 10px; min-height: 50px; max-width: 100%; width: 100%;}

/*見えるようにする*/
.hamburger { display: block; }

/*メニュー線（二本線）*/
.hamburger span { background: rgba(46, 167, 224, 1); border-radius: 60px; display: block; height: 3px; left: 0; position: absolute; transition: 0.3s ease; width: 100%; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }

/*「MENU」*/
p.hamburger_txt { color: #2EA7E0; display: block; font-family: "Inter", sans-serif; font-size: 7px; font-weight: 300; letter-spacing: 2px; margin: 20px 0 0; text-align: center; }

/*閉じるボタン*/
.hamburger.active span:nth-child(1) {top: 5px;  transform: rotate(205deg);}
.hamburger.active span:nth-child(2) {top: 5px; transform: rotate(-205deg);}


/*展開するメニューのサイズは393px
------------------------------------------------*/
.menu { background: #fff; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; overflow-y: auto; position: fixed; right: -393px; top: 0; padding: 0 56px; transition: right 0.25s ease; width: 393px; z-index: 90; }

/*展開時*/
.menu.active { right: 0;}

/*展開後のメニューの見た目はここ
------------------------------------------------*/
.menu.active ul { display: flex; flex-grow:0; flex-direction: column; align-items: center; margin: 0 0 86px 0; padding: 50px 0 0 0; width: 100%; }
.menu.active li { font-size: 16px; line-height: 1; margin: 0 0 48px 0;}
.menu.active li:last-child { margin: 0;}
/*PC用に小さくしたフォントサイズを元に戻す*/
.menu.active ul li a span { font-size: 16px; }

}

/*タブレット以下の設定
------------------------------------------------*/
/*展開するメニューのサイズは100％*/
@media (max-width: 768px) {
.menu { transition: none; right: -100%; padding: 0 5% ; width: 100%;}

.menu.active { padding-bottom: 100px; }

/*一瞬アニメーションを遅らす*/
.ready .menu { transition: right 0.25s ease;}
/*hoverの挙動は無効*/
.menu ul li a:hover,
.menu ul li a:active { color: #000;}
}




/*==============================================================================
グローバルメニュー内のボタン
==============================================================================*/
.entryBtn { display: block; min-width: 220px;} 
.entryBtn a { display: block; color: #fff; padding: 25px 10px; transition: all 0.2s ease-in-out;}

/*背景色*/
.entryBtn a.bg_inquiry { background: rgba(40, 75, 102, 1);}
.entryBtn a.bg_order { background: rgba(46, 167, 224, 1);}

/*テキスト*/
.entryBtn a span { display: block; font-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 700; line-height: 1; text-align: center; transition: color 0.2s ease-in-out; }

/*ハンバーガーメニュー内でのみ表示するサブテキスト*/
#header .entryBtn a small {display: none;}

/*リンクの挙動*/
.entryBtn a,
.entryBtn a:visited {color: #fff;} 
.entryBtn a:hover,
.entryBtn a:active {background: rgba(255, 255, 255, 1); }

.entryBtn a.bg_inquiry:hover { color: rgba(40, 75, 102, 1);}
.entryBtn a.bg_order:hover { color: rgba(46, 167, 224, 1);}

/*ハンバーガーメニュー（1365px）になるまでの調整*/
@media (max-width: 1510px) {
  .entryBtn a { padding: 25px 10px;}
}

@media (max-width: 1365px) {
/*展開したメニューの中にある時
------------------------------------------------*/
#header .entryBtn  {margin: 0 0 15px 0; min-width: 282px;}
#header .entryBtn a { min-width: 100%; max-width: 282px; width: 100%; }
#header .entryBtn.inmenu a { border-radius: 40px; padding: 11px 5px;}

/*埋もれてしまうので背景に線を付ける*/
#header .entryBtn.inmenu a.bg_inquiry { border: 1px solid rgba(40, 75, 102, 1);}
#header .entryBtn.inmenu a.bg_order { border: 1px solid rgba(46, 167, 224, 1);}
#header .entryBtn.inmenu a.bg_inquiry:hover { border: 1px solid rgba(40, 75, 102, 1);}
#header .entryBtn.inmenu a.bg_order:hover { border: 1px solid rgba(46, 167, 224, 1);}

/*ハンバーガーメニュー内でのみ表示するサブテキスト*/
#header .entryBtn.inmenu a small { display: block; font-size: 13px; font-weight: 700; line-height: 1; margin: 0 0 10px 0; text-align: center;} 
}



/*==============================================================================
【メインの大枠】
===============================================================================*/
main#contents {}

/*下層ページでの調整*/
main#contents.lower { margin: 70px 0 0 0; padding: 40px 0 0 0; }



/*==============================================================================
【アイキャッチ】
h2及びh2 imgの位置はJSで調整しています。
eyecatch.jsを参照してください
===============================================================================*/

/*表示の都合上アスペクト比を記載しておく*/
#eyecatch { background: url("../images/eyecatch_bg.jpg") no-repeat center/contain; aspect-ratio: 1920 / 945; position: relative; width: 100%;}

#eyecatch h2 { position: absolute; margin: 0; padding: 0;}

/*アニメーションで表示させるための補助*/
/*「body.loaded」の付与もJSのほう*/
#eyecatch h2 img,
#eyecatch h3 img{ opacity: 0; transform: translateY(10px); transition: opacity 1s ease, transform 1s ease; transition-delay: 0.5s;}
body.loaded #eyecatch h2 img,
body.loaded #eyecatch h3 img{ opacity: 1; transform: translateY(0);}
/*JS側でやった位置調整をさらに調整するための記述*/
#eyecatch h2,
#eyecatch h3 { position: absolute;  top: calc(var(--eyecatch-top, auto)); bottom: calc(var(--eyecatch-bottom, auto)); left: calc(var(--eyecatch-left, 0px)); }


/*サイズ調整*/
#eyecatch h2 img { max-width: 1278px; width: 100%;} 

/*微調整*/
@media (max-width: 1940px)and (min-width: 1900px) { #eyecatch h2 img { width: 98%;} }
@media (max-width: 1899px)and (min-width: 1850px) { #eyecatch h2 img { width: 96%;} }
@media (max-width: 1849px)and (min-width: 1810px) { #eyecatch h2 img { width: 94%;} }
@media (max-width: 1809px)and (min-width: 1750px) { #eyecatch h2 img { width: 90%;} }
@media (max-width: 1749px)and (min-width: 1640px) { #eyecatch h2 img { width: 85%;} }
@media (max-width: 1639px)and (min-width: 1540px) { #eyecatch h2 img { width: 80%;} }
@media (max-width: 1539px)and (min-width: 1440px) { #eyecatch h2 img { width: 75%;} }
@media (max-width: 1439px)and (min-width: 769px) { #eyecatch h2 img { width: 72%;} }

@media (max-width: 1000px) and (min-width: 769px) { 
#eyecatch h2 { --eyecatch-left: 50px; --eyecatch-bottom: 30px;}
}


/*スクリーンリーダー向けのテキスト*/
#eyecatch span.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

/*表示の都合上アスペクト比を記載しておく*/
@media (max-width: 768px) {
#eyecatch { background-image: url('../images/eyecatch_bg_sp.jpg'); aspect-ratio: 767 / 1200;}

#eyecatch h2 img { height: auto; width: 90%;}
#eyecatch h3 img { height: auto; width: 90%;}
}


/*==============================================================================
【こんな方(事業者)にピッタリ！】
================================================================================*/
#sec_foryou { margin:0 auto; padding: 85px 0; }

@media (max-width: 991px) {
#sec_foryou { padding: 46px 0 0 0; }
}

/*イラストのリスト
------------------------------------------------*/
#sec_foryou ul { display: flex; justify-content: center; align-items: flex-start; gap:5px; margin: 0; padding: 0; text-align: center; width: 100%; }

#sec_foryou ul li { margin: 0 25px 0 0; padding: 0; text-align: center; width: 200px; }
#sec_foryou ul li:nth-child(2n) {  margin: 40px 20px 0 0; }
#sec_foryou ul li:last-child {  margin: 0; }
#sec_foryou ul li img { margin: 0 auto; max-width: 100%; width: 100%; }

@media (max-width: 1280px) {
#sec_foryou ul li {margin: 0 10px 0 0;}
}
@media (max-width: 991px) {
#sec_foryou ul { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: space-evenly;}

#sec_foryou ul li { margin: 0 10px 20px 0;}
#sec_foryou ul li:nth-child(2n) { margin: 0 10px 20px 0;}
#sec_foryou ul li:last-child { margin: 0 0 20px 0;}
}
@media (max-width: 450px) {
#sec_foryou ul { flex-wrap: wrap; justify-content: center; gap: 10px 5px;}
#sec_foryou ul li { margin: 0 5px 20px 0; width: calc(50% - 10px);}
#sec_foryou ul li:nth-child(2n) { margin: 0 0 20px 0;}
}

/*職業名*/
#sec_foryou ul li strong { color: #2EA7E0; display: block; font-size: clamp(19px, calc(19px + (24 - 19) * ((100vw - 320px) / (1920 - 320))), 24px); font-weight: 700; line-height: 1.5; margin: 20px 0 0 0; }

/*テキスト*/
#sec_foryou ul li span { display: block; font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))), 14px); font-weight: 400; line-height: 1.5; margin: 15px 0 0 0; text-align: left; }


/*==============================================================================
【施工取次店について】
================================================================================*/
#sec_about { margin: 0 auto; padding: 85px 0; }


/*建物まるごと冷暖とテキストの横並び
------------------------------------------------*/
#sec_about h3 { display: flex; align-items: center; gap: 27px; margin: 0 auto 20px auto; width: fit-content;}
#sec_about h3 img { display: block; max-height: 114px;}
#sec_about h3 span { display: inline-block;	font-size: clamp(13px, calc(13px + (18 - 13) * ((100vw - 320px) / (1920 - 320))), 18px); font-weight: 500; line-height: 1.3; }

/*SPのみで表示する改行*/
#sec_about h3 br.appearForSP { display: none;}

/*「建物まるごと冷暖の施工取次店は、リフォームをご検討中の方や対象のお客様をご紹介（取次）するだけ！」
------------------------------------------------*/
#sec_about h4 { margin: 0 0 30px 0; padding: 0 0 0 20px;}
#sec_about h4 span { display: inline-block;	font-size: clamp(18px, calc(18px + (26 - 18) * ((100vw - 320px) / (1920 - 320))), 26px); font-weight: 700; line-height: 1.7; margin: 0; padding: 0;}

/*「リフォームをご検討中の方」「対象のお客様」*/
#sec_about h4 strong { color: #2EA7E0; font-weight: 700; }
/*「ご紹介（取次）」*/
#sec_about h4 em { color: #EA5514; font-size: clamp(25px, calc(25px + (40 - 25) * ((100vw - 320px) / (1920 - 320))), 40px); font-weight: 700; font-style: normal;  }

/*テキスト
------------------------------------------------*/
#sec_about p { font-size: clamp(13px, calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320))), 16px); font-weight: 400; line-height: 1.7; margin: 0; padding: 0 0 0 67px; max-width: 570px; width: 100%;}

@media (max-width: 1050px) {
#sec_about p { padding: 0 0 0 50px;}
}

@media (max-width: 991px) {
#sec_about { padding: 46px 0; }
#sec_about h3 img { display: block; max-height: 56px;}
#sec_about h4 { margin: 0 auto 30px auto; padding: 0;}
#sec_about p { padding: 0; max-width: 100%;  width: 100%;}
}

@media (max-width: 550px) {
/*建物まるごと冷暖とテキストの横並びの中の改行のうち、SPのみ用を見えるようにする*/
#sec_about h3 br.appearForSP { display: block;}
}

@media (max-width: 394px) {
#sec_about h4 br {display: none;} 
}



/*==============================================================================
【汎用CTA】
================================================================================*/
.sec_bnr { background: url("../images/sec_bnr_bg.png") no-repeat center/cover; margin: 0 auto; padding: 85px 85px; text-align: center; width: 100%; }

/*タイトル*/
.sec_bnr h2 { color: #fff; font-size: clamp(28px, calc(28px + (40 - 28) * ((100vw - 320px) / (1920 - 320))), 40px); font-weight: 700; line-height: 1.7; margin: 0 0 40px 0; padding: 0;}
.sec_bnr h2 strong {font-size: clamp(33px, calc(33px + (48 - 33) * ((100vw - 320px) / (1920 - 320))), 48px); font-weight: 700; line-height: 1.7; margin: 0; padding: 0;}

/*改行*/
.sec_bnr h2 br { display: none; }
@media (max-width: 1400px) { .sec_bnr h2 br {display: block;} }

/*申し込みボタン
------------------------------------------------*/
.sec_bnr a { border: 1px solid #fff; border-radius: 90px; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.07); display: inline-block; margin: 0; padding: 45px 0; text-align: center; transition: .2s cubic-bezier(0.45, 0, 0.55, 1);  max-width: 563px; width: 100%; }

.sec_bnr a span { display: block; font-size: clamp(24px, calc(24px + (32 - 24) * ((100vw - 320px) / (1920 - 320))), 32px); font-weight: 700; line-height: 1; margin: 0; padding: 0;}
.sec_bnr a span small { display: block; font-size: clamp(15px, calc(15px + (22 - 15) * ((100vw - 320px) / (1920 - 320))), 22px); font-weight: 700; line-height: 1; margin: 0 0 15px 0; padding: 0;}


/*紺背景がスライドしてくる
------------------------------------------------*/
.sec_bnr a.slide_navy { background: #fff; overflow: hidden; position: relative; z-index: 1; }
.sec_bnr a.slide_navy::after { background: #284B66; box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.07); content: ''; height: 100%; left: 0; position: absolute; top: 0; transform: scale(0, 1); transform-origin: left top; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); width: 100%; z-index: -1; }

.sec_bnr a.slide_navy:hover { background: #284B66; box-shadow: 4px 4px 20px rgba(255, 255, 255, 0.4); }
.sec_bnr a.slide_navy:hover::after { background: #284B66; transform: scale(1, 1); }

/*テキスト*/
.sec_bnr a.slide_navy span { color: #284B66; }
.sec_bnr a.slide_navy:hover span { color: #fff;}

/*オレンジ背景がスライドしてくる一式
------------------------------------------------*/
.sec_bnr a.slide_orange { background: transparent; overflow: hidden; position: relative; z-index: 1; }
.sec_bnr a.slide_orange::after { background: rgba(234, 85, 20, 1); box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.07); content: ''; height: 100%; left: 0; position: absolute; top: 0; transform: scale(0, 1); transform-origin: left top; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); width: 100%; z-index: -1; }

.sec_bnr a.slide_orange:hover { background: rgba(234, 85, 20, 1); box-shadow: 4px 4px 20px rgba(255, 255, 255, 0.4); }
.sec_bnr a.slide_orange:hover::after { background: rgba(234, 85, 20, 1); transform: scale(1, 1); }

/*テキスト*/
.sec_bnr a.slide_orange span { color: #fff; }
.sec_bnr a.slide_orange:hover span { color: #fff;}


@media (max-width: 991px) {
.sec_bnr { padding: 25px 0 0 0; }
.sec_bnr h2 { text-align: center;}
.sec_bnr a { margin: 0 0 35px 0; padding: 20px 10px; text-align: center; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); max-width: 563px; width: 100%; }
}

@media (max-width: 400px) {
.sec_bnr h2 br { display: none;}
}


/*==============================================================================
【取次店経営でこんなお悩みありませんか？】
================================================================================*/
#sec_trouble { background: #F3F3F3; margin: 0 auto; padding: 108px 0 0 0; }

@media (max-width: 991px) {
#sec_trouble { padding: 46px 0 0 0; }
}

/*長いタイトルの改行の表示・非表示*/
#sec_trouble h2.secTtl br {display: none;}
@media (max-width: 510px) { #sec_trouble h2.secTtl br {display: block;} }

#sec_trouble .sec_trouble_sol { background: #EA5514; margin: 112px 0 0 0; overflow: hidden; padding: 64px 0 48px 0; position: relative; text-align: center; width: 100%; }

/*▼は背景だとズレるのでabsoluteで載せる*/
#sec_trouble .triangle { display: block; height: 45px; left: 0; position: absolute; top: -1px; transform: translateZ(0); width: 100%; z-index: 2; }
/*中身は▼のさらに上に配置させる*/
#sec_trouble .content { color: #fff; position: relative; z-index: 3; }

/*「建物まるごと冷暖なら全て解決します◎」*/
#sec_trouble .sec_trouble_sol p { color: #fff; display: block; font-size: clamp(16px, calc(16px + (36 - 16) * ((100vw - 320px) / (1920 - 320))), 36px); font-weight: 700; line-height: 1.7; letter-spacing: 0.5px; margin: 0; padding: 0;}

/*跳ねるアニメーション*/
@keyframes bound { 0% {transform: translateY(0);} 100% {transform: translateY(8px);}}

.sec_trouble_bound span {display: inline-block; animation: .5s bound ease-in infinite alternate;}

/*18文字*/
.sec_trouble_bound span:nth-child(1) { animation-delay: 0;}
.sec_trouble_bound span:nth-child(2) { animation-delay: 0.1s;}
.sec_trouble_bound span:nth-child(3) { animation-delay: 0.2s;}
.sec_trouble_bound span:nth-child(4) { animation-delay: 0.3s;}
.sec_trouble_bound span:nth-child(5) { animation-delay: 0.4s;}

.sec_trouble_bound span:nth-child(6) { animation-delay: 0.5s;}
.sec_trouble_bound span:nth-child(7) { animation-delay: 0.6s;}
.sec_trouble_bound span:nth-child(8) { animation-delay: 0.7s;}
.sec_trouble_bound span:nth-child(9) { animation-delay: 0.8s;}
.sec_trouble_bound span:nth-child(10) { animation-delay: 0.9s;}

.sec_trouble_bound span:nth-child(11) { animation-delay: 1.0s;}
.sec_trouble_bound span:nth-child(12) { animation-delay: 1.1s;}
.sec_trouble_bound span:nth-child(13) { animation-delay: 1.2s;}
.sec_trouble_bound span:nth-child(14) { animation-delay: 1.3s;}
.sec_trouble_bound span:nth-child(15) { animation-delay: 1.4s;}

.sec_trouble_bound span:nth-child(16) { animation-delay: 1.5s;}
.sec_trouble_bound span:nth-child(17) { animation-delay: 1.6s;}
.sec_trouble_bound span:nth-child(18) { animation-delay: 1.7s;}


@media (max-width: 991px) {
#sec_trouble .sec_trouble_sol { background: #EA5514; margin: 28px 0 0 0; padding: 36px 0 21px 0; }
#sec_trouble .triangle { height: 21px;}
}


/*==============================================================================
【施工取次店になるメリット】
================================================================================*/
#sec_merit { background: url("../images/sec_merit_bg_R.png") no-repeat, url("../images/sec_merit_bg_L.png") no-repeat; background-position: right 0 top 0, left bottom; background-size: 410px auto, 430px auto; background-attachment: fixed; margin: 0 auto; padding: 85px 0; }

@media (max-width: 1365px) {
#sec_merit {background-size: 310px auto, 338px auto;}
}

/*SPは背景固定無し*/
@media (max-width: 991px) { 
#sec_merit { background: url("../images/sec_merit_bg_R_sp.png") no-repeat, url("../images/sec_merit_bg_L_sp.png") no-repeat; background-position: right 0 top 300px, left bottom; background-size: 281px auto, 259px auto; background-attachment: inherit; padding: 46px 0;}
}

@media (max-width: 660px) {
#sec_merit { background-size: 200px auto, 200px auto;}
}

#sec_merit ul { margin: 0; padding: 0;}
#sec_merit ul li { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 60px;}
#sec_merit ul li:last-child { margin-bottom: 0;}

@media (max-width: 991px) {
#sec_merit ul li { margin-bottom: 45px;}
}

#sec_merit ul li .sec_merit_txt,
#sec_merit ul li .sec_merit_img { flex: 1;}

/*01と03はテキストが最初（左）*/
#sec_merit ul li:nth-child(odd) .sec_merit_txt { order: 1;  padding: 0 24px 0 0;}
#sec_merit ul li:nth-child(odd) .sec_merit_img { order:2; }
/*02と04はテキストが後（右）*/
#sec_merit ul li:nth-child(even) .sec_merit_txt { order: 2;  padding: 0 0 0 24px;}
#sec_merit ul li:nth-child(even) .sec_merit_img { order: 1; }


@media (max-width: 991px) {
#sec_merit ul li { flex-direction: column; }
/*SPは01～04まで画像とテキストは上下に並ぶ*/
#sec_merit ul li .sec_merit_img { order: 1 !important; padding: 0 !important; width: 100%; }
#sec_merit ul li .sec_merit_txt  { order: 2 !important; padding: 0 !important; width: 100%; }
}

/*タイトル前の数字*/
/*グラデーションが上手くかからないのでitalicは「transform: skewX(-14deg);」で再現*/
#sec_merit ul li .sec_merit_txt span { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background: linear-gradient(to left,#2EA7E0,#7ECEF4);background-clip: text; background-position: left center; background-size: 100% 100%; color: transparent; display: inline-block; font-family: Kanit; font-size: clamp(58px, calc(58px + (96 - 58) * ((100vw - 320px) / (1920 - 320))), 96px); font-weight: 500; line-height: 1; margin: 0 0 17px 0; padding: 0; transform: skewX(-14deg); }

/*タイトル*/
#sec_merit ul li .sec_merit_txt h3 {font-size: clamp(18px, calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320))), 24px); font-weight: 700; line-height: 1.6; margin: 0 0 17px 0; padding: 0;}

/*本文*/
#sec_merit ul li .sec_merit_txt p {font-size: clamp(13px, calc(13px + (16 - 13) * ((100vw - 320px) / (1920 - 320))), 16px); font-weight: 400; line-height: 1.7; margin: 0; padding: 0;}

/*注釈がある場合*/
#sec_merit ul li .sec_merit_txt small {font-size: clamp(12px, calc(12px + (13 - 12) * ((100vw - 320px) / (1920 - 320))), 13px); font-weight: 400; line-height: 1.3;}



/*==============================================================================
【収益モデル】
================================================================================*/
#sec_model { margin: 0 auto; padding: 117px 0 50px 0; }

/*タイトル*/
#sec_model h3 { margin: 0 0 20px 0; padding: 0; text-align: center; }

/*下線の位置はpaddingで調整する*/
#sec_model h3 span { background: linear-gradient(#2EA7E0, #2EA7E0); background-size: 100% 1px; background-repeat: repeat-x; background-position: 0 100%; display: inline; font-size: clamp(18px, calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320))), 24px); font-weight: 700; line-height: 1.6; padding: 0 0 3px 0; }

/*本文*/
#sec_model p {font-size: clamp(14px, calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 500; line-height: 1.7; margin: 0 0 80px 0; padding: 0; text-align: center;}



@media (max-width: 991px) {
#sec_model p { margin: 0 0 40px 0; }
}

@media (max-width: 991px) {
#sec_model { margin: 0 auto; padding: 46px 0; }
}
.sec_model_img { display: flex; justify-content: center;}
.sec_model_img img.appearForPC { display: block}
.sec_model_img img.appearForSP {display: none;}

/*通常のSP切り替え時ではまだ表示しない*/
@media (max-width: 991px) {
.sec_model_img img.appearForPC { display: block}
.sec_model_img img.appearForSP {display: none;}
}
/*このあたりで表示*/
@media (max-width: 660px) {
.sec_model_img img.appearForPC {display: none;}
.sec_model_img img.appearForSP {display: block;}
#sec_model p br { display:none; }
}

@media (max-width: 440px) {
#sec_model h3 br { display:none; }
}


/*==============================================================================
【施工取次店 加盟内容】
================================================================================*/
#sec_detail { margin: 0 auto; padding: 25px 0 50px 0; }

@media (max-width: 991px) {
#sec_detail { margin: 0 auto; padding: 46px 0; }

}

/*イラストのリスト
------------------------------------------------*/
#sec_detail ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 11px 84px; margin: 0 auto; padding: 0; text-align: center; width: 100%; }

#sec_detail ul li { margin: 0; padding: 0; text-align: center; width: 300px; }
#sec_detail ul li img { margin: 0 auto; max-width: 100%; width: 100%; }


@media (max-width: 991px) {
#sec_detail ul { flex-wrap: wrap; justify-content: center; gap: 11px 29px;}
/*間隔の29pxを差し引いて2分割させる*/
#sec_detail ul li { margin: 0; width: calc((100% - 29px) / 2);}
}


/*注釈*/
.sec_detail_memo { margin: 38px 0 0 0; text-align: center; }
.sec_detail_memo span { font-size: clamp(14px, calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 400; line-height: 1.5;}

/*改行
------------------------------------------------*/
.sec_detail_memo br { display: none;}
@media (max-width: 991px) {
.sec_detail_memo br { display: block;}
}



/*==============================================================================
【施工取次店になるまでの流れ】
================================================================================*/
#sec_flow { background: linear-gradient(90deg, rgba(126, 206, 244, 0.50) 0%, rgba(46, 167, 224, 0.50) 100%); margin: 0 auto; padding: 118px 0 113px 0; }

@media (max-width: 991px) {
#sec_flow { background: linear-gradient(180deg, rgba(126, 206, 244, 0.50) 0%, rgba(46, 167, 224, 0.50) 100%); margin: 0 auto; padding: 46px 0; }
}

/*フローのリスト
------------------------------------------------*/
#sec_flow ul { display: flex; align-items: flex-start; justify-content: center; gap: 0 50px; margin: 0; padding: 0; }
#sec_flow ul li { align-items: center; display: flex; flex-direction: column; }

@media (max-width: 991px) {
/*SPでは構造を変える*/
#sec_flow ul { flex-direction: column; gap: 15px 0; margin: 0; padding: 0; }
#sec_flow ul li { align-items: center; display: flex; flex-direction: row; }
}

/*画像と線の為の大枠
------------------------------------------------*/
#sec_flow ul li .image-wrap { align-items: center; display: flex; position: relative; }

@media (max-width: 991px) {
#sec_flow ul li .image-wrap { flex: 0 0 100px; }
}

/*画像と画像を左右で繋ぐ線*/
#sec_flow ul li:not(:last-child) .image-wrap::after { background: #fff; content: ''; height: 2px; left: 100%; position: absolute; top: 50%; transform: translateY(-50%); width: 50px; z-index: 1; }

@media (max-width: 991px) {
/*SPでは上下で繋ぐ*/
#sec_flow ul li:not(:last-child) .image-wrap::after { background: #fff; content: ''; height: 50px; left: 50%; position: absolute; top: 100%; transform: translateX(-50%); width: 2px; z-index: 1; }
}

/*画像 */
#sec_flow ul li img { display: block; min-width: 100px; max-width: 200px; width: 100%; z-index: 2; }

/*テキスト*/
#sec_flow ul li p { font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))), 14px); font-weight: 400; line-height: 1.5; margin: 20px 0 0 0; max-width: 200px; }

/*タイトル*/
#sec_flow ul li p strong { display: block; font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 600; line-height: 1.5; margin: 0 0 20px 0;  text-align: center;}

@media (max-width: 991px) {
#sec_flow ul li p { margin: 0 0 0 13px; max-width: 100%; flex: 1;}
#sec_flow ul li p strong { margin: 0 0 10px 0; text-align: left;}
}




/*==============================================================================
【運営者情報】
================================================================================*/
#sec_company { margin: 0 auto; padding: 94px 0; }

@media (max-width: 991px) {
#sec_company { margin: 0 auto; padding: 46px 0;}
}

.sec_company_info {margin: 0 auto; }
/*ロゴ*/
.sec_company_logo { padding: 0 20px 0 0; }
.sec_company_info img { margin: 0 auto; max-width: 200px; width: 100%;}


/*Dwで構文エラー出ますが間違ってないはず*/
.sec_company_info dl { display: grid; grid-template-columns: 120px 1fr; gap: 5px; margin: 0; padding: 0;}
.sec_company_info dl dt { color: #204483; font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320))), 18px); font-weight: 700;}
.sec_company_info dl dd {  font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320))), 18px); font-weight: 400;}

@media (max-width: 767px) {
.sec_company_info dl { display: grid; justify-items: start; justify-content: center; grid-template-columns: 80px 200px; gap: 5px; margin: 0; padding: 0; }
.sec_company_info {margin: 0 auto;}
.sec_company_info img { margin: 0 auto 30px auto; }
}



/*==============================================================================
【よくある質問】
================================================================================*/
#sec_faq { background: rgba(189, 227, 242, 0.20); padding: 100px 0;}

@media (max-width: 991px) {
#sec_faq { padding: 45px 0;}
}


/*【アコーディオン】FAQで使うパネル式アコーディオン
=======================================================================*/
#faqlist {}
#faqlist ul li { background: #fff; border-radius: 10px; box-shadow: 0px 1px 8.3px 0px rgba(179, 194, 206, 0.33); font-size: 14px; font-weight: 400; line-height: 1; margin: 0 0 30px 0; padding: 23px;}

@media (max-width: 768px) {
#faqlist li { padding: 0 0 20px 0;}
}

/*【アコーディオン】*/
.faq-toggle { background: #fff; border: none; border-radius: 10px; padding: 0 30px 0 0; position: relative; text-align: left; width: 100%; }
.faq-toggle:focus { outline: none; }

/*アイコンの位置*/
.toggle-icon { display: flex; align-items: center; justify-content: center; height: 18px; position: absolute; top: inherit; right: 0; width: 18px;}

/*アイコンのアニメーションの処理*/
.icon-plusminus .bar-vertical { transform-box: fill-box; transform-origin: center; transition: transform 0.3s ease, opacity 0.3s ease; }
.faq-toggle:not(.collapsed) .icon-plusminus .bar-vertical { opacity: 0; transform: rotate(90deg); }


/*展開先の枠*/
.collapse { background: #BDE3F2; border-radius: 10px; cursor: pointer; margin: 20px 0 0 0; padding: 17px 23px; position: relative;}
/*collapseがアニメーション中も見た目を↑に寄せる*/
.collapsing { background: #BDE3F2; border-radius: 10px;  margin: 20px 0 0 0; padding: 17px 23px; transition: height 0.35s ease, padding 0.35s ease, opacity 0.35s ease; opacity: 1;}

/* 閉じる時にカクつくのを調整*/
.faq-toggle.collapsed + .collapsing { padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0;}

/*質問*/
.faq-question { display: flex; align-items: flex-start; align-items: center; gap: 0;}
.faq-question strong { display: inline-block; flex-shrink: 0; margin: 0 15px 0 0; vertical-align: middle;}
.faq-question p { color: #000; display: inline-block; font-size: clamp(13px, calc(13px + (18 - 13) * ((100vw - 320px) / (1920 - 320))), 18px); font-weight: 700; line-height: 1.2; margin: 0; vertical-align: middle;  flex: 1;}

/*回答*/
.faq-answer { display: block; gap: 0;}
.faq-answer p { color: #000; font-size: clamp(13px, calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320))), 14px); font-weight: 400; line-height: 1.6; margin: 0 0 16px 0;}
.faq-answer p:last-child {margin: 0;}


/*==============================================================================
【フッター】
==============================================================================*/
#footer { padding: 25px 0 0 0; text-align: center; width: 100%;}

@media (max-width: 991px) {
#footer { padding: 15px 0 0 0;}
}

#footer h2 { display: flex; align-items: center; justify-content: center;}
#footer h2 img {  max-height: 114px; object-fit: contain; max-width: 250px; width: 100%; }


#footer ul { display: flex; align-items: center; flex-direction: row; justify-content: center; margin: 45px auto; text-align: center; width: 100%;}
#footer ul li { border-right: solid 1px #000; color: #000; font-size: 14px; font-weight: 500; margin: 0 20px 0 0; padding: 0 20px 0 0; width: max-content; }
#footer ul li:last-child { border-right:none; margin: 0; padding: 0;}

#footer ul li a {  color: #000;}

#footer p { background: #000; color: #fff; font-size: 1rem; margin: 15px 0 0 0; padding: 13px 0 13px 0; text-align: center;}


@media (max-width: 767px) {
#footer h2 { margin: 0;}
#footer ul { flex-direction: column; margin: 15px 0;}
#footer ul li { border-right: none; margin: 0 0 10px 0; padding: 0;} 

#footer p { margin: 15px 0 0 0;}
}

/*==============================================================================
【トップに戻るボタン】
==============================================================================*/
#backtoTop { cursor: pointer; opacity: 0; position: fixed; right: 30px; bottom: 50px; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; visibility: hidden; z-index: 50; }
@media (max-width: 991px) { 
#backtoTop { bottom: 80px; right: 0; }
}

/*ふわっと登場させる*/
#backtoTop.show { opacity: 1; transform: translateY(0); transition-delay: 0s; visibility: visible; }

/*ふわっと消える*/
#backtoTop.hide { opacity: 0; transform: translateY(30px); transition-delay: 0s; visibility: visible; }

/*フェードアウトの挙動が完了後したらvisibility: hiddenを実行する*/
#backtoTop.hide.done { visibility: hidden; }


/*==============================================================================
【下層】
==============================================================================*/
#sec_lower {}
#tokushoho { margin: 80px 0 0 0;}

@media (max-width: 991px) { 
#tokushoho { margin: 40px 0 0 0;}
}