@keyframes pyonAction
{
    35%
    {
        transform: scale(.97);
    }
    100%
    {
        transform: scale(1);
    }
}
@keyframes pyonAction_large
{
    35%
    {
        transform: scale(.87);
    }
    100%
    {
        transform: scale(1);
    }
}
/* ------------------------
  Print Styles
------------------------ */
@media print
{
    *,
    *:before,
    *:after
    {
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited
    {
        text-decoration: underline;
    }
    tr,
    img
    {
        page-break-inside: avoid;
    }
    img
    {
        max-width: 100% !important;
    }
    p,
    h2,
    h3
    {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3
    {
        page-break-after: avoid;
    }
}
/* ------------------------
mv
------------------------ */
.m-mv
{
    position: relative;

    overflow: hidden;

    width: auto;
    height: 240px;

    background: url('/img/osusume_menu/osusume_mv_bg_lg.jpg') center no-repeat;
    background-size: cover;

    justify-content: center;
}
@media screen and (max-width: 768px)
{
    .m-mv
    {
        width: auto;
        height: 74.21875vw;

        background: url('/img/osusume_menu/osusume_mv_bg_sp.jpg') center no-repeat;
        background-size: cover;
    }
}

.m-title
{
    position: relative;

    width: 100%;
    max-width: 1270px;
    margin: 0 auto;
}

.m-title_img
{
    position: relative;
    z-index: 0;

    max-width: 800px;
    margin: 0 auto;
}
@media screen and (max-width: 768px)
{
    .m-title_img
    {
        top: -9.84375vw;

        width: 84.375vw;
        max-width: none;
    }
}
.m-title_img img
{
    width: 100%;
}

.m-title_link
{
    position: absolute;
    z-index: 2;
    bottom: 28px;
    left: 50%;

    width: 400px;

    transition: .3s;
    transform: translateX(-48%);
}
.m-title_link img
{
    width: 100%;
}
@media screen and (max-width: 768px)
{
    .m-title_link
    {
        bottom: 15.9375vw;

        width: 73.4375vw;

        transform: translateX(-50%);
    }
}
.m-title_link:hover
{
    opacity: .5;
}

.m-title_deco
{
    position: absolute;
}
@media screen and (max-width: 768px)
{
    .m-title_deco
    {
        top: unset;
        bottom: 1.5625vw;
    }
}
.m-title_deco.__right
{
    top: -25px;
    right: 0;

    width: 308px;
}
@media screen and (max-width: 768px)
{
    .m-title_deco.__right
    {
        top: -14.84375vw;
        right: -.78125vw;

        width: 25vw;
        max-width: 160px;
    }
}
.m-title_deco.__left
{
    top: -23px;
    left: -16px;

    width: 324px;
}
@media screen and (max-width: 768px)
{
    .m-title_deco.__left
    {
        top: -22.03125vw;
        left: -.9375vw;

        width: 37.03125vw;
    }
}

/* ------------------------
navigation
------------------------ */
.m-search_field
{
    position: relative;
    z-index: 10;

    display: flex;

    border-radius: 999px;

    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 768px)
{
    .m-search_field
    {
        bottom: 13.125vw;

        max-width: 79.21875vw;

        border: none;
    }
}

.m-search_box
{
    font-size: 13px;

    position: relative;

    width: 280px;
    height: 100%;
    min-height: 40px;
    padding: 0 0 0 20px;

    letter-spacing: .2em;

    border: 1px solid #000;
    border-radius: 25px 0 0 25px;
    outline: 0;
}
@media screen and (max-width: 768px)
{
    .m-search_box
    {
        font-size: 3.125vw;

        width: 75vw;
        max-width: 480px;
        height: 12.5vw;
        max-height: 80px;

        border-radius: 999px;
    }
}

.m-search_btn
{
    position: relative;

    width: 50px;
    height: 100%;

    transition: .3s;

    color: #fff;
    border: solid 1px #000;
    border-left: none;
    border-radius: 0 25px 25px 0;
    background: #094;
}
.m-search_btn:hover
{
    background-color: #fff;
}
.m-search_btn:hover::after
{
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 21px;
    height: 21px;

    content: '';
    transform: translate(-60%, -50%);

    background: url(/img/osusume_menu/keyword_search_icon.png) center no-repeat;
    background-size: contain;
}
@media screen and (max-width: 768px)
{
    .m-search_btn:hover::after
    {
        top: 3.4375vw;
        right: 3.4375vw;

        width: 35px;
        height: 35px;
    }
}
@media screen and (max-width: 768px)
{
    .m-search_btn
    {
        width: 10.9375vw;
        max-width: 70px;
        height: 12.1875vw;
        max-height: 78px;

        border-radius: 0 999px 999px 0;
    }
}

.m-search_icon
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 21px;
    margin: 0 auto;

    transform: translate(-60%, -50%);
}
@media screen and (max-width: 768px)
{
    .m-search_icon
    {
        top: 3.125vw;
        right: 3.28125vw;
        left: auto;

        width: 5.46875vw;

        transform: none;
    }
}

@media screen and (max-width: 768px)
{
    .m-menu_inner
    {
        position: fixed;
        z-index: 999;
        right: 3.90625vw;
        bottom: 20.3125vw;

        width: 10.9375vw;
        height: 10.9375vw;

        cursor: pointer;

        border-radius: 50%;
        background-color: #094;
    }
}

.m-btn_wrap
{
    display: flex;

    height: 100%;

    justify-content: center;
    align-items: center;
}

.m-menu_text
{
    display: none;
}
@media screen and (max-width: 768px)
{
    .m-menu_text
    {
        font-size: 3.125vw;

        display: block;

        margin-left: 2.65625vw;

        opacity: 1;
        color: #fff;
    }
}

.m-menu_btn_deco span
{
    display: none;
}
@media screen and (max-width: 768px)
{
    .m-menu_btn_deco span
    {
        display: block;

        width: .625vw;
        height: .625vw;
        margin-right: .625vw;

        transition: transform .5s cubic-bezier(.25, .46, .45, .94);

        border-radius: 2px;
        background: #fff;
    }
    .m-menu_btn_deco span:not(:first-child)
    {
        margin-top: 1.25vw;
    }
}

.m-menu_btn span
{
    display: none;
}
@media screen and (max-width: 768px)
{
    .m-menu_btn span
    {
        display: block;

        width: 4.6875vw;
        height: .625vw;

        transition: transform .5s cubic-bezier(.25, .46, .45, .94);

        border-radius: 2px;
        background: #fff;
    }
    .m-menu_btn span:not(:first-child)
    {
        margin-top: 1.25vw;
    }
}

.m-nav
{
    background-color: #094;
}
@media screen and (max-width: 768px)
{
    .m-nav
    {
        display: none;
    }
}
.m-nav .active
{
    display: block;
}

.m-nav_inner
{
    display: flex;

    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 50px;

    justify-content: space-between;
}

.m-link
{
    display: flex;

    width: 100%;

    gap: 20px;
    align-items: center;
}

.m-link_list
{
    line-height: 1;

    display: flex;

    padding: 9px 0;

    letter-spacing: .175em;

    border-right: 1px dashed #99d6b4;

    justify-content: center;
    align-items: center;
}
.m-link_list:last-child
{
    border-right: none !important;
}
.m-link_list a
{
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;

    position: relative;

    display: block;

    margin-right: 19px;

    transition: .3s;

    color: #fff;
}
.m-link_list a:hover
{
    opacity: .3;
}

/* ------------------------
sitemap
------------------------ */
.related_list_item
{
    width: 100%;
    margin: 0 auto;
    padding: 50px 50px 60px;
}
@media screen and (max-width: 768px)
{
    .related_list_item
    {
        max-width: none;
        padding: 9.375vw 6.25vw 9.375vw;
    }
}

.related_sitemap_list
{
    display: flex;

    padding: 2.2807017544% 2.6315789474%;

    flex-wrap: wrap;
}
@media screen and (max-width: 768px)
{
    .related_sitemap_list
    {
        padding: 18px 5.625vw;

        align-items: baseline;
    }
}

.related_sitemap_list
{
    border-radius: 22px;
    background-color: #4b4b4b;
}
@media screen and (max-width: 768px)
{
    .related_sitemap_list
    {
        border-radius: 3.75vw;
    }
}

.related_sitemap_list_item
{
    line-height: 1.4;

    display: flex;

    width: 100%;
    margin-right: 16px;

    align-items: baseline;
}
@media screen and (min-width: 769px)
{
    .related_sitemap_list_item:not(:first-child)
    {
        margin-top: 14px;
    }
    .related_sitemap_list_item:nth-child(n+4)
    {
        width: auto;
    }
    .related_sitemap_list_item-m
    {
        width: 35.8422939068%;
    }
    .related_sitemap_list_item-s
    {
        width: 28.6738351254%;
    }
}
@media screen and (max-width: 768px)
{
    .related_sitemap_list_item
    {
        flex-direction: column;

        width: 50%;
        margin-right: 0;
    }
    .related_sitemap_list_item:nth-child(n+3)
    {
        margin-top: 12px;
    }
}
.related_sitemap_list_item > a
{
    font-weight: bold;
}
.related_sitemap_list_item a
{
    font-size: 14px;

    transition: color .4s cubic-bezier(.25, .1, .25, 1);

    color: #fff;
}
.related_sitemap_list_item a:hover
{
    color: #93e4a0;
}
.related_sitemap_list_item a:hover .footer_icon
{
    fill: #93e4a0;
}

.related_sitemap_inner_list
{
    display: flex;

    margin-left: 20px;

    gap: 15px;
}
@media screen and (max-width: 768px)
{
    .related_sitemap_inner_list
    {
        display: block;

        margin-left: 0;
    }
}

.m-btn_cont
{
    display: flex;

    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 53px 50px 0;

    justify-content: space-between;
}
@media screen and (max-width: 768px)
{
    .m-btn_cont
    {
        display: block;

        padding: 53px 7.8125vw 0;
    }
}
.m-btn_cont .m-btn-green
{
    width: 100%;
    max-width: 440px;
    min-height: 70px;
}
@media screen and (max-width: 768px)
{
    .m-btn_cont .m-btn-green
    {
        max-width: none;
        height: 16.40625vw;
        min-height: auto;
    }
}
.m-btn_cont .m-btn-green a
{
    display: inline-flex;

    width: 100%;
    height: 100%;

    border-radius: 35px;

    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 768px)
{
    .m-btn_cont .m-btn-green a
    {
        border-radius: 8.125vw;
    }
}
.m-btn_cont .m-btn-green a span
{
    font-size: 18px;
    font-weight: 400;

    letter-spacing: .16em;
}
@media screen and (max-width: 768px)
{
    .m-btn_cont .m-btn-green a span
    {
        font-size: 4.21875vw;
    }
}
@media screen and (max-width: 768px)
{
    .m-btn_cont .m-btn-green:nth-child(n+2)
    {
        margin-top: 6.25vw;
    }
}
@media screen and (max-width: 768px)
{
    .m-btn_cont .m-btn
    {
        margin: 0;
    }
}
@media screen and (max-width: 768px)
{
    .m-btn_cont .m-btn a::after
    {
        right: 4.84375vw;

        width: 1.5625vw;
        height: 1.5625vw;
    }
}

/* ------------------------
modal
------------------------ */
.modal
{
    position: relative;
    z-index: 4002;

    display: none;
}
.modal.is-open
{
    display: block;
}
.modal[aria-hidden=false]
{
    animation: fadeIn .3s cubic-bezier(0, 0, .2, 1);
}
.modal[aria-hidden=true]
{
    animation: fadeOut .3s cubic-bezier(0, 0, .2, 1);
}

@keyframes fadeIn
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}
@keyframes fadeOut
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}
.modal-btn
{
    display: none;
}
@media screen and (max-width: 768px)
{
    .modal-btn
    {
        position: absolute;

        display: block;

        width: 10.3125vw;
        height: 10.3125vw;
    }
}

