@charset "utf-8";
/* CSS Document */

/*font*/
@import url("./font.css");

/*chrome*/
*:focus {
outline: none;
}

/*Firefox*/
@-moz-document url-prefix() { 
  body{ font-family: 'YakuHanJP','Noto Sans JP','Roboto',"游ゴシック", 'YuGothic', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",'Meiryo', sans-serif; }
 }

@media screen and (-webkit-min-device-pixel-ratio:0) {
 body{ font-family: 'YakuHanJP','Noto Sans JP','Roboto',"游ゴシック", 'YuGothic', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",'Meiryo', sans-serif;  }
}

 body{ font-family: 'YakuHanJP','Noto Sans JP','Roboto',"游ゴシック", 'YuGothic', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",'Meiryo', sans-serif;
}

/*==============================================================================*/
/*header */
/*==============================================================================*/

/*logo*/
 #main{ background:url("../img/headerImg.png")  repeat-x center center; 
  background-size: cover;
  position: relative;
}

#main:after/*,#main h1,
#main:before*/{ position: absolute; content:""; }

#main:after{ background: #739ca8; height:1px ; width: 100%; bottom:5px; }

#main h1{ mix-blend-mode: normal; 
  color:#fff;
  margin: 0 auto;
 }

#main span{ font-size: 0.8em; }

/*==============================================================================*/
/*hover */
/*==============================================================================*/
#modalList li a,#link a{	
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;}


/* > */
/*font awesome共通設定*/
#btnPagetop a::before{
  font-family: "Font Awesome 5 Free";font-weight: 900;font-size: 0.7em; }

/*==============================================================================*/
/*content */
/*==============================================================================*/

.redTxt{ color: #e60064; }

.txtUnd{ margin-bottom: 25px; }

/**/
.innerBox{ margin-bottom:80px; }

/*==============================================================================*/
/* footer
============================================================================== */
#linkWrap{ border-top: 1px solid #ccc;}
#link, #link ul{ display: flex; align-items: center;}
#link{ justify-content: space-between; }
#link a{ display: block; padding: 0 2%; }
#link a:hover{ opacity: 0.8; }

#link p a{ width: 50%; }
#link a img{ width: 100%; }
#link li{  margin: 0 10px; }

#link li a{  text-align: right; }

/*pagetop btn*/
#btnPagetop{position: fixed;bottom: 40px;right: 12px;font-size: 21px;}
#btnPagetop a { 
transition: .4s;
position: relative;
display: block;
background: url("../img/pagetop_icon.png") no-repeat center center #313131;
    background-color: rgb(49, 49, 49, 0.8);
    background-size: auto;
color: #fff;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;


}
#btnPagetop a:hover{ background-color: rgb(34,34,34, 0.8); }

#btnPagetop a span {display: none;}
/* arrow */
#btnPagetop a::before { display: block; content: "\f077";}

footer{ background:#00506e; color:#fff; text-align: center; }



@media screen and (min-width: 1051px){
 body{ min-width:1050px;}
  #main{ margin-bottom: 50px;}
	#main h1{ padding: 20px 0;  width: 1000px; font-size:1.875em ; line-height: 1.2em; }
  #wrapper, #link{ width:1000px; }
  #wrapper{  margin:0 auto 80px; }
  .redTxt{ margin-bottom: 15px; font-size: 1em ; }
  .txtUnd{ margin-bottom:30px }

  footer{  padding:25px 0;}
  #link{  margin:0 auto 30px;  }
  #linkWrap{ padding-top: 30px; }
  #link li{ width:60px }
  #btnPagetop a { background-size: auto 64%;  width: 64px;  height: 64px;}
  .sp{ display: none; }
}


@media screen and (max-width: 1050px){
  body{ min-width:100%;}
  #main{ margin-bottom: 30px;}
	#main h1{ padding: 3% 0;  width: 92%;  font-size:calc(1.8rem + (1vw - 0.4rem) * 1.9); line-height: 1.2em;  }
  #wrapper{  margin:0 auto 5%; }
  .redTxt{ margin-bottom: 20px; font-size: 1.1em ; }
  .txtUnd{ margin-bottom:20px }

  footer{ padding:3% 0;}
  #linkWrap{ padding: 5% 0; }
  #link li { width:50px }
  #btnPagetop a  { background-size: auto 54%;  width: 48px;  height: 48px;}

  #link{ width: 90%; margin: 0 auto; }

}