@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
@font-face {
    font-family: 'digital';
    src:url('../font/851Gkktt_005.ttf') format('truetype'),
        url('../font/851Gkktt_005.ttf') format('truetype');
}

.pcOnly {display: block;}
.spOnly {display: none;}

html {
	font-size: 62.5%;
    width: 100%;
}
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
	font-size: 1.6rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: normal;
	line-height: 175%;
    font-feature-settings: "palt";
    letter-spacing: 0.2rem;
    color: rgb(30,30,30);
    background-color: rgb(255,255,255);
    text-align: justify;
    -webkit-text-size-adjust: 100%;
}
.bg_dot {
    background-image: radial-gradient(rgb(255,200,200) 10%, transparent 20%), radial-gradient(rgb(255,200,200) 10%, transparent 20%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}
.font_digi {
    font-family: 'digital', sans-serif;
}
#container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0 auto;
}
img {
    width: 100%;
    display: block;
    border: none;
}
.honbun {width: 100%;margin: 0 auto;max-width: 800px;}
a {border: none;text-decoration: none;color: rgb(30,30,30);}
.button {
    color: white;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem;
    transform: skew(-15deg) scale(1.0);
    background: rgb(45,165,220);
    transition: transform 0.2s ease, background 0.2s ease;
    &:active {
        transform: skew(0deg) scale(0.95); 
    }
    &:hover {
        background: rgb(80,200,220);
        transform: skew(0deg) scale(1.1);
    }
}
.button p {
    transform: skew(15deg);
    transition: transform .2s ease;
    &:active{
        transform: skew(0deg);
    }
    &:hover {
        transform: skew(0deg) scale(1.0);
    }
}

.max {width: 100%;margin: 0 auto;}
.max_800 {width: 100%;max-width: 800px;margin: 0 auto;}
.max_1000 {
    width: 100%;max-width: 1000px;margin: 0 auto;}
