@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------------ base_css ---------*/

body{
	font-family: "Noto Sans JP", sans-serif;
}

body main {
	min-height: 0;
}

.wrapper {
	position: relative;
	width: 100%;
}

.pc {
	display: block;
}

.sp {
	display: none;
}


.cap-hidden {
	font-size: 0rem;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    line-height: 0;
}

.f-s-color {
	color: #51b4a2;
}

.f-s-color2 {
	color: #ec7a8e;
}

.f-line {
	background: linear-gradient(transparent 50%, #fff0c0 0%)
}

@media screen and (max-width: 769px) {
	
	.pc {
		display: none;
	}
	
	.sp {
		display: block;
	}
}


/*------------------------------------------------------------ header ---------*/

.header {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	height: auto;
	padding: 1%;
	background-color: #fff;
	box-shadow: 0 0 #000;
}

.header > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

.header > div h1 {
	width: 33.333%;
	height: 100%;
	margin: 0;
}

.header > div h1 a {
	display: block;
    width: 70%;
}

.header > div h1 a img {
	width: fit-content;
}

.header > div nav {
	width: 33.333%;
	text-align: right;
}

.header > div nav ul {
	display: grid;
	grid-template-columns: repeat(2 ,1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}


@media screen and (max-width: 769px) {

	.header {
		position: fixed;
		max-height: 70px;
		height: auto;
		padding: 15px 0;
		box-shadow: 0 1px 4px #00000014;
	}
	
	.header > div h1 {
		max-width: 300px;
		width: 100%;
		margin: 0 auto;
	}
	
    .header > div h1 a {
        margin: auto;
		width: 85%;
    }
	
	.header > div h1 a img {
		width: auto;
		margin: auto;
	}
	
	.header > div nav {
		display: none;
	}
}



/*------------------------------------------------------------ mainvisual ---------*/

.mainvisual {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
}

.mainvisual img {
	max-width: auto;
	width: auto;
	margin: 0 auto;
}

@media screen and (max-width: 769px) {
	
	.mainvisual {
		margin-top: 70px;
		padding: 0;
	}
}



/*------------------------------------------------------------ CTA ---------*/

.cta {
	position: relative;
	z-index: 10;
	max-width: 1180px;
	margin: -60px auto;
	padding: 60px 40px;
	background-color: #fff;
	border-radius: 47px;
	box-shadow: 5px 5px 10px 3px #eee;
	text-align: center;
	overflow: hidden;
}

.cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #51b4a2;
}

.cta strong {
	font-size: 22px;
	color: #51b4a2;
	line-height: 1.8;
		
}

.cta ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

@media screen and (max-width: 769px) {
	
	.cta {
		margin: -60px 10px;
		padding: 50px 20px 20px;
	}
	
	.cta p{
		margin-bottom: 15px;
	}
	
	.cta strong {
		font-size: 19px;
	}
	
	.cta strong span {
		color: #000;
	}
	
	.cta ul {
		grid-template-columns: 100%;
		gap: 15px;
		margin: 20px 0 0;
	}
	
	section .cta {
		margin: -60px 0;
	}
}



/* ---------------------------------
  コンテナ/トークン
---------------------------------- */

.p-diet{
  /* ===== レイアウト ===== */
  max-width: 950px; 
  margin-inline: auto;
  padding-inline: 12px;              /* 端の食い込み防止のみ（小さめ） */

  /* ===== カラー ===== */
  --c-accent: #ff5f72;               /* 強調 */
  --c-accent-2: #ff8aa0;             /* 補助 */
  --c-dashed: #ff99a7;               /* 区切り点線 */
  --c-muted: #6b7280;                /* 注意文/薄文 */
  --c-note-bg: #fff6f8;              /* （前置きなど） */
  --c-card: #ffffff;                 /* カードBG */
  --c-card-bd: #f0c7cf;              /* カード枠 */

  /* ===== 角丸/影 ===== */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;

  /* ===== 余白トークン（スクショに合わせ微調整） ===== */
  --g-1: 8px;
  --g-2: 12px;
  --g-3: 16px;
  --g-4: 20px;
  --g-5: 26px;
  --g-6: 32px;
  --g-7: 40px;
  --g-8: 56px;

  /* ===== タイポ ===== */
  --fz-body: 18px;                   /* 本文 */
  --fz-lead: 20px;                   /* 導入文 */
  --fz-h2: 24px;                     /* セクション見出し */
  --fz-h3: 21px;                     /* サブ見出し/注意見出し */
  --fz-sub: 22px;                    /* flowサブタイトル/声の氏名 */
}

.p-diet, .p-diet *{
   box-sizing: border-box; 
  }

  .p-diet img{ 
  max-width:100%; 
  height:auto; 
}

#p-diet {
    padding-bottom: 60px;
}

/* ---------------------------------
  共通見出し（画像装飾は未再現）
---------------------------------- */

