@charset "UTF-8";
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  overflow-x: hidden;
}

body main {
  font-family: yu-gothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  padding-top: 104px;
}
@media screen and (max-width: 768px) {
  body main {
    padding-top: 60px;
  }
}

/* ======== layout ======== */

.inline_bk{display: inline-block !important;}

.habit-lab {
  position: relative;
}
.habit-lab::after {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background: url("../img/bg-body.jpg") no-repeat center center/cover;
}
.habit-lab main {
  padding-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .habit-lab main {
    padding-bottom: 80px;
  }
}

.inner {
  max-width: 1060px;
  margin: 0 auto;
  padding-inline: 40px;
}
@media screen and (max-width: 768px) {
  .inner {
    padding-inline: 20px;
  }
}

.section__title {
  display: block;
  margin: 0 auto;
}
.section__paragraph {
  display: block;
  margin: 0 auto;
}

/* ======== header ======== */
.header {
  background-color: rgb(255, 255, 255);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  transition: 0.3s;
  backdrop-filter: blur(10px);
}
.header.is-scroll {
  background-color: rgba(255, 255, 255, 0.6);
}
.header.is-scroll .header__inner {
  padding: 12px 34px;
}
@media screen and (max-width: 768px) {
  .header.is-scroll .header__inner {
    padding: 12px 20px;
  }
}
.header__inner {
  width: 100%;
  padding: 26px 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .header__inner {
    padding: 12px 20px;
  }
}
.header__start {
  width: 109.4px;
}
@media screen and (max-width: 768px) {
  .header__start {
    width: 70px;
  }
}
.header__start a {
  transition: 0.3s;
}
@media (hover: hover) {
  .header__start a:hover {
    opacity: 0.8;
  }
}
.header__end {
  display: flex;
  align-items: center;
  gap: 45px;
}
@media screen and (max-width: 768px) {
  .header__end {
    gap: 30px;
  }
}
.header__contact-link {
  color: #000000 !important;
  font-size: 12px;
  text-decoration: none;
}
@media (hover: hover) {
  .header__contact-link:hover {
    text-decoration: underline;
  }
}
.header__menu-trig {
  width: 35px;
  height: 30px;
  position: relative;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .header__menu-trig {
    width: 30px;
    height: 20px;
  }
}
.header__menu-trig span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #555555;
  position: absolute;
  left: 0;
  transition: 0.3s;
}
.header__menu-trig span:nth-child(1) {
  top: 0;
}
.header__menu-trig span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.header__menu-trig span:nth-child(3) {
  bottom: 0;
}
.header__menu-content {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 200;
  background-color: #8ce5ec;
  padding: 80px 60px;
  border-radius: 40px 0 0 40px;
  opacity: 0;
  transform: translateX(100%);
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .header__menu-content {
    padding: 60px 20px 40px;
    border-radius: 20px 0 0 20px;
  }
}
.header__menu-content.is-active {
  opacity: 1;
  transform: translateX(0);
}
.header__menu-close {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .header__menu-close {
    top: 20px;
    right: 20px;
    width: 35px;
  }
}
@media (hover: hover) {
  .header__menu-close:hover {
    opacity: 0.8;
  }
}
.header__menu-gnav a {
  display: block;
  position: relative;
}
.header__menu-gnav a::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-top: 1px solid #0098eb;
  border-right: 1px solid #0098eb;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .header__menu-gnav a::after {
    width: 6px;
    height: 6px;
  }
}
.header__menu-gnav a.no-arrow::after {
  display: none;
}
.header__menu-gnav a.no-link {
  pointer-events: none;
}
@media (hover: hover) {
  .header__menu-gnav a:hover::after {
    right: -4px;
  }
}
.header__menu-gnav__item {
  padding-inline: 10px;
  border-bottom: 1px solid #0098eb;
}
.header__menu-gnav__item > a {
  padding-block: 20px;
}
@media screen and (max-width: 768px) {
  .header__menu-gnav__item > a {
    padding-block: 13px;
  }
}
.header__menu-gnav__item > a > img {
  height: 18.5px;
}
@media screen and (max-width: 768px) {
  .header__menu-gnav__item > a > img {
    height: 14px;
  }
}
.header__menu-gnav__child__list {
  padding-left: 80px;
  padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .header__menu-gnav__child__list {
    padding-left: 40px;
    padding-bottom: 10px;
  }
}
.header__menu-gnav__child__item > a {
  padding-block: 8px;
}
.header__menu-gnav__child__item > a > img {
  height: 13px;
}
@media screen and (max-width: 768px) {
  .header__menu-gnav__child__item > a > img {
    height: 12px;
  }
}

