#header {
    position:fixed;
    .header {
        background:none;
        .header_inner {
            .menu-gmenu-container {
                display:none;
            }
        }
    }
}
#main {
    overflow:clip;
    padding-bottom:0;
    #pagetitle {
        display:none;
    }
}
#footer {
    .footer_contact {
        display:none;
    }
}

section {
    &:not(:last-child) {
        .wrap {
            margin-bottom:0;
        }
    }
    .wrap {
        position:relative;
        .contents {
            h2 {
                border:none;
                padding:0;
                position:relative;
                &.imgtit {
                    font-size:2.4rem;
                    display:grid;
                    justify-items:center;
                    grid-row-gap:.5em;
                    .en {
                        font-size:7.2rem;
                        font-weight:600;
                        letter-spacing:-.01em;
                        line-height: 1;
                        background: rgb(0,163,208);
                        background: linear-gradient(224deg, rgba(0,163,208,1) 37%, rgba(14,113,152,1) 100%);
                        background-size: 100% 100%;
                        background-position: 0 0;
                        background-repeat: no-repeat;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                    .jp {
                        font-weight:600;
                        letter-spacing:.01em;
                        color:#138bbb;
                    }
                }
                .txt {
                    position:absolute;
                }
            }
        }
        .rbg {
            position:absolute;
            width:1600px;
            left:50%;
            top:100%;
            transform:translate(-50%,-50%);
            pointer-events:none;
            z-index:-1;
            img {
                width:1600px;
            }
            &.rbg1 {
                top:50%;
            }
            &.rbg2 {
                top:180%;
            }
        }
    }
}

#mv {
    position: relative;
    .wrap {
        padding:200px 0 300px;
        /* background:url(../img/10th/mv-bg.png) no-repeat center bottom/cover; */
        position: relative;
        .contents {
            h1 {
                font-size:2.2rem;
                line-height:1.5;
                color:#1190bf;
                letter-spacing:.33em;
                display:grid;
                grid-row-gap:1.5em;
                justify-items:center;
                img {
                    width:22em;
                }
            }
        }
        #ribbon_container {
            position: absolute;
            width: 100%;
            height: 120%;
            overflow: hidden;
            top:0;
            left:0;
            .ribbon {
                position: absolute;
                top: 0;
                pointer-events: none;
                will-change: transform, opacity;
                opacity: 0;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
            }
        }
    }
    #confetti-canvas {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
    }
}

#message {
    .wrap {
        background:url(../img/10th/message-bg1.png) repeat-x center center/auto 100%;
        padding:300px 0;
        margin-top:-300px;
        .contents {
            max-width:820px;
            h2 {
                width:12em;
                margin:0 auto 1.5em;
            }
            p {
                font-size:2.0rem;
                color:#FFFFFF;
                text-align:center;
                &:not(:last-child) {
                    margin-bottom:1em;
                }
            }
        }
    }
}

#topmessage {
    .wrap {
        padding:90px 0 100px;
        /* background:url(../img/10th/message-bg.png) repeat-x center top/cover; */
        .contents {
            h2 {
                margin-bottom:2em;
            }
            .contents_inner {
                display:grid;
                grid-template-columns:1fr 38%;
                grid-column-gap:5%;
                .detail {
                    h3 {
                        font-size:3.6rem;
                        color:#138bbb;
                        line-height:1.4;
                        margin-bottom:1em;
                    }
                    p {
                        font-size:2.0rem;
                        margin-bottom:1em;
                        &.sign {
                            color:#589cb8;
                            display:grid;
                            grid-template-columns:auto 10em;
                            align-items:center;
                            justify-content:end;
                            grid-column-gap:1em;
                        }
                    }
                }
                .img {
                    img {
                        box-shadow:10px 10px 0 #bfc9cf;
                    }
                }
            }
        }
    }
}

