/* 基本カラー（青）:#1E2160 */




body{
margin:0;
padding:0;
font-family: "Sawarabi Gothic";
color:#fff;
background-color:#DBD4C2;
}

a:link{color:#8fd9ff; text-decoration:underline; border:none;}
a:visited {color:#8fd9ff; text-decoration:underline; border:none;}
a:active, 
a:hover {color:#8fd9ff; text-decoration:underline; border:none;}




/* ================== header-eria ================== */

.header-eria{
width:100%;
background-color:rgba(30,33,96,0.9);
position:fixed;
top:0px;
z-index:1;
}

.header-eria img{
height:36px;
margin:0;
padding:12px;
display:block;
}

@media screen and (min-width: 0px) and (max-width: 750px)  {

}


/* ================== contents ================== */

.container{
margin:84px auto 0 auto;
padding:0;
max-width:1200px;
}

.contents{
text-align: justify;
text-justify: inter-ideograph; /* IE用 */
-webkit-font-feature-settings: "palt";
}

.col2{
width:48%;
display:inline-block;
vertical-align:top;
}

.wrap {
margin:20px;
padding:60px;
background-color:rgba(255,255,255,0.6);
color:#1E2160;
border-radius:1px;
}

.contents h2{
margin:0 0 40px 0;
padding:10px;
font-size:200%;
font-family:"Sawarabi Mincho";
font-weight:normal;
text-align:center;
border-top:1px #1E2160 solid;
border-bottom:1px #1E2160 solid;
display:block;
}

.pc{
display:block;
}

.mobi{
display:none;
}

.contents h3{
margin:0;
padding:0;
text-align:center;
}

p{
margin:20px 0 0 0;
padding:0;
}

.contents ul{
margin:5px 20px 25px 20px;
padding:0;
font-size:14px;
}

.contents li{
margin:0;
padding:0;
list-style:square;
text-align: none;
text-justify: none; /* IE用 */
}


.link a:link{color:#1E2160; text-decoration:none; border:none;}
.link a:visited {color:#1E2160; text-decoration:none; border:none;}
.link a:active, 
.link a:hover {color:#1E2160; text-decoration:none; border:none;}





@media screen and (min-width: 0px) and (max-width: 750px)  {

.container{
margin:84px 0 0 0;
padding:0;
max-width:100%;
}

.wrap {
margin:20px;
padding:20px;
background-color:rgba(255,255,255,0.6);
color:#1E2160;
border-radius:1px;
}

.contents h2{
margin:0 0 20px 0;
font-size:160%;
}

.col2{
width:100%;
display:block;
vertical-align:top;
}

.pc{
display:none;
}

.mobi{
display:block;
}



}



/* ================== #flow ================== */

.flowchart{
margin:20px 60px 0 60px;
padding:40px;
border:3px rgba(30,33,96,0.8) solid; 
display:block;
border-radius:1px;
background-color:#fff;
}

.flowchart-number{
margin:0 0 20px 0;
padding:5px 10px;
font-size:100%;
color:#fff;
display:block;
text-align:left;
background-color:rgba(30,33,96,0.8);
border-radius:1px;
}

.flowchart-arrow{
margin:10px 0 -10px 0;
padding:0;
font-size:200%;
display:block;
text-align:center;
color:rgba(30,33,96,0.8);
}

#flow .contents ul{
margin:10px 20px 0 0;
padding:0;
font-size:120%;
font-weight:bold;
}

#flow .contents li{
margin:0 30px 0 0;
padding:0;
list-style:none;
text-align: none;
text-justify: none; /* IE用 */
display:inline-block;
}

#flow .contents h2{
font-size:200%;
}

#flow .contents h3{
font-size:160%;
margin:0;
padding:0;
text-align:left;
}

@media screen and (min-width: 0px) and (max-width: 750px)  {

.flowchart{
margin:20px 0 0 0;
padding:20px;
border:2px rgba(30,33,96,0.8) solid; 
display:block;
border-radius:1px;
background-color:#fff;
}

.flowchart-number{
margin:0 0 20px 0;
padding:5px 10px;
font-size:80%;
color:#fff;
display:block;
text-align:left;
background-color:rgba(30,33,96,0.8);
border-radius:1px;
}

.flowchart-arrow{
margin:5px 0 -15px 0;
padding:0;
font-size:100%;
display:block;
text-align:center;
}

#flow .contents ul{
margin:10px 20px 0 0;
padding:0;
font-size:100%;
font-weight:bold;
}

#flow .contents li{
margin:0;
padding:0;
list-style:none;
text-align: none;
text-justify: none; /* IE用 */
}

#flow .contents h2{
font-size:140%;
}

#flow .contents h3{
margin:0;
padding:0;
font-size:120%;
text-align:left;
}

}

/* ================== footer ================== */

#footer{
margin:40px 0 0 0;
padding:0;
}

#footer{
background-color:#1E2160;
}

#footer .contents{
width:100%
margin:0;
padding:20px 40px;
}

#footer .contents h2{
margin:0;
padding:0;
font-size:18px;
font-weight:normal;
text-align:right;
font-family: "Sawarabi Gothic";
}

#footer ul{
margin:0;
padding:0;
list-style:none;
text-align:right;
}

#footer li{
margin:0.2em 0 0 0;
padding:0;
display:block;
text-align:right;
}

@media screen and (min-width: 0px) and (max-width: 750px)  {

#footer .contents{
padding:20px 20px 20px 20px;
}

#footer .contents h2{
margin:0;
padding:0;
font-size:14px;
}

#footer li{
margin:0;
font-size:85%;
}

}






/* ================== mailform ================== */

#formWrap {
width:100%;
margin:0 auto;
}

#formWrap p{
margin:0 0 20px 0;
padding:0;
}

.contents h2{
margin:0 0 40px 0;
padding:10px;
font-size:200%;
font-family:"Sawarabi Mincho";
font-weight:normal;
text-align:center;
border-top:1px #1E2160 solid;
border-bottom:1px #1E2160 solid;
display:block;
}

table.formTable{
width:100%;
margin:0 auto 30px auto;
border-collapse:collapse;
}

table.formTable td,table.formTable th{
border:1px solid #ccc;
padding:20px;
}

table.formTable th{
width:30%;
font-weight:normal;
background:#efefef;
text-align:left;
}

table.formTable span{
margin:0 0 0 10px;
padding:0;
color:red;
font-size:80%;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (min-width: 0px) and (max-width: 750px)  {

#formWrap {
width:95%;
margin:0 auto;
}

table.formTable th, table.formTable td {
width:auto;
display:block;
}

table.formTable th {
margin-top:5px;
border-bottom:0;
padding:10px;
}

form input[type="text"], form textarea {
width:90%;
padding:5px;
font-size:110%;
display:block;
}

form input[type="submit"], form input[type="reset"], form input[type="button"] {
display:block;
width:100%;
height:40px;
}

}