@charset "utf-8";
/* ============================================================
   yy-shared.css — 横浜予備校 pamphlet3 / price-evidence 共通CSS
   本体サイト yokohama-yobikou.jp の実測値に合わせたトークン、
   ヘッダー・ドロワー・フッター、ボタン、表コンポーネント。
   本体 style.css は読み込まない（7,628行・クラス衝突回避のため）。
   ============================================================ */

:root{
  /* 配色（本体サイト style.css の実値） */
  --c-primary:#800000;
  --c-primary-d:#5A0000;
  --c-primary-h:#B30000;
  --c-mark:#F2FFA6;
  --c-mark-bg:#FFFDF0;
  --c-alert:#FF3A3A;
  --c-line-green:#06C755;

  --c-ink:#212529;
  --c-ink-2:#495057;
  --c-sub:#6C757D;

  --c-bg:#FFFFFF;
  --c-bg-2:#FBF8F5;
  --c-lattice:#F9F2F2;

  --c-line:#DEE2E6;
  --c-line-card:#E7E1DA;

  /* 角丸は3値のみ */
  --r:20px;
  --r-lg:30px;
  --r-pill:999px;

  --sd:0 10px 28px rgba(60,45,25,.06);
  --sd-h:0 14px 34px rgba(60,45,25,.10);

  --f-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-body:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

  --toggle-size:90px;
  --wrap-pad:1rem;
  --radius-body:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3e%3cpath fill='%23fff' d='M0 0V35H35C15.6598 35 0 19.3402 0 0Z' /%3e%3c/svg%3e");
  --radius-wrapper:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35'%3e%3cpath fill='%23800000' d='M0 0V35H35C15.6598 35 0 19.3402 0 0Z' /%3e%3c/svg%3e");
  --lattice:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23F9F2F2' fill-rule='evenodd' clip-rule='evenodd' %3e%3cpath d='M0 0H15.5V1H1V15.5H0V0Z'/%3e%3c/svg%3e");
}
@media(max-width:767.98px){
  :root{--toggle-size:70px}
}

*,*::before,*::after{box-sizing:border-box}

html{
  font-size:100%;
  font-feature-settings:"palt";
  background-color:var(--c-primary);
  scroll-behavior:smooth;
  scroll-padding-top:24px;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.75;
  color:var(--c-ink);
  background-color:var(--c-primary);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}

/* ============ ページ外枠（本体サイトの .l-wrapper 構造） ============ */
.yy-wrapper{
  width:100%;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  background-color:var(--c-primary);
  padding:var(--wrap-pad);
  position:relative;
  z-index:1;
}
.yy-main{
  background-color:var(--c-bg);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  /* 子要素の背景が角を塗り潰さないようクリップする（下角が直角になる不具合の修正） */
  overflow:hidden;
}
/* 白い面のパネル。本体構造＝「白面が下角丸30pxで閉じる→maroon面→次の白面が上角丸30pxで始まる」
   maroon系セクションの前後でこのパネルに束ねることで、面の切替が角丸で繋がる。 */
.yy-panel{
  background-color:var(--c-bg);
  border-radius:var(--r-lg);
  overflow:hidden;/* 中のセクション背景が角を塗り潰さないようにする */
}
.yy-panel-head{border-radius:0 0 var(--r-lg) var(--r-lg)}/* ヘッダーから連続するので上は角なし */
@media(max-width:767.98px){
  .yy-wrapper{padding:0}
  .yy-main,.yy-panel,.yy-panel-head{border-radius:0}
}

/* ============ ヘッダー（本体と同一） ============ */
.yy-header{
  height:var(--toggle-size);
  background-color:var(--c-bg);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  margin-right:var(--toggle-size);
  position:relative;
}
@media(min-width:768px){
  .yy-header::before{
    content:"";
    display:block;
    position:absolute;
    background-image:var(--radius-body);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    width:var(--r-lg);
    height:var(--r-lg);
    bottom:0;
    right:calc(-1 * var(--r-lg));
  }
}
@media(max-width:767.98px){
  .yy-header{border-radius:0;margin-right:0;padding-right:var(--toggle-size)}
}
.yy-header-container{
  display:flex;
  align-items:center;
  height:100%;
  width:100%;
  padding:0 clamp(1rem,1.3333vw,2rem);
}
.yy-brand{
  width:clamp(9.375rem,15.12vw,11.25rem);
  margin:0;
  line-height:1;
}
@media(min-width:768px){.yy-brand{margin-left:1rem}}
.yy-brand span{
  display:block;
  font-size:.6875rem;
  white-space:nowrap;
  margin:0 0 .5rem .5rem;
  color:var(--c-ink);
  font-weight:400;
}
@media(max-width:767.98px){.yy-brand span{display:none}}
.yy-brand img{width:100%;height:auto}

