@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}

.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
  clear: both;
}

/*　////////////////////////////////
ブレイクポイント
//////////////////////////////////　*/
/*　////////////////////////////////
ベースフォント
//////////////////////////////////　*/
/*　////////////////////////////////
カラー
//////////////////////////////////　*/
/*　////////////////////////////////
clearfix[@extend .clearfix];
//////////////////////////////////　*/
.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}

/*　////////////////////////////////////////////////////////////////////////////////////////////////
flex include
//////////////////////////////////////////////////////////////////////////////////////////////////　*/
/*　////////////////////////////////////////////////////////////////////////////////////////////////
初期値top:50%; left:50%;
[@include set-top();] [@include set-left();]
//////////////////////////////////////////////////////////////////////////////////////////////////　*/
/*縦中央*/
/*横中央*/
/* -----上下左右中央、%指定で調整可能----- */
/*　////////////////////////////////
flex 設定
//////////////////////////////////　*/
/*　////////////////////////////////
三角形
//////////////////////////////////　*/
/*　////////////////////////////////
矢印
//////////////////////////////////　*/
/*　////////////////////////////////////////////////////////////////////////////////////////////////
font-size
//////////////////////////////////////////////////////////////////////////////////////////////////　*/
/*　////////////////////////////////
汎用style
//////////////////////////////////　*/
/*　////////////////////////////////
TOPメイン画像
//////////////////////////////////　*/
.webp .main-visual .main-slider .slider01 {
  background-image: url("/img/webp/mainimg.webp");
}
.webp .main-visual .main-slider .slider02 {
  background-image: url("/img/webp/mainimg.webp");
}
.webp .main-visual .main-slider .slider03 {
  background-image: url("/img/webp/mainimg.webp");
}

.no-webp .main-visual .main-slider .slider01 {
  background-image: url("/img/mainimg.jpg");
}
.no-webp .main-visual .main-slider .slider02 {
  background-image: url("/img/mainimg.jpg");
}
.no-webp .main-visual .main-slider .slider03 {
  background-image: url("/img/mainimg.jpg");
}

/*main-visual-movie設定*/
#main-visual-movie {
  position: relative; /*ローディング画像などを表示す際の基点とするため指定*/
  height: 100vh; /*高さを全画面にあわせる*/
  text-align: center;
  color: #fff;
  /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/
  background: url("../img/movie.jpg") no-repeat;
  background-size: cover;
  z-index: -10;
  /* ローディングアイコン設定 */
  /*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/
  /* youtube設定 */
  /*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
  /*youtubeがクリックされないためのマスク*/
  /*youtube 上のロゴ */
}
@media (min-width: 768px) {
  #main-visual-movie {
    height: 100vh; /*高さを全画面にあわせる*/
  }
}
#main-visual-movie #loading {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-weight: bold;
}
#main-visual-movie #loading.disappear {
  display: none;
}
#main-visual-movie #youtube-area {
  position: fixed;
  z-index: -10; /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0;
}
#main-visual-movie #youtube-area.appear {
  -webkit-animation-name: PageAnimeAppear;
          animation-name: PageAnimeAppear;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#main-visual-movie #youtube {
  /*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}
#main-visual-movie #youtube-mask {
  position: absolute;
  z-index: 1; /*下から2番目に表示*/
  top: 0;
  width: 100%;
  height: 100%;
}
#main-visual-movie .movie-logo {
  position: absolute;
  z-index: 2; /*下から2番目に表示*/
  /*天地中央配置*/
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  /*色指定*/
  color: #fff;
  text-shadow: 0 0 15px #666;
}

