@charset 'UTF-8';
/* --------------------------------------------------------
	commmon
-------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
img[src$=".svg"] {
  width: 100%;
}
/* .content__ttl__wrap,
.mgmenu {
  display: none;
} */
/* --------------------------------------------------------
	article
-------------------------------------------------------- */
article {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: initial;
  max-width: auto;
  width: 100%;
}

header + article {
  margin-top: 0;
}

/* TOP Page */
main {
  margin: 0 auto;
  max-width: initial;
  max-width: auto;
  width: 100%;
}
.article__footer {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0;
  border-top: none;
}
.fontfam {
  font-weight: bold;
  font-family: "Kiwi Maru", "M PLUS 1p", "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo,
    sans-serif;
}

.mv {
  /* margin: 0 auto 80px; */
  margin: 0 auto 40px;
  width: 100%;
  height: auto;
  max-width: 1920px;
  max-height: 715px;
  background-image: url(/images/top2022/mv.png);
  background-position: center top;
  background-size: contain;
  background-size: cover;
  background-repeat: no-repeat;
}
.mv .forSP {
  display: none;
}
.mv .forPC {
  display: block;
}
.mv .whole {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  position: relative;
}
@media screen and (min-width: 1201px) {
  .mv {
    height: 715px;
  }
}
.mv .btn01 {
  position: absolute;
  top: 142px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 319px;
  width: 26.58%;
}
.mv .btn02 {
  position: absolute;
  top: 218px;
  right: 70%;
  max-width: 282px;
  width: 23.5%;
}
.mv .btn03 {
  position: absolute;
  top: 282px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 281px;
  width: 23.4%;
}
.mv .btn04 {
  position: absolute;
  top: 209px;
  left: 68.4%;
  max-width: 320px;
  width: 26.67%;
}
.mv .btn05 {
  position: absolute;
  bottom: 80px;
  right: 68.91%;
  max-width: 308px;
  width: 25.67%;
}
.mv .btn06 {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 323px;
  width: 26.91%;
}
.mv .btn07 {
  position: absolute;
  bottom: 115px;
  left: 72.17%;
  max-width: 262px;
  width: 21.5%;
}
.mv .bird {
  position: absolute;
  /*  top: 30px;
  left: 105px; */
  top: 120px;
  left: 42%;
  width: 35px;
  opacity: 0;
}
.mv .bird2 {
  position: absolute;
  top: 148px;
  right: 20px;
  width: 35px;
  opacity: 0;
}
.mv .btn01 a,
.mv .btn02 a,
.mv .btn03 a,
.mv .btn04 a,
.mv .btn05 a,
.mv .btn06 a,
.mv .btn07 a {
  cursor: pointer;
  transition: all 0.3s ease 0s;
  display: block;
}
.mv .btn01 a:hover,
.mv .btn02 a:hover,
.mv .btn03 a:hover,
.mv .btn04 a:hover,
.mv .btn05 a:hover,
.mv .btn06 a:hover,
.mv .btn07 a:hover {
  transform: scale(1.1, 1.1) translateY(-8px);
}
@media screen and (max-width: 1200px) {
  .mv {
    height: auto;
    aspect-ratio: 2 / 1;
    background-size: cover;
  }
  .mv .btn01 {
    top: calc(28 / 1200 * 100vw);
  }
  .mv .btn02 {
    top: calc(102 / 1200 * 100vw);
  }
  .mv .btn03 {
    top: calc(166 / 1200 * 100vw);
  }
  .mv .btn04 {
    top: calc(93 / 1200 * 100vw);
  }
  .mv .btn05 {
    bottom: calc(80 / 1200 * 100vw);
  }
  .mv .btn06 {
    bottom: calc(36 / 1200 * 100vw);
  }
  .mv .btn07 {
    bottom: calc(85 / 1200 * 100vw);
  }
}

/* ========== 共通 ========== */
.article__contents {
  margin: 0 auto 80px;
  width: auto;
  max-width: 1200px;
}

/* ========== あたらしい情報_カルーセル ========== */
.carou,.news {
  position: relative;
}
.carou:before,
.news:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  clip-path: inset(0 0 round 1.5px 1.5px);
  border-top: solid 3px #ffdcc5;
  z-index: 1;
}

