:root {
	--f64: clamp(2rem, 5vw, 4rem); /*1280px以上は64px、640px以下は32px、その間は可変*/
	--f48: clamp(1.5rem, 3.75vw, 3rem); /*1280px以上は48px、640px以下は24px、その間は可変*/
	--f36: clamp(1.13rem, 2.81vw, 2.25rem);/*1280px以上は36px、640px以下は18px、その間は可変*/
	--f30: clamp(1rem, 0.125rem + 2.188vw, 1.875rem);/*1280px以上は30px、640px以下は16px、その間は可変*/
	--f24: clamp(0.9rem, 1.875vw, 1.5rem);/*1280px以上は24px、640px以下は14.4px、その間は可変*/
	--f20: clamp(0.75rem, 1.563vw, 1.25rem);/*1280px以上は20px、640px以下は12px、その間は可変*/
	--f18: clamp(0.75rem, 1.427vw, 1.125rem);/*1280px以上は18px、640px以下は12px、その間は可変*/
	--f16: clamp(0.625rem, 1.25vw, 1rem);/*1280px以上は16px、640px以下は10px、その間は可変*/
	--f14: clamp(0.625rem, 1.09vw, 0.875rem);/*1280px以上は14px、640px以下は10px、その間は可変*/
	--f12: clamp(0.56rem, 0.94vw, 0.75rem);/*1280px以上は14px、640px以下は9px、その間は可変*/
	
	--main: #f1681e;
	--sub: #f19127;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}
html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}
body {
	line-height: 1.8;
	font-family: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: var(--f24);
	color: #4D4D4D;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ul, ol {
	  list-style: none;
}
a {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
input, select {
	vertical-align: middle;
}
address {
	font-style: normal;
}
section {
	padding: 2em 0;
	text-align: center;
}
header {
	background: url("../img/fv_02_sp.webp") no-repeat center top / contain;
}
header img {
	width: 100%;
	height: auto;
}
header #h1box {
	display: flex;
	justify-content: space-between;
	width: calc(100% - 2rem);
	margin: auto;
	padding-top: 1rem;
	min-height: calc(125vw - 1rem - 200px);
	max-width: 1400px;
}
header #h1box h1 {
	width: 30%;
}
header #h1box .txt {
	width: calc(70% - 1rem);
}
header #h2box a, header #h2box a img {
	display: block;
}
section.gr {
	background-color: #f2f2f2;
}
section.ye {
	background-color: #ffefc2;
}
section.or {
	background-color: var(--main);
	color: #fff;
}
.w1400 {
	display: block;
	width: calc(100% - 1rem);
	max-width: 1400px;
	margin: auto;
}
.w1200 {
	display: block;
	width: calc(100% - 1rem);
	max-width: 1200px;
	margin: auto;
}
.w800 {
	display: block;
	width: calc(100% - 1rem);
	max-width: 800px;
	margin: auto;
}
section h3.h3 {
	color: var(--main);
	font-size: var(--f36);
	margin-bottom: 1em;
}
section h3.h3 img {
	height: 2em;
	width: auto;
}
br.pc {
	display: none;
}

#seminar .timer {
	font-size: var(--f36);
	font-weight: 700;
}
#seminar .timer .num {
	color: var(--main);
	font-size: 2em;
}
#seminar h3 {
	color: var(--main);
	font-size: var(--f36);
	margin: auto;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
#seminar .now {
	color: var(--main);
	font-size: var(--f24);
	font-weight: 700;
} 
#seminar #youtube {
	width: calc(100% - 1rem);
	max-width: 800px;
	margin: 1em auto 2em;
	aspect-ratio: 16 / 9;
}
#seminar #youtube iframe {
	width: 100%;
	height: 100%;
}
#case h3 {
	color: var(--main);
	font-size: var(--f36);
	margin-bottom: 2em;
}

