@charset "UTF-8";
/* CSS Document */
@media only screen and (max-width:768px) {
  /*------------------------------------
スマホ用レイアウト（768px以下スクリーン）
------------------------------------*/
  /*--------------------
共通設定（PC)
--------------------*/
  /*body全体の初期スタイル設定*/
  body {
  font-size: 58%;
  font-family: "Noto Serif JP", serif;
  color: #232323;
  overflow-x:hidden;
  }
  /*リンク文字の設定*/
  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: none;
  }
  /*ブラウザのCSSのリセット*/
  p {
    margin: 0 !important;
    padding: 0 !important;
  }
  /*セクションエリアの共通設定*/
  section {
    clear: both;
  }
  /*--------------------
全体レイアウト共通設定
--------------------*/
  /*全体エリアを設定するにはここ*/
  .main {
    background-image: none;
  }
  /*記事（ボディ）エリア*/
  .article {
    font-size: 1.6em;
  }
  /*記事（ボディ）エリアの行間*/
  .article p {
    line-height: 1.8;
  }
  /*カラム全体の幅を変更する*/
  .top_image_in {
    width: 100%;
    margin: 0 auto;
  }
  .pc_view {
    display: none !important;
  }
  .sp_view {
    display: block !important;
  }
/*--------------------
セクションの設定
--------------------*/
.section_over {
  width: 100%;
  height: auto;
}
.section_under {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 1.5em 0em;
  background: #fff;
  box-shadow: none;
}
/*--------------------
見出しの設定
--------------------*/
h2 {
  margin: 0em;
  padding: 0.5em;
  text-align: center;
  font-size: 3em;
  font-weight: bold;
  color: #232323;
  letter-spacing: 0.2em;
}
h3 {
  display: block;
  font-size: 1.17em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 500;
  unicode-bidi: isolate;
}
/*--------------------
ファーストビューエリアの設定
--------------------*/
.under_fv {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0em 0em 0em;
}
.fv{
  height:auto;
  background:#fff;
}
.fv__content{
  display:block;
}
.fv__left{
  width:100%;
}
.fv__right{
  display:none;
}
.fv__logo{
  position:relative;
  margin-bottom: 50px;
  margin-top: 50px;
}
.fv__logo img{
  width:100%;
  display:block;
}
.fv__text{
  width: 100%;
  margin: 0 auto;
  padding:0;
  max-width:none;
  margin-bottom:0;
}
.fv__sub-en{
  padding:60px 24px 40px;
  font-size:13px;
  line-height:1.7;
  margin-bottom:0;
}
.fv__title{
  font-size:clamp(34px, 8vw, 48px);
  line-height:1.5;
  padding:0 24px 40px;
  margin-bottom:0;
  letter-spacing:0.05em;
}
.fv__sp-image{
  display:block;
  margin-bottom:40px;
}
.fv__sp-image img{
  width:100%;
  display:block;
}
.fv__description{
  padding:0 24px;
  font-size:14px;
  line-height:2.2;
  padding-bottom:0;
}
.fv__btn{
  width:calc(100% - 48px);
  margin:60px auto 20px;
}
.fv__note{
  text-align:center;
  padding-bottom:60px;
}
.fv_90 {
  width: 90%;
  margin: 0 auto;
}

/*--------------------
セクション見出しの設定
--------------------*/
.midashi h2 {
  font-size: 17px;
}


/*--------------------
PHILOSOPHYエリアの設定
--------------------*/
.philosophy_con {
  width: 90%;
  margin: 3em auto;
}

.philosophy_img{
	position:relative;
	max-width:100%;
	height:800px;
	margin:0 auto;
}

/* 画像共通 */
.philosophy_img img{
	position:absolute;
	display:block;
	object-fit:cover;

	opacity:0;
	transform:translateY(50px) scale(.95);
	filter:blur(8px);

	margin-top:10em;
}
.philosophy_img{
	position:relative;
	height:800px;
}
.img_100{
  margin-top:5em;
	opacity:0;
	transform:translateY(80px) scale(1.05);
	filter:blur(8px);

	transition:
		opacity 2.5s ease,
		transform 2.5s ease,
		filter 2.5s ease;
}
.img_100.active{
	opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);
}

