@charset "utf-8";

:root{
  --container-w: 90vw;
  --container-max: 1600px;

  --text: #333;
  --muted: #444;
  --line: #e5e7eb;

  --brand: #0ea5a5;
  --brand-2: #2bb6c8;

  --hero-bg: #2fbfc1;
  --hero-bg2:#27b5cc;

  --white: #ffffff;
  --black: #0b1220;

  --shadow: 0 18px 46px rgba(0,0,0,.18);
  --shadow-soft: 0 10px 20px rgba(2,8,23,.05);

  --radius: 14px;

  /* ヘッダー高さ（bodyの押し下げに使う） */
  --headerH: 100px; /* PC */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color:var(--text);
  line-height:1.7;
  background:#fff;

  /* 固定ヘッダー分だけ本文を下げる（ここ1箇所で管理） */
  padding-top: var(--headerH);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.95; }

section{
  margin-bottom: 80px; /* PC */
}

.container{
  width: var(--container-w);
  max-width: var(--container-max);
  margin-inline:auto;
}


/* =========================
  Header（共通）
========================= */
.site-header{
  background:#fff;
  border-bottom:none;

  /* 常時fixed（下層hero上の余白が出ない） */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index:1000;

  transition:
    padding .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}

/* スクロール後：見た目だけ変える */
.site-header.is-scrolled{
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  height:auto;
  min-height:0;
}

/* スクロール後：高さを詰める */
.site-header.is-scrolled .header__inner{
  height:auto;
  min-height:0;
  padding-top:10px;
  padding-bottom:10px;
}

/* スクロール後：右側アイコンの“見かけの高さ”も少し詰める */
.site-header.is-scrolled .header__icon{
  padding:8px;
}

/* スクロール後：ロゴは“潰さずに”少しだけ縮める */
.site-header.is-scrolled .brand img{
  max-height:34px; /* 必要なら32pxへ */
  width:auto;
  height:auto;
  display:block;
}

/* 右側アイコンが高さを作っている場合に備えて、スクロール時だけ詰める */
.site-header.is-scrolled .header__actions{
  height:auto;
  min-height:0;
}

/* スクロール時：メール（aタグ）のみ正円を維持（ハンバーガーbuttonは対象外） */
.site-header.is-scrolled .header__actions > a.header__icon{
  width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.02em;
}

/* ロゴサイズ（共通：通常時） */
.brand img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:44px; /* PC通常 */
}

/* PCナビ（SPでは非表示にする） */
.gnav{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:14px;
}
.gnav__link{ padding:6px 2px; }

