@charset "utf-8";
/*	========共通==========*/
html{
	font-size: 16px;
	font-family:'Lato',sans-serif;
	color: #fff;
}
body,div,p,h1,h2,h3,h4,ul,figure,a{
	margin: 0;
	padding: 0;
	color: #fff;
}
body{
	background-color: silver;
	-webkit-text-size-adjust:100%;
}
img{
	display: block;
}
p,td,th,li{
	line-height: 1.8;
	color: #fff;
	padding: 0;
}
a{
	display: block;
	color: #fff;
	text-decoration: none;
}
a:active{
	color: #fff;
}
.container{
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 1000px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius:2px;
	background-color: rgba(235,92,1,0.5);
}
@media screen and (min-width:768px){
	.container{
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;}}

/*======================背景画像====================*/

.box{
	background-image:url("../image/top420.jpg");
	background-size:cover;
	}

.shop-ph{
	z-index: 9;
	background-color: rgba(0,0,0,0.4);
}
@media screen and (min-width:560px){
.box{
	background-image: url("../image/top.jpg");
	}}

/*======================ヘッダスペース====================*/
header{
	padding-bottom: 100px;
	margin-left: 30px;
}

/*==========================ロゴ========================*/
	.top-logo{
	padding: 20px 0 0 0;
	width: 40%;
	margin: 0 auto;
	overflow: hidden;
}
a:hover .top-logo{
	opacity: 0.7;
}
@media screen and (min-width:500px){
	.top-logo{
	float: right;
	width: 40%;
	margin-left: 20px;
	margin-right: 20px;
	}}
@media screen and (min-width:580px){
	.top-logo{
	margin-top: 30px;
	margin-left: 20px;
	}}

@media screen and (min-width:768px){
	.top-logo{
		width: 40%;
		margin-top: 40px;
		margin-left: 30px;
	}}
/*===================キャッチフレーズ====================*/
.lhs-copy h1{
	font-size: 1.6rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: 1px;
}
.lhs-copy{
	padding: 20px 30px 0 30px;
}
.ja-text{
	padding-left:8px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 300;
}
@media screen and (max-width:200px){
	.lhs-copy{
	padding: 0;
	margin: 0;}
	.lhs-copy h1{
	padding: 0px;}}

@media screen and (min-width:420px){
	.lhs-copy{
	padding-left: 30px;}
	.lhs-copy h1{
	padding: 10px;}}

@media screen and (min-width:500px){
	.lhs-copy{
		padding-left: 30px;}
	.lhs-copy h1{
	padding-top: 50px;}}
@media screen and (min-width:700px){
	.lhs-copy h1{
		font-size: 36px;
		padding-top: 100px;}}

/*===================アイコン====================*/
.icon{
	overflow: hidden;
}
.icon a{
	float: left;
	margin-right: 10px;}

.icon a:hover{
	background-size:10px 10px;
	background-color: #eb5c01;
	border-radius: 50%;
}

/*===================言語切り替え====================*/
.lang-wrapper{
	overflow: hidden;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 50px;
}
.btn{
	display: inline-block;}
.btn .en{
	margin-bottom: 40px;}
.lang-wrapper a{
	width: 200px;/*送信ボタンの囲みの大きさ指定*/
	padding-top: 15px; /*送信ボタンの囲みの大きさ指定*/
	padding-bottom: 15px;/*送信ボタンの囲みの大きさ指定*/
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	background-color: rgba(235,92,1,0.5);
	border-radius: 4px;}

	.lang-wrapper a:hover{
	background-color: rgba(235,92,1,1);}

@media screen and (max-width:200px){
	.lang-wrapper a{
	width: 150px;}}
@media screen and (min-width:420px){
	.lang-wrapper a{
	width: 200px;/*送信ボタンの囲みの大きさ指定*/
	padding-top: 15px; /*送信ボタンの囲みの大きさ指定*/
	padding-bottom: 15px;/*送信ボタンの囲みの大きさ指定*/
	font-size: 28px;}}

@media screen and (min-width:500px){
	.lang-wrapper{
	margin-top: 200px;
	margin-bottom: 100px;}
	.btn .en{
		margin-right:30px;}}

@media screen and (min-width:768px){
	.lang-wrapper a{
	width: 240px;
	padding-top: 20px; /*送信ボタンの囲みの大きさ指定*/
	padding-bottom: 20px;/*送信ボタンの囲みの大きさ指定*/}
	.lang-wrapper{
	margin-top: 300px;
	margin-bottom: 200px;}
	.btn .en{
	margin-right:100px;
	}}
/*===================address====================*/
.top-adress{
	margin-top: 0px;
	margin-right: 20px;
	margin-left: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
}
h3{
	font-size: 0.9rem;
	letter-spacing: 1px;
	font-weight: 200;
	font-family: 'Noto Sans', sans-serif;
}
h4{
	font-size: 21px;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	letter-spacing: 2px;
}
h4 .phoneicon{
	font-size: 1.5rem;
}
@media screen and (min-width:768px){
	h3{
	font-size: 1.4rem;
	line-height: 1.3;}
h4{
	margin-top: 5px;
	font-size: 26px;}
}