@charset "utf-8";

@media screen and (min-width:641px){
/*現在地*/
#siteheader nav ul li:nth-child(5) a:after {display:block;}

main {padding:0 0 0px;}
#wrap{background-image:url(../images/system04/bg.jpg);}
main h1.title {top:4px;}
h1.title img {width:180px; height:auto;}
main .slick-prev {display:none !important;}
/* section01 */
#wrap:before {content:""; display:block; width:100%; height:100%; background:url(../images/system04/bg_bottom.png) center bottom no-repeat; background-size:100% auto; z-index:-1;}

main p.text {width:520px;background:url(../images/system/bg-text-bottom.png) left bottom no-repeat rgba(17,30,140,0.45); border:1px solid #fff; min-height:170px; font-size:15px; line-height:22px; position:relative; }
main p.text:before{content:''; background:url(../images/system/bg-text.png) right top no-repeat; width:100%; height:238px; position:absolute; right:0px; top:0px;}

main .slick-next {background:url(../images/common/btn-anotherimage.png) left top no-repeat; width:121px; height:117px; border:none; text-indent:200%; overflow:hidden; white-space:nowrap; position:absolute; left:310px; top:94px; transition:0.5s;}
main .slick-dots {margin-left:340px; padding-top: 14px;}

.section01 .sec01 {padding-bottom:21px; margin-bottom:100px;}
.section01 .sec01:before{content:''; background:url(../images/system04/h2.png) left top no-repeat; width:1920px; height:255px; position:absolute; left:50%; top:46px; margin-left:-960px;}
.section01 .sec01:after {content: ''; background: url(../images/system04/h202.png) center top no-repeat; height:268px; width: 1920px; position: absolute; left: 50%; top: 787px; margin-left: -960px; z-index: -1;}

.section01 .sec01 h2.h201 {height:242px; position:relative; text-indent:500%; overflow:hidden; white-space:nowrap; margin-bottom:57px;}
.section01 .sec01 h2.h201.check:after{content:''; width:116px; background:url(../images/common/icon-check.png) left top no-repeat; background-size:100% auto; height:50px; position:absolute; left:240px; top:58px;}
.section01 .sec01 h2.h202 {height:46px; position:relative; text-indent:500%; overflow:hidden; white-space:nowrap;}

.section01 .sec01 .imgchenge {position:absolute; left:0; bottom:0px; width:100%;}
.section01 .sec01 .item {float:left; position:relative; font-size:0; line-height:1; height:320px;}
.section01 .sec01 .item .img:before{content:''; background:url(../images/common/img-waku.png) left top no-repeat; width:543px; height:160px; position:absolute; right:3px; top:3px; z-index:10;}
.section01 .sec01 .item .img:after{content:''; background:url(../images/common/img-waku.png) left bottom no-repeat; width:543px; height:160px; position:absolute; left:3px; bottom:3px; z-index:10;}
.section01 .sec01 .item .img img {width:100%; height:auto; border:1px solid #fff;}
.section01 .sec01 .item .img a {position:absolute; width:100%; height:100%; display:block; left:-3px; top:-3px; background:url(../images/common/icon-zoom.png) right bottom no-repeat; z-index:30;} 
.section01 .sec01 .item .img a:hover {background-color:rgba(255,255,255,0.2);}
.section01 .sec01 .item  p.caption {position:absolute; background:rgba(17,30,140,0.45); font-size:16px; line-height:24px; z-index:0; bottom: 12px;}
.section01 .sec01 .item .img {width:550px; position:absolute; z-index:10; border:1px solid #fff; padding:2px;}
.section01 .sec01 .item .zoom a:hover:after{opacity:0.2;}
.section01 .sec01 .imgbox {width:550px; text-align:center; position:relative; z-index:0;}
.section01 .sec01 .imgbox .img {width:550px; position:relative; z-index:10; border:1px solid #fff; padding:2px; font-size:0; line-height:1;}
.section01 .sec01 .imgbox .img:before{content:''; background:url(../images/common/img-waku.png) left top no-repeat; width:543px; height:160px; position:absolute; right:3px; top:3px; z-index:10;}
.section01 .sec01 .imgbox .img:after{content:''; background:url(../images/common/img-waku.png) left bottom no-repeat; width:543px; height:160px; position:absolute; left:3px; bottom:3px; z-index:10;}
.section01 .sec01 .imgbox .img img {width:100%; height:auto; border:1px solid #fff;}
.section01 .sec01 .imgbox .img a {position:absolute; width:100%; height:100%; display:block; left:-3px; top:-3px; background:url(../images/common/icon-zoom.png) right bottom no-repeat; z-index:30;} 
.section01 .sec01 .imgbox .img a:hover {background-color:rgba(255,255,255,0.2);}
.section01 .sec01 .imgbox .caption {padding:20px 0 0;  font-size:16px; line-height:24px;}


main .sec01_1 {position:relative; width:100%; height:548px; margin-bottom:80px;}
main .sec01_1 .imgchenge {padding:0 40px;}
main .sec01_1 .text { margin:0 0 0 20px; padding:47px 35px 58px 35px; letter-spacing:0.24em; }
main .sec01_1 .imgchenge .item { padding:0 0 0 316px;}
main .sec01_1 .imgchenge .item .img {left:400px; bottom:0px;}
main .sec01_1 .imgchenge .item p.caption {left:80px; bottom:12px; width:320px; padding:18px 25px; }
main .sec01_2 {position:relative; width:100%; height:378px; }
main .sec01_2 .text {float:right; margin:0 20px 0 0; padding:45px 40px 57px 40px; letter-spacing:0.18em; }
main .sec01_2 .imgchenge {padding:0 20px;}
main .sec01_2 .imgchenge .item {padding:0 316px 0 0;height:320px;}
main .sec01_2 .imgchenge .item .img {left:0; bottom:0px;}
main .sec01_2 .imgchenge .item p.caption {left:545px; bottom:20px; width:321px ;padding:20px 35px 20px 37px; }

main .section02 {background: url(../images/system04/bg2.jpg) center top no-repeat; padding: 0 0 176px;}
main .section02 header {background: url(../images/system04/h203.png) center 26px no-repeat; position: relative; padding: 106px 0 0; margin-bottom: 57px;}
main .section02 header h2 {position:absolute; font-size:0; line-height: 1; width: 100%; height: 100%;}
main .section02 header h2.check:after{content:''; width:116px; background:url(../images/common/icon-check.png) left top no-repeat; background-size:100% auto; height:50px; position:absolute; left:921px; top:17px;}

main .section02 p.text {padding: 37px 0 ;letter-spacing: 0.18em; margin-left: 20px;}
main .section02 h3 {text-align: center; font-size: 0; line-height: 1; margin-bottom: 45px;}
main .section02 nav {font-size: 0; line-height: 1; text-align: center; margin-bottom: -70px; z-index: 20; position: relative;}
main .section02 nav ul {text-align: center;}
main .section02 nav ul li {display: inline-block; margin: 0 11px;}
main .section02 nav ul li a{display: block; position: relative;}
main .section02 nav ul li a img + img {display: none;}
main .section02 nav ul li a.active img {display: none;}
main .section02 nav ul li a.active img + img {display: block;}
main .section02 .tabcontent {position: relative; width: 1200px; background:url(../images/system04/h401.png) left top no-repeat; height: 564px; margin-left: -50px; padding: 101px 0 0 576px; display: none;}
main .section02 .tabcontent.tab1{display: block;}
main .section02 .tabcontent.tab2 {background-image: url(../images/system04/h402.png); padding-top: 121px;}
main .section02 .tabcontent.tab3 {background-image: url(../images/system04/h403.png); padding-top: 121px;}
main .section02 .tabcontent h4 {font-size: 0; line-height: 1;}
main .section02 .imgchenge {position:absolute; left:128px; bottom:0px; width:100%; z-index: 10; width: 490px;}
main .section02 p + .imgchenge {left: 570px; z-index: 0; bottom: 29px;}
main .section02 .imgchenge .item {float:left; position:relative; font-size:0; line-height:1; height:280px;}
main .section02 .imgchenge .item .img:before{content:''; background:url(../images/common/img-waku.png) left top no-repeat; width:543px; height:160px; position:absolute; right:3px; top:3px; z-index:10;}
main .section02 .imgchenge .item .img:after{content:''; background:url(../images/common/img-waku.png) left bottom no-repeat; width:543px; height:160px; position:absolute; left:3px; bottom:3px; z-index:10;}
main .section02 .imgchenge .item .img img {width:100%; height:auto; border:1px solid #fff;}
main .section02 .imgchenge .item .img a {position:absolute; width:100%; height:100%; display:block; left:-3px; top:-3px; background:url(../images/common/icon-zoom.png) right bottom no-repeat; z-index:30;} 
main .section02 .imgchenge .item .img a:hover {background-color:rgba(255,255,255,0.2);}
main .section02 .imgchenge .item  p.caption {position:absolute; background:rgba(17,30,140,0.45); font-size:14px; line-height:20px; z-index:0; bottom: 12px;}
main .section02 .imgchenge .item .img {width:490px; position:absolute; z-index:10; border:1px solid #fff; padding:2px;}
main .section02 .imgchenge .item .zoom a:hover:after{opacity:0.2;}

main .section02 h2.h204 {background: url(../images/system04/h204.png) center top no-repeat; height: 345px; font-size: 0; line-height: 1; margin-bottom: 17px;}
main .section02 .verticalcontents {position: relative; padding: 0 0 10px; }
main .section02 .verticalcontents p.text {width: 420px; text-align: left; padding: 37px 44px; margin: 0 0 0 36px;}
main .section02 .verticalcontents .imgchenge {width: 620px;}
main .section02 .verticalcontents p + .imgchenge {left: 446px; z-index: 0; bottom:-30px;}
main .section02 .verticalcontents .imgchenge .item {float:left; position:relative; font-size:0; line-height:1; height:310px;}
main .section02 .verticalcontents .imgchenge .item .img {width:620px; position:absolute; z-index:10; border:1px solid #fff; padding:2px;}
main .section02 .slick-dots {margin-left:0px;}
main .section02 .slick-next {left:-145px; top:-46px;}

main .section02 .sec02_1 {position:relative; width:100%; height:570px; margin-bottom:80px;}
main .section02 .sec02_1 .imgchenge {padding:0 40px; width:100%; left:0; bottom:0;}
main .section02 .sec02_1 .text { margin:0 0 0 20px; padding:47px 35px 58px 35px; letter-spacing:0.24em; }
main .section02 .sec02_1 .imgchenge .item { padding:0; height:350px;}
main .section02 .sec02_1 .imgchenge .item .img {left:440px; bottom:0px; width:550px; height:auto;}
main .section02 .sec02_1 .imgchenge .item p.caption {left:40px; bottom:12px; width:400px; padding:18px 25px; }
main .section02 .sec02_1 .slick-dots { margin-left: 420px;}
main .section02 .sec02_1 .slick-next { left:340px; top:125px;}

}
@media screen and (min-width:1921px){
main .section02 {background-size:cover; margin: 0;}
}

@media screen and (max-width:640px){

main {padding-bottom:0;}
main .slick-prev,
main .slick-next {display:none !important;}

#wrap { background-image:none;}
#wrap:after{content:''; background-image:url(../images/system04/bg-sp.jpg); background-position:left top; background-size:100% auto; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; background-repeat:no-repeat;}
h1.title {padding-left:2.5vw; padding-top:1.875vw;}
h1.title img {width:34.375vw; margin-top:-0.9vw;}

main section{padding:0 3.125vw;}
main p.text {background:url(../images/system/bg-text-sp.png) left bottom no-repeat rgba(17,30,140,0.65); border:1px solid #fff; font-size:4.6875vw; line-height:6.875vw; padding:6.475vw 6.875vw; background-size:100% auto; position:relative; letter-spacing:0.9375vw;}
main p.text:before{content:''; background:url(../images/system/bg-text-sp-top.png) right top no-repeat; width:100%; height:238px; position:absolute; right:1px; top:1px; background-size:100% auto;}

main .imgchenge {margin-top:6.875vw;}
main .imgchenge .item {float:left; font-size:0; line-height:1;}
main .imgchenge .item .img {width:auto; overflow:hidden; border:1px solid #fff; padding:0.3125vw; position:relative;}
main .imgchenge .item .img img {width:100%; height:auto; border:1px solid #fff;}
main .imgchenge .item .img:before{content:''; background:url(../images/common/img-waku-sp.png) left top no-repeat; width:86.09375vw; height:30.90625vw; position:absolute; right:0.46875vw; top:0.46875vw; z-index:10; background-size:100% auto;}
main .imgchenge .item .img:after {content:''; background:url(../images/common/img-waku-sp.png) left bottom no-repeat; width:86.09375vw; height:30.90625vw; position:absolute; left:0.46875vw; bottom:0.46875vw; z-index:10; background-size:100% auto;}
main .imgchenge .item .img img {width: 100%; height: auto;}
main .imgchenge .item p.caption {padding:4.0vw 0 0; font-size:4.6875vw; line-height:1.46; margin:0;}
main .imgchenge .item .zoom {display:none;}
main .imgchenge .item .zoom a{display:none;}

main .section01 {padding-bottom:12.5vw;}
main .section01 h2 {height:39.84375vw; position:relative; text-indent:200%; overflow:hidden; white-space:nowrap; background:url(../images/system04/h2-sp.png) left top no-repeat; background-size:100% auto; margin:15.7625vw -3.125vw -2.9vw;}
main .section01 h2.h202 {height:41.875vw; background:url(../images/system04/h202-sp.png) left top no-repeat; background-size:100% auto; margin:0vw -3.125vw 2vw;}
main .section01 h2.check:after{content:''; width:18.125vw; background:url(../images/common/icon-check.png) left top no-repeat; background-size:100% auto; height:14.6875vw; position:absolute; left:38.125vw; top:5.4687vw;}

main .section02 {background: url(../images/system04/bg2-sp.jpg) center top no-repeat; background-size:100% auto; padding: 3.33vw 0 50.625vw;}
main .section02 h2 {height:43.28125vw; background:url(../images/system04/h203-sp.png) left top no-repeat; background-size:100% auto; margin:0vw -3.125vw 3.3vw; text-indent: 2200%; overflow: hidden; white-space: nowrap;}
main .section02 h2.check:after{content:''; width:18.125vw; background:url(../images/common/icon-check.png) left top no-repeat; background-size:100% auto; height:14.6875vw; position:absolute; left:71.725vw; top:8.8687vw;}
main .section02 h3 {text-align: center; font-size: 0; line-height: 1; margin: 7.8125vw -3.125vw 7.03125vw;}
main .section02 h3 img {width: 100%; height: auto;}
main .section02 nav {font-size: 0; line-height: 1; text-align: center; z-index: 20; position: relative; margin: 0 -3.125vw -12vw;}
main .section02 nav ul {text-align: center; width: 97.225vw; margin: 0 auto;}
main .section02 nav ul li {display: inline-block; margin: 0 0; width: 33.33%; padding: 0 1vw;}
main .section02 nav ul li a{display: block; position: relative;}
main .section02 nav ul li a img{width: 100%; height: auto;}
main .section02 nav ul li a img + img {display: none;}
main .section02 nav ul li a.active img {display: none;}
main .section02 nav ul li a.active img + img {display: block;}
main .section02 .tabcontent {position: relative; background:url(../images/system04/h401.png) -13vw top no-repeat; background-size:200vw auto; margin: 0; padding: 32.625vw 0 0; position: fixed; left: -99999px; width: 93.75vw;}
main .section02 .tabcontent.tab1{}
main .section02 .tabcontent.tab2 {background-image: url(../images/system04/h402.png);}
main .section02 .tabcontent.tab3 {background-image: url(../images/system04/h403.png);}
main .section02 .tabcontent.active {left: 0; position: relative;}
main .section02 .tabcontent h4 {font-size: 0; line-height: 1;}
main .section02 .tabcontent .imgchenge + p {margin-top: 4.575vw; font-size: 4.0625vw; line-height: 5.625vw; margin-bottom: -2vw;}
main .section02 h2.h204 {height:53.90625vw; background:url(../images/system04/h204-sp.png) left top no-repeat; background-size:100% auto; margin:0vw -3.125vw -7.575vw; text-indent: 2200%; overflow: hidden; white-space: nowrap;}

.slick-dots { padding:3.90625vw 0 2.5vw;}

}