@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');

html body {
    font-size:1.4rem;
    font-family:"Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #222;
    background-color:#000;
    padding-bottom: 30px;
}
.containerInner {
    background-color:#fff;
}
@media (min-width: 768px) {
    body {
        font-size: 14px;
    }
    .container {
        max-width: 768px;
        margin: 0 auto;
    }
}


/* font */
.font-mont {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}


/* common */
.text-center{
    text-align: center;
}
.fixed{
    width: 100%;
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    z-index: 10;
}
/* 横幅320px以下の場合 */
@media (max-width: 320px) {
    .lead {
        font-size: 12px;
    }
}


/* header */
.page_header {
    position: relative;
    height: 48px;
    background-color: #fff;
}
.page_header .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 113px;
    max-width: 100%;
    padding: 0 20px;
}


/* top */
.top_inner{
    position: relative;
    background: rgb(39,188,255);
    background: linear-gradient(180deg, rgba(39,188,255,1) 75%, rgba(0,51,255,1) 100%);
    padding-bottom: 2rem;
}
.top_fv{
    background: url('/images/app_form/ateez2025/2024/mv_square.png') no-repeat top center;
    background-size: 100%;
    padding-bottom: 500px;
    padding-bottom: 115%;

}
.top_title {
    padding: 0 8%;
    position: relative;
    top: -4rem;
}
.top_title_sub{
    width: 87%;
    margin: 5% auto 0;
    display: block;
}
.top_pr {
    padding: 0 8%;
    position: relative;
    top: -60px;
}


/* Pontaパスの入会はこちら */
.contact_block {
    margin: 0px 16px;
    padding: 30px 25px;
    background-color: #000;
    border-radius: 15px;
    text-align: center;
    border: 3px solid #fff;
}
.contact_block p {
    margin-bottom: 5px;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
}
.contact_block .text02 {
    position: relative;
    width: 100%;
    max-width: 340px;
    padding: 0 35px;
    margin: 0 auto 10px;
    color: #EEFF00;
}
.contact_block .text02::before {
    content: "＼";
    left: 0;
}
.contact_block .text02::after {
    content: "／";
    right: 0;
}
.btn_style01 {
    position: relative;
    display: table;
    margin: 0 auto;
    padding: 10px 40px;
    margin-top: 5px;
    width: 242px;
    max-width: 100%;
    min-height: 50px;
    background-color: #EEFF00;
    color: #000;
    border: 2px solid #000;
    border-radius: 25px;
    box-shadow: 0 3px 0 #947100;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
}
.btn_style01::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: 13px;
    height: 21px;
    background: url(/images/app_form/ateez-live/icon_btn_arrow.svg) no-repeat;
    background-size: contain;
}
.contact_block .text02 strong {
    font-size: 32px;
}
.contact_block .text02::before, .contact_block .text02::after {
    position: absolute;
    bottom: 0;
    color: #fff;
    font-size: 32px;
}


/* ご案内 */
.inner02 {
    padding: 0;
    line-height: 20px;
    font-size: 13px;
}
.inner02 span {
    color: #F4005A;
}


/* 生配信 */
.lineup.livemain .headline{
	color: #000;
	margin: 0;
}
.lineup.livemain .headline span {
    background: linear-gradient(transparent 70%, #FF005D 30%);
}
.itemttl {
    width: fit-content;
    display: block;
    border-bottom: 0;
    padding: 0.5em 2em;
    color: #fff;
    background: #2033FF;
    margin: 20px auto;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
}
.lineup .item .inner .note span {
	color: #6B06E9;
}

.liveinfo {
    margin-top: 30px;
}
.liveinfo h3 {
    margin: 24px 0 8px;
    padding: 8px;
    border-top: 1px solid #0033FF;
    border-bottom: 1px solid #0033FF;
    color: #0033FF;
    text-align: center;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4;
    letter-spacing: .2rem;
}
.liveinfo dl {
    width: 100%;
    padding: 5px 8px 8px;
    color: #000000;
    line-height: 22px;
}
.liveinfo dl dd {
    padding: 0 0 10px;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}
.liveinfo dl dd p {
    font-size: 14px;
    font-weight: 700;
}
.lineup .item .liveinfo ul {
	padding: 5px 8px 8px;
}
.lineup .item .liveinfo li {
    padding: 0 0 1rem 1rem;
}
.lineup .item .liveinfo li a {
    color: #6B06E9;
}
.lead {
    margin-bottom: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}


/* 生配信 再生ボタン */
.btn_style02 {
    position: relative;
    display: table;
    margin: 0 auto;
    padding: 10px 40px 15px;
    width: 100%;
    min-height: 54px;
    background-color: #D946D2;
    color: #fff !important;
    border: 3px solid #000;
    border-radius: 50px;
    box-shadow: 0 6px 0 #D946D2;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
}
.btn_style02::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 3px;
    right: 20px;
    margin: auto;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 15px;
    height: 15px;
    transform: rotate(-45deg);
}
.bottom_block .small {
    display: inline-block;
    font-size: 14.5px;
    padding-bottom: 3px;
}

/* ボタン下のテキスト */
.inner03 {
    display: block;
    text-align: center;
    margin: 20px 0;
}
.inner03 p {
    text-align: left;
    display: inline-block;
    font-size: 12px;
    line-height: 17px;
}
.inner03 span {
    padding-left: 14px;
}

/* 視聴に関するQ&Aはこちら */
.compatible {
    padding: 0;
    text-align: right;
    font-size: 12px;
    margin: 25px 0 10px;
    padding-bottom: 4px;
}
.compatible a {
    color: #0088FF;
    border-bottom: 1px dotted #0088FF;
}


/* ■配信時間 等 */
.def_box dt {
    position: relative;
    padding-left: 14px;
    margin-bottom: 7px;
    font-weight: bold;
}
.def_box dt::before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 3px;
    width: 10px;
    height: 10px;
    background-color: #000;
}
.def_box dd {
    margin-bottom: 20px;
    line-height: 20px;
}
.def_box dd a {
    color: #0088FF;
    border-bottom: 1px solid #0088FF;
}


/* 生配信は終了しました */
.btn_off {
    display: table;
    margin: 0 auto 35px;
    padding: 15px 40px 17px;
    width: 100%;
    min-height: 54px;
    background-color: #888888;
    color: #fff;
    border: 3px solid #000;
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
}
.btn_off .small {
    font-size: 14.5px;
    font-weight: normal;
}


/* footer */
footer {
    background: #000;
}
.return_block {
    padding: 35px 0px 6px;
}
.btn_style03 {
    position: relative;
    display: table;
    margin: 0 auto;
    padding: 13px 40px 15px;
    width: 90%;
    background-color: #00BAD1;
    color: #fff !important;
    border: 3px solid #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;
}
.btn_style03::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 3px;
    right: 20px;
    margin: auto;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    width: 15px;
    height: 15px;
    transform: rotate(-45deg);
}
.cnt_copyright {
    padding: 25px 16px 15px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    background-color: #000;
}