@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');



body {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif  !important;
}

body.hhog .in-container {font-family: "Noto Sans JP", sans-serif;}

body.hhog section {
width: auto;
}

p{font-weight: 400;}

.l-nav-global-mobile{display: none;}

body.hhog .in-container{width: 1200px;}
body.hhog section .l-main{
/*outline: 2px red dashed;*/
}
/*
@media only screen and (max-width: 834px) {
  body.hhog::before {
    content: "835以下";
    display: block;
    background: red;
    color: #fff;
  }
}
*/
 @media only screen and (max-width:834px){
 body.hhog .in-container{width:auto;padding: 0 2rem;}
}/*835*/
 @media only screen and (max-width:640px){
 body.hhog .in-container{width:auto;padding: 0 1.5rem;}
 }/*640*/



figure img{
width: auto;
max-width: 100%;
}

.mod_p{
margin-top: 2rem;
line-height: 1.8;
font-weight: 400;
}

.inline_bk{display: inline-block;}

.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/* ============================================================= */


.font_oswald{font-family: "Oswald", sans-serif!important;}

.fw_l{font-weight: 300 !important;}
.fw_r{font-weight: 400 !important;}
.fw_m{font-weight: 500 !important;}
.fw_sb{font-weight: 600 !important;}
.fw_b{font-weight: 700 !important;}

/* margin */
.mt-8 {  margin-top: -8px !important;}
.mt0 {  margin-top: 0 !important;}
.mt1 {  margin-top: 8px !important;}
.mt2 {  margin-top: 16px !important;}
.mt3 {  margin-top: 24px !important;}
.mt4 {  margin-top: 32px !important;}
.mt5 {  margin-top: 40px !important;}
.mt6 {  margin-top: 48px !important;}
.mt7 {  margin-top: 56px !important;}
.mt8 {  margin-top: 64px !important;}
.mt9 {  margin-top: 72px !important;}
.mt10 {  margin-top: 80px !important;}

.mb0 {  margin-bottom: 0 !important;}
.mb1 {  margin-bottom: 8px !important;}
.mb2 {  margin-bottom: 16px !important;}
.mb3 {  margin-bottom: 24px !important;}
.mb4 {  margin-bottom: 32px !important;}
.mb5 {  margin-bottom: 40px !important;}
.mb6 {  margin-bottom: 48px !important;}
.mb7 {  margin-bottom: 56px !important;}
.mb8 {  margin-bottom: 64px !important;}
.mb9 {  margin-bottom: 72px !important;}
.mb10 {  margin-bottom: 80px !important;}

/* padding */
.pt0 {  padding-top: 0 !important;}

.pb0 {  padding-bottom: 0 !important;}


.mod_l{text-align: left !important;}
.mod_c{text-align: center !important;}
.mod_r{text-align: right !important;}

/* bg-top　 
======================================================*/

body.hhog section.top_bg{
background-image: url("/product/img/hhog/index_2/img_02.jpg");
background-repeat: no-repeat;
background-size:100%;
background-position:center top;
padding-bottom: 6rem;
}

body.hhog section.top_bg .in-container{
background-image: url("/product/img/hhog/index_2/img_01.png");
background-repeat: no-repeat;
background-size:50%;
background-position:right top;
}

body.hhog section.top_bg h1 {
font-size: 18rem;
}
body.hhog section.top_bg .sub_title_en{
font-size: 5rem;
background: #fff;
display: inline-block;
padding: 5px 10px;
line-height: 1.3;
}
body.hhog section.top_bg .sub_title_ja{
font-size: 3rem;
background: #fff;
display: inline-block;
padding: 5px 10px;
line-height: 1.3;
margin-top: 2rem;
}


body.hhog section.top_bg .box_2col{
/*outline: 2px dashed red;*/
display: flex;
justify-content: space-between;
gap: 55px;
align-items: flex-start; /*画像の間延び禁止*/
align-items: flex-end;
}

/* box_left */
body.hhog section.top_bg .box_left{
/*outline: 2px dashed red;*/
width:calc((100% - 55px) / 2);
margin-top: 2rem;
position: relative;
padding-top: 5rem;
 background: url("/product/img/hhog/index_2/bg_shape_frames.svg") no-repeat right top;}

