@charset "utf-8";

/*-----------------------------------------------
    secHero
-----------------------------------------------*/
.secHero{
    background: none;
    height: 108rem;
    display: flex;
    justify-content: center;
    padding-top: 20rem;
    position: relative;
    overflow: hidden;
}
.secHero::after{
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/index/imgHero.jpg) center bottom / cover no-repeat;
    animation: heroBgZoomMain 14s linear infinite;
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 0;
}
.secHero::before{
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/index/imgHero02.jpg) center bottom / cover no-repeat;
    opacity: 0;
    animation: heroBgFade 14s linear infinite, heroBgZoomSub 14s linear infinite;
    transform-origin: center center;
    will-change: opacity, transform;
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 1;
}
.secHero .itemContents{
    position: relative;
    z-index: 2;
}
.secHero .secHeroTit{
    color: var(--whiteColor);
    writing-mode: vertical-rl;
    width: 29.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.secHero .titHero{
    font-size: var(--pcFontSize33);
    letter-spacing: var(--pcLetterSpacing33_180);
    display: flex;
    flex-direction: column;
    gap: 9rem;
    text-shadow: 0 0 2.5rem rgba(0, 120, 200, 1);
    animation: heroTextShadow 14s infinite;
}
.secHero .titHero .txtKanji{
    font-size: var(--pcFontSize44);
}
.secHero .txtHero{
    font-size: var(--pcFontSize13);
    letter-spacing: var(--pcLetterSpacing13_400);
    text-shadow: 0 0 2.5rem rgba(0, 120, 200, 1);
    animation: heroTextShadow 14s infinite;
}
.HeroWrapper{
    position: relative;
}
.noYakuhan{
    font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", 'Noto Serif Japanese';
}
@media only screen and (max-width:1215px) {
    .secHero{
        background: none;
        /* height: 173.335vw; */
        padding-top: 13.5rem;
        height: 65rem;
    }
    .secHero::after{
        background-image: url(../img/index/imgHero_sp.jpg);
    }
    .secHero::before{
        background-image: url(../img/index/imgHero02_sp.jpg);
    }
    
    .secHero .titHero{
        font-size: var(--spFontSize20);
        letter-spacing: var(--spLetterSpacing20_180);
        gap: 3rem;
    }
    .secHero .titHero .txtKanji{
        font-size: var(--spFontSize26);
    }
    .secHero .txtHero{
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_300);
    }
    .secHero .secHeroTit {
        width: 13rem;
    }
}

@keyframes heroBgFade {
    0%, 38% {
        opacity: 0;
    }
    58%, 88% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes heroBgZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.03);
    }
}

@keyframes heroBgZoomMain {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes heroBgZoomSub {
    0%, 50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.03);
    }
}

@keyframes heroTextShadow {
    0%, 30% {
        text-shadow:
            0 0 1.25rem rgba(0, 120, 200, 0.7),
            0 0 2.5rem rgba(0, 120, 200, 1);
    }
    50%, 80% {
        text-shadow:
            0 0 8px rgba(0, 128, 64, 0.42),
            0 0 8px rgba(0, 128, 64, 0.42),
            5px 5px 8px rgba(0, 128, 64, 0.35),
            -5px 5px 8px rgba(0, 128, 64, 0.35),
            5px -5px 8px rgba(0, 128, 64, 0.35),
            -5px -5px 8px rgba(0, 128, 64, 0.35),
            9px 9px 8px rgba(0, 128, 64, 0.25),
            -9px 9px 8px rgba(0, 128, 64, 0.25),
            9px -9px 8px rgba(0, 128, 64, 0.25),
            -9px -9px 8px rgba(0, 128, 64, 0.25);
    }
    100% {
        text-shadow:
            0 0 1.25rem rgba(0, 120, 200, 0.7),
            0 0 2.5rem rgba(0, 120, 200, 1);
    }
}

