html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    tap-highlight-color:rgba(0, 0, 0, 0);
}

*:focus {
    outline: none;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

img,
img a {
    border: none;
    vertical-align: bottom;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

ul li {
    list-style: none;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
}


body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    width: 100%;
    line-height: 0;
    margin: 0 auto;
}

* {
    box-sizing: border-box;
}


/*==========================================================
Main Content
===========================================================*/
.wrap {
    overflow: hidden;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
}
@media screen and (min-width: 751px) {
.wrap {
	max-width: 750px!important;
	margin: 0 auto;
}
}
.main-image-block {
    background: #89C4F3;
}

.main-image {
    background: url(/library/line/contents/img/044/main-image.png) no-repeat;
    background-size: 88%;
    background-position: 8vw 9vw;
    padding: 102vw 12vw 41vw 12vw;
}
@media screen and (min-width: 751px) {
.main-image {
    background-position: 65% 43%;
    padding: 102% 12% 41% 12%;
}
}
.main-btn {
}


.main-tap-block {
    position: relative;
    background: #89C4F3;
}

.title-txt {
    position: absolute;
    left: 0;
    right: 0;
    width: 66%;
    margin: 0 auto;
    top: 1.3vw;
}

.main-tap {
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    tap-highlight-color:rgba(0, 0, 0, 0);
}

.main-tap img {
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    tap-highlight-color:rgba(0, 0, 0, 0);
}


.kyosai-list-block {
    background: #C9E4AF;
}

.minaoshi-block {
    width: 81%;
    margin: 0 auto;
    padding: 7vw 0 7vw 0;
}
@media screen and (min-width: 751px) {
.minaoshi-block {
    padding: 7% 0 7% 0;
}
}
.hosho-block {
    width: 84%;
    margin: 0 auto;
    padding: 0 0 10% 0;
}

.hosho-box {
    border: 2px solid #000;
    border-radius: 10px;
    position: relative;
}

.hosho-box .illust {
    position: absolute;
}

.hosho-box .title {
    text-align: center;
    border-radius: 6px 6px 0 0;
}

.hosho-box .hosho-content {
    background: #FFF;
    text-align: center;
    border-radius: 0 0 10px 10px;
}

.hosho-box .kyosai {
    width: 59%;
    margin: 0 auto;
    padding: 8% 0 3% 0;
}

.hosho-box p {
    font-size: 4vw;
    line-height: 1.6;
}
@media screen and (min-width: 751px) {
.hosho-box p {
    font-size: 1.83rem;
}
}
.hosho-box ul {
    width: 74%;
    margin: 0 auto;
    padding: 5% 0 4% 0!important;
}

.hosho-box ul li {
    margin: 0 0 5% 0;
}


/*===============================
GREEN
===============================*/
.hosho-box-green {
    border: 2px solid #00974B;
}

.hosho-box-green .illust {
    top: 15%;
    width: 105%;
    left: -2%;
}

.hosho-box-green .title {
    background: #00974B;
    width: 100%;
    padding: 3% 32%;
}

/*===============================
RED
===============================*/
.hosho-box-red {
    border: 2px solid #E50012;
}

.hosho-box-red .illust {
    top: 15%;
    width: 110%;
    left: -2%;
}

.hosho-box-red .title {
    background: #E50012;
    width: 100%;
    padding: 3% 32%;
}

/*===============================
PURPLE
===============================*/
.hosho-box-purple {
    border: 2px solid #A40081;
}

.hosho-box-purple .illust {
    top: 13%;
    width: 29%;
    right: -10%;
}

.hosho-box-purple .title {
    background: #A40081;
    width: 100%;
    padding: 3% 29%;
}


/*==========================================================
Modal Content Base
===========================================================*/

.modal-content-block {
    line-height: 1.8;
    font-size: 3vw;
}
@media screen and (min-width: 751px) {
	.modal-content-block {font-size: 1.4rem;}
}
.modal-content {
    position: relative;
}

.modal-content .character {
    width: 11%;
    position: absolute;
    left: 5%;
    top: 2.2%;
}

.modal-content .title {
    width: 58%;
    margin: 0 auto;
    padding: 6% 0 0 0;
}

.modal-content .modal-illust {
    margin: 0 auto;
}

.modal-content .modal-text {
    padding: 0 9%;
    text-align: justify;
}

.modal-content .modal-text p {font-size: 2.8vw;}
@media screen and (min-width: 751px) {
	.modal-content .modal-text, .modal-content .modal-text p {font-size: 1.4rem;}
}
.modal-content .modal-osusume {
    width: 57%;
    margin: 0 auto;
    padding: 6% 0 2% 0;
}


.modal-hosho-block {
    width: 83%;
    margin: 0 auto;
    padding: 0 0 5% 0;
}

.modal-hosho-block .modal-hosho-box {
    border: 2px solid #000;
    border-radius: 10px;
    position: relative;
}

.modal-hosho-block .modal-hosho-title {
    text-align: center;
    border-radius: 6px 6px 0 0;
}

.modal-hosho-block .modal-hosho-content {
    background: #FFF;
    text-align: center;
    border-radius: 0 0 10px 10px;
    padding: 0 5% 5% 5%;
}
.modal-hosho-block .modal-hosho-content .modal-kyosai {
    width: 57%;
    margin: 0 auto;
    padding: 8% 0 0 0;
}
.modal-hosho-block .modal-hosho-content .modal-product {
    width: 78%;
    margin: 0 auto;
    padding: 4% 0 8% 0;
}

.modal-hosho-block .modal-hosho-content .modal-hosho-text {text-align: justify;padding: 0 0 4% 0;}

.modal-hosho-block .modal-hosho-content .modal-hosho-text ul {
}

.modal-hosho-block .modal-hosho-content .modal-hosho-text ul li {
    background-repeat: no-repeat;
    background-position: left 4%;
    background-size: 6%;
    padding: 0 0 0 8%;
}

.modal-hosho-block .modal-hosho-content .modal-hosho-link {
    width: 55%;
    margin: 0 auto;
}

.remodal-close {
    width: 38%;
    margin: 0 auto;
    padding: 7% 0 5vw 0;
}

/*===============================
MODAL KOBETSU PT1
===============================*/
.modal-content-block-m1 {
    background: url(/library/line/contents/img/044/modal/m1.png) no-repeat;
    background-size: 100% 100%;
}

.modal-content-block-m1 .modal-illust {
    width: 43%;
    padding: 7% 0 4% 0;
}

.modal-hosho-block .modal-hosho-box-pt1-1 {
    border: 2px solid #FF6400;
}

.modal-hosho-block .modal-hosho-box-pt1-1 .modal-hosho-title {
    background: #FF6400;
    padding: 0.5% 10% 3.3% 10%;
}

.modal-hosho-block .modal-hosho-box-pt1-1 ul li {
    background-image: url(/library/line/contents/img/044/modal/pt1/5.png);
}

.modal-hosho-block .modal-hosho-box-pt1-2 {
    border: 2px solid #5662B7;
}

.modal-hosho-block .modal-hosho-box-pt1-2 .modal-hosho-title {
    background: #5662B7;
    padding: 0.5% 10% 3.3% 10%;
}

.modal-hosho-block .modal-hosho-box-pt1-2 ul li {
    background-image: url(/library/line/contents/img/044/modal/pt1/9.png);
}


/*===============================
MODAL KOBETSU PT2
===============================*/
.modal-content-block-m2 {
    background: url(/library/line/contents/img/044/modal/m2.png) no-repeat;
    background-size: 100% 100%;
}

.modal-content-block-m2 .title {
    padding: 9% 0 0 0;
}
.modal-content-block-m2 .modal-illust {
    width: 43%;
    padding: 4% 0 3% 0;
}

.modal-hosho-block .modal-hosho-box-pt2-1 {
    border: 2px solid #487FC9;
}

.modal-hosho-block .modal-hosho-box-pt2-1 .modal-hosho-title {
    background: #487FC9;
    padding: 0.5% 18% 3.3% 17%;
}

.modal-hosho-block .modal-hosho-box-pt2-1 ul li {
    background-image: url(/library/line/contents/img/044/modal/pt2/5.png);
}

.modal-hosho-block .modal-hosho-box-pt2-2 {
    border: 2px solid #6FA844;
}

.modal-hosho-block .modal-hosho-box-pt2-2 .modal-hosho-title {
    background: #6FA844;
    padding: 0.5% 26% 3.3% 25%;
}

.modal-hosho-block .modal-hosho-box-pt2-2 ul li {
    background-image: url(/library/line/contents/img/044/modal/pt2/9.png);
}


/*===============================
MODAL KOBETSU PT3
===============================*/
.modal-content-block-m3 {
    background: url(/library/line/contents/img/044/modal/m3.png) no-repeat;
    background-size: 100% 100%;
}

.modal-content-block-m3 .title {
    padding: 6% 0 0 0;
}
.modal-content-block-m3 .modal-illust {
    width: 45%;
    padding: 5% 0 3% 0;
}

.modal-hosho-block .modal-hosho-box-pt3-1 {
    border: 2px solid #5662B7;
}

.modal-hosho-block .modal-hosho-box-pt3-1 .modal-hosho-title {
    background: #5662B7;
    padding: 0.5% 4% 3.3% 4%;
}

.modal-hosho-block .modal-hosho-box-pt3-1 ul li {
    background-image: url(/library/line/contents/img/044/modal/pt3/5.png);
}

.modal-hosho-block .modal-hosho-box-pt3-2 {
    border: 2px solid #4FA9A4;
}

.modal-hosho-block .modal-hosho-box-pt3-2 .modal-hosho-title {
    background: #4FA9A4;
    padding: 0.5% 4% 3.3% 3%;
}

.modal-hosho-block .modal-hosho-box-pt3-2 ul li {
    background-image: url(/library/line/contents/img/044/modal/pt3/9.png);
}



/*===============================
MODAL KOBETSU PT4
===============================*/
.modal-content-block-m4 {
    background: url(/library/line/contents/img/044/modal/m4.png) no-repeat;
    background-size: 100% 100%;
}

.modal-content-block-m4 .title {
    padding: 8% 0 0 0;
}
.modal-content-block-m4 .modal-illust {
    width: 64%;
    padding: 8% 0 6% 0;
}

.modal-hosho-block .modal-hosho-box-pt4-1 {
    border: 2px solid #E50012;
}

.modal-hosho-block .modal-hosho-box-pt4-1 .modal-hosho-title {
    background: #E50012;
    padding: 0.5% 7% 3.3% 6%;
}

.modal-hosho-block .modal-hosho-box-pt4-1 ul li {
    background-image: url(/library/line/contents/img/044/modal/pt4/5.png);
}

.modal-content-block-m4 .modal-hosho-block .modal-hosho-content .modal-product {
    width: 57%;
    padding: 6% 0 5% 0;
}

/*.modal-hosho-block .modal-hosho-box-pt4-2 {*/
/*    border: 2px solid #4FA9A4;*/
/*}*/

/*.modal-hosho-block .modal-hosho-box-pt4-2 .modal-hosho-title {*/
/*    background: #4FA9A4;*/
/*    padding: 0.5% 10% 3.3% 10%;*/
/*}*/

/*.modal-hosho-block .modal-hosho-box-pt4-2 ul li {*/
/*    background-image: url(/library/line/contents/img/044/modal/pt3/9.png);*/
/*}*/



/*===============================
MODAL KOBETSU PT5
===============================*/
.modal-content-block-m5 {
    background: url(/library/line/contents/img/044/modal/m5.png) no-repeat;
    background-size: 100% 100%;
}

.modal-content-block-m5 .title {
    padding: 6% 0 0 0;
    width: 49%;
}
.modal-content-block-m5 .modal-illust {
    width: 63%;
    padding: 4% 0 4% 0;
}

.modal-hosho-block .modal-hosho-box-pt5-1 {
    border: 2px solid #A40081;
}

.modal-hosho-block .modal-hosho-box-pt5-1 .modal-hosho-title {
    background: #A40081;
    padding: 0.5% 5% 3.3% 2%;
}

.modal-hosho-block .modal-hosho-box-pt5-1 ul li {
    background-image: url(/library/line/contents/img/044/modal/pt5/5.png);
}
.modal-content-block-m5 .modal-hosho-block .modal-hosho-content .modal-product {
    width: 57%;
    padding: 7% 0 5% 0;
}

/*.modal-hosho-block .modal-hosho-box-pt5-2 {*/
/*    border: 2px solid #4FA9A4;*/
/*}*/

/*.modal-hosho-block .modal-hosho-box-pt5-2 .modal-hosho-title {*/
/*    background: #4FA9A4;*/
/*    padding: 0.5% 10% 3.3% 10%;*/
/*}*/

/*.modal-hosho-block .modal-hosho-box-pt5-2 ul li {*/
/*    background-image: url(/library/line/contents/img/044/modal/pt5/9.png);*/
/*}*/






/*==========================================================
Gloval Footer
===========================================================*/
#g_footer {
}

