@charset "UTF-8";

/* experience
--------------------------------*/
#experience {
    padding: 0;
}

.txt_block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.blue_line1 {
    border-bottom: 1px solid #86A5AF;
}

.blue_line2 {
    border-bottom: 2px solid #86A5AF;
}

.purple_line {
    border-bottom: 2px solid #78629B;
}

.bluegreen {
    color: #62809B;
}

.purplepink {
    color: #BC74B6;
}

.purple2 {
    color: #78629B;
}

#experience1 {
    width: 100%;
    aspect-ratio: 72 / 25;
    position: relative;
}

#experience1 img {
    width: 100%;
    height: 100%;
}

#breadcrumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#experience2 {
    padding: 15rem 0;
}

#experience2 .txt_block {
    font-size: 16px;
    line-height: 40px;
}

#experience3 .ttl_en {
    font-size: 3.2rem;
}

#experience3 .ttl_ja {
    font-size: 2rem;
}

#experience3 .whats {
    display: grid;
    justify-content: center;
    grid-template-columns: 457px 434px 413px;
    padding-bottom: 7rem;
}

#experience3 .whats .num {
    font-size: 3rem;
    line-height: normal;
    text-align: center;
    margin-bottom: 2.2rem;
}

#experience3 .txt_block {
    gap: 1.5rem;
}

#experience3 h2 {
    font-size: 2rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

#experience3 .txt {
    font-size: 1.4rem;
    text-align: center;
}

#experience3 .whats1 {
    height: 400px;
    background-image: url(../img/experience/whats1_pc.png);
    background-size: cover;
    margin-top: -5px;
    margin-right: -30px;
}

#experience3 .whats1 .num {
    margin-top: 8.5rem;
    margin-left: 5rem;
}

#experience3 .whats1 .txt_block {
    margin-left: 5rem;
}

#experience3 .whats2 {
    height: 420px;
    background-image: url(../img/experience/whats2_pc.png);
    margin-top: 45px;
    background-size: cover;
}

#experience3 .whats2 .num {
    margin-top: 8.5rem;
}

#experience3 .whats3 {
    height: 444px;
    background-image: url(../img/experience/whats3_pc.png);
    background-size: cover;
    margin-top: -43px;
    margin-left: -50px;
}

#experience3 .whats3 .num {
    margin-top: 12.5rem;
}

#experience4 {
    padding: 12rem 0;
    background: url(../img/experience/choice_bg.jpg);
    background-size: cover;
}

#experience4 .wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#experience4 .ttl_en {
    font-size: 2.8rem;
}

#experience4 .ttl_ja {
    margin-top: 2rem;
    font-size: 2rem;
}

#experience4 .choice_table_block {
    position: relative;
    width: 930px;
    margin-top: 3rem;
}

#experience4 .choice_table_bg {
    width: 100%;
}

#experience4 .choice_table_bg th {
    width: 33%;
    height: 95px;
    text-align: center;
    border-bottom: 2px solid #F0E2F7;
    border-left: 2px solid #F0E2F7;
    border-right: 2px solid #F0E2F7;
    font-size: 2rem;
    line-height: 3rem;
}

#experience4 .choice_table_bg td {
    height: 410px;
    background-color: white;
    border-left: 2px solid #F0E2F7;
    border-right: 2px solid #F0E2F7;
}

#experience4 .choice_table_bg tr:nth-child(1) th:nth-child(1) {
    background-color: #8BAECF;
    color: white;
    border-radius: 3rem 0 0 0;
}

#experience4 .choice_table_bg tr:nth-child(1) th:nth-child(2) {
    background-color: #D7A3BB;
    color: white;
}

#experience4 .choice_table_bg tr:nth-child(1) th:nth-child(3) {
    background-color: #B09EC8;
    color: white;
    border-radius: 0 3rem 0 0;
}

#experience4 .choice_table_bg tr:nth-child(2) td:nth-child(1) {
    border-radius: 0 0 0 3rem;
}

#experience4 .choice_table_bg tr:nth-child(2) td:nth-child(3) {
    border-radius: 0 0 3rem 0;
}

#experience4 .choice_table {
    position: absolute;
    top: 105px;
    left: 0;
    width: 100%;
}

#experience4 .choice_table th {
    width: 16.6%;
}

#experience4 .choice_table td a {
    height: 66px;
    display: block;
    margin: 0.5rem 1rem;
    text-align: center;
    font-size: 1.8rem;
    border-radius: 2rem;
    position: relative;
    line-height: normal;
    align-content: center;
}

#experience4 .choice_table td a svg {
    position: absolute;
    top: 2.6rem;
    right: 0.5rem;
}

#experience4 .choice_table .lineup1 {
    transition: .3s;
    background-color: #D9E9F6;
}

#experience4 .choice_table .lineup1:hover {
    background-color: #C3DAEB;
}

#experience4 .choice_table .lineup2 {
    transition: .3s;
    background-color: #D9E9F6;
}

#experience4 .choice_table .lineup2:hover {
    background-color: #C3DAEB;
}

#experience4 .choice_table .lineup3 {
    transition: .3s;
    background-color: #F4E7ED;
}

