@charset 'utf-8';




/* Base Body Styles */
body { overflow-x: hidden; overflow-y: scroll; letter-spacing: 0em; font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif; font-size: 16px; line-height: 1.75em; font-weight: 400; font-style: normal; background:#F6F8EF; }
body * { box-sizing: border-box; }
@media screen and (min-width: 1080px) {
    body { letter-spacing: 0.05em; }
}

/* Responsive Text Display */
.inline_pc { display: none; }
.inline_sp { display: inline; }
.inline_max1850 { display: inline; }
.block_pc { display: none; }
.block_sp { display: block; }
@media screen and (min-width: 1080px) {
    .inline_pc { display: inline; }
    .inline_sp { display: none; }
    .block_pc { display: block; }
    .block_sp { display: none; }
}
@media screen and (min-width: 1850px) {
    .inline_max1850 { display: none; }
}

/* Text Alignment */
p { text-align: justify; }

/* Container Styles */
.contents_wrap { width: 100vw; padding: 24px 0 80px; }
.contents { width: 90vw; margin: 0 5%; }
main { background: #fff; }
img { width: 100%; height: 100%; object-fit: cover; }
a.img_link { width: 100%; height: 100%; }
@media screen and (min-width: 1080px) {
    .contents { width: 70vw; margin: 0 auto; }
}

/* Color Classes */
.color_white { color: #FFF; }
.color_black { color: #000; }
.color_green { color: #338753; }
.back_white { background: #FFF; }
.back_black { background: #000; }
.back_green { background: #338753; }
.back_lightgreen { background: #F6F8EF; }

/* Typography */
.bold { font-weight: bold; }
.regular { font-weight: normal; }
.vertical { writing-mode: vertical-rl; text-orientation: upright; }

/* Font Sizes */
.fontsize_xxl { font-size: 50px; line-height: 100px; }
.fontsize_xl { font-size: 28px; line-height: 42px; }
.fontsize_l { font-size: 24px; line-height: 36px; }
.fontsize_m { font-size: 20px; line-height: 30px; }
.fontsize_s { font-size: 18px; line-height: 27px; }
.fontsize_s { font-size: 16px; line-height: 28px; }
.fontsize_normal { font-size: 16px; line-height: 28px; }
@media screen and (min-width: 1080px) {
    .fontsize_xxl { font-size: 100px; line-height: 135px; }
    .fontsize_xl { font-size: 45px; line-height: 67.5px; }
    .fontsize_l { font-size: 36px; line-height: 54px; }
    .fontsize_m { font-size: 30px; line-height: 45px; }
    .fontsize_s { font-size: 27px; line-height: 40.5px; }
    .fontsize_s { font-size: 18px; line-height: 21px; }
    .fontsize_normal { font-size: 16px; line-height: 28px; }
}

/* Special Typography */
.h_english { letter-spacing: 0.1em; opacity: 0.65; }

/* Image Frames */
.border_black { border: 2px solid #000; }

/* Content Layout */
.content_flex_wrap { margin-top: -24px; }
.contents_wrap .contents h1 .h_word { margin-top: -8px; margin-bottom: 32px; }
.contents_wrap .contents p { margin: 32px 0; }
.content_flex_wrap .sideimg_wrap { position: relative; width: 95vw; aspect-ratio: 95 / 64; max-height: 400px; background: #FFF; z-index: 1; overflow: hidden; }
.content_flex_wrap .sideimg_wrap img { width: 100%; height: 100%; object-fit: cover; }
.left .content_flex_wrap .sideimg_wrap { margin-right: auto; margin-left: -5vw; border-left: none; }
.right .content_flex_wrap .sideimg_wrap { margin-right: -5vw; margin-left: auto; border-right: none; }
@media screen and (min-width: 1080px) {
    .content_flex_wrap .sideimg_wrap { flex-shrink: 0; width: 85vw; max-height: 600px; aspect-ratio: 95 / 64; background: #FFF; }
    .left .content_flex_wrap .sideimg_wrap { margin-right: 0; margin-left: -15vw; }
    .right .content_flex_wrap .sideimg_wrap { margin-right: -15vw; margin-left: 0; }
    
    .content_flex_wrap { display: flex; justify-content: space-between; gap: 80px; }
    .content_flex_wrap .sideimg_wrap { flex-shrink: 0; width: calc(60vw); max-height: 600px; aspect-ratio: 95 / 64; background: #FFF; }
    .left .content_flex_wrap { flex-direction: row; }
    .right .content_flex_wrap { flex-direction: row-reverse; }
}

.header_back { display: block; width: 100%; height: 50px; margin-top: -50px; background: #338753; }

/* Link Buttons */
.link_button { display: inline-block; font-size: 18px; line-height: 27px; padding: 0 0 8px 0; }
.link_button .arrow { display: inline-block; aspect-ratio: 1; width: 18px; height: auto; border-radius: 50%; margin: 0 0 -3px 16px; }

/* Hover animation */
.link_button { position: relative; }
.link_button::before { background: #000; content: ''; width: 100%; height: 1.05px; position: absolute; left: 0; bottom: 0; transform-origin: right top; transform: scale(1, 1); transition: transform .2s ease-in; }
.link_button .arrow  { position: relative; z-index: 1; }
.link_button .arrow img { position: absolute; top: auto; bottom: auto;left: 0; right: auto;  object-fit: contain; }
.link_button .arrow::before  { content: ""; display: block; width: calc(100% + 10px); height: auto; aspect-ratio: 1; background: #338753; border-radius: 99px; position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1;  pointer-events: none; transition: all .5s ease;  }
.link_button:hover::before { transform-origin: right top; transform: scale(0, 1); }
.link_button:hover .arrow::before { scale: 1.25; }

a.img_link img { transition: all 0.4s ease-in-out; }
a.img_link:hover img { scale: 1.08; }


/* フェードイン */
.fadeInUp {
  opacity: 0;
  transform: translateY(50px); /* 動きを大きく */
  transition: opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1), transform 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    padding-top: env(safe-area-inset-top, 20px); /* フォールバック値として20pxを指定 */
    padding-right: env(safe-area-inset-right, 20px);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-left: env(safe-area-inset-left, 20px);
}