@charset "UTF-8";

section img {
	width: 100%;
}

.ranking.cols img {
	width: inherit;
}

main a:hover {
	opacity: 0.8;
}

body {
	font-family: ヒラギノ角ゴ Pro W3, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.c-red {
	color: #F00;
}

.c-blue {
	color: #13419F;
	font-weight: 600;
}

.c-pink {
	color: #F27885;
}

.c-green {
	color: #55AC21;
}

.c-orange {
	color: #F78B0D;
}

.oblique {
	font-style: oblique;
}

.bold {
	font-weight: bold;
}

.mgb0 {
	margin-bottom: 0 !important;
}

.mgb10 {
	margin-bottom: 10px !important;
}

.mgb20 {
	margin-bottom: 20px !important;
}

.mgb30 {
	margin-bottom: 30px !important;
}

.mgb40 {
	margin-bottom: 40px !important;
}

.mgb60 {
	margin-bottom: 60px !important;
}

.mgb80 {
	margin-bottom: 80px !important;
}

.pdb20 {
	padding-bottom: 20px !important;
}

.pds20 {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

main p {
	font-size: 18px;
}

.font12 {
	font-size: 12px !important;
	vertical-align: middle;
}

.font14 {
	font-size: 14px !important;
}

.font16 {
	font-size: 16px;
}

.font20 {
	font-size: 20px;
}

.font24 {
	font-size: 24px;
}

.center {
	text-align: center;
}

.border-btm {
	border-bottom: solid 1px #E6E6E6;
	display: inline-block;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-size: 14px;
}

.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

@media (max-width: 768px) {
	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}
}

/*============
ファーストビュー
==============*/
#first-view {
	width: 960px;
}

#first-view img {
	width: 100%;
}

.main-top {
	margin: 0 0 40px 0;
}

/*============
リニューアル
==============*/

#renewal {
	margin: auto;
	width: 580px;
	margin-bottom: 53px;
}

#renewal .renewal_ttl {
	margin-bottom: 12px;
}

/*============
商品説明
==============*/

#item-exp {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 30px;
	margin-bottom: 60px;
}

#item-exp .item-exp__ttl {
	margin: 0 0 30px 0;
	color: #004EA2;
	font-size: 18px;
	line-height: 1.5;
	font-weight: bold;
	letter-spacing: -0.1rem;
}

#item-exp .item-exp__ttl-name {
	margin: 0 0 30px 0;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.5;
}


#item-exp .item-exp__txt {
	margin: 0 0 30px 0;
	font-size: 16px;
	line-height: 1.5;
}

#item-exp .item-exp__comments {
	font-size: 16px;
}



/*============
カート
==============*/

#cart {
	display: grid;
	gap: 40px;
	margin-bottom: 60px;
}

#cart p {
	font-size: 16px;
}

#cart .cart__ttl_green {
	background-color: #55AC21;
	height: 40px;
	font-size: 18px;
	color: #FFF;
	padding-left: 20px;
	display: grid;
	align-items: center;
	margin-bottom: 30px;
}

#cart .cart__ttl_grey {
	background-color: #989898;
	height: 40px;
	font-size: 18px;
	color: #FFF;
	padding-left: 20px;
	display: grid;
	align-items: center;
	margin-bottom: 30px;
}

#cart .cart_wrapper {
	gap: 40px;
	display: grid;
	margin-bottom: 20px;
}

#cart .cart_box {
	display: grid;
	grid-template-columns: 203px 490px 1fr;
	gap: 13px;
	border-bottom: 1px #E6E6E6 solid;
	padding: 0 20px 30px;
}


#cart.cart02 .cart_box {
	display: grid;
	grid-template-columns: 120px 360px 1fr;
	gap: 11px;
	border-bottom: 1px #E6E6E6 solid;
	padding: 0;
}

#cart.cart02 .annual_discount p {
	font-size: 14px;
}

#cart.cart02 .cart_quantity .shipping {
	font-size: 14px;
	padding: 6px;
	display: block;
	line-height: 1.2;
	width: 96px;
	font-weight: 600;
}


