*{box-sizing:border-box}
@media (min-width: 1200px) {
.feel-box{display:flex;gap:5%;justify-content:space-between;align-items:flex-start}
.my-all{flex:1 0 50%}
.my-bapicture > div{height:50vh;max-height:350px}
.my-bapicture > div img{max-height:50vh;height:100%}
}
.event-form{width:90%;max-width:1280px;margin:4rem auto}
.event-form p{color:var(--grey)}
.event-form h3{background:var(--bg-ivory);color:var(--brown);font-size:clamp(1rem,0.5833rem + 2.0833vw,2.25rem);font-weight:400;text-align:center;margin:0;padding:1rem 0;position:relative}
.event-form h3 b{font-size:clamp(2.625rem,1.745rem + 4.4vw,4rem)}
.event-form h3::after{content:" ";position:absolute;top:100%;left:50%;margin-left:-16px;border-width:16px;border-style:solid;border-color:var(--brown) transparent transparent}
.form_area{width:80%;margin:0 auto 2rem}
.userbox{width:80%;margin:2rem auto;display:flex;align-items:center;justify-content:center}
.user-pic{flex:0 0 auto;width:100px;height:100px;border-radius:50%;overflow:hidden}
.user-pic img{width:100%;height:100%;object-fit:contain}
.user-data{margin-left:2rem}
.user-data strong{font-size:min(max(3vw,18px),28px);color:var(--navy)}
.form-box{width:90%;margin:0 auto}
.fm-1{margin:2rem 0}
.txt-center{text-align:center}
.fm-1 div:first-child{font-size:clamp(1.25rem,1.09rem + 0.8vw,1.5rem);color:var(--brown);margin-bottom:.25rem}
.fm-1:last-child{text-align:center}
.add-info,.birthday{display:flex;justify-content:space-around}
input[type=email],input[type=text]{background:0 0;display:inline-block;padding:10px 2%;border:1px solid var(--grey);background-color:#fff;width:100%;font-size:min(max(3vw,16px),18px)}
input[type=checkbox],input[type=radio]{width:1rem;height:1rem;margin:.5rem}
select{width:80%;padding:5px 2%;border:1px solid var(--grey);height:2.5rem;margin-right:1rem;outline:none;font-size:1rem}
select:last-child{margin-right:0}
#div_inputconfirm,.my-phone{display:flex;flex-wrap:wrap;width:100%}
.my-phone input[type=text]{width:60%}
#div_inputconfirm{margin:.5rem 0}
.my-phone input[type=button]{flex:1 1 auto;border:0;background:var(--navy);color:var(--bg-ivory);font-size:1rem}
.add{margin-top:.5rem}
.QA_title{margin:1rem 0}
.QA_title div:first-child{font-size:clamp(1.25rem,1.09rem + 0.8vw,1.5rem);color:var(--brown);margin-bottom:1rem}
.check label{display:flex;margin:.25rem 0}
.check label span{margin-left:1rem;flex:0 1 auto;color:var(--grey)}
.ok{width:100%;overflow-y:auto;max-height:100px;border:1px solid #ccc;margin-bottom:1rem;font-size:.9rem;padding:.1rem .25rem}
.btn_send{width:80%;display:block;border:none;outline:0;background:0 0;margin:0 auto}
.btn_send img{width:100%;max-width:300px}
.logout{display:inline-block;color:var(--navy)}
.finishbox{text-align:center;padding:2rem 0}
.finishbox p span{display:block;margin-top:2rem;font-size:clamp(1.25rem,1.09rem + 0.8vw,1.5rem)}
.finishbox p span:first-child{font-weight:700;font-size:clamp(2rem,1.44rem + 2.8vw,2.875rem);color:var(--brown)}
.g-recaptcha{width:100%}
.f-box{background:var(--gold)}
.feel{width:90%;margin:0 auto;max-width:1280px;padding:2rem 0}
.feel h2{color:#fff;font-size:clamp(1.4rem,0.8667rem + 2.6667vw,3rem);text-align:center;margin:0;padding:1rem 0;position:relative;color:var(--brown);text-underline-offset:15px;text-decoration:underline}
.feel-box{width:90%;margin:3rem auto 5rem;text-align:center;padding:5%;border:1px solid #ccc;background:#fff;border-radius:3rem;box-shadow:10px 10px 10px 0 #79554840}
.my{display:flex;gap:2rem;margin-bottom:2rem}
.my .pic{flex:0 0 auto;border-radius:50%;overflow:hidden;width:150px;height:150px;box-shadow:3px 3px 3px 0 #eee;border:1px solid #eee;display:block;margin-bottom:.5rem}
.my .pic img{width:100%;height:100%;object-fit:cover}
.my .fb-name{text-align:left;border-bottom:1px solid var(--brown);padding-bottom:1rem;font-size:clamp(1.1rem,0.9909rem + 0.5455vw,1.4rem)}
.my .my-detail{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.my .my-detail .push{color:var(--brown);font-weight:500;font-size:clamp(1.1rem,1.0636rem + 0.1818vw,1.2rem);text-align:left;line-height:1.2}
.feel-box .my-feel{text-align:left;word-wrap:break-word;font-size:1rem;font-weight:400;color:#4d4d4d;line-height:1.7}
a.link{display:inline-block;text-align:center;border-bottom:5px solid var(--brown);margin:2rem auto;color:#666;text-decoration:none;font-size:clamp(1.125rem,0.885rem + 1.2vw,1.5rem)}
.my-bapicture{display:flex;margin-top:1em;position:relative;gap:1rem}
.my-bapicture > div{padding:unset;flex:1;margin:unset;position:relative;border-right:1px solid #ccc;border-left:1px solid #ccc;padding-top:7px;background:var(--navy);overflow:hidden}
.my-bapicture > div::after{display:block;position:absolute;width:100%;bottom:0;right:0;color:#fff;background:var(--navy);font-size:clamp(1.125rem,0.965rem + 0.8vw,1.375rem);text-align:center;line-height:2}
.my-bapicture > div:first-child::after{content:'使用前'}
.my-bapicture > div:last-child::after{content:'使用後'}
.my-bapicture > div img{width:100%;object-fit:cover;transform:scale(1);transition:all 1s ease-out}
.my-bapicture > div img:hover,.my-bapicture > div img:focus{transform:scale(1.3)}
.my-content{position:relative}
.rule{width:90%;max-width:1280px;margin:0 auto;padding:5% 1rem}
.rule h2{display:inline-block;background:var(--rose);color:var(--bg-ivory);padding:0 1rem;line-height:1.5;font-size:1.8rem;margin-bottom:1.5rem}
.rule ul{list-style:none;padding:0;margin:0}
.rule li{border-bottom:1px solid var(--brown);padding:1rem 0 2rem}
.rule li strong{display:inline-block;color:var(--brown);font-size:1.2rem;margin-bottom:.5rem}
.rule li strong::before{content:'';border-left:10px solid var(--navy);padding-right:.5rem;line-height:1}
.rule li p{color:var(--grey);line-height:1.7}
.shortlist{display:flex;flex-wrap:wrap;gap:1rem}
footer{display:flex;align-items:center;justify-content:center;padding:5% 0}
@media screen and (max-width : 640px) {
.my{flex-direction:column;align-items:center}
.my-bapicture{gap:.5rem;flex-direction:column}
.feel-box{padding:5% 5% 10%;border-radius:2rem}
.my .my-detail{width:100%}
}