@charset "UTF-8";

html {
		scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
		margin: 0;
		padding: 0;
}

ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
}

a {
		text-decoration: none;
}

img {
		width: 100%;
		height: auto;
}

#container {
		overflow: hidden;
}

#lemon-water {
		overflow: hidden;
		font-family: "meiryo", sans-serif;
		font-weight: 400;
}

/* --------------------------------------------------------------------------------
	PC  ALL
-------------------------------------------------------------------------------- */
.pc {
		display: block;
}

.tb {
		display: none;
}

.pc.tb {
		display: block;
}

.sp {
		display: none;
}

.flex {
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}

a,
a.btn_mod {
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

a:hover,
a.btn_mod:hover {
		opacity: .7;
}

/* animation fade in */
.animate {
		opacity: 0;
		transition: opacity 0.5s ease-in;
}

.animate.is-animate {
		opacity: 1;
}

/* module */
.inner {
		width: 84.028%;
		max-width: 1100px;
		margin: 0 auto;
}


/* --------------------------------------------------------------------------------
	tablet
-------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1400px) {
		.pc {
				display: none;
		}

		.tb {
				display: block;
		}

		.sp {
				display: none;
		}
		
}

/* ------ tablet end ------ */

/* --------------------------------------------------------------------------------
	SP
-------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
		.pc {
				display: none;
		}

		.tb {
				display: none;
		}

		.pc.tb {
			display: none;
	}

		.sp {
				display: block;
		}

		/* module */
		.inner {
				width: 91.867%;
				max-width: 689px;
		}
}

/* ================================================================
   血圧ケア×レモン水 特設ページ 追加スタイル
   PC : px（デザイン基準 1440px）
   TB : vw（1440基準 = px ÷ 14.4）  @media 768–1200
   SP : vw（750基準  = px ÷ 7.5）   @media –767
   ================================================================ */

#lemon-water {
		--green: #105810;
    --green02: #026549;
		--navy: #2b4a8a;
		--red: #8E1B40;
		--cream: #FBF3D1;
		--lime: #f3ec8b;
		--cta-green: #8DC63F;
		--band: #ffec61;
		--gray: #123B1A;
    --koamaru: #312F6B;
		color: #222;
		line-height: 1.6;
}

#lemon-water img {
		max-width: 100%;
		height: auto;
}

/* .pc / .sp で切り替える画像以外はブロック表示 */
#lemon-water img:not(.pc):not(.sp) {
		display: block;
}

/* フェードイン（ベースの .animate を拡張） */
#lemon-water .animate {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.7s ease, transform 0.7s ease;
}

#lemon-water .animate.is-animate {
		opacity: 1;
		transform: none;
}

/* ---------------- MV ---------------- */
.sev_mv {
		position: relative;
		background: url(/knowledge/lemon-water/images/bg_sec_mv.jpg) no-repeat center;
		-webkit-background-size: 100% auto;
		     -o-background-size: 100% auto;
		        background-size: 100% auto;
		padding: 50px 0 30px;
		overflow: hidden;
}

.sev_mv::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 77px;
		background: var(--band);
		z-index: 0;
}

.sev_mv__inner.inner {
		position: relative;
		z-index: 1;
		max-width: 1300px;
}

.sev_mv__inner img {
		width: 100%;
}

/* ---------------- 導入 ---------------- */
.sev_intro {
		background: var(--cream);
		padding: 72px 0;
		border-bottom: 28px solid #3B8440;
}

.sev_intro__lead {
		max-width: 760px;
		margin: 0 auto 44px;
}

.sev_intro__lead img {
		width: 100%;
}

.sev_note {
		background: #fff;
		border-radius: 17px;
		max-width: 832px;
		margin: 0 auto;
		padding: 34px 55px;
}

.sev_note__ttl {
		color: var(--green02);
		font-weight: 500;
		font-size: 20px;
		margin-bottom: 16px;
		font-family: "Noto Sans JP", sans-serif;
}

.sev_note__label {
		font-size: 12px;
		color: #0F1701;
		margin-bottom: 10px;
}

.sev_note__tag {
		display: inline-block;
		border: 1px solid #444;
		padding: 2px 10px;
		margin-right: 12px;
		font-size: 12px;
}

.sev_note__txt {
		font-size: 12px;
		line-height: 1.9;
		color: #0F1701;
}

/* ---------------- Q共通 ---------------- */
.sev_q {
		padding: 70px 0;
}

