﻿a,#qaSearch input[type="submit"]:hover,
#qaSearch input[type="submit"]:hover,#qaSearch .searchbtn:hover,#qaWrap button.qabtn:hover,
#btnset input:hover{	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}

#noticebox a:hover,#policyTxt a:hover,.qalink a:hover{ color:#2089c5 }

#qahead input::placeholder { color: #aaa;}

#pagewrap,#pagewrap ul,.tabs{ display: flex; }
#pagewrap { justify-content: space-between; }
#pagewrap ul{ align-items: end; }

#pagewrap li,.tabs a{ position: relative; }
#qa #pagewrap li::before,#qacontact #pagewrap li#tabqa a::before,
 #qacontact #pagewrap li#tabcontact::before,
#pagewrap li a::after,#qacontact #tabcontact::after,
.tabs a::before, .tabs a::after{ position: absolute; content:""; }
#qa #pagewrap li::before,#qacontact #tabqa a::before,#qacontact #pagewrap li#tabcontact::before,
 .tabs a::before{ top:50%; background-position: 0 0; background-repeat: no-repeat; 
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
}

/* v */
#tabqa a::after,#qa #tabcontact a::after,#qacontact #tabcontact::after,#btnset input::after{ border-color:#fff;}
#tabqa a::after,#tabcontact a::after,#qacontact #tabcontact::after,
.tabs a::after, .qabtn a::after,#qaWrap button.qabtn::after,
.overseabtn a::after,#btnset input::after{  
  border-style: solid; display: block;  height: 6px; width: 6px;
  right: 20px; 
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);}

#tabqa a::after,#qa #tabcontact a::after,#qacontact #tabcontact a::after,.tabs a::after, #qaWrap .qabtn a::after,
#qaWrap button.qabtn::after,#qacontact #tabcontact::after{
    border-width: 0 2px 2px 0; top: 40%; }


/* > */
#qacontact #tabqa a::after{ border-width: 2px 2px 0px 0; }
.tabs a::after{ border-color:#90d2ea; }
.contactEmail .qabtn a::after,.overseabtn a::after,.sendbtn a::after{  border-width: 2px 2px 0 0;top: 42%; }

#tabqa,#qacontact #tabcontact,
#pagewrap li a{ color: #fff; height: 53px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}
#qa #tabqa, #qacontact #tabqa a{ background:#0090d5;}
#qacontact #tabqa a:hover{ background:#006abd; }

#tabcontact a{  display: block; }

#qacontact #tabcontact,
#tabcontact a{ background: #ff5d82; }
#tabcontact a:hover{ background: #ff99ab; }
#qa #tabqa::before,
#qacontact #tabqa a::before{  background-image: url(../image/qaIcon.png); width: 42px;}
#tabcontact::before{ background-image: url(../image/contactIcon.png); width: 18px; height: 33px; left:22px;}

#qa #tabqa, #qacontact #tabqa a,
#tabcontact a,#qacontact #tabcontact,
.tabs a {  border-radius: 8px 8px 0 0; }
/*#qacontact #tabcontact a{ padding: 0; }*/


/*検索*/
#qahead{ color: #fff;  background: #0090d5;position: relative; }
/*#qahead .contents{ position: relative;  }*/
#qaSearch{ position: relative;  margin-left: auto; margin-right: auto;}
#qaSearch form{ max-width: 750px; width: 100%; display: flex; margin-left: auto; margin-right: auto; }
#qaSearch::before,#qaSearch::after{ position: absolute; content: ""; background-position: 0 0; background-repeat: no-repeat;  }
#qaSearch::before{ background-image: url(../image/keywordimg.png);}

#qaSearch input[type="search"],#qaSearch input[type="submit"],
#qaSearch .searchbtn{  border: 0;  border-radius: 4px;}
#qaSearch input[type="search"] { 
    width: 100%;
    margin: auto;
    box-sizing: border-box;
    line-height: 1;
    font-size: 16px; }
  #qaSearch input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

 #qaSearch .submitbtn { position: absolute; top: 0; bottom: 0;  }
 #qaSearch input[type="submit"],
#qaSearch .searchbtn {
    background: transparent;
    background: #00cdec; color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    letter-spacing: 0.2em; }
  #qaSearch input[type="submit"]:hover,
  #qaSearch input[type="submit"]:hover,#qaSearch .searchbtn:hover{ background: #0cc5e1; }
  #qaSearch::placeholder {
    color: #aaa;  }
  /* 旧Edge対応 */
  #qaSearch::-ms-input-placeholder {
    color: #aaa;  }
  /* IE対応 */
  #qaSearch:-ms-input-placeholder {
    color: #aaa;  }