#cart.cart02 .cart_quantity .quantity img {
	width: 97px;
	display: block;
	margin-bottom: 10px;
}

#cart.cart02 .cart_box {
	padding: 0 0 20px;
}

#cart.cart02 .cart_normal .cart_box .cart_quantity {
	margin-left: 20px;
}

#cart .cart_quantity .quantity {
	font-size: 20px;
	font-weight: bold;
}

#cart .cart_quantity .quantity span {
	font-size: 32px;
}

#cart .cart_quantity .interval {
	font-size: 16px;
	margin-bottom: 10px;
}

#cart .cart_quantity .shipping {
	font-size: 14px;
	color: #EF193F;
	border: 1px solid #EF193F;
	padding: 3px 11px;
	display: inline;
	font-weight: 600;
}

#cart .grid_price {
	display: grid;
	grid-template-columns: 1fr 2.5fr !important;
	align-items: center;
	/* margin-bottom: 5px; */
}

#cart .cart_normal .grid_price {
	display: grid;
	grid-template-columns: 1fr 2fr !important;
	align-items: center;
	/* margin-bottom: 5px; */
}

#cart .price_only {
	justify-items: center;
	grid-template-columns: unset;
}

#cart .price_only .special_offer {
	color: unset;
}

#cart .grid_price .normal {
	font-size: 11px;
}

#cart .grid_price .price {
	font-size: 20px;
	font-weight: bold;
	position: relative;
}

#cart .grid_price .price::before {
	position: absolute;
	content: "";
	display: block;
	transform: rotate(-10deg);
	background-color: red;
	width: 64%;
	height: 1px;
	top: 50%;
	left: 0;
}

#cart .grid_price .price .yen {
	font-size: 18px;
}

#cart .grid_price .price .tax {
	font-size: 12px;
}

#cart .special_offer {
	font-size: 36px;
	color: #EF193F;
	font-weight: bold;
	text-align: left;
}

#cart .special_offer a {
	position: relative;
	color: #FFF;
	padding: 7px 11px 7px 8px;
	font-size: 12px;
	font-weight: normal;
	margin-right: 20px;
	top: -4px;
	opacity: 1 !important;
}

#cart .special_offer .yen {
	font-size: 28px;
}

#cart .special_offer .tax {
	font-size: 14px;
}

#cart .special_offer a::before {
	content: "";
	width: 126px;
	height: 28px;
	background-color: #EF193F;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

#cart .special_offer a::after {
	content: "";
	position: absolute;
	top: 0;
	right: -11px;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
	border-width: 0px 20px 28px 0;
}

#cart .repurchase {
	font-size: 16px;
	margin-bottom: 8px;
}

#cart .repurchase .bold {
	font-weight: bold;
}

#cart .repurchase .tax {
	font-size: 12px;
}

#cart .annual_discount {
	font-size: 12px;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	background-color: #FFFBE2;
	border: 1px solid #EF193F;
	/* padding: 3px 0; */
}

#cart .annual_discount .tax {
	font-size: 10px;
}

#cart .annual_discount .pink {
	font-size: 16px;
	font-weight: bold;
	color: #EF193F;
}

#cart .annual_discount .pink .annual {
	font-size: 14px;
}

#cart .annual_discount .pink .annual .tax {
	font-size: 10px;
}

#cart .cart_btn {
	display: grid;
	align-items: center;
}

#cart .cartBtn img {
	width: 100%;
}

.btn img {
	width: 100%;
}

/*============
カート(コンテンツ)
==============*/

#main #cart .grid_price {
	display: block;

}

#main #cart .special_offer {
	text-align: unset;
}

#main #cart .price_only .special_offer {
	text-align: right;
}

#main #cart .normalprice_box {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: -6px;
}

/*============
機能性表示食品
==============*/

#notification {
	margin-bottom: 60px;
}

/*============
見出し
==============*/

.section__ttl {
	box-sizing: border-box;
	height: 56px;
	margin: 0 0 30px 0;
	padding: 0 0 0 40px;
	font-size: 20px;
	color: #FFF;
	font-weight: bold;
	background-color: #0075CD;
	display: flex;
	align-items: center;
	position: relative;
	flex-wrap: nowrap;
}

