/********** vflow_common **********/
.wrapper_vending_flow {
  min-width: 1366px;
  background-color: var(--bk-color1);
  margin:0 auto 80px auto;
  padding-top:208px;
}
.vending{
  width:100%;
}
.wrapper_vending_flow .content{
  min-width: 1366px;
  margin:0 auto;
}
.vending_flow {
  width:1040px;
  margin:0 auto 80px auto;
}
.vending_flow_sp{
  display: none;
}
.sp_word{
  display: none;
}
.main-title{
  width:100%;
  margin:0 auto;
}
.main-title img{
  display: block;
  margin:0 auto;
}
.main-title h1{
  color:var(--text-color1);
  font-size:32px;
  font-weight: 700;
  margin:18px auto 45px auto;
  text-align: center;
}
.sub_title{
  color:var(--text-color1);
  font-size:24px;
  font-weight: 500;
  margin:0 auto 50px auto;
  text-align: center;
}
.main-title h1.blue-title{
  color:var(--text-color3);
}
.sub_title.blue-title{
  color:var(--text-color3);
}

/********** flow **********/
.flow_items{
  display: flex;
  justify-content: center;
  width: 826px;
}
.flow_item{
  background-color: var(--bk-color7);
  width: 640px;
  height: 220px;
  padding:30px 25px 0 30px;
  border-radius: 15px 0 0 15px;
}
.flow_title{
  color:var(--text-color3);
  font-size: 24px;
  font-weight: 700;
  margin:0 auto 15px 65px;
  position: relative;
}
.flow_exp{
  color:var(--text-color2);
  font-size: 15px;
  font-weight: 500;
  margin:0 auto 0 65px;
  line-height: 1.7;
}
.flow_exp a{
  color:var(--text-color2);
  font-size: 15px;
  font-weight: 500;
  margin:0 3px;
}
.flow_exp a:hover{
  color: var(--text-color2);
}
.flow_exp .tel{
  color:var(--text-color3);
  font-size:24px;
  font-weight: 500;
  display: inline-block;
  margin:10px 20px 0 auto;
  position: relative;
  padding-left: 40px;
}
.flow_exp .tel:before{
  content:url(../img/icon/other/tel2.svg);
  position: absolute;
  top:5px;
  left: 0;;
}
.flow_exp .opentime{
  color:var(--text-color2);
  font-size:15px;
  font-weight: 500;
  vertical-align: text-bottom;
}
.flow_img img{
  width:220px;
  height: 220px;
  border-radius: 0 15px 15px 0;
}
.item_left{
  margin-right: auto;
}
.item_right{
  margin-left: auto;
}
.flow_arrow{
  width:40px;
  margin:25px auto;
}
.flow_arrow img{
  width:40px;
  height: 24px;
}
.flow_message{
  color:var(--text-color1);
  font-size: 18px;
  font-weight: 500;
  margin: 50px auto 0 auto;
  text-align: center;
  position: relative;
  width:580px;
}
.flow_message:before {
  content:url(../img/other/choose_left_pc.svg);
  position: absolute;
  bottom: -3px;
  left:-10px;
}
.flow_message:after {
  content:url(../img/other/choose_right_pc.svg);
  position: absolute;
  bottom: -3px;
  right:-10px;
}

.flow_title::before{
  position: absolute;
  top:-1px;
  left:-65px;
}
.fn1 .flow_title::before{
  content:url(../img/icon/flow_qa/flow_no1.png);
}
.fn2 .flow_title::before{
  content:url(../img/icon/flow_qa/flow_no2.png);
}
.fn3 .flow_title::before{
  content:url(../img/icon/flow_qa/flow_no3.png);
}
.fn4 .flow_title::before{
  content:url(../img/icon/flow_qa/flow_no4.png);
}
.fn5 .flow_title::before{
  content:url(../img/icon/flow_qa/flow_no5.png);
}

/********** Q&A **********/
.vending_qa{
  width:100%;
  background-color:var(--bk-color7);
  padding:80px 0;
}
.vending_qa .content{
  width:1366px;
  margin:0 auto;
  }
.vending_qa .qa_title{
  width:800px;
  background-color: var(--bk-color1);
  border-radius: 15px;
  padding:10px 25px;
  margin:45px auto 0 auto;
}
.vending_qa .qa_title p{
  margin:0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-color1);
}


