@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

.layout {
  margin: 0;
  padding: 50px 0 0;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: 0;
  color: #ffffff;
  background: #00be55;
}

.l-header {
  line-height: normal;
}

.layout-breakpc {
  display: none;
}


/* -- about -- */
.layout-about {
  width: 100%;
  padding: calc(22 / 750 * 100vw) 0 calc(288 / 750 * 100vw);
  background: url('../img/index_about_02_sp.png') calc(496 / 750 * 100vw) calc(759 / 750 * 100vw) / calc(253 / 750 * 100vw) no-repeat,
              url('../img/bg-index_about_01_sp.png') center top / cover no-repeat;
}

.layout-about-gotosalesarea {
  display: block;
  width: calc(670 / 750 * 100vw);
  height: auto;
  margin: 0 auto;
}

.layout-about-title {
  width: calc(697 / 750 * 100vw);
  height: calc(559 / 750 * 100vw);
  position: relative;
  margin: calc(30 / 750 * 100vw) auto 0;
  background: url('../img/index_about_title.png') calc(405 / 750 * 100vw) 0 / calc(185 / 750 * 100vw) no-repeat;
}

.layout-about-title-pikon {
  width: calc(315 / 750 * 100vw);
  height: auto;
  position: absolute;
  inset: calc(87 / 750 * 100vw) auto auto calc(65 / 750 * 100vw);
  margin: 0;
}

.layout-about-title-pikon-image {
  width: 100%;
  height: auto;
}

.layout-about-title-campaign {
  width: calc(697 / 750 * 100vw);
  height: calc(286 / 750 * 100vw);
  position: absolute;
  inset: calc(273 / 750 * 100vw) auto auto 0;
  margin: 0;
}

.layout-about-title-campaign-01 {
  display: block;
  width: calc(692 / 750 * 100vw);
  height: auto;
  position: absolute;
  inset: 0 auto auto calc(5 / 750 * 100vw);
}

.layout-about-title-campaign-02 {
  display: block;
  width: calc(694 / 750 * 100vw);
  height: auto;
  position: absolute;
  inset: calc(219 / 750 * 100vw) auto auto 0;
}

.layout-about-summary {
  width: calc(450 / 750 * 100vw);
  margin: calc(72 / 750 * 100vw) 0 0 calc(29 / 750 * 100vw);
  font-weight: 700;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(56 / 32);
}

.layout-about-period {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(710 / 750 * 100vw);
  height: calc(177 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  margin: calc(39 / 750 * 100vw) auto 0;
  background: linear-gradient(to right,
    #ff5565,
    #ff9400 50%,
    #ff565f
  );
  border-radius: calc(32 / 750 * 100vw);
}
.layout-about-period::before {
  content: '';
  display: block;
  width: calc(702 / 750 * 100vw);
  height: calc(169 / 750 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(4 / 750 * 100vw) auto auto calc(4 / 750 * 100vw);
  z-index: 0;
  background: #ffffff;
  border-radius: calc(28 / 750 * 100vw);
}

.layout-about-period-paragraph {
  position: relative;
  z-index: 0;
  margin: -0.1em 0 0;
  font-weight: 900;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(48 / 32);
  text-align: center;
  color: transparent;
  background: linear-gradient(to right,
    #ff007d,
    #ff9900 50%,
    #ff007d
  );
  background-clip: text;
}

.layout-about-period-paragraph-showpc {
  display: none;
}

.layout-about-period-paragraph-strong {
  font-size: max(44 / 750 * 100vw, 12px);
  line-height: calc(48 / 44);
}

.layout-about-hitbox {
  width: 100%;
  height: 0;
  position: absolute;
  inset: calc(1533 / 750 * 100vw) auto auto 0;
}


/* -- button -- */
.layout-button {
  width: 100%;
  height: 0;
  position: absolute;
  inset: calc(1388 / 750 * 100vw) auto auto 0;
  z-index: 10;
}

.layout-button-active {
  position: fixed;
  inset: auto auto calc((113 + 32) / 750 * 100vw) 0;
}

.layout-button-application {
  display: block;
  width: calc(610 / 750 * 100vw);
  height: calc(113 / 750 * 100vw);
  position: absolute;
  inset: 0 auto auto calc(50% - 610 / 2 / 750 * 100vw);
  text-decoration: none;
  background: linear-gradient(to bottom,
      #ffa900,
      #ff1a65
    );
  border-radius: calc(19 / 750 * 100vw);
}
.layout-button-application::before {
  content: '';
  display: block;
  width: calc(593 / 750 * 100vw);
  height: calc(101 / 750 * 100vw);
  position: absolute;
  inset: calc(7 / 750 * 100vw) auto auto calc(50% - 593 / 2 / 750 * 100vw);
  background: url('../img/index_button_application.png') calc(519 / 750 * 100vw) calc(10 / 750 * 100vw) / calc(35 / 750 * 100vw) no-repeat,
    linear-gradient(to bottom,
      #ff1a65,
      #ffa900
    );
  border-radius: calc(13 / 750 * 100vw);
}
.layout-button-application-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(593 / 750 * 100vw);
  height: calc(101 / 750 * 100vw);
  box-sizing: border-box;
  position: absolute;
  inset: calc(7 / 750 * 100vw) auto auto calc(50% - 593 / 2 / 750 * 100vw);
  padding: 0 calc(51 / 750 * 100vw) 0 0;
  font-weight: 900;
  font-size: max(48 / 750 * 100vw, 12px);
  line-height: 1;
  color: #ffffff;
}


/* -- giftdetail -- */
.layout-giftdetail {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: calc(-295 / 750 * 100vw) 0 0;
  padding: calc(287 / 750 * 100vw) 0 calc(207 / 750 * 100vw);
  filter: drop-shadow(0 0 calc(32 / 750 * 100vw) rgba(0, 0, 0, 0.6));
}
.layout-giftdetail::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 calc(88 / 750 * 100vw), 100% calc(185 / 750 * 100vw), 100% calc(100% - (115 / 750 * 100vw)), 0 100%);
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  background: linear-gradient(to bottom,
    #f61865,
    #ff7b00
  );
}
.layout-giftdetail::after {
  content: '';
  display: block;
  width: calc(147 / 750 * 100vw);
  height: calc(269 / 750 * 100vw);
  position: absolute;
  inset: calc(28 / 750 * 100vw) auto auto calc(599 / 750 * 100vw);
  z-index: 0;
  background: url('../img/index_giftdetail.png') center / contain no-repeat;
}

.layout-giftdetail-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(610 / 750 * 100vw);
  height: calc(96 / 750 * 100vw);
  position: relative;
  z-index: 10;
  margin: 0 auto;
  color: red;
}
.layout-giftdetail-title::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
  z-index: 0;
  clip-path: polygon(0 0, calc(100% - (48 / 750 * 100vw)) 0, 100% 50%, calc(100% - (48 / 750 * 100vw)) 100%, 0 100%);
  background: #ffffff;
}
.layout-giftdetail-title::after {
  content: '';
  display: block;
  width: calc(56 / 750 * 100vw);
  height: calc(126 / 750 * 100vw);
  position: absolute;
  inset: calc(-40 / 750 * 100vw) auto auto calc(5 / 750 * 100vw);
  z-index: 0;
  background: url('../img/index_giftdetail_title.png') center / contain no-repeat;
}

.layout-giftdetail-title-text {
  position: relative;
  z-index: 0;
  margin: -0.1em 0 0;
  font-weight: 900;
  font-size: max(60 / 750 * 100vw, 12px);
  line-height: 1;
  letter-spacing: calc(-60em / 1000);
  color: #ff1865;
}

