@charset "utf-8";

.lf { float: left; }
.rh { float: right; }
.cf:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }

.forPcBlock { display: block !important; }
.forSpBlock { display: none !important; }
#contents .headSection .ttl { width: auto !important; }
.headSection .ttl img { width: auto !important; vertical-align: top !important; }
#contents .headSection .leftArea { margin-top: 0px; }
#contents .headSection .rightArea { padding-top: 4px !important; }
#contents .headSection .ttl h1 span { font-size: 22px; line-height: 1.2em; padding: 2px 0px; display: inline-block; font-weight: bold; }
#contents .headSection .ttl h1, #contents .headSection .ttl p { margin-left: 10px; }

.mainbnr { background: url(../images/bnr_bg.jpg) no-repeat center center; background-size: cover; text-align: center; padding: 40px 0px 30px 0px; }

.col1Contents { width: 960px; margin: 0 auto; }

.c1 { font-size: 16px; line-height: 1.5em; padding: 55px 0px; }
.t1 { background: url(../images/t1bg.png) no-repeat center center; background-size: cover; font-size: 36px; font-weight: bold; color: #fff; text-align: center; padding: 15px; margin-bottom: 50px; }

.c2 { margin-bottom: 50px; }
.c2 > .lf { border: #4f72e1 solid 1px; width: 468px; }
.c2 > .rh > .lf { border: #e88900 solid 1px; width: 234px; margin-right: 9px; }
.c2 > .rh > .rh { border: #f96161 solid 1px; width: 234px; }
.c2 h4 { text-align: center; padding: 12px; }
.c2 > .lf h4 { border-bottom: #4f72e1 solid 1px; }
.c2 > .rh > .lf h4 { border-bottom: #e88900 solid 1px; }
.c2 > .rh > .rh h4 { border-bottom: #f96161 solid 1px; }
.c2 > .lf > .cf > .lf { border-right: #4f72e1 solid 1px; width: 234px; }
.c2 > .lf > .cf > .rh { width: 232px; }
.c2 .bx { padding: 20px 17px; box-sizing: border-box; }
.c2 .bx1 { background: url(../images/bg1.png) no-repeat 0px 0px; }
.c2 .bx2 { background: url(../images/bg2.png) no-repeat 0px 0px; }
.c2 .bx3 { background: url(../images/bg3.png) no-repeat 0px 0px; }
.c2 .bx4 { background: url(../images/bg4.png) no-repeat 0px 0px; }
.c2 .bx h5 { display: flex; align-items: center; justify-content: center; height: 60px; margin: 0px -15px 20px -15px; }
.c2 .bx h5 span { display: inline-block; font-size: 14px; line-height: 1.2em; font-weight: normal; padding: 2px 0px 2px 10px; }
.c2 .bx h5 span b { display: block; font-size: 18px; padding-bottom: 10px; }
.c2 .bx2 h5 span b, .c2 .bx4 h5 span b { font-size: 15px; padding-bottom: 5px; }
.c2 .bx1 h5 span { border-left: #46c4ff solid 10px; }
.c2 .bx1 h5 span b { color: #00aeff; }
.c2 .bx2 h5 span { border-left: #0d41ab solid 10px; }
.c2 .bx2 h5 span b { color: #0d41ab; }
.c2 .bx3 h5 span { border-left: #e88900 solid 10px; }
.c2 .bx3 h5 span b { color: #f9a834; }
.c2 .bx4 h5 span { border-left: #f96161 solid 10px; }
.c2 .bx4 h5 span b { color: #e10404; }
.c2 .bx p { font-size: 16px; line-height: 1.5em; margin: 18px 0px; min-height: 9em; }

.mr { text-align: center; }
.mr a { color: #fff !important; font-weight: bold; background: url(../images/arrow.png) no-repeat right 10px center, linear-gradient(#1686d4, #0c60b7); display: inline-block; padding: 10px 40px 10px 30px; border-radius: 5px; }
.mr a:hover { text-decoration: none; opacity: 0.75; }

.c3 { text-align: center; margin-bottom: 75px; }
.c3 div { display: inline-block; text-align: left; }
.c3 p { font-size: 12px; padding-top: 5px; }

.c4 { font-size: 16px; line-height: 1.7em; margin-bottom: 45px; }

.c5 { margin-bottom: 100px; }
.c5 > div { float: left; width: 310px; padding: 22px; margin-right: 15px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); }
.c5 > div:last-child { margin-right: 0px; }
.c5 h4 { text-align: center; font-weight: bold; border-bottom: #dcdcdc solid 2px; font-size: 18px; color: #1c4598; margin-bottom: 22px; }
.c5 h4 b { font-size: 36px; }
.c5 p { font-size: 14px; line-height: 1.8em; min-height: 5.4em; margin: 30px 0px; }

.c6 > div { margin-bottom: 100px; }
.c6 > div > h3 { font-size: 30px; font-weight: bold; color: #fff; background-color: #1c4598; border-left: #e88900 solid 16px; padding: 8px 20px; }
.c6 > div > .cont { background: url(../images/bg5.png); padding: 20px 20px 1px 20px; }
.c6 .list { padding: 30px 0px; }
.c6 .list a:hover img { opacity: 0.75; }
.c6 .list > div { float: left; margin: 0px 20px 20px 0px; text-align: center; }
.c6 .list > div:nth-child(4n) { margin-right: 0px; }
.c6 .list > div:nth-child(4n + 1) { clear: both; }
.c6 .list .mr { margin-top: 15px; }
.c6 .list .mr a { background: url(../images/arrow2.png) no-repeat right 10px center, linear-gradient(#1686d4, #0c60b7); padding: 10px 35px 10px 20px; display: block; }
.c6 h4 { font-size: 30px; font-weight: bold; color: #1c4598; text-align: center; margin-bottom: 40px; }
.c6 .tx { margin-bottom: 20px; background-color: #fff; clear: both; }
.c6 .tx h5 { background-color: #1c4598; font-weight: bold; display: flex; color: #fff; align-items: center; }
.c6 .tx h5 i { font-size: 36px; font-style: normal; line-height: 40px; height: 40px; background-color: #e88900; padding: 10px 0px; width: 120px; text-align: center; }
.c6 .tx h5 i:before { content: 'Point'; font-size: 24px; line-height: 40px; vertical-align: baseline; }
.c6 .tx h5 span { display: block; font-size: 18px; padding: 0px 15px; }
.c6 .tx > div { text-align: center; padding: 35px 40px; }
.c6 .tx > div p { text-align: left; font-size: 16px; line-height: 1.8em; margin-bottom: 35px; }
.c6 .tx > div img { margin-bottom: 35px; }
.c6 .tx > div img.rh { margin: -20px 0px -20px 50px; }
.c6 .tx > div div.b { margin-bottom: 35px; font-weight: bold; font-size: 18px; }
.c6 .tx > div p.s { font-size: 14px; }
.c6 .tx > div p:last-child, .c6 .tx > div img:last-child, .c6 .tx > div div.b:last-child { margin-bottom: 0px; }
.c6 .tx.lf, .c6 .tx.rh { width: 450px; clear: none; }
.c6 .tx.r1 { height: 450px; }
.c6 .tx.r2 { height: 380px; }

.c6 > div.spc > h3 { border-left: none; text-align: center; background-color: #004d94; }
.c6 > div.spc > .cont { background: url(../images/bg6.png); }
.spc .tx { float: left; width: 300px; clear: none; margin-right: 10px; height: 505px; }
.spc .txl { margin-right: 0px; }
.spc .tx h5 { display: block; color: #fff; align-items: center; }
.spc .tx h5 i { display: block; padding: 5px 0px 0px 0px; width: auto; }
.spc .tx h5 span { padding: 15px 0px; text-align: center; }
.spc .tx > div { padding: 20px; }
.spc .tx > div p { font-size: 15px; }
.c6 .mr2 { clear: both; text-align: center; padding: 30px 0px 50px 0px; }
.c6 .mr2 a { display: inline-block; background: url(../images/arrow2.png) no-repeat right 15px center; background-color: #004d94; color: #fff; font-weight: bold; font-size: 20px; padding: 15px 45px 13px 45px; border-radius: 40px; }
.c6 .mr2 a:hover { text-decoration: none; opacity: 0.75; }

.c7 { padding: 0px 40px; margin-bottom: 100px; }
.c7 div { font-weight: bold; font-size: 18px; padding-bottom: 20px; }
.c7 p { line-height: 1.8em; }

#wrapper { font-size: 16px; }

@media screen and (max-width: 767px) {
.forPcBlock { display: none !important; }
.forSpBlock { display: block !important; }

#topicPath { width: auto; padding: 10px; font-size: 10px; }
#topicPath li { padding-right: 10px; margin-right: 4px; }
#topicPath li:last-child { margin-right: 0px; padding-right: 0px; }
#contents { min-width: auto !important; }
#contents .headSection { text-align: center; padding: 20px 0px; }
#contents .headSection .innerBlock { width: auto !important; }
#contents .headSection .leftArea { float: none !important; width: auto !important; }
#contents .headSection .rightArea { float: none !important; width: auto !important; clear: both; }
#contents .headSection .ttl h1, #contents .headSection .ttl p { background: none !important; padding: 10px 0px !important; margin: 0px !important; font-size: 14px; display: block !important; }
#contents .headSection .ttl h1 span { font-size: 14px; font-weight: bold; }
#contents .headSection .ttl img { width: 226px !important; height: auto; }
#contents .headSection .rightArea .purchase02 { margin: 0 auto; }

.mainbnr { padding: 10px; }
.mainbnr img { content: url(../images/img1_sp.png); max-width: 100%; height: auto; }

.col1Contents { width: auto; }
.col1Contents img { max-width: 100%; height: auto; }

.c1 { font-size: 12px; padding: 20px 10px; }
.t1 { background: url(../images/t1bg_sp.png) no-repeat right center; background-size: cover; font-size: 18px; padding: 15px; margin-bottom: 25px; text-align: left; }

.c2 { padding: 0px 10px; margin-bottom: 15px; }
.c2 > .lf { width: calc(100% - 2px); margin-bottom: 15px; }
.c2 > .rh > .lf { width: calc(50% - 7px); margin-right: 10px; }
.c2 > .rh > .rh { width: calc(50% - 7px); }
.c2 h4 { padding: 10px; }
.c2 h4 img { height: 30px; width: auto; }
.c2 > .lf > .cf > .lf { width: 50%; }
.c2 > .lf > .cf > .rh { width: 50%; }
.c2 .bx { padding: 10px 7px; }
.c2 .bx h5 { height: 50px; margin: 5px -7px 25px -7px; }
.c2 .bx h5 span { font-size: 10px; padding: 1px 0px 1px 5px; border-left-width: 5px; }
.c2 .bx h5 span b { font-size: 12px; padding-bottom: 5px; line-height: 1.2em; }
.c2 .bx img { width: 130px; display: block; margin: 0 auto; }
.c2 .bx h5 span b { font-size: 15px; padding-bottom: 5px; }
.c2 .bx p { font-size: 11px; margin: 12px 0px; min-height: 8.5em; }

.mr a { background-position: right 5px center, center; background-size: 10px auto, auto; padding: 7px 25px 7px 15px; font-size: 12px; }

.c3 { margin-bottom: 45px; padding: 0px 10px; }
.c3 img { content: url(../images/img_select_ad_sp.jpg); }
.c3 p { font-size: 8px; }

.c4 { font-size: 12px; line-height: 1.5em; padding: 0px 10px; margin-bottom: 25px; }

.c5 { margin-bottom: 30px; padding: 0px 10px; }
.c5 > div { float: none; width: auto; padding: 15px; margin: 0px 0px 10px 0px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); }
.c5 > div:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
.c5 > div > div:first-child { float: left; width: calc(50% - 5px); }
.c5 > div > div:last-child { float: right; width: calc(50% - 5px); }
.c5 h4 { font-size: 11px; border-bottom: none; margin-bottom: 10px; }
.c5 h4 b { font-size: 18px; }
.c5 p { font-size: 12px; line-height: 1.5em; min-height: 0px; margin: 10px 0px; }
.c5 .mr a { font-size: 11px; padding: 7px 20px 7px 10px; }

.c6 > div { margin-bottom: 50px; }
.c6 > div > h3 { font-size: 15px; border-left-width: 20px; padding: 7px 10px; }
.c6 > div > .cont { padding: 10px 10px 1px 10px; }
.c6 .list { padding: 15px 5px 10px 5px; }
.c6 .list > div { width: calc(50% - 16px); margin: 0px 8px 15px 8px; }
.c6 .list .mr { margin-top: 5px; }
.c6 .list .mr a { background-position: right 5px center, center; background-size: 7px auto, auto; padding: 10px 10px 10px 0px; font-size: 10px; }
.c6 h4 { font-size: 15px; margin-bottom: 25px; }
.c6 .tx { margin-bottom: 10px; }
.c6 .tx h5 i { font-size: 18px; line-height: 20px; height: 20px; width: 60px; }
.c6 .tx h5 i:before { font-size: 12px; line-height: 20px; }
.c6 .tx h5 span { font-size: 12px; padding: 0px 7px; line-height: 1.2em; }
.c6 .tx > div { padding: 15px; }
.c6 .tx > div p { font-size: 11px; line-height: 1.5em; margin-bottom: 15px; }
.c6 .tx > div img { margin-bottom: 15px; }
.c6 .tx > div img.rh { width: 120px; margin: 0px 0px 0px 15px; }
.c6 .tx > div div.b { margin-bottom: 15px; font-size: 12px; }
.c6 .tx > div p.s { font-size: 10px; }
.c6 .tx > div p:last-child, .c6 .tx > div img:last-child, .c6 .tx > div div.b:last-child { margin-bottom: 0px; }
.c6 .tx.lf, .c6 .tx.rh { width: auto; float: none; }
.c6 .tx.r1, .c6 .tx.r2 { height: auto; }
.c6 .sph1 { width: 150px; height: auto; }

.spc .tx { float: none; width: auto; margin-right: 0px; height: auto; }
.spc .tx h5 { display: flex; }
.spc .tx h5 i { padding: 10px 0px; width: 60px; }
.spc .tx h5 span { padding: 0px 6px; }
.spc .tx > div { padding: 15px; }
.spc .tx > div p { font-size: 11px; }
.spc .tx > div img { float: right; width: 120px; margin: 0px -10px 0px 15px; }
.c6 .mr2 { padding: 10px 0px 20px 0px; }
.c6 .mr2 a { font-size: 11px; padding: 13px 40px; }

.c7 { padding: 0px 10px; margin-bottom: 40px; }
.c7 div { font-size: 12px; padding-bottom: 5px; }
.c7 p { font-size: 10px; line-height: 1.5em; }

}