@charset "UTF-8";
/* CSS Document */




a:hover{
	opacity: 1!important;
}

body {
	overflow-x: hidden;
 　　text-size-adjust: 100%;
 　　-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
 　　-ms-text-size-adjust: 100%;/*EgdeMobile*/
 　　-moz-text-size-adjust: 100%;/*firefox*/
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", 'メイリオ', 'Meiryo',sans-serif;
}


body main {
  max-width: 100%;
 /* overflow-x: hidden;*/
}

body main .main-contents {
  overflow: hidden;
  background-color: #fff;
}

h1, h2, p{
font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", 'メイリオ', 'Meiryo',sans-serif;
}


p{
	font-size: 1.6rem;
	line-height: 28px;
}

.eng{
	font-family: 'Lexend Peta', "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'メイリオ', 'Meiryo', sans-serif;
}


.title{
font-family: Noto Sans CJK JP, YakuHanJP, Noto Sans JP, Yu Gothic, YuGothic, Hiragino Kaku Gothic P, sans-serif;
}


.main-title{
font-family: Noto Sans CJK JP, YakuHanJP, Noto Sans JP, Yu Gothic, YuGothic, Hiragino Kaku Gothic P, sans-serif;
}



.fv{
	background: #F2EEEB;
	position: relative;
}

.fv .fv_img{
    width: 92%;
    margin: auto;
    padding: 4% 0;
}

.fv .text-box{
	    position: absolute;
    bottom: 8%;
    left: 0%;
    width: 90%;
}

.fv .text-box .sub{
	    background: #fff;
    width: 82%;
    padding: 0 5%;
    margin-bottom: 2%;
}


.fv .text-box h1{
	    font-size: 2.8rem;
    line-height: 39px;
    margin: 0;
    font-weight: 600;
    font-family: Noto Sans CJK JP, YakuHanJP, Noto Sans JP, Yu Gothic, YuGothic, Hiragino Kaku Gothic P, sans-serif;
    background: #fff;
        padding: 2% 2% 2% 4%;
	white-space: nowrap;
}

.contents01{
	background: #F2EEEB;
}

.contents01 .text-box{
    text-align: center;
}

.contents01 .text-box .eng{
	    color: #8E7B62;
    font-size: 1rem;
    padding-bottom: 0%;
    border-bottom: 1px solid #8E7B62;
    width: 90%;
    margin: 0 auto 4%;
    padding-top: 6%;
}

.contents01 .text-box .title{
      font-size: 2.4rem;
    line-height: 28px;
    margin-bottom: 6%;
}

.contents01 .text-box .title span{
	    font-size: 1.4rem;
}

.contents01 ul{
	display: flex;
    width: 90%;
    margin: auto;
	    justify-content: space-between;
	    padding-bottom: 8%;

}


.contents01 li{
	width: 49%;
}

.contents01 li .icon{
	    background: #8E7B62;
    display: inline;
    padding: 2%;
    font-size: 1.2rem;
    color: #fff;
    margin: 2% 0;
}

.contents01 li picture{
	    display: block;
    margin-bottom: 4%;
}



.contents01 li .name{
	    font-size: 1.4rem;
    line-height: 24px;
}

.contents01 li sup {
    top: 0;
}


.contents02{
	    width: 90%;
    margin: 8% auto;
}


.contents02 .title{
	    font-size: 2.2rem;
    line-height: 36px;
    font-weight: 600;
    margin: 16% 0 4%;
}

.contents02 .text{
    margin: 6% 0;	
}

.contents02 .nayami-img{
	    display: block;
    margin-bottom: 4%;
}

.contents03 {
	background: #F2EEEB;
}

.contents03 .title{
	text-align: center;
    font-size: 3rem;
    letter-spacing: 0.2rem;
    padding: 14% 0 4%;
    font-weight: 600;
    line-height: 32px;
}

.contents03 .title span{
	    font-size: 1.6rem;
    font-weight: 500;
    line-height: 34px;
}

.contents03 .step{
	    background: #8E7B62;
    width: 90%;
    margin: 2% auto;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    padding: 2%;
}

