@charset 'UTF-8';

/**
 * Easyguide Page Settings
 * ================================================================================
 * Table of Contents:
 *
 * Easyguide Page Settings
 *  - Section
 *  - Key Visual
 *  - Anchor
 *  - About
 *  - Products
 *  - Usage
 *  - Step
 *  - Start
 *  - FAQ
 * ================================================================================
 */



/**
 * ================================================================================
 * Easyguide Page Settings
 * ================================================================================
 */

/**
 * Section
 * -------------------------------
 */

/* -- Title -- */
body.page-easyguide .sec-ttl {
  position: absolute;
  top: -2.2rem;
  left: 0;
  width: 100%;
  text-align: center;
}

body.page-easyguide .sec-ttl__inner {
  display: inline-block;
  position: relative;
  width: 28.2rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

body.page-easyguide .sec-ttl__inner::before,
body.page-easyguide .sec-ttl__inner::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 0.9rem;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

body.page-easyguide .sec-ttl__inner::before {
  top: 0;
  background-image: url('/csguide/assets/easyguide/img/sec_ttl_bg_top.svg');
}

body.page-easyguide .sec-ttl__inner::after {
  bottom: 0;
  background-image: url('/csguide/assets/easyguide/img/sec_ttl_bg_bottom.svg');
}

body.page-easyguide .sec-ttl__label {
  display: block;
  padding: 0.5rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  background-image: url('/csguide/assets/easyguide/img/sec_ttl_bg.svg');
  background-repeat: repeat-y;
  background-position: 50% 0;
  background-size: 100% auto;
}

/* -- Button -- */
body.page-easyguide .sec-btn {
  min-width: 23.0rem;
  padding-top: 1.0rem;
  padding-bottom: 1.0rem;
  font-size: 1.2rem;
}


/**
 * Key Visual
 * -------------------------------
 */

body.page-easyguide .kv {
  padding-top: 1.0rem;
  background-color: #f5eeeb;
}

body.page-easyguide .kv__ttl {
  text-align: center;
}

body.page-easyguide .kv__ttl img {
  width: 34.5rem;
}


/**
 * Anchor
 * -------------------------------
 */

body.page-easyguide .anchor {
  position: relative;
  z-index: 1;
  padding-left: 3.0rem;
  padding-right: 3.0rem;
  padding-bottom: 2.0rem;
  margin-bottom: 12.5rem;
  background-color: #f5eeeb;
}

body.page-easyguide .anchor::after {
  position: absolute;
  bottom: -4.0rem;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 120%;
  height: 12.0rem;
  border-radius: 50%;
  background-color: #f5eeeb;
  content: '';
}

body.page-easyguide .anchor-nav {
  counter-reset: anchor-number 0;
}

body.page-easyguide .anchor-nav__item {
  border-bottom: 0.1rem solid #d5ccca;
}

body.page-easyguide .anchor-nav__label {
  display: block;
  position: relative;
  padding: 1.3rem 3.5rem 1.3rem 3.5rem;
  font-size: 1.4rem;
}

body.page-easyguide .anchor-nav__label::before {
  display: inline-block;
  position: absolute;
  top: 1.1rem;
  left: 0;
  counter-increment: anchor-number 1;
  content: 'Q' counter(anchor-number) '. ';
  font-size: 1.6rem;
  font-weight: 700;
}

body.page-easyguide .anchor-nav__label::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.8rem;
  height: 1.8rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="18" cy="18" r="18" fill="%2300644e"/%3E%3Cpath d="M25.1,17.5c-.6-.6-1.5-.6-2.1,0l-3.4,3.4v-9.4c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5,1.5v9.4l-3.4-3.4c-.6-.6-1.5-.6-2.1,0-.6.6-.6,1.5,0,2.1l6,6c.3.3.7.4,1.1.4s.8-.1,1.1-.4l6-6c.6-.6.6-1.5,0-2.1Z" fill="%23ffffff"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}


/**
 * About
 * -------------------------------
 */

