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

@media screen and (min-width: 1024px){
	.pc{display:block;}
	.sp{display:none;}
}

@media screen and (max-width: 1023px){
	.pc{display:none;}
	.sp{display:block;}
}


:root {
	--radius: 16px;
	--padding: 16px;
	--width: 960px;
	--maxwidth: 1366px;
	--color: #1b1b1b;
	--green1: #006168;
	--green2: #00b4a8;
	--blue1: #044180;
	--blue2: #0058ad;
	--sky: #4892e6;
	--red: #e50111;
	--gray: #f8f8f8;
}

body{
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 500 !important;
	font-style: normal;
	font-size: clamp(14px, 2.5vw, 18px);
	font-feature-settings: "palt" 1;
	overflow-x:hidden;
	background:var(--gray);
}

#search-menu-open,
#breadcrumb{
	display:none !important;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}


p{
	margin:1em 0;
}

.big{
	font-size:120%;
	font-weight:700;
}
.btn_fade{
	transition:0.2s;
}

.btn_fade:hover{
	opacity:0.5;
}


img.responsive{
	width:100%;
}

img.radius{
	border-radius:10px;
}

.text_center{
	text-align:center;
}


.e-font{
	font-family: "tablet-gothic", sans-serif;
	font-weight: 800;
}

.blue{
	color:var(--blue2);
}
.sky{
	color:var(--sky);
}

.blue_text_center{
	color:var(--blue2);
	text-align:center;
}

@media screen and (max-width: 1023px){
	
	.blue_text_center{
		text-align:left;
	}
}


/*-----------------------------
 * btn_p
 * ---------------------------*/

.btn_p{
	margin:1em 0;
}
.btn_p a,
#navi-in ul .contact,
.form_box input[type="submit"]{
	background: linear-gradient(90deg, rgb(3, 65, 127), rgb(11, 110, 211));
	font-size: clamp(16px, 2.5vw, 20px);
	
	color:#fff;
	text-decoration:none;
	border-radius:45px;
	padding:0 1em;
	text-align:center;
	font-weight: 700;
	transition:0.2s;
}

.btn_p a,
.form_box input[type="submit"]{
	padding:1em 2em;
}

#navi-in ul .contact{
	display:block;
}
.btn_p a:hover,
.form_box input[type="submit"]:hover,
#navi-in ul .contact:hover{
	opacity:0.7;
}

.form_box input[type="submit"]{
	display:block;
	max-width:360px;
	width:100%;
	margin:0 auto;
	text-align:center;
}

#navi-in ul li:nth-child(1),/*トップページ*/
#navi-in ul li:nth-child(5),/*ご依頼の流れ*/
#navi-in ul li:nth-child(7),/*会社概要*/
#navi-in ul li:nth-child(8)/*プライバシーポリシー*/{
	display:none;
}


.btn_p.border_btn_p a{
	border:#fff solid 1px;
	background:none;
	font-size: clamp(16px, 2.5vw, 16px);
}


.btn_p.border_btn_p a:hover{
	background:#fff;
	color:var(--blue1);
}

@media screen and (max-width: 1023px){

	

	.menu-content .menu-drawer{
		padding: 0 2em 30px;
	}
	#navi-menu-content ul li:last-child{/*お問い合わせ*/
		position:absolute;
		bottom:3em;
		display:block;
		width:80%;
	}
	#navi-menu-content ul li:last-child a{/*お問い合わせ*/
		display:block;
		width:100%;
		background: linear-gradient(90deg, rgb(0, 97, 104), rgb(0, 180, 168));
		color:#fff;
		border-radius:1em;
		font-size:large;
		text-align:center;
	}
}


/*--------------------
 * contact_box
 * ---------------------*/

.contact_box .btn_p a{
	display:block;
	font-size: clamp(18px, 2.5vw, 30px);
	padding:1em;
	line-height:1.5em;
}

.contact_box .btn_p.tel a span{
	font-size:200%;
}


/*---------------------
 * h
 * -------------------*/

.section_h2{
	font-size: clamp(28px, 2.5vw, 50px) !important;
	font-weight:700 !important;
	background:none !important;
	color:var(--blue2);
	line-height:1em;
	padding:0 !important;
	margin-bottom:0.5em;
}

