@charset "utf-8";
/* CSS Document */

.article {
    padding-bottom: 3em;
    font-size: 15px;
    line-height: 1.7;
}

.article h1.headline{
	 font-size: 28px;
	 font-weight: bold;
	 margin: 15px 0 0;
	 padding: 15px 0px;
}
.article h2.headline{
	  color: #333;
	  font-size: 24px;
	  font-weight: bold;
	  margin: 50px 0 20px;
	  padding: 10px 0;
    border-bottom: 1px solid #EBEBEB;
}
.article h2.headline.or{
  color: #F1A200;
}
.article .article-section h3{
  color: #0C3429;
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0 0;
  }
.article .article-section h4 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEBEB;
}
.article .sentence{ padding:1.5rem 0;}
.article .reader .sentence {padding: 0;}
.article .picture{ width:100%;}
.article .page-menu{ border:1px solid #EBEBEB; padding:20px;background:#EBEBEB;font-weight: bold;}
.article .page-menu li {
  font-size: 13px;
  padding-bottom: 10px;
  list-style-type: disc;
  margin-left:2.5em
}
.article .page-menu ul{}

.article .page-menu li a {
    font-weight: bold;
  }
.article .page-menu .under-line {
    border-bottom: 1px solid #707070;
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 27px;
  }
  .menu-head {display:flex;justify-content:space-between;align-items: baseline;}
  .menu-head p {font-size:18px;}
  .menu-head span {
      color: #fff;
      font-weight: bold;
      background: #707070;
      border-radius: 18px;
      padding: 5px 10px;
      cursor: pointer;
  }
.article .page-menu li.cate {margin-left: 0;font-size: 18px;list-style-type: none;}
.article .page-menu li.cate:before {
}


.article .reader {
  overflow: hidden;
  margin: 0 3.5rem 1.5rem;
  padding: 20px;
}
.article .reader img{ float:left; margin-right:50px; margin-bottom:30px;}
.article .reader p{ margin-top:0; padding-top:0}
  

.article .hansoku_btn a{
	width: 350px;
  padding:15px;
  color:#ffffff;
  font-size: 15px;
  line-height: 120%;
  text-align: center;
  text-decoration: none;
  background:  #C00;
  display: block;
  position:relative;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3);
  -moz-box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3);
  box-shadow:0px 15px 30px -15px rgba(0,0,0,0.3);
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  margin:3rem auto;
}
.article .hansoku_btn a:hover{
  opacity:0.7;
}
.resister-box {
  width: 60%;
  margin: 20px auto;
}
.resister-button {
  position: relative;
  background: #fff !important;
  border-radius: 3px;
  color: #c20500 !important;
  padding: 18px 0;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 5px;
  border: 1px solid #c20500;
  transition: all 0.2s ease-out;
  text-align: center;
  cursor: pointer;
  display: block
}
.resister-button i {
  position: absolute;
  right: 10px;
  font-size: 24px;
  top: auto;
}
.resister-button:hover {
  background: #c20500 !important;
  color: #fff !important;
  border: 1px solid #c20500;
}
.date-text{color:#777;}
.column-list span {
  background: #000;
  display: inline-block;
  margin: 10px 0;
  padding: 5px 15px;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
}
	
@media only screen and (max-width: 667px) {
.article h1.headline{ font-size: 20px; margin: 15px 0 15px;}
	
.article h2.headline{
	  font-size: 16px;
	  margin: 1.5rem 0 10px;
	}
.article .article-section h3{
	  font-size: 15px;
	  margin: 20px 0 0 0.5rem;
	  padding:0 0 0 10px;
	}
  
.article .sentence{ padding: 0.5rem;}
.article .page-menu{ padding:1rem; margin-top:1.5rem}
.article .reader{ overflow:hidden; margin:1rem 0;} 
.article .reader img{margin-right:20px; margin-bottom:10px;}
.article #anchor3 h3{ margin-top:1rem;}
.resister-box,.resister-button {width: 100%;}

}


.column-cate span {
    background: #000;
    display: inline-block;
    margin: 10px 0;
    padding: 5px 15px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
}
.column-cate span a{
  color: #fff;
  font-weight: bold;
}
.article .reader{ 
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin: 0;
    padding: 20px 0
}
.article .reader.border-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 18px;
    box-shadow: 0px 0px 10px 1px #00000033;
    overflow: hidden;
    margin: 1.5rem 3.5rem ;
    padding: 20px;
}
.reader.border-box .pic {
    max-width: 204px;
    width: 25%;
}
.reader.border-box img {
    float: left;
    margin-right: 50px;
    margin-bottom: 30px;
}
.reader .pic{width:25%}
.article .reader img{  width:100%;}
.article .reader .sentence{ width:70%;}
.article .reader .sentence p{ margin-bottom: 1rem; font-size:16px;}
.article .reader .sentence p+p+p+p{ float: right; }
.alert-text-box {border-radius: 20px;background:#FFEFD6;padding:20px;}
.article .reader .sentence a.link-btn {
    width: 350px;
    padding: 10px 15px;
    color: #333333;
    font-size: 15px;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
    text-decoration: none;
    background: transparent;
    display: block;
    position: relative;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border-radius: 5px;
    border: 1px solid #333333;
    -webkit-box-shadow: 0px 15px 30px -15px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0px 15px 30px -15px rgba(0,0,0,0.3);
    box-shadow: 0px 15px 30px -15px rgb(0 0 0 / 30%);
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    margin: 0 0 0 auto;
}
.article .reader .sentence a.link-btn:after {
    content: "\f105";
    position: absolute;
    top:auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-display: swap;
    color: #333333;
    right: 15px;
}
.article .reader .sentence a.link-btn:hover, .article .reader .sentence a.link-btn:hover:after{
    color: #fff;
}
.article .reader .sentence a.link-btn:hover{
    background: #333333;
}
.link-text {font-weight:bold;color:#337ab7;text-decoration:underline;}
.article .article-section .headline-deco {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px;
    padding-bottom: 10px;
    color: #F1A200;
    /*border-bottom: 1px solid #EBEBEB;*/
}
.article .article-section h3.headline-deco {
    font-size: 24px;
}
.article .article-section h4 {
    padding-bottom: 0;
    border: none;
}
.first-section .picture { padding: 0.5rem; }
@media only screen and (max-width: 667px) {
	.reader .pic,.reader.border-box .pic{max-width: 204px; width:100%;margin:auto; }
.article .reader .sentence p+p+p+p { float: none; }
.article .reader .sentence { padding-top: 0; display: table-cell; vertical-align: top; }
.article .reader img { float:none; display:table-cell; }
.article .reader,.article .reader.border-box { display: block; margin: 1.5rem 0;}
.article .reader .sentence a { width: 100%; }
.article .reader .sentence a.link-btn {margin: auto;width:100%;}
}
/* SUB HEADING BANNER */
.sub-heading_banner {display: flex;margin-top: 30px;padding: 0;justify-content:space-between;}
.sub-heading_banner.or{background: #fffad2;padding:20px;}
.sub-heading_banner.flex a {
    width: 49%;
}
@media only screen and (max-width: 768px) {
.sub-heading_banner {display: block;margin-top: 15px;padding: 10px;}
}
.sub-heading_banner .figure,
.sub-heading_banner .headline {display: table-cell;vertical-align: middle;height: 166px;box-sizing: border-box;}
@media only screen and (max-width: 768px) {
.sub-heading_banner .figure,
.sub-heading_banner .headline {display: block;height: auto;}
}
.sub-heading_banner .figure { width: 432px; }
@media only screen and (max-width: 768px) {
.sub-heading_banner .figure { width: 100%; }
}
.sub-heading_banner .figure .picture { width: 100%; }
.sub-heading_banner .headline {width: 378px;padding-left: 22px;font-size: 16px;line-height: 1.2;}

@media only screen and (max-width: 768px) {
.sub-heading_banner .headline {width: 100%;margin-top: 10px;padding-left: 0;font-size: 14px;line-height: 1.2;}
}
.helper{ font-size:80%; display:block}
.middle-category-page-ranking{padding-bottom:0;}
@media screen and (max-width: 660px){
.middle-category-page-ranking{margin-top:0;}
}
.middle-category-page-ranking.accordion{overflow:hidden; padding: 5px 0;}
@media screen and (max-width: 660px){
.middle-category-page-ranking.accordion{padding-bottom:0;}
}
@media screen and (max-width: 660px){
.middle-category-page-ranking.accordion .ac-trigger .fas{color:#f00;}
}
.item-list-page-link{margin-top:25px;}


@media screen and (max-width: 660px){
.sp-panel .sp-panel-list .rankic{height:45px;margin:0;padding:0;}
}
.sp-panel-list a{font-size:14px;display:block;margin:0px 14px 14px 0px;}
@media screen and (max-width: 660px){
.sp-panel-list a{font-size:12px;margin:0;}
}
.sp-panel-list a{font-size:12px;}

@media screen and (max-width: 660px){
.sp-panel-list .photothumb{width:100%!important;}
}
.sp-panel .sp-panel-list{margin:0;}
.sp-panel .sp-panel-list a{border:none;border-radius:0;display:inline;margin:0;padding:0;color:#333;}
.sp-panel .sp-panel-list a:hover{background-color:transparent;color:#333;}

.sp-panel{display:flex;flex-wrap:wrap; justify-content: space-between;width:100%;padding:0 5px;}
@media screen and (max-width: 660px){
  .sp-panel{justify-content: flex-start;}

}
.sp-panel .sp-panel-list{background-color:#fff;border:5px solid #fff1ce;padding: 5px 5px 10px !important;transition:0.3s;}
.sp-panel .sp-panel-list:hover{opacity:0.8;}
.sp-panel.col6 .sp-panel-list{width:16.6%;padding:5px 5px 10px; box-sizing:border-box;}
@media only screen and (max-width: 667px){
.sp-panel.col6 .sp-panel-list{width:33.33%;height:auto;padding:5px!important;}
}
.sp-panel .sp-panel-list .inner{position:relative;width:100%;}
.sp-panel .sp-panel-list .inner h3{font-size:1.17em}
.sp-panel .sp-panel-list .inner .rankic{position:absolute;top:0;left:0;}
.rankic{border:none;display:block;width:38px;height:38px;margin-bottom:0;padding:5px;text-align:center;font-weight:bold;}
.sp-panel .sp-panel-list .inner .picture{width:100%;}
.sp-panel .sp-panel-list .inner .picture:hover{opacity:1;}


.list_price span{font-size:13px;}
.small-category-page{visibility:hidden;}
.rankic{position:absolute;z-index:1;padding:0;margin-bottom:0;border:none;display:inline-block;width:38px;height:38px;}
@media only screen and (max-width: 667px){
.rankic{background-size:28px 28px!important;width:28px;height:28px;}
}
.sp-panel-list .inner .rankic{top:15px;left:16px;}
@media only screen and (max-width: 667px){
.sp-panel-list .inner .rankic{top:5px;left:5px;}
}
.middle-category-page-ranking{background-color:#fff1ce;margin:20px auto;padding:18px 0;}
@media only screen and (max-width: 667px){
.middle-category-page-ranking{margin:10px auto 0;padding:18px 0 20px;}
}
.pc-only {
  display: block;
}
@media screen and (max-width: 660px) {
  .pc-only {
    display: none;
  }
}
.category-title--border.ac-trigger{border:none;margin:0;padding:0.5em 1em;text-align:center;font-size:20px;line-height:1;color:#653308;}
.question-wrap{padding:20px;background:#EBEBEB;margin-bottom:20px;}
.sentense-or{color:#F1A200;margin-bottom:10px;font-weight:bold;font-size:18px;}
.sub-head {font-size:16px;color: #000 !important;border-bottom: none !important;margin: 20px 0 10px 0 !important;}
.sub-head.message:before {
    content: "　";
    font-size: 30px;
    background-image: url(/html/plugin/Exp/assets/column/img/nice-novelty/icon_comment.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}
.sub-head.star:before {
    content: "　";
    font-size: 30px;
    background-image: url(/html/plugin/Exp/assets/column/img/nice-novelty/icon_popular.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}
.product__ranking img {
        border: 1px solid transparent;
    }
    .product__ranking img:hover {
        border: 1px solid #c00;
    }
    .product__featured {
        margin-top: 10px;
        margin-bottom: 50px;
    }
    
    .products a:hover {
        opacity: 1;
    }
    .products h5 {
        height: 50px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 1rem;
        margin-top: 10px;
        font-weight: bold;
        letter-spacing: -.5px;
    }


    .products p.products_price span {
    font-size: 0.5rem;
    margin-top: 15px;
    }
    a:hover { 
        text-decoration: none;
        opacity: 0.5;
    }
        
    @media only screen and (max-width:503px) {
    .products h3 {
        height:30px
    }
    }
    .products p.products_price i {
    float: left;
    font-size: 10px;
    }
    .products.col6 p.products_price {
    font-size: 1rem;
    margin-bottom: 0;
    }
    .products.col6 p.products_price span {
    font-size: 0.25rem;
    }
    .products .products_price {
    font-size: 1.8rem;
    color: #C00B01;
    line-height: 1;
    font-weight: 600;
    display: flex;
    margin-bottom: 10px;
    }
    .products .products_price p {
        font-size: 0.8em;
        margin-top: 5px;
    }
    .products .products_price i {
    margin-right: 5px;
    font-weight: 400;
    display: inline-block;
    padding: 5px;
    font-style: normal;
    font-size: 0.6rem;
    background: #C00B01;
    color: #fff;
    border-radius: 50px;
    height: 30px;
    width: 30px;
    text-align: center;
    }
    .products .products_price span {
    font-size: 0.5rem;
    }
    .flex-button {width: 100%;display: flex;justify-content:space-between;flex-wrap: wrap;}
    .flex-button .resister-button {width:48%;margin-bottom: 15px;}
    .flex-button.low-2 .resister-button i{top: 35%;}
    .sub-heading_banner {
        display: flex;
        width: 100%;
        margin-top: 30px;
        padding: 0;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    a[target="_blank"]::after {
        font-family: "Font Awesome 5 Free";
        content: '\f35d';
        font-size: 100%;
        font-weight: 900;
        margin: 0 3px;
    }
    .product__new ul, .product__featured ul {
            margin: 0
        }
    .product__featured li {padding: 0 5px 0 0;}

    .products a+p {font-size:12px;}
    @media screen and (max-width: 1024px){
        .product__new ul, .product__featured ul {
            margin-bottom: 10px;
            overflow-x: hidden;
            flex-wrap: wrap;
            margin: 0
        }
        .flex-button .resister-button {width:100%;margin-bottom: 15px;}

        
    }
    @media screen and (max-width:990px) {
    .ac-body{overflow: scroll hidden;}
    .middle-category-page-ranking.accordion{position:relative;}
    .slider-item {
        display: flex;
    }
    .sp-panel.col5 {
        width: 800px;
        justify-content: flex-start;
        overflow: scroll hidden;
        flex-wrap: nowrap;
    }
    .sp-panel.col7 .sp-panel-list {
    width: 50%;
    }
    .slick-next {
    display: block;
    width: 30px;
    height: 30px;
    top:50%;
    right: 0;
    z-index: 99;
    padding: 8px 10px 0 10px;
    }
    .slick-next:before{font-size:23px;}
    }
    .article table {min-width:80%;margin:10px auto;}
.article table th,.article table td {border: 1px solid;}
.resister-box {
    margin: 40px auto
}
@media only screen and (max-width: 667px) {
  .article h1.headline {
      font-size: 20px;
      margin: 15px 0 15px;
  }
}
