@charset "utf-8";


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

table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

img {
  vertical-align: bottom;
  border: none;
}
picture {
  display: block;
}
/* ----------------------------------------------

 * 設定をしなおす

---------------------------------------------- */
:root {
  --inner: 100rem;
}
@media (prefers-reduced-motion: reduce) {
  * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
  }
}
html {
  -webkit-font-smoothing: antialiased;
  font-size: 62.5%;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 0.7320644217vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 2.6666666667vw;
  }
}
body {
  margin: 0 auto;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.8em;
  color: #000;
  height: 100%;
  font-family: YakuHanJP, "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 400;
  position: relative;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.5rem;
  }
}

.en {
  font-family: "Public Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

img {
  vertical-align: bottom;
  border: none;
  max-width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
}
main {
  display: block;
  position: relative;
}

a {
  outline:none;
  color: #2C2623;
}

a:hover {
  text-decoration: none;
}

a,a:hover,a:hover img,button,input {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}

a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}


/* -----------------------------------------------
 * COMMON
----------------------------------------------- */
input[type=text]:focus {
    outline: none;
}
#main {
  overflow: hidden;
}
section {
  position: relative;
}
.container {
  max-width: calc(var(--inner) + 6rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
}

.pt-0 {
  padding-top: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}

@media only screen and ( max-width : 767px ) {
  .container {
    max-width: 100%;
  }
  .br_pc {
    display: none;
  }
  .sp_none{display:none !important;}
}
@media print, screen and ( min-width : 768px ) {
  .br_sp {
    display: none;
  }
  .sp { display:none !important; }
}
/* ---------------------------------------------------------------------------------------------

　   FLEX

--------------------------------------------------------------------------------------------- */
.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

.d-inline-flex {
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}
.flex-row {
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex-row-reverse {
  -ms-flex-direction: row-reverse !important;
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

.flex-wrap {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}

.flex-nowrap {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}
.justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}

.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.align-items-start {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}


@media (min-width: 576px) {
  .d-sm-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .justify-content-sm-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-sm-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .align-items-sm-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
}

@media (min-width: 768px) {
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .justify-content-md-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-md-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .align-items-md-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-md-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-md-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
}

@media (min-width: 992px) {
  .d-lg-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .justify-content-lg-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-lg-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .align-items-lg-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .flex-xl-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-xl-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .align-items-xl-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
}

/* ---------------------------------------------------------------------------------------------

　   TEXT

--------------------------------------------------------------------------------------------- */
.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}
@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
  .text-sm-right {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-left {
    text-align: left !important;
  }
  .text-lg-right {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-left {
    text-align: left !important;
  }
  .text-xl-right {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}


/* ---------------------------------------------------------------------------------------------

　   HEADER

--------------------------------------------------------------------------------------------- */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  transition: transform 0.3s 0.3s;
  transform: translateY(-100%);
  background: #fff;
}
/* #header.scroll {
  background: transparent;
  backdrop-filter: blur(5px);
} */
#header.p-header {
  position: fixed;
}
#header.scroll {
  box-shadow: 0 .7rem 1rem 0 rgba(0, 0, 0, 0.35);
}
#header.hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-out;
}

#gNav li {
  font-weight: 700;
  position: relative;
}
#gNav li:after {
  content: "";
  width: 1px;
  height: 1em;
  background: #000;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
#gNav li:last-child:after {
  content: none;
}
#gNav li a {
  display: block;
}


@media only screen and ( max-width : 767px ) {
  #header {
    height: 7.5rem;
    padding: 1.5rem;
    align-items: center;
  }
  header.hidden {
    transform: translateY(-10rem) !important;
  }
  #h_logo {
    position: fixed;
    top: 1.2rem;
    left: 1.5rem;
    z-index: 104;
  }
  #h_logo img {
    width: 7.8rem;
  }
  #h_nav {
    margin-left: 12rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #h_nav::-webkit-scrollbar {
    display: none;
  }
  #gNav ul {
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  #gNav li {
    flex-shrink: 0;
    font-size: 1.4rem;
    white-space: nowrap;
  }
  #gNav li a {
    padding: 0 1rem;
  }
}
@media print, screen and ( min-width : 768px ) {
  #header {
    height: 9rem;
    padding: 0 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  header.hidden {
    transform: translateY(-9rem) !important;
  }
  #h_logo img {
    width: 31rem;
  }
  #gNav li {
    font-size: 1.7rem;
  }
  #gNav li a {
    padding: 0 2rem;
  }
}


/* ---------------------------------------------------------------------------------------------

　   FOOTER

--------------------------------------------------------------------------------------------- */
#footer {
  text-align: center;
}


@media only screen and ( max-width : 767px ) {
  #footer {
    padding: 1.5rem 0;
    font-size: .8rem;
  }
}

@media print, screen and ( min-width : 768px ) {
  #footer {
    padding: 2rem 0;
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------------------------------------

　   FIXED BUTTON

--------------------------------------------------------------------------------------------- */
#fixed_btn {
  position: fixed;
  bottom: 1.5rem;
  left: 0;
  width: 100%;
  z-index: 99;
  opacity: 0;
  bottom: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  background: rgba(255,255,255,0.9);
}
#fixed_btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#fixed_btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  pointer-events: none;
}


@media only screen and ( max-width : 767px ) {
  #fixed_btn {
    padding: .25rem 0 .5rem;
  }
  #fixed_btn .container {
    padding: 0 1rem;
  }
  .btn_fixed01 {
    /* margin-right: .5rem; */
    width: 58%;
    margin-right: 2%;
  }
  .btn_fixed02 {
    width: 40%;
  }
}

@media print, screen and ( min-width : 768px ) {
  #fixed_btn {
    padding: 0 0 1rem;
  }
  .btn_fixed01 {
    width: 42rem;
    margin-right: 3rem;
  }
  .btn_fixed02 {
    width: 28rem;
  }
}


/* ---------------------------------------------------------------------------------------------

　   COMMON

--------------------------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.fit {
  -o-object-fit: cover;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  width: 100%;
  height: 100%;
}
.balloon {
  font-weight: bold;
  color: #333;
  background: #fff;
  position: relative;
  border-radius: 1rem;
  text-align: center;
}
.balloon::before {
  content: "";
  position: absolute;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
  border-right: 3px solid #333;
  transform: skew(-40deg);
  z-index: 1;
}
.balloon02 {
  text-align: center;
}
.balloon02 .fukidashi-text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.balloon02 .fukidashi-text:before,
.balloon02 .fukidashi-text:after {
  content: "";
  background: #000;
  bottom: 0;
  position: absolute;
}
.balloon02 .fukidashi-text:before {
  left: 0;
  transform: rotate(-30deg);
}
.balloon02 .fukidashi-text:after {
  right: 0;
  transform: rotate(30deg);
}
.title {
  text-align: center;
}
.balloon .marker {
  background: url(../img/marker.png) no-repeat left bottom / contain;
}

@media only screen and ( max-width : 767px ) {
  .sec {
    padding: 3rem 0;
  }
  .balloon {
    font-size: 2.5rem;
    margin: 0 auto 4rem;
    border: solid .3rem #000;
    padding: 1.5rem;
  }
  .balloon::before {
    border-right: .3rem solid #000;
    width: 1.5rem;
    height: 1.2rem;
    bottom: -1.2rem;
  }
  .balloon02 {
    font-size: 2.5rem;
    margin-bottom: 4rem;
  }
  .balloon02 .fukidashi-text:before,
  .balloon02 .fukidashi-text:after {
    height: 4rem;
    width: .2rem;
  }
  .balloon02 .fukidashi-text {
    /* padding: 0 4rem; */
  }
  .title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
}
@media print, screen and ( min-width : 768px ) {
  .sec {
    padding: 10rem 0;
  }
  .balloon {
    font-size: 5.5rem;
    width: 82rem;
    margin: 0 auto 5rem;
    border: solid .4rem #000;
    padding: 2rem;
  }
  .balloon::before {
    border-right: .4rem solid #000;
    width: 3rem;
    height: 2.4rem;
    bottom: -2.4rem;
  }
  .balloon02 {
    font-size: 5.4rem;
    margin-bottom: 4.5rem;
  }
  .balloon02 .fukidashi-text:before,
  .balloon02 .fukidashi-text:after {
    height: 6rem;
    width: .4rem;
  }
  .balloon02 .fukidashi-text {
    padding: 0 8rem;
  }
  .title {
    font-size: 5.4rem;
    margin-bottom: 6rem;
  }
}



