@charset "UTF-8";

/**************************************************/

/*set up*/
body,h1,h2,h3,h4,h5,ul,li,p{
	margin: 0;
	padding: 0;
}

ul{
	list-style-position: inside;
	list-style-type: none;
}

body{
	line-height: 200%;
	-webkit-text-size-adjust: 100%;/*Safariの文字自動調節能力を闇の力で無力化*/
	word-break: break-all;/*変な改行を心を惑わす幻術を闇の力で無力化*/
	color: #222222;
	font-family: "Noto Sans JP";
}

.flex{
	display: -webkit-flex;/*Safari*/
	display: -ms-flexbox;/*IE10*/
	display: -webkit-box;/*Android */
	display: flex;
	-webkit-justify-content: center;/*Safari*/
	-ms-flex-pack: center;/*IE10*/
	-webkit-box-pack: center;/*Android*/
	justify-content: space-between;
}

.gray{
	color: #999999;
	font-size: 14px;
	padding-top: 10px;
}

.yellow_marker{
	background-color: rgba(207,255,3,0.5);
	font-weight:bold;
}


iframe{
	width: 100%;
}

/**************************************************/

/*共通header*/
header{
	width: 100%;
	height: 60px;
	align-items: center;
	background-color: rgba(255,255,255,0.8);
	position: fixed;
	z-index: 999;
}

/*logo*/
header h1 a{
	display: block;
	background-image: url("img/header_logo.svg");
	background-repeat: no-repeat;
	width: 200px;
	height: 30px;
	text-indent: -9999px;
	margin-left: 40px;
}

/**************************************************/

/*Navigation*/
header nav{
	width: 50%;
	height: 100%;
	font-size: 12px;
}

header nav ul,header nav ul li{
	align-items: center;
	width: 100%;
	height: 100%;
}

header nav ul li a{
	display: block;
	color: #222222;
	text-decoration: none;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 20px;
}

/*疑似要素で英語部分を出す*/
header nav ul li:first-child a::before,header nav ul li:nth-child(2) a::before,header nav ul li:nth-child(3) a::before,header nav ul li:nth-child(4) a::before,header nav ul li:last-child a::before{
	display: block;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 16px;
	padding: 15px 0 0 0;
}

header nav ul li:first-child a::before{
	content: "ABOUT US";
}

header nav ul li:nth-child(2) a::before{
	content: "SERVICE";
}

header nav ul li:nth-child(3) a::before{
	content: "SYSTEM";
}

header nav ul li:nth-child(4) a::before{
	content: "ACCESS";
}

header nav ul li:last-child a::before{
	content: "CONTACT";
}

/*Navigation hover*/
header nav ul li a:hover{
	background-color: #CFFF03;
}

/**************************************************/

/*SNS LINK*/
header .instagram{
	width: 60px;
	height: 100%;
	margin-right: 40px;
}

header .instagram a{
	display: block;
	width: 100%;
	height: 100%;
	font-size: 30px;
	line-height: 60px;
	text-align: center;
	color: #222222;
	text-decoration: none;
}

header .instagram a:hover{
	background-color: #CFFF03;
}

/**************************************************/

/*main vis*/
#main_vis{
	width: 100%;
	height: 100vh;
	background-image: url("img/main_vis.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: fixed;
	z-index: -1;
}

/*main visを囲むid*/
#top_copy{
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	position: relative;
}

/*コピー全体を囲むdiv*/
.copy_area{
	width: 70%;
	height: 200px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #ffffff;
}

/*コピー*/
.copy_area h2{
	background-image: url("img/copy.svg");
	background-repeat: no-repeat;
	width: 540px;
	height: 34px;
	text-indent: -9999px;
	margin-bottom: 20px;
}

/*予約ボタン*/
.copy_area a{
	display: block;
	width: 220px;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	background-color: #CFFF03;
	color: #222222;
	border-radius: 4px;
	margin-top: 30px;
}

.copy_area a:hover{
	background-color: #222222;
	color: #CFFF03;
}

/*リンクエリア*/
.top_link_area{
	width: 100%;
	height: 200px;
	position: absolute;
	bottom: 0;
	margin: auto;
}

/*リンク全体を囲むdiv*/
.link_text_wrap{
	width: 430px;
	height: 100%;
	background-color: #f8f8f8;
	margin-left: auto;
	position: relative;
}