.section__ttl span {
	font-size: 0.7em;
}

.section__ttl::before {
	content: "";
	height: 70%;
	width: 6px;
	background-color: #FFF;
	position: absolute;
	left: 20px;
}

/*============
コンテンツ
==============*/

#main section {
	margin-bottom: 60px;
}

#main .main_content {
	font-size: 18px;
}

#main .main_content img {
	width: 100%;
}

#main .main_content_txt {
	margin-bottom: 30px;
}

#main .main_content_txt .pink_txt {
	color: #55AC21;
	font-weight: bold;
}

/*============
コンテンツ(商品ごとのCSS)
==============*/


.hometown__flex {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.hometown__flex img {
	width: 320px;
	height: 222.18px;
	display: block;
}

.l8020-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

.l8020-flex h3 {
	padding-bottom: 20px;
}

.l8020-info__txt {
	border-top: #0075CD dotted 3px;
	padding-top: 20px;
}

.denta-flora-flex {
	display: flex;
	justify-content: space-between;
	gap: 30px;
}


.denta-flora-flex img {
	width: 180px;
}

.section__ttl.denta-flora-composition__ttl span {
	vertical-align: bottom;
	align-self: flex-end;
	margin-bottom: 12px;
}

/* 長寿地域の伝統食から生まれたサプリメントです */

#customer_voice .research {
	background-color: #DFF2FD;
	padding: 40px 30px;
	display: flex;
	gap: 0 30px;
	border-radius: 10px;
}

#customer_voice .tradition_researcher img {
	width: 190px;
}

#customer_voice .tradition_researcher p {
	font-size: 16px;
	text-align: center;
	margin-top: 13px;
}

#customer_voice .tradition_researcher_message .researcher_message_ttl {
	border-bottom: 3px solid #F27885;
	padding-bottom: 15px;
	font-weight: bold;
}

#customer_voice .tradition_researcher_message .researcher_message_txt {
	font-size: 18px;
	line-height: 2;
	margin-top: 15px;
}

#customer_voice .customer_voice {
	background-color: #EAF5FD;
	padding: 50px 20px 40px;
}

#customer_voice .customer_voice .customer_ttl {
	margin: 0 auto;
	max-width: 223px;
	width: 100%;
	margin-bottom: 20px;
}

#customer_voice .customer_voice_content {
	background-color: #fff;
	border-radius: 10px;
	padding: 30px;
	margin-top: 30px;
}

#customer_voice .customer h3 {
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 20px;
	border-bottom: 3px solid #F27885;
	color: #F27885;
}

#customer_voice .customer .customer_flex {
	display: flex;
	gap: 0 30px;
	margin-top: 20px;
}

#customer_voice .customer .customer_flex.flex-reverse {
	flex-direction: row-reverse;
}

#customer_voice .customer_info img {
	width: 190px;
}

#customer_voice .customer_name {
	text-align: center;
	margin-top: 10px;
	font-size: 16px;
}

#customer_voice .customer_txt {
	font-size: 18px;
	line-height: 1.5;
}



#customer_voice .notice_txt {
	font-size: 12px;
	margin-top: 10px;
}

/*============
定期コース5大特典
==============*/

.tokuten a {
	text-decoration: underline;
}

.benefit {
	margin: 0 0 40px 0;
}

.benefit a {
	text-decoration: underline;
}

.benefit a:hover {
	text-decoration: none;
}

/*============
よくある質問
==============*/

#faq .accordion {
	margin: 3em auto;
	max-width: 60vw;
}

#faq .toggle {
	display: none;
}

#faq .option {
	position: relative;
	margin-bottom: 1em;
	border-bottom: 1px solid #E6E6E6;
}

#faq .title,
#faq .content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}

#faq .title {
	padding: 5px;
	padding-left: 56px;
	padding-right: 40px;
	padding-bottom: 20px;
	display: block;
	font-weight: bold;
}

#faq .faq_pdf {
	width: 360px;
	margin: auto;
	margin-top: -10px;
}

