/********** vending_choose_common **********/
.wrapper_vending_choose {
  min-width: 1366px;
  background-color: var(--bk-color4);
  margin:0 auto;
  padding:208px 0 80px 0;
}
.vending_choose {
  min-width: 1366px;
  margin:0 auto;
}
.main-title{
  width:100%;
  margin:0 auto;
}
.main-title img{
  display: block;
  margin:0 auto;
}
.main-title h1{
  color:var(--text-color3);
  font-size:32px;
  margin:18px auto 45px auto;
  text-align: center;
}

/********** choose **********/
.vending_choose .vending_subtitle {
  text-align: center;
  color:var(--text-color3);
  font-size: 18px;
  font-weight: 500;
  width:580px;
  margin:0 auto;
  position: relative;
}
.vending_choose .vending_subtitle:before {
  content:url(../img/other/choose_left_pc.svg);
  position: absolute;
  bottom: -3px;
  left:-10px;
}
.vending_choose .vending_subtitle:after {
  content:url(../img/other/choose_right_pc.svg);
  position: absolute;
  bottom: -3px;
  right:-10px;
}
.kind_vending{
  width:700px;
  margin:0 auto;
}
.kind_items{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.kind_item{
  background-color: var(--bk-color1);
  width:240px;
  height: 145px;
  border-radius: 16px;
  margin: 0 40px 40px 0;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.kind_item:nth-child(2),
.kind_item:last-child{
  margin-right: 0;
}

.sp_word{
  display: none;
}
.kind_vending > p{
  margin:70px auto 35px auto;
  font-size: 24px;
  font-weight: 700;
  color:var(--text-color3);
  text-align: center;
}
.kind_item a{
  display: block;
  color:var(--bk-color7);
  text-decoration: none;
}
.kind_item .kind_name{
  font-size: 24px;
  font-weight: 700;
  color:var(--text-color1);
  text-align: center;
  margin:0;
  padding-top:35px;
}
.kind_item .kind_temper{
  font-size: 18px;
  font-weight: 700;
  color:var(--text-color1);
  text-align: center;
  margin:0;
  padding-bottom:47px;
}

.kind_items .frozen{
  background-image: url(../img/icon/kind/frozen.svg);
  background-position: center center;
}
.kind_items .refrige{
  background-image: url(../img/icon/kind/refrige.svg);
  background-position: center center;
}
.kind_items .weakcold{
  background-image: url(../img/icon/kind/weakcold.svg);
  background-position: center center;
}
.kind_items .normal{
  background-image: url(../img/icon/kind/normal.svg);
  background-position: center center;
}
.kind_items .warm{
  background-image: url(../img/icon/kind/warm.svg);
  background-position: center center;
}

.kind_items .frozen:hover{
  background-image: url(../img/icon/kind/frozen_hover.svg);
}
.kind_items .refrige:hover{
  background-image: url(../img/icon/kind/refrige_hover.svg);
}
.kind_items .weakcold:hover{
  background-image: url(../img/icon/kind/weakcold_hover.svg);
}
.kind_items .normal:hover{
  background-image: url(../img/icon/kind/normal_hover.svg);
}
.kind_items .warm:hover{
  background-image: url(../img/icon/kind/warm_hover.svg);
}
.kind_item:hover > a p,
.kind_item:hover > a p:nth-child(2){
  color:var(--text-color3);
}
.kind_item:hover{
  background-color: var(--bk-color7);
  border:2px solid var(--bk-color1);
}

.vending_detail_items{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin:80px auto 0 auto;
}
.vending_detail{
  background-color: var(--bk-color7);
  border-radius: 15px;
  padding:20px 20px;
  text-align: center;
  width:420px;
  height: 710px;
  margin-bottom: 30px;
  position: relative;
}
.choose_result{
  width:100%;
  margin:0 auto;
}
.choose_result h1{
  color:var(--text-color3);
  font-size:32px;
  margin:18px auto 15px auto;
  text-align: center;
}
.choose_result p{
  font-size: 24px;
  font-weight: 700;
  color:var(--text-color3);
  text-align: center;
  margin:0 auto 30px 0;
}
.vending_detail img{
  height:300px;
}
.vending_detail h3,
.vending_detail p{
  text-align: left;
}
.vending_detail h3{
  font-size: 22px;
  font-weight: 500;
  color:var(--text-color4);
}
.vending_detail p{
  font-size: 15px;
  font-weight: 500;
  color:var(--text-color2);
  line-height: 3;
  margin: 0;
}
.vending_item{
  display: flex;
  border-top:1px dotted var(--text-color3);
  align-items: center;
}
.vending_item:nth-child(7){
  border-bottom:1px dotted var(--text-color3);
}
.vending_item .item_title{
  color:var(--text-color4);
  flex:0 0 105px;
  margin:0;
}
.vending_item .item_detail{
  line-height: 1.3;
}
.choose_bt{
  bottom:0;
}


/********** モーダル **********/
#frozen{
  display: none;
  z-index:2;
  position:fixed;
}
#refrige{
  display: none;
  z-index:2;
  position:fixed;
}
#weakcold{
  display: none;
  z-index:2;
  position:fixed;
}
#normal{
  display: none;
  z-index:2;
  position:fixed;
}
#warm{
  display: none;
  z-index:2;
  position:fixed;
}
/*モーダルの横幅を変更したい場合*/
.modaal-container{
  max-width: 75%;
  border-radius: 15px;
}
.modaal-content-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
background:#666;
}
.vending_detail .out_stock{
  font-size: 22px;
  text-align: center;
  margin-top: 50px;
  color:var(--text-color2);
  line-height: 1;
}


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

  /********** vending_choose_common **********/
