@charset "utf-8";

@import "reset.css";

html {
	font-size:16px;
}

a:link { color: #000000; text-decoration: none; }
a:visited { color: #000000; }
a:hover { color: #000000; }
a:active { color: #00000; }

html, body {
}
img {
	vertical-align:bottom;
}
body {
	background: #eee;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	color:#000;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: 100%;
}
hr.short_line {
	border:none;
	border-bottom:solid 1px #666;
	width:24px;
	margin:1.75rem auto 1.125rem auto;
}

#wrapper {
	position: relative;
}
#wrapper ,
#wrapper > .wrapper {
	height:100vh;
}

/* *********************************************** オープニング
*/
#opening {
	width:100%;
	height:100vh;
	position:fixed;
	top:0px;
	left:0px;
	z-index:999999;
	background-color:#fff;
	display:none;
}
#opening2 {
	display:table;
	width:100%;
	height:100%;
}
#opening_inner {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	padding-bottom:2rem;
}
#opening_inner > div {
	margin-bottom:2.5rem;
}
#opening_image {
	width: 160px;
	margin-left:auto;
	margin-right:auto;
}
#opening_inner > div img{
	width:100%;
}
#opening p{
	font-size: 1rem;
	margin-bottom: 0.7rem;
	letter-spacing: 0.04em;
}
#opening p strong{
	font-size: 1.6rem;
	font-weight: 300;
	letter-spacing: 0.05em;
}
@media screen and (max-height: 960px)  {
	#opening_inner > div img{
		max-height: 640px;
/*		height:64vh; */
	}
}
/* *********************************************** ヘッダ
*/
header {
	position:absolute;
	top:0px;
	left:0px;
	padding-top:4.25rem;
	width:100%;
	z-index:999;
}
header h1 {
	font-size:1.7rem;
	text-align:center;
	margin-bottom:2.55rem;
	letter-spacing:0.065em;
	font-weight:normal;
	cursor:pointer;
}
header nav{
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	line-height: 1.8em;
	margin:  0 auto;
	text-align:center;
	}
header nav ul{
	}
header nav ul li{
	display:inline-block;
	margin-right: 5em;
	}
header nav ul li:last-child{
	margin-right:0em;
	}
header nav a{
	color:#000;
	text-decoration:none;
	}
header nav hr{
	width:0%;
	border:none;
	border-bottom:solid 1px #000;
	margin: 0em auto 0 auto;
	transition-duration:0.3s;
	transition:property:width, border-bottom;
	}
header nav .current hr{
	width:100%;
	}
header nav a:hover hr{
	width:100%;
}
body.bgdark:not(.display_message) header ,
body.bgdark:not(.display_message) footer ,
body.bgdark:not(.display_message) header nav a{
	transition-duration:0.3s;
	transition:property:color;
	color:#fff;
}
body.bgdark:not(.display_message) header nav hr{
	transition-duration:0.3s;
	transition:property:border-bottom;
	border-bottom:solid 1px #fff;
}
body.bgdark:not(.display_message) .content {
	transition-duration:0.3s;
	transition:property:color;
	color:#fff;
}
@media screen and (max-height: 960px)  {
	header {
		padding-top:7vh;
	}
	header h1 {
		margin-bottom:4.25vh;
	}
}

/* *********************************************** フッタ
*/
footer {
	position:absolute;
	bottom:0px;
	left:0px;
	padding-bottom:2.5rem;
	width:100%;
	z-index:999;
}
footer .copy {
	font-size:0.6875rem;
	text-align:center;
}
footer .instagram {
}
footer .btn_instagram a{
	display:block;
	width:1rem;
	height:1rem;
	margin:0 auto 1rem auto;
	background:url(../images/icon_instagram.svg) center center no-repeat;
	background-size:cover;
}
body.bgdark:not(.display_message) footer .btn_instagram a{
	background:url(../images/icon_instagram_wh.svg) center center no-repeat;
	background-size:cover;
}



/* *********************************************** スワイプコンテナ
*/
.swiper-container {
	width: 100%;
	height: 100vh;
	overflow:hidden;
}
.swiper-pagination-bullet {
	width:6px;
	height:6px;
}
.swiper-pagination-bullet-active {
	background-color: #000;
}
.content_visuals {
	position: relative;
	height:100%;
	overflow:hidden;
}
.content_visual {
	position:absolute;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
}
.content_visual img {
	display:block;
	position:relative;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%); 
	transform-origin:0% 0%;
	width:auto;
	height:100%;
}
.content_visual img.vlong {
	width:100%;
	height:auto;
}
.content {
	position:absolute;
	height:calc(100% - 250px);
	width:100%;
	top:0px;
	left:0px;
	padding-top:250px;
}
.content h2 {
	font-size:1.56rem;
	letter-spacing:0.5em;
	font-weight:normal;
}

