/* CSS Document */




/* ========================================

br

======================================== */
br.pcObj {
    display: block;
}
br.spObj {
    display: none;
}
@media screen and ( max-width: 768px ) {
    br.pcObj {
        display: none;
    }
    br.spObj {
        display: block;
    }
}










/* ========================================

figure img

======================================== */
figure img, 
picture img {
    width: 100%;
}
@media screen and ( max-width: 768px ) {
    figure img, 
    picture img {
    }
}










/* ========================================

.l-container

======================================== */
.l-container {
    position: relative;
    width: 100%;
    max-width: var( --dw_px );
    margin: 0 auto;
    padding: 0;
}
@media screen and ( max-width: 768px ) {
    .l-container {
        max-width: none;
        margin: 0;
    }
}










/* ========================================

.l-container-inner

======================================== */
.l-container-inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}
.l-container-inner--w100 {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.l-container-inner__title {
    position: relative;
    width: 100%;
    margin: 0 0 min( calc( 60 * 100vw / var( --dw ) ), 60px );
    padding: 0;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-align: center;
}
/* 1200 + 120*2 + 15 */
@media screen and ( max-width: 1455px ) {
    .l-container-inner {
        max-width: none;
        margin: 0;
        padding: 0 10%;
    }
    .l-container-inner--mv {
    }
    .l-container-inner__title {
    }
}
@media screen and ( max-width: 768px ) {
    .l-container-inner {
        margin: 0;
        padding: 0 calc( 15 * 100vw / var( --dw ) );
    }
    .l-container-inner--w100 {
    }
    .l-container-inner__title {
        margin: 0 0 calc( 30 * 100vw / var( --dw ) );
    }
}










.c-navi-list {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
}
.c-navi-list__item {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}
.c-navi-list__item.spObj {
    display: none;
}
.c-navi-list__item a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 1em;
    line-height: 1;
    letter-spacing: 0.1em;
}
@media screen and ( max-width: 768px ) {
    .c-navi-list {
    }
    .c-navi-list__item {
    }
    .c-navi-list__item.spObj {
        display: block;
    }
    .c-navi-list__item a {
    }
}










/* ========================================

.header

======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    background-color: rgba( 56, 180, 139, 0 );
    transition: 0.5s;
    z-index: 100;
}
.header.is_scroled {
    background-color: rgba( 56, 180, 139, 0.75 );
}
.page_lower .header{
    background-color: rgba( 56, 180, 139, 0.75 );
}
.page_lower .header.is_scroled {
    background-color: rgba( 56, 180, 139, 0.75 );
}
@media screen and ( max-width: 768px ) {
    .header {
        height: calc( 65 * 100vw / var( --dw ) );
    }
}



.header .appeal {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: calc( 600 * 100vw / var( --dw ) );
    height: 100%;
    margin: 0;
    padding: 10px;
}
@media screen and ( max-width: 768px ) {
    .header .appeal {
        display: none;
    }
}



.header .appeal-button {
    position: relative;
    width: calc( 300 * 100vw / var( --dw ) );
    height: 100%;
    margin: 0;
    padding: 0;
}
.header .appeal-button a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc( 300 * 100vw / var( --dw ) );
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.header .appeal-button:first-of-type a {
    border-radius: 5px 0 0 5px;
}
.header .appeal-button:last-of-type a {
    border-radius: 0 5px 5px 0;
}
.header .appeal-button.button__gm a {
    background-color: rgba( 56, 180, 139, 1 );
}
.header .appeal-button.button__contact a {
    background-color: rgba( 255, 140, 0, 1 );
}
.header .appeal-button.button__register a {
    background-color: rgba( 25, 47, 96, 1 );
}
@media screen and ( max-width: 768px ) {
    .header .appeal-button {
    }
    .header .appeal-button a {
    }
    .header .appeal-button:first-of-type a {
    }
    .header .appeal-button:last-of-type a {
    }
    .header .appeal-button.button__gm a {
    }
    .header .appeal-button.button__contact a {
    }
    .header .appeal-button.button__register a {
    }
}



.header .appeal-button a .text {
    position: relative;
    display: inline-block;
    color: #fff;
    text-shadow: 0.1rem 0.1rem 0.2rem #000;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-align: center;
    z-index: 110;
}
@media screen and ( max-width: 768px ) {
    .header .appeal-button a .text {
    }
}



.header .appeal-button a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: translateX( -100% );
    transition: 0.5s;
}
.header .appeal-button.button__gm a::before {
    background-color: rgba( 56, 180, 139, 0.8 );
    background-color: rgba( 255, 255, 255, 0.2 );
}
.header .appeal-button.button__gm a:hover::before {
    transform: translateX( 0 );
}
.header .appeal-button.button__contact a::before {
    background-color: rgba( 255, 140, 0, 0.8 );
    background-color: rgba( 255, 255, 255, 0.2 );
}
.header .appeal-button.button__contact a:hover::before {
    transform: translateX( 0 );
}
.header .appeal-button.button__register a::before {
    background-color: rgba( 25, 47, 96, 0.8 );
    background-color: rgba( 255, 255, 255, 0.2 );
}
.header .appeal-button.button__register a:hover::before {
    transform: translateX( 0 );
}
@media screen and ( max-width: 768px ) {
    .header .appeal-button a::before {
        transition: unset;
    }
    .header .appeal-button.button__gm a::before {
    }
    .header .appeal-button.button__gm a:hover::before {
    }
    .header .appeal-button.button__contact a::before {
    }
    .header .appeal-button.button__contact a:hover::before {
    }
    .header .appeal-button.button__register a::before {
    }
    .header .appeal-button.button__register a:hover::before {
    }
}



.header-inner {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 15px 0 15px 15px;
}
@media screen and ( max-width: 768px ) {
    .header-inner {
        justify-content: space-between;
        width: 100%;
        padding: calc( 7.5 * 100vw / var( --dw ) );
    }
}



.header-inner-logo {
    position: relative;
    width: 400px;
    height: 70px;
    margin: 0;
    padding: 0;
}
.header-inner-logo a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: 0.5s;
}
.header-inner-logo a:hover {
    opacity: 0.7;
}
.header-inner-logo picture {
    position: relative;
    display: inline-block;
    width: 400px;
    aspect-ratio: 1025 / 177;
}
.header-inner-logo picture img {
    width: 100%;
}
@media screen and ( max-width: 768px ) {
    .header-inner-logo {
        width: calc( 235 * 100vw / var( --dw ) );
        height: calc( 50 * 100vw / var( --dw ) );
    }
    .header-inner-logo a {
        justify-content: flex-start;
        height: calc( 50 * 100vw / var( --dw ) );
    }
    .header-inner-logo a:hover {
    }
    .header-inner-logo picture {
        /*
        width: calc( 200 * 100vw / var( --dw ) );
        */
        width: auto;
        height: calc( 40 * 100vw / var( --dw ) );
    }
    .header-inner-logo picture img {
    }
}



