@charset "UTF-8";

@media screen and (min-width:1024px) {
.smp{
display:none;
}
p{
font-size:14px;
line-height:1.5em;
text-align:justify;
}
header ol{
width:400px;
position:fixed;
top:top;
right:0;
bottom:auto;
left:auto;
z-index:2000;
}
header ol li{
width:48%;
margin:0 1%;
float:left;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
p{
font-size:13px;
line-height:1.5em;
text-align:justify;
}
header ol{
width:38%;
position:fixed;
top:top;
right:0;
bottom:auto;
left:auto;
z-index:2000;
}
header ol li{
width:48%;
margin:0 1%;
float:left;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
p{
font-size:14px;
line-height:1.35em;
text-align:justify;
}
header ol{
display:none;
}
}









/*==================================================================

INDEX_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.bg-image-loop{
width:100%;
height:353px;
position:relative;
background:url("../../images/slider.jpg") repeat-x 0 0;
background-size:auto 100%;
animation:bg-slider 80s linear infinite;
margin:0;
padding:0;
}
@keyframes bg-slider{
from{
background-position:0 0;
}
to{
background-position:-2000px 0;
}
}
.bg-image-loop h1{
width:210px;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit-transform:translateY(-50%) translateX(-50%);
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.bg-image-loop{
width:100%;
height:200px;
position:relative;
background:url("../../images/slider.jpg") repeat-x 0 0;
background-size:auto 100%;
animation:bg-slider 80s linear infinite;
margin:0;
padding:0;
}
@keyframes bg-slider{
from{
background-position:0 0;
}
to{
background-position:-2000px 0;
}
}
.bg-image-loop h1{
width:20%;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit-transform:translateY(-50%) translateX(-50%);
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.bg-image-loop{
width:100%;
height:300px;
position:relative;
background:url("../../images/slider.jpg") repeat-x 0 0;
background-size:auto 100%;
animation:bg-slider 80s linear infinite;
margin:0;
padding:0;
}
@keyframes bg-slider{
from{
background-position:0 0;
}
to{
background-position:-2012px 0;
}
}
.bg-image-loop h1{
width:40%;
height:auto;
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit-transform:translateY(-50%) translateX(-50%);
}
}










/*==================================================================

INTRODUCTION_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.introduction{
background:url("../../images/introduction_bg.jpg")bottom center no-repeat;
background-size:cover;
}
.introduction_area{
width:1000px;
margin:0 auto;
padding:100px 0;
}
.introduction_area ul{
}
.introduction_area ul li{
width:56%;
margin:0 auto 1.5% 0;
}
.introduction_area p{
background:rgba(255,255,255,0.85);
color:#000;
font-size:16px;
padding:3em;
line-height:1.8em;
width:52%;
margin:80px 0 0 auto;
}






}
@media only screen and (min-width:768px) and (max-width:1023px) {
.introduction{
background:url("../../images/introduction_bg.jpg")bottom center no-repeat;
background-size:cover;
}
.introduction_area{
width:98%;
margin:0 auto;
padding:100px 0;
}
.introduction_area ul{
}
.introduction_area ul li{
width:70%;
margin:0 auto 1.5% 0;
}
.introduction_area p{
background:rgba(255,255,255,0.85);
color:#000;
font-size:15px;
padding:3em;
line-height:1.8em;
width:64%;
margin:80px 0 0 auto;
}







}
@media only screen and (min-width:320px) and (max-width:767px) {
.introduction{
background:url("../../images/introduction_bg.jpg")bottom center no-repeat;
background-size:cover;
}
.introduction_area{
width:98%;
margin:0 auto;
padding:60px 0;
}
.introduction_area ul{
}
.introduction_area ul li{
width:90%;
margin:0 auto 1.5% 0;
}
.introduction_area p{
background:rgba(255,255,255,0.85);
color:#000;
font-size:15px;
padding:2em;
line-height:1.8em;
width:100%;
margin:30px auto 0;
}






}









/*==================================================================

MAINTENANCE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.maintenance{
background-image:linear-gradient(0deg, transparent calc(100% - 1px), #78D9FF calc(100% - 1px)),
                 linear-gradient(90deg, transparent calc(100% - 1px), #78D9FF calc(100% - 1px));
background-size:20px 20px;
background-repeat:repeat;
background-position:center center;
padding:100px 0;
}
.maintenance_area{
width:1000px;
margin:0 auto;
padding:0;
}
.maintenance_area h3{
font-size:32px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:15em;
margin:0 auto;
padding:0.5em 1em;
outline:3px solid #007BBB;
outline-offset:5px;
background:linear-gradient(-45deg, transparent 0 20px, #FFF 20px calc(100% - 20px), transparent calc(100% - 20px)),
           repeating-linear-gradient(-45deg, #007BBB 0 2px, #FFF 2px 6px);
}
.maintenance_area ul{
}
.maintenance_area ul li{
width:30.3%;
margin:70px 1.5% 40px;
float:left;
}
.maintenance_area ul li img{
border-radius:12%;
}
.maintenance_area ul li h4{
font-size:20px;
font-weight:bold;
color:#000;
text-align:center;
margin-top:0.8em;
letter-spacing:0.1em;
}
.maintenance_area ul li h4 span{
background:linear-gradient(transparent 40%, #FF0 40%);
padding:0 0.5em;
}
.maintenance_area ol{
}
.maintenance_area ol li{
width:22%;
margin:0 1.5%;
float:left;
}
.maintenance_area ol li img{
border-radius:12%;
}
.maintenance_area ol li h4{
font-size:18px;
font-weight:bold;
color:#000;
text-align:center;
margin-top:0.8em;
letter-spacing:0.1em;
}
.maintenance_area ol li h4 span{
background:linear-gradient(transparent 40%, #FF0 40%);
padding:0 0.5em;
}
.maintenance_area p{
font-size:16px;
text-align:center;
margin:3em auto 0;
}
.maintenance_area p span{
border:1px solid #007BBB;
background:#FFF;
padding:0.2em 1em;
}








}
@media only screen and (min-width:768px) and (max-width:1023px) {
.maintenance{
background-image:linear-gradient(0deg, transparent calc(100% - 1px), #78D9FF calc(100% - 1px)),
                 linear-gradient(90deg, transparent calc(100% - 1px), #78D9FF calc(100% - 1px));
background-size:20px 20px;
background-repeat:repeat;
background-position:center center;
padding:80px 0;
}
.maintenance_area{
width:98%;
margin:0 auto;
padding:0;
}
.maintenance_area h3{
font-size:26px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:15em;
margin:0 auto;
padding:0.5em 1em;
outline:3px solid #007BBB;
outline-offset:5px;
background:linear-gradient(-45deg, transparent 0 20px, #FFF 20px calc(100% - 20px), transparent calc(100% - 20px)),
           repeating-linear-gradient(-45deg, #007BBB 0 2px, #FFF 2px 6px);
}
.maintenance_area ul{
}
.maintenance_area ul li{
width:30.3%;
margin:70px 1.5% 40px;
float:left;
}
.maintenance_area ul li img{
border-radius:12%;
}
.maintenance_area ul li h4{
font-size:16px;
font-weight:bold;
color:#000;
text-align:center;
margin-top:0.8em;
letter-spacing:0.1em;
}
.maintenance_area ul li h4 span{
background:linear-gradient(transparent 40%, #FF0 40%);
padding:0 0.5em;
}
.maintenance_area ol{
}
.maintenance_area ol li{
width:22%;
margin:0 1.5%;
float:left;
}
.maintenance_area ol li img{
border-radius:12%;
}
.maintenance_area ol li h4{
font-size:15px;
font-weight:bold;
color:#000;
text-align:center;
margin-top:0.8em;
letter-spacing:0.1em;
}
.maintenance_area ol li h4 span{
background:linear-gradient(transparent 40%, #FF0 40%);
padding:0 0.5em;
}
.maintenance_area p{
font-size:15px;
text-align:center;
margin:3em auto 0;
}
.maintenance_area p span{
border:1px solid #007BBB;
background:#FFF;
padding:0.2em 1em;
}








}
@media only screen and (min-width:320px) and (max-width:767px) {
.maintenance{
background-image:linear-gradient(0deg, transparent calc(100% - 1px), #78D9FF calc(100% - 1px)),
                 linear-gradient(90deg, transparent calc(100% - 1px), #78D9FF calc(100% - 1px));
background-size:20px 20px;
background-repeat:repeat;
background-position:center center;
padding:60px 0;
}
.maintenance_area{
width:98%;
margin:0 auto;
padding:0;
}
.maintenance_area h3{
font-size:20px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:15em;
margin:0 auto 0.5em;
padding:0.5em 1em;
outline:3px solid #007BBB;
outline-offset:5px;
background:linear-gradient(-45deg, transparent 0 20px, #FFF 20px calc(100% - 20px), transparent calc(100% - 20px)),
           repeating-linear-gradient(-45deg, #007BBB 0 2px, #FFF 2px 6px);
}
.maintenance_area ul{
}
.maintenance_area ul li{
width:47%;
margin:20px 1.5% 0;
float:left;
}
.maintenance_area ul li:first-child{
width:47%;
margin:30px 25% 0;
float:left;
}
.maintenance_area ul li img{
border-radius:12%;
}
.maintenance_area ul li h4{
font-size:16px;
font-weight:bold;
color:#000;
text-align:center;
margin-top:0.5em;
letter-spacing:0.1em;
}
.maintenance_area ul li h4 span{
background:linear-gradient(transparent 40%, #FF0 40%);
padding:0 0.5em;
}
.maintenance_area ol{
}
.maintenance_area ol li{
width:47%;
margin:20px 1.5% 0;
float:left;
}
.maintenance_area ol li img{
border-radius:12%;
}
.maintenance_area ol li h4{
font-size:16px;
font-weight:bold;
color:#000;
text-align:center;
margin-top:0.5em;
letter-spacing:0.1em;
}
.maintenance_area ol li h4 span{
background:linear-gradient(transparent 40%, #FF0 40%);
padding:0 0.5em;
}
.maintenance_area p{
font-size:13px;
text-align:center;
margin:3em auto 0;
}
.maintenance_area p span{
border:1px solid #007BBB;
background:#FFF;
padding:0.2em 1em;
}









}










/*==================================================================

MESSAGE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.message_area{
width:1000px;
margin:100px auto;
padding:0;
}
.message_area h4{
font-size:20px;
font-weight:900;
text-align:center;
line-height:1.5em;
}
.message_area figure{
width:40%;
margin:50px auto 80px;
}
.message_area h6{
width:28%;
margin:0 auto 30px;
}
.message_area p{
color:#000;
text-align:center;
line-height:1.8em;
}
.message_area p span.sale{
font-size:1.5em;
font-weight:900;
background:linear-gradient(transparent 40%, #FF0 40%);
}
.message_area p span.vendor{
font-size:1.2em;
font-weight:900;
color:#007BBB;
}





}
@media only screen and (min-width:768px) and (max-width:1023px) {
.message_area{
width:98%;
margin:80px auto;
padding:0;
}
.message_area h4{
font-size:16px;
font-weight:900;
text-align:center;
line-height:1.5em;
}
.message_area figure{
width:36%;
margin:50px auto;
}
.message_area h6{
width:25%;
margin:0 auto 20px;
}
.message_area p{
color:#000;
text-align:center;
line-height:1.8em;
}
.message_area p span.sale{
font-size:1.5em;
font-weight:900;
background:linear-gradient(transparent 40%, #FF0 40%);
}
.message_area p span.vendor{
font-size:1.2em;
font-weight:900;
color:#007BBB;
}







}
@media only screen and (min-width:320px) and (max-width:767px) {
.message_area{
width:90%;
margin:30px auto;
padding:0;
}
.message_area h4{
font-size:15px;
font-weight:900;
text-align:left;
line-height:1.5em;
}
.message_area figure{
width:70%;
margin:35px auto;
}
.message_area h6{
width:50%;
margin:0 auto 10px;
}
.message_area p{
color:#000;
line-height:1.8em;
}
.message_area p span.sale{
font-size:1.5em;
font-weight:900;
background:linear-gradient(transparent 40%, #FF0 40%);
}
.message_area p span.vendor{
font-size:1.2em;
font-weight:900;
color:#007BBB;
}






}










/*==================================================================

ITEM_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.online{
background:#007BBB;
color:#FFF;
font-weight:300;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
padding:80px 0;
}
@-webkit-keyframes colour{
0%{
background:#007BBB;
}
40%{
background:#005C8C;
}
80%{
background:#005C8C;
}
100%{
background:#007BBB;
}
}
@-moz-keyframes colour{
 0%{
background:#007BBB;
}
40%{
background:#005C8C;
}
80%{
background:#005C8C;
}
100%{
background:#007BBB;
}
}
.item_area{
width:1000px;
margin:0 auto;
padding:0;
}
.item_area h4{
font-family:Arial, Helvetica, "sans-serif";
font-size:66px;
font-weight:900;
text-align:center;
line-height:1;
color:rgba(255,255,255,0.2);
}
.item_area h3{
font-size:34px;
font-weight:700;
text-align:center;
position:relative;
padding-top:1em;
color:#FFF;
margin-top:-1.5em;
}
/*.swiper{
width:100%;
margin:50px 0 0;
}
.swiper img{
width:90%;
border-radius:50%;
border:10px solid #66B0D6;
}
.swiper_text{
text-align:center;
padding:30px 0;
justify-content:center;
}
.swiper_text .swiper-slide{
justify-content:center;
}
.swiper_text .swiper-slide h5{
font-size:20px;
justify-content:center;
}

.swiper_text .swiper-slide h6{
}*/






}
@media only screen and (min-width:768px) and (max-width:1023px) {
.online{
background:#007BBB;
color:#FFF;
font-weight:300;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
padding:60px 0;
}
@-webkit-keyframes colour{
0%{
background:#007BBB;
}
40%{
background:#005C8C;
}
80%{
background:#005C8C;
}
100%{
background:#007BBB;
}
}
@-moz-keyframes colour{
 0%{
background:#007BBB;
}
40%{
background:#005C8C;
}
80%{
background:#005C8C;
}
100%{
background:#007BBB;
}
}
.item_area{
width:98%;
margin:0 auto;
padding:0;
}
.item_area h4{
font-family:Arial, Helvetica, "sans-serif";
font-size:56px;
font-weight:900;
text-align:center;
line-height:1;
color:rgba(255,255,255,0.2);
}
.item_area h3{
font-size:30px;
font-weight:700;
text-align:center;
position:relative;
padding-top:1em;
color:#FFF;
margin-top:-1.5em;
}








}
@media only screen and (min-width:320px) and (max-width:767px) {
.online{
background:#007BBB;
color:#FFF;
font-weight:300;
-webkit-animation:colour 10s linear infinite;
-moz-animation:colour 10s linear infinite;
padding:40px 0;
}
@-webkit-keyframes colour{
0%{
background:#007BBB;
}
40%{
background:#005C8C;
}
80%{
background:#005C8C;
}
100%{
background:#007BBB;
}
}
@-moz-keyframes colour{
 0%{
background:#007BBB;
}
40%{
background:#005C8C;
}
80%{
background:#005C8C;
}
100%{
background:#007BBB;
}
}
.item_area{
width:98%;
margin:0 auto;
padding:0;
}
.item_area h4{
font-family:Arial, Helvetica, "sans-serif";
font-size:46px;
font-weight:900;
text-align:center;
line-height:1;
color:rgba(255,255,255,0.2);
}
.item_area h3{
font-size:26px;
font-weight:700;
text-align:center;
position:relative;
padding-top:1em;
color:#FFF;
margin-top:-1.5em;
}






}
/* ==========================
SWIPER
========================== */
.swiperCont {
width:100%;
margin:20px auto;
position:relative;
}
.swiper{
width:90%;
}
.swiper-wrapper{
padding:50px 0 0;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-rtl .swiper-button-next{
padding:0px;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev{
right:0px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next{
left:0px;
}
.swiper-button-next:focus,
.swiper-rtl .swiper-button-prev:focus,
.swiper-button-prev:focus,
.swiper-rtl .swiper-button-next:focus{
outline:none;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after{
color:#FFF;
font-size:24px;
}
.swiper-slide{
/*background-color:#994141;*/
height:auto;
}
.swiper-slide img{
border-radius:50%;
border:10px solid #66B0D6;
}
.swiper-slide .thumText{
color:#FFF;
padding:10px;
}
.swiper-slide .thumText h5{
font-size:16px;
letter-spacing:0.05em;
font-weight:700;
text-align:center;
margin:1em auto;
}
.swiper-slide .thumText button{
background-color:#FFF;
color:#007BBB;
padding:0.5em 1em;
text-align:center;
text-decoration: none;
display:inline-block;
font-size:15px;
font-weight:700;
width:70%;
margin:0 15%;
cursor:pointer;
border:none;
border-radius:20px;
}
.swiper-slide .thumText button a{
text-decoration:none;
color:#007BBB;
}
@media screen and (min-width:768px){
.swiper{
overflow:inherit;
}
.swiper-slide img{
border-radius:50%;
border:7px solid #66B0D6;
}

.swiper-slide .thumText h5{
font-size:15px;
letter-spacing:0.05em;
text-align:center;
margin:0.5em auto 1em;
}
.swiper-slide .thumText button{
background-color:#FFF;
color:#007BBB;
padding:0.3em 1em;
text-align:center;
text-decoration: none;
display:inline-block;
font-size:15px;
font-weight:700;
width:70%;
margin:0 15%;
cursor:pointer;
border:none;
border-radius:20px;
}

}
@media screen and (max-width: 767px){
.swiperCont{
width:100%;
padding:0 40px;
}
.swiper-wrapper{
padding:20px 0 0;
}
.swiper-slide img{
border-radius:50%;
border:7px solid #66B0D6;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev{
right:5px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next{
left:5px;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
padding:10px;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after{
font-size:16px;
}
.thumText{
 display:block;
}
.swiper-slide .thumText h5{
font-size:18px;
letter-spacing:0.05em;
text-align:center;
margin:0.5em auto 1em;
}
.swiper-slide .thumText button{
background-color:#FFF;
color:#007BBB;
padding:0.6em 1em;
text-align:center;
text-decoration: none;
display:inline-block;
font-size:16px;
font-weight:700;
width:90%;
margin:0 5%;
cursor:pointer;
border:none;
border-radius:30px;
}

}











/*==================================================================

OUTLINE_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.outline_area{
width:1000px;
margin:100px auto;
padding:0;
}
.outline_area h3{
font-size:32px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:10em;
margin:0 auto 50px;
padding:0.5em 1em;
outline:3px solid #007BBB;
outline-offset:5px;
background:linear-gradient(-45deg, transparent 0 20px, #FFF 20px calc(100% - 20px), transparent calc(100% - 20px)),
           repeating-linear-gradient(-45deg, #007BBB 0 2px, #FFF 2px 6px);
}
.outline_area table{
margin:0px auto;
width:100%;
border-collapse:separate;
border-spacing:2px;
}
.outline_area table th{
border:solid 2px #007BBB;
color:#007BBB;
padding:1.2em 1em;
width:20%;
font-size:15px;
font-weight:700;
letter-spacing:0.2em;
text-align:right;
vertical-align:top;
}
.outline_area table td{
color:#000;
background:rgba(0,123,187,0.2);
padding:1.2em 1em;
font-size:15px;
font-weight:500;
line-height:1.5em;
word-spacing:0.5em;
}
.outline_area h6{
width:30%;
margin:30px auto 0;
}





}
@media only screen and (min-width:768px) and (max-width:1023px) {
.outline_area{
width:98%;
margin:80px auto;
padding:0;
}
.outline_area h3{
font-size:26px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:10em;
margin:0 auto 50px;
padding:0.5em 1em;
outline:3px solid #007BBB;
outline-offset:5px;
background:linear-gradient(-45deg, transparent 0 20px, #FFF 20px calc(100% - 20px), transparent calc(100% - 20px)),
           repeating-linear-gradient(-45deg, #007BBB 0 2px, #FFF 2px 6px);
}
.outline_area table{
margin:0px auto;
width:100%;
border-collapse:separate;
border-spacing:2px;
}
.outline_area table th{
border:solid 2px #007BBB;
color:#007BBB;
padding:1.2em 1em;
width:20%;
font-size:13px;
font-weight:700;
letter-spacing:0.2em;
text-align:right;
vertical-align:top;
}
.outline_area table td{
color:#000;
background:rgba(0,123,187,0.2);
padding:1.2em 1em;
font-size:13px;
font-weight:500;
line-height:1.5em;
word-spacing:0.5em;
}
.outline_area h6{
width:30%;
margin:30px auto 0;
}







}
@media only screen and (min-width:320px) and (max-width:767px) {
.outline_area{
width:98%;
margin:60px auto;
padding:0;
}
.outline_area h3{
font-size:20px;
font-weight:900;
text-align:center;
letter-spacing:0.1em;
width:15em;
margin:0 auto 2em;
padding:0.5em 1em;
outline:3px solid #007BBB;
outline-offset:5px;
background:linear-gradient(-45deg, transparent 0 20px, #FFF 20px calc(100% - 20px), transparent calc(100% - 20px)),
           repeating-linear-gradient(-45deg, #007BBB 0 2px, #FFF 2px 6px);
}
.outline_area table{
margin:0px auto;
width:90%;
border-collapse:separate;
border-spacing:2px;
}
.outline_area table tr{
display:block;
}
.outline_area table th{
border:solid 3px #007BBB;
color:#007BBB;
padding:1.2em 1em;
display:block;
width: 100%;
font-size:15px;
font-weight:700;
letter-spacing:0.2em;
text-align:center;
vertical-align:top;
}
.outline_area table td{
color:#000;
background:rgba(0,123,187,0.15);
padding:1.2em 1em;
font-size:15px;
font-weight:500;
line-height:1.5em;
word-spacing:0.5em;
display:block;
}
.outline_area h6{
width:70%;
margin:30px auto 0;
}






}










/*==================================================================

XXX_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.xxx_area{
width:1000px;
margin:80px auto;
padding:0;
}





}
@media only screen and (min-width:768px) and (max-width:1023px) {
.xxx_area{
width:98%;
margin:60px auto;
padding:0;
}







}
@media only screen and (min-width:320px) and (max-width:767px) {
.xxx_area{
width:98%;
margin:30px auto;
padding:0;
}






}