@charset "utf-8";

:root {
	--color-theme: #003F71;
	--color-sub: #FEBED0;
	--content-padding-desktop: 1%;
	--content-padding-sp: 3%;
}

/* ===================================================================
ADD
=================================================================== */

.s-header__nav-icon::before {
	-webkit-mask-image: url(/shared/images/icon/external.svg);
	mask-image: url(/shared/images/icon/external.svg);
}

.s-drawer-menu__nav-item._external::after {
	-webkit-mask-image: url(/shared/images/icon/external.svg);
	mask-image: url(/shared/images/icon/external.svg);
}

.s-header-slider__link-icon::before {
	-webkit-mask-image: url(/shared/images/icon/external.svg);
	mask-image: url(/shared/images/icon/external.svg);
}

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

/* COMMON HTML, BODY
--------------------*/

body, html {
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo UI, Meiryo, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic", YuGothic, Verdana, "M+ 1p", sans-serif;
	overflow-x: clip;
	min-width: 320px;
	color: #313131;
	font-size: 14px;
	letter-spacing: .04em;
}

/* COMMON CONTAINER
--------------------*/

.ss-container {
	position: relative;
	width: 100%;
	max-width: calc(1000px + (var(--content-padding-desktop) * 2));
	margin: 0 auto;
	padding: 0 var(--content-padding-desktop);
}

/* COMMON LAYOUT
--------------------*/

.ss-layout {
	margin: 0 0 40px;
}

.ss-small-layout {
	margin: 0 0 20px;
}

/* COMMON HEADING
--------------------*/

.ss-heading {
	width: 100%;
	margin: 2px 0 40px;
	color: var(--color-theme);
	font-size: 30px;
	border-top: solid 3px var(--color-theme);
}

.ss-heading-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: calc(1000px + (var(--content-padding-desktop) * 2));
	margin: 0 auto;
	padding: 0 var(--content-padding-desktop);
}

.ss-heading-inner h1 {
	display: inline-flex;
	flex-direction: column;
	padding: 25px 0 0;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	letter-spacing: .12em;
	border-top: solid 4px var(--color-theme);
}

/* COMMON OVERVIEW
--------------------*/

.ss-overview {
	margin: 0 0 40px;
	color: var(--color-theme);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.714;
}

/* COMMON TEXT
--------------------*/

.ss-text-center,
.ss-text-left,
.ss-text-right { line-height: 1.714 }

.ss-text-center { text-align: center }
.ss-text-left { text-align: left }
.ss-text-right { text-align: right }

.ss-text-center.pc-m5, .ss-text-left.pc-m5, .ss-text-right.pc-m5 { margin: 0 0 5px }
.ss-text-center.pc-m10, .ss-text-left.pc-m10, .ss-text-right.pc-m10 { margin: 0 0 10px }
.ss-text-center.pc-m15, .ss-text-left.pc-m15, .ss-text-right.pc-m15 { margin: 0 0 15px }
.ss-text-center.pc-m20, .ss-text-left.pc-m20, .ss-text-right.pc-m20 { margin: 0 0 20px }
.ss-text-center.pc-m25, .ss-text-left.pc-m25, .ss-text-right.pc-m25 { margin: 0 0 25px }
.ss-text-center.pc-m30, .ss-text-left.pc-m30, .ss-text-right.pc-m30 { margin: 0 0 30px }
.ss-text-center.pc-m35, .ss-text-left.pc-m35, .ss-text-right.pc-m35 { margin: 0 0 35px }
.ss-text-center.pc-m40, .ss-text-left.pc-m40, .ss-text-right.pc-m40 { margin: 0 0 40px }
.ss-text-center.pc-m45, .ss-text-left.pc-m45, .ss-text-right.pc-m45 { margin: 0 0 45px }
.ss-text-center.pc-m50, .ss-text-left.pc-m50, .ss-text-right.pc-m50 { margin: 0 0 50px }

/* COMMON TEXT RULE
--------------------*/

