@charset "utf-8";


/*---------------------------------------------
	body
---------------------------------------------*/

* {
box-sizing:border-box;
margin:0;
padding:0;
border:0;
outline:0;
font-style:normal;
word-break:normal;
word-wrap:break-word;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
  /* scroll-padding-top: 20px; */
}

.mx-img{
max-width:100% !important;
height:auto !important;
}

body {
  width: 100%;
  /* height:100svh; */
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  -webkit-text-size-adjust: 100%;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  position: relative;
}

* {
  box-sizing: border-box;
}

.en {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

p {
  text-align: left;
}

.mincho {
  font-family: "Shippori Mincho", serif;
}


.go {
font-family: "Noto Sans JP", sans-serif;
}


.only_pc,
.only_pc_tab {
  display: block;
}

.only_sp,
.only_sp_480 {
  display: none !important;
}

.br_none_480 {
  display: inline;
}

.sp_br {
  display: none;
}

@media screen and (max-width: 767px) {
.only_pc {
  display: none;
}
}


@media screen and (max-width: 420px) {
  body{
    font-size: 1.36rem;
  }
}

/*---------------------------------------------
	Anchor
---------------------------------------------*/
a {
  outline: none;
}

a:link {
  color: #2aadaa;
  text-decoration: none;
}

a:visited {
  color: #2aadaa;
  text-decoration: none;
}

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

a:active {
  color: #93d8d6;
  text-decoration: none;
}

a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}




/*---------------------------------------------
	p
---------------------------------------------*/


.only_pc_none {
  display: none;
}

.only_sp_none {
  display: block;
}

.sp_br {
  display: none;
}

.sp600_br {
  display: none;
}

.pc_br {
  display: inline;
}

.pc480_br {
  display: inline;
}


/*---------------------------------------------
 ** ON OFF hover
---------------------------------------------*/
.hover {
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.hover:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}

/*=================================================================================================================================*/
/**  共通部分	*/
/*=================================================================================================================================*/

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.scroll-up.done,
.scroll-fade.done {
  opacity: 1;
  transform: translate(0, 0);
}

/*
-----------------------------------------------
全体の幅
----------------------------------------------- */
.body_wrap{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}


aside{
width:calc(50% - 254px);
position:relative;
z-index:1;
}

.aside_in{
position:fixed;
height:100vh;
width:calc(50% - 254px);
background-image:url(../img/left_bg.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:top left;
}


.right_area{
width:calc(50% - 254px);
position:relative;
z-index:1;
}

.right_area_in{
width:calc(50% - 254px);
height:100vh;
position:fixed;
background-image:url(../img/right_bg.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:top right;
}

main{
  width:508px;
}

/*---------------------------------------------
 ** 左メニュー（PC時のみ）
---------------------------------------------*/
.aside_in .en{
font-weight:700;
font-size:1.8rem;
}

#nav_pc{
position: absolute;
  top: 50%;
  left: 50%;
  width:100%;
  transform: translate(-50%, -50%);
}

#nav_pc li a{
color:#000;
padding-bottom: 3px; /* テキストと下線の間隔 */
background-image: linear-gradient(#000, #000);
background-repeat: no-repeat;
background-position: bottom right; /* 下線の初期位置 */
background-size: 0 1px; /* 下線のサイズ（横幅、高さ） */
transition: background-size 0.3s;
}

#nav_pc li a:hover{
  background-position: bottom left; /* 下線のホバー時位置 */
  background-size: 100% 1px; /* 下線の横幅を100%にする */
}

#nav_pc li{
line-height:2.5;
}



/*---------------------------------------------
 ** 右（PC時のみ）
---------------------------------------------*/
#info_pc{
display:flex;
height:100%;
flex-wrap:nowrap;
justify-content:flex-end;
align-items:flex-end;
padding:0 5% 7% 0;
}


#info_pc .en{font-size:1.8rem !important;font-weight:500;}
#info_pc .mincho{font-size:1.4rem !important;}
#info_pc .address{font-size:1.4rem !important;}

@media screen and (max-width: 1200px) {
#info_pc{
padding:0 4% 18% 7%;
}
}


/*---------------------------------------------
 ** メイン
---------------------------------------------*/

main{
  max-width:508px;
  /* min-height:100svh; */
  box-shadow: 0 0 50px #888888;
  background:#fff;
  color:#000;
  display: block;
  left:calc(50% - 254px);
  /* position:absolute; */
  z-index:8;
}


