@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

@media screen and (min-width:800px){
	.no-pc{
		display:none!important;
	}
}
@media screen and (max-width:799px){   
	.no-sp{
		display:none!important;
	}
}

/* ==============================================
CSS reset
=============================================== */
* ,*:before ,*:after {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	vertical-align:baseline;
	font-size:inherit;
	font-weight:inherit;
}
button ,input ,textarea ,select {
	font-size:16px;
	padding:5px;
	letter-spacing:1px;
	font-family: 'Noto Sans JP', sans-serif;
}
input[type="submit"] ,button {
	font-size:16px;
	padding:10px 30px;
	font-family:inherit;
}

html ,body {
	min-height:100%;
	height:100%;
	font-family: 'Noto Sans JP', sans-serif;
	line-height:1.6;
}
a {
	color:inherit;
	text-decoration:none;
	cursor:pointer;
	transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
a:hover {
	text-decoration:none;
}

img {
	vertical-align:top;
	max-width:100%;
    max-height:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

ol ,ul ,li {
	list-style:none;
}

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

/* ============================================
common pc
=============================================== */

html{
    scroll-behavior: smooth;
}

html,body{
	margin:0;
	padding:0;
}

body{
	position:relative;
	font-size:16px;
	color:#000;
	background-color:#fff;
}

@media screen and (min-width:800px){
	#bgLayer{
		min-width: 1200px;
		max-width: 1920px;
		width:100%;
		margin:0 auto;	
	}
}

@media screen and (max-width:799px){
    #bgLayer{
        width:100%;
        min-width:0;
        max-width:100%;
        margin:0 auto;
        overflow-x:hidden;
    }
}

img{
	height:auto;
	display:inline-block;
	border:0 none;
}

h1,p{
	margin:0;
}
h2 {
    text-align: center;
    font-size: 250%;
    font-weight: bold;
}
h2 strong {
    color: #e7161a;
	font-weight: bold!important;
}

em {
	font-style: normal;
}

strong {
    font-weight: normal;
}

.tel-link-a{
	pointer-events: auto;
}

.all-center-full{
	width:100%;
	max-width:100%;
	margin:0 auto;
}

.all-center-1600{
	width:1600px;
	max-width:100%;
	margin:0 auto;
}

.all-center-1200{
	width:1200px;
	max-width:100%;
	margin:0 auto;
}

dl,dt,dd{
	display: block;
	margin: 0;
	padding: 0;
}

header,section,footer{
	max-width: 100%;
}

/* ==============================================
common SP
=============================================== */

@media screen and (max-width:799px){	
	.tel-link-a{
		pointer-events: auto;
	}

	.sp-LR15 {
		padding-left:15px !important;
		padding-right:15px !important;
	}

	.sp-L15 {
		padding-left:15px !important;
	}
	
	.sp-R15 {
		padding-right:15px !important;
	}
}

/* ====================================================================
	flex
==================================================================== */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}
.flex.column.rev {
	flex-direction:column-reverse;
}

.flex.wrap {
	flex-wrap:wrap;
}

.flex.col2 > * {
	width:calc(100% / 2);
}
.flex.col3 > * {
	width:calc(100% / 3);
}

.flex > .half {
	width:50%;
}
.flex > .full {
	width:100%;
}

.height-inherit > * {
	height:100%;
}
.height-inherit-all * {
	height:100%;
}

/* =============================
common caption
================================ */

.caption{
    text-align: center;
}

.caption-cover2{
    padding-top: 2em;
}

.caption2{
    text-align: center;
}

@media screen and (max-width:799px){

}

/* =====================================================================
common main
======================================================================== */

.bg-color1{
    background-color: #effbfb;
}

.waku{
    padding-top: 5em;
    padding-bottom: 5em;
}

.fvcontact > li {
    padding: 0 2em;
    text-align: center;
}

.cta-main-btn{
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:32px 96px;
    border-radius:26px;
    text-align:center;
    color:#fff;
    font-size:1rem;
    letter-spacing:0.08em;
    background:linear-gradient(180deg,#5be13d 0%,#149834 52%,#046d23 100%);
    box-shadow:0 24px 48px rgba(8,109,45,0.45);
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.cta-main-btn::before{
    content:"";
    position:absolute;
    inset:9px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.3);
}
.cta-main-btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,0.4),rgba(255,255,255,0));
    opacity:0.8;
}
.cta-main-btn__title{
    display:flex;
    flex-direction:column;
    gap:10px;
    font-weight:800;
    letter-spacing:0.08em;
    text-align:center;
}
.cta-main-btn__title em{
    font-style:normal;
    font-size:2.2rem;
    color:#ffe600;
    text-shadow:0 3px 8px rgba(0,0,0,0.25);
}
.cta-main-btn__title strong{
    font-size:2.2rem;
    letter-spacing:0.18em;
    color:#ffffff;
    text-shadow:0 4px 10px rgba(0,0,0,0.35);
}
.cta-main-btn__spark{
    position:absolute;
    width:22px;
    height:22px;
    top:18px;
    right:24px;
    background:radial-gradient(circle at 50% 50%,#fff 0%,rgba(255,255,255,0) 65%);
    filter:blur(1px);
}
.cta-main-btn__spark::before,
.cta-main-btn__spark::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:36px;
    height:6px;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.7),rgba(255,255,255,0));
}
.cta-main-btn__spark::after{
    transform:translate(-50%,-50%) rotate(90deg);
}
.cta-main-btn__icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background:rgba(255,255,255,0.2);
    border:1px solid rgba(255,255,255,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}
.cta-main-btn__icon svg{
    width:28px;
    height:28px;
}
.cta-main-btn:focus-visible{
    outline:3px solid rgba(255,255,255,0.85);
    outline-offset:4px;
}
.cta-microcopy{
    display:block;
    margin-bottom:16px;
    margin-top: 24px;
    text-align:center;
    color:#101010;
    font-weight:900;
    font-size:1.3rem;
    letter-spacing:0.16em;
}
.cta-microcopy__accent,
.cta-microcopy__accent--red{
    font-size:1.5rem;
    margin:0 4px;
}
.cta-microcopy__accent{
    color:#f38d11;
}
.cta-microcopy__accent--red{
    color:#e62f00;
}

.hero{
    background:#fff4f2;
    padding:1em 0 4em;
    position:relative;
    overflow:hidden;
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,0.4),rgba(229,245,255,0));
    pointer-events:none;
}
.hero-inner{
    position:relative;
    z-index:1;
    display:flex;
    gap:40px;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
}
.hero-copy{
    flex:1 1 55%;
}
.hero-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 20px;
    border-radius:999px;
    background:#101010;
    color:#fff;
    font-weight:700;
    letter-spacing:0.2em;
    font-size:0.95rem;
    margin-bottom:18px;
}
.hero-title{
    font-size:2.8rem;
    line-height:1.4;
    color:#e60012;
    font-weight:900;
    margin-bottom:32px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}