/* ======== footer ======== */
.gnav-footer {
  border-top: 0;
}
.gnav-footer > .inner {
  padding-top: 0;
}
.gnav-footer .footer-btm .inner-sns {
  margin-top: 0;
}
.gnav-footer .page-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
@media screen and (max-width: 980px) {
  .gnav-footer .page-top {
    bottom: 20px;
    right: 20px;
    width: 35px;
  }
}
.gnav-footer .page-top.is-show {
  opacity: 1;
  visibility: visible;
}

/* ======== main-visual ======== */
.main-visual {
  position: relative;
}
@media screen and (max-width: 980px) {
  .main-visual {
    min-height: 100dvh;
  }
}
.main-visual > .inner {
  padding-block: 100px 130px;
  display: flex;
  flex-direction: column;
  gap: 368px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 980px) {
  .main-visual > .inner {
    padding-block: 60px 60px;
    gap: 30vw;
  }
}
.main-visual__title {
  max-width: 540px;
}
@media screen and (max-width: 980px) {
  .main-visual__title {
    max-width: 60%;
  }
}
.main-visual__paragraph {
  max-width: 500px;
  align-self: flex-end;
}
@media screen and (max-width: 980px) {
  .main-visual__paragraph {
    max-width: 75%;
  }
}

.scroll-down {
  width: 22px;
  position: absolute;
  bottom: 380px;
  right: 15px;
  padding-bottom: 70px;
  background: url("../img/ico-scroll-arrow.svg") no-repeat right bottom/17.5px auto;
}
@media screen and (max-width: 980px) {
  .scroll-down {
    width: 15px;
    bottom: 80px;
    right: 10px;
    padding-bottom: 60px;
    background-size: 14px auto;
  }
}
.scroll-down__txt {
  max-width: 16px;
}
@media screen and (max-width: 980px) {
  .scroll-down__txt {
    max-width: 14px;
  }
}

/* ======== top common ======== */
.bubble-btn__wrap {
  margin: 58px auto 0;
  max-width: 760px;
  display: flex;
  gap: 0 24px;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 980px) {
  .bubble-btn__wrap {
    margin-top: 40px;
  }
}
.bubble-btn__wrap .bubble-btn {
  width: 360px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 980px) {
  .bubble-btn__wrap .bubble-btn {
    width: 35vw;
  }
}
.bubble-btn__wrap .bubble-btn a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
@media screen and (max-width: 980px) {
  .bubble-btn__wrap .bubble-btn a {
    max-width: 35vw;
    gap: 12px;
  }
}
.bubble-btn__wrap .bubble-btn a img {
  max-height: 77.5px;
}
.bubble-btn__wrap .bubble-btn a img.btm-img {
  max-height: 43.7px;
}
@media screen and (max-width: 980px) {
  .bubble-btn__wrap .bubble-btn a img {
    max-height: 8vw;
  }
  .bubble-btn__wrap .bubble-btn a img.btm-img {
    max-height: 5vw;
  }
}
@media screen and (max-width: 980px) {
  .bubble-btn__wrap .bubble-btn a svg {
    width: 20px;
    height: 20px
  }
}
.bubble-btn__wrap .bubble-btn a svg circle {
  fill: #0098eb;
  transition: 0.3s;
}
.bubble-btn__wrap .bubble-btn a svg polyline {
  stroke: #fff;
  transition: 0.3s;
}
@media (hover: hover) {
  .bubble-btn__wrap .bubble-btn a:hover svg circle {
    fill: #fff;
  }
  .bubble-btn__wrap .bubble-btn a:hover svg polyline {
    stroke: #0098eb;
  }
}
.bubble-btn__wrap .bubble-btn:nth-child(1) {
  width: 100%;
  margin-bottom: -20px;
}
.bubble-btn__wrap .bubble-btn:nth-child(1) a {
  background: url("../img/bg-btn-bubble-01.png") no-repeat center center/100% auto;
}
.bubble-btn__wrap .bubble-btn:nth-child(2) a {
  background: url("../img/bg-btn-bubble-02.png") no-repeat center center/100% auto;
}
.bubble-btn__wrap .bubble-btn:nth-child(3) a {
  background: url("../img/bg-btn-bubble-03.png") no-repeat center center/100% auto;
}