.pc-fs12 {
	font-size: 12px;
}

.bold {
	font-weight: 600;
}

.blue {
	color: var(--color-theme);
}

/* COMMON THREE DOTS
--------------------*/

.ss-threedots-1line {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

/* COMMON LINK
--------------------*/

.ss-link a {
	color: #ED7A9C;
	text-decoration: underline;
}

/* COMMON LIST
--------------------*/

.ss-list {
	display: flex;
	justify-content: center;
	margin: 0 0 30px;
}

.ss-list ul li {
	position: relative;
	padding: 0 0 0 1em;
	line-height: 1.714;
}

.ss-list ul li:before {
	content: '';
	position: absolute;
	top: 9px;
	left: 0;
	width: 5px;
	height: 5px;
	background: var(--color-sub);
	border-radius: 50%;
}

.ss-list ul li + li {
	margin: 10px 0 0;
}

/* COMMON ACCORDION
--------------------*/

.ss-accordion {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto 30px;
}

.ss-accordion-title {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 44px;
	padding: 5px 35px;
	color: #FFF;
	font-weight: 600;
	text-align: center;
	background: var(--color-theme);
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .3s, border-radius .3s;
}

.ss-accordion-title:hover {
	background: #00233E;
}

.ss-accordion-title > svg {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 10px;
	width: 14px;
	fill: #FFF;
	transition: transform .3s;
}

.ss-accordion-title.active {
	border-radius: 5px 5px 0 0;
}

.ss-accordion-title.active > svg {
	transform: translate(0, -50%) rotate3d(1, 0, 0, .5turn)
}

.ss-accordion-detail {
	display: none;
}

.ss-accordion-detail-inner {
	padding: 30px;
	border: 1px solid var(--color-theme);
	border-radius: 0 0 5px 5px;
}

/* COMMON ACCEPT
--------------------*/

.ss-accept {
	display: flex;
	justify-content: center;
	align-items: center;
}

.ss-accept input[type=checkbox] {
	display: none;
}

.ss-accept input[type=checkbox] + label {
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0 30px;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
}

.ss-accept input[type=checkbox] + label:before {
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #FFF;
	border: 2px solid #C8D5E1;
	border-radius: unset;
	transition: border .3s;
}

.ss-accept input[type=checkbox] + label:hover:before {
	border: 2px solid #8785A5;
}

.ss-accept input[type=checkbox] + label:after {
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	transform: unset;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0;
	background: #ED7A9C;
	border: unset;
	opacity: 0;
	transition: opacity .3s;
}

.ss-accept input[type=checkbox]:checked + label:after {
	opacity: 1;
}

/* COMMON BUTTON
--------------------*/

.ss-btn-inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

.ss-btn-inner.pc-start {
	justify-content: flex-start;
}

.ss-btn-inner.pc-m5 { margin: 0 auto 5px }
.ss-btn-inner.pc-m10 { margin: 0 auto 10px }
.ss-btn-inner.pc-m15 { margin: 0 auto 15px }
.ss-btn-inner.pc-m20 { margin: 0 auto 20px }
.ss-btn-inner.pc-m25 { margin: 0 auto 25px }
.ss-btn-inner.pc-m30 { margin: 0 auto 30px }
.ss-btn-inner.pc-m35 { margin: 0 auto 35px }
.ss-btn-inner.pc-m40 { margin: 0 auto 40px }
.ss-btn-inner.pc-m45 { margin: 0 auto 45px }
.ss-btn-inner.pc-m50 { margin: 0 auto 50px }

.ss-btn {
	width: 100%;
	max-width: 300px;
	margin: 0 25px;
}

.ss-btn-inner.pc-start .ss-btn {
	margin: 0;
}

.ss-btn a,
.ss-btn button,
.ss-btn input {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 5px;
	color: #FFF;
	font-weight: 600;
	text-align: center;
	background: var(--color-theme);
	border: 2px solid var(--color-theme);
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .3s, border .3s;
}

.ss-btn a:hover,
.ss-btn button:hover,
.ss-btn input:hover {
	background: #00233E;
	border: 2px solid #00233E;
}

/* COMMON BUTTON DISABLED
--------------------*/

.ss-btn.disabled {
	pointer-events: none;
}

.ss-btn.disabled a,
.ss-btn.disabled button,
.ss-btn.disabled input {
	background: #C8D5E1;
	border: 2px solid #C8D5E1;
}

/* COMMON BUTTON NONE
--------------------*/

.ss-btn.none {
	display: none;
}

/* COMMON LOADING
--------------------*/

.ss-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 150px;
}

