@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
*,
::before,
::after { box-sizing: border-box;}

html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;}
body { margin: 0;}
main { display: block;}
p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0;}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0;}
ul, ol { margin: 0; padding: 0; list-style: none;}
dd { margin-left: 0;}
hr { box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit;}
pre { font-family: monospace, monospace; font-size: inherit;}
address { font-style: inherit;}
a { background-color: transparent; text-decoration: none; color: inherit;}
abbr[title] { text-decoration: underline dotted;}
code, kbd, samp { font-family: monospace, monospace; font-size: inherit;}
small { font-size: 80%;}
sub,
sup { line-height: 0; position: relative; vertical-align: baseline;}

svg, img, embed, object, iframe { vertical-align: bottom;}

/* Forms */
/* ============================================ */
button, input, optgroup, select, textarea { -webkit-appearance: none; appearance: none; background: transparent; padding: 0; margin: 0; border-radius: 0;
 color: inherit; font: inherit; text-align: inherit; text-transform: inherit; vertical-align: middle;
}
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer;}
button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default;}
:-moz-focusring { outline: auto;}
select:disabled { opacity: inherit;}
option { padding: 0;}
fieldset { margin: 0; padding: 0; min-width: 0;}
legend { padding: 0;}

progress { vertical-align: baseline;}
textarea { overflow: auto;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto;}
[type="search"] { outline-offset: -2px;}
[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
[type="number"] { -moz-appearance: textfield;}
label[for] { cursor: pointer;}
details { display: block;}
summary { display: list-item;}
[contenteditable]:focus { outline: auto;}

table { border-color: inherit; border-collapse: collapse;}
td,
th { vertical-align: top; padding: 0;}




/* Magnific Popup CSS */
.mfp-fade.mfp-bg { opacity: 0.001; /* Chrome opacity transition bug */
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.85;}
.mfp-fade.mfp-bg.mfp-removing { opacity: 0;}
.mfp-fade.mfp-wrap .mfp-content { opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  transform: scale(1.1);
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; transform: scale(1);}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; transform: scale(1.1);}

.mfp-bg { position: fixed; top: 0; left: 0; z-index: 1042; width: 100%; height: 100%; overflow: hidden; background: #000; opacity: 0.8; }


.mfp-wrap { position: fixed; top: 0; left: 0; z-index: 1043; width: 100%; height: 100%; outline: none !important; -webkit-backface-visibility: hidden;}
.mfp-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 8px; text-align: center;}


.mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;}
.mfp-align-top .mfp-container:before { display: none; }
.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045;}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }
.mfp-ajax-cur { cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; }
.mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.mfp-auto-cursor .mfp-content { cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.mfp-loading.mfp-figure { display: none; }
.mfp-hide { display: none !important; }
.mfp-preloader { position: absolute; top: 50%; left: 8px; right: 8px; z-index: 1044; 
width: auto; margin-top: -0.8em; color: #CCC; text-align: center;}
.mfp-preloader a { color: #CCC; }
.mfp-preloader a:hover { color: #FFF; }
.mfp-s-ready .mfp-preloader { 	display: none; }
.mfp-s-error .mfp-content { display: none; }
button.mfp-close,
button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none;
display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; }

button::-moz-focus-inner { padding: 0; border: 0;}
.mfp-close { position: absolute; right: 0%; top: 0px; width: 42px; height: 42px;
 color: #FFF; font-style: normal; font-size: 28px; text-decoration: none; font-size: 0px; text-indent: -9999em;}
.mfp-close:before,
.mfp-close:after { content: ''; display: block; width: 1px; height: 42px; position: absolute; right: 5%; top: 0; background: #fff;}
.mfp-close:before{ transform: rotate(45deg);}
.mfp-close:after { transform: rotate(-45deg);}

.mfp-close-btn-in .mfp-close { color: #333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close { width: 50%; right: 0%; color: #FFF; text-align: right; }
.mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; }

.mfp-arrow { position: absolute; top: 50%; opacity: 0.65; margin: 0; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; }
.mfp-arrow:active{ margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus { opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after { content: ''; display: block; width: 0; height: 0;
 position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent;
}
.mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
.mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }

.mfp-arrow-left { left: 0; }
.mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; }
.mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; }

.mfp-arrow-right { right: 0; }
.mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; }
.mfp-arrow-right:before { border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }
.mfp-iframe-holder .mfp-close { top: -40px; }

.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe { position: absolute; top: 0; left: 0;
 display: block; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000;
}

/* Main image in popup */
img.mfp-img { display: block; width: auto; max-width: 100%; height: auto; line-height: 0; box-sizing: border-box; padding: 0 40px; margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure { line-height: 0; }
.mfp-figure small { display: block; color: #BDBDBD; font-size: 12px; line-height: 14px; }
.mfp-figure figure{ margin: 0; }

.mfp-bottom-bar { width: 100%; margin-top: -36px; position: absolute; top: 100%; left: 0; cursor: auto; }

.mfp-title { padding-right: 36px; color: #F3F3F3; text-align: left; line-height: 18px; word-wrap: break-word; }

.mfp-image-holder .mfp-content { max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
	/**
	 * Remove all paddings around the image on small screen
	 */
	.mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; }
	.mfp-img-mobile img.mfp-img { padding: 0; }
	.mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; }
	.mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; }
	.mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; }
	.mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }
	.mfp-img-mobile .mfp-counter { right: 5px; top: 3px; }
	.mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; }
}

@media all and (max-width: 901px) {
	.mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); }
	.mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; }
	.mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%;}
	.mfp-container { padding-left: 6px; padding-right: 6px; }
}
@media all and (max-width: 481px) {
	.mfp-image-holder .mfp-close { right: 25px;}
	img.mfp-img { padding: 40px 20px;}
}


