@charset "UTF-8";
/*--------------------------*/

/* CONTACT*/

/*--------------------------*/
:root{
    --form-box-width: 70%;
}
@media(max-width: 959px){
    :root{
        --form-box-width: 66%;
    }
}
@media(max-width:559px){
    :root{
        --form-box-width: 100%;
    }
}
/* リード */
.content__inner > h2{
	margin-top: var(--space-tb-2xl);
	text-align: center;
}
/*--------------------------*/
/* コンテナ */
#contactForm{
	width: calc(880rem/16);
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--space-tb-2xl);
}
#contactForm > .inner-box{
	display: flex;
	align-items: center;
	padding-bottom: 0.8em;

	position: relative;
}
#contactForm > .inner-box + .inner-box{
	margin-top: 2em;
}
/*--------------------------*/
/* 項目 */
#contactForm .item{
	width: calc(100% - var(--form-box-width));
	padding: 0.8em 0;

	display: flex;
	align-items: center;
}
/* 必須項目 */
#contactForm .required{
	flex-shrink: 0;
	background: #ce0003;
	padding: 0.3em 0.6em;
	border-radius: 2px;
	margin-right: 1em;
	color: var(--color-white);
	font-size: 12px;
}
#contactForm .required.optional{
	background-color: var(--color-main-pale);
	color: var(--color-main-soft)
}
/*--------------------------*/
/* 入力フォーム */
#contactForm .form-box{
	width: var(--form-box-width);
}
#contactForm .form-box > input{
	width: 100%;
	padding: 0.8em 1em;
}
/*--------------------------*/
/* 入力フォーム--お問い合わせ内容 */
#contactForm .item.-textArea{
	align-self: flex-start;
}
#contactForm textarea{
	width: 100%;
	padding: 0.8em 1em;
	white-space: pre-wrap;
	resize: vertical;
}
/*--------------------------*/
/*その他装飾*/
/* 下線 */
#contactForm > .inner-box::before{
	content: "";
    display: block;
	width: calc(100% - var(--form-box-width));
    height: 2px;
    background-color: var(--color-main-soft);

    position: absolute;
    bottom: 0;
    left: 0;
}
#contactForm > .inner-box::after{
	content: "";
    display: block;
	width: var(--form-box-width);
    height: 2px;
    background-color: var(--color-main-pale);

    position: absolute;
    bottom: 0;
    right: 0;
}
/*送信ボタン*/
.form-button {
	margin-top: calc(64rem/16);
	margin-left: auto;
	margin-right: auto;
	padding: 1em;

	width: calc(240rem/16);
	max-width: 100%;
	background-color: var(--color-main);
	border: solid 1px var(--color-main);
	border-radius: 4px;

	font-size: var(--txt-reg--fb);
	font-size: var(--txt-reg);
	color: var(--color-white);
	font-family: var(--alphabet);

	transition: background-color .2s var(--linear),
	color .2s var(--linear);

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
}
.form-button > .arrow{
	width: 16px;
	fill: var(--color-white);

	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);

	transition: fill .2s var(--linear);
}
/*-----------------------*/
/* hover設定 */
/*-----------------------*/
@media(any-hover:hover){
    .form-button:hover,
    .form-button:focus{
    	background-color: transparent;
		color: var(--color-main);
    }
	.form-button:hover > .arrow,
    .form-button:focus > .arrow{
		fill: var(--color-main);
    }
}
/*記入例*/
::placeholder{
	color: var(--color-gray);
	text-align: left;
}
/*エフェクト*/
#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus
{
	z-index: 10;
	background-color: #f1f4f6;
	border-radius: 4px;
	text-align: left;
}



/*-------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width:959px){
	#contactForm{
		width: calc(100% - calc(var(--space-lr-reg)*2));
		margin-left: var(--space-lr-reg);
		margin-right: var(--space-lr-reg);
	}
}/*Tablet END*/



/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	#contactForm > .inner-box{
		flex-direction: column;
		padding-bottom: 1em;
	}
	#contactForm > .inner-box + .inner-box {
		margin-top: 1em;
	}
	#contactForm .item{
		width: 100%;
		padding-bottom: 0.3em;
	}
	#contactForm .form-box{
		padding-top: 0.3em;
	}
	#contactForm > .inner-box::after{
		height: 1px;
	}
}/*Smartphone END*/