/*アコーディオン全体*/
.qa-area{
  list-style: none;
  width: 800px;
  margin:0 auto;
}
.qa-area li{
  margin: 0;
}
.qa-area section {
  border-bottom: 1px dotted var(--text-color2);
  position: relative;
}
.qa-area .ques {
  cursor: pointer;
}

/*アコーディオンタイトル*/
.qa-area .title {
  font-size:18px;
  font-weight: 700;
  color: var(--text-color2);
  padding: 25px 0;
  margin:0;
  flex:0 0 710px;
}

.qa-area .ques .arrow{   
  width: 20px;
  height: 12px;
  margin:0;
  transition: all 0.3s ease;
}

/*　closeというクラスがついたら形状変化　*/
.qa-area .ques.close .arrow{
transform: rotate(-180deg);
}

/*アコーディオンで現れるエリア*/
.qa-area .box {
  display: none;/*はじめは非表示*/
  padding: 0 0 18px 0;
  margin:0;
  font-size:15px;
  font-weight: 500;
  color: var(--text-color2);
}
.qa-area .ques,
.qa-area .box .answer{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.qa-area .ques img,
.qa-area .box .answer img{
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 30px;
}


/********** ここからスマホ **********/
@media only screen and (max-width:599px){

/********** vflow_common **********/
.wrapper_vending_flow {
  min-width: 100vw;
  padding-top:120px;
  margin:0 auto 60px auto;
}
.wrapper_vending_flow .content{
  min-width:90%;
  margin:0 auto  60px auto;
}
.main-title h1{
  font-size:24px;
  margin:12px auto 40px auto;
}
.vending_flow .sub_title,
.vending_qa .sub_title{
  font-size:18px;
  margin:0 auto 42px auto;
}

/********** flow **********/
.vending_flow{
  width:355px;
  margin:0 auto 60px auto;
}
.flow_items{
  width:100%;
  display: block;
  position: relative;
}
.flow_item{
  width:100%;
  height: auto;
  border-radius: 15px;
  display: block;
  padding:24px;
}
.flow_title{
  font-size: 18px;
  text-align: center;
  margin:56px 96px 40px auto;
  padding-right: 24px;
}
.flow_title:before{
  top:-60px;
  left:73px;
  transform: scale(0.8);
}
.sub_title{
  font-size: 18px;
  margin: 0 auto 40px auto;
}
.flow_exp{
  font-size: 14px;
  margin:0 auto;
}
.flow_exp .tel{
  font-size: 28px;
  font-weight: 700;
}
.flow_exp .tel a{
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text-color3);
}
.flow_exp .tel{
  margin:12px auto 0 38px;
  display: block;
  width:235px;
}
.flow_exp .tel::before{
  top: 6px;
  left: 0;
}

.flow_exp .opentime{
  display: block;
  text-align: center;
}
.flow_img img{
  width:120px;
  height: 120px;
  position:absolute;
  top:0;
  right: 0;
  border-radius: 0 15px 0 15px;
}
.flow_arrow{
  width:30px;
  margin:18px auto;
}
.flow_arrow img{
  width:30px;
  height: 18px;
}
.flow_message{
  font-size: 14px;
  width:295px;
}
.flow_message:before {
  content:url(../img/other/choose_left.svg);
}
.flow_message:after {
  content:url(../img/other/choose_right.svg);
}
.pc_word{
  display: none;
}
.sp_word{
  display: block;
}

/********** Q&A **********/
.vending_qa{
  padding:60px 0 0 0;
}
.vending_qa .content{
  width:90%;
  }
.vending_qa .qa_title{
  width:90%;
  border-radius: 8px;
}
.vending_qa .qa_title p{
  font-size: 18px;
}

/*アコーディオン全体*/
.qa-area{
  width: 90%;
}

/*アコーディオンタイトル*/
.qa-area .title {
  font-size:14px;
  padding: 23px 25px 23px 0;
  flex:0 0 215px;
}
.qa-area .ques img
.qa-area .box .answer img{
  width: 30px;
  height: 30px;
}
.qa-area .box {
  font-size:14px;
}

}