.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8000px;
    background-repeat: none;
    background-image: url(/img/top_0808.jpg);
    z-index: 9999999;
    pointer-events: none;
    opacity: 0.2;
}


:root {
    --text: #1A1311;
    --bg: #fff;
    --secondary: #EFEFEF;
    --secondary2: #EBEBEB;

    --font-size-md:  18px;
    --font-size-lg:  22px;

    /*
    --ultla-red: #dc2f1c;
    --ultla-green: #008b56;
    --ultla-blue: #0084b2;
    */
    --ultla-blue: #0084b2;
    --ultla-red: #D94589;
    --ultla-green: #A3CA0F;
    --ultla-nagoya-green: #A3CA0F;
    --ultla-yellow: #FFD900;

    /*
    --ultla-red-rgb: 220, 47, 28;
    --ultla-green-rgb: 0, 139, 86;
    --ultla-blue-rgb: 0, 132, 178;
    */
    --ultla-blue-rgb: 0, 132, 178;
    --ultla-red-rgb: 217, 69, 137;
    --ultla-green-rgb: 163, 202, 15;
    --ultla-nagoya-green-rgb: 163, 202, 15;

    /*
    --ultla-green-500:  #4f9837;
    --ultla-blue-500:  #82bcd7;
    */
    --ultla-red-500:  #ec8c2a;
    --ultla-blue-500:  #00A2DE;
    --ultla-green-500:  #a7c04b;
    --ultla-nagoya-green-500:  #a7c04b;

    --ultla-gradient: linear-gradient(-43deg, var(--ultla-yellow), var(--ultla-red), var(--ultla-blue), var(--ultla-green));

    --font-sans-serif: "Lexend", iroha-23kaede-stdn, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-family: var(--font-sans-serif);

    --black: #1A1311;
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --light: #f8f9fa;
    --dark: #212529;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}



@media (max-width: 768px) {
    :root {
        --font-size-md:  12px;
        --font-size-lg:  14px;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;

    font-style:  normal;
    font-weight: 400;
}

figure {
    margin: 0;
}

img {
    max-width: 100%;
}

a {
	text-decoration: none;
    cursor: pointer;
    color: var(--blue);
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--text);
    background-color: var(--bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    position: relative;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
}

.center{ text-align: center; }
.left{ text-align: left; }
.right{ text-align: right; }

#video-detach-button, #detach-button-host {
    display: none !important;
}

.container,
.container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    padding-right: 2.75rem;
    padding-left: 2.75rem;
    margin-right: auto;
    margin-left: auto;
    position:  relative;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1020px;
    }
}

/*main, section, article {
    position:  relative;
}*/

.ultla-look {
    padding: 0;
    min-height: 100vh;
}
.ultla-look .container {
    padding: 100px 10px;
}
.ultla-look:last-child .container{
    padding: 100px 10px 0;
}


.ultla-look.ultla-feature {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: relative;
}

.ultla-look.ultla-feature > .feature-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    height: 100vh;
}

.ultla-look.ultla-feature .feature-tagline {
    background-image: url(/img/assets/bg1.png);
    background-size: cover;
}

.ultla-look.ultla-feature .feature-view {
    /*background-image: url(/img/assets/view_dummy.jpg);
    background-image: url(/img/assets/view_dummy2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1440px;*/
    position: relative;
    padding: 0;
}

.ultla-look.ultla-feature .feature-view > video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

/*@media (min-width: 576px) {
    .ultla-look.ultla-feature .feature-view {
        background-size: 930px;
    }
}
@media (min-width: 768px) {
    .ultla-look.ultla-feature .feature-view {
        background-size: 930px;
    }
}
@media (min-width: 992px) {
    .ultla-look.ultla-feature .feature-view {
        background-size: 930px;
    }
}
@media (min-width: 1200px) {
    .ultla-look.ultla-feature .feature-view {
        background-size: 1440px;
    }
}*/


p.lead span {
    display: inline-block;
}

p.lead {
    font-size: var(--font-size-md);
    letter-spacing: 0.5px;
    line-height: 34px;
}

.feature-tagline-wrap {
    width: 310px;
    max-width: 95%;
}

.feature-tagline-wrap .feature-copy {
    font-size: 10px;
    margin: 71px 0 37px;
    background-image: url(/img/assets/tagline.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 205px;
    background-position: left center;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
}

.feature-copy + .lead {
    margin-top: 50px;
    font-feature-settings: normal;
    -webkit-font-feature-settings: normal;
    margin-left: 4px;
    letter-spacing: 1.8px;
    font-size: 20px;
}

@media (max-height: 520px) and (min-width: 768px) {
    .feature-tagline-wrap {
        transform: scale(0.6);
    }
}

@media (max-width: 768px) {
    .ultla-look.ultla-feature {
        grid-template-columns: 100%;
        /*
        --feature-sm-height: 50vh;
        --feature-sm-height: max(50vh, 340px);
        */
        --feature-sm-height: 100vh;
        --feature-ultlakun-sm-height: 50vh;
        grid-template-rows: var(--feature-sm-height) var(--feature-ultlakun-sm-height);
        min-height: auto;
    }

    .ultla-look.ultla-feature > .feature-child {
        height: 100%;
    }

    .ultla-look.ultla-feature .feature-view {
        background-size: 490px;
    }

    .ultla-look {
        min-height: auto;
    }

    .feature-tagline-wrap {
        /*
        width: 176px;
        */
        width: 75%;
    }

    .feature-tagline-wrap .feature-copy {
        /*
        margin-top: 80px;
        margin-bottom: 24px;
        height: 98px;
        */
        margin-top: 0px;
        margin-bottom: 10px;
        height: 185px;
    }

    .feature-copy + .lead {
        /*
        font-size: 12px;
        */
        margin-top: 25px;
        font-size: 17px;
        letter-spacing: -0.7px;
    }

    p.lead {
        font-size: 12px;
        line-height: 20px;
        margin: 0;
        letter-spacing:  0;
    }
}



header {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 100;
}

header a#ultla-logo {
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    display: inline-block;
    background: url(/img/assets/nagoya-ultla-logo-full.svg);
    background-size: contain;
    background-position: left top;
    background-repeat: no-repeat;
    height: 100px;
    width: 272px;
    height: 80px;
    width: 217px;
}

header nav .nav-bg {
    background: var(--ultla-gradient);
}

header nav .nav-bg, header nav .nav-btn {
    position: fixed;
    top: 31px;
    right: 31px;
    width: 68px;
    height: 68px;
    border-radius: 120px;
    transition:  0.3s;
}

header nav ul {
    list-style-type: none;
    margin: 0;
    width: 50%;
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 77px;
    opacity: 0;
    pointer-events: none;
    transform: translate(40%,0) skew(30deg, 0deg);
    transition-delay: 0.3s;
    transition: 0.3s;
    z-index: 120;
}

header nav ul li a {
    color:  var(--white);
    display: inline-block;
    font-size: 20px;
    letter-spacing: 1px;
    margin: 25px 0;
    line-height: 1;
    transition: 0.2s;
}

header nav ul li a:hover {
    transform: translate(10px,0);
}

header nav .nav-btn {
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    cursor: pointer;
    z-index: 13000;
    transition: 0.2s;

    padding: 24px 19px;
}

header nav:not(.nav-active):hover .nav-bg {
    transform: scale(0.8);
}

header nav:not(.nav-active):hover .nav-btn {
    transform: scale(0.92);
}

header nav.nav-active .nav-btn:hover {
    transform: scale(1.2);
}

header nav .nav-btn span {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    background: var(--white);
    border-radius: 80px;
    opacity: 1;
    transition:  0.5s;
    pointer-events: none;
}

header nav.nav-active .nav-bg {
    width: 50%;
    top: 0;
    right: 0;
    border-radius: 0;
    bottom: 0;
    height: 100vh;
    z-index: 100;
}

header nav.nav-active ul {
    opacity: 1;
    transform: translate(0);
    pointer-events: auto;
}

header nav.nav-active .nav-btn span:nth-child(2) {
    /*transform: translate(-30px, 0);*/
    opacity: 0;
}

header nav.nav-active .nav-btn span:nth-child(1) {
    transform: rotate(45deg);
    top: 2px;
}

header nav.nav-active .nav-btn span:nth-child(3) {
    transform: rotate(-45deg);
    top: -4px;
}

header nav.nav-active .nav-btn {
    justify-content: center;
}

/*header nav ul li a:after {
    content: 'arrow_forward_ios';
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: top;
    margin-left: 7px;
}*/

nav ul li a i {
    vertical-align: top;
}

@keyframes float {
    0% {
        transform: translate(-50%,0px);
    }

    100% {
        transform: translate(-50%,10px)
    }
}

a.scroll-arrow-wrap {
    color: var(--text);
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%, 0);
    bottom: 39px;
    width: 52px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: 0.2s;

    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;
}

a.scroll-arrow-wrap:hover {
    transform: translate(0,5px);
}

a.scroll-arrow-wrap span {
    font-size: 10px;
    margin-bottom: 4px;
}

svg.scroll-arrow {
    fill:none;
    stroke:var(--text);
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:2px;
    width: 23px;
    height: 15px;
}

.ultla-side-btn-area{
    position: fixed;
    z-index: 90;
    right: 0;
    top: 190px;
    width: 53px;
    border-right: 0;
    /*writing-mode: vertical-rl;*/
    font-size: var(--font-size-lg);
    text-align: center;
    letter-spacing: 1.3px;
    word-break: break-all;
    word-wrap: anywhere;
}