body.hhog section.top_bg .box_left figure {
width: 89.47%;
}

/* box_right */
body.hhog section.top_bg .box_right{
/*outline: 2px dashed red;*/
width:calc((100% - 55px) / 2);
background: rgba(255,255,255,.8);
padding: 2rem;
}

body.hhog section.top_bg .box_right .mod_h4{
font-size: 1.6rem;
font-weight: 700;
border-bottom:1px solid #000;
padding-bottom: 5px;
text-align: left;
}

body.hhog section.top_bg .box_right ul.list_catalog{
display: flex;
justify-content: space-between;
gap: 25px;
margin-top: 1rem;
align-items: flex-start; /*画像の間延び禁止*/
}
body.hhog section.top_bg .box_right ul.list_catalog li a:hover{
opacity: .7;
}

body.hhog section.top_bg .box_right figure img {
outline:1px solid #aaa;
}

body.hhog section.top_bg .box_right ul.list_catalog .ico_DL{
text-align: right;
}




 @media only screen and (max-width:834px){

body.hhog section.top_bg{
background-size:120%;
background-color: rgb(243, 251, 255);
padding-bottom:4rem;

}

body.hhog section.top_bg .in-container{
background-position:right 10px top;
background-size:55%;
}

 
 body.hhog section.top_bg h1 {
font-size:clamp(80px, calc(22.798vw + -66.135px), 124px);
}

body.hhog section.top_bg .sub_title_en{
font-size: clamp(20px, calc(6.218vw + -19.855px), 32px);
}

body.hhog section.top_bg .sub_title_ja{
font-size: clamp(18px, calc(6.218vw + -21.855px), 30px);
margin-top: 2.398vw;
}

body.hhog section.top_bg .box_2col{
display: block;
}

/* box_left */
body.hhog section.top_bg .box_left{
width:57%;
margin-top:2.398vw;
padding-top:5.995vw;
background-size: auto 90%;
}

/* box_right */
body.hhog section.top_bg .box_right{
width:70%;
padding:2.395vw;
margin:3rem auto 0;
box-shadow: 0 3px 6px rgba(0,0,0,.05);
}
 
}/*835*/



 @media only screen and (max-width:640px){
 
body.hhog section.top_bg h1 {
font-size:18.667vw;
}

body.hhog section.top_bg .sub_title_en{
font-size:5.333vw;
}

body.hhog section.top_bg .sub_title_ja{
font-size:3.733vw;
margin-top: 2.398vw;
}

/* box_right */
body.hhog section.top_bg .box_right{
width:95%;
}

body.hhog section.top_bg .box_right .mod_h4{
font-size:4.267vw;
padding-bottom:1.333vw;
}
 
 
 
}/*640*/




/* 水素とは　 
======================================================*/


body.hhog section.about_hhog {
height: auto;
padding-top: 3rem;
}

body.hhog section.about_hhog.bg_01{
/*outline: 2px dotted red;*/
background-image: url("/product/img/hhog/index_2/img_10.jpg");
background-repeat: no-repeat;
background-size:100%;
background-position:center bottom 200px;
}

body.hhog section.about_hhog.bg_01 .bg_02{
background-image: url("/product/img/hhog/index_2/img_22.png");
background-repeat: no-repeat;
background-size:70%;
background-position:right top 500px;
}

body.hhog section.about_hhog.bg_01 .bg_03{
background-image: url("/product/img/hhog/index_2/img_27.png"), url("/product/img/hhog/index_2/img_26.png");
background-repeat: no-repeat,no-repeat;
background-size:272px auto,368px auto;
background-position:left top 50px,right top 0px;
}

body.hhog section.about_hhog .l-main{
padding: 10rem 0;
}

body.hhog section.about_hhog .mod_h2{
font-size: 4.4rem;
text-align: center;
font-weight: 700;
}
body.hhog section.about_hhog .mod_h2_sub{
font-size: 2.4rem;
text-align: center;
font-weight: 700;
margin-top: 2rem;
}
body.hhog section.about_hhog .lead_txt{
font-size: 2rem;
text-align: center;
font-weight: 400;
line-height: 2;
margin-top: 1.5rem;
}


