@charset "UTF-8";

body{margin: 0; padding: 0; font-family: 'Noto Sans JP', sans-serif, 'Shippori Antique', sans-serif;

}
img{width: 100%; height: auto;}
.flex{display: flex;}
.flex-end{justify-content: flex-end;}
.flex-center{justify-content: center;}
a{text-decoration: none; transition: 0.3s;}
a:hover{ opacity: 0.5;}

.gre01{background-color: #6C9819;}
.red01{background-color: #981940;}
.ble01{background-color: #196798;}

.clear{ clear: both;}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


/** 01.Header section
************************************/
header{
  padding: 0 10%;
  position: fixed;
  background-color: #FFF;
  z-index: 90;
  border-bottom: 1px solid #EBEBEB;
  width: 100%;
}
h1{font-size: 10px;margin: 0; padding: 0;height: 12px;}
header a{display: block;}

header .logosec{width: 20%;}
header h2{margin: 0; height: 78px;}
header h2 img{width: auto; height: 80px; margin: 0; padding: 10px 0 0 0;}

header .navsec{width: 80%; text-align: center;}
.navsec ul{margin: 0; padding: 0;}
.navsec li{list-style: none;}

header .flgnv01 a{color: #FFF;}
.flgnv01 li{width: 200px; height: 40px; font-size: 14px; line-height: 270%; font-weight: 900; color: #0B1D46;}
.flgnv01 img{height: 18px; width: auto; vertical-align: middle; padding: 0 10px 0 0; margin-top: -3px;}

.flgnv02 li{width: auto; height: 40px; font-size: 14px; line-height: 190%; margin: 0 0 0 20px;}
.flgnv02 img{height: 18px; width: auto; vertical-align: middle; margin-top: -3px;}

header .glonv01{ border-right: 1px solid #CCC; margin: 10px 0 0 0;}
.glonv01 a{color: #186798;}
.glonv01  li{width: 180px; height: 55px; line-height: 400%; font-size: 12px; border-left: 1px solid #CCC;}

.hdcontact{ color: #ff69b4; border: 1px solid #ff69b4; font-size: 10px !important; padding: 1% 2%;}
.hdad{font-size: 0.9em; padding: 1% 0;}
.hdtel{font-size: 1.5em !important; font-family: 'Noto Serif JP', serif;}

@media screen and (max-width: 1100px) {
  .flgnv02 li{width: auto; height: 40px; font-size: 14px; line-height: 190%; margin: 0 0 0 20px;}
  .hdcontact{ color: #ff69b4; border: 1px solid #ff69b4; font-size: 10px !important; padding: 10px;}
  .hdad{font-size: 0.9em !important; padding: 1% 0;}
  .hdtel{font-size: 1.3em !important; font-family: 'Noto Serif JP', serif;}
  
}

/** 08.Section 80
************************************/
/**.sec80{filter:grayscale(100%);-webkit-filter:grayscale(100%)}**/
.sec80 iframe{margin: 0 0 -5px 0; width: 100%; height: 600px; border: none;}


/** 10.Footer
************************************/
footer{ background-color: #20578D; padding: 2% 10%; color: #FFF; font-size: 12px; text-align: center;}
.copy{background-color: #FFF; margin: 1% 10%; text-align: center; font-size: 0.8em;}


/** 11.Tuiju Button
************************************/
.right-fixed-banner {
    position: fixed;
    bottom: 15%;
    right: 0;
    text-align: center;
    font-size: 12px;
  }
  
  .banner-box {
    writing-mode: vertical-rl;
    letter-spacing: 1px;
  }
  .banner-box a{color: #FFF; display: block;}
  .banner-box img{width: 16px; padding: 0 0 10px 0;}
  #banner-1 { background: #971A40; padding: 20px 20px 20px 40px; width: 20px;}
  #banner-2 { background: #196798; padding: 20px 20px 20px 40px; width: 20px;}
  #banner-3 {background: #FFF; color: #000; font-size: 10px; padding: 20px 20px 20px 40px; width: 20px;}
  #banner-4 {background: #6C9819; padding: 20px 20px 20px 40px; width: 20px;}

 

  /** TABLET screen ***********************
************************************/
@media screen and (max-width: 820px) {
  .copy{background-color: #FFF; margin: 1% 20% 3% 20%; text-align: center; font-size: 0.8em;}
}

/** SP screen ***********************
************************************/
@media screen and (min-width: 480px) {
  #sp-fixed-menu{display: none;}
}
@media screen and (max-width: 480px) {
  header .logosec{width: 100%; text-align: center;}
  header h2{margin: 0; height: 50px;}
  header h2 img{width: auto; height: 45px; margin: 0; padding: 1% 0 0 0;}
  .flex{display: grid; z-index: 900;}
  .navsec{display: none;}
  .right-fixed-banner{display: none;}
  footer{font-size: 10px; padding: 2% 5%;}
  .copy{font-size: 0.6em; margin: 1% 10% 75px 10%;}

  /*フローティングメニューをページ下部に固定*/
  #sp-fixed-menu {
    position: fixed;
    width: 100%;
    bottom: 0px;
    opacity: 1;
    z-index: 99;
    transition: display 0.3s;
  }

  /*フローティングメニューを横並びにする*/
  #sp-fixed-menu ul:first-child {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 3;
  }

  #sp-fixed-menu ul:first-child.show {
    display: flex;
  }

  .open #sp-fixed-menu ul:first-child {
    position: initial;
  }

  #sp-fixed-menu li {
    justify-content: center;
    align-items: center;
    width: 50%;
    padding: 0;
    margin: 0;
    font-size: 8px;
  }

  #sp-fixed-menu li:first-child {
    background: #971a40;
  }

  #sp-fixed-menu li:nth-child(2) {
    background: #196798;
  }
  #sp-fixed-menu li:nth-child(3) {
    background: #33a02a;
  }
  #sp-fixed-menu li:nth-child(4) {
    background: #092864;
    position: relative;
  }
  #sp-fixed-menu img {
    width: auto;
    height: 16px;
    display: block;
    margin: 0 auto 3px auto;
  }

  /*ボタンを調整*/
  #sp-fixed-menu li a {
    color: #fff;
    text-align: center;
    display: block;
    padding: 15px 10px;
  }
}