@charset "utf-8";


/*--------------------------------------------------------------
/template/
--------------------------------------------------------------*/
div#template{
	width: 320px;
	margin: 0 auto;
	padding:0;
	text-align: center;
	color: #000000;
}

/* 特定商取引法 位置は適宜調節
-------------------------------------------------------------- */
#tokushou {
	margin: 0 0 10px 0;
	text-align: center;
    font-size: 13px;
}


/*--------------------------------------------------------------
/template/
--------------------------------------------------------------*/
* { box-sizing: border-box;}
h1,h2,h3,h4,h5,ul,li,dl,dt,dd,p {
	margin:0;
	padding:0;
	list-style:none;
	font-weight: normal;
}
a{
	color: #1e4d9e;
	text-decoration: none !important;
    -webkit-transition:0.8s;
    -moz-transition:0.8s;
    -ms-transition:0.8s;
    -o-transition:0.8s;
    transition:0.8s;
}
a:hover {
	opacity:0.6;
}

div#template{width: 100%;margin: 0 auto;padding:0;text-align: center;color: #000000;}
html { height: 100%;font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;font-size: 62.5%;}
p {margin:0;}
#mainBg {position: fixed;background: url(../img/bg.jpg);background-size: cover;background-repeat: no-repeat;width: 100%;height: 100%;z-index: -1; background-position: center bottom;}
#wrapper {background: #fff;width: 100%;height: 100%;margin: 0 auto;max-width: 650px;overflow: hidden;}
@media screen and (min-width: 611px) {
#wrapper {box-shadow: 0px 0px 54px 0px rgba(183, 192, 204, 0.8);}
}
#wrapper img {width: 100%;vertical-align: bottom;}

body { margin: 0;}
.pc { display: block!important; }
.sp { display: none!important; }
h1 {margin: 0;}
.italic { font-style: italic;}
.noFlex { display: block !important;}

#footer { display: none;}
@media only screen and (min-width: 751px) {
}
@media only screen and (max-width: 750px) {
h1 {margin: 0;}
.pc { display: none!important;}
.sp { display: block!important;}
}

/*==================================
	guidetBlock
==================================*/
#guideBlock {padding: 4% 0 9% 0;text-align: center;font-size: 1.5rem; }
#guideBlock a {color: #555;}
#guideBlock #guide_link {width: 48%;margin: 0 auto;}
#guideBlock #tokushou_link, #guideBlock #privacy_link, #guideBlock #outline_link {padding-top: 4%;}
@media screen and (min-width: 650px) {
#guideBlock {padding: 0 0 50px 0;}
#guideBlock #guide_link {max-width: 180px;}
#guideBlock #tokushou_link, #guideBlock #privacy_link, #guideBlock #outline_link {padding-top: 15px;}
}



/*==================================
	floatingBarBlock
==================================*/
.floatingBarBlock { position: fixed; bottom: 2%;left: 0;right: 0; z-index: 700; width: 90%; max-width: 600px;margin: auto;}
.floatingBarBlock .floating { display: none;}



/*==================================
	
==================================*/
/* accordion */
.accordion dt { cursor: pointer;}
.accordion dd { max-height: 0; overflow: hidden; transition: max-height 0.4s ease;}

/* tab */
.tabArea .tab_content { margin-bottom: 5.33vw; display: none;}
.tabArea .tab_btn { display: flex;}
.tabArea .tab_btn .on { display: none ;}
.tabArea .tab_btn .open .on { display: block;}
.tabArea .tab_btn .open .off { display: none;}
.tabArea .tab_btn li { cursor: pointer;}
.tabArea .tab_btn.column2 li { width: 50%;}
.tabArea .tab_btn.column4 li { width: 25%;}
.accordion dt { position: relative;}
.accordion dt:before { width: 2.66vw; height: 2.66vw; content: ""; position: absolute; background: url("../img/tab_ac_off.png") no-repeat; right: 15%; top: 0; bottom: 0; margin: auto; background-size: cover;}
.accordion dt.open:before { background: url("../img/tab_ac_on.png") no-repeat;transform: translateY(-50%);}
@media screen and (min-width: 650px) {
.tabArea .tab_content { margin-bottom: 40px;}
.accordion dt:before { width: 20px; height: 20px;}
}

