@charset "UTF-8";

@function cr($num) { @return #{$num / 16}rem; }
@function cv($num) { @return #{100 * $num / 750}vw; }
@mixin tb {
	@media (max-width: 1140px) { @content; }
}
@mixin sp {
	@media (max-width: 768px) { @content; }
}
@mixin hover {
	@media (any-hover: hover) { @content; }
}
:root {
	--bk: #000;
	--bk00: rgba(0,0,0,0);
	--bk05: rgba(0,0,0,.05);
	--bk10: rgba(0,0,0,.10);
	--bk15: rgba(0,0,0,.15);
	--bk20: rgba(0,0,0,.20);
	--bk25: rgba(0,0,0,.25);
	--bk30: rgba(0,0,0,.30);
	--bk35: rgba(0,0,0,.35);
	--bk40: rgba(0,0,0,.40);
	--bk45: rgba(0,0,0,.45);
	--bk50: rgba(0,0,0,.50);
	--bk55: rgba(0,0,0,.55);
	--bk60: rgba(0,0,0,.60);
	--bk65: rgba(0,0,0,.65);
	--bk70: rgba(0,0,0,.70);
	--bk75: rgba(0,0,0,.75);
	--bk80: rgba(0,0,0,.80);
	--bk85: rgba(0,0,0,.85);
	--bk90: rgba(0,0,0,.90);
	--bk95: rgba(0,0,0,.95);
	--wh: #fff;
	--wh00: rgba(255,255,255,0);
	--wh05: rgba(255,255,255,.05);
	--wh10: rgba(255,255,255,.10);
	--wh15: rgba(255,255,255,.15);
	--wh20: rgba(255,255,255,.20);
	--wh25: rgba(255,255,255,.25);
	--wh30: rgba(255,255,255,.30);
	--wh35: rgba(255,255,255,.35);
	--wh40: rgba(255,255,255,.40);
	--wh45: rgba(255,255,255,.45);
	--wh50: rgba(255,255,255,.50);
	--wh55: rgba(255,255,255,.55);
	--wh60: rgba(255,255,255,.60);
	--wh65: rgba(255,255,255,.65);
	--wh70: rgba(255,255,255,.70);
	--wh75: rgba(255,255,255,.75);
	--wh80: rgba(255,255,255,.80);
	--wh85: rgba(255,255,255,.85);
	--wh90: rgba(255,255,255,.90);
	--wh95: rgba(255,255,255,.95);
  --text: #494949;
	--red: #da0814;
  --blue: #114abd;
  --bg: #fcf9f0;
}

/* Slider */

.slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}
.slick-list {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0;
	padding: 0;
	&:focus { outline: none; }
	&.dragging {
		cursor: pointer;
		cursor: hand;
	}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
	transform: translate3d(0, 0, 0);
}
.slick-track {
	position: relative;
	left: 0;
	top: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
	&:before,
	&:after {
		content: '';
		display: table;
	}
	&:after { clear: both; }
	.slick-loading & { visibility: hidden; }
}
.slick-slide {
	float: left;
	height: 100%;
	min-height: 1px;
	[dir="rtl"] & { float: right; }
	img { display: block; }
	&.slick-loading img { display: none; }
	display: none;
	&.dragging img { pointer-events: none; }
	.slick-initialized & { display: block; }
	.slick-loading & { visibility: hidden; }
	.slick-vertical & {
		display: block;
		height: auto;
		border: 1px solid transparent;
	}
}
.slick-arrow.slick-hidden {
	display: none;
}


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

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
  &:after, &:before {
    content: '';
    content: none;
  }
}

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

@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

html, body {
  font-size: cr(16);
	@include tb { font-size: 1.4035vw; }
  * {
    box-sizing: border-box;
    letter-spacing: -.03em;
    &::before, &::after { box-sizing: border-box; }
  }
}

body {
  color: var(--text);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg);
  @include sp { height: 100%; }
  &::-webkit-scrollbar { width: cr(4); }
  &::-webkit-scrollbar-track { background-color: var(--bk10); }
  &::-webkit-scrollbar-thumb { background-color: var(--bk30); }
}

::selection {
	color: var(--wh);
	background-color: var(--text);
}

a {
	outline: none !important;
	transition: all .5s cubic-bezier(.2,1,.2,1);
}
a:link, a:visited {
	color: #393939;
	text-decoration: underline;
}
a:focus, a:active {
	color: var(--bk70);
	text-decoration: none;
}
@include hover {
	a:hover {
		color: var(--bk70);
		text-decoration: none;
	}
}

img {
	max-width: 100%;
  height: auto;
	vertical-align: text-bottom;
  @include sp { width: auto; }
}

sup { vertical-align: super; font-size: 60%; }

.wrap{
  overflow-x: hidden;
}

.inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: cr(1140);
  margin: 0 auto;
  padding: 0 cr(20);
  @include sp {
    max-width: none;
    padding: 0;
  }
}

.header {
  display: block;
  padding: 0;
  background-color: #fff;
  h1 {
    padding: cr(20);
    @include sp {
      padding: cv(20); 
    }
    img {
      height: 44px;
      width: auto;
      @include sp { height: cv(43); }
    }
  }
  &::before {
    content: "";
    display: block;
    height: 16px;
    background: url('../images/cmn_ex01_01.svg') center top / 100% auto no-repeat;
    @include sp {
      height: 8px;
      background: url('../images/cmn_ex01_01_sp.svg') center top / cover no-repeat;
    }
  }
}

.overlay {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(57,57,57,.7);
}

