/*
Theme Name: 八仙閣コーポレート2025*/



/**ウェブフォント**/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Shippori+Mincho:wght@400;600&display=swap');



@font-face {
  font-family: "octbre";
src: url('/cmsmin/wp-content/themes/hassenkaku2025/fonts/Octobre-Thin.otf') format("opentype");
font-display: swap;
   font-weight: normal;
    font-style: normal;
}



.shippori {
  font-family: "Shippori Mincho", serif;
  font-style: normal;
}

.noto {
  font-optical-sizing: auto;
}

.zenkaku{
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}


.octbre{
  font-family: "octbre";}




/*トップのスライダー*/
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(3%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

.slider-img-main.fade-up {
  animation: fadeUp 0.4s ease-out forwards;
}

.top-view-slider3 .slider-img.add-animation {
  animation: zoomUp 8.8s linear 0s normal both;
}
.top-view-slider3 .swiper>.swiper-wrapper>.swiper-slide>.slider-img {
    transform: scale(1.1);
}

.top-view-slider3 .swiper-slide{
  overflow: hidden;
}

.page-head-wrap.page-head-wrap2 .cotainer {
    display: block;
}

.page-head-wrap.page-head-wrap2 .container {
    display: block;
}

.wmax {
    width: 100%;
}

.hmax {
    height: 100%;
}
.page-head-wrap .header-view-swiper img {
    position: relative;
}

.page-head-container {
    position: relative;
}

.page-head-container2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

[name="selected_course"] ,
[name="selected_child_course"]
{
    display: none;
}

.custom-nk-confirm .wpcf7-response-output{
    display: none;
}

.top-view-slider2{
    height: 100%;
}


.top-view-slider2 .swiper-slide .slider-img {
    width: 100%;
    height: 102.1%;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
    transition-delay: 0.8s;
}
.top-view-slider2 .swiper-slide.swiper-slide-active .slider-img{
    transform: translate(0, -2%);
    transition-delay: 0s;
}

@keyframes topSwiperFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.top-view-slider2 .slider-img.first-animation {
  animation: topSwiperFadeIn 1s ease-out forwards;
}

.top-view-slider-link-wrapper {
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.4) translateY(20%);
}

.top-view-slider-link-wrapper.swin-fadein{
animation: fadeIn 1.8s ease 0s 1 normal both;
}


/**以下追加分**/




/**IEスクロールバー対策**/
@-ms-viewport
{
    width: auto;
    initial-scale: 1;
}
@viewport
{
    width: device-width;
    initial-scale: 1;
}


/**リセットスタイル**/

html{scroll-padding-top: 120px;}


body{word-wrap: break-word;
box-sizing:border-box;
    font-family: "Hiragino Sans", "ＭＳ Ｐゴシック",   "MS PGothic", sans-serif!important;
font-weight:400;
}






select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: none transparent;
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
box-sizing:border-box;
   outline: none;}


/**ページネーション**/
.pagination{
   margin:40px 0 0;
display:flex;
justify-content:center;}

.pagination .page-numbers{
   display:inline-block;
   margin-right:0px;
   padding:16px 20px;
   color:white;}
   
   .page-numbers-black .pagination .page-numbers{
   color:#464951;}


.pagination .current{
   padding:16px 20px;
   color:white;}

.pagination .prev,
.pagination .next{
   background:transparent;
   box-shadow:none;
   color:white;}


.pagination a:hover{
color:#464951;
transform:scale(1.12)}

.pagination .dots{
   background:transparent;
   box-shadow:none;}




@media screen and (max-width: 993px){
.pagination .page-numbers{
 padding:12px;
   color:white;}

.pagination .current{
   padding:12px;}
}


/**メインレイアウト**/

@media screen and (min-width: 993px){
.container{padding-left:80px;
padding-right:80px;
width:100%;
max-width:1200px;}}


.base-block{
padding-top:80px;
padding-bottom:80px;
position:relative;
width:100%;
}


.overhidden{
overflow:hidden}


.g-6{
--bs-gutter-y:4.5rem;
--bs-gutter-x:4.5rem}

.gx-7{--bs-gutter-x:6rem}

.slim-box{
margin:auto;
max-width:1150px;}


.vertical-bottom{
   display: flex;
    /*コレ*/align-items: flex-end;}


.box-01{
padding:80px 40px 40px 40px}

.box-02{
padding:40px}



@media screen and (max-width: 993px){
.container{
max-width:2000px;
padding-right:80px;
padding-left:80px}
}


@media screen and (max-width: 768px){
.container{
padding-right:28px;
padding-left:28px}
}


@media screen and (max-width: 400px){
.container{
padding-right:22px;
padding-left:22px}
}


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

.main-contents{
padding-top:0px;
padding-bottom:50px;
position:relative;
align-items: flex-start ;}

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

.main-contents{
padding-top:30px;
padding-bottom:30px;}

}


.top-contents-wrap{
padding:20px 0;}




.container-slim{
max-width:1100px;
margin:auto;}


.flex-height{
display: flex;
    /*コレ*/align-items: stretch;}

.vertical-middle{
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;


align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;}

.vertical-inner{
width:100%}




.vertical-bottom{
  display : -webkit-box;     /* old Android */
  display : -webkit-flex;    /* Safari etc. */
  display : -ms-flexbox;     /* IE10        */
  display : flex;
  -webkit-align-items: flex-end;    /* Safari etc. */
  -ms-align-items    : flex-end;    /* IE10        */
  align-items        : flex-end;
}


/*ブートストラップで5カラム */

.col-15, .col-sm-15, .col-md-15, .col-lg-15 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

.col-60, .col-sm-60, .col-md-60, .col-lg-60 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}


.col-40, .col-sm-40, .col-md-40, .col-lg-40 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}


@media (min-width: 768px) {
.col-sm-15 {
	width: 20%;
	flex: 0 0 20%;
}
.col-sm-60{
	width: 60%;
	flex: 0 0 60%;
}
.col-sm-40{
	width: 40%;
	flex: 0 0 40%;}
}

@media (min-width: 992px) {
.col-md-15 {
	width: 20%;
	flex: 0 0 20%;}

.col-md-60{
	width: 60%;
	flex: 0 0 60%;}

.col-md-40{
	width: 40%;
	flex: 0 0 40%;}
}

@media (min-width: 1200px) {
.col-lg-15 {
	width: 20%;
	flex: 0 0 20%;}

.col-lg-60{
	width: 60%;
	flex: 0 0 60%;}

.col-lg-40{
	width: 40%;
	flex: 0 0 40%;}
}





/**メインヘッダー**/

.header-cart{
width:35px;
display:inline-block;
margin-left:10px}

.header-cart:hover{
  transform: scale(1.2) !important;}

.header-cart svg{
width:100%;
height:auto;}

.header-cart .st0{
fill:white}

.fixed .header-cart .st0{
fill:#464951}

.header-btn-wrap{
transition-duration:0.4s;
position:absolute;
top:18px;
right:132px;}

.fixed .header-btn-wrap{
transform:scale(0.9)}

.header-btn{
display:inline-block;
text-align:center;
background:rgba(25,25,25,0.1);
color:white;
line-height:1.5;
padding:5px 24px 5px 24px;
border:solid 1px white;
font-size:15px
}



.fixed .head-yoyakuselect-box{
border:none;
color:#464951;

background:rgba(255,255,255,1);}

.fixed .header-btn span{
color:#464951;}

.fixed .header-btn span{
font-size:14px}


.fixed .header-btn{
border:none;
background:rgba(255,255,255,1);}


.header-btn span{
color:white;
}

.header-btn:hover{
background:rgba(255,255,255,0.9);}

.fixed .header-btn:hover{
background:rgba(25,25,25,0.9);}

.header-btn:hover span{
color:#464951}

.fixed .header-btn:hover span{
color:white}

.head-yoyakuselect-box select{
line-height:1.4;
padding:6px 10px 5px 10px;
transition-duration:0.2s;
width:100px;
font-size:15px}


.head-yoyakuselect-box select:hover{
background:rgba(255,255,255,0.9);
color:#464951}

.fixed .head-yoyakuselect-box select:hover{
background:rgba(25,25,25,0.9);
color:white}


.head-yoyakuselect-box{
vertical-align:top;
display:inline-block;
box-sizing:border-box;
line-height:1.5;
color:white;

border:solid 1px white;
font-size:1 6px;
  font-family: "Shippori Mincho", serif;
  -webkit-appearance: none;
    appearance: none;
   background:rgba(25,25,25,0.1);}




.tenposelect-box{
transition-duration:0.4s;
position:absolute;
top:25px;
left:180px;}


.tenposelect-box select{

box-sizing:border-box;
color:white;
padding:2px 10px;
padding-right:32px;
font-size:16px;
  font-family: "Shippori Mincho", serif;
  -webkit-appearance: none;
    appearance: none;
    background:rgba(25,25,25,0.2) url("/cmsmin/wp-content/themes/hassenkaku2025/images/icon/yajirushi-bottom.svg");
    background-repeat: no-repeat;
    background-size: 16px auto; /* 画像のサイズ（幅 高さ）*/
    background-position: right 5px center; /* 画像の位置 */}

.fixed .tenposelect-box{
top:20px;
left:160px}

.tenposelect-box select.open {
  color: black;
  background-color: #fff;
}


.fixed .tenposelect-box select{
border:solid 1px gray;
font-size:15px;
color: #1F1520;
background:rgba(25,25,25,0.0) url("/cmsmin/wp-content/themes/hassenkaku2025/images/icon/yajirushi-bottom-b.svg");
    background-repeat: no-repeat;
    background-size: 16px auto; /* 画像のサイズ（幅 高さ）*/
    background-position: right 12px center; /* 画像の位置 */
border:none!important
}



.head-logo{
display:block;
width:30%;
max-width:140px;
height:auto;
aspect-ratio:16/9;
z-index:99;
padding:10px;
position:absolute;
padding:0;
z-index:99}

.head-logo-red{
visibility:hidden;}





.main-header .head-logo-full{
width:100%;
height:100%;
object-fit:contain;
transition-duration:1s;
position:absolute;
top:0;
left:0;}

.main-header .head-logo-full .st0,.main-header .head-logo-full .st1,.main-header .head-logo-full .st2{
fill:white}


.fixed .head-logo{
width:140px;
top:0px}

.fixed .head-logo{
width:120px;
top:4px}

.fixed .head-logo-full .st0,.fixed .head-logo-full .st1{
fill:  #1F1520;
transition-duration:1s}

.fixed .head-logo-full .st2{
fill:#C90216;
transition-duration:1s}


.fixed .head-logo-full{
fill:black}

.main-header{
width:100%;
padding:0;;
margin:auto;
z-index:999;
transition-duration:0.5s;
top:0em;
position:fixed;
padding:1em;}

.fixed.main-header{
background:rgba(255,255,255,0.9);
padding:0;
height:70px; }

.main-header-inner{
max-width:10000px;
padding-left:20px;
padding-right:20px;}

.fixed .mymenu{
top:6px;}



.main-header-inner{
transition-duration:0.2s;
position:relative;}





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

.head-logo{
width:180px;
left:1em;
top:5px;}



.tenposelect-box{
transition-duration:0.4s;
position:absolute;
top:26px;
left:170px;}

.tenposelect-box select{
padding-right:20px;
font-size:15px;
background-size:18px}


.header-btn-wrap{
display:none}


.main-header{
width:100%;
height:72px;
padding:0;
margin:auto;
z-index:999;
transition-duration:0.5s;
top:0em;
position:fixed;

top:0;}

.main-header.fixed{
top:0;
position:fixed;}


}



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

.head-logo{
width:112px;
top:5px}

.tenposelect-box{
transition-duration:0.4s;
position:absolute;
top:24px;
left:142px;
}



.tenposelect-box select{
font-size:13.5px;
padding-right:6px;
background-image:none}


.fixed .tenposelect-box{
left:140px;
background-image:none!important}

.fixed .tenposelect-box select{
background-image:none;
font-size:13.5px}

}





/**トップビューのスクロールボタン**/


.btn-off{
    pointer-events: none;
    cursor: not-allowed; /* It doesn't Work */}

.scroll-down{
width:60px;
position:absolute;
z-index:9;
left:0;right:0;
bottom:-60px;
margin:auto;
color:white;
height:200px;}




.top-view-slider-wrapper .scroll-down{;
left:auto;
right:-30px}

.scroll-down p{
    font-family: "octbre";
letter-spacing:4px;
color:white;
writing-mode: vertical-rl;
position:absolute;
left:60%;
top:2px;}



.scroll-down::before{content:"";
   width:0.6px;
   height:100%;
   background-color:white;
   position:absolute;
   bottom:0px;
left:0;right:0;
margin:auto;
transition-duration:0.5s}



.scroll-down-black::before{content:"";
   background:white;}

.scroll-down span::before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
left:0;
right:0;
margin:auto;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:white;
    /*丸の動き2.8秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;}





/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:100%;}
     100%{bottom:-5px;}
 }


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

.scroll-down{
height:124px;
bottom:-50px;
width:38px;
left:auto;
right:20px;}

.scroll-down p{
font-size:13px}

.scroll-down-img{
width:10px;}

.top-view-slider-wrapper .scroll-down{;
right:20px}

}




/**トップページ探すブロック**/

.sagasu-block{
aspect-ratio:16/9;
max-height:800px;
width:100%;
height:auto;
position:relative;
margin-top:80px;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;}


.sagasu-block .container{
max-width:1080px}

.sagasu-block .row{
position:relative}


.sagasu-block-img1,.sagasu-block-img2{
position:absolute;
top:0;
object-fit:cover;
object-position:top center}

.sagasu-block-img1{
object-position:right center;
left:0;
width:50%;
height:100%;}

.sagasu-block-img2{
right:0;
width:50%;
height:100%;}

.sagasu-block-list{
text-align:center;
}

.sagasu-block-list ul{
writing-mode: vertical-rl;
display:inline-block;
margin-top:1.5em;
max-width:1000px;
min-height:230px
}

.sagasu-block-list-title{
color:white!important;
border-left:1px solid;
writing-mode: vertical-rl;
font-size:24px;
margin-left:0.5em;}



.sagasu-block-list li{
padding:8px;
text-align:left;
color:white;
letter-spacing:3px;
height:100%;
writing-mode: vertical-rl;
position:relative;}

.sagasu-block-list-kaijou li{
padding-left:5px}

.sagasu-block-list a:before{content:"";
   width:18px;
   height:18px;
    background:url("/cmsmin/wp-content/themes/hassenkaku2025/images/icon/yajirushi-circle.svg");
background-size:contain;
transform:rotate(90deg);
   position:absolute;
   bottom:0px;
   left:0px;right:0;
margin:auto;
    background-repeat: no-repeat;
opacity:0;
transition-duration:0.3s}




.sagasu-block-list a{
position:relative;
display:inline-block;
color:white!important;
padding-bottom:26px}


.sagasu-block-list li:hover a:before{
opacity:1}



@media screen and (max-width: 993px){
.sagasu-block{
aspect-ratio:auto;
max-height:2800px;
margin-top:20px;}


.sagasu-block-img1{
object-position:right bottom;
left:0;
top:auto;
bottom:0;
width:100%;
height:50%;}

.sagasu-block-img2{
object-position:right 30%;
right:0;
top:0;
width:100%;
height:50%;}


}


/**トップページ予約ブロック**/


#course-results{
padding:０em;
background:#efefe;
margin-top:1em}

#course-results .yoyaku-course-wrapper:first-child{
border-top:1px solid #949F9E}

.yoyaku-block{
max-height:800px;
width:100%;
height:auto;
position:relative;
overflow:hidden;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
transitio-duraiton:2s;
z-index:1}

.yoyaku-block::before{content:"";
   width:100%;
   height:100%;
   background-color:rgba(25,25,25,0.2);
   position:absolute;
   bottom:0px;
   left:0px;
z-index:9;
transition-duration:0.3s}


.yoyaku-block .container{

position:relative;
max-width:700px;
z-index:99}

.yoyaku-select{
position:relative;}


.yoyaku-select select{
text-align-last: center;
background:rgba(25,25,25,0.2);
box-sizing:border-box;
  font-family: "Shippori Mincho", serif;
font-size:18px;
padding:10px 2em;
width:100%;
color:white;
border:solid 1px white;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("/cmsmin/wp-content/themes/hassenkaku2025/images/icon/yajirushi-bottom.svg");
    background-repeat: no-repeat;
    background-size: 30px auto; /* 画像のサイズ（幅 高さ）*/
    background-position: right 12px center; /* 画像の位置 */}

.yoyaku-block-image{
position:absolute;
width:100%;
height:100%;
top:0;
object-fit:cover;
visibility:hidden;
opacity:0;;
transition-duration:0.9s;
transform:scale(1.05)}

.yoyaku-block-image.yoyaku-active{
visibility:visible;
opacity:1;
transform:scale(1.0)}


.yoyaku-box{
margin-top:10px;
width:100%;
text-align:right;
overflow:hidden;
transition-duration:1s;
display:none}

.yoyaku-box p,.yoyaku-box-tel a{
color:white!important;}

.yoyaku-box-tel a{
font-size:24px;}


.yoyaku-box-btn{
background:white;
color:#464951;
font-size:18px;
padding:1px 2em;
display:block;
height:40px;
text-align:center;
margin-top:1em;
position:relative;
}

.yoyaku-box-btn::before{content:"";
   width:0%;
   height:100%;
   background-color:  #464951;
   position:absolute;
   bottom:0px;
  right:0px;
transition-duration:0.3s}

.yoyaku-box-btn:hover::before{
width:100%;
left:0;}

.yoyaku-box-btn:hover{
color:white}


.yoyaku-box-btn span{
position:relative;
vertical-align:middle;}

.yoyaku-box.yoyaku-active{
height:auto;
transition-duration:1s;
transform:scaleY(1);
display:block}



.yoyaku-kakunin-course {
  width: 100%;
  margin: 2em auto 0;
  padding: 1em;
  background: white;

}

.yoyaku-kakunin-course-title{
position:relative;
border-bottom:1px solid #464951;
margin-bottom:0.5em }

.yoyaku-kakunin-course p span{
position:absolute;
right:0;}

.yoyaku-kakunin-course table {
  width: 100%;

  border-collapse: collapse;
  table-layout: fixed; /* ← 幅の分配を強制 */
}

.yoyaku-kakunin-course td {
text-align:right;
padding:0.5em
}

.reservation-confirm .table2 tr:first-child {
  border-top: 1px solid white;
}


@media screen and (max-width: 992px){
.yoyaku-kakunin-course-title{
margin-bottom:1em}
.yoyaku-kakunin-course th,.yoyaku-kakunin-course td{
width:100%;
display:block;
line-height:1.5}

.yoyaku-kakunin-course td{
padding-bottom:1.5em}



}




/**トップページその他情報**/

.top-page-info-card-block{
max-width:1400px;
}

.top-page-info-card{
position:relative;
width:90%;
max-width:460px;
margin:auto;
aspect-ratio:1/1;
overflow:hidden;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
line-height:0;
}

.top-page-info-card::before{content:"";
   width:100%;
   height:100%;
   background-color:rgba(25,25,25,0.0);
   position:absolute;
   bottom:0px;
   left:0px;
z-index:9;
transition-duration:0.3s}

.top-page-info-card:hover::before{
   background-color:rgba(25,25,25,0.4);
}

.top-page-info-card:hover img{
transform:scale(1.06)}


.top-page-info-card img{
transition-duration:0.3s;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;

}

.top-page-info-card span{
color:white;
        writing-mode: vertical-rl;
font-size:clamp(19px, 2.6vw, 38px);
position:relative;
letter-spacing:3px;
z-index:9}


@media screen and (max-width: 993px){
.top-page-info-card{
width:100%}

}


/**ブランドページ**/

.line-block{
display:block;}

.line-block-logo{
width:100%;
display:block}

.line-block p{
line-height:1.5;}
.line-block span{
background:white;
color:#464951;
display:inline-block;

padding:2px 1em;
font-size:15px;
transition-duration:0.3s;
margin-top:3px}

.line-block:hover span{
background:#00C401;
color:white}

.video-wrapper{
width:100%;
aspect-ratio:16/8;
height:auto;
position:relative;}

.video-wrapper video{
display:block;
width:100%;
height:100%;
object-fit:cover;}


.brand-information{
background:rgba(255,255,255,0.92);
position:absolute;
bottom:4em;
left:2em;
z-index:9;
padding:1em;
min-width:240px;
max-width:calc(50vw - 4em)}

.brand-information div{
padding:3px 0}

.brand-information a{
font-size:15px}

.brand-information-title{
font-size:0px;
}

.brand-information-none{
opacity:0;
visibility:hidden.
transition-duraiton:0.3s}


.brand-information-close{
width:26px;
height:26px;
background:white
;border-radius:50px;
border:solid 1px black;
position:absolute;
top:-9px;
left:-9px;
z-index:999;}

.brand-information-close::before,.brand-information-close::after{content:"";
   width:10px;
   height:1px;
   background-color:gray;
   position:absolute;

right:0;left:0;
top:0;
bottom:0;
margin:auto;
transform:rotate(45deg) scale(1.41)}

.brand-information-close::before{
transform:rotate(-45deg) scale(1.41)}





.logo-othor{
width:100%;
aspect-ratio:16/9;
object-fit:contain;
width:90%;
margin:auto;
display:block;
max-width:300px;
}

.menu-panel{
cursor:pointer;
position:relative;
width:100%;
height:auto;
aspect-ratio:1/1;
overflow:hidden;}

.menu-panel:hover .menu-panel-img{
transform:scale(1.06);
filter: brightness(70%);}

.menu-panel-title{
color:white;
writing-mode: vertical-rl;
font-size:clamp(37px, 4vw, 50px);
position:absolute;
right:0;
line-height:100%;}

.menu-panel-title2{
bottom:0}

.menu-panel-title3{
left:0;
right:auto;}

.menu-panel-btn{
position:absolute;
width:16%;
max-width:50px;
bottom:0;
left:0;
z-index:9;
}

.menu-panel-img{
width:100%;
height:100%;
object-fit:cover;
transition-duration:0.3s;}



.course-box-header{
cursor:pointer;
position:relative;
aspect-ratio:16/7;
width:100%;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
overflow:hidden;
cursor:pointer
}


.course-box-header .btn2{background:rgba(25,25,25,0.7)}

.lunch-box-header{
position:relative;
aspect-ratio:16/7;
width:100%;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
overflow:hidden
}

.course-box-header:hover .course-box-header-img{
transform:scale(1.05)}


.course-box-header-img{
position:absolute;
left:0;
top:0;
object-fit:cover;
height:100%;
transition-duration:0.3s;
}

.course-box-header:hover .btn2{
color:  #1F1520}

.course-box-header:hover .btn2::before{
width:100%;
left:0}

.course-box-header:hover .btn2-restaurant{
border:#FFF100}



/*
スライダー右から左
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}



/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
margin:auto;
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
margin:0
}

.d-demo__list--left{
animation :infinity-scroll-left 40s infinite linear 0.5s both;
}

.d-demo__list--right{
animation :infinity-scroll-right 40s infinite linear 0.5s both;
}


.d-demo__item {
  width: calc(100vw / 4);
}
.d-demo__item > img{
   width: 100%;
padding:0 0px;
aspect-ratio:16/10;
object-fit:cover
}




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


.d-demo__item {
  width: calc(100vw / 2.4);
}


.course-box-header{
cursor:pointer;
position:relative;
aspect-ratio:16/12;
width:100%;
}


.lunch-box-header{
position:relative;
aspect-ratio:16/12;
width:100%;
}

}


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

.brand-information{
padding:10px;
left:1em;
bottom:0;
max-width:calc(100% - 70px);
width:auto;}

.brand-information a{
font-size:14px}

}




/**予約ページ**/

.course-select-title{
font-size:24px}

.yoyaku-kakunin .table2 th,.yoyaku-kakunin .table2 td{
padding:1em;}


.yoyaku-course-naiyou-title{
display:inline-block;
margin-top:10px;
padding-right:26px;
position:relative;
}

.yoyaku-course-naiyou-title::before,
.yoyaku-course-naiyou-title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 16px;
  height: 2px;
  background-color: #464951;
  transition: transform 0.3s, background-color 0.3s;
}

.yoyaku-course-naiyou-title::after {
  transform: rotate(90deg);
}


.naiyou-active .yoyaku-course-naiyou-title::after {
  transform: rotate(0deg);
}

.yoyaku-course-naiyou{
max-height:0;
visibility:hidden;
opacity:0;
transition-duration:0.2s}

.naiyou-active .yoyaku-course-naiyou{
max-height:10000px;
visibility:visible;
opacity:1}


#store-note{
background:#efefef;
padding:2em;}

#store-note:empty {
  display: none;
}


