@charset 'UTF-8';
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
/*リンク透過*/
@import url(base.css);
@media print
{
    header,
    footer
    {
        display: none !important;
    }
}

/*
-----------------------------------------------------------------------
common
-----------------------------------------------------------------------
*/
html
{
    font-size: 62.5%;
    /*16px*/
}

body
{
    font-family: 'Noto Sans Japanese', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif;
    font-size: 1.6rem;
    line-height: 1.4rem;


    width: 100vw;

    color: #333;
}

.pc
{
    display: block;
}

@media only screen and (max-width: 768px)
{
    .pc
    {
        display: none;
    }
}

#classbox
{
    display: none !important;
}

.sp
{
    display: none;
}

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

.wrapper
{
    position: relative;

}

@media only screen and (min-width: 769px)
{
    .wrapper
    {
        width: 100%;
    }
}


@media only screen and (max-width: 768px)
{
    .wrapper
    {
        position: static;
    }
}

.wrapper.gray::before
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    content: '';

    background-color: rgba(255, 255, 255, .15);
}

@media only screen and (max-width: 768px)
{
    .wrapper.gray::before
    {
        display: none;
    }
}

.wrapper.gray::after
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    content: '';

    background-color: rgba(0, 0, 0, .3);
}

@media only screen and (max-width: 768px)
{
    .wrapper.gray::after
    {
        display: none;
    }
}

/*
-----------------------------------------------------------------------
header
-----------------------------------------------------------------------
*/
.header
{
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;

    width: 100%;

    transition: top .5s;
    transition-delay: 1s;

    background-color: rgba(255, 255, 255, .9);
}

@media only screen and (max-width: 768px)
{
    .header
    {
        position: fixed;
    }
}

.header.pc_opennav
{
    top: -65px;

    transition: top .8s ease-in-out 0s;
}

.lower .header.bg-opacity
{
    background-color: #fff;
}

.header .header__wrapper
{
    height: 60px;
    padding: 0 50px;
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper
    {
        position: relative;

        display: table;

        width: 100%;
        height: 50px;
        padding: 0 15px 0 10px;

        background-color: #fff;
    }
}

.header .header__wrapper .header__nav
{
    position: absolute;
    top: 33%;
    right: 120px;
}

@media (max-width: 1500px)
{
    .header .header__wrapper .header__nav
    {
        display: none !important;
    }
}

.header .header__wrapper .header__nav .header__nav__list
{
    font-size: 1.3rem;
    font-weight: 700;

    float: left;

    margin-right: 40px;
}

.header .header__wrapper .header__nav .header__nav__list i
{
    font-size: 1.4rem;

    display: inline-block;

    padding-right: 10px;
}

.header .header__wrapper .header__nav .header__nav__list:last-of-type
{
    font-family: 'Roboto', Sans-Serif;
    /*padding-top: 2px;*/
    font-size: 2.4rem;
    font-weight: 500;

    margin-top: -5px;
    margin-right: 0;

    color: #649193 !important;
    color: #abb9c2;
}

.header .header__wrapper .header__nav .header__nav__list:last-of-type span
{
    font-size: 1.4rem;
    font-weight: bold;
}

.header .header__wrapper .header__nav .header__nav__list a
{
    transition: opacity .2s;

    color: #649193;
}

.header .header__wrapper .header__nav .header__nav__list a:hover
{
    opacity: .8;
}

.header .header__wrapper .logo
{
    font-size: 1.4rem;

    position: absolute;
    top: 20px;
    left: 50px;

    display: inline-block;

    transition: top .5s;
    transition-delay: 1s;
}

.header .header__wrapper .logo img
{
    width: 503px;
    height: 25px;
}

.header .header__wrapper .logo.pc_opennav
{
    top: -60px;

    transition: top .8s ease-in-out 0s;
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .logo
    {
        top: 16px;
        left: 15px;
    }
    .header .header__wrapper .logo img
    {
        width: 300px;
        height: auto;
        /*
					width: 175px;
					height: 16px;
					*/
    }
}

