@charset 'UTF-8';


/* ================================================================================

	全体の【背景色】

================================================================================ */

body,
.base-bg {
	background-color: #f9fff9;
}



/* ================================================================================

	全体の【文字色】

================================================================================ */

body,
.pointer-events,
.fax_num {
	color: #222222;
}

/* SNSアイコン色 */
.f_sns ul li a svg path,
.f_sns ul li a svg circle {
	fill: #222222;
}



/* ================================================================================

	ナビゲーション

================================================================================ */

/* ナビ背景色 */
.navi_content {
	background-color: rgba(255, 255, 255, 0.3);
}

/* ロゴ */
.navi_content a .navi_logo,
.sp_logo_in {
	color: #222222;
}

/* ナビゲーション */
.main_navi > ul > li > a {
	color: #444444;
}

/* ナビゲーションサブタイトル */
.main_navi a span {
	color: #444444;
}


/* ナビゲーション スクロール後 */
.navi_scroll {
	background-color: rgba(255, 255, 255, 0.8);
}
.navi_scroll .main_navi > ul > li > a {
	color: #222222;
}
.navi_scroll .main_navi > ul > li > a span {
	color: #e9dfbc;
}


/* ハンバーガーボタンの三本線 */
.trigger span,
.trigger span:nth-of-type(2)::after {
	background-color: #222222;
}

/* ハンバーガーの閉じるボタン「×」の色 */
.pushy-open-left .site-overlay p,
.pushy-open-right .site-overlay p {
	color: #222222;
}



/* ================================================================================

	メイン画像

================================================================================ */

/* PCのh1文字色 */
.pc_h1 {
	color: #000000;
	text-shadow: 0px 0px 0.1em rgba(0,0,0,0.3);
}

/* 各ページメイン画像のタイトル文字色 */
.m-cate_wrap_in h2 {
	color: #222222;
	text-shadow: 0px 0px 0.1em rgba(0,0,0,0.3);
}



/* ================================================================================

	共通のスクロールバーカラー

================================================================================ */

/* firefox用 */
html {
	scrollbar-color: #e9dfbc #f1f1f1; /* サム(つまみ)カラー トラックカラー */
}

/* スクロールバーのサム(つまみ)カラー */
::-webkit-scrollbar-thumb {
	background-color: #e9dfbc;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #e9dfbc;
}

/* スクロールバーのトラックカラー */
::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}



/* ================================================================================

	キーカラー1
	
	.key01-bg　背景色と文字色(キーカラー1に対する見やすい色)
	.key01-text　文字色がキーカラー1

================================================================================ */

/* キーカラー1で敷き詰めた背景と文字色(キーカラー2に対する見やすい色) 等 */
.key01-bg,
.key01-bg a,
.title_top h2:after,
.title_cate_h2 h2:after,
.access_table02 th:after,
.btn_submit input[type="submit"],
.blog_tag a,
.wp-pagenavi span.current,
.wp-pagenavi span.extend,
.wp-pagenavi span.pages,
.wp-pagenavi a:hover,
.contact_f7 input[type="radio"]:checked + .wpcf7-list-item-label:before {
	background-color: #e9dfbc;
	color: #222222;
}

/* ラジオボタン色 */
.contact_f7 input[type="radio"]:checked + .wpcf7-list-item-label:before {
	border-color: #e9dfbc;
}

/* リンク色 */
a {
	color: #f14c00;
}

/* ページトップボタン */
#page_top a svg path,
#page_top a svg circle  {
	fill: #f14c00;
}

/* 見出しの装飾 */
.key01-bg .title_top h2:after,
.key01-bg .title_cate_h2 h2::after,
.key01-bg .f_contact_in h2:after {
	background-color: #222222;
}


/* SP設定 */
@media (max-width: 767px) {
	.key01-bg-sp,
	.key01-bg-sp a {
		background-color: #e9dfbc;
		color: #222222;
	}
	.key01-bg-sp .title_top h2:after {
		background-color: #1c00f1;
	}
}



/* ================================================================================

	キーカラー2
	
	.key02-bg　背景色と文字色(キーカラー2に対する見やすい色)
	.key02-text　文字色がキーカラー2

================================================================================ */

/* キーカラー2で敷き詰めた背景と文字色(キーカラー2に対する見やすい色) 等 */
.key02-bg,
.key02-bg a,
.q_text,
.wp-pagenavi a,
.wp-pagenavi span {
	background-color: #f9fff9;
	color: #222222;
}

/* 見出しの装飾 */
.key02-bg .title_top h2:after,
.key02-bg .title_cate_h2 h2::after {
	background-color: #222222;
}


/* SP設定 */
@media (max-width: 767px) {
	.key02-bg-sp,
	.key02-bg-sp a {
		background-color: #f9fff9;
		color: #222222;
	}
}



