@charset "UTF-8";
/*
    Template: swell
    Theme Name: トツカーナ教室 SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: トツカーナ教室の運営・更新用SWELL子テーマ
    Version: 1.1.0
    Author: トツカーナ教室

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   トツカーナ教室 デザイントークン
   ========================================================= */
:root{
  --c-primary:      #048778;
  --c-primary-dark: #01465a;
  --c-accent:       #3aa9a0;
  --c-navy:         #001c3f;

  --c-box-yellow:   #fdf6d8;
  --c-box-green:    #e8f3ec;
  --c-marker:       #ffe58a;
  --c-uline:        #f5a623;

  --font-base:  "M PLUS 1p","游ゴシック","Yu Gothic",sans-serif;
  --font-round: "M PLUS Rounded 1c","M PLUS 1p",sans-serif;

  --radius-box:   24px;
  --radius-label: 1.4em;
  --shadow-card: 0 12px 30px rgba(0, 70, 82, .1);
  --content-width: 1100px;
}

/* =========================================================
   基本デザイン
   SWELLのレイアウト機能は維持し、雰囲気だけを整える。
   ========================================================= */
body,
.editor-styles-wrapper{
  color:#24333a;
  font-family:var(--font-base);
  font-size:16px;
  line-height:1.8;
}

:where(.post_content,.editor-styles-wrapper) :is(h2,h3,h4){
  color:var(--c-navy);
  font-family:var(--font-round);
  font-weight:800;
  letter-spacing:.02em;
}

:where(.post_content,.editor-styles-wrapper) h2{
  border-left:7px solid var(--c-primary);
  background:linear-gradient(90deg,rgba(4,135,120,.09),rgba(4,135,120,0));
  padding:.72em .9em;
}

:where(.post_content,.editor-styles-wrapper) h3{
  border-bottom:2px solid rgba(4,135,120,.25);
  padding-bottom:.45em;
}

:where(.post_content,.editor-styles-wrapper) a:not(.swell-block-button__link){
  text-underline-offset:.18em;
}

:where(.post_content,.editor-styles-wrapper) img{
  height:auto;
}

:focus-visible{
  outline:3px solid #f5a623;
  outline-offset:3px;
}

/* SWELLのボタンをブランドカラーへ寄せる */
.swell-block-button__link,
.is-style-btn_normal a,
.is-style-btn_solid a{
  min-height:48px;
  border-radius:999px;
  background:var(--c-primary);
  box-shadow:0 7px 0 var(--c-primary-dark);
  font-family:var(--font-round);
  font-weight:800;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.swell-block-button__link:hover,
.is-style-btn_normal a:hover,
.is-style-btn_solid a:hover{
  background:var(--c-primary-dark);
  box-shadow:0 4px 0 #003441;
  transform:translateY(3px);
}

/* =========================================================
   編集画面から再利用する汎用ブロック
   ========================================================= */
.c-section-lead{
  max-width:760px;
  margin-right:auto;
  margin-left:auto;
  text-align:center;
}

.c-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.c-feature-card{
  height:100%;
  padding:clamp(24px,4vw,40px);
  border:1px solid rgba(4,135,120,.16);
  border-radius:var(--radius-box);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.c-feature-card > :first-child{ margin-top:0; }
.c-feature-card > :last-child{ margin-bottom:0; }

.c-info-box{
  padding:clamp(24px,4vw,40px);
  border:2px solid var(--c-primary);
  border-radius:var(--radius-box);
  background:var(--c-box-green);
}

.c-cta{
  overflow:hidden;
  padding:clamp(32px,6vw,64px) clamp(20px,5vw,56px);
  border-radius:var(--radius-box);
  background:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.18) 0 5px,transparent 6px),
    linear-gradient(135deg,var(--c-primary-dark),var(--c-primary));
  background-size:34px 34px,auto;
  color:#fff;
  text-align:center;
}
.c-cta :is(h2,h3,p){ color:inherit; }
.c-cta h2{ border:0; background:none; padding:0; }
.c-cta .swell-block-button__link{
  background:#fff;
  color:var(--c-primary-dark);
  box-shadow:0 7px 0 rgba(0,0,0,.2);
}

/* =========================================================
   c-bubble-label … 見出しに添える吹き出しラベル
   （「メッセージ」「おすすめポイント」等）
   ========================================================= */
.c-bubble-label{
  display:inline-block; position:relative;
  padding:.5em 1.3em;
  background-color:var(--c-accent);
  background-image:radial-gradient(rgba(255,255,255,.4) 1.7px, transparent 1.7px);
  background-size:9px 9px;
  color:#fff; font-family:var(--font-round); font-weight:800;
  font-size:1.05rem;
  line-height:1.3; text-align:center;
  border-radius:var(--radius-label);
}
.c-bubble-label::after{
  content:""; position:absolute; left:26%; bottom:-9px;
  border:9px solid transparent; border-top-color:var(--c-accent);
  transform:rotate(6deg);
}

