@charset "UTF-8";

/*　index
-------------------------------------*/

#page .message_index .mainImg {
    background: url(/images/message/common/main-pic_message.jpg) no-repeat;
    background-size: cover;
}

#page .message_index #main {
    margin-top: 65px;
}
#page .message_index #main .midashiB {
    text-align: center;
    margin-bottom: 55px;
    font-size: 36px;
}

#page #message #main .lead {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    margin-bottom: 55px;
}

#page #message #main figure {
    width: 100%;
    height: auto;
    margin-bottom: 80px;
}

#page #message #main figure img {
    width: 100%;
    height: auto;
}

#page #message #main .midashiC {
    text-align: center;
    font-size: 28px;
}

#page #message #main .midashiC:before {
    display: none;
}

.kadaiBox {
    border: 4px solid #006f97;
    padding: 40px 0;
    margin-bottom: 30px;
}
.kadaiBox .kadai {
}
.kadaiBox ul {
    width: 661px;
    margin: 0 auto;
}
#page.zh .kadaiBox ul {
    width: 580px;
}
.ie #page.zh .kadaiBox ul {
  width: 587px;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #page.zh .kadaiBox ul { width: 587px } /* IE11 */
}
.kadaiBox li {
    font-size: 20px;
    color: #006f97;
    font-weight: bold;
    list-style-type: none;
    margin-bottom: 5px;
}
.kadaiBox li:last-child {
    margin-bottom: 0;
}
.kadaiBox li::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 20px;
    background-image: url(/images/message/common/message_check_001.png);
  background-repeat: no-repeat;
    background-size: contain;
    margin-right: 20px;
}
#page.en .kadaiBox li {
    position: relative;
    padding-left: 45px;
    text-align: left;
    line-height: 1.6;
}
#page.en .kadaiBox li::before {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 20px;
    background-image: url(/images/message/common/message_check_001.png);
  background-repeat: no-repeat;
    background-size: contain;
    margin-right: 20px;
    left: 0;
    top: 9px;
}

#page #message #main .contentBottom {
    -js-display: flex;
    display: flex;
    margin:90px 0 120px 0;
    border-top: 1px solid #ccc;
    padding-top: 45px;
}

/*　IE9用 */
#page .contentIn:not(:target) {
  margin-bottom: 120px\9;
}


/*　IE9用 */

#page #message #main .contentBottom .bottomL {
    width: 665px;
    margin-right: 45px;
}
/*　safari用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .bottomL{
        float: left;
    }
}

/*　IE9用 */
#page #message #main .contentBottom .bottomL:not(:target) {
    float: left\9;
}
/*　safari用 */
.safari #page.en .contentIn {
  margin-bottom: 120px;
}

.safari #page.zh .contentIn {
  margin-bottom: 120px;
}






#page #message #main .contentBottom .midashiD {
    font-size:  20px;
  text-align: left;
}
#page #message #main .contentBottom .txt {
    font-size: 16px;
    height: 2;
}
#page #message #main .contentBottom p {
}
#page #message #main .contentBottom .bottomR {
    width: 410px;
}

/*　safari用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .bottomR{
        float: left;
    }
}
/*　IE9用 */
#page #message #main .contentBottom .bottomR:not(:target) {
    float: left\9;
}



#page #message #main .contentBottom .sengen {
    text-align: center;
    background-color: #f7f7f7;
    padding: 30px;
}
#page #message #main .contentBottom h5 {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 30px;
}
#page #message #main .contentBottom ol {
    width: 346px;
    margin: 0 auto;
}
#page.zh #message #main .contentBottom ol {
    width: 317px;
}
#page #message #main .contentBottom li {
    font-size: 16px;
    font-weight: bold;
    list-style-type: none;
    text-align: left;
    position: relative;
    padding-left: 43px;
    margin-bottom: 8px;
}
#page #message #main .contentBottom ol li::before {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    background-color: #006f97;
    color: #fff;
    font-size: 20px;
    content: "";
    margin-right: 15px;
    position: absolute;
    left: 0;
    text-align: center;
    line-height: 1.5;
}

#page #message #main .contentBottom ol li:nth-of-type(1)::before {
    content: "1";
}
#page #message #main .contentBottom ol li:nth-of-type(2)::before {
    content: "2";
}
#page #message #main .contentBottom ol li:nth-of-type(3)::before {
    content: "3";
}
#page #message #main .contentBottom ol li:nth-of-type(4)::before {
    content: "4";
}

/*20180523 ADD sole-color nagashima*/
/*　cover
-------------------------------------*/

