@charset "UTF-8";

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

  WebFont

*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&');

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

  リセット

*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: transparent;
  background-image: none;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  font-style: normal;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
ul,
ol {
  list-style-type: none;
}
a {
  cursor: pointer;
}
img {
	display: block;
  max-width: 100%;
  height: auto;
}

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

  HTML

*/
html {
	/* 幅750px 1rem = 10px */
  font-size: 1.333vw;
}
body {
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 2.8rem;
	font-feature-settings: "palt";
  line-height: 1.5;
  color: #424242;
  -webkit-font-smoothing: antialiased;
  moz-osx-font-smoothing: grayscale;
}
img {
  width: 100%;
}
sup {
	font-size: 50%;
}
figcaption {
	font-size: 2rem;
}
figcaption:last-child {
	margin-top: 1.5rem;
}
figcaption:first-child {
	margin-bottom: 1.5rem;
}

/*—– PC向けの記述 —–*/
@media screen and (min-width: 768px) {
	html {
		font-size: 10px;
	}
}
header,
footer,
main section {
	margin: 0 auto;
	max-width: 768px;
}


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

  カスタムプロパティ

*/
:root {
	--color-red: #bb3344;
}

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

  汎用共通

*/

/* container */
.c-container {
	padding-left: 3rem;
	padding-right: 3rem;
}
.c-container-left {
	padding-left: 3rem;
}
.c-container-right {
	padding-left: 3rem;
}

/* padding */
.c-pt1 { padding-top: 1rem; }
.c-pt2 { padding-top: 2rem; }
.c-pt3 { padding-top: 3rem; }
.c-pt4 { padding-top: 4rem; }
.c-pt5 { padding-top: 5rem; }
.c-pt6 { padding-top: 6rem; }
.c-pt7 { padding-top: 7rem; }
.c-pt8 { padding-top: 8rem; }
.c-pt9 { padding-top: 9rem; }

.c-pb1 { padding-bottom: 1rem; }
.c-pb2 { padding-bottom: 2rem; }
.c-pb3 { padding-bottom: 3rem; }
.c-pb4 { padding-bottom: 4rem; }
.c-pb5 { padding-bottom: 5rem; }
.c-pb6 { padding-bottom: 6rem; }
.c-pb7 { padding-bottom: 7rem; }
.c-pb8 { padding-bottom: 8rem; }
.c-pb9 { padding-bottom: 9rem; }

/* text layout */
.c-center-text {
	text-align: center;
}
.c-text p {
	margin-bottom: 1.5em;
}
.c-text p:last-child {
	margin-bottom: 0;
}

/* note */
.c-note {
	font-size: 2rem;
}
.c-note li {
	padding-left: 1em;
	text-indent: -1em;
}

/* note number */
.c-note-number {
	font-size: 2rem;
}
.c-note-number li {
	position: relative;
	padding-left: 1.8em;
}
.c-note-number li i {
	position: absolute;
	top: 0;
	left: 0;
}

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

  フッター

*/
footer {
	padding: 6rem 3rem 20rem 3rem;
	text-align: center;
	font-size: 2rem;
}

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

  メイン

*/
.p-main {
	position: relative;
}
.p-main h2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

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

  Voice

*/
.p-voice {
	padding-bottom: 4rem;
}
.p-voice .block {
	padding: 4rem 0 2rem 0;
}
.p-voice .row {
	display: flex;
	flex-direction: row-reverse;
	padding-bottom: 4rem;
}
.p-voice .row .image {
	padding-left: 2.5rem;
	flex-basis: 50%;
}
.p-voice .row .image img {
	border: 1rem solid #fff;
	box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.12);
}
.p-voice .row .image figcaption {
	text-align: center;
	font-size: 2.2rem;
}
.p-voice .row .text {
	flex: 1;
}
.p-voice .note {
	padding-top: 4rem;
}

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

  CTA

*/
.p-cta {
	padding: 4rem 0 5rem 0;
	background-color: #eee;
}
.p-cta .frame {
	padding: 3.5rem 0;
	background-color: #fff;
}
.p-cta .button {
	display: block;
	margin-bottom: 3.5rem;
	background-color: #0ba951;
	border-radius: 1rem;
	box-shadow: 0 0.5rem 0 #13743e;
}
.p-cta .note {
	font-size: 2.5rem;
}

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

  なぜランナーに鉄分が必要なのか

*/
.p-why .check {
	background-repeat: repeat;
	background-image: url(../img/bg-grid.png);
	background-size: 3rem 3rem;
}
.p-why .check .block {
	padding-top: 6rem;
}
.p-why .check .row {
	display: flex;
	padding-top: 4rem;
}
.p-why .check .row .image {
	flex-basis: 50%;
	padding-left: 3rem;
}
.p-why .check .row .text {
	flex: 1;
	margin-top: -0.2em;
}
.p-why .arrow {
	position: relative;
	margin-bottom: -4rem;
	padding-top: 7rem;
}
.p-why .caution {
	padding: 11rem 0 0 0;
	background-image: url(../img/why-caution-bg.jpg);
	background-size: cover;
}
.p-why .caution .innre {
	padding: 0 3rem 0 20rem;
}
.p-why .caution h3 {
	margin: 0 auto;
	max-width: 39.8rem;
}
.p-why .caution .text {
	margin-top: 5rem;
	padding: 1.5rem 2.5rem;
	background-color: rgba(255,255,255,0.8);
}
.p-why .caution .note {
	padding: 2rem 0;
	text-align: right;
}

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

  鉄分が足りない状態では練習も休養も無駄になってしまうかも