.modal-overlay
{
    position: fixed;

    display: flex;

    background: rgba(0, 0, 0, .8);

    justify-content: center;
    align-items: center;
    inset: 0;
}

.modal-close
{
    font-size: 3.125vw;
    font-weight: 600;

    position: absolute;
    right: 12.5vw;

    margin-top: 3.90625vw;

    transition: background-color .3s cubic-bezier(.165, .84, .44, 1);

    color: #fff;
    border: none;
    background-color: unset;
}
.modal-close .modal-close_text
{
    margin-left: -2.1875vw;
}
.modal-close::after,
.modal-close::before
{
    position: absolute;
    top: 0;
    right: -6.25vw;
    bottom: 0;

    width: .78125vw;
    height: 6.25vw;
    margin: auto;

    content: '';

    background-color: #fff;
}
.modal-close::after
{
    transform: rotate(45deg);
}
.modal-close::before
{
    transform: rotate(-45deg);
}

.modal-container
{
    position: absolute;
    top: 20.3125vw;
}

.modal-content
{
    width: 93.75vw;
    height: auto;

    border-radius: 8px;
    background-color: #094;
}

.modal-nav_wrap
{
    padding: 8.59375vw 4.6875vw 9.375vw;
}

.modal-link
{
    width: 100%;
    height: auto;
}