/*リンク先の説明テキスト*/
.link_text_inner{
	width: 90%;
	height: 100px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	line-height: 150%;
}

.link_text_inner h2{
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 10px;
}

/*下向き矢印*/
.link_text_inner::after{
	content: "";
	display: block;
	background-image: url("img/arrow.png");
	width: 25px;
	height: 25px;
	margin: 0 auto;
	margin-top: 20px;
}

/*linkを全体に引き伸ばす*/
.link_text_wrap a{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
    top: 0;
    left: 0;
}

/*sneaker img*/
.top_link_area img{
	display: block;
	width: 100%;
	height: 100%;
}

/**************************************************/

/*背景色*/
#benefit{
	background-color: #f8f8f8;
	height: 100%;
	padding: 50px 0;
}

/*横幅*/
#benefit .wrap{
	width: 940px;
	margin: 0 auto;
}

/*画像*/
#benefit .wrap img{
	display: block;
	width: 80%;
	height: auto;
}

/*テキストエリア*/
#benefit .wrap .text_area{
	width: 70%;
	padding-top: 70px;
}

#benefit .wrap .text_area h2{
	font-size: 22px;
	font-weight: bold;
}

#benefit .wrap .text_area h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin-top: 15px;
	margin-bottom: 15px;
}

/**************************************************/

/*背景色*/
#feature{
	background-color: #f8f8f8;
	height: 100%;
	padding: 0 0 100px 0;
}

/*横幅*/
#feature .wrap{
	width: 940px;
	margin: 0 auto;
}

#feature .wrap h2{
	font-size: 16px;
	text-align: center;
	font-weight: normal;
}

#feature .wrap h2::before{
	content: "FEATURE";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}

#feature .wrap h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin: 0 auto;
	margin-top: 20px;
}

#feature .wrap .flex{
	flex-wrap: wrap;
}

#feature .wrap .box{
	width: 300px;
	height: auto;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	position: relative;
	margin-top: 80px;
}

#feature .wrap .box::before{
	display: block;
	text-align: center;
	position: absolute;
	width: 90px;
	font-size: 85px;
	font-family: 'Oswald', sans-serif;
	text-stroke: 1px #000;
	-webkit-text-stroke: 2px #CFFF03;
	color: #ffffff;
	color: transparent;
	left: 0;
	right: 0;
	top: -20px;
	margin: auto;
}

#feature .wrap .flex .box:first-child::before{
	content: "01";
}

#feature .wrap .flex .box:nth-child(2)::before{
	content: "02";
}

#feature .wrap .flex .box:nth-child(3)::before{
	content: "03";
}

#feature .wrap .flex .box:nth-child(4)::before{
	content: "04";
}

#feature .wrap .flex .box:nth-child(5)::before{
	content: "05";
}

#feature .wrap .flex .box:nth-child(6)::before{
	content: "06";
}

#feature .wrap .box h3{
	font-size: 16px;
	text-align: center;
}

#feature .wrap .box h3::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin: 0 auto;
	margin-top: 10px;
}

#feature .wrap .box .text{
	padding: 20px;
}

/**************************************************/

#gif_movie{
	background-image: url("img/impact.gif");
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 500px;
	position: relative;
}

#gif_movie::after{
	content: "";
	display: block;
	width: 100%;
	height: 500px;
	background-color: rgba(0,0,0,0.4);
}

#gif_movie .wrap{
	width: 50%;
	height: 30px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	color: #fff;
	font-weight: bold;
	font-size: 24px;
}

#gif_movie .wrap p{
}

/**************************************************/

#top_price{
	background-color: #f8f8f8;
	height: 100%;
	padding: 50px 0;
}

/*横幅*/
#top_price .wrap{
	width: 940px;
	margin: 0 auto;
}

#top_price .wrap h2{
	font-size: 16px;
	text-align: center;
	font-weight: normal;
}

#top_price .wrap h2::before{
	content: "PROTECT";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}

#top_price .wrap h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin: 0 auto;
	margin-top: 20px;
}

#top_price .wrap .box{
	margin-bottom: 30px;
}

#top_price .wrap .box p{
	text-align: center;
}

#top_price .wrap .flex{
	flex-wrap: wrap;
	padding: 50px 0;
}

