@charset "UTF-8";
/*
**  ===================================================================
**  foundation CSS ※サイト全体に共通のスタイル
**  ===================================================================
*/
#contentArea {
  background: white;
  width: 1000px;
  margin: 0 auto;
}

#contentArea #contentAreaInner {
  padding: 0;
  margin: 0;
  width: 735px;
  float: left;
}

#contentArea #contentRight {
  width: 235px;
  float: right;
  padding: 0;
  margin: 0;
}

/*
**  ===================================================================
**  各種設定：var,reset,base-font,break-point
**  ===================================================================
*/
/*
**  ===================================================================
**  Blocks
**  ===================================================================
*/
/*
**  ===================================================================
**  button CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
@media screen and (min-width: 750px) {
  .button__hover{
    transition: .6s;
  }
  .button__hover:hover{
    opacity: .6;
  }
}

/*
**  ===================================================================
**  site-layout CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
/* PC用
-------------------------------------------- */
body {
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Verdana", sans-serif;
  font-style: normal;
}

@media screen and (min-width: 750px) {
  #wrapper {
    min-width: inherit;
  }
  #wrapper2 {
    max-width: none;
  }
  nav.submenu.open {
    left: calc(50% - 500px)!important;
  }
  @media screen and (max-width: 1000px) {
    nav.submenu.open {
      left: 0 !important;
    }
  }
  #delivery_article {
    background: #ffffff;
  }
  #delivery_article img {
    vertical-align: top;
  }
  .delivery-container {
    background: #ffffff;
    max-width: 1000px;
    width: 100%;
    margin: auto;
  }
  .contents {
    text-align: center;
  }
  .contents-block{
    margin-bottom: 30px;
    background: #e0eefb;
    border-radius: 15px;
  }
  .contents-block:last-child{
    margin-bottom: 0;
  }
  .contents-block__inner{
    padding: 50px 25px;
  }
  .contents-pickgo {
    margin-bottom: 30px;
  }

  .contents-block__title{
    font-size: 40px;
    line-height: 48px;
    color: #0060b0;
    margin-bottom: 35px;
  }
  .contents-block__title.typeA{
    margin-bottom: 25px
  }
  .slide__title{
    margin-bottom: 28px;
  }
  .slide__title:before{
    content: url(../img/slide_title01.png);
    display: inline-block;
    vertical-align: middle;
  }
  .slide__title:after{
    content: url(../img/slide_title02.png);
    display: inline-block;
    vertical-align: middle;
  }
  .slide__comm {
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .contents-movie__list{
    display: flex;
    /*justify-content: space-between;*/
    justify-content: center;
  }
  .contents-movie__item{
    /*width: calc((100% / 2) - 9px);*/
    width: 70%;
  }
  .contents-movie__area{
    margin-bottom: 10px;
  }
  .contents-movie__title{
    text-align: left;
    font-size: 20px;
    color: #000000;
    font-weight: 500;
  }

  .contents-block__text{
    font-size: 16px;
    color: #000000;
    margin-bottom: 30px;
  }

  .contents-delivery__title.typeA{
    height: 152px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px 15px 0 0;
  }
  .contents-delivery__img{
    width: 40%;
  }

  .contents-delivery__list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .contents-delivery__item{
    width: calc((100% / 2) - 9px);
    margin-bottom: 18px;
  }
  .contents-delivery__item:nth-last-child(-n+2){
    margin-bottom: 0;
  }
  .contents-delivery__block{
    background: #fff;
    border-radius: 0 0 15px 15px;
  }
  .contents-delivery__inner{
    padding: 24px 40px 32px;
  }
  .contents-delivery__text{
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .contents-delivery-btn__list{
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .contents-delivery-btn__item{
    width: calc((100% / 2) - 10px);
  }

  .contents-delivery-link__item{
    background: #e9e9e9;
    border-radius: 5px;
    text-align: left;
    margin-bottom: 6px;
  }
  .contents-delivery-link__item:last-child{
    margin-bottom: 0;
  }

  .contents-delivery-link__text{
    display: block;
    padding: 8px 14px;
    color: #000000;
  }
  @media screen and (max-width: 1000px) {
    .contents-delivery__title.typeA {
      height: 14.8vw;
    }
    .contents-delivery-link__text {
      font-size: 1.5vw;
    }
  }

  .contents-delivery-link__text.logoA:before{
    content: "";
    display: inline-block;
    vertical-align: bottom;
    width: 32px;
    height: 20px;
    background: url(../img/delivery_icon01.png) no-repeat center top;
    background-size: 100%;
    margin-right: 5px;
  }
  .contents-delivery-link__text.logoB:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../img/delivery_icon02.png) no-repeat center top;
    background-size: 100%;
    margin-left: 3px;
    margin-right: 13px;
  }

  .slick-arrow{
    position: absolute;
    width: 16px;
    height: 52px;
  }
  .slick-prev {
    left: -18px;
    z-index: 1;
  }
  .slick-next {
    right: -18px;
  }
  .slick-dots{
    margin-top: 15px;
  }

  .slick-dots li:hover,
  .slick-dots li button:hover {
    cursor: pointer;
  }

  .slick-dots li button:before{
    content: "";
    background: #ffffff;
    opacity: 1;
    border-radius: 50px;
    width: 10px;
    height: 10px;
  }

  div .visible-xs {
    display: none !important;
  }
}