/*	Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
  	  touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; top: 0; left: 0; display: block;}
.slick-track:before,
.slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.slick-initialized .slick-slide { display: block; outline: none;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto;}
.slick-arrow.slick-hidden { display: none;}


.slick-arrow { position: absolute; background: transparent; border: none; z-index: 100; text-indent: -9999em; outline: none;}
.slick-arrow:before{ content: ''; display: block; width: 0px; height: 0px; position: absolute; top: 50%; transform: translateY(-50%);}


/** Dots */
.slick-dotted.slick-slider{ padding-bottom: 30px;}
.slick-dots { position: absolute; bottom: 0px; display: block; width: 100%; padding: 0; margin: 0; font-size: 0; text-align: center;}
.slick-dots li { position: relative; display: inline-block; width: 36px; height: 15px; padding: 0; cursor: pointer;}
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 15px; height: 15px; margin: 0 auto; cursor: pointer;
 color: transparent; border: 0; outline: none; background: #453e3f; border-radius: 50%;
}
.slick-dots li button:hover,
.slick-dots li button:focus{ outline: none;}
.slick-dots li.slick-active button { background: #7fbe26;}

@media (max-width: 801px) {
	.slick-dots li { width: 30px; height: 15px;}
	.slick-dots li button { width: 15px; height: 15px;}
}
@media (max-width: 481px) {
	.slick-dotted.slick-slider{ padding-bottom: 20px;}
	.slick-dots li { height: 12px;}
	.slick-dots li button { width: 12px; height: 12px;}
}



/*		font-style
-------------------------------------------------- */
body { color: #434752;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

@media (max-width: 641px) {
}


#hd .inner-hd { width: 94%; margin: 0 auto; padding: 20px 0;}
#hd h1 { line-height: 1;}
#hd h1 a { display: block; width: 40%; max-width: 280px;}
#hd h1 a img { width: 100%;}
@media (max-width: 481px) {
	#hd .inner-hd { padding: 10px 0;}
}

#ft .inner-ft { padding: 30px 0;}
#ft .ft-ctn { width: 94%; margin: 0 auto;}
#ft .ft-ctn h3 { margin-bottom: -24px; line-height: 1;}
#ft .ft-ctn h3 a { display: block; width: 35%; max-width: 250px;}
#ft .ft-ctn h3 a img { width: 100%;}
#ft .ft-ctn ul { font-size: 0; text-align: right;}
#ft .ft-ctn ul li { display: inline-block; padding: 0 20px; font-size: 16px; line-height: 1;}
#ft .ft-ctn ul li a { color: #000; text-decoration: none;}
#ft .ft-ctn ul li a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;}
@media (max-width: 481px) {
	#ft .inner-ft { padding: 16px 0 20px;}
	#ft .ft-ctn h3 { margin-bottom: -14px;}
	#ft .ft-ctn ul li { padding: 0 10px; font-size: 12px;}
}



@keyframes number-1 {
	0% { background-image: url('./img/digital/0.jpg');}
  2% { background-image: url('./img/digital/1.jpg');}
  4% { background-image: url('./img/digital/2.jpg');}
  6% { background-image: url('./img/digital/3.jpg');}
  8% { background-image: url('./img/digital/4.jpg');}
 10% { background-image: url('./img/digital/5.jpg');}
 12% { background-image: url('./img/digital/6.jpg');}
 14% { background-image: url('./img/digital/7.jpg');}
 16% { background-image: url('./img/digital/8.jpg');}
 18% { background-image: url('./img/digital/9.jpg');}
 20% { background-image: url('./img/digital/0.jpg');}
 22% { background-image: url('./img/digital/1.jpg');}
 24% { background-image: url('./img/digital/2.jpg');}
 26% { background-image: url('./img/digital/3.jpg');}
 28% { background-image: url('./img/digital/4.jpg');}
 30% { background-image: url('./img/digital/5.jpg');}
 33% { background-image: url('./img/digital/hatena.jpg');}
 58% { background-image: url('./img/digital/hatena.jpg');}
 60% { background-image: url('./img/digital/none.jpg');}
 68% { background-image: url('./img/digital/none.jpg');}
 70% { background-image: url('./img/digital/hatena.jpg');}
 76% { background-image: url('./img/digital/hatena.jpg');}
 78% { background-image: url('./img/digital/none.jpg');}
 83% { background-image: url('./img/digital/none.jpg');}
 85% { background-image: url('./img/digital/hatena.jpg');}
 to { background-image: url('./img/digital/hatena.jpg');}
}

@keyframes number-2 {
	0% { background-image: url('./img/digital/5.jpg');}
  2% { background-image: url('./img/digital/3.jpg');}
  4% { background-image: url('./img/digital/6.jpg');}
  6% { background-image: url('./img/digital/7.jpg');}
  8% { background-image: url('./img/digital/8.jpg');}
 10% { background-image: url('./img/digital/4.jpg');}
 12% { background-image: url('./img/digital/0.jpg');}
 14% { background-image: url('./img/digital/2.jpg');}
 16% { background-image: url('./img/digital/1.jpg');}
 18% { background-image: url('./img/digital/9.jpg');}
 20% { background-image: url('./img/digital/4.jpg');}
 22% { background-image: url('./img/digital/0.jpg');}
 24% { background-image: url('./img/digital/2.jpg');}
 26% { background-image: url('./img/digital/1.jpg');}
 28% { background-image: url('./img/digital/9.jpg');}
 30% { background-image: url('./img/digital/0.jpg');}
 33% { background-image: url('./img/digital/none.jpg');}
 38% { background-image: url('./img/digital/none.jpg');}
 40% { background-image: url('./img/digital/hatena.jpg');}
 58% { background-image: url('./img/digital/hatena.jpg');}
 60% { background-image: url('./img/digital/none.jpg');}
 68% { background-image: url('./img/digital/none.jpg');}
 70% { background-image: url('./img/digital/hatena.jpg');}
 76% { background-image: url('./img/digital/hatena.jpg');}
 78% { background-image: url('./img/digital/none.jpg');}
 83% { background-image: url('./img/digital/none.jpg');}
 85% { background-image: url('./img/digital/hatena.jpg');}
 to { background-image: url('./img/digital/hatena.jpg');}
}

@keyframes number-3 {
	0% { background-image: url('./img/digital/7.jpg');}
  2% { background-image: url('./img/digital/0.jpg');}
  4% { background-image: url('./img/digital/2.jpg');}
  6% { background-image: url('./img/digital/1.jpg');}
  8% { background-image: url('./img/digital/4.jpg');}
 10% { background-image: url('./img/digital/8.jpg');}
 12% { background-image: url('./img/digital/6.jpg');}
 14% { background-image: url('./img/digital/7.jpg');}
 16% { background-image: url('./img/digital/3.jpg');}
 18% { background-image: url('./img/digital/2.jpg');}
 20% { background-image: url('./img/digital/9.jpg');}
 22% { background-image: url('./img/digital/0.jpg');}
 24% { background-image: url('./img/digital/2.jpg');}
 26% { background-image: url('./img/digital/1.jpg');}
 28% { background-image: url('./img/digital/4.jpg');}
 30% { background-image: url('./img/digital/9.jpg');}
 33% { background-image: url('./img/digital/none.jpg');}
 46% { background-image: url('./img/digital/none.jpg');}
 48% { background-image: url('./img/digital/hatena.jpg');}
 58% { background-image: url('./img/digital/hatena.jpg');}
 60% { background-image: url('./img/digital/none.jpg');}
 68% { background-image: url('./img/digital/none.jpg');}
 70% { background-image: url('./img/digital/hatena.jpg');}
 76% { background-image: url('./img/digital/hatena.jpg');}
 78% { background-image: url('./img/digital/none.jpg');}
 83% { background-image: url('./img/digital/none.jpg');}
 85% { background-image: url('./img/digital/hatena.jpg');}
 to { background-image: url('./img/digital/hatena.jpg');}
}

.cta.bg-1 { background: #53a9c0;}
.cta.bg-2 { background-image: repeating-linear-gradient(-45deg, #d4eaf1, #d4eaf1 16px, #c7e3eb 16px, #c7e3eb 32px);}
.cta .inner-sct { padding: 60px 0;}
.cta .pt { padding-top: 60px;}
.cta h3.tit-1 { margin-bottom: 20px; color: #fde756; font-size: 42px; font-weight: 900; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
.cta h3.tit-1 br { display: none;}
.cta h3.tit-2 { margin-bottom: 12px; font-size: 42px; font-weight: 900; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
.cta h3.tit-2:before,
.cta h3.tit-2:after { content: ''; position: relative; display: inline-block; width: 3px; height: 50px; background: #03b203; vertical-align: middle;}
.cta h3.tit-2:before{ transform: rotate(-12deg);}
.cta h3.tit-2:after { transform: rotate(12deg);}
.cta h3.tit-2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
.cta ul { display: flex; justify-content: space-between; width: 88%; max-width: 920px; margin: 0 auto 40px; text-align: center;}
.cta ul li { width: 31.5%; background: #fff; border: solid 3px #fff; border-radius: 8px; font-size: 26px; font-weight: 700; line-height: 1.2;}
.cta ul li span { display: block; padding: 16px 0; background: #fff; border: solid 2px #434752; border-radius: 6px;}
.cta ul li br { display: none;}
.cta p.img { text-align: center;}
.cta p.img img { width: 88%; max-width: 720px;}
.cta hr {  width: 88%; max-width: 720px; margin: 30px auto; border: 0px; border-top: solid 2px #53a9c0;}

.cta .comment { position: relative; width: 86%; max-width: 640px; margin: 0 auto 30px; padding: 20px 0; padding-right: 200px;}
.cta .comment:after { content: ''; display: block; width: 160px; height: 154px;
 background: url('./img/illust-2.png') no-repeat 50% 50% / 100% auto;
 position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
.cta .comment .txt { position: relative; width: 100%; border-radius: 15px; background: #fff; border: solid 3px #53a9c0;}
.cta .comment .txt:after { content: ''; display: block; width: 0px; height: 0px; border: solid 12px transparent;
 border-bottom: solid 5px #53a9c0; border-left: solid 28px #53a9c0;
 position: absolute; right: -40px; top: 25px; z-index: 1;
}
.cta .comment .txt div { position: relative; padding: 12px 40px; border-radius: 15px; background: #fff; z-index: 2;}
.cta .comment .txt div:after { content: ''; display: block; width: 0px; height: 0px; border: solid 12px transparent;
 border-bottom: solid 5px #fff; border-left: solid 28px #fff;
 position: absolute; right: -29px; top: 23px; z-index: 2;
}
.cta .comment .txt p { font-size: 30px; font-weight: 700; line-height: 1.4;}

.cta .btn-line-1 { width: 88%; max-width: 720px; margin: 0 auto 40px; background: #fff; border-radius: 8px;}
.cta .btn-line-1 a { position: relative; display: block; padding: 18px 0; padding-left: 220px;
 background: linear-gradient(#0dd50d,#00a900); border-radius: 8px; box-shadow: 6px 6px 0 #038503;
 color: #fff; font-weight: 700; line-height: 1.1; text-decoration: none;
 transition: 0.3s ease;
}
.cta .btn-line-1 a:before { content: ''; display: block; width: 100px; height: 100%;
 background: url('./img/icn-line.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 80px; top: 50%; transform: translateY(-50%);
}
.cta .btn-line-1 a span.txt { display: inline-block; font-size: 30px; vertical-align: baseline;}
.cta .btn-line-1 a span.price { display: inline-block; padding: 0 6px; vertical-align: baseline;}
.cta .btn-line-1 a span.price .num { position: relative; display: inline-block; width: 54px; margin: 0 3px;
 background-image: url('./img/digital/none.jpg');
 background-repeat: no-repeat;
 background-size: 100% auto;
 background-position-x: 50%; border-radius: 6px; vertical-align: bottom;
}
.cta .btn-line-1 a span.price .num:before{ content: ''; display: block; width: 100%; padding-top: 120%; border-radius: 6px;
 position: relative; background-repeat: no-repeat; background-size: 100% auto; background-position-x: 50%;
}
.cta .btn-line-1 a span.price .num.num-1:before { animation: number-1 5.0s steps(20) infinite;}
.cta .btn-line-1 a span.price .num.num-2:before { animation: number-2 5.0s steps(20) infinite;}
.cta .btn-line-1 a span.price .num.num-3:before { animation: number-3 5.0s steps(20) infinite;}
.cta .btn-line-1 a span.yen { display: inline-block; font-size: 40px; vertical-align: baseline;}
.cta .btn-line-1 a span.start{ display: block; padding-top: 4px; font-size: 52px; letter-spacing: 0.01rem;}
.cta .btn-line-1 a:hover { opacity: 0.8;}

.cta .btn-line-2 { position: relative; width: 88%; max-width: 720px; margin: 0 auto 40px; background: #fff; border-radius: 8px;}
.cta .btn-line-2 .tips { position: absolute; left: 0; top: -24px; width: 100%; z-index: 2;}
.cta .btn-line-2 .tips span { display: block; width: 50%; max-width: 300px; margin: 0 auto; padding: 4px 0;
 background: #fff; border: solid 2px #faec7e; border-radius: 50px;
 font-size: 24px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.2; text-align: center;
}
.cta .btn-line-2 a { position: relative; display: block; padding: 35px 0;
 background: linear-gradient(#faec7e,#f1df57); border-radius: 8px; box-shadow: 6px 6px 0 #aea138;
 color: #434752; font-size: 48px; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none;
 transition: 0.3s ease;
}
.cta .btn-line-2 a:hover { opacity: 0.8;}

@media (max-width: 801px) {
	.cta.bg-2 { background-image: repeating-linear-gradient(-45deg, #d4eaf1, #d4eaf1 8px, #c7e3eb 8px, #c7e3eb 16px);}
	.cta .inner-sct { padding: 40px 0;}
	.cta .pt { padding-top: 10vw;}
	.cta h3.tit-1 { margin-bottom: 20px; font-size: 6.0vw;}
	.cta h3.tit-1 br { display: block;}
	.cta ul li br { display: block;}
	.cta .comment .txt p { font-size: 3.8vw;}

	.cta .btn-line-1 a { padding-left: 180px;}
	.cta .btn-line-1 a:before { left: 40px;}
	.cta .btn-line-1 a span.txt { font-size: 3.0vw;}
	.cta .btn-line-1 a span.yen { font-size: 4.0vw;}
	.cta .btn-line-1 a span.start { font-size: 6.4vw;}

	.cta .btn-line-2 a { font-size: 6.0vw;}
}
@media (max-width: 641px) {
	.cta .comment { padding-right: 160px;}
	.cta .comment:after { width: 120px; height: 120px;}
	.cta .comment .txt div { padding: 10px 20px;}
	.cta .btn-line-1 a { padding-left: 120px;}
	.cta .btn-line-1 a:before { left: 20px; width: 80px;}
	.cta .btn-line-1 a span.price .num { width: 40px; margin: 0 2px;}
}
@media (max-width: 481px) {
	.cta.bg-2 { background-image: repeating-linear-gradient(-45deg, #d4eaf1, #d4eaf1 6px, #c7e3eb 6px, #c7e3eb 12px);}
	.cta .inner-sct { padding: 20px 0;}
	.cta .pt { padding-top: 65px;}
	.cta h3.tit-1 { margin-bottom: 12px;}
	.cta h3.tit-2 { margin-bottom: 8px; font-size: 6.0vw;}
	.cta h3.tit-2:before,
	.cta h3.tit-2:after { width: 2px; height: 32px;}
	.cta h3.tit-2 span { margin: 0 12px;}

	.cta ul { margin-bottom: 15px;}
	.cta ul li { border-width: 2px; border-radius: 6px; font-size: 15px;}
	.cta ul li span { padding: 8px 0; border-width: 1px; border-radius: 4px;}
	.cta hr { margin: 0px auto 20px; border-width: 1px;}

	.cta .comment { margin-bottom: 15px; padding: 10px 0; padding-right: 100px;}
	.cta .comment:after { width: 80px; height: 80px;}	
	.cta .comment .txt { border-radius: 10px; border-width: 1px;}
	.cta .comment .txt:after { right: -20px; top: 10px;
		 border: solid 8px transparent; border-bottom: solid 4px #53a9c0; border-left: solid 18px #53a9c0;
	}
	.cta .comment .txt div { border-radius: 10px; padding: 8px 16px;}
	.cta .comment .txt div:after { right: -16px; top: 9px;
		 border: solid 8px transparent; border-bottom: solid 4px #fff; border-left: solid 18px #fff;
	}
	.cta .comment .txt p { font-size: 16px;}

	.cta .btn-line-1 { margin-bottom: 15px;}
	.cta .btn-line-1 a { padding: 8px 0; padding-left: 100px; border-radius: 6px; box-shadow: 3px 3px 0 #038503;}
	.cta .btn-line-1 a:before { width: 50px; left: 25px;}
	.cta .btn-line-1 a span.price .num { width: 30px; margin: 0 1px;}
	.cta .btn-line-1 a span.txt { font-size: 15px;}
	.cta .btn-line-1 a span.yen { font-size: 18px;}
	.cta .btn-line-1 a span.start { font-size: 28px;}

	.cta .btn-line-2 { margin: 0 auto 25px; border-radius: 6px;}
	.cta .btn-line-2 .tips { top: -12px;}
	.cta .btn-line-2 .tips span { padding: 2px 0; font-size: 15px;
	}
	.cta .btn-line-2 a { padding: 25px 0 20px; border-radius: 6px; box-shadow: 3px 3px 0 #aea138; font-size: 24px;}
}


#kv .inner-kv { position: relative; background: linear-gradient(#e9f4f8,#98ccda);}
#kv .inner-kv:after { content: ''; display: block; width: 100%; height: 280px; background: url('./img/bg-kv.png') repeat-x 50% 100% / auto 100%;
 position: absolute; left: 0; bottom: 0; z-index: 1;
}

#kv h1 { position: relative; text-align: center; z-index: 2;}
#kv h1 img { width: 100%; max-width: 980px;}
#kv h1 img.sp { display: none;}
#kv .terms { position: absolute; left: 0; bottom: -76px; z-index: 3; width: 100%;}
#kv .box { position: relative; width: 88%; max-width: 920px; margin: 0 auto; padding-left: 280px; border: solid 3px #fde756; border-radius: 8px; background: #fff;}
#kv .box .tit { position: absolute; left: 0; top: 50%;
 display: flex; align-items: center; width: 280px; height: 100%; background: #fde756; transform: translateY(-50%);
}
#kv .box .tit h2 { display: inline-block; padding-left: 32px;
 font-size: 24px; font-weight: 700; letter-spacing: 0.05rem; line-height: 1.4; text-align: left;
}
#kv .box .tit h2 span { display: block;}
#kv .box .ctn { padding: 12px;}
#kv .box .ctn ul { width: 100%; max-width: 560px; margin: 0 auto; padding: 12px 0; padding-left: 100px;
 background: url('./img/illust-1.png') no-repeat 0 50% / 72px auto;}
#kv .box .ctn ul li { position: relative; padding: 8px 0; padding-left: 40px;
 font-size: 24px; font-weight: 700; letter-spacing: 0.075rem; line-height: 1.2;
}
#kv .box .ctn ul li:before { content: ''; display: block; width: 30px; height: 30px; background: url('./img/icn-check-1.png') no-repeat 50% 50% / 100%; position: absolute; left: 0; top: 6px;}

@media (max-width: 1001px) {
	#kv .box { padding-left: 240px;}
	#kv .box .tit { width: 230px;}
	#kv .box .tit h2 { padding-left: 20px; font-size: 21px;}
	#kv .box .ctn ul { padding-left: 90px; background-size: 60px auto;}
	#kv .box .ctn ul li { font-size: 21px;}
}
@media (max-width: 801px) {
	#kv .inner-kv:after { height: 200px;}
	#kv h1 img.pc { display: none;}
	#kv h1 img.sp { display: block;}
	#kv .terms { bottom: -100px;}
	#kv .box { padding-left: 0px;}
	#kv .box .tit { position: relative; left: auto; top: auto; transform: translateY(0);
	 display: block; width: 100%; height: auto; padding: 12px 0 15px;}
	#kv .box .tit h2 { width: 100%; padding-left: 0px; font-size: 21px; line-height: 1; text-align: center;}
	#kv .box .tit h2 span { display: inline;}
	#kv .box .ctn ul { width: 100%; max-width: 500px; margin: 0 auto; padding: 20px 0; padding-left: 100px;
	 background-size: 80px auto;}
}
@media (max-width: 481px) {
	#kv .inner-kv:after { height: 100px;}
	#kv .terms { bottom: -68px;}
	#kv .box .tit { padding: 2px 0 4px;}
	#kv .box .tit h2 { font-size: 14px;}
	#kv .box .ctn { padding: 4px 6px;}
	#kv .box .ctn ul { padding: 10px 0; padding-left: 60px;
	 background-size: 40px auto; background-position: 10px 50%;}
	#kv .box .ctn ul li { padding: 4px 0; padding-left: 25px; font-size: 13px;}
	#kv .box .ctn ul li:before { width: 16px; height: 16px; top: 4px;}
}



#problem { background: url('./img/bg-1.png') repeat-x 50% 0 / 106px auto;}
#problem .inner-sct { padding: 72px 0 50px;}
#problem h2 { margin-bottom: 72px; text-align: center;}
#problem h2 img { width: 88%; max-width: 680px;}
#problem h3 { margin-bottom: 50px; font-size: 45px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
#problem h3 span { background: linear-gradient(transparent 72%, #fde756 72%);}
#problem .tit { margin-bottom: 10px; text-align: center;}
#problem .tit:before,
#problem .tit:after { content: ''; position: relative; display: inline-block; width: 3px; height: 100px; background: #53a9c0; vertical-align: middle;
}
#problem .tit:before{ transform: rotate(-12deg);}
#problem .tit:after { transform: rotate(12deg);}
#problem .tit p { display: inline-block;  margin: 0 20px; font-size: 36px; font-weight: 700; letter-spacing: 0.15rem; vertical-align: middle;}
#problem ul { width: 92%; max-width: 960px; margin: 0 auto; font-size: 0;}
#problem ul li { position: relative; display: inline-block; width: 50%; padding: 18px; vertical-align: top;}
#problem ul li dl { position: relative; min-height: 290px; border-radius: 40px; overflow: hidden; background: #c7e3eb;}
#problem ul li dl dt img { position: relative; width: 100%;}
#problem ul li dl dt img.sp { display: none;}
#problem ul li dl dd { display: block; width: 100%; padding: 18px 40px;
 font-size: 18px; font-weight: 700; letter-spacing: 0.1rem;
}
@media (max-width: 801px) {
	#problem { background-size: 14% auto;}
	#problem h3 { font-size: 6.4vw;}
	#problem .tit p { font-size: 4.0vw;}
	#problem ul li { display: block; width: 100%; padding: 10px 0;}
	#problem ul li dl { position: relative; width: 100%; border-radius: 100px; min-height: auto;}
	#problem ul li dl dt { position: relative;}
	#problem ul li dl dt img.pc { display: none;}
	#problem ul li dl dt img.sp { display: block;}
	#problem ul li dl dd { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	 padding: 0px;
	 font-size: 18px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.8;
	}
	#problem ul li dl dd span { display: block; padding: 0 40px 0 50%;}
}
@media (max-width: 641px) {
	#problem h2 { margin-bottom: 40px;}
	#problem h3 { margin-bottom: 30px;}
	#problem .tit:before,
	#problem .tit:after { height: 72px;}
	#problem ul li { padding: 6px 0;}
	#problem ul li dl dd { font-size: 14px; line-height: 1.6;}
}
@media (max-width: 481px) {
	#problem .inner-sct { padding: 40px 0 30px;}
	#problem h2 { margin-bottom: 30px;}
	#problem h3 { margin-bottom: 16px;}
	#problem .tit:before,
	#problem .tit:after { width: 2px; height: 50px;}
	#problem .tit p { margin: 0 8px; font-size: 16px; letter-spacing: 0.05rem;}
	#problem ul li { padding: 4px 0;}
	#problem ul li dl dd { font-size: 10.5px; letter-spacing: 0.025rem; line-height: 1.65;}
	#problem ul li dl dd span { display: block; padding: 0 15px 0 48.5%;}
}



#feature { background: url('./img/bg-2.jpg') 50% 0;}
#feature .inner-sct { padding: 60px 0 40px;}
#feature h2 { margin-bottom: 30px; font-size: 48px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
#feature h2 span { background: linear-gradient(transparent 72%, #fde756 72%);}
#feature h2 img { width: 55%; max-width: 450px; padding: 0 5px;}
#feature .ctn { display: flex; flex-wrap: wrap; justify-content: space-around; width: 72%; max-width: 900px; margin: 0 auto;}
#feature .ctn.wide { width: 92%; max-width: 1400px;}
#feature .bloc{ padding: 25px 12px;}
#feature .bloc.w50 { width: 50%; }
#feature .bloc.w33 { width: 33%; }
#feature .box { width: 100%; height: 100%; padding: 2px; border: solid 4px #c7e3eb; background: #557988; border-radius: 20px;}
#feature .box .inner { position: relative; height: 100%; padding: 20px 25px 30px; background: #c7e3eb; border-radius: 14px;}
#feature .box .no { position: absolute; left: 20px; top: -30px; width: 80px;}
#feature .box .no img { width: 100%;}
#feature .box figure { margin-bottom: 12px; text-align: center;}
#feature .box figure img { width: 80%;}
#feature .box dl {}
#feature .box dl dt { margin-bottom: 12px; color: #557988; font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; letter-spacing: 0.1rem; line-height: 1.2; text-align: center;}
#feature .box dl dt br.sp { display: none;}
#feature .box dl dd { font-size: 18px; font-weight: 700; letter-spacing: 0.1rem;}
@media (max-width: 1001px) {
	#feature .ctn { width: 92%; max-width: 900px;}
	#feature .ctn.wide { width: 92%; max-width: 900px; flex-wrap: wrap;}
	#feature .bloc.w33 { width: 50%; }
}
@media (max-width: 801px) {
	#feature h2 { font-size: 6.0vw;}
	#feature .bloc {}
	#feature .box dl dt { font-size: 3.2vw;}
	#feature .box dl dt br.sp { display: block;}
	#feature .box dl dd { font-size: 16px;}
}
@media (max-width: 481px) {
	#feature { background-size: 20px auto;}
	#feature .inner-sct { padding: 40px 0 20px;}
	#feature h2 { margin-bottom: 20px;}
	#feature h2 img { padding: 0 2px;}
	#feature .bloc{ padding: 12px 8px;}
	#feature .box { border-width: 3px; padding: 1px; border-radius: 12px;}
	#feature .box .inner { border-radius: 8px; padding: 15px 0px 20px;}
	#feature .box .no { width: 32px; top: -18px; left: 12px;}
	#feature .box figure { margin-bottom: 6px; }
	#feature .box dl dt { margin-bottom: 6px; font-size: 13px;}
	#feature .box dl dd { padding: 0 12px; font-size: 11px; letter-spacing: 0rem;}
}


#fact-1 { background: url('./img/bg-3.jpg') 50% 0;}
#fact-1 .inner-sct { padding: 60px 0px;}
#fact-1 h2 { margin-bottom: 20px; text-align: center;}
#fact-1 h2 img { width: 75%; max-width: 500px;}
#fact-1 p.read { margin-bottom: 20px; font-size: 30px; font-weight: 700; letter-spacing: 0.075rem; text-align: center;}
#fact-1 p.read span { color: #53a9c0; font-size: 40px;}
#fact-1 figure { width: 88%; max-width: 600px; margin: 0 auto 30px;
 border-radius: 20px; border: solid 3px #fde756; overflow: hidden; text-align: center;
}
#fact-1 figure img { width: 100%;}
#fact-1 .comment { position: relative; width: 86%; max-width: 600px; margin: 0 auto; padding: 10px 0; padding-left: 200px;}
#fact-1 .comment:after { content: ''; display: block; width: 160px; height: 154px;
 background: url('./img/illust-3.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
#fact-1 .comment .txt { position: relative; width: 100%; padding: 20px; border-radius: 15px; background: #53a9c0; text-align: center;}
#fact-1 .comment .txt:after { content: ''; display: block; width: 0px; height: 0px; border: solid 14px transparent;
 border-bottom: solid 6px #53a9c0; border-right: solid 30px #53a9c0;
 position: absolute; left: -38px; top: 25px; transform: rotate(-8deg); z-index: 1;
}
#fact-1 .comment .txt p { display: inline-block; color: #fff; font-size: 21px; font-weight: 700; letter-spacing: 0.1rem; text-align: left;}
#fact-1 .comment .txt p span { display: block;}
@media (max-width: 641px) {
	#fact-1 p.read { font-size: 4.2vw;}
	#fact-1 p.read span { font-size: 6.0vw;}
	#fact-1 .comment { padding-left: 160px;}
	#fact-1 .comment:after { width: 120px; height: 120px;}
	#fact-1 .comment .txt { padding: 15px;}
	#fact-1 .comment .txt p { font-size: 16px;}
}
@media (max-width: 481px) {
	#fact-1 { background-size: 30px auto;}
	#fact-1 .inner-sct { padding: 40px 0px;}
	#fact-1 h2 { margin-bottom: 8px;}
	#fact-1 p.read { margin-bottom: 12px; line-height: 1.4;}
	#fact-1 figure { margin: 0 auto 12px; border-radius: 12px; border-width: 2px;}
	#fact-1 .comment { padding-left: 100px;}
	#fact-1 .comment:after { width: 80px; height: 80px;}
	#fact-1 .comment .txt { padding: 12px; border-radius: 10px;}
	#fact-1 .comment .txt:after { left: -20px; top: 12px;
		border: solid 10px transparent; border-bottom: solid 4px #53a9c0; border-right: solid 20px #53a9c0;
	}
	#fact-1 .comment .txt p { font-size: 12px; letter-spacing: 0.05rem; }
}


#fact-2 { background: #c7e3eb;}
#fact-2 .inner-sct { padding: 60px 0px;}
#fact-2 h2 { margin-bottom: 20px; font-size: 30px; font-weight: 700; letter-spacing: 0.1rem; text-align: center;}
#fact-2 h2 span { display: block; color: #e74976; font-size: 45px;}
#fact-2 h2 img { position: relative; width: 42%; max-width: 350px; margin-right: 5px; vertical-align: middle; transform: translateY(-5px);}
#fact-2 ul { width: 88%; max-width: 1200px; margin: 0 auto; font-size: 0; text-align: center;}
#fact-2 ul li { display: inline-block; width: 50%; padding: 0 12px; vertical-align: top;}
#fact-2 ul li img{ width: 100%; border: solid 3px #53a9c0; border-radius: 20px;}
#fact-2 ul li:nth-child(2) img { padding-bottom: 13px; background: #fff;}
@media (max-width: 801px) {
	#fact-2 ul li { display: block; width: 100%; margin-bottom: 30px; padding: 0 12px; vertical-align: top;}
	#fact-2 ul li:last-child { margin-bottom: 0px;}
	#fact-2 ul li:nth-child(2) img { padding-bottom: 0px;}
}
@media (max-width: 641px) {
	#fact-2 h2 { font-size: 4.5vw;}
	#fact-2 h2 span { font-size: 6.4vw;}
}
@media (max-width: 481px) {
	#fact-2 .inner-sct { padding: 30px 0px;}
	#fact-2 h2 { margin-bottom: 12px; font-size: 15px;}
	#fact-2 h2 span { font-size: 23px;}
	#fact-2 h2 img { margin-right: 2px; vertical-align: middle; transform: translateY(-2px);}
	#fact-2 ul li { margin-bottom: 12px;}
	#fact-2 ul li img{ border-width: 2px; border-radius: 12px;}
}



#case { background: url('./img/bg-case.jpg') no-repeat 50% 50% / cover;}
#case .inner-sct { padding: 60px 0px;}
#case .ttl { position: relative; width: 100%; max-width: 620px; margin: 0 auto 30px;
 background-image: url('./img/bg-l.png'), url('./img/bg-r.png');
 background-position: 0 100%, 100% 100%;
 background-repeat: no-repeat, no-repeat;
 background-size: 200px auto, 200px auto;
}
#case .tips { margin-bottom: 10px; text-align: center;}
#case .tips:before,
#case .tips:after { content: ''; position: relative; display: inline-block; width: 2px; height: 72px;
 background: #53a9c0; vertical-align: middle;
}
#case .tips:before{ transform: rotate(-20deg);}
#case .tips:after { transform: rotate(20deg);}
#case .tips p { display: inline-block; margin: 0 10px;
 font-size: 24px; font-weight: 700; line-height: 1.4; vertical-align: middle;
}
#case .ttl h2 { font-size: 48px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
#case .ttl h2 span { background: linear-gradient(transparent 72%, #fde756 72%);}
#case .slick-slider{ width: 100%; max-width: 1800px; margin: 0 auto;}
#case .slide { padding: 0 20px;}
#case .slick-track { display: flex;}
#case .slick-slide { height: auto !important;}

#case .box { width: 100%; max-width: 560px; height: 100%; margin: 0 auto; padding: 20px 40px;
 background: #fff; border: solid 3px #53a9c0; border-radius: 20px;
}
#case .box .tit { position: relative; margin-bottom: 8px; padding: 10px 0; padding-left: 130px;}
#case .box .tit figure { width: 100px; border-radius: 50%; border: solid 3px #53a9c0; overflow: hidden;
 position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
#case .box .tit figure img { width: 100%;}
#case .box .tit dl dt { position: relative; padding-bottom: 2px; 
 color: #557988; font-size: clamp(24px,1.8vw,34px); font-weight: 700; line-height: 1.2; text-align: right;
}
#case .box .tit dl dt:before { content: ''; display: block; width: 36px; height: 40px; margin-right: 10px;
 background: url('./img/icn-case.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 10px; top: 50%; transform: translateY(-42%); 
}
#case .box .tit dl dt span { display: inline-block; vertical-align: text-bottom;}
#case .box .tit dl dt span em { display: inline-block; padding: 0 4px; font-size: clamp(40px,3.2vw,54px);}
#case .box .tit dl dd { padding-top: 8px; border-top: solid 2px #53a9c0; color: #557988; font-size: 20px; font-weight: 700; text-align: right;}
#case .box .txt p { font-size: 18px; font-weight: 700;}
@media (max-width: 1601px) {
	#case .box .tit dl dt { font-size: clamp(21px,1.6vw,34px);}
	#case .box .tit dl dt span em { font-size: clamp(32px,2.8vw,54px);}
}
@media (max-width: 1401px) {
	#case .box { padding: 20px 30px;}
	#case .box .tit { padding-left: 120px;}
}
@media (max-width: 1281px) {
	#case .box .tit dl dt { font-size: clamp(21px,2.8vw,34px);}
	#case .box .tit dl dt span em { font-size: clamp(32px,5.0vw,54px);}
}
@media (max-width: 1001px) {
	#case .box .tit { padding-left: 120px;}
	#case .box .tit dl dt { font-size: 3.0vw;}
	#case .box .tit dl dt:before { width: 32px; height: 35px; left: 0;}
	#case .box .tit dl dt span em{ font-size: 5.0vw;}
	#case .box .tit dl dd { font-size: 18px;}
}
@media (max-width: 641px) {
	#case .ttl { background-size: 150px auto, 150px auto;}
	#case .ttl h2 { font-size: 6.4vw;}
	#case .slide { padding: 0 12px;}
	#case .box .tit dl dt { font-size: 5.2vw;}
	#case .box .tit dl dt span em{ font-size: 9.2vw;}
	#case .box .txt p { font-size: 16px;}
}
@media (max-width: 481px) {
	#case .inner-sct { padding: 40px 0px;}
	#case .ttl { margin-bottom: 12px; background-size: 120px auto, 120px auto;}
	#case .tips { margin-bottom: 6px;}
	#case .tips:before,
	#case .tips:after { height: 45px;}
	#case .tips p { margin: 0 6px; font-size: 16px;}
	#case .slide { padding: 0 5px;}
	#case .box { padding: 8px 18px 12px; border-width: 2px; border-radius: 12px;}
	#case .box .tit { margin-bottom: 5px; padding: 5px 0; padding-left: 90px;}
	#case .box .tit figure { width: 72px; border-width: 2px;}
	#case .box .tit dl dt { font-size: 4.5vw; text-align: right;}
	#case .box .tit dl dt:before { width: 24px; height: 30px; left: 0px; bottom: 2px;}
	#case .box .tit dl dt span em{ padding: 0px 2px; font-size: 8.2vw;}
	#case .box .tit dl dd { padding-top: 4px; border-width: 1px; font-size: 14px;}
	#case .box .txt p { font-size: 12px; letter-spacing: 0.05rem;}
}



#flow { background: #c7e3eb;}
#flow .inner-sct { padding: 60px 0;}
#flow h2 { margin-bottom: 30px; font-size: 48px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
#flow h2 span { background: linear-gradient(transparent 72%, #fde756 72%);}
#flow .bloc { width: 80%; max-width: 800px; margin: 0 auto;}
#flow .box { position: relative; padding: 30px 0px; padding-left: 50px; background: #fff; border: solid 3px #53a9c0; border-radius: 20px;}
#flow .box.flow-1 { min-height: 210px;}
#flow .box.flow-2 { min-height: 240px;}
#flow .box.flow-3 { min-height: 210px;}
#flow .box.flow-4 { min-height: 190px;}

#flow .box:after { content: ''; display: block; width: 200px;
 position: absolute; right: 30px; top: 20px;
}
#flow .box.flow-1:after { height: 150px; background: url('./img/flow-1.png') no-repeat 50% 50% / 100% auto;}
#flow .box.flow-2:after { height: 200px; background: url('./img/flow-2.png') no-repeat 50% 50% / 100% auto;}
#flow .box.flow-3:after { height: 160px; background: url('./img/flow-3.png') no-repeat 50% 50% / 100% auto;}
#flow .box.flow-4:after { height: 140px; background: url('./img/flow-4.png') no-repeat 50% 50% / 100% auto;}

#flow .box .icn { width: 80px; position: absolute; left: -50px; top: -20px;}
#flow .box .icn img { width: 100%;}
#flow .box dl { padding-right: 240px;}
#flow .box dl dt { margin-bottom: 12px; color: #557988; font-size: 24px; font-weight: 700; line-height: 1.25;}
#flow .box dl dt br { display: none;}
#flow .box dl dd { font-size: 18px; font-weight: 700;}
#flow .box dl dd.btn { padding-top: 10px;}
#flow .box dl dd.btn a { display: block; width: 100%; max-width: 280px; padding: 6px 0;
 background: linear-gradient(#0dd50d,#00a900); border-radius: 8px; 
 color: #fff; font-size: 20px; font-weight: 700; text-align: center;
 transition: 0.3s ease;
}
#flow .box dl dd.btn a img { display: inline-block; width: 30px; margin-right: 10px; vertical-align: middle;}
#flow .box dl dd.btn a span{ display: inline-block; vertical-align: middle;}
#flow .box dl dd.btn a:hover { opacity: 0.8;}
#flow .arw { padding: 20px 0;}
#flow .arw:before { content: ''; display: block; width: 0px; height: 0px; margin: 0 auto;
 border: solid 80px transparent; border-top: solid 20px #53a9c0; border-bottom: none;
}
@media (max-width: 801px) {
	#flow .box dl { padding-right: 250px;}
}
@media (max-width: 641px) {
	#flow h2 { font-size: 6.4vw;}
	#flow .box { padding: 20px 0px; padding-left: 40px;}
	#flow .box.flow-1 { min-height: auto;}
	#flow .box.flow-2 { min-height: 200px;}
	#flow .box.flow-3 { min-height: 150px;}
	#flow .box.flow-4 { min-height: 120px;}

	#flow .box:after { width: 150px; right: 15px;}
	#flow .box.flow-1:after { height: 120px;}
	#flow .box.flow-2:after { height: 150px;}
	#flow .box.flow-3:after { height: 120px;}
	#flow .box.flow-4:after { height: 110px;}

	#flow .box .icn { width: 60px; left: -40px;}
	#flow .box dl { padding-right: 180px;}
	#flow .box dl dt { font-size: 3.4vw;}
	#flow .box dl dd { font-size: 16px;}
	#flow .box dl dd.btn a { font-size: 16px; max-width: 220px;}
	#flow .box dl dd.btn a img { width: 24px;}
	#flow .arw { padding: 15px 0;}
	#flow .arw:before { border: solid 60px transparent; border-top: solid 15px #53a9c0; border-bottom: none;}
}
@media (max-width: 481px) {
	#flow .inner-sct { padding: 40px 0;}
	#flow h2 { margin-bottom: 12px;}
	#flow .box { padding: 12px 0px; padding-left: 30px; border-width: 2px; border-radius: 12px;}
	#flow .box.flow-2 { min-height: auto;}
	#flow .box.flow-3 { min-height: auto;}
	#flow .box.flow-4 { min-height: auto;}

	#flow .box:after { width: 80px; right: 10px;}
	#flow .box.flow-1:after { height: 60px;}
	#flow .box.flow-2:after { height: 80px;}
	#flow .box.flow-3:after { height: 72px;}
	#flow .box.flow-4:after { height: 65px;}
	#flow .box .icn { width: 50px; left: -30px;}
	#flow .box dl { padding-right: 100px;}
	#flow .box dl dt { margin-bottom: 6px; font-size: 16px; letter-spacing: 0.05rem;}
	#flow .box dl dt br { display: block;}
	#flow .box dl dd { font-size: 12px; letter-spacing: 0.05rem;}
	#flow .box dl dd.btn a { font-size: 12px; max-width: 220px; padding: 4px 0; border-radius: 5px;}
	#flow .box dl dd.btn a img { width: 15px; margin-right: 6px;}
	#flow .arw { padding: 8px 0;}
	#flow .arw:before { border: solid 40px transparent; border-top: solid 8px #53a9c0; border-bottom: none;}
}



#faq {}
#faq .inner-sct { padding: 60px 0 80px;}
#faq h2 { margin-bottom: 20px; font-size: 48px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; text-align: center;}
#faq h2 span { background: linear-gradient(transparent 72%, #fde756 72%);}
#faq ul { width: 88%; max-width: 860px; margin: 0 auto;}
#faq ul li { padding: 8px 0;}
#faq ul li dl { width: 100%; border: solid 3px #53a9c0; border-radius: 20px;}
#faq ul li dl dt { position: relative; padding: 20px 50px; padding-left: 80px; cursor: pointer;
 color: #557988; font-size: 24px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4;
}
#faq ul li dl dt:after { content: ''; display: block; width: 25px; height: 25px;
 background: url('./img/faq-arw.png') no-repeat 50% 50% / 100%;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
}
#faq ul li dl dt.open:after { transform: translateY(-50%) rotate(180deg);}
#faq ul li dl dt img.icn { width: 30px; position: absolute; left: 30px; top: 50%; transform: translateY(-50%);}
#faq ul li dl dd { display: none; border-top: dashed 2px #53a9c0; padding: 20px 30px 30px;
 font-size: 18px; font-weight: 700; letter-spacing: 0.1rem;
}
@media (max-width: 801px) {
	#faq ul li dl dt { padding: 15px 40px; padding-left: 60px; font-size: 20px;}
	#faq ul li dl dt:after { width: 20px; height: 20px;}
	#faq ul li dl dt img.icn { width: 24px; left: 20px;}
	#faq ul li dl dd { padding: 12px 25px 20px; font-size: 16px;}
}
@media (max-width: 641px) {
	#faq h2 { font-size: 6.4vw;}
	#faq ul li dl { border-width: 2px; border-radius: 12px;}
	#faq ul li dl dd { border-width: 1px;}
}
@media (max-width: 481px) {
	#faq .inner-sct { padding: 40px 0;}
	#faq h2 { margin-bottom: 8px;}
	#faq ul li { padding: 5px 0;}
	#faq ul li dl dt { padding: 10px 40px; padding-left: 45px; font-size: 14px; letter-spacing: 0.05rem; line-height: 1.25;}
	#faq ul li dl dt:after { right: 12px;}
	#faq ul li dl dt img.icn { width: 16px; left: 20px;}
	#faq ul li dl dd { padding: 12px 20px 15px; font-size: 12px; letter-spacing: 0.05rem;}
}



#message { background: url('./img/bg-message.jpg') no-repeat 50% 50% / cover;}
#message .inner-sct { padding: 80px 0;}
#message h2 { margin-bottom: 50px; text-align: center;}
#message h2 img { width: 72%; max-width: 600px;}
#message p { text-align: center;}
#message p img { width: 92%; max-width: 720px;}
#message p img.sp { display: none;}
@media (max-width: 801px) {
	#message { background: url('./img/bg-message@sp.jpg') no-repeat 50% 50% / cover;}
	#message .inner-sct { padding: 60px 0;}
}
@media (max-width: 641px) {
	#message p img.pc { display: none;}
	#message p img.sp { display: block; margin: 0 auto;}
}
@media (max-width: 481px) {
	#message .inner-sct { padding: 40px 0;}
	#message h2 { margin-bottom: 30px;}
}


#support .inner-sct { padding: 80px 0;}
#support .ctn { position: relative; width: 100%; max-width: 1000px; margin: 0 auto;}
#support .ctn:after { content: ''; display: block; width: 280px; height: 500px;
 background: url('./img/bg-man.png') no-repeat 0% 100% / 100% auto;
 position: absolute; right: 0; bottom: -40px;
}
#support .ctn .inner { position: relative; width: 88%; margin: 0 auto;}
#support .ctn h2 { margin-bottom: 50px; font-size: 45px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.25;}
#support .box { position: relative; width: 100%; max-width: 620px; padding: 40px 10px 20px; padding-left: 30px; border: solid 3px #53a9c0; border-radius: 20px;}
#support .box .tips { position: absolute; left: 0; top: -20px; width: 100%; padding-left: 30px;}
#support .box .tips span { display: inline-block; padding: 5px 30px;
 background: linear-gradient(#7da9bb,#557988); border-radius: 50px;
 color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.2;
}
#support .box ul li { position: relative; margin-bottom: 10px; padding: 4px; padding-left: 35px;
 font-size: 22px; font-weight: 700; line-height: 1.4;}
