@charset "UTF-8";
:root{
	--body : #222;
	--link : #222;
}
@media screen and (max-width: 768px){
	#main{
		padding-bottom : calc( 100 * 100vw / 375 );
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#main{
		padding-bottom : calc( 410 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#main{
		padding-bottom : 410px;
	}
}
#header.form-header {
	position: absolute;
}
#form .subtitle01{
	color : #fff;
}
#form .card{
	border : 1px solid #ddd;
	position : relative;
	display : flex;
}
#form .card picture{
	overflow : hidden;
	flex-shrink : 0;
}
#form .card picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}
#form .card > div{
	display : flex;
	flex-direction : column;
	justify-content : center;
	flex-grow : 1;
}
#form .card h4{
	font-weight : 600;
}
#form .card p{
	font-weight : 300;
	color : #666;
}
#float-guide {
	display: block;
	position: fixed;
	z-index: 100;
	bottom: 0;
	width: 100%;
	padding: 0 4%;
	background-color: #171717;
	border-top: solid 1px #555555;
}
#float-guide .progress-status {
	text-align: center;
	margin-top: 3vw;
	margin-bottom: 0.7rem;
}
#float-guide .progress-status img {
	width: 80%;
	max-width: 550px;
}
#float-guide .input-status {
	color: white;
	font-size: 0.7rem;
	display: flex;
}
#float-guide .input-status ul {
	display: flex;
}
#float-guide .input-status li {
	display: block;
	white-space: nowrap;
	font-size: 0.7rem;
	margin-bottom: 0.3rem;
	margin-right: 0.5rem;
}
#float-guide .input-status li::before {
	content: "";
	display: inline-block;
	background-image: url(/assets/images/form/selected.svg);
	background-size: contain;
	position: relative;
	top: -1px;
	margin-right: 3px;
	width: 12px;
	height: 12px;
	vertical-align: middle;
}
#float-guide a {
	display: block;
	text-align: center;
	color: #fff;
	background-color: #c00;
	font-size: 1rem;
	font-weight: bold;
	height: 40px;
	line-height: 40px;
	text-overflow: ellipsis;
	border-radius: 20px;
	box-shadow: 0 0 1vw rgba(0,0,0,.3);
	margin: 1vw auto 3vw;
	width: 70%;
	min-width: 300px;
}
#float-guide a::after {
	content: "";
	display: inline-block;
	background-image: url(../images/form/circle_arrow_down.svg);
	background-size: contain;
	position: relative;
	right: -10px;
	width: 30px;
	height: 30px;
	vertical-align: middle;
}
#float-guide a.submit-ok::after {
	background-image: url(../images/ui/arrow/link_white.svg);
	width: 16px;
}
@media screen and (max-width: 768px){
	#form .card{
		height : calc( 100 * 100vw / 375 );
		width : 100%;
	}
	#form .card picture{
		width : calc( ( 98 * 100% / 306 ) - 2px );
		height : calc( 98 * 100vw / 375 );
	}
	#form .card div{
		padding-left : calc( ( 10 * 100% / 306 ) - 2px );
		padding-right : calc( ( 30 * 100% / 306 ) - 2px );
	}
	#form .card h4{
		font-size : calc( 15 * 100vw / 375 );
		margin-bottom : calc( ( 19 * 100vw / 375 ) - .35em );
	}
	#form .card p{
		font-size : calc( 12 * 100vw / 375 );
		line-height : 1.7;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#form .card{
		height : calc( 100 * 100vw / 1300 );
	}
	#form .card picture{
		width : calc( 98 * 100vw / 1300 );
		height : 100%;
	}
	#form .card div{
		padding-left : calc( 10 * 100vw / 1300 );
		padding-right : calc( 30 * 100vw / 1300 );
	}
	#form .card h4{
		font-size : calc( 15 * 100vw / 1300 );
		margin-bottom : calc( ( ( 19 - 4.2 ) * 100vw / 1300 ) );
	}
	#form .card p{
		font-size : calc( 12 * 100vw / 1300 );
		line-height : 1.7;
	}
	#float-guide {
		padding: 0 11%;
	}
	#float-guide .progress-status {
		margin-bottom: 0.8rem;
		margin-top: 1vw;
	}
	#float-guide .input-status li {
		font-size: 1rem;
		margin-bottom: 0.45rem;
		margin-right: 0.6rem;
	}
	#float-guide .input-status li::before {
		top: -1.5px;
		margin-right: 4px;
		width: 18px;
		height: 18px;
	}
	#float-guide a {
		font-size: 1.1rem;
		margin: 0.5vw auto 1.5vw;
	}
}
@media print,screen and (min-width: 1300px){
	#form .card{
		height : 100px;
	}
	#form .card picture{
		width : 98px;
		height : 98px;
	}
	#form .card div{
		padding-left : 10px;
		padding-right : 30px;
	}
	#form .card h4{
		font-size : 15px;
	}
	#form .card p{
		font-size : 12px;
		line-height : 1.7;
		margin-top : calc( 19px - .35em );
	}
	#float-guide {
		padding: 0 calc(50vw - 500px)
	}
	#float-guide .progress-status {
		margin-bottom: 0.9rem;
		margin-top: 20px;
	}
	#float-guide .input-status li {
		font-size: 1.25rem;
		margin-bottom: 0.6rem;
		margin-right: 0.9rem;
	}
	#float-guide .input-status li::before {
		top: -2px;
		margin-right: 6px;
		width: 24px;
		height: 24px;
	}
	#float-guide a {
		font-size: 1.1rem;
		margin: 7px auto 13px;
	}
}
.studio > ul{
	position : relative;
}
.studio > ul > li{
	background-color : #fff;
	cursor : pointer;
}
.studio .list-studio{
	border-bottom : 1px solid #ddd;
}
.studio h3 , .studio h4{
	display : flex;
	align-items : center;
	font-weight : 700;
	font-family : "Roboto", sans-serif;
	letter-spacing : .1em;
	border-bottom: 1px solid #ddd;
}
.studio h3 span , .studio h4 span{
	color : #c00;
}
@media screen and (max-width: 768px){
	.studio > ul{
		margin-top : calc( -8 * 100vw / 375 );
	}
	.studio h3{
		height : calc( 60 * 100vw / 375 );
		font-size : calc( 18 * 100vw / 375 );
		padding-left : calc( 10 * 100vw / 375 );
		padding-right : calc( 10 * 100vw / 375 );
	}
	.studio h4{
		height : calc( 48 * 100vw / 375 );
		font-size : calc( 15 * 100vw / 375 );
		padding-left : calc( 10 * 100vw / 375 );
		padding-right : calc( 10 * 100vw / 375 );
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	.studio > ul{
		margin-top : calc( ( -6 - 8 ) * 100vw / 1300 );
	}
	.studio h3{
		height : calc( 120 * 100vw / 1300 );
		font-size : calc( 30 * 100vw / 1300 );
		padding-left : calc( 20 * 100vw / 1300 );
		padding-right : calc( 20 * 100vw / 1300 );
	}
	.studio h4{
		height : calc( 92 * 100vw / 1300 );
		font-size : calc( 24 * 100vw / 1300 );
		padding-left : calc( 20 * 100vw / 1300 );
		padding-right : calc( 20 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	.studio > ul{
		margin-top : calc( -6px - 8px );
	}
	.studio > ul > li + li{
		margin-top : 20px;
	}
	.studio h3{
		height : 120px;
		font-size : 30px;
		padding-left : 20px;
		padding-right : 20px;
	}
	.studio h4{
		height : 92px;
		font-size : 24px;
		padding-left : 20px;
		padding-right : 20px;
	}
}
.list-studio li{
	position : relative;
	display : flex;
}
@media screen and (max-width: 768px){
	.list-studio li{
		background-size : auto calc( 19 * 100vw / 375 );
		background-position : right calc( 10 * 100vw / 375 ) top 50%;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	.list-studio li{
		background-size : auto calc( 19 * 100vw / 1300 );
		background-position : right calc( 10 * 100vw / 1300 ) top 50%;
	}
}
@media print,screen and (min-width: 1300px){
	.list-studio li{
		background-size : auto 19px;
		background-position : right 10px top 50%;
	}
}
#contract .box , #contract ul{
	background-color : #fff;
}
#contract .box:after , #contract ul:after{
	display : block;
	order : 2;
}
#contract .box:after{
	content : "";
	background : url("../images/form/and02.svg") 0 0 / contain no-repeat;
}
#contract ul:after{
	content : "OR";
	color : #ddd;
	font-family : "Roboto", sans-serif;
	font-weight : 700;
	font-weight : 500;
	font-style : italic;
	margin-right : .25em;
}
#contract li{
	cursor : pointer;
}
#contract .box > .card:nth-of-type(1) , #contract li:nth-child(1){
	order : 1;
}
#contract .box > .card:nth-of-type(2) , #contract li:nth-child(2){
	order : 3;
}
#contract.outsourcing-only {
	margin-top: 40px;
}
#contract.outsourcing-only ul {
	justify-content: center;
}
#contract.outsourcing-only ul:after {
	content: none;
}
#contract.outsourcing-only li:nth-child(2)[data-em-id="02"] {
	display: none;
}
#contract.outsourcing-only li:nth-child(1) p {
	display: none;
}
.wrap-inner > p.form-subtitle {
	font-weight : 600;
	text-align : center;
	letter-spacing : .2em;
	color : #fff;
}
.outsourcing-only .wrap-inner > p.form-subtitle {
	display: none;
}
@media screen and (max-width: 768px){
	#contract .box , #contract ul{
		padding-top : calc( 20 * 100vw / 375 );
		padding-bottom : calc( 20 * 100vw / 375 );
		padding-left : calc( 14 * 100% / 335 );
		padding-right : calc( 14 * 100% / 335 );
		display : flex;
		flex-direction : column;
	}
	#contract .box{
		background-color : transparent;
	}
	#contract .box .card{
		background-color : #fff;
		border-color : #000;
	}
	#contract .box:after{
		width : calc( 48 * 100vw / 375 );
		height : calc( 48 * 100vw / 375 );
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( 20 * 100vw / 375 );
		margin-bottom : calc( 20 * 100vw / 375 );
		margin-left : auto;
		margin-right : auto;
	}
	#contract ul{
		margin-top : calc( -8 * 100vw / 375 );
	}
	#contract ul:after{
		font-size : calc( 48 * 100vw / 375 );
		text-align : center;
		margin-top : calc( 20 * 100vw / 375 );
		margin-bottom : calc( 20 * 100vw / 375 );
	}
	#contract li{
		box-shadow : 0 calc( 3 * 100vw / 375 ) calc( 6 * 100vw / 375 ) rgba(0,0,0,.16);
		background-size : auto calc( 19 * 100vw / 375 );
		background-position : right calc( 10 * 100vw / 375 ) top 50%;
	}
	#contract li:nth-child(1) p{
		letter-spacing : -.05em;
	}
	#contract .card{
		width : 100%;
	}
	.wrap-inner > p.form-subtitle {
		margin-top : calc( 32 * 100vw / 375 );
		font-size : calc( 16 * 100vw / 375 );
		margin-bottom : calc( 43 * 100vw / 375 );
	}
}
@media print,screen and (min-width: 769px){
	#contract .box , #contract ul{
		display : flex;
		justify-content : space-between;
		align-items : center;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px){
	#contract .box , #contract ul{
		padding-top : calc( 20 * 100vw / 1300 );
		padding-bottom : calc( 20 * 100vw / 1300 );
		padding-left : calc( 20 * 100% / 1000 );
		padding-right : calc( 20 * 100% / 1000 );
	}
	#contract .box:after{
		width : calc( 74 * 100vw / 1300 );
		height : calc( 74 * 100vw / 1300 );
	}
	#contract ul{
		margin-top : calc( ( -6 - 7 ) * 100vw / 1300 );
	}
	#contract ul:after{
		font-size : calc( 70 * 100vw / 1300 );
	}
	#contract li{
		box-shadow : 0 calc( 3 * 100vw / 1300 ) calc( 6 * 100vw / 1300 ) rgba(0,0,0,.16);
		background-size : auto calc( 19 * 100vw / 1300 );
		background-position : right calc( 10 * 100vw / 1300 ) top 50%;
	}
	#contract li:nth-child(1) p{
		letter-spacing : -.05em;
	}
	#contract .card{
		width : calc( 400 * 100% / 960 );
	}
	.wrap-inner > p.form-subtitle {
		margin-top : calc( 16 * 100vw / 1300 );
		font-size : calc( 40 * 100vw / 1300 );
		margin-bottom : calc( 43 * 100vw / 1300 );
	}
}
@media print,screen and (min-width: 1300px){
	#contract .box , #contract ul{
		padding-top : 20px;
		padding-bottom : 20px;
		padding-left : 20px;
		padding-right : 20px;
	}
	#contract .box:after{
		width : 74px;
		height : 74px;
	}
	#contract ul{
		margin-top : calc( -6px - 8px );
	}
	#contract ul:after{
		font-size : 70px;
	}
	#contract li{
		box-shadow : 0 3px 6px rgba(0,0,0,.16);
		background-size : auto 19px;
		background-position : right 10px top 50%;
	}
	#contract .card{
		width : 400px;
	}
	.wrap-inner > p.form-subtitle{
		margin-top : 30px;
		font-size : 40px;
		margin-bottom : 43px;
	}
}

