@charset "utf-8";

@media screen and (max-width:1200px) {}
@media (hover: hover) and (pointer: fine) {}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {}
/*==================================================
$common
==================================================*/
:root {
  /* color */
  --color-base: #263A53;
  --color-white: #fff;
  --color-orange: #E14524;
  --color-beige: #FBF6E9;
  --color-skyblue: #50C2D9;
  --color-yellow: #FECC56;

  /* font */
  --font-base: "Zen Kaku Gothic New","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
  --font-point: "Montserrat", "Zen Kaku Gothic New","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;

  /* font-size */
  --font-size-base: 20px;
  --font-size-ss: 10px;
  --font-size-s: 12px;
  --font-size-sm: 14px;
  --font-size-mm: 16px;
  --font-size-ml: 20px;
  --font-size-l: 24px;
  --font-size-lm: 28px;
  --font-size-ll: 32px;

  /* shadow */
  --filter-shadow: drop-shadow(0px 4px 0px rgba(0,0,0,0.25));
}
html {
  width: 100%;
  overflow-x: hidden;
}
body {
	margin: 0 auto;
	padding: 0;
	font-size: var(--font-size-base);
	line-height: 1.7;
	position: relative;
	color: var(--color-base);
	font-family: var(--font-base);
	font-weight: 400;
	text-align: left;
  letter-spacing: 0.05em;
}
a {color: inherit;text-decoration: none;}
a[href^="tel:"] {pointer-events: none;}
.sp {display: none !important;}
img {max-width: 100%;height: auto;}
.is-resizing,
.is-resizing * {
  transition: none !important;
  transition-delay: 0s !important;
}
.fade-in {
  transition: ease-in-out 0.8s;
  transform: translateY(50px);
  opacity: 0;
}
.fade-in.in-view {
  transform: translateY(0);
  opacity: 1;
}

/*==================================================
$header
==================================================*/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
header .logo {
  max-width: 350px;
  width: 70%;
}
header .logo a {
  width: 100%;
  height: 73px;
  background: var(--color-base);
  color: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-bottom-right-radius: 50px;
}
header .logo a span {
  font-weight: 500;
  font-size: var(--font-size-s);
  margin-left: 20px;
}
header .entry {
  width: 30%;
  max-width: 175px;
  margin-right: 30px;
}
header .entry a {
  width: 100%;
  height: 50px;
  background: var(--color-orange);
  color: var(--color-white);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 100vw;
  font-size: var(--font-size-mm);
  font-weight: bold;
  filter: var(--filter-shadow);
}
header .entry a::after {
  content: "";
  width: 0.7em;
  min-width: 0.7em;
  height: 0.7em;
  background: url(../img/ico_out_arrow.svg) no-repeat center/contain;
  margin-left: 20px;
}

/*==================================================
$footer
==================================================*/
footer {
  background: var(--color-beige);
}
footer .entry {
  padding: 70px 0;
  text-align: center;
}
footer .entry p {
  font-size: var(--font-size-ll);
  font-weight: bold;
}
footer .entry a {
  max-width: 450px;
  width: 90%;
  height: 80px;
  background: var(--color-orange);
  color: var(--color-white);
  font-size: var(--font-size-l);
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 100vw;
  margin: 10px auto 0;
  filter: var(--filter-shadow);
}
footer .entry a::after {
  content: "";
  width: 0.7em;
  min-width: 0.7em;
  height: 0.7em;
  background: url(../img/ico_out_arrow.svg) no-repeat center/contain;
  margin-left: 20px;
}
footer .logo {
  max-width: 200px;
  width: 60%;
  margin: 0 auto 10px;
}
footer .copy {
  display: block;
  text-align: center;
  font-size: var(--font-size-ss);
  font-weight: bold;
  padding-bottom: 40px;
}

