@charset "utf-8";
html, body {
    width: 100%;
    height: 100vh;
    margin: 0 auto;}
/*---------------------------------------------
	Hedmenu01
  ---------------------------------------------*/
/* ハンバーガー（アコーディオン）メニュー */
.inner {
  width: 100%;
  margin: 0 auto;
}
.inner:after {
  content: "";
  clear: both;
  display: block;
}
/* header */
#top-head {
  top: -100px;
  position: absolute;
  width: 100%;
  margin: 100px auto 0;
  padding: 30px 0 0;
  line-height: 1;
  z-index: 999;
}
#top-head a, #top-head {
  color: #fff;
  text-decoration: none;
}
#top-head .inner {
  position: relative;
}
#top-head .logo {
  float: left;
  width: 260px;
  font-size: 36px;
  margin-top: 10px;
  margin-left: 10px;
}
#global-nav ul {
  list-style: none;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 18px;
  font-weight: none;
}
#global-nav ul li {
  float: left;
}
#global-nav ul li a {
  padding: 0 25px;
}
/* Fixed */
#top-head.fixed {
  margin-top: 0;
  top: 0;
  position: fixed;
  padding-top: 10px;
  height: 55px;
  background: #fff;
  background: rgba(255, 255, 255, .7);
  transition: top 0.65s ease-in;
  -webkit-transition: top 0.65s ease-in;
  -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
  font-size: 24px;
  color: #333;
}
#top-head.fixed #global-nav ul li a {
  color: #333;
  padding: 0 20px;
}
/* Toggle Button */
#nav-toggle {
  display: none;
  position: absolute;
  right: 18px;
  top: 32px;
  width: 34px;
  height: 36px;
  cursor: pointer;
  z-index: 101;
}
#nav-toggle div {
  position: relative;
}
#nav-toggle span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #666;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 11px;
}
#nav-toggle span:nth-child(3) {
  top: 22px;
}
@media screen and (max-width: 970px) {
  #top-head, .inner {
    width: 100%;
    padding: 0;
  }
  #top-head {
    top: 0;
    position: fixed;
    margin-top: 0;
  }
  /* Fixed reset */
  #top-head.fixed {
    padding-top: 0;
    background: transparent;
  }
  #mobile-head {
    background: rgba(255, 255, 255, 0.7); /* 背景 */
    width: 100%;
    height: 86px;
    z-index: 999;
    position: relative;
  }
  #global-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -470px;
    background: #d9ecf8;
    width: 100%;
    padding: 8px 0 12px 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
  }
  #global-nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 17px;
margin-left:-20px;
	}
  #global-nav ul li {
    float: none;
    position: static;
  }
  #top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a {
    width: 100%;
    display: block;
    color: #fff;
    padding: 16px 0;
border-bottom: inset 1px #fff;
  }
  #nav-toggle {
    display: block;
  }
  #toggle {
    display: block;
  }
  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /* #nav-toggle 切り替えアニメーション */
  .open #toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .open #toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open #global-nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(556px);
    -webkit-transform: translateY(556px);
    transform: translateY(556px);
  }
}
/*---------------------------------------------
	LINK
  ---------------------------------------------*/
