@charset "utf-8";



#mVisual {position:relative; width:100%; height:100vh; overflow:hidden; }
.mv_slider.slick-slide,
.mvWrap .slick-track,
.mvWrap .slick-list{ position:relative; height:100%; outline:none; }

#mVisual .mv_slider { background-repeat: no-repeat; background-size: cover; }

.mv_slider.mv1 { background-image:url('/images/main/m_visual0.png?v=1'); background-position: center center; }
.mv_slider.mv2 { background-image:url('/images/main/m_visual0.png?v=1'); background-position: center center; }
.mv_slider.mv3 { background-image:url('/images/main/m_visual0.png?v=1'); background-position: center center; }
.mv_slider.mv4 { background-image:url('/images/main/m_visual0.png?v=1'); background-position: center center; }
.mv_slider.mv5 { background-image:url('/images/main/m_visual0.png?v=1'); background-position: center center; }
.mv_slider.mv6 { background-image:url('/images/main/m_visual1.png?v=1'); background-position: center center; }
.mv_slider.mv7 { background-image:url('/images/main/m_visual2.png?v=1'); background-position: center center; }
.mv_slider.mv8 { background-image:url('/images/main/m_visual3.png?v=1'); background-position: center center; }
.mv_slider.mv9 { background-image:url('/images/main/m_visual4.png?v=1'); background-position: center center; }
.mv_slider.mv10 { background-image:url('/images/main/m_visual5.png?v=1'); background-position: center center; }


#mVisual .mv_slider .mv-txt { display:flex; align-items: center;  height:100%;  }
#mVisual .mv_slider .mv-txt div.txt {  color:#fff; text-align:center; }
#mVisual .mv_slider .mv-txt div.txt h3 {font-size: 5.6rem; line-height:1.25em; font-family: 'OneStoreMobileGothicBody';
												text-shadow:0 0 10px rgba(0,0,0,0.1); font-weight:700}
#mVisual .mv_slider .mv-txt div.txt p {margin-top: 2em;  font-size: 2.2rem; line-height: 1.8em; font-weight:600}

#mVisual .mv_slider .mv-txt div.txt br.br480 {display:none}
#mVisual .mv_slider .mv-txt div.txt br.br768 {display:none}

@media all and (max-width:1399px) { 
	#mVisual {height:750px; }
}
@media all and (max-width:1280px) { 
	#mVisual {height:700px; }
	#mVisual .mv_slider .mv-txt div.txt h3 {font-size: 5.0rem;}
	#mVisual .mv_slider .mv-txt  div.txt p { font-size:2.0rem;}	
}

@media all and (max-width:1024px) {
	#mVisual {height:768px; }
}
@media all and (max-width:976px) {	
		#mVisual {height:100vh; }
}
@media all and (max-width:768px) {
	#mVisual .mv_slider .mv-txt div.txt br.br768 {display:block}
}
@media all and (max-width:640px) {
	#mVisual .mv_slider .mv-txt div.txt h3 {font-size: 5.0rem;}
	#mVisual .mv_slider .mv-txt div.txt p {margin-top: 2em;  font-size: 1.7rem;}	
}
@media all and (max-width:480px) {
	#mVisual {height:75vh; }
	#mVisual .mv_slider .mv-txt div.txt h3 {font-size: 4.0rem;}

	#mVisual .mv_slider .mv-txt div.txt h3 br {display:none}
	#mVisual .mv_slider .mv-txt div.txt br.br480 {display:block}

}



#mVisual.ver2{height: 580px; padding-top: 100px;}
@media all and (max-width: 1510px){
#mVisual.ver2{ padding-top: 70px;}
}
@media all and (max-width: 768px){
#mVisual.ver2{height: 480px; padding-top: 60px;}
}