body.page-easyguide .about {
  position: relative;
  z-index: 1;
  padding-top: 6.5rem;
  padding-bottom: 18.0rem;
  background-image: url('/csguide/assets/easyguide/img/bg_texture01.jpg');
  background-repeat: repeat;
  color: var(--color-idbrown);
  text-align: center;
}

body.page-easyguide .about::before,
body.page-easyguide .about::after {
  position: absolute;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

body.page-easyguide .about::before {
  top: 5.3rem;
  width: 100%;
  height: 45.0rem;
  background-image: url('/csguide/assets/easyguide/img/about_bg01.png');
}

body.page-easyguide .about::after {
  bottom: -1.5rem;
  width: 18.7rem;
  height: 17.0rem;
  background-image: url('/csguide/assets/easyguide/img/about_bg02.png');
}

body.page-easyguide .about__ttl {
  text-align: center;
}

body.page-easyguide .about__ttl-label {
  display: inline-block;
  position: relative;
  padding: 0 1.0rem 0.8rem 1.0rem;
  font-size: 1.6rem;
  font-weight: 700;
}

body.page-easyguide .about__ttl-label::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 0.1rem;
  background-color: var(--color-idbrown);
  content: '';
}

body.page-easyguide .about__txt {
  margin-top: 2.0rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.5;
  letter-spacing: -0.03em;
}

body.page-easyguide .about__txt-dot {
  display: inline-block;
  position: relative;
}

body.page-easyguide .about__txt-dot::before {
  position: absolute;
  top: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 100rem;
  background-color: var(--color-idbrown);
  content: '';
}

body.page-easyguide .about__txt > strong {
  font-size: 1.6rem;
  font-weight: 700;
}


/**
 * Products
 * -------------------------------
 */

body.page-easyguide .products {
  position: relative;
  z-index: 1;
  padding: 4.5rem 1.5rem 2.0rem 1.5rem;
  margin-top: 9.5rem;
  background-color: #f5eeeb;
  color: var(--color-idbrown);
  text-align: center;
}

body.page-easyguide .products__txt {
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  line-height: 1.8;
}

body.page-easyguide .products-gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: -0.6rem;
  margin-left: -0.6rem;
  padding-top: 1.5rem;
}

body.page-easyguide .products-gallery__item {
  width: 50%;
  padding-top: 0.6rem;
  padding-left: 0.6rem;
}

body.page-easyguide .products-gallery__fig {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.4rem;
}

body.page-easyguide .products-gallery__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-easyguide .products__btn {
  margin-top: 1.7rem;
}


/**
 * Usage
 * -------------------------------
 */

body.page-easyguide .usage {
  position: relative;
  z-index: 1;
  padding-top: 5.5rem;
  padding-bottom: 2.5rem;
  margin-top: 9.7rem;
  background-image: url('/csguide/assets/easyguide/img/bg_texture01.jpg');
  background-repeat: repeat;
  color: var(--color-idbrown);
  text-align: center;
}

body.page-easyguide .usage__txt {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 2.0;
}

body.page-easyguide .usage__ttl {
  position: relative;
  margin-top: 2.5rem;
  padding-bottom: 1.8rem;
  color: var(--color-idbrown);
  font-size: 1.5rem;
  font-weight: 700;
}

body.page-easyguide .usage__ttl::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 17.3rem;
  height: 2.1rem;
  background-image: url('/csguide/assets/easyguide/img/usage_ttl_bg.svg');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

