@charset "UTF-8";
/* ===================================================
Services / 489ban / Feature CSS
====================================================== */

/* ---------------------------------------------------
Global Header Overwrite
------------------------------------------------------ */
#g_header { position: absolute;}

/* ---------------------------------------------------
	Sub Header Overwrite
------------------------------------------------------ */
@media screen and (max-width: 600px) {
.sub_header .sub_box_01 .sub_btn_01{ width: 100%; padding: 0; margin: 0;}
}

/* ---------------------------------------------------
Contents Overwrite
------------------------------------------------------ */
#contents { padding: 200px 0 0 !important;}

@media screen and (max-width: 600px) {
#contents { padding: 200px 0 0 !important;}
}


h1+p { padding: 0 0 70px; text-align: center;}
#msg { background: none; background-color: #f9f8f6; min-height: inherit;}
h2 { margin: 0 0 50px; font-size: 42px; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; line-height: 1.2;}

.sec_lead { width: 540px; padding: 0 0 0 50px; line-height: 1.8;}
.sec_lead .point { margin: 0 0 30px; font-size: 23px; line-height: 1.5; color: #ff7e00; font-family: 'Noto Sans JP', sans-serif; font-weight: 500;}
.sec_lead ul { margin: 40px 0 0;}
.sec_lead ul li { padding: 0 0 0 25px; line-height: 2; color: #2f2f2f; font-weight: bold; background: url(../img/services/489ban/feature/icon.jpg)no-repeat left 7px;}

.section { background: url(../img/services/489ban/feature/sec_bg.gif)repeat-x bottom; background-color: #fff; overflow: hidden; min-height: 100vh;}
.section section { position: relative; width: 1100px; margin: 0 auto;}

@media screen and (max-width: 1400px) {
.section section { width: 68%;}
.sec_lead { padding: 0 0 0 4%; width: 60%;}
h2 { margin: 0 0 25px; font-size: 30px;}
.sec_lead .point { margin: 0 0 15px; font-size: 20px;}
}

@media screen and (max-width: 1024px) {
.section section { width: 85%;}
}

@media screen and (max-width: 768px) {
.section { min-height: inherit;}
}

@media screen and (max-width: 600px) {
h1+p { padding: 0 3% 35px;}
h2 { margin: 0 0 25px; font-size: 26px;}
.section { overflow: inherit;}
.section section { width: 94%;}
.sec_lead { width: 100%; padding: 0;}
.sec_lead .point { margin: 0 0 15px; font-size: 18px;}
.sec_lead ul { margin: 20px 0 0;}
}

@media screen and (max-width: 480px) {
h1+p { text-align: left;}
}

/* ---------------------------------------------------
#sec1
------------------------------------------------------ */
#sec1 section { padding: 185px 0 200px;}
#sec1 #slide { position: absolute; top: 94px; left: 627px; width: 760px; margin: 35px 0 0;}
#sec1 #slide1 { position: relative; z-index: 10;}
#sec1 #slide1 .slick_center1 { width: 694px; top: 40px; left: 35px; z-index: 5;}
#sec1 #slide1 .prev-arrow { position: absolute; bottom: -160px; left: 250px; z-index: 10;}
#sec1 #slide1 .next-arrow { position: absolute; bottom: -160px; right: 250px; z-index: 10;}
#sec1 #slide1>img { position: absolute; top: 0; z-index: 1;}

#sec1 #slide2 { position: relative; width: 212px; margin: -115px -36px 0 0; z-index: 10;}
#sec1 #slide2 >img { position: absolute; top: 0; z-index: 1;}
#sec1 #slide2 .slick_center2 { top: 30px; left: 47px; z-index: 5; width: 118px;}

#sec1 #slide3 { position: relative; text-align: center; margin: 70px auto 0; width: 120px; z-index: 1;}
#sec1 #slide3 p { font-size: 14px; font-weight: bold;}
#sec1 #slide3 p span { font-size: 17px;}

@media screen and (max-width: 1400px) {
#sec1 #slide { left: 63%; width: 660px;}
#sec1 #slide1 .slick_center1 { width: 590px;}
#sec1 #slide1 .prev-arrow { left: 200px;}
#sec1 #slide1 .next-arrow { right: 200px;}
}

@media screen and (max-width: 768px) {
#sec1 #slide { position: static; margin: 0 0 100px 4%; width: 760px;}
#sec1 #slide1 { position: relative;}
#sec1 #slide1 .slick_center1 { width: 694px;}
#sec1 #slide1 .slick_center1 .slick-slide img { width: 100%; }
#sec1 .sec_lead { width: 96%; margin: 0 auto; }
}

@media screen and (max-width: 600px) {
#sec1 section { padding: 50px 0;}
#sec1 #slide { position: relative; margin: 0; width: 100%; top: 0; left: 0;}
#sec1 #slide1 .slick_center1 { top: 6vw; left: 6%; width: 88%;}
#sec1 #slide1 .next-arrow { bottom: -50%; right: 15%; width: 40px;}
#sec1 #slide1 .prev-arrow { bottom: -50%; left: 15%;  width: 40px;}
#sec1 #slide2 { display: none;}
#sec1 #slide3 { position: absolute; bottom: -56%; left: 50%; margin: 0 0 0 -60px;}
#sec1 h2 { padding: 6% 0 0;}
#sec1 .sec_lead { padding: 40vw 0 0; }
}

@media screen and (max-width: 500px) {
#sec1 h2 { padding: 0;}
}

/* ---------------------------------------------------
#sec2
------------------------------------------------------ */
#sec2  { position: relative;}
#sec2 section { width: 1100px; padding: 185px 0 250px;}
#sec2 >div:not(.sec_lead) { position: absolute; top: 0; right: 0; left: inherit; margin: 106px 0 0; width: 658px; z-index: 2;}
#sec2 >div:not(.sec_lead) dl { float: left;}
#sec2 >div:not(.sec_lead) dl:nth-of-type(2) { margin: 55px 0 0 -80px;}
#sec2 >div:not(.sec_lead) dl:nth-of-type(3) { margin: 122px 0 0 -92px;}
#sec2 >div:not(.sec_lead) dt { margin: 0 0 12px;}
#sec2 >div:not(.sec_lead) dd { margin: 0 0 0 10px;}
#sec2 >div:not(.sec_lead) dd span { display: table; margin: 0 0 10px; padding: 5px 20px; color: #fff; text-align: center; background-color: #ff7c00; border-radius: 20px; }
#sec2 >div:not(.sec_lead) >img { display: none;}
#sec2 .sec_lead .point+p { margin: 0;}
.mfp-iframe-holder .mfp-content { max-width: 1600px !important;}
.mfp-iframe-scaler { padding-top: 80% !important;}
#sec2 .popup1 { float: left; margin: -85px 0 0;}
#feature .mfp-figure:after { content: none;}

@media screen and (min-width: 1600px) {
#sec2 >div:not(.sec_lead) { left: 56%; right: inherit;}
}

@media screen and (max-width: 1400px) {
#sec2 section { width: 68%;}
#sec2 >div:not(.sec_lead) { width: 36%; margin: 14% 0 0; right: 5%;}
#sec2 >div:not(.sec_lead) dl {width: 50%;}
#sec2 >div:not(.sec_lead) dl:nth-of-type(2),
#sec2 >div:not(.sec_lead) dl:nth-of-type(3) {margin-left: -16%;}
#sec2 >div:not(.sec_lead) dl:nth-of-type(3) {margin-right: -20%;}
}

@media screen and (max-width:1024px) {
#sec2 section { width: 85%;}
#sec2 >div:not(.sec_lead) { right: 4%;}
}

@media screen and (max-width: 600px) {
#sec2 section { width: 94%; padding: 0 0 50px;}
#sec2 .sec_lead { width: 100%;}
#sec2 >div:not(.sec_lead) { position: static; width: 94%; margin: 0 auto 0; padding: 50px 0 25px;}
#sec2 >div:not(.sec_lead) dl { display: none;}
#sec2 >div:not(.sec_lead) img { display: block;}
#sec2 section:not(:first-child) p { width: inherit;}
#sec2 .popup1 { float: right; margin: 0;}
}

/* ---------------------------------------------------
#sec3
------------------------------------------------------ */
#sec3 section { padding: 185px 0 154px;}
#sec3 .point { display: table; margin: 0 0 5px;}
#sec3 .point span { position: relative; top: -12px; left: 3px; font-size: 11px; color: #797979; }
#sec3 .detaill { margin: 0 0 30px; font-size: 13px; color: #797979;}
#sec3 section > ul { position: absolute; width: 625px; top: 145px; left: 635px;}
#sec3 section > ul li { float: left;}
#sec3 section > ul li a { display: block; width: 40px; margin: -40px 0 0;}

@media screen and (max-width: 1400px) {
#sec3 section > ul { left: 63%; width: 73%; margin: 6% 0 0;}
#sec3 section > ul li { width: 41%;}
#sec3 section > ul li:nth-of-type(2) { width: 46%;}
}

@media screen and (max-width: 600px) {
#sec3 section { padding: 50px 0 0;}
#sec3 section > ul { position: relative; left: inherit; top: inherit; width: 100%;}
#sec3 section > ul li { width: 50%;}
#sec3 section > ul li a { position: absolute; right: 0; bottom: 25px;}
#sec3 #point_col+span .detail { left: 70px;}
#sec3 .sec_lead { clear: both; padding: 0 0 50px;}
}

@media screen and (max-width: 400px) {
#sec3 .point { display: block;}
#sec3 .point .pc_txt { display: none;}
#sec3 .point .sp_txt { display: block;}
}

/* ---------------------------------------------------
#sec4
------------------------------------------------------ */
#sec4 { position: relative;}
#sec4 section { width: 1100px; padding: 190px 0 175px;}
#sec4 > img { position: absolute; padding: 93px 105px; top: 145px; right: 0; left: inherit; background-color: #fff; box-shadow:0px 0px 9px -1px #b0b0b0;}
#sec4 .sec_lead ul+p { margin: 40px 0 0; padding-left: 1em; text-indent: -1em;}
#sec4 .sec_lead ul+p::before { content: "※";}
#sec4 .sec_lead ul+p a { color: #ff7c00; text-decoration: underline;}
#sec4 .sec_lead ul+p a:hover { text-decoration: none;}
#sec4 .sec_lead .point+p { margin: 0;}

@media screen and (min-width: 1600px) {
#sec4 > img { left: 56%; right: inherit;}
}

@media screen and (max-width: 1500px) {
#sec4 > img { width: 38%; padding: 6% 7%; top: 200px; right: -6%;}
}

@media screen and (max-width: 1400px) {
#sec4 section { width: 68%;}
#sec4 > img { width: 35%; padding: 3%; top: 22%; right: -1%;}
}

@media screen and (max-width:1024px) {
#sec4 section { width: 85%;}
#sec4 > img { right: -2%;}
}

@media screen and (max-width: 600px) {
#sec4 { padding: 0 0 50px;}
#sec4 section { width: 94%; padding: 30px 0 0;}
#sec4 > img { position: static; display: block; width: 88%; margin: 50px auto 0;}
#sec4 .sec_lead { width: 100%;}
#sec4 .sec_lead ul+p { margin: 20px 0 0; width: -webkit-calc(100% - 1em); width: calc(100% - 1em);}
#sec4 .sec_lead .point+p { width: 100%;}
}

/* ---------------------------------------------------
#sec5
------------------------------------------------------ */
#sec5 section { padding: 190px 0 230px;}
#sec5 section #sec5_img { position: absolute; width: 845px; top: 127px; left: 584px;}
#sec5 section #sec5_img img { float: right;}
#sec5 section #sec5_img dl { position: relative; width: 254px; z-index: 10;}
#sec5 section #sec5_img dl:nth-of-type(1) { margin: 190px 0 0;}
#sec5 section #sec5_img dl:nth-of-type(2) { margin: 160px 0 0;}
#sec5 section #sec5_img dt { display: table; margin: 0 0 -17px; padding: 5px 20px; color: #fff; text-align: center; background-color: #ff7c00; border-radius: 20px;}
#sec5 section #sec5_img dd { padding: 26px 50px 0 20px; border-top: 1px solid #ff7c00;}
#sec5 section #sec5_img .popup1 { float: left; margin: 35px 0 0;}

@media screen and (max-width: 1400px) {
#sec5 section #sec5_img { left: 60%; width: 773px;}
#sec5 section #sec5_img dl { width: 180px;}
#sec5 section #sec5_img dd { padding: 26px 20px 0 0;}
}

@media screen and (max-width: 600px) {
#sec5 section { padding: 50px 0;}
#sec5 section #sec5_img { position: relative; left: inherit; top: inherit; width: 100%; margin: 0 0 25px;}
#sec5 section #sec5_img img { float: none;}
#sec5 section #sec5_img dl { position: absolute; width: auto; right: 0;}
#sec5 section #sec5_img dl:nth-of-type(1) { margin: 0; right: 0; top: 7%;}
#sec5 section #sec5_img dl:nth-of-type(2) { margin: 0; top: 59%;}
#sec5 section #sec5_img dl dd { display: none;}
#sec5 section #sec5_img .popup1 { float: right; margin: 20px 0 0;}
#sec5 section .sec_lead { clear: both;}
}

/* ---------------------------------------------------
#sec6
------------------------------------------------------ */
#sec6 section { padding: 185px 0 200px;}
#sec6 section > img { position: absolute; top: 123px; left: 630px;}
#sec6 section > img+a { position: absolute; left: 640px; bottom: 30px;}

@media screen and (max-width: 1400px) {
#sec6 section > img { top: 23%; left: 63%; width: 640px;}
#sec6 section > img+a { left: 63%;}
}

@media screen and (max-width: 1100px) {
#sec6 section > img+a { bottom: 20px;}
}

@media screen and (max-width: 600px) {
#sec6 section { padding: 50px 0;}
#sec6 section > img { display: block; position: static; margin: 0 0 20px;}
#sec6 section > img+a { position: static; float: right;}
#sec6 .sec_lead { clear: both;}
}

/* ---------------------------------------------------
#sec7
------------------------------------------------------ */
#sec7 { padding: 50px 0 0;}
#sec7 ul { width: 867px; margin: 60px auto 0; padding: 0 0 125px}
#sec7 ul li { float: left; text-align: center; border-radius: 45px; font-size: 21px;}
#sec7 ul li a { display: block; width: 416px; padding: 25px 0;}
#sec7 ul li a:hover { text-decoration: none;}
#sec7 ul li span { padding: 0 30px 0 0;}
#sec7 ul li:hover { opacity: 0.7;}
#sec7 ul li:nth-of-type(1) { background: linear-gradient(-135deg, #3373bc, #3353bc);}
#sec7 ul li:nth-of-type(1) a { color: #fff;}
#sec7 ul li:nth-of-type(1) span { background: url(../img/services/489ban/feature/btn_arrow1.png)no-repeat right center;}
#sec7 ul li:nth-of-type(2) { float: right; background-color: #000;}
#sec7 ul li:nth-of-type(2) a { color: #fff;}
#sec7 ul li:nth-of-type(2) span { background: url(../img/services/489ban/feature/btn_arrow1.png)no-repeat right center;}
/*#sec7 { padding: 173px 0 105px; background: url(../img/services/489ban/feature/sec7_bg.gif); text-align: center; color: #fff;}
#sec7 h2 { margin: 0 0 30px; text-align: center; color: #fff; font-size: 25px; font-family: 'Noto Sans JP', sans-serif; font-weight: 500;}
#sec7 h2 span { display: block; padding: 10px 0 0; font-size: 40px;}
#sec7 dl { margin: 40px auto 30px; width: 900px; border: 1px solid #ff993a;}
#sec7 dl dt { padding: 4px 0; text-align: center; color: #ff7c00; font-size: 21px; background-color: #fff;}
#sec7 dl dd { background-color: #ff7c00;}
#sec7 dl dd li { float: left; width: 50%; padding: 26px 0 31px; text-align: center; color: #fff; font-size: 25px;}
#sec7 dl dd li:nth-of-type(1) { border-right: 1px solid #fff; box-sizing: border-box;}
#sec7 dl dd li .price { font-size: 79px; line-height: 1;}
#sec7 dl dd li .price span { font-size: 36px;}
#sec7 dl+ul { line-height: 1.5;}
#sec7 dl+ul li::before { content: "※";}
#sec7 dl+ul li{ margin: 0 0 5px; padding-left: 1em; text-indent: -1em;}
#sec7+ul { width: 867px; margin: 60px auto 0; padding: 0 0 125px}
#sec7+ul li { float: left; text-align: center; border-radius: 45px; font-size: 21px;}
#sec7+ul li a { display: block; width: 416px; padding: 25px 0;}
#sec7+ul li a:hover { text-decoration: none;}
#sec7+ul li span { padding: 0 30px 0 0;}
#sec7+ul li:hover { opacity: 0.7;}
#sec7+ul li:nth-of-type(1) { background: linear-gradient(-135deg, #3373bc, #3353bc);}
#sec7+ul li:nth-of-type(1) a { color: #fff;}
#sec7+ul li:nth-of-type(1) span { background: url(../img/services/489ban/feature/btn_arrow1.png)no-repeat right center;}
#sec7+ul li:nth-of-type(2) { float: right; background-color: #000;}
#sec7+ul li:nth-of-type(2) a { color: #fff;}
#sec7+ul li:nth-of-type(2) span { background: url(../img/services/489ban/feature/btn_arrow1.png)no-repeat right center;}*/

@media screen and (max-width: 600px) {
#sec7 { padding: 20px 0 0;}
#sec7 ul { width: 94%; margin: 30px auto 0;}
#sec7 ul li { float: none; width: 100%; font-size: 16px;}
#sec7 ul li:nth-of-type(1) { margin: 0 0 20px;}
#sec7 ul li a { width: inherit; padding: 15px 0;}
/*#sec7 { padding: 50px 0;}
#sec7 h2 span { font-size: 30px;}
#sec7 h2+p { width: 94%; margin: 0 auto;}
#sec7 h2+p span { display: inline-block;}
#sec7 dl { width: 94%;}
#sec7 dl dt { font-size: 18px;}
#sec7 dl dd li { font-size: 18px;}
#sec7 dl dd li .price { font-size: 28px;}
#sec7 dl dd li .price span { font-size: 20px;}
#sec7 dl+ul { width: 94%; margin: 0 auto; text-align: left;}
#sec7+ul { width: 94%; margin: 30px auto 0;}
#sec7+ul li { float: none; width: 100%; font-size: 16px;}
#sec7+ul li:nth-of-type(1) { margin: 0 0 20px;}
#sec7+ul li a { width: inherit; padding: 15px 0;}*/
}

@media screen and (max-width: 480px) {
/*#sec7 h2+p { text-align: left;}*/
}

/* ---------------------------------------------------
#sp_cnav
------------------------------------------------------ */
/*#sp_cnav { opacity: 0; transition: opacity 0.5s;}
#sp_cnav.visible { opacity: 100;}*/
#sp_cnav { position: fixed; left: -1px; top: 210px; /* margin: -265px 0 0; */ border: 1px solid #e1d6cb; border-radius: 0 5px 5px 0; z-index: 10;}
#sp_cnav li { border-bottom: 1px solid #e1d6cb;}
#sp_cnav li:last-child { border-bottom: none;}
#sp_cnav a { display: block; height: 90px; width: 198px; cursor: pointer; text-indent: -9999px;}
#sp_cnav li:nth-of-type(1) a { background: url(../img/services/489ban/feature/cnav1_off.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(1).active a,
#sp_cnav li:nth-of-type(1) a:hover { background: url(../img/services/489ban/feature/cnav1_on.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(2) a { background: url(../img/services/489ban/feature/cnav2_off.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(2).active a,
#sp_cnav li:nth-of-type(2) a:hover { background: url(../img/services/489ban/feature/cnav2_on.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(3) a { background: url(../img/services/489ban/feature/cnav3_off.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(3).active a,
#sp_cnav li:nth-of-type(3) a:hover { background: url(../img/services/489ban/feature/cnav3_on.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(4) a { background: url(../img/services/489ban/feature/cnav4_off.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(4).active a,
#sp_cnav li:nth-of-type(4) a:hover { background: url(../img/services/489ban/feature/cnav4_on.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(5) a { background: url(../img/services/489ban/feature/cnav5_off.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(5).active a,
#sp_cnav li:nth-of-type(5) a:hover { background: url(../img/services/489ban/feature/cnav5_on.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(6) a { background: url(../img/services/489ban/feature/cnav6_off.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(6).active a,
#sp_cnav li:nth-of-type(6) a:hover { background: url(../img/services/489ban/feature/cnav6_on.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}

@media screen and (max-width: 1400px) {
#sp_cnav { width: 16%; min-width: 180px;}
#sp_cnav a { width: 100%;}
}

@media screen and (max-width: 1024px) {
#sp_cnav { width: 8%; min-width: 80px;}
#sp_cnav a { height: 70px;}
#sp_cnav li:nth-of-type(1) a,#sp_cnav li:nth-of-type(1) a:hover { background: url(../img/services/489ban/feature/cnav1_off_sp.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(1).active a { background: url(../img/services/489ban/feature/cnav1_on_sp.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(2) a,#sp_cnav li:nth-of-type(2) a:hover { background: url(../img/services/489ban/feature/cnav2_off_sp.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(2).active a { background: url(../img/services/489ban/feature/cnav2_on_sp.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(3) a,#sp_cnav li:nth-of-type(3) a:hover { background: url(../img/services/489ban/feature/cnav3_off_sp.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(3).active a { background: url(../img/services/489ban/feature/cnav3_on_sp.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(4) a,#sp_cnav li:nth-of-type(4) a:hover { background: url(../img/services/489ban/feature/cnav4_off_sp.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(4).active a { background: url(../img/services/489ban/feature/cnav4_on_sp.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(5) a,#sp_cnav li:nth-of-type(5) a:hover { background: url(../img/services/489ban/feature/cnav5_off_sp.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(5).active a { background: url(../img/services/489ban/feature/cnav5_on_sp.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
#sp_cnav li:nth-of-type(6) a,#sp_cnav li:nth-of-type(6) a:hover { background: url(../img/services/489ban/feature/cnav6_off_sp.png)no-repeat center center,linear-gradient(#ffffff, #f7f7f7);}
#sp_cnav li:nth-of-type(6).active a { background: url(../img/services/489ban/feature/cnav6_on_sp.png)no-repeat center center,linear-gradient(-135deg,#f99800, #ff7e00);}
}


@media screen and (max-height: 768px) {
/* .pagenation { margin: -183px 0 0;} */
#sp_cnav a { height: 60px;}
}

@media screen and (max-width: 600px) {
#sp_cnav { position: static; display: block; width: 100%; border: none;}
#sp_cnav li { float: left; width: calc(100% / 3); box-sizing: border-box; border-right: 1px solid #e1d6cb; background-color: #fff; border-bottom: 1px solid #e1d6cb;}
#sp_cnav li a { display: block; padding: 0; height: 100px;}
#sp_cnav li:nth-child(-n+3) { border-top: 1px solid #e1d6cb;}
#sp_cnav li:nth-of-type(3n) { border-right: none;}
#sp_cnav li:nth-of-type(4){ clear: both;}
#sp_cnav li:nth-of-type(6){ border-bottom: 1px solid #e1d6cb;}
#sp_cnav li:nth-of-type(1) a,#sp_cnav li:nth-of-type(1) a:hover,#sp_cnav li:nth-of-type(1).active a { background: url(../img/services/489ban/feature/cnav1_sp.png)no-repeat center center; background-size: 58%;}
#sp_cnav li:nth-of-type(2) a,#sp_cnav li:nth-of-type(2) a:hover,#sp_cnav li:nth-of-type(2).active a { background: url(../img/services/489ban/feature/cnav2_sp.png)no-repeat center center; background-size: 58%;}
#sp_cnav li:nth-of-type(3) a,#sp_cnav li:nth-of-type(3) a:hover,#sp_cnav li:nth-of-type(3).active a { background: url(../img/services/489ban/feature/cnav3_sp.png)no-repeat center center; background-size: 58%;}
#sp_cnav li:nth-of-type(4) a,#sp_cnav li:nth-of-type(4) a:hover,#sp_cnav li:nth-of-type(4).active a { background: url(../img/services/489ban/feature/cnav4_sp.png)no-repeat center center; background-size: 58%;}
#sp_cnav li:nth-of-type(5) a,#sp_cnav li:nth-of-type(5) a:hover,#sp_cnav li:nth-of-type(5).active a { background: url(../img/services/489ban/feature/cnav5_sp.png)no-repeat center center; background-size: 58%;}
#sp_cnav li:nth-of-type(6) a,#sp_cnav li:nth-of-type(6) a:hover,#sp_cnav li:nth-of-type(6).active a { background: url(../img/services/489ban/feature/cnav6_sp.png)no-repeat center center; background-size: 58%;}
}

@media screen and (max-width: 480px) {
#sp_cnav li:nth-of-type(1) a,#sp_cnav li:nth-of-type(1) a:hover,#sp_cnav li:nth-of-type(1).active a { background-size: 75%;}
#sp_cnav li:nth-of-type(2) a,#sp_cnav li:nth-of-type(2) a:hover,#sp_cnav li:nth-of-type(2).active a { background-size: 75%;}
#sp_cnav li:nth-of-type(3) a,#sp_cnav li:nth-of-type(3) a:hover,#sp_cnav li:nth-of-type(3).active a { background-size: 75%;}
#sp_cnav li:nth-of-type(4) a,#sp_cnav li:nth-of-type(4) a:hover,#sp_cnav li:nth-of-type(4).active a { background-size: 75%;}
#sp_cnav li:nth-of-type(5) a,#sp_cnav li:nth-of-type(5) a:hover,#sp_cnav li:nth-of-type(5).active a { background-size: 75%;}
#sp_cnav li:nth-of-type(6) a,#sp_cnav li:nth-of-type(6) a:hover,#sp_cnav li:nth-of-type(6).active a { background-size: 75%;}
}

@media screen and (max-width: 400px) {
#sp_cnav li:nth-of-type(1) a,#sp_cnav li:nth-of-type(1) a:hover,#sp_cnav li:nth-of-type(1).active a { background-size: 85%;}
#sp_cnav li:nth-of-type(2) a,#sp_cnav li:nth-of-type(2) a:hover,#sp_cnav li:nth-of-type(2).active a { background-size: 85%;}
#sp_cnav li:nth-of-type(3) a,#sp_cnav li:nth-of-type(3) a:hover,#sp_cnav li:nth-of-type(3).active a { background-size: 85%;}
#sp_cnav li:nth-of-type(4) a,#sp_cnav li:nth-of-type(4) a:hover,#sp_cnav li:nth-of-type(4).active a { background-size: 85%;}
#sp_cnav li:nth-of-type(5) a,#sp_cnav li:nth-of-type(5) a:hover,#sp_cnav li:nth-of-type(5).active a { background-size: 85%;}
#sp_cnav li:nth-of-type(6) a,#sp_cnav li:nth-of-type(6) a:hover,#sp_cnav li:nth-of-type(6).active a { background-size: 85%;}
}


#sp_cnav:after,#main #msg:after,#main ul:after,#sec2 >div:not(.sec_lead):after,#sec3 section > ul:after,#sec7 dl dd ul:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}