/* 共有CSS「footer-zenrosai_sp.css」をOverwrite
-------------------------------------------------*/

footer {
    background-color: #fff;
    width: 100%;
    margin: 0;
    padding: 5px 0 10px;
    border-top: none;
}

.footer_bottom {
    background: url(/library/line/contents/img/044/footer_bg_sp.png) 50% 50% no-repeat;
    background-size: 100%;
    padding: 5.067% 0 0;
    font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, Sans-Serif;
    font-size: 4vw;
    color: #000;
    line-height: 1.8;
}

.footer_bottom .inner {
    padding: 0 4%;
}

.footer-logo {
    width: 52.667%;
    line-height: 1;
    margin: 0 auto 11.733%;
}

.footer-logoNews {
    width: 32%;
    line-height: 1;
    margin-left: auto;
}

.footer-copy {
    width: 100%;
    text-align: right;
    font-size: 2.267vw;
    line-height: 1;
    margin: 0;
    margin-top: 4%;
    margin-right: 4%;
}

@media screen and (min-width: 751px) {
 /*   .footer_bottom {
        /*padding: 38px 0 0;*/
        /*background: url(/library/line/contents/img/044/footer_bg_pc.png) 50% 50% no-repeat;*/
        /*background-size: 100%;* /
        clear: both;
        position: relative;
        padding: 30px 0 60px;
        font-size: 1.0em;
        background: url(/library/line/contents/img/044/footer_line_img01.png) top 70px center / 750px 45px no-repeat, url(/library/line/contents/img/044/footer_line_img02.png) top 86px left / 1px 13px repeat-x;
        background-color: #fff;
        overflow: visible;
    }
*/
    .footer_bottom.inner {
        width: 100%;
        padding: 0 42px;
    }

    .footer-logo {
        width: 197px;
		width: 45%;
        font-size: 0;
        margin: 0 auto 110px;
    }

    .footer-logoNews {
        width: 150px;
        font-size: 0;
    }

    .footer-copy {
        font-size: 14px;
        margin-top: 1.667%;
    }
}

.pc_view {
    display: block !important;
}

.sp_view {
    display: none !important;
}

@media only screen and (max-width: 768px) {
    .pc_view {
        display: none !important;
    }

    .sp_view {
        display: block !important;
    }
}