#faq .title::before {
	content: url(../images/faq_img.jpg);
	vertical-align: middle;
	padding-right: 5px;
	transform: scale(0.5);
	position: absolute;
	top: -25px;
	left: -20px;
}

#faq .title::after {
	content: "";
	position: absolute;
	top: 15%;
	right: 20px;
	width: 13px;
	height: 13px;
	border-top: 3px solid #E6E6E6;
	border-right: 3px solid #E6E6E6;
	transform: rotate(135deg);
	/* transition: all 0.3s; */
}

#faq .content {
	max-height: 0;
	overflow: hidden;
}

#faq .content p {
	margin: 0;
	padding: 0 56px 20px;
	font-size: 16px;
	line-height: 30px;
}

#faq .toggle:checked+.title+.content {
	max-height: 500px;
	transition: all 1.5s;
}

#faq .toggle:checked+.title::after {
	transform: rotate(-45deg) !important;
	top: 15px;
}

/*============
商品詳細
==============*/

#item-detail .contents_box {
	width: 100%;
	margin-bottom: 40px;
}

#item-detail .contents_box th,
#item-detail .contents_box td {
	padding: 12px 10px 12px 18px;
	border: 1px solid #d2c8aa;
	font-size: 14px;
}

#item-detail .contents_box th {
	width: 140px;
}

#contents #item-detail .contents_box th,
#contents #item-detail .contents_box td {
	border: 1px solid #E5E1DE;
}

#item-detail .contents_box .italic {
	font-weight: medium;
}

#item-detail .contents_box .italic span {
	font-style: italic;
}


#item-detail .contents_box .ver-top {
	vertical-align: top;
}


.make__flex {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}

.make__flex h3 {
	font-weight: 600;
	color: #13419F;
	font-size: 22px;
	border-bottom: #E4F1FF solid 4px;
	background: linear-gradient(transparent 73%, #E4F1FF 50%, #E4F1FF 100%);
	text-align: center;
	margin-bottom: 20px;
}

.make__flex--left {
	width: 40%;
}

.make__flex--left h3 {
	width: 40%;
	width: 150px;
}

.make__flex--right {
	width: 60%;
}

.make__flex--right h3 {
	width: 180px;
}

.make__flex--right p {
	font-size: 18px;
}

.make__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 60px;
}

.make__grid--box img {
	width: 100%;
	margin-bottom: 10px;
}

.make__grid--box {
	display: flex;
	flex-direction: column;
}

.make__namber--box {
	display: flex;
	gap: 38px 11px;
}

.make__namber--box img {
	width: 30px;
	height: 30px;
}

.make__namber--box p {
	font-size: 18px;
}

.make__subtitle--box {
	text-align: center;
	margin-bottom: 35px;
}

.make__subtitle {
	font-weight: 600;
	color: #13419F;
	font-size: 20px;
	border-bottom: #E4F1FF solid 4px;
	background: linear-gradient(transparent 73%, #E4F1FF 50%, #E4F1FF 100%);
	text-align: center;
	margin-bottom: 20px;
	display: inline;
}

.succession__title--flex {
	display: flex;
	gap: 10px;
}

.succession__title--flex h3 {
	font-size: 20px;
	font-weight: 600;
	color: #13419F;
	margin-bottom: 10px;
}

.succession__title--flex img {
	width: 30px;
	height: 30px;
}

.succession__content--flex {
	display: flex;
	justify-content: space-between;
}

.succession__content--flex img {
	width: 150px;
	object-fit: cover;
}


.succession__content--flex .c-blue {
	font-weight: 300;
}

.succession__content--flex p {
	line-height: 2;
}

.temperature__movie {
	text-align: center;
	margin-bottom: 35px;
}

.temperature__movie h5 {
	width: 207px;
	display: block;
	margin: 0 auto 20px;
}

.season__content--box {
	border: 2px dotted #FEDCDC;
	padding: 25px 20px;
}

.season__content--flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.season__content--flex img {
	width: 100px;
}

.season__content--flex p {
	color: #E9546A;
	font-size: 21px;
}

.season__content--flex span {
	color: #000;
}

.faq_img {
	width: 502px !important;
	padding-bottom: 40px;
	margin: 0 auto;
	display: block;
}