@charset "UTF-8";
/*
Theme Name: napselection2.0.1
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-feature
#########################
*/
.entry-feature ul {display: grid;grid-template-columns: repeat(4, 240px);gap: 20px;list-style: none;padding: 0;margin: 0;}
.entry-feature li {width: 240px;}
.entry-feature dl {margin: 0;}
.entry-feature dt {width: 240px;}
.entry-feature dt img {width: 100%;height: auto;display: block;border-radius: 8px; }
.entry-feature 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;
}

/*
########################################################################
 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 #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;}
/*
#########################################################################################################
 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-feature
#########################
*/		
.entry-feature ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 16px;
    padding: 0;
    margin: 0;
  }
.entry-feature li {width: 100%;}
.entry-feature dt {width: 100%; }
.entry-feature dt img {width: 100%;height: auto;border-radius: 8px;}
.entry-feature dd {font-size: 14px; margin-top: 6px;}

/*
########################################################################
 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;}
}