@charset "UTF-8";
/* 色 */
/* 余白、フォントサイズ用 */
/* -----------------------------------------------------------
    ページ固有パーツ
----------------------------------------------------------- */
.top-contents01 {
  background: #ACD8F7;
  padding: min(3.2vw, 24px) 0 min(18.67vw, 140px);
}

.top-contents02 {
  background: #FFF;
  padding: min(12vw, 90px) 0 min(26.67vw, 200px);
}

.top-cont-box {
  width: min(86.13vw, 646px);
  margin: 0 auto;
}

.top-cont-box__title {
  position: relative;
  background: #4EA6D5;
  padding: min(3.47vw, 26px) min(5.87vw, 44px);
  list-style: none;
  cursor: pointer;
}
.top-cont-box__title::-webkit-details-marker {
  display: none;
}
.top-cont-box__title:after {
  content: "";
  display: inline-block;
  background: url(../image/common/icon_plus.svg) no-repeat left top/contain;
  position: absolute;
  top: 50%;
  right: min(4.8vw, 36px);
  width: min(2.93vw, 22px);
  height: min(2.93vw, 22px);
  transform: translate(0, -50%);
}
.top-cont-box[open] > .top-cont-box__title:after {
  background: url(../image/common/icon_minus.svg) no-repeat left top/contain;
  height: min(0.53vw, 4px);
  transform: translate(0, -35%);
}

.top-cont-box__text-box {
  background: #FAFAFA;
  padding: min(2.13vw, 16px) min(1.33vw, 10px) min(2.67vw, 20px);
}

.top-cont-box__text-box-inner {
  padding: min(2.67vw, 20px) min(6.67vw, 50px) min(2.13vw, 16px) min(4.53vw, 34px);
  height: min(41.33vw, 324px);
  overflow-y: scroll;
}

.top-header {
  position: relative;
}

.top-logo {
  position: absolute;
  top: min(2.67vw, 20px);
  left: min(3.47vw, 26px);
}
.top-logo img {
  width: min(18.53vw, 139px);
}

.top-anchor-link {
  display: flex;
  justify-content: center;
  width: min(93.47vw, 701px);
  margin: 0 auto;
}
.top-anchor-link li {
  width: 48.5%;
}
.top-anchor-link li:nth-child(n+2) {
  margin-left: 3%;
}

.top-catch {
  margin-top: min(9.87vw, 74px);
}

.top-catch__title {
  width: min(80.67vw, 605px);
  margin: 0 auto;
}

.top-catch__text {
  width: min(81.33vw, 610px);
  margin: min(7.2vw, 54px) auto 0;
}

.top-illustrator-prof {
  width: min(85.6vw, 642px);
  margin: min(7.2vw, 54px) auto 0;
}

.top-story {
  position: relative;
  background: url(../image/top/bg_story.png) center top/cover;
  margin-top: clamp(-247px, -32.93vw, 0px);
  padding: min(35.07vw, 263px) 0 min(24.27vw, 182px);
  z-index: 2;
}

.top-story__title {
  width: min(81.33vw, 610px);
  margin: 0 auto;
}

.top-story__text-area {
  background: url(../image/top/bg_story-text-area_close.png) center top/cover;
  width: min(91.33vw, 685px);
  margin: min(7.73vw, 58px) auto 0;
  padding: min(5.87vw, 44px) min(5.33vw, 40px) min(4.8vw, 36px);
}
.js-open .top-story__text-area {
  background: url(../image/top/bg_story-text-area_open.png) center top/cover;
  padding-bottom: min(5.87vw, 44px);
}

.top-story__text {
  display: block;
  font-size: min(3.73vw, 28px);
  line-height: 1.89;
  height: min(49.47vw, 371px);
  overflow-y: hidden;
}
.top-story__text span {
  color: #BEB0A2;
}
.js-open .top-story__text {
  height: auto;
  overflow-y: visible;
}
.js-open .top-story__text span {
  color: #3C250E;
}

.top-story__read-btn {
  display: block;
  width: min(23.6vw, 177px);
  margin: 0 auto 0;
  line-height: 1;
}
.js-open .top-story__read-btn {
  display: none;
}

