.content-viewer {
    margin: 20px auto;

    text-align: center;
}

.content-viewer .link {
    display: inline-block;
    padding: 20px 10px;
    background-color: #fb177c;
    color: #fff;
    font-weight: bold;
    width: 95%;
    border-radius: 8px;
    box-shadow: 5px 5px 5px #ddd;
    font-size: 1.8rem;
}

.head_title_wrap {

    padding: 5px 20px;

    background-color: #dfe1e5;
}

.tab-1 {
    display: flex;
    flex-wrap: wrap;
    max-width: 95%;
    margin: 0px auto;
}

.tab-1>label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: 25px 5px;

    border-radius: 0;

    background-color: #fff;
    text-align: center;
    cursor: pointer;
    margin-left: 15px;
    margin-right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 5px 0px 5px #ddd;
}

.tab-1>label:hover {
    opacity: .7;
}

.tab-1 input {
    display: none;
}

.tab-1>div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
    box-shadow: 5px 5px 5px #ddd;
}

.tab-1>div .link {

    display: block;
    width: 98%;
    margin: 0px auto;
    border-radius: 5px;
    background-color: #fff;

}

.tab-1>div .not_link .item_link {

    display: inline-block;
    width: 97%;
    margin: 0px auto;

    margin-bottom: 10px;
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    background-color: #03a8ff;
}

.tab-1>div.content-subscriber .item_link {


    background-color: #6f9d2f;
}

.tab-1>div .item_link:hover {

    opacity: .7;

}

.tab-1>div .link:hover {

    opacity: .9;

}

.tab-1>div .link.not_link:hover {

    opacity: unset;

}

.tab-1>div .link:nth-child(n+2) {

    margin-top: 20px;
}

.tab-1>div .link .link_wrap {


    padding: 15px 10px;

}

.tab-1>div .link .link_wrap .link-title {


    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 10px;

}

.tab-1>div .link .link_wrap .link_item_grid_wrap .link-img {


    padding: 5px;


}

.tab-1>div .link .link_wrap .link_item_grid_wrap .link-img img {

    max-width: 85%;
    max-height: 90px;
}

.tab-1>div .link .link_wrap .link_item_grid_wrap .link-detail {


    padding: 5px;


}

.tab-1>div .link .link_wrap .link-detail .item-link_detail {


    font-size: 2rem;
    font-weight: bold;
    text-align: left;
}

.tab-1>div .link .link_wrap .annotation_text_wrap {
    text-align: left;

}

.tab-1>div .link .link_wrap .annotation_text {


    font-size: 1.6rem;
    font-weight: normal;

}

.tab-1>div.content-non_subscriber {

    background-color: #03a8ff;

}

.tab-1>div.content-non_subscriber .link .link_wrap {

    color: #03a8ff;

}

.tab-1>div.content-subscriber .link .link_wrap {

    color: #6f9d2f;

}

.tab-1>div.content-subscriber {

    background-color: #6f9d2f;
}

.tab-1 label:has(:checked) {
    background-color: #03a8ff;
    color: #fff;
}

.tab-1 label.tab-non_subscriber:has(:checked) {
    background-color: #03a8ff;


}

.tab-1 label.tab-subscriber:has(:checked) {
    background-color: #6f9d2f;

}

.tab-1 label:has(:checked)+div {
    display: block;
}




html:has(dialog[open]) {
    overflow: hidden;
}

#contents_wrap {

    background-color: #f8f8f8;

}

#contents_wrap * {

    box-sizing: border-box;
}

#header-menu,
#sp-menu-show-button {

    display: none !important;

}

#contents_wrap #contents {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 30px;
    padding-bottom: 80px;

}

#apply_contents a {

    text-decoration: none;
    display: inline-block;
}

.apply_group {
    width: 100%;
    text-align: center;


}

.apply_group-title {
    margin: 10px auto 10px auto;
    /* display: inline-block; */
    padding: 15px 20px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 2.4rem;
}

.caption_text {
    text-align: left;
    padding: 2px 5px;
}

.apply_group-item {
    margin: 10px auto 20px auto;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    width: 90%;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;

}

a.apply_group-item {
    border: 5px solid #fff;
    position: relative;
}

a.apply_group-item .link-img {
    text-align: center;

}

a.apply_group-item .link-img img {
    max-width: 80%;
    max-height: 150px;
}

a.apply_group-item:hover {
    opacity: .7;

}

.apply_group-item_title {
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    padding: 10px 3px;

}

.apply_group-item_title span.annotation {
    font-size: 1.6rem;

}

.apply_group-item.item1 {

    box-shadow: 5px 5px 5px #ddd;

}

.apply_group-item.item2 {

    box-shadow: 5px 5px 5px #ddd;

}

.apply_group-item ul li {
    font-weight: bold;

}

.apply_group-item ul li span.annotation {
    font-size: 1.4rem;
    font-weight: normal;
}

.apply_group-item-image_box {

    position: absolute;
    bottom: 10px;
    /*追記*/
    right: 10px;
    /*追記*/
}