.gnav-toggle {
  cursor: pointer;
  position: fixed;
  top: cr(24);
  right: cr(24);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: cr(6);
  width: cr(100);
  height: cr(100);
  border-radius: 50%;
  background: #242424;
  transition: right .5s cubic-bezier(.2,1,.2,1), background-color .5s cubic-bezier(.2,1,.2,1);
  @include sp {
    gap: cv(6);
    top: cv(24);
    right: cv(20);
    width: cv(100);
    height: cv(100);
  }
  .lines {
    position: relative;
    width: cr(70);
    height: cr(28);
    @include sp {
      width: cv(70);
      height: cv(28);
    }
    span {
      position: absolute;
      width: 100%;
      height: cr(4);
      border-radius: cr(2);
      background-color: var(--wh);
      transition: transform .5s cubic-bezier(.2,1,.2,1);
      @include sp {
        border-radius: cv(3);
        height: cv(6);
      }
      &:nth-child(1) {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
      }
      &:nth-child(2) {
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
      &:nth-child(3) {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  &::after {
    color: var(--wh);
    content: "もくじ";
    display: block;
    font-size: cr(20);
    font-weight: 700;
    transform: rotateZ(.03deg);
    @include sp { font-size: cv(20); }
  }
  &.active {
    right: cr(300);
    background: transparent;
    @include sp { right: cv(600); }
    .lines {
      height: cr(50);
      @include sp { height: cv(50); }
      span {
        width: 90%;
        &:nth-child(1) {
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) rotate(135deg);
        }
        &:nth-child(2) {
          opacity: 0;
        }
        &:nth-child(3) {
          bottom: 50%;
          left: 50%;
          transform: translate(-50%, 50%) rotate(-135deg);
        }
      }
    }
    &::after { content: "とじる"; }
  }
}

.gnav {
  position: fixed;
  top: 0;
  right: cr(-300);
  z-index: 100;
  width: cr(300);
  height: 100%;
  overflow-y: auto;
  background: #f0ead6;
  transition: right .5s cubic-bezier(.2,1,.2,1);
  @include sp {
    right: cv(-600);
    width: cv(600);
  }
  &::-webkit-scrollbar { width: cr(4); }
  &::-webkit-scrollbar-track { background-color: var(--bk10); }
  &::-webkit-scrollbar-thumb { background-color: var(--bk30); }
  &.active { right: 0; }
}

.gnav-inner {
  display: flex;
  flex-direction: column;
  gap: cr(30);
  padding: cr(40) cr(10);
  @include sp {
    gap: cv(40);
    padding: cv(60) cv(20);
  }
  ul {
    border-top: 1px solid #8c8c8c;
    width: 100%;
    li {
      border-bottom: 1px solid #8c8c8c;
      a {
        display: block;
        padding: cr(14) cr(10);
        @include sp { padding: cv(24) cv(20); }
        @include hover {
          &:hover { background-color: rgba(0,0,0,.05); }
        }
        span {
          display: inline-block;
          font-size: cr(20);
          font-weight: 700;
          line-height: 1.42;
          background: linear-gradient(transparent 60%, #fcf8ee 0);
          transform: rotateZ(.03deg);
          @include sp { font-size: cv(36); }
        }
      }
    }
  }
  .btns {
    display: flex;
    flex-direction: column;
    gap: cr(10);
    @include sp { gap: cv(30); }
    .balloon {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-bottom: cr(20);
      padding: cr(10) cr(10) cr(8);
      border-radius: cr(30);
      background-color: #ffff00;
      @include sp {
        margin-bottom: cv(20);
        padding: cv(15) cv(15) cv(11);
        border-radius: cv(40);
      }
      &::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0;
        height: 0;
        border-width: cr(16) cr(11) 0 cr(11);
        border-style: solid;
        border-color: #ffff00 transparent transparent transparent;
        transform: translateX(-50%);
        @include sp { border-width: cv(24) cv(16) 0 cv(16); }
      }
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: cr(18);
        font-weight: 700;
        transform: rotateZ(.03deg);
        @include sp { font-size: cv(36); }
        strong {
          margin-bottom: .125em;
          font-size: 1.5em;
        }
      }
    }
    .btn {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: cr(74);
      border-radius: cr(10);
      @include sp {
        height: cv(140);
        border-radius: cv(32);
      }
      @include hover {
        &:hover::after { right: cr(9); }
      }
      &::before {
        content: '';
        display: block;
        width: 100%;
        height: cr(32);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        @include sp { height: cv(64); }
      }
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: cr(14);
        width: cr(18);
        height: cr(18);
        background: url('../images/btn_arrow.svg') no-repeat 50% 50%;
        background-size: contain;
        transform: translateY(-50%);
        transition: .3s;
        @include sp {
          right: cv(28);
          width: cv(36);
          height: cv(36);
        }
      }
      &.basic {
        background: #2ea7e0;
        box-shadow: 0 cr(6) 0 #187dac;
        @include sp { box-shadow: 0 cv(10) 0 #187dac; }
        &::before { background-image: url('../images/product_logo.svg'); }
      }
      &.light {
        background: #e60012;
        box-shadow: 0 cr(6) 0 #bd050f;
        @include sp { box-shadow: 0 cv(10) 0 #bd050f; }
        &::before { background-image: url('../images/product_logo_light.svg'); }
      }
    }
  }
}

.footer {
  background-color: var(--wh);
  padding-bottom: cr(120);
  .no1 {
    // background-color: #e3e1e2;
    .notes {
      padding: cr(10) 0;
      font-size: cr(14);
      text-align: center;
      background-color: #e3e1e2;
    @include sp {
        padding: cv(15) cv(40);
        font-size: cv(18);
        text-align: left;
      }
    }
  }
  .greeting {
    @include sp { background: var(--wh); }
    h2 {
      background: linear-gradient(90deg,#eee 50%,#fff 51%);
      @include sp {
        background: url('../images/greeting_bg_sp.png') left top / 100% auto repeat-y;
        padding-top: cv(100);
      }
    }
    .text {
      display: flex;
      flex-direction: column;
      gap: cr(30);
      width: 100%;
      max-width: cr(900);
      margin: 0 auto;
      padding: cr(70) 0;
      @include sp {
        gap: cv(30);
        max-width: none;
        padding: cv(40) cv(30) cv(50);
      }
      p {
        font-family: 'Noto Serif JP', serif;
        font-size: cr(16);
        font-weight: 600;
        letter-spacing: .05em;
        line-height: 1.7;
        @include sp { font-size: cv(26); }
      }
    }
  }
  .menu {
    background-color: var(--bk05);
    padding: cr(14) 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-feature-settings: "palt";
    @include sp { padding: cv(30) 0; }
    .inner {
      gap: cr(10);
      @include sp { gap: cv(20); }
      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        @include sp {
          flex-direction: column;
          gap: cv(10);
        }
        li {
          padding: 0 cr(20);
          font-size: cr(15);
          line-height: 1.5;
          @include sp {
            padding: 0;
            font-size: cv(30);
          }
          & + li {
            border-left: 2px solid var(--bk60);
            @include sp { border-left: 0 none; }
          }
          a { color: var(--bk60); }
        }
      }
      .info {
        color: var(--bk60);
        font-size: cr(12);
        line-height: 1.5;
        @include sp {
          font-size: cv(24);
          text-align: center;
        }
        &::before {
          content: "※";
        }
      }
    }
  }
  .lower {
    padding: cr(20) 0;
    @include sp { padding: cv(40) cv(30); }
    .inner {
      gap: cr(20);
      max-width: cr(860);
      @include sp {
        gap: cv(20);
        max-width: none;
      }
    }
    .comment {
      padding-left: 1.01em;
      text-indent: -1.01em;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: cr(14);
      font-weight: 400;
      font-feature-settings: "palt";
      line-height: 1.7;
      @include sp { font-size: cv(20); }
      &::before { content: "※"; }
    }
    .number {
      align-self: flex-end;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: cr(14);
      font-weight: 400;
      font-feature-settings: "palt";
      line-height: 1.7;
      text-align: right;
      @include sp { font-size: cv(20); }
    }
  }
  .copy {
    padding: cr(20) 0 cr(40);
    @include sp { padding: 0 0 cv(40); }
    p {
      font-size: cr(14);
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 400;
      font-feature-settings: "palt";
      line-height: 1.7;
      text-align: center;
      @include sp { font-size: cv(20); }
    }
  }
}

.floating {
  position: fixed;
  bottom: 0;
  left: calc(50% - 34.375rem);
  display: none;
  width: 100%;
  max-width: cr(1100);
  z-index: 98;
  @include sp { max-width: none; }
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: cr(8) cr(8) cr(5);
    font-size: cr(20);
    font-weight: 700;
    text-align: center;
    background-color: #ffff00;
    transform: rotateZ(.03deg);
    @include sp {
      padding: cv(8) cv(8) cv(2);
      font-size: cv(26);
    }
    strong {
      margin-bottom: .125em;
      font-size: 1.5em;
    }
  }
  .floating_cvr {
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: cr(16);
      width: 50%;
      height: cr(75);
      border-bottom-width: cr(10);
      border-style: solid;
      text-decoration: none;
      @include sp {
        gap: cv(16);
        height: cv(130);
        padding-top: cv(4);
        border-bottom-width: cv(12);
      }
      @include hover {
        &:hover {
          opacity: .8;
          &::after { right: cr(17); }
        }
      }
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: cr(22);
        width: cr(28);
        height: cr(28);
        background: url('../images/btn_arrow.svg') no-repeat 50% 50%;
        background-size: contain;
        transform: translateY(-50%);
        transition: .3s;
        @include sp { display: none; }
      }
      span {
        display: none;
        @include sp {
          display: block;
          color: var(--wh);
          font-size: cv(24);
          font-weight: 700;
          transform: rotateZ(.03deg);
        }
      }
      img {
        height: cr(40);
        width: auto;
        @include sp { height: cv(50); }
      }
      &.basic {
        background: #2ea7e0;
        border-color: #187dac;
      }
      &.light {
        background: #e60012;
        border-color: #bd050f;
      }
    }
  }
}