.yy-header-nav{
  margin-left:auto;
  font-size:clamp(.625rem,1vw,.875rem);
}
.yy-header-nav ul{list-style:none;padding:0;margin:0;display:flex;align-items:center}
.yy-header-nav ul li a{
  display:block;
  color:var(--c-ink);
  font-weight:700;
  padding:1rem clamp(.5rem,.6667vw,1rem);
  position:relative;
  overflow:hidden;
}
.yy-header-nav ul li a::before{
  content:"";
  transition:all .25s ease-in-out;
  height:.1875rem;
  width:0;
  background-color:var(--c-primary);
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-.9375rem;
}
.yy-header-nav ul li a:hover{color:var(--c-primary)}
.yy-header-nav ul li a:hover::before{width:1.875rem}
@media(max-width:991.98px){.yy-header-nav{display:none}}

/* ============ ドロワー（本体と同一の操作系） ============ */
.yy-drawer-toggle{
  position:fixed;
  z-index:9999;
  cursor:pointer;
  height:calc(var(--wrap-pad) + var(--toggle-size));
  width:calc(var(--wrap-pad) + var(--toggle-size));
  top:0;
  right:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.5rem 0;
  background-color:var(--c-primary);
  border-radius:0 0 0 var(--r-lg);
  padding-bottom:.5rem;
  border:0;
}
.yy-drawer-toggle span{
  background-color:#fff;
  display:block;
  height:2px;
  width:calc(var(--toggle-size) * .5);
  transform-origin:center center;
  transition:all .25s ease-in-out;
}
.yy-drawer-toggle small{
  color:#fff;
  font-size:.75rem;
  font-family:var(--f-head);
  text-align:center;
  text-transform:capitalize;
  line-height:1;
  display:block;
  width:100%;
  position:absolute;
  left:0;
  bottom:1.25rem;
  font-weight:700;
}
.yy-drawer-toggle small::before{content:"menu"}
.yy-drawer-toggle::before,.yy-drawer-toggle::after{
  content:"";
  display:block;
  position:absolute;
  background-image:var(--radius-wrapper);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  width:var(--r-lg);
  height:var(--r-lg);
  transform:rotate(180deg);
}
.yy-drawer-toggle::before{top:100%;right:var(--wrap-pad)}
.yy-drawer-toggle::after{top:0;left:calc(-1 * var(--r-lg))}
@media(max-width:767.98px){
  .yy-drawer-toggle::before{right:0}
  .yy-drawer-toggle small{bottom:.75rem;font-size:.625rem}
}

.yy-drawer{
  position:fixed;
  inset:0;
  z-index:9990;
  background-color:rgba(90,0,0,.7);
  padding:var(--wrap-pad);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease-in-out,visibility .25s ease-in-out;
}
.is-drawer-open .yy-drawer{opacity:1;visibility:visible}
.is-drawer-open{overflow:hidden}
.yy-drawer-body{
  background-color:var(--c-bg);
  height:100%;
  border-radius:var(--r-lg);
  width:min(60%,520px);
  margin-left:auto;
  padding:calc(var(--toggle-size) + 1rem) clamp(1.25rem,3vw,2.5rem) 2rem;
  overflow-y:auto;
}
@media(max-width:767.98px){
  .yy-drawer{padding:0}
  .yy-drawer-body{width:100%;border-radius:0}
}
.yy-drawer-body a{
  display:block;
  font-family:var(--f-head);
  font-weight:700;
  font-size:1rem;
  color:var(--c-ink);
  padding:.85rem .25rem;
  border-bottom:1px solid var(--c-line);
  letter-spacing:.02em;
}
.yy-drawer-body a:hover{color:var(--c-primary)}
/* ドロワー内のボタンは .yy-drawer-body a の書体・字間指定に勝たせる */
.yy-drawer-body a.yy-btn,.yy-drawer-body a.yy-btn:hover{
  color:#fff;border-bottom-color:transparent;
  font-family:var(--f-body);letter-spacing:normal;
}
.is-drawer-open .yy-drawer-toggle span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.is-drawer-open .yy-drawer-toggle span:nth-child(2){opacity:0}
.is-drawer-open .yy-drawer-toggle span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}
.is-drawer-open .yy-drawer-toggle small::before{content:"close"}