@media screen and (max-height: 960px)  {
	.content {
		padding-top:25.5vh;
		height:calc(100% - 26vh);
	}
}


/* *********************************************** ABOUT
*/
body.display_message #about .content_visuals {
	opacity:0.1;
	transition-duration:0.5s;
	transition-property:opacity;
}
#about .content{
	text-align:center;
}
#about .content > div {
	width:100%;
}
#about .about_sentence {
	display:none;
	position:relative;
}
#about .about_btnOpen {
	display:block;
	position:absolute;
	bottom:9rem;
	width:100%;
	text-align:center;
}
#about .about_btnOpen .btn_inner{
	display:inline-block;
	
}
#about .about_btnOpen .btn_inner p{
	font-size:1.05rem;
	letter-spacing:0.15em;
	padding:0.5em;
	border-bottom:solid 1px #000;
	cursor:pointer;
}
body.bgdark:not(.display_message) #about .about_btnOpen .btn_inner p{
	transition-duration:0.3s;
	transition:property:border-bottom;
	border-bottom:solid 1px #fff;
}
#about .about_btnOpen .btn_inner  span{
	font-size:0.8125rem;
	letter-spacing:0.05em;
	margin-bottom:1em;
	display:block;
}

#about .content h2 {
	font-size:1.3rem;
	color:#000;
	letter-spacing: 0.05em;
}
#about .content_body {
	line-height:2.9;
	font-size:0.70rem;
	height: 30rem;
	position:relative;
	margin-bottom:1.875rem;
}
#about .content_body p{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	color:#000;
	letter-spacing:0.05em;
}
#about .content_body .lang_en{
	line-height:2.2;
}
.select_lang {
	text-align:center;
	letter-spacing:0.03em;
} 
.select_lang a{
	color:#666;
	font-size:0.6875rem;
	display:block;
	padding-bottom:0.4em;
}
.select_lang hr{
	border:none;
	border-bottom:solid 1px #666;
	width:0%;
	margin:0 auto;
	transition-duration:0.3s;
	transition-property:width;
}
.select_lang .current hr{
	width:100%;
}

.select_lang ul{
	list-style-type:none;
	display:inline-block;
} 
.select_lang li{
	float:left;
	padding:0 1em;
	border-right:solid 1px #666;
	cursor:pointer;
} 
.select_lang li:last-child{
	border-right:none;
}
#about_btnClose {
	width:25px;
	height:25px;
	background:url(../images/btn_close.png) center center no-repeat;
	background-size:cover;
	position:absolute;
	top: -40px;
	left:calc(50% + 15em);
	cursor:pointer;
	display:none;
}

@media screen and (max-height: 960px)  {
	#about .content_body {
		line-height: 2.9vh;
		height: 42vh;
		margin-bottom:3.1vh;
	}
}

/* *********************************************** ACCESS
*/
#access .content{
/*	padding-top:250px; */
}
#access .content_header{
	font-size: 0.8rem;
	line-height: 2.2;
	margin-bottom:1rem;
	text-align:center;
	letter-spacing:0.15em;
}
#access .content_body{
	font-size:1.166rem;
	line-height:2.5;
	text-align:center;
	letter-spacing:0.15em;
}

#access .content_body .small{
	margin-top: 0.1rem;
	font-size:0.6rem;
	letter-spacing:0.07em;
	line-height: 1.4;
}

#access .content_body .mail{
    margin-top: 1.5rem;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
	line-height: 1.8;
}

/* *********************************************** INSTAGRAM
*/
#instagram .content_body {
	max-width:1281px;
	width:90%;
	margin:auto;
}
#instafeed  a{
	width:19.2%;
	margin-right:1%;
	margin-bottom:1%;
	float:left;
	display:block;
	position:relative;
	overflow:hidden;
}
#instafeed  a:nth-child(5n){
	margin-right:0%;
}
#instafeed  a img{
	display:block;
	position:relative;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%); 
	width:auto;
	height:100%;
}
#instafeed  a img[data-orientation="portrait"] {
	width:100%;
	height:auto;
}
@media screen and (max-height: 1200px)  {
	#instagram .content_body {
		max-width:1000px;
	}
}
@media screen and (max-height: 1024px)  {
	#instagram .content_body {
		max-width:800px;
	}
}
@media screen and (max-height: 768px)  {
	#instagram .content_body {
		max-width:640px;
	}
}

/* -----------------------------------------------------------------------------
モバイル
----------------------------------------------------------------------------- */
@media screen and (min-width: 769px)  {
	.disp_sp {
	display:none !important;
	}
}
@media screen and (max-width: 768px)  {
	.disp_pc {
	display:none !important;
	}
	hr.short_line {
	margin:1.0rem auto 0.875rem auto;
	}

/* *********************************************** オープニング*/

	#opening_inner {
	padding-bottom: 3rem;
	}
	#opening_inner > div {
	margin-bottom:7.2vw;
	}
	#opening_inner > div img{
	width: 70%;
	max-width:373px;
	}
	#opening p strong {
    font-size: 1.4rem;
	}
	#opening p{
	margin-bottom:1.7vw;
	}