.carou .ttl,
.news .ttl {
  margin: 0 auto 50px;
  padding: 25px 0;
  width: 100%;
  position: relative;
  display: inline-block;
  text-align: center;
}
.carou .ttl:before,
.carou .ttl:after,
.news .ttl:before,
.news .ttl:after {
  position: absolute;
  bottom: 0;
  width: calc(50% - 40px);
  height: 3px;
  content: "";
  clip-path: inset(0 0 round 1.5px 1.5px);
  border-top: solid 3px #ffdcc5;
  z-index: 1;
}
.carou .ttl:before,
.news .ttl:before {
  left: 0;
}
.carou .ttl:after,
.news .ttl:after {
  right: 0;
}
.carou h2,
.news h2 {
  /*  font-size: 2.8rem; */
  font-size: 180%;
  font-weight: 500;
  color: #e99d40;
  position: relative;
}
.carou h2:before,
.news h2:before {
  position: absolute;
  left: calc(50% - 21px);
  bottom: -42px;
  width: 42px;
  height: 21px;
  content: "";
  background-image: url(/images/top2022/arrow_dwn01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}
.carou .slide {
  margin: 0 auto;
  padding: 15px 0;
  width: calc(100% - 100px);
  max-width: 1100px;
  position: relative;

  display: flex;
  justify-content: center;
  align-items: stretch;
  display: none;
}
/* ==== news ==== */
.news > ul > li {list-style: none;position: relative;}
.news > ul > li >.info-data > a
{display:flex;
  align-items: flex-start;
  justify-content: left;
  border-bottom:1px dotted #333333;
  padding:1em;
  text-decoration: none!important;
  position: relative;}
.news > ul > li > .info-data > a:link p.date,.news > ul > li > .info-data > a:visited p.date{min-width:15%;color:#e99d40!important;}
.news > ul > li > .info-data > a:link p.infomm,
.news > ul > li > .info-data > a:visited p.infomm{color:#333333!important;}
.info-data::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../images/top2022/info-icon.png) no-repeat center / cover;
}
.more-info {
  text-align: center;
}
a.btn-news-list {
  font-size: 1.4em;
  padding:0.5em 4em;
  background: #e99d40;
  margin: 40px auto 40px;
  border-radius: 40px;
  display: inline-block;
  color:#ffffff;
  text-align: center;
  text-decoration: none;
}
/* ==== adjust for slick ==== */
.carou .slick-track {
  display: flex;

}
.carou .slick-slide {
  height: auto !important;
}
.carou .slide.slick-initialized {
  display: block;
}
.carou .slide .slide-arrow {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}
.carou .slide .slide-arrow.prev-arrow {
  left: -50px;
}
.carou .slide .slide-arrow.next-arrow {
  right: -50px;
}
.carou .slide .slide-dots {
  margin: 0;
  padding: 0;
  text-align: center;
}
.carou .slide .slide-dots li {
  display: inline-block;
  margin: 0 10px;
}
.carou .slide .slide-dots li button {
  position: relative;
  text-indent: -9999px;
  background: none;
  border: none;
  outline: none;
  padding: 0 4px;
}
.carou .slide .slide-dots li button::before {
  content: "";
  cursor: pointer;
  width: 16px;
  height: 16px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 20px;
  background-color: #fff4e6;
  border-radius: 8px;
}
.carou .slide .slide-dots li.slick-active button::before {
  background-color: #e99d40;
}

/* ========== あたらしい情報_カルーセル_カード ========== */
.carou .card {
  margin: 0 10px;
  padding: 15px 0;
  width: 250px;
  border-radius: 10px;
  border: 1px solid #eaeaea;
}
.carou .card figure {
  margin: 0 auto 15px;
  width: 220px;
}
.carou .card a {
  text-decoration: none;
  color: #000;
  display: block;
  transition: all 0.3s ease 0s;
}
.carou .card p {
  margin: 0 15px;
  font-size: 1.5rem;
  /*  font-size: 1.5rem; */
  font-size: 96.8%;
  font-weight: normal;
  line-height: 1.5;
}
.carou .card .date {
  margin-bottom: 0.5em;
  color: #e99d40;
  /*  font-size: 1.3rem; */
  font-size: 83.9%;
}
.carou .card a:hover {
  opacity: 0.7;
}

/* ========== 下痢や腹痛などの症状が続く方へ ========== */
.symptoms {
  border: 20px solid #f6f5f2;
  border-radius: 40px;
}
.symptoms h2 {
  margin: -20px auto 0;
  padding: 1em 0.5em;
  width: 45%;
  /*  font-size: 2.8rem; */
  font-size: 180%;
  font-weight: 500;
  color: #e99d40;
  line-height: 1.3;
  text-align: center;
  background-color: #f6f5f2;
  border-radius: 0 0 20px 20px;
}
.symptoms h2 span {
  display: inline-block;
}
.symptoms .box {
  margin: 0 auto 20px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.symptoms .illust01,
.symptoms .illust02 {
  width: 23.14%;
}
.symptoms ul {
  margin: 15px 0 25px;
  width: 50%;
  list-style: none;
}
.symptoms ul li {
  padding: 1em 0 1em 3em;
  width: 100%;
  height: auto;
  background: url(/images/top2022/dotline01.png) left bottom repeat-x;
  position: relative;
}
.symptoms ul li::before {
  position: absolute;
  top: 20px;
  left: 0;
  content: "";
  width: 22px;
  height: 15px;
  background-repeat: no-repeat;
  background-image: url(/images/top2022/check01.svg);
  background-size: contain;
  vertical-align: middle;
  z-index: -1;
}
.symptoms ul li a {
  /*  font-size: 1.8rem; */
  font-size: 116.1%;
  font-weight: 700;
  color: #7f3c2f;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.symptoms ul li a:hover {
  opacity: 0.7;
}

/* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
.knowledge {
  max-width: initial;
  max-width: auto;
  width: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 90px,
    #fff4e6 90px,
    #fff4e6 100%
  );
  position: relative;
}
.knowledge .whole {
  margin: 0 auto 80px;
  padding: 90px 0 80px;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.knowledge .left,
.knowledge .right {
  width: 570px;
  position: relative;
}
.knowledge .left:before,
.knowledge .right:before {
  position: absolute;
  left: 50%;
  top: -90px;
  width: 73.7%;
  aspect-ratio: 1 / 1;
  content: "";
  background-color: #fff4e6;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
.knowledge .left .box,
.knowledge .right .box {
  padding: 30px 0 15px 0;
  width: 100%;
  background-color: #ffffff;
  border: 5px solid #ffdcc5;
  border-radius: 10px;
  position: relative;
}
.knowledge h2 {
  padding: 45px 0 30px;
  /*  font-size: 2.8rem; */
  font-size: 180%;
  font-weight: 500;
  color: #e99d40;
  line-height: 1.3;
  text-align: center;
  position: relative;
}
.knowledge h2::before {
  position: absolute;
  top: -70px;
  left: 50%;
  content: "";
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  z-index: -1;
}
.knowledge .left h2::before {
  width: 49px;
  height: 69px;
  background-image: url(/images/top2022/icon01.svg);
}
.knowledge .right h2::before {
  width: 62px;
  height: 68px;
  background-image: url(/images/top2022/icon02.svg);
}
.knowledge h3 {
  margin: 0 auto;
  padding-left: 30px;
  width: 89.4%;
  /*  font-size: 1.8rem; */
  font-size: 116.1%;
  font-weight: 700;
  color: #7f3c2f;
  line-height: 1.5;
  position: relative;
}
.knowledge h3:before {
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  content: "";
  background-color: #ffdcc5;
  border-radius: 10px;
  z-index: 1;
}

.knowledge ul {
  margin: 15px auto;
  padding-bottom: 1em;
  width: 89.4%;
  list-style: none;
  background: url(/images/top2022/dotline01.png) left bottom repeat-x;
}
.knowledge ul:last-of-type {
  padding-bottom: 0;
  background: none;
}
.knowledge ul li {
  margin-left: 30px;
  padding: 0 0 0 1em;
  width: 100%;
  height: auto;
  position: relative;
}
.knowledge ul li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  content: "";
  width: 6px;
  height: 11px;
  background-repeat: no-repeat;
  background-image: url(/images/top2022/arrow01.svg);
  background-size: contain;
  vertical-align: middle;
}
.knowledge ul li a {
  /*  font-size: 1.5rem; */
  font-size: 96.8%;
  color: #333333;
  line-height: 1.8;
  text-align: left;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.knowledge .illust03 {
  width: 26.31%;
  position: absolute;
  top: 20px;
  right: 5%;
}
.knowledge .illust04 {
  width: 39.12%;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.knowledge ul li a:hover {
  opacity: 0.7;
}

/* ==========
IBD患者さんのためのたべものガイド
医療関係者や患者さんからのメッセージ
 ========== */
.pickup {
  margin: 0 auto 80px;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.pickup .guide,
.pickup .message {
  width: 570px;
  position: relative;
  background-color: #f6f5f2;
  border-radius: 10px;
}
.pickup h2 {
  margin: 40px 0 30px;
  /*  font-size: 2.8rem; */
  font-size: 180%;
  font-weight: 500;
  color: #e99d40;
  line-height: 1.3;
  text-align: center;
  position: relative;
}
.pickup h2 span {
  display: inline-block;
}
.pickup .box {
  margin: 0 30px;
  padding: 20px 0 20px 0;
  width: calc(100% - 60px);
  background-color: #ffffff;
  border: 5px solid #ffdcc5;
  border-radius: 10px;
  position: relative;
}

.pickup ul.list {
  margin: 15px auto;
  width: 89.4%;
  list-style: none;
}
.pickup ul.list li {
  padding: 20px 0 20px 30px;
  width: 100%;
  height: auto;
  background: url(/images/top2022/dotline01.png) left bottom repeat-x;
  position: relative;
}
.pickup ul.list li::before {
  position: absolute;
  top: 24px;
  left: 6px;
  content: "";
  width: 11px;
  height: 17px;
  background-repeat: no-repeat;
  background-image: url(/images/top2022/arrow02.svg);
  background-size: contain;
  vertical-align: middle;
}
.pickup ul.list li:first-child {
  padding-top: 0;
}
.pickup ul.list li:first-child::before {
  top: 4px;
}
.pickup ul.list li:last-of-type {
  padding-bottom: 0;
  background: none;
}
.pickup ul.list li a {
  /*  font-size: 1.8rem; */
  font-size: 116.1%;
  font-weight: 700;
  color: #7f3c2f;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
}

/* たべものガイド */
.pickup .guide {
  padding-bottom: 30px;
}
.pickup .guide .box {
  margin-bottom: 60px;
  padding: 10px 0 10px 0;
}
.pickup .guide ul.list li {
  padding: 8px 0 8px 30px;
  width: 70%;
  background: none;
  transition: all 0.3s ease 0s;
}
.pickup .guide ul.list li::before {
  position: absolute;
  top: calc(5px + 0.5em);
}
.pickup .illust05 {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 26.67%;
}

/* レシピ */
.recipe {
  margin: 30px 30px 0;
  padding: 15px;
  background-color: #ffffff;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    #ffe197 4px,
    #ffe197 6px
  );
  width: 510px;
  height: auto;
  border-radius: 10px;
}
.recipe .inner {
  padding-bottom: 10px;
  background-color: #ffffff;
  width: 100%;
  height: auto;
  border-radius: 10px;
  position: relative;
}
.recipe h3 {
  width: 80%;
  max-width: 350px;
  height: 40px;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}
.recipe h3 span {
  margin: -50px auto 10px;
  display: inline-block;
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0 15px;
  /*  font-size: 2.4rem; */
  font-size: 154.8%;
  background: #e99d40;
  color: #fff;
  box-sizing: border-box;
}
.recipe h3 span:before,
.recipe h3 span:after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  border-color: #e99d40 transparent;
  border-style: solid;
  z-index: 1;
}
.recipe h3 span:before {
  top: 0;
  left: -15px;
  border-width: 20px 0px 20px 15px;
}
.recipe h3 span:after {
  top: 0;
  right: -15px;
  border-width: 20px 15px 20px 0px;
}

.recipe ul {
  margin: -15px auto 25px;
  width: calc(100% - 50px);
  list-style: none;
}
.recipe li {
  margin-bottom: 20px;
  padding-bottom: 20px;
  width: 100%;
  height: auto;
  background: url(/images/top2022/dotline01.png) left bottom repeat-x;
  position: relative;
}
.recipe li:last-child {
  margin-bottom: 0;
  padding-bottom: 15px;
  background: none;
}
.recipe li a {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
.recipe figure {
  width: 90px;
  height: 100px;
  overflow: hidden;
}
.recipe figure img {
  width: 90px;
  height: 100px;
  object-fit: cover;
}
.recipe .txt {
  width: calc(100% - 110px);
}
.recipe .txt h4 {
  /*  font-size: 1.8rem; */
  font-size: 116.1%;
  font-weight: 500;
  color: #7f3c2f;
  line-height: 1.5;
  text-align: left;
}
.recipe .txt p {
  /*  font-size: 1.5rem; */
  font-size: 96.8%;
  font-weight: 400;
  color: #333333;
  line-height: 1.5;
  text-align: right;
  position: absolute;
  bottom: 15px;
  right: 0;
}
.recipe .txt p span.arrow {
  padding-right: 30px;
  position: relative;
}
.recipe .txt p span.arrow::before {
  position: absolute;
  top: -2px;
  right: 0;
  content: "";
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-image: url(/images/top2022/arrow_round01.svg);
  background-size: contain;
  vertical-align: middle;
}
/* 知りたいコト */

/* 先生のキモチ */
.think {
  padding: 43px 0 0 0;
  position: absolute;
  bottom: 0;

  width: 100%;
  height: auto;
}
.think h3 {
  padding-left: 30px;
  height: 50px;
  /*  font-size: 2.4rem; */
  font-size: 154.8%;
  font-weight: 700;
  color: #ffffff;
  line-height: 50px;
  position: relative;
  z-index: 0;
}
.think h3::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 50%;
  height: 50px;
  border-radius: 0 25px 0 0;
  background-color: #e99d40;
  z-index: -2;
}
.think h3::after {
  position: absolute;
  top: -43px;
  right: 20px;
  content: "";
  width: 180px;
  height: 93px;

  background-repeat: no-repeat;
  background-image: url(/images/top2022/illust06.svg);
  background-size: contain;
  background-position: center bottom;
  z-index: -1;
}
.think p {
  padding: 30px 50px 30px 30px;
  width: 100%;
  height: auto;
  border-top: 5px solid #e99d40;
  border-radius: 0 0 10px 10px;
  background-color: #fcf4cd;
  position: relative;
}
.think p a {
  /*  font-size: 2.2rem; */
  font-size: 141.9%;
  font-weight: 500;
  color: #7f3c2f;
  line-height: 1.3;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease 0s;
}
.think p::before {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  content: "";
  width: 15px;
  height: 24px;
  background-repeat: no-repeat;
  background-image: url(/images/top2022/arrow04.svg);
  background-size: contain;
  vertical-align: middle;
}
.think p span {
  display: inline-block;
}
.pickup ul.list li a:hover,
.recipe li a:hover,
.think p a:hover {
  opacity: 0.7;
}

/* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
.future {
  max-width: initial;
  max-width: auto;
  width: 100%;
  background-color: #fcf6d6;
  position: relative;
}
.future .whole {
  margin: 0 auto;
  max-width: 1200px;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: relative;
}
.future .whole::before {
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  transform: translateY(-50%);
  width: 570px;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  border-radius: 50%;
}
.future .left,
.future .right {
  width: 570px;
  position: relative;
}
.future .left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.future .right {
  padding: 35px 0;
}
.future h2 {
  /*  font-size: 2.8rem; */
  font-size: 180%;
  font-weight: 500;
  color: #e99d40;
  line-height: 1.3;
  text-align: center;
  position: relative;
}
.future .illust07 {
  width: 55.44%;
  position: relative;
  margin-top: 2em;
}
.future .box {
  padding: 15px 0 15px 0;
  width: 100%;
  background-color: #ffffff;
  border: 5px solid #ffdcc5;
  border-radius: 10px;
  position: relative;
}
.future ul.list {
  margin: 15px auto;
  width: 89.4%;
  list-style: none;
}
.future ul.list li {
  padding: 20px 0 20px 30px;
  width: 100%;
  height: auto;
  background: url(/images/top2022/dotline01.png) left bottom repeat-x;
  position: relative;
}
.future ul.list li::before {
  position: absolute;
  top: 28px;
  left: 6px;
  content: "";
  width: 11px;
  height: 17px;
  background-repeat: no-repeat;
  background-image: url(/images/top2022/arrow02.svg);
  background-size: contain;
  vertical-align: middle;
}
.future ul.list li:first-child {
  padding-top: 0;
}
.future ul.list li:first-child::before {
  top: 0.5em;
}
.future ul.list li a {
  /*  font-size: 2rem; */
  font-size: 129%;
  font-weight: 700;
  color: #7f3c2f;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.future ul.list li span {
  display: inline-block;
}
.future ul.list li span.sub {
  /*  font-size: 1.4rem; */
  font-size: 90.3%;
}

