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


/* ----------------------------------------------------------------------
 margin・padding
---------------------------------------------------------------------- */

/*margin top*/
.mt00 {
	margin-top: 0px;
}
.mt05 {
	margin-top: 5px;
}
.mt10 {
	margin-top: 10px;
}
.mt15 {
	margin-top: 15px;
}
.mt20 {
	margin-top: 20px;
}
.mt30 {
	margin-top: 30px;
}
.mt40 {
    margin-top: 40px;
}
.mt50 {
	margin-top: 50px;
}
.mt80 {
	margin-top: 80px;
}
.mt100 {
	margin-top: 100px;
}
/*margin bottom*/
.mb00 {
	margin-bottom: 0px;
}
.mb05 {
	margin-bottom: 5px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb15 {
	margin-bottom: 15px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb40 {
	margin-bottom: 40px;
}
.mb50 {
	margin-bottom: 50px;
}
.mb70 {
	margin-bottom: 70px;
}
.mb80 {
	margin-bottom: 80px;
}
.mb100 {
	margin-bottom: 100px;
}

/*padding top*/
.pt05 {
	padding-top: 5px;
}
.pt10 {
	padding-top: 10px;
}
.pt15 {
	padding-top: 15px;
}
.pt20 {
	padding-top: 20px;
}
.pt30 {
	padding-top: 30px;
}
.pt40 {
	padding-top: 40px;
}
.pt50 {
	padding-top: 50px;
}
.pt70 {
	padding-top: 70px;
}
.pt80 {
	padding-top: 80px;
}
.pt100 {
	padding-top: 100px;
}
.pt130 {
	padding-top: 130px;
}
/*padding bottom*/
.pb05 {
	padding-bottom: 5px;
}
.pb10 {
	padding-bottom: 10px;
}
.pb15 {
	padding-bottom: 15px;
}
.pb20 {
	padding-bottom: 20px;
}
.pb30 {
	padding-bottom: 30px;
}
.pb40 {
	padding-bottom: 40px;
}
.pb50 {
	padding-bottom: 50px;
}
.pb70 {
	padding-bottom: 70px;
}
.pb80 {
	padding-bottom: 80px;
}
.pb100 {
	padding-bottom: 100px;
}

/*
----------------------------------------------------------------------
 inner
---------------------------------------------------------------------- */
.innerOrigin{
	width:calc(100% - 30px);
	max-width:1080px;
	margin-left: auto;
	margin-right: auto;
}
.inner960{
	max-width:960px;
	width:calc(100% - 30px);
	margin-left: auto;
	margin-right: auto;
}
.inner768{
	max-width:768px;
	width:calc(100% - 30px);
	margin-left: auto;
	margin-right: auto;
}

/* ----------------------------------------------------------------------
 font
---------------------------------------------------------------------- */
.yu_font{
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}
.yugo_font{
	font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
}

/* ----------------------------------------------------------------------
 文字色
---------------------------------------------------------------------- */
.white{
    color:#fff;
}
.blk{
    color:#000;
}
.brown{
    color:#754c2e;
}
.green{
    color:#247c3a;
}
.pink{
    color:#ff6464;
}

/* ----------------------------------------------------------------------
 文字揃え
---------------------------------------------------------------------- */
.txtCenter{
	text-align:center;
}
.txtLeft{
	text-align:left;
}
.txtRight{
	text-align:right;
}

/* ----------------------------------------------------------------------
画像
---------------------------------------------------------------------- */
img.img100{
    width:100%;
    display:block;
}
img.imgCenter{
    max-width: 100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
img.imgLeft{
    max-width: 100%;
    display:block;
    margin-right:auto;
}
img.imgRight{
    max-width: 100%;
    display:block;
    margin-left:auto;
}

/* ----------------------------------------------------------------------
 スクロールフェード
---------------------------------------------------------------------- */
.fade {
	opacity: 0;
	transform: translateY(50px);
}
.fade01 {
	transition: opacity 1.5s, transform 1s;	
}
.fade02 {
	transition: opacity 1.5s, transform 1s;
	transition-delay: 0.1s;
}
.fade03 {
	transition: opacity 1.5s, transform 1s;	
	transition-delay: 0.2s;
}
.fade04 {
	transition: opacity 1.5s, transform 1s;		
	transition-delay: 0.3s;
}
.fade.on {
	opacity: 1;
	transform: translateY(0px);
}


/* ----------------------------------------------------------------------
 アンカーリンク用ボタン
---------------------------------------------------------------------- */
.inPageAnchor ul{
    list-style: none;
    display:flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    border-top:1px #e6e6e6 solid;
    border-bottom:1px #e6e6e6 solid;
}
.inPageAnchor ul li{
    text-align: center;
    font-size:16px;
    font-weight:bold;
    box-sizing: border-box;
}
.inPageAnchor ul li a{
    position: relative;
    display: block;
    height: 60px;
    line-height: 60px;
    background: #fff;
    transition: all 0.5s ease 0s;
    color:#333;
    text-decoration: none;
    font-weight:bold;
}
.inPageAnchor ul li a::before{
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transition: all 0.5s ease 0s;
    font-size: 80%;
}
.inPageAnchor ul li a:hover::before{
    right: 5px;
}
.inPageAnchor ul li a::after{
    position: absolute;
    content: "";
    width: calc(100% - 2px);
    height: 5px;
    bottom:1px;
    left:1px;
    transition: all 0.5s ease 0s;
}
.inPageAnchor ul li:nth-child(1) a::after{
    background: #ffb7a2;
}
.inPageAnchor ul li:nth-child(2) a::after{
    background: #bed7e1;
}
.inPageAnchor ul li:nth-child(3) a::after{
    background: #fbd066;
}
.inPageAnchor ul li:nth-child(4) a::after{
    background: #bed7b6;
}
.inPageAnchor ul li a:hover::after{
    background: #ccc;
}
@media screen and (min-width: 768px),print{
    .inPageAnchor ul li{
        width: calc(100% / 4);
        border-right:1px #e6e6e6 solid;
    }
    .inPageAnchor ul li:first-child{
        border-left:1px #e6e6e6 solid;
    }
}
@media screen and (max-width: 767px){
    .inPageAnchor ul{
         border-left:1px #e6e6e6 solid;
    }
    .inPageAnchor ul li{
        width: calc(100% / 2);
        border-top:1px #e6e6e6 solid;
        border-right:1px #e6e6e6 solid;
        font-size:14px;
    }
}

/*ページ内リンク*/
@media screen and (min-width: 769px){
	a.scroll_point {
	 height: 1px;
	 margin-top: -84px;
	 padding-top: 84px;
	 display: block;
	}
}
@media screen and (max-width: 768px){
	 a.scroll_point {
	 height: 1px;
	 display: block;
	 margin-top: -60px;
	 padding-top: 60px;
	}
}

/* ----------------------------------------------------------------------
 共通項目
---------------------------------------------------------------------- */
/*背景色*/
.bgGray{
    background: #f2f2f2;
}

/*ボタン*/
.btnBrown{
    text-align: center;
}
.btnBrown a {
    position: relative;
    display: block;
    background: #754c2e;
    width: 100%;
    max-width: 250px;
    height: 50px;
    line-height: 50px;
    color:#fff;
    font-size:16px;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.5s ease 0s;
    text-decoration:none;
}
.btnBrown a::after{
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transition: all 0.5s ease 0s;
    font-size: 80%;
}
.btnBrown a:hover{
    background:#ccc;
}
.btnBrown a:hover::after{
    right: 10px;
}

/* ----------------------------------------------------------------------
 swiper
---------------------------------------------------------------------- */
.swiper-wrapper{
    align-items: stretch;
}
.itemList,.itemList__item{
    position:relative;
	overflow-x:hidden;
}
.itemList__item{
    padding-bottom:55px;
}
.swiper-slide{
	padding-top:15px;
    height: auto !important;
}
.itemList__thum{
	overflow:hidden;
	width: 100%;
	position: relative;
}
.itemList__thum::before{
	content: "";
	padding-top: 100%;
	display: block;
}
.itemList__thum a{
    display: block;
    width: 100%;
    overflow: hidden;
}
.itemList__thum a img{
	display: block;
	width: 100%;
	height:100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
    transition: all 0.5s ease 0s;
}
.itemList__thum a:hover img{
    transform: scale(1.1);
}
.swiper-pagination-bullet{
	width:10px;
	height:10px;
	background:#412d0e;
}
@media screen and (max-width: 768px){
	.swiper-slide a.swiperImg img {
		height:180px;
	}
}
@media screen and (max-width: 480px){
	.swiper-slide a.swiperImg img {
		height:130px;
	}
}

.itemList__txt h3.point{
    background: #247c3a;
    color:#fff;
    font-size:16px;
    text-align: center;
    border-radius: 100px;
    padding:5px 10px;
    margin-bottom: 0.8em;
    font-weight:bold;
}
@media screen and (max-width: 768px){
    .itemList__txt h3.point{
        font-size:14px;
        padding:5px 5px;
    }
}
.itemList__txt p{
    font-size:15px;
    line-height: 1.8em;
}
.itemList__txt p.itemListPrice{
    margin-bottom: 1em;
}
.itemList__txt h4.itemListname,
.itemList__txt h3.itemListname{
    font-weight:bold;
}
.itemCartLink{
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
}
.itemCartLink a{
    display: block;
    background: #fff;
    border:2px #412d0e solid;
    text-align: center;
    border-radius: 100px;
    height: 40px;
    line-height: 40px;
    color:#412d0e;
    font-size:14px;
    font-weight: bold;
    transition: all 0.5s ease 0s;
    text-decoration: none;
}
.itemCartLink a::after{
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transition: all 0.5s ease 0s;
    font-size: 80%;
}
.itemCartLink a:hover::after{
    right: 10px;
}
.itemCartLink a:hover{
    background: #e6e6e6;
}

/*商品カテゴリ　タイトル*/
.itemTit h2{
    font-size:30px;
    font-weight: normal;
    margin-bottom: 0.5em;
}
.itemTit h2 span{
    font-size:92%;
}
p.itemTitEn{
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.1em;
}
p.itemTitSub{
    position: relative;
    display: inline-block;
    font-size:22px;
    font-weight: bold;
    padding: 0 50px;
}
p.itemTitSub::before,
p.itemTitSub::after{
    position: absolute;
    content: "";
    background: #333;
    width: 45px;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
p.itemTitSub::before{
    left:0;
}
p.itemTitSub::after{
    right:0;
}
p.itemTitDesc{
    font-size: 16px;
    line-height: 1.8em;
}
p.itemTitDesc span{
    font-weight:bold;
}
@media screen and (min-width: 768px){
    br.spBr{
        display: none;
    }
}
@media screen and (max-width: 767px){
    .itemTit h2{
        font-size:25px;
    }
    p.itemTitDesc{
        font-size: 14px;
    }
}

/*おすすめ商品*/
.item00{
    background: url(../img/topitem/00reco/bg_paper.jpg) repeat center center;
    padding-bottom: 40px;
}
.item00 .innerOrigin{
    padding-top: 20px;
}
@media screen and (max-width: 767px){
    .item00{
        padding-bottom: 15px;
    }
}
img.imgWave{
    display: block;
    width: 100%;
    position: relative;
    top:-1px;
}

/*おすすめ以外共通*/
.item01,.item02,.item03,.item04{
    padding: 60px 0;
}

/*体の材料系01*/
.item01{
    position: relative;
}
.item01::before{
    position: absolute;
    content: "";
    height: 10px;
    width: 100%;
    top:0;
    left:0;
    background: #ffb7a2;
}

/*体の材料系02*/
.item02{
    position: relative;
    background: #f2f2f2;
}
.item02::before{
    position: absolute;
    content: "";
    height: 10px;
    width: 100%;
    top:0;
    left:0;
    background: #bed7e1;
}

/*元気・免疫エネルギーUP*/
.item03{
    position: relative;
}
.item03::before{
    position: absolute;
    content: "";
    height: 10px;
    width: 100%;
    top:0;
    left:0;
    background: #fbd066;
}

/*メンタルケア*/
.item04{
    position: relative;
    background: #f2f2f2;
}
.item04::before{
    position: absolute;
    content: "";
    height: 10px;
    width: 100%;
    top:0;
    left:0;
    background: #bed7b6;
}

/* ----------------------------------------------------------------------
 category list
---------------------------------------------------------------------- */
.cateList{
    padding: 60px 0 30px;
}
@media screen and (max-width: 640px){
    .cateList{
        padding: 40px 0 20px;
    }
}
.cateTit{
    margin-bottom: 40px;
}
.cateTit p{
    display: inline-block;
    background:#754c2e;
    font-size:30px;
    line-height: 40px;
    padding: 0 10px;
    font-weight:bold;
    margin-bottom: 10px;
}
.cateListWrap{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.cateListBox{
    position: relative;
    width: calc(100% / 4);
    margin-bottom: 40px;
    padding: 0 15px 60px;
    box-sizing: border-box;
}
.cateListBox h3{
    font-size:18px;
    margin-bottom: 10px;
    font-weight: bold;
}
.cateListBox a img{
    border-radius: 50%;
    transition: all 0.5s ease 0s;
}
.cateListBox a:hover img{
    filter: grayscale(1);
}
.cateListBox p{
    font-weight:bold;
    font-size:15px;
}
.cateListBtn{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);    
    width: 90%;
    max-width: 250px;
}
.cateListBtn a{
    position: relative;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight:bold;
    color:#fff;
    background: #247c3a;
    border-radius: 100px;
    height: 45px;
    line-height: 45px;
    font-size:16px;
    letter-spacing: 0.1em;
    transition: all 0.5s ease 0s;
    text-decoration: none;
}
.cateListBtn a::after{
    position: absolute;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f061";
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transition: all 0.5s ease 0s;
    font-size:80%;
}
.cateListBtn a:hover{
    background: #ccc;
}
.cateListBtn a:hover::after{
    right:10px;
}
@media screen and (max-width: 960px){
    .cateListBox{
        width: calc(100% / 3);
    }
}
@media screen and (max-width: 640px){
    .cateTit p{
        font-size:25px;
        line-height: 35px;
        padding: 0 5px;
    }
    .cateListBox{
        width: calc(100% / 2);
        padding: 0 10px 60px;
    }
    .cateListBox h3{
        font-size:16px;
    }
    .cateListBox:nth-child(6) h3{
        font-size:15px;
    }
    .cateListBox p,
    .cateListBtn a{
        font-size:14px;
    }
}