@charset "shift-JIS";
body {
background:url(../images/bg.png)no-repeat;
background-size: contain;
text-align:center;
font:normal 12px/14px Meiryo, san-serif;
}

img {
max-width: 100%;
height: auto;
}

.fltL {
float:left;
}

.fltR {
float:right;
}

/* ======== clearfix ======== */

.cf:after {
content: "";
clear: both;
display: block;
}

/* ======== wrapper ======== */
body{

}

header, main, footer, article {
clear: both;
width: 100%;
max-width: 960px;
background-size:contain; 
margin:0 auto;
}
article#map, footer{
background: #fff;
border-radius: 10px;
}
a.eng
{
display: block;
background:#fff100;
color:#1f429a;
padding:0.5em 0;
font-size:1.5em;
line-height: 100%;
border-radius:1em;
font-weight:bold;
}
@media screen and (max-width:680px) {
article{
background: #fff;
width: 98%;
}
.box{
width: 100%;
margin:10px auto;
}	
a.eng
{
margin:1em 0;
width:100%;
}
}
@media screen and (min-width:681px) {
.box{
float: left;
margin:10px;
width: calc(50% - 20px);
}	
a.eng
{
float:right;
width:6em;
}
}

h1 {
margin:0 ;
padding:0;
color: #fff100;
text-align:center;
font-size:2.1em;
line-height:1.4em;
font-weight: bold;
text-shadow: 1px 1px 1px #123;
}
#introduction, #information{
margin:1em auto;
padding:0.5em 1em;
border:solid 1px #fff100;
}
#introduction {
background:#fff100;
line-height: 120%;
color: #111;
}
@media screen and (min-width:681px) {
article#main{display:flex;}
#introduction, #information{
float:left;
width:calc(50% - 2em - 2px);
}
}
@media screen and (max-width:680px) {
#introduction, #information{
width:calc(100% - 2em - 2px);
}
}

#introduction p, #information p{
font-size:1.4em;
font-weight:bold;
}
#information p{
color:#ae0972;
}
header p strong{
font-size: 24px;
line-height:120%;
}

#information h2
{
margin:0.2em 0;
background:#ae0972;
color:#fff;
}
#information p{
margin: 0 0 0.5em;
padding:0.3em;
}