/* 右 */
.philosophy_img.active img:nth-child(3){
  width:80%;
  right:0;
  top:0;

	opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);

	transition:1.2s ease;
}
/* 左 */
.philosophy_img.active img:nth-child(1){
  width: 36%;
  left: 200px;
  bottom: 50px;

	opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);

	transition:1.2s ease;
	transition-delay:.5s;
}
/* 真ん中 */
.philosophy_img.active img:nth-child(2){
  width: 50%;
  left: 0px;
  top: 330px;

  opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);

	transition:1.2s ease;
	transition-delay:1s;
}


/*--------------------
IMPORTANTエリアの設定
--------------------*/
.important_con {
  width: 90%;
  margin: 1em auto;
}
.important_box {
  padding: 5em 0;
}
.important_title {
  margin-top: 20px;
}
.important_num {
  font-size: 30px;
}
.important_title .important_txt_title {
  font-size: 18px;
  line-height: 2;
}
.important_txt_title {
  letter-spacing: 1.3;
  padding-bottom: 1em;
}
.important_txt {
  margin: 0.8em 0;
}
.important_txt .important_txt_text {
  line-height: 1.8;
}
.important_img{
	position:relative;
	height:700px;
	margin-top:8em;
}

/* 画像共通 */
.important_img img{
	position:absolute;
	display:block;
	object-fit:cover;

	opacity:0;
	transform:translateY(60px) scale(.95);
	filter:blur(8px);
}
/* 左 */
.important_img img:nth-child(1){
  width: 40%;
  left: 210px;
  top: 230px;
}
/* 中央 */
.important_img img:nth-child(2){
	width:80%;
	left:0px;
	transform:translateX(-50%) translateY(60px) scale(.95);
	top:0;
}
/* 右 */
.important_img img:nth-child(3){
  width: 45%;
  right: 200px;
  top: 200px;
}
/* 中央 → 最初 */
.important_img.active img:nth-child(2){
	opacity:1;
	transform:translateX(-0%) translateY(0) scale(1);
	filter:blur(0);

	transition:1.5s ease;
}
/* 左 → 2番目 */
.important_img.active img:nth-child(1){
	opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);

	transition:1.5s ease;
	transition-delay:.5s;
}
/* 右 → 最後 */
.important_img.active img:nth-child(3){
	opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);

	transition:1.5s ease;
	transition-delay:1s;
}

/*--------------------
NAYAMIエリアの設定
--------------------*/

.nayami_txt{
	margin-top:3em;
	margin-bottom:5em;
}
.nayami_span{
	font-size:15px;
	display:block;
  font-weight:400;
}
.nayami_txt p{
	font-size:18px;
	font-weight:600;
  line-height:1.3;
}
.nayami_con_img {
  width: 90%;
  margin: 0 auto;
	margin-top:3em;
}
.nayami_img{
	position:relative;
	height:700px;
	margin-top:0em;
}

/* 共通 */
.nayami_img img{
	position:absolute;
	display:block;
	object-fit:cover;

	opacity:0;
	transform:translateY(60px) scale(.95);
	filter:blur(8px);
}
/* 左 */
.nayami_img img:nth-child(1){
  width: 46%;
  left: 0;
  top: 0px;
}
/* 中央 */
.nayami_img img:nth-child(2){
  width: 48%;
  left: 30%;
  top: 330px;
	transform:translateX(-50%) translateY(60px) scale(.95);
}
/* 右 */
.nayami_img img:nth-child(3){
  width: 40%;
  right: 0;
  top: 50px;
}
/* 下 */
.nayami_img img:nth-child(4){
  width: 60%;
  right: 15px;
  bottom: -90px;
}
/* 中央 */
.nayami_img.active img:nth-child(2){
	opacity:1;
	transform:translateX(-50%) translateY(0) scale(1);
	filter:blur(0);

	transition:1.5s ease;
}
/* 左 */
.nayami_img.active img:nth-child(1){
	opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);

	transition:1.5s ease;
	transition-delay:.3s;
}
/* 右 */
.nayami_img.active img:nth-child(3){
	opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);

	transition:1.5s ease;
	transition-delay:.6s;
}
/* 下 */
.nayami_img.active img:nth-child(4){
	opacity:1;
	transform:translateY(0) scale(1);
	filter:blur(0);

	transition:1.5s ease;
	transition-delay:.9s;
}


