/*------ base css ------*/
:root {
  --c-primary: #cf142b;
}
/* 画面上は非表示、SEO・アクセシビリティ用のh1 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* SP: スライドスワイプ時にページ全体が横スクロールしないようにする（年号が右にずれない） */
@media (max-width: 1100px) {
  body,
  .c-container {
    overflow-x: hidden;
  }
}

.ninetieth-anniversary {
  font-family: -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  Arial,
  sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #111;
}
.ninetieth-anniversary .c-text-a__text {
  color: #111;
  font-weight: 500;
  line-height: 1.4!important;
}
.ninetieth-anniversary h2,
.ninetieth-anniversary h3 {
  color: #111;
  font-weight: 700;
  line-height: 1.4!important;
}
a:has(.sp-fc14) {
  font-weight: 500;
  line-height: 1.2!important;
}
.sp-fc14 {
  @media(max-width: 450px){
    font-size: 0.875rem;
    line-height: 1.4;
  }
}
.c-caption p.c-text-a__text {
  font-weight: 400;
}

/* Line break at a specific position on mobile */
span.break {display: inline-block;}

.content {
  /* Device-independent spacing*/
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);

  .content-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 16px;
  }
}
  .content-inner.lead {
    max-width: 700px;
  }

h2 {
  font-size: 2rem;
  max-width: 1200px;

  &.title {
    font-size: 2rem!important;
    border-bottom: #dedede 3px solid;
    padding-bottom: 15px;

    @media(max-width: 450px) {
      font-size: 1.8rem!important;
      border-bottom: #dedede 3px solid;
    }
  }
}

.comp1 {
  img.comp1-img {
    aspect-ratio: 30/17;
    object-fit: cover;
    border-radius: 4px;
  }
}

.balloontitle {
  display: grid;
  grid-template-columns: min-content auto;
  align-items: center;

  .balloontitle-left {
    display:grid;
    place-content: center;
    width:112px;
    aspect-ratio:1/1;

    /* background-image: url(img/balloon.png); */
    background-image: url("/-/Media/EB0FA09DEEA04BECA5177F239488F764.ashx");
    background-repeat: no-repeat;
    background-size: contain;

    @media(max-width: 640px) {
      width:80px;
    }

    span {
      font-weight: 500;
      display: inline-block;
      width: 80px;
      line-height: 1.4;
      color: #fff;
      translate: -1px -5px;

      @media(max-width: 640px) {
        width:62px;
        font-size: 0.875rem;
        translate: -1px -3px;
      }
    }
  }

  .balloontitle-right {
    display: grid;
    width: auto;
    align-items: center;
    padding-inline: 12px;
    font-weight: 700;
    line-height: 1.4;
    font-size: 2rem;

    span {
      translate: 0px -5px;
    }

    @media(max-width: 450px)  {
      font-size: 1.8rem;
    }
  }
}/* END balloontitle */

/* brekpoint 640px */
.pc-show {
  @media (max-width:640px ) {
    display: none;
  }
}
.sp-show {
  display: none;

  @media (max-width:640px ) {
    display: block;
  }
}

/* brekpoint 1100px only in history erea */
.pc-show-1100 {
  @media (max-width:1100px ) {
    display: none;
  }
}
.sp-show-1100 {
  display: none;

  @media (max-width:1100px ) {
    display: block;
  }
}

.bg_svg {
  width: 100%;
  aspect-ratio: 1440 / 572;
  /* background: url("./img/bg-mv1.webp") center no-repeat; */
  background: url("/-/Media/BE23234D47FC45FE9B073FBCB8FD56C3.ashx") center no-repeat;
  background-size: cover;
  background-position: center;
}

.sp_bg_svg {
  width: 100%;
  aspect-ratio: 13 / 10;
  /* background: url("./img/sp-bg-mv1.webp") center no-repeat; */

  background: url("/-/Media/9E41694E46704596AAC7736370CCFD67.ashx") center no-repeat;
  background-size: cover;
  background-position: center;
}

svg.md {
  width: 100%;
  height: 100%;
  display: block;
}

.lead {
  margin-top: 5rem;
  letter-spacing: 3;

  p {
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0;
    line-height: 1.8;

    @media(max-width: 450px) {
      font-size: 1.4rem;
      letter-spacing: 1;
    }
  }

  @media(max-width: 1000px) {
    margin-top: 3rem;
  }
}/* END lead */