/* *********************************************** ヘッダ*/
	header h1 {
	font-size: 1.3rem;
	letter-spacing: 0.05em;
	}
	header nav{
	font-size:0.7rem;
	width: 86%;
	line-height: 2em;
	letter-spacing: 0.07em;
	}
	header nav ul li{
	margin:0 1.5em 1.2em;
	}
	/*header nav ul li:first-child{
	display:none;
	}*/

/* *********************************************** スワイプコンテナ*/
	.content {
	padding-top:9rem;
	padding-top:26vh;
	height:calc(100% - 26vh);
	}

/* *********************************************** ABOUT*/
	#about .content{
	/*	padding-top:9rem; */
	}
	#about .about_btn {
	height:calc(100% - 26vh);
	}
	#about .content h2 {
	font-size:1.0rem;
	}
	#about .content_body {
	/*	line-height:1.9; */
	line-height:2.1;
	font-size:0.65rem;
	height: 22rem;
	position:relative;
	/*	margin-bottom:1.333rem; */
	margin-bottom:0.2em;
	letter-spacing:0.02em;
	}
	#about .content_body p{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	}
	#about .content_body .lang_en{
	line-height: 2.0;
	}
	.select_lang {
	text-align:center;
	} 
	.select_lang a{
	color:#666666;
	font-size:0.6875rem;
	}
	.select_lang ul{
	list-style-type:none;
	display:inline-block;
	} 
	.select_lang li{
	float:left;
	padding:0 1em;
	border-right:solid 1px #666666;
	} 
	.select_lang li:last-child{
		border-right:none;
	}
	#about_btnClose {
		width: 1.3rem;
		height: 1.3rem;
		top: -1.5rem;
		left: auto;
		right: 2rem;
	}

/* *********************************************** ACCESS
*/
	#access .content{
	/*	padding-top:9rem; */
	}
	#access .content_header{
	font-size:0.7em;
	letter-spacing:0.05em;
	padding-top: 0.0em;
	}
	#access .content_body{
	font-size:0.96rem;
	line-height:2.0;
	letter-spacing:0.04em;
	}

/* *********************************************** INSTAGRAM
*/
	#instagram .content_body {
		width:65%;
	}
	#instafeed  a{
		width:32.66%;
	}
	#instafeed  a:nth-child(5n){
		margin-right:1%;
	}
	#instafeed  a:nth-child(3n){
		margin-right:0%;
	}
	#instafeed  a:nth-child(n+13){
		display:none;
	}

/* *********************************************** フッタ
*/
	footer {
		padding-bottom:1rem;
	}
	footer .copy{
		font-size:0.625rem;
	}
	footer .btn_instagram a {
		margin-bottom:0.625rem;
	}

}
@media screen and (orientation:portrait) and (max-width: 768px)  {
	html {
	font-size:2.5vw;
	}
	header {
	padding-top:3.5rem;
	}
	header h1 {
	margin-bottom:2.1rem;
	}
	.content {
	padding-top:26vh;
	height:calc(100% - 26vh);
	}
}

@media screen and (orientation:portrait) and (max-width: 480px)  {
	html {
	font-size:4vw;
	}
	header {
	padding-top:1.5rem;
	}
	header h1 {
	margin-bottom: 1.3rem;
	}
	.content {
	padding-top:22vh;
	height:calc(100% - 18vh);
	}
	#about .about_btnOpen {
	bottom: 7.5rem;
	}
	#instagram .content_body {
	width:70%;
	}
}

@media only screen and (orientation:landscape)  and (max-width: 768px){
	html {
	font-size:2vw;
	}
	.disp_pt {
	display:none;
	}
	#opening_inner > div {
	margin-bottom:2.5rem;
	}
	#opening_inner > div img{
	width:20%;
	}
	#opening p{
	margin-bottom:0.6rem;
	font-size:0.9rem;
	}
	#opening p strong{
	font-size:1.33rem;
	}
	#instagram .content_body {
	width:80%;
	}
	#instafeed  a{
	width:19.2%;
	}
	#instafeed  a:nth-child(3n){
	margin-right:1%;
	}
	#instafeed  a:nth-child(5n){
	margin-right:0%;
	}
	#instafeed  a:nth-child(n+11){
	display:none;
	}
}

@media screen and (min-width: 768px){   
.pc { display:block; }
.sp { display:none; }
}
@media screen and (max-width: 768px){   
.pc { display:none; }
.sp { display:block; }
}