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

@import url("../reset.css");

html, body { width: 100% ;}

body {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    display: block;
    margin: 0;
    color: #1c1c1c;
    background-color: #1c1c1c;
}

a {
    color: navy;
    text-decoration:underline;
    text-decoration-line: underline;

}
a:link
{
    color: navy;
    text-decoration-line: underline;
    text-decoration-style: solid;
}
a:focus
{
    outline-width: thin;
    outline-style: dotted;
}
a:hover, a:active
{
    outline-width: 0px;
    outline-style: none;
}

a:focus, a:active, a:hover
{
    text-decoration-line: none;
    text-decoration-style: solid;
}

input, textarea, select {
    font-size: 100%;
    margin: 2px 2px 2px 2px;
    vertical-align: middle;
}

label {
    cursor: pointer;
    display: inline-block;
    padding-right: 15px;
}

p
{
    line-height: 28px;
    margin-bottom: 10px;
    font-size: 16px;
}

h1 {
    margin:0;
    color:#fff;
}
h2 {
    font-size: 20px;
    color: #fff;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;

    background: transparent;
    background-image: linear-gradient(to right, #063e11, transparent);

}

h3 {
    font-size:18px;
}

img {
    max-width: 95%;
}
.h1_sub {
    font-size: 75%;
}
.h2_sub {
    font-size: 75%;
}
.h3_sub {
    font-size: 75%;
}
.h1_nc {
    color: #000;
}
#header {
    text-align: center;
    background-color: #0c2244;
    color: #fff;
}
.header_title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px 20px;
    padding: 16px 12px;
    line-height: 1.3;
}

.header_role {
    font-size: 0.9375rem;
    color: #d5e0ee;
}

.header_name {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
}

@media screen and (max-width: 480px) {
    .header_title {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
}

#page_body {
    margin: 0;
    padding: 0;
    width: 100%;
}
#menu {
    background-color: #101d32;
    color:#fff;
    text-align: center;

}
#contents {
    text-align: left;
    margin: 0 auto;
    width:auto;
}
#top_bg {
    color: #fff;
    width: auto;
    margin:0 auto;
    background-color: #000;

}
.top_bg_in {
    padding: 15px;
}
.menu_top_area {
    width: 1200px;
    margin :0 auto;
    background-color: #162c4a;
}
.menu_top_btn {
    width: 171px;
    color: #fff;
    background: #162c4a;
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
    transition: 0.5s;
}
.menu_top_btn:hover {
    cursor: pointer;
    background-color: #254a75;
}
.on_select_menu {
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    border-bottom: 2px solid #9dbce3;
}
.menu_area {

    width: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;

}
.menu_btn {
    font-size: 18px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: 0.5s;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color:#000;
}
.menu_btn:hover {
    cursor: pointer;
    color: #ce9118;
    background: transparent;
    background-image: linear-gradient(to right, #0c2244, transparent);

}
.news_area {
    padding-bottom: 15px;
    width: 50%;
}
.news_area_in {
    padding-left: 5px;
}
.instant_profile {
    width: 70%;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 15px;
    background: transparent;
    background-image: linear-gradient(to right, #0c2244, transparent);
}
/* コンテンツ */
#form_btn_area img {
    width: 300px;
}

.form_box {
    margin-top: 15px;
    margin-bottom: 15px;
}

#btn_box {
    margin-top: 20px;

}

#footer {
    width: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    border-top:2px solid #bba653;
    background-color: #0c2244;
    color: #fff;
}

.bottom_check_box {
    margin: 15px auto 15px auto;
}
.btn_box {
    margin-top: 10px;
    padding-top: 20px;
    padding-bottom: 5px;
    text-align: center;

}

.sys_mess {
    width: auto;
    margin: 20px auto 20px auto;
    background-color: red;
    color: #FFFFFF;
    padding: 10px;
    line-height: 1.7;
    font-size: 16px;
}

