@charset "UTF-8";

/* =========================================================
   Mobile tuning - works in tandem with style.css v3
   Activated below 1000px (LP is viewport=360 mobile-first)
   ========================================================= */

@media (max-width:1000px){
  body{font-size:15px;}

  /* Headings */
  h1{font-size:21px; padding:16px 12px 14px;}
  h1::after{width:32px; height:2px; margin-top:12px;}

  h2{
    font-size:19px;
    padding:26px 0 0;
    margin:30px 0 18px;
  }
  h2::before{width:40px; height:3px;}

  h3{
    font-size:16.5px;
    padding:10px 0 10px 14px;
    margin:22px 0 14px;
  }

  h4{
    font-size:15px;
    padding:6px 0 8px;
    margin:18px 0 10px;
  }

  p{
    font-size:14.5px;
    line-height:1.92;
    margin:12px auto;
  }

  .osusume{font-size:16px;}

  .first{font-size:14.5px; width:96%;}

  main{padding:0 0 88px;}

  /* Generic section */
  section{
    width:96%;
    margin:8px auto 0;
    padding:20px 14px;
    border-radius:10px;
  }

  /* Hero */
  .hero-catch{
    width:96%;
    padding:40px 18px 36px;
    margin:0 auto 12px;
    border-radius:14px;
  }
  .copy-tag{
    font-size:10px;
    letter-spacing:.22em;
    margin-bottom:18px;
  }
  .copy-headline{
    font-size:25px;
    line-height:1.42;
    margin:0 0 14px !important;
  }
  .copy-num{font-size:1.5em;}
  .copy-sub{
    font-size:12.5px !important;
    margin:0 auto 24px !important;
    line-height:1.85 !important;
  }
  .evidence-stats{padding-top:20px; max-width:380px;}
  .stat-num{font-size:24px;}
  .stat-num small{font-size:11px;}
  .stat-label{font-size:9.5px; letter-spacing:.14em;}

  /* Catch (hero gif + campaign banner) */
  .catch{width:100%; padding-bottom:0; margin:10px auto;}
  .catch img{width:96%; max-width:none; border-radius:10px; margin:0 auto 6px;}

  /* Campaign banner */
  .campaign-banner{
    width:96%;
    padding:18px 16px 16px;
    border-radius:12px;
  }
  .campaign-tag{
    font-size:9.5px;
    letter-spacing:.22em;
    padding:3px 10px;
    margin-bottom:12px;
  }
  .campaign-name{
    font-size:18px;
    margin-bottom:14px;
    line-height:1.45;
  }
  .campaign-deadline{padding:9px 20px;}
  .campaign-deadline-num{font-size:22px;}
  .campaign-deadline-sub{font-size:10px; letter-spacing:.18em;}

  /* Evidence row */
  .evidence-row{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    width:96%;
    margin:10px auto 22px;
  }
  .badge-item{padding:18px 8px 14px; min-height:100px;}
  .badge-item::before{top:12px; width:26px;}
  .badge-num{font-size:9.5px; letter-spacing:.2em; margin:12px 0 6px;}
  .badge-label{font-size:12.5px; line-height:1.55;}

  /* Compare table */
  .hikaku{width:100%;}
  .hikakuhyou{width:96%; margin:0 auto;}
  .hikakuhyou th{padding:9px 3px; font-size:11px;}
  .hikakuhyou tr td{
    font-size:11px;
    padding:9px 3px;
    line-height:1.45;
  }
  .hikakuhyou tr td p{
    font-size:11px;
    margin:4px auto;
    line-height:1.35;
  }
  .hikakuhyou tr td:first-child{font-size:10.5px;}
  .hikakuhyou td img{width:88%;}
  .hikakuhyou .chair{width:60%; max-width:50px;}
  .ki.aka{font-size:10px;}

  /* What you learn */
  .wakarukoto{
    width:96%;
    padding:24px 18px 20px;
    margin:26px auto 26px;
    border-radius:12px;
  }
  .wakarukoto::before{width:48px; height:3px;}
  .memomidasi{font-size:15.5px;}
  .memomidasi img{width:18px; height:18px;}
  .nani li{font-size:14px; padding-left:24px;}
  .nani li:first-child{padding-left:0;}
  .nani li:not(:first-child)::before{width:13px; height:13px; top:7px;}

  .erabikatayouso{width:100%;}

  /* Ranking intro */
  .ranking-intro{
    margin:30px auto 16px;
    padding:28px 16px 22px;
    border-radius:12px;
  }
  .intro-tag{font-size:9.5px; letter-spacing:.22em; margin-bottom:14px;}
  .intro-copy{font-size:22px; line-height:1.5;}
  .intro-arrow{font-size:18px; margin-top:14px;}

  /* Ranking cards */
  .syoukai{
    margin:22px auto;
    padding:24px 14px 20px;
    width:96%;
    border-radius:12px;
  }
  .syoukai[id="1"],
  .syoukai[id="2"],
  .syoukai[id="3"]{
    margin-top:38px;
    padding-top:30px;
  }
  .syoukai[id="1"]::before,
  .syoukai[id="2"]::before,
  .syoukai[id="3"]::before{
    font-size:11px;
    padding:7px 15px;
    letter-spacing:.14em;
    top:-14px;
    left:18px;
  }
  .syoukai h3{
    font-size:16px;
    padding:5px 12px;
  }

  .syouhin{padding:14px;}
  .syouhin img{width:70%; max-width:240px;}

  .me-ka-{margin-bottom:16px;}

  /* Data table */
  .deta td{padding:11px 12px;}
  .td1{
    width:44%;
    font-size:12px;
  }
  .td2{
    width:56%;
    font-size:13px;
  }
  .deta tr:first-child .td2 .aka{font-size:17px;}

  /* CTA */
  .btn{
    font-size:16px;
    padding:1em 1em;
    width:94%;
    max-width:none;
    border-radius:50px;
    margin:18px auto;
  }
  .btn_arrow{
    padding:1em 2em 1em 1em;
    min-width:0;
  }
  .backbtn{
    border-radius:50px;
    font-size:16px;
  }
  .off{
    font-size:14px;
    width:94%;
    padding:8px 14px 9px;
    margin:18px auto 12px !important;
  }
  .off::after{
    bottom:-8px;
    border-left-width:8px;
    border-right-width:8px;
    border-top-width:8px;
  }

  .syoukai p{
    font-size:14.5px;
    line-height:1.92;
  }

  .syousaibtn img{width:96% !important; max-width:100px;}

  /* Browser-back modal */
  .modal__content{
    width:94% !important;
    padding:20px 16px !important;
  }
  .modal__content h2{
    font-size:14.5px;
    padding:9px 12px;
  }
  .modal__content h4.kopipe{font-size:14px;}
  .modal__content .ku-pon{font-size:14.5px;}
  .modal__content .kyou{font-size:1.5em;}
  .kopipe{font-size:14.5px;}

  .backsyoukai p{
    font-size:32px;
    font-weight:700;
    text-align:center;
  }
  .isu{display:none;}

  /* Filter */
  .open{
    font-size:13.5px;
    padding:11px 22px;
    max-width:280px;
  }
  .bl_selectBlock_wrapper_wrapper{flex-direction:column;}
  .bl_selectBlock_check input[type=checkbox] + label{
    font-size:13px !important;
    line-height:38px;
  }
  .bl_selectBlock_content{
    width:100%;
    flex-direction:column;
  }
  .bl_searchResultBlock{width:100%;}
  .bl_selectBlock{
    padding:16px 14px;
    margin-bottom:14px;
  }
  .check{
    width:96%;
    padding:14px;
    border-radius:12px;
  }
  .check div{font-size:14px !important;}
  .check div label{border:none;}
  .check div span{
    font-size:13.5px !important;
    width:100%;
    text-align:center;
  }
  .bl_selectBlock_ttl{
    width:60%;
    margin-bottom:10px;
    font-size:13px;
    height:36px;
  }
  .kodawari{
    width:100% !important;
    justify-content:space-between !important;
    flex-direction:column;
    padding:12px 12px 0;
  }
  .kekkaimg{width:30%;}
  .kekkaimg img{width:100%;}
  .kekkasyousai{
    display:flex;
    flex-direction:column;
    width:68%;
  }
  .botan{width:60%;}
  .kekkasyouhin{font-size:13.5px;}
  .kekkacontent{font-size:11.5px;}
  .kekkacontent p{font-size:11.5px;}
  .sale p{font-size:12px;}

  .js_target.js_selected{
    box-shadow:0 0 0 2px var(--primary, #0a1f4a);
  }

  .modal-container{width:96%;}
  .modal-inner{width:100%;}
  .modal-text{font-size:14px;}
  .penoff{font-size:14px;}
  .close{
    width:auto;
    font-size:12.5px;
    padding:6px 16px;
    margin:6px auto;
  }

  .kodawari .bl_selectBlock_check{width:100%;}

  .bl_searchResultBlock_item .match{padding:10px 6px;}
  .bl_searchResultBlock_item .point{font-size:12px !important;}
  .bl_searchResultBlock_item .point p{font-size:12px !important;}

  .twitter-tweet{margin:12px auto !important;}

  .anc img{border-radius:4px;}

  /* Sticky CTA */
  .sticky-cta{
    font-size:14.5px;
    padding:13px 18px;
    bottom:10px;
    border-radius:50px;
  }
}

/* Small phones */
@media (max-width:380px){
  h1{font-size:19px;}
  h2{font-size:17.5px;}
  .copy-headline{font-size:22px;}
  .intro-copy{font-size:19px;}
  .syoukai h3{font-size:15px;}
  .btn{font-size:15px;}
  .hikakuhyou tr td,
  .hikakuhyou tr td p{font-size:10px;}
  .hikakuhyou th{font-size:10.5px;}
  .hikakuhyou tr td:first-child{font-size:9.5px;}
  .ki.aka{font-size:9.5px;}
  .td1{font-size:11.5px;}
  .td2{font-size:12.5px;}
  .stat-num{font-size:22px;}
  .sticky-cta{font-size:13.5px; padding:11px 14px;}
  .badge-label{font-size:11.5px;}
  .badge-num{font-size:9px;}
}