@charset "UTF-8";
/*   
Template:xeory_extension
Theme Name:XeoryExtension child
Description:xeory_extension の子テーマです
*/

section#sp00 {
    display: flex;
    margin: 1em 0 4em;
    justify-content: space-between;
    }
section#sp01{
    margin-bottom:6em;
    }
section#sp02 h2{
    background:#ff9c52;
    border-color:#f57517;
    }
    
.sp-btn {
    width: 47.5%;
    font-size:0.9em;
    }
.sp-btn img{
    border:1px solid #47b39d;
    margin-bottom:10px;
    }
    .sp-btn img:hover{
        opacity:0.75;
        }
.sp-btn span{
    display:block;
    }
.sp-btn .btn-name {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom:10px;
    }
    .sp-btn i{
        padding-right:0.3em;
        }


.sp-detail {
    margin: 0 0 28px;
    border: 1px #e5e5e5 solid;
    background: #fafafa;
    }
.sp-detail h3{
    font-size: 18px;
    margin: 2em 0 1em;
    border:none;
    }
.sp-detail h3 span{
    color:#fff;
    font-weight:600;
    background: #f89852;
    padding: 10px 20px 10px 50px;
    position: relative;
    margin-left: -7px;
    }
.sp-detail h3 span:before {
    content:"";
    width:0;
    height:0;
    border-top: 20px solid transparent;
    border-right: 0em solid transparent;
    border-bottom: 0em solid transparent;
    border-left: 10px solid #f89852;
    position:absolute;
    bottom: 0px;
    right: -10px;
    }
.sp-detail h3 span:after {
    content:"";
    width:0;
    height:0;
    border-top: 0em solid transparent;
    border-right: 0em solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 10px solid #f89852;
    position:absolute;
    top: 0px;
    right: -10px;
    }
#sp01 .sp-detail h3 span{
    background: #6fc3b2;    
    }
#sp01 .sp-detail h3 span:before {
    border-left: 10px solid #6fc3b2;
    }
#sp01 .sp-detail h3 span:after {
    border-left: 10px solid #6fc3b2;
    }
.sp-detail h3#short{
    display:none;
    }


    .sp-detail p,
    .sp-detail dl,
    .sp-detail ul{
        margin: 0px 30px 60px 80px;
        padding-left:0;
        }
    .sp-detail ol{
        margin: 0px 30px 60px 80px;
        font-weight:600;
        }
        .sp-detail ol li{
            padding-left:0.5em;
            text-indent: 0;
            }
    .sp-detail h4{
        margin: 0px 30px 20px 80px;
        border:none;
        padding-left:0;
        }
    .sp-detail dl.plan dd{
        margin-bottom: 1em;
        font-size: 0.9rem;
        }  
    .sp-detail dl.plan dt{
        margin-left:30px;
        text-indent:-32px;
        }
        .sp-detail dl.plan dt .ib{
            margin-left:0;
            text-indent:-0;
            }
    .sp-detail ul{
        font-weight:600;
        list-style: none;
        }
        .support-list li {
            margin-bottom: 0.5rem;
            text-indent:-0.7em;
            }
        .sp-detail ul i{
            color: #6fc3b2;
            }
        .sp-detail .satooya{
            font-weight:600;
            margin-bottom: 20px;
            }
     .sp-how p{
        margin-bottom:1.5em; 
        }
     .sp-how dl dt{
        width:5em;
        float:left;
        }
     .sp-how dl dd{
        padding-left:6em;
        margin:0;
        }

span.sp {
    margin-right: 2em;
    display: inline-block;
    margin-bottom: 0.5em;
    font-weight:600;
    }
span.sp-a {
    background: #fdac70;
    display: inline-block;
    text-align: center;
    width: 1.5em;
    height: 1.5em;
    line-height: 1;
    border-radius: 50%;
    padding: 4px;
    margin-right: 0.5em;
    color: #fff;
    text-indent: 0;
    }
    .satooya span.sp-a {
        color:#fdac70;
        }
#sp01 span.sp-a {
    background: #6fc3b2;
    }

.sp-detail .aside{
    font-size:0.8em;
    font-weight:normal;
    color:#888;
    display: inline-block;
    }

.sp-message {
    border-left: 5px solid #57bca8;
    padding-left:0.8em;
    margin: 6em 0 1em;
    }
    .sp-message h3{
        border:none;
        margin-bottom: 0;
        line-height: 1.3;
        padding: 0;
        font-weight: 600;
        }
    span.author {
        font-size: 14px;
        font-size: 0.87rem;
        }
    span.name {
        font-size: 19px;
        font-size: 1.2rem;
        font-weight: 600;
        display:inline-block;
        }
h3#sp-officer{
    border-bottom:none;
    border-left: 5px solid #57bca8;
    padding: 0.5em 0.8em;
    margin-bottom: 0.5em;
    }        
table#support-table{
    width:100%;
}
table#support-table th {
    vertical-align:top;
}
table#support-table tr td {
    border-right:none;
}
table#support-table tr td:last-child {
    font-size:13px;
    font-size: 0.8rem;
    border-left:none;
}
span.ib {
    display: inline-block;
}





@media screen and (max-width: 767px) {
section#sp00 {
    margin: 0em 0 3em;
    }
.sp-btn {
    width: 46.0%;
    }
.sp-btn img{
    margin-bottom:5px;
    }
.sp-btn .btn-name {
    font-size: 1rem;
    line-height:1.4;
    margin-bottom:4px;
    }
    .sp-btn a i.fa.fa-chevron-circle-right{
        padding-right:0.2em;
        }
.sp-detail h3{
    font-size: 17px;
    margin: 1em 0 0.5em;
    }
.sp-detail h3 span{
    padding: 10px 10px 10px 17px;
    }   
.sp-detail h3#long{
    display:none;
    }
.sp-detail h3#short{
    display:block;
    }

    div#content .post-content .sp-detail ul{
        margin: 0px 10px 30px 40px;      
        }
    .sp-detail p,
    .sp-detail dl,
    .sp-detail ol{
        margin: 0px 10px 30px 20px;
        }
        .sp-detail ol li{
            padding-left:0.1em;
            }
    .sp-detail h4{
        margin: 30px 10px 20px 20px;
        }
        .sp-detail .satooya{
            margin-bottom: 15px;
            }
     .sp-how p{
        margin-bottom:1em; 
        }
     .sp-how dl dd{
        padding-left:5.5em;
        }

h3#sp-officer,
.sp-message h3 {
    font-size: 20px;
    font-size: 1.25rem;
    padding-bottom: 0.5em;
    }
    .sp-message .author{
        font-size: 13.6px;
        font-size:0.85rem;
        }

table#support-table {
    white-space: normal;
    display: table;
    }
table#support-table tr th,
table#support-table tr td {
    display: block;
    width: 100%;
    border:none;
}
table#support-table tr td:last-child {
    padding-top:0;
    font-size:11px;
    font-size:0.7rem;
    }
}