.btn3 {
    background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    background-color:#f9f9f9;
    border-radius:6px;
    border:1px solid #b8b4b8;
    display:inline-block;
    cursor:pointer;
    color:#000000;
    font-size:13px;
    padding:3px 8px;
    text-decoration:none;
}
.btn3:hover {
    background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
    background-color:#e9e9e9;
}
.btn3:active {
    position:relative;
    top:1px;
}
.left {
    text-align: left!important;
}
.right {
    text-align: right!important;
}
.center {
    text-align: center!important;
}
.bold {
    font-weight: bold!important;
}

.middle {
    vertical-align: middle!important;
}

.red {
    color: red!important;
}
.desc {
    font-size: 13px;
    color: #666666;
}

.confirm_btn {
    text-align: center;
    margin-top: 40px;
}

.confirm_btn .btn {
    width: 90%;
    max-width: 300px;
    background-color: #26ba34;
    color: white;
    border: none;
    padding: 15px;
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 20px;
}

.confirm_btn .btn_back {
    background: #ccc;

}

.btn {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;

    min-width: 250px;
    background-color:#063e11;
    border-radius:8px;
    border:1px solid #063e11;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-size:18px;
    padding:10px 20px;
    text-decoration:none;
    margin: 15px 15px;
}

.btn:hover {
    opacity: 0.7;

}
.btn:active {
    position:relative;
    top:1px;
}

.btn_back {
    background: #d5c134;
    background-image: linear-gradient(to bottom, #d5c134, #b3a32b);
    border:1px solid #cbca62;

}

.btn_back:hover {
    opacity: 0.7;
    background: #d5c134;
    background-image: linear-gradient(to bottom, #d5c134, #b3a32b);

}

.ft {
    background-color: #ccc;
    color: #222;
    font-size: 14px;
    font-weight: bold;
    padding-left: 10px;

    padding-top: 15px;
    padding-bottom: 15px;

}
.fd {
    font-size: 14px;
    padding-left: 20px;

    padding-top: 15px;
    padding-bottom: 15px;

}
.req {
    position: relative;
    bottom:2px;
    padding: 3px;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #991b1b;
    border: solid 1px #c31221;
    border-radius: 8px;

}

.clear_left {
    clear: left;
}

.f_table {
    width: 100%;
    font-size: 12px;
    border-spacing: 0;
    border-collapse: separate;
    margin-bottom: 20px;
    border-right: 1px solid #7c7c7c;
    border-bottom: 1px solid #7C7C7C;
}
.f_table th, .f_table td {
    font-size: 12px;
    vertical-align: middle;
    border-top: 1px solid #7C7C7C;
    border-left: 1px solid #7C7C7C;
    padding: 3px 3px;
}

.f_table th {
    font-size: 12px;
    background-color: #0c2244;
    color: #FFFFFF;
}

.page_def {
    background-color: #fff;
    margin: 0 auto;
    width: 1200px;
}
.page_def_in {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.lesson_area_txt {
    font-size: 20px;
}

.lesson_left {
    float: left;
    width: 65%;
    padding-right: 15px;
}
.lesson_left_border {
    border-bottom: 1px solid grey;
}

.lesson_right2 {
    float: left;
    width: 30%;
    padding-top: 30px;
}

.lesson_right2 img {
    width: 95%;
    padding: 1px;
    border: 1px solid grey;
}

@media screen and (min-width: 1200px) {

    #contents {
        background-repeat: repeat-x;
        background-image: url("../../img/top_side.png");
        background-size: 20%;
        background-position: 0 100px;
    }
    #top_bg {
        max-width:1200px;
        background-repeat: no-repeat;
        background-image: url("../../img/top.png");
        background-size: contain;
    }

    .album_th {
        width: 45%;
    }
    .shityo_th {
        width: 100px;
    }
    .gakuhu_no_th {
        width: 50px;
    }
    td.music_td {
        font-size: 17px;
    }

}

.instant_profile {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin: 32px 0;
    padding: 20px 0;
    background: transparent;
    border-top: 1px solid #303846;
}

.instant_profile .instant_profile_photo {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    padding: 0;
    border: 0;
}

.instant_profile .instant_profile_title,
.news_area.site_history h2 {
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
    color: #f2f3f6;
    font-size: 1.3rem;
    line-height: 1.4;
}

.instant_profile_text,
.site_history .news_area_in {
    color: #d5d9e0;
    font-family: system-ui, "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 0.9375rem;
    line-height: 1.8;
}

.news_area.site_history h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid #688bb8;
}

