@charset "utf-8";

/*
-----------------------------------------------
▼基本デザイン 2024.10
----------------------------------------------- */

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}

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


html {
font-size: 62.5%;
}

body {
font-size: 1.6rem;
line-height:1.7;
/* font-feature-settings: "palt" 1; */
}


body {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


.en{
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight:500;
}

small {
font-size:80%;
}
article,aside,figure,footer,header,main,menu,nav,section {
display:block;
}
audio,canvas,video {
display:inline-block;
}
img {
vertical-align:bottom;
}
input,select {
font-size:100%;
vertical-align:middle;
}
ul,ol {
list-style-type:none;
}
h1,h2,h3,h4,h5,h6,strong {
-webkit-font-smoothing:antialiased;
}
table {
border-collapse:collapse;
border-spacing:0;
}

a {
color:#08c;
text-decoration:none;
}
a:hover,a:active {
text-decoration:underline;
}
a img {
transition:opacity 0.5s ease-in-out;
}
a:hover img {
opacity:0.8;
}

.spOnly{
	display: none;
}

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

body {
font-size: 1.4rem;
}


}

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

/*
-----------------------------------------------
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;
}

.c-type05{
justify-content:flex-end;
}

.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;}

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

.tac_all{
margin-left:auto;
margin-right:auto;
text-align:center;
}

/*
-----------------------------------------------
▼全体
----------------------------------------------- */
body{
}



/*
-----------------------------------------------
▼ヘッダー
----------------------------------------------- */


/*
-----------------------------------------------
▼メインイメージ
----------------------------------------------- */
#main_img{
position:relative;
}

#main_img  img{
position:relative;
}

#main_img h1{
line-height:1.2;
color:#5dad6c;
position:absolute;
font-weight:600;
text-align:center;
top:10%;
margin:auto;
right: 0;
left: 0;
font-size:6.0rem;
filter: drop-shadow(5px 5px 4px #fff);
}

#main_img h1 .span01{
font-size:10rem;
}

#main_img p{
line-height:1.9;
color:#000;
position:absolute;
font-weight:600;
text-align:center;
bottom:7%;
margin:auto;
right: 0;
left: 0;
font-size:1.6rem;
text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
filter:drop-shadow(0px 0px 4px rgba(255, 255, 255, 1));
}

#main_img p span{
text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
filter:drop-shadow(0px 0px 4px rgba(255, 255, 255, 1));
}


/*
-----------------------------------------------
▼ポイント
----------------------------------------------- */
#point{
padding:100px 0;
position:relative;
}

#point h2{
font-weight:500;
font-size:4.0rem;
color:#5dad6c;
line-height:1.5;
margin-bottom:35px;
}

#point .sub{
color:#5dad6c;
font-size:2.5rem;
margin-bottom:20px;
}


#point .p01{
line-height:1.9;
}

.point_box{
position:relative;
z-index:5;
max-width:1300px;
margin:0 auto;
display:flex;
flex-wrap:wrap-reverse;
justify-content:space-between;
}

.point_box .img_box{
width:49%;
}

.point_box .txt_box{
width:44%;
}

#point .bg_img_right{
position:absolute;
top:0;
right:0;
z-index:1;
}

/*
-----------------------------------------------
▼プレゼント
----------------------------------------------- */

#present .bg_img_left{
position:absolute;
top:-300px;
left:0;
z-index:1;
}


#present{
position:relative;
z-index:2;
}

#present h2{
font-weight:500;
font-size:5.0rem;
color:#5dad6c;
line-height:1.5;
margin-bottom:35px;
}

#present h2 .span01{
font-size:3.3rem;
}

#present h2 .span02{
font-size:6rem;
font-weight:400 !important;
}

#present .sub{
color:#5dad6c;
font-size:2.5rem;
position:relative;
padding-bottom:10px;
}

#present .sub:before {
  content: '';
  background-color:#5dad6c;
  width: 3em;
  height: 2px;
  position: absolute;
  bottom: 0;
  margin:0 auto;
  left:0;
  right:0;
}

#present .p01{
margin-bottom:15px;
}

.present_box{
position:relative;
z-index:10;
max-width:1300px;
margin-left:auto;
margin-right:auto;
}

.present_ul{
position:relative;
z-index:5;
display:flex;
flex-wrap:wrap;
justify-content:center;
column-gap:2.9%;
margin-top:70px;
}

.present_ul li{
width:31.4%;
margin-bottom:60px;
}

.present_ul li img{
display:block;
width:100%;
height:auto;
margin-bottom:6px;
}

.present_ul li p{
font-size:2.0rem;
}

.other_mk{
position:absolute;
bottom:80px;
right:-10px;
}

#present_in{
padding:50px 0;
background: rgba(231,239,199,0.76);
position:relative;
z-index:5;
}

