@charset "UTF-8";
/* CSS Document */

/*-------------------------- PC、SP共通--------------------------*/
#subspo-mv img {
        width: 100%;
        height: auto;
    }
#about-subspo h1 {
    text-align: center;
    font-weight: bold;
}
#about-subspo h1 img {
        margin-right: 10px;
    }
#subspo-service .coupon_price,#subspo-service .equipment,#subspo-service .period {
    background: #f9f5f1;
}
.subspo-block h2 {
    text-align: center;
}
.subspo-block h2 img {
    background: #fff;
}
#about-subspo p,.subspo-block li,#about-subspo p,.subspo-block li p,
.subspo-block dl dt {
    font-weight: bold;
    line-height: 1.8;
}
.subspo-block dl dd {
    font-weight: normal;
    line-height: 1.6;
}
#subspo-service div h3 {
    background: #ebe1de;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-shadow: -1px -1px #333, 1px -1px #333, -1px 1px #333, 1px 1px #333;
    padding: 15px 0;
}
#subspo-service .coupon_price p:first-child {
    text-align: center;
}
#subspo-service .coupon_price p:nth-child(2) {
    text-align: right;
}
.ss_read_text {
    font-weight: bold;
    line-height: 1.6;
}
#subspo-service .equipment p {
    font-weight: bold;
    line-height: 1.6;
}
#subspo-service .equipment ul {
    display: flex;
    /*justify-content: space-between;*/
	justify-content: space-evenly;
    margin: 0;
}
#subspo-service .equipment li {
    margin: 0;
    padding: 0;
}
#subspo-service .period p:first-child {
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 10px;
}
.subspo-block .ss_plan {
    z-index: -10;
    position: relative;
}
.subspo-block li p span {
    font-weight: normal;
}
.subspo-block ol,.subspo-block ul,
.subspo-faq dl {
    padding: 0;
}
.subspo-block ol li {
    display: flex;
}
.subspo-block ol li p:first-of-type {
    line-height: 0;
}
.subspo-block ul li,
.subspo-block dl dd {
    padding-left: 30px;
    margin-bottom: 30px;
}
.subspo-block dl dt {
    padding-left: 30px;
    margin-bottom: 10px;
}
#subspo-feature,#subspo-scene {
    list-style: none;
}
#subspo-scene li,
#subspo-faq dt {
    background: url("image/ss_list_icon.svg") no-repeat center left;
}
.difference p {
    font-weight: bold;
    line-height: 1.6;
    padding-left: 1rem;
}
.difference p::before {
    content: "※";
    margin-left: -1rem;
}
.mail_magazine .link_btn {
    text-align: center;
    margin-bottom: 20px;
}
.mail_magazine .link_btn span a {
    font-weight: bold;
    background: #ff3267;
    border: 3px solid #333;
    color: #fff;
    display: inline-block;
    position: relative;
    text-decoration: none;
    padding: 15px 30px 15px 50px;
}













/*--------------------------SP用スタイル--------------------------*/
@media only screen and (max-width:639px){
    #subspo-mv {
        margin-bottom: 30px;
    }
    #subspo-wrap {
        padding: 0 3%;
    }
    #about-subspo {
        margin-bottom: 80px;
    }
    #about-subspo h1 {
        font-size: 22px;
        margin-bottom: 20px;
        line-height: 1.4;
    }
    #about-subspo h1 img:nth-child(1) {
        width: 110px;
        height: auto;
    }
    #about-subspo h1 img:nth-child(2) {
        width: 106px;
        height: auto;
    }
    #about-subspo ul li {
        font-weight: bold;
        font-size: 14px;
        line-height: 1.6;
        padding-left: 1em;
    }
    #ss_logo {
        width: 180px;
        height: auto;
        margin-top: 10px;
    }
    .subspo-block {
        margin-bottom: 80px;
    }
    .subspo-block h2 {
        margin-bottom: 30px;
    }
    .subspo-block h2 img {
        width: 50%;
        height: auto;
    }
    .subspo-block dl dd {
        font-size: 15px;
    }
    .riyou h2 img {
        width: 70%;
        height: auto;
    }
    .difference h2 img {
        width: 100%;
        height: auto;
    }
    .subspo-block .ss_plan {
        margin-top: -50px;
    }
    .subspo-block .ss_plan img {
        width: 100%;
        height: auto;
    }
    .subspo-block ol li {
        margin-bottom: 30px;
    }
    .subspo-block ol li p:first-of-type {
        margin-right: 15px;
    }
    .subspo-block ol li img {
        width: 40px;
        height: auto;
    }
    #subspo-scene li,
    #subspo-faq dt {
        background: url("image/ss_list_icon.svg") no-repeat left 4px;
    }
    #subspo-service div h3 {
        font-size: 26px;
    }
    #subspo-service div .inner {
        padding: 10px;
    }
    #subspo-service .coupon_price p:first-child img {
        width: 90%;
        height: auto;
    }
    .ss_read_text {
        margin-bottom: 20px;
    }
    #subspo-service .coupon_price,#subspo-service .equipment {
        margin-bottom: 30px;
    }
    #subspo-service .equipment p {
        margin-bottom: 10px;
    }
    #subspo-service .equipment li {
        text-align: center;
    }
    #subspo-service .equipment ul li img {
        width: 60%;
        height: auto;
    }
    #subspo-service .period {}
    #subspo-service .period p:nth-child(2) {
        line-height: 1.6;
    }
    .mail_magazine .link_btn span a {
        font-size: 20px;
    }
    .mail_magazine .ss_read_text {
        font-size: 14px;
    }
    .how_to_ss {
        background: url("image/how_to_ss_bg_sp.svg") no-repeat center top;
        background-size: 100%;
        padding: 5px 18px 60px;
    }
    .how_to_ss h2 {
        margin-bottom: 5px;
        font-size: 20px;
        font-weight: bold;
    }
    .how_to_ss h2 #ss_logo {
        margin-top: 20px;
        width: 140px;
    }
    .how_to_ss p {
        font-weight: bold;
        line-height: 1.4;
    }
    
    
}