/*==================================================
$contents
==================================================*/
.sec_mv {
  background: var(--color-skyblue);
}
.sec_mv .mv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  background: var(--color-white) url(../img/mv_bg.svg) no-repeat top center/100% auto;
  width: 100%;
}
.sec_mv .mv .ill_l {
  width: 28.75vw;
  height: 36.81vw;
  background: url(../img/mv_ill_left.svg) no-repeat center/contain;
  margin-top: 8.68vw;
  margin-right: 4.65vw;
}
.sec_mv .mv h1 {
  width: 24.31vw;
  padding-top: 17.01vw;
}
.sec_mv .mv h1 img {
  width: 100%;
  max-width: none;
}
.sec_mv .mv .ill_r {
  width: 25.35vw;
  height: 32.92vw;
  margin-top: 9.44vw;
  margin-left: 2.85vw;
  background: url(../img/mv_ill_right.svg) no-repeat center/contain;
}
.sec_mv .mv .ill_l.fade-in,
.sec_mv .mv .ill_r.fade-in {
  transition-delay: 0.5s;
}
.sec_mv .lead {
  background: var(--color-white);
}
.sec_mv .lead p {
  max-width: 625px;
  width: 90%;
  margin: auto;
  line-height: 2.3;
  font-weight: bold;
  text-indent: -0.5em;
  padding-left: 0.5em;
}
.sec_contents {
  padding: 100px 0;
  max-width: 840px;
  width: 90%;
  margin: auto;
  position: relative;
}
.sec_contents .illust>span {
  position: absolute;
  z-index: 2;
}
.sec_contents .illust .coffee {
  width: 90px;
  height: 66px;
  top: 330px;
  left: 762px;
}
.sec_contents .illust .ramen {
  width: 100px;
  height: 87px;
  top: 688px;
  left: 100px;
}
.sec_contents .illust .man {
  width: 250px;
  height: 237px;
  top: 395px;
  left: 132px;
}
.sec_contents .illust .woman {
  width: 260px;
  height: 293px;
  top: 774px;
  left: 610px;
}
@media screen and (max-width:920px) {
  .sec_contents .illust .coffee {
    width: 10.71%;
    height: 7.86%;
    left: 90.71%;
  }
  .sec_contents .illust .ramen {
    width: 11.9%;
    height: 10.36%;
    left: 11.9%;
  }
  .sec_contents .illust .man {
    width: 29.76%;
    height: 28.21%;
    left: 15.71%;
  }
  .sec_contents .illust .woman {
    width: 30.95%;
    height: 34.88%;
    left: 72.62%;
  }
}
.sec_contents .rail {
  position: relative;
  z-index: -1;
}
.sec_contents .rail>span {
  position: absolute;
  top: 150px;
  left: 320px;
  margin: auto;
  z-index: -1;
}
.sec_contents .rail .front {
  z-index: 2;
  top: 158px;
  left: 332px;
}
.sec_contents .rail .back {
  z-index: 1;
}
.sec_contents .block {
  max-width: 425px;
  width: 100%;
  height: 245px;
  background: var(--color-yellow);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  position: relative;
}
.sec_contents .block.b_entry {
  margin-bottom: 70px;
}
.sec_contents .block.b_closing {
  margin-bottom: 165px;
  margin-left: auto;
}
.sec_contents .block.b_open {
  margin-left: 19.64%;
}
.sec_contents .block span {
  font-size: var(--font-size-mm);
  font-family: var(--font-point);
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: -31px;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 210px;
  height: 62px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: var(--color-yellow);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}
.sec_contents .block .days {
  width: 120px;
  height: 120px;
  background: var(--color-base);
  color: var(--color-white);
  border-radius: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-ll);
  font-weight: bold;
  text-align: center;
  margin: auto;
  position: relative;
  z-index: 2;
}
.sec_contents .block p {
  font-size: var(--font-size-l);
  font-weight: bold;
  text-align: center;
}
.sec_contents .briefing {
  position: absolute;
  top: 150px;
  right: 0;
  max-width: 335px;
  width: 38%;
}
.sec_contents .briefing a {
  width: 100%;
  height: 95px;
  background: var(--color-orange);
  border-radius: 100vw;
  color: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 1.3;
  font-weight: bold;
  position: relative;
  filter: var(--filter-shadow);
}
.sec_contents .briefing a::after {
  content: "";
  width: 28px;
  min-width: 28px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15%;
  margin: auto;
  background: url(../img/ico_circle_arrow.svg) no-repeat center/contain;
}
.sec_contents .briefing a span {
  position: absolute;
  top: -30px;
  left: 0;
  background: var(--color-base);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  line-height: 1.3;
  font-weight: bold;
  width: 80px;
  height: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 100vw;
}
.sec_contents .briefing a span::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 15px solid var(--color-base);
  border-right: 0;
  position: absolute;
  bottom: 2px;
  right: 2px;
  transform: rotate(45deg);
}
aside .entry {
  width: 210px;
  height: 210px;
  position: fixed;
  bottom: 3%;
  right: 3%;
  z-index: 100;
}
aside .entry.fade-in {
  transition-delay: 2s;
}
aside .entry.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s !important;
}
aside .entry .close {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background: var(--color-base);
  border-radius: 100vw;
  z-index: 10;
}
aside .entry .close::before,
aside .entry .close::after {
  content: "";
  width: 50%;
  height: 2px;
  background: var(--color-white);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotate(45deg);
}
aside .entry .close::after {
  transform: rotate(-45deg);
}
aside .entry a {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(../img/ba_aside.svg) no-repeat center/contain;
  text-align: center;
  font-weight: bold;
  color: var(--color-white);
  line-height: 1.3;
  filter: var(--filter-shadow);
}