/*
-----------------------------------------------
▼ブライダルフェア
----------------------------------------------- */
#fair_in{
	background-color: #fff;
	padding-left: 4%;
	padding-right: 4%;
	padding-top: 140px;
	padding-bottom: 140px;
}
.fair_box{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
.fair_box a{
	display: flex;
}
.fair_box a:hover{
	text-decoration: none;
}
.fair_slide{
	width: 47%;
}
.fair_txt{
	width: 53%;
}
.fair_txt{
	background-color: #d4d3ca;
	color: #fff;
	outline: 1px solid rgb(255, 255, 255);
	outline-offset: -10px;
	padding: 55px;
}
.fair_ttl_en{
	font-size: 7rem;
	line-height: 1.4;
}
.fair_ttl_jp{
	font-size: 5.7rem;
	line-height: 1;
}
.fair_txt h2{
	margin-bottom: 35px;
}
.fair_txt p{
	font-size: 2.5rem;
}
.btn_fair div{
	display: inline-block;
	background-color: #5dad6c;
	border: solid 1px #5dad6c;
	color: #fff;
	font-size: 1.8rem;
	padding: 0 2em 0 1.2em;
	font-family: "Noto Sans JP", sans-serif;
	transition: all 0.5s 0s ease;
	margin-top: 30px;
}
.fair_box a:hover .btn_fair div{
	background-color: #fff;
	color: #5dad6c;
	text-decoration: none;
}
.arrow {
  position: relative;
  display: inline-block;
  width: 7.4px;
  height: 13.7px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: -0.5em;
  width: 10px;
  height: 1px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 0.5px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}

.fair_box a:hover .arrow::before,
.fair_box a:hover .arrow::after{
	background-color: #5dad6c;
}
/*
-----------------------------------------------
▼footer
----------------------------------------------- */
.footer_in{
	background-color: #5dad6c;
	color: #fff;
	text-align: center;
	font-size: 2.5rem;
	font-weight: 500;
	padding: 0.5em 0;
}

/*
-----------------------------------------------
▼header
----------------------------------------------- */
#main_img{
	position: relative;
}
.header_logo{
	position: absolute;
	top: 30px;;
	left: 50px;
	z-index: 1;
	width: 270px;
}
.header_logo img{
	width: 100%;
}

/*
-----------------------------------------------
▼ディスプレイd
----------------------------------------------- */
.under600{
	display: none;
}
.under500{
	display: none;
}