/* ---------------------------------------------------------------------------------------------

　   CTA

--------------------------------------------------------------------------------------------- */
.cta_area {
  max-width: 93rem;
  margin: 0 auto;
  position: relative;
  background: #fff;
  box-shadow: 0 0 1rem 0 rgba(3, 30, 85, 0.35);
}
.cta_area:before {
  content: "";
  position: absolute;
  background: url(../img/cta_label.png) no-repeat center center / contain;
  z-index: 10;
}
.cta_inner {
  border: 2px dotted #89c1e3;
}
.cta_img {
  text-align: center;
}
.cta_area .btn_cta {
  display: block;
  margin: 0 auto;
  max-width: 76.4rem;
}

@media only screen and ( max-width : 767px ) {
  .cta_area {
    border: .7rem solid #1484c7;
    border-radius: 1.5rem;
    padding: .6rem;
  }
  .cta_inner {
    padding: 0 1rem 1rem 1rem;
    border-radius: .8rem;
  }
  .cta_area:before {
    width: 7.5rem;
    height: 7.4rem;
    top: -3rem;
    left: -.5rem;
  }
  .btn_cta {
    width: 100%;
  }
  .cta_img {
    margin-left: -1rem;
    margin-right: -2rem;
    margin-top: -3rem;
    position: relative;
    z-index: 10;
  }
}
@media print, screen and ( min-width : 768px ) {
  .cta_area {
    border: .8rem solid #1484c7;
    border-radius: 2.5rem;
    padding: .8rem;
  }
  .cta_inner {
    padding: 0 4.5rem 2rem 4.5rem;
    border-radius: 1.5rem;
  }
  .cta_area:before {
    width: 11rem;
    height: 10.9rem;
    top: -2.5rem;
    right: -1.5rem;
  }
  .cta_img {
    margin-top: -7rem;
  }
}


/* ---------------------------------------------------------------------------------------------

　   MV

--------------------------------------------------------------------------------------------- */

#mv {
  position: relative;
}
.mv_logo,
.mv_label {
  position: absolute;
  z-index: 10;
}
.mv_logo img {
  width: 100%;
}
.mv_content {
  position: absolute;
  z-index: 10;
}
.mv_img {
  text-align: center;
}
@media only screen and ( max-width : 767px ) {
  .mv_logo {
    width: 24rem;
    top: 2rem;
    left: 2rem;
  }
  .mv_label {
    width: 9rem;
    right: 1rem;
    top: -21vw;
  }
  .mv_content {
    top: 22vw;
  }
  .mv_text {
    width: 98%;
    margin: 0 auto;
  }
  .mv_img {
    /* width: 94%;
    margin: 0 auto; */
    display: none;
  }
  .mv_cta {
    width: 56%;
    margin-left: 40%;
    margin-top: 31vw;
  }
}
@media print, screen and ( min-width : 768px ) {
  .mv_logo {
    width: 32.4%;
    left: 50%;
    transform: translateX(-50%);
    top: 1.72vw;
  }
  .mv_content {
    width: 67.2%;
    right: 0;
    top: 10vw;
    padding: 0 2.09%;
  }
  .mv_text {
    margin-bottom: .5vw;
  }
  .mv_img img {
    width: 90%;
  }
  .mv_cta {
    width: 98%;
    margin-top: -.5vw;
  }
  .mv_label {
    width: 21.6%;
    right: 5%;
    top: -9vw;
  }
}


/* ---------------------------------------------------------------------------------------------

　   キャンペーン

--------------------------------------------------------------------------------------------- */

/*アコーディオン*/
#cp .accordion {
	max-width: 1000px;
	margin: 1rem auto;
}
@media ( min-width: 601px ){
	#cp .accordion {
	margin-top: 3rem;
}
}

#cp .toggle {
	display: none;
}
#cp .Label {		/*タイトル*/
	padding: 5px;
	display: block;
/*	color: #fff;
	background:#e370a6;
*/}
/*.Label::before{		
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
*/
#cp .Label,
#cp .content2 {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
#cp .content2 {		/*本文*/
	height: 0;
	padding:0 20px;
	overflow: hidden;
	text-align: left;
	line-height: 1.6;
	font-size: 16px;
}
#cp .content2 ul {
	margin-top: 10px;
}
#cp .content2 li {
	padding-left:1em;
	text-indent:-1em;
	margin-bottom: 10px;
	list-style: none;
}
#cp .toggle:checked + .Label + .content2 {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}

/* ---------------------------------------------------------------------------------------------

　   ONAYAMI

--------------------------------------------------------------------------------------------- */
#onayami {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fbf5cc calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #fbf5cc calc(100% - 1px));
  background-size: 15px 15px;
  background-repeat: repeat;
  background-position: center center;
}
#onayami .check_list_wrapper {
  position: relative;
}
#onayami .check_list_wrapper::before,
#onayami .check_list_wrapper::after {
  content: "";
  position: absolute;
}
#onayami .check_list_wrapper::before {
  background: url(../img/onayami-man.svg) no-repeat center center / contain;
}
#onayami .check_list_wrapper::after {
  background: url(../img/onayami-woman.svg) no-repeat center center / contain;
}
.color-blue {
  color: #009cea;
}
.color-red {
  color: #e70000;
}
.color-orange {
  color: #f15a24;
}
.check_list {
  max-width: 74rem;
  margin: 0 auto;
  font-weight: 700;
}
.check_list li {
  position: relative;
}
.check_list li:last-child {
  margin-bottom: 0;
}
.check_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url(../img/check.svg) no-repeat center center / contain;
  width: 3.8rem;
  height: 3.6rem;
}
.check_list .marker {
  box-decoration-break: clone;  
  -webkit-box-decoration-break: clone;
  display: inline;
  background-image: linear-gradient(transparent 75%, #b2e1f9 75%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.8s ease;
  will-change: background-size;
}
.check_list .marker.is-animated {
  background-size: 100% 100%;
}
.onayami_bottom_text {
  text-align: center;
  font-weight: 700;
}
.onayami_bottom_text .marker,
.white_marker,
.campaign_content li .white_marker {
  box-decoration-break: clone;  
  -webkit-box-decoration-break: clone;
  display: inline;
  background: #fff;
  border-radius: .5rem;
  padding: 0 .3em;
  line-height: 1.8em;
}
.campaign_banner {
  text-align: center;
}

@media only screen and ( max-width : 767px ) {
  #onayami .onayami_inner {
    background: url(../img/onayami_bg_sp.png) no-repeat left bottom / 100%;
    padding-bottom: 10vw;
  }
  .campaign_banner {
    margin-bottom: 2.5rem;
  }
  #onayami .balloon {
    margin-bottom: 2rem;
    max-width: 26rem;
  }
  #onayami .check_list_wrapper::before {
    width: 6rem;
    height: 11.6rem;
    top: -13.6rem;
    left: 0;
  }
  #onayami .check_list_wrapper::after {
    width: 5rem;
    height: 10.5rem;
    top: -12.5rem;
    right: 0;
  }
  .check_list li {
    padding-left: 4rem;
    margin-bottom: 1.5rem;
  }
  .check_list li:last-child {
    margin-bottom: 0;
  }
  .check_list li::before {
    width: 2.6rem;
    height: 2.5rem;
  }
  .onayami_bottom_text {
    font-size: 2.5rem;
    margin-top: 8vw;
  }
}
@media print, screen and ( min-width : 768px ) {
  #onayami .onayami_inner {
    background: url(../img/onayami_bg_pc.png) no-repeat left bottom / 100%;
    padding-bottom: 10vw;
  }
  .campaign_banner {
    margin-bottom: 6rem;
  }
  .check_list li {
    font-size: 2.2rem;
    padding-left: 5rem;
    margin-bottom: 2.5rem;
  }
  .check_list li::before {
    width: 3.8rem;
    height: 3.6rem;
    top: -.4rem;
  }
  #onayami .check_list_wrapper::before {
    width: 16.4rem;
    height: 31.6rem;
    bottom: 0;
    left: -8rem;
  }
  #onayami .check_list_wrapper::after {
    width: 14rem;
    height: 29.4rem;
    bottom: 0;
    right: -3rem;
  }
  .onayami_bottom_text {
    font-size: 5.5rem;
    margin-top: 8vw;
  }
}
/* ---------------------------------------------------------------------------------------------

　   SOLUTION

--------------------------------------------------------------------------------------------- */
#solution {
  background: #fbf5cc;
}
.solution_text small {
  display: block;
}

