/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media only screen and (max-width: 680px){
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
#content{
max-width:100%;
margin:0 auto;
}

#contents{
max-width:100%;
margin:0 auto;
}

.simg{
max-width: 33%;
height: auto;
padding:0 1px 0 0;
}

/* ========BASIC======== */
html {
   overflow-y:scroll;
}

body {
   margin:0;
   padding:0;
   line-height:1.6;
   letter-spacing:1px;
   font-family:"Hiragino Kaku Gothic Pro",HiraKakuPro-W3,"ヒラギノ角ゴ Pro W3","メイリオ", Meiryo,"ＭＳ Ｐゴシック",verdana,sans-serif;
   color:#333;
   font-size:13px;
   background:#fff;
   
   
}

br {
   letter-spacing:normal;
}

a {
   color:#2686ba;
   text-decoration:none;
}

a:hover {
   color:#2686ba;
   text-decoration:none;
}

img {
   border:0;
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}
.non{display:none;}
.non1{display:block;
    margin:2px 2px;
   }


.cen{text-align:center;}



.float
      {
      float: left;
      margin-right: 1em;
      margin:10px 5px 10px 0;
}

.float1
      {
      display:block;
      float: none;
      margin:0 auto;
      text-align:center;
      
}

.floatclear1
      {
       clear: both;
}



.canb{color:#e60012;
  font-size:18px;
  font-weight:bold;
}

/* ========TEMPLATE LAYOUT======== */
#top1 {
width:100%;
height:100%;
}

#top h1{
font-size:9px;
}

#top {
   width:100%;
   margin:0 auto;
   background:#fff;
}
#header {
width: 100%;
height: auto;

}
#header img{
width: 100%;
height: auto;

}
#menu {
   position:relative;
   width:100%;
   
}



#main {

   margin:10px 0px 0px 0px;
width:100%;
   background:#fff;
}

#main1 {


   margin:10px 0px 0px 0px;
width:100%;
   background:#fff;
}

#subr {
   clear: both;
   width:100%;
   background:#fff;
   margin:0 auto;
}


#footer {
   clear:both;
   width:100%;
   
}

/* 回り込み解除 */



/* ========HEADER CUSTOMIZE======== */

#top1 h1{
   padding:5px;

}

.logo img{
   width:80%;  
}


/* ========MENU CUSTOMIZE======== */
#menu ul {
   margin:0;
   padding:0;
   list-style:none;
   width:100%;
}

#menu li {
   margin-top:3px;
   margin-left:1px;
   padding:3.5px 0;
   border-bottom:none;
   background:#fff url("../img/menu.jpg")  no-repeat;
   width:24.6%;
}

#menu li a {
   display:block;
   width:100%;
   height:auto;
   padding:10px 0px;
   line-height:15px;
   font-weight:bold;
   text-align:center;
   outline:none;
   color:#fff;
   font-size:98%;
}

#menu li a:hover {
   display:block;
   width:100%;
   height:auto;
   padding:10px 0;
   line-height:15px;
   font-weight:bold;
   text-align:center;
   outline:none;
   color:#fff;
   background:#036ebb;
   font-size:98%;
}

#menu img{
   padding:0;
   margin:-10px 0 0 0;
   width:16%;
   height:auto;
}

/* ========MAIN CONTENTS CUSTOMIZE======== */


#main a:hover {
   border:0;
   color:#0066ff;
}


.pr{margin:10px 0 15px 0px;
}
.pr a:hover{
   opacity:0.7;
   filter:alpha(opacity=70);
   -ms-filter: "alpha( opacity=70 )";
}

#main h2 {
   font-size:17px;
   padding:5px 0 5px 40px;
   font-weight:bold;
}

#main h3 {
   font-size:17px;
}



#main p{
   margin:10px 10px;
   line-height:2.0;
}

#main dt{padding:0 0px 5px 30px;}

#main ul{
  list-style:none;
}

#main li a{display:block;
   width:100%;
   height:auto;
   padding:10px 0px;
   font-weight:bold;
   text-align:center;
   outline:none;
   color:#fff;
   background:#036ebb;
   font-size:15px;
   border:solid 1px #036ebb;
   margin:1px 1px 0 -20px;
}

#main li a:hover{
   border:solid 1px #036ebb;
   color:#fff;
}


.fuyou{font-size:20px;
}




.sect{
      width:95%;
      
}

#main li {
   background:url("../img/reten.png")  no-repeat;
   margin:0 0 0 -20px;
   padding:0px 0 0 25px;
   line-height:1.8;
   list-style:none;
   font-size:16px;
   font-weight:bold;
   background-size:20px 20px;
}





