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

basic config

===================================================
*/
*{
margin: 0;
padding: 0;
font-size: 100%;
line-height: 150%;
list-style: none;
font-family: メイリオ, Meiryo, "MS PGothic";
}

body{
background: #f1f1f1 url(../images/bg2.jpg) no-repeat fixed;
background-size: cover;
}

img{
width: 100%;
}

.inner{
width: 1100px;
margin: 0 auto;
}

a:hover{
opacity: .5;
}


iframe{
background: #fff;
}


@media screen and ( max-width:699px ){
  .inner{
    width: 100%;
    box-sizing: border-box;
  }
  body{
    padding-top: 45px;
  }
}

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

swiper

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

.swiper{
width: 100%;
}

.swiper li{
width: 70vw;
}
.swiper li img{
display: block;
}



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

nav

===================================================
*/
nav{
background-color: rgba(201,25,27,1);
}

nav .menu{
display: none;
}

nav ul{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}

nav li a{
text-decoration: none;
display: block;
width: 100%;
background-color: rgba(201,25,27,1);
color: #fff;
padding: 10px;
}

nav li.logo,
nav li.close{
display: none;
}

@media screen and ( max-width:699px ){
  nav{
    width: 100%;
    height: 45px;
    position: fixed;
    top:0;
    left: 0;
    z-index: 200000;
  }
  
  nav ul{
    overflow: hidden;
    overflow-y: scroll;
    position: fixed;
    top: -100%;
    left: 0;
    -webkit-transition: opacity 0.15s linear,top .3s linear;
    -moz-transition: opacity 0.15s linear,top .3s linear;
    -o-transition: opacity 0.15s linear,top .3s linear;
    transition: opacity 0.15s linear,top .3s linear;
  }
  
  nav ul.on{
    position: fixed;
    display: block;
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: rgba(201,25,27,1);

    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out;
    top: 0;
  }
  
  nav li a{
    border-bottom: dotted 1px #fff;
    width: auto;
  }
  
  nav li.logo{
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }
  
  nav li.close{
    display: block;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 180%;
    color: #fff;
  }
  
  nav li.logo img{
    width: auto;
  }
  
  nav .menu{
    display: block;
    color: #fff;
    padding: 5px;
    font-size: 170%;
  }
}




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

section

===================================================
*/
section{
margin-top: 40px;
}

section .inner{
padding-bottom: 20px;
background: #fff;
box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2);
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

section h2{
font-size: 130%;
background: rgba(201,25,27,1);
padding: 7px 10px;
color: #fff;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

section h2 i{
background: #fff;
padding: 5px;
border-radius: 5px;
color: rgba(201,25,27,1);
margin-right: 10px;
font-weight: bold;
}

#special .inner{
}



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

message

===================================================
*/
#message .contents{
padding: 20px;
}




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

special

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

#special ul{
display: flex;
flex-wrap: wrap;
padding: 20px 10px 0 10px;
}

#special li{
box-sizing: border-box;
width: 50%;
border-right: solid 1px #eee;
border-bottom: solid 1px #eee;
padding: 10px;
cursor: pointer;
}


#special li:nth-of-type(odd){
border-left: solid 1px #eee;
}
#special li:nth-of-type(1),
#special li:nth-of-type(2){
border-top: solid 1px #eee;
}

#special li a{
display: table;
width: 100%;
text-decoration: none;
}

#special li:hover{
opacity: 1;
background: rgba(201,25,27,.3);
}

#special li .image,
#special li .content{
display: table-cell;
vertical-align: middle;
}

#special li .image{
width: 80px;
}
#special li .content{
color: #222;
padding: 10px;
}

li a .image .inner {
display: block;
background-size: cover;
width: 80px;
height: 80px;
padding: 0;
border-radius: 0;
box-shadow:none;
}





@media screen and ( max-width:699px ){
  #special li{
    width: 100%;
    border-left: solid 1px #eee;
  }
  #special li:nth-of-type(2){
    border-top: 0;
  }
  
}

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

info

===================================================
*/
#info ul{
padding: 20px 10px 0 10px;
}

#info li{
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px #eee;
}

#info li a{
display: table;
width: 100%;
text-decoration: none;
}

#info li:hover{
opacity: 1;
background: rgba(201,25,27,.3);
}

#info li .image,
#info li .text{
display: table-cell;
vertical-align: middle;
}

#info li .image{
width: 80px;
}
#info li .text{
color: #222;
padding: 10px;
}





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

footer

===================================================
*/
footer{
background: rgba(201,25,27,1);
padding: 30px 0;
text-align: center;
}

footer img{
width: auto;
}

footer a{
color: #fff;
text-decoration: none;
}