@charset "UTF-8";
/* CSS Document */






@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@500;600;700&display=swap');
/*
font-family: 'Zen Old Mincho', serif;
Medium 500
SemiBold 600
Bold 700
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');
/*
font-family: 'Noto Sans JP', sans-serif;
Light 300
Medium 500
*/
/*
@font-face {
	font-family:'DINPro-Light';
	src: url("../../fonts/DINPro-Light.eot");
	src: url("../../fonts/DINPro-Light.eot?#iefix") format("embedded-opentype"), 
	url('../../fonts/DINPro-Light.woff2') format('woff2'),
	url('../../fonts/DINPro-Light.woff') format('woff'),
	url('../../fonts/DINPro-Light.ttf') format('truetype'),
	url('../../fonts/DINPro-Light.svg#DINPro-Light') format('svg');
}
*/
@font-face {
	font-family:'DINPro-Regular';
	src:url('../../fonts/DINPro-Regular.eot');
	src:url('../../fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Regular.woff2') format('woff2'),
	url('../../fonts/DINPro-Regular.woff') format('woff'),
	url('../../fonts/DINPro-Regular.ttf') format('truetype'),
	url('../../fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
}
@font-face {
	font-family:'DINPro-Medium';
	src:url('../../fonts/DINPro-Medium.eot');
	src:url('../../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Medium.woff2') format('woff2'),
	url('../../fonts/DINPro-Medium.woff') format('woff'),
	url('../../fonts/DINPro-Medium.ttf') format('truetype'),
	url('../../fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
}
@font-face {
	font-family:'DINPro-Bold';
	src:url('../../fonts/DINPro-Bold.eot');
	src:url('../../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Bold.woff2') format('woff2'),
	url('../../fonts/DINPro-Bold.woff') format('woff'),
	url('../../fonts/DINPro-Bold.ttf') format('truetype'),
	url('../../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
}







/* ---------- RESET ---------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin:0;
  padding:0;
  border:0;
  font-size: 100%;
  font:inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline:none;
	vertical-align:top;
	font-size:0;
	line-height:0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
hr {
  height:0;
  margin:0;
  padding:0;
  border:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}

input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
a.nohover:hover {
  opacity: 1.0;
}

img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow:none;
    box-shadow:none;   
    outline:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}








html,body{
	height: 100%;
	min-height:100%;
	z-index:1;
	position:relative;
}


body{
	color:#2E0B05;
	font-family: 'Zen Old Mincho','ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size: 14px;
	font-weight: 500;
    line-height: 1.7;
	background: #FFF;
}

.clear:after,
ul:after,
li:after,
dl:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}





/* ---------------------------------------------------------- */


/* standard */

.fadeIn,
.delighter .fadeIn{
	opacity:0;
    position: relative;
    top: 2vw;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: top 1.0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.0s;
	transition: top 1.0s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1.0s;
}
.delighter.started .fadeIn{
	opacity:1;
    top: 0;
}


/* ---------------------------------------------------------------------------- */



#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    height:100vh;
    top:0px;
    right:0px;
    background:#FFF;
    z-index:1000;
    overflow:hidden;
	-webkit-transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.5s cubic-bezier(0.76, 0, 0.24, 1);
}
#loader-bg.close{
	width: 0;
}





/* ---------------------------------------------------------------------------- */


.mainImage{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	z-index: 1;
	overflow: hidden;
}

.mainImage .main{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: url("../images/mainimage_pc.jpg") center center no-repeat;
	background-size: cover;
	-webkit-transform: scale(1.07);
    transform: scale(1.07);
	-webkit-transition: transform 2.0s cubic-bezier(0.25, 1, 0.5, 1);
	transition: transform 2.0s cubic-bezier(0.25, 1, 0.5, 1);
}
.mainImage.start .main{
	-webkit-transform: scale(1.0);
    transform: scale(1.0);
}

.mainImage .cover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	opacity: 0;
	background: url("../images/mainimage_pc.jpg") center center no-repeat;
	background-size: cover;
	-webkit-transition: opacity 2.5s 2.5s;
	transition: opacity 2.5s 2.5s;
}

.mainImage.view .cover{opacity: 1;}


/*-------------------------------------*/

