@charset "utf-8";
/* CSS Document */
@import url("style.css");
ul.img{display: flex;justify-content: center;}
ul.img li{margin: 5px;}
ul.img li img{height: 250px;}
#whats {
	background: #f8f8f8;
}
#whats hr{margin: 3rem 0;border: solid #ccc;border-width: 0 0 1px;}
#whats p{}
#whats p b{
    color: #333;
    font-weight: bold;
}
#whats img{
    width: 800px;
    margin: auto;
    display: table;
    /* background: #fff; */
}
#whats dl{
}
#whats dl dt{
    color: #333;
    font-weight: bold;
}
#whats dl dt:before{
	content: "・"
}
#whats dl dd{
    margin: 0 0 1rem 1rem;
}
#whats table {
    border: solid #09f;
    border-width: 1px 0 0 1px;
    width: 800px;
    margin: auto;
    background: #fff;
}
#whats table tr {}
#whats table th {
    background: #eaf6fd;
    border: solid #09f;
    border-width: 0 1px 1px 0;
    padding: 10px;
    text-align: center;
    font-weight: 600;
}
#whats table td {
    border: solid #09f;
    border-width: 0 1px 1px 0;
    padding: 10px;
    text-align: center;
}
#flow{}
#flow p{}
#flow p b{
    color: #333;
    font-weight: bold;
}
#flow p + img{
    width: 800px;
    display: table;
    margin: auto;
}
#flow ol{
    list-style: decimal;
    /* font-size: 15px; */
    margin: 40px 0 0 40px;
}
#flow ol li{
    margin: 0 0 1.5rem;
}
#flow ol li::marker{
    color: #09f;
    font-size: 32px;
    font-weight: bold;
}
#flow ol li b{
    color: #09f;
    font-weight: bold;
    font-size: 24px;
}
#flow ol li span{color: #333;font-weight: bold;display: block;}
#support{
    background: #f8f8f8;
}
#support h2{
    margin: 0;
}
#support dl{
    counter-reset: num;
    font-size: 15px;
    margin-left: 40px;
}
#support dl dt{
    position: relative;
    font-weight: 700;
    font-size: 24px;
}
#support dl dt:before {
	counter-increment: num;
	content: "こだわり"counter(num)"\A";
	color: #09f;
	font-size: 30px;
	font-weight: 800;
	white-space: pre;
	margin-left: -40px;
}
#support dl dd{
    margin: 0 0 3rem;
}
#support dl dd p{}
#support dl dd p span{
    color: #333;
    font-weight: bold;
    display: block;
    margin: 1rem 0 0;
}
#support dl dd > img{height: 300px;float: right;margin: 0 0 0 20px;}
#faq{}
/* Acordeon styles */
.faq_tab {
	position: relative;
	margin: 0 1rem 5px;
	/* width: 100%; */
	/* color: #fff; */
	overflow: hidden;
	font-size: 15px;
}
.faq_tab input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}
.faq_tab label {
	position: relative;
	display: block;
	padding: 1em 3em 1em 1em;
	background: #eaf6fd;
	font-weight: 500;
	/* line-height: 3; */
	cursor: pointer;
	transition:.5s;
	border: solid 1px #09f;
}
.faq_tab label:hover {
	opacity:.5;
}
.faq_tab .answer {
	max-height: 0;
	overflow: hidden;
	background: #fff;
	transition: max-height .3s;
	margin: 2px 0 0;
}
.faq_tab .answer-cnt {
	margin: 1em 1em 3em;
	color: #666;
}
/* :checked */
.faq_tab input:checked ~ .answer {
	max-height: 20em;
}
/* Icon */
.faq_tab label::after {
	position: absolute;
	right: 1rem;
	top: 0;
	bottom: 0;
	margin: auto;
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-align: center;
	transition: all .3s;
	transform: rotate(-45deg);
}
.faq_tab input[type=checkbox] + label::after {
	content: "×";
}
.faq_tab input[type=checkbox]:checked + label::after {
	transform: rotate(0deg);
}
@media (max-width: 768px) {
ul.img{
    justify-content: flex-start;
}
ul.img li{}
ul.img li img{
    height: 130px;
}
#whats {}
#whats hr{}
#whats p{}
#whats p b{}
#whats img{}
#whats dl{}
#whats dl dt{}
#whats dl dt:before{}
#whats dl dd{}
#whats table {
    width: 100%;
}
#whats table tr {}
#whats table th {}
#whats table td {}
#flow{}
#flow p{}
#flow p b{}
#flow p + img{}
#flow ol{
    margin: 40px 0 0 25px;
}
#flow ol li{}
#flow ol li::marker{
    font-size: 24px;
}
#flow ol li b{
    font-size: 16px;
}
#flow ol li span{}
#support{}
#support h2{}
#support dl{
    margin-left: 10px;
}
#support dl dt{
    font-size: 16px;
}
#support dl dt:before {
    font-size: 20px;
    margin-left: 0;
}
#support dl dd{}
#support dl dd p{}
#support dl dd p span{}
#support dl dd > img{}
#faq{}
/* Acordeon styles */
.faq_tab {
    font-size: 13px;
    margin: 0 0 5px;
}
.faq_tab input {}
.faq_tab label {}
.faq_tab label:hover {}
.faq_tab .answer {}
.faq_tab .answer-cnt {}
/* :checked */
.faq_tab input:checked ~ .answer {
}
/* Icon */
.faq_tab label::after {}
.faq_tab input[type=checkbox] + label::after {}
.faq_tab input[type=checkbox]:checked + label::after {}
}