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

/************************************
** 子テーマ用のスタイルを書く
** https://colorate.azurewebsites.net/ja/Color/F78DA7
** https://www.colorhexa.com/F78DA7

var(--wp--preset--color--ex-a);緑>>>>>>>>>>>>>>>>>>目立つ色（赤）ーーーーーーー置き換えなし
var(--wp--preset--color--ex-b);黄色>>>>>>>>>>>>>>>>目立つ色（黄）ーーーーーーー置き換えなし
var(--wp--preset--color--ex-c);（自由）>>>>>>>>>>>>青ーーーーーーーーーーーーー置き換えなし
var(--wp--preset--color--ex-d);目立つ色>>>>>>>>>>>>メイン青薄いーーーーーーーーＤをＡにする
var(--wp--preset--color--ex-e);青ライト>>>>>>>>>>>>メイン青中間（グラデ使用）ーＥをＤにする
var(--wp--preset--color--ex-f);青>>>>>>>>>>>>>>>>>>メイン青濃いーーーーーーーー置き換えなし

************************************/
:root {
    /* コクーンのデフォルトカラーを変更する */
    --cocoon-gsss-yellow: #E6C767; /* 原則的に黄色を設定 */
    --cocoon-gsss-red: #C7253E; /* メインカラーを設定 */
    --cocoon-gsss-blue: #024CAA; /* サブカラーを設定 */
    --cocoon-gsss-green: #257180; /* その他のカラー設定 */
    --cocoon-gsss-kuro: #2C2C2C;/*チャコールグレー (2C2C2C)*/
    --cocoon-gsss-gray: #D9D9D9;/*ライトグレー (D9D9D9)*/
    --cocoon-gsss-shiro: #FFFFFF;/*オフホワイト（F8F8F8）*/
}

/************************************************************************
** ++cocoon-gsss++ すべてに設定するスタイル
************************************************************************/
/* スタイル上書き */
.header-container,
.main,
.sidebar,
.footer {
  background: transparent;
}

/* ロゴ画像が「長体」や「横に伸びた状態」にならないように調整 */
.logo img{
  width:auto;
  max-height:100px;
}
/*（モバイル1023px以下）*/
@media screen and (max-width: 1023px){
  .logo img{
    width:auto;
    max-height:60px;
  }
}
/* ロゴ画像の高さ調整 */
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header img {
  max-height: 40px;
}

/* 画像の下にできる余白（スペース）を取り除く */
a img{display:block;}


/*（モバイル1023px以下）WordPressの管理画面バー（#wpadminbar）をモバイルデバイスでは非表示*/
@media screen and (max-width: 1023px){
  #wpadminbar{
    display:none;
  }
  html{
    margin-top: 0px !important;
  }
}

/* ページ内リンク（アンカーリンク）をスムーズにスクロール */
html { scroll-behavior: smooth;}

/*（モバイル1023px以下）ページ内リンクをクリックした際に、少し下に余白を取る*/
* {scroll-margin-top: 250px;}
@media screen and (max-width: 1023px){
	* {scroll-margin-top: 50px;}
}

/* メニューなど上部の要素と隙間なく接続する */
#content,#content-top,#main,.entry-content{margin-top:0px;padding-top:0px;}

/* コンテンツボトムの内側余白を調整 */
.content-bottom-in{padding: 0 29px;}

/*（モバイル1023px以下）コンテンツ モバイルを調整 */
@media screen and (max-width: 1023px){
  #content-top-in {
    padding-top: 50px;
  }
  #content-in {
    padding-top: 0px;
  }
}