.hero-title > span{
    display:inline-block;
}
.hero-title-line{
    position:relative;
    display:inline-block;
}
.hero-title-line span{
    font-size:inherit;
}
.hero-title-line::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,#ffee00 0%,#ffe550 40%,#fbff00 100%);
    border-radius:999px;
    filter:drop-shadow(0 2px 6px rgba(255, 251, 4, 0.35));
    transform:scaleX(0);
    transform-origin:left center;
    animation:heroUnderline 1.1s ease-out forwards;
}
.hero-title-line:nth-child(2)::after{
    animation-delay:0.15s;
}
@keyframes heroUnderline{
    0%{transform:scaleX(0);opacity:0;}
    20%{opacity:1;}
    100%{transform:scaleX(1);opacity:1;}
}
.hero-checklist{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-weight:600;
    color:#575757;
}
.hero-checklist li{
    position:relative;
    padding-left:28px;
    font-size:1.2rem;
    display:flex;
    align-items:flex-start;
}
.hero-checklist li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    color:#0a8a4b;
    font-weight:900;
}
.hero-stats{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:32px;
    padding:0;
}
.hero-stats li{
    flex:1 1 160px;
    list-style:none;
    width:160px;
    height:160px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 12px 24px rgba(9,64,109,0.1);
    text-align:center;
    border:3px solid rgba(230,15,15,0.75);
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.hero-stats li::before{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:50%;
    border:2px dashed rgba(230,15,15,0.5);
    pointer-events:none;
}
.hero-stats__label{
    display:block;
    font-size:1.2rem;
    font-weight: bold;
    letter-spacing:0.18em;
    color:#6c6c6c;
}
.hero-stats strong{
    font-size:1.45rem;
    color:#e60012;
    font-weight:900;
    text-transform:uppercase;
}
.hero-visual{
    flex:1 1 45%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:360px;
}
.hero-illustration{
    width:75%;
    max-width:460px;
}
.hero-prize{
    position:absolute;
    width:120px;
}
.hero-prize--left{
    left:-10px;
    bottom:30px;
}
.hero-prize--right{
    right:-20px;
    top:40px;
}

article section {
    max-width: 1200px;
    margin: auto;
}

@media screen and (max-width:799px){   

    .waku {
        padding-top: 3em;
        padding-bottom: 3em;
    }

    .fvcontact li + li {
        padding: 1em 2em;
    }
    .cta-main-btn{
        width:100%;
        padding:24px 42px;
        border-radius:22px;
    }
    .cta-main-btn__title em{
        font-size:1.8rem;
    }
    .cta-main-btn__title strong{
        font-size:1.8rem;
    }
    .cta-main-btn__icon{
        width:44px;
        height:44px;
    }
    .cta-microcopy{
        font-size:1.1rem;
    }
    .hero{
        padding:1.5em 0;
    }
    .hero-inner{
        flex-direction:column;
        text-align:center;
    }
    .hero-copy{
        flex:1 1 auto;
    }
    .hero-title{
        font-size:2.2rem;
        gap:4px;
    }
    .hero-title-line{
        padding-bottom:10px;
    }
    .hero-checklist li{
        padding-left:0;
        font-size:1.0rem;
        display:block;
        text-align: left;
    }
    .hero-checklist li::before{
        position:static;
        margin-right:6px;
        display:inline-block;
    }
    .hero-stats{
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:space-between;
        gap:10px;
    }
    .hero-stats li{
        width:calc((100% - 20px) / 3);
        aspect-ratio:1 / 1;
        height:auto;
        padding:10px;
    }
    .hero-stats__label{
        font-size:0.75rem;
    }
    .hero-stats strong{
        font-size:1.15rem;
    }
    .hero-visual{
        width:90%;
        margin: 36px auto 0;
        min-height:auto;
    }
    .hero-prize{
        width:90px;
    }
}

/* ==================================
header
================================== */

header {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 10px #ccc;
    width: 100%;
}

header .header {
    padding-top: 1em;
    padding-bottom: 1em;
}

header .tel-free {
    height: 65px;
}

header .header .menu ul {
    display: flex;
    align-items: center;
}

header .header .menu ul li {
    padding: 0 5px;
}

@media screen and (max-width:799px){    
    header .header {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        justify-content: center !important;
    }

    .logo {
        /* padding-left: 10em;
        padding-right: 10em; */
    }
}

/* ==================================
fv
================================== */

#fv {
    width: 100%;
    margin: 0 auto;
}

#fv.waku{
    padding-top: 1em;
    padding-bottom: 2em;
}

#fv > section {
    max-width: 100%;
}

/* ==
cta
====*/

#fv .cta {
    padding-top: 3.6em;
}

#fv > section {
    max-width: 100%;
}

@media screen and (max-width:799px){

    #fv.waku {
        padding-top: 0em;
        padding-bottom: 0em;
    }

    #fv .contents > .img-cover:first-child {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    #fv .contents{
        flex-direction: column;
    }

    #fv .cta {
        padding-bottom: 1em;
    }
    
    #fv .fvcontact{
        flex-direction: column;
    }
}

/* ==================================
about
================================== */

#about .contets-wrapper{
    padding-top: 2em;
}

#about .contents-cover{
	padding-top: 3.5em;
}

#about .img-cover{
	background-repeat: no-repeat;
	background-position: 50% 3%;
	background-size: auto;
    border-radius: 10px;
	width: 360px;
}

#about .contents-cover:nth-child(1) .img-cover{
	background-image: url(newimages/pc/about01.webp);
}

#about .contents-cover:nth-child(2) .img-cover{
	background-image: url(newimages/pc/about02.webp);
}

#about .contents-cover:nth-child(3) .img-cover{
	background-image: url(newimages/pc/about03.webp);
}

#about .contents-cover:nth-child(4) .img-cover{
	background-image: url(newimages/pc/about04.webp);
}

#about .contents-cover:nth-child(5) .img-cover{
	background-image: url(newimages/pc/about05.webp);
}

#about .contents-cover:nth-child(6) .img-cover{
	background-image: url(newimages/pc/about06.webp);
}

#about .text-caption {
    font-size: 120%;
    color: #000;
    padding-top: 140px;
	text-align:center;
    font-weight: bold;
}

#about .text-cover {
    padding-left: 2em;
    padding-right: 2em;
}

#about .text{
	padding-top: 1em;
    font-size: 115%;
}

#about .text + .text{
	padding-top: 1em;
}

@media screen and (max-width:799px){	
    #about .contets-wrapper {
        padding-top: 0;
        justify-content: center;
    }

    #about .contents-cover {
        padding-top: 3em;
    }

    #about .contents-cover + .contents-cover{
        padding-top: 1.5em;
    }

    #about .img-cover{
        position:relative;
        background-repeat: no-repeat;
        background-position: 50% 0%;
        background-size: 100%;
        width: 450px;
        height: 220px;
        padding-bottom: 1em;
    }

    #about .contents-cover:nth-child(1) .img-cover{
        background-image: url(newimages/sp/about01.webp);
    }
    
    #about .contents-cover:nth-child(2) .img-cover{
        background-image: url(newimages/sp/about02.webp);
    }
    
    #about .contents-cover:nth-child(3) .img-cover{
        background-image: url(newimages/sp/about03.webp);
    }
    
    #about .contents-cover:nth-child(4) .img-cover{
        background-image: url(newimages/sp/about04.webp);
    }
    
    #about .contents-cover:nth-child(5) .img-cover{
        background-image: url(newimages/sp/about05.webp);
    }
    
    #about .text-caption {
		position:absolute;
		bottom:0;
		width:100%;
        height: auto;
        padding-top: 1.5em;
        padding-left: 1.5em;
        padding-right: 1.5em;
        font-weight: bold;
        font-size: 125%;
    }

    #about .text-cover {
        padding-left: 1em;
        padding-right: 1em;
    }

    #about .text {
        padding-top: 0.5em;
        font-size: 100%;
    }

    #about .text + .text {
        padding-top: 0.5em;
    }
}

/* ==================================
content
================================== */

