@charset "UTF-8";

/*-------------------------------------------------------------------------
RESET CSS
-------------------------------------------------------------------------*/
html {
    background-color: none;
    border: 0 none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
/*    font-size: 62.5%;*/
    width: 100%;
}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, textarea, input, button {
    background-color: none;
    box-sizing: border-box;
    border: 0 none;
    margin: 0;
    padding: 0;
    outline: 0 none;
    font-feature-settings: "palt";
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size  : 16px;
    font-weight: 400;
    color      :  #293A4F;
    vertical-align: baseline;
}
span,
a{
    text-decoration: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
nav ul {
    list-style: none outside none;
}
li {
    list-style-type: none;
}
a {
    color: #293A4F;
}
button {
    background: none;
    border: none;
    cursor: pointer;
}
dialog {
    border: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
strong {
    font-weight: normal;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
html:has(dialog[open]){
    overflow: hidden;
}

/*-------------------------------------------------------------------------
FONT
-------------------------------------------------------------------------*/

:root {
    --open-sans: "Open Sans", sans-serif;  
    --main-color: #3C83D4;
    --point-color: #FAFF6A;
}

/* NOTOSANZ
--------------------------- */
@font-face {
    font-family: "Noto Sans CJK JP";
    font-weight: 100;
    src: local("Noto Sans CJK JP Thin"), local("NotoSansCJKjp-Thin"), local("NotoSansJP-Thin"), url("/recruit/newgrad/fonts/Notojp-Thin.otf") format("opentype"), url("/recruit/newgrad/fonts/Notojp-Thin.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans CJK JP";
    font-weight: 200;
    src: local("Noto Sans CJK JP Light"), local("NotoSansCJKjp-Light"), local("NotoSansJP-Light"), url("/recruit/newgrad/fonts/Notojp-Light.otf") format("opentype"), url("/recruit/newgrad/fonts/Notojp-Light.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans CJK JP";
    font-weight: 300;
    src: local("Noto Sans CJK JP DemiLight"), local("NotoSansCJKjp-DemiLight"), local("NotoSansJP-DemiLight"), url("/recruit/newgrad/fonts/Notojp-DemiLight.otf") format("opentype"), url("/recruit/newgrad/fonts/Notojp-DemiLight.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans CJK JP";
    font-weight: 400;
    src: local("Noto Sans CJK JP Regular"), local("NotoSansCJKjp-Regular"), local("NotoSansJP-Regular"), url("/recruit/newgrad/fonts/Notojp-Regular.otf") format("opentype"), url("/recruit/newgrad/fonts/Notojp-Regular.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans CJK JP";
    font-weight: 500;
    src: local("Noto Sans CJK JP Medium"), local("NotoSansCJKjp-Medium"), local("NotoSansJP-Medium"), url("/recruit/newgrad/fonts/Notojp-Medium.otf") format("opentype"), url("/recruit/newgrad/fonts/Notojp-Medium.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans CJK JP";
    font-weight: 700;
    src: local("Noto Sans CJK JP Bold"), local("NotoSansCJKjp-Bold"), local("NotoSansJP-Bold"), url("/recruit/newgrad/fonts/Notojp-Bold.otf") format("opentype"), url("/recruit/newgrad/fonts/Notojp-Bold.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans CJK JP";
    font-weight: 900;
    src: local("Noto Sans CJK JP Black"), local("NotoSansCJKjp-Black"), local("NotoSansJP-Black"), url("/recruit/newgrad/fonts/Notojp-Black.otf") format("opentype"), url("/recruit/newgrad/fonts/Notojp-Black.woff") format("woff");
    font-display: swap;
}
/* fontopo
--------------------------- */
@font-face {
    font-family: 'fontopofontoporegular';
    src: url("/recruit/newgrad/fonts/fontopofontopo-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

/*-------------------------------------------------------------------------
l- UI
-------------------------------------------------------------------------*/

.l-contents {
    overflow: hidden;
}

/*.ui-fontpo {
    font-family: 'fontopofontoporegular';
    letter-spacing: 2px;
}
@media screen and (max-width: 750px) {
    .l-contents:not(.top){
        padding: 8vw 0 0;
        max-width: 100vw;
        box-sizing: border-box;
        overflow: hidden;
    }    
}*/

/* バナーにホバーしあっとき
--------------------------- */
.ui-banner-hover {
    position: relative;
    overflow: hidden;
    display: block;
}
.ui-banner-hover:before {
    content: "";
    width: 0;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top     : 0;
    left    : 0;
    mix-blend-mode: hue;
}
.ui-banner-hover:hover:before {
    animation: bannerHover .5s ease forwards;
}
@keyframes bannerHover {
    0% {
        width: 0;
        left: 0;
    }
    30% {
        width: 100%;
        left: 0;
    }
    70% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 100%;
        left: 100%;
    }
}

/* ホバーでスライド
--------------------------- */
.ui-slide-hover-btn {
    position: relative;
    z-index : 0;
    overflow: hidden;
}
.ui-slide-hover-btn:before {
    content: "";
    width: 0;
    height: 100%;
    /*background-color: #fff;*//* 色はデザインによって変えて  */
    position: absolute;
    top     : 0;
    left    : 0;
    z-index : -1;
    transition: .3s ease;
}
.ui-slide-hover-btn:hover:before {
    width: 100%;
}
.ui-slide-hover-btn:not(:hover):before {
    left: auto;
    right: 0;
}

/* ENTRY BUTTON
--------------------------- */
.ui-entryBtn a {
    padding: 0 0 0 19px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #293A4F;
    font-size: 24px;
    color: #293A4F;
    text-decoration: none;
    background-color: rgb(221 236 255 / 40%);
    mix-blend-mode: multiply;
}
.ui-entryBtn a:hover {
    background-color: rgba(255, 240, 0, 0.4);
}
.ui-entryBtn a:before {
    content: "";
    position: absolute;
    top: 18px;
    left: 27px;
    width: 20px;
    height: 19px;
    background: url("/images/newgrad/icn_entry_arw.png") no-repeat 0 0/100% auto;
    animation: arw 4.5s ease 5s infinite;
}

/* ARROW ANIMATION */
@keyframes arw {
    0% {
        transform: translateX(0);
    }
    1% {
        transform: translateX(8px);
    }
    4% {
        transform: translateX(0);
    }
    7% {
        transform: translateX(8px);
    }
    10% {
        transform: translateX(0px);
    }
}

/* モバイルのみ改行あり
--------------------------- */
.pc-br {
    display: none;        
}
@media screen and (max-width: 480px){
    .responsive-br {
        display: none;
    }
    .pc-br {
        display: block;
    }
}

/* 見出し
--------------------------- */
.ui-headline-wrapper {
    background: rgb(0 0 0 / 0%) linear-gradient(170deg, rgb(250 255 106 / 60%) 0%, rgb(2 204 197 / 60%) 62%, rgb(166 199 235 / 60%) 100%) 0% 0% no-repeat padding-box;
    height: 620px;
    background-position: center;
    background-size: cover;
}
.ui-page-ttl {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    margin: 40px 0 0 0;
    font-family: 'Kiwi Maru',"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.ui-page-ttl span {
    display: block;
    font-size: 14px;
    color: #DFE70A;
    margin: 12px 0 0 0;
}
.ui-headline {
    text-align: center;
}
.ui-headline span {
    display: block;
    line-height: 1;
    font-size: 44px;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 23px 0 0;
}

@media screen and (max-width: 750px) {
    .ui-headline-wrapper{
        height: 430px;
    }
    .ui-headline span {
        display: block;
        line-height: 1;
        margin: 2% 0 0;
    }
    .ui-headline img{
        max-width: 100%;
    }
}

/* #
--------------------------- */
.ui-blue-back {
    background-color: #E8EFF6;
    padding: 116px 20px;
}
.ui-panel {
    width: 100%;
    max-width: 1013px;
    background-color: #fff;
    border-radius: 35px;
    margin: 0 auto 60px;
}
.ui-panel:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 768px){
    .ui-blue-back {
        padding-block: 70px;
    }
    .ui-panel {
        margin-bottom: 8vw;
    }
}

/*-------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------*/

/* LAYOUT
--------------------------- */
.l-header {
    width: 100%;
    background-color: rgba(255 255 255 / 90%);
    backdrop-filter: blur(5px);
    transition: .3s ease;
    position: sticky;
    top     : 0;
    left    : 0;
    z-index : 101;
}
/*.l-header.is-fixed {
    position: fixed;
}*/
    .header__inner {
        max-width: 1140px;
        min-width: 1030px;
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        margin: auto;
        padding: 25px 0;
    }
        .header__logo {
            display    : flex;
            gap        : 10px;
            align-items: baseline;
        }

/* NAV
--------------------------- */
.nav {
    display    : flex;
    gap        : 30px;
    align-items: center;
    position: relative;
}
    .nav__list {
        display: flex;
        gap    : 24px;
        position: relative;
        z-index: 1;
    }
        .nav__link {
            display: block;
            padding-block: 10px;
            font-size: 14px;
        }
.nav-entry {
    display: flex;
    gap    : 10px;
}
    .nav-entry > * {
        flex: 1;
        width: 185px;
    }
    .nav-entry__btn {
        width: 100%;
        max-width: 185px;
        height: 73px;
        background-color: var(--point-color);
        display       : flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }
    .nav-entry__btn:before {
        content: "";
        width: 0;
        height: 100%;
        background-color: var(--main-color);
        position: absolute;
        top     : 0;
        left    : 0;
        transition: .3s ease;
    }
    .nav-entry__btn:hover:before {
        width: 100%;
    }
    .nav-entry__btn:not(:hover):before {
        left: auto;
        right: 0;
    }
        .nav-entry__btn span {
            color: #043E7A;
            position: relative;
            transition: .3s ease;
        }
        .nav-entry__btn span:nth-child(1){
            speak: none;
            font-family: var(--open-sans);
            font-size  : 18px;
            font-weight: 700;
        }
        .nav-entry__btn span:nth-child(2){
            font-size  : 11px;
            font-weight: 500;
        }
        .nav-entry__btn:hover span {
            color: var(--point-color);
        }
.foot-nav-entry {
    height: 0;
    background-color: rgba(255, 255, 255, .9);
    transform: translateY(calc(100% + 20px));
    transition: .1s ease;
    padding: 10px;
    position: sticky;
    bottom  : 0;
    z-index : 100;
    opacity: 0;
    visibility: hidden;
}

/* #
--------------------------- */
.pulldown {
    position: relative;
}
    .pulldown__list {
        min-width: 165px;
        background-color: #fff;
        box-shadow: 0 0 5px rgba(0 0 0 / 10%);
        position: absolute;
        top     : calc(100% - 20px);
        opacity: 0;
        visibility: hidden;
        transition: .3s ease;
        margin: auto;
        left: -40px;
        right: 0;
    }
    .pulldown:hover .pulldown__list {
        opacity: 1;
        visibility: visible;
        transform: translateY(20px);
    }
        .pulldown__list > * + *  {
            border-top: 1px solid #B9B9B9;
        }
        .pulldown__link {
            display        : flex;
            gap            : 13px;
            align-items    : center;
            justify-content: space-between;
            position: relative;
            z-index: 0;
            padding: 15px;
            font-size: 13px;
            white-space: nowrap;
        }
        .pulldown__link:before {
            content: "";
            width: 0;
            height: 100%;
            background-color: #FAFF6A;
            position: absolute;
            top     : 0;
            left    : 0;
            z-index : -1;
            transition: .3s ease;
        }
        .pulldown__link:hover:before {
            width: 100%;
        }
        .pulldown__link:not(:hover):before {
            left : auto;
            right: 0;
        }
        .pulldown__link:after {
            content: "＞";
            font-size: 10px;
        }

/* メニュー切り替えボタン
--------------------------- */
.menu-btn {
    width: 40px;
    height: 40px;
    display: none;
    position: absolute;
    top     : 26px;
    right   : 30px;
    z-index : 101;
    bottom  : 0;
}
.menu-btn:before,
.menu-btn:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    position: absolute;
    left    : 0;
    right   : 0;
    margin  : auto;
    transition: .3s ease;
}
.menu-btn:before { top: 12px;}
.menu-btn:after  { bottom: 12px;}

.menu-btn.is-active:before {
    transform: rotate(45deg);
    top: 19px;
}
.menu-btn.is-active:after {
    transform: rotate(-45deg);
    bottom: 19px;
}
@media screen and (max-width: 1100px){
    .header__inner {
        min-width: auto;
        padding-left: 20px;
    }
    .nav {
        display: none;
    }
    .menu-btn {
        display: block;
    }
    .nav-entry__btn {
        max-width: 100%;
    }
    .foot-nav-entry {
        height: auto;
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
}
@media screen and (max-width: 450px){
    .header__inner {
        padding: 15px;
        height: 67px;
    }
    .header__logo {
        width: clamp(200px, 70vw, 320px);
    }
    .menu-btn {
        width: 30px;
        height: 30px;
        top  : 19px;
        right: 10px;
    }
    .menu-btn:before { top   : 8px;}
    .menu-btn:after  { bottom: 8px;}

    .menu-btn.is-active:before { top   : 16px;}
    .menu-btn.is-active:after  { bottom: 13px;}

    .foot-nav-entry {
        width: 100%;
    }
}

/*-------------------------------------------------------------------------
MENU DIALOG
-------------------------------------------------------------------------*/

.menu-dialog {
    width: 100%;
    height: 100dvh;
    background-color: #E6ECF1;
    display: block!important;
    padding: 0;
    top: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: .2s ease;
}
.menu-dialog[open]{
    visibility: visible;
    opacity: 1;
}
    .menu-dialog__inner {
        height: inherit;
        overflow-y: auto;
        padding: 0 0 50px;
    }
    .menu-dialog__logo {
        display: block;
        margin: 25px 0 0 15px;
    }
.dialog-nav {
    width: 100%;
    max-width: 400px;
    margin: 100px auto 0;
    padding-inline: 20px;
}
    .dialog-nav__list > * + * {
        margin: 50px 0 0;
    }
    .dialog-nav__link {
        width: 100%;
        display        : flex;
        align-items    : center;
        justify-content: space-between;
        padding: 0;
    }
        .dialog-nav__link i {
            width: 15px;
            height: 15px;
            position: relative;
        }
        .dialog-nav__link i:before,
        .dialog-nav__link i:after {
            content: "";
            width: 100%;
            height: 2px;
            background-color: var(--main-color);
            position: absolute;
            inset   : 0;
            margin  : auto;
        }
        .dialog-nav__link i:after {
            transform: rotate(90deg);
            transition: .1s ease;
        }
        .dialog-nav__link.is-show i:after {
            transform: rotate(0);
        }
    .dialog-pulldown__list {
        display: none;
        margin: 0 0 0 2em;
    }
        .dialog-pulldown__list > * {
            margin: 30px 0 0;
        }
        .dialog-pulldown__link {
            color: #aaa;
            transition: .1s ease;
        }
        .dialog-pulldown__link:hover {
            color: var(--main-color);
        }
    .dialog-nav .nav-entry {
        margin: 50px 0 0;
    }


/*-------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------*/

/* LAYOUT
--------------------------- */
.l-footer {
    background-color: var(--main-color);
    padding-block: 92px 50px;
}

/* #
--------------------------- */
.external-site {
    display        : flex;
    gap            : 25px;
    justify-content: center;
    margin: 0 0 95px;
}
    .external-site__text {
        margin: 10px 0 0;
        font-size: 13px;
        color    : #fff;
    }

/* #
--------------------------- */
.footer__inner {
    width: 838px;
    margin: auto;
}
    .footer__logo {
        margin: 0 0 38px;
    }
    .footer__info {
        display        : flex;
        flex-direction : row-reverse;
        justify-content: space-between;
    }
        .footer__copy {
            font-size: 11px;
            color    : #fff;
        }
        .footer-menu {
            display: flex;
            gap    : 20px;
        }
            .footer-menu__items {
                display: flex;
                gap    : 10px;
                align-items: center;
            }
                .footer-menu__items i {
                    color: #fff;
                }
                .footer-menu__link {
                    font-size  : 12px;
                    font-weight: 500;
                    color      : #fff;
                }
                .footer-menu__link:hover {
                    text-decoration: underline;
                }

@media screen and (max-width: 838px){ 
    .l-footer {
        padding: 50px 20px;
    }
    .footer__inner {
        width: 100%;
        text-align: center;
    }
    .external-site {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(auto-fit, minmax(0, 255px));
    }
}
@media screen and (max-width: 610px){
    .footer__info {
        display: block;
    }
    .footer-menu {
        justify-content: center;
        margin: 0 0 30px;
    }
}

/*-------------------------------------------------------------------------
フラットなMV
-------------------------------------------------------------------------*/

.flat-mv {
    background-color: var(--main-color);
    padding-block: 98px 117px;
    text-align: center;
}
    .flat-mv__headline {
        font-size  : 40px;
        font-weight: 700;
        color      : #fff;
        letter-spacing: .1em;
    }
    .flat-mv__description {
        margin: 65px 0 0;
        position: relative;
        font-size: clamp(13px, 3vw, 16px);
        font-weight: 500;
        color      : #fff;
        line-height: 2.1;
        word-break: auto-phrase;
    }
    .flat-mv__description:before {
        content: "";
        width: 30px;
        height: 1px;
        background-color: #fff;
        position: absolute;
        top     : -30px;
        left    : 0;
        right   : 0;
        margin  : auto;
    }
@media screen and (max-width: 768px){
    .flat-mv {
        padding: 50px 30px;
    }
    .flat-mv__headline {
        font-size: clamp(25px, 7vw, 40px);
    }
}
@media screen and (max-width: 480px){
    .flat-mv {
        padding-inline: 20px;
    }
}

/*-------------------------------------------------------------------------
画像と見出し
-------------------------------------------------------------------------*/

.visual-mv {
    display: grid;
}
    .visual-mv > * {
        grid-area: 1 / 1;
    }
        .visual-mv__center {
            order: 1;
            width: 100%;
            max-width: 1200px;
            align-items: center;
            margin: auto;
            padding-inline: 20px;
        }
            .visual-mv__headline,
            .visual-mv__en {
                font-weight: 700;
                color      : #fff;
                line-height: 1.1;
            }
            .visual-mv__headline {
                font-size: 28px;
                letter-spacing: .1em;
            }
            .visual-mv__en {
                font-family: var(--open-sans);
                font-size  : 60px;
                font-weight: 400;
            }
        .visual-mv img {
            width: 100%;
            height: 450px;
            object-fit     : cover;
            object-position: center;
        }

@media screen and (max-width: 480px){
    .visual-mv img {
        height: 300px;
    }
    .visual-mv__headline {
        font-size: clamp(18px, 6vw, 28px);
    }
    .visual-mv__en {
        font-size: clamp(40px, 13vw, 60px);
    }
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.future {
    padding-block: 110px 100px;
    text-align: center;
}
    .future__text {
        margin-block: 17px 54px;
        font-size: 17px;
        line-height: 2.11;
    }
    .future__btn {
        width: 100%;
        max-width: 487px;
        height: 118px;
        background-color: var(--main-color);
        display        : flex;
        align-items    : center;
        justify-content: center;
        margin: auto;
        font-size  : 30px;
        font-weight: bold;
        color      : #fff;
        letter-spacing: .15em;
        text-transform: uppercase;
    }
    .future__btn:before {
        background-color: var(--point-color);
    }
    .future__btn:hover {
        color: var(--main-color);
    }

@media screen and (max-width: 768px){
    .future {
        padding: 50px 20px;
    }
}
@media screen and (max-width: 480px){
    .future__text {
        text-align: center!important;
    }
}

/*------------------------------------------------------------------------------
アイコン▼
------------------------------------------------------------------------------*/
@font-face {
  font-family: 'cloud-icon';
  src: url("/fonts/cloud-icon.eot?z7cugv");
  src: url("/fonts/cloud-icon.eot?z7cugv#iefix") format("embedded-opentype"), url("/fonts/cloud-icon.ttf?z7cugv") format("truetype"), url("/fonts/cloud-icon.woff?z7cugv") format("woff"), url("/fonts/cloud-icon.svg?z7cugv#cloud-icon") format("svg");
  font-weight: normal;
  font-style: normal; }
i, i[class^="icn-"], i[class*=" icn-"],i[class^="fa-"], i[class*=" fa-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'cloud-icon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* Cookieについての注意文表示 */
.cookie {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: rgba(25,25,25,.8);
    padding: 15px 0;
    width: 100%;
    z-index: 10001;
}
.cookie__inner {
    display: flex;
    justify-content: space-between;
    width: 920px;
    margin: 0 auto;
}
.cookie__text {
    color: #FFFFFF;
    line-height: 1.5;
}
.cookie__link {
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: underline;
}
.cookie__button {
    height: 40px;
    width: 100px;
    right: 320px;
    font-size: 14px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
}

@media screen and (max-width: 1024px) {
    .cookie {
        padding: 15px;
    }
    .cookie__inner {
        flex-direction: column;
        width: 100%;
    }
    .cookie__text {
        text-align: center;
    }
    .cookie__button {
        width: 100%;
        margin: 7px auto 0;
        font-size: 14px;
        align-items: center;
        box-sizing: border-box;
        height: 32px;
        min-width: 80px;
    }
}

@media screen and (max-width: 480px) {
    .cookie {
        padding: 9px;
    }
    .cookie__text {
        font-size: 12px;
        text-align: left;
        font-weight: normal;
    }
    .cookie__button {
        height: 28px;
        margin: 5px auto 0;
    }
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.base-text12 { font-size: 12px}
.base-text14 { font-size: 14px}
.base-text   { font-size: 16px}
.base-text18 { font-size: 18px}
.base-text20 { font-size: 20px}
.base-text22 { font-size: 22px}
.base-text24 { font-size: 24px}
.base-text28 { font-size: 28px}
.base-text30 { font-size: 30px}
.base-text36 { font-size: 36px}
.base-text40 { font-size: 40px}
.base-text58 { font-size: 58px}

@media screen and (max-width: 768px){
    .base-text12 { font-size: clamp(12px, 1vw, 12px);}
    .base-text14 { font-size: clamp(12px, 2vw, 14px);}
    .base-text   { font-size: clamp(13px, 2vw, 16px);}
    .base-text18 { font-size: clamp(14px, 3vw, 18px);}
    .base-text20 { font-size: clamp(15px, 4vw, 20px);}
    .base-text22 { font-size: clamp(16px, 4vw, 22px);}
    .base-text24 { font-size: clamp(18px, 5vw, 24px);}
    .base-text28 { font-size: clamp(20px, 5vw, 28px);}
    .base-text30 { font-size: clamp(20px, 5vw, 30px);}
    .base-text36 { font-size: clamp(22px, 5vw, 36px);}
    .base-text40 { font-size: clamp(25px, 6vw, 40px);}
    .base-text58 { font-size: clamp(30px, 8vw, 58px);}
}
@media screen and (max-width: 480px){
    .base-text {
        text-align: left;
    } 
}

.ui-caution-text {
    color: var(--main-color)
}