.site_history .news_area_in {
    display: grid;
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid #252b35;
}

.site_history_date {
    color: #aab4c3;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.site_history_new {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0 0.45em;
    border: 1px solid #56749b;
    border-radius: 3px;
    color: #b9d3f5;
    font-size: 0.7rem;
    vertical-align: middle;
}
@media screen and (max-width: 1199px) {

    body {
        font-size: 16px;
    }

    #top_bg {
        width: 100%;
        background-repeat: no-repeat;
        background-image: url("../../img/top.png");
        background-size: contain;
    }
    .top_bg_in {
        padding: 5px;
    }
    .menu_top_area {
        width: auto;
    }
    .menu_top_btn {
        width: 33.3%;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .menu_area {
        width: 100%;
    }
    .menu_btn {
        font-size: 15px;
        background-color: transparent;
    }
    .news_area {
        width: 100%;
        font-size: 15px;
    }
    p.top_txt {
        width: 65%;
        font-size: 13px;
    }
    .ft {
        font-size: 16px;
    }
    .fd {
        font-size: 16px;
    }

    select {
        max-width: 100%;
    }
    input {
        max-width: 90%;
    }

    .header_logo {
        margin: 0 auto;
        padding: 10px 0px 10px;
        width: 70%;
    }

    div#contents h2 {
        margin: 0 0px 15px;
        font-size: 17px;
    }

    input[type="text"], input[type="tel"] {
        font-size: 13px;
        width: 100%;
    }

    .page_def {
        width: auto;
    }

    iframe[src*="youtube.com/embed/"],
    iframe[src*="youtube-nocookie.com/embed/"] {
        display: block;
        width: 100%;
        max-width: 560px;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
    }
}

p.top_txt {
    color: #d2d5dc;
    line-height: 1.7;
}

.menu_btn {
    box-sizing: border-box;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-weight: 500;
    line-height: 1.5;
}

@media screen and (max-width:640px) {

    body {
        font-size: 12px;
    }

    h1 {
        font-size: 21px;
    }
    .h1_sub {
        font-size: 60%;
    }
    h2 {
        width: auto;
        font-size: 18px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    h3 {
        font-size:16px;
    }

    p
     {
        line-height: 20px;
        margin-bottom: 10px;
    }
    p.top_txt {
        width: 55%;
    }
    .top_bg_in {
        padding: 10px;
    }

    .instant_profile {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
    }

    .ft {
        font-size: 14px;
    }
    .fd {
        font-size: 14px;
    }

    select {
        max-width: 95%;
    }
    input[type=text] {
        width: 90%;
    }
    .desc {
        font-size: 10px;
        display: inline-block;
    }
    .page_def_in {
        padding-left: 10px;
        padding-right: 10px;
    }
    .lesson_area_txt {
        font-size: 18px;
    }

    .menu_top_btn {
        width: 31.3%;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 2%;
    }
    .gakuhu_no_th {
        width: 25px;
    }
    .shityo_th {
        width: 50px;
    }
    .album_th {
        width: 35%;
    }
}
@media screen and (max-width: 600px) {
    .instant_profile {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .site_history .news_area_in {
        grid-template-columns: 5.8em minmax(0, 1fr);
    }
}

/* トップページ */
#top_bg .top_hero h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.3;
}

#top_bg .top_hero .h1_sub {
    display: block;
    margin-bottom: 6px;
    color: #bdc8d8;
    font-size: 0.875rem;
    font-weight: normal;
}