.top-goods {
  position: relative;
  background: url(../image/top/bg_goods.png) center top/cover;
  margin-top: clamp(-82px, -10.93vw, 0px);
  padding: min(18.93vw, 142px) 0 min(26vw, 195px);
  z-index: 2;
}
.top-goods:before {
  content: "";
  background: url(../image/top/bg_goods02.png) center top/cover;
  position: absolute;
  top: clamp(-176px, -23.47vw, 0px);
  right: 0;
  width: min(38vw, 285px);
  height: min(29.87vw, 224px);
  z-index: 2;
}

.top-goods__title {
  width: min(91.73vw, 688px);
  margin: 0 auto;
}

.top-goods__box01 {
  background: url(../image/top/bg_goods-box01.png?20240614-001) center top/cover;
  width: 87.2%;
  margin: min(6.67vw, 50px) auto 0;
  padding: min(10.67vw, 80px) 0 min(14vw, 105px);
}

.top-goods__box01-title {
  width: min(71.2vw, 534px);
  margin: 0 auto;
}

.top-goods__box01-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 81.5%;
  margin: min(8vw, 60px) auto 0;
}
.top-goods__box01-list li {
  width: 46.34%;
}
.top-goods__box01-list li:nth-child(even) {
  margin-left: 7%;
}
.top-goods__box01-list li:nth-child(n+3) {
  margin-top: min(8.67vw, 65px);
}
.top-goods__box01-list li:nth-child(6) {
  margin-top: min(7.33vw, 55px);
}

.top-goods__box01-list li:nth-child(1) .top-goods__box01-goods {
  width: 98.38%;
}
.top-goods__box01-list li:nth-child(2) .top-goods__box01-goods {
  width: 99.19%;
}
.top-goods__box01-list li:nth-child(3) .top-goods__box01-goods {
  width: 99.6%;
}
.top-goods__box01-list li:nth-child(4) .top-goods__box01-goods {
  width: 99.6%;
}
.top-goods__box01-list li:nth-child(5) .top-goods__box01-goods {
  width: 100%;
}
.top-goods__box01-list li:nth-child(6) .top-goods__box01-goods {
  width: 100%;
}

.top-goods__box01-price {
  width: min(41.2vw, 309px);
  margin: min(8.67vw, 65px) auto 0;
  line-height: 1;
}

.top-goods__box02 {
  background: url(../image/top/bg_goods-box02.png) center top/cover;
  width: 87.2%;
  margin: min(3.73vw, 28px) auto 0;
  padding: min(14.4vw, 108px) 0 min(10.67vw, 80px);
}

.top-goods__box02-title {
  width: min(71.07vw, 533px);
  margin: 0 auto;
}

.top-goods__box02-text {
  width: min(70.27vw, 527px);
  margin: min(4vw, 30px) auto 0;
}

.top-goods__box02-goods {
  width: min(71.87vw, 539px);
  margin: min(4.27vw, 32px) auto 0;
}

.top-goods__box02-price {
  width: min(44vw, 330px);
  margin: min(6.67vw, 50px) auto 0;
  line-height: 1;
}

.top-goods__btn-list {
  width: min(91.73vw, 688px);
  margin: min(8.93vw, 67px) auto 0;
}
.top-goods__btn-list li:nth-child(n+2) {
  width: 100%;
  margin-top: min(4.53vw, 34px);
}

.top-goods__note {
  color: #FFF;
  font-size: min(2.67vw, 20px);
  line-height: 1.75;
  margin: min(4vw, 30px) 0 0 min(7.2vw, 54px);
}

.top-goods-modal {
  background: url(../image/top/bg_goods-modal.jpg) no-repeat center top/cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  overflow-y: auto;
}
.top-goods-modal.js-show {
  opacity: 1;
  z-index: 99;
}

.top-goods-modal__cont {
  width: min(90.4vw, 678px);
  margin: min(14.67vw, 110px) auto min(6.67vw, 50px);
}

.top-goods-modal__close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: min(6.67vw, 50px);
  z-index: 5;
}

.top-cp {
  position: relative;
  background: url(../image/top/bg_cp.png) no-repeat center top/100% auto;
  margin-top: clamp(-201px, -26.8vw, 0px);
  padding-top: min(30.4vw, 228px);
  z-index: 2;
}