.history-wrapper {
  width: 100%;
  overflow: hidden!important;
  position: relative;

  .history-contents {
    overflow: hidden;

    .slides-wrapper {
    width: 100%;
    background: var(--c-primary);

    /* SP: 指で横スワイプしてスクロール（JSのスライドは使わない） */
    @media (max-width: 1100px) {
      overflow-x: auto;
      /* 縦スクロールも有効にする */
      overflow-y: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      /* 縦方向のスクロールを禁止しない */
      touch-action: pan-x pan-y;
    }

  .slides {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;

    .slide {
      box-sizing: border-box;
      flex: 0 0 auto;
      flex-shrink: 0;
      padding-top:4rem;
      padding-bottom: 5rem;
      color: #fff;
      position: relative;

      @media (max-width: 1100px) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }

      .title-in-slide {
        width: 60vw;
        max-width: 500px;
        margin-inline: auto;

        h3 {
        margin: 0;
        margin-bottom: 5rem;
        padding-bottom: 2px;
        font-size: 2rem;
        color: #fff;
        font-weight: 700;
        text-align: center;
        letter-spacing: 3;
        border-bottom: 2px solid rgba(255,255,255, 0.9);
        }
      }

      .slide-content {
        max-width: 1100px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr minmax(0, min(60vw, 500px)) 1fr;
        align-items: center;


        .slide-content-year {
          padding-left: 22.4%;
          padding-right: 10%;
          display: flex;
          align-items: baseline;
          flex-direction: column;

          p {
            margin: 0;/* overwriting existing style */
            font-size: 24px;
            font-weight: 500;
            line-height: 1.4;
            display: flex;
            flex-direction: row;
            align-items: baseline;

            span.large-txt {
              font-weight: 500;
              font-size: 1.5em;
              margin: 0;
            }
          }

          p.adjust-indent {
            text-indent: -15px;
            padding-left: 15px;
          }
        }

        .slide-content-img {

            img {
                width: 100%;
                border-radius: 8px;
            }
        }

        .slide-content-discription {
            padding-left: 10%;
            padding-right: 10%;

            p {
            margin-top: 0;/* overwriting existing style */
            font-weight: 500;
            font-size: 16px;
            line-height: 1.6;
            letter-spacing: 1;
            }
        }
      }

      .balloon-area { /* decorative balloon */
        .top-balloon,
        .bottom-balloon {
            width: 80px;
            aspect-ratio: 1/1;
            position: absolute;
        }

        @media (max-width:1100px ){
            .top-balloon,
            .bottom-balloon {
                width: 3rem;
                aspect-ratio: 1/1;
                position: absolute;
            }
        }

        @media (max-width:640px ){
          .top-balloon,
          .bottom-balloon {
              width: 25px;
              aspect-ratio: 1/1;
              position: absolute;
              right: 5%;
          }
      }
      }

      @media (max-width:1100px ) {/* sp-size in slide */
        padding-inline: 32px;
        padding-top: 1rem;
        padding-bottom: 2rem;

        .slide-content {
          max-width: 500px;
        }

        .title-in-slide {
            width: 100%;
            h3 {
                font-size: 24px;
                margin-bottom: 1rem;
            }
        }

        .slide-content {
            grid-template-columns: unset;
            grid-template-rows: min-content min-content min-content;
            align-items: unset;
            justify-content: center;
            gap: 1.5rem;

            .slide-content-year {
                padding: 0;
                flex-direction: row;
                justify-content: center;

                p {
                    font-size: 16px;
                    &:first-child {
                        margin-right: 10px;
                    }

                    span.large-txt {
                        font-size: 1.3em;
                    }
                }
            }

            .slide-content-img {

                img {
                    border-radius: 4px;
                }

                @media (max-width:640px ) {
                  width: 77%;
                  margin-inline: auto;
                }


            }
            .slide-content-discription {
                padding: 0;
                p {
                  font-size: 14px;
                  line-height: 1.2;
                }
            }
        }
      }/* max-width:1100px */
    }
    /* Decoration position changes based on odd/even */
    .slide1,
    .slide3,
    .slide5,
    .slide7 {
      .top-balloon {
          top: 20%;
          right: 10%;
      }
      .bottom-balloon {
          bottom: 8%;
          left: 10%;
          transform: scale(0.7) scaleX(-1);
      }

      @media (max-width:1100px ){
        .top-balloon {
          top: 25%;
          right: 10%;
        }

        .bottom-balloon {
          bottom: 35%;
          left: 10%;
          transform: scale(0.7) scaleX(-1);
        }
      }

      @media (max-width:640px ){
        .top-balloon {
          top: 25%;
          right: 10%;
        }

        .bottom-balloon {
          bottom: 47%;
          left: 7%;
          transform: scale(0.7) scaleX(-1);
        }
      }
    }
    .slide2,
    .slide4,
    .slide6 {

      .top-balloon {
        top: 20%;
        left: 10%;
      }
      .bottom-balloon {
        bottom: 8%;
        right: 10%;
        transform: scale(0.7) scaleX(-1);
      }

      @media (max-width:1100px ){
        .top-balloon {
            top: 25%;
            left: 10%;
        }
        .bottom-balloon {
          bottom: 35%;
          right: 10%;
        transform: scale(0.7) scaleX(-1);
        }
      }

      @media (max-width:640px ){
        .top-balloon {
            top: 25%;
            left:8%;
        }
        .bottom-balloon {
          bottom: 47%;
          right: 10%;
        transform: scale(0.7);
        }
      }
    }
  }
}

    .years-wrapper {
      width: 100%;
      background:#f3f3f3;

    .years {
      max-width: 1440px;
      margin-inline: auto;

      .year-text {
        display: block;
        fill: #555;
        font-size: 24px;
        transform-origin: 50% 100%;
        transform-box: fill-box;
        transition: transform 0.3s ease;

        .year-text:last-child {
          font-size: 20px;
        }

        @media (hover: hover) and (pointer: fine){
          &:hover {
            fill: var(--c-primary);
            font-weight: bold;
            transform: scale(1.15);
          }
        }

    }

    .year-text.year-active {
      fill: var(--c-primary);
      transform: scale(1.15);
      font-weight: bold;
      pointer-events: none; /* ホバー・クリック無効 */
      
      @media (max-width: 1100px){
        transform: scale(1);
      }
      }
  }

    @media (max-width: 1100px) {
      .years {
        max-width: 500px;
      }
      .year-text {
         font-size: 20px;
      }
      .year-text:last-child {
        font-size: 22px;
        text-anchor: end;
      }

      .year-text.year-active {
        fill: var(--c-primary);
        transform: none;
        font-weight: bold;
        }
    }
    }
  }/* history-contents */

  div.arrow-area {
    .previous_arrow .icon-arrow,
    .next_arrow .icon-arrow {
      display: block;
      width: 20px;
      aspect-ratio: 1/1;
      border-left: 3px solid #fff;
      border-bottom: 3px solid #fff;
      border-radius: 2px;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          opacity: 0.75;
          transition: opacity 0.3s;
        }
      }
    }

    .previous_arrow {
      .icon-arrow {
        transform: rotate(45deg);
        position: absolute;
        top: 50%;
        left: 2%;
      }
    }

    .next_arrow {
      .icon-arrow {
        transform: rotate(-135deg);
        position: absolute;
        top: 50%;
        right: 2%;
      }
    }

    @media (max-width:1100px ) {

      display: block !important;

       .previous_arrow .icon-arrow,
      .next_arrow .icon-arrow {
        width: 15px;
        top: 47%;
      }
    }
  } /* END arrow-area */
} /* END history-wrapper */