.p-diet__hdg{
    margin: 0 0 var(--g-5);
    font-size: var(--fz-h2);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 10px 15px;
    background-color: #6ac7b6;
    color: #fff;
	border-radius: var(--r-s);
}

/* 小見出し */
.p-diet__hdg--sub{
    margin: 0 0 var(--g-3);
    font-size: var(--fz-h3);
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-accent-2);
    border: 2px solid;
    padding: 12px 10px;
    letter-spacing: 0.02em;
	border-radius: var(--r-s);
}

@media screen and (max-width:769px) {
	.p-diet__hdg {
    margin: 0 0 var(--g-3);
    font-size: 20px;
}	

.p-diet__hdg--sub {
    font-size: 18px;
    letter-spacing: 0.02em;
}
}

/*------------------------------------------------------------ first ---------*/
.p-diet__first{
  display: grid;
  gap: var(--g-3);
  margin-top: var(--g-6);
}

@media screen and (max-width:769px) {
	.p-diet__compare .c-media, .p-diet__fee .c-media {
		margin-top: var(--g-3);
	}
}

/*------------------------------------------------------------ B & A ---------*/

.p-diet__compare .c-media,
.p-diet__fee .c-media{
  margin-top: var(--g-5);
}

.p-diet__ba {
    background-color: #f9f7f7;
    padding: var(--g-2) 0 var(--g-6);
	margin-bottom: var(--g-6);
}

.p-diet__ba-preface {
    padding-top: var(--g-2);
    text-align: center;
    margin-bottom: var(--g-6);
}

p.p-diet__ba-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--c-accent);
    margin-bottom: var(--g-2);
}

p.p-diet__ba-lead {
    font-size: var(--fz-body);
}

.p-diet__thought-list {
    padding: 0 30px;
}
.p-diet__thought-item {
    display: flex;
	align-items: center;
	justify-content: space-between;
    gap: var(--g-4);
    margin-bottom: var(--g-6);
}

.p-diet__thought-item:nth-child(even) {
    flex-direction: row-reverse;
}

.p-diet__thought-item:last-child {
    margin-bottom: 0;
}

.p-diet__thought-body {
    width: 55%;
}

.p-diet__thought-body .p-diet__note {
    font-size: 14px;
    margin-bottom: var(--g-1);
}

.p-diet__thought-body .p-diet__voice {
    border: 2px solid #ccc;
    border-radius: var(--r-s);
    padding: var(--g-4);
}

.p-diet__voice p strong {
    color: var(--c-accent);
}

.p-diet__voice-user {
    padding: var(--g-2) 0;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    margin-bottom: var(--g-2);
    text-align: center;
    font-weight: 600;
}

@media screen and (max-width:769px) {
.p-diet__compare .c-media, .p-diet__fee .c-media {
    margin-top: var(--g-3);
}

.p-diet__ba {
    padding: var(--g-4) 15px;
}


p.p-diet__ba-title {
    font-size: 20px;
}

p.p-diet__ba-lead {
    font-size: 16px;
	text-align: left;
}

.p-diet__thought-list {
    padding: 0;
}

.p-diet__thought-item,
.p-diet__thought-item:nth-child(even) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.p-diet__thought-media,
.p-diet__thought-body{
    width: 100%;
}


}

/*------------------------------------------------------------ 選ばれる理由 ---------*/
.p-diet__reasons {
    margin-bottom: var(--g-6);
}

.p-diet__reasons-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.p-diet__reason {
    border: 2px solid #51b4a2;
}

.p-diet__reason-box {
    padding: var(--g-2);
	padding-bottom: var(--g-3);
}

.p-diet__reason-ttl {
    font-size: var(--fz-body);
    font-weight: 500;
    margin-bottom: var(--g-1);
    color: #249580;
}

.p-diet__reason-ttl span {
	font-family: serif;
    font-size: 1.2em;
}

.p-diet__reasons-note {
    text-align: right;
    font-size: 14px;
    margin-top: var(--g-1);
}

@media screen and (max-width:769px) {
.p-diet__reasons-list {
    grid-template-columns: 1fr;
	gap: 20px;
}

.p-diet__reasons-note {
    text-align: left;
}
}

/*------------------------------------------------------------ ～とは？ ---------*/
.p-diet__treatment {
    width: 80%;
    margin: auto;
}

@media screen and (max-width:769px) {
	.p-diet__treatment{
		width: 100%;
	}
}

/*------------------------------------------------------------ 施術の流れ ---------*/

.p-diet__flow {
    margin: var(--g-6) 0;
}

.p-diet__flow-item {
    display: flex;
    margin-bottom: var(--g-3);
    padding-bottom: var(--g-3);
    border-bottom: 1px dashed var(--c-dashed);
    gap: 15px;
    justify-content: space-between;
}

.p-diet__flow-text {
	font-size: var(--fz-body);
}