.section_h2 .e-font{
	border-top:var(--green1) solid 1px;
	display:block;
	font-size: clamp(12px, 2.5vw, 18px);
	line-height:1em;
	margin-top:10px;
	padding-top:10px;
}


.section_h3{
	font-size: clamp(24px, 2.5vw, 32px) !important;
	font-weight:700 !important;
	background:none !important;
	border:none !important;
	padding:0 !important;
	margin-bottom:0.5em !important;
}

.section_h4{
	font-size: clamp(24px, 2.5vw, 24px) !important;
	font-weight:700 !important;
	background:none !important;
	border:none !important;
	padding:0 !important;
	margin-bottom:0.5em !important;
}



/*---------------------
 * flex_box
 * -------------------*/
.flex_box{
	display:flex;
	flex-direction: row;
}





/*---------------------
 * grid_box
 * -------------------*/
.grid_box{
	display:grid;
	gap:20px;
}

.grid_box.grid_two{
	grid-template-columns:1fr 1fr;
}

.grid_box.grid_three{
	grid-template-columns:1fr 1fr 1fr;
}
.grid_box.grid_four{
	grid-template-columns:1fr 1fr 1fr 1fr;
}

@media all and (max-width: 1023px) {
	.grid_box.grid_two,
	.grid_box.grid_three{
		grid-template-columns:1fr;
	}	

	.grid_box.grid_four{
		grid-template-columns:1fr 1fr;
	}
}




/*---------------------
 * thum_box
 * --------------------*/
.thum_box {
	padding:1em 0;
}
.thum_box ul,
.thum_box ul li{
	margin:0;
	padding:0;
	list-style:none;
}

.thum_box ul{
	
}




/*------------------------
 * padding_box 
 * ----------------------*/

.padding_box{
	padding:calc(var(--padding) * 2);
}



@media all and (max-width: 1023px) {
	.padding_box{
		padding:var(--padding);
	}
}



/*------------------------
 * border_box 
 * ----------------------*/

.border_box {
	border-radius:var(--radius);
	margin:2em 0;
}
.border_green{
	border:var(--green2) solid 1px;
}
.border_blue{
	border:var(--blue2) solid 1px;
}
.border_sky{
	border:var(--sky) solid 1px;
}



/*-----------------------
 * header
 * -----------------------*/

#header-container{
	height:120px;
	width:100%;
	background:var(--gray);
	border-bottom:#c1c1c1 solid 1px;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
}

#header-container #header-container-in{
	width:100%;
	height:100%;
	padding:0 5%;	
}

#header-container #header-container-in #header{
	width:20%;
	min-width:100px;
}

#header-container .header-container-in.hlt-top-menu .logo-header .site-name{
	padding:0;
}

#header-container .logo-image span{
	padding:0;
}

#header-container .logo-image span img{
	height:100%;
}

#header-container #header-in{
	height:100%;
}

#header-container #header-in h1 a span{
	display:table-cell;
	vertical-align:middle;
}

@media all and (max-width: 1023px) {
	
	#header-container{
		height:auto;
		position:static;
	}
	
	#header-container{
		display:none;
	}
	
	.mobile-header-menu-buttons .logo-menu-button img{
		padding:5px;
	}
}



/*---------------------------
 * nav
 * ------------------------*/
.navi{
	background:none;
}
.navi .item-label, .navi .item-description{
	overflow:auto;
    white-space: normal;
}

.navi-in > ul li{
	width:auto;
}

.navi-in > ul li a{
	padding:0 10px;
	font-weight: 700;
	font-size: clamp(14px, 1vw, 20px);
	background:none !important;
	transition:0.2s;
}

.navi-in > ul li a:hover{
	opacity:0.5;
}



.menu-close-button{
	text-align:right;
	padding-right:1em;
}

/*---------------------
 * container
 * ------------------*/

#container #content{
	margin:0;
}

#container #content-in{
	padding:0;
	width:100%;
	background:none;
}

#container #content-in #main{
	padding:0;
	border:none;
	background:none;
}




/*-----------------------------
 * anchor
 * ---------------------------*/

a.anchor{
    display: block;
    padding-top: 200px;
    margin-top: -200px;
}

/*------------------------
 * main_visual
 * ----------------------*/

#main_visual{
	margin-top:120px;
	height:800px;
	width:100%;
	position:relative;
}

#main_visual ul.list_ul{
	height:800px;
	width:100%;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0;
}