/* swiper */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.66vw;}
.swiper { background: #fbf9f0; position: relative;}
.swiper .swiper-container { width: 80%; margin: 0 auto; overflow: hidden; background: #fff; z-index: 1; position: relative;}
.swiper .swiper-container .swiper-pagination { top: 36vw; z-index: 10; left: 0; right: 0; margin: auto; position: absolute;}
.swiper .swiper-container .swiper-pagination-bullet { height: 0.4vw; width: 9.33vw; background-color: #dbd8d6; display: inline-block; cursor: pointer;}
.swiper .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #33a85b;}
.swiper .swiper-button-prev,
.swiper .swiper-button-next { width: 10.66vw; height: 10.66vw; border-radius: 10.66vw; background: #33a85b; display: inline-block; cursor: pointer; display: flex; align-items: center; justify-content: center; position: absolute; top: 130vw;}
.swiper .swiper-button-prev { left: 3%; transform: rotate(180deg);}
.swiper .swiper-button-next { right: 3%;}
.swiper .swiper-button-prev svg,
.swiper .swiper-button-next svg { color: #fff; padding-left: 2.66vw; box-sizing: unset;}
.swiper .swiper-button-disabled { display: none !important;}
@media screen and (min-width: 650px) {
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px;}
.swiper .swiper-container .swiper-pagination { top: 260px;}
.swiper .swiper-container .swiper-pagination-bullet { height: 3px; width: 70px;}
.swiper .swiper-button-prev,
.swiper .swiper-button-next { width: 80px; height: 80px; border-radius: 80px; top: 900px;}
.swiper .swiper-button-prev svg,
.swiper .swiper-button-next svg { color: #fff; padding-left: 20px;}
}

/*==================================
	 fv
==================================*/
header { position: relative;}
header .box { position: relative; z-index: 10;}
header .btn { width: 80%; bottom: 10.5%; left: 0; right: 0; margin: auto; position: absolute; z-index: 15;}

header .bgArea { width: 100%; height: 100vh; position: absolute; left: 0; top: 0; opacity: 0; animation: image-switch-animation 16s infinite;}
header .background-image { position: absolute; left: 0; top: 0;}
header .shadow-video { width: 100%; height: auto; max-width: 650px; position: absolute; left: 0; top: 0; object-fit: cover; mix-blend-mode: multiply; opacity: 0.5;}


@keyframes image-switch-animation {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  50%  { opacity: 1; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}
.bgArea.bg01 { animation-delay: 0s;}
.bgArea.bg02 { animation-delay: 8s;}

/*==================================
	 sec
==================================*/

/* sec01 */
.sec01 .sec01_03 { position: relative;}
.sec01 .sec01_03 p { width: 28.53%; bottom: 28%; position: absolute;}
.sec01 .sec01_03 .btn_premium { left: 4.5%;}
.sec01 .sec01_03 .btn_otona { left: 0; right: 0; margin: auto;}
.sec01 .sec01_03 .btn_calo { right: 4.5%;}
/* premium */
.premium {}
.premium .premium_voice05 { position: relative;}
.premium .premium_voice05 .btn { width: 80%; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
.premium .premium4 { padding-bottom: 40px;}
/* otona */
.otona {}
.otona .otona_voice05 { position: relative;}
.otona .otona_voice05 .btn { width: 80%; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
.otona .swiper { background: #ebf7f4;}
/* calo */
.calo {}
.calo .calo_voice05 { position: relative;}
.calo .calo_voice05 .btn { width: 80%; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
.calo .nomal { background: #f1f4e7; padding: 0 10%;}
.calo .nomal .tabArea { padding-bottom: 5.33vw; background: #fff;}
.calo .tabArea .tab_content { margin-bottom: 0;}
@media screen and (min-width: 650px) {
.calo .nomal .tabArea { padding-bottom: 40px;}
}

/* sec08 */
.sec08 input { position: relative; cursor: pointer; display: block; height: 0; margin: 0 auto; border: none; text-indent: -9999px; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s;}
.sec08 input:hover { opacity: 0.7;}
.sec08 .cv_btn input { padding-top: calc(120 / 750 * 100%); width: calc(690 / 750 * 100%); background: url(../img/sec08_btn01.png) no-repeat 0 0 / 100% auto;}
.sec08 .cv_btn_member input { padding-top: calc( 90 / 750 * 100%); width: calc( 470 / 750 * 100%); background: url(../img/sec08_btn02.png) no-repeat 0 0 / 100% auto;}
.sec08 .cv_btn,
.sec08 .cv_btn_member { left: 0; right: 0; margin: auto; position: absolute;}
.sec08 .sec08_02 { position: relative;}
.sec08 .sec08_02 .anchor {}
.sec08 .sec08_02 .anchor li { bottom: 12.8%; width: 38.66%; position: absolute;}
.sec08 .sec08_02 .anchor li:nth-child(1) { left: 10%;}
.sec08 .sec08_02 .anchor li:nth-child(2) { right: 10%;}
.sec08 .sec08_03 { position: relative;}
.sec08 .sec08_03 .cv_btn { bottom: 40%;}
.sec08 .sec08_03 .cv_btn_member { bottom: 30.5%;}
.sec08 .sec08_05 { position: relative;}
.sec08 .sec08_05 .cv_btn { bottom: 39.5%;}
.sec08 .sec08_05 .cv_btn_member { bottom: 29.5%;}
.sec08 .sec08_07 { position: relative;}
.sec08 .sec08_07 .link {}
.sec08 .sec08_07 .link li { width: 35.86%; position: absolute;}
.sec08 .sec08_07 .link li:nth-child(1) { left: 14%; top: 32%;}
.sec08 .sec08_07 .link li:nth-child(2) { right: 14%; top: 32%;}
.sec08 .sec08_07 .link li:nth-child(3) { left: 14%; top: 54%;}
.sec08 .sec08_07 .link li:nth-child(4) { right: 14%; top: 54%;}
.sec08 .sec08_08 { position: relative;}
.sec08 .sec08_08 p { width: 71.73%; position: absolute; left: 0; right: 0; margin: auto;}
.sec08 .sec08_08 .btn_01 { top: 20%;}
.sec08 .sec08_08 .btn_02 { top: 39%;}

/* sec10 */
.sec10 .sec10_06 { position: relative;}
.sec10 .sec10_06 .btn { width: 69.33%; position: absolute; left: 0; right: 0; margin: auto; top: 0;}

/*==================================
	 txtArea
==================================*/
.txtArea { width: 86%; margin: 0 auto; text-align: left; color: #666;}
.txtArea .txtTit { font-size: 4.7vw; margin-bottom: 8vw; padding: 10px 0; text-align: center; background: #999; color: #fff;}
.txtArea .itemName { font-size: 5vw; margin-bottom: 5vw; text-align: center; line-height: 1;}
.txtArea .itemName .kinou { font-size: 2.9vw; padding: 0.76vw 1.53vw; margin-bottom: 1.53vw; display: inline-block; border: solid 1px #999;}
.txtArea .mt { margin-top: 8vw;}
.txtArea .table { font-size: 3.23vw; border-right: solid 1px #eee; border-bottom: solid 1px #eee; display: flex; flex-wrap: wrap;}
.txtArea .table dt { padding: 5vw 0; width: calc(34% - 1px); background: #f7f7f7; border-left: solid 1px #eee; border-top: solid 1px #eee; text-align: center; line-height: 1.5; display: flex; justify-content: center; align-items: center;}
.txtArea .table dt .min { font-size: 2.61vw;}
.txtArea .table dd { padding: 5vw; width: 66%; border-top: solid 1px #eee; display: flex; align-items: center;}
.txtArea .list {}
.txtArea .list dt { font-size: 4vw; font-weight: 600; line-height: 1.5;margin-bottom: 2vw;}
.txtArea .list dd { font-size: 3.2vw; line-height: 1.6;}
.txtArea .list dd p { line-height: 1.6;}
.txtArea .list dd.kome p { text-indent: -1.84vw; margin-left: 3.8vw;}
.txtArea .list dd.kome p:before { content: "※"; display: inline-block; margin-right: 0.7vw;}
.txtArea.ingredients { padding: 9vw 0 15vw 0;}
.txtArea.other { padding: 0 0 15vw 0;}
.txtArea.other .list dt {margin-top: 4vw;}

@media screen and (min-width: 650px) {
.txtArea .txtTit { font-size: 30px; margin-bottom: 40px;}
.txtArea .itemName { font-size: 33px; margin-bottom: 35px;}
.txtArea .itemName .kinou { font-size: 19px; padding: 5px 10px; margin-bottom: 15px;}
.txtArea .mt { margin-top: 40px;}
.txtArea .table { font-size: 20px;}
.txtArea .table dt { padding: 35px 0;}
.txtArea .table dt .min { font-size: 17px;}
.txtArea .table dd { padding: 35px;}
.txtArea .list {}
.txtArea .list dt { font-size: 26px;margin-bottom: 15px;}
.txtArea .list dd { font-size: 21px;}
.txtArea .list dd.kome p { text-indent: -12px; margin-left: 25px;}
.txtArea .list dd.kome p:before { margin-right: 5px;}
.txtArea.ingredients { padding: 60px 0 100px 0;}
.txtArea.other { padding: 0 0 100px 0;}
}

/*==================================
	footer
==================================*/
.ft_copy { margin-top: 0; position: relative;}
.ft_copy .link { left: 10%; position: absolute; top: 25%;}
.ft_copy .link a { font-size: 3.2vw;  padding-left: 3.6vw; background: url("../img/ft_icon_wh.png") left center no-repeat; background-size: 2vw 2vw; color: #fff;}
@media screen and (min-width: 650px) {
.ft_copy .link {  top: 20px;}
.ft_copy .link a { font-size: 20.8px; padding-left: 24px; background-size: 14px 14px;}
}

/*==================================
	pageTop
==================================*/
.m-pageTop {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: block;
	width: 100%;
	max-width: 1200px;
	height: 1px;
	margin: 0 auto;
	overflow: visible;
}
.m-pageTop.fixed {
	position: fixed;
	inset: auto 0 0;
	margin: 0 auto;
}
.m-pageTop.fixed .m-pageTop_btn {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	margin: 0 10px 10px 0;
}
@media all and (min-width: 1400px) {
.m-pageTop.fixed .m-pageTop_btn {
	margin-right: -90px;
}
}
.m-pageTop.active .m-pageTop_btn {
	opacity: 1;
}
.m-pageTop_btn {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 50px;
	height: 50px;
	margin-right: 10px;
	color: #fff;
	background-image: linear-gradient(180deg, rgba(103, 110, 113, 0.5) 0, rgba(63, 66, 67, 0.5) 100%);
	border: 1px solid #fff;
	border-radius: 6px;
	opacity: 0;
	transition: all 0.3s 0s ease !important;
}
.m-pageTop_btn:hover {
	background-image: linear-gradient(180deg, #676e71 0, #3f4243 100%);
}
.m-pageTop_btn a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	padding: 30px 0 0;
	color: #fff;
	text-align: center;
}
.m-pageTop_btn a::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: inline-block;
	width: 0;
	height: 0;
	margin: 20px auto 0;
	content: "";
	border-style: solid;
	border-width: 0 9px 9px 9px;
	border-color: transparent transparent #fff transparent;
}
@media all and (min-width: 1400px) {
.m-pageTop_btn {
	margin-right: -90px;
}
}
.m-pageTop_atxt {
	display: none;
	font-size: 11px;
	font-size: 0.6875rem;
	font-weight: 700;
}