.modal-link_list
{
    line-height: 1;

    border-bottom: 1px dashed #99d6b4;
}
.modal-link_list a
{
    font-size: 4.375vw;
    font-weight: 600;

    position: relative;

    display: block;

    margin: 4.6875vw 0;

    color: #fff;
}

.modal-open
{
    display: block;

    margin: 100px auto;
}

.modal-search_field
{
    position: absolute;
    z-index: 10;
    bottom: 23px;

    max-width: 630px;
    margin-bottom: 20px;

    border: 15px solid #fff;
    border-radius: 999px;
}
@media screen and (max-width: 768px)
{
    .modal-search_field
    {
        position: relative;
        bottom: unset;

        margin: 8.75vw 4.6875vw 0;

        border: none;
    }
}

.modal-search_box
{
    position: relative;

    width: 600px;
    height: 50px;
    padding: 0 30px 0 20px;

    border: 1px solid #000;
    border-radius: 25px;
    outline: 0;
}
@media screen and (max-width: 768px)
{
    .modal-search_box
    {
        font-size: 2.96875vw;
        font-weight: 300;

        width: 100%;
        height: 12.5vw;
        max-height: 80px;

        letter-spacing: .12em;

        border-radius: 999px;
    }
}

.modal-search_btn
{
    position: absolute;
    top: 1px;
    right: 1px;

    width: 57px;
    height: 48px;

    transition: .3s;

    color: #fff;
    border: solid #000;
    border-width: 0 0 0 1px;
    border-radius: 0 25px 25px 0;
    background: #094;
}
.modal-search_btn:hover
{
    background-color: #fff;
}
.modal-search_btn:hover::after
{
    position: absolute;
    top: 10px;
    right: 19px;

    display: block;

    width: 27px;
    height: 27px;

    content: '';

    background: url(/img/osusume_menu/keyword_search_icon.png) center no-repeat;
    background-size: contain;
}
@media screen and (max-width: 768px)
{
    .modal-search_btn:hover::after
    {
        top: 3.125vw;
        right: 3.28125vw;

        width: 5.46875vw;
        height: 5.46875vw;
    }
}
@media screen and (max-width: 768px)
{
    .modal-search_btn
    {
        top: 0;

        width: 10.9375vw;
        height: 80px;
        max-height: 12.5vw;

        border-width: 1px 0 1px 1px;
        border-radius: 0 999px 999px 0;
    }
}