.wrapper_vending_choose {
  min-width: 100vw;
  margin:0 auto;
  padding:120px 0 60px 0;
}
.vending_choose {
  min-width: 100vw;
}
.main-title h1{
  font-size:24px;
  font-weight: 700;
  margin:12px auto 40px auto;
}
.kind_items .frozen,
.kind_items .refrige,
.kind_items .normal,
.kind_items .warm{
  background-size: 90px auto;
}
.kind_items .weakcold{
  background-size: 80px auto;
}

/********** choose **********/
.vending_choose .vending_subtitle {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  padding:0 20px;
  width:300px;
}
.vending_choose .vending_subtitle:before {
  content:url(../img/other/choose_left.svg);
}
.vending_choose .vending_subtitle:after {
  content:url(../img/other/choose_right.svg);
}
.kind_vending{
  width:90%;
}
.pc_word{
  display: none;
}
.sp_word{
  display: block;
}
.kind_item{
  width:90%;
  height: 108px;
  margin: 0 0 30px 0;
}
.kind_vending > p{
  margin:60px auto 30px auto;
  font-size: 18px;
}
.kind_item a{
  width:100%;
  height:108px;
}
.kind_item .kind_name{
  font-size: 18px;
  padding-top:0;
}
.kind_item .kind_temper{
  font-size: 14px;
  padding-bottom:0;
}
.vending_detail{
  width:100%;
  height: auto;
  margin-bottom: 90px;
}
.choose_result h1{
  font-size:24px;
}
.choose_result p{
  font-size: 18px;
}
.vending_detail h3{
  font-size: 18px;
  margin-bottom: 30px;
}
.vending_item .item_title{
  flex:0 0 100px;
  font-size: 14px;
  line-height: 3;
  padding: 5px 0;
}
.vending_detail .item_detail{
  font-size: 14px;
  line-height: 1.2;
  padding: 5px 0;
}
.choose_bt{
  bottom:-55px;
}
.kind_items .warm{
  margin-bottom: 0;
}
.kind_item div{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
}

/********** モーダル **********/
/*モーダルの横幅を変更したい場合*/
.modaal-container{
  max-width: 90%;
}
.modaal-content-container{
  padding:10px;
}
.modaal-inner-wrapper{
  padding:30px 0;
}
.vending_detail .out_stock{
  font-size: 18px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
background:var(--bk-color1);	
}

.modaal-close{
  top:30px;
}

}