/*-----------------------------------------------
    secNews
-----------------------------------------------*/
.secNews{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 8rem;
    background: var(--whiteColor);
    width: 51.042%;
    max-width: 98rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18rem 0 12rem;
    z-index: 2;
}
.secNews .titNews{
    font-size: var(--pcFontSize20);
    letter-spacing: var(--pcLetterSpacing20_50);
    flex-shrink: 0;
}
.secNews .txtNews{
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing15_200);
    position: relative;
    padding-left: 2.5rem;
    margin-left: 2.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.secNews .txtNews::before{
    content: '';
    position: absolute;
    top: calc(50% - 1.9rem);
    left: 0;
    height: 3.8rem;
    width: 0.1rem;
    background: var(--blackBorder03);
}
@media only screen and (max-width:1215px) {
    .secNews{
        position: static;
        height: 9rem;
        width: 100%;
        max-width: unset;
        padding: 0 2rem;
    }
    .secNews .titNews{
        font-size: var(--spFontSize16);
        letter-spacing: var(--spLetterSpacing16_50);
    }
    .secNews .txtNews{
        font-size: var(--spFontSize13);
        letter-spacing: var(--spLetterSpacing13_50);
        padding-left: 1rem;
        margin-left: 1rem;
    }
}

/*-----------------------------------------------
    secRanking
-----------------------------------------------*/
.secRanking{
    position: absolute;
    bottom: -3.5rem;
    right: 17rem;
    width: 30.8rem;
    height: 27.2rem;
    z-index: 3;
}
@media only screen and (max-width:1215px) {
    .secRanking{
        bottom: 7.4rem;
        right: 2rem;
        width: 15.4rem;
        height: 13.6rem;
    }
}

/*-----------------------------------------------
    secTicker
-----------------------------------------------*/
/* secTicker */
.secTicker{
    overflow: hidden;
    margin-top: 9rem;
    text-align: center;
    margin-left: 4rem;
}
@media only screen and (max-width:1215px){
    .secTicker .boxTicker {
        display: flex;
        margin-bottom: 1rem;
    }
    .secTicker {
        margin-top: 0;
        margin-left: 0;
    }
    .secTicker .itemTicker:nth-child(odd) {
        animation: loop 80s -40s linear infinite;
        backface-visibility: hidden;
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }
    .secTicker .itemTicker:nth-child(even) {
        animation: loop2 80s linear infinite;
    }
    .secTicker .imgTicker{
        height: 4rem;
        width: 80.8rem;
    }
    @keyframes loop {
        0% {
            transform: translateX(100%);
        }
        to {
            transform: translateX(-100%);
        }
    }
    @keyframes loop2 {
        0% {
          transform: translateX(0);
        }
        to {
          transform: translateX(-200%);
        }
    }
}

