@-webkit-keyframes border {
  0% {
    width: 0; }
  100% {
    width: 100%; } }
@keyframes border {
  0% {
    width: 0; }
  100% {
    width: 100%; } }
@-webkit-keyframes cover {
  0% {
    background: #5db5e7; }
  95% {
    background: #5db5e7; }
  100% {
    background: #fff; } }
@-webkit-keyframes cover {
  0% {
    background: #5db5e7; }
  95% {
    background: #5db5e7; }
  100% {
    background: #fff; } }
#index {
  text-align: center; }
  #index img {
    vertical-align: bottom; }

.fade {
  transition: all 1s ease; }

.scale {
  transform: scale(1.1); }

.main {
  position: relative;
  width: 100%;
  background-color: #5db5e7;
  z-index: 11;
  background-size: cover;
  overflow: hidden; }
  .main h1 {
    text-align: center;
    transition-delay: 5s;
    font-size: 2.4rem; }
  .main-cover {
    height: 100%;
    width: 100%;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: cover 7s ease-in-out forwards;
    animation: cover 7s linear forwards;
    transition-delay: 6s; }
  .main-deco {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    z-index: 11;
    background: #f5ef71;
    width: 40px;
    height: 40px;
    border-radius: 100%; }
  .main-content {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 11;
    max-width: 100%; }
    @media screen and (min-width: 768px) {
      .main-content {
        width: 500px; } }
    .main-content .logo {
      margin-bottom: 25px; }
      .main-content .logo img {
        transition-delay: 3.5s;
        margin-bottom: 20px; }
        @media screen and (max-width: 768px) {
          .main-content .logo img {
            width: 180px; } }
      .main-content .logo .border {
        width: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0);
        animation: border 3s linear forwards;
        transition-delay: 5s; }
    .main-content nav {
      transition-delay: 5s;
      width: 100%;
      margin-top: 60px; }
      .main-content nav ul {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        @media screen and (min-width: 768px) {
          .main-content nav ul {
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center; } }
        .main-content nav ul li {
          text-align: center;
          margin: 0 15px; }
          @media screen and (max-width: 767px) {
            .main-content nav ul li {
              width: calc(50% - 30px); }
              .main-content nav ul li a {
                padding: 10px 15; } }
          .main-content nav ul li a {
            color: #000;
            display: inline-block;
            font-size: 1.6rem; }
    .main-content-shop {
      transition-delay: 4.5s; }
      .main-content-shop p {
        font-size: 3.0rem;
        font-weight: 300; }
        @media screen and (max-width: 767px) {
          .main-content-shop p {
            font-size: 1.8rem; } }
      .main-content-shop .itime {
        color: #f0ff01; }
      .main-content-shop .tel {
        margin-bottom: 30px; }
        .main-content-shop .tel a {
          display: inline-block;
          padding: 10px;
          font-size: 2.4rem;
          font-weight: 300;
          border: 1px solid #fff; }

.catch {
  text-align: center;
  font-family: "Sawarabi Mincho";
  margin-bottom: 70px; }

section {
  padding: 120px 0; }
  section h2 {
    text-align: center;
    font-weight: 600;
    font-size: 3.5rem;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 70px;
    padding-bottom: 70px;
    position: relative; }
    section h2 span {
      display: block;
      font-family: "Mplus 1p";
      font-size: 1.4rem;
      font-weight: 400; }
    section h2:before {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      content: "";
      margin: auto;
      width: 50px;
      height: 1px;
      background: #000; }
  section p {
    font-size: 1.6rem; }

#philosophy {
  z-index: 10;
  background: #f5f5f5; }

#service {
  background: #fff;
  z-index: 9; }

.service-list {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .service-list li {
    width: calc(50% - 30px);
    margin: 0 15px 30px;
    box-shadow: 0 0 5px 2px rgba(189, 189, 189, 0.5);
    background: #fff; }
    @media screen and (max-width: 767px) {
      .service-list li {
        width: 100%;
        margin: 0 auto 30px; } }
  .service-list p {
    padding: 20px 30px; }

#company {
  z-index: 8;
  background: #f5f5f5; }
  #company p {
    margin-bottom: 50px; }
  #company dl {
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    border-bottom: 1px solid #f5f5f5; }
    #company dl dt,
    #company dl dd {
      padding: 10px 15px; }
    #company dl dt {
      width: 30%;
      font-weight: 500; }
    #company dl dd {
      width: 70%;
      padding-left: 20px; }
      #company dl dd .dt {
        font-weight: 500; }

#contact {
  z-index: 7;
  text-align: center; }
  #contact p {
    margin: 50px 0; }

.cssload-dots {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  outline: 1px solid red;
  filter: url(#goo); }

.cssload-dot {
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0; }

.cssload-dot:before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 49px;
  background: white;
  position: absolute;
  left: 50%;
  transform: translateY(0);
  margin-left: -17.5px;
  margin-top: -17.5px; }

.cssload-dot:nth-child(5):before {
  z-index: 100;
  width: 44.5px;
  height: 44.5px;
  margin-left: -21.75px;
  margin-top: -21.75px;
  animation: cssload-dot-colors 4.6s ease infinite; }

.cssload-dot:nth-child(1) {
  animation: cssload-dot-rotate-1 4.6s 0s linear infinite; }

.cssload-dot:nth-child(1):before {
  background-color: white;
  animation: cssload-dot-move 4.6s 0s ease infinite; }

.cssload-dot:nth-child(2) {
  animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite; }

.cssload-dot:nth-child(2):before {
  background-color: white;
  animation: cssload-dot-move 4.6s 1.15s ease infinite; }

.cssload-dot:nth-child(3) {
  animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite; }

.cssload-dot:nth-child(3):before {
  background-color: white;
  animation: cssload-dot-move 4.6s 2.3s ease infinite; }

.cssload-dot:nth-child(4) {
  animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite; }

.cssload-dot:nth-child(4):before {
  background-color: white;
  animation: cssload-dot-move 4.6s 3.45s ease infinite; }

@keyframes cssload-dot-move {
  0% {
    transform: translateY(0); }
  18%, 22% {
    transform: translateY(-68px); }
  40%, 100% {
    transform: translateY(0); } }
@keyframes cssload-dot-colors {
  0% {
    background-color: white; }
  25% {
    background-color: rgba(255, 255, 255, 0.97); }
  50% {
    background-color: rgba(255, 255, 255, 0.97); }
  75% {
    background-color: white; }
  100% {
    background-color: white; } }
@keyframes cssload-dot-rotate-1 {
  0% {
    transform: rotate(-105deg); }
  100% {
    transform: rotate(270deg); } }
@keyframes cssload-dot-rotate-2 {
  0% {
    transform: rotate(165deg); }
  100% {
    transform: rotate(540deg); } }
@keyframes cssload-dot-rotate-3 {
  0% {
    transform: rotate(435deg); }
  100% {
    transform: rotate(810deg); } }
@keyframes cssload-dot-rotate-4 {
  0% {
    transform: rotate(705deg); }
  100% {
    transform: rotate(1080deg); } }