.future h3 {
  margin: 0 auto;
  padding-left: 30px;
  width: 89.4%;
  /*  font-size: 2rem; */
  font-size: 129%;
  font-weight: 700;
  color: #7f3c2f;
  line-height: 1.5;
  position: relative;
}
.future h3:before {
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  content: "";
  background-color: #ffdcc5;
  border-radius: 10px;
  z-index: 1;
}

.future ul.sub {
  margin: 10px auto;
  padding-bottom: 1em;
  width: 89.4%;
  list-style: none;
  background: url(/images/top2022/dotline01.png) left bottom repeat-x;
}
.future ul.sub:last-of-type {
  padding-bottom: 0;
  background: none;
}
.future ul.sub li {
  margin-left: 30px;
  padding: 0 0 0 1em;
  width: 100%;
  height: auto;
  position: relative;
  transition: all 0.3s ease 0s;
}
.future ul.sub li::before {
  position: absolute;
  top: 0.6em;
  left: 0;
  content: "";
  width: 6px;
  height: 11px;
  background-repeat: no-repeat;
  background-image: url(/images/top2022/arrow01.svg);
  background-size: contain;
  vertical-align: middle;
}
.future ul.sub li a {
  padding-right: 24px;
  /*  font-size: 1.5rem; */
  font-size: 96.8%;
  color: #333333;
  line-height: 1.8;
  text-align: left;
  text-decoration: none;
  position: relative;
}
.future ul.sub li a::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url(/images/top2022/arrow_outer.svg);
  background-size: contain;
  vertical-align: middle;
}
.future ul.list li a:hover,
.future ul.sub li a:hover {
  opacity: 0.7;
}

/* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
.bnr {
  margin: 0 auto 80px;
  width: auto;
  max-width: 1200px;
}
.bnr .btn {
  margin: 0 auto 60px;
  width: 100%;
  height: 90px;
  /*  font-size: 2.8rem; */
  font-size: 180%;
  font-weight: 500;
  line-height: 90px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.bnr .btn::after {
  position: absolute;
  top: calc(50% - 13px);
  right: 26px;
  width: 15px;
  height: 25px;
  content: "";
  background-repeat: no-repeat;
  background-image: url(/images/top2022/arrow03_wh.svg);
  background-size: contain;
  z-index: 1;
}
.bnr .btn a {
  width: 100%;
  color: #ffffff;
  background-color: #e99d40;
  border-radius: 10px;
  display: block;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.bnr ul {
  width: 100%;
  list-style: none;

  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.bnr ul li {
  margin: 0 0 30px 0;
  width: 580px;
  height: auto;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.bnr ul li div.ibdhome {
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}

.bnr ul li a {
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease 0s;
}
.bnr ul li a p {
  padding-top: 0.5em;
  /*  font-size: 1.4rem; */
  font-size: 90.3%;
  color: #333333;
}
.bnr .btn a:hover,
.bnr ul li a:hover {
  opacity: 0.7;
}

/* --------------------------------------------------------
	media query
-------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  article {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
  }

  /* ========== 共通 ========== */
  .article__contents {
    margin-bottom: 60px;
  }


/* ==== news ==== */
.news {width:96%}
.news > ul > li >.info-data > a{flex-wrap: wrap;}
.news > ul > li > .info-data > a p.date{min-width:100%;}
.news > ul > li > .info-data > a p.infomm{width:calc(100% - 40px);}





  /* ========== あたらしい情報_カルーセル_カード ========== */
  .carou {
    width: 98%;
  }
  .carou .card {
    margin: 0 10px;
    padding: 15px 0;
    width: 46%;
    border-radius: 10px;
    border: 1px solid #eaeaea;
  }
  .carou .card figure {
    margin: 0 auto 15px;
    width: 90%;
  }
  /* ========== 下痢や腹痛などの症状が続く方へ ========== */
  .symptoms {
    width: 98%;
  }

  /* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
  .knowledge .whole {
    margin: 0 auto 60px;
    padding: 90px 0 40px;
    max-width: 98%;
  }
  .knowledge .left,
  .knowledge .right {
    width: 48%;
    position: relative;
  }
  .knowledge h2 {
    padding: 30px 0 20px;
  }

  /* ==========
IBD患者さんのためのたべものガイド
医療関係者や患者さんからのメッセージ
 ========== */
  .pickup {
    margin: 0 auto 60px;
    max-width: 98%;
  }
  .pickup .guide,
  .pickup .message {
    width: 48%;
  }
  .pickup h2 {
    margin: 30px 0 20px;
  }

  /* レシピ */
  .recipe {
    margin: 30px 30px 0;
    padding: 15px;
    width: calc(100% - 60px);
  }
  .recipe .txt p span.arrow {
    padding-right: 24px;
    position: relative;
  }
  .recipe .txt p span.arrow::before {
    top: -3px;
    right: 0;
    content: "";
    width: 18px;
    height: 18px;
  }
  /* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
  .future .whole {
    width: 98%;
  }

  .future .whole::before {
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
    transform: translateY(-50%);
    width: 46vw;
    aspect-ratio: 1 / 1;
  }
  .future .left,
  .future .right {
    width: 48%;
    position: relative;
  }
  .future .left {
    margin: 80px 0;
  }

  /* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
  .bnr {
    margin: 0 auto 80px;
    max-width: 98%;
  }
  .bnr ul li {
    margin: 0 0 30px 0;
    width: 48%;
  }
}

@media screen and (max-width: 1200px) {
  .mt-80 {
    margin-top: 40px !important;
  }
  .pickup h2 {
    font-size:150%;
  }
  .
  article {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
  }
  .article__inner {
    width: 100%;
  }
  main {
    width: 100%;
  }

  .content__ttl__wrap {
    display: block;
  }
  /* ========== 共通 ========== */
  .article__contents {
    margin-bottom: 40px;
  }
  #Symptoms,
  #Knowledge2,
  #Guide,
  #Message,
  #Future,
  #User {
    scroll-margin-top: 130px;
  }
  #Knowledge {
    scroll-margin-top: 180px;
  }

  .mv .forPC {
    display: none;
  }
  .mv .forSP {
    display: block;
  }
  .mv {
    margin: 0 auto 40px;
    max-width: initial;
    max-width: auto;
    max-height: initial;
    max-height: auto;
    width: 100%;
    height: auto;
    background: none;
  }
  .mv .whole {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: initial;
    max-width: auto;
    position: relative;
  }
  .mv .btn01,
  .mv .btn02,
  .mv .btn03,
  .mv .btn04,
  .mv .btn05,
  .mv .btn06,
  .mv .btn07 {
    max-width: initial;
    max-width: auto;
    transform: none;
  }
  .mv .btn01 a:hover,
  .mv .btn02 a:hover,
  .mv .btn03 a:hover,
  .mv .btn04 a:hover,
  .mv .btn05 a:hover,
  .mv .btn06 a:hover,
  .mv .btn07 a:hover {
    transform: none;
  }
  .mv .btn01 {
    position: absolute;
    top: 5.3vw;
    left: 26.2%;
    width: 43.2%;
  }
  .mv .btn02 {
    position: absolute;
    top: 32vw;
    left: 2.5%;
    width: 43.47%;
  }
  .mv .btn03 {
    position: absolute;
    top: 28vw;
    left: 55.6%;
    width: 41%;
  }
  .mv .btn04 {
    position: absolute;
    top: 59.6vw;
    left: 3.7%;
    width: 40.6%;
  }
  .mv .btn05 {
    position: absolute;
    top: 59.5vw;
    left: 53.2%;
    width: 46%;
  }
  .mv .btn06 {
    position: absolute;
    top: 88.5vw;
    left: 1.6%;
    width: 45%;
  }
  .mv .btn07 {
    position: absolute;
    top: 92.5vw;
    left: 56%;
    width: 40%;
  }

  /* ==== SNS アイコンが今の位置で正しい場合 ==== */
  .under__content__middle__recipe__section + .carou {
    margin-top: 20px;
  }

  /* ==== adjust for slick ==== */
  .carou .slide .slide-arrow {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
  }
  
  /* ========== あたらしい情報_カルーセル_カード ========== */
  .carou .ttl {
    margin: 0 auto 40px;
    padding: 20px 0;
  }
  .carou .slide {
    margin: 0 auto;
    padding: 5px 0;
  }
  .carou .card {
    margin: 0 10px;
    padding: 15px 0;
    width: 90%;
    border-radius: 10px;
    border: 1px solid #eaeaea;
  }
  .carou .card figure {
    margin: 0 auto 15px;
    width: 90%;
  }

  /* ========== 下痢や腹痛などの症状が続く方へ ========== */
  .symptoms h2 {
    margin: -20px auto 0;
    padding: 1em;
    width: 70%;
    /*  font-size: 2.4rem; */
    font-size: 154.8%;
    font-weight: 500;
    color: #e99d40;
    line-height: 1.3;
    text-align: center;
    background-color: #f6f5f2;
    border-radius: 0 0 20px 20px;
  }
  .symptoms .box {
    margin: 0 auto 18px;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .symptoms .illust01 {
    width: 40%;
    order: 2;
  }
  .symptoms .illust02 {
    width: 40%;
    order: 3;
  }
  .symptoms ul {
    margin: 15px 0 30px;
    width: 100%;
    list-style: none;
    order: 1;
  }

  /* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
  .knowledge {
    max-width: initial;
    max-width: auto;
    width: 100%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 90px,
      #fff4e6 90px,
      #fff4e6 100%
    );
    position: relative;
  }
  .knowledge ul li {

    width: auto;

}
  .knowledge .whole {
    margin: 0 auto 80px;
    padding: 70px 0 40px;
    width: 90%;
    max-width: initial;
    max-width: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .knowledge .left,
  .knowledge .right {
    width: 100%;
    position: relative;
  }
  .knowledge .left:before {
    position: absolute;
    left: 50%;
    top: -60px;
    width: 80%;
    aspect-ratio: 1 / 1;
    content: "";
    background-color: #fff4e6;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  .knowledge .right:before {
    content: none;
  }
  .knowledge h2 {
    padding: 30px 0 15px;
    font-size:150%;
  }
  .knowledge .left h2::before {
    top: -40px;
    width: 40px;
    height: 55px;
  }
  .knowledge .right h2::before {
    top: -40px;
    width: 50px;
    height: 55px;
  }

  .knowledge .left .box,
  .knowledge .right .box {
    padding: 30px 0 15px 0;
    width: 100%;
    background-color: #ffffff;
    border: 5px solid #ffdcc5;
    border-radius: 10px;
    position: relative;
  }

  .knowledge .right {
    padding-top: 60px;
  }
  .knowledge h2::before {
    top: -50px;
    z-index: 1;
  }
  .knowledge .illust04 {
    margin: 40px auto 0;
    width: 64.26%;
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .knowledge .illust03 {
    width: 22.31%;
    position: absolute;
    top: 60px;
    right: 5%;
}

  /* ==========
IBD患者さんのためのたべものガイド
医療関係者や患者さんからのメッセージ
 ========== */
  .pickup {
    margin: 0 auto 40px;
    width: 98%;
    max-width: initial;
    max-width: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pickup .guide,
  .pickup .message {
    margin: 0 auto 40px;
    width: 100%;
  }
  .pickup .illust05 {
    position: relative;
    margin: 0 auto;
    width: 50%;
    top: auto;
    right: auto;
  }

  /* レシピ */
  .recipe {
    margin: 30px 30px 0;
    padding: 15px;
    width: calc(100% - 60px);
  }

  /* 先生のキモチ */
  .think {
    margin-top: 40px;
    padding: 30px 0 0 0;
    position: relative;
    width: 100%;
    height: auto;
  }
  .think h3 {
    padding-left: 30px;
    height: 45px;
    /*  font-size: 2rem; */
    font-size: 129%;
    font-weight: 700;
    color: #ffffff;
    line-height: 45px;
    position: relative;
  }
  .think h3::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    min-width: 50%;
    max-width: 80%;
    height: 45px;
    border-radius: 0 22px 0 0;
    background-color: #e99d40;
  }
  .think h3::after {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 5px;
    content: "";
    width: 17.3%;
    height: calc(17.3vw * 93 / 180);
  }

  .think p span {
    font-size:94%;
}

  /* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
  .future {
    max-width: initial;
    max-width: auto;
    width: 100%;
    background-color: #fcf6d6;
    position: relative;
  }
  .future .whole {
    margin: 0 auto;
    width: 100%;
    max-width: initial;
    max-width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .future .whole::before {
    content: none;
  }
  .future .left,
  .future .right {
    width: 100%;
    position: relative;
  }
  .future .left {
    margin: 0 0 40px 0;
    height: 72vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  .future .left::before {
    position: absolute;
    top: -8vw;
    left: 50%;
    content: "";
    transform: none;
    transform: translateX(-50%);
    width: 80vw;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    border-radius: 50%;
  }
  .future .right {
    margin: 0 auto;
    padding: 0 0 35px 0;
    width: 90%;
  }

  .future h2 {
    margin-top: 8vw;
    margin-bottom: 8vw;
    font-size:150%;
  }
  .future ul.sub li {
    margin-left: 5px;
  }
  .future ul.sub li a {
    padding-right: 18px;
  }
  .future ul.sub li a::after {
    width: 12px;
    height: 12px;
  }
  /* ==========
== 診断初期に知りたいキホン
== 症状悪化時に知りたいコト
 ========== */
  .bnr {
    margin: 0 auto 80px;

    max-width: initial;
    max-width: auto;
    width: 98%;
  }
  .bnr .btn {
    margin: 0 auto 50px;
    height: 80px;
    /*  font-size: 2.4rem; */
    font-size: 154.8%;
    line-height: 80px;
  }
  .bnr .btn::after {
    position: absolute;
    top: calc(50% - 10px);
    right: 26px;
    width: 10px;
    height: 20px;
  }
  .bnr ul {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .bnr ul li {
    margin: 0 0 15px 0;
    width: 100%;
  }
  .bnr ul li a p {
    /*  font-size: 0.9rem; */
    font-size: 58%;
  }


  .future ul.list li span.sub {
    /* font-size: 1.4rem; */
    font-size: 80%;
}

.pickup .guide ul.list li {

    width: 100%;

}
}
.prdbtn{	
background-color: #e99d40;	
height: 100%!important;	
border-radius: 10px;	
min-height:140px;	
margin: 0 auto 0px!important;	
}