/*（モバイル1023px以下）コンテンツ モバイルを調整 */
@media screen and (max-width: 1023px){
  .header .tagline{padding: 5px 0 0 0;margin:0px;}
  .header .logo-text{padding: 0 0 5px 0;}
  .header-container-in.hlt-top-menu.hlt-tm-small .logo-header {background: #fff;max-height: 120px;}
  .header-container-in.hlt-top-menu.hlt-tm-small .logo-header img {max-height: 120px;}
  .fvmp4{margin-top:20px;}
}

/* インサートページの下部マージンを削除 */
.insert-page{margin:0 !important;}

/* 投稿一覧のカテゴリの文字色 */
.cat-label{color: var(--cocoon-gsss-shiro);}
.cat-link{color: var(--cocoon-gsss-shiro);}

/* 特定の状況で margin-top や margin-bottom が効かない問題を解消 */
.memo{
  border: 1px solid transparent;/* margin-top,-bottomが効かない */
  padding: 0.1px;/* margin-top,-bottomが効かない */
  overflow: hidden;/* margin-top,-bottomが効かない */
}
/* アクセス解析は表示しない */
.admin-pv{
  display:none;
}


/************************************
** ++cocoon-gsss++ 特定のクラスを与えると装飾されます
************************************/
/*  LINEのためのリンク */
.link_line a{
    color: #00C300; /* LINEのカラー */
    font-weight: bold; /* 太文字 */
    text-decoration: none; /* アンダーラインなし */
}

/************************************
** ++cocoon-gsss++ （コクーンデフォルト）文字の装飾・アンダーライン
************************************/
.red{margin: 0 5px;color: var(--cocoon-gsss-red) !important;}
.blue{margin: 0 5px;color: var(--cocoon-gsss-blue) !important;}
.green{margin: 0 5px;color: var(--cocoon-gsss-green) !important;}
.bold-red{margin: 0 5px;color: var(--cocoon-gsss-red) !important;}
.bold-blue{margin: 0 5px;color: var(--cocoon-gsss-blue) !important;}
.bold-green{margin: 0 5px;color: var(--cocoon-gsss-green) !important;}
.marker{margin: 0 5px;font-weight:bold;background: var(--cocoon-gsss-yellow) !important;}
.marker-red{margin: 0 5px;font-weight:bold;color:#fff;background: var(--cocoon-gsss-red) !important;}
.marker-blue{margin: 0 5px;font-weight:bold;color:#fff;background: var(--cocoon-gsss-blue) !important;}
.marker-under{margin: 0 5px;font-weight:bold;background: linear-gradient(transparent 90%, var(--cocoon-gsss-yellow) 90%) !important;}
.marker-under-red{margin: 0 5px;font-weight:bold;background: linear-gradient(transparent 90%, var(--cocoon-gsss-red) 90%) !important;}
.marker-under-blue{margin: 0 5px;font-weight:bold;background: linear-gradient(transparent 90%, var(--cocoon-gsss-blue) 90%) !important;}


/************************************************************************
** ++cocoon-gsss++ 見出し
************************************************************************/
/* 共通のリセットスタイル */
.article h2, .article h3, .article h4, .article h5, .article h6
,#content-bottom h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    color: inherit;
    background: none;
}
.article h1,.article h2, .article h3, .article h4, .article h5, .article h6
,#content-bottom h2 {
    margin: 1.5rem 0 1rem;
    font-family: 'Arial', sans-serif;
    font-weight: normal;
}

/* h1スタイル */
.article h1 {
    letter-spacing: 1px;
    font-size: 2rem;
    color: var(--cocoon-gsss-kuro);
    border-bottom: 0px solid var(--cocoon-gsss-kuro);
    padding-bottom: 0.3rem;
    font-weight: 700;
}
/* h2スタイル */
.article h2
,#content-bottom h2 {
    letter-spacing: 1px;
    font-size: 2rem;
    color: var(--cocoon-gsss-kuro);
    border-bottom: 2px solid  var(--wp--preset--color--ex-f);
    padding-bottom: 0;
    font-weight: 700;
}
/* h3スタイル */
.article h3 {
    letter-spacing: 1px;
    font-size: 1.5rem;
    color: var(--wp--preset--color--ex-f);
    padding-bottom: 0;
    font-weight: 700;
}
/* h4スタイル */
.article h4 {
    letter-spacing: 1px;
    padding-left: 0.5rem;
    font-size: 1.25rem;
    color: var(--cocoon-gsss-kuro);
    border-left: 6px solid var(--wp--preset--color--ex-f);
    font-weight: 700;
    line-height: 1.2;
}
/* h5スタイル */
.article h5 {
    letter-spacing: 1px;
    padding-left: 0.5rem;
    font-size: 1.25rem;
    color: var(--cocoon-gsss-kuro);
    font-weight: 700;
    line-height: 1.2;
}
/* h6スタイル */
.article h6 {
    letter-spacing: 1px;
    padding-left: 0.5rem;
    font-size: 1rem;
    color: var(--cocoon-gsss-kuro);
    font-weight: 700;
    line-height: 1.2;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
	/* h1スタイル */
	.article h1 {
    font-size: 1.3rem;
	}
	.article h2 {
    font-size: 1.3rem;
	}
	/* h3スタイル */
	.article h3 {
    font-size: 1.2rem;
	}
	/* h4スタイル */
	.article h4 {
    font-size: 1.2rem;
	}
	/* h5スタイル */
	.article h5 {
    font-size: 1.1rem;
	}
	/* h6スタイル */
	.article h6 {
    font-size: 1.1rem;
	}
}


/************************************
** トップページ特定の要素を非表示にする
************************************/
.front-top-page .entry-title{display:none;}
.front-top-page .date-tags{display:none;}
.front-top-page .entry-footer{display:none;}

/************************************
** カテゴリページ（タイトル目次消し）
************************************/
body.category #archive-title{display:none;}
body.category #toc{display:none;}

/************************************
** 固定ぺージ（タイトル目次消し）
************************************/
.page .article-header{display:none;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
.pc_only{display:block !important;}
.sp_only{display:none !important;}
body.wp-admin .sp_only{display:block !important;}

/*（モバイル1023px以下）1023px以下*/
@media screen and (max-width: 1023px){
.pc_only{display:none !important;}
.sp_only{display:block !important;}
}

/************************************
** 最初のリストには点が付き、リスト内のリストには点が付かない
************************************/
ul.wp-block-list > li.list_saisyodake {
  list-style-type: disc;
}
ul.wp-block-list > li.list_saisyodake ul {
  list-style-type: none;
}

/************************************************************************
** ++cocoon-gsss++ ヘッダーフッター
************************************************************************/
/************************************
** cocoonのヘッダーメニューの調整
************************************/
#header-container .wrap {
  width: 100%;
}
html body .fixed-header {
  background-color: rgba(255, 255, 255, 0.97);
}
#header-container .navi-in a {
  color: var(--cocoon-gsss-kuro);
}
/*  「ヘッダーを固定する」にチェック後、サブメニューを表示 */
.navi-in .has-sub{
  display: inline-block;/* スクロール時、下矢印だけ出る */
}
.navi-in > ul li:hover > ul {
  display: block;/* スクロールしてないとき、 */
}
.fixed-header .navi-in > ul li:hover > ul {
  display: block;/* スクロールしたとき、 */
}

