/* ==========================================================================
   共通
   ========================================================================== */
* {-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box
  }
body {width:100%; height: 100%; font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3", arial,helvetica,"Hiragino Kaku Gothic Pro", sans-serif; font-weight:400; font-size:16px; color:#888; background-color:#fff;}
img {max-width: 100%;}
a:link {color: #f68f67;	text-decoration: none;}
a:hover {color: #bde2df; text-decoration: none;}
a:visited {	color: #f68f67;	text-decoration: none;}


/* ==========================================================================
   ヘッダ
   ========================================================================== */
#home{width:100%;}
#home img{margin:0 auto;}
#header{background-color:#fff; min-height:10px; height:5%; position:relative;}
#header .en{width:35px; position:absolute; top:20px; left:10px; z-index:9900; background-color:#000; padding:5px; text-align:center; border-radius:5px;}
#header .en a{color:#fff;}

.sns{width: 30%; margin: 0 2% 1% 0; float:left; display: block; position:absolute; top:10px; right:10px;}

/* ナビゲーション */
.menu {	/*position:fixed;*/	top:0px; width:100%; max-width:1280px; margin:0 auto; z-index:100;}
#logo {width:15%; text-align: center; margin: 0 auto;}
#nav {text-align:right; margin:0;}

.navi{float: right; list-style: none;	margin: 0;}
.navi li{float: left; padding:0;}
.navi li:hover{cursor:pointer;}
.navi img{width:60%;}

/*#kv{width:100%; background-color:#111; margin:0 auto 70px; padding-top:40px; padding-bottom:0px;}帯*/
#kv{width:100%; background-color:#111; margin:0 auto 70px; padding-top:40px; padding-bottom:40px;}
#kv img{display:block; width:100%; margin:0 auto; max-width:1280px; height:auto;}
#kv h1{color:white; font-size:2rem; text-align:center; background-color:#C7006F; margin:0; margin-top:40px; padding-top:10px; padding-bottom:10px;}

/* ==========================================================================
   メイン
   ========================================================================== */
.container{width: 90%; max-width:1280px; margin:0 auto;}
.container img{display:block;}

.title{color:#111;}
.slide{	background-attachment:fixed; width:100%; height:auto; position:relative; padding:30px 0 50px; margin:0;}

/* アトラクション */ 
#slide1{background-color:#fff;}
#slide1 h1 {text-align:center; font-size: 2em; letter-spacing: -3px; line-height: 0px; font-weight: 700;}
#slide1 h2 {font-size: 2em;	line-height: 0px; padding-bottom:20px; font-weight: 400;}


.machine{text-align:center; font-size:2em; font-weight: 400; position:relative;}
.machine ol{padding:0; padding-left:10px; margin:0; display:flex; /*display:-ms-flexbox; display:-webkit-flex;*/ flex-wrap:wrap;}
.machine li{list-style:none; width:33%; /*-webkit-flex-basis: 33%; */ padding-left:5px; margin-bottom:10px;}

.store{position:absolute; top:-100px; right:0; width:200px; display:flex; flex-wrap:wrap;}
.store_l{width:75%;}
.store_r{width:70%;}
.store_r .btn{background-color:#232323; padding:10px; border-radius:10px; line-height:1.2rem;display:block; }
.store_r .btn:hover{background-color:#555;}
.store_r a{font-size:1rem; margin:0; color:white; display:block;}

.store ol{margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:baseline;}
.store li{list-style:none; box-sizing:border-box; margin:0; padding:0;}
.store li:nth-child(odd){width:15%;}
.store li:nth-child(even){width:85%;}

.store .icon, .store p{ padding:3px; font-size:0.9rem; margin:0;}
.store .icon{color:#fff; width:40px; font-weight:normal; padding:0; padding-left:5px; padding-right:5px; margin:0 auto;}
.store p{font-weight:bold; color:#888; text-align:left;}


/* Slide 3 */ 

#slide3 h1 {font-size: 2em; letter-spacing:-3px; line-height:0px; font-weight:700;}
#slide3 h2 {font-size: 2em; line-height:0px; padding-bottom:20px; font-weight:400;}

/* pic01 */ 
#slide2{background-image:url('../img/top_img/pic01.jpg');background-attachment:fixed; background-repeat:no-repeat; background-size:cover; padding:200px 0;/*パララックス高さ調整*/ }

/* pic02*/
#slide4{background-image:url('../img/top_img/pic02.jpg');background-attachment:fixed;  background-repeat:no-repeat; background-size:cover; padding:200px 0;/*パララックス高さ調整*/}

/* pic03*/
#slide5{background-image:url('../img/top_img/pic03.jpg');background-attachment:fixed;  background-repeat:no-repeat; background-size:cover; padding:200px 0;/*パララックス高さ調整*/}

/*youtube*/
#video{width:100%; margin:0 auto; background-color:#000; padding-top:80px; padding-bottom:150px;}
#video h1{color:#fff; font-size:2rem; margin:10px auto 20px; text-align:center;}


#store{background-color:#fff; color:#000; font-size:0.9rem; margin: 200px auto; width:100%; max-width:1280px;}
#store h1 img{margin:0 auto;}
#store h2{ font-size:1.5rem; margin:150px 0 0; text-align: center;}
#store ol{width:100%; margin:0 auto; padding:0;}
#store ol li{list-style:none; width:50%; box-sizing:border-box; padding:30px; padding-top:0px; padding-bottom:0px; float:left;}
#store ol li img{margin:0 auto;}
#store .st li{width:100%;}

#text{background-color:#000; color:#fff; font-size:1rem; line-height:2.5rem; padding-top:100px; padding-bottom:100px;}
#text .content{width:70%; margin:0 auto;}
#text .content h1{margin-bottom:50px;}

.yt_m{width:70%; max-width:960px; margin:0 auto 0px!important; box-sizing:border-box;}
div.iframeWrap { position: relative; margin:0 auto; width: 100%; padding-top: 56.25%;}
div.iframeWrap iframe { position:absolute; top: 0; left: 0; width: 100%; height: 100%;}

/*twitterタイムライン*/
.tw{ margin:50px auto 0; text-align:center; width:100%;}
.tw img{width:60%; margin:0 auto;}
.tw_l, .tw_r{float:left; box-sizing:border-box; margin-top:0px; padding-left:5px;}/*両サイド上マージン*/
.tw_l{width:50%;}
.tw_r{width:50%;}

/*instagram*/
	#Instagram{width:100%; height:600px; overflow:scroll; margin:0 auto; padding:5px; border:1px solid #eee;}
	#Instagram ul{margin:0; padding:0; clear:both;}
	#Instagram ul li{width:33%; height:200px; float:left; list-style:none; margin:0; box-sizing:border-box;}
	#Instagram ul li img{width:100%; height:100%; object-fit: cover; border:0; padding:2px; box-sizing:border-box;}
	#Instagram ul li a{line-height:0;}


#contact{background-color:#fff;}
#contact h1{color:#000; font-size:2rem; margin:10px auto 20px; text-align:center;}
#contact p{margin-top:3px; margin-bottom:3px;}
#contact ol{padding:0; width:100%; margin:0 auto;}
#contact ol li{list-style:none; width:50%; box-sizing:border-box; float:left; color:#333; padding-left:30px;}
#contact dt{font-size:1.2rem; font-weight:normal;}
#contact dd{margin:0 0 0 20px}

/* ==========================================================================
   フッター
   ========================================================================== */
#footer{margin-top: 0px; padding-top: 20px; padding-bottom:0; width:100%; box-sizing:border-box; background-color:#111;}
#footer h2{font-size:1.5rem; color:#FFF;}
#footer small {font-size: 13px;}
#footer p {color:#FFF;}
#footer a:hover {color:#317667;}

#footer .copy {width:100%; box-sizing:border-box; color:white; padding: 20px; position: relative; padding-bottom:80px!important; min-height:250px;}
#footer .copy a{color:#fff;}
#footer .copy h3 {font-size:1.1rem; margin:0 0 20px;}
#footer .copy span {font-size:0.8rem; margin-right:0; position:absolute; right:5px; bottom:10px; color:#AAA;}/*copyright*/
#footer .copy .logo img{width:15%; position:absolute; left:10px; top:10px;}

#footer .banner{position: absolute; right:30px; bottom:50px;}
#footer .hanbai{margin:0 auto; width:40%; position:absolute; top:0; right:0;}
#footer .hanbai ol{margin:0; padding:0;}
#footer .hanbai li{list-style:none; padding:5px; box-sizing:border-box;}
#footer .hanbai li.l li{ width:100%; float:left; list-style:none; padding:5px; box-sizing:border-box;}
#footer .hanbai h2 {font-size:1.1rem; line-height:1.3rem; margin-top:10px!important; margin-bottom:5px!important; font-weight:bold; color:#FFFF99;}
#footer .hanbai p{color:#FFFF99; font-size:0.9rem; line-height:1rem; margin:0;}

#footer .hanbai hr{display:none;}


/* ==========================================================================
   表示の分岐
   ========================================================================== */
.mobile{display:none;}
.tab{display:none;}
.pc{display:inline;}


@media screen and (max-width: 1280px) {
.sns{width: 25%; margin: 0 2% 1% 0; float:left; display: block; position:absolute; top:15px; right:10px;}
.navi li{padding:0 0 0 5px;}
.navi img{width:50%;}
}


/* ==========================================================================
   ==========================================================================
   タブレット用
   ==========================================================================
   ========================================================================== */
@media screen and (max-width: 769px) {
.container{width: 95%;}
#logo {width: 40%; text-align: center;}

#nav {width:23%; text-align:center; margin:10px 0;}
.navi{width: 100%; list-style: none; margin: 0; padding:0;}
.navi li{	float:left; width:33%; padding:0; box-sizing:border-box; padding-left:20px;}
.navi img{width:100%;}
	
.slide{	background-attachment:fixed; width:100%; position:relative; padding:0;}
#slide1 h1 {font-size:2em;}

#slide2{background-position:-1000px 0px; padding:200px 0;/*パララックス高さ調整*/ }
#slide4{background-position:0px 0px; padding:200px 0;/*パララックス高さ調整*/ }
#slide5{background-position:-500px 0px; padding:200px 0;}
	
.content {	text-align:center; width:100%;}

.title{text-align:center;}
	
.store{ top:-80px;}
/*.store{ top:-80px; width:250px;}*/
.store ol{margin:0; padding:0;}
.store .l{width:6%;}
.store_r{width:100%;}
.store li{list-style:none; padding-bottom:3px;}
.store li:nth-child(odd){width:5%;}
.store li:nth-child(even){width:95%;}
.store .icon, .store p{ padding:2px; font-size:0.8rem; margin:0;}
.store .icon{width:25px; padding-left:2px; padding-right:2px;}
.store p{font-weight:normal; color:#666;}

	
/*YouTube埋め込み*/
.yt_m{margin:0 auto 10px;}

#store{margin: 150px auto;}
#store h1 img{margin:0 auto;}	
#store ol li{padding:20px; padding-top:0px; padding-bottom:0px;}
#store .st li img{width:40%; margin:0 auto;}


#text{font-size:1rem; line-height:2.5rem; padding-top:100px; padding-bottom:100px;}
#text .content{width:80%; text-align:left;}

.tw{ margin:50px auto 50px;}
/*instagram*/
#Instagram{padding-top:5px;}
#Instagram ul li{width:50%;}


#footer .copy h3 {font-weight:normal; font-size:1rem; margin:0 0 10px;}
#footer .copy p {font-weight:normal; margin:0; font-size:1rem;}
#footer .copy .logo img{width:30%;}

	
/*表示の分岐*/
.tab{display:inline;}

}


/* ==========================================================================
   ==========================================================================
   スマホ用
   ==========================================================================
   ========================================================================== */
@media screen and (max-width: 480px) {

#header .en{top:10px; left:10px; z-index:9900; padding:5px;}
.container{width: 98%; max-width:1280px; margin:0 auto;}

#kv h1{color:white; font-size:1.5rem; margin-top:40px; padding-top:10px; padding-bottom:10px;}
	
#nav {width:27%; margin:5px 0;}

.navi{width:100%; float:left; list-style:none; margin: 0; padding:0;}
.navi li{float:left;width:33%; padding:0; box-sizing:border-box; padding-left:15px;}

.slide{	background-attachment: fixed; width:100%; position:relative; padding:0;}

#slide1 h1 {font-size: 1.5em; margin-bottom:70px;}

#slide2{display:none;}
#slide4{display:none;}
#slide5{display:none;}
	


.machine{color:#fff; text-align:center; font-size:2em; font-weight: 400;}
.machine ol{padding-left:0px;}
.machine li{list-style:none; width:50%; padding-left:2px; padding-right:2px; margin:0 auto 10px;}
	

.store{ top:-50px; width:150px; padding-bottom:5px;}
.store .l{width:10%;}
.store_r{width:100%;}
.store li{padding-bottom:0px; margin:0;}
.store li:nth-child(odd){width:8%;}
.store li:nth-child(even){width:92%;}
.store .icon, .store p{ padding:1px; font-size:0.6rem; margin:0;}
.store .icon{width:16px; padding-left:1px; padding-right:1px;}
.store p{color:#444;}
.store_r .btn{padding:5px;}
.store_r a{font-size:0.9rem;}

	
/*YouTube埋め込み*/
#video{margin:0 auto;}/*画面に対しての幅*/
#video h1{font-size:1.3rem; margin:0 auto 20px;}
.yt_m{width:100%; max-width:720px;}

	
.tw_l, .tw_r{float:none;}/*両サイド上マージン*/
.tw_l, .tw_r{width:85%; margin:20px auto;}

#store{margin: 100px auto;}
#store h1 img{margin:0 auto; padding:10px;}
#store h2{ margin:80px 0 0;}
#store ol li{float:none; width:100%; padding:50px; padding-top:10px; padding-bottom:0px;}
#store .st li img{width:80%; margin:0 auto;}

#text{font-size:0.9rem; line-height:1.5rem; padding-top:100px; padding-bottom:100px;}
#text .content{width:90%;}
	
/*instagram*/
#Instagram{padding-top:10px; height:380px;}
#Instagram ul li{width:50%; height:100px;}

#footer .copy{ padding-bottom:120px!important;}
#footer .copy h3 {font-size:0.9rem; margin:0;}
#footer .copy p {margin:0; font-size:0.85rem;}
#footer .copy span {font-size:0.8rem; font-weight:normal;}/*copyright*/
#footer .copy .logo img{width:50%;}


/*表示の分岐*/
.pc{display:none;}
.mobile{display:inline;}

	

}

/*======================float解除==========================*/
.clearfix:after {
content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.clearfix {display: inline-table;}

/* IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}