.yoyaku-course-wrapper{
padding:1.5em 0;
border-bottom:1px solid #949F9E}


.yoyaku-price{
text-align:center;
font-size:18px;
line-height:1.6;
margin-bottom:5px}

.course-price-ninzu{
line-height:1;
font-size:17px;
color:#C90216;}



.yoyaku-price-exp{
font-size:13.5px;
display:none}

.yoyaku-course-btn{
background:#464951;
color:white;
display:inline-block;
width:100%;
text-align:center;
padding:3px 0.7em;
border-radius:10px;
border:slid 1px #464951;
transition-duration:0.2s;
cursor: pointer;
border:solid 1px;}

.add-select{
display:none}

.cselected .add-select{
display:block}

.cselected .no-select{
display:none}

.course-selected-icon{;
width:50px;
margin:auto;
margin-top:0.7em;
opacity:1;
  transform: scale(0);
  transition-duration:0.2s;
  display:block}

.yoyaku-course-btn:hover + .course-selected-icon {
  opacity: 1;
  transform: scale(1.0);
  display:block
}


.cselected .course-selected-icon {
  opacity: 1;
  transform: scale(1.0);
  }



.yoyaku-course-btn:hover{
background:white;
color:#464951;}

.cselected .yoyaku-course-btn{
background:#C90216;
color:white!important}

.course-block h2{
font-size:18px}

.yoyaku-base-wrapper .wpcf7-not-valid-tip{
color:#FFF100}


/**ブランドページコースメニュー**/

.course-group-link{
margin-top:10px;
display:block}

.course-group-link a{
background:#efefef;
display:inline-block;
font-size:13px;
padding:2px 10px;}




.restaurant-tel-box p {
  display: inline-flex;          /* ← flex に変更 */
  align-items: center;          /* ← 縦中央揃え */
  gap: 1em;                     /* ← 間隔調整はお好みで */
}


.restaurant-tel-box span {
  font-size: clamp(18px, 2.3vw, 24px);
  border-top: solid 1px;
  border-bottom: solid 1px;
  text-align: center;
  padding: 10px 18px;
line-height:1.2;
display:inline-block;
}



.restaurant-tel-box a {
display:inline-block;
  font-size: clamp(18px, 5.6vw, 64px);
  text-align: center;
line-height:2;
padding-bottom:6px
}
.access-title{
position:absolute;
width:18%;
max-width:220px;
min-width:150px;
top:0;
z-index:9;
right:0;
}


.course-link-block{
background:rgba(255,255,255,0.0);
transition-duration:0.2s;
padding:6px;
display:block;
width:100%;
border-bottom:solid 1px silver;
padding:12px 0}




.course-link-block th,.course-link-block td{
line-height:1.4;
padding:0;
position:relative}

.course-link-block th{
padding-right:10px;}

.course-link-block td{
width:90px;}


.course-link-block .course-gaiyou{
font-size:14px;
text-align:right;}

.course-link-block .course-tenpo{
display:block;
margin-top:10px;
color:white}

.course-link-block .course-tenpo a{
background:white;
padding:1px 8px;
font-size:14px;
letter-spacing:2px;
border-radius:20px;
margin-right:8px;
display:inline-block;
margin-top:5px
}

.course-link-block .course-tenpo a:hover{
background:#464951;
color:white}

.course-box-contents{
padding:3em}

.course-box-contents-title{      display: flex;
      justify-content: space-between;
      align-items: center;

      width: 100%;
      color: #fff; /* 白文字にする場合 */
      padding: 0.5em 0em;
font-size:30px;
border-bottom:solid 1px}

    .course-box-contents-title strong {
      margin-right: auto;
font-weight:normal;
    }

    .course-box-contents-title span {
      margin-left: auto;
font-size:15px;
display:inline-block
    }


.course-box-icon{
width:32px;
margin-left:15px}

.course-link-block table{
width:100%;}





.course-link-block:hover{
background:rgba(255,255,255,0.2)}

.course-box-contents th a{
padding-right:12px;}

.course-box-contents td{
text-align:right;
padding:3px 0;
min-width:100px;
vertical-align:top;
position:relative;
}


.course-box-price{
padding-right:26px;
display:inline-block}

.course-box-price span{
text-align:left;}

.course-box-price img{
width:50px;
height:50px}

.course-box-title-btn{
width:20px;
margin-left:10px;
position:absolute;
top:0;
bottom:0;
right:0;
margin:auto}


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

.course-select-title{
font-size:18px}


.course-box-contents{
padding:1.5em}

.restaurant-tel-box p {
  display: block
}


.restaurant-tel-box span {
  font-size: clamp(18px, 2.3vw, 24px);
  border-top: solid 1px;
  border-bottom: solid 1px;
  text-align: center;
  padding: 0 18px;
line-height:2;
display:block;
text-align:center;
}

.restaurant-tel-box a {
display:block;
  font-size: clamp(18px, 6.3vw, 64px);
  text-align: center;
line-height:2;
padding-bottom:6px
}

.course-box-contents-title{          display: block; /* flex解除 */
    text-align: left;
font-size:24px}



    .course-box-contents-title span {
      margin-left: auto;
font-size:15px;
display:inline-block
    }


.course-box-icon{
width:24px;
margin-left:15px}


}

/**ブランドページのモーダルメニュー**/


.pswp{
--pswp-bg:rgba(70,73,81,1)}

.menu-mordal table{
width:100%;
margin-top:1em
}

.munu-mordal-table-wrap{
max-width:700px;
margin:auto}

.menu-mordal td,.menu-mordal th{
font-size:17px;
font-weight:normal;
}



.menu-mordal td{
text-align:right;
padding:10px;}

.menu-morda-close{
width:60px;
height:60px;
position:absolute;
top:0;
right:0;
z-index:999}

.menu-morda-close::before,.menu-morda-close::after{content:"";
   width:100%%;
   height:1px;
   background-color:gray;
   position:absolute;

right:0;left:0;
top:0;
bottom:0;
margin:auto;
transform:rotate(45deg) scale(1.41)}

.menu-morda-close::before{
transform:rotate(-45deg) scale(1.41)}


.menu-mordal-title {
font-size:clamp(18px, 4.3vw, 42px);
  writing-mode: vertical-rl;        /* 縦書き（右から左） */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  margin: 0;
}
.menu-mordal-title span {
  transform: rotate(180deg); /* 文字の上下反転（縦書きで自然な並びに） */
  display: inline-block;
}

.menu-title-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* アスペクト比 16:14（=8:7） */
  display: flex;
}

.menu-title-wrapper2{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
display:block;}

.menu-title-wrapper2 h3{
font-size:42px;
margin-bottom:1em}

.menu-title-text{
  display: flex;
  align-items: center;     /* 垂直中央 */
  justify-content: center; /* 水平中央 */
  height: 100%;            /* 親要素に高さが必要 */}

.menu-title-text h3 {
  writing-mode: vertical-rl;
  text-align: center;
  margin: 0;
	font-size:clamp(36px, 5.3vw, 42px);
}

.menu-title-text span {
  display: inline-block;
  font-size: 1.5em;
}

.menu-title-image {
  width:calc(50% + 4em);
  height:calc(100% + 4em);
  object-fit: cover;
position:absolute;
top:-4em;
right:-4em;
}

.menu-title-image2{
  width:calc(50% + 4em);
  height:calc(100% + 4em);
  object-fit: cover;
position:absolute;
top:-4em;
left:-4em;
right:auto;
}

.menu-title-image3{
aspect-ratio:16/9;
object-fit:cover;
margin:auto;
display:block}

.menu-mordal-bg-lefttop{
position:absolute;
width:50%;
left:0;
top:0}

.menu-mordal-bg-righttop{
position:absolute;
width:50%;
right:0;
top:0}



.mordal-bg-rightbottom{
position:absolute;
width:50%;
right:0;
bottom:0}

.mordal-bg-leftbottom{
position:absolute;
width:50%;
left:0;
bottom:0}

.menu-mordal{
visibility: hidden;
position:fixed;
top:0;
left:0;
background:rgba(25,25,25,0.7);
width:100%;
height:100dvh;
z-index:999;
transform:scale(1);
opacity:0;
transition-duration:0.2s;
display:flex;
  display:-webkit-box;
    display:-ms-flexbox;

justify-content: center; 
  -webkit-box-pack: center;
  -ms-flex-pack: center;

align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;}

.mordal-active.menu-mordal{
opacity:1;
transform:scale(1);
visibility: visible;
}


.mordal-active.menu-mordal{
opacity:1;
transform:scale(1);
visibility: visible;
}



.menu-mordal-main{
width:90vw;
height:auto;
min-height:200px;
overflow:scroll;
max-height:90dvh;
max-width:900px;
position:relative;
z-index:99;
opacity:0.0;
transition-duration:0.5s;
transform:scale(0.9);
}

.mordal-active .menu-mordal-main{
opacity:1;
transform:scale(1);}


.menu-mordal-wrapper{
position:relative;
z-index:9999999}

.menu-mordal-inner{
margin:auto;
width:100%;
padding:4em;
position:relative;
z-index:9;
overflow-x:hidden}

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

.menu-mordal-inner{
padding:2em;}

.menu-mordal td{
min-width:100px}

.menu-mordal td,.menu-mordal th{
font-size:0.95rem;
font-weight:normal;
line-height:1.5}

.menu-title-wrapper2 h3{
font-size:32px}

.menu-title-text h3 {
	font-size:clamp(20px, 4.0vw, 32px);
}


.menu-morda-close{
width:32px;
height:32px}


}


/**コース詳細**/
.course-body h2{
font-size:20px;
border:solid 1px ;
padding:5px 1em;
margin-bottom:10px;
display:inline-block}


.course-notes{
border-top:1px solid #949F98;
padding-top:1em}


.course-naiyou-list-title{
background:gray;
display:inline-block;
color:white;
padding:2px 1em;
margin-bottom:1em;
margin-top:20px}


.course-gaiyou-single{
border-top:1px solid #464951;
border-bottom:1px solid #464951;
text-align:center;
padding:2px;
font-size:15px;
margin:1.2em 0 0.6em 0;}

.course-price-single{
text-align:center;
font-size:20px}


.course-price-single-exp{
font-size:14px}


.course-gaiyou{
padding:2px 6px;
font-size:15px;}

.course-head-wrap{
padding-top:140px;
width:100%;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;}

.course-copy{
font-size:22px;
line-height:1.5;}

.course-cate{
display:inline-block;
background:white;
padding:4px 1em;
margin-bottom:12px}


.course-group{
color:white}

.course-group a{
color:white}



.course-naiyou-list li{
margin-bottom:6px}

.course-list-num{
margin-right:6px;
font-weight:bold;
}

.course-notes{
font-size:14px}


@media screen and (max-width: 993px){
.course-copy{
font-size:20px;
line-height:1.5;}

}

@media screen and (max-width: 768px){
.course-copy{
font-size:18px;
line-height:1.5;}

}



/**基本レイアウト**/


.base-wrapper{
width:100%;
padding-top:100px;
padding-bottom:100px;
}


.box-section{
padding:7em;}


.box-section2{
padding:1em;}

.page-group{
position:relative;
border-bottom:solid 1.5px #C6C6C6;
padding:1rem 0;}

.page-group::before{content:"";
   width:0%;
   height:1.5px;
   background-color:#464951;
   position:absolute;
   bottom:-1px;
  right:0;
transition-duration:0.3s}

.page-group::after{content:"";
   width:10%;
   height:1.5px;
   background-color:#464951;
   position:absolute;
   bottom:-1px;
  left:0;
transition-duration:0.3s;
transition-delay:0.12s}

.page-group:hover::before{
width:100%;
left:0!important}

.page-group:hover::after{
transition-delay:0.2s;
width:0%;
left:0!important}

.page-group p{
font-size:14px}

.page-group span{
display:block;
font-family: 'Roboto', sans-serif;
font-weight:bold;
font-size:26px;}


@media screen and (max-width: 993px){
.base-wrapper{
padding-top:50px;
padding-bottom:50px}


.box-section{
padding:3em;}
}

@media screen and (max-width: 768px){
.box-section{
padding:2em;}

}

/**トップページお知らせ****/


.information-block{
background-image: url("/cmsmin/wp-content/themes/hassenkaku2025/images/bg/bg-black.webp");
background-size:cover;
background-position:center;

width:100%;
height:auto;
position:relative;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
position:relative;
}

.information-block-image1{
position:absolute;
width:40%;
max-width:700px;
bottom:-15vmin;
left:-15vmin;
z-index:0}

.information-block-image2{
position:absolute;
width:40%;
max-width:700px;
top:-15vmin;
right:-15vmin;
z-index:9}

.information-top .information-normal-link{
border:none}

.information-top{
position:relative;
z-index:9}


.information-top .information-normal-link:hover{
background:rgba(255,255,255,0.2)}


/**デリバリー・弁当**/

.mobile-order-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem; /* アイテム間の余白 */
  flex-wrap: wrap; /* スマホで折り返し */
  text-align: center;
}

