@charset "UTF-8";
/****************

共通（color・フォント）

*****************/
:root {
  /* z-index */
  --z-index-minus: -1;
  --z-index-default: 1;
  --z-index-nav: 10;
  --z-index-hamburger: 15;
  --z-index-header: 50;
  --z-index-modal: 100;
  --z-index-max: 999;
  /* font */
  --font-jp: "Zen Maru Gothic", sans-serif;
  /* color */
  --blue: #007EB0;
  --dk-blue: #005C81;
  --lt-blue: #DEF5EC;
  --yellow: #FFE100;
  --lt-yellow: #FFF4A0;
  --lt-orange: #ed6d2a;
  --orange: #D4450F;
  --white: #fff;
  --m-gray: #c4c4c4;
  --black: #464646;
  /* transition */
  --transition-default: 0.5s;
  /* width */
  --whole-width: min(100%, 1960px);
  --contents-width: min(100%, 1240px);
  --contents-min-width: min(100%, 1040px);
}

/* keyframes */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeupAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadeupAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes popup {
  0% {
    -webkit-transform: translateY(40px) scale(0.8);
            transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes popup {
  0% {
    -webkit-transform: translateY(40px) scale(0.8);
            transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@-webkit-keyframes fluffybird {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@keyframes fluffybird {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
@-webkit-keyframes fluffyLeft {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}
@keyframes fluffyLeft {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}
@-webkit-keyframes fluffyRight {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
}
@keyframes fluffyRight {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
}
@-webkit-keyframes line-animation {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes line-animation {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes katakata {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  41% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  42% {
    -webkit-transform: translate(0, 0) rotate(-2deg);
            transform: translate(0, 0) rotate(-2deg);
  }
  43% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
            transform: translate(0, -1px) rotate(0deg);
  }
  44% {
    -webkit-transform: translate(0, -1px) rotate(2deg);
            transform: translate(0, -1px) rotate(2deg);
  }
  45% {
    -webkit-transform: translate(1px, 0) rotate(-1deg);
            transform: translate(1px, 0) rotate(-1deg);
  }
  46% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
            transform: translate(0, 1px) rotate(0deg);
  }
  47% {
    -webkit-transform: translate(0, 0) rotate(2deg);
            transform: translate(0, 0) rotate(2deg);
  }
  48% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes katakata {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  41% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  42% {
    -webkit-transform: translate(0, 0) rotate(-2deg);
            transform: translate(0, 0) rotate(-2deg);
  }
  43% {
    -webkit-transform: translate(0, -1px) rotate(0deg);
            transform: translate(0, -1px) rotate(0deg);
  }
  44% {
    -webkit-transform: translate(0, -1px) rotate(2deg);
            transform: translate(0, -1px) rotate(2deg);
  }
  45% {
    -webkit-transform: translate(1px, 0) rotate(-1deg);
            transform: translate(1px, 0) rotate(-1deg);
  }
  46% {
    -webkit-transform: translate(0, 1px) rotate(0deg);
            transform: translate(0, 1px) rotate(0deg);
  }
  47% {
    -webkit-transform: translate(0, 0) rotate(2deg);
            transform: translate(0, 0) rotate(2deg);
  }
  48% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
}
/****************

共通（color,テキスト,ボタン,inner,共通boxなど）

*****************/
body {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--black);
  font-family: var(--font-jp);
  font-size: clamp(0.875rem, 0.815rem + 0.25vw, 1rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
          animation: fadeIn 1.5s ease 0s 1 normal;
}

main {
  position: relative;
  overflow: clip;
}

.wide-inner {
  width: var(--contents-width);
  margin-inline: auto;
}
.wide-inner:not(.home #mv .wide-inner):not(.contents__head .wide-inner) {
  padding: 1.25rem 20px;
}

.inner {
  margin-inline: auto;
  width: var(--contents-width);
}
.inner:not(.home .inner):not(.contents__head .inner) {
  padding: 40px 20px;
}

.middle-inner {
  margin-inline: auto;
  width: var(--contents-middle-width);
  padding: 40px 20px;
}

.min-inner {
  margin-inline: auto;
  width: var(--contents-min-width);
  padding: 40px 20px;
}

.pc-on {
  display: none;
}

.tab-on,
.sp-on {
  display: block;
}

.mb-none {
  margin-bottom: 0;
}

.text-block {
  display: block;
}

/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.main-headline {
  position: relative;
}
.main-headline:not(#staff .main-headline) {
  top: -2em;
  text-align: center;
}
.main-headline .en {
  font-size: clamp(2.625rem, 0.88rem + 7.16vw, 6.25rem);
  font-weight: 700;
  line-height: 1em;
}
.main-headline h2 {
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  font-size: clamp(0.875rem, 0.544rem + 1.36vw, 1.563rem);
}
.main-headline h2:not(#staff .main-headline h2) {
  background: url(../images/illust-mouth.svg) no-repeat center/cover;
  aspect-ratio: 40/21;
}
.main-headline h2:not(#history .main-headline h2):not(#staff .main-headline h2) {
  padding: 1em;
}

h4 {
  font-size: clamp(1.125rem, 0.824rem + 1.23vw, 1.75rem);
}

main p:not(.mv__en p):not(.message__name):not(.lead):not(#staff .en) {
  margin-bottom: 1rem;
}

strong {
  font-weight: 700;
}

small,
.small:not(.navi__text .small) {
  font-weight: 400;
  font-size: 0.625rem;
}

ul:is(main ul):not(#history-navi ul) {
  list-style: disc;
  margin: 1.5rem 0 1.5rem 1em;
}

ol {
  counter-reset: my-counter;
  list-style: none;
  margin: 1.5rem 0 1.5rem 0;
}
ol li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  position: relative;
}
ol li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  display: block;
  line-height: 1rem;
  text-align: center;
  font-size: 0.75rem;
  height: 1.2rem;
  width: 1.2rem;
  border: 1px solid var(--black);
  border-radius: 50%;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.vertical {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: upright;
}

.lead {
  margin-bottom: 1.25em;
  font-size: clamp(0.875rem, 0.755rem + 0.49vw, 1.125rem);
  line-height: 2.5;
}

/* リンク・ボタン */
* a,
a img,
a::before,
a::after,
button,
button::after {
  -webkit-transition: var(--transition-default);
  transition: var(--transition-default);
}

main a:not(#global-navi a):not(.button a):not(#history-navi ul li a) {
  text-decoration: underline;
}
main a:not(#global-navi a):not(.button a):not(#history-navi ul li a):not(#pagetop a) {
  color: var(--orange);
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.button {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.button.center {
  margin-inline: auto;
}
.button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 0.75em 1.5em;
  color: var(--black);
  font-size: clamp(1rem, 0.699rem + 1.23vw, 1.625rem);
  font-weight: 700;
  background-color: var(--white);
  border-radius: 3em;
}
.button a::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--orange);
  border-radius: 50%;
}

/* 画像 */
picture {
  display: block;
}

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* アニメーション */
.js-fadeup,
.js-popup {
  opacity: 0;
}

.fadeup--show {
  -webkit-animation: fadeupAnime 1.5s forwards;
          animation: fadeupAnime 1.5s forwards;
  opacity: 0;
}

.popup--show {
  -webkit-animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
          animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media screen and (min-width: 768px) {
  .tab-on {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .inner:not(.home .inner):not(.contents__head .inner) {
    padding: 3.125rem 20px;
  }
  .pc-on {
    display: block;
  }
  .sp-on {
    display: none;
  }
  .main-headline:not(#staff .main-headline) {
    top: -4em;
  }
  .lead {
    margin-bottom: 3em;
    line-height: 3;
  }
}
@media (any-hover: hover) {
  a:not(#global-navi a):not(.button a):not(#pagetop a):hover {
    color: var(--orange);
  }
  a:hover img {
    opacity: 0.8;
  }
  .button a:hover {
    background-color: var(--yellow);
  }
}
/****************

header

*****************/
.skip-link {
  position: absolute;
  z-index: var(--z-index-header);
  top: -2rem;
  left: 0;
  display: block;
  padding: 2px 10px;
  color: var(--white);
  text-align: left;
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
  overflow: hidden;
  background-color: var(--black);
  -webkit-transition: top 0.5s ease;
  transition: top 0.5s ease;
}
.skip-link:focus {
  top: 0;
}

#header {
  position: fixed;
  top: 0;
  display: block;
  z-index: var(--z-index-header);
  width: 100%;
}

.header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: min(100%, 1920px);
  height: 100%;
  padding: 0;
  margin-inline: auto;
}

.header__name {
  position: relative;
  top: 10px;
  left: 10px;
}
.header__name a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--orange);
}
.header__name img {
  display: block;
  width: clamp(75px, 15%, 130px);
}
.header__name .text {
  display: block;
}
.header__name .text span {
  display: block;
}

/* スクロールした時 */
.header--active .header__name img {
  width: clamp(46px, 10%, 100px);
}
.header--active .header__name .text {
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
}

#navi-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: var(--z-index-nav);
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 100px 0;
  background-color: rgba(232, 84, 28, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  -webkit-transform: translateX(100vw);
          transform: translateX(100vw);
  overflow-y: scroll;
  -webkit-transition: var(--transition-default);
  transition: var(--transition-default);
}
#navi-box.navi-box--active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.navi-box__inner {
  width: min(100%, 400px);
  padding: 0 20px;
  margin-inline: auto;
}

#global-navi ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1em;
}
#global-navi ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--black);
  font-weight: 700;
  padding: 1em;
  background-color: var(--white);
  border-radius: 3em;
}
#global-navi ul li a::before {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--orange);
  border-radius: 50%;
}

