@charset "utf-8";
/* ==============================================
   COMMON CSS - Dùng chung cho cả PC và SP
============================================== */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&family=Noto+Sans+JP:wght@100..900&display=swap');

/* ==============================================
   Reset & Base Settings
============================================== */
* {
    margin: 0;
    padding: 0;
}
#nextbreak body {
    overflow-x: hidden;
    background: #fff;
}
#nextbreak h1,#nextbreak h2,#nextbreak h3,#nextbreak h4,#nextbreak h5,#nextbreak p,#nextbreak th,#nextbreak td,#nextbreak dt,#nextbreak dd,#nextbreak li,#nextbreak input,#nextbreak select,#nextbreak a {
    font-family: "Roboto", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-size: 15px;
    line-height: 28px;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0;
    color: #414141;
}
#nextbreak h1,#nextbreak h2,#nextbreak h3,#nextbreak h4,#nextbreak h5,#nextbreak div,#nextbreak table,#nextbreak th,#nextbreak td,#nextbreak dl,#nextbreak dt,#nextbreak dd,#nextbreak ul,#nextbreak li,#nextbreak p,#nextbreak a,#nextbreak strong,#nextbreak span,#nextbreak input,#nextbreak select {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
    border: none;
    vertical-align: middle;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul {
    list-style: none;
}
sup {
    font-size: 10px;
    text-align: text-top;
}
ul:after { content: "."; clear: both; height: 0; display: block; visibility: hidden; }
* html ul { display: inline-block; }
*:first-child+html ul { display: inline-block; }

a:link { color: #222222; text-decoration: none; }
a:visited { color: #222222; text-decoration: none; }
a:active { color: #222222; text-decoration: none; }
a {
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
}
a:hover {
    opacity: 0.7;
}

/* ==============================================
   #nextbreak Main Container & Introduction
============================================== */
#nextbreak {
    background: url("../images/nb_bg.png");
    background-size: 100%;
    position: relative;
    max-width: 720px;
    z-index: 0;
    font-size: 62.5%;
}

#nextbreak #introduction {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
#nextbreak #introduction .main_bg {
    position: relative;
    padding: 0 0 10% 0;
    filter: drop-shadow(10px 10px 10px rgba(225, 225, 225, 0.7));
}

#nextbreak #introduction .main_bg::before {
    content: '';
    position: absolute;
    width: 72%;
    height: 65%;
    border-radius: 100%;
    top: 10%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #fff;
    filter: blur(20px);
    transform: scale(1.2);
    mix-blend-mode: color-burn;
    z-index: -1;
    animation: glow 2s infinite ease-in;
}
@keyframes glow {
    0%, 100% { transform: scale(1.2); mix-blend-mode: hard-light; }
    50% { transform: scale(1.4); mix-blend-mode: hard-light; }
}
#nextbreak #introduction .chara {
    position: absolute;
    top: 10%;
}
#nextbreak #introduction h1 {
    position: absolute;
    width: 90%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 35%;
    filter: drop-shadow(0px 5px 5px rgba(225, 00, 225, 0.7));
}
#nextbreak #introduction .tamahiyo_logo {
    position: absolute;
    top: 20%;
}
#nextbreak #introduction .sub {
    position: absolute;
    bottom: -10px;
}
#nextbreak #introduction .year {
    position: absolute;
    width: 28%;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -40%;
}
#nextbreak::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/nb_bg_tex.png");
    background-size: 50% auto;
    z-index: -2;
    opacity: 0.05;
}

/* ==============================================
   About Section
============================================== */
#nextbreak .about .about_button {
    background: #fff;
    padding: 15px 0;
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
    background: #fff url("../images/nb_ab_bt_icpl.png") no-repeat;
    background-size: 20px 20px;
    background-position: 98% 50%;
    filter: drop-shadow(0px 5px 5px rgba(000, 000, 000, 0.2));
}
#nextbreak .about .about_button.open {
    background: #fff url("../images/nb_ab_bt_icmn.png") no-repeat;
    background-size: 20px 20px;
    background-position: 98% 50%;
}
#nextbreak .about .about_button img {
    width: 90%;
    padding: 0 0 0 20px;
}
#nextbreak .about .accordion {
    background: #fff;
    width: 90%;
    padding: 20px 5% 20px 5%;
    margin: 10px auto;
    border-radius: 10px;
    position: relative;
}

