@charset "UTF-8";
@import url(common.css);
@import url(common_projects.css);
/*----- TOP -----*/
/* ------------------------------------------------
 固定ヘッダー用アンカー位置調整
------------------------------------------------ */
@media screen and (min-width: 768px) {
  .section {
    margin-top: -2.7777777778em;
    padding-top: 6.1111111111em;
  }
  .section.sticky {
    margin-top: -5em;
    padding-top: 5em;
  }
  .section.sticky2 {
    margin-top: -5em;
  }
  .section.basic {
    margin-top: -30px;
    padding-top: 130px;
  }
}

/* ------------------------------------------------
 mv
------------------------------------------------ */
#mv {
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
#mv img {
  vertical-align: top;
}
#mv .slider {
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #mv > .inner {
    width: 100%;
  }
}

.slick-dots {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 0.8333333333em;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}
.slick-dots li {
  margin: 0 5px;
}
.slick-dots li.slick-active button {
  background-color: #754488;
}
.slick-dots button {
  background-color: transparent;
  background-repeat: no-repeat;
  border: 1px solid #754488;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
  text-indent: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 50px;
  display: inline-block;
  vertical-align: top;
}
@media screen and (max-width: 767px) {
  .slick-dots {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }
  .slick-dots button {
    width: 1rem;
    height: 1rem;
  }
}

/* ------------------------------------------------
 #intro
------------------------------------------------ */
#intro {
  text-align: center;
  margin-top: -2.7777777778em;
  padding-top: 8.3333333333em;
}
#intro .title {
  font-size: 1.7777777778em;
  line-height: 1;
}
#intro .title .txt {
  display: block;
  color: #008d43;
  font-weight: 700;
}
#intro .title .img {
  display: block;
  width: 35.7461024499%;
  line-height: 0;
  padding-top: 0.53125em;
  margin-top: 0;
}
#intro .img {
  margin: 1.6666666667em auto 0;
  width: 89.8%;
}
#intro .lead {
  font-size: 1.5555555556em;
  line-height: 1.4;
  margin-top: 1.8571428571em;
}
#intro .lead::after {
  content: "";
  background: url(../img/top/intro_arrow.svg) 50% 0 no-repeat;
  background-size: contain;
  margin-top: 1.0714285714em;
  width: 100%;
  height: 0.6071428571em;
  display: block;
}
@media screen and (max-width: 767px) {
  #intro {
    margin-top: 0;
    padding-top: 10.6666666667%;
  }
  #intro .title {
    font-size: 1.3888888889em;
  }
  #intro .title .img {
    width: 57.2463768116%;
    padding-top: 0.4em;
  }
  #intro .img {
    margin-top: 3.3333333333%;
    width: 96.231884058%;
  }
  #intro .lead {
    font-size: 1.3125em;
    line-height: 1.4;
    margin-top: 1.6666666667em;
  }
  #intro .lead::after {
    margin-top: 0.7142857143em;
    height: 0.7142857143em;
  }
}

/* ------------------------------------------------
 #taisaku
------------------------------------------------ */
#taisaku {
  overflow: hidden;
  padding-bottom: 80px;
}
#taisaku > .inner > header {
  text-align: center;
  position: relative;
}
#taisaku > .inner > header .title {
  color: #008d43;
  font-size: 2.4444444444em;
  line-height: 1;
}
#taisaku > .inner > header .lead {
  color: #008d43;
  font-size: 1.5555555556em;
  margin-top: 0.3571428571em;
}
#taisaku .facts {
  text-align: center;
  margin-top: 4%;
}
#taisaku .facts .title {
  font-size: 1.6666666667em;
  line-height: 1;
}
#taisaku .facts .lead {
  font-size: 1.1111111111em;
  font-weight: bold;
  margin-top: 0.7em;
}
#taisaku .facts .fig {
  margin-top: 3%;
}
#taisaku .facts .note {
  color: #000;
  font-size: 0.6666666667em;
  text-align: left;
  letter-spacing: 0;
  margin: 1em 11% 0;
}
@media screen and (min-width: 768px) {
  #taisaku > .inner > header {
    padding-bottom: 3%;
    position: relative;
    box-sizing: border-box;
  }
  #taisaku > .inner > header > * {
    position: relative;
  }
  #taisaku > .inner > header::before {
    content: "";
    background-color: #008d43;
    display: block;
    width: 100vw;
    height: 6.1111111111em;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 0;
  }
  #taisaku > .inner > header .title, #taisaku > .inner > header .lead {
    position: relative;
    z-index: 1;
  }
  #taisaku > .inner > header .logo {
    margin: 3.5em auto 0;
    width: 55%;
  }
  #taisaku > .inner > header .img {
    padding: 0 7.8% 1.5% 2.8%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
  }
  #taisaku > .inner > header .img picture.cup {
    width: 9.0555555556em;
  }
  #taisaku > .inner > header .img picture.drink {
    width: 5.6111111111em;
  }
}
@media screen and (max-width: 767px) {
  #taisaku {
    padding-bottom: 8%;
  }
  #taisaku > .inner > header {
    padding-bottom: 0;
  }
  #taisaku > .inner > header .title {
    font-size: 1.78125em;
    line-height: 1.2;
  }
  #taisaku > .inner > header .lead {
    font-size: 1.1875em;
    margin-top: 3.0434782609%;
  }
  #taisaku > .inner > header .logo {
    margin: 4.347826087% -4.347826087% 0;
  }
  #taisaku > .inner > header .img {
    margin-top: 1.1111111111em;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #taisaku > .inner > header .img picture + picture {
    margin-left: 0.9375em;
    margin-right: 2.2569444444em;
  }
  #taisaku > .inner > header .img picture.cup {
    width: 32.4637681159%;
  }
  #taisaku > .inner > header .img picture.drink {
    width: 20.2898550725%;
  }
  #taisaku .facts {
    margin-top: 8.6956521739%;
  }
  #taisaku .facts .title {
    font-size: 1.25em;
    line-height: 1;
  }
  #taisaku .facts .lead {
    font-size: 0.9375em;
    margin-top: 3.4782608696%;
  }
  #taisaku .facts .fig {
    margin: 5.7971014493% auto 0;
    width: 91.3043478261%;
  }
  #taisaku .facts .note {
    font-size: 0.625em;
    margin: 1em 4.347826087% 0;
  }
}