.contents03 .step .sub-title{
	    font-size: 1.8rem;
    line-height: 20px;
    padding: 4% 0 2%;
	
}

.contents03 .step .sub-title .eng{
	font-size: 1rem;
}

.contents03 .recommend_oil{
	margin-top: 4%;
}

.contents03 .recommend_oil a{
	    display: flex;
    width: 90%;
    margin: auto;
}
.contents03 .recommend_oil .text-box{
	text-align: left;
	    width: 70%;
    margin-left: 4%;
}

.contents03 .recommend_oil .text-box .icon{
	background: #fff;
    display: inline;
    border-radius: 20px;
    color: #8e7b62;
    font-size: 1.2rem;
    padding: 2% 4%;
}

.contents03 .recommend_oil .text-box .name{
	    font-size: 1.4rem;
    line-height: 22px;
}



.contents03 .recommend_oil .arrow{
	    color: #fff;
    font-size: 1rem;
    font-family: 'Lexend Peta', "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'メイリオ', 'Meiryo', sans-serif;
}


.contents03 .recommend_oil .arrow::after {
	border-top: 1.5px solid rgb(255 255 255);
    border-right: 1.5px solid #ffffff;
}

.contents03 .recommend_oil picture{
	    width: 30%;
    height: auto;
}


.reco-circle {
  display: flex;
  align-items: center;
	    font-size: 1.2rem;
	    justify-content: center;
}

.reco-circle::before {
       content: "おす\A すめ";
    white-space: pre;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #8e7b62;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
    margin-right: 6px;
    flex-shrink: 0;
}

.contents03 .step04{
	    background: #fff;
    border: 2px solid #8E7B62;
    color: #8E7B62;
    font-weight: 600;
}

.contents03 .step04 .sub-title {
	font-size: 2rem;
}
.contents03 .reco-cream{
	    display: block;
    width: 40%;
    margin: 0 auto 2%;
}

.contents03 .reco-more{
	    width: 90%;
    display: block;
    margin: auto;
    padding: 2% 0 12%;
}

.triangle{
	    width: 0;
    height: 0;
    margin: auto;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-top: 16px solid #8E7B62;
}

.contents04 .menu{
    margin: 16% auto;
    width: 90%;
    text-align: center;
}


.contents04 .menu .title{
	font-size: 2.4rem;
    margin-bottom: 4%;
    line-height: 30px;
}


.contents04 .menu .title span{
	font-size: 1.6rem;
}

.contents04 .menu ul{
	    display: flex;
}



.contents04 .cream01{
	background: #FDF2E0;
	    padding-bottom: 1%;
}

.contents04 .cream02{
	background: #fff6ee;
	    padding-bottom: 12%;
}




.contents04 .cream-block .title{
	text-align: center;
    padding: 16% 0 0;
}

.contents04 .cream-block .title .icon{
	    display: inline;
    padding: 2% 4%;
    border-radius: 20px;
    color: #fff;
    font-size: 1.4rem;
}

.contents04 .cream01 .title .icon{
	    background: #536E3E;
}

.contents04 .cream02 .title .icon{
	    background: #EB7F3F;
}

.contents04 .cream-block .title .main{
	margin: 4%;
    font-weight: 600;
	    line-height: 24px;
}

.contents04 .cream-block .title .eng{
	    font-size: 2.7rem;
    font-weight: 500;
}


.contents04 .cream-block .text{
	    width: 90%;
    margin: 4% auto 6%;
}

.contents04 .cream-block .text .small{
	    text-align: left;
    line-height: 20px;
}


.contents04 .cream-block .about{
	    width: 90%;
    margin: auto;
}


.contents04 .cream-block .about .about-parts{
	    display: flex;
}
.contents04 .cream-block .about .about-parts picture{
	display: block;
    width: 20%;
    height: auto;
}

.dot-line {
display: flex;
    align-items: center;
    font-size: 1.2rem;
}


.dot-line::after {
content: "";
flex: 1;
border-bottom: 1px dotted #999;
margin-left: 10px;
}

.contents04 .cream-block .about .about-parts .text-box{
	    width: 80%;
    margin-left: 4%;
}

