@charset "UTF-8";
/*
Theme Name: nap-selection
Theme URI: https://www.nap-camp.com/selection/
Description: This is my theme.
*/
/* CSS Document */

/*
########################################################################
 common
########################################################################
*/
.inner {width: 1020px; margin-left: auto; margin-right: auto;}
section {margin-bottom: 50px;}
section h2 {font-size: 28px;margin-top: 20px;margin-bottom: 20px;}

.button {text-align: center;margin-top: 20px;}
.button a {
  display: inline-block;
  width: 320px;
  line-height: 48px;
  color: #222;
  text-align: center;
  height: 48px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid #222;
  text-decoration: none;
}
.button a:hover,.nav ul li a:hover {background-color:#F4F4F4;border: 1px solid #000;}

/*
###############################################
 header
###############################################
*/
header {height: 60px;width: 100%;border-bottom: 1px solid #E2E2E2;}
header h1 {padding-top: 15px;}

/*
###############################################
 passnavi
###############################################
*/
.passnav{height: 20px;font-size: 10px;padding-top: 10px;padding-bottom: 10px;}
.passnav a {color: #717171;text-decoration-line: underline;}

/*
###############################################
 contents
###############################################
*/

/*
#########################
.entry-selection
#########################
*/
.entry-selection ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 余白はお好みで */
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
}
.entry-selection li {
  width: 325px;
  height: 182px;
  position: relative;
}
.entry-selection dl::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6), 
    rgba(0, 0, 0, 0) 
  );
  border-radius: 8px; 
  z-index: 1;
}
.entry-selection dl {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
.entry-selection dd {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;   
  border-radius: 8px; 
  position: relative;
}
.entry-selection dd img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.entry-selection li:hover dd img {transform: scale(1.15);}
.entry-selection dt {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  box-sizing: border-box;
  margin: 0;
  z-index: 2;
}
/*
#########################
.entry-banner-grid
#########################
*/
.entry-banner-grid ul {display: grid;grid-template-columns: repeat(4, 240px);gap: 20px;list-style: none;padding: 0;margin: 0;}
.entry-banner-grid li {width: 240px;}
.entry-banner-grid dl {margin: 0;}
.entry-banner-grid dt {width: 240px;aspect-ratio: 325 / 182;overflow: hidden;border-radius: 8px;}
.entry-banner-grid dt img {width: 100%;height: 100%;display: block;object-fit: cover;}
.entry-banner-grid dd {margin: 8px 0 0;font-size: 16px;font-weight: bold;}

/*
###############################
  wp-pagenavi
###############################
*/
.wp-pagenavi {text-align: center;vertical-align: middle;font-size: 14px;min-height: 48px;position: relative;}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {position: absolute;top: -5;padding: 0 40px;}
.wp-pagenavi .previouspostslink {left: 0px;}
.wp-pagenavi .nextpostslink {right: 0px;}
.wp-pagenavi span.pages {position: absolute;width: 20%;left: 40%;top: 7px;font-weight: bold;font-size: 16px;}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {color: #444;width: auto;display: block;border: none;line-height:48px;-webkit-border-radius: 100px;font-weight: normal;font-size: 16px;font-weight: bold; border: 1px solid #222;}

/*
#########################
.nav
#########################
*/
.nav ul {}
.nav ul li {display: inline-block;margin-right: 3px;margin-bottom: 5px;}
.nav ul li a {  display: block;
  line-height: 40px;
  color: #222;
  height: 40px;
  border-radius: 100px;
  font-size: 12px;
  border: 1px solid #E2E2E2;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
}

/*
#########################
.area chips
#########################
*/
.area-row{
  display: grid;
  grid-template-columns: 120px 1fr; /* 左の幅 */
  column-gap: 28px;
  padding: 18px 0;
}

/* 左：地方名 */
.area-label{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: #111;
  padding-top: 6px;
}

/* 右：チップを横並び＋折り返し */
.area-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* チップ（丸いボタン） */
.chip{
  line-height: 40px;
  color: #222;
  height: 40px;
  border-radius: 100px;
  font-size: 12px;
  border: 1px solid #E2E2E2;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
}

.chip:hover{
  background: #E7F2D9;
  border-color: #88BE43;
  color: #00572D;
}

.chip:active{
  transform: translateY(1px);
}

/*
########################################################################
 footer
########################################################################
*/
footer {background-color: #f7f7f7;padding-top: 20px;padding-bottom: 20px;}
footer .accordion {margin-bottom: 20px;}
footer .block {border-bottom: 1px solid #E2E2E2;margin-bottom:20px;}
footer .toggle {display: none;}
footer .Label {display: block;font-size: 14px; font-weight: 700;margin-bottom: 10px;}
footer .Label,.content {-webkit-backface-visibility: hidden;backface-visibility: hidden;transform: translateZ(0);transition: all 0.3s;}
footer .content {margin-bottom:10px;}
footer .content ul li {float: left;margin-right: 20px;margin-bottom: 10px;}
footer .content ul li a {display: inline-block;font-size: 12px;color: #444;}
footer .warp-content {margin-bottom: 20px;}
footer .warp-content p {font-size: 13px;color: #444;font-weight: 700;margin-bottom: 10px;}
footer .content .warp-content {display: flex;align-items: flex-start;column-gap: 20px;        }
footer .content .warp-content p {flex: 0 0 140px;margin: 0;font-weight: 700;}
footer .content .warp-content ul {flex: 1;margin: 0;padding: 0;list-style: none;display: flex;flex-wrap: wrap;        gap: 0 20px;             }
footer .content .warp-content ul li {margin: 0;}
footer .footer_menu {border-bottom: 1px solid #E2E2E2;padding-bottom: 20px; margin-bottom:20px;}
footer .footer_menu dl {width: 180px; float: left;} 
footer .footer_menu dt {display: block;font-size: 14px; font-weight: 700;margin-bottom: 10px;}
footer .footer_menu dd {font-size: 12px;color: #444;margin-bottom: 10px;}
footer .footer_sns li {float: left;margin-right: 10px;} 

.footer_banner {text-align: center;margin: 10px auto;}
.footer_banner a {display: inline-block;}
.footer_banner img {max-width: 700px;height: auto;}

/* AppBanner PC */
.app_banner {text-align: center;margin: 20px auto 40px;}
.app_banner_content {display: flex;align-items: center;border-radius: 8px;background: #fff;border: 1px solid #cfd0d0;overflow: hidden;width: 960px;height: 145px;margin: 0 auto;padding: 0;flex-direction: row;}
.app_banner_screenshot {flex-shrink: 0;width: 128px;height: 128px;margin-top: 16px;margin-left: 24px;}
.app_banner_screenshot img {display: block;object-fit: cover;object-position: top;}
.app_banner_info {display: flex;flex-direction: column;flex: 1;padding: 15px 25px;gap: 6px;justify-content: center;}
.app_banner_header {display: flex;align-items: flex-start;gap: 10px;}
.app_banner_header_text {display: flex;flex-direction: column;gap: 4px;}
.app_banner_logo {display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 10px;flex-shrink: 0;width: 64px;height: 64px;}
.app_banner_logo img {display: block;width: 64px;height: 64px;}
.app_banner_title {margin: 0;font-weight: 700;color: #333;font-size: 20px;}
.app_banner_badge {display: inline-flex;align-items: center;justify-content: center;border: 1px solid #cfd0d0;font-weight: 700;color: #333;align-self: flex-start;font-size: 13px;padding: 0 6px;border-radius: 13px;}
.app_banner_description {margin: 0;color: #333;font-weight: 300;font-size: 13px;line-height: 18px;}
.app_banner_store_links {display: flex;gap: 16px;flex-shrink: 0;padding-right: 24px;}
.app_banner_store_column {display: flex;flex-direction: column;align-items: center;padding-top: 6px;gap: 4px;width: 192px;}
.app_banner_store_label {margin: 0;font-weight: 700;color: #333;font-size: 12px;width: 100%;text-align: center;border-bottom: 1px solid #333;}
.app_banner_store_body {display: flex;align-items: center;gap: 8px;justify-content: center;}
.app_banner_qr {display: block;width: 72px;height: 72px;}
.app_banner_store_link {display: flex;align-items: center;justify-content: center;text-decoration: none;}
.app_banner_store_link img {display: block;width: 108px;height: 32px;}

footer #footer_foot ul {text-align: center;margin-bottom: 20px;}
footer #footer_foot ul  li {display: inline-block;font-size: 12px;color: #444;margin-right: 10px;}
footer #footer_foot address {text-align: center;font-size: 10px;}

/*
###############################################
 .fixed-banner
###############################################
*/
.fixed-banner {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 10000;
  display: inline-block;
  line-height: 0;
}

.fixed-banner img {
  width: 300px;
  height: auto;
  border-radius: 8px;
}

.fixed-banner button {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding-top: 3px;
	padding-right: 0px;
  line-height: 1;
}


/*
#########################################################################################################
 mobile max-width:979px
#########################################################################################################
*/
@media screen and (max-width:979px) {
.inner {width: 92%; margin-left: auto; margin-right: auto;}
section {width: 100%; margin-left: auto; margin-right: auto;}	
section h2 {font-size: 18px;}
.button a {width: 100%;}
	
/*
###############################################
 header
###############################################
*/
header {height: 48px;width: 100%;border-bottom: 1px solid #E2E2E2;}
header h1 {padding-top: 10px;}	
/*
###############################################
 contents
###############################################
*/
.passnav {display: none;}	

/*
#########################
.entry-selection
#########################
*/		
.entry-selection ul {display: block; gap: 0;}
.entry-selection li {width: 100%; height: 196px; margin-bottom: 20px; }

/*
#########################
.entry-banner-grid
#########################
*/		
.entry-banner-grid ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 50%)); 
    gap: 16px;
    padding: 0;
    margin: 0;
  }
.entry-banner-grid li {width: 100%;}
.entry-banner-grid dt {width: 100%;aspect-ratio: 325 / 182;overflow: hidden;border-radius: 8px;}
.entry-banner-grid dt img {width: 100%;height: 100%;object-fit: cover;}
.entry-banner-grid dd {font-size: 14px; margin-top: 6px;}

/*
#########################
.area chips
#########################
*/
.area-row{
  grid-template-columns: 1fr;
  row-gap: 10px;
}
.area-label{
  padding-top: 0;
}

/*
########################################################################
 footer
########################################################################
*/
footer .content .warp-content {display: block;margin-bottom: 20px;}
footer .content .warp-content p {margin-bottom: 10px; flex: none;}
footer .content .warp-content ul {display: block;padding-left: 0;}
footer .content .warp-content ul li {margin-bottom: 10px; margin-right: 20px;}	
footer .content {overflow: hidden;	height: 0;}
footer .block {margin-bottom:10px;}
footer .Label {margin-bottom: 0px;padding-top: 5px;padding-bottom: 5px;}	
footer .Label::before{content:"";width: 6px;height: 6px;border-top: 2px solid #000;border-right: 2px solid #000;-webkit-transform: rotate(45deg);position: absolute;top:calc( 50% - 3px );right: 20px;transform: rotate(135deg);}
footer .toggle:checked + .Label + .content {height: auto;padding:20px ;transition: all .3s;}
footer .toggle:checked + .Label::before {transform: rotate(-45deg) !important;}
footer .footer_menu dl {width: auto; float: none;margin-bottom: 20px;} 
footer #footer_foot ul {padding: 0; margin: 0;}
footer #footer_foot ul li {display: block;text-align: left;margin-bottom: 10px;margin-right: 0;}
.footer_banner {margin: 20px auto;}
.footer_banner img {width: 100%;}

/* AppBanner SP */
.app_banner {margin: 20px auto;}
.app_banner_content {box-sizing: border-box;width: 360px;height: 204px;padding: 22px;gap: 4px;margin: 0 auto;flex-direction: column;}
.app_banner_screenshot {display: none;}
.app_banner_info {align-items: center;gap: 4px;padding: 0;}
.app_banner_header {gap: 8px;justify-content: center;}
.app_banner_header_text {align-items: flex-start;gap: 2px;}
.app_banner_logo {width: 48px;height: 48px;}
.app_banner_logo img {width: 48px;height: 48px;}
.app_banner_title {font-size: 16px;}
.app_banner_badge {font-size: 11px;padding: 0 4px;border-radius: 11px;}
.app_banner_description {margin-top: 8px;font-size: 11px;line-height: 16px;text-align: center;}
.app_banner_qr {display: none;}
.app_banner_store_links {margin-top: 8px;gap: 10px;width: 100%;justify-content: center;padding-right: 0;flex-shrink: 1;}
.app_banner_store_column {flex: 1;gap: 4px;width: auto;padding-top: 0;}
.app_banner_store_label {font-size: 10px;width: 100%;text-align: center;border-bottom: 1px solid #333;}
.app_banner_store_body {margin-top: 6px;justify-content: center;}
.app_banner_store_link img {width: 144px;height: 43px;}

/*
###############################################
 .fixed-banner
###############################################
*/
.fixed-banner {
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
.fixed-banner img {width: 100%;height: auto;}
.fixed-banner button {
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  font-size: 18px;
}
}