@charset "utf-8";

/* グレーの背景のエリア */
main{
    display: block;
    height: calc(100dvh - 85px);
    padding-top: 20px;
    border-radius: 50px 50px 0 0;
    @media (max-width: 1032px) {
        height: calc(100dvh - 90px);
        border-radius: 20px 20px 0 0;
    }
    .main_inner{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: -webkit-fill-available;
        overflow: auto;
        .contents_area{
            width: calc(100% - 260px);
            max-width: 1400px;
            margin: 0 auto;
            @media screen and (max-width: 1376px){
                width: 100%;
                padding: 0 20px;
            }
            @media screen and (max-height: 906px){
                height: calc(780px* 0.9 - 200px);
            }
            .title_area{
                display: flex;
                align-items: center;
                height: 100px;
                position: relative;
                &::before{
                    display: block;
                    content: '';
                    width: 100px;
                    height: 100%;
                    background: url(../../images/common/menu_icon03.svg) center/contain no-repeat;
                }
                @media screen and (max-width: 1023px){
                    height: 70px;
                    &::before{
                        width: 70px;
                    }
                }
                @media screen and (max-width: 575px){
                    &::before{
                        width: 52px;
                    }
                }
                h2{
                    display: flex;
                    align-items: center;
                    font-size: 30px;
                    @media screen and (max-width: 1376px){
                        flex-direction: column;
                        align-items: baseline;
                    }
                    @media screen and (max-width: 1023px){
                        font-size: 1.25em;
                    }
                    @media screen and (max-width: 575px){
                        font-size: 1em;
                    }
                    a{
                        color: var(--main-color);
                        transition: opacity 0.3s;
                        &:hover{
                            opacity: 0.5;
                        }
                    }
                    em{
                        margin: 0 0.6em;
                        font-style: normal;
                        @media screen and (max-width: 1376px){
                            display: none;
                        }
                    }
                }
                .switching_word_area{
                    height: 100%;
                    position: absolute;
                    top: 0;
                    right: 0;
                    display: flex;
                    line-height: 100px;
                    align-items: center;
                    padding-left: 30px;
                    @media screen and (max-width: 1023px){
                        line-height: 70px;
                        padding-left: 20px;
                    }
                }
                .switching_word{
                    position: relative;
                    display: inline-block;
                    width: 376px;
                    height: 60px;
                    border-radius: 10px;
                    background-color: var(--main-color);
                    color: #fff;
                    font-weight: 900;
                    /*font-size: clamp(1.083rem, 0.285rem + 1.06vw, 1.563rem);*/
                    font-size: 25px;
                    text-align: center;
                    text-decoration: none;
                    line-height: 60px;
                    @media screen and (max-width: 1376px){
                        height: 50px;
                        line-height: 50px;
                        font-size: 20px;
                    }
                    @media screen and (max-width: 1023px){
                        width: 300px;
                        border-radius: 5px;
                    }
                    @media screen and (max-width: 575px){
                        width: 200px;
                        height: 40px;
                        font-size: 13px;
                        line-height: 40px;
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 10px;
                        background-color: rgba(0, 0, 0, 0.2);
                        opacity: 0;
                        transition: opacity 0.3s ease;
                    }
                    &:hover{
                        &::before{
                            opacity: 1;
                        }
                    }
                }
            }
            .upper-area{
                width: 100%;
                display: flex;
                margin-bottom: 60px;
                text-align: center;
                @media screen and (max-width : 1376px) {
                    margin-bottom: 40px;
                }
                @media screen and (max-width : 1023px) {
                    margin-bottom: 20px;
                }
            }
            .method-button{
                height: 70px;
                background: #e2e2e2;
                border-radius: 10px;
                border: 0px;
                font-size: 30px;
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: 500;/*medium*/
                letter-spacing: 0;
                color: var(--text-color);
                cursor: pointer;
                @media screen and (max-width : 1376px) {
                    height: 50px;
                    font-size: 20px;
                }
                @media screen and (max-width : 1023px) {
                    font-size: 1.5em;
                    border-radius: 5px;
                }
                @media screen and (max-width : 575px) {
                    font-size: 1.1em;
                }
            }
            .method-button[data-selected="true"]{
                background: var(--sub-color);
                color: var(--main-color);
                cursor: default;
            }
            #btnMethodGroup{
                width: 50%;
                margin-right: 25px;
                @media screen and (max-width : 1023px) {
                    margin-right: 10px;
                }
            }
            #btnMethodChapter{
                width: 50%;
                margin-left: 25px;
                @media screen and (max-width : 1023px) {
                    margin-left: 10px;
                }
            }
            .lower-area{
                width: 100%;
                display: flex;
                flex-flow: row;
                @media screen and (max-width : 1023px) {
                    flex-flow: column;
                }
            }
            .lower-1 {
                min-width: 565px;
                height: 650px;
                border-right: 1px solid #A2A2A2;
                position: relative;
                @media screen and (max-width : 1023px) {
                    min-width: initial;
                    height: initial;
                    padding-bottom: 30px;
                    border-right: 0px;
                    border-bottom: 1px solid #A2A2A2;
                }
                span{
                    font-size: 30px;
                    font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                    font-weight: normal;
                    letter-spacing: 0;
                    color: var(--text-color);
                    @media screen and (max-width : 1376px) {
                        font-size: 20px;
                    }
                    @media screen and (max-width : 1023px) {
                        font-size: 1.5em;
                    }
                    @media screen and (max-width : 1032px) {
                        font-size: 16px;
                    }
                    @media screen and (max-width : 575px) {
                        font-size: 1.1em;
                    }
                }
            }
            .search-word, .chapter-select {
                text-indent: 0.5em;
                background-color: #ffffff;
                width: 495px;
                height: 60px;
                box-sizing: border-box;
                outline-color: var(--main-color);
                border: 1px solid var(--main-color);
                border-radius: 0;
                font-size: 25px;
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: normal;
                letter-spacing: 0;
                color: var(--text-color);
                margin-top: 15px;
                cursor: pointer;
                max-width: 100%;
                word-wrap: break-word;
                white-space: normal;
                overflow-wrap: break-word;
                min-height: 60px; /* 初期高さ（1行分） */
                resize: none; /* 手動でサイズ変更不可 */
                overflow-y: hidden; /* スクロールバー非表示 */
                line-height: 1.5;  /* フォントサイズに合わせて調整 */
                padding: 10px 15px; /* 適切な余白調整 */
            }
                @media screen and (max-width : 1023px) {
                    .search-word , .chapter-select {
                        width: 100%;
                        height: 50px;
                        min-height: 50px;
                        font-size: 1.25em;
                        margin-top: 10px;
                    }
                }
                @media screen and (max-width : 575px) {
                    .search-word , .chapter-select {
                        height: 40px;
                        min-height: 40px;
                        font-size: 1em;
                        line-height: 1.2;
                        padding: 10px 10px; /* 適切な余白調整 */
                    }
                }
                @media screen and (max-width : 481px) {
                    .search-word , .chapter-select {
                        font-size: 0.875em;
                        margin-top: 5px;
                    }
                }
            .search-word::placeholder{
                color: #a0a0a0;
            }
            .group-area {
                margin-top: 40px;
                @media screen and (max-width : 1023px) {
                    margin-top: 20px;
                }
            }
            .group-button-area {
                margin-top: 15px;
                width: 495px;
                height: 70px;
                letter-spacing: 0;
                display: flex;
                text-align: center;
                @media screen and (max-width : 1023px) {
                    margin-top: 10px;
                    width: 100%;
                    height: 50px;
                }
                @media screen and (max-width : 481px) {
                    height: 45px;
                }
            }
            .group-button-area:first-of-type {
                margin-top: 20px;  
                @media screen and (max-width : 1023px) {
                    margin-top: 10px;
                } 
            }
            .group-button {
                width: 70px;
                height: 70px;
                border-radius: 10px;
                border: 1px solid var(--main-color);
                font-size: 30px;
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: 500;/*medium*/
                letter-spacing: 0;
                color: var(--text-color);
                background-color: #fff;
                padding: 0;
                margin: 0 15px 0 0;
                cursor: pointer;
                @media screen and (max-width : 1376px) {
                    font-size: 20px;
                }
                @media screen and (max-width : 1023px) {
                    width: 50px;
                    height: 50px;
                    border-radius: 5px;
                    font-size: 1.5em;
                    margin: 0 10px 0 0;
                }
                @media screen and (max-width : 575px) {
                    font-size: 1.1em;
                }
                @media screen and (max-width : 481px) {
                    width: 45px;
                    height: 45px;
                    margin: 0 8px 0 0;
                }
            }
            .group-button:last-of-type {
                margin-right: 0;
            }
            .group-button[data-selected="true"] {
                background: var(--main-color);
                color: #fff;
                border: 1px solid var(--main-color);
            }
            .chapter-area{
                margin-top: 40px;
                @media screen and (max-width : 1023px) {
                    margin-top: 20px;
                }
            }
            .chapter-select[data-selected="false"]{
                color: #a0a0a0;
            }
            .chapter-select option{
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: normal;
                letter-spacing: 0;
                color: var(--text-color);
            }
            .chapter-select option:first-of-type{
                color:#a0a0a0;
            }
            .all-button{
                width: 495px;
                height: 70px;
                background: #fff;
                border-radius: 10px;
                border: 1px solid var(--main-color);
                font-size: 30px;
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: 500;
                letter-spacing: 0;
                margin-top: 35px;
                cursor: pointer;
                text-align: center;
                @media screen and (max-width : 1376px) {
                    font-size: 20px;
                    height: 50px;
                }
                @media screen and (max-width : 1023px) {
                    width: 100%;
                    border-radius: 5px;
                    font-size: 1.5em;
                    margin-top: 10px;
                }
                @media screen and (max-width : 575px) {
                    font-size: 1.1em;
                }
            }
            .all-button[data-selected="true"]{
                color: #fff;
                background-color: var(--main-color);
                border: 1px solid var(--main-color);
            }
            .lower-2{
                width: 100%;
                height: 650px;
                @media screen and (max-width : 1023px) {
                    height: 100%;
                    margin: 30px auto 0 0;
                }
            }
            .item-container{
                width: 100%;
                height: 640px;
                @media screen and (max-width : 1023px) {
                    height: 509px;
                }
            }
            .word-item-list{
                width: 100%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;
                padding: 5px;
                overflow: auto;
                @media screen and (max-width : 1023px) {
                    padding: 5px 0 5px 0;
                }
            }
            .word-item{
                width: 100%;
                text-align: left;
                margin: 0 10px 10px 70px;
                position: relative;
                @media screen and (max-width : 1023px) {
                    margin: 0 0 7px 0;
                }
            }
            .item-group{
                color: #fff;
                font-size: 25px;
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: 500;
                letter-spacing: 0;
                line-height: 35px;
                padding: 12px 20px 12px 20px;
                background: var(--main-color);
                border-radius: 10px;
                @media screen and (max-width : 1023px) {
                    font-size: 1.25em;
                    line-height: 30px;
                    padding: 10px 15px 10px 15px;
                    border-radius: 5px;
                }
            }
            .item-title{
                color: var(--text-color);
                font-size: 25px;
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: normal;
                letter-spacing: 0;
                line-height: 35px;
                padding: 12px 20px 12px 20px;
                background: #ffffff;
                border: 1px solid #a0a0a0;
                border-radius: 10px;
                cursor: pointer;
                @media screen and (max-width : 1023px) {
                    font-size: 1.25em;
                    line-height: 30px;
                    padding: 10px 15px 10px 15px;
                    border-radius: 5px;
                }
                @media screen and (max-width : 575px) {
                    font-size: 1em;
                    line-height: 25px;
                }
            }
            .item-title span:hover{
                    color: var(--main-color);
            }
            .logo_area{
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 50px 0;
                img{
                    width: 105px;
                }
            }
            .desc-win{
                width: 70%;
                height: 60%;
                background: #ffffff;
                box-shadow: 0px 0px 7px #00000033;
                border-radius: 20px;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 70px 50px 50px 50px;
                box-sizing: border-box;
                position: relative;
                max-width: 800px;
                max-height: 80vh; 
                padding: 20px;
                @media screen and (max-width : 1023px) {
                    width: 85%;
                    border-radius: 10px;
                    padding: 20px;
                    box-sizing: border-box;
                    position: relative;
                }
            }
            .desc-scroll{
                overflow: hidden;
                height:  -webkit-fill-available;
                flex-direction: column;
            }
            #btnDescClose{
                width: 30px;
                height: 30px;
                position: absolute;
                top: 30px;
                right: 30px;
                border: 0px;
                background: #ffffff;
                padding: 0;
                cursor: pointer;
                @media screen and (max-width : 1023px) {
                    width: 40px;
                    height: 40px;
                    border-radius: 5px;
                    box-shadow: 0px 0px 7px #00000033;
                    position: absolute;
                    top: -50px;
                    right: 0;
                }
            }
            #btnDescClose>span{
                display: block;
                width: 30px;
                height: 30px;
                background-size: contain;
                background-repeat: no-repeat;
                background-image: url(../img/win_close.svg);
                @media screen and (max-width : 1023px) {
                    width: 20px;
                    height: 20px;
                    margin: 10px;
                }
            }
            .desc-word{
                overflow: hidden;
                height: auto;
                box-sizing: border-box;
                border-left: 15px solid var(--main-color);
                padding-left: 25px;
                color: var(--text-color);
                font-size: 40px;
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: normal;
                letter-spacing: 0;
                line-height: 70px;
                margin-bottom: 20px;
                @media screen and (max-width : 1023px) {
                    border-left: 10px solid var(--main-color);
                    padding-left: 13px;
                    font-size: 25px;
                    line-height: 40px;
                    margin-bottom: 10px;
                }
            }
            .desc-area{
                overflow: auto;
                height: 100%;
                vertical-align: bottom;
            }
            .desc-image{
                width: 530px;
                float: left;
                margin-right: 30px;
                @media screen and (max-width : 1023px) {
                    width: 100%;
                    float: initial;
                    margin-right: 0;
                }
            }
            .desc-image-hide{
                display: none;  
            }
            .desc-text{
                height: 100%;
                font-size: 25px;
                font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
                font-weight: normal;
                letter-spacing: 0;
                padding-bottom: 100px;
                @media screen and (max-width : 1023px) {
                    font-size: 20px;
                }
            }
            .modal{
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 100;
                transition: all 1s;
                background-color: rgba(0,0,0,0.5);  
                align-items: center;
            }
        }
    }
}