@charset 'utf-8';

/*共通css*/
:root {
  --border-color:#434343;
  --font-serif-web:
  "Hiragino Mincho ProN", "ヒラギノ明朝 ProN",
  "Noto Serif JP",
  "Yu Mincho", "游明朝", "YuMincho",
  "MS PMincho", "MS 明朝",
  serif;
}

body{ scroll-behavior: smooth; margin: 0; color: #434343;font-family: var(--font-serif-web); /*cursor: none; */; letter-spacing:0.05em; }
body * { box-sizing:border-box; }/*線幅とpaddingを含める*/
strong { display:inline-block; font-weight:normal; }
span { display:inline-block; }
small { line-height:1.7em; display:inline-block; }
.footer_contents { display:none; }

.br_sp { display:inline; }
.br_pc { display:none; }
@media screen and (min-width:768px) {
	.br_sp { display:none; }
	.br_pc { display:inline; }
}

.inline_sp { display:inline-block; }
.inline_pc { display:none; }
@media screen and (min-width:768px) {
    .inline_sp { display:none; }
    .inline_pc { display:inline-block; }
}

.inline_pad { display:none; }
@media screen and (min-width:768px) and (max-width:1279px) {
  .inline_pad { display:block; }
}
@media screen and (min-width:1280px) {
 .inline_pad { display:none; }
}


/*フォント*/
.shippori-mincho-regular {font-family: "Shippori Mincho", serif;font-weight: 400;font-style: normal;}
.gothic {font-family: "Zen Kaku Gothic New", sans-serif;}

  .fontsize_m { font-size:18px; }
@media screen and (min-width:768px) {
  .fontsize_m { font-size:24px; }
}

/*色*/
.bg_lightblue { background:rgba(17, 119, 167, 0.2); }
.bg_lightorange { background:rgba(232, 98, 29, 0.2); }
.bg_orange { background:#f8d3c3; }
.bg_pink { background:#FA918D;}
.bg_momo { background:rgba(232, 71, 71, 0.37);}
.bg_blue { background:#81CFF3; }
.bg_lightyellow { background:rgba(217, 200, 44, 0.2);}
.bg_lightgreen { background:rgba(45, 170, 64, 0.2); }
.bg_limegreen{ background: rgba(121, 165, 0, 0.2);}
.bg_purple { background: rgba(166, 69, 170, 0.2);}
.bg_beige { background:#EEEDE2; }
.bg_white { background:#fff; }
.bg_green { background:#9DC52C; }
.color_white { color:#fff; }

main  { width:100%; height:100%; display:block; overflow:hidden; padding-bottom:100px; }
@media screen and (min-width: 768px) {
  main { padding-bottom:200px;}
}

/*パララックス*/
.parallax__inner {position: relative;}
.parallax__inner img {transform: translateY(0);transition: transform 0.1s linear;}

.contents_wrap { width:100%; height:auto; display:block; }
.contents_inner { width:90%; margin:100px auto 0 auto; display:flex; flex-wrap:wrap;}
.contents_inner .contents { width:100%; }
.contents_inner .contents .contents_in { width:90%; margin:0 auto; padding:40px 0; }
.contents_inner .contents.bg { background:#fff; }
.contents_inner .contents.bgborder { background:#fff; border:1px solid #000; padding:30px; }
.contents_inner .h1_wrap { width:100%; margin-bottom:40px; }
.contents_inner .h1_wrap .title_en { width:100%; font-size:45px; line-height:1.2em; display:inline-block; }
.contents_inner .h1_wrap h1 { width:100%; font-size:16px; display:inline-block; margin-top:10px;}
@media screen and (min-width: 768px) {
  .contents_inner { margin-top:130px; height:auto; }
  .contents_inner .contents { width:100%; }
  .contents_inner .contents .contents_in { padding:80px 0 0 0; }
  .contents_inner .contents.bgborder { padding:100px; }
  .contents_inner .h1_wrap { display:block; margin-bottom:70px; }
	.contents_inner .h1_wrap .title_en { font-size:87px; margin-right:44px; }
  .contents_inner .h1_wrap h1 { font-size:20px; margin-top:20px; }
}
@media screen and (min-width:1280px) {
 .contents_inner .h1_wrap { display:flex; flex-wrap:wrap; align-items:center; }
 .contents_inner .h1_wrap .title_en { width:auto; }
 .contents_inner .h1_wrap h1 { width:auto; margin-top:0; }
}

.image_top {
  width: 100%;
  height: 25vh;
  margin-bottom: 60px;
  overflow: hidden; /* はみ出しを隠すのが重要 */
}

.image_top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #707070;
  transform: scale(1);                /* 初期は等倍 */
  transition: transform 10s ease-out; /* ゆっくり拡大 */
  animation: zoomIn 10s ease-out forwards;
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1); /* 少し拡大（1.1倍くらいが自然） */
  }
}


/*電話*/
.tel-link { color: inherit; text-decoration: none; display: block; margin-top: 5px;}
.tel-link:hover { text-decoration:none; cursor: default;}

/*概要*/
.outline { width:100%; display:flex; flex-wrap:wrap; border-bottom:1px solid #FBDFD1; line-height:1.75em; margin-bottom:30px; }
.outline dt { width:100%; padding:10px 5% 10px 5%; background:#f8d3c3;}
.outline dd { width:100%; padding:10px 5% 10px 5%; background:#fff;}
@media screen and (min-width: 768px) {
  .outline { width:80%; margin:0 auto; background:#f8d3c3;}
  .outline dt { width:26%; padding:20px 0 20px 2%; background:none; }
  .outline dd { width:74%; padding:20px 0 20px 4%; background:#fff; }
}

h2.border_bottom { width:100%; font-size:24px; line-height:1.2em; border-bottom:1px solid #000; padding-bottom:10px; margin-bottom:40px; display:inline-block; }
@media screen and (min-width: 768px) {
  h2.border_bottom { font-size:40px;  }
}
.square_green { width:16px; height:16px; margin-right:10px; }


/*英字の文字アニメーション*/
.title_en span {display: inline-block;transform: translateY(100%);opacity: 0;animation: slideIn 0.5s ease-out forwards;}
.title_en:not(.inview) span {animation: none; /* 画面に入るまで待機 */}
@keyframes slideIn {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


/*ページ遷移アニメーション*/
  .door-anime{
    --overlay:#9DC52C;           /* 覆う色 */
    --scale-start:.10;           /* 初期スケール（小） */
    --scale-end:40;              /* 画面外まで拡大 */
    --dur:20s;                  /* ☆ 短くしてカクつき回避 */
    --ease:cubic-bezier(.3,1,.6,1);
    --delay:.12s;
  }

  /* ベース */

  .mv{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden}

  /* 覆い（マスク使用） */
  .door-overlay{
    position:fixed;inset:0;z-index:9999;pointer-events:none;
    contain:paint; /* レイヤー分離で合成コスト減 */
  }
  .door-overlay svg{width:100%;height:100%;display:block}
  .door-overlay .cover{fill:var(--overlay)}

  /* === 中央(50,50)原点の“サンドイッチ法”でスムーズに === */
  .door-anime .hole{
    will-change:transform;
    transition:transform var(--dur) var(--ease) var(--delay);
    transform:
      translate(50px,50px)
      scale(var(--scale-start))
      translate(-50px,-50px);
  }
  .door-anime.reveal .hole{
    transform:
      translate(50px,50px)
      scale(var(--scale-end))
      translate(-50px,-50px);
  }

  /* transform-box:view-box が効く環境では自動でより簡潔に */
  @supports (transform-box: view-box) {
    .door-anime .hole{
      transform-box:view-box;
      transform-origin:50% 50%;
      transform:scale(var(--scale-start));
    }
    .door-anime.reveal .hole{ transform:scale(var(--scale-end)); }
  }

  /* モーション配慮（ユーザー設定尊重） */
  @media (prefers-reduced-motion: reduce){
    .door-anime .hole{transition:none;transform:translate(50px,50px) scale(var(--scale-end)) translate(-50px,-50px)}
    @supports (transform-box: view-box){
      .door-anime .hole{transform:scale(var(--scale-end))}
    }
  }

/*メモ*/
.memo {
  background-color: #fff;
  background-image:
    /* 横線 */
    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px),
    /* 縦線 */
    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
    /* 中央の水色ライン */
    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size:
    100% 25px,    /* 横線の間隔を25pxに */
    25px 100%,    /* 縦線の間隔を25pxに */
    100% 100%;    /* 水色ライン（固定） */
  background-position:
    0 0,
    0 0,
    50% 0;
}

/*ふわっと表示*/
.fadein {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.7s cubic-bezier(.25, .1, .25, 1),
              transform 0.7s cubic-bezier(.25, .1, .25, 1);
}

.fadein.inview {
  opacity: 1;
  transform: translateY(0);
}