@charset "utf-8";



.container_narrow{
	max-width: 920px;
	margin-top: 70px;
}
.container_narrow span.domain:before{
	content: '@';
}
.container_narrow .hd_en{
	margin-bottom: 50px;
}
.container_narrow form{
	max-width: 820px;
	margin: 50px auto 0;
}
.container_narrow table{
	width: 100%;
}
.container_narrow table tr th,
.container_narrow table tr td{
	padding: 24px 0 15px;
	text-align: left;
}
.container_narrow table tr th{
	color: #1a2233;
	font-weight: 600;
	vertical-align: baseline;
	padding-top: 30px;
	width: 185px;
	min-width: 185px;
}
#confirm .container_narrow table tr th,
#confirm .container_narrow table tr td{
	padding: 20px 0;
	position: relative;
}
#confirm .container_narrow table tr th{
	width: 190px;
}
#confirm .container_narrow table tr th:before,
#confirm .container_narrow table tr td:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #002E62 2px, transparent 1px);
    background-size: 4px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
}
.container_narrow table tr#contact_inner th,
.container_narrow table tr#comment_inner th{
	padding-top: 24px;
}
.container_narrow table tr th .form_ttl{
	display: inline-block;
	width: 180px;
}
.container_narrow table tr th .required{
	display: inline-block;
	color: #fff;
	background-color: #E73200;
	font-size: 1.3rem;
	min-width: 40px;
	line-height: 24px;
	text-align: center;
}
.container_narrow table tr th .optional{
	display: inline-block;
	color: #fff;
	background-color: #5c5f66;
	font-size: 1.3rem;
	min-width: 40px;
	line-height: 24px;
	text-align: center;
}
.container_narrow table tr td > span{
	display: inline-block;
	font-size: 1.4rem;
	margin-left: 15px;
	vertical-align: bottom;
}
.container_narrow button,
.container_narrow input,
.container_narrow optgroup,
.container_narrow select,
.container_narrow textarea {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
}
.container_narrow input[type="radio"] {
	-webkit-appearance: none;
		-moz-appearance: none;
			appearance: none;
}
.container_narrow input[type="radio"] {
	position: relative;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 1px solid #c1c9db;
	border-radius: 50%;
	vertical-align: -3px;
	margin-right: 10px;
}
.container_narrow input[type="radio"]:checked {
	background-color: #fff;
	border: 1px solid #002E62;
}
.container_narrow input[type="radio"]:checked:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #1a2233;
	content: '';
}
.container_narrow input[type="text"],
.container_narrow input[type="tel"],
.container_narrow input[type="checkbox"] {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.container_narrow input[type="text"],
.container_narrow input[type="tel"],
.container_narrow select,
.container_narrow textarea {
    background-color: #fff;
    line-height: 38px;
	border: 1px solid #c1c9db;
    padding: 0 7px;
}
.container_narrow input[type="text"],
.container_narrow input[type="tel"]{
	max-width: 280px;
	width: 100%;
}
#name_inner input[type="text"],
#strong_inner input[type="text"]{
	max-width: 160px;
	width: 100%;
	margin-left: 10px;
}
table tr td .exsample{
	margin-top: 5px;
}
#name_inner .exsample,
#strong_inner .exsample{
	margin-left: calc(1em + 10px);
}
#furigana_inner .input_area > div:first-child,
#furigana_inner input[type="text"]{
	max-width: 290px;
	width: 100%;
}
#company_inner .input_area > div:first-child,
#company_inner input[type="text"]{
	max-width: 460px;
	width: 100%;
}
#department_inner .input_area > div:first-child,
#department_inner input[type="text"]{
	max-width: 460px;
	width: 100%;
}
#post_inner .input_area{
	align-items: center;
}
#post_inner .input_area > div:nth-child(2),
#post_inner .input_area > div:nth-child(2) input[type="tel"]{
	max-width: 60px;
	width: 100%;
}
#post_inner .input_area > div:nth-child(4),
#post_inner .input_area > div:nth-child(4) input[type="tel"]{
	max-width: 100px;
	width: 100%;
}
#post_inner .input_area > div:not(:first-child){
	margin-left: 9px;
}
#location_inner .input_area > div:first-child,
#location_inner input[type="text"]{
	max-width: 460px;
	width: 100%;
}
#tel_inner .input_area > div:first-child,
#tel_inner input[type="tel"]{
	max-width: 220px;
	width: 100%;
}
#email_inner .input_area > div:first-child,
#email_inner input[type="text"]{
	max-width: 460px;
	width: 100%;
}
#contact_inner .input_area,
#direction_inner .input_area,
#frequency_inner .input_area.frequency,
#power_inner .input_area{
	flex-flow: column;
}
#contact_inner .input_area label,
#direction_inner .input_area label,
#frequency_inner .input_area label,
#power_inner .input_area label{
	width: max-content;
	display: flex;
	align-items: center;
}
#contact_inner .input_area label + label,
#direction_inner .input_area label + label,
#frequency_inner .input_area label + label,
#power_inner .input_area label + label{
	margin-top: 4px;
}
.container_narrow table #direction_inner td,
.container_narrow table #frequency_inner td,
.container_narrow table #power_inner td{
	padding-top: 30px;
}
#comment_inner .txt{
	margin-bottom: 5px;
}
#name_inner .input_area > div:last-child,
#furigana_inner .input_area > div:last-child,
#company_inner .input_area > div:last-child,
#tel_inner .input_area > div:last-child,
#email_inner .input_area > div:last-child{
	margin-top: 5px;
}
.container_narrow textarea{
	max-width: 100%;
	width: 100%;
	height: 270px;
	padding: 5px 10px;
	line-height: 1.5;
}
.container_narrow .input_area,
.container_narrow .input_area > div > div{
	display: flex;
}
.container_narrow .input_area > div > div{
	align-items: center;
}
#name_inner .input_area > div:first-child{
	margin-right: 30px;
}
#strong_inner .input_area > div:nth-child(2){
	margin: 0 10px;
}
#strong_inner .input_area > div:nth-child(3) p{
	margin-top: 5px;
}
.input_area > div p{
	overflow-wrap: normal;
	word-break: keep-all;
}
.container_narrow .input_area label,
.container_narrow input[type="radio"]{
	cursor: pointer;
}
.container_narrow input[type="text"] + input[type="text"] {
	margin-left: 16px;
}
::placeholder {
	color: #9b9b9b;
}
.arrow_wrap{
	max-width: 80px;
	width: 100%;
}
.input_area + .input_area{
	margin-top: 20px;
}
.input_area .arrow{
	position: relative;
	max-width: 150px;
	width: 100%;
}
.arrow_wrap .arrow{
	max-width: 80px;
	margin: 0 !important;
}
.input_area .arrow:after{
    content: '';
    width: 7px;
    height: 7px;
    border: 0px;
    border-bottom: solid 2px #30556e;
    border-right: solid 2px #30556e;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -6px;
    pointer-events: none;
}
.arrow select{
	cursor: pointer;
	max-width: 300px;
	width: 100%;
}
.container_narrow .red {
    color: #CC2727;
    margin-bottom: 10px;
}
.container_narrow .red + .red {
	margin-top: 0;
}
.container_narrow .red i{
	margin-right: 3px;
}
.container_narrow #err_msg{
	margin: 20px auto 30px;
	padding: 15px 10px;
	text-align: center;
	display: block;
	border: 1px solid #CC2727;
	background-color: #ffdfdf;
}
.container_narrow #err_msg.disnon{
	display: none;
}
.container_narrow #err_msg p{
	text-align: left;
	display: inline-block;
	color: #CC2727;
}
.container_narrow .disnon {
    display: none;
}
.container_narrow .btnStyle01{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60px;
}
.container_narrow .btnStyle01 button{
    position: relative;
    display: block;
    line-height: 54px;
    font-weight: bold;
    background-color: #fff;
    color: #023373;
    max-width: 280px;
    width: 100%;
    border-radius: 30px;
    padding-left: 28px;
    border: 3px solid #023373;
    text-align: left;
    transition: 0.3s;
	cursor: pointer;
}
.container_narrow .btnStyle01 button:after{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 17px;
    font: var(--fa-font-solid);
    content: "\f061";
    font-size: 14px;
    color: #fff;
    width: 32px;
    height: 32px;
    background-color: #E73200;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
.container_narrow .btnStyle01 button + button{
	margin-left: 30px;
}
#confirm .container_narrow .btnStyle01 button{
	padding: 0;
	text-align: center;
}
.container_narrow .btnStyle01 button.prev{
    color: #616161;
    border: 3px solid #616161;
}
.container_narrow .btnStyle01 button.prev::after{
	transform: rotate(180deg);
    left: 17px;
	right: auto;
    background-color: #616161;
}
@media (hover: hover) and (pointer: fine) {
	.container_narrow .btnStyle01 button:hover{
		background-color: #023373;
		color: #fff;
		text-decoration: none;
	}
	.container_narrow .btnStyle01 button:hover:after{
		color: #E73200;
		background-color: #fff;
	}
	.container_narrow .btnStyle01 button.prev:hover{
		background-color: #616161;
	}
	.container_narrow .btnStyle01 button.prev:hover::after{
		color: #616161;
		background-color: #fff;
	}
}
#check_inner td{
	width: 100%;
	padding-top: 50px;
	text-align: center;
}
#check_inner td .input_area{
	justify-content: center;
}
#strong_inner td a,
#check_inner td .input_area a{
    color: #014A97;
	text-decoration: underline;
}
#strong_inner td a:hover,
#check_inner td .input_area a:hover{
	text-decoration: none;
	cursor: pointer;
}
input#chkbox4[type="checkbox"]+label {
	color: #1a2233;
	font-weight: 600;
    position: relative;
    padding-left: 32px;
    cursor: pointer;
}
input#chkbox4[type="checkbox"]+label::before{
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 53%;
    left: 0;
    transform: translateY(-50%);
    border: 1px solid #999999;
    cursor: pointer;
    background-color: #fff;
}
input#chkbox4[type="checkbox"]:checked+label::before {
    background-color: #004DA1;
    border: 1px solid #004DA1;
}
input#chkbox4[type=checkbox]:checked+label::after {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 8px;
    width: 7px;
    height: 11px;
    transform: rotate(40deg);
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
}
.privacy_content {
    width: 100%;
    height: 220px;
    border: solid 1px #ccc;
    overflow-y: scroll;
    margin: 10px auto 0;
}
div.privacy_inner {
    padding: 10px 20px;
}