.top-cp__title {
  width: min(66vw, 495px);
  margin: 0 auto;
}

.top-cp__inner {
  background: #FFF;
  margin-top: min(24.67vw, 185px);
}

.top-cp__text01 {
  width: min(85.87vw, 644px);
  margin: 0 auto;
}

.top-cp__text02 {
  width: min(85.87vw, 644px);
  margin: min(7.47vw, 56px) auto 0;
}

.top-cp__2col01 {
  display: flex;
  width: min(82.67vw, 620px);
  margin: min(4vw, 30px) auto 0;
}

.top-cp__2col01-img {
  width: 27.1%;
}

.top-cp__2col01-text {
  width: 68.3%;
  margin-left: calc(100% - 68.3% - 27.1%);
}

.top-cp__2col02 {
  display: flex;
  width: min(83.6vw, 627px);
  margin-left: min(6.67vw, 50px);
}

.top-cp__2col02-img {
  width: 36.7%;
}

.top-cp__2col02-text {
  width: 64%;
  margin: min(5.73vw, 43px) 0 0 calc(100% - 64% - 36.7%);
}

.top-cp__btn {
  width: min(47.73vw, 358px);
  margin: min(6.13vw, 46px) auto 0;
}

.top-cp__text03 {
  width: min(85.87vw, 644px);
  margin: min(7.47vw, 56px) auto 0;
}

.top-terms__title {
  width: min(40.67vw, 305px);
  line-height: 1;
}

.top-terms__list dt {
  margin: min(3.33vw, 25px) 0 0 1em;
  text-indent: -1em;
}
.top-terms__list dt:before {
  content: "■";
}

.top-story-dtl {
  position: relative;
  background: url(../image/top/bg_story-dtl.png?20240614-001) center top/cover;
  margin-top: clamp(-231px, -30.8vw, 0px);
  padding-top: min(41.2vw, 309px);
  z-index: 2;
}

.top-story-dtl__title {
  width: min(80vw, 600px);
  margin: 0 auto;
}

.top-story-dtl__char01 {
  margin-top: min(9.33vw, 70px);
}

.top-story-dtl__char02 {
  margin-top: min(5.07vw, 38px);
}

.top-story-dtl__char03 {
  margin-top: min(4vw, 30px);
}

.top-story-dtl__text-wrap {
  position: relative;
  padding-top: min(13.33vw, 100px);
}
.top-story-dtl__text-wrap:after {
  content: "";
  display: inline-block;
  background: url(../image/top/img_story-dtl-item.png) no-repeat left top/contain;
  position: absolute;
  top: clamp(-53px, -7.07vw, 0px);
  right: min(6.67vw, 50px);
  width: min(16vw, 120px);
  height: min(17.33vw, 130px);
}

.top-story-dtl__text {
  width: min(60vw, 450px);
  margin: 0 auto;
}

.top-story-dtl__btn-list {
  position: relative;
  background: url(../image/top/bg_story-dtl-btn-list.png?20240614-001) center top/cover;
  height: min(95.33vw, 715px);
  margin-top: min(5.07vw, 38px);
  z-index: 2;
}
.top-story-dtl__btn-list li {
  position: absolute;
  z-index: 3;
}
.top-story-dtl__btn-list li:nth-child(1) {
  width: min(22.93vw, 172px);
  top: min(42vw, 315px);
  left: min(40.67vw, 305px);
}
.top-story-dtl__btn-list li:nth-child(2) {
  width: min(20.4vw, 153px);
  top: min(45.47vw, 341px);
  left: min(77.73vw, 583px);
}
.top-story-dtl__btn-list li:nth-child(3) {
  width: min(20.13vw, 151px);
  top: min(67.87vw, 509px);
  left: min(58.53vw, 439px);
}
.top-story-dtl__btn-list li:nth-child(4) {
  width: min(19.87vw, 149px);
  top: min(68.13vw, 511px);
  left: min(15.73vw, 118px);
}
.top-story-dtl__btn-list li:nth-child(5) {
  width: min(20.13vw, 151px);
  top: min(27.87vw, 209px);
  left: min(2.8vw, 21px);
}
.top-story-dtl__btn-list li:nth-child(6) {
  width: min(21.73vw, 163px);
  top: min(2vw, 15px);
  left: min(19.07vw, 143px);
}
.top-story-dtl__btn-list li:nth-child(7) {
  width: min(20.13vw, 151px);
  top: min(4.93vw, 37px);
  left: min(43.73vw, 328px);
}
.top-story-dtl__btn-list li:nth-child(8) {
  width: min(23.6vw, 177px);
  top: min(17.73vw, 133px);
  left: min(60.8vw, 456px);
}

