@charset "utf-8";

/*--------------------------------------------------------------
/template/
--------------------------------------------------------------*/

div#template{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding:0;
	text-align: center;
	color: #000000;
}

/* 共通
----------------------------------- */
img {
	display: block;
	width: 100%;
	height: auto;
}

div {
	line-height: 1;
}

label {
	cursor: pointer;
}

/* 特定商取引法 位置は適宜調節
-------------------------------------------------------------- */

#tokushou {
	margin: 0 0 min(10px, calc(10 / 750 * 100vw)) 0;
	text-align: center;
    font-size: min(13px, calc(13 / 750 * 100vw));
}


/* コンテンツ
-------------------------------------------------------------- */

.content_wrap{
	width: 100%;
	margin: 0 auto;
}

/* 背景
-------------------------------------------------------------- */
#mainBg {
	position: fixed;
	background: url(../img/bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-position: center bottom;
}

/* アコーディオン
-------------------------------------------------------------- */
.js-accordion dt {
	cursor: pointer;
}


/* グラフ(カルーセル)
-------------------------------------------------------------- */
.sarani{
	padding-bottom: min(13px, calc(13 / 750 * 100vw));
	background-color: #fff8a4;
}
.sarani img{
	width: min(133px, calc(133 / 750 * 100vw));
	height: auto;
	margin: 0 auto;
}
.carousel_1 img{
	margin: 0 auto;
}
.carousel_2{
	background-color: #dff19e;
	padding-top: min(53px, calc(53 / 750 * 100vw));
	padding-bottom: 9%;
}

.graph_txt_01,.graph_txt_02{
  padding: 5.5% 12.6% 18.4%;
	font-size: min(16px, calc(16 / 750 * 100vw));
  margin: 0 auto;
  background: #fff;
  line-height: 1.2;
	text-align: left;
}

/* slick */
.slick_wrapper {
  width: min(670px, calc(670 / 750 * 100vw));
  margin: 0 auto;
  background: #fff;
}
.carousel_2 .slick_wrapper {
  padding: 2.5% 0 0;
}
.carousel_1 .slick_wrapper.is-02 .graph_txt_02 {
  padding-bottom: 15.7%;
}
.carousel_2 .slick_wrapper.is-02 .graph_txt_02 {
  padding-bottom: 12%;
}
.carousel_2 .graph_txt_01 {
  padding: 3.1% 13.2% 9.1%;
}
/* ドット */
.carousel_1 .slick-dots, .carousel_2 .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
.carousel_1 .slick-dots {
  bottom: 4%;
}
.carousel_2 .slick-dots{
	bottom: 5.7%;
}

.slick-dots li {
	display: inline-block;
}

.slick-dots button {
	display: block;
	width: min(14px, calc(14 / 750 * 100vw));
	height: min(14px, calc(14 / 750 * 100vw));
	margin: min(13px, calc(13 / 750 * 100vw));
	font-size: 0;
	padding: 0;
	border: 0;
	outline: none;
	cursor: pointer;
	background: #ded5b9;
	border-radius: 50%;
}

.slick-dots .slick-active button {
	background: #9c9898;
}

/* 矢印 */
.slick-arrow {
	position: absolute;
	width: min(35px, calc(35 / 750 * 100vw));
	top: 48%;
	cursor: pointer;
}
.carousel_2 .slick-arrow  {
  top: 45.9%;
}

.prev-arrow {
	left: 2.4%;
	z-index: 10;
}

.next-arrow {
	right: 2.4%;
	z-index: 10;
}

.slick-disabled {
	visibility: hidden;
}

/* ec
---------------------------------*/
.cv_first, .cv_normal {
  position: relative;
}
.cv_btn{
	position: absolute;
	top: min(768px, calc(768 / 750 * 100vw));
	left: 0;
	right: 0;
	width: min(603px, calc(603 / 750 * 100vw));
	margin: 0 auto;
}
#ecArea_link_2 .cv_btn{
	top: min(880px, calc(880 / 750 * 100vw));
}
.slide01_02 .cv_btn{
  top: min(435px, calc(435 / 750 * 100vw));
}
.cv_kaiin{
	position: absolute;
	bottom: min(275px, calc(275 / 750 * 100vw));
	left: 0;
	right: 0;
	width: min(508px, calc(508 / 750 * 100vw));
	margin: 0 auto;
	padding-top: min(17px, calc(17 / 750 * 100vw));
}
.cv_shop{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	position: absolute;
	top: 57%;
	right: 0;
	margin: 0 auto;
}
.cv_shop.is-02 {
  top: auto;
  bottom: 3%;
}
.cv_shop a{
  width: 41%;
}
.cv_shop a:nth-of-type(odd){
  margin-right: 1.8%;
}

/* カート用ボタン設定
---------------------------------*/

.linkSubmitNew {
	background-image: url("../img/cv_btn.png");
	width: min(618px, calc(618 / 750 * 100vw));
	height: min(142px, calc(142 / 750 * 100vw));
	padding: 0;
}