.header .header__wrapper .logo a
{
    transition: opacity .2s;
}

.header .header__wrapper .logo a:hover
{
    opacity: .8;
}

.header .header__wrapper .burgermenu
{
    position: absolute;
    top: 17px;
    right: 50px;

    width: 30px;
    height: 28px;

    cursor: pointer;
    transition: opacity .2s;
}

.header .header__wrapper .burgermenu.burgermenu_pc
{
    display: block;
}

.header .header__wrapper .burgermenu.burgermenu_sp
{
    display: none;
}

.header .header__wrapper .burgermenu:hover
{
    opacity: .8;
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu.burgermenu_pc
    {
        display: none;
    }
    .header .header__wrapper .burgermenu.burgermenu_sp
    {
        top: 38%;
        right: 16px;

        display: block;

        width: 20px;
        height: 20px;
    }
    .header .header__wrapper .burgermenu.burgermenu_sp .burgermenu__line
    {
        display: none;
    }
}

.header .header__wrapper .burgermenu div
{
    position: relative;
}

.header .header__wrapper .burgermenu div::before
{
    display: block;

    padding-top: 30px;

    content: '';
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu div::before
    {
        padding-top: 19px;
    }
}

.header .header__wrapper .burgermenu div span
{
    position: absolute;

    display: block;

    width: 100%;

    transition: .35s ease;

    border-bottom: 1px solid #649193;
}

.header .header__wrapper .burgermenu div span:nth-child(1)
{
    top: 0;
}

.header .header__wrapper .burgermenu div span:nth-child(2)
{
    top: 7px;
}

.header .header__wrapper .burgermenu div span:nth-child(3)
{
    top: 14px;
}

.header .header__wrapper .burgermenu div span:nth-child(4)
{
    top: 18px;
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu div span
    {
        border-bottom: 2px solid #649193;
    }
    .header .header__wrapper .burgermenu div span:nth-child(1)
    {
        top: 0;
    }
    .header .header__wrapper .burgermenu div span:nth-child(2)
    {
        top: 5px;
    }
    .header .header__wrapper .burgermenu div span:nth-child(3)
    {
        top: 10px;
    }
}