.p-Part {padding:80px 0}
.m-Part {margin:80px 0}
@media all and (max-width:1024px) {
	.p-Part {padding:40px 0}
	.m-Part {margin:40px 0}
}
@media all and (max-width:480px) {
	.p-Part {padding:11vw 0}
	.m-Part {margin:11vw 0}
}


.br768 {display:none}
@media all and (max-width:768px) {
	.br768 {display:block}
}


 .bgEng { font-size:26.0rem; font-family:'Smooch'; color:#b3b3b3; opacity:0.07; line-height:0.5em; 
					position:absolute; right:0; bottom:-80px  }


#mTitle {margin-bottom:60px; position:relative}
#mTitle .eng {font-size:2.0rem; margin-bottom:2em;  font-family: 'MapoFlowerIsland'; font-weight:400; letter-spacing:-0.06em }
#mTitle dl dt { font-size:5.0rem; color:#222; font-weight:800; line-height:1.4em}
#mTitle dl dd {padding-top:0.7em; font-size:1.8rem; line-height:1.6em; color:#949c97}


#mTitle br.br680 {display:none}
#mTitle br.br480 {display:none}

#mTitle dl.flex-dl {display:flex; align-items: end;}
#mTitle dl.flex-dl dd {padding-left:2em; }

@media all and (max-width:1560px) {
	#mTitle .eng {font-size:1.8rem;}
	#mTitle dl dt { font-size:4.5rem;}
}
@media all and (max-width:1499px) {
	#mTitle dl dt { font-size:4.5rem;}
}
@media all and (max-width:1024px) {	
	#mTitle {margin-bottom:40px}
	#mTitle .eng {text-align:center}
	#mTitle dl {text-align:center}
	#mTitle dl dt { font-size:4.0rem;}
}
@media all and (max-width:680px) {
	#mTitle br.br680 {display:block}
}
@media all and (max-width:480px) {
	#mTitle {margin-bottom:8vw}
	#mTitle .eng {font-size:1.5rem}
	#mTitle dl dt { font-size:3.4rem;}
	#mTitle dl dd { font-size:1.6rem;} 
	#mTitle br.br480 {display:block}
}



#mService {overflow:hidden;}
#mService #mTitle {position:relative; width:100%}
#mService #contWrap {width:2200px}
#mService #contWrap li {margin-right:20px; overflow:hidden; position:relative; border-radius:5px;}
#mService #contWrap li a {}
#mService #contWrap li img  { width:100%; transition:all 0.5s;
						-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s; -ms-transition:all 0.5s;}
#mService #contWrap li:hover img  {	 transform: scale(1.15) rotate(0.02deg); -ms-transform: scale(1.15) rotate(0.02deg);
									-o-transform: scale(1.15) rotate(0.02deg);  -moz-transform: scale(1.15) rotate(0.02deg);	 
									-webkit-transform: scale(1.15) rotate(0.02deg);	 }
#mService #contWrap dl {position:absolute; left:50%; bottom:40px; border-top:1px solid rgba(255,255,255,0.3);
								width:85%; transform:translateX(-50%)}
#mService #contWrap dl dt {padding-top:0.5em; font-size:2.4rem; font-family: 'OneStoreMobileGothicBody'; color:#FFF}



@media all and (max-width:1560px) {
	#mService #contWrap {width:1850px}
}
@media all and (max-width:1280px) {
}
@media all and (max-width:1024px) {
	#mService #mTitle {padding-bottom:80px}
}
@media all and (max-width:768px) {
	#mService #contWrap {width:1400px}
}
@media all and (max-width:570px) {
	#mService #contWrap {width:100%}
	#mService #contWrap li {margin-right:0;}

	#mService  .bgEng { font-size:38vw; bottom:-10vw }
}
@media all and (max-width:480px) {
	#mService #mTitle {padding-bottom:15vw}
	#mService #contWrap dl { bottom:5vw;}
}