.contents04 .cream-block .about .about-parts .text-box .main{
	    font-size: 1.6rem;
}


.contents04 .cream-block .about .about-parts .text-box .text{
	    width: 100%;
    font-size: 1.2rem;
    line-height: 19px;
    margin: 2% 0 4%;
}

.contents04 .cream-block .kit{
	    background: #fff;
    width: 90%;
    margin: 12% auto;
    padding: 4%;
}

.contents04 .cream-block .kit picture{
	display: block;
    width: 90%;
    margin: 2% auto;
}

.contents04 .cream-block .kit picture img{
	    border-radius: 10px;
}


.contents04 .cream-block .kit .title{
	    font-size: 2.4rem;
    padding: 6% 0 4%;
}

.contents04 .cream-block .kit .name{
	    margin-top: 4%;
}

.contents04 .cream-block .kit .text{
	    width: 100%;
    font-size: 1.4rem;
    line-height: 20px;
}

.contents04 .cream-block .kit .text small{
	text-align: left;
}

.contents04 .cream-block .kit .kit-contents{
	    border: 1px solid #8E7B62;
    padding: 4%;
    color: #8E7B62;
    font-size: 1.2rem;
    line-height: 20px;
    margin-bottom: 4%;
}

.cv-btnarea{
	    display: flex;
	     margin: 6% auto;
    justify-content: space-between;
}

.cv-btnarea .cv{
	width: 49%;
    text-align: center;
    padding: 15px 20px;
    background: #ffffff;
    color: #8e7b62;
    border: 2px solid;
    border-radius: 999px;
    font-size: 1.6rem;
	    font-weight: 600;
}

.cv-btnarea .direct-cart{
    width: 49%;
}

.cv-btnarea .direct-cart .cart-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    padding: 15px 20px;

    background: #8E7B62;
    color: #fff;

    border: none;
    border-radius: 999px;

    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
    transition: opacity 0.3s;
}

.cv-btnarea .direct-cart .cart-btn:hover{
    opacity: 0.85;
}

.cv-btnarea .direct-cart .cart-btn::before{
    content: "";
    width: 20px;
    height: 20px;

    background: url("https://shoponline.itembox.design/item/20221223/image/re/icon_cart_white.svg") no-repeat center center;
    background-size: contain;

    flex-shrink: 0;
}



.contents05{
	    padding: 12% 4%;
}



.contents05 .title {
text-align: center;
    font-size: 1.6rem;
    line-height: 26px;
	}

.contents05 .title .eng{
	     color: #8E7B62;
    font-family: 'Lexend Peta', "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 300;
	    font-size: 2.6rem;
}

.contents05 .question {
	margin: 8% 0;
}

.contents05 .question .title{
	text-align: left;
}

.contents05 .question p{
	text-align: left;
}



.contents05 .question span{
	color: #8E7B62;
    font-family: 'Lexend Peta', "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'メイリオ', 'Meiryo', sans-serif;
}
   


.contents05 .question small{
	text-align: left;
}
  


/*side*/
.aside-left{
	width: 90%;
    margin: auto;
}


.aside-left .side-topics{
	    border: 1px solid #808080;
    padding: 4%;
    margin: 12% 0 8%;
    text-align: center;
}


.eng_title{
	font-family: 'Lexend Peta', "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'メイリオ', 'Meiryo', sans-serif;
}

.aside-left .side-topics .eng_title{
	    font-size: 2rem;
    margin: 4% 0;
}

.aside-left .topics_img{
	    display: block;
    width: 90%;
    margin: 0 auto 6%;
    box-shadow: 5px 5px 5px #8080806b;
    border-radius: 10px;
}

.aside-left .topics_img img{
	border-radius: 10px;
}

.aside-left .side-topics .title{
	    font-size: 2.4rem;
    line-height: 33px;
    margin: 8% 0 4%;
}

.aside-left .side-subscribe{
	    background: #EBEBEB;
    margin: 12% 0 6%;
    padding: 4%;
}
	
.aside-left .side-subscribe .eng_title{
	    text-align: center;
    font-size: 2rem;
    margin: 6% 0;
}


