@charset "utf-8";

/*
*********************************************************************************

  new-page.css
  Shadow DOM内で読み込むヘッダー・フッター専用CSS

  元CSSの読み込み順（再現順）:
    1. common.css          … :root変数・リセット・個別セレクタ　　　　　media="print, screen"
    2. layout.css          … header・footer SP基準　　　　　　　　　　  media="print, screen"
    3. layout_pctb.css     … header・footer PC・TB上書き　　　　　　　  media="print, screen and (min-width: 769px)"
                             ※ファイル内にメディアクエリ記述なし
                             ※<link>のmedia属性で769px以上のみ適用される
                             → Shadow DOM内では @media (min-width: 769px) で再現する
    4. layout_carrier.css  … .inner・表示切り替え・ハンバーガー　　　   media="print, screen"

*********************************************************************************
*/

/* ==============================================================================
   1. リセットCSS
   common.css のリセット部分をShadow DOM内に適用
   ブラウザデフォルトスタイル（ulのmarker等）をここで除去する
   ============================================================================== */

:where(:not(audio, canvas, html, iframe, img, svg, video, clipPath, path, symbol)) {
  all:     unset;
  display: revert;
}

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

menu, ol, ul, summary {
  list-style: none;
}

ol {
  counter-reset: revert;
}

img {
  max-inline-size: 100%;
  max-block-size:  100%;
}

table {
  border-collapse: collapse;
}

textarea {
  white-space: revert;
}

:where([hidden]) {
  display: none;
}

a, button {
  cursor: revert;
}

:where(pre) {
  all:        revert;
  box-sizing: border-box;
}


/* ==============================================================================
   2. :host
   Shadow DOMのルート要素。元CSSの :root / html / body 相当を集約。
   ※ font-size は px 固定。rem は使用しない（外部CSSのhtml font-sizeの影響を受けないため）
   ============================================================================== */

:host {
  display: block;

  /* ---- カラーパレット（common.css :root） ---- */
  --color:   #5A645A;
  --green:   #009538;
  --lgreen:  #E5E8E5;
  --orange:  #FF6600;
  --lorange: #FFDCC3;
  --beige:   #F7F6F5;

  /* ---- 特定カラー ---- */
  --at:   #D71E1E;
  --link: #5A645A;

  /* ---- フォントファミリー ---- */
  --font: YakuHanMPs, "Zen Old Mincho", "Hiragino Mincho ProN", "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "Noto Serif JP", "Yu Mincho", YuMincho, "游明朝", serif;
  --en:   YakuHanMPs, "Google Sans Flex", "Zen Old Mincho", "Hiragino Mincho ProN", "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "Noto Serif JP", "Yu Mincho", YuMincho, "游明朝", serif;

  /* ---- ヘッダー高さ変数 SP初期値（layout.css :root） ---- */
  --b_header: 64vw;
  --s_header: 21vw;

  /* ---- 基本スタイル（html 62.5% 相当を px 固定で指定） ---- */
  font-family:    var(--font);
  color:          var(--color);
  line-height:    2.31;
  letter-spacing: 0.15em;
  font-size:      10px;
  word-break:     break-all;
  overflow-wrap:  break-word;
  text-align:     justify;
  box-sizing:     border-box;

}

/* 初期描画時のちらつき対策: 初期化クラス中はアニメーションを無効化 */
:host(.is-initializing),
:host(.is-initializing) *,
:host(.is-initializing) *::before,
:host(.is-initializing) *::after {
  visibility: hidden !important;
  transition: none !important;
  animation:  none !important;
}

/* :host, *:not(.tel_box):not(.tel_box *) {
  line-height: 2.31;
} */

/* :host, :host * {
  line-height:    2.31;
  letter-spacing: 0.15em;
  font-size:      10px;
  word-break:     break-all;
  overflow-wrap:  break-word;
  text-align:     justify;
  box-sizing:     border-box;
} */



/* ---- layout_pctb.css の <link media="min-width:769px"> 相当 ---- */
/* ヘッダー高さ変数をPC・TBで上書き */
@media screen and (min-width: 769px) {
  :host {
    --b_header: 200px;
    --s_header: 100px;
  }
}


