@charset 'UTF-8';

/*========================================================
▼Webフォント指定（游明朝・游ゴシック）
========================================================*/

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');


/*========================================================
▼全体
========================================================*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	font-family:"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
}

p {
    line-height: 1.6;
}

a {
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    text-decoration: none;
    color: #000000;
    background: transparent;
}

ul li {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
}

html {
    font-size: 62.5%;
    height: 100%;
}

@media only screen and (min-width: 769px) {
	html,  body {
		font-weight: 300;
	}
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    color: #000000;
    -webkit-text-size-adjust: 100%;
}

h2 {
    text-align: center;
}

@media only screen and (min-width: 769px) {
	.sp {
		display: none!important;
	}
}

@media only screen and (max-width: 768px) {
	.pc {
		display: none!important;
	}
}


.inner {
    padding: 0 2%;
}

@media only screen and (min-width: 769px) {
	.inner {
		padding: 0;
	}
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*
*========================================================
▼ヘッダー
========================================================*/

header {
    width: 100%;
    height: calc(41.25px + 1vw);
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #0e0e0e;
    z-index: 1;
}

.header-inner {
    width: 100%;
    position: relative;
    height: calc(41.25px + 1vw);
    display: flex;
    justify-content: space-between;
    padding: 0 3%;
    align-items: center;
}

.header-inner .logo {
    width: 29.67vw;
    max-width: 130px;
}


@media only screen and (min-width: 769px) {
    header {
        width: 100%;
        height: 90px;
    }

    .header-inner {
        width: 100%;
        max-width: 1200px;
        padding: 0 20px;
        margin: 0 auto;
    }

    .header-inner .logo {
        max-width: 182px;
        max-height: 60px;
    }

}



/*========================================================
▼メインコンテンツ
========================================================*/
#main {
    position: relative;
    width: 100%;
    background-color: #fff;
}

@media only screen and (min-width: 769px) {
	#main {
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
	}
}

/*----------------------------------------
navigation
----------------------------------------*/
@media only screen and (min-width: 769px) {
	#lnav{
		display:flex;
		padding:20px 20px;
		width: 100%;
        max-width: 1200px;
        margin: 0 auto;
	}
.main_title{
	font-size: 18px;
	color:#000;
	font-weight: bold;
	letter-spacing: 1px;
	
	}
.nav__list > ul {
    -webkit-display: flex;
    display: flex;
	 padding:  0 30px;
 	 }
	
.nav__list > ul > li{
		padding:0 10px;
    
  	}
.nav__list > ul > li > a  {
   		font-size: 18px;
		color:#666666;
  }
	
  .nav__list a:hover {
    opacity: .6;
  }
}

@media only screen and (max-width: 768px) {
 	#lnav{
		display:flex;
		padding:15px 20px;
		width: 100%;
        max-width: 1200px;
        margin: 0 auto;
	}
.main_title{
		font-size: 18px;
		color:#000;
	}
/*
.nav{
		display: none;
	}
*/
.nav__list > ul {
    display: block;
	text-align: center;
 	 }
.nav__list > ul > li{
		padding:10px 10px;
    	
  	}
.nav__list > ul > li:not(:last-child){
		border-bottom: dashed 1px #e5e5e5;
	}
	
.nav__list > ul > li > a  {
   		font-size: 14px;
		color:#000;
  }
  .nav__list a:hover {
    opacity: .6;
  }
}

/*========================================================
▼メインビジュアル
========================================================*/

.box{
/*    background: rgba(255, 255, 255, 0.5);*/
/*
    padding: 10px;
    width: 50vw;
*/
}
#mv .mv-inner {
	z-index:1;
    position: relative;
    width: 100%;
	height: calc(100vw * 715/1300);
}	
.movie_container {
		position: relative;
		height: calc(100vw * 715/1300);
		overflow: hidden;
		}
	.movie_container video {
		position: absolute;
		width: 100%;
		height: calc(100vw * 720/1300);
		top:0px;
		left: 0;
		z-index: 1;
		}