/*tab*/
.food a::before{ background-image: url(../image/foodIcon.png); width: 28px; height: 16px; left:32px; }
.goods a::before{ background-image: url(../image/goodsIcon.png); width: 18px; height: 18px; left:40px; }
.exotic a::before{ background-image: url(../image/exoticIcon.png); width: 20px; height: 24px; left:14px; }
.manual a::before{ background-image: url(../image/manualIcon.png); width: 16px; height: 20px; left:20px; }

.tabs li{ list-style: none; }
.tabs li.active a,
.tabs a { color: #2089c5; box-sizing: border-box; font-weight: 500;
    text-decoration: none; background: #fff; padding: 14px 12px;
    border-bottom: 1px solid #0090d5; text-align: center; }

.tabs li.active a,#qaWrap{ background: #fff7ed; }
.tabs li.active a{ border-bottom: 1px solid #fff7ed; }
.tabs li a:active{ opacity: inherit; }
.tabs li.active a:hover{ color:#005698; /*opacity: 0.9;*/ }
.tabs a:hover {  color: #2089c5;  background: #f3fbff; }
                
/*accordion---------------------------------------*/
/*アコーディオン全体*/
.accordion-area{ list-style: none; margin-right: auto; margin-left: auto;}
.accordion-area li{ border: 1px solid #85c6d8;  border-radius: 8px; background: #fff;}


/*アコーディオンタイトル*/
.actitle span{cursor: pointer; display: block;  font-weight: 500;  transition: all .5s ease; color: #006692;}
                
.actitle ,
.anserbox{ position: relative; }
                
.actitle::before, .anserbox::before,
.actitle span i::before,
.actitle span i::after{  position: absolute;  content:"";}
         
/* QA */
.actitle::before,.anserbox::before{background-repeat:no-repeat ; background-position: 0 0;content:"";}
.actitle::before{ background-image:url(../image/qIcon.png) ;  height: 23px; }

      
/*アイコンの＋と-*/
.actitle span i{  background: #d9f0ff; border-radius: 50%; position: absolute;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%); }
.actitle span i::before,
.actitle span i::after { height: 2px; background-color: #0090d5; top:50%;   }
.actitle span i::before{ transform: rotate(0deg);}
.actitle span i::after{
   transform: translateY(-50%) rotate(90deg);
    transition: transform 1s;}

/*　closeというクラスがついたら形状変化 -　*/
.actitle.close span i::after{
  transform: rotate(0deg);
  transition: .3s;}


/*アコーディオンで現れるエリア*/
.anserbox {display: none;/*はじめは非表示*/ margin:0 10px 10px;
    background: #fff2f5;  line-height: 1.6em; }
.anserbox::before{ background-image:url(../image/aIcon.png) ; width: 18px; height: 19px;}

.qalink a,.pdficon a span,.externalicon a span{ text-decoration: underline; }
.qalink{ margin-top: 7px; }
.pdficon a span,.externalicon a span{ position: relative; display: inline-block; padding-right: 5px;}
.externalicon a span::after,
.pdficon a span::after{ position: absolute; content: ""; width: 10px;  left:100%;
background-repeat: no-repeat; background-position: 0 0;
}
.pdficon a span::after{  background-image: url(../image/pdficon.png) ; height: 12px;top: 4px;}
.externalicon a span::after{ height: 10px;top: 4px;  background-image: url(../image/externalicon.png); }

.qaimg{ display: flex; margin-top: 15px; width: 100%; flex-wrap:wrap; justify-content: center;}
.accordion-area .qaimg li { border: none;  border-radius: inherit; background: inherit;
  max-width: 500px; width: 100%; margin:0 8px 8px; }

/*btn*/
.qabtn a,#qaWrap button.qabtn,#btnset input.sendbtn{  background: #008fe5; }
.qabtn a,#qaWrap button.qabtn,.overseabtn a,
#btnset a{ color: #fff; border-radius: 4px; position: relative; 
  justify-content: center; align-items: center; display: flex; height: 60px;}
.qabtn a::after,.overseabtn a::after,
#qaWrap button.qabtn::after,
#btnset input.sendbtn::after{ position: absolute; content: ""; right: 20px; border-color: #fff;}
.qabtn a:hover,#qaWrap button.qabtn:hover,
#btnset input.sendbtn:hover{ background: #006abd; }


#qaWrap .qabtn a,
#qaWrap button.qabtn{ margin:0 auto; max-width: 260px; }
#qaWrap button.qabtn{ border:none; cursor: pointer;
  font-family: 'Roboto','Noto Sans Japanese', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; }



/*contact*/
#contact h3{ text-align: center; }
.contactBox{ border-radius: 8px; border: 1px solid #ccc; }
.contactBox dt{ font-weight: 500; color: #2089c5; border-bottom: 1px solid #b4cedc; position: relative;}
.contactBox dt::before,.contactBox dt::after{ position: absolute; content: "";}
.contactBox dt::before{  border-radius: 50%; background: #c0e7fb; }

.contactBox dt::after, #freedial::before{ background-position: 0 0; background-repeat: no-repeat; }
.contactPhone dt::after{ background-image: url(../image/phone.png); width: 12px; height: 20px;}
.contactEmail dt::after{ background-image: url(../image/pc.png); width: 20px; height: 16px; }
.contactMail dt::after{ background-image: url(../image/mail.png); width: 17px; height: 11px; }
.contactMail{ position: relative; }
.contactMail::after{  max-width: 204px; width: 100%; height: 108px; right:0; 
  position: absolute; content: "";
   background-position: 0 0 ; background-repeat: no-repeat; 
background-image: url(../image/mailImg.png);}

#freedial a{ color:#2089c5; position: relative; font-weight: 600;}
#freedial a::before{ position: absolute; content: ""; width: 33px; height: 29px;
    left: -3px; top: 50%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
    background-size: 100%; background-image: url(../image/freedial.png); background-repeat: no-repeat;}

#reception{ display: flex; }
#reception span{ color: #006ea4;  }
.notice{ position: relative; padding-left: 15px; }
.notice::before{ position: absolute; content: "※";left:0 }

#information{  font-weight: 500; margin-top: 9px; font-family: 'Noto Sans Japanese'; }

/*問い合わせページ*/
#contactWrap{  border-top: 2px solid #ff5d82; padding-top: 50px;}
#contactabout p{ font-weight: 500; }
#contactabout p,#thanksabout p { background:#fff9f9; line-height: 2em; }
.brtxt{ margin-bottom: 10px; display: inline-block;}

#thanksabout p .notice{ display: inline-block;
  text-align: left; }

#thankstxt{ font-size: 1.2em; font-weight: 500; display: block; margin-bottom: 10px; }

#contactabout p,#noticebox, #noticeWrap .notice,
#policyTxt,#overseaCont li:first-child,#overseaCont2 li:first-child,#requiretxt,
.formtable,.formBox input, .formtable textarea,.formtable select,#thanksabout p,#qaWrap button.qabtn{ font-size:16px; }

#noticeWrap h4{ position: relative; }
#noticeWrap h4::before{ position: absolute; content: ""; width: 10px; background: #78c0e8; height: 3px;
  top: 50% ; left: 0; }
#noticebox{ border: 3px solid #f3f3f3; }
#noticebox li{ line-height: 1.8em; }
#noticebox li:not(:last-child) { margin-bottom: 20px; }
#noticebox a,#policyTxt a{ text-decoration: underline; }
.notice{ position: relative; padding-left:20px; }
.notice::before{ position: absolute; content:"※"; left:0; }
.redtxt,.redtxt1,.redtxt2,.errortxt{ color: #d82949; }
.notice.redtxt1{  font-weight:500; }

.point,.qalink{ position: relative; padding-left:20px }
.point::before,.qalink::before{position: absolute; content:"・"; font-size: 18px; left:0; color: #78c0e8; }

#overseaCont,#overseaCont2{ max-width: 880px; width: 100%; margin-left: auto; margin-right: auto;
   border-radius: 8px; background: #f9f9f9; display: flex; align-items: center;
  position: relative; box-sizing: border-box;}

#overseaCont::before{  width: 49px; height: 76px;
background-image: url(../image/contactimg1.png);
transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
}

#overseaCont2::before{  width: 49px; height: 76px;
  background-image: url(../image/contactimg2.png);
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  }


#overseaCont::before,#overseaCont2::before,
#introtitle::before{ position: absolute; content: ""; background-position: 0 0; background-repeat: no-repeat;}
.overseabtn a{border-radius: 4px; color: #fff; background: #73c4ec;  }


#domaintxt{ margin-top:10px }
.redtxt2{ padding:0 1px }

.agreetxt,.agreetxt2{ text-align: center;}
.agreetxt2{ font-weight: 500;  }

/*form---------------------*/

.errortxt,.sendtxt{ margin-top: 10px; }
.formtable{ margin-bottom: 40px; }

.formBox input, .formtable textarea, .formtable select { border: 2px solid #e4eff5; box-sizing: border-box; 
  outline: none; -webkit-appearance: none;}
.formlabel {  max-width: 690px; width: 100%;}
.formlabel2{ margin-right: 10px; }

.formtable li:nth-child(odd){ background: #f3faff; }

.formtable .radioStyle,.formtable select{  cursor: pointer; }
.formtable input[type="radio"]{ margin-right: 6px;}
.radioStyle:not(:last-child){ margin-right: 27px; }
.formtable .point{ margin: 5px 0 15px }
.formtable select { background: #fff; margin: -2px 0;
  position: relative;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 4;
}

.selectIcon { position: relative;  display: inline-block;}
.selectIcon::before {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  height: 0.5em;
  width: 0.5em;
  z-index: 5;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  right: 10px; }
.selectIcon::before, .selectIcon::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;  bottom: 0;
  margin: auto;
  font-size: 10px;
  pointer-events: none; }
  .selectIcon::after {
    width: 2.5em;
    height: inherit;
    background: #0090d5;
    z-index: 4;
    right: 2px;
  }

#introtitle{ position: relative; text-align: center; font-size: 18px; margin-bottom: 45px; margin-top: 150px; }
#introtitle::before{ background-image: url(../image/contactimg2.png); width: 47px; height: 70px;
left:50%; top:-78px; 
transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);}
#introtitle span{ font-size: 21px; font-weight: 500; }


/*送信btn*/
#btnset{  justify-content: space-between; }
#btnset,#confirmbtn{ display: flex; align-items: center; max-width: 600px;  margin: 0 auto; }
#confirmbtn{ justify-content:center }
#btnset input, .sendbtn a,.erasebtn a{  width: 260px; }
#btnset input{ border: none; cursor: pointer; position: relative; }
#btnset .erasebtn a{ background: #aaa; color: #fff; }
#btnset .erasebtn a:hover{ background: #bbb; }
#btnset .erasebtn a::after{ content: ""; position: absolute; left: 20px; border-color: #fff;
   border-width: 0 0 2px 2px; border-style: solid;
  width: 6px; height: 6px;  
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);}

/*pc-----------------------------------------------------*/
@media screen and (min-width: 1081px), print {
#pagetitle{font-size: 2.143em; margin: 30px 0; }
.tabs li:not(:last-child){ margin-right: 20px; }
.tabs li a{ width: 180px; }
#qaSearch input[type="submit"],
#qaSearch .searchbtn,
#pagewrap li,.tabs, .actitle,.qabtn a, .overseabtn a,#qaWrap button.qabtn,
#btnset a{ font-size: 1.15em; }
#qahead{ padding-top: 65px;}
.qasearchwrap #qahead{ padding-bottom: 10px; }
#qahead h3,#contact h3,#freedial,#contactWrap h3{ font-size: 1.71em; }
#qahead h3{ margin-bottom: 25px; }
.qacont #qaSearch{ padding-bottom: 140px;}
#qaSearch form label{ width: 81%; margin-left:-5px }
#subjectList{  bottom: 40px;}

#qa #tabqa::before,
#qacontact #tabqa a::before{ height: 34px; left:30px; }

#qa #tabqa{ padding-left: 40px; }
#tabqa{ margin-right: 20px; width: 218px; box-sizing: border-box; }
#qacontact #tabqa a{padding: /*0 40px 0 90px*/0 45px 0 85px; }
#tabcontact a/*,
#qacontact #tabcontact*/{ padding: 0 40px 0 60px; }
.qasearchwrap #qaSearch::after{ bottom: -126px; }

#qaWrap{padding:60px 0 ; }
.accordion-area{ width: 96%; max-width: 980px;  margin-bottom: 80px; }
.accordion-area li:not(:last-child){ margin-bottom: 30px;}
.accordion-area .qaimg li:not(:last-child){ margin-bottom: 16px; }
.anserbox, #information{ font-size: 1.07em; }
#contact h3{ margin-bottom: 30px; }
.contactBox:not(:last-child){ margin-bottom: 20px; }
#freedial a{ padding-left: 43px;}
#freedial a,
.contactPhone dd{ line-height: 1.2em; }
#reception{ margin:18px 0 16px; }
#reception span{ margin-right: 15px;}

#device{ width:55%; }

#contact{ margin-top: 60px; }
.contactEmail .qabtn a{ max-width: 310px; margin-left: auto; margin-right: auto; }
.contactBox{padding: 30px 25px 20px; }
.contactBox dt{ padding:0 15px 13px 80px; margin-bottom: 20px;}
.contactBox dt::before{  top:-10px; left: 10px; width: 50px; height: 50px;}
#letter dt br,#reception p br{ display: none; }
#contactWrap{ margin-bottom: 110px;}
}

@media screen and (min-width: 751px){
#qa{ margin-bottom: 50px; }
#qaSearch .submitbtn { right: 10%;}
.tabs li.active a,
.tabs a {display: block;}
.tabs li span{ margin-left:5px }

#qaSearch::before{ max-width: 73px;background-size: 100%; width: 73px; height: 118px; top: -10px; left:0}
#qaSearch::after{ max-width: 145px; width: 145px; background-size: 100%; height: 116px; right: 0;  }

.qacont #qaSearch::after{ bottom: 14px;  }


#qaSearch input[type="submit"],
#qaSearch .searchbtn {right: 10px;width: 130px;}
#qaSearch input[type="search"],
#qaSearch .submitbtn { height: 60px; }
#qaSearch input[type="search"]{ padding: 15px 20px; }
#qaSearch::after{ background-image: url(../image/keywordimg2.png);}


.actitle::before{width: 20px; left: 30px; top: 25px;}
.actitle span{ padding: 24px 62px 25px 80px;}
.actitle span i{ width: 30px; height: 30px; right: 20px; top: 50%; }
.actitle span i::before,
.actitle span i::after { right: 7px; width: 16px;}

.anserbox { padding: 25px 30px 25px 70px;}
.anserbox::before{ left: 20px;  top: 25px; }

#contactlist{ display: flex; justify-content: space-between;  }
#freedial a{ pointer-events: none; }
#letter{ width:37.5% }
.contactBox dt{ font-size:1.22em ; }
.contactBox dt span{ font-size: 1.3em;}
.contactPhone dd, .contactMail dd{ padding:0 20px }
#device dt br,.agreetxt2 br.brtxt{ display: none; }
.contactMail::after{ margin-top: 50px;}
.contactPhone dt::after{ left: 29px; top: 10%;}
.contactEmail dt::after{ left: 25px; top: 16%; }
.contactMail dt::after{ left: 26px; top: 19%; }

/*件数*/
#subjectList{   width: 70%; margin:0 auto; padding:60px 0 40px;
  /*bottom: 40px;*/ text-align: center;  font-size: 18px;
    /*position: absolute; left: 50%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);*/}
/*0件*/
#nosearch{  line-height: 1.5em;}

#noticeWrap h4{ font-size: 21px; margin-bottom: 20px;padding-left:20px;}
#contactabout p,#thanksabout p {margin:40px 0 80px; padding:50px 20px;  text-align:center;}
#noticebox{  padding:30px 20px; margin-top: 15px; margin-bottom: 80px;}
.agreetxt br, .formtable .notice.redtxt br,.formtable .point br{ display: none; }
#domaintxt br{ display: block; }
.agreetxt,.agreetxt2{ font-size: 18px;}
.agreetxt{ margin-bottom: 100px; }
.agreetxt2{ margin-bottom: 50px;}

#requiretxt{ margin:0 0 20px 30px }
#overseaCont{  margin-bottom: 20px;}
#overseaCont2{  margin-bottom: 80px;}
#overseaCont2 p{ margin-bottom: 7px; }
#overseaCont2 li{ line-height: 1.6em; }
#overseaCont,#overseaCont2{ padding:25px 25px 25px 120px;  justify-content: space-between;}
#overseaCont::before,#overseaCont2::before{ left:20px; top:50%;}
.overseabtn a{width: 260px;}
.overseabtn a:hover{ background: #61bdea; }

/*form*/
.formtable li{ padding:25px 30px }
.formtable li dl{ display: flex; }
.formtable li dt{ width: 24%; }
.formtable li dt.formtitle{ padding:9px 0 }
.formtable li dd{ width: 74%; }

.formBox input, .formtable textarea {padding: 12px ; }
.formtable select {padding: 12px 30px 12px 12px;}
.selectIcon { width: 160px; margin-left:25px; margin-bottom: 20px;}
.numBox input{ width: 110px; }
.addsign { margin: 0 15px;}
.formlabel2{ width: 170px;}

#policyTxt{ line-height: 1.9em; margin-bottom: 75px; }
#overseaCont br.sp,
#overseaCont2 p br{ display: none; }

}

@media screen and (min-width: 641px){
  .tabs br.phone{ display: none; }
}

@media screen and (min-width: 481px) and (max-width: 750px){
  .actitle span { padding: 5% 11% 5% 10%;}
  .actitle::before{ left: 4%; top: 4vw; }
  .anserbox { padding: 4% 4% 5% 42px}
  .anserbox::before{ left: 2.5%; top: 17px;}
  .qabtn br.phone{ display: none; }
}

@media screen and (min-width: 374px){
  .contactBox dt br{ display: none; }
}

  
@media screen and (max-width: 750px){
  #contact{ margin-top: -16vw; padding-top: 16vw;}
  #qa{ margin-bottom: 14% }
 #pagetitle,#qaSearch form label, #pagewrap ul, #tabcontact{ width: 100%; }
 #pagewrap{ flex-wrap: wrap; }
 #pagewrap ul {justify-content: end; letter-spacing: -1px; font-size: 0.95em; /*font-size: 4vw;*/ line-height: 1.2em;}
 #qahead {padding-top: 6%;}
 #qaSearch { padding-bottom: 110px;}
 #qaSearch .submitbtn { right: 50%; width: 105px; top: inherit; bottom: inherit; margin-top: 18px;
  transform: translate(50%, 0%);
  -webkit-transform: translate(50%, 0%);
  -ms-transform: translate(50%, 0%); }
#qaSearch input[type="search"]{ padding:0 15px;height: 44px; }
#qaSearch::before,#qaSearch::after{ background-size: 100%;}
#qaSearch::before{max-width: 47px; width: 13vw;  height: 76px;  bottom: 22px; left: 3%;}
#qaSearch::after{ width:25vw; max-width: 91px; height: 74px; right: 2%; bottom: 5%; }
#qa #tabqa::before, #qacontact #tabqa a::before { left:2.5vw; width: 27vw; height: 20px; max-width: 25px; }

#qaWrap button.qabtn{ font-weight: inherit; }

#qaSearch .submitbtn, #qaSearch input[type="submit"] ,#qaSearch .searchbtn,
#qaSearch input[type="submit"]{ height: 44px;  font-size: 16px; font-weight: inherit;}   
#qaSearch input[type="submit"],#qaSearch .searchbtn{ width: 100%; max-width: 105px;}
#qaSearch::after{ background-image: url(../image/keywordimg2sp.png);}

#tabqa{ width: 56%; margin-right: 3%;}
/*#tabqa, #pagewrap li a{ height: 50px; }*/

#qaSearch input::placeholder{ font-size: 16px; }
.tabs a::after{ bottom: 7px;  right: 44%;  top: inherit; }
.tabs li{ font-size: 15px;}
.tabs li:not(:last-child){ margin-right: 2%; }
.tabs li a{ height: 83px;
  display: flex;  justify-content: center; /*align-items: center;*/  }
 
.tabs li.active a, .tabs a{padding: 30px 12px 14px}
#tabqa::before, #tabcontact::before{ background-size: 100%; left: 4.5vw;}
#tabqa::before{ width: 8vw;  height: 32px; max-width: 40px;}
#qacontact #tabqa{ padding-left: inherit; }
#qacontact #tabqa a{ width: 100%;}
#qacontact #tabqa a::before{background-size: 100%; }

/*
#tabqa a::after,#qa #tabcontact a::after,#qacontact #tabcontact::after,#btnset input::after{ border-color:#fff;}
#tabqa a::after,#tabcontact a::after,#qacontact #tabcontact::after,
.tabs a::after, .qabtn a::after,#qaWrap button.qabtn::after,
.overseabtn a::after,#btnset input::after{ width: 4px; height: 4px; }*/

#tabcontact a { padding: 0 20px 0 26px; line-height: 1.2em;width: 100%;}
#tabcontact::before{ width: 3vw; height: 21px;max-width: 9px; }
#tabcontact{ width: 80%; /*padding-left: 6px;*/}

.tabs a::before{ left: 50%;  background-position: center bottom;
  background-size: 80%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%); }
.tabs .food a::before{ top:8px }
.tabs .goods a::before{ top:6px }
.tabs .exotic a::before{ top:2px }
.tabs .manual a::before{ top:5px }
.tabs a::after{ width: 4px; height: 4px; }

#qahead h3, #contactWrap h3, #contact h3{ line-height: 1.5em; margin-bottom: 5%; }
#freedial{ line-height: 1.5em; margin-bottom: 4%; }
#qahead h3,#freedial, #contactWrap h3,.contactBox dt span{ font-size: 1.2em;}
.actitle::before{ width: 5vw; }
.anserbox::before{ width: 4.5vw;  }
.actitle::before,
.anserbox::before{ background-size: 100%;max-width: 18px; }
.actitle, .anserbox{line-height: 1.5em; }
  .actitle span i{ top: 37px; width: 26px; height: 26px; right: 4%; }
  .actitle span i::before{ right: 50%;
    transform: translate(50%, 0%);
    -webkit-transform: translate(50%, 0%);
    -ms-transform: translate(50%, 0%);}
  .actitle span i::after{right: 6px; }
  .actitle span i::before,
  .actitle span i::after { width: 14px; top: 50%;}
  .anserbox{font-size: 0.96em;}

  #contactlist{width: 92%; margin: 0 auto;}

  #contact h3{font-size: 24px; }
  .contactBox{padding: 20px 4%; }
  #letter.contactBox{ padding-bottom: 0; }
  .contactBox dt{ padding:0 0 12px 60px; margin-bottom: 20px; font-size:1.12em ; }
  
  .contactPhone dd, .contactMail dd{ padding:0 20px }
  .contactBox dt::before{  top:3px; left: 15px; width: 32px; height: 32px;}
  .contactPhone dt::after{  left: 25px; top: 18%;}
  .contactEmail dt::after{ left: 21px; top: 25%; }
  .contactMail dt::after{ left: 22px; top: 31%; }
.contactPhone #reception, .contactPhone .notice{ font-size: 14px; }

  
#freedial a{ padding-left: 43px; font-size: 24px;}
#device .contactBox{ margin-bottom: 6%; }
.contactMail::after{ bottom: 0;background-size: 100%; width:152px; height: 104px; }
#letter dd{ padding-bottom: 110px; }
#information{ font-size: 1.05em; }

/*件数*/
#subjectList{text-align: center; font-size: 1.05em; padding-bottom: 7%; margin-top: -3vw;}

.actitle span{ font-size: 1.09em; }

/*tab*/
#tabqa a::after, #tabcontact a::after{ right: 10% }
#tabcontact a::after,#qacontact #tabcontact::after{ right:8% }

#noticeWrap h4{ font-size: 1.14em; margin-bottom: 4%; padding-left:4.5%;}
#noticeWrap h4::before{ height: 2px; width: 8px;  top:48%}
#contactabout p,#thanksabout p {margin:8% 0 12%; padding:6% 7%; text-align: left;}
#contactabout .brtxt{ display: none; }
#noticebox{  padding:6% 2.5% 8%; margin-top: 4%; margin-bottom: 12%}

.agreetxt,.agreetxt2{ font-size: 1.14em; line-height: 1.4em;}
.agreetxt{ margin-bottom: 14%; }

#requiretxt{ margin-bottom: 3% ;margin-left: 2%;}

#overseaCont,#overseaCont2{ width: 94%; margin-left:auto ;margin-right: auto;
   flex-wrap: wrap; justify-content: center; text-align: center; margin-bottom: 12%; padding:5% 10% 8%;}
#overseaCont li:first-child{ margin-bottom: 3%; }
#overseaCont li:first-child,
#overseaCont2 li:first-child{ margin-bottom: 4%; width: 100%; line-height: 1.6em;}
#overseaCont2 p{ margin-bottom: 1%; }

#overseaCont::before{ left:3%; bottom:-1vw; background-size: 100%; width:10vw; height: 15.5vw;}
.overseabtn a{width: 190px; height: 42px;}

#overseaCont2::before{ left:3%; bottom:-1vw; background-size: 100%; width:10vw; height: 15.5vw;}
.overseabtn a{width: 190px; height: 42px;}

/*form*/
.formtable { line-height: 1.5em; }
.formtable li{ padding: 18px 15px}
#formkind .radioStyle{ width: 100%; display: block; }  
#formkind .radioStyle:first-child{ margin-bottom: 6px; }
.formtable li dt{ margin-bottom: 9px }
.formBox input{ height: 40px; }
.formBox input, .formtable textarea {padding: 6px; }
.formtable select {padding:3px 30px 3px 6px}
.selectIcon { width: 110px; margin-left:5%; margin-bottom: 5%;}
.numBox input{ width: 28%; }
.addsign { margin: 0 3%;}
input::placeholder { font-size: 0.88em; }
#domaintxt{ font-size: 0.94em;  }
.formtable input[type="radio"] { margin:0 5px 0 2px; }
#formage .radioStyle { display: inline-block;  margin-bottom:8px; }
#formage .radioStyle:nth-child(4n){ margin-right:0 }
#formage .radioStyle:not(:last-child){ /*width: 15vw;*/width: 20vw; margin-right: 0;}
.formlabel2{ width: 27%;}

.agreetxt2{ margin-bottom: 10%;}
#policyTxt{ line-height: 1.6em; margin-bottom: 12%; }
#introtitle{ font-size: 16px;  }
#introtitle span{ display: block; font-size: 17px; }
#btnset{ flex-wrap: wrap; justify-content: center; }
.erasebtn{ margin-bottom: 6%; }
}