/* ==============================================================================
   3. 共通ユーティリティ
   header.html・footer.htmlで使用するもののみ（common.css・layout_carrier.css）
   ============================================================================== */

img {
  width:   100%;
  height:  auto;
  margin:  0;
  padding: 0;
  display: block;
}

a {
  display:         inline;
  text-decoration: underline;
  color:           var(--link);
  opacity:         1;
  transition:      0.5s ease;
}

a img {
  backface-visibility: hidden;
}

/* .inner SP初期値（layout_carrier.css） */
.inner {
  width:        88vw;
  margin-left:  6vw;
  margin-right: 6vw;
}

/* 表示切り替えクラス SP（layout_carrier.css） */
@media screen and (max-width: 768px) {
  .pc_only,
  .pctb_only,
  .sp_none {
    display: none !important;
  }
}

/* 表示切り替えクラス PC（layout_carrier.css） */
@media screen and (min-width: 1040px) {
  .sp_only,
  .tb_only {
    display: none !important;
  }
  .inner {
    width:        1000px;
    margin-left:  auto;
    margin-right: auto;
  }
  a:hover {
    text-decoration: none;
    opacity:         0.7;
    transition:      0.5s ease;
    -webkit-transition: 0.5s ease;
  }
}

/* 表示切り替えクラス TB（layout_carrier.css） */
@media screen and (min-width: 769px) and (max-width: 1039px) {
  .pc_only,
  .pctb_none,
  .sp_only,
  .tb_none {
    display: none !important;
  }
  .inner {
    width:        1000px;
    margin-left:  20px;
    margin-right: 320px;
  }
}


/* ==============================================================================
   4. .h_space（ヘッダー占有スペース）
   layout.css
   ============================================================================== */
.h_space {
    height: var(--b_header);
}
.h_space.under_page {
  height: var(--s_header);
}

header .h_space {
  height:     var(--b_header);
  position:   fixed;
  top:        0;
  left:       0;
  z-index:    100;
  background: rgb(255 255 255 / 100%);
  width:      100%;
  transition: 0.5s ease;
}

/* layout_pctb.css（min-width: 769px 相当） */
@media screen and (min-width: 769px) {
  .h_space.under_page {
    height: var(--b_header);
  }
}

/*------------------------------------------------------------------------------
電話番号 tel_box */
.tel_box a {
	gap: 1.5vw;
	margin-top: 4vw;
	padding: 2.1vw 14vw 3.4vw 6vw;
	min-height: 14vw;
	text-decoration: none;
	position: relative;
	border-radius: 30vw;
	line-height: 1.3;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-start;
	font-weight: 700;
	font-size: 12px;
}

.tel_box a::before {
	z-index: 1;
	aspect-ratio: 1 / 1;
	content: "";
	position: absolute;
	border-radius: 50%;
	top: 50%;
	transform: translate(0%, -50%);
	width: 6vw !important;
	right: 4vw !important;
}

.tel_box a::after {
	width: 6vw !important;
	right: 4vw !important;
	position: absolute;
	content: "";
	-webkit-mask-image: url(/assets/img/icon_arrow.svg);
	mask-image: url(/assets/img/icon_arrow.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-size: contain;
	background: #fff;
	z-index: 2;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	top: 50%;
	transform: translate(0%, -50%);
}

.tel_box a .type {
	font-size: 20px;
	letter-spacing: 0;
	line-height: 1;
}

.tel_box a .tel_num {
	font-size: 32px;
	letter-spacing: 0;
	line-height: 1;
}

.tel_box .time {
	font-size: 12px;
	display: block;
}


/* ==============================================================================
   5. header 基本（SP）
   layout.css … media="print, screen" なのでメディアクエリなしで記述
   ============================================================================== */

header {
  position:   absolute;
  top:        0;
  left:       0;
  z-index:    1000;
  width:      100%;
  height:     var(--b_header);
  background: rgb(255 255 255 / 100%);
  transition: 1s ease;
}

header .h_inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
}

header .h_top {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             7.5vw;
  height:          64vw;
}

header .logo {
  width:        49vw;
  transition:   0.5s ease;
  position:     relative;
  aspect-ratio: 197 / 63;
}

header .logo a {
  position:   relative;
  display:    block;
  transition: inherit;
  width:      100%;
  height:     100%;
}

