@charset "UTF-8";
/* ===============================================
#擬似要素中央配置 mixin
=============================================== */
/* ===============================================
# navigation
=============================================== */
:root {
    --key_color: #3b53af;
	--logo_blue:#3b53af;
	--logo_green:#53d0c8;
	
    --dark_purple:#6B1384;
    --ac_color: #65DAD3;
    --light_blue:#3399cc;
    --light_pink:#F2C1DA;
    --button-color:#000;
    --button-text-color:#fff;
    --flex-gap:30px;
    --bg_color:#fff;
    --font01:"Noto Sans JP", sans-serif;
    --font_en:"Keania One","Noto Sans JP", sans-serif;
    --font_en02:"Quantico","Noto Sans JP", sans-serif;
    --txt_color:#294279;
}

/* ===============================================
# SNSカラー
=============================================== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}

article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block;}
ul li { list-style: none;}
input, select { vertical-align: middle;}
img { height: auto;width: 100%;line-height: 0;display: block;}
body { font-size: 16px;line-height: 1.6em;color: var(--txt_color);font-family: var(--font01);position: relative;background: var(--bg_color);}
body.menu_open { overflow: hidden;}
body .container { overflow-x: hidden;}

* { box-sizing: border-box;}

a { color: #000000;text-decoration: none;}
a:hover { opacity: 0.8;}
a.text_link { color: var(--light_blue);text-decoration: underline;}

/* ===============================================
# module
=============================================== */
.sp_only { display: none;}
@media screen and (max-width: 768px) { 
    .sp_only {   display: block;}
}

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

.anime, .anime-no-hidden, .onload { opacity: 0;visibility: hidden;}
.anime.js-play, .anime-no-hidden.js-play, .onload.js-play { opacity: 1;visibility: visible;}

.section_wrap:not(:last-of-type) { margin-bottom: 240px;}

@media screen and (max-width: 768px) { 
    .section_wrap:not(:last-of-type) {   margin-bottom: 80px;}
}

.anchor-clear { margin-top: -130px;padding-top: 130px;}
.sec_inner { max-width: 1160px;margin: 0 auto;width: 92%;}
.con_inner {max-width: 1000px;margin: 0 auto;width: calc(100% - 8vw);}

.flex-box { display: flex;flex-wrap: wrap;gap: var(--flex-gap);}
.flex-box .box01 { width: 100%;}
.flex-box .box02 { width: calc((100% - var(--flex-gap)) / 2);}
.flex-box .box03 { width: calc((100% - var(--flex-gap) * 2) / 3);}
.flex-box .box04 { width: calc((100% - var(--flex-gap) * 3) / 4);}

@media screen and (max-width: 750px) { 
    .flex-box .box04 {   width: calc(100% - var(--flex-gap) / 2);}
	.body_in .con_inner { width:calc(100% - 12vw);}
	
}
.flex-box.center { justify-content: center;}

.bold { font-weight: bold;}
.text-center { text-align: center;}
.text-left { text-align: left;}
.text-right { text-align: right;}
.txt { font-size: 20px;line-height: 1.6em;}
.txt-s { font-size: 0.6em;line-height: 1em;}

.mb-05em { margin-bottom: 0.5em;}
.mb-1em { margin-bottom: 1em;}
.mb-2em { margin-bottom: 2em;}

