@charset "utf-8";

/* CSS Document */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#joan a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
    /* ie 6 7 */
    -ms-filter: "alpha(opacity=80)";
    /* ie 8 */
}

#joan {
    color: #333;
    line-height: 1.8;
}

/* ↑この上は編集しないでください。内容を修正したいときは、新たにこの下に↓指定しなおしてください */

/* OPオリジナルココカラ */

#joan {
    margin: 1em auto;
    width: 94%;
}

#joan img {
    width: 100%;
}

#joan .pc {
    display: none;
}

#joan .sp {
    display: block;
}

#joan a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    /* ie 6 7 */
    -ms-filter: "alpha(opacity=80)";
    /* ie 8 */
}

/* header
----------------------------*/
header {
    margin-bottom: 1em;
    width: 100%;
}
/* lead */
#joan .mv .lead {
    background: url(../images/mv_bg.png);
    padding: 0 1em 1.5em 1em;
}

/* tit
----------------------------*/
h2 {
    margin: 3em 0;
}

/* bt
----------------------------*/
#joan .bt {
    margin: 1em 0 2em 0;
}

/* tx
----------------------------*/
#joan .tx {
    margin: 1em 1em 1.5em;
}
#joan .tx strong {
    font-weight: bold;
}

#joan .tx span {
    font-size: 77%;
}

#joan .tx_cap {
    font-size: 77%;
}



/* fr
----------------------------*/
/* fr_01_03 */
#joan .fr_01_03  {
    background: url(../images/fr_01_03_bg.png) ;
    padding: 1em;
}

#joan .fr_01_03 p strong {
    font-weight: bold;
}

/* fr_03_01 */
#joan .fr_03_01  {
    background: url(../images/fr_03_bg_01_sp.png) no-repeat;
    background-size: 100% auto;
}

#joan .fr_03_01 p {
    padding: 7% 5% 3% 5%;
}

#joan .fr_03_01 strong {
    font-weight: bold;
}

#joan .fr_03_01 p img {
    float: left;
    margin: 0 2em 1em 0;
    width: 40%;
}

#joan .fr_03_02  {
    background: url(../images/fr_03_bg_02_sp.png) no-repeat bottom ;
    background-size: 100% auto;
}

#joan .fr_03_02 p {
    padding: 0 5% 10% 5%;
}

/* margin
----------------------------*/
#joan .m_t {
    margin: 2em 0 0 0;
}

#joan .m_b {
    margin: 0 0 2em 0;
}

/*PC版の修正設定*/
@media only screen and (min-width: 767px) {
    #joan .pc {
        display: block;
    }
    #joan .sp {
        display: none;
    }
    #joan .fr_03_01 p {
        padding: 5em 5em 1em 5em ;
    }
    #joan .fr_03_02 p {
        padding: 0 5em 5em 5em ;
    }
    #joan .fr_01_03  {
        padding: 1em 1.5em;
    }
    #joan .fr_03_01 p img {
    float: left;
        margin: 0 2em 1em 0;
        width: 25%;
    }
}
@media only screen and (min-width: 949px) {
    #joan {
        margin: 1em auto;
        width: 950px;
    }
    #joan .fr_03_01  {
        background: url(../images/fr_03_bg_01_pc.png) no-repeat;
    }
    #joan .fr_03_02  {
        background: url(../images/fr_03_bg_02_pc.png) no-repeat bottom;
    }
}
/* 更なる上書きの設定 */
@media screen and (max-width:640px) {}
/* OPオリジナルココマデ */