.contents-movie__area{
  width:100%;
  padding-bottom: 56.25%;
  height:0px;
  position: relative;
  margin-bottom: 10px;
}
.contents-movie__area .movie{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.slick-slide img{
  margin: 0 auto;
}
.slick-dots{
  position: relative;
  bottom: 0;
}
.slick-dots li.slick-active button:before{
  opacity: 1;
  background: #62a8eb;
}
.slick-dotted.slick-slider{
  margin-bottom: 0;
}


/* SP用
-------------------------------------------- */
@media screen and (max-width: 750px) {
  div#wrapper-content {
    /* background-image: url(../img/main-image.png);*/
  }
  div#wrapper-content img {
    vertical-align: top;
  }
  div .hidden-xs {
    display: none !important;
  }
  .delivery-container{
    margin: 0 3%;
  }
  .contents {
    text-align: center;
  }
  a:hover {
    opacity: 1;
  }

  .contents-block{
    margin-bottom: 6%;
    background: #e0eefb;
    border-radius: 15px;
  }
  .contents-block:last-child{
    margin-bottom: 0;
  }
  .contents-block__inner{
    padding: 5% 3%;
  }
  .contents-pickgo{
    margin-bottom: 6%;
  }

  .contents-block__title{
    /*font-size: 150%;*/
    font-size: 5vw;
    color: #0060b0;
    margin-bottom: 6%;
  }
  .contents-block__title.typeA{
    margin-bottom: 5%
  }
  .slide__title{
    position: relative;
    margin-bottom: 5%;
    /*font-size: 125%;*/
  }
  .slide__title:before{
    content: "";
    position: absolute;
    background: url(../img/slide_title01.png);
    background-size: cover;
    width: 12px;
    height: 26px;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
  }
  .slide__title:after{
    content: "";
    position: absolute;
    background: url(../img/slide_title02.png);
    background-size: cover;
    width: 12px;
    height: 26px;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
  }
  .slide__comm {
    padding: 2vw 0;
    font-size: 16px;
    text-align: left;
  }

  .slick-arrow{
    position: absolute;
    width: 16px;
    height: 52px;
  }
  .slick-prev {
    left: -8%;
    z-index: 1;
  }
  .slick-next {
    right: -8%;
  }
  .slick-dots{
    margin-top: 3%;
  }
  .slick-dots li button:before{
    content: "";
    background: #ffffff;
    opacity: 1;
    border-radius: 50px;
    width: 8px;
    height: 8px;
  }

  .contents-movie__item{
    margin-bottom: 8%;
  }
  .contents-movie__item:last-child{
    margin-bottom: 0;
  }
  .contents-movie__area{
    margin-bottom: 3%;
  }
  .contents-movie__title{
    text-align: left;
    font-size: 90%;
    color: #000000;
    font-weight: 500;
  }

  .contents-delivery__title.typeA{
    padding: 7% 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px 5px 0 0;
  }
  .contents-delivery__title img {
    width: 100%;
    height: auto;
  }
  .contents-delivery__img {
    width: 30%!important;
  }

  .contents-block__text{
    font-size: 3.6vw;
    color: #000000;
    margin-bottom: 6%;
  }

  .contents-delivery__item{
    margin-bottom: 8%;
  }
  .contents-delivery__item:last-child{
    margin-bottom: 0;
  }
  .contents-delivery__block{
    background: #fff;
    border-radius: 0 0 15px 15px;
  }
  .contents-delivery__inner{
    padding: 4% 5% 5%;
  }
  .contents-delivery__text{
    font-size: 100%;
    color: #000;
    font-weight: bold;
    margin-bottom: 4%;
  }
  .contents-delivery-btn__list{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
  }
  .contents-delivery-btn__item{
    width: calc((100% / 2) - 5px);
  }

  .contents-delivery-link__item{
    background: #e9e9e9;
    border-radius: 5px;
    text-align: left;
    margin-bottom: 4%;
  }
  .contents-delivery-link__item:last-child{
    margin-bottom: 0;
  }

  .contents-delivery-link__text{
    display: block;
    padding: 2% 3%;
    color: #000000;
    font-size: 3vw;
  }

  .contents-delivery-link__text.logoA:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6.4vw;
    height: 4vw;
    background: url(../img/delivery_icon01.png) no-repeat center center;
    background-size: contain;
    margin-right: 2vw;
  }
  .contents-delivery-link__text.logoB:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 4.26vw;
    height: 4.26vw;
    background: url(../img/delivery_icon02.png) no-repeat center center;
    background-size: contain;
    margin-left: 1vw;
    margin-right: 3vw;
  }
  
}

