@charset "utf-8";

/*--12px/36px 960/12grid(1col 8.3333%)--*/

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

html {
font-size: 75%;/*12px*/
line-height: 2;/*18px*/
color: #4D4D4D;
background:white;
font-weight: normal;
font-family: Lato,"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body, ul, ol,tr,th,td,footer{
margin: 0;
padding: 0;
}

main {
position:relative;
display: block;
}

li {
list-style-position: inside;
}

.list{
list-style: none;
}

section {
padding-bottom: 1.5em;
}

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

/* -- font -- */

h1 {
font-size: 200%;/*32px*/
line-height: 1.5;/*48px*/
}

h2 {
font-size: 150%;/*24px*/
line-height: 1.5;/*36px*/
}

h3 {
font-size: 125%;/*20px*/
line-height: 1.8;/*36px*/
}

h4 {
font-size: 112.5%;/*18px*/
line-height: 1.3333;/*24px*/
}

.text-r {
text-align: right;
}

.small {
font-size: 75%;
}

.pad_r {
padding-right: .5em;
}

.pad_l {
padding-left: .5em;
}

a {
text-decoration: none;
}

.title {
text-align: center;
padding:.75em;
font-weight: 700;
}

.title img{
width: 25%;
}

.title p{
font-weight:normal;
}

.title br {
display: none;
}

/*--line waku back--*/

a, a:hover,.blue{
color: #083387;
}

.b_blue,.b_blue a,.b_green{
color:white;
}
.b_blue{
background: #234D91;	

}
.b_gray{
background: #ECECEC;
}

.b_green{
	background: #6bb679;
}
/*--icon--*/

.i_free, .i_mail {
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
width: 1em;
height: 1em;
}

.i_free{
background-image:url(images/ico/i_free.svg);
}

.i_mail {
background-image:url(images/ico/i_mail.svg);
}

/* --selection---*/

::selection {
background: #e7e7e7;
}
::-moz-selection {
background: #e7e7e7;
}

/*--contents--*/

.contents {
width: 91.6666%;
margin:0 auto;
padding:1.5em 0;
}

/*--header--*/

header {
z-index: 9998;
border-bottom:1px solid #e7e7e7;
position: relative;
box-sizing: border-box;
background:white;
}

.fixed {
position: fixed;
top: 0;
background:white;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}

/*--top--*/

#top{
background:url(images/top01@2x.jpg) no-repeat right top #eee;
background-size:cover;
padding:3em 0;
}

#top h1{
font-size:300%;
}

#top article{
display:block;
width: 83.3333%;
text-align:center;
margin:0 auto;
padding: .75em 4.1666% 1.5em 4.1666%;
background-color: rgba(255,255,255,0.75);
}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

#menu_btn span {
display: block;
}

/* ----- drawermenu ----- */

#drawer_menu {
width: 66.6666%;
right: -66.6666%;
background: #666;
font-size: 125%;/*20px*/
line-height: 3;/*60px*/
top: 0;
z-index: 9998;
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
#drawer_menu li a, #drawer_menu li a:hover, #drawer_menu .close:hover {
color: white;
}
#drawer_menu li {
list-style: none;
}
#drawer_menu li a, #drawer_menu .close {
padding: 0 8.3333%;
}
#drawer_menu li a, #drawer_menu .close {
display: block;
}
#drawer_menu li a:hover {
background: #999;
}
#drawer_menu.block {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
#drawer.block:not(:target) {
right: 0\9;
}
#drawer_menu .close {
position: relative;
background: white;
}
#drawer_menu .close:hover {
cursor: pointer;
background: #888;
}
#drawer_menu .close:after {
content: "";
position: absolute;
top: 0;
right: 0;
}
#drawer_menu_overlay {
z-index: -1;
transition: 0.3s;
background: rgba(0, 0, 0, 0.3);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
#drawer_menu_overlay.block {
z-index: 5;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
header, #drawer_menu .close:after, #drawer_menu_overlay, #drawer_menu_overlay_android {
width: 100%;
}
#drawer_menu, #drawer_menu .close:after, #drawer_menu_overlay, #drawer_menu_overlay_android {
height: 100%;
}
#drawer_menu, #drawer_menu_overlay, #drawer_menu_overlay_android {
position: fixed;
}
#drawer_menu_overlay, #drawer_menu_overlay_android {
right: 0;
top: 0;
}
#drawer_menu_overlay_android {
display: none;
background: rgba(0, 0, 0, 0.5);
}

#logo {
left: 4.1666%;
top:12.5%;
position: absolute;
}

#menu_sp_mail {
background: #083387;
}

/* ----- menubtn ----- */

.bar {
width: 50%;
height: 2%;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
background: white;
}
#menu_btn:hover, .bar.top, .bar.middle, .bar.bottom {
opacity: 1;
}
.bar.top {
top: 15%;
}
.bar.middle {
top: 30%;
}
.bar.bottom {
top: 45%;
}
.bar, #menu_btn, #menu_mail {
position: relative;
}

#menu_btn {
cursor: pointer;
}

#menu_btn, #menu_mail {
float: right;
font-size: 56.25%;/*9px*/
background: #083387;
width: 16.6666%;
}

#menu_btn, #menu_mail,
#menu_mail a{
height: 6.75em;
}

#menu_mail a{
width: 100%;
display:block;
}

#menu_btn p, #menu_mail img, #menu_mail p {
position: absolute;
text-align: center;
}

#menu_mail img {
left: 0;
right: 0;
bottom: 0;
top: -30%;
margin: auto;
}

