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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
* { box-sizing: border-box; }
body {
  /*font-family:"Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
	font-family: 'Noto Sans JP', sans-serif;
	font-size:18px;
	-webkit-text-size-adjust: 100%;
	background-color: #F7EFDC;
	font-weight: 100;
}
body.fw-400 { font-weight: 200; }
/*.wrap { width: 960px; }*/
.fz-18px { font-size: 18px; }
#container {
  padding:0;
  margin: 0 auto;
}


#body{
  /*margin-top:15px;*/
	width: 100%;
}

#main .post {
	margin: 0px auto;
	max-width: 1200px;
}

#sidebar {
	float: left;
	width: 300px;
	margin-bottom: 30px;
}

.clear{ clear:both; }

/*===================================
    ヘッダー
===================================*/
.header-container { background-color: transparent; }
#header-in {
	position: relative;
	margin: auto;
	width: 100%;
	line-height: 1em;
}
.header { width: 100%; }

#header {
	position: relative;
	margin-bottom: 0px;
	width: 100%;
	/*min-width: 1200px;*/
	/*z-index: 0;*/
}
#header.other-page { height: auto; }
#header-in {
	position: relative;
	width: 100%;
	height: 110px;
	margin: 0px auto;
	box-sizing: border-box;
	background: rgba( 255, 255, 255, 0.8 );
	z-index: 20;
}
#header-box {
	display: flex;
	margin: 0px auto;
	max-width: 1200px;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
}
#header #header_left {
	width: 588px;
}
#header .site-name { padding: 0px; }
#header .site-name img { height: 60px; }


/************************************
** グローバルナビメニュー（menu）
************************************/
#navi {
	width: 600px;
}
#navi-in { width: 600px; }
#navi ul{
	position: relative;
	display: flex;
	margin:0;
	padding: 0px;
	width:100%;
	justify-content: space-between;
	align-items: center;
}

#navi ul > li{
	list-style:none;
	position: relative;
	width: 25%;
	text-align: center;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
}

#navi ul li a{
	font-size:18px;
	display: inline;
	padding: .3em .7em;
	color:#87796F;
	text-decoration: none;
	z-index:99;
}
#navi ul li a:hover { text-decoration: underline; }
.navi { background-color: transparent; }
.navi-in > ul li { line-height: 1em; }
.navi-in a { transition: none; background-color: transparent; }
.navi-in a:hover { transition: none; background-color: transparent; }
.navi .item-label {
	overflow: visible;
	text-overflow: inherit;
	white-space: normal;
}
.mobile-menu-button { display: none; }
.fa-2x {
    font-size: 2em;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/************************************
** トップ画像
************************************/
#top_image,
#top_image_mobi {
	width: 100%;
	margin: 0px auto;
	position: relative;
	z-index: 0;
}
#top-item-01 img,
#top-item-01_mobi img { vertical-align: bottom; }
#top-item-02,
#top-item-03,
#top-item-04,
#top-item-02_mobi,
#top-item-03_mobi,
#top-item-04_mobi { position: absolute; display: inline-block; z-index: 99; }
#top-item-02,
#top-item-02_mobi {
	margin-left: -440px;
	margin-top: -39.25px;
	max-width: 880px;
	height: 78.5px;
	top: 50%;
	left: 50%;
}
#top-item-03,
#top-item-04,
#top-item-03_mobi,
#top-item-04_mobi { width: 200px; height: 200px; }
#top-item-03,
#top-item-03_mobi { top: 10%; right: 35%; }
#top-item-04,
#top-item-04_mobi { bottom: 10%; left: 35%; }
#top-item-03 a,
#top-item-04 a,
#top-item-03_mobi a,
#top-item-04_mobi a {
	display: block;
	width: 200px;
	height: 200px;
	background: #FFFFFF;
	border-radius: 100px;
}
#top-item-03 a:hover img,
#top-item-03_mobi a:hover img { opacity: 0.7; }
#top-item-04 a:hover img,
#top-item-04_mobi a:hover img { opacity: 0.7; }

#top_image_mobi { display: none; }

/************************************
** コンテンツ
************************************/
.content { margin-top: 0px; }
#content { min-height: 70vh; }
#content-in { width: 100%; }
#main { margin: 0px auto; padding: 0px; width: 100%; background-color: transparent; box-sizing: border-box; }


