@charset "utf-8";

.p-page_content {padding: 0;}
.p-page_content__inner { max-width: none;}

/* ==========================
 cmn
============================= */
.cmn-section{padding-left: 40px;padding-right: 40px;margin-top: 100px;}
.cmn-section-inner {max-width: 1200px;margin: 0 auto;}
.cmn-title {font-weight: bold;margin-bottom: 18px;margin-bottom: 60px;text-align: center;}
.cmn-title .cmn-title-en {font-size: 16px;color: #dc777a;margin-bottom: 10px;}
.cmn-title .cmn-title-jp {font-size: 34px;font-feature-settings: "palt";letter-spacing: 4px;line-height: 58px;}
.cmn-title .cmn-title-jp span {color: #dc777a;}
.cmn-desc p {font-size: 16px;line-height: 36px;}
.cmn-h3 {font-size: 24px;color: #dc777a;font-weight: bold;margin-bottom: 20px;}
.cmn-btn-box {display: flex;gap:20px;flex-wrap: wrap;}
.cmn-btn-box [class^="btn0"],
.cmn-btn-box [class*=" btn0"] {font-size: 16px;font-weight: bold;color: #fff;display: block;text-decoration: none;text-align: center;padding: 25px 40px 25px 20px;position: relative;}
.cmn-btn-box [class^="btn0"]:hover,
.cmn-btn-box [class*=" btn0"]:hover {transition: .3s;opacity: .7;}
.cmn-btn-box [class^="btn0"]::after,
.cmn-btn-box [class*=" btn0"]::after {content: '';width: 7px;height: 13px;display: block;background: url(../img/icon-arrow-right.svg) center / cover no-repeat;position: absolute;top: 0;bottom: 0;right: 20px;margin: auto;}
.cmn-btn-box .btn01 {background-color: #dc777a;width: 100%;}
.cmn-btn-box .btn02 {background-color: #1b1b1b;width: calc((100% - 20px) / 2);}

.no-pc {display: none;}
.no-sp {display: block;}

/* ==========================
  mv
============================= */
.umami-mv {max-width: 1360px;margin: auto;}
.umami-mv .umami-mv-inner {position: relative;}
.umami-mv .mv-ttl {position: absolute;top: 0;bottom: 0;right: 0;left: 0;margin: auto;z-index: 2;font-weight: bold;width: 80%;display: flex;align-items: flex-start;justify-content: center;flex-direction: column;}
.umami-mv .mv-ttl-en {font-size: 16px;color: #fff;}
.umami-mv .mv-ttl-jp {font-size: 44px;letter-spacing: 4px;}
.umami-mv .mv-ttl-jp span {border-bottom: 2px solid;}
.umami-mv .mv-img {position: relative;text-align: right;padding-top: 30px;display: flex;justify-content: flex-end;}
.umami-mv .mv-img::before {content: '';background: #eeacae;display: block;width: 100%;height: calc(100% - 60px);position: absolute;left: 0;top: 0;z-index: 0;}
.umami-mv .mv-img img {position: relative;z-index: 1;width: 80%;}

/* ==========================
  whatis
============================= */
.umami-whatis .cmn-title {margin-bottom: 0;text-align: left;}
.umami-whatis .whatis-box {display: flex;flex-direction: row-reverse;align-items: center;gap:50px;}
.umami-whatis .whatis-box-txt {flex: 1;}
.umami-whatis .whatis-box-img {width: 50%;}

/* ==========================
reason
============================= */
.umami-reason {padding-top: 100px;padding-bottom: 100px;background: url(../img/reason-bg.jpg) center top / cover no-repeat;}
.umami-reason .reason-box li {display: flex;align-items: center;}
.umami-reason .reason-box li:not(:last-child) {margin-bottom: 60px;}
.umami-reason .reason-box li:nth-child(odd) {flex-direction: row-reverse;}
.umami-reason .reason-box li .reason-box-img {width: 50%;}
.umami-reason .reason-box li .reason-box-txt {flex: 1; background: #fff;padding: 50px;position: relative;z-index: 1;}
.umami-reason .reason-box li .reason-box-txt::before {content:'' ;width: 30px;height: 80px;display: block;background: linear-gradient(0deg,rgba(255, 216, 217, 1) 0%, rgba(238, 172, 174, 1) 100%);opacity: .8;position: absolute;top: -15px;}
.umami-reason .reason-box li:nth-child(odd) .reason-box-txt::before {left: -15px;}
.umami-reason .reason-box li:nth-child(even) .reason-box-txt::before {right: -15px;}
.umami-reason .reason-box li:nth-child(odd) .reason-box-txt {margin-right: -50px;}
.umami-reason .reason-box li:nth-child(even) .reason-box-txt {margin-left: -50px;}


/* ==========================
recommend
============================= */
.umami-recommend {margin-top: 0;padding-top: 100px;padding-bottom: 100px;background: #f3f3f3;}
.umami-recommend .recommend-box {display: flex;align-items: center;gap:50px;background: #fff;box-shadow: 0px 0px 21px 15px rgba(13, 11, 13, 0.06);padding: 40px;margin-bottom: 50px;}
.umami-recommend .recommend-box-img {}
.umami-recommend .recommend-box-txt {}
.umami-recommend .recommend-box-txt .cmn-btn-box {margin-top: 30px;}
.umami-recommend .recommend-award {display: flex;gap:40px;align-items: stretch;}
.umami-recommend .recommend-award .award-box {position: relative;z-index: 1;}
.umami-recommend .recommend-award li {flex: 1;text-align: center;display: flex;align-items: center;justify-content: center;position: relative;}
.umami-recommend .recommend-award li:before ,
.umami-recommend .recommend-award li:after {content: '';width: 70px;height: 100%;background: url(../img/recommend-bg.svg) center / contain no-repeat;position: absolute;top: 0;bottom: 0;margin: auto;}
.umami-recommend .recommend-award li:before {left: 0;}
.umami-recommend .recommend-award li:after {right: 0;transform: scale(-1, 1);}
.umami-recommend .recommend-award li .cmn-h3 {margin-bottom: 10px;}
.umami-recommend .recommend-award li .cmn-h3:before {content: '';width: 54px;height: 40px;display: block;margin: 0 auto 8px;background: url(../img/icon-king.svg) center / cover no-repeat;}
.umami-recommend .recommend-award li .cmn-h3 span {background: #ede7e7;display: inline-block;padding: 2px 10px;}


/* ==========================
arrange
============================= */
.umami-arrange {}
.umami-arrange .cmn-title + .cmn-desc {text-align: center;}
.umami-arrange .arrange-box {margin: 50px 0;display: flex;gap:40px;}
.umami-arrange li {flex: 1;background: #fff;box-shadow: 0px 0px 15px 5px rgba(13, 11, 13, 0.06);padding: 40px;}
.umami-arrange .arrange-box-img {max-width: 340px;margin: 0 auto 30px;}
.umami-arrange .arrange-box-txt .cmn-h3 {text-align: center;}
.umami-arrange .arrange-point {max-width: 1000px;margin: 50px auto 0;background: #f8e7eb;border-radius: 10px;padding: 30px;position: relative;}
.umami-arrange .arrange-point:before {content: '';width: calc(100% - 10px);height: calc(100% - 10px);border: 2px solid #fff;border-radius: 10px;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}
.umami-arrange .arrange-point .point-box {background: url(../img/arrange-point.svg) left center / contain no-repeat;padding-left: 150px;max-width: 880px;margin: 0 auto;}
.umami-arrange .arrange-point .point-box .cmn-h3 {color: #1b1b1b;margin-bottom: 5px;}


/* ==========================
howto
============================= */
.umami-howto {padding-top: 100px;padding-bottom: 100px;background: #f8f1f3;}
.umami-howto .cmn-title + .cmn-desc{text-align: center;}
.umami-howto .howto-box01 {display: flex;align-items: center;margin-top: 60px;}
.umami-howto .howto-box01-img {width: 50%;position: relative;z-index: 0;}
.umami-howto .howto-box01-txt {flex: 1;background: #fff;position: relative;z-index: 1;margin-left: -50px;padding: 50px;}
.umami-howto .howto-box01-txt::before {content:'Recipe 01' ;font-size: 16px;font-weight: bold;padding: .2em 1.5em; color: #fff; display: block;background: linear-gradient(90deg,rgba(238, 172, 174, 1) 0%, rgba(255, 216, 217, 1) 100%);opacity: .8;position: absolute;top: -10px;left: 20px;transform: rotate(90deg);transform-origin:left top;}
.umami-howto .howto-box02 {}
.umami-howto .howto-box02 h4 {font-size: 24px;font-weight: bold;text-align: center;display: flex;align-items: center;justify-content: center;margin-top: 60px;margin-bottom: 40px;}
.umami-howto .howto-box02 h4:before,
.umami-howto .howto-box02 h4:after {content: '';display: inline-block;width: 50px;height: 40px;background: url(../img/howto-bar.svg) center / cover no-repeat;}
.umami-howto .howto-box02 h4:before{margin-right: 20px;}
.umami-howto .howto-box02 h4:after {margin-left: 10px;transform: scale(-1, 1);}
.umami-howto .howto-box02 ul {display: flex;flex-wrap: wrap; gap:30px;counter-reset: my-counter 1;}
.umami-howto .howto-box02 ul li {background: #fff;width: calc((100% - 30px) / 2);padding: 50px;position: relative;}
.umami-howto .howto-box02 ul li::before {counter-increment: my-counter;content:"Recipe 0" counter(my-counter) ;font-size: 16px;font-weight: bold;padding: .2em 1.5em; color: #fff; display: block;background: linear-gradient(90deg,rgba(238, 172, 174, 1) 0%, rgba(255, 216, 217, 1) 100%);opacity: .8;position: absolute;top: -10px;left: 20px;transform: rotate(90deg);transform-origin:left top;}


/* ==========================
event
============================= */
.umami-event .event-box {display: flex;gap:50px;align-items: center;}
.umami-event .event-box-img {width: 50%;}
.umami-event .event-box-txt {flex: 1;}





/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
@media screen and (max-width:1023px){

  .cmn-section {margin-top: 60px;}
  
  /* ==========================
  mv
  ============================= */
  .umami-mv .mv-ttl-jp {font-size: 34px;}
  
  /* ==========================
  whatis
  ============================= */
  .umami-whatis .cmn-title {text-align: center;}
  .umami-whatis .whatis-box {display: block;}
  .umami-whatis .whatis-box-img {width: 100%;margin-top: 30px;}

  /* ==========================
  reason
  ============================= */
  .umami-reason {padding-top: 60px;padding-bottom: 60px;}
  .umami-reason .reason-box li {display: block;}
  .umami-reason .reason-box li .reason-box-img {width: 100%;}
  .umami-reason .reason-box li .reason-box-txt {padding: 25px;}
  .umami-reason .reason-box li:nth-child(odd) .reason-box-txt,
  .umami-reason .reason-box li:nth-child(even) .reason-box-txt {margin: 0;}
  .umami-reason .reason-box li .reason-box-txt::before {width: 80px;height: 30px;}

  /* ==========================
  recommend
  ============================= */
  .umami-recommend {margin-top: 0;padding-top: 60px;padding-bottom: 60px;}
  .umami-recommend .recommend-box {display: block;}
  .umami-recommend .recommend-box-img {margin-bottom: 25px;}
  .umami-recommend .recommend-award {display: block;max-width: 600px;margin-left: auto;margin-right: auto;}
  .umami-recommend .recommend-award li + li {margin-top: 40px;}

  /* ==========================
  howto
  ============================= */
  .umami-howto {padding-top: 60px;padding-bottom: 60px;}

  /* ==========================
  event
  ============================= */
  .umami-event .event-box {display: block;}
  .umami-event .event-box-img {width: 100%;margin-bottom: 30px;}
}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (max-width:720px){

  .cmn-section{padding-left: 15px;padding-right: 15px;}
  .cmn-title {margin-bottom: 30px;}
  .cmn-title .cmn-title-en {font-size: 14px;}
  .cmn-title .cmn-title-jp {font-size: 24px;line-height: 38px;}
  .cmn-desc p {font-size: 14px;line-height: 32px;}
  .cmn-h3 {font-size: 20px;margin-bottom: 10px;}
  .cmn-btn-box {gap:10px;}
  .cmn-btn-box .btn02 {width: 100%;  }
  .cmn-btn-box [class^="btn0"], 
  .cmn-btn-box [class*=" btn0"] {padding: 15px 10px;}
  
  .no-pc {display: block;}
  .no-sp {display: none;}

  /* ==========================
  mv
  ============================= */
  .umami-mv .mv-ttl {top: -20px;left: 15px;width: 100%;}
  .umami-mv .mv-ttl-en {font-size: 14px;}
  .umami-mv .mv-ttl-jp {font-size: 22px;}
  .umami-mv .mv-img {overflow: hidden;}
  .umami-mv .mv-img::before {height: calc(100% - 30px);}
  .umami-mv .mv-img img {width: 130%;transform: translateX(40%);}

  /* ==========================
  reason
  ============================= */
  .umami-reason .reason-box li:not(:last-child) {margin-bottom: 30px;}

  /* ==========================
  recommend
  ============================= */
  .umami-recommend .recommend-box {padding: 20px;margin-bottom: 30px;}
  .umami-recommend .recommend-box-img {margin-bottom: 15px;}
  .umami-recommend .recommend-box-txt .cmn-btn-box {margin-top: 15px;}
  .umami-recommend .recommend-award li + li {margin-top: 20px;}

  /* ==========================
  recommend
  ============================= */
  .umami-arrange .arrange-box {display: block;margin: 30px 0;}
  .umami-arrange .arrange-box li {padding: 20px;}
  .umami-arrange .arrange-box li + li {margin-top: 20px;}
  .umami-arrange .arrange-box-img {margin-bottom: 15px;}
  .umami-arrange .arrange-point {padding: 20px;}
  .umami-arrange .arrange-point .point-box {background-position: center top;background-size: 100px auto;padding-left: 0;padding-top: 120px;}
  .umami-arrange .arrange-point .point-box .cmn-h3 {text-align: center;}

  /* ==========================
  howto
  ============================= */
  .umami-howto .howto-box01 {display: block;}
  .umami-howto .howto-box01-img {width: 100%;}
  .umami-howto .howto-box01-txt {margin-left: 0;padding: 30px 30px 30px 50px;}
  .umami-howto .howto-box01-txt::before {font-size: 12px;top: 0;left: 23px;}
  .umami-howto .howto-box02 h4 {font-size: 18px;margin-top: 40px;margin-bottom: 20px;}
  .umami-howto .howto-box02 ul {display: block;}
  .umami-howto .howto-box02 ul li {width: 100%;padding: 30px 30px 30px 50px;}
  .umami-howto .howto-box02 ul li::before {font-size: 12px;top: 0;left: 23px;}
  .umami-howto .howto-box02 ul li + li {margin-top: 25px;}
  
  
  
  
}