/*--------------------
KODAWARIエリアの設定
--------------------*/
.kodawari{
	margin:10em 0;
}
.kodawari_con {
  width: 90%;
  margin: 1em auto;
}
.kodawari_title{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin-bottom:5em;
}
.midashi .kodawari_title h2{
  font-weight: 400;
}
.kodawari_title span{
	display:block;
	width:50px;
	height:1px;
	background:#333;
}
.kodawari_item{
	display:flex;
	align-items:center;
	gap:14px;

	padding:1em 1.5em;

	opacity:0;
	transform:translateY(50px);
	filter:blur(8px);
}
.kodawari_item:nth-of-type(odd){
	background:#f4efe9;
}
.kodawari_icon{
	width:45px;
	flex-shrink:0;
}
.kodawari_icon img{
	width:100%;
	display:block;
}
.kodawari_text h3{
	font-size:20px;
	font-weight:400;
	margin-bottom:.2em;
}
.kodawari_text p{
	line-height:2;
	margin:0;
}
.kodawari_item.active{
	opacity:1;
	transform:translateY(0);
	filter:blur(0);

	transition:0.7s ease;
}


/*--------------------
MESSAGEエリアの設定
--------------------*/
#message {
  padding: 6em 0;
  background-color: #fff;
}
.message{
	margin:10em 0;
  background-image: url(../images/bg_message.jpg);
  background-size:  cover; 
}
.message_con {
  width: 100%;
  margin: 1em auto;
}
.message_con .midashi {
  margin-bottom: 30px;
}
.message_con .message_p {
  text-align: center;
  line-height: 2.4;
}


/*--------------------
GALLERYエリアの設定
--------------------*/
#gallery {
  padding: 5em 0;
  background-color: #fff;
}
.gallery_con {
  width: 90%;
  margin: 1em auto;
}
.gallery{
	padding:120px 0;
}
.gallery .midashi {
  margin-bottom: 5em;
}
.gallery_grid{
	max-width:1100px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:10px;
}
.gallery_btn{
	width:80%;
	height:50px;
}


/*--------------------
FAIR PRICEエリアの設定
--------------------*/

#price_concept{
  padding:5em 0;
}

.price_concept{
  padding:0;
}

.price_concept_box{
  flex-direction:column;
  gap:2em;
  margin-bottom:6em;
  padding:0 20px;
}

.price_concept_box.reverse{
  flex-direction:column;
}

.price_concept_img_con{
  width:100%;
}

.price_concept_txt{
  width:100%;
}

.price_concept_txt h3{
  font-size:24px;
  line-height:1.5;
  margin-bottom:.8em;
}

.price_concept_txt p{
  font-size:14px;
  line-height:2;
}

/* ======================
    下の3枚画像
====================== */
.price_concept_img{
	position:relative;
	height:500px;
	margin-top:8em;
}
/* 画像共通 */
.price_concept_img img{
	position:absolute;
	display:block;
	object-fit:cover;

	opacity:0;
	transform:translateY(60px) scale(.95);
	filter:blur(8px);
}
/* 左 */
.price_concept_img img:nth-child(1){
  width: 50%;
  left: 0px;
	top:220px;
}
/* 中央 */
.price_concept_img img:nth-child(2){
  width: 80%;
  left: 210px;
	transform:translateX(-50%) translateY(60px) scale(.95);
	top:0;
}
/* 右 */
.price_concept_img img:nth-child(3){
  width: 40%;
  right: 0px;
	top:200px;
}

/*--------------------
WEDDING PLANエリアの設定
--------------------*/
.wedding_plan_con{
  width:auto;
  padding:0 20px;
}

/* ------------------
構造図
------------------ */
.structure{
  width:100%;
  flex-direction:column;
  gap:15px;
}

.structure-box{
  width:100%;
}

.plus{
  margin:0;
}

.structure-box .top,
.structure-box .bottom{
  font-size:16px;
  padding:14px;
}