.max_1200 {width: 100%;max-width: 1200px;margin: 0 auto;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.just {text-align: justify;}
.block {display: block;}
.inline {display: inline-block;}
.abso {position: absolute;}
.relat {position: relative;}

.fs08{font-size: 0.8rem;}
.fs10{font-size: 1rem;}
.fs12{font-size: 1.2rem;}
.fs14{font-size: 1.4rem;}
.fs16{font-size: 1.6rem;}
.fs18{font-size: 1.8rem;}
.fs20{font-size: 2rem;}
.fs25{font-size: 2.5rem;}
.fs30{font-size: 3rem;}
.fs35{font-size: 3.5rem;}
.fs40{font-size: 4rem;}
.fs45{font-size: 4.5rem;}
.fs50{font-size: 5rem;}
.fs60{font-size: 6rem;}
.fs80{font-size: 8rem;}
.fs100{font-size: 10rem;}

.lh120{line-height: 120%;}
.lh150{line-height: 150%;}
.lh180{line-height: 180%;}
.lh200{line-height: 200%;}

.bold {font-weight: bold;}
.normal {font-weight: 300;}
.lighter {font-weight: lighter;}
.jikan05 {letter-spacing: 0.5rem;}
.jikan07 {letter-spacing: 0.7rem;}
.jikan10 {letter-spacing: 1rem;}

.w10{width: 10%;}
.w20{width: 20%;}
.w25{width: 25%;}
.w30{width: 30%;}
.w40{width: 40%;}
.w48{width: 48%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w80{width: 80%;}
.w90{width: 90%;}
.w95{width: 95%;}
.w100{width: 100%;}
.w10_30 {width: 10%;}
.w22_48{width: 22%;}
.w22_100{width: 22%;}
.w25_100{width: 25%;}
.w30_100{width: 30%;}
.w40_100{width: 40%;}
.w48_100{width: 48%;}
.w50_100{width: 50%;}
.w70_100{width: 70%;}
.w80_100{width: 80%;}
.w90_100{width: 90%;}
.w100_60,.w100_90{width: 100%;}
.box {box-sizing: border-box;}

.mauto {margin-left: auto;margin-right: auto;}
.mt05{margin-top: 0.5rem;}
.mt10{margin-top: 1rem;}
.mt15{margin-top: 1.5rem;}
.mt20{margin-top: 2rem;}
.mt30{margin-top: 3rem;}
.mt40{margin-top: 4rem;}
.mt50{margin-top: 5rem;}
.mt60{margin-top: 6rem;}
.mt80{margin-top: 8rem;}
.mt100{margin-top: 10rem;}
.mt150{margin-top: 15rem;}
.mr05{margin-right: 0.5rem;}
.mr10{margin-right: 1rem;}
.mr20{margin-right: 2rem;}
.mr50{margin-right: 5rem;}
.ml05{margin-left: 0.5rem;}
.ml10{margin-left: 1rem;}
.ml20{margin-left: 2rem;}

.pd05{padding: 0.5rem;}
.pd10{padding: 1rem;}
.pd20{padding: 2rem;}
.pd30{padding: 3rem;}
.pd50{padding: 5rem;}
.pt05{padding-top: 0.5rem;}
.pt10{padding-top: 1rem;}
.pt20{padding-top: 2rem;}
.pt30{padding-top: 3rem;}
.pt40{padding-top: 4rem;}
.pt50{padding-top: 5rem;}
.pt80{padding-top: 8rem;}
.pt100{padding-top: 10rem;}
.pt150{padding-top: 15rem;}
.pb05{padding-bottom: 0.5rem;}
.pb10{padding-bottom: 1rem;}
.pb20{padding-bottom: 2rem;}
.pb30{padding-bottom: 3rem;}
.pb50{padding-bottom: 5rem;}
.pb80{padding-bottom: 8rem;}
.pb100{padding-bottom: 10rem;}
.pl05{padding-left: 0.5rem;}
.pl10{padding-left: 1rem;}
.pl15{padding-left: 1.5rem;}
.pl20{padding-left: 2rem;}
.pl50{padding-left: 5rem;}
.pr05{padding-right: 0.5rem;}
.pr10{padding-right: 1rem;}
.pr15{padding-right: 1.5rem;}
.pr20{padding-right: 2rem;}
.ps10{padding-left: 1rem;padding-right: 1rem;}
.ps20{padding-left: 2rem;padding-right: 2rem;}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
}
.fl_nowrap {flex-wrap: nowrap;}
.fl_center {align-items: center;}
.fl_cont_center {justify-content: center;}
.fl_left {justify-content: flex-start;}
.fl_max {justify-content: space-between;}
.fl_naka {justify-content:space-around;}
.fl01 {flex: 1;}
.gap05{gap: 0.5rem;}
.gap10{gap: 1rem;}
.gap15{gap: 1.5rem;}
.gap20{gap: 2rem;}
.gap30{gap: 3rem;}

.bk {color: rgb(30,30,30);}
.bk_mond {color: rgb(20,20,20);}
.wh {color: rgb(255,255,255);}
.red {color: rgb(220,60,40);}
.blue {color: rgb(30,60,130);}
.orange {color: rgb(240,100,0);}
.yellow {color: rgb(250,200,70);}

.bg_bk {background-color: rgb(30,30,30);}
.bg_wh {background-color: rgb(255,255,255);}
.bg_wh80 {background-color: rgba(255,255,255,.8);}
.bg_red {background-color: rgb(220,60,40);}
.bg_pink {background-color: rgb(240, 115, 175);}
.bg_usupink {background-color: rgb(255, 225, 255);}
.bg_blue {background-color: rgb(30,60,130);}
.bg_mizu {background-color: rgb(70, 180, 240);}
.bg_usmizu {background-color: rgb(220,240,250);}
.bg_yellow {background-color: rgb(250,200,70);}
.bg_gray {background-color: rgb(220,220,220);}
.bg_gray_more {background-color: rgb(130,130,130);}
.bg_gra_pink {
    background: linear-gradient(0deg, rgb(240,90,90), rgb(240,90,160));
    background-size: 200% 200%;
    animation: gra-move 1s linear infinite;
}
@keyframes gra-move {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.kage {filter: drop-shadow(2px 2px 2px rgba(60,60,60,.6));}
.kage_box {box-shadow: 3px 3px 6px rgba(60,60,60,0.4);}

.maru {border-radius: 10px;}
.en {border-radius: 100px;}
.waku {border: 1px solid rgb(60,60,60);box-sizing: border-box;}
.waku_blue_20 {border: 2px solid rgb(30,60,130);box-sizing: border-box;}
.waku_wh {border: 1px solid rgb(255,255,255);box-sizing: border-box;}
hr {border: 0px; border-bottom: 1px solid rgb(100,100,100);}
.kasen {border-bottom: 2px solid rgb(60,60,60);}
.kasen_blue {border-bottom: 5px solid rgb(30,60,130);}
.kasen_yellow {border-bottom: 5px solid rgb(220,220,80);}
.sen_l {border-left: 8px solid rgb(25,40,135);padding-left: 1rem;}

video {width: 100%;}
iframe {aspect-ratio: 16/9;width: 100%;height: 100%;}

table {width: 100%;border: solid 1.5px rgb(50,50,50);}
td {padding: 0.5rem 1rem; border: solid 1px rgb(50,50,50);vertical-align: middle;}

@media screen and (max-width: 860px) {
    .pcOnly {display: none;}
    .spOnly {display: block;}
    .spCenter {text-align: center;}
    .spmr0 {margin-right: 0;}
    .spmauto {margin: auto;}
    .fl_spNo {display: block;}
    html {font-size: 60%;}
    #container {width: 100%;overflow: hidden;}
    .honbun {width: 90%;}
    .max_800, .max_1000, .max_1200{width: 95%;}
    .w10_30 {width: 30%;}
    .w22_48{width: 48%;}
    .w22_100,.w25_100,.w30_100,.w40_100,.w48_100,.w50_100,.w70_100,.w80_100,.w90_100{width: 100%;}
    .w100_60{width: 60%;}
    .w100_90{width: 90%;}
    .pNo{padding: 0px;}
    .spmt10 {margin-top: 1rem;}
    .spmt20 {margin-top: 2rem;}
    .spmt40 {margin-top: 4rem;}
}

/*---------------------------------------*/

/*　ヘッダー　*/
header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    color: rgb(255,255,255);
}

/* Hamburger menu styles */
#hamburger-menu {
    display: none;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    width: 3rem;
    height: 3rem;
    right: 3rem;
    top: 5rem;
    bottom: 0;
    margin: auto;
}
.bar {
    width: 3rem;
    height: 3px;
    background-color: rgb(60,60,60);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}
#hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
}
#hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}
@media screen and (max-width: 860px) {
    #hamburger-menu {
        display: block;
    }
    #hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }
    #hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    #hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

.global_menu {
    position: fixed;
    visibility: hidden;
    width: 75%;
    height: 100%;
    top: 0;
    right: 0;
    margin: auto;
    padding: 0;
    overflow-y: scroll;
    text-align: center;
    opacity: 0;
    z-index: 90;
    transform: translateX(100%);
    transition: all 0.3s;
    background: rgba(255,255,255,.3);
}
#menu_back {
    position: fixed;
    width: 85%;
    height: 100vh;
    top: 0;
    right: -10%;
    margin: auto;
    padding: 0;
    background: linear-gradient(0deg, rgb(240,90,90), rgb(240,90,160));
    opacity: 1;
    transition: all 0.2s;
    z-index: 70;
    transform: translate(-1.2rem,-100%);
    transition-delay: 0.2s;
}
#hamburger-menu.active ~ .global_menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(0%);
    transition-delay: 0.2s;
}
#hamburger-menu.active ~ #menu_back {
    transform: translate(-1.2rem,0);
    transition-delay: 0s;
}
.menu_box {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 65%;
}
.menu_logo {
    width: 60%;
    margin: auto;
}
#hamburger-menu.active ~ .global_menu {
    visibility: visible;
    opacity: 1;
}
.menu_box li {list-style: none;}
.menu {
    width: 90%;
    margin: 0 auto;
    border-bottom: solid 1px rgb(30,30,30);
}
.menu a {
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    padding: 2.5rem 0;
    transition: transform .2s ease;
}
.menu a:hover {
    transform: scale(110%);
}
.menu_name {
    transition: background .5s ease;
}
.menu_name:hover {
    background: rgba(240,90,160,.5);
}

@media screen and (min-width: 860px) {
    .menu_button {
        display: none;
    }
    .global_menu {
        top: 5rem;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 1000px;
        height: auto;
        visibility: visible;
        overflow-y: visible;
        opacity: 1;
        transform: translateX(0);
    }
    .menu_box {
        width: 100%;
        max-width: 1000px;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(2px 2px 2px rgba(60,60,60,.6));
    }

    .menu_logo {
        margin-top: -1.5rem;
        margin-right: 3rem;
        min-width: 200px;
    }
    .menu {
        width: 100%;
        margin: 0 auto;
        border-bottom: none;
    }
    .menu a {
        width: 90%;
        padding: 1rem;
        box-sizing: border-box;
        background: linear-gradient(45deg, rgb(240,110,110), rgb(240,60,180));
        background-size: 300% 200%;
        animation: gra-move 1s linear infinite;
        border-radius: 30px;
    }
    .menu_name:hover {
        background: none;
    }
    .menu_name span {
        color: rgb(255,255,255);
        font-weight: 400;
        font-size: 1.6rem;
    }
    .menu:not(:last-child) {
        margin-bottom: 0;
    }
}
/*　ヘッダーここまで　*/


