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


    
	.mt0{margin-top:0 !important}
	.mt10{margin-top:10px !important}
	.mt20{margin-top:20px !important}
	.mt30{margin-top:30px !important}
	.mt40{margin-top:40px !important}
	.mt50{margin-top:50px !important}
	.ml0{margin-left:0 !important}
	.ml10{margin-left:10px !important}
	.ml20{margin-left:20px !important}
	.ml30{margin-left:30px !important}
	.ml40{margin-left:40px !important}
	.ml50{margin-left:50px !important}
	.mr0{margin-right:0 !important}
	.mr10{margin-right:10px !important}
	.mr20{margin-right:20px !important}
	.mr30{margin-right:30px !important}
	.mr40{margin-right:40px !important}
	.mr50{margin-right:50px !important}
	.mb0{margin-bottom:0 !important}
	.mb10{margin-bottom:10px !important}
	.mb20{margin-bottom:20px !important}
	.mb30{margin-bottom:30px !important}
	.mb40{margin-bottom:40px !important}
	.mb50{margin-bottom:50px !important}
	.pt0{padding-top:0 !important}
	.pt10{padding-top:10px !important}
	.pt20{padding-top:20px !important}
	.pt30{padding-top:30px !important}
	.pt40{padding-top:40px !important}
	.pt50{padding-top:50px !important}
	.pt70{padding-top:70px !important}
	.pl0{padding-left:0 !important}
	.pl10{padding-left:10px !important}
	.pl20{padding-left:20px !important}
	.pl30{padding-left:30px !important}
	.pl40{padding-left:40px !important}
	.pl50{padding-left:50px !important}
	.pr0{padding-right:0 !important}
	.pr10{padding-right:10px !important}
	.pr20{padding-right:20px !important}
	.pr30{padding-right:30px !important}
	.pr40{padding-right:40px !important}
	.pr50{padding-right:50px !important}
	.pb0{padding-bottom:0 !important}
	.pb10{padding-bottom:10px !important}
	.pb20{padding-bottom:20px !important}
	.pb30{padding-bottom:30px !important}
	.pb40{padding-bottom:40px !important}
	.pb50{padding-bottom:50px !important}
	.pb70{padding-bottom:70px !important}
	.center{text-align:center !important}
	.right{text-align:right !important}
	.bold{font-weight:700 !important}
	.bgYellow{background:linear-gradient(transparent 60%,#ffff59 60%)}
	.bgOrange{background:#ef7917 !important;padding:2px}
	.bgGold{background:#d6b251 !important}
	.textbg{background:#1c2a39;color:#fff;padding:0 20px 10px}
	.underline{text-decoration:underline !important}
	.underline_dash{border-bottom:dashed 1.5px;padding:0 0 5px}
	.strikeline{text-decoration:line-through !important}
	.pink{color:#e90076 !important;padding:1px}
	.gold{color:#c49526 !important}
	.fsG{font-size:.8em}
	.fsSS{font-size:.75em}
	.fsS{font-size:70% !important;line-height:1.7em}
	.fsM{font-size:150% !important}
	.fsL{font-size:180% !important}
@media screen and (max-width:767px){.fsL{font-size:220% !important}}
	.fsLL{font-size:200% !important;line-height:1.3em}
	.sp{display:none}
	.pc{display:inline}

@media screen and (max-width:767px){
	.mt0{margin-top:0 !important}
	.mt10{margin-top:1% !important}
	.mt20{margin-top:2% !important}
	.mt30{margin-top:3% !important}
	.mt40{margin-top:4% !important}
	.mt50{margin-top:5% !important}
	.ml10{margin-left:1% !important}
	.ml20{margin-left:2% !important}
	.ml30{margin-left:3% !important}
	.ml40{margin-left:4% !important}
	.ml50{margin-left:5% !important}
	.mr10{margin-right:1% !important}
	.mr20{margin-right:2% !important}
	.mr30{margin-right:3% !important}
	.mr40{margin-right:4% !important}
	.mr50{margin-right:5% !important}
	.mb0{margin-bottom:0 !important}
	.mb10{margin-bottom:1% !important}
	.mb20{margin-bottom:2% !important}
	.mb30{margin-bottom:3% !important}
	.mb40{margin-bottom:4% !important}
	.mb50{margin-bottom:5% !important}
	.pt10{padding-top:1% !important}
	.pt20{padding-top:2% !important}
	.pt30{padding-top:3% !important}
	.pt40{padding-top:4% !important}
	.pt50{padding-top:5% !important}
	.pt70{padding-top:7% !important}
	.pl0{padding-left:0 !important}
	.pl20{padding-left:2% !important}
	.pl30{padding-left:3% !important}
	.pl40{padding-left:4% !important}
	.pl50{padding-left:5% !important}
	.pr10{padding-right:1% !important}
	.pr20{padding-right:2% !important}
	.pr30{padding-right:3% !important}
	.pr40{padding-right:4% !important}
	.pr50{padding-right:5% !important}
	.pb10{padding-bottom:1% !important}
	.pb20{padding-bottom:2% !important}
	.pb30{padding-bottom:3% !important}
	.pb40{padding-bottom:4% !important}
	.pb50{padding-bottom:5% !important}
	.pb70{padding-bottom:7% !important}
	.sp{display:inline}
	.pc{display:none}
	
}


	html{
		-webkit-text-size-adjust:100%;
		-webkit-tap-highlight-color:transparent;
		overflow-x:auto;overflow-y:scroll;
		font-size:calc(.0069444444*3vw*100);
		line-height:1.15;
	}

	body{
		background-color:#fff;
		font-family:'Noto Sans JP',"繧ｴ繧ｷ繝�けMB101 M","Gothic MB101 Medium","貂ｸ繧ｴ繧ｷ繝�け",YuGothic,"繝偵Λ繧ｮ繝手ｧ偵ざ Pro W3","Hiragino Kaku Gothic Pro","繝｡繧､繝ｪ繧ｪ",Meiryo,Osaka,"�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け","MS PGothic",sans-serif,sans-serif;
		font-size:17px;
		line-height:1;
		font-feature-settings:'palt' 1;
		-moz-osx-font-smoothing:grayscale;
		letter-spacing:.16em;
		color:#1c2a39;
	}

	.wrap{
		width:100vw;
		margin:0 auto;
		max-width:100vw;
		padding:0 3.8rem;
	}

	#sidebar{
		display:none;
	}

	img{
		vertical-align:top;width:100%;height:auto;
	}

	.main{
		width:100%;
		padding:0;
		border:none;
		border-radius:0;
		display:block;
	}

	main.main{
		padding:0;
		margin:0;
	}

	.content-in{
		display:block;
	}
	.content .main{
		margin:0;
		width:100%;
	}
	.content{
		margin-top:0 !important;
	}
	.footer{
		margin-top:0 !important;
		padding:50px 0 10px !important;
		background:#1c2a39;
		color:#fff;
		position:relative;
		border-top:solid 1px #fff;
	}
	#footer-in .site-info{
		font-family:inherit;
		font-size:inherit;
		font-weight:400;
		font-size:.8em;
	}
	#footer-in .site-info a{
		color:#fff;
		text-decoration:none;
	}
	#footer-in .site-info a:hover{
		color:#868686;
	}
	#footer-in address{
		font-style:normal;
	}
	#footer-in .footer_logo{
		width:35%;
		max-width:150px;
		margin-bottom:15px;
	}
	#footer-in .info{
		color:#fff;
		background:0 0 !important;
		border:none !important;
		font-size:.8em;
		line-height:1.4em;
	}
	.map_inner{
		width:80%;
		max-width:500px;
	}
	a{
		-webkit-transition:all .3s ease;
		-moz-transition:all .3s ease;
		-ms-transition:all .3s ease;
		-o-transition:all .3s ease;
		transition:all .3s ease;
	}
	a:hover{
		color:#757575;
		-webkit-filter:brightness(1.4);
		-moz-filter:brightness(1.4);
		-o-filter:brightness(1.4);
		-ms-filter:brightness(1.4);
		filter:brightness(1.4);
	}

