@charset "utf-8";

@media screen and (max-width: 1499px) {
	header {aspect-ratio: 1500 / 480;height: auto;}
}
@media screen and (max-width: 1240px) {
	header {aspect-ratio: 1500 / 530;padding-top: 60px;}
}
@media screen and (max-width: 599px) {
	header {aspect-ratio: 1500 / 660;}
}
header {z-index: 1;}
#wrapper {overflow: hidden;}
#gnav {background: #1b1daf;}
#contents {background: #f5f5f4;position: relative;z-index: 0;}
.container {max-width: 1050px;margin: auto;}

/* -------------------------------------------------- */
/* common */
/* -------------------------------------------------- */
.bg-img {position: relative;}
.bg-img::before ,
.bg-img::after {content: '';display: block;position: absolute;z-index: 0;background-size:  contain ;background-repeat: no-repeat;}
.bg-img::before{background-position: left top;background-image: url(img/bg-img-left.png);width: 358px;height: 389px;top: 100px;left: 0;}
.bg-img::after {background-position: right top;background-image: url(img/bg-img-right.png);width: 458px;height: 390px;top: 0;right: 0;}

p.text {font-size: 2rem;font-weight: bold;}

[class^="btn-"],
[class*=" btn-"] {font-size: 2.4rem;font-weight: bold;color: #fff;text-align: center;display: block;max-width: 500px;padding: 15px 10px;border: 4px solid #fff;border-radius: 10em;box-shadow: 0px 0px 16px 0px rgba(51, 51, 51, 0.2);position: relative;}
[class^="btn-"]::after,
[class*=" btn-"]::after {content: '';display: block;width: .35em;height: .35em;border-right:4px solid #fff;border-bottom: 4px solid #fff;transform: rotate(-45deg);position: absolute;right: 20px;top: 0;bottom: 0;margin: auto;}
[class^="btn-"]:hover,
[class*=" btn-"]:hover {opacity:.8;}
.btn-room {background: #429739;}
.btn-novelty {background: #604490;}
.btn-goods {background: #c95486;}

.box-btn > * {margin: 40px auto 0;}

.h2 {font-size: 7.2rem;font-weight: bold;text-align: center;margin-bottom: 60px;line-height: 1;}
.h2:before {content: '';width: 65px;height: 35px;display: block;margin: 0 auto 20px;background: center / contain no-repeat;}
#block-room .h2:before {background-image: url(img/h2-matsu-room.svg);}
#block-novelty .h2:before {background-image: url(img/h2-matsu-novelty.svg);}
#block-goods .h2:before {background-image: url(img/h2-matsu-goods.svg);}

/* -------------------------------------------------- */
/* mv */
/* -------------------------------------------------- */
header #mv::before,
header::after{content: none;}
#mv .mv-slider-box,
#mv .mv-slider-box * {height: 100%;}
#mv .mv-slider-img {background: center / cover no-repeat;}
#mv .logo {transform: translateY(-50%);}
#mv .logo::before,
#mv .logo::after {content: '';background: url(img/img-matsu.png) center / contain no-repeat;width: 271px;height: 95px;display: block;z-index: 0;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
#mv .logo::before{left: -810px;}
#mv .logo::after {right: -810px;}
#mv .logo img {position: relative;z-index: 1;}

@media screen and (max-width: 1240px) {
	#mv .mv-slider-img {background-position: center bottom;}
}


/* -------------------------------------------------- */
/* #block-intro */
/* -------------------------------------------------- */
#block-intro {padding-top: 40px;background: url(img/intro-bg-text.svg) bottom 140px center / contain no-repeat;}
#block-intro h1 {text-align: center;max-width: 825px;margin:0 auto 40px;}
#block-intro h1 span {display: inline-block;font-size: 3.6rem;font-weight: bold;}
#block-intro h1 span:after {content: '';display: block;background: url(img/title-nami.svg) center / contain no-repeat;width: 116px;height: 7px;margin: 0 auto 20px;}
#block-intro p.text {max-width: 825px;margin: auto;text-align: center;}
#block-intro .sns-box {display: flex;align-items: center;justify-content: center;gap:15px;margin-top: 40px;}
#block-intro .sns-box li a {width: 70px;height: 70px;background: #fff;border-radius: 10em; box-shadow: 0px 0px 16px 0px rgba(51, 51, 51, 0.2);display: flex;align-items: center;justify-content: center;}
#block-intro .sns-box li a img {height: 35px;}
#block-intro .nav-box {display: flex;gap:20px;margin-top: 60px;}
#block-intro .nav-box li {flex: 1;}
#block-intro .nav-box [class^="btn-"]::after,
#block-intro .nav-box [class*=" btn-"]::after {transform: rotate(45deg);}

/* -------------------------------------------------- */
/* #block-room */
/* -------------------------------------------------- */
#block-room .room-slider {position: relative;}
#block-room .room-slider h3 {color: #fff;background: #429739;font-weight: bold;display: inline-block;padding: .3em 1em;position: absolute;left: 0;top: 0;z-index: 1;line-height: 1;}
#block-room .room-slider h3:before {content: none;}
#block-room .room-slider .slider {border: 5px solid #429739;box-sizing: border-box;line-height: 0;display: none;}
#block-room .room-slider .slider.slick-initialized{display: block;}
#block-room .room-slider .slider:before,
#block-room .room-slider .slider:after {content: '';background: center / contain no-repeat;position: absolute;bottom: -25px;z-index: 2;transition: .3s;}
#block-room .room-slider .slider:before{background-image: url(img/room-img01.png);width: 146px;height: 454px;left: -73px;}
#block-room .room-slider .slider:after {background-image: url(img/room-img02.png);width: 232px;height: 455px;right: -73px;}
#block-room .room-slider .thumb {max-width: 564px;margin: 20px auto 0;line-height: 0;}
#block-room .room-slider .thumb .slick-slide {margin: 0 10px;}
#block-room .room-slider .thumb .slick-slide:hover {cursor: pointer;opacity: .6;transition: .3s;}
#block-room .room-slider .thumb .slick-current {opacity: .6;}
#block-room .text {margin-top: 40px;}
#block-room .standard-box {margin-top: 90px;}
#block-room .standard-box h3 {font-size: 3rem;font-weight: bold;color: #333333;text-align: left;border-bottom: 4px solid #429739;padding-bottom: 10px;margin-bottom: 30px;}
#block-room .standard-box h3::first-letter {color:#429739; }
#block-room .standard-box h3::before {content: none;}
#block-room .standard-box .standard-box-item {display: flex;flex-wrap: wrap; align-items: center;gap:40px;margin-bottom: 30px;}
#block-room .standard-box .standard-box-item figure {max-width: 500px;}
#block-room .standard-box .standard-box-item > * {width: calc((100% - 40px) / 2);}
#block-room .standard-box .standard-box-item .text {font-size: 1.8rem;margin-top: 0;margin-bottom: 25px;}
#block-room .standard-box .standard-box-item [class^="btn-"],
#block-room .standard-box .standard-box-item [class*=" btn-"] {font-size: 2rem;}
#block-room .standard-box .standard-slider ul .slick-dots {display: flex;justify-content: center;}
#block-room .standard-box .standard-slider ul .slick-dots li {width: 10px;height: 10px;margin: 0 5px;background: rgba(66, 151, 57, 0.2);border-radius: 50%;cursor: pointer;}
#block-room .standard-box .standard-slider ul .slick-dots li:hover,
#block-room .standard-box .standard-slider ul .slick-dots li.slick-active {background: #429739;}
#block-room .standard-box .standard-slider ul .slick-dots li button {display: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: none;padding: 0;border: none;background-color: transparent;}

#block-room .sub-box ul {display: flex;gap:30px;}
#block-room .sub-box p {font-size: 1.8rem;margin-top: 30px;}


/* -------------------------------------------------- */
/* #block-novelty */
/* -------------------------------------------------- */
#block-novelty .container > * {position: relative;z-index: 1;}
#block-novelty .container:before,
#block-novelty .container:after {content: '';background: center / contain no-repeat;position: absolute;z-index: 0;transition: .3s;}
#block-novelty .container:before{background-image: url(img/novelty-img01.png);width: 233px;height: 441px;left: -160px;top: 260px;}
#block-novelty .container:after {background-image: url(img/novelty-img02.png);width: 184px;height: 442px;right: -43px;top: 100px;}

#block-novelty .sub-text {font-size: 3rem;font-weight: bold;text-align: center;line-height: 1.6;}
#block-novelty .sub-text .c {color: #604490;}
#block-novelty .sub-text .line {background: linear-gradient(transparent 60%, rgba(96, 68, 144, 0.19) 0%);display: inline-block;line-height: 1.2;padding: 0 5px;}
#block-novelty .novelty-box {display: flex;gap:50px;flex-wrap: wrap;margin-top: 60px;}
#block-novelty .novelty-box .novelty-box-item {width: calc((100% - 50px)/2);}
#block-novelty .novelty-box .novelty-box-item .img {position: relative;}
#block-novelty .novelty-box .novelty-box-item .img a {display: block;border: 5px solid #604490;box-sizing: border-box;background: #fff;}
#block-novelty .novelty-box .novelty-box-item .img p {font-size: 2.8rem;color: #fff;background: #604490;display: inline-block;position: absolute;left: 0;top: 0;font-weight: bold;padding: 10px 15px;line-height: 1;}
#block-novelty .novelty-box .novelty-box-item .text {font-size: 1.8rem;margin-top: 20px;}
#block-novelty .novelty-box .novelty-box-item .text small {line-height: 1.4;display: block;
	margin-top: 5px;}
#block-novelty .sub-box {margin-top: 40px;text-align: center;font-size: 1.6rem;}

@media screen and (max-width: 1300px) {
	#block-novelty .container:before {left:-50px;}
}


/* -------------------------------------------------- */
/* #block-goods */
/* -------------------------------------------------- */
#block-goods .container > * {position: relative;z-index: 1;}
#block-goods .container:before,
#block-goods .container:after {content: '';background: center / contain no-repeat;position: absolute;z-index: 0;transition: .3s;}
#block-goods .container:before{background-image: url(img/goods-img01.png);width: 342px;height: 394px;left: -120px;top: 0px;}
#block-goods .container:after {background-image: url(img/goods-img02.png);width: 237px;height: 334px;right: -84px;top: 134px;}

#block-goods .sub-text {font-size: 3rem;font-weight: bold;text-align: center;line-height: 1.6;}
#block-goods .sub-text small {font-size: 2.4rem;font-size: 1.8rem;line-height: 1.6;display: block;}
#block-goods .goods-box {display: flex;gap:40px 30px;flex-wrap: wrap;margin-top: 60px;}
#block-goods .goods-box .goods-box-item {width: calc((100% - 60px)/3);}
#block-goods .goods-box .goods-box-item a {display: block;background: #fff;}
#block-goods .goods-box .goods-box-item .name {font-size: 2.4rem;font-weight: bold;margin-top: 10px;}
#block-goods .goods-box .goods-box-item .price {font-size: 2.4rem;font-weight: bold;color: #c95486;line-height: 1;margin-bottom: 15px;}
#block-goods .goods-box .goods-box-item .price span {font-size: .8em;}
#block-goods .goods-box .goods-box-item .text {font-size: 1.6rem;font-weight: normal;}


/* for tablet */
/* ======================================================================================================================= */
@media screen and (max-width:1000px){
	#mv .logo::before, #mv .logo::after {width: 180px;height: 55px;}
	#mv .logo::before {left: 10px;right: auto;}
	#mv .logo::after {right: 10px;left: auto;}
	#block-intro .nav-box {flex-direction: column;}
	#block-intro .nav-box li a {margin: auto;}
	
	/* -------------------------------------------------- */
	/* #block-room */
	/* -------------------------------------------------- */
	#block-room .room-slider .slider:before{width: 106px;height: 344px;left: -4%;}
	#block-room .room-slider .slider:after {width: 182px;height: 345px;right: -4%;}
	#block-room .standard-box .standard-box-item figure {width: 50%;}

	/* -------------------------------------------------- */
	/* #block-novelty */
	/* -------------------------------------------------- */
	#block-novelty .container:before{width: 173px;height: 291px;left: 0;top: -50px;}
	#block-novelty .container:after {width: 134px;height: 292px;right: 0;top: -50px;}

	/* -------------------------------------------------- */
	/* #block-goods */
	/* -------------------------------------------------- */
	#block-goods .container:before{width: 242px;height: 274px;left: 0;top: -50px;}
	#block-goods .container:after {width: 197px;height: 264px;right: 0;top: -50px}
}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (max-width:767px){
	.no-sp {display: none;}
	section>.container {padding: 5% 4%;}
	[class^="btn-"], [class*=" btn-"] {font-size: 1.8rem;}
	[class^="btn-"]::after, [class*=" btn-"]::after {border-width: 2px;}
	
	p.text {font-size: 1.8rem;}
	
	.bg-img::before,.bg-img::after {width: 40%;height: auto;padding-bottom: 40%;}
	.bg-img::before {top: 10%;}
	
	.h2 {font-size: 4rem;margin-bottom: 30px;}
	.h2:before {margin-bottom: 10px;}
	
	#mv .logo::before, #mv .logo::after {width: 14%;height: 30%;}
	#mv .logo img {width: 70%;}
	
	#block-intro h1 {margin-bottom: 20px;}
	#block-intro h1 span {font-size: 2.6rem;}
	#block-intro h1 span:after {width: 66px;}
	#block-intro .sns-box {margin-top: 20px;}
	#block-intro .sns-box li a {width: 50px;height: 50px;}
	#block-intro .sns-box li a img {height: 25px;}
	#block-intro .nav-box {margin-top: 30px;}
	
	/* -------------------------------------------------- */
	/* #block-room */
	/* -------------------------------------------------- */
	#block-room .text {margin-top: 20px;}
	#block-room.bg-img::before {top: 40px;}
	#block-room .room-slider h3 {font-size: 2.4rem;padding: .3em .8em;}
	#block-room .room-slider .slider:before, #block-room .room-slider .slider:after {bottom: -15px;}
	#block-room .room-slider .slider:before {width: 13%;height: 70%;}
	#block-room .room-slider .slider:after {width: 20%;height: 70%;}
	#block-room .standard-box {margin-top: 40px;}
	#block-room .standard-box h3 {font-size: 2.4rem;}
	#block-room .standard-box .standard-box-item {flex-direction: column;gap:20px;margin-bottom: 50px;}
	#block-room .standard-box .standard-box-item > * {width: 100%;}
	#block-room .standard-box .standard-box-item figure {width: 100%;max-width: none;}
	#block-room .standard-box .standard-box-item figure img {width: 100%;}
	#block-room .standard-box .standard-box-item .text {margin-bottom: 15px;}
	#block-room .standard-box .standard-box-item [class^="btn-"], #block-room .standard-box .standard-box-item [class*=" btn-"] {margin: 0 auto;}
	#block-room .room-slider .thumb .slick-slide {margin: 0 5px;}
	#block-room .sub-box ul {gap:15px;flex-wrap: wrap;}
	#block-room .sub-box ul li {width: calc((100% - 15px) / 2);}

	/* -------------------------------------------------- */
	/* #block-novelty */
	/* -------------------------------------------------- */
	#block-novelty {margin-top: 30px;}
	#block-novelty.bg-img::before {top: 40px;}
	#block-novelty .container:before{width: 15%;height: 7%;left: 2%;top: 0%;}
	#block-novelty .container:after {width: 12%;height: 7%;right: 2%;top: 0;}
	#block-novelty .sub-text {font-size: 2rem;}
	#block-novelty .novelty-box {margin-top: 30px;gap:30px;}
	#block-novelty .novelty-box .novelty-box-item {width: 100%;}
	#block-novelty .novelty-box .novelty-box-item .img p {font-size: 2rem;}
	#block-novelty .sub-box {margin-top: 30px;font-size: 1.4rem;}


	/* -------------------------------------------------- */
	/* #block-goods */
	/* -------------------------------------------------- */
	#block-goods {margin-top: 30px;}
	#block-goods.bg-img::before {top: 40px;}
	#block-goods .sub-text {font-size: 2rem;}
	#block-goods .sub-text small {font-size: 1.6rem;}
	#block-goods .container:before{width: 22%;height: 8%;left: 2%;top: 0;}
	#block-goods .container:after {width: 22%;height: 8%;right: 2%;top: 0;}
	#block-goods .goods-box {margin-top: 30px;gap: 30px 20px;}
	#block-goods .goods-box .goods-box-item {width: calc((100% - 20px) / 2);}
	#block-goods .goods-box .goods-box-item .name {font-size: 1.8rem;}
	#block-goods .goods-box .goods-box-item .price {font-size: 2rem;}
}

/* ======================================================================================================================= */
/* for IE */
/* ======================================================================================================================= */
@media screen\0 {


}