@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){
  /*必要ならばここにコードを書く*/
}


/************************************
** 共通設定　2024.12作成
************************************/

/* ボタン非表示　コンテンツ追加後消す */
.invisible_btn{
	display: none;
}
:root{
	--font-heading: "Noto Sans JP", sans-serif;
	--font-body: "Noto Sans JP", sans-serif;
	--font-num: "Noto Sans", sans-serif;
	--font-deco-num: "Noto Sans JP", sans-serif;
	--font-deco-en: "Noto Sans JP", sans-serif;
}

p {
	line-height: 1.7;
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
    line-height: 1.45;
}

.font-heading {
	font-family: var(--font-heading);
}

.font-body {
	font-family: var(--font-body);
}
.font-num {
	font-family: var(--font-num);
}
.font-deco-num {
	font-family: var(--font-deco-num);
}
.font-deco-en {
	font-family: var(--font-deko-en);
}

.content {
    margin-top: 0!important;
}

@media screen and (max-width: 834px) {
    .content {
        margin-top: 0 !important;
    }
}

.date-tags{
	margin-bottom: 0 !important;
}

#main{
	padding: 0;
}
.entry-content {
	margin: 0;
}

@media screen and (max-width: 834px) {
    .article ul, .article ol {
		padding-left: 0;
    }
}

@media screen and (min-width: 834px) {
	.br_sp{
		display: none;
	}
}

.article.post {
	padding: 20px;
}

.fz_25{
	font-size: 25px !important;
	font-weight: 700 !important;
}

.fz_20{
	font-size: 20px !important;
	font-weight: 700 !important;
	margin-bottom: 1em !important;
}
/************************************
** デザインガイドライン準拠
************************************/

/*変数*/
:root {

/*色*/
--main-color: #;
--red-color: #CC0C39;
--faq-color: #E3E6E6;
--btn-color: #FFCA00;
--text-color: #333333;
--border-color: #E3E6E6;
--gray-color:#F0F2F2;

/*コンテンツ幅*/
--max-width: 652px;
--max-width-content: 1100px;

/*ボタンサイズ*/
--btn_width: 450px;
--btn_height: clamp(45px, 22.723px + 4.95vw, 55px);
--btn_font-size: clamp(16px, 2.634px + 2.97vw, 22px);

/*見出しサイズ*/
--h2_font-size: clamp(24px, 17.793px + 1.655vw, 36px);
--h2_height: clamp(55px, 41.034px + 3.724vw, 82px);
--h3_font-size: 22px;

/*マージン設定*/
--margin-bottom_L: clamp(73px, -85.168px + 35.149vw, 144px);
--margin-bottom_M: clamp(45px, 26.897px + 4.828vw, 80px);
--margin-bottom_S: 24px;
--margin-bottom_btn: 13px;
/*---------------*/
/*--共通設定------*/
/*---------------*/

.content-wrap {
width: 100%;
max-width: var(--max-width-content);
margin: 0 auto var(--margin-bottom_M);
}
.margin-bottom_L {
margin: 0 auto var(--margin-bottom_L);
}
.margin-bottom_M {
margin: 0 auto var(--margin-bottom_M);
}
.inner-wrap {
width: 90%;
max-width: var(--max-width);
margin: 0 auto;
}
.mainColor {
color: var(--main-color);
}
.textColor {
color: var(--text-color);
}
.redColor {
color: var(--red-color);
}
	
/*-----------------*/
/*--見出しスタイル--*/
/*-----------------*/

.h2 {
	font-size: var(--h2_font-size);
	font-weight: bold;
	text-align: center;
	color: var(--main-color);
	margin-bottom: var(--margin-bottom_S);
}
.h2-sml {
	font-size: clamp(16px, 13.931px + 0.552vw, 20px);
	font-weight: bold;
	text-align: center;
	color: var(--main-color);
}
.h2--style01 {
font-size: clamp(16px, 13.931px + 0.552vw, 20px);
font-weight: bold;
color: var(--main-color);
text-align: center;
position: relative;
margin-bottom: var(--margin-bottom_S);
max-width: var(--wp--style--global--wide-size) !important;
}
.h2--style01-big {
font-size: var(--h2_font-size);
font-weight: bold;
color: var(--main-color);
text-align: center;
position: relative;
margin-bottom: var(--margin-bottom_S);
max-width: var(--wp--style--global--wide-size) !important;
}
.h2--style01::before {
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: var(--main-color);
top: 50%;
left: 0;
transform: translateY(-50%);
}
.h2--style01-big::before {
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color: var(--main-color);
top: 50%;
left: 0;
transform: translateY(-50%);
}
span.bg-white {
background-color: #fff;
position: relative;
padding: 0 20px;
display: inline-block;
}
.h2--style02 {
font-size: var(--h2_font-size);
color: #fff;
text-align: center;
background-color: var(--main-color);
margin-bottom: var(--margin-bottom_S);
height: auto;
min-height: var(--h2_height);
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
padding: 10px 0;
}
.h2--style02 .h2-bigSize {
font-size: clamp(1.5rem, -0.066rem + 7.83vw, 3.125rem);
color: #fff;
}
.h3 {
font-size: 22px;
}
.h3--style01 {
border: none;
background-color: var(--main-color);
border-radius: 10px 10px 0 0;
color: #fff;
font-weight: bold;
height: 94px;
padding: 0;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
	text-align: center;
}
.h3--style02{
	font-size:22px;
	font-weight: bold;
	text-align: center;
	color: var(--main-color);
	margin-bottom: var(--margin-bottom_S);	
}
.h4 {
	font-size: 20px;
	margin-bottom: var(--margin-bottom_S);
}
/*---------------*/
/*--申込みボタン--*/
/*---------------*/

.cta_btn--wrap a {
width: 90%;
max-width: var(--btn_width);
height: var(--btn_height);
background-color: var(--btn-color);
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--btn_font-size);
text-decoration: none;
color: var(--text-color);
margin: 0 auto;
border-style: none;
font-weight:normal;
}
.cta_btn--wrap a:hover {
filter: brightness(90%);
}

button.cta_btn--wrap {
width: 90%;
max-width: var(--btn_width);
height: var(--btn_height);
background-color: var(--btn-color);
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--btn_font-size);
text-decoration: none;
color: var(--text-color);
margin: 0 auto;
border-style: none;
font-weight:normal;
}
button.cta_btn--wrap:hover {
filter: brightness(90%);
}

/*---------------*/
/*--白ボタン--*/
/*---------------*/
.white_btn--wrap a {
	width: 90%;
    max-width: var(--btn_width);
    height: var(--btn_height);
    background-color: #fff;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--btn_font-size);
    text-decoration: none;
    color: var(--text-color);
    margin: 0 auto;
    border-style: none;
    font-weight: normal;
	border: 1px solid #898D8D;
	transition: all 0s;
}
.white_btn--wrap a:hover {
filter: brightness(95%) !important;
	color: var(--text-color) !important;
	transition: all 0s;
}