/* WRAPPER */
.wrapper-story {
  margin: 0 auto;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .wrapper-story {
    width: calc(100% - 60px);
    max-width: 1280px;
  }
  .sp-only {
    display: none !important;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .wrapper-story {
    padding: 0 15px;
  }
  .pc-only {
    display: none !important;
  }
}

/* TITLE */
.title-story-primary {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  position: relative;
}
.title-story-primary img {
  width: auto !important;
  height: 100% !important;
  display: block;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .title-story-primary {
    height: 38px;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .title-story-primary {
    height: 27px;
  }
}

.title-story-secondary {
  margin: 0;
  background: top left / 1px auto repeat;
  display: block;
  font-weight: 700;
  color: #231815;
}
.title-story-secondary .title-wrapper {
  position: relative;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .title-story-secondary {
    background-image: url(/img/brand/story/pattern_line_001.png);
    margin-bottom: 34px;
    font-size: 2.3rem;
    line-height: calc(38 / 23);
    letter-spacing: 0.015em;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .title-story-secondary {
    margin-bottom: 14px;
    background-image: url(/img/brand/story/pattern_line_001_sp.png);
    background-position: bottom 3px left;
    font-size: 2.15rem;
    line-height: calc(36 / 21.5);
  }
}
@media print, screen and (max-width: 374px) {
  .title-story-secondary {
    background-size: 1px calc(36px * 320 / 375);
    background-position: bottom 1px left;
    font-size: calc(2.15rem * 320 / 375);
  }
}

.title-story-secondary.is-reversed {
  color: #fff;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .title-story-secondary.is-reversed {
    background-image: url(/img/brand/story/pattern_line_002.png);
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .title-story-secondary.is-reversed {
    background-image: url(/img/brand/story/pattern_line_002_sp.png);
  }
}

.title-story-tertiary {
  margin: 0;
  display: block;
  position: relative;
  color: #fff;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .title-story-tertiary {
    padding: 15px 0 31px;
    background: url(/img/brand/story/008_bg_001.png) center top / 100% 70% no-repeat, url(/img/brand/story/008_bg_002.png) center bottom / 100% auto no-repeat;
    font-size: 2.3rem;
    line-height: 1.39;
    letter-spacing: 0.09em;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .title-story-tertiary {
    padding: 4.27vw 0 4.5vw;
    background: url(/img/brand/story/008_bg_001.png) center top / 100% 40% no-repeat, url(/img/brand/story/008_bg_002_sp.png) center bottom / 100% auto no-repeat;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
  }
}

/* PARAGRAPH */
.paragraph-story p {
  margin: 0;
  color: inherit;
  line-height: inherit;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .paragraph-story {
    font-size: 1.6rem;
    line-height: calc(28 / 16);
  }
}
@media print, screen and (min-width: 769px) and (max-width: 980px) {
  .paragraph-story {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .paragraph-story {
    font-size: 1.5rem;
    line-height: calc(45 / 30);
  }
}

/* BUTTON */
.button-story-camera.is-center {
  margin-right: auto;
  margin-left: auto;
}
.button-story-camera .btn-360camera {
  margin: 0;
  display: block;
  cursor: pointer;
}
.button-story-camera .btn-360camera img {
  width: 100%;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .button-story-camera {
    width: 312px;
    margin-top: 29px;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .button-story-camera {
    width: 100%;
    max-width: 281px;
    margin-top: 12px;
  }
}

/* MODAL */
.modal-story-camera {
  background-color: #000;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-story-camera.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal-story-camera canvas {
  width: 100% !important;
  height: 100% !important;
}
.modal-story-camera .modal-viewport {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.modal-story-camera .modal-frame {
  margin: 0 auto;
}
.modal-story-camera .modal-button-close {
  margin: 10px auto 20px;
  display: block;
  position: relative;
}
.modal-story-camera .modal-button-close:before,
.modal-story-camera .modal-button-close:after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #fff;
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  left: 0;
}
.modal-story-camera .modal-button-close:before {
  transform: rotate(45deg);
}
.modal-story-camera .modal-button-close:after {
  transform: rotate(-45deg);
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .modal-story-camera .modal-frame {
    width: calc(100% - 60px);
    max-width: 958px;
    height: 478px;
  }
  .modal-story-camera .modal-button-close {
    width: 25px;
    height: 25px;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .modal-story-camera .modal-frame {
    width: 100%;
    height: 478px;
  }
  .modal-story-camera .modal-button-close {
    width: 50px;
    height: 50px;
  }
}

.button-story-tips {
  display: block;
  position: relative;
}
.button-story-tips img {
  width: 100%;
  height: auto;
  display: block;
}

/* LIST */
.list-story-product {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-align: left;
}
.list-story-product * {
  box-sizing: border-box;
}
.list-story-product img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
.list-story-product .item-wrapper {
  display: block;
  position: relative;
  text-decoration: none;
}
.list-story-product .item-wrapper:hover {
  opacity: 0.7;
}
.list-story-product .thumbnail-image {
  padding-top: 100%;
  position: relative;
}
.list-story-product .thumbnail-image img {
  opacity: 1 !important;
}
.list-story-product .item-button {
  width: 100%;
  border: 2px solid #a1c3d6;
  border-radius: 10px;
  background: url(/img/brand/story/common_011.png) center right 10px / auto auto no-repeat;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 700;
  color: #a1c3d6;
}
.list-story-product .item-button .button-wrapper {
  display: block;
  position: relative;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .list-story-product .list-wrapper {
    margin-bottom: -55px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .list-story-product .list-item {
    width: 286px;
    margin-bottom: 55px;
  }
  .list-story-product .item-button {
    min-height: 69px;
    margin-top: 20px;
    padding: 7px 28px 7px 12px;
    font-size: 1.8rem;
    line-height: calc(23.4 / 18);
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .list-story-product .list-item:not(:last-child) {
    margin-bottom: 14px;
  }
  .list-story-product .item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .list-story-product .item-thumbnail {
    width: 163px;
  }
  .list-story-product .item-button {
    width: 162px;
    min-height: 78px;
    padding: 7px 20px 7px 10px;
    background-size: 7px auto;
    font-size: 1.7rem;
    font-feature-settings: "palt";
    line-height: calc(39 / 34);
    letter-spacing: -0.05em;
  }
}

.list-story-catalog {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-align: left;
}
.list-story-catalog * {
  box-sizing: border-box;
}
.list-story-catalog .button-story-camera {
  width: 100%;
  margin: 0;
}
.list-story-catalog .button-toggle > img {
  width: 100%;
  height: auto;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .list-story-catalog {
    width: calc(100% - 60px);
    max-width: 699px;
  }
  .list-story-catalog .list-wrapper {
    margin: 0 -45px -45px 0;
    display: flex;
    flex-wrap: wrap;
  }
  .list-story-catalog .list-item {
    width: 327px;
    margin: 0 45px 45px 0;
    flex: 0 0 auto;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .list-story-catalog .list-item {
    width: calc(261 / 375 * 100%);
    max-width: 261px;
    margin: 0 auto;
  }
  .list-story-catalog .list-item:not(:last-child) {
    margin-bottom: 14px;
  }
}

/* GALLERY */
.gallery-story {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.gallery-story img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}
.gallery-story .gallery-image {
  position: relative;
}

.gallery-story.is-introduction {
  width: 100%;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .gallery-story.is-introduction {
    max-width: 980px;
    margin: 123px auto 0;
    align-items: flex-start;
    justify-content: flex-end;
  }
  .gallery-story.is-introduction .gallery-image:nth-child(1) {
    width: calc(445 / 980 * 100%);
    margin: 176px calc(149 / 980 * 100%) 0 0;
  }
  .gallery-story.is-introduction .gallery-image:nth-child(2) {
    width: calc(386 / 980 * 100%);
  }
  .gallery-story.is-introduction .gallery-image:nth-child(3) {
    width: calc(445 / 980 * 100%);
    margin-top: -84px;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .gallery-story.is-introduction {
    margin-top: 28px;
    padding: 0 15px;
    justify-content: space-between;
  }
  .gallery-story.is-introduction .gallery-image:nth-child(1),
  .gallery-story.is-introduction .gallery-image:nth-child(2) {
    width: calc(50% - 3.5px);
  }
  .gallery-story.is-introduction .gallery-image:nth-child(3) {
    width: 100%;
    margin-top: 7px;
  }
}

.gallery-story.is-maintainability {
  width: 100%;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .gallery-story.is-maintainability {
    margin-top: -67px;
    justify-content: space-between;
    order: 4;
  }
  .gallery-story.is-maintainability .gallery-image:nth-child(1) {
    width: calc(445 / 1280 * 100%);
    margin-top: 186px;
  }
  .gallery-story.is-maintainability .gallery-image:nth-child(2) {
    width: calc(600 / 1280 * 100%);
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .gallery-story.is-maintainability {
    width: calc(50% - 3.5px);
    flex-direction: column;
    justify-content: space-between;
  }
}

.gallery-story.is-children {
  width: 100%;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .gallery-story.is-children {
    width: calc(100% - (150px - ((1280px - 100%) / 2)));
    margin: 65px 0 0 auto;
    justify-content: flex-end;
    order: 3;
  }
  .gallery-story.is-children .gallery-image:nth-child(1) {
    width: calc(600 / 1130 * 100%);
    margin-right: calc(85 / 1130 * 100%);
  }
  .gallery-story.is-children .gallery-image:nth-child(2) {
    width: calc(445 / 1130 * 100%);
    margin: 192px 0 55px;
  }
  .gallery-story.is-children .gallery-image:nth-child(3) {
    width: calc(445 / 1130 * 100%);
    margin-right: calc(302 / 1130 * 100%);
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .gallery-story.is-children {
    margin: 14px 0 23px;
    justify-content: space-between;
  }
  .gallery-story.is-children .gallery-image:nth-child(1),
  .gallery-story.is-children .gallery-image:nth-child(2) {
    width: calc(50% - 3.5px);
  }
  .gallery-story.is-children .gallery-image:nth-child(3) {
    width: 100%;
    margin-top: 14px;
  }
}

.gallery-story.is-relaxing {
  width: 100%;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .gallery-story.is-relaxing.is-front {
    width: calc(531 / 1160 * 100%);
    flex: 0 0 auto;
  }
  .gallery-story.is-relaxing.is-back {
    width: 1280px;
    margin: 101px auto 0;
    display: block;
    order: 3;
  }
  .gallery-story.is-relaxing.is-back .gallery-image:nth-child(1) {
    width: calc(386 / 1280 * 100%);
    margin: 0 0 -67px calc(50% - 106px);
  }
  .gallery-story.is-relaxing.is-back .gallery-image:nth-child(3) {
    width: calc(445 / 1280 * 100%);
    margin-bottom: -103px;
  }
  .gallery-story.is-relaxing.is-back .gallery-image:nth-child(4) {
    width: calc(445 / 1280 * 100%);
    margin: 0 calc(150px - ((1280px - 100%) / 2)) 0 auto;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .gallery-story.is-relaxing {
    justify-content: space-between;
  }
  .gallery-story.is-relaxing .gallery-image {
    width: calc(50% - 3.5px);
  }
  .gallery-story.is-relaxing .gallery-image:not(:nth-child(1)):not(:nth-child(2)) {
    margin-top: 7px;
  }
}

.gallery-story.is-widely {
  width: 100%;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .gallery-story.is-widely {
    width: 1280px;
    margin: 101px auto 0;
    flex-direction: column;
    align-items: flex-start;
    order: 3;
  }
  .gallery-story.is-widely .gallery-image:nth-child(1) {
    width: calc(445 / 1280 * 100%);
    order: 3;
  }
  .gallery-story.is-widely .gallery-image:nth-child(2) {
    width: calc(600 / 1280 * 100%);
    margin: -362px 0 78px auto;
    order: 1;
  }
  .gallery-story.is-widely .gallery-image:nth-child(3) {
    width: calc(451 / 1280 * 100%);
    margin: 0 0 82px calc(319px - ((1280px - 100%) / 2));
    order: 1;
  }
  .gallery-story.is-widely .gallery-image:nth-child(4) {
    width: calc(531 / 1280 * 100%);
    margin: -197px calc(150px - ((1280px - 100%) / 2)) 0 auto;
    order: 4;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .gallery-story.is-widely {
    margin-top: 7px;
    justify-content: space-between;
  }
  .gallery-story.is-widely .gallery-image {
    width: calc(50% - 3.5px);
  }
  .gallery-story.is-widely .gallery-image:not(:nth-child(1)):not(:nth-child(2)) {
    margin-top: 7px;
  }
}

/* SECTION - VISUAL */
.section-story-visual {
  position: relative;
}
.section-story-visual img {
  width: 100%;
  height: auto;
  display: block;
}
.section-story-visual .wrapper-story {
  position: relative;
}
.section-story-visual .visual-main {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.section-story-visual .main-description {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
}
.section-story-visual .visual-background {
  position: relative;
  z-index: 0;
}
.section-story-visual .visual-background img {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-visual .wrapper-story {
    width: 100%;
  }
  .section-story-visual .main-description {
    bottom: calc(62 / 596 * 100%);
  }
  .section-story-visual .visual-background {
    padding-top: calc(596 / 1280 * 100%);
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-visual .wrapper-story {
    padding: 0;
  }
  .section-story-visual .main-description {
    bottom: calc(24 / 596 * 100%);
  }
  .section-story-visual .visual-background {
    padding-top: calc(596 / 750 * 100%);
  }
}

/* SECTION - MOVIE */
.section-story-movie {
  position: relative;
}
.section-story-movie video {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.section-story-movie .movie-frame,
.section-story-movie .frame-main {
  position: relative;
  overflow: hidden;
}
.section-story-movie .frame-main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.section-story-movie .movie-modal-wrap {
  width: 100%;
  height: 100%;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-movie {
    margin: 142px 0 261px;
  }
  .section-story-movie .title-story-primary {
    margin-bottom: 78px;
  }
  .section-story-movie .wrapper-story {
    max-width: 700px;
  }
  .section-story-movie .movie-frame {
    padding-top: calc(420 / 700 * 100%);
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-movie {
    margin: 60px 0 85px;
  }
  .section-story-movie .title-story-primary {
    margin-bottom: 48px;
  }
  .section-story-movie .movie-frame {
    padding-top: calc(414 / 690 * 100%);
  }
}

/* SECTION - INTRODUCTION */
.section-story-introduction {
  position: relative;
}
.section-story-introduction .thumbnail-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-introduction {
    margin: 261px 0 221px;
  }
  .section-story-introduction .wrapper-story {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .section-story-introduction .title-story-primary {
    margin-bottom: 78px;
  }
  .section-story-introduction .introduction-thumbnail {
    width: calc(50% + 15px);
    margin-left: 64px;
    flex: 0 0 auto;
  }
  .section-story-introduction .introduction-info {
    width: calc(50% - 109px);
    max-width: 411px;
    margin: -7px 0 0;
    flex: 0 0 auto;
  }
  .section-story-introduction .paragraph-story {
    margin-right: -40px;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-introduction {
    margin: 85px 0 0;
  }
  .section-story-introduction .title-story-primary {
    margin-bottom: 42px;
  }
  .section-story-introduction .paragraph-story {
    margin-bottom: 23px;
  }
}

/* SECTION - MAINTAINABILITY */
.section-story-maintainability {
  position: relative;
}
.section-story-maintainability img {
  width: 100%;
  height: auto;
  display: block;
}
.section-story-maintainability .wrapper-story {
  display: flex;
  flex-wrap: wrap;
}
.section-story-maintainability .maintainability-banner {
  width: 100%;
  flex: 0 0 auto;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-maintainability {
    margin: 221px 0 260px;
  }
  .section-story-maintainability .wrapper-story {
    width: 100%;
  }
  .section-story-maintainability .maintainability-banner {
    max-width: 1130px;
    margin-bottom: 86px;
    order: 1;
  }
  .section-story-maintainability .maintainability-thumbnail {
    width: 462px;
    margin: 0 65px 0 calc(150px - ((1280px - 100%) / 2));
    order: 2;
  }
  .section-story-maintainability .maintainability-info {
    width: calc(100% - 527px);
    max-width: 417px;
    margin: -6px 0 100px;
    order: 3;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-maintainability {
    margin: 85px 0 79px;
  }
  .section-story-maintainability .maintainability-thumbnail {
    width: calc(50% - 3.5px);
    margin-right: 7px;
  }
  .section-story-maintainability .maintainability-banner {
    margin-bottom: 14px;
  }
  .section-story-maintainability .maintainability-info {
    width: 100%;
    margin-top: 24px;
  }
}

/* SECTION - CHILDREN */
.section-story-children {
  position: relative;
}
.section-story-children img {
  width: 100%;
  height: auto;
  display: block;
}
.section-story-children .children-banner {
  width: 100%;
  flex: 0 0 auto;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-children {
    margin: 260px 0 259px;
  }
  .section-story-children .wrapper-story {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .section-story-children .children-banner {
    margin-bottom: 78px;
    order: 1;
  }
  .section-story-children .children-info {
    width: calc(100% - 60px);
    max-width: 980px;
    margin: 0 auto;
    padding-right: 136px;
    order: 2;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-children {
    margin: 79px 0;
  }
  .section-story-children .paragraph-story {
    margin-bottom: 23px;
  }
  .section-story-children .children-info {
    width: 100%;
  }
}

/* SECTION - RELAXING */
.section-story-relaxing {
  position: relative;
}
.section-story-relaxing .wrapper-story {
  display: flex;
  flex-wrap: wrap;
}
.section-story-relaxing .relaxing-banner {
  width: 100%;
  flex: 0 0 auto;
}
.section-story-relaxing .banner-image img {
  width: 100%;
  height: auto;
  display: block;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-relaxing {
    margin: 259px 0 268px;
  }
  .section-story-relaxing .wrapper-story {
    width: 100%;
  }
  .section-story-relaxing .relaxing-banner {
    max-width: 864px;
    margin-bottom: 84px;
    order: 1;
  }
  .section-story-relaxing .relaxing-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: calc(120px - ((1280px - 100%) / 2));
    display: flex;
    order: 2;
  }
  .section-story-relaxing .relaxing-info {
    margin: -7px 108px 0 30px;
    flex: 1 1 auto;
  }
  .section-story-relaxing .paragraph-story {
    margin-right: -65px;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-relaxing {
    margin: 79px 0 60px;
  }
  .section-story-relaxing .relaxing-banner {
    margin-bottom: 21px;
  }
  .section-story-relaxing .relaxing-info {
    width: 100%;
    margin-top: 24px;
  }
}

/* SECTION - WIDELY */
.section-story-widely {
  position: relative;
}
.section-story-widely img {
  width: 100%;
  height: auto;
  display: block;
}
.section-story-widely .wrapper-story {
  display: flex;
  flex-wrap: wrap;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-widely {
    margin: 268px 0 260px;
  }
  .section-story-widely .wrapper-story {
    width: 100%;
  }
  .section-story-widely .widely-thumbnail {
    width: calc(612 / 1280 * 100%);
    margin-right: 65px;
    order: 1;
  }
  .section-story-widely .widely-info {
    width: calc(100% - 527px);
    max-width: 388px;
    margin: -8px 0 300px;
    order: 2;
  }
  .section-story-widely .widely-info .paragraph-story {
    margin-right: -50px;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-widely {
    margin: 60px 0 80px;
  }
  .section-story-widely .widely-thumbnail {
    width: 100%;
    margin-bottom: 7px;
  }
  .section-story-widely .widely-info {
    width: 100%;
    margin-top: 24px;
  }
}

/* SECTION - FAVORITE */
.section-story-favorite {
  position: relative;
}
.section-story-favorite .content-thumbnail img,
.section-story-favorite .info-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
.section-story-favorite .content-info {
  position: relative;
  color: #fff;
}
.section-story-favorite .content-info::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.section-story-favorite .info-wrapper {
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-favorite {
    margin: 260px 0 140px;
  }
  .section-story-favorite .wrapper-story {
    width: 100%;
  }
  .section-story-favorite .title-story-primary {
    margin-bottom: 83px;
  }
  .section-story-favorite .favorite-content {
    display: flex;
    align-items: center;
  }
  .section-story-favorite .content-thumbnail {
    width: calc(828 / 1280 * 100%);
    margin-right: -123px;
    flex: 0 0 auto;
  }
  .section-story-favorite .content-info {
    max-width: 511px;
    min-height: 662px;
    margin-right: 30px;
    flex: 1 1 auto;
  }
  .section-story-favorite .content-info::after {
    background-color: #9ec0d3;
    mix-blend-mode: multiply;
  }
  .section-story-favorite .info-wrapper {
    padding: 35px 70px;
  }
  .section-story-favorite .title-story-secondary {
    margin-bottom: 19px;
  }
  .section-story-favorite .paragraph-story {
    letter-spacing: 0.05em;
  }
  .section-story-favorite .info-thumbnail {
    margin: 23px 0 29px;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-favorite {
    margin: 80px 0 0;
  }
  .section-story-favorite .title-story-primary {
    margin-bottom: 28px;
  }
  .section-story-favorite .content-thumbnail {
    margin-bottom: 31px;
  }
  .section-story-favorite .content-info::after {
    background-color: #a1c3d6;
  }
  .section-story-favorite .info-wrapper {
    padding: 11px 15px 21px;
  }
  .section-story-favorite .info-thumbnail {
    width: calc(276 / 315 * 100%);
    margin: 8px auto 13px;
  }
  .section-story-favorite .button-story-camera {
    margin-top: 0;
  }
}

/* SECTION - PRODUCT */
.section-story-product {
  text-align: center;
}
@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-product {
    margin: 140px 0 262px;
  }
  .section-story-product .wrapper-story {
    max-width: 633px;
  }
  .section-story-product .button-story-tips {
    margin: 0 -6px 90px -22px;
  }
  .section-story-product .title-story-tertiary {
    margin-bottom: 52px;
  }
  .section-story-product .list-story-product {
    margin-bottom: 82px;
  }
}
@media print, screen and (min-width: 0) and (max-width: 768px) {
  .section-story-product {
    margin: 70px 0 84px;
  }
  .section-story-product .button-story-tips {
    margin: 0 1px 41px -2px;
  }
  .section-story-product .title-story-tertiary {
    margin-bottom: 14px;
  }
  .section-story-product .list-story-product {
    margin-bottom: 85px;
  }
  .section-story-product .list-story-catalog {
    margin-top: 22px;
  }
}

/* SECTION - PROFILE */
.section-story-profile {
  position: relative;
}
.section-story-profile .title-story-primary {
  z-index: 1;
}
.section-story-profile .thumbnail-image {
  padding-top: 100%;
  position: relative;
}
.section-story-profile .showcase-thumbnail img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
.section-story-profile .info-detail {
  text-align: justify;
}

@media print, screen and (min-width: 769px) and (max-width: 9999px) {
  .section-story-profile {
    margin: 140px 0 135px;
    padding: 82px 0 102px;
    background-color: #e9e9e9;
  }
  .section-story-profile .title-story-primary {
    margin-bottom: -16px;
    padding-left: 66px;
  }
  .section-story-profile .profile-showcase {
    width: 644px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .section-story-profile .showcase-thumbnail {
    width: 264px;
    flex: 0 0 auto;
  }
  .section-story-profile .showcase-info {
    width: 345px;
    padding-left: 50px;
  }
  .section-story-profile .info-name,
  .section-story-profile .info-title,
  .section-story-profile .info-detail {
    line-height: calc(22.75 / 15);
  }
  .section-story-profile .info-name {
    margin-bottom: -3px;
    font-size: 2rem;
  }
  .section-story-profile .info-name small {
    font-size: 1.5rem;
  }
  .section-story-profile .info-title {
    margin-bottom: 17px;
    font-size: 2rem;
  }
  .section-story-profile .info-detail {
    margin-bottom: -6px;
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 0px) and (max-width: 768px) {
  .section-story-profile {
    margin: 84px 15px 24px;
    padding: 29px 0 50px;
    background-color: #eaeaea;
  }
  .section-story-profile .title-story-primary {
    margin-bottom: 23px;
  }
  .section-story-profile .showcase-thumbnail {
    width: 100%;
    max-width: 264px;
    margin: 0 auto 12px;
  }
  .section-story-profile .info-name,
  .section-story-profile .info-title,
  .section-story-profile .info-detail {
    line-height: calc(38.75 / 25);
  }
  .section-story-profile .info-name {
    margin-bottom: -5px;
    font-size: 1.5rem;
  }
  .section-story-profile .info-name small {
    font-size: 1rem;
  }
  .section-story-profile .info-title {
    margin-bottom: 5px;
    font-size: 1.5rem;
  }
  .section-story-profile .info-detail {
    font-size: 1.25rem;
  }
}