@charset "utf-8";

#mainvis{
margin: 50px 0 0 0;
overflow: hidden;
}
#mainvis:before{
content: "";
width: 110%;
height: 160px;
background: #F8B500;
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: -9;
transform: rotate(-2deg);
}
#mainvis:after {
content: "";
width: 110%;
height: 140px;
background: #986F03;
position: absolute;
left: 0;
right: 0;
bottom: -50px;
z-index: -9;
transform: rotate(-4deg);
}

#mainvis p{
position: absolute;
bottom: 20px;
right: 0;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
bottom: -20px;
text-align: right;
}
.swiper-pagination-bullet-active{
background: #4d4d4d;
}

.swiper-button-next, 
.swiper-button-prev{
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
color: #000;
font-size: 0.7em;
}
.swiper-button-next::after, .swiper-button-prev::after{
font-size: 1em;
}


#mf2 .mf-inner{
padding: 50px 0;
}

#mf2 #cbtn{
margin: 0 0 50px 0;
display: flex;
justify-content: center;
}
#mf2 #cbtn li{
width: calc(100% / 6 - 10px);
text-align: center;
margin: 0 0.3em;
}
#mf2 #cbtn li a{
display: block;
border: #000 solid 1px;
border-radius: 100px;
padding: 10px;
line-height: 1em;
}

#mf2 #cbtn li:nth-of-type(1) a{
background: #f8b500;
}
#mf2 #cbtn li:nth-of-type(2) a{
background: #cc99cc;
}
#mf2 #cbtn li:nth-of-type(3) a{
background: #ff99cc;
}
#mf2 #cbtn li:nth-of-type(4) a{
background: #aad27e;
}
#mf2 #cbtn li:nth-of-type(5) a{
background: #99ccff;
}
#mf2 #cbtn li:nth-of-type(6) a{
background: #ff9966;
}

#mf2 .cbox{
width: 900px;
margin: -100px auto 0 auto;
padding: 100px 0 0 0;
}
#mf2 .cbox h2{
background: #f8b500;
text-align: center;
border: #000 solid 1px;
border-radius: 100px;
padding: 10px;
margin: 0 0 20px 0;
line-height: 1em;
}

#mf2 .cbox:nth-of-type(2) h2{
background: #cc99cc;
}
#mf2 .cbox:nth-of-type(3) h2{
background: #ff99cc;
}
#mf2 .cbox:nth-of-type(4) h2{
background: #aad27e;
}
#mf2 .cbox:nth-of-type(5) h2{
background: #99ccff;
}
#mf2 .cbox:nth-of-type(6) h2{
background: #ff9966;
}

#mf2 .cboxs{
position: relative;
margin: 0 0 50px 0;
z-index: 9;
}
#mf2 .cboxs:before{
content: "";
border: #f8b500 solid;
border-width: 0 0 1px 1px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -9;
}
#mf2 .cboxs:after{
content: "";
width: 10px;
height: 10px;
background: #f8b500;
border-radius: 100%;
position: absolute;
top: 0;
transform: translate(-50%,0);
z-index: -9;
}

#mf2 .cbox:nth-of-type(2) .cboxs:before{
border-color: #cc99cc;
}
#mf2 .cbox:nth-of-type(2) .cboxs:after{
background: #cc99cc;
}
#mf2 .cbox:nth-of-type(3) .cboxs:before{
border-color: #ff99cc;
}
#mf2 .cbox:nth-of-type(3) .cboxs:after{
background: #ff99cc;
}
#mf2 .cbox:nth-of-type(4) .cboxs:before{
border-color: #aad27e;
}
#mf2 .cbox:nth-of-type(4) .cboxs:after{
background: #aad27e;
}
#mf2 .cbox:nth-of-type(5) .cboxs:before{
border-color: #99ccff;
}
#mf2 .cbox:nth-of-type(5) .cboxs:after{
background: #99ccff;
}
#mf2 .cbox:nth-of-type(6) .cboxs:before{
border-color: #ff9966;
}
#mf2 .cbox:nth-of-type(6) .cboxs:after{
background: #ff9966;
}



#mf2 .cboxs-inner{
padding: 0 0 15px 20px;
}
#mf2 .cboxs figure{
max-width: 140px;
background: #4d4d4d;
position: absolute;
top: 0;
right: 0;
}
#mf2 .cboxs figure img{
width: 100%;
}
#mf2 .cboxs figure img{
}
#mf2 .cboxs dd{
font-size: 0.88em;
}
#mf2 .cboxs dd strong{
font-size: 1.7em;
font-weight: bold;
}

#mf2 .cboxs .clist + p{
min-height: 3.5em;
}