@media screen and (min-width: 1024px) {
  .header__inner {
    padding: 20px;
  }
  .header__name {
    top: 0;
    left: 0;
  }
  .header__name a {
    gap: 20px;
  }
  .header__name img {
    width: clamp(75px, 30%, 130px);
  }
  /* スクロールした時 */
  .header--active .header__name img {
    width: clamp(50px, 15%, 100px);
  }
  #navi-box {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: var(--z-index-nav);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 1em 2em;
    background-color: var(--white);
    border-radius: 3em;
    -webkit-backdrop-filter: unset;
            backdrop-filter: unset;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    overflow-y: unset;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  }
  .navi-box__inner {
    width: min(100%, 1250px);
    padding: 0;
  }
  #global-navi ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 3em;
  }
  #global-navi ul li a {
    padding: 0;
    border-radius: 0;
  }
}
@media screen and (min-width: 1240px) {
  .header__inner {
    padding: 30px 40px;
  }
}
@media (any-hover: hover) {
  #global-navi ul Li a:hover {
    color: var(--orange);
  }
}
/****************

ハンバーガー　ボタン

*****************/
/* ハンバーガーボタン */
.hamburger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  position: fixed;
  z-index: var(--z-index-hamburger);
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background-color: var(--white);
  border-radius: 0 0 0 20px;
  pointer-events: auto;
}

