/* frame
---------------------------------------------- */
body{
	min-width: 1200px;
}

 .x2img{
	 width: 100%;
	 height: auto;
 }

 #header .logo{
 position:relative;
	 width: 197px;
	 margin: auto;
     z-index: 10;
 }

 ul{
     padding: 0;
 }

 /* header
---------------------------------------------- */
#header{
	position: relative;
	width: 100%;
	height: 800px;
	overflow: hidden;
	border-bottom:10px solid #064e97;
}

#header  #head_backimage{
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	top:0px;
	z-index: 0;
	opacity:0;
}

#header .copy{
	width: 1200px;
	margin: auto;
	margin-top: 200px;
    position: relative;
    z-index: 10;
}

 #header .copy-txt{
     width: 1200px;
     margin: auto;
     margin-top: 200px;

     position: relative;
     z-index: 10;

 }
 #header .copy-txt div{
     color: #fff;
     font-weight: bold;
     font-size: 1.4em;
 }

 #subcopy{
     font-weight: bold;
     color:#45a0e5;
 }


#header .copy{fill:#fff;}
#header #copy_set1 .base{fill:#33ccff;stroke:#fff;stroke-width:2;stroke-opacity: 0.2;}
#header #copy_set2 .base{fill:#99cc33;stroke:#fff;stroke-width:2;stroke-opacity: 0.2;}
#header #copy_set3 .base{fill:#ffcc33;stroke:#fff;stroke-width:2;stroke-opacity: 0.2;}

 #header .set1,#header .set2,#header .set3{
	 float: left;
	 width: 400px;
	 height: 400px;
 }

 #header .set2{
	 width: 400px;
	 margin-top: -12px;
 }



 /* subcopy
---------------------------------------------- */
#subcopy{
	margin:100px auto;
}

 #subcopy li{
	 animation: anime1 1s 0s ease forwards;
	 opacity: 0;
     margin-bottom:3em;
 }

 #subcopy li:last-child{
     margin-top: 5em;
     margin-bottom: 0;
 }

 @keyframes anime1 {
	 0% {opacity:0;}
	 100% {opacity:1;}
 }


 #subcopy li:nth-of-type(1){animation-delay:3s;}
 #subcopy li:nth-of-type(2){animation-delay:3.4s;}
 #subcopy li:nth-of-type(3){animation-delay:3.9s;}
 #subcopy li:nth-of-type(4){animation-delay:5s;}


 /* facility
---------------------------------------------- */
 #facility{
	 margin: auto;
	 min-width: 500px;
 }

 #facility h2{
	 border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
	 padding:62px 0;
     color: #003366;
 }

 #facility ul li{
	 display: inline-block;
	 width: 500px;
	 text-align: left;
	 color: #003366;
	 margin: 48px;
     vertical-align: top;
 }

 #facility ul li h3{
	 font-size: 28px;
	 font-weight: bold;
	 margin-bottom: 12px;
 }


 #facility ul li .info{
	 text-align: right;
	 font-weight: bold;
	 margin-top: 6px;
	 line-height: 1.4;
 }

 #facility ul li img{
	 border-radius: 12px;
 }


 /* contact
---------------------------------------------- */
 #contact{
	 width: 100%;
	 border-top: 1px solid #ccc;
	 padding:62px 0;
 }

 #contact h2{
	 font-size: 180%;
	 color: #003366;
 }

 #contact #contact_link{
	 margin: 32px auto;
 }

 #contact #contact_link a{
	 display: inline-block;
	 padding: 24px 100px;
	 background: #064e97;
	 color: #fff;
	 text-decoration: none;
	 font-size:120%;
	 border-radius: 12px;
 }


 /* saiyou
---------------------------------------------- */
 #saiyou{
     width: 100%;
     border-top: 1px solid #ccc;
     padding:62px 0;
 }

 #saiyou h2{
     font-size: 180%;
     color: #003366;
 }

 #saiyou #shinsotu{
     margin: 32px auto;
 }

 #saiyou #shinsotu a{
     display: inline-block;
     padding: 24px 100px;
     background: #064e97;
     color: #fff;
     text-decoration: none;
     font-size:120%;
     border-radius: 12px;
 }



 /* corporration
---------------------------------------------- */
 #corporration{
     width: 100%;
     border-top: 1px solid #ccc;
     padding:62px 0;
 }

 #corporration h2{
     font-size: 180%;
     color: #003366;
     margin-bottom: 1em;
 }

 #corporration ul li{
     margin:4px;
     display: inline-block;
 }

 #corporration ul li a{
     display: inline-block;
     background: #064e97;
     font-style: 14px;
     padding: 12px;
     width: 200px;
     color: #fff;
     text-decoration: none;
     border-radius: 12px;
 }



 /* SP-Tablet
-------------------------------------------------------------------------------------------- */

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

	 body{
		 min-width: auto;
	 }

     .min-w{min-width:auto !important;}
     .inframe{width:auto;}
     .left,.right{float: none}

     #wrap{
         padding: 0 12px;
     }

     #header{
         width: 100%;
         height: auto;
         text-align: center;
     }

	 #header .copy{
		 width: 100%;
         margin: auto;
         padding:6% 0;
	 }

     #header .copy-txt{
         width: 100%;
         margin-top: 150px;
         margin-bottom: 3em;
     }

     #header .copy svg{
         width: 100%;
         height: 100%;
     }

     #header .set1,#header .set2,#header .set3{
         display: inline-block;
         width: 29%;
         height: auto;
         margin: 0.8%;
     }

     #header .set2{
         width: 36%;
         margin-top: 1%;
     }

     #header .logo{
         width: 30%;
         margin: 6% auto;

     }


     #header  #head_backimage{
        height: 500px;

     }

     #subcopy{
         margin:50px auto;
     }
     #subcopy img{
         margin: 1% auto;
     }
     #subcopy li:nth-of-type(4) img{
         width: 96%;
     }

     #facility{
         min-width: auto;
     }

     #facility h2{
         border-top: 1px solid #ccc;
         border-bottom: 1px solid #ccc;
         padding:62px 0;
     }

     #facility h2 img{
         width: 80%;
     }


     #facility ul li{
         display: inline-block;
         width: 90%;
         text-align: left;
         color: #003366;
         margin: 5%;
     }

     #facility ul li img{
         width: 100%;
     }

     #contact{
         width: 90%;
         margin: auto;
     }

     #facility ul li h3{
         font-size: 120%;
     }
     #contact #contact_link a{
         padding: 24px;
     }

 }