/* ================================================================================

	CTAボタン / エリア

================================================================================ */
/*    CTAデザイン    */
.cta-area{
	width: 100%;
	border-radius: 12px;
	background: #FFF;
	padding: 8px;
}
.cta-area .cta-area-inner{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding-block: 40px;
	border-radius: 9px;
	box-shadow: 0 0 0 1px #A67B4E;
}
@media (max-width: 767px){
	.cta-area .cta-area-inner{
		padding: 2em 1em;
	}
}
.cta-area .cta-area-inner h3{
	color: #A67B4E;
}
@media (max-width: 767px){
	.cta-area .cta-area-inner h3{
		width: 80%;
	}
}
.cta-area .cta-area-inner p{
	margin: 0;
	text-align: center;
}

/* リンクボタン */
.link-trial{
	margin-top: 1vw;
	text-align: center;
	margin-top: 10px;
}
.link-trial a {
	background: #E93F68 !important;
	border: solid 3px #E93F68 !important;
	border-radius: 50vw;
	box-shadow: inset 0 0 0 2px #fff;
	position: relative;
	display: inline-block;
	padding: 0.8em 4em;
	color: #fff !important;
	font-size: 1.25vw;
	font-weight: 700;
	font-family: 'Open Sans Condensed' ,'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
	letter-spacing: 0.1em;
	line-height: 1;
	text-align: center;
}
@media (max-width: 767px){
	.link-trial a{
		padding: 1em 2em;
		font-size: min(4vw, 16px);
	}
}

/* ================================================================================

	蒟蒻だから リニューアル

================================================================================ */
.product-info{
	padding: 60px 0;
	background: url(../img/top_company.jpg) no-repeat center / cover;
}

.page-commodity .outer_wrap{
	padding-top: 0;
}


/*    商品紹介レイアウト    */
/* --- レイアウトの核となるコンテナ --- */
.layout-container {
	width: 100%;
	display: grid;
	gap: 20px; /* パーツ間の隙間 */
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 0 0;
}
.layout-container p + *{
	margin-top: unset;
}

/* --- 各パーツの共通スタイル --- */
.box {
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	min-height: 100px; /* 見た目のため */
}
/* A: 左側のコンテンツ */
.content-main {
	/* 名前をつける */
	grid-area: area-main;
}
/* B: 右上のコンテンツ */
.content-sub-top {
	/* 名前をつける */
	grid-area: area-sub-top;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}
.content-sub-top p{
	font-size: min(4vw,24px);
}
/* C: 右下のコンテンツ */
.content-sub-bottom {
	/* 名前をつける */
	grid-area: area-sub-bottom;
}


@media (min-width: 768px) {
	.layout-container {
		grid-template-columns: 1fr 1.5fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"area-main area-sub-top"
			"area-main area-sub-bottom";
	}
	.content-sub-top img{
		width: 80%;
	}
}

@media (max-width: 767px) {
	.layout-container {
		/* 1列にする */
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		/* エリア定義は不要（Flexboxのorderでも可だが、Gridでも並び替え可能） */
		display: flex;
		flex-direction: column;
	}
	/* --- 順序の指定 (order) --- */
	/* 1. 右上のコンテンツを一番上に */
	.content-sub-top {
		order: 1;
	}
	/* 2. 左側のメインコンテンツを真ん中に */
	.content-main {
		order: 2;
		width: 60%;
        margin: auto;
	}
	/* 3. 右下のコンテンツを一番下に */
	.content-sub-bottom {
		order: 3;
	}
}

/*    こんなお悩みありませんか？    */
.sec_trouble.elementor-section-boxed > .elementor-container{
	max-width: 100%;
}
.sec_trouble img {
	width: 100%;
}
.sec_trouble .sec_trouble--copy{
	width: 100%;
}
.sec_trouble .sec_trouble--copy .sec_trouble--copy-text{
	margin-top: 0;
	background: #D9D9D9;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 60px 0;
	color: #606060;
	font-size: 32px;
	font-weight: 700;
	text-align: center;
}
@media (max-width: 767px){
	.sec_trouble .sec_trouble--copy .sec_trouble--copy-text{
		padding: 5vw 0;
	}
}
.sec_trouble .sec_trouble--copy .sec_trouble--copy-text p{
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
@media (max-width: 767px){
	.sec_trouble .sec_trouble--copy .sec_trouble--copy-text p{
		font-size: 5vw;
	}
}
.sec_trouble .sec_trouble--copy span.deco-arrow{
	display: block;
	margin-inline: auto;
	position: relative;
	/* top: -46px; */
	width: 0;
	height: 0;
	border-top: 46px solid #d9d9d9;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
}
.sec_trouble .sec_trouble--copy span.sec_trouble--copy-text-highlight{
	position: relative;
	display: inline-block;
}
.sec_trouble .sec_trouble--copy span.sec_trouble--copy-text-highlight::before{
	content: "・・・・";
	position: absolute;
	top: -0.8em;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.6em;
	letter-spacing: 0.4em;
	color: #606060;
}

.point-list{
	display: flex;
	justify-content: center;
	gap: 10px;
}
@media (max-width: 767px){
	.point-list{
		flex-direction: column;
	}
}
.dot-list {
	list-style: none;
	padding-left: 0;
  }
  
  .dot-list li {
	position: relative;
	padding-left: 1em;   /* ・の分 */
	margin-bottom: 8px;
  }
  
  .dot-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
  }