#support .box ul li:last-child { margin-bottom: 0px;}
#support .box ul li:before { content: ''; display: block; width: 25px; height: 25px;
 background: url('./img/icn-check-2.png') no-repeat 50% 50% / 100%;
 position: absolute; left: 0; top: 7px;
}
#support .box ul li br { display: none;	}
#support .box ul li span { background: linear-gradient(transparent 60%, #fde756 60%);}
@media (max-width: 801px) {
	#support .inner-sct { padding: 60px 0;}
	#support .ctn:after { width: 250px; height: 440px; bottom: 0;}
	#support .ctn h2 { font-size: 6.0vw;}
	#support .box { width: calc(100% - 250px);}
	#support .box .tips { padding-left: 0px; text-align: center;}
	#support .box ul li br { display: block;}
}
@media (max-width: 641px) {
	#support .ctn:after { width: 210px; height: 400px; background-size: auto 100%;}
	#support .ctn h2 { margin-bottom: 40px;}
	#support .box { width: calc(100% - 200px);}
	#support .box .tips span { font-size: 20px;}
	#support .box ul li { font-size: 18px;}
}
@media (max-width: 481px) {
	#support .inner-sct { padding: 30px 0;}
	#support .ctn:after { width: 135px; height: 260px;}
	#support .ctn h2 { margin-bottom: 30px;}
	#support .box { width: calc(100% - 120px); padding: 20px 15px 10px; border-width: 2px; border-radius: 12px;}
	#support .box .tips { top: -18px;}
	#support .box .tips span { padding: 4px 20px; font-size: 13px;}
	#support .box ul li { margin-bottom: 0px; padding: 2px; padding-left: 24px; font-size: 12px;}
	#support .box ul li:before { width: 16px; height: 16px; top: 3px;}
}