/* ------------------------
journal
------------------------ */
.journal
{
    position: relative;

    padding: 60px 0 50px;

    background: url('/img/common/journal_bg.jpg');
}
@media screen and (max-width: 768px)
{
    .journal
    {
        padding: 7.96875vw 0;
    }
}

.l-inner
{
    padding: 0 7.4626865672%;
}
@media screen and (max-width: 768px)
{
    .l-inner
    {
        padding: 0 6.25vw;
    }
}

.journal_inner
{
    display: flex;

    margin: 0 auto;

    transition: background .42s cubic-bezier(.25, .1, .25, 1);

    justify-content: center;
}
@media screen and (max-width: 768px)
{
    .journal_inner
    {
        display: block;

        padding: 0;
    }
}

.journal_title_block
{
    position: relative;

    width: 100%;
    max-width: 364px;
    margin-right: 24px;

    border-radius: 12px;
    background: #fff;

    grid-area: item01;
}
.journal_title_block a
{
    display: block;

    width: 364px;
    height: 270px;
    padding: 28px 33px;

    color: #4b4b4b;
    border-radius: 12px;
}
.journal_title_block a .journal_btn
{
    color: #fff;
}
@media screen and (max-width: 768px)
{
    .journal_title_block a
    {
        display: flex;

        width: 100%;
        height: auto;
        padding: 6.875vw 6.5625vw;

        justify-content: center;
        align-items: center;
    }
}
.journal_title_block a:hover .journal_btn .journal_btn_inner
{
    animation: pyonAction .52s cubic-bezier(.165, .84, .44, 1) forwards;

    background: #804f35;
}
@media screen and (max-width: 768px)
{
    .journal_title_block
    {
        width: calc(100% - 12.5vw);
        max-width: unset;
        margin: auto;
    }
}