.apply_group-item-image {
    max-height: 30px;
    margin: 3px;

}

.apply_group-item-icon {
    font-size: 30px;
    color: #828281;
    margin-left: 5px;
}

.retun_link {
    display: inline-block;
    padding: 5px;
    margin: 2px 10px 2px auto;

}

.etc_display_wrap {
    padding: 15px 5px;
    margin-bottom: 15px;
    text-align: center;
}

.etc_display_wrap:hover {
    cursor: pointer;
}

.etc_display_wrap.display_none {
    display: none;
}

.apply_button_wrap {
    position: fixed;
    /* 最初は画面の下部に固定 */
    bottom: 0;
    left: 0;
    width: 100%;

    color: white;
    text-align: center;

    transition: all 0.3s;
    /* スムーズな移動のためのトランジション */
    border-bottom: 2px solid #e6e6df;
    border-top: 2px solid #e6e6df;
    background-color: #f8f8f8;
    padding-bottom: 40px;
}

.parts_home_delivery_desired {
    padding: 20px 10px;


}

.parts_home_delivery_desired .button_home_delivery_desired {
    display: inline-block;
    padding: 15px 20px;
    margin: 5px auto;
    font-weight: bold;
    color: #fff;
    border-radius: 5px;
    background-color: #6f9d2f;
    text-decoration: none;
}

.parts_home_delivery_desired .button_home_delivery_desired:hover {
    opacity: .7;
}

.stick {
    position: sticky;
    bottom: 0;
}

/**************デジタル****************/
.table_wrap {
    padding: 5px;
    background-color: #fff;
    border-radius: 10px;
    margin: 5px;
}

.table_wrap .viewer_top_img {

    padding: 10px 0px;

}

.table_wrap .viewer_top_img img {

    max-width: 90%;
    max-height: 150px;
}

#plan_shimen_viewer {
    width: 80%;
    margin: 10px auto;
}

.plan_shimen_viewer .item.plan_shimen_viewer .viewer_item {
    padding: 2px 20px;
    color: #aaa;
    font-weight: bold;
}

.plan_shimen_viewer .item.plan_shimen_viewer .viewer_item.title {
    padding: 10px 10px 2px 10px;
    color: #535353;
}

.plan_shimen_viewer .item.plan_shimen_viewer.selected {
    background-color: #f8f8f8;

}

.plan_shimen_viewer .item.plan_shimen_viewer.selected .viewer_item {

    color: #535353;
}

.plan_shimen_viewer .item.plan_shimen_viewer .selected_wrap {
    display: none;

}

.plan_shimen_viewer .item.plan_shimen_viewer.selected .selected_wrap {
    display: block;

}

.table_wrap #table-mns_digital_plans {
    width: 99%;
    margin: 20px auto;
}

.table_wrap #table-mns_digital_plans td {
    width: 50%;
    vertical-align: bottom;
}

.table_wrap .table-mns_digital_plans_insubscription td {

    width: 33% !important;

}

tbody.etc_item {
    display: none;
}

tbody.etc_item.table_row_group {
    display: table-row-group;
}

/* 選択中のプランの表示*/
.selected_wrap {
    vertical-align: bottom;
}

.selected_wrap .seleted_text {
    display: none;
}

.selected_wrap .balloon {
    display: none;
}

.selected_wrap.selected .balloon {
    position: relative;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    background-color: #8193c7;
    text-align: center;
    font-size: 1.4rem;

    line-height: 1.5;
    color: #fff;
}

.selected_wrap.plan_basic.selected .balloon {
    background-color: #e0716d;
}


.selected_wrap .balloon::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    border-style: solid;
    border-width: 20px 10px 0 10px;
    border-color: #8193c7 transparent transparent;
    translate: -50% 100%;
    color: #fff;
}

.selected_wrap.plan_basic .balloon::after {

    border-color: #e0716d transparent transparent;
}

/*　ヘッダー */
.header_info {
    font-size: 1.8rem;
}

.table_wrap .header-item {
    background-color: #e6e6df;
    padding: 10px;
    cursor: pointer;
    font-size: 1.6rem;
    border-radius: 10px 10px 0px 0px;

}

.table_wrap .selected .header-item {
    background-color: #8193c7;
    padding: 20px 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
}

.table_wrap .plan_basic.selected .header-item {
    background-color: #e0716d;

}

.header-item .text_wrap .appeal {
    font-size: 1.2rem;
    color: #535353;
    display: inline-block;
    padding: 2px 10px;
    background-color: #fff;
    border-radius: 10px;
}

.selected .header-item .text_wrap .appeal {
    color: #8193c7;
}

.plan_basic.selected .header-item .text_wrap .appeal {
    color: #e0716d;
}

/*項目*/
.table_wrap .item {
    border-bottom: 1px solid #e6e6df;
}

.table_wrap .item .item_wrap {

    padding: 35px 10px 20px 10px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #aaa;

}

.table_wrap .item.selected .item_wrap {
    background-color: #f8f8f8;
    color: #535353;

}