.top-story-dtl-modal {
  background: url(../image/top/bg_story-dtl-modal.jpg) no-repeat center top/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  overflow-y: auto;
}
.top-story-dtl-modal.js-show {
  opacity: 1;
  z-index: 99;
}

.top-story-dtl-modal__cont {
  background: url(../image/top/bg_story-dtl-modal-cont.png) no-repeat center top/cover;
  width: min(87.07vw, 653px);
  margin: 0 auto;
  padding: min(10.13vw, 76px) 0 min(10.67vw, 80px);
}

.top-story-dtl-modal__title {
  width: min(69.2vw, 519px);
  margin: 0 auto;
}
.top-story-dtl-modal:nth-child(2) .top-story-dtl-modal__title, .top-story-dtl-modal:nth-child(6) .top-story-dtl-modal__title {
  width: min(69.73vw, 523px);
}
.top-story-dtl-modal:nth-child(3) .top-story-dtl-modal__title, .top-story-dtl-modal:nth-child(4) .top-story-dtl-modal__title {
  width: min(69.33vw, 520px);
}

.top-story-dtl-modal__movie {
  position: relative;
  width: min(58.13vw, 436px);
  padding-top: min(32.67vw, 245px);
  margin: min(4.27vw, 32px) auto 0;
}
.top-story-dtl-modal__movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.top-story-dtl-modal__text-box {
  background: #F6EEDC;
  width: min(75.07vw, 563px);
  margin: min(4.53vw, 34px) auto 0;
  padding: min(1.6vw, 12px) min(1.33vw, 10px) min(2.13vw, 16px);
  box-shadow: inset 0 2px min(0.8vw, 6px) rgba(0, 0, 0, 0.16);
}

.top-story-dtl-modal__text-box-inner {
  padding: min(2.13vw, 16px) min(4vw, 30px) min(1.6vw, 12px) min(4vw, 30px);
  height: min(82.67vw, 620px);
  overflow-y: scroll;
}

.top-story-dtl-modal__text {
  font-size: min(3.6vw, 27px);
  line-height: 2.15;
}
.top-story-dtl-modal__text + .top-story-dtl-modal__text {
  margin-top: min(3.6vw, 27px);
}

.top-story-dtl-modal__img {
  width: 100%;
  margin: min(2.67vw, 20px) auto;
}

.top-story-dtl-modal__close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: min(6.67vw, 50px);
  z-index: 5;
}

.top-f-area {
  padding: min(8vw, 60px) 0 min(4vw, 30px);
}

.top-f-area__copy {
  font-size: min(2.67vw, 20px);
  text-align: center;
}

.top-shop-btn {
  display: none;
  position: fixed;
  width: min(23.73vw, 178px);
  bottom: min(6.67vw, 50px);
  left: calc(100vw - 23.73vw - 2.13vw);
  right: 0;
  margin: 0 auto;
  z-index: 10;
}
.top-shop-btn.js-show {
  display: block;
}

.top-shop-btn--mv {
  display: block;
  position: absolute;
  width: min(23.73vw, 178px);
  bottom: min(2.13vw, 16px);
  right: min(2.13vw, 16px);
  z-index: 10;
}

@media screen and (min-width: 501px) {
  /* ===========================================================
      タブレット縦
  =========================================================== */
  .top-story-dtl-modal {
    display: block;
  }

  .top-story-dtl-modal__cont {
    margin: min(8vw, 60px) auto;
  }
}
@media screen and (min-width: 751px) {
  .top-shop-btn {
    left: calc(750px - 178px - 16px);
  }
}
@media screen and (min-width: 769px) {
  /* ===========================================================
      タブレット横、PC
  =========================================================== */
}