@charset "utf-8";

/* --------------------------------------------------------
* 全体設定
* -------------------------------------------------------*/
section .wrap h2 {
    &.ir-subttl {
        margin: 0 0 40px;
        font-size: 24px;
        line-height: 32px;
      /*font-family: "Shippori Antique B1",sans-serif;*/
    }
}

#ir-content {
  & .wrap {
    
  }
  
    & .content-block {
      & p {
        line-height: 2;
        
        & + .ir-subttl {
          padding-top: 0;
          margin-top: 80px;
        }
      }
      
        & p + p {
            margin-top: 34px;
        }
        & .text-right {
            text-align: right;
        }
    }
}

.ir-linktxt {
    color: #0a0fd2;
}

@media screen and (min-width: 821px) {
    section#hero.ir .wrap h1 {
        padding-right: 400px;
    }
}
@media screen and (min-width: 1200px) {
  #ir-content {
    & .wrap {
      max-width: 1170px;
    }
  }
  
    section#hero.ir-top .wrap h1 {
        line-height: 90px;
    }
    section#hero.ir-top {
        .wrap {
            h1 {
                line-height: 90px;
            }
            p {
                padding-top: 40px;
            }
        }
    }
}
@media screen and (min-width: 821px) and (max-width: 1199px) {
  #ir-content {
    & .wrap {
      max-width: 97.5vw;
    }
  }
  
    section#hero.ir-top {
        .wrap {
            h1 {
                line-height: 7.5vw;
            }
            p {
                padding-top: 4vw;
            }
        }
    }
    section .wrap h2 {
        &.ir-subttl {
            /*margin: 0 0 .8333333333vw;
            font-size: 1.6666666667vw;
            line-height: 2.6666666667vw;*/
        }
    }
}
@media screen and (max-width: 820px) {
  #ir-content {
    & .wrap {
      max-width: 100%;
    }
    
    & .content-block {
      & p {
        line-height: 1.9;
        
        & + .ir-subttl {
          padding-top: 0;
          margin-top: 12vw;
        }
      }
    }
  }
  
    section#hero {
        min-height: 120vw;
        height: auto;
    }
    section#hero.ir-top {
        .wrap {
            h1 {
                line-height: 13.3333333333vw;
            }
            p {
                padding-top: 4.8vw;
            }
        }
    }
    section .wrap h2 {
        &.ir-subttl {
            margin: 0 0 6.6666666667vw;
            font-size: 5.0666666667vw;
            line-height: 7.7333333333vw;
          padding-left: 5.3333333333vw;
          
          &::before {
            width: 2.1333333333vw;
            height: 2.1333333333vw;
            border-radius: 1.0666666667vw;
            top: 11.8vw;
          }
        }
    }
}

