@charset "UTF-8";

/* === PC表示 === */
.pc_area{
  display:block;
}
.sp_area{
  display:none;
}
/* === スマホ表示 === */
@media screen and (max-width: 768px){
	.pc_area{
	display:none;
	}
	.sp_area{
	display:block;
	}
}
body {
	font-family: 'Shippori Mincho', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 14px;
	line-height: 2;
	color: #333;
}
a:hover {
	cursor: pointer;
    text-decoration: none;
}
ul { padding: 0; }
.en_text, .en_text_b, .en_text_w {
	font-size: 13px;
}
.en_text {
	font-size: 13px;
	color: #999;
}
.en_text_b {
	color: #333;
}
.en_text_w {
	color: #fff;
}
.ttl-bdr, .ttl-bdr_w {
	font-size: 24px;
	line-height: 1.6;
}
.ttl-bdr_w {
	color: #fff;
}
.title_text {
    color: #000 !important;
    font-size: 1.75rem;
}
.img_center {
   text-align:center;
}
.img50 {
    width: 50%;
}
.img70 {
    width: 70%;
}
.bmb1 {
   margin-top: 1em;
}
.bmb2 {
   margin-top: 2em;
}
.bmb3 {
   margin-top: 3em;
}
.bmb4 {
   margin-top: 4em;
}
.bmb5 {
   margin-top: 5em;
}
.mb1 {
   margin-bottom: 1em;
}
.mb2 {
   margin-bottom: 2em;
}
.mb3 {
   margin-bottom: 3em;
}
.mb4 {
   margin-bottom: 4em;
}
.mb5 {
   margin-bottom: 5em;
}

/* ▼▼▼ ページトップ ▼▼▼ */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 30px;
}
#page-top a {
	display: block;
	width: 40px;
	height: 40px;
	padding: 0;
	background: rgba(202,172,113,.5);
	text-decoration: none;
	color: #fff;
	text-align: center;
	line-height: 1.65;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: rgba(202,172,113,.9);
}

/* ▼▼▼ ヘッダー ▼▼▼*/
header.top-page {
	height: 100vh;
	overflow: hidden;
	padding-right: 0;
	padding-left: 0;
}

/* ▼▼▼ ナビ ▼▼▼ */
.navbar{
	position: fixed;
	width: 100%;
	top: 0;
	padding: 0.5rem 1rem;
	line-height: 1;
	background-color:#000028;
	z-index: 10000;
}
a.nav-link {
	position: relative;
	color: #fff!important;
}
/*ホバーエフェクト*/
a.nav-link::after {
/*アンダーラインのスタイル*/
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #fff;
	bottom: 0;
	left: 0;
/*横方向0で非表示にする*/
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
/*中央を基点にアニメーション*/
	-webkit-transform-origin: center top;
	transform-origin: center top;
/*アニメーションの速度設定*/
	-webkit-transition: all 0.6s ease;
	transition: all 0.56s ease;
}
a.nav-link:hover::after {
/*横方向等倍まで拡大*/
	transform: scale(0.85, 1);
}
.nav-link img{
	height: 16px;
	margin: -0.3em 4px 0 0;
}
header .navbar-brand {
	width: 8.5%;
	margin-right: 2%;
}
header .navbar-brand .logo {
    width: 100%; 
}
.fixed {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
}

