@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@font-face {
    font-family: 'GT Eesti';
    src: url('../font/GT-Eesti-Display-Regular.woff2') format('woff2'), url('../font/GT-Eesti-Display-Regular.woff') format('woff'), url('../font/GT-Eesti-Display-Regular-2.woff2') format('woff2'), url('../font/GT-Eesti-Display-Regular-2.woff') format('woff'), url('../font/GT-Eesti-Display-Regular.ttf') format('truetype'), url('../font/GT-Eesti-Display-Regular.otf') format('opentype');
}


/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/


/* ++++++++++++++++++++++++++++++++++++++++++++++ */


/* 共通項目 */


/* ++++++++++++++++++++++++++++++++++++++++++++++ */

.cbox:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

* html .cbox {
    zoom: 100%;
}

*:first-child+html .cbox {
    display: inline-block;
}

* html ul {
    zoom: 100%;
}

*:first-child+html ul {
    display: inline-block;
}

ul li {
    list-style: none;
}


/* 画像 */

img {
    max-width: 100%;
}


/* リンク */

a {
    color: #000;
    transition: 0.4s;
    -webkit-transition: 0.4s;
}

a:hover {
    /*color: #888;*/
}


/* テキスト装飾 */

strong {
    font-weight: bold;
}

.cap {
    line-height: 1.5;
    font-size: 86%;
}

.indent {
    padding-left: 1em;
    text-indent: -1em;
}

.en {
    font-family: 'GT Eesti', sans-serif;
    font-weight: 400;
    font-style: normal;
}


/* 横幅 */

body {
    font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
    color: #212121;
    padding: 0;
    margin: 0;
    font-weight: 300;
    letter-spacing: 1px;
    -webkit-text-size-adjust: 100%;
    position: relative;
}


/* テーブル */

.table {
    border-collapse: collapse;
    width: 100%;
}

.table tr:not(:first-child) th {
    border-top: 1px solid #d384af;
}

.table tr:not(:first-child) td {
    border-top: 1px solid #bdbdbd;
}

.table th {
    color: #fff;
    background-color: #A20061;
    padding: 15px 20px;
    font-weight: normal;
}

.table td {
    background-color: #fff;
    padding: 15px 20px;
}


/* アニメーション */


/* ++++++++++++++++++++++++++++++++++++++++++++++ */

@keyframes blur_in {
    0% {
        filter: blur(10px);
        transform: scale(1.05);
        opacity: 0;
    }
    100% {
        filter: blur(0);
        transform: scale(1.0);
        opacity: 1.0;
    }
}

@keyframes blur_in_t {
    0% {
        filter: blur(10px);
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        filter: blur(0);
        transform: translateY(0);
        opacity: 1.0;
    }
}