/**************************************************/

#coating_menu{
	background-color: #f8f8f8;
	height: 100%;
	padding: 0 0 50px 0;
}

#coating_menu .wrap{
	width: 940px;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	padding: 50px 0;
}

#coating_menu .wrap h2{
	font-size: 16px;
	text-align: center;
	font-weight: normal;
}

#coating_menu .wrap h2::before{
	content: "COATING MENU";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}

#coating_menu .wrap h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin: 0 auto;
	margin-top: 20px;
}

#coating_menu .wrap h3{
	font-family: 'Oswald', sans-serif;
	font-size: 24px;
	margin-bottom: 10px;
}

#coating_menu .wrap .flex{
	flex-wrap: wrap;
	padding: 0 80px;
}

#coating_menu .wrap .flex .group{
	width: 330px;
}

#coating_menu .wrap .flex .group.flex{
	border-bottom: 1px solid #eaeaea;
	align-items: center;
	padding: 0;
}

#coating_menu .wrap .flex .box{
	padding: 20px 0;
}

#coating_menu .wrap .flex .box .group h4{
	font-size: 16px;
	font-weight: normal;
	color: #999999;
	display: flex;
	align-items: center;
	padding: 10px 0 0;
}

/*ご注意*/
#note{
	width: 940px;
	margin: 0 auto;
	padding: 50px 0;
}

#note .group{
	width: 50%;
	margin: 0 auto;
}

#note .group h3{
	background-color: #222222;
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: 16px;
	padding: 10px 0;
	margin-bottom: 20px;
}

/**************************************************/

#q_and_a{
	background-color: #f8f8f8;
	height: 100%;
	padding: 50px 0;
}

#q_and_a .wrap{
	width: 940px;
	margin: 0 auto;
}

#q_and_a .wrap h2{
}

#q_and_a .wrap h2{
	font-size: 16px;
	text-align: center;
	font-weight: normal;
}

#q_and_a .wrap h2::before{
	content: "Q&A";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}

#q_and_a .wrap h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin: 0 auto;
	margin-top: 20px;
}

#q_and_a .wrap .group{
	border-bottom: 1px solid #eaeaea;
	padding: 20px 0;
	margin-bottom: 20px;
}

#q_and_a .wrap .group .flex:first-child{
	justify-content: flex-start;
	margin-bottom: 20px;
}

#q_and_a .wrap .group .flex:last-child{
	justify-content: flex-start;
	align-items: flex-start;
}

/*Question*/
#q_and_a .wrap .group p:first-child::before{
	content: "Q";
	display: block;
	min-width: 40px;
	height: 40px;
	background-color: #CFFF03;
	box-sizing: border-box;
	text-align: center;
	line-height: 36px;
	border-radius: 50%;
	margin-right: 10px;
}

/*Answer*/
#q_and_a .wrap .group p:last-child::before{
	content: "A";
	display: block;
	min-width: 40px;
	min-height: 40px;
	border: 1px solid #222222;
	box-sizing: border-box;
	text-align: center;
	line-height: 36px;
	border-radius: 50%;
	margin-right: 10px;
}

/**************************************************/

#instagram{
	background-color: #f8f8f8;
	height: 100%;
	padding: 0 0 50px 0;
}

/**************************************************/

#top_footer{
	width: 100%;
	background-color: #222222;
	color: #fff;
	font-family: 'Oswald', sans-serif;
	padding: 100px 0;
}

/*footer main幅*/
#top_footer .wrap{
	width: 940px;
	margin: 0 auto;
}

/*footer logo*/
#top_footer .wrap .group p:first-child{
	background-image: url("img/footer_logo.svg");
	background-repeat: no-repeat;
	width: 240px;
	height: 54px;
	text-indent: -9999px;
	margin-bottom: 40px;
}

/*予約ボタン*/
#top_footer .wrap .group a{
	display: block;
	width: 240px;
	background-color: #CFFF03;
	padding: 10px;
	text-align: center;
	color: #222;
	text-decoration: none;
	font-family: "Noto Sans JP";
	margin-top: 30px;
	border-radius: 4px;
	border: 1px solid #CFFF03;
}

#top_footer .wrap .group a:hover{
	background-color: #222;
	border: 1px solid #CFFF03;
	color: #CFFF03;
}