.linkSubmitMember {
	background-image: url("../img/cv_kaiin.png");
	width: min(508px, calc(508 / 750 * 100vw));
	height: min(96px, calc(96 / 750 * 100vw));
	margin-top: min(9px, calc(9 / 750 * 100vw));
	padding: 0;
}

.linkSubmitNew, .linkSubmitMember {
	cursor: pointer;
	outline: none;
	appearance: none;
	font-size: 0; line-height: 0;
	border: none;
	background-color: transparent;
	background-position: center; background-repeat: no-repeat; background-size: contain;
}


/* inquiry Area
-------------------------------------------------------------- */
.inquiryArea{
	position: relative;
}
.inquiry_btn_01 img,.inquiry_btn_02 img{
	width: min(625px, calc(625 / 750 * 100vw));
	margin: 0 auto;
}
.inquiry_btn_01{
	position: absolute;
	top: min(205px, calc(205 / 750 * 100vw));
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
}
.inquiry_btn_02{
	position: absolute;
	top: min(388px, calc(388 / 750 * 100vw));
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
}

/* 成分
---------------------------------*/
.seibun_link {
	width: min(308px, calc(308 / 750 * 100vw));
	margin-top: min(16px, calc(16 / 750 * 100vw));
}
.seibunhyoji {
	margin: min(49px, calc(49 / 750 * 100vw)) min(20px, calc(20 / 750 * 100vw));
}

.seibun {
	padding: min(30px, calc(30 / 750 * 100vw));
	text-align: center;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Arial ", sans-serif;
	font-size: min(24px, calc(24 / 750 * 100vw));
	background-color: #ffffff;
}
.seibun h1 {
	padding: min(22px, calc(22 / 750 * 100vw)) 0;
	font-size: min(28px, calc(28 / 750 * 100vw));
	font-weight: normal;
	background-color: #d4d4d4;
	border: solid 1px #d4d4d4;
}
.seibun .subtit {
	font-size: min(26px, calc(26 / 750 * 100vw));
	font-weight: bold;
	margin: min(50px, calc(50 / 750 * 100vw)) 0;
}
.seibun .hankaku {
    font-feature-settings: "palt";
}
.seibun .notes {
	font-size: min(26px, calc(26 / 750 * 100vw));
	margin-bottom: min(50px, calc(50 / 750 * 100vw));
}
.seibun .notes li {
	text-align: left;
	list-style: none;
	line-height: 1.4;
	text-indent: -1em;
	margin-left: 1em;
}
.seibun .notes li:before {
	content: "※";
}
.seibun table {
	border-collapse: collapse;
	line-height: 1.4;
	width: 100%;
}
.seibun th,
.seibun td {
	border: solid 1px #d4d4d4;

}
.seibun th {
	font-size: min(22px, calc(22 / 750 * 100vw));
	font-weight: bold;
	text-align: center;
	background-color: #eeeeee;
	padding: min(24px, calc(24 / 750 * 100vw)) ;
	width: 100%;
}
.seibun td {
	font-size: min(20px, calc(20 / 750 * 100vw));
	text-align: left;
	padding: min(23px, calc(23 / 750 * 100vw)) min(18px, calc(18 / 750 * 100vw)) ;
	width: 50%;
}
.seibun .txt_center {
	text-align: center;
}
.seibun .line {
	text-indent: -1em;
	margin-left: 1em;
	width: 100%;
}
.seibun .notes_txt {
	font-size: min(22px, calc(22 / 750 * 100vw));
	margin-top: min(8px, calc(8 / 750 * 100vw));
	text-align: left;
}

/* フッター
-------------------------------------------------------------- */
footer {
	background-color: #F5F4EF;
}
footer .guide_link  {
	margin: 0 auto;
	padding: 7% 0 0;
	width: min(calc(292 / 750 * 100vw), 292px);
}
.footer_nav {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 5%;
}

.footer_nav p {
	font-size: min(calc(21 / 750 * 100vw), 21px);
	margin-top: 2%;
	font-weight: 500;
}

.footer_nav a {
	color: #5b5b58;
}

#footer {
	margin: 0;
	padding: 5% 0 6%;
}

/* フローティング
-------------------------------------------------------------- */
.float-block {
	display: none;
	max-width: 750px;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 998;
	margin: auto;
}
.float-block.is-hidden {
  transition: .4s ease-out;
  visibility: hidden;
  opacity: 0;
}
.float-block.is-hidden a {
  pointer-events: none;
}

.float-inner {
  width: 100%;
	max-width: 750px;
	margin: 0 auto;
}

.float-close {
  display: block;
  position: relative;
  z-index: 999;
  top: min(calc(30 / 750 * 100vw), 30px);
  right: min(calc(6 / 750 * 100vw), 6px);
  width: min(calc(34 / 750 * 100vw), 34px);
  height:  min(calc(34 / 750 * 100vw), 34px);
  margin: 0 0 0 auto;
  border: min(.266666666666667vw, 2px) solid #3b3b3b;
  border-radius: 50%;
  background: #fff;
  cursor: pointer
}
.float-close::before, .float-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(3 / 750 * 100vw), 3px);
  height:  min(calc(25 / 750 * 100vw), 25px);
  background: #3b3b3b;
}
.float-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.float-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}