/* ▼▼▼ スライダー ▼▼▼ */
.hero {
	position: relative;
	overflow: hidden;
	height: 100%;
}
.slider{
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-color: #000;
}
.slider .center_img {
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 240px;
	height: 240px;
	z-index: 999;
}
.slider .image{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.slider .image:nth-of-type(1){
	background-image: url(img/index/pc_slid_01.jpg);
}
.slider .image:nth-of-type(2){
	background-image: url(img/index/pc_slid_02.jpg);
}
.slider .image:nth-of-type(3){
	background-image: url(img/index/pc_slid_03.jpg);
}
.slider .image:nth-of-type(4){
	background-image: url(img/index/pc_slid_04.jpg);
}
.slider .image:nth-of-type(5){
	background-image: url(img/index/pc_slid_05.jpg);
}
/*.slider .image:nth-of-type(6){
	background-image: url(img/index/pc_slid_06.jpg);
}*/
#asnakami1{
	-moz-animation: fadeinout 25s 0s infinite;
	-webkit-animation: fadeinout 25s 0s infinite;
	-o-animation: fadeinout 25s 0s infinite;
	animation: fadeinout 25s 0s infinite;
}
#asnakami2{
	-moz-animation: fadeinout 25s 5s infinite;
	-webkit-animation: fadeinout 25s 5s infinite;
	-o-animation: fadeinout 25s 5s infinite;
	animation: fadeinout 25s 5s infinite;
}
#asnakami3{
	-moz-animation: fadeinout 25s 10s infinite;
	-webkit-animation: fadeinout 25s 10s infinite;
	-o-animation: fadeinout 25s 10s infinite;
	animation: fadeinout 25s 10s infinite;
}
#asnakami4{
	-moz-animation: fadeinout 25s 15s infinite;
	-webkit-animation: fadeinout 25s 15s infinite;
	-o-animation: fadeinout 25s 15s infinite;
	animation: fadeinout 25s 15s infinite;
}
#asnakami5{
	-moz-animation: fadeinout 25s 20s infinite;
	-webkit-animation: fadeinout 25s 20s infinite;
	-o-animation: fadeinout 25s 20s infinite;
	animation: fadeinout 25s 20s infinite;
}
/*#asnakami6{
	-moz-animation: fadeinout 25s 25s infinite;
	-webkit-animation: fadeinout 25s 25s infinite;
	-o-animation: fadeinout 25s 25s infinite;
	animation: fadeinout 25s 25s infinite;
}*/
@-moz-keyframes fadeinout {
	0% { left:0%; opacity:0; }
	5% { left:0%;opacity:1; }
	20% { left:0%; opacity:1;}
	25% { left:0%;opacity:0; }
	26% { opacity:0;left:100%; }
	99.99% { opacity:0;left:100%; }
	100% { opacity:0;left:0%; }
}
@-webkit-keyframes fadeinout {
	0% { left:0%; opacity:0; }
	5% { left:0%;opacity:1; }
	20% { left:0%; opacity:1; }
	25% { left:0%;opacity:0; }
	26% { opacity:0;left:100%; }
	99.99% { opacity:0;left:100%; }
	100% { opacity:0;left:0%; }
}
@-o-keyframes fadeinout {
	0% { left:0%; opacity:0; }
	5% { left:0%;opacity:1; }
	20% { left:0%; opacity:1; }
	25% { left:0%;opacity:0; }
	26% { opacity:0;left:100%; }
	99.99% { opacity:0;left:100%; }
	100% { opacity:0;left:0%; }
}
@keyframes fadeinout {
	0% { left:0%; opacity:0; }
	5% { left:0%;opacity:1; }
	20% { left:0%; opacity:1; }
	25% { left:0%;opacity:0; }
	26% { opacity:0;left:100%; }
	99.99% { opacity:0;left:100%; }
	100% { opacity:0;left:0%; }
}

/* ▼▼▼ intro ▼▼▼ */
.intro {
	width: 720px;
	margin: 7em auto;
}
.intro p:first-of-type {
	text-align: center;
	line-height: 2.4;
}

/* ▼▼▼ About ▼▼▼ */
.about_ttl {
	width: 1200px;
	height: 400px;
	margin: auto;
	padding-top: 10em;
	background-image: url('img/index/about_ttl_bg01.jpg');
	background-size: cover;
}
.about_ttl p {
	padding-top: 1.5em;
	line-height: 1.6;
	color: #fff;
}
.about_box {
	width: 840px;
	margin: 10em auto 5em;
}
.about_box ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap; 
}
.about_box li {
	width: 400px;
	list-style: none;
	margin-bottom: 5em;
}
.about_box li:nth-of-type(2) { padding: 0 67px; }
.about_box li p {
	padding: 0 10px;
	display: table-cell;
	vertical-align: middle;
	height: 266px;
}
.about_box li:nth-of-type(1) p {
	height: 350px;
}

/* ▼▼▼ パララックス ▼▼▼ */
.parallax_bg {
	background-image: url('img/index/about_ttl_bg02_pc.jpg');
	background-attachment: fixed;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	height: 90vh;
}
.parallax_box {
	width: 840px;
	margin: 0 auto;
}
.parallax_box inner {
	box-sizing: border-box;
	display: table-cell;
	vertical-align: middle;
	height: 90vh;
}
.parallax_box inner p {
	margin: 0;
	padding-top: 1.5em; 
	color: #000;
}
.parallax_box inner p a{
	color: #000;
	text-decoration: underline;
}
.Oeko-Tex_link {
	display: grid;
	justify-content: right;
}
.Oeko-Tex_link a{
	width: 120px;
}

/* ▼▼▼ Collection ▼▼▼ */
.collection {
	width: 920px;
	margin: 10em auto 7em;
}
.collection_box h3 {
	margin: 1.5em 0 0.75em;
	font-size: 21px;
}
.collection_box li {
	margin-bottom: 5em;
	list-style: none;
	text-align: center
}
.online_link {
	display: grid;
	justify-content: right;
	text-decoration: underline;
}
.online_link a { 
	color: #333;
}


