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

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

:root {
  --color_hanako_1: #e8314a;
  --color_hanako_2: #0b75be;
  --color_hanako_3: #9cc813;
  --color_hanako_4: #f5a100;
}

.white_shadow {
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}

.bold {
  font-weight: bold;
}

.bolder {
  font-weight: bolder;
}

html {
  scroll-behavior: smooth;
  overflow: auto;
  /* overflow-x: hidden; */
}

.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* 数値の入力欄にスピナーを常時表示する */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

a {
  transition: all 0.1s ease-in-out;
}

.wp-block-button a:hover {
  filter: brightness(1.1);
}

h4.h4_1::before {
  border-bottom: solid 15px var(--color_hanako_1);
}
h4.h4_1::after {
  border-bottom: solid 3px var(--color_hanako_1);
}

h4.h4_2::before {
  border-bottom: solid 15px var(--color_hanako_2);
}
h4.h4_2::after {
  border-bottom: solid 3px var(--color_hanako_2);
}

h4.h4_3::before {
  border-bottom: solid 15px var(--color_hanako_3);
}
h4.h4_3::after {
  border-bottom: solid 3px var(--color_hanako_3);
}

h4.h4_4::before {
  border-bottom: solid 15px var(--color_hanako_4);
}
h4.h4_4::after {
  border-bottom: solid 3px var(--color_hanako_4);
}






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

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

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