@charset "utf-8";

/*----------------------------------------------------------------------------------------------------

  八戸からお届け
  
----------------------------------------------------------------------------------------------------*/

.sec-otodoke {
  position:relative;
  background-image:url(../image/otodoke_bg.png);
  background-repeat:no-repeat;
  background-position:center bottom;
}

.sec-otodoke:before {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background:rgba(234,222,200,0.4);
  z-index:-1;
}

.otodoke {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  position:relative;
}

.otodoke .txt {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.otodoke .lead {
  -webkit-box-ordinal-group:2;
  -ms-flex-order:1;
  order:1;
  font-weight:600;
}

.otodoke .txt p {
  line-height:2;
}

.otodoke .photos {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  position:relative;
}

.otodoke .photos img {
  z-index:1;
  position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
  font-family:"object-fit:cover;"
}

.otodoke .photos .p01 {
  position:relative;
  -webkit-box-flex:1;
  -ms-flex:1;
  flex:1;
}

.otodoke .photos .p02 {
  width:45%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -ms-flex-item-align:flex-end;
  align-self:flex-end;
  position:relative;
  margin-left:-10%;
}

.otodoke .photos .p02_1 {
  padding-top:15%;
  padding-right:5%;
}
  
.otodoke .photos .label {
  position:absolute;
  right:1.5em;
  top:-1em;
  z-index:3;
}

.otodoke .photos .label,
.otodoke .photos .label span {
  display:inline-block;
}

.otodoke .photos .label span {
  background-color:#000;
  color:#fff;
  line-height:1;
  padding:0.5em 0.4em;
  margin-left:0.5em;
}

@media print,screen and (min-width:641px) {
  .sec-otodoke {
    padding-top:100px;
    padding-bottom:120px;
  }

  .otodoke .txt {
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    padding-left:6.8%;
  }
  
  .otodoke .txt p {
    -webkit-writing-mode:vertical-rl;
    -ms-writing-mode:tb-rl;
    writing-mode:vertical-rl;
    text-align:left;
    display:inline-block;
    white-space:nowrap;
    padding-top:2.5em;
  }
  
  .otodoke .lead {
    font-size:2em;
    padding-left:1em;
  }
  
  .otodoke .photos {
    width:55%;
    -webkit-box-ordinal-group:1;
    -ms-flex-order:0;
    order:0;
    padding-top:2em;
  }
  
  .otodoke .photos .p01 {
    padding-bottom:20%;
  }
  
  .otodoke .photos .p02 {
    width:50%;
    height:65%;
  }
}

@media screen and (max-width:640px) {
  .sec-otodoke {
    padding-top:3em;
    padding-bottom:3em;
    background-position:center bottom -webkit-calc(65% + 7em);
    background-position:center bottom calc(65% + 7em);
    background-size:190% auto;
  }
  
  .sec-otodoke .js__rpsBlock__item {
    min-width:420px;
  }
  
  .otodoke {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }
  
  .otodoke .txt {
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    padding-bottom:3em;
  }
  
  .otodoke .txt p {
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    padding-top:1.5em;
    padding-right:1.5em;
    padding-left:0.5em;
  }
  
  .otodoke .lead {
    font-size:1.77em;
  }
  
  .otodoke .photos {
    width:100%;
    height:-webkit-calc(400 / 640 * 100vw);
    height:calc(400 / 640 * 100vw);
    min-height:260px;
    margin-top:-7em;
  }
  
  .otodoke .photos .p01 {
    padding-bottom:10%;
  }
  
  .otodoke .photos .p02 {
    height:65%;
  }
  
  .otodoke .photos .label {
    right:1em;
    top:-2em;
  }
}


/*----------------------------------------------------------------------------------------------------

  会社概要
  
----------------------------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .sec-shop {
    padding-top:80px;
    padding-bottom:100px;
  }
}

@media screen and (max-width:640px) {
  .sec-shop {
    padding-left:0;
    padding-right:0;
  }
}


/*--------------------------------------------------------------------------------
  概要
--------------------------------------------------------------------------------*/

.shop-gaiyou {
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  text-align:left; 
}
  
.shop-gaiyou dl:not(.ad) {
  width:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  margin-top:-1em;
}

.shop-gaiyou dl:not(.ad) > dt {
  font-weight:bold;
}

.shop-gaiyou dl:not(.ad) > dt,
.shop-gaiyou dl:not(.ad) > dd {
  border-bottom:1px solid rgba(15,30,60,0.15);
  padding-top:1em;
  padding-bottom:1em;
}

.shop-gaiyou dl:not(.ad) > dd .contact {
  list-style:none;
  margin-left:0;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.shop-gaiyou dd .ad dt:not(:first-of-type) {
  padding-top:1em;
}

@media print,screen and (min-width:641px) {
  .shop-gaiyou dl:not(.ad) > dt {
    width:8.5em;
    padding-left:1.5em;
  }
  
  .shop-gaiyou dl:not(.ad) > dd {
    width:-webkit-calc(100% - 8.5em);
    width:calc(100% - 8.5em);
  }
}

@media print,screen and (min-width:561px) {
  .shop-gaiyou dl:not(.ad) > dd .contact li:first-child {
    padding-right:1.5em;
  }
}

@media screen and (max-width:640px) {
  .shop-gaiyou {
    padding-top:2.5em;
    padding-left:5%;
    padding-right:5%;
  }
  
  .shop-gaiyou dl:not(.ad) {
    line-height:1.6;
  }
  
  .shop-gaiyou dl:not(.ad) > dt {
    width:7em;
    padding-left:0.5em;
  }
  
  .shop-gaiyou dl:not(.ad) > dd {
    width:-webkit-calc(100% - 7em);
    width:calc(100% - 7em);
  }
  
  .shop-gaiyou dd .ad dd .yno {
    display:block;
  }
}

@media screen and (max-width:560px) {
  .shop-gaiyou dl:not(.ad) > dd .contact {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }
}


/*--------------------------------------------------------------------------------
  MAP
--------------------------------------------------------------------------------*/

.shop-gmap iframe {
  width:100%;
  vertical-align:bottom;
}

@media print,screen and (min-width:641px) {
  .shop-gmap {
    padding-top:80px;
  }
  
  .shop-gmap iframe {
    height:640px;
  }
}

@media screen and (max-width:640px) {
  .shop-gmap {
    padding-top:3em;
  }
  
  .shop-gmap iframe {
    height:480px;
  }
}

@media screen and (max-width:480px) {
  .shop-gmap iframe {
    height:360px;
  }
}