#content .caption-cover2{
    background-image: url(images/pc/content_baloon.webp);
	background-repeat: no-repeat;
	background-position:50% 0%;
	background-size: auto;
	height: 250px;
    margin: 0 auto;
}

#content .caption2{
    padding-top: 2em;
}

#content .contents-cover{
	padding-top: 1em;
}

#content .img-cover{
	padding-top:2em;
}

#content .caption2-text {
    font-size: 180%;
    font-weight: bold;
    padding-top: 2em;
}

.logo-slider .caption2-text {
    text-align: center;
    font-size: 180%;
    font-weight: bold;
}
.logo-slider .caption2-text strong {
    color: #e7161a;
	font-weight: bold!important;
}

@media screen and (max-width:799px){
    #content .caption-cover2{
        background-image: url(images/sp/content_baloon.webp);
        background-size: 100%;
        height: 260px;
    }

    #content .caption {
        padding-left: 2em;
        padding-right: 2em;
    }

    #content .contents{
        padding-top: 1em;
    }

    #content .caption2-text {
        font-size: 150%;
        font-weight: bold;
        padding-top: 2em;
    }

    #content .img-cover {
        padding-top: 0;
    }
}

/* ==================================
reason
================================== */

#reason .contents-cover{
	padding-top: 3em;
}

#reason .contents-cover + .contents-cover{
	padding-top: 2em;
}

#reason .img-cover{
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto;
	height: 260px;
    padding-left: 5.5em;
    padding-right: 28em;
}

#reason .contents-cover:nth-child(1) .img-cover{
	background-image: url(images/pc/reason01.webp);
}

#reason .contents-cover:nth-child(2) .img-cover{
	background-image: url(images/pc/reason02.webp);
}

#reason .contents-cover:nth-child(3) .img-cover{
	background-image: url(images/pc/reason03.webp);
}

#reason .text-caption-cover {
    padding-top: 5em;
}

#reason .text-caption {
    font-size: 150%;
	font-weight: bold;
}

#reason .color1{
	color: #e5241b;
}

#reason .text-cover{
	padding-top: 1em;
}

@media screen and (max-width:799px){

    #reason .img-cover{
        background-repeat: no-repeat;
        background-position: 50% 0%;
        background-size: 100%;
        height: 440px;
        padding-left: 0;
        padding-right: 0;
    }

    #reason .contents-cover {
        padding-top: 1em;
    }

    #reason .contents-cover:nth-child(1) .img-cover{
        background-image: url(images/sp/reason01.webp);
    }
    
    #reason .contents-cover:nth-child(2) .img-cover{
        background-image: url(images/sp/reason02.webp);
    }
    
    #reason .contents-cover:nth-child(3) .img-cover{
        background-image: url(images/sp/reason03.webp);
    }

    #reason .contents-cover + .contents-cover{
        padding-top: 1.5em;
    }

    #reason .text-caption-cover {
        padding-top: 4.5em;
    }

    #reason .text-caption {
        text-align: center;
        line-height: 1.3;
    }

    #reason .text-cover {
        padding: 1em 2em 0;
    }
}

/* ==================================
merit
================================== */

#merit .waku{
	background-color: #e72019;
}

.merit-outer {
    padding-top: 5em;
}

#merit .merit-outer + .merit-outer{
	padding-top: 3em;
}

#merit .merit-wrapper{
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:auto;
	height: 320px;
	padding-top: 1em;
	max-width: 100%;
}

#merit .merit-outer:nth-child(1) .merit-wrapper{
	background-image: url(images/common/merit1_bg.webp);
}

#merit .merit-outer:nth-child(2) .merit-wrapper{
	background-image: url(images/common/merit2_bg.webp);
}

#merit .merit-outer:nth-child(3) .merit-wrapper{
	background-image: url(images/common/merit3_bg.webp);
}

#merit .text-wrapper{
	color: #fff;
    padding-left: calc(50% - 80px);
    padding-right: 8em;
}

#merit .merit-outer:nth-child(2n) .text-wrapper{
	padding-left: 8em;
	padding-right: calc(50% - 80px);
}

#merit .text-caption-r{
	font-size: 150%;
    padding-top: 25px;
	padding-left: 1em;
    font-weight: bold;
}

#merit .text-cover{
	padding-top: 1em;
}

#merit .text {
    font-size: 110%;
}

@media screen and (max-width:799px){

    #merit .waku {
        padding-bottom: 4em;
    }

    #merit .caption {
        padding-left: 1em;
        padding-right: 1em;
    }

    #merit .merit-outer {
        padding-top: 3em;
    }

    #merit .merit-wrapper {
        background-position: 0 0;
        background-size: auto 175px;
        height: auto;
        padding-top: 12em;
    }

    #merit .merit-outer:nth-child(2n) .merit-wrapper{
        background-position: 100% 0;
    }

    #merit .text-wrapper {
        padding-left:0;
        padding-right:0;
    }

    #merit .merit-outer:nth-child(2n) .text-wrapper{
        padding-left:0;
        padding-right:0;
    }

    #merit .text-caption-l .img-cover > img{
        height: 90px;
    }

    #merit .text-caption-r {
        line-height: 1.4;
        font-weight: bold;
        padding-top: 0.8em;
        padding-left: 0.5em;
    }

    #merit .text {
        font-size: 100%;
    }
}

/* ==================================
cta2
================================== */

#cta2 .waku{
    padding-top: 0;
}

#cta2 .img-cover{
    background-image: url(images/common/triangle.png);
    background-repeat: no-repeat;
    background-size:auto;
    background-position: 50% 50%;
    width: 120px;
    height: 60px;
    margin: 0 auto;
    margin-top: -1px;
}

#cta2 .caption-cover{
    padding-top: 4em;
}

#cta2 .waku2{
    background-image: url(images/pc/cta_bg.webp);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 50% 50%;
    width: 100%;
    height: 315px;
}

#cta2 .text-cover{
    padding-top: 3em;
}

#cta2 .text{
    text-align: center;
    color: #fff;
    font-style: oblique;
    font-size: 220%;
    font-weight: bold;
}

#cta2 .fvcontact {
    padding-top: 2em;
}

@media screen and (max-width:799px){

    #cta2 .waku {
        padding-top: 0;
    }

    #cta2 .img-cover {
        width: 70px;
        height: 60px;
        margin-top: -25px;
    }

    #cta2 .caption-cover {
        padding-top: 1.5em;
    }

    #cta2 .caption {
        padding-left: 2em;
        padding-right: 2em;
    }
    
    #cta2 .waku2 {
        background-image: url(images/sp/cta_bg.webp);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 50% 50%;
        width: 100%;
        height: 400px;
    }

    #cta2 .fvcontact {
        padding-top: 1.5em;
        flex-direction: column;
    }

    #cta2 .fvcontact li + li {
        padding: 1.5em 2em 0;
    }

    #cta2 .text-cover {
        padding-top: 2.5em;
    }

    #cta2 .text {
        line-height: 1.2;
    }

}

/* ==================================
price
================================== */

#price .contents-cover{
    text-align: center;
}


#price  .attention-text{
    padding-top: 16px;
    text-align: left;
    font-size: 0.8em;
}