#experience4 .choice_table .lineup3:hover {
    background-color: #E4CDDA;
}

#experience4 .choice_table .lineup4 {
    transition: .3s;
    background-color: #F4E7ED;
}

#experience4 .choice_table .lineup4:hover {
    background-color: #E4CDDA;
}

#experience4 .choice_table .lineup5 {
    transition: .3s;
    background-color: #EBE4F4;
}

#experience4 .choice_table .lineup5:hover {
    background-color: #D3CAE1;
}

#experience4 .choice_table .lineup6 {
    transition: .3s;
    background-color: #EBE4F4;
}

#experience4 .choice_table .lineup6:hover {
    background-color: #D3CAE1;
}

.l12 {
    color: #62809B;
}

.l34 {
    color: #BC74B6;
}

.l56 {
    color: #78629B;
}

.l12_bg {
    background-color: #62809B;
}

.l34_bg {
    background-color: #BC74B6;
}

.l56_bg {
    background-color: #78629B;
}

#experience5 {
    padding: 8rem 0;
}

#experience5 .ttl_en {
    font-size: 26px;
    line-height: normal;
}

#experience5 .ttl_ja {
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

#experience5 .ttl_ja svg {
    width: 4rem;
}

#experience5 .description {
    font-size: 14px;
    margin: 3rem 0;
}

#experience5 .lineup_list {
    width: 1020px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 4rem auto;
    gap: 2rem;
}

#experience5 .lineup_list li {
    height: 180px;
    width: 155px;
}

#experience5 .lineup_list img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: .3s ease;
    margin-bottom: 1rem;
}

#experience5 .lineup_list .img_wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 153.3px;
    height: 153.3px;
    margin-top: 25px;
    object-fit: contain;
    object-position: center;
    transition: .3s ease;
    margin-bottom: 1rem;
    border-radius: 50%;
    overflow: hidden;
}

#experience5 .lineup_list .img_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: .3s ease;
}

#experience5 .lineup_list a .default {
    z-index: 2;
}

#experience5 .lineup_list a .bg {
    z-index: 1;
}

#experience5 .lineup_list a:hover .default {
    opacity: 1;
    transform: scale(1.1);
}

#experience5 .lineup_list a:hover .bg {
    opacity: 1;
}

#experience5 .lineup_block {
    padding-top: 4rem;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

#experience5 .lineup_block.rev {
    flex-direction: row-reverse;
}

#experience5 .lineup_block .txt_block {
    z-index: 2;
}

#experience5 .lineup_block .img_block {
    position: relative;
    z-index: 1;
}

#experience5 .lineup_block .img_block img {
    width: 100%;
}

#experience5 .lineup_block .img_block_caption {
    position: absolute;
    display: flex;
    gap: 3px;
}

#experience5 .lineup_block .img_block_caption div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 8rem;
    height: 8rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    color: white;
}

#experience5 .lineup_block .img_block_caption .cap_time {
    font-size: 1.3rem;
    line-height: normal;
}

#experience5 .lineup_block .img_block_caption .time {
    font-size: 2.6rem;
    line-height: normal;
}

#experience5 .lineup_block .img_block_caption .cap_rsv {
    font-size: 1.7rem;
    line-height: normal;
}

#experience5 .lineupno {
    font-size: 3.5rem;
    margin-top: 3rem;
}

#experience5 #lineup1.lineup_block {
    width: 805px;
}

#experience5 #lineup1 .img_block.pc {
    width: 612px;
    height: 436px;
    margin-left: -107px;
}

#experience5 #lineup1 .img_block_caption {
    right: 80px;
    bottom: 0;
}

#experience5 #lineup2.lineup_block {
    width: 780px;
}

#experience5 #lineup2 .img_block.pc {
    width: 527px;
    height: 434px;
    margin-right: -55px;
}

#experience5 #lineup2 .img_block_caption {
    right: auto;
    left: 15px;
    bottom: 30px;
}

#experience5 #lineup3.lineup_block {
    width: 835px;
}

#experience5 #lineup3 .img_block.pc {
    width: 545px;
    height: 486px;
    margin-left: -30px;
}

#experience5 #lineup3 .img_block_caption {
    right: 70px;
    bottom: 55px;
}

#experience5 #lineup4.lineup_block {
    width: 776px;
}

#experience5 #lineup4 .img_block.pc {
    width: 548px;
    height: 446px;
    margin-right: -65px;
}

#experience5 #lineup4 .img_block_caption {
    right: auto;
    left: 12px;
    bottom: 25px;
}

#experience5 #lineup5.lineup_block {
    width: 783px;
    margin-bottom: 8rem;
}

#experience5 #lineup5 .img_block.pc {
    width: 550px;
    height: 463px;
    margin-left: -67px;
    margin-top: -20px;
}

#experience5 #lineup5 .img_block_caption {
    right: 20px;
    bottom: 20px;
}

#experience5 #lineup6 .lineup_block {
    width: 776px;
}

#experience5 #lineup6 .img_block.pc {
    width: 531px;
    height: 418px;
    margin-right: -75px;
}

#experience5 #lineup6 .img_block_caption {
    right: auto;
    left: 12px;
    bottom: 25px;
}