/* textList(div等で囲む) */
p.text-list,
.text-list ul li {padding: 0 0 3px 1.1em;position: relative;font-size: 15px;line-height: 1.6em;color: #000;}
p:not(:last-of-child).text-list { margin-bottom: 1em;}

.text-list ul li:not(:last-of-child) { margin-bottom: 5px;}
p.text-list::before,
.text-list ul li::before { content: "※";position: absolute;left: 0;}

p.text-list-dotted::before,
.text-list-dotted ul li::before { content: "・";color: var(--light_blue);}

.text-list-circle ul li { padding-left: 1.4em;}

p.text-list-circle::before,
.text-list-circle ul li::before { content: "●";color: var(--light_blue);}

p.text-list-square::before,
.text-list-square ul li::before { content: "■";}

p.text-list-counter,
.text-list-counter ul li { padding-left: 1.4em;}

p.text-list-counter::before,
.text-list-counter ul li::before { counter-increment: number 1;content: "" counter(number) "";}

.text-list-counter ol { list-style-type: decimal;padding-left: 1.2em;}

.text-list a { color: var(--light_blue);text-decoration: underline;}

@media screen and (max-width: 768px) { 
    .anchor-clear { margin-top: -80px; padding-top: 80px;}
    .section-wrap:not(:last-of-type) { margin-bottom: 120px;}
    .flex-box .box01 { width: 100%;}
    .flex-box .box02 { width: 100%;}
    .flex-box .box02:nth-of-type(odd) { margin-right: inherit;  margin-bottom: 5%;}
    .flex-box .box03 { width: calc((100% - var(--flex-gap)) / 2);}
    .flex-box.mc .box03 { width: calc((100% - var(--flex-gap)*2) / 3);}
    .text-list ul li { font-size: 12px;}
}
/* ================================= ヘッダー =================================== */
.header { position: fixed;background: transparent;width: 100%;z-index: 1000;}

@media screen and (max-width: 768px) { 
    .header {   background: none;  pointer-events: none;}
}

.header__inner { display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 0;}

@media screen and (max-width: 768px) { 
    .header__inner {   pointer-events: none;}
}

.header__title {width: 120px;position: absolute;top: min(3.6vw,30px);left: min(3.6vw,30px);}

@media screen and (max-width: 768px) { 
    .header__title {position: absolute;top: 5vw;left: 5vw;pointer-events: all;width: 70px;}
}

.nav { margin-left: auto;pointer-events: all;display: flex;align-items: center;background-color: var(--logo_blue);padding-left: 2em;padding-right: 1em; /*clip-path: polygon(0 0%, 100% 0%, 100% 100%, 30px 100%);*/ border-radius: 0 0 0 40px;}
.nav__lists { display: flex;}
.nav__list a {padding: 0.7em 1em;display: block;color: #fff;font-family: var(--font_en);font-size: min(22px, 1.4vw);font-weight: 400;}
.nav__bg { display: none;transition: 0.5s all;}
.nav__trigger { display: none;transition: 0.2s all;}

@media screen and (max-width: 768px) { 
    .nav__trigger {display: block;position: absolute;width: 35px;top:5vw;right: 5vw;pointer-events: all;}
    .nav__trigger span {display: inline-block;vertical-align: middle;position: relative;width: 100%;height: 2px;background-color: var(--key_color);}
    .nav__trigger span::before {content: "";display: block;width: 100%;height: 2px;position: absolute;background: var(--key_color);transition: all 0.3s;margin-top: -8px;}
    .nav__trigger span::after {content: "";display: block;width: 100%;height: 2px;position: absolute;background: var(--key_color);transition: all 0.3s;margin-top: 8px;}
}

@media screen and (max-width: 768px) { 
    .nav { margin-left: inherit;width: 100%;display: block;background-color: transparent;padding: 0;clip-path: initial;}
    .nav .sns_wrap {padding-left: 0;}
    .nav__lists { display: block;  width: 100%;  margin-bottom: 40px;}
    .nav__list {text-align: center;}
    .nav__list a {font-size: 24px;line-height: 1.4em;color: #fff;}
    .nav__bg {display: block;opacity: 0;width: 100%;height: 100dvh;background: linear-gradient(178deg,rgba(24, 83, 155, 1) 0%, rgba(127, 88, 130, 1) 100%);position: fixed;top: 0;left: 0;/* transform: translate(-50%, -50%) scale(1.2); */z-index: -1;}
    .nav__active .nav__trigger span { background: none;}
    .nav__active .nav__trigger span::before {content: "";display: block;width: 100%;height: 2px;position: absolute;background: #fff;transition: all 0.3s;margin-top: 0;transform: rotate(30deg);}
    .nav__active .nav__trigger span::after {content: "";display: block;width: 100%;height: 2px;position: absolute;background: #fff;transition: all 0.3s;margin-top: 0;transform: rotate(-30deg);}
    .nav__active .nav__bg {opacity: 0.9;/* transform: translate(-50%, -50%) scale(1); */}
    .nav__active .nav_wrap { transition: 0.2s;  visibility: visible;  opacity: 1;  pointer-events: all;}
}

.sns_wrap ul {display: flex;align-items: center;justify-content: center;}
.sns_wrap ul li:not(:last-of-type) { margin-right: 10px;}
.sns_wrap ul li a img { width: 34px;}

.nav_wrap { display: contents;}

@media screen and (max-width: 768px) { 
    .nav_wrap {display: block;transition: 0.4s;padding: 120px 0;visibility: hidden;opacity: 0;pointer-events: none;overflow-y: scroll;height: 100dvh;width: 100%;}
    .nav_wrap::-webkit-scrollbar {   display: none;}
    .nav_wrap::-webkit-scrollbar-track {   display: none;}
    .sns_wrap ul li:not(:last-of-type) {   margin-right: 20px;}
    .sns_wrap ul li a img {   width: 44px;}
}

/* ================================= ヘッダー =================================== */
/* ================================= ヘディング =================================== */
.heading { display: inline-block;position: relative;}

/* ================================= ヘディング =================================== */
/* ================================= ボタン周り =================================== */
.button {max-width: 420px;margin: 0 auto;position: relative;}
.button a {display: block;width: 100%;background: var(--key_color);padding: 0.75em 1em;font-size: min(5vw,24px);line-height: 1.2em;color:#fff;text-align: center;font-weight: 500;position: relative;font-family: var(--font_en02);border-radius: 100px;display: flex;justify-content: center;gap: min(20px,2vw);align-items: center;}
/*
.button a:before {position: absolute;content: "";width: calc(100% - 14px);height: calc(100% - 14px);top: 6px;left: 6px;border: 1px solid #fff;border-radius: 50px;}
*/
.button a:after {position: relative;content: "";background: url(https://d2nnm86yxj7l6q.cloudfront.net/inkigayo/images/btn_arrow.svg) no-repeat center;background-size: contain;width: 20px;height: 20px;}
.button.back a:after { transform: translateY(0%) scale(-1, 1);}

.button.btn02{ width: 100%; max-width: none;}
.button.btn02 a { background: none; border: 1px solid var(--logo_blue); color: var(--logo_blue); width: 100%; margin-top: 50px; padding: 1em 0;}
.button.btn02 a:after {background: url(https://d2nnm86yxj7l6q.cloudfront.net/inkigayo/images/btn_arrow2.svg) no-repeat center;}

/* ================================= ボタン周り =================================== */
/* ================================= youtube =================================== */
.youtube { position: relative;padding-top: 56.25%;background: #000;}
.youtube iframe { position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);}

/* ================================= youtube =================================== */
.footer {padding: min(12vw,60px) 0 min(20vw,180px);background: linear-gradient(178deg,rgba(237, 185, 211, 1) 0%, rgba(106, 217, 201, 1) 100%);color: #fff; /*border-top: 1px solid #A5F0FF;*/mix-blend-mode: multiply; font-weight: bold;}
.footer .f_inner { text-align: center;}
.footer .f_inner .logo {max-width: 140px;margin: 0 auto 40px;}
.footer .f_inner .text { margin-bottom: 20px;}


@media screen and (max-width: 768px) { 
	.footer {font-size:14px;}
}

/* ================================= カミスン =================================== */
.cs_img { position: relative;background: #ccc;aspect-ratio: 16/9;display: flex;justify-content: center;align-items: center;}
.cs_img::before { content: "COMING SOON";position: absolute;color: #fff;font-size: 2em;}

/* ================================= カミスン =================================== */
/******************************* error_404 *********************************/
#error_404 { text-align: center;width: 90%;max-width: 500px;margin: 0 auto;padding: 200px 0 200px;}
#error_404 .stit { font-size: 3em;line-height: 1.5em;margin-bottom: 0.5em;font-weight: bold;}
#error_404 .text { font-size: 1.2em;}
#error_404 .button-outer { margin-top: 3em;}

/******************************* error_404 *********************************/
/* ================================= モーダル =================================== */
.modal_trigger { cursor: pointer;}

.modal_box { position: fixed;width: 100%;height: 100vh;height: 100dvh;top: 0;right: 0;z-index: -1;transition: 0.5s ease;overflow: hidden;display: block;opacity: 0;visibility: hidden;background-position: center;}
.modal_box:before { content: "";position: fixed;background: #000;opacity: 0.9;background-size: cover;width: 100%;height: 100vh;height: 100dvh;top: 0;left: 0;z-index: -1;}
.modal_box .modal_inner { position: relative;width: 100%;height: 100%;display: flex;align-items: center;}
.modal_box .modal_inner .close { cursor: pointer;position: absolute;right: 20px;width: 50px;top: 20px;height: 40px;}
.modal_box .modal_inner .close span { position: relative;width: 100%;height: 100%;display: block;}
.modal_box .modal_inner .close span:before { content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);background: #fff;width: 50px;height: 1px;}
.modal_box .modal_inner .close span:after { content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(-45deg);background: #fff;width: 50px;height: 1px;}
.modal_box .modal_inner .modal_content { width: 92%;max-width: 1000px;margin: 0 auto;position: relative;padding: 50px;border: 1px solid #535353;text-align: left;background: #000;}
.modal_box .modal_inner .modal_content .inner_scroll { overflow-y: scroll;max-height: calc(80vh - 40px);padding: 0 30px;}
.modal_box .modal_inner .modal_content .inner_scroll::-webkit-scrollbar { display: none;}
.modal_box .modal_inner .modal_content .inner_scroll::-webkit-scrollbar-track { display: none;}
.modal_box.active { opacity: 1;visibility: visible;right: 0;z-index: 1000;}
.modal_box.active .modal_inner { pointer-events: all;}
.modal_box.yt_modal .modal_inner .modal_content { padding: 0;max-width: 1200px;border: none;}
.modal_box.yt_modal .modal_inner .modal_content .inner_scroll { /*padding: 0;height: calc(80vh - 40px);*/ }
.modal_box.yt_modal .modal_inner .modal_content .inner_scroll .youtube { /*padding-top: initial;height: 100%;*/ }
.modal_box.yt_modal .modal_inner .close { right: -60px;top: 0;}

@media screen and (max-width: 768px) { 
	.modal_box .modal_inner .modal_content {   padding: 30px;}
  .modal_box .modal_inner .modal_content .inner_scroll {   padding: 0;}
  .modal_box .modal_inner .close {   right: 0px;  top: -50px;}
  .modal_box.yt_modal .modal_inner .modal_content {   width: 96%;}
  .modal_box.yt_modal .modal_inner .close {   right: 0px;  top: -50px;}
	
}
/* ================================= モーダル =================================== */
/*# sourceMappingURL=common.css.map */