@charset "UTF-8";


.topbar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(0,37,78,.9);
	color: #fff;
	font-size: var(--font-s);
	>a {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 4%;
	}
	.date-wrap {
		display: flex;
		align-items: center;
	}
	.new {
		font-size: var(--font-xs);
		font-family: var(--accent-font);
		color: #fff;
		line-height: 1;
		background-color: var(--color-primary);
		padding: 4px 5px 2px;
		border-radius: 2px;
	}
	.date {
		padding: 0 1em;
	}
	.more {
		position: relative;
		font-family: var(--accent-font);
		padding-right: 30px;
		&:after {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 0;
			width: 24px;
			height: 24px;
			margin: auto;
			transition: all 0.3s 
				ease-out;
			background-image: url(../img/top/arrow-circle.svg);
			background-size: cover;
			
		}
		&:hover {
			&:after {
				right: -5px;
			}
		}
	}
	.title-wrap {
		width: 75%;
		&+div {
			width: 25%;
			text-align: right;
		}
	}
	@media (min-width: 768px) {
		font-size: var(--font-m);
		>a {
			padding: 15px 20px;
		}
		.title-wrap {
			display: flex;
			align-items: center;
		}
		.new {
			font-size: var(--font-s);
			padding: 5px 10px;
		}
	}
}
#content-wrap {
	padding-top: 0;
}
.slideshow-scroll {
	font-size: 10px;
	color: var(--color-secondary);
	font-family: var(--accent-font);
	font-weight: 400;
	position: absolute;
	bottom: 195px;
	left: 20px;
	transform-origin: 0 0;
	transform: rotate(90deg);
	z-index: 2;
}
.slideshow-scroll span {
	position: relative;
	display: block;
}
.slideshow-scroll span:before {
	content: "";
	display: block;
	position: absolute;
	top: 40%;
	left: 75px;
	width: 52px;
	width: 33px;
	height: 1px;
	background: var(--color-secondary);
	animation: loopScrollSP 3s infinite;
}
.slideshow-scroll span::after {
	content: "";
	position: absolute;
	top: 40%;
	left: 62px;
	width: 56px;
	height: 1px;
	opacity: 0.4;
	background: #fff;
}
@media screen and (min-width: 1000px) {
	.slideshow-scroll {
		font-size: 11px;
		bottom: 222px;
		left: 25px;
	}
	.slideshow-scroll span::before {
		left: 75px;
		width: 52px;
		animation: loopScroll 3s infinite;
	}
	.slideshow-scroll span::after {
		left: 75px;
		width: 87px;
	}
	.slideshow-scroll p{
		line-height: 1;
	}
}
@keyframes loopScroll {
	0% { width: 0;}
	100% {width: 87px;}
}
@keyframes loopScrollSP {
	0% { width: 0;}  
	100% {width: 56px;}
}
.flow-btn {
	display: inline-block;
	text-align: center;
	background-color: rgba(255,255,255,.9);
	border-top: 1px solid var(--color-primary);
	width: 100%;
	margin: auto;
	span {
		display: block;
		font-size: var(--font-m);
		padding-bottom: .75em;
	}
	a {
		position: relative;
		display: block;
		font-size: var(--font-xl);
		font-weight: 600;
		line-height: 1;
		padding: 11px 0 9px;
		&:after {
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			right: 20px;
			width: 24px;
			height: 24px;
			margin: auto;
			transition: all 0.3s 
				ease-out;
			background-image: url(../img/top/arrow-dowm.svg);
			background-size: cover;
		}
	}
	@media (min-width: 768px) {
		width: 474px;
		background-color: rgba(255,255,255,.95);
		border: 2px solid var(--color-primary);
		border-radius: 10px;
		a {
			padding: 20px 0 15px;
		}
	}
}
/*
.top-mainvisual
---------------------------*/
.top-mainvisual-wrap {
	position: relative;
	background-color: var(--color-primary-bg);
	z-index: 3;
	&:after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-image: url(../img/common/main-bg.svg);
		background-size: 100% auto;
		background-position: left top;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	}
	@media (min-width: 1120px) {
		z-index: 3;
		&:after {
			width: 120%;
			height: 120%;
			background-position: left bottom;
			background-size: contain;
			bottom: -10%;
			left: -20%;
			z-index: 1;
		}
	}
}
.top-mainvisual {
	position: relative;
	padding-top: 80px;
	z-index: 2;
	background-image: url(../img/top/mv-bg.svg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 120%;
	.movie-btn {
		position: absolute;
		z-index: 5;
		top: 75px;
		right: 10px;
		width: 90px;
		filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));
		opacity: .95;
	}
	.flow-btn {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 10;
		&.is-hide {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}
	}
	h1 {
		color: var(--color-secondary);
		font-size: var(--font-5xl);
		font-weight: 600;
		line-height: 1.65;
		padding-top: .5em;
	}
	.top-mainvisual-text {
		.read-text {
			font-size: var(--font-l);
			line-height: 1.8;
			padding-bottom: .5em;
		}
		.produced {
			font-family: var(--accent-font);
			font-size: var(--font-s);
			font-weight: 400;
			color: var(--color-accent);
			letter-spacing: .05em;
			padding-top: 1em;
		}
	}
	.top-mainvisual-image {
		position: relative;
		text-align: right;
		padding: 15px 0 30px;
		margin-right: -4vw;
		img {
			width: 75%;
		}
	}
	@media (min-width: 1120px) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-position: left bottom;
		background-size: auto;
		padding-top: 0;
		height: 100vh;
		.movie-btn {
			top: 130px;
			right: 40px;
			width: auto;
		}
		.flow-btn {
			position: absolute;
			bottom: 70px;
			left: auto;
			right: 20px;
			filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));
			transition: .5s ease;
			&.is-fixed {
				position: fixed;
				bottom: 50px;
			}
		}
		h1 {
			font-size: var(--font-6xl);
			letter-spacing: .1em;
			padding-top: 0;
			padding-bottom: 20px;
		}
		.top-mainvisual-text {
			position: relative;
			width: 48%;
			.read-text {
				font-size: var(--font-xl);
			}
		}
		.top-mainvisual-image {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			width: 50%;
			background-image: url(../img/top/main-visual.png);
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: cover;
			padding: 0;
			margin: 0;
			img {
				display: none;
			}
		}
	}
	@media (mav-width: 350px) {
		.movie-btn {
			width: 75px;
		}
	}
}
#news {
	position: relative;
	z-index: 2;
	.news-content-wrap {
		.news-title-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 15px;
		}
		.news-title {
			font-family: var(--accent-font);
			color: var(--color-secondary);
			font-size: var(--font-5xl);
		}
		.news-list {
			li {
				text-align: left;
				&+li {
					border-top: 1px solid var(--color-border-1);
				}
			}
			a {
				display: inline-block;
				padding: 20px 0;
			}
			.category {
				display: inline-block;
				min-width: 6em;
				background-color: var(--color-primary);
				color: #fff;
				font-size: var(--font-xs);
				text-align: center;
				white-space: nowrap;
				padding: 2px 10px;
				border-radius: 50px;
				margin-left: 10px;
			}
			.news-detail {
				display: flex;
				align-items: center;
				padding-bottom: 10px;
			}
		}
	}
	@media (min-width: 1120px) {
		z-index: 5;
		.news-content-wrap {
			display: flex;
			align-items: center;
			.news-title-wrap {
				display: block;
				text-align: left;
				width: 20%;
				padding-bottom: 0;
			}
			.news-title {
				padding-bottom: 1em;
			}
			.news-content {
				width: 80%;
			}
			.news-list {
				a {
					display: flex;
					align-items: flex-start;
				}
				.category,
				.title {
					margin-left: 15px;
				}
			}
			.news-detail {
				padding-bottom: 0;
			}
		}
	}
}
.more-btn {
	&.pdf {
		a {
			min-width: 300px;
			background-color: var(--color-primary);
			font-family: var(--primary-font);
			padding: 15px 10px;
			&:after {
				border: none;
				transform: none;
				background-image: url(../img/common/icon-pdf.svg);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				width: 28px;
				height: 28px;
			}
			&:hover {
				&:after {
					right: 15px;
				}
			}
		}
	}
	a {
		position: relative;
		min-width: 100px;
		display: inline-block;
		background-color: var(--color-secondary);
		color: #fff;
		text-align: left;
		font-family: var(--accent-font);
		padding: 5px 15px;
		border-radius: 4px;
		&:after {
			border-top: solid 1px #fff;
			border-right: solid 1px #fff;
			width: 8px;
			height: 8px;
			position: absolute;
			content: "";
			top: 0;
			bottom: 0;
			transform: rotate(45deg);
			right: 15px;
			margin: auto;
			transition: all 0.3s 
				ease-out;
		}
		&:hover {
			&:after {
				right: 10px;
			}
		}
	}
	@media (min-width: 768px) {
		a {
			min-width: 150px;
		}
		&.pdf {
			a {
				min-width: 360px;
				&:after {
					width: 32px;
					height: 32px;
				}
			}
		}
	}
}
/*
#about
---------------------------*/
#about {
	border: 20px solid var(--color-primary-bg);
	.about-inner {
		background-image: url(../img/top/ai-bg.svg);
		background-position: 20px 20px;
		background-repeat: no-repeat;
		background-size: 50%;
		>div {
			background-image: url(../img/top/ai-bg02.svg);
			background-position: right bottom;
			background-repeat: no-repeat;
			background-size: 50%;
		}
	}
	@media (min-width: 768px) {
		border: 40px solid var(--color-primary-bg);
		.about-inner {
			background-size: auto;
			background-position: 40px 40px;
			>div {
				background-size: auto;
			}
		}
	}
}
/*
#solution
---------------------------*/
#solution {
	background-image: url(../img/top/problem-bg-sp.svg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	>div {
		background-image: url(../img/top/problem-bg-sp-bottom.svg);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.content-title {
		position: relative;
		z-index: 2;
	}
	.solution-contetnt-wrap {
		position: relative;
		z-index: 2;
	}
	.solution-contetnt {
		background-color: var(--color-secondary-bg);
		&+.solution-contetnt {
			margin-top: 50px;
		}
	}
	.solution-title {
		font-size: var(--font-2xl);
		background-color: #E3E8E6;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 15px;
		h4 {
			font-weight: 600;
		}
	}
	.problem {
		position: relative;
		&:after {
			content: "";
			display: block;
			width: 10px;
			height: 50px;
			position: absolute;
			bottom: -40px;
			left: 0;
			right: 0;
			margin: auto;
			background-image: url(../img/common/arrow-bottom.svg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
	.solution {
		background-color: var(--color-primary-bg);
		.solution-title {
			background-image: var(--color-gradient);
			color: #fff;
		}
		.solution-detail {
			dt {
				background-image: var(--color-gradient);
				color: #fff;
			}
		}
		.bottom-box {
			.text {
				p {
					color: var(--color-secondary);
					font-weight: 600;
					>*{
						font-weight: 600;
					}
				}
			}
		}
	}
	.solution-detail {
		text-align: left;
		padding: 20px 4%;
		dl {
			display: flex;
			align-items: center;
		}
		dt {
			width: 80px;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			text-align: center;
			font-size: var(--font-l);
			border-radius: 60px;
			span {
				font-weight: 600;
				line-height: 1.2;
				img {
					height: 40px;
				}
			}
		}
		dd {
			width: calc(100% - 90px);
			font-size: var(--font-l);
			line-height: 1.75;
			padding-left: 10px;
		}
		li {
			&+li {
				margin-top: 20px;
			}
		}
		.bottom-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			font-size: var(--font-l);
			padding: 10px 20px;
			margin-top: 30px;
			.icon {
				width: 20%;
			}
			.text {
				width: 75%;
			}
		}
	}
	@media (min-width: 768px) {
		background-image: none;
		>div {
			background-image: none;
		}
		&:before,
		&:after {
			content: "";
			display: block;
			width: 50%;
			height: 90%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50px;
			margin: auto;
			background-image: url(../img/top/problem-bg-left.svg);
			background-position: left center;
			background-repeat: no-repeat;
			background-size: auto 100%;
			z-index: 1;
		}
		&:after {
			left: auto;
			right: 50px;
			background-image: url(../img/top/problem-bg-right.svg);
			background-position: right center;
		}
		.solution-contetnt-wrap {
			display: flex;
			justify-content: space-between;
		}
		.solution-contetnt {
			width: calc((100% - 32px) / 2);
			&.solution-contetnt {
				margin-top: 0;
			}
		}
		.solution-detail {
			padding: 30px 20px;
			dl {
				padding: 0 10px;
			}
			dt {
				width: 110px;
				height: 110px;
				span {
					img {
						height: auto;
					}
				}
			}
			dd {
				width: calc(100% - 120px);
				font-size: 17px;
				padding-left: 10px;
			}
			li {
				&+li {
					margin-top: 20px;
				}
			}
			.bottom-box {
				min-height: 115px;
				padding: 10px 20px;
				margin-top: 30px;
			}
		}
		.problem {
			&:after {
				width: 66px;
				height: 16px;
				position: absolute;
				top: 0;
				left: auto;
				right: -50px;
				margin: auto;
				background-image: url(../img/common/arrow.svg);
				background-position: center;
				background-size: auto;
			}
		}
	}
}
/*
.speech-block
---------------------------*/
.speech-block {
	position: relative;
	padding-top: 32px;
	.speech-block-inner {
		background-color: #fff;
		border-top: 1px solid var(--color-primary);
		border-bottom: 1px solid var(--color-primary);
		background-image: url(../img/common/logo-bg.svg);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 90% auto;
		padding: 35px 4%;
	}
	h3 {
		line-height: 1.5;
		.em {
			font-size: var(--font-3xl);
			margin: 0 .25em;
		}
		img {
			width: 70%;
			margin: 10px;
		}
	}
	.line {
		position: relative;
		display: inline-block;
		z-index: 3;
		&:after {
			content: "";
			display: block;
			position: absolute;
			left: 50%;
			top: -13px;
			width: 30px;
			height: 30px;
			background-color: #fff;
			border-top: 1px solid var(--color-primary);
			transform: rotate(-45deg);
		}
	}
	@media (min-width: 768px) {
		.speech-block-inner {
			background-size: auto;
			background-position: right bottom;
			padding: 50px;
		}
		h3 {
			line-height: 2.5;
			img {
				width: auto;
				margin: 0 10px;
			}
		}
		.line {
			&:after {
				left: 50%;
				top: -16px;
				width: 36px;
				height: 36px;
			}
		}
	}
}
.inner-content-box {
	position: relative;
	background-color: var(--color-primary-bg);
	padding: 20px 4%;
	&+.inner-content-box {
		margin-top: 30px;
	}
	p {
		&+p {
			padding-top: 1em;
		}
	}
	@media (min-width: 768px) {
		padding: 50px;
		&+.inner-content-box {
			margin-top: 50px;
		}
	}
}
/*
#movie
---------------------------*/
#movie {
	background-color: #fff;
	background-image: url(../img/common/bg-pattern.svg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 120%;
	padding: 20px 0;
	.content-title {
		color: #fff;
		.sub-title {
			color: #fff;
		}
	}
	>div {
		position: relative;
	}
	.movie-text {
		text-align: left;
		width: 100%;
		position: relative;
		background-image: url(../img/top/movie-bg.jpg);
		background-position: center center;
		background-size: cover;
		color: #fff;
		padding: 30px 4vw 30px 0;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		&:before {
			width: 10%;
			height: 100%;
			content: "";
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc(50% - 50vw);
			margin: auto;
			background-color: var(--color-secondary);
			z-index: 0;
		}
		>div {
			position: relative;
		}
		.button {
			margin: 10px 0;
		}
	}
	.movie-content {
		padding-top: 15px;
		video {
			width: 100%;
			height: 100%;
		}
	}
	.iframe-content-inner {
		aspect-ratio: 16 / 9;
		margin-top: 15px;
		iframe {
			width: 100%;
			height: 100%;
		}
	}
	@media (min-width: 768px) {
		background-image: url(../img/common/bg-pattern02.svg);
		background-position: right top;
		background-size: auto;
		padding: 50px 0;
		>div {
			position: relative;
			&:before {
				width: 50%;
				height: 100%;
				content: "";
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: calc(50% - 50vw);
				margin: auto;
				background-color: var(--color-secondary);
				z-index: 0;
			}
		}
		.movie-text {
			width: 72%;
			padding: 80px 212px 80px 0;
			border-top-right-radius: 20px;
			border-bottom-right-radius: 20px;
			.button {
				margin: 20px 0;
			}
		}
		.iframe-content,
		.movie-content {
			display: block;
			width: 50%;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));
			padding-top: 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.iframe-content-inner {
			width: 100%;
		}
	}
}
/*
#why
---------------------------*/
#why {
	position: relative;
	&:after,
	&:before {
		position: absolute;
		content: "";
		display: block;
		width: 300px;
		height: 300px;
		background-image: url(../img/common/bg-decoration.svg);
		background-repeat: no-repeat;
		background-size: contain;
		z-index: 2;
	}
	&:after {
		top: 10px;
		right: 10px;
	}
	&:before {
		top: 30%;
		left: 10px;
	}
	.point {
		position: absolute;
		top: -25px;
		right: -10px;
		background-image: var(--color-gradient);
		color: #fff;
		width: 80px;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: var(--font-xl);
		font-family: var(--accent-font);
		line-height: 1;
		border-radius: 60px;
		>div {
			padding-top: 8px;
		}
		span {
			display: block;
			font-size: var(--font-4xl);
			padding-top:2px;
		}
	}
	@media (min-width: 768px) {
		&:after,
		&:before {
			width: 600px;
			height: 600px;
		}
		&:after {
			top: 20px;
			right: 20px;
		}
		&:before {
			top: 30%;
			left: 20px;
		}
		.point {
			width: 100px;
			height: 100px;
			top: -45px;
			left: -20px;
			&.type02 {
				left: auto;
				right: -20px;
			}
		}
		dl {
		}
	}
}
.check-list {
	padding-top: 20px;
	dt {
		font-size: var(--font-l);
		font-weight: 600;
		padding-bottom: 15px;
	}
	li {
		position: relative;
		line-height: 1.25;
		padding-left: 36px;
		margin-right: 10px;
		&+li {
			margin-top: 15px;
		}
		&:before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 32px;
			height: 36px;
			background-image: url(../img/top/icon-check.svg);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			margin: auto;
		}
	}
	@media (min-width: 768px) {
	padding-top: 30px;
	dt {
		padding-bottom: 20px;
	}
	/*ul {
		display: flex;
		.block {
			display: block;
		}
	}
	li {
		&+li {
			margin-top: 0;
		}
	}*/
	}
}
/*
#sistem
---------------------------*/
#sistem {
	background-image: url(../img/top/ai-bg-w.svg);
	background-position: center 50px;
	background-repeat: no-repeat;
	background-size: 50%;
	.check-list {
		padding-top: 10px;
	}
	.sensor {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 10px;
		margin-top: 20px;
		.image {
			width: 30%;
		}
		.detail {
			width: 68%;
			p {
				font-size: var(--font-ms);
			}
		}
	}
	.sistem-bottom {
		background-color: #fff;
		text-align: left;
		padding: 20px 4%;
		margin-top: 20px;
	}
	.inner-title02 {
		text-align: center;
	}
	.pc-figure {
		display: none;
	}
	@media (min-width: 768px) {
		background-size: auto;
		.check-list {
			padding-top: 20px;
		}
		.sensor {
			margin-top: 20px;
			padding: 20px;
		}
		.sistem-bottom {
			padding: 50px;
			margin-top: 30px;
		}
		.pc-figure {
			display: inline-block;
		}
		.sp-figure {
			display: none;
		}
	}
}
/*
#technology
---------------------------*/
#technology {
	background-image: url(../img/top/technology-bg.jpg);
	background-size: cover;
	background-position: center;
	padding: 20px 0;
	.technology-content {
		text-align: center;
		background-color: rgba(255,255,255,.9);
		padding: 30px 4%;
		.inner-title {
			text-align: left;
			padding-top: 1em;
		}
	}
	.technology-detail {
		text-align: left;
	}
	@media (min-width: 768px) {
		padding: 50px 0;
		.technology-content {
			padding: 80px;
			.inner-title {
				text-align: center;
				padding-top: 2em;
			}
		}
		.technology-detail {
			text-align: center;
		}
	}
}
/*
#screen
---------------------------*/
#screen {
	.screen-title {
		min-width: 80%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: var(--color-gradient);
		color: #fff;
		text-align: left;
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
		padding: 5px 10px;
		.inner-title {
			padding-bottom: 0;
		}
	}
	.inner-content-box {
		padding-top: 60px;
	}
	.screen-detail {
		dl + dl {
			padding-top: 15px;
			margin-top: 15px;
			border-top: 1px solid #fff;
		}
		dt {
			font-size: var(--font-l);
			font-weight: 600;
			color: var(--color-secondary);
			padding-bottom: .5em;
		}
		dd {
			li, p {
				line-height: 1.75;
			}
			li {
				position: relative;
				padding-left: 12px;
				&+li {
					margin-top: 5px;
				}
				&:after {
					content: "";
					display: block;
					width: 6px;
					height: 6px;
					background-color: var(--color-primary);
					border-radius: 50px;
					position: absolute;
					top: 10px;
					left: 0;
				}
			}
		}
	}
	@media (min-width: 768px) {
		.screen-title {
			min-width: 392px;
			padding: 5px 20px;
		}
		.flex-content {
			align-items: center;
		}
		.inner-content-box {
			padding-top: 50px;
		}
		.screen-image {
			position: relative;
			&:before {
				content: "";
				display: block;
				width: 30px;
				height: 30px;
				position: absolute;
				top: -15px;
				right: 0;
				background-image: url(../img/common/search-icon.svg);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		}
		.screen-detail {
			dl + dl {
				padding-top: 20px;
				margin-top: 20px;
			}
			dt {
				padding-bottom: .75em;
			}
		}
	}
}