#case .customer {
	width: calc(100% - 2rem);
	max-width: 1400px;
	margin: 0 auto 4em;
}
#case .customer .title_box img {
	display: block;
	margin-bottom: 1em;
	width: 100%;
	height: 8em;
	object-fit: cover;
}
#case .customer .title_box h4 {
	color: var(--main);
	font-size: var(--f36);
	line-height: 1.2;
	margin-bottom: 1em;
}
#case .customer .title_box h4 .fs20 {
	font-size: 2em;
}
#case .customer .title_box h4 .fs15 {
	font-size: 1.5em;
}
#case .customer .effect {
	border: solid 2px var(--sub);
	border-radius: 10px;
	margin-bottom: 2em;
	padding: 1em;
}
#case .customer .effect p {
	font-weight: 700;
	margin-bottom: 1em;
}
#case .customer .effect .before p {
	color: var(--sub);
}
#case .customer .effect .after p {
	color: var(--main);
}
#case .customer .effect ul {
	text-align: left;
}
#case .customer .effect ul li {
	position: relative;
	padding-left: 1em;
}
#case .customer .effect ul li:before {
	content: '・';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
#case .customer .effect ul li span {
	color: var(--main);
	font-size: 1.2em;
	font-weight: 700;
}
#case .customer .effect .arrow {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
}
#case .customer .effect .arrow img {
	width: 48px;
	height: auto;
}
#case .customer .effect .arrow:before, #case .customer .effect .arrow:after {
	content: '';
	display: block;
	height: 1px;
	background-color: var(--sub);
	width: 100%;
}
#case .customer .voice {
	background-color: #ffefc2;
	border-radius: 10px;
	padding: 1em;
}
#case .customer .voice p {
	text-align: left;
}
#case .customer .voice p span {
	color: var(--main);
	font-weight: 700;
}
#case .customer .voice .name {
	margin-bottom: 1em;
}
#case .customer .voice .name img {
	width: 76px;
	height: auto;
}
#case .customer .voice .name p {
	color: var(--main);
	font-weight: 700;
	text-align: center;
}


#about h3#doogar img {
	width: 60%;
	max-width: 400px;
	height: auto;
	margin-bottom: 2em;
}
#about p.txt {
	text-align: left;
}
#about ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 2em;
	margin-bottom: 3em;
}
#about ul li {
	background-color: #fff;
	border-radius: 50%;
	color: var(--main);
	width: 45%;
	min-width: 150px;
	max-width: 300px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5em;
}
#about ol {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#about ol li {
	width: 45%;
	margin-bottom: 2em;
}
#about ol li img {
	width: 100%;
	min-width: 150px;
	max-width: 300px;
	height: auto;
}

#stacchi {
	background-color: #e8fcb9;
}
#stacchi p.sub {
	color: #04aa72;
	font-size: var(--f30);
}
#stacchi p.title_txt {
	color: #04aa72;
	font-size: var(--f36);
	font-weight: 500;
}
#stacchi p.title_txt span {
	font-size: 1.2em;
	font-weight: 700;
}
#stacchi #title {
	background: url("../img/stacchi_bg.jpg") no-repeat center top / cover;
	padding: 2em 0;
	margin: 1em 0 1.5em;
}
#stacchi #title h3 img {
	width: 80%;
	height: auto;
	max-width: 560px;
}
#stacchi #title p {
	color: #fff;
	font-size: var(--f48);
	font-weight: 700;
	line-height: 1.6;
	margin-top: 1em;
}
#stacchi p.sttxt {
	text-align: left;
	margin-bottom: 1em;
}
#faq .faq {
	text-align: left;
}
#faq .faq_a {
    display: none;
}
#faq .faq_q {
	border: solid 1px #999;
  	padding: 1em 2.5em 0.8em 1em;
  	margin: 1em 0 0;
  	transition: background .3s ease;
  	cursor: pointer;
	display: flex;
	align-items: center;
	position: relative;	
}

#faq .faq_q::before,
#faq .faq_q::after {
  	position:absolute;
  	content:'';
  	top:1px;
  	right:1em;
  	bottom:0;
  	width:1em;
  	height:2px;
  	margin:auto;
  	background:var(--main);
}
#faq .faq_q::after {
  	transform:rotate(-90deg);
  	transition:transform 0.3s;
}
#faq .faq_q.active::after {
	transform:rotate(0deg);
}
#faq .faq_q .q {
	color: var(--main);
	font-size: 1.2em;
	font-weight: 700;
	display: block;
	margin-right: 0.3em;
}