.hamburger__box {
  display: block;
  position: relative;
  height: 12px;
}

.hamburger__line {
  display: block;
  position: relative;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--orange);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hamburger__line span {
  display: block;
  margin: auto;
}
.hamburger__line:first-of-type {
  top: 0;
}
.hamburger__line:nth-of-type(2) {
  top: 8px;
}

.hamburger__text {
  display: block;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--black);
}

/* ハンバーガーボタン　アクティブ */
.hamburger--active .hamburger__line:first-of-type {
  top: 5px;
  opacity: 0;
}
.hamburger--active .hamburger__line:nth-of-type(2) {
  top: 5px;
}

@media screen and (min-width: 1024px) {
  /* ハンバーガーボタン */
  .hamburger {
    display: none;
  }
}
/****************

footer

*****************/
.footer__image {
  border-radius: 50px;
  overflow: clip;
}
.footer__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 2/1;
  -o-object-fit: cover;
     object-fit: cover;
}

.footer__inner {
  color: var(--white);
  text-align: center;
  background-color: var(--orange);
}
.footer__inner .button {
  margin-top: 20px;
}

.footer__logo {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100px;
  height: 100px;
  margin: -50px;
  margin-inline: auto;
  margin-bottom: 20px;
  background-color: var(--white);
  border-radius: 50%;
}
.footer__logo img {
  display: block;
  width: 55%;
  height: 100%;
  aspect-ratio: 60/49;
}

.footer__name {
  font-weight: 700;
  font-size: clamp(1.25rem, 0.889rem + 1.48vw, 2rem);
}

#pagetop {
  margin-top: 2em;
}
#pagetop a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  text-decoration: underline;
}
#pagetop a .arrow {
  display: block;
  width: 0.75em;
  fill: var(--white);
}

.copyright {
  padding: 40px 0;
}

@media screen and (min-width: 768px) {
  .footer__logo {
    width: 160px;
    height: 160px;
    margin-top: -80px;
  }
}
@media screen and (min-width: 1024px) {
  .footer__image {
    border-radius: 100px;
  }
  .footer__image img {
    aspect-ratio: 10/3;
  }
  .footer__inner .button {
    margin-top: 40px;
  }
  .footer__logo {
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-bottom: 40px;
  }
  .copyright {
    padding: 60px 0;
  }
}
@media screen and (min-width: 1240px) {
  .footer__logo {
    width: 240px;
    height: 240px;
    margin-top: -120px;
  }
}
@media (any-hover: hover) {
  #pagetop a:hover {
    color: var(--yellow);
  }
  #pagetop a:hover .arrow {
    fill: var(--yellow);
  }
}
/****************

mv

*****************/
#mv {
  position: relative;
  width: 100%;
  height: clamp(600px, 100svh, 1000px);
  background: no-repeat bottom center/cover;
  background-image: -webkit-image-set(url(../images/image-mv-back-sp.webp) type("image/webp"), url(../images/image-mv-back-sp.jpg) type("image/jpeg"));
  border-radius: 0 0 50px 50px;
  overflow: clip;
}
#mv .bird {
  position: absolute;
  top: 30%;
  left: 6%;
  width: min(15%, 70px);
  -webkit-animation: fluffybird 3s infinite;
          animation: fluffybird 3s infinite;
}
#mv .cloud-left {
  position: absolute;
  top: 75%;
  left: 5%;
  width: min(20%, 150px);
  -webkit-animation: fluffyLeft 6s infinite;
          animation: fluffyLeft 6s infinite;
}
#mv .cloud-right {
  position: absolute;
  top: 28%;
  right: 7%;
  width: min(20%, 150px);
  -webkit-animation: fluffyRight 6s infinite;
          animation: fluffyRight 6s infinite;
}

.mv__text {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -20%;
  margin: auto;
  padding-top: 5em;
  text-align: center;
  background: url(../images/illust-mouth.svg) no-repeat center/contain;
  aspect-ratio: 40/21;
  width: min(70%, 570px);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  opacity: 0;
}

.js-count-stop .mv__text,
.js-count-none .mv__text {
  -webkit-animation: fadeupAnime 1.5s forwards;
          animation: fadeupAnime 1.5s forwards;
  opacity: 0;
}

::-webkit-full-page-media, :future, :root .mv__text {
  padding: 5.5em;
}

.mv__logo {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5.5em;
  margin: auto;
  width: min(60%, 318px);
}
.mv__logo .fillnone {
  fill: none;
}
.mv__logo .orange {
  fill: var(--lt-orange);
}
.mv__logo .white {
  fill: var(--white);
}

