/* =========================
  category title
========================= */
.category-title{
position: relative;
}

/* 背景ベタ */
.category-title::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 92%;
height: 100%;
background: #FDAAB2;
border-radius: 3rem 0 0 3rem;
z-index: 0;
}

/* h1 */
.category-title h1{
position: relative;
z-index: 1;
text-align: center;
padding: 5rem 0;
font-size: 3.6rem;
line-height: 1.2;
color:#FFF;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1;
}


/* ============= */
@media (max-width: 767px){
.category-title::before{
width: 95%;
border-radius: 2rem 0 0 2rem;
}
.category-title h1{
padding: 4rem 0;
}
}


/* =========================
  breadcrumb
========================= */
.breadcrumb{
display: flex;
padding:1.5rem 10rem 0 0;
}

.breadcrumb nav{
margin-left: auto;
border:0px #FF0000 solid;
display: inline-flex;
}

.breadcrumb ol{
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: .8rem;
font-size:1.4rem;
}

.breadcrumb li{
display: inline-flex;
align-items: center;
}

/* 区切り */
.breadcrumb li + li::before{
content: "";
border-top:2px #FDAAB2 solid;
border-right:2px #FDAAB2 solid;
width:.7rem;
height:.7rem;
margin-right: .8rem;
display: inline-block;
transform: rotate(45deg);
}

.breadcrumb a{
color: inherit;
text-decoration: none;
}


/* ============= */
@media (max-width: 767px) {
.breadcrumb{
padding:1.5rem 5% 0 0;
}
}


/* =========================
  step
========================= */
.step{
margin-top: 7rem;
}
.step ol{
display: grid;
column-gap: 2em;
width:85%;
margin:0 auto;
}
.step li{
grid-row: 1;
display: grid;
align-items: center;
min-height: 4em;
padding: 0.25em 0.5em;
background: rgba(254, 170, 178, .15);
border-radius: 1.5rem;
text-align: center;
}
.step li.select,
.step li.now{
background: #FDAAB2;
color: #fff;
font-weight: 700;
}
.step li:nth-child(n+2){
position: relative;
}
.step li:nth-child(n+2):before{
content: "";
position: absolute;
top: 50%;
left: 0;
aspect-ratio: 1;
width: 1em;
background: #FFF6E5;
transform: translate(-1.5em, -50%);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="0 0 0 10 10 5 0 0"/></svg>') no-repeat center / contain;
}

/* ============= */
@media (max-width: 767px){
.step ol{
width:90%;
}
}


/* =========================
  notes
========================= */
.notes{
margin-top: 7rem;
}
.notes .text{
width:85%;
margin:0 auto;
}
.notes .acids:after{
content: "必須";
display: inline-block;
margin-right: 0.25em;
padding: 0.5em 0.5em;
background: #FFB96D;
color: #fff;
line-height: 1em;
}

/* ============= */
@media (max-width: 767px){
.notes .text{
width:90%;
}
}