.ultla-side-btn-area a{
    display: block;
    padding: 27px 11px 27px 13px;
    transition:  0.2s;
    border: 2px solid var(--text);
}
.ultla-side-btn-area a.ultla-join-btn {
    background: var(--bg);
    color: var(--text);
}

.ultla-side-btn-area a.ultla-login-btn {
    color: var(--white);
    background: var(--text);
}

.ultla-side-btn-area a.ultla-join-btn:hover {
    border-bottom: 1px solid var(--text);
    background: var(--secondary2);
}

.ultla-side-btn-area a.ultla-login-btn:hover {
    border-top: 1px solid var(--text);
    background: #333;
}

@media (max-width: 768px) {
    header nav.nav-active .nav-btn span:nth-child(1) {
        top: 1px;
    }

    header nav.nav-active .nav-btn span:nth-child(3) {
        top: -3px;
    }

    header nav.nav-active ul {
        padding: 67px 46px;
    }

    header nav ul li a {
        font-size: 15px;
        margin: 17px 0;
    }

    .ultla-side-btn-area{
        top: 93px;
        width: initial;
    }

    a.ultla-join-btn,
    a.ultla-login-btn {
        padding: 12px 8px;
        width: 30px;
        font-size: 11px;
        right:  0;
    }
/*
    a.ultla-login-btn {
        padding: 12px 8px;
        width: 30px;
        font-size: 11px;
        right:  0;
    }
    */

    header a#ultla-logo {
        width: 117px;
        height: 42.5px;
    }

    header {
        top: 25px;
        left: 28px;
    }

    header nav .nav-bg, header nav .nav-btn {
        width: 42.5px;
        height: 42.5px;
        top: 25px;
        right: 28px;
    }

    header nav .nav-btn {
        padding: 15px 12px;
    }

    header nav .nav-btn span {
        height: 2px;
    }

    header nav ul, header nav.nav-active .nav-bg {
        width:  100%;
    }
}


.ultla-look a.ultla-button {
    margin: 0 auto;
}

a.ultla-button,
button.ultla-button {
    display: block;
    background: var(--white);
    width: 350px;
    min-height: 48px;
    max-width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 2px solid var(--text);
    color: var(--text);
    font-size: var(--font-size-lg);
    letter-spacing: 4px;
    line-height: 1;
    transform: translate(-3px, 0px);
    --btn-sdw-dis: 10px;
    box-shadow: var(--btn-sdw-dis) var(--btn-sdw-dis) 0 var(--text);
    transition: 0.2s;
    cursor: pointer;
}
button.ultla-button{
    margin: 0 auto;
}

a.ultla-button:hover,
button.ultla-button:hover {
    background: var(--secondary2);
}

a.ultla-button:active,
button.ultla-button:active {
    transform: translate(5px, 5px);
    box-shadow: none !important;
}



.ultla-look.ultla-intro {
    background: var(--ultla-nagoya-green);
    color: var(--white);
}
.ultla-look.ultla-intro .eyes,
.ultla-look.ultla-intro .eyes-tagline{
    color: var(--text);
}
.ultla-look.ultla-intro a.ultla-button {
    box-shadow: var(--btn-sdw-dis) var(--btn-sdw-dis) 0 var(--black);
}

.ultla-look.ultla-program {
    color: var(--white);
    background-color: var(--ultla-blue-500);
    background-image: url(/img/assets/bg2.png);
    background-repeat: repeat-x;
    background-size: contain;
    background-position: bottom;
}
.ultla-look.ultla-program .container {
    padding-bottom: 75px;
}
/*
body.ultla-blue-500 a.ultla-button {
    box-shadow: var(--btn-sdw-dis) var(--btn-sdw-dis) 0 var(--ultla-blue-500);
}
body.ultla-red a.ultla-button {
    box-shadow: var(--btn-sdw-dis) var(--btn-sdw-dis) 0 var(--ultla-red-500);
}
*/
.ultla-look.ultla-program a.ultla-button {
    margin-top: 70px;
}

.ultla-look.ultla-join {
    background: var(--ultla-red);
    color: var(--white);
}
.ultla-look.ultla-join a.ultla-button {
    box-shadow: var(--btn-sdw-dis) var(--btn-sdw-dis) 0 var(--black);
}
.ultla-look.ultla-join .container {
    padding: 100px 40px;
}

.ultla-look.ultla-navigator {
    background: var(--bg);
    /*background-image: url(/img/assets/navigator-map-min.png);*/
    background-image: url(/img/assets/bg3.png);
    background-position: center;
    background-size: 110%;
    background-size: cover;
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
    padding-top: 50px;
}

.ultla-look.ultla-news {
    /*
    background: var(--secondary);
    */
    background: var(--ultla-yellow);
}


.eyes, .eyes2 {
    text-align: center;
    font-size: 40px;
    margin: 13px 0;
    letter-spacing: 3px;
    vertical-align:  middle;
    --eyes-space:  30px;
}

.eyes:before, .eyes:after,
.eyes2:before, .eyes2:after {
    content: '';
    display: inline-block;
    width: 27px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: var(--eyes-space);
}
.eyes:before{
    background-image: url(/img/assets/title-eye-before.png);
}
.eyes2:before{
    background-image: url(/img/assets/title-eye2-before.png);
}
.eyes.ig-green:before{
    background-image: url(/img/assets/title-eye-before.png);
}
.eyes.ig-red:before{
    background-image: url(/img/assets/title-eye2-before.png);
}
.eyes.ig-yellow:before{
    background-image: url(/img/assets/title-eye3-before.png);
}
.eyes.ig-blue:before{
    background-image: url(/img/assets/title-eye4-before.png);
}
.eyes:after {
    background-image: url(/img/assets/title-eye-after.png);
    margin-right: 0;
    margin-left: var(--eyes-space);
}
.eyes2:after {
    background-image: url(/img/assets/title-eye2-after.png);
    margin-right: 0;
    margin-left: var(--eyes-space);
}
.eyes.ig-green:after{
    background-image: url(/img/assets/title-eye-after.png);
}
.eyes.ig-red:after{
    background-image: url(/img/assets/title-eye2-after.png);
}
.eyes.ig-yellow:after{
    background-image: url(/img/assets/title-eye3-after.png);
}
.eyes.ig-blue:after{
    background-image: url(/img/assets/title-eye4-after.png);
}


p.eyes-tagline {
    text-align: center;
    font-size: var(--font-size-md);
    letter-spacing: 1.5px;
    line-height: 1.7;
}

.eyes-tagline.eyes-description {
    width: 590px;
    max-width: 100%;
    margin: 55px auto 0;
}

.ultla-intro p.intro {
    --intro-look-lh: 64px;
    --intro-look-border-width: 3px;
    --intro-look-i: calc(var(--intro-look-lh) - var(--intro-look-border-width));

    line-height: var(--intro-look-lh);
    background-color: var(--white);
    background-image: linear-gradient( var(--white) var(--intro-look-i), var(--ultla-green) var(--intro-look-i), var(--ultla-green) var(--intro-look-lh), var(--white) var(--intro-look-lh));
    background-size: 100% var(--intro-look-lh);

    font-size: var(--font-size-lg);
    color: var(--text);
}

p.intro span {
    display: inline-block;
}

.ultla-look.ultla-intro p.intro {
    margin: 32px 0 50px;
    padding: 0 20px;
    text-align: center;
    background-image: none;
    line-height: 50px;
    padding: 40px 10px;
}

.ultla-look.ultla-intro p.intro, .ultla-look.ultla-intro p.intro span {
    text-decoration: underline;
    text-decoration-color: var(--ultla-green);
    text-underline-offset: 7px;
}

span.intro-fade {
    transform: translate(0,15px);
    opacity: 0;
    transition: 0.6s;
}

span.intro-fade.active {
    transform: translate(0,0);
    opacity: 1;
}




.ultla-look.ultla-program .eyes {
    margin-bottom: 58px;
}

.program-feature {
    display: grid;
    grid-template-columns: 350px 1fr;
    margin: 31px 0;
    position: relative;
}

a.program-feature {
    color: var(--white);
    /*padding: 20px;
    margin: 11px -20px;*/
}

.program-feature .program-img img {
    border: 2px solid var(--white);
    width: 100%;
    object-fit: cover;
    height: 250px;
}

.program-feature h4.program-title {
    margin: 0;
    padding: 18px 0;
    font-size: var(--font-size-lg);
    border: 2px dotted currentColor;
    border-left: none;
    border-right: none;
}

.program-feature .program-detail {
    margin-left: 33px;
    transition: 0.2s;
}

.program-feature p.program-description {
    font-size: var(--font-size-md);
    letter-spacing: 2px;
    line-height: 31px;
    margin: 30px 0 0;
}

