@charset "utf-8";

body{
font-size:14px;
}

.mobile{
display: none
}

/*--------------------menu--------------------*/

menu.menu{
width: 100%;
background: #000;
color: #fff;
position: fixed;
z-index: 10;
top:0px;
}

li.menu_top{
width: 100%;
height: 50px;
background: #fff;
display: flex;
align-items: center
}

img.menu_logo{
width: 200px;
margin: 0px auto;
}

li.menu{
width: 1200px;
margin: 0px auto;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between
}

p.menu_left{
font-size:24px;
}

a.menu{
margin-left: 30px
}

a.menu:hover{
text-decoration: underline
}

/*--------------------header--------------------*/

header.header{
width: 100%;
background: #ff554c;
position: relative;
margin-top: 100px;
}

img.header_image{
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
mix-blend-mode: color-burn; 
}

div.header{
width: 1300px;
margin: 0px auto;
position: relative;
z-index: 1
}

div.header_link{
position: absolute;
left:0px;
bottom: 20px;
display: flex;
align-items: center
}

a.header_link{
border: solid 1px #fff;
border-radius: 24px ;
height: 48px;
line-height: 48px;
margin-left: 20px;
padding: 0 30px; 
color: #fff;
}

a.header_link:hover{
background: #ff554c;
}

main.main{
background: #f0f0f0;
padding-left: calc((100% - 1000px) / 2); 
padding-right: calc((100% - 1000px) / 2); 
padding-top: 40px;
padding-bottom: 40px
}

h2.section{
font-size:26px;
display: flex;
align-items: center;
margin-bottom: 30px
}

/*--------------------about--------------------*/

section#about{
padding: 30px 50px;
background: #fff;
border-radius: 20px;
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 40px
}

h2.about{
width: 40%
}

article.about{
width: 60%;
padding-left: 30px
}

h3.about{
font-size: 28px;
margin-bottom: 20px
}

h4.about{
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px
}

/*--------------------area--------------------*/

section#area_search{
padding: 30px 50px;
background: #fff;
border-radius: 20px;
margin-bottom: 40px
}

h2.area_search:before{
content: "";
width: 30px;
height: 30px;
background: url(../img/area_search/icon.png) no-repeat center;
background-size: cover;
margin-right: 5px
}

div.area_search{
display: flex;
align-items: start;
justify-content: space-between
}



div.map{
position: relative;
font-size:12px;
font-weight: 500
}

div.map a{
position: relative;
font-size:12px
}

/*-- box_areaMap --*/
.box_areaMap .map .area_zenkoku,
.box_areaMap .map .area_prefecture,
.box_areaMap .map .area_hokkaido,
.box_areaMap .map .area_tohoku,
.box_areaMap .map .area_hokuriku,
.box_areaMap .map .area_koshinetsu,
.box_areaMap .map .area_kanto,
.box_areaMap .map .area_tokai,
.box_areaMap .map .area_kansai,
.box_areaMap .map .area_chugoku,
.box_areaMap .map .area_shikoku,
.box_areaMap .map .area_kyusyu,
.box_areaMap .map .area_okinawa{
padding: 10px 0 0 10px;
position: absolute;
}

#main .box_areaMap .map a {
    color: #1063a2;
}

/* common */
#main .box_areaMap .map p.tit{
	font-weight: bold;
	margin: 0 0 6px 0;
	margin: 0 0 2px 0;
	line-height: 1.2;
	font-size: 109%;
}

#main .box_areaMap .map .sub1{
	font-size: 84%;
	margin: 3px 0 3px 0;
	
 margin: 0 0 0 0;
	padding: 0 0 0 10px;
}

/*-- area_zenkoku --*/
#main .box_areaMap .map .area_zenkoku{
	top: 253px;
	left: 531px;
	font-size: 128%;
	padding: 0;
}

#main .box_areaMap .map .area_zenkoku div { float: left;}
#main .box_areaMap .map .area_zenkoku div:first-child { margin: 5px 10px 0 0;}

#main .box_areaMap .map .area_zenkoku p.tit{
	border: 1px solid #0b709f;
	padding: 10px;
	background: #ffffff;
}
#main .box_areaMap .map .area_zenkoku p.tit.b_gray{ border: 1px solid #dbdbdb;}

/*-- area_prefecture --*/
#main .box_areaMap .map .area_zenkoku #prefecture0 p.tit{
	font-size: 92%;
}
#main .box_areaMap .map .area_zenkoku #prefecture0 p.tit a span{
	font-size: 92%;
	font-weight: normal;
}

/*-- area_hokkaido --*/
#main .box_areaMap .map .area_hokkaido{
	top: 0;
	left: 620px;
}

#main .box_areaMap .map .area_hokkaido #hokkaido1,
#main .box_areaMap .map .area_hokkaido #hokkaido2{
	float: left;
	width: 145px;
}

/*-- area_tohoku --*/
#main .box_areaMap .map .area_tohoku{
	 top: 132px;
	left: 620px;
}

