@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
ヘッダー
---------------------------------------------------------------------------------------------------------------------
*/
#header {
  position: relative; }
  #header #pc-nav {
    display: none; }
    @media (min-width: 1110px) {
      #header #pc-nav {
        background-color: rgba(255, 255, 255, 0.8);
        max-width: 1600px;
        width: 95%;
        margin: auto;
        position: fixed;
        top: 20px;
        left: 0;
        right: 0;
        z-index: 100;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        transition: .5s; } }
    #header #pc-nav.is-animation {
      top: 10px;
      height: 60px;
      background-color: white; }
      #header #pc-nav.is-animation ul .mega-menu {
        top: 65px; }
    #header #pc-nav .headerlogo {
      margin-left: 20px; }
      @media (min-width: 1250px) {
        #header #pc-nav .headerlogo {
          margin-left: 30px; } }
      #header #pc-nav .headerlogo a {
        display: flex;
        align-items: center; }
        #header #pc-nav .headerlogo a img {
          width: 110px; }
        #header #pc-nav .headerlogo a .txt {
          margin-left: 10px;
          color: #7D7775; }
          @media (min-width: 1250px) {
            #header #pc-nav .headerlogo a .txt {
              display: flex;
              align-items: center; } }
          #header #pc-nav .headerlogo a .txt h4 {
            font-size: 0.7em;
            margin-right: 5px; }
          #header #pc-nav .headerlogo a .txt h3 {
            font-size: 1.125em; }
    #header #pc-nav ul {
      list-style: none;
      display: flex;
      align-items: center;
      margin-right: 20px; }
      @media (min-width: 1250px) {
        #header #pc-nav ul {
          margin-right: 30px; } }
      #header #pc-nav ul li {
        transition: .5s;
        margin-right: 20px; }
        #header #pc-nav ul li:nth-child(2), #header #pc-nav ul li:nth-child(4), #header #pc-nav ul li:nth-child(5) {
          margin-right: 35px; }
        #header #pc-nav ul li a {
          transition: .5s;
          text-decoration: none; }
          #header #pc-nav ul li a p {
            position: relative;
            font-size: 0.8em;
            font-weight: bold;
            color: #000;
            padding: 20px 0; }
            @media (min-width: 1300px) {
              #header #pc-nav ul li a p {
                font-size: 0.9em; } }
            #header #pc-nav ul li a p.has-child::before {
              content: '';
              position: absolute;
              right: -12px;
              top: -1px;
              bottom: 0;
              margin: auto;
              width: 6px;
              height: 6px;
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              transform: rotate(135deg); }
        #header #pc-nav ul li:hover a p {
          color: #0BB3B1; }
          #header #pc-nav ul li:hover a p.has-child::before {
            border-top: 1px solid #0BB3B1;
            border-right: 1px solid #0BB3B1; }
        #header #pc-nav ul li:hover .mega-menu {
          opacity: 1;
          visibility: visible;
          transform: translateX(-50%) translateY(0);
          z-index: 1000; }
      #header #pc-nav ul .mega-menu {
        position: absolute;
        top: 75px;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        width: 100vw;
        background-color: white;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
        z-index: -1000;
        width: 100%;
        border-radius: 10px; }
        #header #pc-nav ul .mega-menu .mega-menu-content {
          display: flex;
          justify-content: space-around;
          padding: 60px 0;
          gap: 40px;
          max-width: 1200px;
          margin: 0 auto; }
          #header #pc-nav ul .mega-menu .mega-menu-content ul {
            display: block; }
            #header #pc-nav ul .mega-menu .mega-menu-content ul li {
              margin: 0 0 15px 0; }
              #header #pc-nav ul .mega-menu .mega-menu-content ul li:last-child {
                margin: 0; }
              #header #pc-nav ul .mega-menu .mega-menu-content ul li a {
                font-size: 1.0em;
                font-weight: 500;
                font-feature-settings: "palt";
                letter-spacing: 0.04em;
                transition: .5s;
                position: relative; }
                #header #pc-nav ul .mega-menu .mega-menu-content ul li a:hover {
                  color: #0BB3B1; }
                  #header #pc-nav ul .mega-menu .mega-menu-content ul li a:hover::before {
                    background-color: #0BB3B1;
                    transform: scale(2); }
                #header #pc-nav ul .mega-menu .mega-menu-content ul li a::before {
                  content: "";
                  position: absolute;
                  left: -12px;
                  top: 2px;
                  bottom: 0;
                  display: flex;
                  margin: auto;
                  width: 5px;
                  height: 5px;
                  background-color: #000;
                  border-radius: 50%;
                  transition: .5s; }
  #header .sp-logo {
    position: absolute;
    top: 10px;
    left: -10px;
    z-index: 10; }
    @media (min-width: 768px) {
      #header .sp-logo {
        display: none; } }
    #header .sp-logo .headerlogo {
      margin-left: 20px; }
      #header .sp-logo .headerlogo a {
        display: flex;
        align-items: center; }
        #header .sp-logo .headerlogo a img {
          width: 110px; }
        #header .sp-logo .headerlogo a .txt {
          margin-left: 10px;
          color: #7D7775; }
          #header .sp-logo .headerlogo a .txt h4 {
            font-size: 0.6em;
            margin-right: 5px; }
          #header .sp-logo .headerlogo a .txt h3 {
            font-size: 1.0em; }

