@charset "utf-8";
/*=== 画像の表示エリア ================================= */
.slide {
  position: relative;
  overflow: hidden;
  /* 画像のサイズに合わせて変更ください */
  width: 1200px;
  height: 800px;
  margin: auto; /* サンプルは中央寄せの背景：白 */
  background: #fff;
}
/*=== 画像の設定 ======================================= */
.slide img {
  display: block;
  position: absolute;
  /* 画像のサイズを表示エリアに合せる */
  width: inherit;
  height: inherit;
  opacity: 0;
  animation: slideAnime 8s ease infinite;
}
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
  animation-delay: 0s
}
.slide img:nth-of-type(2) {
  animation-delay: 2s
}
.slide img:nth-of-type(3) {
  animation-delay: 4s
}
.slide img:nth-of-type(4) {
  animation-delay: 6s
}
/*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
  0% {
    opacity: 0
  }
  1% {
    opacity: 1
  }
  25% {
    opacity: 1
  }
  26% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
html {
  color: #000;
  background: #FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
fieldset, img {
  border: 0
}
ol, ul {
  list-style: none
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal
}
q:before, q:after {
  content: ''
}
abbr, acronym {
  border: 0;
  font-variant: normal
}
sup {
  vertical-align: text-top
}
sub {
  vertical-align: text-bottom
}
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  *font-size: 100%
}
legend {
  color: #000
}
::selection {
  background: #fff
}
html, body {
  position: relative;
  min-width: 960px;
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
  font-size: 10px;
  font-weight: 300;
  line-height: 1;
  font-variant-ligatures: none;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  background-color: #cde7f4
}
a {
  text-decoration: inherit;
  color: inherit
}
img, svg, video, iframe, picture {
  display: block;
}
.wrapper {
  overflow: hidden
}
.header {
  padding: 50px 0 40px 0;
}
.top_header {
  margin: 0 auto;
  width: 325px;
}
.top_header img {
  width: 325px;
}
.top_main {
  width: 1200px;
  margin: 120px auto 0px auto;
}
.top_main img {
  width: 100%;
}
.header {
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  /*border-bottom: 1px solid #000;*/
  background-color: #cde7f4;
}
.header--items {
  background-color: #9dccc6;
}
.header--read {
  background-color: #a39cb8;
}
.header--before {
  background-color: #c3b8a8;
}
.header--rope_picnic {
  background-color: #98c0d4;
}
.header--vis {
  background-color: #fdad91;
}
.header--nergy {
  background-color: #aaaaaa;
}
.header__logo {
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 20px;
  width: 60px
}
.content {
  position: relative;
  background-color: #cde7f4;
}
.main {
  overflow: hidden;
}

