@charset "UTF-8";
/*
Theme Name: Original_style
Theme URI: http://xxxxxxxxxxxxxxxx.jp/
Description: オリジナルリセット
Version: 1.5
Author: simple集中
Author URI: http://xxxxxxxxxxxxxxxx.jp/
*/
/* html5 reset*/
html {
  overflow-y: scroll;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

h1, h2, h3, h4, h5, h6, address, caption, cite, code, dfn, em, strong, th, var, span {
  font-style: normal;
  font-weight: normal;
}

li {
  list-style: none;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

img {
  vertical-align: bottom;
}

/*sass用　ブレイクポイント定義*/
:root {
  --color-red-01: #941e37;
  --color-blue-01: #238bab;
  --color-green-01: #8ca947;
  --color-green-02: #1a341b;
  --font-weight-Regular: 400;
  --font-weight-Medium: 500;
  --font-weight-SemiBold: 600;
  --font-weight-Bold: 700;
  --font-weight-Black: 900;
}

/* original reset */
li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* html5 reset +alpha */
html {
  font-size: 62.5%; /* (14px) */
  line-height: 1;
}

#main {
  line-height: 1.4;
}

/* common item */
.clrfx:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0;
}

.clrfx {
  zoom: 1;
}

.clr {
  clear: both;
}

.fltl {
  float: left;
}

.fltr {
  float: right;
}

.leftAdjust {
  text-align: left;
}

.rightAdjust {
  text-align: right;
}

.centerAdjust {
  text-align: center;
}

.topAdjust {
  vertical-align: top;
}

.middleAdjust {
  vertical-align: middle;
}

.bottomAdjust {
  vertical-align: bottom;
}

.rlt {
  position: relative;
}

.abs {
  position: absolute;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

del {
  -webkit-text-decoration: line-though;
          text-decoration: line-though;
}

/* items */
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

a img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: alpha(opacity=70);
}

a:hover img.opa100 {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: alpha(opacity=100);
}

#wrapper {
  max-width: 750px;
  margin-inline: auto;
  overflow: hidden;
}
#wrapper img {
  display: block;
}

.trial #wrapper {
  max-width: none;
}

.container {
  margin: 0 auto;
}

.f_noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.f_noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* body style */
body {
  font-size: 14px;
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

/* common */
@media (width > 750px) {
  .sp_v {
    display: none !important;
  }
}

@media (width <= 750px) {
  .pc_v {
    display: none !important;
  }
}

/*==============================
	ホバーアニメーション
===============================*/
a .hover_abs_anim_01 {
  position: relative;
  overflow: hidden;
}

a .hover_abs_anim_01 img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%) scale(1, 1); /* Safari用 */
  -ms-transform: translate(-50%, -50%) scale(1, 1);
      transform: translate(-50%, -50%) scale(1, 1);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

a:hover .hover_abs_anim_01 img {
  -webkit-transform: translate(-50%, -50%) scale(1.2, 1.2); /* Safari用 */
  -ms-transform: translate(-50%, -50%) scale(1.2, 1.2);
      transform: translate(-50%, -50%) scale(1.2, 1.2);
}

a .hover_anim_01 {
  overflow: hidden;
}

