@charset "UTF-8";
/*******************************
common
*******************************/
* {
  box-sizing: border-box; }

html {
  overflow-y: scroll; }

body {
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative; }
  @media screen and (max-width: 768px) {
    body {
      font-size: 3.5vw; } }

.pc {
  display: block; }
  @media screen and (max-width: 768px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 768px) {
    .sp {
      display: block; } }

main {
  padding-top: 90px; }
  @media screen and (max-width: 768px) {
    main {
      padding-top: 60px; } }

img {
  vertical-align: top;
  max-width: 100%; }

a {
  transition: all .6s;
  text-decoration: none;
  color: inherit; }
  a:hover {
    opacity: .6; }

ul li {
  list-style-type: none; }

.wrap {
  width: 1200px;
  max-width: 93.5%;
  margin: 0 auto; }

/*******************************
header
*******************************/
header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%; }
  header .wrap02 {
    position: relative; }
    header .wrap02::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(0.5em);
      z-index: -1; }
  header .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 768px) {
      header .wrap {
        max-width: 100%;
        margin: 0 0 0 3.25%; } }
    header .wrap #logo {
      width: 12%; }
      @media screen and (max-width: 768px) {
        header .wrap #logo {
          width: 25%; } }
    header .wrap #contact {
      width: 40%;
      background: #284FB8;
      display: flex;
      font-weight: 500; }
      @media screen and (max-width: 1200px) {
        header .wrap #contact {
          width: 50%; } }
      @media screen and (max-width: 768px) {
        header .wrap #contact {
          width: 70%; } }
      header .wrap #contact .icon01 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 5em;
        height: 5em;
        background: #F6F740;
        color: #333; }
        @media screen and (max-width: 768px) {
          header .wrap #contact .icon01 {
            font-size: 80%; } }
        header .wrap #contact .icon01 strong {
          font-size: 1.5em;
          margin-top: -1.25em;
          color: #F71735; }
      header .wrap #contact ul {
        display: flex;
        width: calc(100% - 5em);
        border-right: 1px solid #fff; }
        header .wrap #contact ul li {
          width: 50%;
          border-left: 1px solid #fff; }
          header .wrap #contact ul li.line a {
            background: #06A77D; }
          header .wrap #contact ul li.mail a {
            background: #ED6A5A; }
          header .wrap #contact ul li a {
            display: flex;
            background: #284FB8;
            color: #fff;
            height: 5em;
            justify-content: center;
            align-items: center;
            position: relative;
            font-weight: 700; }
            @media screen and (max-width: 768px) {
              header .wrap #contact ul li a {
                height: 4.5em;
                font-size: 0.8em;
                line-height: 1.3;
                white-space: nowrap; } }
            header .wrap #contact ul li a .icon02 {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
              width: 3.5em;
              height: 3.5em;
              border-radius: 100%;
              background: #fff;
              color: #333;
              margin-right: 0.25em; }
              @media screen and (max-width: 768px) {
                header .wrap #contact ul li a .icon02 {
                  font-size: 80%; } }
              header .wrap #contact ul li a .icon02 img {
                width: 2.5em; }

/*******************************
footer
*******************************/
footer {
  border-top: 1px solid #333;
  padding: 1.5em 0 6em;
  margin-top: 5em; }
  @media screen and (max-width: 768px) {
    footer {
      padding-bottom: 10em; } }
  footer .txt01 {
    text-align: center;
    margin-bottom: 2em; }
  footer #copyright {
    text-align: center; }
    footer #copyright small {
      font-size: 75%; }

#tracking {
  position: fixed;
  bottom: 40%;
  right: 0;
  width: 12em;
  font-size: 1.125em;
  z-index: 1500; }
  @media screen and (max-width: 768px) {
    #tracking {
      bottom: 0;
      width: 95%; } }
  #tracking .btn01 {
    border: 1px solid #fff;
    background: #284FB8;
    color: #fff; }
    #tracking .btn01 dt {
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 87.5%; }
      @media screen and (max-width: 768px) {
        #tracking .btn01 dt {
          font-size: 112.5%; } }
      #tracking .btn01 dt .icon {
        background: #F6F740;
        color: #000;
        padding: 0.75em 0.5em;
        width: 6em;
        white-space: nowrap; }
        @media screen and (max-width: 768px) {
          #tracking .btn01 dt .icon {
            width: 50%;
            text-align: center;
            padding: 0; } }
        #tracking .btn01 dt .icon strong {
          color: #F71735; }
      #tracking .btn01 dt .txt {
        width: calc(100% - 6em);
        text-align: center;
        white-space: nowrap; }
        @media screen and (max-width: 768px) {
          #tracking .btn01 dt .txt {
            width: 50%; } }
    @media screen and (max-width: 768px) {
      #tracking .btn01 dd ul {
        display: flex; } }
    #tracking .btn01 dd ul li {
      border-top: 1px solid #fff; }
      @media screen and (max-width: 768px) {
        #tracking .btn01 dd ul li {
          width: 50%; } }
      #tracking .btn01 dd ul li a {
        display: flex;
        background: #284FB8;
        color: #fff;
        font-weight: 700;
        height: 4.5em;
        justify-content: center;
        align-items: center;
        padding-left: 1.5em;
        position: relative; }
        @media screen and (max-width: 768px) {
          #tracking .btn01 dd ul li a {
            height: 4.5em;
            padding: 0; } }
        #tracking .btn01 dd ul li a .icon {
          position: absolute;
          top: 50%;
          left: -1.5em;
          transform: translate(0, -50%);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          width: 4em;
          height: 4em;
          border-radius: 100%;
          background: #fff;
          color: #333;
          font-size: 0.8em;
          overflow: hidden; }
          #tracking .btn01 dd ul li a .icon strong {
            font-size: 1.5em;
            margin-top: -1.25em; }
        #tracking .btn01 dd ul li a .txt {
          font-weight: 700; }
          @media screen and (max-width: 768px) {
            #tracking .btn01 dd ul li a .txt {
              font-size: 137.5%; } }
      #tracking .btn01 dd ul li.line a {
        background: #06A77D; }
        #tracking .btn01 dd ul li.line a .icon img {
          width: 2.75em; }
      #tracking .btn01 dd ul li.mail a {
        background: #ED6A5A; }
        #tracking .btn01 dd ul li.mail a .icon img {
          width: 2.75em; }

/*******************************
underlayer
*******************************/
#breadcrumbList {
  background: #fafaf9;
  padding: 0.5em; }
  #breadcrumbList ul {
    width: 1200px;
    max-width: calc(100% - 3rem);
    margin: 0 auto;
    display: flex; }
    #breadcrumbList ul li {
      font-size: 81.25%; }
      #breadcrumbList ul li:not(:last-child)::after {
        content: "＞";
        margin: 0 0.35em;
        opacity: 0.5; }
      #breadcrumbList ul li a {
        text-decoration: underline; }