#logodesign {
    .wrap {
        padding-bottom:90px;
        background:url(../img/10th/logo-bg.png) repeat-x center bottom/100px auto;
        .contents {
            max-width:1000px;
            .contents_inner {
                display:grid;
                grid-template-columns:32% 1fr;
                align-items:center;
                h2 {
                    &.imgtit {
                        justify-items:start;
                    }
                }
                .detail {
                    position:relative;
                    padding:120px 100px;
                    position:relative;
                    h3 {
                        font-size:4.0rem;
                        color:#138bbb;
                        font-weight:600;
                        margin-bottom:.66em;
                    }
                    img {
                        position:absolute;
                        &.ribbon1 {
                            width:160px;
                            left:180px;
                            top:-80px;
                        }
                        &.ribbon2 {
                            width:140px;
                            left:-80px;
                            top:30px;
                        }
                    }
                    p {
                        font-size:1.8rem;
                    }
                    &::before {
                        content:'';
                        display:block;
                        width:100vw;
                        max-width:800px;
                        height:200%;
                        background-color:#e7eaec;
                        position:absolute;
                        left:0;
                        top:0;
                        z-index:-1;
                        background:url(../img/10th/logo-bg2.png) no-repeat center top/cover;
                    }
                }
            }
            .logo {
                background-color:#FFFFFF;
                border-radius:15px;
                padding:90px;
                position:relative;
                img {
                    display:block;
                    max-width:300px;
                    margin:0 auto;
                    &.ribbon3 {
                        width:160px;
                        position:absolute;
                        left:-150px;
                        top:-100px;
                    }
                }
            }
        }
    }
}

