/* =========================================================
   common_mobile.css（完成版）
   - スマホ/タブレットの調整
   - ハンバーガーで #menu を開閉（トップ画像の上に重ねる）
   - 左カラムは非表示、mainを中央寄せ
   - 横スクロール（100vw起因）対策込み
   - Greeting modal（ご挨拶モーダル）をスマホで大きく表示
========================================================= */

/* -------- 画像切替（共通） -------- */
.pc-img{ display:block !important; }
.sp-img{ display:none !important; }

.pc-img-sl{ display:block !important; }
.sp-img-sl{ display:none !important; }

/* -------- 横スクロール保険（念のため） -------- */
html, body{
  overflow-x: hidden;
}

img, svg, video{
  max-width: 100%;
  height: auto;
}

/* =========================================================
   Tablet（600px〜1024px）
========================================================= */
@media screen and (min-width: 600px) and (max-width: 1024px){
    
    

  /* ロゴ画像 */
  .header_2 h1 img{
    width:100%;
    height:auto;
    vertical-align:bottom;
    margin:0;
  }

  /* レイアウト：縦並び（必要なら） */
  .content{
    display:flex;
    flex-direction:column;
  }
  .order1{ order:3; }
  .order2{ order:1; }

  /* 左カラムは基本非表示 */
  .aside_left{ display:none; }

  /* main中央 */
  .main.order2{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0 16px;
  }

  /* 画像切替：タブレットはスマホ画像を使うなら */
  .pc-img{ display:none !important; }
  .sp-img{ display:block !important; width:130px; }

  /* スライダー（100vwは横スクロールの犯人になりやすいので100%に） */
  .slider{
    margin:0 auto;
    overflow:hidden;
  }
  .slider img{
    width:100% !important;
    max-width:100% !important;
    height:auto;
  }
}

/* =========================================================
   Smartphone（〜768px）
========================================================= */
@media (max-width: 768px){



  /* 画像切替 */
  .pc-img{ display:none !important; }
  .sp-img{ display:block !important; width:130px; }

  .pc-img-sl{ display:none !important; }
  .sp-img-sl{ display:block !important; }

  /* レイアウト縦並び */
  .content{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:10px;
  }
  .order1{ order:2; }
  .order2{ order:1; }

  /* 左カラムは非表示 */
  .aside_left{ display:none; }

  /* main中央 */
  .main.order2{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0 16px;
  }

  /* ===== Hamburger ===== */
  .hamburger{
    display:block;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    padding:10px;
    position:absolute;   /* 画像の上 */
    top:16px;
    right:16px;
    z-index:2000;
  }

  .hamburger span{
    display:block;
    height:2px;
    width:24px;
    margin:6px auto;
    background:#111;
    border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
  }

  /* ===== Menu overlay（画像の上に重ねる） ===== */
  #menu{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,0.9);
    padding:84px 0 0;
    z-index:1500;
  }

  #menu.is-open{ display:block; }

  #menu ul{
    display:block;
    margin:0;
    padding:0;
    text-align:center;
  }

  #menu li{
    margin:0;
    padding:16px 0;
    border:none;
  }

  #menu a{
    display:inline-block;
    color:#fff;
    font-size:18px;
    padding:8px 14px;
  }

  /* ===== Greeting modal（ご挨拶モーダル） =====
     ここが「高さをもっと出したい」部分！
     - Safari/Chromeで見え方が違うので 100dvh + 100vh で両対応
  */
  .modal,
  .modal-overlay{
    align-items:flex-start !important;
    padding: 10px !important; /* ここを小さくするとさらに大きく見える */
  }

  .modal-content{
    width: 94vw !important;
    max-width: none !important;
    
    
    /* ===== ご挨拶 本文 行間調整 ===== */
.modal-content p{
  line-height: 1.6 !important;   /* 今より少し詰める */
  margin-bottom: 14px !important;
}

    /* 高さ：ここがメイン（あと少し出すなら “引く数字” を減らす） */
    height: calc(100dvh - 20px) !important; /* ← 20px を 10px とかにすると更に大きく */
    max-height: calc(100dvh - 20px) !important;

    /* 古いSafari保険 */
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;

    overflow-y: auto !important;

    /* 中の余白：小さくすると本文が多く見える */
    padding: 18px 16px !important;

    border-radius: 18px !important;
  }

  /* page_top：スマホ下部バー対策 */
  @supports (bottom: env(safe-area-inset-bottom)){
    #page_top{
      bottom: calc(24px + env(safe-area-inset-bottom));
    }
  }

  /* スライダー：100vw対策（スマホも） */
  .slider{
    overflow:hidden;
  }
  .slider,
  .slider img{
    width:100% !important;
    max-width:100% !important;
  }
}




/* ===== Top Ameblo Banner ===== */

.profile-hero .top-ameblo-banner{
    width: 50%;
  display:block;
  margin: 0px 0 0px;
  padding: 10px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(45,191,104,.15), #ffffff);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.top-ameblo-banner{
    width: 50%;
  display:block;
  margin: 20px 0 20px;
  padding: 10px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(45,191,104,.15), #ffffff);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}

.profile-hero .top-ameblo-banner,.top-ameblo-banner:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(0,0,0,.12);
}

.profile-hero .top-ameblo-inner,.top-ameblo-inner{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.profile-hero .top-ameblo-label,.top-ameblo-label{
  font-size:12px;
  letter-spacing:.18em;
  color: rgba(0,0,0,.55);
}

.profile-hero .top-ameblo-title,.top-ameblo-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  color:#222;
}

.profile-hero .top-ameblo-cta,.top-ameblo-cta{
  font-size:14px;
  font-weight:700;
  color: rgba(0,0,0,.7);
}





/* =========================================================
   iPhone小さめ（〜480px）
========================================================= */
@media screen and (max-width: 480px){

  .hamburger{
    top:14px;
    right:14px;
  }

  #menu a{
    font-size:17px;
  }

  /* 小さい画面はモーダルの余白をさらに少し減らして “見える量” を増やす */
  .modal,
  .modal-overlay{
    padding: 8px !important;
  }

  .modal-content{
    width: 95vw !important;
    padding: 16px 14px !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;

    height: calc(100vh - 16px) !important;
    max-height: calc(100vh - 16px) !important;
  }
}


.header{
  
    background-color: #faf9f7
}


.site-footer{
  width:100%;
  background:#F4F1EC;
  text-align:center;
  padding:20px 0;
  font-size:14px;
  color:#777;
  border-top:1px solid #e5e5e5;
}

.contact-page {
  padding-top: 0px;
}

.thanks-page h2{
    font-size: 18px;
}

.thanks-page .thanks-p p{
    font-size: 10px:
}



/* =========================================================
   Landscape tablet（横向き）
========================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
  .slider{
    margin:0 auto;
    overflow:hidden;
  }
  .slider img{
    width:100% !important;
    max-width:100% !important;
    height:auto;
  }
}


.modal-content{ outline: 6px solid red !important; }