@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;
}

/*==================================================
　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{
	border-bottom: 4px double var(--company-color);
}

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

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

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

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
汎用　tel01
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
.cmn_tel01::before{
	color:var(--company-color);
	font-size: .6em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width:46px;
	height:46px;
	border-radius:50%;
	border:1px solid var(--company-color);
	position: relative;
	top: calc((50% - 23px) * -1);
	vertical-align: middle;
}

.site-footer .cmn_tel01::before{
	color:#fff;
	border-color:#fff;
}

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

.gb-button-basic_btn01::after{
	content:'\e92f';
}

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

.main-title{
	margin-left:40px;
}

/*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);
}

.home_promo h3.txt{
	position:relative;
	
}

.home_promo h3.txt::before,
.home_promo h3.txt::after{
	content:"";
	background-color:var(--base-3);
	position:absolute;
	width:30px;
	height:1px;
	top:calc(50% - .5px);
}

.home_promo h3.txt::before{
	left:0px;
}

.home_promo h3.txt::after{
	right:0px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TOP > 小学生向け教材・教具が勢揃い エディターにも反映されるようにクラスで指定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
/*
#home_message::before,
.home_message[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"]{
	position:relative;
	overflow: visible;
}

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

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

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TOP > 会社概要
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
#home_company::before{
	z-index: 2;
}

.company_wrap::after{
	width:78%;
	min-width:1100px;
	max-width:1500px;
	margin: 0 auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
お問い合わせエリア
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ 
#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:30px;
}

.site-footer{
	background-color:#0b1226;
}