.aside-left .side-subscribe .text{
	    text-align: center;
    font-size: 1.4rem;
    line-height: 24px;
    padding: 0 0 6%;
}

.aside-left .side-subscribe .mail-box{
	    margin: 6% 0 6%;
}

.aside-left .side-subscribe .mail-box .text{
	text-align: left;
    padding: 12px;
}

.aside-left .side-topics .text {
	font-size: 1.4rem;
    line-height: 24px;
	}
	
	.aside-left .side-topics .text small{
		    line-height: 35px;
    text-align: center;
	}


.breadcrumb {
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
}

.breadcrumb ol{
	    display: flex;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
}
 .breadcrumb li{
	    display: inline-block;
    vertical-align: top;
    position: relative;
    margin-right: 20px;
}

.breadcrumb li:not(:last-child)::after {
    content: "/";
    font-size: 12px;
    display: inline-block;
    position: absolute;
    top: 1px;
    right: -12px;
    margin: auto 0;
    color: #808080;
}



.breadcrumb a:hover {
  text-decoration: underline;
}
.side-ranking{
    margin: 16% 0;
}

.ranking-title{
    font-family: 'Lexend Peta', sans-serif;
    font-size: 1.5rem;
    color:#8E7B62;
    text-align:center;
    margin-bottom:30px;
}

.ranking-list li{
    margin-bottom:20px;
    border-bottom:1px solid #e8e8e8;
}