/*---------------------------------------------
 ** 内容
---------------------------------------------*/
#main video {
  width: 100%; /* 動画をレスポンシブ化 */
  max-width: 508px; /* 動画の最大幅 */
}

#main{
width:100%;
z-index:3;
position:relative;
}

.main_catch{
padding-bottom:5%;
}

.logo_h1{
max-width:190px;
margin:5% auto;
}

.catch01{
text-align:center;
font-size:1.8rem;
}

@media screen and (max-width: 767px) {
.catch01{
font-size:3.5vw;
}
}

/*---------------------------------------------
 ** about
---------------------------------------------*/
.h-type01{
font-size:2.4rem;
text-align:center;
font-weight:700;
}

.about_p{
margin-top:30px;
font-size:1.6rem;
text-align:center;
line-height:1.9;
letter-spacing:0.02em;
}

.about{
padding:8% 0 25%;
background-image:url(../img/about_bg.png);
background-position:top center;
background-size:cover;
background-color:#e6e6e6;
}

@media screen and (max-width: 767px) {
.about_p{
font-size:3.4vw;
}
}

/*---------------------------------------------
 ** 館内
---------------------------------------------*/
.inside{
background-color:#e6e6e6;
padding-bottom:30px;
position:relative;
}

.h-type02{
font-size:4.5rem;
}

.h-type02 span{
letter-spacing:-0.3em;
}
.inside_txt{
position:relative;
padding-bottom:6%;
}

.inside_txt .under_ttl{
position:relative;
text-align:right;
top:-36px;
padding-right:11%;
}

.p01{
font-size:1.6rem;
}

.inside_txt .p01{
position:relative;
padding-left:8%;
margin-top:-36px;
}

.slider img{
height:auto;
width:250px;
display:block;
margin:0 !important;
}

@media screen and (max-width: 767px) {
.slider img{
width: 49.4vw;
}

.h-type02{
font-size:10vw;
}
.inside_txt .under_ttl{
top:-28px;
padding-right:8%;
}

.inside_txt .under_ttl .sub_span img{
width:26vw;
height:auto;
}

.inside_txt .p01{
font-size:3.5vw;
line-height:1.9;
margin-top:-30px;
}

.inside{
padding-bottom:10px;
}

}


/*---------------------------------------------
 ** ロケ
---------------------------------------------*/
.loca{
background-color:#e6e6e6;
padding-bottom:1px;
position:relative;
}

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


/*---------------------------------------------
 **ドレス
---------------------------------------------*/
.dress{
background-color:#e6e6e6;
position:relative;
}

.dress h2{
margin-bottom:8%;
}

.dress_box01{
position:relative;
background-image:url(../img/dress_bg.png);
background-position:top left;
background-size:contain;
background-repeat:no-repeat;
padding-top:13%;
padding-bottom:30px;
margin-top:-20px;
}

.dress_box01 .under_ttl02{
position:absolute;
text-align:left;
left:13%;
top:14%;
}

.dress_flex01{
padding:0 8% 8%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-end;
}

.dress_main_img{width:60%;}
.dress_txt{width:40%;}


.dress_box02{
position:relative;
background-image:url(../img/dress_bg02.png);
background-position:top right;
background-size:contain;
background-repeat:no-repeat;
padding-top:19%;
padding-bottom:30px;
margin-top:-60px;
}

.dress_box02 .under_ttl02{
position:absolute;
text-align:left;
right:11%;
top:7%;
}

.dress_box02 .dress_txt{width:34% !important;}
.dress_box02 .dress_txt{margin-bottom:1em;}


.dress_box03{
position:relative;
background-image:url(../img/dress_bg03.png);
background-position:top left;
background-size:contain;
background-repeat:no-repeat;
background-color:#fff;
padding-top:6%;
padding-bottom:30px;
margin-top:-20px;
}

.dress_box03 .under_ttl02{
position:absolute;
text-align:left;
left:13%;
top:14%;
}

.dress_box03 .under_ttl02{
position:absolute;
text-align:left;
left:24%;
top:3.6%;
}

.dress_box03 .dress_txt{margin-bottom:1em;}