/* 右上ボタン（メール/メニュー共通ベース） */
.header__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.header__icon{
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7DBF70, #2CAED0);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 中のアイコンサイズはここで統一（SVGでもimgでもOK） */
.header__icon-svg,
.header__icon svg,
.header__icon img{
  width: 23px;
  height: auto;
  display: block;
}

/* ハンバーガー（三本線） */
.menu-icon{
  width: 23px;
  height: 2px;
  background: #fff;
  display: block;
  position: relative;
  border-radius: 999px;
}
.menu-icon::before,
.menu-icon::after{
  content:"";
  position: absolute;
  left: 0;
  width: 23px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
}
.menu-icon::before{ top: -7px; }
.menu-icon::after{ top: 7px; }

/* メニューボタンはPCでは非表示（SPで表示） */
.header__icon--menu{ display:none; }


/* =========================
  下層ページタイトル（共通）
  ※固定は撤退（画質優先）
========================= */
.page-hero{
  height: 400px;

  background-image: url("../images/common/page-hero-default.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;           /* 余白なし */
  background-attachment: scroll;    /* fixed撤退 */
}

/* タイトル配置（p/h1のデフォルト余白でズレないように） */
.page-hero__inner{
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
}


/* 英語（差し絵・装飾） */
.page-hero__en{
  font-family: "Google Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  color: #143946;
  opacity: 0.85;
  margin: 0;
  padding: 0;
}

/* 日本語（メインタイトル） */
.page-hero__jp{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.3;
  color: #2CAED0;
  margin: 0;
  padding: 0;
}


/* 会社情報 */
.page-company .page-hero{
  background-image: url("../images/company/page-hero.webp");
}

/* 事業内容 */
.page-service .page-hero{
  background-image: url("../images/service/page-hero.webp");
}

/* 採用情報 */
.page-recruit .page-hero{
  background-image: url("../images/recruit/page-hero.webp");
}

.page-breadcrumb{
  width: var(--container-w);
  max-width: var(--container-max);
  margin: 8px auto 0;     /* hero直下に少し余白 */
  display: flex;
  justify-content: flex-end; /* 右寄せ */
}

.breadcrumb{
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #666;
}

.breadcrumb__item a{
  color: #666;
  text-decoration: none;
}

.breadcrumb__item a:hover{
  text-decoration: underline;
}

.breadcrumb__item::after{
  content: "／";
  margin-left: 8px;
  color: #aaa;
}

.breadcrumb__item.is-current::after{
  content: "";
}


/* =========================
  Sections（共通）
========================= */
.section{
  padding:48px 0;
}


.section__head{ margin-bottom:18px; }


/* =========================
  Section Kicker / Title / Desc（共通）
========================= */
.section__kicker{
  margin:0 0 6px;
  font-family: "Google Sans", sans-serif;
  font-size:20px;
  font-weight:600;
  color:#0b7285;

  display:flex;
  align-items:center;
  gap:8px;
}

.section__kicker::before{
  content:"";
  width:15px;
  height:15px;
  flex-shrink:0;

  background-image: url("../images/top/logo-icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.section__title{
  margin:0 0 40px;
  font-family: "Noto Sans JP", sans-serif;
  color:#333;
  font-size:36px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:0.15em;
}

.section__desc{
  margin:0 0 40px;
  font-family: "Noto Sans JP", sans-serif;
  color:var(--muted);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  letter-spacing:0.1em;
}
.section__desc--short{ margin-bottom:14px; }


/* =================================================
  Section Head（共通）
================================================= */

.section-head{
  margin-bottom: 50px;
}

.section-head__en{
  padding: 0;
  margin: 0;
  font-family: "Google Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 40px;
  letter-spacing: .02em;
  color: #2D8C93;
}

.section-head__jp{
  padding: 0;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  color: #333;
  font-weight:500;
  letter-spacing:0.1em;
}


/* =========================
  Cards（共通）
========================= */
.cards{
  display:grid;
  gap:20px;
}
.cards--3{
  grid-template-columns: repeat(3, 1fr);
}

.card{
  background:#fff;
  border:1px solid #ccc;
  overflow:hidden;
  min-width:0;
  padding-bottom:20px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.card__link{
  display:block;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.card__media{
  aspect-ratio: 16 / 9;
  background:#f1f5f9;
  overflow:hidden;
}
.card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.card:hover .card__media img{ transform: scale(1.06); }
.card:hover{ transform: translateY(-3px); }

.card__body{ padding:14px 14px 16px; }

.card__title{
  margin:0 0 15px;
  font-family: "Noto Sans JP", sans-serif;
  color:#193E4B;
  font-size:21px;
  font-weight:600;
  line-height:1.7;
  letter-spacing:0.05em;
}

.card__text{
  margin:0;
  font-family: "Noto Sans JP", sans-serif;
  color:var(--muted);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  letter-spacing:0.1em;
}


/* =========================
  Buttons（共通）
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  font-family: "Google Sans", sans-serif;
  font-weight:400;
  font-size:19px;
  border:1px solid transparent;
}
.btn--more{
  background:#22a6b3;
  color:#fff;
  width: 140px;
  justify-content:space-between;
  padding-left:16px;
  padding-right:12px;
}

.btn--more .btn__arrow{
  font-size:1.4em;
  line-height:1;
  margin-left:auto;
}

.btn--company{
  background:#fff;
  color:#153A47;
  width: 180px;
  justify-content:space-between;
  padding-left:16px;
  padding-right:12px;
  opacity:70%;
}

.btn--company .btn__arrow{
  font-size:1.4em;
  line-height:1;
  margin-left:auto;
}


/* =========================
  Footer（共通）
========================= */
.site-footer{
  background:#222;
  color: rgba(255,255,255,.86);
  padding:70px 0;

  position:relative;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  left:40px;
  top:50%;
  transform:translateY(-50%);
  width:500px;
  height:490px;

  background-image:url("../images/common/footer-bg-logo.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:500px 490px;

  opacity:1;
  pointer-events:none;
  z-index:0;
}

.site-footer .container{
  position:relative;
  z-index:1;
}

.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:24px;
  align-items:end;
}

.footer__left{ min-width:0; }

.footer__logo{
  display:block;
  width:170px;
  height:auto;
  margin-bottom: 20px;
}

.footer__addr{
  font-family: "Noto Sans JP", sans-serif;
  margin:10px 0 6px;
  font-size:14px;
  line-height:1.7;
  letter-spacing: 0.1em;
  color: #fff;
}

.footer__map{
  position:relative;
  display:inline-block;
  padding-left:18px;
  font-family: "Noto Sans JP", sans-serif;
  font-size:14px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__map::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background-color: #fff;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z'/%3E%3C/svg%3E");
  mask-repeat:no-repeat;
  mask-size:contain;
  mask-position:center;
}

.footer__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:14px;
  min-width:0;
}

.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 35px;
  font-family: "Noto Sans JP", sans-serif;
  justify-content:flex-end;
  font-size:16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom:16px;
}

.footer-nav__link{
  color: #fff;
  text-decoration:none;
  transition: opacity .18s ease;
}

.footer-nav__link:hover{
  opacity:.85;
  text-decoration:underline;
  text-underline-offset: 3px;
}

.footer__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:20px 20px;
  width:200px;

  background:transparent;
  color:#fff;
  text-decoration:none;

  border:1px solid #fff;
  border-radius:6px;

  font-family: "Noto Sans JP", sans-serif;
  font-weight:500;
  font-size:15px;
  line-height:1;
  letter-spacing: 0.1em;

  margin:0 0 0 auto;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

.footer__cta::before{
  content:"";
  width:25px;
  height:25px;
  flex:0 0 25px;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='12' rx='2' ry='2' fill='none' stroke='white' stroke-width='1.6'/%3E%3Cpath d='M3 7l9 6 9-6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.footer__cta:hover{
  background-color:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.35);
  opacity:.98;
}

.footer__cta:focus-visible{
  outline:2px solid rgba(255,255,255,.25);
  outline-offset:2px;
}

.footer__bottom{
  margin-top:40px;
  padding-top:0;
  border-top:none;
  font-family: "Noto Sans JP", sans-serif;
  font-size:15px;
  font-weight: 500;
  color: #ccc;
  width:100%;
}

.footer__bottom small{
  display:block;
  text-align:right;
  letter-spacing:.02em;
}


/* =========================
  SP Drawer（共通）
========================= */
.sp-drawer{
  position: fixed;
  inset: 0;
  z-index: 9999;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition: opacity .22s ease, visibility 0s linear .22s;
}

.sp-drawer.is-open{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;

  transition: opacity .22s ease, visibility 0s linear 0s;
}

.sp-drawer__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .22s ease;
}

.sp-drawer.is-open .sp-drawer__overlay{
  opacity: 1;
}

.sp-drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  width: min(84vw, 340px);
  height: 100%;
  background: #fff;
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
  padding: 16px;
  overflow: auto;

  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.sp-drawer.is-open .sp-drawer__panel{
  transform: translateX(0);
}

.sp-drawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sp-drawer__title{
  font-weight: 800;
  letter-spacing: .06em;
  color: #0f172a;
}

.sp-drawer__close{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(229,231,235,.9);
  background: #fff;
  cursor: pointer;
}

.sp-nav{
  display: grid;
  gap: 10px;
}
.sp-nav__link{
  display: block;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(229,231,235,.9);
  font-weight: 700;
  color: #0f172a;
}

/* SP nav：採用配下の見た目 */
.sp-nav__group{
  display: grid;
  gap: 8px;
}

.sp-nav__children{
  display: grid;
  gap: 8px;
  padding-left: 14px;
  border-left: 2px solid rgba(229,231,235,.9);
}

.sp-nav__sublink{
  display: block;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(229,231,235,.9);
  background: #f8fafc;
  font-weight: 600;
  color: #0f172a;
  font-size: 14px;
}

/* 閉じるボタンをヘッダーアイコンと同デザインに統一 */
.sp-drawer__close.header__icon{
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7DBF70, #2CAED0);
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

/* ×アイコン */
.sp-drawer__close-icon{
  position: relative;
  width: 23px;
  height: 23px;
  display: block;
}
.sp-drawer__close-icon::before,
.sp-drawer__close-icon::after{
  content:"";
  position: absolute;
  left: 0;
  top: 50%;
  width: 23px;
  height: 2px;
  background: #fff;
  border-radius: 999px;
  transform-origin: center;
}
.sp-drawer__close-icon::before{
  transform: translateY(-50%) rotate(45deg);
}
.sp-drawer__close-icon::after{
  transform: translateY(-50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce){
  .sp-drawer,
  .sp-drawer__overlay,
  .sp-drawer__panel{
    transition: none !important;
  }
}


/* =========================
  SP（<=768px）
========================= */
@media (max-width: 768px){

  :root{
    --headerH: 64px; /* SP */
  }

  .container{
    width: calc(100% - 32px);
    max-width: none;
  }

  .gnav{ display:none; }
  .header__icon--menu{ display:inline-flex; }

  .brand img{
    max-height:38px;
  }

  .site-header.is-scrolled .header__actions > button.header__icon--menu{
    width:40px;
    height:40px;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    border-radius:50%;
  }

  .sp-drawer__close.header__icon{
    width: 40px;
    height: 40px;
  }

  .page-hero{
    height: 200px; /* 400pxの半分 */
  }

  .page-hero__en{
    font-size: 12px;
    letter-spacing: 0.2em;
  }

  .page-hero__jp{
    font-size: 22px;
    letter-spacing: 0.1em;
  }

  .page-breadcrumb{
    margin-top: 6px;
  }

  .breadcrumb{
    font-size: 11px;
  }

  .section__kicker{
    font-size:14px;
    gap:6px;
  }

  .section__kicker::before{
    width:12px;
    height:12px;
  }

  .section__title{
    font-size:24px;
    margin-bottom:24px;
    letter-spacing:0.08em;
    line-height:1.3;
  }

  .section__desc{
    margin:0 0 24px;
    font-size:13px;
  }
  


section{
  padding:28px 0;
  margin-bottom: 50px; /* SP */
}


/* =================================================
  Section Head（共通）
================================================= */

.section-head{
  margin-bottom: 40px;
}

.section-head__en{
  padding: 0;
  margin: 0;
  font-family: "Google Sans", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: .02em;
  color: #2D8C93;
}

.section-head__jp{
  padding: 0;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: #333;
  font-weight:500;
  letter-spacing:0.1em;
}


  .btn{
    font-size:12px;
    margin-bottom: 30px;
  }

  .btn--more{ width: 120px; }
  .btn--company{ width: 120px; }

  .cards--3{ grid-template-columns: 1fr; }
  .card__title{ font-size:18px; }
  .card__text{ font-size:13px; }

  .site-footer{ padding:40px 0; }

  .site-footer::before{
    left:30%;
    top:-5%;
    transform:translate(-50%, 0);
    width:340px;
    height:333px;
    background-size:340px 333px;
    opacity:1;
  }

  .footer__inner{
    grid-template-columns: 1fr;
    gap:16px;
    align-items:start;
  }

  .footer__left{ margin-bottom: 30px; }

  .footer__right{
    width:100%;
    align-items:flex-start;
  }

  .footer-nav{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    justify-content:flex-start;
    font-size:16px;
    margin-bottom:16px;
  }

  .footer__cta{
    width:100%;
    margin-left:0;
  }

  .footer__bottom small{
    text-align:center;
  }
}


/* =========================
  PC（>=769px）
========================= */
@media (min-width: 769px){

  /* headerH と値を合わせて運用（ここは “見た目の高さ” として残す） */
  .site-header{ height: 100px; }

  .header__inner{
    height: 100%;
    align-items: center;
    justify-content: flex-start;
  }

  .gnav{
    gap: 22px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #333;

    margin-left: auto;
    margin-right: 40px;
  }

  .gnav__link{
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 6px;
    color: #0f172a;
    opacity: .92;
  }

  .gnav__link::after{
    content:"";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 8px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7DBF70, #2CAED0);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
  }

  .gnav__link:hover{ opacity: 1; }
  .gnav__link:hover::after{ transform: scaleX(1); }

  .gnav__link:focus-visible{
    outline: 2px solid rgba(44,174,208,.45);
    outline-offset: 4px;
    border-radius: 8px;
  }
  
.gnav__item {
  position: relative;
}

.gnav__child {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}

.gnav__child a {
  display: block;
  padding: 8px 16px;
  color: #222;
  text-decoration: none;
  font-size: 14px;
}

.gnav__child a:hover {
  background: #f5f7f7;
}

/* hoverで表示 */
.gnav__item--has-child:hover .gnav__child {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
  
}



/* =========================================
   Page Top Button
========================================= */

.page-top{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;

  width: 48px;
  height: 48px;
  border-radius: 50%;

  background: rgba(0,0,0,0.6);
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;
}

/* 表示状態 */
.page-top.is-show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 矢印 */
.page-top__arrow{
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(-45deg);
  margin-top: 4px;
}

/* hover */
.page-top:hover{
  background: rgba(0,0,0,0.75);
}

/* SP微調整 */
@media (max-width: 767px){
  .page-top{
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}