/* ================ responsive ================ */

@media (max-width: 1536px) {
    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€蜈ｱ騾�
    ============================================*/
    .wrapper section h2::before,
    .wrapper section h2::after { width: 25%;}
}

@media (max-width: 1024px) {
    /* ---------- 繝｡繧､繝ｳ繝薙ず繝･繧｢繝ｫ ---------- */
    #kbe_top div p, #kbe_top_pre div p {
        font-size: 2.4vw;
        top: 17%;
    }
}

@media (max-width: 768px) {
    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€蜈ｱ騾�
    ============================================*/
    .wrapper { width: 80%;}

    .anchor_ticket { width: 12%;}

    #page-top { width: 8%;}

    #pc_navi .anchor_br { display: block;}

    #entry {
        bottom: 10px;
        right: 10px;
        width: 75px;
        height: 75px;
    } 

    .sec::before {
        font-size: clamp(24px, 7vw, 44px);
    }

    .coming_soon { font-size: 7vw}

    .pc { display: none;}

    .wrapper {
        width: 80%;
        padding: 8% 0 13% 0;
    }

    .wrapper section { 
        margin-bottom: 20%;
    }

    .wrapper section h2 { font-size: clamp(20px, 4vw, 26px);}

    .wrapper section h2::before, 
    .wrapper section h2::after { width: 25%;}

    .sec img { width: 45%;}

    .sec img:first-of-type { bottom: -4%;}

    .sec img:last-of-type { top: -4%;}

    .page_anchor {
        padding-top: 50%;
        margin-top: -50%;
    }

    /* =========================================
    縲€縲€縲€縲€縲€繧､繝吶Φ繝域ｦりｦ�ｼ育ｾ弱→蛛･蠎ｷ繧抵ｽ橸ｼ�
    ============================================*/

    #intro { 
        font-size: clamp(14px, 3.5vw, 20px);
        margin-bottom: 13%;
    }

    #intro p { line-height: 1.3;}

    #intro p:nth-of-type(2) {
        width: 90%;
        margin: 5% auto;
    }

    #intro .movie,
    #intro .movie02 { width: 100%;}

    #intro .intro_catch { width: 60%;}

    #intro p span {
        font-size: clamp(16px, 4vw, 22px);
    }

    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€蜑榊屓縺ｮ讒伜ｭ�
    ============================================*/

    .past_photo {
        margin-top: 20%;
    }

    .past_photo::after {
        font-size: clamp(12px, 2vw, 16px);
        margin-top: 3px;
    }

    .past_photo a {
        width: 49.5%;
        margin-bottom: 1%;
    }

    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€繝√こ繝�ヨ
    ============================================*/

    #ticket_wrap table {
        width: 100%;
        max-width: 390px;
        margin: 0 auto 2% auto;
    }

    #ticket_wrap .ticket_caution {
        font-size: clamp(10px, 3vw, 14px);
        margin-bottom: 8%;
        line-height: 1.5em;
    }

    #ticket_wrap th { 
        font-size: clamp(16px, 4vw, 22px);
    }

    #ticket_wrap td {
        font-size: clamp(18px, 4vw, 30px);
    }

    #ticket_wrap td small {
        font-size: clamp(12px, 3vw, 16px);
    }

    #ticket_wrap .ticket_item {
        width: 100%;
    }

    #ticket_wrap .ticket_item p {
        font-size: clamp(12px, 3vw, 18px);
    }

    #ticket_wrap .ticket_item li:first-of-type {
        width: 80%;
        margin-bottom: 7%;
    }

    #ticket_wrap .ticket_item li:nth-of-type(2),
    #ticket_wrap .ticket_item li:last-of-type {
        margin-bottom: 4%;
    }

    /* =========================================
縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€蜃ｺ螻戊€�供髮�
    ============================================*/

    #recruting {
        margin-bottom: 13%;
        padding: 6% 7%;
    }

    #recruting div p { 
        font-size: clamp(16px, 3vw, 22px);
        width: 100%;
    }

    #recruting div p:first-of-type {margin-bottom: 3%;}
    
    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€逡ｪ螳｣蜍慕判
    ============================================*/

    .movie_wrap {
        width: 100%;
        max-width: 600px;
        margin-bottom: 15%;
        margin-top: 18%;
    }

    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€SNS
    ============================================*/

    #sns { margin: 13% 0;}

    #sns p { width: 85%;}

    #sns ul { width: 35%;}

    #sns ul li { width: 30%;}

    #sns ul li:first-of-type { margin-right: 25%;}

    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€縺雁撫縺�粋繧上○
    ============================================*/

    #contact_wrap h2 {
        font-size: clamp(16px, 3vw, 26px);
        width: 100%;
        margin: 0 auto 5% auto;
    }

    #contact_wrap ul { font-size: clamp(14px, 3vw, 18px);}

    /* =========================================
    譚･蝣ｴ閠��繝ｬ繧ｼ繝ｳ繝�/蜃ｺ螻戊€�ｸ€隕ｧ/莨∫判繧ｳ繝ｼ繝翫�/繧ｹ繝��繧ｸ隧ｳ邏ｰ縲€繝ｪ繝ｳ繧ｯ
    ============================================*/

    .page_link_btn { 
        margin-top: 10%;
    }

    .page_link_btn a {
        padding: 4% 0;
    }

    .page_link_btn_2 a,
    .present_btn a {
        width: 100%;
    }

    .page_link_btn_2 a:first-of-type {
        margin-bottom: 5%;
    }

    .page_link_btn_2 a,
    .page_link_btn_2 a,
    .present_btn a {
        font-size: clamp(16px, 4vw, 24px);
    }

    /* =========================================
                繧ｲ繧ｹ繝�
    ============================================*/

    .guest div:first-of-type {
        max-width: 500px;
        margin: 0 auto;
        padding: 5% 5%;
    }

    .guest div dl {
        width: 48%;
    }

    .guest div dl:first-of-type,
    .guest div dl:nth-of-type(2) {
        margin-bottom: 5%;
    }

    .guest div dl dd {
        font-size: clamp(12px, 1vw, 18px);
    }

    .guest div dl dd span {
        font-size: clamp(14px, 3vw, 22px);
    }

    .page_link_btn small {
        color: #000;
        font-size: clamp(14px, 1vw, 16px);
    }

    /* =========================================
                譛€譁ｰ諠��ｱ
    ============================================*/
    #news {
        padding-bottom: 20%;
    }

    #news h2 {
        margin-bottom: 8%;
    }

    #news .tvo-report { 
        width: 100%;
        grid-template-columns: 1fr;
        gap: 4%;
    }

    #news .tvo-report-time {
        font-size: clamp(16px, 3vw, 20px);
    }

    #news .tvo-report-title { 
        font-size: clamp(14px, 3vw, 18px);
    }

    /* =========================================
            譛ｬ繧､繝吶Φ繝医�邨ゆｺ�＠縺ｾ縺励◆縲ゑｽ�
    ============================================*/

    .end {
        margin-bottom: 12%; 
        padding: 7% 5%;
    }

    .end p {
        margin-bottom: 3%;
        font-size: clamp(16px, 3vw, 28px);
    }

    .end dl {
        font-size: clamp(14px, 3vw, 22px);
    }

}

