/*
Last Updated: 2025-11-21
Author: zeal
*/
*{
box-sizing: border-box;
}
:root {
--text12: clamp(1.0rem,1.375vw,1.2rem);
--text14: clamp(1.2rem,1.625vw,1.4rem);
--text16: clamp(1.4rem,1.875vw,1.6rem);
--text18: clamp(1.6rem,2.125vw,1.8rem);
--text19: clamp(1.6rem,2.1875vw,1.9rem);
--text20: clamp(1.8rem,2.375vw,2.0rem);
--text22: clamp(1.9rem,2.5625vw,2.2rem);
--text24: clamp(2.0rem,2.75vw,2.4rem);
--text26: clamp(2.1rem,2.9375vw,2.6rem);
--text30: clamp(2.5rem,3.4375vw,3.0rem);
--text33: clamp(2.7rem,3.75vw,3.3rem);
--text34: clamp(2.8rem,3.75vw,3.4rem);
--text36: clamp(2.8rem,4vw,3.6rem);
--text38: clamp(3rem,4vw,3.8rem);
--text40: clamp(3rem,4vw,4.0rem);
--text45: clamp(3.3rem,4.875vw,4.5rem);
--text48: clamp(3.4rem,5vw,4.8rem);
--text50: clamp(3.6rem,5.25vw,5.0rem);
--text60: clamp(4rem,6.25vw,6.0rem);
--text72: clamp(5rem,7.5vw,7.2rem);
--text75: clamp(5.2rem,7.775vw,7.5rem);
--text78: clamp(5.2rem,8vw,7.8rem);
--text80: clamp(5.4rem,8.5vw,8.0rem);
--text88: clamp(5.6rem,8.75vw,8.8rem);
--text90: clamp(5.8rem,9vw,9.0rem);
--text100: clamp(6rem,9.25vw,10.0rem);
--transition01: 0.4s linear;
--f_noto: "Noto Sans JP", sans-serif;
--f_pop: 'Noto Sans JP', sans-serif;
--arrow_yoko: 42 / 77;
--arrow_tate: 77 / 42;
--official_icon: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--mail_icon: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--arrow_down: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--arrow_up: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--arrow_left: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--arrow_right: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--h_height: 75px;
}
@media screen and (max-width: 599px) {
:root{
--h_height: 45px;
}
}
.h_height{
padding-top: var(--h_height);
}
/*----------------------------------------
全体
----------------------------------------*/
/* html{
font-family:'游明朝体','Yu Mincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro','ＭＳ Ｐ明朝','ＭＳ 明朝','Sawarabi Mincho',serif;
font-size:62.5%;
color: #000;
-webkit-text-size-adjust:100%;
line-height:1.5;
font-weight: 500;
} */
html{
font-family: "Noto Sans CJK JP", "Noto Sans JP", 'Noto Sans', sans-serif;
font-size:62.5%;
color: #000;
-webkit-text-size-adjust:100%;
line-height:1.5;
font-weight: 500;
}
body{ font-size:1.4rem; }
address{
font-style: normal;
}
p{
color:#000;
font-feature-settings: "palt";
line-height: 2;
font-weight: normal;
}
img{
vertical-align: bottom;
backface-visibility: hidden;
height: auto;
}
a{
color:#000;
transition: all 0.3s;
text-decoration: none;
}
.op:hover{ opacity: 0.8; }
.op img{ transition: all 0.3s; }
.max_respon{max-width:100%;}
#container{ overflow: hidden; }
li{list-style:none; }
.center{ text-align:center; }
.block_center{
width: fit-content;
margin-inline: auto;
}
.text_center{
text-align: center;
}
.m_center{
margin-inline: auto;
}
.m_l_auto{
margin-left: auto;
}
.m_t_auto{
margin-top: auto;
}
.m_r_auto{
margin-right: auto;
}
.w_fit{width: fit-content;}
@media screen and (max-width: 599px) {
p{text-align:left;}
.sp_text_left{
text-align: left;
}
.sp_center{
text-align: center;
}
.sp_text_center{
text-align: center;
}
.sp_right{
text-align: right;
}
.text_center{
text-align: left;
}
}/*END*/
.f_pop{
font-family: "Poppins", sans-serif;
}
.f_noto{
font-family: 'Noto Sans JP', sans-serif;
}
.f_w100 {
font-weight: 100;
}
.f_w200 {
font-weight: 200;
}
.f_w300 {
font-weight: 300;
}
.f_w400 {
font-weight: 400;
}
.f_w500 {
font-weight: 500;
}
.f_w600 {
font-weight: 600;
}
.f_w700 {
font-weight: 700;
}
.f_w800 {
font-weight: 700;
}
.rela{
position:relative;
}
.abs{
position:absolute;
}
.z_1{
z-index: 1;
}
.z_2{
z-index: 2;
}
.z_3{
z-index: 3;
}
.z_4{
z-index: 4;
}
.z_5{
z-index: 5;
}
.order01{order: 1;}
.order02{order: 2;}
.order03{order: 3;}
.order04{order: 4;}
.order05{order: 5;}
.text_upper{
text-transform: uppercase;
}
.a_delay01{
animation-delay: 0.2s;
--animation_d: 0.2s;
}
.a_delay02{
animation-delay: 0.4s;
--animation_d: 0.4s;
}
.a_delay03{
animation-delay: 0.6s;
--animation_d: 0.6s;
}
.a_delay04{
animation-delay: 0.8s;
--animation_d: 0.8s;
}
.a_delay05{
animation-delay: 1s;
--animation_d: 1s;
}
.a_delay06{
animation-delay: 1.2s;
--animation_d: 1.2s;
}
.a_delay07{
animation-delay: 1.4s;
--animation_d: 1.4s;
}
.t_delay0{
transition-delay: 0s;
--transition_d: 0s;
}
.t_delay01{
transition-delay: 0.2s;
--transition_d: 0.2s;
}
.t_delay02{
transition-delay: 0.4s;
--transition_d: 0.4s;
}
.t_delay03{
transition-delay: 0.6s;
--transition_d: 0.6s;
}
.t_delay04{
transition-delay: 0.8s;
--transition_d: 0.8s;
}
.t_delay05{
transition-delay: 1s;
--transition_d: 1s;
}
.t_delay06{
transition-delay: 1.2s;
--transition_d: 1.2s;
}
.t_delay07{
transition-delay: 1.4s;
--transition_d: 1.4s;
}
.ttl_img650 img{
max-width: 650px;
}
.max_800{
max-width: 800px;
}
.max_840{
max-width: 840px;
--inner_frame_w: 840;
}
.max_920{
max-width: 920px;
}
.max_950{
max-width: 950px;
--inner_frame_w: 950;
}
/*----------------------------------------
text
----------------------------------------*/
.text_bold{ font-weight: bold; }
.text_bold800{ font-weight: 800; }
.text_bold500{ font-weight: 500; }
.text_normal{ font-weight: normal; }
.text_right{text-align:right;}
.text_left{text-align:left;}
.text_10{ font-size:1.0rem !important; }
.text_12{ font-size: var(--text12) }
.text_14{ font-size: var(--text14) }
.text_16{ font-size: var(--text16) }
.text_18{ font-size: var(--text18) }
.text_20{ font-size: var(--text20) }
.text_22{ font-size: var(--text22) }
.text_24{ font-size: var(--text24) }
.text_26{ font-size: var(--text26) }
.text_30{ font-size: var(--text30) }
.text_33{ font-size: var(--text33) }
.text_34{ font-size: var(--text34) }
.text_36{ font-size: var(--text36) }
.text_38{ font-size: var(--text38) }
.text_40{ font-size: var(--text40) }
.text_45{ font-size: var(--text45) }
.text_48{ font-size: var(--text48) }
.text_50{ font-size: var(--text50) }
.text_60{ font-size: var(--text60) }
.text_72{ font-size: var(--text72) }
.text_78{ font-size: var(--text78) }
.text_80{ font-size: var(--text80) }
.text_88{ font-size: var(--text88) }
.text_90{ font-size: var(--text90) }
.text_100{ font-size: var(--text100) }
.lh_34{ line-height: 3.4 ; }
.lh_32{ line-height: 3.2 ; }
.lh_30{ line-height: 3 ; }
.lh_28{ line-height: 2.8 ; }
.lh_26{ line-height: 2.6 ; }
.lh_25{ line-height: 2.5 ; }
.lh_24{ line-height: 2.4 ; }
.lh_22{ line-height: 2.2 ; }
.lh_20{ line-height: 2 ; }
.lh_18{ line-height: 1.8 ; }
.lh_19{ line-height: 1.9 ; }
.lh_16{ line-height: 1.6 ; }
.lh_15{ line-height: 1.5 ; }
.lh_14{ line-height: 1.4 ; }
.lh_12{ line-height: 1.2 ; }
.lh_11{ line-height: 1.1 ; }
.lh_10{ line-height: 1 ; }
.ls_05{ letter-spacing: 0.5px; }
.ls_09{ letter-spacing: 0.9px; }
.ls_1{ letter-spacing: 1px; }
.ls_15{ letter-spacing: 1.5px; }
.ls_2{ letter-spacing: 2px ; }
.ls_3{ letter-spacing: 3px ; }
.ls_4{ letter-spacing: 4px ; }
.ls_-1{ letter-spacing: -1px ; }
.ls_-2{ letter-spacing: -2px ; }
.ls_-3{ letter-spacing: -3px ; }
.ls_-4{ letter-spacing: -4px ; }
.ls_100{letter-spacing: calc(0.001em * 100);}
.ls_200{letter-spacing: calc(0.001em * 200);}
.ls_300{letter-spacing: calc(0.001em * 300);}
.ls_400{letter-spacing: calc(0.001em * 400);}
.ls_500{letter-spacing: calc(0.001em * 500);}
@media screen and (max-width: 599px){
.sp_lh_15{
line-height: 1.5!important;
}
p{ line-height: 1.8; }
}/*END*/
/*----------------------------------------
LP
----------------------------------------*/
/*----------------------------------------
header
----------------------------------------*/
.sd-trigger{
position: fixed;
top: 0;
right: 0;
width: 16%;
cursor: pointer;
background: #fff;
z-index: 7;
}
#sd{
box-sizing: border-box;
background: #fff;
}
#sd li a{
display: block;
text-decoration: none;
padding: 20px 2% 20px 4%;
color:#000;
border-bottom: 1px solid #ccc;
}
#sd li a:hover{
color: #14557a;
}
@media print, screen and (min-width: 750px){
.sd-trigger{
left: calc(50% + 150px);
right: auto;
max-width: 100px;
}
.sp_mv{
display: none;
}
.pc_mv{
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
}/*END*/
@media screen and (max-width: 769px){
.sd-trigger{
max-width: 25%;
}
.pc_mv{
display: none;
}
.sp_mv{
width: 100%;
}
}/*END*/
/*----------------------------------------
layout
----------------------------------------*/
#container{
overflow: hidden;
}
.main_frame{
width: 100%;
position: relative;
box-sizing: border-box;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
.overflow{
overflow: hidden;
}
.tel{
display: block;
width: 100%;
text-align: center;
text-decoration: none;
color:#595757;
}
@media print, screen and (min-width: 770px){
.sp_only{
display: none !important;
}
.btn_hover{
position: relative;
display: block;
}
.btn_hover:hover{
animation:btn_hover 0.5s ease-in;
}
@keyframes btn_hover{
0% {
top: 0;
}
40% {
top: -5px;
}
100% {
top: 0;
}
}
}/*END*/
@media print, screen and (min-width: 600px){
.sp_br{
display: none;
}
}/*END*/
@media screen and (max-width: 769px){
.pc_only{
display: none !important;
}
}/*END*/
/*----------------------------------------
header
----------------------------------------*/
@media print, screen and (min-width: 770px){
.sp_mv{
display: none;
}
}/*END*/
@media screen and (max-width: 769px){
.pc_mv{
display: none;
}
.sp_mv{
width: 100%;
}
}/*END*/
/*----------------------------------------
map
----------------------------------------*/
.map{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
padding: 60% 0 0;
text-align: center;
}
.map iframe{
width: 90%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.map iframe:not(:target){
left: 0\9;
top: 0\9;
}
.map iframe{
left: 0\9;
top: 0\9;
}
@media all and (-ms-high-contrast: none) {
.map iframe{
left: 50%\9 !important;
top: 50%\9 !important;
}
}
.map{ z-index: 2; }/*chrome対策*/
@media screen and (max-width: 1049px){
.map{ padding: 80% 0 0; }
}/*END*/
@media screen and (max-width: 769px){
.map{ padding: 80% 0 0; }
}/*END*/
/*----------------------------------------
contact
----------------------------------------*/
.contact{
width: 100%;
line-height: 1.8;
box-sizing: border-box;
color: #000;
}
.contact label,.contact label span{
color: #000;
}
.contact th,
.contact td{
text-align: left;
box-sizing: border-box;
}
.contact th{
padding-bottom: 5px;
}
.contact td{
padding-bottom: 40px;
}
.contact td p{
line-height: 1.2;
}
.kind label{
box-sizing: border-box;
padding-top: 8px;
padding-bottom: 8px;
padding-left:45px !important;
width: 95%;
}
.kind label:before{
left: 2px !important;
}
.kind.check input[type="checkbox"]:checked + label:after {
left: 8px !important;
}
.r_kind label{
box-sizing: border-box;
padding-left:45px !important;
margin-bottom: 20px !important;
}
/*
.contact th{
padding-bottom: 10px;
}
.contact td{
padding-bottom: 40px;
}
.contact td p{
line-height: 1.2;
}
.kind label{
box-sizing: border-box;
padding-top: 8px;
padding-bottom: 8px;
padding-left:55px !important;
background-color: #fff;
width: 100%;
}
.kind label:before{
left: 10px !important;
}
.kind.check input[type="checkbox"]:checked + label:after {
left: 16px !important;
}
*/
.schedule_form input{
float: left;
width: 40%;
}
.schedule_form select{
float: left;
width: 28%;
margin-left: 2%;
}
.schedule_form input,
.schedule_form select{
border: 1px solid #dcdcdc !important;
background: #fff !important;
}
.hissu:after,
.nini:after{
display: inline-block;
padding: 6px 6px;
line-height: 1;
margin-left: 10px;
border-radius: 5px;
vertical-align: 5px;
font-size: 1.6rem;
font-weight: bold;
}
.hissu:after{
content: "必須";
display: inline-block;
background: #c7b05f;
color: #fff;
}
.nini:after{
content: "任意";
display: inline-block;
background: #eee;
color: #828282;
}
/*error*/
td .error{
color: #e60012;
padding-top: 10px;
font-weight: normal;
}
.privacy .error{
display: inline-block;
margin-top: 10px;
color: #e60012;
padding: 5px 14px;
background: #ffa2ad;
}
td.error{
/*background:#ffcdd3;*/ background:#ffa2ad;
padding: 8px;
display: block;
margin-bottom: 15px;
}
@media screen and (max-width: 769px){
.contact th{
font-size: 1.5rem;
padding-bottom: 4px;
}
.contact td{
font-size: 1.4rem;
padding-bottom: 25px;
}
.privacy .error,
td .error{
font-size: 1.4rem;
}
.privacy .hissu:after,
th.hissu:after,
th.nini:after{
padding: 3px 6px;
font-size: 1.2rem;
vertical-align: 1px;
margin-left: 6px;
}
.kind label{
padding-top: 10px;
padding-bottom: 10px;
}
.privacy{
font-size: 1.4rem !important;
}
}/*END*/
/*form 追加*/
.form_none{
display: none;
}
.form_block{
display: block;
}
.bg_form{
background: #f0f0f0;
margin: 0 auto 0 auto;
padding-bottom: 100px;
box-sizing: border-box;
}
.under_line{
font-size: 1.4rem;
text-decoration: underline;
}
/*----------------------------------------
フォーム
----------------------------------------*/
select,
textarea,
input[type="tel"],
input[type="email"],
input[type="text"]{
padding: 15px;
background: #fff;
border: 1px solid #a5a5a5;
box-sizing: border-box;
font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
-webkit-appearance: none;
font-size: 1.7rem;
color: #000;
}
select:focus{ outline:none; }
textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="text"]:focus{
outline:none;
border: 1px solid #a5a5a5;
}
select{
width: 100%;
border: 1px solid #a5a5a5;
}
.form1{ width: 250px; }
.form2{ width: 350px; }
.form_all{ width: 100%; }
:focus{ outline: none; }
.form_box_flex{
display: flex;
justify-content: space-between;
}
.box_heaf{
width: auto;
float: left;
display: flex;
}
.m_r10{
margin-right: 4%;
}
.telbox{
width:28%;
}
.telbox_sen {
width: 10%;
text-align: center;
padding-top: 13px;
}
.select_ttl{
width: 100%;
padding: 20px 10px 10px 0;
font-size: 2.2rem;
}
.media_pb{
padding-bottom: 15px !important;
}
@media screen and (max-width: 769px){
select,
textarea,
input[type="tel"],
input[type="email"],
input[type="text"]{
padding: 10px 10px;
font-size: 1.6rem;
}
select:focus{ outline:none; }
textarea:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="text"]:focus{
border: 1px solid #867b5b;
}
.form1{ width: 150px; }
.form2{ width: 100%; }
}/*END*/
/*----------------------------------------
radio checkbox
----------------------------------------*/
.radio input[type="radio"],
.check input[type="checkbox"]{
position: absolute;
height: 1px;
width: 1px;
clip: rect(0, 0, 0, 0);
}
.radio label,
.check label{
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 40px;
line-height: 2;
margin-right: 35px;
/*
margin-bottom: 10px;
*/
}
.radio label:before,
.check label:before{
position: absolute;
content: "";
top: 50%;
left: 0;
width: 32px;
height: 32px;
margin-top: -16px;
background: #fff;
border:1px solid #dcdcdc;
border-radius: 50%;
}
.radio label:before{
margin-top: -19px;
}
.check label:before{ border-radius: 0; }
.radio label:before{ border-radius: 50%; }
.radio label,
.check label{
margin-left: 0\9;
padding: 11px\9;
}
.radio label:not(:target),
.check label:not(:target){
margin-left: 10px\9;
padding: 11px 0 11px 25px\9;
}
.radio label:before,
.check label:before{
display: none\9;
}
.radio label:not(:target):before,
.check label:not(:target):before{
display: inline-block\9;
}
.radio input[type="radio"]:checked + label:after{
position: absolute;
content: "";
top: 50%;
left: 6px;
width: 22px;
height: 22px;
margin-top: -13px;
border-radius: 50%;
background: #00b7ee;
}
.check input[type="checkbox"]:checked + label:after {
content: "";
position: absolute;
top: 50%;
box-sizing: border-box;
display: block;
left: 4px;
width: 22px;
height: 12px;
margin-top: -8px;
border-left: 4px solid #eb6877;
border-bottom: 4px solid #eb6877;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.check input[type="checkbox"]:checked + label:before{
background: #fff;
}/*--
.radio input[type="radio"]:focus + label:before,
.check input[type="checkbox"]:focus + label:before{
border-color: #aec47f;
box-shadow: 0 0 5px #aec47f;
}
--*/
.radio_style label{
padding-bottom: 5px;
}
.medhia_check label{
padding-left: 40px;
margin-right: 30px;
}
/*----------------------------------------
footer
----------------------------------------*/
.copyright{
background: #fff;
color: #000;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
line-height: 1.4;
}
.sp_menu{
width: 100%;
display: none;
position: fixed;
bottom: 0;
left: 0;
box-sizing: border-box;
z-index: 100;
background: fff;
}
.sp_menu a{
display: block;
}
.fixed_tel{
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sp_menu ul{
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.sp_menu ul li{
float: left;
width: calc(100% / 1);
box-sizing: border-box;
}
.sp_menu ul li:last-of-type{
border-right: none;
}
@media screen and (max-width: 749px){
.sp_menu ul{
max-width: 750px;
}
}
/*----------------------------------------
追加
----------------------------------------*/
.lp_frame{
width:86%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
.lp_frame_f{
width:90%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
#bk{
position: relative;
}
#bk:before{
content: "";
position: fixed;
width: 100%;
height: 100%;
background: #edf4f7;
background-size: contain;
background-repeat: repeat-x;
z-index: 1;
}
.ribbon_l{
position: fixed;
top: 0;
left: 0;
background: url(../images/background-rbn.jpg) center top repeat-y;
background-size: 100%;
height: 100vh;
width: 4.5%;
max-width: 50px;
/*box-shadow: 0 0 8px 0px rgb(0 0 0 / 20%);*/
z-index: 1;
}
.ribbon_r{
position: fixed;
top: 0;
right: 0;
background: url(../images/background-rbn.jpg) center top repeat-y;
background-size: 100%;
height: 100vh;
width: 4.5%;
max-width: 50px;
/*box-shadow: 0 0 8px 0px rgb(0 0 0 / 20%);*/
z-index: 1;
/* filter: hue-rotate(233deg) saturate(115%) brightness(100%); */
}
.bg_logo {
position: fixed;
top: 9%;
left: 7%;
max-width: 374px;
width: 18%;
}
@media (min-width: 1000px) and (max-width: 1150px) {
.bg_logo {
width: 15%;
}
}
@media screen and (max-width: 999px) {
.bg_logo {
display: none;
}
}
#frame{
position: relative;
z-index: 2;
background: #fff;
box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
}
@media screen and (min-width: 750px){
.lp_frame{
width: 90%;
margin-right: auto;
margin-left: auto;
}
#frame{
max-width: 500px;/* max-width: 800px;*/
margin-left: auto;
margin-right: auto;
}
}/*END*/
@media screen and (max-width: 751px){
.ribbon_l{
display: none;
}
.ribbon_r{
display: none;
}
.lp_frame{
width:95%;
}
}/*END*/
/*----------------------------------------
header
----------------------------------------*/
header{
position: relative;
}
.drawer{
position: fixed;
background: rgba(0, 0, 0, 0.8);
top: 0;
right: 0;
width: 100%;
height: 100vh;
color: #d0c077;
display: flex;
justify-content: center;
visibility: hidden;
opacity: 0;
transform: translateX(100%);
transition: 0.5s ease-in-out;
z-index: 50;
}
.drawer ul{
text-align: center;
padding-top: 100px;
}
.drawer ul li{
position: relative;
transform: translateX(-150px);
transition: transform 0.5s ease;
}
.drawer ul li:nth-child(2){ transition-delay: 0.15s; }
.drawer ul li:nth-child(3){ transition-delay: 0.25s; }
.drawer ul li:nth-child(4){ transition-delay: 0.35s; }
.drawer ul li:nth-child(5){ transition-delay: 0.45s; }
.drawer ul li:nth-child(6){ transition-delay: 0.55s; }
.drawer ul li:nth-child(7){ transition-delay: 0.65s; }
.drawer ul li:nth-child(8){ transition-delay: 0.4s; }
.drawer ul li:nth-child(9){ transition-delay: 0.45s; }
.drawer ul li:nth-child(10){ transition-delay: 0.5s; }
.drawer ul li:nth-child(11){ transition-delay: 0.55s; }
.drawer ul li:nth-child(12){ transition-delay: 0.6s; }
.drawer ul li a{
display: inline-block;
font-size: 1.6rem;
color: #fff;
text-decoration: none;
padding: 15px;
line-height: 1.3;
font-weight: normal;
}
.drawer ul li a:hover{
animation: drawer 1.4s;
color: #e1f2fa;
}
@keyframes drawer{
0%{
filter: none;
}
30%{
filter: blur(0.8px);
}
100%{
filter: none;
}
}
.open .drawer{
visibility: visible;
opacity: 1;
transform: translateX(0);
}
.open .drawer ul li{
transform: translateX(0);
}
.head_lp .drawer_close{
position: absolute;
right: 15px;
top: 15px;
width: 40px;
height: 40px;
cursor: pointer;
}
.head_lp .drawer_close span{
display: inline-block;
position: absolute;
left: 0;
top: 50%;
background: #fff;
height: 2px;
width: 100%;
transition: all 0.4s;
}
.head_lp .drawer_close span:nth-child(1){
transform: rotate(45deg);
}
.head_lp .drawer_close span:nth-child(2){
transform: rotate(-45deg);
}
.head_lp .drawer_close:hover span{
background: #bd0d23;
}
@media screen and (max-width: 768px){
.head_lp .drawer_close{
width: 30px;
height: 30px;
}
.drawer ul li a{
font-size: 1.8rem;
}
}/*END*/
.btn_menu_works{
position: fixed;
width: 46px;
height: 41px;
right: calc(50% - 250px);
top: 0px;
cursor: pointer;
transition: all 0.5s;
z-index: 51;
background: #000;
display: none;
}
.btn_menu_works span{
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transition: all 0.4s;
}
.btn_menu_works span{
width: 60%;
left: 20%;
}
.btn_menu_works span:nth-child(1){
top: 10px;
}
.btn_menu_works span:nth-child(2){
top: 20px;
}
.btn_menu_works span:nth-child(3){
top: 30px;
}
.open .btn_menu_works span:nth-child(1){
transform: rotate(45deg);
top: 20px;
}
.open .btn_menu_works span:nth-child(2){
opacity: 0;
}
.open .btn_menu_works span:nth-child(3){
transform: rotate(-45deg);
top: 20px;
}
@media screen and (max-width: 768px){
.btn_menu_works{
top: 0px;
}
.btn_menu_works span:nth-child(2){
top: 11px;
}
.open .btn_menu_works span:nth-child(1){
top: 20px;
}
.open .btn_menu_works span:nth-child(3){
top: 20px;
}
.btn_menu_works{
width: 46px;
height: 41px;
right: 0px;
}
.btn_menu_works span{
width: 70%;
left: 15%;
}
.btn_menu_works span:nth-child(1){
top: 9px;
}
.btn_menu_works span:nth-child(2){
top: 20px;
}
.btn_menu_works span:nth-child(3){
top: 31px;
}
}/*END*/
/*----------------------------------------
content
----------------------------------------*/
.rela{
position: relative;
}
.btn{
display: block;
width: 100%;
}
.btn_01{
position: absolute;
bottom: 13%;
left: 50%;
transform: translateX(-50%);
width: 80%;
}
.btn_reservation {
position: absolute;
bottom: 3.5%;
left: 50%;
transform: translateX(-50%);
width:90%;
}
.btn_mi{
display: block;
width: 90%;
margin-inline: auto;
}
.btn_shiryo{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.rela_z2{
position: relative;
z-index: 2;
}
.lp_frame_ac{
width: 96%;
margin-inline: auto;
}
.accordion-title{
width: 70%;
margin-inline: auto;
}
.accordion-container {
margin-inline: auto;
width: 86%;
}
.accordion-list:not(:first-child) {
margin-top: 20px;
}
.accordion-title {
cursor: pointer;
position: relative;
}
.accordion-title:before {
position: absolute;
content: '';
top: 50%;
right: 20px;
height: 1px;
width: 20px;
background: #a47a20;
transform: rotate(90deg);
transition: all .3s ease-in-out;
}
.accordion-title:after {
position: absolute;
content: '';
top: 50%;
right: 20px;
height: 1px;
width: 20px;
background: #a47a20;
transition: all .3s ease-in-out;
}
.accordion-title.open:before {
transform: rotate(180deg);
}
.accordion-title.open:after {
opacity: 0;
}
.accordion-text {
display: none;
padding: 15px 0 20px 0;
}
.tenkaitex::before {
content: "詳しく見る";
}
.tenkaitex.opentex::before {
content: "閉じる";
}
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+JP:wght@100..900&display=swap');
.tenkaitex{
display: block;
width: 100%;
box-sizing: border-box;
font-size: 2rem;
color: #a47a20;
border:1px solid #a47a20;
padding: 18px 10px;
text-align: center;
position: relative;
margin-inline: auto;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
}
.map{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
padding: 60% 0 0;
text-align: center;
}
.map iframe{
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.map{ z-index: 2; }/*chrome対策*/
.map_frame{
position: absolute;
width: 90%;
transform: translateX(-50%);
left: 50%;
bottom: 13%;
}
/*----------------------------------------
カレント表示ナビゲーション
----------------------------------------*/
.target_nav {
display: none;
position: fixed;
z-index: 100;
top: 50%;
right: 50%;
transform: translate(calc(-50% + 300px),-50%);
z-index: 49;
opacity: 0.3;
}
.header__link {
display: block;
width: 6px;
height: 32px;
background-color: transparent;
border: 1px solid #000;
margin-top: 20px;
}
.header__link.is-active {
background-color: #000;
}
li.header__item {
position: relative;
}
/*横の文字調整*/
.t_nav_tex{
display: block;
width: 28px;
text-align: center;
position: absolute;
top: 50%;
color: #000;
transform: translate(15%, -50%);
}
@media screen and (max-width: 768px){
.target_nav {
right: 5%;
transform: translate(0,-50%);
}
.header__link {
width: 4px;
height: 24px;
margin-top: 15px;
}
.header__link.is-active {
}
/*横の文字調整*/
.t_nav_tex{
width: 20px;
}
}/*END*/
@media screen and (max-width: 599px){
.target_nav{
display: none !important;
}
}/*END*/