@charset "UTF-8";
/* CSS Document */
/*------------------------------
#container
------------------------------*/
#container {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}
/*------------------------------
#voice
------------------------------*/
#voice {
  text-align: center;
  margin: 0 auto 10%;
  padding: 10% 0 5%;
  width: 100%;
  background: url("../img/voice_bg.jpg") center top no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#voice h2 {
  text-align: center;
  margin: 0 auto 10%;
  max-width: 960px;
  position: relative;
}
#voice h2 img {
  margin: 0 auto;
  width: 69.6%;
}
#voice h2 .romaji {
  width: 55.6%;
  position: absolute;
  right: -8%;
  bottom: -160%;
}
#voice .voice01, #voice .voice02, #voice .voice03 {
  text-align: center;
  margin: 0 auto 7%;
  max-width: 960px;
  position: relative;
}
#voice .voice01 {
  padding: 2% 0 0 0;
  background: url("../img/voice_img01.jpg") left top no-repeat;
  background-size: 61%;
}
#voice .voice02 {
  padding: 1% 0 0;
  background: url("../img/voice_img02.jpg") right top no-repeat;
  background-size: 61%;
}
#voice .voice03 {
  padding: 2% 0 0;
  background: url("../img/voice_img03.jpg") left top no-repeat;
  background-size: 61%;
}
#voice .voice01 h3, #voice .voice02 h3, #voice .voice03 h3 {
  text-align: left;
  margin: 0 auto 5% 0;
  z-index: 1;
  position: relative;
}
#voice .voice01 h3:after, #voice .voice02 h3:after, #voice .voice03 h3:after {
  content: '';
  display: block;
  width: 100%;
  background: #d19090;
  mix-blend-mode: multiply;
  z-index: -1;
  position: absolute;
  left: 4%;
}
#voice .voice01 h3 {
  width: 59.2%;
}
#voice .voice01 h3:after {
  height: 100%;
  top: 14%;
}
#voice .voice02 h3 {
  margin: 0 auto 4% 0;
  width: 40.4%;
}
#voice .voice02 h3:after {
  height: 90%;
  top: 24%;
}
#voice .voice03 h3 {
  width: 63.2%;
}
#voice .voice03 h3:after {
  height: 94%;
  top: 20%;
}
#voice .voice01 .img04 {
  width: 15.6%;
  position: absolute;
  left: 21%;
  bottom: 0%;
}
#voice .voice02 .img05 {
  width: 20.6%;
  position: absolute;
  right: 28%;
  bottom: 0%;
}
#voice .voice03 .img06 {
  width: 31%;
  position: absolute;
  left: 1%;
  bottom: 0%;
}
#voice .txt01 {
  text-align: left;
  margin: 0 auto 0 0;
  font-size: 2.2rem;
}
#voice .txt01 span {
  padding: 1% 1%;
  /*background: #fff;*/
  color: #cf384d;
  font-size: 2.5rem;
  font-family: 'huiji';
}
#voice .box {
  margin: 0 0 0 auto;
  width: 60%;
}
@media screen and (max-width:960px) {
  #voice {
    padding: 12% 0 5%;
  }
  #voice .voice01 {
    padding: 2% 0 0 0;
    background: none;
  }
  #voice .voice02 {
    padding: 1% 0 0;
    background: none;
  }
  #voice .voice03 {
    padding: 2% 0 0;
    background: none;
  }
  #voice h2 img {
    width: 73.1%;
  }
  #voice h2 .romaji {
    width: 66.6%;
    right: -9%;
    bottom: -196%;
  }
  #voice .img01, #voice .img03 {
    margin: 0 auto 5% 0;
    width: 94.4%;
  }
  #voice .voice02 dl {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  #voice .voice02 dt {
    width: 47.8%;
  }
  #voice .voice02 dd {
    padding: 3% 0 0 5%;
    width: 46.6%;
  }
  #voice .txt01 {
    margin: 0 auto;
    width: 90%;
    font-size: 2.7rem;
  }
  #voice .txt02 {
    text-align: left;
    font-size: 2.7rem;
  }
  #voice .txt01 span {
    background: #fff;
    font-size: 3.0rem;
  }
  #voice .txt02 span {
    padding: 1% 1%;
    background: #fff;
    color: #cf384d;
    font-size: 3.0rem;
    font-family: 'huiji';
  }
  #voice .voice01 h3 {
    width: 59.4%;
    position: absolute;
    right: 0%;
    top: 22%;
  }
  #voice .voice01 .img04 {
    width: 17.6%;
    left: 11%;
    bottom: 42%;
  }
  #voice .voice02 h3 {
    margin: 0 auto 6% -12%;
    width: 147.4%;
  }
  #voice .voice02 .img05 {
    width: 30.6%;
    right: 40%;
    bottom: -4%;
  }
  #voice .voice03 h3 {
    width: 64.6%;
    position: absolute;
    right: 0%;
    top: 16%;
  }
  #voice .voice03 .img06 {
    width: 39%;
    left: 5%;
    bottom: 46%;
  }
}
/*------------------------------
#award
------------------------------*/
#award {
  text-align: center;
  margin: 0 auto 3%;
  padding: 4% 0 0.6%;
  max-width: 960px;
  border: 7px solid #c5a807;
  outline: 2px solid #c5a807;
  outline-offset: -15px;
}
#award h2 {
  margin: 0 auto 3%;
  width: 21.7%;
}
#award .award {
  margin: 0 auto;
  position: relative;
}
#award h3 {
  margin: 0 auto 5%;
  padding: 0 0;
  width: 32.1%;
}
#award .award ul {
  margin: 0 auto;
  width: 82%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#award .award li {
  padding: 0 6%;
}
#award .img04 {
  margin: 0 auto;
  width: 98.3%;
}
@media screen and (max-width:960px) {
  #award {
    padding: 4% 0 1.7%;
    max-width: inherit;
    width: 90%;
    border: 4px solid #c5a807;
    outline: 1px solid #c5a807;
    outline-offset: -9px;
  }
  #award .img04 {
    width: 96.5%;
  }
  #award h2 {
    width: 28.1%;
  }
  #award h3 {
    width: 41.5%;
  }
  #award .award ul {
    width: 86%;
  }
  #award .award li {
    padding: 0 2%;
  }
}
/*------------------------------
#media
------------------------------*/
#media {
  text-align: center;
  margin: 0 auto 3%;
  padding: 4% 0;
  max-width: 960px;
  border: 7px solid #c5a807;
  outline: 2px solid #c5a807;
  outline-offset: -15px;
}
#media h2 {
  margin: 0 auto 3%;
  width: 18.9%;
}
#media .media {
  margin: 0 auto;
  position: relative;
}
#media h3 {
  margin: 0 auto 5%;
  padding: 0 0;
  width: 49.5%;
}
#media .media ul {
  margin: 0 auto;
  width: 82%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