.header-inner-navi {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 70px;
    margin: 0;
    padding: 20px 0 20px 20px;
}
/* 1200 + 120 * 2 + 15 */
@media screen and ( max-width: 1455px ) {
    .header-inner-navi {
        display: none;
    }
}



.header-inner-navi .c-navi-list {
    position: relative;
    height: 100%;
}
.header-inner-navi .c-navi-list__item {
    position: relative;
    height: 100%;
}
.header-inner-navi .c-navi-list__item a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 1em;
    color: rgba( 255, 255, 255, 1 );
    text-shadow: 0.1rem 0.1rem 0.2rem #000;
    background-color: rgba( 255, 255, 255, 0 );
    border-radius: 5px;
    transition: 0.5s;
}
.header-inner-navi .c-navi-list__item a:hover {
    color: rgba( 0, 0, 0, 1 );
    text-shadow: 0.1rem 0.1rem 0.2rem #fff;
    background-color: rgba( 255, 255, 255, 0.8 );
}




.header-inner-hamburger {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    margin: 0;
    padding: 0;
}
.header-inner-hamburger-button {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    background-color: rgba( 255, 255, 255, 0.5 );
    cursor: pointer;
}
.header-inner-hamburger-button__line {
    position: absolute;
    left: 11px;
    width: 26px;
    height: 2px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    opacity: 1;
    transition: 0.5s;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
.header-inner-hamburger-button .line_top {
    top: 14px;
}
.header-inner-hamburger-button .line_middle {
    top: 23px;
}
.header-inner-hamburger-button .line_bottom {
    top: 32px;
}
.header-inner-hamburger-button.is_active .line_top {
    transform: translateY( 9px ) rotate( -45deg );
}
.header-inner-hamburger-button.is_active .line_middle {
    opacity: 0;
}
.header-inner-hamburger-button.is_active .line_bottom {
    transform: translateY( -9px ) rotate( 45deg );
}
/* 1200 + 120 * 2 + 15 */
@media screen and ( max-width: 1455px ) {
    .header-inner-hamburger {
        display: flex;
        margin-left: 20px;
    }
}
@media screen and ( max-width: 768px ) {
    .header-inner-hamburger {
        width: calc( 50 * 100vw / var( --dw ) );
        height: calc( 50 * 100vw / var( --dw ) );
        margin-left: 0;
    }
    .header-inner-hamburger-button {
        width: calc( 48 * 100vw / var( --dw ) );
        height: calc( 48 * 100vw / var( --dw ) );
    }
    .header-inner-hamburger-button__line {
        position: absolute;
        left: calc( 11 * 100vw / var( --dw ) );
        width: calc( 26 * 100vw / var( --dw ) );
    }
    .header-inner-hamburger-button .line_top {
        top: calc( 14 * 100vw / var( --dw ) );
    }
    .header-inner-hamburger-button .line_middle {
        top: calc( 23 * 100vw / var( --dw ) );
    }
    .header-inner-hamburger-button .line_bottom {
        top: calc( 32 * 100vw / var( --dw ) );
    }
    .header-inner-hamburger-button.is_active .line_top {
        transform: translateY( calc( 9 * 100vw / var( --dw ) ) ) rotate( -45deg );
    }
    .header-inner-hamburger-button.is_active .line_middle {
        opacity: 0;
    }
    .header-inner-hamburger-button.is_active .line_bottom {
        transform: translateY( calc( -9 * 100vw / var( --dw ) ) ) rotate( 45deg );
    }
}









/* ========================================

main

======================================== */
.main {
}
@media screen and ( max-width: 768px ) {
    .main {
    }
}












/* ========================================

.footer

======================================== */
.footer {
}
.footer-inner {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
.footer-inner__copyright {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4em;
    margin: 0;
    padding: 0;
    text-align: center;
}
@media screen and ( max-width: 768px ) {
    .footer {
        margin-bottom: min( calc( 65 * 100vw / var( --dw ) ), 100px );
    }
    .page_lower .footer {
        margin-bottom: 0;
    }
    .footer-inner {
    }
    .footer-inner__copyright {
        height: 6em;
    }
}










/* ========================================

.drawer

======================================== */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 100px 0;
    transform: translateX( -100% );
    opacity: 0;
    background-color: rgba( 0, 0, 0, 0.95 );
    visibility: hidden;
    transition: 0.5s;
    z-index: 20;
}
.drawer.is_active {
    visibility: visible;
    transform: translateX( 0 );
    opacity: 1;
}
@media screen and ( max-width: 768px ) {
    .drawer {
        padding: calc( 70 * 100vw / var( --dw ) ) 0;
    }
    .drawer.is_active {
    }
}



.drawer-inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 30px 0;
}
/* 1200 + 120 * 2 + 15 */
@media screen and ( max-width: 1455px ) {
    .drawer-inner {
        max-width: none;
        margin: 0;
        padding: 30px 10%;
    }
}
@media screen and ( max-width: 768px ) {
    .drawer-inner {
        padding: calc( 30 * 100vw / var( --dw ) );
    }
}