@media screen and (max-width:799px){
    #price .waku {
        padding-bottom: 2em;
    }

    #price .caption {
        padding-left: 10em;
        padding-right: 10em;
    }
}

    /* Price section responsive cards */
    #price .plans-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 0 16px;
      box-sizing: border-box;
      margin: 0 auto;
      max-width: 1200px;
    }
    @media (min-width: 768px) {
      #price .plans-grid { grid-template-columns: repeat(3, 1fr); }
    }
    .plan-card {
      background: #ffcccc47;
      border: 2px solid #e72019;
      border-radius: 12px;
      padding: 24px 20px;
      box-sizing: border-box;
      box-shadow: 0 0 10px 1px #bbb;
    }
    .plan-card h3 {
      font-size: 2.4rem;
      font-weight: 700;
      color: #e72019;
      letter-spacing: 0.08em;
      margin: 6px 0 16px;
      text-align: center;
    }
    .plan-visual {
      margin: 0 0 12px;
      text-align: center;
    }
    .plan-visual img {
      width: 100%;
      max-width: 90%;
      height: auto;
    }
    .feature-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 14px;
    }
    .feature {
      background: #ffffff;
      border-radius: 10px;
      padding: 12px 12px;
      border: 1px solid #ffffff;
    }
    .feature .badge {
      display: inline-block;
      background: #ff6b6bde;
      color: #fff;
      font-weight: 700;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 0.94rem;
      letter-spacing: 0.02em;
    }
    .feature p {
      margin: 8px 2px 2px;
      line-height: 1.7;
      color: #333;
      font-size: 0.95rem;
      text-align: left;
    }
    .price-line {
      margin-top: 16px;
      text-align: center;
    }
    .price-line .label {
      margin-right: 8px;
      color: #ff7a7a;
      font-weight: 700;
      letter-spacing: 0.08em;
    }
    .price-line .value {
      font-size: 2.0rem;
      font-weight: 800;
      color: #333333;
      letter-spacing: 0.06em;
      display: inline-block;
      position: relative;
      padding-bottom: 6px;
    }
    .price-line .value::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 6px;
      background: repeating-linear-gradient(
        -10deg,
        rgba(255,138,138,0.28), rgba(255,138,138,0.28) 6px,
        rgba(255,138,138,0.12) 6px, rgba(255,138,138,0.12) 12px
      );
      border-radius: 3px;
    }
    .price-notes {
      margin-top: 8px;
      color: #5f6b76;
      font-size: 0.85rem;
      line-height: 1.7;
      padding: 0 16px;
      box-sizing: border-box;
    }
    /* hide legacy static image inside price contents */
    #price .contents > picture { display: none; }
    @media (min-width: 1024px) {
      .plan-card { padding: 26px 24px; }
      .plan-visual img { width: 100%; }
      .plan-card h3 { font-size: 1.8rem; }
    }
    
/* ==================================
flow
================================== */

#flow .contents-cover{
    padding-top: 2em;
}

#flow .contents:nth-child(n+2) .img-cover{
    height: 190px;
}

#flow .contents:nth-child(1) .img-cover{
	background-image: url(images/pc/flow01.webp);
    height: 255px;
}

#flow .contents:nth-child(2) .img-cover{
	background-image: url(images/pc/flow02.webp);
}

#flow .contents:nth-child(3) .img-cover{
	background-image: url(images/pc/flow03.webp);
}

#flow .contents:nth-child(4) .img-cover{
	background-image: url(images/pc/flow04.webp);
}

#flow .contents:nth-child(5) .img-cover{
	background-image: url(images/pc/flow05.webp);
}

#flow .contents:nth-child(6) .img-cover{
	background-image: url(images/pc/flow06.webp);
}

#flow .img-cover{
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: auto;
    padding-left: 22em;
    padding-right: 5em;
}

#flow .text-caption {
    font-size: 150%;
	font-weight: bold;
}

#flow .contents:nth-child(1) .text-caption{
    padding-top: 5em;
}

#flow .contents:nth-child(n+2) .text-caption{
    padding-top: 2.2em;
}

#flow .text-cover{
	padding-top: 0.5em;
}

#flow .text {
    font-size: 105%;
}
#flow .caption-cover {
    padding-top: 4em;
}

@media screen and (max-width:799px){

    #flow .waku {
        padding-bottom: 3em;
    }

    #flow .caption {
        padding-left: 8em;
        padding-right: 8em;
    }

    #flow .img-cover {
        background-position: 50% 0%;
        background-size: 100%;
        padding-right: 2em;
        padding-left: 8.5em;
    }

    #flow .text-caption-cover {
        padding-top: 0.5em;
    }

    #flow .contents:nth-child(n+2) .text-caption {
        padding-top: 2em;
    }

    #flow .contents-cover{
        padding-top: 1em;
    }

    #flow .contents:nth-child(1) .img-cover{
        background-image: url(images/sp/flow01.webp);
        height: 265px;
    }

    #flow .contents:nth-child(2) .img-cover{
        background-image: url(images/sp/flow02.webp);
    }
    
    #flow .contents:nth-child(3) .img-cover{
        background-image: url(images/sp/flow03.webp);
    }
    
    #flow .contents:nth-child(4) .img-cover{
        background-image: url(images/sp/flow04.webp);
    }
    
    #flow .contents:nth-child(5) .img-cover{
        background-image: url(images/sp/flow05.webp);
    }
    
    #flow .contents:nth-child(6) .img-cover{
        background-image: url(images/sp/flow06.webp);
    }

    #flow .contents:nth-child(n+2) .img-cover {
        height: 225px;
    }

    #flow .contents:nth-child(1) .text-caption {
        padding-top: 3.5em;
    }

    #flow .text {
        font-size: 100%;
    }
    #flow .caption-cover {
        padding-top: 1.5em;
    }
}

/* ==================================
faq
================================== */

#faq .contents-wrapper{
	padding-top:3em;
    width:870px;
    margin: 0 auto;
}

#faq .contents-cover + .contents-cover{
	padding-top:1.5em;
}

/* q */
/* a */
#faq .q-con,
#faq .a-con{
    padding-left: 1.5em;
    padding-right: 1.5em;
}

#faq .icon{
    min-width: 50px;
    min-height: 50px;
    align-self: flex-start;
    height: calc(1.8em * 2);
    display: flex;
    justify-content: center;
    align-items: center;
}

#faq .text{
    padding-left:1em;
}

/* q */
#faq .q-con{
	min-height:60px;
    background-color:#fff;
    border-radius: 15px;
    box-shadow: 0 0 10px 1px #bbb;
}

#faq .q-con > .text{
    font-weight: bold;
	width:100%;
    font-size: 120%;
}

/* a */
#faq .a-cover {
    padding-top: 0.5em;
}

#faq .a-con{
	min-height:60px;
}

#faq .a-con > .text{
    font-size: 110%;
}

@media screen and (max-width:799px){

    #faq .caption {
        padding-left: 8em;
        padding-right: 8em;
    }

    #faq .contents-wrapper {
        width: auto;
        padding-top: 1.5em;
    }

    #faq .q-con{
        padding: 0.5em 1em;
    }

    #faq .q-con > .text{
        font-size: 130%;
    }

    #faq .a-con {
        padding-left: 1em;
        padding-right: 1em;
    }

    #faq .text {
        line-height: 1.6;
        padding-left: 0.5em;
    }
} 

/* ==================================
other
================================== */

#other .contents-wrapper{
    padding-top: 2em;
}