#top_footer img{
	display: block;
	width: 350px;
	height: auto;
}

/*コピーライト*/
.copyright{
	font-size: 13px;
	text-align: center;
	margin-top: 50px;
	font-weight: 100;
	letter-spacing: 3px;
}

/**************************************************/

/*header 共通id*/
#single{
	width: 100%;
	height: 480px;
	position: relative;
}

/**************************************************/

#single.about{
	background-image: url("img/aboutus_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.about h2::before{
	content: "ABOUT US";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.about h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

main{
	width: 940px;
	margin: 0 auto;
	padding: 50px 0;
}

.about_wrap .box{
	padding: 50px 0;
	position: relative;
}

.about_wrap .box h2{
	font-size: 18px;
}

.about_wrap .box h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin-top: 10px;
	margin-bottom: 10px;
}

.about_wrap .box .text{
	background-color: #fff;
	width: 400px;
	padding: 20px 40px 10px;
	position: absolute;
	bottom: 20%;
	right: 0;
}

.about_wrap .box .text p{
	margin-bottom: 20px;
}

/*2つめのflexを逆転*/
.about_wrap .flex:nth-child(2){
	flex-direction: row-reverse;
}

.about_wrap .flex:nth-child(2) .text{
	left: 0;
}

/**************************************************/

#single.service{
	background-image: url("img/service_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.service h2::before{
	content: "SERVICE";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.service h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

.coating_list{
	background-color: #f8f8f8;
	padding: 100px 0;
}

.coating_list .wrap{
	width: 940px;
	margin: 0 auto;
}

.coating_list .wrap h2::before{
	content: "COATING MENU";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

.coating_list .wrap h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.coating_list .wrap h2{
	font-size: 16px;
	text-align: center;
}

.coating_list .wrap .box{
	position: relative;
	width: 220px;
}

.coating_list .wrap .box img{
	display: block;
	width: 220px;
	height: 220px;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
	margin-bottom: 10px;
}

.coating_list .wrap .box a{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}

.coating_list .wrap .box h3{
	text-align: center;
	font-size: 16px;
}

/**************************************************/

#single.system{
	background-image: url("img/system_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.system h2::before{
	content: "SYSTEM";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.system h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

/*背景色*/
.system_wrap #feature{
	background-color: #fff;
}

.system_wrap #feature .wrap h2{
	font-size: 16px;
	text-align: center;
	font-weight: normal;
}

.system_wrap #feature .wrap h2::before{
	content: "RESERVATION";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}

.system_wrap #feature .wrap h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin: 0 auto;
	margin-top: 20px;
}

.system_wrap #feature p a{
	display: block;
	width: 300px;
	text-align: center;
	color: #222;
	text-decoration: none;
	background-color: #CFFF03;
	padding: 10px 0;
	margin: 0 auto;
	margin-top: 30px;
	border-radius: 8px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.system_wrap #feature p a:hover{
	background-color: #222;
	color: #CFFF03;
}

.system_wrap #coating_menu{
	background-color: #fff;
}

/**************************************************/

#single.access{
	background-image: url("img/access_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.access h2::before{
	content: "ACCESS";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.access h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

.access_wrap h3{
	font-size: 16px;
	text-align: center;
	font-weight: normal;
}

.access_wrap h3::before{
	content: "SHOP INFO";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 10px;
}

.access_wrap h3::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 50px;
}

.access_wrap .wrap{
	width: 100%;
	height: 640px;
	position: relative;
	margin-bottom: 100px;
}

/*map*/
#map_custmomize{
    width: 100%;
    height: 640px;
}

.shop_info{
	width: 410px;
	height: 125px;
	padding: 40px;
	background-color: #fff;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	z-index: 10;
}

/**************************************************/