.journal_title
{
    max-width: 144px;
    margin: 0 auto 24px;

    text-align: center;
}
@media screen and (max-width: 768px)
{
    .journal_title
    {
        min-width: 25.9375vw;
        margin: 0 4.375vw 3.75vw;
    }
}

.journal_title_txt
{
    font-size: 14px;
    font-weight: 600;
}
@media screen and (max-width: 768px)
{
    .journal_title_txt
    {
        font-size: 3.75vw;
        line-height: 1.6;
    }
}

.journal_btn
{
    width: 290px;
    margin: 30px auto 0;
}
@media screen and (max-width: 768px)
{
    .journal_btn
    {
        font-size: 14px;

        position: static;

        width: 75vw;
        margin-top: -29px;
    }
}
.journal_btn .journal_btn_inner
{
    font-size: 14px;
    font-weight: 600;

    text-align: center;

    border-radius: 28px;
    background: #fff;
}
.journal_btn .journal_btn_inner:hover
{
    animation: pyonAction .52s cubic-bezier(.165, .84, .44, 1) forwards;

    background: #094;
}
.journal_btn .journal_btn_inner:hover a
{
    color: #fff;
}
.journal_btn .journal_btn_inner a
{
    display: block;

    width: 100%;
    padding: 12px 24px;

    text-decoration: none;

    color: #000;
}
@media screen and (max-width: 768px)
{
    .journal_btn .journal_btn_inner a
    {
        font-size: 4.375vw;
        font-weight: 300;
    }
}
@media screen and (max-width: 768px)
{
    .journal_btn .journal_btn_inner
    {
        height: auto;

        border-radius: 40px;
    }
}

.journal_list
{
    display: flex;
}
@media screen and (max-width: 768px)
{
    .journal_list
    {
        display: block;
    }
}

.journal_list_item
{
    max-width: 364px;
    margin-right: 24px;
}
.journal_list_item:last-of-type
{
    margin-right: 0;
}
.journal_list_item figure
{
    width: 364px;
    height: 270px;
}
@media screen and (max-width: 768px)
{
    .journal_list_item figure
    {
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 768px)
{
    .journal_list_item
    {
        width: 100%;
        max-width: unset;
    }
}