@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

/* --------------------------
 all
----------------------------- */

body{font-family: 'M PLUS Rounded 1c', sans-serif;color: #644536;background-color: #f85c82;}
* {box-sizing: border-box;margin: 0;padding: 0;}
::before , ::after {box-sizing: inherit;}

.mpr{transform:rotateZ(0.03deg);}

a{text-decoration: none;}
.hov img{ opacity:1; transition: all 0.4s;}
.hov:hover img{ opacity:0.7;}

.sp{ display:none;}
.pc{ display: block;}

@media screen and (max-width: 767px) {
  .hov:hover img{ opacity:1;}

  * img{ width: 100%;}

  .sp{ display: block;}
  .pc{ display:none;}
}

.c-text-smooth{
  transform:rotateZ(0.03deg);
}
/* --------------------------
 txt_line
----------------------------- */

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

.txt_line{width: 30px;height: 100%;position: fixed;top:0;left: 0;background-color: #6fd0fa;z-index: 3;}
.loop { position: relative;top: 0;left: 0;width: 30px;height: 100%;}
.loop img { width: 100%;height: auto;margin: 0;}


/* loop animation */

.loop img:first-child {
  -webkit-animation: loop 100s -50s linear infinite;
  animation: loop 100s -50s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.loop img + img {
  -webkit-animation: loop2 100s  linear infinite;
  animation: loop2 100s linear infinite;
}

@-webkit-keyframes loop {
  0% {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@keyframes loop {
  0% {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}

@-webkit-keyframes loop2 {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
  }
}

}

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

  .txt_line{width: 100%;height: 4vw;position: fixed;top:0;left: 0;background-color: #6fd0fa;z-index: 2;overflow: hidden;}
  .loop { position: relative;width: 100%;height: 4vw;display: flex;}
  .loop img { height: 100%;width: auto;margin: 0;will-change: transform;}

  /* loop animation */

  .loop img:first-child {
    -webkit-animation: loop-sp 90s -45s linear infinite;
    animation: loop-sp 90s -45s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loop img + img {
    -webkit-animation: loop2-sp 90s linear infinite;
    animation: loop2-sp 90s linear infinite;
  }

  @keyframes loop-sp {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @-webkit-keyframes loop2-sp {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

  @keyframes loop2-sp {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

}


/* --------------------------
 sidebar
----------------------------- */

@media screen and (min-width: 768px) {
  section.sidebar{width: 230px;height: 100vh; position: absolute; top:0; left:0; z-index: 2;margin-left: 30px;background-color: #f85c82;}
  .sidebarFixedOnScroll section.sidebar{ position: fixed; left:0; top:0;}
  .sideBar-fix-top .sidebar__inner{ position:fixed; top:0; }
  .sideBar-fix-bottom .sidebar__inner{ position:fixed; bottom:0; }

  section.sidebar::-webkit-scrollbar { width: 0;display: none;}
}

/* ---- logo ---- */
@media screen and (min-width: 768px) {
  header h1{ margin: 18px auto 30px 50px;}
}

@media screen and (max-width:767px) {
  header h1{ width: 100%;height: 15vw;position: fixed;top:4vw;left: 0;background-color: #f85c82;padding: 1.5vw 0;z-index: 2;}
  header h1 a {width: 10.6vw;margin: 0 auto;display: block;}
}

/* ---- nav ---- */

@media screen and (min-width: 768px) {
  nav {display: block;background: #f85c82;z-index: 3;opacity: 1;}
  nav .inner{ max-width: 100%;width: 100%;}

  nav ul li{width: 100%;}
  nav ul li:last-child{width: 100%;margin-bottom: 10px;}
  nav ul li a{padding-top: 10px;padding-left: 15px; display: block;width: 230px;}
  
  nav ul li a.current{pointer-events: none;background: #fa7c9a;}

  .toggle_btn {display: none;}
}

@media screen and (max-width:767px) {
  nav {display: block;position: fixed;top: 19vw;left: -100%;bottom: 0;width: 100%;background: #f85c82;overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;transition: all .5s;z-index: 3;opacity: 0;}
  .open nav {left: 0;opacity: 1;}
  nav .inner ul {list-style: none;margin: 0;padding: 0;}
  nav .inner ul li {position: relative;margin-bottom: 1.5vw;}
  nav .inner ul li a {display: block;transition-duration: 0.2s;}

  /*--- toggle_btn ---*/
  .toggle_btn {display: block;position: fixed;top: 8.5vw;left: 5vw;width: 8vw;height: 6vw;transition: all .5s;cursor: pointer;z-index: 3;}
  .toggle_btn span {display: block;position: absolute;left: 0;width: 100%;height: 0.9vw;background-color: #ffffff;border-radius: 100vh;transition: all .5s;}
  .toggle_btn span:nth-child(1) {top: 0;}
  .toggle_btn span:nth-child(2) {top: 43%;}
  .toggle_btn span:nth-child(3) {bottom: 0;}

  .toggle_btn.open span {background-color: #fff;}
  .toggle_btn.open span:nth-child(1) {-webkit-transform: translateY(2.5vw) rotate(-315deg);transform: translateY(2.5vw) rotate(-315deg);}
  .toggle_btn.open span:nth-child(2) {opacity: 0;}
  .toggle_btn.open span:nth-child(3) {-webkit-transform: translateY(-2.5vw) rotate(315deg);transform: translateY(-2.5vw) rotate(315deg);}
}


/* --------------------------
 component
----------------------------- */
.c-btn{ width:210px; height:60px;  text-align: center; line-height:1; position: relative;}
.c-btn a{ width:210px; height:60px; display: table; background:#fa7c9a; color:#fff; border-radius: 30px;
  z-index:2; position: relative;}
  .c-btn.c-btn-green a{ background:#96d850;}
.c-btn a span{display: table-cell; vertical-align:middle; }
.c-btn::after{
  background:rgba(213,201,195,0.5);
  width:210px;
  height:60px;
  position: absolute;
  border-radius: 30px;
  content:"";
  z-index:1;
  left:5px;
  top:5px;
}
.c-btn a:hover{  background:#fee1e8;}
.c-btn.c-btn-green a:hover{ background:#fff;}
.c-btn-view{}

@media screen and (max-width:767px) {
  .c-btn{ width:135px; height:45px; }
  .c-btn a{ width:135px; height:45px;border-radius: 22.5px;}
  .c-btn a span{ }
  .c-btn a img.sp { display: inline-block; }
  .c-btn::after{
    width:135px;
    height:45px;
    border-radius: 22.5px;
    left:2px;
    top:2px;
  }
  .c-btn a:hover{ }
  .c-btn-view{}
}


/* --------------------------
 main
----------------------------- */

@media screen and (min-width:768px) {
  main{ width: calc(100% - 260px);overflow: hidden;float: left;background-color: #f7f0eb;position: relative;z-index: 1;margin-left: 260px;}
}

@media screen and (max-width:767px) {
  main{ width: 100%;overflow: hidden;background-color: #f7f0eb;position: relative;z-index: 1;margin: 19vw auto 0;}
}


/* --------------------------
 btn_gototop
----------------------------- */

@media screen and (min-width:768px) {
  .btn_gototop{width: 50px;position: fixed;bottom: 20px;right: 20px;z-index: 10;}

  .btn_gototop img{position: absolute;bottom:0;right: 0px;}
  .btn_gototop img:hover{opacity: 0;cursor: pointer;}
  .btn_gototop img.on{position: absolute;bottom: 0;right: 0px;}
}

@media screen and (max-width:767px) {
  .btn_gototop{width: 11.3vw;position: fixed;bottom: 5vw;right: 2vw;z-index: 10;}
  .btn_gototop img{position: absolute;bottom:0;right: 0px;}
}

/* --------------------------
 footer
----------------------------- */

@media screen and (min-width:768px) {
  footer{ width: 100%;overflow: hidden;background-color: #a5ddf4;position: relative;z-index: 1;padding: 40px 30px 35px;}
  footer h2.footer_btn{ float: left;}
  footer h2.footer_logo{ float: right;margin-top: 15px;}
  footer p{ position: absolute;bottom: 40px;right: 30px;}

}

@media screen and (max-width:767px) {
  footer{ width: 100%;overflow: hidden;background-color: #a5ddf4;position: relative;z-index: 1;padding: 9.3vw 0 6vw;}
  footer h2.footer_btn{width: 80.6vw;margin: 0 auto;}
  footer h2.footer_logo{ width: 25.3vw;margin: 5.3vw auto 3.3vw;}
  footer p{ width: 22.6vw;margin: 0 auto;}
}


/* --------------------------
 load-fadein
----------------------------- */

.-is-first-time .ld-fade {opacity: 0;}
.-is-first-time.-is-loaded .ld-fade{opacity: 1;transition:all .5s ease .5s;}

.-is-first-time .ld-left { transform: translateX(-10px); opacity: 0;}
.-is-first-time.-is-loaded .ld-left{opacity: 1;transform: translateX(0px);transition:all .5s ease 0;}

.-is-first-time.-is-loaded .ld-left.delay200{transition:all .5s ease .2s;}
.-is-first-time.-is-loaded .ld-left.delay300{transition:all .5s ease .3s;}
.-is-first-time.-is-loaded .ld-left.delay400{transition:all .5s ease .4s;}
.-is-first-time.-is-loaded .ld-left.delay500{transition:all .5s ease .5s;}
.-is-first-time.-is-loaded .ld-left.delay600{transition:all .5s ease .6s;}
.-is-first-time.-is-loaded .ld-left.delay700{transition:all .5s ease .7s;}
.-is-first-time.-is-loaded .ld-left.delay800{transition:all .5s ease .8s;}
.-is-first-time.-is-loaded .ld-left.delay900{transition:all .5s ease .9s;}
.-is-first-time.-is-loaded .ld-left.delay1000{transition:all .5s ease 1.0s;}
.-is-first-time.-is-loaded .ld-left.delay1100{transition:all .5s ease 1.1s;}