.review .eng_title {
  text-align: center;
  font-weight: 700;
  position: relative;
}
.review .eng_title:before {
  content: "";
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  top: 50%;
  width: 100%;
  height: 2px;
  border-bottom: 3px dotted #000;
  z-index: 1;
}
.review .eng_title span {
  display: inline-block;
  position: relative;
  z-index: 2;
  background: #fbf5cc;
  padding: 0 1.2em;
}
.review_text {
  font-weight: 500;
  background: #fff;
  border: 2px solid #000;
  border-radius: .8rem;
  position: relative;
  box-shadow: 0 0 .8rem 0 rgba(84, 76, 4, 0.3);
  padding: 2rem 1.5rem;
  margin-top: 3rem;
}
.review_text:before {
  content: "";
  position: absolute;
}
#review01 .review_text:before {
  background: url(../img/review_balloon01.png) no-repeat center center / contain;
}
#review02 .review_text:before {
  background: url(../img/review_balloon02.png) no-repeat center center / contain;
}
#review03 .review_text:before {
  background: url(../img/review_balloon03.png) no-repeat center center / contain;
}
#review01 .review_text:before {
  width: 2.2rem;
  height: 2.6rem;
  top: -2.4rem;
  left: 40%;
}
#review02 .review_text:before {
  width: 2.2rem;
  height: 2.3rem;
  top: -2.3rem;
  left: 50%;
  transform: translateX(-50%);
}
#review03 .review_text:before {
  width: 2.3rem;
  height: 2.4rem;
  top: -2.3rem;
  right: 40%;
}
.review_title {
  text-align: center;
  position: relative;
  font-weight: 700;
}
.review_title:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-image : linear-gradient(to right, #333 2px, transparent 2px);
}


.review_title span {
  background: #fbf5cc;
  display: inline-block;
  position: relative;
  padding: 0 1em;
  z-index: 2;
}
@media only screen and ( max-width : 767px ) {
  .review_title {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
  }
  .review {
    margin-bottom: 5rem;
  }
  .review-swiper {
    overflow: hidden;
  }
  .review-swiper .swiper-wrapper {
    display: flex;
  }
  .review-swiper .swiper-slide {
    width: 100%;
    flex-shrink: 0;
  }
  .review_item {
    width: 100%;
    margin-bottom: 0;
  }
  .review-swiper .swiper-pagination {
    position: relative;
    margin-top: 2rem;
  }
  .review-swiper .swiper-button-prev,
  .review-swiper .swiper-button-next {
    width: 2rem;
    height: 2rem;
    margin-top: 0;
    top: 6rem;
    position: absolute;
  }
  .review-swiper .swiper-button-prev:after,
  .review-swiper .swiper-button-next:after {
    font-size: 1.8rem;
    font-weight: bold;
  }
  .review-swiper .swiper-button-prev {
    left: 0;
    background: url(../img/prev.svg) no-repeat center / contain;
  }
  .review-swiper .swiper-button-prev:after,
  .review-swiper .swiper-button-next:after {
    opacity: 0;
  }
  .review-swiper .swiper-button-next {
    right: 0;
    background: url(../img/next.svg) no-repeat center / contain;
  }
  .review-swiper .swiper-pagination-bullet-active {
    background: #000;
  }
  .solution_img {
    max-width: 20rem;
    margin: 0 auto .6rem;
  }
  .solution_text {
    text-align: center;
  }
  .solution_text img {
    max-width: 23rem;
  }
  .solution_text small {
    font-size: 9.6px;
    margin-top: 1rem;
  }
  .solution_text {
    margin-bottom: 3.5rem;
  }
  .review_img {
    max-width: 80%;
    margin: 0 auto;
  }
}
@media print, screen and ( min-width : 768px ) {
  .review_title {
    font-size: 2.8rem;
    margin-bottom: 2.5rem;
  }
  .solution_content {
    margin-bottom: 2.5rem;
  }
  .solution_img {
    width: 42%;
  }
  .solution_text {
    width: 54%;
  }
  .solution_text small {
    margin-top: 2rem;
    font-size: 1.5rem;
  }
  .review {
    margin-bottom: 7.4rem;
  }
  .review .eng_title {
    font-size: 2.8rem;
    margin-bottom: 4rem;
  }
  /* PC時はSwiperのスタイルを無効化 */
  .review-swiper {
    display: flex !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .review-swiper .swiper-wrapper {
    display: flex !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }
  .review-swiper .swiper-slide {
    width: 31% !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
  }
  .review_item {
    width: 100% !important;
  }
  .review-swiper .swiper-pagination {
    display: none !important;
  }
  .review-swiper .swiper-button-prev,
  .review-swiper .swiper-button-next {
    display: none !important;
  }
  .review_text {
    font-size: 1.8rem;
    border: .2rem solid #000;
  }
}


/* ---------------------------------------------------------------------------------------------

　   REASON

--------------------------------------------------------------------------------------------- */
#reason {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #d0e8f5 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #d0e8f5 calc(100% - 1px));
  background-size: 15px 15px;
  background-repeat: repeat;
  background-position: center center;
}
.reason_inner {
  background: linear-gradient(to right,  rgba(233,111,143,0.3) 0%,rgba(245,224,78,0.3) 100%);
}
#reason_item01 {
  background: #fbe2e9;
}
#reason_item02 {
  background: #fdf9cc;
}
.reason_content,
.reason_item {
  position: relative;
}
.reason_content:after {
  content: "";
  position: absolute;
  z-index: 2;
  background: url(../img/kakeru.svg) no-repeat center center / contain;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.reason_item:before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.reason_item .reason_num {
  position: absolute;
  z-index: 2;
}
.marker_dotted {
  box-decoration-break: clone;  
  -webkit-box-decoration-break: clone;
  display: inline;
  line-height: 1.7em;
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-image : linear-gradient(to right, #333 2px, transparent 2px);
}



.reason_text {
  position: relative;
  z-index: 2;
}
.reason_text p {
  font-weight: 700;
  text-align: center;
}
.reason_icon {
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.reason_more_btn {
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

@media only screen and ( max-width : 767px ) {
  #reason .balloon02 .fukidashi-text {
    padding: 0 1.5rem;
  }
  .reason_content:after {
    width: 4.8rem;
    height: 4.8rem;
  }
  .reason_num {
    width: 7.8rem;
    top: -2rem;
  }
  #reason_item01 .reason_num {
    left: -1rem;
  }
  #reason_item02 .reason_num {
    right: -1rem;
  }
  .reason_icon {
    width: 10rem;
    margin: 0 auto 1.5rem;
  }
  #reason_item01 {
    padding: 2rem 1.5rem 4rem;
    border-radius: 2rem 2rem 0 0;
  }
  #reason_item02 {
    padding: 4rem 1.5rem 2rem;
    border-radius: 0 0 2rem 2rem;
  }
  .reason_item:before {
    left: 0;
    width: calc(100% - .6rem);
    height: 98%;
  }
  #reason_item01:before {
    border-top: .3rem solid#e70000;
    border-left: .3rem solid#e70000;
    border-right: .3rem solid#e70000;
    border-radius: 2.2rem 2.2rem 0 0;
    top: -.3rem;
  }
  #reason_item02:before {
    border-left: .3rem solid #ef8d24;
    border-bottom: .3rem solid #ef8d24;
    border-right: .3rem solid #ef8d24;
    border-radius: 0 0 2.2rem 2.2rem;
    bottom: -.3rem;
  }
  .reason_text {
    font-size: 1.7rem;
  }
  .reason_text p {
    margin-bottom: 1.2rem;
  }
  .reason_more_btn {
    max-width: 18rem;
    margin: 0 auto;
    display: block;
  }
}

@media print, screen and ( min-width : 768px ) {
  #reason .balloon02 {
    margin-bottom: 7.5rem;
  }
  .reason_content:after {
    width: 9.2rem;
    height: 9.2rem;
  }
  .reason_item {
    width: 50%;
    padding: 3rem 3rem 3.5rem;
  }
  .reason_item:before {
    top: 0;
    width: 98%;
    height: calc(100% - .8rem);
  }
  #reason_item01:before {
    border-top: .4rem solid#e70000;
    border-left: .4rem solid#e70000;
    border-bottom: .4rem solid#e70000;
    border-radius: 4.4rem 0 0 4.4rem;
    left: -.4rem;
  }
  #reason_item02:before {
    border-top: .4rem solid #ef8d24;
    border-right: .4rem solid #ef8d24;
    border-bottom: .4rem solid #ef8d24;
    border-radius: 0 4.4rem 4.4rem 0;
    right: -.4rem;
  }
  #reason_item01 {
    border-radius: 4rem 0 0 4rem;
  }
  #reason_item02 {
    border-radius: 0 4rem 4rem 0;
  }
  .reason_item .reason_num {
    width: 15rem;
    top: -4.5rem;
  }
  #reason_item01 .reason_num {
    left: -4.5rem;
  }
  #reason_item02 .reason_num {
    right: -4.5rem;
  }
  .reason_text p {
    font-size: 3.6rem;
    margin-bottom: 2.5rem;
  }
  .reason_icon {
    width: 19.8rem;
    margin-bottom: 1rem;
  }
  .reason_more_btn {
    width: 23.6rem;
  }
}



