@charset "UTF-8";


/* ====================================================================
初期化
==================================================================== */
body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,th,td,embed,object {
	margin: 0;
	padding: 0;
}

table {border-spacing:0;}
* html table {border-collapse:collapse;}
*:first-child+html table {border-collapse:collapse;}
caption,th {text-align:left; font-weight:normal;}
table,th,td,img {border:0;}
img,input {vertical-align:middle;}
q:before,q:after {content:'';}
ul {list-style: none;}
a img{
    border:none;
}

*{
    margin:0;
    padding:0;
}
div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

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

ul,ol,li { list-style:none;}
img {vertical-align : middle;}

/* ==================================================================== */

body{
	font-family: "Noto Sans JP", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
	color: #333333;
	font-size:18px;
	line-height: 1.6em;
	text-align: justify;
	word-break: break-all;
}

p {
	margin-bottom:1.6em;
}

/* ヘッダーとナビゲーションバー */
header {
  position: relative;
}

.nav-global {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: rgba(15,136,218,0.0);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
	width: 230px;
	transition: all 0.5s ease-in-out;
}

/* PC画面でのメニュー */
.flexbox {
  list-style: none;
  display: flex;
}

.flexbox li {
  margin-left: 20px;
  font-size:16px;
}

.flexbox li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
}

/* ハンバーガーメニューアイコンのスタイル（PC画面では非表示） */
.menu-icon {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.menu-icon .bar {
  width: 25px;
  height: 3px;
  background-color: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ハンバーガーアイコンがクロスに変化するスタイル */
.menu-icon.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(6px, 5px);
}

.menu-icon.active .bar:nth-child(2) {
  opacity: 0;
}

.menu-icon.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}

/* Foot */
#page_top{
	width: 60px;
	height: 60px;
	position: fixed;
	right: 0;
	bottom:0;
	background: #0f88da;
	z-index:2;
}
#page_top:hover{
	background-color: #62BFFD;
}
#page_top a{
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	text-decoration: none;
	line-height: 1em;
}
#page_top a::before{
  font-family: 'Font Awesome 6 Free';
  font-weight: bold;
  content: '\f106';
  font-size: 42px;
  color: #fff;
  line-height: 1em;
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/* スクロール後 */
.fixed .nav-global {
	background-image: linear-gradient(90deg, rgba(26,199,219, 1), rgba(15,136,218, 1));
}
.fixed .logo {
	width: 120px;
}


@media (min-width: 769px) {
.link-current {
	border-bottom: 2px solid #fff;
}

}

@media screen and (max-width:1199px) {

}
@media screen and (max-width:1000px) {
body {
	font-size: 90%;
}
  .flexbox li {
  font-size:12px;
}

}

@media screen and (max-width: 768px) {
  .menu-icon {
    display: flex;
	z-index:100;
  }

  .flexbox {
	position: fixed;
	top: 0px;
	right: -300px; /* 画面外に非表示 */
	width: 300px;
	height: 100%;
	background-color: #333;
	flex-direction: column;
	justify-content: top;
	transition: right 0.3s ease;
	overflow: scroll;
	padding-top: 50px;
  }

  .flexbox.active {
    display: flex;
    right: 0; /* 右端からスライドイン */
  }

  .flexbox li {
	margin: 0px 0px 10px;
	text-align: left;
  }
  .flexbox li {
  font-size:14px;
}
  .flexbox li a {
	display: block;
	background-color: #F00;
	padding: 10px;
  }
  .logo {
	width: 130px;
	}
  .fixed .logo {
	width: 80px;
  }

}

/* オーバーレイのスタイル */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}





@media screen and (max-width:767px) {

#page_top{
	width: 40px;
	height: 40px;
}
#page_top a{
  width: 40px;
  height: 40px;
}
#page_top a::before{
  font-size: 32px;
  top: 5px;
}

}

@media screen and (max-width:480px) {

	
}