#media .media li {}
#media .book01 {
  margin: 3% -4% 0;
}
#media .book02 {
  margin: 0 -4%;
}
#media .book03 {
  margin: 4.5% -4% 0;
  z-index: 1;
}
#media .book04 {
  margin: 0 -4%;
}
#media .book05 {
  margin: 5.5% -4% 0;
  z-index: -1;
}
#media .book06 {
  margin: 0 -4%;
  z-index: -2;
}
@media screen and (max-width:960px) {
  #media {
    max-width: inherit;
    width: 90%;
    border: 4px solid #c5a807;
    outline: 1px solid #c5a807;
    outline-offset: -9px;
  }
  #media h2 {
    width: 24.5%;
  }
  #media h3 {
    width: 64.1%;
  }
  #media .media ul {
    width: 86%;
    flex-wrap: wrap;
  }
  #media .media li {
    width: 41.3%;
  }
  #media .book01 {
    margin: 3% -4% 0;
  }
  #media .book02 {
    margin: 0 -4%;
  }
  #media .book03 {
    margin: 4.5% -4% 0;
    z-index: 1;
  }
  #media .book04 {
    margin: -25% -4% 0;
  }
  #media .book05 {
    margin: -25% -4% 0;
    z-index: 2;
  }
  #media .book06 {
    margin: -25% -4% 0;
    z-index: 1;
  }
}
/*------------------------------
#shop
------------------------------*/
#shop {
  text-align: center;
  margin: 0 auto 10%;
  padding: 4% 0;
  max-width: 960px;
  border: 7px solid #c5a807;
  outline: 2px solid #c5a807;
  outline-offset: -15px;
}
#shop h2 {
  margin: 0 auto 3%;
  width: 16.5%;
}
#shop .shop {
  margin: 0 auto;
  position: relative;
}
#shop h3 {
  margin: 0 auto 5%;
  padding: 0 0;
  width: 41.3%;
}
#shop .img01 {
  margin: 0 auto 1%;
  width: 64.2%;
}
#shop .txt01 {
  font-size: 3.3rem;
  font-weight: 500;
}
@media screen and (max-width:960px) {
  #shop {
    max-width: inherit;
    width: 90%;
    border: 4px solid #c5a807;
    outline: 1px solid #c5a807;
    outline-offset: -9px;
  }
  #shop h2 {
    width: 21.3%;
  }
  #shop h3 {
    width: 53.3%;
  }
  #shop .img01 {
    width: 88%;
  }
  #shop .txt01 {
    font-size: 2.3rem;
  }
}
/*------------------------------
#instagram
------------------------------*/
#instagram {
  text-align: center;
  margin: 0 auto;
  padding: 5% 0 10%;
  width: 100%;
  background: url("../img/instagram_bg.png") center top no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#instagram h2 {
  text-align: center;
  margin: 0 auto 2%;
  max-width: 960px;
}
#instagram h2 img {
  text-align: center;
  margin: 0 auto;
  width: 28.6%;
}
#instagram .instagram {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}
#instagram h3 {
  text-align: center;
  margin: 0 auto 7%;
  padding: 0 0;
  width: 29.4%;
  position: relative;
}
#instagram h3 .romaji {
  width: 76%;
  position: absolute;
  right: -73%;
  bottom: -120%;
}
#instagram .instagram ul {
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#instagram .instagram li {
  margin: 0 auto 2%;
  width: 31.2%;
  position: relative;
}
#instagram .instagram li:after {
  content: '';
  display: block;
  width: 19.7%;
  height: 19.7%;
  background: url(../img/instagram_icon.png) no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  bottom: 0;
}
@media screen and (max-width:960px) {
  #instagram .instagram {
    max-width: inherit;
    width: 90%;
  }
  #instagram h2 img {
    width: 36.9%;
  }
  #instagram h3 {
    width: 38%;
  }
  #instagram h3 .romaji {
    width: 98%;
    right: -95%;
    bottom: -160%;
  }
}
/*------------------------------
#reason
------------------------------*/
#reason {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0 10%;
  width: 100%;
  background: #f3e2e2;
}
#reason h2 {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
  position: relative;
}
#reason h2 img {
  text-align: center;
  margin: 0 auto;
  width: 66.4%;
}
#reason h2 span {
  position: absolute;
  left: 31%;
  top: 52.5%;
  width: 20%;
}
#reason h2 .romaji {
  width: 23.4%;
  position: absolute;
  right: 9%;
  bottom: -5%;
}
#reason .reason01, #reason .reason02, #reason .reason03, #reason .reason04 {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
}
#reason .reason04 {
  margin: 0 auto 0;
}
#reason .reason01 h3, #reason .reason02 h3, #reason .reason03 h3, #reason .reason04 h3 {
  text-align: center;
  margin: 0 auto 2%;
  padding: 0 0;
  width: 60.9%;
}
#reason .reason01 h3 span img, #reason .reason02 h3 span img, #reason .reason03 h3 span img, #reason .reason04 h3 span img {
  text-align: center;
  margin: 0 auto 2%;
  width: 10%;
}
#reason .img {
  margin: 0 auto 2%;
}
#reason .txt {
  text-align: left;
  margin: 0 auto 0 0;
  font-size: 2.2rem;
}
#reason .txt span {
  padding: 1% 1%;
  /*background: #fff;*/
  color: #cf384d;
  font-size: 2.5rem;
  font-family: 'huiji';
}
@media screen and (max-width:960px) {
  #reason .reason01, #reason .reason02, #reason .reason03, #reason .reason04 {
    max-width: inherit;
    width: 90%;
  }
  #reason h2 {
    margin: 0 auto 8%;
  }
  #reason h2 img {
    width: 85.7%;
  }
  #reason h2 span {
    left: 28%;
  }
  #reason h2 .romaji {
    width: 28.4%;
    right: -1%;
    bottom: -19%;
  }
  #reason .reason01 h3, #reason .reason02 h3, #reason .reason03 h3, #reason .reason04 h3 {
    width: 80.8%;
  }
  #reason .reason01 h3 span img, #reason .reason02 h3 span img, #reason .reason03 h3 span img, #reason .reason04 h3 span img {
    width: 10%;
  }
  #reason .txt span {
    background: #fff;
  }
}
/*------------------------------
#message
------------------------------*/
#message {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0 0;
  background: url(../img/message_bg.jpg) center top no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  width: 100%;
  height: 100%;
}
#message::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(120, 28, 28, 0.64);
}
#message h2 {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
  position: relative;
}
#message h2 img {
  text-align: left;
  margin: 0 auto 0 0;
  width: 39.1%;
}
#message .message {
  text-align: center;
  margin: 0 auto;
  padding: 0 0 10%;
  max-width: 960px;
  position: relative;
}
#message .message .bg02 {
  width: 0.4%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5.6%;
  z-index: 1;
}
#message h3 {
  text-align: center;
  margin: 0 0 5%;
  padding: 0 0;
  width: 61.1%;
}
#message .txt {
  text-align: left;
  margin: 0 auto 5% 0;
  font-size: 3.0rem;
  color: #fff;
}
#message .txt:last-child {
  margin: 0 auto 5%;
}
#message .txt span {
  padding: 1% 1%;
  background: rgba(255, 255, 255, 0.75);
  color: #cf384d;
  font-size: 3.3rem;
  font-family: 'huiji';
}
@media screen and (max-width:960px) {
  #message .message {
    max-width: inherit;
    width: 90%;
  }
  #message .message .bg02 {
    bottom: -4.3%;
  }
  #message h2 {
    max-width: inherit;
    width: 90%;
  }
  #message h2 img {
    width: 50.5%;
  }
  #message h3 {
    width: 78.9%;
  }
  #message .txt {
    font-size: 2.4rem;
  }
  #message .txt span {
    font-size: 2.7rem;
  }
}
/*------------------------------
#hint
------------------------------*/
#hint {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0 0;
  width: 100%;
  background: #d2c4b8;
  position: relative;
}
#hint:after {
  content: '';
  display: block;
  width: 100%;
  height: 20%;
  background: url("../img/hint_bg.jpg") center top no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -20%;
}
#hint h2 {
  display: none;
}
#hint .hint {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}
#hint .hint .romaji {
  width: 26.5%;
  position: absolute;
  right: 4%;
  top: 29%;
}
#hint h3 {
  text-align: center;
  margin: 0 auto;
  padding: 0 0;
  width: 60.3%;
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
}
#hint h3 span img {
  text-align: center;
  margin: 5% auto 0;
  width: 67%;
}
#hint .img01 {
  margin: 0 auto 2%;
}
#hint .img02 {
  text-align: center;
  margin: 0 auto;
  width: 4.9%;
  position: absolute;
  left: 0;
  right: 0;
  top: 7%;
}
#hint .txt {
  text-align: center;
  margin: 0 auto 2%;
  font-size: 3.1rem;
}
#hint .img03 {
  margin: 0 auto;
  width: 39.5%;
}
@media screen and (max-width:960px) {
  #hint .hint {
    max-width: inherit;
    width: 90%;
  }
  #hint {
    padding: 10% 0 5%;
  }
  #hint .hint .romaji {
    width: 36.5%;
    right: -4%;
    top: 29%;
  }
  #hint h3 {
    width: 88%;
  }
  #hint .img02 {
    width: 7%;
  }
  #hint .txt {
    font-size: 2.7rem;
  }
  #hint .img03 {
    width: 56.4%;
  }
}
/*------------------------------
#kobo
------------------------------*/
#kobo {
  text-align: center;
  margin: 10% auto 0;
  width: 100%;
  position: relative;
}
/*#kobo:after {
  content: '';
  display: block;
  max-width: 100%;
  height: 10%;
  background: url("../img/kobo_bg.png") center top no-repeat;
  background-size: 5%;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -12%;
}*/
#kobo h2 {
  text-align: center;
  margin: 0 auto 7%;
  max-width: 960px;
  position: relative;
}
#kobo h2 img {
  text-align: center;
  margin: 0 auto;
  width: 55.6%;
}
#kobo h2 span {
  width: 33%;
  position: absolute;
  right: 12.7%;
  top: -37%;
  mix-blend-mode: multiply;
}
#kobo .kobo {
  text-align: center;
  margin: 0 auto 5%;
  padding: 3% 0 0;
  max-width: 960px;
  border: 4px solid #d19090;
  border-radius: 20px;
  position: relative;
}
#kobo h3 {
  display: none;
}
#kobo .kobo .img01 {
  padding: 0 2%;
  width: 28%;
  background: #fff;
  position: absolute;
  left: 3%;
  top: -4%;
}
#kobo .txt {
  text-align: left;
  margin: 0 auto 2%;
  width: 90%;
  font-size: 3.1rem;
}
#kobo .kobo ul {
  text-align: center;
  margin: 0 auto 5%;
  width: 69.8%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#kobo .kobo li {
  width: 37.3%;
}
#kobo .kobo .img04 {
  text-align: center;
  margin: 0 auto;
  padding: 4% 0;
  background: #cf384d;
  border-radius: 0 0 16px 16px;
}
#kobo .kobo .img04 img {
  text-align: center;
  margin: 0 auto;
  width: 53.1%;
}
#kobo .kobo02 {
  text-align: center;
  margin: 0 auto;
  padding: 0 0;
  max-width: 960px;
  position: relative;
}
#kobo .img05 {
  text-align: center;
  margin: 0 auto 10%;
  width: 33.5%;
}
#kobo .kobo02 .bg {
  width: 5.9%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -183.3%;
  z-index: 1;
}
#kobo .kobo02 .romaji {
  width: 30.5%;
  position: absolute;
  right: 11%;
  bottom: -171%;
  z-index: 1;
}
@media screen and (max-width:960px) {
  #kobo {
    margin: 15% auto 0;
  }
  #kobo .kobo {
    max-width: inherit;
    width: 90%;
    margin: 0 auto 10%;
    padding: 6% 0 0%
  }
  #kobo .kobo02 .bg {
    bottom: -145.3%;
  }
  #kobo .kobo02 .romaji {
    width: 36.5%;
    right: 1%;
    bottom: -136%;
  }
  #kobo h2 {
    margin: 0 auto 10%;
  }
  #kobo h2 img {
    width: 71.8%;
  }
  #kobo h2 span {
    right: 6.7%;
  }
  #kobo .kobo .img01 {
    width: 40%;
  }
  #kobo .txt {
    font-size: 2.4rem;
  }
  #kobo .kobo ul {
    width: 80%;
  }
  #kobo .kobo li {
    width: 45%;
  }
  #kobo .kobo .img04 img {
    width: 68.5%;
  }
  #kobo .img05 {
    width: 43.3%
  }
}
/*------------------------------
#mother
------------------------------*/
#mother {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0 0;
  width: 100%;
  background: #dfdcdc;
}
#mother .h2_01 {
  text-align: center;
  margin: 0 auto 1%;
  max-width: 960px;
}
#mother .h2_01 img {
  text-align: center;
  margin: 0 auto;
  width: 38.2%;
}
#mother h2 {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
  position: relative;
}
#mother h2 img {
  text-align: center;
  margin: 0 auto;
  width: 54.9%;
}
#mother h2 span {
  margin: auto;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -23%;
  mix-blend-mode: multiply;
}
#mother .mother01 {
  text-align: center;
  margin: 0 auto 8%;
  padding: 5% 0 8%;
  max-width: 960px;
  background: #fff;
  position: relative;
}
#mother .mother01 .img07 {
  width: 0.4%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6.1%;
  z-index: 1;
}
#mother .mother01 h3 {
  display: none;
}
#mother .mother01 .img01 {
  text-align: center;
  margin: 0 auto 3%;
  width: 69.4%;
}
#mother .mother01 .img02 {
  text-align: center;
  margin: 0 auto;
  width: 65.3%;
}
#mother .mother02 {
  text-align: center;
  margin: 0 auto;
  padding: 0 0;
  width: 100%;
  position: relative;
}
#mother .mother02 .img03 {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
}
#mother .mother02 .img03 img {
  text-align: center;
  margin: 0 auto 3%;
  width: 44.4%;
}
#mother .mother02 .img04 {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
}
#mother .mother02 .img04 img {
  text-align: center;
  margin: 0 auto;
  width: 67.3%;
}
#mother .mother02 .img05 {
  width: 100%;
}
#mother .mother02 .img06_bg {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  mix-blend-mode: multiply;
}
#mother .mother02 .img06_bg img {
  text-align: center;
  margin: 0 auto;
  width: 69.7%;
}
#mother .mother02 .img06 {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8.2%;
}
#mother .mother02 .img06 img {
  text-align: center;
  margin: 0 auto;
  width: 64.1%;
}
@media screen and (max-width:960px) {
  #mother .mother01 {
    max-width: inherit;
    width: 90%;
    margin: 0 auto 12%;
    padding: 7% 0 10%;
  }
  #mother h2 {
    margin: 0 auto 9%;
  }
  #mother .h2_01 {
    margin: 0 auto 3%;
  }
  #mother .h2_01 img {
    text-align: center;
    margin: 0 auto;
    width: 49.4%;
  }
  #mother h2 img {
    width: 69.6%;
  }
  #mother .mother01 .img01 {
    margin: 0 auto 6%;
    width: 84%;
  }
  #mother .mother01 .img02 {
    width: 84.3%;
  }
  #mother .mother02 .img03 img {
    width: 51%;
  }
  #mother .mother02 .img04 img {
    margin: 4% auto 5%;
    width: 75.6%;
  }
  #mother .mother02 .img06_bg img {
    width: 82%;
  }
  #mother .mother02 .img06 img {
    width: 75.6%;
  }
  #mother .mother01 .img07 {
    bottom: -5.4%;
  }
}
/*------------------------------
#tennen
------------------------------*/
#tennen {
  text-align: center;
  margin: 0 auto;
  padding: 7% 0 3%;
  width: 100%;
  background: #F0D9D9;
  position: relative;
}
#tennen:after {
  content: '';
  display: block;
  width: 100%;
  height: 20%;
  background: url("../img/tennen_arrow02.png") center top no-repeat, url("../img/tennen_bg.png") center top no-repeat;
  background-size: 2.5%, contain;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -20%;
}
#tennen h2 {
  text-align: center;
  margin: 0 auto 4%;
  max-width: 960px;
  position: relative;
}
#tennen h2 img {
  text-align: center;
  margin: 0 auto;
  width: 67.6%;
}
#tennen .tennen01 {
  text-align: center;
  margin: 0 auto 3%;
  padding: 0%;
  max-width: 960px;
}
#tennen .tennen01 h3 {
  display: none;
}
#tennen .balloon {
  text-align: center;
  margin: 0 auto 5%;
  padding: 3% 4%;
  width: 84.7%;
  position: relative;
  display: inline-block;
  background: #FFF;
  border: solid 4px #d19090;
  border-radius: 20px;
}
#tennen .balloon:before {
  content: "";
  position: absolute;
  bottom: -52px;
  left: 50%;
  margin-left: -20px;
  border: 28px solid transparent;
  border-top: 28px solid #FFF;
  z-index: 2;
}
#tennen .balloon:after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: 50%;
  margin-left: -22px;
  border: 30px solid transparent;
  border-top: 30px solid #d19090;
  z-index: 1;
}
#tennen .box01 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
#tennen .img01 {}
#tennen .img02 {
  margin: 0 3%;
}
#tennen .img03 {}
#tennen .img04 {
  text-align: center;
  margin: 0 auto;
  width: 37%;
}
#tennen .img05 {
  text-align: center;
  margin: 0 auto 3%;
  width: 70.3%;
}
#tennen .img06 {
  text-align: center;
  margin: 0 auto 2%;
  padding: 0 0 3%;
  width: 74.5%;
  position: relative;
}
#tennen .img06 span {
  width: 78%;
  mix-blend-mode: multiply;
  position: absolute;
  left: -3%;
  bottom: 8%;
}
#tennen .txt01 {
  text-align: left;
  margin: 0 auto 0 0;
  font-size: 3.0rem;
}
#tennen .tennen02 {
  text-align: center;
  margin: 0 auto 5%;
  padding: 0%;
  max-width: 960px;
  position: relative;
}
#tennen .tennen02 h3 {
  display: none;
}
#tennen .img07 {}
#tennen .img08 {
  text-align: center;
  margin: 0 auto;
  width: 56.5%;
  position: absolute;
  left: 0;
  right: 0;
  top: 5%;
}
#tennen .arrow01 {
  text-align: center;
  margin: 0 auto;
  width: 17.4%;
  position: absolute;
  right: 25%;
  top: 28%;
}
#tennen .tennen03 {
  text-align: center;
  margin: 0 auto;
  padding: 0%;
  max-width: 960px;
}
#tennen .tennen03 h3 {
  display: none;
}
#tennen .img10 {
  margin: 0 auto;
  width: 49.7%;
  position: relative;
}
#tennen .img10 span {
  width: 97%;
  mix-blend-mode: multiply;
  position: absolute;
  left: -4%;
  bottom: -17%;
}
#tennen .movie {
  margin: 0 auto;
}
/*
#tennen .box02 {
  text-align: center;
  margin: 0 auto 3%;
  width: 87.2%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
#tennen .img11, #tennen .img12, #tennen .img13, #tennen .img14, #tennen .img15 {
  width: 18%;
}
*/
#tennen .txt02 {
  text-align: right;
  margin: 0 0 3% auto;
  font-size: 2.0rem;
}
#tennen .img16 {
  text-align: center;
  margin: 0 auto 5%;
  width: 62.8%;
}
#tennen .img17 {
  text-align: center;
  margin: 0 auto;
  width: 15.5%;
}
@media screen and (max-width:960px) {
  #tennen .tennen01, #tennen .tennen03 {
    max-width: inherit;
    width: 90%;
  }
  #tennen h2 {
    margin: 0 auto 8%;
  }
  #tennen h2 img {
    width: 72.5%;
  }
  #tennen .balloon {
    margin: 0 auto 10%;
    padding: 3% 4%;
    width: 100%;
  }
  #tennen .balloon:before {
    bottom: -44px;
    left: 48%;
    margin-left: -20px;
    border: 28px solid transparent;
    border-top: 24px solid #FFF;
  }
  #tennen .balloon:after {
    bottom: -48px;
    left: 49.5%;
    margin-left: -23px;
    border: 26px solid transparent;
    border-top: 22px solid #d19090;
  }
  #tennen .img05 {
    width: 78.8%;
  }
  #tennen .img06 {
    width: 83.3%;
  }
  #tennen .txt01 {
    font-size: 2.4rem;
  }
  #tennen .img08 {
    width: 73.2%;
  }
  #tennen .arrow01 {
    width: 22.4%;
    right: 18%;
  }
  #tennen .img10 {
    width: 64.2%;
  }
  #tennen .txt02 {
    font-size: 1.8rem;
  }
  #tennen .img16 {
    margin: 0 auto 5%;
    width: 79.9%;
  }
  #tennen .img17 {
    width: 20%;
  }
  #tennen:after {
    background: url("../img/tennen_arrow02.png") center top no-repeat, url("../img/tennen_bg_sp.png") center top no-repeat;
    background-size: 4.5%, contain;
  }
}
/*------------------------------
#component
------------------------------*/
#component {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0 0;
  width: 100%;
  background: url("../img/component_bg.png") center top no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#component h2 {
  display: none;
}
#component .component {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
  position: relative;
}
#component h3 {
  display: none;
}
#component .img01 {
  text-align: center;
  margin: 0 auto 5%;
  width: 73.8%;
}
#component .txt {
  text-align: center;
  margin: 0 auto 5%;
  padding: 3% 0;
  background: #fff;
  border: 13px solid #c5a807;
  color: #cf384d;
  font-size: 4.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