@media (max-width: 500px) {

    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€蜈ｱ騾�
    ============================================*/
    #page { overflow: hidden;}

    main::before { 
        background-image: url(/event/kansai_beautyexpo/lib/2025/images/back_sp.jpg) !important;
        background-size: 100%;
        background-repeat: repeat-y;
    }

    #main_pre { 
        background-image: url(/event/kansai_beautyexpo/lib/2025/images/back_pc.jpg);
        background-size: 100%;
        background-repeat: repeat-y;
    }

    .wrapper {
        width: 85%;
    }

    .sp { display: block;}

    .fade {
        transition-delay: 0s;
    }

    .page_anchor {
        padding-top: 60%;
        margin-top: -60%;
    }

    /* ---------- 繝｡繧､繝ｳ繝薙ず繝･繧｢繝ｫ ---------- */

    #kbe_top_pre div { 
        aspect-ratio: 642 / 808;
        background: url(/event/kansai_beautyexpo/lib/2025/images/kansaibeauty_topimg_sp_2025_3.png) no-repeat top / 100%;
    }

    /* -----莉翫�遘�ｽ�----- */
    #kbe_top div p, #kbe_top_pre div p {
        font-size: 3.5vw;
        top: auto;
        bottom: 7%;
        left: 12%;
    }

    /* -----繝ｭ繧ｴ----- */
    #kbe_top .kbe_logo, #kbe_top_pre .kbe_logo {
        width: 50%;
        transform: none;
        right: auto;
        top: 4%;
        left: 5%;
    }

    #main_pre #kbe_top img:nth-of-type(2), #main_pre #kbe_top_pre img:nth-of-type(2) {
        animation: logo_fade 2.5s ease 3.4s forwards;
    }
    
    #main_pre #kbe_top img:last-of-type, #main_pre #kbe_top_pre img:last-of-type {
        animation: logo_fade 2.5s ease 3.4s forwards;
    }

    /* ---------- 繝｡繝�ぅ繧｢蜊泌鴨 ---------- */

    #kbe_top_pre dl {
        width: 44%;
        right: auto;
        top: 39%;
        left: 5.5%;
    }

    #kbe_top_pre dl dt {
        font-size: 2.5vw;
    }

    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€繝√こ繝�ヨ
    ============================================*/

    #ticket_wrap::before {
        top: -3%;
    }

    /* =========================================
    縲€縲€縲€縲€縲€縲€縲€縲€縲€縲€髢句ぎ讎りｦ�
    ============================================*/

    #outline_wrap {
        margin-top: 25%;
    }

    #outline_wrap::before {
        top: -2.5%;
    }

    #outline_wrap dl { font-size: clamp(14px, 3vw, 18px);}

    #outline_wrap dt, #outline_wrap dd {
        width: 100%;
        text-align: center;
    }

    #outline_wrap dt { 
        padding-top: 5%;
        padding-left: 0;
        padding-bottom: 5px;
        font-weight: 700;
        border-bottom: none;
        justify-content: center;
    }

    #outline_wrap dd {
        padding-top: 0;
        padding-bottom: 5%;
    }

    #outline_wrap dd div {
        width: 80%;
        grid-template-columns: repeat(2, 1fr);
    }

    /* =========================================
                蝠�刀蜀咏悄�医さ繝ｳ繝�Φ繝�ｼ�
    ============================================*/

    .contents p {
        background: url(/event/kansai_beautyexpo/lib/2025/images/contents_text_sp.png) no-repeat center center / 100%;
        aspect-ratio: 748 / 148;
    }
    
    .contents ul {
        width: 100%;
        justify-content: space-evenly;
    }

    .contents ul li {
        width: 30%;
    }

    .contents ul li:not(:last-of-type) {
        margin-right: 0;
    }
    
    .contents_1 {
        margin: 0 auto 4% auto;
    }

    .contents_2 {
        margin: 0 auto;
        
    }

    /* =========================================
                繧ｲ繧ｹ繝�
    ============================================*/

    .wrapper article {
        margin: 0 auto 13% auto;
    }

    .wrapper article p {
        width: 95%;
        min-width: auto;
    }

    .guest div:first-of-type {
        width: 100%;
    }

    .guest h2 img {
        width: 35%;
    }

    .contents h2 img {
        width: 45%;
    }

    .guest h2::before,
    .guest h2::after {
        width: 27%;
    }

    .contents h2::before,
    .contents h2::after {
        width: 23%;
    }

    .guest div dl:first-of-type {

        margin-bottom: 4%;
    }

    .guest div dl dd {
        font-size: clamp(11px, 1vw, 16px);
    }

    .guest div dl dd span {
        font-size: clamp(14px, 3vw, 20px);
    }

    .guest p {
        background: url(/event/kansai_beautyexpo/lib/2025/images/guest_text_sp.png) no-repeat center center / 100%;
    }

    .guest small {
        font-size: clamp(10px, 1vw, 14px);
    }

    .page_link_btn small {
        font-size: clamp(12px, 1vw, 14px);
        margin-top: 5%;
    }

    /* =========================================
                逡ｪ螳｣蜍慕判
    ============================================*/
    
    .movie_wrap small {
        font-size: clamp(12px, 1vw, 14px);
    }

    /* =========================================
                譚･蝣ｴ閠��繝ｬ繧ｼ繝ｳ繝医�縺薙■繧�
    ============================================*/

    .present_btn {
        margin: 0 auto 10% auto;
    }

    .present_btn a::before {
        margin-right: 2%;
    }



}