/************************************
** ++gsss_cocoon++ ヘッダーモバイルボタンが設定されてるときロゴいらない
************************************/
@media screen and (max-width: 1023px){
  #header-container{
    display:none;
  }
}
/************************************
** ++gsss_cocoon++ ナビメニューボタン
************************************/
.mobile-header-menu-buttons{
    display: none;
}
/* 親要素の高さを設定（左右の要素をflexboxで分ける） */
@media screen and (max-width: 1023px){
	.mobile-header-menu-buttons {
    display: flex;
    justify-content: space-between; /* 左右に要素を分ける */
    align-items: center;
    height: 60px; /* 必要に応じて調整 */
	}
}
/* ハンバーガーメニューアイコンを左寄せ */
.mobile-header-menu-buttons .navi-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
/* ロゴを中央揃え */
.mobile-header-menu-buttons .logo-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-grow: 1; /* 中央に広げるための設定 */
}
/* 検索アイコンを右寄せ */
.mobile-header-menu-buttons .search-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-left: auto; /* 検索アイコンが右端に寄るように設定 */
}
/* アイコン部分の上下中央揃え */
.mobile-header-menu-buttons .navi-menu-icon.menu-icon,
.mobile-header-menu-buttons .search-menu-button {
    display: flex;
    align-items: center; /* 上下の中央揃え */
    justify-content: center; /* 必要に応じて水平方向も中央揃え */
    height: 100%;
}
/* 必要に応じて */
.mobile-header-menu-buttons .menu-button-in {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
/* アイコンのキャプションを非表示にする */
.mobile-header-menu-buttons .search-menu-caption {
    display: none !important; 
}
.mobile-header-menu-buttons .menu-caption {
    display: none !important; 
}

/************************************
** ++gsss_cocoon++ ナビメニューコンテンツ（スマホで開いたときの左側のメニュー）
************************************/
.navi-menu-content .navi-menu-close-button{
  background-color: var(--cocoon-gsss-shiro);
  color: var(--cocoon-gsss-kuro);
  font-weight: normal;
  box-shadow: 0 0 5px darkgrey;
  min-height: 50px;
  text-align: left;
  font-size: 1em;
  display: flex;
  align-items: center; /* 上下中央に配置 */
  justify-content: flex-start; /* テキストを左寄せに */
  padding: 0 10px; /* 左右にマージンを追加 */
}
.navi-menu-content .navi-menu-close-button .fa-close{
margin: auto 0; /* アイコンを上下中央に配置 */
}

.navi-menu-content ul.menu-drawer{
margin-top: 2em;
margin-bottom: 6em;
}
.navi-menu-content ul.menu-drawer li a{
border-bottom:1px solid var(--cocoon-gsss-kuro);
}




/************************************
** モバイルフッター 電話をかける１つ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.mobile-footer-menu-buttons{
  background-color: var(--wp--preset--color--ex-f) !important;
  color:var(--cocoon-gsss-shiro) !important;
}
.mobile-footer-menu-buttons .navi-menu-button{
  padding: 6px 0;
}
.mobile-footer-menu-buttons .menu-icon{
  font-size: 25px;
  color:var(--cocoon-gsss-shiro) !important;
  opacity:1;
}
.mobile-footer-menu-buttons .menu-caption{
  font-size: 15px;
  font-weight:bold;
  color:var(--cocoon-gsss-shiro) !important;
  opacity:1;
}
}
/************************************
** cocoonのフッターメニューの調整
************************************/
#footer {
background-color: transparent;
border-top: 1px solid var(--cocoon-gsss-kuro) !important;
color:var(--cocoon-gsss-kuro) !important;
}
#footer, #footer a:not(.sns-button), .footer-title{
color:var(--cocoon-gsss-kuro) !important;
}

/************************************
** cocoonの追従上部戻るボタン
************************************/
.go-to-top .go-to-top-button{
background-color: var(--wp--preset--color--ex-f);
color:var(--cocoon-gsss-shiro) !important;
}

/************************************
** フッターデザイン
************************************/
#footer .footer-left {
  width: 40%;
}
#footer .footer-center {
  width: 35%;
}
#footer .footer-right {
  width: 25%;
}

#content-bottom,
#ipw-3{
  margin-bottom:0;
}
#footer,
.footer{
  margin-top:0;
}
#footer .footer-bottom{
  margin-top: 0px;
  padding: 24px;
  border-top: 1px solid var(--cocoon-gsss-kuro)  !important;
}
#footer .footer-left aside,
#footer .footer-center aside,
#footer .footer-right aside{
  margin-bottom:0 !important;
}

#footer .include_footer_l {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--cocoon-gsss-kuro);
}
#footer .include_footer_l_desc {
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--cocoon-gsss-kuro);
}
#footer .include_footer_l_name {
  font-size: 1.4rem;
  font-weight: normal;
  color: var(--cocoon-gsss-kuro);
  text-align:right;
}

#footer .include_footer_c {
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--cocoon-gsss-kuro);
}
#footer .include_footer_r {
  font-size: 1rem;
  font-weight: normal;
  color: var(--cocoon-gsss-kuro); 
  text-align:right;
}

/************************************************************************
** ++cocoon-gsss++ サイドバー
************************************************************************/

/************************************
** サイドバータイトル
************************************/
#sidebar .widget-sidebar-title{
  padding: 6px 12px 6px 12px;
  border: 1px solid var(--wp--preset--color--ex-f);
  background: var(--wp--preset--color--ex-f);
  color: var(--cocoon-gsss-shiro);
}


/************************************
** サイドバーデザイン
************************************/
#sidebar .widget-sidebar{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--cocoon-gsss-gray);
  background: var(--cocoon-gsss-shiro);
}
#sidebar a {
  text-decoration: none; /* 通常時は下線を消す */
  color: inherit; /* 親要素の文字色を引き継ぐ */
}
#sidebar a:hover {
  text-decoration: underline; /* ホバー時にアンダーラインを表示 */
  color: inherit; /* 色を変更しない */
}
#sidebar ul,#sidebar ol{
  list-style: none;
  margin:0;
  padding:0;
}
#sidebar li{
  list-style: none;
  margin:0;
  padding:0;
}
#sidebar ul a,#sidebar ol a{
  margin:0;
  padding:0;
}

/************************************
** サイドバー（事務所概要）
************************************/
#sidebar .widget_custom_html {
    padding: 0.5em;
}
#sidebar .include_footer_l {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--cocoon-gsss-kuro);
}
#sidebar .include_footer_l_desc {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--cocoon-gsss-kuro);
}

#sidebar .include_footer_l_name {
    font-size: 1.2rem;
    font-weight: normal;
    color: var(--cocoon-gsss-kuro);
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    text-align:right;
}

#sidebar .include_footer_c {
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--cocoon-gsss-kuro);
    margin-bottom: 15px;      /* 各情報の間隔を広げる */
    line-height: 1.6;         /* 行間を広げて読みやすく */
}

#sidebar .include_footer_r {
    font-size: 0.95rem;
    font-weight: normal;
    color: var(--cocoon-gsss-kuro);
    text-align: right;         /* 左寄せにして整える */
    margin-bottom: 0;
}

#sidebar .include_footer_r strong {
    display: block;           /* 電話番号とFAXをブロック表示に */
    margin-bottom: 0;
}


/************************************
** サイドバーwidget_media_image（スクエアバナー）
************************************/
#sidebar .widget-sidebar.widget_media_image{
  padding: 0;
  border: 0px;
  background: var(--cocoon-gsss-shiro);
}

