@charset "utf-8";

body{padding-bottom:calc(3vmin * 4);/*background:url(../img/body_bg.gif) repeat-x top left;*/}

#wrap > header,nav,#top,main,#topick,footer section{max-width:960px;margin:auto;}
#wrap > header{overflow:hidden;margin-bottom:1em;}
#wrap > header h1{font-weight:normal;font-size:0.4em;line-height:2em;margin-bottom:1em;color:#999;text-align:center;}
#wrap > header > p{text-align:center;}
#wrap > header a img{width:60%;}
#wrap > header div{padding:1em;text-align:center;}
#wrap > header div p{line-height:1.2;}
#wrap > header div p:nth-child(1),header div p:nth-child(2) a{font-weight:bold;color:#1d2088;text-shadow:1px 1px 0 rgba(255,255,255,1),-1px -1px 0 rgba(255,255,255,1),-1px 1px 0 rgba(255,255,255,1),1px -1px 0 rgba(255,255,255,1);}
#wrap > header div p:nth-child(1){font-size:4vmin;}
#wrap > header div p:nth-child(2) a span{font-size:1.6em;line-height:2;}
#wrap > header div p:nth-child(3) a{display:block;max-width:300px;margin:auto;padding:0.5em 0;color:#fff;text-align:center;border-radius:5px;border:solid 1px #6062E5;box-shadow:0px 0px 3px rgba(0,0,0,0.5);
background: rgb(29,32,136);
background: -moz-linear-gradient(top, rgba(29,32,136,1) 0%, rgba(58,53,221,1) 50%, rgba(47,44,204,1) 51%, rgba(96,98,229,1) 100%);
background: -webkit-linear-gradient(top, rgba(29,32,136,1) 0%,rgba(58,53,221,1) 50%,rgba(47,44,204,1) 51%,rgba(96,98,229,1) 100%);
background: linear-gradient(to bottom, rgba(29,32,136,1) 0%,rgba(58,53,221,1) 50%,rgba(47,44,204,1) 51%,rgba(96,98,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2088', endColorstr='#6062e5',GradientType=0 );
}

#top{margin-bottom:2em;}
#top img{width:100%;box-shadow:3px 3px 16px rgba(0,0,0,0.4);border-radius:5px;}


nav{position:fixed;left:0;bottom:0;width:100%;z-index:200;}
nav ul{display:flex;background-color:#fff;}
nav li{flex:1;display: flex;}
nav a{box-sizing:border-box;display: flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:0.6em;height:4em;width:100%;
background: rgb(44,102,199);
background: -moz-linear-gradient(top, rgba(44,102,199,1) 0%, rgba(0,69,160,1) 100%);
background: -webkit-linear-gradient(top, rgba(44,102,199,1) 0%,rgba(0,69,160,1) 100%);
background: linear-gradient(to bottom, rgba(44,102,199,1) 0%,rgba(0,69,160,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c66c7', endColorstr='#0045a0',GradientType=0 );
border-top:solid 1px #7192C6;
border-left:solid 1px #7192C6;
border-right:solid 1px #0050B2;
transition:opacity 0.3s;
}
nav a:hover{opacity:0.8;}
nav a span{white-space:nowrap;}

#contents{padding:2em 1em;background:url(../img/contents_bg.jpg);box-shadow:0px 0px 10px rgba(0,0,0,0.5);}

main header li a{color:#009;}

.contact{padding:4em 1em;text-align:center;}
.contact h2{margin-bottom:1em;font-size:6vmin;text-align:center;}
.contact p:nth-of-type(1) a{font-size:8vmin;font-weight:bold;color:#1d2088;}
.contact p:nth-of-type(2){font-size:1em;margin-bottom:2em;}
.contact p:nth-of-type(3) a{display:inline-block;padding:0.5em 2em;color:#fff;text-align:center;border-radius:5px;border:solid 1px #6062E5;box-shadow:0px 0px 6px rgba(0,0,0,0.6);font-size:5vmin;
background: rgb(29,32,136);
background: -moz-linear-gradient(top, rgba(29,32,136,1) 0%, rgba(58,53,221,1) 50%, rgba(47,44,204,1) 51%, rgba(96,98,229,1) 100%);
background: -webkit-linear-gradient(top, rgba(29,32,136,1) 0%,rgba(58,53,221,1) 50%,rgba(47,44,204,1) 51%,rgba(96,98,229,1) 100%);
background: linear-gradient(to bottom, rgba(29,32,136,1) 0%,rgba(58,53,221,1) 50%,rgba(47,44,204,1) 51%,rgba(96,98,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2088', endColorstr='#6062e5',GradientType=0 );
transition:opacity 0.3s;
}
.contact p:nth-of-type(3) a:hover{opacity:0.8;}

aside{padding:3em 1em;background:#3030B2;font-size:0.8em;text-align:center;}
aside ul{max-width:960px;margin:auto;}
aside li:not(:last-child){margin-bottom:1em;}
aside li a{display:block;justify-content:space-between;box-sizing:border-box;width:100%;
padding:2em;background:#fff;color:#111;border-radius:10px;box-shadow:2px 2px 6px 0 rgba(0,0,0,0.5);}

aside a p:first-child{margin-bottom:0.8em;line-height:1.4;font-size:1em;font-weight:700;}
aside a p:last-child{padding:0.5em;line-height:1;font-size:2em;font-weight:900;text-align:center;background:#ff0;border-radius:10px;}
aside li a p:last-child::before{content:"\f054";font-family: "Font Awesome 5 Free";font-weight:900;color:#fff;background:#111;border-radius:100%;
display:block;width:1.5em;height:1.5em;line-height:1.5em;font-size:0.5em;text-align:center;float:right;transform:translateY(20%);transition:transform 0.3s;}
aside li a:hover p:last-child::before{transform:translateY(20%) translateX(-1em);}
aside a p span{color:#1da1f2;}


footer{text-align:center;background:#f0f0f0;}
footer section{padding:2em;}
footer h2{margin-bottom:1em;}
footer h2 img{width:100%;max-width:260px;}
footer p img{width:auto;padding:1em;}

p.link_maita a{text-decoration:underline;color:#333;}







@media screen and (min-width: 480px),print {
body{padding-bottom:0;}
#wrap > header a img{width:100%;max-width:260px;}
#wrap > header div p:nth-child(1){font-size:1em;}
#wrap > header div p:nth-child(2) a span{font-size:2em;}


nav a{font-size:0.9em;}


main{}

.contact h2{font-size:2em;}
.contact p:nth-of-type(1) a{font-size:2.4em;}
.contact p:nth-of-type(3) a{font-size:1.8em;}
}


@media screen and (min-width: 768px),print {
#wrap > header h1{font-size:0.6em;text-align:left;}
#wrap > header > p{float:left;text-align:left;}
#wrap > header div{float:right;padding:0;}
#wrap > header div p:nth-child(2) a span{line-height:1.2;}

nav{position:static;}
nav ul{border-bottom:solid 6px #0045A0;}
nav li{flex:1;}
nav a{margin:0 0.1em;padding:1em 0;font-size:1em;border-radius:5px 5px 0 0 ;}

aside ul{display:flex;justify-content:space-between;}
aside li{width:32%;display:flex;}
aside li:not(:last-child){margin-bottom:0;}
}


@media screen and (min-width: 1000px),print {
}