/* 見出し（例：「担当スタッフからの」＋ラベル） */
.c-msg-head{
  display:flex; align-items:flex-start; justify-content:center; gap:.4em;
  margin-bottom:1.2rem;
  font-family:var(--font-round); font-weight:800; color:var(--c-navy);
  font-size:clamp(1.6rem,3.8vw,2.2rem); line-height:1.4;
}
.c-msg-head .c-bubble-label{ font-size:.58em; transform:translateY(-.3em); }

/* =========================================================
   c-staff-msg … キャラクター発話吹き出し（ちひろ／りん）
   通常版：キャラが左・しっぽは吹き出し左端
   --rev 版：キャラが右・しっぽは吹き出し右端（左右反転）
   --green 版：淡緑ボックス（補足・ポジティブ用途）
   ========================================================= */
.c-staff-msg{
  display:flex; align-items:flex-end; gap:0;
  margin:2rem 0;
}
.c-staff-msg--rev{ flex-direction:row-reverse; }

.c-staff-msg__fig{ flex:0 0 150px; align-self:flex-end; z-index:1; }
.c-staff-msg__fig img{ width:100%; height:auto; display:block; }
.c-staff-msg .c-staff-msg__fig{ margin-right:-10px; }
.c-staff-msg--rev .c-staff-msg__fig{ margin-right:0; margin-left:-10px; }

.c-staff-msg__bubble{
  --bubble-bg:var(--c-box-yellow);
  position:relative; flex:1;
  padding:1.8rem 2.2rem;
  background:var(--bubble-bg); border-radius:var(--radius-box);
  font-family:var(--font-base); font-size:1.15rem; line-height:2; color:#333;
}
.c-staff-msg--green .c-staff-msg__bubble{ --bubble-bg:var(--c-box-green); }
.c-staff-msg__bubble p{ margin:0 0 1em; }
.c-staff-msg__bubble p:last-child{ margin-bottom:0; }

/* しっぽ：通常版（左） */
.c-staff-msg__bubble::before{
  content:""; position:absolute; left:-16px; top:44px;
  border-top:15px solid transparent; border-bottom:15px solid transparent;
  border-right:18px solid var(--bubble-bg);
}
/* しっぽ：反転版（右） */
.c-staff-msg--rev .c-staff-msg__bubble::before{ content:none; }
.c-staff-msg--rev .c-staff-msg__bubble::after{
  content:""; position:absolute; right:-16px; top:44px;
  border-top:15px solid transparent; border-bottom:15px solid transparent;
  border-left:18px solid var(--bubble-bg);
}

@media (max-width:600px){
  .c-staff-msg,
  .c-staff-msg--rev{
    flex-direction:column-reverse; align-items:center; gap:.5rem;
  }
  .c-staff-msg__fig,
  .c-staff-msg--rev .c-staff-msg__fig{
    flex:0 0 auto; width:110px; margin:0;
  }
  .c-staff-msg__bubble{ width:100%; }
  /* スマホは通常・反転ともキャラが吹き出しの下＝しっぽは下向きに統一 */
  .c-staff-msg__bubble::before,
  .c-staff-msg--rev .c-staff-msg__bubble::before{
    content:""; left:50%; right:auto; top:auto; bottom:-14px; transform:translateX(-50%);
    border-top:16px solid var(--bubble-bg); border-bottom:none;
    border-left:15px solid transparent; border-right:15px solid transparent;
  }
  .c-staff-msg--rev .c-staff-msg__bubble::after{ content:none; }
}

/* =========================================================
   c-marker / c-uline … 手書き風マーカー・アンダーライン
   ========================================================= */
.c-marker{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M1,8 C30,4 70,12 99,7 L99,23 C70,27 30,19 1,24 Z' fill='%23ffe58a'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:100% .9em; background-position:0 .55em;
  padding:0 .15em;
}

/* SWELL標準マーカーにも旧サイトの手書き感を反映 */
:where(.post_content,.editor-styles-wrapper) [class*="mark_yellow"]{
  background:linear-gradient(transparent 55%,rgba(255,229,138,.85) 55% 90%,transparent 90%);
}

@media (max-width:767px){
  .c-feature-grid{ grid-template-columns:1fr; gap:16px; }
  .c-feature-card{ padding:24px; }
  .c-cta{ border-radius:18px; }
  :where(.post_content,.editor-styles-wrapper) h2{ padding:.65em .75em; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}
.c-uline{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' preserveAspectRatio='none'%3E%3Cpath d='M2,7 q5,-6 10,0 t10,0 t10,0' fill='none' stroke='%23f5a623' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:40px 8px; background-position:0 100%;
  padding-bottom:.2em;
}