@charset "UTF-8";

html {
  font-size: 62.5%;
}
html * {
  visibility: hidden;
}
html.wf-active * {
  visibility: visible;
}
body {
  color: #251e1c;
  font-size: 1.6rem;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-family: 'Noto Sans JP', sans-serif;
}
.font_mplus {
  font-family: 'M PLUS 1p';
  font-style: normal;
  font-weight: 700;
}
.font_Montserrat-ital {
  font-family: 'Montserrat';
  font-weight: 700;
  font-style: italic;
  letter-spacing: .05em;
}
img {
  max-width: 100%;
  height: auto;
}
#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

@media only screen and (min-width: 736px) {
  .sp {
    display: none !important;
  }
}
@media only screen and (max-width: 737px) {
  .pc {
    display: none !important;
  }
}
.clearfix {
	zoom: 1;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/**********************************************************
 * ヘッダー
 **********************************************************/
header {
  height: 76.666vw;
  background:url("../img/bg_header@2x.jpg") no-repeat;
  background-size: 100%;
  background-position: center top;
}
header h1 {
  position: absolute;
  top: 50vw;
  left: 50%;
  transform: translateX(-50%);
  width: 91.666vw;
  z-index: 1;
}
header h1 img {
  width: 100%;
}

/**********************************************************
 * メイン
 **********************************************************/
main {
  position: relative;
  margin-top: -11vw;
}
main section {
  padding: 65px 0 100px;
}
main .inner {
  position: relative;
  width: 1000px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}
main h2 span.ja {
  display: block;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1em;
}
main h2 span.en {
  display: block;
  text-align: center;
  font-size: 4.0rem;
  color: #ff6503;
  margin-bottom: .6em;
}

/* 上部背景 */
.bg_main_top {
  background:url("../img/bg_main_top@2x.png") no-repeat;
  background-size: cover;
  background-position: center top;
  padding-top: 19.3vw;
}

/* ナビゲーション */
nav ul {
  display: flex;
  justify-content: center;
  gap: 0px 10px;
  padding: 95px 10px 40px;
}
nav li {
  width: 180px;
}
nav li a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 3.375em;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background-color: #df6316;
  border-radius: .3125em;
  transition: all .3s;
}
nav li a:hover {
  opacity: .7;
}
nav .btn_officialSite {
  text-align: center;
  padding-bottom:35px;
}
nav .btn_officialSite a {
  position: relative;
  display: inline-block;
  font-size: 2.0rem;
  font-weight: 700;
  text-decoration: none;
  color: #FFF;
  background-image:url("../img/btn_bg.jpg");
	background-size:cover;
  background-position: center center;
  outline: solid 2px #FFF;
  outline-offset: -6px;
  border: solid 4px #09244f;
  box-sizing: border-box;
  padding: .75em 4.5em;
  transition: all .3s;
}
nav .btn_officialSite a:hover {
  opacity: .7;
}

/* 事後通販 */
#order {
  background-image: url("../img/bg_menu@2x.jpg");
  background-size: cover;
}
#order h3 {
  margin: .175em auto 1em;
  padding: .125em 0 .225em;
  font-size: 4.0rem;
  font-weight: 700;
  text-align: center;
	line-height: 140%;
}
#order .card_order {
  position: relative;
  margin: 0 auto;
  padding: 40px 0;
  max-width: 900px;
  font-weight: 700;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
#order .card_order a {
  color: #1c4493;
}
#order .card_order table {
  margin: 0 auto;
  width: 80%;
  font-size: 2.0rem;
}
#order .card_order tr + tr {
  border-top: 1px solid #c9d5e7;
}
#order .card_order th,
#order .card_order td {
  padding: 1em 0;
}

#order .card_order th {
  text-align: left;
}
#order .card_order td {
  line-height: 1.7;
}
#order .card_order td span {
  font-size: 1.6rem;
}

/* ストーリー */
#story{
  background:url("../img/bg_main_top@2x.png") no-repeat center;
}
#story h2 span.ja {
  color: #fff;
}
#story h3 {
  text-align: center;
  margin: 50px 0;
}
#story h3 img {
  width: 381px;
}
#story .text p {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
  color: #fff;
  margin-top: 1em;
}
#story .copy p {
  text-align: center;
  font-size: 6.0rem;
  line-height: 1.3;
  margin-top: .5em;
}