h2 {
margin:1em 0;
padding:0.5em;
background-color: #00a0e9;
color: #fff;
font-size:1.6em;
font-weight: bold;
line-height:140%;
}
.box h2, article#map h2, article#access h2, article#program h2, h2#form
{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 0;
}
.box p
{
margin-top:0;
border-left:solid 1px #1f429a;
border-right:solid 1px #1f429a;
border-bottom:solid 1px #1f429a;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
h3 {
background: linear-gradient(45deg,#fff100,#fff,#fff);
padding:0.5em 0.5em 0.4em;
border-bottom:solid 1px #fff100;
color: #1f429a;
font-size:1.4em;
font-weight: bold;
line-height:1.2em;
text-align: left;
}
h4{
margin:0 1em 0 0;
padding:0.5em 1em 0.4em;
font-size:1.2em;
font-weight: bold;
line-height:1.2em;
text-align: left;
/* background: #1f429a;*/
color:#00a0e9;
}
article#program .box h4 {
margin:0;
}
h5{
clear:left;
padding:0.3em 1em 0.2em;
font-size:1.2em;
font-weight: bold;
line-height:1.2em;
text-align: left;
background: #00a0e9;
color: #fff;
}
article p{
margin:0 0 1em;
padding: 1em;
color: #123;
font-size:1.2em;
line-height:1.4em;
text-align: left;
text-shadow: 0px 0px 0px #fff;
}
article#information p strong{
font-size: 1.2em;
line-height: 120%;
}
article .box p{
background: #fff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
article#map, article#program, footer
{
border-left:solid 1px #1f429a;
border-right:solid 1px #1f429a;
border-bottom:solid 1px #1f429a;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
article#map p{
display: block;
float: left;
width: calc(50% - 2em);
min-width: 230px;
background: none;
}
#map iframe{
display: block;
float: left;
padding:10px;
width: calc(100% - 20px);
min-width: 230px;
height: 18em;
border-bottom-right-radius: 10px;
}
article#access{
background: #fff;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
article#access .box {
margin-top:0;
}
article#access .box a {
color:#fff;
padding: 0.3em 0.3em 0.1em;
line-height: 100%;
border-radius: 3px;
display: inline-block;
margin: 0.3em;
}
article#access .box a.map {
background: #c43;
}
article#access .box a.tel {
background: #493;
}
article#access .box a.map:after {
content: "MAP";
padding: 0.1em 0.3em 0.05em;
margin: 0 0.3em 0 1em;
font-size: 0.5em;
border: solid 1px #fff;
border-radius: 3px;
position: relative;
top: -0.3em;
}
article#access .box a.tel:after {
content: "TEL";
padding: 0.1em 0.3em 0.05em;
margin: 0 0.3em 0 1em;
font-size: 0.5em;
border: solid 1px #fff;
border-radius: 3px;
position: relative;
top: -0.3em;
}
ul{
width:100%;
height: 3em;
font-size: 1.6em;
background:#1f429a;
}
li{
width: calc(33.3% - 1px);
float: left;
padding: 0;
height: 3em;
text-align: center;
border-right:solid 1px #fff;
}
li:last-of-type{
border-right:none;
}
li a:link, li a:visited, li a:hover{
color: #fff100;
font-weight:bold;
display: block;
width: 100%;
height: 1em;
padding: 1.2em 0 0.8em;
}
dl {
margin:1em 0;
}
dt {
background: #0071bb;
margin:0;
padding: 0.5em 2%;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
color: #fff100;
font-size: 1.2em;
font-weight: bold;
}
dd {
background: #fff;
color: #123;
margin:0 0 0.5em 0;
padding: 0.5em 2%;
border: solid 1px #0071bb;
border-bottom-left-radius: 0.3em;
border-bottom-right-radius: 0.3em;
font-size: 1.2em;
}
#program h3{
margin:0.5em 0;
clear: both;
}
#program h4{
font-size:1.4em;
}
article#program p {
display:block;
float:left;
width:calc(75% - 2em);
}
#program h5.fltL, #program h6.fltL
{
clear:left;
display:block;
width: 25%;
max-width: 80px;
height: auto;
margin:0.5em 1em;
background:none;
}
#frm h3{
margin:0.5em 0 0.5em -2%;
}
#frm main{
border-radius: 10px;
}
img.fltL {
width: 25%;
height: auto;
margin:0 1em 5em 0;
}
dd strong {
display: block;
margin:0.3em 0;
color: #136;
font-size: 1.2em;
line-height: 1.2em;
}
dd p{
background:none;
margin:0.2em 0;
padding: 0;
font-size: 1em;
line-height: 1.2em;
}
address{
width: 86%;
min-width: 472px;
padding: 1em;
margin:1em auto;
border-radius: 10px;
font-size: 14px;
line-height: 140%;
border:solid 1px #1f429a;
}
address img{
height:14px;
width: auto;
padding: 0 0 5px 0;
}
footer p{
margin:0 0.5em;
padding:0 0.5em 1em;
text-align: left;
line-height: 120%;
}
@media screen and (max-width: 480px) {
dd p{
clear: both;
}
img.fltL {
margin:0 1em 3.5em 0;
}
/*input{
width: 100%;
}*/
article#map p{
width: calc(100% - 2em);
min-width: 230px;
background: none;
}
#map iframe{
float: none;
width: 100%;
min-width: 230px;
height: 12em;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
.link {
clear:both;
display: block;
/*float: left; */
padding:0.5em;
background-color: #ae0972;
border-radius: 0.3em;
box-shadow: 1px 1px 1px #513;
font-size: 2.3em;
line-height: 100%;
font-weight: bold;
text-align:center;
vertical-align:middle;
}
@media screen and (max-width: 480px) {
.link {
width: calc(98% - 1em);
max-width:440px;
margin:1em auto;
}
}
@media screen and (min-width: 481px) {
.link {
width: calc(48% - 1em);
margin:1em auto;
}
}
a.link:link {
color:#fff;
text-decoration:none;
}
a.link:hover {
color:#fff;
text-decoration:underline;
opacity: 0.8;
}
a.link:visited {
color:#fff;
text-decoration:none;
}
#frm{
border:solid 1px #1f429a;
border-radius: 0.3em;
box-shadow: 0px 0px 3px #fff;
text-align: left;
}
#frm main{
max-width: 680px;
background:#fff;
}
#frm h2:first-of-type{
margin-top:0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#frm h3 {
margin:0;
}
#frm h4 {
margin:0.5em;
}
#frm p {
margin:0.5em 1em;
padding: 0;
text-align:left;
}
#frm p.atn {
border:dotted 1px #a3a4cc;
padding:0.5em;
margin:0 1em;
}
#frm p.btn{
margin:0.5em auto 0;
text-align: center;
}
table {
width: 100%;
margin:1em 0;
}
th {
background: #0071bb;
margin:0;
padding: 0.5em;
color: #fff100;
font-size: 1.2em;
font-weight: bold;
border: solid 1px #0071bb;
width: 9em;
}
td {
background: #fff;
color: #123;
margin:0 0 0.5em 0;
padding: 0.5em 2%;
border: solid 1px #0071bb;
font-size: 1.2em;
}
.red {
color:red;
font-size:0.9em;
line-height: 1.5em;
}