@media screen and (max-width: 767px) {
.under_ttl02 .sub_span02 img{
width:34vw;
height:auto;
}

.dress_box01 .under_ttl02{
position:absolute;
text-align:left;
left:20vw;
top:15.5%;
}

.dress_txt .p01{
font-size:3.4vw;
}

.dress_box02 .dress_txt{width:37% !important;}

.dress_box03{
padding-bottom:5px;
}

}



/*---------------------------------------------
 **プラン
---------------------------------------------*/
.plan{
background-color:#e6e6e6;
position:relative;
}

.plan h2{
margin-bottom:5%;
padding-top:5%;
}

.h-type03{
font-size:2.7rem;
font-weight:600;
text-align:center;
border-top:solid 1px #222;
padding-top:2%;
padding-bottom:5%;
}

.h-type03 .span01{
color:#bc859b;
}

.h-type03 .span02{
letter-spacing:-0.12em;
}

.plan_box01{
margin-bottom:20%;
background-image:url(../img/plan_bg01.png);
background-position:left top;
background-size:contain;
background-repeat:no-repeat;
}


.plan_box02{
padding-bottom:25%;
background-image:url(../img/dress_bg02.png);
background-position:right 40px;
background-size:contain;
background-repeat:no-repeat;
}


.plan_box03{
background-image:url(../img/dress_bg03.png);
background-position:center bottom;
background-size:contain;
background-repeat:no-repeat;
}




.plan_box01_in{
padding-left:5%;
padding-right:5%;
}

.plan_img01{
padding-left:5%;
padding-right:5%;
margin-bottom:15px;
}

.price{
color:#797c8b;
text-align:center;
font-weight:500;
font-size:2.6rem;
height:60px;
line-height:58px;
background:#fff;
border:solid 1px #222;
margin-bottom:15px;
}

.price span{
font-size:1.7rem;
}

.plan_data{
background:#fff;
border:solid 1px #222;
padding:1% 3% 2%;
}

.plan_data dl{
text-align:left;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
border-bottom:solid 1px #666;
padding-top:14px;
padding-bottom:14px;
align-items:center;
}

.plan_data dt{
width:27%;
font-family: "Noto Sans JP", sans-serif;
font-size:1.3rem;
}

.plan_data dt span{
display:inline-block;
width:40px;
text-align:center;
}

.plan_data dt span img {
	vertical-align:middle !important;
}

.plan_data dd{
width:70%;
font-size:1.4rem;
letter-spacing:-0.02em;
}

.plan_data dl.no_line{
border-bottom:none !important;
}

.plan_p01{
font-size:1.8rem;
text-align:center;
padding:8% 0 10%;
}

@media screen and (max-width: 767px) {
.plan h2{
padding-top:7%;
}

.h-type03{
font-size:6vw;
}


.plan_data dt{
width:29%;
font-size:2.6vw;
}

.plan_data dd{
width:69%;
font-size:2.8vw;
letter-spacing:-0.02em;
}

.plan_p01{
font-size:4vw;
}

}


/*---------------------------------------------
 **インスタ
---------------------------------------------*/
.insta{
background:#bc859b;
padding:5%;
}

.insta .h-type01{
display:flex;
flex-wrap:wrap;
justify-content:center;
column-gap:5px;
align-items:center !important;
margin-bottom:20px;
}

.insta img{
transition: opacity 0.3s ease-in;
}

.insta a:hover img{
opacity:0.7;
}


/*---------------------------------------------
 ** FAQ
---------------------------------------------*/
.faq{
padding:8% 5% 5%;
background-color:#e6e6e6;
position:relative;
}

.faq h2{
margin-bottom:6%;
}


.accordion-content {
  display: none;
}

.accordion-header {
  background-color: #FFF;
  padding: 12px 45px 10px 20px;
  margin: 10px 0 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
  font-size:1.4rem;
  text-align:left;
}

.accordion-header::before,
.accordion-header::after{
  position:absolute;
  content:'';
  top:1px;
  left:20px;
  bottom:0;
  width:12px;
  height:2px;
  margin:auto;
  background:#151E2F;
}
.accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}

.accordion-header.active::after{transform:rotate(0deg) !important;}

.accordion-content {
  background-color: #84a0af;
  color:#fff;
  padding: 12px 0px 10px 18px;
  font-size:1.3rem;
  text-align:left;
  letter-spacing:-0.03em;
}

