@charset "utf-8";
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
お問い合わせフォーム　＞　入力内容確認画面　hCaptcha(2023-04-21mkw)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.g-recaptcha{
	text-align:center;
	margin-top: 30px!important;
}


/* 見出し大3(サイトに反映させたい画像へのルートパスを記述・相対パスだと管理画面で404になるため) */
.gb-headline-h_large3::before {
    background: url("/generate/wp-content/themes/generatepress_child/images/logo_icon.png") no-repeat center center / contain;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ハンバーガーメニューのカスタマイズ(2023-03-13mk)
↓↓↓下記をまずは削除した上で、【https://coco-factory.jp/ugokuweb/move01-cat/humbugermenu/】から、お好みのボタンのCSSを追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*display:block;で出し分けるとtransitionが効かないため動きの切り替わりが不自然。opacityとvisiblityで出し分けるように変更(2023-04-13)og*/
nav#generate-slideout-menu:not(.is-open){
	visibility: hidden;
	opacity: 0;
	display: block;
}

nav#generate-slideout-menu.is-open{
	visibility: visible;
	opacity: 1;
}

.sp .my_hamburger{
	background-color:var(--company-color);
	order:2;
}

/*display:block;で出し分けるとtransitionが効かないため動きの切り替わりが不自然。opacityとvisiblityで出し分けるように変更(2023-03-23)og*/
/*
nav#generate-slideout-menu:not(.is-open){
	visibility: hidden;
	opacity: 0;
	display: block;
}

nav#generate-slideout-menu.is-open{
	visibility: visible;
	opacity: 1;
}*/

/*==================================================
　5-2-2 2本線が×に
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: relative;
	width: 50px;
    height:50px;
	cursor: pointer;
}
	
/*ボタン内側*/

.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
	background-color: #fff;
	width: 45%;
  }


.openbtn span:nth-of-type(1) {
	top:15px; 
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Global Styles　＞　見出し
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 見出し大1 */
.gb-headline-h_large1{
	position:relative;
}

.gb-headline-h_large1::before{
	font-family: 'icomoon';
	font-weight: normal;
	font-size:1.2em;
	line-height:1.2em;
	content: "\e914";
	color:var(--company-color);
	position:absolute;
	bottom:8px;
	left:5px;
}

/* 見出し大2 */
.gb-headline-h_large2::after {
	background-color: var(--accent2);
}

/* 見出し大3*/
.gb-headline-h_large3::before{
	background:none;
	content: '\e912';
    font-family: 'icomoon';
	font-size: 50px;
	color:var(--company-color);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　トップへ戻る
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
a.generate-back-to-top{
	border-color: var(--accent2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　blend_mode
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
.blend_bg::after{
	mix-blend-mode: color;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　tel01
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
.cmn_tel01::before{
	color:var(--accent2);
}

	
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　＞　ボタン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
.gb-button-basic_btn01::after{
	font-size:30px;
	right:20px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　＞　ol ul
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
ol,ul{
	list-style-position: inside;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
.main-title > a{
	font-weight:bold!important;
}

/*logo*/
.main-navigation.is_stuck:not(.slideout-navigation) .navigation-branding img{
	display:none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
promo 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#home_promo{
	height: 100svh;
}

/*editorに反映するようにクラスで指定*/
.home_promo .since:before,
.home_promo .since:after{
	content:"";
	display: inline-block;
	width:10px;
	height:10px;
	background-color:#fff;
	position:absolute;
	top:calc(50% - 5px);
	border-radius: 50%;
}

.home_promo .since:before{
	left:calc(30px - 5px);
}

.home_promo .since:after{
	right:calc(30px - 5px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TOP > 小学生向け教材・教具が勢揃い エディターにも反映されるようにクラスで指定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
#home_message::before,
.home_message[class*="editor"]::before,
#home_service::before,
.home_service[class*="editor"]::before{
	content:"";
	position: absolute;
	top:0;
	left:0;
	display: block;
	width:100%;
	height:100%;
	z-index:0;
	opacity:.4;
	background-size: 50px 50px;
	background-position: 50% 50%;
	background-image:
	repeating-linear-gradient(
		90deg,
		var(--accent) ,
		var(--accent) 1px,
		transparent 1px,
		transparent 50px
	),
	repeating-linear-gradient(
		0deg,
		var(--accent) ,
		var(--accent) 1px,
		transparent 1px,
		transparent 50px
	);
}


#home_message .ttl,
.home_message .ttl[class*="editor"],
#home_service .ttl,
.home_service .ttl[class*="editor"] {
	position:relative;
	overflow: visible;
}

#home_message .paint_wrap,
.home_message .paint_wrap[class*="editor"],
#home_service .paint_wrap,
.home_service .paint_wrap[class*="editor"] {
	position: absolute;
	top:-15px;
	z-index: 0;
}

#home_message .paint_wrap svg,
.home_message .paint_wrap[class*="editor"] svg,
#home_service .paint_wrap svg,
.home_service .paint_wrap[class*="editor"] svg {
	width:100%;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
お問い合わせエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
#contact_area .ttl_wrap::before{
	content:"";
	background:url(images/pencil.svg) no-repeat center / contain ;
	width:306px;
	height:100%;
	position:absolute;
	top:0;
	left:calc(50% - 153px + 20px);
		
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
.footer-widgets-container{
	padding-bottom:0;
}

.site-footer{
	background-color:var(--accent);
}