/************************************
** サイドバー（目次）デザイン
************************************/
#sidebar .widget_toc {
    padding: 0.5em 0.5em 1em 0.5em;
}
#sidebar .widget_toc ol {
  margin-left: 10px;
  margin:0;
  padding:0;
}
#sidebar .widget_toc ol li {
  line-height: 1.2;
  margin:0;
  padding:0;
  font-size: 1rem;
}
#sidebar .border-element {
  width:100%;
  margin:0;
  padding:0;
}

/************************************
** サイドバーwidget_nav_menu（メニューリンク）
************************************/
#sidebar .widget_nav_menu {
  border: 0;
  background: transparent; /* 背景を透明に設定 */
}

#sidebar .widget_nav_menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none; /* 点を無効化 */
}

#sidebar .widget_nav_menu ul li {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    margin: 0;
    padding: 5px 0; /* 上下の余白を調整 */
    font-size: 1.1rem;
    font-weight: bold; /* 太字に設定 */
    border-bottom: 1px solid #ddd; /* 各行に線を追加 */
}

#sidebar .widget_nav_menu ul li a {
    text-decoration: none; /* 下線を削除 */
    color: #000; /* 文字色を黒に設定 */
    padding-left: 10px; /* 左余白を追加して揃えを調整 */
    width: 100%; /* リンクのクリック範囲を広げる */
}

#sidebar .widget_nav_menu ul li:last-child {
    border-bottom: none; /* 最後の項目の線を削除 */
}

/************************************
** サイドバーwidget_new_entries（新着記事）
************************************/
#sidebar .widget_new_entries {
  border: 0;
  background: transparent; /* 背景を透明に設定 */
}


/************************************************************************
** ++cocoon-gsss++ コクーンブロック
************************************************************************/
/************************************
** （コクーンブロック）最新の投稿：タイトルを画像の中に
************************************/
/* 親要素の設定 */
.gsss.wp-block-latest-posts__list li {
  position: relative; /* 子要素の基準を作る */
  overflow: hidden; /* 子要素が画像外にはみ出さないように設定 */
  display: block; /* デフォルトのブロック要素 */
  aspect-ratio: 3 / 2; /* アスペクト比を指定して親要素の高さを維持 */
}

/* 画像部分の設定 */
.gsss .wp-block-latest-posts__featured-image img {
  display: block; /* 不要な隙間を削除 */
  width: 100%; /* 親要素の幅にフィット */
  height: 100%; /* 親要素の高さに合わせる */
  object-fit: cover; /* 画像が親要素にきれいに収まる */
}

/* タイトルの黒帯と文字 */
.gsss .wp-block-latest-posts__post-title {
  position: absolute; /* 親要素を基準に絶対配置 */
  top: 50%; /* 親要素の高さの50% */
  left: 50%; /* 親要素の幅の50% */
  transform: translate(-50%, -50%); /* 完全に中央揃え */
  background: rgba(255, 255, 255, 0.7); /* 半透明の黒背景 */
  color: black; /* 白文字 */
  padding: 10px 20px; /* 上下左右の余白 */
  text-align: center; /* 文字を中央揃え */
  font-size: 15px; /* フォントサイズ */
  font-weight: bold; /* 太字 */
  z-index: 10; /* 他の要素より前面に表示 */
  width: 100%; /* 黒帯を親要素幅に合わせる */
  box-sizing: border-box; /* パディングを含めたサイズ計算 */
  text-decoration: none; /* リンクの下線を削除 */
}

/* ホバー時の文字色と背景の変化 */
.gsss .wp-block-latest-posts__post-title:hover {
  color: black; /* ホバー時も白文字のまま */
  text-decoration: none; /* ホバー時も下線を表示しない */
  background: rgba(255, 255, 255, 0.5); /* 背景を少し濃くする */
  transition: all 0.3s ease; /* スムーズなアニメーション */
}

/* モバイル表示用（768px以下） */
@media screen and (max-width: 768px) {

  .gsss .wp-block-latest-posts__post-title {
    font-size: 0.9rem; /* モバイル用に文字サイズを少し小さく */
    padding: 8px 0; /* 上下左右の余白を少し縮小 */
  }
}


/************************************
** （コクーンブロック）faqを調整
************************************/
/* faqボタンの色 */
.faq > * > .faq-question-label{
  color: var(--cocoon-gsss-blue);
}
.faq > * > .faq-answer-label{
  color: var(--cocoon-gsss-red);
}

/* FAQ */
/*1023px以下*/
@media screen and (max-width: 1023px){
	.faq-item{
		display:block;
	}
	.faq-item-content{
		width:100%;
	}
	.faq-question-label{
		display:block;
		width:2em;
		text-align:center;
	}
	.faq-question-content{
		display:block;
	}
	.faq-answer-label{
		display:block;
		width:2em;
		text-align:center;
	}
	.faq-answer-content{
		display:block;
	}
}


/************************************
** トグル アコーディオン
************************************/
.cocoon-block-toggle{
  margin-bottom:6px !important;
}
.toggle-button{
  border: 1px solid var(--wp--preset--color--ex-f) !important;
  background-color: var(--cocoon-gsss-shiro)!important;
  color:var(--cocoon-gsss-kuro)!important;
  font-weight: normal;
  opacity:1;
}
.toggle-button:hover{
  border: 1px solid var(--gsss-toggle-hover-border) !important;
  background-color: var(--wp--preset--color--ex-d)!important;
  color:var(--cocoon-gsss-kuro) !important;
  opacity:1;
}
.toggle-button::before{
  color:var(--cocoon-gsss-kuro) !important;
  font-weight: normal;
  opacity:1;
}
.toggle-button:hover:before {
  color:var(--cocoon-gsss-kuro) !important;
  opacity:1;
}
.toggle-content{
  background-color: var(--cocoon-gsss-shiro);
  border: 1px solid var(--cocoon-gsss-gray) !important;
}


/************************************
** アピールエリアのデザイン
************************************/
.appeal {
  height: 300px; /* 固定の高さを指定 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%; /* 縦を100%に固定し、横幅は自動で調整 */
}





/************************************************************************
** ++cocoon-gsss++ LPランディングページ 横幅いっぱいブロック
************************************************************************/
/**上下のセクションをピッタリとくっつけるための処理**/
@media screen and (max-width: 1023px){
#content{overflow: hidden;}
.content{margin:0;}
.entry-content{margin:0;}
.footer{margin:0;}
.article{margin:0;}
.main{padding:0;}
.mapa_topbottom_0{margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;}
}