/* ---------------------------------------------------------------------------------------------

　   REASON_CONTENT

--------------------------------------------------------------------------------------------- */
#reason_content01 {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fcd9d9 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #fcd9d9 calc(100% - 1px));
  background-size: 15px 15px;
  background-repeat: repeat;
  background-position: center center;
  position: relative;
}
#reason_content02 {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #faddbd calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #faddbd calc(100% - 1px));
  background-size: 15px 15px;
  background-repeat: repeat;
  background-position: center center;
  position: relative;
}
#reason_content01:after {
  content: "";
  position: absolute;
  z-index: 2;
  background: url(../img/kakeru.svg) no-repeat center center / contain;
  left: 50%;
  transform: translateX(-50%);
}
.reason_content_inner {
  background: #fff;
  box-shadow: .3rem .3rem .8rem rgba(3,37,45,0.35);
  position: relative;
}
#reason_content01 .reason_content_inner {
  border: .4rem solid #e80000;
}
#reason_content02 .reason_content_inner {
  border: .4rem solid #ef8d24;
}
.reason_content_inner .reason_num {
  position: absolute;
  z-index: 2;
}
.reason_content_img {
  overflow: hidden;
}
.reason_content_lead_text {
  position: relative;
}
.reason_content_title {
  text-align: center;
  position: relative;
}
#reason_content02 .reason_content_lead_text:before,
#reason_content02 .reason_content_lead_text:after {
  content: "";
  position: absolute;
}
#reason_content02 .reason_content_lead_text:before {
  background: url(../img/reason_content_title_img01.png) no-repeat center / contain;
}
#reason_content02 .reason_content_lead_text:after {
  background: url(../img/reason_content_title_img02.png) no-repeat center / contain;
}
.reason_content_title .marker {
  display: inline-block;
  background: url(../img/marker.png) no-repeat left bottom / 100%;
}
#reason_content01 .reason_content_title {
  color: #e80000;
}
#reason_content02 .reason_content_title {
  color: #ef8d24;
}

