@charset "UTF-8";
body {
    font-size: 1.6rem;
	font-family: 'Noto Sans JP', sans-serif;
}
:root {
	--color-red: #EF5000;
	--color-orange: #ED7301;
	--color-brown: #813717;
	--color-yellow: #FBC601;
	--color-deepRed: #E84F3A;
	--fontSize-40: 4rem;
	--fontSize-32: 3.2rem;
	--fontSize-24: 2.4rem;
	--fontSize-20: 2rem;
	--fontSize-18: 1.8rem;
	--fontSize-14: 1.4rem;
	--fontWeight-bold: 600;
}
@media screen and (max-width: 767px) {
	body {
		font-size: 1.4rem;
	}
	:root {
		--fontSize-40: 2.8rem;
		--fontSize-32: 2.8rem;
		--fontSize-24: 2.1rem;
		--fontSize-20: 1.7rem;
		--fontSize-18: 1.55rem;
		--fontSize-14: 1.2rem;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  ヘッダー
* --------------------------------------------------------------------------------------------------*/

header {
	position: relative;
	z-index: 999;
}
.header__logo {
	display: block;
	position: absolute;
	top: 2.5rem;
	left: 3rem;
}
.header__logo.logo--bulldog {
	width: min(100%, 18rem);
}
.header__logo.logo--andBulldog {
	width: min(100%, 18.96rem);
}
@media screen and (max-width: 767px) {
	.header__logo {
		top: 1.5rem;
		left: 4.67%;
	}
    .header__logo.logo--bulldog {
        width: min(28%, 10.5rem);
    }
    .header__logo.logo--andBulldog {
        width: min(28.84%, 11.06rem);
    }
}

/* ----------------------------------------------------------------------------------------------------
*  フッター
* --------------------------------------------------------------------------------------------------*/

body > footer {
    position: sticky;
    top: 100vh;
}
footer {
	padding: 12rem 17rem 3rem;
}
.footer__logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}
.footer__logo.logo--bulldog {
	width: min(100%, 8.4rem);
}
.footer__logo.logo--andBulldog {
	width: min(100%, 8.4rem);
}
small {
	display: block;
	text-align: center;
	font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
	footer {
		padding: 8rem 8% 2rem;
	}
	.footer__logo {
		margin-bottom: 1.5rem;
	}
    .footer__logo.logo--bulldog {
        width: min(17.46%, 5.5rem);
    }
    .footer__logo.logo--andBulldog {
        width: min(18.13%, 5.71rem);
    }
	small {
		font-size: 1.1rem;
	}
}

.formWrap {
    padding-top: 10rem;
    padding-left: 5.33%;
    padding-right: 5.33%;
}
.formWrap__inner {
    width: min(100%, 88rem);
    margin-left: auto;
    margin-right: auto;
}
.form__header {
    font-size: var(--fontSize-40);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 6rem;
}
.form__lead {
    text-align: center;
    line-height: 1.8;
}
.form__lead + .form__lead {
    margin-top: 1rem;
}
.form__lead + .inputArea {
    margin-top: 2rem;
}
.form__lead + .outputArea {
    margin-top: 4rem;
}
@media screen and (max-width: 767px) {
    .formWrap {
        padding-top: 7rem;
    }
    .formWrap__inner {
        width: 100%;
    }
    .form__header {
        margin-bottom: 2.5rem;
    }
    .form__lead {
        text-align: left;
    }
    .form__lead + .form__lead {
        margin-top: 1.25rem;
    }
    .form__lead + .inputArea {
        margin-top: 1rem;
    }
    .form__lead + .outputArea {
        margin-top: 2.5rem;
    }
}

.formList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.4;
}
.inputArea {
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-bottom: 0.1rem solid #E1E1E1;
}
.outputArea {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 0.1rem solid #E1E1E1;
}
.outputArea:first-of-type {
    border-top: 0.1rem solid #E1E1E1;
}
.formList__item {
    width: 35.23%;
}
.formList__content {
    width: 61.36%;
}
.formList__item__name {
    font-weight: var(--fontWeight-bold);
}
.formList__item__name.must {
    display: flex;
    position: relative;
}
.formList__item__name.must::before {
    content: '';
    flex-shrink: 0;
    width: 5.2rem;
}
.formList__item__name.must::after {
    content: '必須';
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.1rem;
    left: 0;
    width: 4.2rem;
    aspect-ratio: 72 / 35;
    color: #FFF;
    font-size: var(--fontSize-14);
    font-weight: normal;
    border-radius: 0.3rem;
    background-color: var(--color-deepRed);
}
.formList__item__name + .formList__item__note {
    margin-top: 1rem;
}
.formList__item__note {
    font-size: var(--fontSize-14);
}
.formList__content__info {
    background-color: #F5F5F5;
    margin-top: 3rem;
    padding: 1.5rem 5.56%;
}
.formList__content__info p {
    line-height: 1.8;
}
.formList__content__info p:nth-of-type(1) {
    font-weight: var(--fontWeight-bold);
    margin-bottom: 1rem;
}
.formList__content__info p:nth-of-type(2) {
    font-size: var(--fontSize-14);
}
.formList__content .formList__item__note,
.formPrivacy .formList__item__note {
    width: 100%;
    margin-top: 0.5rem;
    color: var(--color-deepRed);
}
.formPrivacy .formList__item__note {
    text-align: center;
}
@media screen and (max-width: 767px) {
    .formList {
        flex-direction: column;
        align-items: flex-start;
    }
    .inputArea {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .formList__item {
        width: 100%;
        margin-bottom: 1.5rem;
    }
    .outputArea .formList__item {
        margin-bottom: 1rem;
    }
    .formList__content {
        width: 100%;
    }
    .formList__item__name.must::before {
        width: calc((min(10.75%, 3.6rem)) + 1rem);
    }
    .formList__item__name.must::after {
        width: min(10.75%, 3.6rem);
    }
    .formList__content__info {
        margin-top: 2.5rem;
        padding: 1.5rem 5.97%;
    }
}
.formList.jsDisabled {
    display: none;
}
.formPrivacy {
    margin-top: 5rem;
    margin-bottom: 4rem;
    line-height: 1.4;
}
.formPrivacy__text {
    text-align: center;
    line-height: 1.8;
    margin-bottom: 2rem;
}
@media screen and (max-width: 767px) {
    .formPrivacy__text {
        text-align: left;
    }
}

/* ----------------------------------------------------------------------------------------------------
*  入力エリア
* --------------------------------------------------------------------------------------------------*/

.inputArea input[type="text"],
.inputArea input[type="number"],
.inputArea input[type="tel"],
.inputArea select {
    width: 100%;
    border: 0.1rem solid #969696;
	border-radius: 0.5rem;
    background-color: #FFF;
}
.inputArea input[type="text"],
.inputArea input[type="number"],
.inputArea input[type="tel"] {
    min-height: 5.8rem;
    padding: 1.5rem;
}
.inputArea select {
    min-height: 5.8rem;
    padding: 1.5rem 4.8rem 1.5rem 1.5rem;
}
@media screen and (max-width: 767px) {
    .inputArea input[type="text"],
    .inputArea input[type="number"],
    .inputArea input[type="tel"] {
        min-height: 5rem;
    }
    .inputArea select {
        min-height: 5rem;
    }
    .inputArea textarea {
        min-height: 11rem;
    }
}

.formList__content__divide--two {
    display: flex;
    gap: 3.7%;
}
.formList__content__divide--two > * {
    width: calc((100% - 3.7%) / 2) !important;
}
.formList__content__divide--threeHyphen {
    display: flex;
    align-items: center;
}
.formList__content__divide--threeHyphen > * {
    width: calc((100% - (1em + 4rem)) / 3) !important;
}
.formList__content__divide--threeHyphen > span {
    width: 0.5em !important;
    margin-left: 1rem;
    margin-right: 1rem;
}
@media screen and (max-width: 767px) {
    .formList__content__divide--two {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .formList__content__divide--two > * {
        width: 100% !important;
    }
    .formList__content__divide--threeHyphen > * {
        width: calc((100% - (1em + 3rem)) / 3) !important;
    }
    .formList__content__divide--threeHyphen > span {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }
}


/* セレクト */
.selectWrap {
    position: relative;
}
.selectWrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%) rotate(90deg);
    width: 1.4rem;
    aspect-ratio: 1 / 1;
    mask: url('../../images/icon_arrow.svg') no-repeat center center / contain;
    background-color: #505050;
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    .selectWrap::after {
        width: min(3.6%, 1.2rem);
    }
}