#top_bg .menu_area > .menu_btn {
    display: block;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid #303846;
    background: transparent;
    color: #f2f3f6;
    text-decoration: none;
}

#top_bg .menu_area > .menu_btn:hover,
#top_bg .menu_area > .menu_btn:focus-visible {
    color: #b9d3f5;
}

#top_bg .top_social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    font-size: 0.875rem;
}

#top_bg .top_social a,
#top_bg .top_news_archive a {
    color: #b9d3f5;
    text-underline-offset: 0.2em;
}

#top_bg .news_area > h2 {
    margin: 24px 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid #688bb8;
    background: transparent;
    font-size: 1.25rem;
}

#top_bg .top_news_archive {
    margin: 12px 0 0;
    font-size: 0.875rem;
    text-align: right;
}

#top_bg .instant_profile {
    box-sizing: border-box;
}

/* 下層ページ共通 */
.concert_page .page_def_in,
.contact_page .page_def_in,
.lesson_page .page_def_in,
.profile_page .page_def_in,
.trial_page .page_def_in,
.req_page .page_def_in {
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px) clamp(14px, 4vw, 32px);
}

/* 出演情報 */
.concert_page .page_def_in {
    max-width: 54rem;
}

#contents .concert_page .concert_page_title,
#contents .contact_page .contact_page_title,
#contents .lesson_page .lesson_page_title,
#contents .profile_page .profile_page_title,
#contents .trial_page .trial_page_title,
#contents .req_page .req_page_title {
    padding: 0 0 12px;
    border-bottom: 1px solid #a8bbd3;
    background: transparent;
    color: #0c2244;
}

#contents .concert_page .concert_page_title {
    margin: 0 0 24px;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.concert_page .concert_year + .concert_year {
    margin-top: 32px;
}

.concert_page .concert_year_title {
    margin: 0 0 12px;
    color: #334a66;
    font-size: 1rem;
}

.concert_page .concert_card {
    margin-bottom: 12px;
    padding: clamp(14px, 3vw, 24px);
    border: 1px solid #dce3ec;
    border-radius: 8px;
    background: #f8fafc;
}

.concert_page .concert_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    color: #334a66;
    font-size: 0.9375rem;
    font-weight: 700;
}

.concert_page .concert_status {
    padding: 2px 8px;
    border-radius: 4px;
    background: #e3edf9;
    color: #214e80;
    font-size: 0.75rem;
}

.concert_page .concert_status_past {
    background: #edf0f3;
    color: #56606c;
}

.concert_page .concert_title {
    margin: 8px 0 10px;
    color: #0c2244;
    font-size: clamp(1.125rem, 3vw, 1.375rem);
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.concert_page .concert_detail {
    font-family: system-ui, "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 0.9375rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.concert_page .concert_flyer {
    display: block;
    width: min(100%, 450px);
    max-width: 100%;
    height: auto;
    margin-top: 16px;
}
/* お問い合わせ */
.contact_page .page_def_in {
    max-width: 44rem;
    font-size: 1rem;
    line-height: 1.75;
}

#contents .contact_page .contact_page_title {
    margin: 0 0 20px;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.contact_page .contact_other {
    box-sizing: border-box;
    max-width: 470px;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #dce3ec;
    border-radius: 6px;
    background: #f4f7fb;
}

.contact_page .contact_other img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 6px;
}

.contact_page .form_box {
    margin-top: 28px;
}

.contact_page .ft {
    padding: 12px 0 4px;
    border-top: 1px solid #dce3ec;
    background: transparent;
    color: #0c2244;
    font-size: 1rem;
}

.contact_page .fd {
    padding: 4px 0 16px;
    font-size: 0.9375rem;
}

