@charset "UTF-8";
/*base.css */

/*Base setting_____________________________________*/
body {
	color:#666;
	font:14px/1.6 Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	overflow-x:hidden;
	/*古い構文（old Safari用）*/
	background:-webkit-linear-gradient(left top, #eeeeee 20%, #bbbbbb 60%, #888888 100%) fixed #eeeeee;
	/*新しい構文*/
	background:linear-gradient(to bottom right, #eeeeee 20%, #bbbbbb 60%, #888888 100%) fixed #eeeeee}

/*header footer*/
header, footer {
	width:100%;
	z-index:2;
	position:fixed;
	background: rgba(255,255,255,.7)}
footer {
	bottom:0;	
	text-align: center;
	font-size:85%;
	padding:10px 0 8px}
footer span {font-family:Century Gothic, sans-serif}
/*header menu_____________________________________*/
header {display:table;font-size:0;line-height:0}
header h1, nav {display:table-cell}
nav {text-align:right;vertical-align:bottom}
header h1 a img {height:40px;margin:10px}
header ul {font-size:13px;line-height:1;margin:0 10px 10px 0}
header ul li {margin-left:3px; display:inline-block}
header ul li::after {content:' |'}
header ul li:last-child::after {content:''}
header ul li a {color:inherit}

/*layout_____________________________________*/
/*wrap*/
#wrap {display:table; height:100%; height:100vh; width:100%}
#wrap section {display:table-cell; vertical-align:middle}
#wrap section p { width:90%; margin:auto}

/*Media-queries_____________________________________*/
@media screen and (max-width: 1000px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 a img {height:30px}
}
@media screen and (max-height: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 a img {height:30px}
}
/*smaller than 640-----------------------------*/
@media screen and (max-width: 640px) {
html {-webkit-text-size-adjust:100%}/*disable webkit text size adjust (for iPhone)*/
a img:hover {opacity:1}
header h1 a img {height:30px}
footer {font-size:80%; padding:5px}
}

.accordion-menu {
  width: 100%;
  max-width: 350px;
  margin: 60px auto 20px;
  background: #fff;
  border-radius: 4px;
}
.accordion-menu li.open .dropdownlink {
  color: #6caf4b;
  .fa-chevron-down {
    transform: rotate(180deg);
  }
}
.accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
}
.dropdownlink {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 45px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;
  i {
    position: absolute;
    top: 17px;
    left: 16px;
  }
  .fa-chevron-down {
    right: 12px;
    left: auto;
  }
}

.submenuItems {
  display: none;
  background: #d8e8e9;
  li {
    border-bottom: 1px solid #B6B6B6;
  }
}

.submenuItems a {
  display: block;
  color: #004080;
  padding: 12px 12px 12px 45px;
  transition: all 0.4s ease-out;
  &:hover {
    background-color: #CDDC39;
    color: #fff;
  }
}