/* ---------- 竊塗over竊� ---------- */

@media (hover: hover) and (pointer: fine) {
    .c-btn:hover {
        color: #d4cd60;
    }
    
    .c-btn:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
        transition-delay: 0s;
        transition: opacity .4s, transform .6s ease-in-out;
    }

    .present_btn a:hover {
        /* color: #e3007f; */
        /* color: #d4cd60; */
        color: #3fc5a2
    }
    
    .present_btn a:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
        transition-delay: 0s;
        transition: opacity .4s, transform .6s ease-in-out;
    }

    .page_link_btn a:hover,
    .page_link_btn_2 a:hover {
        color: #3fc5a2;
    }
    
    .page_link_btn a:hover::after,
    .page_link_btn_2 a:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
        transition-delay: 0s;
        transition: opacity .4s, transform .6s ease-in-out;
    }

    #ticket_wrap .ticket_item li a:hover { opacity: .5;}

    #outline_wrap p:hover {
        color: #3fc5a2;
        background-color: #fff;
    }

    #sns ul li:hover { 
        opacity: .6;
    }

    #contact_wrap ul li a:hover { 
        opacity: .4;
        transition: all .2s;
    }

    #entry:hover {
        opacity: .8;
        transition: all .2s;
    }

    .past_photo a:hover {
        opacity: .6;
        transition: all .2s;
    }

    #news .tvo-report-thumbnail-wrapper:hover { opacity: .6;}

}
  
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {    
       
    .c-btn:hover {
        color: #d4cd60;
    }
    
    .c-btn:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1.1);
        transition-delay: 0s;
        transition: opacity .4s, transform .6s ease-in-out;
    }

    #ticket_wrap .ticket_item li a:hover { opacity: .5;}

    #outline_wrap p:hover {
        color: #3fc5a2;
        background-color: #fff;
    }

    #sns ul li:hover { 
        opacity: .6;
    }

    #contact_wrap ul li a:hover { 
        opacity: .4;
        transition: all .2s;
    }

    #entry:hover {
        opacity: .8;
        transition: all .2s;
    }

    .past_photo a:hover {
        opacity: .6;
        transition: all .2s;
    }

    #news .tvo-report-thumbnail-wrapper:hover { opacity: .6;}

}