@charset "UTF-8";

/* general 
-------------------------------------------- */
:root {
    --color-main: #9172d6; /*アイコンに使用した色*/
    --color-sub: #ba47d3;
    --color-sub-pale: #ffecf4;
	--color-purple: #b748d1; /*紫テキスト色*/
    --fs-small: 14px;
    --fs-medium: 20px;
    --fs-large: 24px;
    --ff-gothic: "Hiragino Sans","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zMjQiIGhlaWdodD0iMTMuMTIzIiB2aWV3Qm94PSIwIDAgMTIuMzI0IDEzLjEyMyI+PHBhdGggZD0iTTAsMS42NjYsMS4wNTQsMGwxMS4yNyw2LjU2MUwxLjA1NCwxMy4xMjMuMDE3LDExLjQzOSw4LjY1Miw2LjU3OFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
    --g-rgb1: 189,144,227; /*グラデーション左色*/
    --g-rgb2: 213,124,221; /*グラデーション右色*/
    --gradation: linear-gradient(90deg, rgba(189,144,227,1) 0%, rgba(213,124,221,1) 100%);
    --gradation2: linear-gradient(90deg, #128ff7 0%, #ff00c8 100%);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:focus-visible {
  outline: 0;
}

body { font-family: var(--ff-gothic); line-height: 1.75;color: #000}
h1, h2, h3, h4, h5, h6 {font-family: var(--ff-gothic);letter-spacing: 0.05em;font-feature-settings: 'palt';}
h1, h2, h3, h4, h5, h6, p, a, li, figcaption, dt, dd, th, td, input, textarea, label {
    color: #000
}
h1, h2, h3, h4, h5, h6 {font-weight: 700}
ol, ul {
    list-style: none;
}
img {max-width: 100%}
a img {transition: .3s;}
a:hover {color: inherit}
#wrap {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
@media screen and (min-width: 640px) {
    a[href^="tel"] {pointer-events: none}
}
/* parts 
-------------------------------------------- */
.fs-small {font-size: var(--fs-small)}
.fs-medium {font-size: 1.35em}
.fs-large {font-size: 1.75em}
.fs-x-large {font-size: 2em}
.fs-larger {font-size: 125%}
.clr-sub {color: var(--color-sub)}
.clr-purple {color: var(--color-purple)}
.link-txt {text-decoration: underline}
.chevron-down::after {
    content: '';
    background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.414%22%20height%3D%228.121%22%20viewBox%3D%220%200%2013.414%208.121%22%3E%3Cpolyline%20points%3D%22.707%20.707%206.707%206.707%2012.707%20.707%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E') no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    display: inline-block;
    width: 1em;
    height: 8px;
    margin-left: 5px;
    vertical-align: middle;
}
ul.fineindent {padding-left: 15px}
.fineindent li{text-indent: -1em}
p.fineindent {text-indent: -1em; margin-left: 1em}
.bg-gradation-pale {
    background: rgb(255,236,244);
    background: linear-gradient(90deg, rgba(255,236,244,1) 0%, rgba(246,229,244,1) 100%);
}
.bg-gradation-pale2 {
    background: rgb(255,167,213);
	background: -moz-linear-gradient(90deg, rgba(255,167,213,1) 0%, rgba(255,154,157,1) 50%, rgba(255,172,114,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,167,213,1) 0%, rgba(255,154,157,1) 50%, rgba(255,172,114,1) 100%);
	background: linear-gradient(90deg, rgba(255,167,213,1) 0%, rgba(255,154,157,1) 50%, rgba(255,172,114,1) 100%);
}
.bg-gray {background-color: #efefef}
.bg-pink {background-color: var(--color-sub-pale)}
[class^="btn"] a {
    min-width: 15em;
    max-width: 460px;
    margin-inline: auto;
    line-height: 1.25;
    border-radius: 10px;
    color: #fff;
    display: block;
    font-weight: 800;
    padding: 15px 40px;
    background: rgb(169,96,238);
    background: linear-gradient(90deg, rgba(169,96,238,1) 0%, rgba(255,100,117,1) 50%, rgba(247,152,67,1) 100%);
    text-align: center;
    transition: .3s;
    position: relative;
}
.btn-solid a {
    background: #c986e0;
}
.btn-solid2 a {
    background: #985edf;
}
[class^="btn"] a:hover,
a img:hover {text-decoration: none;transform: translateY(-2px);}
[class^="btn"] a:after {
    content: var(--chevron-right);
    margin-left: 5px;
    position: absolute;
    right: 20px;
    top: 50%;
	transform: translateY(-50%);
}
@media screen and (max-width: 375px) {
    [class^="btn"] a{padding: 20px}
}
/* header 
-------------------------------------------- */
.header {
    background: #fff;
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.header.uk-sticky-fixed.uk-active {
    box-shadow: 0 0 10px rgba(0,0,0,.2)
}
.header__logo {
    padding: 20px 10px 20px
}
.header__nav {
    padding-right: 22px
}
.header__nav .header__nav-inner {
    display: flex
}
.header__nav .header__nav-inner > li {
    padding: 0 10px
}
.header__container {
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center
}
@media screen and (max-width: 640px) {
    .header__container {
        display: block;
        display: none
    }
    .header__logo {padding: 10px 0 10px 10px}
    .header__nav {display: block;overflow: scroll;}
    .header__nav .header__nav-inner {display: block; width: max-content;display: block;padding-bottom: 10px}
    .header__nav .header__nav-inner > li {display: inline-block; width: auto}
}

/* main 
-------------------------------------------- */
main {
    display: block;
}
section {
    margin: 0;
    padding: 80px 0
}
[class*="sec__inner"] {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto
}
.sec__inner-small {max-width: 960px}
.sec__inner-x-small {max-width: 840px}
.sec__inner-xx-small {max-width: 640px}
@media screen and (max-width: 960px) {
    section {padding: 60px 0}
    [class*="sec__inner"] { padding-inline: 10px}
    .sec__inner,.sec__inner-small,.sec__inner-x-small {max-width: 100%}
}
#kv__area {
	padding: 0;
    margin: 0 auto;
    text-align: center;
    background-image: url(../img/visadebit_kv_bg_2302.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#kv__area .kv__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 50px 0 20px;
    position: relative
}
#kv__area .kv__bottom {
	background: rgba(0,0,0,.2);
}
#kv__area .kv__top {position: relative}
.kv__title {
	display: inline-block;
  padding: 8px 10px 12px;
  width: min(880px, 100%);
  background: #fff;
}

@media screen and (min-width: 1200px) {
    #kv__area .kv__badge {
        position: absolute;
        right: 0;
        top: 0;
    }
}
@media screen and (max-width: 1200px) {
    #kv__area .kv__badge {
        margin-bottom: 20px;
    }
}
.kv__top .kv__period {
  margin-top: 20px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}
.kv__top .kv__period .ff_rubik {
  font-size: clamp(1rem, 0.664rem + 1.58vw, 1.85rem);
  font-family: "Rubik", "Hiragino Sans","ヒラギノ角ゴ Pro",sans-serif;
  font-weight: 600;
}
.kv__top .kv__period .ff_rubik .big{ font-size: 180%}
@media screen and (min-width: 640px) {
    .kv__top .kv__period {
        margin-top: 40px;
    }
}
@media screen and (max-width: 640px) {
	#kv__area {background-image: url(../img/visadebit_kv_bg_orange_sp.jpg)}
	#kv__area .kv__container {padding: 30px 0}
	.kv__top {margin: 0 auto}
    .kv__middle {padding: 15px 10px}
	.kv__bottom {
		padding: 10px
	}
	.kv__top .kv__title img {
    max-width: 80%
	}
  .kv__top .kv__period .ff_rubik {
    letter-spacing: -0.0125em
  }
}
.sec__title {
    margin-bottom: 80px;
    text-align: center;
    position: relative;
    font-weight: 800
}
.sec__title:before {
    content: '';
    width: 40px;
    height: 0;
    display: inline-block;
    border-top: 2px solid #000;
    bottom: -40px;
    position: absolute;
    left: calc(50% - 20px);
}

/* 特典
-------------------------------------------- */
.campaign__dsc .uk-border-rounded{
    background: #fff;
	border-radius: 20px;
    height: 100%;
    position: relative;
	overflow: hidden;
    padding: 30px;
}
.campaign__dsc > div {position: relative}
.campaign__dsc > div:nth-child(n+2) {
    margin-top: 60px;
}
.campaign__dsc > div:nth-last-child(n+2)::after {
	content: '';
    background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22b%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232.456mm%22%20height%3D%2213.406mm%22%20viewBox%3D%220%200%2092%2038%22%3E%3Cpath%20d%3D%22M89.571%2C9.852l-37.768%2C26.459c-3.215%2C2.252-8.426%2C2.252-11.641%2C0L2.429%2C9.878C-2.758%2C6.244%2C.912%2C.028%2C8.246%2C.026L83.746%2C0c7.338-.003%2C11.015%2C6.216%2C5.825%2C9.852Z%22%20fill%3D%22%23846fb0%22%2F%3E%3C%2Fsvg%3E') no-repeat;
    background-size: contain;
	left: 50%;
	top: calc(100% + 12px);
	display: inline-block;
	position: absolute;
	width: 92px;
	height: 38px;
    transform: translateX(-50%);
}
@media screen and (max-width:640px) {
    .campaign__dsc > div:nth-last-child(n+2)::after {
    }
}
.campaign__dsc .uk-border-rounded h3 {
    font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
	font-weight: 700;
	padding: 3px;
	margin-bottom: 0
}
.campaign__dsc .uk-border-rounded p {
    margin-block: 0;
}
.campaign__dsc .uk-grid > div:first-child {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 290px;
    margin: auto;
}
.campaign__dsc .uk-grid > div:first-child img:first-child {
    margin-bottom: 10px;
}
.campaign__dsc .uk-grid > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-self: center;
}
.campaign2 {
}
.campaign2 .campaign__dsc .uk-padding-small {padding-bottom: 0}
.outline {
    background-color: #f2f0fc;
}
.outline-tbl.uk-table tr > td:first-child {
    background: linear-gradient(90deg, rgba(var(--g-rgb1),0.3) 0%, rgba(var(--g-rgb2),0.3) 100%);;
    font-weight: 700;
    text-align: center;
    width: 15%
}
.outline-tbl.uk-table tr > td:nth-child(n+2) {
    background: #fff;
}
.outline-tbl.uk-table-divider > :first-child > tr:not(:first-child){border-color:#9582a7}
.outline-tbl.uk-table-divider {border: 1px solid #9582a7}
.outline-tbl .fineindent2 {margin-left: 4em; text-indent: -4em}
.outline-tbl p {margin-bottom: 0}
.outline-tbl p+p {margin-top: .5em}
@media screen and (min-width: 640px) {
    .campaign__dsc > div:not(:last-child) .uk-border-rounded .uk-grid > div:first-child {
    }
	.campaign__dsc .uk-padding-small {padding: 20px 30px}
}
@media screen and (max-width: 960px) and (min-width: 640px){
    .campaign__dsc > div:nth-child(1) .uk-width-2-3 img {
        height: 32px
    }
    .campaign__dsc > div:nth-child(3) .font-rubik .fs-large{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 960px) {
    #kv__area .kv__top {padding-left: 15px; padding-right: 15px;}
    .campaign__dsc .uk-text-lead {font-size: 1.25rem}
}
@media screen and (max-width: 640px) {
	#campaign {padding-top: 50px}
    .outline-tbl.uk-table tr > td:first-child,
    .outline-tbl.uk-table tr > td:nth-child(2){
        display: block;
        width: 100%
    }
}

/* Visaデビットカードとは
-------------------------------------------- */
.about .bg-pink {
    border-radius: 20px;
    padding: 20px 30px;
	background: rgb(255,236,244);
	background: -moz-linear-gradient(135deg, rgba(255,236,244,1) 0%, rgba(246,229,244,1) 100%);
	background: -webkit-linear-gradient(135deg, rgba(255,236,244,1) 0%, rgba(246,229,244,1) 100%);
	background: linear-gradient(135deg, rgba(255,236,244,1) 0%, rgba(246,229,244,1) 100%);
}
.about .uk-icon {line-height: 1}
@media screen and (min-width: 1024px) {
	.ff-palt {font-feature-settings: 'palt'}
}
@media screen and (max-width: 640px) {
    .about .sec__inner-small p,
    .use .sec__title + p{max-width: 90%; margin-left: auto;margin-right: auto}
    .about .bg-pink {
        padding: 20px 10px
    }
    .about .sec__inner-small .bg-pink p {
        max-width: 100%;
        font-feature-settings: 'palt';
    }
}

/* ご利用の流れ
-------------------------------------------- */
.flow {background-color: #faeaf2;margin-top: 140px}
.flow:before {
    content: '';
    display: block;
    width: 100%;
    background-image: url(../img/bg_wave-top_2302-u29.svg);
	background-repeat: no-repeat;
    background-size: cover;
    height: 0;
    position: absolute;
    top: -10vw;
	padding-top: 12%
}
.flow:after {
    content: '';
    display: block;
    width: 100%;
    background-image: url(../img/bg_wave-bottom_2302-u29.svg);
	background-repeat: no-repeat;
    background-size: cover;
    height: 0;
    position: absolute;
    bottom: -9vw;
	padding-top: 10%
}
.flow .flow-step > div {
    position: relative
}
.flow .flow-step > div:not(:last-child):after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border-top: 4px solid var(--color-sub);
    border-right: 4px solid var(--color-sub);
    position: absolute;
    right: -1.25em;
    top: 125px;
    transform: rotate(45deg);
}

@media screen and (min-width: 769px) {
    .for-ipad {display: none}
}
@media screen and (max-width: 766px) {
    .for-ipad {display: none}
}
@media screen and (max-width: 640px) {
	.flow:before {
		top: -20vw;
		padding-top: 20vw;
		background-position: top right;
	}
	.flow:after {
		bottom: -10vw;
		padding-top: 20vw;
		background-position: right bottom;
	}
    .flow .flow-step > div:not(:last-child):after {
        right: calc(50% - 1em);
        top: 97%;
        transform: rotate(135deg);
    }
}

/* どこで使える 
-------------------------------------------- */
.use {
    margin-top: 0;
    padding-top: 45px;
	background-color: #f9f4f7
}
.use .sec__inner {
    background: url(../img/visadebit_bg_woman_2302-u29.jpg) no-repeat;
    background-position: left bottom;
    background-size: contain
}
.use .sec__inner > .sec__inner-small {
  padding-top: 160px;
}
.use__grid > div > div > .img-box {
    width: 75px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center
}
.use__grid > div > div > .img-box + div {font-weight: 700}
@media screen and (min-width: 640px) {
    .use__grid.uk-grid-small {
        row-gap: 10px;
    }
}
@media screen and (max-width: 960px) {
    .use .sec__inner > .sec__inner-small { padding-top: 60px}
    .use__grid > div > div > div:first-child {
        width: 45px;
        width: max(45px, 8vw);
    }
    .use__grid .uk-grid {
        flex-wrap: nowrap;
    }
    .use__grid > div > div > div:nth-child(2) {
        font-size: .8em;
        line-height: 1.5;
        letter-spacing: -0.087em;
        padding-left: min(5px, 5vw);
    }
}
@media screen and (max-width: 640px) {
    .use {
        background: url(../img/bg_woman.jpg) no-repeat;
        background-position: 34% 0;
        background-size: 200%;
        position: relative;
        z-index: -1
    }
    .use:before {
        background-color: rgba(255,255,255, .35);
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: -2
    }
    .use .sec__inner {
        background: none;
    }
    .use__grid {
        margin: auto;
        background: #fff;
        padding: 10px 0;
        border-radius: 10px
    }
}


/* 参加方法
-------------------------------------------- */
.join {background: var(--color-sub-pale);padding: 0 0 15px}
.join .bg-gradation-pale2 {background: #c986e0; color: #fff; font-size: var(--fs-large); padding: 10px 0}
.join .uk-grid > div p {
  margin-bottom: 10px;
  line-height: 1.5;
}
.join [class*="btn"] a .fs-medium {
    font-size: clamp(1rem, 0.85rem + 0.67vw, 1.25rem);
  }
.att-area {border:1px solid #9582a7}
.att-area .uk-list > :nth-child(n+2) {margin-top: 0}
@media screen and (max-width: 960px) and (min-width: 641px){
}
@media screen and (min-width: 640px) {
    .att-area {padding: 30px}
}
@media screen and (max-width: 640px) {
    .join .bg-gradation-pale2 {
        padding-inline: 10px;
        font-size: 1.25rem;
        line-height: 1.5;
    }
}


/* AGENTアプリ紹介 
-------------------------------------------- */
.agent {
    background: url(../img/bg_cow02.png) no-repeat;
    background-position: 110% 50%;
}
.qr-box > div:first-child{
    width: 45%
}
@media screen and (min-width: 640px) {
    .qr-box {max-width: 66%}
}
@media screen and (max-width: 640px) {
    .agent .sec__inner .fs-large {
        font-size: min(6.55vw, 28px);
    }
    .agent .sec__inner {
        padding-inline: 20px;
    }
}
.can_agent_do {
    gap: 30px;
}
.can_agent_do .box {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    padding: 40px 20px;
}
.can_agent_do .box h3 {
    font-size: clamp(1rem, 0.775rem + 1vw, 1.375rem);
    margin: 30px auto 20px;
}
.can_agent_do .box :last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 640px) {
    .can_agent_do {
        gap: 20px;
    }
    .can_agent_do .box {
        padding: 20px 7px;
      display: flex;
    }
    .can_agent_do .box > div:first-child {
        width: 40%;
        text-align: center;
    }
    .can_agent_do .box > div:nth-child(2) {
        text-align: left;
    }
    .can_agent_do .box h3 {
        margin: 0 0 20px;
    }
}

/* おすすめ記事 
-------------------------------------------- */
.recommend .column .title {
    margin: 20px auto 0;
    font-size: clamp(0.875rem, 0.8rem + 0.33vw, 1rem);
    font-weight: 700;
    text-align: justify;
}

/* footer 
-------------------------------------------- */
footer {margin-bottom: 60px;border-top: 1px solid #d3d3d5}
footer .sec__inner {padding-top: 40px; padding-bottom: 40px}
.footer__copyright {font-size: 14px}
.footer__bnr {
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    padding: 20px 10px
}
#float-bnr {
  opacity: 0;
}
#float-bnr.is-show {
    background-size: cover;
    background-color: rgba(255,255,255,.75);
    position: fixed;
    opacity: 1;
    transition: opacity 2s;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    font-size: 18px;
}
#float-bnr.is-show .uk-icon svg {vertical-align: text-top;}
#float-bnr.is-show .uk-icon svg polyline {
  stroke-width: 2;
}
#float-bnr:hover {
  transition: .5s;
  bottom: 0;
}
#float-bnr [class^="btn-"] a{
    padding: 10px 5px;
    font-size: 18px;
  border-radius: 2em;
}
@media screen and (min-width:375px) {
  #float-bnr [class^="btn-"] a {min-width: 18em;}
}
/* #float-bnr .btn-solid a:before {
    content: '';
    background: url(../img/icn_begginer.svg) no-repeat;
    display: inline-block;
    width: 18px;
    height: 23px;
    position: relative;
    margin-right: 5px;
    top: -3px;
    vertical-align: bottom
} */
.totop a {
	background: rgba(152, 94, 223, 0.5);
	display: block;
	position: fixed;
	bottom: 90px;
	right: 20px;
	width: 50px;
	height: 50px;
	border-radius: 100px;
	transition: 0.3s all;
}
.totop a::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg) translateX(-50%);
	position: absolute;
	left: calc(50% - 3px);
	bottom: 34%;
}
@media screen and (max-width: 640px) {
    footer {margin-bottom: 75px}/*  */
    .footer__copyright {font-size: 12px}
    #float-bnr.is-show .btn-solid a {
        vertical-align:text-bottom;
        display: inline-block;
    }
    .footer__bnr {padding: 10px}
    #float-bnr .uk-icon {
        position: absolute;
        display: inline-block;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }
	.totop a {bottom: 135px; right: 10px}/*  */
}
@media screen and (max-width: 375px) {
    .footer__copyright {font-size: 10px}
}


