@charset "utf-8";

/* --------------------------------

  html, body

-------------------------------- */

  html,
  body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  html {
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
         -o-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
  }

  body {
    min-width: 320px;
    min-height: 480px;
    color: #333;
    text-align: left;
    font: 14px/1.5 "メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    background: #fff;
  }

/* --------------------------------

  wrapper

-------------------------------- */

  .wrapper {
    background: #fff url(../img/base/bg.png) repeat 50% 0;
  }

@media screen and (min-width: 1001px) {

  .wrapper {
    background-attachment: fixed;
  }

}

/* --------------------------------

  header

-------------------------------- */

  .header {
    position: relative;
    background: #fff url(../img/base/main.png) center;
    background-size: 800px auto;
  }

  .header .inner {
    margin-bottom: 180px;
    padding: 30px 0 0;
  }

@media screen and (min-width: 801px) {

  .header {
    background: #fff;
  }

  .header .inner {
    height: 180px;
    margin-bottom: 330px;
    padding: 0;
  }

}

@media screen and (min-width: 1001px) {

  .header .inner {
    margin-bottom: 310px;
  }

}

/* ロゴ */

  .header-logo {
    width: 270px;
    margin: auto;
    text-align: center;
  }

  .header-logo-text {
    display: block;
    margin: 5px 0 0;
    font-size: 11px;
    font-weight: bold;
  }

@media screen and (min-width: 801px) {

  .header-logo {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }

  .header-logo-text {
    margin: 10px 0 0;
  }

}

@media screen and (min-width: 1001px) {

  .header-logo {
    width: 300px;
  }

}

/* 住所・電話番号 */

  .header-tel-add {
    margin: 1em auto;
    text-align: center;
  }

  .header-tel.tel-num {
    display: inline-block;
    vertical-align: top;
    padding: 0 0 0 50px;
    font-size: 1.9em;
    line-height: 1.1;
  }

  .header-tel.tel-num:before {
    top: -5px;
    width: 45px;
    height: 45px;
  }

  .header-tel-text {
    display: block;
    font-size: 11px;
  }

@media screen and (min-width: 801px) {

  .header-tel-add {
    display: block;
    position: absolute;
    margin: 0;
    text-align: left;
  }

}

@media screen and (min-width: 801px) and (max-width: 1000px) {

  .header-tel-add {
    top: 25%;
    right: 15px;
  }

}

@media screen and (min-width: 1001px) {

  .header-tel-add {
    top: 25%;
    right: 0;
  }

}

/* 子供と風船 */

  .header-info {
    position: relative;
    width: 230px;
    height: 162px;
    margin: auto;
    background: url(../img/base/kids.png) no-repeat;
  }

  .header-info-1 {
    display: table;
    position: absolute;
    top: 20px;
    left: 0;
    width: 85px;
    height: 85px;
    padding: 0 .5em;
  }

  .header-info-2 {
    display: table;
    position: absolute;
    top: 0;
    left: 68px;
    width: 90px;
    height: 90px;
    padding: 0 1em;
  }

  .header-info-3 {
    display: table;
    position: absolute;
    top: 32px;
    left: 158px;
    width: 70px;
    height: 70px;
  }

  .header-info strong {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.8em;
    color: #fff;
    font-weight: normal;
    line-height: 1.0;
    text-align: center;
  }

@media screen and (max-width: 800px) {

  .header-info {
    margin: -16px auto -16px;
    -webkit-transform: scale(.8);
            transform: scale(.8);
  }

}

@media screen and (min-width: 801px) {

  .header-info {
    position: absolute;
    bottom: 0;
    left: 10px;
  }

}

/* --------------------------------

  nav

-------------------------------- */


/* menu.cssを参照 */


/* --------------------------------

  main

-------------------------------- */

  .main {
    display: block;
    position: relative;
    padding: 3em 1em 10em;
    background: #fff url(../img/base/main.png) repeat-y 50% 0;
  }

@media screen and (max-width: 1030px) {

  .main-area {
    margin: 0 0 5em;
  }

}

@media screen and (min-width: 1031px) {

  .main {
    padding: 100px 0 200px;
    background-attachment: fixed;
  }

  .main-area {
    float: left;
    width: 700px;
  }

  .side-area {
    float: right;
    width: 290px;
  }

}

/* --------------------------------

  footer

-------------------------------- */

  .footer {
    position: absolute;
    width: 100%;
    height: 80px;
    margin: -100px 0 0;
    border-bottom: 1px solid #ff9db7;
  }

/* コピーライト */

  .copy {
    position: absolute;
    top: 30%;
    right: 1.5rem;
    max-width: 50%;
    color: #fe2f67;
    font-size: .9em;
    text-align: center;
  }

  .copy span {
    display: block;
  }

  .copy span:first-child {
    display: none;
  }

@media screen and (min-width: 1001px) {

  .copy {
    top: -3px;
    left: 50%;
  }

  .copy span,
  .copy span:first-child {
    display: inline;
  }

}

/* ページトップ */

  .pagetop {
    display: block;
    position: relative;
    left: -100px;
    width: 100px;
    height: 80px;
    margin: auto;
    color: #fe2f67;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background: url(../img/base/pagetop.png) no-repeat bottom;
  }

  .pagetop:hover {
    color: #fe2f67;
    text-decoration: none;
  }

  .icon-arrow-up {
    display: block;
    position: absolute;
    top: 35px;
    right: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin: auto;
    background: url(../img/base/plane.png) no-repeat center;
    background-size: cover;
  }

@media screen and (min-width: 1001px) {

  .icon-arrow-up {
    top: 35px;
  }

  .pagetop:hover .icon-arrow-up {
    top: 60px;
    animation: acrobat 1.5s linear 2;
  }

}

@keyframes acrobat {

    0% { transform: rotate(35deg) translate(0px,0px);}
   10% { transform: rotate(25deg) translate(10px,-10px);}
   20% { transform: rotate( 5deg) translate(20px,-20px);}
   30% { transform: rotate(-15deg) translate(30px,-20px);}
   40% { transform: rotate(-35deg) translate(40px,-20px);}
   50% { transform: rotate(-65deg) translate(50px,-10px);}
   60% { transform: rotate(-105deg) translate(50px,10px);}
   70% { transform: rotate(-165deg) translate(30px,40px);}
   80% { transform: rotate(-205deg) translate(10px,40px);}
   90% { transform: rotate(-235deg) translate(0px,20px);}
  100% { transform: rotate(-255deg) translate(0px,0px);}

}

/* --------------------------------

  print

-------------------------------- */

@media print {

  html,
  body{
    background: none;
  }

}