@charset "utf-8";

body{
font-size:14px;
}

.pc{
display: none!important
}

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

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

li.menu_top{
width: 100%;
height: 50px;
}

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

li.menu{
width: 80%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}

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

a.menu{
color: #fff;
display: block;
font-size:16px;
border-bottom: solid 1px #666;
padding-bottom: 15px;
margin-bottom: 15px
}

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
width: 40px;
height: 16px;
}

a.menu-trigger span {
position: absolute;
right: 0;
width: 100%;
height: 1px;
background: #fff;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
top: 7px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);

}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);

}

.menuIn{
animation-fill-mode:both;
animation-duration:0.5s; 
animation-name: menuIn;
display: block!important;
}
 
@keyframes menuIn {
0% { opacity: 0;}
100% {opacity: 100;}
}

/*--------------------nav--------------------*/

nav.nav{
width: 100%;
height: 60px;
padding: 0px 4%;
background: #000;
position: fixed;
max-width: 700px;
left: 50%;
transform: translateX(-50%);
top:0px;
z-index: 12;
display: flex;
align-items: center;
justify-content: space-between
}

a.nav_logo{
width: 40%
}

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

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

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

div.header{
width: 100%;
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: #222;
}

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:22px;
display: flex;
align-items: center;
margin-bottom: 30px
}

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

section#about{
width: 92%;
margin: 0px auto;
padding: 20px 15px;
background: #fff;
border-radius: 20px;
margin-bottom: 30px
}

h2.about{
width: 90%;
margin: 0px auto 20px auto;
}

article.about{
width: 90%;
margin: 0px auto 20px auto;
}

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

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

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

section#area_search{
display: none
}

section#area_search_mobile{
width: 92%;
margin: 0px auto 30px auto;
padding: 20px 15px;
background: #fff;
border-radius: 20px;
}

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.section_area_search{
text-align: center;
color: #444
}

img.section_area_search{
margin-bottom: 20px
}

h3.area_search_title{
text-align: center;
margin-bottom: 5px;
}

h4.area_search_title{
text-align: center;
font-size: 40px;
color: #cc0000;
margin-bottom: 5px
}

h5.area_search_title{
font-size: 18px;
margin-bottom: 20px
}

h5.area_search_title span{
font-size: 22px;
color: #cc0000;
display: inline-block;
margin: 0px 5px
}

small{
font-size: 80%
}

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

section#review{
width: 92%;
margin: 0px auto;
padding: 30px 5%;
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: 15px
}

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

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

h3.review_top{
font-size:18px
}

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

img.review_fire{
width: 16px;
}

article.review_center{
width: 100%;
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: #222;
padding: 30px 0px;
color: #fff;
text-align: center
}

img.footer_logo{
width: 50%;
margin: 0px auto 20px auto
}

ul.footer{
width: 90%;
margin: 0px auto 30px auto;
display: block;
}

ul.footer li{
width: 84%;
margin: 0px auto;
display: block;
}

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

a.footer_left{
width: 100%;
height: 48px;
border-radius: 24px;
line-height: 48px;
text-align: center;
border:solid 1px #fff;
display: block;
margin: 0px auto 15px auto
}

a.footer_left:last-of-type{
margin-bottom: 30px
}

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

a.footer_center{
display: block;
margin-bottom: 20px;
border-bottom: solid 1px #666;
padding-bottom: 20px
}

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

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

div.footer_bottom{
width: 100%;
align-items: center;
display: flex;
align-items: center;
gap: 20px;
justify-content: center
}

a.footer_bottom{
text-decoration: underline;
font-size:90%
}

section.area_search_page{
padding: 50px 0px
}

h2.area_search_page{
font-size: 26px;
text-align: center;
color: #333;
}

h2.area_search_page:after{
content: "";
width: 38px;
height: 3px;
border-radius: 1.5px;
background: #333;
display: block;
margin: 20px auto
}


div.area-filter {
width: 90%;
margin: 20px auto;
padding-right: 6px;

}


.area-block {
margin-bottom: 14px;
border-radius: 8px;
overflow: hidden;
background: #f5f5f5;
}

/* ブロック見出し（地方名） */
.area-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
background: #e5e5e5;
}

.area-name {
font-weight: 700;
font-size: 16px;
}

.area-count {
color: #555;
font-size: 14px;
}

/* チェックボックス */
.area-check {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}

/* 都道府県一覧 */
.area-body {
padding: 16px;
background: #f9f9f9;
display: flex;
flex-wrap: wrap;
row-gap: 12px;
column-gap: 40px;
}

/* 都道府県1つ */
.pref {
display: flex;
align-items: center;
gap: 6px;
width: calc(50% - 20px);
font-size: 14px;
cursor: pointer;
}

.pref-count {
color: #777;
font-size: 12px;
}

/* ネイティブチェックボックスを隠す */
.area-check input,
.pref input {
display: none;
}

/* 簡易チェックボックス表示 */
.checkbox-square {
width: 18px;
height: 18px;
border: 1px solid #333;

border-radius: 3px;
background: #fff
}

/* チェックされた状態 */
.area-check input:checked + .checkbox-square,
.pref input:checked + .checkbox-square {
background: #000;
}

.fancybox__backdrop {
 opacity: var(--fancybox-opacity, 0.8)!important;
}

.fancybox__slide {
width: 100%;
height: 90%!important;
margin: 10% 0px!important;
border-radius: 15px!important
}

.fancybox__content {
padding: 0rem!important;
border-radius: 15px!important;
}