/**lp_box内のマージン処理**/
.lp_box .column-wrap{margin:0 !important;}
.lp_box p{margin:0 !important;}


/**左右横幅いっぱいにするための処理(コンテンツは左右パディングあり)**/
.public-page .lp_box{
margin:0px;padding:0px;
margin-left: calc((100% - 100vw) / 2) !important;
margin-right: calc((100% - 100vw) / 2) !important;
padding-left: calc(50vw - 50% ) !important;
padding-right: calc(50vw - 50% ) !important;
width: 100vw;
overflow: hidden;
border:0;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
.public-page .lp_box{
margin-left: calc((100% - 100vw) / 2) !important;
margin-right: calc((100% - 100vw) / 2) !important;
padding-left: calc(52vw - 50% ) !important;
padding-right: calc(52vw - 50% ) !important;
width: 100vw;
overflow: hidden;
border:0;
}
}
/**左右横幅いっぱいにするための処理(コンテンツは左右パディングなし)**/
.public-page .lp_box_full{
  margin:0px;padding:0px;
  margin-left: calc((100% - 100vw) / 2) !important;
  margin-right: calc((100% - 100vw) / 2) !important;
  width: 100vw;
  overflow: hidden;
  border:0;
  }
  .public-page .lp_box_full > div{
  max-width:90vw !important;
  min-width:50vw !important;
  margin:0 auto;
  }
  /*1023px以下*/
  @media screen and (max-width: 1023px){
  .public-page .lp_box_full{
  margin-left: calc((100% - 100vw) / 2) !important;
  margin-right: calc((100% - 100vw) / 2) !important;
  width: 100vw;
  overflow: hidden;
  border:0;
  }
  }
  
  /**左右横幅いっぱいにするための処理(コンテンツは上下左右パディングあり)**/
  .public-page .lp_box_center{
  margin:0px;padding:0px;
  margin-left: calc((100% - 100vw) / 2) !important;
  margin-right: calc((100% - 100vw) / 2) !important;
  padding-left: calc(50vw - 50% ) !important;
  padding-right: calc(50vw - 50% ) !important;
  padding-top:2em;
  padding-bottom:2em;
  width: 100vw;
  overflow: hidden;
  border:0;
  }
  /*1023px以下*/
  @media screen and (max-width: 1023px){
  .public-page .lp_box_center{
  margin-left: calc((100% - 100vw) / 2) !important;
  margin-right: calc((100% - 100vw) / 2) !important;
  padding-left: calc(52vw - 50% ) !important;
  padding-right: calc(52vw - 50% ) !important;
  padding-top:2em;
  padding-bottom:2em;
  width: 100vw;
  overflow: hidden;
  border:0;
  }
  }

/************************************
** ページ下部地図 フッターに使ったりもしています
************************************/
.public-page .lp_box_full > div.wp-block-query-is-layout-flow {
  max-width:100vw !important;
  min-width:100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}
.public-page .lp_box_full iframe {
  display: block;
}



/************************************************************************
** ++cocoon-gsss++ フォーム・テーブル
************************************************************************/
/************************************
** フォームのデザイン
************************************/
form u.hissu {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: var(--cocoon-gsss-shiro);
	background-color: var(--wp--preset--color--ex-a);
	border: 1px solid var(--wp--preset--color--ex-a);
}
form u.nini {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: var(--cocoon-gsss-shiro);
	background-color: var(--cocoon-gsss-kuro);
	border: 1px solid var(--cocoon-gsss-kuro);
}
form u.kotei {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: var(--cocoon-gsss-shiro);
	background-color: #333;
	border: 1px solid #333;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item{
	display:block;
}

/* 禁止マーク */
input:disabled {
    cursor: not-allowed;
}
label.disabled {
    cursor: not-allowed;color:var(--cocoon-gsss-gray);
}
/* 郵便番号 */
input[name="your_date"]{width:40%;}
input[name="your_name"]{width:40%;}
input[name="your_name_furigana"]{width:50%;}
input[name="your_denwa"]{width:50%;}
input[name="your_email"]{width:60%;}
input[name="zip"]{width:30%;}
input[name="pref"]{width:30%;}
input[name="city"]{width:30%;}
input[name="addr"]{width:100%;}
input[name="addr2"]{width:100%;}
select[name="your_todohuken"]{width:60%;}
@media screen and (max-width: 1023px){
	input[name="your_date"]{width:70%;}
	input[name="your_name"]{width:70%;}
	input[name="your_name_furigana"]{width:70%;}
	input[name="your_denwa"]{width:80%;}
	input[name="your_email"]{width:90%;}
	input[name="zip"]{width:60%;}
	input[name="pref"]{width:60%;}
	input[name="city"]{width:60%;}
	input[name="addr"]{width:100%;}
	input[name="addr2"]{width:100%;}
	select[name="your_todohuken"]{width:60%;}
}

/* フォームオブジェクト */
input {border: 1px solid var(--cocoon-gsss-gray); !important;margin:4px 0;}
textarea {border: 1px solid var(--cocoon-gsss-gray); !important;margin:2px 0;}
input:focus {background-color: var(--wp--preset--color--ex-d);border: 1px solid var(--cocoon-gsss-kuro); !important;}
textarea:focus {background-color: var(--wp--preset--color--ex-d);border: 1px solid var(--cocoon-gsss-kuro); !important;}
input:focus[type="submit"] {background-color: var(--wp--preset--color--ex-d);}

input[type="submit"] {
    display:block;
    color: var(--cocoon-gsss-shiro);
    background-color: var(--wp--preset--color--ex-a);
    border: 2px solid var(--wp--preset--color--ex-a) !important;
    font-weight:bold;
    text-align:center;
    margin: 1rem auto 0 auto;
    width: 60%;
    font-size:1em;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
}
input[type="submit"]:hover {
    color: var(--wp--preset--color--ex-a);
    background-color: var(--cocoon-gsss-shiro);
    border: 2px solid var(--wp--preset--color--ex-a) !important;
}