.img-btn__wrap {
  margin: 80px auto 0;
  max-width: 690px;
  display: flex;
  gap: 0 40px;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 980px) {
  .img-btn__wrap {
    margin-top: 40px;
    max-width: 100%;
    gap: 0 4%;
  }
}
.img-btn__wrap .img-btn {
  width: 325px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 980px) {
  .img-btn__wrap .img-btn {
    width: 48%;
  }
}
.img-btn__wrap .img-btn a {
  position: relative;
  display: block;
  width: 100%;
}
.img-btn__wrap .img-btn a img {
  width: 100%;
  height: auto;
}
@media (hover: hover) {
  .img-btn__wrap .img-btn a:hover.btn-ico__bl svg {
    background-color: #0098eb;
  }
  .img-btn__wrap .img-btn a:hover.btn-ico__bl svg polyline {
    stroke: #fff;
  }
  .img-btn__wrap .img-btn a:hover.btn-ico__wh svg {
    background-color: #fff;
  }
  .img-btn__wrap .img-btn a:hover.btn-ico__wh svg polyline {
    stroke: #333333;
  }
}

.txt-btn__wrap {
  margin: 80px auto 0;
  max-width: 690px;
  display: flex;
  gap: 0 40px;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 980px) {
  .txt-btn__wrap {
    margin-top: 40px;
    max-width: 100%;
    gap: 0 4%;
  }
}
.txt-btn__wrap .txt-btn {
  width: 325px;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 980px) {
  .txt-btn__wrap .txt-btn {
    width: 48%;
  }
}
.txt-btn__wrap .txt-btn a {
  display: block;
  width: 100%;
  border: 1px solid #333333;
  background-color: #fff;
  border-radius: 11px;
  padding: 25px 40px 25px 25px;
  color: #555555;
  text-decoration: none;
  position: relative;
}
@media screen and (max-width: 980px) {
  .txt-btn__wrap .txt-btn a {
    border-radius: 8px;
    padding: 12px 14px 12px 10px;
  }
}
@media (hover: hover) {
  .txt-btn__wrap .txt-btn a:hover.btn-ico__bl svg {
    background-color: #0098eb;
  }
  .txt-btn__wrap .txt-btn a:hover.btn-ico__bl svg polyline {
    stroke: #fff;
  }
  .txt-btn__wrap .txt-btn a:hover.btn-ico__wh svg {
    background-color: #fff;
  }
  .txt-btn__wrap .txt-btn a:hover.btn-ico__wh svg polyline {
    stroke: #333333;
  }
}
.txt-btn__wrap .txt-btn__title {
  font-size: 25px;
  font-weight: bold;
}
@media screen and (max-width: 980px) {
  .txt-btn__wrap .txt-btn__title {
    font-size: 14px;
    line-height: 1.5;
  }
}
.txt-btn__wrap .txt-btn__paragraph {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
}
@media screen and (max-width: 980px) {
  .txt-btn__wrap .txt-btn__paragraph {
    margin-top: 12px;
    font-size: 12px;
  }
}

.btn-ico svg {
  display: block;
  position: absolute;
  bottom: 15px;
  right: 15px;
  border-radius: 50%;
  transition: 0.3s;
}
@media screen and (max-width: 980px) {
  .btn-ico svg {
    bottom: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
  }
}
.btn-ico__bl svg circle {
  stroke: #0098eb;
  transition: 0.3s;
}
.btn-ico__bl svg polyline {
  stroke: #0098eb;
  transition: 0.3s;
}
.btn-ico__wh svg circle {
  stroke: #fff;
  transition: 0.3s;
}
.btn-ico__wh svg polyline {
  stroke: #fff;
  transition: 0.3s;
}

