@charset "utf-8";
/*==============================================================================
【common】
================================================================================*/
*,*::before,*::after { box-sizing: border-box;}
html { font-size: 100%;}
body { background: #fff; color:#000; font-family: 'Inter', 'Noto Sans JP','Zen Maru Gothic', sans-serif; font-size: clamp(13px, 1.2vw, 16px); font-weight: 500; line-height: 1.5; margin:0; padding:0; position:relative; width:100%; overflow-x: hidden;}

@media screen and (min-width: 0px) and (max-width: 1000px){
html,body { overflow-x: hidden;}
html, body, #app { touch-action: pan-y; overscroll-behavior-x: contain;}
}

fieldset, img { border:0; max-width: 100%; }
/*svg { image-rendering: -webkit-optimize-contrast; shape-rendering: crispEdges; text-rendering: geometricPrecision;}*/

ul, ol, li { list-style:none; padding:0; margin:0; }
a,
a:active,
a:focus {text-decoration: none;}
a:hover {text-decoration: underline;}

a img { border-style:none; backface-visibility:hidden;}
a:hover img { text-decoration: none;}

ul, ol, li { list-style:none; padding:0; margin:0; }

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

/*背景色*/
.b_lightblue {background: #7ECEF4;}
.b_skyblue {background: #43AEEA;}
.b_blue {background: #3D81D4;}
.b_orange {background: #F50;}

/*文字色*/
.c_lightblue { color: #2EA7E0;} /*冷*/
.c_orange { color: #F50;} /*暖*/

.c_lightblue {color: #7ECEF4;}
.c_skyblue {color: #43AEEA;}
.c_blue {color: #3D81D4;}
.c_navy {color: #034BAC}

/*container 1140*/
.container_custom { margin: 0 auto; max-width: 1140px; width: 100%;}


/*PCで表示してSPで表示しないもの*/
.appearForPC { display: inline-block;}
.appearForSP { display: none;}
/*320px環境でのみ表示するもの*/
.appearFor320 { display: none;}

@media (max-width: 900px) {
.appearForPC { display: inline-block;}
.appearForSP { display: none;}
}
@media (max-width: 780px) {
.appearForPC { display: none;}
.appearForSP { display: inline-block;}
}
@media (max-width: 320px) {
.appearFor320  { display: inline-block;}
}

/*==============================================================================
【モーダル】
===============================================================================*/
.modal-overlay { align-items: center; background-color: rgba(0, 0, 0, 0.5); bottom: 0; display: flex; height: 100%; justify-content: center; left: 0; padding: 0; position: fixed; top: 0; width: 100%; z-index: 9999; }
.modal-content { background: #fff; border-radius: none !important; box-shadow: 0 4px 20px rgba(0,0,0,0.3); height: 80vh; overflow: hidden; max-width: 1000px; width: 100%; }
.modal-content iframe { border: none; height: 100%; width: 100%; }

@media (max-width: 1024px) { .modal-content {max-width: 80%;	width: 80%;} }
@media (max-width: 990px) { .modal-content { height: 53vh; overflow: hidden; max-width: 80%; width: 80%;} }


/*==============================================================================
【ヘッダー】
===============================================================================*/
#header { margin: 0 auto; padding: 15px 37px; position: relative; width: 100%; z-index: 80;}

@media (max-width: 1380px) { #header {padding: 15px 20px;} }
@media (max-width: 1080px) { #header {padding: 15px 15px;} }
@media (max-width: 1000px) { #header {padding: 27px 15px; } }

/*ヘッダーとアイキャッチにまたがる壁紙
=======================================================*/
.header_bg::after { background-image: url("../images/header_bg.png"); background-repeat: no-repeat; background-position: bottom left; background-size: cover; content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 80%; z-index: -1;}

@media (max-width: 1387px) {.header_bg::after { width: 79%;}}
@media (max-width: 1165px) {.header_bg::after { width: 79.5%;}}
@media (max-width: 960px) {.header_bg::after { width: 78%;}}

@media (max-width: 900px) {
.header_bg::after { background-image: url("../images/header_bg_sp.png"); background-size: cover; background-position: center right; border-radius: 0 0 0 50px; width: 90%; overflow: hidden; }
}
@media (max-width: 375px) {.header_bg::after { width: 88%;}}
@media (max-width: 375px) {.header_bg::after { width: 88%;}}
@media (max-width: 320px) {.header_bg::after { width: 86%;}}

/*==============================================================================
【ヘッダーメニュー】
===============================================================================*/

/*=======================================================
【固定される前（#header_menu）】
サイトロゴとメニューをまとめる大枠
=======================================================*/
#header_menu { display: flex; align-items: center; justify-content: flex-start; margin: 0 auto; padding: 15px 20px; transition: all 0.3s ease; width: 98%; z-index: 999;}


/*=======================================================
【固定されたあと（#header_menu.fixed）】
サイトロゴとメニューをまとめる大枠
=======================================================*/
#header_menu.fixed { background: rgba(255,255,255,1); border-radius: 70px; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.10); position: fixed; top: 15px; left: 50%; transform: translateX(-50%); padding: 15px 20px; max-width: 1580px; width: 80%; }

@media (max-width: 1380px) {
#header_menu.fixed { padding: 10px 15px;}
}
@media (max-width: 1070px) {
#header_menu.fixed { padding: 8px 13px;}
}
@media (max-width: 1040px) {
#header_menu.fixed { padding: 6px 8px;}
}

/*=======================================================
【ハンバーガーメニュー実行後（1000px以下で#header_menu.fixed）】
サイトロゴとメニューをまとめる大枠
=======================================================*/
@media (max-width: 1000px) {
#header_menu.fixed { justify-content: space-between; margin: 0 auto; padding: 5px 5px 5px 10px; top: 5px; max-width: 100%; width: 98%;}
}


/*==============================================================================
【サイトロゴ】
【固定される前】【固定されたあと】で共通
===============================================================================*/
h1.headerNav {  margin: 0; padding: 0; line-height: 0; width: 20%;}

/*高さの上限を設定する*/
h1.headerNav img { border-radius: 10px; max-height: 80px; max-width: 200px; width: 100%; }

@media (max-width: 1300px) { h1.headerNav img {  width: 94%; }}
@media (max-width: 1191px) { h1.headerNav img {  width: 84%; }}

/*Aタグに変な高さが出来るのを無効にする*/
h1.headerNav a {  display: inline-block; margin: 0; padding: 0; line-height: 0; vertical-align: middle;}
/*上記の処理に合わせてimgにもdisplayとverticalを付与*/
h1.headerNav img { display: inline-block; vertical-align: middle;}

/*【固定されたあと】
===============================================================================*/
#header_menu.fixed h1.headerNav { margin: 0; padding: 0; line-height: 0; width: 28%;}

/*高さの上限を設定する*/
#header_menu.fixed h1.headerNav img { margin: 0; max-height: 60px; max-width: 200px; width: 100%; }

@media (max-width: 1300px) {
    #header_menu.fixed h1.headerNav img { width: 100%;}
}
@media (max-width: 1024px) {
    #header_menu.fixed h1.headerNav img { width: 90%;}
}



/*=======================================================
【ハンバーガーメニュー実行後（1000px以下）】
※最初から【固定されたあと】として実行されます
サイトロゴ
=======================================================*/
@media (max-width: 1000px) {
#header_menu.fixed h1.headerNav { margin: 0; padding: 0; line-height: 0; text-align: left !important; width: 50%;}

/*【ハンバーガーメニュー実行後】サイトロゴのサイズ調整
ロゴと背景の白い角丸との間隔を調整したい時は「#header_menu.fixed」（メディアクエリ1000pxの時）を調整
-----------------------------------------*/
 /*高さの上限を設定する*/
#header_menu.fixed h1.headerNav img {max-height: 50px; object-fit: contain; max-width: 200px; width: auto;}
}

/*==============================================================================
【メニューリスト】
===============================================================================*/
/*基本のメニューリスト*/
.menu { display: flex; align-items: center; width: max-content;}
.menu ul { display: flex; align-items: center; align-content: center; margin: 0}

/*=======================================================
【固定される前（#header_menu）】
メニューリスト
=======================================================*/
/*【固定される前】メニューごとの間隔*/
#header_menu .menu li { margin: 0 50px 0 0; }
#header_menu .menu li:last-child { margin: 0; }
@media (max-width: 1280px) { #header_menu .menu li { margin: 0 30px 0 0; } }

/*【固定される前】メニューのテキスト（17～18pxで自動調整）*/
#header_menu .menu li span { font-size: clamp(17px, calc(17px + (18 - 17) * ((100vw - 1000px) / (1440 - 1000))), 18px); font-weight: 700; line-height: 1.5;}

/*【固定される前】リンク色*/
#header_menu .menu a,
#header_menu .menu a:visited,
#header_menu .menu a:active { color: #fff; text-decoration: none; transition: color 0.3s ease;}

#header_menu .menu a:hover,
#header_menu .menu a:focus { color: #004386; text-decoration: none; }


/*=======================================================
【固定されたあと（#header_menu.fixed）】
メニューリスト
=======================================================*/
/*全体をデザイン上のレイアウトに変更*/
#header_menu.fixed .menu { display: contents;}
#header_menu.fixed .menu ul { display: flex; align-items: center; justify-content: center; width: 100%;}

/*【固定されたあと】メニューごとの間隔*/
#header_menu.fixed .menu li { display: inline-block; margin: 0 20px 0 0; vertical-align: middle;}
#header_menu.fixed .menu li:last-child { margin: 0;}

@media (max-width: 1677px) { #header_menu.fixed .menu li { margin: 0 15px 0 0;} }
@media (max-width: 1430px) { #header_menu.fixed .menu li { margin: 0 13px 0 0;} }
@media (max-width: 1410px) { #header_menu.fixed .menu li { margin: 0 12px 0 0;} }
@media (max-width: 1352px) { #header_menu.fixed .menu li { margin: 0 10px 0 0;} }
@media (max-width: 1190px) { #header_menu.fixed .menu li { margin: 0 9px 0 0;} }

/*【固定されたあと】テキスト*/
#header_menu.fixed .menu li span { font-size: 16px; font-weight: 700;}
@media (max-width: 1525px) {#header_menu.fixed .menu li span { font-size: 15px;}}
@media (max-width: 1402px) {#header_menu.fixed .menu li span { font-size: 14px;}}
@media (max-width: 1322px) {#header_menu.fixed .menu li span { font-size: 13px;}}
@media (max-width: 1120px) {#header_menu.fixed .menu li span { font-size: 12px;}}

/*【固定されたあと】リンク色*/
#header_menu.fixed .menu a,
#header_menu.fixed .menu a:visited,
#header_menu.fixed .menu a:active { color: #000; text-decoration: none; transition: color 0.3s ease; }

#header_menu.fixed .menu a:hover,
#header_menu.fixed .menu a:focus { color: #004386; text-decoration: none; }

/*=======================================================
【ハンバーガーメニュー実行後（1000px以下）】
ハンバーガーメニュー展開時
=======================================================*/
@media (max-width: 1000px) {

/*中身が一瞬見えてしまうのを隠す*/
#header_menu { opacity: 0; transition: opacity 0.3s ease;}
#header_menu.fixed { opacity: 1; }

/*メニュー展開後の枠の見た目はここで調整*/
#header_menu.fixed .menu { background: linear-gradient(270deg, #3D81D4 0%, #7ECEF4 100%); display: flex; align-items: center; flex-direction: column; height: 100vh; margin: 0; padding: 70px 0; transform: none; transition: none; width: 100%; z-index: 1000;}

/*全体を右側に隠す*/
#header_menu.fixed .menu { position: fixed; right: -100vw; }
/*展開する（.activeが付与される）*/
#header_menu.fixed .menu.active { top:-5px; left: -2%; right: -2%; width: 104%; transition: right 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch;}

/*=======================================================
【ハンバーガーメニュー実行後（1000px以下）】
メニューリスト
=======================================================*/
#header_menu.fixed .menu.active ul { align-items: center; flex-direction: column; padding: 0 47px; max-width: 450px; width: 100%; }
}

@media (max-width: 430px) {
#header_menu.fixed .menu.active ul { padding: 0 27px;}
}

@media (max-width: 1000px) {
/*【ハンバーガーメニュー実行後】白い角丸の枠*/
#header_menu.fixed .menu.active li { background: #fff; border-radius: 31px; margin: 0 0 15px 0 !important; padding: 15px 20px; width: 100%;}

/*【ハンバーガーメニュー実行後】テキスト（15～16pxで自動調整）*/
#header_menu.fixed .menu.active li span { display: block; font-size: clamp(15px, calc(15px + (16 - 15) * ((100vw - 1000px) / (1440 - 1000))), 16px); font-weight: 600; line-height: 1; position: relative; }

/*【ハンバーガーメニュー実行後】テキスト末尾の矢印*/
#header_menu.fixed .menu.active li span::after { background-image: url("../images/header_menu_arrow.svg"); background-repeat: no-repeat; background-position: bottom left; background-size: cover; content: ""; height: 15px; position: absolute; right: 0; top: 0; width: 15px; z-index: s1; }

/*【ハンバーガーメニュー実行後】リンク色*/
#header_menu.fixed .menu.active li a,#header_menu.fixed .menu.active li a:visited,
#header_menu.fixed .menu.active li a:hover,#header_menu.fixed .menu.active li a:active { color: #004386 !important; text-decoration: none; }
}

/*ハンバーガーメニューの大枠
=======================================================*/
/*PCでは非表示*/
.hamburger { cursor: pointer; display: none; height: 40px; position: relative; right: 4px; width: 40px; z-index: 1100;}
/*表示させる*/
@media (max-width: 1000px) {.hamburger { display: block; } }

/*ハンバーガーメニューの開閉アイコン
=======================================================*/
@media (max-width: 1000px) {
#header_menu.fixed .hamburger { background: linear-gradient(270deg, #3D81D4 0%, #7ECEF4 100%); border-radius: 90px;}
#header_menu.fixed .hamburger.active { background: none; }
/*メニューの線*/
.hamburger span { background: #fff; border-radius: 60px; height: 3px; position: absolute; left: 6px; transition: 0.3s ease; width: 70%; }
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 24px; }
/*閉じるボタン*/
.hamburger.active span:nth-child(1) { top: 18px; transform: rotate(315deg); }
.hamburger.active span:nth-child(2) { top: 18px; transform: rotate(-315deg); }
}

/*==============================================================================
ヘッダーメニューが【固定したあと】に出てくるバナー（ボタンぽいもの）と、
【ハンバーガーメニュー展開時】に出てくるバナー（コンテンツ内にも出てくるもの）の表示用枠
===============================================================================*/
/*【PC用】固定する前は非表示*/
#header_menu .forGmenu { display: none;}
/*【PC用】固定したあとは表示*/
#header_menu.fixed .forGmenu { display: flex;}
/*【ハンバーガーメニュー用】ハンバーガメニューが展開する前は非表示*/
#header_menu .forGmenu_sp { display: none;  margin: 0 auto; width: 100%;}

@media (max-width: 1000px) {
/*PC用は見せない*/
#header_menu.fixed .forGmenu {display: none; }
/*展開したら表示*/
#header_menu.fixed .forGmenu_sp { display: block; padding: 0 47px;}
}
@media (max-width: 430px) {
#header_menu.fixed .forGmenu_sp { display: block; padding: 0 27px;}
}

/*==============================================================================
ヘッダーメニューが【固定したあと】にメニューリストに出てくるバナー（ボタンぽいもの）
===============================================================================*/
.menuBtn { border-radius: 60px; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0 0 0 14px; padding: 0; width: 150px; transition: 0.3s ease; }

@media (max-width: 1286px) {
.forGmenu .menuBtn { margin: 0 0 0 8px; padding: 0; width: 130px; transition: 0.3s ease; }
}
@media (max-width: 1170px) {
.forGmenu .menuBtn { margin: 0 4px 0 0; padding: 0; width: 118px; transition: 0.3s ease; }
.forGmenu .menuBtn:nth-of-type(2) { margin:0 ;}
/*テキスト（16～13pxで自動調整）*/
.forGmenu .menuBtn a { font-size: clamp(11px, calc(11px + (16 - 11) * ((100vw - 1000px) / (1440 - 1000))), 16px); line-height: 18px;}
}

/*オレンジの背景
-----------------------------------------*/
.bg_orange {background: #ff5500; border: 1px solid #ff5500;}
/*hover時*/
.bg_orange:hover { background: #fff; border: 1px solid #ff5500; }

/*ネイビーの背景
-----------------------------------------*/
.bg_navy {background: #004386; border: 1px solid #004386;}
/*hover時*/
.bg_navy:hover { background: #fff; border: 1px solid #004386; }

/*テキスト（16～13pxで自動調整）*/
.menuBtn a { color: #fff !important; display: inline-block; font-size: clamp(13px, calc(13px + (16 - 13) * ((100vw - 1000px) / (1440 - 1000))), 16px); line-height: 21px; text-decoration: none; padding: 6px; width: 100%;}

/*リンク色*/
.menuBtn.bg_orange a:hover,
.menuBtn.bg_orange a:active,
.menuBtn.bg_orange a:focus { color: #ff5500 !important; text-decoration: none !important; }
.menuBtn.bg_navy a:hover,
.menuBtn.bg_navy a:active,
.menuBtn.bg_navy a:focus { color: #004386 !important;  text-decoration: none !important;}


/*==============================================================================
【下層のヘッダー（#header.lower）】
==============================================================================*/
/*下層では背景色を敷く*/
#header.lower { /*background: rgba(126, 206, 244, 1);*/ padding: 0 20px;}

@media (max-width: 1000px) {
#header.lower { background: #fff;}
}

/*=======================================================
【下層のヘッダーメニュー】
【固定される前（#header_menu.lower）】
テキストサイズなどは「#header_menu」を継承しているので、必要になったら下記に書き足す
=======================================================*/

/*【下層】【固定される前】リンク色*/
#header_menu.lower .menu a,
#header_menu.lower .menu a:visited,
#header_menu.lower .menu a:active { color: #004386; text-decoration: none; transition: color 0.3s ease;}
#header_menu.lower .menu a:hover,
#header_menu.lower .menu a:focus { color: #fff; text-decoration: none; }


/*【下層】【固定されたあと】リンク色*/
#header_menu.lower.fixed .menu a,
#header_menu.lower.fixed .menu a:visited,
#header_menu.lower.fixed .menu a:active { color: #000; text-decoration: none;  transition: color 0.3s ease;}
#header_menu.lower.fixed .menu a:hover,
#header_menu.lower.fixed .menu a:focus { color: #004386; text-decoration: none;}



/*==============================================================================
【アイキャッチ】
【丸とバツの枠】と【キャッチコピーの枠】をまとめる大枠
===============================================================================*/
#eyecatchBox { margin: 130px 0 0 0; padding: 0 0 0 1.8%; position: relative; width: 90%;}

/*表示・非表示*/
#eyecatchBox .appearForPC { display: block;}
#eyecatchBox .appearForSP { display: none;}

/*ハンバーガメニューの切り替えに合わせると幅が空きすぎるので
下記のメディアクエリでアイキャッチの内容を切り替え
======================================================*/
@media (max-width: 900px) {
#eyecatchBox { margin: 100px auto 0 auto; padding: 0 0 50px 0; width: 100%;}
#eyecatchBox .appearForPC { display: none;}
#eyecatchBox .appearForSP { display: block;}
}

/*【丸とバツの枠】「窓×内装×外装」
======================================================*/
/*全体の枠（少しだけ上に置く）*/
.catBox { display: flex; align-items: center; gap: 17px; position: absolute; top: -35px; left: 470px; }

@media (max-width: 1300px) { .catBox { top: -45px; left: 420px;} }
@media (max-width: 1100px) { .catBox { top: -50px; left: 400px;} }
@media (max-width: 950px) { .catBox { top: -50px; left: 380px;} }


/*丸の枠*/
.circle { border: 1px solid #fff; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 120px; width: 120px; }
/*テキスト*/
.circle strong { font-family: "Zen Maru Gothic"; font-size: clamp(25px, calc(41px + (32 - 25) * ((100vw - 1000px) / (1440 - 1000))), 32px); font-weight: 700; }

/*×印
---------------------------------*/
.batsu { display: block; height: 30px; position: relative; width: 30px; }
.batsu::before, .batsu::after { background: #fff; content: ""; height: 57px; position: absolute; top: -14px; left: 15px; width: 1px; }
.batsu::before { transform: rotate(55deg);}
.batsu::after { transform: rotate(-55deg);}


/*ハンバーガメニューの切り替えに合わせると幅が空きすぎるので
下記のメディアクエリでアイキャッチの内容を切り替え
======================================================*/
@media (max-width: 900px) { .catBox { display: none;} }


/*【キャッチコピー】「一気に叶えるまるごと冷暖快適リフォーム」
======================================================*/
.catchBox { margin: 0 0 50px 0; overflow: hidden;}

/*テキスト（54.4～41pxで自動調整）*/
.catchBox h1 {color: #004386; font-size: clamp(41px, calc(41px + (54.4 - 41) * ((100vw - 1000px) / (1440 - 1000))), 54.4px); font-weight: 700; font-family: "Zen Maru Gothic"; line-height: 1; letter-spacing: 5px; margin: 0;}

/*テキストの背景の白い帯*/
.catchBox h1 .rounded-bg { background: #fff; border-radius: 10px; display: inline-block; margin: 0 0 13px 0; padding: 20px 20px 20px 0; white-space: nowrap;}

/*strongタグの調整*/
.catchBox h1 strong { font-weight: 700;}

/*ハンバーガメニューの切り替えに合わせると幅が空きすぎるので
下記のメディアクエリでアイキャッチの内容を切り替え
======================================================*/
.catchBox h1 .rounded-bg.fs-small { font-size: clamp(22px, calc(22px + (2 * ((100vw - 320px) / (900 - 320)))), 24px);}
@media (max-width: 900px) {
.catchBox h1 { font-size: clamp(26px, calc(27px + (28.364 - 27) * ((100vw - 320px) / (900 - 320))), 28.364px);}
.catchBox h1 .rounded-bg { margin: 0 0 10px 0; padding: 13px 13px 13px 0;}

}


/*ロゴ（建物まるごと建物断熱）と
テキスト「冷暖房効率アップで、光熱費もぐっとダウン」を囲う枠
======================================================*/
.eyecatch_logo_pc { width: clamp(150px, calc(150px + (245 - 150) * ((100vw - 900px) / (1920 - 900))), 245px);}

/*テキスト「冷暖房効率アップで、光熱費もぐっとダウン」
======================================================*/
#eyecatchBox p { font-size: clamp(15px, calc(15px + (24 - 15) * ((100vw - 900px) / (1920 - 900))), 24px); font-weight: 500; line-height: 2.2; margin: 0 0 70px 0; text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);}
#eyecatchBox p span.eyecatch_comm { border-bottom: solid 1px #2EA7E0; color: #333; padding: 0 0 11px 0;}

@media (max-width: 1300px) {
#eyecatchBox p { line-height: 2.3;}
}
@media (max-width: 1040px) {
#eyecatchBox p { line-height: 2.3;}
#eyecatchBox p span.eyecatch_comm {  padding: 0 0 8px 0;}
#eyecatchBox p span.eyecatch_comm {  padding: 0 0 8px 0;}
}

@media (max-width: 900px) {
#eyecatchBox p { font-size: clamp(15px, calc(15px + (19.6 - 15) * ((100vw - 320px) / (900 - 320))), 19.6px); font-weight: 400; line-height: 2; margin: 0; padding: 0; text-align: left;}
#eyecatchBox p span.eyecatch_comm {  padding: 0 0 5px 0;}
}


/*ロゴ（まるごと建物冷暖）
======================================================*/
.eyecatch_logo_pc { display: block;}
.eyecatch_logo_sp { display: none;}
.eyecatch_logo_pc img {  margin: 0 0 7px 0; max-width: 245px; width: 100%;}

@media (max-width: 900px) {
.eyecatch_logo_pc { display: none;}
.eyecatch_logo_sp { display: block; position: absolute; bottom: -100px; left: 0; width: clamp(180px, calc(180px + (260 - 180) * ((100vw - 320px) / (900 - 320))), 260px);}
.eyecatch_logo_sp img { margin: 0;  max-width: 178px; width: 100%;}
}
@media (max-width: 768px) {
.eyecatch_logo_sp img { margin: 0;  max-width: 178px; width: 80%;}
}


/*ボタン「かんたん見積もり診断」アニメーション版
======================================================*/
.orderBtn { background: #ff5500; border: 1px solid #ff5500; border-radius: 60px; display: flex; align-items: center; height: 80px; text-align: left; width: 400px;}
.orderBtn:hover { background: #fff; border: 1px solid #ff5500;}

.orderBtn a { color: #fff; display: block; font-size: 23px; line-height: 23px; text-decoration: none; padding: 10px; width: 100%;}
.orderBtn a:hover { color: #ff5500;}

/*虫眼鏡アイコン*/
.orderBtn a span { display: inline-block; margin: 0 20px 0 0; transform: translate(0, 0) rotate(0); transition: all .5s}
.orderBtn a:hover span { transform:  translate(10px, 0) rotate(360deg);}

/*改行を無効に*/
.orderBtn br { display: none; }


@media (max-width: 900px) {
.orderBtn { background: #f50 url("../images/search_mb.png") no-repeat; background-position: center center; border-radius: 69px;
border: 1px dashed #FFF; box-shadow: 0 0 10px 0 #DDA699; display: flex; align-items: center; justify-content: center; height: 130px; padding: 8px; position: absolute; bottom: -110px; right: 0px; text-align: center; width: 130px;}
.orderBtn a { color: #fff; font-size: 16px; line-height: 24px; text-decoration: none; white-space: nowrap; }

/*虫眼鏡アイコンは出さない*/
.orderBtn a span { display: none;}
/*改行を有効に*/
.orderBtn br { display: inline-block; }

.orderBtn:hover {background: #f50 url("../images/search_mb.png") no-repeat; background-position: center center;}
.orderBtn a { color: #fff; display: flex; align-content: center; justify-content: center; align-items: center; height: 100px; width: 120px;}
.orderBtn a:hover { color: #fff;}
}

@media (max-width: 576px) {

.orderBtn a { font-size: 14px; line-height: 20px;}
}


/*2025.09.01 追加*/
/*ノートPCで見た時の調整
============================================================================================================*/
@media (min-width: 1024px) and (max-width: 1920px) and (max-height: 780px) {

#eyecatchBox { margin: 80px 0 0 0; padding: 0 0 0 1.8%; position: relative; width: 90%;}

.catBox { display: flex; align-items: center; gap: 17px; position: absolute; top: -30px; left: 470px; }


/*丸の枠*/
.circle { height: 100px; width: 100px; }
/*テキスト*/
.circle strong { font-size: clamp(25px, calc(25px + (28 - 25) * ((100vw - 1000px) / (1440 - 1000))), 28px); }

.catchBox { margin: 0 0 30px 0;}
.catchBox h1 {font-size: clamp(41px, calc(41px + (48 - 41) * ((100vw - 1000px) / (1440 - 1000))), 48px);}
.catchBox h1 .rounded-bg { margin: 0 0 13px 0; padding: 20px 20px 20px 0;}


.eyecatch_logo_pc { width: clamp(150px, calc(150px + (200 - 150) * ((100vw - 900px) / (1920 - 900))), 200px);}
#eyecatchBox p { font-size: clamp(15px, calc(15px + (20 - 15) * ((100vw - 900px) / (1920 - 900))), 20px); margin: 0 0 40px 0; }
#eyecatchBox p span.eyecatch_comm { border-bottom: solid 1px #2EA7E0; color: #333; padding: 0 0 11px 0;}

} 
/*============================================================================================================*/




/*==============================================================================
建物まるごと冷暖 かんたん見積もり表
===============================================================================*/
#sec_estimate {  margin: 70px auto 50px auto; }

#sec_estimate .wrap { margin: 0 auto; padding: 0 20px; max-width: 1140px; width: 100%;}

/*2025.09.12 追加 スライダー用調整*/
#sec_estimate .slick-dots,
#sec_estimate_02 .slick-dots { display: flex !important; justify-content: center; list-style: none; margin-top: 10px; padding: 0; }

#sec_estimate .slick-dots li,
#sec_estimate_02 .slick-dots li { height: 10px; margin: 0 5px; width: 40px; }

#sec_estimate .slick-dots li button,
#sec_estimate_02 .slick-dots li button { background: #ccc; border: none; border-radius: 5px; color: transparent; font-size: 0; height: 100%; padding: 0; width: 100%; }

#sec_estimate .slick-dots li button:before,
#sec_estimate_02 .slick-dots li button:before { content: ''; }

#sec_estimate .slick-dots li.slick-active button,
#sec_estimate_02 .slick-dots li.slick-active button { background: #004386; }



@media (max-width: 900px) {
#sec_estimate {  margin: 110px auto 70px auto; padding: 0 20px }
}
@media (max-width: 768px) {
#sec_estimate {  margin: 110px auto 36px auto; padding: 0 20px }
}

/*タイトル
---------------------------------*/
#sec_estimate h1 { margin: 0 0 30px 0;}
#sec_estimate h1 img { margin: 0 auto; max-width: 421px; width: 100%; }

@media (max-width: 900px) {
#sec_estimate .wrap { margin: 0 auto; padding: 0 10px; text-align: left; max-width: 100%; width: 100%;}
#sec_estimate h1 img {  margin: 0; max-width: 347px; width: 100%; }

/*2025.09.12 追加 スライダー用調整*/
#sec_estimate .slick-slide img,
#sec_estimate_02 .slick-slide img { width: 100%;}
}

/*==============================================================================
全面バナー
===============================================================================*/

/*背景色の上に背景画像を2枚敷く
それぞれ1つ目が最前面の設定
---------------------------------*/
.sec_bnrBox{ background: #3D81D4 url("../images/bnr_bg.png") center center no-repeat; background-size: cover; padding: 70px 0; text-align: center; width: 100%; }

/*キャッチコピー*/
.sec_bnrBox h1 { color: #fff; font-size: 2.8rem; font-family: "Zen Maru Gothic"; font-weight: 700; line-height: 1.5; text-align: center;}

@media (max-width: 1200px) {
.sec_bnrBox h1 { font-size: 2.4rem; letter-spacing: -1px;}
}

@media (max-width: 990px) {
.sec_bnrBox {background: url("../images/bnr_bg_circle_sp.png") top center no-repeat; background-size: cover; padding: 86px 0 38px 0;}
.sec_bnrBox h1 { margin: 0 auto 88px auto; max-width: 400px;}
}

@media (max-width: 320px) {
.sec_bnrBox {padding: 60px 0 40px 0; }
.sec_bnrBox h1 { margin: 0 auto 40px auto;}
}

/*タブ付きのリンクボタン
---------------------------------*/
.estimateBnr { margin: 0 auto 34px auto; position: relative; text-align: center; max-width: 450px; width: 100%; }

.estimateBnr a { background: #fff; border-radius: 12px; display: block; padding: 26px 10px; transition: all 0.3s ease;}
.estimateBnr a:hover { background: #f50; text-decoration: none;}
.estimateBnr a:hover p { color: #fff;}
.estimateBnr a:hover span { background: #fff; color: #f50;}

/*タブ部分*/
.estimateBnr span { background: #F50; border-radius: 16px 16px 0 16px; color: #fff; display: block; font-size: 14px; font-weight: bold; padding: 6px 12px; position: absolute; top: 0; left: 12px; transform: translateY(-50%); }
/*ボタンのテキスト*/
.estimateBnr p { color: #004A93; font-size: 1.5rem; font-weight: bold; line-height: 1; margin: 0; }

@media (max-width: 990px) {
.estimateBnr { margin: 0 auto 22px auto;}
.estimateBnr p { font-size: 1.2rem;}
.normalBnr p { font-size: 1.2rem;}
}
/*ハンバーガーメニュー内でのみアニメーションがずれるのでCSSで対応*/
.ani_shakeY_css { animation: shakeY 1s ease-in-out infinite;}
@keyframes shakeY { 0%   { margin-top: -2px; } 50%  { margin-top:  2px; } 100% { margin-top: -2px; }}


/*通常のリンクボタン
---------------------------------*/
.normalBnr { margin: 0 auto; text-align: center; max-width: 450px; width: 100%}

.normalBnr a { background: #004386; border-radius: 10px; display: block; padding: 26px 10px; transition: all 0.3s ease; }
.normalBnr a:hover { background: #fff; text-decoration: none;}
.normalBnr a:hover p { color: #004386;}

/*テキスト*/
.normalBnr p { color: #fff; font-size: 24px; font-weight: bold; margin: 0; }


/*ハンバーガーメニューの時のリンクボタン
---------------------------------*/
@media (max-width: 1000px) {
#header_menu.fixed .forGmenu_sp .estimateBnr { margin: 50px auto 20px auto;}
#header_menu.fixed .forGmenu_sp .normalBnr { margin: 0 auto 20px auto;}

.estimateBnr p { font-size: 1.1rem;}
.normalBnr p { font-size: 1.1rem;}
}
@media (max-width: 320px) {
#header_menu.fixed .forGmenu_sp .estimateBnr { margin: 50px auto 20px auto;}
#header_menu.fixed .forGmenu_sp .normalBnr { margin: 0 auto 20px auto;}

.estimateBnr p { font-size: 1.1rem;}
.normalBnr p { font-size: 1.1rem;}
}



/*==============================================================================
【こんなお困りごとはありませんか】
===============================================================================*/
#sec_trouble { background: url("../images/trouble_bg.png") center bottom no-repeat; background-size: cover; margin: 0 auto 0 auto; padding: 70px 70px 50px 70px; width: 100%; }

#sec_trouble h1 { margin: 0 0 60px 0; text-align: center;}
#sec_trouble h1 img { margin: 0 auto; max-width: 729px; width: 100%;}


/*白い角丸のボックス*/
#sec_trouble .troubleBox { background: #fff url("../images/trouble_bg_human.png") no-repeat bottom center; background-size: 355px 210px; border-radius: 30px; margin: 0 auto 80px auto; padding: 80px 80px 100px 80px;  max-width: 1140px; width: 100%; }

/*困りごとのリスト
---------------------------------*/
#sec_trouble .troubleBox ul { }
#sec_trouble .troubleBox ul li { }
#sec_trouble .troubleBox ul li p { background: #F3F5F9; border-radius: 6px;  display: table; font-size: 1.12rem; font-weight: 600; margin: 0 20px 30px 0; padding: 10px; text-align: center; width: 100%; }

/*中央中段寄せの為の調整*/
#sec_trouble .troubleBox ul li p span { display: table-cell; vertical-align: middle; text-align: center;}
/*文字色*/
#sec_trouble .troubleBox ul li p strong { color: #008AD2;}

/*2つ目のulの中身は両端に寄せる*/
#sec_trouble .troubleBox ul:last-of-type {justify-content: space-between;}

.trouble_img { display: none; }

@media (max-width: 1050px) {
#sec_trouble .troubleBox ul li p { font-size: 1rem; font-weight: 600; margin: 0 10px 20px 0; padding: 10px;}
#sec_trouble .troubleBox { margin: 0 auto 60px auto; padding: 50px 30px 120px 30px; width: 100%; }
}

@media (max-width: 990px) {
#sec_trouble { padding: 40px 30px 20px 30px; width: 100%; }
#sec_trouble .troubleBox { margin: 0 auto 60px auto; padding: 50px 30px 120px 30px; width: 100%; }
.trouble_img { margin: 0 auto; text-align: center; width: 100%;}
.trouble_img img { max-width: 355px; width: 100%;}
#sec_trouble .troubleBox ul li p { font-size: 1rem; font-weight: 600; margin: 0 10px 20px 0; padding: 10px;}
}

@media (max-width: 805px) {
#sec_trouble { padding: 40px 20px 20px 20px; width: 100%; }
#sec_trouble .troubleBox { margin: 0 auto 60px auto; padding: 50px 20px 140px 20px; width: 100%; }
.trouble_img { margin: 0 auto; text-align: center; width: 100%;}
#sec_trouble .troubleBox ul li p { font-size: 1rem; font-weight: 600; margin: 0 10px 20px 0; padding: 10px;}
}

@media (max-width: 767px) {
#sec_trouble { background: url("../images/trouble_bg.png") no-repeat bottom center; background-size: cover; margin: 0 auto; padding: 20px 20px 20px 20px; width: 100%; }
/*白い角丸のボックス*/
#sec_trouble .troubleBox { background: #fff; background-image: none; border-radius: 30px; margin: 0 auto 80px auto; padding: 40px 20px 0 20px; width: 100%; }
#sec_trouble h1 { margin: 0 0 30px 0;}
#sec_trouble h1 img { margin: 0 auto; max-width: 330px; width: 100%;}
.trouble_img { display: block; }
#sec_trouble .troubleBox ul li p { font-size: 1rem; font-weight: 600; margin: 0 10px 20px 0; padding: 10px;}
}

@media (max-width: 430px) {
#sec_trouble .troubleBox ul li p { font-size: 1rem; font-weight: 600; margin: 0 0 10px 0; padding: 10px;}
#sec_trouble ul.no-gutter,
#sec_trouble ul.no-gutter li { padding-left: 5px !important; padding-right: 5px !important;}
}

@media (max-width: 375px) {
#sec_trouble .troubleBox ul li p { font-size: 0.9rem; font-weight: 600; margin: 0 0 10px 0; padding: 10px;}
}
@media (max-width: 350px) {
#sec_trouble .troubleBox ul li p { font-size: 0.9rem; font-weight: 600; margin: 0 0 10px 0; padding: 10px;}
#sec_trouble ul.no-gutter,
#sec_trouble ul.no-gutter li { padding-left: 4px !important; padding-right: 4px !important;}
}
@media (max-width: 345px) {
#sec_trouble .troubleBox ul li p { font-size: 0.8rem; font-weight: 600; margin: 0 0 10px 0; padding: 10px;}
#sec_trouble ul.no-gutter,
#sec_trouble ul.no-gutter li { padding-left: 4px !important; padding-right: 4px !important;}
}


/*==============================================================================
【これら建物の内装・外装のお困りごと 建物まるごと冷暖なら1社ですべて解決します！】
===============================================================================*/
#sec_solution { margin: 0 auto; padding: 40px 40px 80px 40px;}

/*タイトル
---------------------------------*/
#sec_solution h1 { margin: 0 0 40px 0; text-align: center;}
#sec_solution h1 img { max-width: 1079px; width: 100%;}


/*リスト
---------------------------------*/
#sec_solution ul { display: flex; justify-content: center;align-items: center;}

#sec_solution ul li { text-align: center; }
#sec_solution ul li:nth-of-type(1) img{ display: block; margin: 0 auto 20px auto; }
#sec_solution ul li:nth-of-type(2) img { margin: 0 auto;}
#sec_solution ul li:nth-of-type(3) img { display: block; margin: 0 auto 10px auto;}

#sec_solution ul li br { display: none;}
@media (max-width: 1124px) {
#sec_solution ul li br { display: inline-block;}
}

/*テキスト*/
#sec_solution ul li p { font-size: 1.25rem; line-height: 1.6; margin: 0 auto 10px auto; width: 100%; }
/*オレンジの角丸*/
#sec_solution ul li p.orangeBox { background: #f50; border-radius: 20px;  color: #fff; font-size: 1.1rem; line-height: 1.3; padding: 5px 20px; text-align: center; width: fit-content; }


@media (max-width: 990px) {
#sec_solution h1 { margin: 0 0 40px 0;}
#sec_solution ul li p {  font-size: 1rem; line-height: 1.5; letter-spacing: -1px; margin: 0 auto 27px auto; width: 100%; }
}

@media (max-width: 767px) {
#sec_solution { margin: 0 auto; padding: 30px;}
#sec_solution h1 img { max-width: 349px; width: 100%;}
#sec_solution ul li:nth-of-type(2) img { margin: 0 auto; max-width: inherit;}
#sec_solution ul li:nth-of-type(3) img { display: block; margin: 15px auto 10px auto;}

#sec_solution ul li p {  font-size: 1rem; line-height: 1.5; margin: 0 auto 27px auto; width: 100%; }
#sec_solution ul li p.orangeBox {font-size: 1rem; line-height: 1.4; padding: 6px 15px;}

}

@media (max-width: 450px) {
#sec_solution h1 span { font-size: 1.1rem; font-weight: 700; line-height: 2; margin: 0 0 15px 0; padding: 5px 0; position: relative;}
#sec_solution h1 p {  font-size: 1.8rem; font-weight: 700; line-height: 1.5; }

}


/*==============================================================================
【建物まるごと冷暖が 選ばれる３つの理由】
===============================================================================*/
#sec_choose { background: #F3F5F9 url("../images/choose_bg.svg") no-repeat; background-position: center center; background-attachment: fixed; background-size: 100% 100%; margin: 0 auto 40px auto; padding: 90px 70px 90px 70px; width: 100%; }

#sec_choose h1 { margin: 0 0 60px 0; text-align: center;}
#sec_choose h1 img { margin: 0 auto; max-width: 600px; width: 100%;}

#sec_choose ul ul { display: flex; justify-content: center; align-items: center;}
#sec_choose ul li { margin: 0 0 30px 0; }
#sec_choose ul li img { margin: 0 auto; width: 100%; }

#sec_choose ul li p { background: #fff; font-size: 1rem; font-weight: 400; margin: 0; padding: 20px 15px; }
#sec_choose ul li span { display: block;  font-size: 1.125rem; font-weight: 700; margin: 0 0 20px 0; padding: 0; text-align: center; }


@media (max-width: 1100px) {
#sec_choose ul.no-gutter,
#sec_choose ul.no-gutter li { padding-left: 10px !important; padding-right: 10px !important;}

#sec_choose ul li p { background: #fff; font-size: 0.8rem; font-weight: 400; padding: 20px 14px;}
#sec_choose ul li span { display: block;  font-size: 0.9rem; font-weight: 700;  letter-spacing: -1px; margin: 0 0 20px 0; padding: 0; text-align: center; }
}

@media (max-width: 900px) {
#sec_choose { padding: 50px 30px 50px 30px; }
#sec_choose ul li p { background: #fff; font-size: 0.8rem; font-weight: 400; padding: 20px 14px;}
#sec_choose ul li span { display: block;  font-size: 0.9rem; font-weight: 700; letter-spacing: -1px; margin: 0 0 20px 0; padding: 0; text-align: center; }
}
@media (max-width: 780px) {
#sec_choose { padding: 50px 20px 50px 20px; }
#sec_choose ul.no-gutter,
#sec_choose ul.no-gutter li { padding-left: 8px !important; padding-right: 8px !important;}
#sec_choose ul li p { background: #fff; font-size: 0.8rem; font-weight: 400; padding: 20px 14px;}
#sec_choose ul li span { display: block;  font-size: 0.9rem; font-weight: 700; letter-spacing: -1px; margin: 0 0 20px 0; padding: 0; text-align: center; }
}

@media (max-width: 767px) {
#sec_choose { background: url("../images/choose_bg_sp.png") no-repeat; background-size: cover; margin: 0 auto; padding: 50px 20px 50px 20px; width: 100%; }
#sec_choose h1 { margin: 0 0 30px 0; text-align: center;}
#sec_choose h1 img { margin: 0 auto; max-width: 287px; width: 100%;}


#sec_choose ul li p { background: #fff; font-size: 1rem; font-weight: 400; margin: 0; padding: 20px 15px; }
#sec_choose ul li span { display: block;  font-size: 1.125rem; font-weight: 700; margin: 0 0 20px 0; padding: 0; text-align: center; }
}

/*==============================================================================
【他社との比較】
===============================================================================*/
#sec_comparison { margin: 0 auto; padding: 100px 22px; }
#sec_comparison h1 { font-size: 2.5rem; font-family: "Zen Maru Gothic"; font-weight: 700; line-height: 1; margin: 0 0 40px 0; text-align: center;}

.comparison_img { width: 100%; }
.comparison_img img { max-width: 1095px; width: 100%; }
/*PCの時は非表示*/
.comparison_img_sp { display: none;}

@media (max-width: 1140px) {
.comparison_img { padding: 0 20px; }
}

@media (max-width: 900px) {
#sec_comparison { margin: 0 auto; padding: 50px 22px; }
#sec_comparison h1 { font-size: 2.2rem; margin: 0 0 39px 0;}
}
@media (max-width: 780px) {
#sec_comparison h1 { font-size: 2.1rem; margin: 0 0 39px 0;}
.comparison_img { display: none; }
.comparison_img_sp { display: block; text-align: center; }
}

@media (max-width: 500px) {

/*スマホで横スクロールできる枠
---------------------------------*/
.scroll-container { margin: 0 auto;  max-width: 98%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; position: relative; }
.scroll-inner img { display: block; object-fit: contain; max-width: 500px !important; }
}

@media (max-width: 430px) {
#sec_comparison h1 { font-size: 2rem; margin: 0 0 40px 0;}
}

@media (max-width: 320px) {
#sec_comparison h1 { font-size: 1.9rem; margin: 0 0 30px 0;}
}


/*==============================================================================
【商品紹介】
===============================================================================*/
#sec_product { background: #F3F5F9; margin: 0 auto; padding: 85px 90px; }
#sec_product h1 { color: #004386; font-size: 2.5rem; font-family: "Zen Maru Gothic"; font-weight: 700; margin: 0 0 60px 0; text-align: center;}

#sec_product .wrapper { margin: 0 auto; max-width: 1140px; width: 100%;}

@media (max-width: 1200px) {
#sec_product { margin: 0 auto; padding: 65px 20px 65px 20px; }
#sec_product .wrapper { margin: 0 auto; max-width: 100%; width: 100%;}
}

@media (max-width: 768px) {
#sec_product h1 { font-size: 2.1rem; margin: 0 0 40px 0;}
}

@media (max-width: 576px) {
#sec_product { margin: 0 auto; padding: 50px 10px 50px 10px; }
}

@media (max-width: 320px) {
#sec_product { margin: 0 auto; padding: 30px 10px 30px 10px; }
#sec_product h1 { font-size: 1.9rem; margin: 0 0 40px 0;}
}

/*タブ切り替えのボックス
---------------------------------*/
#tab_area .nav-item { font-size: 1.6rem; font-weight: 600; flex: 1; margin-right: 30px; text-align: center;}
#tab_area .nav-item:last-child { margin-right: 0; }
#tab_area .nav-item .nav-link { display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center;}

/*窓の文字だけ大きくする*/
@media (max-width: 780px) {
#tab_area .nav-item:nth-child(1) .nav-link { font-size: 1.625rem; font-weight: 600; } /*窓*/
}

/*タブの配色*/
#tab_area .nav-item:nth-child(1) .nav-link { background: #43AEEA; color: #fff;} /*窓*/
#tab_area .nav-item:nth-child(2) .nav-link { background: #204483; color: #fff;} /*室内・内装*/
#tab_area .nav-item:nth-child(3) .nav-link { background: #F50; color: #fff;} /*外壁・外装*/

/*アクティブ時は背景とも色を反転*/
#tab_area .nav-item:nth-child(1) .nav-link.active { background: #fff; color: #43AEEA; font-weight: 700;}
#tab_area .nav-item:nth-child(2) .nav-link.active { background: #fff; color: #204483; font-weight: 700;}
#tab_area .nav-item:nth-child(3) .nav-link.active { background: #fff; color: #F50; font-weight: 700;}

/*タブに付与されるborderの処理*/
#tab_area .nav-item .nav-link { border-top: 1px solid #dee2e6; border-right: 1px solid #dee2e6; border-bottom: 1px solid #fff; border-left: 1px solid #dee2e6;  border-radius: 30px 30px 0 0;}
#tab_area .nav-link.active {background-color: inherit; box-shadow: none;}


/*展開先の枠*/
#panel_area { background: #fff; border: 1px solid #dee2e6; border-top: none; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.25); padding: 24px 20px 0 20px;}

@media (max-width: 992px) {
#panel_area { padding: 20px 8px;}
#tab_area .nav-item { font-size: 1.4rem; font-weight: 600; margin-right: 20px;}
}

@media (max-width: 576px) {
#panel_area { padding: 15px 6px;}
#tab_area .nav-item { font-size: 1.2rem; font-weight: 600; margin-right: 20px;}
#tab_area .nav-item .nav-link { padding: 8px; }
}

@media (max-width: 430px) {
#panel_area { padding: 15px 6px;}
#tab_area .nav-item { font-size: 1.1rem; font-weight: 600; margin-right: 20px;}
}
@media (max-width: 393px) {
#panel_area { padding: 10px 4px;}
#tab_area .nav-item .nav-link { border-radius: 10px 10px 0 0;}
#tab_area .nav-item { font-size: 1rem; font-weight: 600; margin-right: 20px;}
#tab_area .nav-item .nav-link { padding: 6px; }
}

@media (max-width: 320px) {
#panel_area { padding: 8px 5px;}
#tab_area .nav-item .nav-link { border-radius: 10px 10px 0 0;}
#tab_area .nav-item { font-size: 0.9rem; font-weight: 600; margin-right: 20px;}
#tab_area .nav-item .nav-link { padding: 6px; }
}

/*==============================================================================
【商品紹介】
===============================================================================*/

/*スライダー全体の調整用
親要素に position: relative をつける
---------------------------------*/
.productSlider { margin: 0 auto; position: relative; padding: 0 30px; max-width: 1200px;}
.productSlider_cont { position: relative; padding: 0 30px;}

/*大タイトル*/
.productSlider h2 { color: #000; font-size: 1.8rem; font-weight: 600; line-height: 1.2; margin: 0 0 20px 0; padding: 0 0 0 30px;}

@media (max-width: 900px) {
.productSlider h2 { font-size: 1.5rem; margin: 0 0 10px 0; padding: 0;}
.productSlider { padding: 0 10px; max-width: 100%;}
}

@media (max-width: 576px) {
.productSlider h2 { font-size: 1.25rem; margin: 0 0 10px 0; padding: 0;}
.productSlider { padding: 0 10px; max-width: 100%;}
}

@media (max-width: 390px) {
.productSlider h2 { font-size: 1.4rem; margin: 0 0 10px 0; padding: 0;}
.productSlider { padding: 0 10px; max-width: 100%;}
}
@media (max-width: 320px) {
.productSlider h2 { font-size: 1.2rem; margin: 0 0 15px 0; padding: 0;}
.productSlider { padding: 0 10px; max-width: 100%;}
}


/*=================================
商品紹介一式
=================================*/
.productSlider .productSlider_cont dl { margin: 0 0 10px 0; width: 100%; }

/*タイトル*/
.productSlider .productSlider_cont dt { margin: 0 0 15px 0; }
.productSlider .productSlider_cont dt h3 { font-size: 1.43rem; font-weight: 700; line-height: 1.5; }
.productSlider .productSlider_cont dt h3 span { color: #fff; height: 45px; display: inline-block; margin: 0 15px 0 0; padding: 5px 10px 2px 10px; text-align: center; width: 45px;}

.productSlider .productSlider_cont dt h3 { display: flex; align-items: center;}


/*画像とテキストの枠*/
.productSlider .productSlider_cont dd { border: 1px solid #D9D9D9; padding: 15px 22px; }
.productSlider .productSlider_cont dd img { margin: 0 auto;}
.productSlider .productSlider_cont dd p { font-size: 0.81rem; font-weight: 400; line-height: 1.6; margin: 0 auto 15px auto; text-align: left; word-break: break-all;}

/*正円の中にカテゴリが書いてあるやつ*/
.productSlider .productSlider_cont dd .catGroup { margin: 30px 0 0 0;}
.productSlider .productSlider_cont dd .catGroup img {max-width: 456px; width: 100%;}

@media (max-width: 1000px) {
.productSlider .productSlider_cont dd .catGroup .appearForPC { display: inline-block;}
.productSlider .productSlider_cont dd .catGroup .appearForSP { display: none;}
}
@media (max-width: 900px) {
.productSlider .productSlider_cont dd .catGroup .appearForPC { display: none;}
.productSlider .productSlider_cont dd .catGroup .appearForSP { display: inline-block;}
}


@media (max-width: 1000px) {
.productSlider .productSlider_cont dd img { margin: 0 auto 15px auto;}
}

@media (max-width: 900px) {
.productSlider .productSlider_cont { margin: 0 auto; padding: 0; max-width: 100%; }
.productSlider .productSlider_cont dd .catGroup { text-align: center; }
/*aroundにせず左寄せにしたい時*/
.productSlider .productSlider_cont dd .catGroup.alignLeft { text-align: left !important; }

.productSlider .productSlider_cont dd .catGroup img { max-width: 333px; width: 100%; }
}

@media (max-width: 768px) {
.productSlider .productSlider_cont dt h3 { font-size: 1.4rem; font-weight: 700; }
}


@media (max-width: 576px) {
.productSlider .productSlider_cont dt h3 { font-size: 1.2rem; font-weight: 700; }
.productSlider .productSlider_cont dt h3 span { height: 40px; margin: 0 15px 0 0; padding: 7px 10px 0px 10px; width: 40px;}
.productSlider { padding: 8px 5px;}
.productSlider .productSlider_cont dd { padding: 10px 10px; }
.productSlider .productSlider_cont dd img { margin: 0 auto 10px auto;}
.productSlider .productSlider_cont dd p { font-size: 0.8rem; font-weight: 400; line-height: 1.6; margin: 0 auto 10px auto;}
}

@media (max-width: 320px) {
.productSlider .productSlider_cont dt h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.5; }
}


/*スライダー上部のテキストメニュー
---------------------------------*/
.product-content { display: flex; align-items: center; justify-content: center;}

.productSlider ul.productSlider_menu { margin: 0 0 30px 0; padding: 0 0 0 30px; text-align: left;}

.productSlider_menu li { border-bottom: 2px solid #e5eaf0; margin: 0; position: relative; }
.productSlider_menu li:not(:last-child) { margin: 0  60px 20px 0 !important;}

.product-content span.wrap { display: inline-flex; overflow: hidden; position: relative; }

.product-content span.prod_name { font-size: 1.125rem; font-weight: 800; line-height: 1.7; display: block; transform: translateY(0); transition: .6s; }

.product-content span.prod_line { bottom: -2px; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left center; transition: .6s; width: 100%; }

.productSlider ul.productSlider_menu li:hover { cursor: pointer;}
.productSlider_menu li:hover .product-content span.prod_name { animation: scrollUp .8s forwards cubic-bezier(0,0,0,1.01); }
.productSlider_menu li.active .product-content span.prod_name { animation: none; }
.productSlider_menu li:hover .product-content span.prod_line,
.productSlider_menu li.active .product-content span.prod_line{ transform: scaleX(1); }

#tab1 .product-content span.prod_line { background-color: #43AEEA;}
#tab2 .product-content span.prod_line { background-color: #004386;}
#tab3 .product-content span.prod_line { background-color: #f50;}


@keyframes scrollUp {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-101%); }
  30.1% { transform: translateY(101%); }
  80%  { transform: translateY(0); }
}

/*矢印アイコン*/
.c_icon { flex-shrink: 0; display: inline-block; height: 30px; margin: 0 0 0 30px; vertical-align: middle; width: 30px; }
#tab1 .c_icon_arrow { background: url("../images/product_slider_arrow_skyblue.svg") no-repeat center center / 30px auto; }
#tab2 .c_icon_arrow { background: url("../images/product_slider_arrow_navy.svg") no-repeat center center / 30px auto; }
#tab3 .c_icon_arrow { background: url("../images/product_slider_arrow_orange.svg") no-repeat center center / 30px auto; }

/*テキスト色はカテゴリ毎で変更するなら下記をon*/
#tab1 ul.productSlider_menu li:hover span,
#tab1 ul.productSlider_menu li.active span{ color: #43AEEA;}

#tab2 ul.productSlider_menu li:hover span,
#tab2 ul.productSlider_menu li.active span{ color: #004386;}

#tab3 ul.productSlider_menu li:hover span,
#tab3 ul.productSlider_menu li.active span { color: #F50;}

/*アイコンの背景はカテゴリ毎で変更*/
#tab1 .circle-arrow { background: #43AEEA;}
#tab2 .circle-arrow { background: #004386;}
#tab3 .circle-arrow { background: #F50;}


@media (max-width: 900px) {
.productSlider ul.productSlider_menu { margin: 0 0 30px 0; padding: 0 0 0 0; text-align: left;}
.productSlider_menu li:not(:last-child) { margin: 0 30px 15px 0 !important;}

.product-content span.prod_name { font-size: 1.1rem; font-weight: 700; line-height: 1.5;}
.c_icon { height: 24px; margin: 0 0 0 10px; width: 24px; }
#tab1 .c_icon_arrow { background: url("../images/product_slider_arrow_skyblue.svg") no-repeat center center / 24px auto; }
#tab2 .c_icon_arrow{ background: url("../images/product_slider_arrow_navy.svg") no-repeat center center / 24px auto; }
#tab3 .c_icon_arrow { background: url("../images/product_slider_arrow_orange.svg") no-repeat center center / 24px auto; }
}

@media (max-width: 576px) {
.productSlider_menu li:not(:last-child) { margin: 0 0 15px 0 !important;}
.product-content span.prod_name { font-size: 1rem; font-weight: 700; line-height: 1.5;}
.c_icon { height: 20px; margin: 0 0 0 5px; width: 20px; }
#tab1 .c_icon_arrow { background: url("../images/product_slider_arrow_skyblue.svg") no-repeat center center / 20px auto; }
#tab2 .c_icon_arrow{ background: url("../images/product_slider_arrow_navy.svg") no-repeat center center / 20px auto; }
#tab3 .c_icon_arrow { background: url("../images/product_slider_arrow_orange.svg") no-repeat center center / 20px auto; }
}

@media (max-width: 320px) {
.product-content span.prod_name { font-size: 1rem; font-weight: 700; line-height: 1.5;}

}

/*スライダーの左右の矢印を紺色に矯正*/
.carousel-control-next,
.carousel-control-prev { color: #000 !important; opacity: 1 !important;}

/*カテゴリ毎で矢印の色を変更*/
/*#customCarousel_01 .carousel-control-next, #customCarousel_01 .carousel-control-prev { color: #43AEEA !important;}
#customCarousel_02 .carousel-control-next, #customCarousel_02 .carousel-control-prev { color: #204483 !important;}
#customCarousel_03 .carousel-control-next, #customCarousel_03 .carousel-control-prev { color: #F50 !important;}*/

/*hover時にカーソルをpointerに*/
.carousel-control-next:hover, .carousel-control-prev:hover { cursor: pointer;}

/* 左矢印をスライダーの左外に */
.carousel-control-prev { left: -80px;}
/* 右矢印をスライダーの右外に */
.carousel-control-next { right: -80px;}


/*PCではSP用のコントローラーを非表示 */
@media (min-width: 900px) {.sp-controls { display: none !important; } }
/*SPではPC用のコントローラーを非表示 */
@media (max-width: 900px) {.pc-controls { display: none !important; } }

@media (max-width: 900px) {
/*スマホ時のみ表示するコントローラー
---------------------------------*/
.sp-controls { align-items: center; display: flex; gap: 10px; justify-content: flex-start; margin: 0; max-width: 100%; padding: 0;}

/* 矢印の枠（インジゲーターと並ぶ）*/
.sp-arrows { display: flex; flex-shrink: 0; gap: 0;}

/* 矢印ボタン*/
.carousel-control-prev-sp,
.carousel-control-next-sp { align-items: center; color: #000; display: flex; font-size: 1.5rem; height: 30px; justify-content: center; position: static !important; text-decoration: none; width: 30px; z-index: 50;}

/*インジケーター*/
.sp-indicators { display: flex; flex-grow: 1; align-items: center; justify-content: flex-end; list-style: none; margin: 0; padding: 0;}
/*通常*/
.sp-indicators li { background-color: #ccc; border-radius: 50%; cursor: pointer; height: 10px; margin: 0 4px; width: 10px;}
/*該当するスライダーの時*/
.sp-indicators .active { background-color: #204483;}

/*インジゲーターの色をタブ毎で変える*/
#customCarousel_01 .sp-indicators .active { background-color: #43AEEA;}
#customCarousel_02 .sp-indicators .active { background-color: #204483;}
#customCarousel_03 .sp-indicators .active { background-color: #F50;}
}

/*==============================================================================
【建物まるごと冷暖 かんたん見積もり表2】
===============================================================================*/
#sec_estimate_02 {  padding: 70px 0; }

#sec_estimate_02 .wrap { margin: 0 auto; padding: 0 20px; max-width: 1140px; width: 100%;}

#sec_estimate_02 img { margin: 0 auto; max-width: 1141px; width: 100%;}

/*タイトル
---------------------------------*/
#sec_estimate_02 h1 { margin: 0 0 54px 0;}
#sec_estimate_02 h1 img { margin: 0 auto; max-width: 586px; }

@media (max-width: 900px) {
#sec_estimate_02 {  padding: 50px 0; }
#sec_estimate_02 h1 img { margin: 0 auto; max-width: 566px; }
}

@media (max-width: 767px) {
#sec_estimate_02 {  padding: 50px 0;}
#sec_estimate_02 .wrap { margin: 0 auto; padding: 0 20px; max-width: 100%; width: 100%;}

#sec_estimate_02 h1 { margin: 0 0 30px 0;}
#sec_estimate_02 h1 img { margin: 0; max-width: 353px; width: 100%; }
}
@media (max-width: 320px) {
#sec_estimate_02 {  padding: 20px 0;}
}

/*==============================================================================
【こんなプランはいかがですか？予算別 省エネリノベーション】
===============================================================================*/
#sec_plan { background: url("../images/sec_plan_bg.png"); padding: 90px 0 90px 0;}
#sec_plan h1 { line-height: 0; margin: 0 auto; position: relative; bottom: -47px; text-align: center; z-index: -1;}
#sec_plan h1 img {margin: 0 auto;}


/*タブ切り替えのボックス
---------------------------------*/
#byPlan_tab_area { justify-content: center;}
#byPlan_tab_area .nav-item { font-size: clamp(15px, calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 500; margin-right: 40px; text-align: center;}
#byPlan_tab_area .nav-item:last-child { margin-right: 0; }
#byPlan_tab_area .nav-item .nav-link { display: flex; align-items: center; justify-content: center; padding: 10px 40px; text-align: center;}

/*タブの配色*/
#byPlan_tab_area .nav-item:nth-child(1) .nav-link { background: #43AEEA; color: #fff;} /*35坪*/
#byPlan_tab_area .nav-item:nth-child(2) .nav-link { background: #F50; color: #fff;} /*60坪*/

/*アクティブ時は背景とも色を反転*/
#byPlan_tab_area .nav-item:nth-child(1) .nav-link.active { background: #fff; color: #000;}
#byPlan_tab_area .nav-item:nth-child(2) .nav-link.active { background: #fff; color: #F50;}

/*タブに付与されるborderの処理*/
#byPlan_tab_area .nav-item .nav-link { border: none;  border-radius: 15px 15px 0 0; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.20);}
#byPlan_tab_area .nav-link.active {background-color: inherit; box-shadow: none;}

/*展開先の枠*/
#byPlan_panel_area { background: #fff; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.10); padding: 38px 50px 35px 50px; position: relative;}
#byPlan_panel_area::before { background: url("../images/sec_plan_note_bg.svg") repeat-y; background-size: 15px 30px; content: ""; height: 100%; left: 26px; position: absolute; top: 0; width: 15px;}

/*スイッチ
---------------------------------*/
#switchTab,
#switchTab_02 { margin: 0 auto 30px auto; width: fit-content; }
#switchTab ul,
#switchTab_02 ul {background: #F3F5F9; border-radius: 50px; display: flex; align-content: center; align-items: center; justify-content: flex-start !important; flex-direction: row; padding: 5px 7px;}

#switchTab a.nav-link,
#switchTab_02 a.nav-link { background: rgba(255,255,255,0.6); border-radius: 50px; color: #ccc; font-size: 1.2rem; line-height: 1; font-weight: 600; padding: 20px 56px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); text-align: center;}

#switchTab a.nav-link.active,
#switchTab_02 a.nav-link.active { background: linear-gradient(90deg, #034AAC 0%, #0D97E1 100%); color: #fff; font-weight: 600;}

/*hover時の見た目*/
/*ただしスマホでhoverの挙動を無効にするメディアクエリで囲う*/
@media (hover: hover) and (pointer: fine) {
#switchTab a.nav-link:not(.active):hover,
#switchTab_02 a.nav-link:not(.active):hover {  background: linear-gradient(90deg, #034AAC 0%, #0D97E1 100%); color: #fff; animation: lightBtn .4s linear forwards;}
}

@keyframes lightBtn {
	0% {opacity: 1}
	10% {opacity: 0}
	20% {opacity: 0}
	25% {opacity: 1}
	to {opacity: 1}
}

/*通常（pulseを実行）*/
#switchTab a.nav-link,
#switchTab_02 a.nav-link {animation: pulse 1.5s ease-in-out infinite;}
/*アクティブ時（popを優先しつつpulseを止める）*/
#switchTab a.nav-link.active,
#switchTab_02 a.nav-link.active {animation: pop 0.25s ease;}
/*クリック時（popを実行してpulseを止める）*/
#switchTab a.nav-link.active,
#switchTab_02 a.nav-link.active { animation: pop 0.25s ease, none;}

/*pop（クリック時に少し拡大する）*/
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
/*pulse（ふちどりがうねうねする）*/
@keyframes pulse {
  0%,100% { box-shadow: inset 0 0 0 1px #eee; }
  50%     { box-shadow: inset 0 0 0 2px #bbb; }
}

/*スイッチの展開先*/
#sec_plan .tab-pane p { text-align: center;}
#sec_plan .tab-pane img {  margin: 0 auto; max-width: 912px; width: 100%; }

@media (max-width: 1140px) {
#sec_plan { padding: 40px 10px;}
}


@media (max-width: 820px) {
#switchTab a.nav-link,
#switchTab_02 a.nav-link{ font-weight: 700; padding: 15px 30px;}
}

@media (max-width: 767px) {
#sec_plan { background: url("../images/sec_plan_bg_sp.svg"); padding: 40px 10px;}
#sec_plan h1 { margin: 0 auto 20px auto; position: relative; bottom: inherit;}
#sec_plan h1 img { margin: 0 auto; max-width: 267px; width: 70%; }
/*展開先の枠*/
#byPlan_tab_area { justify-content: flex-start;}
#byPlan_tab_area .nav-item { flex: 1; margin-right: 30px; }
#byPlan_panel_area { padding: 20px 10px;}
#byPlan_panel_area::before { display: none;}

#byPlan_tab_area .nav-item .nav-link { padding: 20px 0px;}
}

@media (max-width: 580px) {
#switchTab a.nav-link,
#switchTab_02 a.nav-link { padding: 10px 30px;}
}

#sec_plan .appearForSP,
#sec_plan .appearForSP_02 { display: none;}
@media (max-width: 480px) {
#sec_plan .appearForSP { display: inline-block;}
#byPlan_tab_area .nav-item { line-height: 1.2;}
}
@media (max-width: 450px) {
#sec_plan {  padding: 20px 8px;}
#sec_plan h1 {  margin: 0 auto 15px auto; }
#sec_plan h1 img { margin: 0 auto; max-width: 400px; width: 70%; }

#byPlan_panel_area { padding: 20px 5px;}
#byPlan_tab_area .nav-item .nav-link { padding: 10px 0px;}

}

@media (max-width: 440px) {
#switchTab a.nav-link,
#switchTab_02 a.nav-link { padding: 10px 20px;}
}

@media (max-width: 363px) {
#byPlan_tab_area .nav-item { margin-right: 20px; }
}


@media (max-width: 392px) {
#switchTab a.nav-link,
#switchTab_02 a.nav-link { font-size: 1rem; line-height: 1; padding: 8px 20px;}
}
@media (max-width: 340px) {
#switchTab a.nav-link,
#switchTab_02 a.nav-link { font-size: 1rem; line-height: 1; padding: 8px 15px;}
}

/*==============================================================================
【施工までの流れ】
===============================================================================*/
#sec_progress { background: #F2F2F2; padding: 90px 37px;}
#sec_progress h1 { font-size: 2.5rem; font-family: "Zen Maru Gothic"; font-weight: 700; line-height: 2; margin: 0 0 60px 0; text-align: center;}

#sec_progress img { margin: 0 auto; max-width: 1140px; width: 100%; }

#sec_progress p { color: #002357; font-size: 1.5rem; font-weight: 700; line-height: 1.6; margin: 54px 0 0 0; padding: 0; text-align: center;}
#sec_progress p small { color: #000; display: block; font-size: 0.9rem; font-weight: 500; line-height: 1.6; margin: 13px 0 0 0; text-align: center;}

@media (max-width: 1140px) {
#sec_progress { padding: 70px 37px;}
}

@media (max-width: 768px) {
#sec_progress { padding: 63px 10px;}
#sec_progress h1 { font-size: 2.1rem; font-family: "Zen Maru Gothic"; line-height: 2; margin: 0 0 20px 0;}
#sec_progress img  { margin: 0 auto; max-width: 90%; width: inherit; }
}

@media (max-width: 430px) {
#sec_progress { padding: 43px 10px;}
#sec_progress h1 { font-size: 2rem; line-height: 1.5; margin: 0 0 20px 0;}
}

@media (max-width: 320px) {
#sec_progress { padding: 43px 10px;}
#sec_progress h1 { font-size: 1.9rem; line-height: 1.5; margin: 0 0 20px 0;}
#sec_progress p { font-size: 1.2rem; font-weight: 700; line-height: 1.6; margin: 54px 0 0 0;}
#sec_progress p small { font-size: 0.9rem; font-weight: 500; line-height: 1.6; margin: 13px 0 0 0; text-align: center;}
}

/*==============================================================================
【運営社情報】
===============================================================================*/
#sec_compinfo { margin: 0; }

/*ロゴ*/
#sec_compinfo img { max-width: 230px; width: 100%;}


#sec_compinfo .gradiBox { /*background: url("../images/compinfo_bg.png") no-repeat center center; background-size: 100% 100%; border-radius: 35px;*/ padding: 72px 40px 86px 40px;}

#sec_compinfo h1 { color: #204483; font-size: 2.5rem; font-family: "Zen Maru Gothic"; font-weight: 700; line-height: 2; margin: 0 0 40px 0; text-align: center;}

/*Dwで構文エラー出ますが間違ってないはず*/
#sec_compinfo dl { display: grid; grid-template-columns: 130px 1fr; gap: 5px; margin: 0; padding: 0;}

#sec_compinfo dl dt { color: #204483; font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 320px) / (1440 - 320))), 18px); font-weight: 700;}
#sec_compinfo dl dd {  font-size: clamp(15px, calc(15px + (18 - 15) * ((100vw - 320px) / (1440 - 320))), 18px); font-weight: 400;}

@media (max-width: 1140px) {
#sec_compinfo { margin: 0 10px; }
}

@media (max-width: 768px) {
#sec_compinfo .gradiBox { padding: 57px 40px 57px 40px;}
#sec_compinfo h1 { font-size: 2.2rem; font-family: "Zen Maru Gothic"; line-height: 2; margin: 0 0 20px 0;}
/*Dwで構文エラー出ますが間違ってないはず*/
#sec_compinfo dl  { grid-template-columns: 100px 1fr; margin: 25px auto 0 auto; width: 90%; }
}

@media (max-width: 430px) {
#sec_compinfo .gradiBox {padding: 57px 0 57px 0;}
#sec_compinfo h1 { font-size: 2.1rem; line-height: 2; margin: 0 0 20px 0;}
/*Dwで構文エラー出ますが間違ってないはず*/
#sec_compinfo dl { display: grid; grid-template-columns: 1fr; gap: 0;}
}

@media (max-width: 320px) {
#sec_compinfo h1 { font-size: 1.9rem; line-height: 2; margin: 0 0 20px 0;}
#sec_compinfo .gradiBox { padding: 25px 0 25px 0;}
}
/*==============================================================================
【FAQ】
===============================================================================*/
#sec_faq { background: #7ECEF4 url("../images/sec_faq_bg.png") no-repeat; background-position: top left; margin: 0; padding: 70px 0 90px 0;}

#sec_faq .wrap { margin: 0 auto; padding: 0 20px; max-width: 1140px; width: 100%;}

#sec_faq h1 { color: #fff; font-size: 2.5rem; font-family: "Zen Maru Gothic"; font-weight: 700; line-height: 2; margin: 0 0 73px 0; text-align: center;}

@media (max-width: 768px) {
#sec_faq { background: #7ECEF4 url("../images/sec_faq_bg_sp.png") no-repeat; background-position: top right; padding: 40px 0 40px 0;}
#sec_faq h1 { color: #fff; font-size: 2.1rem; font-weight: 700; line-height: 2; margin: 0 0 30px 0; text-align: center;}
}

@media (max-width: 430px) {
#sec_faq h1 { font-size: 2rem; font-weight: 700; line-height: 2; margin: 0 0 30px 0;}
}
@media (max-width: 320px) {
#sec_faq h1 { font-size: 1.9rem; font-weight: 700; line-height: 2; margin: 0 0 30px 0;}
}

/*スイッチ*/
#switchTab_faq { margin: 0 auto 64px auto; max-width: 770px; width: max-content;}
#switchTab_faq ul {background: #fff; border-radius: 50px; display: flex; align-content: center; align-items: center; justify-content: flex-start !important; margin: 0 auto; padding: 5px 7px;}

#switchTab_faq li.nav-item { text-align: center; max-width: 235px; width: 235px;}

#switchTab_faq a.nav-link { background: rgba(255,255,255,1); border-radius: 50px; color: #3E3A39; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(21px, calc(21px + (26 - 21) * ((100vw - 1000px) / (1440 - 1000))), 26px); font-weight: 600; line-height:1;  padding: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);}

#switchTab_faq a.nav-link.active{ background: #43AEEA; color: #fff;}

/*hover時の見た目*/
/*ただしスマホでhoverの挙動を無効にするメディアクエリで囲う*/
@media (hover: hover) and (pointer: fine) {
#switchTab_faq a.nav-link:not(.active):hover { background: #43AEEA; color: #fff !important; animation: lightBtn .4s linear forwards;}
}

/*通常（pulseを実行）*/
#switchTab_faq a.nav-link {animation: pulse 1.5s ease-in-out infinite;}
/*アクティブ時（popを優先しつつpulseを止める）*/
#switchTab_faq a.nav-link.active {animation: pop 0.25s ease;}
/*クリック時（popを実行してpulseを止める）*/
#switchTab_faq a.nav-link.active { animation: pop 0.25s ease, none;}


@media (max-width: 780px) {
#switchTab_faq { margin: 0 auto 27px auto;}
#switchTab_faq li.nav-item { text-align: center; max-width: 135px; width: 135px;}
#switchTab_faq a.nav-link { font-size: clamp(16px, calc(16px + (21 - 16) * ((100vw - 320px) / (1000 - 320))), 21px) !important; font-weight: 700; line-height: 1.3; padding: 16px 0;}
}

@media (max-width: 460px) {
#switchTab_faq li.nav-item { width: 110px;}
#switchTab_faq a.nav-link { padding: 10px 0;}
}

@media (max-width: 400px) {
#switchTab_faq li.nav-item { width: 80px;}
#switchTab_faq a.nav-link { padding: 5px ;}
}


/*【アコーディオン】FAQで使うパネル式アコーディオン
---------------------------------*/
.faqlist {}
.faqlist li { font-size: 1rem; font-weight: 400; padding: 0 0 40px 0;}
.faqlist li strong { color: #0E96E1; display: inline-block; margin: 0 20px 0 0; }

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

/*スイッチの展開先*/
#sec_faq .tab-pane p { text-align: left;}


/*【アコーディオン】*/
.faq-toggle { background: #fff; border: none; border-radius: 10px; font-size: 1rem; padding: 1rem 60px 1rem 1rem; position: relative; text-align: left; width: 100%; }
/*展開時は下の角丸を取る*/
.faq-toggle:not(.collapsed) { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

.faq-toggle:focus { outline: none; }
.toggle-icon { align-items: center; background-color: #2196f3; border-radius: 50%; display: flex; height: 32px; justify-content: center; position: absolute; right: 0.8rem; top: 0.8rem; width: 32px; }

/*矢印*/
.arrow { border-bottom: 1px solid white; border-right: 1px solid white; height: 8px; margin: 0 0 3px 0; transform: rotate(45deg); transform-origin: center center; transition: transform 0.2s ease; width: 8px; }

/*展開時に矢印を上向きに*/
.faq-toggle:not(.collapsed) .arrow {margin: 5px 0 0 0; transform: rotate(-135deg); transform-origin: center center; }

/*展開先の枠*/
.collapse { background: #fff; border-radius: 0 0 10px 10px; padding: 1rem 60px 1rem 1rem; }
/* collapseアニメーション中も背景を白く */
.collapsing { background: #fff; border-radius: 0 0 10px 10px; padding:1rem 60px 1rem 1rem; 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; gap: 0;}
.faq-question strong { flex-shrink: 0; color: #0E96E1; display: inline-block; margin: 0; font-weight: bold;}
.faq-question p { color: #000;  margin: 0;}

.faq-answer { display: flex; align-items: flex-start; gap: 0;}
.faq-answer strong { flex-shrink: 0; color: #0E96E1; display: inline-block; margin: 0; font-weight: bold;}
.faq-answer p { color: #000;  margin: 0;}





/*=====================================================================
【下層】company.html
=======================================================================*/

#sec_company { padding: 50px 0 90px 0;}
#sec_company h1 { font-size: 2.56rem; font-family: "Zen Maru Gothic"; font-weight: 700; line-height: 1; margin: 0 0 50px 0; text-align: center;}

@media (max-width: 1000px) {
#sec_company h1 { font-size: 1.56rem; font-weight: 700; line-height: 1; margin: 20px 0 50px 0;}
}

@media (max-width: 900px) {
#sec_company { padding: 60px 0 30px 0;}
#sec_company h1 { font-size: 1.56rem; font-weight: 700; line-height: 1; margin: 20px 0 50px 0;}
}

@media (max-width: 320px) {
#sec_company h1 { font-size: 1.4rem; font-weight: 700; line-height: 1; margin: 20px 0 30px 0;}
}

.company_box { border: solid 1px #1f99c6; width: 100%; }

#tokushoho { padding: 0; }

table tr.company-line { border-bottom: dotted 1px #1f99c6; }
th.company_table-l { border-right: solid 1px #1f99c6; font-size: 20px; padding: 30px 50px; text-align: left; vertical-align: top; width: 30%; }





/*=====================================================================
【下層】privacy.html
=======================================================================*/

#sec_privacy { padding: 70px 0 90px 0;}
#sec_privacy h1 { font-size: 2.56rem; font-family: "Zen Maru Gothic"; font-weight: 700; margin: 0 0 50px 0; text-align: center;}

@media (max-width: 900px) {
#sec_privacy { padding: 60px 0 10px 0;}
#sec_privacy h1 { font-size: 1.56rem; font-weight: 700; line-height: 1; margin: 20px 0 50px 0;}
}
@media (max-width: 320px) {
#sec_privacy h1 { font-size: 1.4rem; font-weight: 700; line-height: 1; margin: 20px 0 30px 0;}
}

/*=====================================================================
【下層】contact
=======================================================================*/

#sec_contact { padding: 70px 0 0 0;}
#sec_contact h1 { font-size: 41px; font-family: "Zen Maru Gothic"; font-weight: 700; margin: 0 0 50px 0; text-align: center;}

@media (max-width: 900px) {
#sec_contact { padding: 60px 0 0 0;}
#sec_contact h1 { font-size: 1.56rem; font-weight: 700; line-height: 1; margin: 20px 0 30px 0;}
}
@media (max-width: 320px) {
#sec_contact h1 { font-size: 1.4rem; font-weight: 700; line-height: 1; margin: 20px 0 30px 0;}
}



/*=====================================================================
【Footer】
=======================================================================*/

#footer {}

#footer h1 { display: flex; align-items: center; justify-content: center; margin: revert;}
#footer h1 img {  max-height: 80px; max-width: 200px; 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: 0; padding: 13px 0 13px 0; text-align: center;}

@media (max-width: 1000px) {
#footer p { background: #000; color: #fff; font-size: 1rem; margin: 0; padding: 13px 0 80px 0; text-align: center;}
}

@media (max-width: 990px) {
#footer ul li { font-size: 0.9rem; font-weight: 500; margin: 0 10px 0 0; padding: 0 10px 0 0;}
#footer ul li:last-child { margin: 0px; padding: 0;}
#footer p { font-size: 1rem; line-height: 1; }
}

@media (max-width: 767px) {
#footer h1 { margin: 40px 0 0 0;}
#footer ul li { font-size: 0.9rem; font-weight: 500; margin: 0 10px 0 0; padding: 0 10px 0 0;}
#footer ul li:last-child { margin: 0px; padding: 0;}
#footer p { font-size: 0.7rem; line-height: 1; }
}


@media (max-width: 450px) {
#footer h1 { margin: 40px 0 0 0;}
#footer ul { flex-direction: column; margin: 30px 0 40px 0;}
#footer ul li { border-right: none; margin: 0 0 10px 0; padding: 0;} 
}