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

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

/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

/* ----------------------------------------------------------
   アピールエリアフルスクリーン（ヘッダー固定あり）
----------------------------------------------------------- */

/* ヘッダー固定（トップページのみ） */
.front-top-page .header-container {
   position: fixed; 
   z-index: 9;
   width: 100%;
}

/* ヘッダー背景透過 */
.front-top-page #header-container,
.front-top-page #header-container .navi,
.front-top-page #header-container .navi-in a:hover {
    background-color: transparent;
}
	
/* ----------------------------------------------------------
   アピールエリア
---------------------------------------------------------- */
.front-top-page .appeal {
   height: 100svh; /* 画面縦幅いっぱい */
   background-size: cover;  /* 背景画像をフィット */
}

.front-top-page .appeal-in {
   height: 100%; /* 親要素に合わせる */
   width: 100%;  /* 横幅いっぱい */
}

/* アピール内コンテンツ背景を透明に */
.front-top-page .appeal-content {
   background-color: transparent;
}

/* スクロール矢印アニメーション ---------------------------------------------- */
@keyframes arrow-move {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}

/* 全体（矢印＋テキスト）*/
.scroll-wrap {
  position: absolute;
  bottom: 40px; /* 下から40pxの位置 */
  left: 50%;    /* 横中央 */
  transform: translateX(-50%); /* 中央寄せ */
  text-align: center;
}

/* 矢印本体 */
.scroll-arrow {
  animation: arrow-move 2s ease infinite;
}

/* 矢印の形状 */
.scroll-icon {
  display: block;
  width: 1em;
  height: 1em;
  border: 1px solid var(--cocoon-text-color);
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin: 0 auto;
}

/* テキスト */
.scroll-text {
  font-size: 14px;
  color: var(--cocoon-text-color);
  margin-top:25px;
}

@media screen and (max-width: 834px) {
    .appeal {
        background-position: 32%; /* 左端から30%に調整 */
    }
}

/* フッターの画像変更 */
#footer {
	background-image: url( http://ryoyakunonaruki.com/wp-content/uploads/2026/01/c37bab6d29a6c477441c07237ce94cd6.png );
	background-size: cover;
}

/* モバイル版フッターの画像位置の調整 */
@media screen and (max-width: 834px) {
	#footer {
		background-size: auto 100%;
		background-position: center center;
	}
}

/* トップへ戻るボタン画像の表示調整 */
.go-to-top-button {
 width: 60px; /* ボタン画像の表示幅 */
 height: auto; /* ボタン画像の高さは自動調整 */
}
.go-to-top-button:hover { /* カーソルを合わせると少し拡大する */
  transform: scale(1.1);
}
.go-to-top {
 right: 10px; /* 右から10pxの位置に配置 */
 bottom: 30px; /* 下から30pxの位置に配置 */
}

/* 左下「TOP」ボタンのページ内のスムーススクロール */
html {
 scroll-behavior: smooth;
}

/* モバイルメニューボタンを右上にしつつ、被さり防止 */
.mobile-menu-buttons {
  left: auto;
  right: 0;
  width: auto;
}

/* タブブロックのスタイル ---------------------------------------------- */