@media screen and (max-width: 1080px) and (min-width: 881px){
#qaSearch form label{ width: 78%; }
}
@media screen and (max-width: 880px) and (min-width: 751px){
  #qaSearch form label{ width: 71%; }
  }

@media screen and (max-width: 1080px) and (min-width: 751px){
  #contact{ margin-top: -110px; padding-top: 110px; }
  .contactMail::after{background-size: 19vw; width: 62%; height: 12vw;}
  #pagewrap ul{ width: 66%;  justify-content: space-between; }
  #qahead { padding-top: 7%; }
  #qahead h3 {margin-bottom: 25px;}

  .qacont #qaSearch { padding-bottom: 103px;}
  #qaSearch form{ width: 80%; }
  #qaSearch::before, #qaSearch::after{ background-size: 100%;}
  #qaSearch::before{ width: 55px; top: -1vw;}
  #qaSearch::after{ width: 105px; height: 86px; bottom: /*1vw*/-90px;}
  #qaSearch input[type="submit"],
  #qaSearch .searchbtn{ font-size: 16px; }
  #subjectList{ /* bottom: 30px;*/ width: 62%;margin: 0 auto;
    padding: 4% 0 8%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .qasearchwrap #qaSearch::after{ bottom: -90px; }

  #qa #tabqa::before, #qacontact #tabqa a::before { left:2vw }
  #tabqa{ width: 40%; padding: 0 4% 0 8%; box-sizing: border-box; }
  #qacontact #tabqa{ padding: inherit;  }
  #qacontact #tabqa a {width: 100%; padding: 0 4% 0 14%;}

#tabcontact{ width: 55%; }
/*#qacontact #tabcontact{padding: 0 4% 0 5%;}*/
#tabcontact a { padding: 0 4% 0 6%; width: 100%;}
#tabqa::before{ left:14px;  }
#tabqa::before, #qacontact #tabqa a::before{ background-size: 70%; height: 26px;}

#tabcontact::before{left:14px; background-size: 80%; height: 27px;}
.food a::before{ left:20px }
.goods a::before{left: 25px;}
.exotic a::before{ left:10px }
.manual a::before{ left:14px}

#qahead h3,#contact h3,#freedial,#contactWrap h3{ font-size: 1.55em; }
#contact h3{ margin-bottom: 4%; }

#device{ width:61%; margin-right: 3%;}

.contactBox{padding: 25px 20px; }
.contactBox dt{ padding:0 15px 22px 65px; margin-bottom: 20px; line-height: 1.4em }
.contactMail dt::after{ top: 13%; }
.contactBox dt::before{  top:-5px; left: 15px; width: 40px; height: 40px;}
.contactBox:not(:last-child){ margin-bottom: 30px; }
#freedial a { padding-left: 46px;  }

#overseaCont li:first-child{ margin-right: 20px; }
}

