@charset "utf-8";
/* CSS Document */
/* common ---------------------------------------- */
.contentW{
	width: 100%;
	max-width: 1280px;
	margin: auto;
	padding: 0 16px;
}
#section3 .heading,#section4 .heading,#section5 .heading,#section6 .heading{
	padding: 8% 0;
}
.cd-section .heading h2{
	font-size: 60px;
	color: #fff;
	font-family: stenciletta, sans-serif;
}
.cd-section .heading h2 span.color{
	font-size: 60px;
	color: #9f1021;
}

#BGIMG .img{
    min-height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    	
}
#BGIMG .img.BG01 {
    background-image: url(../img/bgimg01.jpg);
}
#BGIMG .img.BG02 {
    background-image: url(../img/bgimg02.jpg);
}
#BGIMG .img.BG03 {
    background-image: url(../img/bgimg04.jpg);
}
#BGIMG .img.BG04 {
    background-image: url(../img/bgimg03.jpg);
}



/* Btn ---------------------------------------- */
.Btn{
	text-align: center;
	padding: 60px 0;
}
a.cp_btn {
display: inline-block;
position: relative;
width: 260px;
padding: 24px;
text-align: center;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
text-decoration: none;
font-weight: bold;
color: #fff;
}
a.cp_btn:before, a.cp_btn:after {
content: '';
position: absolute;
top: -7px;
width: 2px;
height: calc(100% + 14px);
background-color: #fff;
transition: .3s;
}
a.cp_btn:before {
left: 7px;
}
a.cp_btn:after {
right: 7px;
}
a.cp_btn:hover:before{
top: 0px;
left:0;
height: 100%;
}
a.cp_btn:hover:after{
top: 0px;
right: 0;
height: 100%;
}
/* Anniversary ---------------------------------------- */
.swa .logo{
    position: absolute;
    top: 44%;
	right: 0;
    left: 0;	
}
/*
#Anniversary{
	height: 980px;	
	background: #151414;
}
#Anniversary .textw{
	width: 100%;
    max-width: 900px;
    margin: auto;
	color: #fff;
    position: absolute;
    top: 44%;
	right: 0;
    left: 0;
}
*/

#Anniversary{
	background: #151414;
	margin: -150px 0 0;
}
.asdfg{
    position: relative;
    max-width: 900px;
    margin: auto;
    height: auto;
}
#Anniversary .textw{
	width: 100%;
	color: #fff;

}
#Anniversary .textw2{
  	background: rgba(21, 20, 20, 0.5);
    padding: 80px 60px;
}
#Anniversary .textw p{
	line-height: 30px;
}
#Anniversary .textw .right{
	text-align: right;
	padding: 32px 0 0;
}
#Anniversary .textw h3{
	font-size: 18px;
	margin: 0 0 16px;
}
#Anniversary .showW{
	margin: 0 0 0 2em;
}
#Anniversary .textw dl{
	margin: 0 0 16px;
	border-bottom: dotted 1px;
    padding: 0 0 6px 0;
}
#Anniversary .textw dt{
	vertical-align: top;
	width: 80px;
}
#Anniversary .textw dd{
	width: 88%
}
#Anniversary .textw dt,#Anniversary .textw dd{
	display: inline-block;
}
#Anniversary .textw dd p{
	width: 73%;
	display: inline-block;
	vertical-align: top;
}
#Anniversary .textw dd img{
	width: 18%;
	display: inline-block;	
}
#Anniversary .textw dl dd span.show{
	font-size: 14px;
	text-indent:-1em;
	padding-left:1em;
	display: block;	
}
.logo{
	padding: 0 16px;
	text-align: center;
	width: 100%;
	max-width: 900px;
	margin: 0 auto 120px;
}
.ornament{
  width:100%;
  max-width: 1000px;
  padding: 60px 0 0;
  margin: auto;
  text-align: center;
}
.ornament h2{
  position:relative;
  display:inline-block;
  padding:24px 50%;
}

.ornament h2:before, .ornament h2:after{
  content:"";
  display:block;
  width:48%;
  height:4px;
  border-top:1px solid #fff;
  position:absolute;
  top:3px;
}
.ornament h2:before{left:-24px;}
.ornament h2:after{right:-24px;}
.ornament h2 span{
  display:block;
  width:8px;
  height:8px;
  background: #fff;
  /*border:2px solid #9F9D66;*/
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  position:absolute;
  top: 0px;
  left:50%;
  margin-left:-4px;
}