*/
.p-deficiency .arrow {
	position: relative;
	margin-bottom: -3rem;
}

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

  商品訴求ブロック 1

*/
.p-product01 {
	position: relative;
	border-top: 1.5rem solid var(--color-red);
}
.p-product01 .note {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 3rem 5rem 3rem;
}

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

  鉄分をとるだけではNG日本人は鉄分を貯めるのが苦手

*/
.p-caution .media {
	background-color: #fff9ed;
	border: 0.2rem solid var(--color-red);
}
.p-caution .media .row {
	display: flex;
	margin: 0 -1.5rem;
}
.p-caution .media .row figure {
	padding: 0 1.5rem;
	flex-basis: 50%;
}
.p-caution .media .row figure img {
	box-shadow: 0.3rem 0.3rem 0 #ccc;
}
.p-caution .media .row figcaption {
	width: 200%;
	height: 1.5em;
	text-align: center;
	font-size: 3.4rem;
	transform-origin: 0 0;
	transform: scale(0.5);
}
.p-caution .media .row figcaption span:first-child {
	display: block;
	font-weight: 700;
}

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

  アバウト

*/
.p-about .block {
	padding-bottom: 6rem;
}
.p-about .block h2 {
	padding-bottom: 4rem;
}
.p-about .block:nth-child(odd) h2 {
	padding-left: 3rem;
}
.p-about .block:nth-child(even) h2 {
	padding-right: 3rem;
}
.p-about .block .row {
	display: flex;
}
.p-about .block02 .image {
	flex-basis: 22.6rem;
}
.p-about .block02 .text {
	flex: 1;
	margin-top: -0.2em;
	padding-left: 3rem;
}
.p-about .block03 .image {
	margin-right: -12rem;
	flex-basis: 43rem;
}
.p-about .block03 .text {
	flex: 1;
	margin-top: -0.2em;
}

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

  激しい運動をする人は積極的にフェリチン鉄を

*/
.p-medical .figure {
	display: flex;
}
.p-medical .figure-portrait {
	flex-basis: 31.8rem;
	flex-shrink: 0;
}
.p-medical .figure-profile {
	flex: 1;
	padding-left: 2rem;
	font-size: 2rem;
}
.p-medical .figure-profile-name {
	padding-bottom: 4rem;
	width: 20.4rem;
}
.p-medical .clinic {
	margin-top: 6rem;
	border: 0.5rem solid #424242;
}
.p-medical .clinic .inner {
	padding: 3rem 3rem 0 3rem;
}
.p-medical .clinic .text {
	padding: 2rem 3rem;
	background-color: #eee;
}

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

  3つの理由

*/
.p-reason {
	padding: 0 0 5rem 0;
	background-color: var(--color-red);
}
.p-reason .block {
	padding-bottom: 4rem;
}
.p-reason .number {
	width: 20rem;
}
.p-reason .frame {
	padding-bottom: 4rem;
	background-color: #fff;
}
.p-reason .inner {
	display: flex;
	flex-wrap: wrap;
	padding: 4rem 3rem 0 3rem;
}
.p-reason .text {
	margin-top: -0.2em;
	flex: 1;
}
.p-reason .block01 .image {
	flex-basis: 20.6rem;
}
.p-reason .block01 .text {
	padding-left: 3rem;
}
.p-reason .block02 .inner {
	flex-direction: row-reverse;
}
.p-reason .block02 .image {
	flex-basis: 21rem;
}
.p-reason .block02 .text {
	padding-right: 3rem;
}
.p-reason .block03 .image {
	flex-basis: 32rem;
}
.p-reason .block03 .text {
	padding-left: 3rem;
}

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

  「安心」へのお約束

*/
.p-promise {
	padding: 0 0 8rem 0;
	background-repeat: repeat;
	background-image: url(../img/bg-grid.png);
	background-size: 3rem 3rem;
}
.p-promise .frame {
	position: relative;
	margin-top: 5rem;
	padding-top: 4rem;
}
.p-promise .frame::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 3rem;
	right: 3rem;
	bottom: 0;
	background-color: #fff;
	border-top: 1rem solid var(--color-red);
	box-shadow: 0.3rem 0.3rem 0 #ccc;
}
.p-promise .frame h3 {
	position: relative;
}
.p-promise .frame .inner {
	position: relative;
	padding: 3.6rem 5.6rem;
}

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

  レピールオーガニックスの想い