#main .box_areaMap .map .area_tohoku #tohoku1,
#main .box_areaMap .map .area_tohoku #tohoku2{
	float: left;
	width: 145px;
}

/*-- area_hokuriku --*/
#main .box_areaMap .map .area_hokuriku{
	width: 122px;
	top: 0;
	left: 250px;
}

/*-- area_hokuriku --*/
#main .box_areaMap .map .area_koshinetsu{
	width: 135px;
	top: 0;
	left: 385px;
}


.area_kanto{
top: 345px;
left: 660px;
}

#kanto1,
#kanto2{
display: inline-block;
vertical-align: top;
width: 110px;
}

.area_tokai{
top: 365px;
left: 418px;
}

#tokai1,
#tokai2{
display: inline-block;
vertical-align: top;
width: 115px;
}

.area_kansai{
top: 0;
left: 0;
}

#kansai1,
#kansai2{
display: inline-block;
vertical-align: top;
width: 118px;
}

.area_chugoku{
top: 195px;
left: 0;
}

#chugoku1,
#chugoku2{
display: inline-block;
vertical-align: top;
width: 118px;
}

.area_shikoku{
width: 125px;
top: 362px;
left: 275px;
}

.area_kyusyu{
top: 325px;
left: 0;
}

#kyusyu1,
#kyusyu2{
display: inline-block;
vertical-align: top;
width: 118px;
}

.area_okinawa{
top: 434px;
left: 0;
}


#main .box_areaMap .map .area_hokkaido{
top: 0;
left: 610px;
}

#main .box_areaMap .map .area_hokkaido #hokkaido1,
#main .box_areaMap .map .area_hokkaido #hokkaido2{
display: inline-block;
vertical-align: top;
width: 140px;
}

/*-- area_tohoku --*/
#main .box_areaMap .map .area_tohoku{
top: 132px;
left: 610px;
}

#main .box_areaMap .map .area_tohoku #tohoku1,
#main .box_areaMap .map .area_tohoku #tohoku2{
display: inline-block;
vertical-align: top;
width: 140px;
}

a.all{
font-size:18px!important
}


/*--------------------review--------------------*/

section#review{
padding: 30px 50px;
background: #fff;
border-radius: 20px;
}

h2.review:before{
content: "";
width: 30px;
height: 30px;
background: url(../img/review/map-japan-icon-black.png) no-repeat center;
background-size: cover;
margin-right: 5px
}

a.review{
display: block;
color: #000;
border-bottom: dotted 1px #999;
padding-bottom: 20px;
margin-bottom: 20px
}

a.review:hover h4.review{
text-decoration: none
}

article.review_top{
display: flex;
align-items: center;
margin-bottom: 20px
}

p.review_top_image{
width: 80px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: #dcdcdc;
margin-right: 20px;
overflow: hidden
}

p.review_top_image img{
width: 100%;
height: 100%;
object-fit: cover
}

h3.review_top{
font-size:20px
}

div.review_fire{
display: flex;
align-items: center;
margin: 0px 0px 0px auto
}

img.review_fire{
width: 24px;
margin-left: 10px
}

article.review_center{
width: 740px;
margin-bottom: 20px
}

h4.review{
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
text-decoration: underline
}

h5.review_daye{
font-size: 14px;
color: #999;
display: flex;
align-items: center
}

h5.review_daye:before{
content : "";
width: 24px;
height: 24px;
margin-right: 5px;
background: url(../img/review/time_24.png) no-repeat center;
background-size: cover
}


/*--------------------footer--------------------*/

footer.footer{
background: #ff554c;
padding: 50px 0px;
color: #fff
}

footer a:hover{
text-decoration: underline;
}

ul.footer{
width: 1000px;
margin: 0px auto 40px auto;
display: table;
table-layout: fixed
}

ul.footer li{
width: 25%;
display: table-cell
}

ul.footer li:nth-of-type(1){
width: 30%;
}

ul.footer li:nth-of-type(4){
width: 20%;
position: relative
}

a.footer_left{
width: 230px;
height: 42px;
border-radius: 21px;
line-height: 42px;
text-align: center;
border:solid 1px #fff;
display: block;
margin-bottom: 15px
}

h4.footer{
font-size:20px;
font-weight: 900;
margin-bottom: 10px
}

a.footer_center{
display: block;
margin-bottom: 30px
}

div.footer_sns{
width: 80%;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between
}

a.footer_sns{
width: 20px;
height: 20px;
}

img.footer_logo{
width: 90%;
position: absolute;
bottom: 0px;
left:50%;
transform: translateX(-50%)
}

div.footer_bottom{
width: 90%;
margin: 0px auto;
border-top:solid 1px #fff;
padding-left: calc((90% - 1000px) / 2); 
padding-right: calc((90% - 1000px) / 2); 
display: flex;
align-items: center;
padding-top: 30px
}

a.footer_bottom{
margin-right: 50px;
font-size:90%
}