a.btn-ayumi {
  font-weight: 500;
  color: var(--c-primary);
  border: solid 2px var(--c-primary);
  border-radius: 3px;
  padding: 0.7rem 2rem;
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease;

  &::before {
    content:"";
    display: block;
    inset: 0;
    background-color: var(--c-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
    z-index: -1;
    position: absolute;
  }

  @media (hover: hover) and (pointer: fine){
    &:hover::before {
      transform: scaleX(1.1);
    }

    &:hover{
      color: #fff;
    }
  }

  @media (max-width: 640px) {
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;

  }
}


.movie {

  h3 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: var( --lslarge);

    @media(max-width: 500px){
      letter-spacing: var( --lssmall);
    }
  }

  figure {
    width: fit-content;
    margin-inline: auto;
  }

  a img.thumbnail {
    width:100%;
    max-width: 500px;
    height:auto;
    aspect-ratio: 30 / 17;
    object-fit: cover;
    border-radius: 4px;

    &+img {
      aspect-ratio: 1/1;
      max-width: 80px;
      height: auto;
    }
  }
} /* END movie */

.sec-about {

  a:has(img.hows) {
    border-radius: 4px;
    display: inline-block;
    overflow: hidden;
  }
  
  .philosophy {
    padding: 5rem;

    h3 {
      font-size: 1.8rem;
    }

    @media (max-width:640px ) {
      padding: 30px;

      h2 {
        font-size: 1.8rem!important;
      }

      h3 {
        font-size: 1.4rem!important;
      }
    }

    .philosophy-inner {
      padding: 3rem;

      .c-linkCard--col2 {
        gap: 0;
        align-items: center;
      }

      img.comp1-img {
        display: block;
        width: 100%;
        object-fit: contain;
      }

      @media (max-width:640px ) {
        padding: 20px;
        .c-linkCard--col2 {
            gap: 1rem;}
      }
    }
  }

  a:has(img) {
    display: inline-block;
    overflow: visible;
  }

  a:has(img) img {
    display: block;
    transform: scale(1);
    transition: transform 0.3s ease;
    will-change : transform;
  }

  a:has(img):hover img {
    transform: scale(1.05);
  }


} /* END sec-about */