body.hhog section.about_hhog .mod_h3 {
font-size: 3.2rem;
font-weight: 700;
line-height: 1.4;
color:#339BCA;
position: relative;
text-align: center;
padding-top: 7rem; /* 罫線との距離 */
margin-top: 8rem;
}
body.hhog section.about_hhog .mod_h3::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform:translateX(-50%);
width: 200px;       /* 罫線の長さ */
height: 1px;       /* 罫線の太さ */
background: #000;  /* 色は適宜 */
}
body.hhog section.about_hhog .mod_h3>span{display: block;}
body.hhog section.about_hhog .mod_h3 .f_small {
font-size: 1.6rem;
margin-top: .5em;
color: #707070;
font-weight: 400;
}
.cl_cyan{
color:#339BCA !important;
}

@media only screen and (max-width: 834px) {


body.hhog section.about_hhog.bg_01 .bg_03{
background-size:17% auto,23% auto;
}

body.hhog section.about_hhog .mod_h2{
font-size:clamp(28px, calc(4.145vw + 1.43px), 36px);
}
body.hhog section.about_hhog .mod_h2_sub{
font-size:clamp(18px, calc(2.073vw + 4.715px), 22px);
margin-top:3rem;
}

body.hhog section.about_hhog .lead_txt{
font-size: clamp(16px, calc(1.036vw + 9.358px), 18px);
text-align: left;
}

body.hhog section.about_hhog .mod_h3 {
font-size:clamp(22px, calc(3.109vw + 2.073px), 28px);
padding-top:6.707vw; /* 罫線との距離 */
margin-top:7.425vw;
}

body.hhog section.about_hhog .mod_h3>span{display: block;}
body.hhog section.about_hhog .mod_h3 .f_small {
font-size:4.267vw;
}


}/*835*/


@media only screen and (max-width: 640px) {

body.hhog section.about_hhog .l-main{
padding: 9.333vw 0;
}
body.hhog section.about_hhog.bg_01 .bg_03{
background-size:23% auto,30% auto;
}


body.hhog section.about_hhog .mod_h2{
font-size:6.933vw;
}
body.hhog section.about_hhog .mod_h2_sub{
font-size:4.8vw;
margin-top:8vw;
}

body.hhog section.about_hhog .lead_txt{
font-size:4.267vw;
}

body.hhog section.about_hhog .mod_h3 {
font-size:5.867vw;
padding-top:10vw; /* 罫線との距離 */
margin-top:10vw;
}




}/*640*/




/* box_hhog ================ */
body.hhog section.about_hhog .box_hhog {
/*outline: 2px dashed red;*/
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 6rem;
}
body.hhog section.about_hhog .box_hhog div{
/*outline: 1px dashed blue;*/
width:100%;
}
body.hhog section.about_hhog .box_hhog .mod_h4{
font-size:2.4rem;
font-weight: 700;
}
body.hhog section.about_hhog .box_hhog .mod_h5{
font-size:2rem;
line-height: 1.4;
color:#1F90BA;
font-weight: 700;
margin-top:1.5em;
}

body.hhog section.about_hhog .box_hhog .txt ul{
/*outline: 1px dashed blue;*/
margin-top: 1em;
list-style: disc;
margin-left: 1em;
color:#78C0CF;
}
body.hhog section.about_hhog .box_hhog .txt ul li p{
color: #000;
line-height: 1.8;
}


@media only screen and (max-width: 834px) {

body.hhog section.about_hhog .box_hhog {
grid-template-columns: 1fr; /* SP：1列に変更（上下に並ぶ） */
gap: 60px;
margin-top: 6rem;
}

body.hhog section.about_hhog .item1{
order:2;
}

body.hhog section.about_hhog .item2{
order:1;
}
body.hhog section.about_hhog .box_hhog div.info_g{
width:65%;
min-width:80%;
/*outline: 2px dashed red;*/
margin-left: auto;
margin-right: auto;
}

body.hhog section.about_hhog .box_hhog div.txt{
/*outline: 2px dashed blue;*/
}

}/*835*/


