/* ======================
   Reset
   ====================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ======================
   Base
   ====================== */
*, *::before, *::after {
  box-sizing: border-box;
  word-wrap: break-word;
}

body {
  line-height: 1.5;
  font-family: Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, Meiryo, sans-serif;
  color: #3d3f42;
  font-size: 16px;
  background-image: url(https://static.alice.style/img/web/bg.png);
  background-size: 100% auto;
  background-position: center 75px;
  background-repeat: repeat-y;
}

p {
  letter-spacing: .1em;
  line-height: 1.8;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.5s ease-in-out;
}
a:link, a:visited, a:hover, a:active { color: inherit; }
a:hover { opacity: .8; }

section { width: 100%; }

button:focus { outline: 0; }

/* ======================
   表示切り替え（sp / pc）
   ====================== */
.sp-area { display: none; }
.pc-area { display: block; }

@media screen and (max-width: 768px) {
  .sp-area { display: block !important; }
  .pc-area { display: none !important; }
}


/* ======================
   Typography
   ====================== */
p.text-title {
  letter-spacing: .1em;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 30px;
}
.text-sub{font-size: 1.3rem;line-height: 1.3;}
.text-red   { color: #D62128 !important; font-weight: normal !important; font-size: inherit !important; margin-right: 0 !important; }
.text-pink  { color: #E85298; }
.text-border { text-decoration: underline; }
.text-bold,.t-bold  { font-weight: bold; }


.t-pink     { color: #D9689B !important; letter-spacing: normal; }


/*font*/

.t-avenir{
	font-family: 'Avenir Next',sans-serif;
}


.t-body2{
	font-size: 1.25rem;/*20px*/
}


.t-body5{
	font-size: 2rem;
}
.t-body6{
	font-size: 4rem;
}

.t-semibold{
	font-weight: 600;
}


sup{
	font-size: 0.6em;
    vertical-align: top;
}


.t-pink{
	color: #D9689B!important;
	letter-spacing: normal;
}


.t-backgray{
    background: #F3F3F3;
}




.t-marker-pink {
  display: inline;
  position: relative;
  padding: 0 10px;
  z-index: 0;
  margin-top: 10px;
  background: linear-gradient(transparent 60%, #FFF6FA 60%);
    padding: 0 2px;
}

/*boreder設定*/

.b-dot-pink{
	border: 4px dotted #D9689B;
}
.border-radius-8{
	border-radius: 8px;
}


/* ======================
   Backgrounds
   ====================== */
.t-backwhite  { background: #fff; }

.t-backgray   { background: #F3F3F3; }

.t-backpink   { background: #FFF6FA; }
/* ======================
   Annotation
   ====================== */
.annotation { font-size: 12px; font-weight: normal; }

/* ======================
   Width
   ====================== */

.w-1  { width: 1%; }
.w-20  { width: 20%; }
.w-23  { width: 23%; }

.w-25  { width: 25%; }

.w-30  { width: 30%; }

.w-40  { width: 40%; }
.w-45  { width: 45%; }
.w-49  { width: 49%; }
.w-58  { width: 58%; }
.w-60  { width: 60%; }

.w-70  { width: 70%; }


.w-90  { width: 90%; }


/* ======================
   Display
   ====================== */

.d-flex         { display: flex; }

.hidden {
  position: absolute;
  opacity: 0;
}

/* ======================
   Flex
   ====================== */
.flex    { display: flex; }
.wrap    { flex-wrap: wrap; }
.between { justify-content: space-between; }
.around  { justify-content: space-around; }

.center  { justify-content: center; }


.align-left   { text-align: left; }


/* ======================
   Margin / Padding
   ====================== */
.m-8   { margin: 8px; }
.m-30   { margin: 30px; }
.m-auto { margin: auto; }


.mb-16  { margin-bottom: 16px; }
.mb-24  { margin-bottom: 24px; }


.mb-1p  { margin-bottom: 1%; }

.mt-8   { margin-top: 8px; }
.mt-16   { margin-top: 16px; }
.ml-2p  { margin-bottom: 2%; }

.p-20{
	padding: 20px;
}
/* ======================
   Section Title
   ====================== */
.section-title {
  font-size: 1.714em;
  font-weight: bold;
  position: relative;
  text-align: center;
}
.section-title::after {
  content: '';
  width: 54px;
  height: 3px;
  display: inline-block;
  background-color: #E85298;
  position: absolute;
  bottom: -15px;
  left: calc(50% - 27px);
}

/* ======================
   Header
   ====================== */
.header { text-align: center; }
.header h1 {
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 15px 0;
}
.header h1 img.logo { height: 50px; width: auto;max-width: 170px;}
.header h1 img.batsu { width: 30px; height: 30px; padding: 0; margin: 0 40px; }

/* ======================
   Top Container
   ====================== */
section.top_container {
  position: relative;
  width: 100%;
  max-width: none;
	padding-top: 0;
	padding-bottom: 0;
}
section.top_container .tag {
  position: absolute;
  bottom: 10%;
  right: 10%;
}
section.top_container .text {
  position: absolute;
  width: 50%;
  bottom: 70px;
  left: 15%;
}
section.top_container .text .main {
  color: #E85298;
  font-weight: bold;
  font-size: 4vw;
  line-height: 1.7;
}
section.top_container .text .main .band {
  background: #fff;
  font-weight: bold;
}
section.top_container .text .sub { font-size: 1.2rem; }

/* ======================
   Induction Container
   ====================== */
.induction-container {
  text-align: center;
  margin: auto 0;
  padding: 30px 0;
}
.induction-container p { color: #fff; }
.induction-container p.sub { color: inherit; margin-top: 10px; }
.induction-container p.title { color: #3d3f42; font-weight: bold; }
.induction-container p.title span { color: #3d3f42; }
.induction-container p.title span.bold { font-size: 1.5em; font-weight: bold; }
.induction-container p.annotation {
  font-size: 12px;
  color: inherit;
  text-align: left;
  width: 90%;
  max-width: 900px;
  margin: auto;
}

/* ======================
   Buttons
   ====================== */
.tryBtn {
  position: relative;
  width: 90%;
  margin: 0px auto 20px;
  max-width: 350px;

}
.tryBtn .img_06 {
  position: absolute;
  width: 20%;
  left: -25px;
  top: -45px;
  z-index: 1;
}
.tryBtn a {
  display: block;
  padding: 20px 15px;
  background: #D62128;
  color: #FFF;
  font-weight: bold;
  border-radius: 50px;
  font-size: 1.2em;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 10%);
}


/* ======================
   Features / Howto / style Container
   ====================== */
.howto-container{
  width: 100%;
  text-align: center;
  padding: 40px 0;
  background-color: #FFF6FA;
}
.style-container {
  width: 100%;
  text-align: center;
  padding: 40px 0;
  background-color: #FEFAEF;
}
.style-container .section-title_img{
	max-width: 220px;
}

.style-container .text { padding-top: 20px; padding-bottom: 40px; }
.style-container .style-container__img {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 24px;
	max-width: 1200px;
}
.style-container .style-container__img img { width: 25%; height: auto; }

@media screen and (max-width: 768px) {
	.style-container .style-container__img img {
		width: 90%;
		margin: auto;
		height: auto;
	 }

}
  .align-center { text-align: center; }
/* ======================
   Coupon Container
   ====================== */
.coupon-container {
  width: 100%;
  text-align: center;
  margin: auto;
  padding: 30px 0;
  background-image: url("https://peaceteclab.co.jp/wp-content/themes/peaceteclab/img/landing/collabo/background_yellow_line.png");
}

.coupon-container .img_01 { width: 50%; min-width: 400px; }
.coupon-container .img_02 { width: 25%; display: block; margin: auto; }
.coupon-container .coupon-button {
  width: 40%;
  margin: 40px auto 30px;
  font-size: 32px;
  color: #E85298;
  font-weight: bold;
  padding: 16px 32px;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 10%);
  position: relative;
  background: #fff;
	max-width: 450px;
}
.coupon-container .coupon-button p { font-weight: bold; margin-bottom: 5px; }
.coupon-container .coupon-button .img_03 {
  position: absolute;
  top: -70px;
  width: 35%;
  left: -20%;
	    max-width: 180px;
}
.coupon-container .coupon-button button {
  border: none;
  background-color: #FADCE9;
  color: #E85298;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 10%);
  padding: 13px 40px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  width: 80%;
	margin: auto;
  justify-content: center;
  transition: opacity .3s;
}
.coupon-container .coupon-button button img { width: 1.2rem; height: auto; }
.coupon-container .coupon-button button:hover { opacity: 0.7; }
.coupon-container .dot-line {
  width: 50%;
  margin: auto;
  border-bottom: 4px dotted #3E3A39;
}
.coupon-container .coupon-container__how {
	display: flex;
  width: 80%;
  margin: 0 auto 0;
  align-items: flex-start;
  text-align: center;
	max-width: 800px;
}
.coupon-container .coupon-container__how .img_04 { height: auto; margin-right: 5%; }
.coupon-container__how--text {
	margin-top: 20px;
    line-height: 1.8;
    letter-spacing: .08em;
    text-align: left;
}
.coupon-container__how--text p { line-height: 2; }
.coupon-container__how--text .img_05 { width: 30%; margin-right: 45%; }
.coupon-container__how--text .bubble {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fff;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 10%);
}
.coupon-container__how--text .bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}
.coupon-container__how--text .bubble p { margin: 0; padding: 0; }
.coupon-container__title .bubble{
	position: relative;
    display: inline-block;
    margin: 1.5em 0;
    padding: 7px 40px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #fff;
    box-shadow: 0px 0px 8px rgb(0 0 0 / 10%);
}
.coupon-container__title .bubble::before{
	content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #fff;
}
@media screen and (max-width: 768px) {
.coupon-container .coupon-button button{
  width: 100%;
}
}
/* ======================
   Product Container
   ====================== */
section.product-container {
  text-align: center;
  width: 90%;
  margin: 30px auto 0;
	max-width: 1000px;
}
section.product-container .more_banner { max-width: 400px; }
section.product-container .section-title_img { width: 20%; margin: 50px auto 30px; }
section.product-container .category {
  flex-wrap: wrap;
  margin: 30px 0;
  justify-content: center;
}
section.product-container .dot-line {
  width: 90%;
  margin: 50px auto;
  border-bottom: 4px dotted #E85298;
}
section.product-container .category img { width: 25%; }

/* ======================
   Info Box
   ====================== */


/* ======================
   Plan Container
   ====================== */
section.plan-container { text-align: center; }
section.plan-container .section-title_img { width: 20%; margin: 30px; }
section.plan-container .img_38 { width: 36%; display: block; margin: -50px auto 30px; }
section.plan-container .plan-container--block {
  margin: 30px auto 50px;
  width: 50%;
  min-width: 650px;
}
section.plan-container .img_35,
section.plan-container .img_37 { width: 20%; margin-left: 15%; }
section.plan-container .plan-container--block .plan-container--block__inner {
  display: flex;
  align-items: center;
  margin: auto;
  justify-content: center;
}
section.plan-container .plan-container--block .plan-container--block__inner .sub { font-size: 0.875rem; }
section.plan-container .plan-container--block .plan-container--block__inner div { width: 50%; }
section.plan-container .plan-container--block .plan-container--block__inner img { width: 10%; }

/* ======================
   Question Container
   ====================== */
section.question-container {
  font-family: Avenir Next, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, Meiryo, sans-serif;
  max-width: 900px;
  text-align: center;
  margin: 60px auto;
  background: #fff;
}
section.question-container .section-title_img { width: 15%; margin-bottom: 30px; }

.question-container ul { width: 100%; margin: 0 auto; font-size: 16px; }
.question-container li { list-style: none; padding: 15px; border-bottom: 1px solid #bbbdc1; }

.question-container .question {
  position: relative;
  margin: 0;
  padding: .5em 1.5em;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  display: flex;
}
.question-container .question p { display: flex; align-items: center; text-align: left; }
.question-container .question p:first-child { width: 150px; }
.question-container .question p:nth-child(2) { padding-right: 20px; }
.question-container .question span:first-child { font-size: 32px; font-weight: 600; }
.question-container .question span:nth-child(2) { margin-right: 20px; font-weight: 600; }
.question-container .question:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 40%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 12px;
  height: 12px;
  border-top: solid 3px #bbbdc1;
  border-right: solid 3px #bbbdc1;
  transform: rotate(135deg);
}
.question-container .question.open:after { transform: rotate(-45deg); top: 45%; }

.question-container .answer {
  padding: 1.5em;
  display: flex;
  align-items: baseline;
  text-align: left;
  background: #F1F1F2;
}
.question-container .answer p:first-child { width: 150px; text-align: left; }
.question-container .answer p:nth-child(2) { width: calc(100% - 150px); }
.question-container .answer span:first-child { font-size: 32px; color: #d9689b; font-weight: 600; }
.question-container .answer span:nth-child(2) { margin-right: 20px; color: #d9689b; font-weight: 600; }

.question-container .text-link {
  width: 80%;
  margin: 20px auto;
  color: #3d3f42;
  text-align: right;
  font-size: 16px;
  text-decoration: underline;
}
.question-container a { color: #3d3f42 !important; }

/* ======================
   Slider Container
   ====================== */
section.slider-container { max-width: 900px; }


/* ======================
   What Container
   ====================== */
section.what-container { text-align: center; margin-top: 40px; }
section.what-container .text { width: 50%; margin: auto; margin-bottom: 24px;min-width: 500px; }
section.what-container .section-title_img { width: 7%; margin: 30px; min-width: 130px; }
section.what-container .what-container__pointer {
  display: flex;
  width: 30%;
  margin: 40px auto -17px;
  align-items: center;
  min-width: 300px;
  position: relative;
  z-index: 1;
}
section.what-container .what-container__pointer p { font-size: 18px; font-weight: bold; color: #E85298; margin-top: 10px; }
section.what-container .what-container__pointer .img_08 { width: 38%; margin-right: 2%; }
section.what-container .what-container__pointer .img_09 { width: 90%; }


section.what-container .tri { width: 50%; margin: auto; min-width: 600px; }
section.what-container .tri-back {
  height: 0;
  border-bottom: solid 50px transparent;
  border-top: solid 50px #F5F5F5;
  border-left: solid 25vw transparent;
  border-right: solid 25vw transparent;
  width: 50%;
  margin: auto;
}


/* ======================
   Step Container
   ====================== */
.step-container {
  margin: auto;
  text-align: center;
  padding: 30px 0;
  background-image: url(https://peaceteclab.co.jp/wp-content/themes/peaceteclab/img/landing/collabo/background_yellow_line.png);
  background-repeat: repeat;
}
.step-container .section-title_img { width: 15%; margin: 30px; }
.step-container__img { width: 65%; margin: auto; display: flex; justify-content: space-between; }
.step-container__img--inner { width: 32%; }
.step-container__img--inner .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  background: #fff;
}
.step-container__img--inner .number { margin-bottom: -2vw; }
.step-container__img--inner .inner img { width: 40%; }
.step-container__img--inner .inner p { width: 60%; font-weight: bold; line-height: 2; font-size: 1rem; }
.step-container__text {
  width: 40%;
  margin: 32px auto;
  background: #fff;
  border: 2px dotted #E85298;
  border-radius: 8px;
}
.step-container__text p { color: #E85298; font-weight: bold; padding: 30px 10px; line-height: 2; }

/* ======================
   Howto Container
   ====================== */
.howto-container_image { width: 90%; margin: auto;max-width: 1000px;}
.howto-container .tab-area { display: none; }
section.howto-container .section-title_img { width: 20%; margin: 30px; }

.howto-container__block { padding: 100px 0; margin-bottom: -200px; }
.howto-container__block:first-child { margin-bottom: -270px; }
.howto-container__inner { margin-bottom: 200px; }
.howto-container__inner .howto-container__block:nth-child(2) .howto-container__block--inner,
.howto-container__inner .howto-container__block:nth-child(3) .howto-container__block--inner { align-items: center; position: relative; }
.howto-container__inner .howto-container__block:nth-child(3) { margin-top: -200px; }

.howto-container__block--inner {
  display: flex;
  width: 50%;
  margin: auto;
  align-items: flex-start;
  min-width: 500px;
}
.howto-container__block .howto-container__block--inner img { width: 40%; }
.howto-container__block .howto-container__block--inner .inner { width: 60%; }

/* ======================
   Video Container
   ====================== */
section.video-container {
  width: 100%;
  max-width: none;
  background: rgba(244, 244, 236, 0.8);
  margin: 0;
}
section.video-container img { padding: 12px 0; width: 30%; max-width: 200px; }
section.video-container iframe { border-radius: 30px; margin: 12px auto; }

/* ======================
   Annotation Container
   ====================== */


/* ======================
   Footer
   ====================== */
.footer { text-align: center; margin: 40px auto 100px; font-size: 14px; }
.footer .logo_alice { display: block; width: 200px; margin: auto; }
.footer .logo_alice img { width: 200px; }
.footer .link { margin: 20px auto; width: 300px; align-items: center; justify-content: space-evenly; }
.footer .info { margin: 20px auto; width: 400px; align-items: center; justify-content: space-evenly; }

/* ======================
   Clip Path
   ====================== */


/* ======================
   Tablet (769px ~ 1187px)
   ====================== */
@media screen and (min-width: 769px) and (max-width: 1187px) {
  section.top_container .text .sub { font-size: 1.6vw; }
  section.what-container .tri-back {
    border-left: solid 300px transparent;
    border-right: solid 300px transparent;
  }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
  .step-container__img--inner .inner p { font-size: 0.8rem; }
}

/* ======================
   Mobile (〜768px)
   ====================== */
@media screen and (max-width: 768px) {

  body { font-size: 14px; }

  section {
    width: 95%;
    margin: auto;
    padding: 0;
  }

  p.text-title { font-size: 20px; }
  .annotation { font-size: 10px; }

  /* Width utilities */
  .s_w-3   { width: 3%; }
  .s_w-20  { width: 20%; }
  .s_w-25  { width: 25%; }
  .s_w-30  { width: 30%; }
  .s_w-40  { width: 40%; }
  .s_w-45  { width: 45%; }
  .s_w-48  { width: 48%; }
  .s_w-50  { width: 50%; }
  .s_w-60  { width: 60% !important; }
  .s_w-70  { width: 70%; }
  .s_w-80  { width: 80%; }
  .s_w-90  { width: 90%; }
  .s_w-95  { width: 95%; }
  .s_w-100 { width: 100%; }
  .s_h-auto { height: auto; }
  .s_d-block { display: block; }
  .s_d-flex  { display: flex; }

  /* Flex utilities */
  .s_left   { justify-content: left; }
  .s_center { justify-content: center; }
  .s_wrap   { flex-wrap: wrap; }
  .s_align-left   { text-align: left; }
  .s_align-center { text-align: center; }

  /* Margin / Padding utilities */
  .s_m-auto   { margin: auto; }
  .s_mt-8     { margin-top: 8px; }
  .s_mt-24    { margin-top: 24px; }
  .s_mt-40    { margin-top: 40px; }
  .s_ml-0     { margin-left: 0; }
  .s_ml-20p   { margin-left: 20%; }
  .s_mb-16    { margin-bottom: 16px; }
  .s_mb-32    { margin-bottom: 32px; }
  .s_mtb-16   { margin-top: 16px; margin-bottom: 16px; }
  .s_p-16     { padding: 16px; }
  .s_pt-32    { padding: 32px; }

  /* Header */
  .header h1 { width: 90%; }
  .header h1 img.logo { height: auto; width: 100px; }
  .header h1 img.batsu { width: 15px; height: 15px; margin: 0 10px; }
  .header img { width: 100%; padding: 0; }

  /* Top container */
  section.top_container { overflow: hidden; }
  section.top_container .tag {bottom: 10%; right: -30px; }
  section.top_container .text { width: calc(100% - 32px); bottom: -10px; left: 16px; padding-bottom: 20px; }
  section.top_container .text .main { font-size: 7vw; margin-bottom: 20px; line-height: 1.6; }
  section.top_container .text .sub { font-size: .8rem; }

  /* Induction */
  .induction-container { padding: 30px 2.5%; }
  .induction-container p.annotation { font-size: 10px; }

  /* style */
  .style-container .style-container__img { width: 100%; flex-direction: column; padding: 0 5%; }

  /* Coupon */
  .coupon-container { width: 100%; }
  .coupon-container .img_01 { width: 95%; min-width: inherit; }
  .coupon-container .img_02 { width: 80%; }
  .coupon-container .coupon-button { width: 95%; }
  .coupon-container .coupon-button .img_03 { top: -30px;
        left: 0px;
        width: 27%;}
  .coupon-container .dot-line { width: 100%; }
	.coupon-container .coupon-container__how {
	  display: block;
	  width: 90%;
	  margin: 0 auto 0;
	  align-items: flex-start;
	  text-align: center;
	}
	.coupon-container .coupon-container__how .img_04 {
	  width: 70%;
	  height: auto;
		margin-right: 0;
	}
	.coupon-container__how--text { width: 100%; }
  .coupon-container__how--text .bubble p { font-size: 0.875rem; }

  /* Product */
  section.product-container { width: 95%; }
  section.product-container .section-title_img { width: 35%; }
  section.product-container .category img { width: 50%; }
  section.product-container .dot-line { width: 100%; }

  /* Info box */


  /* Plan */
  section.plan-container { width: 100%; }
  section.plan-container .section-title_img { width: 55%; }
  section.plan-container .img_38 { width: 95%; margin-top: -50px; }
  section.plan-container .plan-container--block { min-width: inherit; width: 100%; }
  section.plan-container .img_35,
  section.plan-container .img_37 { width: 30%; margin-left: 15%; }
  section.plan-container .plan-container--block .plan-container--block__inner div { width: 65%; margin-right: 10%; }
  section.plan-container .plan-container--block .plan-container--block__inner img { width: 15%; }
  section.plan-container .plan-container--block .plan-container--block__inner .back-pink { font-size: 14px; }
  section.plan-container .plan-container--block .plan-container--block__inner .text-bold { font-size: 12px; }

  /* Question */
  section.question-container { width: 100%; padding: 2.5%; }
  section.question-container .section-title_img { width: 25%; }
  .question-container ul { width: 100%; font-size: 14px; }
  .question-container li { padding: 10px; }

  .question-container .question { display: block; padding: 10px 0; }
  .question-container .question p:first-child { margin-left: 15px; }
  .question-container .question p:nth-child(2) { padding-right: 50px; }
  .question-container .question:after,
  .question-container .question.open:after { top: 63%; right: 15px; }
  .question-container .answer { padding: 10px 15px; display: block; }
  .question-container .answer p:nth-child(2) { width: 100%; }

  /* Slider */


  /* What */
  section.what-container { width: 100%; }
  section.what-container .text { min-width: inherit; width: 80%; }
  section.what-container .what-container__pointer { min-width: inherit; width: 80%; margin: 40px auto -15px; z-index: 2; }


  section.what-container .tri { min-width: inherit; width: 100%; }
  section.what-container .tri-back {
    border-bottom: solid 30px transparent;
    border-top: solid 50px #F5F5F5;
    border-left: solid 50vw transparent;
    border-right: solid 50vw transparent;
    width: 100%;
    margin: auto;
  }

  /* Step */
  .step-container { width: 100%; }
  .step-container .section-title_img { width: 50%; }
  .step-container__img { display: block; width: 95%; }
  .step-container__img--inner { width: 100%; }
  .step-container__img--inner .number { margin-bottom: -10vw; }
  .step-container__img--inner .inner { width: 100%; margin: auto; }
  .step-container__img--inner .inner p { font-size: 20px; }
  .step-container__text { font-size: 16px; line-height: 1.78; width: 95%; }

  /* Howto */
  section.howto-container { width: 100%; }
  section.howto-container .section-title_img { width: 60%; }
  .howto-container_image { width: 90%; margin: auto; }

  /* Video */
  section.video-container iframe { width: 90%; height: 190px; }

  /* Annotation container */


  /* Footer */
  .footer .info { width: 100%; }

  /* Item container */
  .item-container__genre .flex { display: block; }
  .item-container__genre .flex li { width: 100%; margin-bottom: 10px; }
}

/* ======================
   追加マージ（別CSSより）
   ====================== */

/* --- Google Fonts --- */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* --- scroll behavior --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

/* --- body フォント追加 --- */
body {
  font-family:'Avenir Next', 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'MS PGothic', 'MS UI Gothic', 'ヒラギノ丸ゴ Pro W4', sans-serif;
}

/* --- table --- */
th, td {
  border: solid 1px #CDD6DD;
  padding: 10px;
  vertical-align: middle;
}

/* --- 見出し --- */
h1 { font-size: 4rem; font-weight: 600; }
h2 { font-size: 1.875rem; line-height: 1.5; margin-bottom: 32px; }
h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 16px; }
h4 { font-size: 1.125rem; font-weight: 600; }

h2.about-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #D9689B;
  position: relative;
  display: inline-block;
}
h2.about-title::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: #D9689B;
  opacity: 0.6;
}


@media screen and (max-width: 768px) {
  h1 { font-size: 2.7rem; }
  h3 { font-size: 1.2rem; }
  h2.how { line-height: 3rem; }
  h2.how::before { top: 17%; }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  h1 { font-size: 3rem; }
}

/* --- フォント --- */


   /* 18px */
  /* 22px */
 /* 25px */


sup { font-size: 0.6em; vertical-align: top; }


/* --- 吹き出し --- */


/* --- line-height --- */


@media screen and (max-width: 768px) {
  .s_t-body      { font-size: 1rem; }
  .s_lineheight-2 { line-height: 2rem; }
}

/* --- position 追加 --- */


.p-re     { position: relative;; }


.ab03 {
	position: absolute;
  top: 5px;
  width: 95%;
  padding: 4px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 600;
}


@media screen and (max-width: 768px) {
  .s_p-re  { position: relative; }
  .s_p-ab  { position: absolute; }

  .s_ab01  { right: 15px; top: -15px; }
  .s_route90 { transform: rotate(90deg); }
}

/* --- ボーダー追加 --- */


/* --- グリッド追加 --- */


.gap-1p            { gap: 1%; }


@media screen and (max-width: 768px) {
  .s_d_flex  { display: flex; }
  .s_d_block { display: block; }
}
@media screen and (min-width: 729px) {
  .min500 { min-width: 500px; }
}

/* --- max-width 追加 --- */


@media screen and (max-width: 768px) {
  .s_min-height_70 { min-height: 70px; }
}

/* --- section 共通 padding --- */
section {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* --- header ロゴ --- */
header h1{

}
header .logo img { height: 50px; width: auto; }

/* --- tryBtn 追加スタイル --- */

.tryBtn a {
  display: flex;
  align-items: center;
  padding: 16px 30px;
  color: #fff;
  max-height: 70px;
  font-weight: bold;
  border-radius: 1000px;
  letter-spacing: .01em;
  background: #D62228;
  justify-content: center;
}
.tryBtn.white a { color: #D62228; border: 2px solid #D62228; background: #fff; }
.tryBtn.pink a  { color: #D9689B; border: 2px solid #D9689B; background: #fff; }
.tryBtn.pink    { width: 100%; animation: none; }
header .tryBtn  { width: 49%; animation: none; }

@media screen and (max-width: 768px) {
  .tryBtn        { width: 100%; }
  .tryBtn a      { width: 90%; padding: 16px 20px; max-width: inherit;margin:0 5%; }
  .tryBtn.pink a { width: 90%; }
}

/* --- checklist --- */


/* --- question-container 上書き・追加 --- */
.question-container li { border-bottom: 1px dotted #bbbdc1; }

.question-container .question:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 20%;
  transition: all 0.2s ease-in-out;
  display: block;
  transform: rotate(0deg);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #D9689B;
  margin: 20px auto;
}
.question-container .question.open:after {
  transform: rotate(-180deg);
  top: 20%;
}
.question-container .answer { align-items: flex-start; }
.question-container .answer p:first-child {
  width: calc(150px - 1.5em);
  text-align: left;
  line-height: 1;
}
.question-container .question p:nth-child(2) {
  padding-right: 20px;
  width: calc(100% - 20px);
}
.question-container .answer span:first-child { color: inherit; }

@media screen and (max-width: 768px) {
  section.question-container { margin-bottom: 0; margin-top: 64px; }
  .question-container .question p:first-child { margin-left: 0; width: inherit; margin-right: 15px; }
  .question-container .answer p:first-child   { width: inherit; margin-right: 10px; }
  .question-container .answer { padding: 15px; }
}

/* --- footer 上書き --- */
.footer {
  text-align: center;
  padding: 56px 0;
  font-size: 14px;
}

/* --- タブレット --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  nav { width: calc(100% - 160px) !important; }
}


/* FEATURES 価格表示用 */
.price-de {
	display: inline-block;
	line-height: 1;
}

/* ======================
   追加定義（HTML使用クラス補完）
   ====================== */
.lineheight-2   { line-height: 2; }
.t-letter-normal { letter-spacing: normal; }
.p-ab            { position: absolute; }
.ab02            { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; white-space: nowrap; letter-spacing: normal; }
.align-items-center { align-items: center; }
.img_39         { width: 15%; margin: 30px auto; display: block; }
.max-1000       { max-width: 1000px; }
.min-height-160 { min-height: 160px; }

@media screen and (max-width: 768px) {
  .img_39 { width: 25%; }
}