body.page-easyguide .usage-case {
  margin-top: 2.3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

body.page-easyguide .usage-case__item {
  position: relative;
  z-index: 1;
  margin-top: 5.5rem;
  padding: 4.0rem 3.5rem;
  border-radius: 1.5rem;
  box-shadow: 0.3rem 0.5rem 0.35rem 0 rgba(0, 0, 0, 0.15);
  background-color: #fae7d9;
}

body.page-easyguide .usage-case__item:nth-of-type(1) {
  margin-top: 0;
}

body.page-easyguide .usage-case__item::before,
body.page-easyguide .usage-case__item::after {
  position: absolute;
  content: '';
}

body.page-easyguide .usage-case__item::before {
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0.2rem solid #fff;
  border-radius: 1.5rem;
  box-shadow: inset 0 0 0.8rem 0.3rem rgba(255, 255, 255, 1);
  pointer-events: none;
}

body.page-easyguide .usage-case__item::after {
  z-index: 2;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
}

body.page-easyguide .usage-case__item.-case1::after {
  top: -2.2rem;
  left: -0.2rem;
  width: 8.05rem;
  height: 6.8rem;
  background-image: url('/csguide/assets/easyguide/img/usage_case01_box.png');
}

body.page-easyguide .usage-case__item.-case2::after {
  top: -2.4rem;
  right: -0.2rem;
  width: 8.3rem;
  height: 6.8rem;
  background-image: url('/csguide/assets/easyguide/img/usage_case02_box.png');
}

body.page-easyguide .usage-case__ttl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  min-width: 24.1rem;
  padding: 0 1.0rem 0.8rem 1.0rem;
}

body.page-easyguide .usage-case__ttl::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100%;
  height: 1.6rem;
  background-color: #fff;
  content: '';
}

body.page-easyguide .usage-case__ttl-sub,
body.page-easyguide .usage-case__ttl-main {
  display: inline-block;
}

body.page-easyguide .usage-case__ttl-sub {
  margin-right: 1.4rem;
}

body.page-easyguide .usage-case__ttl-sub img {
  width: auto;
  height: 1.85rem;
}

body.page-easyguide .usage-case__ttl-main {
  color: var(--color-idbrown);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

body.page-easyguide .usage-case__fig {
  margin-top: 1.5rem;
}

body.page-easyguide .usage-case__fig > img {
  width: 18.0rem;
}

body.page-easyguide .usage-case__figcaption {
  display: inline-block;
  margin-top: 1.0rem;
  font-size: 1.3rem;
  text-align: left;
}

body.page-easyguide .usage-case__inner {
  margin-top: 3.0rem;
}

body.page-easyguide .usage-case__head {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 0 1.2rem 0.3rem 1.2rem;
  font-size: 1.6rem;
  font-weight: 700;
}

body.page-easyguide .usage-case__head::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  width: 100%;
  height: 1.2rem;
  background-color: #fff;
  content: '';
}

body.page-easyguide .usage-case-example {
  margin-top: 1.8rem;
}

body.page-easyguide .usage-case-example__item {
  position: relative;
  margin-top: 1.5rem;
  padding-left: 2.0rem;
  font-size: 1.5rem;
  text-align: left;
}

body.page-easyguide .usage-case-example__item::before {
  position: absolute;
  top: 0.4rem;
  left: 0;
  width: 0.8em;
  height: 0.8em;
  border-radius: 100rem;
  background-color: var(--color-idbrown);
  content: '';
}

body.page-easyguide .usage-case-purchase {
  margin-top: 2.0rem;
  text-align: left;
}

body.page-easyguide .usage-case-purchase__head {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
}

body.page-easyguide .usage-case-purchase__comments {
  font-size: 1.0rem;
}

body.page-easyguide .usage-case-purchase-gallery {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.0rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
}

body.page-easyguide .usage-case-purchase-gallery__item {
  width: 33.3333%;
  padding-top: 0.5rem;
  padding-left: 0.5rem;
}

body.page-easyguide .usage-case__price {
  font-size: 1.8rem;
  font-weight: 700;
}

body.page-easyguide .usage-case__price > strong {
  font-size: 3.6rem;
}


/**
 * Step
 * -------------------------------
 */

body.page-easyguide .step {
  position: relative;
  z-index: 1;
  margin-top: 8.7rem;
  padding: 6.7rem 0 5.4rem 0;
  background-color: #f0e9e6;
  text-align: center;
}

body.page-easyguide .step__ttl {
  font-size: 3.0rem;
  font-weight: 600;
  line-height: 1.4;
}