/* コラボメニュー */
#menu {
  background-image: url("../img/bg_menu@2x.jpg");
  background-size: cover;
  background-position: center top;
}
#menu .lead_txt {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
  padding: 0 0 3em;
}
#menu .benefit .card_menu > h3 {
  text-align: center;
}
#menu .benefit .card_menu  > h3 span {
  display: inline-block;
  font-size: 2.2rem;
  color: #FFF;
  padding: .4em 1em;
  background: #1c4493;
}
#menu .benefit .card_menu  > h4 {
  text-align: center;
  font-size: 4.0rem;
  color: #1c4493;
  margin-top: .5em;
}
#menu .benefit .card_menu  > p {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.75;
  padding: 1.5em 0;
}
#menu .benefit .card_menu  > .note {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 1.5em;
}
#menu .benefit .card_menu .card_img {
  width: 620px;
  margin: 0 auto;
  padding: 0;
}
#menu .benefit > .note li {
  position: relative;
  display: inline-block;
  padding-left: 1em;
}
#menu .benefit > .note li::before{
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
#menu .card_menu {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  padding: 35px 0;
  background-color: #FFF;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-sizing: border-box;
}
#menu .list_menu {
  width: 1000px;
  margin: 80px auto 0;
}
#menu .list_menu > li {
  position: relative;
  background-color: #FFF;
  padding: 30px 110px 30px 165px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-sizing: border-box;
}
#menu .list_menu > li + li {
  margin-top: 80px;
}
#menu .list_menu .icon_benefit {
  position: absolute;
  top: -25px;
  left: 20px;
  width: 123px;
}
#menu .list_menu .title {
  display: flex;
}
#menu .list_menu .title.horizontal {
  justify-content: space-between;
  align-items: center;
}
#menu .list_menu .title.vertical {
  flex-direction: column;
  width: 315px;
}
#menu .list_menu .title h5 {
  font-size: 3.2rem;
}
#menu .list_menu .title.vertical h5 {
  margin-bottom: .7em;
}
#menu .list_menu .title.vertical h5 small {
  font-size: 2.2rem;
}
#menu .list_menu .title.vertical.title_menu_05 h5 small {
  display: block;
  margin-bottom: .3em;
}
#menu .list_menu .title .price {
  font-size: 2.8rem;
  font-weight: 700;
  color: #1c4493;
}
#menu .list_menu .title .price .red {
  font-size: 2.8rem;
  font-weight: 700;
  color: #a80d19;
}
#menu .list_menu .title .price small {
  font-size: 1.8rem;
}
#menu .list_menu li > .flex {
  display: flex;
  justify-content: space-between;
  gap: 0 40px;
}
#menu .list_menu li > .flex .photo {
  width: calc(100% - 355px);
}
#menu .list_menu li > .flex .photo img {
  width: auto;
  height: 267px;
}
#menu .list_menu p {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 1em;
	line-height: 1.85;
}
#menu .list_menu p.drinks {
  font-size: 1.6rem;
	line-height: 1.65;
}
#menu .list_menu p small {
  font-size: 1.38rem;
}
#menu .list_menu .photo.flex {
  display: flex;
  justify-content: space-between;
  gap: 0 12px;
  margin-top: 16px;
}
#menu .list_menu .img_character {
  position: absolute;
  width: 180px;
  z-index: 1;
}
#menu .list_menu .img_character_01 {
  top: 128px;
  left: -44px;
}
#menu .list_menu .img_character_02 {
  bottom: -66px;
  right: -72px;
}
#menu .list_menu .img_character_03 {
  top: 142px;
  left: -44px;
}
#menu .list_menu .img_character_04 {
  top: -166px;
  right: -72px;
}
#menu .list_menu .img_character_05 {
  top: 100px;
  left: -44px;
}
#menu .list_menu .img_character_06 {
  top: 115px;
  left: -44px;
}
#menu .list_menu .img_character_07 {
  top: -184px;
  right: -52px;
}
#menu .list_menu .img_character_08 {
  top: 114px;
  left: -20px;
}
#menu .list_menu .img_character_09 {
  top: 118px;
  left: -44px;
}
#menu .list_menu .img_character_10 {
  top: -164px;
  right: -90px;
}
#menu .list_menu .img_character_11 {
  top: 134px;
  left: -44px;
}
#menu .list_menu .img_sasha {
  width: 214px;
  margin: 20px 0 0 16px;
}
#menu .allergy {
  display: flex;
  justify-content: center;
  gap: 0 5vw;
  font-size: 1.6rem;
  font-weight: 500;
  margin-top: 2vw;
}
#menu .allergy a {
  cursor: pointer;
  border-bottom: solid 1px #251e1c;
  padding-bottom: .1em;
}
#menu .pick {
  margin-top: 2vw;
}

/* コラボグッズ */
#goods {
  background-image: url("../img/bg_goods@2x.jpg");
  background-size: cover;
  background-position: center top;
}
#goods .text {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
  margin: 0 0 3em;
}
#goods .list_goods + h3.tit_second {
  color: #528bd3;
  text-align: center;
  font-size: 3.6rem;
  font-weight: 700;
  padding: 70px 0 40px;
}
#goods .list_goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1000px;
  margin: 0 auto;
}
#goods .list_goods li {
  width: 480px;
  background-color: #FFF;
  border-radius: 10px;
  border-style: solid;
  border-width: 0 3px 3px;
  border-color: #1c4493;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-sizing: border-box;
}
#goods .list_goods.second li {
  border-color: #528bd3;
}
#goods .list_goods li:nth-of-type(n+3) {
  margin-top: 40px;
}
#goods .list_goods .title {
  font-size: 2.0rem;
  color: #FFF;
  padding: .8em;
  background: #1c4493;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
