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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.fixed-header .has-sub {
    display: inline-block;
}
.fixed-header .navi-in > ul li:hover > ul  {
    display: block;
}

a {
	text-decoration: none;
}

.entry-content a {
	text-decoration: none;
}

.entry-content a:hover {
	color: #c0ecfa;
}

.toc-content a:hover {
	color: #ccc;
}

/************************************
** ●全画像のホバー時エフェクト処理
************************************/
a:hover img{
  opacity: 0.6; /*不透明度*/
  transition: all 0.8s ease; /*アニメーション*/
}




.maru1{
    margin:5px;
	font-size: 80%;
	color:white;
    background-color: #a3d1ff;
    padding:1px 20px;
    border-radius: 15px;
    text-decoration: none;
}
.maru2{
    margin:5px;
	font-size: 80%;
	color:white;
    background-color: #a3a3ff;
    padding:1px 20px;
    border-radius: 15px;
    text-decoration: none;
}
.maru3{
    margin:5px;
	font-size: 80%;
	color:white;
    background-color: #d1a3ff;
    padding:1px 20px;
    border-radius: 15px;
    text-decoration: none;
}
.maru4{
    margin:5px;
	font-size: 80%;
	color:white;
    background-color: #ffcc99;
    padding:1px 20px;
    border-radius: 15px;
    text-decoration: none;
}

/* 白抜きボックス ------------------------------------------------------------ */

/* 個別スタイル用：共通の余白設定 */
[class*="is-style-blank-"] {
   padding: 2em;
}

/* 共通の角丸設定 ------------------------------------------------------------ */

/* 角丸なし（直角） */
.blank-box:is(
   .is-style-blank-1,
   .is-style-blank-2,
   .is-style-blank-3,
   .is-style-blank-4,
   .is-style-blank-5,
   .is-style-blank-8,
   .is-style-blank-9,
   .is-style-blank-10,
   .is-style-blank-11,
   .is-style-blank-12,
   .is-style-blank-13) {
   border-radius: 0;
}

/* 角丸あり */
.blank-box:is(
   .is-style-blank-6,
   .is-style-blank-7
) {
   border-radius: 20px;
}

/* 各スタイル定義 ------------------------------------------------------------ */

/* スタイル1：ダブル線・太枠 */
.blank-box.is-style-blank-1 {
   border: 4px double;
}

/* スタイル2：細い実線 */
.blank-box.is-style-blank-2 {
   border-width: 1px;
}

/* スタイル3：太い実線 */
.blank-box.is-style-blank-3 {
   border-width: 5px;
}

/* スタイル4：細い点線 */
.blank-box.is-style-blank-4 {
   border: 1px dashed;
}

/* スタイル5：やや太い点線 */
.blank-box.is-style-blank-5 {
   border: 2px dashed;
}

/* スタイル6：角丸＋細いドット線 */
.blank-box.is-style-blank-6 {
   border: 2px dotted;
}

/* スタイル7：角丸＋太いドット線 */
.blank-box.is-style-blank-7 {
   border: 4px dotted;
}

/* スタイル8：上のみ枠線（太線） */
.blank-box.is-style-blank-8 {
   border-width: 5px 0 0 0;
}

/* スタイル9：左のみ枠線（太線） */
.blank-box.is-style-blank-9 {
   border-width: 0 0 0 5px;
}

/* スタイル10：斜めストライプ背景 */
.blank-box.is-style-blank-10 {
   border: 0;
   background: repeating-linear-gradient(
   -45deg,
   #f2f3f7 0,
   #f2f3f7 3px,
   transparent 3px,
   transparent 6px
   );
}