.reason_content_text .marker {
  box-decoration-break: clone;  
  -webkit-box-decoration-break: clone;
  display: inline;
  position: relative;
  /* background: linear-gradient(transparent 80%, #f8e261 50%); */
}
.reason_content_text .marker::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.5em;
  background: #f8e261;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease;
  z-index: -1;
  will-change: transform;
  opacity: .53;
}
.reason_content_text .marker.is-animated::before {
  transform: scaleX(1);
}
.reason_content_text {
  text-align: center;
  font-weight: 700;
  line-height: 2em;
}
.reason_merit {
  position: relative;
}
.reason_merit_title {
  text-align: center;
  position: relative;
  border: .4rem solid #000;
  border-radius: 3.5rem;
}
.reason_merit_title:before {
  width: calc(100% + .8rem);
  top: -.4rem;
  height: 3rem;
  background: #fff;
  left: -.4rem;
  position: absolute;
  content: "";
}
.reason_merit_title:after {
  content: "";
  position: absolute;
  background: #000;
  left: 50%;
  transform: translateX(-50%);
  width: .4rem;
  height: 2.8rem;
  bottom: -2.8rem;
}
.reason_merit_item_title {
  color: #fff;
}
.reason_merit_item_title_num img {
  display: block;
}
.reason_merit_item_title_text h3 {
  line-height: 1.3em;
}
.reason_merit_item_text span {
  font-weight: 700;
}
.reason_memo {
  background: #fefce5;
  position: relative;
}
.reason_memo:after {
  content: "";
  background: url(../img/memo_img.png) no-repeat center / contain;
  position: absolute;
}
.reason_memo h3 {
  text-align: center;
}
.reason_memo_text .reason_memo_text_small small {
  display: block;
}
.reason_worksheet_text {
  text-align: center;
  font-weight: 700;
}
.reason_worksheet_text .fukidashi-text {
  display: inline-block;
  position: relative;
}
.reason_worksheet_text .fukidashi-text:before,
.reason_worksheet_text .fukidashi-text:after {
  content: "";
  background: #000;
  bottom: 0;
  position: absolute;
  width: .4rem;
}
.reason_worksheet_text .fukidashi-text:before {
  left: 0;
  transform: rotate(-30deg);
}
.reason_worksheet_text .fukidashi-text:after {
  right: 0;
  transform: rotate(30deg);
}
.reason_worksheet {
  position: relative;
}
.reason_worksheet h3 {
  text-align: center;
}
.reason_content_sec .number_list {
  background: #fdeede;
  border: .4rem solid #ef8d24;
  position: relative;
}
.reason_content_sec .number_list:before {
  content: "";
  position: absolute;
  background: #fff;
  width: 4rem;
  height: .4rem;
  left: 6rem;
  top: -.4rem;
}
.reason_content_sec .number_list li {
  position: relative;
  font-weight: 700;
  padding-left: 4.5rem;
}
.reason_content_sec .number_list li .check_list_num {
  background: #ef8d24;
  color: #fff;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}
.screenshot_list h3 {
  font-weight: bold;
  color: #fff;
  background: #ef8d24;
  position: relative;
  text-align: center;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  border-radius: 4.5rem;
}
.screenshot_list h3::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 12px;
  background: #ef8d24;
  bottom: -12px;
  left: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: auto;
}
@media only screen and ( max-width : 767px ) {
  #reason_content01 {
    padding-bottom: 5.6rem;
  }
  #reason_content02 {
    padding-top: 5.6rem;
  }
  #reason_content01 .reason_content_inner {
    border: .3rem solid #e80000;
  }
  #reason_content02 .reason_content_inner,
  .reason_content_sec .number_list {
    border: .3rem solid #ef8d24;
  }
  .screenshot_list {
    position: relative;
  }
  .screenshot-swiper {
    overflow: hidden;
  }
  .screenshot-swiper .swiper-wrapper {
    display: flex;
  }
  .screenshot-swiper .swiper-slide {
    width: 100%;
    flex-shrink: 0;
  }
  .screenshot_item {
    width: 100%;
    margin-bottom: 0;
    text-align: center;
  }
  .screenshot-swiper .swiper-pagination {
    position: relative;
    margin-top: 2rem;
  }
  .screenshot-swiper .swiper-button-prev,
  .screenshot-swiper .swiper-button-next {
    width: 2rem;
    height: 2rem;
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }
  .screenshot-swiper .swiper-button-prev:after,
  .screenshot-swiper .swiper-button-next:after {
    font-size: 1.8rem;
    font-weight: bold;
  }
  .screenshot-swiper .swiper-button-prev {
    left: 0;
    background: url(../img/prev.svg) no-repeat center / contain;
  }
  .screenshot-swiper .swiper-button-prev:after,
  .screenshot-swiper .swiper-button-next:after {
    opacity: 0;
  }
  .screenshot-swiper .swiper-button-next {
    right: 0;
    background: url(../img/next.svg) no-repeat center / contain;
  }
  .screenshot-swiper .swiper-pagination-bullet-active {
    background: #000;
  }
  #reason_content01:after {
    width: 5.8rem;
    height: 5.8rem;
    bottom: -3rem;
  }
  .reason_content_inner {
    border-radius: 2.5rem;
  }
  .reason_merit_list {
    width: 28rem;
    margin: 0 auto;
  }
  .reason_merit_item {
    margin-bottom: 2rem;
  }
  .reason_merit_item_title img {
    width: auto;
    height: 3.4rem;
  }
  .reason_merit_item_title {
    display: flex;
    align-items: center;
    background: url(../img/merit_bg_sp.png) no-repeat center / contain;
    height: 8rem;
    font-size: 1.7rem;
    padding: 1.5rem 3rem 3rem;
    margin-bottom: 1rem;
  }
  .reason_merit_item_title_num {
    width: 5rem;
    margin-right: 1.5rem;
    position: relative;
  }
  .reason_merit_item_title_num:after {
    content: "";
    position: absolute;
    width: .5px;
    height: 4rem;
    background: #fff;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
  }
  .reason_merit_item_title_text {
    width: calc(100% - (5rem + 1.5rem));
  }
  .reason_content_inner .reason_num {
    width: 7.8rem;
    top: -1.5rem;
  }
  #reason_content01 .reason_num {
    left: -1rem;
  }
  #reason_content02 .reason_num {
    right: -1rem;
  }
  .reason_content_img {
    border-radius: 2rem 2rem 0 0;
  }
  .reason_content_inner_content {
    padding: 2.5rem 1.5rem;
  }
  .reason_content_title {
    font-size: 2.7rem;
    margin-bottom: 2.5rem;
  }
  .reason_content_text {
    font-size: 1.5rem;
    margin-bottom: 3rem;
  }
  .reason_content_lead_text:before,
  .reason_content_lead_text:after {
    content: "";
    position: absolute;
  }
  .reason_content_lead_text:before {
    background: url(../img/merit_img01.png) no-repeat center / contain;
    width: 6.2rem;
    height: 8.6rem;
  }
  .reason_content_lead_text:after {
    background: url(../img/merit_img02.png) no-repeat center / contain;
    width: 5rem;
    height: 8rem;
  }
  #reason_content01 .reason_content_lead_text:before {
    top: -4rem;
    left: 0;
  }
  #reason_content01 .reason_content_lead_text:after {
    top: -5rem;
    right: 0;
  }
  #reason_content02 .reason_content_lead_text:before {
    top: 4rem;
    left: -2rem;
  }
  #reason_content02 .reason_content_lead_text:after {
    top: 5rem;
    right: -1rem;
  }
  .reason_merit_title {
    font-size: 2.2rem;
    margin: 0 auto 3.5rem;
    padding: 0 0 1rem;
    border: .3rem solid #000;
    border-radius: 0 0 2rem 2rem;
  }
  .reason_merit_title:before {
    height: 1rem;
  }
  .reason_merit_title:after {
    width: .3rem;
  }
  .reason_memo {
    padding: 2.5rem 1.5rem;
    border-radius: 1.5rem;
    margin-bottom: 3rem;
  }
  .reason_memo h3 {
    font-size: 1.9rem;
    margin-bottom: 1.5rem;
  }
  .reason_memo h3 .small_text {
    font-size: 1.6rem;
  }
  .reason_memo_img {
    margin-bottom: 1.5rem;
  }
  .reason_memo_text {
    font-size: 1.3rem;
  }
  .reason_memo_text_small {
    font-size: 1rem;
    margin-top: 3rem;
  }
  .reason_memo_text .reason_memo_text_small small {
    margin-top: 1rem;
    font-size: .8rem;
  }
  .reason_memo:after {
    width: 4.8rem;
    height: 5.8rem;
    bottom: -6rem;
    right: -1rem;
  }


  .reason_worksheet_text {
    font-size: 1.3rem;
  }
  .reason_worksheet_text .fukidashi-text {
    padding: 0 1rem;
  }
  .reason_worksheet_text .fukidashi-text:before,
  .reason_worksheet_text .fukidashi-text:after {
    height: 80%;
    width: .2rem;
  }
  .reason_worksheet h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    margin-top: .5rem;
  }
  .reason_worksheet_img {
    overflow: auto;
  }
  .reason_worksheet_img .reason_worksheet_img_inner {
    width: 60rem;
  }
  .reason_content_sec .number_list {
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    margin-bottom: 3.5rem;
  }
  .reason_content_sec .number_list li .check_list_num {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.1rem;
  }
  .reason_content_sec .number_list li {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    padding-left: 3rem;
  }
  .reason_content_sec .number_list li:last-child {
    margin-bottom: 0;
  }
}
@media print, screen and ( min-width : 768px ) {
  #reason_content01:after {
    width: 9.2rem;
    height: 9.2rem;
    bottom: -4.6rem;
  }
  .reason_content_inner {
    border-radius: 3.2rem;
  }
  .reason_merit_item_title img {
    width: auto;
    height: 5.2rem;
  }
  .reason_content_inner .reason_num {
    width: 15rem;
    top: -4rem;
  }
  #reason_content01 .reason_num {
    left: -3rem;
  }
  #reason_content02 .reason_num {
    right: -3rem;
  }
  .reason_content_img {
    border-radius: 2.9rem 2.9rem 0 0;
  }
  .reason_content_inner_content {
    padding: 4.5rem 7.5rem;
  }
  .reason_content_title {
    font-size: 6rem;
    margin-bottom: 3.5rem;
  }
  .reason_content_text {
    font-size: 2.2rem;
    margin-bottom: 7.5rem;
  }
  .reason_merit:before,
  .reason_merit:after {
    content: "";
    position: absolute;
  }
  .reason_merit:before {
    background: url(../img/merit_img01.png) no-repeat center / contain;
    width: 13.9rem;
    height: 19.3rem;
    left: -4rem;
    top: -4rem;
  }
  .reason_merit:after {
    background: url(../img/merit_img02.png) no-repeat center / contain;
    width: 12.1rem;
    height: 19.4rem;
    right: -2rem;
    top: -4rem;
  }
  .reason_merit_title {
    font-size: 4.3rem;
    max-width: 61rem;
    margin: 0 auto 6rem;
    padding: 1rem 0 2.5rem;
  }
  .reason_merit_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  .reason_merit_item:last-child {
    margin-bottom: 0;
  }
  .reason_merit_item_title {
    display: flex;
    align-items: center;
    background: url(../img/merit_bg.png) no-repeat left center / contain;
    width: 37.6rem;
    height: 11rem;
    font-size: 2.6rem;
    padding: 0 2.5rem;
  }
  .reason_merit_item_title_num {
    width: 8rem;
    margin-right: 2.5rem;
    border-right: 1px solid #fff;
  }
  .reason_merit_item_title_text {
    width: calc(100% - (8rem + 2.5rem));
  }
  .reason_merit_item_text {
    width: 44rem;
    font-size: 2.1rem;
  }
  .reason_merit {
    margin-bottom: 5.6rem;
  }
  .reason_memo {
    border-radius: 2.6rem;
    padding: 4rem;
    margin-bottom: 4.5rem;
  }
  .reason_memo:after {
    width: 11.1rem;
    height: 13.4rem;
    bottom: -10rem;
    right: -4.5rem;
  }
  .reason_memo h3 {
    font-size: 3.4rem;
    margin-bottom: 2.5rem;
  }
  .reason_memo h3 .small_text {
    font-size: 2.8rem;
  }
  .reason_memo_img {
    width: 41.2rem;
    margin-right: 4rem;
  }
  .reason_memo_text {
    width: calc(100% - 41.2rem - 4rem);
    font-size: 1.8rem;
  }
  .reason_memo_text .reason_memo_text_small {
    font-size: 1.3rem;
    margin-top: 4rem;
  }
  .reason_memo_text .reason_memo_text_small small {
    font-size: 1rem;
    margin-top: 2.5rem;
  }
  .reason_worksheet_text {
    font-size: 3rem;
  }
  .reason_worksheet_text .fukidashi-text {
    padding: 0 3rem;
  }
  .reason_worksheet_text .fukidashi-text:before,
  .reason_worksheet_text .fukidashi-text:after {
    height: 80%;
  }
  .reason_worksheet h3 {
    font-size: 4.3rem;
    margin-bottom: 3rem;
  }
  .reason_content_sec .number_list {
    padding: 4.5rem 4rem;
    border-radius: 3rem;
    margin-bottom: 6rem;
  }
  .reason_content_sec .number_list li {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
  }
  .reason_content_sec .number_list li:last-child {
    margin-bottom: 0;
  }
  /* PC時はSwiperのスタイルを無効化 */
  .screenshot-swiper {
    display: block !important;
    overflow: visible !important;
  }
  .screenshot-swiper .swiper-wrapper {
    display: flex !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }
  .screenshot-swiper .swiper-slide {
    width: auto !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
  }
  .screenshot_item {
    width: auto;
  }
  .screenshot-swiper .swiper-pagination {
    display: none !important;
  }
  .screenshot-swiper .swiper-button-prev,
  .screenshot-swiper .swiper-button-next {
    display: none !important;
  }
  .screenshot_list h3 {
    font-size: 2.2rem;
  }
  #reason_content02 .reason_content_lead_text:before {
    width: 10.1rem;
    height: 20.7rem;
    left: -2rem;
    bottom: -2rem;
  }
  #reason_content02 .reason_content_lead_text:after {
    width: 15.5rem;
    height: 18.7rem;
    right: -6rem;
    bottom: -2rem;
  }
}


