/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 21 2025 | 04:28:36 */
/*PC:～992px / tablet:991～768px / レスポンシブ:780px (完全sp:767px～)*/
/*コンテンツ横幅 1140px (内訳:1110px padding-left:15px padding-right:15px)*/
/*Origin Ⅱ (Bootstrap4)*/

/*==============================================================
共通
==============================================================*/
/*----------------------------------------------------
見出し
----------------------------------------------------*/
.mainSection-title, h2, h3, h4, h5, h6 {margin: 0;}
h1, h2, h3, h4 {font-family: 'Noto Serif JP', sans-serif;}
h3:after {content:none;}
/*----------------------------------------------------
見出し / h2
----------------------------------------------------*/
h2.desi01 {margin:0; padding:0; border:none; 
	font-weight:400; line-height:1.6; font-size:clamp(1.6rem, 0.368rem + 2.53vw, 3.4rem);}
/*----アンダーライン01----*/
.uline01 {background:linear-gradient(rgba(255, 255, 255, 0) 65%, 
	#fff7a0 65%, #fff7a0 95%, rgba(255, 255, 255, 0) 95%);}
/*----アンダーライン02----*/
.uline02 {background:linear-gradient(rgba(255, 255, 255, 0) 65%, 
	#a382c7 65%, #a382c7 95%, rgba(255, 255, 255, 0) 95%);}
/*----アンダーライン03----*/
.uline03 {background:linear-gradient(rgba(255, 255, 255, 0) 65%, 
	#a1e4f7 65%, #a1e4f7 95%, rgba(255, 255, 255, 0) 95%);}
/*----見出しの中にロゴ----*/
.tit_img {position:relative; z-index:1; top:-8px;} 
.tit_img img {width:22vw; max-width:320px; height:auto;}
/*----見出しの中にロゴ（sp時）----*/
@media screen and (max-width:780px) {.tit_img img {width:180px;}}
/*----------------------------------------------------
見出し / h3
----------------------------------------------------*/
h3.desi01 {margin:0; padding:0; background-color:transparent; border:none; 
	font-weight:400; line-height:1.6; font-size:clamp(1.5rem, 1.021rem + 0.98vw, 2.2rem);}
/*----------------------------------------------------
見出し / h4
----------------------------------------------------*/
h4.desi01 {margin:0; padding:0; border:none; 
	font-weight:400; line-height:1.6; font-size:clamp(1.3rem, 0.821rem + 0.98vw, 2rem);}
/*----------------------------------------------------
配合成分
----------------------------------------------------*/
.step_seibun {padding:16px; background-color:#EFEFEF; line-height:1.9; font-size:0.9rem;}
.step_seibun p:last-child {margin-bottom:0;}
/*----------------------------------------------------
ちょっと大きめメッセージ
----------------------------------------------------*/
.main_mess {font-size:clamp(1rem, 0.589rem + 0.84vw, 1.6rem);}
/*----------------------------------------------------
小さめのメッセージ
----------------------------------------------------*/
.mess01 {font-size:clamp(1rem, 0.795rem + 0.42vw, 1.3rem);}
/*----------------------------------------------------
明朝体
----------------------------------------------------*/
.min {font-family: 'Noto Serif JP', sans-serif;}

/*==============================================================
01_top（トップ）
==============================================================*/
/*----------------------------------------------------
見出し
----------------------------------------------------*/
h2.main_tit {margin:0; padding:0; border:none; 
	font-weight:400; line-height:1.6; font-size:clamp(1.8rem, 0.842rem + 1.96vw, 3.2rem);}
/*----------------------------------------------------
背景
----------------------------------------------------*/
#top {background-image:url(/wp-content/uploads/bg_top_m2lp2_02.jpg); 
	background-repeat:no-repeat; background-position:center bottom; background-size:cover;}

/*==============================================================
02_tokkyo（特許）
==============================================================*/
.sha_white img {box-shadow:0 0 20px 10px rgba(255, 255, 255, 1);}
/*----------------------------------------------------
背景01
----------------------------------------------------*/
#tokkyo {background-color:#e4e4e4;
	background-image:url(/wp-content/uploads/bg_tokkyo01_m2lp2_01.jpg);
	background-repeat:no-repeat; background-position:center top; background-size:100% auto;}
/*----------------------------------------------------
背景02
----------------------------------------------------*/
#tokkyo02 {
	background-image:url(/wp-content/uploads/bg_tokkyo02_m2lp2_01.png);
	background-repeat:no-repeat; background-position:center bottom; background-size:100% auto;}
/*----sp時----*/
@media screen and (max-width:780px) {
	#tokkyo02 {background-position:center center; background-size:150% auto;}}

/*==============================================================
03_point（ポイント）
==============================================================*/
/*----------------------------------------------------
ポイントの説明文の後ろのデカい数字
----------------------------------------------------*/
.point_txt {position:relative; z-index:10;}
.point_num {position:absolute; z-index:9; right:12%; top:-80%; 
	line-height:1; font-weight:400; font-style:italic;
	font-family: 'Noto Serif JP', sans-serif; color:#00000026;
	font-size:clamp(14rem, 4.421rem + 19.65vw, 28rem);}
/*----------------------------------------------------
画像を平行四辺形に
----------------------------------------------------*/
.point_img img {clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);}
/*----sp時----*/
@media screen and (max-width:780px) {
	.point_img img {margin-top:32px; clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);}}
/*----------------------------------------------------
背景
----------------------------------------------------*/
#point {
	background-image:url(/wp-content/uploads/bg_point_m2lp2_03.jpg); 
	background-repeat:no-repeat; background-position:center top; background-size:cover;}

/*==============================================================
04_seibun（成分）
==============================================================*/
/*----------------------------------------------------
リスト / 成分のポイント
----------------------------------------------------*/
.li_point_seibun {display:flex; flex-wrap:nowrap; justify-content:center; column-gap:48px;}
/*----tab時----*/
@media screen and (max-width:991px) {.li_point_seibun {column-gap:24px;}}
/*----sp時----*/
@media screen and (max-width:780px) {.li_point_seibun {column-gap:16px;}}
/*----------------------------------------------------
リスト / 成分
----------------------------------------------------*/
/*----親----*/
.li_seibun {display: flex; flex-direction: column; row-gap: 32px; 
	background-color:#fff; padding:32px; border-radius:8px; box-shadow:0 0 8px #abafaa;}
/*----子----*/
.seibun_ch {display:flex; flex-wrap:wrap; align-items:center; column-gap:32px; row-gap:32px;
	padding:0 0 32px 0; border-bottom:1px solid;}
.li_seibun .seibun_ch:last-child {padding:0 0 0 0; border-bottom:none;}
.seibun_img {width:16%;}
.seibun_txt {width:calc(100% - 32px - 16%);}
/*----sp時----*/
@media screen and (max-width:780px) {
	.seibun_ch {flex-direction:column; padding:0 0 24px 0;}
	.seibun_img {width:50%;}
	.seibun_txt {width:100%;}}
/*----------------------------------------------------
背景
----------------------------------------------------*/
#seibun {position:relative; overflow:hidden;
	background-color:#DCE3DB;
	background-image:url(/wp-content/uploads/bg_seibun_m2lp2_02.jpg); 
	background-repeat:no-repeat; background-position:left top; background-size:100% auto;}
/*----sp時----*/
@media screen and (max-width:780px) {
	#seibun {background-position:left -64px top; background-size:120% auto;}}
/*----after----*/
#seibun:after {position:absolute; z-index:1;content:""; right:-6%; top:-8%; width:50%; height:100%;
	background-image:url(/wp-content/uploads/bg_extract_m2lp2_01.png); 
	background-repeat:no-repeat; background-position:right top; background-size:100% auto;}
/*----after / sp時----*/
@media screen and (max-width:780px) {#seibun:after {top:-6%; width:60%;}}

/*==============================================================
05_voice（お客様の声）
==============================================================*/
/*----------------------------------------------------
リスト / 使用者の感想・レビュー
----------------------------------------------------*/
/*----親----*/
.li_voice {display:flex; flex-wrap:nowrap; align-items:center;}
/*----子（キャラ）----*/
.voice_chara {width:25%;}
.voice_chara img {width:50%; margin:0 auto;}
/*----子（キャラ）/ sp時----*/
@media screen and (max-width:780px) {
	.voice_chara {margin-bottom:0;}
	.voice_chara img {width:100%;}}
/*----子（メッセージ）----*/
.voice_mess {position:relative; z-index:1; width:75%; margin: 0;
	font-family:'Noto Serif JP', sans-serif; font-size:clamp(1.2rem, 0.727rem + 0.97vw, 1.4rem);}
.voice_mess p {position:relative; z-index:10;}
.voice_mess.fr_r {padding:32px 48px 32px 88px;}
.voice_mess.fr_l {padding:32px 88px 32px 48px;}
/*----子（メッセージ）/ sp時----*/
@media screen and (max-width:780px) {
	.voice_mess.fr_r {padding:32px 24px 32px 40px;}
	.voice_mess.fr_l {padding:32px 40px 32px 24px;}}
/*----三角形（before）----*/
.voice_mess:before {position:absolute; z-index:4; content:""; width:96px; height:32px; background-color:#f9f2bd;}
.voice_mess.fr_r:before {right:-8%; top:50%; transform:translatey(-50%); clip-path: polygon(0 20%, 100% 0, 0 100%);}
.voice_mess.fr_l:before {left:-8%; top:50%; transform:translatey(-50%); clip-path: polygon(100% 20%, 0 0, 100% 100%);}
/*----フキダシ01（前面）----*/
.voice_fuki1 {position:absolute; z-index:3; content:""; left:0; top:0; width:100%; height:100%; background-color:#f9f2bd;}
.voice_mess.fr_r .voice_fuki1 {clip-path:polygon(10% 0, 100% 10%, 95% 90%, 0% 100%);}
.voice_mess.fr_l .voice_fuki1 {clip-path: polygon(0 10%, 90% 0, 100% 100%, 5% 90%);}
/*----フキダシ02（背面）----*/
.voice_fuki2 {position:absolute; z-index:2; content:""; left:0; top:0; width:100%; height:100%; background-color:#f3d9a6;}
.voice_mess.fr_r .voice_fuki2 {clip-path:polygon(10% 0, 100% 10%, 95% 90%, 0% 100%); transform:rotate(4deg);}
.voice_mess.fr_l .voice_fuki2 {clip-path: polygon(0 10%, 90% 0, 100% 100%, 5% 90%); transform:rotate(-4deg);}
/*----------------------------------------------------
背景
----------------------------------------------------*/
#voice {
	background-image:url(/wp-content/uploads/bg_voice_m2lp2_08.jpg); 
	background-repeat:no-repeat; background-position:center bottom; background-size:100% auto;}
/*----sp時----*/
@media screen and (max-width:780px) {#voice {background-size:200% auto;}}

/*==============================================================
06_usage（使用方法使用方法）
==============================================================*/
/*----------------------------------------------------
タイトル / 使用方法　おすすめの使い方
----------------------------------------------------*/
.osusume_tit {color:#fff; background-color:#4e4569;}
.osusume {padding:16px 0; position:relative; z-index:1;}
.osusume_img {position:absolute; z-index:100; left:0; bottom:0; width:100%; text-align:left;}
.osusume_img img {width:25vw; max-width:340px; height:auto;}
/*----sp時----*/
@media screen and (max-width:780px) {
	.osusume_img {bottom:100%; text-align:center;}
	.osusume_img img {width:50vw; max-width:280px;}}
/*----------------------------------------------------
背景 / 使用方法
----------------------------------------------------*/
.use_bg {
	background-image:url(/wp-content/uploads/use_bg_m2lp2_01.jpg); 
	background-repeat:no-repeat; background-position:center bottom; background-size:100% auto;}
/*----sp時----*/
@media screen and (max-width:780px) {.use_bg {background-size:400% auto;}}

/*==============================================================
07_sinrai（バイオX株式会社の信頼）
==============================================================*/
/*----------------------------------------------------
タイトル / バイオX株式会社の特許技術を採用
----------------------------------------------------*/
.main_sinrai {position:relative; z-index:1;}
.sinrai_tit {position:absolute; z-index:2; width:100%;
	left:50%; top:6%; transform:translatex(-50%); color:#fff;}
/*----------------------------------------------------
ロゴ / バイオX株式会社
----------------------------------------------------*/
.logo_biox {position:relative; z-index:200; 
	display:table; margin:-143px auto 0;
	clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0% 50%);}
.logo_biox img {width:400px; height:auto;}
/*----sp時----*/
@media screen and (max-width:780px) {
	.logo_biox {margin:-126px auto 0;}
	.logo_biox img {width:260px;}}
/*----------------------------------------------------
フレーム / バイオX株式会社について
----------------------------------------------------*/
.fr_biox {position:relative; z-index:200; width:110%; min-height:170px; padding:32px; 
	clip-path: polygon(5% 0, 100% 0, 100% 85%, 95% 100%, 0 100%, 0 15%);}
/*----sp時----*/
@media screen and (max-width:780px) {
	.fr_biox {width:100%;  min-height:120px; padding:16px; 
		clip-path: polygon(0% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0%);}}
/*----カラバリ----*/
.fr_biox.c01 {color:#324472; background-color:#c1d2ea;}
.fr_biox.c02 {color:#fff; background-color:#324472;}
/*----位置----*/
.fr_biox.posi_l {margin-left:10%;}
.fr_biox.posi_r {margin-left:-20%;}
/*----位置 / sp時----*/
@media screen and (max-width:780px) {
	.fr_biox.posi_l {margin-left:0;}
	.fr_biox.posi_r {margin-left:0;}}
/*----------------------------------------------------
画像 / バイオX株式会社について
----------------------------------------------------*/
.biox_img {clip-path: polygon(5% 0, 100% 0, 100% 85%, 95% 100%, 0 100%, 0 15%);}
/*----------------------------------------------------
背景 / バイオX株式会社について
----------------------------------------------------*/
.biox_bg {
	background-color:#000;
	background-image:url(/wp-content/uploads/biox_bg_m2lp2_02.jpg); 
	background-repeat:no-repeat; background-position:center top; background-size:100% auto;}
/*----sp時----*/
@media screen and (max-width:780px) {.biox_bg {background-size:260% auto;}}

/*==============================================================
07_1_secret
==============================================================*/
/*----------------------------------------------------
リスト / 性能
----------------------------------------------------*/
.li_seinou {list-style:none; padding-left:0;}
.li_seinou>li {margin:0 0 4px 0; padding:0 0 0 34px; 
	background-image:url(/wp-content/uploads/icn_check_01.png); 
	background-repeat:no-repeat; background-position:left top; background-size:28px 28px;}

/*==============================================================
08_media（メディア）
==============================================================*/
/*----------------------------------------------------
タイトル画像
----------------------------------------------------*/
.tit_media img {width:30vw; height:auto; max-width:560px;}
/*----sp時----*/
@media screen and (max-width:780px) {.tit_media img {width:60vw;}}
/*----------------------------------------------------
フレーム / 掲載・紹介メディア
----------------------------------------------------*/
.fr_media {padding:32px; background-color:#fff; border-radius:16px;}
/*----sp時----*/
@media screen and (max-width:780px) {.fr_media {padding:16px; border-radius:8px;}}
/*----------------------------------------------------
背景
----------------------------------------------------*/
#media {
	background-color:#000;
	background-image:url(/wp-content/uploads/bg_media_m2lp2_01.jpg); 
	background-repeat:no-repeat; background-position:center top; background-size:cover;}

/*==============================================================
09_faq
==============================================================*/
/*----------------------------------------------------
背景
----------------------------------------------------*/
#faq {background-image:url(/wp-content/uploads/bg_faq_01.jpg); 
	background-repeat:no-repeat; background-position:center top; background-size:cover;
	background-attachment:fixed;}
/*----sp時----*/
@media screen and (max-width:780px) {#faq {background-attachment:scroll;}}
/*----------------------------------------------------
リスト / faq
----------------------------------------------------*/
.li_faq {position:relative; display:flex; flex-wrap:nowrap; 
	margin:0 auto 0px; padding:48px 16px 48px 64px; width:84%;}
/*----tab時----*/
@media screen and (max-width:991px) {.li_faq {width:100%;}}
/*----sp時----*/
@media screen and (max-width:780px) {.li_faq {padding:24px 8px 24px 32px;}}
/*----after----*/
.li_faq:after {position:absolute; content:""; z-index:1; left:0; top:0; 
	width:100%; height:100%; background-color:#effeff; 
	clip-path: polygon(91% 0, 100% 29%, 96% 69%, 42% 100%, 5% 89%, 0% 60%, 7% 11%);}
/*----アイテム（文章）----*/
.faq_mess {position:relative; z-index:2; width:80%;}
/*----アイテム（バストアップ）----*/
.faq_chara {position:absolute; z-index:3; right:-2%; top:-12%; width:20%;}
/*----sp時----*/
@media screen and (max-width:780px) {
	.faq_mess {width:76%;}
	.faq_chara {right:-4%; top:-2%; width:28%;}}
/*----Q----*/
.mess_q {font-family: 'Noto Serif JP', sans-serif; font-size:clamp(1.2rem, 0.018rem + 2.42vw, 1.7rem); 
	margin:0; padding:16px 0px 16px 10%; border-bottom:1px dotted;
	background-image:url(/wp-content/uploads/icn_faq_m2lp2_01_01.png); 
	background-repeat:no-repeat; background-position:left center; background-size:8% auto;}
/*----A----*/
.mess_a {font-size:clamp(1rem, 0.527rem + 0.97vw, 1.2rem); 
	padding:16px 0px 16px 10%; 
	background-image:url(/wp-content/uploads/icn_faq_m2lp2_02_01.png); 
	background-repeat:no-repeat; background-position:left center; background-size:8% auto;}

/*==============================================================
99_shop
==============================================================*/
/*----------------------------------------------------
ラベル
----------------------------------------------------*/
/*----親----*/
.label_shop {display:flex; flex-wrap:wrap; width:100%;}
/*----子----*/
.label_shop .lb01, .label_shop .lb02 {
	display:flex; align-items:center; font-weight:400; color:#fff;
	font-family: 'Noto Serif JP', sans-serif; font-size:clamp(1.2rem, 0.653rem + 1.12vw, 2rem);}
.label_shop .lb01 {position:relative; width:44%; padding:16px 0 16px 12%; background-color:#555;}
.label_shop .lb02 {position:relative; width:56%; padding:16px 12% 16px 32px; background-color:#ACA76F;}
.label_shop .lb02.full {display:block; width:100%; padding:16px 16px 16px 16px; text-align:center;}
/*----lb01 細分----*/
.label_shop .lb01 div:nth-child(1) {width:30%; padding:0 16px; display:inline-block;}
.label_shop .lb01 div:nth-child(2) {width:70%;}
.label_shop .lb01:after {
	position:absolute; content:""; z-index:2; right:-15px; top:0; width:16px; height:100%;
	background-color:#555; clip-path: polygon(10% 0, 100% 50%, 10% 100%, 0 100%, 0 0);}
/*----sp時----*/
@media screen and (max-width:780px) {
	.label_shop .lb01 {width:100%; padding:16px 0;}
	.label_shop .lb01 div:nth-child(1) {width:20%;}
	.label_shop .lb01 div:nth-child(2) {width:70%;}
	.label_shop .lb01:after {right:auto; top:auto; left:0; bottom:-15px; width:100%; height:16px; 
		clip-path: polygon(50% 100%, 100% 10%, 100% 0%, 0% 0%, 0 10%);}
	.label_shop .lb02 {width:100%; padding:32px 16px 16px; text-align:center; justify-content:center;}
	.label_shop .lb02:after {
		position:absolute; content:""; z-index:2; left:0; bottom:-15px; width:100%; height:16px; 
		background-color:#ACA76F; clip-path: polygon(50% 100%, 100% 10%, 100% 0%, 0% 0%, 0 10%);}}
/*----------------------------------------------------
商品の内容
----------------------------------------------------*/
.item_info {position:relative; z-index:1; 
	background-color:#ffffffdb; padding:96px 32px 96px;}
/*----アイテム（無添加国産）----*/
.mutenka {position:absolute; z-index:20; width:26%; max-width:198px; right:-2%; top:-8%;}
/*----sp時----*/
@media screen and (max-width:780px) {.item_info {padding:32px 32px 96px;}}
/*----------------------------------------------------
ボタン
----------------------------------------------------*/
.btn_shop {position:relative; z-index:10; top:-72px;}
.btn_shop a {display:block; width:600px; 
	margin:0 auto; padding:16px 8px; font-size:1.6rem; text-align:center; 
	color:#fff; background-color:#000; border-radius:50vw; outline:#000 dotted 4px; outline-offset:4px;}
.btn_shop a:hover {background-color:#9e0000; outline:#9e0000 dotted 4px; text-decoration:none;}
/*----アイコン----*/
.btn_shop span {display:inline-block; margin:0 8px 4px 0; vertical-align:middle;}
/*----sp時----*/
@media screen and (max-width:780px) {
	.btn_shop {top:-60px;}
	.btn_shop a {width:90%; font-size:1rem;}
	.btn_shop img {width:28px; height:auto;}}
/*----------------------------------------------------
背景
----------------------------------------------------*/
#shop_info {padding:128px 0 32px; background-color:#fdeafd;
	background-repeat:no-repeat; background-size:contain;}
/*----バリエーション----*/
#shop_info.c01 {background-image:url(/wp-content/uploads/bg_shop_m2lp2_01_02.jpg); background-position:left -128px top;}
#shop_info.c02 {background-image:url(/wp-content/uploads/bg_shop_m2lp2_02_02.jpg); background-position:left -128px top;}
/*----sp時----*/
@media screen and (max-width:780px) {
	#shop_info {padding:200px 0 32px; background-size:200% auto;}
	#shop_info.c01 {background-position:left top;}
	#shop_info.c02 {background-position:left top;}}