#component .img02_bg {
  text-align: center;
  margin: 0 auto;
  width: 70.5%;
  mix-blend-mode: multiply;
}
#component .component .img02 {
  margin: auto;
  width: 62.7%;
  position: absolute;
  left: 0;
  right: 0;
  top: 77.5%;
}
@media screen and (max-width:960px) {
  #component {
    padding: 20% 0 0;
  }
  #component .component {
    max-width: inherit;
    width: 90%;
  }
  #component .img01 {
    margin: 0 auto 12%;
    width: 87.9%;
  }
  #component .txt {
    margin: 0 auto 10%;
    font-size: 3.0rem;
    font-weight: 600;
    border: 8px solid #c5a807;
  }
  #component .img02_bg {
    width: 83.8%;
  }
  #component .component .img02 {
    width: 74.6%;
    top: 82%;
  }
}
/*------------------------------
#demo
------------------------------*/
#demo {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0 0;
  background: url(../img/demo_bg.jpg) center top no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100%;
}
#demo::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(120, 28, 28, 0.64);
}
#demo h2 {
  text-align: center;
  margin: 0 auto 4%;
  max-width: 960px;
  position: relative;
}
#demo h2 img {
  margin: 0 23% 0 auto;
  ;
  width: 20.5%;
}
#demo .demo {
  text-align: center;
  margin: 0 auto;
  padding: 0 0 10%;
  max-width: 960px;
  position: relative;
}
#demo .demo .bg02 {
  width: 0.4%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -19%;
  z-index: 1;
}
#demo h3 {
  display: none;
}
#demo .txt {
  text-align: right;
  margin: 0 0 0 auto;
  font-size: 3.5rem;
  color: #fff;
}
#demo .img01 {
  margin: 0 0 0 auto;
  width: 65%;
}
@media screen and (max-width:960px) {
  #demo {
    background: url(../img/demo_bg_sp.jpg) center top no-repeat;
    background-size: cover;
  }
  #demo .demo .bg02 {
    bottom: -10.6%;
  }
  #demo .demo {
    max-width: inherit;
    width: 90%;
  }
  #demo .img01 {
    margin: 0 0 0 auto;
    width: 44.4%;
  }
  #demo .txt {
    margin: 0 0 5% auto;
    font-size: 2.5rem;
    line-height: 1.5;
  }
  #demo h2 img {
    margin: 0 28% 0 auto;
  }
}
/*------------------------------
#fruits
------------------------------*/
#fruits {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0 0;
  width: 100%;
  background: url("../img/fruits_bg01.jpg") center top no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
