@charset 'utf-8';

/*共通css*/
body {margin: 0;font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN","Hiragino Sans", "Meiryo", sans-serif; 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; }
p { line-height:1.7em; display:inline-block; }
.footer_contents { display:none; }


.center { width:100%; display:inline-block; text-align:center; }

.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; }
}


/*フォント*/
.gothic {font-family: "Zen Kaku Gothic New", sans-serif;}
.original { line-height:1.2em; font-style: normal; display:inline-block; transform: scaleY(0.8);transform-origin: center; letter-spacing:-0.05em; font-weight:bold; color:#fff;  -webkit-text-stroke:1px; }
.mincho { font-family: "游明朝体", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;}
.fontsize_m { font-size:18px; }
@media screen and (min-width:768px) {
  .fontsize_m { font-size:24px; }
}



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

}

.contents_wrap { width:100%; }
.contents_wrap .contents_inner { width:100%; }
.contents_wrap .contents_inner .contents { margin:200px auto 0 auto; display:block; }


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

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; background: #7F1718; width: 200px; }
@media screen and (min-width: 768px) {
  h2.border_bottom { font-size:40px;  }
}
.square_green { width:16px; height:16px; margin-right:10px; }


/*ふわっと表示*/
.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);
}


/*フッター以外を同じ背景で囲みたい*/
.bg_wrap { width:100%; height:auto; }
.bg_wrap .contents { width:90%; /*background:rgba(255, 255, 255, 0.5);*/ display:block; margin:50px auto 50px auto;  }
.contents_wrap { width:100%; margin-top:100px; }
@media screen and (min-width: 768px) {
  .contents_wrap { margin-top:150px; }
  .bg_wrap .contents { margin:50px auto 100px auto; padding:80px 5%;  }
}
.contents_wrap h1{ width:100%; text-align:center; font-size:18px; line-height:1.2em; display:inline-block; transform: scaleY(0.8);transform-origin: center; letter-spacing:-0.05em; font-weight:bold; color:#fff;  -webkit-text-stroke:0.5px white;}
.contents_wrap .h1_en { width:100%; color:#214C3C; text-align:center; font-size:40px; line-height:1.2em; letter-spacing:0; display:inline-block; transform: scaleY(0.8);transform-origin: center; /*letter-spacing:-0.05em; */font-weight:bold; -webkit-text-stroke:3px #214C3C;
margin-top:-5vw; margin-bottom:10px; }
.contents_wrap .h1_en img { height:50px; }
@media screen and (min-width: 768px) {
  .contents_wrap h1 { font-size:32px; }
.contents_wrap .h1_en { font-size:110px; }
.contents_wrap .h1_en img { height:95px; }
}


/*下層ページの背景*/
.bg_orange {
  margin: 0;
  height: auto;
  animation: melt 10s ease-in-out infinite;
  background: linear-gradient(120deg,#fff202,#fd4603);
  background-size: 400% 400%; /* ← 大きくする */
}

@keyframes melt {
  0% {
    background-position: 0% 50%;
    background-size: 400% 400%;
    background-image: linear-gradient(120deg,#fff202,#fd4603);
  }
  50% {
    background-position: 100% 50%;
    background-size: 500% 500%; /* ← 中間でさらに拡大 */
    background-image: linear-gradient(240deg,#fff202,#fd4603); /* ← 角度を大きく変える */
  }
  100% {
    background-position: 0% 50%;
    background-size: 400% 400%;
    background-image: linear-gradient(120deg,#fff202,#fd4603);
  }
}


.crop-round{width:90%;height:35vw;margin:0 auto;display:block;overflow:hidden;border-radius:9999px;}
@media screen and (min-width: 768px) {
.crop-round { height:25vw; }
}
.crop-round img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}

.h2_en { width:100%; font-size:40px; display:block; color:#000; opacity:0.4; }
h2.h2_obi { font-size:40px; color:#fff; display:inline; line-height:1.2em; font-style: normal; display:inline-block; transform: scaleY(0.8);transform-origin: center; letter-spacing:-0.05em; font-weight:bold; color:#fff;  -webkit-text-stroke:1px; padding:0 10px;}

.obi-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* 黒い帯 */
.obi-bg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  width: 100%;
  height:3em;
  background: black;
  transition: transform 0.6s ease-out;
  padding:0 20px; 
}

/* テキスト */
.h2_obi {
  position: relative;
  font-size: 40px;
  color: #fff;
  letter-spacing: -0.05em;
  font-weight: bold;
  transform: scaleY(0.8);
  opacity: 0;
  transition: opacity 0.4s ease-out 0.4s;
  line-height:1.7em; 
}

/* スクロール後（表示される状態） */
.obi-container.active .obi-bg {
  transform: translateY(-50%) scaleX(1);
}

.obi-container.active .h2_obi {
  opacity: 1;
}



.lead_top { font-size:20px; color:#000; margin-bottom:80px; -webkit-text-stroke:0.5px; text-align:justify; line-height:1.5em;  }
@media screen and (min-width: 768px) {
  .h2_en { font-size:100px; }
  .lead_top { font-size:40px; margin-bottom:180px; -webkit-text-stroke:0.5px;  }
}

/*画像表示時のアニメーション*/
/* マスク付きのアニメーション */
.imgRevealMask {
  --reveal-duration: 0.75s;
  filter: blur(5px) brightness(1.5);
  -webkit-mask-image: linear-gradient(135deg,#000 30%,rgba(0,0,0,.4) 45%,transparent 55%,transparent);
  mask-image: linear-gradient(135deg,#000 30%,rgba(0,0,0,.4) 45%,transparent 55%,transparent);
  -webkit-mask-position: 130% 130%;
  mask-position: 130% 130%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 300% 300%;
  mask-size: 300% 300%;
  opacity: 0;
  transition:
    opacity var(--reveal-duration) .3s,
    filter var(--reveal-duration) .5s,
    -webkit-mask-position var(--reveal-duration) linear,
    mask-position var(--reveal-duration) linear;
}

.imgRevealMask.is-active {
  filter: blur(0) brightness(1);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 1;
}

/* シンプルなフェード（薄い→濃い） */
.imgFadeSoft {
  --fade-duration: 2s;
  opacity: .2;
  transition: opacity var(--fade-duration) ease-out;
}
.imgFadeSoft.is-active {
  opacity: 1;
}

/* 完全フェードイン */
.imgFadeIn {
  --fadein-duration: 1s;
  opacity: 0;
  transition: opacity var(--fadein-duration) ease-out;
}
.imgFadeIn.is-active {
  opacity: 1;
}