/* ----------------------------
 taisaku column
------------------------------*/
#taisaku .column {
  border-radius: 0.5555555556em;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(199, 161, 56, 0.2);
  margin: 56px auto 0;
  width: 88%;
  overflow: hidden;
  position: relative;
}
#taisaku .column .txt {
  margin: 13.6363636364% 6.8181818182% 0;
  position: absolute;
  top: 0;
  left: 0;
}
#taisaku .column .txt .heading {
  color: #008d43;
  font-size: 1.1111111111em;
  font-weight: bold;
}
#taisaku .column .txt .note {
  font-size: 0.6666666667em;
  margin-top: 1.6666666667em;
  display: block;
}
#taisaku .column#taisaku_c1 .txt {
  width: 42.0454545455%;
}
#taisaku .column#taisaku_c1 .txt .detail {
  margin-top: 0.75em;
}
#taisaku .column#taisaku_c2 {
  margin-top: 40px;
  padding-bottom: 1.9444444444em;
}
#taisaku .column#taisaku_c2 .txt .detail {
  margin-top: 52.6315789474%;
  position: absolute;
  top: 0;
  left: 0;
}
#taisaku .column#taisaku_c2 .txt .detail b {
  font-size: 1.1111111111em;
  display: block;
}
#taisaku .column#taisaku_c3 .txt .detail {
  width: 36.1842105263%;
}
@media screen and (max-width: 767px) {
  #taisaku .column {
    border-radius: 0.625em;
    box-shadow: 0px 0px 1rem 0px rgba(199, 161, 56, 0.2);
    margin-top: 5.7971014493%;
    width: 100%;
  }
  #taisaku .column + .column {
    margin-top: 8.6956521739%;
  }
  #taisaku .column .txt {
    margin: 20.2898550725% 5.7971014493% 0;
  }
  #taisaku .column .txt .heading, #taisaku .column .txt .detail {
    font-size: 0.875em;
  }
  #taisaku .column .txt .note {
    margin-top: 0.75em;
  }
  #taisaku .column#taisaku_c1 .txt {
    width: auto;
  }
  #taisaku .column#taisaku_c1 .txt .detail {
    margin-top: 0;
  }
  #taisaku .column#taisaku_c2 {
    margin-top: 8.6956521739%;
    padding-bottom: 7.2463768116%;
  }
  #taisaku .column#taisaku_c2 .txt .detail {
    font-size: 1em;
    margin-top: 93.4426229508%;
  }
  #taisaku .column#taisaku_c2 .txt .detail b {
    font-size: 0.875em;
    text-align: center;
  }
  #taisaku .column#taisaku_c2 .txt .detail .note {
    font-size: 0.625em;
  }
  #taisaku .column#taisaku_c3 .txt .detail {
    width: auto;
  }
}

/* ------------------------------------------------
 #認知機能チェック
------------------------------------------------ */
#check .body {
  text-align: center;
  border: 10px solid #008d43;
  background-color: #daf1e5;
  margin: 0 auto;
  padding: 5% 0 6%;
  width: 88%;
  box-sizing: border-box;
}
#check .body .lead {
  font-size: 1.2222222222em;
  font-weight: bold;
  margin-top: 1.0454545455em;
}
#check .body .doctor {
  font-size: 0.6666666667em;
  margin-top: 1.6666666667em;
}
#check .body .link {
  margin-top: 1.3888888889em;
}
#check .body .link .basic_btn {
  font-size: 1.3333333333em;
  padding: 1.1666666667em 5em 1.1666666667em 4.1666666667em;
}
#check .body .link .basic_btn::after {
  right: 1.25em;
}
@media screen and (max-width: 767px) {
  #check .body {
    border-width: 0.4375em;
    padding: 12.4637681159% 0;
    width: 100%;
  }
  #check .body .title img {
    width: 74.0181268882%;
  }
  #check .body .lead {
    font-size: 0.9375em;
    margin-top: 1em;
  }
  #check .body .doctor {
    font-size: 0.625em;
    margin-top: 1em;
  }
  #check .body .link {
    margin-top: 1.25em;
  }
  #check .body .link .basic_btn {
    font-size: 1.0625em;
    padding: 1.2352941176em 3.2352941176em 1.2352941176em 1.7647058824em;
  }
  #check .body .link .basic_btn::after {
    right: 1.3235294118em;
  }
}