#other .contents-cover{
    padding: 1em;
    width: calc(100% / 5);
}
.handling_btn{
	position:relative;
	display:block;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
	border:#e72019 1px solid;
	background-color: #FFF;
	border-radius:10px;
	color:#e72019;
	text-align:center;
	margin:0 auto;
	padding:3px 20px;
}
.handling_btn:hover{
	background:#e72019;
	color:#FFF;
}
	a.handling_btn:after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  bottom: 0;
	  right: 1rem;
	  font-size: 90%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  transition: right 0.3s;
	  width: 6px;
	  height: 6px;
	  border-top: solid 2px currentColor;
	  border-right: solid 2px currentColor;
	  transform: translateY(-50%) rotate(45deg);
	}
	.handling_btn.nourl{
		opacity: 0;
		pointer-events: none;
	}

@media screen and (max-width:799px){

    #other .caption {
        padding-left: 1.5em;
        padding-right: 1.5em;
    }

    #other .contents-wrapper{
        padding-top: 2em;
    }

    #other .contents-cover {
        padding: 0;
        width: calc(100% / 2);
    }
	.handling_btn{
		margin:0 10px 20px 10px;
	}
}

/* ==================================
form
================================== */

#Form {
    text-align: center;
}

.form-wrapper {
    background: #FFF;
    border-radius: 10px;
}

form#mailformpro {
    padding: 10px 0px;
    box-shadow: 0 0 5px 1px #effbfb;
    border-radius: 5px;
}

div#mfp_hidden {
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0px;
    margin: 0px;
}

div#mfp_hidden input {
    margin: 10px;
}

input[type=submit] {
    font-size: 22px;
}

input, textarea, select, .checkbox-bg {
    background-color: #effbfb;
    border: none;
    padding: 10px;
    color: #000;
}

input, textarea, select {
    width: 100%;
}

dl {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    width: 75%;
    line-height: 1.6;
    margin: auto;
}

dt {
    width: 30%;
    text-align: left;
    padding: 2.5em 0 0 1em;
    color: #000;
    background-image: linear-gradient(to right, #999, #999 2px, transparent 2px, transparent 8px);
    background-size: 8px 2px;
    background-position:center bottom;
    background-repeat: repeat-x;
}

dt:nth-of-type(3) {
    background-image:none;
}

dd:nth-of-type(3) {
    background-image:none;
}

.required,
.required2,
.required3,
.optional,
.checkbox-text,
div.mfp_err{
    font-weight: bold;
}

.required:after, .required2:after {
    margin-left: 1em;
}

.required:after, .required2:after, .required3:after {
    content: attr(data-text);
    display: inline-block;
    padding: 0.3em 0.5em;
    line-height: 1;
    color: #000;
}

.required3:after {
    margin-left: 0.5em;
    padding: 0.3em 0;
}

dd {
    width: 70%;
    margin-left: auto;
    background-image: linear-gradient(to right, #999, #999 2px, transparent 2px, transparent 8px);
    background-size: 8px 2px;
    background-position:right bottom;
    background-repeat: repeat-x;
    padding-top: 2em;
    padding-right: 1em;
    padding-bottom: 1em;
}

dd:nth-of-type(4){
    padding-top: 0;
}

dt.t-left {
    text-align: right;
    padding: 0.5em 0 0 1em;
}

select {
    padding-left: 1em;
}

.problem {
    border-radius: 5px;
}

.checkbox-bg-wrapper {
    width: 570px;
}

.checkbox-bg-wrapper,
.checkbox-bg-wrapper2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.checkbox-bg-cover {
    display: flex;
    align-items: center;
}

.checkbox-bg {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 100%;
    background-color: #effbfb;
    width: auto;
    height: 40px;
    padding: 0.5em;
}

input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: inline;
    background-color: #fff;
}

.mfp_element_checkbox,
.mfp_element_radio {
    vertical-align: middle;
    margin: 0px 2px;
}

.checkbox-text {
    padding-right: 0.5em;
    padding-left: 0.5em;
    color: #000;
    white-space: nowrap;
}

div.mfp_err {
    clear: both;
    display: none;
    text-align: left;
    margin: 5px 0px 0px 0px;
    padding: 3px 0px 5px 17px;
    color: #F00;
    font-size: 18px;
    line-height: normal;
    background-image: url(_images/mfp_error.gif);
    background-repeat: no-repeat;
    background-position: 0px 1px;
}

textarea {
    resize: none;
    height: 12em;
    padding: 0.5em;
}

.formButton {
    padding-top: 2em;
    color: #000;
}

.formButton .anime-button {
    width: 330px;
    height: calc(100px + 15px);
    background: initial;
    margin: auto;
}

.formButton .anime-button .anime-button-inner {
    border-radius: 10px;
    height: 100px;
    box-shadow: 0 3px 0 #059300;
    background: #2ebb2a;
    padding: 10px 0;
}

.formButton .anime-button .submit-btn {
    color: #FFF;
}

input[type=submit] {
    font-size: 18px;
    font-weight: bold;
}

.submit-btn {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 64px;
    background: transparent;
}

@media screen and (max-width:799px){
    
    .formButton {
        padding-top: 0em;
    }
    
    .formButton .anime-button {
        width: 370px;
    }

    #Form .caption-cover {
        padding-bottom: 3em;
    }

    #Form .caption {
        padding-left: 3em;
        padding-right: 3em;
    }
}


/* ==================================
form
================================== */

#Form.article-padding {
    padding: 5em 1.5em 2em;
}

#Form .caption-cover {
    padding-bottom: 3em;
}

#Form .formButton .anime-button:hover {
    padding-top: 2px;
}

.required2 {
    white-space: nowrap;
}

@media screen and (max-width:799px){

    #Form .caption-cover {
        padding-bottom: 2em;
    }
    
    dl{
		width:90%;
        padding-top: 1em;
	}

	dt,dd,.checkbox-bg-wrapper{
		width:100%;
	}

    dt {
        padding:1em 0 0 0;
        background-image:none;
    }

	dd{
        padding: 0.3em 0 2em;
	}

    dd:nth-of-type(2){
        padding: 0.3em 0 1em;
	}

    dd:last-child{
        background-image: none;
	}

    .required,
    .required2,
    .required3,
    .optional,
    .checkbox-text,
    div.mfp_err {
        font-size: 120%;
    }

    .required2 {
        white-space: normal;
        display: block;
    }

	.required2:after {
		display:block;
		margin-top:0.5em;
		margin-left:0;
		padding-left:0;
	}

    .required2:after,
    .required3 {
        font-weight: normal;
        white-space: nowrap;
    }

	dt.t-left {
		padding:0;
		text-align:left;
	}
	.checkbox-bg-wrapper,
    .checkbox-bg-wrapper2{
		flex-direction: column;
		align-items:flex-start;
	}
	.ajustment-m-left,
    .ajustment-p-top{
		margin:1em 0 0;
	}

    .formButton .anime-button {
        height: calc(70px + 15px);
    }
}

/* ==================================
footer
================================== */

footer {
    text-align: center;
    padding: 20px 0 120px;
}

@media screen and (max-width:799px){	
}


/* ==================================
footer nav button
================================== */

#footer-nav-button{
	padding-top: 2em;
}

#footer_btn{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding-top: 1em;
    width: 100%;
    max-width: 100%;
    margin:0 auto;	
}

#footer_cta .img-cover{
	padding-left: 0.5em;
	padding-right: 0.5em;
}

@media screen and (max-width:799px){

	#footer-nav-button {
		padding-top: 0;
	}

    #footer_btn {
        position: fixed;
        padding:0;
        z-index: 1;
        width: 100%;
        max-width: 100%;
    }

    #footer_cta{
        justify-content:space-between;
    }
		
	#footer_cta .img-cover{
		padding-left: 0.1em;
		padding-right: 0.1em;
	}
}

/* ==========================================================================================================================================
animation
========================================================================================================================================== */