@keyframes blur {
    0% {
        filter: blur(10px);
        opacity: 0;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}

.blur,
.blur_in,
.blur_in_t {
    opacity: 0;
}

.blur_in.on {
    animation: blur_in 1s ease-out forwards;
}

.blur.on {
    animation: blur 1s ease-out forwards;
}

.blur_in_t.on {
    animation: blur_in_t 1s ease-out forwards;
}

.fadein {
    opacity: 0;
    transition-delay: .2s;
    transition-duration: 1s;
}

.fadein_t,
.fadein_list li {
    opacity: 0;
    transition-duration: 1s;
    transform: translateY(-10px);
}

.fadein_b {
    opacity: 0;
    transition-duration: 1s;
    transform: translateY(10px);
}

.fadein_l {
    opacity: 0;
    transition-delay: .2s;
    transition-duration: 1s;
    transform: translateX(-10px);
}

.fadein_r {
    opacity: 0;
    transition-delay: .2s;
    transition-duration: 1s;
    transform: translateX(10px);
}

.fadein.on,
.fadein_t.on,
.fadein_list li.on,
.fadein_b.on {
    opacity: 1;
    transform: translateY(0px);
}

.fadein_l.on,
.fadein_r.on {
    opacity: 1;
    transform: translateX(0px);
}


/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */


/* 801px ~ */

@media screen and (min-width: 801px),
print {
    .sp {
        display: none !important;
    }
    body {
        min-width: 1040px;
    }
    /* ヘッダー pc */
    #header {
        position: fixed;
        z-index: 100;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        height: 65px;
    }
    .fixed#header {
        /*position: absolute;
		top: 1px;*/
    }
    #header .content {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        padding: 0 8vw 0 20px;
    }
    #header #logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        position: relative;
        z-index: 10000;
    }
    #header #logo a {
        display: flex;
        align-items: center;
        height: 100%;
    }
    #header #logo img {
        max-width: 159px;
        width: 11vw;
    }
    #header #logo span.en {
        font-size: min(0.86vw, 12px);
        margin-left: 15px;
    }
    #header .nav {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        letter-spacing: 2px;
        height: 100%;
        width: 43vw;
        margin: auto 2vw auto 4vw;
    }
    #header .nav>li {
        height: 100%;
        font-size: 0;
        position: relative;
    }
    #header .nav .cat_name {
        font-size: min(0.93vw, 13px);
        height: 100%;
        display: inline-block;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        z-index: 2;
        cursor: pointer;
    }
    #header .nav>li .cat_name:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 4px;
        background-color: #f06400;
        bottom: 0;
        left: 0;
        transition: ease 0.6s;
        transform: scale(0, 1.0);
    }
    #header .nav>li.active .cat_name:after {
        transform: scale(1.0, 1.0);
    }
    #header .nav>li+li a {}
    #header .nav li a {
        display: block;
    }
    #header .nav>li .nav_second-level {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 65px;
        box-sizing: border-box;
        z-index: -2;
        font-size: 14px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: ease 0.6s opacity;
    }
    #header .nav>li.active .nav_second-level {
        pointer-events: auto;
        opacity: 1;
    }
    #header .nav>li .nav_second-level_wrap {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        background-color: #fff;
    }
    #header .nav>li .nav_second-level_wrap li {
        position: relative;
    }
    #header .nav>li .nav_second-level_wrap li+li:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        top: 0;
        background-color: #fff;
    }
    #header .nav>li .nav_second-level_wrap a {
        display: block;
        padding: 10px;
        background-color: #000;
        color: #fff;
    }
    #header .nav>li .nav_second-level_wrap a:hover {
        background-color: #f06400;
    }
    #header .header_btn {
        font-size: min(1.2vw, 16px);
        /*width: 16vw;*/
        width: 8vw;
        position: relative;
        z-index: 10000;
    }
    #header .header_btn a {
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 65px;
        /*width: 50%;*/
        width: 100%;
        color: #fff;
        text-align: center;
        line-height: 1.2em;
        font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
        font-weight: 600;
    }
    #header .header_btn .entry {
        background-color: #0a9bcd;
    }
    #header .header_btn .mypage {
        background-color: #f06400;
    }
    /* フッター pc  */
    footer {
        width: 100%;
    }
    footer .wrap {
        padding-top: 80px;
        margin-bottom: 25px;
        text-align: center;
        position: relative;
    }
    footer .wrap .footer_link {
        position: absolute;
        left: 0;
        top: 20px;
        font-size: 12px;
    }
    footer .wrap .footer_link a {
        display: inline-block;
        text-decoration: underline;
    }
    footer .wrap .footer_link a+a {
        padding-left: 10px;
    }
    footer .logo {
        margin-bottom: 10px;
    }
    footer .logo img {
        width: 159px;
    }
    footer .logo .en {
        margin-left: 15px;
    }
    footer .copyright {
        text-align: center;
        font-size: 12px;
        letter-spacing: 0.1em;
    }
    /*  contents  */
    .wrap {
        margin-left: auto;
        margin-right: auto;
        width: 1040px;
    }
    .bl_btn {
        display: block;
        position: relative;
        background-color: #000;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: 400;
        color: #fff;
        box-shadow: 8px 8px rgba(206, 206, 206, 0.75);
        margin-right: 25px;
    }
    .bl_btn .inner {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 0 25px 0 15px;
        box-sizing: border-box;
    }
    .bl_btn:after,
    .bl_btn .inner:after {
        content: '';
        display: block;
        position: absolute;
        width: 34px;
        height: 11px;
        right: -18px;
        top: 50%;
        margin-top: -10px;
        transition: 0.4s;
    }
    .bl_btn:after {
        background: url("../img/arrow_b.svg") no-repeat center;
        background-size: cover;
    }
    .bl_btn .inner:after {
        background: url("../img/arrow.svg") no-repeat center;
        background-size: cover;
        z-index: 2;
    }
    .bl_btn:hover {
        transform: translate(8px, 8px);
        box-shadow: none;
    }
    .bl_btn:hover:after,
    .bl_btn:hover .inner:after {
        right: -25px;
    }
    /* あしらい */
    body:not(#top) .deco {
        display: block;
        position: absolute;
    }
    body:not(#top) .deco span {
        display: block;
        width: 100%;
        height: 100%;
        transition: 0.3s 1.3s;
    }
    body:not(#top) .deco.off span {
        width: 0%;
    }
    body:not(#top) .deco_s {
        width: 4vw;
        height: 12px;
    }
    body:not(#top) .deco_m {
        width: 7vw;
        height: 17px;
    }
    body:not(#top) .deco_l {
        width: 12vw;
        height: 27px;
    }
    body:not(#top) .bg_o span {
        background-color: #f06400;
    }
    body:not(#top) .bg_g span {
        background-color: #00b176;
    }
    body:not(#top) .bg_b span {
        background-color: #0a9bcd;
    }
    body:not(#top) .bg_y span {
        background-color: #f5b400;
    }
    body:not(#top) .bg_p span {
        background-color: #6e3cbe;
    }
    body:not(#top) .bg_w span {
        background-color: #fff;
    }
}