/* ============ フッター（本体と同一） ============ */
.yy-footer{
  --footer-bg:var(--c-bg);
  margin-top:auto;
  font-size:.875rem;
  font-family:var(--f-body);
  color:var(--c-ink);
}
.yy-footer-inner{
  background-color:var(--footer-bg);
  padding:2rem 0;
}
@media(min-width:768px){.yy-footer-inner{border-radius:var(--r-lg)}}
.yy-footer-container{
  max-width:82.5rem;
  margin:0 auto;
  padding:0 clamp(1rem,4.1667vw,2rem);
}
@media(min-width:992px){.yy-footer-container{display:flex}}
.yy-footer-head{margin-bottom:0}
@media(min-width:992px){.yy-footer-head{flex:0 0 21.875rem;padding-right:2rem}}
@media(max-width:991.98px){.yy-footer-head{text-align:center;margin-bottom:2rem}}
.yy-footer-brand{width:12.5rem;margin-bottom:.5rem}
@media(max-width:991.98px){.yy-footer-brand{margin-left:auto;margin-right:auto}}
.yy-footer-brand span{
  display:block;
  font-size:.6875rem;
  color:var(--c-ink);
  margin-bottom:.4rem;
}
.yy-footer-head p{margin:0 0 .5rem}
.yy-footer-head small{display:block;font-size:.75rem;margin-bottom:.5rem}
@media(min-width:992px){.yy-footer-body{flex:1;padding-left:2rem}}
.yy-footer-nav{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  width:100%;
  justify-content:space-between;
}
.yy-footer-nav ul{list-style:none;margin:0;padding:0 .5rem}
.yy-footer-nav>ul{padding-left:0;flex:0 0 20%}
@media(max-width:767.98px){.yy-footer-nav>ul{flex:0 0 50%}}
.yy-footer-nav ul li a{
  display:block;
  font-size:.75rem;
  font-weight:700;
  color:var(--c-ink);
  padding:.25rem 0;
}
@media(max-width:767.98px){.yy-footer-nav ul li a{font-size:.875rem;padding:.5rem 0}}
.yy-footer-nav ul li a:hover{color:var(--c-primary-h)}
.yy-footer-copy{
  text-align:center;
  margin:0;
  font-size:.6875rem;
  color:#fff;
  padding:.75rem 1.25rem;
}