.box {
  overflow: hidden;
  position: relative;
}
.lead {
  padding: 150px 0;
  font-size: 1.7rem;
  text-align: center;
  line-height: 2.176470588235294;
  letter-spacing: .12em;
}
.navs {
  padding: 40px 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  background-color: #cde7f4;
}
/*2nd*/
.navs--items {
  background-color: #c9ddbc;
}
/*3nd*/
.navs--read {
  background-color: #f9f8fd;
}
/*4nd*/
.navs--before {
  background-color: #f3e5cd;
}
/*5nd*/
.navs--rope_picnic {
  background-color: #98c0d4;
}
/*6nd*/
.navs--vis {
  background-color: #fdad91;
}
/*7nd*/
.navs--nergy {
  background-color: #aaaaaa;
}
.cont {
  width: 1000px;
  margin: 0 auto;
}
.cont__copy {
  margin-top: 225px;
  font-size: 50px;
  line-height: 140%;
  text-align: center;
}
.cont__txt {
  margin: 80px 0 80px 0;
  padding: 0 0 80px 0;
  font-size: 25px;
  text-align: center;
  line-height: 240%;
  border-bottom: 1px #000000 solid;
  letter-spacing: .13em;
}
.cont__txt.none {
  border-bottom: none;
}
.a_01 {
  margin: 0 auto;
}
.a_01.i01 {
  width: 628px;
}
.a_01.i02 {
  width: 140px;
}
.a_01.i03 {
  width: 590px;
}
.a_01.i04 {
  width: 555px;
}
.a_01.i05 {
  width: 338px;
}
.a_01.i06 {
  width: 85px;
}
.a_01.i07 {
  width: 181px;
}
.a_01 img {
  width: 100%;
}
.a_02 {
  width: 1000px;
  margin: 80px auto 0 auto;
}
.a_02 img {
  width: 100%;
}
.a_03 {
  margin: 80px auto 0 auto;
}
.a_03.i01 {
  width: 578px;
}
.a_03.i02 {
  width: 775px;
}
.a_03.i03 {
  width: 592px;
}
.a_03.i04 {
  width: 617px;
}
.a_03.i05 {
  width: 702px;
}
.a_03.i06 {
  width: 596px;
}
.a_03.i07 {
  width: 949px;
}
.a_03 img {
  width: 100%;
}
.a_04 {
  margin: 80px auto -200px auto;
  width: 100%;
  overflow: hidden;
}
.a_04.a {
  background: #6eaac8;
}
.a_04.b {
  background: #9dccc6;
}
.a_04.c {
  background: #a39cb8;
}
.a_04.d {
  background: #c3b8a8;
}
.a_04.e {
  background: #98c0d4;
}
.a_04.f {
  background: #fdad91;
}
.a_04.g {
  background: #aaaaaa;
}
.a_04_box {
  animation: flowing 7s linear infinite;
  transform: translateX(1200px); /*初期位置*/
}
.a_04_box.i01 {
  width: 670px;
}
.a_04_box.i02 {
  width: 329px;
}
.a_04_box.i03 {
  width: 645px;
}
.a_04_box.i04 {
  width: 622px;
}
.a_04_box.i05 {
  width: 468px;
}
.a_04_box.i06 {
  width: 288px;
}
.a_04_box.i07 {
  width: 359px;
}
.a_04 img {
  width: 100%;
  padding: 15px 20px 20px 20px;
}
@keyframes flowing {
  100% {
    transform: translateX(-1200px);
  }
}
.imgbox_unit {
  width: 1000px;
  margin: 0px auto 0px auto;
}
.a_05 {
  margin: 0 0 -270px 0;
}
.a_05 img {
  width: 1000px;
}
.a_06 {
  width: 1000px;
  margin: 0px auto 0 auto;
}
.a_06 img {
  width: 1000px;
}
.product_txt {
  text-align: center;
  font-size: 15px;
  line-height: 300%;
  margin: 150px auto;
}
.product_txt a {
  text-decoration: underline;
}
.product_txt a:hover {
  opacity: 0.5;
  transition: 0.5;
}
.short_mv {
  margin: 80px auto;
}
.short_mv video {
  width: 700px;
  height: 400px;
  margin: 0 auto;
}
.img_box_t {
  animation: img_box_t_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 0px !important;
}
@keyframes img_box_t_9955 {
  0% {
    transform: translateX(500px)
  }
  33.33333% {
    transform: translateX(500px)
  }
  66.66667% {
    transform: translateX(500px)
  }
  100% {
    transform: translateX(500px)
  }
}
.img_box_a01 {
  animation: img_box_a01_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 860px !important;
  position: relative;
  top: 300px;
}
@keyframes img_box_a01_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_a02 {
  animation: img_box_a02_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 10px !important;
  position: relative;
  top: 300px;
}
@keyframes img_box_a02_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_a03 {
  animation: img_box_a03_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 860px !important;
  position: relative;
  top: 300px;
}
@keyframes img_box_a03_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_a04 {
  animation: img_box_a04_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 860px !important;
  position: relative;
  top: 300px;
}
@keyframes img_box_a04_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_a05 {
  animation: img_box_a05_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 10px !important;
  position: relative;
  top: 300px;
}
@keyframes img_box_a05_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_a06 {
  animation: img_box_a06_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 860px !important;
  position: relative;
  top: 300px;
}
@keyframes img_box_a06_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_a07 {
  animation: img_box_a07_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 950px !important;
  position: relative;
  top: 300px;
}
@keyframes img_box_a07_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_b01 {
  animation: img_box_b01_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 10px !important;
  position: relative;
  top: 500px;
}
@keyframes img_box_b01_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_b02 {
  animation: img_box_b02_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 860px !important;
  position: relative;
  top: 300px;
}
@keyframes img_box_b02_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_b03 {
  animation: img_box_b03_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 10px !important;
  position: relative;
  top: 500px;
}
@keyframes img_box_b03_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_b04 {
  animation: img_box_b04_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 820px !important;
  position: relative;
  top: 500px;
}
@keyframes img_box_b04_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_b05 {
  animation: img_box_b05_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0px 0px 860px !important;
  position: relative;
  top: 350px;
}
@keyframes img_box_b05_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_b06 {
  animation: img_box_b06_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 10px !important;
  position: relative;
  top: 500px;
}
@keyframes img_box_b06_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.img_box_b07 {
  animation: img_box_b07_9955 4s linear infinite;
  transform-origin: 50% 50%;
  margin: 0 0 0px 10px !important;
  position: relative;
  top: 500px;
}
@keyframes img_box_b07_9955 {
  0% {
    transform: translateY(0)
  }
  33.33333% {
    transform: translateY(-50px)
  }
  66.66667% {
    transform: translateY(60px)
  }
  100% {
    transform: translateY(0)
  }
}
.person {
  padding: 0px 0 40px;
  /*border-bottom: 1px solid;*/
}
.items, .read, .before, .rope_picnic, .vis, .nergy {
  padding: 100px 0 0px;
  /*border-bottom: 1px solid;*/
}
.items__cont, .read__cont {
  margin-top: 100px
}
.items {
  background-color: #cde9e9;
}
.read {
  background-color: #f9f8fd;
}
.before {
  padding: 92px 0 0 0;
  background-color: #f3e5cd;
  /*border-bottom: 1px solid;*/
  text-align: center;
}
.rope_picnic {
  background-color: #cde7f4;
}
.vis {
  background-color: #f9e8e3;
}
.nergy {
  background-color: #ffffff;
}
/*footer*/
.footer {
  padding-top: 0px;
  background: #FFFFFF;
}
.bt_link {
  padding: 0px 0 45px 0;
  overflow: hidden;
}
ul.bt_link_area {
  width: 567px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
ul.bt_link_area li {
  margin: 0;
  float: none;
}
ul.bt_link_area li.bt01 {
  width: 209px;
  margin: 0 100px 0px 0x;
}
ul.bt_link_area li.bt02 {
  width: 258px;
  margin: 0 0px 0px 0x;
}
.sns {
  padding: 35px 0;
  overflow: hidden;
  background: #eaf0f1;
}
.footer .sns p.t01 {
  font-size: 22px;
  text-align: center;
  margin: 50px 0px 0px 0;
}
ul.sns_area {
  width: 390px;
  display: flex;
  justify-content: space-between;
  margin: 35px auto 0 auto;
}
ul.sns_area li {
  width: 60px;
  margin: 0;
  float: none;
  margin: 0 50px 30px 0;
}
ul.sns_area li.line {
  margin: 0 0px 0px 0;
}
.footer img:hover {
  opacity: 0.5;
  transition: 0.5;
}
.footer .sns .logo_area {
  margin: 0px auto 60px auto;
  padding: 35px 0 0 0;
  border-top: 1px solid #174962;
  width: 80%;
}
.footer .sns .logo_area .logo {
  width: 350px;
  margin: 0 auto;
}
.footer .sns p.t02 {
  text-align: center;
  font-size: 15px;
}
.pc {
  display: none !important;
}
.sp {
  display: block !important;
}

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


@media screen and (max-width:767px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
  br {
    display: none !important
  }
  br.none {
    display: block !important
  }
  #css {
    width: auto;
  }
  html, body {
    position: relative;
    min-width: 320px
  }
  img {
    max-width: 100%;
    height: auto;
  }
  .header {
    padding: 25px 0 0px 0;
  }
  .top_header {
    margin: 0 auto;
    width: 50%;
  }
  .top_header img {
    width: 100%;
  }
  .top_main {
    width: 100%;
    margin: 120px auto 0px auto;
  }
  .top_main img {
    max-width: 100%;
    height: auto;
  }
  
  
  .slide {
  position: relative;
  overflow:visible;
  /* 画像のサイズに合わせて変更ください */
  width: 100%;
  height: auto;
  min-height: 250px;
  margin: auto; /* サンプルは中央寄せの背景：白 */
   background-color: #cde7f4;
   
}
  
  .slide img {
  max-width: 100%;
  }
  
  .cont {
    width: 100%;
    margin: 0 auto;
  }
  .cont__copy {
    margin: 50px 20px 50px 20px;
    font-size: 25px;
    line-height: 140%;
  }
  .cont__txt {
    margin: 25px 25px 40px 25px;
    padding: 0 0 40px 0;
    font-size: 14px;
    line-height: 240%;
    text-align: left;
  }
  .a_01.i01 {
    width: 70%;
  }
  .a_01.i02 {
    width: 20%;
  }
  .a_01.i03 {
    width: 70%;
  }
  .a_01.i04 {
    width: 60%;
  }
  .a_01.i05 {
    width: 40%;
  }
  .a_01.i06 {
    width: 12%;
  }
  .a_01.i07 {
    width: 24%;
  }
  .a_01 img {
    width: 100%;
  }
  .a_02 {
    width: 85%;
    margin: 40px auto 0 auto;
  }
  .a_02 img {
    max-width: 100%;
    
  }
  .a_03 {
    margin: 40px auto 0 auto;
  }
  .a_03.i01 {
    width: 84%;
  }
  .a_03.i02 {
    width: 84%;
  }
  .a_03.i03 {
    width: 84%;
  }
  .a_03.i04 {
    width: 84%;
  }
  .a_03.i05 {
    width: 84%;
  }
  .a_03.i06 {
    width: 84%;
  }
  .a_03.i07 {
    width: 84%;
  }
  .a_04 {
    margin: 40px auto 40px auto;
    width: 100%;
    overflow: hidden;
  }
  .a_04_box.i01 {
    width: 335px;
  }
  .a_04_box.i02 {
    width: 165px;
  }
  .a_04_box.i03 {
    width: 353px;
  }
  .a_04_box.i04 {
    width: 311px;
  }
  .a_04_box.i05 {
    width: 234px;
  }
  .a_04_box.i06 {
    width: 175px;
  }
  .a_04_box.i07 {
    width: 210px;
  }
  .a_04 img {
    padding: 5px 0px 5px 0px;
  }
  .a_04_box {
    animation: flowing 5s linear infinite;
    transform: translateX(0px); /*初期位置*/
  }
  @keyframes flowing {
    100% {
      transform: translateX(-950px);
    }
  }
  .img_box_t {
    animation: img_box_t_9955 4s linear infinite;
    transform-origin: 50% 50%;
    margin: 0 0 0px 0px !important;
  }
  .imgbox_unit {
    width: 100%;
    margin: 0px auto 0px auto;
  }
  .a_05 {
    max-width: 100%;
    margin: 25px 25px 30px 25px;
  }
  .a_tbox {
    margin: 0 25px 0 25px;
    background: #eeecdf;
  }
  .a_tbox p {
    font-size: 12px;
    line-height: 200%;
    padding: 20px;
    font-weight: 100;
    text-align: left;
  }
  .a_06 {
    max-width: 100%;
    margin: 25px 25px 30px 25px;
  }
  .product_txt {
    text-align: left;
    font-size: 12px;
    line-height: 180%;
    margin: 0px 25px 0px 25px;
  }
  .product_txt a {
    display: block;
    padding: 20px 0 0px 0;
  }
  .short_mv {
    margin: 40px 25px 0 25px;
  }
  .short_mv video {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .footer {
    padding-top: 40px;
    background: #FFFFFF;
  }
  .bt_link {
    padding: 0px 0 25px 0;
    overflow: hidden;
  }
  ul.bt_link_area {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
  ul.bt_link_area li {
    margin: 0;
    float: none;
  }
  ul.bt_link_area li.bt01 {
    width: 50%;
    margin: 0 20px 0px 0x;
  }
  ul.bt_link_area li.bt02 {
    width: 43%;
    margin: 0 0px 0px 0x;
  }
  .sns {
    padding: 35px 0;
    overflow: hidden;
    background: #eaf0f1;
  }
  .footer .sns p.t01 {
    font-size: 14px;
    text-align: center;
    margin: 50px 0px 0px 0;
  }
  ul.sns_area {
    width: 60%;
    display: flex;
    justify-content: space-between;
    margin: 35px auto 0 auto;
  }
  ul.sns_area li {
    width: 30px;
    margin: 0;
    float: none;
    padding: 0 0 30px 0px;
  }
  ul.sns_area li.line {
    margin: 0 0px 0px 0;
  }
  .footer img:hover {
    opacity: 0.5;
    transition: 0.5;
  }
  .footer .sns .logo_area {
    margin: 0px auto 60px auto;
    padding: 35px 0 0 0;
    border-top: 1px solid #174962;
    width: 80%;
  }
  .footer .sns .logo_area .logo {
    width: 70%;
    margin: 0 auto;
  }
  .footer .sns p.t02 {
    text-align: center;
    font-size: 11px;
  }
}