.ir-nav {
    & ul {
        display: flex;
        justify-content: space-around;
        margin-bottom: 60px;
      
      &:has(:nth-child(4)) {
        justify-content: space-between;
      }
    
        & li {
            & a.type-b {
                width: 100%;
                padding-right: 75px;

                &::before,
                &::after{
                    left: auto;
                    right: 24px;
                }
                &::after {
                    transform: translate(40%, -50%);
                }
                &[target="_blank"] {
                    &::before {
                        content: "";
                        position: absolute;
                        /* right: 13px; */
                        /* top: 28%; */
                        transform: translateY(-50%);
                        border: none;
                        background: url(/ir/images/icon_link_white.webp) no-repeat 50% 50%;
                        background-size: 14px;
                        z-index: 1;
                        transition: all .5s;
                        width: 14px;
                        height: 14px;
                        transform: translate(20%, -50%);
                    }
                }
            }
        }
    }
}
@media screen and (min-width: 1200px) {
    .ir-nav {
        & ul {
            & li {
                & a.type-b {
                    min-width: 250px;
                    
                    &::before,
                    &::after{
                        right: 24px;
                    }
                }
            }
        }
    }
}
@media screen and (min-width: 821px) and (max-width: 1199px) {
    .ir-nav {
        & ul {
            & li {
                & a.type-b {
                    min-width: 20.8333333333vw;
                    
                    &::before,
                    &::after{
                        right: 2vw;
                    }
                    &[target="_blank"] {
                        &::before {
                            background-size: 1.3vw;
                            width: 2vw;
                            height: 2vw;
                            transform: translate(35%, -50%);
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 820px) {
    .ir-nav {
        margin-bottom: 10vw;

        & ul {
            flex-direction: column;
            gap: 30px;

            & li {
                & a.type-b {
                    &::before,
                    &::after{
                        right: 6vw;
                    }
                    &:hover {
                        &::after{
                            width: 150vw;
                        }
                    }
                    &[target="_blank"] {
                        &::before {
                            background-size: 2.5vw;
                            width: 3vw;
                            height: 3vw;
                            transform: translate(25%, -50%);
                        }
                    }
                }
            }
        }
    }
}



.ir-table {
    & table {
        width: 100%;
        max-width: 910px;
        margin-inline: auto;
        border-collapse: collapse;
        border-spacing: 0;
        border-top: 1px solid #777879;
        line-height: 1.75;

        & th {
            border-bottom: 1px solid #777879;
            vertical-align: top;
            font-weight: 400;
            text-align: left;
            width: 216px;
            padding: 50px;
            font-size: 100%;
        }
        & td {
            border-bottom: 1px solid #777879;
            padding: 50px;
            font-size: 100%;
            word-break: break-all;
        }
    }
}
@media screen and (max-width: 820px) {
    .ir-table {
        & table {
            & th {
                width: 23.4666666667vw;
                padding: 13.3333333333vw 0 13.3333333333vw 8vw;
                font-size: 3.7333333333vw;
            }
            & td {
                padding: 13.3333333333vw 0 13.3333333333vw 8vw;
                font-size: 3.7333333333vw;
            }
        }
    }
}


/* --------------------------------------------------------
* IRトップ
* -------------------------------------------------------*/
.irtop {
    & .wrap {
        margin: 120px auto;
    }
    & h2 {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        font-family: Figtree, sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        font-size: 45px;
        line-height: 45px;
        padding-top: 0;
        
        & span {
            position: static;
            display: block;
            width: 100%;
            font-size: 13px;
            margin-top: 10px;
        }
    }
}

& .ir-link-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 30px;
}
& .ir-link-content {
    width: 46%;
    border-bottom: 1px solid #000;
}
& .ir-link-item {
    font-size: 18px;
    line-height: 50px;
    position: relative;
    padding-bottom: 20px;
    padding-right: 60px;
    display: block;

    & span {
        font-size: 13px;
        line-height: 18px;
        display: block;
    }

    & .arrow {
        position: absolute;
        border: 1px solid #0a0fd2;
        border-radius: 50%;
        overflow: hidden;
        transition: all .5s cubic-bezier(.4,0,.2,1);
        width: 50px;
        height: 50px;
        right: 0;
        bottom: 20px;

        &::before {
            content: "";
            position: absolute;
            left: -50%;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid #fff;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            transition: all .5s cubic-bezier(.4,0,.2,1);
        }
        &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) translateX(2px);
            width: 0;
            height: 0;
            border-left: 8px solid #0a0fd2;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            transition: all .5s cubic-bezier(.4,0,.2,1);
        }
    }

    &:hover {
        .arrow {
            background-color: #0a0fd2;
            border-color: transparent;
            
            &::before {
                left: 50%;
                transform: translateY(-50%) translateX(-2px);
            }
            &::after {
                left: 150%;
                transform: translate(-50%, -50%);
            }
        }
    }
}


#irtop-news {
    & .left {
        
    }
    & .right {
        flex: 0 0 66%;
    }
    & .ir-news-button {
        margin-top: 40px;
        display: flex;
        justify-content: center;
    }
}
#irtop-library {
    & .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    & .right {
        flex: 0 0 33%;
        max-width: 310px;
    }
    & .ir-link-block {
        padding-left: 90px;
    }
}
#irtop-gray {
    padding: 1px 0;
    background-color: #d7d9dc;

    & .irtop-gray-content:nth-child(2) {
        padding-top: 80px;
        border-top: 1px solid #fff;
        margin-top: 20px;
    }

    & .cols {
        column-gap: 0; 
    }
    
    & .left {
        padding: 60px 90px;
    }
    & .right {
        flex: 0 0 26%;
        display: flex;
        align-items: center;
    }
    & .ir-link-block {
        row-gap: 20px;
    }
    & .ir-link-content {
        width: 100%;
    }
    & .ir-link-item {
        padding-right: 40px;
        
        & .arrow {
            width: 30px;
            height: 30px;
            bottom: 27px;
            
            &::before {
                border-width: 4px 0 4px 5.5px;
            }
            &::after {
                border-width: 4px 0 4px 5.5px;
            }
        }
        &[target="_blank"] {
            & .arrow {
                &::before,
                &::after {
                    transform: translate(-50%, -50%) translateX(1px);
                    border: none;
                    background: url(/ir/images/icon_link_blue.webp) no-repeat 50% 50%;
                    background-size: 8px;
                    width: 8px;
                    height: 8px;
                }
                &::before {
                    background-image: url(/ir/images/icon_link_white.webp);
                }
            }
        }
    }

}
#irtop-grid {
    background: url(/ir/images/grid.png) repeat 50% top;
    padding: 1px 0;
    background-size: 270px 270px;

    & .irtop-grid-content {
        padding: 0 90px;
    }
    & .ir-nav {
        & ul {
            justify-content: space-around;
            
            & li {
                & a.type-b {
                    min-width: 238px;
                    
                    &::before,
                    &::after{

                    }
                    &[target="_blank"] {
                        &::before {

                        }
                    }
                }
            }
        }
    }
}