.btn a{
   text-align:center;
   display:block;
   background:#f7931e;
   color:#fff !important;
   font-weight:bold;
   margin:0 10px 20px 10px;
   padding:10px 0;
   border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}




#main table {
   width:98%;
   border-collapse:collapse;
   margin:10px;
}




#main table th {
   font-size:15px;
   text-align:center;
   width:40%;

}

#main table td {
   
   width:60%;
}


.require{color:#ff0000;}

input { width: 98%; }

input.ex{ width: 50px;
text-align:left; }

select { width: 50%; }

radio {display:block;}

textarea {
width: 98%;
}



/* ========subL CONTENTS CUSTOMIZE======== */

#subr h2{
 font-size:18px;
}

#subr h3{
 font-size:17px;
}

.big br{
 display:none;
}





/* ========PAGETOP CUSTOMIZE========= */
#pageTop {
   
   width:165px;
   margin:0 auto;
   
}

/* ========FOOTMENU CUSTOMIZE======== */

#footer{
   
   margin:0px 0 0px 0;
   overflow: hidden;
}




/* ========FOOTER CUSTOMIZE======== */


/* TOPNAVI CUSTOMIZE */
#main div.topNavi {
   overflow:hidden;
   position:relative;
   margin-left:0px;
   margin-bottom:10px;
}

* html #main div.topNavi {
   height:1em;
   overflow:visible;
}

#main div.topNavi div.topNaviColumn {
   display:inline;
   width:98%;
   float:left;
   margin-left:7px;
   padding:0 0 2em 0;
}

#main div.topNavi h2.topNaviImg {
   margin:0;
   padding:0;
   background:none;
}

#main div.topNavi div.topNaviColumn p.detail {
   position:absolute;
   bottom:0;
   
   text-align:right;
}

#main div.topNavi div.topNaviColumn p.detail a {
   padding:0 0 0 7px;
   background:url("../images/bg_arrow.gif") no-repeat left 50%;
}

#main div.topNavi div.topNaviColumn p.cLeft {
   right:400px;
}

#main div.topNavi div.topNaviColumn p.cRight {
   right:0px;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li{
   justify-content: center;
   align-items: center;

   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
   font-weight:bold;
}

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: -10px;
   font-size: 0;
   z-index: 99;
}

@keyframes bugfix {
   from {
     padding: 0;
   }
   to {
     padding: 0;
   }
 }
 @-webkit-keyframes bugfix {
   from {
     padding: 0;
   }
   to {
     padding: 0;
   }
 }
 #overlay-button {
   position: absolute;
   right: 2em;
   top: 3em;
   padding: 26px 11px;
   z-index: 5;
   cursor: pointer;
   user-select: none;
   background:#fff;
   border: 1px solid #000;
 }
 #overlay-button span {
   height: 4px;
   width: 35px;
   border-radius: 2px;
   background-color: #333;
   position: relative;
   display: block;
   transition: all .2s ease-in-out;
 }
 #overlay-button span:before {
   top: -10px;
   visibility: visible;
 }
 #overlay-button span:after {
   top: 10px;
 }
 #overlay-button span:before, #overlay-button span:after {
   height: 4px;
   width: 35px;
   border-radius: 2px;
   background-color: #333;
   position: absolute;
   content: "";
   transition: all .2s ease-in-out;
 }
 #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
   background: #333;
 }
 
 input[type=checkbox] {
   display: none; 
   
 }
 
 input[type=checkbox]:checked ~ #overlay {
   visibility: visible; 
 }
 
 input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
   background: transparent;
   
   
 }
 input[type=checkbox]:checked ~ #overlay-button span:before {
   transform: rotate(45deg) translate(7px, 7px);
 
 }
 input[type=checkbox]:checked ~ #overlay-button span:after {
   transform: rotate(-45deg) translate(7px, -7px);
 
 
 }
 
 #overlay {
   height: 100vh;
   width: 100vw;
   background: #036eb8;
   z-index: 2;
   visibility: hidden;
   position: fixed;
 }
 #overlay.active {
 
 }
 #overlay ul {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-align: center;
   height: 100vh;
   padding-left: 0;
   list-style-type: none;
 }
 #overlay ul li {
   padding: 1em;
 }
 #overlay ul li a {
   color: #fff;
   text-decoration: none;
   font-size: 16px;
 }
 #overlay ul li a:hover {
   color: #000!important;
 }

}