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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

:root{
	--dark-green: #0E7B7B;
	--light-green:#2CCBCB;
}

*{
	font-family: "Hiragino Sans";
	color: #000000;
	font-size: 16px;
}

img{
	max-width: 100%;
}

li {
	list-style: none;
}

.break{
	display: none;
}

a {
	text-decoration: none;
}

header{
	display: block;
}

.heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 8px auto;
	background-color: #ffffff;
	max-width: 960px;

}

.logo {
	width: 400px;
}

.logo a {
	display: block;
	padding: 8px;
}

.nav-list {
	display: flex;
	background-color: #ffffff;
	text-align: right;
	width: 100%;
	height: 40px;
	margin: 10px auto;
}

.nav-list li{
	margin: 10px 0;
	background-color: #ffffff;
	text-align: right;
	font-size: 0.875rem;
	padding-right:20px;
}

body{
	background-color: #ffffff;
	margin: 0;
}

.mainvisual{
	width: 100%;
	height: 480px;
	overflow: hidden;
	position: relative;
	background-image: url(https://is-kanri.com/wp-content/themes/cocoon-child-master/assets/img/mainvisual2_white.png);
	background-size: cover;
	width: 100%;
}

.mainvisual h2{
	vertical-align: middle;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-family: 'Shippori Mincho', serif;
	font-size: 2rem;
	text-align: center;
	text-wrap: nowrap;
	line-height: 200%;

}

.mainvisual .big{
	font-family: 'Shippori Mincho', serif;
	font-size: 1.3em;
	vertical-align: middle;
}

h1 {
	background-color: white;
	text-align: center;
	font-size: 2rem;
}




.intro{
	margin: 64px auto 32px;
	max-width: 936px;
}

.intro .intro_content{
	display: flex;
	justify-content: center;
	height: 200px;
}

.intro .intro_content img{
	height: 100%;
	width: auto;
}

.intro_text{
	padding: 0 0 0 32px;
}

.intro_text li{
	margin: 8px 0;
	font-size: 1.25rem;
}

.intro_text li::before{
	content: url(https://is-kanri.com/wp-content/themes/cocoon-child-master/assets/img/check.svg);
	display: inline-block;
	margin-right: 16px;
	vertical-align: middle;
}

.contact{
	margin: 32px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.button{
	display: inline-block;
	padding: 16px 100px;
	font-size: 1.75rem;
	background-color: var(--dark-green);
	border: none;
	border-radius: 47px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	margin: 8px auto;
	transition: box-shadow 0.3s ease, transform 0.1s ease;
}

.button:hover{
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.button:active{
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translateY(2px);
}


.button span{
	color: white;
	vertical-align: middle;
	font-size: 2rem;
}

.button::before{
	content: url(https://is-kanri.com/wp-content/themes/cocoon-child-master/assets/img/envelope.svg);
	vertical-align: middle;
}


.appeal{
	margin: 64px auto;
	max-width: 936px;
}

.appeal .appeal_point{
	display: flex;
	justify-content: space-around;
}

.appeal .appeal_point img{
	border-radius: 50%;
	width: 200px;
	height: 200px;
	object-fit: cover;
}

.appeal .appeal_point h2{
	width: 200px;
	font-size: 1.25rem;
	text-align: center;
}

.gt{
	margin: 64px auto;
	max-width: 936px;
}

.green_title{
	text-align: left;
}

.green_title::before{
	content: "";
	display: inline-block;
	width: 24px;
	height: 48px;
	background-color: var(--light-green);
	margin-right: 32px;
	vertical-align: middle;
}

.service{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 64px auto;
	max-width: 936px;
}

.service .service_content{
	width:30%;
	overflow: hidden;
	margin: 16px 0;
}

.service .service_content:last-child{
	visibility: hidden;
}

.service .service_content img{
	width:100%;
	height: 160px;
	object-fit: cover;
	border-radius: 16px;
}

.service .service_content h2{
	margin: 16px 0 8px;
	font-size: 1.4rem;
}

.service .service_content p{
	margin: 8px 0;
}

.company{
	margin: 64px auto;
	max-width: 936px;
}

.company table{
	width: 100%;
	border-collapse: collapse;
}

.company table th, .company table td{
	text-align: left;
	padding:16px;
	vertical-align: top;
	border: 2px solid transparent;
}

.cm1 table th{
	border-right-color: var(--light-green);
}

.company table td{
	padding-left: 32px;
}

.member{
	margin: 64px auto;
	max-width: 936px;
	display: flex;
}

.member img{
	width: 40%;
	height: auto;
	object-fit: cover;
	margin: 16px;
}

.member table{
	width: 100%;
	height: auto;
	border-collapse: collapse;
}

.member table th, .member table td{
	text-align: left;
	padding:16px;
	vertical-align: top;
	border: 2px solid transparent;
	border-bottom-color: var(--light-green);
	font-size: 1rem;
}

.member table .name{
	font-size: 2rem;
	font-weight: normal;
}

.member table tbody th{
	width: 20%;
}

.member table tbody tr:last-child td,.member table tbody tr:last-child th{
	border-bottom: none;
}

.information{
	margin: 64px auto;
	max-width: 936px;

}

.information .info_list{
	text-align: right;
	color: var(--dark-green);
}

.information .info_container{
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 16px;
}

.information .info_container p{
	display: inline-block;
	margin-bottom: 0;

}


.information hr{
	margin-top: 0;
}

.contact_all{
	margin: 64px auto;
	width: 648px;
	height: auto;
	padding: 16px;
	border: 2px solid grey;
	border-radius: 16px;
	display: flex;
	align-items: center;
	flex-direction: column;
	font-size: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.contact_all p{
	margin: 8px;
}

.contact_all .alarm{
	position: relative;
	font-size: 1.5rem;
	color: var(--dark-green);
	vertical-align: middle;
	text-align: center;
}

.contact_all .alarm::before{
	position: absolute;
	content: url(https://is-kanri.com/wp-content/themes/cocoon-child-master/assets/img/alarm_left.svg);
	vertical-align: middle;
	left: -32px;
}

.contact_all .alarm::after{
	position: absolute;
	content: url(https://is-kanri.com/wp-content/themes/cocoon-child-master/assets/img/alarm_right.svg);
	vertical-align: middle;
	right: -32px;
}

.contact_all .phone{
	position: relative;
}

.contact_all .first{
	font-size: 1.4rem;
	width: 95%;
	position: relative;
	color: var(--dark-green);
	vertical-align: middle;
	text-align: center;
}

.contact_all .phone::before{
	position: absolute;
	content: url(https://is-kanri.com/wp-content/themes/cocoon-child-master/assets/img/phone.svg);
	vertical-align: middle;
	left:-50px;
}


.information .info_container p:nth-child(2){
	color: grey;
}

footer {
	width: 100%;
	text-align: center;
	font-size: 0.5rem;
	padding: 24px 0 8px;
	background-color: #dddddd;
}

footer .nav_footer{
	display: flex;
	justify-content: center;
	padding:0;
}

footer .nav_footer li{
	padding: 8px 16px;
}
footer .nav_qr{
	text-align:center;
}
footer .nav_qr img{
	max-width:100px;
	margin: 10px auto 20px;
}



.green_block{
	background-color: var(--dark-green);
	padding: 28px 0;
	width: 100%;
	text-align: center;
}
.green_block p{
	color: white;
	font-size: 3rem;
}

.wid{
	margin: 16px auto;
	max-width: 936px;
}

.contact_form{
	margin: 64px auto;
}

.contact_form form{
	width: 100%;
}

.contact_form label{
	display: block;
	margin: 16px 0 8px;
}

.contact_form label .req{
	color: red;
}

.contact_form input,.contact_form textarea{
	display: block;
	width: 99%;
}

.contact_form .line{
	display: inline-block;
	vertical-align: middle;
	width: auto;
}

.contact_form button{
	display: block;
	margin: 32px auto 64px;
	background-color: var(--dark-green);
	border: none;
	border-radius: 47px;
	padding: 16px 128px;
	font-size: 2rem;
	color: white;
	cursor:pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.3s ease, transform 0.1s ease;
}

.contact_form button:hover{
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.contact_form button:active{
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translateY(2px);
}

.moji_wrap{
	display: flex;
	flex-direction: column;
}

footer p{
	font-size: 0.8rem;
}

@media screen and (max-width:480px) {
	.heading{
		flex-direction: column;
		justify-content: center;
	}

	.heading .logo{
		width: 100%;
	}

	.heading .nav-list, .intro_text{
		padding-inline-start: 0;
	}

	.mainvisual{
		height: 30vh;
	}

	.mainvisual h2{
		font-size: 1.4rem;
	}

	.break{
		display: inline;
		content: "\A";
	}

	.intro{
		margin: 16px auto 16px;
	}

	h1{
		font-size: 1.5rem;
	}

	.intro .intro_content, .intro{
		flex-direction: column;
		height: auto;
	}

	.intro .intro_content img{
		height: 20vh;
		width: auto;
		object-fit: contain;
		display: block;
	}

	.intro{
		margin: 0 16px;
	}

	.intro_text li{
		font-size:1rem;
	}

	.button span{
		font-size: 1.2rem;
	}

	.button{
		padding: 8px 56px 12px;
	}

	.contact{
		margin: 16px;
	}

	.appeal{
		margin: 32px 16px;
	}

	.appeal_point{
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.appeal .appeal_point img{
		width: 136px;
		height: 136px;
	}

	.appeal .point{
		display: flex;
		flex-direction: row;
		gap:16px;
		align-items: center;
	}

	.appeal .appeal_point h2{
		width: auto;
		font-size: 1rem;
	}

	.gt{
		margin: 32px 8px 16px;
	}

	.gt h1{
		margin: 0;
	}

	.service{
		flex-direction: column;
		margin: 16px 8px;
	}

	.service .service_content{
		width: 100%;
		display: flex;
		gap: 16px;
	}

	.service .service_content img{
		width: 35%;
	}

	.service .service_content p{
		font-size: 1rem;
		margin: 0;
	}

	.service .service_content h2{
		margin: 0;
		font-size: 1rem;
	}

	.moji_wrap{
		gap: 8px;
	}

	.service .service_content:last-child{
		display: none;
	}

	.wid{
		margin: 16px 16px;
	}

	.company, .member{
		margin: 16px 8px;
	}

	.information{
		margin: 16px 16px;
	}

	.company table th, .company table td{
		font-size: 0.8rem;
		padding: 8px;
	}

	.contact_all{
		margin: 32px auto;
		width: 92%;
	}

	.contact_all .button{
		padding: 8px 48px 12px;
	}

	.information .info_container p{
		font-size: 0.8rem;

	}

	footer{
		padding: 16px auto;
		width: 100%;
	}

	footer img{
		width: 70%;
		object-fit: contain;
		margin: 0 auto;
	}

	footer .nav_footer li{
		padding: 8px;
	}

	footer .nav_footer li a{
		font-size: 0.8rem;
	}

	footer p{
		font-size: 0.5rem;
	}

	.information a p{
		font-size: 0.8rem;
	}

	.member table th, .member table td{
		font-size:0.8rem;
		padding: 6px;
	}

	.member table .name{
		font-size: 1.2rem;
	}

	.contact_all .first{
		font-size: 1rem;
	}
	.intro_text{
		margin-block-end:0;
	}

	.member{
		flex-direction: column;
		align-items: center;
		margin: 16px;
	}
	.member img{
		width: 70%;
		height: 40vh;
		object-fit: cover;
		margin:0 0 8px 0;
	}

	.member .item2{
		margin-top: 16px;
	}

	.item1{
		order:2;
	}
	.item2{
		order:1;
	}

	.crumbs a{
		font-size: 0.8rem;
	}

	.green_block{
		height: 14vh;
		padding: 2vh 0;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.green_block p{
		font-size: 2rem;
	}

	.contact_form button{
		font-size: 1.6rem;
		padding: 12px 128px;
	}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
	/*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く*/
}