/************************************
** テーブルのデザイン
************************************/
.table{
  width:100%;
  font-size:0.9em;
  display:table;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: rgba(255, 255, 255, 0.5); /* 背景色を白にしつつ、透明度50%に設定 */
}
.table .tr{
  width: 100%;
  display:table-row;
  border: 1px solid var(--cocoon-gsss-gray);
  border-collapse: collapse;
  border-spacing: 0;
}

@media screen and (max-width: 767px) {
  .table .tr{
    display: block;
    width:100%;
  }
}
.table .tr .td{
  display: table-cell;
  border-left: 1px solid var(--cocoon-gsss-gray);
  border-right: 1px solid var(--cocoon-gsss-gray);
  padding: 8px 13px;
  vertical-align:top;
  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr .td{
    display: block;
    width:100%;
  }
}
.table .label{
background    : var(--cocoon-gsss-shiro);
width:30%;
}
.table .input{
width:70%;
}

.table .tr .td:nth-child(2){
width:70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2){
    display: block;
    width:100%;
  }
}
.tr_midashi{
background:var(--cocoon-gsss-shiro);
color:var(--cocoon-gsss-kuro);
font-weight:bold;
}



/************************************************************************
** ++cocoon-gsss++ アニメーション
************************************************************************/
/************************************
** アニメーション フェードインなど
************************************/
/*  スマホ描画幅処理 */
@media screen and (max-width: 1023px){#content{overflow: hidden;}}

/* fade up 複数の場合*/
.public-page .u-fade-type-up{transform: translateY(50px);opacity: 0;}
.public-page .u-fade-type-up.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;}
.public-page .is-active .u-fade-type-up{transition: 1.6s;transform: translateY(0);opacity: 1;}
.public-page .is-active .u-fade-type-up:nth-child(2){transition-delay: 1s;}
.public-page .is-active .u-fade-type-up:nth-child(3){transition-delay: 2s;}
.public-page .is-active .u-fade-type-up:nth-child(4){transition-delay: 3s;}
.public-page .is-active .u-fade-type-up:nth-child(5){transition-delay: 4s;}
.public-page .is-active .u-fade-type-up:nth-child(6){transition-delay: 5s;}
.public-page .is-active .u-fade-type-up:nth-child(7){transition-delay: 6s;}
.public-page .is-active .u-fade-type-up:nth-child(8){transition-delay: 7s;}
.public-page .is-active .u-fade-type-up:nth-child(9){transition-delay: 8s;}
@media screen and (max-width: 1023px) {
  .public-page .is-active .u-fade-type-up{transition-delay:0s;}
}

/* fade up  単一の場合 */
.public-page .u-fade-type-up1{transform: translateY(50px);opacity: 0;}
.public-page .u-fade-type-up1.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;}
.public-page .u-fade-type-up2{transform: translateY(50px);opacity: 0;}
.public-page .u-fade-type-up2.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: .4s;}
.public-page .u-fade-type-up3{transform: translateY(50px);opacity: 0;}
.public-page .u-fade-type-up3.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: .8s;}
.public-page .u-fade-type-up4{transform: translateY(50px);opacity: 0;}
.public-page .u-fade-type-up4.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: 1.2s;}
.public-page .u-fade-type-up5{transform: translateY(50px);opacity: 0;}
.public-page .u-fade-type-up5.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: 1.6s;}
.public-page .u-fade-type-up6{transform: translateY(50px);opacity: 0;}
.public-page .u-fade-type-up6.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: 2s;}
@media screen and (max-width: 1023px) {
  .public-page .u-fade-type-up2.is-active{transition-delay:0s;}
  .public-page .u-fade-type-up3.is-active{transition-delay:0s;}
  .public-page .u-fade-type-up4.is-active{transition-delay:0s;}
  .public-page .u-fade-type-up5.is-active{transition-delay:0s;}
  .public-page .u-fade-type-up6.is-active{transition-delay:0s;}
}

/* fade down 複数の場合*/
.public-page .u-fade-type-down{transform: translateY(-50px);opacity: 0;}
.public-page .u-fade-type-down.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;}
.public-page .is-active .u-fade-type-down{transition: 1.6s;transform: translateY(0);opacity: 1;}
.public-page .is-active .u-fade-type-down:nth-child(2){transition-delay: 1s;}
.public-page .is-active .u-fade-type-down:nth-child(3){transition-delay: 2s;}
.public-page .is-active .u-fade-type-down:nth-child(4){transition-delay: 3s;}
.public-page .is-active .u-fade-type-down:nth-child(5){transition-delay: 4s;}
.public-page .is-active .u-fade-type-down:nth-child(6){transition-delay: 5s;}
.public-page .is-active .u-fade-type-down:nth-child(7){transition-delay: 6s;}
.public-page .is-active .u-fade-type-down:nth-child(8){transition-delay: 7s;}
.public-page .is-active .u-fade-type-down:nth-child(9){transition-delay: 8s;}
@media screen and (max-width: 1023px) {
  .public-page .is-active .u-fade-type-down{transition-delay:0s;}
}

/* fade down  単一の場合 */
.public-page .u-fade-type-down1{transform: translateY(-50px);opacity: 0;}
.public-page .u-fade-type-down1.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;}
.public-page .u-fade-type-down2{transform: translateY(-50px);opacity: 0;}
.public-page .u-fade-type-down2.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: .4s;}
.public-page .u-fade-type-down3{transform: translateY(-50px);opacity: 0;}
.public-page .u-fade-type-down3.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: .8s;}
.public-page .u-fade-type-down4{transform: translateY(-50px);opacity: 0;}
.public-page .u-fade-type-down4.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: 1.2s;}
.public-page .u-fade-type-down5{transform: translateY(-50px);opacity: 0;}
.public-page .u-fade-type-down5.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: 1.6s;}
.public-page .u-fade-type-down6{transform: translateY(-50px);opacity: 0;}
.public-page .u-fade-type-down6.is-active{transition: 1.6s;transform: translateY(0);opacity: 1;transition-delay: 2s;}
@media screen and (max-width: 1023px) {
  .public-page .u-fade-type-down2.is-active{transition-delay:0s;}
  .public-page .u-fade-type-down3.is-active{transition-delay:0s;}
  .public-page .u-fade-type-down4.is-active{transition-delay:0s;}
  .public-page .u-fade-type-down5.is-active{transition-delay:0s;}
  .public-page .u-fade-type-down6.is-active{transition-delay:0s;}
}

