@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700");

main section {
    padding: 32px 0
}
main section + section {
    border-top: 1px solid #026FB8
}
main section h2 {
    color: #026FB8;
    font-weight: bold;
    padding-bottom: 16px
}

main #top {
    padding-top: 0
}
main #top img {
    width: 100%;
    height: auto
}
main #top p {
    padding-top: 1em
}
main #top p a {
    white-space: nowrap
}

main #promise h2 {
    padding-bottom: 0;
    margin-bottom: 0
}
main #promise ul {
    width: 100%;
    display: inline-block
}
main #promise ul .promise-item {
    padding-top: 24px
}
main #promise ul .promise {
    padding-left: 32px;
    min-height: 24px;
    background: transparent url(../img/check@2x.webp) 0 0 no-repeat;
    background-size: 24px auto;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6em;
    color: #026FB8;
    font-weight: bold
}
main #promise ul strong {
    text-decoration: none
}
main #promise ul strong em {
    color: #e61c24
}
main #promise ul .promise ~ * {
    padding-left: 32px;
    padding-top: 8px
}
main #promise ul .btn-box .btn {
    margin-left: 0;
    width: 240px
}
@media only screen and (max-width: 540px) {
    main #promise ul .promise ~ p {
        font-size: 13px;
        font-size: .8125rem;
        line-height: 1.6em
    }
    main #promise ul .btn-box .btn {
        margin-left: auto
    }
}
main #promise > p {
    padding-top: 16px;
    font-size: 13px;
    font-size: .8125rem;
    line-height: 1.6em
}
main #promise p em {color: #e61c24;}
@media only screen and (max-width: 540px) {
    main #promise > p {
        font-size: 11px;
        font-size: .6875rem;
        line-height: 1.6em
    }
}

main #steps ol {
    width: 100%;
    border-bottom: 2px solid #026FB8
}
main #steps ol > li {
    display: flex;
    border: solid 2px #026FB8;
    border-bottom-width: 0
}
main #steps ol > li + li {
    border-top-style: dotted
}
main #steps ol > li h3 {
    padding: 12px 16px;
    color: #fff;
    background-color: #026FB8;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6em
}
main #steps ol > li h3 span.num {
    width: 24px;
    height: 24px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    display: inline-block;
    background-color: #fff;
    color: #026FB8;
    text-align: center;
    line-height: 24px
}
main #steps ol > li div {
    background-color: #fff;
    padding: 16px
}
main #steps ol > li div > *:nth-child(n+2) {
    margin-top: 8px
}
main #steps ol > li div picture {
    display: block;
    width: 272px
}
main #steps ol > li div picture img {
    width: 100%;
    height: auto;
    line-height: 0
}
main #steps ol > li div .inside-num {
    padding-left: 1em;
    text-indent: -1em
}
main #steps ol > li div * + .inside-num {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #ccc
}
main #steps ol > li div em {
    display: inline-block;
    font-weight: bold;
    text-indent: 0 !important
}
main #steps ol > li div ul {
    margin-left: 1.2em
}
main #steps ol > li div ul li {
    list-style-type: disc
}
main #steps ol > li div ul li.none {
    text-indent: -1em;
    list-style-type: none
}
main #steps ol > li div a.btn {
    display: inline-block;
    width: auto;
    min-width: 200px;
    padding-left: 24px;
    padding-right: 24px
}
main #steps ol.steps-box p strong,
main #steps ol.steps-box li strong,
main #steps ol.steps-box p span.ulp {    
    text-decoration:none;
    background: linear-gradient(transparent 85%, #ffcceb 0%);
    display: inline;
}
@media only screen and (min-width: 541px),
print {
    main #steps ol > li h3 {
        width: 184px
    }

    main #steps ol > li h3 span.attention {
        margin-left: 28px
    }

    main #steps ol > li div {
        width: calc(100% - 184px)
    }
}

@media only screen and (max-width: 540px) {
    main #steps > ul > li {
        padding: 0 12px;
        height: 48px;
        line-height: 48px
    }

    main #steps > ul > li a {
        line-height: 48px
    }

    main #steps ol > li {
        flex-direction: column
    }

    main #steps ol > li + li {
        border-top: none !important
    }

    main #steps ol > li div .must {
        font-size: smaller
    }
}

main #uniform h2 {
    display: inline-block;
    padding: 8px;
    border: 1px solid #026FB8;
    font-size: 18px;
    line-height: 1
}

main #uniform .flxc {
    justify-content: space-between
}

main #uniform .swiper .swiper-slide {
    padding: 5%
}