.sns-share__title {
  font-family: YakuHanJPs_Noto, "Noto Sans JP", "Hiragino kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.sns-share-list {
  display: flex;
  justify-content: center;
  gap: 0 25px;
  margin-top: 20px;
}
.sns-share-list__item > a {
  display: block;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.sns-share-list__item .facebook {
  background-image: url(/ja/assets/img/all/ico_facebook.png);
}
.sns-share-list__item .twitter {
  background-image: url(/ja/assets/img/all/ico_twitter.png);
}
.sns-share-list__item .line {
  background-image: url(/ja/assets/img/all/ico_line.png);
}
.sns-share-list__item .instagram {
  background-image: url(/ja/assets/img/all/ico_instagram.png);
}

.img-bubble {
  display: block;
  position: absolute;
  z-index: -1;
  --bubble-distance: 20px;
}

#img-mv-bubble-01 {
  top: 78px;
  right: 233px;
  width: 140.5px;
}
@media screen and (max-width: 980px) {
  #img-mv-bubble-01 {
    top: 10%;
    right: 25%;
    width: 15%;
  }
}
#img-mv-bubble-02 {
  top: 88px;
  right: -101px;
  width: 569px;
}
@media screen and (max-width: 980px) {
  #img-mv-bubble-02 {
    top: 12%;
    right: -5%;
    width: 50%;
  }
}
#img-mv-bubble-03 {
  top: 424px;
  right: -85px;
  width: 183px;
}
@media screen and (max-width: 980px) {
  #img-mv-bubble-03 {
    top: 35%;
    right: -5%;
    width: 20%;
  }
}
#img-mv-bubble-04 {
  top: 428px;
  left: -59px;
  width: 516.5px;
}
@media screen and (max-width: 980px) {
  #img-mv-bubble-04 {
    top: 45%;
    left: -5%;
    width: 35%;
  }
}
#img-mv-bubble-05 {
  top: 878px;
  left: -3px;
  width: 272px;
}
@media screen and (max-width: 980px) {
  #img-mv-bubble-05 {
    display: none;
  }
}
#img-mv-bubble-06 {
  bottom: -180px;
  right: -146px;
  width: 288.5px;
}
@media screen and (max-width: 980px) {
  #img-mv-bubble-06 {
    bottom: -20%;
    right: 20%;
    width: 30%;
  }
}
#img-mv-bubble-07 {
  bottom: -43px;
  left: 116px;
  width: 75.5px;
}
@media screen and (max-width: 980px) {
  #img-mv-bubble-07 {
    bottom: 20%;
    left: 5%;
    width: 10%;
  }
}

#img-about-habit-bubble-01 {
  top: 180px;
  left: -80px;
  width: 288.5px;
}
@media screen and (max-width: 980px) {
  #img-about-habit-bubble-01 {
    top: 25%;
    left: 2%;
    width: 26%;
  }
}
#img-about-habit-bubble-02 {
  top: 309px;
  right: -22px;
  width: 199px;
}
@media screen and (max-width: 980px) {
  #img-about-habit-bubble-02 {
    top: 40%;
    right: -2%;
    width: 22%;
  }
}
#img-about-habit-bubble-03 {
  top: 440px;
  right: 118px;
  width: 89.5px;
}
@media screen and (max-width: 980px) {
  #img-about-habit-bubble-03 {
    top: 54%;
    right: 15%;
    width: 10%;
  }
}
#img-about-habit-bubble-04 {
  bottom: -100px;
  right: -111px;
  width: 219.5px;
}
@media screen and (max-width: 980px) {
  #img-about-habit-bubble-04 {
    bottom: -10%;
    right: -5%;
    width: 20%;
  }
}
#img-about-habit-bubble-05 {
  bottom: -100px;
  left: 0;
  width: 92.5px;
}
@media screen and (max-width: 980px) {
  #img-about-habit-bubble-05 {
    bottom: -8%;
    left: 5%;
    width: 10%;
  }
}

#img-better-habit-bubble-01 {
  top: 112px;
  left: -73px;
  width: 280px;
}
@media screen and (max-width: 980px) {
  #img-better-habit-bubble-01 {
    top: 30%;
    left: -5%;
    width: 35%;
  }
}
#img-better-habit-bubble-02 {
  top: 274px;
  right: -123px;
  width: 311px;
}
@media screen and (max-width: 980px) {
  #img-better-habit-bubble-02 {
    top: 34%;
    right: -5%;
    width: 35%;
  }
}
#img-better-habit-bubble-03 {
  top: 543px;
  left: 71px;
  width: 90.5px;
}
@media screen and (max-width: 980px) {
  #img-better-habit-bubble-03 {
    top: 70%;
    left: 3%;
    width: 12%;
  }
}
#img-better-habit-bubble-04 {
  bottom: -50px;
  left: -73px;
  width: 203px;
}
@media screen and (max-width: 980px) {
  #img-better-habit-bubble-04 {
    bottom: -10%;
    left: -5%;
    width: 25%;
  }
}
#img-better-habit-bubble-05 {
  bottom: -96px;
  right: -72px;
  width: 111px;
}
@media screen and (max-width: 980px) {
  #img-better-habit-bubble-05 {
    bottom: -15%;
    right: -5%;
    width: 15%;
  }
}