.sev_q__lead{
	max-width: 857px;
	margin: 0 auto 50px;
}

.sev_q__lead img{
	width: 100%;
	height: auto;
}

.sev_q--lime {
	background: var(--lime);
}

.sev_q--lime.last{
	border-bottom: 28px solid #3B8440;
}

.sev_q--cream {
		background: var(--lime);
}

.sev_q__label {
		font-size: 22px;
		color: var(--green);
		line-height: 1.6;
		margin-bottom: 8px;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 700;
}

.sev_q__label span {
		margin-left: 2px;
}

.sev_q__label--mt {
		margin-top: 96px;
}

.sev_q__ttl {
		font-weight: bold;
		font-size: 36px;
		line-height: 1.45;
		margin: 6px 0 18px;
}

.sev_q__ttl--koamaru {
		color: var(--koamaru);
}

.sev_q__ttl--navy {
		color: var(--navy);
}

.sev_q__ttl-line {
		display: block;
		width: -moz-fit-content;
		width: fit-content;
		max-width: 100%;
		padding-bottom: 5px;
		margin-bottom: 10px;
		text-decoration: underline;
		text-underline-offset: 8px;
		font-family: "Noto Sans JP", sans-serif;
}

.sev_q__ttl-line:last-child {
		margin-bottom: 0;
}

.sev_q__read {
		font-size: 18px;
		line-height: 1.8;
		margin: 4px 0 8px;
		color: var(--koamaru);
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 700;
}

.sev_q__source {
		font-size: 14px;
		color: var(--gray);
		line-height: 1.7;
		margin-top: 14px;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 600;
}

.sev_emph--red {
		color: var(--red);
		font-weight: bold;
		font-size: 30px;
		line-height: 1.5;
		margin: 44px 0 24px;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 900;
}

/* ---------------- カード ---------------- */
.sev_card {
		margin: 24px 0;
}

.sev_card__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.sev_card img {
		width: 100%;
		-webkit-border-radius: 10px;
		        border-radius: 10px;
}

.sev_card--narrow {
		max-width: 744px;
		margin-left: 0;
		margin-right: 0;
}

.sev_card--wide {
		max-width: 1104px;
}

.sev_card--wide img {
	-webkit-border-radius: 15px;
	        border-radius: 15px;
}

/* ---------------- 年代別スライダー ---------------- */
.sev_age {
		margin-top: 18px;
		--age-slide-w: 820px;
		--age-gap: 24px;
}

.sev_age__tabs {
		display: flex;
		gap: 10px;
		margin-bottom: 35px;
}

.sev_age__tab button {
		display: block;
		padding: 7px 12px;
		border: none;
		border-radius: 6px;
		background: #7BBE72;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
		line-height: 1.4;
		cursor: pointer;
		transition: background 0.2s ease, color 0.2s ease;
}

.sev_age__tab.is-active button {
		background: #189F60;
}

/* 覗き見せスライダー本体
   右端を画面端までブリードさせ、次スライドを覗かせる。
   画面が広いほど 50代・60代 が多く見えるようになる。 */
.sev_age__slider {
		margin-top: 4px;
		margin-right: min(0px, 605px - 50vw);
}

.sev_age__slider .slick-slide {
		opacity: 1;
}

/* 各スライド＝固定幅の白カード */
.sev_age__slide {
		width: var(--age-slide-w);
		margin-right: var(--age-gap);
		box-sizing: border-box;
}

.sev_age__slide img {
		width: 100%;
		border-radius: 16px;
}

/* slick初期化前のちらつき防止 */
.sev_age__slider:not(.slick-initialized) .sev_age__slide {
		display: none;
}

.sev_age__slider:not(.slick-initialized) .sev_age__slide:first-child {
		display: block;
}

/* ---------------- Q3 テーブル ---------------- */
.sev_table-wrap {
		margin: 24px 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
}

.sev_table {
		border-collapse: collapse;
		width: 100%;
		max-width: 940px;
		background: #fff;
		font-size: 18px;
}

.sev_table th,
.sev_table td {
		border: 1px solid var(--navy);
		padding: 12px 20px;
		text-align: left;
		line-height: 1.5;
		vertical-align: middle;
		font-family: "Noto Sans JP", sans-serif;
}

.sev_table thead th {
		background: #585E9C;
		color: #fff;
		border-color: #fff;
		font-weight: 700;
		text-align: center;
}

