@charset "UTF-8";
/* - - - - - - - - - - - - - - - - - - - - - - - - 

    page common

- - - - - - - - - - - - - - - - - - - - - - - - */
:root{
    --color-pink:#FF6F6F;
    --color-red:#B50029;
    --color-white:#fff;
    --font-notoJP:"Noto Sans JP","游ゴシック","Yu Gothic","YuGothic","メイリオ","Meiryo","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Verdana, Arial,sans-serif;
}
/* wrapper */
.l-wrapper{
    position: relative;
    background-color: #F4F2EF;
}
.l-wrapper p{
    margin-bottom: 0;
}
@media screen and (min-width: 769px){
    .ataglance-main {
        padding: 0 30px;
    }
    .l-wrapper{
        max-width: 1080px;
        margin: auto;
    }
}
.l-wrapper::before{
    content: '';
    position: absolute;
    width: 100vw;
    height: 100%;
    background-color: #F4F2EF;
    top: 0;
    left: 0;
    margin: 0 calc(50% - 50vw);
    z-index: -1;
}
.ataglance-main {
    color: #333333;
    padding: 0 10px;
}
/* hover */
.l-wrapper a{
    transition: all .5s;
}
@media (hover: hover) and (pointer: fine){
    .l-wrapper a:hover{
        opacity: 0.7;
    }
}
/* fadeIn */
.anim-fadein{
    opacity: 0;
    transition: opacity 1s;
}
.anim-fadein.is-active{
    opacity: 1;
}
/* text */
.page-text{
    font-family: var(--font-notoJP);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: calc(48/28);
}
@media screen and (min-width: 769px){
    .page-text{        
        font-size: 1.6rem;
        line-height: calc(28/16);
    }

}
.color-red{
    color:var(--color-red);
}
/* img */
.ataglance-main img{
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* - - - 注釈 - - - */
.ataglance-annotation-list{
    margin-top: 16px;
    counter-reset: listCounter;
    display: grid;
    gap: .4em;
    padding-left: 0;
}
.ataglance-annotation-item{
    margin-block: calc((1em - 1lh) / 2);
    font-size: 1.2rem;
    line-height: calc(40/24);
    counter-increment: listCounter;
    display: flex;
    gap: .6em;
}
.ataglance-annotation-item::before{
    content: "*" counter(listCounter);
}
/* - - - - - - - - - - - - - - - - - -  - - - - - - 

    content character

 - - - - - - - - - - - - - - - - - -  - - - - - - */
.content-character-icon{
    position: relative;
}
.content-character-icon.is-active .content-character-icon__figure{
    opacity: 1;
}
.content-character-icon.is-active .content-character-icon__text{
    opacity: 1;
}
.content-character-icon__text{
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-20deg);
    opacity: 0;
    transition: opacity .5s linear .8s;
}
.content-character-icon__figure{
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity .5s linear .5s;
}

/* section headline */
.ataglance-section-lead{
    margin: 12px auto 16px;
}    
.ataglance-section-heading{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid #DDDDDD;
}
.ataglance-section-heading__num{
    line-height: 1;
    font-weight: 100;
    font-size: 1.8rem;
    color: #967D64;
    margin-block: calc((1em - 1lh) / 2);
    font-family: var(--font-notoJP);
    letter-spacing: 0.06em;
}
.ataglance-section-heading__title{
    letter-spacing: 0.02em;
    font-weight: 700;
    font-size: 2.4rem;
    color:var(--color-red);
    margin-block: calc((1em - 1lh) / 2);
}
@media screen and (min-width: 769px){
    .ataglance-section-content{
        max-width: calc(100% - 64px);
        margin: auto;
    }
    .ataglance-section-lead{
        margin: 38px auto 32px;
    }    
    .ataglance-section-heading{
        gap: 1.6rem;
        padding-bottom: 2rem;
    }
    .ataglance-section-heading__num{
        font-size: 2.4rem;
    }
    .ataglance-section-heading__title{
        font-size: 3.2rem;
    }

}
/* 共通パーツ */
.block-name {
    margin-block: calc((1em - 1lh) / 2);
    text-align: center;
    font-size: 1.4rem;
    line-height: calc(32/20);
    font-weight: 700;
}
.block-unit{
    text-align: center;
    line-height: 1;
    color:var(--color-red);
}
.block-unit__large{
    margin-block: calc((1em - 1lh) / 2);
    font-size: 5rem;
    font-weight: 900;
    font-family: var(--font-notoJP);
}
.block-unit__small{
    margin-block: calc((1em - 1lh) / 2);
    font-size: 2.4rem;
    font-weight: 700;
}
@media screen and (min-width: 769px){
    .block-name{
        font-size: 2rem;
    }
    .block-unit__large{
        font-size: 6.4rem;
    }
}
/* - - - - - - - - - - - - - - - - - -  - - - - - - 

    folder block

 - - - - - - - - - - - - - - - - - -  - - - - - - */