@media screen and (max-width:767px){
	
	.body,
	.menu-content{
		font-size:15px;
	}
	
	p{
		margin:5% 0;
	}
	
	.wrap{
		padding:0 2.8rem;
	}
	
	.footer{
		padding:6% 0 !important;
	}
	
	#footer-in .flex{
		display:block
	}
	
	#footer-in p{
		margin:2% 0;
		font-size:1.2em;
		line-height:1.5em;
	}
	
	#footer-in .footer_logo{
		width:40%;
		margin-bottom:5%
	}
	
	#footer-in .info{
		font-size:.8em;
		line-height:1.4em;
		margin:0;
		padding:3%;
		border-bottom:dotted 1px #5f6166 !important;
	}
	
	#footer-in .flex_item{
		text-align:center;
		margin-bottom:5%;
		line-height:1.6em;
	}
}

	h1,h2,h3,h4,h5{
		font-weight:400;
	}

	.ttl,
	.sub_ttl{
		margin-bottom:0;
		display:inline-block;
		margin-bottom:60px;
	}

	.ttl .text-span{
		color:#1c2a39;
		font-size:4.5rem;
		font-weight:700;
		font-family:'Oswald',sans-serif;
		margin-bottom:0;
	}
	.ttl h3{
		font-family:HelveticaNowDisplay,HelveticaNowMicro,HelveticaNeue,Helvetica,Roboto,"Droid Sans",sans-serif;
		font-weight:600;
		letter-spacing:0;
		font-size:4.5rem;
		line-height:5.6rem;
	}

	.ttl h4{
		font-family:'Gentium Basic',serif;
		letter-spacing:.3em;
	}

