@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ファインレーベル株式会社　カスタム対応
	ver.2024.06.06.Custom-Finelabel
	フォームメール　スタイルシート
────────────────────────────────────────
FileName:		/resources/css/animation.css
Editor:			TRUSTEC
Description:	フォームメールのデザインスタイルシート。
────────────────────────────────────────
2025/05/30:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/



/* ::::: [CUSTOM PROPERTIES] ::::: */
:root {
}

#contact-page-title {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/contact/contact-intro-background.jpg);
}

@media(max-width: 767px){
    #contact-page-title {
        background-image: url(../images/contact/contact-intro-background.jpg);
        padding-top: 1rem !important;
    }
}


.form-normal {
    width: 100%;
    border-collapse: collapse;
    caption-side: top;
}
.form-normal caption {
	color: var(--common-color);
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: .5em;
	margin-left: 1em;
    padding: 0;
    padding-left: 1.5em;
    position: relative;
}
.form-normal caption::before {
    content: '';
    width: 1em;
    height: 1em;
    background-color: #569546;
    border-radius: 0.2em;
    display: block;
    position: absolute;
    left: 0;
    top: 0.15em;
}

.form-normal {
	width: 100%;
	max-width: 800px;
	margin: auto;
}

.form-normal tbody,
.form-normal td,
.form-normal tfoot,
.form-normal th,
.form-normal thead,
.form-normal tr{
	width: 100%;
}

.form-normal tbody tr{
	padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid #cccccc;
}

/* :::::  [SECTION : CONTENT LEAD] ::::: */
#greeting .container {
/*	max-width: 1000px;	*/
}
.topicpath{
	background-color: transparent;
}

.lead{
	margin: auto;
    width: fit-content;
}
@media (max-width: 991px) {
	.lead{
		font-size: 1.2rem;
	}
}
@media (max-width: 767px) {
	.lead{
		font-size: 1rem;
	}
}

#contact_telp{
    border-radius: 1em;
    border: 5px solid #00813d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 3em 5em;
    margin-top: calc(clamp(4rem, 7vw, 8rem) / 2);
}
#contact_telp .telp{
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    font-size: max(1.8em, 2vw) !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    padding-bottom: 0;
    color: #00813d !important;
    margin-top: .5em;
    margin-bottom: .5em;
}
#contact_telp .telp .business-hours {
    font-size: max(0.5em, 0.4vw) !important;
    font-weight: 600;
    letter-spacing: var(--common-letter-spacing);
    margin-top: 0.5em;
    text-align-last: justify;
    color: var(--header-color);
}
@media(max-width: 767px){
	#contact_telp{
		border-radius: 1em;
		border: 5px solid #00813d;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: fit-content;
		padding: 2.5em 0.8em;
		width: 100%;
	}
	#contact_telp .telp{
		margin-top: .8em;
		margin-bottom: .8em;
	}
}

.annotation_send_failed::before {
	content: '\f071';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: .5em;
	color: #c23b3b;
}
.annotation_send::before {
	content: '\f05a';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: .5em;
	color: #c23b3b;
}
.annotation_send,
.annotation_send_failed {
	line-height: 1.5em;
    font-size: max(1.5rem, 1.7vw);
    font-family: var(--common-title-font);
    font-weight: 900;
    margin-bottom: .5em;
	width: fit-content;
	text-align: center;
	letter-spacing: .1em;
}
.form-number{
	display: flex;
	flex-direction: column;
}
@media (max-width: 767px) {
	.annotation_send,
	.annotation_send_failed {
        text-align: justify;
        padding: 0 .25em;
	}
	.text-area{
		padding: .5em;
	}
}
.contact-form-wrap{
    margin-top: calc(var(--common-margin-width) / 2);
    margin-bottom: calc(var(--common-margin-width) / 2);
}

.lead .required::after {
    margin-bottom: .5em;
	content: "必須";
	background-color: #c23b3b;
	color: #ffffff;
	font-size: 90%;
	line-height: 1.5em;
	margin-left: 0.5em;
	padding: 2px 0.5em;
	border-radius: 5px;
	display: inline-block;
	font-weight: 900;
}

.date_of_visit{
    display: flex;
    flex-direction: row;
    align-items: center;
	flex-wrap: wrap;
}
@media (max-width: 767px) {
	.date_of_visit .caption{
		width: 100%;
	}
}

.date_of_visit .form-select{
	width: fit-content;
	margin-right: .5em;
}
@media (max-width: 576px) {
	.date_of_visit .form-select{
		width: 100%;
		margin-bottom: .5em;
	}
}
.input_group{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;;
}
.input_year,
.input_month,
.input_date{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    margin-right: .8em;
}

/* ::::::	[SECTION : STEP NAV]	::::::: */
#form-step {
	border-radius: 5px;
	max-width: 800px;
	margin: auto;
}

.step-nav,
.step-nav-item {
	background: none;
	border: none;
}

.step-nav {
	counter-reset: step;
	color: #606060;
	width: 100%;

/*	background-color: rgba(0, 0, 0, 0.1);	*/
}