#company .inner-sct { padding: 40px 0 60px;}
#company h2 { margin-bottom: 30px; font-size: 40px; font-weight: 700; letter-spacing: 0.15rem; line-height: 1.2; text-align: center;}
#company .ctn { width: 88%; max-width: 580px; margin: 0 auto 60px;}
#company ul { width: 100%; margin: 0 auto;}
#company ul li { padding: 8px 0;}
#company ul li dl { display: table; width: 100%;}
#company ul li dl dt,
#company ul li dl dd { display: table-cell; font-size: 18px; line-height: 1.4;}
#company ul li dl dt { width: 100px; font-weight: 700;}
#company ul li dl dd { width: auto;}
#company .back { text-align: center;}
#company .back a { color: #000; text-underline-offset: 2px; text-decoration-thickness: 1px;}
#company .back a:hover { text-decoration: none;}
@media (max-width:641px) {
	#company h2 { font-size: 6.2vw;}
	#company ul li { padding: 6px 0;}
	#company ul li dl dt,
	#company ul li dl dd { font-size: 16px;}
}
@media (max-width:481px) {
	#company .inner-sct { padding: 40px 0;}
	#company .ctn { margin: 0 auto 30px;}
	#company ul li dl dt,
	#company ul li dl dd { font-size: 13px;}
	#company ul li dl dt { width: 60px;}
	#company .back a { font-size: 13px;}
}