.p-diet__flow-text .p-diet__flow-sub {
    font-size: var(--fz-lead);
    font-weight: 700;
    margin-bottom: var(--g-1);
    color: var(--c-accent);
}

.p-diet__flow-item .p-diet__flow-img {
    max-width: 390px;
    width: 100%;
    height: auto;
    border-radius: var(--r-l);
}

@media screen and (max-width:769px) {
	.p-diet__flow-item{
		flex-wrap: wrap;
	}

	.p-diet__flow-txt {
		font-size: 16px;
	}

	.p-diet__flow-item .p-diet__flow-img {
		max-width: fit-content;
	}
	
}

/*------------------------------------------------------------ 注意事項 ---------*/

.p-diet__notice-lead {
    color: var(--c-accent);
    font-weight: 600;
    margin-bottom: var(--g-1);
}

/*------------------------------------------------------------ Q & A ---------*/

.p-diet__qa {
	padding-top: 0;
	padding-bottom: 0;
	background-color: #fff;
}

.py-10 {
    padding-top: 0;
    padding-bottom: 30px;
}

.p-diet__qa-box{
	width: 90%;
}

.details:not(:last-child) {
	margin-bottom: 30px;
}

.details p {
	position: relative;
	padding: 15px 40px 15px 6vw;
    font-size: 18px;
    font-weight: bold;
    color: #51b3a1;
	border-bottom: 3px dotted #6ac7b6;
}

.details p::before,
.details p::after {
	content: "";
	position: absolute;
	top: 52%;
	transform: translateY(-50%);
	background-size: contain;
	background-repeat: no-repeat;
}

.details p::before {
	left: 3%;
	width: 30px;
	height: 40px;
	background-image: url("../images/code/img_qa_q.png");
}

.details p::after {
	right: 5%;
	width: 40px;
	height: 40px;
	background-image: url("../images/code/img_qa_plus.png");
}

.is-opened p::after {
	background-image: url("../images/code/img_qa_minus.png");
}

.details .p-4 {
    padding: 0.3rem 1rem;
}

.details .p-4 p {
	background-color: initial;
	border: 0;font-weight: normal;
	color: #4e4d49;
}

.details .p-4 p::before {
	top: 20%;
	transform: initial;
	background-image: url("../images/code/img_qa_a.png");
}

.details .p-4 p::after {
	display: none;
}

@media screen and (max-width: 769px) {
	.p-diet__qa-box {
	    width: 100%;
	}
	
	.py-10 {
		padding-top: 6vw;
		padding-bottom: 8vw;
	}
	
	.details p {
		position: relative;
		padding: 20px 40px 20px 10vw;
	}

	.details .answer.p-4 p {
		padding: 20px 10px 20px 10vw;
	}
	
	.details p::before {
		left: 3%;
		width: 24px;
		height: 30px;
	}
	
	.details p::after {
		right: 4%;
		width: 30px;
		height: 30px;
	}
	
	.details .p-4 {
	    padding: 0;
	}

	.details .p-4 p::before {
		top: 20px;
        left: 3%;
	}
	
	.map iframe {
		width: 100%;
	}
}

/*------------------------------------------------------------ バナー ---------*/
.p-diet__fee.bottom-bnr {
    padding: 30px 0 120px;
    background: linear-gradient(0deg, #f9f7f7, #ffffff);
}

/*------------------------------------------------------------ footer ---------*/

.footer {
    padding-top: 120px;
}

.footer > div {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 50px 60px 60px;
}

.footer > div h2 {
	margin-bottom: 15px;
	width: 80%;
}

.footer > div address {
	font-style: normal;
}

.footer > div p {
	margin-top: 10px;
}

.footer > div p a {
    color: #51b3a1;
}

.footer .copy {
    display: block;
    width: 100%;
    padding: 10px 3%;
    background-color: #51b3a1;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1px;
	color: #fff;
}

@media screen and (max-width: 769px) {
	
	.footer > div {
		grid-template-columns: 100%;
		padding: 50px 15px 60px;
	}
	
	.copy {
		margin-bottom: 15.12vw;
	}
}



/*------------------------------------------------------------ SP_ポップアップ ---------*/

.popup.active {
    display: block;
}

.fixed-btn {
	display: flex;
	column-gap: 2%;
	justify-content: center;
	align-items: center;
    position: fixed;
	bottom: 0;
    width: 100%;
    padding: 2%;
	background-color: #00000080;
	z-index: 100;
}

.popup .fixed-btn {
	opacity: 0;
    transform: translateY( 100% );
    transition: .4s;
}

.popup.active .fixed-btn {
	opacity: 1;
    transform: translateY( 0 );
}

.popup .fixed-btn a {
	display: block;
	width: 50%;
}

@media screen and (min-width: 768px) {
	
	.popup {
		display: none;
	}
	
	.popup.active {
		display: none;
	}
}