@charset "UTF-8";

:root {
  --color-base:rgba(30,73,170,1);
  --color-base-05:rgba(30, 72, 170, 0.75);
  --color-base-sim: rgba(35, 83, 194, 1);
  --color-base-sim2: rgba(41, 123, 188, 1);
  --color-base-sim3: rgba(48, 152, 205, 1);
  --color-main-font:#333;
  --color-main-font-sim:#5c5c5c;
  --color-font-black-gray:#050505;
  --color-background-base:rgba(230, 230, 230, 1);
  --color-background-base-03:rgba(230, 230, 230, 0.8);
  --color-white:#faf8ee;
  --color-gray:rgba(128, 128, 128);
  --color-gray-08:rgba(128, 128, 128, 0.8);
  --color-gray-07:rgba(128, 128, 128, 0.7);
  --color-gray-06:rgba(128, 128, 128, 0.6);
  --color-gray-05:rgba(128, 128, 128, 0.5);
  --color-gray-03:rgba(128, 128, 128, 0.3);
  --color-gray-02:rgba(128, 128, 128, 0.2);
  --color-gray-01:rgba(128, 128, 128, 0.1);
}

@font-face {
  font-family: HuiFont;
src: url('./font/HuiFont109.ttf') format('opentype');
}

.c-base {color: var(--color-base)}
.c-base05 {color: var(--color-base-05)}
.c-base-sim{color: var(--color-base-sim)}
.c-base-sim2{color: var(--color-base-sim2)}
.c-base-sim3{color: var(--color-base-sim3)}
.c-white{color: var(--color-white)}
.bc-base-sim2 {background-color: var(--color-base-sim2);}

body {
  /* font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; */
  /* font: 12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; */
  font: 12px "SourceHanSans-Regular", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, sans-serif;
  /* font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; */
  font-size: 12px;
  margin: 0;
  padding: 0;
  color: var(--color-main-font);
  background-color: #FFFFFC;
}
/*
--------------------------------------
  display
--------------------------------------
*/
.flex {display: flex;}
.block {display: block;}
.inline-block{display: inline-block;}

/*
--------------------------------------
  width
--------------------------------------
*/
.wp100 {width: 100%;}
.wp90 {width: 90%;}
.wp80 {width: 80%;}
.wp70 {width: 70%;}
.wp60 {width: 60%;}
.wp50 {width: 50%;}
.wp40 {width: 40%;}
.wp35 {width: 35%;}
.wp30 {width: 30%;}
.wp25 {width: 25%;}
.wp20 {width: 20%;}
.wp15 {width: 15%;}
.wp10 {width: 10%;}

/*
--------------------------------------
  height
--------------------------------------
*/
.hp100 {height: 100%;}
.hp90 {height: 90%;}
.hp80 {height: 80%;}
.hp70 {height: 70%;}
.hp60 {height: 60%;}
.hp50 {height: 50%;}

.hpx100 {height: 100px;}
.hpx120 {height: 120px;}

/*
--------------------------------------
  padding
--------------------------------------
*/
/* padding-top */
.pt5 {padding-top: 5px;}
.pt10 {padding-top: 10px;}
/* padding-bottom */
.pb5 {padding-bottom: 5px;}
.pb10 {padding-bottom: 10px;}
/* padding-left */
.pl5 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl80 {padding-left: 80px;}
/* padding-right */
.pr5 {padding-right: 5px;}
.pr10 {padding-right: 10px;}
.pr80 {padding-right: 80px;}

.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}

.p20 {padding: 20px;}
/*
--------------------------------------
  text-align
--------------------------------------
*/
.ta-left {text-align:left;}
.ta-right {text-align:right;}
.ta-center {text-align:center;}

.main {
  margin-top: 65px;
}
.content-image-frame {
  height: 100%;
  position: relative;
}

.content-image-sentence {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}

