@charset "UTF-8";

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　初期設定　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
font-family: sans-serif, 'Noto Serif JP', serif;
}

body {
width:100%;
color:#333;
}
.wrapper {
overflow:hidden;
}
header {
background:#216390;
z-index:1;
}
nav {
z-index:1;
}
footer {
color:#FFF;
background:#216390;
font-size:.9em;
}

.footer_container {
max-width:1200px;
margin:0 auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content:space-between;
padding:1.3em 0 0.8em 0;
}
.footer_container >:first-child {
  margin-right: auto;
}

/* other
--------------------------- */
@media screen and (min-width: 579px) {
	.br-sp { display:none; }
}

@media screen and (max-width: 768px) {
	.br-sp2 { display:none; }
}

a:focus, *:focus, a:hover {
	outline:none;
    text-decoration: none;
}
.aka {
color:#ff0000;
}
.bn_hover a:hover {
opacity:0.6;
}

.under_title {
border-bottom:solid 2px #216390;
margin:0.5em 0.9em 0.8em 0.8em;
padding:0 0 0.3em 0;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝　common　＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.maincontainer {
max-width:1100px !important;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media screen and (max-width: 770px) {
.maincontainer {
max-width:1100px !important;
  position: relative;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
background:none;
}
}
.rl15-container {
  max-width: 900px;
  position: relative;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.rl90-container {
  max-width: 900px;
  position: relative;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
}



.rl80-container {
  max-width: 800px;
  position: relative;
  margin: 0 auto;
  padding-left: 45px;
  padding-right: 45px;
}

.kanri-container {
  max-width: 900px;
  position: relative;
  margin: 0 auto;
  padding: 15px;
}
.maincontainer12 {
max-width:1200px !important;
  margin: 0 auto;

}

.no-gutters {
  margin:0;
  padding:0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  margin:0;
  padding:0;
}

p.lead {
margin:.5em 0 0.5em 1em;
font-size:1em;
}
p.lead2 {
margin:1.2em 0.9em 1.6em 1.2em;
font-size:1em;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝　ナビゲーション　＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.header_area {
 display: -webkit-flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
align-items:center;
max-width:1200px;
margin-right:auto;
margin-left:auto;
background:#216390;
min-height:80px;
}

.header_area >:first-child {
margin-right: auto;
}
.logo img{
max-width:250px;
margin-left:3%;
}

.tel {
max-width:320px;
margin:3px 3px 3px 0;
color:#FFF;
font-size:0.8rem;
}
span.tel_size {
font-size:1.5rem;
}
.sub-menu ul {
list-style-type:none;
padding:0;
margin:auto 10px;
}
.sub-menu li a{
margin-right:0.5em;
color:#FFF;
}
.sub-menu li a:hover{
color:skyblue;
}
@media screen and (max-width: 992px) {
.sub-menu, .tel {
display:none;
}
}

#head_wrap.fixed .header_area {
min-height:60px;
}
#head_wrap.fixed .logo img {
max-width:200px;
}
#head_wrap.fixed .tel {
max-width:280px;
margin:2px 2px 2px 0;
font-size:0.7rem;
}
#head_wrap.fixed span.tel_size{
font-size:0.8rem;
}
#head_wrap.fixed .sub-menu li{
display:inline-block;
font-size:0.9rem;
}

/*-------------------------------------------------- */
p.linksaki a {
padding:8px;
border-radius:5px;
background:#fafafa;
font-size:12px;
color:#000;
font-weight: bold;
}
.linksaki a:hover {
border-radius:5px;
background:#216390;
color:#FFF;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝　footer　＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.copyright {
font-size:0.8em;
padding:0;
margin:0;
}
.f_nav {
list-style-type: none;
}
.f_nav ul {
	padding-left: 0;
}
.f_nav li {
	display: inline;
	padding: 5px;
	margin: 5px;
text-align: center;
}
.f_nav li a {
 text-decoration:underline;
    z-index: 2;
font-size:.9em;
color:#FFF;
}
.f_nav li a:visited {
	text-decoration: none;
}