.sev_table thead th:first-child{
	border-left-color: #585E9C;
	min-width: 158px;
}

.sev_table thead th:last-child{
	border-right-color: #585E9C;
}

.sev_table__corner {
		width: 120px;
}

.sev_table th.sev_table__rowhead {
		background: #FFFF9C;
		color: #2F1009;
		font-weight: 500;
		white-space: nowrap;
		text-align: left;
}

.sev_table__hl {
		background: #cdd9f2;
		color: #013065;
		font-weight: 900;
		font-size: 19px;
}

/* ---------------- CTA ---------------- */
.sev_cta {
		background: var(--cta-green);
		padding: 70px 0 82px;
}

.sev_cta__lead {
		color: #fff;
		text-align: center;
		font-weight: 700;
		font-size: 37px;
		line-height: 1.48;
		margin-bottom: 34px;
		font-family: "Noto Sans JP", sans-serif;
}

.sev_cta__card {
		background: #fff;
		border-radius: 46px;
		max-width: 1100px;
		margin: 0 auto;
		padding: 50px 60px 46px;
		text-align: center;
}

.sev_cta__ttl {
		text-align: center;
		margin-bottom: 30px;
}

.sev_cta__ttl img {
		max-width: 820px;
		width: 100%;
		margin: 0 auto;
}

.sev_cta__body {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 100px;
		margin-bottom: 50px;
}

.sev_cta__left {
		flex: 1;
		min-width: 0;
}

.sev_cta__text img {
		max-width: 640px;
		width: 100%;
}

.sev_cta__note {
		font-size: 19px;
		color: #247220;
		margin: 8px 0 24px;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 500;
		text-align: left;
}

.sev_cta__photos {
		display: flex;
		gap: 16px;
}

.sev_cta__photos img {
		width: calc(50% - 8px);
		border-radius: 6px;
}

.sev_cta__right {
		width: 300px;
		flex-shrink: 0;
}

.sev_cta__bottles {
		width: 100%;
}

.sev_cta__banner {
	  display: inline-block;
		max-width: 834px;
		margin: 0 auto 8px;
}

.sev_cta__banner img {
		width: 100%;
}

.sev_cta__btnwrap {
		text-align: center;
}

.sev_cta__btn {
		display: inline-block;
		color: #0E4BE4;
		font-size: 16px;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 4px;
}

/* PC/タブレット表示時（768px以上）はScrollHint要素を非表示化 */
@media only screen and (min-width: 768px) {
  .scroll-hint-icon,
  .scroll-hint-text,
  .scroll-hint-shadow-left,
  .scroll-hint-shadow-right {
    display: none !important;
  }
}

/* ================================================================
   TABLET  768–1200  （vw / 1440基準）
   ================================================================ */