/************************************
** トップページ
************************************/
#overview {
	margin: 0px auto;
	padding: 80px 30px;
	width: 100%;
	background: #4ECDC4;
	color: #FFFFFF;
}
#overview-box {
	max-width: 1200px;
	margin: 0px auto;
}
#overview-h1 { width: 100%; }
#overview-h1 h1{ margin: 30px auto; padding: 0px; color: #FFFFFF; font-weight: 100; font-size: 36px; text-align: center; }
#overview-h1 h1::before {
	content: "────";
	margin-right: 20px;
}
#overview-h1 h1::after {
	content: "────";
	margin-left: 20px;
}
#overview-txt { width: 100%; text-align: center; }
#overview-txt p { line-height: 1.8em; font-size: 18px; }
#sub-link {
	margin: 60px auto;
	width: 1200px;
	height: 188px;
	background: url("./images/top_img_1.svg"), url("./images/top_img_2.svg"), url("./images/top_img_3.svg");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center left, center center, center right;
}
#sub-link ul,
#sub-link li { margin: 0px; padding: 0px; }
#sub-link ul { width: 100%; list-style: none; }
#sub-link li { width: 500px; }
#sub-link li:first-child { float: left; text-align: right; padding-top: 29px; }
#sub-link li:last-child { float: right; text-align: left; padding-top: 13px; }
.grow-rotate {
    display: inline-block;
    transition-duration: .3s;
    transition-property: transform;

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover {
	transform: scale(1.1) rotate(4deg);
}


#news {
	padding: 80px 0px;
	width: 100%;
}
#news h1{ margin: 30px 0px; padding: 0px; color: #000000; font-weight: 100; font-size: 36px; text-align: center; }
#news h1::before {
	content: "────";
	margin-right: 20px;
}
#news h1::after {
	content: "────";
	margin-left: 20px;
}
#news-box {
	margin: 0px auto;
	max-width: 1200px;
}
#news-list {
	margin: 0px auto;
	max-width: 600px;
}
#news-list .white-box {
	margin: 0px auto;
	padding: 20px 0px;
	width: 100%;
}
#news dl { display: table-row; }
#news dt,
#news dd { display: table-cell; padding: 0px 30px; }
#news dl,
#news dt,
#news dd { border: none; border-collapse: collapse; }
#news dt { font-weight: 200; }
#news a {
	text-decoration: none;
	color: #000000;
}
#news a:hover { text-decoration: underline; }

#ex-link {
	padding: 80px 0px;
	width: 100%;
}
#ex-link ul {
	margin: 0px auto;
	padding: 0px;
	list-style: none;
	max-width: 1200px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
#ex-link ul li {
	position: relative;
	margin: 0px;
	pading: 0px;
	width: 265px;
	text-align: center;
}
#ex-link a {
	display: inline;
	margin: 0px auto;
	background: transparent;
}
#ex-link a:hover img { opacity: 0.7; }


/************************************
** フッターナビメニュー
************************************/
#footer {
	padding-top: 40px;
	padding-bottom: 20px;
	width: 100%;
	background-color: transparent;
}
.credit { margin-top: 0px; padding: 10px 5px; text-align: center; }
.credit a { text-decoration: underline; color: #000000; }

#footer_box {
	margin: 20px auto 0px;
	display: flex;
	max-width: 530px;
	line-height: 1.8em;
	justify-content: space-between;
	align-items: center;
}
#footer_logo {
	width: 115px;
}
#footer_address {
	padding-left: 20px;
	width: 415px;
}
#footer_address p { margin: 0px; padding: 6px 0px; font-size: 18px; }
#footer_address p#footer_reheart { font-size: 22px; }
#footer_address { font-size: 18px; font-style: normal; }
#footer_address address { font-style: normal; }

