@charset "utf-8";

html, body { margin:0; padding:0; height:100%; }
body{ font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif; font-weight:bold; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-style: normal;background:#000;color:#fff;}

/*PCスマホ表示切り替え用*/
.br_pc {display: none !important;}
.pc {display: none;}
.sp {display: block;}
.inline_sp { display:inline; }
.inline_pc { display:none; }
@media screen and (min-width:768px) {
    .sp {display: none !important;}
    .pc {display: block;}
    .br_sp {display: none !important;}
    .br_pc {display: inline !important;}
    .inline_sp { display:none; }
    .inline_pc { display:inline; }
}


/*共通*/
main { margin:0; padding:0; }
.contents_wrap { width:100%; margin:0; padding:0; }
.contents { width:90%; margin:0 auto; }
@media screen and (min-width:768px) {
  .contents_wrap { padding-bottom:150px;}
  .contents { width:90%; max-width:1080px;  }
}


.lowerpage_wrap { position:relative; z-index:1; }
.lead { width:90%; font-size:16px; display:inline-block; text-align:left; margin-bottom:64px; margin-left:5%; text-align: justify; line-height:1.9em; }
@media screen and (min-width:798px) {
  .lead { font-size:24px; margin-bottom:64px; text-align:center; }
}

h2 { font-weight:normal; }
p { display:inline-block; }
strong { display:inline-block; }
.bold { font-weight:bold; }


/*フォント*/
.font-sm { font-size: 14px; }  /* 小さめ */
.font-md { font-size: 16px; }  /* 標準 */
.font-lg { font-size: 18px; }  /* 標準より大きめ */
.font-xl { font-size: 24px; }  /* 大 */
.font-xxl { font-size: 32px; } /* 特大 */
.font-xxxl { font-size:34px; } /* 特大 */
@media screen and (min-width:798px) {
  .font-xxxl { font-size: 40px; }
}

.font-xxxxl { font-size: 80px; } /* 超特大 */

.gothic { font-family: "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN","メイリオ", "Meiryo", sans-serif;}
.shuei { font-family: dnp-shuei-nshogomincho-std, sans-serif;font-style: normal;font-weight: 700;}


.gaiyo { width:100%; display:flex; flex-wrap:wrap; align-items:center; border-top:1px solid #ccc; padding:15px 0; font-family: "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN","メイリオ", "Meiryo", sans-serif;}
.gaiyo:last-child { border-bottom:1px solid #ccc; }
.gaiyo dt { width:100%; font-weight:bold; margin-bottom:10px; }
.gaiyo dd { width:100%; }
@media screen and (min-width:768px) {
    .gaiyo { padding:15px 0; }
    .gaiyo dt { width:25%; font-weight:normal; margin-bottom:initial; padding-left:2%; }
    .gaiyo dd { width:75%; }
}


/*下層のトップ*/
.container_top {width:100%; height:50vh; overflow:hidden;position:relative;}
.container_top img { width:100%; height:100%; object-fit:cover;}
@media screen and (min-width: 768px) {
  .container_top { height:100vh; }
}

.masked {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* ブラシマスク */
  mask-image: url("/img/sprite_alpha.png");
  -webkit-mask-image: url("/img/sprite_alpha.png");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 1200% auto;
  -webkit-mask-size: 1200% auto;

  /* アニメーション：ブラシ＋フェード */
  animation: 
    sprite-steps 1s steps(11) forwards, /* ブラシ動き */
    maskFade 0.8s ease-in forwards 1s;  /* 最後にふわっと */
  -webkit-animation: 
    sprite-steps 1s steps(11) forwards,
    maskFade 0.8s ease-in forwards 1s;

  will-change: mask-position, -webkit-mask-position, opacity;
  opacity: 0.8; /* 初期少し暗くしておく（任意）*/
}

/* ブラシの動き */
@keyframes sprite-steps {
  from { mask-position: 0 0; -webkit-mask-position: 0 0; }
  to   { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
}

/* ▼マスク後にふわっと全体表示 */
@keyframes maskFade {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}

.container_top h1 { width:90%; position:absolute; left:5%; top:50%; transform: translateY(-50%); z-index:2; opacity: 0;animation: h1FadeIn 0.25s ease-out forwards 0.4s; /*0.4秒後にふわっと0.25秒かけて表示する*/}
.container_top h1 img { width:100%; }
@media screen and (min-width:768px) {
.container_top h1 { width:50%; left:5%; }
}
@keyframes h1FadeIn {
  0%   { opacity: 0; transform: translateY(-47%); } /* ちょっと上から */
  100% { opacity: 1; transform: translateY(-50%); } /* 自然に定位置へ */
}
@media screen and (min-width: 840px) {
  .container_top h1 { width:auto; left:10%; }
}


/*電話のリンク*/
@media screen and (min-width:768px) {
    .contentsTel { pointer-events:none; }
}



@media screen and (max-width:767px) {
    .tel:link { color:#000; }
    .tel:visited { color:#000; }
}

/*ふわっと表示*/

.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition-property: opacity, transform;
  transition-duration: 0.8s;
  transition-timing-function: ease;
  transition-delay: var(--fade-delay, 0ms); /* ← ここでdata-delayを反映 */
}

.fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}