@media only screen and (min-width: 768px) and (max-width: 1200px) {

		.sev_mv {
				padding: 4.17vw 0 2.5vw;
		}

		.sev_mv::after {
				height: 5.35vw;
		}

		.sev_intro {
				padding: 5vw 0;
				border-bottom: 1.94vw solid #3B8440;
		}

		.sev_intro__lead {
				max-width: 63.33vw;
				margin-bottom: 3.06vw;
		}

		.sev_note {
				max-width: 65.28vw;
				border-radius: 1.39vw;
				padding: 2.36vw 3.06vw;
		}

		.sev_note__ttl {
				font-size: 1.39vw;
				margin-bottom: 1.11vw;
		}

		.sev_note__label {
				font-size: 0.97vw;
				margin-bottom: 0.69vw;
		}

		.sev_note__tag {
				font-size: 0.9vw;
				padding: 0.14vw 0.69vw;
				margin-right: 0.83vw;
		}

		.sev_note__txt {
				font-size: 1vw;
		}

		.sev_q {
				padding: 5.42vw 0 5.97vw;
		}

		.sev_q--lime.last {
			border-bottom: 1.94vw solid #3B8440;
		}

		.sev_q__lead{
			max-width: 71.42vw;
			margin: 0 auto 4.86vw;
		}

		.sev_q__label {
				font-size: 1.83vw;
				margin-bottom: 0.56vw;
		}

		.sev_q__label--mt {
				margin-top: 6.67vw;
		}

		.sev_q__ttl {
				font-size: 2.36vw;
				margin: 0.42vw 0 1.25vw;
		}

		.sev_q__ttl-line {
				text-underline-offset: .5vw;
				padding-bottom: 0.35vw;
				margin-bottom: 0.69vw;
		}

		.sev_q__read {
				font-size: 1.25vw;
		}

		.sev_q__source {
				font-size: 1.17vw;
				margin-top: 0.97vw;
		}

		.sev_emph--red {
				font-size: 1.94vw;
				margin: 3.06vw 0 1.67vw;
		}

		.sev_card {
				border-radius: 1.11vw;
				padding: 0;
				margin: 1.67vw 0;
		}

		.sev_card--narrow {
				max-width: 62vw;
		}

		.sev_card--wide {
				max-width: 80.56vw;
		}

		.sev_card--wide img {
				max-width: 72.22vw;
		}

		.sev_age {
				margin-top: 1.25vw;
				--age-gap: 1.67vw;
		}

		.sev_age__tabs {
				gap: 0.69vw;
				margin-bottom: 0.83vw;
		}

		.sev_age__tab button {
				padding: 0.49vw 1.81vw;
				border-radius: 0.42vw;
				font-size: 1.11vw;
		}

		/* タブレットは .inner 内に収め、1.5枚ほど覗かせる */
		.sev_age__slider {
				margin-right: 0;
		}

		.sev_age__slide {
				width: 60vw;
				border-radius: 1.11vw;
				padding: 1.67vw 0;
		}

		.sev_table-wrap {
				margin: 1.67vw 0;
		}

		.sev_table {
				max-width: 65.28vw;
				font-size: 1.5vw;
		}

		.sev_table th,
		.sev_table td {
				padding: 0.83vw 0.97vw;
		}

		.sev_table__hl{
			font-size: 1.58vw;
		}

		.sev_table__corner {
				width: 8.33vw;
		}

		.sev_cta {
				padding: 4.86vw 0 5.69vw;
		}

		.sev_cta__lead {
				font-size: 2.57vw;
				margin-bottom: 2.36vw;
		}

		.sev_cta__card {
				max-width: 75vw;
				border-radius: 1.67vw;
				padding: 3.47vw 3.89vw 3.19vw;
		}

		.sev_cta__ttl {
				margin-bottom: 2.08vw;
		}

		.sev_cta__ttl img {
				max-width: 56.94vw;
		}

		.sev_cta__body {
				gap: 2.78vw;
				margin-bottom: 2.5vw;
		}

		.sev_cta__text img {
				max-width: 44.44vw;
		}

		.sev_cta__note {
				font-size: 1.58vw;
				margin: 0.56vw 0 1.67vw;
		}

		.sev_cta__photos {
				gap: 1.11vw;
		}

		.sev_cta__photos img {
				width: calc(50% - 0.56vw);
				border-radius: 0.42vw;
		}

		.sev_cta__right {
				width: 20.83vw;
		}

		.sev_cta__banner {
				max-width: 58.33vw;
				margin-bottom: 0;
		}

		.sev_cta__btn {
				font-size: 1.33vw;
		}
}

/* ================================================================
   SP  –767  （vw / 750基準）
   ================================================================ */
