@charset "UTF-8";
body {
    font-size: 1.3rem;
}

@media (min-width: 940px) {
    body {
        font-size: 1.4vw;
    }
}
@media (min-width: 1920px) {
    body {
        font-size: 27px;
    }
}

.currency-main {
    background:  #FBF2CF;
    padding: 0;
}

/*----------------------------------------------------
 mainvisual
----------------------------------------------------*/
.currency-mainvisual {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 30px 14% 60px;
}

.currency-mainvisual-img {
    margin-bottom: 20px;
}
.currency-mainvisual-title {
    color: #fff;
    font-size: 6.04vw;
    font-weight: bold;
    margin-bottom: 20px;
}
.currency-mainvisual p {
    color: #031636;
    font-size: 3.46vw;
    font-weight: bold;
}

@media (min-width: 940px) {
    .currency-mainvisual {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 100px 4.583333333333333% 60px 7.65625%;
    }
    
    .currency-mainvisual-img {
        order: 2;
        margin-bottom: 0;
        width: 48.21852731591449%;
    }
    .currency-mainvisual-text {
        order: 1;
    }
    .currency-mainvisual-title {
        font-size: 2.96875vw;
        margin-bottom: 20px;
    }
    .currency-mainvisual p {
        font-size: 1.67vw;
    }
}

/*----------------------------------------------------
 feature-header
----------------------------------------------------*/
.currency-feature-header {
    margin-bottom: 20px;
    text-align: center;
}
/* title */
.currency-feature-title {
    font-size: 3.1vw;
    font-weight: bold;
    margin-bottom: 20px;
    vertical-align: middle;
}
.currency-feature-title img {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    width: 5.95vw;
}

/* slash */
.currency-feature-title-slash {
    color: #FBD615;
    font-size: 4.71vw;
}

.currency-feature-title-slash::before,
.currency-feature-title-slash::after {
    content: '|';
    display: inline-block;
}
.currency-feature-title-slash::before {
    margin-right: 10px;
    transform: rotate(-30deg);
}

.currency-feature-title-slash::after {
    margin-left: 10px;
    transform: rotate(30deg);
}

@media (min-width: 940px) {
    .currency-feature-header {
        margin-bottom: 40px;
    }
    /* title */
    .currency-feature-title {
        font-size: 1.72vw;
        margin-bottom: 40px;
    }
    .currency-feature-title img {
        max-width: 68px;
        width: 3.542vw;
    }
    
    /* slash */
    .currency-feature-title-slash {
        font-size: 3.65vw;
    }
    
    .currency-feature-title-slash::before {
        margin-right: 20px;
    }
    
    .currency-feature-title-slash::after {
        margin-left: 20px;
    }
}
@media (min-width: 1920px) {
    /* title */
    .currency-feature-title {
        font-size: 39px;
    }
    /* slash */
    .currency-feature-title-slash {
        font-size: 73.6px;
    }
}

/*----------------------------------------------------
 body
----------------------------------------------------*/
@media (min-width: 940px) {
    .currency-feature-body {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
    }
    .currency-feature-text {
        width: 59.4%;
    }
    .currency-feature-img {
        width: 37.5%;
    }
}

/*----------------------------------------------------
 feature-thin-box
----------------------------------------------------*/
.currency-feature-thin-box {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 15px;
}

@media (min-width: 940px) {
    .currency-feature-thin-box {
        line-height: 1.8;
        margin-bottom: 40px;
        padding: 30px;
    }
}


/*----------------------------------------------------
 feature-so
----------------------------------------------------*/
.currency-feature-so {
    margin-bottom: 30px;
}
.currency-feature-so::before {
    content: '';
    display: block;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #fff;
    height: 0;
    margin: 0 auto 20px;
    width: 0;
}
.currency-feature-so p {
    font-size: 4.356vw;
    font-weight: bold;
    text-align: center;
}
.currency-feature-so strong {
    color: #FBD615;
    display: block;
    font-size: 6.2vw;
}

@media (min-width: 940px) {
    .currency-feature-so {
        margin-bottom: 0;
    }
    .currency-feature-so::before {
        margin-bottom: 30px;
        width: 0;
    }
    .currency-feature-so p {
        font-size: 2.6vw;
    }
    .currency-feature-so strong {
        font-size: 3.28125vw;
    }
}