/* =========================
  form
========================= */
.form{
margin-top: 7rem;
}
.form form{
width:85%;
margin:0 auto;
}
.form textarea{
all: unset;
box-sizing: border-box;
width: 100%;
padding: 0.5em 0.75em;
background: #fff;
border: 1px solid #ddd;
font-size: inherit;
}
.form input{
all: unset;
box-sizing: border-box;
background: #fff;
border: 1px solid #ddd;
}
.form input[type="text"]{
max-width: 100%;
padding: 0.5em 0.75em;
font-size: inherit;
}
.form input[type="checkbox"],
.form input[type="radio"]{
display: inline-block;
width: 1em;
height: 1em;
}
.form input[type="checkbox"]:checked{
background: #FDAAB2 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white" stroke="white" stroke-width="30"><path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>') no-repeat center / 60%;
}
.form input[type="radio"]{
border-radius: 100%;
}
.form input[type="radio"]:checked{
background: radial-gradient(#FDAAB2 40%, #fff 40%);
}
.form select{
appearance: base-select;
box-sizing: border-box;
cursor: pointer;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 0.75em;
min-width: 8em;
padding: 0.5em 0.75em 0.5em 1em;
background: #fff;
border: 1px solid #ddd;
font-size: inherit;
}
.form select:has(option[value=""]:checked){
color: #999;
}
.form select::picker-icon{
appearance: base-select;
content: "";
box-sizing: border-box;
aspect-ratio: 1;
width: 1em;
background: #ddd;
transform: scale(0.5);
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon points="10 0 0 0 5 10 10 0"/></svg>') no-repeat center / contain;
}
.form select:has(option[value=""]:checked)::picker-icon{
background: currentColor;
}
.form select::picker(select){
appearance: base-select;
margin: 0.5rem 0;
border: 1px solid #ddd;
}
.form optgroup{
appearance: base-select;
padding-top: 0.25em;
}
.form optgroup:nth-of-type(n+2){
border-top: 1px solid #ddd;
}
.form option{
appearance: base-select;
padding: 0.25em 1em;
}
.form option::checkmark{
display: none;
}
.form option:checked{
background: rgba(254, 170, 178, .15);
color: #FDAAB2;
font-weight: bold;
}
.form option:hover{
background: rgba(254, 170, 178, .15);
}
.form option[value=""]{
display: none;
}
.form ::placeholder{
color: #999;
transition: color 0.2s ease-out;
}
.form :focus::placeholder{
color: transparent;
}

/* ============= */
@media (max-width: 1440px){
.form form{
font-size: 16px;
}
}
@media (max-width: 767px){
.form form{
width:90%;
}
}

/* ============= */
@media (max-width: 400px){
.form input[type="text"]{
width: 100%;
}
}


/* 入力テーブル */
.entry{}
.entry .sub-title{
display: none;
}
.entry dl{
display: grid;
grid-template-columns: auto 1fr;
grid-row-gap: 2px;
}
.entry dt{
padding: 1.2rem 1.4rem;
background: #FDAAB2;
background: #FFF6E5;
}
.entry dt.acids{
display: grid;
grid-template-columns: 1fr auto;
}
.entry dt.acids:after{
content: "必須";
align-self: start;
padding: 0.5em;
background: #FFB96D;
color: #fff;
font-size: 0.75em;
line-height: 1em;
transform: translate(1.4rem, -1.2rem);
}
.entry dd{
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 0.5em;
background: rgba(254, 170, 178, .15);
background: #fafafa;
padding: 1.2rem 1.4rem;
}
.entry ul{
display: flex;
flex-wrap: wrap;
grid-gap: 0.5em 2em;
padding: 0.5em 0.75em;
}
.entry li{
display: flex;
align-items: baseline;
grid-gap: 0.5em;
}
.entry li input{
transform: translateY(0.15em);
}
.entry input[name="name"],
.entry input[name="kana"]{
width: 20em;
}
.entry input[name="email"],
.entry input[name="city"],
.entry input[name="street"]{
width: 100%;
}
.entry input[name="tel"]{
width: 15em;
}

/* ============= */
@media (max-width: 767px){
.entry dl{
grid-template-columns: 1fr;
}
}

/* ============= */
@media (max-width: 400px){
.entry dl{
margin: 0 -5dvw;
grid-row-gap: unset;
}
.entry dt{
padding: 1.2rem 5dvw;
}
.entry dt.acids:after{
transform: translate(5dvw, -1.2rem);
}
.entry dd{
padding: 1.2rem 5dvw;
}
}


/* 個人情報 */
.policy{
margin-top: 7rem;
}
.policy .sub-title{
font-family: "M PLUS Rounded 1c", sans-serif;
font-size: 2.3rem;
margin: 4rem 0 2rem 0;
display: inline-flex;
align-items: center;
gap: .6rem;
}
.policy .sub-title:before{
content: "";
width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
background: #FDAAB2;
margin-right:.3rem;
}
.policy .text a{
color: #FDAAB2;
text-decoration: underline;
}
.policy .agreement{
display: flex;
justify-content: center;
column-gap: 0.5em;
margin-top: 4rem;
font-weight: 700;
}
.policy .agreement input{
transform: translateY(0.45em);
}


/* キャプチャ */
.captcha{
display: flex;
justify-content: center;
margin-top: 7rem;
}
.captcha .captcha-holder{
border-color: var(--color-error);
border-width: 2px;
}
.captcha .captcha-success{
border-color: #5bd25b;
}


/* 送信ボタン */
.submit{
display: flex;
justify-content: center;
grid-gap: 3rem;
margin-top: 7rem;
padding-bottom: 1rem;
}
.submit button{
all: unset;
box-sizing: border-box;
cursor: pointer;
display: block;
padding: 1em 3em;
border-radius: 2em;
background: #FAABB1;
border: 2px #FAABB1 solid;
color: #fff;
font-weight: 700;
text-align: center;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
.submit button:disabled{
	background: #ccc;
	border-color: #ccc;
}
.submit #btnConfirm{
}
.submit #btnModify{
background: #fff;
border-color: currentColor;
color: inherit;
}
.submit #btnConfirm.lsf-error-btn{
pointer-events: none;
background: #ddd;
border-color: transparent;
}

/* ============= */
@media (max-width: 767px){
.submit{
display: grid;
grid-template-columns: 80%;
}
}


/* =========================
  thanks
========================= */
.thanks{
margin-top: 7rem;
}
.thanks .text{
width:85%;
margin:0 auto;
}

/* ============= */
@media (max-width: 767px){
.thanks .text{
width:90%;
}
}


:root{
--color-error: crimson;
}