#experience5 #lineup4 .lineupno {
    margin-top: 0;
}

#experience5 #lineup5 .lineupno {
    margin-top: 0;
}

#experience5 #lineup6 .lineupno {
    margin-top: 0;
}

#experience5 .flow_block {
    width: 30rem;
    margin-bottom: 7px;
}

#experience5 .flow_block summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-size: 2.2rem;
    cursor: pointer;
    list-style: none;
}

#experience5 #lineup1 .flow_block summary {
    border-bottom: 2px solid #62809B;
}

#experience5 #lineup2 .flow_block summary {
    border-bottom: 2px solid #62809B;
}

#experience5 #lineup3 .flow_block summary {
    border-bottom: 2px solid #BC74B6;
}

#experience5 #lineup4 .flow_block summary {
    border-bottom: 2px solid #BC74B6;
}

#experience5 #lineup5 .flow_block summary {
    border-bottom: 2px solid #78629B;
}

#experience5 #lineup6 .flow_block summary {
    border-bottom: 2px solid #78629B;
}

#experience5 .flow_en {
    font-size: 2.2rem;
}

#experience5 .flow_ja {
    font-size: 1.2rem;
    margin-right: 12rem;
}

#experience5 .flow_block summary::-webkit-details-marker {
    display: none;
}

#experience5 .flow_block summary svg {
    transition: transform 0.3s ease;
}

#experience5 .flow_block[open] summary svg {
    transform: rotate(180deg);
}

#experience5 .flow_block div {
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#experience5 .flow_block[open] div {
    transform: none;
    opacity: 1;
}

#experience5 .flow_content li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 4rem;
    margin-top: 2rem;
}

#experience5 .flow_content .item_number {
    width: 3rem;
    height: 3rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-size: 1.7rem;
    color: white;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    text-indent: 2px;
}

#experience5 #lineup1 .flow_content .item_number {
    background: #62809B;
}

#experience5 #lineup2 .flow_content .item_number {
    background: #62809B;
}

#experience5 #lineup3 .flow_content .item_number {
    background: #BC74B6;
}

#experience5 #lineup4 .flow_content .item_number {
    background: #BC74B6;
}

#experience5 #lineup5 .flow_content .item_number {
    background: #78629B;
}

#experience5 #lineup6 .flow_content .item_number {
    background: #78629B;
}

#experience5 .flow_content .item_txt {
    font-size: 1.4rem;
    margin-left: 1rem;
    line-height: normal;
}

#experience5 .flow_content .item_number::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 3rem;
    width: 0;
    height: 4rem;
    z-index: 1;
}

#experience5 #lineup1 .flow_content .item_number::after {
    border-left: 1px solid #62809B;
}

#experience5 #lineup2 .flow_content .item_number::after {
    border-left: 1px solid #62809B;
}

#experience5 #lineup3 .flow_content .item_number::after {
    border-left: 1px solid #BC74B6;
}

#experience5 #lineup4 .flow_content .item_number::after {
    border-left: 1px solid #BC74B6;
}

#experience5 #lineup5 .flow_content .item_number::after {
    border-left: 1px solid #78629B;
}

#experience5 #lineup6 .flow_content .item_number::after {
    border-left: 1px solid #78629B;
}

#experience5 .flow_content ul li:last-child .item_number::after {
    border-left: none !important;
}

#experience5 #lineup4 .flow_content li {
    height: 5rem;
}

#experience5 #lineup4 .flow_content .item_number::after {
    height: 5rem;
}

#experience5 #lineup5 .flow_content li:not(:first-child) {
    height: 5rem;
}

#experience5 #lineup5 .flow_content li:not(:first-child) .item_number::after {
    height: 5rem;
}

.link_block {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 290px;
    height: 60px;
    margin-top: 2rem;
    transition: .3s;
}

.link_block svg {
    position: absolute;
    right: 1rem;
}

#lineup4 .link_block {
    border: #BC74B6 1px solid;
}

#lineup5 .link_block {
    border: #78629B 1px solid;
}

#lineup6 .link_block {
    border: #78629B 1px solid;
}

#lineup4 .link_block:hover {
    background: rgba(188, 116, 182, 0.2);
}

#lineup5 .link_block:hover {
    background: #E4E0EB;
}

#lineup6 .link_block:hover {
    background: #E4E0EB;
}

.link_block_txt {
    font-size: 1.2rem;
    line-height: 1.28;
}

.link_block_txt_detail {
    font-size: 1.6rem;
    line-height: normal;
}

.link_block_img {
    width: 110px;
    height: 100%;
}

.link_block_img img {
    height: 100%;
}

#lineup6 {
    max-width: 1240px;
    margin: auto;
    background-color: #F9F7FC;
    display: grid;
}

#lineup6 .lineup6_line {
    margin: 10px;
    border: #78629B 1px solid;
}

#lineup6 .lineup6_detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 90%;
    padding: 0 5rem;
    row-gap: 1rem;
}

#lineup6 .lineup6_detail div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#lineup6 .lineup6_detail span {
    line-height: normal;
}

#lineup6 .lineup6_detail .item {
    display: inline-block;
    font-size: 1.4rem;
    width: 7rem;
}

