@charset "UTF-8";
#sango {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: #333333;
  /* メインビジュアル */ }
  #sango .hero-section {
    width: 100%;
    height: 483px;
    background-image: url("/Portals/0/images/jp/sustainability/sango/pic_main.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; }
    #sango .hero-section + .role-section {
      margin-top: 150px; }
    #sango .hero-section .hero-content {
      padding: 0 10px; }
      #sango .hero-section .hero-content h1 {
        margin-top: 110px;
        color: #fff;
        font-size: 38px;
        font-weight: 700;
        line-height: 2;
        letter-spacing: 0.05em; }
  #sango .role-section {
    position: relative;
    background-color: #EFF9FF;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; }
    #sango .role-section + .situation-section {
      margin-top: clamp(80px, 10vw, 150px); }
    #sango .role-section .wave {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 100%;
      background-repeat: repeat-x;
      background-position: 0 bottom;
      background-size: 50% auto; }
    #sango .role-section .wave-container-top {
      position: absolute;
      top: calc(clamp(60px, 6.25vw, 120px) * -0.95);
      left: 0;
      width: 100%;
      height: clamp(60px, 6.25vw, 120px);
      overflow: hidden;
      line-height: 0;
      z-index: 5; }
      #sango .role-section .wave-container-top .wave-back {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/role_wave01.png");
        animation: wave-sway-back 12s ease-in-out infinite;
        z-index: 1;
        position: absolute;
        top: -4px; }
      #sango .role-section .wave-container-top .wave-front {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/role_wave02.png");
        animation: wave-sway-front 8s ease-in-out infinite;
        z-index: 2; }
    #sango .role-section .wave-container-bottom {
      position: absolute;
      bottom: -20px;
      left: 0;
      width: 100%;
      height: clamp(60px, 6.25vw, 120px);
      overflow: hidden;
      line-height: 0;
      z-index: 5; }
      #sango .role-section .wave-container-bottom .wave-bottom {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/role_wave03.png");
        width: 200%;
        height: 100%;
        position: absolute;
        background-repeat: repeat-x;
        background-size: 50% auto;
        animation: wave-sway-front 10s ease-in-out infinite;
        /* 上部より少しゆっくり */ }
    #sango .role-section .role-container {
      padding: 20px 0 clamp(40px, 5vw, 80px); }
      #sango .role-section .role-container .section-title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px, 3vw, 40px);
        gap: 25px; }
        #sango .role-section .role-container .section-title h2 {
          font-size: 38px;
          font-weight: 600; }
      #sango .role-section .role-container .lead-text {
        padding: 0 10px;
        text-align: center;
        font-size: 21px;
        line-height: 2.2;
        font-weight: 600;
        margin-bottom: clamp(30px, 4vw, 60px); }
  #sango .situation-section {
    position: relative;
    background-color: #DEEFFF;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; }
    #sango .situation-section + .protect-section {
      margin-top: clamp(80px, 10vw, 150px); }
    #sango .situation-section .wave {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 100%;
      background-repeat: repeat-x;
      background-position: 0 bottom;
      background-size: 50% auto; }
    #sango .situation-section .wave-container-top {
      position: absolute;
      top: calc(clamp(60px, 6.25vw, 120px) * -0.95);
      left: 0;
      width: 100%;
      height: clamp(60px, 6.25vw, 120px);
      overflow: hidden;
      line-height: 0;
      z-index: 5; }
      #sango .situation-section .wave-container-top .wave-back {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/situation_wave01.png");
        animation: wave-sway-back 12s ease-in-out infinite;
        z-index: 1;
        position: absolute;
        top: -4px; }
      #sango .situation-section .wave-container-top .wave-front {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/situation_wave02.png");
        animation: wave-sway-front 8s ease-in-out infinite;
        z-index: 2; }
    #sango .situation-section .wave-container-bottom {
      position: absolute;
      bottom: -20px;
      left: 0;
      width: 100%;
      height: clamp(60px, 6.25vw, 120px);
      overflow: hidden;
      line-height: 0;
      z-index: 5; }
      #sango .situation-section .wave-container-bottom .wave-bottom {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/situation_wave03.png");
        width: 200%;
        height: 100%;
        position: absolute;
        background-repeat: repeat-x;
        background-size: 50% auto;
        animation: wave-sway-front 10s ease-in-out infinite;
        /* 上部より少しゆっくり */ }
    #sango .situation-section .situation-container {
      padding: 20px 0 clamp(40px, 5vw, 80px); }
      #sango .situation-section .situation-container .section-title {
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px, 3vw, 40px);
        gap: 25px; }
        #sango .situation-section .situation-container .section-title h2 {
          font-size: 38px;
          font-weight: 600; }
      #sango .situation-section .situation-container .lead-text {
        padding: 0 10px;
        text-align: center;
        font-size: 21px;
        line-height: 2.2;
        font-weight: 600;
        margin-bottom: clamp(30px, 4vw, 60px); }
  #sango .protect-section {
    position: relative;
    background-color: #E8F7F0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 80px; }
    #sango .protect-section .wave {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 100%;
      background-repeat: repeat-x;
      background-position: 0 bottom;
      background-size: 50% auto; }
    #sango .protect-section .wave-container-top {
      position: absolute;
      top: calc(clamp(60px, 6.25vw, 120px) * -0.95);
      left: 0;
      width: 100%;
      height: clamp(60px, 6.25vw, 120px);
      overflow: hidden;
      line-height: 0;
      z-index: 5; }
      #sango .protect-section .wave-container-top .wave-back {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/protect_wave01.png");
        animation: wave-sway-back 12s ease-in-out infinite;
        z-index: 1;
        position: absolute;
        top: -4px; }
      #sango .protect-section .wave-container-top .wave-front {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/protect_wave02.png");
        animation: wave-sway-front 8s ease-in-out infinite;
        z-index: 2; }
    #sango .protect-section .wave-container-bottom {
      position: absolute;
      bottom: -20px;
      left: 0;
      width: 100%;
      height: clamp(60px, 6.25vw, 120px);
      overflow: hidden;
      line-height: 0;
      z-index: 5; }
      #sango .protect-section .wave-container-bottom .wave-bottom {
        background-image: url("/Portals/0/images/jp/sustainability/sango/bg/protect_wave03.png");
        width: 200%;
        height: 100%;
        position: absolute;
        background-repeat: repeat-x;
        background-size: 50% auto;
        animation: wave-sway-front 10s ease-in-out infinite; }
    #sango .protect-section .protect-container {
      padding: 20px 10px clamp(40px, 5vw, 80px); }
      #sango .protect-section .protect-container .section-title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px, 3vw, 40px);
        gap: 25px; }
        #sango .protect-section .protect-container .section-title h2 {
          font-size: 38px;
          font-weight: 600; }
      #sango .protect-section .protect-container .lead-text {
        text-align: center;
        font-size: 21px;
        line-height: 2.2;
        font-weight: 600;
        margin-bottom: clamp(30px, 4vw, 60px); }
      #sango .protect-section .protect-container .protect-content.protect-content {
        margin-top: 80px; }
      #sango .protect-section .protect-container .label {
        display: inline-block;
        background-color: #64ABDC;
        color: white;
        padding: 16px 26px 16px;
        font-size: 22px;
        margin-bottom: 20px; }
      #sango .protect-section .protect-container .main-title {
        font-size: 26px;
        margin-bottom: 50px;
        font-weight: 600; }
      #sango .protect-section .protect-container .content-wrapper {
        display: flex;
        gap: 40px;
        margin-bottom: 40px;
        position: relative;
        overflow: hidden; }
        #sango .protect-section .protect-container .content-wrapper::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: url("/Portals/0/images/jp/sustainability/sango/fish01.png");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
          z-index: 1;
          animation: yura-yura 6s ease-in-out infinite;
          opacity: 1; }
        #sango .protect-section .protect-container .content-wrapper.reverse::before {
          background-image: url("/Portals/0/images/jp/sustainability/sango/fish02.png");
          background-position: center center; }
        #sango .protect-section .protect-container .content-wrapper .image-gallery {
          flex: 1;
          z-index: 2;
          display: flex;
          flex-direction: column;
          gap: 40px; }
          #sango .protect-section .protect-container .content-wrapper .image-gallery figure img {
            width: 100%;
            height: auto;
            display: block; }
          #sango .protect-section .protect-container .content-wrapper .image-gallery figcaption {
            font-size: 16px;
            margin-top: 10px;
            font-weight: 400; }
        #sango .protect-section .protect-container .content-wrapper .text-content {
          flex: 1.5;
          font-size: 18px;
          line-height: 1.95em;
          z-index: 2;
          font-weight: 400; }
          #sango .protect-section .protect-container .content-wrapper .text-content .info-box {
            background-color: #fff;
            padding: 25px 40px;
            border-radius: 4px;
            margin-top: 60px; }
            #sango .protect-section .protect-container .content-wrapper .text-content .info-box.ib {
              display: inline-block;
              padding: 10px 20px; }
            #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-title {
              font-size: 24px;
              margin-bottom: 30px;
              font-weight: 600; }
            #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-flex {
              display: flex;
              gap: 20px;
              align-items: flex-start; }
            #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-image {
              flex: 0 0 200px; }
              #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-image img {
                width: 100%;
                height: auto; }
            #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-text {
              flex: 1;
              font-size: 16px;
              margin: 0;
              display: block;
              font-weight: 400; }
            #sango .protect-section .protect-container .content-wrapper .text-content .info-box .external-link {
              color: #0066cc;
              text-decoration: none;
              display: inline-flex;
              align-items: center;
              margin-left: 8px; }
            #sango .protect-section .protect-container .content-wrapper .text-content .info-box .external-link:hover {
              text-decoration: underline; }
            #sango .protect-section .protect-container .content-wrapper .text-content .info-box .external-link::before {
              content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%230066cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
              margin-right: 8px;
              vertical-align: middle; }