/* section1 ---------------------------------------- */
#section1 .sliderBox{
	position: relative;
}
#section1 .sliderBox .slider01{
	background: url(../img/topimg.jpg) no-repeat center center;
	width: 100%;
	height: 100vh;
	background-size: cover;
}
#section1 .sliderBox .slider02{
	background: url(../img/topimg2.jpg) no-repeat center center;
	width: 100%;
	height: 100vh;
	background-size: cover;
}
#section1 .mask{
	background: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 100vh;	  
	/*z-index: 1;*/
	position: absolute;
	top: 0;	
}
#section1 .mask .Logo{
	width: 200px;
	position: absolute;
	top: 32px;	
	left: 32px;
}
#section1 .mask .instagram{
	width: 40px;
	position: absolute;
	top: 32px;	
	right: 32px;
}
#section1 .text{
    color: #fff;
    position: absolute;
    bottom: 24%;
    left: 18%;
}
#section1 .text h1{
	font-size: 60px;
	margin: 0 0 18px;
	font-family: stenciletta, sans-serif;
}
#section1 .text p{
	font-size: 24px;
	margin: 0 0 24px;
}
/* section2 ---------------------------------------- */
#section2 .heading{
	width: 50%;
	float: left;
	padding: 8% 0;
}
#section2 .text{
	width: 50%;
	float: right;
	padding: 8% 0;
	color: #fff;
}
#section2 .heading h2 span.block{
	font-size: 18px;
	display: block;
	padding: 0 0 0 190px;
}
.thumbnailBox{
	padding: 0 0 60px;
}
.thumbnail{
	padding: 0 0 64px;
}
ul.thumbnailNav.slick-initialized.slick-slider {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
#section2 .img {
	padding: 0 0 400px;
    position: relative;
    margin: 80px 0 0;
}
#section2 .img .img01{
	background: url(../img/imglist01.jpg) no-repeat center center;	
    padding-top: 40%;
    width: 60%;
    background-size: contain;
}
#section2 .img .img02{
	background: url(../img/imglist02.jpg) no-repeat center center;	
	padding-top: 33%;
	width: 50%;
	background-size: contain;
	position: absolute;
	top: 240px;
	right: 0;
}

/*

#section2 .imglist{
	padding: 100px 0;
}
#section2 .imglist li{
	width: 25%;
	float: left;
	padding: 0 24px;
}
#section2 .imglist li span{
	text-align: center;
	display: block;
	color: #fff;
	padding: 24px 0 ;
}

#section2 .imglist li:nth-child(2n-1) {
    margin-top: -80px;
}
*/
/* section3 ---------------------------------------- */
#section3{
	padding: 0 0 120px;
}
#section3 .heading h2 span.block{
	font-size: 18px;
	display: block;
	padding: 0 0 0 70px;
}

#section3 .menuBox{
	color: #fff;
}
#section3 .menuBox h3{
	color: #fff;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	background: #9f1021;
	padding: 4px 0;
	letter-spacing: 3px;
}
#section3 .menuBox .l,
#section3 .menuBox .r{
	width: 50%;
    margin: 24px 0 0;	
}
#section3 .menuBox .l{
	float: left;
}
#section3 .menuBox .r{
	float: right;
}
#section3 .menuBox .l div,
#section3 .menuBox .r div{
	margin: 24px 0;
	padding: 0 24px;
}
#section3 .menuBox .l h4,
#section3 .menuBox .r h4{
	font-size: 20px;
	font-weight: bold;
    border-bottom: solid 1px #3E3E3E;
    margin: 0 0 12px;
    padding: 0 0 4px;
    color: #9f1021;
}
#section3 .menuBox .l dl,
#section3 .menuBox .r dl{
	margin: 0 0 4px;
	padding: 0 0 0 8px;
}
#section3 .menuBox .l dt,
#section3 .menuBox .r dt{
	width: 69%;
	display: inline-block;
}
#section3 .menuBox .l dd,
#section3 .menuBox .r dd{
	text-align: right;
	width: 30%;
	display: inline-block;
}

/*
#section3 .text{
	float: right;
	width: 50%;
    color: #fff;
    padding: 20px 50px;
}
#section3 .text h3{
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 24px;
}
#section3 .img{
	float: left;
  	width: 50%;
}
#section3 .img img{
	width: 100%;
}
*/

/* section4 ---------------------------------------- */
#section4{
	padding: 8% 0 160px;
}
#section4 .heading h2 span.block{
	font-size: 18px;
	display: block;
	padding: 0 0 0 140px;
}
#section4 .heading{
	float: right;
	width: 230px;
	padding: 16px 0 0;
}
#section4 .img{
	width: 50%;
	float: left;
}
#section4 .conditions{
	background: rgba(255, 255, 255, 0.1);
	padding: 40px;
	width: 80%;
	float: right;
	margin: -80px 0 0 0;
	position: relative;
	border: 1px solid #555;
	color: #fff;
}
#section4 .conditions h3{
	font-size: 20px;
}
#section4 .conditions h3.mt{
	margin: 40px 0 0;
}