body.page-easyguide .step-slider {
  position: relative;
}

body.page-easyguide .step-slider .swiper-wrapper {
  height: auto !important;
}

body.page-easyguide .step-slider__slide {
  width: 31.5rem !important;
  height: auto !important;
  margin: 0 3.0rem !important;
}

body.page-easyguide .step-slider__slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.7rem 0 2.5rem 0;
  border-radius: 0.9rem;
  background-color: #fff;
}

body.page-easyguide .step-slider__slide-head {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 22.0rem;
  height: 3.8rem;
  border-radius: 0.65rem;
  background-color: #abd6dc;
  color: var(--color-idbrown);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.2;
}

body.page-easyguide .step-slider__slide-no img {
  width: 7.4rem;
}

body.page-easyguide .step-slider__slide-ttl {
  color: var(--color-idbrown);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
}

body.page-easyguide .step-slider__slide-figcaption {
  color: var(--color-idbrown);
  font-size: 1.2rem;
  line-height: 1.6;
}

body.page-easyguide .step-slider__slide-comments {
  display: block;
  margin-top: 1.4rem;
  font-size: 1.1rem;
}

body.page-easyguide .step-slider__prev,
body.page-easyguide .step-slider__next {
  width: 2.1rem;
  height: 3.7rem;
  margin-top: -1.85rem;
  background-size: 100% auto;
}

body.page-easyguide .step-slider__prev {
  left: 1.8rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 42 74" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M36.9,0c1.3,0,2.6.5,3.6,1.5,2,2,2,5.2,0,7.2l-28.3,28.4,28.3,28.4c2,2,2,5.2,0,7.2-2,2-5.2,2-7.2,0L1.5,40.6c-2-2-2-5.2,0-7.2L33.4,1.5c1-1,2.3-1.5,3.6-1.5Z" fill="%2359332c"/%3E%3C/svg%3E');
}

body.page-easyguide .step-slider__next {
  right: 1.8rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 42 74" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M5.1,74c-1.3,0-2.6-.5-3.6-1.5-2-2-2-5.2,0-7.2l28.3-28.4L1.5,8.6C-.5,6.7-.5,3.5,1.5,1.5,3.5-.5,6.7-.5,8.6,1.5l31.9,31.9c2,2,2,5.2,0,7.2l-31.9,31.9c-1,1-2.3,1.5-3.6,1.5Z" fill="%2359332c"/%3E%3C/svg%3E');
}

body.page-easyguide .step-slider__prev.swiper-button-disabled,
body.page-easyguide .step-slider__next.swiper-button-disabled {
  display: none;
}

body.page-easyguide .step-slider__pagination {
  bottom: -2.7rem;
}

body.page-easyguide .step-slider__pagination .swiper-pagination-bullet {
  width: 1.0rem;
  height: 1.0rem;
  margin: 0 0.6rem;
  opacity: 1;
  background-color: #cdc1bf;
  transition: background-color 0.25s ease-out;
}

body.page-easyguide .step-slider__pagination .swiper-pagination-bullet-active {
  background-color: var(--color-idred);
}


/**
 * Start
 * -------------------------------
 */

body.page-easyguide .start {
  position: relative;
  z-index: 1;
  margin-top: 9.5rem;
  padding: 5.5rem 1.5rem 2.3rem 1.5rem;
  background-image: url('/csguide/assets/easyguide/img/bg_texture01.jpg');
  background-repeat: repeat;
}

body.page-easyguide .start__inner {
  color: var(--color-idbrown);
  text-align: center;
}

body.page-easyguide .start__head {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
}

body.page-easyguide .start__body {
  margin-top: 1.5rem;
}

body.page-easyguide .start-howto {
  display: flex;
  position: relative;
}

body.page-easyguide .start-howto::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 0.15rem;
  height: calc(100% - 15.8rem - 1.5rem);
  background-color: var(--color-idbrown);
  content: '';
}