#nextbreak .about h3 {
    font-size: 1.5rem;
    line-height: 2.4rem;
    letter-spacing: -0.1rem;
    font-weight: 800;
    padding: 0 0 10px 0;
    text-align: center;
    background: linear-gradient(90deg, #54ffab 0%, #00c2ff 40%, #ff67aa 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
#nextbreak .about p {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 400;
    letter-spacing: -0.08rem;
    margin: 0 5%;
    padding: 10px 0 0 0;
}
#nextbreak .about .abt_cont {
    display: flex !important;
    flex-wrap: wrap;
    padding: 20px 0 0 0;
}
#nextbreak .about .abt_cont p {
    width: 50%;
    padding: 0;
    margin: 0;
}

/* ==============================================
   Outline (Table of Contents)
============================================== */
#nextbreak #outline {
    margin-top: -80px;
    padding: 80px 0 20px 0;
}
#nextbreak #outline .box {
    margin: 20px 3% 0 3%;
    padding: 20px 0 20px 0;
    background: #fff;
    border-radius: 40px;
    position: relative;
    filter: drop-shadow(0px 5px 5px rgba(000, 000, 000, 0.2));
}
#nextbreak #outline .box h2 {
    margin: 3px 5% 3px 5%;
    padding: 10px 0 0px 16px;
    position: relative;
}
#nextbreak #outline .box h3 {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 800;
    font-style: "Roboto", "Noto Sans JP";
    color: #fff;
    margin: 0 5% 10px 5%;
    padding: 8px 0 8px 0;
    background: #dacc87;
    border-radius: 20px;
    text-align: center;
}
#nextbreak #outline .box div a {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 800;
    display: block;
    margin: 0 8%;
    padding: 8px 0;
    background: url("../images/nb_ol_ttl_tp_aro.png") no-repeat;
    background-position: 100% 50%;
    background-size: 16px;
    text-indent: 16px;
    position: relative;
    font-family: "Roboto", "Noto Sans JP";
    border-bottom: solid 1px #e3e3e3;
}
#nextbreak #outline .box .parents a {
    background: url("../images/nb_ol_ttl_pm_aro.png") no-repeat;
    background-position: 100% 50%;
    background-size: 16px;
    text-indent: 16px;
    position: relative;
}
#nextbreak #outline .box h2 a::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 24px;
    background: #d2a76f;
    top: 0;
    left: 0;
}
#nextbreak .floating_button {
    bottom: -100px;
    right: 0;
    width: 50%;
    max-width: 200px;
    z-index: 100;
    position: fixed;
}
#nextbreak .floating_button.on {
    bottom: 10px;
    right: 0px;
    width: 50%;
    max-width: 200px;
    z-index: 100;
    position: fixed;
}

/* ==============================================
   Ranking / Sections
============================================== */
#nextbreak .taipa h2,
#nextbreak .health h2 {
    padding: 40px 0 20px 0;
}
#nextbreak .container {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    margin: 0 3%;
    padding: 10px 5% 5px 5%;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Grand Prize Styles */
#nextbreak .grand_prize h3 {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 600;
    margin: 0 auto;
    padding: 15px 0 45px 0;
    text-align: center;
}
#nextbreak .grand_prize figure {
    width: 90%;
    margin: 0 auto;
    position: relative;
}
#nextbreak .grand_prize figure img {
    border-radius: 10px;
}
#nextbreak .grand_prize .badge {
    width: 33%;
    position: absolute;
    top: -60px;
    left: -40px;
    filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.2));
}
#nextbreak .grand_prize h4 {
    font-size: 1.8rem;
    line-height: 2.6rem;
    font-weight: 800;
    margin: 20px 5% 0 5%;
}
#nextbreak .grand_prize h4 span {
    font-size: 1.2rem;
    line-height: 2.0rem;
    font-weight: 600;
}
#nextbreak .grand_prize p {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 400;
    margin: 0 5%;
    padding: 10px 0 0 0;
}
#nextbreak .grand_prize .price {
    font-size: 1.2rem;
    line-height: 2.0rem;
    font-weight: 400;
    margin: 0 5%;
    padding: 0 0 0 0;
}
#nextbreak .taipa .grand_prize p span {
    font-weight: 600;
    background: linear-gradient(transparent 50%, #aff8da 50%);
}
#nextbreak .health .grand_prize p span {
    font-weight: 600;
    background: linear-gradient(transparent 50%, #ffc0d8 50%);
}
#nextbreak .grand_prize .tamahiyo_coment {
    background: rgba(255, 255, 255, 0.8);
    margin: 30px 5%;
    padding: 10px 0;
    position: relative;
    border-radius: 10px;
}

