/* BASE */

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, Meiryo, sans-serif;
    color: #39393b;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 2em;
    background: #fff;
    font-weight:400;
}


p, hr{
    margin: 0 0 1.2em 0;
}

section {
    padding: 3em 0 2em;
}

.section-s {
    padding: 2em 0 0;
}

.section-header {
    padding: 1em 0 2em;
}

.section-header picture img{
    vertical-align: bottom;
}
.section-top{
    padding: .5em .5em 0;
}

.section-top2{
    padding:0;
    position:relative;
    top:0;
}

.container {
    margin: 0 auto;
    padding: 0 1em;
    max-width: 1016px;
}

.container-s {
    margin: 0 auto;
    padding: 0 1em;
    max-width: 800px;
}

.container-xs {
    margin: 0 auto;
    padding: 0 1em;
    max-width: 672px;
}



/* HEADING */


h1, h2, .h2, h3, .h3 {
    text-align:center;
    line-height: 1.4em;
    letter-spacing: .08em;
    font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}


h2, .h2 {
    font-size: clamp(1.125rem, 0.791rem + 1.42vw, 2.5rem);
    margin-bottom: 2em;
    text-align:center;

}

h3, .h3 {
    font-size: clamp(1.125rem, 0.943rem + 0.78vw, 1.875rem);
    margin-bottom: 2em;
}

/* BACKGROUND */

.bg-header {
    background: url(../images/header-bg-s.webp) bottom center / cover no-repeat;
}


.bg-cta {
    background: url(../images/cta-bg-s.webp) center bottom / cover no-repeat;
}

.bg-primary{
    background: linear-gradient(to bottom,  #2f97c5 0%,#3ab0d3 100%);
}

.bg-secondary{
    background:#e0f0f9;
}

.bg-mute {
    background:#f4f9fb;

}

.bg-white{
    background:#fff;
}

.bg-white-op90{
    background:rgba(255, 255, 255, 0.9);
}

@media screen and (min-width: 48em) {
    .bg-header {
        background: url(../images/header-bg-l.webp) bottom center / cover no-repeat;

    }

    .bg-cta {
        background: url(../images/cta-bg-l.webp) center center / cover no-repeat;

    }

    section{
        padding:7em 0 5em;
    }

    .section-s {
        padding:3em 0 0;
    }

    .section-top{
        padding: 0.5em 0 0;
    }

    .section-header{
        padding:3em 0;
    }

    .section-top2{
        padding:0;
        position:relative;
        top:-3em;
    }
}

/* TILE */

.tile-1 {
    padding: 2em 1em 1em 1em;
    margin-bottom: 2em;
}

@media screen and (min-width: 48em) {
    .tile-1 {
        padding:3em;
    }
}

/* FORM */

input[type="text"] {
    width: 100%;
    text-align: center;
    height: 4em;
    border: 2px solid #69696e;
    font-weight: bold;
    margin-bottom: 1em;
    background:#fff;
    color:#111;
    max-width:672px;
}

/* BUTTON */


/* リンク： */
button:hover, a:hover{
    opacity:0.8;
}

/* ani-pop */
.ani-pop{-webkit-animation:ani-pop .9s ease-in-out infinite both;animation:ani-pop .9s ease-in-out infinite both}

 @-webkit-keyframes ani-pop{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.95);transform:scale(.9)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes ani-pop{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.95);transform:scale(.95)}100%{-webkit-transform:scale(1);transform:scale(1)}}


/* FADE-IN */

.lazyload, .lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    -webkit-transition: opacity 1.3s;
    transition: opacity 1.3s ease-out;
}


/* UTILITY */



.responsive {
    max-width: 100%;
    height: auto;
}

.is-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.mb-l {
    margin-bottom: 5em !important;
}

.mb-m {
    margin-bottom: 3em !important;
}

.mb-s {
    margin-bottom: 1em !important;
}

.box-shadow-s {
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
}


.box-shadow {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
}

.box-shadow-l {
    box-shadow: 0 14px 25px rgba(0, 0, 0, .16);
}


.text-primary{
    color:#2f97c5;
}


.mk-yellow {
    background: linear-gradient(transparent 60%, #ffeebd 60%);
    font-weight: bold;
}

.text-b {
    font-weight: bold;
}

.text-red {
    color: #c71133;
    font-weight: bold;
}

.text-white {
    color: #fff;
}

.text-yellow {
    color: #eedf10;
}

.text-l {
    font-size: 120%
}

.text-s {
    font-size: 80%;
    line-height: 1.2rem;
}

.text-xs {
    font-size: 60%;
    line-height: 1rem;
}

.text-right {
    display: box;
    text-align: right;
}


/* FOOTER */

footer {
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 2em;
    padding: 1em;
}

footer a, footer a:visited {
    color:rgba(255, 255, 255, .7);
    text-decoration: none;
}

footer a:hover {
    color:rgba(255, 255, 255, .7);
    text-decoration: underline;
}