@charset "UTF-8";

body{min-height: 100vh;}
:root{
  --shiro:white;
  --mic:#e6d8e4;
  --kuro:#191818;
  --usk:#f7f6ef;
  --gray:#aba6a8;
  --pp:#963780;
  --en:"Barlow", sans-serif;
  --yajirushi:polygon(15% 0, 100% 50%, 15% 100%, 0% 100%, 85% 50%, 0% 0%);
  --kage:rgba(0, 0, 0, 0.152);
  --inli:rgba(255, 255, 255, 0.631);
  --tral:0.33s ease-in-out;
  --km:90rem
}
select{
  white-space: normal; 
  overflow-wrap: break-word;
  word-break: break-word;
}
.pc__logo,.pc__link{display: none;}
@media (min-width:770px){
body{background: #EBE9F7;}
.pc__back{z-index: 2;position: relative;max-width: 1200px;margin: 3.8rem auto;}
}
.pc__back{background: var(--usc);min-height: 100vh;}
.back_ssk::before,.back_ssk::after{content: "";position: fixed;
inset: 0 0 0 0;display: block;
z-index: -1;width: 100%;height: 100vh;}
.back_ssk::before{background:url(../img/hana.svg) no-repeat center / cover;transform: scale(1.1);}
.back_ssk::after{background: url(../img/nami.svg)no-repeat center top / cover;height: 70vh;inset: 30% 0 0 0;}

/* header */
.hd_logo{font-size: min(calc(1rem + 1.4vw),2.1rem);padding: 0.4em 1.47em;align-items: center;}
.h_m__btn{display: block;}
.hd_subp{padding: 0.3em 1.2em;color: var(--mic);border: solid 1px;box-shadow: 0 2px 0;font-size: 1.2rem;margin: 1rem auto;border-radius:var(--km);display: grid;place-items: center;}

.ach__main{min-height: 92vh;background: #f6f6f8;border-radius: 3.8em;
box-shadow:0 0 12px var(--kage);}

.page_oof_form{display: block;margin: auto;position: relative;max-width: 80%;}
.form_ttl{width: 90%;margin: auto;background: linear-gradient(45deg,#DDC0E8,#6D5783);padding: 0.8em 0 1.2em;text-align: center;
font-weight: 700;font-size: min(calc(1.3vw + 1.2rem),2.4em);color: var(--shiro);border-radius: 0 0 3.6em 3.6em;}

.front_head{display: grid;grid-template-columns: 1fr 42%;justify-items: center;margin:3rem 0;}
.form_h1{font-size: 1.6em;border-bottom: solid 1px gray;
    padding: 0 1.2em;
    margin-bottom: 5px;}
.biko_sec{padding: .8em 1em 3.8em;}
.form_biko{width: fit-content;margin-inline: auto;}
.from_tel{font-size:max(1.8rem,calc(1.5rem + 1vw));}
.from_tel span{display: inline-block;font-size: 1.4rem;border: solid 1px;margin-right: 5px;padding: 0.1em 0.4em;}

.oof_sec{padding: 1.2em 0.8em 1.8em;box-shadow: 0 0 12px var(--kage);}
.oof_sec.oof_sec_denpo{}
.oof_form.oof_form_default{max-width: 95%;margin-inline: auto;}
.oof_form.oof_form_default section:first-of-type{border-radius: 3.6rem 3.6rem 0 0;}
.oof_form.oof_form_default section:last-of-type{border-radius:0 0 3.6rem 3.6rem;}
.oof_ttl{text-align: center;font-size: min(calc(1.3em + 1vw),2.4em);margin-bottom: 0.2em;color: var(--gray);
width: fit-content;margin:0 auto 0.2em !important;}
.ttl_hana{position: relative;}
.ttl_hana::before{content: "";width: 1.2em;height: 1.2em;display: block;
background: url(../img/hana.png)no-repeat center / contain;position: absolute;
top: 50%;left: 0;transform: translate(-100%,-50%);}

.oof_sec_denpo .oof_list{
  display: flex;gap: 1rem;justify-content: center;
  flex-wrap: wrap;
}
.oof_sec_denpo .oof_item.has_img{grid-template-columns: 1fr;gap: 0;
  padding: 0 0 1em;width: 260px;
  justify-items: center;
  border: solid 1px #ebebeb;
  background: white;}

.number_btns{text-align: center;margin: 0.8rem 0 1.6rem;}
.oof_sec .number_btns button{width: auto;border-radius: 0.8rem;
height: auto;padding: 0.4em 0.8em;display: inline-block;
color: #191818;font-size: 2.4rem;background-color: var(--mic);
transition: var(--tral);}

.oof_form.oof_form_default button:active{
  transform: scale(0.90);opacity: 0.7;
}

.oof_sec .number_btns button[data-step="down"]{
transform: scale(0.93);
}

.oof_sec_denpo figure.oof_img{width: 100%;height: 180px;border-radius: 0;
overflow: hidden;}
figure.oof_img img{height: 100%;object-fit: cover;border-radius: 0;}
.oof_sec_denpo .oof_name{font-size: 1.8rem;padding: 0.8em 0;text-align: center;}

.denpo_mees{
font-family: serif;
color: rgb(155, 114, 9);
padding: 1em 1.8em;
display: block;
font-size: 0.9em;
}

.oof_sec_denpo .oof_price{padding: 0.36em;font-size: 2rem;
  background: var(--pp);color: var(--shiro);width: 100%;text-align: center;
}
.oof_qty_kazu{display: flex;gap: 1rem;justify-content: center;align-items: center;}
.oof_qty .oof_qty_kazu .w60p{width: 60px;text-align: center;font-size: 2rem;}

.oof_subtotal{padding-right: 1.6em;font-size: 1.6em;}

.oof_msg_free_wrap .widefat{width: 320px;max-width: 600px;}

.description{width: fit-content;margin: auto;padding: 0.2em 1.2em;}


.oof_msg_tpl_details { position: relative;min-width: 240px;}
.oof_msg_tpl_summary {
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem .6rem; border:1px solid #ccc; border-radius:4px;
  background:#fff; cursor:pointer; user-select:none;
  color: var(--pp);
}
.oof_msg_tpl_panel label{display: flex;}
.oof_msg_tpl_panel{
  margin-top:.4rem; border:1px solid #ccc; border-radius:4px; background:#fff;
  max-height: 320px; overflow:auto; padding:.4rem;
}
.oof_msg_tpl_opt{ display:block; padding:.35rem .2rem .8rem; cursor:pointer; }
.oof_msg_tpl_opt:nth-of-type(2n){
background: rgb(249, 249, 247);
}
.oof_msg_tpl_opt input{ margin-right:.5rem; }
.oof_msg_tpl_opt_text{ white-space:pre-wrap; }


select.oof_msg_denpo:disabled {
    color: #3a1b54;
    font-size: 1.8rem;
    background: #f2e9e9;
    padding: 0.8em 0.2em 0.7em 0.6em;
    font-weight: 800;
    box-shadow: 3px 3px 8px gray;
    border-radius: 1px;
    appearance: none;
    text-align: center;
    opacity: 1;
}
.oof_msg_sec1{padding: 1em 0;}
.oof_msg_block{display: grid;grid-template-columns: 1fr;
gap: 1.2rem;padding: 1.8rem;max-width: 700px;margin: auto;
justify-items: center;border: solid 2px var(--gray);
border-radius: 1.8em;margin-bottom: 1.8rem;
background: var(--shiro);
}
.oof_msg_block select{font-size: 1.1em;}
.oof_msg_block textarea{width: 300px;padding: 0.38em;font-size: 1.6rem;}
.oof_form.oof_form_default label:has(input[type="radio"]){
  font-size: 1.8rem;cursor: pointer;
}
.oof_form.oof_form_default input[type="radio"] {
  appearance: none; 
  -webkit-appearance: none;
  width: 1.8em;
  height: 1.2em;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: 0.2s;
}

.oof_form.oof_form_default input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0); 
  transition: 0.2s transform ease-in-out;
  box-shadow: inset 1em 1em white; 
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* チェックされた時の挙動 */
.oof_form.oof_form_default input[type="radio"]:checked {
  background-color: #4c6ef5;
  border-color: #4c6ef5;
}
.oof_form.oof_form_default input[type="radio"]:checked::before {
  transform: scale(1.2); 
}

.radio_flex{display:flex;justify-content: space-evenly;padding: 0.8rem;width: 100%;}
.radio_flex label{display: flex !important;}

.oof_list.oof_items_ul{
  display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: flex-start;justify-content: center;
  gap: 0.2em;padding-bottom: 1.8rem;
  max-width: 1000px;margin-inline: auto;
}
.oof_list.oof_items_ul .oof_item{
  grid-template-columns: 1fr 1fr;
  max-width: 440px;
  margin-inline: auto;
  min-width: 290px;
  width: 100%;
  background: var(--shiro);
  border: solid 1px var(--gray);
  border-radius: 1.2em;
  padding: 0.4em 0.8em 1em;
}
.oof_list.oof_items_ul .oof_name{
  padding-left: 1em;
  font-size: 1.8rem;
  border-bottom: solid 1px var(--usk);
  display: block;
  margin-bottom: 0.4em;
  grid-column: 1 / -1;
}

.oof_list.oof_items_ul .oof_img{
  grid-column: 1;
  grid-row: 2;
  padding-bottom: 2em;
  width: 100%;
}
.oof_list.oof_items_ul .oof_price{
    grid-column: 1;
    grid-row: 2;
    margin-top: auto;
    display: block;
    background: #000000cc;
    color: white;
    text-align: center;
    font-size: 2rem;
}

.oof_list.oof_items_ul .oof_qty.number_wrap{
  text-align: center;
}
.oof_list.oof_items_ul .number_wrap input{
  text-align: center;font-size: 1.8rem;
  width: 60px;
}
.oof_list.oof_items_ul .oof_subtotal{
  justify-self: end;
  grid-column: 1 / -1;
  text-align: right;
  border-bottom: solid 1px lightgray;
  margin-inline: 5%;
   padding: 0 1.6rem;
}
.oof_list.oof_items_ul textarea{
  box-shadow: 3px 3px 0 rgb(233, 182, 232);
}

.req_lb{border-radius: 3px;
  display: inline-block;
  padding: 0.1em 0.1em 0.15em;
  margin-left: 5px;
  font-size: 1.2rem;
  background: var(--pp);
  color: var(--shiro);
}
.oof_sec.oof_sec_fields input{
border-radius: var(--km);
box-shadow: inset 2px 2px 4px var(--kage);
}
.sec_fields_info{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  padding: 1.8rem 0.8rem;
  gap: 0.8rem;
}
.sec_fields_info label{
  font-size: 1.8rem;
}
.sec_fields_info label input{
  width: 240px;
}

.oof_dev_wrp{
  width: 80%;
  display: grid;
  gap: 0.8rem;
}
.oof_facilities{display: flex;margin-bottom: 1.6rem;align-items: center;
justify-items: center;width: 95%;position: relative;flex-wrap: wrap;
max-width: 700px;margin: auto;gap: 1.2rem;}
.oof_facilities::after {
    content: "";
    width: calc(100% - 460px);
    height: 1px;
    border: solid 1px darkgray;
    position: absolute;
    top: 50%;
    right: 0;
}

.oof_f_h3{font-size: 2rem;}
.oof_facilities select{font-size: 2rem;}

.oof_grid.oof_data_sec{
  justify-items: center;
  margin-top: 1.8rem;
}

.data_in{
  display: grid;gap: 1rem;
  margin-left: auto;
  margin-right: 5%;
}

.data_in input,.data_in select{font-size: 1.6rem;}
.oof_data_sec .data_in:last-of-type{
margin-right: auto;
margin-left: 5%;
}
.data_ttl{font-size: 1.8rem;}

.oof_sec.oof_sec_billing .oof_bill{
  max-width: 700px;margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.oof_sec.oof_sec_billing .oof_bill label{display: flex;flex-direction: column;}

.pay_sec{display: grid;grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
gap: 1rem;}

.pay_sec label{display: grid;align-items: center;
    grid-template-columns: 40px 1fr;
    max-width: 400px;
    margin: auto;
}
.pay_sec label strong{font-size: 2rem;}

.grcol1{grid-column: 1;}
.grcol2{grid-column: 2;}
.oof_pay_desc{font-size: 1.2rem;grid-column: 1 / -1;}

.sumbit_area{padding: 1.8em 0;text-align: center;justify-content: center;
display: grid;}
.oof_total{font-size: 1.8rem;text-align: center !important;}
.js_total{font-size: 1.88em;}
.oof_btn.oof_btn_confirm{
text-align: center;
font-size: 1.8rem;
padding: 0.8em 0;
min-width: 300px;
box-shadow: 0 4px 0 var(--pp);
border: solid 1px;
color: var(--shiro);
background: var(--pp);
transition: var(--tral);
}
.oof_colspan2{
width: fit-content;
margin-inline: auto;
font-size: 1.6rem;
}
.oof_colspan2 textarea{
  min-width: 300px;
}
.oof_in_custom{
  display: grid;
  place-items: center;
  padding: 0.8em 0;
  gap: 1.8rem;

}
.label_col{width: 9em;display: inline-block;position: relative;}
.wake_funeral_biko{width: fit-content;
margin:1.8rem auto 1.2rem;
max-width: 1200px;
color: rgb(178, 10, 10);
font-weight: 800;padding: 0.4em 0.8em 0.6em;
font-size: 0.9em;}


.w30{width: 30%;}
.w66{width: 66%;}
.w45{width: 45%;} 
.w100{width: 100%;}

.mr1{margin-right:calc(1em + 5px);}
.ml1{margin-left: 1em;}
.en{font-family:var(--en);}
.txtcent{text-align: center;}
.txtrht{text-align: right;}
.fs_def{font-size: inherit !important;}
.pd1{padding: 1rem;}
.pdt1{padding-top: 1.8rem;}
small{font-size: 0.9em;}
.big_r{font-size: 1.4em;color: red;}
.txt12{font-size: 1.2rem}
.mt1{margin-top: 1rem;}
.mt3{margin-top: 3rem;}
.mb3{margin-bottom: 3rem;}

.txtb{font-size: 1.1em;}
.fs_small{font-size: 0.8em;}
.ovfinh{overflow: inherit;}
.bloc{display: block;}
.fc_up{color: rgb(201, 146, 197);}
.fc_k{color: var(--kuro);}
.bold{font-weight: 800;}
.bg_w{background: var(--shiro);}
.boder_top{border-top: solid 1px var(--pp);}
.boder_top label{margin-top: 0.4em;display: block;}

.page_list{display: grid;gap: 1.8em;padding: 3.6rem;}
.page_list_item a{width: fit-content;border: solid 1px var(--gray);color: var(--pp);
background: var(--usk);border-radius: var(--km);padding: 0.8em 2em;}

/* confirm */
.oof_confirm_wrap{
  padding: 2.1em 1.1em;
  background: var(--shiro);border-radius: 1.2em;
}
.oof_confirm_wrap h2,.oof_confirm_wrap h3{
  font-size: 1.3em;margin:1rem 0 .8rem ; color: var(--pp);
}
.oof_confirm_wrap p,.oof_confirm_wrap ul{
  padding-left: 1em;
}
.oof_confirm_wrap p{border-bottom: dashed 1px var(--gray);}
.oof_confirm_wrap ul li{
  padding: 5px 2em 5px 1em;
}
.oof_confirm_wrap form{margin-top: 1.8rem;text-align: center;}
.oof_confirm_wrap .oof_btn.oof_btn_submit{
padding: 0.28em 1.4em;font-size: 2.1rem;
background: var(--pp);color: var(--shiro);
cursor: pointer;border-radius: var(--km);
display: inline-block;margin-right: 5px;
border: solid 2px gray;
}
.oof_confirm_wrap .oof_btn{
font-size: 1.6rem;padding: 0.2em 0.8em;
margin-left: 2rem;
}
.oof_errors{
background-color: #ffffff;
padding: 1.4em;
border-radius: 8px;
}

/* thanks */
.thanks_p .form_h1{grid-column: 1 / -1;padding: 2rem;border-bottom: unset;}
.thanks_p .form__sec{
padding: 1em;
width: fit-content;margin: auto;}
.oof_thanks h2{text-align: center;}
.oof_thanks h3{
  font-size: 1.3em;margin-bottom: 5px;
}
.ach__main.thanks_p{
  border-bottom:solid 4px var(--mic);
  border-top:solid 4px var(--mic);
  min-height: 80vh;
}
.thanks_ssk{
  position: relative;
  background: url(../img/moya.png)no-repeat center /contain;
  width: 100%;
  height: 30vh;
}
.oof_thanks_back{width: 100%;text-align: center;}
.oof_thanks_back a{
  background: var(--pp);
  color: var(--shiro);
  width: 80%;max-width: 300px;
  margin: 1.6rem auto;
  display: inline-block;
  text-align: center;
  padding: 0.4em 0.8em;border-radius: var(--km);
}
@media (max-width:660px){
.ach__main{border-radius: 0;}
.sec_fields_info{grid-template-columns: 1fr !important;}
.sec_fields_info > label{text-align: center;word-break: keep-all;}
.oof_dev_wrp{padding: 2rem 0;}
.oof_grid.oof_data_sec{grid-template-columns: 1fr;}
.data_in{margin-right: auto !important;
    margin-left: auto !important;}
.oof_sec_denpo .oof_list{flex-wrap: wrap;
  gap: 1.8rem;
}
.oof_sec_denpo .oof_item.has_img{
  width: 326px;
}

.oof_sec_denpo  .oof_qty.number_wrap{
  display: flex;
  align-items: baseline;
  gap: 2rem;
}
.oof_facilities select{
  font-size: 1.6rem;
}
.w45,.w66{width: 90%;margin-inline: auto;}

}
@media (max-width:560px){
  .form_h1{font-size: 1.1em;}
  .front_head{grid-template-columns: 1fr;}
  .from_add{grid-row: 2;}
  .oof_msg_free_wrap .widefat{width: 100% !important;}
  .oof_msg_free_wrap{width: 100%;}
  .denpo_mees{padding: 1em 3.8em;}
}


@media (hover:hover){
}