@charset "utf-8";
/* 
phone: 440px
tablet: 780px
*/

/*==================================
	COMMON
===================================*/
@media screen and (max-width:780px) {
  section {
    padding: 40px 20px;
  }

  #footer ul {
    width: 60%;
    margin: 0 auto;
    padding: 0.5em;
    margin-top: 0.5em;
  }

  #footer .sns {
    width: 55%;
  }

  #footer small {
    margin-top: 2em;
    margin-bottom: 6em;
  }
}

@media screen and (max-width:440px) {
  .body {
    font-size: 14px;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.5em;
    margin: 20px 0;
    text-align: center;
  }

  h2 span {
    display: block;
    font-size: 0.7em;
    margin-left: 0;
    margin-top: 0.5em;
  }

  h2 .line::before,
  h2 .line::after {
    width: 1.5em;
  }

  h2 .line::before {
    margin-left: 0em;
  }

  h1 {
    top: 0.5em;
    left: 0.5em;
  }

  h1 img {
    width: 70px;
  }

  section {
    padding: 30px 10px;
  }

  #footer ul {
    width: 90%;
  }

  #footer .sns {
    width: 70%;
    font-size: 2em;
  }
}


/*==================================
	NAV
===================================*/
@media screen and (max-width:1024px) {
  #g-nav-list {
    width: 40%;
  }
#g-nav .sns {
  width: 60%;
  margin-top: 5em;
}

}
@media screen and (max-width:780px) {
  #g-nav-list {
    width: 60%;
    height: 100vh;
    overflow: hidden;
  }

  #g-nav-list .flex {
    width:100%;
  }

  #g-nav .sns {
    width: 50%;
    margin: 6em auto 0.5em;
    font-size: 1.5em;
  }

  .nav-list-support {
    width: 100%;
  }

  #g-nav-products{
    margin: 4em 0;
  }

  .nav-list-support{
    width: 10%;
  }
  .ul-product{
    transform: translateX(0);
  }
}
@media screen and (max-width:440px) {

  .openbtn {
    position: fixed;
    bottom: 5px;
    right: 5px;
  }

  .openbtn::after {
    width: 120px;
    height: 120px;
  }

  #g-nav {
    width: 100%;
    overflow: hidden;
  }

  #g-nav-list {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  #g-nav-list .flex {
    width: 100%;
    justify-content: center;
  }

  #g-nav-list a span {
    display: none;
  }

  #g-nav .sns {
    width: 50%;
    margin: 4em auto 0.5em;
    justify-content: space-between;
  }
  ul .sns .flex{
    width: 100%;
  }

  .nav-list-support {
    width: 100%;
  }

  #g-nav a {
    line-height: 1.5em;
  }
  #g-nav-products{
    margin: 2.5em 0;
  }

  .nav-list-support{
    width: 100%;
  }
}

/*==================================
	TOP IMAGE
===================================*/
@media screen and (max-width:1024px) {

  .top-text:nth-of-type(2) {
    top: 55%;
  }

}
@media screen and (max-width:440px) {
  .top-text {
    font-size: 1.2em;
    line-height: 0.2em;
    top: 75%;
    left: 3%;
  }

  .top-text:nth-of-type(2) {
    top: 80%;
    font-size: 1em;
  }

}


/*==================================
	PICKUP ITEMS, TOPICS
===================================*/

@media screen and (max-width:1024px) {
  .slick-item {
    /*箱の高さを合わせる*/
    height: 48vw;
    padding: 40px 0;
  }
}

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

.slick-item figure img {
  width: 95%;
  margin-bottom: 20px;
}
}

@media screen and (max-width:640px) {
  .slick-box {
    width: 100%;
  }

  .slick-item {
    /*箱の高さを合わせる*/
    height: 80vw;
  }
}

@media screen and (max-width:440px) {
  .slick-item figure {
    margin-bottom: 10px;
    margin: 0 auto;
  }

  .slick-item figure img {
    margin: 0 auto;
  }

  .slick-item .new p {
    top: 5em;
    left: 2em;
  }

  .slick-item .new::after {
    top: 5.2em;
    left: 1.5em;
  }
}