/* ------------------------------------------------
 #lifestyle
------------------------------------------------ */
#lifestyle {
  margin-top: 0.5555555556em;
  padding-top: 5em;
  padding-bottom: 80px;
  overflow: hidden;
}
#lifestyle > .inner > header {
  text-align: center;
  padding: 4% 0 3.5%;
  position: relative;
}
#lifestyle > .inner > header > * {
  position: relative;
}
#lifestyle > .inner > header::before {
  content: "";
  background-color: #fff;
  display: block;
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 0;
}
#lifestyle > .inner > header::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 18px 0 18px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}
#lifestyle > .inner > header .title {
  color: #008d43;
  line-height: 1;
}
#lifestyle > .inner > header .title > span {
  display: block;
}
#lifestyle > .inner > header .title .l1 {
  font-size: 1.3333333333em;
  background: url(../img/border_dotted-gre.svg) 0 100% repeat-x;
  padding-bottom: 0.2em;
  padding-right: 0.1em;
  display: inline-block;
}
#lifestyle > .inner > header .title .l2 {
  font-size: 2.2222222222em;
  margin-top: 0.5em;
}
#lifestyle > .inner > header .txt {
  text-align: left;
  margin: 1.1111111111em 9.5% 0;
  padding-top: 1.9444444444em;
  position: relative;
}
#lifestyle > .inner > header .txt::before {
  content: "";
  background-image: linear-gradient(90deg, #c79d29 0%, #ecc55c 25%, #c6a037 50%, #ecc55c 75%, #c79d29 100%);
  display: block;
  width: 100vw;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 0;
}
#lifestyle > .inner > header .txt .doctor {
  font-size: 0.6666666667em;
  text-align: right;
  margin-top: 1em;
}
#lifestyle .body {
  padding-top: 4%;
  margin: 0 auto;
  width: 90%;
}
#lifestyle .message .txt {
  font-weight: bold;
}
#lifestyle .message .basic_btn.primary {
  padding: 1.1111111111em 0 1em;
}
#lifestyle .message .basic_btn.primary::after {
  right: 1.1111111111em;
}
#lifestyle .message .list_bulet {
  color: #008d43;
}
#lifestyle .main .s {
  font-size: 1.1111111111em;
}
#lifestyle .main .heading {
  font-size: 1.5555555556em;
  margin-top: 0.1em;
}
#lifestyle .main .themes {
  margin-top: 0.4em;
}
#lifestyle .main .themes li + li {
  margin-left: 1em;
}
#lifestyle .main .link {
  margin-top: 1em;
}
#lifestyle .main .link .basic_btn {
  width: 19.6875em;
}
#lifestyle .column {
  border-radius: 0.5555555556em;
  box-shadow: 0px 0px 20px 0px rgba(199, 161, 56, 0.2);
  background-color: #fff;
  margin-top: 5.5555555556%;
  overflow: hidden;
}
#lifestyle .column + .column {
  margin-top: 4.4444444444%;
}
#lifestyle .column .heading {
  font-size: 1.3333333333em;
  font-weight: bold;
  text-align: center;
}
#lifestyle .column .txt {
  font-weight: bold;
  border-left: 2px dotted rgba(0, 141, 67, 0.4);
  margin: 1.6666666667em 0;
  padding: 0 1.6666666667em;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#lifestyle .column .txt .point {
  color: #008d43;
  font-size: 0.7777777778em;
  border-width: 1px;
  border-style: solid;
  line-height: 1;
  padding: 0.2857142857em 0.5714285714em;
  display: inline-block;
  align-self: flex-start;
}
#lifestyle .column .txt .list_bulet {
  font-size: 0.8888888889em;
  margin-top: 0.75em;
}
#lifestyle .column .txt .list_bulet li + li {
  margin-top: 0.25em;
}
#lifestyle .column .txt .link {
  margin-top: 1em;
}
#lifestyle .column .txt .link .basic_btn {
  width: 20.3125em;
}
@media screen and (min-width: 768px) {
  #lifestyle .message {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #lifestyle .message .themes {
    display: flex;
  }
  #lifestyle .message.main {
    flex-direction: row-reverse;
  }
  #lifestyle .message.main .img {
    width: 23.3333333333%;
  }
  #lifestyle .message.column .img {
    width: 27.7777777778%;
  }
  #lifestyle .message.column .txt {
    width: 43.1111111111%;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 767px) {
  #lifestyle {
    margin-top: -1.3333333333%;
    padding-top: 14.6666666667%;
    padding-bottom: 14.4927536232%;
  }
  #lifestyle > .inner > header {
    padding-top: 8.6956521739%;
    padding-bottom: 7.2463768116%;
  }
  #lifestyle > .inner > header .title {
    color: #008d43;
    line-height: 1;
  }
  #lifestyle > .inner > header .title > span {
    display: block;
  }
  #lifestyle > .inner > header .title .l1 {
    font-size: 1em;
    background-size: auto 0.2rem;
  }
  #lifestyle > .inner > header .title .l2 {
    font-size: 1.5625em;
    line-height: 1.4;
  }
  #lifestyle > .inner > header .txt {
    font-size: 0.875em;
    text-align: left;
    margin: 0.625em 0 0;
    padding-top: 1.40625em;
  }
  #lifestyle > .inner > header .txt .doctor {
    font-size: 0.7142857143em;
    text-align: center;
  }
  #lifestyle .body {
    padding-top: 11.5942028986%;
    width: 100%;
  }
  #lifestyle .message .basic_btn.primary {
    font-size: 0.8125em;
    padding: 1.1538461538em 0;
  }
  #lifestyle .message .basic_btn.primary::after {
    right: 0.7692307692em;
  }
  #lifestyle .message .list_bulet {
    font-size: 0.75em;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    display: table;
  }
  #lifestyle .message .list_bulet li::before {
    width: 0.4166666667em;
    height: 0.4166666667em;
    box-sizing: border-box;
  }
  #lifestyle .main {
    text-align: center;
  }
  #lifestyle .main .img img {
    width: 42.6086956522%;
  }
  #lifestyle .main .s {
    font-size: 0.9375em;
    margin-top: 1em;
  }
  #lifestyle .main .heading {
    font-size: 1.25em;
  }
  #lifestyle .main .themes li + li {
    margin-left: 0;
  }
  #lifestyle .main .link {
    margin-top: 1em;
  }
  #lifestyle .main .link .basic_btn {
    width: 19.6875em;
  }
  #lifestyle .column {
    border-radius: 0.625em;
    box-shadow: 0px 0px 1rem 0px rgba(199, 161, 56, 0.2);
    margin-top: 11.5942028986%;
  }
  #lifestyle .column + .column {
    margin-top: 8.6956521739%;
  }
  #lifestyle .column .heading {
    font-size: 1.25em;
    line-height: 1;
    text-align: center;
    padding: 1em 0;
  }
  #lifestyle .column .txt {
    text-align: center;
    border-top: 2px dotted rgba(0, 141, 67, 0.4);
    border-left-width: 0;
    margin: 0 4.347826087%;
    padding: 4.347826087% 0 7.2463768116%;
    display: block;
  }
  #lifestyle .column .txt .point {
    font-size: 0.6875em;
    padding-top: 0.4em;
    padding-bottom: 0.25em;
  }
  #lifestyle .column .txt .list_bulet {
    font-size: 0.8125em;
    margin-top: 0.75em;
  }
  #lifestyle .column .txt .link {
    margin-top: 1em;
  }
  #lifestyle .column .txt .link .basic_btn {
    width: 100%;
  }
}