a .hover_anim_01 img {
  -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

a:hover .hover_anim_01 img {
  -webkit-transform: scale(1.2, 1.2);
      -ms-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
}

.fade-in {
  opacity: 0;
  -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: 0.6s ease;
  transition: 0.6s ease;
}

.fade-in.active {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/*==============================
	タイトル関連
===============================*/
.c-title-01 {
  color: var(--color-blue-01);
  font-family: "Noto Serif JP", sans-serif;
  font-size: clamp(24px, 2.6666666667vw, 32px);
  font-weight: var(--font-weight-Bold);
  letter-spacing: 0.1em;
  text-align: center;
}
.c-title-01::before {
  content: "";
  display: block;
  width: clamp(30px, 3.3333333333vw, 40px);
  aspect-ratio: 40/56;
  margin-bottom: 10px;
  margin-inline: auto;
  background: url(./images/trial/i_leaf_01.webp) center center no-repeat;
  background-size: contain;
}

/*==============================
	mv_block_01
===============================*/
.mv_block_01 {
  position: relative;
  z-index: 10;
}
.mv_block_01 .obj_box_01 {
  position: absolute;
  top: 26%;
  left: 0%;
  width: 100%;
}
.mv_block_01 .obj_01 {
  width: 100%;
}
.mv_block_01 .obj_02 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5%;
  width: 89.6%;
  margin-top: clamp(20px, 5.3333333333vw, 40px);
  margin-inline: auto;
}
.mv_block_01 .obj_03 {
  width: 89.6%;
  margin-top: clamp(20px, 5.3333333333vw, 40px);
  margin-inline: auto;
}
.mv_block_01 .obj_04 {
  width: 89.6%;
  margin-top: calc(-1 * clamp(46px, 12.2666666667vw, 92px));
  margin-inline: auto;
}

/*==============================
	structure_block_01
===============================*/
.structure_block_01 {
  position: relative;
  margin-top: calc(-1 * clamp(34px, 9.0666666667vw, 68px));
  z-index: 5;
}
.structure_block_01 .obj_02 {
  width: 71.467%;
  margin-top: clamp(25px, 6.6666666667vw, 50px);
  margin-inline: auto;
}
.structure_block_01 .obj_03 {
  margin-top: clamp(12px, 3.2vw, 34px);
}
/*==============================
	brainwave_block_01
===============================*/
.brainwave_block_01 {
  position: relative;
  margin-top: clamp(15px, 4vw, 30px);
}
.brainwave_block_01 .obj_box_01 {
  position: absolute;
  top: 28%;
  left: 0;
  width: 100%;
}
.brainwave_block_01 .obj_01 {
  width: 77.7%;
  margin-inline: auto;
}
.brainwave_block_01 .obj_02 {
  width: 78.9%;
  margin-inline: auto;
  margin-top: clamp(24px, 6.4vw, 48px);
}
.brainwave_block_01 .obj_03 {
  width: 78.9%;
  margin-inline: auto;
  margin-top: clamp(36px, 9.6vw, 72px);
}
.brainwave_block_01 .obj_04 {
  margin-top: clamp(22px, 5.8666666667vw, 44px);
}

/*==============================
	balance_block_01
===============================*/
.balance_block_01 {
  position: relative;
  margin-top: clamp(28px, 7.4666666667vw, 56px);
  z-index: 0;
}
.balance_block_01 .obj_01 {
  position: relative;
  width: 89.6%;
  margin-inline: auto;
  z-index: 10;
}
.balance_block_01 .obj_02 {
  position: relative;
  margin-top: calc(-1 * clamp(50px, 13.3333333333vw, 100px));
  z-index: 5;
}
.balance_block_01 .obj_03 {
  position: relative;
  margin-top: calc(-1 * clamp(84px, 22.4vw, 168px));
  z-index: 3;
}
.balance_block_01 .obj_04 {
  position: relative;
  width: 89%;
  margin-inline: auto;
  margin-top: calc(-1 * clamp(26px, 6.9333333333vw, 52px));
  z-index: 3;
}

/*==============================
	point_block_01
===============================*/
.point_block_01 {
  margin-top: clamp(22px, 5.8666666667vw, 44px);
}
.point_block_01 .obj_02 {
  margin-top: clamp(22px, 5.8666666667vw, 44px);
}

/*==============================
	cta_block_01
===============================*/
.cta_block_01 {
  padding-top: clamp(24px, 6.4vw, 48px);
  padding-bottom: clamp(45px, 12vw, 90px);
}
.cta_block_01 .obj_01 {
  width: 54.94%;
  margin-inline: auto;
}
.cta_block_01 .block_btnwrap_01 {
  width: 89.6%;
  margin-top: clamp(22px, 5.8666666667vw, 44px);
  margin-inline: auto;
}
.cta_block_01 .block_btnwrap_01 a.btn {
  display: block;
  margin-top: clamp(13px, 3.4666666667vw, 26px);
}
.cta_block_01.no_top {
  padding-top: 0;
}

/*==============================
	voice_block_01
===============================*/
.voice_block_01 {
  padding-bottom: clamp(50px, 13.3333333333vw, 100px);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(247, 236, 218)), color-stop(96%, rgb(247, 236, 218)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(180deg, rgb(247, 236, 218) 0%, rgb(247, 236, 218) 96%, rgba(255, 255, 255, 0) 100%);
}
.voice_block_01 .ttl_02 {
  width: 51.74%;
  margin-inline: auto;
  margin-top: clamp(24px, 6.4vw, 48px);
  margin-bottom: clamp(20px, 5.3333333333vw, 40px);
}
.voice_block_01 .ttl_03 {
  width: 25.07%;
  margin-inline: auto;
  margin-top: clamp(38px, 10.1333333333vw, 76px);
  margin-bottom: clamp(20px, 5.3333333333vw, 40px);
}
.voice_block_01 .card_01 {
  width: 89.06%;
  margin-inline: auto;
}
.voice_block_01 .card_01 + .card_01 {
  margin-top: clamp(24px, 6.4vw, 48px);
}
.voice_block_01.user .ttl_02 {
  width: 41.74%;
  margin-inline: auto;
  margin-top: clamp(28px, 7.4666666667vw, 56px);
  margin-bottom: clamp(20px, 5.3333333333vw, 40px);
}

/*==============================
	secret_block_01
===============================*/
.secret_block_01 {
  padding-top: clamp(12px, 3.2vw, 24px);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(234, 229, 232)), color-stop(95%, rgb(234, 229, 232)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(180deg, rgb(234, 229, 232) 0%, rgb(234, 229, 232) 95%, rgba(255, 255, 255, 0) 100%);
}
.secret_block_01 .inventor_ttl_01 {
  width: 89.06%;
  margin-inline: auto;
  margin-top: clamp(48px, 12.8vw, 96px);
}
.secret_block_01 .box_01 {
  position: relative;
  width: 89.06%;
  margin-inline: auto;
  background: url(./images/waku_01_tl.svg) top left no-repeat, url(./images/waku_01_tr.svg) top right no-repeat, url(./images/waku_01_bl.svg) bottom left no-repeat, url(./images/waku_01_br.svg) bottom right no-repeat;
  background-size: 15.5% auto;
  background-color: #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.secret_block_01 .box_01.inventor {
  margin-top: clamp(38px, 10.1333333333vw, 76px);
  padding-block: clamp(25px, 6.6666666667vw, 50px) clamp(58px, 15.4666666667vw, 116px);
}
.secret_block_01 .box_01.inventor .inventor_obj_01 {
  width: 92%;
  margin-inline: auto;
}
.secret_block_01 .box_01.inventor .inventor_obj_02 {
  width: 83.5%;
  margin-inline: auto;
  margin-top: clamp(30px, 8vw, 60px);
}
.secret_block_01 .box_01.inventor .inventor_obj_03 {
  width: 86%;
  margin-inline: auto;
  margin-top: clamp(36px, 9.6vw, 72px);
}
.secret_block_01 .box_01.inventor .inventor_obj_04 {
  width: 85.5%;
  margin-inline: auto;
  margin-top: clamp(36px, 9.6vw, 72px);
}
.secret_block_01 .box_01.developer {
  margin-top: clamp(33px, 8.8vw, 66px);
  padding-block: clamp(40px, 10.6666666667vw, 80px) clamp(50px, 13.3333333333vw, 100px);
}
.secret_block_01 .box_01.developer .developer_obj_01 {
  width: 92%;
  margin-inline: auto;
}
.secret_block_01 .box_01.developer .developer_obj_02 {
  width: 87%;
  margin-inline: auto;
  margin-top: clamp(12px, 3.2vw, 24px);
  -webkit-transform: translate(-2.8%, 0);
      -ms-transform: translate(-2.8%, 0);
          transform: translate(-2.8%, 0);
}
.secret_block_01 .box_01.developer .developer_obj_03 {
  width: 88.55%;
  margin-inline: auto;
  margin-top: clamp(32px, 8.5333333333vw, 64px);
}
.secret_block_01 .box_01.recommender {
  margin-top: clamp(28px, 7.4666666667vw, 56px);
  padding-block: clamp(38px, 10.1333333333vw, 76px) clamp(66px, 17.6vw, 132px);
}
.secret_block_01 .box_01.recommender .recommender_obj_01 {
  width: 92%;
  margin-inline: auto;
}
.secret_block_01 .box_01.recommender .recommender_obj_02 {
  width: 86%;
  margin-inline: auto;
  margin-top: clamp(18px, 4.8vw, 36px);
}
.secret_block_01 .box_01.recommender .recommender_obj_03 {
  width: 85.4%;
  margin-inline: auto;
  margin-top: clamp(38px, 10.1333333333vw, 76px);
}
.secret_block_01 .developer_ttl_01 {
  width: 89.06%;
  margin-inline: auto;
  margin-top: clamp(77px, 20.5333333333vw, 154px);
}
.secret_block_01 .secret_obj_01 {
  width: 89.06%;
  margin-inline: auto;
  margin-top: clamp(64px, 17.0666666667vw, 128px);
}
.secret_block_01 .recommender_ttl_01 {
  width: 89.06%;
  margin-inline: auto;
  margin-top: clamp(66px, 17.6vw, 132px);
}
.secret_block_01 .item_obj_01 {
  margin-top: clamp(58px, 15.4666666667vw, 116px);
}

/*==============================
	experience_block_01
===============================*/
.experience_block_01 {
  padding-bottom: clamp(50px, 13.3333333333vw, 100px);
}
.experience_block_01 .obj_02 {
  width: 80.53%;
  margin-inline: auto;
  margin-top: clamp(27px, 7.2vw, 54px);
  -webkit-transform: translate(-2.2%, 0);
      -ms-transform: translate(-2.2%, 0);
          transform: translate(-2.2%, 0);
}
.experience_block_01 .obj_03 {
  width: 89.6%;
  margin-inline: auto;
  margin-top: clamp(35px, 9.3333333333vw, 70px);
}
.experience_block_01 .obj_04 {
  margin-inline: auto;
  margin-top: calc(-1 * clamp(50px, 13.3333333333vw, 100px));
}
.experience_block_01 .obj_05 {
  margin-inline: auto;
  margin-top: calc(-1 * clamp(50px, 13.3333333333vw, 100px));
}
.experience_block_01 .obj_06 {
  width: 89.6%;
  margin-inline: auto;
  margin-top: clamp(18px, 4.8vw, 36px);
}

/*==============================
	howto_block_01
===============================*/
/*==============================
	price_block_01
===============================*/
.price_block_01 {
  margin-top: clamp(30px, 8vw, 60px);
  margin-bottom: clamp(20px, 5.3333333333vw, 40px);
}

/*==============================
	faq_block_01
===============================*/
.faq_block_01 {
  padding-top: clamp(20px, 5.3333333333vw, 40px);
  padding-bottom: clamp(40px, 10.6666666667vw, 80px);
  background-color: #eae5e8;
}
.faq_block_01 .ttl_01 {
  width: 36%;
  margin-inline: auto;
  margin-bottom: clamp(32px, 8.5333333333vw, 64px);
}
.faq_block_01 .box_01 {
  width: 89%;
  margin-inline: auto;
}
.faq_block_01 .box_01 .box_ttl_01 {
  margin-bottom: clamp(13px, 3.4666666667vw, 26px);
}
.faq_block_01 .box_01 .card_01 + .card_01 {
  margin-top: clamp(11px, 2.9333333333vw, 22px);
}
.faq_block_01 .box_01 + .box_01 {
  margin-top: clamp(40px, 10.6666666667vw, 80px);
}

/*==============================
	proof_block_01
===============================*/
.proof_block_01 {
  padding-bottom: clamp(40px, 10.6666666667vw, 80px);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(234, 229, 232)), color-stop(80%, rgb(234, 229, 232)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(180deg, rgb(234, 229, 232) 0%, rgb(234, 229, 232) 80%, rgba(255, 255, 255, 0) 100%);
}
.proof_block_01 .obj_01 {
  width: 89%;
  margin-inline: auto;
  margin-bottom: clamp(22px, 5.8666666667vw, 44px);
}

/*==============================
	cta_block_02
===============================*/
.cta_block_02 {
  margin-top: calc(-1 * clamp(46px, 12.2666666667vw, 92px));
  padding-bottom: clamp(30px, 8vw, 60px);
}
.cta_block_02 .obj_01 {
  width: 54.94%;
  margin-inline: auto;
  margin-top: clamp(28px, 7.4666666667vw, 56px);
}
.cta_block_02 .block_btnwrap_01 {
  width: 89.6%;
  margin-top: clamp(22px, 5.8666666667vw, 44px);
  margin-inline: auto;
}
.cta_block_02 .block_btnwrap_01 a.btn {
  display: block;
  margin-top: clamp(13px, 3.4666666667vw, 26px);
}

/*==============================
	other_btn_block_01
===============================*/
.other_btn_block_01 .block_btnwrap_01 {
  width: 89.6%;
  margin-inline: auto;
}
.other_btn_block_01 .block_btnwrap_01 a.btn {
  display: block;
  margin-top: clamp(11px, 2.9333333333vw, 22px);
}

/*==============================
	fix_foot_btnwrap
===============================*/
.fix_foot_btnwrap {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  padding-block: clamp(11px, 2.9333333333vw, 22px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #ffffff;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: 999;
}
.fix_foot_btnwrap .block_btnwrap_01 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2%;
  max-width: 668px;
  width: 89%;
  margin-inline: auto;
}
/* 2カラム（LINE登録ボタンなし）… simple.html 用 */
.fix_foot_btnwrap.col02 .block_btnwrap_01 {
  grid-template-columns: 1fr 1fr;
}

/*==============================
	copy
===============================*/
.copy {
  display: block;
  font-size: 12px;
  text-align: center;
  padding-top: clamp(44px, 11.7333333333vw, 88px);
  padding-bottom: clamp(106px, 28.2666666667vw, 212px);
}

/*==============================
	視聴ページ
===============================*/
/*==============================
	section-trial-hero
===============================*/
.section-trial-hero {
  background: url(./images/trial/trial_bg_01_blue.webp) center top no-repeat;
  background-size: 100% auto;
}
@media (width <= 750px) {
  .section-trial-hero {
    background: url(./images/trial/trial_bg_01_blue_sp.svg) center top 80px no-repeat;
    background-size: 100% auto;
  }
}
.section-trial-hero .hero-head {
  padding-top: 80px;
}
@media (width <= 750px) {
  .section-trial-hero .hero-head {
    padding-top: 40px;
  }
}
.section-trial-hero .hero-head .hero-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--color-red-01);
  gap: 20px;
}
@media (width <= 750px) {
  .section-trial-hero .hero-head .hero-title {
    display: block;
    text-align: center;
  }
}
.section-trial-hero .hero-head .hero-title .num {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 137%;
  font-weight: var(--font-weight-Medium);
  font-family: "Noto Sans JP";
  -webkit-transform: translate(0, 6.5%);
      -ms-transform: translate(0, 6.5%);
          transform: translate(0, 6.5%);
  line-height: 1;
}
.section-trial-hero .hero-head .hero-title .titl-txt {
  font-size: clamp(34px, 3.6666666667vw, 44px);
  font-family: "Noto Serif JP", serif;
  font-weight: var(--font-weight-SemiBold);
  letter-spacing: 0.1em;
}
@media (width <= 750px) {
  .section-trial-hero .hero-head .hero-title .titl-txt {
    font-size: clamp(30px, 8vw, 34px);
    line-height: 1.25;
  }
}
.section-trial-hero .hero-head .hero-title .logo {
  width: clamp(230px, 22.75vw, 273px);
  -webkit-transform: translate(0, 9.5%);
      -ms-transform: translate(0, 9.5%);
          transform: translate(0, 9.5%);
}
@media (width <= 750px) {
  .section-trial-hero .hero-head .hero-title .logo {
    width: clamp(205px, 54.6666666667vw, 235px);
    margin-inline: auto;
    -webkit-transform: translate(0);
        -ms-transform: translate(0);
            transform: translate(0);
  }
}
.section-trial-hero .hero-head .hero-sub {
  margin-top: 16px;
  font-size: clamp(16px, 1.6666666667vw, 20px);
  font-weight: var(--font-weight-Bold);
  color: var(--color-red-01);
  text-align: center;
  letter-spacing: 0.1em;
}
@media (width <= 750px) {
  .section-trial-hero .hero-head .hero-sub {
    margin-top: 24px;
    font-size: clamp(19px, 5.0666666667vw, 20px);
  }
}
.section-trial-hero .hero-main {
  position: relative;
  margin-top: 10px;
}
@media (width <= 750px) {
  .section-trial-hero .hero-main {
    margin-top: -5px;
  }
}
.section-trial-hero .hero-main .hero-copy {
  position: relative;
  z-index: 2;
}
.section-trial-hero .hero-main .hero-copy .device {
  display: block;
  margin-inline: auto;
  width: clamp(320px, 30vw, 360px);
}
.section-trial-hero .hero-main .hero-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 920px;
  margin-inline: auto;
  padding-inline: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 0;
}
@media (width <= 750px) {
  .section-trial-hero .hero-main .hero-visual {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}
.section-trial-hero .hero-main .hero-visual .lead {
  position: relative;
  margin-top: 20px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(14px, 1.3333333333vw, 16px);
  font-weight: var(--font-weight-Medium);
  white-space: nowrap;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 2.375;
  color: #000000;
  text-align: center;
  z-index: 5;
}
.section-trial-hero .hero-main .hero-visual .woman {
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(800px, 82vw, 984px);
  -webkit-transform: translate(14.5%, -46.5%);
      -ms-transform: translate(14.5%, -46.5%);
          transform: translate(14.5%, -46.5%);
  z-index: 1;
}
@media (width <= 750px) {
  .section-trial-hero .hero-main .hero-visual .woman {
    position: static;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    -webkit-transform: translate(0);
        -ms-transform: translate(0);
            transform: translate(0);
  }
}
.section-trial-hero .hero-main::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -6.5%;
  background: url(./images/trial/trial_bg_01_green.webp) center center no-repeat;
  background-size: contain;
  aspect-ratio: 1100/562;
  width: clamp(700px, 91.6666666667vw, 1300px);
  max-width: none;
  -webkit-transform: translate(0, 54.5%);
      -ms-transform: translate(0, 54.5%);
          transform: translate(0, 54.5%);
  z-index: 0;
}
@media (width <= 750px) {
  .section-trial-hero .hero-main::before {
    left: -9%;
    bottom: clamp(250px, 66.6666666667vw, 280px);
    -webkit-transform: translate(-10%, 54, 5%);
        -ms-transform: translate(-10%, 54, 5%);
            transform: translate(-10%, 54, 5%);
  }
}
.section-trial-hero .hero-foot {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 780px;
  margin-top: 250px;
  margin-inline: auto;
  padding: 0px 55px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: clamp(14px, 1.5555555556vw, 14px);
  font-weight: var(--font-weight-Medium);
  line-height: 1.72;
  letter-spacing: 0.1em;
}
@media (width <= 750px) {
  .section-trial-hero .hero-foot {
    max-width: calc(100% - 40px);
    margin-top: 40px;
    padding: 0px 40px;
  }
}
.section-trial-hero .hero-foot .bracket {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 100%;
  border: 2px solid var(--color-blue-01);
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.section-trial-hero .hero-foot .bracket.before {
  left: 0;
  border-right: none;
}
.section-trial-hero .hero-foot .bracket.after {
  right: 0;
  border-left: none;
}

/*==============================
	section-trial-guide
===============================*/
.bg_green_01 {
  position: relative;
  margin-top: -18px;
  padding-top: 80px;
  background: url(./images/trial/trial_bg_02_green.webp) center top no-repeat;
  background-size: cover;
}
@media (width <= 750px) {
  .bg_green_01 {
    padding-top: 80px;
  }
}
.bg_green_01::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #F8FCF1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(248, 252, 241)), to(rgb(255, 255, 255)));
  background: linear-gradient(180deg, rgb(248, 252, 241) 0%, rgb(255, 255, 255) 100%);
  z-index: 0;
}

