@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.ff-sawarabi-mincho, .wf-active .ff-sawarabi-mincho, .wp-admin-ff-sawarabi-mincho .editor-styles-wrapper {
    font-family: "Noto Serif JP", sans-serif;
}

code {
    font-family: 'Noto Serif JP', monospace;
}

.skin-grayish .navi {
  position: fixed; /* 要素を画面に固定 */
  left: 0; /* 左端に配置 */
  top: 0; /* トップからの位置 */
  height: 100vh; /* ビューポートの高さに合わせる */
  width: 200px; /* ここでの幅は例えば200pxとしますが、お好みで調整してください */
  z-index: 1000; /* 他の要素よりも前面に表示 */
  overflow-y: auto; /* 内容が多い場合はスクロール可能に */
}

.skin-grayish .navi a {
  display: block;
  padding: 10px;
  color: ; /* リンクの色 */
  text-decoration: none; /* アンダーラインを消す */
}

/* ナビゲーションバー */
#navi {
  position: fixed; /* 要素を画面に固定 */
  left: 0; /* 左端に配置 */
  top: 0; /* トップからの位置 */
  height: 100vh; /* ビューポートの高さに合わせる */
  width: 200px; /* 幅を200pxに設定 */
  z-index: 1000; /* 他の要素よりも前面に表示 */
  overflow-y: auto; /* 内容が多い場合はスクロール可能に */
}

#navi a {
  display: block;
  padding: 10px;
  color: black; /* リンクの色 */
  text-decoration: none; /* アンダーラインを消す */
}

/* ヘッダー */
body {
  margin-left: 200px; /* ナビゲーションバーの幅に合わせて左側にマージンを設定 */
  width: calc(100% - 200px); /* 全体の幅からナビゲーションバーの幅を引いた幅に設定 */
  top: 0; /* トップからの位置 */
  right: 0; /* 右端に配置 */
  z-index: 500; /* ナビゲーションバーの後ろになるようにz-indexを設定 */
}

@media (max-width: 768px) {
  body {
    margin-left: 0; /* マージンを解除 */
    width: 100%; /* 全体の幅を100%に設定 */
    top: 0; /* トップからの位置は変更なし */
    right: 0; /* 右端に配置は変更なし */
    z-index: auto; /* z-indexを自動で設定 */
  }
}


.menu-item-logo {
	margin-bottom: 300px;
}

.menu-item-logo a {
  width: 140px; /* 幅を100ピクセルに固定 */
  height: 50px; /* 高さを50ピクセルに固定 */
  object-fit: cover; /* 画像が指定したサイズに収まるように調整 */
}

.navi-in ul {
	background-color: #ffffff;
}

#menu-top {
	background-color: #ffffff;
}

footer .menu-item-logo {
    display: none;
}


@media (max-width: 768px) {
    .menu-item-logo {
        display: none;
    }
}



.eximg01 {
    overflow: hidden;
}

.eximg01 img {
    transition: transform .6s ease;
}

.eximg01 p {
    transition: transform .6s ease;
}

.eximg01:hover img {
    transform: scale(1.2);
}

.eximg01:hover p {
    transform: scale(1.2);
}

.mar20px {
	margin: 0 20px
}

@media (min-width: 769px) {
  .max-width600px {
    max-width: 600px;
	      margin-left: auto;
    margin-right: auto;
  }
}

/* Video要素をフルスクリーンにするためのスタイル */
.main video {
    width: 100vw; /* ビューポートの幅全体を使用 */
    position: relative; /* relativeで位置を調整 */
    left: 50%; /* 中央に配置 */
    right: 50%;
    transform: translateX(-50%); /* 左に50%分ずらして中央揃えに修正 */
    max-width: 100vw; /* 最大幅をビューポートの幅に限定 */
    height: auto; /* 高さは自動調整 */
}

#header {
    display: none;
}

.content {
    margin-top: 0; /* 上の余白を消す */
}

.main {
    padding-top: 0 !important; 
}

.tategaki-center {
    writing-mode: vertical-rl;
    position: absolute; /* 要素を画面に対して絶対位置で配置 */
    top: 50%; /* 上端から画面の50%の位置に */
    left: 50%; /* 左端から画面の50%の位置に */
    transform: translate(-50%, -50%); /* 要素の中心が画面の中心に来るように調整 */
    white-space: nowrap; /* テキストを折り返さない */
}

.wp-block-cocoon-blocks-column-2 .wp-block-cover, .wp-block-cocoon-blocks-column-2 .wp-block-cover-image {
min-height: 300px;
}

.header-container {
    position: relative;
    width: 100%;
    z-index: 1000;
}

.site-logo {
    width: auto;
    max-width: 400px;
}

.hamburger-menu {
    position: absolute;
    right: 10px;
    top: 10px; /* メニューの上の位置を調整 */
    width: 40px;
    height: 40px;
}

@media (min-width: 769px) {
    .site-logo {
        display: none; /* PCビューでロゴを非表示にする */
    }
}