.mArrow { display:flex; gap:0 4px; position:absolute; right:0; bottom:0; z-index:3}
.mArrow > div { width:60px; height:60px; border-radius:60px; cursor:pointer; background:#f1f3f0}
.mArrow > div img {width:100%}
.mArrow.wh > div { background:#FFF}

@media all and (max-width:1280px) {
	.mArrow > div { width:50px;  height:50px;}
}
@media all and (max-width:1024px) {
	.mArrow > div { width:50px;  height:50px;}
	.mArrow { position:absolute; right:unset; left:50%; transform:translateX(-50%);}
}
@media all and (max-width:480px) {
	.mArrow > div { width:10vw;  height:10vw;}
}






#mWedding {background:url('/images/main/mwedding-bg.png') no-repeat left top; background-size:cover;
				background-attachment: fixed; overflow:hidden}
#mWedding .contWrap ul {display:flex; flex-wrap:wrap; gap:20px;}
#mWedding .contWrap ul li {width:calc((100% - 20px *3)/4); overflow:hidden}
#mWedding .contWrap ul li a {display:block; width:100%; height:100%; position:relative; }
#mWedding .contWrap ul li a::before { content: "";  position: absolute;  top: 0; left: 0; right: 0; bottom: 0;  
										background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);  
										opacity: 1;  transition: all 0.5s;  z-index: 1;}
#mWedding .contWrap ul li img  { width:100%; transition:all 0.5s;
						-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s; -ms-transition:all 0.5s;}
#mWedding .contWrap ul li:hover img  { transform: scale(1.15) rotate(0.02deg); -ms-transform: scale(1.15) rotate(0.02deg);
									-o-transform: scale(1.15) rotate(0.02deg);  -moz-transform: scale(1.15) rotate(0.02deg);	 
									-webkit-transform: scale(1.15) rotate(0.02deg);	 }
#mWedding .contWrap ul li .t1 { font-size:2.4rem; font-family: 'OneStoreMobileGothicBody'; color:#FFF;
									position:absolute; left:5%; bottom:5%; z-index:3}
#mWedding .bgEng {font-size:26.0rem; left:50%; transform:translateX(-50%); right:unset; width:100%;  }


@media all and (max-width:1560px) {
	#mWedding .contWrap ul { gap:10px;}
	#mWedding .contWrap ul li {width:calc((100% - 10px *3)/4);}
}
@media all and (max-width:1499px) {
	#mWedding .bgEng {font-size:16vw; }
}
@media all and (max-width:1399px) {
	#mWedding .contWrap ul li {width:calc((100% - 10px *2)/3);}
}
@media all and (max-width:768px) {
	#mWedding .contWrap ul li {width:calc((100% - 10px *1)/2);}
}
@media all and (max-width:480px) {
	#mWedding .contWrap ul li .t1 { font-size:2.2rem;}
}





#tabWrap {margin-bottom:50px; position:relative; z-index:3}
#tabWrap ul {display: flex;justify-content:center;  justify-content: center; 
				 text-align: center; gap:10px;}
#tabWrap ul li { border-radius:5px; overflow:hidden }
#tabWrap ul li a { display: block; padding: 0 1.5em; line-height:52px;  font-size: 2.0rem; font-weight: 600; color:#a1978b;}
#tabWrap ul li a:hover {background:#FFF; color:#3f3f3f}
#tabWrap ul li.active { background: #3f3f3f;  }
#tabWrap ul li.active a { color:#fff;  font-weight: 600;  }
#tabWrap ul li.active a:hover { background: #3f3f3f; } 

@media all and (max-width:768px) {
	#tabWrap {margin-bottom:30px}
	#tabWrap ul { gap:5px;}
	#tabWrap ul li a { padding: 0 1.0em; line-height:48px;   }
}
@media all and (max-width:580px) {
	#tabWrap ul { width:70%; max-width:340px; margin:0 auto; gap:5px; flex-wrap:wrap}
	#tabWrap ul li { width:calc((100% - 10px *1)/2)}
}
@media all and (max-width:480px) {
	#tabWrap ul li a { line-height:12vw; font-size:1.8rem}
}



