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



@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho&display=swap');
/*
font-family: 'BIZ UDMincho', serif;
Regular 400
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
/*
font-family: 'Roboto Condensed', sans-serif;
Regular 400
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
/*
font-family: 'Roboto', sans-serif;
Medium 500
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600&display=swap');
/*
font-family: 'Roboto Slab', serif;
Regular 400
Medium 500
SemiBold 600
*/





/* ---------- 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;
}
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:#3C4034;
	font-family: 'Roboto Condensed' , 'BIZ UDMincho' ,'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho','Times New Roman', serif;
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
    line-height: 1.7;
	background: #E6DDB7;
}

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

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


/*

body:before{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	left: 50%;
	top: 0;
	background: #FF0004;
	opacity: 0.3;
	z-index: 1000;
}


.guide:before{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	left: 5%;
	top: 0;
	background: #57CF00;
	opacity: 0.3;
	z-index: 1000;
}
.guide:after{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	left: 10%;
	top: 0;
	background: #57CF00;
	opacity: 0.3;
	z-index: 1000;
}

.guide2:before{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	right: 5%;
	top: 0;
	background: #57CF00;
	opacity: 0.3;
	z-index: 1000;
}
.guide2:after{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	right: 10%;
	top: 0;
	background: #57CF00;
	opacity: 0.3;
	z-index: 1000;
}

.guide5:before{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	right: 15%;
	top: 0;
	background: #57CF00;
	opacity: 0.3;
	z-index: 1000;
}
.guide5:after{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	left: 15%;
	top: 0;
	background: #57CF00;
	opacity: 0.3;
	z-index: 1000;
}



.guide3:before{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	left: 7.5%;
	top: 0;
	background: #FF0004;
	opacity: 0.3;
	z-index: 1000;
}
.guide3:after{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	right: 7.5%;
	top: 0;
	background: #FF0004;
	opacity: 0.3;
	z-index: 1000;
}
.guide4:before{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	left: 12.5%;
	top: 0;
	background: #FF0004;
	opacity: 0.3;
	z-index: 1000;
}
.guide4:after{
	content: '';
	position: fixed;
	width: 1px;
	height: 200vw;
	right: 12.5%;
	top: 0;
	background: #FF0004;
	opacity: 0.3;
	z-index: 1000;
}









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

/* standard */
/*
.fade,
.fade.delighter{
	opacity:0;
    position: relative;
	-webkit-transition: opacity 1.3s;
	transition: opacity 1.3s;
}
/* start */
/*
.fade.delighter.started{
	opacity:1;
}
*/

.fade{
	opacity:0;
    position: relative;
	-webkit-transition: opacity 1.6s;
	transition: opacity 1.6s;
}
/* start */
.fade.view{
	opacity:1;
}



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


#loader-bg{
    display:block;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    z-index:1000;
	background: #E6DDB7;
}


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


/* マスクで現れる */
.imageMask{
	width:100%;
	box-sizing:border-box;
	z-index:5;
	position: relative;
}

