@charset "utf-8";

/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　01. 大枠レイアウト
　02. モジュール

******************************************************************************* */
/* ==

　01. 大枠レイアウト

=============================================================================== */
/* ==

　02. モジュール

=============================================================================== */
.jcb_logo {
    display: block;
    position: relative;
    left: -28em;
    top: 5px;
}
.boxTitle {
    margin-top: -85px;
}
.contents-top {
    width: 980px;
    margin: 0 auto;
}
.contents-main {
}
/* ------------------------------------------------------
 * 画像
 * ------------------------------------------------------ */
.img01 {
    height:130px;
}
.img02 {
    height:350px;
}
.img03 {
    background-size: 100px;
    background-image: url('../images/index_img03.jpg');
    background-position: right+10px top+10px;
    background-repeat: no-repeat;
}
.img04 {
    max-width: 600px;
}
/* ------------------------------------------------------
 * 文字
 * ------------------------------------------------------ */
.p01 {
    font-size: 200%;
    color: #FFA500;
    font-weight: bold;
    margin :0;
} 
.p02 {
    margin: 50px 0 20px;
    text-align: center;
}
.p02 span {
	padding:10px 30px;
    background-color : rgba(152, 51, 253, 1);
    color : #FFF;
    width:300px;
    font-size: 200%;
}
.p03 {
    font-size: 200%;
    font-weight: bold;
}
.p04 {
}
.r_underline {
    color: #F00;
    text-decoration: underline;
}

/* ------------------------------------------------------
 * PC／SMP切替
 * ------------------------------------------------------ */
.img_pc {
    display:inline-block;
}
.img_smp {
    display:none;
}
.p_pc {
    display:block;
}
.p_smp {
    display:none;
}
/* ------------------------------------------------------
 * 枠
 * ------------------------------------------------------ */
.box {
    border: 1px solid #333;
    padding: 20px;
}
.box-item {
    margin: 20px 0;
}
.inner-box {
    border: 3px solid #333;
    margin: 0 40px;
    text-align: center;
}
.inner-box p {
    padding: 20px 10px 0;
}
.code {
    display: table-cell;
    background-color: #FFA500;
    padding: 10px;
    text-align: center;
    -webkit-border-radius: 15px;/* for Safari and Chrome */
    -moz-border-radius: 15px; /* for Firefox */
    -o-border-radius: 15px; /* for opera */
    border-radius: 15px;
    color: #FFF;
    font-weight: bold;
    font-size: 175%;
    vertical-align: middle;
    width: 150px;
}
.present {
    display: table-cell;
    padding: 0 0 0 20px;
    vertical-align: middle;
}
.present p {
    font-size: 180%;
    margin: 0;
}
.present div {
    font-size: 145%;
}
.span_l {
    float: left;
}
.span_r {
    float: right;
}
.span_r:before {
    content: "　・・・　";
}
.span_r:after,
.span_l:after {
    content: "";
    clear: both;
    display: block;
}
.hight-light {
    background-color:rgba(255, 207, 0, 1);
    border-radius: 7px;
}
/* ------------------------------------------------------
 * ボタン
 * ------------------------------------------------------ */
.btns {
}
.btn {
    background-color: rgba(152, 51, 253, 0.8);
    -webkit-border-radius: 15px;/* for Safari and Chrome */
    -moz-border-radius: 15px; /* for Firefox */
    -o-border-radius: 15px; /* for opera */
    border-radius: 15px;
    color: #FFF;
    font-size: 170%;
    text-decoration: none;
    padding: 15px;
    box-shadow: 5px 5px 5px 1px rgba(152, 51, 253, 1);
}
.btn:hover {
    background-color: rgba(152, 51, 253, 0.5);
    box-shadow: 5px 5px 5px 1px rgba(152, 51, 253, 0.8);
}

.btn-push:active {
    transform: translateY(4px);
    border-bottom: none;
}

@media screen and (max-width:768px) {

    .contents-top {
        width: 100%;
        margin: 0 auto;
    }
    .jcb_logo {
        display: block;
        position: relative;
        left: 0;
        top: 0;
        text-align: left;
    }
    .box {
        padding: 10px;
    }
    .boxTitle p {
        font-size:110%;
    }
    .boxTitle span {
        position: relative;
        left :18px;
    }
    .inner-box {
        margin:0;
    }
    .code {
        display: inline-block;
        padding: 0;
        width: 100%;
        margin: 0;
    }
    .present {
        display: inline-block;
        padding: 0;
    }
    .present-title {
        text-align: center;
    }
    .p01 {
        font-size: 130%;
    }
    .p02 {
        background-color : rgba(152, 51, 253, 1);
    }
    .p02 span {
        padding: 0;
        background-color : rgba(0, 0, 0, 0);
        font-size: 150%;
    }
    .p03-01 {
        margin: 0 130px 0 0;
        text-indent: -1em;
        padding: 0 0 0 1em;
    }
    .p04 {
        font-size: 100%;
        text-align: left;
    }
    .img01-hosoku {
        text-align: left;
        text-indent: -1em;
        margin: 0 0 1em 1em;
    }
    .img02 {
        height: auto;
    }
    .img04 {
        max-width: 90%;
    }
    .smp-br {
        display: block;
    }
    .span_l,
    .span_r {
        display: block;;
    }
    .btns {
        background-color: rgba(152, 51, 253, 0.8);
        -webkit-border-radius: 15px;/* for Safari and Chrome */
        -moz-border-radius: 15px; /* for Firefox */
        -o-border-radius: 15px; /* for opera */
        border-radius: 15px;
        color: #FFF;
        text-decoration: none;
        padding: 15px;
        box-shadow: 5px 5px 5px 1px rgba(152, 51, 253, 1);
    }
    .btn {
        background-color: rgba(0, 0, 0, 0);
        border : 0px;
        box-shadow: none;
        font-size: 145%;
    }
    .btn:hover {
        background-color: rgba(0, 0, 0, 0);
        border : 0px;
        box-shadow: none;
    }
}