.layout-giftdetail-course {
  list-style: none;
  width: calc(710 / 750 * 100vw);
  position: relative;
  margin: calc(60 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-giftdetail-course-01,
.layout-giftdetail-course-02 {
  width: calc(710 / 750 * 100vw);
  position: relative;
  margin: calc(60 / 750 * 100vw) auto 0;
  padding: calc(38 / 750 * 100vw) 0 calc(48 / 750 * 100vw);
  background: #ffffff;
  border-radius: calc(29 / 750 * 100vw);
}

.layout-giftdetail-course-01-title,
.layout-giftdetail-course-02-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(506 / 750 * 100vw);
  height: calc(70 / 750 * 100vw);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 0 0.1em;
  font-weight: 700;
  font-size: max(48 / 750 * 100vw, 12px);
  line-height: 1;
  color: #ffffff;
  border-radius: calc(70 / 2 / 750 * 100vw);
}
.layout-giftdetail-course-01-title {
  background: #ff5746;
}
.layout-giftdetail-course-02-title {
  background: #ffaa00;
}

.layout-giftdetail-course-01-slot,
.layout-giftdetail-course-02-slot {
  display: block;
  position: absolute;
}
.layout-giftdetail-course-01-slot {
  width: calc(425 / 750 * 100vw);
  inset: calc(149 / 750 * 100vw) auto auto calc(184 / 750 * 100vw);
}
.layout-giftdetail-course-02-slot {
  width: calc(397 / 750 * 100vw);
  inset: calc(156 / 750 * 100vw) auto auto calc(162 / 750 * 100vw);
}
.layout-giftdetail-course-01-slot-image,
.layout-giftdetail-course-02-slot-image {
  width: 100%;
  height: auto;
}

.layout-giftdetail-course-01-image,
.layout-giftdetail-course-02-image {
  display: block;
  height: auto;
}
.layout-giftdetail-course-01-image {
  width: calc(317 / 750 * 100vw);
  margin: calc(184 / 750 * 100vw) auto 0;
}
.layout-giftdetail-course-02-image {
  width: calc(390 / 750 * 100vw);
  margin: calc(230 / 750 * 100vw) auto 0;
}

.layout-giftdetail-course-01-prize {
  margin: calc(30 / 750 * 100vw) auto 0;
}

.layout-giftdetail-course-01-prize-title {
  margin: 0 auto;
  font-weight: 900;
  font-size: max(40 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ff5746;
}

.layout-giftdetail-course-01-prize-summary {
  margin: calc(14 / 750 * 100vw) auto 0;
  font-weight: 900;
  font-size: max(48 / 750 * 100vw, 12px);
  line-height: calc(96 / 48);
  text-align: center;
  color: #ff5746;
}

.layout-giftdetail-course-01-prize-summary-strong {
  font-size: max(96 / 750 * 100vw, 12px);
  line-height: 1;
}

.layout-giftdetail-course-02-prize {
  margin: 0 auto;
}

.layout-giftdetail-course-02-prize-limited {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(456 / 750 * 100vw);
  height: calc(94 / 750 * 100vw);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 0 0.1em;
  font-weight: 900;
  font-size: max(28 / 750 * 100vw, 12px);
  line-height: calc(40 / 28);
  text-align: center;
  color: #ffa826;
  border: max(2 / 750 * 100vw, 1px) solid #ffa826;
  border-radius: calc(94 / 2 / 750 * 100vw);
}

.layout-giftdetail-course-02-prize-summary {
  margin: calc(31 / 750 * 100vw) 0 auto 0;
  font-weight: 900;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ffa826;
}

.layout-giftdetail-course-02-prize-title {
  margin: calc(22 / 750 * 100vw) 0 auto 0;
  font-weight: 900;
  font-size: max(48 / 750 * 100vw, 12px);
  line-height: calc(69 / 48);
  text-align: center;
  color: #ffa826;
}

.layout-giftdetail-note {
  list-style: none;
  width: calc(710 / 750 * 100vw);
  position: relative;
  margin: 0 auto;
  padding: 0;
}

.layout-giftdetail-note-item {
  padding: 0 0 0 1em;
  font-weight: 400;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(48 / 32);
  text-align: center;
  text-indent: -1em;
  color: #ffffff;
}
.layout-giftdetail-note-item::before {
  content: '※';
}


/* -- instruction -- */
.layout-instruction {
  width: 100%;
  margin: calc(-115 / 750 * 100vw) 0 0;
  padding: calc(177 / 750 * 100vw) 0 calc(46 / 750 * 100vw);
  background: url('../img/bg-index_instruction_sp.png') center top / contain repeat-y;
}

.layout-instruction-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(610 / 750 * 100vw);
  height: calc(96 / 750 * 100vw);
  position: relative;
  margin: 0 auto;
  color: red;
}
.layout-instruction-title::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
  z-index: 0;
  clip-path: polygon(0 0, calc(100% - (48 / 750 * 100vw)) 0, 100% 50%, calc(100% - (48 / 750 * 100vw)) 100%, 0 100%);
  background: #ffffff;
}
.layout-instruction-title::after {
  content: '';
  display: block;
  width: calc(56 / 750 * 100vw);
  height: calc(126 / 750 * 100vw);
  position: absolute;
  inset: calc(-40 / 750 * 100vw) auto auto calc(5 / 750 * 100vw);
  z-index: 0;
  background: url('../img/index_giftdetail_title.png') center / contain no-repeat;
}

.layout-instruction-title-text {
  position: relative;
  z-index: 0;
  margin: -0.1em 0 0;
  font-weight: 900;
  font-size: max(60 / 750 * 100vw, 12px);
  line-height: 1;
  letter-spacing: calc(-60em / 1000);
  color: #00bd59;
}

.layout-instruction-summary {
  width: calc(610 / 750 * 100vw);
  margin: calc(40 / 750 * 100vw) auto 0;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(55 / 32);
  text-align: center;
}

