@charset "utf-8";

/* CSS Document */

/* ------------------------

	追加

------------------------ */

#naps_clm-container *{

	font-feature-settings: normal;

  font-family: Meiryo, fontFamily\.sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

  font-variation-settings: normal;

	line-height: 1.6;

	letter-spacing: 0;

}

#naps_clm-container p{

	font-size: 14px;

	line-height: 1.6;

}

#naps_clm-container img {

    border: 0;

    height: auto;

    max-width: 100%;

    vertical-align: top;

}



#naps_clm-container .e_link,

#naps_clm-container .a_e_link,

#naps_clm-container .e_link a,

#naps_clm-container .a_e_link a{

  line-height: 2;

  font-size: 16px;

}





@media screen and (max-width: 767px) {

}

/* ------------------------

	コンテナ

------------------------ */

.mt10 {

  margin-top: 10px;

}

.mt20 {

  margin-top: 20px;

}

.mt30 {

  margin-top: 30px;

}

.mt40 {

  margin-top: 40px;

}

.mt50 {

  margin-top: 50px;

}

#naps_clm-container h1 {

  text-align: center;

  padding: 100px 0;

}

#naps_clm-container h2 {

  color: #333;

  font-size: 27px;

  font-weight: 700;

  padding-left: 10px;

  border-left: 10px solid #333;

  border-bottom: 2px solid #333;

}

#naps_clm-container h3,

#naps_clm-container h4 {

  font-size: 22px;

  font-weight: 700

}

#recommend h2 {

  color: white;

  border-left: 10px solid white;

  border-bottom: 2px solid white;

}

#j_title {

  width: 100%;

  background-image: url("/Contents/ImagesPkg/page/jacket/title_bg.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

}

#lead {

  background-color: white;

  padding: 50px 0;

}

#lead p {

  text-align: center;

}

#lead #j_nav {

  overflow: hidden;

  margin-top: 20px;

}

#j_need {

  background-color: #E0E0E0;

  padding: 50px 0;

}

#j_need ul li {

  margin-top: 30px;

}

#j_need ul li dl {

  overflow: hidden;

}

#point {

  background-image: url("/Contents/ImagesPkg/page/jacket/bg_tile.gif");

  background-repeat: repeat;

  padding: 50px 0;

}

#point #season, #material, #safe {

  background-color: white;

  box-shadow: 0 0 5px #333;

  margin: 50px auto 0 auto;

  box-sizing: border-box;

}

#season h3, #material h3, #safe h3 {

  border-left: 10px solid #333;

  padding-left: 10px;

}

#season ul, #material ul, #safe dl {

  overflow: hidden;

  margin-top: 20px;

}

#material h4 {

  text-align: center;

}

.e_link, .a_e_link {

  color: white;

  background-color: #ed1e79;

  border: 2px solid #ed1e79;

  border-radius: 5px;

  text-align: center;

  width: 100%;

  margin: 20px 0 0 0 !important;

  line-height: 2;

  font-size: 16px;

}

.e_link a, .a_e_link a {

  color: white;

  text-decoration: none;

  display: block;

}

.e_link a:hover, .a_e_link a:hover {

  background-color: white;

  color: #ed1e79;

  transition: 0.7s;

  padding: 0;

  border-radius: 5px;

  box-sizing: border-box;

}

.a_e_link {

  background-color: #4d4d4d;

  border: 2px solid #1a1a1a;

}

.a_e_link a:hover {

  color: #4d4d4d;

}

#recommend {

  background-color: black;

  color: white;

  padding: 50px 0 80px 0;

}

.item_li {

  border-bottom: 1px dotted white;

  padding-bottom: 50px;

  margin-top: 50px;

}

.item_li:last-child {

  border-bottom: none;

}

.item_li dl dd h3 {

  line-height: 1.3;

}

.item_li dl dd p {

  margin-top: 10px;

}

.swiper-container {

  width: 100%;

  /*height: 28vh;*/

  height: 520px;

  margin-left: auto;

  margin-right: auto;

}

.swiper-slide {

  background-size: cover;

  background-position: center;

}