@media only screen and (max-width: 640px) {

body.hhog section.about_hhog .box_hhog .mod_h4{
font-size:5.6vw;
}
body.hhog section.about_hhog .box_hhog .mod_h5{
font-size:5.333vw;
}
body.hhog section.about_hhog .box_hhog div.info_g{
width:90%;
min-width:auto;
}





}/*640*/

/* box_hhog_2 =========== */
body.hhog section.about_hhog .box_hhog_2 {
/*outline: 2px dashed red;*/
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-top: 6rem;
border-left:1px dashed #000;
}
body.hhog section.about_hhog .box_hhog_2>*{
/*outline: 1px dashed blue;*/
width:100%;
text-align: center;
padding: .5rem 4rem;
border-right:1px dashed #000;
}

body.hhog section.about_hhog .box_hhog_2 .mod_h4{
font-size: 2.4rem;
font-weight: 700;
color: #1F90BA;
}
body.hhog section.about_hhog .box_hhog_2 p{
margin-top:2rem;
line-height: 1.8;
font-weight: 500;
}

body.hhog section.about_hhog .box_hhog_2 figure{
width: 20rem;
margin: 3rem auto 0;
}

@media only screen and (max-width: 834px) {
body.hhog section.about_hhog .box_hhog_2 .mod_h4{
font-size: 2rem;
color: #1F90BA;
}

body.hhog section.about_hhog .box_hhog_2 figure{
width:75%;
}


}/*835*/


@media only screen and (max-width: 640px) {

body.hhog section.about_hhog .box_hhog_2 {
display: grid;
grid-template-columns: 1fr; /* SP：1列に変更（上下に並ぶ） */
margin-top: 16vw;
border-left:none;
border-top:1px dashed #000;
}

body.hhog section.about_hhog .box_hhog_2>*{
width:100%;
text-align: center;
padding: .5rem 5.333vw 8vw;
border-right:none;
border-bottom:1px dashed #000;
}

body.hhog section.about_hhog .box_hhog_2 .mod_h4{
font-size:5.333vw;
}

body.hhog section.about_hhog .box_hhog_2 figure{
width:50%;
}

}/*640*/








/* ラインナップ　アコーディオン 
======================================================*/

.section-title-h2 {
  display: flex;
  align-items: center;
  gap: 1rem; /* 見出しと線の間隔 */
	margin-bottom: 3rem;
}
.section-title-h2 h2 {
  font-weight: bold;
  white-space: nowrap; /* 折り返し防止 */
  margin: 0;
  font-size: 3rem;
}
.section-title-h2 hr {
  flex: 1;
  border: none;
  border-top: 1px solid #000; /* 線の色・太さ */
  margin: 0;
}


.accordion {
  border-top: 1px solid #ddd;
}

.accordion-item {
 border-bottom: 1px solid #ddd;
}

.accordion-header {
  width: 100%;
  padding:1.2rem 1.8rem 1.2rem 1.2rem;
	font-weight: 500;
  /*background: none;*/
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:2.6rem;
  cursor: pointer;
	background-image:linear-gradient(to right,#03ABE1,#65CBEC);
	color: #FFFFFF;
}

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  padding: 0 3rem; /* 横だけ固定 */
}

.accordion-inner {
  padding: 3rem 0; /* 開いた時の上下余白は中側に持つ */
}

.accordion-header[aria-expanded="true"] .accordion-icon {
  transform: rotate(0deg); /* ＋ → - */
	transition:all .2s;
}


@media only screen and (max-width: 834px) {

.section-title-h2 h2 {
  font-weight: bold;
  white-space: nowrap; /* 折り返し防止 */
  margin: 0;
  font-size:clamp(22px, calc(3.109vw + 2.073px), 28px);
}

.accordion-header {
  padding:1rem;
  font-size:clamp(18px, calc(3.109vw + -1.927px), 24px);
}

 body.hhog .l-page .l-container .l-main {
    padding-left:0;
    padding-right:0;
  }
}/*835*/