/* Comments Bubbles */
#nextbreak .taipa .grand_prize .tamahiyo_coment::after {
    content: 'ここがスゴイ！';
    background: #7fe1b9;
    width: 120px;
    font-size: 1.0rem;
    line-height: 2.0rem;
    font-weight: 800;
    display: block;
    text-align: center;
    font-family: "Roboto", "Noto Sans JP";
    color: #fff;
    padding: 3px 0 3px 0;
    border-radius: 30px;
    position: absolute;
    top: -10px;
    left: -10px;
}
#nextbreak .taipa .grand_prize .tamahiyo_coment::before {
    content: '';
    background: #7fe1b9;
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    top: 10px;
    left: 40px;
    clip-path: polygon(100% 0, 0 0, 72% 100%);
}
#nextbreak .health .grand_prize .tamahiyo_coment::after {
    content: 'ここがスゴイ！';
    background: #ff5c7c;
    width: 120px;
    font-size: 1.0rem;
    line-height: 2.0rem;
    font-weight: 800;
    display: block;
    text-align: center;
    font-family: "Roboto", "Noto Sans JP";
    color: #fff;
    padding: 3px 0 3px 0;
    border-radius: 30px;
    position: absolute;
    top: -10px;
    left: -10px;
}
#nextbreak .health .grand_prize .tamahiyo_coment::before {
    content: '';
    background: #ff5c7c;
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    top: 10px;
    left: 40px;
    clip-path: polygon(100% 0, 0 0, 72% 100%);
}
#nextbreak .grand_prize .tamahiyo_coment h5 span {
    color: #ff3bae;
    font-weight: 800;
}
#nextbreak .grand_prize .tamahiyo_coment h5 {
    font-size: 1.4rem;
    line-height: 2.4rem;
    letter-spacing: 0.2rem;
    font-weight: 600;
    text-align: center;
    margin: 10px 0 0 0;
}

/* Buttons */
#nextbreak .taipa .button_main a {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 600;
    padding: 8px 0;
    margin: 10px 5% 0 5%;
    background: #4ebeff;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 30px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
#nextbreak .health .button_main a {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 600;
    padding: 8px 0;
    margin: 10px 5% 0 5%;
    background: #ffb44a;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 30px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
#nextbreak .ec_button {
    display: flex;
    margin: 0 5%;
}
#nextbreak .button_amazon a {
    font-size: 1.2rem;
    line-height: 2.4rem;
    font-weight: 600;
    padding: 8px 0;
    margin: 0 3px 0 0;
    background: #202155;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 30px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
#nextbreak .button_amazon,
#nextbreak .button_rakuten {
    width: 50%;
    padding: 8px 0 0 0;
}
#nextbreak .button_amazon_full a {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 600;
    padding: 8px 0;
    margin: 10px 5% 0 5%;
    background: #202155;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 30px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
#nextbreak .button_rakuten a {
    font-size: 1.2rem;
    line-height: 2.4rem;
    font-weight: 600;
    padding: 8px 0;
    margin: 0 0 0 3px;
    background: #d30037;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 30px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
#nextbreak .button_rakuten_full a {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 600;
    padding: 8px 0;
    margin: 10px 5% 0 5%;
    background: #d30037;
    color: #fff;
    display: block;
    text-align: center;
    border-radius: 30px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
#nextbreak h3 {
    position: relative;
    margin: 20px auto 0;
    text-align: center;
}

/* ==============================================
   Slick Slider Common
============================================== */
#nextbreak .nominate_slider_wrap {
    position: relative;
    margin: 0 0 30px 0;
}
#nextbreak .nominate {
    border-radius: 10px;
    margin: 20px auto;
    width: 90%;
}
#nextbreak .nominate figure {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#nextbreak .nominate figure img {
    border-radius: 10px;
}
#nextbreak .nominate_slider_thumb .slick-track {
    transform: unset !important;
}
#nextbreak .taipa .nominate_slider_thumb .slick-current.slick-active {
    outline: solid 1.2vw rgba(209, 253, 254, 1);
    outline-offset: -1.2vw;
    opacity: 1;
}
#nextbreak .nominate_slider_thumb .thum_card {
    outline: solid 1.2vw #e0e0e0;
    outline-offset: -1.2vw;
}
#nextbreak .health .nominate_slider_thumb .slick-current.slick-active {
    outline: solid 1.2vw rgba(251, 255, 196, 1);
    outline-offset: -1.2vw;
    opacity: 1;
}