.layout-instruction-step {
  list-style: none;
  width: calc(710 / 750 * 100vw);
  position: relative;
  margin: calc(34 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-instruction-step-01,
.layout-instruction-step-02,
.layout-instruction-step-03,
.layout-instruction-step-04 {
  position: relative;
  padding: calc(14 / 750 * 100vw) 0 0;
  background: #ffffff;
}
.layout-instruction-step-01 {
  width: 100%;
  height: calc(392 / 750 * 100vw);
  border-radius: calc(55 / 750 * 100vw) calc(55 / 750 * 100vw) 0 0;
}
.layout-instruction-step-02 {
  width: 100%;
  height: calc(377 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) 0 0;
}
.layout-instruction-step-03 {
  width: 100%;
  height: calc(377 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) 0 0;
}
.layout-instruction-step-04 {
  width: 100%;
  height: calc(357 / 750 * 100vw);
  margin: calc(10 / 750 * 100vw) 0 0;
  border-radius: 0 0 calc(55 / 750 * 100vw) calc(55 / 750 * 100vw);
}

.layout-instruction-step-01-title,
.layout-instruction-step-02-title,
.layout-instruction-step-03-title,
.layout-instruction-step-04-title {
  position: absolute;
  inset: calc(14 / 750 * 100vw) auto auto calc(25 / 750 * 100vw);
  margin: 0;
  font-weight: 900;
  font-size: max(30 / 750 * 100vw, 12px);
  line-height: calc(55 / 30);
  color: #00bd59;
}

.layout-instruction-step-01-title-strong,
.layout-instruction-step-02-title-strong,
.layout-instruction-step-03-title-strong,
.layout-instruction-step-04-title-strong {
  font-size: max(55 / 750 * 100vw, 12px);
  line-height: 1;
}

.layout-instruction-step-01-icon,
.layout-instruction-step-02-icon,
.layout-instruction-step-03-icon,
.layout-instruction-step-04-icon {
  display: block;
  position: absolute;
}
.layout-instruction-step-01-icon {
  width: calc(268 / 750 * 100vw);
  inset: calc(76 / 750 * 100vw) auto auto calc(50% - 268 / 2 / 750 * 100vw);
}
.layout-instruction-step-02-icon {
  width: calc(237 / 750 * 100vw);
  height: auto;
  inset: calc(77 / 750 * 100vw) auto auto calc(50% - 237 / 2 / 750 * 100vw);
}
.layout-instruction-step-03-icon {
  width: calc(206 / 750 * 100vw);
  inset: calc(116 / 750 * 100vw) auto auto calc(106 / 750 * 100vw);
}
.layout-instruction-step-02-icon {
  width: calc(237 / 750 * 100vw);
  height: auto;
  inset: calc(77 / 750 * 100vw) auto auto calc(50% - 237 / 2 / 750 * 100vw);
}
.layout-instruction-step-04-icon {
  width: calc(152 / 750 * 100vw);
  height: auto;
  inset: calc(63 / 750 * 100vw) auto auto calc(50% - 152 / 2 / 750 * 100vw);
}

.layout-instruction-step-01-icon-image,
.layout-instruction-step-03-icon-image {
  width: 100%;
  height: auto;
}

.layout-instruction-step-01-detail,
.layout-instruction-step-02-detail,
.layout-instruction-step-04-detail {
  width: 100%;
  position: absolute;
  margin: 0;
  font-weight: 500;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(55 / 32);
  text-align: center;
  color: #00bd59;
}
.layout-instruction-step-01-detail {
  inset: calc(282 / 750 * 100vw) auto auto 0;
}
.layout-instruction-step-02-detail {
  inset: calc(288 / 750 * 100vw) auto auto 0;
}
.layout-instruction-step-04-detail {
  inset: calc(259 / 750 * 100vw) auto auto 0;
}

.layout-instruction-step-03-detail {
  width: calc(300 / 750 * 100vw);
  position: absolute;
  inset: calc(38 / 750 * 100vw) auto auto calc(353 / 750 * 100vw);
  margin: 0;
}

.layout-instruction-step-03-detail-paragraph {
  width: 100%;
  margin: 0;
  font-weight: 500;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(55 / 32);
  color: #00bd59;
}

.layout-instruction-step-03-detail-step {
  list-style: none;
  width: 100%;
  margin: calc(9 / 750 * 100vw) 0 0;
  padding: 0;
}

.layout-instruction-step-03-detail-step-01,
.layout-instruction-step-03-detail-step-02,
.layout-instruction-step-03-detail-step-03 {
  margin: calc(18 / 750 * 100vw) 0 0;
  padding: 0 0 0 1em;
  font-weight: 500;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(36 / 32);
  text-indent: -1em;
  color: #00bd59;
}
.layout-instruction-step-03-detail-step-01 {
  margin: 0;
}
.layout-instruction-step-03-detail-step-01::before {
  content: '①';
}
.layout-instruction-step-03-detail-step-02::before {
  content: '②';
}
.layout-instruction-step-03-detail-step-03::before {
  content: '③';
}

.layout-instruction-eligibleproduct {
  width: calc(710 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(51 / 750 * 100vw) auto 0;
  padding: calc(56 / 750 * 100vw) 0 calc(46 / 750 * 100vw);
  background: #ffffff;
  border-radius: calc(31 / 750 * 100vw);
}

.layout-instruction-eligibleproduct-title {
  width: 100%;
  margin: 0;
  font-weight: 900;
  font-size: max(48 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #00bd59;
}

.layout-instruction-eligibleproduct-list {
  display: flex;
  list-style: none;
  width: calc(440 / 750 * 100vw);
  margin: calc(32 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-instruction-eligibleproduct-list-item {
  width: calc(220 / 750 * 100vw);
  position: relative;
}

.layout-instruction-eligibleproduct-list-item-image-01 {
  display: block;
  width: calc(145 / 750 * 100vw);
  height: auto;
  position: absolute;
  inset: 0 auto auto calc(50% - 145 / 2 / 750 * 100vw);
  margin: 0 auto;
}

.layout-instruction-eligibleproduct-list-item-image-02 {
  display: block;
  width: calc(151 / 750 * 100vw);
  height: auto;
  position: absolute;
  inset: 0 auto auto calc(50% - 151 / 2 / 750 * 100vw);
  margin: 0 auto;
}

.layout-instruction-eligibleproduct-list-item-title {
  width: 100%;
  margin: calc(513 / 750 * 100vw) 0 0;
}

.layout-instruction-eligibleproduct-list-item-title-pikon {
  width: 100%;
  margin: 0;
  font-weight: 500;
  font-size: max(24 / 750 * 100vw, 12px);
  line-height: calc(30 / 24);
  text-align: center;
  color: #00bd59;
}

.layout-instruction-eligibleproduct-list-item-title-flavor {
  width: 100%;
  margin: calc(20 / 750 * 100vw) 0 0;
  font-weight: 500;
  font-size: max(36 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #00bd59;
}

.layout-instruction-eligibleproduct-detail-01,
.layout-instruction-eligibleproduct-detail-02,
.layout-instruction-eligibleproduct-detail-03 {
  width: calc(710 / 750 * 100vw);
  box-sizing: border-box;
  background: #ffffff;
  border-radius: calc(25 / 750 * 100vw);
}
.layout-instruction-eligibleproduct-detail-01 {
  margin: calc(60 / 750 * 100vw) auto 0;
  padding: calc(3 / 750 * 100vw) 0 calc(47 / 750 * 100vw);
}
.layout-instruction-eligibleproduct-detail-02,
.layout-instruction-eligibleproduct-detail-03 {
  margin: calc(36 / 750 * 100vw) auto 0;
  padding: calc(3 / 750 * 100vw) 0 calc(15 / 750 * 100vw);
}
.layout-instruction-eligibleproduct-detail-01-title,
.layout-instruction-eligibleproduct-detail-02-title,
.layout-instruction-eligibleproduct-detail-03-title {
  width: calc(100% - 6 / 750 * 100vw);
  box-sizing: border-box;
  margin: 0 auto;
  padding: calc(7 / 750 * 100vw) 0 calc(0.1em + 7 / 750 * 100vw);
  font-weight: 900;
  font-size: max(36 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ffffff;
  background: #00bd59;
  border-radius: calc(25 / 750 * 100vw) calc(25 / 750 * 100vw) 0 0;
}

.layout-instruction-eligibleproduct-detail-01-paragraph,
.layout-instruction-eligibleproduct-detail-02-paragraph,
.layout-instruction-eligibleproduct-detail-03-paragraph {
  width: 100%;
  font-weight: 700;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(60 / 32);
  text-align: center;
  color: #00bd59;
}
.layout-instruction-eligibleproduct-detail-01-paragraph {
  margin: calc(40 / 750 * 100vw) 0 0;
}
.layout-instruction-eligibleproduct-detail-02-paragraph,
.layout-instruction-eligibleproduct-detail-03-paragraph {
  margin: calc(12 / 750 * 100vw) 0 0;
}

.layout-instruction-eligibleproduct-note {
  list-style: none;
  width: calc(610 / 750 * 100vw);
  margin: calc(36 / 750 * 100vw) auto 0;
  padding: 0;
}
.layout-instruction-eligibleproduct-note-item {
  font-weight: 400;
  font-size: max(28 / 750 * 100vw, 12px);
  line-height: calc(40 / 28);
}
.layout-instruction-eligibleproduct-note-item::before {
  content: '※';
}


/* -- keypoint -- */
.layout-keypoint {
  width: 100%;
  box-sizing: border-box;
  padding: calc(67 / 750 * 100vw) 0 calc(82 / 750 * 100vw);
  background: linear-gradient(to bottom,
      #ffa900,
      #ff1a65
    );
}

.layout-keypoint-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(650 / 750 * 100vw);
  height: calc(96 / 750 * 100vw);
  position: relative;
  margin: 0 auto;
  color: red;
}
.layout-keypoint-title::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
  z-index: 0;
  clip-path: polygon(0 0, calc(100% - (48 / 750 * 100vw)) 0, 100% 50%, calc(100% - (48 / 750 * 100vw)) 100%, 0 100%);
  background: #ffffff;
}
.layout-keypoint-title::after {
  content: '';
  display: block;
  width: calc(56 / 750 * 100vw);
  height: calc(126 / 750 * 100vw);
  position: absolute;
  inset: calc(-40 / 750 * 100vw) auto auto calc(5 / 750 * 100vw);
  z-index: 0;
  background: url('../img/index_giftdetail_title.png') center / contain no-repeat;
}

.layout-keypoint-title-text {
  position: relative;
  z-index: 0;
  margin: -0.1em 0 0;
  font-weight: 900;
  font-size: max(60 / 750 * 100vw, 12px);
  line-height: 1;
  letter-spacing: calc(-60em/ 1000);
  color: #ff7a00;
}

.layout-keypoint-summary {
  width: calc(650 / 750 * 100vw);
  margin: calc(40 / 750 * 100vw) auto 0;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(55 / 32);
  text-align: center;
}

.layout-keypoint-detail {
  list-style: none;
  width: calc(710 / 750 * 100vw);
  margin: calc(40 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-keypoint-detail-01 {
  width: calc(710 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(51 / 750 * 100vw) auto 0;
  padding: calc(58 / 750 * 100vw) 0;
  background: #ffffff;
  border-radius: calc(31 / 750 * 100vw);
}

.layout-keypoint-detail-01-title {
  width: 100%;
  margin: 0;
  font-weight: 900;
  font-size: max(48 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ff7a00;
}

.layout-keypoint-detail-01-summary {
  width: 100%;
  margin: calc(37 / 750 * 100vw) 0 0;
  font-weight: 700;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(55 / 32);
  text-align: center;
  color: #ff7a00;
}

.layout-keypoint-detail-01-course {
  list-style: none;
  width: calc(562 / 750 * 100vw);
  margin: calc(40 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-keypoint-detail-01-course-01 {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: calc(28 / 750 * 100vw) 0 calc(48 / 750 * 100vw);
  border: max(2 / 750 * 100vw, 1px) solid #ff7a00;
  border-radius: calc(31 / 750 * 100vw);
}

.layout-keypoint-detail-01-course-01-title,
.layout-keypoint-detail-01-course-02-title {
  width: calc(320 / 750 * 100vw);
  box-sizing: border-box;
  margin: 0 auto;
  padding: calc(14 / 750 * 100vw) 0 calc(0.1em + 14 / 750 * 100vw);
  font-weight: 900;
  font-size: max(36 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ffffff;
  background: #ff7a00;
  border-radius: calc(15 / 750 * 100vw);
}

.layout-keypoint-detail-01-course-01-detail,
.layout-keypoint-detail-01-course-02-detail {
  width: 100%;
  margin: calc(15 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(55 / 32);
  text-align: center;
  color: #000000;
}

.layout-keypoint-detail-01-course-01-image {
  display: block;
  width: calc(446 / 750 * 100vw);
  height: auto;
  margin: calc(42 / 750 * 100vw) auto 0;
}

.layout-keypoint-detail-01-course-02 {
  width: 100%;
  box-sizing: border-box;
  margin: calc(38 / 750 * 100vw) 0 0;
  padding: calc(28 / 750 * 100vw) 0 calc(48 / 750 * 100vw);
  border: max(2 / 750 * 100vw, 1px) solid #ff7a00;
  border-radius: calc(31 / 750 * 100vw);
}

.layout-keypoint-detail-01-course-02-icon {
  display: block;
  width: calc(520 / 750 * 100vw);
  height: auto;
  margin: calc(22 / 750 * 100vw) auto 0;
}

.layout-keypoint-detail-01-course-02-icon-image {
  width: 100%;
  height: auto;
}

.layout-keypoint-detail-01-course-02-note {
  width: 100%;
  margin: calc(25 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: max(30 / 750 * 100vw, 12px);
  line-height: calc(48 / 30);
  text-align: center;
  color: #ff7a00;
}

.layout-keypoint-detail-01-note {
  list-style: none;
  width: 100%;
  margin: calc(26 / 750 * 100vw) 0 0;
  padding: 0;
}
.layout-keypoint-detail-01-note-item {
  font-weight: 700;
  font-size: max(27 / 750 * 100vw, 12px);
  line-height: calc(40 / 27);
  text-align: center;
  color: #ff7a00;
}
.layout-keypoint-detail-01-note-item::before {
  content: '・';
}

.layout-keypoint-detail-02 {
  width: calc(710 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(68 / 750 * 100vw) auto 0;
  padding: calc(58 / 750 * 100vw) 0 calc(72 / 750 * 100vw);
  background: #ffffff;
  border-radius: calc(31 / 750 * 100vw);
}

.layout-keypoint-detail-02-title {
  width: 100%;
  margin: 0;
  font-weight: 900;
  font-size: max(48 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ff3f57;
}

.layout-keypoint-detail-02-summary {
  width: 100%;
  margin: calc(37 / 750 * 100vw) 0 0;
  font-weight: 700;
  font-size: max(32 / 750 * 100vw, 12px);
  line-height: calc(55 / 32);
  text-align: center;
  color: #ff3f57;
}

.layout-keypoint-detail-02-course {
  list-style: none;
  width: calc(614 / 750 * 100vw);
  margin: calc(32 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-keypoint-detail-02-course-01 {
  display: grid;
  grid-template: calc(53 / 750 * 100vw) calc(14 / 750 * 100vw) calc(150 / 750 * 100vw) calc(55 / 750 * 100vw) calc(92 / 750 * 100vw) / calc(32 / 750 * 100vw) calc(13 / 750 * 100vw) calc(125 / 750 * 100vw) calc(440 / 750 * 100vw);
  width: 100%;
  box-sizing: border-box;
  margin: calc(38 / 750 * 100vw) 0 0;
  padding: 0;
  border: max(2 / 750 * 100vw, 1px) solid #ff3f57;
  border-radius: calc(31 / 750 * 100vw);
}

.layout-keypoint-detail-02-course-01-title {
  grid-area: 4 / 1 / 5 / 5;
  margin: 0;
  font-weight: 900;
  font-size: max(36 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ff3f57;
}

.layout-keypoint-detail-02-course-01-image {
  grid-area: 2 / 2 / 4 / 4;
  display: block;
  width: calc(130 / 750 * 100vw);
  height: auto;
}

.layout-keypoint-detail-02-course-01-detail {
  grid-area: 3 / 4 / 4 / 5;
  margin: 0;
  font-weight: 400;
  font-size: max(29 / 750 * 100vw, 12px);
  line-height: calc(36 / 29);
  color: #000000;
}

.layout-keypoint-detail-02-course-01-detail-strong {
  font-weight: 700;
}

.layout-keypoint-detail-02-course-01-required {
  grid-area: 5 / 3 / 6 / 5;
  display: grid;
  list-style: none;
  grid-template: calc(36 / 750 * 100vw) calc(56 / 750 * 100vw) / calc(185 / 750 * 100vw) calc(200 / 750 * 100vw) calc(180 / 750 * 100vw);
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.layout-keypoint-detail-02-course-01-required-item {
  font-size: max(28 / 750 * 100vw, 12px);
  line-height: calc(36 / 28);
  color: #000000;
}
.layout-keypoint-detail-02-course-01-required-item::before {
  content: '・';
}

.layout-keypoint-detail-02-course-02 {
  display: grid;
  grid-template: calc(37 / 750 * 100vw) calc(54 / 750 * 100vw) calc(47 / 750 * 100vw) calc(210 / 750 * 100vw) / calc(15 / 750 * 100vw) calc(150 / 750 * 100vw) calc(445 / 750 * 100vw);
  width: 100%;
  box-sizing: border-box;
  margin: calc(36 / 750 * 100vw) 0 0;
  padding: 0;
  border: max(2 / 750 * 100vw, 1px) solid #ff3f57;
  border-radius: calc(31 / 750 * 100vw);
}

.layout-keypoint-detail-02-course-02-title {
  grid-area: 2 / 1 / 3 / 4;
  margin: 0;
  font-weight: 900;
  font-size: max(36 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ff3f57;
}

.layout-keypoint-detail-02-course-02-image {
  grid-area: 3 / 2 / 5 / 3;
  display: block;
  width: calc(130 / 750 * 100vw);
  height: auto;
}

.layout-keypoint-detail-02-course-02-detail {
  grid-area: 4 / 3 / 5 / 4;
  margin: 0;
  font-weight: 400;
  font-size: max(30 / 750 * 100vw, 12px);
  line-height: calc(36 / 30);
  color: #000000;
}

.layout-keypoint-detail-02-course-03 {
  width: 100%;
  box-sizing: border-box;
  margin: calc(35 / 750 * 100vw) 0 0;
  padding: calc(30 / 750 * 100vw) 0 calc(39 / 750 * 100vw);
  border: max(2 / 750 * 100vw, 1px) solid #ff3f57;
  border-radius: calc(31 / 750 * 100vw);
}

.layout-keypoint-detail-02-course-03-title {
  margin: 0;
  font-weight: 900;
  font-size: max(36 / 750 * 100vw, 12px);
  line-height: 1;
  text-align: center;
  color: #ff3f57;
}

.layout-keypoint-detail-02-course-03-detail {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(57 / 750 * 100vw) 0;
  width: calc(470 / 750 * 100vw);
  margin: calc(68 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-keypoint-detail-02-course-03-detail-01,
.layout-keypoint-detail-02-course-03-detail-02,
.layout-keypoint-detail-02-course-03-detail-03,
.layout-keypoint-detail-02-course-03-detail-04 {
  width: calc(235 / 750 * 100vw);
  padding: calc(210 / 750 * 100vw) 0 0;
  font-weight: 400;
  font-size: max(30 / 750 * 100vw, 12px);
  line-height: calc(36 / 30);
  text-align: center;
  color: #000000;
}

.layout-keypoint-detail-02-course-03-detail-01 {
  background: url('../img/index_keypoint_detail_02_course_03_detail_01.png') center top / calc(120 / 750 * 100vw) no-repeat;
}

.layout-keypoint-detail-02-course-03-detail-02 {
  background: url('../img/index_keypoint_detail_02_course_03_detail_02.png') center top / calc(116 / 750 * 100vw) no-repeat;
}

.layout-keypoint-detail-02-course-03-detail-03 {
  background: url('../img/index_keypoint_detail_02_course_03_detail_03.png') center top / calc(108 / 750 * 100vw) no-repeat;
}

.layout-keypoint-detail-02-course-03-detail-04 {
  background: url('../img/index_keypoint_detail_02_course_03_detail_04.png') center top / calc(116 / 750 * 100vw) no-repeat;
}

.layout-keypoint-detail-02-note {
  list-style: none;
  width: calc(614 / 750 * 100vw);
  margin: calc(70 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-keypoint-detail-02-note-item {
  font-weight: 400;
  font-size: max(28 / 750 * 100vw, 12px);
  line-height: calc(36 / 28);
  text-align: center;
  color: #ff3f57;
}
.layout-keypoint-detail-02-note-item::before {
  content: '※';
}


/* -- guideline -- */
.layout-guideline {
  width: 100%;
  box-sizing: border-box;
  padding: calc(70 / 750 * 100vw) 0 calc(76 / 750 * 100vw);
  background: #ffffff;
}

.layout-guideline-frame {
  width: calc(710 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding: calc(33 / 750 * 100vw) 0 calc(45 / 750 * 100vw);
  background: #00c849;
  border-radius: calc(31 / 750 * 100vw);
}
.layout-guideline-frame::before {
  content: '';
  width: calc(672 / 750 * 100vw);
  height: calc(441 / 750 * 100vw);
  position: absolute;
  inset: auto auto calc(22 / 750 * 100vw) calc(50% - 672 / 2 / 750 * 100vw);
  margin: 0;
  background: #ffffff;
  border-radius: calc(19 / 750 * 100vw);
}

.layout-guideline-frame-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(345 / 750 * 100vw);
  height: calc(85 / 750 * 100vw);
  position: relative;
  margin: 0 auto;
  color: red;
}
.layout-guideline-frame-title::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
  z-index: 0;
  clip-path: polygon(0 0, calc(100% - (48 / 750 * 100vw)) 0, 100% 50%, calc(100% - (48 / 750 * 100vw)) 100%, 0 100%);
  background: #ffffff;
}
.layout-guideline-frame-title::after {
  content: '';
  display: block;
  width: calc(43 / 750 * 100vw);
  height: calc(90 / 750 * 100vw);
  position: absolute;
  inset: calc(-15 / 750 * 100vw) auto auto calc(-2 / 750 * 100vw);
  z-index: 0;
  background: url('../img/index_guideline_frame_title.png') center / contain no-repeat;
}

.layout-guideline-frame-title-text {
  position: relative;
  z-index: 0;
  margin: -0.1em 0 0;
  font-weight: 900;
  font-size: max(60 / 750 * 100vw, 12px);
  line-height: 1;
  letter-spacing: calc(-60em / 1000);
  color: #00c849;
}

.layout-guideline-frame-frame {
  width: calc(608 / 750 * 100vw);
  height: calc(402 / 750 * 100vw);
  overflow: hidden auto;
  position: relative;
  margin: calc(38 / 750 * 100vw) auto 0;
}

.layout-guideline-frame-frame-paragraph {
  width: 100%;
  font-weight: 400;
  font-size: max(28 / 750 * 100vw, 12px);
  line-height: calc(52 / 28);
  color: #000000;
}

.layout-guideline-frame-frame-paragraph-strong {
  font-weight: 700;
}


/* -- faq -- */
.layout-faq {
  width: 100%;
  margin: 0;
  padding: calc(102 / 750 * 100vw) 0 calc(78 / 750 * 100vw);
  background: url('../img/bg-index_faq_sp.png') center top / cover no-repeat;
}

.layout-faq-frame-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: calc(594 / 750 * 100vw);
  height: calc(140 / 750 * 100vw);
  position: relative;
  margin: 0 auto;
  color: red;
}
.layout-faq-frame-title::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
  z-index: 0;
  clip-path: polygon(0 0, calc(100% - (48 / 750 * 100vw)) 0, 100% 50%, calc(100% - (48 / 750 * 100vw)) 100%, 0 100%);
  background: #ffffff;
}
.layout-faq-frame-title::after {
  content: '';
  display: block;
  width: calc(62 / 750 * 100vw);
  height: calc(141 / 750 * 100vw);
  position: absolute;
  inset: calc(-7 / 750 * 100vw) auto auto calc(-2 / 750 * 100vw);
  z-index: 0;
  background: url('../img/index_faq_frame_title_sp.png') center / contain no-repeat;
}

.layout-faq-frame-title-text {
  position: relative;
  z-index: 0;
  margin: -0.1em 0 0;
  font-weight: 900;
  font-size: max(45 / 750 * 100vw, 12px);
  line-height: calc(60 / 45);
  letter-spacing: calc(-60em / 1000);
  text-align: center;
  color: #00c849;
}

.layout-faq-frame-list {
  list-style: none;
  width: calc(710 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(47 / 750 * 100vw) auto 0;
  padding: calc(43 / 750 * 100vw) 0 calc(73 / 750 * 100vw);
  background: #ffffff;
  border-radius: calc(21 / 750 * 100vw);
}

.layout-faq-frame-list-question-01,
.layout-faq-frame-list-question-02,
.layout-faq-frame-list-question-03,
.layout-faq-frame-list-question-04 {
  width: calc(540 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  margin: calc(60 / 750 * 100vw) auto 0;
  padding: 0 0 0 1em;
  font-weight: 700;
  font-size: max(34 / 750 * 100vw, 12px);
  line-height: calc(57 / 34);
  color: #00c849;
}
.layout-faq-frame-list-question-01::before,
.layout-faq-frame-list-question-02::before,
.layout-faq-frame-list-question-03::before,
.layout-faq-frame-list-question-04::before {
  content: 'Q';
  position: absolute;
  inset: 0 auto auto 0;
  font-weight: 900;
}
.layout-faq-frame-list-question-01 {
  margin: 0 auto;
}

.layout-faq-frame-list-answer {
  width: calc(540 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding: 0 0 0 1em;
  font-weight: 400;
  font-size: max(30 / 750 * 100vw, 12px);
  line-height: calc(57 / 30);
  color: #00c849;
}
.layout-faq-frame-list-answer::before {
  content: 'A';
  position: absolute;
  inset: 0 auto auto 0;
  font-weight: 900;
  font-size: max(34 / 750 * 100vw, 12px);
  line-height: calc(57 / 34);
}

.layout-faq-frame-list-answer a {
  color: #00c849;
  text-decoration: underline;
}


/* -- inquiry -- */
.layout-inquiry {
  width: 100%;
  background: #00BE55;
  box-sizing: border-box;
  padding: calc(67 / 750 * 100vw) 0 calc(56 / 750 * 100vw);
}

.layout-inquiry-title {
  width: 100%;
  margin: 0;
  font-weight: 900;
  font-size: max(48 / 750 * 100vw, 12px);
  line-height: calc(60 / 48);
  text-align: center;
}

.layout-inquiry-paragraph {
  width: 100%;
  margin: calc(72 / 750 * 100vw) 0 0;
  font-weight: 700;
  font-size: max(30 / 750 * 100vw, 12px);
  line-height: calc(48 / 30);
  text-align: center;
}

.layout-inquiry-paragraph-anchor {
  text-decoration: none;
  color: #ffffff;
}

.layout-inquiry-note {
  list-style: none;
  width: 100%;
  box-sizing: border-box;
  margin: calc(46 / 750 * 100vw) auto 0;
  padding: 0;
}

.layout-inquiry-note-item {
  font-weight: 400;
  font-size: max(23 / 750 * 100vw, 12px);
  line-height: calc(48 / 23);
  text-align: center;
}
.layout-inquiry-note-item::before {
  content: '※';
}


.p-parent {
  line-height: normal;
  background: #ffffff;
}


/* -- footer -- */
.l-footer {
  line-height: normal;
  color: #333;
  background: #ffffff;
}

.l-footer_nav {
  background: #ffffff;
}

.l-footer .l-footer_bottom {
  padding-bottom: calc(180 / 750 * 100vw);
}



/* -- min-width: 760px -- */
@media (min-width: 760px) {
  .layout {
    padding: 80px 0 0;
  }
}/* -- /@media (min-width: 760px) -- */


/* -- min-width: 768px -- */
@media (min-width: 768px) {

.layout {
  font-size: max(20 / 1440 * 100vw, 20px);
}

.layout-breakpc {
  display: inline;
}

.layout-breaksp {
  display: none;
}


/* -- about -- */
.layout-about {
  padding: calc(47 / 1440 * 100vw) 0 calc(266 / 1440 * 100vw);
  background: url('../img/index_about_02_pc.png') calc(1064 / 1440 * 100vw) calc(150 / 1440 * 100vw) / calc(375 / 1440 * 100vw) no-repeat,
              url('../img/bg-index_about_01_pc.png') center top / cover no-repeat;
}

.layout-about-gotosalesarea {
  width: calc(1172 / 1440 * 100vw);
}

.layout-about-title {
  width: calc(1030 / 1440 * 100vw);
  height: calc(482 / 1440 * 100vw);
  margin: calc(30 / 1440 * 100vw) 0 0 calc(50 / 1440 * 100vw);
  background: url('../img/index_about_title.png') 0 calc(89 / 1440 * 100vw) / calc(256 / 1440 * 100vw) no-repeat;
}

.layout-about-title-pikon {
  width: calc(215 / 1440 * 100vw);
  inset: calc(15 / 1440 * 100vw) auto auto calc(13 / 1440 * 100vw);
}

.layout-about-title-campaign {
  width: calc(718 / 1440 * 100vw);
  height: calc(297 / 1440 * 100vw);
  inset: 0 auto auto calc(312 / 1440 * 100vw);
}

.layout-about-title-campaign-01 {
  width: 100%;
  inset: 0 auto auto 0;
}

.layout-about-title-campaign-02 {
  width: calc(595 / 1440 * 100vw);
  inset: calc(239 / 1440 * 100vw) auto auto calc(58 / 1440 * 100vw);
}

.layout-about-summary {
  width: calc(700 / 1440 * 100vw);
  margin: calc(-140 / 1440 * 100vw) auto 0;
  font-size: max(20 / 1440 * 100vw, 12px);
  line-height: calc(35 / 20);
  text-align: center;
}

.layout-about-period {
  width: calc(748 / 1440 * 100vw);
  height: calc(73 / 1440 * 100vw);
  margin: calc(48 / 1440 * 100vw) auto 0;
  border-radius: calc(73 / 2 / 1440 * 100vw);
}
.layout-about-period::before {
  width: calc(740 / 1440 * 100vw);
  height: calc(65 / 1440 * 100vw);
  inset: calc(4 / 1440 * 100vw) auto auto calc(4 / 1440 * 100vw);
  border-radius: calc(65 / 2 / 1440 * 100vw);
}

.layout-about-period-paragraph {
  font-size: max(22 / 1440 * 100vw, 12px);
  line-height: calc(30 / 22);
}

.layout-about-period-paragraph-showpc {
  display: inline;
}

.layout-about-period-paragraph-strong {
  font-size: calc(30 / 1440 * 100vw);
  line-height: 1;
}

.layout-about-hitbox {
  inset: calc(901 / 1440 * 100vw) auto auto 0;
}


/* -- button -- */
.layout-button {
  inset: calc(729 / 1440 * 100vw) auto auto 0;
}

.layout-button-active {
  inset: auto auto calc((140 + 32) / 1440 * 100vw) 0;
}

.layout-button-application {
  width: calc(290 / 1440 * 100vw);
  height: calc(140 / 1440 * 100vw);
  inset: 0 auto auto calc(50% + 403 / 1440 * 100vw);
  border-radius: calc(19 / 1440 * 100vw);
  transition: opacity 0.3s;
}
.layout-button-application::before {
  width: calc(270 / 1440 * 100vw);
  height: calc(120 / 1440 * 100vw);
  inset: calc(10 / 1440 * 100vw) auto auto calc(50% - 270 / 2 / 1440 * 100vw);
  background: url('../img/index_button_application.png') calc(202 / 1440 * 100vw) calc(20 / 1440 * 100vw) / calc(37 / 1440 * 100vw) no-repeat,
    linear-gradient(to bottom,
      #ff1a65,
      #ffa900
    );
  border-radius: calc(14 / 1440 * 100vw);
}
.layout-button-application:hover {
  opacity: 0.5;
}

.layout-button-application-text {
  width: calc(270 / 1440 * 100vw);
  height: calc(120 / 1440 * 100vw);
  inset: calc(10 / 1440 * 100vw) auto auto calc(50% - 270 / 2 / 1440 * 100vw);
  padding: 0 calc(47 / 1440 * 100vw) 0 0;
  font-size: calc(30 / 1440 * 100vw);
  line-height: calc(36 / 30);
  text-align: center;
}


/* -- giftdetail -- */
.layout-giftdetail {
  margin: calc(-188 / 1440 * 100vw) 0 0;
  padding: calc(167 / 1440 * 100vw) 0 calc(199 / 1440 * 100vw);
  filter: drop-shadow(0 0 calc(32 / 1440 * 100vw) rgba(0, 0, 0, 0.6));
}
.layout-giftdetail::before {
  clip-path: polygon(0 0, 100% calc(94 / 1440 * 100vw), 100% calc(100% - (96 / 1440 * 100vw)), 0 100%);
}
.layout-giftdetail::after {
  width: calc(203 / 1440 * 100vw);
  height: calc(371 / 1440 * 100vw);
  inset: calc(76 / 1440 * 100vw) auto auto calc(50% + 344 / 1440 * 100vw);
}

.layout-giftdetail-title {
  width: min(414 / 1440 * 100vw, 414px);
  height: min(54 / 1440 * 100vw, 54px);
}
.layout-giftdetail-title::before {
  clip-path: polygon(0 0, max(100% - (22 / 1440 * 100vw), 100% - 22px) 0, 100% 50%, max(100% - (22 / 1440 * 100vw), 100% - 22px) 100%, 0 100%);
}
.layout-giftdetail-title::after {
  width: min(27 / 1440 * 100vw, 27px);
  height: min(70 / 1440 * 100vw, 70px);
  inset: max(-27 / 1440 * 100vw, -27px) auto auto min(16 / 1440 * 100vw, 16px);
}

.layout-giftdetail-title-text {
  font-size: min(36 / 1440 * 100vw, 36px);
}

.layout-giftdetail-course {
  width: min(1156 / 1440 * 100vw, 1156px);
  height: min(1050 / 1440 * 100vw, 1050px);
  margin: min(71 / 1440 * 100vw, 71px) auto 0;
}

.layout-giftdetail-course-01,
.layout-giftdetail-course-02 {
  width: min(550 / 1440 * 100vw, 550px);
  position: absolute;
  margin: 0;
  padding: min(53 / 1440 * 100vw, 53px) 0 min(48 / 750 * 100vw, 48px);
  border-radius: min(29 / 1440 * 100vw, 29px);
}
.layout-giftdetail-course-01 {
  inset: 0 auto auto 0;
}
.layout-giftdetail-course-02 {
  inset: auto 0 0 auto;
}

.layout-giftdetail-course-01-title,
.layout-giftdetail-course-02-title {
  width: min(332 / 1440 * 100vw, 332px);
  height: min(46 / 1440 * 100vw, 46px);
  font-size: min(30 / 1440 * 100vw, 30px);
  border-radius: min(46 / 2 / 1440 * 100vw, 46px / 2);
}

.layout-giftdetail-course-01-slot {
  width: min(255 / 1440 * 100vw, 255px);
  inset: min(147 / 1440 * 100vw, 147px) auto auto min(252 / 1440 * 100vw, 252px);
}
.layout-giftdetail-course-02-slot {
  width: min(215 / 1440 * 100vw, 215px);
  inset: min(142 / 1440 * 100vw, 142px) auto auto min(297 / 1440 * 100vw, 297px);
}

.layout-giftdetail-course-01-image {
  width: min(321 / 1440 * 100vw, 321px);
  margin: min(138 / 1440 * 100vw, 138px) auto 0;
}
.layout-giftdetail-course-02-image {
  width: min(358 / 1440 * 100vw, 358px);
  margin: min(103 / 1440 * 100vw, 103px) auto 0;
}

.layout-giftdetail-course-01-prize {
  margin: min(36 / 1440 * 100vw, 36px) auto 0;
}

.layout-giftdetail-course-01-prize-title {
  font-size: min(30 / 1440 * 100vw, 30px);
}

.layout-giftdetail-course-01-prize-summary {
  margin: min(12 / 1440 * 100vw, 12px) auto 0;
  font-size: min(30 / 1440 * 100vw, 30px);
  line-height: calc(60 / 30);
}

.layout-giftdetail-course-01-prize-summary-strong {
  font-size: min(60 / 1440 * 100vw, 60px);
}

.layout-giftdetail-course-02-prize {
  margin: min(20 / 1440 * 100vw, 20px) auto 0;
}

.layout-giftdetail-course-02-prize-limited {
  width: min(367 / 1440 * 100vw, 367px);
  height: min(37 / 1440 * 100vw, 37px);
  font-size: min(18 / 1440 * 100vw, 18px);
  line-height: 1;
  border: 2px solid #ffa826;
  border-radius: min(37 / 2 / 1440 * 100vw, 37px / 2);
}

.layout-giftdetail-course-02-prize-summary {
  margin: min(12 / 1440 * 100vw, 12px) 0 auto 0;
  font-size: min(24 / 1440 * 100vw, 24px);
}

.layout-giftdetail-course-02-prize-title {
  margin: min(12 / 1440 * 100vw, 12px) 0 auto 0;
  font-size: min(48 / 1440 * 100vw, 48px);
  line-height: calc(60 / 48);
}

.layout-giftdetail-note {
  width: min(1156 / 1440 * 100vw, 1156px);
}

.layout-giftdetail-note-item {
  font-size: min(16 / 1440 * 100vw, 16px);
  line-height: calc(28 / 16);
  text-align: right;
}


/* -- instruction -- */
.layout-instruction {
  margin: calc(-96 / 1440 * 100vw) 0 0;
  padding: calc(171 / 1440 * 100vw) 0 min(56 / 1440 * 100vw, 56px);
  background: url('../img/bg-index_instruction_pc.png') center top / contain repeat-y;
}

.layout-instruction-title {
  width: min(287 / 1440 * 100vw, 287px);
  height: min(54 / 1440 * 100vw, 54px);
}
.layout-instruction-title::before {
  clip-path: polygon(0 0, max(100% - 19 / 1440 * 100vw, 100% - 19px) 0, 100% 50%, max(100% - 19 / 1440 * 100vw, 100% - 19px) 100%, 0 100%);
}
.layout-instruction-title::after {
  width: min(27 / 1440 * 100vw, 27px);
  height: min(70 / 1440 * 100vw, 70px);
  inset: max(-27 / 1440 * 100vw, -27px) auto auto min(16 / 1440 * 100vw, 16px);
}

.layout-instruction-title-text {
  font-size: min(36 / 1440 * 100vw, 36px);
}

.layout-instruction-summary {
  width: min(1156 / 1440 * 100vw, 1156px);
  margin: min(50 / 1440 * 100vw, 50px) auto 0;
  font-size: min(20 / 1440 * 100vw, 20px);
  line-height: 1;
}

.layout-instruction-step {
  width: min(1140 / 1440 * 100vw, 1140px);
  height: min(386 / 1440 * 100vw, 386px);
  margin: min(52 / 1440 * 100vw, 52px) auto 0;
}

.layout-instruction-step-01,
.layout-instruction-step-02,
.layout-instruction-step-03,
.layout-instruction-step-04 {
  position: absolute;
  padding: min(16 / 1440 * 100vw, 16px) 0 0;
}
.layout-instruction-step-01 {
  width: min(366 / 1440 * 100vw, 366px);
  height: 100%;
  inset: 0 auto auto 0;
  border-radius: min(31 / 1440 * 100vw, 31px) 0 0 min(31 / 1440 * 100vw, 31px);
  clip-path: polygon(0 0, max(100% - 86 / 1440 * 100vw, 100% - 86px) 0, 100% 50%, max(100% - 86 / 1440 * 100vw, 100% - 86px) 100%, 0 100%);
}
.layout-instruction-step-02 {
  width: min(356 / 1440 * 100vw, 356px);
  height: 100%;
  inset: 0 auto auto min(288 / 1440 * 100vw, 288px);
  margin: 0;
  clip-path: polygon(0 0, max(100% - 86 / 1440 * 100vw, 100% - 86px) 0, 100% 50%, max(100% - 86 / 1440 * 100vw, 100% - 86px) 100%, 0 100%, min(86 / 1440 * 100vw, 86px) 50%);
}
.layout-instruction-step-03 {
  width: min(356 / 1440 * 100vw, 356px);
  height: 100%;
  inset: 0 auto auto min(565 / 1440 * 100vw, 565px);
  margin: 0;
  clip-path: polygon(0 0, max(100% - 86 / 1440 * 100vw, 100% - 86px) 0, 100% 50%, max(100% - 86 / 1440 * 100vw, 100% - 86px) 100%, 0 100%, min(86 / 1440 * 100vw, 86px) 50%);
}
.layout-instruction-step-04 {
  width: min(298 / 1440 * 100vw, 298px);
  height: 100%;
  margin: 0;
  inset: 0 0 auto auto;
  border-radius: 0 min(31 / 1440 * 100vw, 31px) min(31 / 1440 * 100vw, 31px) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, min(86 / 1440 * 100vw, 86px) 50%);
}

.layout-instruction-step-01-title,
.layout-instruction-step-02-title,
.layout-instruction-step-03-title,
.layout-instruction-step-04-title {
  font-size: min(24 / 1440 * 100vw, 24px);
  line-height: calc(44 / 24);
}
.layout-instruction-step-01-title,
.layout-instruction-step-02-title {
  inset: min(16 / 1440 * 100vw, 16px) auto auto min(109 / 1440 * 100vw, 109px);
}
.layout-instruction-step-03-title {
  inset: min(16 / 1440 * 100vw, 16px) auto auto min(134 / 1440 * 100vw, 134px);
}
.layout-instruction-step-04-title {
  inset: min(16 / 1440 * 100vw, 16px) auto auto min(146 / 1440 * 100vw, 146px);
}

.layout-instruction-step-01-title-strong,
.layout-instruction-step-02-title-strong,
.layout-instruction-step-03-title-strong,
.layout-instruction-step-04-title-strong {
  font-size: min(44 / 1440 * 100vw, 44px);
}

.layout-instruction-step-01-icon {
  width: min(239 / 1440 * 100vw, 239px);
  inset: min(123 / 1440 * 100vw, 123px) auto auto min(30 / 1440 * 100vw, 30px);
}
.layout-instruction-step-02-icon {
  width: min(191 / 1440 * 100vw, 191px);
  inset: min(114 / 1440 * 100vw, 114px) auto auto min(108 / 1440 * 100vw, 108px);
}
.layout-instruction-step-03-icon {
  width: min(127 / 1440 * 100vw, 127px);
  inset: min(129 / 1440 * 100vw, 129px) auto auto min(132 / 1440 * 100vw, 132px);
}
.layout-instruction-step-04-icon {
  width: min(121 / 1440 * 100vw, 121px);
  inset: min(123 / 1440 * 100vw, 123px) auto auto min(132 / 1440 * 100vw, 132px);
}

.layout-instruction-step-01-detail,
.layout-instruction-step-02-detail,
.layout-instruction-step-04-detail {
  width: fit-content;
  font-weight: 500;
  font-size: clamp(12px, 16 / 1440 * 100vw, 16px);
  line-height: calc(24 / 16);
}
.layout-instruction-step-01-detail {
  inset: min(301 / 1440 * 100vw, 301px) auto auto min(68 / 1440 * 100vw, 68px);
}
.layout-instruction-step-02-detail {
  inset: min(313 / 1440 * 100vw, 313px) auto auto min(97 / 1440 * 100vw, 97px);
}
.layout-instruction-step-04-detail {
  inset: min(313 / 1440 * 100vw, 313px) auto auto min(150 / 1440 * 100vw, 150px);
}

.layout-instruction-step-03-detail {
  width: min(220 / 1440 * 100vw, 220px);
  inset: min(268 / 1440 * 100vw, 268px) auto auto min(64 / 1440 * 100vw, 64px);
}

.layout-instruction-step-03-detail-paragraph {
  font-size: min(16 / 1440 * 100vw, 16px);
  line-height: calc(24 / 16);
  text-align: center
}

.layout-instruction-step-03-detail-step {
  margin: 0;
}

.layout-instruction-step-03-detail-step-01,
.layout-instruction-step-03-detail-step-02,
.layout-instruction-step-03-detail-step-03 {
  margin: 0;
  font-size: min(16 / 1440 * 100vw, 16px);
  line-height: calc(24 / 16);
  text-align: center
}

.layout-instruction-eligibleproduct {
  width: min(1140 / 1440 * 100vw, 1140px);
  margin: min(36 / 1440 * 100vw, 36px) auto 0;
  padding: min(42 / 1440 * 100vw, 42px) 0 min(47 / 1440 * 100vw, 47px);
  border-radius: min(31 / 1440 * 100vw, 31px);
}

.layout-instruction-eligibleproduct-title {
  font-size: min(30 / 1440 * 100vw, 30px);
}

.layout-instruction-eligibleproduct-list {
  width: min(820 / 1440 * 100vw, 820px);
  margin: min(35 / 1440 * 100vw, 35px) auto 0;
}

.layout-instruction-eligibleproduct-list-item {
  width: min(410 / 1440 * 100vw, 410px);
}

.layout-instruction-eligibleproduct-list-item-image-01 {
  width: min(90 / 1440 * 100vw, 90px);
  inset: 0 auto auto max(50% - 90 / 2 / 1440 * 100vw, 50% - 90px);
}

.layout-instruction-eligibleproduct-list-item-image-02 {
  width: min(93 / 1440 * 100vw, 93px);
  inset: 0 auto auto max(50% - 93 / 2 / 1440 * 100vw, 50% - 93px);
}

.layout-instruction-eligibleproduct-list-item-title {
  margin: min(339 / 1440 * 100vw, 339px) 0 0;
}

.layout-instruction-eligibleproduct-list-item-title-pikon {
  font-size: clamp(12px, 16 / 1440 * 100vw, 16px);
  line-height: 1;
}

.layout-instruction-eligibleproduct-list-item-title-flavor {
  margin: min(7 / 1440 * 100vw, 7px) 0 0;
  font-size: min(24 / 1440 * 100vw, 24px);
}

.layout-instruction-eligibleproduct-detail-01,
.layout-instruction-eligibleproduct-detail-02,
.layout-instruction-eligibleproduct-detail-03 {
  width: min(1140 / 1440 * 100vw, 1140px);
  height: min(96 / 1440 * 100vw, 96px);
  position: relative;
  border-radius: min(96 / 2 / 1440 * 100vw, 96px / 2);
}
.layout-instruction-eligibleproduct-detail-01 {
  margin: min(46 / 1440 * 100vw, 46px) auto 0;
  padding: min(6 / 1440 * 100vw, 6px) 0 0;
}
.layout-instruction-eligibleproduct-detail-02,
.layout-instruction-eligibleproduct-detail-03 {
  margin: min(36 / 1440 * 100vw, 36px) auto 0;
  padding: min(6 / 1440 * 100vw, 6px) 0 0;
}
.layout-instruction-eligibleproduct-detail-01-title,
.layout-instruction-eligibleproduct-detail-02-title,
.layout-instruction-eligibleproduct-detail-03-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(378 / 1440 * 100vw, 378px);
  height: min(84 / 1440 * 100vw, 84px);
  margin: 0 0 0 min(6 / 1440 * 100vw, 6px);
  padding: 0;
  font-size: min(24 / 1440 * 100vw, 24px);
  border-radius: min(84 / 2 / 1440 * 100vw, 84px / 2) 0 0 min(84 / 2 / 1440 * 100vw, 84px / 2);
}

.layout-instruction-eligibleproduct-detail-01-paragraph,
.layout-instruction-eligibleproduct-detail-02-paragraph,
.layout-instruction-eligibleproduct-detail-03-paragraph {
  width: min(750 / 1440 * 100vw, 750px);
  position: absolute;
  inset: min(34 / 1440 * 100vw, 34px) auto auto min(390 / 1440 * 100vw, 390px);
  font-size: min(24 / 1440 * 100vw, 24px);
  line-height: 1;
  text-align: center;
}
.layout-instruction-eligibleproduct-detail-01-paragraph {
  margin: 0;
}
.layout-instruction-eligibleproduct-detail-02-paragraph,
.layout-instruction-eligibleproduct-detail-03-paragraph {
  margin: 0;
}

.layout-instruction-eligibleproduct-note {
  width: min(1100 / 1440 * 100vw, 1100px);
  margin: min(21 / 1440 * 100vw, 21px) auto 0;
}
.layout-instruction-eligibleproduct-note-item {
  font-size: clamp(12px, 16 / 1440 * 100vw, 16px);
  line-height: calc(30 / 16);
  -webkit-text-stroke: min(8 / 1440 * 100vw, 8px) #44bc60;
  paint-order: stroke;
}


/* -- keypoint -- */
.layout-keypoint {
  padding: min(56 / 1440 * 100vw, 56px) 0;
}

.layout-keypoint-title {
  width: min(380 / 1440 * 100vw, 380px);
  height: min(60 / 1440 * 100vw, 60px);
}
.layout-keypoint-title::before {
  clip-path: polygon(0 0, max(100% - (22 / 1440 * 100vw), 100% - 22px) 0, 100% 50%, max(100% - (22 / 1440 * 100vw), 100% - 22px) 100%, 0 100%);
}
.layout-keypoint-title::after {
  width: min(27 / 1440 * 100vw, 27px);
  height: min(70 / 1440 * 100vw, 70px);
  inset: max(-27 / 1440 * 100vw, -27px) auto auto min(12 / 1440 * 100vw, 12px);
}

.layout-keypoint-title-text {
  font-size: min(36 / 1440 * 100vw, 36px);
}

.layout-keypoint-summary {
  width: min(1140 / 1440 * 100vw, 1140px);
  margin: min(60 / 1440 * 100vw, 60px) auto 0;
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
  line-height: 1;
}

.layout-keypoint-detail {
  width: min(1140 / 1440 * 100vw, 1140px);
  margin: min(66 / 1440 * 100vw, 66px) auto 0;
}

.layout-keypoint-detail-01 {
  width: min(1140 / 1440 * 100vw, 1140px);
  margin: 0;
  padding: min(52 / 1440 * 100vw, 52px) 0;
  border-radius: min(31 / 1440 * 100vw, 31px);
}

.layout-keypoint-detail-01-title {
  font-size: min(30 / 1440 * 100vw, 30px);
}

.layout-keypoint-detail-01-summary {
  margin: min(45 / 1440 * 100vw, 45px) 0 0;
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
  line-height: 1;
}

.layout-keypoint-detail-01-course {
  display: flex;
  gap: min(22 / 750 * 100vw, 22px);
  width: min(1060 / 1440 * 100vw, 1060px);
  margin: min(55 / 1440 * 100vw, 55px) auto 0;
}

.layout-keypoint-detail-01-course-01 {
  width: min(519 / 1440 * 100vw, 519px);
  padding: min(28 / 750 * 100vw, 28px) 0;
  border: 2px solid #ff7a00;
  border-radius: min(20 / 1440 * 100vw, 20px);
}

.layout-keypoint-detail-01-course-01-title,
.layout-keypoint-detail-01-course-02-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(308 / 1440 * 100vw, 308px);
  height: min(62 / 1440 * 100vw, 62px);
  font-size: min(30 / 1440 * 100vw, 30px);
  border-radius: min(62 / 2 / 1440 * 100vw, 62px / 2);
}

.layout-keypoint-detail-01-course-01-detail,
.layout-keypoint-detail-01-course-02-detail {
  margin: min(26 / 1440 * 100vw, 26px) auto 0;
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
  line-height: calc(40 / 20);
}

.layout-keypoint-detail-01-course-01-image {
  width: min(420 / 1440 * 100vw, 420px);
  margin: min(78 / 1440 * 100vw, 78px) auto 0;
}

.layout-keypoint-detail-01-course-02 {
  width: min(519 / 1440 * 100vw, 519px);
  margin: 0;
  padding: min(28 / 750 * 100vw, 28px) 0;
  border: 2px solid #ff7a00;
  border-radius: min(20 / 1440 * 100vw, 20px);
}

.layout-keypoint-detail-01-course-02-icon {
  width: min(466 / 1440 * 100vw, 466px);
  margin: min(28 / 1440 * 100vw, 28px) auto 0;
}

.layout-keypoint-detail-01-course-02-note {
  margin: min(28 / 1440 * 100vw, 28px) auto 0;
  font-size: clamp(12px, 16 / 1440 * 100vw, 16px);
  line-height: 1;
}

.layout-keypoint-detail-01-note {
  margin: min(32 / 1440 * 100vw, 32px) 0 0;
}
.layout-keypoint-detail-01-note-item {
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
  line-height: calc(40 / 20);
}

.layout-keypoint-detail-02 {
  width: min(1140 / 1440 * 100vw, 1140px);
  margin: min(56 / 1440 * 100vw, 56px) auto 0;
  padding: min(52 / 1440 * 100vw, 52px) 0;
  border-radius: min(31 / 1440 * 100vw, 31px);
}

.layout-keypoint-detail-02-title {
  font-size: min(30 / 1440 * 100vw, 30px);
}

.layout-keypoint-detail-02-summary {
  margin: min(45 / 1440 * 100vw, 45px) 0 0;
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
  line-height: calc(40 / 20);
}

.layout-keypoint-detail-02-course {
  display: flex;
  flex-wrap: wrap;
  gap: min(29 / 1440 * 100vw, 29px) min(27 / 1440 * 100vw, 27px);
  width: min(1070 / 1440 * 100vw, 1070px);
  margin: min(28 / 1440 * 100vw, 28px) auto 0;
}

.layout-keypoint-detail-02-course-01 {
  display: grid;
  grid-template: min(17 / 1440 * 100vw, 17px) min(14 / 1440 * 100vw, 14px) min(90 / 1440 * 100vw, 90px) min(22 / 1440 * 100vw, 22px) min(117 / 1440 * 100vw, 117px) / min(58 / 1440 * 100vw, 58px) min(221 / 1440 * 100vw, 221px) min(6 / 1440 * 100vw, 6px) min(150 / 1440 * 100vw, 150px) min(625 / 1440 * 100vw, 625px);
  margin: 0;
  border: 2px solid #ff3f57;
  border-radius: min(20 / 1440 * 100vw, 20px);
}

.layout-keypoint-detail-02-course-01-title {
  grid-area: 5 / 3 / 6 / 5;
  font-size: min(26 / 1440 * 100vw, 26px);
  text-align: left;
}

.layout-keypoint-detail-02-course-01-image {
  grid-area: 2 / 2 / 5 / 3;
  width: min(175 / 1440 * 100vw, 175px);
}

.layout-keypoint-detail-02-course-01-detail {
  grid-area: 3 / 4 / 5 / 6;
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
  line-height: calc(36 / 20);
}

.layout-keypoint-detail-02-course-01-required {
  grid-area: 4 / 5 / 6 / 6;
  grid-template: min(36 / 1440 * 100vw, 36px) min(36 / 1440 * 100vw, 36px) / min(170 / 1440 * 100vw, 170px) min(170 / 1440 * 100vw, 170px) min(170 / 1440 * 100vw, 170px);
}

.layout-keypoint-detail-02-course-01-required-item {
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
}
.layout-keypoint-detail-02-course-01-required-item::before {
  content: '・';
}

.layout-keypoint-detail-02-course-02 {
  grid-template: min(30 / 1440 * 100vw, 30px) min(22 / 1440 * 100vw, 22px) min(66 / 1440 * 100vw, 66px) min(150 / 1440 * 100vw, 150px) / min(42 / 1440 * 100vw, 42px) min(150 / 1440 * 100vw, 150px) min(5 / 1440 * 100vw, 5px) min(310 / 1440 * 100vw, 310px);
  width: min(520 / 1440 * 100vw, 520px);
  margin: 0;
  border: 2px solid #ff3f57;
  border-radius: min(20 / 1440 * 100vw, 20px);
}

.layout-keypoint-detail-02-course-02-title {
  grid-area: 2 / 3 / 3 / 5;
  font-size: min(26 / 1440 * 100vw, 26px);
  text-align: left;
}

.layout-keypoint-detail-02-course-02-image {
  grid-area: 2 / 2 / 4 / 3;
  width: min(113 / 1440 * 100vw, 113px);
}
.layout-keypoint-detail-02-course-02-detail {
  grid-area: 4 / 4 / 5 / 5;
  margin: 0;
  font-weight: 400;
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
  line-height: calc(30 / 20);
  color: #000000;
}

.layout-keypoint-detail-02-course-03 {
  width: min(520 / 1440 * 100vw, 520px);
  margin: 0;
  padding: min(30 / 1440 * 100vw, 30px) 0;
  border: 2px solid #ff3f57;
  border-radius: min(20 / 1440 * 100vw, 20px);
}

.layout-keypoint-detail-02-course-03-title {
  font-size: min(26 / 1440 * 100vw, 26px);
}

.layout-keypoint-detail-02-course-03-detail {
  width: min(480 / 1440 * 100vw, 480px);
  margin: min(13 / 1440 * 100vw, 13px) auto 0;
}

.layout-keypoint-detail-02-course-03-detail-01,
.layout-keypoint-detail-02-course-03-detail-02,
.layout-keypoint-detail-02-course-03-detail-03,
.layout-keypoint-detail-02-course-03-detail-04 {
  width: min(120 / 1440 * 100vw, 120px);
  padding: min(130 / 1440 * 100vw, 130px) 0 0;
  font-size: clamp(12px, 16 / 1440 * 100vw, 16px);
  line-height: calc(24 / 16);
}

.layout-keypoint-detail-02-course-03-detail-01 {
  background: url('../img/index_keypoint_detail_02_course_03_detail_01.png') center top / min(86 / 1440 * 100vw, 86px) no-repeat;
}

.layout-keypoint-detail-02-course-03-detail-02 {
  background: url('../img/index_keypoint_detail_02_course_03_detail_02.png') center top / min(79 / 1440 * 100vw, 79px) no-repeat;
}

.layout-keypoint-detail-02-course-03-detail-03 {
  background: url('../img/index_keypoint_detail_02_course_03_detail_03.png') center top / min(74 / 1440 * 100vw, 74px) no-repeat;
}

.layout-keypoint-detail-02-course-03-detail-04 {
  background: url('../img/index_keypoint_detail_02_course_03_detail_04.png') center top / min(80 / 1440 * 100vw, 80px) no-repeat;
}

.layout-keypoint-detail-02-note {
  list-style: none;
  width: min(1140 / 1440 * 100vw, 1140px);
  margin: min(19 / 1440 * 100vw, 19px) auto 0;
  padding: 0;
}

.layout-keypoint-detail-02-note-item {
  font-size: clamp(12px, 16 / 1440 * 100vw, 16px);
  line-height: calc(36 / 16);
}


/* -- guideline -- */
.layout-guideline {
  padding: min(56 / 1440 * 100vw, 56px) 0;
}

.layout-guideline-frame {
  width: min(1140 / 1440 * 100vw, 1140px);
  padding: min(56 / 1440 * 100vw, 56px) 0 min(106 / 1440 * 100vw, 106px);
  border-radius: min(31 / 1440 * 100vw, 31px);
}
.layout-guideline-frame::before {
  width: min(1030 / 1440 * 100vw, 1030px);
  height: min(400 / 1440 * 100vw, 400px);
  inset: auto auto min(55 / 1440 * 100vw, 55px) max(50% - 1030 / 2 / 1440 * 100vw, 50% - 1030px / 2);
  border-radius: min(23 / 1440 * 100vw, 23px);
}

.layout-guideline-frame-title {
  width: min(237 / 1440 * 100vw, 237px);
  height: min(53 / 1440 * 100vw, 53px);
}
.layout-guideline-frame-title::before {
  clip-path: polygon(0 0, max(100% - (22 / 1440 * 100vw), 100% - 22px) 0, 100% 50%, max(100% - (22 / 1440 * 100vw), 100% - 22px) 100%, 0 100%);
}
.layout-guideline-frame-title::after {
  width: min(27 / 1440 * 100vw, 27px);
  height: min(70 / 1440 * 100vw, 70px);
  inset: max(-27 / 1440 * 100vw, -27px) auto auto min(12 / 1440 * 100vw, 12px);
}

.layout-guideline-frame-title-text {
  font-size: min(36 / 1440 * 100vw, 36px);
}

.layout-guideline-frame-frame {
  width: min(940 / 1440 * 100vw, 940px);
  height: min(310 / 1440 * 100vw, 310px);
  margin: min(103 / 1440 * 100vw, 103px) auto 0;
}

.layout-guideline-frame-frame-paragraph {
  font-size: clamp(12px, 18 / 1440 * 100vw, 18px);
  line-height: calc(33 / 18);
}

.layout-guideline-frame-frame-paragraph-ancher {
  transition: opacity 0.3s;
}
.layout-guideline-frame-frame-paragraph-ancher:hover {
  opacity: 0.5;
}


/* -- faq -- */
.layout-faq {
  position: relative;
  padding: min(56 / 1440 * 100vw, 56px) 0;
  background: url('../img/bg-index_faq_pc.png') center top / cover no-repeat;
}

.layout-faq-frame-title {
  width: min(574 / 1440 * 100vw, 574px);
  height: min(44 / 1440 * 100vw, 44px);
  position: absolute;
  inset: min(115 / 1440 * 100vw, 100px) auto auto max(50% - 574 / 2 / 1440 * 100vw, 50% - 574px / 2);
  margin: 0;
}
.layout-faq-frame-title::before {
  clip-path: polygon(0 0, max(100% - (22 / 1440 * 100vw), 100% - 22px) 0, 100% 50%, max(100% - (22 / 1440 * 100vw), 100% - 22px) 100%, 0 100%);
  background: #00be55;
}
.layout-faq-frame-title::after {
  width: min(33 / 1440 * 100vw, 33px);
  height: min(63 / 1440 * 100vw, 63px);
  inset: max(-23 / 1440 * 100vw, -23px) auto auto min(6 / 1440 * 100vw, 6px);
  background: url('../img/index_faq_frame_title_pc.png') center / contain no-repeat;
}

.layout-faq-frame-title-text {
  font-size: min(30 / 1440 * 100vw, 30px);
  color: #ffffff;
}

.layout-faq-frame-list {
  list-style: none;
  width: min(1140 / 1440 * 100vw, 1140px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: min(147 / 1440 * 100vw, 147px) 0  min(73 / 1440 * 100vw, 73px);
  background: #ffffff;
  border-radius: min(31 / 1440 * 100vw, 31px);
}

.layout-faq-frame-list-question-01,
.layout-faq-frame-list-question-02,
.layout-faq-frame-list-question-03,
.layout-faq-frame-list-question-04 {
  width: min(910 / 1440 * 100vw, 910px);
  margin: min(34 / 1440 * 100vw, 34px) auto 0;
  padding: 0 0 0 min(40 / 1440 * 100vw, 40px);
  font-size: clamp(12px, 22 / 1440 * 100vw, 22px);
  line-height: calc(36 / 22);
}
.layout-faq-frame-list-question-01::before,
.layout-faq-frame-list-question-02::before,
.layout-faq-frame-list-question-03::before,
.layout-faq-frame-list-question-04::before {
  content: 'Q';
  position: absolute;
  inset: 0 auto auto 0;
  font-weight: 900;
}
.layout-faq-frame-list-question-01 {
  margin: 0 auto;
}

.layout-faq-frame-list-answer {
  width: min(910 / 1440 * 100vw, 910px);
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding: 0 0 0 min(40 / 1440 * 100vw, 40px);
  font-weight: 400;
  font-size: clamp(12px, 16 / 1440 * 100vw, 16px);
  line-height: calc(28 / 16);
  color: #00c849;
}
.layout-faq-frame-list-answer::before {
  content: 'A';
  position: absolute;
  inset: 0 auto auto 0;
  font-weight: 900;
  font-size: min(22 / 1440 * 100vw, 22px);
  line-height: calc(28 / 22);
}


/* -- inquiry -- */
.layout-inquiry {
  padding: min(56 / 1440 * 100vw, 56px) 0;

}

.layout-inquiry-title {
  font-size: min(26 / 1440 * 100vw, 26px);
  line-height: 1;
}

.layout-inquiry-paragraph {
  margin: min(30 / 1440 * 100vw, 30px) 0 0;
  font-size: clamp(12px, 20 / 1440 * 100vw, 20px);
  line-height: calc(30 / 20);
}

.layout-inquiry-paragraph-anchor {
  transition: opacity 0.3s;
}
.layout-inquiry-paragraph-anchor:hover {
  opacity: 0.5;
}

.layout-inquiry-note {
  margin: min(27 / 1440 * 100vw, 27px) auto 0;
}

.layout-inquiry-note-item {
  font-size: clamp(12px, 16 / 1440 * 100vw, 16px);
  line-height: calc(30 / 16);
}


/* -- footer -- */
.l-footer .l-footer_bottom {
  padding-bottom: min(40 / 1440 * 100vw, 40px);
}


}/* -- /@media (min-width: 768px) -- */


/* -- min-width: 1280px -- */
@media (min-width: 1280px) {

  .layout {
    padding: 116px 0 0;
  }


/* -- footer -- */
  .l-footer {
    margin-top: 0px;
    padding-top: 36px;
  }

  .l-footer .l-footer_bottom {
    padding-bottom: min(160 / 1440 * 100vw, 160px);
  }

}/* -- /@media (min-width: 1280px) -- */