_::-webkit-full-page-media, _:future, :root #sango .protect-section .protect-container .content-wrapper .text-content {
  line-height: 1em; }

@keyframes wave-sway-back {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(-15%);
    /* 左へ移動 */ }
  100% {
    transform: translateX(0); } }
/* 前の波：少し速いテンポで左右にスライド */
@keyframes wave-sway-front {
  0% {
    transform: translateX(-25%); }
  50% {
    transform: translateX(0);
    /* 右へ移動 */ }
  100% {
    transform: translateX(-25%); } }
@keyframes yura-yura {
  0% {
    transform: translate(0, 0) rotate(0deg); }
  33% {
    transform: translate(20px, -30px) rotate(1deg); }
  66% {
    transform: translate(-20px, -10px) rotate(-1deg); }
  100% {
    transform: translate(0, 0) rotate(0deg); } }
/* ルビ（ふりがな）の調整 */
ruby {
  line-height: 1; }

rt {
  font-size: 0.45em !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(2px); }

/* ★Safari（iOSおよびMac）のみに適用するハック */
_::-webkit-full-page-media, _:future, :root rt {
  /* すでにtranslateY(2px)があるため、さらに数px加算して沈める */
  /* 詰まり具合を見ながら 4px や 5px などに調整してください */
  transform: translateY(6px) !important; }