.contact_page .fd input[type="text"],
.contact_page .fd textarea {
    box-sizing: border-box;
    max-width: 100%;
    margin: 4px 0;
    padding: 9px 10px;
    border: 1px solid #9caec3;
    border-radius: 5px;
    background: #fff;
    color: #1c1c1c;
    font: inherit;
    font-size: 16px;
}

.contact_page .fd input[type="text"] {
    display: block;
    width: min(100%, 25rem);
    min-height: 44px;
}

.contact_page .fd textarea {
    display: block;
    min-height: 8rem;
    resize: vertical;
}

.contact_page .desc {
    color: #556274;
    font-size: 0.8125rem;
}

.contact_page .btn_box {
    padding-top: 16px;
    border-top: 1px solid #dce3ec;
    color: #556274;
    font-size: 0.875rem;
}

.contact_page .btn_box .btn {
    box-sizing: border-box;
    width: min(100%, 18rem);
    min-width: 0;
    max-width: 100%;
    margin: 16px auto 0;
    padding: 12px 16px;
    border: 1px solid #0c2244;
    border-radius: 6px;
    background: #0c2244;
    color: #fff;
    font-size: 1rem;
}

.contact_page input:focus-visible,
.contact_page textarea:focus-visible {
    outline: 2px solid #416da3;
    outline-offset: 2px;
}
/* お問い合わせ確認画面 */
.contact_confirm_page .fd {
    overflow-wrap: anywhere;
}

.contact_confirm_page .btn_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.contact_confirm_page .btn_box .btn {
    width: auto;
    margin: 0;
}

.contact_confirm_page .btn_box .btn_back {
    border-color: #9caec3;
    background: #fff;
    color: #0c2244;
}

@media screen and (max-width: 480px) {
    .contact_confirm_page .btn_box .btn {
        width: 100%;
    }
}

/* お稽古案内 */
.lesson_page .page_def_in {
    max-width: 54rem;
}

#contents .lesson_page .lesson_page_title {
    margin: 0 0 20px;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.lesson_page .lesson_nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.lesson_page .lesson_nav a {
    padding: 8px 12px;
    border: 1px solid #dce3ec;
    border-radius: 5px;
    background: #f4f7fb;
    color: #0c2244;
    font-size: 0.875rem;
    line-height: 1.5;
    text-underline-offset: 0.2em;
}

.lesson_page .lesson_section_title {
    margin: 0 0 16px;
    padding: 10px 0;
    border-bottom: 1px solid #dce3ec;
    color: #0c2244;
    font-size: 1.25rem;
    scroll-margin-top: 16px;
}

.lesson_page .lesson_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    align-items: start;
    gap: 24px;
}

.lesson_page .lesson_left,
.lesson_page .lesson_right2 {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.lesson_page .lesson_left p {
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 1.75;
}

.lesson_page .lesson_left p.lesson_left_border {
    margin-bottom: 4px;
    border: 0;
    color: #334a66;
    font-size: 0.875rem;
    font-weight: 700;
}

.lesson_page .lesson_area_txt {
    font-size: 1.0625rem;
    font-weight: 700;
}

.lesson_page .lesson_right2 img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
    border: 0;
}

.lesson_page .lesson_right2 figcaption {
    margin-top: 6px;
    color: #556274;
    font-size: 0.8125rem;
    text-align: center;
}

.lesson_page .lesson_contact {
    margin: 16px 0 32px;
}

.lesson_page .lesson_contact .btn {
    box-sizing: border-box;
    width: min(100%, 18rem);
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #0c2244;
    border-radius: 6px;
    background: #0c2244;
    color: #fff;
    font-size: 1rem;
    white-space: normal;
}

@media screen and (max-width: 640px) {
    .lesson_page .lesson_layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .lesson_page .lesson_right2 {
        max-width: 20rem;
    }
}

/* プロフィール */
.profile_page .page_def_in {
    max-width: 54rem;
}

#contents .profile_page .profile_page_title {
    margin: 0 0 24px;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.profile_page .profile_layout {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 4vw, 36px);
}