@media only screen and (min-width: 769px) {
	
	
	#mv .mv-inner {
		z-index: 0;
		position: relative;
		width: 100%;
		height: calc(100vw * 720/1300);
		}
	.movie_container {
		position: relative;
		height: calc(100vw * 720/1300);
		overflow: hidden;
		}
	.movie_container video {
		position: absolute;
		width: 100%;
		height: auto;
		top:0px;
		left: 0;
		z-index: 1;
		}

	#mv .mv-inner .mv-bg_sp {
		display: none;
	}
}

/*========================================================
navigation
========================================================*/
/*トグル共通デザイン*/
.toggle_wrap {
	position: relative;
	background-color: #fff; /*背景色*/
	font-family:"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 10px;
	font-weight: normal; /*太さ*/
	color: #000; 
	line-height: 1;
	padding: 10px; /*左余白*/
}

/*最新情報*/
.toggle_switch {
	height: 30px;
	line-height: 30px;
	font-size:14px;
	font-weight: bold;
}

/*トグルメニューCLOSEデザイン*/
.toggle_switch:after {
	position: absolute;
	content: '';
	background: url("../images/toggle_btn_pc.png") right top no-repeat;
	background-size: contain;
	display: inline-block;
	width: 45px;
	height: 30px;
	top: 10px; /*上位置*/
	bottom: 0; /*下位置*/
	right: 10px; /*右位置*/
}

/*トグルメニューOPENデザイン*/
.toggle_switch.open:after {
	position: absolute;
	content: '';
	background: url("../images/toggle_btn_pc.png") right top no-repeat;
	background-size: contain;
	display: inline-block;
	width: 39px;
	height: 30px;
	top: 10px; /*上位置*/
	bottom: 0; /*下位置*/
	right: 10px; /*右位置*/
	-webkit-transform: rotateZ(180deg);
	    -ms-transform: rotate(180deg);
	        transform: rotateZ(180deg); /*回転*/
}

/*最新情報（内容）*/
.toggle_switch p {
	display: inline-block;
	padding: 0px 0px; 
	font-weight: bold;
}

/*トグルコンテンツ（初期非表示）*/
.toggle_contents {
	display: none;
/*	margin-top: 30px;*/
	padding: 15px 0;
	
}

/*トグルコンテンツ（最新情報以外）*/
.toggle_contents p {
/*	height: 30px;*/
/*	line-height: 30px;*/
}

.toggle_contents p+p {
	padding-top: 20px;
}