#irtop-grid .ir-nav .button.type-b .text {
    font-size: 13px !important;
}
@media screen and (max-width: 820px) {
    #irtop-grid .ir-nav .button.type-b .text {
        font-size: 15px !important;
    }
}

@media screen and (min-width: 1200px) {
	.irtop {
        & .wrap {
            padding: 0 40px;
            max-width: 1430px;
        }
    }
}
@media screen and (min-width: 821px) and (max-width: 1199px) {
	.irtop {
        & .wrap {
            padding: 0 3.3333333333vw;
        }
        & h2 {
            font-size: 3.75vw;
            line-height: 3.75vw;
            
            & span {
                font-size: 1.0833333333vw;
                line-height: 1.0833333333vw;
            }
        }
    }
    & .ir-link-block {
        row-gap: 2.5vw;
    }
    & .ir-link-content {
    
    }
    & .ir-link-item {
        font-size: 2vw;
        line-height: 4.5vw;
        padding-bottom: 1.4vw;
        padding-right: 5vw;
        
        & span {
            font-size: 1vw;
            line-height: 1.2vw;
        }
        & .arrow {
            width: 4.1666666667vw;
            height: 4.1666666667vw;
            right: 0;
            bottom: 2vw;
            
            &::before {
                
            }
            &::after {
                
            }
        }
        &:hover {
            .arrow {

                &::before {

                }
                &::after {

                }
            }
        }
    }
    
    #irtop-library {
        & .ir-link-block {
            padding-left: 7.5vw;
        }
    }
    #irtop-gray {
        & .irtop-gray-content:nth-child(2) {
            padding-top: 7vw;
            margin-top: 2vw;
        }
        & .left {
            padding: 5vw 7.5vw;
        }
        & .right {
            flex: 0 0 30%;
        }
        & .ir-link-item {
            font-size: 1.7vw;

            & .arrow {
                bottom: 1.8vw;
                width: 3vw;
                height: 3vw;
                right: 0;
                bottom: 2vw;
                
                &::before {
                    
                }
                &::after {
                    
                }
            }
        }
        
    }
    #irtop-grid {
        background-size: 22.5vw 22.5vw;

        & .irtop-grid-content {
            padding: 0 7.5vw;
        }

        & .ir-nav {
            & ul {
                & li {
                    & a.type-b {
                        min-width: 17vw;
                        
                        &::before,
                        &::after{

                        }
                        &[target="_blank"] {
                            &::before {

                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 820px) {
    .irtop {
        & .wrap {
            margin: 20vw auto;
        }
        & h2 {
            font-size: 8.6666666667vw;
            line-height: 10.6666666667vw;

            & span {
                font-size: 3.2vw;
                margin-top: .6666666667vw;
            }
        }
    }
    .ir-link-block {
    
    }
    .ir-link-content {
        width: 100%;
    }
    .ir-link-item {
        font-size: 4.4vw;
        line-height: 12vw;
        padding-bottom: 2vw;
        padding-right: 13vw;

        & span {
            font-size: 3.2vw;
            margin-top: .6666666667vw;
        }
        & .arrow {
            width: 10.6666666667vw;
            height: 10.6666666667vw;
            bottom: 3vw;
            
            &::before {
                border-width: 1.44vw;
            }
            &::after {
                border-width: 1.44vw;
            }
        }
        &:hover {
            & .arrow {

                &::before {

                }
                &::after {

                }
            }
        }
    }
    #irtop-library {
        & .right {
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 100%;
        }
        & .ir-link-block {
            padding: 0;
            margin-top: 3vw;
            row-gap: 3vw;
        }
    }

    #irtop-gray {
        & .irtop-gray-content:nth-child(2) {
            padding-top: 10vw;
            border-top: 1px solid #fff;
            margin-top: 10vw;
        }
        & .left {
            padding: 0;
            margin-top: 5vw;
        }
        & .ir-link-item {
            font-size: 4.4vw;
            line-height: 12vw;
            padding-bottom: 2vw;
            padding-right: 13vw;
            
            & .arrow {
                width: 10.6666666667vw;
                height: 10.6666666667vw;
                bottom: 2vw;
                
                &::before {
                    border-width: 1.44vw;
                }
                &::after {
                    border-width: 1.44vw;
                }
            }
            &[target="_blank"] {
                & .arrow {
                    &::before,
                    &::after {
                        background-size: 2vw;
                        width: 2vw;
                        height: 2vw;
                    }
                }
            }
        }
    }
    #irtop-grid {
        background-size: 36vw 36vw;

        & .irtop-grid-content {
            padding: 0;
        }
    }
}


/* -------- card --------- */
#irtop-grid .wrap .cards {
    display: grid
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards {
        grid-template-columns:1fr
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards {
        grid-template-columns:repeat(2,1fr)
    }
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards {
        margin:18vw 0 14vw
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards {
        margin:11.4166666667vw auto 8vw
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards {
        margin:137px auto 100px
    }
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards {
        gap:0
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards {
        gap:4.2%
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards {
        gap:4.2%
    }
}

#irtop-grid .wrap .cards .card {
    display: block;
    position: relative;
    overflow: hidden;
    transition: all .5s
}

#irtop-grid .wrap .cards .card img {
    width: 100%;
    transition: transform .8s ease
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards .card img {
        /* height:100vw */
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards .card img {
        height:auto
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards .card img {
        height:auto
    }
}

#irtop-grid .wrap .cards .card:hover img {
    transform: scale(1.1)
}

#irtop-grid .wrap .cards .card:hover .arrow {
    background-color: #fff;
    border: none
}

#irtop-grid .wrap .cards .card .jp {
    position: absolute;
    color: #fff;
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 400
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards .card .jp {
        font-size:4.2666666667vw
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards .card .jp {
        font-size:1.5vw
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards .card .jp {
        font-size:18px
    }
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards .card .jp {
        top:6.6666666667vw
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards .card .jp {
        top:3.75vw
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards .card .jp {
        top:45px
    }
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards .card .jp {
        left:8vw
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards .card .jp {
        left:3.3333333333vw
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards .card .jp {
        left:40px
    }
}

#irtop-grid .wrap .cards .card .en {
    position: absolute;
    transform-origin: left bottom;
    color: #fff;
    letter-spacing: .2em;
    font-family: Figtree,sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards .card .en {
        font-size:5.6vw
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards .card .en {
        font-size:2.3333333333vw
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards .card .en {
        font-size:28px
    }
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards .card .en {
        line-height:6.9333333333vw
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards .card .en {
        line-height:2.6666666667vw
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards .card .en {
        line-height:32px
    }
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards .card .en {
        bottom:6.6666666667vw
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards .card .en {
        bottom:2.9166666667vw
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards .card .en {
        bottom:35px
    }
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards .card .en {
        left:8vw
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards .card .en {
        left:3.3333333333vw
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards .card .en {
        left:40px
    }
}

@media (max-width: 820px) {
    #irtop-grid .wrap .cards.is-hover .card {
        transform:none
    }
}

@media (min-width: 821px) and (max-width:1199px) {
    #irtop-grid .wrap .cards.is-hover .card {
        transform:translateY(-20px)
    }
}

@media (min-width: 1200px) {
    #irtop-grid .wrap .cards.is-hover .card {
        transform:translateY(-20px)
    }
}

#irtop-grid .wrap .cards.is-hover .card .arrow::before {
    border-left-color: #000
}

/* -------- card --------- */


/* --------------------------------------------------------
* コーポレート・ガバナンス
* -------------------------------------------------------*/
.ir-governance-img {
    margin-top: 50px;
}

/* --------------------------------------------------------
* ディスクロージャーポリシー ／　免責事項
* -------------------------------------------------------*/
#ir-content.ir-disclosure,
#ir-content.ir-disclaimer {
  & .ir-subttl {
    padding-left: 0;
    
    &::before {
      content: none;
    }
  }
}

/* --------------------------------------------------------
* faq
* -------------------------------------------------------*/
.irfaq-box {
  interpolate-size: allow-keywords; /* サイズキーワードによるアニメーションを許可 */
  cursor: pointer;

    &:nth-child(n+2) {
        margin-top: 50px;
    }
    .irfaq-q-txt,
    .irfaq-a-txt {
      padding: 10px;
      position: relative;
      
      & p {
        display: flex;
        gap: 20px;
        font-size: 20px;

        &::before {
          flex-shrink: 0;
          font-family: Figtree, sans-serif;
          font-optical-sizing: auto;
          font-weight: 600;
          font-style: normal;
          font-size: 1.5em;
          transform: translateY(5px);
          line-height: 1;
        }
      }
    }
    .irfaq-q-txt {
      border-bottom: 1px solid #999;
      display: flex;
      gap: 2em;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        background: #000;
        bottom: 0;
        left: 0;
        transition: .3s all;
      }
      
      &:hover {
        &::after {
          width: 100%;
        }
      }
      
      & i {
        width: 25px;
        height: 25px;
        flex-shrink: 0;
        position: relative;
        transform: translateY(10px);
        
        &::before,&::after {
          content: '';
          background: #000;
          position: absolute;
        }
        
        &::before {
          width: 3px;
          height: 100%;
          left: 50%;
          transform: translateX(-50%);
          top: 0;
          transition: .3s all;
        }
        
        &::after {
          width: 100%;
          height: 3px;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      & p {
        flex: 1;
        
        &::before {
          content: 'Q.';
          color: #0a0fd2;
        }
      }  
    } 
    .irfaq-a-txt {
      padding: 20px 0 0 55px;
      
      & p {
        &::before {
          content: 'A.';
        }
      }  
    } 
  
  &[open] {
    & .irfaq-q-txt {
      & i {
        &::before {
          transform: rotate(90deg);
        }
        
        &::after {
          opacity: 0;
        }
      }
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .irfaq-box::details-content {
    overflow: clip;
    transition-duration: 300ms;
    transition-property: content-visibility, block-size;
    transition-behavior: allow-discrete;
  }
  
  .irfaq-box:not(:open)::details-content {
    block-size: 0;
  }
}

@media (max-width: 820px) {
  .irfaq-box {
    &:nth-child(n+2) {
      margin-top: 5vw;
    }
    
    & .irfaq-q-txt, & .irfaq-a-txt {
        & p {
          font-size: 4vw;
          
          &::before {
            transform: translateY(3px);
          }
      }
    }
    
    & .irfaq-q-txt {
      & i {
        width: 20px;
        height: 20px;
        transform: translateY(5px);
      }
      
      &::after {
        content: none;
      }
    }
    
    & .irfaq-a-txt {
      padding-left: 10px;
    }
  }
}