/*-----------------------------------------------
    secWood
-----------------------------------------------*/
.secWood{
    margin-top: 4.5rem;
    padding-bottom: 46rem;
    position: relative;
}
.secWood.lazyloaded{
    background: url(../img/index/bgSecWood.jpg) center bottom / cover no-repeat;
}
.secWood .wrapperWood{
    position: relative;
}
.secWood .boxTxt{
    border-bottom: 0.1rem solid var(--keyColor);
    display: inline-block;
    letter-spacing: -0.1em;
}
.secWood .boxWrapper + .boxWrapper{
    margin-top: 5.4rem;
}
.secWood .titWood{
    font-size: var(--pcFontSize72);
    color: var(--keyColor);
    font-weight: bold;
    padding-top: 15rem;
    padding-left: 10rem;
    display: flex;
    flex-direction: column;
}
.secWood .titWood .txtKanji{
    font-size: var(--pcFontSize144);
    letter-spacing: var(--pcLetterSpacing144_80);
    color: var(--keyColor);
    font-weight: bold;
}
.secWood .txtUpdate{
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--pcFontSize17);
    letter-spacing: var(--pcLetterSpacing17_550);
    writing-mode: vertical-rl;
    color: var(--keyColor);
    white-space: nowrap;
    padding-top: 13.5rem;
}
.secWood .boxYamakawood{
    position: absolute;
    top: 28rem;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
}
.secWood .txtYamakawood{
    font-size: var(--pcFontSize220);
    color: var(--keyColor);
    writing-mode: vertical-rl;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    white-space: nowrap;
    text-shadow:
    0 0 20px rgba(255,255,255,1),
    0 0 40px rgba(255,255,255,1),

    10px  10px 40px rgba(255,255,255,0.5),
   -10px  10px 40px rgba(255,255,255,0.5),
    10px -10px 40px rgba(255,255,255,0.5),
   -10px -10px 40px rgba(255,255,255,0.5),

    20px  20px 80px rgba(255,255,255,0.6),
   -20px  20px 80px rgba(255,255,255,0.6),
    20px -20px 80px rgba(255,255,255,0.6),
   -20px -20px 80px rgba(255,255,255,0.6),

    30px  30px 120px rgba(255,255,255,0.7),
   -30px  30px 120px rgba(255,255,255,0.7),
    30px -30px 120px rgba(255,255,255,0.7),
   -30px -30px 120px rgba(255,255,255,0.7);
}
.secWood .txtYamakawood.txt02{
    padding-top: 37rem;
}
.secWood .imgNenrin{
    position: absolute;
    top: 0;
    right: 24.5rem;
    /* width: 47.8rem;
    height: 44.2rem; */
    width: 30.254%;
    max-width: 47.8rem;
}
.secWood .boxTxtWood{
    margin-top: 8.5rem;
    display: inline-flex;
    flex-direction: column;
}
.secWood .boxTxtWood .txtWood{
    font-size: var(--pcFontSize26);
    line-height: var(--pcLineHeight26_60);
    letter-spacing: var(--pcLetterSpacing26_200);
    margin-bottom: 6rem;
    padding-left: 21rem;
    position: relative;
    z-index: 1;
    color: var(--textColor);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-shadow:
    0 0 20px rgba(255,255,255,1),    
    0 0 20px rgba(255,255,255,1),    
    10px  10px 20px rgba(255,255,255,1),
    -10px  10px 20px rgba(255,255,255,1),    
    10px -10px 20px rgba(255,255,255,1),   
    -10px -10px 20px rgba(255,255,255,1),    
    20px  20px 20px rgba(255,255,255,1),   
    -20px  20px 20px rgba(255,255,255,1),    
    20px -20px 20px rgba(255,255,255,1),   
    -20px -20px 20px rgba(255,255,255,1),    
    30px  30px 20px rgba(255,255,255,1),   
    -30px  30px 20px rgba(255,255,255,1),    
    30px -30px 20px rgba(255,255,255,1),   
    -30px -30px 20px rgba(255,255,255,1)
}
.secWood .imgWood01{
    position: absolute;
    top: 6rem;
    right: calc(50% - 60rem);
    width: 18.178%;
    max-width: 34.9rem;
}
.secWood .imgWood02{
    position: absolute;
    top: 99rem;
    left: -11.8rem;
    width: 19.792%;
    max-width: 38rem;
}
.secWood .imgWood03{
    position: absolute;
    top: 118rem;
    right: 0;
    width: 45.209%;
    max-width: 86.8rem;
}
.secWood .imgWood04{
    position: absolute;
    bottom: -25rem;
    left: 0;
    width: 91.667%;
    max-width: 176rem;
}
@media only screen and (max-width:1800px){
    .secWood .titWood {
        font-size: var(--pcFontSize70);
    }
    .secWood .titWood .txtKanji {
        font-size: var(--pcFontSize130);
    }
}
@media only screen and (max-width:1600px){
    .secWood .titWood {
        font-size: var(--pcFontSize66);
    }
    .secWood .titWood .txtKanji {
        font-size: var(--pcFontSize120);
    }
    .secWood .imgWood01 {
        top: 4rem;
    }
}
@media only screen and (max-width:1215px){
    .secWood {
        margin-top: 0;
        padding-bottom: 15rem;
        /* padding-bottom: 40vw; */
    }
    .secWood .imgNenrin {
        top: 0;
        right: unset;
        left: -56%;
        width: 22.7rem;
        max-width: unset;
    }
    .secWood .boxTxt {
        border-bottom: none;
        letter-spacing: 0;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        display: inline-block;
        line-height: 1.35;
    }
    .secWood .titWood .txtKanji {
        font-size: var(--spFontSize40);
    }
    .secWood .titWood {
        font-size: var(--spFontSize19);
        padding-top: 6rem;
        padding-left: 0;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: center;
        gap: 2.4rem;
        line-height: 1.35;
    }
    .secWood .txtYamakawood {
        font-size: var(--spFontSize60);
        writing-mode: unset;
        -webkit-font-smoothing: unset;
        -moz-osx-font-smoothing: unset;
        text-rendering: unset;
        text-shadow: unset;
    }
    .secWood .txtYamakawood.txt02 {
        padding-top: 0;
    }
    .secWood .boxYamakawood {
        top: 30rem;
        right: -8%;
        flex-direction: column;
        align-items: flex-end;
        z-index: 2;
    }
    .secWood .boxWrapper {
        display: inline-block;
    }
    .secWood .boxWrapper + .boxWrapper {
        margin-top: 0;
    }

    .secWood .boxTxtWood .txtWood {
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_32);
        letter-spacing: var(--spLetterSpacing14_60);
        margin-bottom: 3.2rem;
        padding-left: 0;
        text-rendering: optimizeLegibility;
        text-shadow: 0 0 10px rgba(255, 255, 255, 1), 
        0 0 10px rgba(255, 255, 255, 1), 
        10px 10px 10px rgba(255, 255, 255, 1),
        -10px 10px 10px rgba(255, 255, 255, 1), 
        10px -10px 10px rgba(255, 255, 255, 1),
        -10px -10px 10px rgba(255, 255, 255, 1), 
        10px 10px 10px rgba(255, 255, 255, 1), 
        -10px 10px 10px rgba(255, 255, 255, 1), 
        10px -10px 10px rgba(255, 255, 255, 1), 
        -10px -10px 10px rgba(255, 255, 255, 1), 
        10px 10px 10px rgba(255, 255, 255, 1), 
        -10px 10px 10px rgba(255, 255, 255, 1), 
        10px -10px 10px rgba(255, 255, 255, 1), 
        -10px -10px 10px rgba(255, 255, 255, 1)
    }
    .secWood .imgWood01 {
        top: 3.6rem;
        right: 0;
        width: 21.867%;
        max-width: 8.2rem;
    }
    .secWood .imgWood02 {
        position: absolute;
        top: 27.2rem;
        left: 0;
        width: 20.267%;
        max-width: 7.6rem;
    }
    .secWood .imgWood03 {
        top: 39rem;
        right: 0;
        width: 41.6%;
        max-width: 15.6rem;
    }
    .secWood .boxTxtWood {
        margin-top: 7.5rem;
        padding-left: 2rem;
    }
    .secWood.lazyloaded {
        background: none;
        max-width: 40rem;
        margin: 0 auto;
    }
    .bgSpWood.lazyloaded {
        background: url(../img/index/bgSecWood_sp.jpg) center bottom / cover no-repeat;
    }
    .secWood .imgWood04 {
        position: absolute;
        bottom: 4.5rem;
        left: 0;
        width: 100%;
        max-width: unset;
    }
    /* iPhone横向き（高さが低い）での崩れ対策：secWood見出しの余白・文字サイズを抑える */
    @media only screen and (max-width:1215px) and (orientation: landscape) {
        .secWood {
            padding-bottom: 10rem;
        }
        .secWood .titWood {
            padding-top: 2rem;
        }
        .secWood .boxWrapper {
            min-height: 30rem;
        }
        @supports (-webkit-touch-callout: none) {
            .secWood .titWood {
                padding-left: 4rem; /* 横向きは左右余白を小さめに */
                font-size: var(--spFontSize16);
                max-height: calc(100dvh - 10rem);
            }
            .secWood .titWood .txtKanji {
                font-size: var(--spFontSize32);
            }
        }
    }
    /* iOS Safari対策: 縦書き×flex×ネストで文字が潰れることがあるため、レイアウトを単純化 */
    @supports (-webkit-touch-callout: none) {
        .secWood .titWood {
            display: block;
            writing-mode: vertical-rl;
            padding-left: 8rem;
            /* 横向きで高さが足りない時にレイアウトが破綻しやすいので上限を設ける */
            max-height: calc(100dvh - 14rem);
            overflow: hidden;
        }
        .secWood .boxWrapper {
            display: block;
        }
        .secWood .boxTxt {
            writing-mode: inherit;
        }
    }
}