/* ------------------
見出し
------------------ */

.heading{
  margin:50px 0 25px;
}

.heading h2{
  font-size:20px;
  letter-spacing:2px;
}

.heading div{
  padding:0 12px;
}

/* ------------------
料金
------------------ */

.price-row{
  flex-direction:column;
}

.price-left,
.price-right{
  width:100%;
  box-sizing:border-box;
  padding: 20px 35px;
}

.price{
  font-size:32px;
}
.price-right strong{
  font-size:32px;
}

.weekend{
  font-size:14px;
}

/* ------------------
含まれるもの
------------------ */

.item{
  gap:20px;
  margin-bottom:40px;
}
.features_icon{
  width:20%;
}
.features_content {
  width: 80%;
}
.features_content h3{
  font-size:17px;
  line-height:1.6;
}
.features_content h3 span{
  font-size:30px;
}
.tags{
  line-height:2;
}
.tags span{
  margin:0 5px 0 0;
}

/* ------------------
FLOW
------------------ */
.step{
  flex-direction:column;
  margin-bottom:40px;
}
.step-left{
  width:100%;
  box-sizing:border-box;
}
.step-right{
  width:100%;
  padding-left:0;
  padding-top:20px;
  box-sizing:border-box;
}

/* ------------------
PLAN画像
------------------ */
.plan_img{
	position:relative;
	height:700px;
	margin-top:5em;
}
/* 共通 */
.plan_img img{
	position:absolute;
	display:block;
	object-fit:cover;

	opacity:0;
	transform:translateY(60px) scale(.95);
	filter:blur(8px);
}
/* 左 */
.plan_img img:nth-child(1){
  width: 35%;
  left: 0;
  top: 200px;
}
/* 中央 */
.plan_img img:nth-child(2){
  width: 40%;
  left: 250px;
  top: 330px;
	transform:translateX(-50%) translateY(60px) scale(.95);
}
/* 右 */
.plan_img img:nth-child(3){
  width: 45%;
  right: 0;
  top: 0;
}
/* 下 */
.plan_img img:nth-child(4){
  width: 45%;
  right: 220px;
  bottom: 0px;
}


/* ------------------
FLOW画像
------------------ */
.flow_img{
	position:relative;
	height:710px;
	margin-top:5em;
}
/* 共通 */
.flow_img img{
	position:absolute;
	display:block;
	object-fit:cover;

	opacity:0;
	transform:translateY(60px) scale(.95);
	filter:blur(8px);
}
/* 左 */
.flow_img img:nth-child(1){
  width: 63%;
  right: 0px;
  top: 0px;
}
/* 中央 */
.flow_img img:nth-child(2){
  width: 30%;
  left: 20%;
  top: 230px;
	transform:translateX(-50%) translateY(60px) scale(.95);
}
/* 右 */
.flow_img img:nth-child(3){
  width: 50%;
  left: 180px;
  top: 350px;
}
/* 下 */
.flow_img img:nth-child(4){
  width: 50%;
  right: 180px;
  bottom: 0;
}

/* ------------------
本文
------------------ */
.text{
  font-size:14px;
  line-height:2;
}
.bar{
  font-size:14px;
  padding:12px;
}


/*--------------------
RESERVATIONエリアの設定
--------------------*/
.reservation{
  width:auto;
  margin:3em auto;
  padding:0 20px;
  box-sizing:border-box;
}

/* STEP */
.reservation__step-en{
  font-size:15px;
}
.reservation__step-no{
  font-size:40px;
}

/* BOX */
.reservation__box{
  text-align:center;
  gap: 10px;
  padding:30px 19px;
}
.reservation__icon{
  width:19%;
  height:90px;
  margin-bottom:20px;
}
.reservation__icon img{
  width:100%;
  height:auto;
}

/* CONTENT */
.reservation__content{
  margin-left:0;
  width:100%;
}
.reservation__content h3{
  font-size:14px;
  line-height:1.6;
  padding-bottom:12px;
}
.reservation__content p{
  margin-top:12px;
  font-size:14px;
  line-height:1.9;
  text-align: left;
}