/* ------------------------------------------------
 #exercise
------------------------------------------------ */
#exercise {
  background-color: #fbe7db;
  margin-top: 0;
  padding-top: 50px;
  padding-bottom: 80px;
}
#exercise .title {
  text-align: center;
}
#exercise .body {
  margin: 3% auto 0;
  width: 68%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
#exercise .body .txt {
  font-size: 0.8888888889em;
  margin-top: 1em;
  width: 55.8823529412%;
}
#exercise .body .movie {
  width: 41.1764705882%;
}
#exercise .body .movie .thumb_movie {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  #exercise .body .movie .thumb_movie {
    transition: opacity 0.4s ease;
  }
  #exercise .body .movie .thumb_movie:hover {
    opacity: 0.8;
  }
}
#exercise .body .movie .caption {
  color: #db285a;
  font-size: 0.6666666667em;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  margin-top: 0.5em;
  display: block;
}
@media screen and (max-width: 767px) {
  #exercise {
    padding: 9.3333333333% 0;
  }
  #exercise .title {
    margin: 0 auto;
    width: 94.2028985507%;
  }
  #exercise .body {
    margin-top: 7.2463768116%;
    display: block;
    width: auto;
  }
  #exercise .body .txt {
    font-size: 0.8125em;
    margin: 0 auto;
    width: 89.8550724638%;
  }
  #exercise .body .movie {
    margin: 7.2463768116% auto 0;
    width: auto;
  }
  #exercise .body .movie .thumb_movie {
    margin: 0 auto;
    width: 72.4637681159%;
    display: block;
  }
  #exercise .body .movie .caption {
    font-size: 0.8125em;
    margin-top: 1em;
  }
  #exercise .body .link {
    margin-top: 1.25em;
  }
  #exercise .body .link .basic_btn {
    font-size: 1.0625em;
    padding: 1.2352941176em 3.2352941176em 1.2352941176em 1.7647058824em;
  }
  #exercise .body .link .basic_btn::after {
    right: 1.3235294118em;
  }
}

/* ------------------------------------------------
 #collaboration
------------------------------------------------ */
#collaboration{
  padding-left: 1em;
  padding-right: 1em;
}

#collaboration .inner{
  margin: 0 auto;
  border-radius: 1.1111111111111112em;
  box-sizing: border-box;
  padding: 0.8888888888888888em;
  background-size: auto auto;
  background-color: rgba(137, 99, 173, 1);

  background-image: repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(155, 116, 181, 1) 48px, rgba(155, 116, 181, 1) 96px );
}

#collaboration .inner .body {
  position: relative;
  margin: 0;
  padding-top: 0.6666666666666666em;
  width: 100%;
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  border-radius: 1.1111111111111112em;
  background-image: url(../img/top/collaboration_gradation.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

#collaboration .collaboration_title{
  width: 60.74380165289256%;
  position: absolute;
  top: 1.888888888888889em;
  right: 0.8333333333333334em;
  z-index: 1;
}

#collaboration .illustration{
  width: 35.9504132231405%;
}

#collaboration .inner .body .txt_box .name{
  color: #754488;
  font-size: 1em;
  font-weight: 700;
  margin-bottom: 0.8888888888888888em;
  line-height: 1;
}