.profile_page .profile_portrait {
    width: 100%;
    max-width: 15rem;
    margin: 0;
}

.profile_page .profile_portrait img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.profile_page .profile_portrait figcaption {
    margin-top: 8px;
    line-height: 1.6;
}

.profile_page .profile_role {
    display: block;
    color: #334a66;
    font-size: 0.875rem;
}

.profile_page .profile_credit,
.profile_page .profile_reading {
    display: block;
    color: #556274;
    font-size: 0.8125rem;
    font-weight: normal;
}

.profile_page .profile_name {
    margin: 0 0 14px;
    color: #0c2244;
    font-size: clamp(1.4rem, 4vw, 1.85rem);
    line-height: 1.4;
}

.profile_page .profile_bio p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.profile_page .profile_short {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #dce3ec;
}

.profile_page .profile_short h4 {
    margin: 0 0 10px;
    color: #0c2244;
    font-size: 1.125rem;
}

.profile_page .profile_short h4 span {
    color: #556274;
    font-size: 0.8125rem;
    font-weight: normal;
}

@media screen and (max-width: 640px) {
    .profile_page .profile_layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 試聴サービス */
.trial_page .page_def_in {
    max-width: 64rem;
}

#contents .trial_page .trial_page_title {
    margin: 0 0 16px;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.trial_page .trial_purchase {
    margin: 0 0 16px;
    font-size: 0.9375rem;
    text-align: right;
}

.trial_page .trial_scroll_hint {
    display: none;
    margin: 0 0 6px;
    color: #556274;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.trial_page .trial_table_scroll {
    overflow-x: auto;
}

.trial_page .trial_table_scroll:focus-visible {
    outline: 2px solid #416da3;
    outline-offset: 2px;
}

.trial_page .trial_table {
    width: 100%;
    min-width: 36rem;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

.trial_page .trial_table th,
.trial_page .trial_table td {
    padding: 10px;
    border: 1px solid #dce3ec;
    line-height: 1.6;
}

.trial_page .trial_table th {
    background: #0c2244;
    font-size: 0.875rem;
}

.trial_page .trial_table td {
    font-size: 0.9375rem;
}

.trial_page .trial_table .gakuhu_no_th,
.trial_page .trial_table .shityo_th {
    width: 1%;
    white-space: nowrap;
}

.trial_page .trial_table .album_th {
    width: 38%;
}

.trial_page .trial_table .desc {
    color: #556274;
    font-size: 0.8125rem;
}

.trial_page .trial_table .trial_album {
    vertical-align: top;
    background: #f4f7fb;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.trial_page .trial_album_cover {
    display: block;
    width: min(100%, 10rem);
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.trial_page .trial_album_label {
    margin-bottom: 4px;
    color: #0c2244;
    font-weight: 700;
}

.trial_page .trial_table a.trial_play {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 5px;
    background: #0c2244;
    color: #fff;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.trial_page .trial_table a.trial_play:hover,
.trial_page .trial_table a.trial_play:focus-visible {
    background: #254a75;
}

@media screen and (max-width: 640px) {
    .trial_page .trial_scroll_hint {
        display: block;
    }
}

/* 楽譜・アルバムの購入 */
.req_page .page_def_in {
    max-width: 68rem;
}

#contents .req_page .req_page_title {
    margin: 0 0 16px;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.4;
}

.req_page .req_notice {
    padding: 12px 14px;
    border-left: 3px solid #ac853d;
    background: #faf5ea;
    color: #59451f;
    font-size: 0.875rem;
    line-height: 1.7;
}

.req_page .req_section_title {
    margin: 24px 0 10px;
    color: #0c2244;
    font-size: 1.125rem;
}

.req_page .req_table_scroll {
    overflow-x: auto;
    border: 1px solid #dce3ec;
}

.req_page .req_table_scroll:focus-visible {
    outline: 2px solid #416da3;
    outline-offset: 2px;
}

.req_page .req_table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.req_page .req_music_table {
    min-width: 46rem;
}

.req_page .req_album_table {
    min-width: 32rem;
}

.req_page .req_table th,
.req_page .req_table td {
    padding: 10px;
    border: 0;
    border-bottom: 1px solid #dce3ec;
    font-size: 0.875rem;
    line-height: 1.6;
}

.req_page .req_table th {
    background: #0c2244;
    color: #fff;
    white-space: nowrap;
}

.req_page .req_table td {
    background: #fff;
}

.req_page .req_table tr:nth-child(even) td {
    background: #f4f7fb;
}

.req_page .req_table td:first-child,
.req_page .req_table td:nth-last-child(2) {
    white-space: nowrap;
}

.req_page .req_table th:last-child,
.req_page .req_table td:last-child {
    position: sticky;
    right: 0;
    width: 3.5rem;
    border-left: 1px solid #a8bbd3;
}

.req_page .req_table input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #0c2244;
    cursor: pointer;
}

.req_page .btn_box {
    color: #556274;
    font-size: 0.875rem;
    line-height: 1.7;
}

.req_page .btn_box .btn {
    box-sizing: border-box;
    width: min(100%, 18rem);
    min-width: 0;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 12px 16px;
    border: 1px solid #0c2244;
    border-radius: 6px;
    background: #0c2244;
    color: #fff;
    font-size: 1rem;
}

/* 注文数・お申込者情報の入力 */
.req_input_page .req_table td:last-child {
    width: 5rem;
}

.req_input_page .req_table select {
    box-sizing: border-box;
    width: 4rem;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 4px;
    border: 1px solid #9caec3;
    border-radius: 5px;
    background: #fff;
    color: #0c2244;
    font-size: 16px;
}

.req_input_page .req_input_section_title {
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #a8bbd3;
    color: #0c2244;
    font-size: 1.25rem;
}

.req_input_page .ft,
.req_confirm_page .ft {
    padding: 12px 0 4px;
    border-top: 1px solid #dce3ec;
    background: transparent;
    color: #0c2244;
    font-size: 1rem;
}

.req_input_page .fd {
    padding: 4px 0 16px;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.req_input_page .fd input[type="text"],
.req_input_page .fd input[type="tel"],
.req_input_page .fd textarea {
    display: block;
    box-sizing: border-box;
    width: min(100%, 30rem);
    max-width: 100%;
    min-height: 44px;
    margin: 4px 0;
    padding: 9px 10px;
    border: 1px solid #9caec3;
    border-radius: 5px;
    background: #fff;
    color: #1c1c1c;
    font: inherit;
    font-size: 16px;
}

.req_input_page .fd #zip_code,
.req_input_page .fd #pref {
    width: min(100%, 12rem);
}

.req_input_page .fd textarea {
    min-height: 8rem;
    resize: vertical;
}

.req_input_page .desc {
    color: #556274;
    font-size: 0.8125rem;
}

.req_input_page input:focus-visible,
.req_input_page select:focus-visible,
.req_input_page textarea:focus-visible {
    outline: 2px solid #416da3;
    outline-offset: 2px;
}

.req_input_page .btn_box .btn_back {
    border-color: #9caec3;
    background: #fff;
    color: #0c2244;
}

/* 注文内容の確認 */
.req_confirm_page .req_confirm_total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #dce3ec;
    border-radius: 6px;
    background: #f4f7fb;
    color: #0c2244;
    font-size: 1rem;
}

.req_confirm_page .req_confirm_total strong {
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
}

.req_confirm_page .req_confirm_total small {
    flex-basis: 100%;
    color: #556274;
    font-size: 0.8125rem;
}

.req_confirm_page .fd {
    padding: 4px 0 14px;
    font-size: 0.9375rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.req_confirm_page form + form .btn_box {
    margin-top: 0;
    padding-top: 0;
}

.req_confirm_page .btn_box .btn_back {
    border-color: #9caec3;
    background: #fff;
    color: #0c2244;
}