/* ARROW */
.reservation__arrow{
  height:50px;
}
.reservation__arrow::before{
  width:20px;
  height:20px;
}

/*--------------------
CTAエリアの設定
--------------------*/
#cta{
  padding:3em 0;
}
#cta_line {
  padding:3em 0;
}
.cta{
  margin:0 auto;
}
.reservation-calendar{
  padding:60px 20px;
}
.reservation-calendar__inner{
  width:100%;
}

/* タイトル */
.reservation-calendar__title{
  font-size:24px;
  line-height:1.6;
  letter-spacing:.03em;
}

/* テキスト */
.reservation-calendar__text{
  margin-top:18px;
}
.reservation-calendar__text p{
  font-size:14px;
  line-height:2;
}
.cta_line__text {
    width: 90%;
    margin: 0 auto;
    padding: 1em 0 2em 0;
}

/* CTAボタン */
.cta_btn_con{
  width:100%;
  max-width:320px;
  margin:2em auto;
}
.cta_btn_con img{
  width:100%;
  display:block;
}

/* 注釈 */
.reservation-calendar__note{
  font-size:12px;
}

/*画像*/
.cta_img{
	position:relative;
	height:1000px;
	margin-top:8em;
}
/* 共通 */
.cta_img img{
	position:absolute;
	display:block;
	object-fit:cover;

	opacity:0;
	transform:translateY(60px) scale(.95);
	filter:blur(8px);
}
/* 左 */
.cta_img img:nth-child(1){
  width: 55%;
  left: 0;
  top: 400px;
}
/* 中央 */
.cta_img img:nth-child(2){
  width: 40%;
  left: 25%;
  top: 230px;
	transform:translateX(-50%) translateY(60px) scale(.95);
}
/* 右 */
.cta_img img:nth-child(3){
  width: 50%;
  right: 0;
  top: 0px;
}
/* 下 */
.cta_img img:nth-child(4){
  width: 55%;
  right: 0px;
  bottom: 0px;
}


/*--------------------
FAQエリアの設定
--------------------*/
#faq {
  padding: 5em 0;
  background-color: #fff;
}
.faq {
  width: 90%;
  margin: 1em auto;
}
.faq_con {
  margin: 5em auto;
}


/*--------------------
LOCATIONエリアの設定
--------------------*/
#location{
  padding:5em 0;
}

.location{
  width:90%;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}
.location_con{
  margin:3em auto 0;
}

.reservation-shop__inner{
  width:100%;
}

/* 上部説明 */

.reservation-shop__lead{
  font-size:14px;
  line-height:2;
  margin-bottom:40px;
}

/* 店舗名 */

.reservation-shop__title{
  font-size:18px;
  padding:12px;
  margin:20px 0;
}

/* 店舗情報 */

.reservation-shop__row{
  flex-direction:column;
  gap:12px;
  padding:18px 0;
}

.reservation-shop__label{
  width:100%;
  gap:12px;
}

.reservation-shop__label img{
  width:24px;
  height:24px;
}

.reservation-shop__label span{
  font-size:15px;
}

.reservation-shop__value{
  font-size:14px;
  line-height:1.8;
  padding-left:36px;
}

/* 注意事項 */

.reservation-shop__notes{
  padding-left:20px;
  margin-top:25px;
}

.reservation-shop__notes li{
  font-size:14px;
  line-height:1.8;
  margin-bottom:12px;
}

/* MAP */

.reservation-shop__map{
  margin-top:50px;
}
.reservation-shop__map-btn{
  width:80%;
	height:50px;
  font-size:14px;
  letter-spacing:.1em;
}



/*--------------------
トップに戻るボタン
--------------------*/
  .pagetop {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 15px;
  }
  .pagetop a {
    display: none;
    background-color: #fff;
    text-align: center;
    color: #2d2d2d;
    border: 1px solid #2d2d2d;
    text-decoration: none;
    padding: 10px 15px;
  }
  .pagetop a:hover {
    display: none;
    background-color: #2d2d2d;
    text-align: center;
    color: #fff;
    border: none;
    text-decoration: none;
    padding: 10px 15px;
    opacity: 0.5;
  }
  .pagetop_sankaku {
    font-size: 3em;
  }



}