.section-trial-guide {
  padding-inline: 20px;
}
.section-trial-guide .section-sub {
  margin-top: 20px;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: var(--font-weight-SemiBold);
  letter-spacing: 0.1em;
  color: #000000;
  text-align: center;
}
.section-trial-guide .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 825px;
  margin-top: 30px;
  margin-inline: auto;
}
@media (width <= 750px) {
  .section-trial-guide .grid {
    max-width: 480px;
    grid-template-columns: 1fr;
  }
}
.section-trial-guide .grid-card {
  padding: 40px 0 38px;
  border-radius: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 11px 1px rgba(140, 169, 71, 0.21);
          box-shadow: 0 0 11px 1px rgba(140, 169, 71, 0.21);
}
.section-trial-guide .grid-card .card-title {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: var(--font-weight-Bold);
  color: var(--color-blue-01);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.44;
}
.section-trial-guide .grid-card .icon {
  display: grid;
  place-content: center;
  place-items: center;
  margin: 32px auto 40px;
}
.section-trial-guide .grid-card .card-txt {
  font-size: clamp(14px, 1.3333333333vw, 16px);
  font-weight: var(--font-weight-Medium);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  color: #000000;
}
.section-trial-guide .grid-card.notice {
  padding-inline: clamp(30px, 3.3333333333vw, 40px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.section-trial-guide .grid-card.notice .card-title {
  font-size: clamp(24px, 2.6666666667vw, 32px);
  font-family: "Noto Serif JP", serif;
  font-weight: var(--font-weight-Bold);
}
.section-trial-guide .grid-card.notice .card-txt {
  margin-top: 28px;
  text-align: left;
  line-height: 1.75;
}
.section-trial-guide .grid-card:nth-of-type(1) .icon img {
  width: clamp(180px, 17.9166666667vw, 215px);
}
.section-trial-guide .grid-card:nth-of-type(2) .icon img {
  width: clamp(180px, 17.5833333333vw, 211px);
}
.section-trial-guide .grid-card:nth-of-type(3) .icon img {
  width: clamp(64px, 7vw, 84px);
}
.section-trial-guide .grid-card:nth-of-type(4) .icon img {
  width: clamp(155px, 15.4166666667vw, 185px);
}
.section-trial-guide .grid-card:nth-of-type(5) .icon img {
  width: clamp(180px, 17.5vw, 210px);
}

/*==============================
	section-trial-howto
===============================*/
.section-trial-howto {
  position: relative;
  margin-top: 65px;
  z-index: 1;
}
.section-trial-howto .howto {
  max-width: 700px;
  margin-top: 40px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (width <= 750px) {
  .section-trial-howto .howto {
    max-width: 480px;
  }
}
.section-trial-howto .howto .step {
  padding: 10px 8px;
  background: #ffffff;
  font-size: clamp(14px, 1.3333333333vw, 16px);
  font-weight: var(--font-weight-Medium);
  color: #000000;
  line-height: 1.65;
  letter-spacing: 0.1em;
  text-align: center;
  -webkit-box-shadow: 0 0 6px 1px rgba(140, 169, 71, 0.21);
          box-shadow: 0 0 6px 1px rgba(140, 169, 71, 0.21);
}
.section-trial-howto .howto .step + .step {
  margin-top: 10px;
}

/*==============================
	area-video-frame
===============================*/
.area-video-frame {
  margin-top: 50px;
  margin-inline: auto;
  margin-bottom: 23px;
  max-width: 1080px;
  height: calc(80px + clamp(380px, 56.6666666667vw, 540px));
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (width <= 750px) {
  .area-video-frame {
    margin-top: 20px;
    height: calc(80px + clamp(270px, 72vw, 540px));
  }
}

/*==============================
	trial-cta-block
===============================*/
.trial-cta-block .cta-txt {
  font-size: clamp(14px, 1.3333333333vw, 16px);
  font-weight: var(--font-weight-Medium);
  letter-spacing: 0.1em;
  line-height: 1.88;
  color: #000000;
  text-align: center;
}
.trial-cta-block .cta-txt::before {
  content: "";
  display: block;
  width: clamp(30px, 3.3333333333vw, 40px);
  aspect-ratio: 40/56;
  margin-bottom: 10px;
  margin-inline: auto;
  background: url(./images/trial/i_leaf_01.webp) center center no-repeat;
  background-size: contain;
}
.trial-cta-block .cta-actions {
  margin-top: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 26px;
}
.trial-cta-block .cta-actions a.btn {
  display: block;
  width: clamp(300px, 28vw, 336px);
}

.trial .footer {
  margin-top: 50px;
}
.trial .footer .company {
  font-size: clamp(18px, 1.6666666667vw, 20px);
  font-weight: var(--font-weight-Bold);
  color: var(--color-green-02);
  text-align: center;
}
.trial .footer .brand {
  margin-top: 20px;
  width: clamp(200px, 18.5vw, 222px);
  margin-inline: auto;
}
.trial .footer .copy {
  display: block;
  margin-top: 26px;
  font-size: clamp(10px, 1vw, 12px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 0 15px;
}/*# sourceMappingURL=style.css.map */