/* ul list-triangle */
ul.list-triangle {
  padding:0.5em;
  list-style-type:none;
  color: black;
}
ul.list-triangle li {
  position:relative;
  padding: 2px 1px 2px 20px;
  font-size: 16px;
}
ul.list-triangle li a {
  text-decoration: none;
  color: var(--color-white);
  transition: .2s;
}
ul.list-triangle li a:hover{
  color: var(--color-main-font-sim);
}
ul.list-triangle li:before {
  position:absolute;
  content:'';
  top: 0.5em;
  left: 0.2em;
  height:0;
  width:0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--color-white);
}

@media (min-width: 1020px) {
  .header-frame-sp {
    display: none;
  }

  /*
  --------------------------------------
    table
  --------------------------------------
  */
  tr,td {padding: 0;}

  /*
  --------------------------------------
    ul list
  --------------------------------------
  */
  /* common */
  ul, li {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
  }

  /*
  **************************************
  --------------------------------------
    header
  --------------------------------------
  **************************************
  */
  .header-frame {
    height: 65px;
    background-color: var(--color-white);
    position: fixed;
    width:100%;
    left:0;
    top:0;
    margin:0;
    z-index:1001;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  }

  /*
  --------------------------------------
    header left -logo
  --------------------------------------
  */
  .header-logo{
    width: 15%;
    min-width: 165px;
    max-width: 165px;
  }

  .header-logo img {
    object-fit: contain;
    height: 55px;
    margin-left: 15px;
    margin-bottom: 2px;
    margin-top: 2px;
  }
  
  /*
  --------------------------------------
    header center -navigation
  --------------------------------------
  */
  .header-menu {
    width: 65%;
  }

  .header-menu div {
    height: 65px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

  .navigation {
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 4px 0;
    
  }
  .navigation li, .navigation li a {
    color: var(--color-main-font);
  }
  .navigation li {
    font-size: 14px;
    text-align: center;
    float: left;
  }
  .navigation li a {
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
  .navigation .content {
    width: 140px;
  }
  .navigation li a::after {
    position: absolute;
    bottom: 2px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: var(--color-base);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
  }
  .navigation .content a:hover::after {
    bottom: -1px;
    opacity: 1;
    visibility: visible;
  }
  .navigation .content a:hover {
    color: var(--color-main-font-sim);
  }

  /*
  --------------------------------------
    header left -contact
  --------------------------------------
  */
  .header-contact {
    width: 20%;
    min-width: 190px;
  }
  
  .header-contact div {
    float: right;
    padding-right: 10px;
    margin-top: 5px;
  }
  .header-contact .contact-btn {
    float: left;
    border-radius: 30px;
    padding: 15px 50px;
    text-align: center;
    margin-top: 3px;
    margin-left: 5px;
    color: var(--color-white);
    font-size: 14px;
  }
  .header-contact .contact-btn {
    background-color: var(--color-base-sim2);
  }
  .header-contact .contact-btn:hover {
    background-color: var(--color-base-sim);
    border-color: var(--color-base-sim);
    color: var(--color-white);
    transition: 0.3s ;
  }

  .header-navigation {
    height: 30px;
    background-color: var(--color-white);
    border-top: solid 1px var(--color-gray-02);
    width: 100%;
  }

  /*
  **************************************
  --------------------------------------
    fotter
  --------------------------------------
  **************************************
  */
  .fotter-frame-sp {
    display: none;
  }
  .fotter-frame {
    color: var(--color-white);
    background-color: var(--color-base-sim3);
  }
  .fotter-frame table{
    color: var(--color-white);
    font-size: 12px;
  }
  /* 
  **************************************
  --------------------------------------
    content
  --------------------------------------
  **************************************
  */
  .main {
    margin-top: 65px;
  }
  .pp-scrollable {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .pp-scrollable::-webkit-scrollbar {
    display: none;
  }
  .content-image {
    background-size: cover;
    height: 30vh;
    width: 100%;
  }

  .content-image::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    display: block;
    margin-top: 65px;
  }

  .content-frame {
    padding: 20px;
  }

  .content-frame p {
    padding: 10px 30px;
    font-size: 18px;
  }

  .content-title {
    padding: 10px 20px;
    font-size: 60px;
    color: var(--color-white);
    line-height: 38px;
    margin-left: 20px;
  }

  .content-title span {
    font-size: 30px;
    margin-left: 8px;
    line-height: 50px;
    color: var(--color-base-sim3);
  }
  
  .content-sub-title {
    font-size: 40px;
    color: var(--color-main-font);
    line-height: 30px;
  }

  .content-sub-title span {
    font-size: 20px;
    margin-left: 8px;
    color: var(--color-base-sim3);
  }

  .content-sub2-title {
    text-align: center;
    font-size: 30px;
    color: var(--color-main-font);
    line-height: 30px;
  }
}

@media (max-width: 1019px) {
  .header-frame {
    display:none;
  }
  .header-frame-sp {
    height: 65px;
    background-color: var(--color-white);
    position: fixed;
    width:100%;
    left:0;
    top:0;
    margin:0;
    z-index:1001;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  }
  .header-logo{
    width: 15%;
    min-width: 165px;
    max-width: 165px;
  }

  .header-logo img {
    object-fit: contain;
    height: 55px;
    margin-left: 15px;
    margin-bottom: 2px;
    margin-top: 2px;
  }
  
  .menu-btn {
    position: fixed;
    top: 2px;
    right: 2px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #3584bb;
  }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
      content: '';
      display: block;
      height: 3px;
      width: 25px;
      border-radius: 3px;
      background-color: #ffffff;
      position: absolute;
  }
  .menu-btn span:before {
      bottom: 8px;
  }
  .menu-btn span:after {
      top: 8px;
  }

  #menu-btn-check:checked ~ .menu-btn span {
      background-color: rgba(255, 255, 255, 0);
  }
  #menu-btn-check:checked ~ .menu-btn span::before {
      bottom: 0;
      transform: rotate(45deg);
  }
  #menu-btn-check:checked ~ .menu-btn span::after {
      top: 0;
      transform: rotate(-45deg);
  }
  #menu-btn-check {
      display: none;
  }

  .menu-content {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 100%;
      z-index: 80;
      background-color: #3584bb;
      transition: all 0.5s;
  }
  .menu-content ul {
      padding: 50px 10px 0;
  }
  .menu-content ul li {
      border-bottom: solid 1px #ffffff;
      list-style: none;
      padding: 10px;
      font-size: 18px;
  }
  .menu-content ul li a {
      display: block;
      width: 100%;
      font-size: 18px;
      box-sizing: border-box;
      color:#ffffff;
      text-decoration: none;
      padding: 9px 15px 10px 0;
      position: relative;
  }
  .menu-content ul li a::before {
      content: "";
      width: 7px;
      height: 7px;
      border-top: solid 2px #ffffff;
      border-right: solid 2px #ffffff;
      transform: rotate(45deg);
      position: absolute;
      right: 11px;
      top: 16px;
  }
  #menu-btn-check:checked ~ .menu-content {
    left: 0;
  }

  .fotter-frame {
    display: none;
  }
  .fotter-frame-sp {
    color: var(--color-white);
    background-color: var(--color-base-sim3);
  }
  .fotter-frame-sp table{
    color: var(--color-white);
    font-size: 16px;
  }

  .content-image {
    background-size: cover;
    height: 20vh;
    width: 100%;
  }

  .content-image::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    display: block;
    margin-top: 65px;
  }

  .content-frame {
    padding: 10px;
  }
  .content-title {
    padding: 10px 20px;
    font-size: 36px;
    color: var(--color-white);
    line-height: 30px;
  }

  .content-title span {
    font-size: 18px;
    margin-left: 8px;
    color: var(--color-base-sim3);
  }
  
  .content-sub-title {
    font-size: 26px;
    color: var(--color-main-font);
    line-height: 24px;
  }

  .content-sub-title span {
    font-size: 16px;
    margin-left: 8px;
    color: var(--color-base-sim3);
  }

  .content-sub2-title {
    text-align: center;
    font-size: 20px;
    color: var(--color-main-font);
    line-height: 30px;
  }
}

@media(max-height: 500px){
  .menu-content ul li a {
    font-size: 14px;
    padding: 5px;
  }
}
@media(max-height: 380px){
  .menu-content ul li {
    padding: 5px;
  }
  .menu-content ul li a {
    font-size: 10px;
    padding: 5px;
  }
}