.ss-loading-circle {
	width: 75px;
	height: 75px;
	padding: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	background: rgb(0, 63, 113);
	background: linear-gradient(0deg, rgba(0, 63, 113, .1) 33%, rgba(0, 63, 113, 1) 100%);
	animation: spin .8s linear 0s infinite;
}
  
.ss-loading-core {
	width: 100%;
	height: 100%;
	background: #FFF;
	border-radius: 50%;
}

@keyframes spin {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(359deg);
	}
}

/* COMMON HIDDEN BODY
--------------------*/

.ss-hidden-body {
	height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

.ss-hidden-body.is-visible {
	height: auto;
	opacity: 1;
	overflow: visible;
	visibility: visible;
}

/* COMMON BEFORE, AFTER
--------------------*/

.ss-after {
	display: none;
}

/* ===================================================================
FORM
=================================================================== */

/* FORM COMMON MESSAGE
--------------------*/

#desc ol li,
.ss-form-before-message ol li,
.ss-form-after-message ol li {
	counter-increment: number;
	position: relative;
	padding: 0 0 0 2em;
	line-height: 1.714;
}

#desc ol li:before,
.ss-form-before-message ol li:before,
.ss-form-after-message ol li:before {
	content: counter(number) '.';
	position: absolute;
	left: 0;
	font-weight: 700;
}

#desc ul li,
.ss-form-before-message ul li,
.ss-form-after-message ul li {
	position: relative;
	padding: 0 0 0 1em;
	line-height: 1.714;
}

#desc ul li:before,
.ss-form-before-message ul li:before,
.ss-form-after-message ul li:before {
	content: '';
	position: absolute;
	top: 9px;
	left: 0;
	width: 5px;
	height: 5px;
	background: #313131;
	border-radius: 50%;
}

#desc hr,
.ss-form-before-message hr,
.ss-form-after-message hr {
	width: 100%;
	height: 1px;
	margin: 20px 0;
	background: #C2CFD3;
	border: none;
}

#desc a,
.ss-form-before-message a,
.ss-form-after-message a {
	color: #2489D2;
	text-decoration: underline;
}

#desc blockquote,
.ss-form-before-message blockquote,
.ss-form-after-message blockquote {
	position: relative;
	padding: 10px 10px 10px 35px;
	background: rgba(236, 236, 236, .6);
	border-top: 2px solid var(--color-theme);
}

#desc blockquote:before,
.ss-form-before-message blockquote:before,
.ss-form-after-message blockquote:before {
	content: '\f10d';
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	left: 10px;
	font-family: FontAwesome;
	color: var(--color-sub);
	font-size: 20px;
	line-height: 1;
}

#desc table,
.ss-form-before-message table,
.ss-form-after-message table {
	position: relative;
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

#desc th,
#desc td,
.ss-form-before-message th,
.ss-form-before-message td,
.ss-form-after-message th,
.ss-form-after-message td {
	position: relative;
	margin: 0;
	padding: 15px;
	vertical-align: middle;
}

#desc th,
.ss-form-before-message th,
.ss-form-after-message th {
	color: #003F71;
	font-weight: 600;
	text-align: center;
	background: #ECECEC;
	border: 1px solid #FFF;
}

#desc td,
.ss-form-before-message td,
.ss-form-after-message td {
	color: #313131;
	background: #FFF;
	border: 1px solid #ECECEC;
}

/* FORM COMMON ATTENTION
--------------------*/

.ss-form-common-attention {
	display: none;
}

.ss-form-common-attention-inner {
	padding: 15px;
	color: #FFF;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	line-height: 1.714;
	background: var(--color-sub);
}

/* FORM CONFIRM
--------------------*/

.ss-form-confirm {
	display: none;
}

/* FORM INNER
--------------------*/

.ss-form-inner {
	display: flex;
	justify-content: space-between;
}

.ss-form-center-inner {
	display: flex;
	justify-content: center;
}

/* FORM CONTENT
--------------------*/

.ss-form-inner .ss-form-content {
	width: 48%;
}

.ss-form-center-inner .ss-form-content {
	width: 50%;
}

.ss-form-inner .ss-form-content.pc-w100,
.ss-form-center-inner .ss-form-content.pc-w100 {
	width: 100%;
}

/* FORM LABEL
--------------------*/

.ss-form-label-inner {
	display: flex;
	align-items: baseline;
	min-height: 20px;
	margin: 0 0 15px;
}

.ss-form-label {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

.ss-form-label + span {
	margin: 0 0 0 10px;
	font-size: 12px;
}

/* FORM SUB LABEL
--------------------*/

.ss-form-sub-label-inner {
	display: flex;
	align-items: baseline;
	min-height: 18px;
	margin: 0 0 15px;
}

.ss-form-sub-label {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 18px;
}

/* FORM REMARKS
--------------------*/

.ss-form-remarks {
	margin: 0 0 15px;
}

/* FORM REQUIRED ICON
--------------------*/

.ss-form-required-icon {
	flex: none;
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 3px 6px 2px;
	color: #FFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	background: #CF121B;
	border-radius: 3px;
}

/* FORM ANY ICON
--------------------*/

.ss-form-any-icon {
	flex: none;
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 3px 6px 2px;
	color: #FFF;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	background: #90A4AE;
	border-radius: 3px;
}

/* FORM ITEM
--------------------*/

.ss-form-item ::placeholder {
	color: rgba(49, 49, 49, .4);
}

.ss-form-item-under {
	margin: 5px 0 0;
}

/* FORM ITEM INPUT, SELECT
--------------------*/

.ss-form-item input,
.ss-form-item textarea,
.ss-form-item select {
	display: block;
	width: 100%;
	font: unset;
	color: #313131;
	font-size: 16px;
	font-weight: 400;
	background: rgba(23, 97, 159, .05);
	border: 2px solid #C8D5E1;
	border-radius: 5px;
	transition: background-color .3s, border .3s;
}

.ss-form-item input,
.ss-form-item select {
	height: 50px;
}

.ss-form-item textarea {
	height: 150px;
	resize: none;
}

.ss-form-item input,
.ss-form-item textarea {
	padding: 5px 10px;
}

.ss-form-item select {
	padding: 5px 35px 5px 10px;
}

.ss-form-item input[type=date] {
	text-align: center;
	line-height: 30px;
}

.ss-form-item select.disabled {
	opacity: .3;
	pointer-events: none;
}

.ss-form-item .select {
	position: relative;
	display: block;
	height: auto;
	background: transparent;
	border-radius: unset;
	z-index: unset;
	cursor: initial;
}

.ss-form-item .select:after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translate(0, -50%) rotate(45deg);
	right: 15px;
	width: 8px;
	height: 8px;
	border-right: 2px solid #C8D5E1;
	border-bottom: 2px solid #C8D5E1;
	z-index: 1;
	pointer-events: none;
}

.ss-form-item input:hover,
.ss-form-item textarea:hover,
.ss-form-item select:hover {
	background: #FFF;
}

.ss-form-item input:focus,
.ss-form-item textarea:focus,
.ss-form-item select:focus {
	background: #FFF;
	border: solid 2px #8785A5;
}

/* FORM ITEM INPUT, SELECT ERROR
--------------------*/

.ss-form-item.ss-form-error-item input,
.ss-form-item.ss-form-error-item select,
.ss-form-item .error input.form-error,
.ss-form-item .error select.form-error {
	background: rgba(230, 15, 51, .05);
}

/* FORM ITEM RADIO
--------------------*/

.ss-form-item .radio {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	min-height: 50px;
}

.ss-form-item .radio > div {
	padding: 2.5px 0;
}

.ss-form-item input[type=radio] {
	display: none;
}

.ss-form-item input[type=radio] + label {
	position: relative;
	display: block;
	margin: 0 20px 0 0;
	padding: 0 0 0 30px;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
}

.ss-form-item input[type=radio] + label:before {
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #FFF;
	border: 2px solid #C8D5E1;
	border-radius: 50%;
	transition: border .3s;
}

.ss-form-item input[type=radio] + label:hover:before {
	border: 2px solid #8785A5;
}

.ss-form-item input[type=radio] + label:after {
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0;
	background: #ED7A9C;
	border-radius: 50%;
	opacity: 0;
	transition: opacity .3s;
}

.ss-form-item input[type=radio]:checked + label:after {
	opacity: 1;
}

/* FORM ITEM QUIZ
--------------------*/

.ss-form-item .quiz {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.ss-form-item .quiz > div {
	width: 49%;
	padding: 10px 0;
}

.ss-form-item .quiz input[type=radio] + label {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 10px;
	background: #FFF;
	border: 2px solid #C8D5E1;
	border-radius: 25px;
	transition: color .3s, background-color .3s, border .3s;
}

.ss-form-item .quiz input[type=radio] + label:hover {
	border: solid 2px #8785A5 !important;
}

.ss-form-item .quiz input[type=radio]:checked + label {
	color: #FFF !important;
	font-weight: 600;
	background: var(--color-theme);
	border: solid 2px var(--color-theme) !important;
}

.ss-form-item .quiz input[type=radio] + label:before,
.ss-form-item .quiz input[type=radio] + label:after {
	content: none;
}

/* FORM ITEM CHECKBOX
--------------------*/

.ss-form-item .checkbox {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	min-height: 50px;
}

.ss-form-item .checkbox > div {
	padding: 2.5px 0;
}

.ss-form-item input[type=checkbox] {
	display: none;
}

.ss-form-item input[type=checkbox] + label {
	position: relative;
	display: block;
	margin: 0 20px 0 0;
	padding: 0 0 0 30px;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
}

.ss-form-item input[type=checkbox] + label:before {
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #FFF;
	border: 2px solid #C8D5E1;
	border-radius: unset;
	transition: border .3s;
}

.ss-form-item input[type=checkbox] + label:hover:before {
	border: 2px solid #8785A5;
}

.ss-form-item input[type=checkbox] + label:after {
	box-sizing: border-box;
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	transform: unset;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0;
	background: #ED7A9C;
	border: unset;
	opacity: 0;
	transition: opacity .3s;
}

.ss-form-item input[type=checkbox]:checked + label:after {
	opacity: 1;
}

/* FORM ITEM FILE
--------------------*/

.ss-form-item input[type=file] {
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	visibility: hidden;
	opacity: 0;
}

.ss-form-item > .ss-form-file-label {
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	padding: 5px 10px;
	font: unset;
	color: #313131;
	font-weight: 400;
	background: rgba(23, 97, 159, .05);
	border: 2px solid #C8D5E1;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .3s, border .3s;
}

.ss-form-item > .ss-form-file-label:hover {
	background: #FFF;
	border: solid 2px #8785A5;
}

/* FORM ITEM BIRTHDAY
--------------------*/

.ss-form-content.birthday .ss-form-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.ss-form-content.birthday .ss-form-item .select:nth-child(1) {
	width: 34%;
}

.ss-form-content.birthday .ss-form-item .select:nth-child(3),
.ss-form-content.birthday .ss-form-item .select:nth-child(5) {
	width: 21%;
}

.ss-form-content.birthday .ss-form-item .year,
.ss-form-content.birthday .ss-form-item .month,
.ss-form-content.birthday .ss-form-item .day {
	width: 8%;
	font-size: 16px;
	text-align: center;
}

/* FORM ITEM POSTAL CODE
--------------------*/

.ss-form-content.postalCode .ss-form-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.ss-form-content.postalCode .ss-form-item .input:nth-child(1) {
	width: 35%;
}

.ss-form-content.postalCode .ss-form-item .input:nth-child(3) {
	width: 55%;
}

.ss-form-content.postalCode .ss-form-item .hyphen {
	width: 10%;
	font-size: 16px;
	text-align: center;
}

/* FORM ITEM ADDRESS
--------------------*/

.ss-form-content.address {
	margin: 0;
	padding: 0;
	font-size: inherit;
	border: unset;
	border-radius: unset;
}

/* FORM ITEM ALERT REGIONS
--------------------*/

.ss-form-content.alertRegions .ss-form-item {
	display: flex;
	justify-content: space-between;
}

.ss-form-content.alertRegions .ss-form-item .select {
	width: calc(300 / 1000 * 100%);
}

/* FORM USERDATA NAME
--------------------*/

.ss-form-content.userdataname .ss-form-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ss-form-content.userdataname .ss-form-item .input {
	width: 48%;
}

/* FORM HR
--------------------*/

.ss-form-hr {
	width: 100%;
	height: 1px;
	margin: 0 0 40px;
	background: #C2CFD3;
	border: none;
}

/* FORM ERROR
--------------------*/

.ss-form-error-message-inner {
	margin: 0 0 40px;
}

.ss-form-error-message-inner.none {
	display: none;
}

.ss-form-error-message,
.error-message {
	color: #E60F33;
	line-height: 1.714;
}

/* FORM APPLY
--------------------*/

.ss-form-apply {
	display: none;
	line-height: 1.714;
	word-break: break-all;
}

.ss-form-apply-detail {
	margin: 0 0 20px;
	border: 1px solid #E60F33;
}

.ss-form-apply-detail-head {
	padding: 15px;
	color: #FFF;
	font-weight: 600;
	text-align: center;
	background: #E60F33;
}

.ss-form-apply-detail-body {
	padding: 15px;
}

.ss-form-apply-terms {
	height: 200px;
	margin: 0 0 15px;
	padding: 15px;
	border: 1px solid var(--color-theme);
	overflow-y: auto;
}

/* ===================================================================
CERTIFICATION
=================================================================== */

/* CERTIFICATION
--------------------*/

.ss-form-certification {
	margin: 0 0 50px;
}

.ss-form-certification ul {
	display: flex;
	justify-content: center;
}

.ss-form-certification ul li {
	width: 60px;
	margin: 0 10px;
	border-bottom: 3px solid var(--color-sub);
}

.ss-form-certification ul li input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 5px;
	color: #313131;
	font-size: 50px;
	font-weight: 600;
	line-height: 50px;
	background: #FFF;
	text-align: center;
	caret-color: var(--color-sub);
	transition: background-color .3s;
}

.ss-form-certification ul li ::placeholder {
	color: #C8D5E1;
}

.ss-form-certification ul li input:focus {
	background: #C8D5E1;
}

@media screen and (max-width: 768px) {

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

	/* COMMON CONTAINER
	--------------------*/

	.ss-container {
		max-width: calc(1000px + (var(--content-padding-sp) * 2));
		padding: 0 var(--content-padding-sp);
	}

	/* COMMON HEADING
	--------------------*/

	.ss-heading {
		margin: 0 0 40px;
		font-size: 25px;
	}

	.ss-heading-inner {
		max-width: calc(1000px + (var(--content-padding-sp) * 2));
		padding: 0 var(--content-padding-sp);
	}

	.ss-heading-inner h1 {
		padding: 20px 0 0;
	}

	/* COMMON TEXT
	--------------------*/

	.ss-text-center.sp-m5, .ss-text-left.sp-m5, .ss-text-right.sp-m5 { margin: 0 0 5px }
	.ss-text-center.sp-m10, .ss-text-left.sp-m10, .ss-text-right.sp-m10 { margin: 0 0 10px }
	.ss-text-center.sp-m15, .ss-text-left.sp-m15, .ss-text-right.sp-m15 { margin: 0 0 15px }
	.ss-text-center.sp-m20, .ss-text-left.sp-m20, .ss-text-right.sp-m20 { margin: 0 0 20px }
	.ss-text-center.sp-m25, .ss-text-left.sp-m25, .ss-text-right.sp-m25 { margin: 0 0 25px }
	.ss-text-center.sp-m30, .ss-text-left.sp-m30, .ss-text-right.sp-m30 { margin: 0 0 30px }
	.ss-text-center.sp-m35, .ss-text-left.sp-m35, .ss-text-right.sp-m35 { margin: 0 0 35px }
	.ss-text-center.sp-m40, .ss-text-left.sp-m40, .ss-text-right.sp-m40 { margin: 0 0 40px }
	.ss-text-center.sp-m45, .ss-text-left.sp-m45, .ss-text-right.sp-m45 { margin: 0 0 45px }
	.ss-text-center.sp-m50, .ss-text-left.sp-m50, .ss-text-right.sp-m50 { margin: 0 0 50px }

	/* COMMON TEXT RULE
	--------------------*/

	.sp-fs12 {
		font-size: 12px;
	}

	.sp-center { text-align: center }
	.sp-left { text-align: left }
	.sp-right { text-align: right }

	/* COMMON BUTTON
	--------------------*/

	.ss-btn-inner {
		flex-direction: column;
	}

	.ss-btn,
	.ss-btn-inner.pc-start .ss-btn {
		margin: 0 auto;
	}

	.ss-btn + .ss-btn {
		margin-top: 25px;
	}

	/* ===================================================================
	FORM
	=================================================================== */

	/* FORM COMMON ATTENTION
	--------------------*/

	.ss-form-common-attention-inner {
		padding: 10px;
		font-size: 16px;
		text-align: left;
	}

	/* FORM INNER
	--------------------*/

	.ss-form-inner,
	.ss-form-center-inner {
		display: block;
	}

	/* FORM CONTENT
	--------------------*/

	.ss-form-inner .ss-form-content,
	.ss-form-center-inner .ss-form-content {
		width: 100%;
	}

	.ss-form-content + .ss-form-content {
		margin: 40px 0 0;
	}

	/* FORM LABEL
	--------------------*/

	.ss-form-label-inner.sp-block {
		display: block;
	}

	.ss-form-label-inner.sp-block .ss-form-label + span {
		display: block;
		margin: 5px 0 0;
	}

	/* FORM ITEM QUIZ
	--------------------*/

	.ss-form-item .quiz {
		display: block;
	}

	.ss-form-item .quiz > div {
		width: 100%;
		padding: 0;
	}

	.ss-form-item .quiz > div + div {
		margin: 20px 0 0;
	}

	/* FORM ITEM ALERT REGIONS
	--------------------*/

	.ss-form-content.alertRegions .ss-form-item {
		display: block;
	}

	.ss-form-content.alertRegions .ss-form-item .select {
		width: 100%;
	}

	.ss-form-content.alertRegions .ss-form-item .select:nth-child(2),
	.ss-form-content.alertRegions .ss-form-item .select:nth-child(3) {
		margin-top: 15px;
	}

	/* ===================================================================
	CERTIFICATION
	=================================================================== */

	/* CERTIFICATION
	--------------------*/

	.ss-form-certification {
		margin: 0 0 40px;
	}

	.ss-form-certification ul li {
		width: 13%;
		margin: 0 calc(22% / 12);
	}

	.ss-form-certification ul li input {
		padding: 2px;
		font-size: 40px;
		line-height: 40px;
	}

}