#main_visual ul.list_ul li{
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}


#main_visual ul.list_ul li:nth-child(1){background:url("/wp-content/uploads/header.jpg") center no-repeat;background-size:cover;}

#main_visual .notes{
	position:absolute;
	bottom:10px;
	right:10px;
	font-size: clamp(14px, 2.5vw, 24px);
	font-weight:700;
	margin:0;
	text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
	opacity:0.5;
}

#main_visual .text_box{
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	padding-left:5%;
}

#main_visual .text_box .text1 {
	position:relative;
	z-index:10;
}
#main_visual .text_box .text1 p{
	position: relative;
    display: inline-block;
    padding: 0.2em 0.5em;
    color: #fff;
    font-size: 18px;
    line-height: 1.3em;
    text-decoration: none;
	
	font-weight:700;
	font-size: clamp(50px, 3vw, 60px);
	margin:0;
	margin-bottom:10px;
	
}

#main_visual .text_box .text1 p::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius: 3px;
    background: linear-gradient(90deg, rgb(3, 65, 127), rgb(11, 110, 211));
    transform: skewX(-15deg);
}

#main_visual .text_box .text2 ul,
#main_visual .text_box .text2 ul li{
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
	z-index:10;
}

#main_visual .text_box .text2 ul{
	padding-top:3em;
}

#main_visual .text_box .text2 ul li{
	font-size: clamp(14px, 2.4vw, 24px);
	color:#fff;
	text-shadow:0 0 5px #000 , 0 0 10px #000 , 0 0 14px #000;
}



@media all and (max-width: 1023px) {
	#main_visual{
		margin-top:18px;
	}

	#main_visual ul.list_ul li:nth-child(1){background:url("/wp-content/uploads/header_sp.jpg") center no-repeat;background-size:cover;}
	
	#main_visual,
	#main_visual ul.list_ul{
		/*height:100vh;*/
		height:auto;
		width:100%;
		aspect-ratio:3 / 4;
	}
	
	#main_visual .text_box{
		padding-left: 5%;
		top:60%;
	}
	
	
	
	#main_visual .text_box .text1 p{
		font-size: clamp(20px, 3vw, 30px);
	}
		
}





/*----------------------
 * middle_container
 * ------------------*/

.middle_container{
	max-width:var(--maxwidth);
	width:100%;
	margin:8em auto;
	padding:0 2em;
}



@media all and (max-width: 1023px) {
	.middle_container{
		margin:4em auto;
		padding:0 5%;
	}
}





/*----------------------
 * short_container
 * ------------------*/

.short_container{
	max-width:var(--width);
	width:100%;
	margin:8em auto;
	padding:0 2em;
}

@media all and (max-width: 1023px) {
	.short_container{
		margin:4em auto;
		padding:0 5%;
	}
}




/*----------------------
 * wide_container
 * -----------------------*/

.wide_container{
	width:100%;
	margin:8em auto;
}


@media all and (max-width: 1023px) {
	.wide_container{
		margin:4em auto;
	}
}



/*-------------------
 * greeting
 * ------------------*/

#greeting{
	background-image: linear-gradient(45deg, #044180, #065eb9);
	color:#fff;
	margin-top:0;
	margin-bottom:0;
	padding-top:40px;
	position:relative;
}

#greeting .bottom_line{
	margin:0;
	position:absolute;
	bottom:-1px;
	left:0;
	background:var(--gray);
	height:80px;
	width:100%;
}


#greeting .border_box p{
	margin:0;
	position:absolute;
	left:0;
	background:#0662c0;
	height:30px;
}

#greeting .border_box p:first-child{
	bottom:170px;
	width:400px;
}
#greeting .border_box p:last-child{
	bottom:120px;
	width:540px;
}


#greeting h2{
	font-size: clamp(24px, 3vw, 40px);
	margin-bottom:0.5em;
	line-height:1.2em;
}

#greeting .tel_box{
	background:#ffffff24;
	padding:1em;
	text-align:center;
	margin-bottom:3em;
}

#greeting .tel_box a{
	color:#fff;
	font-size:160%;
	text-decoration:none;
	font-weight:bold;
}


#greeting .inner{
	display:grid;
	grid-template-columns:0.8fr 1fr;
	position: relative;
    z-index: 2;
}



