/* CSS Document */
div.contact_page{
  padding: var(--headerHeight) 0;
}
div.contact_page > div.contact_text{
  margin-bottom: 3rem;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}
body[wc-view-type="tb"] div.contact_page > div.contact_text{
  padding: 0;
}
div.contact_page > div.contact_text > p{
  line-height: 1.8rem;
  margin-bottom: 1rem;
}
body[wc-view-type="tb"] div.contact_page > div.contact_text > p,
body[wc-view-type="pc"] div.contact_page > div.contact_text > p{
  text-align: center;
}
div.contact_page > div.contact_text{
}
div.btn{
  display: table;
  margin: 0 auto;
}
div.btn a{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 2rem 0 0.5rem;
  text-decoration: none;
  background-color: var(--defaultcolor);
  color: #fff;
  font-weight: 700;
  height: var(--headerBtnSize);
}
div.btn a::after{
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  width: calc(var(--headerBtnSize) - 6px);
  height: calc(var(--headerBtnSize) - 6px);
  right: 0;
  top: 3px;
  background-color: #fff;
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}
/*コンテンツ*/
main{
  background-color: var(--defaultsysbg);
}
div.contact_tel{
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}
body[wc-view-type="tb"] div.contact_tel{
  padding: 0;
}
div.contact_tel > h3{
  background-color: var(--defaultcolor);
  color: #fff;
  font-weight: 700;
  padding: 0.5rem;
  font-size: 0.95rem;
  box-sizing: border-box;
  white-space: nowrap;
  display: table;
  margin-right: auto;
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  position: relative;
  z-index: 1;
}
div.contact_tel > h3::before,
div.contact_tel > h3::after{
  position: absolute;
  display: block;
  left: 2px;
  content: "";
}
div.contact_tel > h3::before{
  bottom: -0.5rem;
  z-index: 1;
  width: 0.5rem;
  height: 0.6rem;
  background-color: var(--defaultcolor);
}
div.contact_tel > h3::after{
  bottom: -1rem;
  z-index: 2;
  width: 1rem;
  height: 1rem;
  border-radius: 0.5rem 0 0 0;
  background-color: var(--wcBg);
}
div.contact_inbox{
  background-color: #fff;
  padding: 2.25rem 0.75rem 0.75rem;
  margin-top: -1.5rem;
  border-radius: 0 0 0.5rem;
  box-shadow: 0 0 .6rem -.3rem rgba(0,0,0,.4);
  box-sizing: border-box;
  border-left: solid 2px var(--defaultcolor);
}
div.contact_tel div.tel a{
  padding-left: 2.5rem;
  position: relative;
  z-index: 1;
}
div.contact_tel div.time{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--defaultcolor);
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
div.contact_tel div.tel a{
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: 700;
  color: var(--defaultcolor);
}
body[wc-view-type="tb"] div.contact_tel div.tel a,
body[wc-view-type="pc"] div.contact_tel div.tel a{
  pointer-events: none;
}
div.contact_tel div.time span{
  font-weight: 700;
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.55rem;
  background-color: var(--defaultcolor);
  color: #fff;
  margin: 0.2rem 0.4rem 0.2rem 0;
  line-height: 1;
}
div.contact_tel div.tel a::after{
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  width: 35px;
  height: 35px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--defaultcolor);
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}
div.contact_page div.contact_block{
  width: 100%;
  margin-top: 4rem;
  padding: 0 1rem;
  box-sizing: border-box;
  border-top: solid 1px #c3c3c3;
  padding-top: 4.5rem;
}
body[wc-view-type="tb"] div.contact_page div.contact_block{
}
body[wc-view-type="pc"] div.contact_page div.contact_block{
  width: 760px;
  margin: 4rem auto 0 auto;
}
div.contact_page div.contact_block form{
  padding: 0.75rem 0 0 0;
  margin-top: -1.5rem;
  border-radius: 0 0 0.5rem;
  box-sizing: border-box;
}
div.contact_page div.contact_block form label.category{
  width: 100%;
  display: block;
  margin-bottom: 1.5rem;
}
div.contact_page div.contact_block form label.category div.category_box{
  position: relative;
  z-index: 1;
}
div.contact_page div.contact_block form label.category div.category_box::after{
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  opacity: 0.5;
  background-color: var(--defaultcolor);
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;  
}
div.contact_page div.contact_block form label.category > span{
  display: block;
}
div.contact_page div.contact_block form label.category select{
  line-height: 40px;
  width: 100%;
  position: relative;
  z-index: 1;
  color: var(--defaultcolor);
  background-color: var(--wcBg);
  padding: 0 0.5rem 0 0.2rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
div.contact_page div.contact_block form dl{
  margin-bottom: 1.5rem;
}
div.contact_page div.contact_block form label.category > span,
div.contact_page div.contact_block form dl dt{
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
  font-weight: 700;
  padding-bottom: 0.7rem;
  padding-left: calc(2em + 1.4rem);
  color: var(--defaultcolor);
  display: flex;
  align-items: center
}
div.contact_page div.contact_block form dl dt label{
  color: var(--defaultcolor);
  font-weight: 700;
}
div.contact_page div.contact_block form label.category > span::before,
div.contact_page div.contact_block form dl dt::before{
  position: absolute;
  font-size: 0.7rem;
  background-color: rgba(68,68,85,0.2);
  margin: 0 0.5em 0 0;
  padding: 0.2rem 1em;
  display: inline-block;
  left: 0;
  color: #fff;
  border-radius: 1rem;
}
div.contact_page div.contact_block form label.category > span::before,
div.contact_page div.contact_block form dl dt.mandatory::before{
  content: "必須";
  background-color:var(--accentcolor);
}
div.contact_page div.contact_block form dl dt.any::before{
  content: "任意";
  background-color: var(--defaultcolor);
}
div.contact_page div.contact_block form dl dt label{
  display: inline-block;
}
div.contact_page div.contact_block form dl dd{
  line-height: 40px;
  width: 100%;
  position: relative;
  z-index: 1;
  color: var(--defaultcolor);
  background-color: var(--wcBg);
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
input[type="text"]{
  text-indent: inherit;
}
::placeholder {
  color: var(--defaultcolorA);
}
div.contact_page div.contact_block form dl dd input{
  line-height: 40px;
  background-color: #fff;
}
div.contact_page div.contact_block form dl dd textarea{
  line-height: 40px;
  background-color: #fff;
}
div.soushin{
  display: table;
  margin: 0 auto;
  position: relative;
  z-index: 1;
   background-color: var(--defaultcolor);
}
div.soushin::after{
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  width: 30px;
  height: 30px;
  right: 0.5rem;
  top: 50%;
  background-color: #fff;
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  transform: translateY(-50%);
}
div.soushin button{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--headerBtnSize) + 1rem ) 0 1.5rem;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  height: var(--headerBtnSize);
  background-color: transparent;
}
div.soushin button > span{
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  width: 30px;
  height: 30px;
  right: 3px;
  top: 3px;
  background-color: #fff;
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}