#lineup6 .lineup6_detail .colon {
    display: inline-block;
    font-size: 1.4rem;
    width: 2.8rem;
}

#lineup6 .lineup6_detail .val {
    font-size: 1.4rem;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

#lineup6 .lineup6_detail .val.times {
    display: block;
}

#lineup6 .lineup6_detail .val1 {
    font-size: 1.4rem;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #D9D9D9;
    border-radius: 1.5rem;
    height: 5.5rem;
    padding: 0 0.5rem;
    white-space: nowrap;
}

#lineup6 .lineup6_detail .val2 {
    font-size: 1.4rem;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #D9D9D9;
    border-radius: 1.5rem;
    height: 5.5rem;
    padding: 0 0.5rem;
    white-space: nowrap;
}

#lineup6 .lineup6_detail .val3 {
    font-size: 1.4rem;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #D9D9D9;
    border-radius: 1.5rem;
    height: 5.5rem;
    padding: 0 0.5rem;
    white-space: nowrap;
}

#lineup6 .lineup6_detail .rem09 {
    font-size: 0.9rem;
}

.lineup6_bonus {
    margin: 10rem auto 7rem auto;
}

.lineup6_bonus .ttl {
    font-size: 1.9rem;
    text-align: center;
    margin-bottom: 1rem;
}

.bonus_list {
    width: 902px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.bonus_block {
    position: relative;
    background: #ffffff;
    border-radius: 1.5rem;
    width: 294px;
    height: 15rem;
    padding: 1rem 1.5rem;
}

.bonus_block img {
    width: 30%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 1rem;
}

.bonus_block.bonus2 img {
    width: 35%;
}

.bonus_block_txt {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.bonus_block_txt h3 {
    font-size: 1.4rem;
    letter-spacing: .1em;
    line-height: normal;
    color: #78629B;
}

.bonus_txt {
    font-size: 1.4rem;
    line-height: normal;
    font-weight: bold;
}

.caption {
    font-size: 1.1rem;
    line-height: normal;
}

.attention {
    font-size: 1rem;
    line-height: 1.4;
    color: #9FA0A0;
    white-space: nowrap;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.attention_box {
    display: inline-block;
    text-align: center;
    width: 7rem;
    border: 1px solid #9FA0A0;
    border-radius: 3px;
    margin-right: 0.5rem;
}

.rem1 {
    font-size: 1rem;
}

.quasi_box {
    display: inline-block;
    text-align: center;
    width: 8rem;
    font-size: 1rem;
    line-height: normal;
    border: 1px solid #3E3A39;
    border-radius: 1px;
    font-weight: normal;
}

.lineup6_flow {
    display: grid;
    justify-content: center;
    margin-bottom: 8rem;
}

#experience5 #lineup6 .flow_block {
    width: 80rem;
}

#experience5 #lineup6 .flow_content span {
    font-size: 1.4rem;
}

#experience5 #lineup6 .flow_content .item_txt {
    line-height: normal;
    white-space: nowrap;
}

#experience5 #lineup6 .flow_content li {
    height: 6rem;
}

#experience5 #lineup6 .flow_content .item_number::after {
    height: 6rem;
}

#experience5 #lineup6 .flow_content .item_number.no::after {
    height: 8rem;
    left: 0.5rem;
    top: 0rem;
}

#experience5 #lineup6 .flow_content .item_number.no {
    margin: 0 1rem;
    width: 1rem;
    height: 1rem;
}

#experience5 #lineup6 .flow_ja {
    margin-right: 60rem;
}

.mfp-bg {
    opacity: .5;
}

.modal_kakusou {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    width: 650px;
    background: #fff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ie .modal_kakusou {
    min-height: 0;
    padding: 100px 0;
}

.modal_kakusou .btn_close_modal {
    position: absolute;
    top: 20px;
    right: 25px;
    cursor: pointer;
}

.modal_kakusou .btn_close_modal img {
    vertical-align: middle;
}

.mfp-close-btn-in .modal_kakusou .mfp-close {
    display: none;
}

.modal_kakusou .box {
    margin: 0;
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 7% 0 5% 0;
}

.modal_kakusou h2 {
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin: 2rem auto;
}