header .logo a::after {
  content:    "";
  position:   absolute;
  top:        0;
  left:       0;
  background: url(/assets/img/logo.svg) no-repeat 100% 100% / contain;
  width:      100%;
  height:     100%;
  opacity:    0;
}

header .logo img {
  opacity: 1;
  display: block;
}

header .logo::after {
  position:       absolute;
  content:        "シニアのための理想の住まい\A「サンシティ」";
  color:          var(--green);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0;
  line-height:    15px;
  top:            50%;
  left:           33vw;
  transform:      translate(0%, -50%);
  width:          45vw;
  white-space:    pre-wrap;
  opacity:        0;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  header .logo::after {
    font-size: 3vw;
    line-height: 1.25;
  }
}

/* スクロール後・下層ページ */
:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .logo {
  width:      31.5vw;
  transition: 0.5s ease;
}

:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .logo a {
  aspect-ratio: 127 / 39;
}

:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .logo::after,
:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .logo a::after {
  opacity: 1;
}

:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .logo img {
  opacity: 0;
}

:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header {
  position:   fixed;
  background: rgb(255 255 255 / 90%);
}

:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header,
:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .h_top,
:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .h_space {
  transition: 1s ease;
  height:     var(--s_header);
}

:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .h_space {
  background: rgb(255 255 255 / 90%);
  transition: 2.5s ease;
}

:is(.h_space.under_page, .h_space.js_header_move:where(:not(.is_returning_top))) header .h_top {
  display:         flex;
  width:           88vw;
  padding:         0;
  align-content:   center;
  flex-direction:  row;
  justify-content: space-between;
}

/* .btn_area（ヘッダー内 SP） */
header .btn_area {
  display:               grid;
  grid-template-columns: 1fr 25vw 25vw;
  gap:                   4px;
  transition:            1.5s ease;
  padding:               6vw 4vw;
}

header .btn_area .tel_box {
  grid-column: 1 / -1;
}

header .btn_area a {
  border:          1px solid var(--color);
  text-decoration: none;
  position:        relative;
  padding:         2vw 3vw;
  border-radius:   8vw;
  line-height:     1.3;
  display:         flex;
  flex-wrap:       wrap;
  align-items:     flex-end;
  min-height:      8vw;
  gap:             1vw;
  background:      #fff;
  margin-top:      0;
}

header .btn_area a::before,
header .btn_area a::after {
  width: 4vw !important;
  right: 2vw !important;
}

header .btn_area a::before {
  z-index:       1;
  background:    var(--color);
  aspect-ratio:  1 / 1;
  content:       "";
  position:      absolute;
  border-radius: 50%;
  top:           50%;
  transform:     translate(0%, -50%);
}