#menu_btn p, #menu_mail p {
bottom: -7.5%;
}
#menu_mail p {
width: 100%;
}
.bar, #menu_btn p {
left: 25%;
right: 25%;
}

#menu_btn,#menu_btn:hover,
#menu_mail a{
color: white;
}

#menu_btn:hover a, #menu_mail:hover a{
background: #888;
}

#menu_mail {
display:none;
}

/*--submenu&col--*/

.col2>li,.col3>li,.col4>li{
list-style:none;
margin:1.5em 0;
}

.col2 li img{
width:100%;
}

.col3>li,.col4>li{
float:left;
width:41.6666%;
margin:0 4.1666%;
}


/*--footer--*/

footer {
text-align: center;
font-size:75%;
}

footer,#footnav{
text-align: center;
}

#footnav li{
list-style:none;
}

/* --mail---*/

table{
width: 100%;
border: 1px #333 solid;
border-collapse: collapse;
word-break: break-all;
box-sizing:border-box;
background:white;
}

th,td {
display: block;
color:#666;
}

th{
padding: 1em 4.1666%;
text-align: center;
border: 1px #333 solid;
background-color: #ECECEC;
}

td{
padding: 1.5em 4.1666%;
border:1px #333 solid;
}

table br{
display:none;
}

table th strong {
margin-left: .5em;
padding: .25em 1em;
background: white;
color: #4D4D4D;
}

/* --mail---*/

input[type=date], option, 
input[type=text], input[type=email], input[type=tel],input[type=name],textarea,select {
font-size: 125%;/*20px*/
line-height: 2.1;/*42px*/
padding:.75em 4.1666%;
}
input[type=date], input[type=text], option, 
input[type=email], input[type=name], input[type=tel],textarea,select {
display: inline-block;
width: 91.6666%;
}

button,input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
border: 0;
font-size:150%;
padding:.25em .75em;
background: #083387;
color: white;
}

button:hover, input[type="reset"]:hover, input[type="submit"]:hover {
background:#002e73;
}

/*--clear--*/

header:after, #header_pc:after,#footnav:after,
#drawer_menu li:after,#drawer_menu:after,
.col2:after,.col3:after,.col4:after{
display: block;
clear: both;
content: ''
}

@media screen and (min-width:480px) {
.col2>li{
padding:1.5em 0;
}
}
@media screen and (min-width:568px) {
html {
font-size: 87.5%;/*14px*/
line-height: 2.5714;/*36px*/
}
#logo {
top:8.3333%;
}
.title img{
width: auto;
}
.title br {
display:inline-block;
}
}

 @media screen and (min-width:768px) {
html {
font-size: 100%;/*16px*/
line-height: 2.25;/*36px*/
}

#top{
padding:3em 8.3333%;
}
#top article{
display:block;
}
#top h1{
font-size: 400%;
}

.contents {
width: 83.3333%;
}

th,td{
display:table-cell;
}

table th{
width:30%;
}

table br{
display:inline-block;
}

table th strong{
margin-left:0;
}

section {
padding-bottom: 3em;
}

.title{
font-size:125%;
}

.col2>li,.col3>li{
float:left;
margin:0 4.1666%;
}

.col2>li,.col4>li{
overflow:hidden;
}

.col2>li{
width:41.6666%;
}

.col3>li{
width:25%;
}

footer li{
position:relative;
}

#footnav li{
margin:1.5em 0;
padding:0 .75em;
border-left:1px solid #ccc;
float:left;
}

#footnav li:last-child{
border-right:1px solid #ccc;
}
}

@media screen and (min-width:960px) {
html {
font-size: 112.5%;/*18px*/
line-height: 2;/*36px*/
letter-spacing:0.025em;
}

header, #header_pc{
position: relative;
}

#header_pc {
width: 91.6666%;
margin: 0 auto;
padding: 3em 0;
}

#logo {
width:16.6666%;
top: 27.5%;
left:0;
}

#logo img{
width:100%;
}

#drawer_menu {
background: transparent;
width: 50%;
position: absolute;
right: 16.6666%;
top: 12.5%;
bottom: 0;
}

#drawer_menu li {
font-size: 100%;
float: left;
width: 30%;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#drawer_menu li:first-child{
width: 40%;
}

#drawer_menu li a {
position: relative;
display: inline-block;
color: #4D4D4D;
}

#drawer_menu li a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
background-color:#083387;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#drawer_menu li a:hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}

#drawer_menu li a:hover {
background: #ECECEC;
}

#drawer_menu ul li a:hover {
background:none;
color: #083387;
}

#menu_mail{
top: 0;
position:absolute;
width: 8.3333%;
right: 0;
overflow: hidden;
display:block;
}

#menu_mail,#menu_mail a{
height: 100%;
}

#menu_mail img {
width:50%;
top: -25%;
}

#menu_mail p {
bottom:0;
font-size:112.5%;
font-weight:600;
}

#menu_btn,#menu_sp_mail, #drawer_menu .close {
display: none;
}

#top{
padding:3em 0 4.5em 12.5%;
}

#top article{
background:none;
text-align:left;
width: 47.5%;
margin:0;
}

.col4>li img{
height:4.5em;
}
}

@media screen and (min-width:1024px) {
#header_pc {
width: 91.6666%;
}

.contents {
width: 75%;
}

.col4>li{
width:20%;
margin:0 2.5%;
}
}

@media screen and (min-width:1600px) {
#header_pc, .contents {
width: 66.6666%;
}

section th,section td{
padding: 1.5em 3em;
}
}

@media screen and (min-width:2560px) {
#header_pc, .contents {
width: 50%;
}
}

@media print {
body {
color: black;
}
header, br, footer {
display: none;
}
}