/* ふわふわ */
.fwafwa{
  animation:fwafwa ease-in-out 2s infinite alternate;
  -webkit-animation:fwafwa ease-in-out 2s infinite alternate;
  -moz-animation:fwafwa ease-in-out 2s infinite alternate;
}
.fwafwa2{
  animation:fwafwa2 ease 2s infinite alternate;
  -webkit-animation:fwafwa2 ease 2s infinite alternate;
  -moz-animation:fwafwa2 ease 2s infinite alternate;
}
@keyframes fwafwa{
  0%   { transform:translate(0%, 0%); }
  100% { transform:translate(0%, -10px); }
}
@keyframes fwafwa2{
  0%   { transform:translate(0%, 0%); }
  100% { transform:translate(0%, -8px); }
}
/* モーダル 
-------------------------------------------- */
.ttl-line {
  margin-bottom: 80px;
  text-align: center;
  position: relative;
  font-weight: 800;
}
.ttl-line:before {
  content: '';
  width: 150px;
  height: 3px;
  display: inline-block;
  bottom: -20px;
  position: absolute;
  left: 50%;
  background: var(--gradation2);
  transform: translateX(-50%);
}
.uk-modal-container .modal_grid {
  gap: 20px 60px;
  max-width: 768px;
}
@media screen and (min-width: 640px) {
  .uk-modal-container .modal_grid {
    margin: -80px auto 0;
  }
  .uk-modal-container .modal_grid > div:nth-child(2) {
    margin-top: 80px;
  }
}
#modal-kouza .modal_grid {
    max-width: 840px
}
@media screen and (max-width: 640px) {
  .uk-modal-container .modal_grid {
    flex-wrap: wrap;
    max-width: 100%;
  }
}
.uk-modal-container .app_btn {
  display: flex;
  gap: 20px;
  max-width: 360px;
  margin-inline: auto;
}
@media screen and (min-width: 640px) {
  .uk-modal-container .app_btn {
    flex-wrap: nowrap
  }
}
.uk-modal-container .uk-modal-dialog {
  width: 1000px;
  border: 3px solid #c444d9;
  border-radius: 20px;
    padding-bottom: 0
}
.uk-modal-close-outside {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.uk-modal-dialog p {letter-spacing: 0}
@media screen and (min-width: 640px) {
  .uk-modal-close-outside {
    transform: translate(0,-125%);
  }
  .uk-modal-close-outside span {
    font-weight: 700;
    position: absolute;
    left: -3.5em;
    top: 50%;
  }
}
@media screen and (max-width: 640px) {
    .uk-modal {
        padding: 25px 15px 15px
    }
    .uk-modal-close-outside {
        width: 20px;
        height: 20px
    }
    .uk-modal-container .uk-modal-dialog {
        padding: 20px 10px
    }
    .uk-modal-title.ttl-line {
      font-size: 6vw;
      margin-bottom: 40px
    }
  .uk-modal-close-outside span {
    display: none;
  }
  .uk-modal-close-outside svg {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 2px;
    right: 2px;
  }
  .uk-modal-close-outside svg line {
    stroke-width: 2;
  }
}