/* ラジオボタンのスタイル */
.radio-button {
    width: 22px;
    height: 22px;
    border: 5px solid #fff;
    /* 外枠の白い線 */
    background-color: #fff;
    /* 背景色（中央の色） */
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    /* box-shadow: 0 0 0 2px #000; 外側の黒い境界線 */
    transition: transform 0.3s, box-shadow 0.3s;
}

/* ラジオボタンが選択されている状態 */
.selected .radio-button {
    transform: scale(1.2);
    /* 選択時に少し大きくする */
    /* box-shadow: 0 0 0 4px #007bff, 0 0 0 6px #fff; 選択時の追加エフェクト */
    background-color: #8193c7;
    /* 背景色（中央の色） */

}

.plan_basic.selected .radio-button {
    transform: scale(1.2);
    /* 選択時に少し大きくする */
    /* box-shadow: 0 0 0 4px #007bff, 0 0 0 6px #fff; 選択時の追加エフェクト */
    background-color: #e0716d;
    /* 背景色（中央の色） */

}

#table-mns_digital_plans tr {
    position: sticky;
}

#table-mns_digital_plans th.heading_item {

    position: absolute;
    left: 6px;
    top: 8px;
    font-size: 1.4rem;
    color: #5a5a53;
    z-index: 100;

}



.button_wrap_digital {
    padding: 20px 0px;
    text-align: center;

    display: none;
}

.button_wrap_digital.selected {

    display: block;
}

.button_wrap_digital .button_apply {
    width: 290px;
    padding: 10px 0px;
    display: inline-block;
    background-color: #535353;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.color_yellow {
    color: lemonchiffon;

}

.minamipass_dialog {

    width: 97%;
    border: none;

    padding: 30px 10px;
    border-radius: 10px;
    border: 1px solid #a6a6c7;
    background-color: #f0f0ff;
}

.dialog_title {
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #a6a6c7;
}

.minamipass_dialog_wrap {
    text-align: center;
}

.button_wrap-dialog {
    text-align: center;
}

.button-close_dialog {
    width: 100px;
    padding: 10px 5px;
    margin: 20px auto 10px auto;

    font-size: 1.6rem;
    border: 1px solid #aaa;
    border-radius: 5px;
}

@media print,
screen and (min-width: 745px) {
    .content-viewer .link {

        width: 60%;
        margin-left: auto;
        margin-right: auto;
        font-size: 2rem;
    }

    .tab-1 {
        display: flex;
        flex-wrap: wrap;
        width: 60%;
        margin-left: auto;
        margin-right: auto;

    }

    .tab-1>div .not_link .item_link {

        width: 48%;

        margin-right: 10px;

    }

    .tab-1>div .link .link_wrap .link-title {
        font-size: 2.4rem;
    }

    .tab-1>div .link .link_wrap .link_item_grid_wrap.table {
        width: 100%;
        display: table;
    }

    .tab-1>div .link .link_wrap .link_item_grid_wrap.table .tr {
        display: table-row;
    }

    .tab-1>div .link .link_wrap .link_item_grid_wrap.table .tr .table_cell {
        display: table-cell;
        vertical-align: middle;
    }

    .tab-1>div .link .link_wrap .link_item_grid_wrap.table .tr .table_cell.left {
        width: 50%;
    }

    .tab-1>div .link .link_wrap .link_item_grid_wrap .link-img {


        display: block;
    }

    .tab-1>div .link .link_wrap .link_item_grid_wrap .link-img img {}

    .tab-1>div .link .link_wrap .link_item_grid_wrap .link-detail {

        display: block;
    }

    .apply_group {
        text-align: left;


    }

    .apply_group-item {
        margin: 10px 15px 20px auto;
        width: 30%;


    }

    .apply_group-title {
        text-align: left;

    }

    .apply_group-item.item1 {}

    .apply_group-item.item2 {

        width: 23%;

    }

    .apply_group-item-image {
        max-height: 40px;
        margin: 3px;

    }

    .apply_group-item-icon {
        font-size: 40px;
        color: #828281;
        margin-left: 5px;
    }

    /****デジタル****/
    .form_item-digital .table_wrap {
        margin: 20px;
    }

    .form_item-digital .table_wrap #table-mns_digital_plans {
        width: 90%;
        margin: 20px auto;
    }

    .table_wrap #table-mns_digital_plans {
        width: 80%;

    }

    #plan_shimen_viewer {
        width: 60%;
        margin: 10px auto;
    }

    .radio-button {
        width: 30px;
        height: 30px;

    }

    #table-mns_digital_plans th.heading_item {

        left: 12px;
        font-size: 1.6rem;


    }

    .table_wrap .selected .header-item {

        font-size: 1.8rem;
    }

    /* ラジオボタンのスタイル */
    .radio-button {
        width: 28px;
        height: 28px;
    }

    .table_wrap .selected .header-item {

        font-size: 1.8rem;
    }

    .table_wrap .plan_basic.selected .header-item {
        background-color: #e0716d;

    }

    .header-item .text_wrap .appeal {
        font-size: 1.4rem;
    }
}