/*
#fruits:after {
  content: '';
  display: block;
  max-width: 100%;
  height: 10%;
  background: url("../img/fruits_bg02.png") center top no-repeat;
  background-size: 5%;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -7.4%;
}
*/
#fruits h2 {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
  position: relative;
}
#fruits h2 img {
  text-align: center;
  margin: 0 auto;
  width: 62.3%;
}
#fruits h2 span {
  margin: auto;
  width: 48%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10%;
  mix-blend-mode: multiply;
}
#fruits .fruits {
  text-align: center;
  margin: 0 auto;
  padding: 0 0 10%;
  max-width: 960px;
  position: relative;
}
#fruits h3 {
  display: none;
}
#fruits .img01 {
  text-align: center;
  margin: 0 auto 5%;
  padding: 0 0;
  width: 20.2%;
}
#fruits .img02 {
  text-align: center;
  margin: 0 auto 2%;
  padding: 0 0;
  width: 13.5%;
}
#fruits .img03 {
  text-align: center;
  margin: 0 auto 5%;
  padding: 0 0;
  width: 68.5%;
}
#fruits .box {
  text-align: center;
  margin: auto;
  width: 100%;
  position: relative;
}
#fruits .box .img04_bg {
  margin: auto;
  width: 69.4%;
  mix-blend-mode: multiply;
}
#fruits .box .img04 {
  margin: auto;
  width: 64.2%;
  position: absolute;
  left: 0;
  right: 0;
  top: 17%;
}
#fruits .fruits .bg02 {
  width: 5.9%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3.1%;
  z-index: 1;
}
@media screen and (max-width:960px) {
  #fruits .fruits {
    max-width: inherit;
    width: 90%;
  }
  #fruits .fruits .bg02 {
    bottom: -2.5%;
  }
  #fruits h2 {
    margin: 0 auto 8%;
  }
  #fruits h2 img {
    width: 80.5%;
  }
  #fruits .img01 {
    margin: 0 auto 8%;
    width: 26%;
  }
  #fruits .img02 {
    margin: 0 auto 5%;
    width: 17.4%;
  }
  #fruits .img03 {
    margin: 0 auto 8%;
    width: 88.4%;
  }
  #fruits .box .img04_bg {
    width: 89.6%;
  }
  #fruits .box .img04 {
    width: 82.9%;
  }
}
/*------------------------------
#prepare
------------------------------*/
#prepare {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0;
  width: 100%;
  background: #d2c4b8;
}
#prepare h2 {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
  position: relative;
}
#prepare h2 img {
  text-align: center;
  margin: 0 auto;
  width: 62.3%;
}
#prepare h2 span {
  width: 51%;
  position: absolute;
  left: 22%;
  top: 22%;
  mix-blend-mode: multiply;
}
#prepare .prepare01 {
  text-align: center;
  margin: 0 auto 3%;
  padding: 0 0;
  max-width: 960px;
}
#prepare .prepare01 h3 {
  display: none;
}
#prepare .txt01 {
  text-align: left;
  margin: 0 auto 0 0;
  font-size: 3.0rem;
}
#prepare .txt01 span {
  /*background: #d19090;*/
  color: #fff;
}
#prepare .prepare02 {
  text-align: center;
  margin: 0 auto 3%;
  padding: 0 0;
  max-width: 960px;
}
#prepare .prepare02 h3 {
  display: none;
}
/*slick*/
#prepare .slider .bg {
  text-align: center;
  margin: 0 auto;
  padding: 0.2% 0 0;
  background: #fff;
}
#prepare .slider .slid_no {
  text-align: center;
  margin: 0 auto;
  padding: 1% 2%;
  background: #bcbcbc;
  color: #fff;
  font-size: 3.0rem;
  border-radius: 30px;
  letter-spacing: 0.1em;
}
#prepare .slider .slid_ttl {
  text-align: center;
  margin: 0 auto;
  color: #cf384d;
  font-size: 6.4rem;
  font-weight: 500;
  line-height: 1.5;
}
#prepare .slider .slid_ttl span {
  font-size: 5.0rem;
}
#prepare .slider .slid_img {
  text-align: center;
  margin: 0 auto 2%;
  width: 87.2%;
}
#prepare .slider .slid_txt {
  text-align: left;
  margin: 0 auto 5%;
  font-size: 3.0rem;
  width: 87.2%;
  line-height: 1.5;
}
#prepare .slider .slid_txt span {
  background: #c5a807;
  color: #fff;
}
/*slick*/
.slick-slide {
  transition: .3s ease;
  transform: scale(.85);
}
.slick-slide:not(.slick-current) {
  opacity: .5;
}
.slick-current {
  transform: scale(1);
}
.slick-prev:before, .slick-next:before {
  color: #cf384d !important;
}
.slick-prev {
  left: 13.5% !important;
  z-index: 999;
}
.slick-next {
  right: 13.5% !important;
  z-index: 999;
}
#prepare .prepare03 {
  text-align: center;
  margin: 0 auto 5%;
  padding: 2.5% 2.5%;
  max-width: 960px;
  background: #d19090;
  border-radius: 2em;
}
#prepare .prepare03 dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}
#prepare .prepare03 dt {
  width: 45.7%;
}
#prepare .prepare03 dd {
  width: 50.5%;
}
#prepare .prepare03 h3 {
  text-align: left;
  margin: 0 auto 2% 0;
  font-size: 3.2rem;
  color: #fff;
  font-weight: 400;
  line-height: 1;
}
#prepare .img02 {
  margin: 0 auto 5% 0;
}
#prepare .img02 img {
  width: 32%;
}
#prepare .txt02 {
  text-align: left;
  margin: 0 auto 0 0;
  font-size: 3.0rem;
  color: #fff;
  line-height: 1.5;
}
#prepare .prepare04 {
  text-align: center;
  margin: 0 auto;
  padding: 0 0;
  max-width: 960px;
}
#prepare .prepare04 h3 {
  text-align: center;
  margin: 0 auto 0;
  width: 51.5%;
  position: relative;
}
#prepare .prepare04 h3 span {
  margin: auto;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4%;
  mix-blend-mode: multiply;
}
@media screen and (max-width:960px) {
  #prepare .prepare01, #prepare .prepare02, #prepare .prepare03, #prepare .prepare04 {
    max-width: inherit;
    width: 90%;
  }
  #prepare h2 img {
    width: 77.0%;
  }
  #prepare h2 span {
    width: 53%;
    left: 20%;
  }
  #prepare .txt01 {
    margin: 0 auto 8% 0;
    font-size: 2.5rem;
    line-height: 1.8;
  }
  #prepare .txt01 span {
    background: #d19090;
  }
  #prepare .slider .slid_no {
    font-size: 2rem;
  }
  #prepare .slider .slid_ttl {
    font-size: 2.8rem;
  }
  #prepare .slider .slid_ttl span {
    font-size: 2.4rem;
  }
  #prepare .slider .slid_txt {
    font-size: 2.0rem;
  }
  #prepare .prepare03 {
    margin: 0 auto 10%;
    padding: 5.5% 5.5%;
  }
  #prepare .prepare03 dt {
    width: 43.7%;
  }
  #prepare .prepare03 dd {
    width: 52.5%;
  }
  #prepare .prepare03 h3 {
    margin: 0 auto 5% 0;
    font-size: 2.5rem;
  }
  #prepare .img02 img {
    width: 55%;
  }
  #prepare .txt02 {
    font-size: 2.5rem;
  }
  #prepare .prepare04 h3 {
    width: 54.6%;
  }
}
/*------------------------------
#delicious
------------------------------*/
#delicious {
  text-align: center;
  margin: 0 auto;
  padding: 0 0 5%;
  width: 100%;
  background: url("../img/delicious_bg02.png") center bottom no-repeat;
  background-size: cover;
}
#delicious h2 {
  display: none;
}
#delicious .img01 {
  text-align: center;
  margin: 0 auto;
  padding: 0 0 5%;
  background: #fff;
}
#delicious .delicious01 {
  text-align: center;
  margin: 0 auto;
  padding: 0 0 3%;
  width: 100%;
  background: #fff url("../img/delicious_bg01.png") center bottom no-repeat;
  background-size: cover;
}
#delicious .delicious01 h3 {
  text-align: center;
  margin: 0 auto 7%;
  max-width: 960px;
}
#delicious .delicious01 h3 img {
  text-align: center;
  margin: 0 auto;
  width: 59.7%;
}
#delicious .box01 {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}
#delicious .box01 .romaji01 {
  width: 15.3%;
  position: absolute;
  right: 12%;
  top: -15%;
}
#delicious .img03 {
  margin: 0 0 3% auto;
  width: 58.5%;
}
#delicious .img04 {
  margin: 0 0 3% auto;
  width: 53.2%;
}
#delicious .img05 {
  margin: 0 0 30% auto;
  width: 44.8%;
}
#delicious .img06 {
  text-align: center;
  margin: 0 auto;
  width: 16.1%;
}
#delicious .delicious02 {
  text-align: center;
  margin: 0 auto;
  padding: 7% 0 0;
  max-width: 960px;
  position: relative;
}
#delicious .delicious02 .romaji02 {
  width: 31.9%;
  position: absolute;
  left: 8%;
  top: 3%;
}
#delicious .delicious02 h3 {
  text-align: center;
  margin: 0 auto 5%;
  width: 56.9%;
  position: relative;
}
#delicious .delicious02 h3 span {
  width: 62%;
  position: absolute;
  left: 0;
  bottom: -15%;
  mix-blend-mode: multiply;
}
#delicious dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
}
#delicious dt {
  margin: 0 5% 0 0;
  width: 24%;
}
#delicious dd {
  padding: 15% 0 0;
  width: 37.6%;
  position: relative;
}
#delicious .img09 {
  text-align: left;
  margin: 0 auto 15% 0;
  width: 50%;
}
#delicious .img10 {
  text-align: left;
  margin: 0 auto 0 0;
}
#delicious dd .txt {
  text-align: left;
  margin: 0 auto 0 0;
  font-size: 1.6rem;
  line-height: 1.5;
  position: absolute;
  left: 5%;
  bottom: 5%;
}
@media screen and (max-width:960px) {
  #delicious {
    background-size: 160%;
  }
  #delicious .delicious01 {
    background-size: 212%;
  }
  #delicious .box01 {
    max-width: inherit;
    width: 90%;
  }
  #delicious .box01 .romaji01 {
    width: 21.3%;
    right: -4%;
    top: -14%;
  }
  #delicious .img01 {
    padding: 0 0 8%;
  }
  #delicious .img03 {
    margin: 0 0 5% auto;
    width: 75.9%;
  }
  #delicious .img04 {
    margin: 0 0 5% auto;
    width: 68.6%;
  }
  #delicious .img05 {
    margin: 0 0 53% auto;
    width: 57.9%;
  }
  #delicious .delicious01 h3 {
    margin: 0px auto 12%;
  }
  #delicious .delicious01 h3 img {
    width: 65.8%;
  }
  #delicious .img06 {
    width: 20.8%;
  }
  #delicious .delicious02 {
    padding: 10% 0 0;
  }
  #delicious .delicious02 .romaji02 {
    width: 40.9%;
    left: 2%;
    top: 0%;
  }
  #delicious .delicious02 h3 {
    margin: 0 auto 10%;
    width: 73.4%;
  }
  #delicious dt {
    width: 30%;
  }
  #delicious dd {
    width: 50%;
  }
}
/*------------------------------
#howtodrink
------------------------------*/
#howtodrink {
  text-align: center;
  margin: 0 auto;
  padding: 7% 0;
  width: 100%;
  background: -moz-linear-gradient(top, #e9cbcb 1%, #FFF);
  background: -webkit-linear-gradient(top bottom, #e9cbcb 1%, #FFF);
  background: linear-gradient(to bottom, #e9cbcb 1%, #FFF);
}
#howtodrink h2 {
  text-align: center;
  margin: 0 auto 7%;
  max-width: 960px;
  position: relative;
}
#howtodrink h2 img {
  text-align: center;
  margin: 0 auto;
  width: 67.9%;
}
#howtodrink h2 .round01 {
  width: 15.3%;
  position: absolute;
  left: 25%;
  top: -6%;
  mix-blend-mode: multiply;
}
#howtodrink h2 .round02 {
  width: 15.3%;
  position: absolute;
  left: 32%;
  bottom: -7%;
  mix-blend-mode: multiply;
}
#howtodrink .howtodrink {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}
#howtodrink .howtodrink .romaji {
  width: 31.9%;
  position: absolute;
  right: 12%;
  top: -6.8%;
}
#howtodrink h3 {
  text-align: center;
  margin: 0 auto 2%;
}
#howtodrink .txt01 {
  text-align: left;
  margin: 0 auto 5% 0;
  font-size: 3.0rem;
}
/*
#howtodrink .txt01 span {
  background: linear-gradient(transparent 70%, #e5c1c1 70%);
}*/
#howtodrink .box {
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#howtodrink .box dl {
  text-align: center;
  margin: 0 auto 2%;
  padding: 2% 2%;
  width: 48%;
  background: #fff;
  border: 12px solid #cf384d;
}
#howtodrink dt {
  text-align: center;
  margin: 0 auto;
  color: #cf384d;
  font-size: 4.0rem;
  font-weight: 500;
  letter-spacing: 0.2em;
}
#howtodrink dt span {
  font-size: 3.1rem;
}
#howtodrink dd.img {
  text-align: center;
  margin: 0 auto 4%;
}
#howtodrink dd.material {
  margin: 0 auto 2% 0;
  padding: 2% 2%;
  border: 5px solid #c5a807;
  font-size: 2.1rem;
  line-height: 1.5;
}
#howtodrink dd.howtomake {
  text-align: left;
  margin: 0 auto 0 0;
  font-size: 2.6rem;
  line-height: 1.5;
}
#howtodrink ul {
  margin: 0 auto;
  padding: 5% 5%;
  background: #f6e9e9;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#howtodrink li {
  margin: 0 auto 2%;
  width: 48%;
}
.modal-wrapper_howtodrink .modal-window dl {
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width:960px) {
  #howtodrink .howtodrink {
    max-width: inherit;
    width: 90%;
  }
  #howtodrink .howtodrink .romaji {
    width: 45.9%;
    right: -4%;
    top: -8.8%;
  }
  #howtodrink h2 {
    margin: 0 auto 13%;
  }
  #howtodrink h2 img {
    width: 87.7%;
  }
  #howtodrink h2 .round01 {
    left: 20%;
  }
  #howtodrink h2 .round02 {
    left: 28%;
  }
  #howtodrink .txt01 {
    font-size: 2.6rem;
  }
  #howtodrink .txt01 span {
    background: linear-gradient(transparent 70%, #e5c1c1 70%);
  }
  #howtodrink dd.material {
    text-align: left;
  }
}
/*------------------------------
#calorie
------------------------------*/
#calorie {
  text-align: center;
  margin: 0 auto;
  padding: 7% 0 3%;
  width: 100%;
  background: #000;
  position: relative;
}
#calorie:after {
  content: '';
  display: block;
  width: 100%;
  height: 20%;
  background: url("../img/calorie_bg.png") center top no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -20%;
}
#calorie h2 {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
  position: relative;
}
#calorie h2 img {
  text-align: center;
  margin: 0 auto;
  width: 61.4%;
}
#calorie h2 .romaji {
  width: 64.5%;
  position: absolute;
  left: 4%;
  top: -56%;
}
#calorie .calorie {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
}
#calorie h3 {
  text-align: center;
  margin: 0 auto 7%;
  width: 42.8%;
}
#calorie dl {
  text-align: center;
  margin: 0 auto 7%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