header .btn_area a::after {
  position:            absolute;
  content:             "";
  -webkit-mask-image:  url(/assets/img/icon_arrow.svg);
  mask-image:          url(/assets/img/icon_arrow.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat:         no-repeat;
  mask-size:           contain;
  background:          #fff;
  z-index:             2;
  aspect-ratio:        1 / 1;
  border-radius:       50%;
  top:                 50%;
  transform:           translate(0%, -50%);
}

header .btn_area .tel_box a        { width: 100%; }

header .btn_area li:not(.tel_box) a {
  font-size:      12px;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 768px) {
  header .btn_area li:not(.tel_box) a {
    font-size:      3vw;
  }
}

header .btn_area .tel_box a .type {
  font-size:      10px;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  header .btn_area .tel_box a .type {
    font-size:      2.5vw;
  }
}

header .btn_area .tel_box a .tel_num {
  font-size:      16px;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  header .btn_area .tel_box a .tel_num {
    font-size:      4vw;
  }
}

header .btn_area .tel_box .time {
  font-size:      10px;
  letter-spacing: 0;
  margin-left:    0.1em;
  transition:     0.5s ease;
  opacity:        1;
  position:       relative;
}

@media screen and (max-width: 768px) {
 header .btn_area .tel_box .time {
    font-size:      2.5vw;
  }
}

header .btn_area .area a {
  background:   var(--green);
  border-color: var(--green);
  color:        #fff;
}

header .btn_area .area a::before { background: #fff; }
header .btn_area .area a::after  { background: var(--green); }


/* ==============================================================================
   6. header ハンバーガーメニュー（SP）
   layout_carrier.css の @media (max-width: 768px) 部分
   ============================================================================== */

@media screen and (max-width: 768px) {

  .js_header_on header {
    background: #fff;
  }

  header .hamburger {
    --width:        10vw;
    --line-offset:  3.7vw;
    position:       relative;
    width:          12vw;
    text-align:     center;
    /* font-size:      11.5px; */
    font-size: 2.875vw;
    padding-top:    var(--width);
    line-height:    1;
    font-family:    var(--en);
    letter-spacing: 0.12em;
    font-weight:    400;
  }

  header .hamburger::before,
  header .hamburger::after {
    content:    '';
    display:    block;
    position:   absolute;
    left:       50%;
    width:      50%;
    height:     2px;
    z-index:    2;
    background: #fff;
    transform:  translateX(-50%);
    transition: 0.4s;
  }

  header .hamburger::before { top: calc(var(--line-offset) - 1px); }
  header .hamburger::after  { top: calc(var(--width) - var(--line-offset) - 1px); }

  header .hamburger p::before {
    content:       '';
    display:       block;
    position:      absolute;
    top:           0;
    left:          1vw;
    width:         10vw;
    aspect-ratio:  1 / 1;
    z-index:       1;
    border-radius: 2vw;
    background:    var(--color);
  }

  header .hamburger span {
    margin-top: 1vw;
    display:    block;
    transition: 0.4s;
  }

  header .hamburger em {
    position:   absolute;
    width:      100%;
    left:       0;
    bottom:     0;
    transition: 0.4s;
    opacity:    0;
  }

  .js_header_on header .hamburger span { opacity: 0; }
  .js_header_on header .hamburger em   { opacity: 1; }

  .js_header_on header .hamburger::before,
  .js_header_on header .hamburger::after {
    top: calc(var(--width) / 2);
  }

  .js_header_on header .hamburger::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .js_header_on header .hamburger::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  header nav .gnav a {
    text-decoration: none;
    font-weight:     700;
    letter-spacing:  0;
    display:         block;
    position:        relative;
    /* font-size:       20px; */
    font-size: 5vw;
  }

  header nav .gnav a::before {
    z-index:       1;
    background:    var(--color);
    width:         6vw;
    aspect-ratio:  1 / 1;
    content:       "";
    position:      absolute;
    border-radius: 50%;
    right:         8vw;
    top:           50%;
    transform:     translate(0%, -50%);
  }

  header nav .gnav a::after {
    position:            absolute;
    content:             "";
    -webkit-mask-image:  url(/assets/img/icon_arrow.svg);
    mask-image:          url(/assets/img/icon_arrow.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
    mask-size:           contain;
    background:          #fff;
    z-index:             2;
    width:               6vw;
    aspect-ratio:        1 / 1;
    border-radius:       50%;
    right:               8vw;
    top:                 50%;
    transform:           translate(0%, -50%);
  }

  header nav > .nav_con {
    max-height:                 calc(100dvh - var(--s_header));
    overflow-y:                 auto;
    -webkit-overflow-scrolling: touch;
  }

  .h_space.is_frontpage:not(.js_header_move) header nav > .nav_con {
    max-height: calc(100dvh - var(--b_header));
  }
  

  header nav > .nav_con > .btn_area,
  header nav > .nav_con > .gnav > li:nth-child(2n) {
    background: var(--beige);
  }

  header nav > .nav_con > .gnav > li > a {
    padding: 3.1vw 16vw 3.1vw 8vw;
  }

  header nav > .nav_con > .gnav > li > a + ul {
    margin-left: 12vw;
  }

  header nav > .nav_con > .gnav > li a + ul li {
    border-top: 1px solid #fff;
  }

  header nav > .nav_con > .gnav > li > a + ul a {
    /* font-size:      16px; */
    font-size:      4vw;
    letter-spacing: 0;
    padding:        2vw 16vw 2.5vw 0;
  }

  header nav > .nav_con > .gnav > li:nth-child(2n+1) a + ul li {
    border-color: var(--beige);
  }

  header .h_top {
    height: var(--b_header);
  }

  header nav {
    display:    none;
    width:      100%;
    background: #fff;
  }
}


/* ==============================================================================
   7. header（PC・TB）
   layout_pctb.css の内容を @media (min-width: 769px) で囲んで再現
   ※ 元ファイルは <link media="min-width:769px"> で制御されていたため
   ============================================================================== */

@media screen and (min-width: 769px) {

  .h_space.under_page header,
  header {
    height: var(--b_header);
  }

  header .h_space {
    width:      100%;
    transition: 0.5s ease;
  }

  .h_space.under_page header .logo,
  header .logo {
    width:      196px;
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    margin-top: -20px;
    transition: 1s ease;
  }

  header .logo img      { opacity: 1; }
  header .logo a::after { opacity: 0; }

  header .logo::after {
    width:          380px;
    left:           135px;
    opacity:        0;
    white-space:    inherit;
    font-size:      12px;
    letter-spacing: 0;
    transition:     opacity 0.3s ease 0s;
  }

  .h_space.under_page header .logo::after,
  .h_space.under_page header .logo a::after { opacity: 0; }
  .h_space.under_page header .logo img      { opacity: 1; }

  .h_space.under_page header .h_top,
  header .h_top {
    height: 160px;
    width:  100%;
    gap:    0;
    transition: height 1s ease, opacity 1s ease;
  }

  header .h_top .btn_area {
    position:              absolute;
    right:                 20px;
    top:                   20px;
    grid-template-columns: 146px 100px 100px;
    gap:                   4px;
    padding:               0;
  }

  header .h_top .btn_area a {
    border:          1px solid var(--color);
    text-decoration: none;
    position:        relative;
    padding:         6px 12px 8px;
    border-radius:   30px;
    line-height:     1.3;
    display:         flex;
    flex-wrap:       wrap;
    align-items:     flex-end;
    min-height:      32px;
    gap:             3px;
    background:      #fff;
  }

  header .h_top .btn_area a::before,
  header .h_top .btn_area a::after {
    width: 16px !important;
    right: 8px  !important;
  }

  header .h_top .btn_area a::after {
    position:            absolute;
    content:             "";
    -webkit-mask-image:  url(/assets/img/icon_arrow.svg);
    mask-image:          url(/assets/img/icon_arrow.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat:         no-repeat;
    mask-size:           contain;
    background:          #fff;
    z-index:             2;
    aspect-ratio:        1 / 1;
    border-radius:       50%;
    top:                 50%;
    transform:           translate(0%, -50%);
  }

  header .h_top .btn_area .tel_box a        { width: 100%; }

  header .h_top .btn_area li:not(.tel_box) a {
    font-size:      12px;
    letter-spacing: 0.08em;
  }

  header .h_top .btn_area .area a {
    background:   var(--green);
    border-color: var(--green);
    color:        #fff;
  }

  header .h_top .btn_area .area a::before { background: #fff; }
  header .h_top .btn_area .area a::after  { background: var(--green); }

  header nav > .nav_con {
    display: block !important;
    height:  40px;
  }

  header nav > .nav_con > .gnav {
    display:         flex;
    justify-content: space-between;
    gap:             24px;
    width:           1000px;
  }

  header nav > .nav_con > .gnav a {
    font-weight:     700;
    font-size:       16px;
    letter-spacing:  0;
    text-decoration: none;
    display:         block;
    position:        relative;
    height:          40px;
  }

  header nav > .nav_con > .gnav > li {
    position:  relative;
    isolation: isolate;
  }

  header nav > .nav_con > .gnav > li::after {
    content:        '';
    display:        block;
    position:       absolute;
    top:            0;
    left:           -24px;
    width:          calc(100% + 48px);
    height:         100%;
    z-index:        -1;
    pointer-events: none;
    transition:     0.5s ease;
  }

  header nav > .nav_con > .gnav > li > a::after {
    width:      100%;
    bottom:     0;
    left:       0;
    height:     4px;
    background: var(--green);
    position:   absolute;
    content:    "";
    opacity:    0;
    transition: 0.5s ease;
  }

  header nav > .nav_con > .gnav > li > a:hover {
    color:      var(--green);
    opacity:    1;
    transition: 0.5s ease;
  }

  header nav > .nav_con > .gnav > li > a:hover::after { opacity: 1; }

  header nav > .nav_con > .gnav > li:hover::after {
    pointer-events: auto;
  }

  header nav > .nav_con > .gnav > li:hover ul {
    opacity:        1;
    pointer-events: auto;
  }

  header nav > .nav_con > .gnav > li > ul {
    position:       absolute;
    width:          272px;
    background:     #fff;
    top:            100%;
    left:           50%;
    transform:      translateX(-50%);
    opacity:        0;
    pointer-events: none;
    transition:     0.4s;
  }

  header nav > .nav_con > .gnav > li ul {
    padding:    0 24px;
    text-align: center;
  }

  header nav > .nav_con > .gnav > li ul a {
    font-size:      16px;
    font-weight:    700;
    letter-spacing: 0;
    padding:        10px 0;
    display:        block;
    height:         inherit;
    min-height:     60px;
  }

  header nav > .nav_con > .gnav > li ul > li + li {
    border-top: 1px solid var(--color);
  }

  .h_space.js_header_move.under_page header { height: var(--s_header); }

  .h_space.js_header_move .h_inner {
    width:  1000px;
    margin: 0 auto;
  }

  .h_space.js_header_move.under_page header .logo,
  .h_space.js_header_move header .logo {
    width:      126px;
    left:       calc(50% - 500px);
    transform:  translate(0%, -50%);
    margin-top: -10px;
    transition: 1s ease;
  }

  .h_space.js_header_move.under_page header .logo a::after { opacity: 1; }
  .h_space.js_header_move.under_page header .logo img      { opacity: 0; }
  .h_space.js_header_move.under_page header .logo::after   { opacity: 1; }

  .h_space.js_header_move header .logo::after {
    transition: opacity 0.3s ease 1.0s;
  }

  .h_space.js_header_move.under_page header .h_top,
  .h_space.js_header_move header .h_top {
    height:      60px;
    padding-top: 20px;
    transition:  0.8s ease;
    width:       1000px;
    align-items: flex-end;
  }

  .h_space.js_header_move .h_top .btn_area {
    grid-template-columns: 176px 146px 100px 100px;
    top:        28px;
    right:      calc(50% - 500px);
    transition: 1.5s ease;
  }

  .h_space.js_header_move .h_top .btn_area .tel_box { grid-column: inherit; }

  .h_space.js_header_move .h_top .btn_area .tel_box .time {
    opacity:    0;
    position:   absolute;
    transition: 0.5s ease;
  }
}


footer {
	background: var(--color);
	color: #fff;
	padding: 14vw 0;
}

footer a {
	color: #fff;
}

footer .f_con nav li a {
	padding-right: 6.2vw;
	text-decoration: none;
	letter-spacing: 0.08em;
	position: relative;
	display: inline-block;
	padding-top: 0.4vw;
	font-weight: 700;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  footer .f_con nav li a {
    font-size: 4vw;
  }
}

footer .f_con nav li a::before {
	position: absolute;
	content: "";
	-webkit-mask-image: url(/assets/img/icon_arrow.svg);
	mask-image: url(/assets/img/icon_arrow.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-size: contain;
	background: #fff;
	z-index: 2;
	width: 6vw;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	right: 0;
	top: 50%;
	transform: translate(0%, -50%);
}

footer .info_link {
	margin-top: 10vw;
	display: grid;
	grid-template-columns: 1fr 1fr;
  gap: 8px 0;
}

@media screen and (max-width: 767px) {
  footer .info_link {
    gap: 10px 0;
  }
}

footer .info_link a {
	text-decoration: none;
	font-size: 3vw;
	letter-spacing: 0.08em;
  display: table;
}

footer .contact_block {
	margin-top: 10vw;
}

footer .contact_block .lead {
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1.6em;
	margin-bottom: 5vw;
}

@media screen and (max-width: 768px) {
  footer .contact_block .lead {
    font-size: 3vw;
  }
}

footer .btn_area {
	margin-top: 4vw;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2vw;
}

footer .btn_area a {
	border: 1px solid #fff;
	color: #fff;
	text-decoration: none;
	position: relative;
	padding: 2.5vw 14vw 3.1vw 4vw;
	border-radius: 30vw;
	line-height: 1.3;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	background: var(--color);
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  footer .btn_area a {
    font-size: 4vw;
    letter-spacing: 0.15em;
  }
}

footer .btn_area li.tel_box a::after {
	background: var(--color);
}

footer .btn_area a::before {
	z-index: 1;
	background: #fff;
	width: 4vw;
	aspect-ratio: 1 / 1;
	content: "";
	position: absolute;
	border-radius: 50%;
	right: 3vw;
	top: 50%;
	transform: translate(0%, -50%);
}

footer .btn_area li:not(.tel_box) a::after {
	position: absolute;
	content: "";
	-webkit-mask-image: url(/assets/img/icon_arrow.svg);
	mask-image: url(/assets/img/icon_arrow.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-size: contain;
	background: var(--color);
	z-index: 2;
	width: 4vw;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	right: 3vw;
	top: 50%;
	transform: translate(0%, -50%);
}

footer .btn_area .tel_box,
footer .btn_area .area {
	grid-column: 1 / -1;
}

@media screen and (max-width: 768px) {
  footer .btn_area .tel_box a .tel_num {
    font-size: 8vw;
  }
  footer .btn_area .tel_box a .type {
    font-size: 5vw;
  }
  footer .btn_area .tel_box .time {
    font-size: 3vw;
    letter-spacing: 0.2em;
  }
}


footer .tel_box {
	margin-bottom: 4vw;
}

footer .btn_area li.area a {
	background: #fff;
	color: var(--color);
}

footer .btn_area li.area a::before {
	background: var(--color);
}

footer .btn_area li.area a::after {
	background: #fff;
}

footer small {
	font-size: 12px;
	letter-spacing: 0.08em;
	margin-top: 6vw;
	display: block;
}

@media screen and (max-width: 768px) {
  footer small {
    font-size: 3vw;
  }
}


@media screen and (min-width: 769px) {

  /*
*********************************************************************************
/*
/* footer + pagetop
/*
/*******************************************************************************/
footer {
	padding: 117px 0;
}

footer .nav_block {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
}

footer .f_con {
	display: grid;
	grid-template-columns: 480px 1fr;
	gap: 100px;
}

footer .f_con nav ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
  gap: 11px 0;
}

footer .f_con nav li a {
	font-size: 16px;
	padding-right: 10px;
	padding-top: 0;
  display: table;
  line-height: 2.4;
}

footer .f_con nav li a::before {
	width: 24px;
	top: 20px;
	right: -14px;
}

footer .info_link {
	margin-top: 10px;
	grid-template-columns: 1fr 1fr 1fr;
	line-height: 2;
  gap: 12px 0;
}

footer .info_link a {
	font-size: 12px;
  display: table;
  line-height: 2.3;
}

footer .contact_block {
	margin-top: 8px;
}

footer .contact_block .lead {
	letter-spacing: 0.08em;
	margin-bottom: 20px;
  line-height: 1.6;
}

footer .btn_area {
	margin-top: 24px;
	gap: 0 8px;
	grid-template-columns: 161px 117px 117px;
}

footer .btn_area .tel_box {
	margin-bottom: 10px;
}

footer .btn_area .tel_box a {
	padding: 7px 60px 13px 24px;
	width: 100%;
}

footer .btn_area .tel_box a .type {}

footer .btn_area .tel_box a .tel_num {}

footer .btn_area .tel_box .time {
	letter-spacing: 0.08em;
}

footer .btn_area > li:not(:first-child) a {
	letter-spacing: 0.16em;
	padding: 10px 30px 13px 16px;
	font-size: 12px;
}

footer .btn_area > li:not(:first-child) a::before,
footer .btn_area > li:not(:first-child) a::after {
	width: 16px;
	right: 12px;
}

footer .btn_area .area {
	grid-column: 1 / 2;
}

footer small {
	margin-top: 20px;
}


  /*------------------------------------------------------------------------------
電話番号 tel_box */
.tel_box a::before,
.tel_box a::after {
	width: 24px !important;
	right: 16px !important;
}

.tel_box a {
	margin: 0 auto;
	min-height: 58px;
	gap: 5px;
	padding: 7px 60px 13px 24px;
	width: 376px;
}

.tel_box a .type {
	font-size: 24px;
	padding-bottom: 1px;
}

.tel_box a .tel_num {
	font-size: 36px;
}
}