@charset "utf-8";



/* campaign */

.campaign {
    width:100%;
    margin: 0 auto;
    padding:0;
}
.main {
    width:100%;
    margin: 0 auto;
    padding:0;
    background:url("../img/bg-pc.jpg") top center no-repeat;
    background-size: cover;
    position:relative;
}
.main h2 {
    width:100%;
    margin: 0 auto;
    padding:0;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    position:relative;
    overflow:hidden;
}
.main h2 img {max-width:100%; margin:0;}

.main img.title {position:absolute; top:0; left:0; right:0; margin:auto;}
.main img.title {z-index:1;}
.main img.kksk  {z-index:2;}

.main a img {max-width:100%; border-radius:10px;}
.main a {transition: .1s;}
.main a:hover {opacity: .6;}

.kome {
    margin: 0 auto;
    padding:30px 0;
    background:#fab917;
}
.kome p {
    width:90%;
    margin:0 auto;
    font-size:0.9rem;
    line-height:1.5;
    letter-spacing:0;
}

@media only screen and (max-width:640px){
    
    .main {background:url("../img/bg-sp.jpg") top center no-repeat; background-size:cover;}
}



/* sagasu */

ul.sagasu {
    width:90%;
    margin:0 auto;
    padding:50px 5%;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    background:#fff;
}
ul.sagasu li {margin:10px 6px;}
ul.sagasu li a {
    width:100%;
    display:block;
    text-decoration:none;
}
ul.sagasu li a span {
    margin:0 auto;
    padding:15px 35px 15px 25px;
    display:block;
    color:#231815;
    font-size:1rem;
    font-weight:700;
    text-align: center;
    line-height:1;
    letter-spacing:0.1em;
    border: solid 2px #231815;
    border-bottom: solid 6px #231815;
    border-radius:50px;
    position: relative;
    background:#fff;
    transition: .2s;
}
ul.sagasu li a:hover span {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
    border-bottom: solid 2px #231815;
}

ul.sagasu li a span::before {
    content: "";
    width: 9px;
    height:9px;
    margin:auto;
    position:absolute; top:0; bottom:0; right:20px;
    vertical-align: middle;
    border-top: 2px solid #231815;
    border-right:2px solid #231815;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .3s;
}
ul.sagasu li a span:hover::before {right:15px;}

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

    ul.sagasu {display:flex; flex-flow:row wrap; justify-content:space-between; align-content:center; align-items:center;}
    ul.sagasu li {width:49%; margin:10px 0;}
    ul.sagasu li a span {font-size:0.9rem;}
}