/*　フッター　*/
#footer {
    background-color: rgb(50,50,50);
    color: rgb(255,255,255);
    width: 100%;
}
#footer a {
    color: rgb(255,255,255);
    padding: 1rem;
    text-align: center;
    border-radius: 10px;
}
#footer a:hover {
    background-color: rgb(100,100,100);
    transition: all .2s ease;
}

#footer_logo {
    width: 30%;
    max-width: 400px;
}
@media screen and (max-width: 860px) {
    #footer {
        padding-top: 3rem;
        text-align: center;
    }
    #footer_logo {
        width: 80%;
        margin: auto;
    }
    #footer a:hover {
        background: none;
    }
}
/*　フッターここまで　*/


/*　トップ内コンテンツ　*/
#top {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 800px;
}
#top_movie {
    position: absolute;
    width: 100%;
    height: 70vh;
    min-height: 800px;
    z-index: 1;
    overflow: hidden;
}
#logo_top {
    position: absolute;
    z-index: 50;
    width: 90%;
    max-width: 1000px;
    bottom: 6rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#enako {
    position: absolute;
    z-index: 10;
    height: 100vh;
    min-height: 900px;
    top: 5rem;
    right: 0;
    left: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-content: center;
}
#enako img {
    width: auto;
    height: 140%;
}
#top_movie video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media screen and (max-width: 860px) {
    #enako {
        top: 0;
        right: -15rem;
    }
    #enako img {height: 100%;}
}

/*　コンテンツ共通　*/
.cont_title {
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center;
    line-height: 120%;
}
.text_logo {
    display: inline-block;
    vertical-align: middle;
}
.content_box {
    width: 100%;
    max-width: 800px;
    padding: 3rem 2rem;
    margin: 5rem auto;
    box-sizing: border-box;
    border: solid 2px rgb(30,30,30);
    border-radius: 20px;
    box-shadow: 6px 6px rgb(30,30,30);
}
@media screen and (max-width: 860px) {
    .content_box {
        width: 95%;
    }
}

/*　ETHレート　*/
#eth_rate {
    width: 100%;
}
#currency-converter-570219 {
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 600px !important;
}

/*　トップお知らせ　*/
#news {
    margin: 0 auto;
}
.news_content {
    margin: 2rem auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.news_content a {
    width: 49%;
    text-decoration: none;
}
.news_title {
    line-height: 120%;
}
.news_time {font-size: 1.2rem;}
.news_naka {
    border: solid 2px rgb(240,90,90);
    border-radius: 10px;
    padding: 1rem 2rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
}
.news_naka:hover {
    background: rgb(240,90,160);
}
@media screen and (max-width: 860px) {
    .news_content a {
        width: 100%;
    }
}

/*　お知らせ一覧　*/
#news_all {
    max-width: 800px;
    margin: 3rem auto;
}
.news_box {
    border: 1px solid rgb(240,90,160);
    border-radius: 20px;
    padding: 1rem 2rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.pager {
    margin: 3em auto;
    text-align: center;
}
.pager li {
    display: inline;
    margin: 0 0.5rem;
    font-size: 1.5rem;
}
.pager li span {
    display: inline-block;
    vertical-align: middle;
    padding: 0.5rem 1.5rem;
    color: rgb(255,255,255);
    background: rgb(240,90,160);
    border-radius: 5px;
}
.pager li a {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    padding: 0.5rem 1.5rem;
    color: rgb(30,30,30);
    border-radius: 5px;
    transition: background 0.5s ease;
}
.pager li a:hover {
    background: rgb(240,160,220);
    color: rgb(255,255,255);
}

/*　サービス概要　*/
.about_city_box {
    margin: 20rem auto 0;
}
.about_city {
    width: 60%;
    max-width: 600px;
    position: absolute;
    bottom: 3rem;
    right: 0;
    z-index: -10;
}
@media screen and (max-width: 860px) {
    .about_city_box {
        margin: 5rem auto 0;
    }
    .about_city {
        width: 100%;
        position: relative;
        top: -8rem;
    }
}

/*　連携サービス　*/
.service_naka {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.service_naka div {
    width: 70%;
}
.service_naka div:first-child {
    width: 30%;
    margin-right: 2rem;
}
@media screen and (max-width: 860px) {
    .service_naka {
        display: block;
    }
    .service_naka div {
        width: 100%;
    }
    .service_naka div:first-child {
        width: 60%;
        margin: 0 auto 2rem;
    }
}

/*　使い方　*/
.howto_coin {
    position: absolute;
    width: 40%;
    right: 0;
}

/*　記事一覧　*/
#article_all {
    max-width: 800px;
    margin: 3rem auto;
}
.article_box {
    border: 1px solid rgb(240,90,160);
    border-radius: 20px;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    overflow: hidden;
    cursor: pointer;
    background-color: rgb(255,255,255);
    transition: background-color 0.6s ease;
}
.article_all_sum {
    width: 25%;
    background-size: 100%;
    background-position: center;
    transition: background-size 0.3s ease;
}
.article_all_box {
    width: 75%;
    padding: 1rem 2rem;
}
.article_box:hover {
    background-color: rgb(250, 220, 245);
}
.article_box:hover .article_all_sum {
    background-size: 120%;
}

/*　記事本文　*/
#article_detail_title {
    line-height: 140%;
}
#article_detail_content img {
    width: 100%;
    height: auto;
    margin: 1rem auto;
}