@media screen and (max-width:767px){
	
	.ttl,.sub_ttl{
		margin-bottom:6%;
	}
	
	.ttl h3{
		font-size:4em;
		text-shadow:2px 2px 0 #fff;
	}
}

	.textbox{
		position:relative;
		z-index:10;
		font-weight:900 !important;
		font-size:1.5rem;
		line-height:2.6rem;
	}

	.textbox_L{
		font-size:3rem;
		line-height:5.7rem;
	}

	.textbox p{
		margin:0
	}

	.textbox h4{
		font-family:'Oswald',sans-serif;
		font-weight:600;
		font-size:1.5em;
		display:block;
		line-height:1.1em;
		margin-bottom:2%;
	}

@media screen and (max-width:767px){
	
	.textbox{
		font-size:2.5rem;
		line-height:5rem;
	}
	
	.textbox_L{
		font-size:3.6rem;
		line-height:7.5rem;
	}
}

	.bg_fixed{
		background-attachment:fixed;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}

	.bg_cover{
		background-size:cover;
		background-position:center center;
		background-repeat:no-repeat;
		top:0;
	}

	.bg_w{
		background:#fff;
	}

	.bg_gr{
		background:#f0f1f3;
	}

	.bg_bl{
		background:#1c2a39;
	}

	.flex{
		flex-wrap:wrap;
		display:flex;
		justify-content:space-between;
		align-items:stretch;
		margin:0;
	}

	.flex_item_text{
		width:40%;
	}

	.flex_item_img{
		width:50%;
		right:70px;
	}

	.button{
		display:block;
		width:80%;
		text-align:left;
		color:#0044ae;
		margin:5% auto;
		cursor:pointer;
		position:relative;
		text-decoration:none;
		max-width:220px;
		font-weight:700;
	}

	.button:hover{
		color:#868686;
	}

	.button:after{
		content:"";
		display:block;
		position:absolute;
		top:calc(50% - 5px);
		right:15%;
		width:40px;
		height:7px;
		border:none;
		border-right:1px solid #1c2a39;
		border-bottom:1px solid #1c2a39;
		transform:skew(45deg);
		transition:.3s;
	}

	.button:hover:after{
		right:15%;
		width:30px;
		border-right:2px solid #868686;
		border-bottom:1px solid #868686;
	}
	.
	flowing{
		width:0;
		margin:0;
		font-size:3vw;
		font-weight:700;
		color:tomato;
		white-space:nowrap;
		overflow:hidden;
		animation:flowing-anim 5s forwards linear;
	}

	@keyframes flowing-anim{
		0%{width:0}
		100%{width:100%}
	}

	.c-marker{
		padding:0 5px;
		background-image:linear-gradient(transparent 70%,#d3d9e1 0%);
		background-size:0 50%;
		background-position:0 100%;
		background-repeat:no-repeat;
		transition:1s;
	}

	.c-marker.is-active{
		background-size:100% 50%;
	}

	body.fixed{
		width:100%;
		height:100%;
		position:fixed;
	}

	.overlay{
		content:"";
		display:block;
		width:0;
		height:0;
		position:absolute;
		top:0;
		left:0;
		z-index:2;
		opacity:0;
		transition:opacity .5s;
	}

	.overlay.open{
		width:100%;
		height:100%;
		opacity:1;
	}

	main{
		height:100%;
		min-height:100vh;
		padding:0 50px;
		background-color:#eee;
		transition:all .5s;
		display:flex;
		flex-direction:column;
		justify-content:center;
	}

	main.open{
		transform:translateX(-250px)
	}

	.menu-trigger{
		display:inline-block;
		width:80px;
		height:80px;
		vertical-align:middle;
		cursor:pointer;
		position:fixed;
		top:48px;
		right:3%;
		z-index:1000;
		border-radius:0;
	}

	.menu-trigger span{
		display:inline-block;
		box-sizing:border-box;
		position:absolute;
		left:0;
		width:72%;
		height:1px;
		background-color:#a6a6a6;
		transition:all .5s;
		right:0;
		margin:auto;
	}

	.menu-trigger.active span{
		background-color:#fff;
	}

	.menu-trigger span:nth-of-type(1){
		top:50%;
	}

	.menu-trigger.active span:nth-of-type(1){
		transform:translateY(0px) rotate(-45deg);
	}

	.menu-trigger span:nth-of-type(2){
		top:25px;
	}

	.menu-trigger.active span:nth-of-type(2){
		opacity:0;
	}

	.menu-trigger span:nth-of-type(3){
		bottom:24px;
	}

	.menu-trigger.active span:nth-of-type(3){
		transform:translateY(-13px) rotate(45deg);
	}

	#header nav{
		width:100%;
		max-width:400px;
		height:100%;
		padding-top:210px;
		background-color:#1c2a39;
		position:fixed;
		top:0;
		right:0;
		z-index:10;
		transform:translate(400px);
		transition:all .3s;
	}

	#header nav.open{
		transform:translateZ(0)
	}

	#header nav li{
		text-align:center;
		padding:15px 0;
	}

	#header nav li a{
		text-decoration:none;
		color:#fff;
	}

	#header ul{
		list-style:none;
		margin:0;
		padding:0;
	}

