@charset "UTF-8";
@import url('css/layout-ojisan.css');
/*!
Theme Name: Cocoon版おじさんレンタルカスタマイズテーマ
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: Hisae Komatsu
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1023px以下（タブレット・スマホ対応） */
@media screen and (max-width: 1023px) {
  body {
    overflow-x: hidden !important;
    position: relative !important;
    width: 100% !important;
  }
  .site-content {
    width: 100%;
    margin: 0 auto;
  }
  .wrap {
    width: 95%; /* 1044px固定ではなく、画面幅に対して95%にする */
    margin: 0 auto;
    display: block;
  }
  .main, .sidebar {
    width: 100%; /* スマホでは縦並びにするため100%にする */
  }
  /* おじさんスライダーFVの幅*/
  .ojisan-slider {
    width: 100% !important;
  }
  #sidebar-ojisan {
    width: 100%;
  }
  
}
/*834px以下*/
@media screen and (max-width: 834px) {
  body {
    overflow-x: hidden !important;
    position: relative !important;
    width: 100% !important;
  }
  .site-content {
    width: 100%;
    margin: 0 auto;
  }
  /*必要ならばここにコードを書く*/
   .slick-dots {
    display: block !important;
  } 
}
@media (max-width: 768px) {
/* メニューの初期位置を固定 */
  /* ハンバーガーを表示（!importantで強制） */
    .header-inner {
    position: relative; /* これが絶対必要！ */
}
    
  .header-inner .sp-menu-toggle {
    display: block !important;
    width: 42px !important;
    height: 35px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10001 !important;
    margin-left: auto !important;
    padding: 0 !important;
  }
  /* 3本線の見た目 */
  .sp-menu-toggle span {
    display: block !important;
    width: 30px !important;
    height: 3px !important;
    background-color: #333 !important;
    margin: 6px auto !important;
    transition: all 0.3s ease !important;
  }
  /* 【JS連動】×にする（!importantで強制） */
  /* 1. 三本線を「×」にする（bodyを付けて優先度を最大に） */
  body .sp-menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
    background-color: #333 !important;
  }
  body .sp-menu-toggle.open span:nth-child(2) {
    opacity: 0 !important;
  }
  body .sp-menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
    background-color: #333 !important;
  }
  /* SPメニュー本体（!importantで強制） */
  .header-inner .sp-menu {
    display: block !important;
    position: absolute !important;
    top: 9vh !important;
    right: -21rem !important;
    width: 280px !important;
    /* ★ここが超重要 */
    height: calc(100vh - 7rem) !important;
    background: #ece9e4cc;
    padding: 20px !important;
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2) !important;
    transition: right 0.4s ease !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    /* ★iOSスクロール安定化 */
    -webkit-overflow-scrolling: touch;
  }
  /* 【JS連動】メニュー出現 */
  .header-inner .sp-menu.active {
    right: -1rem !important;
  }
  /* メニュー内レイアウト */
  /* メニュー内レイアウト */
  .sp-menu .nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .sp-menu .nav-list a {
    text-decoration: none !important;
    color: #333 !important;
    font-size: 16px !important;
    display: block !important;
  }
  .sp-menu .login-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 30px !important;
  }
}
/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
}