@media screen and (max-width: 370px){
#formage .radioStyle:not(:last-child) { width: /*21*/25vw;  }
#formage .radioStyle:nth-child(3n),
.radioStyle:not(:last-child){ margin-right: 0; }
/*#formage .radioStyle:nth-child(4n) { margin-right: 27px;}*/
.contactEmail .qabtn a{ padding-right: 35px; }
}

@media screen and (max-width: 330px){
.tabs li.active a, .tabs a{ padding-left:2%; padding-right: 2%; }
#qa #tabqa { width: 50%; padding-right: 26px; box-sizing: border-box; justify-content: inherit; }
#qacontact #tabqa a{ padding-left: 14%; }
#overseaCont{ padding-left: 8%; padding-right: 8%; }
.overseabtn a { width: 166px;}
  #freedial a { padding-left: 32px;}
  .formBox input::placeholder { font-size: 4.5vw; }
}

@media screen and (max-width: 480px){
  .actitle::before {top: 4.2vw;}
  .actitle span { padding: 5% 52px 5% 50px;}
  .actitle span i{ top: 27px; }
  .actitle::before{ left: 5%;}
  .anserbox { padding: 4% 30px 4% 40px;}
  .anserbox::before{ top: 13px; left: 2.8%;}
  .contactEmail .qabtn a { width: 92%; height: 50px;letter-spacing: -1px; justify-content: inherit; padding-left: 20px; box-sizing: border-box;}
  .contactBox dt::before{ left:10px }
  .contactPhone dt::after { left: 20px; }
  .contactEmail dt::after { left: 19px; top: 13px; width: 14px; background-size: 100%; }
  #letter dt::after { left: 20px;top: 15px; width: 11px; background-size: 100%; }
  .contactBox dt{ font-size: 1em; padding-left:48px; }
  .contactPhone dd, .contactMail dd { padding: 0 6px 0 17px;}
}

@media screen and (max-width: 1080px) {
  #pagetitle{font-size: 1.538em; margin: 30px 0; }

  .tabs li { width:24%; line-height: 1.2em;}
  .tabs li:not(:last-child) { margin-right: 2%;}
  
  #qaWrap{padding:8% 0 10%;}
  .accordion-area{ margin-bottom: 10%; width: 90%;}

  .accordion-area li:not(:last-child){ margin-bottom: 6%; }
  .accordion-area .qaimg li:not(:last-child){ margin-bottom: 8px; }

  #contact{  margin-top: 1px; }
  #reception{ margin:10px 0 12px; }
  #reception span{ width: 46px; }
  .contactEmail .qabtn a{  line-height: 1.4em; margin-left: auto; margin-right: auto; }

}
@media screen and (min-width: 481px) and (max-width: 1080px) {
.contactEmail .qabtn a{ width: 80%;}
}


