@charset "utf-8";

/* ══════════════════════════════════════════
   PROVITY — 共通スタイル (common.css)
   役割: リセット + CSS変数 + ヘッダー/ナビ/フッター
         PC・スマホ両対応のレスポンシブ込み
   ══════════════════════════════════════════ */

/* ─── CSS カスタムプロパティ ─────────────── */
:root {
  --color-primary:        #2A4BB5;
  --color-primary-dark:   #1e3a8a;
  --color-primary-light:  #5b76d4;
  --color-accent:         #FFE131;
  --color-accent-shadow:  #FFAF50;
  --color-text:           #3A3A3A;
  --color-text-muted:     #666;
  --color-border:         #a6a6a6;
  --color-bg-gray:        #F2F2F2;
  --color-bg-green:       #f5f8f6;
  --color-bg-blue-light:  rgba(217,232,255,1);
  --color-bg-blue-fade:   rgba(248,252,255,1);
  --color-danger:         #e57a7a;
  --font-body:            'Noto Sans JP', sans-serif;
  --font-latin:           'Lato', sans-serif;
  --radius-btn:           7.0rem;
  --shadow-card:          0 2px 16px rgba(42,75,181,.10);
  --transition:           0.2s ease;
}

/* ─── リセット ───────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { -webkit-text-size-adjust: 100%; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal; }
address { font-style: normal; }
img { border: none; vertical-align: top; width: 100%; height: auto; }
ul, ol { list-style-type: none; }
a { text-decoration: none; }
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary { display: block; }

/* ─── ユーティリティ ─────────────────────── */
.pc { display: block !important; }
.sp { display: none  !important; }

.txt-left   { text-align: left   !important; }
.txt-center { text-align: center !important; }
.txt-right  { text-align: right  !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── ベース ─────────────────────────────── */
html { font-size: 10px; }
body {
  font-size:   1.6rem;
  line-height: 1;
  font-family: var(--font-body);
  color:       var(--color-text);
  background:  #fff;
  padding-bottom: 4.0rem;
}
p  { font-size: 1.6rem; }
li { font-size: 1.6rem; }

/* ─── 共通ボタン (.btn-primary) ─────────── */
.btn-primary,
a.btn-primary {
  display:       block;
  background:    var(--color-accent);
  color:         var(--color-text);
  font-size:     2.4rem;
  font-weight:   700;
  font-family:   var(--font-body);
  line-height:   1;
  text-align:    center;
  border:        none;
  border-radius: var(--radius-btn);
  border-bottom: 4px solid var(--color-accent-shadow);
  padding:       2.0rem;
  width:         45.0rem;
  height:        7.0rem;
  margin:        0 auto;
  cursor:        pointer;
  transition:    var(--transition);
  box-sizing:    border-box;
}
.btn-primary:hover,
a.btn-primary:hover {
  opacity: 0.82;
}
/* ─── ヘッダー ───────────────────────────── */
header {
  position:   fixed;
  width:      100%;
  z-index:    90;
  height:     8.0rem;
  padding:    1.5rem 3.0rem 0;
  top:        0;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0,0,0,.07);
}
#login {
  display:  block;
  position: absolute;
  right:    11.0rem;
  top:      1.5rem;
  width:    4.2rem;
}
#logo { width: 50.0rem; }
#logo img { width: 23.6rem; }
#logo a span {
  color:         var(--color-primary);
  line-height:   1;
  font-size:     1.2rem;
  display:       block;
  margin-bottom: 0.5rem;
}

/* ─── ハンバーガーボタン ─────────────────── */
#menu {
  position: fixed;
  width:    4.0rem;
  height:   2.8rem;
  right:    4.0rem;
  top:      2.5rem;
  z-index:  999;
}
#btn-menu {
  display: block;
  width:   4.0rem;
  height:  2.8rem;
  right:   0;
  top:     0;
  z-index: 999;
}
#btn-menu .menu-trigger,
#btn-menu .menu-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
#btn-menu .menu-trigger { width: 100%; height: 100%; position: relative; }
#btn-menu .menu-trigger span {
  background: var(--color-primary);
  position:   absolute;
  left:       0;
  height:     1px;
}
#btn-menu .menu-trigger.active span { background: #fff; }
#btn-menu .menu-trigger span:nth-of-type(1) { top: 0;      width: 4.0rem; }
#btn-menu .menu-trigger span:nth-of-type(2) { top: 1.4rem; width: 4.0rem; }
#btn-menu .menu-trigger span:nth-of-type(3) { top: 2.8rem; width: 4.0rem; }
#btn-menu .menu-trigger.active span:nth-of-type(1) {
  transform: translateY(1.4rem) rotate(-155deg); width: 4.0rem;
}
#btn-menu .menu-trigger.active span:nth-of-type(2) { opacity: 0; }
#btn-menu .menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-1.4rem) rotate(155deg); width: 4.0rem;
}

/* ─── グローバルナビ ─────────────────────── */
#gnavi {
  background:     var(--color-primary);
  width:          44.0rem;
  height:         100%;
  position:       fixed;
  right:          0;
  top:            0;
  z-index:        100;
  visibility:     hidden;
  opacity:        0;
  pointer-events: none;
  transition:     all .3s ease-in-out;
  overflow-y:     scroll;
  scrollbar-width: none;
}
#gnavi.active { visibility: visible; opacity: 1; pointer-events: auto; }