@media (max-width: 992px) {
    .program-feature {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 768px) {
    .ultla-look .container {
        padding: 30px 28px;
    }

    .ultla-look.ultla-intro p.intro {
        margin: 15px 0 34px;
        line-height: 36px;
    }

    .ultla-intro p.intro {
        --intro-look-lh: 32px;
        --intro-look-border-width: 2px;
    }

    .eyes-tagline.eyes-description {
        margin: 30px auto 0;
    }
    
    a.ultla-button,
    button.ultla-button {
        width: 176px;
        min-height: 31px;
        font-size: 15px;
        border: 1px solid var(--text);
        --btn-sdw-dis: 5px;
    }

    a.ultla-button:hover,
    button.ultla-button:hover {
        transform: translate(5px, 5px);
        box-shadow: none !important;
    }
    
    .ultla-look.ultla-program{
        background-color: var(--ultla-blue-500);
        background-size: contain;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    
    .eyes, .eyes2 {
        font-size:  24px;
        --eyes-space:  15px;
    }

    .eyes:before, .eyes:after,
    .eyes2:before, .eyes2:after {
        width: 17px;
        height: 18px;
    }
    
    .program-feature {
        grid-template-columns: 100%;
        margin: 31px 0 36px;
    }

    .ultla-look.ultla-program .eyes, .ultla-look.ultla-join .eyes {
        margin-top: 30px;
        margin-bottom: 32px;
    }

    .program-feature .program-img img {height: 228px;}

    .program-feature .program-detail {
        margin-left: 0;
        margin-top: 15px;
    }

    .program-feature h4.program-title {
        border-width: 2px;
        padding: 9px 0;
    }

    .program-feature p.program-description {
        line-height: 21px;
        margin: 11px 0 0;
    }

    .ultla-look.ultla-program a.ultla-button {
        margin-top: 41px;
    }

    .ultla-look.ultla-program .container {
        padding-bottom: 40px;
    }
}



.step-arrow .flow-icon {
    fill: none;
    stroke:var(--white);
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-arrow .flow-icon:before {
    content: '';
    --arrow-size: 24px;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border: 3px solid var(--white);
    border-radius: 2px;
    border-left: 0;
    border-bottom: 0;
    transform: translate(-10px, 0) rotate(45deg);
    transform: translate(calc(var(--arrow-size) / 3 * -1), 0) rotate(45deg);
}

.flow-wrap {
    --step-width:  200px;
    display: grid;
    grid-template-columns: var(--step-width) 1fr;
}

.ultla-join .flow-wrap {
    --step-width: 160px;
    --step-width: 140px;
    grid-template-columns: var(--step-width) 1fr var(--step-width) 1fr var(--step-width) 1fr var(--step-width) 1fr var(--step-width);
    margin-top: 110px;
    margin-bottom: 92px;

}

.flow-wrap .flow-step {
    display: grid;
    grid-template-rows: var(--step-width) 116px auto;
}

.flow-wrap h4.flow-title {
    font-size: 20px;
    font-size: 18px;
    line-height: 28px;
    display: flex;
    align-items: center;
    text-align: left;
    margin: 0;
    display: block;
    padding-top: 30px;
    text-align: center;
}

.flow-wrap h4.flow-title > span {
    display: inline-block;
}

.flow-wrap p.flow-description {
    font-size: var(--font-size-md);
    line-height: 31px;
    margin: 0;
}

.flow-wrap .flow-step:not(.step-arrow) .flow-icon {
    position: relative;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    --flow-icon-size: var(--step-width);
    width: var(--flow-icon-size);
    height: var(--flow-icon-size);
}

.flow-wrap .flow-icon img {
    width: 100%;
    object-fit: contain;
    /*
    height: 75px;
    */
}
/*
.flow-wrap .flow-icon img[src="/img/assets/icon-check.svg"] {
    height: 66px;
}
*/

.flow-wrap .flow-count {
    position: absolute;
    top: 3px;
    left: 1px;
    font-size: 27px;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    width: 38px;
    height: 38px;
    line-height: 1;
    /*
    background: var(--ultla-red-500);
    */
    background-color: var(--black);
    /*
    border: 2px solid var(--white);
    */
    border-radius: 50%;
}

.ultla-join-flow .flow-wrap .flow-icon img {
    height: 105px;
}

.ultla-join-flow .flow-wrap .flow-count {
    width: 47px;
    height: 47px;
    font-size: 31px;
}

@media (max-width: 992px) {
    .ultla-join .flow-wrap {
        --step-width: 100%;
        grid-template-columns: var(--step-width);
        margin-top: 40px;
        margin-bottom: 55px;
    }

    .flow-wrap .flow-step:not(.step-arrow) .flow-icon {
        --flow-icon-size: 142px;
        margin: 0 auto;
    }
/*
    .flow-wrap .flow-icon img, .ultla-join-flow .flow-wrap .flow-icon img {
        height: 70px;
    }

    .flow-wrap .flow-icon img[src="/img/assets/icon-check.svg"] {
        height: 55px;
    }
    */

    .flow-wrap .flow-count, .ultla-join-flow .flow-wrap .flow-count {
        height: 34px;
        width: 34px;
        font-size: 20px;
    }

    .flow-wrap .flow-step {
        grid-template-rows: 151px 30px auto;
    }

    .flow-wrap h4.flow-title {
        text-align: center;
        width: 100%;
        justify-content: center;
        padding-top: 0;
    }

    .flow-wrap p.flow-description {
        max-width: 100%;
        width: 280px;
        margin: 0 auto;
    }

    .flow-wrap .flow-step.step-arrow {
        grid-template-rows: 65px;
    }

    .step-arrow .flow-icon:before {
        transform: translate(0, calc(var(--arrow-size) / 3 * -1)) rotate(135deg);
    }

    .ultla-look.ultla-join a.ultla-button {
        margin-bottom: 26px;
    }
}

@media (max-width: 768px) {
    .flow-wrap h4.flow-title {
        font-size: 14px;
    }

    .flow-wrap p.flow-description {
        line-height: 21px;
        font-size: 12px;
    }
}

@media (max-width: 340px) {
    .flow-wrap p.flow-description {
        width: 200px;
    }
}


.ultla-look.ultla-navigator .eyes {
    background: var(--white);
    width: -moz-fit-content;
    width: fit-content;
    margin: 13px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
}

.ultla-look.ultla-navigator p.navigator-desciprtion {
    background: var(--white);
    font-size: var(--font-size-lg);
    margin: 19vh 0 12vh;
    padding: 33px 30px;
    line-height: 38px;
    letter-spacing: 1px;
}

.ultla-navigator-img-sm {
    display:  none;
}

.navigator-overlay {
    position: absolute;
    z-index: 70;
    background: linear-gradient(180deg, white 40%, rgba(255,255,255,0));
    height: 190px;
    width: 100vw;
    top: 0;
    left: 0;
}

@media (min-width: 768px) {
    .ultla-look.ultla-navigator {
        /*
        background-image: url(/img/assets/navigator-map-min.png);
        */
        background-image: url(/img/assets/bg3.png);
    }
}

@media (max-width: 768px) {
    .navigator-overlay {
        height: 0;
        display: none;
    }

    .ultla-navigator .eyes {
        --eyes-space: 11px;
    }

    .ultla-look.ultla-navigator {
        padding-top: 9px;
        /*
        background-image: none;
        */
        background-image: url(/img/assets/bg3.png);
    }

    .ultla-look.ultla-navigator p.navigator-desciprtion {
        margin: 35px 0 15px;
        line-height: 24px;
        padding: 5px 10px;
    }

    .ultla-navigator-img-sm {
        display: none;
        /*
        display: block;
        height: 230px;
        background-image: url(/img/assets/bg3.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: -40px 0 -21px;
        background-position: center;
        width: 100%;
        height: calc(100vw * 0.613);
        */
    }

    .ultla-look.ultla-navigator a.ultla-button {
        margin-bottom: 14px;
    }
}

@media (max-width: 360px) {
    .ultla-look.ultla-navigator .eyes {
        font-size: 16px;
    }

    p.eyes-tagline {
        font-size: 11px;
        margin-top: -6px;
    }

    .ultla-look.ultla-navigator .eyes:before, .ultla-look.ultla-navigator .eyes:after {
        width: 13px;
        height: 14px;
    }
}

.news-wrap {
    background: var(--white);
    padding: 10px 50px 50px;
    margin-top: 60px;
}

.news-wrap a.news-link {
    display: grid;
    grid-template-columns: 135px 1fr 83px;
    color: var(--text);
    border-bottom: 1px solid var(--text);
    padding: 30px 0;
    align-items: center;
}

.news-wrap .news-date {
    font-size: var(--font-size-md);
}

.news-wrap .news-title {
    font-size: var(--font-size-md);
    line-height: 1.8;
    letter-spacing: 0.5px;
}

.news-wrap .news-arrow img {
    width: 22px;
}

.news-wrap .news-arrow {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    flex-direction: column;
    transition: 0.2s;
}

.news-link:hover .news-arrow {
    transform: translate(10px);
}

@media (max-width: 768px) {
    .news-wrap a.news-link {
        grid-template-columns: 1fr 83px;
        grid-template-rows: 1em 1fr;
    }

    .news-wrap .news-date {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
    }

    .ultla-look.ultla-navigator a.ultla-button {
        margin-bottom: 14px;
    }

    .ultla-look.ultla-news {
        padding-top: 10px;
    }

    .news-wrap {
        margin-top: 34px;
        padding: 18px 20px;
    }

    .news-wrap a.news-link {
        padding: 20px 0;
    }

    .news-wrap .news-date {
        margin-bottom: 6px;
    }

    .news-wrap .news-title {
        line-height: 1.6;
    }

    .news-wrap .news-arrow img {
        width: 14px;
    }

    .ultla-look.ultla-news a.ultla-button {
        margin-bottom: 27px;
    }
}

.ultla-look.ultla-news a.ultla-button {
    margin-top: 33px;
}
.sharebtns{
    background: var(--secondary2);
    border-top: 0.5px solid var(--white);
}
body.ultla-red .sharebtns,
body.contact-red .sharebtns{
    background: var(--ultla-red);
}
body.ultla-yellow .sharebtns,
body.contact-yellow .sharebtns{
    background: var(--ultla-yellow);
}
body.ultla-blue .sharebtns,
body.contact-blue .sharebtns{
    background: var(--ultla-blue);
}
body.ultla-blue-500 .sharebtns{
    background: var(--ultla-blue-500);
}
body.ultla-green .sharebtns,
body.contact-green .sharebtns{
    background: var(--ultla-green);
}
body.ultla-white .sharebtns{
    background: var(--white);
}
.footer-contact-flex{
    display: flex;
    justify-content: center;
    align-items: stretch;
    /*
    padding: 100px 0 40px;
    */
    padding: 0;
    border-left: 0.5px solid var(--white);
    border-right: 0.5px solid var(--white);
}
.footer-contact-flex > div{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-contact-flex div.contact-wrap a{
    font-size: 1.4rem;
    color: var(--text);
    flex-grow: 1;
    text-align: center;
    padding: 40px 0;
}

.share-wrap {
    border-left: 0.5px solid var(--white);
    padding: 20px 0;
    /*
    padding-top: 80px;
    */
    /*padding-top: 255px;*/
}

.share-caption {
    width: 100%;
    text-align: center;
    font-size: 14px;
    letter-spacing: 1px;
}

.share-btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 14px;
}

.share-btns .share-btn {
    width: 50px;
    height: 50px;
    margin: 0 6px;
    transition:  0.1s;
    fill: var(--text);
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 0;
    color: transparent;
    font-size: 0px;
}

.share-btns .share-btn svg {
    width: 100%;
    height: 100%;
    background: #FFF;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
    display: block;
}

.share-btns .share-btn.share-line svg {
    border-radius: 11px;
}

.share-btns .share-btn:hover {
    transform: scale(0.98);
}

.share-btns .share-btn.share-twitter:hover { fill: #1DA1F2; }
.share-btns .share-btn.share-fb:hover { fill: #4267B2; }
.share-btns .share-btn.share-line:hover { fill: #06C755; }

@media (max-width: 768px) {
    .footer-contact-flex{
        padding: 0px;
    }
    .share-btns .share-btn {
        width: 25px;
        height: 25px;
        margin: 0 3px;
    }

    .share-btns .share-btn svg {
        transform: scale(0.5) translate(-50%, -50%);
        width: 200%;
        height: 200%;
    }

    .share-btns {
        margin-top: 5px;
    }

    .share-caption {
        font-size: 10px;
    }

    .share-wrap {
        padding-top: 28px;
        padding-bottom: 22px;
    }
}

/*.ultla-wrap .share-btns .share-btn:hover { fill: var(--white); }*/

footer {
    background: var(--white);
    color: var(--text);
}

body.ultla-white footer{
    background: var(--secondary2);
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 14px;
    min-height: 370px;
    padding: 65px 0;
}

.footer-detail {
    width: 450px;
    max-width: 100%;
    letter-spacing: 1px;
    line-height: 1.7;
}

.footer-logo img {
    height: 78px;
    margin-bottom: 37px;
    width: 220px;
}

.footer-logo {
    text-align: right;
}

p.footer-copy {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.5px;
}

p.footer-description {
    font-size: 12px;
    margin-bottom: 15px;
}

.footer-detail h4 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--black);
    margin-top: 0;
}

.footer-detail hr {
    border: 0;
    border-bottom: 1px solid var(--black);
    margin-bottom: 38px;
    margin-top: 2px;
}

ul.footer-links {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 30px;
}

a.footer-link {
    color: var(--text);
    display: block;
    transition: 0.2s;
}

.footer-links li a.footer-link:before {
    content: '-';
}

a.footer-link:after {
    content: '>';
    transition: 0.1s;
    display: inline-block;
}

a.footer-link:hover {
    color: var(--gray-600);
}

a.footer-link:hover:after {
    transform: translate(5px, 0);
}

a.totop-btn {
    position: absolute;
    /*bottom: 36px;*/
    /*
    top: -145px;
    right: -105px;
    right: 0;
    top: -110px;
    */
    top: -102px;
    right: -35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

a.totop-btn img {
    /*
    width: 67px;
    height: 72px;
    margin-bottom: 13px;
    */
    width: 53px;
    height: 57px;
    margin-bottom: 10px;
}

a.totop-btn span {
    font-size: 18px;
    color: var(--text);
    text-align: center;
}

a.totop-btn:hover {
    transform: translate(0, -10px);
}

@media (max-width: 768px) {
    a.totop-btn img {
        width: 34px;
        height: 36px;
        margin-bottom: 5px;
    }

    a.totop-btn span {
        font-size: 12px;
    }

    a.totop-btn {
        top: -73px;
        right: 24px;
    }

    footer .container {
        display: block;
        padding: 25px 28px;
        min-height: auto;
    }

    .footer-detail h4 {
        font-size: 10px;
        padding-bottom: 3px;
        margin-bottom: 3px;
    }

    p.footer-description {
        font-size: 10px;
        margin-top: 3px;
        line-height: 1.4;
        margin-bottom: 4px;
    }

    ul.footer-links {
        font-size: 10px;
        line-height: 18px;
    }

    .footer-detail hr {
        margin-bottom: 9px;
        margin-top: 6px;
    }

    a.footer-link {
        font-size: 10px;
    }

    .footer-logo {
        text-align: center;
        margin-top: 30px;
    }

    p.footer-copy {
        font-size: 10px;
    }

    .footer-logo img {
        height: 59px;
        margin-bottom: 21px;
        width: 100%;
    }
}

body.ultla-green .eyes, body.ultla-green .eyes-tagline {
    /*
    color: var(--ultla-green);
    */
    color: var(--text);
}
body.ultla-red .eyes, body.ultla-red .eyes-tagline {
    /*
    color: var(--ultla-red);
    */
    color: var(--text);
}
body.ultla-blue .eyes, body.ultla-blue .eyes-tagline, body.ultla-blue-500 .eyes, body.ultla-blue-500 .eyes-tagline {
    /*
    color: var(--ultla-blue);
    */
    color: var(--text);
}

body.ultla-green .eyes-tagline {
    margin-bottom: -27px;
}

.ultla-wrap {
    background: var(--secondary2);
    padding: 122px 0 95px;
}

.ultla-wrap.ultla-join-wrap {
    padding-bottom: 95px;
}

.ultla-wrap.ultla-register-new-wrap {
    background: none;
    padding: 0px 0 95px;
    color: var(--text);
}

body.ultla-green .ultla-wrap { background: var(--ultla-green); }
body.ultla-red .ultla-wrap { background: var(--ultla-red); }
body.ultla-yellow .ultla-wrap { background: var(--ultla-yellow); }
body.ultla-blue .ultla-wrap { background: var(--ultla-blue); }
body.ultla-blue-500 .ultla-wrap { background: var(--ultla-blue-500); }

body.ultla-blue-500 .ultla-wrap.nagoya-ultla-program{
    background-image: url(/img/assets/nagoya-program-bg.png);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: bottom;
}

.page-overview {
    padding: 195px 0 60px;
}

section.ultla-page.ultla-intro {
    background: var(--white);
    padding: 93px 100px;
    margin-top: 53px;
}

.ultla-page.ultla-intro .feature-tagline-wrap {
    margin: 0 auto;
}

.ultla-page.ultla-intro .feature-tagline-wrap .feature-copy {
    margin-top: 0;
    max-width: 100%;
    width: 272px;
    margin-bottom: 28px;
}

.page-feature-wrap .feature-copy + .lead {
    margin-top: 25px;
    font-size: 18px;
    line-height: 1.7;
}

.page-feature-wrap {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 39px 0 88px;
}

.page-feature-u img {
    width: 323px;
    height: 300px;
}

.page-feature-u {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 7px;
}

.ultla-page.ultla-intro .feature-tagline-wrap {
    margin: 0 auto;
}



@media (max-width: 992px) {
    .page-feature-wrap {
        grid-template-columns: 100%;
        grid-template-rows: 254px 1fr;
        margin: -3px 0 43px;
    }

    .page-feature-u {
        grid-row: 1;
    }

    .page-feature-u img {
        width: 224px;
        height: 207px;
        margin-bottom: 40px;
    }

    .ultla-page.ultla-intro .feature-tagline-wrap .feature-copy {
        height: 133px;
        background-position: center;
        width: 227px;
        margin-left: auto;
        margin-right: auto;
    }

    /*.page-feature-wrap p.lead {
        width: 227px;
        font-size: 14px;
        line-height: 1.6;
    }*/

    .ultla-page.ultla-intro .feature-tagline-wrap {
        width: 100%;
    }

    .page-feature-wrap p.lead {
        /*width: 270px;
        max-width: 90%;*/
        margin: 0 auto;
    }

    .page-feature-wrap .feature-copy + .lead {
        padding-left: 7px;
        padding-right: 5px;
        letter-spacing: 0.3px;
        width: 227px;
        font-size: 15px;
        letter-spacing: 0;
    }
}

@media (max-width: 768px) {
    .page-overview {
        padding: 85px 0 40px;
    }
    .footer-contact-flex div.contact-wrap a{
        font-size: 0.9rem;
    }
    .ultla-wrap {
        /*
        padding: 25px 0 95px;
        */
        padding: 25px 0 55px;
    }

    .ultla-wrap .container {
        padding-left: 28px;
        padding-right: 28px;
    }

    section.ultla-page.ultla-intro {
        margin-top: 0;
        padding: 43px 0 20px;
    }

    .ultla-wrap .ultla-intro p.intro {
        /*
        padding: 0 19px;
        */
        margin: 0 19px;
        padding: 0;
    }
    .sharebtns .container{
        padding: 0;
    }
    .footer-contact-flex{
        border-left: none;
        border-right: none;
    }
}

.program-head {
    padding-top: 58px;
    margin-bottom: -64px;
}

.program-head img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ultla-page.ultla-program p.lead, .ultla-page.ultla-join p.lead, .ultla-page.ultla-single p.lead, .ultla-page.ultla-navigator p.lead {
    color: var(--white);
    font-size: var(--font-size-lg);
    line-height: 38.5px;
    line-height: 1.75;
    margin-bottom: 85px;
    margin-top: 42px;
}

.ultla-page .program-feature {
    background: rgba(255,255,255,0.8);
    padding: 24px;
    margin-bottom: 50px;
    color:  var(--text);
    transition: 0.2s;
}

.ultla-program:not(.ultla-archive) a.card {
    /*display: grid;
    grid-template-rows: 200px;*/
}

a.program-feature:before, a.card:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.3);
    pointer-events: none;
    opacity: 0;
    transition: 0.2s;
}

a.program-feature:hover:before, a.card:hover:before {
    opacity: 1;
}



.ultla-look a.program-feature:before {
    content: none;
}

.ultla-look a.program-feature:hover .program-detail {
    opacity: 0.6;
}

/*a.program-feature .program-img, a.card .card-img {
    position: relative;
}

a.program-feature .program-img:after, a.card .card-img:after {
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    background: rgba(0,0,0,0.4);
    width: 0%;
    height: 246px;
    left: 2px;
    transition: 0.3s;
}

a.program-feature:hover .program-img:after, a.card:hover .card-img:after {
    width: calc(100% - 4px);
}*/

.program-feature .program-badge {
    position: absolute;
    --badge-size: 78px;
    top: calc(var(--badge-size) / -2);
    right: calc(var(--badge-size) / -2);
    width: var(
    --badge-size);
    height: var(
    --badge-size);
    border-radius: 50%;
    background: var(--ultla-red);
    display: inline-grid;
    place-items: center;
    color: var(--white);
    font-size: 19px;
}

.grid {
    display: grid;
}

.grid.grid-3col {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 35px;
}

.card {
    background: var(--white);
    padding: 15px 14px;
}

a.card {
    color: var(--text);
    transition:  0.2s;
    position:  relative;
}

h4.card-title {
    font-size: var(--font-size-lg);
    line-height: 1.3;
    border-bottom: 3px dotted currentColor;
    padding-bottom: 22px;
    margin-bottom: 18px;
}

.modal-footer h4.card-title {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 10px;
}

p.card-detail {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 31.5px;
    padding-bottom: 7px;
}

.card-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card.ended:before {
    background: rgba(255,255,255,0.5);
}

.ultla-program .card:after {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--ultla-blue-500);
    color: var(--text);
    font-size: 20px;
    padding: 11px 20px;
    content: '申込終了';
}

.ultla-archive .card:after {
    content: none;
}

span.card-date {
    font-size: 15px;
    margin-bottom: 9px;
    display: block;
}

.program-detail-row {
    display: grid;
    grid-template-columns: 4.2em 1fr;
    grid-gap: 15px;
    margin-bottom: 10px;
    font-size: var(--font-size-md);
    line-height: 1.5;
}

.program-detail-row .detail-key {
    font-weight: bold;
    text-align: justify;
    text-justify: inter-character;
    text-justify: inter-ideograph;
    text-align-last: justify;
}



.ultla-archive h4.card-title {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 11px;
}

.ultla-program .card.ended:after {
    content: '実施済';
    background: var(--text);
    color: var(--white);
}

.card.ended .card-img {
    opacity: 0.3;
}

ul.pagination {
    list-style-type: none;
    padding: 0;
    margin: 0;
    --pagenation-btn-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.paginator {
    margin-top: 55px;
}

.pagination a {
    box-shadow: 10px 10px 0 var(--shadow-color);
    height: var(--pagenation-btn-size);
    width: var(--pagenation-btn-size);
    display: inline-flex;
    background: #FFF;
    border: 1px solid var(--text);
    margin: 7px;
    --shadow-color: rgba(255,255,255,0.5);
    color: var(--text);
    font-size: 25px;
    line-height: 1;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

.pagination li.disabled a {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    display: none;
}

.pagination a:hover {
    background: var(--secondary);
}

.pagination a:active {
    transform: translate(5px, 5px);
    box-shadow: none !important;
}

.ultla-blue .pagination a {
    --shadow-color: #6fbeef;
}

.ultla-blue-500 .pagination a {
    --shadow-color: var(--text);
}

@media (max-width: 768px) {
    .program-head {
        padding-top: 24px;
        margin-bottom: -44px;
    }

    .ultla-page.ultla-program p.lead, .ultla-page.ultla-join p.lead {
        padding-top: 15px;
        line-height: 25px;
        margin-bottom: 62px;
    }

    .program-head {
        padding-top: 24px;
        margin-bottom: -44px;
    }

    .ultla-page .program-feature {
        /*
        margin-left: -28px;
        margin-right: -28px;
        margin-bottom: 0;
        */
        margin-bottom: 40px;
        padding-bottom: 9px;
    }

    .ultla-page .program-feature + .program-feature {
        margin-top: 0;
        margin-bottom: 40px;
    }

    .program-feature .program-badge {
        right: 37px;
        top: 39px;
        --badge-size: 50px;
        font-size: 12px;
    }

    .grid.grid-3col {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px 10px;
    }

    .card {
        padding: 8px 8px;
    }

    .card-img img {
        height: 100px;
    }

    h4.card-title {
        margin-top: 4px;
        border-width: 2px;
        margin-bottom: 5px;
        padding-bottom: 7px;
    }

    p.card-detail {
        line-height: 21px;
    }

    .ultla-program:not(.ultla-archive) a.card {
        /*grid-template-rows: 100px 72px;*/
    }

    .program-detail-row {
        grid-template-columns: 100%;
        grid-gap: 0;
        margin-bottom: 5px;
    }

    .program-detail-row .detail-key {
        text-align: left;
        text-align-last: left;
        text-justify: none;
    }

    .ultla-program .card:after {
        font-size: 13px;
        padding: 7px 13px;
    }

    ul.pagination {
        --pagenation-btn-size: 25px;
    }

    .pagination a {
        box-shadow: 5px 5px 0 var(--shadow-color);
        font-size: 16px;
        margin: 4px;
        border-width:  1px;
    }

    .paginator {
        margin-top: 28px;
    }
}


.ultla-article {
    padding: 115px 0 95px;
}

.ultla-article-header {
    padding: 72px 0 0;
}

.ultla-article-header .article-title {
    font-size: 25px;
    margin: 0 0 15px;
    line-height: 43px;
}

.ultla-article-header .article-img {
    width: 100%;
    margin-top: 82px;
    height: 600px;
    object-fit: cover;
    line-height: 1;
    vertical-align: middle;
}

.article-detail-inbadge {
    display: grid;
    --badge-size: 77px;
    grid-template-columns: 1fr var(--badge-size);
}

.article-badge {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    width: var(--badge-size);
    height: var(--badge-size);
    display: inline-grid;
    place-content: center;
    background: var(--text);
    border-radius: 50%;
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    word-break: keep-all;
    white-space: nowrap;
}

.article-detail-inbadge .article-title {
    padding-right: 40px;
}

.article-badge-new {
    background: var(--ultla-red);
}

.ultla-article .container {
    font-size: var(--font-size-md);
    line-height: 31px;
}

.article-body {
    margin-bottom: 101px;
}

.article-body img {
    margin: 0 auto;
    display: block;
    width: 500px;
    border: 18px solid var(--secondary);
}

.article-body hr {
    border: 0;
    border-top: 1px solid var(--gray-300);
    margin: 40px auto;
}

.article-info {
    background: var(--ultla-blue-500);
    padding: 49px 78px 43px;
    margin: 0 0 101px;
}

.article-info h3 {
    text-align: center;
    margin: 0 0 10px;
}

a.navigator-link {
    color: var(--text);
    margin: 6px 0 0;
    text-align: center;
    --border-width: 2px;
    padding: 20px 0;
    border-radius: 18px;
    transition: 0.2s;
}

a.navigator-link.navigator-link-guest:before {
    content: 'ゲスト';
    position: absolute;
    background: var(--ultla-blue);
    color: var(--white);
    border: 2px solid var(--text);
    z-index: 999;
    padding: 6px 10px;
    border-radius: 10px;
    line-height: 1;
}

.navigator-link-face {
    --img-size: 220px;
    border-radius: 50%;
    width: var(--img-size);
    height: var(--img-size);
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    border: var(--border-width) solid var(--text);
    transition: 0.2s;
}

.navigator-link-name {
    font-size: 20px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 90%;
    position: relative;
    margin: -17px auto 13px;
    padding: 16px 33px;
    background: var(--white);
    border: var(--border-width) solid var(--text);
    line-height: 1;
    word-break: keep-all;
    transition: 0.2s;
}

a.navigator-link:hover {
    transform: scale(1.02);
    /*background: rgba(255,255,255,0.5);*/
}

a.navigator-link:hover .navigator-link-face {
    filter: brightness(1.1);
}

a.navigator-link:hover .navigator-link-name {
    filter: brightness(0.9);
}

.navigator-link-cap > span {
    display:  inline-block;
}

.article-actions.actions-3col {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    grid-gap: 5px;
}

.actions-3col-left {
    grid-column: 1 / 2;
    display: flex;
    justify-content: flex-start;
}

.actions-3col-center {
    grid-column: 2 / 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.actions-3col-right {
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
}

.article-actions .ultla-button {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 20px;
    max-width: 100%;
    letter-spacing: 0;
    border-width: 1px;
}

span.ended-display {
    background: var(--secondary);
    width: 100%;
    max-width: 60vw;
    font-size: var(--font-size-md);
    text-align: center;
    padding: 10px 15px;
    line-height: 1.5;
}

span.ended-display > span {
    display: inline-block;
}

.grid.grid-3col.navigators {
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}

@media (max-width: 992px) {
    .article-actions.actions-3col {
        grid-template-columns: 100%;
        grid-gap: 20px;
    }

    .article-actions.actions-3col > * {
        grid-column: auto;
        justify-content: center;
    }

    .actions-3col-left {
        grid-row: 2 / 3;
    }

    .actions-3col-center {
        grid-row: 1 / 2;
    }

    .actions-3col-right {
        grid-row: 3 / 4;
    }

    a.navigator-link.navigator-link-guest:before {
        border-width: 1px;
        padding: 4px 6px;
    }
}

@media (max-width: 768px) {
    .ultla-article-header {
        margin-top: -15px;
        padding: 34px 0 0;
    }

    .ultla-article-header .article-title {
        font-size: 12px;
        line-height: 22px;
        margin: 0 0 9px;
    }

    .article-detail-inbadge .article-title {
        padding-right: 0;
    }

    .article-date {
        font-size: 10px;
    }

    .article-badge {
        position: absolute;
        bottom: -76px;
        font-size: 16px;
        right: 10px;
    }

    .article-detail-inbadge {
        grid-template-columns: 100%;
        --badge-size: 50px;
    }

    .ultla-article-header .article-img {
        margin-top: 17px;
        height: 140px;
    }

    .ultla-article {
        padding: 17px 0 95px;
    }

    .ultla-article .container {
        line-height: 24px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .article-info {
        margin: 44px -28px 25px;
        padding: 26px 28px 43px;
    }

    .grid.grid-3col.navigators {
        grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
    }

    a.navigator-link {
        --border-width: 1px;
        padding: 0px 0;
    }

    .navigator-link-face {
        --img-size: 110px;
    }

    .navigator-link-name {
        font-size: 13px;
        padding: 7px 18px;
        margin-bottom: 5px;
    }
}




.ultla-page.ultla-join h3 {
    color: var(--white);
    text-align: center;
    font-size: 25px;
    letter-spacing: 1px;
    margin-top: 110px;
    margin-bottom: 22px;
}

.join-desc {
    background: var(--white);
    display: grid;
    grid-template-columns: 148px 1fr;
    padding: 27px 19px 27px 0;
    font-size: var(--font-size-md);
    line-height: 1.6;
}

.join-desc .join-desc-body {
    padding: 17px 22px;
    border-left: 2px solid var(--ultla-red);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.join-desc .join-desc-icon {
    display: grid;
    place-items: center;
}

.join-desc .join-desc-icon img {
    height: 86px;
    max-width: 60%;
    object-fit: contain;
}

.join-desc .join-desc-body ul {
    margin: 10px 0 0;
    line-height: 1.75;
    padding: 0;
    list-style-type: none;
    width: 100%;
}

.join-desc .join-desc-body ul li {
    display: flex;
    align-items: baseline;
}

.join-desc .join-desc-body ul li:before {
    content: '● ';
    color: var(--ultla-red);
    flex-basis: 27px;
    flex-shrink: 0;
}

.ultla-join-flow h2 {
    margin-bottom: 0;
    width: 350px;
    height: 74px;
    background: var(--white);
    color: var(--ultla-red);
    display: grid;
    place-items: center;
    font-size: 30px;
    letter-spacing: 1px;
    margin: -72px auto 0;
}

.ultla-join-flow .container h3 {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto 31px;
    padding: 6px 44px;
    border-bottom: 2px solid var(--red);
    font-size: 25px;
    letter-spacing: 1px;
}

.ultla-join-flow .container {
    padding: 81px 0 71px;
}

.ultla-join-flow .container p {
    font-size: var(--font-size-md);
    line-height: 1.7;
}

.ultla-join-flow .flow-wrap {
    --step-width: 294px;
    --arrow-width:  55px;
    margin-top: 92px;
    margin-bottom: 50px;
    justify-content: center;
}

.ultla-join-flow .flow-wrap.flow-wrap-2col {
    grid-template-columns: var(--step-width) var(--arrow-width) var(--step-width);
}

.ultla-join-flow .flow-wrap.flow-wrap-3col {
    grid-template-columns: var(--step-width) var(--arrow-width) var(--step-width) var(--arrow-width) var(--step-width);
}

.ultla-join-flow .flow-wrap .flow-step {
    grid-template-rows: 240px 1fr;
    text-align: center;
}

.ultla-join-flow .flow-wrap .flow-step:not(.step-arrow) .flow-icon {
    border: 2px solid var(--ultla-red);
    --flow-icon-size: 240px;
    margin: 0 auto;
}

.ultla-join-flow .flow-wrap p.flow-description {
    font-size: var(--font-size-lg);
    margin-top: 20px;
}

.ultla-join-flow .flow-wrap .flow-count {
    background: var(--ultla-red);
    color: var(--white);
    border: none;
}

.ultla-join-flow .flow-wrap .step-arrow .flow-icon:before {
    border-color: var(--text);
    --arrow-size: 52px;
}

.ultla-join-flow a.ultla-button {
    margin: 0 auto;
}

.ultla-page.ultla-join .join-desc:last-child {
    margin-bottom: 160px;
}

section.ultla-join-flow {
    border-bottom: 10px solid var(--ultla-red);
    position: relative;
}
section.ultla-join-flow.flow-join-end {
    border-bottom:none;
}

.ultla-join-flow:before, .ultla-join-flow:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: -162px;
    left: 50%;
    right: 50%;
    border: 81px solid transparent;
    border-top-color: var(--ultla-red);
    transform: translate(-50%, 0);
}
section.ultla-join-flow.flow-join-end:before,
section.ultla-join-flow.flow-join-end:after {
    content: none;
    position: inherit;
    bottom: 0;
    border: none;
    transform: none;
}

.ultla-join-flow:after {
    border-top-color: var(--white);
    bottom: -144px;
}

.ultla-join-flow + .ultla-join-flow .container {
    padding-top: 120px;
}

/*
main .ultla-join-flow:last-child {
    border-bottom: 0;
    background: var(--ultla-red);
    position: static;
    z-index: -1;
}
main .ultla-join-flow:last-child:before, main .ultla-join-flow:last-child:after {
    content: none;
}

main .ultla-join-flow:last-child .container {
    padding-top: 93px;
}
*/

main .ultla-join-contact{
    padding-top: 100px;
    background: var(--ultla-red);
    border-bottom: 0;
    position: static;
    z-index: -1;
}

@media (max-width: 992px) {
    .ultla-join-flow .flow-wrap {
        grid-template-columns: 100% !important;
    }

    .ultla-join-flow .flow-wrap .flow-step:not(.step-arrow) .flow-icon {
        --flow-icon-size: 130px;
    }

    .ultla-join-flow .flow-wrap .flow-step {
        grid-template-rows: 120px 1fr;
    }

    .ultla-join-flow .flow-wrap .flow-step.step-arrow {
        grid-template-rows: 63px;
    }

    .ultla-join-flow .flow-wrap .step-arrow .flow-icon:before {
        --arrow-size: 25px;
    }
}

@media (max-width: 768px) {
    .ultla-wrap.ultla-join-wrap {
        margin-top: -15px;
    }

    .ultla-page.ultla-join h3 {
        margin-top: 50px;
        font-size: 17px;
        margin-bottom: 12px;
    }

    .ultla-page.ultla-join p.lead {
        margin-bottom: 32px;
    }

    .join-desc {
        grid-template-columns: 100%;
        grid-template-rows: 85px 1fr;
        padding: 0 20px 20px 20px;
    }

    .join-desc .join-desc-body {
        border-top: 2px solid var(--ultla-red);
        border-left: none;
        padding: 8px 0 0;
    }

    .join-desc .join-desc-icon img {
        max-height: 60%;
    }

    .ultla-page.ultla-join .join-desc:last-child {
        margin-bottom: 105px;
    }

    .ultla-join-flow h2 {
        width: 228px;
        height: 48px;
        font-size: 26px;
        margin: -44px auto 0;
    }

    .ultla-join-flow .container {
        padding: 36px 28px 61px;
    }

    .ultla-join-flow .container h3 {
        font-size: 17px;
        padding: 3px 22px;
        margin: 0 auto 14px;
    }

    .ultla-join-flow .flow-wrap {
        margin-top: 32px;
    }

    section.ultla-join-flow {
        border-width: 6px;
    }

    .ultla-join-flow:before, .ultla-join-flow:after {
        border-width: 41px;
        bottom: -82px;
    }

    .ultla-join-flow:after {
        bottom: -73px;
    }

    .ultla-join-flow + .ultla-join-flow .container {
        padding-top: 72px;
    }

    main .ultla-join-flow:last-child .container {
        padding-top: 47px;
    }

    .ultla-join-flow .flow-wrap p.flow-description {
        width: 100%;
    }
}


.ultla-news .pagination a {
    --shadow-color: var(--text);
}

.ultla-wrap .news-wrap a.news-link:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ultla-wrap .news-wrap {
    padding-bottom: 30px;
}

.pagination .active a {
    background: var(--secondary2);
}

.ultla-tab {
    /*display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 54px;
    grid-gap: 15px;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-left: -7px;
    margin-right: -7px;
}


.ultla-tab-wrap + .ultla-wrap {
    padding-top: 53px;
}

.container.ultla-tab-wrap {
    margin-bottom: 5px;
}

.ultla-tab a {
    color: var(--text);
    display: grid;
    place-content: center;
    border: 1px solid var(--text);
    border-bottom: 0;
    font-size: 20px;
    letter-spacing: 1px;
    background: var(--white);
    transition: 0.2s;
    width: calc(20% - 14px);
    margin: 0 7px;
    height: 54px;
}

.ultla-tab a.active {
    background: var(--secondary2);
}

.ultla-tab a:hover {
    background: var(--secondary2);
}

body.ultla-yellow .ultla-tab a.active{
    background: var(--ultla-yellow);
}

body.ultla-yellow .ultla-tab a:hover {
    background: var(--ultla-yellow);
}

.eyes a {
    color: var(--text);
}

h4.article-error {
    text-align: center;
    font-size: var(--font-size-lg);
}

.ultla-article-category-wrap {
    margin-top: -54px;
}

.ultla-article-category {
    height: 54px;
    width: 237px;
    border: 1px solid var(--text);
    border-bottom: 0;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    display: grid;
    place-content: center;
    margin-bottom: 10px;
    color: var(--text);
}

article.ultla-article.ultla-article-free {
    background: var(--white);
    padding: 0 100px 75px;
    margin-bottom: 90px;
}

.ultla-article-free .ultla-article-header {
    padding-top: 63px;
}

.ultla-article-free .article-img {
    margin: 50px -100px 0;
    width: calc(100% + 200px);
    max-width: calc(100% + 200px);
    height: 500px;
    object-fit: cover;
}

.ultla-article-free .article-body {
    font-size: var(--font-size-md);
    line-height: 1.8;
    margin-top: 70px;
    margin-bottom: 0;
}

.article-actions .paginator {
    margin-top: 0;
}

.article-actions .pagination a {
    margin: 0 7px;
    --shadow-color: var(--text);
}

/*.article-actions .pagination li.disabled a {
    display: flex;
    pointer-events: auto;
}*/

@media (max-width: 768px) {
    .ultla-tab {
        /*grid-template-rows: 25px;
        grid-gap: 5px;*/
        margin-right: 7px;
        margin-left: 7px;
    }

    .ultla-tab a {
        font-size: 12px;
        height: 25px;
        width: calc(33% - 14px);
        margin-top: 5px;
        margin-left: 3px;
        margin-right: 3px;
    }

    .container.ultla-tab-wrap {
        margin-top: -13px;
        margin-bottom: 3px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .ultla-tab-wrap + .ultla-wrap {
        padding-top: 22px;
    }

    .ultla-article-category-wrap {
        margin-top: 12px;
    }

    .ultla-article-category {
        height: 25px;
        width: 76px;
        font-size: 12px;
        letter-spacing: 0;
        margin-bottom: 20px;
    }

    article.ultla-article.ultla-article-free {
        padding: 0 21px 25px;
        margin-bottom: 35px;
    }

    .ultla-article-free .ultla-article-header {
        padding-top: 34px;
    }

    .ultla-article-free .ultla-article-header .article-title {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 4px;
    }

    .ultla-article-free .article-img {
        margin: 28px -21px 0;
        width: calc(100% + 42px);
        max-width: calc(100% + 42px);
        height: 160px;
    }

    .ultla-article-free .article-body {
        margin-top: 25px;
    }

    .ultla-article-free + .article-actions.actions-3col {
        grid-template-columns: 2fr 1fr;
    }

    .ultla-article-free + .article-actions.actions-3col .actions-3col-left {
        justify-content: flex-start;
        grid-row: auto;
        grid-column: 1 / 2;
    }

    .ultla-article-free + .article-actions.actions-3col .actions-3col-center {
        justify-content: flex-end;
        grid-row: auto;
        grid-column: 2 / 3;
    }

    .article-actions ul.pagination {
        --pagenation-btn-size: 31px;
    }
}


.ultla-page.ultla-single p.lead {
    color: var(--text);
    margin-top: -9px;
    margin-bottom: 105px;
}

.ultla-page.ultla-single p a {
    color: #767676;
}

a [class^="ph-"] {
    vertical-align: middle;
}

.ultla-single h3 {
    font-size: var(--font-size-lg);
    border-bottom: 1px solid var(--text);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.ultla-single p {
    font-size: var(--font-size-md);
    line-height: 1.8;
    margin-top: 10px;
    margin-bottom: 65px;
}

.ultla-single .share-wrap {
    /*
    padding-top: 10px;
    padding-bottom: 90px;
    */
}

.container.container-p28 {
    padding-left: 28px;
    padding-right: 28px;
}


.ultla-tab-wrap p.lead {
    font-size: var(--font-size-lg);
    line-height: 1.75;
    margin-top: -9px;
    margin-bottom: 105px;
}

.ultla-tab-wrap + .ultla-wrap .ultla-page.ultla-program {
    padding-top: 63px;
    color: var(--white);
}

.ultla-blue-500 .ultla-tab a.active {
    background: var(--ultla-blue-500);
    color: var(--white);
}

.ultla-blue-500 .article-actions .pagination a {
    --shadow-color: var(--ultla-blue-500);
}

.ultla-article-header .article-title.article-title-lg {
    font-size: 25px;
}


@media (max-width: 768px) {
    .ultla-page.ultla-single p.lead {
        margin-bottom: 55px;
    }

    .ultla-single p {
        margin-bottom: 45px;
    }

    .ultla-white .eyes {
        font-size: 22px;
    }

    .ultla-tab-wrap p.lead {
        margin-bottom: 50px;
    }

    .ultla-tab-wrap + .ultla-wrap .ultla-page.ultla-program {
        padding-top: 10px;
    }

    .ultla-article-header .article-title.article-title-lg {
        font-size: 16px;
    }
}


.ultla-navigator-header {
    height: 250px;
    padding-top: 150px;
    padding-bottom: 150px;
}

.ultla-navigator-header .eyes {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    background: var(--white);
    padding: 18px 16px;
}

.ultla-navigator-hero{
    background-image: url(/img/assets/nagoya-navigator-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* height: 750px; */
    padding-top: calc(100vw * 0.075);
    padding-bottom: calc(100vw * 0.075);
    /* height: calc(100vw * 0.235); */
}

.ultla-navigator-hero .lead{
    background: var(--white);
    width: 50%;
    margin: 0 auto;
    padding: 20px 50px;
}

.ultla-navigator-wrap {
    padding-top: 0;
    background: var(--white);
}

.ultla-page.ultla-navigator{
    padding-top: 50px;
}

.ultla-page.ultla-navigator p.lead {
    color: var(--text);
    margin-top: 4px;
    margin-bottom: 65px;
}

.ultla-page.ultla-navigator h2 {
    margin-top: 59px;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 34px;
}

.grid.grid-2col {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 39px;
}

.ultla-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--text);
    height: 250px;

    color: var(--text);
    transition: 0.2s;
}

a.ultla-partner:hover {
    opacity: 0.7;
}

span.ultla-partner-name {
    font-size: var(--font-size-md);
}

img.ultla-partner-img {
    width: 230px;
    height: 105px;
    max-width: 60%;
    min-height: 105px;
    object-fit: contain;
    object-position: center;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .grid.grid-2col {
        grid-gap: 7px;
    }

    .ultla-navigator-wrap .grid.grid-2col {
        padding-left: 40px;
        padding-right: 40px;
    }

    .ultla-navigator-header .eyes {
        padding: 10px 9px;
        margin-top: -3px;
    }

    .ultla-navigator-header {
        padding-top: 20px;
        background-size: 100%;
        height: calc(100vw * 0.5933);
    }

    body.ultla-white.ultla-navigator-body {
        padding-top: 75px;
    }

    .ultla-page.ultla-navigator p.lead {
        margin-top: 25px;
        margin-bottom: 35px;
    }

    .ultla-page.ultla-navigator h2 {
        margin-top: 38px;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .grid.grid-2col {
        grid-template-columns: 1fr;
    }

    .ultla-partner {
        height: 145px;
    }

    img.ultla-partner-img {
        width: 172px;
        height: 60px;
        margin-bottom: 12px;
    }
    
    .ultla-navigator-hero .lead{
        width: 70%;
        padding: 20px 30px;
    }
}

@media (max-width: 360px) {
    .ultla-navigator-header .eyes {
        font-size: 17px;
    }

    .ultla-navigator-header .eyes:before, .ultla-navigator-header .eyes:after {
        width: 12px;
        height: 13px;
    }

    .ultla-navigator-hero .lead{
        width: 80%;
        padding: 7px 15px;
    }
}


.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    z-index: 450;
}

body.modal-show {
    overflow: hidden;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    background: rgba(255,255,255,0.8);
    cursor: pointer;
    z-index: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}

.modal.modal-show {
    opacity: 1;
    pointer-events: auto;
}

.modal.modal-show .modal-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background-image: linear-gradient(-43deg, rgba(var(--ultla-red-rgb),0.4), rgba(var(--ultla-blue-rgb),0.4), rgba(var(--ultla-green-rgb),0.4));
    padding: 50px;
    margin-top: 100px;
    margin-bottom: 100px;
    z-index: 700;
    transition: 0.2s;
    transform: scale(0.5);
}

.modal.modal-show .modal-container {
    transform: scale(1);
}

.modal-content {
    padding: 43px 50px;
    --modal-border-width: 3px;
    border: var(--modal-border-width) solid var(--text);
    position: relative;
}

a.modal-x {
    position: absolute;
    top: -10px;
    color: var(--text);
    transition: 0.2s;
    right: 9px;
    font-size: 110px;
    line-height: 1;
}

a.modal-x:hover {
    transform: scale(1.05);
}

.modal-header {
    display: grid;
    --face-size: 300px;
    --face-size: clamp(100px, 20vw, 300px);
    grid-template-columns: var(--face-size) 1fr;
    grid-gap: 32px;
    margin-bottom: 45px;
}

img.navigator-modal-face {
    width: var(--face-size);
    height: var(--face-size);
    object-fit: cover;
    border-radius: 50%;
    border: var(--modal-border-width) solid var(--text);
}

.navigator-modal-detail {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    list-style-type: none;
    justify-content: center;
}

.navigator-modal-detail li {
    border-bottom: var(--modal-border-width) solid var(--text);
    font-size: var(--font-size-lg);
    padding: 25px 4px;
}

.navigator-modal-detail li:last-child {
    border-bottom: 0;
}

.modal-body {
    margin-bottom: 59px;
    margin-top: 45px;
    font-size: var(--font-size-md);
    line-height: 1.75;
}

.modal-footer {
    border-top: var(--modal-border-width) solid var(--text);
    padding-top: 58px;
}

.modal-footer h3 {
    margin-top: 0;
    font-size: 25px;
    margin-bottom: 37px;
}

.modal-footer .grid.grid-3col {
    grid-gap: 25px;
}

@media (max-width: 768px) {
    .modal-container {
        margin: 0;
        padding: 25px 28px;
        max-width: 100%;
    }

    .modal-content {
        padding: 44px 20px 24px;
        --modal-border-width: 2px;
    }

    a.modal-x {
        font-size: 56px;
        top: -5px;
        right: 1px;
    }

    .modal-header {
        grid-template-columns: 1fr;
        margin-bottom: 20px;
        grid-gap: 9px;
        --face-size: 180px;
        --face-size: clamp(100px, 65vw, 180px);
        place-items: center;
    }

    .navigator-modal-detail li {
        padding: 14px 2px;
    }

    .modal-body {
        margin-top: 20px;
        margin-bottom: 32px;
    }

    .modal-footer {
        padding-top: 31px;
    }

    .modal-footer h3 {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .modal-footer .grid.grid-3col {
        grid-gap: 12px;
    }

    .modal-backdrop {
        top: -250px;
    }
}

.ultla-qa-wrap {
    margin-top: 50px;
    margin-bottom: 5px;
}


dl {
    margin: 0;
}

.ultla-qa-wrap dt {
    padding: 42px 115px 42px 55px;
    font-size: 24px;
    background: var(--white);
    position: relative;
    line-height: 1.75;
    margin-top: 29px;
    cursor: pointer;
}

.ultla-qa-wrap dd {
    padding: 41px 55px;
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: 1.75;
    background: var(--ultla-yellow);
    display: none;
}

.ultla-qa-wrap dl {
    margin-bottom: 103px;
}

.ultla-qa-wrap .ultla-button {
    margin: 0 auto;
}

.ultla-qa-wrap dt:after {
    content: "\e9c7";
    font-family: "Phosphor";
    position: absolute;
    right: 32px;
    font-size: 70px;
    line-height: 1;
    top: 50%;
    transform: translate(0,-50%);
    transition: 0.2s;
}

.ultla-qa-wrap dt.active:after {
    transform: translate(0,-50%) rotateX(180deg);
}

@media (max-width: 768px) {
    .ultla-qa-wrap dt {
        font-size: 15px;
        padding: 21px 68px 21px 28px;
        margin-top: 29px;
    }

    .ultla-qa-wrap dd {
        padding: 21px 28px;
    }

    .ultla-qa-wrap dt:after {
        font-size: 43px;
        right: 21px;
    }

    .ultla-qa-wrap dl {
        margin-bottom: 50px;
    }
}

.system-message {
    margin-top: 0;
    font-size: var(--font-size-lg);
    text-align: center;
    margin-bottom: 10vh;
    background: var(--white);
    color: var(--text);
    font-weight: bold;
    border: 2px dashed var(--text);
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 40px;
    line-height: 1.7;
}

.ultla-button + .ultla-button {
    margin-top: 20px;
}

.modal-body h4 {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: -9px;
    margin-top: 50px;
}

a.ultla-button.ultla-footer-share-button {
    margin: 50px auto 0;
    box-shadow: var(--btn-sdw-dis) var(--btn-sdw-dis) 0 var(--text) !important;
}



.message {
    cursor: pointer;
    position: fixed;
    opacity: 0.9;
    background: rgb(14 63 189 / 29%);
    color: var(--space-logo-color);
    border: 2px solid rgba(255,255,255,0.1) !important;
    font-weight: bold;
    padding: 12px 52px;
    max-width: 80%;
    border-radius: 8px;
    top: 8vh;
    font-size: 16px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    left: 50%;
    transform: translate(-50%,0);
    box-shadow: 0 20px 60px 9px rgb(0 0 0 / 5%), 0 3px 4px -1px rgb(0 0 0 / 10%);
    transition: 0.2s;
    z-index: 99999;
}

.message.hidden {
    display: block;
    opacity: 0;
    pointer-events: none;
}

.message.success {
    background: rgb(25 135 84 / 23%);
    color: var(--green);
}

.message.error {
    background: rgb(220 53 69 / 32%);
    color: var(--red);
}

.comingsoon-wrap {
    min-height: 100vh;
    width: 100vw;
    display: grid;
    place-content: center;
}

.comingsoon-content {
    max-width: 100%;
    width: 400px;
    padding: 0 25px;
    text-align: center;
}

.comingsoon-logo {
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    display: inline-block;
    background: center / contain no-repeat url(/img/assets/nagoya-ultla-logo-thumb.svg);
    height: 150px;
    width: 270px;
    max-width: 80%;
}

.comingsoon-wrap h1 {
    color: #898989;
    letter-spacing: 3px;
    margin: 15px 0 0;
    font-size: clamp(21px, 4.3vw, 31px);
}

.comingsoon-wrap p.lead {
    margin-top: 5px;
    font-size: clamp(12px, 2vw, 14px);
}

/* 仮登録・ログインフォーム */
.register-form,
.password-reset-form{
    color: var(--white);
    width: 80%;
    max-width: 650px;
    margin: 0 auto;
    gap: 5px;
}
.register-form.register-white-form{
    color: var(--text);
}
.register-form a.underlink{
    color: var(--white);
    text-decoration: underline;
}
.register-form .input.text input,
.register-form .input.email input,
.register-form .input.date input,
.register-form .input.password input,
.password-reset-form .input.text input,
.password-reset-form .input.email input,
.password-reset-form .input.date input,
.password-reset-form .input.password input{
    font-size: 1.2rem;
    line-height: 1.6rem;
    width: 100%;
    padding: 10px;
}
.register-form .input.radio > label{
    margin: 5px 5px;
    padding: 0 5px;
    display: block;
    font-size: 1rem;
}
.register-form .input.radio input{
    margin: 0 7px 0 0;
}
.register-form a,
.password-reset-form a{
    color: var(--white);
    text-decoration: underline;
}
.register-form.register-white-form a{
    color: var(--blue);
}
.register-form a:hover,
.password-reset-form a:hover{
    opacity: 0.6;
    text-decoration: none;
}
.register-form .button-box,
.password-reset-form .button-box{
    margin-top: 50px;
    margin-bottom: 25px;
}
.register-form .password-error,
.register-form .privacy-error{
    display: none;
    background-color: red;
    padding: 5px;
    box-shadow: 5px 5px 10px rgba(100,100,100,0.3);
    border-radius: 5px;
}
@media (max-width: 767px) {
    .register-form .nu-controls .nu-row-th,
    .register-form .nu-controls .nu-row-td{
        width: 100%;
    }
    .register-form .nu-row-td .input.email input{
        font-size: 1rem;
    }
}
.register-notice{
    border: 1px solid var(--white);
    padding: 20px 35px;
}

p.input-note{
    font-size: 0.8rem;
    margin: 5px 0;
}
.nu-controls{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
    align-items: stretch;
}
.nu-controls .nu-row-th{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
}

.nu-controls .nu-row-td{
    align-items: center;
    width: 70%;
    padding: 5px 10px;
    box-sizing: border-box;
}
.register-form.register-white-form .nu-controls .nu-row-th{
    border: 1px solid var(--ultla-red);
    background-color: var(--ultla-red);
    color: var(--white);
}
.register-form.register-white-form .nu-controls .nu-row-td{
    border: 1px solid var(--ultla-red);
}
.text-white,
.text-white p{
    color: var(--white);
}
.text-white a{
    color: var(--white);
    text-decoration: underline;
}
.text-white a:hover{
    opacity: 0.6;
    text-decoration: none;
}
.register-form-row-wrap{
    margin-top: 20px;
}
.register-form-flex-row{
    display: flex;
}
.register-form-backbtn,
.register-form-nextbtn{
    width: 50%;
}
.register-form-row-th {
    background-color: var(--ultla-red);
    color: var(--white);
    padding: 5px;
    margin: 10px 0;
}