#contact {
  position: relative;
  background-color: #E96087;
  padding: 50px 0;
  margin: 100px auto 0;
  max-width: 1600px;
  width: 95%;
  border-radius: 15px; }
  @media (min-width: 1024px) {
    #contact {
      border-radius: 30px;
      width: 98%; } }
  @media (min-width: 1200px) {
    #contact {
      padding: 80px 0;
      margin: 140px auto 0; } }
  #contact .back-ue {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 340px;
    width: 40%; }
    @media (min-width: 768px) {
      #contact .back-ue {
        width: 25%; } }
  #contact .contact-in {
    color: #fff; }
    #contact .contact-in .txt {
      text-align: center; }
      #contact .contact-in .txt .title {
        position: relative; }
        #contact .contact-in .txt .title h3 {
          font-family: "Outfit", sans-serif;
          font-size: 4.5em;
          color: #E24471;
          line-height: 0.8em; }
          @media (min-width: 768px) {
            #contact .contact-in .txt .title h3 {
              font-size: 6.0em; } }
          @media (min-width: 1250px) {
            #contact .contact-in .txt .title h3 {
              font-size: 8.0em; } }
        #contact .contact-in .txt .title h4 {
          font-size: 0.9em;
          position: absolute;
          top: 20px;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center; }
          @media (min-width: 1024px) {
            #contact .contact-in .txt .title h4 {
              font-size: 1.125em;
              top: 30px; } }
      #contact .contact-in .txt p {
        font-size: 0.8em;
        margin-top: 15px; }
        @media (min-width: 1024px) {
          #contact .contact-in .txt p {
            font-size: 1.0em;
            margin-top: 30px; } }
    #contact .contact-in ul {
      margin-top: 40px; }
      @media (min-width: 768px) {
        #contact .contact-in ul {
          display: flex;
          justify-content: center;
          align-items: center; } }
      #contact .contact-in ul li {
        margin-bottom: 20px; }
        #contact .contact-in ul li:first-child {
          text-align: center; }
          @media (min-width: 768px) {
            #contact .contact-in ul li:first-child {
              margin: 0 40px 0 0; } }
          #contact .contact-in ul li:first-child .tel {
            display: flex;
            align-items: center;
            justify-content: center; }
            #contact .contact-in ul li:first-child .tel img {
              width: 24px; }
              @media (min-width: 1024px) {
                #contact .contact-in ul li:first-child .tel img {
                  width: 27px; } }
            #contact .contact-in ul li:first-child .tel h3 {
              font-family: "Outfit", sans-serif;
              font-size: 2.2em; }
              @media (min-width: 1024px) {
                #contact .contact-in ul li:first-child .tel h3 {
                  font-size: 2.6em; } }
        #contact .contact-in ul li:last-child {
          margin-bottom: 0;
          display: flex;
          justify-content: center; }
          @media (min-width: 768px) {
            #contact .contact-in ul li:last-child {
              margin: 0 0 0 40px; } }
  #contact .back-shita {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    max-width: 300px; }
    @media (min-width: 768px) {
      #contact .back-shita {
        width: 25%; } }