/* ▼▼▼▼▼▼▼▼▼ メディアクエリ ▼▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px){
	body {
		font-size: 0.75rem;
		line-height: 1.8;
	}
	.ttl-bdr, .ttl-bdr_w {
		margin-bottom: 1.5em;
		font-size: 1.2rem;
	}
	.en_text, .en_text_b, .en_text_w { font-size: 0.7rem; }
	.container { max-width: 740px; }
	.content_box {
		width: 100%;
		margin: 0;
		padding: 5em 5% 0;
	}
	.content_ttl {
		width: 48%;
		margin: 0 auto 1.5em;
	}
	
	/* === ヘッダー === */
	header.top-page	{ 
		height: 86vh;
	}
	header .navbar-brand {
		width: 25%; 
	}
	a.nav-link::after {
		display: none;
	}
	.navbar-toggler {
		border: none;
	}
	/* === スライダー === */
	.slider .image:nth-of-type(1){
		background-image: url(img/index/sp_slid_01.jpg);
	}
	.slider .image:nth-of-type(2){
		background-image: url(img/index/sp_slid_02.jpg);
	}
	.slider .image:nth-of-type(3){
		background-image: url(img/index/sp_slid_03.jpg);
	}
	.slider .image:nth-of-type(4){
		background-image: url(img/index/sp_slid_04.jpg);
	}
	.slider .image:nth-of-type(5){
		background-image: url(img/index/sp_slid_05.jpg);
	}
	/*.slider .image:nth-of-type(6){
		background-image: url(img/sp_slid_06.jpg);
	}*/
	.slider .center_img {
		width: 25vh;
		height: 25vh;
	}
	
	/* === Intro === */
	.intro {
		width: 84%;
		margin: 5em auto;
	}
	.intro p:first-of-type {
		text-align: left;
		line-height: 2;
	}

	/* === About === */
	.about_ttl {
		width: 100%;
		padding: 0 10%;
		display: table-cell;
		vertical-align: middle;
		height: 50vh;
	}
	.about_ttl p {
		padding-top: 0;
	}
	.about_box {
		width: 100%;
		margin: 5em auto 3em;
		padding: 0 10%;
	}
	.about_box ul {
		justify-content: center;
		padding: 0;
		flex-direction: column;
	}
	.about_box li {
		width: 84%;
		margin: 1.5em auto;
	}
	.about_box li:nth-of-type(1) { order: 2; }
	.about_box li:nth-of-type(2) { order: 1; padding: 0 12%; }
	.about_box li:nth-of-type(3) { order: 3; }
	.about_box li:nth-of-type(4) { order: 4; }
	.about_box li:nth-of-type(5) { order: 6; }
	.about_box li:nth-of-type(6) { order: 5; }
	.about_box li p {
		padding: 0;
		display: inherit;
		vertical-align: top;
		height: auto;
	}
	.about_box li:nth-of-type(1) p {
		height: auto;
	}
	
	/* === パララックス === */
	.parallax_bg {
		background-image: url(img/index/about_ttl_bg02_sp.jpg);
		background-attachment: inherit;
		background-size: auto 100%;
		height: 80vh;
	}
	.parallax_box {
		width: 100%;
		margin: 0;
		padding: 0 10%;
	}
	.parallax_box inner {
		height: 80vh;
	}
	.parallax_box inner p {
		padding-top: 0; 
	}
	.Oeko-Tex_link a {
		width: 6.5rem;
	}

	/* === Collection === */
	.collection {
		width: 90%;
		margin: 7em auto 3em;
	}
	.collection_box h3 {
		font-size: 1rem;
	}
	.collection_box li {
		margin-bottom: 3em;
	}
	.collection_box li p {
	}
}
@media screen and (max-width: 991.98px) {
	.container { 
		max-width: 740px;
	}
}
/* メディアクエリ END */


/* ▼▼▼ SNS ▼▼▼ */
.social img {
	width: 36px;
	height: 36px; 
}
iframe {
	width: 100%;
	height: 450px;
}

/* ▼▼▼ フッター ▼▼▼ */
footer {
	background-color: #eee;
}
footer p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1em;
	text-align: center;
}

/******** メディアページ ********/
.cp_card {
overflow: hidden;
border-radius: 3px;
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: #fff;
-webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
transition: all 0.25s ease-in;
border-bottom: 5px solid transparent;
height: 380px;
}
.cp_card .photo {
height: 200px;
overflow: hidden;
}

.cp_card:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
border: none;
border-bottom: 5px solid #9f9f98;
}
.cp_card .details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 1em 1em 0 1em;
font-size: 0.8em;
}
.cp_card .date {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
}

.cp_card .description {
padding: 1em;
}
.cp_card .description h1 {
font-size: 1.2em;
margin: 0;
margin-bottom: 0.5em;
}
.cp_card .description .text p {
margin: 0;
font-size: 0.9em;
}

.madia_img{
width: 100%;
}


/******** ショップリストページ ********/
.shoplist {
	margin: 10em auto 7em;
}
.shoplist h3 {
	position: relative;
	padding: 0.55em;
	font-size: 14px;
	color: #fff;
	background: #ccc;
}
.shoplistbox{
    margin: 0 auto;
	padding: 0 15px;
}
.shoplistbox dl {
	padding: 8px 0;
	border-bottom: 1px solid #ccc;
}
.shoplistbox dt {
	padding-bottom: 5px;
}
.shoplistbox dd {
	font-size: 13px;
}

@media screen and (max-width: 768px) {
	.shoplist h2 {
		margin-bottom: 0.5em;
	}
	.shoplist h3 {
		font-size: 0.75rem;
	}
	.shoplistbox{
		padding: 0 2%;
	}
	.shoplistbox dt {
		clear: left;
		float: left;
		width: 30%;
	}
	.shoplistbox dd {
		margin-left: 32%;
		font-size: 0.7rem;
	}
}