/*-----------------------------------------------
    secBrand
-----------------------------------------------*/
.secBrand{
    padding-top: 42.5rem;
    background: var(--bgGradGreen);
}
.cmnWrapper.wrapperTit{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--whiteColor);
}
.cmnWrapper.wrapperTit.spNone{
    display: flex;
}
.cmnWrapper.wrapperTit.spOnly{
    display: none;
}
.cmnWrapper.wrapperTit .boxLeft{
    display: flex;
    gap: 4rem;
    align-items: center;
}
.cmnWrapper.wrapperTit .engTit{
    font-size: var(--pcFontSize100);
    position: relative;
    top: -1.5rem;
}
.cmnWrapper.wrapperTit .engTitSub{
    font-size: var(--pcFontSize13);
    letter-spacing: var(--pcLetterSpacing13_200);
}
.cmnWrapper.wrapperTit .jpTit{
    font-size: var(--pcFontSize18);
    letter-spacing: var(--pcLetterSpacing18_150);
}
.secBrand .wrapperBrand{
    margin-top: 4rem; 
}
.secBrand .listBrand{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.secBrand .listBrand.bottom{
    margin-top: 5rem;
}
.secBrand .itemBrand{
    position: relative;
    border-radius: 0.6rem;
    overflow: hidden;
}
.secBrand .listBrand.top .itemBrand{
    width: 48.37%;
    max-width: 89rem;
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2);
}
.secBrand .listBrand.bottom .itemBrand{
    width: 31.522%;
    max-width: 58rem;
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2);
}
.secBrand .mainBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    color: var(--whiteColor);
}
.secBrand .mainInBox {
    width: calc(100% - 8rem);
    margin: 0 auto;
    padding-bottom: 4rem;
}
.secBrand .mainInBox .tit {
    font-size: var(--pcFontSize25);
    line-height: var(--pcLineHeight25_36);
    letter-spacing: var(--pcLetterSpacing25_150);
}
.secBrand .mainInBox .txt {
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_36);
    letter-spacing: var(--pcLetterSpacing20_150);
    margin-top: 1.5rem;
}
.secBrand .mainInBox .btnList {
    display: flex;
    gap: 1rem;
    margin: 2.4rem auto 0;
}
.secBrand .btnItem {
    width: 22rem;
}
.secBrand .btnItem.w450 {
    width: 45rem;
}
.secBrand .btnItem.btnInstagram .btnTxt {
    position: relative;
    padding-left: 2.7rem;
}
.secBrand .btnItem.btnInstagram .btnTxt::before {
    position: absolute;
    content: "";
    width: 2.2rem;
    height: 2.2rem;
    left: 0;
    top: calc(50% - 1.1rem);
}
.secBrand.lazyloaded .btnItem.btnInstagram .btnTxt::before {
    background: url(../img/index/iconInstagram.png) center center / cover no-repeat;
}
.secBrand .btnInner {
    border: solid 0.1rem  var(--whiteBorder05);
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color:  var(--whiteColor);
    position: relative;
    padding: 0 1.5rem;
    font-size: var(--pcFontSize15);
    transition: 0.3s;
}
.secBrand .btnInner:hover {
    background: var(--keyColor02);
}
.secBrand .btnInner::after {
    position: absolute;
    content: "";
    width: 4.1rem;
    height: 0.7rem;
    right: 1.5rem;
    top: calc(50% - 0.35rem);
}
.secBrand.lazyloaded .btnInner::after {
    background: url(../img/index/iconBrandItem.png) center right / cover;
}