.mv__since {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4em;
  width: min(30%, 150px);
  margin: auto;
}

.mv__copy {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5em;
  margin: auto;
  font-size: clamp(1rem, 0.458rem + 2.22vw, 2.125rem);
  font-weight: 700;
}

.mv__catch {
  display: grid;
  gap: 6px;
  position: absolute;
  z-index: var(--z-index-default);
  top: 100px;
  right: 20px;
}
.mv__catch span {
  display: block;
  padding: 0.75em 0.15em;
  color: var(--white);
  font-weight: 700;
  font-size: clamp(0.875rem, 0.333rem + 2.22vw, 2rem);
  line-height: 1.6;
  letter-spacing: 0.2em;
  background-color: var(--blue);
  border-radius: 10px;
}

.mv__en {
  position: absolute;
  top: 50%;
  left: -6em;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.mv__en p {
  color: var(--orange);
  font-size: clamp(0.625rem, 0.444rem + 0.74vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.2em;
}

@media screen and (min-width: 540px) {
  .mv__logo {
    bottom: 8em;
  }
  ::-webkit-full-page-media, :future, :root .mv__text {
    padding: 7em;
  }
  .mv__since {
    bottom: 6.2em;
  }
}
@media screen and (min-width: 1024px) {
  #mv {
    height: clamp(800px, 100svh, 1000px);
    background-image: -webkit-image-set(url(../images/image-mv-back.webp) type("image/webp"), url(../images/image-mv-back.jpg) type("image/jpeg"));
    border-radius: 0 0 100px 100px;
  }
  #mv .bird {
    top: 40%;
    width: min(15%, 100px);
  }
  #mv .cloud-left {
    top: 55%;
    left: 6%;
    width: min(15%, 235px);
  }
  #mv .cloud-right {
    top: 40%;
    right: 7%;
    width: min(15%, 210px);
  }
  ::-webkit-full-page-media, :future, :root .mv__text {
    padding: 10em;
  }
  .mv__logo {
    bottom: 11em;
  }
  .mv__since {
    bottom: 8.5em;
  }
  .mv__en {
    left: -7em;
  }
}
@media screen and (min-width: 1260px) {
  #mv .bird {
    left: 16%;
  }
  #mv .cloud-left {
    left: 12%;
  }
  #mv .cloud-right {
    right: 10%;
  }
  .mv__catch {
    gap: 15px;
    top: 25%;
    right: 40px;
  }
  .mv__catch span {
    border-radius: 20px;
  }
  .mv__en {
    left: -6em;
  }
}
@media screen and (min-width: 1560px) {
  #mv {
    border-radius: 0 0 200px 200px;
  }
  .mv__catch {
    top: 25%;
    right: 100px;
  }
}
@media screen and (min-width: 1920px) {
  .mv__catch {
    right: 260px;
  }
}
/****************

first

*****************/
#first {
  position: relative;
  margin-bottom: 80px;
}
#first .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 60px 20px 0;
}
#first h2 {
  margin-bottom: 1em;
  font-size: clamp(1.75rem, 0.787rem + 3.95vw, 3.75rem);
}
#first p {
  font-size: clamp(0.875rem, 0.755rem + 0.49vw, 1.125rem);
  line-height: 3;
}

.first__text {
  position: relative;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.first__text .bird {
  position: absolute;
  top: -12%;
  left: -5px;
  width: min(12%, 60px);
  -webkit-animation: fluffybird 3s infinite;
          animation: fluffybird 3s infinite;
}

.first__image {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.first__image .box-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 20px;
  position: relative;
  top: 0;
  left: 0;
  width: calc(100% + 40px);
}
.first__image .box-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  gap: 20px;
  position: relative;
  top: 0;
  left: 0;
  width: calc(100% + 40px);
  margin-top: 20px;
}
.first__image .image {
  height: 100%;
  aspect-ratio: 5/6;
  border-radius: 20px;
  overflow: clip;
}
.first__image .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.first__image .image-1 {
  width: 35%;
}
.first__image .image-2 {
  width: 65%;
}
.first__image .image-3 {
  width: 25%;
}
.first__image .image-4 {
  width: 35%;
}

.first__line {
  position: absolute;
  z-index: var(--z-index-minus);
  top: 0;
  left: -80px;
  right: 0;
  bottom: 0;
  width: 180%;
  margin: auto;
  stroke: var(--orange);
}
.first__line.line--show path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  -webkit-animation: line-animation 3s linear both;
          animation: line-animation 3s linear both;
}

#first__slide .splide__slide:nth-of-type(odd) img {
  margin-top: 20px;
}
#first__slide .splide__slide picture img {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  overflow: clip;
}
#first__slide .splide__toggle {
  display: block;
  margin-top: 1em;
  margin-inline: auto;
  width: var(--contents-width);
}
#first__slide .splide__toggle svg {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  fill: var(--orange);
}
#first__slide .splide__toggle__play,
#first__slide .splide__toggle__pause {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  gap: 8px;
  padding: 0 20px;
}
#first__slide .splide__toggle__play svg,
#first__slide .splide__toggle__pause svg {
  display: block;
}
#first__slide .splide__toggle__play span,
#first__slide .splide__toggle__pause span {
  display: block;
}