@keyframes bubbleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--bubble-distance) * -1));
  }
}
/* ======== about-habit ======== */
.about-habit {
  padding-block: 130px 50px;
}
@media screen and (max-width: 980px) {
  .about-habit {
    padding-block: 20px 50px;
  }
}
.about-habit > .inner {
  position: relative;
  z-index: 1;
}
.about-habit .section__title {
  max-width: 414px;
}
@media screen and (max-width: 980px) {
  .about-habit .section__title {
    max-width: 50%;
  }
}
.about-habit .section__title + .section__paragraph {
  max-width: 710px;
  margin-top: 62px;
}
@media screen and (max-width: 980px) {
  .about-habit .section__title + .section__paragraph {
    margin-top: 40px;
  }
}

/* ======== better-habit ======== */
.better-habit {
  padding-block: 50px 130px;
}
@media screen and (max-width: 980px) {
  .better-habit {
    padding-block: 40px 100px;
  }
}
.better-habit > .inner {
  position: relative;
  z-index: 1;
}
.better-habit .section__title {
  max-width: 467px;
}
@media screen and (max-width: 980px) {
  .better-habit .section__title {
    max-width: 58%;
  }
}
.better-habit .section__title + .section__paragraph {
  max-width: 523px;
  margin-top: 62px;
}
@media screen and (max-width: 980px) {
  .better-habit .section__title + .section__paragraph {
    max-width: 82%;
    margin-top: 40px;
  }
}

/* ======== story ======== */
.story {
  padding-top: 140px;
}
@media screen and (max-width: 980px) {
  .story {
    padding-top: 100px;
    padding-inline: 20px;
  }
}
.story > .inner {
  /*background-color: #8ce5ec;*/
  /*background-color:#5bd3dc;*/
	background-image:linear-gradient(to bottom,#5bd3dc,#8ce5ec);
  border-radius: 45px;
  max-width: 980px;
  padding: 40px 40px 80px;
}
@media screen and (max-width: 980px) {
  .story > .inner {
    border-radius: 20px;
    padding: 40px 20px 40px;
  }
}
.story__title {
  max-width: 100%;
  margin-top: -202px;
}
@media screen and (max-width: 980px) {
  .story__title {
    margin-top: -125px;
  }
}
.story__title + .story__paragraph {
  max-width: 647px;
  margin: 50px auto 0;
}
@media screen and (max-width: 980px) {
  .story__title + .story__paragraph {
    max-width: 72vw;
    margin-top: 35px;
  }
}
.story .ls-note-list {
  margin-top: 56px;
  padding-inline: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}
@media screen and (max-width: 980px) {
  .story .ls-note-list {
    margin-top: 40px;
    grid-template-columns: 1fr 1fr;
    padding-inline: 0;
  }
}
.story .ls-note-list > li {
  margin-bottom: 0;
}
.story .ls-note-list > li .lsc-card {
  position: relative;
  display: block;
  background-color: #fff;
  border-radius: 0 0 20px 0;
  border: 1px solid #b2c1bf;
  text-decoration: none;
  color: #555555;
}
.story .ls-note-list > li .lsc-card__figure {
  width: 100%;
  aspect-ratio: 259/136;
  overflow: hidden;
	position: relative;
}

/* NEWバッジ */
.story .ls-note-list > li:first-child .lsc-card__figure::before {
  content: "NEW";
  position: absolute;
  top:0;
  right:0;
  background:#0098eb; 
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px;
  z-index: 2;
  line-height: 1;
}

.story .ls-note-list > li .lsc-card__figure > img {
  transition: 0.3s;
}
.story .ls-note-list > li .lsc-card__content {
  padding: 19px;
}
.story .ls-note-list > li .lsc-card__heading {
  font-size: 14px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: 0.3s;
}
.story .ls-note-list > li .lsc-card__lead {
  margin-top: 19px;
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.story .ls-note-list > li .lsc-card__ext-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #aec1bf;
  border-radius: 100%;
  transition-duration: 0.5s;
}
.story .ls-note-list > li .lsc-card__ext-icon::before, .story .ls-note-list > li .lsc-card__ext-icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 8px 8px;
  background-position: center;
  transition-duration: 0.3s;
}
.story .ls-note-list > li .lsc-card__ext-icon::before {
  background-image: url(../img/ico_blank.svg);
}
.story .ls-note-list > li .lsc-card__ext-icon::after {
  background-image: url(../img/ico_blank-white.svg);
}
@media (hover: hover) {
  .story .ls-note-list > li .lsc-card:hover img {
    transform: scale(1.06);
  }
  .story .ls-note-list > li .lsc-card:hover .lsc-card__heading {
    color: #0098eb;
  }
  .story .ls-note-list > li .lsc-card:hover .lsc-card__ext-icon {
    background: #0098eb;
    border-color: #0098eb;
  }
  .story .ls-note-list > li .lsc-card:hover .lsc-card__ext-icon::after {
    opacity: 1;
  }
  .story .ls-note-list > li .lsc-card:hover .lsc-card__ext-icon::before {
    opacity: 0;
  }
}
.idx-news .p-main-title {
  display: none;
}