.top-container {
  background-color: #fff;
  position: relative; /*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
  z-index: 1;
}

.all-wrapper {
  /*　////////////////////////////////////////////////////////////////////////////////////////////////
  top
  //////////////////////////////////////////////////////////////////////////////////////////////////　*/
  /* ---------- top --------------- */
}
.all-wrapper #top {
  /*----- .main-visual ------------------------------------*/
  /*----- .section01 ------------------------------------*/
  /*----- .bg-area ------------------------------------*/
  /*----- .section02 ------------------------------------*/
  /*----- .section03 ------------------------------------*/
  /*----- .takeout ------------------------------------*/
  /*----- .section05 ------------------------------------*/
  /*----- .recruitment ------------------------------------*/
}
.all-wrapper #top .main-visual {
  position: relative;
  margin-bottom: 50px;
}
.all-wrapper #top .main-visual .slider {
  width: 100%;
  height: 50vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (min-width: 768px) {
  .all-wrapper #top .main-visual {
    margin-bottom: 100px;
  }
  .all-wrapper #top .main-visual .slider {
    height: 600px;
  }
}
.all-wrapper #top .section01 {
  padding-top: 60px;
}
.all-wrapper #top .section01 .f-wrap-02 .right-box {
  margin-bottom: 20px;
}
.all-wrapper #top .section01 .f-wrap-02 .title-s {
  font-size: clamp(1.8rem, 1.9vw, 2rem);
  font-weight: 600;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .all-wrapper #top .section01 .f-wrap-02 .left-box,
  .all-wrapper #top .section02 .f-wrap-02 .left-box,
  .all-wrapper #top .section03 .f-wrap-02 .left-box,
  .all-wrapper #top .section04 .f-wrap-02 .left-box,
  .all-wrapper #top .section05 .f-wrap-02 .left-box {
    width: 48%;
  }
  .all-wrapper #top .section01 .f-wrap-02 .right-box,
  .all-wrapper #top .section02 .f-wrap-02 .right-box,
  .all-wrapper #top .section03 .f-wrap-02 .right-box,
  .all-wrapper #top .section04 .f-wrap-02 .right-box,
  .all-wrapper #top .section05 .f-wrap-02 .right-box {
    width: 48%;
    margin-bottom: 0px;
  }
}
.all-wrapper #top .bg-area {
  background: #fffbf7;
  padding: 50px 0;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  position: relative;
  margin-bottom: 60px;
}
.all-wrapper #top .bg-area::after {
  content: "";
  position: absolute;
  background-image: url("/img/bg_illust.svg");
  background-position: left;
  background-repeat: repeat-x;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
}
@media (min-width: 768px) {
  .all-wrapper #top .bg-area {
    padding: 100px 0;
    margin-bottom: 120px;
  }
}
.all-wrapper #top .section02 .f-wrap-02 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media (min-width: 768px) {
  .all-wrapper #top .section02 .main-txt {
    margin-bottom: 100px;
  }
  .all-wrapper #top .section02 .business-box {
    margin-bottom: 80px;
  }
  .all-wrapper #top .section02 .business-box .business-title {
    margin-bottom: 30px;
  }
}
.all-wrapper #top .section03 .f-wrap-02 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.all-wrapper #top .takeout {
  padding: 40px 0;
  background-color: #edebd9;
}
@media (min-width: 768px) {
  .all-wrapper #top .takeout {
    padding: 100px 0;
  }
}
.all-wrapper #top .takeout .section04 .wolt {
  margin-top: 20px;
}
.all-wrapper #top .takeout .section04 .f-wrap-02 .left-box {
  padding: 0 20px;
}
.all-wrapper #top .section05 .f-wrap-02,
.all-wrapper #top .section05 .f-wrap-03 {
  margin-bottom: 0;
}
.all-wrapper #top .section05 .f-wrap-02 h2.h-style-a,
.all-wrapper #top .section05 .f-wrap-03 h2.h-style-a {
  margin-bottom: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .all-wrapper #top .section05 .f-wrap-02,
  .all-wrapper #top .section05 .f-wrap-03 {
    margin-bottom: 60px;
  }
  .all-wrapper #top .section05 .f-wrap-02 h2.h-style-a,
  .all-wrapper #top .section05 .f-wrap-03 h2.h-style-a {
    padding: 0 0 0 30px;
  }
}
.all-wrapper #top section.mb {
  margin-bottom: 0px;
}
.all-wrapper #top .recruitment {
  padding: 40px 0;
  background-color: #000000;
}
@media (min-width: 768px) {
  .all-wrapper #top .recruitment {
    padding: 100px 0;
  }
}
.all-wrapper #top .recruitment .section06 {
  max-width: 680px;
  margin: 0 auto;
  color: #fff;
}
.all-wrapper #top .recruitment .section06 h2.h-style-a {
  text-align: center;
  color: #fff;
}
.all-wrapper #top .recruitment .section06 .text {
  margin-bottom: 40px;
}