#footer {
  background-color: #F7F7F7;
  position: relative;
  padding: 60px 0 50px; }
  @media (min-width: 768px) {
    #footer {
      padding: 100px 0 20px; } }
  @media (min-width: 1024px) {
    #footer {
      padding: 140px 0 20px; } }
  #footer .footer-in {
    max-width: 1600px;
    width: 92%;
    margin: auto; }
    @media (min-width: 768px) {
      #footer .footer-in {
        display: flex; } }
    @media (min-width: 1200px) {
      #footer .footer-in {
        display: block; } }
  @media (min-width: 768px) {
    #footer .info-menu {
      width: 440px; } }
  @media (min-width: 1024px) {
    #footer .info-menu {
      width: 500px; } }
  @media (min-width: 1200px) {
    #footer .info-menu {
      display: flex;
      margin-right: -50px;
      width: auto; } }
  @media (min-width: 768px) {
    #footer .info-menu .info {
      padding-right: 5%; } }
  #footer .info-menu .info .logo {
    text-align: center; }
    @media (min-width: 768px) {
      #footer .info-menu .info .logo {
        text-align: left; } }
    #footer .info-menu .info .logo a img {
      width: 160px; }
      @media (min-width: 768px) {
        #footer .info-menu .info .logo a img {
          width: 180px; } }
    #footer .info-menu .info .logo h2 {
      font-size: 0.85em;
      margin-top: 10px; }
      @media (min-width: 768px) {
        #footer .info-menu .info .logo h2 {
          font-size: 1.0em;
          margin-top: 20px; } }
  #footer .info-menu .info .office {
    margin-top: 40px; }
    @media (min-width: 768px) {
      #footer .info-menu .info .office {
        margin-top: 40px; } }
    #footer .info-menu .info .office .place {
      display: flex;
      margin-bottom: 20px; }
      @media (min-width: 768px) {
        #footer .info-menu .info .office .place {
          display: block; } }
      #footer .info-menu .info .office .place:last-child {
        margin-bottom: 0; }
      #footer .info-menu .info .office .place h3 {
        font-size: 0.85em;
        line-height: 1.4em;
        width: 100px; }
        @media (min-width: 768px) {
          #footer .info-menu .info .office .place h3 {
            width: auto; } }
        @media (min-width: 1024px) {
          #footer .info-menu .info .office .place h3 {
            font-size: 1.0em; } }
      #footer .info-menu .info .office .place ul {
        width: calc(100% - 100px); }
        @media (min-width: 768px) {
          #footer .info-menu .info .office .place ul {
            width: auto; } }
        #footer .info-menu .info .office .place ul li {
          font-size: 0.85em;
          line-height: 1.4em; }
          @media (min-width: 1024px) {
            #footer .info-menu .info .office .place ul li {
              font-size: 1.0em; } }
          #footer .info-menu .info .office .place ul li a {
            color: #000; }
  #footer .info-menu .info ul.sns {
    margin-top: 20px;
    display: flex;
    justify-content: center; }
    @media (min-width: 768px) {
      #footer .info-menu .info ul.sns {
        justify-content: flex-start; } }
    @media (min-width: 1024px) {
      #footer .info-menu .info ul.sns {
        margin-top: 40px; } }
    #footer .info-menu .info ul.sns li {
      margin-right: 10px; }
      #footer .info-menu .info ul.sns li:last-child {
        margin-right: 0; }
      #footer .info-menu .info ul.sns li a:hover {
        opacity: 0.8; }
      #footer .info-menu .info ul.sns li a img {
        width: 30px;
        transition: .5s; }
        @media (min-width: 768px) {
          #footer .info-menu .info ul.sns li a img {
            width: 34px; } }
  #footer .info-menu .f-menu {
    display: none; }
    @media (min-width: 1200px) {
      #footer .info-menu .f-menu {
        display: flex;
        margin-left: auto; } }
    #footer .info-menu .f-menu .f-menu-in {
      margin-bottom: 40px; }
      @media (min-width: 1024px) {
        #footer .info-menu .f-menu .f-menu-in {
          margin-bottom: 60px; } }
      #footer .info-menu .f-menu .f-menu-in:last-child {
        margin-bottom: 0; }
      #footer .info-menu .f-menu .f-menu-in .f-menu-box {
        width: 260px;
        padding-right: 50px; }
        @media (min-width: 1400px) {
          #footer .info-menu .f-menu .f-menu-in .f-menu-box {
            width: 320px; } }
        #footer .info-menu .f-menu .f-menu-in .f-menu-box:nth-child(n+2) {
          margin-top: 40px; }
        #footer .info-menu .f-menu .f-menu-in .f-menu-box h3 {
          font-size: 1.0em;
          font-weight: 700;
          border-bottom: 1px solid #C1C1C1;
          padding-bottom: 6px; }
          @media (min-width: 1024px) {
            #footer .info-menu .f-menu .f-menu-in .f-menu-box h3 {
              font-size: 1.125em; } }
        #footer .info-menu .f-menu .f-menu-in .f-menu-box ul {
          margin: 20px 0 0 0; }
          #footer .info-menu .f-menu .f-menu-in .f-menu-box ul li {
            margin-bottom: 10px;
            padding-left: 16px; }
            #footer .info-menu .f-menu .f-menu-in .f-menu-box ul li:last-child {
              margin-bottom: 0; }
            #footer .info-menu .f-menu .f-menu-in .f-menu-box ul li a {
              position: relative;
              font-size: 0.8em;
              font-feature-settings: "palt";
              letter-spacing: 0.06em;
              transition: .5s; }
              @media (min-width: 1024px) {
                #footer .info-menu .f-menu .f-menu-in .f-menu-box ul li a {
                  font-size: 0.9em; } }
              #footer .info-menu .f-menu .f-menu-in .f-menu-box ul li a:hover {
                color: #0BB3B1;
                font-weight: 500; }
                #footer .info-menu .f-menu .f-menu-in .f-menu-box ul li a:hover::before {
                  background-color: #0BB3B1;
                  transform: scale(2); }
              #footer .info-menu .f-menu .f-menu-in .f-menu-box ul li a::before {
                content: "";
                position: absolute;
                left: -12px;
                top: 2px;
                bottom: 0;
                display: flex;
                margin: auto;
                width: 3px;
                height: 3px;
                background-color: #000;
                border-radius: 50%;
                transition: .5s; }
  #footer .banner {
    margin-top: 80px; }
    @media (min-width: 768px) {
      #footer .banner {
        width: calc(100% - 440px);
        margin-top: 0; } }
    @media (min-width: 1024px) {
      #footer .banner {
        width: calc(100% - 500px); } }
    @media (min-width: 1200px) {
      #footer .banner {
        display: flex;
        align-items: center;
        width: 100%; } }
    @media (min-width: 1024px) {
      #footer .banner .banner-L {
        display: flex;
        align-items: center;
        justify-content: center; } }
    @media (min-width: 1200px) {
      #footer .banner .banner-L {
        width: 55%;
        justify-content: flex-start; } }
    @media (min-width: 1400px) {
      #footer .banner .banner-L {
        width: 50%; } }
    #footer .banner .banner-L ul.type1 {
      display: flex;
      justify-content: center; }
      @media (min-width: 1024px) {
        #footer .banner .banner-L ul.type1 {
          margin-right: 20px; } }
      #footer .banner .banner-L ul.type1 li {
        margin-right: 20px; }
        #footer .banner .banner-L ul.type1 li:last-child {
          margin-right: 0; }
        #footer .banner .banner-L ul.type1 li a {
          opacity: 0.8; }
          #footer .banner .banner-L ul.type1 li a img {
            width: auto;
            height: 90px;
            transition: .5s; }
            @media (min-width: 1600px) {
              #footer .banner .banner-L ul.type1 li a img {
                height: 110px; } }
    #footer .banner .banner-L ul.type2 {
      display: flex;
      justify-content: center;
      margin-top: 20px; }
      @media (min-width: 768px) {
        #footer .banner .banner-L ul.type2 {
          display: block;
          text-align: center; } }
      @media (min-width: 1024px) {
        #footer .banner .banner-L ul.type2 {
          margin-top: 0; } }
      @media (min-width: 1200px) {
        #footer .banner .banner-L ul.type2 {
          display: flex;
          margin-top: 10px; } }
      #footer .banner .banner-L ul.type2 li {
        margin-right: 20px; }
        @media (min-width: 768px) {
          #footer .banner .banner-L ul.type2 li {
            margin-right: 0; } }
        @media (min-width: 1200px) {
          #footer .banner .banner-L ul.type2 li {
            margin-right: 20px; } }
        #footer .banner .banner-L ul.type2 li:last-child {
          margin-right: 0; }
        #footer .banner .banner-L ul.type2 li a:hover {
          opacity: 0.8; }
        #footer .banner .banner-L ul.type2 li a img {
          width: 150px;
          transition: .5s; }
          @media (min-width: 768px) {
            #footer .banner .banner-L ul.type2 li a img {
              width: 180px; } }
          @media (min-width: 1600px) {
            #footer .banner .banner-L ul.type2 li a img {
              width: 200px; } }
    #footer .banner .banner-R {
      margin-top: 20px; }
      @media (min-width: 1200px) {
        #footer .banner .banner-R {
          width: 45%;
          margin-top: 0; } }
      @media (min-width: 1400px) {
        #footer .banner .banner-R {
          width: 50%; } }
      @media only screen and (min-width: 1024px) {
        #footer .banner .banner-R .o-4column .col-lg-4 {
          padding: 0 10px; }
        #footer .banner .banner-R .o-4column {
          margin: 0 -10px; } }
      #footer .banner .banner-R .banner-box {
        width: 100%;
        margin-bottom: 10px; }
        @media (min-width: 1024px) {
          #footer .banner .banner-R .banner-box {
            margin-bottom: 20px; } }
        @media (min-width: 1200px) {
          #footer .banner .banner-R .banner-box {
            margin-bottom: 0; } }
        #footer .banner .banner-R .banner-box a:hover {
          opacity: 0.8; }
        #footer .banner .banner-R .banner-box a img {
          border-radius: 5px;
          transition: .5s; }
          @media (min-width: 1024px) {
            #footer .banner .banner-R .banner-box a img {
              border-radius: 10px; } }
  #footer .copy {
    margin-top: 30px;
    text-align: center; }
    @media (min-width: 768px) {
      #footer .copy {
        text-align: left;
        margin: 60px 0 0 80px; } }
    @media (min-width: 1024px) {
      #footer .copy {
        display: flex; } }
    #footer .copy a {
      position: relative;
      font-size: 0.75em;
      line-height: 1.4em; }
      @media (min-width: 1024px) {
        #footer .copy a {
          font-size: 0.8em;
          margin-right: 10px; } }
      #footer .copy a::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 .copy a:hover::after {
        transform-origin: left top;
        transform: scale(1, 1); }
    #footer .copy p {
      font-size: 0.65em;
      line-height: 1.4em;
      margin-top: 6px; }
      @media (min-width: 1024px) {
        #footer .copy p {
          font-size: 0.8em;
          margin-top: 0; } }