#collaboration .inner .body .caption_box{
  width: 58.26446280991736%;
  height: fit-content;
  padding-bottom: 2.888888888888889em;
  padding-right: 2.2222222222222223em;
}

#collaboration .inner .body .txt_box{
  box-sizing: border-box;
  padding: 0.8888888888888888em 0.5555555555555556em;
  background-color: #fff;
  border-top: 2px solid #c6a037;
  border-bottom: 2px solid #c6a037;
  width: 100%;
}
#collaboration .inner .body .txt_box .txt {
  font-size: 0.8888888888888888em;
  letter-spacing: 0.04em;
}
#collaboration .inner .body .txt_box .name .space{
  padding-left: 1em;
}

#collaboration .inner .body .caption_box .energy_box{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1.6666666666666667em;

}

#collaboration .inner .body .caption_box .energy_box .recipe .strong{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.125em;
}

#collaboration .inner .body .caption_box .energy_box .recipe .number{
  width: 1.125em;
  height: 1.125em;
  border-radius: 50%;
  background-color: #fff;
  color: #754488;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8888888888888888em;
  margin-right: 0.4em;
}
#collaboration .inner .body .caption_box .energy_box .recipe{
  width: 31.91489361702128%;
  height: 100%;
}

#collaboration .inner .body .caption_box .energy_box .recipe .modal_link{
  padding: 0.6875em 0;
  white-space: nowrap;
  box-sizing: border-box;
  background-size: 0.5em;
  line-height: 1.2222222222222223em;
  display: block;
  text-decoration: none;
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: #754488;
  font-weight: 700;
  text-align: center;
  border-radius: 0.625em;
  font-size: 0.8888888888888888em;
  background-image: url(../img/top/collaboration_arrow.png);
  background-repeat: no-repeat;
  background-position: center right 0.75em;
  line-height: 1.5em;
  transition: opacity 0.4s ease;
}
#collaboration .inner .body .caption_box .energy_box .recipe .modal_link:hover{
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  #collaboration{
    margin-top: 4em;
    padding: 0;
  }
  #collaboration .inner{
    padding: 0.5555555555555556em;
    border-radius: 0.6944444444444444em;
    background-size: auto auto;
    background-color: rgba(155, 116, 181, 1);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 66px, rgba(137, 99, 173, 1) 66px, rgba(137, 99, 173, 1) 132px );
  }
  #collaboration .inner .body {
    padding: 0.5555555555555556em 0 1.1111111111111112em;
    border-radius: 0.6944444444444444em;
    flex-direction: column;
    justify-content: normal;
    align-items: flex-start;
    background-image: url(../img/top/collaboration_gradation-sp.png);
  }
  #collaboration .illustration{
    width: 45.74468085106383%;
  }
  #collaboration .inner .body .caption_box{
    width: 90.27355623100304%;
    padding: 0;
    margin: 0 auto;
  }
  #collaboration .collaboration_title{
    top: 3.958333333333333em;
    right: 1.1111111111111112em;
    width: 55.16717325227964%;
  }
  #collaboration .inner .body .txt_box{
    border-width: 0.10416666666666666em ;
    padding: 1.0069444444444444em 1.1111111111111112em;
  }
  #collaboration .inner .body .txt_box .name{
    font-size: 0.7638888888888888em;
  }
  #collaboration .inner .body .txt_box .txt{
    font-size: 0.6944444444444444em;
    letter-spacing: normal;
  }
  #collaboration .inner .body .caption_box .energy_box{
    flex-direction: column;
    row-gap: 0.3472222222222222em;
    margin-top: 0.6944444444444444em;
  }
  #collaboration .inner .body .caption_box .energy_box .recipe{
    width: 100%;
    font-feature-settings: "palt" 0;
  }
  #collaboration .inner .body .caption_box .energy_box .pc_disp{
    display: none;
  }
  #collaboration .inner .body .caption_box .energy_box .recipe .modal_link{
    display: flex;
    justify-content: center;
    font-size: 0.9027777777777778em;
    background-image: url(../img/top/collaboration_arrow-sp.png);
    background-size: 0.38461538461538464em;
    background-position:  center right 1.9230769230769231em;
    letter-spacing: 0.07em;
    border-radius: 0.7692307692307693em;
  }
  #collaboration .inner .body .caption_box .energy_box .recipe .strong{
    font-size: 1em;
    align-items: center;
  }
  #collaboration .inner .body .caption_box .energy_box .recipe .number{
    font-size: 0.9230769230769231em;
    margin: 0 0.1em;
    letter-spacing: 0;
  }
}
@media screen and (max-width: 600px){
  #collaboration .inner .body .caption_box .energy_box .recipe .number{
    width: 1.3em;
    height: 1.3em;
    line-height: 0;
  }
}
/* ------------------------------------------------
 #collaborationのモーダルウィンドウ
------------------------------------------------ */
.modal_recipe .txt{
  color: #754488;
  font-weight: 700;
}
.modal_recipe .body{
  margin-top: 2.7777777777777777em;
}
.modal_recipe .point{
  margin-top: 2.5555555555555554em;
}
.modal_recipe .sub-title{
  font-weight: 700;
  color: #754488;
  position: relative;
  background: linear-gradient(transparent 58.33333333333333%, #f8e598 0%);
  display: inline;
}

.modal_recipe .letter{
  margin-top: 1.1111111111111112em;
  font-size: 0.8888888888888888em;
}
.modal_recipe .sub-title::after{
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
  background-image: url(../img/top/collaboration_ornament.png);
  width: 1.1111111111111112em;
  height: 1.6111111111111112em;
  left: -1.2em;
  top: 0;
  background-size: cover;
}
.modal_recipe .modal_bottom{
  width: 96.74418604651163%;
  background-color: #f5eff9;
  margin:2.7777777777777777em auto 0;
  border-radius: 1.1111111111111112em;
  border: 0.1111111111111111em solid #754488;

}
.modal_recipe .modal_bottom .bottom_inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6111111111111112em 2em 0.5555555555555556em 0;
}
.modal_recipe .bottom_title{
  width: 49.19499105545617%;
  margin-bottom: 2.111111111111111em;
}
.modal_recipe .bottom_text-wrap{
  width: 70.22613065326633%;
  padding-top: 1.6111111111111112em;
}
.modal_recipe .bottom_text{
  width: 93.74217324412322%;
  margin-left: 2em;
  padding-bottom: 1.6666666666666667em;
}
.modal_recipe .bottom_img{
  width: 26.38190954773869%;
}
@media screen and (max-width: 767px) {
  .modal_recipe .body{
    margin-top: 1.5873015873015874em;
  }
  .modal_recipe .txt{
    padding: 0 0.873015873015873em;
    font-size: 1.1111111111111112em;
  }
  .modal_recipe .point{
    margin-top: 1.7063492063492065em;
    padding: 0 0.873015873015873em 0 0.9523809523809524em;
  }
  .modal_recipe .letter{
    margin-top: 1.150793650793651em;
    font-size: 1.0317460317460319em;
  }
  .modal_recipe .modal_bottom{
    border-radius: 0.6944444444444444em;
    border-width: 0.06944444444444445em;
    margin: 1.3888888888888888em auto 0;
  }
  .modal_recipe .modal_bottom .bottom_inner{
    flex-direction: column;
    padding: 1.3888888888888888em  0.7638888888888888em 1.3888888888888888em 0;
  }
  .modal_recipe .sub-title{
    font-size: 1.1904761904761905em;
  }
  .modal_recipe .bottom_title{
    margin-bottom: 1.3888888888888888em;
    width: 59.44055944055944%;
  }
  .modal_recipe .bottom_text-wrap{
    width: 100%;
    padding-top: 0;
  }
  .modal_recipe .bottom_text{
    padding-left: 0.7857142857142857em;
    margin: 0;
    width: fit-content;
    font-size: 0.9722222222222222em;
    word-break: break-all;
    padding-bottom: 0;
  }
  .modal_recipe .bottom_img{
    padding-left: 0.7638888888888888em;
    width: 61.88811188811189%;
    margin-top: 1.3888888888888888em;
  }
  .modal_recipe .space{
    display: none;
  }
}