@media only screen and (max-width:1215px){
    .secBrand {
        padding-top: 5rem;
    }
    .cmnWrapper.wrapperTit .boxLeft {
        flex-direction: column;
        gap: 1.2rem
    }
    .cmnWrapper.wrapperTit {
        flex-direction: column;
        text-align: center;
    }
    .cmnWrapper.wrapperTit.spNone{
        display: none;
    }
    .cmnWrapper.wrapperTit.spOnly{
        display: flex;
    }
    .cmnWrapper.wrapperTit .engTit {
        font-size: var(--spFontSize40);
        top: 0;
    }
    .cmnWrapper.wrapperTit .engTitSub {
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_20);
    }
    .cmnWrapper.wrapperTit .jpTit {
        margin-top: 1rem;
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_30);
        letter-spacing: var(--spLetterSpacing14_50);
    }
    .secBrand .wrapperBrand {
        margin-top: 3rem;
    }
    .secBrand .listBrand.top .itemBrand {
        width: 100%;
        max-width: unset;
        box-shadow: none;
    }
    .secBrand .mainInBox .tit {
        font-size: var(--spFontSize10);
        line-height: var(--spLineHeight10_30);
        letter-spacing: var(--spLetterSpacing10_50);
        position: absolute;
        top: 47%;
    }
    .secBrand .mainInBox .txt {
        font-size: var(--spFontSize15);
        line-height: var(--spLineHeight15_26);
        letter-spacing: var(--spLetterSpacing15_50);
        margin-top: 1.5rem;
        position: absolute;
        top: 51%;
    }
    .secBrand .mainBox {
        position: static;
        width: 100%;
        height: 100%;
        display: block;
    }
    .secBrand .mainInBox {
        width: calc(100% - 3rem);
        margin: 0 auto;
        padding-bottom: 0;
    }
    .secBrand .mainInBox .btnList {
        display: flex;
        gap: 0.5rem;
        margin: 2rem auto 0;
    }
    .secBrand .btnItem {
        width: calc((100% - 0.5rem) / 2);
    }
    .secBrand .btnInner {
        height: 3rem;
        padding: 0 1rem;
        font-size: var(--spFontSize10);
    }
    .secBrand .listBrand .itemBrand {
        margin-bottom: 3rem;
    }
    .secBrand .btnItem.btnInstagram .btnTxt::before {
        width: 1.5rem;
        height: 1.5rem;
        top: calc(50% - 0.75rem);
    }
    
    .secBrand .btnItem.btnInstagram .btnTxt {
        padding-left: 2rem;
    }
    .secBrand .listBrand.bottom {
        margin-top: 0;
    }
    .secBrand .listBrand.bottom .itemBrand {
        width: 100%;
        max-width: unset;
        box-shadow: none;
        overflow: unset;
    }
    .secBrand .itemBrand .bgImg{
        border-radius: 0.8rem;
        overflow: hidden;
        box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2);
    }
    .secBrand .btnInner::after {
        position: absolute;
        content: "";
        width: 2rem;
        height: 0.6rem;
        right: 1rem;
        top: calc(50% - 0.3rem);
    }
    .secBrand .listBrand.bottom .itemBrand:nth-child(2) .tit {
        top: 58%;
    }
    .secBrand .listBrand.bottom .itemBrand:nth-child(2) .txt {
        top: 63%;
    }
}

