@charset "utf-8";
/*
	Last Update: 2023/06/12
	Auther: yt
*/
/*===================================================================
	page layout
===================================================================*/
#page_title { position:relative; }
#page_title .img_back { height:35vw; max-height:370px; }
#page_title .title_wrap { text-align:center; }
#page_title .main { font-weight:bold; }
#page_title .sub {}
	@media (max-width: 575px){
		#page_title .main { font-size:1.25em; }
	}
	@media (min-width: 576px) and (max-width: 767px){
		#page_title .main { font-size:1.5em; }
	}
	@media (min-width: 768px) and (max-width: 991px){
		#page_title .main { font-size:2em; letter-spacing:3px; }
	}
	@media (min-width: 992px){
		#page_title .main { font-size:2.25em; letter-spacing:3px; }
	}

#pankuzu { font-size:13px; padding-top:10px; padding-bottom:10px; }
#pankuzu a {}
#pankuzu li, #pankuzu li:before { vertical-align:baseline; line-height:100%; }
#pankuzu li:before { display:inline-block; }
#pankuzu ul > li:not(:first-child):before { content:"/"; margin:0 8px; color:#D9D9D9; }
body.pc #pankuzu a:hover { text-decoration:underline; }
	@media (max-width: 575px){
		#pankuzu ul { text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
		#pankuzu li { display:inline; }
	}
	@media (min-width: 576px){
		#pankuzu li { display:inline-block; }
	}

/*===================================================================
	flow
===================================================================*/
#flow {}
#flow .flow_title { font-size:1.25em; }
#flow .flow_wrap .flow_unit { position:relative; }
#flow .flow_wrap .flow_unit .text { display:flex; align-items:center; justify-content:center; font-size:1.2em; }
#flow .flow_wrap .flow_unit:not(._no_arrow) { margin-bottom:80px; }
#flow .flow_wrap .flow_unit:not(._no_arrow)::after { content:""; border-top:50px solid #e5004f; border-left:25px solid transparent; border-right:25px solid transparent; display:block; position:absolute; bottom:-40px; left:50%; transform:translate(-50%, 50%); }
@media (max-width:991px) {
	#flow .flow_wrap .box_in { padding:20px; }
	#flow .flow_wrap .flow_unit .text { font-size:1em; }
}

/* flow form refresh */
#flow #form .box {
	border: 1px solid #d7e4f2;
	box-shadow: 0 12px 30px rgba(22, 52, 92, 0.08);
}
#flow #form .center.wrapper {
	max-width: 1000px;
}
#flow #form .box_in { padding: 28px; }
#flow #form .tbl_form tr > th { background: #f4f8fd; }
#flow #form .tbl_form tr > * { border-bottom-color: #dbe5f0; }
#flow #form input[type="text"],
#flow #form input[type="email"],
#flow #form input[type="password"],
#flow #form input[type="tel"],
#flow #form select {
	border: 1px solid #b9cce3;
	border-radius: 8px;
	padding: 11px 12px;
	background: #fff;
}
#flow #form input:focus,
#flow #form select:focus {
	border-color: #2f6fb0;
	box-shadow: 0 0 0 3px rgba(47, 111, 176, 0.15);
	outline: 0;
}
#flow #form .need {
	border-color: #2f6fb0;
	background: #2f6fb0;
}

#flow #form .flow_simple_form {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
#flow #form .flow_item + .flow_item {
	margin-top: 16px;
}
#flow #form .flow_item._line {
	padding-bottom: 14px;
	border-bottom: 1px solid #dbe5f0;
}
#flow #form .flow_item._no_line {
	padding-bottom: 0;
	border-bottom: 0;
}
#flow #form .flow_label {
	display: block;
	margin-bottom: 7px;
	font-weight: bold;
}
#flow #form .flow_req {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 12px;
	background: #e53935;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.1;
	vertical-align: middle;
}
#flow #form .flow_note {
	margin: -2px 0 7px;
	font-size: 0.84em;
	color: #d93025;
}
#flow #form .flow_note._plain {
	color: #222;
}
#flow #form .flow_value {
	padding: 9px 0 3px;
	font-size: 1.05em;
}
#flow #form .flow_item._readonly {
	padding-bottom: 8px;
}
#flow #form .flow_zip_row {
	display: flex;
	gap: 10px;
	align-items: center;
}
#flow #form .flow_zip_input {
	display: flex;
	align-items: center;
	gap: 6px;
}
#flow #form .flow_prefix {
	font-weight: bold;
}
#flow #form .flow_zip_input input {
	width: 160px;
}
#flow #form .flow_submit {
	margin-top: 14px;
}
#flow #form .flow_confirm_notice {
	max-width: 760px;
	margin: 0 auto 16px;
	padding: 10px 12px;
	border: 1px solid #ffd9b3;
	background: #fff8ef;
	color: #8a4b08;
	border-radius: 8px;
	font-size: 0.92em;
}
#flow #form .flow_confirm_form .flow_value_box {
	min-height: auto;
	padding: 2px 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #1f2d3d;
}