.remodal-close {
	left: auto;
	top: 12px;
	right: 12px;
	width: 20px;
	height: 20px;
	color: var(--color-primary);
	&:before {
		content: "";
		display: block;
		width: 20px;
		height: 20px;
		background-image: url(../img/common/close.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}
@media only screen and (min-width: 1100px) {
	.remodal {
		min-width: 1000px;
	}
}

/*
#features
---------------------------*/
#features {
	.features-inner {
		padding-top: 20px;
	}
	.inner-box {
		font-size: var(--font-ms);
		background-color: #fff;
		border-radius: 20px;
		padding: 10px 4% 20px;
		&+.inner-box {
			margin-top: 20px;
		}
	}
	.features-title {
		font-weight: 600;
		font-size: var(--font-5xl);
		padding-bottom: .5em;
		margin-bottom: 0;
		span {
			font-weight: 600;
			display: block;
			color: var(--color-primary);
			font-size: var(--font-3xl);
			padding-bottom: .5em;
		}
	}
	.pr-text {
		font-size: var(--font-l);
		padding-top: .5em;
	}
	@media (min-width: 768px) {
		.features-inner {
			padding-top: 0;
		}
		.inner-box {
			padding: 40px 20px;
			&+.inner-box {
				margin-top: 40px;
			}
		}
		.features-title {
			span {
				padding-bottom: 1em;
			}
		}
	}
}

/*
#contact
---------------------------*/
#contact {
	.info {
		p {
			text-align: left;
		}
		.tel-info {
			text-align: center;
			padding: 2em 0;
			p {
				&+p {
					padding-top: 1em;
				}
			}
			span {
				font-size: var(--font-xxl);
				font-weight: 600;
			}
		}
	}
	@media (min-width: 768px) {
		.info {
			p {
				text-align: center;
			}
			.tel-info {
				text-align: center;
			}
		}
		
	}
}
.form-content {
	text-align: left;
	dl {
		width: 100%;
		border-bottom: 1px solid var(--color-border-1);
		&:first-of-type {
			border-top: 1px solid var(--color-border-1);
		}
		dt, dd {
			font-size: 16px;
			line-height: 1.6;
			padding: 15px 0;
		}
		p {
			line-height: 1.75;
		}
		dt {
			position: relative;
			padding-bottom: 0;
			.required,
			.optional {
				position: absolute;
				right: 0;
				top: 15px;
				display: inline-block;
				font-size: 12px;
				font-weight: 600;
				color: #fff;
				background-color: var(--color-primary);
				padding: 6px 12px 5px;
				border-radius: 50px;
			}
			.optional {
				color:  var(--color-primary);
				background-color: #fff;
				border: 1px solid var(--color-primary);
			}
		}
		dd {
			padding: 10px 0 15px;
			word-break: break-all;
			.att {
				padding: 10px 0 0;
			}
			.note {
				padding-top: 10px;
				font-size: 13px;
			}
		}
	}
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	textarea,
	select {
		display: inline-block;
		width: 100%;
		font-size: 16px;
		padding: 10px 10px;
		background-color: var(--color-primary-bg);
		border: none;
		border-radius: 2px;
	}
	textarea {
		resize: vertical;
		min-height: 12em;
	}
	.selectWrap {
		position: relative;
		&:before {
			content: "";
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-width: 8px 5px 0px 5px;
			border-color: #000 transparent transparent transparent;
			border-style: solid;
			pointer-events: none;
		}
	}
	&.confirm {
		&+.btnWrap {
			padding-top: 50px;
			.btn {
			}
		}
	}
	.wpcf7-not-valid-tip {
		display: inline-block;
		padding-top: 5px;
	}
	.consent-box {
		text-align: center;
		padding: 20px 0;
	}
	.consent {
		padding-top: 20px;
	}
	@media (min-width: 768px) {
		dl {
			width: 100%;
			display: table;
			dt, dd {
				display: table-cell;
				vertical-align: middle;
				padding: 22px 20px 20px;
			}
			dt {
				width: 318px;
				.required,
				.optional {
					font-size: 14px;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			dd {
				width: calc(100% - 318px);
				.note {
					padding-top: 10px;
					font-size: 14px;
				}
			}
		}
		&.confirm {
			&+.btnWrap {
				padding-top: 50px;
			}
		}
		.consent-box {
			padding: 40px 0;
		}
	}
}
.wpcf7-form-control-wrap {
	display: block;
}
span.wpcf7-list-item {
	margin: 0 30px 0 0; /* 項目右側の余白設定と、デフォルトの左側の余白を打ち消す */
	position: relative;
}
.wpcf7-list-item-label {
	cursor: pointer; /* labelにhoverした時にカーソルを表示させる */
	font-size: 16px; /* 項目のフォントサイズ */
	line-height: 1.75;
}
input[type="checkbox"] {
	opacity: 0; /* デフォルトのチェックボックスを見えなくする */
	position: absolute;
}
.wpcf7-list-item-label::before {
	/* チェックボックスのデザイン */
	border: 1px solid var(--color-border-1);
	content: "";
	display: inline-block;
	height: 20px;
	width: 20px;
	margin-right: 8px;
	position: relative;
	top: -2px;
	vertical-align: middle;
	border-radius: 2px;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
	/* チェックアイコン */
	background: url(../img/common/check-icon.svg) no-repeat center;
	background-size: contain;
	content: "";
	height: 20px;
	width: 20px;
	position: absolute;
	left: 1px;
	top: 1px;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
	/* チェックしたボックスの背景色を設定 */
	background-color: #fff;
}
.radio-style {
	/* デフォルトのボタン */
	input[type="radio"] {
		opacity: 0; /* デフォルトのボタンを非表示 */
		position: absolute;
	}
	/* チェック前のボタン */
	.wpcf7-list-item-label::before {
		background: #fff;
		border: 1px solid var(--color-border-1);
		border-radius: 100%; /* ラジオボタンっぽく丸くする */
		content: "";
		height: 1.5em;
		width: 1.5em;
		margin-bottom: auto;
		margin-right: .5em;
		margin-top: auto;
		transition: background-color .5s; /* 色をじんわり変化させる */
	}
	/* チェック後のボタン */
	input[type="radio"]:checked + .wpcf7-list-item-label::before {
		background-color: var(--color-primary); /* チェック後の中心の色 */
		box-shadow: inset 0 0 0 5px #fff; /* 中心の色のスタイル */
	}
}
.wpcf7 form .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output {
	border: 2px solid var(--color-primary);
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 2px;
	text-align: center;
}
/*
#faq
---------------------------*/
#faq {
	.content-title {
		&+p {
			text-align: left;
		}
	}
	.qa-content {
		padding-top: 30px;
		&+.qa-content {
			padding-top: 20px;
		}
	}
	.qa-title {
		background-image: var(--color-gradient);
		color: #fff;
		text-align: left;
		border-top-right-radius: 50px;
		border-bottom-right-radius: 50px;
		padding: 5px 10px;
		.inner-title {
			position: relative;
			padding-bottom: 0;
			padding-left: 18px;
			&:after {
				content: "";
				display: block;
				width: 12px;
				height: 12px;
				background-color: #fff;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				border-radius: 50px;
			}
		}
	}
	.faq-qa {
		text-align: left;
		dl {
			padding: 10px 0;
			+dl {
				border-top: 1px solid var(--color-border-1);
			}
		}
		dt, dd {
			position: relative;
			line-height: 1.75;
			padding: 10px 10px 10px 35px;
			&:after {
				position: absolute;
				top: 3px;
				left: 10px;
				content: "";
				font-family: var(--accent-font);
				color: var(--color-primary);
				font-size: 24px;
			}
		}
		dt {
			padding-right: 35px;
			&:after {
				content: "Q";
			}
		}
		dd {
			display: none;
			&:after {
				content: "A";
			}
		}
		.open {
			dd {
				display: block;
				border-top: 1px solid var(--color-border-2);
			}
			.faq-qa-arrow {
				>span {
					&:after {
						top: 12px;
						transform: rotate(-45deg);
					}
				}
			}
		}
	}
	.faq-qa-arrow {
		position: absolute;
		top: 12px;
		right: 10px;
		display: inline-block;
		width: 26px;
		height: 26px;
		background-color: var(--color-primary);
		border-radius: 50px;
		margin: auto;
		>span {
			display: block;
			width: 26px;
			height: 26px;
			position: relative;
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: 8px;
				left: 0;
				right: 0;
				width: 8px;
				height: 8px;
				border: 0px;
				border-top: solid 1px #fff;
				border-right: solid 1px #fff;
				transform: rotate(135deg);
				z-index: 1;
				margin: auto;
				transition-duration: 0.4s;
			}
		}
	}
	@media (min-width: 768px) {
		.content-title {
			&+p {
				text-align: center;
			}
		}
		.qa-content {
			padding-top: 50px;
			&+.qa-content {
				padding-top: 40px;
			}
		}
		.qa-title {
			padding: 5px 20px;
		}
		.faq-qa {
			.open {
				.faq-qa-arrow {
					>span {
						&:after {
							top: 16px;
						}
					}
				}
			}
			dl {
				padding: 15px 0;
			}
			dt, dd {
				padding: 20px 20px 20px 50px;
				&:after {
					top: 10px;
					left: 15px;
					font-size: 30px;
				}
			}
		}
		.faq-qa-arrow {
			right: 20px;
			width: 36px;
			height: 36px;
			>span {
				width: 36px;
				height: 36px;
				&:after {
					top: 13px;
					width: 8px;
					height: 8px;
				}
			}
		}
	}
}