@media screen and (min-width: 1024px) {
  #first {
    margin-bottom: 240px;
  }
  #first .inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 40px;
    padding: 180px 20px 120px;
  }
  #first p {
    line-height: 4;
  }
  .first__text {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    width: calc(50% - 40px);
  }
  .first__text .bird {
    width: min(15%, 100px);
  }
  .first__image {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 50%;
  }
  .first__image .box-1 {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    gap: 0;
    position: relative;
    top: 0;
    left: 0;
    width: 110%;
  }
  .first__image .box-2 {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    gap: 60px;
    width: 110%;
    margin-top: 60px;
  }
  .first__image .image {
    border-radius: 60px;
  }
  .first__image .image-1 {
    width: 40%;
  }
  .first__image .image-2 {
    width: 65%;
    margin-top: 150px;
    margin-left: -40px;
  }
  .first__image .image-3 {
    width: 28%;
  }
  .first__image .image-4 {
    width: 40%;
    margin-bottom: 80px;
  }
  .first__line {
    left: 0;
    width: 100%;
  }
  #first__slide .splide__slide:nth-of-type(odd) img {
    margin-top: 60px;
  }
  #first__slide .splide__slide picture img {
    border-radius: 40px;
  }
}
@media screen and (min-width: 1560px) {
  .first__text .bird {
    top: -14%;
    left: -15%;
  }
}
/****************

Message

*****************/
#message {
  margin-bottom: 60px;
  border-radius: 50px;
  background: no-repeat bottom -10px center/contain, var(--lt-blue);
  background-image: -webkit-image-set(url(../images/illust-leaf.webp) type("image/webp"), url(../images/illust-leaf.png) type("image/png"));
  scroll-margin-top: 100px;
}
#message .main-headline {
  color: var(--blue);
}
#message .inner {
  padding: 60px 20px;
}

.message__box {
  background-color: var(--white);
  border-radius: 20px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.message__box:not(.riji .message__box) {
  padding: 50px 20px 50px;
}

.message__name {
  font-weight: 700;
}
.message__name .position {
  letter-spacing: 0.25em;
  font-size: clamp(0.75rem, 0.66rem + 0.37vw, 0.938rem);
}
.message__name .name {
  letter-spacing: 0.5em;
  font-size: clamp(1.125rem, 0.704rem + 1.73vw, 2rem);
}
.message__name.vertical {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.message__name.vertical span {
  display: block;
}
.message__name.vertical .name {
  border-left: 1px solid var(--black);
  border-right: 1px solid var(--black);
}
.message__name:not(.vertical) .position {
  display: block;
}
.message__name:not(.vertical) .name {
  display: inline-block;
  padding: 0.15em 0;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
}

.message__heading h4 {
  line-height: 2em;
}

.readmore {
  position: relative;
}

.readmore__content {
  display: block;
  position: relative;
  height: 350px;
  margin: 0 !important;
  line-height: 2.4;
  -webkit-transition: all 1s;
  transition: all 1s;
  overflow: clip;
}
.readmore__content::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), to(#fff));
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
}
.readmore__content.is--open::before {
  display: none;
}

.readmore__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  visibility: visible;
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.75em 2em;
  color: var(--blue);
  text-align: center;
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  border-radius: 3em;
  background-color: var(--white);
  border: 2px solid var(--blue);
  cursor: pointer;
  z-index: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  outline: none;
}
.readmore__button .icon-more {
  width: 30px;
  fill: var(--blue);
}
@media (any-hover: hover) {
  .readmore__button:hover, .readmore__button:focus {
    color: var(--white);
    background-color: var(--dk-blue);
    border: 2px solid var(--dk-blue);
  }
  .readmore__button:hover .icon-more, .readmore__button:focus .icon-more {
    fill: var(--white);
  }
}

.circle-heading {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1.9em 1.5em;
  color: var(--white);
  font-size: clamp(0.875rem, 0.333rem + 2.22vw, 2rem);
  background-color: var(--blue);
}
.circle-heading span {
  display: block;
}
.circle-heading::before, .circle-heading::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--blue);
  border-radius: 50%;
}