@media screen and (max-width:767px){
	
	.menu-trigger{
		width:45px;
		height:45px;
		top:40px;
		right:7%;
	}
	
	.menu-trigger span:nth-of-type(2){
		top:15px;
	}
	
	.menu-trigger span:nth-of-type(3){
		bottom:13px;
	}
	
	.menu-trigger.active span:nth-of-type(3){
		transform:translateY(-8px) rotate(45deg);
	}
	
	#header nav{
		max-width:100%;
		padding-top:50%;
		transform:translate(100%);
	}
	
	#header nav li{
		padding:4% 0}
	}

	.about{
		padding:150px 0 0;
		position:relative;
	}

	.logo_about_inner{
		position:relative;
		width:50%;
		margin:3rem auto 0;
		max-width:1500px;
	}

@media screen and (max-width:767px){
	
	.about{
		padding:15% 0 0;
	}
	
	.logo_about_inner{
		width:75%;
		margin:10% auto 0;
	}
}

	.mission{
		padding:150px 0;
		position:relative;
	}

	.mission .textbox h2{
		font-size:5.5rem;
		font-weight:700;
		font-family:'Oswald',sans-serif;
		line-height:1.05em;
		margin:40px 0 20px;
		letter-spacing:.01em;
	}

@media screen and (max-width:767px){
	.mission{
		padding:15% 0;
		height:auto;
	}
	
	.mission .textbg{
		padding:0 2% 1%;
		font-size:4.5rem;
	}
	
	.mission .textbox h2{
		font-size:7.7rem;
		line-height:1.1em;
		margin:5% 0 1%;
	}
}

	.service{
		padding:150px 0 200px;
		position:relative;
		color:#fff;
	}

	.service .ttl .text-span{
		color:#fff;
	}

	.service .textbg{
		background:#fff;
		color:#1c2a39;
	}

	.service_img{
		max-width:90%;
	}

	.service_content{
		width:85%;
		margin:100px auto 0;
		box-shadow:2rem 2rem 0 .5rem #cdd1d7;
	}

	.flex_item_service{
		width:calc(100%/3);
		background:#fff;
		text-align:center;
		padding:5%;
		border-right:solid 2px #f0f2f3;
		border-bottom:2px solid #f0f2f3;
		box-sizing:border-box;
	}

	.service .flex_item_service h5{
		font-weight:700;
		letter-spacing:.07em;
		margin-top:6%;
		color:#1c2a39;
		font-size:.65rem;
		line-height:1.2em;
	}