/*==================================================
$sp
==================================================*/
@media screen and (max-width:767px) {
  .sp {display: inherit !important;}
  .pc {display: none !important;}
  @media screen and (max-width:600px) {
    header .logo {
      width: 60%;
    }
    header .logo a {
      height: auto;
      display: block;
      padding: 3% 5%;
    }
    header .logo a img {
      width: 100%;
    }
    header .logo a span {
      display: block;
      font-size: 3.04vw;
      margin-left: 0;
      width: 100%;
      text-align: center;
      margin-top: -0.5em;
    }
    header .entry {
      width: 30%;
      margin-right: 5%;
    }
    header .entry a {
      height: auto;
      font-size: 3.04vw;
      padding: 5%;
    }
    header .entry a::after {
      margin-left: 1em;
    }
  }
  footer .entry {
    padding: 17.72vw 0;
  }
  footer .entry p {
    font-size: 5.06vw;
  }
  footer .entry a {
    width: 90%;
    height: auto;
    padding: 5%;
    font-size: 5.06vw;
    margin: 2.53vw auto 0;
  }
  footer .entry a::after {
    margin-left: 1em;
  }
  footer .logo {
    margin: 0 auto 2.53vw;
  }
  footer .copy {
    padding-bottom: 10.13vw;
    font-size: var(--font-size-ss);
  }
  .sec_mv .mv {
    display: block;
    background: var(--color-white) url(../img/mv_bg_sp.svg) no-repeat top center/100% auto;
    padding-top: 1px;
  }
  .sec_mv .mv .ill_l {
    width: 89.87vw;
    height: 37.47vw;
    background: url(../img/mv_ill_left_sp.svg) no-repeat center/contain;
    margin: 29.62vw auto 0;
  }
  .sec_mv .mv h1 {
    width: 53.67vw;
    padding-top: 0;
    margin: 1.77vw auto 0;
  }
  .sec_mv .mv .ill_r {
    width: 91.51vw;
    height: 35.64vw;
    margin: 0 auto;
    background: url(../img/mv_ill_right_sp.svg) no-repeat center/contain;
  }
  .sec_mv .mv .ill_l.fade-in {
    transition-delay: 0s;
  }
  .sec_mv .mv h1.fade-in {
    transition-delay: 0.25s;
  }
  .sec_mv .mv .ill_r.fade-in {
    transition-delay: 0.5s;
  }
  .sec_mv .lead {
    padding: 12.66vw 0;
  }
  .sec_mv .lead p {
    max-width: none;
    text-indent: 0;
    padding-left: 0;
    font-size: 3.8vw;
  }
  .sec_contents {
    padding: 0 0 12.66vw;
  }
  .sec_contents .illust>span {
    position: absolute;
    z-index: 2;
  }
  .sec_contents .illust .coffee {
    display: none;
  }
  .sec_contents .illust .ramen {
    display: none;
  }
  .sec_contents .illust .man {
    width: 35.75vw;
    height: 33.81vw;
    top: 74.68vw;
    left: 0;
  }
  .sec_contents .illust .woman {
    width: 32.89vw;
    height: 37.21vw;
    top: 156vw;
    left: auto;
    right: 0;
  }
  .sec_contents .rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .sec_contents .rail>span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    width: 100%;
    height: 90%;
  }
  .sec_contents .rail>span svg {
    width: 100%;
    height: 100%;
  }
  .sec_contents .rail .front {
    z-index: 2;
    top: 0;
    left: 0;
  }
  .sec_contents .rail .front svg {
    width: 99%;
    height: 99%;
  }
  .sec_contents .rail .back {
    z-index: 1;
  }
  .sec_contents .block {
    max-width: none;
    height: 42.53vw;
    padding: 5%;
  }
  .sec_contents .block.b_entry {
    margin-bottom: 8.35vw;
  }
  .sec_contents .block.b_closing {
    margin-bottom: 41.01vw;
  }
  .sec_contents .block.b_open {
    margin-left: auto;
  }
  .sec_contents .block span {
    font-size: 3.54vw;
    position: absolute;
    top: -7vw;
    max-width: none;
    width: 43.04vw;
    height: 12.66vw;
  }
  .sec_contents .block .days {
    width: 22.78vw;
    height: 22.78vw;
    font-size: 5.06vw;
  }
  .sec_contents .block p {
    font-size: 5.06vw;
  }
  .sec_contents .briefing {
    position: static;
    max-width: none;
    width: 100%;
    margin-bottom: 41.01vw;
  }
  .sec_contents .briefing a {
    width: 100%;
    height: 24.05vw;
    font-size: 5.06vw;
  }
  .sec_contents .briefing a::after {
    width: 7.09vw;
    min-width: 7.09vw;
    height: 7.09vw;
  }
  .sec_contents .briefing a span {
    top: -30px;
    font-size: 3.54vw;
    width: 20.25vw;
    height: 20.25vw;
  }
  .sec_contents .briefing a span::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 15px solid var(--color-base);
    border-right: 0;
    position: absolute;
    bottom: 2px;
    right: 2px;
    transform: rotate(45deg);
  }
  aside .entry {
    width: 170px;
    height: 170px;
    position: fixed;
    bottom: 3%;
    right: 3%;
    z-index: 100;
  }
  aside .entry a {
    font-size: var(--font-size-mm);
  }

}