#calorie dt {
  width: 54.5%
}
#calorie dd {
  width: 39%;
  margin: 0 3%;
  position: relative;
}
#calorie dd.box01 {
  text-align: left;
}
#calorie dd.box02 {
  text-align: right;
}
#calorie .txt01 {
  margin: 0 auto 2%;
  padding: 2% 3.5% 2% 4%;
  background: #d19090;
  border-radius: 30px;
  font-size: 3.7rem;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.1em;
}
#calorie .txt02 {
  font-size: 3.7rem;
  color: #fff;
  font-weight: 400;
  line-height: 1.5;
}
#calorie .img05, #calorie .img06, #calorie .img07 {
  width: 55%;
  position: absolute;
  bottom: 0;
}
#calorie .img06 {
  width: 100%;
}
#calorie .img06 img {
  width: 55%;
  margin: 0 0 0 auto;
}
#calorie .img09 {
  text-align: center;
  margin: 0 auto 3%;
  padding: 5% 0 0;
  width: 69.3%;
}
#calorie .img10 {
  text-align: center;
  margin: 0 auto;
  width: 67.1%;
}
@media screen and (max-width:960px) {
  #calorie {
    padding: 12% 0 5%;
  }
  #calorie h2 img {
    width: 79.4%;
  }
  #calorie h2 .romaji {
    width: 71.5%;
    left: -6%;
    top: -51%;
  }
  #calorie .calorie {
    max-width: inherit;
    width: 90%;
  }
  #calorie h3 {
    width: 55.1%;
  }
  #calorie .img05, #calorie .img06, #calorie .img07 {
    width: 95%;
  }
  #calorie .img06 img {
    width: 95%;
  }
  #calorie .img09 {
    margin: 0 auto 8%;
    width: 79.7%;
  }
  #calorie .img10 {
    width: 54.8%;
  }
  #calorie .txt01 {
    font-size: 2.4rem;
  }
  #calorie .txt02 {
    font-size: 2.4rem;
  }
}
/*------------------------------
#replace
------------------------------*/
#replace {
  text-align: center;
  margin: 0 auto;
  padding: 15% 0 10%;
  width: 100%;
  background: #d19090;
}
#replace h2 {
  display: none;
}
#replace .replace {
  text-align: center;
  margin: 0 auto 0;
  max-width: 960px;
  position: relative;
}
#replace .img01 {
  text-align: center;
  margin: 0 auto 7%;
  width: 69.2%;
}
#replace .replace .romaji {
  width: 27.8%;
  position: absolute;
  right: 14%;
  top: 9.5%;
}
#replace .h3_bg {
  text-align: center;
  margin: 0 auto 15%;
  width: 78.9%;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 18%;
}
#replace .replace h3 {
  text-align: center;
  margin: 0 auto 5%;
  width: 71%;
  position: absolute;
  left: 0;
  right: 0;
  top: 19%;
}
#replace h4.a {
  text-align: center;
  margin: 0 auto 3%;
  width: 56.2%;
  position: relative;
}
#replace h4.a span {
  width: 16%;
  position: absolute;
  left: 0%;
  bottom: -19%;
}
#replace h4.b {
  text-align: center;
  margin: 0 auto 3%;
  width: 45.9%;
  position: relative;
}
#replace h4.b span {
  width: 21%;
  position: absolute;
  left: 0%;
  bottom: -24%;
}
#replace dl {
  margin: 0 auto 3%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#replace dt {
  width: 32.3%;
}
#replace .img05 {
  margin: 0 auto 7%;
  width: 42.4%;
}
#replace .img09 {
  margin: 0 auto 7%;
  width: 46.9%;
}
#replace .img10 {
  margin: 0 auto;
  width: 69.2%;
}
@media screen and (max-width:960px) {
  #replace .replace {
    max-width: inherit;
    width: 90%;
  }
  #replace .img01 {
    width: 64%;
  }
  #replace .replace .romaji {
    width: 42%;
    right: -2%;
    top: 10%;
  }
  #replace .h3_bg {
    width: 85.3%;
    top: 21.5%;
  }
  #replace .replace h3 {
    width: 76.8%;
    top: 22.5%;
  }
  #replace .img10 {
    width: 89.4%;
  }
  #replace h4.a {
    width: 72.6%;
  }
  #replace h4.b {
    width: 59.3%;
  }
  #replace .img05 {
    width: 54.8%;
  }
  #replace .img09 {
    margin: 0 auto 12%;
    width: 60.5%;
  }
}
/*------------------------------
#keepon
------------------------------*/
#keepon {
  text-align: center;
  margin: 0 auto;
  padding: 7% 0 25%;
  background: #fff url(../img/keepon_bg.jpg) center bottom no-repeat;
  background-size: contain;
  width: 100%;
}
#keepon h2 {
  text-align: center;
  margin: 0 auto 5%;
  max-width: 960px;
}
#keepon h2 img {
  text-align: left;
  margin: 0 auto 0 0;
  width: 28.2%;
}
#keepon .keepon {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
}
#keepon h3 {
  text-align: left;
  margin: 0 auto 0 0;
  padding: 0 0;
  width: 37.5%;
}
@media screen and (max-width:960px) {
  #keepon {
    padding: 7% 0 55%;
    background: #fff url(../img/keepon_bg_sp.jpg) center bottom no-repeat;
    background-size: contain;
  }
  #keepon h2 {
    max-width: inherit;
    width: 90%;
  }
  #keepon .keepon {
    max-width: inherit;
    width: 90%;
  }
  #keepon h2 img {
    width: 36.5%;
  }
  #keepon h3 {
    width: 48.4%;
  }
}
/*------------------------------
#izu
------------------------------*/
#izu {
  text-align: center;
  margin: 0 auto;
  padding: 5% 0;
  width: 100%;
  background: #f5e8e8;
}
#izu h2 {
  text-align: center;
  margin: 0 auto 2%;
  max-width: 960px;
  position: relative;
}
#izu h2 img {
  margin: 0 auto;
  width: 41.5%;
}
#izu h2 .romaji {
  width: 71.8%;
  position: absolute;
  right: -8%;
  bottom: -19%;
}
#izu .img01 {
  text-align: center;
  margin: 0 auto 4%;
  max-width: 960px;
}
#izu .img01 img {
  margin: 0 auto;
  width: 32.7%;
}
#izu .izu {
  text-align: center;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}