.step-nav-item {
	counter-increment: step;
	font-size: 0.8em;
	text-align: center;
	flex: 1 1 auto;
	color: #999999;

/*	background-color: rgba(0, 0, 0, 0.1);	*/
}
.step-nav-item::before {
	content: counter(step);
	color: #999999;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2em;
	text-align: center;
	width: 1.2em;
	height: 1.2em;
	margin: 0.5em auto 0.2em auto;
	box-sizing: content-box;
	border: solid 0.3em #dadada;
	border-radius: 100%;
	display: block;
}

.step-nav-item.active {
	background: none;
	color: #0d0d0d;
	font-size: 1.2em;
	font-weight: bold;
}
.step-nav-item.active::before {
	margin-top: auto;
	background-color: #00813d;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.7);
}

.form-content{

}

.form-bttn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: calc(var(--common-margin-width) / 2);
}
.form-bttn-wrapper{
    display: flex;
    justify-content: space-evenly;
}
@media (max-width: 767px) {
	.form-bttn-wrapper{
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;
		align-items: stretch;
	}
}

.form-bttn .btn-contact:active,
.form-bttn .btn-contact:focus,
.form-bttn .btn-outline-contact:active,
.form-bttn .btn-outline-contact:focus{
	box-shadow: none;
}

.form-bttn .btn-contact{
	font-size: 1rem !important;
	border-radius: .5em;
    width: 11.5em;
    text-align: center;
}
.form-bttn .btn-contact:hover,
.form-bttn .btn-contact:focus,
.form-bttn .btn-contact:active {
	opacity: var(--button-hover-opacity);
	background: #ffffff;
	color: #00813d !important;
	border-color: #00813d;
	letter-spacing: var(--button-hover-letter-spacing);
}

.btn-outline-contact{
	height: unset;
	border-radius: .5em;
	width: unset;
}

.form-message,
.contact-attention,
.contact-attention h5,
.annotation_send_failed,
.message,
.form-number,
.list-address,
.profile-name,
.message-detail{
	width: fit-content;
}
.form-message,
.message-warning{
	margin: auto;
	margin-bottom: var(--common-margin-width-half);
	width: fit-content;
}

/* ::::::	[SECTION : FORM]	::::::: */
#form {
    padding-bottom: 5rem;
}
.form-wrapper {
	max-width: 800px;
	padding: 1.5em;
}

.form-wrapper.border {
}

.form-wrapper .table{
	border: none;
}
.form-wrapper .table tr,
.form-wrapper .table th,
.form-wrapper .table td {
	color: #0d0d0d !important;
    font-weight: 600;
}
.form-wrapper .table tr{
	border-bottom: solid 1px #999999;
}
.form-wrapper .table tr:first-child{
	border-top: solid 1px #333333;
}
.form-wrapper .table tr:last-child{
	border-color: #333333;
}

/* Button
--------- --------- --------- ------- */
#form .more {
	width: auto;
	min-width: 10em;
}

.btn-form,
.btn-form-outline {
	text-align: center;
	width: auto;
	min-width: 10em;
	box-sizing: border-box;
	padding: 0.7em 0;
	transition: 0.4s;
}

/* Parts Label
--------- --------- --------- ------- */
.form-label{
	font-size: 1rem;
}
.required::after {
    margin-bottom: .5em;
	content: "必須";
	background-color: #c23b3b;
	color: #ffffff;
	font-size: 70%;
	line-height: 1.5em;
	margin-left: 0.5em;
	padding: 2px 0.5em;
	border-radius: 5px;
	display: inline-block;
}

/* Parts Input Control
--------- --------- --------- ------- */
.form-select,
.form-control {
	background-color: rgba(255, 255, 255, 1);
	border-color: rgba(192, 192, 192, 0.8);
	transition: 0.4s;
}
.form-check-input:active,
.form-check-input:focus,
.form-select:hover,
.form-select:focus,
.form-select:active,
.form-control:hover,
.form-control:focus,
.form-control:active {
	border-color: #00813d;
    box-shadow: 0 0 0 .1rem #00813d;
}
.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
	background-color: #FFFEFC;
}
.form-control:focus {
	box-shadow: 0 0 0 0.1rem #00813d;
}

.form-check,
.form-check-input,
.form-check-label {
}



/* Parts Error
--------- --------- --------- ------- */
.error {
	border-left: solid 1px #dc234f;
    background-color: rgb(255 74 74 / 19%);
}
.error .form-label,
.error .form-check-label {
	color: #606060;
	color: inherit;
}

.error-message {
	color: #dc234f;
	margin-top: 0.3em;
	margin-bottom: 0;
    font-size: 0.9rem;
}

/* Size
--------- --------- --------- ------- */
.size-auto {
	width: auto;
	max-width: 100%;
}

/**	電話番号	*/
.size-telephoneNumber {
	max-width: 16em;
}

/**	郵便番号	*/
.size-postalCode {
	max-width: 16em;
}

.address-box{
    border: solid 1px;
    border-radius: 5px;
}

.list-address{
	list-style: none;
    width: fit-content;
    margin: auto;
}

.list-address li{
    width: fit-content;
}

.list-address span{
	width: 4rem;
    display: inline-block;
}