/*-----------------------------------------------
    secMessage
-----------------------------------------------*/
.secMessage{
    padding-top: 5rem;
    margin-bottom: 15rem;
    background: var(--bgGradGreen);
}
.secMessage .wrapperMessage{
    height: 80rem;
    margin-top: 3.3rem;
    padding: 12rem 0 8.2rem;
}
.secMessage.lazyloaded .wrapperMessage{
    background: url(../img/index/bgMessage.jpg) center bottom / cover no-repeat
}
.secMessage .wrapperMessage .boxFlex{
    display: flex;
}
.secMessage .wrapperMessage .engTitSub{
    font-size: var(--pcFontSize13);
    letter-spacing: var(--pcLetterSpacing13_400);
    color: var(--keyColor);
    writing-mode: vertical-rl;
    margin-left: 0.3rem;
}
.secMessage .wrapperMessage .titMessage{
    font-size: var(--pcFontSize30);
    line-height: var(--pcLineHeight30_80);
    letter-spacing: var(--pcLetterSpacing30_300);
    margin-top: 2.5rem;
}
.secMessage .wrapperMessage .boxRight{
    margin-left: 13rem;
}
.secMessage .wrapperMessage .txtRight{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    letter-spacing: var(--pcLetterSpacing14_200);
}
.secMessage .wrapperMessage .txtRight + .txtRight{
    margin-top: 3.2rem;
}
.secMessage .wrapperMessage .imgName{
    display: flex;
    margin-top: 3.6rem;
}
.secMessage .wrapperMessage .btnMessageTop{
    width: 45rem;
    height: 7rem;
    margin-top: 6.5rem;
    padding: 0 1.8rem;
    border: 1px solid var(--colorDetailsPager);
    border-radius: 0.4rem;
    background: transparent;
    box-shadow: none;
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing14_50);
    color: var(--textColor);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
    .secMessage .wrapperMessage .btnMessageTop:hover{
        background: rgba(255, 255, 255, 0.55);
        box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
    }
}
.secMessage .wrapperMessage .btnMessageTop::after{
    content: '';
    width: 6.1rem;
    height: 0.8rem;
    background: url(../img/index/iconCompanyArrow.png) center center / contain no-repeat;
}
@media only screen and (max-width:1215px){
    .secMessage {
        padding-top: 4rem;
        position: relative;
        max-width: 40rem;
        margin: 0 auto;
        background: none;
        padding-bottom: 5rem;
    }
    .secMessage .cmnWrapper.wrapperTit {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }
    .secMessage .cmnWrapper.wrapperTit .boxLeft {
        flex-direction: column;
        gap: 1.2rem;
        align-items: flex-start;
    }
    .secMessage.lazyloaded .wrapperMessage{
        background: none
    }
    /* .secMessage.lazyloaded{
        background: url(../img/index/bgMessage_sp.png) center bottom / cover no-repeat;
    } */
    .secMessage.lazyloaded::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 40rem;
        bottom: 0;
        left: 0;
        background: url(../img/index/bgMessage_sp.png) center top / cover no-repeat;
        z-index: 0;
    }
    .secMessage .wrapperMessage .titMessage {
        font-size: var(--spFontSize24);
        line-height: var(--spLineHeight24_50);
        letter-spacing: var(--spLetterSpacing24_200);
        margin-left: 0;
        color: var(--whiteColor);
        margin-top: 1.5rem;
    }
    .secMessage .wrapperMessage .boxFlex {
        display: block;
        position: relative;
        z-index: 2;
    }
    .secMessage .wrapperMessage .engTitSub {
        display: none;
    }
    .secMessage .wrapperMessage {
        height: auto;
        margin-top: 1.7rem;
        padding: 0;
    }
    .secMessage .wrapperMessage .txtRight {
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_24);
        letter-spacing: var(--spLetterSpacing11_50);
    }
    .secMessage .wrapperMessage .boxRight {
        margin-left: 0;
        margin-top: 1.7rem;
    }
    .secMessage .wrapperMessage .imgName {
        display: flex;
        margin-top: 0;
        margin-right: 0;
        justify-content: flex-end;
    }
    .secMessage .wrapperMessage .imgInner {
        width: 14.1rem;
        position: relative;
        margin-top: 10.4rem;
    }
    .secMessage .wrapperMessage .txtRight + .txtRight {
        margin-top: 2.3rem;
    }
    .secMessage .wrapperMessage .btnMessageTop{
        width: 100%;
        max-width: 30.5rem;
        height: 4.8rem;
        margin: 0 auto;
        margin-top: 5.5rem;
        padding: 0 1.2rem;
        font-size: var(--spFontSize10);
        letter-spacing: 0;
    }
    .secMessage .boxYamakawood {
        position: absolute;
        top: -35rem;
        right: 0;
        display: flex;
        flex-direction: row-reverse;
    }
    .secMessage .boxYamakawood {
        top: -12rem;
        right: -4rem;
        z-index: 3;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    .secMessage .txtYamakawood {
        color: var(--colorMessage);
        writing-mode: vertical-rl;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        white-space: nowrap;
        font-size: var(--spFontSize80);
    }
    .secMessage .txtYamakawood.txt02 {
        padding-top: 12rem;
    }
}