@media only screen and (max-width: 767px) {

		#lemon-water {
				line-height: 1.7;
		}

		/* MV */
		.sev_mv {
				background: url(/knowledge/lemon-water/images/bg_sec_mv_sp.jpg) no-repeat top center;
				-webkit-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
				padding: 6vw 2vw;
		}

		.sev_mv::after {
				height: 15.6vw;
		}

		.sev_mv__inner.inner {
				width: 100%;
				max-width: 100%;
		}

		/* 導入 */
		.sev_intro {
				padding: 8vw 0;
				border-bottom: 7.07vw solid #3B8440;
		}

		.sev_intro__lead {
				max-width: 100%;
				margin-bottom: 6.4vw;
		}

		.sev_note {
				max-width: 100%;
				border-radius: 2.66vw;
				padding: 5.33vw 5.33vw;
		}

		.sev_note__ttl {
				font-size: 3.73vw;
				margin-bottom: 2.66vw;
		}

		.sev_note__label {
				font-size: 3.06vw;
				margin-bottom: 2vw;
		}

		.sev_note__tag {
				font-size: 2.93vw;
				padding: 0.53vw 2.13vw;
				margin-right: 2.13vw;
		}

		.sev_note__txt {
				font-size: 3.467vw;
				line-height: 2;
		}

		/* Q共通 */
		.sev_q {
				padding: 9.33vw 0 10.66vw;
		}

		.sev_q__lead{
			max-width: 86vw;
			margin: 0 auto 6.67vw;
		}

		.sev_q__label {
				font-size: 3.733vw;
				line-height: 1.6;
				margin-bottom: 1.6vw;
				text-indent: -7vw;
				padding-left: 7vw;
		}

		.sev_q__label--mt {
				margin-top: 12vw;
		}

		.sev_q__ttl {
				font-size: 5.33vw;
				line-height: 1.4;
				margin: 1.6vw 0 3.2vw;
		}

		.sev_q__ttl-line {
				text-underline-offset: .4vw;
				padding-bottom: 0.8vw;
				margin-bottom: 1.6vw;
		}

		.sev_q__read {
				font-size: 3.733vw;
				line-height: 1.75;
				margin: 1.6vw 0 2.13vw;
		}

		.sev_q__source {
				font-size: 3.467vw;
				line-height: 1.7;
				margin-top: 2.66vw;
		}

		.sev_emph--red {
				font-size: 4.53vw;
				line-height: 1.5;
				margin: 8vw 0 4.26vw;
		}
		.sev_q--lime.last {
			border-bottom: 7.07vw solid #3B8440;
		}
		/* カード */
		.sev_card {
				margin: 4.26vw 0;
		}

		.sev_card--narrow,
		.sev_card--wide {
				max-width: 100%;
		}

		.sev_card--wide .sev_card__scroll{
			width: 100%;
		}
		.sev_card--wide .scroll-hint-shadow-wrap{
			width: 105% !important;
		}

		.sev_card--wide .sev_card__scroll img {
	    min-width: 650px; /* Forces image to be wide enough to scroll on SP */
	    max-width: none;
	    width: auto;
	  }

		/* スライダー */
		.sev_age {
				margin-top: 2.66vw;
				--age-gap: 3.2vw;
		}

		.sev_age__tabs {
				gap: 2.13vw;
				margin-bottom: 4.66vw;
		}

		.sev_age__tab button {
				padding: 1.33vw 3.33vw;
				border-radius: 1.33vw;
				font-size: 3.2vw;
		}

		/* SPは1枚＋次カードを少し覗かせてスワイプを示唆 */
		.sev_age__slider {
				/*margin-right: 0;*/
		}

		.sev_age__slide {
				width: 97vw;
				border-radius: 2.66vw;
		}

		/* テーブル */
		.sev_table-wrap {
			  width: 100%;
				margin: 4.26vw 0;
		}

		.sev_q .scroll-hint-shadow-wrap{
			width: 105% !important;
		}

		.sev_table {
				max-width: none;
		    min-width: 520px; /* Adjust width as needed to fit content cleanly */
		    font-size: 3.467vw;
		}

		.sev_table th,
		.sev_table td {
			  white-space: nowrap;
				padding: 2.13vw 1.6vw;
				font-size: 3.467vw;
		}

		.sev_table thead th:first-child {
		    min-width: 21.467vw;
		}

		.sev_table__corner {
				width: 18vw;
		}

		.sev_table__rowhead {
				white-space: normal;
		}

		/* CTA */
		.sev_cta {
				padding: 9.33vw 0 10.66vw;
		}

		.sev_cta__lead {
				font-size: 5.6vw;
				margin-bottom: 5.33vw;
				text-align: left;
		}

		.sev_cta__card {
				max-width: 100%;
				border-radius: 6.13vw;
				padding: 8vw 5.33vw;
		}

		.sev_cta__ttl {
				margin-bottom: 5.33vw;
		}

		.sev_cta__ttl img {
				max-width: 100%;
		}

		.sev_cta__body {
				flex-direction: column;
				gap: 0;
				margin-bottom: 0;
				align-items: center;
		}

		.sev_cta__right {
				order: -1;
				width: 46.667vw;
				max-width: 350px;
				margin-bottom: 5.33vw;
		}

		.sev_cta__bottles {
				max-width: 74%;
				margin: 0 auto;
		}

		.sev_cta__text img {
				max-width: 100%;
		}

		.sev_cta__note {
				font-size: 3.467vw;
		}

		.sev_cta__photos {
				gap: 3.2vw;
				margin-bottom: 9.4vw;
		}

		.sev_cta__photos img {
				width: calc(50% - 1.6vw);
				border-radius: 1.33vw;
		}

		.sev_cta__banner {
				max-width: 100%;
				margin-bottom: 0;
		}

		.sev_cta__btn {
				font-size: 3.73vw;
		}
}