.riji {
  position: relative;
  margin-top: 120px;
  margin-bottom: 60px;
}
.riji .circle-heading {
  position: absolute;
  right: 0;
  top: -90px;
  border-radius: 120px 120px 120px 0;
}
.riji .circle-heading::before {
  position: absolute;
  top: -10px;
  right: 10px;
}
.riji .circle-heading::after {
  position: absolute;
  top: 4px;
  right: -5px;
}
.riji .message__box {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2em;
  padding: 0 20px 50px;
}
.riji .message__image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  gap: 1.5em;
  margin-top: -2em;
  margin-bottom: 2em;
}
.riji .message__image picture {
  width: 70%;
}
.riji .message__image .message__name {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.other {
  position: relative;
}
.other .circle-heading {
  position: relative;
  border-radius: 120px 120px 0 120px;
  margin-bottom: 1.5em;
  max-width: 272px;
}
.other .circle-heading::before {
  position: absolute;
  top: -10px;
  left: 10px;
}
.other .circle-heading::after {
  position: absolute;
  top: 4px;
  left: -5px;
}
.other .message__heading h4 {
  margin-bottom: 0.5em;
}
.other .message__box {
  position: relative;
  margin-bottom: 2em;
}
.other .message__name .small {
  font-size: clamp(0.875rem, 0.694rem + 0.74vw, 1.25rem);
  font-weight: 700;
}
.other .button-plus {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 50px;
  fill: var(--blue);
}
@media (any-hover: hover) {
  .other .button-plus:hover, .other .button-plus:focus {
    fill: var(--dk-blue);
  }
}

/* モーダル */
:where(dialog) {
  inline-size: unset;
  max-inline-size: unset;
  block-size: unset;
  max-block-size: unset;
  padding: unset;
  margin: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
}

:where(:root[data-mousedown] dialog *) {
  outline: none;
}

[data-modal-open]:where(:root[data-mousedown] *) {
  outline: none;
}

.modal {
  --gutter: max(5vi, 20px);
  --background-backdrop: color-mix(in srgb, var(--white), transparent 20%);
  inline-size: min(100% - var(--gutter) * 2, 840px);
  block-size: min(100svb - var(--gutter) * 2, 600px);
  margin: auto;
  padding: 4em 20px;
  color: var(--black);
  background-color: var(--white);
  border-radius: 20px;
  -webkit-box-shadow: 0 0 0 100vmax var(--background-backdrop);
          box-shadow: 0 0 0 100vmax var(--background-backdrop);
  -webkit-transition: opacity var(--transition-default), scale var(--transition-default);
  transition: opacity var(--transition-default), scale var(--transition-default);
  contain: strict;
}
.modal:not([data-active=true]) {
  opacity: 0;
  scale: 0.95;
}
.modal::-ms-backdrop {
  backdrop-filter: blur(4px);
  -ms-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.modal::backdrop {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.modal:not([data-active=true])::-ms-backdrop {
  opacity: 0;
}
.modal:not([data-active=true])::backdrop {
  opacity: 0;
}
.modal .container {
  height: 100%;
  overflow-y: scroll;
}
.modal .modal__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1em;
}
.modal h4:not(#modal1 h4) {
  margin-bottom: 1em;
}
.modal .image picture {
  width: min(50%, 200px);
  margin-inline: auto;
}
.modal .name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  gap: 8px;
}
.modal .name figure {
  width: min(35%, 200px);
}

.close {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  z-index: 1;
  inline-size: 3em;
  aspect-ratio: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  background-color: var(--blue);
  border: 0;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.close::before, .close::after {
  position: absolute;
  inset: 0;
  display: inline-block;
  width: 45%;
  height: 2px;
  margin: auto;
  content: "";
  background-color: var(--white);
}
.close::before {
  rotate: 45deg;
}
.close::after {
  rotate: 135deg;
}
.close:focus-visible {
  background-color: var(--dk-blue);
}
.close span {
  opacity: 0;
  visibility: visible;
}
@media (any-hover: hover) {
  .close:hover {
    background-color: var(--dk-blue);
  }
}

@media screen and (min-width: 768px) {
  .riji .message__box {
    gap: 3em;
  }
  .riji .message__top {
    display: grid;
    grid-template-columns: 45% minmax(0, 1fr);
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    gap: 30px;
    margin-top: -100px;
  }
  .riji .message__image {
    display: block;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
  }
  .riji .message__image picture {
    width: 90%;
  }
  .riji .message__image .message__name {
    position: absolute;
    top: 0;
    right: 0;
  }
  .riji .message__heading {
    margin-bottom: 2em;
  }
  .other {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 2em;
  }
  .other .message__box {
    margin-bottom: 3em;
  }
  /* モーダル */
  .modal {
    padding: 5em 3em;
    border-radius: 40px;
  }
  .modal .modal__head {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
  }
  .modal h4 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .modal .image {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .modal .image picture {
    width: min(100%, 200px);
  }
  .close {
    inset-block-start: 15px;
    inset-inline-end: 15px;
  }
}
@media screen and (min-width: 1024px) {
  #message {
    margin-bottom: 200px;
    border-radius: 100px;
    scroll-margin-top: 140px;
  }
  #message .inner {
    padding: 180px 20px 200px;
  }
  .message__box {
    border-radius: 100px;
  }
  .message__box:not(.riji .message__box) {
    padding: 60px;
  }
  .circle-heading {
    padding: 2.2em 1.5em;
  }
  .circle-heading::before, .circle-heading::after {
    width: 20px;
    height: 20px;
  }
  .riji {
    margin-bottom: 140px;
  }
  .riji .message__box {
    padding: 100px;
  }
  .riji .message__top {
    margin-top: -180px;
  }
  .riji .message__heading {
    margin-bottom: 2.5em;
  }
  .riji .circle-heading::after {
    top: 18px;
    right: -15px;
  }
  .other {
    grid-template-columns: 272px minmax(0, 1fr);
  }
  .other .circle-heading::after {
    top: 18px;
    left: -15px;
  }
  .other .message__box {
    padding: 60px;
    margin-bottom: 4em;
    border-radius: 40px;
  }
  .other .button-plus {
    width: 100px;
  }
  /* モーダル */
  .modal {
    block-size: min(100svb - var(--gutter) * 2, 800px);
  }
}
@media screen and (min-width: 1260px) {
  .riji .circle-heading {
    right: -3%;
  }
  .other .circle-heading {
    left: -3%;
  }
  .other .button-plus {
    bottom: -25px;
    right: -25px;
    width: 100px;
  }
}
@media screen and (min-width: 1560px) {
  .riji .circle-heading {
    right: -10%;
  }
  .other .circle-heading {
    left: -10%;
  }
}
/****************

history

*****************/
#history {
  position: relative;
  background-color: var(--lt-yellow);
  border-radius: 50px;
  scroll-margin-top: 100px;
}
#history .inner {
  position: relative;
  padding: 60px 20px;
}
#history .main-headline {
  color: var(--orange);
}
#history .main-headline h2 {
  padding: 1.2em 0.5em;
}