@media only screen and (min-width: 769px) {
	/*トグル共通デザイン*/
	.toggle_wrap {
		position: relative;
		background-color: #484848; /*背景色*/
		font-family:"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size: 16px; /*サイズ*/
		font-weight: normal; /*太さ*/
		color: #000; /*文字色*/
		line-height: 1;
		padding-left: calc(100vw * 150/1300); /*左余白*/
		padding-right: calc(100vw * 150/1300); /*右余白*/
	}

	/*最新情報*/
	.toggle_switch {
		height: 52px;
		line-height: 52px;
	}

	/*トグルメニューCLOSEデザイン*/
	.toggle_switch:after {
		position: absolute;
		content: '';
		background:url("../images/toggle_btn_pc.png") right top no-repeat;
		background-size: contain;
		display: inline-block;
		width: 78px;
		height: 52px;
		top: 0; /*上位置*/
		bottom: 0; /*下位置*/
		right: calc(100vw * 150/1300); /*右位置*/
	}

	/*トグルメニューOPENデザイン*/
	.toggle_switch.open:after {
		position: absolute;
		content: '';
		background:url("../images/toggle_btn_pc.png") right top no-repeat;
		background-size: contain;
		display: inline-block;
		width: 78px;
		height: 52px;
		top: 0; /*上位置*/
		bottom: 0; /*下位置*/
		right: calc(100vw * 150/1300); /*右位置*/
		-webkit-transform: rotateZ(180deg);
		    -ms-transform: rotate(180deg);
		        transform: rotateZ(180deg); /*回転*/
	}

	/*最新情報（内容）*/
	.toggle_switch p {
		display: inline-block;
		padding-right: 78px; /*テキスト・ボタン被り避け*/
	}

	/*トグルコンテンツ（初期非表示）*/
	.toggle_contents {
		display: none;
		margin-top: 10px;
		padding: 15px 0;
	}

	/*トグルコンテンツ（最新情報以外）*/
	.toggle_contents p {
/*		height: 52px;*/
/*		line-height: 52px;*/
	}
	
	.toggle_contents p+p {
		padding-top: 30px;
	}
}
/*========================================================
history_title
========================================================*/
.history_title {
  box-sizing: content-box;
	background: #e5e5e5;
	z-index: 10;
}
.history_title ul {
	 width: 100%;
     max-width: 1200px;
     padding: 0 10px;
     margin: 0 auto;
	
}
@media only screen and (min-width: 769px) {
.history_title > ul > li{
    font-size: 1.6rem;
	color: #333333;
	z-index: 10;
	line-height: 2.1;
	  
  }
  .history_title > ul > li a{
    font-size: 1.6rem;
	color: #333333;
	z-index: 10;
	line-height: 2.1;
	text-decoration: underline;
	  
  }
.history_title > ul{
	padding: 20px 10px;
	}
.history_title > ul > li a:hover{
	text-decoration: underline;
	opacity: .6;
}
}
@media only screen and (max-width: 768px) {
	
.history_title > ul{
	padding: 15px 10px;
	}
.history_title > ul > li {
	 	color: #333333;
		font-size: 1rem;
		z-index: 10;
		line-height: 2.1;
  }
	.history_title > ul > li a{
	 	color: #333333;
		font-size: 1rem;
		z-index: 10;
		line-height: 2.1;
		text-decoration: underline;
  }
	.history_title > ul > li a:hover{
		text-decoration: underline;
		opacity: .6;
	}
}
@media only screen and (max-width: 374px) {
	.history_title > ul > li{
    display: block;
	 font-size: 1rem;
	 z-index: 10;
	line-height: 2.1;
  }
  .history_title > ul > li a{
	 font-size: 1rem;
	 z-index: 10;
	 line-height: 2.1;
	 text-decoration: underline;
  }
}
/*========================================================
sub_title
========================================================*/.btn a
@media only screen and (min-width: 769px) {
	.sub_title{
		width:100%;
		margin: 0 auto;
/*	background:url("../images/title_bg.jpg") */
	}
	.sub_title img{
		margin: 0 auto;
		padding:10px 0 40px;
	}
}
@media only screen and (max-width: 768px) {
		.sub_title{
		width:80%;
		margin: 0 auto;
	}
	.sub_title img{
		width:50%;
		margin: 0 auto;
		padding:10px 0 25px;
	}
}

/*========================================================
projet
========================================================*/
@media only screen and (min-width: 769px) {
	#about_projet{
		width: 100%;
		margin-bottom: 80px;
	}
}
@media only screen and (max-width: 768px) {
		#about_projet{
		width: 100%;
		margin-bottom: 40px;
	}
}

/*========================================================
projet_01
========================================================*/
.pro_inner_01 .title--primary img {
  margin-left: auto;
  margin-right: auto;
}
.pro_inner_01 .btn  a {
  position: relative;
}
.pro_inner_01 .inner  .box  p {
  text-align: center;
}
.pro_inner_01 .inner  .box  p span {
  display: inline-block;
  text-align: left;
}

/*========================================================
projet_01
========================================================*/