/* ------------------------------------------------
 #QA
------------------------------------------------ */
#qa .body .list li {
  border-radius: 0.5555555556em;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(199, 161, 56, 0.2);
  overflow: hidden;
}
#qa .body .list li + li {
  margin-top: 4.4444444444%;
}
#qa .body .list li .q {
  display: flex;
  align-items: center;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  #qa .body .list li .q {
    transition: opacity 0.4s ease;
  }
  #qa .body .list li .q:hover {
    opacity: 0.8;
  }
}
#qa .body .list li .q i {
  color: #fff;
  font-size: 1.6666666667em;
  background-color: #008d43;
  font-style: normal;
  line-height: 1;
  text-align: center;
  padding: 1.3333333333em 0;
  width: 4.3333333333em;
}
#qa .body .list li .q .txt {
  color: #008d43;
  font-size: 1.1111111111em;
  margin-left: 1.75em;
  font-weight: bold;
}
#qa .body .list li .q::after {
  content: "";
  background: url(../img/top/qa_arrow.svg) no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: 1.7777777778em;
  width: 0.8888888889em;
  height: 1em;
  display: block;
  transform: rotate(180deg);
  transition: transform 0.4s ease;
}
#qa .body .list li .q.open::after {
  transform: rotate(0deg);
}
#qa .body .list li .a {
  border-top: 1px dotted #008d43;
  padding: 1.5555555556em 2.2222222222em;
  margin-top: -1px;
  display: none;
}
@media screen and (max-width: 767px) {
  #qa .body .list li {
    border-radius: 0.625em;
    box-shadow: 0px 0px 1rem 0px rgba(199, 161, 56, 0.2);
  }
  #qa .body .list li + li {
    margin-top: 7.2463768116%;
  }
  #qa .body .list li .q {
    justify-content: space-between;
  }
  #qa .body .list li .q i {
    font-size: 1.25em;
    padding: 0;
    width: 18.8405797101%;
    align-self: stretch;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  #qa .body .list li .q .txt {
    font-size: 0.9375em;
    margin-left: 0.8333333333em;
    padding: 1em 0;
    width: 63.768115942%;
  }
  #qa .body .list li .q::after {
    margin-right: 1.25em;
    width: 0.75em;
    height: 0.875em;
  }
  #qa .body .list li .a {
    font-size: 0.875em;
    padding: 1.0714285714em 0.8928571429em;
  }
}

