@charset "utf-8";
/* CSS Document */
body{
	width:100%;
	margin:0 auto;
	padding:0;
}
header{
	width:100%;
	display:flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0px 7px 5px -5px rgba(0,0,0,0.5);
	overflow:hidden;
	padding:1% 0 1.5% 0;
	text-align:center;
}

header .logo-area{
	width:50%;
}

header img{
	width:70%;
}

header .logo-area img{
	width:100%;
}

header p{
	margin:0 0.5px;
	font-size:14px;
	text-align:right;
}

header .tell-area img{
width:100%;
text-aligm:center;
}

header .time{
	padding-right:10px;
	font-size:30%;
}

.content01{
text-align: center;
margin:0;
font-size:0
}

.content01 img{
	width:100%;
}

.content01 p{
font-size:16px;
font-weight:bold;
margin:1% 0 0.5% 0;
}

.content01 .mainview{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffdf6e+0,ff9c5c+50,ec5175+100,ec5175+100,ec5175+100,ec5175+100 */
background: #ffdf6e; /* Old browsers */
background: -moz-linear-gradient(45deg,  #ffdf6e 0%, #ff9c5c 50%, #ec5175 100%, #ec5175 100%, #ec5175 100%, #ec5175 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #ffdf6e 0%,#ff9c5c 50%,#ec5175 100%,#ec5175 100%,#ec5175 100%,#ec5175 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #ffdf6e 0%,#ff9c5c 50%,#ec5175 100%,#ec5175 100%,#ec5175 100%,#ec5175 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf6e', endColorstr='#ec5175',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
padding:1% 0;
margin:0;
font-size:0;
display:flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap:wrap;
}

.content01 .mainview img{
	width:auto;
}

.content02{
width:100%;
background-image:url("../img/button-area_back.png");
background-position:top center;
height:auto;
padding:0.5% 0 3.5% 0;
margin-bottom: 20px;
}

.content02 p{
	margin-bottom:0;
}

.content02 .text-area{
	text-align:center;
	font-size:25px;
}

.content02 .order-button-area{
display:flex;
justify-content: space-around;
flex-wrap:wrap;
box-sizing:border-box;
}

.content02 .order-button-area a{
	margin-bottom:1%;
	display:block;
	background-color:#fff;
	height:76px;
	border-radius:2px;
}


.under-area{
box-sizing:border-box;
width:100%;
border:solid 15px #004f8a;
border-right:solid 30px #004f8a;
border-left:solid 30px #004f8a;
display:flex;
flex-wrap:wrap;
justify-content: space-around;
align-items: top;
padding:5px 40px;
}

.under-area .f-left{

}

.under-area .right{
width:100%;
}

.under-area .f-title{
	color:#0b274d;
	font-size:16px;
	margin-bottom:0;
	width:100%;
}

.under-area .f-name span{
	color:#0b274d;
	font-size:18px;
	font-weight:normal;
	margin-bottom:0;
	width:100%;
}

.under-area .f-name{
margin-bottom:3px;
font-size:20px;
font-weight:bold;
color:#333;
display:inline-block;
width:270px;
vertical-align: middle;
}

.under-area .f-name2{
margin:0px;
font-size:20px;
font-weight:bold;
color:#333;
display:inline-block;
width:270px;
}

.under-area .campany-logo{
display:inline-block;
width:140px;
text-align:left;
box-sizing: border-box;
margin-bottom:3px;
vertical-align: middle;
}

.under-area .campany-logo2{
width:100%;
text-align:left;
box-sizing: border-box;
}

footer{
font-size:0;
background-color:#333;
text-align:center;
boxsizing:border-box;
}

footer p{
font-size:16px;
color:#fff;
	margin:0;
}

.navi{
position:fixed;
right:0%;
bottom:0.3%;
z-index:100;
}

@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

a :hover{
 opacity:0.8;
}