/* ===== アンケート ===== */
#flow #form .flow_survey {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px solid #dbe5f0;
}
#flow #form .flow_survey_head {
	margin-bottom: 18px;
}
#flow #form .flow_survey_title {
	margin: 0 0 6px;
	font-size: 1.25em;
	font-weight: bold;
}
#flow #form .flow_survey_item .flow_label .flow_note_inline {
	margin-left: 8px;
	font-size: 0.82em;
	font-weight: normal;
	color: #555;
}
#flow #form .flow_check_list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 4px;
}
#flow #form .flow_check_list .check_wrap {
	display: block;
	cursor: pointer;
}
#flow #form .flow_check_list .check_wrap span {
	min-width: 0;
}
#flow #form .flow_check_other {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
#flow #form .flow_check_other_label {
	min-width: 9em;
	font-size: 0.92em;
	color: #555;
}
#flow #form .flow_check_other input[type="text"] {
	flex: 1;
}
#flow #form .flow_check_value {
	white-space: normal;
	line-height: 1.7;
}

@media (max-width: 767px){
	#flow #form .flow_check_other {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	#flow #form .flow_check_other_label {
		min-width: 0;
	}
	#flow #form .flow_check_other input[type="text"] {
		width: 100%;
	}
}

@media (max-width: 767px){
	#flow #form .box_in { padding: 20px; }
	#flow #form .flow_simple_form {
		max-width: none;
	}
	#flow #form .flow_zip_row {
		flex-direction: column;
		align-items: flex-start;
	}
	#flow #form .flow_zip_input input {
		width: 140px;
	}
}