/***************************
** About
****************************/
.article h1{ padding: 60px 0px 40px; color: #556270; font-weight: 100; font-size: 36px; text-align: center; }
.article h1::before {
	content: "────";
	margin-right: 20px;
}
.article h1::after {
	content: "────";
	margin-left: 20px;
}
#about-box { padding: 0px 10px 60px; text-align: center; font-size: 18px; }
#about-box p { line-height: 1.8em; }
#philo-box, #policy-box { width: 100%; background: #556270; color: #FFFFFF; }
#policy-box { background: none; color: #000000; }
#philo-content,
#policy-content { padding: 60px 10px; max-width: 1200px; margin: 0px auto; }
#philo-box h2,
#policy-box h2 {
	margin: 0px;
	padding: 0px;
	width: 100%;
	border: none;
	font-size: 30px;
	font-weight: 200;
	text-align: center;
	color: #FFFFFF;
	background-color: transparent;
}
#policy-box h2 { color: #000000; }
#philo-box ol, #philo-box li,
#policy-box ol, #policy-box li { margin: 0px; padding: 0px; list-style: none; text-align: center; }
#philo-box ol li,
#policy-box ol li { margin-top: 40px; }
#philo-box ol li:first-child::before,
#philo-box ol li:nth-child(2)::before,
#philo-box ol li:last-child::before,
#policy-box ol li:first-child::before,
#policy-box ol li:nth-child(2)::before,
#policy-box ol li:last-child::before {
	content: "1";
	display: block;
	margin: 0px auto 10px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	font-size: 24px;
	font-weight: 400;
	text-align: center;
	color: #556270;
	background: #FFFFFF;
	border-radius: 30px;
}
#policy-box ol li:first-child::before,
#policy-box ol li:nth-child(2)::before,
#policy-box ol li:last-child::before {
	color: #556270;
	background: none;
	border: 1px #556270 solid;
}
#philo-box ol li:nth-child(2)::before { content: "2"; }
#philo-box ol li:last-child::before { content: "3"; }
#policy-box ol li:nth-child(2)::before { content: "2"; }
#policy-box ol li:last-child::before { content: "3"; }


/***************************
** 会社概要
****************************/
.profile-table { margin: 0px auto 60px; max-width: 700px; }
.profile-table dl,
.profile-table dt,
.profile-table dd {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
.profile-table dl { margin-bottom: 4px; }
.profile-table dt {	margin-right: 4px; }
.profile-table dt,
.profile-table dd { padding: 8px 10px; }
.profile-table dl {
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
}
.profile-table dt { color: #FFFFFF; font-weight: normal; width: 200px; }
.profile-table dd { background: #FFFFFF; width: 496px; }

#profile-orafu.profile-table dt { background: #556270; }
#profile-eiru.profile-table dt { background: #FF931E; }
#profile-reheart.profile-table dt { background: #7AC943; }
#profile-piece.profile-table dt { background: #3FA9F5; }
#profile-terrace.profile-table dt { background: #8CCBF9; }


/***************************
** アクセスページの地図装飾
****************************/
#access-box {
	margin: 0px auto;
	max-width: 1200px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
#access-cell {
	margin-bottom: 50px;
	width: 590px;
}
#access-cell h2 {
	margin: 0px 0px 20px;
	padding: 0px;
	width: 100%;
	height: 60px;
	background-color: transparent;
}
#access-cell h2 img { height: 60px; }


/***************************
** 問い合わせページの装飾
****************************/
#contact { margin: 0px auto; max-width: 730px; }
#contact table { width: 100%; }
#contact table tr:nth-of-type(2n+1) { background-color: transparent; }
#contact table th { text-align: right; width: 160px; background-color: #556270; color: #FFFFFF; font-weight: 100; }
#contact table th,
#contact table td { padding: 4px 10px; }
#contact table td { background-color: transparent; }
#contact #button-area { text-align: center; }
#contact .err { font-weight: bold; color: #DD0000; }
#contact table,
#contact th,
#contact td {
	border:none;
	border-collapse: separate;
	border-spacing: 4px;
}
#contact input.half { width: 50%; }
#contact input.width-30 { width: 30%; }
#contact textarea { height: 300px; resize: vertical; }
#contact input[type="submit"] {
	width: auto;
	background: #FF6B6B;
	border: none;
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 400;
	padding: 18px 24px;
	border-radius: 10px;
}
#contact input[type="button"] {
	font-size: 18px;
	font-weight: 400;
	padding: 18px 12px;
	border-radius: 10px;
	border: 1px #ccc solid;
	cursor: pointer;
}
#to_pp { margin-top: 60px; text-align: center; }


/***************************
** プライバシーポリシー
****************************/
#policy-contents { margin: 30px auto; max-width: 1200px; }
#policy-contents h2 {
	margin: 40px 0px 20px;
	padding: 14px 20px;
	font-size: 26px;
	font-weight: normal;
	background-color: transparent;
	border-left: 2px #556270 solid;
	color: #556270;
}