input.invisible {
	display: inline-block; /* don't use none because browser required check is not work*/
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	height: 0;
	width: 0;
}

input[type=checkbox].invisible:checked + span.no-frame,input[type=radio].invisible:checked + span.no-frame {
	position: absolute;
	vertical-align: top;
	display: block;
	background-color: #ff9700;
	border: 2px solid #ff9700;
	box-sizing: border-box;
	width: 1.2rem ;
	height: 1.2rem ;
    top: 0;
}

input[type=checkbox].invisible:checked + span.no-frame:before, input[type=radio].invisible:checked + span.no-frame:before {
	position: absolute;
	display: block;
	content: "";
	border: solid 3px white;
	border-left: 0;
	border-top: 0;
	transform: rotate(45deg);
	left: 0.25rem ;
    top: 0.1rem;
    width: 0.4rem;
	height: 0.5rem ;
}

input[type=checkbox].invisible + span.framed {
	box-sizing: border-box;
	line-height: 5.83vw;
	border-radius: 3px;
	display: inline-block;
	background-color: white;
	border: 2px solid #808080;
	top: 0;
	position: relative;
	left: 4px;
	margin-right: 8px;
	width: 1.2rem ;
	height: 1.2rem ;
}

input[type=checkbox].invisible:checked + span.framed {
	background-color: #ff9700 ;
	border: 2px solid #ff9700 ;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 5.83vw;
	border-radius: 3px;
	display: inline-block;
	top: 0;
	position: relative;
	left: 4px;
	margin-right: 8px;
	width: 1.2rem !important;
	height: 1.2rem !important;
}