@media (min-width: 1920px) {
    .currency-feature-so p {
        font-size: 54.6px;
    }
    .currency-feature-so strong {
        font-size: 73.672px;
    }
}


/*----------------------------------------------------
 feature-img
----------------------------------------------------*/
.currency-feature-img {
    text-align: center;
}
.currency-feature-img-remark {
    font-size: 1rem;
    margin-top: 15px;
}

.currency-feature-img-catch {
    color: #FBD615;
    font-size: 3.73vw;
    font-weight: bold;
    margin-top: 15px;
}

@media (min-width: 940px) {
    .currency-feature-img-remark {
        font-size: 0.83vw;
    }
    
    .currency-feature-img-catch {
        font-size: 1.35vw;
    }
}

@media (min-width: 1920px) {
    .currency-feature-img-remark {
        font-size: 1.6rem;
    }
    .currency-feature-img-catch {
        font-size: 30px;
    }
}

/*----------------------------------------------------
 currency-feature1 / currency-feature2
----------------------------------------------------*/
.currency-feature1,
.currency-feature2 {
    background: #0D223F;
    color: #fff;
    margin: 30px auto;
    padding: 30px 20px;
    width: 91%;
}

@media (min-width: 940px) {
    .currency-feature1,
    .currency-feature2 {
        margin: 60px auto;
        padding: 80px 60px 60px;
        width: 83.3%;
        max-width: 1600px;
    }
}

/*----------------------------------------------------
 currency-feature2
----------------------------------------------------*/
.currency-feature2 {
    margin-top: 0;
}

/*----------------------------------------------------
 currency-logic
----------------------------------------------------*/
.currency-logic,
.currency-simulation {
    background: #FAA013;
    margin: 0 auto 30px;
    padding: 30px 20px;
    width: 91%;
}

@media (min-width: 940px) {
    .currency-logic,
    .currency-simulation {
        margin: 0 auto 60px;
        padding: 80px 60px 60px;
        width: 83.3%;
        max-width: 1600px;
    }
    .currency-simulation {
        padding-left: 12.5%;
        padding-right: 12.5%;
    }
}

/*----------------------------------------------------
 currency-logic
----------------------------------------------------*/
/* triangle */
.currency-triangle-thin-orange {
    display: block;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #fdd089;
    height: 0;
    margin: 0 auto;
    width: 0;
}
/* box */
.currency-logic-box {
    background: #fdd089;
    border-radius: 20px;
    padding: 20px;
}
/* text */
.currency-logic-text {
    margin-bottom: 20px;
}
/* title */
.currency-logic-title2 {
    font-size: 4.978vw;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    vertical-align: middle;
} 
.currency-logic-title2::before,
.currency-logic-title2::after {
    background: url(../img/icon-tool.png) no-repeat center center;
    background-size: cover;
    content: '';
    display: inline-block;
    height: 5.42vw; 
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 5.42vw;
}
.currency-logic-title2::before {
    margin-right: 10px;
}
.currency-logic-title2::after {
    margin-left: 10px;
}

@media (min-width: 940px) {
    /* triangle */
    .currency-triangle-thin-orange {
        border-left-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 40px;
    }
    /* box */
    .currency-logic-box {
        align-items: center;
        justify-content: space-between;
        display: flex;
        padding: 40px;
    }
    /* text */
    .currency-logic-text {
        font-size: 1.09375vw;
        font-weight: bold;
        margin-bottom: 0;
        width: 46.56%;
    }
    /* title */
    .currency-logic-title2 {
        font-size: 2.97vw;
    } 
    .currency-logic-title2::before,
    .currency-logic-title2::after {
        height: 3.178vw; 
        top: -2px;
        width: 3.178vw;
    }
    .currency-logic-img {
        width: 50.14%;
    }
}

@media (min-width: 1920px) {
    /* text */
    .currency-logic-text {
        font-size: 23px;
    }
    /* title */
    .currency-logic-title2 {
        font-size: 62.7405px;
    } 
    .currency-logic-title2::before,
    .currency-logic-title2::after {
        height: 62px; 
        width: 62px;
    }
}