#faq .faq_a {
	margin-top: 0.5em;
  	/*padding: 1em 1em 0.8em;*/
}
#faq .faq_a .a {
	color: var(--main);
	font-size: 1.2em;
	font-weight: 700;
	margin-right: 0.3em;
	line-height: 1.5;
}
#faq .faq_a .answer {
	margin: 0 1em;
	display: flex;
	align-items: flex-start;
}
.line img {
	width: 100%;
	height: auto;
}
footer {
	background-color: #666;
	color: #fff;
}
footer a {
	color: #fff;
}
footer #company {
	text-align: left;
}
footer #company p {
	font-size: var(--f36);
	font-weight: 500;
	margin-bottom: 0.5em;
}
footer #company dl {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}
footer #company dl dt {
	width: 4em;
}
footer #company dl dd {
	width: calc(100% - 4em);
}
footer #company .ftline {
	display: none;
}
footer #link {
	border-top: solid 1px #fff;
	padding: 1em 0;
}
footer #link ul {
	font-size: var(--f20);
	display: flex;
	justify-content: center;
	margin-bottom: 2em;
}
footer #link ul li {
	margin: 0 0.5em;
}
footer #link small {
	font-size: var(--f16);
}
@media screen and (min-width: 768px) {
	header #h1box {
		min-height: calc(100vw - 1rem - 200px);
	}
	
	br.sp {
		display: none;
	}
	br.pc {
		display: inline;
	}
	#case .customer .title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	#case .customer .title_box div {
		text-align: left;
		padding: 2em;
	}
	#case .customer .title_box img {
		width: 48%;
		height: auto;
		object-fit: unset;
		max-width: 590px;
	}
	#case .customer .effect {
		display: flex;
		justify-content: space-between;
		padding: 2em;
	}
	#case .customer .effect p {
		text-align: left;
	}
	#case .customer .effect .before,
	#case .customer .effect .after {
		width: calc(50% - 30px - 1em);
	}
	#case .customer .effect .arrow {
		flex-direction: column;
		margin-bottom: 0;
	}
	#case .customer .effect .arrow img {
		transform: rotate(270deg);
	}
	#case .customer .effect .arrow:before, #case .customer .effect .arrow:after {
		height: 100%;
		width: 1px;
	}
	#case .customer .voice {
		display: flex;
		padding: 2em;
	}
	#case .customer .voice .name {
		margin-right: 2em;
		margin-bottom: 0;
		width: 12em;
	}

	#about ul {
		flex-wrap: nowrap;
	}
	#about ul li {
		margin: 0 0.5em;
	}
	#about p.txt {
		text-align: center;
	}
	#about ol li {
		width: 30%;
	}

	#stacchi #title .inner {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#stacchi #title h3 {
		width: 50%;
		text-align: left;
	}
	#stacchi #title p {
		margin-top: 0;
		text-align-last: left;
	}
	#faq .faq {
		width: 80%;
	}
	footer #company {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	footer #company .ftline {
		display: block;
		width: 50%;
	}
	footer #company .ftline img {
		width: 100%;
		height: auto;
		max-width: 500px;
	}
}
@media screen and (orientation: landscape) and (min-width: 960px) {
	header {
		background: url("../img/fv_02.webp") no-repeat center center / cover;
		height: 100vh;
		width: 100vw;
		position: relative;
	}
	header #h1box {
		min-height: auto;
		align-items: center;
	}
	header #h2box {
		display: flex;
		justify-content: space-between;
		width: calc(100% - 2rem);
		max-width: 1400px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 2rem;
	}
	header #h2box h2 {
		width: 60%;
	}
	header #h2box a {
		box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
		width: 38%;
		max-width: 700px;
	}
	#case .customer .voice .name img {
		width: 100px;
	}
}
@media screen and (orientation: landscape) and (min-width: 1280px) {
	#case .customer .voice .name img {
		width: 120px;
	}
}