/* タブラベル共通 */
[class*="is-style-cstm-tab-"] .tab-label-group .tab-label {
   padding: 0.6em 1.5em;
   text-align: center;
   border-radius: 0;
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* タブ幅均等配置（grid / wrap） */
[class*="is-style-cstm-tab-grid-"] .tab-label-group .tab-label,
[class*="is-style-cstm-tab-wrap-"] .tab-label-group .tab-label {
   flex: 1;
}

[class*="is-style-cstm-tab-"] .tab-label-group{
   font-size:.9em;
}

/* タブ折り返し（wrap） */
[class*="is-style-cstm-tab-wrap-"] .tab-label-group {
   flex-wrap: wrap;
}

/* 吹き出しタブ */
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group {
   gap: 7px 3px;
   padding-bottom: 1em;
}
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group .tab-label {
   position: relative;
}
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-label-group .tab-label.is-active:after {
   background-color: var(--cocoon-tab-label-active-color);
   clip-path: polygon(0 0, 100% 0, 50% 100%);
   content: '';
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: calc(100% - 1px);
   height: 8px;
   width: 15px;
}

/* 下線タブ */
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label {
   background: none;
   border-bottom: 2px solid var(--cocoon-tab-label-color);
}
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label.is-active {
   background: none;
   border-color: var(--cocoon-tab-label-active-color);
   color: var(--cocoon-tab-label-active-color);
}

/* ホバー時の設定 */
[class*="is-style-cstm-tab-"]:not([class*="-underline"]) .tab-label-group .tab-label:hover {
   background-color: var(--cocoon-tab-label-active-color);
   color: var(--cocoon-white-color);
}
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-label-group .tab-label:hover {
   border-color: var(--cocoon-tab-label-active-color);
   color: var(--cocoon-tab-label-active-color);
}

/* コンテンツ部分（simple / bubble / underline 共通） */
[class*="is-style-cstm-tab-"][class*="-simple"] .tab-content-group,
[class*="is-style-cstm-tab-"][class*="-bubble"] .tab-content-group,
[class*="is-style-cstm-tab-"][class*="-underline"] .tab-content-group {
   border: none;
   padding: 1.2em 0;
}

/* コンテンツ部分（frame） */
[class*="is-style-cstm-tab-"][class*="-frame"] .tab-content-group {
   border-radius: 0;
}
[class*="is-style-cstm-tab-"][class*="-frame"] .tab-label-group {
   gap: 0;
}

:root {
   --cocoon-tab-label-color: #f2f2f2; /* 非アクティブ時の背景色 */
   --cocoon-tab-label-active-color: #404040; /* 選択したタブの背景色 */
}

/* コンタクトフォーム全体のスタイリング */
.custom-form {
    max-width: 600px; /* フォーム全体の最大幅を指定し、中央寄せでバランスを整える */
    margin: 0 auto; /* 中央に配置 */
    font-family: 'Arial', sans-serif; /* フォーム全体のフォントを指定 */
    color: #333; /* テキストの色を濃いグレーに設定 */
}

.custom-form label {
    display: inline-block; /* ラベルを独立したブロック要素として扱う */
    margin-bottom: 8px; /* ラベル下に余白を追加して間隔を調整 */
    font-weight: bold; /* ラベルの文字を強調 */
    font-size: 14px; /* ラベルの文字サイズを調整 */
}

/* 必須ラベルのスタイリング */
.custom-form .required {
    display: inline-block; /* 必須ラベルをインラインで表示 */
    margin-left: 5px; /* ラベルと必須マークの間隔を調整 */
    padding: 2px 6px; /* 内側の余白を設定して視認性を向上 */
    font-size: 12px; /* 必須ラベルの文字サイズを指定 */
    color: #fff; /* テキスト色を白に設定 */
    background-color: #d5e2ba; /* 必須ラベルの背景色をメインカラーに設定 */
    border-radius: 3px; /* ラベルを角丸にして柔らかい印象に */
    font-weight: bold; /* ラベルの文字を太字に */
}

/* 入力フィールド */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea {
    width: 100%; /* フィールド幅をフォームに合わせて最大化 */
    padding: 10px; /* 内側の余白を設定して入力しやすくする */
    margin-bottom: 30px; /* 各フィールドの下に余白を設定して間隔を広げる */
    border: 2px solid #d5e2ba; /* メインカラーを枠線に適用 */
    border-radius: 5px; /* 入力フィールドを角丸に */
    background: #f8f9fa; /* フィールド背景を薄いグレーに設定 */
    font-size: 14px; /* フィールド内テキストのサイズを指定 */
    transition: border-color 0.3s ease, background-color 0.3s ease; /* フォーカス時のスムーズな変化を設定 */
}

.custom-form input[type="text"]:focus,
.custom-form input[type="email"]:focus,
.custom-form input[type="tel"]:focus,
.custom-form textarea:focus {
    border-color: #d5e2ba; /* フォーカス時の枠線色を強調 */
    outline: none; /* ブラウザデフォルトのフォーカス枠を削除 */
    background: #f3ffda; /* フォーカス時の背景色をメインカラーの薄いバリエーションに変更 */
}

/* 送信ボタンの調整 */
.custom-form input[type="submit"] {
    display: block; /* ブロック要素として中央揃えしやすく設定 */
    width: 80%; /* ボタン幅を適度に制限 */
    margin: 0 auto; /* ボタンを中央寄せ */
    padding: 12px 20px; /* ボタン内側の余白を調整 */
    border: none; /* 枠線を削除してシンプルなデザインに */
    border-radius: 25px; /* ボタンを丸みのある形状に設定 */
    background: #d5e2ba; /* ボタン背景にメインカラーを適用 */
    color: #fff; /* ボタン文字を白に設定 */
    font-size: 16px; /* ボタン文字のサイズを指定 */
    cursor: pointer; /* ボタンにホバーポインタを表示 */
    transition: background-color 0.3s ease; /* ホバー時の背景色変更をスムーズに */
}

.custom-form input[type="submit"]:hover {
    background: #f3ffda; /* ボタンホバー時にメインカラーの濃いバリエーションを表示 */
}


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

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

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