#gmenu {
  padding:    8.0rem 0 4.0rem 5.0rem;
  box-sizing: border-box;
}
#gmenu ul { margin-bottom: 5.0rem; display: block; }
#gmenu ul li a {
  color:         #fff;
  font-size:     1.8rem;
  font-weight:   700;
  display:       block;
  margin-bottom: 3.0rem;
  transition:    var(--transition);
}
#gmenu ul li a:hover { opacity: 0.6; text-decoration: underline; }

#gmenu p a {
  color:         var(--color-text);
  font-size:     2.2rem;
  font-weight:   700;
  line-height:   2.6rem;
  text-align:    center;
  display:       block;
  background:    var(--color-accent);
  border-radius: var(--radius-btn);
  padding:       2.0rem;
  width:         34.0rem;
  height:        7.0rem;
  box-sizing:    border-box;
  border-bottom: 4px solid var(--color-accent-shadow);
  transition:    var(--transition);
}
#gmenu p a:hover { opacity: 0.8; }

/* ─── フッター ───────────────────────────── */
footer { margin-top: 2.0rem; }
footer p {
  text-align:  center;
  font-size:   1.4rem;
  font-family: var(--font-latin);
}

/* ─── 電話ブロック (共通) ────────────────── */
div.tel {
  border:      2px solid var(--color-primary);
  border-radius: 1.0rem;
  width:       38.0rem;
  height:      8.0rem;
  margin:      0 auto 6.0rem;
  padding-top: 1.0rem;
  box-sizing:  border-box;
  position:    relative;
  overflow:    hidden;
  background:  #fff;
}
div.tel::before {
  content:       '';
  width:         8.0rem;
  height:        8.0rem;
  background:    url("../image/icon-tel.png") no-repeat center center var(--color-primary);
  position:      absolute;
  top:           0;
  left:          0;
  box-sizing:    border-box;
}
div.tel a dl { padding-left: 11.5rem; }
div.tel a dl dt {
  color:       var(--color-primary);
  font-size:   3.0rem;
  font-family: var(--font-latin);
  font-weight: 700;
  margin-bottom: 1.0rem;
}
div.tel a dl dd { font-size: 1.4rem; color: var(--color-text); }

/* ════════════════════════════════════════════
   レスポンシブ: タブレット (751px〜1200px)
   ════════════════════════════════════════════ */
@media only screen and (min-width: 751px) and (max-width: 1200px) {
  html { font-size: 0.8333333333333333vw; }
}

/* ════════════════════════════════════════════
   レスポンシブ: スマートフォン (〜750px)
   共通コンポーネント（ヘッダー/ナビ/フッター）
   ════════════════════════════════════════════ */
@media only screen and (max-width: 750px) {
  html { font-size: 1.3333333333333335vw; }
  .pc { display: none  !important; }
  .sp { display: block !important; }

  header {
    height:       11.0rem;
    padding-left: 3.0rem;
  }
  #logo { width: 50.0rem; }
  #logo img { width: 26.6rem; }
  #logo a span { font-size: 2.0rem; margin-bottom: 1.0rem; }

  #login { width: 6.2rem; right: 12.0rem; top: 2.0rem; }

  #menu  { width: 5.5rem; height: 3.8rem; right: 3.0rem; top: 3.5rem; }
  #btn-menu { width: 5.5rem; height: 3.8rem; }
  #btn-menu .menu-trigger span:nth-of-type(1) { width: 5.5rem; }
  #btn-menu .menu-trigger span:nth-of-type(2) { top: 1.9rem; width: 5.5rem; }
  #btn-menu .menu-trigger span:nth-of-type(3) { top: 3.8rem; width: 5.5rem; }
  #btn-menu .menu-trigger.active span:nth-of-type(1) {
    transform: translateY(1.9rem) rotate(-155deg); width: 5.5rem;
  }
  #btn-menu .menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-1.9rem) rotate(155deg); width: 5.5rem;
  }

  #gnavi { width: 100%; }
  #gmenu { padding-top: 18.0rem; padding-left: 5.0rem; }
  #gmenu ul { margin-bottom: 12.0rem; }
  #gmenu ul li a { font-size: 3.2rem; margin-bottom: 5.0rem; }
  #gmenu p a { font-size: 3.4rem; line-height: 4.6rem; width: 65.0rem; height: 10.0rem; }

  footer p { font-size: 2.0rem; }

  .btn-primary, a.btn-primary {
    font-size: 3.4rem;
    line-height: 4.6rem;
    width:  65.0rem;
    height: 10.0rem;
  }

  div.tel {
    width:  65.0rem;
    height: 14.0rem;
    margin: 0 auto 12.0rem;
    padding-top: 2.0rem;
  }
  div.tel::before {
    width:  14.0rem;
    height: 14.0rem;
    background: url("../image/icon-tel-sp.png") no-repeat center center var(--color-primary);
    background-size: 14.0rem 14.0rem;
  }
  div.tel a dl { padding-left: 20.0rem; }
  div.tel a dl dt { font-size: 5.2rem; }
  div.tel a dl dd { font-size: 2.4rem; }
}