#story {
	position: relative;
	&:after,
	&:before {
		position: absolute;
		content: "";
		display: block;
		width: 300px;
		height: 300px;
		background-image: url(../img/common/bg-decoration.svg);
		background-repeat: no-repeat;
		background-size: contain;
		z-index: 1;
	}
	&:after {
		top: 10px;
		right: 10px;
	}
	&:before {
		bottom: 10px;
		left: 10px;
	}
	.inner {
		position: relative;
		z-index: 2;
	}
	.story-image-sp {
		margin-left: calc(50% - 50vw);
		padding-top: 20px;
	}
	.story-image-content {
		display: none;
	}
	p {
		&+p {
			margin-top: 1em;
		}
	}
	.read,
	.message02 {
		font-size: var(--font-xl);
		font-weight: 600;
	}
	.message {
		position: relative;
		padding-left: 30px;
		&:after {
			content: "";
			display: block;
			width: 20px;
			height: 1px;
			position: absolute;
			top: 12px;
			left: 0;
			background-color: var(--color-border-1);
		}
	}
	.ceo-wrap {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
		.ceo {
			text-align: right;
			img {
				width: 40%;
			}
		}
	}
	.story-image-pc {
		display: none;
	}
	@media (min-width: 1120px) {
		&:after,
		&:before {
			width: 600px;
			height: 600px;
		}
		&:after {
			top: 20px;
			right: auto;
			left: 20px;
		}
		&:before {
			bottom: 20px;
			left: auto;
			right: 20px;
		}
		.story-image-pc {
			display: block;
			margin-left: inherit;
			margin-right: calc(50% - 50vw);
			padding-top: 0;
		}
		.story-image-sp {
			display: none;
		}
		.message {
			padding-left: 45px;
			&:after {
				width: 35px;
				top: 14px;
			}
		}
		.ceo-wrap {
			margin-top: 50px;
			.ceo {
				width: 40%;
				text-align: right;
				img {
					width: auto;
				}
			}
		}
	}
}