input[type=checkbox].invisible:checked + span.framed:before {
	position: relative;
	display: block;
	content: "";
	border: solid 3px white;
	border-left: 0;
	border-top: 0;
	transform: rotate(45deg);
	left: 0.25rem ;
    top: 0.1rem;
    width: 0.4rem;
	height: 0.5rem ;
}

li.box-selected {
    background-color: #ffa50054;
}

#schedule {
	background-color: #fff;
	position: relative;
}
#schedule img.top-illustration {
	position: absolute;
}
#schedule > p {
	text-align: center;
	font-weight: bold;
}
#schedule > ul {
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
}
#schedule > ul > li {
	display: block;
	width: 49%;
	text-align: center;
}
#schedule > ul > li > label {
	cursor: pointer;
	position: relative;
}
#schedule > ul.not-fixed > li {
	width: 98%;
}
#schedule > ul.not-fixed > li span {
	font-weight: bold;
}
input[type=checkbox].invisible + span.check-icon::before {
	content: "";
	display: inline-block;
	background-image: url(../images/form/check_off.svg);
	background-size: contain;
	position: relative;
	vertical-align: middle;
}
input[type=checkbox].invisible:checked + span.check-icon::before {
	background-image: url(../images/form/check_on.svg);
}
@media screen and (max-width: 768px) {
	#schedule {
		padding: 10% 0;
	}
	#schedule img.top-illustration {
		width: 57px;
		height: 77px;
		top: calc(-77px/2);
		left: 0;
	}
	#schedule > p {
		font-size: 0.8rem;
		padding: 5px;
	}
	#schedule > ul {
		margin-top: calc(10 * 100vw / 375);
	}
	#schedule > ul > li {
		margin: 5px 0;
	}
	#schedule > ul > li span {
		font-size: 0.7rem;
	}
	input[type=checkbox].invisible + span.check-icon::before {
		top: -2px;
		left: -2px;
		width: 17px;
		height: 17px;
	}
}
@media screen and (min-width: 769px) and (max-width:1299px) {
	#schedule {
		padding: 7% 0;
	}
	#schedule img.top-illustration {
		width: calc(57px*3/2);
		height: calc(77px*3/2);
		top: calc(-77px*3/4);
		left: 0;
	}
	#schedule > p {
		font-size: 1.3rem;
		padding: 7px;
	}
	#schedule > ul {
		margin-top: calc(10 * 100vw / 1300);
	}
	#schedule > ul > li span {
		font-size: 1.2rem;
	}
	#schedule > ul > li {
		margin: 8px 0;
	}
	input[type=checkbox].invisible + span.check-icon::before {
		top: -2px;
		left: -2px;
		width: 23px;
		height: 23px;
	}
}
@media print,screen and (min-width: 1300px) {
	#schedule {
		padding: 5% 0;
	}
	#schedule img.top-illustration {
		width: calc(57px*2);
		height: calc(77px*2);
		top: -77px;
		left: 0;
	}
	#schedule > p {
		font-size: 1.4rem;
		padding: 10px;
	}
	#schedule > ul {
		margin-top: 15px;
	}
	#schedule > ul > li {
		margin: 10px 0;
	}
	#schedule > ul > li span {
		font-size: 1.3rem;
	}
	input[type=checkbox].invisible + span.check-icon::before {
		top: -3px;
		left: -3px;
		width: 30px;
		height: 30px;
	}
}