/* ------------------------------------------------
商品情報
------------------------------------------------ */
#products .body .product .item {
  color: #754488;
  border-radius: 0.6666666667em;
  background-color: #fff;
  box-shadow: 0px 0px 20px 0px rgba(199, 161, 56, 0.2);
  overflow: hidden;
  display: flex;
}
#products .body .product .item .img {
  width: 34.445%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#products .body .product .item .link {
  text-align: center;
}
#products .body .product .item .link .basic_btn {
  color: #fff;
  line-height: 1;
  border-radius: 0.625em;
  background-color: #754488;
  padding: 1.125em 2.1875em;
}
#products .body .product .item .link .basic_btn--gre {
  color: #fff;
  line-height: 1;
  border-radius: 0.625em;
  background-color: #008d43;
  padding: 1.125em 2.1875em;
}
#products .body .product .item .link .basic_btn.shopping::before, #products .body .product .item .link .basic_btn.store::before {
  content: "";
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 0.8125em;
  width: 1.3125em;
  height: 1.25em;
  display: inline-block;
  vertical-align: middle;
}
#products .body .product .item .link .basic_btn.shopping::before {
  background-image: url(../img/icon_shopping.svg);
}
#products .body .product .item .link .basic_btn.store::before {
  background-image: url(../img/icon_search.svg);
}
#products .body .product .item .txt {
  width: 56.6666666667%;
}
#products .body .product .item .txt header::after {
  content: "";
  background-image: linear-gradient(90deg, #c79d29 0%, #ecc55c 50%, #c6a037 100%);
  margin-top: 0.7222222222em;
  width: 100%;
  height: 2px;
  display: block;
}
#products .body .product .item .txt header .label {
  color: #fff;
  font-size: 0.8888888889em;
  font-weight: bold;
  border-radius: 0.625em;
  background-color: #754488;
  line-height: 1;
  padding: 0.5em 0.9375em;
  display: inline-block;
}
#products .body .product .item .txt header .label--gre {
  background-color: #008d43;
}
#products .body .product .item .txt header .name {
  font-size: 1.3333333333em;
  margin-top: 0.2916666667em;
}
#products .body .product .item .txt--gre header .name {
  color: #008d43;
}
#products .body .product .item .txt header .name br.sp_disp {
  margin-left: 0.5em;
}
#products .body .product .item .txt .spec {
  margin-top: 1em;
}
#products .body .product .item .txt .spec tr + tr th, #products .body .product .item .txt .spec tr + tr td {
  border-top: 1px dotted #754488;
}
#products .body .product .item .txt--gre .spec tr + tr th, #products .body .product .item .txt--gre .spec tr + tr td {
  border-top: 1px dotted #008d43;
}
#products .body .product .item .txt .spec th, #products .body .product .item .txt .spec td {
  font-size: 0.7777777778em;
  padding: 0.2857142857em 0;
  box-sizing: border-box;
}
#products .body .product .item .txt .spec tr:first-child th, #products .body .product .item .txt .spec tr:first-child td {
  padding-top: 0;
}
#products .body .product .item .txt .spec tr:last-child th, #products .body .product .item .txt .spec tr:last-child td {
  padding-bottom: 0;
}
#products .body .product .item .txt .spec th .s, #products .body .product .item .txt .spec td .s {
  font-size: 0.8571428571em;
}
#products .body .product .item .txt .spec th {
  text-align: left;
  width: 33.9622641509%;
}
#products .body .product .item .txt .spec td {
  vertical-align: middle;
}
#products .body .product .note {
  font-size: 0.6666666667em;
  letter-spacing: normal;
  margin-top: 1.6666666667em;
}
#products .body .product + .product {
  margin-top: 4%;
}
#products .body #yoghurt_cup .img {
  background: url(../img/top/products_bg01.png) 50% 50% no-repeat;
  padding-top: 8%;
}
#products .body #yoghurt_cup .ph {
  width: 72.2580645161%;
  padding-bottom: 16.1290322581%;
}
#products .body #yoghurt_cup .txt {
  padding: 4.4444444444% 4.4444444444% 4.5555555556%;
}
#products .body #yoghurt_drink .img {
  background: url(../img/top/products_bg02.png) 50% 50% no-repeat;
  padding-top: 6%;
}
#products .body #yoghurt_drink .ph {
  width: 46.7741935484%;
  padding-bottom: 8.064516129%;
}
#products .body #yoghurt_drink .txt {
  padding: 4% 4.4444444444% 3.8888888889%;
}
#products .body #yoghurt_drink .txt--gre {
  color: #000;
}
#products .body #supplement_60 .img {
  background: url(../img/top/products_bg03.png) 50% 50% no-repeat;
  padding-top: 3%;
}
#products .body #supplement_60 .ph {
  width: 61.61290322580645%;
  padding-bottom: 12.9032258065%;
}
#products .body #supplement_60 .txt {
  padding: 3.5% 4.4444444444% 3.5%;
}
#products .body #supplement_14 .img {
  background: url(../img/top/products_bg04.png) 50% 50% no-repeat;
}
#products .body #supplement_14 .ph {
  width: 64.83870967741935%;
  padding-bottom: 12.9032258065%;
}
#products .body #supplement_14 .txt {
  padding: 3.5% 4.4444444444% 3.5%;
}
@media screen and (max-width: 767px) {
  #products .body {
    width: 97.1014492754%;
    flex-direction: column;
  }
  #products .body .product .item {
    border-radius: 0.625em;
    box-shadow: 0px 0px 20px 0px rgba(199, 161, 56, 0.2);
    display: block;
  }
  #products .body .product .item .img {
    background-image: url(../img/top/products_bg-sp.jpg);
    background-position: 50% 100%;
    background-size: 100% auto;
    padding-bottom: 7.4626865672%;
    width: auto;
  }
  #products .body .product .item .link .basic_btn.store {
    font-size: 0.8333333333em;
    border-radius: 0.3472222222em;
    padding: 0.7692307692em 1.6153846154em;
  }
  #products .body .product .item .link .basic_btn.shopping {
    font-size: 0.9027777778em;
    border-radius: 0.3472222222em;
    padding: 0.7692307692em 1.6153846154em;
  }
  #products .body .product .item .link .basic_btn.store::before {
    margin-right: 0.75em;
    width: 0.8333333333em;
    height: 0.8333333333em;
  }
  #products .body .product .item .link .basic_btn.shopping::before {
    margin-right: 0.3846153846em;
    width: 1.2692307692em;
    height: 0.9615384615em;
  }
  #products .body .product .item .txt {
    width: auto;
  }
  #products .body .product .item .txt header {
    text-align: center;
  }
  #products .body .product .item .txt header::after {
    margin-top: 1.0416666667em;
    height: 0.1333333333em;
  }
  #products .body .product .item .txt header .label {
    font-size: 0.8333333333em;
    border-radius: 0.4166666667em;
    padding: 0.4166666667em 0.8333333333em;
  }
  #products .body .product .item .txt header .name {
    font-size: 1.125em;
    margin-top: 0.5555555556em;
  }
  #products .body .product .item .txt header .name br.sp_disp {
    margin-left: 0.5em;
  }
  #products .body .product .item .txt .spec {
    margin-top: 1.0416666667em;
  }
  #products .body .product .item .txt .spec th, #products .body .product .item .txt .spec td {
    font-size: 0.9027777778em;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
  }
  #products .body .product .item .txt .spec th .s, #products .body .product .item .txt .spec td .s {
    font-size: 0.7692307692em;
  }
  #products .body .product .item .txt .spec th {
    width: 33.0508474576%;
  }
  #products .body .product .note {
    font-size: 0.6944444444em;
  }
  #products .body .product + .product {
    margin-top: 8.9552238806%;
  }
  #products .body #yoghurt_cup .img {
    background: url(../img/top/products_bg01-sp.png) 50% 50% no-repeat;
    padding-top: 13.4328358209%;
  }
  #products .body #yoghurt_cup .ph {
    width: 48.2089552239%;
    padding-bottom: 7.0149253731%;
  }
  #products .body #yoghurt_cup .txt {
    padding: 5.9701492537% 5.9701492537% 4.5555555556%;
  }
  #products .body #yoghurt_drink .img {
    background: url(../img/top/products_bg02-sp.png) 50% 50% no-repeat;
    padding-top: 5.5%;
  }
  #products .body #yoghurt_drink .ph {
    width: 27.3134328358%;
    padding-bottom: 6.7164179104%;
  }
  #products .body #yoghurt_drink .txt {
    padding: 4% 4.4444444444% 3.8888888889%;
  }
  #products .body #supplement_60 .img {
    background: url(../img/top/products_bg03-sp.png) 50% 50% no-repeat;
    padding-top: 10%;
  }
  #products .body #supplement_60 .ph {
    width: 42.3880597015%;
    padding-bottom: 7.4626865672%;
  }
  #products .body #supplement_60 .txt {
    padding: 4.6666666667% 4.4444444444% 4.7777777778%;
  }
  #products .body #supplement_14 .img {
    background: url(../img/top/products_bg04-sp.png) 50% 50% no-repeat;
    padding-top: 13%;
  }
  #products .body #supplement_14 .ph {
    width: 46.2686567164%;
    padding-bottom: 7.4626865672%;
  }
  #products .body #supplement_14 .txt {
    padding: 4.6666666667% 4.4444444444% 4.7777777778%;
  }
}