@media only screen and (min-width: 769px) {
	.projet_innner{
		width:100%;
		position: relative;
		}
	.projet_img{
		width: 100%;
		margin: 0;
		padding:0px;
		}
	.projet_innner img{
		width:100%;
		vertical-align: text-bottom;

		}
	.title_inner{
		position: absolute;
		z-index: 3;
		top: 50%;
		width: 100%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		}
	.title_inner02{
		max-width: 1200px;
		width:100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		}
	.pro_title{
		text-align: center;
	}
	
	.pro_title .title_eng{
		font-size: 18px;
		color: #FFF;
		line-height: 2;
		}
	.pro_title .title_jap{
		font-size: 24px;
		color: #fff;
		line-height: 2;
		letter-spacing: 1.7px;
		}
}
@media only screen and (max-width: 768px) {
	.projet_innner{
		width:100%;
		position: relative;
		}
	.projet_img{
		width: 100%;
		margin: 0;
		padding:0px;
		}
	.projet_innner img{
		width:100%;
		vertical-align: text-bottom;

		}
	.title_inner{
		position: absolute;
		z-index: 3;
		top: 50%;
		width: 100%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		}
	.title_inner02{
		max-width: 1200px;
		width:100%;
		margin: 0 auto;
		display: block;
		justify-content: space-around;
		}
	.pro_title{
		text-align: center;
	}
	
	.pro_title .title_eng{
		font-size: 14px;
		color: #FFF;
		line-height: 2;
		}
	.pro_title .title_jap{
		font-size: 16px;
		color: #fff;
		line-height: 2;
		letter-spacing: 1.7px;
		}
}

/*========================================================
▼全体
========================================================*/
#contents {
    font-size: 12px;
    position: relative;
    z-index: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

@media only screen and (min-width: 769px) {
	#contents {
		font-size: 14px;
		position: relative;
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 50px;
	}
}
/*========================================================
pro_img_sub_title
========================================================*/
@media only screen and (min-width: 769px) {
	.pro_img_sub_title{
		width:100%;
		margin: 0 auto;
	}
	.pro_img_sub_title img{
		margin: 0 auto;
		padding:10px;
	}
}
@media only screen and (max-width: 768px) {
		.pro_img_sub_title{
		width:80%;
		margin: 0 auto;
	}
	.pro_img_sub_title img{
		width:50%;
		margin: 0 auto;
		padding:10px;
	}
}
/*========================================================
store_sub_title
========================================================*/
@media only screen and (min-width: 769px) {
	.vsm_dis{
		font-size: 18px;
		width: 100%;
		text-align: center;
		margin: 20px 0;
	}
}
@media only screen and (max-width: 768px) {
	.vsm_dis{
		font-size: 14px;
		width: 100%;
		text-align: center;
		margin: 15px 0;
	}
}

/*========================================================
vos_dis
========================================================*/
@media only screen and (min-width: 769px) {
	.pro_info_sub_title{
		width:100%;
		margin: 0 auto;
	}
	.pro_info_sub_title img{
		margin: 0 auto;
		padding:10px 0 40px;
	}
}
@media only screen and (max-width: 768px) {
	.pro_info_sub_title{
		width:80%;
		margin: 0 auto;
	}
	.pro_info_sub_title img{
		width:39%;
		margin: 0 auto;
		padding:10px 0 25px;
	}
}









/*========================================================
▼リード
========================================================*/
#lead {
	text-align: center;
	font-family:"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #0e0e0e;
	padding-top: 40px;
	padding-bottom: 40px;
}

#lead p.txt1 {
	line-height: 2;
	padding-bottom: 20px;
}
#lead p.txt1:last-of-type {
	padding-bottom: 0;
}

@media only screen and (min-width: 769px) {
	#lead {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	#lead p.txt1 {
		font-size: 18px;
		line-height: 3;
		padding-bottom: 40px;
		color:#0e0e0e;
	}
	#lead p.txt1:last-of-type {
		padding-bottom: 0;
	}
}

/*========================================================
▼store・bannerー
========================================================*/
.store_banner  {
	text-align: center;
	font-size: 12px;
	background-color: #f9f9f9;
}

@media only screen and (min-width: 769px) {
	.store_banner{
		padding:80px 0;
	}
}
	@media only screen and (max-width: 768px) {
		.store_banner{
		padding:40px 0;
	}
}
@media only screen and (max-width: 768px) {
#lead_01 {
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	color: #0e0e0e;
	padding-bottom: 20px;
	color:#0e0e0e;
}