#greeting .inner .text_box .box{
	width:620px;
	margin:0 auto;
	margin-top:100px;
	margin-bottom:260px;
	padding:10px;
}

#greeting .inner .img_box{
	background:url("/wp-content/uploads/index_concept.png") left top no-repeat;
	background-size:cover;
}

@media (max-width: 1365px) {
	#greeting .inner{
		display:block;
	}
	
	#greeting .inner .text_box .box{
		width:100%;
		max-width:800px;
		margin:0 auto;
		margin-bottom:100px;
	}
	#greeting .bottom_line{
		display:none;
	}
	
	#greeting .inner .img_box{
		width:100%;
		aspect-ratio:2/ 1;
		background:url("/wp-content/uploads/index_concept_sp.jpg") center no-repeat;
		background-size:cover;
	}
	
	
	#greeting .border_box{
		display:none;
	}
}



/*--------------------
 * point
 * -----------------*/
#point{
	padding:2em 0;
	position:relative;
	overflow:hidden;
}




#point .text_box{
	display: table;
}


#point h2{
	font-size: clamp(18px, 2.4vw, 20px);
	line-height:2em;
	color:var(--blue2);
	font-weight:900;
	
	display: table-cell;
    height: 100%;
    vertical-align: middle;
}
#point h2 span{
	font-size: clamp(24px, 3vw, 45px);
}




@media all and (max-width: 1023px) {
	/*#point{
		padding:2em 0;
	}*/
}





/*--------------------
 * rcf
 * -----------------*/

#rcf .h2_box{
	background:url("/wp-content/uploads/img_rcf_back.jpg") center no-repeat ;
	background-size:cover;
	text-align:center;
}

#rcf .h2_box img{
	padding-top:10em;
}

/*------------------------
 * process
 * --------------------*/
#process{
	position:relative;
	padding:3em 0;
	color:#fff;
}
#process .movie {
	/*background: url(../ai.jpg) no-repeat center center;
	background-size: cover;*/
	height: inherit;
	position:absolute;
	top:0;
	left:0;
	overflow: hidden;
	z-index:-1;
	height: 100%;
	width: 100%;
}
#process .movie__video {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

#process .back_p{
	margin:0;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:var(--blue1);
	z-index:-1;
	opacity:0.5;
}

#process h2{
	font-size: clamp(30px, 2.5vw, 46px);
	text-align:center;
	margin-bottom:1em;
}

#process .btn_p {
	margin:0 auto;
	margin-top:3em;
	text-align:center;
}
#process .btn_p a{
	font-size: clamp(20px, 2.5vw, 30px);
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
}




/*-----------------------
 * flow
 * -----------------------*/
#flow .flow_img{
	margin-bottom:2em;
}
#flow .flow_img ul,
#flow .flow_img ul li{
	margin:0;
	padding:0;
	list-style:none;
}

#flow .flow_img ul{
	display: grid;
    flex-direction: row;
    gap: 40px;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#flow .flow_img ul li{
	flex: 1;
	text-align:center;
	position:relative;
}
#flow .flow_img p{
	margin:0;
	font-size:80%;
}

#flow .flow_img ul li:after{
	display:block;
	content:"▶";
	position:absolute;
	top: 55%;
    right: -20%;
    transform: translateY(-55%);
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
	color:var(--blue2);
}

#flow .flow_img ul li:last-child:after{
	display:none;
}

#flow .grid_box{
	grid-template-columns: 150px 1fr;	
}

#flow .grid_box h4{
	font-size: clamp(20px, 2.5vw, 24px);
	margin-bottom:0;
}


#flow .grid_box h4.blue{color:var(--blue2);}
#flow .grid_box h4.sky{color:var(--sky);}

#flow .grid_box h4 span{
	font-size:200%;
	font-style:italic;
	line-height:1em;
}

#flow .flow_text_box{
	background:#fff;
}

@media all and (max-width: 1023px) {
	#flow .flow_img {
		margin:0 auto;
	}
	
	#flow .flow_img ul li:after{
		right:-1.5em;
	}
	
	#flow .grid_box{
		grid-template-columns: 1fr;
	}
	
	#flow .grid_box .icon_box{
		width:150px;
		height:150px;
		margin:0 auto;
	}
	
	#flow .flow_img ul{
		width:95%;
	}
}