.tbl_form { width:100%; }
.tbl_form tr > th { background:#f6f6f6; }
.tbl_form tr > th > div { position:relative; padding-right:60px; line-height:100%; }
.tbl_form tr > th .need { position:absolute; right:0; top:50%; transform:translateY(-50%); }
.tbl_form tr > th .important { position:absolute; right:0; top:50%; transform:translateY(-50%); }
	@media (max-width: 575px){
		.tbl_form .birthday_wrap .row { margin-bottom:10px; }
	}
	@media (max-width: 767px){
		.tbl_form,
		.tbl_form tbody,
		.tbl_form tr,
		.tbl_form tr > * { display:block; width:100%!important; }
		.tbl_form tr > th { padding:15px 10px; }
		.tbl_form tr > td { padding:10px 0 30px; }
		.tbl_form .birthday_wrap .row { max-width:300px; }
	}
	@media (min-width: 768px){
		.tbl_form tr > * { vertical-align:middle; border-bottom:2px solid #ddd; }
		.tbl_form tr > th { padding:30px 15px; width:590px; }
		.tbl_form tr > td { padding:20px 15px; }
	}

.tbl_form select { min-width:100%; }

@media (max-width:575px) {
	.tbl_form .company_wrap > *:not(:last-child) { margin-bottom:10px; }
}

.form_row_wrap { display:flex; align-items:center; width:calc(100% + 10px); margin-left:-5px; margin-right:-5px; }
.form_row_wrap > .unit { padding:0 5px; }
@media (max-width:575px) {
	.form_row_wrap._xs_column { flex-direction:column; }
	.form_row_wrap._xs_column > .unit { width:100%!important; }
	.form_row_wrap._xs_column > .unit:not(:last-child) { margin-bottom:10px; }
}

.radio_wrap { position:relative; display:inline-block; }
.radio_wrap + .radio_wrap { margin-left:5px; }
.radio_wrap input[type="radio"],
.radio_wrap input[type="checkbox"] { position:absolute; left:10px; top:50%; transform:translateY(-50%); margin:0; }
.radio_wrap span { display:inline-block; padding:6px 10px 6px 30px; border:1px solid #ddd; border-radius:10px; }
.radio_wrap input[type="radio"]:checked + span,
.radio_wrap input[type="checkbox"]:checked + span { background:#f2f2f7; }

.check_wrap { position:relative; display:block; }
.check_wrap + .check_wrap { margin-top:5px; }
.check_wrap input[type="radio"],
.check_wrap input[type="checkbox"] { position:absolute; left:10px; top:50%; transform:translateY(-50%); margin:0; }
.check_wrap span { display:inline-block; padding:4px 10px 4px 30px; border:1px solid #ddd; border-radius:10px; }
.check_wrap input[type="radio"]:checked + span,
.check_wrap input[type="checkbox"]:checked + span { background:#f2f2f7; }

.form_dl { display:table; width:100%; }
.form_dl + .form_dl { margin-top:10px; }
.form_dl > * { display:table-cell; vertical-align:top; }
.form_dl dt { font-weight:bold; width:100px; padding:8px 0 0; }

.form_privacy_area { max-height:150px; padding:20px 15px; overflow-y:auto; font-size:0.9em; border:1px solid #ddd; }
.form_privacy_title { font-size:1.15em; margin-bottom:5px; }
.form_privacy { padding:10px; text-align:center; }

input[type="checkbox"]._next_check {
    width: 20px;
    height: 20px;
    border: 2px solid #ff0000 !important;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: white;
    vertical-align: top;
}
.info_check { font-size: 0.75em; color: #ff0000; vertical-align: top; }
input[type="checkbox"]._next_check:checked {
    background-color: #ff0000;
    border-color: #ff0000;
}

input[type="checkbox"]._next_check:checked::after {
    content: "✓";
    position: absolute;
    color: white;
    font-size: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*===================================================================
	faq
===================================================================*/
.faq_box + .faq_box { margin-top:30px; }
.faq_box .box_in { padding:15px 20px; }
.faq_box details summary { padding:10px 30px 10px 0; display:flex; align-items:center; position:relative; }
.faq_box details summary::after { content:""; position:absolute; display:block; top:50%; transform:translateY(-50%); right:0; width:20px; height:20px; mask:url(../image/icon/arrow-b.png) no-repeat center right / 20px auto; -webkit-mask:url(../image/icon/arrow-b.png) no-repeat center right / 20px auto; background:var(--c-color1); }
.faq_box details[open] summary::after { mask-image:url(../image/icon/arrow-t.png); -webkit-mask-image:url(../image/icon/arrow-t.png); }
.faq_box details summary .label,
.faq_box details .contents .label { width:50px; display:flex; justify-content:center; font-weight:bold; font-size:2em; line-height:1; }
.faq_box details summary .main,
.faq_box details .contents .main { width:calc(100% - 50px); }
.faq_box details summary .label { color:var(--c-color1); align-items:center; }
.faq_box details summary .main { padding-top:5px; }
body.pc.faq_box details summary:hover .main { text-decoration:underline; }
.faq_box details .contents { display:flex; padding:10px 0; }
.faq_box details .contents .label { color:var(--c-color2); align-items:flex-start; }
.faq_box details .contents .main { padding:5px 0; }
.faq_box details[open] .contents { border-top:1px solid #ddd; margin-top:10px; padding-top:20px; }
@media (max-width:767px) {
	.faq_box details summary .label,
	.faq_box details .contents .label { width:25px; font-size:1.5em; }
	.faq_box details summary .main,
	.faq_box details .contents .main { width:calc(100% - 25px); }
}


/*===================================================================
	entry
===================================================================*/
/*
.entry a { color:; }
.entry ul > li:before { content:"●"; color:; }
.entry ul > li > ul > li:before { content:"■"; color:; }
.entry ol > li:before { color:; }
.entry ol > li > ol > li:before { color:; }
.entry table thead th { background:; color:; }
.entry table thead td { background:; color:; }
.entry table tbody th { background:; color:; }
.entry table tbody td { background:; color:; }
*/

.tbl_1 { width:100%; }
.tbl_1 tr > * { border-bottom:1px dotted #222; }
.tbl_1 tr > th { font-weight:bold; min-width:100px; font-size:1.1em; }
	@media (max-width: 575px){
		.tbl_1:not(.tbl_sp) tr > * { padding:10px; }
		.tbl_1.tbl_sp tr > th { border-bottom-color:#bbb; }
		.tbl_1.tbl_sp tr > * { padding:10px 5px; width:100%; display:block; }
	}
	@media (min-width: 576px){
		.tbl_1 tr > * { padding:15px; }
	}
.tbl_2 { width:100%; }
.tbl_2 tr > * { border:1px solid #ccc; padding:5px; }
.tbl_2 tr:not(:last-child) > .bb_none { border-bottom:1px solid transparent; }
.tbl_2 tr > th { font-weight:bold; background:var(--c-color1); color:#fff; font-weight:bold; text-align:center; }
	@media (max-width: 575px){
		.tbl_2:not(.tbl_sp) tr > * { padding:10px; }
		.tbl_2.tbl_sp tr > th { border-bottom-color:#bbb; }
		.tbl_2.tbl_sp tr > * { width:100%; display:block; }
	}
	@media (min-width: 576px){
	}