.sec-topmessage {

  .photo img {
    width: 100%;
    max-width: 306px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-inline: auto;
    border-radius: 4px;

    @media (max-width:640px ) {
      width: 80%;
      max-width: 280px;
    }
  }
} /* END sec-topmessage */

.sec-stories  {
  p {
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 500;

    @media (max-width:450px ) {
      font-size: 0.9375rem;
    }
  }
  a:has(img) {
    display: inline-block;
    overflow: hidden;
  }

  a:has(img) img {
    display: block;
    transform: scale(1);
    transition: transform 0.3s ease;
    will-change : transform;
  }

  a:has(img):hover img {
    transform: scale(1.03);
  }
} /* END sec-stories */

.sec-sustainable {
  h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;

    @media (max-width:450px ) {
      font-size: 1.1rem;
    }
  }

  a:has(img) {
    display: inline-block;
    overflow: hidden;
  }

  a:has(img) img {
    display: block;
    transform: scale(1);
    transition: transform 0.3s ease;
    will-change : transform;
  }

  a:has(img):hover img {
    transform: scale(1.05);
  }
}/* END sustainable */


/*------Animation ------*/
:root {
  --shake-y: 20px;
  --shake-y3: 5px;
  --shake-y2: 4px;
  --shake-y1: 3px;

  @media (max-width:640px ) {
    --shake-y: 7px;
    --shake-y3: 3px;
    --shake-y2: 2px;
    --shake-y1: 1px;
  }
}

.red {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}
.txt {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(var(--shake-y));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
} /* @keyframes fadeIn */

.blue {
  opacity: 0;
  animation: fadeInandShake 4.8s ease forwards;
  animation-delay: 0.2s;
}
.brown {
  opacity: 0;
  animation: fadeInandShake 4.5s ease forwards;
  animation-delay: 0.5s;
}
.pink {
  opacity: 0;
  animation: fadeInandShake 4.3s ease forwards;
  animation-delay: 0.7s;
}
.pink-l {
  opacity: 0;
  animation: fadeInandShake 4s ease forwards;
  animation-delay: 1s;
}
.green {
  opacity: 0;
  animation: fadeInandShake 3.8s ease forwards;
  animation-delay: 1.2s;
}
.blue-l {
  opacity: 0;
  animation: fadeInandShake 3.6s ease forwards;
  animation-delay: 1.4s;
}
.yellow {
  opacity: 0;
  animation: fadeInandShake 3.4s ease forwards;
  animation-delay: 1.6s;
}
.yellow-l {
  opacity: 0;
  animation: fadeInandShake 3.2s ease forwards;
  animation-delay: 1.8s;
}

@keyframes fadeInandShake {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  10% {
    opacity: 1;
    transform: translateY(calc(var(--shake-y3) * -1));
  }
  25% {
    transform: translateY(var(--shake-y3));
    opacity: 1;
  }
  40% {
    transform: translateY(calc(var(--shake-y2) * -1));
    opacity: 1;
  }
  55% {
    transform: translateY(var(--shake-y2));
    opacity: 1;
  }
  70% {
    transform: translateY(calc(var(--shake-y1) * -1));
    opacity: 1;
  }
  80% {
    transform: translateY(var(--shake-y1));
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
} /* @keyframes fadeInandShake */