@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.mobile-menu-buttons {
background: #00708E;
color: white;
}
/* 公開用：サイト全体をモバイル幅に固定 */
@media (min-width: 481px){
  :root{ --mobile-w: 420px; }  /* 適宜変更 */
  body{ background:#f6f7f9; }

  /* Cocoonのメインラッパ（効かなければ #container → .wrap 等に変更） */
  #container{
    max-width: var(--mobile-w) !important;
    margin-inline: auto !important;
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(0,0,0,.12);
    background:#fff;
  }

  header, main, footer{
    max-width: var(--mobile-w) !important;
    margin-inline: auto !important;
  }
}
.content { 
 margin-top: -16px; 
}

/* PC幅でも中身は常にスマホ幅で中央（値は好みで） */
@media (min-width: 481px){
  :root{ --mobile-w: 420px; }

  /* ヘッダーの内側ラッパを必ず中央寄せ・幅制限 */
  #header .header-in,
  #header-in,
  .site-header .wrap,
  .site-branding,
  .header-container{
    max-width: var(--mobile-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ロゴブロックは中央寄せ。テーマ側のleft/transformを打ち消し */
  .logo, .site-title, .site-branding, .header-title{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* 画像ロゴのサイズ・余白を安定させる */
  .logo img, .site-branding img, .site-title img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}