/***************************
** 個別記事
****************************/


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width: 1199px){
	#header #header_left { width: 33%; padding: 0px 10px; }
	#top-item-03,
	#top-item-04,
	#top-item-03_mobi,
	#top-item-04_mobi { width: 150px; height: 150px; }
	#top-item-03,
	#top-item-03_mobi { top: 5%; right: 35%; }
	#top-item-04,
	#top-item-04_mobi { bottom: 5%; left: 35%; }
	#top-item-03 a,
	#top-item-04 a,
	#top-item-03_mobi a,
	#top-item-04_mobi a {
		width: 150px;
		height: 150px;
	}
}
/*1130px以下*/
@media screen and (max-width: 1130px){
}
/*1100px以下*/
@media screen and (max-width: 1099px){
}
/*1023px以下*/
@media screen and (max-width: 1023px){
}
/*834px以下*/
@media screen and (max-width: 834px){
	#top_image { display: none; }
	#top_image_mobi { display: block; }
	#top-item-01_mobi img { width: 100%; }
	#navi { display: none; background-color: #fff; }
	#navi {
		position: absolute;
		top: 100%;
		left: 0px;
		width: 100%;
	}
	#navi-in { width: 100%; }
	.navi-in > ul li { height: auto; }
	#navi ul li { display: block; width: 100%; }
	#navi ul li a {
		display: block;
		width: 100%;
		padding: 20px 10px;
		text-align: center;
		color: #4ECDC4;
		border-bottom: solid 1px #DDDDDD;
	}
	.mobile-menu-button {
		display: inline-block;
		position: absolute;
		top: 20px;
		right: 20px;
	}
	#top-item-03_mobi, #top-item-04_mobi { width: 20%; height: auto; }
	#top-item-03_mobi a, #top-item-04_mobi a { display: inline-block; width:100%; height: auto; border-radius: 0px; background: transparent; }
	#top-item-03_mobi { top: auto; bottom: 2%; right: 28%; left: auto; }
	#top-item-04_mobi { top: 36%; bottom: auto; right: 28%; left: auto; }
	
	#header-in { padding: 20px; height: auto; }
	#header #header_left { width: 100%; }
	

	/************************************
	** トップページ
	************************************/
	#overview-h1 h1::before {
		content: "";
		margin-right: 0px;
	}
	#overview-h1 h1::after {
		content: "";
		margin-left: 0px;
	}
	#news h1::before {
		content: "";
		margin-right: 0px;
	}
	#news h1::after {
		content: "";
		margin-left: 0px;
	}
	#news dl { display: block; }
	#news dt,
	#news dd { display: block; padding: 0px 30px; }
	#news dt { font-weight: 400; }
	#news dd { margin: 0px; }
	#news a {
		text-decoration: underline;
		color: #000000;
	}
	#ex-link {
		padding: 80px 10px;
	}

	/************************************
	** フッターナビメニュー
	************************************/
	#footer_box { flex-wrap: wrap; }
	#footer_logo { margin: 0px auto; max-width: 115px; }
	#footer_address { margin: 0px auto; max-width: 415px; width: auto; }
	#footer_address p { text-align: center; }

	/***************************
	** About
	****************************/
	.article h1::before {
		content: "";
		margin-right: 0px;
	}
	.article h1::after {
		content: "";
		margin-left: 0px;
	}

	/***************************
	** 会社概要
	****************************/
	.profile-table dl {	padding: 0px 20px; }
	.profile-table dt { width: 100%; }
	.profile-table dd { width: 100%; }

	/***************************
	** アクセスページの地図装飾
	****************************/
	#access-box { padding: 0px 20px; }
	#access-cell h2 img { height: 60px; }

	/***************************
	** 問い合わせページの装飾
	****************************/
	#contact table { display: block; max-width: 100%; padding: 0px 20px; }
	#contact tbody,
	#contact tr { display: block; width: 100%; margin-bottom: 20px; }
	#contact table th {  display: block; text-align: left; width: 100%; padding: 4px 10px; }
	#contact table td { display: block; width: 100%; padding: 4px 0px; }
	#contact #button-area { text-align: center; padding: 20px; }
	#contact input.half { width: 100%; }
	#contact input.width-30 { width: 100%; }
	#contact input[type="submit"] { width: 100%; margin-bottom: 30px; }
	#contact input[type="button"] { width: 100%; margin-bottom: 30px; }
	#contact p { padding: 10px 20px; }

	/***************************
	** プライバシーポリシー
	****************************/
	#policy-contents { padding: 0px 20px; }
}
/*480px以下*/
@media screen and (max-width: 480px){
}