.accordion-header span{
  padding-left: 25px;
  position: relative;
}

.accordion-header:hover {
  background-color: #F2F2F2;
}

@media screen and (max-width: 767px) {
.accordion-content {
  padding: 12px 10px 10px 12px;
}

.accordion-header {
  font-size:3.4vw;
}

.accordion-content {
  font-size:3.2vw;
}

}

/*---------------------------------------------
 ** footer
---------------------------------------------*/

.footer{
background:#797C8B;
padding:8% 5% 20%;
position:relative;
}

.footer p{
color:#fff;
text-align:center;
}

.ravir_btn{
padding:0 15% 10%;
}

.footer h2{
padding:0 30% 8%;
}

.footer_p01{
margin-bottom:8%;
font-size:1.8rem;
}

.footer p.en{
font-size:2.2rem;
margin-bottom:10px;
}

.footer p.go{
font-size:1.8rem;
}

@media screen and (max-width: 767px) {
.footer_p01{
font-size:3.7vw;
letter-spacing:-0.02em;
}

.footer p.en{
font-size:5vw;
margin-bottom:10px;
}

.footer p.go{
font-size:3.7vw;
}

}

/*---------------------------------------------
 ** footer固定ボタン
---------------------------------------------*/

.foot_btn{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
  position: fixed;
  bottom: 0;
  width: 508px;
  z-index:5;
}

.foot_btn li{
width:50%;
}

.foot_btn li a{
display:block;
font-size:1.6rem;
color:#fff;
padding:15px 0;
}


.foot_btn .li01 a{
background:#bc859b;
}

.foot_btn .li01 a:hover{
background:#a56a82;
}

.foot_btn .li02 a{
background:#84a0af;
}
.foot_btn .li02 a:hover{
background:#678ea0;
}


@media screen and (max-width: 767px) {
.foot_btn{
  width: 100%;
  z-index:5;
}
}


/*---------------------------------------------
 ** お問い合わせ
---------------------------------------------*/

.contact{
padding:8% 5% 15%;
background-color:#e6e6e6;
position:relative;
}

.contact h2{
margin-bottom:6%;
}

.contact_p{
font-size:1.4rem;
letter-spacing:-0.02em;
margin-bottom:6%;
}

.contact_thanks{
padding:8% 5% 15%;
height:100vh;
background-color:#e6e6e6;
position:relative;
}

.contact_thanks h2{
font-size:2.0rem;
padding:5% 0 10%;
}

.top_back{
text-align:center;
margin:10% 0;
}

.top_back a{
text-decoration:underline;
color:#bc859b;
}

/*---------------------------------------------
 ** デバイスごとの表示
---------------------------------------------*/
@media screen and (max-width: 1024px) {

.right_area{
display:none;
}

aside{
display:none;
}

body{
background-color:#e6e4e2;
}

  main{
    margin:0 auto;
}

}


@media screen and (max-width: 767px) {
  main{
    right:0;
    left:0;
    margin:0 auto;
    width:100%;
  max-width:100%;
  box-shadow: none;
  top:0;
}

}



/*
-----------------------------------------------
flex
----------------------------------------------- */
.container01{
display:flex;
flex-wrap:wrap;
}

.container02{
display:flex;
flex-wrap:nowrap;
}

.container03{
display:flex;
flex-wrap:wrap-reverse;
}

.al-item01{
align-items:flex-end
}

.c-type01{
justify-content:space-between;
}

.c-type02{
justify-content:space-around;
}

.c-type03{
justify-content:flex-start;
}

.c-type04{
justify-content:center;
}

.ai-01{align-items:flex-start;}
.ai-02{align-items:flex-end;}
.ai-03{align-items:center;}
.ai-04{align-items:baseline;}
.ai-04{align-items:stretch;}

/*
-----------------------------------------------
ページTOP
----------------------------------------------- */

#page-top {
  position: fixed;
  bottom:15px;
  right: 30px;
  font-size: 14px;
  line-height: 1;
  z-index: 10;
}

#page-top a {
  display: block;
  width: 50px;
  height: 50px;
  background: url(../img/pagetop.png) no-repeat;
  background-size: 100%;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

#page-top a:hover {
  text-decoration: none;
  opacity: .9;
}

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

#page-top a {
  width: 40px;
  height: 40px;
}

#page-top {
  bottom:9%;
  right: 3%;
}
}