.f_nav li a:hover {
    color:#31297d;
}


@media screen and (max-width: 768px) {
.f_nav {
	display:none;
}
.copyright {
margin:0 auto;
text-align:center;
}
}

/*============================================*/
section.first__section {
padding:50px 0;
}
section.first__section2 {
padding:80px 0 0;
}
section.first__section3 {
padding-top:200px;
}
section + section {
  padding-top: 130px;
}

section.last__section {
  padding-bottom: 20vh;
}

@media (max-width: 768px) {
section + section {
  padding-top: 80px;
}
}

/*=======================================================*/
.my-size {
font-size:2.5em;
}
span.menu_ja {
display:block;
font-size:0.8em;
}
@media screen and (max-width: 992px) {
.my-size {
font-size:1.8em;
}
span.menu_ja {
display:inline-block;
padding-left:0.3em;
}
}

/*==========================================================================*/
@media (max-width: 992px) {
.menu {
 /* メニューの位置マイナス指定で画面外に */
  position: fixed;
  right: -100%;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
justify-content:flex-start;
  background-color: rgba(0, 0, 0, 0.8);
  transition: .3s;
}
.menu.open {
  right: 0;
padding:0;
}
}

/*-------------------------- Toggle Button -----------------------------*/
#nav-toggle {
  display: none;
  position: absolute;
  right: 20px;
  top: 24px;
  width: 34px;
  height: 36px;
  cursor: pointer;
  z-index: 9999;
}
#head_wrap.fixed #nav-toggle {
  top: 17px;
}
#nav-toggle div {
  position: relative;
}

@media (max-width: 992px) {

#nav-toggle {
    display: block;
  }
  /* #nav-toggle 切り替えアニメーション */
  #nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #FFF;
    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;
  }
  .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);
  }
  /* #global-nav スライドアニメーション */
  /* #global-nav MENU_OPEN */
   .open#global-nav {
     /*#global-nav top + #mobile-head height*/
z-index:999;
    -moz-transform: translateX(-992px);
    -webkit-transform: translateX(-992px);
    transform: translateX(-992px); 
  }
}
@media screen and (min-width:992px){
.gloval-navi li.sp--only {
display:none;
}
}
/*==768px以下の形状*/
@media screen and (max-width:992px){
.gloval-navi li.pc--only {
display:none;
}
}
/* =====================================================================================================================

ナビゲーションドロップダウンのためのCSS

===================================================================================================================== */
.gnav-wrapper {
background: #FFF;
  position: relative;/*megaのため*/
}
.  {
  max-width: 1300px;
  margin: 0 auto;
}

.gloval-navi {
  display: flex;
  justify-content:center;
margin-bottom:10px;
max-width:1200px;
    margin: 0 auto;
}
#head_wrap.fixed {
position:fixed;
top:0;
width:100%;
}
.gloval-navi li li {
display:block;
}
@media screen and (min-width:992px){
.gloval-navi > li {
width:25%;
}
}
.gloval-navi li {
  text-align: center;
  transition: all .3s ease-in-out;
display:block;
}

.gloval-navi li:hover {/*もしくは、全部かく　mega has-child none */
  background: #b8ddec;
}

.gloval-navi a {
color:#216390;
 border-right: solid 1px #216390;
 padding: 5px 20px;
  text-decoration: none;
display:block;
}
 
.gloval-navi > li:first-child a {
 border-left: solid 1px #216390;
}
.gloval-navi > li li a {
  border-right:unset;
}
.gloval-navi > li li:first-child a {
  border-left:unset;
}


.megamenu {
  background: #b8ddec;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  position: absolute;
  top: 70px;
  left: 0;
  transition: all .2s ease-in;
  z-index: 999;
  padding: 30px 0;
visibility: hidden;
}
.gloval-navi > li:hover .megamenu,
.gloval-navi > li:active .megamenu {
  max-height: 9999px;
  opacity: 1;
visibility: visible;
}
/*==mega矢印の設定*/
.gloval-navi li.has-mega > a {
position:relative;
}
.gloval-navi li.has-mega > a::after{
  content:'';
  position: absolute;
  right:10px;
  top:25px;
  width:6px;
  height:6px;
  border-top: 2px solid #216390;
    border-right:2px solid #216390;
    transform: rotate(135deg);
}


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