/*-----------------------------------------------
    secBnrRecruit
-----------------------------------------------*/
.bgGreen{
    background: var(--bgGradGreen);
}
.secBnrRecruit{
    position: relative;
    background: var(--bgGradGreen);
    padding: 15rem 0 9rem;
}
/* .secBnrRecruit::before{
    content: '';
    position: absolute;
    background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 1) 100%);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
} */
.secBnrRecruit .bnrInner{
    position: relative;
    z-index: 2;
}
.secBnrRecruit .bnrInner .linkRecruit{
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 1rem;
    overflow: hidden;
}
@media only screen and (max-width:1215px){
    .secBnrRecruit {
        padding: 3rem 0 4rem;
    }
    .secBnrRecruit .bnrInner {
        padding: 0 2rem;
    }
    /* .secBnrRecruit.lazyloaded {
        background: url(../img/index/bgRecruit.jpg) center center / cover no-repeat;
    } */
    /* .secBnrRecruit::before {
        display: none;
    } */
    .secBnrRecruit .bnrInner .linkRecruit {
        border-radius: 0.8rem;
    }
}

/*-----------------------------------------------
    secLinkBox
-----------------------------------------------*/
.secLinkBox .linkPage{
    display: flex;
    gap: 2rem;
}
.secLinkBox .itemPage{
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    display: block;
}
.secLinkBox .linkPage .pageHistory{
    border-radius: 0 1rem 1rem 0;
    overflow: hidden;
}
.secLinkBox .linkPage .pageCommunity{
    border-radius: 1rem 0 0 1rem;
    overflow: hidden;
}
@media only screen and (max-width:1215px){
    .secLinkBox .linkPage{
        flex-direction: column;
        gap: 0.1rem;
    }
    .secLinkBox .linkPage .pageHistory{
        border-radius: 0;
    }
    .secLinkBox .linkPage .pageCommunity{
        border-radius: 0;
    }
}

/*-----------------------------------------------
    secStaff
-----------------------------------------------*/
.linkShaodow{
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0.5rem;
    overflow: hidden;
    z-index: 2;
    position: relative;
}
.secStaff{
    padding-top: 15rem;

}
@media only screen and (max-width:1215px){
    .secStaff {
        padding: 5rem 2rem 0;
    }
    .secStaff .bnrInner{
        max-width: 29.5rem;
    }
}