.cover {
    margin: 5px auto 20px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.cover ul {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.cover ul li {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

.bxBox ul li.slide01 {
    background: url(/images/message/common/pic-slide_001.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}

.bxBox ul li.slide02 {
    background: url(/images/message/common/pic-slide_002.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}

.bxBox ul li.slide03 {
    background: url(/images/message/common/pic-slide_003.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}

.bxBox ul li.slide04 {
    background: url(/images/message/common/pic-slide_004.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}

.bxBox ul li.slide05 {
    background: url(/images/message/common/pic-slide_005.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}

.bxBox ul li.slide06 {
    background: url(/images/message/common/pic-slide_006.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
.bxBox ul li.slide07 {
    background: url(/images/message/common/pic-slide_007.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
.bxBox ul li.slide08 {
    background: url(/images/message/common/pic-slide_008.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
.bxBox ul li.slide09 {
    background: url(/images/message/common/pic-slide_009.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
.bxBox ul li.slide10 {
    background: url(/images/message/common/pic-slide_010.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
.bxBox ul li.slide11 {
    background: url(/images/message/common/pic-slide_011.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
.bxBox ul li.slide12 {
    background: url(/images/message/common/pic-slide_012.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
.bxBox ul li.slide13 {
    background: url(/images/message/common/pic-slide_013.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
.bxBox ul li.slide14 {
    background: url(/images/message/common/pic-slide_014.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
/*
.bxBox ul li.slide15 {
    background: url(/images/message/common/pic-slide_015.jpg) center center no-repeat;
    background-size: cover;
    height: 100%;
}
*/

.bxBox ul li img {
    width: 100%;
    display: none;
}

.cover ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

.cover ul {
    display: inline-block;
    overflow: hidden;
}

.bxBox {
    position: relative;
    height: 550px;
    margin: 0 auto 50px;
}
.bxBox {
    width: 80%;
}
.ipad .bxBox {
    min-width: 1120px;
}
.bx-controls {
    display: none;
}


@media screen and (min-width: 760px) {
    .cover,
    .cover ul#slideShow,
    .cover ul#slideShow li {
        height: 600px !important;
    }
}

@media screen and (max-width: 760px) {
    .cover,
    .cover ul#slideShow,
    .cover ul#slideShow li {
        height: 450px !important;
    }
    .bxBox {
        height: 350px !important;
        margin-bottom: 30px;
    }
    .bxBox {
        width: 100%;
    }
}

@media screen and (max-width: 540px) {
    .bxBox {
        height: 250px !important;
    }
    .cover,
    .cover ul#slideShow,
    .cover ul#slideShow li {
        height: 300px!important;
    }
}


.bx-wrapper .bx-viewport {
    box-shadow: none;
    left: 0;
    border: none;
    max-height: 600px;
    height: 100%!important;
}

.bx-wrapper .bx-viewport ul.bxslider {
    height: 100%;
}



@media screen and (max-width: 760px) {
    #page .pageTtl h2 {
        font-size: 49px;   
    }
    #page .message_index #main .midashiB {
        padding: 0 20px;
    }
    #page #message #main .midashiC {
        font-size: 24px;
    }
    @media screen and (max-width: 444px) {
        #page .message_index #main .midashiB {
            font-size: 24px;
            font-size: 7.73vw;
        }
    }
    #page .message_index #main .midashiB br {
    }
    #page #message #main .lead {
        padding: 0 20px;
        margin-bottom: 30px;
    }
    #page #message #main .lead br {
        display: none;
    }
    #page #message #main figure {
        margin-bottom: 30px;
    }
    #page #message #main .midashiC {
        font-size:;
        padding: 0 20px;
    }
    .kadaiBox {
    margin: 0 20px 30px;
    }
    .kadaiBox ul {
        width: initial;
    }
    #page.zh .kadaiBox ul {
        width: initial;
    }
    #page.en .kadaiBox li {
        padding-left: 65px;
    }
    #page.en .kadaiBox li::before {
        left: 22px;
        top: 3px;
    }
    .kadaiBox ul li {
        position: relative;
        padding-left: 62px;
        padding-right: 16px;
        line-height: 1.5;
        margin-bottom: 10px;
        font-size: 15px;
    }
    .kadaiBox ul li::before {
        position: absolute;
        left: 16px;
        top: 10px;
    }
    #page #message #main .midashiC.underMess {
        text-align: left;
    }
    #page #message #main .contentBottom {
        flex-flow: column nowrap;
        margin: 40px 0 0px 0;
    }
    #page #message #main .contentBottom .bottomL {
        margin: 0 0 30px 0;
        width: initial;
        padding: 0 20px;
    }
    #page #message #main .contentBottom .bottomR {
        width: 100%;
    }
    #page #message #main .contentBottom .sengen {
        padding: 20px;
    }
    #page #message #main .contentBottom h5 {
        margin-bottom: 10px;
    }
    #page #message #main .contentBottom li {
        padding-left: 40px;
    }
    @media screen and (max-width: 380px) {
        #page #message #main .contentBottom ol {
            width: initial;
        }
    }
}