.history__contents {
  position: relative;
}

/* ヒストリーナビ */
#history-navi {
  position: sticky; /* ←必要なもの */
  top: 75px;
  left: 0;
  z-index: var(--z-index-nav);
  width: var(--contents-min-width);
  margin-inline: auto;
  padding: 0.625rem;
  background-color: var(--white);
  border-radius: 10px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
#history-navi ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px 1em;
}
#history-navi ul li {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
#history-navi ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 8px;
  font-size: clamp(1rem, 0.639rem + 1.48vw, 1.75rem);
  font-weight: 700;
}
#history-navi ul li .arrow {
  width: 0.75em;
  fill: var(--orange);
}
#history-navi ul li .hyphen {
  margin-inline: 5px;
}
#history-navi ul li .small {
  font-size: clamp(0.75rem, 0.63rem + 0.49vw, 1rem);
}

#timeline {
  position: relative;
  z-index: var(--z-index-default);
  width: var(--contents-min-width);
  padding-top: 40px;
  margin-inline: auto;
}

/* 中心の線 */
.timeline__line {
  position: absolute;
  z-index: var(--z-index-minus);
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 15px;
  height: 100%;
  margin-inline: auto;
  background-color: var(--white);
}
.timeline__line > div {
  display: block;
  width: 100%;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--yellow);
  -webkit-transition: height 0.2s ease, top 0.2s ease, bottom 0.2s ease;
  transition: height 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}

/* 共通 */
.mainyear {
  display: block;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  padding: 0.5em 1em;
  margin-inline: auto;
  margin-bottom: 40px;
  color: var(--white);
  font-size: clamp(1.75rem, 1.389rem + 1.48vw, 2.5rem);
  line-height: 1em;
  background: url(../images/illust-mouth-og.svg) no-repeat center/cover;
  aspect-ratio: 40/21;
}
.mainyear::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 42.5px);
  width: 80px;
  height: 85px;
}

.mainyear1::before {
  left: -100px;
  background: url(../images/illust-care-1.svg) no-repeat center/cover;
}

.mainyear2::before {
  right: -100px;
  background: url(../images/illust-care-2.svg) no-repeat center/cover;
}

.mainyear3::before {
  left: -100px;
  background: url(../images/illust-care-3.svg) no-repeat center/cover;
}

.mainyear4::before {
  right: -100px;
  background: url(../images/illust-care-4.svg) no-repeat center/cover;
}

.mainyear5::before {
  left: -100px;
  background: url(../images/illust-care-5.svg) no-repeat center/cover;
}

.timeline__item article {
  padding: 2em 1em 1em 1em;
  margin-inline: auto;
  margin-bottom: 40px;
  border-radius: 10px;
  background-color: var(--white);
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.timeline__item article h4 {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.15em 1em;
  margin-top: -2.5em;
  margin-inline: auto;
  color: var(--white);
  text-align: center;
  font-size: clamp(1rem, 0.759rem + 0.99vw, 1.5rem);
  background-color: var(--orange);
  border-radius: 3em;
}
.timeline__item article h4 span {
  font-size: clamp(0.75rem, 0.63rem + 0.49vw, 1rem);
}
.timeline__item dl:not(.timeline__main dl) {
  padding-top: 0.5em;
}
.timeline__item dl dt {
  font-size: clamp(0.75rem, 0.63rem + 0.49vw, 1rem);
}
.timeline__item dl dt::before {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 5px;
  background-color: var(--orange);
  border-radius: 50%;
}
.timeline__item dl dd {
  padding-left: 1em;
}

.timeline__single {
  width: calc(100% - 40px);
}

.timeline__main {
  width: 100%;
}
.timeline__main picture {
  padding-top: 0.5em;
}
.timeline__main picture img {
  border-radius: 10px;
}
.timeline__main .clumn2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1em;
}

/* 年代別 */
#from1975,
#from1987,
#from2005 {
  scroll-margin-top: 200px;
}

/* 最後 */
#end {
  position: relative;
  scroll-margin-top: 100px;
}

.end__image {
  position: relative;
}
.end__image .image1,
.end__image .image2 {
  position: absolute;
  bottom: 0;
  width: min(32%, 240px);
}
.end__image .image1 {
  left: -10%;
}
.end__image .image2 {
  right: -10%;
}