*/
.p-thought .frame {
	position: relative;
	padding: 8rem 0;
	background-position: center;
	background-image: url(../img/thought-bg.jpg);
	background-size: cover;
	text-align: center;
}
.p-thought .frame .corner {
	position: absolute;
	width: 100%;
}
.p-thought .frame .corner:first-child {
	top: 2rem;
}
.p-thought .frame .corner:last-child {
	bottom: 2rem;
}
.p-thought .frame .corner::before,
.p-thought .frame .corner::after {
	content: '';
	display: block;
	position: absolute;
	width: 10rem;
	height: 10rem;
	background-image: url(../img/thought-corner.png);
	background-size: cover;
	transform-origin: 50%;
}
.p-thought .frame .corner:first-child::after {
	top: 2.4rem;
	left: 2.4rem;
}
.p-thought .frame .corner:first-child::before {
	top: 2.4rem;
	right: 2.4rem;
	transform: rotate(90deg);
}
.p-thought .frame .corner:last-child::after {
	bottom: 2.4rem;
	left: 2.4rem;
	transform: rotate(-90deg);
}
.p-thought .frame .corner:last-child::before {
	bottom: 2.4rem;
	right: 2.4rem;
	transform: rotate(-180deg);
}
.p-thought .frame p {
	padding: 0.8em 0;
}

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

 製品情報

*/
.p-product {
	padding: 5rem 3rem;
	border-top: 0.6rem solid #ccc;
	border-bottom: 0.6rem solid #ccc;
}
.p-product h2 {
	margin-bottom: 2.4rem;
	text-align: center;
	font-weight: 500;
	font-size: 4rem;
}
.p-product dl {
}
.p-product dt {
	padding: 1rem;
	background: rgba(0, 0, 0, .1);
	font-weight: 500;
	font-size: 2.6rem;
	text-align: center;
}
.p-product dd {
	padding: 2.8rem 0;
	font-size: 2.6rem;
}
.p-product ul {
	padding-left: 3.1rem;
	list-style: circle;
}
.p-product .last {
	padding: 2rem 0;
	text-align: center;
	font-size: 2.8rem;
}

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

 Q&A

*/
.p-faq {
	padding: 5rem 0 7rem 0;
	background-repeat: repeat;
	background-image: url(../img/bg-grid.png);
	background-size: 3rem 3rem;
}
.p-faq h2 {
	margin: 0 auto;
	width: 12rem;
}
.p-faq h3 {
	padding-bottom: 2rem;
	text-align: center;
	font-size: 3.6rem;
}
.p-faq .tab {
	position: relative;
}
.p-faq .tab::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.3rem;
	background-color: #ccc;
}
.p-faq .tab ul {
	display: flex;
	text-align: center;
	margin-bottom: 5rem;
	font-size: 2.2rem;
}
.p-faq .tab li {
	flex-basis: 33.333%;
}
.p-faq .tab li a {
	display: block;
	position: relative;
	padding: 3rem 0 1.5rem 0;
	font-weight: 700;
}
.p-faq .tab li a::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.3rem;
	background-color: var(--color-red);
	opacity: 0;
	transition: opacity 0.4s;
}
.p-faq .tab li a.active::after {
	opacity: 1;
}
.p-faq .frame {
	position: relative;
	border-right: 0.3rem solid #424242;
	border-left: 0.3rem solid #424242;
	background-color: #fff;
	transition: height 0.6s;
}
.p-faq .frame::before,
.p-faq .frame::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 0.3rem;
	background-color: #424242;
}
.p-faq .frame::before {
	top: 0;
}
.p-faq .frame::after {
	bottom: 0;
}
.p-faq .list {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	padding: 3rem;
	width: 100%;
	font-size: 2.6rem;
	opacity: 0;
	will-change: opacity;
	transition: opacity 0.3s;
}
.p-faq .stay .list {
	position: relative;
}
.p-faq .list:first-child {
	display: block;
}
.p-faq .list .question {
	display: block;
	position: relative;
	padding: 2rem 5rem 2rem 6.5rem;
	user-select: none;
}
.p-faq .list .question::before {
	content: '';
	display: block;
	position: absolute;
	top: 1.5rem;
	left: 0;
	width: 5.4rem;
	height: 5.4rem;
	background-position: center;
	background-image: url(../img/faq-q.svg);
	background-size: contain;
}
.p-faq .list .question::after {
	content: '';
	display: block;
	position: absolute;
	top: 2.5rem;
	right: 0;
	width: 3rem;
	height: 3rem;
	background-position: center;
	background-image: url(../img/faq-arrow.svg);
	background-size: contain;
	transition: transform 0.4s;
}
.p-faq .list .question.active::after {
	transform: rotate(180deg);
}
.p-faq .list .answer {
	overflow: hidden;
	position: relative;
	padding-left: 6.5rem;
	max-height: 0;
	transition: max-height 0.4s;
}
.p-faq .list .answer::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 5.4rem;
	height: 5.4rem;
	background-position: center;
	background-image: url(../img/faq-a.svg);
	background-size: contain;
}
.p-faq .list .answer .inner {
	padding: 0.5rem 0 2rem 0;
}

/* ■
----------------------------- */
#fixCta {
	width: 500px;
	position: fixed;
	bottom: 0px;
	right: 0;
	z-index: 998;
}
@media screen and (max-width: 767px) {
	#fixCta {
		width: 100%;
	}
}