.confirm_txt{
	margin: 0 auto 30px;
	text-align: center;
	display: block;
}
.confirm_txt p {
	text-align: left;
	display: inline-block;
}
.download_txt{
	font-size: 18px;
    color: #d47b0f;
	text-decoration: underline;
}
.download_txt:hover{
	text-decoration: none;
}

.finish_txt {
    max-width: 420px;
    margin: 0 auto;
}

.form_notice{
	margin-top: 10px;
	font-size: 15px;
}
.form_notice + .input_area{
	margin-top: 20px;
}

#scope_inner #scope02{
	margin-left: 10px;
	max-width: 100px;
}
#scope_inner #scope03{
	margin-left: 10px;
}
#frequency_inner .input_area .arrow_wrap,
#consecutive_inner .input_area .arrow_wrap,
#temperature_inner .input_area .arrow_wrap{
	margin-left: 10px;
}

input.radioStyle:disabled + .radiobox-parts {
	opacity: 0.5;
	cursor: not-allowed;
}

table tr p.notice{
	font-size: 14px;
	margin-top: 8px;
}

@media screen and (max-width: 950px){
	.container_narrow table tr td > span{
		display: block;
		margin: 10px 0 0;
	}
}

@media screen and (max-width: 767px){
	.container_narrow{
		margin-top: 30px;
	}
	.container_narrow form{
		margin: 30px auto 0;
	}
	.container_narrow table tr th,
	.container_narrow table tr td{
		display: block;
		width: 100%;
	}
	.container_narrow table tr th,
	.container_narrow table tr:first-child td{
		border: none;
	}
	.container_narrow table tr#contact_inner th,
	.container_narrow table tr#comment_inner th,
	.container_narrow table tr th{
		display: block;
		width: 100%;
		padding: 0;
	}
	.container_narrow table tr td{
		display: block;
		width: 100%;
		padding: 10px 0 20px;
	}
	#confirm .container_narrow table tr th{
		width: 100%;
		padding: 15px 0 5px;
	}
	#confirm .container_narrow table tr td{
		padding: 0 0 15px 0;
	}
	#confirm .container_narrow table tr td:before{
		content: none;
	}
	.container_narrow table tr th .form_ttl{
		width: auto;
		padding-right: 10px;
	}
	input[type="text"] + input[type="text"]{
		display: block;
		margin: 10px 0 0;
	}
	body input{
		font-size: 16px !important;
	}
	.input_area > div p{
		font-size: 13px;
	}
	.container_narrow table tr th .required{
		font-size: 1.2rem;
		min-width: 36px;
		line-height: 20px;
	}
	#name_inner .input_area > div:first-child,
	#strong_inner .input_area > div:first-child{
		margin-right: 10px;
	}
	#name_inner input[type="text"],
	#strong_inner input[type="text"]{
		margin-left: 5px;
	}
	#name_inner .input_area > div:last-child,
	#tel_inner .input_area > div:last-child,
	#email_inner .input_area > div:last-child{
		margin-top: 10px;
	}
	.container_narrow .btnStyle01{
		margin-top: 40px;
	}
}