/* スタイル11：チェック背景 */
.blank-box.is-style-blank-11 {
   border: 0;
   background:
   linear-gradient(0deg, transparent 19px, #ccc 20px),
   linear-gradient(90deg, transparent 19px, #ccc 20px);
   background-size: 20px 20px;
}

/* スタイル12：右上折り返し効果 */
.blank-box.is-style-blank-12 {
   border: 0;
   position: relative;
}
.blank-box.is-style-blank-12::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   border: solid;
   border-width: 0 20px 20px 0;
   border-color: #ccc #fff #ccc;
   box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

/* スタイル13：破線の外枠（内側に重ねる） */
.blank-box.is-style-blank-13 {
   border: 0;
   position: relative;
   z-index: 0;
}
.blank-box.is-style-blank-13::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 5px;
   border: 1px dashed #fff;
   border-radius: 5px;
   z-index: -1;
   display: block;
}

/* ボタン（矢印付き）--------------------------------- */

/* ボタンのスタイル */
.wp-block-cocoon-blocks-button-1 a {
   --arrow-color: #fff; /* 矢印の色 */
   display: inline-block; /* インラインブロック要素にする */
   border: 1px solid #333; /* ボタンの枠線の設定（太さ、種類、色） */
   color: var(--arrow-color); /* 文字色を矢印の色と合わせる */
   padding: 5px 50px 5px 20px; /* 内側の余白（上・右・下・左） */
   text-decoration: none; /* 下線を非表示 */
   transition: .3s all; /* 変化をゆっくりにする */
   position: relative; /* 疑似要素の位置基準 */
	border-radius: 0 ;
}

/* 矢印のスタイル */
.wp-block-cocoon-blocks-button-1 a:after {
   content: ''; /* 疑似要素で矢印を描写 */
   border-bottom: 1px solid var(--arrow-color); /* 矢印の下線の設定 */
   border-right: 1px solid var(--arrow-color); /* 矢印の右線の設定 */
   width: 15px; /* 矢印の幅 */
   height: 3px; /* 矢印の高さ */
   transform: skewX(45deg); /* 矢印の角度 */
   position: absolute; /* 親要素からの位置指定 */
   right: 20px; /* ボタンの右からの距離 */
   bottom: 50%; /* ボタンの中央位置に配置 */
   transition: .3s all; /* 変化をスムーズに */
}

/* マウスオーバー時の変化 */
.wp-block-cocoon-blocks-button-1  a:hover {
   --link-btn-color: #333; /* ホバー時のボタン色 */
   background-color: var(--link-btn-color); /* 背景色を変更 */
   border-color: var(--link-btn-color); /* 枠線色を変更 */
   color: #fff; /* 文字色を白に */
}

.wp-block-cocoon-blocks-button-1  a:hover:after {
   border-color: #fff; /* ホバー時に矢印の色を白に変更 */
   right: 15px; /* 矢印の位置を左へ少し移動 */
}

/* ラベルボックス-------------------------------------------------------- */

/* 共通スタイル */
.label-box[class*="is-style-label"]{
   position: relative; /* 子要素を配置する際の基準点 */
}

[class*="is-style-label"] .label-box-content {
   margin-top: 0; /* 上の余白をリセット */
   border-width: 1px; /* 枠線の幅を設定 */
   color:var(--cocoon-text-color)!important; /* テキストの色を設定 */
}

/* 丸み設定 */
:where(.is-style-labelout,.is-style-labelin,.is-style-labelicon) .label-box-content {
   border-radius: 2px; /* 角を四角に */
}

/* スタイル1（ラベルアウト） */
[class*="is-style-labelout"] .label-box-label {
   position: absolute; /* ラベルを絶対位置に配置 */
   top: -.8em; /* 上位置を調整 */
   padding:0 .5em; /* 内側余白を上下ゼロ、左右に設定 */
   text-shadow: none; /* テキストシャドウを削除 */
   background-color:var(--cocoon-white-color); /* 背景色を白に設定 */
}

[class*="is-style-labelout"] .label-box-content {
   padding: 2em; /* コンテンツの内側余白を設定 */
   background-color: transparent!important; /* 背景色なし */
}

/* スタイル2（ラベルイン） */
[class*="is-style-labelin"] .label-box-label {
   position: absolute; /* ラベルを絶対位置に配置 */
   top: 1.5em; /* 上位置を調整 */
   left: 2em;
   padding:0; /* 内側余白を上下ゼロ、左右に設定 */
   margin:0;
   text-shadow: none; /* テキストシャドウを削除 */
}

[class*="is-style-labelin"] .label-box-content {
   padding:3em 2em 1.5em; /* 内側余白を上に広く設定 */
}

/* スタイル3（アイコン） */
[class*="is-style-labelicon"] .label-box-label {
   display: grid; /* ラベル内のアイテムをグリッドで配置 */
   place-content: center; /* 中央に配置 */
   height: 100%; /* 高さを親要素に合わせる */
   position: absolute; /* ラベルを絶対位置に配置 */
   top: 0; /* 上位置を調整 */
   margin: 0; /* 外側余白をゼロに設定 */
   padding: 0 .5em; /* 内側余白を設定 */
   text-shadow: none; /* テキストシャドウを削除 */
   font-size:1em; /* フォントサイズを設定 */
}

[class*="is-style-labelicon"] .label-box-label:before {
   border-right: 1px solid var(--cocoon-custom-border-color); /* 右側に線を追加 */
   color: var(--cocoon-custom-border-color); /* 線の色を設定 */
   line-height: 1em; /* 行の高さを設定 */
   text-align: center; /* テキストを中央揃え */
   width: 2.5em; /* 幅を設定 */
   margin:0; /* 外側余白 */
}
[class*="is-style-labelicon"] .label-box-label-text {
   display: none; /* ラベルテキストを非表示 */
}

[class*="is-style-labelicon"] .label-box-content{
   padding: 1.5em 1.5em 1.5em 4em; /* 内側余白（上・右・下・左） */
}


/* gslider設定 */
.gslider-content-wrapper{
	background-color:#fff !important;
}
 /* gslider設定ここまで */


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

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

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