@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){
  /*必要ならばここにコードを書く*/
}
.article-header{
display: none;
}
.content{
margin-top: 0;
}
.main{
padding-top: 0;
border: none;
}
.bg-gray{
background: #f2f2f2;
margin: 0 calc(50% - 50vw);
padding: 2rem calc(50vw - 50% + 8px) 3rem;
}
.bg-base{
background: #ffffff;
margin: 0 calc(50% - 50vw);
padding: 2rem calc(50vw - 50% + 8px) 3rem;
}

.article h2, .article h3, .article h4, .article h5, .article h6{
margin: 0;
padding:0;
border: none;
text-align: center;
}
.article h2{
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
text-align: center;
background: none;
padding-top: 2rem;
}

.article h2::before,
.article h2::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #034ca3;
}

.article h2::before {
	margin-right: 20px;
}
.article h2::after {
	margin-left: 20px;
}

h3.voice{
text-align: center;
margin: 1.5rem 0 1rem;
padding-top: 1rem;
}

h4.inline-img-head{
display: inline-block;
width: 100%;
text-align: center;
}
h4.img-and-txt span{
	margin: 1.2rem 0 0 1rem;
}

.appeal-content{
position: relative;
margin: 6rem 0 0 0;
left: 0;
top: 0;
background: none;
color: white;
}

.header-pr-points{
display: flex;
gap: 2.5%;
}
.header-pr-point{
background: #034ba3;
border-radius: 15px;
width: 30%;
margin-bottom: 2rem;
font-weight: bold;
box-shadow: 0 0 4px white;
}
.header-pr-point p{
padding: .3rem 0 .2rem 0;
}

.header-pr-text{
font-weight: bold;
font-size: 1.5rem;
text-align: left;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 1), 0px 0px 7px rgba(0, 0, 0, 1);
}

.appeal-button{
box-shadow:0 0 6px white;
}

.inline-img-head img{
width: 2.5rem;
height: auto;
margin-left: -1rem;
}

.top-img img{
box-shadow: 0 0 8px gray;
}
.voice-container{
max-width: 800px;
margin: 0 auto;
box-shadow: 0 0 8px gray;
border-radius: 10px;
background: white;
}

.voice-container p{
padding: 0 1.5rem 1.5rem;
font-size: 1rem;
line-height: 1.1rem;
margin: 0;
}

.entry-content{
width: 95%;
max-width: 1000px;
margin: 0 auto;
}

body .is-layout-flex{
width: 90%;
margin: 0 auto;
max-width: 900px;
justify-content: center;
}

body .wp-block-columns{
margin: .5rem auto;
max-width: 800px;
}

.job-contents-container{
margin: 4rem auto 0;
}
.job-contents-container .wp-block-group{
margin-bottom: 0;
border-radius: 15px;
box-shadow:0 2px 4px gray;
background: #ebeef7;
border: #024e9b 2px solid;
}
.job-contents-container .wp-block-group h4{
padding: 1rem .5rem .4rem;
}
.job-contents-container .wp-block-group h4 img{
margin-right: .45rem;
}
.job-contents-container .wp-block-group p{
padding: 0.35rem .85rem 1rem;
font-size: .95rem;
line-height: 1.1rem;
}

.two-grids-container{
width: 90%!important;
max-width: 800px!important;
margin: 4rem auto 0;
}

.two-grids-container .wp-block-group{
background: #f0f0f0;
margin-bottom: 0;
box-shadow: 0 0 8px gray;
border-radius: 10px;
}

.two-grids-container .wp-block-group h4{
padding-top: .8rem;
}
.two-grids-container .wp-block-group p{
font-size: 0.9rem;
padding: 1.4rem;
}

.bg-white{
background: white!important;
}
.bg-orange{
background: #FFEACA!important;
}
.bg-skyblue{
background: #dffbff!important;
}

bg-orange img{
width: 2rem;
margin-right: .5rem;
}
bg-skyblue img{
width: 2rem!important;
margin-right: .5rem!important;
}
bg-orange span{
padding-left: .5rem;
}
bg-skyblue span{
padding-left: .5rem;
}


.benefits-container{
box-shadow: 0 2px 5px gray;
background: #eaedf7;
border: #024e9b 2px solid;
}
.benefits-container p{
padding:.85rem 1rem 1rem;
font-size: .9rem;
}
.benefit-img{
width: 2.8rem;
height: auto;
display: inline-block;
margin: 0 0 0 1rem;
}
.benefit-head{
display: inline-block;
padding-top: 1.4rem;
padding-left: .5rem;
}

.faq{
margin-top: 1rem;
}
.faq-first{
margin-top: 2.5rem;
}

.faq summary{
width: 90%;
max-width: 800px;
margin: 1rem auto 0;
border: 1px solid #bcbcbc;
padding: 1rem;
}
.answer{
font-size: 0.9rem;
padding-bottom: 1rem;
display: block;
width: 90%;
max-width: 800px;
padding: 1rem;
margin: 0 auto;
border: 1px solid #bcbcbc;
border-top: 0px;
}

.faq-others{
display:block;
width: 90%;
max-width: 800px;
padding: 1.2rem 2rem!important;
margin: 2rem auto 0;
text-align: center;
}

.form-bg{
background: #004b81;
margin: 0 calc(50% - 50vw);
padding: 4px calc(50vw - 50% + 8px);
}

.form-bg h2{
color: white;
}
.form-bg h2::before,
.form-bg h2::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: white;
}


@media screen and (max-width:768px){
	.top-text{
		padding: 0 1rem;
	}
	.site-logo-image{
		padding: 5px 0 5px;
	}
	h2.wp-block-heading{
		font-size: 24px;
	}
	.article h2::before, .article h2::after {
		width: 40px;
	}
.three-grids-container{
display: block!important;
}
	.three-grids-container .wp-block-group{
		margin: 1rem auto;
		width: 85%;
		
	}
		.sp-single{
        display: block!important;
}
	.sp-single .wp-block-group{
		margin: 2rem auto;
		width: 100%;
	}
	.two-grids-container{
		margin: 1rem auto 0;
		gap: 4px;
	}
	.two-grids-container .wp-block-group{
		margin: 1rem auto;
		width: 100%;	
	}
	.two-grids-container .benefits-container{
		margin: 4px auto 0;
		font-size: .85rem;
		line-height: .92rem;
		width: 100%;
		border-radius: 3px!important;
	}
	.benefits-container p{
		padding: .4rem 1rem .75rem;
	}
	.benefit-img{
		margin: -0.2rem 0 0 1rem;
		width: 2rem;
	}
	.faq .summary{
		font-size: 14px;
	}
	.bg-gray{
background: #f2f2f2;
margin: 0 calc(50% - 50vw);
		padding: 2rem 0 3rem;
}
.bg-base{
background: #ffffff;
margin: 0 calc(50% - 50vw);
		padding: 2rem 0 3rem;
}
	.form-bg{
margin: 0 calc(50% - 50vw);
		padding: 2rem 0 3rem;
}
}

	.mobile-footer-menu-buttons{
		display:none!important;
	}