.ataglance-folder{
    margin-top: 48px;
}
.folder-head{
    border-radius: 12px 12px 0 0;
    color: var(--color-white);
    padding: 12px 16px;
    gap: 12px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
}
.folder-head--pink{
    background-color:var(--color-pink);
}
.folder-head--blue{
    background-color: #31A9E1;
}
.folder-head__label{
    margin-block: calc((1em - 1lh) / 2);
    letter-spacing: .06em;
    font-size: 2rem;
    font-weight: 600;
}
.folder-head__label--small{
    font-size: 1.6rem;
}
.folder-head__point{
    font-size: 1rem;
    margin: 0;
    text-align: right;
}
.folder-head-tags{
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    gap: .4em;
}
.folder-tag{
    margin-block: calc((1em - 1lh) / 2);
    letter-spacing: .06em;
    font-size: 1.2rem;
    font-weight: 600;
}
.folder-body{
    position: relative;
    border-radius: 0 0 12px 12px;
    background-color: var(--color-white);
}
@media screen and (min-width: 769px){
    .ataglance-folder{
        margin-top: 48px;
    }
    .folder-head{
        padding: 18px 24px;
        display: grid;
        grid-template-columns: 1fr auto;
    }
    .folder-head__label--small,
    .folder-head__label{
        font-size: 2.4rem;
    }
    .folder-head__point{
        font-size: 1.2rem;
    }
    .folder-head-tags{
        gap: 1em;
    }
    .folder-tag{
        font-size: 1.8rem;
    }
}
/* - - - - - - - - - - - - - - - - - - - - - - - - 

    button

 - - - - - - - - - - - - - - - - - - - - - - - - */
.ataglance-section-button{
    display: block;
    max-width: 480px;
    width: 100%;
    position: relative;
    text-align: center;
    padding: 14px;
    margin: auto;
    border-radius: 40px;
    background-color:var(--color-red);
    border: 2px solid var(--color-red);
    text-decoration: none;
}
.ataglance-section-button__text{
    margin-block: calc((1em - 1lh) / 2);
    color: var(--color-white);
    font-weight: 600;
    transition: all .5s;
    display: grid;
}
.ataglance-section-button__icon{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 7/12;
    right: 16px;
    width: 7px;
    height: 12px;
    background-size: 7px 12px;
    background-image: url(/company/assets/img/parts/icon_arrow_l_wht.png);
    background-repeat: no-repeat;
}
@media screen and (min-width: 769px){
    .ataglance-section-button{
        max-width: 480px;
        padding: 22px;
        border-radius: 40px;
        transition: opacity .5s;
    }
    .ataglance-section-button__text{
        margin-block: calc((1em - 1lh) / 2);
        color: var(--color-white);
        font-weight: 600;
    }
    .ataglance-section-button__icon{
        right: 32px;
        transition: all .5s;
    }
}
@media (hover: hover) and (pointer: fine) {
    .ataglance-section-button:hover{
        opacity: .7;
        text-decoration: none;
    }
}
/* - - - - - - - - - - - - - - - - - -  - - - - - - 

    hero section

 - - - - - - - - - - - - - - - - - -  - - - - - - */