/* Common
------------------------------------------------------------- */
.wf-hannari {
  font-family: "Hannari";
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.color-red {
  color: #e60012;
}

.tl-center {
  text-align: center;
}

/*
**  ===================================================================
**  site-header CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
@media screen and (min-width: 750px) {
  .main__kv {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
  }
  .main__kv img {
    width: 100%;
    height: auto;
  }
  .main__area{
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .main__title{
    font-size: 50px;
    color: #0d6fb8;
    font-weight: bold;
  }
  .main__text{
    margin-top: 20px;
    font-size: 45px;
    color: #fff;
    line-height: 63px;
    margin-left: 20px;
  }
  .main__text .main-caution{
    font-size: 14px;
    line-height: 1;
  }
  .main__text .main-number{
    font-size: 63px;
  }
  .main__caution{
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
  }
  @media screen and (max-width: 1000px) {
    .main__area {
      top: 6.7vw;
      line-height: 1;
    }
    .main__title {
      font-size: 5vw;
    }
    .main__text{
      margin-top: 3.3vw;
      font-size: 4.5vw;
      line-height: 1.4;
    }
    .main__text .main-number{
      font-size: 1.4em;
    }
    .main__caution {
      font-size: 1.4vw;
    }
  }
}

@media screen and (max-width: 750px) {
  .main__kv{
    position: relative;
    text-align: center;
    margin-top: 3%;
    margin-bottom: 6%;
  }
  .main__kv img {
    width: 100%;
    height: auto;
  }
  .main__area{
    position: absolute;
    top: 6.5vw;
    /*bottom: 18.5%;*/
    left: 0;
    right: 0;
    margin: auto;
  }
  .main__title{
    font-weight: bold;
    font-size: 6vw;
    color: #0d6fb8;
    margin-bottom: 5%;
  }
  .main__text{
    margin-bottom: 3%;
    margin-left: 4%;
    font-size: 5.5vw;
    line-height: 1.36;
    color: #fff;
  }
  .main__text .main-caution{
    font-size: 1vw;
  }
  .main__text .main-number{
    font-size: 8vw;
  }
  .main__caution{
    font-size: 2.5vw;
    color: #fff;
    margin-bottom: 7%;
  }
}

/*
**  ===================================================================
**  site-footer CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
@media screen and (min-width: 750px) {
  .l-contact {
    padding: 30px 0 5px;
    text-align: center;
  }
  .l-contact img {
    margin: auto;
  }
  .snslist {
    text-align: center;
    letter-spacing: -.4em;
    margin: 60px 0;
  }
  .snslist__item {
    vertical-align: top;
    display: inline-block;
    letter-spacing: normal;
    margin: 0 3px;
  }
  .l-bnr {
    margin: 40px 0;
  }
  .l-bnr__item {
    line-height: 0;
  }
  .l-bnr__item a {
    display: block;
  }
  .l-bnr__item a:hover {
    opacity: 0.6;
  }
}

@media screen and (max-width: 750px) {
  .l-contact {
    padding: 6% 3% 2%;
    text-align: center;
  }
  .l-contact img {
    margin: auto;
  }
  .snslist {
    text-align: center;
    letter-spacing: -.4em;
    margin: 10% 0;
  }
  .snslist__item {
    vertical-align: top;
    display: inline-block;
    letter-spacing: normal;
    margin: 0 3px;
  }
  .l-bnr {
    margin: 5% 4%;
  }
  .l-bnr__item {
    line-height: 0;
  }
  .l-bnr__item a {
    display: block;
  }
  .inquiry__item {
    width: 90%;
  }
}

.icon {
  display: inline;
}

/*
**  ===================================================================
**  site-navigation CSS ※block { } block__element { } block_modifier { }（key_value）
**  ===================================================================
*/
@media screen and (min-width: 750px) {
  .l-nav__list {
    padding: 30px 20px 60px;
    text-align: center;
  }
  .l-nav__item {
    display: inline-block;
    margin-right: 17px;
  }
  .l-nav__item:last-child {
    margin-right: 0;
  }
}

@media screen and (max-width: 750px) {
  .l-nav__list {
    padding: 4% 3%;
    text-align: center;
  }
  .l-nav__item {
    margin-bottom: 3%;
  }
  .l-nav__item:last-child {
    margin-bottom: 0;
  }
}