/*　よくある質問　*/
.faq {
    position: relative;
    border: solid 2px rgb(240,90,90);
    border-radius: 10px;
    margin-bottom: 1.5rem;
}
.question {
    cursor: pointer;
    font-weight: bold;
    font-size: 2rem;
    padding: 1rem 2rem;
    box-sizing: border-box;
}
.question div {width: 95%;}
.answer {
    padding: 0 2rem;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s, padding 0.6s;
}
.question div:before,.answer_a:before {
    position: relative;
    top: 0.2rem;
    font-size: 3rem;
    font-weight: bold;
    color: rgb(240,90,90);
    margin-right: 0.5rem;
}
.question div:before {content: "Q";}
.answer_a:before {content: "A";}
.answer.active {
    max-height: 40rem;
    padding: 1rem 2rem;
}
.question:after,.question:before {
	content: "";
	position: absolute;
	right: 3rem;
	top: 2rem;
    margin: auto;
	width: 2px;
	height: 1.5rem;
	background-color: rgb(240,90,90);
	transition: all 0.6s;
}
.answer hr {
    border: none;
    border-top: dotted 4px rgb(240,90,90);
    margin: -0.5rem auto 0.5rem;
}
.question:after {
	transform: rotate(90deg);
}
.question.active:before {
    transform: rotate(-90deg);
}

/*　利用規約　*/
.kiyaku {
    width: 100%;
    max-width: 800px;
    margin: 4rem auto;
}
.kiyaku p:first-child {
    font-size: 2rem;
    font-weight: bold;
    border-bottom: solid 1px rgb(30,30,30);
}
.kiyaku p:nth-child(2){
    margin-top: 0.5rem;
}
.kiyaku_list {
    list-style-type: none;
    list-style-position: inside;
    padding-left: 0;
    margin-left: 0;
}
.kiyaku_list li {
    margin-top: 1rem;
    position: relative;
    padding-left: 2rem;
    line-height: 150%;
}
.kiyaku_list li::before {
    content: "■";
    position: absolute;
    left: 0;
}
@media screen and (max-width: 860px) {
    .kiyaku {
        width: 95%;
    }
}


/*move*/
.slid {
    transform:translateX(-100vw);
    opacity:0;
    transition-duration:1.2s;
}
.slid.effect {
    transform:translateX(0);
    opacity:1;
}
.slid_r {
    transform:translateX(100vw);
    opacity:0;
    transition-duration:1.2s;
}
.slid_r.effect {
    transform:translateX(0);
    opacity:1;
}
.up {
    transform:translateY(50px);
    opacity:0;
    transition-duration:1s;
}
.up.effect {
    transform:translateY(0);
    opacity:1;
}
.delay03 {
    transition-delay: 0.3s;
    animation-delay: 0.3s;
}
.delay05 {
    transition-delay: 0.5s;
    animation-delay: 0.5s;
}

.hover_up {
}
.hover_up:hover {
    transform:translateY(-10px);
    transition-duration:0.3s;
}