:root {
--color-border-beige: #E8D9DA;
}
.cn.page.-two {
grid-template-columns: 433px 1fr;
}
.cn-aside {
padding-top: 60px;
position: relative;
}
.cn-aside::before {
content: "";
display: block;
width: 342px;
height: 294px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/contact/bg-heart.svg) center center / contain no-repeat;
position: absolute;
top: -60px;
left: -50px;
z-index: -1;
}
.cn-aside-text {
font-size: 14px;
line-height: 2.0;
}
.cn-aside-title {
margin-top: 50px;
margin-bottom: 35px;
width: fit-content;
font-size: 18px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
letter-spacing: 0.05em;
position: relative;
}
.cn-aside-title::after {
content: "";
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/common/deco.png) center center / contain no-repeat;
width: 14px;
height: 15px;
position: absolute;
top: -6px;
right: -14px;
left: auto;
}
.cn-aside-link {
padding-left: 63px;
font-size: 24px;
position: relative;
}
.cn-aside-link:nth-of-type(n+2) {
margin-top: 30px;
}
.cn-aside-link span {
display: block;
font-size: 14px;
font-weight: var(--font-weight-regular);
color: var(--text-sub-color);
}
.cn-aside-link::before {
content: "";
display: block;
width: 48px;
height: 48px;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
position: absolute;
top: 0;
left: 0;
}
.cn-aside-link.-tel::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/contact/icon-aside-tel.svg);
}
.cn-aside-link.-mail::before {
background-image: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/contact/icon-aside-mail.svg);
top: -5px;
}
@media screen and (max-width: 900px) {
.cn.page.-two {
grid-template-columns: 1fr;
gap: 30px;
}
.cn.page.-two .pageCnt {
margin-left: 20px;
padding: 30px 20px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
order: 1;
}
.cn.page.-two aside {
order: 2;
}
.cn-aside {
padding-top: 40px;
}
.cn-aside::before {
width: 186px;
height: 160px;
top: -10px;
left: -20px;
}
.cn-aside-text {
text-align: center;
font-size: 12px;
}
.cn-aside-title {
margin-top: 0;
margin-bottom: 25px;
margin-inline: auto;
font-size: 16px;
}
.cn-aside-title::after {
top: -8px;
right: -12px;
}
.cn-aside-linkbox {
margin-inline: auto;
width: fit-content;
}
.cn-aside-link {
width: fit-content;
font-size: 20px;
}
.cn-aside-link:nth-of-type(n+2) {
margin-top: 25px;
}
.cn-aside-link span {
font-size: 12px;
}
} .wpcf7-list-item {
margin: 0;
}
.wpcf7-list-item-label::after {
content: none;
}
.form {
display: grid;
gap: 60px;
}
.form :is(legend, dt label) {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 22px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.15em;
}
.form :is(legend, dt label) span {
margin-bottom: 2px;
padding: 6px 8px 4px 10px;
display: grid;
align-items: center;
width: fit-content;
background: var(--color-main);
border-radius: 5px;
line-height: 1;
color: var(--color-white);
font-size: 12px;
font-weight: var(--font-weight-bold);
} .form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
padding: 15px;
width: 100%;
border: 1px solid var(--color-border-beige);
border-radius: 5px;
}
.form textarea {
min-height: 220px;
resize: vertical;
}
.form input::placeholder,
.form textarea::placeholder {
font-weight: var(--font-weight-regular);
color: var(--text-sub-color);
} .form :is(.form-radio, .form-check) label {
cursor: pointer;
}
.form :is(.form-radio, .form-check) input {
position: absolute;
opacity: 0;
}
.form :is(.form-radio, .form-check) .wpcf7-list-item-label {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.form :is(.form-radio, .form-check) .wpcf7-list-item-label::before {
content: "";
width: 20px;
aspect-ratio: 1;
background-color: var(--color-white);
border: 1px solid var(--color-border-beige);
} .form .form-radio legend {
margin-bottom: 25px;
}
.form .form-radio .wpcf7-form-control {
display: grid;
grid-template-rows:repeat(4, auto);
grid-auto-flow:column;
grid-auto-columns:1fr;
gap: 20px;
}
.form .form-radio .wpcf7-list-item-label::before {
border-radius: 999px;
}
.form .form-radio input:checked + .wpcf7-list-item-label::after {
content: "";
width: 11px;
aspect-ratio: 1;
background-color: var(--color-main);
border-radius: 999px;
position: absolute;
top: 6px;
left: 5px;
z-index: 2;
} .form .form-check input:checked + .wpcf7-list-item-label::after {
content: "";
width: 8px;
height: 14px;
border-right: 2px solid #D70000;
border-bottom: 2px solid #D70000;
transform: translate(6px, 0) rotate(45deg);
position: absolute;
top: calc(50% - 9px);
left: 0px;
z-index: 2;
} .form .form-submit-wrap {
text-align: center;
}
.form .form-submit {
margin-bottom: 30px;
margin-inline: auto;
}
.form form.submitting .form-submit {
pointer-events: none;
opacity: .6;
}
.form .form-submit-loading {
display: none;
}
.form  form.submitting .form-submit-loading {
display: block;
margin-bottom: 10px;
}
.form .form-submit-loading span {
margin: 0;
margin-bottom: -5px;
margin-right: 5px;
background-color: var(--color-main);
opacity: 1;
} .form .wpcf7 .wpcf7-response-output {
margin: 0;
margin-bottom: 40px;
padding: 10px 15px;
width: 100%;
background-color: #FEEAE6;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: var(--font-weight-bold);
color: var(--color-main);
}
.form .wpcf7-not-valid-tip {
margin-top: 20px;
padding: 5px 10px 5px 43px;
width: 100%;
background-color: #FEEAE6;
border-radius: 5px;
font-weight: var(--font-weight-medium);
color: var(--color-main);
position: relative;
}
.form .wpcf7-not-valid-tip::before {
content: "";
display: block;
width: 18px;
height: 18px;
background: url(//www.ye-p.co.jp/wp-content/themes/yep/assets/images/contact/icon-error.svg) center center / contain no-repeat;
position: absolute;
top: 7px;
left: 15px;
}
.form :is(input, textarea, select).wpcf7-not-valid {
border-color: var(--color-main);
}
.form  :is(.form-radio, .form-check) .wpcf7-not-valid .wpcf7-list-item-label::before {
border-color: var(--color-main);
} .form .form-name {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
} .form .form-privacy {
text-align: center;
}
.form .form-privacy p {
font-weight: var(--font-weight-regular);
}
.form .form-privacy p > a {
color: var(--color-main);
}
.form .form-privacy .form-check {
margin-top: 15px;
margin-inline: auto;
width: fit-content;
}
.form .form-privacy .form-check .wpcf7-list-item {
padding: 7px 10px;
}
.form .form-privacy .form-check .wpcf7-not-valid .wpcf7-list-item {
background-color: #FEEAE6;
} .hp-field {
position:absolute;
left:-9999px;
} .form-text {
margin-bottom: 60px;
padding: 20px 30px;
background-color: #FCF5EC;
border-radius: 15px;
display: flex;
flex-direction: column;
gap: 10px;
}
.form-text dt {
font-weight: var(--font-weight-bold);
}
.form-text dd {
font-size: 12px;
font-weight: var(--font-weight-regular);
}
@media screen and (max-width: 1000px) {
.form .form-radio .wpcf7-form-control {
grid-template-rows:none;
grid-auto-flow:row;
grid-template-columns:1fr;
}
}
@media screen and (max-width: 767px) {
.form {
gap: 40px;
}
.form :is(legend, dt label) {
font-size: 20px;
}
.form :is(legend, dt label) span {
margin-bottom: 0;
font-size: 10px;
} .form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
padding: 15px 10px;
} .form :is(.form-radio, .form-check) .wpcf7-list-item-label::before {
width: 16px;
} .form .form-radio legend {
margin-bottom: 15px;
}
.form .form-radio input:checked + .wpcf7-list-item-label::after {
width: 10px;
top: calc(50% - 5px);
left: 3px;
} .form .form-check input:checked + .wpcf7-list-item-label::after {
width: 5px;
height: 10px;
top: calc(50% - 6px);
} .form .form-submit {
margin-bottom: 10px;
} .form .wpcf7 .wpcf7-response-output {
margin-bottom: 30px;
padding: 10px;
font-size: 14px;
}
.form .wpcf7-not-valid-tip {
margin-top: 5px;
padding-left: 29px;
}
.form .wpcf7-not-valid-tip::before {
width: 14px;
height: 14px;
top: 8px;
left: 9px;
} .form .form-name {
grid-template-columns: 1fr;
gap: 40px;
} .form .form-privacy .form-check {
margin-top: 10px;
margin-inline: auto;
width: fit-content;
} .form-text {
margin-bottom: 50px;
padding: 20px;
}
} .cnCmp-area {
text-align: center;
}
.cnCmp-title {
line-height: 1.7;
font-size: 28px;
font-weight: var(--font-weight-bold);
color: #99797C;
letter-spacing: 0.15em;
}
.cnCmp-img {
margin-top: 40px;
max-width: 56px;
}
.cnCmp-text {
margin-top: 40px;
font-size: 14px;
font-weight: var(--font-weight-regular);
}
.cnCmp-attention {
margin-inline: auto;
margin-top: 40px;
padding-left: 17px;
max-width: fit-content;
text-align: left;
font-size: 12px;
font-weight: var(--font-weight-regular);
color: var(--text-sub-color);
position: relative;
}
.cnCmp-attention::before {
content: "※";
position: absolute;
top: 0;
left: 0;
}
.coCmp-btn {
margin-top: 60px;
}
@media screen and (max-width: 767px) {
.cnCmp-title {
font-size: 20px;
}
.cnCmp-img {
margin-top: 30px;
max-width: 40px;
}
.cnCmp-text {
margin-top: 30px;
font-size: 12px;
}
.cnCmp-attention {
padding-left: 13px;
font-size: 10px;
}
.coCmp-btn {
margin-top: 40px;
}
}