/*-----------------------------------------------
    secCompany
-----------------------------------------------*/
.secCompany {
    margin-top: 14rem;
    position: relative;
    padding-bottom: 32rem;
}
.secCompany.lazyloaded{
    background: url(../img/index/bgCompany.jpg) center bottom / cover no-repeat;
}
.secCompany .cmnWrapper.wrapperTit {
    color: var(--keyColor);
}
.secCompany .boxYamakawood {
    position: absolute;
    top: -35rem;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
}
.secCompany .txtYamakawood {
    font-size: var(--pcFontSize200);
    color: var(--keyColor);
    writing-mode: vertical-rl;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    white-space: nowrap;
    text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 1), 10px 10px 40px rgba(255, 255, 255, 0.5), -10px 10px 40px rgba(255, 255, 255, 0.5), 10px -10px 40px rgba(255, 255, 255, 0.5), -10px -10px 40px rgba(255, 255, 255, 0.5), 20px 20px 80px rgba(255, 255, 255, 0.6), -20px 20px 80px rgba(255, 255, 255, 0.6), 20px -20px 80px rgba(255, 255, 255, 0.6), -20px -20px 80px rgba(255, 255, 255, 0.6), 30px 30px 120px rgba(255, 255, 255, 0.7), -30px 30px 120px rgba(255, 255, 255, 0.7), 30px -30px 120px rgba(255, 255, 255, 0.7), -30px -30px 120px rgba(255, 255, 255, 0.7);
}
.secCompany .txtYamakawood.txt02 {
    padding-top: 37rem;
}
.secCompany .wrapperMessage .titMessage {
    font-size: var(--pcFontSize35);
    line-height: var(--pcLineHeight35_132);
    letter-spacing: var(--pcLetterSpacing35_100);
    writing-mode: vertical-rl;
    margin-left: 0;
    color: var(--keyColor);
    position: relative;
    left: -3.5rem;
    top: 1rem;
}
.secCompany .wrapperMessage .boxRight {
    margin-left: 7.5rem;
}
.secCompany .wrapperMessage .txtRight {
    font-size: var(--pcFontSize18);
    line-height: var(--pcLineHeight18_45);
    letter-spacing: var(--pcLetterSpacing18_200);
}
.secCompany .wrapperMessage .txtRight + .txtRight {
    margin-top: 4.7rem;
}
.secCompany .wrapperMessage .boxFlex {
    display: flex;
    margin-top: 8rem;
}
@media only screen and (max-width:1650px){
    .secCompany .wrapperMessage .boxRight {
        margin-left: 2.5rem;
    }
    .secCompany .txtYamakawood{
        font-size: var(--pcFontSize160);
    }
}
@media only screen and (max-width:1500px){
    .secCompany .wrapperMessage .titMessage {
        font-size: var(--pcFontSize25);
    }
}
@media only screen and (max-width:1215px){
    .secCompany .txtYamakawood {
        font-size: var(--spFontSize72);
    }
    .secCompany {
        margin: 6rem auto 0;
        position: relative;
        padding-bottom: 24rem;
        max-width: 40rem;
    }
    .secCompany .boxYamakawood {
        top: -20rem;
        right: -4%;
    }
    .secCompany .txtYamakawood {
        text-shadow:none;
    }
    .secCompany .txtYamakawood.txt02 {
        padding-top: 12rem;
    }
    .secCompany .cmnWrapper.wrapperTit {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }
    .secCompany .cmnWrapper.wrapperTit .boxLeft {
        flex-direction: column;
        gap: 1.2rem;
        align-items: flex-start;
    }
    .secCompany .wrapperMessage .titMessage {
        font-size: var(--spFontSize18);
        line-height: var(--spLineHeight18_50);
        letter-spacing: 0;
        writing-mode: unset;
        left: 0;
        top: 0;
    }
    .secCompany .wrapperMessage .boxFlex {
        flex-direction: column;
        margin-top: 2rem;
    }
    .secCompany .wrapperMessage .boxRight {
        margin-left: 0;
        margin-top: 1.5rem;
    }
    .secCompany .wrapperMessage .txtRight {
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_24);
        letter-spacing: var(--spLetterSpacing11_50);
    }
    .secCompany .wrapperMessage .txtRight + .txtRight {
        margin-top: 2.4rem;
    }
    .secCompany.lazyloaded {
        background: url(../img/index/bgCompany_sp.jpg) center top / cover no-repeat;
    }
}