/* ============ ボタン ============ */
.yy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:var(--f-body);/* 本体 .c-btn は本文スタック */
  font-weight:700;
  font-size:16px;           /* 本体 .c-btn 実測 */
  letter-spacing:normal;
  line-height:1.75;
  padding:14px 28px;
  border-radius:var(--r-pill);
  border:1.5px solid var(--c-primary);
  background:var(--c-primary);
  color:#fff;
  cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
  text-align:center;
}
.yy-btn:hover{background:var(--c-primary-h);border-color:var(--c-primary-h);color:#fff}
.yy-btn-ghost{background:transparent;color:var(--c-primary)}
.yy-btn-ghost:hover{background:var(--c-primary);color:#fff}
.yy-btn-on-dark{border-color:#fff;background:transparent;color:#fff}
.yy-btn-on-dark:hover{background:#fff;color:var(--c-primary);border-color:#fff}
.yy-btn-fill-light{background:#fff;border-color:#fff;color:var(--c-primary)}
.yy-btn-fill-light:hover{background:var(--c-mark);border-color:var(--c-mark);color:var(--c-primary)}

/* サブ導線（お問い合わせフォーム）＝下線型の控えめリンク */
.yy-sublink{
  display:inline-block;
  font-family:var(--f-head);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--c-primary);
  border-bottom:1px solid rgba(128,0,0,.4);
  padding-bottom:3px;
}
.yy-sublink:hover{color:var(--c-primary-h);border-bottom-color:var(--c-primary-h)}
.yy-sublink-light{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.yy-sublink-light:hover{color:var(--c-mark);border-bottom-color:var(--c-mark)}

/* ============ 表コンポーネント（両ページ共通） ============ */
.yy-tbl-wrap{
  position:relative;
  margin-top:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--c-line);
  border-radius:var(--r);
}
/* 右端フェード＝スクロール可能であることを示す機能目的（グラデ全廃の唯一の例外） */
.yy-tbl-wrap::after{
  content:"";
  position:sticky;
  top:0;
  right:0;
  float:right;
  width:8px;
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);
  pointer-events:none;
}
.yy-tbl{
  width:100%;
  min-width:680px;
  background:#fff;
  color:var(--c-ink);/* 暗面セクション内でも文字色を継承させない */
  font-size:16px;      /* 本体 .c-table 実測に合わせる */
  line-height:1.75;    /* 本体 body 実測 28px/16px */
}
.yy-tbl.w5{min-width:800px}
.yy-tbl.w6{min-width:940px}
.yy-tbl th,.yy-tbl td{
  padding:16px 12px;   /* 本体 .c-table 実測 */
  text-align:center;
  border-bottom:1px solid var(--c-line);
  vertical-align:middle;
}
.yy-tbl thead th{
  background:var(--c-primary);
  color:#fff;
  font-family:var(--f-body);/* 本体 th は本文スタック */
  font-size:16px;/* 本体 .c-table th 実測 */
  font-weight:700;
  letter-spacing:normal;
}
.yy-tbl thead th.ours{background:var(--c-mark);color:var(--c-primary)}
.yy-tbl tbody th,
.yy-tbl tbody td:first-child{
  text-align:left;
  font-weight:700;
  background:var(--c-bg-2);
  color:var(--c-ink);
}
.yy-tbl thead th:first-child{background:var(--c-primary);color:#fff}
.yy-tbl td.ours{background:var(--c-mark-bg);color:var(--c-primary);font-weight:700}
.yy-tbl tbody tr:last-child th,
.yy-tbl tbody tr:last-child td{border-bottom:0}
/* 長文セル用（左寄せ・上寄せ） */
.yy-tbl.txt th,.yy-tbl.txt td{text-align:left;vertical-align:top}
.yy-tbl tfoot td{
  font-size:14px;/* 本体 small 実測 */
  color:var(--c-sub);
  background:var(--c-bg-2);
  padding:10px 12px;
  text-align:left;
}
/* スワイプヒントは表の上へ */
.yy-swipe{
  display:none;
  font-size:14px;
  color:var(--c-sub);
  font-weight:700;
  text-align:right;
  margin:26px 0 0;
}
@media(max-width:760px){.yy-swipe{display:block}}

/* ============================================================
   フッター前CTAブロック（本体 .p-cta-block の忠実移植）
   実測: 面 #800000 ／ 背景 yokohama.svg opacity .2 ／ 上下 80px
        見出し 30px Zen Kaku 700 #F2FFA6 ＋ ±60度のスラッシュ
        カード 白・角丸20px・枠1px #fff・影なし
   ============================================================ */
.yy-cta{
  background-color:var(--c-primary);
  position:relative;
  padding:clamp(3.75rem,10.4167vw,5rem) 0;
  color:#fff;
}
.yy-cta::before{
  content:"";
  width:calc(100% - 1.875rem);
  height:100%;
  position:absolute;
  z-index:0;
  top:0;
  left:50%;
  transform:translateX(-50%);
  background-image:url(https://yokohama-yobikou.jp/wp-content/themes/yokohama-yobikou/assets/images/yokohama.svg);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:bottom center;
  opacity:.2;
  pointer-events:none;
}
@media(max-width:991.98px){.yy-cta::before{background-size:200%}}
@media(max-width:767.98px){.yy-cta::before{background-size:300%}}

.yy-cta-inner{
  width:100%;
  padding:0 1.25rem;
  margin:0 auto;
  position:relative;
  z-index:1;
}
@media(min-width:576px){.yy-cta-inner{max-width:540px}}
@media(min-width:768px){.yy-cta-inner{max-width:720px}}
@media(min-width:992px){.yy-cta-inner{max-width:960px}}
@media(min-width:1200px){.yy-cta-inner{max-width:1140px}}
@media(min-width:1400px){.yy-cta-inner{max-width:1320px}}

.yy-cta-title{
  color:var(--c-mark);
  font-family:var(--f-head);
  font-weight:700;
  font-size:clamp(1.375rem,3.90625vw,1.875rem);
  line-height:1.5;
  letter-spacing:normal;
  margin:0 0 2rem;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:center;
  text-align:center;
}
.yy-cta-title::before,.yy-cta-title::after{
  content:"";
  width:1.25em;
  height:.25rem;
  background-color:var(--c-mark);
  border-radius:.125rem;
  flex:none;
}
.yy-cta-title::before{transform:rotate(60deg);margin-right:.25em}
.yy-cta-title::after{transform:rotate(-60deg);margin-left:.25em}

.yy-cta-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
}
.yy-cta-col{width:100%;display:flex}
@media(min-width:768px){.yy-cta-col{width:calc(50% - .75rem)}}
@media(min-width:992px){.yy-cta-col{width:calc(33.3333% - 1rem)}}
/* 991px以下はメール枠を最後へ（本体の order 指定と同じ） */
@media(max-width:991.98px){
  .yy-cta-col:nth-child(2){order:3}
  .yy-cta-col:nth-child(3){order:2}
}
@media(max-width:767.98px){.yy-cta-col{width:90%;margin-left:auto;margin-right:auto}}

.yy-cta-card{
  background-color:#fff;
  color:var(--c-ink);
  border:1px solid #fff;
  border-radius:1.25rem;
  box-shadow:none;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  word-wrap:break-word;
}
.yy-cta-card-head{
  flex:0 0 auto;
  padding:1rem 1rem 0;
  border-bottom:1px solid #fff;
}
@media(min-width:992px){.yy-cta-card-head{padding-top:1.5rem}}
.yy-cta-card-title{
  margin:0;
  font-family:var(--f-body);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.5;
  text-align:center;
  color:var(--c-primary);
  letter-spacing:normal;
}
.yy-cta-card-body{
  flex:1;
  padding:1rem 1rem 1.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* LINE */
.yy-cta-line-content{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  font-size:clamp(.75rem,1vw,.875rem);
  line-height:1.75;
}
@media(max-width:767.98px){.yy-cta-line-content{font-size:.875rem}}
.yy-cta-line-content img{
  width:6.25rem;
  flex:0 0 6.25rem;
  margin-right:.5rem;
  height:auto;
}
.yy-cta-line-content p{flex:1;margin:0}

/* メール */
.yy-cta-btn{
  display:block;
  width:100%;
  max-width:clamp(17.5rem,36.4583vw,18.75rem);
  margin:0 auto;
  position:relative;
  padding:1.25rem 2rem;
  font-family:var(--f-body);
  font-size:1rem;
  font-weight:700;
  line-height:1.75;
  text-align:center;
  color:#fff;
  background-color:var(--c-primary);
  border:1px solid var(--c-primary);
  border-radius:50rem;
  cursor:pointer;
  transition:all .25s ease-in-out;
}
.yy-cta-btn:hover{background-color:#6d0000;border-color:#6d0000;color:#fff}
.yy-cta-btn::before,.yy-cta-btn::after{
  content:"";
  display:inline-block;
  position:absolute;
  background:currentColor;
  border-radius:.1em;
  width:.5em;
  height:1px;
  right:.75rem;
}
.yy-cta-btn::before{top:calc(50% - .5px);transform:translate(0,-.125em) rotate(45deg)}
.yy-cta-btn::after{top:calc(50% + .5px);transform:translate(0,.125em) rotate(-45deg)}

/* 電話 */
.yy-cta-phone{text-align:center}
.yy-cta-phone .phone{
  font-family:var(--f-head);
  font-weight:700;
  font-size:clamp(2.125rem,2.8333vw,3rem);
  line-height:1.5;
  color:var(--c-primary);
  margin-bottom:.5rem;
  display:inline-flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
}
@media(max-width:991.98px){.yy-cta-phone .phone{font-size:2.375rem}}
.yy-cta-phone .phone a{color:var(--c-primary)}
.yy-cta-phone .phone .i{
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:baseline;
  flex:0 0 auto;
  margin-right:.125em;
  margin-top:.125em;
  fill:var(--c-primary);
}
.yy-cta-phone .phone + small{
  display:block;
  font-size:.75rem;
  line-height:1.75;
  text-align:center;
  color:var(--c-ink);
}

/* 印刷 */
@media print{
  html,body{background:#fff}
  .yy-wrapper{padding:0;background:#fff}
  .yy-header,.yy-drawer,.yy-drawer-toggle,.yy-footer,.yy-cta{display:none!important}
  .yy-main{border-radius:0}
  .yy-tbl thead th{background:#fff!important;color:#000!important;border:1px solid #999}
  .yy-tbl thead th.ours{background:#fff!important;color:#000!important}
  .yy-tbl td.ours{background:#fff!important;color:#000!important}
  .yy-tbl-wrap{overflow:visible;border:1px solid #999}
  .yy-tbl-wrap::after{display:none}
  .yy-tbl{min-width:0!important}
}