#section4 .conditions h3:after{
	border-bottom: solid 1px #3E3E3E;
    margin: 0 0 8px;
	content: "";
	display: block;
	height: 3px;
}
#section4 .conditions table tr{
    line-height: 30px;
}
#section4 .conditions table th{
    line-height: 24px;
    width: 80px;
}


	/*
#section4 .conditions dl{
    color: #fff;
    margin: 0 0 8px;
}
#section4 .conditions dt{
	font-size: 24px;
	font-weight: bold;
	border-bottom: solid 1px #fff;
	margin: 0 0 8px;
	color: #fff;
}
#section4 .conditions .detail dt,#section4 .conditions .detail dd{
  display: inline-block;
  border-bottom: none; 
  font-size: 16px;
}
*/
#section4 .conditions p{
	margin: 0 0 16px;
}

/* section4 ---------------------------------------- */
#section5{
	padding: 0 0 160px;
}
#section5 .heading h2 span.block{
	font-size: 18px;
	display: block;
	padding: 0 0 0 170px;
}
#section5 .Jp{
	width: 50%;
	float: left;
	color: #fff;
}
#section5 .En{
	width: 50%;
	float: right;
	color: #fff;	
}
#section5 .Jp dl,#section5 .En dl{
	padding: 0 16px 40px; 
}
#section5 .Jp dt,#section5 .En dt{
	border-bottom: solid 1px #3E3E3E;
	margin: 0 0 4px;
}
#section5 .Jp dd,#section5 .En dd{
	text-align: right;
	font-size: 18px;
}
#section5 .Map{
	padding: 80px 0 0;
}
#section5 #maps{
	height: 600px;
}
/* section6 ---------------------------------------- */
#section6{
	padding: 0 0 120px;
}
#section6 .heading h2 span.block{
	font-size: 18px;
	display: block;
	padding: 0 0 0 140px;
}
#section6 .text{
	color: #fff;
	text-align:center;
	padding: 0 0 80px; 
}

/* footer ---------------------------------------- */
.footerBG{
	background: #151414;
	padding: 80px 0 70px;
}
.bara,.rhyms{
	width: 50%;
	color: #fff;
    font-size: 14px;
}
.rhyms{
	float: left;
	padding: 0 6% 0 0;
}
.bara{
	float: right;	

	padding: 0 0 0 6%;	
}
.footerBG .logo img{
	width: 200px;
}
.footerBG .logo{
	width: 48%;
	display: inline-block;
    padding: 0 0 10px 20%;
    margin: 0;
}
.footerBG .rhyms .logo{
    padding: 0 0 28px 20%;
}
.footerBG .access{
	width: 48%;
	display: inline-block;
	border-left: solid 1px #fff;
}
.footerBG .access li{
	margin: 12px 0 12px 40px;
}
.footerBG .access img{
	width: 40px;
}
#copyright{
	text-align: center;
	background: #151414;
	color: #fff;
	padding: 8px 0;
}
@media screen and (max-width:1024px){
	#section1 .text{
	    bottom: 24%;
	    left: 8%;
	}
}
@media screen and (max-width:1800px){
	.bara{
		padding: 0 0 0 3%;	
	}
	.rhyms{
		padding: 0 3% 0 0;
	}
	.footerBG .logo{
	    padding: 0 0 10px 12%;
	}
	.footerBG .rhyms .logo{
	    padding: 0 0 28px 12%;
	}
}
@media screen and (max-width:1024px){
	.bara,.rhyms{
		width: 100%;
		float: none;
		color: #fff;
		padding: 0 3% 40px 3%;		
	}
}

@media screen and (max-width:900px){
/* common ---------------------------------------- */
	.contentW{
		padding: 0 3%;
	}
	#section1 .text{
	    bottom: 18%;
	    left: 4%;
	}
	#section1 .text h1{
		font-size: 8vw;
		margin: 0 0 24px;
	}
	#section1 .text p{
		font-size: 6vw;
		margin: 0 0 24px;
	}

/* Anniversary ---------------------------------------- */
	#Anniversary{
		/*height: 1080px;	*/
	}
	#Anniversary .textw2 {
		padding: 80px 16px;
	}
	#Anniversary .textw dd p{
		width: 100%;
		display: inherit;
		vertical-align: top;
		margin: 0 0 8px;
	}
	#Anniversary .textw dd img{
		width: 170px;
		display: inherit;
	}