/*==================================
	PRODUCTS
===================================*/
@media screen and (max-width:640px) {
  #products {
    padding: 60px 0;
  }

  /* grid */
  .grid-products {
    max-width: 100%;
    /* height: 600px; */
    margin: 1em auto;
    padding: 1.5em;

    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100%;
    grid-template-rows: 16.6% 16.6% 16.6% 16.6% 16.6% 1fr;
    grid-template-rows: repeat(6, auto);
  }

  .product a span {
    margin-top: 0.5em;
  }

  .tent {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .sleep {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .lights {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .bag {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .others {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  .kitchen {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 7;
  }

}


/*==================================
	NEWS
===================================*/
@media screen and (max-width:440px) {
  #news table {
    width: 100%;
    margin-bottom: 6em;
  }

  #news .gray-btn {
    right: 5%;
  }
}

/*=======================
  Concept
=========================*/
@media screen and (max-width:1024px) {
  #top-wrap {
    position: relative;
  }

  #top-wrap h2 {
    position: absolute;
    top: 40%;
    right: 50%;
    transform: translateX(60%);
    color: #fff;
  }

  #top-wrap h2 .line {
    display: block;
    margin: 2em 0;
    transform: translateX(-15%);
  }

  #top-wrap h2 .line::before,
  h2 .line::after {
    background-color: #fff;
  }
  
  .concept-pc {
    display: none;
  }

  .concept-responsive {
    display: block;
  }

  .concept-description {
    width: 90%;
    margin: 0 auto;
  }

  .concept-description p {
    line-height: 1.9em;
    letter-spacing: 0;
  }

  .concepts {
    padding: 0;
  }
}
@media screen and (max-width:440px) {

  #top-wrap h2 {
  transform: translateX(50%);
}
#top-wrap h2 .line {
  margin: 0.8em 0;
  transform: translateX(5%);
}

  #forest-wrap {
    width: 320px;
    height: 320px;
  }
}



/*=======================
  Tent list
=========================*/
@media screen and (max-width:780px) {
  .header-photo {
    height: 380px;
  }
    .nav-mixitup {
    width: 100%;
  }

  .grid-tents {
    grid-gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: 3em;
  }

  .grid-tents li {
    width: 140px;
  }

  .grid-tents img {
    width: 140px;
  }

  .grid-tents .new p {
    font-size: 0.9em;
    top: -0.4em;
    left: 0.4em;
  }

  .grid-tents .new::after {
    width: 3em;
    height: 3em;
    position: absolute;
    top: 0;
    left: 0;
  }

}
@media screen and (max-width:440px) {
  .header-photo {
    height: 200px;
  }

  .nav-mixitup {
    margin-bottom: 1.5em;
    justify-content: center;
  }

  .nav-mixitup .gray-btn {
    width: 45%;
    margin-right: 1em;
    margin-bottom: 1em;
    font-size: 0.85em;
  }

  .nav-mixitup .gray-btn:nth-of-type(even) {
    margin-right: 0;
  }

  #tent-list .list {
    width: 100%;
  }

  #tent-list .category {
    width: 100%;
  }

}

/*=======================
  Tent
=========================*/
@media screen and (max-width:780px) {
  .tent-photos {
    margin: 5em 0;
  }
}
@media screen and (max-width:440px) {
#tent section{
  padding: 15px 15px;
}
.tent-title {
  width: 100%;
  float: none;
  margin: 4.5em auto 3em;
  position: relative;
}
.tent-title h2{
  text-align: left;
}
.tent-title p {
  text-align: right;
  margin-bottom: 1.5em;
}
.tent-title .gray-btn {
  text-align: right;
  margin: 0 auto;
  position: absolute;
  bottom: -3.5em;
  right: 0;
}
.tent-link-pc{
  display: none;
}

.tent-link-responsive {
  display: block;
  width: 100%;
  margin-bottom: 1.5em;
  padding: 1em;
  top: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}
.tent-link-responsive ul{
  width: 100%;
  padding: 0;
}
.tent-link-responsive ul li{
  padding: 0.4em;
  font-size: 0.95em;
  background-color: #ccc;
}

.tent-mainview img {
  width: 100%;
}

.tent-photos {
  width: 100%;
  margin: 4em 0 2em;
}

#tent-description{
  padding: 0.5em;
}

#tent-description p {
  width: 100%;
  margin-bottom: 2.5em;
  line-height: 1.8em;
}

#tent table {
  width: 100%;
  margin-bottom: 2.5em;
}
#tent iframe {
  margin-bottom: 5em;
}

}
@media screen and (max-width:360px) {
  .tent-link-responsive {
    padding: 0;
  }

  .tent-link-responsive ul li{
    padding: 0.4em;
    font-size: 0.85em;
  }
}