.gloval-navi li.has-child{
position:relative;
}

/*ナビゲーションのリンク設定*/
.gloval-navi li.has-child a{
  display: block;
  color:#FFF;
  text-decoration: none;
  transition:all .3s;
}

.gloval-navi li.has-child li a{/*第2階層*/
  padding:10px 40px;
background:#797570;
font-size:0.85rem;
}
.has-child li .childTop {
background:red;
}

.gloval-navi li.has-child a:hover{ 
  background:#fff; 
}

/*==矢印の設定*/
.gloval-navi li.has-child::after{
  content:'';
  position: absolute;
  right:10px;
  top:25px;
  width:6px;
  height:6px;
  border-top: 2px solid #333;
    border-right:2px solid #333;
    transform: rotate(135deg);
}

/*下の階層を持っているulの指定*/
.gloval-navi li.has-child ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  top:54px;
  z-index: 4;
    /*形状を指定*/
  background:#a8a39d; 
  width:180px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
.gloval-navi li.has-child:hover > ul,
.gloval-navi li.has-child:active > ul {
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状 2階層の中身*/
.gloval-navi li.has-child ul li a{
/*  color: #999;*/
  border-bottom:solid 1px #ccc;
}

.gloval-navi li.has-child ul li a:hover,
.gloval-navi li.has-child ul li a:active {
  background:#333;
}

/*==768px以下の形状*/
@media screen and (max-width:992px){

.gloval-navi {
    padding: 0;
flex-direction:column;
display:block;/*.gloval-navi a 　でやっていたら、menu　の位置がずれた:修正*/
  }

.gloval-navi a {
 color: #FFF;
}
.gloval-navi li.has-child ul{
    position: relative;
  left:0;
  top:0;
  width:100%;
  visibility:visible;/*JSで制御するため一旦表示*/
  opacity:1;/*JSで制御するため一旦表示*/
  display: none;/*JSのslidetoggleで表示させるため非表示に*/
  transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
  
.gloval-navi li a{
text-align:left;
  border-bottom:1px solid #ccc;
}
/*矢印の位置と向き*/

.gloval-navi li.has-child::after{
  border-top: 2px solid #FFF;
    border-right:2px solid #FFF;
  right:20px;  
}

.gloval-navi li.has-child::after{
    transform: rotate(135deg);
  right:20px;
}
    
.gloval-navi li.has-child.active::after{
    transform: rotate(-45deg);
}
.gloval-navi li a:hover{
color:#216390;
}
.gloval-navi li.sp--only a:hover{
color:#216390;
  background:#b8ddec; 
}
.gloval-navi li.has-child ul li a:hover,
.gloval-navi li.has-child ul li a:active {
color:#FFF;
}


}

/* ===================== 20240326追加 =====================================*/
.megamenu-inner {
max-width:100%;
  display: flex;
  flex-wrap: wrap;
}

.megamenu-inner > li {
width:250px;
padding: 3px;
margin:5px;
text-align:left;
}
.megamenu-inner > li.ser50 {
width:45.4%;
padding: 3px;
margin:5px;
text-align:left;
}

.megamenu-inner > li.ser {
width:30%;
padding: 3px;
margin:5px;
text-align:left;
}


.megamenu h4{
color:green;
text-align:left;
padding:0 0 0.5em 1.8em;
}
.megamenu .testmega_inner {
display:flex;
}
.test_left {/*のちほど消去*/
width:20%;
border-right:1px solid #216390;
}
.megamenu-inner li {
border:solid 1px #eee;
border-radius:10px;
}
.megamenu-inner img {
width:45px;
margin-right:5px;
}
.megamenu-inner li:hover {
background:#eee;
}