.thisImage{}
.thisImage .thisImage-motion{
	width:100%;
	height:110%;
	position:absolute;
	z-index:100;
	left:0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.32, 0, 0.67, 0);
	             transition: width 0.8s cubic-bezier(0.32, 0, 0.67, 0);
}
.thisImage .thisImage-motion{background-color:#62BCBC;}


.thisImage .imageBox {
	/*visibility: hidden;*/
	opacity: 0;
	-webkit-transform:scale(1.15);
	transform:scale(1.15);
	-webkit-transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
	             transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.thisImage.mask-image .thisImage-motion { width: 0;left: 0;}
.thisImage.mask-image .imageBox { /*visibility: hidden;*/opacity: 0; }
.thisImage.show-image .thisImage-motion {
	width: 0;
	right: -1px;
	left:inherit;
	/*opacity:1;*/
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition: width 0.8s cubic-bezier(0.33, 1, 0.68, 1);
	             transition: width 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.thisImage.show-image .imageBox {/*visibility:visible;*/
	opacity: 1;
	-webkit-transform:scale(1.0);
	transform:scale(1.0);
}


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

.wide{display: block;}

.pcView{display: block;}
.spView{display: none;}


.wrapper{
	width: 100%;
	overflow: hidden;
}



.header{/*heightはjsで設定*/
	width: 100%;
	position: relative;
	z-index: 100;
	overflow: hidden;
	background: #E6DDB7;
}
@media(min-width: 769px) {.header{height: 100vh;}}



.header .titleArea{
	width: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 100;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}


.header h1{
	width: 80%;
	position: relative;
	left: 6.5%;
}
.header h1 .pc{display: block;}
.header h1 .sp{display: none;}

.header .mainImageSet{
	width: 100%;
	padding-left: 11.2%;
	position: relative;
	margin-top: 8vh;
	
}
.header .mainImageSet .photo{
	width: 48.2%;
	overflow: hidden;
	position: relative;
}
.header .mainImageSet .photo .imageBox{
	width: 100%;
	padding-top: 133.33%;
	background: url("../images/header_main.jpg") center center no-repeat;
	background-size: cover;
}

.header .mainImageSet .spec{
	position: absolute;
	top: 0;
	left: 62.4%;
	display: inline-block;
	opacity: 0;
	-webkit-transition: left 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.2s, opacity 12s 1.2s;
	transition: left 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.2s, opacity 1.2s 1.2s;
}
.header.start .mainImageSet .spec{opacity: 1;left: 58.4%;}


.header .mainImageSet .spec .text01{
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.02em;
}
.header .mainImageSet .spec .text01 p{
	line-height: 1.4;
	margin-bottom: 0.7em;
}


.header .mainImageSet .spec .text02{
	font-family: 'Roboto Slab', serif;
	font-size: 10px;
	letter-spacing: 0.02em;
	color: #DB2322;
	padding-bottom: 0.5em;
	border-bottom: 1px solid #3C4034;
}
.header .mainImageSet .spec .text02 p{
	line-height: 1.4;
	font-weight: 600;
	margin-bottom: 0.6em;
}
.header .mainImageSet .spec .text02 p span{
	font-weight: 400;
	display: block;
}





.header .copyright{
	width: 10px;
	height: 10px;
	position: absolute;
	top:20px;
	right: 20px;
	z-index: 49;
	-webkit-transform:rotate(90deg);
	transform:rotate(90deg);
}
.header .copyright span{
	position: absolute;
	top: 0;
	left: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 10px;
	color: #FFF;
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
}


.header .scene{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	z-index: 10;
	background: url("../images/header_scene.jpg") center center no-repeat;
	background-size: cover;
}
.header .scene p{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 15;
	margin: 0 auto;
	width: 17%;
}
.header .scene span{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #E6DDB7;
	z-index: 20;
	-webkit-transition: width 1.6s cubic-bezier(0.76, 0, 0.24, 1);
	transition: width 1.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.header.start .scene span{width: 0;}


.header .draw01{
	position: absolute;
	z-index: 90;
	width: 25.7%;
	top: -25.7%;
	left: 44.3%;
	-webkit-transition: top 1.8s cubic-bezier(0.25, 1, 0.5, 1);
	transition: top 1.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.header.draw .draw01{top: 0;}






.header .draw02{
	position: absolute;
	z-index: 80;
	width: 100%;
	bottom:0;
	left: 0;
}
.header .draw02 p{
	position: absolute;
	bottom: -18vw;
	left: 0;
	width: 100%;
	-webkit-transition: bottom 1.0s cubic-bezier(0.25, 1, 0.5, 1);
	transition: bottom 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}
.header.draw .draw02 p{bottom: 0;}


.header .draw02 p:nth-child(1){z-index: 1;}
.header .draw02 p:nth-child(2){z-index: 2;-webkit-transition-delay:0.5s;transition-delay:0.5s;}
.header .draw02 p:nth-child(3){z-index: 3;-webkit-transition-delay:1.0s;transition-delay:1.0s;}










#header02.header .mainImageSet .spec{opacity: 1;left: 58.4%;}
#header02.header .scene span{width: 0;}
#header02.header .draw01{top: 0;}
#header02.header .draw02 p{bottom: 0;}


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



article{position: relative;z-index: 90;}


.bkSet{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
.bkImage{/*heightはjsで設定*/
	position: relative;
	width: 100%;
}
.bkImage.s05{display: none;}
.bkImage.s06{display: none;}

.bkImage:before{
	content: '';
	display: block;
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	padding-top: 18%;
	z-index: 10;
	background-position:center center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.bkImage.s01:before{background-image: url("../images/reflection_draw01.svg");}
.bkImage.s02:before{background-image: url("../images/reflection_draw02.svg");}
.bkImage.s03:before{background-image: url("../images/reflection_draw03.svg");}
.bkImage.s04:before{background-image: url("../images/reflection_draw04.svg");}

.bkImage:after{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-top: 18%;
	z-index: 10;
	background-position:center center;
	background-repeat: no-repeat;
	background-size: 100%;
}
.bkImage.s01:after{background-image: url("../images/mountain_draw01.svg");}
.bkImage.s02:after{background-image: url("../images/mountain_draw02.svg");}
.bkImage.s03:after{background-image: url("../images/mountain_draw03.svg");}
.bkImage.s04:after{display: none;}



.bkImage .circle{
	position: absolute;
	width: 25.71%;
	top: 50%;
	z-index: 15;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.bkImage.s01 .circle{left: 30%;}
.bkImage.s02 .circle{left: 44.3%;}
.bkImage.s03 .circle{left: 30%;}
.bkImage.s04 .circle{top: 100%; left: 44.3%;}

.bkImage .circle span{
	width: 100%;
	padding-top: 100%;
	background: #6EC0C0;
	border-radius: 100%;
	display: block;
}

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


.contentsAll{
	position: relative;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}
.contentsBox{
	width: 100%;
	position: relative;
}
.contentsBox.box01{margin-top: 14.3%;}

.contentsBox .boxInLeft{
	width: 50%;
	float: left;
}
.contentsBox .boxInRight{
	width: 50%;
	float: right;
}


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

.contentsBox .image{
	overflow: hidden;
	position: relative;
}


.textAreaSP{display: none;}


.textInner{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.textInner h3{
	font-size: 22px;
	line-height: 1.82;
	letter-spacing: 0.05em;
}
.textInner p{
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.05em;
}
.textInner h3+p{
	margin-top: 1em;
}

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


.no04,.no05,.no08,.no09{position: relative;}

.itemSpec{
	position: absolute;
	top: 106%;
	left: 0;
	z-index: 50;
	display: flex;
	opacity: 0;
	-webkit-transition: top 1.0s cubic-bezier(0.25, 1, 0.5, 1),opacity 1.0s;
	transition: top 1.0s cubic-bezier(0.25, 1, 0.5, 1),opacity 1.0s;
}
.itemSpec.view{top: 103%;opacity: 1;}



.itemSpec .specIn{
	width: 13em;
	font-size: 10px;
	letter-spacing: 0.03em;
	color: #DB2322;
}
.itemSpec .specIn a{
	color: #DB2322;
	display: inline-block;
	-webkit-transition: color 0.4s;
	transition: color 0.4s;
}
.itemSpec h3{
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	line-height: 1.4;
}
.itemSpec h3 em{
	font-weight: 600;
	display: block;
}
.itemSpec .detail{
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	margin-top: 5px;
	display: inline-block;
	line-height: 1;
	border: 1px solid #DB2322;
	padding: 2px 6px;
	-webkit-transition: all 0.4s;
	transition:  all 0.4s;
}

@media(min-width: 769px) {
.itemSpec .specIn a:hover{color: #3C4034;}
.itemSpec .specIn a:hover .detail{color: #F1EDDA;background: #3C4034;border-color: #3C4034;}
}




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


.box01 .no01{
	width: 59.15%;
	margin-left: 26.1%;
}

.box01 .no01 .movie{width: 100%;font-size: 0;line-height: 1;}
.box01 .no01 .movie .videoBox{width: 100%;overflow:hidden;position: relative;}
.box01 .no01 .movie .videoBox video{width: 100%;}

.videoBox .playButton{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	cursor: pointer;
	background: rgba(0,0,0,0.5);
}
.videoBox .playButton p{
	position: absolute;
	width: 20.5%;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition: opacity 0.4s;
	transition:  opacity 0.4s;
}
@media(min-width: 769px) {
.videoBox .playButton:hover p{opacity: 0.5;}
}
@media(max-width: 768px) {
.videoBox .playButton{
	background: url("../mov/movie_th.jpg") center center no-repeat;
	background-size: cover;
}
}




.box01 .no02{
	width: 54%;
	margin-left: 17.25%;
}
.box01 .no02 .textArea{
	width: 100%;
	padding-top: 128.57%;
	position: relative;
}



/*-------*/

.box02{}

.box02 .no03{
	width: 100%;
}
.box02 .no03 .textArea{
	width: 54%;
	margin-left: 17.25%;
	padding-top: 38.57%;
	position: relative;
}


.box02 .no04{
	width: 68.57%;
	margin-top: -7.14%;
	margin-left: 21.43%;
}
.box02 .no05{
	width: 68.57%;
	margin-top: 24.28%;
	margin-left: 21.43%;
}


/*-------*/

.box03{margin-top: 0.8%;}

.box03 .no06{
	width: 54%;
	margin-left: 17.25%;
	position: relative;
}
.box03 .no06 .textArea{
	width: 100%;
	padding-top: 63.5%;
	position:absolute;
	top: -47.75%;
	left: 0;
}

.box03 .no07{
	width: 70%;
	margin-left: 9.28%;
	position: relative;
}


.box03 .no07 .image{
	width: 100%;
	display: flex;
}
.box03 .no07 .image .imageLeft{width: 49%;margin-right: 1%;}
.box03 .no07 .image .imageRight{width: 49%;margin-left: 1%;}



.box03 .no07 .textArea01{
	width: 77.14%;
	margin: 0 auto;
	padding-top: 55.1%;
	position: relative;
}

.box03 .no07 .textArea02{
	width: 77.14%;
	margin: 0 auto;
	padding-top: 55.1%;
	position: relative;
}



.box03 .no08{
	width: 68.57%;
	margin-top: 22.57%;
	margin-left: 21.43%;
}
.box03 .no09{
	width: 68.57%;
	margin-top: 24.28%;
	margin-left: 21.43%;
}


/*-------*/


.box04{
	padding-bottom: 7.5%;
}

.box04 .no10{
	width: 54%;
	margin-top: -34.85%;
	margin-left: 17.25%;
}

.box04 .no11{
	width: 70%;
	margin-left: 9.28%;
	position: relative;
}

.box04 .no11 .image{
	width: 100%;
	display: flex;
}
.box04 .no11 .image .imageLeft{width: 49%;margin-right: 1%;}
.box04 .no11 .image .imageRight{width: 49%;margin-left: 1%;}


.box04 .no11 .textArea{
	width: 77.14%;
	margin: 0 auto;
	padding-top: 123.47%;
	position: relative;
}


.box04 .no12{
	width: 100%;
	margin-top: 40.7%;
}

.box04 .campaign{
	width: 100%;
	margin-top: 10%;
}
.box04 .campaign a{
	background: #DB2322;
	display: block;
	width: 100%;
	border-radius: 2em;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-weight: 600;
	color: #F1EDDA;
	font-size: 20px;
	line-height: 1;
	padding: 1.3em 0;
	-webkit-transition: background 0.4s;
	transition: background 0.4s;
}

@media(min-width: 769px) {
.box04 .campaign a:hover{background: #3C4034;}
}






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










@media(min-width:1650px) {

.textInner h3{font-size: 24px;}
.textInner p{font-size: 19px;}
.box04 .campaign a{font-size: 22px;}

.itemSpec .specIn{font-size: 11px;}

}

@media(max-width:1350px) {

.textInner h3{font-size: 1.6vw;}
.textInner p{font-size: 1.3vw;}
.box04 .campaign a{font-size: 1.5vw;}

}



@media(max-width:950px) {

.textInner h3{font-size: 1.85vw;}
.textInner p{font-size: 1.5vw;}
.box04 .campaign a{font-size: 1.7vw;}

.box01 .no02 .textArea{width: 120%;margin-left: -10%;}
.box02 .no03 .textArea{width: 64.8%;margin-left: 11.8%;}
.box03 .no06 .textArea{width: 120%;margin-left: -10%;}
.box03 .no07 .textArea01{width: 92.57%;}
.box03 .no07 .textArea02{width: 92.57%;}
.box04 .no11 .textArea{width:100%;}

}



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






@media(max-width:768px) {

.wide{display: none;}

.pcView{display: none;}
.spView{display: block;}




.header .titleArea{
	width: 100%;
	position: relative;
	top: 0;
	-webkit-transform:none;
	transform:none;
}
.header h1{
	width: 76.8vw;
	left: 4.4vw;
	padding-top: 12.5vw;
}


.header .mainImageSet{
	width: 76vw;
	padding-left:0;
	margin: 13vw auto 0;
}

.header .mainImageSet .photo{
	width: 100%;
}
.header .mainImageSet .spec{
	position: relative;
	left: 0;
	display:flex;
	width: 100%;
	margin-top: 3.5vw;
}
.header.start .mainImageSet .spec{opacity: 1;left: 0;}

.header .mainImageSet .spec .text01{
	font-size: 2.6vw;
	display: inline-block;
	padding-bottom: 0.7em;
	border-bottom: 1px solid #3C4034;
	margin-right: 2.3em;
}
.header .mainImageSet .spec .text02{
	font-size: 2.6vw;
	padding-bottom: 0.7em;
	border-bottom: 1px solid #3C4034;
}

.header .copyright{
	width: 76vw;
	margin: 0 auto;
	position: relative;
	top:0;
	right: 0;
	padding: 8.5vw 0 12.5vw;
	-webkit-transform:none;
	transform:none;
}
.header .copyright span{
	position: relative;
	letter-spacing: 0.08em;
	font-size: 2.25vw;
	display: block;
}

.header .scene{
	position: relative;
	width: 100vw;
	height: 133.3vw;
	background-image: url("../images/header_scene_sp.jpg");
}
.header .scene p{width: 32vw;}


.header .draw01{
	width: 48vw;
	left: auto;
	right: 0;

}
.header .draw02{
	width: 100vw;
	z-index:10;
	bottom:auto;
	top: 98.6vw;
	left: 0;
}


.header .draw02 p{
	bottom: 0;
	opacity: 0;
	-webkit-transition: bottom 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s;
	transition: bottom 1.0s cubic-bezier(0.25, 1, 0.5, 1), opacity 1.0s;;
}
.header.draw .draw02 p{bottom: 0;opacity: 1;}


.header .draw02 p{
	position: relative;
}


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


article{
	margin-top: 7.2vw;
	z-index: 200;
}

.bkSet{

}
.bkImage{/*heightはjsで設定*/
}


.bkImage.s01{}
.bkImage.s05{display: block;}
.bkImage.s06{display: block;}


.bkImage:before{padding-top: 86.666%;}
.bkImage.s01:before{display: none;}
.bkImage.s02:before{background-image: url("../images/reflection_draw_sp02.svg");}
.bkImage.s03:before{background-image: url("../images/reflection_draw_sp01.svg");}
.bkImage.s04:before{background-image: url("../images/reflection_draw_sp02.svg");}
.bkImage.s05:before{background-image: url("../images/reflection_draw_sp01.svg");}
.bkImage.s06:before{background-image: url("../images/reflection_draw_sp02.svg");}


.bkImage:after{padding-top: 86.666%;}
.bkImage.s01:after{background-image: url("../images/mountain_draw_sp01.svg");}
.bkImage.s02:after{background-image: url("../images/mountain_draw_sp02.svg");}
.bkImage.s03:after{background-image: url("../images/mountain_draw_sp01.svg");}
.bkImage.s04:after{background-image: url("../images/mountain_draw_sp02.svg");display: block;}
.bkImage.s05:after{background-image: url("../images/mountain_draw_sp01.svg");}
.bkImage.s06:after{display: none;}



.bkImage .circle{width: 96vw;}

.bkImage.s01 .circle{left: -48vw;top: 0;}
.bkImage.s02 .circle{left: 52vw;}
.bkImage.s03 .circle{left: -48vw;}
.bkImage.s04 .circle{top: 50%; left: 52vw;}
.bkImage.s05 .circle{left: -48vw;}
.bkImage.s06 .circle{top: 100%; left: 52vw;}


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



.contentsBox.box01{margin-top: 19.5vw;}

.contentsBox .boxInLeft{width: 100%;float: none;}
.contentsBox .boxInRight{width: 100%;float: none;}



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


.textAreaSP{display: block;}

.textInner{
	position: relative;
	top: 0;
	width: 100%;
	-webkit-transform:none;
	transform:none;
}

.textInner h3{font-size: 4.5vw;text-align: center;}
.textInner p{font-size: 3.6vw;}



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

.itemSpec{
	position: relative;
	top: 0;
	text-align: center;
	justify-content: center;
	margin-top: 4.1vw;
}
.itemSpec .specIn{
	width: 14em;
	font-size: 2.7vw;
}
.itemSpec .detail{
	margin-top: 1.6vw;
	padding: 0.75vw 1.8vw;
}
/*-----------*/


.box01 .no01{width: 100%;margin-left:0;}

/*.box01 .no01 .movie{width: 76vw;height: 135.11vw; margin: 0 auto;}*/
.box01 .no01 .movie{width: 76vw;margin: 0 auto;}



.box01 .no02{width: 100%;margin-left: 0;}
.box01 .no02 .textArea{
	width: 100%;
	padding-top: 0;
	text-align: center;
	margin-left: 0;
	margin-top: 24.5vw;
}
.box01 .no02 .textArea p{display: none;}
.box01 .no02 .textAreaSP{width: 76%;margin:11.5vw auto 0;}

.box01 .no02 .image{width: 60.53vw;margin: 11.5vw auto 0;}


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

.box02 .no03{margin-top: 11.5vw;}
.box02 .no03 .textArea{display: none;}
.box02 .no03 .textAreaSP{
	width: 76%;
	margin: 11.5vw auto 0;
}

.box02 .no04{width:89.3vw;margin: 24.5vw auto 0;}
.box02 .no05{width:89.3vw;margin: 13.5vw auto 0;}

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


.box03{margin-top: 0;}

.box03 .no06{width: 100%;margin-left: 0;margin-top: 25.5vw;}
.box03 .no06 .textArea{
	padding-top: 0;
	position: relative;
	top: 0;
	width: 76%;
	margin: 0 auto;
}
.box03 .no06 .image{width: 60.5vw;margin: 11.4vw auto 0;}


.box03 .no07{width: 100%;margin-left: 0;margin-top: 11.5vw;}
.box03 .no07 .image{width: 76vw;margin: 11.5vw auto 0;}
.box03 .no07 .textArea01{width: 76vw;padding-top: 0;}
.box03 .no07 .textArea02{width: 76vw;padding-top: 0;margin-top: 11.5vw;}


.box03 .no08{width:89.3vw;margin:24.5vw auto 0;}
.box03 .no09{width:89.3vw;margin: 13.5vw auto 0;}


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

.box04{padding-bottom: 11.9vw;}

.box04 .no10{width: 100%;margin-top: 24.5vw;margin-left: 0;}
.box04 .no10 .textAreaSP{width: 76%;margin: 0 auto;}
.box04 .no10 .image{width: 60.5vw;margin: 11.5vw auto 0;}


.box04 .no11{width: 100%;margin-left: 0;margin-top: 11.5vw;}
.box04 .no11 .textArea{width: 76vw;margin: 0 auto;padding-top: 0;}
.box04 .no11 .textArea h3{display: none;}
.box04 .no11 .textArea p{margin-top: 0;}

.box04 .campaign{margin: 11.5vw auto 0;}
.box04 .campaign a{font-size: 3.9vw;}


.box04 .no11 .image{width: 76vw;margin: 13.3vw auto 0;}


.box04 .no12{margin-top: 26.6vw;}
















}







@media(max-width:700px) {

}






@media(max-width:440px) {


}