/*----------------------------------------------------
 currency-title
----------------------------------------------------*/
.currency-title {
    font-size: 4.1vw;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}
.currency-title strong {
    color: #fff;
    display: block;
    font-size: 5.78vw;
}

@media (min-width: 940px) {
    .currency-title {
        font-size: 2.6vw;
        margin-bottom: 40px;
    }
    .currency-title strong {
        font-size: 3.7vw;
    }
}
@media (min-width: 1920px) {
    .currency-title {
        font-size: 51.672px;
    }
    .currency-title strong {
        font-size: 75px;
    }
}

/*----------------------------------------------------
 currency-simulation-caption
----------------------------------------------------*/
.currency-simulation-caption {
    font-size: 10px;
    margin-bottom: 10px;
}

@media (min-width: 940px) {
    .currency-simulation-caption {
        font-size: 1.25vw;
    }
}

@media (min-width: 1920px) {
    .currency-simulation-caption {
        font-size: 25px;
    }
}


/*----------------------------------------------------
 currency-simulation-img
----------------------------------------------------*/
.currency-simulation-img {
    margin-bottom: 20px;
}

@media (min-width: 940px) {
    .currency-simulation-img {
        margin-bottom: 40px;
    }
}

/*----------------------------------------------------
 currency-simulation-table
----------------------------------------------------*/
.currency-simulation-table {
    display: flex;
    margin-bottom: 30px;
}
.currency-simulation-table-each {
    width: 25%;
}

.currency-simulation-th {
    background: #688675;
    border-right: 1px solid #FAA013;
    border-bottom: 1px solid #FAA013;
    color: #fff;
    font-weight: bold;
    font-size: 2.5vw;
    padding: 10px 0;
    text-align: center;
}
.currency-simulation-table p {
    background: #fff;
    border-right: 1px solid #FAA013;
    border-bottom: 1px solid #FAA013;
    font-size: 2.75vw;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
}

@media (min-width: 940px) {
    .currency-simulation-th {
        border-right-width: 2px ;
        border-bottom-width: 2px ;
        font-size: 1.41vw;
        padding: 10px 0;
    }
    .currency-simulation-table p {
        border-right-width: 2px ;
        border-bottom-width: 2px ;
        font-size: 1.875vw;
        padding: 10px 0;
    }
}
@media (min-width: 1920px) {
    .currency-simulation-th {
        font-size: 27px;
    }
    .currency-simulation-table p {
        font-size: 36px;
    }
}

/*----------------------------------------------------
 currency-simulation-rate
----------------------------------------------------*/
.currency-simulation-rate {
    padding-bottom: 20px;
    text-align: center;
}

.currency-simulation-rate-title {
    font-weight: bold;
    line-height: 1.3;
}
.currency-simulation-rate-title span {
    color: #fff;
    font-size: 5.95vw;
}

.currency-simulation-rate-title strong {
    font-size: 9.95vw;
    margin: 0 5px;
}

.currency-simulation-rate-title small {
    font-size: 5.95vw;
}

.currency-simulation-rate p {
    font-size: 10px;
}
@media (min-width: 940px) {
    .currency-simulation-rate-title span,
    .currency-simulation-rate-title small {
        font-size: 3.8vw;
    }
    
    .currency-simulation-rate-title strong {
        font-size: 8.15vw;
    }
    
    .currency-simulation-rate p {
        font-size: 1.04vw;
    }
}

@media (min-width: 1920px) {
    .currency-simulation-rate-title span,
    .currency-simulation-rate-title small {
        font-size: 72.919px;
    }
    .currency-simulation-rate-title strong {
        font-size: 156.4303px;
    }
    
    .currency-simulation-rate p {
        font-size: 20px;
    }
}

/*----------------------------------------------------
 link
----------------------------------------------------*/
.currency-link {
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 60px;
    text-align: center;
    max-width: 860px;
    width: 75.5vw;
}

.currency-link a {
    display: inline-block;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.currency-link a:hover {
    opacity: .7;
}

@media (min-width: 940px) {
    .currency-link {
        padding-top: 60px;
        padding-bottom: 200px;
        width: 44.27vw;
    }
    
}