.ataglance-hero{
    max-width: 92%;
    margin: auto;
    position: relative;
}
.ataglance-hero::before{
    content: '';
    position: absolute;
    width: 100vw;
    height: 52%;
    background-color: #fff;
    top: 0;
    left: 0;
    margin: 0 calc(50% - 50vw);
    z-index: 0;
}
.ataglance-hero__inner{
    position: relative;
    display: grid;
    grid-template-columns: 5.5fr 4.5fr;
}
.hero-letter{
    text-align: center;
    font-family: var(--font-notoJP);
    display: grid;
    gap: .2em;
    grid-template-columns: repeat(4,1fr);
    height: fit-content;
    > * {
        line-height: 1;
    }
}
.hero-letter-circle{
    display: grid;
    position: relative;
    z-index: 2;
    font-size: 5.5vw;
    font-weight: 900;
    color: var(--color-white);
    margin-block: calc((1em - 1lh) / 2);
    padding: 12px;
}
.hero-letter-circle::before{
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: auto;
    background-color: #967D64;
    border-radius: 50%;
    aspect-ratio: 1;
    width: 80%;
}
.hero-letter-color{
    color:var(--color-red);
    font-size: 10.5vw;
    font-weight: 900;
    margin-block: calc((1em - 1lh) / 2);
}
.hero-letter-default{
    color:var(--color-red);
    font-size: 10.5vw;
    font-weight: 900;
    margin-block: calc((1em - 1lh) / 2);
    margin-top: .1em;
}
.hero-text{
    text-align: center;
    margin-top: 12px;
    position: relative;
}
.hero-text__wrap{
    display: inline-block;
}
.hero-text p{
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: calc(48/32);
}
.hero-character{
    padding: 20% 0 0;
    position: relative;
    width: 100%;
    display: grid;
    gap: 10px;
    grid-template-rows: auto 1fr;
    justify-content: center;
}
img.hero-character__text{
    width: 72%;
    margin: auto;
}
@media screen and (min-width: 769px){
    .ataglance-hero{
        max-width: 698px;
    }
    .ataglance-hero::before{
        height: 68%;
    }
    .ataglance-hero__inner{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .hero-letter{
        gap: 1.2rem;
    }
    .hero-letter-circle{
        font-size: 4rem;
        padding: 12px;
    }
    .hero-letter-color{
        font-size: 8rem;
    }
    .hero-letter-default{
        font-size: 8rem;    
        margin-top: 0;
    }
    .hero-text{
        text-align: left;
    }
    .hero-text p{
        margin: 0;
        font-size: 1.8rem;
        line-height: calc(32/18);
    }
    .hero-character{
        padding:48px 0 0 80px;
        gap: 24px;
    }

}
/* - - - - - - - - - - - - - - - - - -  - - - - - - 

    anchor section

 - - - - - - - - - - - - - - - - - -  - - - - - - */
.anchor-wrap{
    display: grid;
    gap: 4px;
    margin: 32px auto 68px;
}
.l-wrapper a.anchor-item{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px;
    position: relative;
    text-decoration: none;
}
.anchor-item__num{
    display: grid;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    color: var(--color-white);
    background-color: #967D64;
    width: 40px;
    line-height: 1;
    font-size: 1.8rem;
    font-weight: 100;
    font-family: var(--font-notoJP);
    letter-spacing: 0.06em;
}
.anchor-item__label{
    padding: 0 14px;
    margin: 0;
    color: var(--color-white);
    background-color:var(--color-red);
    display: grid;
    height: 100%;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.anchor-item__icon{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    aspect-ratio:25.657/15.657;
    width: 10px;
}
@media screen and (min-width: 769px){
    .anchor-wrap{
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 32px auto 68px;
        max-width: 900px;
    }
    .l-wrapper a.anchor-item{
        gap: 4px;
    }
    .anchor-item__num{
        width: 60px;
        font-size: 3.2rem;
    }
    .anchor-item__label{
        padding: 0 52px 0  24px;
        font-size: 1.8rem;
        line-height: calc(24/18);
    }
    .anchor-item__icon{
        right: 32px;
        width: 20px;
    }
}
/* - - - - - - - - - - - - - - - - - - - - - - - - 

    section1 とは

    - - - - - - - - - - - - - - - - - - - - - - - - */
.ataglance-about{
    display: grid;
    margin: 24px auto 0;
    gap: 16px;
}
@media screen and (min-width: 769px){
    .ataglance-about{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        margin: 24px auto 0;
        gap: 1em 40px;
    }
    /* .ataglance-about-block{
    
    } */
    .ataglance-about-block--1{
        grid-row: 1/2;
        grid-column: 1/2;
    }
    .ataglance-about-block--2{
        grid-row: 1/3;
        grid-column: 2/3;
        
    }
    .ataglance-about-block--3{
        grid-row: 2/3;
        grid-column: 1/2;
    }

}
.ataglance-about-folder--1{
    margin-bottom: 84px;
    .folder-body{
        padding: 24px 20px 140px;
    }
}
.ataglance-product-list{
    display: grid;
    gap: 32px;
}
.ataglance-product-item{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 12px 0;
}
.ataglance-product-item__title{
    font-size: 2rem;
    font-weight: 600;
    grid-column: 1/2;
    grid-row: 1/2;
    margin-block: calc((1em - 1lh) / 2);
}
.ataglance-product-item__title--pink{
    color:var(--color-pink);
}
.ataglance-product-item__title--blue{
    color: #31A9E1;
}
.ataglance-product-item__image {
    grid-column: 1/2;
    grid-row: 2/3;
    padding-right: 32px;
}
/* .ataglance-product-item__image img{
} */
.ataglance-product-item__detail{
    margin-bottom: 0;
    grid-column: 2/3;
    grid-row: 1/3;
}
.about-emphasis-character{
    aspect-ratio: 398/373;
    max-width: 198px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-65%);
    bottom: -6%;
}
img.about-emphasis-character__text{
    width: 50%;
}
img.about-emphasis-character__figure{
    width: 76%;
}

@media screen and (min-width: 769px){
    .ataglance-about-folder--1{
        margin-bottom: 150px;
        .folder-body{
            padding: 36px 40px 214px;
        }
    }
    .ataglance-product-list{
        grid-template-columns: 1fr 1fr;
        gap: 48px 40px;
    }
    .ataglance-product-item{
        gap: 24px;
        grid-template-columns: 1fr;
        grid-template-rows: unset;
    }
    .ataglance-product-item__title{
        grid-column: unset;
        grid-row: unset;
    }
    .ataglance-product-item__image {
        display: flex;
        justify-content: center;
        grid-column: unset;
        grid-row: unset;
        padding-right: 0;
    }
    .ataglance-product-item__image img{
        max-width: 255px;
    }
    .ataglance-product-item__detail{
        margin-bottom: 0;
        grid-column: unset;
        grid-row: unset;
    }

    .ataglance-product-item--column{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        .ataglance-product-item__image{
            grid-column: 1/2;
            grid-row: 2/3;
        }
        .ataglance-product-item__detail{
            grid-column: 2/3;
            grid-row: 2/3;

        }
    }
    .about-emphasis-character{
        aspect-ratio: 264/208;
        max-width: 264px;
        transform: translateX(-50%);
        left: 74%;
        bottom: -80px;
    }
    img.about-emphasis-character__text{
        width: 47%;
    }
    img.about-emphasis-character__figure{
        width: 64%;
    }
}
.ataglance-about-folder--2{
    margin-bottom: 84px;
    .folder-body{
        padding: 30px 20px 168px;
    }
}
.about-basic-character{
    aspect-ratio: 374/392;
    max-width: 188px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-65%);
    bottom: -12%;
}
img.about-basic-character__text{
    width: 52%;
}
img.about-basic-character__figure{
    width: 80%;
}
@media screen and (min-width: 769px){
    .ataglance-about-folder--2{
        margin-bottom: 112px;
        .folder-body{
            padding: 36px 40px 24px;
        }
    }
    .about-basic-character{
        aspect-ratio: 244/217;
        max-width: 244px;
        transform: translateX(30%);
        left: 55%;
        bottom: -80px;
    }
    img.about-basic-character__text{
        width: 52%;
    }
    img.about-basic-character__figure{
        width: 68%;
    }
}
/* section2 数字で見る */
.ataglance-strength-folder--1{
    margin-bottom: 84px;
    margin-top: 24px;
}
.ataglance-strength-folder--1 .folder-body{
    padding: 24px 16px 145px;
}
.group-lead{
    margin-top: 12px;
}
.ataglance-longsaler-list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px 8px;
}
.ataglance-longsaler-item{
    display: grid;
    gap: 12px;
}
.longsaler-item-image{
    aspect-ratio: 288/269;
    max-width: 266px;
    width: 100%;
    width: fit-content;
    margin: auto;
}
.group-character{
    aspect-ratio: 396/364;
    max-width: 192px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-65%);
    bottom: -65px;
}
img.group-character__text{
    width: 51%;
}
img.group-character__figure{
    width: 78%;
}
@media screen and (min-width: 769px){
    .ataglance-strength-folder--1{
        margin-bottom: 132px;
        margin-top: 48px;
    }
    .ataglance-strength-folder--1 .folder-body{
        padding: 40px 24px 204px;
    }
    .group-lead{
        margin-top: 24px;
    }
    .ataglance-longsaler-list{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        justify-content: space-between;
        gap: 40px 0;
    }
    .ataglance-longsaler-item{
        display: grid;
        gap: 12px;
    }
    .longsaler-item-image{
        aspect-ratio: 288/269;
        max-width: 266px;
    }
    .group-character{
        aspect-ratio: 253/198;
        max-width: 253px;
        transform: translateX(-50%);
        left: 75%;
        bottom: -80px;
    }
    img.group-character__text{
        width: 50%;
    }
    img.group-character__figure{
        width: 66%;
    }
}