/* section2 ---------------------------------------- */
	#section2 .heading,#section2 .text{
		width: 100%;
		float: none;
	}
	#section2 .heading{
		padding: 60px 0;
	}
	#section2 .heading h2 span.block{
		padding: 0 0 0 170px;
	}
	#section2 .text{
		padding: 0 0 60px;
	}
	.thumbnailBox{
		padding: 0;
	}
	.thumbnailNav{
		display: none !important;
	}
	#section2 .img {
		padding: 0 0 160px;
		position: inherit;
		margin: 0;
	}
	#section2 .img .img01{
		background: url(../img/imglist01.jpg) no-repeat center center;	
		width: 100%;
		padding-top: 67%;
		background-size: cover;
		margin: 0 0 60px;
	}
	#section2 .img .img02{
		background: url(../img/imglist02.jpg) no-repeat center center;	
		padding-top: 67%;
		width: 100%;
		background-size: cover;
		position: inherit;
		top: 0;
		right: 0;
	}
	/*
	#section2 .imglist{
		padding: 40px 0;
	}

	#section2 .imglist li{
		width: 50%;
		float: left;
		padding: 0 8px 24px;
	}
	#section2 .imglist li:nth-child(2n-1) {
	    margin-top: -40px;
	}
	*/


/* section3 ---------------------------------------- */
	/*
	#section3 .text,#section3 .img{
		width: 100%;
		float: none;
		padding: 24px 0 0 ;
	}
	*/
	#section3 .menuBox .l div,
	#section3 .menuBox .r div{
		padding: 0;
	}

	#section3 .menuBox .l,
	#section3 .menuBox .r{
		width: 100%;
	    margin: 24px 0 0;	
		float: none;
	}
	#section3 .menuBox .l dl, #section3 .menuBox .r dl {
	    margin: 0 0 24px;
	    padding: 0 0 0 8px;
	}


/* section4 ---------------------------------------- */
	#section4 {
	    padding: 0 0 100px;
	}
	#section4 .heading{
		float: none;
		width: 100%;
		padding: 8% 0;
	}
	#section4 .img{
		width: 100%;
		float: none;
		margin: 0 0 40px;
		padding: 0;
	}
	#section4 .conditions{
		width: 100%;
		padding: 24px 8px;
		margin:  0;
	 }


/* section5 ---------------------------------------- */
	#section5 {
	    padding: 0 0 100px;
	}
	#section5 .Jp,#section5 .En{
		width: 100%;
		float: none;
	}
	#section5 #maps{
		height: 400px;
	}
	#section5 .Jp dl, #section5 .En dl {
	    padding: 0 0 40px;
	}

/* footer ---------------------------------------- */
	#section6 {
	    padding: 0 0 100px;
	}
	.footerBG{
		padding: 80px 24px 0; 
	}
	.footerBG .rhyms .logo{
	    padding: 0 0 28px 20%;
	}
	.footerBG .logo{
		width: 100%;
		display: inherit;
		padding: 0 0 16px;
		margin: 0;
	}
	.footerBG .access{
		width: 100%;
		display: inherit;
		border-left: none;
		padding: 0;
	}
	.footerBG .rhyms .logo{
	    padding: 0 0 16px;
	}	
	.footerBG .logo img {
	    margin: auto;
	}	
	.bara,.rhyms{
		padding: 0 0 40px;		
	}
	.footerBG .access li{
		margin: 12px auto;
		max-width: 360px;
	}

	#BGIMG .img.BG01,#BGIMG .img.BG02,#BGIMG .img.BG03,#BGIMG .img.BG04{
	    background-attachment: scroll;
	}
}
@media screen and (max-width:768px){
/* Anniversary ---------------------------------------- */
	#Anniversary{
		margin: 0;
	}
}
@media screen and (max-width:600px){
/* Anniversary ---------------------------------------- */
	#BGIMG .img{
	    min-height: 200px;
 	
	}
}
@media screen and (max-width: 420px){
/* Anniversary ---------------------------------------- */
	#Anniversary{
		/*height: 1480px;	*/
	}
	#Anniversary .showW{
		margin: 0 0 0 16px;
	}

	#section3 .menuBox .l dt,
	#section3 .menuBox .r dt{
		width: 100%;
		display: inline-block;
	}
	#section3 .menuBox .l dd,
	#section3 .menuBox .r dd{
		text-align: right;
		width: 100%;
		display: inline-block;
	}
}