#policy .inner-sct { padding: 60px 0;}
#policy h2 { margin-bottom: 40px; font-size: 40px; font-weight: 700; letter-spacing: 0.15rem; line-height: 1.2; text-align: center;}
#policy .ctn { width: 88%; max-width: 720px; margin: 0 auto 60px;}
#policy .ctn p { margin-bottom: 30px; font-size: 18px;}
#policy .ctn ol {}
#policy .ctn ol li { padding: 12px 0; font-size: 16px; list-style-type: decimal;}
#policy .ctn ol li::marker{ font-size: 18px; font-weight: 700;}
#policy .ctn ol li span { display: block; font-size: 18px; font-weight: 700;}

#policy .back { text-align: center;}
#policy .back a { color: #000; text-underline-offset: 2px; text-decoration-thickness: 1px;}
#policy .back a:hover { text-decoration: none;}
@media (max-width:641px) {
	#policy h2 { font-size: 6.2vw;}
	#policy .ctn p { font-size: 16px;}
	#policy .ctn ol { padding-left: 20px;}
	#policy .ctn ol li { padding: 8px 0; font-size: 16px;}
	#policy .ctn ol li span { font-size: 18px;}
}
@media (max-width:481px) {
	#policy .inner-sct { padding: 40px 0;}
	#policy h2 { margin-bottom: 20px;}
	#policy .ctn { margin: 0 auto 20px;}
	#policy .ctn p { margin-bottom: 12px; font-size: 14px;}
	#policy .ctn ol li { font-size: 13px;}
	#policy .ctn ol li span { font-size: 14px;}
	#policy .back a { font-size: 13px;}
}