@charset "UTF-8";
/*
Theme Name: 1os1C
Theme URI: https://web.1os.co.jp/
Author: One OS inc.
Author URI: https://1os.co.jp/
Description: このテーマは株式会社ワンオーエス(サービス名：クオリティWebデザイン)によって作成されました。高品質でカスタマイズ可能なデザインを提供し、ユーザーに素晴らしいエクスペリエンスをもたらします。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 1os_mc
Tags: レスポンシブ, 1カラム, 翻訳対応
*/

/**********  カスタマイズCSS **********/

#header_wrapper{
	background:rgba(255,255,255, .8);
	border-bottom:4px solid rgb(125,191,116)
}
.scroll #header_wrapper{
	backdrop-filter: blur(6px);
}
#header_title_wrapper{max-width:192px;}

/*==================================================
 TOP
==================================================*/

.top_section:nth-child(even) {
	padding-top:.5em;
	padding-bottom:.5em;
	background: rgb(225,242,222);
}
.section_wrap .title_h2{
	margin-top:0;
}
.section_label {
	display: inline-block;
	margin: 0 auto .75rem;
	padding: .35rem .9rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: #7dbf74;
	border:1px solid #fff;
	border-radius: .4em;
}
.section_label.caution_label{
	background: #dd3333;
}

/* WORRY */

.worry_grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 2rem;
}
.worry_card {
	padding: 1.5rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
	font-size: 1rem;
	font-weight: 500;
}

/* SERVICE */

.service_grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 2rem;
}
.service_card {
	display: flex;
	flex-direction: column;
	padding: 1.2em 1.4em 1em;
	background: #fff;
	border-radius: 1.25rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.service_card p {
	flex: 1;
}
.more_link {
	border-radius: 999px;
	background: #ef8f72;
	color: #fff;
	text-decoration: none;
}

/* REASON */

.reason_grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 2rem;
}
.reason_card {
	padding: 1em;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.reason_card h3 {
	margin: 0 0 1rem;
}

/* FLOW */

.flow_list {
	counter-reset: flow;
	display: grid;
	gap: 1rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}
.flow_list li {
	position: relative;
	padding: 5rem 1.5rem 1.5rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.flow_list li::before {
	counter-increment: flow;
	content: counter(flow);
	position: absolute;
	left: 1.5rem;
	top: 1.5rem;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #7dbf74;
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.flow_list h3 {
	margin: 0 0 .75rem;
}

/* FAQ */

.faq_list {
	margin-top: 2rem;
}
.faq_list details {
	margin-bottom: 1rem;
	background: #fff;
	border-radius: .8rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
	overflow: hidden;
}
.faq_list summary {
	padding: 1.25rem 1.5rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.faq_list summary::-webkit-details-marker {
	display: none;
}
.faq_list details p {
	padding: 0 1.5rem 1.5rem;
	margin: 0;
}

/* FAQ */

.faq_list {
	margin-top: 2rem;
}
.faq_list details {
	margin-bottom: 1rem;
	background: #fff;
	border-radius: .8rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.faq_list summary {
	position: relative;
	padding: 1.25rem 4.5rem 1.25rem 1.5rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.faq_list summary::-webkit-details-marker {
	display: none;
}
.faq_list summary::before,
.faq_list summary::after {
	content: "";
	position: absolute;
	right: 1.5rem;
	top: 50%;
	width: 18px;
	height: 2px;
	background: #5c965b;
	transition: transform .3s ease;
}
.faq_list summary::before {
	transform: translateY(-50%);
}
.faq_list summary::after {
	transform: translateY(-50%) rotate(90deg);
}
.faq_list details[open] summary::after {
	transform: translateY(-50%) rotate(0);
}

/* アニメーション対象 */

.faq_list .faq_content {
	overflow: hidden;
	height: 0;
}
.faq_list .faq_content p {
	margin: 0;
	padding: 0 1.5rem .5rem;
}

/* 開いたら－にする */

.faq_list details[open] summary::after {
	transform: translateY(-50%) rotate(0deg);
}

.faq_list details p {
	padding: 0 1.5rem 1.5rem;
	margin: 0;
}

/*==================================================
 SERVICE COMMON
==================================================*/

.service_section:nth-child(even) {
	padding-top: .5em;
	padding-bottom: .5em;
	background: rgb(225,242,222);
}
.service_section .title_h2 {
	margin-top: 0;
}
.service_lead {
	max-width: 820px;
	margin: 0 auto;
	line-height: 2;
}
.service_text_box {
	width: 100%;
	padding: 1.5rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.service_text_box p:first-child {
	margin-top: 0;
}
.service_text_box p:last-child {
	margin-bottom: 0;
}
.service_list {
	counter-reset: service;
	display: grid;
	gap: 1rem;
	width: 100%;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}
.service_list li {
	position: relative;
	padding: 1.25rem 1.25rem 1.25rem 4.5rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.service_list li::before {
	counter-increment: service;
	content: counter(service);
	position: absolute;
	left: 1.25rem;
	top: 50%;
	width: 36px;
	height: 36px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #7dbf74;
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.service_contact_box {
	width: 100%;
	padding: 2rem 1.5rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.service_contact_box .more_link {
	display: inline-block;
	margin-top: 1rem;
	padding: .75em 2em;
}

.service_content_wrap {
	width: 100%;
	display: grid;
	gap: 2rem;
	margin-top: 2rem;
}
.service_content_box {
	width: 100%;
}
.service_content_box .title_h3 {
	margin: 0 0 1rem;
	text-align: center;
}

/*==================================================
 COMPANY
==================================================*/

.company_table_wrap {
	width: 100%;
}
.company_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.company_table th,
.company_table td {
	display: block;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(0,0,0,.08);
	text-align: left;
	line-height: 1.8;
}
.company_table th {
	background: rgb(225,242,222);
	font-weight: 700;
}
.company_table tr:last-child th,
.company_table tr:last-child td {
	border-bottom: none;
}
.company_table a {
	color: inherit;
	text-decoration: underline;
}
.office_grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	width: 100%;
}
.office_card {
	padding: 1.2em;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 0 12px rgba(0,0,0,.15);
}
.office_card .company_table {
	margin-top: 1rem;
	box-shadow: none;
	border: 1px solid rgba(0,0,0,.08);
}

/*==================================================
 Tablet
==================================================*/

@media (min-width:768px) {
	.worry_grid {
		grid-template-columns: repeat(2,1fr);
		gap: 1.5rem;
	}

	.company_table th,
	.company_table td {
		display: table-cell;
	}
	.company_table th {
		width: 180px;
	}

}

/*==================================================
 Desktop
==================================================*/

@media (min-width:1024px) {

	#header_title_wrapper{max-width:228px;}

	a.more_link:hover {
		background: #5c965b;
	}
	.service_grid,
	.reason_grid {
		grid-template-columns: repeat(3,1fr);
		gap: 2rem;
	}
	.flow_list li {
		padding: 2rem 2rem 2rem 6rem;
	}
	.flow_list li::before {
		left: 2rem;
		top: 2rem;
	}

	.service_text_box {
		padding: 2rem;
	}
	.service_list {
		grid-template-columns: repeat(2,1fr);
		gap: 1.25rem;
	}
	.service_contact_box {
		padding: 3rem;
	}

	.service_content_wrap {
		grid-template-columns: repeat(2,1fr);
		align-items: start;
	}

	.office_grid {
		grid-template-columns: repeat(2,1fr);
		gap: 2rem;
	}
	.office_card {
		padding: 2rem;
	}

}