@charset "UTF-8";

.pc_only {
    display: none;
}

.sp_only {
    display: block;
}

/*************
wrapper, inner
*************/
.wrapper {
    width: 100%;
    max-width: 900px;
    padding: 0 7vw 0;
    margin: 0 auto;
}

.box__inner {
    width: 100%;
    margin: 0 auto;
}

/*************
btn
*************/

.btn {
    width: 100%;
    margin: 0 auto;
}

.contentBtn {
    width: 100%;
    min-width: auto;
    display: block;
    margin: 2em auto 1em;
    background-color: #FA9A35;
    color: #FFF;
    font-size: 4.61538462vw;
    border-radius: 2em;
    padding: 1em 1em;
    transition: 0.3s;
    font-weight: bold;
    position: relative;
    text-align: center;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}


/*************
header
*************/
#header {
    min-width: 320px;
    height: 58px;
    border-top: 3px solid #357eec;
}

.header-logo {
    margin: 20px 0 0 13px;
    display: block;
    width: 107px;
    height: 29px;
    line-height: 1;
    text-indent: -9999px;
    background: url(../img/logo-sb.svg) no-repeat center center;
    -webkit-background-size: 100% 100%;
    background-size: 100%;
}

/*************
firstView__abuse
*************/

.firstView__abuse {
    position: relative;
}

.abuse {
    display: flex;
    flex-flow: column;
    position: relative;
    max-width: 1060px;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    color: #fff;
}

.abuseTitle {
    text-align: center;
    font-weight: 700;
    font-size: 2.6rem;
    color: #fff;
    margin: 0 auto;
}

.abuse .abuse__titleArea {
    max-width: 600px;
    width: 100%;
}


.abuseTitle__damage {
    font-size: 7.17948718vw;
}

.abuseTitle .abuseTitle__sub {
    display: block;
    margin-bottom: -40px;
    font-size: 7vw;
}

.abuseTitle .abuseTitle__area {
    font-size: 5vw;
    padding:2.2vw 4.5vw 3vw 5vw;
}

.abuseTitle .abuseTitle__weak {
    font-size: 5.12820513vw;
}

.abuseTitle .helvetica {
    font-size: 13.0769231vw;
}

.abuse__lead p {
    font-size: 2.82051282vw;
    color: #fff;
}

.abuse .abuse__graph {
    max-width: 400px;
    width: 100%;
}

/*************
speech__bubble, guide__box
*************/

.speech__bubble {
    font-size: 4.61538462vw;
}

section h2 {
    font-size: 7.69230769vw;
}

.guide {
    text-align: center;
    padding: 3em 0 3em 0;
}

.guide__box {
    width: 100%;
    background: #fff;
    position: relative;
    z-index: 1;
    padding: 3em 2em 1em;
    margin-top: 90px;
}

.guide__box::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -3em;
    left: 50%;
    transform: translateX(-50%);
    width: 6em;
    height: 6em;
    background-image: url('../img/crew.png');
    background-position: center;
    background-size: contain;
    z-index: 2;
}

.guide__box h3 {
    font-size: 6.41025641vw;
}

.obi {
    width: 100%;
    background: #1D78FF;
    color: #fff;
    font-weight: bold;
    font-size: 4.61538462vw;
    border-radius: 20px 20px 0 0;
    padding: 1em 0.5em;
}

.box__txt {
    width: 100%;
    background: #E6F8FF;
    border-radius: 0 0 20px 20px;
    padding: 1em;
    font-weight: normal;
    text-align: left;
    font-size: 4.61538462vw;
}

.note {
    font-size: 4, 102561vw;
}

.overview__box {
    width: 100%;
    background: #fff;
    padding: 2em;
}

.overview__txt {
    font-size: 4.61538462vw;
}

.introduction {
    text-align: center;
    padding: 3em 0 3em 0;
}

.introduction__box {
    width: 100%;
    background: #fff;
    padding: 2em;
    margin-top: 60px;
    position: relative;
}

.case__box {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
    background: linear-gradient(180deg, #23A7AD 78.5%, #FFF 100%);
    width: auto;
    height: auto;
    padding: 0.3em 0.5em 0.4em;
    color: #fff;
    font-size: 7.17948718vw;
    position: absolute;
    left: 0;
}

.question {
    gap: 10px;
}

.crew__icon {
    width: 80px;
    height: auto;
}

.question__txt {
    font-size: 4.61538462vw;
    text-align: left;
}

.heads__up {
    font-size: 6.15384615vw;
    font-weight: bold;
    margin-top: 20px;
}

.introduction .section__bg {
    background: #C7FDFF;
    margin: 0px auto;
}

.cta__area {
    padding: 2em 0;
}

.promotion__box {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.promotion__box .crew__icon {
    width: 40%;
    height: auto;
}

.promotion__txt__btn h2 {
    width: auto;
    font-size: 4.61538462vw;
    color: #23A7AD;
    margin: 0;
}

.promotion__txt__btn .btn {
    font-size: 3.84615385vw;
}

.promotion__txt__btn .btn .contentBtn {
    margin: 10px 0 0;
    font-size: 3.71794872vw;
}

.fixed__cta__btn a {
    width: 100%;
    border-radius: 999px;
    border: 4px solid #FFF;
    padding: 0.5em;
    background: #FA9A35;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
    text-align: center;
    transition: 0.3s ease-in-out;
    overflow: hidden;
    display: block;
}

.fixed__cta__btn a:hover {
    opacity: 0.9;
}

.cta__btn a {
    width: 100%;
    border-radius: 999px;
    border: 4px solid #FFF;
    padding: 0.5em;
    background: #23A7AD;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.16);
    text-align: center;
    transition: 0.3s ease-in-out;
    overflow: hidden;
    display: block;
}


.sub__txt {
    display: block;
    color: #fff;
    font-size: 3.07692308vw;
}

.sub__txt:before,
.sub__txt:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #fff;
    width: 1px;
    height: 1.5em;
    margin: 0 1em;
    margin-top: -.2em;
    vertical-align: middle;
}

.main__txt1 {
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 5.12820513vw;
}

.main__txt2 {
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 5.12820513vw;
}

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

.mt100 {
    margin-bottom: 100px;
}

.mt50 {
    margin-top: 50px;
}

.mt25 {
    margin-top: 25px;
}

.mt20 {
    margin-top: 20px;
}

.mt10 {
    margin-top: 10px;
}

.mt5 {
    margin-top: 5px;
}

.mt0 {
    margin-top: 0;
}


/*************
margin-bottom
*************/

.mb100 {
    margin-bottom: 100px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb0 {
    margin-bottom: 0;
}