#mf2 .cboxs ul{
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
right: 160px;
bottom: 10px;
}
#mf2 .cboxs ul li{
margin: 0 0 0 20px;
background: url("../img/list/gic1.jpg") center top /100% auto no-repeat;
}
#mf2 .cboxs ul li:nth-of-type(1){
background-image: url("../img/list/gic1.jpg");
}
#mf2 .cboxs ul li:nth-of-type(2){
background-image: url("../img/list/gic2.jpg");
}
#mf2 .cboxs ul li:nth-of-type(3){
background-image: url("../img/list/gic3.jpg");
}
#mf2 .cboxs ul li:nth-of-type(4){
background-image: url("../img/list/gic4.jpg");
}
#mf2 .cboxs ul li:nth-of-type(5){
background-image: url("../img/list/gic5.jpg");
}
#mf2 .cboxs ul li:nth-of-type(6){
background: none;
}
#mf2 .cboxs ul li:nth-of-type(6) img{
opacity: 1;
}
#mf2 .cboxs ul img{
opacity: 0;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
#mf2 .cboxs ul a[target="_blank"]{
background: #fff;
}
#mf2 .cboxs ul a[target="_blank"] img{
opacity: 1;
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
}
#mf2 .cboxs ul a[target="_blank"]:hover{
display: inline-block;
opacity: 1;
}
#mf2 .cboxs ul a[target="_blank"]:hover img{
opacity: 0.7;
	transition: 0.2s linear;
}


#mf2 .cboxs + dl{
width: 300px;
margin: 50px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
#mf2 .cboxs + dl:after{
content: "";
max-width: 80px;
max-height: 90px;
width: 10.67vw;
height: 12vw;
background: url("../img/list/i4.jpg") center center /cover no-repeat;
position: absolute;
right: -100px;
}
#mf2 .cboxs + dl dt{
width: 100%;
text-align: center;
margin: 0 0 10px 0;
}
#mf2 .cboxs + dl dd{
margin: 0 3px;
}

#mf2 + p{
position: fixed;
bottom: 20px;
left: 0;
right: 0;
z-index: 99;
}
#mf2 + p a{
display: flex;
justify-content: center;
align-items: center;
width: 410px;
margin: 0 auto;
padding: 10px;
background: #f3c91e;
border-radius: 100px;
}
#mf2 + p a img{
margin: 0 10px 0 0;
}













@media screen and (max-width: 850px) {
#mainvis:before{
display: none;
}
#mainvis:after {
display: none;
}

#mainvis figure img{
width: 100%;
}
#mainvis p{
right: 1vw;
bottom: 1vw;
}
#mainvis p img{
max-width: 230px;
width: 30vw;
}

.swiper-slide img{
margin: 0 auto;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
bottom: -7vw;
padding: 0 3vw;
text-align: center;
}
.swiper-pagination-bullet{
max-width: 20px;
max-height: 20px;
width: 3vw;
height: 3vw;
}
.swiper-button-next, 
.swiper-button-prev{
max-width: 30px;
max-height: 30px;
width: 4vw;
height: 4vw;
}



#mf2 .mf-inner{
padding: 10vw 5vw;
}

#mf2 #cbtn{
margin: 0 0 5vw 0;
justify-content: space-between;
flex-wrap: wrap;
font-size: 0.8em;
}
#mf2 #cbtn li{
width: calc(100% / 2 - 2vw);
margin: 0 0 3vw 0;
}
#mf2 #cbtn li a{
padding: 2vw;
}


#mf2 .cbox{
width: auto;
margin: -12vw auto 0 auto;
padding: 12vw 0 0 0;
}
#mf2 .cbox h2{
padding: 2vw;
margin: 0 0 3vw 0;
}


#mf2 .cboxs{
margin: 0 0 10vw 0;
}



#mf2 .cboxs-inner{
padding: 0 0 3vw 3vw;
}
#mf2 .cboxs figure{
max-width: 250px;
width: 30vw;
position: static;
}
#mf2 .cboxs figure img{
width: 100%;
}
#mf2 .cboxs .clist{
justify-content: space-between;
align-items: flex-start;
}
#mf2 .cboxs dl{
width: 55vw;
font-weight: normal;
}
#mf2 .cboxs dt{
font-size: 0.7em;
}
#mf2 .cboxs dd{
font-size: 0.8em;
line-height: 1.8em;
}
#mf2 .cboxs dd strong{
display: block;
font-size: 1.3em;
}
#mf2 .cboxs p{
font-weight: normal;
}
#mf2 .cboxs .clist + p{
font-size: 0.7em;
min-height:inherit;
line-height: 1.8em;
}

#mf2 .cboxs ul{
display: flex;
justify-content: flex-end;
align-items: center;
position: static;
}
#mf2 .cboxs ul li{
max-width: 40px;
width: 7vw;
margin: 0 0 0 2vw;
}


#mf2 .cboxs + dl{
margin: 5vw auto;
}
#mf2 .cboxs + dl:after{
display: none;
}
#mf2 .cboxs + dl dt{
margin: 0 0 2vw 0;
}

#mf2 + p{
bottom: 2vw;
z-index: 99;
}
#mf2 + p a{
width: 80vw;
padding: 2vw;
}
#mf2 + p a img{
max-width: 50px;
width: 7.81vw;
margin: 0 2vw 0 0;
}






}





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

}