@media only screen and (max-width: 640px) {

.section-title-h2 h2 {
  font-size:5.867vw;
}
.accordion-header {
  padding:1rem;
  font-size:4.8vw;
}



}/*640*/


/**/

body.hhog .accordion .col_2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
body.hhog .accordion .col_2 li{
/*outline: 1px dashed blue;*/
width:100%;
text-align: center;
}

body.hhog .accordion .col_3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* タブレット〜スマホ */
@media (max-width: 845px) {
  body.hhog .accordion .col_3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマホ小 */
@media (max-width: 550px) {
  body.hhog .accordion .col_3 {
    grid-template-columns: 1fr;
  }
}


/**/
body.hhog .accordion table.spec{
width: 100%;
margin-top: 3rem;
border-top:1px solid #999;
}

body.hhog .accordion .spec th,
body.hhog .accordion .spec td{
padding: 10px;
border-bottom:1px solid #999;
border-right:1px solid #999;
text-align: center;
font-weight: 400;
}
body.hhog .accordion .spec th:last-child,
body.hhog .accordion .spec td:last-child{
border-right:none;
}

/* すべての縦見出しthに背景色を設定 */
body.hhog .accordion .spec th[scope="col"] {
  background-color:#B2E5F6;
  font-weight: 700;
  text-align: center;
}
body.hhog .accordion .spec th[scope="row"] {
  background-color: #EDF9FD;
  font-weight: 400;
  text-align: center;
	width: 50%;
}



/* 「+」↔「ー」
============================*/
.accordion-icon {
  position: relative;
  width: 24px;   /* 適宜調整 */
  height: 24px;
  display: inline-block;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;   /* 線の長さ */
  height: 2px;   /* 線の太さ */
  background: #fff; /* 線の色（ヘッダーが青なので白で想定） */
  transform-origin: center;
  transition: transform 0.2s ease;
}

/* 横線 */
.accordion-icon::before {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* 縦線（回転で消す対象） */
.accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いている状態：縦線だけ 90°回転 → 横線に重なり「ー」になる */
.accordion-header[aria-expanded="true"] .accordion-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}



/* 導入マップ　　背景

======================================================*/

body.hhog .national_map .bg{
padding: 8rem 0;
background-image: linear-gradient(to bottom,rgba(200,218,225,.38),rgba(200,218,225,.0) 20%),url("/product/img/hhog/index_2/img_19.jpg");
background-repeat: no-repeat,no-repeat;
background-size:auto,contain;
background-position:left top,right bottom;
}
.map_list_sp{display: none;}

body.hhog .national_map .legend{
margin-top: 1rem;
vertical-align: middle;
}
body.hhog .national_map .legend .inline_bk>span{
margin-right: .2em;
font-size: 2.2rem;
vertical-align: -3px;
}
body.hhog .national_map .legend .color_10{color:#83cbeb;}
body.hhog .national_map .legend .color_20{color:#3386C5;}
body.hhog .national_map .legend .color_80{color:#163e64;}



@media only screen and (max-width: 834px) {

.map_list_sp{
padding: 0 2rem;
display: block;
}
.map_list_sp ul{
/*outline: 2px dotted blue;*/
margin-top: 4rem;
}
.map_list_sp ul>li{
/*outline: 2px dotted red;*/
margin-top: 4rem;
padding-bottom: 4rem;
border-bottom: 1px solid #ccc;
}

.map_list_sp ul>li .map_h3{
/*outline: 1px dotted red;*/
display: grid;
grid-template-columns: 30px 1fr;　/*　左：80px固定　右：残り全部　*/
align-items: center;
gap: 15px;
}

.map_list_sp ul>li .map_h3 .list_NO{
background:#0081CC;
width:3rem;
height:3rem;
color: #fff;
border-radius: 50%;
text-align: center;
font-weight: 700;
padding-top: 2px;
}
.map_list_sp ul>li:nth-child(1) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(5) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(6) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(7) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(12) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(14) .map_h3 .list_NO{
background:#163e64 !important;
}
.map_list_sp ul>li:nth-child(8) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(10) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(13) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(15) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(16) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(17) .map_h3 .list_NO,
.map_list_sp ul>li:nth-child(18) .map_h3 .list_NO{
background:#83cbeb !important;
}


.map_list_sp ul>li .map_h3 .title{
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1rem;
}
.map_list_sp ul>li .map_h3 .sikaku{
color: #8ad2e8;
}

.map_list_sp ul>li figure{
margin-top: 3rem;
text-align: center;
}

}/*835*/










/* 導入マップ  map　部分のみ

======================================================*/
 @media only screen and (min-width:834px){

:root{
  --pin-size: 56px;
  --pin-hit: 72px;         /* 当たり判定だけ少し広げる */
  --line-thickness: 1.5px;
  --line-color: rgba(0,0,0,.99);

  --pin-bg: #3386C5;
  --pin-fg: #fff;

  --modal-max-w: 800px;
  --modal-max-h: 600px;

  --modal-pad: 24px 50px;
}

*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; color:#111; }
.page{ padding: 24px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* MAP */
.map__stage{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.map__img{
  width: 100%;
  height: auto;
  display: block;
}
.map__pins{
  position:absolute;
  inset:0;
  pointer-events: none; /* ピンだけクリックできるようにする */
}

/* pin wrapper (absolute position by %) */
.pinWrap{
  position: absolute;
  left: var(--x);
  top: var(--y);

  /* ●の実サイズ（縮小込み）をwrapのサイズにする */
  width: calc(var(--pin-size) * var(--s, 1));
  height: calc(var(--pin-size) * var(--s, 1));

  pointer-events: none;
}

/* clickable pin */
/*
.pin{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: calc(var(--pin-size) * var(--s, 1));
  height: calc(var(--pin-size) * var(--s, 1));
  border-radius: 999px;
  border: 0;
  background: var(--pin-bg);
  color: var(--pin-fg);
  font-weight: 500;
  font-size: calc(26px * var(--s, 1));
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
*/
.pin{
  position: absolute;
  left: 0;
  top: 0;
	background: var(--pin-bg);
	color: var(--pin-fg);
  width: 100%;
  height: 100%;
  border-radius: 999px;
border-color: transparent !important;
  font-size: calc(26px * var(--s, 1));
  pointer-events: auto;
}
.pin::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pin-hit) * var(--s, 1));
  height: calc(var(--pin-hit) * var(--s, 1));
  transform: translate(-50%, -50%);
  background: transparent;
}

.pin:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}

#pinsLayer .pinWrap:nth-child(1) .pin,
#pinsLayer .pinWrap:nth-child(5) .pin,
#pinsLayer .pinWrap:nth-child(6) .pin,
#pinsLayer .pinWrap:nth-child(7) .pin,
#pinsLayer .pinWrap:nth-child(12) .pin,
#pinsLayer .pinWrap:nth-child(14) .pin{
  background:#163e64 !important;
}
#pinsLayer .pinWrap:nth-child(8) .pin,
#pinsLayer .pinWrap:nth-child(10) .pin,
#pinsLayer .pinWrap:nth-child(13) .pin,
#pinsLayer .pinWrap:nth-child(15) .pin,
#pinsLayer .pinWrap:nth-child(16) .pin,
#pinsLayer .pinWrap:nth-child(17) .pin,
#pinsLayer .pinWrap:nth-child(18) .pin{
  background:#83cbeb !important;
}

.line{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;

  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  pointer-events:none;
}

.seg{
  position:absolute;
  left:0;
  top:0;
  background: var(--line-color);
}
.seg.h{
  height: var(--line-thickness);
}
.seg.v{
  width: var(--line-thickness);
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 50;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(50,83,116,.4);
}

.modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(var(--modal-max-w), calc(100vw - 48px));
  max-height: min(var(--modal-max-h), calc(100vh - 48px));
  background: #fff;
  border-radius: 0; /* 添付の雰囲気に合わせて角は控えめ */
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: var(--modal-pad);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
}

