@charset "UTF-8";

/* ベース */

*{
    margin: 0;
    padding: 0;
}

/* 応急＋保険（横スクロール抑止） */
html, body { overflow-x: hidden; }

/* 画像/動画のインライン隙間対策 */
img, video { display:block; max-width:100%; height:auto; }


body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
    background-image: url(../img/2025ow_can_bkimg.jpg);
}

/* フォント */
.noto-sans-jp {
    font-family: "Noto Sans JP", sans-serif;
}

.m-plus {
    font-family: "M PLUS 1p", sans-serif;
}

.m-plus-1p-black {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 900;
    font-style: normal;
}

/* section */
.section-wrap {
    padding: 10px 0;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.section-inner {
    width: 100%;
    margin: 0 auto;
}

.section-ttl {
    text-align: center;
    color: #000;
    font-size: 40px;
    font-weight: 900;
    width: 100%;
    margin: 0 auto;
    line-height: 1.2;
}


/* 飾り */
.triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid black;
}

.center-position {
    display: block;
    text-align: center;
    margin: 30px auto 50px;
}


/* ============================= */
/* header */
/* ============================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1080px;
    padding: 15px 0;
    box-sizing: border-box;
    background: #fff;
    position: relative;
    z-index: 100;
    min-height: auto; /* Safariでheight固定化防止 */
    height: auto;     /* 明示的に高さをautoに戻す */
    margin: auto;
}

.header > * {
    min-height: 0; /* flex子要素が親を押し広げるのを防ぐ */
}

/* Safari flexbox画像伸び対策を追加 */
.header-logo img,
.header-button img {
    width: 85% !important;       /* 必要なら変更 */
    height: auto !important;     /* 高さを自動に戻す */
    max-height: none !important; /* 強制的に制限解除 */
    min-height: 0 !important;    /* Safari flex対策 */
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}


/* ============================= */
/* kv PC */
/* ============================= */
.kv {
    position: relative;
    width: 100%;
    width: min(100%, 1080px);  
    margin: auto;
  }
 
.kv_mv{
    width: 95%;
    position: relative;
    margin: 10px auto;
    text-align: center;
   border-radius: 20px;
}

  .copy-txt{
    position: absolute;
    bottom: -50px;       /* 動画の下からの距離を調整 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 70%;
    text-align: center;
    pointer-events: none; /* クリックを動画に通したい場合 */
    margin: auto;
  }
 
/* ============================= */
/* campaign */
/* ============================= */

.ow-campaign,
.skillup{
    max-width: 1080px;
    margin: auto;
    margin-top: 30px;
}

.campaign-txt-sub {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    color: aliceblue;
}

.campaign-txt-sub span {
    background-color: #000;
    border-radius: 20px;
    padding: 8px;
}

.img-box {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 30px;
    padding: 0px 10px;
}