.gallery-thumbs {

  /*height: 10vh;*/

  height: 150px;

  box-sizing: border-box;

  padding: 10px 0;

}

.gallery-thumbs .swiper-slide {

  height: 100%;

  opacity: 0.4;

  border: 1px solid #ccc;

}

.gallery-thumbs .swiper-slide-active {

  opacity: 1;

}

#recommend .item li dl dd .icon, #recommend .item li dl dd .subimg {

  overflow: hidden;

}

#recommend .item li dl dd .icon li {

  float: left;

  width: calc(94%/4);

  margin: 20px 2% 0 0;

}

#recommend .item li dl dd .icon li:nth-child(4n), #recommend .item li dl dd .subimg li:nth-child(2n) {

  margin-right: 0;

}

#recommend .item li dl dd .subimg li {

  float: left;

  width: 49%;

  margin: 20px 2% 0 0;

}

#recommend dl dd .item_pp {

  color: #ddd;

}

#recommend h3 span {

  font-size: 16px;

}

#recommend h3 span i {

  font-size: 18px;

  font-style: normal;

}

@media screen and (min-width: 768px) {

  .pcnon {

    display: none;

  }

  .inner {

    width: 1020px;

    margin: 0 auto;

  }

  #j_nav ul {

    width: 800px;

    margin: 30px auto 20px auto;

  }

  #j_nav li {

    float: left;

    width: calc(96%/3);

    margin-right: 2%;

  }

  #j_nav li:nth-child(3n) {

    margin-right: 0;

  }

  #j_need ul li dl dt {

    float: left;

    width: 42%;

    margin-right: 2%;

  }

  #j_need ul li dl dd {

    float: left;

    width: 56%;

  }

  #point #season, #material, #safe {

    width: 1020px;

    padding: 50px;

  }

  #season ul li {

    float: left;

    width: calc(96%/3);

    margin-right: 2%;

  }

  #season ul li:nth-child(3n) {

    margin-right: 0;

  }

  #material .clm3 li {

    float: left;

    width: calc(96%/3);

    margin-right: 2%;

  }

  #material .clm3 li:nth-child(3n) {

    margin-right: 0;

  }

  #material .clm2 li {

    float: left;

    width: 49%;

    margin-right: 2%;

  }

  #material .clm2 li:nth-child(2n) {

    margin-right: 0;

  }

  #safe dl dt {

    float: left;

    width: 41%;

    margin-right: 2%;

  }

  #safe dl dd {

    float: left;

    width: 57%;

  }

  #recommend ul.item li dl {

    overflow: hidden;

  }

  #recommend ul.item li dl dt {

    float: left;

    width: 47%;

    margin-right: 2%;

  }

  #recommend ul.item li dl dd {

    float: left;

    width: 51%;

  }

}

@media screen and (max-width: 767px) {

  .spnon {

    display: none;

  }

  .inner {

    widows: 98%;

    margin: 0 1%;

  }

  #j_nav li {

    float: left;

    width: calc(98%/2);

    margin-right: 2%;

  }

  #j_nav li:nth-child(even) {

    margin-right: 0;

  }

  #point #season, #material, #safe {

    width: 96%;

    padding: 30px 2%;

  }

  #lead {

    padding: 30px 0;

  }

  #lead p {

    text-align: left;

  }

  #j_nav ul {

    width: 90%;

    margin: 0 auto;

  }

  #j_nav ul li:nth-child(n+3) {

    margin-top: 2%;

  }

  #naps_clm-container h2 {

    font-size: 24px;

    line-height: 1.3;

  }

  #naps_clm-container h3,

  #naps_clm-container h4 {

    font-size: 20px;

  }

  #season h4 {

    text-align: center;

  }

  #season li, #material li {

    margin-top: 50px;

  }

  #season li:first-child, #material li:first-child {

    margin-top: 0;

  }

  #material .clm3 li:first-child {

    margin-top: 30px;

  }

  #material .clm3 p.pimg {

    width: 75%;

    margin: 0 auto;

  }

  .swiper-container {

    height: 373px;

  }

  .gallery-thumbs {

    height: 100px;

  }

}