/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */


/* ~ 800px */

@media only screen and (max-width: 800px) {
    .pc {
        display: none !important;
    }
    body {}
    div.fat-nav__wrapper {
        height: 100%;
    }
    img {
        max-width: 100%;
    }
    /* ヘッダー sp */
    #header {
        position: fixed;
        z-index: 100;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        height: 50px;
    }
    .fixed#header {
        position: fixed;
        z-index: 99;
        height: 50px;
    }
    #header .content {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 81vw;
        height: 100%;
        min-width: calc(100% - 70px);
        position: relative;
        background-color: #fff;
        z-index: 10000;
    }
    #header #logo {
        padding-left: 3vw;
        width: 52vw;
        box-sizing: border-box;
    }
    #header #logo a {}
    #header #logo img {
        width: 100px;
    }
    #header #logo span.en {
        display: block;
        font-size: 10px;
        margin-top: 5px;
        line-height: 1;
    }
    #header .header_btn {
        font-size: clamp(10px, 1.2vw, 16px);
        /*width: 32vw;*/
        width: 16vw;
        max-width: 140px;
        height: 100%;
        position: relative;
        z-index: 10000;
    }
    #header .header_btn a {
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        /*width: 50%;*/
        width: 100%;
        height: 100%;
        color: #fff;
        text-align: center;
    }
    #header .header_btn .entry {
        background-color: #0a9bcd;
    }
    #header .header_btn .mypage {
        background-color: #f06400;
    }
    /* フッター sp  */
    footer {
        width: 100%;
    }
    footer .wrap {
        position: relative;
        padding-top: 20px;
        margin-bottom: 25px;
        text-align: center;
    }
    footer .wrap .footer_link {
        padding-bottom: 40px;
        font-size: 12px;
        text-align: center;
    }
    footer .wrap .footer_link a {
        display: inline-block;
        text-decoration: underline;
    }
    footer .wrap .footer_link a+a {
        padding-left: 10px;
    }
    footer .logo {
        margin-bottom: 10px;
    }
    footer .logo img {
        width: 140px;
    }
    footer .logo .en {
        margin-left: 15px;
    }
    footer .copyright {
        text-align: center;
        font-size: 11px;
        letter-spacing: 0.1em;
    }
    /* contents */
    .bl_btn {
        display: block;
        position: relative;
        background-color: #000;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        color: #fff;
        box-shadow: 8px 8px rgba(206, 206, 206, 0.75);
        margin-right: 25px;
    }
    .bl_btn .inner {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 10px 25px 12px 15px;
        box-sizing: border-box;
    }
    .bl_btn:after,
    .bl_btn .inner:after {
        content: '';
        display: block;
        position: absolute;
        width: 34px;
        height: 11px;
        right: -18px;
        top: 50%;
        margin-top: -10px;
        transition: 0.4s;
    }
    .bl_btn:after {
        background: url("../img/arrow_b.svg") no-repeat center;
        background-size: cover;
    }
    .bl_btn .inner:after {
        background: url("../img/arrow.svg") no-repeat center;
        background-size: cover;
        z-index: 2;
    }
    /* あしらい */
    body:not(#top) .deco {
        display: block;
        position: absolute;
    }
    body:not(#top) .deco span {
        display: block;
        width: 100%;
        height: 100%;
        transition: 0.3s 1.3s;
    }
    body:not(#top) .deco.off span {
        width: 0%;
    }
    body:not(#top) .deco_s {
        width: 7vw;
        height: 7px;
    }
    body:not(#top) .deco_m {
        width: 12vw;
        height: 10px;
    }
    body:not(#top) .deco_l {
        width: 16vw;
        height: 15px;
    }
    body:not(#top) .bg_o span {
        background-color: #f06400;
    }
    body:not(#top) .bg_g span {
        background-color: #00b176;
    }
    body:not(#top) .bg_b span {
        background-color: #0a9bcd;
    }
    body:not(#top) .bg_y span {
        background-color: #f5b400;
    }
    body:not(#top) .bg_p span {
        background-color: #6e3cbe;
    }
    body:not(#top) .bg_w span {
        background-color: #fff;
    }
    body:not(#top) .scroll {
        overflow: scroll;
        position: relative;
    }
    body:not(#top) .scroll:before {
        position: absolute;
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        z-index: 98;
    }
    body:not(#top) .scroll:after {
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        content: "";
        width: 51px;
        height: 60px;
        background-image: url("../img/touch.svg");
        background-size: cover;
        z-index: 99;
    }
    body:not(#top) .scroll.off:before,
    body:not(#top) .scroll.off:after {
        display: none;
    }
    body:not(#top) .scroll table {
        overflow: auto;
        width: 600px;
        background: #fff;
    }
}