@charset "utf-8";

/* ========== root ========== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal;
  text-align: left;
  zoom: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
table {
  border-collapse: collapse;
  font-family: inherit;
}
h1,
h2,
h3,
h4,
h5 {
  font-size: 100%;
  font-weight: normal;
  line-height: 1;
}
input,
textarea,
select {
  font-family: inherit;
  font-size: 16px;
}
input[type=""],
input[type=""],
input[type=""] {
  -webkit-appearance: none;
  border-radius: 0;
}
textarea {
  resize: none;
  -webkit-appearance: none;
  border-radius: 0;
}
th,
td {
  border-collapse: collapse;
}
table th,
table td {
  white-space: nowrap;
}
ul,
ol {
  list-style-type: none;
}
img {
  vertical-align: text-bottom;
  vertical-align: -webkit-baseline-middle;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  object-fit: cover;
}
a {
  text-decoration: none;
  color: inherit;
}
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}
body,
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* ========== root ========== */
:root {
  --color01: #1e4d43;
  --color02: #d66a2e;
  --color03: #f4f2ec;
  --txt_white: #fff;
  --b_shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --t_shadow: 1px 1px 3px rgba(104, 104, 104, 0.7);
  --radius: 15px;
  --full-width: calc(100% - 100px);
  --max-width: clamp(23.438rem, -0.689rem + 91.91vw, 62.5rem);
  --sub-width: 700px;
  --font_base: "LINE Seed JP", sans-serif;
  --font_sub01: "Geologica", sans-serif;
  --fw-base: 400;
  --fw-medium: 600;
  --fw-regular: 700;
  --fw-bold: 800;
  --header-height: 70px;
  --space-base: clamp(3.125rem, 1.116rem + 7.65vw, 7.813rem);
}
/* * {
  outline: 1px solid rgba(255, 0, 0, 0.2);
} */
html {
  scroll-behavior: smooth;
  box-sizing: border-box;
  overflow-wrap: break-word;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 80px;
  font-family: var(--font_base);
}
.anchor {
  display: block;
  padding-top: var(--header-height);
  margin-top: calc(-1 * var(--header-height));
  visibility: hidden;
}
/* ===== ブレークポイント別の表示制御クラス ===== */

/* 1600px を基準とした表示・非表示 */
@media screen and (max-width: 1600px) {
  .hide-16 {
    display: none !important;
  }
  .show-16 {
    display: block !important;
  }
}
@media screen and (min-width: 1601px) {
  .show-16 {
    display: none !important;
  }
}

/* 1280px を基準とした表示・非表示 */
@media screen and (max-width: 1280px) {
  .hide-12 {
    display: none !important;
  }
  .show-12 {
    display: block !important;
  }
}
@media screen and (min-width: 1281px) {
  .show-12 {
    display: none !important;
  }
}

/* 1024px を基準とした表示・非表示 */
@media screen and (max-width: 1024px) {
  .hide-10 {
    display: none !important;
  }
  .show-10 {
    display: block !important;
  }
}
@media screen and (min-width: 1025px) {
  .show-10 {
    display: none !important;
  }
}

/* 992px を基準とした表示・非表示 */
@media screen and (max-width: 992px) {
  .hide-9 {
    display: none !important;
  }
  .show-9 {
    display: block !important;
  }
}
@media screen and (min-width: 993px) {
  .show-9 {
    display: none !important;
  }
}

/* 830px を基準とした表示・非表示 */
@media screen and (max-width: 830px) {
  .hide-8 {
    display: none !important;
  }
  .show-8 {
    display: block !important;
  }
}
@media screen and (min-width: 831px) {
  .show-8 {
    display: none !important;
  }
}

/* 768px を基準とした表示・非表示 */
@media screen and (max-width: 768px) {
  .hide-7 {
    display: none !important;
  }
  .show-7 {
    display: block !important;
  }
}
@media screen and (min-width: 769px) {
  .show-7 {
    display: none !important;
  }
}

/* 630px を基準とした表示・非表示 */
@media screen and (max-width: 630px) {
  .hide-6 {
    display: none !important;
  }
  .show-6 {
    display: block !important;
  }
}
@media screen and (min-width: 631px) {
  .show-6 {
    display: none !important;
  }
}

/* 480px を基準とした表示・非表示 */
@media screen and (max-width: 480px) {
  .hide-4 {
    display: none !important;
  }
  .show-4 {
    display: block !important;
  }
}
@media screen and (min-width: 481px) {
  .show-4 {
    display: none !important;
  }
}