/* fade left */
.public-page .u-fade-type-left{transform: translateX(50px);opacity: 0;}
.public-page .u-fade-type-left.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;}
.public-page .is-active .u-fade-type-left{transition: 1.6s;transform: translateX(0);opacity: 1;}
.public-page .is-active .u-fade-type-left:nth-child(2){transition-delay: 1s;}
.public-page .is-active .u-fade-type-left:nth-child(3){transition-delay: 2s;}
.public-page .is-active .u-fade-type-left:nth-child(4){transition-delay: 3s;}
.public-page .is-active .u-fade-type-left:nth-child(5){transition-delay: 4s;}
.public-page .is-active .u-fade-type-left:nth-child(6){transition-delay: 5s;}
.public-page .is-active .u-fade-type-left:nth-child(7){transition-delay: 6s;}
.public-page .is-active .u-fade-type-left:nth-child(8){transition-delay: 7s;}
.public-page .is-active .u-fade-type-left:nth-child(9){transition-delay: 8s;}
@media screen and (max-width: 1023px) {
  .public-page .is-active .u-fade-type-left{transition-delay:0s;}
}

/* fade left  単一の場合 */
.public-page .u-fade-type-left1{transform: translateX(50px);opacity: 0;}
.public-page .u-fade-type-left1.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;}
.public-page .u-fade-type-left2{transform: translateX(50px);opacity: 0;}
.public-page .u-fade-type-left2.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: .4s;}
.public-page .u-fade-type-left3{transform: translateX(50px);opacity: 0;}
.public-page .u-fade-type-left3.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: .8s;}
.public-page .u-fade-type-left4{transform: translateX(50px);opacity: 0;}
.public-page .u-fade-type-left4.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: 1.2s;}
.public-page .u-fade-type-left5{transform: translateX(50px);opacity: 0;}
.public-page .u-fade-type-left5.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: 1.6s;}
.public-page .u-fade-type-left6{transform: translateX(50px);opacity: 0;}
.public-page .u-fade-type-left6.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: 2s;}
@media screen and (max-width: 1023px) {
  .public-page .u-fade-type-left2.is-active{transition-delay:0s;}
  .public-page .u-fade-type-left3.is-active{transition-delay:0s;}
  .public-page .u-fade-type-left4.is-active{transition-delay:0s;}
  .public-page .u-fade-type-left5.is-active{transition-delay:0s;}
  .public-page .u-fade-type-left6.is-active{transition-delay:0s;}
}

/* fade right */
.public-page .u-fade-type-right{transform: translateX(-50px);opacity: 0;}
.public-page .u-fade-type-right.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;}
.public-page .is-active .u-fade-type-right{transition: 1.6s;transform: translateX(0);opacity: 1;}
.public-page .is-active .u-fade-type-right:nth-child(2){transition-delay: 1s;}
.public-page .is-active .u-fade-type-right:nth-child(3){transition-delay: 2s;}
.public-page .is-active .u-fade-type-right:nth-child(4){transition-delay: 3s;}
.public-page .is-active .u-fade-type-right:nth-child(5){transition-delay: 4s;}
.public-page .is-active .u-fade-type-right:nth-child(6){transition-delay: 5s;}
.public-page .is-active .u-fade-type-right:nth-child(7){transition-delay: 6s;}
.public-page .is-active .u-fade-type-right:nth-child(8){transition-delay: 7s;}
.public-page .is-active .u-fade-type-right:nth-child(9){transition-delay: 8s;}
@media screen and (max-width: 1023px) {
  .public-page .is-active .u-fade-type-right{transition-delay:0s;}
}

/* fade right  単一の場合 */
.public-page .u-fade-type-right1{transform: translateX(-50px);opacity: 0;}
.public-page .u-fade-type-right1.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;}
.public-page .u-fade-type-right2{transform: translateX(-50px);opacity: 0;}
.public-page .u-fade-type-right2.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: .4s;}
.public-page .u-fade-type-right3{transform: translateX(-50px);opacity: 0;}
.public-page .u-fade-type-right3.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: .8s;}
.public-page .u-fade-type-right4{transform: translateX(-50px);opacity: 0;}
.public-page .u-fade-type-right4.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: 1.2s;}
.public-page .u-fade-type-right5{transform: translateX(-50px);opacity: 0;}
.public-page .u-fade-type-right5.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: 1.6s;}
.public-page .u-fade-type-right6{transform: translateX(-50px);opacity: 0;}
.public-page .u-fade-type-right6.is-active{transition: 1.6s;transform: translateX(0);opacity: 1;transition-delay: 2s;}

@media screen and (max-width: 1023px) {
  .public-page .u-fade-type-right2.is-active{transition-delay:0s;}
  .public-page .u-fade-type-right3.is-active{transition-delay:0s;}
  .public-page .u-fade-type-right4.is-active{transition-delay:0s;}
  .public-page .u-fade-type-right5.is-active{transition-delay:0s;}
  .public-page .u-fade-type-right6.is-active{transition-delay:0s;}
}

/* fade 画像の場合 一番最初の画像にサイズを持たせないと高さ０になるよ */
.js-scroll-trigger {position:relative;}
.js-scroll-trigger img.u-fade-type-up{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;}
.js-scroll-trigger img.u-fade-type-down{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;}
.js-scroll-trigger img.u-fade-type-left{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;}
.js-scroll-trigger img.u-fade-type-right{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;}



/************************************
** アニメーション 文字アンダーライン
************************************/
/* アニメーション前のスタイル */
.marker-under {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, var(--cocoon-gsss-yellow), var(--cocoon-gsss-yellow)); /* 単色の場合は同じ色、グラデーションの場合は別々の色 */
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 20%; /* '30%'の部分にマーカーの太さを記入 */
  transition: all 2s ease-in-out; /* マーカーを引く速度を調整 */
  font-weight: bold; /* ついでに太字にしたい場合 */
}
/* アニメーション発火時 */
.marker-under.inview {
  background-size: 100% 20%; /* '%'の部分は上で設定した太さに合わせる */
}

