/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 */

 @font-face {
    font-family: "DIN_Medium";
    src: url(./font/DIN-Medium.ttf);
  }
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
  
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
  }
  html {
    line-height: 2;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
  }
  
  q, blockquote {
    quotes: none;
  }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  
  a img {
    border: none;
  }
  
  article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
  }
  
  *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  html, body {
    font-family:  "Noto Sans CJK JP", "Noto Sans JP", "Noto Serif CJK JP", "Noto Serif JP", "ヒラギノ角ゴ Pro", "游ゴシック", "ヒラギノ明朝 Pro", "Oswald", "メイリオ", "游ゴシック", "Noto Serif", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    line-height: 1.8;
    text-align: justify;
    font-size: 10px;
    /*scroll-behavior: smooth;*/
    /*-webkit-overflow-scrolling: touch;*/
    font-weight: 400;
    color: #333333;
  }
  
  a {
    display: inline-block;
    color: black;
    cursor: pointer;
  }
  
  a,a:hover {
    text-decoration: none;
  }
  
  button {
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0;
  }
  
  img {
    display: block;
    width: 100%;
  }
  
  h1, h2, h3, h4, h5,  h6 {
    margin: 0;
  }
  
  p, dt, dd {
    overflow-wrap: break-word;
  }
  
  body {
    margin: auto; 
    position: relative;
  }
  
  small {
    font-size: 70%;
    color: grey;
  }
  /*--------------------------responsive ---------------------*/
  .clearfix::before,
  .clearfix::after {
      display: block;
      content: "";
      clear: both;
  }
  
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
  .pci {
    display: inline-block !important;
  }
  .spi {
    display: none !important;
  }
  .pcf {
    display: flex !important;
  }
  .spf {
    display: none !important;
  }
  .pctr {
    display: table-row !important;
  }
  .sptr {
    display: none !important;
  }
  
  
  @media screen and (max-width: 767px) {
    .sp {
      display: block !important;
    }
    .pc {
      display: none !important;
    }
    .pci {
      display: none !important;
    }
    .spi {
      display: inline-block !important;
    }
    .pcf {
      display: none !important;
    }
    .spf {
      display: flex !important;
    }
    .pctr {
      display: none !important;
    }
    .sptr {
      display: table-row !important;
    }
  
  }
  
  
  /*--------------------------------------------------------------------------*/
  /* Common
  ---------------------------------------------------------------------------------*/
  
  body {
    position: relative;
    margin: 0;
  }
  
  p, td, label, div, ul, li, strong, input, a  {
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
  }
  
  p, label, div, strong, input  {
    display: block;
  }
  
  p, em {
    white-space: pre-line;
  }
  /*---------------------------textalign----------------*/
  .textCenter {
    text-align: center;
  }
  /*---------------------------img----------------*/
  .img_full {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: auto;
    display: block;
  }
  .img_cover {
    width: 100%;
    object-fit: cover;
  }
  .img_contain {
    object-fit: contain;
  }
  /*==========================================================
    h1,h2,h3,h4,h5,h6
  ==========================================================*/
  h1,h2 {
    font-size: 4rem;
    font-weight: 700;
    color: black;
    line-height: 1.5;
  }
  h3 {
    font-size: 2.5rem;
    color: #3A4B52;
    font-weight: 700;
  }
  /*==========================================================
    button
  ==================================`========================*/
  .btn {
    display: inline-block;
    position: relative;
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
  }
  .btn_logo {
    width: 20rem;
    display: block;
  }
  .btn_top_contact {
    width: 15rem;
    line-height: 4rem;
    color: white;
    background: #00A1E9;
    text-align: center;
    display: block;
    border-radius: 2rem;
    font-size: 1.6rem;
  }
  .btn_main {
    width: 25rem;
    line-height: 5rem;
    font-size: 1.6rem;
    color: white;
    background: #00A1E9;
    border: 1px solid #00A1E9;
    text-align: center;
    border-radius: 2.5rem;
    position: relative;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    display: inline-block;
    transition: all 0.5s linear;
  }
  .btn_main:hover {
    background: white;
    color: #00A1E9;
  }
  .btn_main:hover:after{
    color: #00A1E9;
  }
  .btn_main:after{
    content: "\f138";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    font-size: inherit;
    right: 1.5rem;
    line-height: 2rem;
    top: calc(50% - 1rem);
    position: absolute;
    transition: all 0.5s linear;
  }
  .btn_main_r {
    color: white;
    border: 1px solid white;
    background: none;
  }
  .btn_main_r:hover {
    color: black;
    background: white;
  }
  .btn_main_r:hover:after {
    color: black;
  }
  .btn_detail {
    font-size: 1.6rem;
    color: #00A1E9;
    display: inline-block;
    line-height: 1;
    font-size: 1.4rem;
  }
  .btn_detail i {
    margin-left: 0.5rem;
  }
  .btn_flogo {
    width: 35rem;
  }
  .btn_search {
    width: 20rem;
    line-height: 5rem;
    border-radius: 2.5rem;
    background: #00A1E9;
    color: white;
    text-align: center;
    cursor: pointer;
  }
  .btn_search i {
    margin-right: 0.5rem;
  }
  .btn_download,
  .btn_back {
    width: 30rem;
    line-height: 5rem;
    color: #00A1E9;
    text-align: center;
    border-radius: 2.5rem;
    display: inline-block;
    border: 1px solid #00A1E9;
    transition: all 0.5s linear;
  }
  .btn_download:hover,
  .btn_back:hover {
    background: #00A1E9;
    color: white;
  }
  .btn_download i {
    margin-left: 1rem;
  }
  /*==========================================================
    header, footer
  ==========================================================*/
  .l_header {
    height: 8rem;
    padding: 0 calc(50% - 60rem);
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16); 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
  }
  .globNaviCheck,
  .globNaviIcon {
    display: none;
  }
  .globNavi {
    display: block;
    flex-grow: 1;
  }
  .globNaviMenu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .globNaviMenu>li,
  .globNaviMenu>li>a {
    display: block;
  }
  .globNaviMenu>li {
    margin-right: 3rem;
  }
  .globNaviMenu>li>a {
    font-size: 1.6rem;
  }
  .globNaviMenu>li.support>a:after {
      content: "\f35d";
      position: relative;
      margin-left: 0.5rem;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
  }
  .l_footer {
    padding: 8rem 0 6rem;
  }
  .footerLogo p {
    font-size: 1.8rem;
    margin-top: 1rem;
  }
  .footerLogo p span {
    font-size: 0.8em;
  }
  .footerInfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footerNav>li,
  .footerNav>li>a {
    display: block;
  }
  .footerNav>li.support>a:after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: relative;
    margin-left: 0.5rem;
  }
  .footerNav>li.support {
    height: 10rem;
  }
  .footerNav {
    width: 50rem;
    display: flex;
    flex-direction: column;
    max-height: 16rem;
    flex-wrap: wrap;
  }
  .footerNav li {
    width: calc(100% / 3);
    margin-bottom: 1.5rem;
  }
  .footerDetail {
    margin-top: 2rem;
    border-top: 1px solid #333333;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footerDetail p a {
    color: #00A1E9;
    text-decoration: underline;
  }
  
  
  
  /*==========================================================
    slider
  ==========================================================*/
  /*==========================================================
    loading
  ==========================================================*/
  #loading {
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   flex-direction: column;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   background: #fff;
   z-index: 50;
  }
  .loadingIcon {
    width: 33.3rem;
    margin-bottom: 4rem;
  }
  #loading .dot-pulse:before {
    animation: custom-dot-pulse-before 1.5s infinite linear;
    background-color: #e40d7c;
    color: #e40d7c;
    box-shadow: 9984px 0 0 -5px #e40d7c;
    animation-delay: 0s;
  }
  #loading .dot-pulse {
    animation: custom-dot-pulse 1.5s infinite linear;
    background-color: #231815;
    color: #231815;
    box-shadow-color: 9999px 0 0 -5px #231815;
    animation-delay: .25s;
  }
  #loading .dot-pulse:after {
    animation: custom-dot-pulse-after 1.5s infinite linear;
    background-color: #be9124;
    color: #be9124;
    box-shadow-color: 10014px 0 0 -5px #be9124;
    animation-delay: .5s;
  }
 
  @keyframes custom-dot-pulse-before {
    0% {
      box-shadow: 9984px 0 0 -5px black;
    }
    30% {
      box-shadow: 9984px 0 0 2px black;
    }
    60%,
    100% {
      box-shadow: 9984px 0 0 -5px black;
    }
  }
  
  @keyframes custom-dot-pulse {
    0% {
      box-shadow: 9999px 0 0 -5px black;
    }
    30% {
      box-shadow: 9999px 0 0 2px black;
    }
    60%,
    100% {
      box-shadow: 9999px 0 0 -5px black;
    }
  }
  
  @keyframes custom-dot-pulse-after {
    0% {
      box-shadow: 10014px 0 0 -5px black;
    }
    30% {
      box-shadow: 10014px 0 0 2px black;
    }
    60%,
    100% {
      box-shadow: 10014px 0 0 -5px black;
    }
  }
  
  
  @media screen and (max-width: 1250px) {
    html, body {
      font-size: calc(1000vw / 1250);
    }
  }
  
  @media screen and (max-width: 767px) {
    html, body {
      font-size: calc(1000vw / 450);
    }
    h1, h2 {
      font-size: 2.5rem;
    }
    h2.underline {
      padding-bottom: 0.7rem;
    }
    h2.underline1:after {
      width: 10rem;
      left: calc(50% - 5rem);
      height: 0.2rem;
    }
    h3 {
      font-size: 1.8rem;
    }
    /*---------------button------------*/
    .btn_logo {
      width: 15rem;
    }
    .btn_top {
      width: 35.5rem;
      line-height: 6rem;
      font-size: 1.6rem;
      border-radius: 3rem;
    }
    .btn_contact{
      border-radius: 3rem;
      line-height: 6rem;
      width: 100%;
    }
    .btn_post_before a,
    .btn_post_after a {
      margin: auto;
      background: none;
      color: #1D96C2;
    }
    .btn_post_list {
      width: 16.4rem;
    }
    .btn_post_list a {
      line-height: 6.3rem;
      border-radius: 3.15rem;
    } 
    .btn_post_before a,
    .btn_post_after a,
    .btn_post_list a {
      font-size: 1.8rem;
    }
    .btn_front {
      width: 18rem;
      line-height: 4rem;
      border-radius: 2rem;
      font-size: 1.4rem;
    }
    .btn_flogo {
      width: 21.5rem;
    }
    .btn_to_top {
      width: 4rem;
      height: 4rem;
      right: 0;
      top: 0;
    }
    .btn_line img {
      content: url(img/btn_line_sp.png);
    }
    .btn_mail img {
      content: url(img/btn_mail_sp.png);
    }
    .btn_phone img {
      content: url(img/btn_phone_sp.png);
    }
     /*-----------header, footer----------*/
    .globNaviCheck, .globNaviIcon {
      display: block;
    }
    .l_header {
      padding: 0 6rem 0 2rem;
      height: 6.2rem;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
    }
     .globNavi  {
        display: flex;
        justify-content: space-between;
        align-items: center;
       position: static;
       -webkit-user-select: none;
       flex-wrap: wrap;
       margin-top: 1rem;
     }
     .globNaviCheck {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       top: 0;
       opacity: 0;
       width: 100%;
       height: 100%;
       z-index: 101;
       -webkit-touch-callout: none;
       cursor: pointer;
     }
     .globNaviIcon {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       position: relative;
       z-index: 100;
       width: 3rem;
     }
     .globNaviIcon>span {
       background: #1EB3EA;
       height:2px;
       display: block;
       width: 100%;
       border-radius: 0.3rem;
       transform-origin: 0 0 ;
       transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
     }
     .globNaviIcon>span:nth-child(3)  {
       transform-origin: 100% 0;
     }
     .globNaviIcon>span:not(:first-child) {
       margin-top: 0.8rem;
     }
     .globNaviCheck:checked ~ .globNaviIcon span {
       opacity: 1;
       transform: rotate(45deg) translate(0.6rem, -0.2rem);
     }
     .globNaviCheck:checked ~ .globNaviIcon>span:nth-child(2) {
       transform: scale(0, 0);
     }
     .globNaviCheck:checked ~ .globNaviIcon>span:nth-child(3) {
       transform: rotate(-45deg) translate(1rem, -1.5rem);
     }
     /*
      * Make this absolute positioned
      * at the top left of the screen
      */
     .globNaviMenu
     {    
        position: fixed;
        margin: 0;
        padding: 8rem 3rem;
        width: 100%;
        bottom: 0;
        z-index: 100;
        overflow: auto;
        background: none;
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(100%, 0);
        transition: transform 0.1s cubic-bezier(0.77,0.2,0.05,1.0);
        right: 0;
        top: 6.2rem;
     }
     .globNaviCheck:checked ~ .globNaviMenu {
        transform: none;
        z-index: 99;
        display: block;
        background: #1D96C2;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 5rem;
        flex-direction: column;
        padding: 10rem 0;
     }
     .globNavi {
      top: 2rem;
      right: 2rem;
        height: auto;
        z-index: 100;
        width: auto;
        position: fixed;
        padding: 0;
        margin: 0;
     }
     .globNaviMenu>li:not(:first-child) {
      border-left: none;
     }
     .globNaviMenu>li {
      margin-right: 0;
     }
     .globNaviMenu>li a {
      width: 100%;
      display: block;
      text-align: center;
      margin-top: 0;
      padding-bottom: 1.85rem;
     }
     .globNaviMenu>li:not(:first-child) a {
      padding-top: 1.95rem;
     }
     .globNaviMenu>li:hover ul, .globNaviMenu>li>ul:hover {
      display: none;
     }
     .globNaviMenu>li>ul{
      position: relative;
      top: 0;
     }
     .globNaviMenu>li {
      display: block;
      text-align: center;
      padding: 0;
     }
     .globNaviMenu>li>a {
      background: none;
      color: white;
      display: inline-block;
      line-height: 1.5;
      font-size: 2rem;
     }
     .l_header .globNaviControls,
     .l_header .globNaviControls label,
     .l_header .globNaviControls p {
      display: block;
      background: none;
     }
     .l_header .globNaviControls {
      padding: 0;
      margin-top: 4rem;
     }
     .globNaviControls label {
      color: white;
      font-size: 1.4rem;
      text-align: center;
      font-weight: 700;
      display: block;
     }
     .globNaviControls p {
      color: white;
      font-size: 1.2rem;
      text-align: center;
      display: block;
     }
     .globNaviControls li {
      margin: 0;
     }
     .globNaviControls ul {
      margin-top: 2rem;
     }
     .globNaviControls li a {
      width: 12rem;
     }
    .l_footer {
      padding: 4rem 0;
    }
    .footerInfo {
      padding: 0;
      display: block;
    }
    .btn_flogo {
      width: 30rem;
      margin: auto;
      display: block;
    }
    .footerLogo p {
      font-size: 1.6rem;
      margin-top: 1rem;
      text-align: center;
    }
    .footerNav {
      width: 100%;
      margin-top: 1rem;
      max-height: 10rem;
    }
    .footerNav li {
      margin-bottom: 0.5rem;
    }
    .footerDetail {
      margin-top: 1rem;
      padding-top: 1rem;
    }
    .footerDetail p {
      font-size: 1.4rem;
    }
  }