.modal__close{
  position:absolute;
  right: 16px;
  top: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  background:#fff;
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
}
.modal__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 50px;
  line-height: 1;
	font-weight: 300;
  color: #2b7bbb;
}
.modal__nav--prev{ left: 10px; }
.modal__nav--next{ right: 10px; }

.modal__header{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
}
.modal__badge{
  grid-row: 1 / span 2;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #2b7bbb;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight: 700;
  font-size: 14px;
}

.modal__panel[data-id="1"] .modal__badge,
.modal__panel[data-id="5"] .modal__badge,
.modal__panel[data-id="6"] .modal__badge,
.modal__panel[data-id="7"] .modal__badge,
.modal__panel[data-id="12"] .modal__badge,
.modal__panel[data-id="14"] .modal__badge{
  background:#163e64 !important;
}
.modal__panel[data-id="8"] .modal__badge,
.modal__panel[data-id="10"] .modal__badge,
.modal__panel[data-id="13"] .modal__badge,
.modal__panel[data-id="15"] .modal__badge,
.modal__panel[data-id="16"] .modal__badge,
.modal__panel[data-id="17"] .modal__badge,
.modal__panel[data-id="18"] .modal__badge{
  background:#83cbeb !important;
}



.modal__title{
  margin:0;
  font-size: 18px;
  font-weight: 700;
	margin-right: 10px;
}
.modal__meta{
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 1.5rem;
  color: #333;
}
.metaItem{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.metaSwatch{
  width: 10px;
  height: 10px;
  background:#8ad2e8;
}

/* body only scroll */
.modal__body{
  overflow: auto;
  padding-right: 8px; /* スクロールバー分 */
}
.modal__desc{
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color:#222;
}
.modal__figure{
  margin:0;
	border: none !important;
	outline: none !important;
}
.modal__img{
  width: 100%;
  height: 320px;          /* 縦固定（必要ならここ調整） */
  object-fit: contain;      /* トリミングOK */
  display:block;
}

}/*min835*/