header{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 10;
}

header .title{
	position: absolute;
	top: 38%;
	left: 0;
	right: 0;
	width: 72%;
	z-index: 10;
	margin: 0 auto;
	opacity: 1;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

header .title h1{
	font-size: 3.3vw;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
header .title h2{
	font-size: 1.6vw;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
header .title h2 span{display: block;}

header .title h2 span.top{
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
header .title h2 span.bottom{
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
header .title h3{
	width: 6.3vw;
	margin-top: 2.0vw;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
header .slidein{
	position: relative;
	opacity: 0;
	left: -1.8vw;
	-webkit-transition: left 1.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
	transition: left 1.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
}
header.start .slidein{
	position: relative;
	opacity: 1;
	left: 0;
}


/* ---------------------------------------- */



.lead{
	position: relative;
	z-index: 10;
	width: 100%;
	padding: 7% 0 9%;
	color: #3E0E0E;

}
.lead .leadInner{
	text-align: center;
}

.lead .leadText{
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 5.2em;
	white-space: nowrap;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	display: inline-block;
	text-align: left;
}


.lead .leadText p,
.lead .leadText.delighter p{
	letter-spacing: 0.18em;
	opacity: 0;
	top: 1.5em;
	position: relative;
	-webkit-transition: top 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
	transition: top 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
}
.lead .leadText.delighter.started p{opacity: 1;top: 0;}

.lead .leadText.delighter p:nth-child(1){}
.lead .leadText.delighter p:nth-child(2){-webkit-transition-delay: 0.3s;transition-delay: 0.3s;}
.lead .leadText.delighter p:nth-child(3){-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
.lead .leadText.delighter p:nth-child(4){-webkit-transition-delay: 0.9s;transition-delay: 0.9s;}
.lead .leadText.delighter p:nth-child(5){-webkit-transition-delay: 1.2s;transition-delay: 1.2s;}
.lead .leadText.delighter p:nth-child(6){-webkit-transition-delay: 1.5s;transition-delay: 1.5s;}
.lead .leadText.delighter p:nth-child(7){-webkit-transition-delay: 1.8s;transition-delay: 1.8s;}
.lead .leadText.delighter p:nth-child(8){-webkit-transition-delay: 2.1s;transition-delay: 2.1s;}


	
	
	
.lead .navi,
.lead .navi.delighter{
	width: 100%;
	margin-top: 50px;
	position: relative;
	top: 1vw;
	opacity: 0;
	-webkit-transition: top 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
	transition: top 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.3s;
}
.lead .navi.delighter.started{opacity: 1;top: 0;}



.lead .navi ul{
	display: flex;
	justify-content:center;
	flex-wrap:nowrap;
}

.lead .navi ul li{
	display: inline-block;
	width: 150px;
}
.lead .navi ul li:nth-child(2){margin: 0 55px;}

.lead .navi ul li a{
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	width: 100%;
	text-align: center;
	padding: 0.6em 0;
	color: #2E0B05;
	display: inline-block;
	background: #E5DFD3;
	border: 1px solid #2E0B05;
	-webkit-transition: background 0.4s, color 0.4s;
	transition: background 0.4s, color 0.4s;
}
@media(min-width: 769px) {
.lead .navi ul li a:hover{
	background: #2E0B05;
	color: #E5DFD3;
}
}




/* ---------------------------------------- */



article{
	width: 100%;
	position: relative;
	z-index: 20;
}


.category{
	width: 100%;
	position: relative;
	overflow: hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}


.category.c01{z-index: 20;background: #6B7C77;}
.category.c02{z-index: 30;}
.category.c03{z-index: 40;}


.category .bk{
	position: absolute;
	z-index: 1;
	top: 40vw;
	left: 0;
	right: 0;
	bottom: 0;
}
.category.c02 .bk{background: #67798B;}
.category.c03 .bk{background: #9AA7B5;}



/* ---------------------------------- */



.imageArea{
	width: 100%;
	position:relative;
	z-index: 5;
	margin-top: 40vw;
	border-top: 1px solid transparent;
}
.c01 .imageArea{margin-top: 0;}

.imageArea .setBox{
	width: 100%;
	position: relative;
}

.imageArea .setBox .chach{
	position: absolute;
	font-size: 1.8vw;
	letter-spacing: 0.25em;
	line-height: 2.3;
	white-space: nowrap;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.imageArea .setBox .chach h4{-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}

.imageArea .setBox .chach span{
	display: inline-block;
	position: relative;
	background: #E5DFD3;
	border: 2px solid #2E0B05;
	padding: 1.3em 0 1.0em;
}
.imageArea .setBox .chach span.line02{
	margin-top: 3.0em;
	z-index: 5;
	left: 2px;
}
.c02 .imageArea .setBox .chach span.line02{margin-top: 3.2em;}
.c03 .imageArea .setBox .chach span.line02{margin-top: 3.6em;}



.imageArea .setBox .chach span.line01:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: -5px;
	height: 45%;
	width: 10px;
	z-index: 10;
	background: #E5DFD3;
}
.imageArea .setBox .chach span.line02:after{
	content: "";
	position: absolute;
	top: 0;
	right: -5px;
	height: 45%;
	width: 10px;
	z-index: 10;
	background: #E5DFD3;
}



.imageArea .setBox figure{border: 2px solid #2E0B05;}
.imageArea .setBox figure span{
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


.imageArea .setBox .categoryTitle{position: absolute;}
.imageArea .setBox .categoryTitle .titleInner{-webkit-transition-delay: 0.8s;transition-delay: 0.8s;}

.imageArea .setBox .categoryTitle h2{
	font-size: 5.8vw;
	line-height: 1;
	letter-spacing: 0.03em;
}
.c02 .imageArea .setBox .categoryTitle h2{padding-left: 2.4em;}
.c03 .imageArea .setBox .categoryTitle h2{padding-left: 3.5em;}


.imageArea .setBox .categoryTitle h3{
	font-size: 2.2vw;
	line-height: 1;
	letter-spacing: 0.03em;
	padding-left: 1.7em;
	position: relative;
	margin-top: 0.7em;
	white-space: nowrap;
}
.c01 .imageArea .setBox .categoryTitle h3{margin-left: 1.0em;}
.c02 .imageArea .setBox .categoryTitle h3{margin-left: 7.3em;}
.c03 .imageArea .setBox .categoryTitle h3{margin-left: 10.5em;}


.imageArea .setBox .categoryTitle h3:before{
	content: "";
	position: absolute;
	top: 65%;
	left: 0;
	width: 1.4em;
	height: 1px;
	background: #2E0B05;
}



.imageArea .setBox .textBox{
	width: 100%;
	font-size: 1.08vw;
	letter-spacing: -0.02em;
	line-height: 2.4;
}



.imageArea .setBox .categoryTitle .textBox{
	background: #E5DFD3;
	border: 2px solid #3E0E0E;
	padding: 1em 1.2em;
	margin-top: 2.5em;
}

.imageArea .setBox .textBox .textInner{
	background: #E5DFD3;
	border: 2px solid #3E0E0E;
	padding: 1em 1.2em;
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}


/*-------------*/


.c01 .imageArea .set01{margin-top: 12%;}
.c01 .imageArea .set01 .img01{width: 78%;border-left: none;}
.c01 .imageArea .set01 .img01 span{padding-top: 65%;background-image: url("../images/c01img01_pc.jpg");}
.c01 .imageArea .set01 .chach{top: -4em;left: calc(78% - 0.8em);}

.c01 .imageArea .set02{margin-top: -2px;}
.c01 .imageArea .set02 .img02{width: 66%;margin-left: 34%; border-right: none;}
.c01 .imageArea .set02 .img02 span{padding-top: 66.6%;background-image: url("../images/c01img02_pc.jpg");}
.c01 .imageArea .set02 .categoryTitle{top: 9%;left: 8%;width: 37.5%;}
.c01 .imageArea .set02 .categoryTitle .textBox{margin-left: 11%;width: 100%;}

.c01 .imageArea .set03{margin-top: -2px;display: flex;}
.c01 .imageArea .set03 .img03{width: 34%;border-left: none;border-right: none;}
.c01 .imageArea .set03 .img03 span{padding-top: 129%;background-image: url("../images/c01img03_pc.jpg");}
.c01 .imageArea .set03 .img04{width: 66%;border-right: none;}
.c01 .imageArea .set03 .img04 span{padding-top: 66.6%;background-image: url("../images/c01img04_pc.jpg");}

.c01 .imageArea .set04{margin-top: -2px;}
.c01 .imageArea .set04 .img05{width: 66%;border-left: none;}
.c01 .imageArea .set04 .img05 span{padding-top: 66.6%;background-image: url("../images/c01img05_pc.jpg");}
.c01 .imageArea .set04 .textBox{
	position: absolute;
	top: 60%;
	left: 58%;
	width: 28%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.c01 .imageArea .set05{margin-top: -2px;display: flex;}
.c01 .imageArea .set05 .img06{width: 34%;border-left: none;border-right: none;}
.c01 .imageArea .set05 .img06 span{padding-top: 129%;background-image: url("../images/c01img06_pc.jpg");}
.c01 .imageArea .set05 .img07{width: 66%;border-right: none;}
.c01 .imageArea .set05 .img07 span{padding-top: 66.6%;background-image: url("../images/c01img07_pc.jpg");}

.c01 .imageArea .set05 .textBox{display: none;}


/*---------------------*/


.c02 .imageArea .set01{margin-top: 12%;}
.c02 .imageArea .set01 .img01{width: 78%;margin-left: 22%; border-right: none;}
.c02 .imageArea .set01 .img01 span{padding-top: 65%;background-image: url("../images/c02img01_pc.jpg");}
.c02 .imageArea .set01 .chach{top: -3.7em;left: calc(22% - 1.8em);}

.c02 .imageArea .set02{margin-top: -2px;}
.c02 .imageArea .set02 .img02{width: 66%;margin-left:0; border-left: none;}
.c02 .imageArea .set02 .img02 span{padding-top: 66.6%;background-image: url("../images/c02img02_pc.jpg");}
.c02 .imageArea .set02 .categoryTitle{bottom:13%;left: 55%;width: 33%;}





.c02 .imageArea .set03{margin-top: -2px;display: flex;}
.c02 .imageArea .set03 .img03{width: 34%;border-left: none;border-right: none;}
.c02 .imageArea .set03 .img03 span{padding-top: 129%;background-image: url("../images/c02img03_pc.jpg");}
.c02 .imageArea .set03 .img04{width: 66%;border-right: none;}
.c02 .imageArea .set03 .img04 span{padding-top: 66.6%;background-image: url("../images/c02img04_pc.jpg");}

.c02 .imageArea .set04{margin-top: -2px;}
.c02 .imageArea .set04 .img05{width: 66%;margin-left: 34%; border-right: none;}
.c02 .imageArea .set04 .img05 span{padding-top: 66.6%;background-image: url("../images/c02img05_pc.jpg");}
.c02 .imageArea .set04 .textBox{
	position: absolute;
	top: 33%;
	left: 12%;
	width: 28%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.c02 .imageArea .set05{margin-top: -2px;display: flex;}
.c02 .imageArea .set05 .img06{width: 50%;border-left: none;border-right: none;}
.c02 .imageArea .set05 .img06 span{padding-top: 65%;background-image: url("../images/c02img06_pc.jpg");}
.c02 .imageArea .set05 .img07{width: calc(50% + 2px);border-right: none;}
.c02 .imageArea .set05 .img07 span{padding-top: 65%;background-image: url("../images/c02img07_pc.jpg");}

.c02 .imageArea .set05 .textBox{display: none;}

/*---------------------*/


.c03 .imageArea .set01{margin-top: 12%;}
.c03 .imageArea .set01 .img01{width: 78%;margin-left: 22%; border-right: none;}
.c03 .imageArea .set01 .img01 span{padding-top: 65%;background-image: url("../images/c03img01_pc.jpg");}
.c03 .imageArea .set01 .chach{top: -3.7em;left: calc(22% - 1.8em);}


.c03 .imageArea .set02-03{width: 100%;display: flex;flex-direction:row-reverse;margin-top: -2px;}

.c03 .imageArea .set02{width: 66%;margin-top: -2px;}
.c03 .imageArea .set02 .img02{width: 100%;margin-top: 33.4%;border-left: none;border-right: none;}
.c03 .imageArea .set02 .img02 span{padding-top: 66.6%;background-image: url("../images/c03img02_pc.jpg");}
.c03 .imageArea .set02 .categoryTitle{top:6%;left: 17%;width: 64%;}

.c03 .imageArea .set03{width: 34%;}
.c03 .imageArea .set03 .img03{width: 100%;border-left: none;}
.c03 .imageArea .set03 .img03 span{padding-top: 129%;background-image: url("../images/c03img03_pc.jpg");}
.c03 .imageArea .set03 .img04{width: 100%;border-left: none;margin-top: -2px;}
.c03 .imageArea .set03 .img04 span{padding-top: 65%;background-image: url("../images/c03img04_pc.jpg");}

.c03 .imageArea .set04{margin-top: -2px;}
.c03 .imageArea .set04 .img05{width: calc(66% + 2px);margin-left: calc(34% - 2px); border-right: none;}
.c03 .imageArea .set04 .img05 span{padding-top: 66.6%;background-image: url("../images/c03img05_pc.jpg");}
.c03 .imageArea .set04 .textBox{
	position: absolute;
	top: 56%;
	left: 12.5%;
	width: 25%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.c03 .imageArea .set05{margin-top: -2px;display: flex;}
.c03 .imageArea .set05 .img06{width: 66%;border-left: none;border-right: none;}
.c03 .imageArea .set05 .img06 span{padding-top: 66.6%;background-image: url("../images/c03img06_pc.jpg");}
.c03 .imageArea .set05 .img07{width: 34%;border-right: none;}
.c03 .imageArea .set05 .img07 span{padding-top: 129.8%;background-image: url("../images/c03img07_pc.jpg");}

.c03 .imageArea .set05 .textBox{display: none;}

/* ---------------------------------------------------------------------------- */


.recommend{
	width: 100%;
	position: relative;
	z-index: 5;
	padding: 220px 0 520px;/*bottom + 300*/
	text-align: center;
}
.c03 .recommend{padding-bottom: 220px;}


.recommend h2{
	display: inline-block;
	margin: 0 auto;
	font-size: 20px;
	line-height: 1;
	padding: 0.5em 1em;
	letter-spacing: 0.03em;
	background: #E5DFD3;
	border: 2px solid #2E0B05;
}
.recommend h2 br{display: none;}

.recommend .coordinate{
	width: 85%;
	max-width: 970px;
	margin: 4% auto 0;
}
.recommend .coordinate ul{width: 100%;display: flex;}
.recommend .coordinate ul li{width: 30.5%;}
.recommend .coordinate ul li:nth-child(2){margin: 0 4.25%;}

.recommend .coordinate figure{
	width: 100%;
	border: 2px solid #2E0B05;
}
.recommend .coordinate figure span{
	padding-top: 136.5%;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;	
}
.recommend .coordinate .cooed_c0101 span{background-image: url("../images/c01rec01.jpg");}
.recommend .coordinate .cooed_c0102 span{background-image: url("../images/c01rec02.jpg");}
.recommend .coordinate .cooed_c0103 span{background-image: url("../images/c01rec03.jpg");}
.recommend .coordinate .cooed_c0201 span{background-image: url("../images/c02rec01.jpg");}
.recommend .coordinate .cooed_c0202 span{background-image: url("../images/c02rec02.jpg");}
.recommend .coordinate .cooed_c0203 span{background-image: url("../images/c02rec03.jpg");}
.recommend .coordinate .cooed_c0301 span{background-image: url("../images/c03rec01.jpg");}
.recommend .coordinate .cooed_c0302 span{background-image: url("../images/c03rec02.jpg");}
.recommend .coordinate .cooed_c0303 span{background-image: url("../images/c03rec03.jpg");}


.recommend .specList{
	width: 100%;
	font-size: 13px;
	line-height: 1.5;
	color: #E5DFD3;
	text-align: left;
}
.recommend .specList a{color: #E5DFD3;-webkit-transition: opacity 0.4s;transition: opacity 0.4s;}
.recommend .specList .box{width: 100%;margin-top: 1em;}
.recommend .specList .gender{font-family:'DINPro-Bold';}
.recommend .specList p{font-family:'DINPro-Regular';margin-top: 0.4em;}

.recommend .specList .num{white-space: nowrap;display: inline-block;}
.recommend .specList .buy{margin-left: 4px;}
.recommend .specList .buy svg{width: 23px;height: 11px;fill:#E5DFD3;}


.c03 .recommend .specList,
.c03 .recommend .specList a{color: #2E0B05;}
.c03 .recommend .specList .buy svg{fill:#2E0B05;}


@media(min-width: 769px) {
.recommend .specList a:hover{opacity: 0.6;}
}

/*-----------------*/

.recommend .pickup{
	width: 100%;
	font-size: 12px;
	text-align: left;
	padding: 1.5em 1.5em;
	background: #E5DFD3;
	border: 2px solid #2E0B05;
	margin-top: 40px;
}

.recommend .pickup .pickItem{
	margin-top: 20px;
}
.recommend .pickup .pickItem:first-of-type{margin-top: 10px;}

.recommend .pickup h3{
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding-bottom: 0.8em;
	border-bottom: 1px dashed #2E0B05;
}

.recommend .pickup h4{
	font-weight: 700;
	line-height: 1.2;
	padding-bottom: 0.3em;
}
.recommend .pickup h4 em{font-family:'DINPro-Bold';}
/*.recommend .pickup h4 span{white-space: nowrap;}*/
.recommend .pickup p{
	line-height: 1.9;
}


/* ---------------------------------------------------------------------------- */


.campEvent{
	width: 100%;
	position: relative;
	z-index: 100;
	color: #E5DFD3;
	background: #3B556E;
	overflow: hidden;
}
.campEvent .eventInner{
	width: 85%;
	max-width: 970px;
	margin: 0 auto;
	padding: 120px 0;
	display: flex;
}
.campEvent .textBox{width: 50%;}
.campEvent .imageBox{width: 48%;margin-left: 2%;}


.campEvent .textBox .logo{width: 102px;}
.campEvent .textBox h2{
	font-size: 42px;
	letter-spacing: 0.03em;
	line-height: 1.4;
	margin-top: 0.5em;
}
.campEvent .textBox h3{
	font-size: 24px;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

.campEvent .textBox .spImage{display: none;}

.campEvent .textBox .element{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	margin-top: 25px;
}
.campEvent .textBox .element h4{
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: 0.05em;
	margin-bottom: 1.7em;
}
.campEvent .textBox .element h4 br.res{display: none;}
.campEvent .textBox .element p{	
	font-size: 15px;
	line-height: 1.75;
	letter-spacing: 0.03em;
}
.campEvent .textBox .element h5{
	width: 93%;
	margin-top: 30px;
	font-weight: 500;
	color: #3E0E0E;
	font-size: 17px;
	letter-spacing: 0.02em;
	line-height: 1.4;
	padding: 0.5em 0 0.6em;
	text-align: center;
	background: #E5DFD3;
	border: 2px solid #2E0B05;
}
.campEvent .textBox .element h5 br{display: none;}

/*--------*/

.campEvent .imageBox p{border: 2px solid #2E0B05;}
.campEvent .imageBox p:first-child{margin-bottom: 5%;}



/* ---------------------------------------------------------------------------- */

footer{
	width: 100%;
	text-align: center;
	background: #9AA7B5;
	padding: 250px 0 200px;
	position: relative;
	z-index: 50;
}

footer .image{
	width: 78%;
	max-width: 846px;
	margin: 0 auto;
}
footer .image p{border: 2px solid #2E0B05;}

footer .pageTop{
	font-size: 20px;
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
	margin: 160px 0 200px;
}
footer .pageTop p{
	display: inline-block;
	cursor: pointer;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
@media(min-width: 769px) {
footer .pageTop p:hover{opacity: 0.6;}
}

footer .logo{width: 170px;margin: 0 auto;}

footer .copyright{
	font-family:'DINPro-Medium';
	line-height: 1.8;
	font-size: 12px;
	letter-spacing: 0.03em;
	margin-top: 40px;
	color: #3E0E0E;
}
footer .copyright br{display: none;}





/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/




#naviTrigger{display: none;}
.spNavi{display: none;}