.drawer-inner-navi {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.drawer-inner-navi .c-navi-list {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.drawer-inner-navi .c-navi-list__item {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1em 0;
    border-top: 1px solid #999;
}
.drawer-inner-navi .c-navi-list__item:first-of-type {
    border-top: none;
}
.drawer-inner-navi .c-navi-list__item a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    text-shadow: 0.1rem 0.1rem 0.2rem #000;
    line-height: 1.6;
    letter-spacing: 0.1em;
    opacity: 1;
    transition: 0.5s;
}
.drawer-inner-navi .c-navi-list__item a:hover {
    opacity: 0.75;
}
/* 1200 + 120 * 2 + 15 */
@media screen and ( max-width: 1455px ) {
}
@media screen and ( max-width: 768px ) {
    .drawer-inner-navi {
    }
    .drawer-inner-navi .c-navi-list {
    }
    .drawer-inner-navi .c-navi-list__item {
    }
    .drawer-inner-navi .c-navi-list__item:first-of-type {
        border-top: none;
    }
    .drawer-inner-navi .c-navi-list__item a {
    }
    .drawer-inner-navi .c-navi-list__item a:hover {
    }
}










/* ========================================

.sp_appeal

======================================== */
.sp_appeal {
    display: none;
}
.sp_appeal.is_scroled {
    display: none;
}
@media screen and ( max-width: 768px ) {
    .sp_appeal {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: min( calc( 65 * 100vw / var( --dw ) ), 100px );
        margin: 0;
        padding: 0;
        z-index: 100;
    }
    .sp_appeal.is_scroled {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
    }
    .sp_appeal .appeal-button {
        position: relative;
        width: 100%;
        height: min( calc( 65 * 100vw / var( --dw ) ), 100px );
        margin: 0;
        padding: 0;
    }
    .sp_appeal .appeal-button a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .sp_appeal .appeal-button.button__gm a {
        background-color: rgba( 56, 180, 139, 1 );
    }
    .sp_appeal .appeal-button.button__contact a {
        background-color: rgba( 255, 140, 0, 1 );
    }
    .sp_appeal .appeal-button.button__register a {
        background-color: rgba( 25, 47, 96, 1 );
    }
    .sp_appeal .appeal-button a .text {
        position: relative;
        display: inline-block;
        color: #fff;
        text-shadow: 0.1rem 0.1rem 0.2rem #000;
        line-height: 1.6;
        letter-spacing: 0.1em;
        text-align: center;
        z-index: 110;
    }
}