/*
-----------------------------------------------
▼レスポンシブ　PC〜タブレット
----------------------------------------------- */
@media screen and (max-width: 1505px){
.fair_ttl_en{
	font-size: 6rem;
}
.fair_ttl_jp{
	font-size: 4.7rem;
}
.fair_txt p{
	font-size: 2.2rem;
}
.fair_txt{
	padding: 3% 4%;
}
.fair_txt h2{
	margin-bottom: 20px;
}
}
@media screen and (max-width: 1400px){
	#main_img h1{
		font-size: 4.8rem;
	}
	#main_img h1 .span01{
		font-size: 7rem;
	}
	.present_ul{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.other_mk{
		right: 50px;
		width: 120px;
	}
}
@media screen and (max-width: 1300px){
	#point .sub{
		font-size: 2rem;
	}
	#point h2{
		font-size: 3rem;
	}
	.point_box{
		justify-content: flex-start;
		column-gap: 4%;
	}
	.header_logo{
		width: 16vw;
		top: 3%;
		left: 3%;
	}
}
@media screen and (max-width: 1200px){
	#main_img h1{
		font-size: 4.5rem;
	}
	#main_img h1 .span01{
		font-size: 7rem;
	}
	#main_img p{
		font-size: 1.4rem;
	}
	#present h2{
		font-size: 4rem;
	}
	#present h2 .span01{
		font-size: 2.7rem;
	}
	#present .sub{
		font-size: 2rem;
		padding-bottom: 7px;
	}
	.present_ul li p{
		font-size: 1.7rem;
	}
	#present h2 .span02{
		font-size: 4.5rem;
	}
}
@media screen and (max-width: 1240px){
	.fair_ttl_en{
		font-size: 4.7vw;
	}
	.fair_ttl_jp{
		font-size: 3.7vw;
	}
	.btn_fair div{
		font-size: 1.5rem;
	}
	.fair_txt p{
		font-size: 1.6rem;
	}
}
@media screen and (max-width: 900px){
	.fair_ttl_en{
		font-size: 4vw;
	}
	.fair_ttl_jp{
		font-size: 3.2vw;
	}
	.btn_fair div{
		font-size: 1.4rem;
	}
	.fair_txt p{
		font-size: 1.4rem;
	}
	.fair_txt h2{
		margin-bottom: 15px;
	}
	.btn_fair div{
		margin-top: 20px;
	}
	#main_img h1{
		font-size: 3.5rem;
	}
	#main_img h1 .span01{
		font-size: 5rem;
	}
	#main_img p{
		font-size: 1.3rem;
	}
	.point_box{
		flex-direction: column-reverse;
		grid-row-gap: 3vw;
	}
	.point_box .txt_box{
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	.point_box .img_box{
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	.present_ul li{
		width: 45%;
		margin-bottom: 40px;
	}
	.other_mk{
		bottom: -3.5%;
	}
	#present_in{
		padding-bottom: 80px;
	}
	#present .p01{
		margin-bottom: 10px;
	}
	#present h2{
		margin-bottom: 15px;
	}
	.present_ul{
		margin-top: 40px;
	}
}
/*
-----------------------------------------------
▼レスポンシブ　スマホ
----------------------------------------------- */
@media screen and (max-width: 767px){
	.fair_box a{
		flex-direction: column;
	}
	.fair_slide{
		width: 70%;
		margin: 0 auto;
	}
	.fair_txt{
		width: 70%;
		margin: 0 auto;
	}
	.fair_ttl_en{
		font-size: 3rem;
	}
	.fair_ttl_jp{
		font-size: 2.8rem;
	}
	.btn_fair div{
		margin-top: 10px;
		margin-bottom: 15px;
	}
	.footer_in{
		font-size: 1.7rem;
	}
	#main_img h1{
		font-size: 4.3vw;
	}
	#main_img h1 .span01{
		font-size: 6vw;
	}
	#point h2{
		font-size: 2.7rem;
		margin-bottom: 20px;
	}
	#point .sub{
		font-size: 1.7rem;
		margin-bottom: 8px;
	}
	#present h2{
		font-size: 3.5rem;
	}
	#present h2 .span01{
		font-size: 2.2rem;
	}
	#present h2 .span02{
		font-size: 3.8rem;
	}
	.present_ul li p{
		font-size: 1.4rem;
	}
	.other_mk{
		bottom: -4.5%;
		width: 100px;
	}
	#present .sub{
		font-size: 1.7rem;
		margin-bottom: 5px;
	}
}
@media screen and (max-width: 600px){
	.under600{
		display: block;
	}
	.over600{
		display: none;
	}
	#main_img h1{
		top: 15%;
		font-size: 6vw;
	}
	#main_img h1 .span01{
		font-size: 8vw;
	}
	#main_img p{
		top: 30%;
	}
	.point_box .img_box{
		width: 100%;
	}
	.point_box .txt_box{
		width: 80%;
	}
	.header_logo{
		width: 26vw;
	}
	.present_ul{
		width: 97%;
	}
	#fair_in{
		padding: 100px 4%;
	}
}
@media screen and (max-width: 500px){
	.fair_slide{
		width: 100%;
	}
	.fair_txt{
		width: 100%;
		padding: 6% 8%;
	}
	.fair_ttl_en{
		font-size: 2.8rem;
	}
	.fair_ttl_jp{
		font-size: 2.3rem;
	}
	.fair_txt p{
		font-size: 1.3rem;
	}
	.btn_fair div{
		font-size: 1.3rem;
	}
	.arrow::before,
	.arrow::after{
		top: 8px;
		width: 8px;
	}
	.under500{
		display: block;
	}
	#point .sub{
		font-size: 1.5rem;
	}
	#point h2{
		font-size: 2.3rem;
	}
	#point .bg_img_right{
		width: 50%;
	}
	#point{
		padding: 80px 0;
	}
	#present .bg_img_left{
		width: 40%;
		top: -80px;
	}
	#present .sub{
		font-size: 1.5rem;
		margin-bottom: 3px;
	}
	#present h2{
		font-size: 2.3rem;
	}
	#present h2 .span02{
		font-size: 2.5rem;
	}
	#present h2 .span01{
		font-size: 1.6rem;
	}
	#present .p01{
		padding-left: 20px;
		padding-right: 20px;
	}
	.other_mk{
		right: 15px;
		bottom: -2.5%;
	}
	#fair_in{
padding: 70px 20px;
	}
}
@media screen and (max-width: 450px){
	#main_img h1{
		font-size: 2.8rem;
	}
	#main_img h1 .span01{
		font-size: 3.6rem;
	}

	#main_img h1 span{
		filter: drop-shadow(0px 0px 4px #fff);
	}



	#main_img p{
		font-size: 1.2rem;
	}
	.header_logo{
		width: 30vw;
	}
	.present_ul{
		width: 90%;
	}
	.present_ul li{
		width: 100%;
	}
}



/* 追加 */
body {
  opacity: 0;
  transition: opacity 1.8s ease;
}

body.is-loaded {
  opacity: 1;
}


.fadeUp {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.fadeUp.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延を調整 */
.fadeUp.delay {
  transition-delay: 0.5s;
}

.fade-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
  will-change: opacity, transform;
}

.fade-section.is-active {
  opacity: 1;
  transform: translateY(0);
}



/* css_end */