.mobile-order p{
  font-weight: bold;
text-align:center;
line-height:1.5;
font-size:20px;
margin-bottom:0.5em
}


.mobile-order-qr {
  max-width: 120px;
  height: auto;
}


/**各ページのヘッダー**/


.page-head-wrap{
width:100%;
margin-top:150px;
margin-bottom:80px
}

.page-head-wrap img{
position:absolute;
width:100&%;
left:0;
top:0;
height:100%;
object-fit:cover;
filter:brightness(0.92)}

.page-head-wrap .container{
aspect-ratio:16/8;
position:relative;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;}

.page-head-wrap p{
font-size:52px;
margin:0;
padding:0;
line-height:1.5;
color:white;
text-align:center;
  font-family: "octbre";
letter-spacing:5px}

.page-head-wrap h1{
font-size:28px;
color:white;
text-align:center;}


.single-head-wrap3{width:100%;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
padding:140px 0 80px 0}


.single-head-wrap3 h1,.single-head-wrap3 h2{
text-align:center;
margin:0;
font-size:52px;
letter-spacing:5px}


.single-head-wrap3 p{
text-align:center;
margin-top:2em}

.single-head-wrap{

width:100%;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
padding:120px 0 50px 0}



.single-head-wrap2 p{
background:white;
display:inline-block}


.single-head-wrap h2{
text-align:center;
margin:0;
font-size:28px}

.single-head-wrap p{
text-align:center;
margin:0;
margin-bottom:12px;
font-size:38px;
line-height:120%;
text-transform: uppercase;
letter-spacing:5px}

.brand-head-wrap{
width:100%;
background:rgba(2,111,184,0.1);
padding-top:180px;
padding-bottom:4em;
margin-bottom:3em;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
margin-bottom:3em;}


.brand-head-wrap img{
display:block;
width:70%;
max-width:500px;
height:auto;
margin:auto;}


@media screen and (max-width: 1200px){
.page-head-wrap{
width:100%;
margin-top:100px;
margin-bottom:0px
}

}


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

.single-head-wrap p{
font-size:30px;
margin-bottom:10px}

.single-head-wrap h2{
font-size:18px}


.single-head-wrap{
padding:1.6em 0;
height:auto;
padding-top:90px;}


.page-head-wrap h2,.page-head-wrap h1{
	font-size:clamp(20px, 2.3vw, 26px);
margin-top:6px}

.single-head-wrap3 h1{
	font-size:clamp(28px, 4.3vw, 36px);
margin-top:6px}


.single-head-wrap3{
padding:80px 0 40px 0}

.page-head-wrap p,.page-head-wrap-inner p{
	font-size:clamp(24px, 4.3vw, 30px);}






.top-intro p{
font-size:clamp(15px, 4.8vw, 24px);}

.page-head-wrap{
margin-top:85px;
}

}


@media screen and (max-width: 768px){
.page-head-wrap{
margin-top:76px;
}

}



/**テキスト基本設定**/

h1,h2{
font-size:30px;color:#464951;
    padding: 3px 0 0 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
line-height:150%;
margin-bottom:10px;
position:relative;
padding:0;
letter-spacing:0.08em;
  font-family: "Shippori Mincho", serif;
}

h3,h4{
font-size:24px;color:#464951;
    padding: 3px 0 0 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
line-height:150%;
border-bottom:none;
margin-bottom:10px;
padding:0;
letter-spacing:0.08em;
  font-family: "Shippori Mincho", serif;}
  
  h5,h6,h7,h8{
font-size:24px;color:#464951;
    padding: 3px 0 0 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
line-height:150%;
border-bottom:none;
margin-bottom:10px;
padding:0;
letter-spacing:0.08em;
  font-family: "Shippori Mincho", serif;}






p{font-size:16px;color:#464951;
margin:0;line-height:2.0;
position:relative;
z-index:1;
letter-spacing:0.05em;
line-height:2.06;
text-align: justify;
text-justify: inter-ideograph;
  font-family: "Shippori Mincho", serif;
font-weight:400}

a {
text-decoration:none;
font-size:16px;
color:initial;outline: none;
color:#464951;
transition-duration:0.3s;
letter-spacing:0.03em;
  font-family: "Shippori Mincho", serif;
font-weight:400;
cursor:pointer}