.header .header__wrapper .burgermenu div span.burgermenu__txt
{
    font-family: 'Roboto', Sans-Serif;
    font-size: 1.0rem;

    text-align: center;

    color: #649193;
    border-bottom: none;
    /* letter-spacing: 0.1em; */
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu div span.burgermenu__txt
    {
        display: none;
    }
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu.sp_opennav div span:nth-child(1)
    {
        top: 1px;
        right: -1px;

        width: 12px;

        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .header .header__wrapper .burgermenu.sp_opennav div span:nth-child(2)
    {
        top: 5px;
    }
    .header .header__wrapper .burgermenu.sp_opennav div span:nth-child(3)
    {
        top: 9px;
        right: -1px;

        width: 12px;

        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }
    .header .header__wrapper .burgermenu.sp_opennav div span.burgermenu__line
    {
        top: -3px;
        right: 0;

        display: block;

        width: 2px;
        height: 18px;

        border-right: 2px solid #4f7389;
    }
}

.header .header__wrapper .burgermenu__nav
{
    font-family: 'Roboto', Sans-Serif;
    font-size: 1.4rem;
    font-weight: 500;

    position: absolute;
    z-index: 10;
    top: 65px;
    right: -20%;

    width: 20%;
    max-width: 250px;
    min-height: 100vh;
    padding: 140px 45px 40px;

    -webkit-transition: right .8s ease-in-out 0s;
       -moz-transition: right .8s ease-in-out 0s;
            transition: right .8s ease-in-out 0s;
    letter-spacing: .1em;

    background-color: rgba(79, 115, 137, .9);
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu__nav
    {
        max-width: none;
    }
}

.header .header__wrapper .burgermenu__nav.pc_opennav
{
    right: 0;

    transition: right .6s ease-in-out 1.1s;
}

.header .header__wrapper .burgermenu__nav .burgermenu__nav__list
{
    margin-bottom: 50px;
}

.header .header__wrapper .burgermenu__nav .burgermenu__nav__list:last-of-type
{
    margin-bottom: 0;

    color: #b6c2ca;
}

.header .header__wrapper .burgermenu__nav .burgermenu__nav__list_jp
{
    font-family: 'Noto Sans Japanese', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif;
}

.en .header .header__wrapper .burgermenu__nav .burgermenu__nav__list_jp
{
    font-family: 'Roboto', Sans-Serif;
}

.header .header__wrapper .burgermenu__nav .burgermenu__nav__list a
{
    transition: opacity .2s;

    color: #fff;
}

.header .header__wrapper .burgermenu__nav .burgermenu__nav__list a:hover
{
    opacity: .8;
}

.header .header__wrapper .burgermenu__nav__button
{
    font-size: 1.3rem;
    font-weight: 500;

    position: absolute;
    bottom: 100px;

    display: inline-block;

    width: 140px;

    text-align: center;

    border-radius: 20px;
    background-color: #fff;
}

.header .header__wrapper .burgermenu__nav__button a
{
    display: block;

    padding: 3px 0 2px;

    transition: opacity .2s;

    color: #649193;
}

.header .header__wrapper .burgermenu__nav__button a:hover
{
    opacity: .8;
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu__nav__button
    {
        position: static;
    }
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu__nav
    {
        font-size: 2.0rem;

        top: 50px;
        right: -100%;

        overflow-y: scroll;

        width: 100%;
        height: calc(100vh - 50px);
        padding: 75px 40px 170px;

        transition: .55s ease-in-out;
        letter-spacing: 0;

        background-color: #649193;

        -webkit-overflow-scrolling: touch;
    }
    .header .header__wrapper .burgermenu__nav .burgermenu__nav__list
    {
        margin-bottom: 34px;
    }
    .header .header__wrapper .burgermenu__nav .burgermenu__nav__list:last-of-type
    {
        margin-bottom: 0;
    }
    .header .header__wrapper .burgermenu__nav .burgermenu__nav__list_jp
    {
        font-family: 'Noto Sans Japanese', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif;
    }
    .header .header__wrapper .burgermenu__nav .burgermenu__nav__button
    {
        font-size: 2.0rem;

        position: static;

        display: inline-block;

        width: 240px;
        margin-top: 50px;
        padding: 2px 0;

        text-align: center;

        border-radius: 20px;
        background-color: #fff;
    }
    .header .header__wrapper .burgermenu__nav .burgermenu__nav__button a
    {
        color: #649193;
    }
    .header .header__wrapper .burgermenu__nav.sp_opennav
    {
        right: 0;
    }
}

.header .header__wrapper .burgermenu__nav .burgermenu_pc_close
{
    position: absolute;
    top: 20px;
    right: 20px;

    width: 40px;
    height: 40px;

    cursor: pointer;
    transition: opacity .2s;
}

.header .header__wrapper .burgermenu__nav .burgermenu_pc_close:hover
{
    opacity: .8;
}

.header .header__wrapper .burgermenu__nav .burgermenu_pc_close > span
{
    position: absolute;

    display: block;
}

.header .header__wrapper .burgermenu__nav .burgermenu_pc_close > span:first-of-type
{
    top: 19px;
    left: 3px;

    width: 30px;
    height: 2px;

    background-color: #fff;
}

.header .header__wrapper .burgermenu__nav .burgermenu_pc_close > span:nth-of-type(2)
{
    top: 12px;
    right: 8px;

    width: 15px;
    height: 15px;

    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);

    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.header .header__wrapper .burgermenu__nav .burgermenu_pc_close > span:last-of-type
{
    top: 10px;
    right: 5px;

    width: 2px;
    height: 20px;

    background-color: #fff;
}

@media only screen and (max-width: 768px)
{
    .header .header__wrapper .burgermenu__nav .burgermenu_pc_close
    {
        display: none;
    }
}

/*
-----------------------------------------------------------------------
footer
-----------------------------------------------------------------------
*/
footer
{
    position: fixed;
    bottom: 30px;

    width: 100%;

    transition: .5s;
    transition-delay: 1s;
}

@media only screen and (max-width: 768px)
{
    footer
    {
        position: static;
        bottom: 0;

        width: auto;

        transition: 0s;
        transition-delay: 0s;
    }
}

footer.pc_opennav
{
    bottom: -30px;

    transition: bottom .8s ease-in-out 0s;
}

.lower footer.pc_opennav
{
    bottom: 0;

    transition: bottom 0s;
}

footer .footer__contents .footer__contents__left,
footer .footer__contents .footer__contents__right
{
    font-family: 'Roboto', Sans-Serif;
    font-size: 1.3rem;

    letter-spacing: .1em;
}

footer .footer__contents .footer__contents__left
{
    float: left;

    margin-top: 4px;
    padding-left: 60px;

    transition: .5s;
    transition-delay: 1s;
}

footer .footer__contents .footer__contents__left .footer__contents__left__list
{
    float: left;

    margin-right: 30px;
}

footer .footer__contents .footer__contents__left .footer__contents__left__list:last-of-type
{
    margin-right: 0;
}

footer .footer__contents .footer__contents__left .footer__contents__left__list a
{
    transition: .2s;
}

footer .footer__contents .footer__contents__left .footer__contents__left__list a:hover
{
    opacity: .8;
}

footer .footer__contents .footer__contents__left.none
{
    transition-delay: 0s;
    pointer-events: none;

    opacity: 0;
}

footer .footer__contents .footer__contents__right
{
    font-size: 1.3rem;
    font-weight: 500;

    display: inline-block;
    float: right;

    width: 150px;
    margin-right: 60px;

    transition: .2s;
    text-align: center;

    border-radius: 20px;
    background-color: #fff;
}

footer .footer__contents .footer__contents__right:hover
{
    opacity: .8;
}

footer .footer__contents .footer__contents__right a
{
    display: block;

    padding: 4px 0 3px;

    color: #649193;
}

footer.contact__wrapper
{
    /*
		background-color: $color-main;
		*/
    background-color: #000;
}

@media only screen and (max-width: 768px)
{
    footer.contact__wrapper
    {
        padding: 65px 20px 80px;
    }
}

@media only screen and (max-width: 768px)
{
    footer.contact__wrapper .section__title
    {
        font-size: 2.4rem;

        margin-bottom: 0;
        padding-bottom: 20px;

        border-bottom: 1px solid #fff;
    }
}

@media only screen and (max-width: 768px)
{
    footer.contact__wrapper .contact__link
    {
        width: 259px;
        margin: 0 auto;
        padding-top: 20px;
    }
}

footer.contact__wrapper .contact__link .contact__link__list
{
    font-family: 'Roboto', Sans-Serif;
    font-size: 1.3rem;
    line-height: 4.0rem;

    float: left;

    margin-right: 25px;

    vertical-align: middle;
}

footer.contact__wrapper .contact__link .contact__link__list:last-of-type
{
    margin-right: 0;
}

.lower footer.pc
{
    position: static;

    display: table;

    height: 110px;

    transition: 0s;
    transition-delay: 0s;
    /*
		background-color: $color-main;
		*/

    background-color: #000;
}

@media only screen and (max-width: 768px)
{
    .lower footer.pc
    {
        display: none;
    }
}

.lower footer.pc .footer__contents
{
    display: table-cell;

    vertical-align: middle;
}

/*
----------------------------------------
font-color
----------------------------------------
*/
.txt-red
{
    color: #e95757;
}

/*
----------------------------------------
huckclearfix
----------------------------------------
*/

.clearbox
{
    display: inline-block;
}


.clearbox:after
{
    display: block;
    visibility: hidden;
    clear: both;

    height: 0;

    content: '';
}

/*\*/
* html .clearbox
{
    height: 1%;
}


.clearbox
{
    display: block;
}

/**/