#goods .list_goods.second .title {
  background: #528bd3;
}
#goods .list_goods .title h3 {
  line-height: 1.2;
  min-height: 2.4em;
}
#goods .list_goods .title span {
  font-size: 1.6rem;
}
#goods .list_goods .title .note {
  display: block;
  font-size: 2.0rem;
  font-weight: 700;
  margin: .4em .4em 0;
}
#goods .list_goods .title .note::before {
  content: "※";
}
#goods .list_goods .detail {
  text-align: center;
  padding: 30px 0;
}
#goods .list_goods .detail img {
  width: 360px;
}
#goods .list_goods .detail .price {
  font-size: 3.6rem;
  font-weight: 700;
  color: #1c4493;
  margin-top: .6em;
}
#goods .list_goods.second .detail .price {
  color: #528bd3;
}
#goods .list_goods .detail .price .type {
  display: inline-block;
  font-size: 1.3rem;
  color: #FFF;
  background-color: #1c4493;
  margin-right: 1em;
  padding: .5em;
  vertical-align: bottom;
}
#goods .list_goods .detail .price .type {
  background-color: #1c4493;
}
#goods .list_goods.second .detail .price .type {
  background-color: #528bd3;
}
#goods .list_goods .detail .price .yen {
  font-size: 2.0rem;
}
#goods .list_goods .detail .price small {
  font-size: 1.4rem;
}
#goods .bannar {
  text-align: center;
  margin-top: 65px;
}
#goods .bannar img {
  width: 500px;
}

/* コラボグッズ販売店舗 */
#shop {
  background-color: #dee8f6;
}
#shop .inner {
  width: 1100px;
  background-color: #fff;
  padding: 60px 50px 40px;
}
#shop h2 span {
  display: block;
  text-align: center;
  font-size: 5.0rem;
  font-weight: 700;
  color: #26458e;
  margin-bottom: .6em;
}
#shop .btn_shop {
  text-align: center;
  margin-bottom: 50px;
}
#shop .btn_shop a {
  display: inline-block;
  text-decoration: none;
  font-size: 3.6rem;
  padding: .5em 1.5em;
  color: #FFF;
  background: #1c4493;
  border-radius: 1.3em;
  box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.15);
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
#shop .btn_shop a span {
  display: block;
}
#shop .btn_shop a small {
  display: block;
  font-size: .5em;
  font-weight: 700;
  margin-top: .25em;
}
#shop .btn_shop a:hover {
  opacity: .7;
}
#shop .comingsoon{
	text-align:center;
	font-size:3rem;
	color:#1c4493;
}
#shop .shop_text {
  text-align: center;
  margin-bottom: 50px;
}
#shop ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 950px;
  margin: 0 auto;
}
#shop li {
  width: 450px;
  flex-shrink: 0;
  border-bottom: 1px solid #D3C6B3;
  padding: 20px 10px;
  box-sizing: border-box;
}
#shop li:nth-of-type(-n+2) {
  border-top: 1px solid #D3C6B3;
}
#shop li h3 {
  font-size: 2.2rem;
  font-weight: 500;
}
#shop li p {
  font-size: 1.4rem;
  margin-top: .8em;
  margin-left: 1em;
  line-height: 1.4;
}
#shop li a {
  color: #1c4493;
  text-decoration: underline;
  margin-left: 1em;
}
#shop .note {
  margin: 3em auto 0 auto;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.5;
}

/* コラボグッズ店舗 */
#goods_shop {
  background-image: url("../img/bg_shop@2x.jpg");
  background-size: cover;
  background-position: center top;
}
#goods_shop .howto {
  display: block;
  width: 616px;
  margin: 30px auto;
}
#goods_shop .text{
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2;
  margin: 1em auto;
	text-align: center;
}
#goods_shop .text strong{
	font-size: 1.8rem;
}
#goods_shop .period {
  margin-top: 30px;
}
#goods_shop .note {
  margin: 3em auto 0 auto;
  font-size: 1.3rem;
  line-height: 1.5;
}
#goods_shop .note a {
  color: #000;
}

/**********************************************************
 * フッター
 **********************************************************/
footer {
  position: relative;
  margin-top: auto;
}
footer .copyright {
  display: block;
  text-align: center;
  font-size: 1.3rem;
  padding: 2em 0;
}

/**********************************************************
 * モーダル
 **********************************************************/
.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 20;
}
.modal .modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.60);
  cursor: pointer;
}
.modal .modal_content {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 100vh;
  max-width: 790px;
  margin: 0 auto;
  padding: 50px 0;
  overflow-y: scroll;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: pointer;
}
.modal .modal_content::-webkit-scrollbar {
  display: none;
}
.modal .modal_content .modal_inner {
  position: relative;
  padding: 50px;
  border-radius: 20px;
  cursor: auto;
}
.modal .modal_content .modal_inner .modal_close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  cursor: pointer;
}
/* クローズ */
.close {
  position: relative;
  padding-top: 100px;
}
.closeText {
  position: sticky;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  display: block;
  height: 0;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 50px;
  z-index: 102;
}
.close::before {
  position: absolute;
  top: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: block;
  z-index: 100;
}