/* ラジオ */
.radioWrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(23.61%, 12.75rem));
    gap: 2rem 1.85%;
}
.inputArea input[type="radio"] + label {
    display: flex;
    align-items: center;
}
.inputArea input[type="radio"] + label .radio__check {
    position: relative;
    width: 1.8rem;
    aspect-ratio: 1 / 1;
    border: 0.1rem solid #969696;
    border-radius: 50%;
    margin-right: 1rem;
    background-color: #FFF;
}
.inputArea input[type="radio"]:checked + label .radio__check::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--color-deepRed);
}
@media screen and (max-width: 767px) {
    .radioWrap {
        grid-template-columns: repeat(auto-fill, calc((100% - 2rem) / 2));
        gap: 1.5rem 2rem;
    }
    .inputArea input[type="radio"] + label {
        height: max(100%, 5rem);
        border: 0.1rem solid #969696;
        border-radius: 0.5rem;
        background-color: #FFF;
        padding: 1.5rem 2.5rem 1.5rem 1rem;
    }
    .inputArea input[type="radio"] + label .radio__check {
        width: min(13.28%, 1.4rem);
    }
    .inputArea input[type="radio"]:checked + label {
        background-color: #FCEBEA;
    }
    .inputArea input[type="radio"]:checked + label .radio__check {
        border: 0.1rem solid var(--color-deepRed);
    }
    .radio__text {
        flex: 1;
        text-align: center;
    }
    .radio__text span {
        display: inline-block;
        text-align: left;
    }
}