/* ======== episode ======== */
.episode {
  margin-top: 140px;
}
@media screen and (max-width: 980px) {
  .episode {
    margin-top: 100px;
  }
}
.episode > .inner {
  max-width: 100%;
  padding: 0;
}
.episode__title {
  max-width: 320px;
  margin: 0 auto;
}
@media screen and (max-width: 980px) {
  .episode__title {
    max-width: 55%;
  }
}
.episode__slider {
  margin-top: 56px;
}
@media screen and (max-width: 980px) {
  .episode__slider {
    margin-top: 40px;
  }
}
.episode__box {
  padding: 80px 33px 40px;
  background-color: #ffe18c;
  border-radius: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}
@media screen and (max-width: 980px) {
  .episode__box {
    border-radius: 15px;
    padding: 15px;
    gap: 25px;
  }
}
@media (hover: hover) {
  .episode__box:hover .episode__figure > img {
    transform: scale(1.03);
  }
  .episode__box:hover .episode-modal__ico circle {
    fill: #fff;
  }
  .episode__box:hover .episode-modal__ico line {
    stroke: #0098eb;
  }
}
.episode__figure {
  width: 100%;
  /* aspect-ratio: 602/339; */
  overflow: hidden;
  text-align: center
}
.episode__figure > img {
  transition: 0.3s;
}
.episode__heading {
  height: 62.5px;
}
@media screen and (max-width: 980px) {
  .episode__heading {
    height: 10vw;
  }
}
.episode__heading img {
  width: auto;
  max-height: 100%;
}
@media screen and (max-width: 980px) {
  .episode-modal__ico {
    width: 20px;
    height: 20px;
  }
}
.episode-modal__ico circle {
  fill: #0098eb;
  transition: 0.3s;
}
.episode-modal__ico line {
  stroke: #fff;
  transition: 0.3s;
}
.episode__modal-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
}
.episode__modal-box.is-active {
  display: block;
  animation: fadeIn 0.3s ease;
}
.episode__modal-box.is-closing {
  display: block;
  animation: fadeOut 0.3s ease;
}
.episode__modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.episode__modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 980px;
  max-height: 90%;
  overflow-y: auto;
  background-color: #ffe18c;
  padding: 80px 85px;
  color: #555555;
  border-radius: 20px;
}
@media screen and (max-width: 980px) {
  .episode__modal-content {
    max-width: 92vw;
    padding: 40px 20px;
  }
}
.episode__modal-close {
  display: block;
  position: absolute;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  padding-left: 0;
  border: none;
  cursor: pointer;
  background: none;
}
@media screen and (max-width: 980px) {
  .episode__modal-close {
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 980px) {
  .episode__modal-close svg {
    width: 24px;
    height: 24px;
  }
}
.episode__modal-close svg circle {
  fill: #0098eb;
  transition: 0.3s;
}
.episode__modal-close svg line {
  stroke: #fff;
  transition: 0.3s;
}
@media (hover: hover) {
  .episode__modal-close:hover svg circle {
    fill: #fff;
    transition: 0.3s;
  }
  .episode__modal-close:hover svg line {
    stroke: #0098eb;
    transition: 0.3s;
  }
}
.episode__modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.episode__modal-title {
  height: 35.5px;
}
@media screen and (max-width: 980px) {
  .episode__modal-title {
    max-height: 4vw;
  }
}
.episode__modal-title img {
  height: 100%;
}
.episode__modal-figure {
  margin-top: 45px;
  width: 512px;
}
@media screen and (max-width: 980px) {
  .episode__modal-figure {
    width: 100%;
    margin-top: 40px;
  }
}
.episode__modal-paragraph {
  margin-top: 50px;
  font-size: 18px;
  line-height: 2;
  text-align: center;
}
@media screen and (max-width: 980px) {
  .episode__modal-paragraph {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
  }
}
.episode__modal-sns {
  margin-top: 70px;
}
@media screen and (max-width: 980px) {
  .episode__modal-sns {
    margin-top: 40px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* ======== info ======== */
.info {
  margin-top: 110px;
}
@media screen and (max-width: 980px) {
  .info {
    margin-top: 80px;
  }
}
.info > .inner {
  max-width: 975px;
  padding-inline: 40px;
}
@media screen and (max-width: 980px) {
  .info > .inner {
    padding-inline: 20px;
  }
}
.info__title {
  max-width: 510px;
  margin: 0 auto;
}
@media screen and (max-width: 980px) {
  .info__title {
    max-width: 90%;
  }
}
.info-list,
.news-list{
  margin-top: 32px;
  color: #555555;
}
.news-list{
font-size: 15px;
}

.info-list__item,
.news-list li a{
  margin-top: 15px;
  display: flex;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
}
@media screen and (max-width: 980px) {
  .info-list__item {
    font-size: 14px;
  }
}
.info-list__item:first-child {
  margin-top: 0;
}
.info-list__date,
.news-list a .date{
  flex-shrink: 0;
  width: 150px;
  padding-right: 10px;
}
@media screen and (max-width: 980px) {
  .info-list__date,
	.news-list a .date{
    width: 140px;
  }
}
.info-list__title a,
.news-list a{
  color: #555555;
  text-decoration: none;
}
@media (hover: hover) {
  .info-list__title a:hover,
	.news-list a:hover .main{
    text-decoration: underline;
  }
}

.bottom-sec-link-wrapper{
font-size: 15px;
margin-top: 1em;
text-align: right;
}

.bottom-sec-link-wrapper a{
color: #555555;
text-decoration: none;
}
.bottom-sec-link-wrapper a:hover{
text-decoration: underline;
}

/* ======== related ======== */
.related {
  margin-top: 100px;
}
@media screen and (max-width: 980px) {
  .related {
    margin-top: 80px;
  }
}
.related .txt-btn__wrap {
  margin-top: 32px;
}

/* ======== lower common ======== */
.page-title {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .page-title img {
    width: auto;
    height: 100%;
  }
}
.page-title.strategies {
  width: 481px;
}
@media screen and (max-width: 768px) {
  .page-title.strategies {
    width: auto;
    height: 40px;
    text-align: center;
  }
}
.page-title.motivation {
  width: 543px;
}
@media screen and (max-width: 768px) {
  .page-title.motivation {
    width: auto;
    height: 56px;
    text-align: center;
  }
}
.page-title.benefits {
  width: 525px;
}
@media screen and (max-width: 768px) {
  .page-title.benefits {
    width: auto;
    height: 50px;
    text-align: center;
  }
}
.page-title.vision-01 {
  width: 742.1px;
}
@media screen and (max-width: 768px) {
  .page-title.vision-01 {
    width: auto;
    height: 45px;
    text-align: center;
  }
}
.page-title.vision-02 {
  width: 572.5px;
}
@media screen and (max-width: 768px) {
  .page-title.vision-02 {
    width: auto;
    height: 44px;
    text-align: center;
  }
}
.page-title.vision-03 {
  width: 690.7px;
}
@media screen and (max-width: 768px) {
  .page-title.vision-03 {
    width: auto;
    height: 45px;
    text-align: center;
  }
}

.common-section {
  margin-top: 115px;
}
@media screen and (max-width: 768px) {
  .common-section {
    margin-top: 60px;
  }
}
.common-detail {
  background-color: #ffffff;
  margin-top: 48px;
  padding: 55px 75px;
  border-radius: 40px;
}
@media screen and (max-width: 768px) {
  .common-detail {
    margin-top: 32px;
    padding: 35px 20px;
    border-radius: 20px;
  }
}
.common-detail:first-child {
  margin-top: 68px;
}
@media screen and (max-width: 768px) {
  .common-detail:first-child {
    margin-top: 40px;
  }
}
.common-detail__num {
  text-align: center;
  padding-top: 65px;
  background: url(../img/bg-num-title-line.png) no-repeat center top/100% auto;
}
@media screen and (max-width: 768px) {
  .common-detail__num {
    padding-top: 8%;
  }
  .common-detail__num img {
    width: auto;
    height: 25px;
  }
}
.common-detail__title {
  margin-top: 72px;
  text-align: center;
  font-size: 30px;
	line-height: 1.4;
  color: #0098eb;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .common-detail__title {
    margin-top: 40px;
    font-size: 24px;
  }
}
.common-detail__img {
  margin: 28px auto 0;
  text-align: center;
  max-width: 260px;
}
@media screen and (max-width: 768px) {
  .common-detail__img {
    max-width: 100%;
    width: 260px;
  }
}
.common-detail__sub-title {
  margin-top: 45px;
  text-align: center;
  font-size: 20px;
  color: #0098eb;
  font-weight: bold;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .common-detail__sub-title {
    margin-top: 30px;
    font-size: 17px;
  }
}
.common-detail__box {
  margin-top: 70px;
}
.common-detail__paragraph {
  font-size: 15px;
  line-height: 2.2;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .common-detail__box {
    margin-top: 40px;
  }
  .common-detail__paragraph {
    font-size: 14px;
    line-height: 1.8;
  }
}
.space {
  width: 1px;
  height: 100%;
}
.common-detail__firstimg {
  max-width: 220px;
  padding-right: 20px;
  padding-bottom: 20px;
  float: left;
}
.common-detail__lastimg {
  clear: both;
  max-width: 220px;
  padding-left: 20px;
  padding-top: 20px;
  float: right;
}
@media screen and (max-width: 768px) {
  .common-detail__firstimg,
  .common-detail__lastimg {
    max-width: 150px;
  }
}
.common-detail .sns-share {
  margin-top: 50px;
  padding-top: 40px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .common-detail .sns-share {
    margin-top: 30px;
    padding-top: 30px;
  }
}
.common-detail .sns-share::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #ffe18c;
  border-radius: 9999px;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .common-detail .sns-share::after {
    height: 2px;
  }
}

/*クリニカ注意喚起*/

.note {
  clear: both;
  display: table;
  width: 100%;
  border: 1px solid #ea617f;
  box-sizing: border-box;
  margin-top: 20px;
}
.note .note_txt {
  display: table-cell;
  vertical-align: middle;
  color: #ea617f;
  font-weight: bold;
  font-size: 155%;
  width: 335px;
  padding-right: 12px;
}
.note .bg_special {
  display: table;
  background: url(/ja/rd/habit-lab/assets/img/bg-special.gif) no-repeat right top #ea617f;
  background-size: auto 100%;
  width: 470px;
  padding: 9px;
}
.note .bg_special p,
.note .bg_special .img {
  display: table-cell;
  vertical-align: middle;
}
.note .bg_special p {
  color: #fff;
  font-weight: bold;
  font-size: 155%;
  padding-left: 10px;
}
.note .bg_special p span {
  background: url(/ja/rd/habit-lab/assets/img/bg-note.gif) no-repeat left center;
  padding: 2px 0 0 25px;
  display: block;
  color: #fdcc22;
}

/*note スマホ表示*/

@media screen and (max-width: 925px) {

.note {
  clear: both;
  display: block;
}
.note .note_txt {
  display: block;
  font-size: 18px;
  width: 100%;
  padding: 20px 10px 20px;
  text-align: center;

}
.note .bg_special {
  display: table;
  background: #ea617f;
  width: 100%;
  padding: 10px;
  position: relative;
}
.note .bg_special:after {
	content: "";
	background: url(/ja/rd/habit-lab/assets/img/bg-arrow.gif) no-repeat left top;
	background-size: 100%;
	width: 20px;
	height: 10px;
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -10px;
}
.note .bg_special p,
.note .bg_special .img {
  display: table-cell;
  vertical-align: middle;
}
.note .bg_special .img  {
  background-color: #ea617f;
}
.note .bg_special p {
  font-size: 18px;
  padding-left: 15px;
}
.note .bg_special p span {
  background: url(/ja/rd/habit-lab/assets/img/bg-note.gif) no-repeat left top;
  padding: 2px 0 0 23px;
}	
		
}

.idx-news .l-container{
padding:0 !important;
}

/**/
 
.p-common-btn a, .p-common-btn button {
  color: #0098eb !important;
  border: 2px solid #0098eb !important;
}
.p-common-btn a:hover, .p-common-btn button:hover {
  background: #0098eb !important;
  color: #fff !important;
  text-decoration: none;
}


@media screen and (min-width: 48em) {
  .c-section-mg {
    margin-top: 50px !important;
  }
}/*48em*/


.mod_h4{
font-weight: 500;
font-size: 17px;
clear:both;
margin-top: 3em;
}


.ul_rel-info{
font-size: 15px;
line-height: 2.2;
margin-top: 1em;
list-style: disc;
margin-left:2em;
}
.ul_rel-info a{
color:#0098eb;
}
.ul_rel-info a:hover{
text-decoration: none;
}


.ol_comment>li{
text-indent: -1.8em;
margin-left: 1.8em;
}