#mSmall {position:relative;  overflow:hidden}
#mSmall:before {content:''; width:100%; height:100%; position:absolute; left:50%; top:0; z-index:-1;
					background: linear-gradient(to bottom, 
									  rgba(244, 243, 242, 0) 0%,      
									  rgba(244, 243, 242, 0) 10%, 
									  #f4f3f2 30%,                
									  #f4f3f2 100% );}
#mSmall .in-box {padding:0 80px; display:flex; align-items: center;}
#mSmall #imgWrap img {width:100%; max-width:960px}
#mSmall #mTitle {width:650px; padding-left:6%; margin-bottom:0}
#mSmall  .bgEng {font-size:8.2vw; right:0; bottom:0 ;writing-mode: vertical-rl;}

@media all and (max-width:1735px) {
	#mSmall #imgWrap {width:calc(100% - 650px)}
	#mSmall  .bgEng {font-size:9.0vw; }
}
@media all and (max-width:1399px) {
	#mSmall:before { left:40%; }
}
@media all and (max-width:1560px) {
	#mSmall .in-box {padding:0 5%; }
	#mSmall #imgWrap {width:calc(100% - 580px)}
	#mSmall #mTitle {width:580px;} 
}
@media all and (max-width:1220px) {
	#mSmall:before { left:0; top:50%}
	#mSmall .in-box {flex-wrap:wrap }
	#mSmall #imgWrap {width:100%; text-align:center}
	#mSmall #mTitle {width:100%; padding:0; margin-top:5%} 
	#mSmall #mTitle dt br {display:none}
	#mSmall  .bgEng {font-size:17.6vw; ;writing-mode: rl;}
}
@media all and (max-width:1024px) {
	#mSmall #mTitle {text-align:center}
}
@media all and (max-width:680px) {
		#mSmall #mTitle dt br {display:block}
}



#mBtn {margin-top:3em; padding:0 20px;  line-height:40px; position:relative; display:inline-block; font-size:1.6rem;}
#mBtn:before {content:''; width:4px; height:100%; background:#222; position:absolute; left:0; top:0;
					transition: all 0.1s ease-out;}
#mBtn span {  color:#222; font-family: "Marcellus", serif;  font-weight:400; position:relative;
				transition: all 0.1s ease-out;;}
#mBtn:hover::before {width:100%}
#mBtn:hover span {color:#FFF}

@media all and (max-width:1024px) {
	#mBtn {margin-top:2em; padding:0 15px;line-height:30px; }
}
@media all and (max-width:480px) {
	#mBtn {padding:0 5vw;line-height:8vw; }
}





#mBanners {background:url('/images/main/mbanners-bg.png') no-repeat center top; overflow:hidden; position:relative}
#mBanners #contWrap {text-align:center; position:relative; z-index:3}
#mBanners #contWrap a {margin:5px; border-radius:100px; padding:0 2em; line-height:80px; 
								border:1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px);
								display:inline-block}
#mBanners #contWrap a span {padding-right:2em; font-size:2.4rem; color:#FFF; font-family: 'OneStoreMobileGothicBody';
										background:url('/images/main/mbanners-arrow.png') no-repeat right center}
#mBanners #contWrap a:hover {background-color:rgba(31, 172, 85, 0.6) }

#mBanners .bgEng {font-size:14.5vw; left:50%; transform:translateX(-50%); bottom:-1vw; right:unset; width:100% }

@media all and (max-width:1024px) {
	#mBanners #contWrap a { margin:2px; line-height:60px;  padding:0 1.5em;}
	#mBanners #contWrap a span {padding-right:1em;}
}
@media all and (max-width:480px) {
	#mBanners #contWrap a { line-height:13vw; }
	#mBanners #contWrap a span {font-size:2.2rem;}
}