#single.contact{
	background-image: url("img/contact_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.contact h2::before{
	content: "CONTACT";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.contact h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

form{
	width: 480px;
	margin: 0 auto;
}

form label{
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
}

form input{
	display: block;
	width: 475px;
	font-size: 16px;
	padding: 5px 10px;
	font-family: "Noto Sans JP";
	font-weight: 300;
}

form textarea{
	display: block;
	width: 475px;
	height: 400px;
	font-size: 16px;
	padding: 8px 10px;
	font-family: "Noto Sans JP";
	font-weight: 300;
}

.form_area{
	margin-bottom: 50px;
}

.form_btn button{
	width: 500px;
	height: 50px;
	font-family: 'Oswald', sans-serif;
	background-color: #ebebeb;
	border-style: none;
	transition: all 0.5s ease;/*アニメーション*/
	font-size: 16px;
}

.form_btn button:hover{
	color: #222;
	background-color: #CFFF03;
}

/**************************************************/

#single.snkrs{
	background-image: url("img/snkrs_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.snkrs h2::before{
	content: "SNKRS COATING";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.snkrs h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

/**************************************************/

#single.smp{
	background-image: url("img/smp_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.smp h2::before{
	content: "SMATR PHONE COATING";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.smp h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

/**************************************************/

#single.bag_wallet{
	background-image: url("img/bag_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.bag_wallet h2::before{
	content: "BAG & WALLET COATING";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.bag_wallet h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

/**************************************************/

#single.accessory{
	background-image: url("img/accessory_header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#single.accessory h2::before{
	content: "ACCESSORY COATING";
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	text-align: center;
	font-weight: bold;
}

#single.accessory h2{
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 16px;
	font-size: 16px;
	letter-spacing: 5px;
	font-weight: normal;
}

.single_wrap{
	width: 780px;
	margin: 0 auto;
	padding: 0;
	padding-bottom: 100px;
}

.single_wrap h2{
	font-size: 18px;
	margin-top: 40px;
}

.single_wrap h2::after{
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background-color: #CFFF03;
	margin-top: 10px;
	margin-bottom: 20px;
}

.single_wrap p{
	margin-bottom: 20px;
}

.single_wrap img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.single_wrap ul{
	list-style-type: circle;
	margin-bottom: 20px;
}

#menu{
	display: none;
}

/****************************************************************************************/

@media screen and ( max-width:960px ) {
	
header.flex{
	display: none;
}
	
#menu{
	display: block;
}

/**************************************************************/

/*スマートフォンのナビゲーション全体**/
#smp_nav{
	position: fixed;
	background-color: rgba(255,255,255,0.8);
	width: 100%;
	height: 60px;
	z-index: 999;
}

#smp_nav h1 a{
	background-image: url("img/header_logo.svg");
	background-repeat: no-repeat;
	width: 200px;
	height: 30px;
	text-indent: -9999px;
	display: block;
	margin-top: 15px;
	margin-left: 10px;
}

/*インスタグラムとハンバーガーメニューを右からずらす*/
#smp_nav .flex{
	margin-right: 10px;
}

/*インスタグラム LINK*/
.instagram{
	width: 60px;
	height: 100%;
}
	
.instagram a{
	display: block;
	width: 100%;
	height: 100%;
	font-size: 30px;
	line-height: 60px;
	text-align: center;
	color: #222222;
	text-decoration: none;
}
	
.instagram a:hover{
	background-color: #CFFF03;
}

/*ハンバーガーメニュー*/
.line_wrap{
	width: 60px;
	height: 60px;
	position: relative;
	top: 0;
}
	
.line{
	width: 25px;
	height: 2px;
	background-color: #222;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transition: all 0.5s ease;/*アニメーション*/
}
	
.line::before{
	content: "";
	width: 25px;
	height: 2px;
	background-color: #222;
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	margin: auto;
	transition: all 0.5s ease;/*アニメーション*/
}
	
.line::after{
	content: "";
	width: 25px;
	height: 2px;
	background-color: #222;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: auto;
	transition: all 0.5s ease;/*アニメーション*/
}
	
.line_wrap:hover{
	background-color: #CFFF03;
}

/*クリックします*/
.line_wrap.active .line{
	background-color: rgba(0,0,0,0);
}
	
.line_wrap.active .line::before{
	transform: rotate(135deg);
	top: 0;
	bottom: 0;
}
	
.line_wrap.active .line::after{
	transform: rotate(-135deg);
	top: 0;
	bottom: 0;
}

#smp_menu{
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.8);
	z-index: -1;
	right: -100%;
	transition: all 0.5s ease;/*アニメーション*/
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

#smp_menu.active{
	display: block;
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.8);
	z-index: 99;
	right: 0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