/*--------------------------PC用スタイル--------------------------*/
@media print, screen and (min-width:640px) {
    
    #subspo-wrap {
        width: 950px;
        padding: 50px 20px;
        margin: 0 auto;
    }
    #about-subspo {
        margin-bottom: 120px;
    }
    #about-subspo h1 {
        font-size: 32px;
        margin-bottom: 60px;
    }
    
    #ss_logo {
        position: relative;
        top: 35px;
        margin-top: -20px;
    }
    #about-subspo p {
        font-size: 18px;
        line-height: 2;
    }
    #about-subspo ul {
        margin: 10px 0;
    }
    #about-subspo ul li {
        font-weight: bold;
        font-size: 18px;
        line-height: 1.8;
        padding-left: 20px;
    }
    #subspo-service {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #subspo-service .coupon_price,#subspo-service .equipment {
        /*width: 48%;*/
		width: 100%;
    }
    #subspo-service .coupon_price p:first-child {
        margin-top: 30px;
    }
    
    #subspo-service .equipment p {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    #subspo-service .period {
        width: 100%;
        margin-top: 30px;
        background: #f9f5f1;
    }
    #subspo-service .period p:first-child {
        font-size: 18px;
    }
    #subspo-service div h3 {
        font-size: 28px;
    }
    #subspo-service div .inner {
        padding: 15px;
    }
    .ss_read_text {
        font-size: 18px;
        text-align: center;
        margin-bottom: 30px;
    }
    .subspo-block {
        margin-bottom: 120px;
    }
    .subspo-block h2 {
        margin-bottom: 50px;
    }
    .subspo-block .ss_plan {
        margin-top: -100px;
    }
    .subspo-block ol {
        margin-left: 100px;
    }
    .subspo-block ol li {
        align-items: center;
        margin-bottom: 50px;
    }
    .subspo-block ol li p:first-of-type {
        margin-right: 25px;
    }
    .subspo-block li,.subspo-block li p,
    .subspo-block dl dt {
        font-size: 20px;
    }
    .subspo-block dl dd {
        font-size: 18px;
    }
    .subspo-block li p span {
        font-size: 14px;
    }
    .subspo-block ul,
    .subspo-block dl {
        margin-left: 100px;
    }
    .difference p {
        font-size: 18px;
        margin: 0 80px;
    }

    .difference p:nth-child(2) {
        margin-bottom: 30px;
    }
    .mail_magazine {
        margin-bottom: 200px;
    }

    .mail_magazine .link_btn span a {
        font-size: 46px;
    }
    .how_to_ss {
        background: url("image/how_to_ss_bg.svg") no-repeat center top;
        padding: 20px 30px;
    }
    .how_to_ss h2 {
        font-size: 40px;
        font-weight: bold;
    }
    .how_to_ss p {
        font-size: 20px;
        font-weight: bold;
        line-height: 1.6;
        margin-bottom: 50px;
    }

    
    
    
    
    
    
}
    
    
    
    
    
    
    
    
}