@charset "utf-8";

a{
	text-decoration: none;
	transition: .5s all;
}

ul li{
	list-style: none;
}

body{
	font-family:'Noto Sans JP', sans-serif ,"游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	color: #000000;
	text-align: left;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

p,h1,h2,h3,h4,h5,h6,a{
	margin-top: 0;
	margin-bottom: 0;
	font-family: 'Noto Sans JP', sans-serif,"游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

/* =================================================================================-- PCレイアウト */

/* 　共通　header footer  */

.container{
    max-width: 960px;
    margin: 0 auto;
    width:90%;
}

header{
    padding: 10px 0;
}

.header-logo{
    width:90%;
    margin: 0 auto;
}

.header-logo a{
    display: flex;
    max-width:90px;
}

.header-logo img{
    width:100%;
    transition: all 0.3s;
}

.header-logo img:hover{
    opacity: 0.6;
    transition: all 0.3s;
}

footer{
    background-color: #090C54;
    color: #fff;
    padding: 45px 0;
    text-align: center;
}

.footer-list{
    display: flex;
    justify-content: space-between;
}

.footer-list a{
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    transition: all 0.3s;
}

.footer-list a:hover{
    opacity: 0.7;
    transition: all 0.3s;
}

footer img{
    max-width: 180px;
    height: auto;
    margin: 70px 0 15px;
    transition: all 0.3s;
}

footer img:hover{
    opacity: 0.5;
    transition: all 0.3s;
}

.copyright{
    font-size: 10px;
    font-weight: 100;
}

h2{
    font-size: 32px;
    font-weight: 600;
    position: relative;
    z-index: 10;
}

h2::before{
    position: absolute;
    z-index:0;
    display: inline-block;
    font-size: 120px;
    color: #F3F3F3;
    z-index: -5;
    font-weight: 500;
    letter-spacing: 0.02em;
}

h3{
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}

h4{
    font-size: 24px;
    font-weight: 500;
}

/*  ----------------------------------------------------------- コンテンツ  */

/*  fv  */
#fv{
    height: 480px;
    background-image: url(../images/fv-back-blue.jpg);
    background-position: center;
    background-size:cover;
    position: relative;
}

.fv-title{
    position: absolute;
    top:28%;
}

.fv-title p{
    font-size: 26px;
    font-weight: 500;
}

.fv-title h1 img{
    max-width: 420px;
    margin-top: 25px;
}

.apply-button{
    position: absolute;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translate(-50%, 0%);
}

.apply-button p{
    font-size: 20px;
    font-weight:500;
    margin-bottom: 10px;
    letter-spacing: 0.07em;
}

.apply-btn{
    display: inline-block;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    width:400px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:linear-gradient(to right,#4553CF,#7CD4EF);
    position:relative;
    letter-spacing: 0.086em;
    transition: all 0.3s;
    border-radius: 5px;
}

.apply-btn::after{
    content: "";
    display: inline-block;
    position: absolute;
    width:0;
    height:0;
    border-style:solid;
    border-width: 6px 0 6px 20px;
    border-color: transparent transparent transparent #FFFFFF;
    right: 5%;
}

.apply-btn:hover{
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s;
}

.qa-scroll{
    max-width:960px;
    width:90%;
    margin: 30px auto 50px;
    display: flex;
    justify-content: flex-end;
}

.qa-scroll a{
    font-size: 18px;
    color: #3576D9;
    position: absolute;
    font-weight: 500;
}

.qa-scroll a::after{
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 3px #3576D9;
    border-right: solid 3px #3576D9;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: rotate(45deg) translate(0, -50%);
}

.qa-scroll a:hover{
    opacity: 0.6;
    cursor: pointer;
}


/*  ----------------------------------------------------------- サービス紹介*/

#services{
    padding: 110px 0 0;
}

#services h2{
    z-index: 10;
}

#services h2::before{
    content: "SERVICE";
    top: -175%;
    left: 0;
}

/* #services .top{
    margin-top: 110px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap;
} */

#services .top .image{
    max-width: 360px;
}

#services .top .image img{
    width: clamp(290px,37.3vw,360px);
}

.service-title .subtitle{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: -0.04em;
}

.service-title p{
    font-size: 18px;
    margin-top: 20px;
}

