@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*** 全般共通設定 START ***/
/*背景透過*/
#main{
	background-color: rgba(0,0,0,0);
}
/* 画像を横方向にフルサイズで引き伸ばす */
.image-fix{
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.image-fix img{
	display: block;
	width: 100%;
	height: 150%;
}
/*h1設定*/
h1 {
	background-color: #e6fbff !important;
}
h1::before {
	border: solid 0px !important;
}
h1::after {
	border: solid 0px !important;
}
/*h2設定*/
h2 {
	margin-bottom: 20px !important;
	border-left: solid 12px #87cefa;
	box-shadow: 0px 0px 0px !important;
	background-color: rgba(0,0,0,0) !important;
}
/* 縦並び表示の設定 */
.reversebox {
	display: flex;
}
/*モバイルメニューを右側から展開*/
.navi-menu-content {
	right: 0;
	left:unset;
	-webkit-transform: translateX(105%);
	transform: translateX(105%);
}
/* 背景色設定(グレー) */
.background-gray{
	background-color: #f5f5f5 !important;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.background-gray > .wp-block-column{
	padding: 8em calc(3px + 160 * (100vw - 300px)/1000);
}
/* 背景色設定(グレー) ２カラム */
.background-gray-2{
	background-color: #f5f5f5 !important;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.background-gray-2 > .wp-block-column{
	padding: 8em calc(3px + 160 * (100vw - 300px)/1000) !important;
}
.background-gray-3{
	background-color: #f5f5f5 !important;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.background-gray-3 > .wp-block-column{
	padding: 0em calc(3px + 160 * (100vw - 300px)/1000) 8em;
}
/* タイトル非表示 */
.entry-title{
  display: none;
}
/* サービスのアイコン画像設定 */
.service-img:hover {
	opacity: 0.8;
}
/* ボタン設定 */
.s-button:hover {
	opacity: 0.8;
}
/*** 全般共通設定 END ***/

/*** フロントページの設定 START ***/
/* テキスト − 笑顔あふれる世界に私たちが出来ること */
.image-text-size-fix-top{
	font-size: 40px !important;
	font-weight: bold;
}
/* テキスト − ICTにおける技術革新が〜 */
.image-text-size-fix-top-2{
	position: absolute;
	padding: 0;
	top: 100%;
}
/* テキスト − 「出来る出来ないではなく」可能性の追求〜 */
.image-text-size-fix{
	font-size: 18px !important;
	font-weight: bold;
}
/* テキスト − 各都市や地域で出逢うアイディアや文化〜 */
/*.image-text-size-fix2 は使っていないかも？*/
.image-text-size-fix2, .image-text-size-fix-other{
	font-size: 16px !important;
	font-weight: bold;
}
/* 画像 − 笑顔あふれる世界に私たちが出来ること */
/* 画像 − 各都市や地域で出逢うアイディアや文化〜 */
/*.image-size-fix　は使っていないかも？*/
.image-size-fix, .image-size-fix-front, .image-size-fix-other{
	padding:0 0 calc(300/1000*180%) !important;
	min-height: 0 !important;
}
.image-size-fix .wp-block-cover__inner-container, .image-size-fix-front .wp-block-cover__inner-container{
	position: absolute;
	padding: 0;
	top: 15%;
}
.image-size-fix-other .wp-block-cover__inner-container{
	position: absolute;
	padding: 0;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}
/* 画像 − 事業領域・サービス、アイコン写真 */
.image-size-fix-service{
	padding:0 0 calc(400/1000*120%) !important;
	min-height: 0 !important;
}
.image-size-fix-service .wp-block-cover__inner-container{
	position: absolute;
	padding: 0;
	top: 15%;
}
.service-text{
	margin-left: 10% !important;
}
.service-ico{
	margin-right: 10% !important;
}
/* NEWS欄テーブル設定 */
.page-id-62 .container table tr {
	background-color: transparent;
}
/*** フロントページの設定 END ***/

/*** フロントページ以外の設定 START ***/
/* 画像 − トップ写真 */
.image-size-fix-top-other{
	padding:0 0 calc(2483/1240*25%) !important;
	min-height: 0 !important;
}
.image-size-fix-top-other .wp-block-cover__inner-container{
	position: absolute;
	padding: 0;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}
/*** フロントページ以外の設定 END ***/

/*** サービスページの設定 START ***/
/* 画像 − ECO推進事業写真 */
.image-size-fix-living {
	padding:0 0 calc(2475/1150 * 30%) !important;
	min-height: 0 !important;
}
.image-size-fix-living .wp-block-cover__inner-container{
	position: absolute;
	padding: 0;
	top: 5%;
	left: 1%;
}
/*** サービスページの設定 END ***/

/*** 企業情報ページの設定 START ***/
/* テーブル設定 */
.page-id-85 .container table{
	max-width: 850px;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1em auto 0;
}
.page-id-85 .container table tr {
	background-color: transparent;
	border-top: solid 1px #cecece !important;
}
/* 企業情報 h2設定 */
.page-id-85 h2{
	border-left: solid 0px;
	display: flex;
 	align-items: center; /* 垂直中心 */
 	justify-content: center; /* 水平中心 */
}
.page-id-85 h2::before{
	border-top: solid 2px #87cefa;
	content: "";
	width: 4em;
	margin-right: 1em;
}
.page-id-85 h2::after{
	border-top: solid 2px #87cefa;
	content: "";
    width: 4em;
	margin-left: 1em;
}
/*** 企業情報ページの設定 END ***/

/*** アクセスページの設定 START ***/
/* TEL、FAX囲い線 */
.page-id-90 p.has-text-align-center{
    padding: 0.75em 1em;
    margin: 0 3em;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
/*** アクセスページの設定 END ***/

/*** 採用情報ページの設定 START ***/
/* 各種項目の設定 */
.page-id-536 .recruit-title-top{
	margin-top: 0.5em !important;
	margin-bottom: 0.5em !important;
	margin-right: 2.0em !important;
}
.page-id-536 .recruit-title{
	margin: 3.0em 2.0em 0.5em !important;
}
.page-id-536 .recruit-text{
	margin: 0.5em 2.0em 3.0em !important;
}
/* 区切り設定 */
.page-id-536 .wp-block-separator{
	margin: 0.5em 1.5em !important;
	border: solid 1px #87cefa !important;
}
/*** 採用情報ページの設定 END ***/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*** 1340px以上 ***/
@media screen and (min-width: 1340px){
	/* 改行制御 */
	/* ※ページ内のテキストブロックに、spbrクラスを設定して画面サイズごとに改行を実行 */
	.spbr{
		display: none;
	}
}

/*** 1024px以上 ***/
@media screen and (min-width: 1024px){
	/* ヘッダーのロゴ位置を左端に調整 */
	.header-site-logo-image{
		position: absolute;
		top: 0px;
		left: 0px;
	}
}

/*** 1440px以下 ***/
@media screen and (max-width: 1440px){
	/* カバー画像や、カバー画像のテキスト調整 */
	.service-text{
		margin-left: 5% !important;
	}
	.service-ico{
		margin-right: 5% !important;
	}
	.image-size-fix-living {
		padding:0 0 calc(2475/1150*23%) !important;
		min-height: 0 !important;
	}
	.service-img {
		padding: 0 calc(180% / 20);
	}
}
/*** 1340px以下 ***/
@media screen and (max-width: 1340px){
	/* カバー画像や、カバー画像のテキスト調整 */
	.image-text-size-fix-top-2{
		font-size: 16px !important;
	}
	.service-img {
		padding: 0 calc(180% / 14);
	}
	.image-size-fix-front{
		padding:0 0 calc(500/1000*160%) !important;
		min-height: 0 !important;
	}
	.background-gray-2 > .wp-block-column{
		padding: 8em calc(3px + 160 * (50vw - 300px)/1000) !important;
	}
}

/*** 1160px以下 ***/
@media screen and (max-width: 1160px){
	/* カバー画像や、カバー画像のテキスト調整 */
	.service-img {
		padding: 0 calc(180% / 10);
	}
	.image-size-fix-front{
		padding:0 0 calc(500/1000*200%) !important;
		min-height: 0 !important;
	}
	.background-gray-2 > .wp-block-column{
		padding: 6em calc(3px + 160 * (40vw - 300px)/1000) !important;
	}
	.sponsorship-text{
		font-size: 16px !important;
	}
}

/*1024px以下*/
@media screen and (max-width: 1024px){
	/* カバー画像や、カバー画像のテキスト調整 */
	.image-text-size-fix-other {
		font-size: 14px !important;
		width: 30em;
    	text-align: center;
	}
	.service-img {
		padding: 0 calc(180% / 8);
	}
	.image-size-fix-front{
		padding:0 0 calc(500/1000*240%) !important;
		min-height: 0 !important;
	}
}

/*930px以下*/
@media screen and (max-width: 930px){
	/* カバー画像や、カバー画像のテキスト調整 */
	.service-img {
		padding: 0 calc(180% / 6.5);
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	/* ボタン設定 */
	.s-button-p {
 		justify-content: center !important; /* 水平中心 */
	}
	/* カバー画像や、カバー画像のテキスト調整 */
	.image-text-size-fix-top-container{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.image-text-size-fix-top-2{
		text-align: center;
	}
  	.image-text-size-fix-top, .image-text-size-fix{
		font-size: 18px !important;
	}
	.image-text-size-fix2, .image-text-size-fix-top-2{
		font-size: 12px !important;
	}
	.image-size-fix, .image-size-fix-other{
		padding:0 0 calc(500/1000*120%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-front{
		padding:0 0 calc(500/1000*180%) !important;
		min-height: 0 !important;
	}
	.image-size-fix .wp-block-cover__inner-container, .image-size-fix-front .wp-block-cover__inner-container{
		position: absolute;
		padding: 0;
		top: 15%;
	}
	.image-size-fix-service{
		padding:0 0 calc(500/1000*100%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-service .wp-block-cover__inner-container{
		position: absolute;
		padding: 0;
		top: 10%;
	}
	.image-size-fix-living {
		padding:0 0 calc(2475/1150*24%) !important;
		min-height: 0 !important;
	}
}

/*781px以下*/
@media screen and (max-width: 781px){
	/* ２カラム表示の縦表示順制御 */
	.reversebox {
		flex-direction: column;
 	}
	.order1 {
		order: 1;
	}
	.order2 {
		order: 2;
	}
	/* カバー画像や、カバー画像のテキスト調整 */
	.service-text{
		margin: 0% 5% !important;
	}
	.service-ico{
		margin: 0% 5% !important;
	}
	.image-size-fix-service{
		padding:0 0 calc(1000/1000*110%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-service .wp-block-cover__inner-container{
		position: absolute;
		padding: 0;
		top: 10%;
	}

	/** 採用情報ページの設定 **/
	/* 各種項目の設定 */
	.page-id-536 .recruit-title-top{
		text-align: center;
		margin: 1.0em 1.0em 0.5em !important;
	}
	.page-id-536 .recruit-title{
		text-align: center;
		margin: 4.0em 1.0em 0.5em !important;
	}
	.page-id-536 .recruit-text{
		text-align: center;
		margin: 0.5em 1.0em 4.0em !important;
	}

	/** 特殊改行の設定 **/
	.spbr{
		display: none;
	}

	/** サービスページの設定 **/
	/* 「サービス概要」のセンタリング */
	.service-overview{
		text-align: center;
	}
}

/*550px以下*/
@media screen and (max-width: 550px){
	/* カバー画像や、カバー画像のテキスト調整 */
	.image-size-fix-service{
		padding:0 0 calc(1100/1000*120%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-service .wp-block-cover__inner-container{
		position: absolute;
		padding: 0;
		top: 10%;
	}
	.image-text-size-fix-top-2{
		font-size: 14px !important;
	}
	.image-size-fix-front {
		padding:0 0 calc(600/1000*200%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-front .wp-block-cover__inner-container {
		position: absolute;
		padding: 0;
		top: 15%;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	/* カバー画像や、カバー画像のテキスト調整 */
	.image-text-size-fix-top{
		font-size: 18px !important;
	}
	.image-text-size-fix, .image-text-size-fix2{
		font-size: 14px !important;
	}
	.image-text-size-fix-other{
		font-size: 12px !important;
	}
	.image-size-fix, .image-size-fix-other{
		padding:0 0 calc(500/1000*150%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-front {
		padding:0 0 calc(600/1000*280%) !important;
		min-height: 0 !important;
	}
	.image-size-fix .wp-block-cover__inner-container, .image-size-fix-front .wp-block-cover__inner-container{
		position: absolute;
		padding: 0;
		top: 10%;
	}
	.image-size-fix2 .wp-block-cover__inner-container{
		position: absolute;
		padding: 0;
		top: 75%;
	}
	.image-size-fix-service{
		padding:0 0 calc(1100/1000*120%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-service .wp-block-cover__inner-container{
		position: absolute;
		padding: 0;
		top: 5%;
	}
	.service-img {
		padding: 0 calc(180% / 8);
	}
}

/*391px以下*/
@media screen and (max-width: 391px){
	/* h2のフォントサイズ調整 */
	h2 {
		font-size: 18px !important;
	}
	/* カバー画像や、カバー画像のテキスト調整 */
	.service-ico{
		margin: 0% 2% !important;
	}
	.image-text-size-fix-top{
		font-size: 16px !important;
	}
	.image-text-size-fix-top-2, .image-text-size-fix, .image-text-size-fix2, .image-text-size-fix-other{
		font-size: 12px !important;
	}
	.image-size-fix-service{
		padding:0 0 calc(1250/1000*120%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-service .wp-block-cover__inner-container{
		position: absolute;
		padding: 0;
		top: 5%;
	}
	.image-size-fix-front {
		padding:0 0 calc(600/1000*340%) !important;
		min-height: 0 !important;
	}
	.image-size-fix-front .wp-block-cover__inner-container {
		position: absolute;
		padding: 0;
		top: 15%;
	}
	.image-size-fix-living {
		padding:0 0 calc(2475/1150*40%) !important;
		min-height: 0 !important;
	}
}
/*320px以下*/
@media screen and (max-width: 320px){
	/* カバー画像や、カバー画像のテキスト調整 */
	.image-text-size-fix-top-2, .image-text-size-fix{
		font-size: 11px !important;
	}
}