#history {
    .wrap {
        padding-top:90px;
        padding-bottom:150px;
        background:url(../img/10th/history-bg.png) repeat-x center center/auto 100%;
        .contents {
            max-width:1000px;
            h2 {
                font-size:7.0rem;
                display:grid;
                grid-template-columns:repeat(2,auto);
                justify-content:center;
                align-items:end;
                line-height:1;
                margin-bottom:.5em;
                .jp {
                    color:var(--color_sub2);
                    font-weight:900;
                }
                .num {
                    width:2.8em;
                    margin-right:-.1em;
                }
                .txt {
                    width:3em;
                    bottom:-.8em;
                    left:calc(50% + 2.3em);
                }
            }
            .history {
                li {
                    width:50%;
                    &:nth-child(even) {
                        margin-left:50%;
                        dl {
                            padding-left:20px;
                            grid-template-columns:auto 1fr;
                            &::before {
                                left:-7px;
                            }
                            &::after {
                                left:0;
                                transform:translateX(-50%);
                            }
                            dd {
                                justify-self:start;
                            }
                        }
                    }
                    &:nth-child(odd) {
                        dl {
                            padding-right:20px;
                            dt {
                                order:1;
                            }
                            &::before {
                                right:-7px;
                            }
                            &::after {
                                right:0;
                                transform:translateX(50%);
                            }
                        }
                    }
                    dl {
                        display:grid;
                        grid-template-columns:1fr auto;
                        align-items:end;
                        grid-column-gap:50px;
                        border-bottom:3px solid var(--color_sub2);
                        padding:50px 0 10px;
                        position:relative;
                        &::before {
                            content:'';
                            display:block;
                            width:14px;
                            height:14px;
                            background-color:var(--color_sub2);
                            border-radius:50%;
                            position:absolute;
                            bottom:-8px;
                        }
                        &::after {
                            content:'';
                            display:block;
                            width:5px;
                            height:100%;
                            background-color:var(--color_sub2);
                            position:absolute;
                            top:0;
                        }
                        dt {
                            font-size:6.0rem;
                            font-weight:600;
                            letter-spacing:-.01em;
                            line-height: 1;
                            background: var(--color_sub2);
                            background: linear-gradient(224deg, var(--color_sub2) 37%, var(--color_main) 100%);
                            background-size: 100% 100%;
                            background-position: 0 0;
                            background-repeat: no-repeat;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                        dd {
                            p {
                                font-size:2.4rem;
                                color:var(--color_sub2);
                                line-height:1.3;
                                font-weight:600;
                                &:not(:last-child) {
                                    margin-bottom:1em;
                                }
                            }
                        }
                    }
                    &:first-child {
                        dl {
                            &::after {
                                content:none;
                            }
                        }
                    }
                    &:last-child {
                        width:100%;
                        margin:0 auto;
                        dl {
                            grid-template-columns:1fr;
                            justify-items:center;
                            border:none;
                            padding-top:100px;
                            padding-right:0;
                            dt {
                                order:0;
                            }
                            dd {
                                text-align:center;
                                img {
                                    max-width:750px;
                                    margin-top:-40px;
                                    width:100%;
                                }
                            }
                            &::before {
                                top:70px;
                                left:50%;
                                transform:translateX(-50%);
                            }
                            &::after {
                                top:0;
                                left:50%;
                                height:70px;
                                transform:translateX(-50%);
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ★ ここから #voice（吹き出し）の縦レイアウト版 ★ */
#voice {
  .wrap {
    padding:30px 0 250px;

    .contents {
      h2 {
        &.imgtit {
          .txt {
            width:26%;
            right:0;
            bottom:-2em;
          }
          .en {
            font-size:min(6.6vw,7.1rem);
          }
        }
      }

      .contents_inner {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        grid-gap:90px 5%;
        align-items:flex-start;

        .item {
          position:relative;
          display:flex;
          flex-direction:column;
          border-radius:20px;
          /* .item には背景を付けない */

          /* 画像エリア：高さ制限＋トリミング */
          .img {
            max-height:260px;
            overflow:hidden;

            img {
              display:block;
              width:100%;
              height:100%;
              object-fit:cover;
              border-radius:20px 20px 0 0;   // 上だけ角丸
            }
          }

          /* ここが「吹き出し本体」 */
          .detail {
            padding:50px 40px;
            position:relative;
            border-radius:0 0 20px 20px;
            background: linear-gradient(
              314deg,
              rgba(0,163,208,1) 27%,
              rgba(14,113,152,1) 100%
            );

            h3 {
              font-size:2.4rem;
              line-height:1.3;
              color:#FFFFFF;
              margin-bottom:.66em;
            }
            p {
              font-size:1.8rem;
              line-height:1.66;
              color:#FFFFFF;
            }

            /* 吹き出し三角：detail と完全一体化 */
            &::after {
              content:'';
              display:block;
              width:80px;
              height:40px;
              position:absolute;
              bottom:-39px;
              left:15px;
              clip-path:polygon(0 0,66% 0,100% 100%);
              background: linear-gradient(
                314deg,
                rgba(0,163,208,1) 27%,
                rgba(14,113,152,1) 100%
              );
            }
          }

          /* 偶数カード：少し下げて、右側吹き出し */
          &:nth-child(even) {
            transform:translateY(90px);

            .detail {
              background: linear-gradient(
                224deg,
                rgba(0,163,208,1) 37%,
                rgba(14,113,152,1) 100%
              );

              &::after {
                left:auto;
                right:13px;
                clip-path:polygon(33% 0,100% 0,0 100%);
                background: linear-gradient(
                  224deg,
                  rgba(0,163,208,1) 37%,
                  rgba(14,113,152,1) 100%
                );
              }
            }
          }
        }
      }
    }
  }
}

#info {
    .wrap {
        padding:280px 0 120px;
        position:relative;
        /* background:url(../img/10th/contact-bg.png) no-repeat center bottom/100% auto; */
        position:relative;
        &::after {
            content:'';
            display:block;
            width:100%;
            height:100%;
            background:url(../img/10th/contact-bg2.png) repeat-x center top/auto 80%;
            position:absolute;
            left:0;
            top:0;
            z-index:0;
        }
        &::before {
            content:'10th ANNIVERSARY';
            font-size:15rem;
            font-weight:600;
            position:absolute;
            top:.66em;
            left:50%;
            white-space:nowrap;
            transform:translateX(-50%);
            color:transparent;
            -webkit-text-stroke: 2px #138bbb;
            text-stroke: 2px #138bbb;
            position:absolute;
            z-index:1;
        }
        .contents {
            position:relative;
            z-index:2;
            max-width:840px;
            h2 {
                font-size:4.8rem;
                color:#138bbb;
                font-weight:600;
                text-align:center;
                margin-bottom:.66em;
            }
            p {
                font-size:2.0rem;
                text-align:center;
                &:not(:last-child) {
                    margin-bottom:1em;
                }
                & + a {
                    display: block;
                    padding-top:50px;
                }
            }
            
        }
    }
}

@media screen and (max-width: 1024px) {
    section {
        &:not(:last-child) {
            .wrap {
                margin-bottom:0;
            }
        }
        .wrap {
            .contents {
                h2 {
                    border:none;
                    padding:0;
                    position:relative;
                    &.imgtit {
                        font-size:2.0rem;
                        .en {
                            font-size:6.0rem;
                        }
                    }
                }
            }
            .rbg {
                width:1200px;
                img {
                    width:1200px;
                }
            }
        }
    }
    
    #mv {
        .wrap {
            padding:150px 0 200px;
            .contents {
                h1 {
                    font-size:2.0rem;
                    img {
                        width:20em;
                    }
                }
            }
        }
    }
    
    #message {
        .wrap {
            padding:250px 0;
            margin-top:-250px;
            .contents {
                p {
                    font-size:1.8rem;
                }
            }
        }
    }
    
    #topmessage {
        .wrap {
            padding:30px 0 90px;
            background:url(../img/10th/message-bg.png) repeat-x center top/cover;
            .contents {
                h2 {
                    margin-bottom:2em;
                }
                .contents_inner {
                    .detail {
                        h3 {
                            font-size:3.0rem;
                        }
                        p {
                            font-size:1.8rem;
                        }
                    }
                }
            }
        }
    }
    
    #logodesign {
        .wrap {
            .contents {
                .contents_inner {
                    .detail {
                        position:relative;
                        padding:100px 60px;
                        position:relative;
                        img {
                            &.ribbon1 {
                                width:140px;
                            }
                            &.ribbon2 {
                                width:120px;
                            }
                        }
                        p {
                            font-size:1.6rem;
                        }
                    }
                }
                .logo {
                    img {
                        max-width:250px;
                    }
                }
            }
        }
    }
    
    #history {
        .wrap {
            padding-top:60px;
            padding-bottom:120px;
            .contents {
                max-width:1000px;
                h2 {
                    font-size:6.0rem;
                }
                .history {
                    li {
                        dl {
                            grid-column-gap:20px;
                            dt {
                                font-size:5.0rem;
                            }
                            dd {
                                p {
                                    font-size:2.0rem;
                                }
                            }
                        }
                        &:last-child {
                            dl {
                                dt {
                                    order:0;
                                }
                                dd {
                                    img {
                                        max-width:600px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    #voice {
    .wrap {
      padding:30px 0 200px;

      .contents {
        .contents_inner {
          grid-gap:90px 3%;

          .item {
            .detail {
              padding:20px;
              h3 {
                font-size:2.0rem;
              }
              p {
                font-size:1.6rem;
              }
            }
          }
        }
      }
    }
  }
    
    #info {
        .wrap {
            padding:200px 0 120px;
            &::before {
                font-size:10rem;
            }
            .contents {
                h2 {
                    font-size:4.0rem;
                }
                p {
                    font-size:1.6rem;
                    margin-bottom:4em;
                }
            }
        }
    }
   
}

@media screen and (max-width: 768px) {
    
    #header {
        .header {
            .header_inner {
                align-items: center;
                .spbtn {
                    /* display:none; */
                }
            }
        }
    }
    
    section {
        &:not(:last-child) {
            .wrap {
                margin-bottom:0;
            }
        }
        .wrap {
            .contents {
                h2 {
                    &.imgtit {
                        font-size:1.8rem;
                        .en {
                            font-size:4rem;
                        }
                        .jp {
                            font-weight:600;
                            letter-spacing:.01em;
                            color:#138bbb;
                        }
                    }
                    .txt {
                        position:absolute;
                    }
                }
            }
            .rbg {
                width:200%;
                img {
                    width:200%;
                }
            }
        }
    }
    
    #mv {
        .wrap {
            padding:100px 0 150px;
            .contents {
                h1 {
                    font-size:min(5.3vw,2.2rem);
                    grid-row-gap:1em;
                    text-align:center;
                    img {
                        width:16em;
                    }
                }
            }
        }
    }
    
    #message {
        .wrap {
            padding:200px 0 150px;
            margin-top:-200px;
            .contents {
                h2 {
                    width:8em;
                }
                p {
                    font-size:min(4.7vw,1.8rem);
                }
            }
        }
    }
    
    #topmessage {
        .wrap {
            padding:0px 0 60px;
            background:url(../img/10th/message-bg.png) repeat-x center top/cover;
            .contents {
                h2 {
                    margin-bottom:2em;
                }
                .contents_inner {
                    grid-template-columns:1fr;
                    .detail {
                        display:contents;
                        h3 {
                            font-size:2.4rem;
                            margin-bottom:.75em;
                        }
                        p {
                            font-size:1.6rem;
                            &.sign {
                                order:3;
                                width:100%;
                                max-width:400px;
                                margin:0 auto;
                            }
                        }
                    }
                    .img {
                        margin-bottom:1.5em;
                        max-width:400px;
                        margin:0 auto 1.5em;
                    }
                }
            }
        }
    }
    
    #logodesign {
        .wrap {
            padding-bottom:60px;
            .contents {
                .contents_inner {
                    display:grid;
                    grid-template-columns:1fr;
                    align-items:center;
                    h2 {
                        &.imgtit {
                            justify-items:center;
                        }
                    }
                    .detail {
                        position:relative;
                        padding:30px 0;
                        position:relative;
                        h3 {
                            font-size:min(7.0vw,2.4rem);
                            color:#138bbb;
                            font-weight:600;
                            margin-bottom:.66em;
                        }
                        img {
                            position:absolute;
                            &.ribbon1 {
                                width:100px;
                                left:auto;
                                right:-50px;
                                top:-50px;
                            }
                            &.ribbon2 {
                                width:80px;
                                left:-50px;
                                top:-60px;
                            }
                        }
                        &::before {
                            left:-20px;
                        }
                    }
                }
                .logo {
                    padding:60px;
                    max-width:400px;
                    margin:0 auto;
                    img {
                        width:90%;
                        &.ribbon3 {
                            width:100px;
                            left:-50px;
                            top:-20px;
                        }
                    }
                }
            }
        }
    }
    
    #history {
        .wrap {
            padding-top:30px;
            padding-bottom:90px;
            .contents {
                h2 {
                    font-size:3.2rem;
                    margin-bottom:1em;
                }
                .history {
                    li {
                        width:100%;
                        &:nth-child(even) {
                            margin-left:0;
                            dl {
                                padding-left:20px;
                            }
                        }
                        &:nth-child(odd) {
                            dl {
                                padding-right:0;
                                padding-left:20px;
                                dt {
                                    order:0;
                                }
                                &::before {
                                    right:auto;
                                    left:-7px;
                                }
                                &::after {
                                    right:auto;
                                    left:0;
                                    transform:translateX(-50%);
                                }
                            }
                        }
                        dl {
                            grid-template-columns:auto 1fr;
                            padding:30px 0 10px 20px;
                            align-items:start;
                            dt {
                                font-size:3.6rem;
                            }
                            dd {
                                padding-top:10px;
                                p {
                                    font-size:1.6rem;
                                }
                            }
                        }
                        &:last-child {
                            dl {
                                padding-left:0;
                                padding-top:75px;
                                dd {
                                    img {
                                        max-width:300px;
                                        margin-top:-20px;
                                    }
                                }
                                &::before {
                                    top:50px;
                                    left:50%;
                                }
                                &::after {
                                    left:50%;
                                    height:50px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    #voice {
    .wrap {
      padding:0px 0 90px;

      .contents {
        h2 {
          &.imgtit {
            margin-bottom:3em;
            .txt {
              bottom:-1.5em;
            }
            .en {
              font-size:min(6.0vw,7.1rem);
            }
          }
        }

        .contents_inner {
          grid-template-columns:1fr;
          grid-gap:40px;
          align-items:center;
          max-width:400px;
          margin:0 auto;

          .item {
            .img {
              max-height:220px;    /* スマホでは少し低めに */
            }

            .detail {
              padding:20px 15px;

              h3 {
                font-size:1.8rem;
                margin-bottom:.5em;
              }
              p {
                font-size:1.4rem;
                line-height:1.5;
              }
            }

            &::after {
              width:50px;
              height:25px;
              bottom:-24px;
            }

            /* スマホでは段差を消したいならここで 0 に */
            &:nth-child(even) {
              transform:translateY(0);
            }
          }
        }
      }
    }
  }
    
    #info {
        .wrap {
            padding:25vw 0 60px;
            &::before {
                font-size:11vw;
                top:.66em;
                -webkit-text-stroke: 1.5px #138bbb;
                text-stroke: 1.5px #138bbb;
            }
            .contents {
                h2 {
                    font-size:3.4rem;
                }
                p {
                    font-size:1.6rem;
                    margin-bottom:3em;
                    text-align:left;
                    br {
                        display:none;
                    }
                }
            }
        }
    }
    
}