/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
input, button, select, textarea {
    -webkit-appearance: none;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
html{
	/*height: 100%;*/
	margin: 0px;
	padding: 0px;
}
body {

  font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo, 
		"メイリオ",
		"MS P Gothic", 
		"ＭＳ Ｐゴシック", 
		sans-serif;
    font-size: 13px;
  	line-height: 1.7em;
  	background: #EDEEF0;
  	color: #262228;
	/*height: 100%;*/
	margin: 0px;
	padding: 0px;
}

a {
  color:#262228;
  text-decoration: none;
  transition:0.2s;
}
a:hover { 
  color:#0375b4;
  text-decoration: none;
}
a:active {
  color:#0375b4;
  text-decoration: none;
}
a:visited {
  color:#262228;
  text-decoration: none;
}
a:focus{
  color:#0375b4;
  text-decoration: none;	
}


h1, h2, h3, p, ul, ol, pre, dl {
  margin-bottom: 0;
}

h1, h2, h3 { font-weight: bold; }

h2 {
   line-height: 1.1em;
   margin-bottom: 0.5em;
   position: relative;
   color: #444;
}

h2::after {
   	content: attr(data-text);
   	position: absolute;
   	left: 0;
   	color: white;
    -webkit-mask-image: -webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,1)),color-stop(50%, rgba(0,0,0,0.1)),to(rgba(0,0,0,0)));
}



ul, ol {
  margin: 0;
  padding:0;
  list-style-type:none;

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


a img { border: none; }
em { font-style: italic; }
strong { font-weight: bold; }


/*ナビ*/
header{
	width: 100%;
    background-color: rgba(255, 255, 255, 0.84);
    box-shadow: 0px -4px 8px 2px rgb(91, 91, 91);
    -webkit-box-shadow: 0px -4px 8px 2px rgb(91, 91, 91);
    -moz-box-shadow: 0px -4px 8px 2px rgb(91, 91, 91);
}
header{
	    background-color: rgba(255, 255, 255, 0.84);
    box-shadow: 0px -4px 8px 2px rgb(91, 91, 91);
    -webkit-box-shadow: 0px -4px 8px 2px rgb(91, 91, 91);
    -moz-box-shadow: 0px -4px 8px 2px rgb(91, 91, 91);
	 margin-bottom:20px;
}
nav {
	position:relative;
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
}
nav ul {
	display: flex;
	flex-flow: row;
	justify-content: space-around;
	margin: 0 0 0 15%;
	padding: 15px;
	list-style-type: none;
  text-transform: uppercase;
}
nav li{
	font-family:'Noto Sans Japanese', sans-serif;
	font-weight:600;
	font-size:1.4em;
	letter-spacing:0.2em;
}


ul * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
nav ul li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 1em;
  padding: 0;
}
nav ul a {

  display: block;

  position: relative;
  text-decoration: none;
}

nav ul a:before,
nav ul a:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}
nav ul a:before {
  left: -15px;
  top: -5px;
  border-left: 3px solid #ffce00;
  border-top: 3px solid #ffce00;
  -webkit-transform: translate(100%, 50%);
  transform: translate(100%, 50%);
}
nav ul a:after {
  right: -15px;
    bottom: -5px;
  border-right: 3px solid #ffce00;
  border-bottom: 3px solid #ffce00;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}
nav ul a:hover,
nav ul a:hover:before,
nav ul,
nav ul a:hover:after{
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
}


nav h1 img {
    position: absolute;
    top: 0;
    left: 2%;
    bottom: 0;
    margin: auto;
    height: 40px;
}
/*pagecover*/
#pagecover {
   position: relative;
   min-height: 100%;
}
/*footer*/
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background-color: #004f7b;
    color: #FFFFFF;
}

footer p{
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
	 text-align:center;
}
/*ヘッダーメディアクエリ*/
@media (max-width: 768px){
nav ul {
	margin:0 0 0 10%;
	padding: 15px 5px;

}
nav li{
	font-family:'Noto Sans Japanese', sans-serif;
	font-weight:600;
	font-size:1.2em;
	letter-spacing:0.1em;
}

}
@media (max-width: 600px){
	nav li{
		font-family:'Noto Sans Japanese', sans-serif;
		font-weight:600;
		font-size:100%;
		letter-spacing:0.2em;
	}
	}
@media (max-width: 480px){
header{
    box-shadow: 0px -4px 10px 0px rgb(91, 91, 91);
    -webkit-box-shadow: 0px -4px 10px 0px rgb(91, 91, 91);
    -moz-box-shadow: 0px -4px 10px 0px rgb(91, 91, 91);
}
.slideImg {
    width: 95%;
    height: auto;
    margin: 1% auto;
    float: none;
}
#heddingtxt {
    float: none;
    width: 80%;
    margin: 1% 3% 0% 2%;
}
nav ul {
	margin: 0 0 0 15%;
	padding: 10px 5px;

}
nav li{
	font-family:'Noto Sans Japanese', sans-serif;
	font-weight:600;
	font-size:100%;
	letter-spacing:0em;
}
nav ul a:before {
  left: -5px;
  top: 0px;
  border-left: 1px solid #ffce00;
  border-top: 1px solid #ffce00;
  -webkit-transform: translate(100%, 50%);
  transform: translate(100%, 50%);
}
nav ul a:after {
  right: -5px;
    bottom: 0px;
  border-right: 1px solid #ffce00;
  border-bottom: 1px solid #ffce00;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}


}
@media (max-width: 320px){
	nav h1{
		display:none;	
	}
nav ul {
    margin: 0;
    padding: 10px 1%;
}
}