#lead_01 p.txt2 {
	line-height: 2;
	font-size: 12px;
	padding-bottom: 10px;
}
#lead_01 p.txt2  span{
	font-weight: bold;
	color:#000;
	font-size: 16px;
}
#lead_01 p.txt2:last-of-type {
	padding-bottom: 0;
}
}
/*========================================================
▼google map
========================================================*/

@media only screen and (min-width: 769px) {
.ggmap{
	margin-bottom: 80px;
}
}
@media only screen and (max-width: 768px) {
	.ggmap{
	margin-bottom: 60px;
}
}

@media only screen and (min-width: 769px) {
	#lead_01 {
		padding-bottom: 40px;
	}

	#lead_01 p.txt2 {
		font-size: 18px;
		line-height: 2;
		padding-bottom: 20px;
	}
	
		#lead_01 p.txt2  span{
		font-weight: bold;
		color:#000;
		font-size: 22px;
	}
	#lead_01 p.txt2:last-of-type {
		padding-bottom: 0;
	}
	
}
/*========================================================
bannner
========================================================*/
@media only screen and (min-width: 769px) {
#banner{
	max-width:1000px;
	width:100%;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
#banner .banner1{
	width:100%;
	margin-bottom: 80px;
}
#banner .banner1 img{
	max-width:1000px;
	width:100%;
	margin: 0 auto;
}
#banner .banner2{
	width:100%;
	margin-bottom: 80px;
	margin-top:80px;
}
#banner .banner2 img{
	max-width: 623px;
	width:100%;
	margin: 0 auto;
}
#banner .banner3{
	width:100%;
	margin-bottom: 10px;
}
#banner .banner3 img{
	max-width:150px;
	width:100%;
	
	margin: 0 auto;
}
.txt_link{
	margin-top: 15px;
		
	}
.txt_link a{
	font-size:14px;
	color:#0e0e0e;
	border-bottom: solid 1px #000;
	display: inline-block;
	padding-bottom: 1px;
	}
.txt_link a:hover {
    opacity: .6;
  }
}
@media only screen and (max-width: 768px) {
	#banner{
	max-width:1000px;
	width:100%;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
#banner .banner1{
	width:100%;
	margin-bottom: 80px;
}
#banner .banner1 img{
	max-width:1000px;
	width:100%;
	margin: 0 auto;
}
#banner .banner2{
	width:100%;
	margin-bottom: 60px;
	margin-top: 60px;
}
#banner .banner2 img{
	max-width: 623px;
	width:83%;
	margin: 0 auto;
}
#banner .banner3{
	width:100%;
	margin-bottom: 10px;
}
#banner .banner3 img{
	max-width:150px;
	width:34%;
	margin: 0 auto;
}
	.txt_link{
	margin-top: 20px;
		
	}
.txt_link a{
		font-size:12px;
		color:#0e0e0e;
		border-bottom: solid 1px #000;
		display: inline-block;
		padding-bottom: 1px;
		
	}
.txt_link a:hover {
    opacity: .6;
  }
}


/*========================================================
▼coming_soon
========================================================*/
@media only screen and (min-width: 769px) {
	.coming_soon{
	margin: 40px auto;
	}
	.coming_soon img{
		max-width: 209px;
		width:100%;
		margin: 0 auto;
		
	}
		
	
	
}
@media only screen and (max-width: 768px) {
	
.coming_soon{
	margin: 40px auto;
	}
	.coming_soon img{
		max-width: 204px;
		width:33%;
		margin: 0 auto;
		
	}
		
}





/*========================================================
▼フッター
========================================================*/
footer {
    text-align: center;
}

footer small {
    font-size: 14px;
    line-height: 50px;
    display: block;
    width: 100%;
    color: #fff;
    background: #000000;
}

@media only screen and (max-width: 768px) {
	footer small {
		font-size: 2.6vw;
		line-height: 1.2;
		padding: 10px 0;
	}
}