/* ---------------------------------------------------------------------------------------------

　   FLOW

--------------------------------------------------------------------------------------------- */
.flow_sec_title {
  position: relative;
}
.flow_sec_title:before {
  content: "";
  position: absolute;
  background: url(../img/flow_title_img.png) no-repeat center / contain;
}
.flow_text {
  text-align: center;
  font-weight: 700;
}
.flow_text .marker {
  display: inline-block;
  background: url(../img/marker.png) no-repeat left bottom / 100%;
}
.flow_text .fukidashi-text {
  display: inline-block;
  position: relative;
}
.flow_text .fukidashi-text:before,
.flow_text .fukidashi-text:after {
  content: "";
  background: #000;
  bottom: 0;
  position: absolute;
  width: .4rem;
}
.flow_text .fukidashi-text:before {
  left: 0;
  transform: rotate(-30deg);
}
.flow_text .fukidashi-text:after {
  right: 0;
  transform: rotate(30deg);
}
#flow h2 {
  text-align: center;
}
#flow_item01 {
  background: #d8e1a0;
}
#flow_item02 {
  background: #bdddb6;
}
#flow_item03 {
  background: #a2d9cd;
}
.flow_title_area {
  border-bottom: 1px solid #000;
  padding-bottom: 1rem;
}
.flow_title_area h3 .white_marker {
  box-decoration-break: clone;  
  -webkit-box-decoration-break: clone;
  display: inline;
  background: #fff;
  padding: 0 .3em;
  border-radius: 0;
}
.flow_item_num {
  text-align: center;
  border-right: 1px solid #000;
}
.flow_item_content p {
  line-height: 1.8em;
}

@media only screen and ( max-width : 767px ) {
  .flow_sec_title:before {
    width: 4.8rem;
    height: 6.6rem;
    bottom: -5.5rem;
    right: 1rem;
  }
  .flow_item {
    padding: 3rem 0 8vw;
  }
  #flow_item01 {
    background: url(../img/flow_bg01_sp.png) no-repeat left bottom / contain #d8e1a0;
  }
  #flow_item02 {
    background: url(../img/flow_bg02_sp.png) no-repeat left bottom / contain #bdddb6;
  }
  #flow_item03 {
    background: url(../img/flow_bg03_sp.png) no-repeat left bottom / contain #a2d9cd;
  }
  .flow_text {
    font-size: 1.7rem;
  }
  .flow_text .fukidashi-text {
    padding: 0 1.5rem;
  }
  .flow_text .fukidashi-text:before,
  .flow_text .fukidashi-text:after {
    height: 80%;
    width: .2rem;
  }
  #flow h2 {
    font-size: 2.5rem;
    margin-top: .8rem;
    margin-bottom: 2.5rem;
  }
  .flow_item_num {
    width: 5.4rem;
    margin-right: 1.2rem;
    text-align: left;
  }
  .flow_item_num img {
    height: 4.2rem;
    width: auto;
  }
  .flow_item_img {
    margin-left: -3rem;
    margin-right: -3rem;
  }
  .flow_item_img img {
    width: 100%;
  }
  .flow_item_content {
    font-size: 1.4rem;
  }
  .flow_title_area {
    margin-bottom: 1.5rem;
    align-items: center !important;
  }
  .flow_title_area h3 {
    width: calc(100% - 5.4rem - 1.2rem);
  }
  .flow_title_area h3 span {
    font-size: 1.7rem;
  }
}
@media print, screen and ( min-width : 768px ) {
  .flow_sec_title:before {
    width: 10.1rem;
    height: 15.4rem;
    bottom: -7rem;
    left: 0;
  }
  .flow_item {
    padding: 5rem 0 5vw;
  }
  #flow_item01 {
    background: url(../img/flow_bg01.png) no-repeat left bottom / contain #d8e1a0;
  }
  #flow_item02 {
    background: url(../img/flow_bg02.png) no-repeat left bottom / contain #bdddb6;
  }
  #flow_item03 {
    background: url(../img/flow_bg03.png) no-repeat left bottom / contain #a2d9cd;
  }
  .flow_text {
    font-size: 4.3rem;
  }
  .flow_text .fukidashi-text {
    padding: 0 3rem;
  }
  .flow_text .fukidashi-text:before,
  .flow_text .fukidashi-text:after {
    height: 80%;
  }
  #flow h2 {
    font-size: 5.4rem;
    margin-top: 1.5rem;
    margin-bottom: 5rem;
  }
  .flow_item_num img {
    height: 5.6rem;
    width: auto;
  }
  .flow_item_img {
    width: 40rem;
    margin-left: 4.5rem;
  }
  .flow_item_content {
    width: calc(100% - 40rem - 4.5rem);
    font-size: 2.2rem;
  }
  .flow_title_area {
    margin-bottom: 3rem;
  }
  .flow_title_area h3 {
    width: calc(100% - 9.4rem - 2.4rem);
  }
  .flow_title_area h3 span {
    font-size: 3.1rem;
  }
  .flow_item_num {
    width: 9.4rem;
    margin-right: 2.4rem;
  }
}


/* ---------------------------------------------------------------------------------------------

　   SUPPORT

--------------------------------------------------------------------------------------------- */
.support_wrapper {
  background: linear-gradient(to right,  rgba(232,0,0,1) 0%,rgba(239,141,36,1) 100%);
}
.support_inner {
  background-color: #fff;
  position: relative;
}
.support_inner:after {
  content: "";
  position: absolute;
}
.support_title {
  background: linear-gradient(to right,  rgba(232,0,0,1) 0%,rgba(239,141,36,1) 100%);
  color: #fff;
  border-radius: 0 0 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
}
.support_title p {
  font-weight: 700;
}
.support_content p {
  font-weight: 700;
  line-height: 1.8em;
}
@media only screen and ( max-width : 767px ) {
  #support {
    margin-top: 3rem;
  }
  .support_wrapper {
    padding: .3rem;
    border-radius: 2rem;
  }
  .support_inner {
    background: url(../img/dot_sp.jpg) no-repeat top left / cover;
    border-radius: 1.6rem;
  }
  .support_inner:after {
    background: url(../img/support_img_sp.png) no-repeat center / contain;
    top: -3.5rem;
    right: .5rem;
    width: 29rem;
    height: 19.3rem;
  }
  .support_title {
    width: 14rem;
    height: 3.8rem;
    right: 1rem;
    top: 0;
    font-size: 1rem;
  }
  .support_content {
    padding: 17rem .5rem 2rem;
  }
  .support_content p {
    padding: 0 .5rem;
  }
  .support_title_text {
    font-size: 2.3rem;
    margin-bottom: 1rem;
  }
}
@media print, screen and ( min-width : 768px ) {
  .support_wrapper {
    padding: .4rem;
    border-radius: 3rem;
  }
  .support_inner {
    background: url(../img/dot.jpg) no-repeat top left / cover;
    border-radius: 2.6rem;
  }
  .support_inner:after {
    background: url(../img/support_img.png) no-repeat center / contain;
    bottom: 0;
    right: .2rem;
    width: 51.6rem;
    height: 43.5rem;
  }
  .support_title {
    width: 23rem;
    height: 4.6rem;
    font-size: 1.4rem;
    left: 8rem;
  }
  .support_content {
    padding: 7rem 0 4.5rem 5rem;
  }
  .support_title_text {
    font-size: 4.1rem;
    margin-bottom: 2rem;
  }
  .support_content p {
    font-size: 2.1rem
  }
}