/* PCのみ */
@media only screen and (min-width: 834px){
  .map__spNote{ display:none; }
	.map_sp{display:none;}
}/*min835*/
@media only screen and (max-width: 834px){
  .map{ display:none; }
  .map__spNote{ display:block; text-align:center; color:#666; }
	.map_sp{display:block;}
}













/* よくある質問  faq
======================================================*/


body.hhog section.faq{
/*outline: 2px dotted red;*/
background-image: url("/product/img/hhog/index_2/img_15.png"),url("/product/img/hhog/index_2/img_14.png");
background-repeat: no-repeat,no-repeat;
background-size: contain,contain;
background-position: center top, center bottom;
height: auto;
padding-top: 8rem;
margin-bottom: 10rem;
}


body.hhog section.faq .in-container{
padding-bottom: 4rem;
}

body.hhog section.faq .box_h2{
/*outline: 1px dashed red;*/
height: 188px;

display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
 /*align-items: flex-start;   画像の間延び禁止*/
align-items: center;
}

body.hhog section.faq .box_h2 figure{
/*outline:1px dashed #2837FF;*/
height: 100%;
}
body.hhog section.faq .box_h2 figure img{
height: 100%;
}

body.hhog section.faq .box_h2 figure.character_1{
height: 85%;
}

/*
body.hhog section.faq .box_h2 figure.character_1{
height: auto;
}
body.hhog section.faq .box_h2 figure.character_2{
height: auto;
}
*/

body.hhog section.faq .mod_h2{
font-size:3.4rem;
font-weight: 700;
text-align: center;
color: #0068B7;
position: relative;
}
body.hhog section.faq .mod_h2::after {
content: "";
position: absolute;
bottom: -2rem;
left: 50%;
transform:translateX(-50%);
width: 70px;       /* 罫線の長さ */
height: 1px;       /* 罫線の太さ */
background: #0068B7;  /* 色は適宜 */
}

body.hhog section.faq ul.list_faq{
/*outline: 1px dashed red;*/
background: url("/product/img/hhog/index_2/img_18_2.png") no-repeat right bottom;
background-size:93px;
padding-bottom: 4rem;
}
body.hhog section.faq ul.list_faq>li{
margin-top: 4rem;}

/* question */
body.hhog section.faq ul.list_faq>li .question{
display: flex;
gap:1rem;
align-items: center;
}
body.hhog section.faq ul.list_faq>li .question .ico_q{
width: 50px;
height: 62px;
display: inline-block;
background:url(/product/img/hhog/index_2/ico_q.svg) no-repeat center center;
background-size: 47px 62px;
text-align: center;
color: #fff;
padding-top: 1rem;
font-size: 30px;
margin-right: 1rem;
}
body.hhog section.faq ul.list_faq>li .question .txt_q{
font-size:2rem;
font-weight: 700;
width: calc(100% - 57px);
}

/* answer */
body.hhog section.faq ul.list_faq>li .answer{
/*outline: 1px dashed #2309FF;*/
display: flex;
gap:1rem;
margin-top: 2rem;
}

body.hhog section.faq ul.list_faq>li .answer .ico_a{
font-size: 24px;
width: 50px;
text-align: center;
border-right:1px solid #0068B7;
margin-right: 1rem;

}
body.hhog section.faq ul.list_faq>li .answer .txt_a{
font-weight: 400;
width: calc(100% - 60px);

}
body.hhog section.faq .link_next{
text-align: center;
margin-top: 2rem;
}
body.hhog section.faq .link_next a{
border: 1px solid #0068B7;
width: 300px;
display: block;
padding: 1rem;
margin: 0 auto;
border-radius: 5px;
text-decoration: none;
font-weight: 700;
}
body.hhog section.faq .link_next a:hover{
outline: 1px solid #0068B7;
transition:none;
}


@media only screen and (max-width:834px) {

body.hhog section.faq{margin-top: 6rem;}

body.hhog section.faq .box_h2{
height: 145px;
}


body.hhog section.faq .mod_h2{
font-size:clamp(24px, calc(3.109vw + 4.073px), 30px);
}



}/*835*/

@media only screen and (max-width:640px) {

body.hhog section.faq .box_h2{
height: 100px;
gap: 0;
}
body.hhog section.faq .mod_h2{
font-size:6.4vw;
}



.faq_h2{
font-size:6.4vw;
padding-top:6rem;
padding-bottom:2rem;
}
.faq_h2.chara2{
background-size:20%;
}
.faq_h2.chara3{
background-size:15%;
}


body.hhog section.faq ul.list_faq{
/*outline: 1px dashed red;*/
background: url("/product/img/hhog/index_2/img_18.png") no-repeat right bottom;
background-size:60px;
padding-bottom: 10rem;
}






}/*480*/



 @media only screen and (max-width:640px) {
 
body.hhog section.faq ul.list_faq>li .question .ico_q{
background-size:40px;
font-size: 24px;
padding-top: 1.7rem;
}
}/*480*/





/* floating_banner 
==========================================*/
.floating_banner{
/*outline: 2px dashed red;*/
position: fixed;
bottom:250px;
right:10px;
}

.floating_banner .drop_banner a,
.floating_banner .catalog_banner a{
display: block;
border:2px solid #0068B7;
background:#ECF7FF;
border-radius: 50% 0 50% 50%;
margin-right: 0;
margin-left: auto;
position: relative;
box-shadow: 1px 3px 0 rgba(0,0,0,.15);
}

.floating_banner .drop_banner a:hover,
.floating_banner .catalog_banner a:hover{
background: #fff;
}

.floating_banner > div a{
width: 90px;
height:90px;
}

.floating_banner .drop_banner a figure{
width: 70%;
 position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.floating_banner .catalog_banner a{
margin-top: 10px;
text-decoration: none !important;
}

.floating_banner .catalog_banner a figure{
width:40px;
margin-left: auto;
margin-right: auto;
margin-top:12px;
}

.floating_banner .catalog_banner a p{
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
margin-top: 3px;
width: 100%;
text-align: center;
color: #000;
}

@media only screen and (max-width:834px) {
.floating_banner{
bottom:80px;
}

}/*835*/


@media only screen and (max-width:640px) {
.floating_banner > div a{
width: 80px;
height:80px;
}


.floating_banner .catalog_banner a figure{
width:35px;
margin-top: 10px;
}


}/*640*/

.mark {
  font-size: 0.3em;
  display: inline-block;
  transform: translateY(-1.8em);
}