/*slider*/
.mt40{margin-top:40px;}
.slider {
  margin-top: 5px;
  display: block;
  margin: 0 auto;
}

.bx-pager {
  margin: 0;
  padding: 0;
}

.bx-wrapper {
  margin-bottom: 0 !important;
}

.bx-wrapper .bx-viewport {
  left: -1px !important;
  border: 0px solid #fff !important;
  margin: 0 auto !important;
  background: #fff;
}

.bx-pager-item {
  /*visibility: hidden;*/
}

/* frees pace */
.news {
  border-style: double none;
  /*border-color: #4a4849;*/
  max-width: 900px;
  padding: 18px 0 10px 0;
  margin: 0 auto;
  margin-top: 5em;
}

.news-inner {
  max-width: 1050px;
  /*margin-top: 10px;
  margin-bottom: 10px;*/
  padding-left: 5px;
  color: #5d5d5d;
}

.free-space {
  max-width: 900px;
  margin-top: 10px;
  margin-bottom: 3em;
  padding-left: 5px;
  color: #5d5d5d;
}

/* recommernd */
.recommend-items {
  margin-top: 3em;
}

#container.container{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:0;
}
/**ここから**/
.top_page li {
    list-style: none;
}

.top_page ul {
    margin: 0;
    padding: 0;
}

.top_page * {
    box-sizing: border-box;
}

/*** SPECIAL ***/
.SPECIAL_FEATURE .ttl_01 {
    margin-bottom: 10px;
}

.SPECIAL_FEATURE ul {
    width: 100%;
    font-size: 20px;
}

.SPECIAL_FEATURE li {
    display: block;
    float: left;
    width: 38.77%;
    margin-right: 1.98%;
}

.SPECIAL_FEATURE li img {
    width: 100%;
}

.SPECIAL_FEATURE li:nth-child(3),
.SPECIAL_FEATURE li:nth-child(4) {
    margin-right: 0;
    width: 18.36%;
}

.SPECIAL_FEATURE li:nth-child(3) {
    margin-bottom: 1.98%;
}

@media (max-width: 768px) {
    .mt40{margin-top:20px;}
    .SPECIAL_FEATURE .ttl_01 {
        margin-bottom: 1.5em;
    }

    .SPECIAL_FEATURE li {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        width: 100%;
        margin-right: 0;
        margin-bottom: 4%;
    }

    .SPECIAL_FEATURE ul {
        font-size: 3.2vw;
    }

    .SPECIAL_FEATURE li img {
        width: 100%;
    }

    .SPECIAL_img {
        width: 44%;
        margin-right: 4%;
    }

    .SPECIAL_FEATURE li p {
        width: 52%;
        font-size: calc(28em / 24);
    }

    .SPECIAL_FEATURE li:nth-child(3),
    .SPECIAL_FEATURE li:nth-child(4) {
        margin-right: 0;
        width: 100%;
    }

    .SPECIAL_FEATURE li:nth-child(3) {
        margin-bottom: 4%;
    }
}

/*** ABOUT ***/
.ABOUT {
    clear: both;
    background: #f5f7f7;
    margin-top: 40px;
    padding-bottom: 87px;
}

.ABOUT_col {
    width: 55%;
    padding:70px 0 70px 4%;
}

.ABOUT .container > .Flex > div:nth-child(2) {
    width: 45%;
    text-align: right;
}