.ataglance-strength-folder--2 .folder-body{
    padding: 20px 20px 40px;
}
.ataglance-share-wrap{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
.ataglance-share-block{
    display: grid;
}
.share-block-label{
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
}
.share-block-label::after{
    content: '';
    display: block;
    height: 3px;
    width: 100%;
    background:var(--color-pink);
    border-radius: 4px;
}
.share-block-label__text{
    background: var(--color-white);
    margin-block: calc((1em - 1lh) / 2);
    font-size: 2.4rem;
    color:var(--color-pink);
    font-weight: 600;
    white-space: pre;
}
.share-block-list{
    display: grid;
    gap: 0px;
}
.share-block-item{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4px;
}
.share-block-item__image{
    max-width: 307px;
    width: 100%;
    text-align: center;
    margin: auto;
}
@media screen and (min-width: 769px){
    .ataglance-strength-folder--2 .folder-body{
        padding: 44px 60px;
    }
    .ataglance-share-wrap{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .ataglance-share-block{
        display: grid;
    }
    .ataglance-share-block--1{
        grid-column: 1/3;
        grid-row: 1/2;
    
    }
    .ataglance-share-block--2{
        grid-column: 1/2;
        grid-row: 2/3;
    
    }
    .ataglance-share-block--3{
        grid-column: 2/3;
        grid-row: 2/3;
    }
    .share-block-label{
        position: relative;
        display: flex;
        align-items: center;
        gap: 28px;
    }
    .share-block-label__text{
        background: var(--color-white);
        margin-block: calc((1em - 1lh) / 2);
        font-size: 2.4rem;
        color:var(--color-pink);
        font-weight: 600;
        white-space: pre;
    }
    .share-block-list{
        display: flex;
    }
    .share-block-item{
        flex: 1;
        display: grid;
        grid-template-columns: unset;
        gap: 4px;
    }
    .share-block-item__image{
        max-width: 307px;
        width: 100%;
        text-align: center;
        margin: auto;
    }
}
.ataglance-strength-folder--3{
    .folder-body{
        padding: 24px 32px;
    }
    .graph-list{
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
@media screen and (min-width: 769px){
    .ataglance-strength-folder--3{
        .folder-body{
            padding: 48px 80px 40px;
        }
        .graph-list{
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }
    }

}
.ataglance-strength-folder--4 .folder-body{
    padding: 14px 16px;
    display: grid;
    gap: 16px;
}
@media screen and (min-width: 769px){
    .ataglance-strength-folder--4 .folder-body{
        padding: 20px 24px 40px;
        gap: 48px;
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - 

    section3

- - - - - - - - - - - - - - - - - - - - - - - - */
.ataglance-board{
    background: var(--color-white);
    border-radius: 12px;
    position: relative;
    padding: 20px 16px;
}
@media screen and (min-width: 769px){
    .ataglance-board{
        padding: 48px 0 128px;
    }
}
.ataglance-vision{
    display: grid;
    gap: 16px;
    margin-bottom: 166px;
}
.vision-message{
    display: grid;
    gap: 8px;
    text-align: center;
}
.vision-message__letter{
    font-family: var(--font-notoJP);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-red);
    line-height: calc(48/32);
    letter-spacing: 0.02em;
}
.vision-message__content{
    font-family: var(--font-notoJP);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: calc(32/18);
}
/* .vision-image{

} */
.vision-character{
    aspect-ratio: 380/385;
    max-width: 190px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-65%);
    bottom: -14%;
}
img.vision-character__text{
    width: 90%;
}
img.vision-character__figure{
    width: 80%;
}

@media screen and (min-width: 769px){
    .ataglance-board--vision{
        padding: 40px 0 60px;
    }
    .ataglance-vision{
        gap: 24px;
        margin: 0 auto ;
        max-width: 500px;
    }
    .vision-message{
        gap: 12px;
    }
    .vision-message__letter{
        font-size: 2.4rem;
    }
    .vision-message__content{
        font-size: 1.6rem;
    }
    .vision-character{
        aspect-ratio: 262/220;
        max-width: 262px;
        transform: translateX(-50%);
        left: 84%;
        bottom: -80px;
    }
    img.vision-character__text{
        width: 81%;
        right: 0;
        left: auto;
        transform: rotate(15deg);
    }
    img.vision-character__figure{
        width: 64%;
        left: 0;
    }
}

/* section4 株主還元 */
.l-wrapper > section.section-dividend{
    margin-top: 98px;
}
.section-dividend{
    .ataglance-section-button{
        margin-top: 16px;
    }
}
.ataglance-board--dividend{
    margin-bottom: 88px;
}
@media screen and (min-width: 769px){
    .l-wrapper > section.section-dividend{
        margin-top: 124px;
    }
    .section-dividend{
        .ataglance-section-button{
            margin-top: 32px;
        }
        .ataglance-annotation-list{
            padding-left: 58px;
        }
        .ataglance-section-button{
            margin-top: 32px;
        }
    }
    .ataglance-board--dividend{
        margin-bottom: 0;
    }
}
.scalable-graph{
    position: relative;
    aspect-ratio: 720 / 468;
    display: grid;
    align-items: end;
    grid-template-rows: 1fr auto;
    margin: 48px 0 144px;
}
.scalable-graph-label{
    height: fit-content;
    z-index: 5;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -48px;
    white-space: pre;
    display: grid;
}
.scalable-graph-label__content{
    font-family: var(--font-notoJP);
    line-height: 1;
    font-weight: 600;
    font-size: 2rem;
}
.scalable-graph-text{
    height: fit-content;
    z-index: 5;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0%;
}
.scalable-graph-text__content{
    font-weight: 900;
    font-size: 2rem;
    font-family: var(--font-notoJP);
    line-height: 1.5;
    padding: 0 .4em;
    background:linear-gradient(transparent 60%, #FFCBCB 60%);

}
.scalable-graph.is-active .graph-line-group{
    transform: translateY(0);
}

.scalable-graph-lines{
    display: flex;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}
.graph-line-group{
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    transform: translateY(100%);
    transition: transform 1s;
}
.graph-line-group--1{
    transition-delay: .1s;
}
.graph-line-group--2{
    transition-delay: .15s;
}
.graph-line-group--3{
    transition-delay: .2s;
}
.graph-line-group--4{
    transition-delay: .25s;
}
.graph-line-group--5{
    transition-delay: .3s;
}
.graph-line-group--6{
    transition-delay: .35s;
}
.graph-line-group--7{
    transition-delay: .4s;
}
.graph-line-group--8{
    transition-delay: .45s;
}
.graph-line-group--9{
    transition-delay: .6s;
}
.graph-line-group--10{
    transition-delay: .65s;
}
.graph-line-group--11{
    transition-delay: .7s;
}
.graph-line-group--12{
    transition-delay: .75s;
}
.graph-line-group__num{
    /* font-size: 40%; */
    font-family: var(--font-notoJP);
    line-height: 1;
    font-weight: 900;
    font-size: 60%;
    white-space: pre;
}
.graph-line-group__num--large{
    font-size: 80%;
    color: var(--color-red);
}
.graph-line-group__rect{
    width: 38%;
    background: #967D64;
    max-height: 400px;
    height: 100%;
    margin: .5em auto 0;
}
.graph-line-group__rect--1{
    height: 19%;
}
.graph-line-group__rect--2{
    height: 22%;
}
.graph-line-group__rect--3{
    height: 29%;
}
.graph-line-group__rect--4{
    height: 32%;
}
.graph-line-group__rect--5{
    height: 42%;
}
.graph-line-group__rect--6{
    height: 46%;
}
.graph-line-group__rect--7{
    height: 51%;
}
.graph-line-group__rect--8{
    height: 57%;
}
.graph-line-group__rect--9{
    height: 64%;
}
.graph-line-group__rect--10{
    height: 70%;
}
.graph-line-group__rect--11{
    height: 77%;
}
.graph-line-group__rect--12{
    height: 100%;
    background-color: var(--color-red);
}
.graph-bottom{
    display: block;
    width: 100%;
    height: auto;
    border-top: 1px solid #DDDDDD;
}
@media screen and (min-width: 769px){
    .scalable-graph{
        max-width: 720px;
        margin: auto;
    }
    .scalable-graph-label{
        top: 0;
        left: 0;
        transform: unset;
    }
    .scalable-graph-label{
        top: 0%;
    }
    .scalable-graph-label__content{
        font-size: 2rem;
    }
    .scalable-graph-text{
        top: 18%;
    }
    .scalable-graph-text__content{
        font-size: 2.6rem;
    }
    .graph-line-group__num{
        font-size: 1.5rem;
    }
    .graph-line-group__num--large{
        font-size: 2.4rem;
    }
    .graph-line-group__rect{
        max-height: 400px;
    }
}
.dividend-character{
    aspect-ratio: 381/340;
    max-width: 190px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-65%);
    bottom: -14%;
}
img.dividend-character__text{
    width: 56%;
}
img.dividend-character__figure{
    width: 80%;
}
@media screen and (min-width: 769px){
    .dividend-character{
        aspect-ratio: 250/193;
        max-width: 250px;
        transform: translateX(60%);
        left: 48%;
        bottom: -100px;
    }
    img.dividend-character__text{
        width: 53%;
    }
    img.dividend-character__figure{
        width: 66%;
    }
}
/* section5 もっと知りたい方へ */
.section-more{
    margin-top: 36px;
}
ul.ataglance-more-list{
    display: grid;
    gap: .8rem;
    margin: 16px auto 0;
}
.l-wrapper a.ataglance-more-link{
    text-decoration: none;
    padding: 1.6rem 2.4rem;
    background-color: var(--color-white);
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
}
.ataglance-more-link__text{
    margin: 0;
    margin-block: calc((1em - 1lh) / 2);
    font-weight: 600;
    line-height: 1;
}
.ataglance-more-link__icon{
    aspect-ratio: 1;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color:var(--color-red);
    display: block;
    position: relative;
}
.ataglance-more-link__icon::before{
    content: '';
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background-color: var(--color-white);
    aspect-ratio: 5.82/6.75;
    width: calc(18px / 2);
    position: absolute;
    inset: 0;
    margin: auto;
}
@media screen and (min-width: 769px){
    .section-more{
        margin-top: 68px;
    }
    ul.ataglance-more-list{
        grid-template-columns: repeat(3,1fr);
        margin: 32px auto 0;
    }
    .l-wrapper a.ataglance-more-link{
        padding: 1.6rem;
    }
    .ataglance-more-link__icon{
        width: 18px;
        height: 18px;
    }
    .ataglance-more-link__icon::before{
        width: 6px;
    }
}