main #uniform .swiper .swiper-pagination {
    bottom: 0
}

main #uniform .swiper .swiper-button-prev {
    left: 0
}

main #uniform .swiper .swiper-button-next {
    right: 0
}

main #uniform .pict {
    padding-top: 15%
}

main #uniform .max10 {
    position: absolute;
    width: 25%;
    height: auto;
    top: 0;
    right: 0;
    transform: rotateZ(15deg)
}

main #uniform img {
    width: 100%;
    height: auto
}

main #uniform h3 {
    border-bottom: 16px;
    font-weight: bold;
    color: #026FB8
}

main #uniform .tshirt dl dt {
    display: flex;
    width: 100%;
    background-color: #026FB8;
    color: #fff
}

main #uniform .tshirt dl dd {
    display: flex;
    width: 100%;
    border-top: 1px solid #026FB8;
    border-right: 1px solid #026FB8;
    border-left: 1px solid #026FB8
}

main #uniform .tshirt dl span {
    box-sizing: border-box;
    display: inline-block;
    padding: 8px 0;
    width: 20%;
    text-align: center
}

main #uniform .tshirt dl span + span {
    border-left: 1px dotted #026FB8
}

main #uniform .tshirt dl span:nth-of-type(2) {
    border-left-style: solid
}

main #uniform .tshirt dl dt span {
    border-color: #fff
}

main #uniform .tshirt dl dd span:nth-of-type(1) {
    background-color: #d4edff
}

main #uniform .tshirt dl dd.attention {
    display: block;
    text-align: right;
    border-left-color: #fff;
    border-right-color: #fff
}

main #uniform .tshirt ~ dl {
    padding-left: 1em
}

main #uniform .tshirt ~ dl > * {
    text-indent: -1em
}

main #uniform p {
    padding-bottom: 16px
}

@media only screen and (min-width: 541px),
print {
    main #uniform .flxc {
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: space-between
    }

    main #uniform .flxc > div.swiper {
        width: 56%
    }

    main #uniform .flxc > div.info {
        width: 40%;
        padding-left: 32px
    }

    main #uniform .flxc .swiper .swiper-slide {
        padding: 3% 5% 5%
    }

    main #uniform .flxc h3 {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.6em;
        font-weight: bold;
        color: #026FB8
    }

    main #uniform .flxc .hat {
        margin-top: 16px
    }
}

@media only screen and (min-width: 541px) and (max-width: 999px),
print {
    main #uniform .tshirt span {
        padding: 2px 0
    }
}

@media only screen and (max-width: 540px) {
    main #uniform .flxc {
        flex-direction: column-reverse;
        align-items: center;
        padding-top: 16px
    }

    main #uniform .info {
        padding-left: 0
    }

    main #uniform .swiper {
        width: 100%
    }

    main #uniform .max10 {
        width: 30%;
        top: 0;
        right: 0
    }

    main #uniform h3 {
        padding-top: 16px
    }
}

main #present h2 {
    display: inline-block;
    padding: 8px;
    border: 1px solid #026FB8;
    font-size: 18px;
    line-height: 1
}

main #present h3 {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6em;
    font-weight: bold;
    color: #026FB8
}
main #present .present_ttl {
    background:#ffe200;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:25px 15px;
    border-radius: 25px;
}
main #present .present_ttl picture {
    display:block;
    width:100%;
    max-width:60%;
    min-width:490px;
}
main #present .present_ttl picture:after {
    display:none;
}

main #present .flxc {
    flex-direction: column;
}
main #present img {
    width: 100%;
    height: auto;
    display:block;
}

main #present .presentbox {
    margin:30px auto 20px;
    max-width:1110px;
}

@media only screen and (max-width: 540px) {
    main #present h3 {
        padding-top: 16px
    }
    main #present .present_ttl {
        padding:20px 15px;
    }
    main #present .present_ttl picture {
        max-width:95%;
        min-width:0;
    }
}

main #faq {
    padding-bottom: 32px
}

main #faq > dl {
    padding: 12px 0
}

main #faq > dl + dl {
    border-top: 1px dotted #026FB8
}

main #faq > dl > dt {
    cursor: pointer;
    position: relative;
    padding-left: 32px
}

main #faq > dl > dt span {
    position: absolute;
    display: block;
    left: 0;
    top: -2px;
    width: 22px;
    height: 22px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background-color: #026FB8;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    line-height: 22px;
    font-family: "Roboto Condensed" !important
}

main #faq > dl > dd {
    padding-top: 12px;
    padding-left: 32px
}

main #faq > dl dd > dl {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    border: 2px solid #ddd
}