#smp_menu.active ul{
	position: absolute;
	width: 100%;
	height: 370px;
	top: 0;
	bottom: 0;
	margin: auto;
	list-style-type: none;
}

#smp_menu.active ul li a{
	display: block;
	text-decoration: none;
	text-align: center;
	color: #fff;
	padding: 20px 0;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

#smp_menu.active ul li a:hover{
	color: #222;
	background-color: #CFFF03;
}
	
/**************************************************************/
	
#main_vis::after{
    content: "";
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 1;
	background-color: rgba(0,0,0,0.4);
	}
	
.copy_area{
	width: 90%;
}
	
.copy_area h2{
	width: 100%;
	background-size: contain;
}
	
.copy_area a{
	width: 100%;
	padding: 10px 0;
}
	
.copy_area br{
	display: none;
}

.top_link_area{
	display: none;
}

#benefit .wrap{
	width: 90%;
}
	
#benefit .wrap.flex{
	display: block;
}
	
#benefit .wrap .text_area{
	width: 100%;
	padding-top: 40px;
}

#benefit .wrap .text_area h2{
	text-align: center;
	font-size: 16px;
}

#benefit .wrap .text_area h2::after{
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

#benefit .wrap img{
	margin: 0 auto;
}

#feature .wrap{
	width: 100%;
}
	
#feature .wrap .box{
	width: 48%;
}
	
#feature .wrap .box p img{
	display: block;
	width: 100%;
	height: auto;
}
	
#feature .wrap .box h3{
	margin-top: 20px;
}
	
#top_price .wrap{
	width: 90%;
}

#top_price .wrap .box{
	width: 48%;
}
	
#top_price .wrap .box img{
	display: block;
	width: 100%;
	height: auto;
}

#coating_menu .wrap{
	width: 100%;
}
	
#coating_menu .wrap .flex{
	padding: 0;
	width: 90%;
	margin: 0 auto;
}
	
#coating_menu .wrap .flex .box{
	width: 100%;
}
	
#coating_menu .wrap .flex .group{
	width: 100%;
}

#note{
	width: 90%;
}

#note .group{
	width: 80%;
}

#q_and_a .wrap{
	width: 90%;
}

#top_footer .wrap{
	width: 80%;
}
	
#top_footer .wrap.flex{
	display: block;
}

#top_footer .wrap .group p:first-child{
	width: 330px;
	height: 74px;
	background-size: contain;
	margin-bottom: 30px;
}

#top_footer .wrap .group a{
	width: 100%;
	padding: 10px 0;
}

#top_footer .wrap p img{
	display: block;
	width: 80%;
	height: auto;
	margin: 0 auto;
	margin-top: 60px;
}

/******************************************************************/
	
/*下層main*/
.access_wrap .wrap{
	width: 90%;
	margin-bottom: 0;
	height: auto;
	margin: 0 auto;
}

.shop_info{
	width: 90%;
	padding: 20px;
}

.single_wrap{
	width: 90%;
}
	
.single_wrap h2{
	text-align: center;
	font-size: 16px;
}
	
.single_wrap h2::after{
 	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 15px;
}
	
/*contact*/
form{
    width: 90%;
}	
	
form input{
	width: 94%;
}
	
form textarea{
	width: 94%;
}

.form_btn button{
    width: 100%;
    padding: 10px 0;
}

 /*about us*/
#benefit .wrap{
	width: 90%;
}
	
.about_wrap .box{
	display: block;
	padding: 0;
}
	
.about_wrap .box h2{
    text-align: center;
    font-size: 16px;
}

.about_wrap .box h2::after{
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
}
	
.about_wrap .box .text{
	width: 80%;
	padding-top: 40px;
	position:inherit;
}

.about_wrap .box img{
	margin: 0 auto;
	display: block;
    width: 90%;
    height: auto;
}

.coating_list .wrap{
    width: 90%;
    flex-wrap: wrap;
    padding: 50px 0;
}

	.coating_list .wrap .box{
		display: block;
		width: 48%;
		margin-bottom: 40px;
	}
	.coating_list .wrap .box img{
		display: block;
		width: 100%;
		height: auto;
	}

.coating_list .wrap .flex{
	flex-wrap: wrap;
}
	
main{
	width: 90%;/*上に記述では弱いみたい？*/
}

	
	
}