.cvr {
  padding: cr(90) 0 cr(110);
  @include sp { padding: cv(20) cv(30) cv(90); }
  .inner {
    gap: cr(20);
    @include sp { gap: cv(10); }
  }
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: cr(45);
    font-weight: 800;
    text-align: center;
    @include sp { font-size: cv(45); }
    &::before, &::after {
      content: '';
      width: .125em;
      height: 1em;
      border-radius: .25em;
      background-color: var(--bk70);
    }
    &::before { transform: translateX(-.35em) rotate(-30deg); }
    &::after { transform: translateX(.35em) rotate(30deg); }
    strong, span { color: var(--blue); }
    strong {
      margin-bottom: .125em;
      color: var(--blue);
      font-size: 1.5em;
    }
  }
  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    @include sp {
      flex-direction: column;
      justify-content: flex-start;
      gap: cv(20);
    }
    .btn {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: cr(16);
      width: cr(540);
      height: cr(160);
      border-radius: cr(26);
      text-decoration: none;
      @include sp {
        gap: cv(20);
        width: cv(690);
        height: cv(200);
        border-radius: cv(32);
      }
      @include hover {
        &:hover {
          opacity: .8;
          &::after { right: cr(17); }
        }
      }
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        right: cr(22);
        width: cr(28);
        height: cr(28);
        background: url('../images/btn_arrow.svg') no-repeat 50% 50%;
        background-size: contain;
        transform: translateY(-50%);
        transition: .3s;
        @include sp {
          right: cv(28);
          width: cv(34);
          height: cv(34);
        }
      }
      span {
        color: var(--wh);
        font-size: cr(24);
        font-weight: 700;
        transform: rotateZ(.03deg);
        @include sp { font-size: cv(30); }
      }
      img {
        height: cr(56);
        @include sp { height: cv(70); }
      }
      &.basic {
        background: #2ea7e0;
        box-shadow: 0 cr(10) 0 #187dac;
        @include sp { box-shadow: 0 cv(10) 0 #187dac; }
      }
      &.light {
        background: #e60012;
        box-shadow: 0 cr(10) 0 #bd050f;
        @include sp { box-shadow: 0 cv(10) 0 #bd050f; }
      }
    }
  }
}
.cvr.cvr02 {
  ul {
    .btn {
      position: relative;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 0;
      width: cr(540);
      height: cr(160);
      border-radius: cr(26);
      text-decoration: none;
      padding: cr(20) 0;
      @include sp {
        gap: cv(10);
        width: cv(690);
        height: cv(200);
        border-radius: cv(32);
        padding: cv(30) 0;
      }
      @include hover {
        &:hover {
          opacity: .8;
          &::after { right: cr(125); }
          @include sp { right: inherit; }
        }
      }
      &::after {
        content: '';
        position: absolute;
        top: cr(102);
        right: cr(130);
        width: cr(28);
        height: cr(28);
        background: url('../images/btn_arrow.svg') no-repeat 50% 50%;
        background-size: contain;
        transform: translateY(0%);
        transition: .3s;
        @include sp {
          right: cv(160);
          top: cv(130);
          width: cv(34);
          height: cv(34);
        }
      }
      span {
        color: var(--wh);
        font-size: cr(24);
        font-weight: 700;
        transform: rotateZ(.03deg);
        @include sp { font-size: cv(30); }
      }
      span + span {
        font-size: cr(30);
        @include sp { font-size: cv(40); }
      }
      img {
        height: cr(56);
        @include sp { height: cv(70); }
      }
      &.light {
        background: #e60012;
        box-shadow: 0 cr(10) 0 #bd050f;
        @include sp { box-shadow: 0 cv(10) 0 #bd050f; }
        img {
          height: cr(50);
          @include sp { height: cv(60); }
        }
        span {
          font-size: cr(20);
          @include sp { font-size: cv(25); }
        }
        span + span {
          font-size: cr(30);
          @include sp { font-size: cv(40); }
        }
      }
    }
    
  }
}
.notes {
  color: var(--bk60);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: cr(18);
  font-weight: 400;
  font-feature-settings: "palt";
  line-height: 1.5;
  letter-spacing: .05em;
  @include sp { font-size: cv(18); }
}

.mv {
  .notes {
    position: absolute;
    bottom: 0;
    left: cr(60);
    color: #454545;
    @include sp {
      position: relative;
      left: 0;
      margin: cv(4) cv(30);
    }
  }
}

.pet_tab {
  > .tab-head {
    position: relative;
    border-bottom: cr(22) solid #02359d;
    .inner {
      flex-direction: row;
      justify-content: space-between;
    }
    .tab-btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: cr(540);
      height: cr(123);
      border-radius: cr(17) cr(17) 0 0;
      color: var(--wh);
      font-size: cr(48);
      font-weight: 800;
      text-align: center;
      background-color: var(--bk30);
      @include sp {
        width: cv(370);
        height: cv(150);
        border-radius: cv(17) cv(17) 0 0;
        font-size: cv(48);
      }
      &.active {
        background-color: #3061c5;
        box-shadow: inset cr(-10) 0 0 #02359d;
      }
      strong { font-size: 1.35em; }
      small {
        @include sp { font-size: .75em; }
      }
    }
  }
}
.worries {
  position: relative;
  z-index: 50;
  /*overflow-x: clip;*/
  padding: cr(70) 0;
  background-color: var(--bg);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(50) 0 cv(70);
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--bg);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  .worries_ttl {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: cr(70);
    @include sp {
      flex-direction: column;
      align-items: center;
      gap: cv(10);
      margin-bottom: cv(40);
    }
    span {
      font-size: cr(60);
      font-weight: 800;
      @include sp { font-size: cv(60); }
      em { font-size: 1.3em; }
      strong { color: var(--blue); }
    }
  }
  .know_ttl {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: cr(20);
    margin-top: cr(30);
    @include sp {
      row-gap: cv(20);
      margin-top: cv(30);
    }
    &::before {
      content: '';
      position: absolute;
      bottom: calc(100% + 1.25rem);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: contain;
      @include sp { bottom: calc(100% + 1.0666vw); }
    }
    span {
      font-weight: 800;
      &:nth-child(1) {
        font-size: cr(70);
        @include sp { font-size: cv(60); }
      }
      &:nth-child(2) {
        font-size: cr(70);
        @include sp { font-size: cv(70); }
      }
      &:nth-child(3) {
        font-size: cr(80);
        @include sp { font-size: cv(80); }
      }
      strong { color: var(--blue); }
    }
  }
  .tab-body-cat {
    .know_ttl::before {
      left: cr(10);
      width: cr(256);
      height: cr(91);
      background-image: url('../images/know_ttl_cat.png');
      @include sp {
        left: cv(40);
        width: cv(256);
        height: cv(91);
      }
    }
  }
  .tab-body-dog {
    .know_ttl::before {
      left: cr(10);
      width: cr(185);
      height: cr(84);
      background-image: url('../images/know_ttl_dog.png');
      @include sp {
        left: cv(65);
        width: cv(185);
        height: cv(84);
      }
    }
  }
  .ranking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: cr(30);
    margin-top: cr(40);
    background-color: var(--wh);
    @include sp {
      gap: cv(30);
      width: cv(690);
      margin: cv(40) auto 0;
    }
    ul {
      width: cr(690);
      @include sp { width: cv(540); }
      li {
        display: flex;
        align-items: flex-end;
        padding: cr(15) 0 cr(15) cr(70);
        border-bottom: 2px solid var(--bk65);
        font-weight: 800;
        @include sp { padding: cv(15) 0 cv(15) cv(25); }
        .num {
          margin-right: cr(30);
          font-size: cr(48);
          line-height: 1.3;
          transform: rotateZ(.03deg);
          @include sp {
            margin-right: cv(30);
            font-size: cv(40);
          }
        }
        .item {
          padding: 0 .1em;
          font-size: cr(48);
          line-height: 1.3;
          background: linear-gradient(transparent 60%, #fff100 0);
          transform: rotateZ(.03deg);
          @include sp { font-size: cv(40); }
        }
        small {
          font-size: cr(36);
          line-height: 1.5;
          transform: rotateZ(.03deg);
          @include sp { font-size: cv(30); }
        }
      }
    }
    .notes {
      padding: 0 cr(40) cr(40);
      @include sp { padding: 0 cv(40) cv(25); }
    }
  }
}
.strengths {
  position: relative;
  z-index: 49;
  padding: cr(280) 0 cr(70);
  background-color: var(--wh);
  @include sp { padding: cv(140) 0 cv(40); }
  .inner {
    gap: cr(70);
    max-width: cr(1000);
    @include sp {
      gap: cv(60);
      max-width: none;
    }
  }
  .cover {
    display: flex;
    flex-direction: column;
    gap: cr(40);
    @include sp {
      gap: cv(20);
      padding: 0 cv(30);
    }
    .cover_ttl {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      row-gap: cr(20);
      font-weight: 800;
      @include sp {
        flex-direction: column;
        row-gap: cv(25);
        padding: cv(40) 0;
      }
      &::before, &::after {
        content: '';
        position: absolute;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: contain;
      }
      &::before {
        bottom: cr(45);
        left: cr(56);
        width: cr(76);
        height: cr(90);
        background-image: url('../images/kira01.svg');
        @include sp {
          bottom: 0;
          left: cv(15);
          width: cv(76);
          height: cv(90);
        }
      }
      &::after {
        top: cr(95);
        right: cr(32);
        width: cr(112);
        height: cr(110);
        background-image: url('../images/kira02.svg');
        @include sp {
          top: 0;
          right: cv(12);
          width: cv(112);
          height: cv(110);
        }
      }
      span {
        font-size: cr(52);
        @include sp { font-size: cv(52); }
      }
      strong {
        color: var(--blue);
        font-size: cr(80);
        @include sp { font-size: cv(70); }
      }
    }
  }
  .no1 {
    display: flex;
    flex-direction: column;
    gap: cr(40);
    @include sp {
      gap: cv(20);
      padding: 0 cv(30);
    }
    .no1_ttl {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 800;
      &::before, &::after {
        content: '';
        width: cr(90);
        height: cr(190);
        background: url('../images/laurel.svg') no-repeat 50% 50%;
        background-size: contain;
        @include sp {
          width: cv(90);
          height: cv(190);
        }
      }
      &::before {
        @include sp { transform: translateX(0%); }
      }
      &::after {
        transform: scale(-1,1);
        @include sp { transform: translateX(-0%) scale(-1,1); }
      }
      span {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: cr(10);
        padding: 0 cr(40);
        @include sp { gap: cv(10); padding: 0 cv(20); }
        em {
          font-size: cr(57);
          letter-spacing: 0.145em;
          @include sp { font-size: cv(57); letter-spacing: 0.185em; }
        }
        strong {
          color: var(--red);
          font-size: cr(147);
          @include sp { font-size: cv(147); }
        }
      }
    }
    h3 {
      font-size: cr(52);
      line-height: 1;
      font-weight: 800;
      padding-top: cr(40);
      @include sp {
        font-size: cv(52);
        line-height: 1.4;
        font-weight: 800;
        padding-top: cv(70);
      }
    }
    .notes {
      display: flex;
      flex-wrap: wrap;
      column-gap: cr(20);
      @include sp {
        flex-direction: column;
        column-gap: 0;
      }
      li {
        color: var(--bk60);
        font-family: 'Noto Sans JP', sans-serif;
        font-size: cr(18);
        font-weight: 400;
        font-feature-settings: "palt";
        line-height: 1.5;
        letter-spacing: .05em;
        @include sp { font-size: cv(18); }
      }
    }
  }
}
.reason {
  position: relative;
  z-index: 48;
  /*overflow-x: clip;*/
  padding: cr(70) 0;
  background-color: var(--wh);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(50) 0 cv(70);
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--wh);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  .inner {
    gap: cr(60);
    @include sp { gap: cv(60); }
  }
  .reason_ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: cr(54);
    font-weight: 800;
    @include sp { font-size: cv(50); }
  }
  .panels {
    display: flex;
    flex-direction: column;
    gap: cr(70);
    width: cr(1100);
    @include sp {
      gap: cv(50);
      width: cv(690);
    }
    .panel {
      .subject {
        position: relative;
        padding: cr(20);
        border: cr(3) solid #f0ead6;
        border-radius: cr(20) cr(20) 0 0;
        font-size: cr(36);
        font-weight: 800;
        text-align: center;
        background-color: #f0ead6;
        transform: rotateZ(.03deg);
        @include sp {
          padding: cv(20);
          border-width: cv(3);
          border-radius: cv(20) cv(20) 0 0;
          font-size: cv(36);
        }
        &::before {
          content: '';
          position: absolute;
          top: cr(-32);
          left: cr(15);
          width: cr(116);
          height: cr(68);
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: contain;
          @include sp {
            top: cv(-33);
            left: cv(-13);
            width: cv(116);
            height: cv(68);
          }
        }
      }
      .detail {
        position: relative;
        padding: cr(40) cr(60);
        border: cr(3) solid #f0ead6;
        border-radius: 0 0 cr(20) cr(20);
        background-color: var(--bg);
        @include sp {
          padding: cv(40) cv(30);
          border-width: cv(3);
          border-radius: 0 0 cv(20) cv(20);
        }
        &::after {
          content: '';
          position: absolute;
          background-repeat: no-repeat;
          background-position: 0 0;
          background-size: contain;
        }
        p {
          font-size: cr(26);
          font-weight: 500;
          line-height: 1.5;
          transform: rotateZ(.03deg);
          @include sp { font-size: cv(26); }
          strong {
            font-size: 1.1em;
            font-weight: 700;
            background: linear-gradient(transparent 60%, #fff100 0);
            transform: rotateZ(.03deg);
          }
          sup { margin-left: -1em; }
        }
      }
    }
  }
  .tab-body-cat {
    .panels .panel {
      &:nth-child(1) .detail::after {
        top: cr(12);
        right: cr(68);
        width: cr(138);
        height: cr(210);
        background-image: url('../images/reason_fig01_cat.svg');
        @include sp {
          top: cv(35);
          right: cv(26);
          width: cv(130);
          height: cv(196);
        }
      }
      &:nth-child(2) .detail::after {
        top: cr(17);
        right: cr(26);
        width: cr(214);
        height: cr(158);
        background-image: url('../images/reason_fig02_cat.svg');
        @include sp {
          top: cv(74);
          right: cv(16);
          width: cv(259);
          height: cv(190);
        }
      }
      &:nth-child(3) .detail::after {
        top: cr(30);
        right: cr(60);
        width: cr(188);
        height: cr(134);
        background-image: url('../images/reason_fig03_cat.svg');
        @include sp {
          top: cv(79);
          right: cv(48);
          width: cv(204);
          height: cv(146);
        }
      }
    }
    .subject::before { background-image: url('../images/footprints_cat.svg'); }
  }
  .tab-body-dog {
    .panels .panel {
      &:nth-child(1) .detail::after {
        top: cr(16);
        right: cr(65);
        width: cr(144);
        height: cr(204);
        background-image: url('../images/reason_fig01_dog.svg');
        @include sp {
          top: cv(33);
          right: cv(27);
          width: cv(128);
          height: cv(180);
        }
      }
      &:nth-child(2) .detail::after {
        top: cr(13);
        right: cr(9);
        width: cr(218);
        height: cr(162);
        background-image: url('../images/reason_fig02_dog.svg');
        @include sp {
          top: cv(66);
          right: cv(13);
          width: cv(254);
          height: cv(188);
        }
      }
      &:nth-child(3) .detail::after {
        top: cr(12);
        right: cr(30);
        width: cr(218);
        height: cr(164);
        background-image: url('../images/reason_fig03_dog.svg');
        @include sp {
          top: cv(56);
          right: cv(34);
          width: cv(232);
          height: cv(174);
        }
      }
      .subject::before { background-image: url('../images/footprints_dog.svg'); }
    }
  }
  .notes {
    @include sp { padding: 0 cv(30); }
  }
  .cvr {
    padding: cr(90) 0 cr(50);
    @include sp { padding: cv(70) cv(30) cv(90); }
    .inner {
      gap: cr(20);
      @include sp { gap: cv(10); }
    }
    p strong {
      font-size: 1.5em;
      @include sp {
        font-size: 1.75em;
        margin-bottom: .15em;
      }
    }
    p.cpt01 {
      @include sp {
        font-size: cv(30);
        font-feature-settings: "palt";
      }
    }
    p.cpt02 {
      font-size: cr(54);
      @include sp { font-size: cv(45); }
      strong {
        font-size: 1.5em;
      }
    }
  }
}
.card {
  position: relative;
  z-index: 47;
  padding: cr(280) 0 cr(50);
  background-color: var(--bg);
  @include sp { padding: cv(140) 0 cv(40); }
  .inner {
    gap: cr(30);
    @include sp { gap: cv(40); }
  }
  .card_ttl {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    row-gap: cr(20);
    font-weight: 800;
    @include sp {
      row-gap: cv(20);
      padding: cv(40) 0 cv(20);
    }
    &::before, &::after {
      content: '';
      position: absolute;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: contain;
    }
    &::before {
      bottom: cr(-15);
      left: cr(90);
      width: cr(60);
      height: cr(70);
      background-image: url('../images/kira01.svg');
      @include sp {
        bottom: cv(-10);
        left: cv(9);
        width: cv(46);
        height: cv(54);
      }
    }
    &::after {
      top: cr(-20);
      right: cr(87);
      width: cr(112);
      height: cr(110);
      background-image: url('../images/kira02.svg');
      transform: scale(-1,1);
      @include sp {
        top: cv(-40);
        right: cv(8);
        width: cv(112);
        height: cv(110);
      }
    }
    span {
      font-size: cr(64);
      @include sp { font-size: cv(64); }
      &:nth-child(1) {
        flex-basis: 100%;
        text-align: center;
      }
    }
    strong {
      color: var(--blue);
      font-size: cr(80);
      @include sp { font-size: cv(70); }
    }
  }
  .attention {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: cr(15);
    @include sp {
      gap: cv(15);
      padding: 0 cv(30);
    }
    &::before {
      content: '';
      width: cr(56);
      height: cr(56);
      background: url('../images/icon_attention.svg') no-repeat 0 0;
      background-size: contain;
      @include sp {
        width: cv(56);
        height: cv(56);
      }
    }
    p {
      color: var(--bk75);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: cr(22);
      font-weight: 700;
      font-feature-settings: "palt";
      line-height: 1.5;
      letter-spacing: .05em;
      @include sp { font-size: cv(20); }
    }
  }
}
.products {
  position: relative;
  z-index: 46;
  /*overflow-x: clip;*/
  padding: cr(70) 0;
  background-color: var(--bg);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(50) 0 cv(70);
    background-color: #f0ead6;
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--bg);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      background-color: #f0ead6;
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  .inner {
    max-width: cr(960);
    background-color: #f0ead6;
    padding: 0 0 cr(72);
    @include sp {
      max-width: 100%;
      padding: 0;
    }
  }
  .products_ttl {
    position: relative;
    background-color: #fff;
    padding: cr(18) 0;
    @include sp {
      padding: cv(46) 0 cv(26);
    }
    img {
      width: 648px;
      margin: 0 auto;
      display: block;
      @include sp { width: 100%; }
    }
  }
  .products_item {
    display: flex;
  }
  .products_plan {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: cr(44) 0 0;
    @include sp { padding: cv(52) 0 0; }
    dl {
      border: #2da7e0 solid 3px;
      margin: 0 cr(10) cr(40);
      @include sp {
        border-width: 0;
        background: #2da7e0;
        width: cv(630);
        padding: cv(2);
        margin: 0 auto cv(50);
      }
      &.plan50 {
        border-color: #0095f4;
        @include sp {
          width: 100%;
          padding: cv(32) cv(62);
          background: url('../images/products_plan50_bg01_sp.png') left top / 100% auto no-repeat,
          url('../images/products_plan50_bg02_sp.png') left bottom / 100% auto no-repeat;
        }
      }
      &.plan90 {
        border-color: #e60012;
        @include sp {
          background-color: #e60012;
        }
      }
      dt {
        position: relative;
        p.atte {
          font-size: cr(11.55);
          line-height: 1.3;
          text-align: center;
          position: absolute;
          left: 0;
          bottom: cr(10);
          width: 100%;
          @include sp {
            font-size: cv(17.3);
            bottom: cv(13);
          }
        }
      }
      .accordion-head {
        font-size: cr(23);
        letter-spacing: 0.1em;
        font-weight: 800;
        background-color: #d8cdaa;
        padding: cr(10) 0;
        text-align: center;
        cursor: pointer;
        position: relative;
        @include sp {
          font-size: cv(35);
          letter-spacing: 0.125em;
          padding: cv(15) 0;
        }
        &::after {
          content: "";
          background: url('../images/products_ac_arrow.svg') left top / 100% auto no-repeat;
          width: cr(25);
          aspect-ratio: 25/15;
          position: absolute;
          right: cr(21);
          top: 50%;
          margin-top: cr(-7.5);
          transition: .3s;
          transform: rotate(-180deg);
          @include sp {
            width: cv(38);
            right: cv(30);
            margin-top: cv(-11);
          }
        }
        &.open::after {
          transform: rotate(0deg);
        }
      }
      .accordion-body {
        display: none;
      }
    }
  }
  .products_setdiscount {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: cr(20) 0 0;
    margin-bottom: cr(80);
    @include sp {
      padding: cv(55) 0 0;
      margin-bottom: cv(80);
    }
    h3 {
      margin-bottom: cr(55);
      @include sp {
        width: cv(637);
        margin: 0 auto cv(100);
      }
    }
    p {
      @include sp {
        width: cv(651);
        margin: 0 auto;
      }
    }
  }
  .products_mustread {
    width: cr(862);
    margin: 0 auto;
    background-color: #fff;
    @include sp { width: cv(710); }
    dt.accordion-head {
      background-color: #2d2d2d;
      position: relative;
      text-align: center;
      color: #fff;
      font-size: cr(32);
      letter-spacing: 0.025em;
      font-weight: 800;
      padding: cr(20);
      cursor: pointer;
      @include sp {
        font-size: cv(42);
        letter-spacing: 0.025em;
        padding: cv(30);
      }
      strong {
        display: block;
        color: #fff000;
        font-size: cr(27);
        letter-spacing: 0.025em;
        margin-top: cr(15);
        @include sp {
          font-size: cv(36);
          letter-spacing: 0.025em;
          margin-top: cv(18);
        }
      }
      &::before, &::after {
        content: "";
        display: block;
        background: #fff;
        width: cr(30);
        height: cr(2);
        line-height: .1;
        position: absolute;
        right: cr(30);
        top: 50%;
        transition: all 0.3s ease;
        @include sp {
          width: cv(30);
          height: cv(2);
          right: cv(15);
        }
      }
      &::after { transform: rotate(-90deg); }
      &.open::after { transform: rotate(0deg); }
    }
    dd.accordion-body {
      display: none;
      text-align: center;
      padding: cr(40) cr(31);
      @include sp { padding: cv(50) 0; }
      p.lead {
        font-size: cr(17);
        line-height: 1.937;
        text-align: left;
        margin-bottom: cr(40);
        @include sp {
          font-size: cv(26);
          line-height: 1.479;
          letter-spacing: 0.025em;
          margin: 0 cv(20) cv(40);
        }
      }
      ul.atte {
        background-color: #ededed;
        padding: cr(20);
        margin-bottom: cr(62);
        text-align: left;
        @include sp {
          padding: cv(20);
          margin: 0 cv(20) cv(80);
        }
        li {
          position: relative;
          padding-left: 1.3em;
          font-size: cr(16);
          line-height: 2;
          @include sp {
            font-size: cv(21);
            line-height: 1.479;
            letter-spacing: 0.025em;
          }
          &::before {
            content: "・";
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
      h3 {
        margin-bottom: cr(42);
        @include sp {
          margin-bottom: cv(55);
        }
      }
    }

  }
}
.claim {
  position: relative;
  z-index: 45;
  overflow-x: clip;
  padding: cr(280) 0 cr(70);
  background-color: var(--wh);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(140) 0 cv(40);
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--wh);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  .claim_ttl {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: cr(20);
    font-weight: 800;
    @include sp { gap: cv(25); }
    em {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      color: var(--blue);
      font-size: cr(49);
      @include sp { font-size: cv(49); }
      &::before, &::after {
        content: '';
        width: .125em;
        height: .75em;
        border-radius: .25em;
        background-color: var(--blue);
      }
      &::before { transform: translateX(-.35em) rotate(-30deg); }
      &::after { transform: translateX(.35em) rotate(30deg); }
    }
    span {
      font-size: cr(64);
      @include sp { font-size: cv(60); }
    }
    strong {
      color: var(--blue);
      font-size: cr(90);
      @include sp { font-size: cv(80); }
    }
  }
  .pic {
    margin-top: cr(50);
    @include sp {
      margin-top: cv(45);
      padding: 0 cv(30);
    }
    img {
      border-radius: cr(20);
      @include sp { border-radius: cv(20); }
    }
  }
  .attention {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: cr(15);
    margin-top: cr(45);
    @include sp {
      gap: cv(15);
      margin-top: cv(45);
      padding: 0 cv(30);
    }
    &::before {
      content: '';
      width: cr(56);
      height: cr(56);
      background: url('../images/icon_attention.svg') no-repeat 0 0;
      background-size: contain;
      @include sp {
        width: cv(56);
        height: cv(56);
      }
    }
    p {
      color: var(--bk75);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: cr(22);
      font-weight: 700;
      font-feature-settings: "palt";
      line-height: 1.5;
      letter-spacing: .05em;
      @include sp { font-size: cv(20); }
    }
  }
  .contents {
    margin-top: cr(70);
    @include sp {
      margin-top: cv(60);
      padding: 0 cv(30);
    }
    p:nth-child(1) {
      font-size: cr(36);
      font-weight: 800;
      text-align: center;
      line-height: 1.4;
      transform: rotateZ(.03deg);
      @include sp { font-size: cv(36); }
    }
    p:nth-child(2) {
      margin-top: cr(60);
      font-size: cr(44);
      font-weight: 800;
      text-align: center;
      line-height: 1.4;
      transform: rotateZ(.03deg);
      @include sp {
        margin-top: cv(30);
        font-size: cv(44);
      }
    }
    .marker { background: linear-gradient(transparent 60%, #ffff00 0); }
    .notes {
      margin-top: cr(40);
      @include sp { margin-top: cv(30); }
    }
  }
  .comparison {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: cr(76);
    margin-top: cr(100);
    @include sp {
      flex-direction: row;
      gap: cv(24);
      margin-top: cv(70);
    }
    img {
      width: cr(1100);
      @include sp { width: cv(334); }
    }
  }
  .sticker {
    display: flex;
    flex-direction: column;
    gap: cr(40);
    margin-top: cr(100);
    @include sp {
      gap: cv(30);
      margin-top: cv(70);
    }
    h4 {
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--text);
      font-size: cr(45);
      font-weight: 800;
      @include sp {
        font-size: cv(45);
        line-height: 1.25;
      }
      &::before, &::after {
        content: '';
        width: .1em;
        height: 1em;
        border-radius: .25em;
        background-color: var(--text);
        @include sp { height: 2.25em; }
      }
      &::before {
        transform: translateX(-.35em) rotate(-30deg);
        @include sp { transform: translateX(-.75em) rotate(-30deg); }
      }
      &::after {
        transform: translateX(.35em) rotate(30deg);
        @include sp { transform: translateX(.75em) rotate(30deg); }
      }
    }
    picture {
      text-align: center;
      filter: drop-shadow(0 0 cr(9) var(--bk20));
      @include sp { filter: drop-shadow(0 0 cv(9) var(--bk20)); }
      img {
        width: cr(550);
        @include sp { width: cv(490); }
      }
    }
    p {
      font-size: cr(29);
      font-weight: 800;
      text-align: center;
      line-height: 1.75;
      transform: rotateZ(.03deg);
      @include sp { font-size: cv(29); }
      .marker { background: linear-gradient(transparent 60%, #ffff00 0); }
    }
  }
  .search {
    margin-top: cr(70);
    @include sp { margin-top: cv(24); }
    .btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: cr(824);
      height: cr(100);
      border-radius: cr(50);
      color: var(--wh);
      font-size: cr(36);
      font-weight: 800;
      text-decoration: none;
      background-color: #5ab651;
      box-shadow: 0 cr(10) 0 #22571d;
      @include sp {
        width: cv(686);
        height: cv(84);
        border-radius: cv(42);
        font-size: cv(30);
        box-shadow: 0 cv(10) 0 #22571d;
      }
      &::before, &::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: transform .5s cubic-bezier(.2,1,.2,1);
      }
      &::before {
        right: cr(20);
        width: cr(50);
        height: cr(50);
        border-radius: 50%;
        background-color: var(--wh);
        @include sp {
          right: cv(20);
          width: cv(42);
          height: cv(42);
        }
      }
      &::after {
        right: cr(34);
        width: cr(17);
        height: cr(20);
        background-color: #5ab651;
        clip-path: polygon(0 0,100% 50%,0 100%);
        @include sp {
          right: cv(32);
          width: cv(14);
          height: cv(16);
        }
      }
      @include hover {
        &:hover {
          opacity: .8;
          &::before, &::after { transform: translateY(-50%) scale(1.1); }
        }
      }
    }
  }
}
.coverage {
  position: relative;
  z-index: 44;
  overflow-x: clip;
  padding: cr(280) 0 cr(60);
  background-color: var(--bg);
  @include sp { padding: cv(140) 0 cv(40); }
  .inner {
    gap: cr(60);
    @include sp { gap: cv(34); }
  }
  .coverage_ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    span {
      font-size: cr(52);
      @include sp { font-size: cv(52); }
    }
  }
  .lead p {
    font-size: cr(26);
    font-weight: 800;
    text-align: center;
    line-height: 1.625;
    transform: rotateZ(.03deg);
    @include sp { font-size: cv(26); }
  }
  .panels {
    position: relative;
    width: cr(1100);
    height: cr(500);
    padding: cr(20) cr(40) cr(50);
    border-radius: cr(15);
    background-color: #f0ead6;
    box-shadow: 0 cr(10) 0 #bfb39d;
    @include sp {
      width: cv(690);
      height: cv(720);
      padding: cv(20) cv(40) cv(50);
      border-radius: cv(15);
      box-shadow: 0 cv(10) 0 #bfb39d;
    }
    &::before {
      content: '';
      position: absolute;
      top: cr(50);
      left: cr(40);
      width: cr(1020);
      height: cr(400);
      border-radius: cr(20);
      background-color: var(--bg);
      @include sp {
        top: cv(50);
        left: cv(40);
        width: cv(610);
        height: cv(620);
        border-radius: cv(20);
      }
    }
    .coverage-slider {
      display: none;
      &.slick-initialized { display: block; }
    }
    .item {
      padding-top: cr(30);
      @include sp { padding-top: cv(30); }
    }
    .slick-arrow {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: cr(40);
      height: cr(40);
      padding: 0;
      border: 0 none;
      font-size: 0;
      background-color: transparent;
      transform: translateY(-50%);
      transition: opacity .5s cubic-bezier(.2,1,.2,1);
      @include sp {
        width: cv(40);
        height: cv(40);
      }
      &.slick-disabled {
        pointer-events: none;
        opacity: 0;
      }
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: cr(20);
        height: cr(20);
        @include sp {
          width: cv(20);
          height: cv(20);
        }
      }
    }
    .slick-prev {
      left: cr(-40);
      @include sp { left: cv(-40); }
      &::before {
        border-bottom: cr(4) solid var(--bk70);
        border-left: cr(4) solid var(--bk70);
        transform: translate(-25%,-50%) rotate(45deg);
        @include sp { border-width: cv(4); }
      }
    }
    .slick-next {
      right: cr(-40);
      @include sp { right: cv(-40); }
      &::before {
        border-top: cr(4) solid var(--bk70);
        border-right: cr(4) solid var(--bk70);
        transform: translate(-75%,-50%) rotate(45deg);
        @include sp { border-width: cv(4); }
      }
    }
    .slick-dots {
      position: absolute;
      top: calc(100% + 0.3125rem);
      left: 0;
      display: flex;
      justify-content: center;
      width: 100%;
      @include sp { top: calc(100% + 0.666vw); }
      button {
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: cr(40);
        height: cr(40);
        padding: 0;
        border: 0 none;
        font-size: 0;
        background-color: transparent;
        @include sp {
          width: cv(40);
          height: cv(40);
        }
        &::before {
          content: '';
          width: cr(20);
          height: cr(20);
          border-radius: 50%;
          background-color: var(--bk25);
          transition: background-color .5s cubic-bezier(.2,1,.2,1);
          @include sp {
            width: cv(20);
            height: cv(20);
          }
        }
      }
      .slick-active button::before { background-color: #8cbc07; }
    }
    .panel {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: cr(1020);
      height: cr(400);
      padding: cr(30);
      border-radius: cr(20);
      @include sp {
        flex-direction: column;
        justify-content: center;
        width: cv(610);
        height: cv(620);
        padding: cv(40) 0 cv(20);
        border-radius: cv(20);
      }
      .panel_ttl {
        position: absolute;
        top: 0;
        left: 50%;
        padding: cr(10) cr(20);
        border-radius: 2em;
        color: var(--wh);
        font-size: cr(35);
        font-weight: 800;
        white-space: nowrap;
        background-color: #8cbc07;
        transform: translate(-50%,-50%);
        @include sp {
          padding: cv(10) cv(20);
          font-size: cv(35);
        }
      }
      .comment {
        font-size: cr(22);
        line-height: 2;
        transform: rotateZ(.03deg);
        @include sp {
          font-size: cv(22);
          line-height: 1.75;
          text-align: center;
        }
      }
      figure {
        position: absolute;
        @include sp {
          position: relative;
          top: 0 !important;
          right: 0 !important;
        }
      }
    }
    &.tab-body-cat .item {
      &.item01 {
        .panel {
          @include sp { gap: cv(50); }
          figure {
            top: cr(82);
            right: cr(69);
            img {
              width: cr(314);
              @include sp { width: cv(290); }
            }
          }
        }
      }
      &.item02 {
        .panel {
          @include sp { gap: cv(20); }
          figure {
            top: cr(82);
            right: cr(94);
            img {
              width: cr(284);
              @include sp { width: cv(250); }
            }
          }
        }
      }
      &.item03 {
        .panel {
          @include sp { gap: cv(30); }
          figure {
            top: cr(40);
            right: cr(97);
            img {
              width: cr(280);
              @include sp { width: cv(244); }
            }
          }
        }
      }
      &.item04 {
        .panel {
          @include sp { gap: cv(30); }
          figure {
            top: cr(66);
            right: cr(91);
            img {
              width: cr(180);
              @include sp { width: cv(144); }
            }
          }
        }
      }
    }
    &.tab-body-dog .item {
      &.item01 {
        .panel {
          @include sp { gap: cv(34); }
          figure {
            top: cr(61);
            right: cr(79);
            img {
              width: cr(318);
              @include sp {
                width: cv(284);
                transform: translateX(cv(-26));
              }
            }
          }
        }
      }
      &.item02 {
        .panel {
          @include sp { gap: cv(90); }
          figure {
            top: cr(99);
            right: cr(52);
            img {
              width: cr(308);
              @include sp { width: cv(278); }
            }
          }
        }
      }
      &.item03 {
        .panel {
          @include sp { gap: cv(43); }
          figure {
            top: cr(39);
            right: cr(62);
            img {
              width: cr(324);
              @include sp {
                width: cv(270);
                transform: translateX(cv(-26));
              }
            }
          }
        }
      }
      &.item04 {
        .panel {
          @include sp { gap: cv(40); }
          figure {
            top: cr(70);
            right: cr(63);
            img {
              width: cr(400);
              @include sp {
                width: cv(348);
                transform: translateX(cv(-28));
              }
            }
          }
        }
      }
    }
  }
}
.voice {
  position: relative;
  z-index: 43;
  padding: cr(60) 0 0;
  background-color: var(--bg);
  @include sp { padding: cv(40) 0 0; }
  .inner {
    gap: cr(100);
    @include sp { gap: cv(34); }
  }
  .voice_ttl {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    row-gap: cr(20);
    font-weight: 800;
    @include sp { row-gap: cv(20); }
    &::before, &::after {
      content: '';
      position: absolute;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: contain;
    }
    &::before {
      bottom: cr(-34);
      left: cr(37);
      width: cr(70);
      height: cr(82);
      background-image: url('../images/kira01.svg');
      @include sp {
        bottom: cv(34);
        left: cv(22);
        width: cv(70);
        height: cv(82);
      }
    }
    &::after {
      top: cr(60);
      right: cr(28);
      width: cr(86);
      height: cr(84);
      background-image: url('../images/kira02.svg');
      transform: scale(-1,1);
      @include sp {
        top: cv(98);
        right: cv(23);
        width: cv(86);
        height: cv(84);
      }
    }
    span {
      font-size: cr(50);
      @include sp { font-size: cv(50); }
    }
    strong {
      color: var(--blue);
      font-size: cr(60);
      @include sp { font-size: cv(60); }
    }
  }
  .panels {
    position: relative;
    width: cr(1100);
    height: cr(660);
    padding: cr(40) cr(40) cr(60);
    border-radius: cr(15);
    background-color: #f0ead6;
    @include sp {
      width: cv(690);
      height: cv(720);
      padding: cv(40) cv(40) cv(60);
      border-radius: cv(15);
    }
    &::before {
      content: '';
      position: absolute;
      top: cr(40);
      left: cr(40);
      width: cr(1020);
      height: cr(560);
      border-radius: cr(20);
      background-color: var(--wh);
      @include sp {
        top: cv(40);
        left: cv(40);
        width: cv(610);
        height: cv(620);
        border-radius: cv(20);
      }
    }
    .voice-slider {
      display: none;
      &.slick-initialized { display: block; }
    }
    .slick-arrow {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: cr(40);
      height: cr(40);
      padding: 0;
      border: 0 none;
      font-size: 0;
      background-color: transparent;
      transform: translateY(-50%);
      transition: opacity .5s cubic-bezier(.2,1,.2,1);
      @include sp {
        width: cv(40);
        height: cv(40);
      }
      &.slick-disabled {
        pointer-events: none;
        opacity: 0;
      }
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: cr(20);
        height: cr(20);
        @include sp {
          width: cv(20);
          height: cv(20);
        }
      }
    }
    .slick-prev {
      left: cr(-40);
      @include sp { left: cv(-40); }
      &::before {
        border-bottom: cr(4) solid var(--bk70);
        border-left: cr(4) solid var(--bk70);
        transform: translate(-25%,-50%) rotate(45deg);
        @include sp { border-width: cv(4); }
      }
    }
    .slick-next {
      right: cr(-40);
      @include sp { right: cv(-40); }
      &::before {
        border-top: cr(4) solid var(--bk70);
        border-right: cr(4) solid var(--bk70);
        transform: translate(-75%,-50%) rotate(45deg);
        @include sp { border-width: cv(4); }
      }
    }
    .slick-dots {
      position: absolute;
      top: calc(100% + 0.625rem);
      left: 0;
      display: flex;
      justify-content: center;
      width: 100%;
      @include sp { top: calc(100% + 0.666vw); }
      button {
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: cr(40);
        height: cr(40);
        padding: 0;
        border: 0 none;
        font-size: 0;
        background-color: transparent;
        @include sp {
          width: cv(40);
          height: cv(40);
        }
        &::before {
          content: '';
          width: cr(20);
          height: cr(20);
          border-radius: 50%;
          background-color: var(--bk25);
          transition: background-color .5s cubic-bezier(.2,1,.2,1);
          @include sp {
            width: cv(20);
            height: cv(20);
          }
        }
      }
      .slick-active button::before { background-color: #8cbc07; }
    }
    .panel {
      position: relative;
      width: cr(1020);
      height: cr(560);
      padding: cr(30);
      border-radius: cr(20);
      @include sp {
        width: cv(610);
        height: cv(620);
        padding: cv(30) 0;
        border-radius: cv(20);
      }
      .info {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: cr(80);
        @include sp {
          justify-content: flex-end;
          gap: cv(20);
          width: 100%;
        }
        picture img {
          width: cr(280);
          border-radius: cr(12);
          @include sp {
            width: cv(280);
            border-radius: cv(12);
          }
        }
        .profile {
          position: relative;
          display: flex;
          justify-content: center;
          width: cr(310);
          padding: cr(30) cr(20) cr(16);
          border-radius: cr(12);
          background-color: #8cbc07;
          @include sp {
            width: cv(280);
            padding: cv(32) cv(30) cv(16) cv(10);
            border-radius: cv(12) 0 0 cv(12);
          }
          &::before {
            content: '';
            position: absolute;
            top: cr(-56);
            left: 50%;
            width: cr(160);
            height: cr(90);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: contain;
            transform: translateX(-50%);
            @include sp {
              top: cv(-56);
              width: cv(160);
              height: cv(90);
            }
          }
          ul li {
            padding-left: 3em;
            text-indent: -3em;
            color: var(--wh);
            font-size: cr(16);
            font-weight: 700;
            line-height: 1.75;
            transform: rotateZ(.03deg);
            @include sp { font-size: cv(15); }
          }
        }
      }
      .comment {
        margin-top: cr(35);
        font-size: cr(21);
        line-height: 1.75;
        transform: rotateZ(.03deg);
        @include sp {
          margin-top: cv(30);
          padding: 0 cv(30);
          font-size: cv(21);
        }
      }
    }
    &.tab-body-cat .panel .info .profile::before { background-image: url('../images/voice_fig_cat.png'); }
    &.tab-body-cat .item.item02 .panel .comment p {
      @include sp { letter-spacing: -.1em; }
    }
    &.tab-body-dog .panel .info .profile::before { background-image: url('../images/voice_fig_dog.png'); }
    &.tab-body-dog .item.item01 .panel .info .profile {
      width: cr(480);
      @include sp { width: cv(280); }
    }
  }
}
.voice_summary {
  position: relative;
  z-index: 42;
  /*overflow-x: clip;*/
  padding: cr(70) 0;
  background-color: var(--bg);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(40) 0;
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--bg);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  picture {
    display: block;
    text-align: center;
    img {
      width: cr(960);
      @include sp { width: cv(690); }
    }
  }
}
.example {
  position: relative;
  z-index: 41;
  padding: cr(280) 0 cr(70);
  background-color: var(--wh);
  @include sp { padding: cv(140) 0 cv(40); }
  .inner {
    gap: cr(80);
    @include sp { gap: cv(80); }
  }
  .example_ttl {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: cr(20);
    @include sp { gap: cv(20); }
    span {
      font-weight: 800;
      &:nth-child(1) {
        font-size: cr(50);
        @include sp { font-size: cv(50); }
      }
      &:nth-child(2) {
        font-size: cr(70);
        @include sp { font-size: cv(70); }
      }
      &:nth-child(3) {
        font-size: cr(80);
        @include sp { font-size: cv(80); }
      }
      strong { color: var(--blue); }
    }
  }
  .panel {
    position: relative;
    width: 100%;
    padding: cr(70);
    background-color: var(--bg);
    @include sp {
      width: cv(690);
      padding: cv(40) cv(20) cv(30);
    }
    .panel_ttl {
      position: absolute;
      top: 0;
      left: 50%;
      padding: cr(10) cr(20);
      border-radius: 2em;
      color: #fff;
      font-size: cr(20);
      font-weight: 800;
      white-space: nowrap;
      background-color: #569ee1;
      transform: translate(-50%,-50%) rotateZ(.03deg);
      @include sp {
        padding: cv(10) cv(20);
        font-size: cv(20);
      }
    }
    .comment {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      margin: cr(50) 0 cr(20);
      font-weight: 800;
      @include sp {
        flex-direction: column;
        align-items: center;
        margin: cv(20) 0;
      }
      strong {
        font-size: cr(34);
        line-height: 1.3;
        background: linear-gradient(transparent 60%, #ffff00 0);
        @include sp { font-size: cv(34); }
      }
      span {
        font-size: cr(26);
        line-height: 1.5;
        @include sp { font-size: cv(26); }
      }
    }
    .notes {
      margin-top: cr(30);
      @include sp { margin-top: cv(30); }
    }
  }
}
.timing {
  position: relative;
  z-index: 40;
  /*overflow-x: clip;*/
  padding: cr(70) 0;
  background-color: var(--wh);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(50) 0 cv(70);
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--wh);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  .inner {
    gap: cr(50);
    @include sp { gap: cv(50); }
  }
  .timing_ttl {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: cr(20);
    @include sp {
      flex-direction: column;
      row-gap: cv(10);
    }
    span {
      font-weight: 800;
      &:nth-child(1), &:nth-child(2) {
        font-size: cr(50);
        @include sp { font-size: cv(50); }
      }
      &:nth-child(3) {
        font-size: cr(60);
        @include sp { font-size: cv(60); }
      }
      strong {
        color: var(--blue);
        font-size: 1.5em;
      }
    }
  }
  .pic {
    text-align: center;
    img {
      width: cr(678);
      @include sp { width: cv(552); }
    }
  }
  .accordion {
    width: cr(1100);
    @include sp { width: cv(690); }
    .accordion-head {
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      padding: cr(40);
      font-weight: 800;
      background-color: #f0ead6;
      @include sp { padding: cv(40) cv(30); }
      .icon {
        font-size: cr(36);
        @include sp { font-size: cv(36); }
      }
      .ttl {
        font-size: cr(30);
        @include sp { font-size: cv(30); }
      }
      .btn {
        position: absolute;
        top: 50%;
        right: cr(40);
        width: cr(44);
        height: cr(44);
        border-radius: 50%;
        background-color: var(--wh);
        transform: translateY(-50%);
        &::before, &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: cr(24);
          height: cr(4);
          border-radius: cr(2);
          background-color: var(--text);
          transition: transform .5s cubic-bezier(.2,1,.2,1);
        }
        &::before { transform: translate(-50%,-50%); }
        &::after { transform: translate(-50%,-50%) rotate(90deg); }
        &.active::after { transform: translate(-50%,-50%) rotate(0deg); }
      }
    }
    .accordion-body {
      display: none;
      padding: cr(30) cr(40);
      background-color: var(--bg);
      @include sp { padding: cv(30); }
      h3 {
        font-size: cr(26);
        font-weight: 800;
        line-height: 1.5;
        @include sp { font-size: cv(26); }
      }
      .comment {
        font-size: cr(26);
        line-height: 1.5;
        @include sp { font-size: cv(26); }
      }
      .notes {
        margin-top: cr(10);
        @include sp { margin-top: cv(10); }
      }
    }
  }
}
.support {
  position: relative;
  z-index: 39;
  /*overflow-x: clip;*/
  padding: cr(280) 0 cr(70);
  background-color: var(--bg);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(140) 0 cv(40);
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--bg);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  .inner {
    gap: cr(70);
    @include sp { gap: cv(30); }
  }
  .answer {
    font-size: cr(26);
    text-align: center;
    line-height: 1.75;
    transform: rotateZ(.03deg);
    @include sp {
      padding: 0 cv(30);
      font-size: cv(27);
      text-align: left;
    }
  }
  .notes {
    width: 100%;
    @include sp { padding: 0 cv(30); }
  }
}
.flow {
  position: relative;
  z-index: 38;
  /*overflow-x: clip;*/
  padding: cr(280) 0 cr(70);
  background-color: var(--wh);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(140) 0 cv(70);
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--wh);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  .inner {
    gap: cr(50);
    @include sp { gap: cv(50); }
  }
  .flow_ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    &::before, &::after {
      content: '';
      width: cr(66);
      height: cr(144);
      background: url('../images/laurel.svg') no-repeat 50% 50%;
      background-size: contain;
      @include sp {
        width: cv(66);
        height: cv(144);
      }
    }
    &::before {
      transform: translateX(30%);
      @include sp { transform: translateX(20%); }
    }
    &::after {
      transform: translateX(-30%) scale(-1,1);
      @include sp { transform: translateX(-20%) scale(-1,1); }
    }
    span {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: cr(10);
      @include sp { gap: cv(10); }
      em:nth-child(1) {
        font-size: cr(44);
        @include sp { font-size: cv(44); }
      }
      em:nth-child(3) {
        font-size: cr(50);
        @include sp { font-size: cv(50); }
      }
      strong {
        color: var(--blue);
        font-size: cr(60);
        @include sp { font-size: cv(56); }
      }
    }
  }
  .fig {
    padding: cr(50) cr(70);
    border-radius: cr(13);
    text-align: center;
    background-color: #f0ead6;
    @include sp {
      width: cv(690);
      padding: cv(48) cv(10) cv(32);
      border-radius: cv(13);
    }
  }
  .group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    @include sp {
      flex-direction: column;
      align-items: center;
      gap: cv(30);
    }
    .item {
      display: flex;
      flex-direction: column;
      gap: cr(20);
      width: cr(530);
      padding: cr(24);
      border-radius: cr(13);
      background-color: #f0ead6;
      transform: rotateZ(.03deg);
      @include sp {
        gap: cv(20);
        width: cv(690);
        padding: cv(24);
        border-radius: cv(13);
      }
      &:nth-child(odd) h3 { background-color: var(--blue); }
      h3 {
        width: fit-content;
        padding: cr(7) cr(20);
        border-radius: 2em;
        color: var(--wh);
        font-size: cr(26);
        font-weight: 800;
        background-color: var(--blue);
        @include sp {
          padding: cv(7) cv(20);
          font-size: cv(26);
        }
      }
      h4 {
        font-size: cr(35);
        font-weight: 800;
        line-height: 1.35;
        @include sp { font-size: cv(35); }
      }
       p {
        font-size: cr(24);
        line-height: 1.35;
        @include sp { font-size: cv(26); }
      }
    }
  }
  .notes {
    @include sp { padding: 0 cv(30); }
  }
}
.faq {
  position: relative;
  z-index: 37;
  /*overflow-x: clip;*/
  padding: cr(280) 0 cr(70);
  background-color: var(--bg);
  filter: drop-shadow(0 cr(13) cr(32) var(--bk20));
  @include sp {
    padding: cv(140) 0 cv(60);
    filter: drop-shadow(0 cv(13) cv(32) var(--bk20));
  }
  &::after {
    content: '';
    position: absolute;
    top: calc(100% - 1.25rem);
    left: 50%;
    width: cr(1920);
    height: cr(200);
    background-color: var(--bg);
    clip-path: polygon(0 0,100% 0,100% cr(20),50% 100%,0 cr(20));
    transform: translateX(-50%);
    @include sp {
      top: calc(100% - 1.3333vw);
      width: cv(750);
      height: cv(100);
      clip-path: polygon(0 0,100% 0,100% cv(10),50% 100%,0 cv(10));
    }
  }
  .inner {
    gap: cr(100);
    @include sp { gap: cv(65); }
  }
  .faq_ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    span {
      font-size: cr(80);
      @include sp { font-size: cv(80); }
    }
  }
  .category {
    display: flex;
    flex-direction: column;
    gap: cr(60);
    @include sp { gap: cv(40); }
    h3 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: cr(25);
      width: cr(1100);
      color: #5ab651;
      font-size: cr(40);
      font-weight: 800;
      @include sp {
        gap: cv(25);
        width: cv(690);
        font-size: cv(40);
      }
      &::before, &::after {
        content: '';
        flex: 1 1 0%;
        height: cr(2);
        background-color: #5ab651;
        @include sp { height: cv(2); }
      }
    }
    .accordion {
      width: cr(1100);
      @include sp { width: cv(690); }
      .accordion-head {
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        padding: cr(30) cr(40);
        background-color: #f0ead6;
        @include sp { padding: cv(24) cv(30); }
        .ttl {
          padding-left: 1.7em;
          text-indent: -1.7em;
          font-size: cr(28);
          line-height: 1.3;
          transform: rotateZ(.03deg);
          @include sp { font-size: cv(28); }
        }
        .btn {
          position: absolute;
          top: 50%;
          right: cr(40);
          width: cr(42);
          height: cr(42);
          border-radius: 50%;
          background-color: #d8cdaa;
          transform: translateY(-50%);
          @include sp {
            right: cv(30);
            width: cv(42);
            height: cv(42);
          }
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: cr(20);
            height: cr(16);
            background-color: var(--text);
            clip-path: polygon(0 0,100% 0,50% 100%);
            transition: transform .5s cubic-bezier(.2,1,.2,1);
            @include sp {
              width: cv(20);
              height: cv(16);
            }
          }
          &::before { transform: translate(-50%,-50%); }
          &.active::before { transform: translate(-50%,-50%) rotate(180deg); }
        }
      }
      .accordion-body {
        display: none;
        padding: cr(30) cr(40);
        background-color: var(--wh);
        @include sp { padding: cv(30); }
        .comment {
          padding-left: 1.6em;
          text-indent: -1.6em;
          font-size: cr(22);
          line-height: 1.5;
          transform: rotateZ(.03deg);
          @include sp { font-size: cv(22); }
          & + .comment { text-indent: -1.25em; }
        }
        .notes {
          margin-top: cr(20);
          padding-left: 1em;
          text-indent: -1em;
          @include sp { margin-top: cv(20); }
        }
      }
    }
  }
  .others {
    width: cr(1100);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: cr(22);
    font-weight: 400;
    font-feature-settings: "palt";
    line-height: 1.5;
    letter-spacing: .05em;
    @include sp {
      width: cv(690);
      margin-top: cv(-30);
      font-size: cv(22);
    }
  }
  .link { color: #005dc1; }
}
.modal {
  display: none;
  &.active { display: block; }
  .modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100vw;
    height: 100vh;
    background-color: var(--bk60);
  }
  .modal_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .modal_close {
      cursor: pointer;
      position: absolute;
      top: cr(-10);
      right: cr(-10);
      width: cr(40);
      height: cr(40);
      appearance: none;
      border: 0 none;
      padding: 0;
      font-size: 0;
      background-color: var(--blue);
      @include sp {
        top: cv(-20);
        right: cv(-20);
        width: cv(80);
        height: cv(80);
      }
      &::before, &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: cr(24);
        height: cr(4);
        border-radius: cr(2);
        background-color: var(--wh);
        @include sp {
          width: cv(48);
          height: cv(8);
          border-radius: cv(4);
        }
      }
      &::before { transform: translate(-50%,-50%) rotate(45deg); }
      &::after { transform: translate(-50%,-50%) rotate(-45deg); }
    }
    .modal_contents {
      width: 90vw;
      max-width: 1200px;
      height: cr(600);
      @include sp { height: 90vh; }
      iframe { width: 100%; }
    }
  }
}