@charset "utf-8";
:root {
  --main-color: #1D2080;
		--content-width: 97%;
		--content-max-width: 725px;
}

body {
	font-family: "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka,
		"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	color: #000;
	background-color: #fff;
	line-height: 1.6;
	text-align: justify;

	.sp-item {display: block !important;}
 .pc-item {display: none !important;}
}

@media screen and (min-width: 641px) {
body {
 .sp-item {display: none !important;}
	.pc-item {display: block !important;}
}
}

@media screen and (min-width: 768px) {
		br.sp-only {display: none;}
}
@media screen and (max-width: 767px) {
	br.pc-only {display: none;}
}

img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.wrap {
	width: var(--content-width);
	max-width: var(--content-max-width);
	margin: 0 auto;
}

/******************************
 header
******************************/
.bg-light {
	background-color: var(--main-color) !important;
}

.navbar {
 padding-top: 0;
 padding-bottom: 0;
 box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

@media screen and (min-width: 768px) {
.navbar-nav {
	width: 100%;
 max-width: 780px;
	justify-content: space-between;
}
}

.navbar-dark .navbar-nav .nav-link {
 color: #F0F0F0;
}

@media screen and (max-width: 767px) {
.navbar > .container {
	justify-content: right;
}
}

@media screen and (min-width: 768px) {
.navbar-expand-md .navbar-collapse {
 justify-content: center;
}
}

.navbar-toggler {
 border: none;
}
.navbar-toggler:focus {
 box-shadow: none;
}

.nav-link {
	font-size: 14px;
}

/******************************
 btn,cta,entry
******************************/
.btn {
	display: block;
}

.btn img:hover{
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.entry-item .btn {
	background-color: #FFF;
	border: none;
}

.entry {
	background: var(--main-color);
	padding: 2em 0;
}

.entry-box {
	width: 97%;
	max-width: 725px;
	margin: 0 auto;
	padding: 2em 0;
	background: #FFF;
	border: 1px solid #9c9c9c;
}

.entry-item {
	width: 94%;
	max-width: 580px;
	margin: 0 auto 1em;
	text-align: left;
}
@media screen and (min-width: 768px) {
.entry-item {
	font-size: 16px;
}
}

.form-label {
	margin-bottom: 0.2em;
}

.required,
.optional {
	color: #FFF;
	font-size: 0.65em;
	text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 border-radius: 2px;
	margin-right: 2px;
	padding: 2px 4px;
}

.required {
	background: #DC3545;
}
.optional {
	background: #9c9c9c;
}

.form-control,
.form-select,
.form-check-input {
	border: 1px solid #949494;
	border-radius: 2px;
}

.form-control:focus,
.form-select:focus {
	border-color: #2B30BE;
	box-shadow: 0 0 0 0.1rem rgb(43 48 190 / 20%);
}

.form-check {
	padding-left: 0.7em;
}

.form-check-label {
	padding-left: 0.2em;
}

.form-check .form-check-input {
	margin-left: -0.5em;
}

.form-control:disabled,
.form-control[readonly] {
	background-color: #f8f8f8;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

input[type="tel"].tel {
	float: left;
	width: 5em;
	margin-right: 1em;
}

@media screen and (max-width: 374px) {
.form-check-label {
	font-size: 4vw;
}
}

.cta button,
.entry button {
	width: 96%;
	max-width: 483px;
	display: block;
	margin: 0 auto;
}

/******************************
 contents
******************************/
.main {
	background: #F0F0F0;
	padding-top: 38px;
	padding-bottom: 0;
}
@media screen and (min-width: 641px) {
.main {
	padding-top: 40px;
}
}

.main h1 {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.cta {
	background: #D6EAFF;
	padding: 1em 0 2em;
}
@media screen and (min-width: 641px) {
.cta {
	padding: 1.5em 0 2em;
}
}

.problem {
	background: #F6F6F6;
	padding: 1em 0 2em;
}
@media screen and (min-width: 768px) {
.problem {
	padding: 2em 0 2.5em;
}
}

.problem-box {
	width: var(--content-width);
	max-width: var(--content-max-width);
	margin: 1em auto;
}

.feature {
	padding: 1.5em 0 2em;
}
@media screen and (min-width: 768px) {
.feature {
	padding: 2.5em 0;
}
}

.feature p {
	width: 94%;
	max-width: var(--content-max-width);
	margin: 0 auto;
	text-align: center;
	font-size: 0.8em;
}

.ttl-bg {
	background: var(--main-color);
}

.reason .wrap {
	padding: 1em 0;
}

@media screen and (min-width: 641px) {
.reason .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.reason-box {
 width: 49%;
}
}

.reason-box {
	border: 1px solid #D1D1D1;
	margin-bottom: 1em;
}

.reason-box-inner {
	width: 93%;
	margin: 0.75em auto 1.25em;
}
@media screen and (min-width: 641px) {
.reason-box-inner {
	margin: 1em auto 1.25em;
}
}

.reason h3 {
	margin-bottom: 0.5em;
}

.voice {
	background: #F6F6F6;
	padding: 1.5em 0;
}

.voice h2 {
	margin-bottom: 1em;
}

.voice-box {
	border: 1px solid #D1D1D1;
	background: #FFF;
	margin-bottom: 1em;
}

.voice-box-inner {
	width: 93%;
	margin: 0.75em auto 1.25em;
}
@media screen and (min-width: 641px) {
.voice-box-inner {
	margin: 1em auto 1.25em;
}
}

.voice h3 img {
	max-width: calc(100% + 30px);
	margin-left: -20px;
}
@media screen and (min-width: 391px) {
.voice .wrap {
	width: 92%;
}
}
@media screen and (min-width: 430px) {
.voice h3 img {
	margin-left: -24px;
}
}
@media screen and (min-width: 641px) {
.voice h3 img {
	margin-left: -34px;
}
}
@media screen and (min-width: 725px) {
.voice h3 img {
	max-width: calc(100% + 50px);
	margin-left: -40px;
}
}

.voice-contents {
	margin-top: 0.5em;
}
@media screen and (min-width: 641px) {
.voice-contents {
	display: flex;
	justify-content: space-between;
}
.vcl {
	width: 61%;
	line-height: 1.8;
}
.vcr {
	width: 36%;
}
}

.flow .wrap {
	margin: 1.5em auto;
}

.faq {
	background: #F5F5F5;
	padding: 1.5em 0;
}

.faq-box {
	background: #FFF;
	margin-bottom: 1em;
}

.faq-box-inner {
	width: 95%;
	max-width: 670px;
	margin: 0 auto;
	padding: 1em 0;
}

.faq-q, .faq-a {
	display: flex;
	justify-content: space-between;
}
@media screen and (min-width: 641px) {
.faq-q, .faq-a {
	align-items: center;
}
}

.faq-q {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.faq-label {
	width: 10%;
}

.faq-text {
	width: 89%;
}
@media screen and (min-width: 641px) {
.faq-label {
	width: 6%;
}
.faq-text {
	width: 92%;
}
}

/******************************
 footer
******************************/

footer {
	color: #fff;
	background: var(--main-color);
	font-size: 15px;
	padding: 30px 0;
}

footer .container {
	max-width: 640px;
	margin-bottom: 1.5em;
	padding: 0 2em;
}

footer ul {
	margin-bottom: 0;
	padding-left: 0;
}

footer ul li {
	line-height: 2;
}

footer a {
	color: #fff;
	text-decoration: none;
}

footer .copy {
	text-align: center;
}


/******************************
 terms,privacy,company
******************************/
@media screen and (min-width: 768px) {
	.terms, .privacy, .company {
	background: #F6F6F6;
}
}

.terms .main,
.privacy .main,
.company .main {
	width: var(--content-width);
	max-width: var(--content-max-width);
	margin: 2em auto;
	padding: 1em;
	font-size: 14px;
	background: #FFF;
}

@media screen and (min-width: 768px) {
.terms .main,
.privacy .main,
.company .main {
	padding: 2em 4em;
}
}

.terms h1,
.privacy h1,
.company h1 {
	color: var(--main-color);
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1em;
}

.terms h2,
.privacy h2 {
	font-weight: bold;
	text-align: left;
	margin-top: 1.5em;
	padding-bottom: 0.5em;
}

.privacy .table {
	margin-top: 2em;
}

.company .table > :not(caption) > * > * {
	padding: 1.5rem 1rem;
}

.company th {
	width: 20%;
	text-align: left;
	background: #F9F9F9;
}

.link-none {
	pointer-events: none;
}

/******************************
 footer最下部固定
******************************/
html {
	height: 100%;
}
body {
	height: 100%;
}
footer {
	position: sticky;
	top: 100vh;
}