.end__logo {
  width: min(60%, 490px);
  margin-inline: auto;
  margin-bottom: 20px;
}

.end__text {
  color: var(--orange);
  text-align: center;
  font-size: clamp(1rem, 0.759rem + 0.99vw, 1.5rem);
  font-weight: 700;
}
.end__text span {
  display: inline-block;
  padding: 0 0.85em;
  margin-bottom: 1rem;
  background-color: var(--white);
  border-radius: 10px;
}

@media screen and (min-width: 540px) {
  #history .lead {
    text-align: center;
  }
  #history-navi {
    padding: 1rem;
    border-radius: 4em;
  }
  #history-navi ul {
    gap: 8px 2em;
  }
}
@media screen and (min-width: 768px) {
  /* 共通 */
  .mainyear {
    margin-bottom: 70px;
  }
  .mainyear::before {
    top: calc(50% - 74.5px);
    width: 140px;
    height: 149px;
  }
  .mainyear1::before {
    left: -170px;
  }
  .mainyear2::before {
    right: -170px;
  }
  .mainyear3::before {
    left: -170px;
  }
  .mainyear4::before {
    right: -170px;
  }
  .mainyear5::before {
    left: -170px;
  }
  .timeline__item article {
    padding: 2em 40px 30px;
    margin-bottom: 70px;
    border-radius: 20px;
  }
  .timeline__item dl:not(.timeline__main dl) {
    padding-top: 20px;
  }
  .timeline__single {
    width: min(90%, 600px);
  }
  .timeline__main .clumn2 {
    grid-template-columns: 40% minmax(0, 1fr);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 40px;
    padding-top: 20px;
  }
  .timeline__main picture img {
    border-radius: 20px;
  }
  /* 最後 */
  .end__image {
    position: relative;
  }
  .end__image .image1,
  .end__image .image2 {
    bottom: -100px;
    width: min(32%, 420px);
  }
  .end__image .image1 {
    left: -8%;
  }
  .end__image .image2 {
    right: -8%;
  }
}
@media screen and (min-width: 1024px) {
  #history {
    border-radius: 100px;
    scroll-margin-top: 140px;
  }
  #history .inner {
    padding: 180px 20px 120px;
  }
  #history-navi {
    top: 120px;
    padding: 1rem;
    border-radius: 4em;
  }
  #history-navi ul {
    gap: 8px 4em;
  }
  /* 共通 */
  #timeline {
    padding-top: 80px;
  }
  #timeline dl dd {
    padding-left: 0;
  }
  .timeline__single dl div {
    display: grid;
    grid-template-columns: 10em minmax(0, 1fr);
    gap: 1em;
  }
  #from1975,
  #from1987,
  #from2005 {
    scroll-margin-top: 260px;
  }
  /* 最後 */
  #end {
    scroll-margin-top: 140px;
  }
  .end__image {
    margin-bottom: 60px;
  }
}
/****************

staff

*****************/
#staff {
  position: relative;
  padding-bottom: 120px;
  background: no-repeat bottom -10px center/contain;
  background-image: -webkit-image-set(url(../images/illust-leaf.webp) type("image/webp"), url(../images/illust-leaf.png) type("image/png"));
  scroll-margin-top: 100px;
}
#staff .inner {
  position: relative;
  padding: 60px 20px 20px;
}
#staff .main-headline {
  color: var(--orange);
  margin-bottom: 20px;
}
#staff .main-headline .en {
  display: inline-block;
  position: relative;
}
#staff .main-headline .en::after {
  content: "";
  display: block;
  position: absolute;
  top: 0.1em;
  right: -1.2em;
  width: 1em;
  height: auto;
  aspect-ratio: 3/4;
  background: no-repeat center/cover;
  background-image: -webkit-image-set(url(../images/illust-staff-bird.webp) type("image/webp"), url(../images/illust-staff-bird.png) type("image/png"));
  -webkit-animation: katakata 4s infinite ease-in-out alternate;
          animation: katakata 4s infinite ease-in-out alternate;
}
#staff .main-headline h2 {
  display: block;
}

#staff__slide .splide__slide img {
  border-radius: 10px;
}
#staff__slide .splide__toggle {
  display: block;
  margin-top: 1em;
  margin-inline: auto;
  width: var(--contents-width);
}
#staff__slide .splide__toggle svg {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  fill: var(--orange);
}
#staff__slide .splide__toggle__play,
#staff__slide .splide__toggle__pause {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  gap: 8px;
  padding: 0 20px;
}
#staff__slide .splide__toggle__play svg,
#staff__slide .splide__toggle__pause svg {
  display: block;
}
#staff__slide .splide__toggle__play span,
#staff__slide .splide__toggle__pause span {
  display: block;
}

@media screen and (min-width: 1024px) {
  #staff {
    padding-bottom: 380px;
    scroll-margin-top: 140px;
  }
  #staff .inner {
    padding: 180px 20px 60px;
  }
  #staff .main-headline {
    margin-bottom: 40px;
  }
  #staff__slide .splide__slide img {
    border-radius: 20px;
  }
}/*# sourceMappingURL=style.css.map */