body.page-easyguide .start-howto__item {
  width: 50%;
}

body.page-easyguide .start-howto__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 15.8rem;
  height: 15.8rem;
  padding-bottom: 2.4rem;
  border: 0.1rem solid #fff;
  border-radius: 100rem;
  box-shadow: 0.25rem 0.4rem 0.1rem 0 rgba(0, 0, 0, 0.25);
  background-color: var(--color-idbrown);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
}

body.page-easyguide .start-howto__label::after {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  width: 2.15rem;
  height: 2.15rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 43 43" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="21.5" cy="21.5" r="21.5" fill="%23ffffff"/%3E%3Cpath d="M18.6,31.3c-.5,0-.9-.2-1.3-.5-.7-.7-.7-1.8,0-2.5l7-7-7-7c-.7-.7-.7-1.8,0-2.5.7-.7,1.8-.7,2.5,0l8.3,8.3c.7.7.7,1.8,0,2.5l-8.3,8.3c-.3.3-.8.5-1.3.5Z" fill="%2300644e"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

body.page-easyguide .start-howto__txt {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

body.page-easyguide .start-howto__comments {
  margin-top: 0.8rem;
  font-size: 1.1rem;
}


/**
 * FAQ
 * -------------------------------
 */

body.page-easyguide .faq {
  margin-top: 4.0rem;
  padding: 3.2rem 2.8rem;
  border-radius: 1.0rem;
  background-color: #fff;
}

body.page-easyguide .faq__ttl {
  color: var(--color-idgreen);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-align: center;
}

body.page-easyguide .faq__list {
  margin-top: 1.5rem;
}

body.page-easyguide .faq__list-item {
  border-bottom: 0.1rem solid #b2d0ca;
}

body.page-easyguide .faq__list-btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 1.5rem 3.0rem;
  color: var(--color-ttl);
  font-size: 1.3rem;
  font-weight: 500;
}

body.page-easyguide .faq__list-btn::before,
body.page-easyguide .faq__list-btn::after {
  position: absolute;
}

body.page-easyguide .faq__list-btn::before {
  top: 1.5rem;
  left: 0;
  font-size: 1.8rem;
  line-height: 1;
  content: 'Q.';
}

body.page-easyguide .faq__list-btn::after {
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(90deg);
  width: 1.8rem;
  height: 1.8rem;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="18" cy="18" r="18" fill="%2300644e"/%3E%3Cpath d="M15.6,26.2c-.4,0-.8-.1-1.1-.4-.6-.6-.6-1.5,0-2.1l5.9-5.9-5.9-5.9c-.6-.6-.6-1.5,0-2.1.6-.6,1.5-.6,2.1,0l7,7c.3.3.4.7.4,1.1s-.2.8-.4,1.1l-7,7c-.3.3-.7.4-1.1.4Z" fill="%23ffffff"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
  transition: transform 0.2s ease-out;
}

body.page-easyguide .faq__list-btn.is-active::after {
  transform: translateY(-50%) rotate(270deg);
}

body.page-easyguide .faq__list-panel {
  position: relative;
  padding: 0 0 2.0rem 3.0rem;
  font-size: 1.15rem;
  line-height: 1.6;
}

body.page-easyguide .faq__list-panel::before {
  position: absolute;
  top: -0.2rem;
  left: 0;
  color: var(--color-idgreen);
  font-family: 'Shippori Mincho', '游明朝体 Medium', 'Yu Mincho Medium', '游明朝体', YuMincho, 'Hiragino Mincho ProN', serif;
  font-size: 1.8rem;
  line-height: 1;
  content: 'A.';
}

body.page-easyguide .faq__list-txt {
  margin-top: 1.0rem;
}

body.page-easyguide .faq__list-txt.c-list {
  list-style-type: disc;
}

body.page-easyguide .faq__list-txt:nth-of-type(1) {
  margin-top: 0;
}

body.page-easyguide .faq__btn {
  margin-top: 2.3rem;
  text-align: center;
}