/* ---------------------------------------------------------------------------------------------

　   comparison

--------------------------------------------------------------------------------------------- */
#comparison {
  background: #fbf5cc;
  position: relative;
}
.comparison_inner {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fcd9d9 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #fcd9d9 calc(100% - 1px));
  background-size: 15px 15px;
  background-repeat: repeat;
  background-position: center center;
}
.comparison_text {
  text-align: center;
  font-weight: 700;
  position: relative;
}
.comparison_text::before,
.comparison_text::after {
  content: "";
  position: absolute;
}
.comparison_text p {
  line-height: 2em;
}
.tab-group {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.tab {
  cursor: pointer;
  position: relative;
  border-radius: 1.2rem 1.2rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.tab span {
  color: #fff;
}
.tab-parent .tab span,
.tab-parent .tab:after {
  opacity: .6;
}
.tab-parent .tab.is-active span,
.tab-parent .tab.is-active:after {
  opacity: 1;
}
.tab-parent .tab:after {
  content: "";
  position: absolute;
  background: url(../img/arrow.svg) no-repeat center center / contain;
}
.tab-child .tab::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 12px;
  bottom: -12px;
  left: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: auto;
}
.tab-parent .tab-1,
.tab-1 .tab-child .tab,
.tab-1 .tab-child .tab.is-active::before,
.tab-1.parent-panel:before {
  background-color: #e85e5d;
}
.tab-parent .tab-2,
.tab-2 .tab-child .tab,
.tab-2 .tab-child .tab.is-active::before,
.tab-2.parent-panel:before {
  background-color: #6ec1eb;
}
.tab-parent .tab-3,
.tab-3 .tab-child .tab,
.tab-3 .tab-child .tab.is-active::before,
.tab-3.parent-panel:before {
  background-color: #ee8ca5;
}
.tab-parent .tab-4,
.tab-4 .tab-child .tab,
.tab-4 .tab-child .tab.is-active::before,
.tab-4.parent-panel:before {
  background-color: #6ec1ab;
}
.tab-parent .tab-5,
.tab-5 .tab-child .tab,
.tab-5 .tab-child .tab.is-active::before,
.tab-5.parent-panel:before {
  background-color: #fbb178;
}
.tab-parent .tab-6,
.tab-6 .tab-child .tab,
.tab-6 .tab-child .tab.is-active::before,
.tab-6.parent-panel:before {
  background-color: #0060a1;
}
.tab-child .tab {
  opacity: .3;
}
.tab-child .tab.is-active {
  opacity: 1;
}

.panel-group {
  position: relative;
}
.parent-panel {
  position: relative;
}
.parent-panel:before {
  height: 1.8rem;
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
}

.tab-group li span {
  display: block;
  text-align: center;
}
.panel {
  display: none;
  position: relative;
  z-index: 2;
}
.panel.is-show {
  display: block;
}

.parent-panel-group {
  background: #fff;
  border-radius: 0 0 3rem 3rem;
  box-shadow: .3rem .3rem 1.2rem rgba(3,37,45,.35);
}
.child-panel-group {
  background: none;
}
.child-panel-group .panel {
  padding: 0;
}
.comparison_price_text {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.comparison_price_month {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #e70000;
  font-weight: 700;
  border: 1px solid #e70000;
  padding: .3em 0;
  border-radius: .3rem;
}
.comparison_price_num {
  font-weight: 700;
  color: #e70000;
  letter-spacing: -.05em;
  line-height: 1;
}
.comparison_price_yen {
  position: relative;
  font-weight: 700;
  color: #e70000;
}
.comparison_price_yen small {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
}
.comparison_img p {
  color: #b3b3b3;
}
.popy_logo {
  text-align: center;
}
.comparison_price_text_small a {
  text-decoration: underline;
}
@media only screen and ( max-width : 767px ) {
  .comparison_text {
    margin-bottom: 5rem;
  }
  .tab {
    flex: 1;
    margin-right: .3rem;
    height: 3rem;
    font-size: 1.3rem;
    border-radius: .4rem .4rem 0 0;
  }
  .tab-parent .tab {
    align-items: flex-start;
  }
  .tab-parent .tab.is-active {
    height: 4rem;
    font-size: 1.5rem;
    padding: .5rem 0;
  }
  .tab:last-child {
    margin-right: 0;
  }
  .tab-parent .tab:after {
    width: .6rem;
    height: .6rem;
    transform: translateX(-50%) rotate(90deg);
    left: 50%;
    bottom: .5rem;
  }
  .panel {
    padding: 3rem 1.5rem 2rem;
  }
  .comparison_img p {
    font-size: 1.1rem;
    margin-top: 1rem;
  }
  .comparison_price_text_small {
    font-size: 1rem;
    margin-top: 1rem;
  }
  .popy_logo {
    margin-bottom: 2rem;
  }
  .popy_logo img {
    height: 3rem;
    width: auto;
  }
  .comparison_img {
    margin-bottom: 2rem;
  }
  .comparison_price_month {
    font-size: 1.3rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
  }
  .comparison_price_num {
    font-size: 7.6rem;
  }
  .comparison_price_yen {
    font-size: 3.8rem;
  }
  .comparison_price_yen small {
    font-size: 1.1rem;
    top: -.5em;
  }
  .child-panel-group .panel {
    padding: 1.5rem 0;
  }
  .tab-child .tab {
    border-radius: .8rem .8rem 0 0;
    font-size: 1.4rem;
  }
  .comparison_text::before {
    background: url(../img/comparison_boy_img_sp.png) no-repeat center / contain;
    width: 6.8rem;
    height: 25.1rem;
    left: -2.5rem;
    bottom: -1rem;
  }
  .comparison_text::after {
    background: url(../img/comparison_girl_img_sp.png) no-repeat center / contain;
    width: 6.4rem;
    height: 23.5rem;
    right: -2.5rem;
    bottom: -1rem;
  }
}

@media print, screen and ( min-width : 768px ) {
  #comparison .comparison_inner {
    padding-bottom: 12vw;
  }
  #comparison:after {
    background: url(../img/comparison_bg.png) no-repeat left bottom / contain;
    content: "";
    width: 100%;
    height: 10vw;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .comparison_text {
    font-size: 2.2rem;
    margin-bottom: 10rem;
  }
  .tab {
    height: 4.2rem;
    width: 40rem;
    font-size: 1.8rem;
    margin-right: .8rem;
  }
  .tab-parent .tab.is-active {
    height: 5.8rem;
    font-size: 2.8rem;
  }
  .tab:last-child {
    margin-right: 0;
  }
  .tab-parent .tab:after {
    width: 1.4rem;
    height: 1.4rem;
    transform: translateY(-50%) rotate(90deg);
    right: 1rem;
    top: 50%;
  }
  .panel {
    padding: 4.5rem 7rem;
  }
  .child-panel-group .panel {
    padding: 2rem 0;
  }
  .comparison_img {
    width: 48%;
  }
  .comparison_price {
    width: 48%;
  }
  .comparison_price_month {
    font-size: 1.9rem;
    margin-right: .5rem;
  }
  .comparison_price_num {
    font-size: 11rem;
  }
  .comparison_price_yen {
    font-size: 5.6rem;
  }
  .comparison_price_yen small {
    font-size: 1.6rem;
    top: -.5em;
  }
  .comparison_img p,
  .comparison_price_text_small {
    font-size: 1.5rem;
    margin-top: 1.5rem;
  }
  .popy_logo {
    margin-bottom: 2rem;
  }
  .popy_logo img {
    height: 4.2rem;
    width: auto;
  }
  .comparison_text::before {
    background: url(../img/comparison_boy_img.png) no-repeat center / contain;
    width: 14.7rem;
    height: 32.7rem;
    left: 1rem;
    bottom: -5rem;
  }
  .comparison_text::after {
    background: url(../img/comparison_girl_img.png) no-repeat center / contain;
    width: 11.9rem;
    height: 30.5rem;
    right: 2rem;
    bottom: -5rem;
  }
}



/* ---------------------------------------------------------------------------------------------

　   CAMPAIGN

--------------------------------------------------------------------------------------------- */
.campaign_title {
  text-align: center;
}
.campaign_content {
  background-color: #fff;
  position: relative;
  border-left: .4rem solid #e70000;
  border-right: .4rem solid #e70000;
  border-bottom: .4rem solid #e70000;
}
.campaign_content li {
  position: relative;
  font-weight: 700;
}
.campaign_content li:last-child {
  margin-bottom: 0;
}
.campaign_content li::before {
  content: "";
  position: absolute;
  left: 0;
  background: url(../img/check_red.svg) no-repeat center / contain;
}
.campaign_content:after {
  content: "";
  position: absolute;
  background: url(../img/campaign_img.png) no-repeat center / contain;
}
@media only screen and ( max-width : 767px ) {
  .campaign_title {
    margin-bottom: 1rem;
  }
  .campaign_content {
    padding: 1.5rem 1rem;
    border-radius: 0 0 2rem 2rem;
    overflow: hidden;
    /* background-size: 1rem 1rem;
    background-image: radial-gradient(circle at center, #f8ebb2 1.5px, transparent 1.5px); */
    background: url(../img/dot_sp.jpg) no-repeat top left / cover;
  }
  .campaign_content li {
    font-size: 1.5rem;
    padding-left: 2rem;
    margin-bottom: .8rem;
  }
  .campaign_content li::before {
    width: 1.8rem;
    height: 1.7rem;
    top: 0.5rem;
  }
  .campaign_content:after {
    width: 12rem;
    height: 9.3rem;
    right: -1rem;
    bottom: 0;
  }
}
@media print, screen and ( min-width : 768px ) {
  .campaign_title {
    margin-bottom: 3rem;
  }
  .campaign_content {
    padding: 4rem;
    border-radius: 0 0 4rem 4rem;
    background: url(../img/dot.jpg) no-repeat top left / cover;
    /* background-size: 1.5rem 1.5rem;
    background-image: radial-gradient(circle at center, #f8ebb2 3px, transparent 3px); */
  }
  .campaign_content li {
    font-size: 2.7rem;
    padding-left: 4rem;
    margin-bottom: 1rem;
  }
  .campaign_content li::before {
    width: 3.8rem;
    height: 3.5rem;
    top: .5rem;
  }
  .campaign_content:after {
    width: 30.2rem;
    height: 23.3rem;
    right: 2rem;
    bottom: 0;
  }
}



/* ---------------------------------------------------------------------------------------------

　   VOICE

--------------------------------------------------------------------------------------------- */
#voice {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #fcd9d9 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #fcd9d9 calc(100% - 1px));
  background-size: 15px 15px;
  background-repeat: repeat;
  background-position: center center;
}
.voice_sec_title {
  position: relative
}
.voice_sec_title:before,
.voice_sec_title:after {
  content: "";
  position: absolute;
  z-index: 3;
}
.voice_sec_title:before {
  background: url(../img/voice_title_img01.png) no-repeat center / contain;
}
.voice_sec_title:after {
  background: url(../img/voice_title_img02.png) no-repeat center / contain;
}
.voice_container { 
  background: #fff;
  padding: 2rem;
}
@media only screen and ( max-width : 767px ) {
  .voice_sec_title:before {
    width: 4.8rem;
    height: 6.8rem;
    bottom: -2rem;
    left: 1rem;
  }
  .voice_sec_title:after {
    width: 7rem;
    height: 7.3rem;
    right: -2rem;
    bottom: -2rem;
  }
  .voice_container { 
    padding: 1rem;
  }
}
@media print, screen and ( min-width : 768px ) {
  .voice_sec_title:before {
    width: 11.1rem;
    height: 15.7rem;
    bottom: -2rem;
    left: 2rem;
  }
  .voice_sec_title:after {
    width: 17rem;
    height: 17.6rem;
    right: -2rem;
    bottom: -2rem;
  }
  .voice_container { 
    padding: 2rem;
  }
}