.ranking-list a{
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.rank-thumb{
    position:relative;
    width:90px;
    flex-shrink:0;
}

.rank-thumb img{
    width:100%;
    display:block;
    border-radius:4px;
}

.rank-no{
    position:absolute;
    left:1px;
    top:-10px;

    font-family:'Lexend Peta',sans-serif;
    font-size:2.6rem;
    line-height:1;

    color:#8E7B62;
    z-index:2;
}

.rank-info{
    flex:1;
}

.rank-category{
    font-size:1rem;
    color:#8E7B62;
    margin-bottom:4px;
    line-height:1.4;
	font-family:'Lexend Peta',sans-serif;
}

.rank-date{
    font-size:1.1rem;
    color:#888;
    margin-bottom:8px;
    line-height:1.4;
	font-family:'Lexend Peta',sans-serif;
}

.rank-text{
	
    letter-spacing: -0.08rem;
    font-size:1.4rem;
    line-height:1.4;
    color:#333;
	font-weight: 600;
    font-family: Noto Sans CJK JP, YakuHanJP, Noto Sans JP, Yu Gothic, YuGothic, Hiragino Kaku Gothic P, sans-serif;
}


@media screen and (min-width: 481px) {
	/* ------------------481px以上に適用されるCSS（タブレット）------------------- */
	
/*common*/
	body{
		max-width: inherit;
	}
	main{
		    min-width: 481px!important;
	}
	
}
	



@media screen and (min-width: 960px) {
		/* --------------------------------960px以上に適用されるCSS（PC）-------------------------------- */
h1, h2, p{

    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans", 'メイリオ', 'Meiryo',sans-serif;
}
small{
	text-align: center;
	}
	main{   
	background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  
	}
	p{
		font-size: 1.6rem;
	}
	
/*	    .bg-nav {
        display: flex;
        box-sizing: border-box;
			        max-width: 1080px;
        margin: 2% auto;
	}*/
	.bg-nav {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    max-width: 1080px;
    margin: 2% auto;
}
	
/*	    aside {
  position: sticky;
top: 1%;
	}*/
	.main-contents {
        margin: auto;
        max-width: 600px;
        flex: 1;
        background: #fff;
    }
	
.pagemenu {
    position: sticky;
    top: 20px;
    box-sizing: border-box;
    width: 28%;
    margin: 0 0 0 10%;
    align-self: flex-start;
}

/*aside {
    position: static;
}*/
	
	aside{
    position: sticky;
    top: 1%;

    max-height: calc(100vh - 20px);
    overflow-y: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

aside::-webkit-scrollbar{
    display:none;
}
	
	
	.aside-left .side-topics .eng_title {
    font-size: 1.8rem;
	}
	
	.aside-left .side-topics .title {
    font-size: 2rem;
	}
	
	.aside-left .side-topics .text {
		font-size: 1.4rem;
    line-height: 20px;
    letter-spacing: -0.06rem;
	}
	
	.aside-left .side-topics .text small{
		    line-height: 35px;
    text-align: center;
	}
	
	.fv .text-box {
    position: absolute;
    bottom: 42%;
    left: 56%;
    width: 42%;
}
	
	.fv .text-box .sub {
    background: #fff;
    width: 59%;
    padding: 0 0 0 5%;
    margin-bottom: 2%;
    font-size: 1.8rem;
}
	.fv .text-box h1 {
    font-size: 4rem;
    line-height: 39px;
    margin: 0;
    font-weight: 600;
    font-family: Noto Sans CJK JP, YakuHanJP, Noto Sans JP, Yu Gothic, YuGothic, Hiragino Kaku Gothic P, sans-serif;
    background: #fff;
    padding: 2% 2% 2% 4%;
    white-space: nowrap;
    width: 92%;
}
	
	.contents01 .text-box .eng {
    font-size: 1.2rem;
	}
	
	.contents01 .text-box .title {
    font-size: 3rem;
		margin-bottom: 6%;
		line-height: 32px;
}
	
	.contents01 .text-box .title span {
    font-size: 1.8rem;
    line-height: 40px;
}
	
	.contents01 ul {
    padding-bottom: 4%;
}
	
	.contents01 li .icon {
    font-size: 1.4rem;
	}
	
	.contents01 li .name {
    font-size: 1.6rem;
    line-height: 26px;
    margin-top: 4%;
}
	
	.contents02 {
    width: 100%;
	}
	
	.contents02 .title {
    font-size: 2.8rem;
		line-height: 40px;}
	
	.contents03 .title {
    font-size: 3.4rem;
    letter-spacing: 0.2rem;
    padding: 8% 0 3%;
	}
	
	.contents03 .title span {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 47px;
}
	
	.contents03 .step .sub-title {
        font-size: 2.4rem;
    line-height: 27px;
    padding: 2% 0 2%;
}
	
	.contents03 .recommend_oil .text-box {
    margin: auto auto auto 4%;
}
	
	.contents03 .recommend_oil .text-box .name {
    font-size: 1.8rem;
    line-height: 26px;
    margin: 4% 0;
}
	
	.reco-circle {
    font-size: 1.6rem;
	}
	
	.contents03 .reco-cream {
		width: 32%;}
	
	.contents03 .step04 .sub-title {
    font-size: 2.4rem;
}
	
	.contents04 .menu .title {
    font-size: 3rem;
	}
	
	.contents04 .menu .title span {
    font-size: 1.8rem;
    line-height: 38px;
}
	
	.contents04 .menu {
    margin: 16% auto 10%;

	}
	
	.contents04 .cream-block .title .eng {
    font-size: 3.2rem;
	}
	
	.contents04 .cream-block .title .icon {
    font-size: 1.6rem;
}
	
	.contents04 .cream-block .title .main {
    font-size: 1.8rem;
	}
	
	.contents04 .cream-block .about .about-parts .text-box .main {
    font-size: 1.8rem;
}
	
	.contents04 .cream-block .about .about-parts .text-box {
    width: 80%;
    margin: auto auto auto 4%;
}
	
	.contents04 .cream-block .kit .name {
    margin-top: 4%;
    font-size: 1.8rem;
}
	
	.contents04 .cream-block .kit .text {
    width: 100%;
    font-size: 1.6rem;
    line-height: 26px;
}
	
	.contents04 .cream-block .kit .kit-contents {
    border: 1px solid #8E7B62;
    padding: 4%;
    color: #8E7B62;
    font-size: 1.4rem;
    line-height: 23px;
    margin-bottom: 4%;
}
	
	.contents04 .cream01 {
    padding-bottom: 3%;
}
	
	.fv .fv_img {
    width: 97%;
    margin: auto;
    padding: 2% 0;
}
	


	
}