/* チェックボタン */
.checkWrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkWrap input[type="checkbox"] + label {
    display: flex;
    align-items: center;
    position: relative;
    font-weight: var(--fontWeight-bold);
}
.checkWrap input[type="checkbox"] + label::before {
    content: '';
    width: 2.8rem;
    aspect-ratio: 1 / 1;
    border: 0.15rem solid #969696;
    border-radius: 0.3rem;
    background-color: #FFF;
    margin-right: 1rem;
    transition: all .3s;
}
.checkWrap input[type="checkbox"]:checked + label::before {
    border: 0.15rem solid var(--color-deepRed);
}
.checkWrap input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    top: calc(50% - 0.3rem);
    left: 0.8rem;
    transform: rotate(-45deg) translateY(-50%);
    width: 1.9rem;
    aspect-ratio: 19 / 10;
    border-left: 0.3rem solid var(--color-deepRed);
    border-bottom: 0.3rem solid var(--color-deepRed);
}
@media screen and (max-width: 767px) {
    .checkWrap input[type="checkbox"] + label::before {
        width: 3rem;
        margin-right: 1.5rem;
    }
    .checkWrap input[type="checkbox"]:checked + label::after {
        left: 0.88rem;
        width: 2rem;
    }
}

/* テキストエリア */
.inputArea .textareaWrap {
    width: 100%;
    border: 0.1rem solid #969696;
	border-radius: 0.5rem;
    padding: 1.5rem;
    background-color: #FFF;
}
.inputArea .textareaWrap textarea {
    display: block;
    width: 100%;
}

/* その他 */
.inputArea ::placeholder {
	color: #C8C8C8;
}


/* ----------------------------------------------------------------------------------------------------
*  ボタン
* --------------------------------------------------------------------------------------------------*/

.formBtn {
    flex-direction: row-reverse;
    gap: 0 3rem;
}
.formPrivacy + .formBtn {
    margin-top: 4rem;
}
.outputArea + .formBtn,
.form__lead + .formBtn {
    margin-top: 5rem;
}
.btn {
    width: min(31.82%, 28rem);
    min-height: 6rem;
    padding: 1.5rem;
    border-radius: 1rem;
    transition: all .3s;
}
.btn span {
    font-size: var(--fontSize-18);
    font-weight: var(--fontWeight-bold);
    margin-bottom: 0.25rem;
}
.btn:hover {
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, .16);
}
.btn:hover span {
    opacity: 1;
}
.btn--send {
    background-color: var(--color-deepRed);
}
.btn--send:hover {
    border: 0.2rem solid var(--color-deepRed);
    background-color: #FFF;
}
.btn--send span {
    color: #FFF;
}
.btn--send:hover span {
    color: var(--color-deepRed);
}
.btn--return {
    background-color: #969696;
}
.btn--return:hover {
    border: 0.2rem solid #969696;
    background-color: #FFF;
}
.btn--return span {
    color: #FFF;
}
.btn--return:hover span {
    color: #969696;
}
@media screen and (max-width: 767px) {
    .formBtn {
        flex-direction: column;
        gap: 2rem 0;
    }
    .btn {
        width: min(100%, 33.5rem);
    }
}

/* ----------------------------------------------------------------------------------------------------
*  エラー
* --------------------------------------------------------------------------------------------------*/

.error {
    display: block;
    width: 100%;
    margin-top: 3rem;
    padding: 1.5rem;
    text-align: center;
    border: 0.2rem solid var(--color-deepRed);
    border-radius: 0.3rem;
    background-color: #FFF;
}
.error p {
    color: var(--color-deepRed);
    font-weight: var(--fontWeight-bold);
}
@media screen and (max-width: 767px) {
    .error {
        margin-top: 2rem;
    }
}