/************************************
** アニメーション 文字を左から表示する
************************************/
.text-fadein{margin-bottom:1.8em;}
.text-fadein span{
  display: inline-block;
  position: relative;
}
.text-fadein span:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--cocoon-gsss-shiro);
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
.text-fadein.active span:before {
  width: 0%;
}



/************************************************************************
** ++cocoon-gsss++ 特定の先生のみ
************************************************************************/




/************************************
** 特別な見出し
************************************/

h2.gsssicon {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 文字を左寄せ */
  font-weight: bold;
  padding: 10px 0px 10px 120px; /* 画像のスペースを確保 */
  position: relative;
  border-bottom: 2px solid #007BFF; /* 下線を追加 */
  text-align: left; /* 文字を左寄せ */
  line-height: 1.5; /* 行間の調整 */
  word-wrap: break-word; /* 必要に応じて改行 */
  white-space: normal; /* 自然な改行を許可 */
}

h2.gsssicon::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px; /* 左側の画像配置 */
  width: 120px; /* 画像の幅 */
  height: 120px; /* 画像の高さ */
  background-size: contain; /* 画像サイズ調整 */
  background-repeat: no-repeat;
}
/************************************
** 特別なボックス
************************************/
div.gsssicon {
  position: relative; /* 擬似要素の基準位置を設定 */
}

div.gsssicon::before {
  content: ""; /* 擬似要素を使用 */
  position: absolute; /* 絶対位置に設定 */
  top: -60px; /* 親要素の上端より20px上にはみ出す */
  right: -40px; /* 親要素の右端より20px右にはみ出す */
  width: 120px; /* 画像の幅を拡大 */
  height: 120px; /* 画像の高さを拡大 */
  background-size: contain; /* 画像を枠内に収める */
  background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
  background-position: center; /* 画像を中央に配置 */
}

/************************************
** アイコン指定
************************************/
.gsssicon1::before {
  background-image: url('/wp-content/uploads/2025/01/1.png'); /* 画像パス */
  width: 60px !important;
  height: 60px !important;
}
.gsssicon2::before {
  background-image: url('/wp-content/uploads/2025/01/2.png'); /* 画像パス */
}
.gsssicon3::before {
  background-image: url('/wp-content/uploads/2025/01/22.png'); /* 画像パス */
}




/************************************
** 追従ボタン（デフォルト横長、グラデーション背景）
************************************/

/* 全体を囲むコンテナのスタイル */
.floating-contact {
  position: fixed;
  bottom: 60px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* ボタン間の余白 */
  z-index: 1000; /* 前面に表示 */
}

/* ボタンの基本スタイル（デフォルト横長） */
.contact-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 200px; /* 横長の幅 */
  height: 60px; /* 高さを変更 */
  border: none;
  background: linear-gradient(90deg, var(--wp--preset--color--ex-f), var(--wp--preset--color--ex-e)); /* グラデーション背景 */
  color: #ffffff; /* 文字色を白に */
  font-size: 16px; /* テキストサイズ */
  font-weight: bold;
  text-align: center;
  border-radius: 5px; /* 角丸のボタン */
  cursor: pointer;
  transition: background 0s ease, color 1s ease; /* スムーズな変化 */
}

/* 文字のスタイル */
.contact-btn span {
  opacity: 1; /* 文字は常に表示 */
  visibility: visible;
  white-space: nowrap;
}

/* ボタンホバー時のスタイル */
.contact-btn:hover {
  background: var(--wp--preset--color--ex-d); /* ホバー時の背景色 */
  color: var(--wp--preset--color--ex-e); /* ホバー時の文字色 */
}

/* メディアクエリ（レスポンシブ対応） */
@media (max-width: 600px) {
  .floating-contact {
    display: none; /* 小さい画面では非表示 */
  }
}

/************************************
** ３つの特徴
************************************/
.tokutyo3 {
  display: flex !important; /* 横並びに配置 */
  overflow-x: auto !important; /* 水平スクロールを有効化 */
  gap: 20px; /* 子要素間の間隔 */
  scroll-snap-type: x mandatory; /* スナップスクロール */
  padding: 10px; /* 内側余白 */
  box-sizing: border-box; /* ボーダーと余白を幅に含める */
  max-width: 100%; /* 親要素の幅に従う */
  scroll-behavior: smooth; /* スムーズなスクロール */
}

.tokutyo3::-webkit-scrollbar {
  display: none; /* スクロールバーを非表示 */
}

.tokutyo3 .wp-block-column {
  flex: 0 0 calc(33.33% - 20px); /* パソコン版の幅を計算 */
  max-width: calc(33.33% - 20px); /* 最大幅も計算に従う */
  scroll-snap-align: start; /* スクロール位置を調整 */
  background: #ffffff; /* 背景色 */
  border: 1px solid #ddd; /* 枠線 */
  border-radius: 10px; /* 角を丸くする */
  padding: 15px; /* 内側余白 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 少し立体感 */
  text-align: center; /* 中央揃え */
  box-sizing: border-box; /* 枠線を幅に含める */
}

.tokutyo3 img {
  display: block;
  margin: 0 auto; /* 画像を中央に配置 */
  max-width: 100%; /* 画像の最大幅を調整 */
  height: auto;
}

.tokutyo3 p {
  text-align: center; /* テキストを中央揃え */
  margin-top: 10px;
}

/* モバイル版のレスポンシブ対応 */
@media (max-width: 768px) {
  .tokutyo3 .wp-block-column {
    flex: 0 0 80% !important; /* モバイル版では幅を強制的に80%に設定 */
    max-width: 80% !important; /* 最大幅も80%に固定 */
  }
}


/************************************
** CSS記号
************************************/
.gsss_triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid var(--wp--preset--color--ex-f);
  margin-left:auto;
  margin-right:auto;
}


/************************************
** テーブルの色指定
************************************/
.gsss table {
    border: 2px solid var(--wp--preset--color--ex-f);
    border-collapse: collapse; /* ボーダーを1本にまとめる */
}
.gsss table th, 
.gsss table td {
    border: 1px solid var(--wp--preset--color--ex-f);
    padding: 8px; /* 余白を設定 */
}


/************************************************************************
Cocoon Child: スタイルシート (style.css)のCSSファイルです。
コピー＆ペーストして上書きする前に必ずバックアップをとっておきましょう。
************************************************************************/