@charset "UTF-8";
@import url(/css/low.css);

body{
    background: #B2C9DD;
    background: linear-gradient(180deg, rgba(178, 201, 221, 0.5) 0%, rgba(255, 255, 255, 1) 18%);
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;

    &:after{
        content: "";
        background-image: url(/images/company/bg.png);
        background-size: 100%;
        background-position: top center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
}
main{
	min-height: 50dvh;
}

section{
    .inner{
        /* max-width: var(--width01);
        width: 95%;
        margin: 0 auto;
        padding: 0; */

        .titleset{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin: 0 0 20px;

            h2{
                font-size: var(--font24-27); 
                font-weight: 600;
                line-height: 1.4em;
                width: 100%;
                margin: 0 0 20px;
                padding: 0 0 15px 0;
                color: var(--color01);
                border-bottom: 4px solid var(--color01);
            }
        }
    }
}

section#form{
	max-width: var(--width03);
	width: 98%;
	margin: 0 auto 5%;
	padding: 0;

	p.top_text{
		color: var(--color01);
		text-align: center;
		margin: 0 auto 5%;

		b{
			color: var(--colorR);
			padding: 0 5px;
		}
	}
	p.attention{
		font-size: var(--font-menu);
		line-height: 1.6em;
		text-align: center;
		margin: 0 auto 5%;
	}

	dl.main{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 0 auto;
		padding: 0;

		dt{
			text-align: center;
			background: var(--color06);
			width: 24%;
			margin: 0 0 10px;
			padding: 20px 0;
			position: relative;

			.red{
				color: var(--colorR);
				position: absolute;
				top: 20px;
				right: 20px;
			}
		}
		dd{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			width: 76%;
			margin: 0 0 10px;
			padding: 20px 30px;

			span{
				font-size: 14px;
				display: block;
				width: 100%;
				margin: 10px 0 0 10px;
			}

			.full{
				width: 100%;
				margin: 0 10px;
			}

			.half01{
				width: 240px;
				margin: 0 10px;
			}

			&.cue{
				label{
					width: 100%;
					margin: 10px 0 10px 20px;
				}
			}
			.fullTate{
				margin: 0 10px 10px;
			}
		}
	}

	#privacy{
		width: 100%;
		margin: 5% auto;

		h3{
			border-bottom: 2px solid var(--color01);
			color: var(--color01);
			font-size: var(--font20-24);
			margin: 0 auto 3%;
			padding: 0 0 10px 30px;
		}
		dl.sub{
			border: 1px solid var(--colorL);
			border-radius: 8px;
			font-size: 14px;
			width: 100%;
			height: 150px;
			overflow-y: scroll;
			margin: 0 auto;
			padding: 20px;

			dt{
				margin: 0 0 10px;
				padding: 0;
			}
			dd{
				line-height: 1.4em;
				margin: 0 0 10px;
				word-break: break-all;
			}
		}
	}
}

section#thanks{
	line-height: 1.6em;
	max-width: var(--width03);
	width: 90%;
	margin: 0 auto 5%;
	padding: 20px 0;

	p.top_text{
		color: var(--color01);
		text-align: center;
		margin: 0 auto 5%;

		b{
			color: var(--colorR);
			padding: 0 5px;
		}
	}
	dl.call{
		border: 1px solid var(--color04);
		text-align: center;
		margin: 0 auto;
		padding: 20px;
	}
}

section{
	.submit_area{
		margin: 5% auto 0;

		input[type="submit" i]{
			margin: 0 auto 2%;
		}
		input[type="button"]{
			margin: 0 auto;
		}
	}
}

@media all and (max-width:768px){
    body{
        background: linear-gradient(180deg, rgba(178, 201, 221, 0.2) 0%, rgba(255, 255, 255, 1) 12%);

        &:after{
            background-size: 800px;
        }
    }

    main{
        padding: 0;
		min-height: unset;

        .mainWrap{
            padding:30px 0 50px;

            .inner{
                max-width: 320px;
                width: 80%;
                padding: 48px 0;
                
                h2{
                    &:after{
                        width: 200%;
                        left: -50%;
                    }
                }
            }

            &:after{
                width: 270px;
                height: 230px;
            }
        }
    }
    section{
        .inner{
            .titleset{
                margin: 0;
            }
        }
    }
    section#form{
		margin: 0 auto 12%;

		p.top_text{
			text-align: left;
			width: 90%;
		}

		dl.main{
			width: 95%;
			margin: 0 auto;
			dt{
				width: 100%;
				margin: 0;
				padding: 10px 0;
				.red{
					top: 12px;
				}
			}
			dd{
				width:100%;
				margin: 0;
				padding: 30px 10px;

				&.flex{
					padding: 30px 10px;

					input[type="text"]{
						margin: 20px 5px 0;
					}
				}

				&.cue{
					label{
						flex-wrap: wrap;
					
						input[type="text"]{
							margin: 20px 5px 0;
							width: 100%;
						}
					}
				}
				.fullTate1{
					flex-direction: column;

					input[type="text"],
					select,
					.half01{
						width: 100%;
						margin: 10px 0 0;
					}
				}
				.fullTate2{
					input[type="text"] {
						width: 90%;
                        margin: 0 5px 0;
                    }
				}

				&.flex-tate{
					label{
						display: block;
						width: 100%;
						margin: 10px 0 0;
					}
				}
			}
		}

		#privacy{
			width: 90%;
		}

		p.attention{
			text-align: left;
			width: 90%;
		}
	}
	section#thanks{
		p.top_text{
			text-align: left;
		}
	}
	section{
		.submit_area{
			input[type="submit" i]{
				margin: 0 auto 5%;
			}
			input[type="button"]{
				width: 80%;
				padding: 10px 0;
			}
		}
	}
	footer{
		.inner{
			padding: 3% 0 1%;
		}
	}
}