@-webkit-keyframes blink {
	0%{opacity:0.1;} 100%{opacity:1;}
}
@keyframes blink{
	0%{opacity:0.1;} 100%{opacity:1;}
}

.blink {
	-webkit-animation:0.6s ease infinite alternate blink;
	animation:0.6s ease infinite alternate blink;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.popup {
	opacity:0;
}

.popup.on {
    opacity:1;
    -webkit-animation:0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards popup;
    animation:0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards popup;
}

.bg-wrap {
    opacity: 0;
    overflow: hidden;
}

.bg-wrap.on {
    opacity: 1;
}

.inn {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, 0, 100);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.inn.on {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

#case .caption{
	padding-bottom:2em;
}

#case .caption .caption2-text{
    font-size: 180%;
    font-weight: bold;
    padding-top: 0.5em;
    text-align: center;
}
#case .caption .caption2-text strong{
    color: #e5241b;
    font-weight: bold;
}

#case .caption .caption3-text{
    font-size: 160%;
    font-weight: bold;
    padding-top: 2em;
    text-align: center;
}
#case .caption .caption3-text strong{
    color: #e5241b;
    font-weight: bold;
}

#case .slick-list{
    width:100%;
	overflow:hidden;
}

@media screen and (max-width:768px){
	#case{
		padding:2em 0;
	}

#case .slick-list{
		width:100%;
		overflow:hidden;
	}
}




/* =============================================================
plan-card animation (fade & slight up)
scroll-in: add class .on (via inview)
============================================================= */
@keyframes planCardFade {
  0% { opacity: 0; transform: translateY(24px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* =============================================================
#case grid
============================================================= */
#case .case-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:28px;
  padding: 0 16px 8px;
  margin: auto;
  max-width:1200px;
}
@media (min-width:768px){
  #case .case-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width:1200px){
  #case .case-grid{ grid-template-columns: repeat(4,1fr); }
}

#case .case-card{
  background:#fff;
  border:1px solid #e6eef6;
  border-radius:12px;
  padding:16px;
  box-shadow: 0 0 10px 1px #bbb;
}
#case .case-visual{ margin:0 0 12px; }
#case .case-visual img{ width:100%; height:auto; display:block; border-radius:8px; }

#case .case-meta{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
#case .case-no{
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #e5241b; color:#e5241b; font-weight:700; letter-spacing:0.02em;
}
#case .case-title{ font-size:1.05rem; color:#e5241b; font-weight:700; }
#case .case-text{ font-size:0.95rem; color:#333; line-height:1.7; }


/* case-card scroll-in animation */
#case .case-card { opacity: 0; transform: translateY(20px) scale(0.98); }
#case .case-card.on { animation: planCardFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
#case .case-card.on:nth-child(1) { animation-delay: 0.08s; }
#case .case-card.on:nth-child(2) { animation-delay: 0.16s; }
#case .case-card.on:nth-child(3) { animation-delay: 0.24s; }
#case .case-card.on:nth-child(4) { animation-delay: 0.32s; }
#case .case-card.on:nth-child(5) { animation-delay: 0.40s; }
#case .case-card.on:nth-child(6) { animation-delay: 0.48s; }
#case .case-card.on:nth-child(7) { animation-delay: 0.56s; }
#case .case-card.on:nth-child(8) { animation-delay: 0.64s; }

@media (prefers-reduced-motion: reduce) {
  #case .case-card,
  #case .case-card.on { animation: none; opacity: 1; transform: none; }
}

