@charset "utf-8";

/* .title-box{
	border-bottom:1px solid #000;
	margin-bottom:35px;
} */

.mainContents {
    max-width: 345px;
    padding-left: unset;
    padding-right: unset;
    font-family: YuMincho, "Hiragino Mincho ProN",	serif !important;
}

@media only screen and (max-width: 750px) {
    .mainContents {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media only screen and (max-width: 376px) {
    .mainContents {
        padding-left: 40px;
        padding-right: 40px;
    }
}

.mainContents.contact h1 {
    margin: 35px 0;
	text-align: center;
}

.mainContents.contact .contact-inner {
	margin: auto;
	max-width: 700px
}

.mainContents.contact .title-sentence {
    text-align: center
}

.mainContents.contact .title-sentence p {
    font-size: 1.4rem;
    margin: 0 0 50px
}

.mainContents.contact .title-sentence a {
    padding-bottom: 1px;
    border-bottom: solid black 1px
}

/* .contact .attention {
	position: relative;
	margin-bottom:16px;
	font-size: 1.3rem;
	font-weight: 600;
} */

.attention img {
	position: absolute;
	width: 8px;
	top: -9px;
	left: -5px;
}

.mainContents.contact .contact-inner form label {
    font-size: 1.4rem;
    margin-bottom: 5px
}

.mainContents.contact .contact-inner form label span.must {
    color: red
}

.mainContents.contact .contact-inner input[name=name],
.mainContents.contact .contact-inner input[name=mail],
.mainContents.contact .contact-inner input[name=order_number],
.mainContents.contact .contact-inner select[name=contact_kbn],
.mainContents.contact .contact-inner textarea[name=message] {
    margin-bottom: 15px;
    border: none;
    border-bottom: 1px solid #000;
}

.mainContents.contact .contact-inner textarea[name=message] {
    height: auto
}

.mainContents.contact .contact-inner select[name=contact_kbn] {
    color: #999;
}

.mainContents.contact .contact-inner select:has(option:checked:not([value=''])) {
    color: #000;
}

.mainContents.contact .contact-inner textarea[name=message] {
    border: 1px solid #000;
}

.mainContents.contact .contact-inner .select-wrap label {
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 10px;
    color: #999;
    letter-spacing: .08em;
    transition: opacity .5s;
    pointer-events: none;
}

.mainContents.contact .contact-inner .ty-control-group .ty-control-group__title {
    font-size: 1.4rem;
    position: absolute;
    top: 10px;
    left: 10px;
    color: #999;
    letter-spacing: .08em
}

@media only screen and (max-width: 750px) {
    .mainContents.contact .contact-inner .ty-control-group .ty-control-group__title,
    .formTable .inputRow .inputCol,
    .contact .formTable .inputRow .inputHead .inputLabel,
    .mainContents.contact .contact-inner,
    .mainContents.contact .buttonArea .button-confirm-back  {
        font-size: 12px;
    }
}

.mainContents.contact .contact-inner .ty-control-group label,
.mainContents.contact .contact-inner select:has(option:checked[value='']) + label {
    display: inline-block;
    transition: opacity 0.1s;
    opacity: 1;
}

.mainContents.contact .contact-inner input:not(:placeholder-shown)+label,
.mainContents.contact .contact-inner select:has(option:checked:not([value=''])) + label,
.mainContents.contact .contact-inner textarea:not(:placeholder-shown)+label {
    opacity: 0;
    pointer-events: none
}

.mainContents.contact .contact-inner .ty-control-group {
    margin: 0;
    position: relative;
}

.mainContents.contact .contact-inner input.must+label:after, 
.mainContents.contact .contact-inner select.must+label:after, 
.mainContents.contact .contact-inner label.must:after, 
.mainContents.contact .contact-inner .select-wrap label.must:after {
    color: #b94a48;
    content: "*";
    font-size: 13px;
    line-height: 1px;
    position: absolute;
    left: -5px;
    top: 4px;
}

.mainContents.contact .contact-inner textarea.must+label:after {
    color: #b94a48;
    content: "*";
    font-size: 13px;
    line-height: 1px;
    position: absolute;
    left: -5px;
    top: 4px;
}

.mainContents.contact .contact-inner .select-wrap select:invalid, 
.mainContents.contact .contact-inner .select-wrap select option[value=''] {
    color: #999;
}

.mainContents.contact .contact-inner .select-wrap select option:not([value=""]) {
    color: #000;
}

@media only screen and (max-width: 750px) {

    .mainContents.contact {
        width: 100%;
        margin: auto;
    }

    .mainContents.contact h1 {
        font-size: 1.2rem;
        margin: 20px 0
    }

    .mainContents.contact .title-sentence {
        max-width: 250px;
        margin: auto auto 35px
    }

    .mainContents.contact .title-sentence p {
        font-size: 1.2rem;
        margin: 0 0 20px
    }

    .mainContents.contact .contact-inner form label {
        font-size: 1.4rem;
        color: #6D6D6D;
    }

    .mainContents.contact .contact-inner input[name=name],
    .mainContents.contact .contact-inner input[name=mail],
    .mainContents.contact .contact-inner input[name=order_number],
    .mainContents.contact .contact-inner select[name=contact_kbn],
    .mainContents.contact .contact-inner textarea[name=message] {
        font-size: 12px
    }

    .mainContents.contact .contact-inner textarea[name=message] {
        height: 150px
    }
    .mainContents.contact .contact-inner .buttonArea {
        padding-top: 10px
    }
    .mainContents.contact .contact-inner .buttonArea .row .mypage-btn .button {
        height: 42px;
        font-size: 12px
	}
}

/* BUTTON
-------------------------------*/

.buttonArea {
	padding: 25px 0 75px
}

/* .buttonArea.center{
	text-align:center;
} */

.buttonArea .row {
	padding:0;
	display: flex;
	align-items: center;
}

.buttonArea .justify-content {
	justify-content: center;
}

.formTableConfirm .buttonArea .mypage-btn {
	float:left;
	border-radius: 0px;
}

.contact .confirm .button {
    height: 40px;
    font-size: 1.2rem;
    background-color: #000;
    margin: 0;
	padding: 0;
	border-radius: 0;
}

/* .buttonArea .mypage-btn .buttonWhite{
	border: #545358 1px solid;
	background-color: #fff;
    border-radius: 40px;
}
.buttonArea .mypage-btn.last{
	border-radius: 0;
	margin-right:0;
}
.buttonArea .form-btn{
	width:250px;
	display:inline-block;
	font-size:0;
	margin:0 5px;
}
.buttonArea .mypage-btn.single,
.buttonArea .form-btn.single{
	float:none;
	margin:0 0 10px;
}
.buttonArea .form-btn.single{
	margin:0 auto 10px;
	display:block;
}
.contact .buttonArea .backlink{
	background-color:#FFF;
	border: 1px solid #000;
	padding: 0;
	font-size: 14px;
	font-size: 1.4rem;
	border-radius: 40px;
	font-family: "Noto Sans JP", sans-serif;
} */


@media only screen and (max-width: 1024px){
	.buttonArea .backlink{
		font-size: 12px;
		font-size: 1.2rem;
	}
}

/* .contact .confirm .button:hover{
	color: #fff;
} */

.buttonArea .button,
.bottom-button .single-btn .button,
.buttonArea .backlink {
    border-radius: 0;
    height: 40px;
}

@media only screen and (max-width: 750px) {
    .buttonArea .mypage-btn,
    .formTableConfirm .buttonArea .mypage-btn {
        width: 100%;
    }

    .buttonArea .row {
        flex-direction: column;
    }
}

@media screen and (min-width: 1024px) {
    .mainContents.contact.contact-confirm,
    .mainContents.contact.contact-end {
        max-width: 960px;
    }
}

.mainContents.contact .buttonArea .button-confirm-back {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: unset !important;
}