/* ================================================================================

	原材料・成分 / 栄養成分

================================================================================ */
.nutrition-section {
    padding: 60px 0;
}

.nutrition-section__inner {
    display: flex;
    gap: 40px;
    align-items: stretch;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}
.nutrition-section__block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 480px;
}
@media (max-width: 767px){
	.nutrition-section__block{
		gap: 8px;
	}
}


.nutrition-section__title {
    margin: 0;
    color: #222222;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-align: center;

    width: 100%;
    min-height: 3.2em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.ingredients-card {
    width: 100%;
    padding: 8px 16px;
    background-color: #ffffff;
    border: 1px solid #79b5ac;
    border-radius: 12px;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ingredients-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
}

.ingredients-card__item {
    padding: 8px 0;
    text-align: center;
    color: #222222;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.4;
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ingredients-card__item + .ingredients-card__item {
    border-top: 1px dotted #79b5ac;
}

.nutrition-table {
    display: grid;
    grid-template-columns: 200px 1fr;
    width: 100%;
    border: 1px solid #79b5ac;
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffffff;
    flex-grow: 1;
}

.nutrition-table__label,
.nutrition-table__value {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
}

.nutrition-table__label {
    background-color: #79b5ac;
    color: #ffffff;
	border-bottom: 1px solid #ffffff;
    padding: 0 8px;
}
.nutrition-table__label:nth-last-child(2),
.nutrition-table__value:last-child {
	border-bottom: none;
}

.nutrition-table__value {
    background-color: #ffffff;
    color: #222222;
    border-bottom: 1px solid #d9d9d9;
}

.nutrition-table__label--tall,
.nutrition-table__value--tall {
    height: 56px;
    border-bottom: none;
}

.nutrition-table__label--tall span {
    display: block;
    font-size: 0.8em;
}

/* SP設定 */
@media (max-width: 767px) {
    .nutrition-section {
        padding: 40px 0;
    }
    .nutrition-section__inner {
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
    }
    .nutrition-section__block {
        width: 100%;
    }
    .nutrition-section__title {
        font-size: 18px;
        min-height: auto;
    }
    .ingredients-card__item,
    .nutrition-table__label,
    .nutrition-table__value {
        font-size: 14px;
        letter-spacing: 0.6px;
    }
    .nutrition-table {
        grid-template-columns: 46% 54%;
    }
}

/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.nutrition-section {
		padding: 40px 0;
	}
	.nutrition-section__inner {
		flex-direction: column;
		gap: 24px;
		align-items: stretch;
	}
	.nutrition-section__block {
		width: 100%;
	}
	.nutrition-section__title {
		font-size: 18px;
	}
	.ingredients-card__item,
	.nutrition-table__label,
	.nutrition-table__value {
		font-size: 14px;
		letter-spacing: 0.6px;
	}
	.nutrition-table {
		grid-template-columns: 46% 54%;
	}
}

/* ================================================================================

	フッターお問い合わせ表示
	※非表示にしたい場合はコメントアウトをはずしてください。

================================================================================ */

/* 電話
------------------------------------------- */

/*
.f_contact ul li:nth-of-type(1) {
	display: none;
}
*/


/* メール
------------------------------------------- */

/*
.f_contact ul li:nth-of-type(1) {
	border: none;
	padding-bottom: 0;
}
.f_contact ul li:nth-of-type(2) {
	display: none;
}
*/



/* ================================================================================

	フッターSNSボタン表示
	※非表示にしたい場合は　inline-block　を　none　に書き換えてください。

================================================================================ */

/* Instagramボタン */
.f_sns ul li:nth-of-type(1) {
	display: inline-block;
}

/* Facebookボタン */
.f_sns ul li:nth-of-type(2) {
	display: inline-block;
}

/* Twitterボタン */
.f_sns ul li:nth-of-type(3) {
	display: inline-block;
}

/* LINEボタン */
.f_sns ul li:nth-of-type(4) {
	display: inline-block;
}

/*
.f_sns {
	display: none;
}
 */