/* initial state */
.plans-grid > .plan-card { opacity: 0; transform: translateY(24px) scale(0.98); }
/* animate when .on is added */
.plans-grid > .plan-card.on { animation: planCardFade 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.plans-grid > .plan-card.on:nth-child(1) { animation-delay: 0.10s; }
.plans-grid > .plan-card.on:nth-child(2) { animation-delay: 0.22s; }
.plans-grid > .plan-card.on:nth-child(3) { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .plans-grid > .plan-card,
  .plans-grid > .plan-card.on { animation: none; opacity: 1; transform: none; }
}

/* =============================================================
Tag chips
============================================================= */
.tag-section{
  margin:32px 32px 0;
  padding:32px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 18px 45px rgba(16,60,92,0.12);
}
.tags-grid{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
}
.tag-column{
  flex:1 1 360px;
}
.tag-title{
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.tag-title::before{
  content:"";
  width:8px;
  height:24px;
  border-radius:999px;
  background:#e5241b;
  display:inline-block;
}
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.tag-chip{
  padding:8px 18px;
  border-radius:999px;
  border:1px solid #d3dee8;
  background:#f7fbff;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
  opacity:0;
  transform:translateY(12px);
}
.tag-chip--ghost{
  color:#5a6472;
  border-style:dashed;
  background:#fff;
}
.tag-chip.on{
  animation: tagChipFade 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.tag-list .tag-chip:nth-child(1).on { animation-delay:0.04s; }
.tag-list .tag-chip:nth-child(2).on { animation-delay:0.08s; }
.tag-list .tag-chip:nth-child(3).on { animation-delay:0.12s; }
.tag-list .tag-chip:nth-child(4).on { animation-delay:0.16s; }
.tag-list .tag-chip:nth-child(5).on { animation-delay:0.20s; }
.tag-list .tag-chip:nth-child(6).on { animation-delay:0.24s; }
.tag-list .tag-chip:nth-child(7).on { animation-delay:0.28s; }
.tag-list .tag-chip:nth-child(8).on { animation-delay:0.32s; }
.tag-list .tag-chip:nth-child(9).on { animation-delay:0.36s; }
.tag-list .tag-chip:nth-child(10).on { animation-delay:0.40s; }
.tag-list .tag-chip:nth-child(11).on { animation-delay:0.44s; }
.tag-list .tag-chip:nth-child(12).on { animation-delay:0.48s; }
@keyframes tagChipFade{
  0%{ opacity:0; transform:translateY(12px) scale(0.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .tag-chip{ opacity:1; transform:none; }
  .tag-chip.on{ animation:none; }
}
@media (max-width:799px){
  .tag-section{
    padding:24px 18px;
  }
  .tag-title{
    font-size:1.2rem;
  }
}
/* =====================================================================
Utilities: Spacing (padding/margin)
Scale: 0,4,8,12,16,20,24,32,40,48,64 px
Usage: u-p-16 u-pt-8 u-px-12 / u-mb-24 u-mx-auto
===================================================================== */

/* helper */
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-m-auto  { margin: auto; }

/* 0 */
.u-p-0{padding:0}.u-pt-0{padding-top:0}.u-pr-0{padding-right:0}.u-pb-0{padding-bottom:0}.u-pl-0{padding-left:0}.u-px-0{padding-left:0;padding-right:0}.u-py-0{padding-top:0;padding-bottom:0}
.u-m-0{margin:0}.u-mt-0{margin-top:0}.u-mr-0{margin-right:0}.u-mb-0{margin-bottom:0}.u-ml-0{margin-left:0}.u-mx-0{margin-left:0;margin-right:0}.u-my-0{margin-top:0;margin-bottom:0}

/* 4 */
.u-p-4{padding:4px}.u-pt-4{padding-top:4px}.u-pr-4{padding-right:4px}.u-pb-4{padding-bottom:4px}.u-pl-4{padding-left:4px}.u-px-4{padding-left:4px;padding-right:4px}.u-py-4{padding-top:4px;padding-bottom:4px}
.u-m-4{margin:4px}.u-mt-4{margin-top:4px}.u-mr-4{margin-right:4px}.u-mb-4{margin-bottom:4px}.u-ml-4{margin-left:4px}.u-mx-4{margin-left:4px;margin-right:4px}.u-my-4{margin-top:4px;margin-bottom:4px}

/* 8 */
.u-p-8{padding:8px}.u-pt-8{padding-top:8px}.u-pr-8{padding-right:8px}.u-pb-8{padding-bottom:8px}.u-pl-8{padding-left:8px}.u-px-8{padding-left:8px;padding-right:8px}.u-py-8{padding-top:8px;padding-bottom:8px}
.u-m-8{margin:8px}.u-mt-8{margin-top:8px}.u-mr-8{margin-right:8px}.u-mb-8{margin-bottom:8px}.u-ml-8{margin-left:8px}.u-mx-8{margin-left:8px;margin-right:8px}.u-my-8{margin-top:8px;margin-bottom:8px}

/* 12 */
.u-p-12{padding:12px}.u-pt-12{padding-top:12px}.u-pr-12{padding-right:12px}.u-pb-12{padding-bottom:12px}.u-pl-12{padding-left:12px}.u-px-12{padding-left:12px;padding-right:12px}.u-py-12{padding-top:12px;padding-bottom:12px}
.u-m-12{margin:12px}.u-mt-12{margin-top:12px}.u-mr-12{margin-right:12px}.u-mb-12{margin-bottom:12px}.u-ml-12{margin-left:12px}.u-mx-12{margin-left:12px;margin-right:12px}.u-my-12{margin-top:12px;margin-bottom:12px}

/* 16 */
.u-p-16{padding:16px}.u-pt-16{padding-top:16px}.u-pr-16{padding-right:16px}.u-pb-16{padding-bottom:16px}.u-pl-16{padding-left:16px}.u-px-16{padding-left:16px;padding-right:16px}.u-py-16{padding-top:16px;padding-bottom:16px}
.u-m-16{margin:16px}.u-mt-16{margin-top:16px}.u-mr-16{margin-right:16px}.u-mb-16{margin-bottom:16px}.u-ml-16{margin-left:16px}.u-mx-16{margin-left:16px;margin-right:16px}.u-my-16{margin-top:16px;margin-bottom:16px}

/* 20 */
.u-p-20{padding:20px}.u-pt-20{padding-top:20px}.u-pr-20{padding-right:20px}.u-pb-20{padding-bottom:20px}.u-pl-20{padding-left:20px}.u-px-20{padding-left:20px;padding-right:20px}.u-py-20{padding-top:20px;padding-bottom:20px}
.u-m-20{margin:20px}.u-mt-20{margin-top:20px}.u-mr-20{margin-right:20px}.u-mb-20{margin-bottom:20px}.u-ml-20{margin-left:20px}.u-mx-20{margin-left:20px;margin-right:20px}.u-my-20{margin-top:20px;margin-bottom:20px}

/* 24 */
.u-p-24{padding:24px}.u-pt-24{padding-top:24px}.u-pr-24{padding-right:24px}.u-pb-24{padding-bottom:24px}.u-pl-24{padding-left:24px}.u-px-24{padding-left:24px;padding-right:24px}.u-py-24{padding-top:24px;padding-bottom:24px}
.u-m-24{margin:24px}.u-mt-24{margin-top:24px}.u-mr-24{margin-right:24px}.u-mb-24{margin-bottom:24px}.u-ml-24{margin-left:24px}.u-mx-24{margin-left:24px;margin-right:24px}.u-my-24{margin-top:24px;margin-bottom:24px}

/* 32 */
.u-p-32{padding:32px}.u-pt-32{padding-top:32px}.u-pr-32{padding-right:32px}.u-pb-32{padding-bottom:32px}.u-pl-32{padding-left:32px}.u-px-32{padding-left:32px;padding-right:32px}.u-py-32{padding-top:32px;padding-bottom:32px}
.u-m-32{margin:32px}.u-mt-32{margin-top:32px}.u-mr-32{margin-right:32px}.u-mb-32{margin-bottom:32px}.u-ml-32{margin-left:32px}.u-mx-32{margin-left:32px;margin-right:32px}.u-my-32{margin-top:32px;margin-bottom:32px}

/* 40 */
.u-p-40{padding:40px}.u-pt-40{padding-top:40px}.u-pr-40{padding-right:40px}.u-pb-40{padding-bottom:40px}.u-pl-40{padding-left:40px}.u-px-40{padding-left:40px;padding-right:40px}.u-py-40{padding-top:40px;padding-bottom:40px}
.u-m-40{margin:40px}.u-mt-40{margin-top:40px}.u-mr-40{margin-right:40px}.u-mb-40{margin-bottom:40px}.u-ml-40{margin-left:40px}.u-mx-40{margin-left:40px;margin-right:40px}.u-my-40{margin-top:40px;margin-bottom:40px}

/* 48 */
.u-p-48{padding:48px}.u-pt-48{padding-top:48px}.u-pr-48{padding-right:48px}.u-pb-48{padding-bottom:48px}.u-pl-48{padding-left:48px}.u-px-48{padding-left:48px;padding-right:48px}.u-py-48{padding-top:48px;padding-bottom:48px}
.u-m-48{margin:48px}.u-mt-48{margin-top:48px}.u-mr-48{margin-right:48px}.u-mb-48{margin-bottom:48px}.u-ml-48{margin-left:48px}.u-mx-48{margin-left:48px;margin-right:48px}.u-my-48{margin-top:48px;margin-bottom:48px}

/* 64 */
.u-p-64{padding:64px}.u-pt-64{padding-top:64px}.u-pr-64{padding-right:64px}.u-pb-64{padding-bottom:64px}.u-pl-64{padding-left:64px}.u-px-64{padding-left:64px;padding-right:64px}.u-py-64{padding-top:64px;padding-bottom:64px}
.u-m-64{margin:64px}.u-mt-64{margin-top:64px}.u-mr-64{margin-right:64px}.u-mb-64{margin-bottom:64px}.u-ml-64{margin-left:64px}.u-mx-64{margin-left:64px;margin-right:64px}.u-my-64{margin-top:64px;margin-bottom:64px}

/* =====================================================================
SP Utilities: Spacing (padding/margin)
Scope: max-width:799px only
Prefix: sp-u-
Scale: 0,4,8,12,16,20,24,32,40,48,64 px
===================================================================== */
@media screen and (max-width:799px){
  /* helper */
  .sp-u-mx-auto { margin-left: auto; margin-right: auto; }
  .sp-u-m-auto  { margin: auto; }

  /* 0 */
  .sp-u-p-0{padding:0}.sp-u-pt-0{padding-top:0}.sp-u-pr-0{padding-right:0}.sp-u-pb-0{padding-bottom:0}.sp-u-pl-0{padding-left:0}.sp-u-px-0{padding-left:0;padding-right:0}.sp-u-py-0{padding-top:0;padding-bottom:0}
  .sp-u-m-0{margin:0}.sp-u-mt-0{margin-top:0}.sp-u-mr-0{margin-right:0}.sp-u-mb-0{margin-bottom:0}.sp-u-ml-0{margin-left:0}.sp-u-mx-0{margin-left:0;margin-right:0}.sp-u-my-0{margin-top:0;margin-bottom:0}

  /* 4 */
  .sp-u-p-4{padding:4px}.sp-u-pt-4{padding-top:4px}.sp-u-pr-4{padding-right:4px}.sp-u-pb-4{padding-bottom:4px}.sp-u-pl-4{padding-left:4px}.sp-u-px-4{padding-left:4px;padding-right:4px}.sp-u-py-4{padding-top:4px;padding-bottom:4px}
  .sp-u-m-4{margin:4px}.sp-u-mt-4{margin-top:4px}.sp-u-mr-4{margin-right:4px}.sp-u-mb-4{margin-bottom:4px}.sp-u-ml-4{margin-left:4px}.sp-u-mx-4{margin-left:4px;margin-right:4px}.sp-u-my-4{margin-top:4px;margin-bottom:4px}

  /* 8 */
  .sp-u-p-8{padding:8px}.sp-u-pt-8{padding-top:8px}.sp-u-pr-8{padding-right:8px}.sp-u-pb-8{padding-bottom:8px}.sp-u-pl-8{padding-left:8px}.sp-u-px-8{padding-left:8px;padding-right:8px}.sp-u-py-8{padding-top:8px;padding-bottom:8px}
  .sp-u-m-8{margin:8px}.sp-u-mt-8{margin-top:8px}.sp-u-mr-8{margin-right:8px}.sp-u-mb-8{margin-bottom:8px}.sp-u-ml-8{margin-left:8px}.sp-u-mx-8{margin-left:8px;margin-right:8px}.sp-u-my-8{margin-top:8px;margin-bottom:8px}

  /* 12 */
  .sp-u-p-12{padding:12px}.sp-u-pt-12{padding-top:12px}.sp-u-pr-12{padding-right:12px}.sp-u-pb-12{padding-bottom:12px}.sp-u-pl-12{padding-left:12px}.sp-u-px-12{padding-left:12px;padding-right:12px}.sp-u-py-12{padding-top:12px;padding-bottom:12px}
  .sp-u-m-12{margin:12px}.sp-u-mt-12{margin-top:12px}.sp-u-mr-12{margin-right:12px}.sp-u-mb-12{margin-bottom:12px}.sp-u-ml-12{margin-left:12px}.sp-u-mx-12{margin-left:12px;margin-right:12px}.sp-u-my-12{margin-top:12px;margin-bottom:12px}

  /* 16 */
  .sp-u-p-16{padding:16px}.sp-u-pt-16{padding-top:16px}.sp-u-pr-16{padding-right:16px}.sp-u-pb-16{padding-bottom:16px}.sp-u-pl-16{padding-left:16px}.sp-u-px-16{padding-left:16px;padding-right:16px}.sp-u-py-16{padding-top:16px;padding-bottom:16px}
  .sp-u-m-16{margin:16px}.sp-u-mt-16{margin-top:16px}.sp-u-mr-16{margin-right:16px}.sp-u-mb-16{margin-bottom:16px}.sp-u-ml-16{margin-left:16px}.sp-u-mx-16{margin-left:16px;margin-right:16px}.sp-u-my-16{margin-top:16px;margin-bottom:16px}

  /* 20 */
  .sp-u-p-20{padding:20px}.sp-u-pt-20{padding-top:20px}.sp-u-pr-20{padding-right:20px}.sp-u-pb-20{padding-bottom:20px}.sp-u-pl-20{padding-left:20px}.sp-u-px-20{padding-left:20px;padding-right:20px}.sp-u-py-20{padding-top:20px;padding-bottom:20px}
  .sp-u-m-20{margin:20px}.sp-u-mt-20{margin-top:20px}.sp-u-mr-20{margin-right:20px}.sp-u-mb-20{margin-bottom:20px}.sp-u-ml-20{margin-left:20px}.sp-u-mx-20{margin-left:20px;margin-right:20px}.sp-u-my-20{margin-top:20px;margin-bottom:20px}

  /* 24 */
  .sp-u-p-24{padding:24px}.sp-u-pt-24{padding-top:24px}.sp-u-pr-24{padding-right:24px}.sp-u-pb-24{padding-bottom:24px}.sp-u-pl-24{padding-left:24px}.sp-u-px-24{padding-left:24px;padding-right:24px}.sp-u-py-24{padding-top:24px;padding-bottom:24px}
  .sp-u-m-24{margin:24px}.sp-u-mt-24{margin-top:24px}.sp-u-mr-24{margin-right:24px}.sp-u-mb-24{margin-bottom:24px}.sp-u-ml-24{margin-left:24px}.sp-u-mx-24{margin-left:24px;margin-right:24px}.sp-u-my-24{margin-top:24px;margin-bottom:24px}

  /* 32 */
  .sp-u-p-32{padding:32px}.sp-u-pt-32{padding-top:32px}.sp-u-pr-32{padding-right:32px}.sp-u-pb-32{padding-bottom:32px}.sp-u-pl-32{padding-left:32px}.sp-u-px-32{padding-left:32px;padding-right:32px}.sp-u-py-32{padding-top:32px;padding-bottom:32px}
  .sp-u-m-32{margin:32px}.sp-u-mt-32{margin-top:32px}.sp-u-mr-32{margin-right:32px}.sp-u-mb-32{margin-bottom:32px}.sp-u-ml-32{margin-left:32px}.sp-u-mx-32{margin-left:32px;margin-right:32px}.sp-u-my-32{margin-top:32px;margin-bottom:32px}

  /* 40 */
  .sp-u-p-40{padding:40px}.sp-u-pt-40{padding-top:40px}.sp-u-pr-40{padding-right:40px}.sp-u-pb-40{padding-bottom:40px}.sp-u-pl-40{padding-left:40px}.sp-u-px-40{padding-left:40px;padding-right:40px}.sp-u-py-40{padding-top:40px;padding-bottom:40px}
  .sp-u-m-40{margin:40px}.sp-u-mt-40{margin-top:40px}.sp-u-mr-40{margin-right:40px}.sp-u-mb-40{margin-bottom:40px}.sp-u-ml-40{margin-left:40px}.sp-u-mx-40{margin-left:40px;margin-right:40px}.sp-u-my-40{margin-top:40px;margin-bottom:40px}

  /* 48 */
  .sp-u-p-48{padding:48px}.sp-u-pt-48{padding-top:48px}.sp-u-pr-48{padding-right:48px}.sp-u-pb-48{padding-bottom:48px}.sp-u-pl-48{padding-left:48px}.sp-u-px-48{padding-left:48px;padding-right:48px}.sp-u-py-48{padding-top:48px;padding-bottom:48px}
  .sp-u-m-48{margin:48px}.sp-u-mt-48{margin-top:48px}.sp-u-mr-48{margin-right:48px}.sp-u-mb-48{margin-bottom:48px}.sp-u-ml-48{margin-left:48px}.sp-u-mx-48{margin-left:48px;margin-right:48px}.sp-u-my-48{margin-top:48px;margin-bottom:48px}

  /* 64 */
  .sp-u-p-64{padding:64px}.sp-u-pt-64{padding-top:64px}.sp-u-pr-64{padding-right:64px}.sp-u-pb-64{padding-bottom:64px}.sp-u-pl-64{padding-left:64px}.sp-u-px-64{padding-left:64px;padding-right:64px}.sp-u-py-64{padding-top:64px;padding-bottom:64px}
  .sp-u-m-64{margin:64px}.sp-u-mt-64{margin-top:64px}.sp-u-mr-64{margin-right:64px}.sp-u-mb-64{margin-bottom:64px}.sp-u-ml-64{margin-left:64px}.sp-u-mx-64{margin-left:64px;margin-right:64px}.sp-u-my-64{margin-top:64px;margin-bottom:64px}
}