.modal_kakusou .kakushitsu_block {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal_kakusou .kakushitsu_list {
    border: #86A5AF 1px solid;
    border-radius: 50%;
    width: 280px;
    height: 164px;
    padding: 25px 0 0 35px;
}

.modal_kakusou .kakushitsu_img {
    width: 150px;
}

.modal_kakusou li {
    line-height: normal;
    height: 20px;
}

.modal_kakusou .check {
    font-size: 11px;
    font-weight: bold;
    line-height: normal;
    color: #86A5AF;
    margin-right: 0.6rem;
}

.modal_kakusou li:last-child {
    margin-left: 1.8rem;
}

.modal_kakusou .kakushitsu_list_item_txt {
    font-size: 1.2rem;
    line-height: normal;
}

.modal_kakusou .kakushitsu_txt_box1 {
    font-size: 9px;
    line-height: normal;
    color: #86A5AF;
    border: #86A5AF 1px solid;
    border-radius: 0.5rem;
    width: 49px;
    display: inline-block;
    text-align: center;
}

.modal_kakusou .kakushitsu_txt_box2 {
    font-size: 9px;
    line-height: normal;
    color: #86A5AF;
    border: #86A5AF 1px solid;
    border-radius: 0.5rem;
    width: 83px;
    display: inline-block;
    text-align: center;
}

.modal_kakusou .uruoi_block {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: auto;
}

.modal_kakusou .uruoi_block div {
    width: 177px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal_kakusou .uruoi_txt {
    font-size: 12px;
    line-height: normal;
    text-align: center;
}

.modal_kakusou .uruoi_img {
    width: 200px;
}

.modal_kakusou .caption {
    font-size: 10px;
    color: #9FA0A0;
    line-height: normal;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #experience1 {
        aspect-ratio: auto;
    }

    #experience2 {
        padding: 28vw 0;
    }

    #experience2 .txt_block {
        font-size: 3.7vw;
        line-height: 7vw;
    }

    #experience3 h2 {
        font-size: 5.2vw;
    }

    #experience3 .txt {
        font-size: 3.7vw;
    }

    #experience3 .whats_ttl_block {
        padding-top: 0;
        margin-bottom: 6vw;
    }

    #experience3 .whats {
        grid-template-columns: auto;
    }

    #experience3 .whats .num {
        font-size: 6.4vw;
    }

    #experience3 .whats1 {
        width: 100vw;
        height: auto;
        aspect-ratio: 384/325;
        background-image: url(../img/experience/whats1_sp.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin: 0 0 0 0;
    }

    #experience3 .whats1 .num {
        margin: 10vw 0 7vw;
    }

    #experience3 .whats1 .txt_block {
        margin-left: 0;
    }

    #experience3 .whats2 {
        width: 100vw;
        height: auto;
        aspect-ratio: 192/175;
        background-image: url(../img/experience/whats2_sp.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: -10vw 0 0 0;
    }

    #experience3 .whats2 .num {
        margin: 17vw 0 7vw;
        ;
    }

    #experience3 .whats3 {
        width: 100vw;
        height: auto;
        aspect-ratio: 96/89;
        background-image: url(../img/experience/whats3_sp.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: -8vw 0 0 0;
    }

    #experience3 .whats3 .num {
        margin: 10vw 0 7vw;
    }

    #experience3 .ttl_en {
        font-size: 6.2vw;
        text-align: center;
        line-height: normal;
    }

    #experience3 .ttl_ja {
        font-size: 3.7vw;
    }

    #experience3 .milk {
        position: relative;
        margin-left: auto;
        width: auto;
        aspect-ratio: auto;
        background-image: none;
        padding: 6vw 5vw;
    }

    #experience3 .milk .txt {
        font-size: 3.7vw;
        padding-top: 6vw;
    }

    #experience3 .skin {
        position: relative;
        margin-top: auto;
        margin-left: auto;
        width: auto;
        aspect-ratio: auto;
        background-image: none;
        padding: 6vw 5vw;
    }

    #experience3 .skin .txt {
        font-size: 3.7vw;
        padding-top: 6vw;
    }

    #experience3 .moisture {
        position: relative;
        margin-top: auto;
        margin-left: auto;
        width: auto;
        aspect-ratio: auto;
        background-image: none;
        padding: 6vw 5vw;
    }

    #experience3 .moisture .txt {
        font-size: 3.7vw;
        padding-top: 6vw;
        align-items: center;
        width: 77vw;
    }

    #experience3 .moisture .txt .rem1 {
        font-size: 2.8vw;
    }

    #experience3 .moisture .txt img {
        width: 30vw;
    }

    #experience3 .recommendation .txt_block {
        font-size: 3.7vw;
    }

    #experience3 .recommendation_txt1 {
        font-size: 4.2vw;
        font-weight: 500;
    }

    #experience3 .recommendation_txt2 {
        font-size: 4.7vw;
        font-weight: 500;
    }

    #experience3 .recommendation_list {
        width: 77vw;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        justify-items: center;
    }

    #experience3 .recommendation_list li {
        width: 90%;
    }

    #experience3 .milk_lineup .txt_block {
        margin-top: 10vw;
        font-size: 4.7vw;
        line-height: normal;
        white-space: nowrap;
    }

    #experience3 .milk_lineup .milk_lineup_img {
        width: 90%;
    }

    #experience4 {
        padding: 13vw 0;
    }

    #experience4 .ttl_en {
        font-size: 6.2vw;
    }

    #experience4 .ttl_ja {
        font-size: 5.3vw;
        white-space: nowrap
    }

    #experience4 .choice_table_block {
        width: 100%;
    }

    #experience4 .choice_table_bg {
        width: 100%;
    }

    #experience4 .choice_table_bg th {
        border-bottom: 1px solid #E0ECF0;
        border-left: 1px solid #E0ECF0;
        border-right: 1px solid #E0ECF0;
        font-size: 3.7vw;
        line-height: normal;
        height: 21vw;
    }

    #experience4 .choice_table_bg th .bold {
        font-size: 4.2vw;
    }

    #experience4 .choice_table_bg td {
        border-left: 1px solid #E0ECF0;
        border-right: 1px solid #E0ECF0;
        height: 92vw;
    }

    #experience4 .choice_table_bg tr:nth-child(1) th:nth-child(1) {
        border-radius: 3vw 0 0 0;
    }

    #experience4 .choice_table_bg tr:nth-child(1) th:nth-child(3) {
        border-radius: 0 3vw 0 0;
    }

    #experience4 .choice_table_bg tr:nth-child(2) td:nth-child(1) {
        border-radius: 0 0 0 3vw;
    }

    #experience4 .choice_table_bg tr:nth-child(2) td:nth-child(3) {
        border-radius: 0 0 3vw 0;
    }

    #experience4 .choice_table {
        top: 22vw;
    }

    #experience4 .choice_table td {
        height: 17vw;
    }

    #experience4 .choice_table td a {
        height: 15vw;
        font-size: 3.2vw;
        line-height: 4vw;
        border-radius: 3vw;
    }

    #experience4 .choice_table td a svg {
        top: 6.5vw;
        width: 2.5vw;
        height: 2.5vw;
    }

    #experience5 {
        padding: 13vw 0 19vw;
    }

    #experience5 .ttl_en {
        font-size: 6vw;
        margin-top: 6vw;
    }

    #experience5 .ttl_ja {
        font-size: 4vw;
    }

    #experience5 .lineup_list {
        width: 90vw;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(3, 1fr);
        gap: 3vw;
        margin: 9vw auto 0;
    }

    #experience5 .lineup_list li {
        width: 100%;
        font-size: 3.2vw;
        line-height: 3.5vw;
        height: auto;
    }

    #experience5 .lineup_list li img {
        margin-bottom: 3vw;
        position: relative;
    }

    #experience5 .lineup_block {
        display: block;
        width: auto !important;
        margin: auto;
        padding: 12vw 0;
    }

    #experience5 .lineup_block.rev {
        background-color: #FAFAFA;
        width: 100%;
        padding: 12vw 5vw;
    }

    #experience5 .lineup_block .txt_block {
        width: auto;
    }

    #experience5 .lineup_block .img_block {
        width: 85vw;
        margin: 3vw 0;
    }

    #experience5 .lineup_block .img_block_caption div {
        width: 16vw;
        height: 16vw;
    }

    #experience5 #lineup1 .img_block_caption,
    #experience5 #lineup2 .img_block_caption,
    #experience5 #lineup3 .img_block_caption,
    #experience5 #lineup4 .img_block_caption,
    #experience5 #lineup5 .img_block_caption,
    #experience5 #lineup6 .img_block_caption {
        right: 3vw;
        bottom: 5vw;
        left: auto;
    }

    #experience5 .lineup_block .img_block_caption .cap_time {
        font-size: 2.8vw;
    }

    #experience5 .lineup_block .img_block_caption .time {
        font-size: 5.2vw;
    }

    #experience5 .lineup_block .img_block_caption .cap_rsv {
        font-size: 3.5vw;
    }

    #experience5 .description {
        font-size: 3.7vw;
        margin: 0 0 6vw 0;
        line-height: 1.425;
    }

    #experience5 .flow_block {
        width: 77vw;
        margin-bottom: 0;
    }

    #experience5 .flow_en {
        font-size: 5.8vw;
    }

    #experience5 .flow_ja {
        font-size: 3.2vw;
        margin-right: 28vw;
    }

    #experience5 .flow_block summary svg {
        width: 3.5vw;
        height: 3.5vw;
    }

    #experience5 .flow_content li {
        height: 6.6vw;
        margin-top: 7.8vw;
    }

    #experience5 .flow_content .item_txt {
        font-size: 3.7vw;
        margin-left: 3vw;
        line-height: normal;
    }

    #experience5 .flow_content .item_number {
        width: 7.8vw;
        height: 7.8vw;
        font-size: 4.5vw;
        text-indent: 0.55vw;
    }

    #experience5 .flow_content .item_number::after {
        left: 3.6vw;
        top: 7.8vw;
        height: 8.6vw;
    }

    #experience5 #lineup4 .flow_content li {
        height: 10.6vw;
    }

    #experience5 #lineup4 .flow_content .item_number::after {
        height: 10.6vw;
    }

    #experience5 #lineup5 .flow_content li:not(:first-child) {
        height: 10.6vw;
    }

    #experience5 #lineup5 .flow_content li:not(:first-child) .item_number::after {
        height: 10.6vw;
    }

    #experience5 .lineupno {
        margin-top: 0;
    }

    .link_block {
        width: 77vw;
        height: 18vw;
        margin-top: 8vw;
    }

    .link_block svg {
        right: 4vw;
    }

    .link_block_txt {
        font-size: 3.7vw;
        line-height: normal;
    }

    .link_block_txt_detail {
        font-size: 4.5vw;
        line-height: normal;
    }

    .link_block_img {
        width: 31vw;
    }

    #lineup6 {
        display: block;
        padding: 10px;
    }

    #lineup6 .lineup6_line {
        margin: auto;
    }

    #lineup6 .flow_content {
        margin-bottom: 9vw;
    }

    #lineup6 .link_block {
        margin: 0 auto 17vw auto;
    }

    .lineup6_bonus {
        margin: 13vw auto;
    }

    #lineup6 .lineup6_detail {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 2vw;
        width: fit-content;
    }

    #lineup6 .lineup6_detail .item {
        font-size: 3.7vw;
        width: 18vw;
    }

    #lineup6 .lineup6_detail .colon {
        font-size: 3.7vw;
        width: 7.4vw;
    }

    #lineup6 .lineup6_detail .val {
        display: block;
        font-size: 3.7vw;
    }

    #lineup6 .lineup6_detail .val .small {
        font-size: 3.2vw;
    }

    #lineup6 .lineup6_detail div {
        align-items: flex-start;
    }

    #lineup6 .lineup6_detail div.price {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3vw;
        margin-bottom: 3vw;
    }

    #lineup6 .lineup6_detail div.price .item {
        width: 100%;
        text-align: start;
    }

    #lineup6 .lineup6_detail .price .val {
        display: inline-flex;
    }

    #lineup6 .lineup6_detail .val1 {
        font-size: 3.7vw;
        width: 18.3vw;
        height: 14vw;
        border-radius: 3vw;
    }

    #lineup6 .lineup6_detail .val2 {
        font-size: 3.5vw;
        width: 30.3vw;
        height: 14vw;
        border-radius: 3vw;
    }

    #lineup6 .lineup6_detail .val3 {
        font-size: 3.7vw;
        width: 22.3vw;
        height: 14vw;
        border-radius: 3vw;
    }

    #lineup6 .lineup6_detail .rem09 {
        font-size: 2.3vw;
    }

    #lineup6 .rem1 {
        font-size: 2.5vw;
    }

    .lineup6_bonus .ttl {
        font-size: 5.0vw;
    }

    .bonus_list {
        width: auto;
        flex-direction: column;
        gap: 3vw;
    }

    .bonus_block {
        width: 77vw;
        height: fit-content;
        padding: 2.5vw 3.5vw;
    }

    .bonus_block img {
        height: 23.5vw;
        width: auto;
        right: 3vw;
    }

    .bonus_block.bonus2 img {
        height: 17vw;
        width: auto;
    }

    .bonus_block_txt h3 {
        font-size: 3.7vw;
        color: #A28BC5;
    }

    .bonus_txt {
        font-size: 3.7vw;
        margin: 2vw 0;
    }

    .caption {
        font-size: 3.0vw;
    }

    .attention {
        font-size: 2.8vw;
    }

    .attention_box {
        width: 16vw;
        font-size: 2.8vw;
        margin-right: 1vw;
    }

    .quasi_box {
        width: 21vw;
        font-size: 2.8vw;
    }

    .lineup6_flow {
        margin-bottom: 0;
    }

    #experience5 #lineup6 .lineup_block {
        background-color: unset;
        padding: 12vw 5vw 5vw;
    }

    #lineup6 .lineup6_line {
        border: #A28BC5 1px solid;
    }

    #experience5 #lineup6 .flow_block {
        width: 77vw;
        margin-bottom: 6vw;
    }

    #experience5 #lineup6 .flow_content span {
        font-size: 3.7vw;
    }

    #experience5 #lineup6 .flow_content li {
        align-items: flex-start;
        height: 27vw;
    }

    #experience5 #lineup6 .flow_content .item_number::after {
        height: 27vw;
    }

    #experience5 #lineup6 .flow_content li.no {
        height: 27vw;
    }

    #experience5 #lineup6 .flow_content .item_number.no {
        margin: 0 auto;
        width: 2.7vw;
        height: 2.7vw;
    }

    #experience5 #lineup6 .flow_content .item_number.no::after {
        height: 33vw;
        left: 1.3vw;
        top: 2.7vw;
    }

    #experience5 #lineup6 .flow_content .item_txt {
        margin-top: -1vw;
    }

    #experience5 #lineup6 .flow_content li:nth-child(3) {
        height: 23vw;
    }

    #experience5 #lineup6 .flow_content li:nth-child(3) .item_number::after {
        height: 23vw;
    }

    #experience5 #lineup6 .flow_ja {
        margin-right: 12rem;
    }

    #experience5 .footer {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 1000;
        background-color: #fff;
    }

    #experience5 .footer .box {
        display: grid;
        gap: 2px;
        grid-template-columns: repeat(2, 1fr);
    }

    #experience5 .footer .box a {
        width: 50vw;
        font-size: 3.2vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem 0;
        white-space: nowrap;
    }

    #experience5 .footer .box svg {
        width: 2.5vw;
        height: 2.5vw;
    }

    #experience5 .footer .lineup1or2 {
        color: white;
        background-color: #A5C7D1;
    }

    #experience5 .footer .lineup3or4 {
        color: white;
        background-color: #D7A3BB;
    }

    #experience5 .footer .lineup5or6 {
        color: white;
        background-color: #B09EC8;
    }

    #experience3 .kakusou_block summary {
        list-style: none;
        position: relative;
    }

    #experience3 .kakusou_block summary::-webkit-details-marker {
        display: none;
    }

    #experience3 .kakusou_block summary svg {
        transition: transform 0.3s ease;
        position: absolute;
        right: 3vw;
        top: 2.1vw;
    }

    #experience3 .kakusou_block[open] summary svg {
        transform: rotate(180deg);
    }

    #experience3 .kakusou_block div {
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    #experience3 .kakusou_block[open] div {
        transform: none;
        opacity: 1;
    }

    #experience3 .kakusou_block {
        background-color: #fff;
        width: 100%;
        border-radius: 3vw;
        margin-top: 6vw;
    }

    #experience3 .kakusou_block_ttl {
        font-size: 3.2vw;
        color: #86A5AF;
        vertical-align: text-bottom;
    }

    #experience3 .kakushitsu_list {
        border: #86A5AF 1px solid;
        border-radius: 3vw;
        padding: 3vw;
    }

    #experience3 .kakusou_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        margin: 3vw;
        gap: 6vw;
    }

    #experience3 .kakushitsu_block {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #experience3 .uruoi_block {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #experience3 li {
        display: flex;
        font-size: 3.2vw;
        line-height: normal;
        margin-bottom: 0.6vw;
    }

    #experience3 li:last-child {
        align-items: stretch;
        margin-left: 5vw;
    }

    #experience3 .check {
        font-size: 3.2vw;
        font-weight: bold;
        line-height: normal;
        color: #86A5AF;
        margin-right: 1.8vw;
    }

    #experience3 .kakushitsu_list_item_txt {
        font-size: 3.2vw;
        line-height: normal;
    }

    #experience3 .kakushitsu_txt_box1 {
        font-size: 2.4vw;
        line-height: normal;
        color: #86A5AF;
        border: #86A5AF 1px solid;
        border-radius: 1vw;
        padding: 0.6vw 3vw;
        margin-right: 1vw;
        white-space: nowrap;
    }

    #experience3 .kakushitsu_txt_box2 {
        font-size: 2.4vw;
        line-height: 1.0;
        color: #86A5AF;
        border: #86A5AF 1px solid;
        border-radius: 1vw;
        padding: 0 1vw;
        display: inline-block;
        text-align: center;
        white-space: nowrap;
    }

    #experience3 .kakushitsu_txt_box2 .small {
        font-size: 1.8vw;
    }

    #experience3 .kakushitsu_img {
        width: 25vw;
    }

    #experience3 .uruoi_block {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: auto;
        gap: 3vw;
    }

    #experience3 .uruoi_block div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #experience3 .uruoi_txt {
        font-size: 3.2vw;
        line-height: normal;
        text-align: center;
        white-space: nowrap;
    }

    #experience3 .uruoi_img {
        width: 30vw;
    }

    #experience3 .caption {
        font-size: 2.8vw;
        color: #9FA0A0;
        margin-left: auto;
        margin-right: 0;
    }

    .triangle {
        width: 100vw;
        height: 0;
        border-left: 50vw solid transparent;
        border-right: 50vw solid transparent;
        border-bottom: 0 solid transparent;
        border-top: 20vw solid #E6F0F3;
    }

    .l12 {
        color: #64A1C6;
    }

    .l34 {
        color: #C990C4;
    }

    .l56 {
        color: #A28BC5;
    }

    .l12_bg {
        background-color: #64A1C6;
    }

    .l34_bg {
        background-color: #C990C4;
    }

    .l56_bg {
        background-color: #A28BC5;
    }

    #experience5 #lineup1 .flow_content .item_number {
        background: #64A1C6;
    }

    #experience5 #lineup2 .flow_content .item_number {
        background: #64A1C6;
    }

    #experience5 #lineup3 .flow_content .item_number {
        background: #C990C4;
    }

    #experience5 #lineup4 .flow_content .item_number {
        background: #C990C4;
    }

    #experience5 #lineup5 .flow_content .item_number {
        background: #A28BC5;
    }

    #experience5 #lineup6 .flow_content .item_number {
        background: #A28BC5;
    }

    #experience5 #lineup1 .flow_content .item_number::after {
        border-left: 1px solid #64A1C6;
    }

    #experience5 #lineup2 .flow_content .item_number::after {
        border-left: 1px solid #64A1C6;
    }

    #experience5 #lineup3 .flow_content .item_number::after {
        border-left: 1px solid #C990C4;
    }

    #experience5 #lineup4 .flow_content .item_number::after {
        border-left: 1px solid #C990C4;
    }

    #experience5 #lineup5 .flow_content .item_number::after {
        border-left: 1px solid #A28BC5;
    }

    #experience5 #lineup6 .flow_content .item_number::after {
        border-left: 1px solid #A28BC5;
    }

    #experience5 #lineup1 .flow_block summary {
        border-bottom: 2px solid #64A1C6;
    }

    #experience5 #lineup2 .flow_block summary {
        border-bottom: 2px solid #64A1C6;
    }

    #experience5 #lineup3 .flow_block summary {
        border-bottom: 2px solid #C990C4;
    }

    #experience5 #lineup4 .flow_block summary {
        border-bottom: 2px solid #C990C4;
    }

    #experience5 #lineup5 .flow_block summary {
        border-bottom: 2px solid #A28BC5;
    }

    #experience5 #lineup6 .flow_block summary {
        border-bottom: 2px solid #A28BC5;
    }
}