@media all and (max-width: 767px) {
	#flow .flow_img ul{
		grid-template-columns: 1fr 1fr 1fr;
	}
}




/*----------------------
 * flow_icon_box
 * ---------------------*/

.flow_icon_box em{
	font-style:normal;
	display:inline;
}
.flow_icon_box span{
	display:block;
	border-radius:50%;
	padding:10px;
	width:100%;
	aspect-ratio: 1 / 1;
	position:relative;
}

.flow_icon_box.blue{color:var(--blue2);}
.flow_icon_box.blue span{background:var(--blue2);}

.flow_icon_box.sky {color:var(--sky);}
.flow_icon_box.sky span{background:var(--sky);}


.flow_icon_box span img{
	width:50%;
	height:50%;
	position:absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


/*--------------------
 * faq
 * -------------------*/
#faq .faq_box {
	margin-bottom:3em;
}
#faq .faq_box h3{
	color:var(--blue2);
	font-weight:700;
	font-size: clamp(20px, 2.5vw, 24px);
}
#faq .faq_box h3 span{
	font-size:200%;
	font-style:italic;
	line-height:1em;
	padding-right:10px;
}





/*------------------
 * notes_box
 * --------------*/
.notes_box h3{
	text-align:center;
}
.notes_box{
	border:var(--blue2) solid 2px;
	color:var(--blue2);
	max-width:960px;
	margin:0 auto;
	font-size:clamp(16px, 3vw, 18px);
}



@media all and (max-width: 1023px) {
	.notes_box{
		text-align:left;
		font-size:16px;
	}
}




/*--------------------
 * area
 * -------------------*/
#area .text_box{
	/*word-break: keep-all;*/
}


@media all and (max-width: 1023px) {
	
	.flow_icon_box em{
		display:none;
	}

	#area .text_box{
		/*word-break: normal;*/
	}
}





/*----------------------
 * footer
 * ---------------------*/

#footer{
	background:var(--blue1);
	padding:0;
	margin:0;
}

#footer #footer_box{
	max-width: var(--maxwidth);
	width:100%;
    margin: 0 auto;
    padding: 2em;
	padding-top:4em;
	color:#fff;
}

#footer #footer_box .grid_box{
	grid-template-columns: 460px 1fr;
}

#footer #footer_box .grid_box .contact_box .btn_p a{
	background:#fff;
	color:var(--blue2);
}

#footer #footer_box .grid_box .map_box iframe{
	width:100%;
	height:100%;
}


#footer .footer-bottom{
	padding:2em;
	padding-bottom:4em;
	margin:0;
}
#footer #navi-footer-in a{
	color:#fff;
	transition:0.2s;
}

#footer #navi-footer-in a:hover{
	opacity:0.5;
	background:none !important;
}


#footer .copyright{
	color:#fff;
	font-size:80%;
	padding-top:1em;
}

#footer .footer-bottom.fdt-up-and-down .footer-bottom-content .navi-footer-in > ul{
	max-width:800px;
	margin:0 auto;
}


@media all and (max-width: 1023px) {
	
	#footer #footer_box{
		padding: 1em;
		padding-top:2em;
	}
	
	#footer #footer_box .grid_box{
		grid-template-columns: 1fr;
	}
	#navi-footer #navi-footer-in ul {
		display:block;
	}
	#navi-footer #navi-footer-in ul li{
		text-align:left;
		width:100%;
	}
}



/*---------------------------
 * 固定ページ
 * --------------------------*/


#container #content-in{
	/*padding-top:160px;*/
}


#container #content-in .article-header{
	padding:5em 0;
	margin-top:160px;
	position:relative;
	background:url("/wp-content/uploads/header.jpg") center no-repeat;
	background-size:cover;
}

#container #content-in .article-header h1{
	padding:0;
	margin:0;
	
	text-align:center;
	font-size: clamp(30px, 2.5vw, 40px);
	color:#fff;
	text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 14px #000;
}



#content_wrapper{
	max-width:var(--maxwidth);
	width:100%;
	margin:8em auto;
	padding:0 2em;
}



@media all and (max-width: 1023px) {
	
	#container #content-in .article-header{
		margin-top:0;
	}
	#content_wrapper{
		margin:4em auto;
		padding:0 5%;
	}
}


/*------------------
 * contact form
 * --------------------*/

{
	
}