@media screen and (max-width: 600px){
	#strong_inner .input_area:last-of-type {
		flex-wrap: wrap;
	}
	#strong_inner .input_area:last-of-type > div:last-child {
		width: 100%;
	}
}

@media screen and (max-width: 480px){
	.container_narrow{
		padding-left: 20px;
		padding-right: 20px;
	}
	.input_area label{
		display: block;
	}
	.input_area label + label{
		margin: 10px 0 0;
	}
	#chk_policy .input_area label{
		display: inline;
	}
	.container_narrow .btnStyle01{
		display: block;
	}
	.container_narrow .btnStyle01 button{
		margin: 0 auto;
	}
	.container_narrow .btnStyle01 button + button{
		margin: 20px auto 0;
	}
	#check_inner td{
		padding-top: 50px;
		text-align: left;
	}
}


/* ----------------------------------------
モーダル
---------------------------------------- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.3s, visibility 0.3s;
}

.overlay.active {
	visibility: visible;
	opacity: 1;
}

.modal {
	position: relative;
}
	.modal_inner{
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		max-width: 800px;
		width: 100%;
		padding: 56px 40px;
		position: relative;
		height: 500px;
		text-align: left;
		overflow-y: scroll;
	}
	.modal img{
		display: block;
		margin: 10px auto 0;
	}
	.modal h2 {
		font-size: 20px;
		font-weight: bold;
		color: #595757;
	}
	.modal p {
		font-size: 14px;
		margin: 16px 0;
	}
	.modal .btnArea {
		background-color: #fff9e8;
		padding: 24px;
		border-radius: 6px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		.modal .btnArea a{
			border-radius: 5px;
			padding: 16px 48px 16px 40px;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
			line-height: 1.4285;
			display: inline-block;
			text-decoration: none;
			position: relative;
			width: calc((100% - 10px) / 2);
		}
		.modal .btnArea a.shop_yahoo{
			background: #fa9117;
			box-shadow: 0px 4px rgba(100, 55, 2, 0.75);
			-webkit-box-shadow: 0px 4px rgba(100, 55, 2, 0.75);
			-moz-box-shadow: 0px 4px rgba(100, 55, 2, 0.75);
		}
		.modal .btnArea a.shop_rakuten{
			background: #d60000;
			box-shadow: 0px 4px rgba(79, 2, 2, 0.75);
			-webkit-box-shadow: 0px 4px rgba(79, 2, 2, 0.75);
			-moz-box-shadow: 0px 4px rgba(79, 2, 2, 0.75);
		}
		@media (hover: hover) and (pointer: fine) {
			.modal .btnArea a.shop_yahoo:hover{
				background: #ffe3cb;
				color: #fa9117;
			}
			.modal .btnArea a.shop_rakuten:hover{
				background: #ffe6e6;
				color: #d60000;
			}
		}

	.modal .close {
		display: block;
		position: absolute;
		top: -10px;
		right: -10px;
		width: 40px;
		height: 40px;
		background-color: #595757;
		border-radius: 50%;
		border: none;
		cursor: pointer;
		transition: 0.5s;
		z-index: 999;
	}
	.modal .close::before, .modal .close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 20px;
		background: #fff;
		border-radius: 2.5px;
	}
	.modal .close::before {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	.modal .close::after {
		transform: translate(-50%,-50%) rotate(-45deg);
	}

.disable-scroll {
	overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
	.modal .btnArea a.shop_yahoo:hover{
		background: #ffe3cb;
		color: #fa9117;
	}
	.modal .btnArea a.shop_rakuten:hover{
		background: #ffe6e6;
		color: #d60000;
	}
	.modal .close:hover {
		background-color: #333333;
	}
}
@media screen and (max-width: 800px) {
	.modal {
		max-width: 618px;
		width: 100%;
		padding: 40px 24px;
	}
	.modal_inner{
		padding: 30px;
	}
	.modal .btnArea {
		padding: 32px 24px;
		display: block;
	}
	.modal .btnArea a{
		width: 100%;
		padding: 8px 0;
		font-size:min(5vw,17px);
	}
	.modal .btnArea a + a{
		margin-top: 24px;
	}
	.modal .close {
		top: 20px;
		right: 20px;
	}
}