@charset "UTF-8";

/* 既存ページのトーンを保った追加セクション */
:root { 
--mf-ink:#65606b; --mf-gray:#b3c3ce; --mf-line:#dedbd8; --mf-soft:#f5fbff; --mf-accent:#7a9da8;  --mf-bace:#f0f5f9; 
}

.mf-enhance { color:var(--mf-ink); margin:5vw auto 10vw; }
.mf-enhance * { box-sizing:border-box; }
.mf-section { padding:16vw 5vw; }
.mf-enhance > .mf-section:first-child { padding-top:7vw; }
.mf-section:nth-child(even) { background:var(--mf-soft); }
.mf-inner { max-width:962px; margin:0 auto; }
.mf-kicker { margin:0 0 2vw; color:var(--mf-accent); font-family:"Raleway",sans-serif; font-size:3vw; letter-spacing:.25em; text-align:center; }
.mf-title { margin:0 0 5vw; font-size:5vw; font-weight:400; line-height:1.55; letter-spacing:.08em; text-align:center; }
.mf-title-line { display:block; }
.mf-lead { max-width:100%; margin:0 auto 8vw; font-size:3vw; line-height:2; text-align:left; }
.mf-note { margin:8vw auto 0; padding:5vw 6vw; border-left:3px solid var(--mf-accent); background:#fff; font-size:3vw; line-height:2; }

/* 料金表の補足 */
.course-price { display:grid; grid-template-columns:1fr; gap:5vw; margin-top:8vw; }
.course-price .price { width:100%; margin:0; overflow:hidden; border:1px solid var(--mf-gray); border-radius:1vw; background:#fff; box-shadow:0 10px 28px rgba(65,52,47,.08); }
.course-price .price dt { margin:0; padding:4vw 3vw; border:0; border-bottom:1px solid var(--mf-gray); background:transparent; color:inherit; font-size:4vw; text-align:center; }
.course-price .price dd { margin:0; padding:7vw 5vw 6vw; border:0; color:inherit; font-size:7vw; line-height:1.3; text-align:center; min-height:0; }
.course-price .price dd small { font-size:3vw; font-weight:400; }
.course-price .price dd .mf-count { display:block; margin:5vw 0 0; padding:3vw 3vw; border-top:1px solid var(--mf-gray); border-bottom:1px solid var(--mf-gray); background:#fafafa; color:inherit; font-size:3vw; font-weight:400; line-height:2; }
.course-price .price dd .mf-count strong { color:inherit; font-size:3vw; }
.course-price .price dd .sub { margin:4vw 0 0; color:inherit; font-size:3vw; font-weight:400; line-height:1.8; }

.mf-price-help { margin:8vw auto 0; padding:7vw 5vw; border:2px solid var(--mf-gray); background:#fff; text-align:center; box-shadow:0 8px 24px rgba(60,50,46,.06); }
.mf-price-help-label { display:inline-block; margin:0 0 3vw; padding:1vw 4vw; border:1px solid var(--mf-gray); border-radius:5vw; font-size:2vw; letter-spacing:.08em; }
.mf-price-help h4 { margin:0 0 3vw; font-size:4vw; font-weight:400; line-height:1.6; letter-spacing:0; white-space:nowrap; }
.mf-price-help p { max-width:100%; margin:0 auto; font-size:3vw; line-height:1.9; text-align:left; }
.mf-price-help p+p { margin-top:1vw; }

.mf-original-plan { margin:5vw auto 0; padding:5vw 4vw; border-top:1px solid var(--mf-gray); border-bottom:1px solid var(--mf-gray); background:#fafafa; text-align:center; }
.mf-original-plan span { font-size:3vw; line-height:1.8; }

/* 4週間の利用例 */
.mf-calendar-head { display:flex; align-items:center; justify-content:center; gap:4vw; margin-bottom:6vw; }
.mf-calendar-head span { color:var(--mf-accent); font:2vw "Raleway",sans-serif; letter-spacing:.18em; }
.mf-calendar-head strong { font:6vw Georgia,serif; font-weight:400; }

.mf-schedule-intro { width:100%; display:flex; flex-direction:row; align-items:center; gap:4vw; margin:0 auto 8vw; overflow:visible; }
.mf-schedule-intro .mf-lead { width:auto; max-width:none; min-width:0; flex:1 1 0; margin:0; padding:0; font-size:3vw; line-height:1.9; letter-spacing:0; text-align:left; overflow-wrap:anywhere; }
.mf-schedule-illustration { width:34vw; max-width:132px; flex:0 0 34vw; margin:0; overflow:hidden; border-radius:50% 50% 2vw 2vw; background:var(--mf-soft); aspect-ratio:4/5; }

.mf-calendar { display:flex; flex-direction:column; gap:6vw; }
.mf-cal-week { overflow:hidden; border:1px solid var(--mf-line); background:#fff; }
.mf-cal-week-name { margin:0; padding:3vw; background: var(--mf-accent); color:#fff; font-family:"Raleway",sans-serif; font-size:3vw; font-weight:400; letter-spacing:.14em; text-align:center; }
.mf-cal-days { display:flex; flex-direction:column; }
.mf-day { display:flex; border-top:1px solid var(--mf-line); }
.mf-day:first-child { border-top:0; }
.mf-day--empty { align-items:center; padding:3vw 4vw; background:var(--mf-bace); color:var(--mf-accent); font-family:"Raleway",sans-serif; font-size:3vw; letter-spacing:.1em; }
.mf-day--active { flex-direction:column; padding:0; background:#fff; }
.mf-day-head { padding:2vw 4vw; background:var(--mf-gray); color: #fff; font-family:"Raleway",sans-serif; font-size:3vw; font-weight:bold; letter-spacing:.1em; }
.mf-day--personal .mf-day-head { background:var(--mf-gray); color: #fff ; }
.mf-visit { position:relative; padding:5vw 4vw; }
.mf-visit-photo { width:calc(100% + 8vw); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; margin:-5vw -4vw 5vw; background:linear-gradient(135deg,#e8e2de,#f4f1ef); color:var(--mf-accent); text-align:center; }
.mf-visit-photo span { padding:2vw 2vw; border:1px solid var(--mf-soft); font-family:"Raleway",sans-serif; font-size:2vw; letter-spacing:.12em; line-height:1.7; }
.mf-visit-no { position:absolute; right:3vw; top:3vw; color:var(--mf-soft); font:6vw Georgia,serif; }
.mf-visit-time { margin-bottom:4vw; font:8vw Georgia,serif; font-weight:400; line-height:1; }
.mf-visit-tag { display:inline-block; margin-bottom:2vw; padding:1vw 2vw; border-radius:5vw; background:var(--mf-soft); color:var(--mf-accent); font-size:2vw; }
.mf-visit--personal .mf-visit-tag { background:var(--mf-soft); color:var(--mf-accent); }
.mf-visit h4 { margin:0 0 2vw; font-size:3vw; font-weight:400; line-height:1.5; }
.mf-visit p { margin:0; color:var(--mf-gray); font-size:2vw; line-height:1.8; }

.mf-photo { display:flex; min-height:55vw; align-items:center; justify-content:center; background:linear-gradient(135deg,#e8e2de,#f4f1ef); color:var(--mf-accent); text-align:center; }
.mf-photo span { padding:3vw 4vw; border:1px solid var(--mf-soft); font-family:"Raleway",sans-serif; font-size:3vw; letter-spacing:.18em; line-height:1.8; }

.mf-week-body { display:flex; flex-direction:column; justify-content:center; padding:7vw 6vw; }
.mf-week-num { color:var(--mf-accent); font-family:"Raleway",sans-serif; font-size:3vw; letter-spacing:.2em; }
.mf-week h4 { margin:2vw 0 3vw; font-size:4vw; font-weight:400; line-height:1.6; }
.mf-week p { margin:0; color:var(--mf-gray); font-size:3vw; line-height:1.9; }

/* 悩み・特徴 */
.mf-concerns { display:grid; grid-template-columns:1fr; gap:3vw; margin:0; padding:0; list-style:none; }
.mf-concerns li { position:relative; padding:4vw 3vw 4vw 10vw; border-bottom:1px solid var(--mf-line); font-size:3vw; }
.mf-concerns li:before { content:"?"; position:absolute; left:2vw; top:3vw; color:var(--mf-accent); font-family:Georgia,serif; font-size:5vw; font-style:italic; }

.mf-three { display:grid; grid-template-columns:1fr; gap:3vw; }
.mf-three article { display:grid; grid-template-columns:34% 66%; align-items:stretch; overflow:hidden; padding:8vw 6vw; border:1px solid var(--mf-line); background:#fff; text-align:left; }
.mf-three .mf-photo { min-height:0; height:100%; width: 30vw;}
.mf-photo img {  width: 100%;  height: 100%;  object-fit: cover;}
.mf-three .mf-photo span { font-size:2vw; }
.mf-three-body { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:3vw; align-content:center; padding:4vw 0 4vw 4vw; }
.mf-three i { grid-row:1 / 3; align-self:center; display:block; color:var(--mf-accent); font:7vw Georgia,serif; }
.mf-three h4 { margin:0 0 1vw; font-size:4vw; font-weight:400; text-align:left; }
.mf-three p { margin:0; color:var(--mf-gray); font-size:3vw; line-height:1.7; text-align:left; }


.mf-concern-cards { display:grid; grid-template-columns:1fr; gap:3vw; }
.mf-concern-card { position:relative; overflow:hidden; border:1px solid var(--mf-line); background:#fff; display:grid; grid-template-columns:38% 62%; align-items:stretch; }
.mf-concern-card:nth-child(even) { grid-template-columns:62% 38%; }
.mf-concern-card:nth-child(even) .mf-photo { order:2; }
.mf-concern-card .mf-photo { min-height:0; height:100%; aspect-ratio:1/1; }
.mf-concern-card .mf-photo span { font-size:2vw; }
.mf-concern-body { position:relative; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:4vw; }
.mf-concern-body:before { display:none; }
.mf-concern-body h4 { margin:0 0 1vw; color:var(--mf-accent); font-size:3vw; font-weight:400; line-height:1.5; }
.mf-concern-body p { margin:0; color:var(--mf-gray); font-size:2vw; line-height:1.7; }

/* 比較 */
.mf-table-wrap { width:100%; margin:0; overflow:visible; }
.mf-table { width:100%; min-width:0; table-layout:fixed; border-collapse:separate; border-spacing:0; background:#fff; text-align:center; box-shadow:0 8px 28px rgba(60,50,46,.06); }
.mf-table th:first-child,.mf-table td:first-child { width:31%; }
.mf-table th:not(:first-child),.mf-table td:not(:first-child) { width:23%; }
.mf-table th,.mf-table td { padding:3vw 1vw; border:0; border-bottom:1px solid var(--mf-line); font-size:2vw; line-height:1.45; word-break:break-word; }
.mf-table th { color:var(--mf-accent); font-weight:400; }
.mf-table th:last-child { border-radius:1vw 1vw 0 0; background:var(--mf-accent); color:#fff; font-weight:bold; }
.mf-table td:first-child { padding-left:2vw; color:var(--mf-ink); font-weight:bold; text-align:left; font-size:2vw; }
.mf-table td:not(:first-child) { color:var(--mf-accent); }
.mf-table td:last-child { background:var(--mf-soft); color:var(--mf-accent); font-size:4vw; font-weight:bold; }
.mf-table tbody tr:last-child td { border-bottom:0; }
.mf-small { margin:2vw 0 0; color:#888; font-size:2vw; line-height:1.6; }

/* FAQ・CTA */
.mf-faq { border-top:1px solid var(--mf-line); }
.mf-faq details { border-bottom:1px solid var(--mf-line); }
.mf-faq summary { padding:5vw 1vw; cursor:pointer; font-size:3vw; font-weight:bold; }
.mf-faq details p { margin:0; padding:0 1vw 5vw; color:var(--mf-gray); font-size:3vw; }

.mf-cta { position:relative; overflow:hidden; padding:20vw 5vw; background:linear-gradient(135deg, #acc0cd, #e3f3fd); color:#493f3c; text-align:center; }
.mf-cta:before,.mf-cta:after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.38); }
.mf-cta:before { width:70vw; height:70vw; left:-24vw; top:-26vw; }
.mf-cta:after { width:50vw; height:50vw; right:-16vw; bottom:-21vw; }
.mf-cta .mf-inner { position:relative; z-index:1; }
.mf-cta .mf-title { color:var(--mf-ink); }
.mf-cta p { max-width:100%; margin:0 auto 7vw; font-size:3vw; line-height:2; }

.mf-buttons { display:flex; justify-content:center; gap:4vw; flex-wrap:wrap; }
.mf-button { display:inline-flex; width:100%; min-width:0; min-height:15vw; align-items:center; justify-content:center; border:1px solid var(--mf-accent); border-radius:8vw; background:var(--mf-accent); color:#fff; font-size:3vw; letter-spacing:.08em; text-decoration:none; box-shadow:0 8px 20px rgb(103 120 149 / 13%); }
.mf-button:first-child { background:var(--mf-accent); color:#fff; }
.mf-button:last-child { background:#fff; color:var(--mf-accent); }

/* PC-size 
======================================================================================*/
@media screen and (min-width: 736px) {
  .mf-enhance { margin: 25px 0 100px; }
  .mf-section { padding:80px 20px; }
  .mf-enhance > .mf-section:first-child { padding-top:42px; }
  .mf-kicker { margin:0 0 10px; font-size:12px; }
  .mf-title { margin:0 0 20px; font-size:30px; }
  .mf-lead { max-width:700px; margin:0 auto 45px; font-size:14px; text-align:center; }
  .mf-note { margin:30px auto 0; padding:22px 26px; font-size:13px; }

  /* 料金表の補足 */
  .course-price { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-top:35px; }
  .course-price .price { width: -webkit-calc(100% / 3 - 14px);    width: calc(100% / 3 - 14px); border-radius:12px; }
  .course-price .price dt { padding:16px 12px; font-size:16px; }
  .course-price .price dd { min-height:auto; padding:27px 18px 22px; font-size:27px; }
  .course-price .price dd small { font-size:11px; }
  .course-price .price dd .mf-count { margin:22px 0 0; padding:14px 12px; font-size:12px; }
  .course-price .price dd .mf-count strong { font-size:14px; }
  .course-price .price dd .sub { margin:19px 0 0; font-size:12px; }

  .mf-price-help { margin:35px auto 0; padding:32px 30px; }
  .mf-price-help-label { margin:0 0 12px; padding:4px 15px; border-radius:20px; font-size:11px; }
  .mf-price-help h4 { margin:0 0 14px; font-size:22px; white-space:normal; }
  .mf-price-help p { max-width:720px; font-size:13px; text-align:center; }
  .mf-price-help p+p { margin-top:7px; }

  .mf-original-plan { margin:22px auto 0; padding:20px 22px; }
  .mf-original-plan span { font-size:13px; }

  /* 4週間の利用例 */
  .mf-calendar-head { gap:16px; margin-bottom:24px; }
  .mf-calendar-head span { font-size:11px; }
  .mf-calendar-head strong { font-size:26px; }

  .mf-schedule-intro { max-width:720px; flex-direction:row; gap:28px; margin:0 auto 42px; }
  .mf-schedule-intro .mf-lead { flex:1 1 auto; font-size:14px; }
  .mf-schedule-illustration { width:185px; max-width:none; flex:0 0 185px; border-radius:50% 50% 8px 8px; }

  .mf-calendar { gap:24px; }
  .mf-cal-week { display:flex; flex-direction:row; background:#fff; border:1px solid var(--mf-line); overflow:hidden; }
  .mf-cal-week-name { flex:0 0 45px; writing-mode:vertical-lr; transform:rotate(180deg); padding:15px 0; background:var(--mf-accent); color:#fff; font-size:20px; letter-spacing:.1em; text-align:center; margin:0; }
  .mf-cal-days { flex:1 1 auto; display:flex; flex-direction:row; }
  .mf-day { border-top:0; border-left:1px solid var(--mf-line); display:flex; }
  .mf-day:first-child { border-left:0; }
  .mf-day--empty { flex:1; flex-direction:column; justify-content:flex-start; align-items:center; padding:0; background:#fdfdfc; }
  .mf-day--empty span { writing-mode:horizontal-tb; display:block; width:100%; text-align:center; padding:10px 0; font-size:12px; letter-spacing:.05em;  border-bottom:1px solid var(--mf-line);  background: var(--mf-bace);
  color: var(--mf-accent);box-sizing:border-box; }
  .mf-day--active { flex:4; flex-direction:column; min-width:0; max-width: 270px; background:#fff; }
  .mf-day-head { padding:10px 15px; font-size:12px; border-bottom:1px solid var(--mf-line);  }
  .mf-visit { padding:20px; }
  .mf-visit-time { font-size:32px; margin-bottom:12px; }
  .mf-visit-photo { margin:-20px -20px 15px; width:calc(100% + 40px); aspect-ratio:16/9; }
  .mf-visit-photo span { font-size:11px; padding:8px 10px; }
  .mf-visit-tag { margin-bottom:9px; padding:3px 9px; font-size:10px; }
  .mf-visit h4 { font-size:16px; margin:0 0 8px; }
  .mf-visit p { font-size:11px; }
  .mf-visit-no { right:14px; top:12px; font-size:26px; }

  .mf-photo { min-height:270px; }
  .mf-photo span { padding:12px 18px; font-size:11px; }

  .mf-week-body { padding:35px 38px; }
  .mf-week-num { font-size:11px; }
  .mf-week h4 { margin:8px 0 12px; font-size:21px; }
  .mf-week p { font-size:13px; }

  /* 悩み・特徴 */
  .mf-concerns { grid-template-columns:1fr 1fr; gap:12px 30px; }
  .mf-concerns li { padding:16px 12px 16px 38px; font-size:13px; }
  .mf-concerns li:before { left:10px; top:11px; font-size:22px; }

  .mf-three { grid-template-columns:repeat(3,1fr); gap:18px; }
  .mf-three article { display:block; padding:0; text-align:center; }
  .mf-three .mf-photo { height:auto; min-height:190px; width: 100%;}
  .mf-three .mf-photo span { font-size:11px; }
  .mf-three-body { display:block; padding:28px 22px 32px; }
  .mf-three i { display:block; font-size:36px; margin:0 auto; }
  .mf-three h4 { margin:8px 0 12px; font-size:21px; text-align:center; }
  .mf-three p { font-size:12px; text-align:center; }

  .mf-concern-cards { grid-template-columns:repeat(3,1fr); gap:18px; }
  .mf-concern-card { display:block; }
  .mf-concern-card:nth-child(even) { display:block; }
  .mf-concern-card .mf-photo { height:auto; min-height:190px; aspect-ratio:auto; }
  .mf-concern-card .mf-photo span { font-size:11px; }
  .mf-concern-body { display:block; min-height:150px; padding:27px 21px; }
  .mf-concern-body:before { display:block; content:""; position:absolute; top:-12px; left:30px; border-width:0 12px 12px; border-style:solid; border-color:transparent transparent #fff; }
  .mf-concern-body h4 { margin:0 0 8px; font-size:15px; }
  .mf-concern-body p { font-size:12px; }

  /* 比較 */
  .mf-table-wrap { width:100%; overflow:visible; }
  .mf-table { table-layout:fixed; }
  .mf-table th,.mf-table td { padding:17px 12px; font-size:12px; }
  .mf-table th:last-child { border-radius:5px 5px 0 0; }
  .mf-table td:first-child { padding-left:22px; font-size:12px; }
  .mf-table td:last-child { font-size:15px; }
  .mf-small { margin:10px 0 0; font-size:10px; }

  /* FAQ・CTA */
  .mf-faq summary { padding:20px 5px; font-size:14px; }
  .mf-faq details p { padding:0 5px 20px; font-size:13px; }

  .mf-cta { padding:82px 20px; }
  .mf-cta:before { width:260px; height:260px; left:-90px; top:-100px; }
  .mf-cta:after { width:190px; height:190px; right:-60px; bottom:-80px; }
  .mf-cta p { max-width:650px; margin:0 auto 28px; font-size:13px; }

  .mf-buttons { gap:15px; }
  .mf-button { width:auto; min-width:280px; min-height:58px; border-radius:30px; font-size:13px; }
}