.img-s {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.ow-youtube-ttl{
    margin-top: 60px;
    color: #0072be;
}

/*無料説明会 */
.ow-info-session{
    display: flex;
    width: 100%;
    height: auto;
    max-width: 1080px;
    margin: 0 auto;
    margin-top: 80px;
}

.infos-img-box{
    width: 50%;
    height: auto;
}

.infos-img{
    object-fit: cover;
    width: 100%;
    height: auto;
}

.infos-button-box{
    width: 50%;
    height: auto;
    text-align: center;
    margin: auto;
}
.infos-button-img{
    object-fit: contain;
    width: 100%;
    height: auto;
}

/*キャンペーン内容 */

.mini-ttl{
    font-size: 22px;
    font-weight:bold;
    text-align: center;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 40px;
}

.skillup-price-box{
    display: flex !important; 
    justify-content: space-between !important;
    align-items: center;
    width: 100%;
    margin: auto;
    margin-top: 50px;
    flex-wrap: wrap !important;
}

.skillup-price-main-img-box{
    width: 100%;
    margin: 100px auto 0;
    text-align: center;
    padding: 0 10px;
    box-sizing: border-box;
}

.skillup-price-main-img{
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
}


.skillup-price-img-box{
    width: 48%;
}


.skillup-img{
    width: 100%;
    height: auto; 
}


.skillup-price-sp-box{
    align-items: center;
    width: 100%;
    margin: auto;
    margin-top: 20px;
}

.skillup-price-img-box-sp{
    width: 90%;
    padding: auto 5px;
    margin: auto;
    margin-bottom: 50px;
}



.section-ttl-skillup {
    color: #0072be;
    text-align: center;
    font-size: 40px;
    font-weight: 900;
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    line-height: 1.2;
}



/* swiper */
.swiper{
    max-height: 300px;
}
.ticker-swiper1 .swiper-slide{
    height: 250px;        /* ご指定の高さ */
    border-radius: 30px;
    overflow: hidden;      /* はみ出しを隠す＝角丸が効く */
  }

    .ticker-swiper1 .swiper-slide img{
        width: 100%;
        height: 100%;
        display: block;        /* 画像下の余白防止 */
        object-fit: cover;     /* 枠いっぱい。はみ出しはトリミング */
        object-position: center; /* 中心から表示 */
    }


.event-box{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    margin: auto;
    padding: 10px;
}

.event-img-box{
    width: 30%;
    margin-bottom: 30px;
    padding: auto 5px;
}

.event-img{
    width: 100%;
    height: auto; 
}

/* ショップ情報 */
.shop-info h2{
    color: #0072be;
}

.shop-info{
    display: flex;
    justify-content: space-between;
    margin: auto;
    flex-wrap: wrap;
    padding:15px 5px;
}
.shop-info-box{
    width: 32%;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;   
}

.shop-icon{
    width: 5%;
    text-align: center;
    margin: auto;
    margin-top: 50px;
}

h4{
    font-size: 18px;
    font-weight: bold;
    color: #0072be;
    text-align: center;
    margin:5px auto 10px;
    font-weight: bold;

}
.shop-button-box{
    display: flex;
    justify-content: space-between;
    margin: auto;
    margin-bottom: 10px;
   
}
.button-shop,
.button-contact{
    width: 45%;
    margin: auto;
    background-color: #0072be;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    margin-bottom: 5px;
    font-weight: bold;
    vertical-align: middle;
    display: inline-block;
    padding: 5px;

}

.button-contact{
    background-color:#e60019;
}

.shop-info-box img{
    display:block;
    width: 100%;
    height: auto;
}

.shop-info h3{
    color:#0072be;
}

.ow-link{
    margin: 100px auto 50px;
    text-align: center;
    padding: 0 10px;
    width: 100%;
}


/* フッター */
.footer{
    background-color: #fff;
   padding: 50px auto 30px;
   width: 100%;
   height: 80px;
   margin-top: 60px;
}

.footer-img{
    width: 300px;
    text-align: center;
    margin: auto;
    padding: 15px;
}



/* ============================= */
/* メディアクエリ */
/* ============================= */

/* 初期表示（PC想定） */
.pc { display: block; }
.sp { display: none; }

/* ============================= */
/* PC（960px以上） */
@media (min-width: 960px) {
    .pc { display: block; }
    .sp { display: none ; }
  
  }


/* ============================= */
/* タブレット（768〜959.9px） */
@media (min-width: 768px) and (max-width: 959.9px) {
    .pc { display: block !important; }
    .sp { display: none !important; }
  

    .ow-campaign{
        margin-top: 50px;
    }

    .section-ttl {
        font-size: 20px;
    }

    .campaign-txt-sub{
        font-size: 16px;
        margin-top: 16px;
    }

    .ow-main-img {
        padding: 0 5%;
    }

    .ow-pointo-ttl{
        margin-top: 30px;
    }

    .ow-link{
        margin-top: 20px;
        padding: 0 5px;
    }

    .section-ttl-skillup {
        font-size: 20px;
    }

    .skillup-price-main-img-box{
        margin-top: 20px;
        padding: 0 5px;
    }

    .shop-icon{
        margin-top:15px ;
    }
   
  }





/* ============================= */
/* スマホ（〜767.9px） */
@media (max-width: 767.9px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
  

    .ow-campaign{
        margin-top: 50px;
    }


    .section-ttl {
        font-size: 20px;
    }

    .campaign-txt-sub{
        font-size: 16px;
        margin-top: 16px;
    }

    .ow-main-img {
        padding: 0 5%;
    }
    
    .ow-info-session{
        padding: 10px;
        flex-direction: column; /* 縦並びに変更 */
        max-width: 100%; /* 最大幅を100%に */
        margin-top: 30px;
    
    }

    .infos-img-box,
    .infos-button-box {
        width: 100%; /* 各要素の幅を100%に */
    }

    .infos-button-box {
        margin-top: 20px; /* ボタン部分の間隔を調整 */
    }

    .mini-ttl{
        margin-top: 20px;
        font-size: 20px;
    }

    .ow-point-text.sp{
       display: block;
        align-items: center;
        width: 100%;
        margin: auto;
    }
    
    .ow-point-img-box.sp{
        width: 100%;
    
    }

    .swiper{
        max-height: 150px;
    }

    .ticker-swiper1 .swiper-slide{
        height: 150px;        /* ご指定の高さ */
        border-radius: 20px;
        overflow: hidden;      /* はみ出しを隠す＝角丸が効く */
      }

      .shop-info-box{
        width: 48%;
    }

    .shop-info h2{
        font-size: 18px;
    }
    
.shop-button-box{
    height: 50px;
}
    .button-contact,
    .button-shop{
        font-size: 12px;
      
    }

    .ow-link{
        margin-top: 20px;
        padding: 0 5px;
    }

    .section-ttl-skillup {
        font-size: 20px;
    }

    .skillup-price-main-img-box{
        margin-top: 20px;
        padding: 0 5px;
    }

    .shop-icon{
        margin-top:15px ;
    }


  }