a:hover{
text-decoration:none;
color:#000000;}

a:focus{
	outline: none;}

ul{padding:0;
list-style-type:none}

li{
list-style-type:none;
font-size:15px;color:#464951;
letter-spacing:0.03em;
  font-family: "Shippori Mincho", serif;
font-weight:400}

th,td{color:#464951;
font-size:16px;
letter-spacing:0.03em;
line-height:2.06;
  font-family: "Shippori Mincho", serif;
text-align:left;}


dt,dd{
color:#464951;
transition-duration:0.3s;
letter-spacing:0.03em;
  font-family: "Shippori Mincho", serif;
line-height:2.06;}

.font-150{
font-size:150%;
line-height:1.5;
text-align: left;}



.text-120{
font-size:120%}


.font-80{
font-size:80%}

@media screen and (max-width: 993px){
h1,h2,h3,h4{
font-size:20px;
line-height:1.4}

 h5,h6,h7,h8{font-size:18px;
line-height:1.4}

p,a,th,td,dd,dt{font-size:14.5px;
0.01em}

}

/**テキスト文字設定**/


.italic{font-style: italic !important;}
.right{text-align:right;}
.center{
text-align:center}
.left{text-align:left;}
.serif{font-family: 'Noto Serif JP', serif;}
.white{color:white}
.bluegray{color:#949F9E}
.deepgray{color:#464951}
.green{color:#53B59E}
.black{color:#1F1520}
.light-green{
color:#BDE3DA}
.bold{font-weight:bold}
.red{color:#C90216;}
.yellow{
color:#FFF100}

.weight500{
font-weight:500}

.align-right{text-align:right;}

.orikaeshi{display: inline-block;
}

.break-word{word-break: break-word}

.caption{line-height:1.4em;font-size:14px;margin-top:5px;
padding:5px;
margin-left:5px;
padding-left:1em;
	text-indent:-1em;
color:#666666}


.caption:before{content:"▲";
color:#666666;
font-size:12px;
padding-right:3px;
vertical-align:top}


.caption2{
font-size:14px;
color:#666666;
margin-top:10px;
line-height:1.6}


@media screen and (max-width: 768px){
.caption{line-height:1.3em;
font-size:12.5px}

.caption2{
font-size:13px;
line-height:1.4}
}




/**グローバルメニューの設定共通**/

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  padding-bottom:20px;
  margin-bottom:-20px
}
.menu-yoyaku-box .custom-select-wrapper{
      width: 100%;
      height: 100%;
      display: block;
}

.custom-select-options {
display:block;
  position: absolute;
  top: calc(100% - 10px);
  left:0;
  z-index: 10;
  width: 260px;
  border: 1px solid #ccc;
  background-color:rgba(25,25,25,0.8);
  max-height: 200px;
  overflow-y: auto;
  visibility:hidden;
  opacity:0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  height:auto;
  transition-duration:0.3s;
  text-align:left;
}

.menu-top-btn .custom-select-options{
width:100%}

.custom-select-options a {
  display: block;
  padding: 8px  8px;
  text-decoration: none;
  text-align:left;
  font-size: 14px;
  border-bottom: solid 1px silver;
  text-align: left;
  color:white;
  transition-duration:0.1s;
}

.custom-select-hover.hover-c:hover .custom-select-wrapper .custom-select-options,
.custom-select-hover.active .custom-select-wrapper .custom-select-options{
 visibility:visible;
  opacity:1;
  max-height:1000px;
}

.custom-select-options a:hover {
  background-color: #f0f0f0;
  color:black
}



.menu-contents-title{
font-size:40px;
  position: relative;
  display: flex;
  align-items: center;}
  
  
  .menu-contents-title::after {
  content: "";
  display: block;
  height: 1px;
  background: #464951; /* 線の色 */
  flex: 1;
  margin-left: 1em; /* テキストとの間隔（調整可能） */
}



.menu-logo{
position:fixed;
width:180px;
aspect-ratio:16/9;
display:block;
top:2em;
left:0;right:0;
margin:auto;
z-index:999;
}


.main-menu-wrap{
background:white;

transform: translateY(-100%);
opacity:0.1;
width: 100%;
  height:100dvh;
overflow:scroll;
  position: relative;
padding:160px 20px 20px 20px;
 position: fixed;
z-index:999;
right:0;
top:0;

transition: 0.3s ease-in-out 0s;
}

.menu-image{
display:block;
aspect-ratio:16/11;
object-fit:cover;
max-width:480px;
margin:auto;}

.menu-top-btn{
background:#949F9E;
color:white;
width:100%;
display:inline-block;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
min-height:60px;
height:100%;
}


.menu-top-btn span{
padding:10px;
display:inline-block;
vertical-align:middle;}

.menu-top-btn svg{
width:38px;
height:auto;
margin-bottom:5px;
margin-right:5px;
fill:white}

.menu-top-btn svg .st0{
fill:white}



.menu-top-btn:hover{
background:#464951;
color:white}


.menu-yoyaku-box{
background:#464951;
position:relative;
}

.menu-yoyaku-box form{
width:100%;
padding-rgiht:30px;}

.menu-yoyaku-box:hover{
background:#C90216;}

.menu-yoyaku-box::before{content:"";
   width:12px;
   height:1px;
   background-color:white;
   position:absolute;
   bottom:0px;top:0;
right:18px;
margin:auto;
transform:rotate(45deg);
transition-duration:0.3s}

.menu-yoyaku-box::after{content:"";
   width:12px;
   height:1px;
   background-color:white;
   position:absolute;
   bottom:0px;top:0;
right:10px;
margin:auto;
transform:rotate(-45deg);
transition-duration:0.3s}

@media screen and (min-width: 768px){
.menu-yoyaku-box:hover::before{
transform:rotate(-45deg);}

.menu-yoyaku-box:hover::after{
transform:rotate(45deg);}
}


.active.menu-yoyaku-box::before{content:"";
transform:rotate(-45deg);}

.active.menu-yoyaku-box::after{content:"";
transform:rotate(45deg);}


.menu-yoyaku-box select{
padding:10px;
text-align-last: center ;
color:white;
width:100%;
  font-family: "Shippori Mincho", serif;
}

/* 親メニューにマウスオーバーしたときにカーソルを変更 */
.menu-item-has-children:hover {
  cursor: pointer;
}

/* リストの記号を消去 */
.menu-item  {
margin-bottom:0;
  list-style-type: none;
}





.main-menu-off b{
font-size:13px;
margin-left:10px;
color:#545454}

.menu-banner{
max-width:500px;
display:inline-block}

.menu-banner:hover{
box-shadow:5px 5px 0px 3px #CD4964}

.menu-btn{
margin-bottom:20px;
padding:10px}


.sp-menu-contact a{
display:block;
width:90%;
margin:auto;
font-size:18px;
background:#051A5F;
text-align:center;
margin-top:18px;
font-weight:bold;
padding:10px;
transform:skew(-20deg)}

.sp-menu-contact span{
display:block;
transform:skew(20deg)!important}

.head-logo-pc{display:none;}

.main-menu-sub{
display:none}

.main-menu a:not([href]):not([class]) {
color:#464951
}



.mymenu{
display:block;
border-radius:0%;
    height: 60px;
    width: 80px;
z-index:999999;
margin-left:auto;
position:fixed;
transition-duration:0.3s;
top:20px;
right:40px;
}

.mymenu.active{
transform:scale(1);
position:fixed;
}

.menu__line.active{
background:black!important;
height:1px!important}


.fixed .menu__line{
background:black;
height:1.5px}



.menu__line{
    background: white;
    display: block;
    height: 1px;
    position: absolute;
transition-duration:0.2s;

right:0;
top:18px;
margin:auto;
border-radius:20px;
transition-timing-function: ease-in;
}


.menu__line--01{
top:8px;
    width:46px;
transition-delay:0.3s
}


.menu__line--02{
top:14px;
width:62px;
transition-delay:0.1s
}

.menu__line--03{
top:20px;
width:36px;
transition-delay:0.0s
}

.menu__line--04{
top:26px;
width:52px;
transition-delay:0.4s
}

.menu__line--05{
top:32px;
width:72px;
}

.menu__line--06{
top:38px;
width:36px;
transition-delay:0.0s
}

.menu__line--07{
top:44px;
width:80px;
transition-delay:0.1s
}


.menu__line--08{
top:50px;
width:58px;
transition-delay:0.3s
}



.menu__line--01.active{
width:0;
transition-delay:0.3s}

.menu__line--02.active{
width:0;
transition-delay:0.1s}



.menu__line--03.active{
transform: rotate(45deg);
top:30px;
background:white;
transition-duration:0.2s;
transition-delay:0.5s
}

.menu__line--04.active{
width:0;
transition-delay:0.2s}

.menu__line--05.active{
width:0;
transition-delay:0.4s}

.menu__line--06.active{
transform: rotate(-225deg);
background:white;
top:30px;
transition-duration:0.3s;
transition-delay:0.5s
}

.menu__line--07.active{
width:0;
transition-delay:0.5s}

.menu__line--08.active{
width:0;
transition-delay:0.1s}


.menu-container{
max-width:2000px;}



.main-menu{
padding:0em;
width:100%;
display:block;
max-width:600px;
margin:auto;
margin-bottom:5px;
}

.main-menu a{
display:inline-block;
wdith:100%;
padding:8px 5px;
font-size:17px;
letter-spacing:2px;
color:#464951}




.main-menu .menu-item-has-children:before{
content:"";
   display:block;
border-radius:10px;
   width:1px;
   height:10px;
   background-color:black;
   position:absolute;
top:20px;
   right:0px;
transform:rotate(38deg);
transition-duration:0.5s
}

.main-menu .menu-item-has-children:after{
content:"";
   display:block;
border-radius:10px;
   width:1px;
   height:10px;
   background-color:black;
   position:absolute;
top:20px;
   right:6px;
transform:rotate(-38deg);
transition-duration:0.5s
}


.main-menu .sub-menu{
border-top:1px solid gray;
padding-top:10px
}

.main-menu .sub-menu a{
display:inline-block;
width:100%;
font-size:15px;
padding:20px 16px 4px 16px;}

.main-menu .sub-menu li{
position:relative;
padding-left:0.6em;}

.main-menu .sub-menu a::before{content:"";
   width:0px;
   height:1px;
   background-color:#464951;
   position:absolute;
   bottom:0px;top:0;
   left:0px;
margin:auto;
transition-duration:0.2s}

.main-menu .sub-menu a:hover::before{
width:12px}


.main-menu .sub-menu li:last-child{
margin-bottom:20px;
}


.active-menu.menu-item-has-children:before{
content:"";
transform:rotate(-38deg);
}

.active-menu.menu-item-has-children:after{
transform:rotate(38deg);
transition-duration:0.5s
}


.menu-slide .menu-item:nth-child(1){
transition-delay: 250ms;}

.menu-slide .menu-item:nth-child(2){
transition-delay: 300ms;}
.menu-slide .menu-item:nth-child(3){
transition-delay: 500ms;}
.menu-slide .menu-item:nth-child(4){
transition-delay: 700ms;}
.menu-slide .menu-item:nth-child(5){
transition-delay: 900ms;}
.menu-slide .menu-item:nth-child(6){
transition-delay: 1100ms;}
.menu-slide .menu-item:nth-child(7){
transition-delay: 1300ms;}
.menu-slide .menu-item:nth-child(8){
transition-delay: 1500ms;}
.menu-slide .menu-item:nth-child(9){
transition-delay: 1700ms;}
.menu-slide .menu-item:nth-child(10){
transition-delay: 1900ms;}
.menu-slide .menu-item:nth-child(11){
transition-delay: 2100ms;}



.main-menu .menu-item{
transform: translateX(-10px);
transition-duration:0.5s;
opacity:0}

.menu-slide .menu-item{
transform: translateX(0%);
opacity:1!important;
}


.menu-slide{
transform: translateX(0%)!important;
opacity:1!important;}

/* カレント設定　※サブメニューにはボーダーを付けない */




/* 現在のメニュー項目だけ表示する */
.main-menu li.current-menu-item > a::before,
.main-menu li.current-menu-ancestor > a::before,
.main-menu li.current-menu-parent > a::before,
.main-menu li.current-post-ancestor > a::before {
  width: 12px;
}

/* 不要な :after を消す（hover含む） */
ul.pcnav > li > a:hover:after,
ul.pcnav > li.current-menu-ancestor > a:after,
ul.pcnav > li.current-menu-item > a:after,
ul.pcnav > li.current-menu-parent > a:after,
ul.pcnav > li.current-post-ancestor > a:after,
ul.pcnav > li.current_page_ancestor > a:after {
  content: none;
}



/**グローバルメニューの768以上**/


@media screen and (min-width: 768px){
.main-menu .menu-item-has-children:after{
display:none!important}

.main-menu .menu-item-has-children:before{
display:none!important}

.main-menu .sub-menu li:last-child{
margin:0!important}

.main-menu .sub-menu a{
margin:0!important;
padding:5px 5px!important}

.menu-tenpo .sub-menu li{
margin-bottom:5px}

.menu-tenpo .sub-menu a{
font-size:18px!important;
padding-top:0.5em!important;
padding-bottom:0.5em!Important;
padding-bottom:0.5em;
letter-spacing:4px;}

.main-menu-wrap{
padding:200px 20px 20px 20px!important;}

.menu-logo{
position:fixed;
width:240px;}

  .menu-contents-title::after {
  display: none;
}


}



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

.menu-container{
padding:6px}

.mymenu.active{
right:12px}

.menu-top-btn,.menu-yoyaku-box{
padding-top:0;
padding-bottom:0}

.menu-contents-title{
font-size:26px}



.mymenu{
right:10px;
top:5px;
transform:scale(0.86);}

.main-menu .sub-menu li:last-child{
margin-bottom:0.5em}



.main-menu .sub-menu a{
padding:10px 0;
padding-left:9px}


}


@media screen and (max-width: 600px){
.mymenu{
right:0px;

transform:scale(0.75)}

}






/**タイトル類***/

.title1{
letter-spacing:3px;
background:linear-gradient(135deg, #4a4d52 0%, #2b2d31 100%);
color:white;
border-radius:50px;
display:inline-block;
padding:4px 1em}


.title2{
background:#949F9E;
padding:10px 1em;
color:white}


.hakkaku-image{
position: relative;: relative;
mask-image:url("/cmsmin/wp-content/themes/hassenkaku2025/images/icon/hakkaku-mark-inner.svg");
mask-size:100%;
width:100%;
height:auto;
aspect-ratio:1/1;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}

.hakkaku-image img{
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
aspect-ratio:1/1;
object-fit:cover;
filter:brightness(0.8)}


.hakkaku-image .btn-hakkaku-mark{
position:absolute;
background:white;
z-index:99;
left:0;
top:0
}

.hakkaku-image p{
background:rgba(25,25,25,0.2);
z-index:9999;
color:white;
font-size:20px;
line-height:1.5;
text-align:center;}

.restaurant-main-title h2,.restaurant-main-title p{
text-align:center;
}

.restaurant-main-title p{
font-size:20px}

.restaurant-main-title h2{
font-size:40px;
line-height:1.5}

.title-hakkaku{
  display: flex;
  align-items: center;       /* 上下中央 */
  justify-content: center;   /* 左右中央 */
  text-align: center;
  position: relative;
  z-index: 99;
  width: 260px;
  height: 260px;
  margin: auto;
margin-bottom:-40px;
  overflow: hidden;
padding:42px;
}


.title-hakkaku p{
font-size:28px;
line-height:1.5;
letter-spacing:6px;
position:relative;
width:100%;
text-align:center;
z-index:9;
position:relative;
    display: flex;
  align-items: flex-start;   /* spanを上に揃える */
  justify-content: center;}

.title-hakkaku span{
  writing-mode: vertical-rl;
  text-align: left;
  z-index: 999;
  align-self: flex-start;    /* 縦ボックスをpの上にくっつける */}

.title-hakkaku b{
position:relative;
display:inline-block;
line-height:1.5;
font-weight:normal;
margin-top:-16px;
margin-bottom:-16px
}

.title-hakkaku  .btn-hakkaku-mark{
position:absolute;
width:100%;
top:0;
left:0;
right:0;
margin:auto;
z-index:-1!important;
}

.title-hakkaku2{
padding:0
}

.title-hakkaku2  .btn-hakkaku-mark{
width:200%;
max-width:180px;
top:-40px;
bottom:auto;
}


.title-hakkaku2 strong {
  font-weight: normal;
  font-size: 17px;
  display: block; /* ← これが最も確実 */
  line-height:0.8;
width:0;
}

.title-hakkaku-frame{
position:relative;
aspect-ratio:22/4;
text-align:center;
	font-size:clamp(13.5px, 3.0vw, 18px);
	letter-spacing:2px;
overflow:over;
width:100%;
height:auto;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}

.title-hakkaku-frame img{
position:absolute;
left:0;
top:0;bottom:0;
margin:auto;
width:100%;
height:100%;
}


.title-white-box{
font-size:20px;
text-align:center;
background:white;
padding:4px 1em;}


.title-en{
	font-size:clamp(24px, 10vw, 120px);
position:absolute;
top:0;
line-height:73.9%;
left:0;
letter-spacing:10px;
  font-family: "octbre";}


.title-jp{
	font-size:clamp(32px, 6.8vw, 80px);
position:absolute;
top:-1%;
line-height:100%;
right:-1vw;
letter-spacing:10px;}


.title-en-right{
left:auto;
right:-1vw}

.tategaki-title01{
position:relative;
writing-mode: vertical-rl;
text-orientation: upright;
display:inline-block;
margin:auto;
text-align:left;}


.tategaki-title01 h2{
margin:0;
line-height:1;
font-size:68px}

.tategaki-title01 h3{
margin:0;
line-height:1.5;
font-size:38px}

.tategaki-title01 span{
font-size:16px;
height:200%;
top:0;
line-height:1.5;
position:absolute;
left:-100%}

.tategaki-center{
width:100%;
position:relative;
text-align:center}




.tategaki-title02{
position:relative;
writing-mode: vertical-rl;
display:inline-block;
margin:auto;
text-align:left;
}

.tategaki-title02 p{
line-height:300%;
letter-spacing:3px;
font-size:18px;}
  
  .tategaki-title02 span{
        text-combine-upright: all;
  }
  
  


.tategaki-large{
writing-mode: vertical-rl;
width:100%;
    display: flex;
    /*コレ*/justify-content: flex-end;
position:relative;
}

.tategaki-large h3{
font-size:80px;
line-height:120%;
letter-spacing:24%;
padding:0;
margin-right:0;
padding-bottom:0;
margin-bottom:-22px
}


.tategaki-copy {
position:relative;
writing-mode: vertical-rl;
display:inline-block;
margin:auto;
text-align:left;
position:absolute;
}


.tategaki-copy-access{
right:0em;
top:-0em;}

.tategaki-copy-access-wrapper{
position:relative;}

.tategaki-copy-access-wrapper .tategaki-copy-access{
position:relative;
margin-left:auto;
display:block;
margin-right:0;
margin-bottom:-80px
}


.tategaki-copy span {
  display: inline-block;
  font-size: 1.2em;
  padding: 0.5em 0.3em;
  line-height: 1.8;
margin-left:16px;
letter-spacing:6px;
 white-space: nowrap; 
}


.yokogaki {
  display: inline-block;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  display: inline-block;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: translateY(-0.2em); /* 縦の中心に合わせて微調整 */
  vertical-align: middle;
  line-height: 1;
  height: 1em;        /* 縦1文字分に揃える */
  box-sizing: content-box;
}


.title01{
font-size:18px}

.title01 span{
  font-family: "octbre";
letter-spacing:6px;
font-size:70px}


.title02{
font-size:18px;}

.title02 span{
font-size:15px}


.title03{
background:rgba(255,255,255,1);
font-size:17px;
padding:6px 1em;
}

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

.tategaki-copy-access-wrapper .tategaki-copy-access{
position:absolute;
margin-right:0;
margin-bottom:-0px
}



.tategaki-copy span {
font-size:clamp(16px, 2.3vw, 20px);
margin-left:6px;
line-height:1.2
}


.restaurant-main-title p{
font-size:18px}

.restaurant-main-title h2{
font-size:26px;
line-height:1.4}

.tategaki-title01 h3{
margin:0;
line-height:1.5;
font-size:26px}


.title01 span{
font-size:40px}


.tategaki-title02 p{
line-height:240%;
letter-spacing:3px;
font-size:16px}

.tategaki-title01 h2{
font-size:34px;
}

.tategaki-title01 span{
writing-mode: horizontal-tb;
width:200px;
text-align:center;
height:10px;
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
       }

.title-hakkaku{
width:240px;
height:240px;
padding:34px;
}


.title-hakkaku p{
font-size:24px;}


}


/**テーブルやリスト各種**/


.table-step{
width:100%;
}

.table-step td{
border:solid 1px white;
padding:6px 12px;
color:white}

.table-step th{
border:solid 1px white;
border-bottom:solid 1px #464951;
text-align:center;
line-height:1.5;
background:white;
min-width:160px;
}

.table-step-flow{
width:100%;
min-height:100px;
min-width:100px;

display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}

.table-step-num{
line-height:1;
margin-bottom:5px;
text-align:center;
font-size:18px;
font-style:italic}

.table-step-num span{
font-style:italic}


@media screen and (max-width: 993px){
.table-step td,.table-step th{
display:block;
width:100%;}
.table-step-flow{
width:100%;
min-height:0;
padding:10px}

}

.price-table {
width:100%;}

.price-table th,.price-table td{
padding:5px 0;
font-weight:normal}

.table1{
width:100%}

.table1 td{border:1px solid #464951;
padding:18px;
min-width:60px;
line-height:1.5;}

.table1 th{
padding:18px;
line-height:1.5;
font-weight:normal;
border:1px solid #464951;}




.table2{
width:100%;
border-bottom:1px solid #464951;
margin:0 auto;}

.table2 th{
padding:2em 0;
font-weight:normal;
width:240px;
border-top:1px solid #464951;
vertical-align:top;}

.table2 td{
padding:2em 0;
font-weight:normal;
border-top:1px solid #464951;
vertical-align:top;}


.table3{
width:100%}

.table3 td{border:1px solid #464951;
padding:12px;
min-width:60px;
line-height:1.5;
}

.table3 th{
padding:12px;
line-height:1.5;
font-weight:normal;
border:1px solid #464951;;}

.table3.white td,.table3.white th{
color:white;
border:white solid 1px}

.table-white td,.table-white th{
color:white;
border-top:none;
border-bottom:solid white 1px;
padding:1.5em 2.5em;}

.table-white th{
border-right:1px white solid;
vertical-align:middle}

.table-white{border:none}

.table-white tr{
border-bottom:solid white 1px}

.list1{
padding-left:0;
margin-left:1em;}


.list1 li{
padding-left:0;
    text-indent: -1em;
line-height:1.5;
margin:5px 0}

.list2{
text-align:center;}

.list2 li{
letter-spacing:6px;
display:inline-block;
color:#228B22;
padding:10px 20px;;
border:solid #228B22 1px;
border-radius:20px;
margin:8px;}


@media (max-width: 768px) {



.table1 td{
padding:12px;
width:100%;
display:block;}

.table1 th{
padding:12px;
width:100%;
display:block;
border-bottom:none;}



.table2{
border-bottom:none;
border-top:1px solid #cccccc;}

.table2.table-white th,.table2.table-white td{
border:none}

.table2.table-white{
border:none}

.table2 th{
width:100%;
border:none;
display:block;
padding:1em 0 0 5px;

}

.table2 td{
padding:10px 5px;display:block;width:100%;
width:100%;
border-top:none;
line-height:1.6;
border-bottom:1px solid #cccccc
}




}


/**SNSモーダル**/


.menu-sns{
display:inline-block;
font-size:30px;
margin:0em 0.5em;
text-align:center;
transition-duration:0.2s;
opacity:1}

.menu-sns:hover{
transform:scale(1.2);
transition-delay:0s!important;}

.mordal-sns h3{
  display:flex;
  align-items: center;       /* テキストとアイコンを上下中央揃え */
  justify-content: center;   /* 全体を中央に配置 */
  text-align: center;
  gap: 0.5em;
margin-bottom:1em;
}

.mordal-sns h3 img{
width:60px;
margin-right:10px}

.mordal-sns h3 i{
font-size:60px;
 line-height: 1;
  vertical-align: middle;
}

.mordal-sns h3 svg{
width:60px;height:auto;}


.mordal-sns h3 svg .st0{fill:red
}


.mordal-sns-btn{
color:#464951;
border:solid 1px #464951;
background:white;
position:relative;
width:100%;
text-align:center;
border:radius:50px;
display:inline-block;
padding:10px 20px;
}


.mordal-sns-btn:hover{
background:#464951;
color:white}


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

.mordal-sns h3{
font-size:19px;
text-align:left;}

.mordal-sns h3 img{
width:40px;}

.mordal-sns h3 i{
font-size:40px;
}

.mordal-sns h3 svg{
width:40px;height:auto;}



}



/**デリバリーページ**/

.delivery-area{
border:solid 1px;
}

.delivery-area h3{
font-size:18px;
padding:4px 1em;
margin:0;}

.delivery-area ul{
margin:0;
padding:1em;
  display: flex;
  flex-wrap: wrap;         /* 折り返し許可 */
  gap: 0.5em 1em;          /* 縦 横の隙間 */
  margin: 0;
  padding: 1em;
  list-style: none;        /* 必要ならリストマーカー消す */}

.delivery-area li {
  position: relative;
}

/* 各 li の後ろにスラッシュを表示（最後の li を除く） */
.delivery-area li:not(:last-child)::after {
  content: "／";
  margin-left: 0.5em;
}


/**飾り**/

.banner-panel{
display:inline-block;
position:relative;}


.banner-panel p {
color:white;
font-weight:bold;
position:absolute;
top:0;bottom:0;
left:0;right:0;
margin:auto;
background:  rgba(70,73,81,0.8);
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
font-size:20px;
transform:scale(1,0.5);
opacity:0;
transition-duration:0.2s;
}

.banner-panel:hover p{
transform:scale(1);
opacity:1;}


.line-height15{
line-height:1.5}

.box-shadow{
box-shadow:1px 1px 7px silver;}

.sticky-box{
  position: sticky;
  top: 100px;}

.block-text {
  display: flex;   /* 念のため強制 */
  flex-wrap: wrap;
  gap: 0.6em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.block-text li {
  padding: 0.4em 0.8em;
  border-radius: 4px;
  font-size: 0.9em;
letter-spacing:3px;
}


.link-border {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding-bottom: 2px; /* テキストと下線の間に余白 */
}

/* 通常のベースライン（文字色に追従できるようにカスタムプロパティを使う） */
.link-border::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-color, #464951);
}

/* ホバー時のアニメーション線 */
.link-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: auto;
  width: 0;
  height: 1.2px;
  background-color: #C90216; /* ホバー時の赤いライン */
  transition: width 0.3s ease, left 0.3s ease;
}

/* ホバーでアニメーション線が左から伸びる */
.link-border:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

/* 白文字対応（.white クラスが付いた場合にベースラインも白に） */
.white.link-border {
  --border-color: white;
  color:white!important
}


.text-exlarge{
font-size:clamp(19px, 1.7vw, 28px);
text-align:left;}

.text-exlarge2{
font-size:clamp(24px, 2.6vw, 36px);
text-align:left;}

.text-large{
font-size:23px;
line-height:1.5}

.text-small{
font-size:14px;}

.image-right-side{
height:100%;
width:100%;
display:block;
position:relative;
aspect-ratio:1/1;
}

.image-right-side img{
width:50vw;
height:100%;
max-width:1200px;
object-fit:cover;
position:absolute;
bottom:0;
left:0;}


.image-left-side{
height:100%;
width:100%;
display:block;
position:relative;
aspect-ratio:1/1;
}

.image-left-side img{
width:50vw;
height:100%;
max-width:1200px;
object-fit:cover;
position:absolute;
bottom:0;
right:0;}

.image-left-side-radius img{
border-radius:0px 20px 20px 0px}


.image-right-side-radius img{
border-radius:20px 0px 0px 20px}




.image-right-side{
height:100%;
width:100%;
display:block;
position:relative;
aspect-ratio:1/1;
}

.image-left-side img{
width:50vw;
height:100%;
max-width:1200px;
object-fit:cover;
position:absolute;
bottom:0;
right:0;}




.basic-link{
position:relative;
padding-bottom:7px;
}

.basic-link-white::before{content:"";
background:white}

.basic-link::before{content:"";
   width:100%;
   height:1.5px;
   background-color:#464951;
   position:absolute;
   bottom:0px;
   left:0px;right:0;
margin:auto;
transition-duration:0.2s}

.basic-link-white::before{content:"";
background:white}


.basic-link::after{content:"";
   width:0%;
   height:2px;
   background-color:black;
   position:absolute;
   bottom:0px;
right:0;
z-index:9;
transition-duration:0.3s;

transform-origin:left;}

.basic-link:hover::after{
transition-duration:0.3s;
width:100%;
left:0;}



.delay-1{transition-delay:0:5s!important;
animation-delay: 2.5s!important;}
.delay-2{transition-delay:1s!important;
animation-delay: 1s!important;}

.aspect1216{
height:auto;
width:100%;
aspect-ratio:12/16;
object-fit:cover}

.aspect1606{
height:auto;
width:100%;
aspect-ratio:16/6;
object-fit:cover}

.aspect1607{
height:auto;
width:100%;
aspect-ratio:16/7;
object-fit:cover}

.aspect1608{
height:auto;
width:100%;
aspect-ratio:16/8;
object-fit:cover}

.aspect1609{
height:auto;
width:100%;
aspect-ratio:16/9;
object-fit:cover}

.aspect1610{
height:auto;
width:100%;
aspect-ratio:16/9;
object-fit:cover}

.aspect1611{
height:auto;
width:100%;
aspect-ratio:16/11;
object-fit:cover}


.aspect1612{
height:auto;
width:100%;
aspect-ratio:16/12;
object-fit:cover}

.aspect11{
height:auto;
width:100%;
aspect-ratio:1/1;
object-fit:cover}

.aspect3530{
height:auto;
width:100%;
aspect-ratio:35/30;
object-fit:cover}


.square-image{
aspect-ratio:10/10;
object-fit:cover}


.bg-white{
background:white}

.bg-red{
background:#C90216}



.bg-gray{
background:#EFEFEF;}

.bg-bluegray{
background:#949F9E!important;}

.bg-deepgray{
background:#464951}


.bg-kasugablue{
background:#81999B}

.bg-yellow{
background:#FFF100;}

.hidden{overflow:hidden;
}


.radius20{
border-radius:20px;
}



.room-info-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}


.room-info-text {
  flex: 1 1 auto;
  margin-right: 1em;
}

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

  .room-info-line {
    flex-direction: column;
    align-items: flex-start;
  }

  .room-info-line .btn3 {
    align-self: flex-end;
    margin-top: 0.5em;
  }


.block-text li {
  padding: 0.5em 0.5em;
  border-radius: 4px;
  font-size: 0.8em;
letter-spacing:3px;
}

.container-slide-image{
overflow:hidden}

.image-left-side{
height:100%;
width:100%;
display:block;
position:relative;
aspect-ratio:16/12;
}

.image-left-side img{
width:calc(100vw - 40px);
height:100%;
object-fit:cover;
left:-40px}


.image-right-side{
height:100%;
width:100%;
display:block;
position:relative;
aspect-ratio:16/12;
}

.image-right-side img{
width:calc(100vw - 40px);
height:100%;
object-fit:cover;
right:-40px}


.text-large{
font-size:20px;
line-height:1.5}

.text-small{
font-size:13px;}



}





/**フェードインアニメーション**/





/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:100%;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }


@keyframes line-anime{
  0%{
height:0;
  }
  100%{
height:100%;
  }
}

@keyframes line-anime2{
  0%{
height:0;
  }
  100%{
height:20%;
  }
}

@keyframes slidein {
  from {
opacity:0;
   transform : translate(0, 150px);
  }

  to {
opacity:1;
    transform : translate(0, 0px);
  }
}



@keyframes fadeIn {
  0% {
    opacity: 0;
filter: blur(4px);
transform:scale(1.4) translateY(20%)
  }

  40% {
    opacity: 0.1;
filter: blur(2px);
transform:translateY(18%)
  }

  60% {
    opacity: 0.5;
filter: blur(0px);

  }

  100% {
    opacity: 1;
filter: blur(0px);
transform:scale(1.0)
  }
}


@keyframes fadeIn2 {
  0% {
    opacity: 0;
filter: blur(4px);
transform:scale(1.3) translateY(10%)
  }

  30% {
    opacity: 0.1;
filter: blur(2px);

  }

  50% {
    opacity: 0.5;
filter: blur(1px);
transform:translateY(-30%)
  }

  100% {
    opacity: 1;
filter: blur(0px);
transform:scale(1.0) translateY(-50%)
  }
}




.fadein{ 
 animation: fadeIn 1.8s ease 0s 1 normal;}

.fadein2{ 
 animation: fadeIn2 1.8s ease 0s 1 normal;}

@keyframes rotate {
  from {
transform: rotatez(-40deg) ;
  }

  to {
transform: rotatez(0deg) ;
  }
}

@keyframes spin {
  from {
transform: rotatey(180deg) ;
  }

  to {
transform: rotatey(0deg);
  }
}


@keyframes spin2 {
  from {
transform: rotatey(180deg) ;
  }

  to {
transform: rotatey(0deg);
  }
}


h1.fadeout-active{
opacity:0;
transform:scale(0.4);
    transition : all 1300ms;
transition-delay:10ms}


p.fadeout-active{
opacity:0;
transform:scale(0.4);
    transition : all 1300ms;
transition-delay:10ms}


img.fadeout-active{
opacity:0;
transform:scale(0.4);
    transition : all 1300ms;
transition-delay:10ms}

div.fadeout-active{
opacity:0;
transform:translateY(-7%);
transition-duration:0.6s}


.fade {
    opacity : 0.0;
    transform : translate(0, 100px);
    transition : all 1200ms!important;
}

.fade3 {
    opacity : 0.0;
    transform : translate(0, 100px);
    transition : all 1200ms;
}


.fade.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}


.fade3.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}



.fade2 {
    opacity : 0;
　　　transform : translate(0, 0);
    transition : all 900ms;
transition-delay:0.3s
}


.fade2.scrollin2 {
    opacity : 1;
    transform : translate(0, 0);
}

.slidein {
 animation: slidein 2s ease 0s 1 normal;
}


.slide-right{
z-index:0;
transform: translateX(5%);
}

.slide-left{
z-index:0;
transform: translateX(-5%);
opacity:0
}

.slide-bottom{
z-index:0;
transform: translateY(50%);
}

.spin{
transform: rotatey(90deg) ;}


.spin2{
transform: rotatex(90deg) ;}

.poyoyon.fade3,.poyoyon.fade2{
transition-delay:0s!important;
transform:translate(0,0);}


.poyoyon.scrollin2,.poyoyon.scrollin{  animation: poyoyon 1.0s ease-in-out forwards;
transform}


@keyframes poyoyon {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
oapacity:0;
  }
  15% {
    transform: scale(0.98, 0.85) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
opacity:1;
  }
  50% {transform: scale(0.98, 1.06) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
 




/**YouTube**/

.youtube-box{
position:relative;}


.youtube-box iframe{
width:100%;
height:100%;
aspect-ratio:16/9;
object-fit:cover;}




/**お客様の声**/

.voice-slider{
padding-bottom:3em;}

.voice-slider .swiper-slide{
padding:1em}

.voice-card{
display:block;
height:100%;
background:white;
padding:0;
text-align:center;
box-shadow:1px 1px 5px gray;
padding:1.5em;
border-radius:10px;
}

.voice-card:hover{
transform:scale(1.03);
box-shadow:1px 1px 6px silver}


.voice-card-group{
text-align:center;
border-radius:50px;
line-height:1.5;
padding:5px 1em;}

.voice-card-group a{
font-size:14px;
line-height:1.5}


.voice-card-title{
font-size:clamp(16px, 1.2vw, 17px);
min-height:90px;
line-height:1.5;
text-align:left;
padding:0.5em 0.5em;
margin:0 0 0px 0;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}

.voice-card-exp{
font-size:15px}

.voice-slider .swiper-button-next{
right:-3em}

.voice-slider .swiper-button-prev{
left:-3em}


.voice-slider .swiper-pagination-bullet{
background:rgba(255,255,255,0.4)}

.voice-slider .swiper-pagination-bullet-active{
background:white}


.voice-slider .swiper-pagination{
bottom:-2em}

.readmore-link{
font-size:14px}


@media screen and (max-width: 993px){
.container-voice{
padding:0}

.voice-card-exp{
font-size:14px;}
}



/**お知らせアーカイブ**/

.information-normal-list{
width:auto;
margin:auto;}

.information-normal{
width:100%;}

.information-top .information-normal-link {
  display: flex;
  color: inherit;
padding:12px 0;
border-bottom:1px solid white;
gap:0em
}

.information-archive{
padding-top:1em;padding-bottom:1em;
border-bottom:1px solid white;
cursor:pointer
}

.information-archive:hover{
background:rgba(25,25,25,0.2)}

.information-normal-link:hover{
background:rgba(25,25,25,0.2)}

.information-normal-meta {
  text-align:left;
padding:0;
}

.information-top .information-normal-meta{
padding:0;
  display: flex;
  align-items: center;  /* ← 上下中央揃え */
  gap: 0em;           /* ← span 同士の間隔（必要に応じて調整） */
  flex-wrap: wrap;      /* ← タグが多いときの折返し対策（任意） */}

.information-normal-meta span {
  display: inline-block;
  vertical-align: middle;
}


.information-normal-cat{
border:solid 1px;
min-width:220px;
text-align:center;
font-size:14px;
padding:4px 12px;
transition-duratioh:0.2s}

.information-normal-cat{
margin-right:12px;}


.information-normal-cat:hover a{
color:#464951}


.information-normal-date{
display:inline-block;
min-width:110px;
font-size:14px}

.information-normal-title {
  width: auto;
  padding: 0.5em 0;
  padding-bottom:0;
  text-align:left;
}


.information-simple .information-normal{
width:auto!important;
border-bottom:1px solid #949F9E;
padding:10px 0;}


.information-simple .information-normal:hover{
background:rgba(25,25,25,0.1)}



@media (max-width: 992px) {
  .information-normal-link {
    flex-direction: column;
    gap: 0; /* gapを消すことで縦並びに隙間が出すぎるのを防げる */
  }
  .information-normal-meta{
      padding-bottom:0;
  }
  
  .information-normal-cat{
border:solid 1px;
min-width:190px;
text-align:center;
font-size:13px;
padding:2px 10px;
transition-duratioh:0.2s}

  
  .information-normal-title {
    width: 100%;
    min-width: auto;
    padding: 0.5em 0; ;
    padding-top:2px;
  }

  .information-normal-title{
font-size:15px;
padding-bottom:0}

  .information-normal-cat,{
    min-width: auto;
    display: inline-block;
    width: auto;
    text-align: left;
  }

  .information-normal-date {
    min-width: auto;
    display: inline-block;
    width: auto;
    text-align: left;
min-width:100px
  }
}

/**投稿・お知らせブログページテキスト設定**/

.meta-info{
background:#949F9E;
padding: 0 1em;
color:white;
margin-bottom:12px;
border-radius:50px;
margin-right:12px}

.meta-info a{
color:white}



.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
  font-family: "Shippori Mincho", serif;}
  
  pre.wp-block-verse{
  font-family: "Shippori Mincho", serif;}


.wp-block-button__link{
padding:10px 1em}

.wp-block-button__link{
color:white;
background:#464951;
border:solid 1px #464951}

.wp-block-button__link:hover{
background:white;
color:#464951;}

.loop-wrap{
position:relative;}

.loop-layout:hover .loop-photo-wrap img{
transform:scale(1.06)}

.loop-photo-wrap{
position:relative;
overflow:hidden;
aspect-ratio:1/1}

.loop-wrap img{
transition-duration:0.2s;}

.loop-wrap:hover img{
transform:scale(1.05);
transition-duration:0.2s}

.loop-photo-wrap img {
  height: 100%;
  object-fit: cover;
  transition-duration: 0.2s;
}



.wp-block-embed-youtube iframe{
width:100%;
height:100%;
aspect-ratio:16/9;
object-fit:cover;}

.single-eye{
display:block;
width:100%;
margin:auto;
margin-bottom:2em}



.single-contents h2{
padding-left:20px;
position:relative;}

.single-contents h2::before{content:"";
   width:5px;
   height:100%;
   background-color:#53B59E;
   position:absolute;
   bottom:0px;
   left:10px;
transition-duration:0.5s}

.day-hyouki{
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
background:rgba(25,55,55,0.3);
position:absolute;
height:100%;
width:100%;
}

.day-hyouki span{
font-size:35px;
font-family: 'Roboto', sans-serif;
font-weight:bold;
color:#DDDDDD}

.day-hyouki-top span{
font-size:28px;
font-family: 'Roboto', sans-serif;
font-weight:bold;
color:#DDDDDD}

.loop-text{
padding:5px;
transition-duration:0.2s}

.loop-layout{border-bottom:solid 1px transparent;
padding-bottom:1em;
transition-duration:0.2s}

.loop-layout:hover .loop-photo-wrap img {
  transform: scale(1.06);
}


.eye-catch{
position:relative;
overflow:hidden}

.blog-info-box{
background:#EEEEEE;
padding:20px}





.next-prev-wrap{
margin-top:30px;}



.next-prev a{
font-size:15px;
display:block;
min-height:80px;
padding:1em;
background:#464951;
color:white;
font-weight:bold;
position:relative;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}


.next-prev-prev a{
padding-left:38px;}

.next-prev-next a{
padding-right:38px;}


.next-prev-prev a::before{content:" \f053 ";
font-size:14px;
font-family: "Font Awesome 5 Free";
height:20px;
   position:absolute;
   bottom:0px;top:0;
   left:10px;
margin:auto;
transition-duration:0.2s}

.next-prev-next a::before{content:" \f054";
font-size:14px;
font-family: "Font Awesome 5 Free";
height:20px;
   position:absolute;
   bottom:0px;top:0;
   right:10px;
margin:auto;
transition-duration:0.2s}




.next-prev a:empty {
  display: none;
}

.next-prev a:hover{
background:white;
color:#464951;
transition-duration:0.2s}


.single-contents{
margin-top:2em;
max-width:1200px
}

.post-meta{
}

.post-meta p{
font-size:13px}

.post-meta a{
font-size:13px}

.post-meta span{
display:inline-block}


.single-title-box{
border-bottom:solid 1.0px #464951;
padding-bottom:1em}

.single-title{font-size:26px;}




.media-heading{line-height:20px!important;
font-size:16px!important}

.wp-block-preformatted{
background:#EEEEEE;
padding:1em;
margin-top:1em;
font-size:100%;
  font-family: "Shippori Mincho", serif;
}

.blog-text h2{position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 3px white;
padding: 0.2em 0.5em;
color: #555555 	;}

.blog-text h3{position: relative;padding-bottom:10px}

.blog-text h3:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: -webkit-repeating-linear-gradient(-45deg,  #339933,  #339933 2px, #fff 2px, #fff 4px);
background: repeating-linear-gradient(-45deg,  	#339933,  	#339933 2px, #fff 2px, #fff 4px);
border-bottom:none;
}


.wp-block-image img{
max-width:100%;
height:auto;
}


.entry-body{
padding-top:30px;
}

.entry-body h2,.entry-body h3{
font-size:22px;}

.entry-body h4,.entry-body h5,.entry-body h6{
font-size:18px;}


.entry-body a{
position:relative;
display:inline-block;
}




.entry-body figcaption{
font-size:14px;
margin-bottom:30px;
}



.infolist:hover{
transition-duration:0.2s;
background:rgba(25,25,25,0.1)}



.entry-title{
font-size:18px;
margin:0;
 font-family: "Hiragino Sans";}


.entry-body img{
width:auto;
object-fit:cover}

.loop-date{
color:#666666;
font-size:14px;
display:inline-block;
}

.loop-cate{
background:rgba(0,149,96,0.12);
font-size:14px;
padding:2px 5px
}


@media screen and (max-width:768px) {
.entry-title{
font-size:15px;
margin-top:8px}

.entry-body{
padding-top:30px;
}

.entry-body h2,.entry-body h3{
font-size:20px;}

.entry-body h4,.entry-body h5,.entry-body h6{
font-size:18px;}


.single-title{font-size:20px;}


.entry-body a::before{content:"";
   width:16px;
   height:16px;}

}






/*アコーディオンQA*/


.accordion-box{
border-bottom:solid 1px silver;
padding:0px 0}

.accordion-box-first{
border-top:solid 1px silver;}

.accordion-box span{
color:black;
font-size:38px;
position:absolute;
left:0;
top:0;bottom:0;
vertical-align:middle;
margin:auto;
  font-family: "octbre";}



.accordion-title {
font-size:18px;
    position:relative;
    cursor:pointer;
    padding-left:50px;
    padding-right:30px;
    padding-top:20px;
    padding-bottom:20px;
    vertical-align:middle;
}

.accordion-title::before{content:"";
   width:14px;
   height:1px;
   background-color:#464951;
   border-radius:10px;
   position:absolute;
   bottom:0px;top:0;
 right:10px;
 margin:auto;
 transform:rotate(45deg);
transition-duration:0.6s}

.accordion-title::after{content:"";
   width:14px;
   height:1px;
   background-color:#464951;
   border-radius:10px;
   position:absolute;
   bottom:0px;top:0;
 right:0px;
 margin:auto;
 transform:rotate(-45deg);
transition-duration:0.6s}

.accordion-title.open::before{
 transform:rotate(-40deg);}

.accordion-title.open::after{
 transform:rotate(40deg);}


.accordion-sub_menu {
    display:none;
    margin:0;
    padding:0px;
    list-style:none;
    min-height:10px;
}

.accordion-sub_menu a{
color:#924C94;
font-weight:600;}

.accordion-sub_menu li  {
min-height:50px;
position:relative;
    display:block;

padding:13px 50px 20px  50px;
   margin:0;
    text-decoration:none;
}


.accordion-sub_menu .list1 li{
min-height:0!important;
padding-left:30px;
padding-bottom:6px}



.qa-icon{ 
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}


@media screen and (max-width: 992px){
.accordion-title {
font-size:15px;
line-height:1.5;
padding-left:40px;
font-weight:normal;
}

.accordion-sub_menu li{
padding:18px 20px 10px  40px;
margin-top:0px;
margin-bottom:12px;}

.accordion-box span{
font-size:24px;
  font-family: "octbre"!important;}

.qa-icon2{ 
padding-top:10px;
}


.accordion-sub_menu .list1 li{
min-height:0!important;
padding-left:28px;
padding-bottom:0px;
margin:0}



}






/****Googleマップ・交通アクセス***/


.gmap{
width:100%;
height:100%;
min-height:300px;
position:relative;
aspect-ratio:16/8;
}

.gmap iframe{
display:block;
width:100%;
height:100%;
object-fit:cover;

}


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

.gmap iframe{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

}






/**宴会予約フォーム**/

.flatpickr-day.nextMonthDay{
color:rgba(57,57,57,0.7)!important}




.tel-card .btn-hakkaku{
width:40%;
max-width:90px}

.tel-card a{
width:auto;
	font-size:clamp(15px, 1.6vw, 20px);
letter-spacing:4px;
width:60%
}

.tel-card .btn-hakkaku-mark{
background:#949F9E}




div#nk_errors_w {
    position: fixed;
    bottom: 0%;
    left: 0;
    right: 0;
width:100%;
margin:auto;
z-index:999;
  background-color: rgba(220, 53, 69, 0.9); /* Bootstrap Danger の赤に近い */
  backdrop-filter: blur(3px); /* 背景ぼかし（オプション） */
opacity: 1;
  transition: opacity 0.5s ease;}

div#nk_errors {
    width: 400px;
    max-width: 100%;
    margin: auto;
}


div#nk_errors ul{
margin:0;}

div#nk_errors li{
line-height:1.5;
color:white;
font-size:18px;
text-align:center;}

div#nk_errors ul li:first-child {
  margin-top: 1em;
}

div#nk_errors ul li:last-child {
  margin-bottom: 1em;
}




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

.tel-card a{
width:auto;
	font-size:clamp(16px, 2.3vw, 18px);
letter-spacing:4px;
width:100%;
}

.tel-card .btn-hakkaku p{
	font-size:clamp(13.5px, 1.5vw, 18px);
padding:5px}

}


@media screen and (max-width: 768px){
.tel-card {
max-width:300px;

  align-items: center;        /* 垂直方向中央 */
  justify-content: center;    /* 水平方向中央 */
  gap: 1em;    
}

.tel-card .btn-hakkaku{
width:30%;
max-width:90px}

.tel-card a{
width:auto;
font-size:18px;
width:auto;
  margin-right: auto;
}

div#nk_errors li{
padding:0.0em 0.6em;
color:white;
font-size:15px;}

div#nk_errors ul li:first-child {
  margin-top: 0.5em;
}

div#nk_errors ul li:last-child {
  margin-bottom: 0.5em;
}

}


/*問い合わせコンタクトカスタマイズ*/

.contact-block{
padding:3em;
margin:auto;
box-shadow:1px 1px 5px silver;
}


.soushin-box{
text-align:right;
margin-top:1.5em}


.soushin-box p{
display:inline-block}


/*リキャプチャ非表示recapchaa*/
.grecaptcha-badge { visibility: hidden; }

.recaptcha-text a{
font-size:12px!important;
font-family:sans-serif!important}

.recaptcha-text{
width:100%;
text-align:center;
font-size:12px!important;
font-family:sans-serif!important;}



.contact-plivacy-check{
border-bottom:1.5px solid;
padding-bottom:6px;
font-weight:bold;
padding-left:10px;}

.contact-plivacy-check:hover{
color:#AD1703}

.contact-tel{
background: black;
color:white;
border-radius:50px;
display:inline-block;
padding:8px 2em;
font-size:15px;
}


.contact-tel-num{
vertical-align:middle!important}



.contact-tel span{
vertical-align:middle;
display:inline-block}


.contact-tel i{
vertical-align:middle;
display:inline-block;
padding-top:5px;
height:100%;}

.contact-tel a{
font-size:150%;
display:inline-block;
color:white;
  vertical-align:top;}

.contact-tel i{
margin:0 1em}


.contact input{
			font-size:17px!important;
width:100%;
border:solid 1px #464951;
padding:0 8px;
  font-family: "Shippori Mincho", serif!important;
}

.contact select{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Chrome, Safari */}

.contact p{
font-size:16px;
font-weight:bold;
font-weight:normal;
letter-spacing:0.1em}

.contact th, .contact td { 
line-height:2;

}

.contact{
display: table;
width:100%;
margin:0;}

.contact-last{
border-bottom:}

.contact dt{
position:relative;
  width: 24%;padding-right:1em;
min-width:300px;
padding:16px 24px 16px 0;
display: table-cell;
    vertical-align: middle;
text-align:right;
}

.contact dd{
  width: 76%;
margin-bottom:0;
padding:16px 0;
display: table-cell;
    vertical-align: middle;
}


.taiken-naiyou{
width:100%;
}

.taiken-naiyou select{
border:none}

.taiken-naiyou-top{
margin-bottom:1em}

.taiken-naiyou dt{
float:left;
  width: 35%;
display:inline-block!important;
}

.taiken-naiyou dd{
float:right
  width: 65%;
display:inline-block!important;
}

.wpcf7-form-control{
height:40px;
width:100%;
}



.soushin-wrapper{
display:flex;
justify-content: flex-end;
margin-top:30px}


.soushin-kakunin{
margin-right:20px}

.soushin-kakunin span{
margin:0}

.soushin{
display:inline-block;
position:relative;
}

.soushin input{
display:inline-block;
margin-right:-72px;
 font-family: "higure"!important;
font-size:16px!important;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
border:2px solid black;
border-radius:50px;
background:white;
line-height:1.5;
transition-duration:0.2s;
color:black;
padding:0 60px 0 20px;
letter-spacing:2px!Important;
position:relative;
}


.soushin::before,
.soushin::after {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 20px;
  background-color: black;
  position: absolute;
  bottom: 20px;
  right: 1.4em;
  margin: auto;
  transition-duration: 0.3s;
  z-index: 99;
}

.soushin::before {
  transform: translateY(4px) rotate(-46deg);
}

.soushin::after {
  transform: translateY(-2px) rotate(46deg);
}


.soushin:hover::before,.soushin:hover::after{
background:white;
transition-duration:0.3s}

.soushin:hover::before{content:"";
  transform:translateY(3px) rotate(-32deg);
  right:1.3em;
transition-duration:0.3s}

.soushin:hover::after{content:"";
  transform:translateY(-2px) rotate(32deg);
  right:1.3em;
transition-duration:0.3s}


.soushin:hover input{
background:black;
color:white
}

.contact .wpcf7-select{
	text-indent: 0.01px;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
color:#464951;
background:white;
border-radius:0px;
padding:0 10px;
font-size:16px;
border:solid 1px #464951;
width:100%!Important
}


.contact .wpcf7-checkbox {
border:none!important;
}

.contact .wpcf7-checkbox input{
border:none}

input{font-family:sans-serif!important;}

.contact .wpcf7-textarea{
padding:8px;
min-height:120px;
border:solid 1px #464951;
font-size:16px!important}


/* 必須ピンク */
.required-srt{
   
    padding: 5px;
    background:#D5625D;
font-size:90%;
    padding: 2px 10px;
    color: #fff;
    margin-left:10px
}

/* 必須グレー */
.unrequired-srt {

    padding: 5px;
    background:gray;
font-size:90%;
    padding: 2px 10px;
    color: white;
    margin-left:10px

}

/* Contact Form 7のラジオボタンを縦並びに　class:list-blockをclass指定する */
.list-block .wpcf7-list-item {
    display: block;
}

.wpcf7-list-item {
padding-right:1.2em
}


.wpcf7-list-item.first{
}

.wpcf7-checkbox{padding:0; margin:0;}

.recaptcha { /* recaptchaに余白 */
    margin: -10px 0 20px 0;
}

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

.contact dt{
display:block;
  width: 100%;
margin-bottom:0px;
position:relative;
  box-sizing: border-box;
text-align:left;
min-width:0
}

.required-srt,.unrequired-srt{
position:absolute;
right:0;
}

.contact dd{
display:block;
  width: 100%;
margin-bottom:2em;
padding:0}


}

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

.required-srt,.unrequired-srt{
line-height:1.5;
bottom:8px
}

.contact dt{
padding-top:0}

.contact-block{
padding:1.5em}

.unrequired-srt{
right:0}

.contact-tel span{
display:block;
font-size:14px}

.contact-tel{
padding:1em;
width:100%;
max-width:400px;
border-radius:20px}

.contact-tel i{
display:block;
margin:10px 0 6px 0;
transform:rotate(90deg)}







 /* 段組切り替え画面サイズ*/
.contact{
  display: block;
  flex-wrap: wrap;}


.required-srt{
right:0}

.contact dt{
position:relative;
margin-bottom:0px;
position:relative;
padding-bottom:6px;
  box-sizing: border-box;
white-space: normal;
}

.contact dd{
  width: 100%;
margin-bottom:1em;
padding:0}



.wpcf7-not-valid-tip{
font-size:14px;
margin-top:5px;
}

.soushin{
font-size:18px!important;
max-width:100%;
margin-top:20px;}


.soushin-kakunin p{
text-align:center}


.soushin-wrapper{
display:block;
text-align:center;
margin-top:20px}


}





/* チェックボックスデザイン */

.contact-checkbox input {
    margin: 0;

    background: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
position:relative;
width:auto!important;
height:20px;;
display:inline-block;
border:none!important;
vertical-align:middle;
margin-bottom:5px;
padding-left:16px;
  }




.contact-checkbox input::before,
.contact-checkbox input::after {
    content: "";
    display: block; 
position:absolute;
left:0;
top:0;
    width: 20px;/*チェックボックスの横幅*/
    height:20px;/*チェックボックスの縦幅*/
        border-radius: 100%;
  }



.contact-checkbox input::before {
    background-color: white;
    border: solid 1px black;
margin:auto; }

.wpcf7-list-item{
margin:0!important;
position:relative!important}
 

.contact-checkbox input::after {
    background-color:black;
    border-radius: 100%;
    border: solid 1px black;
margin:auto;
opacity:0;
  }
 

.contact-checkbox input:checked::after{
    opacity: 1;/*チェック後表示*/
  }



/**フッターの予約ボタン**/
.footer-yoyaku {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 999;
  background-color: #C90216;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  /* visibilityはJSで制御するため削除 */
}

.footer-yoyaku p {
  margin: 0;
  color: white;
}

.footer-yoyaku.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


.footer-yoyaku-wrapper.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


.footer-yoyaku-wrapper{
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 999;
    opacity: 1;
  transform: translateY(60px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}



.footer-yoyaku-tenpo{background-color: #C90216;
  padding: 6px 16px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display:inline-block;
  line-height:1.5;
}

.footer-yoyaku-special{background-color: #C90216;
  padding: 6px 16px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
    display:inline-block;
      line-height:1.5;
}

.footer-yoyaku-wrapper span{
color:white}




/**フッター設定**/

.footer-tel{
	font-size:clamp(26px, 7.3vw, 34px);}

   .footer-access-white h2,  .footer-access-white p, .footer-access-white a, .footer-access-white span{
      color:#464951
  }
  
    .footer-access-white .title-white-box{
        background:#464951;
        color:white
    }
    
     .footer-access-white .title-white-box span{
         color:white!Important
     }


.footer-top{
  display: flex;
  align-items: center;
  justify-content: center;
background: linear-gradient(135deg, #4a4d52 0%, #2b2d31 100%);
  text-align: center;
  width: 100%;
  aspect-ratio: 18 / 6;
max-height:100px;
font-size:18px;
color:white;
position:relative;
z-index:1;
border-top:white solid 2px;
}

.footer-top-l::before{content:"";
   width:2px;
   height:100%;
   background-color:white;
   position:absolute;
   bottom:0px;
z-index:10;
right:0;
transition-duration:0.3s}


.footer-top span{
position:relative;
z-index:9;
color:white!important}




.footer-top:after{ content:"";
   width:0%;
   height:calc(100% - 0px);
   background-color:rgba(255,255,255,0.2);
   position:absolute;
   bottom:0px;
right:0;
transition-duration:0.3s;
opacity:0.3;
z-index:0;}

.footer-top:hover:after{ content:"";
   width:100%;
left:0;
opacity:1}

.footer-top svg{
width:42px;
object-fit:contain;
height:auto;
margin-bottom:6px;
margin-right:4px;
position: relative;
z-index:9;
 transition: none; /* ← アニメーションを無効にする */}

.footer-top .st0{
fill:white}




.footer-logo-wrapper{
text-align:center;}


.footer-logo{
max-width:260px;
aspect-ratio:16/8;
display:inline-block;
}

.footer-logo .head-logo-main{
opacity:1!important}


.footer-logo svg{
width:100%;
height:auto;
object-fit:contain;}

.footer-contact{
background: #E2E7ED;
width:100%;
position:relative;
padding-top:60px;
padding-bottom:60px;}




.fotter-contact-btn{
position:relative;
z-index:9;
border:solid #225EAD 1px ;
display:inline-block;
width:50%;
margin:1em;
padding:1em 0.5em;
border-radius:100px;

display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}


.fotter-contact-btn article{
width:100%;}

.fotter-contact-btn:hover{
background:white;}

.fotter-contact-btn:hover p{
color:#53B59E}


.footer-contact h2{
font-size:32px;}

.footer-contact h3{
font-size:32px;
text-align:center;
font-size:16px}


.footer-contact p{
color:#225EAD;
font-size:clamp(18px, 1.5vw, 22px);
text-align:center;}

.footer-contact-btn-tel{
font-weight:bold;
line-height:1.5;}

.footer-contact-btn-tel span{
font-size:13px;
font-weight:normal;
display:block;}

.footer-contact .container{
display: flex;
 justify-content:center;}

p.footer-contact-btn-button{
background:white;
color:#225EAD;
font-size:15px;
padding:2px 1em;
border-radius:50px;
margin-top:10px;
display:block;
width:90%;
max-width:240px;
margin:auto;}

.fotter-contact-btn:hover p.footer-contact-btn-button{
background:#53B59E;
color:white;}

.fotter-contact-btn:hover{
border:#53B59E 1px solid}

.siteFooter{
position:relative;

padding-bottom:60px;
}



.footer-copy{
width:100%;
text-align:center;

font-size:12px;
margin-top:40px;
padding:10px 0;
}

.footer-access{
background:#53B59E;
padding:2px 1em 0 1em;
display:inline-block;
border-radius:50px;
color:white
}

.footer-access:hover{
background:#BDE3DA;}



.footer-sub-btn{
margin:auto;
margin-top:1em
}

.footer-sub-btn a {
text-align:center;
padding:6px;
font-size:14px;
display:inline-block;
position:relative;margin-right:1em
}

.footer-sub-btn a::before{content:"";
   width:100%;
   height:1px;
   background-color:#949F9E;
   position:absolute;
   bottom:0px;
   left:0px;
transition-duration:0.3s;
}

.footer-sub-btn a::after{content:"";
   width:0%;
   height:1.5px;
   background-color:#464951;
   position:absolute;
   bottom:0px;
   right:0px;
transition-duration:0.3s;
}

.footer-sub-btn a:hover::after{
width:100%;
left:0}




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


.footer-sub-btn{
max-width:400px;
}

.footer-top,.footer-top a{
font-size:clamp(14.5px, 2.3vw, 18px);}

.footer-top svg{
width:24px;}


.footer-logo{
max-width:160px;
margin-top:2em
}

.siteFooter{
padding-bottom:00px;
}



.fotter-contact-btn{
position:relative;
z-index:9;
display:block;
width:90%;
max-width:360px;
margin:1em auto;
padding:1em 0.5em;
}


.footer-contact .container{
display:block}


.site-footer{
text-align:center;}


.footer-sns{
text-align:center;}



.footer-sns a{
font-size:32px;
display:inline-block;
margin:3px;
margin-top:0;
margin-bottom:10px
}

.footer-sns p{
display:block;
font-size:16px;
margin:0;}
.footer-copy{
width:100%;
font-size:12px;
margin-top:0px;
padding:10px 0;
}

.footer-copy{
font-size:min(2.5vw,14px);
text-align:center;
margin-top:2em;
margin-bottom:52px}

}


/**フッターメニュー**/





.footer-menu-title2 span{
color:white!important}




.footer-menu-main .sub-menu{
overflow:hidden;
 transition-duration:0.3s;
  max-height: 1500px;
opacity:1;
padding-left:0px;
}

.footer-menu-open .sub-menu{
  max-height: 1500px!important;
 transition-duration:0.3s;
opacity:1;
padding-bottom:16px;}


.footer-menu-main{
overflow:hidden;
max-width:400px;
margin:auto
}

.footer-menu-main span{
position:relative;
padding-right:18px}

.footer-menu-main span::before{content:"";
   width:800px;
   height:0.5px;
   background-color:#464951;
   position:absolute;
bottom:0;top:0;
margin:auto;
   left:100%;}



.footer-menu-main{
position:relative;}


.footer-menu-title a{
 cursor: default;}
 
 .footer-menu-title .sub-menu a{
 cursor: pointer;}


.footer-menu-main a{
position:relative;
display:block;
padding:0 0em 10px 0;
margin-bottom:10px;
}




.footer-menu-main .sub-menu a{
padding-left:0px;
margin-bottom:0;
padding-top:5px;
position:relative;
 cursor: pointer;
}

.footer-menu-main .sub-menu a::before{content:"";
   width:0%;
   height:0.5px;
   background-color:#464951;
   position:absolute;
   bottom:6px;
   right:0px;
transition-duration:0.3s}

.footer-menu-main .sub-menu a:hover::before{content:"";
   width:100%;
 left:0;}


.footer-menu-main .sub-menu li{
transition-duration:0.3s;
}


.footer-menu-main .sub-menu a{
posiion:relative;}



.footer-menu-main li{
font-size:20px;
}

.footer-menu-main .sub-menu{
  max-height:none;
opacity:1;
}



.footer-menu .sub-menu li{
font-size:15px;
position:relative;
padding-left:0px}

.footer-menu .sub-menu a{
c
font-size:14px}

.footer-menu-sub{
padding:0;
}

.footer-menu-sub a{
font-size:13px;
display:inline-block;
background:white;
border-radius:30px;
margin:10px;
padding:5px 15px;
}

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

.footer-menu-main span::before{
   width:0px;}




.footer-menu-main{margin-bottom:0px;}

.footer-menu-title{
padding-bottom:0px;
max-width:600px;
margin:auto;
position:relative;
}
 



.footer-menu-main a{
margin:0;
}

.footer-menu-main .sub-menu a {
    padding:5px;}

.footer-menu .footer-menu-title:before{
content:"";
   display:block;
border-radius:10px;
   width:1.5px;
   height:10px;
   background-color:#464951;
   position:absolute;
top:5px;
   right:5px;
transform:rotate(38deg);
transition-duration:0.5s
}

.footer-menu .footer-menu-title:after{
content:"";
   display:block;
border-radius:10px;
   width:1.5px;
   height:10px;
   background-color:#464951;
   position:absolute;
top:5px;
   right:11px;
transform:rotate(-38deg);
transition-duration:0.5s
}

.footer-menu-open.footer-menu-title:before{
transform:rotate(138deg);
}

.footer-menu-open.footer-menu-title:after{
transform:rotate(-138deg);
}

.footer-menu-sub{
text-align:center
}

.footer-menu-sub a{
margin:5px;
padding:2px 5px 
}

}






/**ボタン関係**/

.btn-panel{
position:relative;
display:inline-block;
width:100%;

display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}

.btn-panel img{
filter: brightness(0.95);
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
object-fit:cover;}

.btn-hakkaku{
display:block;
width:100%;
max-width:240px;
aspect-ratio:1/1;
margin:auto;
position:relative;
z-index:9;}

.btn-hakkaku-mark{
  width: 100%; 
  height: 100%;

  background: black;
  mask-image:url("/cmsmin/wp-content/themes/hassenkaku2025/images/icon/hakkaku-mark.svg");
mask-size:100%;
mask-repeat:no-repeat
}


.btn-hakkaku-white .btn-hakkaku-mark{
background:white}

.btn-hakkaku:hover .hakkaku-mark-inner{
transform:scale(1);
opacity:1;
}


.btn-hakkaku-active .hakkaku-mark-inner{
transform:scale(1);
opacity:1;
}



.hakkaku-mark-inner{
position:absolute;
top:0;
left:0;
  width: 100%; 
  height: 100%;
background: white;
  mask-image:url("/cmsmin/wp-content/themes/hassenkaku2025/images/icon/hakkaku-mark-inner.svg");
mask-repeat:no-repeat;
mask-size:100%;
transition-duration:0.2s;
transform:scale(0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden;
z-index:-1;
opacity:0;
}
.btn-hakkaku p{
padding:0 15px;
text-align:center;
font-size:18px;
line-height:1.5;
position:absolute;
width:100%;
height:100%;
display:block;
letter-spacing:3px;
top:0;
left:0;
z-index:-1;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
z-index:9;}

.btn-hakkaku span{
font-size:14px;
line-height:1.4;
display:inline-block;
margin-top:10px}


.btn-hakkaku-white p{
color:white}

.btn-hakkaku-white.btn-hakkaku:hover p{
color:#464951}

.btn-hakkaku:hover .btn-hakkaku p{
color:red!important}

.btn-hakkaku-active.btn-hakkaku-white.btn-hakkaku p{
color:#949F9E}


.mordal-btn{
cursor:pointer}

.btn1{
position:relative;
display:inline-block;
padding:8px 3.5em 8px 1.5em;
text-align:center;
letter-spacing:2px!Important;
z-index:96;
background: white;
overflow:hidden;
border:solid 1px black;
cursor: pointer;
}



.btn1-l{
position:relative;
display:inline-block;
padding:8px 1.5em 8px 3.5em;
}



.btn1 span::before{content:"";
   width:0%;
   height:100%;
background: #464951;
   position:absolute;
   bottom:0px;
   right:0px;
z-index:-1;
transition-duration:0.2s;
opacity:1;}



.btn1:hover span::before{content:"";
   width:100%;
left:0;
transition-duration:0.3s;
opacity:1}


.btn1::before{content:"";
    width:10px;
   height:2px;
border-radius:20px;
   background-color:#464951;
   position:absolute;
   bottom:3px;
top:0;
   right:1.4em;
margin:auto;
transform:translateY(5px) rotate(-46deg);
transition-duration:0.3s}


.btn1-l::before{content:"";
   right:auto;
   left:1.4em;
margin:auto;
transform:translateY(5px) rotate(46deg);}


.btn1::after{content:"";
   width:10px;
   height:2px;
border-radius:20px;
   background-color:#464951;
   position:absolute;
   bottom:3px;
top:0;
   right:1.4em;
margin:auto;
transform:translateY(-1px) rotate(46deg);
transition-duration:0.3s}


.btn1-l::after{content:"";
  right:auto;
   left:1.4em;
margin:auto;
transform:translateY(-1px) rotate(-46deg);
transition-duration:0.3s}

.btn1:hover{
color:white;}


.btn1:hover::before,.btn1:hover::after{
background:white;
transition-duration:0.3s}






.btn1:hover::before{content:"";
  transform:translateY(5px) rotate(-32deg);
  right:1.3em;
transition-duration:0.3s}

.btn1:hover::after{content:"";
  transform:translateY(0px) rotate(32deg);
  right:1.3em;
transition-duration:0.3s}



.btn1-l:hover::before{content:"";
  transform:translateY(5px) rotate(32deg);
right:auto;
  left:1.3em;
transition-duration:0.3s}

.btn1-l:hover::after{content:"";
  transform:translateY(0px) rotate(-32deg);
right:auto;
  left:1.3em;
transition-duration:0.3s}









.btn2{
display:inline-block;
min-width:260px;
text-align:center;
color:white;
border:solid white 1px;
padding:5px 2em;
line-height:2.5;
transition-duration:0.2s;
background:rgba(70,73,81,0.0);
position:relative;
z-index:5;
cursor: pointer;
}

.btn2-overlay{
background:rgba(70,73,81,0.7);}



.btn2-border{
border:solid 1px #1F1520;
color:#1F1520;
background:white;}


.btn-border{
color:#1F1520;
background:white!important;
}

.btn2-border:hover{
color:white;
background:black}


.btn2-restaurant{
border:solid 1px #464951;
background:white;
color:#464951!important;
border-radius:50px;
overflow:hidden;
}

.lunch-box-header .btn2-restaurant,.course-box-header .btn2-restaurant{
background:rgba(255,255,255,0.8)}

.btn2-restaurant2{
border:solid 1px #FFF100;
background:#FFF100;
color:#464951!important;
border-radius:50px;
overflow:hidden;
}

.btn2-restaurant:hover{
border:solid 1px #FFF100!important }

.btn2-restaurant2:hover{
border:solid 1px #464951!important }

.btn2-restaurant::before{
background:#FFF100!important}


.btn2-gray{
border:solid 1px #464951;
background:none;
color:#464951;
}

.btn2-gray:hover span{
color:white!important}

.btn2-gray.btn2::before{
background:#464951}

.btn2-none{
background:transparent}


.btn2 i{
font-size:180%;
vertical-align:middle;
margin-bottom:4px}


.btn2 span{
position:relative;}

.btn2:hover span{
color:#464951}

.btn2::before{content:"";
   width:0%;
   height:100%;
   background-color:rgba(255,255,255,0.8);
   position:absolute;
   bottom:0px;
  right:0px;
transition-duration:0.3s}

.btn2:hover{
color:  #1F1520}

.btn2:hover::before{
width:100%;
left:0}


.btn2-white{
background:white;}


.btn2-white:hover{
left:0;
background-color:transparent}

.btn2-white:hover::before{
width:0}

.btn2-white:hover span{
color:white;
}


.btn2-black{
border:solid black 1px;
color:  #1F1520;
background:rgba(129,153,155,0.2)}

.btn3{padding:4px 1em;
border:solid 1px #464951;
display:inline-block;
line-height:1.4;
color:white;
border-radius:50px;
cursor: pointer;
}


.btn3:hover{
background:white;
color:#464951}

.bg-white.btn3 {
  background-color: white;
  color: #464951;
}

.bg-white.btn3:hover {
  background: #464951!important;
  color: white;
border:solid 1px white
}

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


.btn-hakkaku p{
font-size:16px}

.btn1{
padding:4px 3em 5px 1.5em;}


.btn1::before{
top:-4px;
}

.btn1::after{
top:-4px;
}

.btn1 span{
font-size:14.5px}


.btn1-l{
padding:4px 1.5em 5px 3em;
}

.btn2{
padding:3px 1em;
line-height:2.5;
min-width:240px;
}


}



/**パンくずリスト**/

#breadcrumbs{
padding-top:10px;
padding-bottom:10px}

#breadcrumbs a{
font-size:13px;
letter-spacing:2px;
color:#464951}

.white #breadcrumbs, .white #breadcrumbs a,.white .breadcrumb_last{
color:white}

#breadcrumbs{
font-size:13px}

.breadcrumb_last{
color:#464951}

@media screen and (max-width:993px) {
#breadcrumbs a{
font-size:12px}
}


/**トップへ戻るボタン**/
#PageTopBtn{

text-align:left;
width:50px;
height:50px;
background:black;
    position: fixed;
right:2em;
border-radius:100%;

z-index:98!important;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
border:solid 2px black;
}


#PageTopBtn span{
width:24px;
height:20px;
display:block;
position:relative;}


#PageTopBtn span::before{content:"";
   width:12px;
   height:2px;
   background-color:#EAF1FA;
   position:absolute;
   bottom:0px;top:0;
   left:10px;
margin:auto;
border-radius:20px;
transform: rotate(45deg);
transition-duration:0.2s}

#PageTopBtn:hover{
background:white;
}

#PageTopBtn:hover span::before{content:"";
   width:12px;
background:black;
   left:8px;
margin:auto;
transform: rotate(70deg);
transition-duration:0.2s}

#PageTopBtn span::after{content:"";
   width:12px;
   height:2px;
   background-color:#EAF1FA;
   position:absolute;
   bottom:0px;top:0;
   left:2px;
margin:auto;
border-radius:20px;
transform: rotate(-45deg);
transition-duration:0.2s}

#PageTopBtn:hover span::after{content:"";
   width:12px;
background:black;
   left:4px;
margin:auto;
transform: rotate(-70deg);
transition-duration:0.2s}



@media screen and (max-width:993px) {
#PageTopBtn {
width:50px;height:50px;
padding:8px;
}

#PageTopBtn{
right:1em;
transform:translateY(20px)}
}


/*表示非表示切り替え*/

@media print, screen and  (min-width:993px) {
.only-sp{display:none !important;}
}

@media screen and (max-width:992px) {
.only-pc{display:none;}
}




/**印刷専用**/

@media print{


.fade {
    opacity : 1!important;
    transform : translate(0, 0)!important;
}
.fade.scrollin {
    opacity : 1!important;
    transform : translate(0, 0);
    
}


.fade2 {
    opacity : 1!important;
　　　transform : translate(0, 0);
}


.fade2.scrollin2 {
    opacity : 1!important;
    transform : translate(0, 0);
}

.slide-right{
z-index:0;
transform: translateX(0vw)!important;
}

.slide-left{
z-index:0;
transform: translateX(0vw)!important;
}

.slide-bottom{
z-index:0;
transform: translateY(0%)!important;
}

.spin{
transform: rotatey(0deg)!important ;}


.spin2{
transform: rotatex(0deg)!important ;}

}

.text-underline {
	text-decoration: underline;
	text-decoration-color: black;
}







/**トップビュー**/


.top-view-slider2{
width:100%;
margin:auto;
position:relative;
margin-bottom:0!important;
}



.top-view-slider2 .slick-img{
object-fit:cover;
object-position:center;
margin-bottom:0!important;

}




.top-view-slider2 .slider-contents img{
object-fit:cover;
  width: 100%;
   height: 100%;
  opacity: 0; // この行を追加
}
.top-view-slider2 .slick-slide img {
height:100svh;
object-fit:cover;
   opacity: 0.6; // ここと
   -webkit-transition: all .5s;
    transition: all .5s;
filter: brightness(1.06);}

.top-view-slider2 .slider-contents img{
aspect-ratio:110/44;
object-fit:cover;
  width: 100%;
   height: auto;
  opacity: 0; // この行を追加
}
 .top-view-slider2 .slick-current img {
  opacity: 1; // ここです
}

.top-view-slider2 .slide-arrow{
width:60px;
height:60px;
position:absolute;
z-index:9;
margin:auto;
opacity:1!important
}


.top-view-slider2 .prev-arrow{
top:0;bottom:0;
left:calc(10% - 30px);}

.top-view-slider2 .next-arrow{
top:0;bottom:0;margin:auto;
right:calc(10% - 30px);}


.top-view-slider2 .slick-dots{
position:absolute;
bottom:1em;
z-index:99;
text-align:center;
padding:0 2em}

.top-view-slider2 .slick-dots li button:before{
  font-size:12px!important;}

.slick-dots li button:before{
color:white;
opacity:0.8}


.top-view-slider2 .slick-active button:before{
color:rgba(215,1,15,0.8)!important}

.top-view-slider2 .slick-dots li button:hover::before{
color:#D7000F!important;
opacity:0.5!important}


.top-view-slider-btn{
display:inline-block;
color:white;
margin-left:18px;
font-size:20px;
letter-spacing:4px;
border:solid 1px white;
padding:4px 2em;
border-radius:50px;;
background:rgba(25,25,25,0.15);
margin-bottom:0.8em;
transform: scale(1.0)!important;
transition-duration:0.3s;}

.top-view-slider-btn span{
position:relative;
padding-right:20px}

.top-view-slider-btn span::before{content:"";
   width:14px;
   height:1px;
   background-color:white;
   position:absolute;
 top:0;bottom:0;
right:-1px;
margin:auto;
transition-duration:0.3s;
transform:rotate(32deg) translateY(-3px);}

.top-view-slider-btn span::after{content:"";
   width:14px;
   height:1px;
   background-color:white;
   position:absolute;
 top:0;bottom:0;
right:0;
margin:auto;
transition-duration:0.3s;
transform:rotate(-32deg) translateY(5.5px);}

.top-view-slider-btn:hover{
letter-spacing:6px;
background:rgba(255,255,255,0.8)}

.top-view-slider-btn:hover span:before{right:-6px;
background:#464951}

.top-view-slider-btn:hover span:after{right:-5px;
background:#464951}

.top-view-slider-link-wrapper {
    position: absolute;
    bottom: 10%;
    left: 10%;
    z-index: 2;
width:auto;
max-width:800px;
}


.top-view-slider-link{
cursor: pointer;
margin:5px 0;
position:relative;
padding-left:20px;}

.top-view-slider-link:has(.top-link-active)::before{
opacity:1;
transform:scale(1.0);
}

.top-view-slider-link::before {
  content: "";
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0);
  background-image: url("/cmsmin/wp-content/themes/hassenkaku2025/images/icon/hakkaku-mark-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.top-view-slider-link a{
display:inline-block;
color:white!important;
transition-duration:0.5s;
line-height:120%;
padding:5px 0;
transform-origin:left;
font-size:19px;
  text-shadow: black 0px 0 8px;
  font-weight:600;
}

.top-link-active{
transform: scale(1.3);
transform-origin: center left;}

.top-view-slider-next{
opacity:0;
transition-duration:0.4s;
margin-left:4px;
}

.top-view-slider-next img{
width:18px;
opacity:0;
padding-bottom:4px;
transform: translateX(0px);
transition-duration:1s}

.top-link-active .top-view-slider-next img{
  animation: ikoiko 2s ease-out infinite;
opacity:1}

@keyframes ikoiko {
  0%%, 30% {
transform: translateX(px);
  }
  50%, 70% {
transform: translateX(9px);
  }
}
 

.top-link-active .top-view-slider-next{
  display: inline-block;
  opacity:1;
}

.slider-img { transition: opacity .4s ease; }     /* main & hover 両方とも */
.slider-img-hover { 
  opacity: 0.0;
  transform: translateY(3%);      /* 少し下げておく */
}
.slider-img-hover{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
}
.swiper-img-content.hover-show .slider-img-main  { 
  opacity: 0; 
}
.swiper-img-content.hover-show .slider-img-hover { 
  animation: floatUp .6s ease-out forwards;
}

.swiper-img-content {
    position: relative;
}

img.slider-img {
    width: 100%;
    height: 100svh;
    object-fit: cover;
filter: brightness(90%);
}


/* 画像を包んでいる要素（例：.swiper-img-content）の初期状態 */
.swiper-img-content {
  opacity: 0;
  transform: translateY(3%);      /* 少し下げておく */
}

/* add-animation が付与されたら「上にふわっと」＋ フェードイン */
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(2%); }
  40%   { opacity: 1; }
  100% { opacity: 1; transform: translateY(0);    }
}

.swiper-img-content.add-animation {
  animation: floatUp 1s ease-out forwards;
}

.top-view {
    z-index: 0 !important;
    background: #232323;
    height: 100svh;
    position: relative !important;
}

.top-view-slider2.swiper {
    visibility: hidden;
}

.top-view-slider2.swiper,
.release-slider.swiper {
    visibility: hidden;
}

.top-view-slider2.swiper.swiper-initialized,
.release-slider.swiper.swiper-initialized{
  visibility: visible;
}


.header-view-swiper-wrap .slider-img{
height:100%}

.release-slider2-wrap .swiper-button-next, .release-slider2-wrap .swiper-button-prev{
transform:translateY(-40px)}

.swiper-button-next:after, .swiper-button-prev:after {
    display: none;
}

.release-slider2 .swiper-slide img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: auto;
    display: block;
transition-duration:0.3s
}

.release-slider-img{
aspect-ratio:1/1;
overflow:hidden}


.release-slider2 .swiper-slide:hover img{
transform:scale(1.07)}

.swiper-pagination {
  --swiper-pagination-color: gray; /* アクティブバレットの色 */
  --swiper-pagination-bullet-inactive-color: #ffffff; /* 非アクティブの色 */
  --swiper-pagination-bullet-size:10px; /* サイズ変更 */
  --swiper-pagination-bullet-horizontal-gap: 10px; /* 横間隔 */
  --swiper-pagination-bullet-inactive-opacity:1;
}

.release-slider2-wrap {
    position: relative;
}

.release-slider2-main .swiper-pagination {
    position: relative;
    padding: 20px 0;
}

.release-slider2-wrap {
    --swiper-navigation-sides-offset: -20px;
}


@media screen and (max-width: 768px){
.top-view-slider-link a{
transition-duration:0.3s;
line-height:120%;
padding:5px 0;
font-size:18px;}

.top-view-slider-next{
margin-left:px;
}


img.slider-img {
filter: brightness(80%);
}
}

@media screen and (max-width: 400px){
.top-view-slider-link a{
transition-duration:0.3s;
line-height:116%;
padding:4px 0;
font-size:17px;
}
.top-view-slider-btn{
font-size:16px;
margin-bottom:8px;}
}
   
    /*****スライダー*****/
    



.top-view-slider3{
height:100svh;
overflow:hidden}

.brand-header-lead{
transition-duration:0.8s!important;
transition-delay:0.3s
}

.brand-header-lead2{
transition-duration:1.5s!important;
transition-delay:0.8s;
        position: absolute;
        top: 50%;

        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-0%, -50%);
        transform: translate(-0%, -50%);
        width: 100%;

margin:auto;
z-index:99;
}


.brand-header-lead2 h1{
font-size:clamp(26px, 5.3vw, 38px);}



.brand-header-lead2 h1 span{
font-size:clamp(22px, 3.3vw, 30px);}

.brand-header-text-bottom{
transform:translateY(-10%);
margin:auto
}

.top-view-slider-sticky{
position: sticky;
 align-self: flex-start;
top: 0px;}

.top-view-slider-sticky .slick-dots{
bottom:1em;}

.top-view-slider-sticky .slick-dots li button:before{
font-size:10px}

.top-view-slider-sticky .slick-dots li.slick-active button:before{
color:#464951}

.brand-header-text-wrapper{
width:100%;
max-width:900px;
position:relative;
z-index:99;
text-align:center}

.brand-header-text-wrapper h1{
font-size:40px;
transition-duration:0.5s;
margin-top:1em;
margin-bottom:1em;
}


.brand-header-text-wrapper h2{
font-size:clamp(19px, 1.8vw, 24px);}

.brand-header-text-wrapper p,.brand-header-text-wrapper h1,.brand-header-text-wrapper h2{
text-align:center;
}

.brand-header-text-wrapper h1 span{
font-size:20px;
line-height:1.5;margin-top:0;
display:inline-block}

.brand-header-container{
position:relative;
overflow:hidden;
min-height:160svh;
}

.brand-header-text{
position: sticky;}

.brand-header-text-inner{
height:100svh;
display:flex;
 	display:-webkit-box;
  	display:-ms-flexbox;

justify-content: center; 
	-webkit-box-pack: center;
	-ms-flex-pack: center;

align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center
}


.top-view-slider .slider-img{
transform:scale(1.1);}


@keyframes zoomUp {
  0% {
    transform: scale(1.10);
  }
  89% {
    transform: scale(1); /* 拡大率 */
  }

  100% {
    transform: scale(1); /* 拡大率 */
  }
}


.top-view-slider .slider-img.add-animation {
  animation: zoomUp 8.8s linear 0s normal both;
}


.top-view-slider-sticky .top-view-slider{
height:100svh;
background:#464951;
margin:0}

.top-view-slider-sticky .top-view-slider .slider-img{
filter: brightness(100%);}

.slick-img,slick-track,slick-list draggable{
height:100%}

.top-view-slider-sticky .top-view-slider .slider-img{
height:100svh;
object-fit:cover;}


.top-page-pickup .slick-dots{
bottom:-16%}

.top-release-title{
line-height:1.5;
font-size:14px;
min-height:70px}

.top-page-pickup .slick-dots li button:before{
font-size:10px}

.release-slider .slick-slide img{
aspect-ratio:1/1;
object-fit:cover;

margin:auto}

.release-slider-inner{
display:block;
width:64%;
margin:auto;}

.release-slider .slick-list{

}

.release-slider .slick-slide{
padding:0%
}




.release-slider .slide-arrow{
  overflow:visible!important;
white-space: nowrap;
position:absolute;
width:40px;
top:0;
bottom:0;
margin:auto;
z-index:9;
transform:translateY(-30px)}

.release-slider .prev-arrow{
left:-60px;
overflow: visible;}

.release-slider .next-arrow{
right:-60px;
overflow: visible;}





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

.brand-header-text-bottom{
transform:translateY(0%);
margin:auto
}

.brand-header-container{

min-height:0svh;
padding-top:80px;
padding-bottom:80px
}


.top-page-pickup{
padding:0!important;
overflow:hidden;}

.release-slider-inner{
display:block;
width:calc(100% - 1.5em);
margin:auto;}

.top-page-pickup .swiper-button-next{
right:11%}

.top-page-pickup .swiper-button-prev{
left:11%}




.top-view-slider-sticky .top-view-slider{
height:auto;
aspect-ratio:16/16;
position:relative;
top:0;}

.top-view-slider-sticky .top-view-slider .slider-img{
height:auto;
aspect-ratio:16/16;
top:0;}

.brand-header-text-inner{
height:auto}




.top-view-slider-btn{
font-size:18px;
padding:2px 22px}

.top-view-slider-link::before{
width:9px;
height:9px}




.top-view-slider-link{
padding-left:15px;
margin:4px}

.top-view-slider-link-wrapper {
left:1em;
bottom:110px
}

.top-view-slider-sticky{
position:relative;}




}


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

.brand-header-text-wrapper h1{
font-size:26px;
transition-duration:0.5s;
}
.top-view-swiper .swiper-pagination{
display:none}

.top-view-slider-link-wrapper {
left:1em;
bottom:82px
}

}

/*  */
button.custom-select-button {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1.5;
    padding: 5px 10px 5px 10px;
    transition-duration: 0.2s;
    width: 100px;
    font-size: 15px;
    color: inherit;
}

.menu-yoyaku-box button.custom-select-button {
    padding-right: 30px;
    text-align-last: center;
    color: white;
    width: 100%;
    height: 100%;
    font-family: "Shippori Mincho", serif;
}

.fixed .head-yoyakuselect-box button.custom-select-button:hover {
    background: rgba(25, 25, 25, 0.9);
    color: white;
}
.head-yoyakuselect-box button.custom-select-button:hover{
  background:rgba(255,255,255,0.9);
  color:#464951;
}


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

.top-view-slider-link-wrapper {
left:1em;
bottom:40px
}

}




/***トップスライダー追加設定****/
@media screen and (min-width: 768px){
.top-view-slider-next strong{display:none!important}
}

@media screen and (max-width: 768px){
.top-view-slider-next strong{
font-size:13px;
margin-left:15px;
background:rgba(255,255,255,0.9);
color:#C90216;
text-shadow:none;
padding:2px 10px 2px 10px;
line-height:1.3;
display:inline-block;
border-radius:20px;
margin-bottom:px
}

.top-view-slider-link-sub{
font-size:13px}

}