#nextbreak .nominate_slider_thumb .thum_card p {
    font-size: 1.0rem;
    line-height: 1.2rem;
    height: 3.2rem;
    font-weight: 600;
    padding: 1.0rem 0 0 0;
    background: #fff;
    text-align: center;
}
#nextbreak .nominate_slider_thumb .thum_card img {
    padding: 0 8% 10px 8%;
    margin: 0 auto;
    background: #fff;
}
#nextbreak .detail a {
    font-size: 1.2rem;
    line-height: 2.0rem;
    font-weight: 600;
    color: #444444;
    border-radius: 30px;
    border: 1px solid #444444;
    display: block;
    margin: 10px 0 5px 0;
    padding: 5px 0;
    text-align: center;
    font-family: "Roboto", "Noto Sans JP";
}

/* Merch Cards */
#nextbreak .taipa .merch_cards {
    background-image: linear-gradient(20deg, rgba(233, 255, 227, 1), rgba(209, 253, 254, 1));
    padding: 0 0 20px 0;
    border-radius: 0 0 10px 10px;
    margin: 0 0 20px 0;
}
#nextbreak .health .merch_cards {
    background-image: linear-gradient(20deg, rgba(255, 228, 244, 1), rgba(251, 255, 196, 1));
    padding: 0 0 20px 0;
    border-radius: 0 0 10px 10px;
    margin: 0 0 20px 0;
}
#nextbreak .merch_cards figure {
    padding: 20px 15% 0 15%;
}
#nextbreak .merch_cards figure.wide {
    padding: 20px 8% 0 8%;
    border-radius: 10px 10px 0 0;
}
#nextbreak .merch_cards h4 {
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-weight: 800;
    margin: 20px 5% 0 5%;
}
#nextbreak .merch_cards h4 span {
    font-size: 1.2rem;
    line-height: 1.8rem;
    font-weight: 600;
    display: inline-block;
}
#nextbreak .merch_cards p {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 400;
    margin: 0 5%;
    padding: 10px 0 0 0;
}
#nextbreak .merch_cards p span {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 600;
}
#nextbreak .merch_cards .price {
    font-size: 1.2rem;
    line-height: 2.0rem;
    font-weight: 400;
    padding: 0 0 0 0;
}

#nextbreak .merch_dital {
    background: #fff;
    display: block;
}

/* Accordion Utilities */
#nextbreak .ac_button.open .accordion {
    display: block !important;
}
#nextbreak .ac_button.open .maternity_outline {
    display: block !important;
}
#nextbreak .ac_button a {
    padding: 8px 0 8px 0;
    margin: 0 5%;
    border-radius: 10px;
    background: #ff9494 url("../images/gdlk_btn_menul_icon.png") no-repeat;
    background-size: 16px 16px;
    background-position: 98% center;
    color: #fff;
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
}

/* Overview Section */
#nextbreak #overview {
    margin: 40px 0 0px 0;
    padding: 0 0 20px 0;
    background: #FFF;
}
#nextbreak #overview h3 {
    background: #d2a76f;
    color: #fff;
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    margin: 20px 0 20px 0;
}
#nextbreak #overview p {
    font-size: 1.4rem;
    line-height: 2.4rem;
    font-weight: 400;
    padding: 10px 5% 0 5%;
    text-align: left;
}
#nextbreak #overview ul li {
    font-size: 1.2rem;
    line-height: 2.2rem;
    font-weight: 400;
    padding: 3px 5% 0 5%;
    text-align: left;
}
#nextbreak #overview .note {
    font-size: 1.2rem;
    line-height: 2.0rem;
    font-weight: 400;
    padding: 3px 5%;
    text-align: left;
}
#nextbreak .product .sup_top {
    font-size: 10px;
    vertical-align: super;
}

/* ==============================================
   BACK NUMBER 
============================================== */


#back_number_area {
    width: 100%;
    background: #fff;
    margin: 0 auto 20px auto; 
    padding: 20px 0 40px 0;   
    position: relative;
    clear: both;
    display: block;
}


#back_number_area h3 {
    background: #d2a76f;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 600;
    padding: 10px;
    text-align: center;
    margin: 0 auto 20px auto; 
    border-radius: 4px;
    max-width: 100%; 
}


#back_number_area .back_number_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
#back_number_area .back_number_list li {
    border: solid 2px #d2a76f;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    width: 300px;
    max-width: 90%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}
#back_number_area .back_number_list li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    color: #414141;
    text-decoration: none;
    font-weight: bold;
}
#back_number_area .back_number_list li a:hover {
    opacity: 0.7;
    background-color: #fff8ee;
}