/* --------------------------------------------
  レスポンシブフォントサイズ（480px ~ 1920pxで可変）
  480px以下：最小値に固定、1920px以上：最大値に固定
-------------------------------------------- */
/* ========== ベース用フォントサイズ ========== */
p,
li,
a,
span {
  font-size: 16px;
  font-weight: var(--fw-regular);
}
/* 一番大きい部分 FVのhero-ttl */
.hero-ttl {
  font-size: clamp(2.25rem, 0.838rem + 4.76vw, 5rem); /* 36px-80px */
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.font-sm {
  font-size: clamp(0.8rem, 0.697rem + 0.35vw, 1rem); /* 12.8px-16px */
}
.font-md {
  font-size: clamp(1rem, 0.711rem + 0.97vw, 1.563rem); /* 16px-25px */
}
.font-lg {
  font-size: clamp(1.25rem, 1.09rem + 0.54vw, 1.563rem); /* 20px~25px */
}
.font-xl {
  font-size: clamp(1.25rem, 0.857rem + 1.32vw, 2.016rem); /* 20px~31.25px */
}
.en {
  font-family: var(--font_sub01);
  font-weight: var(--fw-bold);
  font-size: clamp(1.953rem, 1.389rem + 1.9vw, 3.052rem); /* 31.25px-48.83px */
}
.green {
  color: var(--color01) !important;
}
.small {
  font-size: 12.8px;
}

/* マージン・パディング */
.mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}
.mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.pt-1 {
  padding-top: 1rem;
}
.pt-2 {
  padding-top: 2rem;
}
.pt-3 {
  padding-top: 3rem;
}
.pt-5 {
  padding-top: clamp(2rem, 1.082rem + 3.92vw, 5rem);
}
.pb-1 {
  padding-bottom: 1rem;
}
.pb-2 {
  padding-bottom: 2rem;
}
.pb-3 {
  padding-bottom: 3rem;
}
.pb-5 {
  padding-bottom: clamp(2rem, 1.082rem + 3.92vw, 5rem);
}
.m-0 {
  margin: 0;
}
.m-1 {
  margin: 1rem;
}
.m-2 {
  margin: 2rem;
}
.m-3 {
  margin: 3rem;
}
.p-0 {
  padding: 0;
}
.p-1 {
  padding: 1rem;
}
.p-2 {
  padding: 2rem;
}
.p-3 {
  padding: 3rem;
}
.g-1 {
  gap: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
/* シャドウ・角丸 */
.t-shadow {
  text-shadow: var(--t_shadow);
}
.shadow {
  box-shadow: var(--b_shadow);
}
.round {
  border-radius: var(--radius);
}
/* display */
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}
.none {
  display: none !important;
}
/* width */
.w-100 {
  width: 100%;
}
.w-50 {
  width: 48%;
}
.w-30 {
  width: 30%;
}
.h-100 {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
@media screen and (max-width: 1024px) {
  .w-50 {
    width: 100%;
  }
  .w-30 {
    width: 48%;
  }
}
@media screen and (max-width: 480px) {
  .w-30 {
    width: 100%;
  }
}
/* grid */
.grid-center {
  display: grid;
  place-items: center;
}
/* container */
.container {
  width: min(100%, var(--max-width));
  margin: 0 auto;
}
@media screen and (max-width: 1400px) {
  .container {
    width: min(90%, var(--max-width));
  }
}
@media screen and (max-width: 992px) {
  .container {
    width: min(90%, var(--max-width));
  }
}
@media screen and (max-width: 600px) {
  .container {
    width: min(90%, var(--max-width));
  }
}
/* center */
.bg-relative {
  position: relative;
  z-index: 1;
}
.center01 {
  display: grid;
  place-items: center;
}
.center02 {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
}
.center03 {
  position: absolute;
  inset: 0;
  margin: auto;
}
/* 縦書き */
.tate {
  writing-mode: vertical-rl;
}
/* fede効果 */

.fede-box {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 0.8s ease-out;
  position: relative;
  overflow-x: hidden;
  will-change: transform, opacity;
}
.fade-r,
.fade-l,
.fade-t,
.fade-b,
.fade-c {
  opacity: 0;
  transition: all 0.8s ease-out;
}
.fade-target {
  transition: opacity 0.5s ease;
}
.fade-scale {
  will-change: transform, opacity; /* パフォーマンス向上用 */
  transform-origin: center center; /* 拡大の基準位置（中央） */
}

/* 背景を広げる */
.inverse {
  background-color: #000;
  color: var(--txt_white);
  box-shadow: 0 0 0 100vmax #000;
  clip-path: inset(0 -100vmax);
}