@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
ヘッダー
---------------------------------------------------------------------------------------------------------------------
*/
#header {
  position: fixed;
  z-index: 100;
  height: 0; }
  #header .header-logo {
    margin: 10px 0 0 10px; }
    @media (min-width: 768px) {
      #header .header-logo {
        margin: 20px 0 0 20px; } }
    #header .header-logo img {
      width: 200px; }
      @media (min-width: 768px) {
        #header .header-logo img {
          width: 270px; } }
  #header .openbtn {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #17ADAA;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    z-index: 1000;
    /*activeクラスが付与されると線が回転して×に*/ }
    @media (min-width: 768px) {
      #header .openbtn {
        top: 20px;
        right: 20px; } }
    #header .openbtn span {
      display: inline-block;
      transition: all .4s;
      /*アニメーションの設定*/
      position: absolute;
      left: 16px;
      height: 2px;
      border-radius: 2px;
      background: #fff;
      width: 45%; }
      #header .openbtn span:nth-child(1) {
        top: 18px; }
      #header .openbtn span:nth-child(2) {
        top: 27px; }
      #header .openbtn span:nth-child(3) {
        top: 37px; }
    #header .openbtn.active span:nth-of-type(1) {
      top: 22px;
      left: 21px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%; }
    #header .openbtn.active span:nth-of-type(2) {
      opacity: 0;
      /*真ん中の線は透過*/ }
    #header .openbtn.active span:nth-of-type(3) {
      top: 34px;
      left: 21px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%; }

#footer {
  background-color: #fff;
  position: relative;
  padding: 40px 0 40px;
  width: 100%;
  /* 左右いっぱいに伸びた横線 */ }
  #footer .footer-in {
    width: 90%;
    margin: auto; }
  #footer .heading {
    align-items: center;
    display: flex; }
    #footer .heading::before {
      background-color: #17ADAA;
      content: "";
      flex-grow: 1;
      height: 5px;
      margin-right: 15px; }
  #footer h2 {
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1.2em; }
  #footer .footer-line {
    margin-inline: auto; }
  #footer .logo {
    margin-top: 20px; }
    @media (min-width: 1024px) {
      #footer .logo {
        margin-top: 40px; } }
    #footer .logo img {
      width: 270px; }
  #footer .footer-menu {
    display: flex; }
    @media (min-width: 1024px) {
      #footer .footer-menu {
        float: right;
        margin-top: 30px; } }
    @media (min-width: 1180px) {
      #footer .footer-menu {
        margin-top: -30px; } }
    @media (min-width: 768px) {
      #footer .footer-menu ul {
        display: flex; }
        #footer .footer-menu ul:nth-child(2) {
          margin-left: 20px; } }
    #footer .footer-menu ul li {
      margin: 30px 10px 0 0; }
      @media (min-width: 768px) {
        #footer .footer-menu ul li {
          margin: 30px 30px 0 0; } }
      @media (min-width: 1024px) {
        #footer .footer-menu ul li {
          margin: 0 60px 0 0; } }
      @media (min-width: 1200px) {
        #footer .footer-menu ul li {
          margin: 0 80px 0 0; } }
      #footer .footer-menu ul li:last-child {
        margin-right: 0; }
      #footer .footer-menu ul li a {
        display: flex;
        align-items: center; }
      #footer .footer-menu ul li img {
        width: 20px;
        margin-right: 5px; }
      #footer .footer-menu ul li h3 {
        font-size: 1.0em;
        font-weight: bold;
        position: relative; }
        #footer .footer-menu ul li h3::after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: '';
          width: 100%;
          height: 1px;
          background: #000;
          transform: scale(0, 1);
          transform-origin: right top;
          transition: transform .3s; }
        #footer .footer-menu ul li h3:hover::after {
          transform-origin: left top;
          transform: scale(1, 1); }
      #footer .footer-menu ul li p {
        font-size: 0.8em;
        font-weight: lighter; }
      #footer .footer-menu ul li ul {
        display: block;
        margin: 15px 0 0 25px; }
        @media (min-width: 1024px) {
          #footer .footer-menu ul li ul {
            margin: 30px 0 0 25px; } }
        #footer .footer-menu ul li ul:nth-child(2) {
          margin-left: 25px; }
        #footer .footer-menu ul li ul li {
          margin: 0 0 10px 0; }
          #footer .footer-menu ul li ul li a p {
            font-weight: lighter;
            position: relative; }
            #footer .footer-menu ul li ul li a p::after {
              position: absolute;
              bottom: 0;
              left: 0;
              content: '';
              width: 100%;
              height: 1px;
              background: #000;
              transform: scale(0, 1);
              transform-origin: right top;
              transition: transform .3s; }
            #footer .footer-menu ul li ul li a p:hover::after {
              transform-origin: left top;
              transform: scale(1, 1); }
  #footer .sns-copy {
    clear: both;
    position: relative;
    padding-top: 40px; }
    #footer .sns-copy .sns {
      position: absolute;
      top: -40px;
      right: 5%; }
      @media (min-width: 768px) {
        #footer .sns-copy .sns {
          position: unset; } }
      #footer .sns-copy .sns ul {
        display: flex; }
        #footer .sns-copy .sns ul li:first-child {
          margin-right: 10px; }
        #footer .sns-copy .sns ul li a img {
          width: 32px;
          transition: 0.5s; }
          #footer .sns-copy .sns ul li a img:hover {
            opacity: 0.8; }
    #footer .sns-copy .copy-text {
      margin-top: -30px; }
      @media (min-width: 768px) {
        #footer .sns-copy .copy-text {
          display: flex;
          justify-content: flex-end; } }
      #footer .sns-copy .copy-text .copy-mune {
        display: flex; }
      #footer .sns-copy .copy-text a {
        margin-right: 20px; }
        #footer .sns-copy .copy-text a p {
          font-weight: lighter;
          position: relative; }
          #footer .sns-copy .copy-text a p::after {
            position: absolute;
            bottom: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            background: #000;
            transform: scale(0, 1);
            transform-origin: right top;
            transition: transform .3s; }
          #footer .sns-copy .copy-text a p:hover::after {
            transform-origin: left top;
            transform: scale(1, 1); }
      #footer .sns-copy .copy-text p {
        font-size: 0.9em;
        margin: 10px 0 0 0; }
        #footer .sns-copy .copy-text p.kari {
          color: #A5A5A5;
          margin-right: 20px; }