.name-logo{
    /* max-width:380px; */
    width: clamp(380px,49.7vw,470px);
}

.icon-wrapper{
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.icon{
    text-align: center;
    /* margin-right: 35px; */
    width: 22%;
}

.icon img{
    max-width: 127px;
    height: auto;
    margin-bottom: 10px;
}

.icon p{
    color: #5B7795;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.65em;
}

.icon p span{
    color: #E8C01F;
    font-size: 30px;
    font-weight:700;
}

.icon p .bold{
    font-size: 17px;
    color: #5B7795;
    font-weight: 700;
}

.icon p .orange-mini{
    color: #E8C01F;
    font-size: 16px;
}

.top-wrapper{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    margin-top: 80px;
    column-gap: 20px;
}

.service-title{
    padding-top: clamp(7px,0.7vw,35px);
}


/*  ----------------------------------------------------------- 決済手段   logo  */

.logo{
    margin-top: 150px;
    background-color: #E7EFF6;
    padding: 70px 0 80px;
    position: relative;
}
    
.logo h3{
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
}

.logo .item-wrapper{
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.logo .item{
    width: 310px;
    background-color: #fff;
    text-align: center;
    padding: 15px;
    margin-right: 1.5%;
    border-radius: 5px;
}

.logo .item:last-child{
    margin-right: 0;
}

.logo .item p{
    font-size: 18px;
    color: #4080E1;
    padding: 5px 0 15px;
    border-bottom: 2px solid #4080E1;
    font-weight: 600;
}

.logo .item img{
    width:100%;
    margin-top: 20px;
    margin-bottom: 5px;
}
    
.card-logo{
    max-width: 200px;
}

.e-money-logo{
    max-width: 255px;
}

.qr-logo{
    max-width:237px;
}

.img_cp{
    display: block;
    margin: 0 auto 80px;
    width: 100%;
}

.btn_below{
    width: 400px;
    margin: 0 auto;
}

/* ----------------------------------------------------------- tance mall  */

.pc-img{
    display: block;
}

.sp-img{
    display: none;
}

.tancemall{
    padding: 70px 0;
}

.tancemall .btn{
    width: 165px;
    height: 30px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    background: linear-gradient(to right,#BBA31D,#EBCD5F);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5px;
    margin-left: auto;
}

.tancemall .btn::after{
    position: absolute;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 12px;
    border-color: transparent transparent transparent #FFFFFF;
    right: 5%;
}

.tancemall .box-left .pc-img{
    width: clamp(400px, 51vw,600px);
}

.tancemall h4{
    text-align: center;
    font-size: clamp(16px, 2.08vw, 20px);
    padding: 0 0 60px;
}

.tancemall p{
    font-size: clamp(16px, 1.85vw, 18px);
    font-weight: 600;
}

.tancemall .small{
    font-size: clamp(14px, 1.82vw,16px);
    font-weight: 400;
    padding-top: clamp(10px, 1.1vw, 30px);
    padding-bottom: clamp(10px, 1.1vw, 30px);
}

.tancemall .tancemall-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 30px;
}

.tancemall .box-right{
    text-align: left;
}

.tancemall h3{
    text-align: left;
    padding-bottom: 5px;
    font-size: clamp(24px, 3.12vw, 30px);
}




/* ----------------------------------------------------------- 導入までの流れ  */

.flow{
    padding-bottom: 75px;
}

.flow-title{
    height: 180px;
    background-image: url(../images/ribbon1.jpg);
    background-size: cover;
    background-position: 50% 74%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.flow-title::before{
    content: '';
    background:rgba(11,25,48,0.7);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.flow-title h3{
    color: #fff;
    position: relative;
}

.flow-item-wrapper{
    display: flex;
    justify-content: space-between;
    margin: 40px 0 0;
}

.flow-item{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* padding-right: 5%; */
    position: relative;
    width: 25%;
}

.flow-item:last-child{
    padding-right: 0;
}

.flow-item .step{
    max-width: 40px;
    transform: translate(-70px, 5px);
}

.flow-item .flow-icon{
    max-width: 125px;
    margin-bottom: 20px;
}

.flow-item .heading{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.flow-item p{
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.flow-item .application-btn{
    margin-top: 25px;
    width:165px;
    height: 30px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    background: linear-gradient(to right,#BBA31D,#EBCD5F);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5px;
}

.flow-item .application-btn::after{
    position: absolute;
    display: inline-block;
    content: '';
    width:0;
    height:0;
    border-style:solid;
    border-width: 4px 0 4px 12px;
    border-color: transparent transparent transparent #FFFFFF;
    right: 5%;
}

.flow-item .application-btn:hover{
    opacity: 0.6;
    cursor: pointer;
}

.flow-item::after{
    content: "";
    display: inline-block;
    width:0;
    height:0;
    border-style:solid;
    border-width: 12.5px 0 12.5px 15px;
    border-color: transparent transparent transparent #5373D7;
    position: absolute;
    top: 40%;
    right: 0%;
}

.flow-item:last-child::after{
    content: none;
}


/*  ----------------------------------------------------------- 料金一覧  */

.fee{
    background-color: #E7EFF6;
    padding: 70px 0;
}

.fee .fee-table{
    width:100%;
    margin-top: 40px;
}

.fee .fee-table img{
    width:100%;
}

.fee .fee-table_sp{
    display: none;
}


/*  ----------------------------------------------------------- 特別プラン  */

.premium-title{
    background-image: url(../images/ribbon2.jpg);
    background-size: max(1366px,100vw);
    background-position: 50% 70%;
    position: relative;
    padding: 30px 0;
}

.premium-title::before{
    content: '';
    background: rgba(45,121,149,0.7);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.premium-title h3{
    color: #fff;
    position: relative;
}

.premium-title p{
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    position: relative;
    line-height: 1.5em;
    margin-top: 20px;
}

.premium-title p span{
    color: #F2EB90;
    font-weight: 600;
    text-decoration: underline;
}

.premium-table{
    width:100%;
    margin-top: 60px;
    margin-bottom: 80px;
}

.premium-table img{
    width:100%;
}

.premium-table_sp{
    display: none;
}

.card-link a{
    color: #3576D9;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

.card-link{
    position: relative;
}

.card-link .hojin{
    position: absolute;
    top: -70px;
    right:44%;
}

.card-link .owners{
    position: absolute;
    top: -70px;
    right: 2%;
}

.card-link a::after{
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #3576D9;
    border-right: solid 2px #3576D9;
    position: absolute;
    top: 50%;
    right: -10px;
    transform: rotate(45deg) translate(0, -50%);
}

.card-link a:hover{
    opacity: 0.6;
    transition: all 0.3s;
}

.purchasing{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:15px 2.5vw;
    background:linear-gradient(to right,#179EB5,#5EBBD4);
}

.purchasing img{
    max-width:150px;
    width:100%;
    margin-left: 15px;
}

.purchasing p{
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.purchasing p span{
    color: #F3E193;
    font-weight: 700;
    text-decoration: underline;
}

.penalty{
    margin: 80px auto 0 ;
    width:100%;
    background-color: #FFECE5;
    padding:40px;
}

.penalty .head-bold{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.penalty p{
    font-size: 16px;
    text-align: center;
}

.penalty-table{
    margin-top: 20px;
}

.table-sp{
    display: none;
}

.table{
    width:100%;
    margin-top: 15px;
    margin-bottom: 30px;
}

.table .column{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.table .first-line{
     background-color: #919CA7;
}


.table p{
    font-size: min(14px,1.36vw);
    padding:7px 10px;
    background-color: #fff;
}

.table .head{
    background-color: #919CA7;
    color: #fff;
}

.table .cell-top{
    width:40%;
}

.table .cell{
    width:25%;
    border-right: 1px solid #CBD4DE;
}

.table .cell:last-child{
    border-right:none;
}

.penalty .add{
    font-size: 14px;
    color: #495064;
    text-align: left;  
    text-indent: -1rem;
    padding-left: 1rem;
}

.first-line p{
    border-right: 1px solid #fff;
}

.first-line .cell-top{
    border-bottom: 1px solid #fff;
}


/*  ----------------------------------------------------------- ご質問  */

#qa{
    margin-top: 160px;
    margin-bottom: 130px;
}

#qa h2::before{
    content: "FAQ";
    top: -175%;
    left: 0;
}

.qa-contents{
    margin-top: 90px;
    margin-bottom: 40px;
}

.qa-list{
    padding: 20px 50px 20px 20px;
    border-bottom:1px solid #D7DDE6;
}

.qa-list:first-child{
    border-top:1px solid #D7DDE6;
}

.qa-title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.qa-title:hover{
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s;
}

.qa-title .q-mark{
    margin-right:30px;
    max-width: 50px;
}

.qa-title p{
    font-size: 20px;
    font-weight: 500;
}

.qa-inner{
    margin-top: 20px;
    padding: 25px 20px 25px 90px;
    background-color: #E7EFF6;
    display: flex;
    justify-content: flex-start;
    position: relative;
}

.qa-inner p{
    font-size: 18px;
}

.a-mark{
    position: absolute;
    max-width: 48px;
    left: 20px;
    top: 15px;
}

/* -----------------------------------------------------------  アコーディオンの±  */
.qa-title::before,
.qa-title::after{
    position: absolute;
    display: inline-block;
    content:'';
    width: 20px;
    height: 3px;
    background-color: #888888;
    
}
.qa-title::before{
    top:50%;
    right:-25px;
    transform: rotate(0deg);
    
}
.qa-title::after{    
    top:50%;
    right:-25px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/
.qa-title.close::before{
  transform: rotate(45deg);
}

.qa-title.close::after{
  transform: rotate(-45deg);
}

.job-table{
    margin:15px auto 0;
    width: 90%;
}

.table-line{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #DBDBDB;
}

.table-line:last-child{
    border-bottom: none;
}

.table-line p{
    font-size: 16px;
    font-weight: 300;
}

.table-line .t-head{
    width: 30%;
    background-color: #9AA1BB;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-line .t-content{
    width: 70%;
    background-color: #fff;
    padding: 10px;
}



.qa-link{
    color: #3576D9;
    font-size: 20px;
    font-weight: 600;
    position: relative;
}

.qa-link::after{
  content: '';
  width: 13px;
  height: 13px;
  border: 0;
  border-top: solid 3px #3576D9;
  border-right: solid 3px #3576D9;
  position: absolute;
  top: 50%;
  right: -20px;
  transform: rotate(45deg) translate(0, -50%);
}

.qa-link:hover{
    opacity: 0.6;
    transition: all 0.3s;
    cursor: pointer;
}

.qa-inner .qa-head{
    margin-top: 10px;
    font-size: 17px;
}

.qa-inner .qa-head span{
    font-weight: 700;
}

.qa-inner .qa-shead{
    font-size: 17px;
    font-weight: 500;
}

.qa-inner ul{
    margin-left: 15px;
    margin-bottom: 15px;
}

.qa-inner ul li{
    text-indent: -1rem;
    padding-left: 1rem;
    font-size: 17px;
}

.qa-inner ul .no-indent{
    padding-left: 0;
    text-indent: 0;
}


/*  ----------------------------------------------------------- 注意事項  */
#caution{
    background-color: #DFE1E6;
    padding: 60px 0 85px;
}

#caution ul{
    margin-top: 30px;
}

#caution ul li{
    font-size: 14px;
    line-height: 1.86em;
}


/*   動き 　 */
.ac-inner{
    display: none;
}


#services .top .sp-image{
    display: none;
}

.card-logo-sp{
    display: none;
}

.flow-item-wrapper-sp{
    display: none;
}

.sp-br{
    display: none;
}

/*   pagetop */
.page-top{
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    transition: .3s;
    display: flex;

    /*デフォルトで非表示にする*/
    opacity: 0;
    visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}

.page-top:hover{
    opacity: 0.6;
    transition: all 0.3s;
}

.page-top img{
    max-width: 50px;
    height: auto;
}


/*popup*/
.popup {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;
    z-index: 100;
}
  
.popup-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 400px;
    /* background-color: #4080E1; */
    background:linear-gradient(to right,#4553CF,#7CD4EF);
    border-radius: 8px;
}

.popup-banner a{
    color: #fff;
}
  
.popup-close {
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 16px;
    font-size: 20px;
    border-radius: 50%;
    text-align: center;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 200;
}
  
.popup.hidden {
    opacity: 0;
}

.popup.hidden .popup-banner a,
.popup.hidden .popup-close{
    cursor: none;
}


/* =================================================================================-- SPレイアウト */

@media screen and (max-width:767px){
    
    .pc-br{
        display: none;
    }
    
    .sp-br{
        display: block;
    }

    .pc-img{
        display: none;
    }

    .sp-img{
        display: block;
    }
    
    header{
        padding: 8px 0 5px;
    }
    
    .header-logo img{
        max-width: 90px;
    }
    
    .footer-list{
        display: block;
        text-align: left;
    }
    
    .footer-list li{
        margin-bottom: 10px;
    }
    
    .footer-list li a{
        font-size: min(12px,3.6vw);    
    }
    
    footer img{
        margin:55px 0 10px;
    }
    
    
    h2{
        font-size: min(26px,7vw);
    }
    
    h2::before{
        font-size: min(74px,20vw);
    }
    
    h3{
        font-size: min(24px,6.0vw);
    }
    
    h4{
        font-size: min(22px,4.8vw);
    }
    
    #fv{
        height:72vh;
        background-image: url(../images/fv-back-blue_sp.jpg);
        
    }
    
    .fv-title{
        padding-top: 14%;
        position: inherit;
    }
    
    .fv-title p{
        font-size: min(20px,4.8vw);
    }
    
    .fv-title h1{
        max-width:360px;
        width:88%;
        margin-top: 15px;
    }
    
    .fv-title h1 img{
        width:100%;
        margin-top: 0;
    }
    
    .apply-button{
        bottom: 30px;
        left: 50%;
        transform: translate(-50%, 0);
        width:100%;
    }
    
    .apply-button p{
        font-size: min(16px,4.6vw);
        color: #fff;
    }
    
    .apply-btn{
        max-width:360px;
        width:90%;
        height: auto;
        padding: 10px;
        font-size: min(18px,4.85vw);
    }
    
    .apply-btn::after{
        border-width: 5px 0 5px 16px;
        right: 2.5%;
    }
    
    .qa-scroll{
        display: block;
        margin: 20px auto 40px;
    }
    
    .qa-scroll a{
        font-size: min(16px,4.3vw);
    }

    /* ------------------------------------------------------------- top */

    .top-wrapper{
        margin-top: 50px;
    }
    
    #services{
        padding: 110px 0 90px;
    }
    
    #services h2::before{
        top:-120%;
        left: -5%;
    }
    
    #services .top{
        margin-top: 45px;
    }
    
    #services .top .image {
        display: none;
    }
    
    #services .top .sp-image{
        display: block;
        max-width: 360px;
        width:70%;
        margin: 25px auto 15px;
        text-align: center;
    }
    
    #services .top .sp-image img{
        width:100%;
    }
    
    .service-title{
        text-align: center;
        padding-top: 0;
    }
    
    .service-title .subtitle{
        font-size: min(18px,4.3vw);
        letter-spacing: -0.02em;
        margin-bottom: 15px;
        line-height: 1.5em;
    }
    
    .service-title p{
        font-size: min(14px,3.78vw);
        letter-spacing: -0.02em;
        margin-top: 10px;
    }
    
    .name-logo{
        width:85%;
    }
    
    .icon-wrapper {
        margin-top: 20px;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 20px;
    }
    
    .icon{
        margin-right:  0;
        margin-bottom: 15px;
        /* width:32%; */
        width: 38%;
    }
    
    .icon p{
        font-size: min(15px,3.8vw);
        text-align: center;
    }
    
    .icon p span{
        font-size: min(25px,6.5vw);
    }
    
    .icon p .orange-mini{
        font-size: 10px;
    }
    
    .icon p .bold{
        font-size: min(16px,3.4vw);
        display: block;
    }
    
    .icon img{
        margin-right: 0;
        margin-bottom: 0;
        width: 90%;
        max-width:initial;
    }

    
    .logo{
        margin-top: 80px;
        padding:40px 0 50px;
    }
    
    .logo h3{
        width:90%;
        text-align: center;
        font-size: min(22px,5.2vw);
        top:-2.0%;
    }
    
    .logo .item-wrapper{
        display: block;
    }
    
    .logo .item{
        max-width: 480px;
        width:80%;
        margin: 0 auto 15px;
    }
    
    .logo .item:last-child {
        margin-right: auto;
    }
    
    .logo .item p{
        font-size: min(18px,3.6vw);
        padding: 0 0 3% ;
    }
    
    .logo .item img{
        width: 75%;
        margin-top: 20px;
        margin-bottom: 5px;
    }

    .card-logo{
        display: none;
    }
    
    .card-logo-sp{
        display: inline-block;
        max-width: 268px;
    }

    .img_cp{
        display: block;
        margin: 0 auto 40px;
        width: 80%;
        max-width: 480px;
    }

    .btn_below{
        width: 80%;
        max-width: 480px;
    }

    /* ---------------------------------------------------tancemall */

    .tancemall{
        text-align: left;
        padding: 40px 0 70px;
    }

    .tancemall h4 {
        text-align: left;
        padding: 0 0 30px;
    }

    .tancemall .tancemall-wrapper{
        flex-direction: column;
        align-items: center;
    }

    .tancemall .sp-img{
        width: 100%;
    }

    .tancemall .box-right {
        padding-top: 30px;
    }
    
    /* ---------------------------------------------------flow */
    
    .flow{
        padding-bottom: 35px;
    }
    
    .flow-title{
        height: 120px;
        background-size: 180%;
    }
    
    .flow-item-wrapper{
        display: none;
    }
    
    .flow-item-wrapper-sp{
        display: block;
        max-width:380px;
        margin: 35px auto;
        width:97%;
    }
    
    .flow-item-sp{
        display: flex;   
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 60px;
        position: relative;
    }
    
    .flow-item-sp::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 12px 0 12px 12px;
        border-color: transparent transparent transparent #5373D7;
        position: absolute;
        right: 50%;
        bottom: -40px;
        transform: rotate(90deg);
    }
    
    .flow-item-sp:last-child::after {
        content: none;
    }
    
    .flow-item-sp:last-child{
        margin-bottom: 0;
    }
    
    .flow-item-sp .image{
        max-width: 120px;
        width:32%;
        display: flex;
        align-items: center;
    }
    
    .flow-item-sp .image img{
        width:100%;
    }

    .flow-item-sp .text{
        margin-left: 6%;
    }
    
    .flow-item-sp .step{
        max-width: 65px;
        width:20vw;
        display: block;
        margin-bottom: 5px;
    }
    
    .flow-item-sp .heading{
        font-size: min(17px,4.7vw);
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .flow-item-sp p{
        font-size: min(14px,3.9vw);
    }
    
    .application-btn{
        margin-top: 15px;
        width: 150px;
        height: 25px;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        background: linear-gradient(to right,#BBA31D,#EBCD5F);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 5px;
    }
    
    .application-btn::after {
        position: absolute;
        display: inline-block;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 3px 0 3px 10px;
        border-color: transparent transparent transparent #FFFFFF;
        right: 5%;
    }
    
   .application-btn:hover{
        opacity: 0.6;
        cursor: pointer;
    }
    
    .fee{
        padding: 40px 0 60px;
    }
    
    .fee .fee-table{
        display: none;
    }
    
    .fee .fee-table_sp{
        display: block;
        width:85%;
        margin: 20px auto 10px;
        max-width:420px;
    }
    
    .fee .fee-table_sp img{
        width:100%;
        padding: 0;
    }
    
    .premium-title {
        padding: 20px 5%;
        background-position: 65% 75%;
        background-size: max(1220px,114vw);
    }
    
    .premium-title p{
        font-size: min(16px,3.9vw);
        font-weight: 500;
    }
    
    .premium-table{
        display: none;
    }
    
    .premium-table_sp{
        display: block;
        margin: 50px auto 60px;
        width:90%;
        max-width:420px;
    }

    .premium-table_sp img{
        width:100%;
    }
    
    .card-link{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width:90%;
        margin: 0 auto 30px;
    }
    
    .card-link a{
        font-size: min(15px, 3.7vw);
        position: relative;
        margin-bottom: 5px;
    }
    
    .card-link a::after{
        right: -8%;
    }
    
    .card-link .hojin{
        position: relative;
        top:0;
        right: 0;
    }
    
     .card-link .owners{
        position: relative;
        top:0;
        right: 0;
    }
    
    .purchasing{
        display: block;
        padding: 1rem;
    }
    
    .purchasing p{
        font-size: min(16px,4.2vw);
        font-weight: 600;
    }
    
    .purchasing p span{
        font-weight: 800;
    }
    
    .purchasing .illust{
        display: flex;
        justify-content: flex-end;
    }
    
    .purchasing img{
        width:40%;    
    }
    
    
    .penalty{
        margin-top: 40px;
        padding: 1.5rem 5%;
    }
    
    .penalty .head-bold{
        font-size: min(18px,4.2vw);
    }
    
    .penalty p{
        font-size: min(16px,3.7vw);
    }
    
    .table-pc{
        display: none;
    }
    
    .table-sp{
        display: block;
        width:100%;
    }
    
    .sp-line{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
    }
    
    .table .sp-line:last-child .head{
        border-bottom: none;
    }
    
    .table .sp-line:last-child .cell{
        border-bottom: none;
    }
    
    .line-head{
        background-color: #919CA7;
        border-bottom: 1px solid #fff;
    }
    
    .table .line-head .head{
        line-height: 1.2em;
        border-bottom: none;
    }
    
    .table .line-head .head:last-child{
        border-left: 1px solid #fff;
    }
    
    .table .head{
        width:50%;
        font-size: min(13px,3.6vw);
        border-bottom: 1px solid #fff;
    }
    
    .table .cell{
        width:50%;
        font-size: min(13px,3.6vw);
        border-bottom: 1px solid #CBD4DE;
    }
    
    .table p{
        padding: 5px 0;
    }
    
    .penalty .add{
        font-size: min(14px,3.0vw);
    }
    
    
    #qa{
        margin-top: 40px;
        margin-bottom: 80px;
    }
    
    #qa h2::before{
        top:-120%;
        left: -5%;
    }
    
    .qa-contents{
        margin-top: 50px;
        margin-bottom: 30px;
    }
    
    .qa-list{
        padding: 20px 0px 20px 5px;
    }
    
    .qa-title::after,
    .qa-title::before{
        width:15px;
        height: 2px;
        right: 5px;
    }
    
    .qa-title .q-mark{
        max-width: 35px;
        margin-right: 15px;
        width:10.5vw;
    }
    
    .qa-title p{
        font-size: min(16px,4vw);
        padding-right: 30px;
    }
    
    .a-mark{
        max-width: 32px;
        margin-right: 20px;
        width: 10.2vw;
        left: 10px;
        top:15px;
    }
    
    .qa-inner{
        padding: 15px 15px 15px 55px;
    }
    
    .qa-inner p{
        font-size: min(14.5px,4.2vw);
    }
    
    .qa-inner .qa-head{
        font-size: min(14.5px,4.2vw);
        font-weight: 300;
    }
    
    .qa-inner .qa-shead{
        font-size: min(14.2px,4.15vw);
    }
    
    .qa-inner ul{
        margin-left: 10px;
    }
    
    .qa-inner ul li{
        font-size: min(14.2px,4.15vw);
    }
    
    .job-table{
        max-width: 360px;
        margin: 15px 0 0 10px;
    }
    
    .table-line{
        display: block;
    }
    
    .table-line .t-head{
        padding: 0;
        width: 100%;
        font-size: min(14px,4vw);
    }
    
    .table-line .t-content{
        width:100%;
        text-align: center;
        padding: 7px 5px;
    }
    
    .qa-link{
        font-size: min(16px,4.0vw);
    }
    
    #caution{
        padding: 45px 0 65px;
    }
    
    #caution ul{
        margin-top: 20px;
    }
    
    #caution ul li{
        font-size: min(13px,3.2vw);
        text-indent: -1rem;
        padding-left: 1rem;
        line-height: 1.65em;
    }
    
    .page-top img{
        max-width:35px;
    }

    /*popup*/
    .popup {
        width: 90%;
        height: 55px;
        margin: 0 auto ;
    }
    
    .popup-banner {
        height: 44px;
        width: 80%;
        max-width: 480px;
    }

    .popup-banner a{
        font-size: clamp(12px, 1.8vw, 16px);
        line-height: 1rem;
    }
    
    .popup-close {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 14px;
        height: 14px;
        font-size: 14px;
        border-radius: 50%;
    }
    
}