.ABOUT .Flex {
    background: url(https://file003.shop-pro.jp/PA01441/802/img/bg_about.jpg), #fff;
    background-size: cover;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.ABOUT_01,
.ABOUT_02 {
    display: inline-block;
    vertical-align: middle;
}

.ABOUT_01 {
    background: #a5b6c3;
    color: #fff;
    text-align: center;
    line-height: 1.8;
    width: 5em;
}

.ABOUT_02 {
    font-size: 21px;
}

.ABOUT_03 {
    font-size: 56px;
}
.ABOUT_03 p{
    margin-bottom:40px;
}
.ABOUT_04 {
    width: 95%;
    line-height: 1.8;
}

.ABOUT_Flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.ABOUT_Flex p {
    line-height: 1.8;
    width: 50%;
    padding-right: 1em;
}

.ABOUT_Flex .about_img_02 {
    width: 50%;
}

@media (max-width: 768px) {
    .ABOUT {
        margin-top: calc(85em / 24);
        padding-bottom: calc(40em / 24);
    }

    .ABOUT_col {
        width: 100%;
        padding: calc(73em / 24) 1em;
        background: #fff;
    }

    .ABOUT .Flex {
        background: none;
    }

    .ABOUT_01 {
        display: block;
        margin: 0 auto;
    }

    .ABOUT_02 {
        font-size: calc(30em / 24);
        text-align: center;
    	display: block;
    }

    .ABOUT_03 {
        font-size: calc(72em / 24);
        text-align: center;
    }
    .ABOUT_03 p{
        margin-bottom:.5em;
    }
    .ABOUT_04 {
        width: 100%;
    }

    .ABOUT_Flex {
        margin-top: 2em;
    }

    .ABOUT_Flex p {
        width: 100%;
        padding-right: 0;
    }

    .ABOUT_Flex .about_img_02 {
        width: 100%;
    }

    .ABOUT_Flex .about_img_02 img {
        width: 100%;
    }
}

/*** PRODUCT INTRODUCTION ***/
.PRODUCT {
    background: #f0ece0;
    padding-bottom: 50px;
}

.PRODUCT li {
    width: 23.5%;
    margin-right: 2%;
    position: relative;
    margin-bottom: 50px;
}

.PRODUCT li:nth-child(4n) {
    margin-right: 0;
}

.PRODUCT_disc {
    background: #fff;
    position: relative;
    padding: 18px 18px 35px 18px;
    min-height: 140px;
    color: #030303;
}

.PRODUCT p {
    margin: 0;
}

.PRODUCT_cat {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.8;
    padding: 0 1em;
    color: #fff;
    background: #8db5c6;
    font-size: 12px;
}

.PRODUCT_cat.bg_cat_01 {
    background: #c6b78d
}

.PRODUCT_ttl {
    font-size: 1.2em;
    line-height:1.6;
    padding:5px 0;
  
}

.PRODUCT_txt {}
.PRODUCT_catlink{
    display: block;
}
.PRODUCT_price {
    position: absolute;
    bottom: 18px;
    font-weight: 600;
}

.PRODUCT_price span {
    display: inline-block;
    vertical-align: middle;
    padding-left: 1em;
    font-size: 12px;
}
#trigger1,.grad-btn{
  display: none;  
}
@media (max-width: 900px) {
    .PRODUCT li {
        width: 48%;
        margin-right: 4%;
    }

    .PRODUCT li:nth-child(4n) {
        margin-right: 4%;
    }

    .PRODUCT li:nth-child(2n) {
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .PRODUCT {
        padding-bottom: calc(105em / 24);
    }

    .PRODUCT li {
        margin-bottom: calc(50em / 24);
    }

    .PRODUCT_disc {
        padding: 1em 1em calc(60em / 24) 1em;
        min-height: calc(300em / 24);
    }

    .PRODUCT_cat {
        font-size: calc(22em / 24);
    }

    .PRODUCT_ttl {
        font-size: calc(34em / 24);
        line-height: 1.2;
    }

    .PRODUCT_disc a {
        line-height: 1.2;
    }

    .PRODUCT_price {
        bottom: 1em;
        font-size: calc(30em / 24);
    }

    .PRODUCT_price span {
        font-size:.8em;
    }

    .grad-btn {
        display: block;
        margin: 0 auto;
        width: calc(330em / 26);
        color: #030303;
        border: 1px solid #000;
        text-align: center;
        font-size: calc(26em / 24);
        padding: 1em 0;
        position: relative;
    }

    .grad-btn i {
        position: absolute;
        right: calc(43em / 26);
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width:2vw;
        display: block;
    }
  
  .grad-btn i img{
    width:100%;
  }

    .grad-item {
        position: relative;
        overflow: hidden;
        height: 0px;
        /*隠した状態の高さ*/
    }

    .grad-item::before {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        /*グラデーションで隠す高さ*/
        background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
        content: "";
    }

    .grad-trigger {
        display: none;
        /*チェックボックスは常に非表示*/
    }

    .grad-trigger:checked + .grad-btn {
        display: none;
        /*チェックされていたら、grad-btnを非表示にする*/
    }

    .grad-trigger:checked ~ .grad-item {
        height: auto;
        /*チェックされていたら、高さを戻す*/
    }

    .grad-trigger:checked ~ .grad-item::before {
        display: none;
        /*チェックされていたら、grad-itemのbeforeを非表示にする*/
    }
}

/*** REVIEW ***/

@media (max-width: 768px) {
    .REVIEW {
        background: #f5f7f7;
        padding-bottom: calc(150em / 24);
    }

    .REVIEW p {
        font-size: calc(28em / 24);
    }
}

/*** TOPICS ***/
.TOPICS ul {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.TOPICS li {
    width: 49%;
    margin-right: 1%;
    margin-bottom: 30px;
}

.TOPICS li:nth-child(2n) {
    margin-right: 0;
    margin-left: 1%;
}

.TOPICS .Flex > a {
    display: block;
    width: 40%;
    margin-right: 2%;
}

.TOPICS_txt {
    width: 58%;
    margin-top: 1em;
}

.TOPICS_txt h3 {
    font-weight: 600;
    margin: 5px 0 10px;
}

.TOPICS_cat {
    color: #4f9f74;
    margin-bottom: 0;
}

.TOPICS_cat a {
    color: #4f9f74;
}

@media (max-width: 768px) {
    .TOPICS {
        padding-bottom: calc(90em / 24);
    }

    .TOPICS li {
        width: 100%;
        margin-right: 0;
        margin-bottom: calc(60em / 24);
    }

    .TOPICS li:nth-child(2n) {
        margin-left: 0;
    }

    .TOPICS .Flex > a {
        width: 33%;
        margin-right: 3%;
    }

    .TOPICS_txt {
        width: 64%;
        margin-top: 0;
    }

    .TOPICS_txt h3 {
        margin: calc(5em / 30) 0 calc(10em / 30);
        font-size: calc(30em / 24);
    }
}

/*** NOTIFICATION ***/
.NOTIFICATION {
    background: #f5f7f7;
    padding-bottom: 105px;
}

.NOTIFICATION .Flex {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.NOTIFICATION li {
    background: #fff;
    border-bottom: dotted #959595 2px;
    padding: 30px;
}

.NOTIFICATION li:last-child {
    border: none;
}

.NOTIFICATION li div {
    font-size: 14px;
}

.NOTIFICATION li div:nth-child(1) {
    font-size: 13px;
}

@media (max-width: 768px) {
    .NOTIFICATION {
        padding-bottom: calc(105em / 24);
    }

    .NOTIFICATION ul {
        padding: 0 1em;
        background: #fff;
    }

    .NOTIFICATION li {
        padding: 1em 0;
    }

    .NOTIFICATION li div {
        font-size: calc(26em / 24);
    }

    .NOTIFICATION li div:nth-child(1) {
        font-size: calc(26em / 24);
    }
}
.more {
  padding: 1em 0;
  margin-bottom:2em;
  margin-top: 1em;
}
.more a {
	padding: 1em 2em;
	background: #6eb92b;
	color: #fff;
	border-radius: 5px;
}
.QA {
	background: #f0ece0;
	padding-bottom: 50px;
}
.QA li {
	background: #fff;
	padding: 1em;
	box-sizing: border-box;
	margin-bottom: 1em;
}
.QA .q::before {
	content: "Q";
	background: #c6b78d;
	color: #fff;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
  margin-right: 10px;
}
.QA .a::before {
	content: "A";
	background: #6fba2c;
	color: #fff;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
  margin-right: 10px;
}
.QA li .q,.QA li .a {
	display: flex;
}
.QA li > div > p {
	width: calc(100% - 40px);
}
.QA li .q {
	margin-bottom: 1em;
}
.QA .more {
	text-align: center;
}


/* 佐藤追加 */
.PRODUCT_img { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #fff;}
.PRODUCT_img img { width: 100%; height: 100%; object-fit: contain;}

.RANKING { margin-bottom: 50px;}
.RANKING ul { display: flex; justify-content: center; gap: 40px 20px; counter-reset: rank;}
.RANKING li { width: calc((100% - 80px) / 5); position: relative; counter-increment: rank;}
.RANKING li:before { content: counter(rank); position: absolute; font-size: 1.5em; width: 2em; height: 2em; border-radius: 50%; background: #e5ea70; z-index: 10; left: 5px; top: 5px; line-height: 2; text-align: center; display: block;}

@media (max-width: 900px) {
  .RANKING ul { flex-wrap: wrap;}
  .RANKING li { width: calc((100% - 60px) / 3);}
}
 
@media (max-width: 768px) {
  .RANKING li { width: calc((100% - 20px) / 2);}
}