/* ------------------------------------------------
 バナー モニター募集中！
------------------------------------------------ */
#bnr_monitor {
  margin-top: 0;
  padding-top: 0;
  position: fixed;
  right: 1em;
  bottom: 3.3333333333em;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  #bnr_monitor a, #bnr_monitor button {
    transition: opacity 0.4s ease;
  }
  #bnr_monitor a:hover, #bnr_monitor button:hover {
    opacity: 0.8;
  }
}
#bnr_monitor .btn_close {
  font-size: 1em;
  border: none;
  background: transparent url(../img/top/icon_close.png) 0 0 no-repeat;
  background-size: contain;
  padding: 0;
  width: 2.4444444444em;
  height: 2.4444444444em;
  position: absolute;
  right: 0;
  top: -1.7777777778em;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
#bnr_monitor .bnr {
  width: 11.44444444444444em;
  display: block;
}
#bnr_monitor .bnr img {
  max-width: 100%;
}
#bnr_monitor .bnr.anim {
  animation: heartBeat 1.5s ease 0s 1 forwards;
}
@media screen and (max-width: 767px) {
  #bnr_monitor {
    right: 0.5625em;
    bottom: 0.9375em;
  }
  #bnr_monitor .btn_close {
    width: 1.71875em;
    top: -1.125em;
  }
  #bnr_monitor .bnr {
    width: 7.4375em;
  }
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.2);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.2);
  }
  67% {
    transform: scale(1);
  }
}