_::-webkit-full-page-media, _:future, :root h1 rt {
  transform: translateY(10px) !important; }

_::-webkit-full-page-media, _:future, :root h2 rt {
  transform: translateY(10px) !important; }

@media (max-width: 1024px) {
  #sango .protect-section .protect-container .content-wrapper {
    flex-direction: column; }
    #sango .protect-section .protect-container .content-wrapper::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("/sango/assets/img/fish01.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      z-index: 1;
      animation: yura-yura 6s ease-in-out infinite;
      opacity: 1; }
    #sango .protect-section .protect-container .content-wrapper.reverse::before {
      background-image: url("/sango/assets/img/fish02.png");
      background-position: center center; }
    #sango .protect-section .protect-container .content-wrapper .image-gallery {
      flex-direction: row;
      justify-content: space-around;
      gap: 10px; }
      #sango .protect-section .protect-container .content-wrapper .image-gallery figure img {
        width: 100%;
        height: auto;
        display: block; }
    #sango .protect-section .protect-container .content-wrapper .text-content .info-box {
      padding: 10px 15px; } }
@media (max-width: 750px) {
  #sango {
    font-size: 22px; }
    #sango .hero-section {
      background-image: url("/Portals/0/images/jp/sustainability/sango/sp/pic_main_sp.jpg"); }
    #sango .hero-section .hero-content h1 {
      font-size: 34px; }
    #sango .role-section .role-container .section-title h2 {
      font-size: 34px; }
    #sango .role-section .role-container .lead-text {
      font-size: 19px; }
    #sango .situation-section .situation-container .section-title h2 {
      font-size: 34px; }
    #sango .situation-section .situation-container .lead-text {
      font-size: 19px; }
    #sango .protect-section .protect-container .section-title h2 {
      font-size: 34px; }
    #sango .protect-section .protect-container .lead-text {
      font-size: 19px; }
    #sango .protect-section .protect-container .label {
      font-size: 20px; }
    #sango .protect-section .protect-container .main-title {
      font-size: 23px;
      margin-bottom: 30px; }
    #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-text {
      font-size: 18px; }
    #sango .role-section .wave-container-bottom {
      bottom: -10px; }
    #sango .situation-section .wave-container-bottom {
      bottom: -10px; }
    #sango .protect-section .wave-container-bottom {
      bottom: -10px; }

  _::-webkit-full-page-media, _:future, :root #sango .protect-section .protect-container .label {
    padding: 3px 26px 16px; }
  _::-webkit-full-page-media, _:future, :root #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-text {
    padding-bottom: 10px; }
  _::-webkit-full-page-media, _:future, :root #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-title.mgt {
    padding-top: 10px; } }
@media (max-width: 480px) {
  #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-flex {
    flex-direction: column; }
    #sango .protect-section .protect-container .content-wrapper .text-content .info-box .info-flex .info-image {
      margin: 0 auto; } }

h1 {
  margin: 0;
  padding: 0;
}
h1:after {
  content: none;
}
h2 {
  margin: 0;
  padding: 0;
}
h2:after {
  content: none;
}
h3 {
  margin: 0;
  padding: 0;
}
h3:after {
  content: none;
}
/*# sourceMappingURL=style.css.map */