/* ---------------------------------------------------------------------------------------------

　   よくあるご質問

--------------------------------------------------------------------------------------------- */
#faq {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #b9ddf0 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #b9ddf0 calc(100% - 1px));
  background-size: 15px 15px;
  background-repeat: repeat;
  background-position: center center;
}
.faq_wrapper {
  max-width: 100rem;
  margin: 0 auto;
  position: relative;
}
.faq_wrapper:after {
  content: "";
  position: absolute;
  background: url(../img/faq_img.png) no-repeat center / contain;
  z-index: 3;
}
.faq_wrapper .balloon02 {
  position: relative;
}
.faq_wrapper .balloon02:after {
  content: "";
  position: absolute;
  background: url(../img/faq_title_img.png) no-repeat center / contain;
  z-index: 3;
}
.accordion_wrap {
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: .3rem .3rem .8rem 0 rgba(3, 37, 45, 0.35);
}
.accordion_wrap:last-child {
  margin-bottom: 0;
}
.accordion_header {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 700;
  transition: .3s;
  background: #e70000;
  color: #fff;
}
.accordion_header.open {
}
.accordion_header:before {
  content: "Q";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: .3s;
  font-size: 2rem;
  font-weight: 700;
  color: #e70000;
  background: #fff;
  border-radius: 50%;
  width: 3.6rem;
  height: 3.6rem;
  font-family: "Public Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acc_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);;
  display: block;
  transition: .3s;
}
.acc_arrow img {
  display: block;
  width: 1.4rem;
}
.accordion_header.open .acc_arrow {
  transform: translateY(-50%) rotate(270deg);
}

.accordion_header.open {
}
.accordion_content {
  position: relative;
  display: none;
  background: #fff;
}

.accordion_content p {
  line-height: 1.8em;
}

@media only screen and ( max-width : 767px ) {
  #faq .balloon02 .fukidashi-text {
    padding: 0 2.5rem;
  }
  .balloon02 .fukidashi-text:before, .balloon02 .fukidashi-text:after {
    height: 3rem;
  }
  .accordion_wrap {
    margin-bottom: 2rem;
  }
  .accordion_wrap:last-child {
    margin-bottom: 0;
  }
  .accordion_header {
    min-height: 7.2rem;
    padding: 1.5rem 4rem 1.5rem 6rem;
    font-size: 1.5rem;
  }
  .acc_arrow {
    right: 1.5rem;
  }
  .acc_arrow img {
    width: 1.2rem;
  }
  .accordion_header:before {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.7rem;
    left: 1.5rem;
  }
  .accordion_content {
    padding: 2rem;
    font-size: 1.4rem;
  }
  .faq_wrapper:after {
    bottom: -8rem;
    left: 0;
    width: 4.4rem;
    height: 5.9rem;
  }
  .faq_wrapper .balloon02:after {
    width: 3.2rem;
    height: 5.3rem;
    bottom: -1rem;
    right: -1rem;
  }
}
@media print, screen and ( min-width : 768px ) {
  .faq_wrapper:after {
    width: 13.4rem;
    height: 17.9rem;
    bottom: -14rem;
    left: -8rem;
  }
  .faq_wrapper .balloon02:after {
    width: 9.5rem;
    height: 15.6rem;
    bottom: -2rem;
    right: 10rem;
  }
  .accordion_wrap {
    margin-bottom: 3rem;
  }
  .accordion_header {
    padding: 2rem 7rem;
    font-size: 2rem;
    line-height: 1.3em;
  }
  .acc_arrow {
    right: 2rem;
  }
  .accordion_header:before {
    left: 2rem;
  }
  .accordion_content {
    padding: 2.5rem 7rem;
    font-size: 1.7rem;
  }
}


/* ---------------------------------------------------------------------------------------------

　   HISTORY

--------------------------------------------------------------------------------------------- */
#history {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #d0e8f5 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #d0e8f5 calc(100% - 1px));
  background-size: 15px 15px;
  background-repeat: repeat;
  background-position: center center;
}
.history_inner {
  background: linear-gradient(to right,  rgba(233,111,143,0.3) 0%,rgba(245,224,78,0.3) 100%);
}
.history_text {
  position: relative;
}
.history_text:before,
.history_text:after {
  content: "";
  position: absolute;
  background: url(../img/history_text_img.png) no-repeat center / contain;
  z-index: 3;
}
.history_text:before {
  background: url(../img/history_text_img01.png) no-repeat center / contain;
}
.history_text:after {
  background: url(../img/history_text_img02.png) no-repeat center / contain;
}
.history_text p {
  line-height: 2em;
}
.history_text .bold {
  font-weight: 700;
}
@media only screen and ( max-width : 767px ) {
  .history_img {
    margin-bottom: 4rem;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: 6rem;
  }
  .history_text:before {
    width: 4.4rem;
    height: 8.4rem;
    left: -1rem;
    bottom: -10rem;
  }
  .history_text:after {
    width: 4.6rem;
    height: 9.4rem;
    right: -1rem;
    bottom: -10rem;
  }
}

@media print, screen and ( min-width : 768px ) {
  .history_text {
    font-size: 2.2rem;
    margin-bottom: 9.5rem;
    text-align: center;
  }
  .history_img {
    margin-bottom: 7rem;
  }
  .history_text:before {
    width: 11.2rem;
    height: 21.3rem;
    left: -5rem;
    bottom: -2rem;
  }
  .history_text:after {
    width: 10.8rem;
    height: 22rem;
    right: -6rem;
    bottom: -3rem;
  }
}
.c-link__btn--title {
    font-size: 16px !important;
}


/* ---------------------------------------------------------------------------------------------

　   XXX

--------------------------------------------------------------------------------------------- */

@media only screen and ( max-width : 767px ) {
}
@media print, screen and ( min-width : 768px ) {
}