a:link {color:#292729; text-decoration: none;} /*未訪問のリンクの色*/
a:visited {color:#292729; text-decoration: none;} /*訪問済みのリンクの色*/
a:hover {color:#999999; text-decoration: none;} /*カーソルが乗っているリンクの色*/
a:active {color:#999999; text-decoration: none;} /*クリック中のリンクの色*/
a:focus, *:focus { outline-style:none; }

/*---------------------------------------------
	ALL
  ---------------------------------------------*/

p {text-justify: inter-ideograph;}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
	margin: 0;
	text-rendering: optimizeLegibility;}

small {
	font-size: 75%;}
.noto100 {font-weight:100;}
.noto200 {font-weight:200;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto600 {font-weight:600;}
.noto700 {font-weight:700;}
.noto800 {font-weight:800;}
.noto900 {font-weight:900;}

small {font-size: 75%;}

.txt_wh {color:#fff;}
.txt_bl {color:#0080e6;}
.txt_rd {color:red;}
.txt_center {text-align:center;}
.txt_left {text-align:left; text-align: justify;}

.tx250 {font-size:250%;}
.tx200 {font-size:200%;}
.tx150 {font-size:150%;}
.tx130 {font-size:130%;}
.tx120 {font-size:120%;}
.tx110 {font-size:110%;}
.tx90 {font-size:90%;}
.tx80 {font-size:80%;}
.tx75 {font-size:75%;}

.nolink { pointer-events: none; text-decoration-line: none; color: inherit !important;}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    -ms-interpolation-mode: bicubic}
.ue5    { margin-top: 5px}
.ue10    { margin-top: 10px}
.ue15    { margin-top: 15px}
.ue20    { margin-top: 20px}
.ue30    { margin-top: 30px}
.ue40    { margin-top: 40px}
.ue50    { margin-top: 50px}
.ue60    { margin-top: 60px}
.ue70    { margin-top: 70px}
.ue80    { margin-top: 80px}
.ue90    { margin-top: 90px}
.ue100   { margin-top: 100px}
.ue150   { margin-top: 150px}

.ue-5    { margin-top: -5px}
.ue-10   { margin-top: -10px}
.ue-20   { margin-top: -20px}
.ue-30   { margin-top: -30px}
.ue-40   { margin-top: -40px}
.ue-50   { margin-top: -50px}

.sita10  { margin-bottom: 10px;}
.sita20  { margin-bottom: 20px;}
.sita30  { margin-bottom: 30px;}

.sita-20 { margin-bottom: -20px;}
.sita-25 { margin-bottom: -25px;}

.migi5 {margin-right: 5px}
.migi10 {margin-right: 10px}
.migi15 {margin-right: 15px}
.migi20 {margin-right: 20px}

.hidari5 {margin-left: 5px}
.hidari10 {margin-left: 10px}
.hidari15 {margin-left: 10px}
.hidari20 {margin-left: 20px}

.pl5 {padding-left: 5px}
.pl10 {padding-left: 10px}
.pl15 {padding-left: 15px}

.ml5 {margin-left: 5px}
.ml10 {margin-left: 10px}
.ml15 {margin-left: 15px}
.pt50{padding-top:50px;}
.no-gutters {
  margin:0;
  padding:0;
}
.no-gutters　> .col,
.no-gutters　> [class*="col-"] {
  margin:0;
  padding:0;
}
.mrml10 {margin-right: 10px; margin-left:10px;}

/* margin ◇ ------------------------------*/

.mt05   { margin-top: 5px;}
.mt10   { margin-top: 10px;}
.mt15   { margin-top: 15px;}
.mt20   { margin-top: 20px;}
.mt30   { margin-top: 30px;}
.mt40   { margin-top: 40px;}
.mt50   { margin-top: 50px;}
.mt60   { margin-top: 60px;}
.mt70   { margin-top: 70px;}
.mt80   { margin-top: 80px;}
.mt90   { margin-top: 90px;}

.mb05   { margin-bottom: 5px;}
.mb10   { margin-bottom: 10px;}
.mb15   { margin-bottom: 15px;}
.mb20   { margin-bottom: 20px;}
.mb30   { margin-bottom: 30px;}
.mb40   { margin-bottom: 40px;}
.mb50   { margin-bottom: 50px;}
.mb60   { margin-bottom: 60px;}
.mb70   { margin-bottom: 70px;}
.mb80   { margin-bottom: 80px;}
.mb90   { margin-bottom: 90px;}

.mr05   {margin-right: 5px;}
.mr10   {margin-right: 10px;}
.mr15   {margin-right: 15px;}
.mr20   {margin-right: 20px;}

.ml05   {margin-left: 5px;}
.ml10   {margin-left: 10px;}
.ml15   {margin-left: 15px;}
.ml20   {margin-left: 20px;}

.mrml10 {margin-right: 10px; margin-left:10px;}
/* switching ◇ ------------------------------*/
@media only screen and (min-width: 768px) {
.mdsp { display: none !important; } /* MD・SP用（992からはここを読み込む） */
}
@media only screen and (max-width: 767px) {
.pc { display: none !important; } /* PC用（991までの幅の場合に適応される） */
}

/* media ◇ ------------------------------*/

@media screen and (min-width:480px) { 
    /*　for iPhone Landscape　(iPhone 横)　*/
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　for iPad 　*/
}
@media screen and (min-width:1024px) {
    /*　for PC　*/
}


.bc_bg_ye {background:#ffd200;}
.bc_bg_gr {background:#00b3b7;}
.bc_bg_bl {background:#0080e6;}
.bc_bg_aq {background:#d9ebff;}

/* Bootstrapのガター幅を調整するための汎用CSS */
.row-0{ margin-left:0px;  margin-right:0px}
.row-0 >div{ padding-right:0px;  padding-left:0px}
.row-10{ margin-left:-5px;  margin-right:-5px}
.row-10 >div{ padding-right:5px;  padding-left:5px}
.row-20{ margin-left:-10px;  margin-right:-10px}
.row-20 >div{ padding-right:10px;  padding-left:10px}
.row-30{ margin-left:-15px;  margin-right:-15px}
.row-30 >div{ padding-right:15px;  padding-left:15px}
.row-40{ margin-left:-20px;  margin-right:-20px}
.row-40 >div{ padding-right:20px;  padding-left:20px}
.row-50{ margin-left:-25px;  margin-right:-25px}
.row-50 >div{ padding-right:25px;  padding-left:25px}
.row-60{ margin-left:-30px;  margin-right:-30px}
.row-60 >div{ padding-right:30px;  padding-left:30px}
.row-70{ margin-left:-35px;  margin-right:-35px}
.row-70 >div{ padding-right:35px;  padding-left:35px}
.row-80{ margin-left:-40px;  margin-right:-40px}
.row-80 >div{ padding-right:40px;  padding-left:40px}

.mx1200{
	max-width:1140px;
	margin:0 auto;
	padding:0 20px;}

.w-300 { width: 300px !important; }
.w-250 { width: 250px !important; }
.w-200 { width: 200px !important; }
.w-140 { width: 140px !important; }
.w-50p { width: 50% !important; }

/* ヘッダー ◇ ------------------------------*/

.current { color:#0080e6; background:#ffd200!important;}
.current a { color:#0080e6!important;}

.gnav-menulist { font-size:90%; font-weight:bold; display: table; table-layout: fixed; list-style-type: none; padding: 0; width: 100%; height: 100%;}
.gnav-menulist li {display: table-cell; vertical-align: middle; border-left: 1px solid #fff; word-wrap: break-word; height: 100%; background: #0080e6;}
.gnav-menulist li:first-child {border-left: 0px solid #fff;}
.gnav-menulist a{
  display: inline-block;
  vertical-align: middle;
  padding: 1em;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;}
.gnav-menulist li a:hover { color: #0080e6; background: #ffd200;}

.logo {margin: 0 0 0 20px; padding-top:6px;}
@media (max-width: 600px) { .logo img{width:300px; padding-top:10px; margin-left:-10px;} }

.hd_box { position:relative; height:85px;}
@media (max-width: 969px) { .hd_box { border-bottom:5px solid #0080e6; }}

.hd_right { position:absolute; float:right; right:0; top:0; font-weight:bold;}

.hd_box_right ul{ display: flex; padding: 0; margin: 0; list-style: none; }

.hd_box_right a{
  display: inline-block;
  vertical-align: middle;
  padding: 1.55em 1em;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;}

.hd_box_right a:hover{ opacity:0.5; filter:alpha(opacity=50); -ms-filter: "alpha( opacity=50 )";}
.hd_box_link_a a {color:#0080e6; transition : all 0.5s ease 0s;}
.hd_box_link_b a {color:#ffffff; transition : all 0.5s ease 0s;}

.hd_box_right_in01 {width:290px; text-align: center; padding: 0.65em 0 0;}
.hd_box_right_in01 h3{ font-size:160%; letter-spacing:0.05em;}
.hd_box_right_in01 p{ font-size:76%; font-weight:bold;}
.hd_box_right_in01 a{ color:#000; margin: 0; padding: 0;}

.hd_box_right_in02 {width:90px; height:85px; font-size:70%;}
.hd_box_right_in02 p{margin-top:4px;}


/* フッター ◇ ------------------------------*/
.footer_page {border-top: 5px solid #cce6f5; margin-top:80px;}
#footbar {
    z-index: 1000;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #ffd200;
	text-align:center;
	font-size:12px;
	font-weight:bold;}

.ft_box_a {padding:0.8em 1em 0.6em;}
.ft_box_b {padding:0.8em 1em 0.6em; background:#0080e6;}

a.ft_box_a {color: #000; text-decoration:none;}
a.ft_box_b {color: #fff; text-decoration:none;}

.copyright_pc {
  margin: 60px 0px 10px 30px;
	padding-bottom:10px;
  font-size: 75%;}

@media (min-width: 970px) { .bp_970o {display: none;} #page_top{width:65px; height: 75px; position: fixed; right: -90px; bottom: 0px; z-index:99;} }
@media (max-width: 969px) { .bp_970u {display: none;} #bp_970u {display: none;} #page_top {display: none;} #footer{padding-bottom:58px;}}

/* full screen navi ◇ ------------------------------*/

#toggle { position: fixed; top: 0; right: 0; z-index: 1001; width:90px; height:85px; background: #0080e6; text-align:center; cursor: pointer; transition : all 0.5s ease 0s;}
#toggle p{ font-size:76%; margin-top:4px; color:#ffffff; font-weight:bold;}
#toggle:hover{ opacity:0.5; filter:alpha(opacity=50); -ms-filter: "alpha( opacity=50 )";}
#toggle-box { position: relative; width: 50px; height: 30px; margin:18px auto 0;}
#toggle-box > span { height: 2px; left: 10px; display: inline-block; background: #fff; position: absolute; transition: all .6s;}
#toggle-box > span:nth-child(1) { top: 5px; width: 30px; }
#toggle-box > span:nth-child(2) { top: 15px; width: 30px; }
#toggle-box > span:nth-child(3) { top: 25px; width: 30px; }
.is-open #toggle-box > span {background: #fff;}
.is-open #toggle-box > span:nth-child(1) { top: 11px; left: 9px; transform: translateY(6px) rotate(-45deg); width: 32px;}
.is-open #toggle-box > span:nth-child(2) { top: 23px; left: 9px; transform: translateY(-6px) rotate(45deg); width: 32px;}
.is-open #toggle-box > span:nth-child(3) { top: 23px; left: 9px; transform: translateY(-6px) rotate(45deg); width: 32px;}
.is-open #nav-content {z-index: 1000; transform: translateX(0);}
#nav-content {
    z-index: 1000;
    overflow: auto;
    width: 100%;
    height: 100%;
    background-color: rgba(232,244,253,0.95);
	background-image: url("../images/common/face1.svg"),url("../images/common/face2.svg");
	background-repeat:no-repeat;
    color: #212529;
    position: fixed;
    top: 0;
    right: 0;
    text-align: center;
    transform: translateX(100%);
    transition:  transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);}


@media (min-width: 993px) {
	#nav-content { background-position:left 10% top 9%, right 5% bottom 9%;}
	.nav-menu-box { width:910px; padding: 0 30px; text-align:left; position: absolute; top:40%; left:50%; transform: translateY(-50%) translateX(-50%);} 
	.nav-menu-box_title {margin-bottom:40px;}
	.nav-content_in_pc ul { margin: 15px 0 0 0; font-size:120%; padding: 0; list-style: none; text-align:left; border-bottom: 2px dashed #0080e6;}
	.nav-content_in_pc li a { padding: 17px; }
}

@media (min-width: 970px) and (max-width: 992px)  {
	#nav-content { background-position:left 10% top 9%, right 5% bottom 9%;}
	.nav-menu-box { max-width:600px; margin:20px auto 0; padding:30px; text-align:left;}
	.nav-menu-box_title {margin-bottom:40px;}
	.nav-menu-box_right {padding-top:30px;}
	.nav-content_in_pc ul { margin: 15px 0 0 0; font-size:100%; padding: 0; list-style: none; text-align:left; border-bottom: 2px dashed #0080e6;}
	.nav-content_in_pc li a { padding: 10px; }
}

@media (max-width: 969px)  {
	#nav-content { background-position:left 10% top 9%, right 5% top 40%}
	.nav-menu-box { max-width:600px; margin:0 auto; padding:30px 40px; text-align:left;}
	.nav-menu-box_title {margin-bottom:10px;}
	.nav-menu-box_right {padding-top:10px;}
	.nav-content_in_pc ul { margin: 15px 0 0 0; font-size:100%; padding: 0; list-style: none; text-align:left; border-bottom: 2px dashed #0080e6;}
	.nav-content_in_pc li a { padding: 5px; }
}

.nav-menu-box-time {border:2px solid #fff; background:#fff; padding:5px;}
.nav-content_in_pc li { margin: 0; padding: 0;}
.nav-content_in_pc li a{ position:relative; display: block; font-weight: 600; border-top: 2px dashed #0080e6; text-decoration: none;}


.nav-content_in ul { margin: 15px 0 0 0; padding: 0; list-style: none; text-align:left;}
.nav-content_in li { margin: 0; padding: 0;}
.nav-content_in li a{
	display: block;
	font-weight: bold;
	border-top: 1px solid #eaedf2;
	border-left: 1px solid #eaedf2;
	border-right: 1px solid #eaedf2;
	background-color: #fff;
	padding: 10px;
	text-decoration: none;
	color: #212529;}
.nav-content_in li:last-child a{border-bottom: 1px solid #eaedf2;}
.nav-content_in li a:hover{background-color: #fbfbf8;}
.nav-content_in {
	max-width:600px;
	margin:0 auto;
	padding:15px;}