#izu h3 {
  margin: 0 auto;
  padding: 0 0;
  width: 40.4%;
  position: absolute;
  left: 0;
  right: 0;
  top: 1.5%;
}
#izu .img03 {
  margin: 0 auto 3%;
}
#izu dl {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#izu .box01 dd {
  width: 64.1%;
}
#izu .box01 dt {
  margin: -7% 4% 0 0;
  width: 28.1%;
}
#izu .box02 {
  margin: -10% auto 10%;
  align-items: flex-end;
}
#izu .box02 dt {
  width: 61.7%;
}
#izu .box02 dd {
  width: 34.4%;
}
#izu .box03 dt {
  width: 34.4%;
}
#izu .box03 dd {
  width: 62.2%;
}
#izu .box04 {
  margin: 0 auto 7%;
  align-items: flex-end;
}
#izu .box04 dd {
  width: 61.9%;
}
#izu .box04 dt {
  margin: -18% 0 0;
  width: 34.4%;
}
#izu .box05 {
  margin: 0 auto 10%;
}
#izu .box05 dt {
  width: 45.3%;
}
#izu .box05 dd {
  width: 50.3%;
}
#izu .txt01 {
  text-align: left;
  margin: 0 auto 5% 0;
  font-size: 3.0rem;
  line-height: 1.5;
}
/*#izu .txt01 span {
  background: linear-gradient(transparent 70%, #d19090 70%);
}*/
#izu .img09 {
  margin: 0 auto 2%;
  width: 33.6%;
}
#izu .img10 {
  margin: 0 auto 5%;
  width: 49.9%;
}
#izu .img11 {}
#izu h4 {
  text-align: center;
  margin: 0 auto 7%;
  padding: 3% 3%;
}
#izu .h4_01 {
  width: 59.5%;
}
#izu .h4_02 {
  width: 47.2%;
}
.line_animation {
  line-height: 0;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.line_animation .line-1 {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  background: #d19090;
  left: 0;
  bottom: 0;
  animation: move1 2000ms infinite ease;
}
.line_animation .line-2 {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  background: #d19090;
  left: 0;
  top: 0;
  animation: move2 2000ms infinite ease;
}
.line_animation .line-3 {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  background: #d19090;
  right: 0;
  top: 0;
  animation: move3 2000ms infinite ease;
}
.line_animation .line-4 {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  background: #d19090;
  right: 0;
  bottom: 0;
  animation: move4 2000ms infinite ease;
}
@keyframes move1 {
  0% {
    height: 100%;
    bottom: 0;
  }
  54% {
    height: 0;
    bottom: 100%;
  }
  55% {
    height: 0;
    bottom: 0;
  }
  100% {
    height: 100%;
    bottom: 0;
  }
}
@keyframes move2 {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@keyframes move3 {
  0% {
    height: 100%;
    top: 0;
  }
  54% {
    height: 0;
    top: 100%;
  }
  55% {
    height: 0;
    top: 0;
  }
  100% {
    height: 100%;
    top: 0;
  }
}
@keyframes move4 {
  0% {
    width: 0;
    right: 0;
  }
  55% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@media screen and (max-width:960px) {
  #izu {
    padding: 10% 0;
  }
  #izu .izu {
    max-width: inherit;
    width: 90%;
  }
  #izu h2 img {
    width: 52.9%;
  }
  #izu .img01 img {
    width: 42.3%;
  }
  #izu h2 .romaji {
    width: 76.8%;
    right: -16%;
    bottom: -22%;
  }
  #izu h3 {
    width: 52.2%;
  }
  #izu .txt01 {
    margin: 0 auto 10% 0;
    font-size: 2.4rem;
  }
  #izu .txt01 span {
    background: linear-gradient(transparent 80%, #d19090 80%);
  }
  #izu .box01 {
    margin: 0 auto 5%;
  }
  #izu .box01 dt {
    margin: -9% -20px 0 0;
    width: 36.9%;
  }
  #izu .box01 dd {
    width: 65%;
  }
  #izu .box02 {
    margin: 0% auto 10%;
  }
  #izu .box02 dt {
    width: 46.8%;
    margin: 0 0 0 -6%;
  }
  #izu .box02 dd {
    width: 55.5%;
  }
  #izu .box03 {
    margin: 0 auto 5%;
  }
  #izu .box03 dt {
    width: 48%;
  }
  #izu .box03 dd {
    width: 48%;
  }
  #izu .box04 {
    margin: 0 auto 7%;
    align-items: flex-start;
  }
  #izu .box04 dd {
    width: 48%;
  }
  #izu .box04 dt {
    margin: 0 0 0;
    width: 48%;
  }
  #izu .box05 {
    margin: 0 auto 10%;
    align-items: flex-start;
  }
  #izu .box05 dt {
    width: 48%;
  }
  #izu .box05 dd {
    width: 48%;
  }
  #izu .img09 {
    width: 43.4%;
  }
  #izu .img10 {
    width: 64.5%;
  }
  #izu h4 {
    padding: 5% 10%;
  }
  #izu .h4_01 {
    width: 86.9%;
  }
  #izu .h4_02 {
    width: 70.9%;
  }
}