@media screen and (max-width:767px){
	.service{
		padding:15% 0 18%;
	}
	
	.service .textbox{
		line-height:4.2rem;
	}
	
	.service .textbox .ml20{
		margin:2% 2% 0 0 !important;
		padding:.2% 2% 1%;
		display:inline-block;
	}
	
	.service_content{
		width:100%;
		margin:8% auto 0;
		box-shadow:2.5rem 2.5rem 0 .3rem #cdd1d7;
	}
	
	.service .flex_item_text,
	.service .flex_item_img{
		width:100%;
	}
	
	.service .flex_item_img{
		margin-top:10%;
		right:0;
		position:relative;
	}
	
	.flex_item_service{
		padding:5% 3%;
		border-right:solid 1px #f0f2f3;
		border-bottom:solid 1px #f0f2f3;
	}
	
	.service .flex_item_service h5{
		font-size:.6em;
		line-height:1.5em;
	}
}

	.recruit{
		padding:150px 0;
		position:relative;
		text-align:center;
	}

	.recruit .button{
		background:#1c2a39;
		text-align:center;
		width:100%;
		border-radius:10px;
		padding:4% 7% 4% 5%;
		max-width:600px;
		font-size:.9rem;
		margin-top:7%;
		color:#fff;
	}

	.recruit .button:after{
		border-right:1px solid #fff;
		border-bottom:1px solid #fff;
	}

@media screen and (max-width:767px){
	.recruit{
		padding:15% 0;
		height:auto;
	}
	
	.recruit .textbox .textbg{
		margin:2% 2% 0 0 !important;
		padding:.2% 2% 1%;
		display:inline-block;
	}
	
	.recruit .button{
		padding:7% 9% 7% 5%;
		font-size:2.8rem;
	}

}

.contact{
	padding:100px 0;
	position:relative;
	background:#1c2a39;
	color:#fff;
}

.contact .ttl{
	margin-bottom:2vh;
}

.contact .ttl .text-span{
	color:#fff;
}

.contact .flex_item_text{
	width:45%;
}

.contact .flex_item_img{
	width:50%;
	margin-left:5%;
	margin-top:0;
}

.contact .button{
	background:#fff;
	text-align:center;
	width:100%;
	border-radius:10px;
	padding:4% 7% 4% 5%;
	max-width:600px;
	font-size:.9rem;
	margin-top:4%;
	color:#1c2a39;
}

@media screen and (max-width:767px){
	.contact{
		padding:15% 0;
	}
	
	.contact .ttl h3{
		text-shadow:none;
	}
	
	.contact .button{
		padding:7% 9% 7% 5%;
		font-size:2.8rem;
	}
	
	.contact .button:after{
		right:9%;
		width:26px;
	}
}

	.privacy{
		padding:180px 0 30px;
	}

	.privacy .ttl{
		display:block;
		text-align:center;
	}

	.privacy .ttl h1{
		text-align:center;
		margin-bottom:5%;
		font-weight:700;
	}

	.privacy .wrap{
		max-width: 1000px;
		padding: 0;
	}

	.privacy h2{
		margin:0 0 .5em;
		font-size:1.3em;
		font-weight:700;
		border-bottom:solid 1px #d7d7d7;
		padding-bottom:1.5%;
	}

	.privacy p{
		margin:0 0 4em;
		font-weight:400;
		font-size:.8em;
		line-height:1.5em;
	}

	.privacy ol {
		font-size: .8em;
		line-height: 1.5em;
		margin-bottom: 50px;
	}

@media screen and (max-width:767px){
	.privacy{
		padding:15% 0 5%;
	}
	
	.privacy .wrap {
		max-width: 90%;
		padding: 0;
		margin: 0 auto;
	}
	
	.privacy .ttl h1{
		font-size:1.4em;
	}
	
	.privacy h2{
		font-size:1.1em;
		line-height: 1.7;
	}
	
	.privacy p{
		margin:0 0 2.5em;
	}
	
	.privacy ol {
		font-size: .8em;
		line-height: 1.5em;
		margin-bottom: 2.5em;
		padding-left: 5%;
	}

}