@charset "UTF-8";
/* Scss Document */


@font-face {
	font-family: "NotoSansCJKjp-Medium";
	src: url(../webfont/NotoSansCJKjp-Medium.woff) format('woff');
	font-display: swap;
}

@font-face {
	font-family: "NotoSansCJKjp-Regular";
	src: url(../webfont/NotoSansCJKjp-Regular.woff) format('woff');
	font-display: swap;
}

@font-face {
	font-family: "Anton-Regular";
	src: url(../webfont/Anton-Regular.woff) format("woff");
	-ms-font-feature-settings: "normal";
	font-display: swap;
}

@font-face {
	font-family: "Anta-Regular";
	src: url(../webfont/Anta-Regular.woff) format("woff");
	-ms-font-feature-settings: "normal";
	font-display: swap;
}


@font-face {
	font-family: "A-OTF-Gothic-MB101-Pro-H_1";
	src: url(../webfont/A-OTF-Gothic-MB101-Pro-H_1.woff) format("woff");
	-ms-font-feature-settings: "normal";
	font-display: swap;
}
.font_cjk_m {
	font-family: "noto-sans-cjk-jp", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.font_cjk_b {
	font-family: "noto-sans-cjk-jp", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.font_r {
	font-family: "NotoSansCJKjp-Regular";
}

.font_anton {
	font-family: "Anton-Regular", sans-serif;
}

.font_aotf_h {
	font-family: "A-OTF-Gothic-MB101-Pro-H_1", sans-serif;
}

.font_anta {
	font-family: "Anta-Regular", sans-serif;
}

#sp_box {
	font-family: "NotoSansCJKjp-Medium", sans-serif;
}

.other_page .sp_flex a {
	padding: 30px 0;
}
.other_page #spicon:before{
    color: #000;
}
.other_page #spicon span{
	border-color: #000
}
/* テキストメニューの色 */
.other_page .page_link a {
    color: #000;
}
.other_page #spicon.m_active span {
	border-color: #FFF;
}
.other_page #spicon.m_active:before{
    color: #FFF;
}

/**************************************
	ハンバーガーアイコン
***************************************/

#spicon {
	position:fixed;
	right:40px;
	top:50px;
	background-position:50% 0;
	background-repeat:no-repeat;
	background-size:cover;
	width:70px;
	height:50px;
	z-index:9999;
	cursor:pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 30px;
}


.logo {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 191px;
    z-index: 1000;
}
.logo img {
    width: 100%;
    height: auto;
}
.cy_header_btn {
    max-width: 230px;
    width: 100%;
    position: absolute;
    top: 40px;
    right: 160px;
    z-index: 1000;
    border-radius: 50px;
    overflow: hidden;
}
.cy_header_btn:before {
    content: "";
    background-color: #1b1b1b;
    position: absolute;
    z-index: 2;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    border-radius: 100px;
    transition: 0.5s ease;
    opacity: 0;
}
.cy_header_btn:after {
    content: "";
    background: linear-gradient(90deg, #5a0e92, #4b34c2 20%, #3551cf 40%, #0b6bdd 60%, #0690d9 80%, #08b1d0 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.cy_header_btn:hover:before {
    opacity: 1;
}
.cy_header_btn a {
    color: #fff;
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 14px 10px;
    text-align: center;
    position: relative;
    z-index: 500;
}
/* PPC用
------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
    .cy_header_btn {
        top: 30px;
        right: 150px;
        z-index: 1000;
    }
    .logo {
        width: 160px;
    }
    .mv_copy {
        max-width: 500px;
    }
}
@media only screen and (max-width: 740px) {

	.logo {
        top: 30px;
        left: 6vw;
    }
    .cy_header_btn {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
    }

}
/* スマートフォン 縦(ポートレート) */