/**
* Template Name: Bolt
* Template URL: https://templatemag.com/bolt-bootstrap-agency-template/
* Author: TemplateMag.com
* License: https://templatemag.com/license/
*/

.row {
  margin: 0 auto 3rem;
}

.member {
  background: linear-gradient(#dbd1c4, #d6bb9c, #cca171)#d6bb9c;
  border-bottom: solid 4px #94806a;
  margin: 0 auto;
  display: block;
}/* 会員登録ボタン */

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  background-color: rgb(236, 231, 225);
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
  background-color: #d6bb9c;
}/* ハンバーガーメニュー背景色 */

/* memorabillia accordion */
.accbox label {
  background: rgba(255, 255, 255, 0);
}/* ラベル背景色 */

.section-title {
  margin: 0 0 15px 0;
}

.navbar-default .navbar-nav>li>a.sogo-top {
  color: #FFD274;
}

.yellow-clover {
  width: 20%;
  margin-right: 5px;
}

/* hello */

#hello {
  width: 100%;
  padding: 240px 0px;
  background-repeat: no-repeat;
  background-size: cover;
}

#hello h1 {
  font-size: 90px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #74cfae;
}

#hello h2 {
  color: #fff;
  font-weight: 400;
  text-shadow: 3px 3px 5px rgba(51, 51, 51, 0.5);
}

#hello .position {
  position: relative;
  top: 30px;
}

/* sec1 */
#sec1 {
  background-color: #EEDAC3;
  padding: 50px 0px;
  margin-bottom: 0px;
}/* 背景の色 */

  .bg-overlay {
    background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    width: 100%;
    position: relative;
  }

  #sec1 .yajirushi {
    transform: rotate(90deg);
  }

  #sec1 .mt {
    position: relative;
    top: -5rem;
  }

  .sec1-fukidashi {
    margin-bottom: 40px;
    text-align: center;
  }


/* sec2 */
  #sec2 {
    background-color: #d6bb9c;
    padding-top: 50px;
    margin-bottom: 0px;
  }/* 背景の色 */

  #sec2 .flex-wrap p {
    font-size: 12px;
  }

/* sec3 */
  #sec3 {
    background-color: #EEDAC3;
    padding: 50px 0px;
    margin-bottom: 0px;
  }

  #sec3 .two-clovers-l, #sec3 .two-clovers-r {
    display: none;
  }

  #sec3 .share-memorabillia {
    text-align: center;
  }

  #sec3 .accshow p {
    width: 25%;
    margin: 45px auto;
  }

  #sec3 .accshow p {
    width: 30%;
    margin: 45px auto;
    position: relative;
    left: 50px;
  }



/* sec4 */
  #sec4 {
    background-color: #d6bb9c;
    padding: 50px 0px;
    margin-bottom: 0px;
  }

  #sec4 .sec-text p {
    margin-bottom: 40px;
  }

  #sec4 div.master {
    margin: 25px 70px 60px;
  }

  /* iphone-shadow */
  .iphone {
    box-shadow: 20px 20px 51px rgba(170, 148, 123, 0.3);
    border-radius: 30px;
  }

  #sec4 .mt {
    position: relative;
    top: -5rem;
}
  .two-clovers-r {
    position: relative;
    top: -15rem;
    left: 17rem;

  }
  .two-clovers-l{
    position: relative;
    top: -16rem;
    left: 50rem;
    transform: rotate(-110deg);
  }

  .clover-by-title {
    position: relative;
      top: -11rem;
      left: 4rem;
  }
  

/* lets-see-each-scene */
  #lets-see-each-scene {
    background-color: #fff;
    margin-bottom: 0px;
  }
  
  .scenes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 90%;
    margin: 0 auto;
  }

  #lets-see-each-scene img {
    margin: 30px;
  }

  #lets-see-each-scene p {
    line-height: 18px;
  }

  /* #trends */

  #trends {
    background-color: #ECECEC;
    padding: 25px;
  }
  #trends .sec-title {
    font-family: 漢字タイポス４１２ Std;
  }


/* responsive */
/* 幅が 1199px 以下であれば */
@media screen and (max-width: 1199px) {
  #pagetop {
      top: 60rem;
      right: 19px;
    }

  .sec1-text {
    padding: 0px 0px 40px;
  }
  #sec3 .clovers-mb-r {
    text-align: right;
    position: relative;
    top: -20rem;
    left: -12rem;
  }
  #sec3 .clovers-mb-l {
    position: relative;
    top: -42rem;
    left: -25rem;
    transform: rotate(-100deg);
  }

}
/* 幅が 991px 以下であれば */
@media screen and (max-width: 991px) {
  #pagetop {
    top: 50rem;
    right: 20px;
  }
  .text-align-cener {
    text-align: center;
  }
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
    display:block !important;
  }
  .navbar-toggle {
    display: block;
  }

.navbar-default .navbar-nav>li>a.sogo-top {
  color: #F7591E;
}
  .yellow-clover {
    width: 5%;
    margin-right: 5px;
}
  }

  

/* 幅が 640px 以下であれば */
@media screen and (max-width: 640px) {
  #sec3 .clovers-mb-r,
  #sec3 .clovers-mb-l {display: none;}
}


/* 幅が 550px 以下であれば */
@media screen and (max-width: 550px) {

  .bg-overlay {
    position: relative;
    top: 11rem;
}

  #hello {
      width: 100%;
      padding: 110px 0px;
  }
  #sec3 .fukidashi .p-album{
    position: absolute;
    top: 1px;
  }
  .share {
    width: 90%
  }

  #sec3 .accshow p {
    width: 70%;
    margin: 45px auto;
}
.accbox img {
  position: relative;
  left: 1rem;
  top: -34rem;
  width: 100%;
  z-index: 0;
}

  #sec4 div.master {
    margin: 0px 0px 80px 0px;
}
  #sec5 .sec-text {
    width: 80%;
  }
}

/* 幅が 400px 以下であれば */
@media screen and (max-width: 400px) {
  .fukidashi p {position: absolute;top: -25px;left: 30px;}
  .fukidashi img {width: 80%;}
  #pagetop {top: 40rem;right: 25px;}
  
  #sec4 .hapitomo,
  #sec5 .share,
  #sec6 .security {
    width: 90%;
  }
  #sec3 .iphone,
  #sec1 .explain {
    width: 80%;
  }

  .fukidashi img,
  #sec1 .sec1-fukidashi img,
  #sec3 p img {
    width: 100%;
  }
}

/* 幅が 680px 以上 999px以下であれば */
@media screen and (min-width: 680px) and (max-width: 999px) {
  .fukidashi p.sec5-ps {position: absolute;top: -25px;left: 74px;
  }

/* 幅が 768px 以上であれば */
@media screen and (min-width: 768px) {
  #sec3 .accshow p {
    width: 40%;
    margin: 45px auto;
}
.accbox img {
  position: relative;
  left: 15rem;
  top: -32rem;
  width: 73%;
}

  #sec4 div.master {
    margin: 60px 25px;
}
  #sec5 .sec-text {
    width: 100%;
    padding: 20px 190px;
}

  #sec7 img {
    margin: 20px 60px;
  }

}

/* 幅が 70px 以上 991px以下であれば */
@media screen and (min-width: 700px) and (max-width: 991px) {
  .css-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.grid-1 {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}
.grid-2 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.grid-3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
}



/* 幅が 768px 以上 991px以下であれば */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .lognin-member {
    display: none;
  }
  .nav>li>a {
    position: relative;
    display: block;
    padding: 10px 85px;
  }
  .navbar-collapse {
    width: 115%;
    left: -6rem;
    padding: 0px 85px;
  }
}

/* 幅が 992px 以上であれば */
@media screen and (min-width: 992px) {
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
  background-color: rgba(0,0,255,0);
}
}


/* 幅が 1000px 以上であれば */
@media screen and (min-width: 1000px) {

  #sec2 p {
    width: 87%;
    font-size: 17px;
  }

  #sec4 div.master {
    width: 35%;
  }

  #sec6 .sec-text {
    padding: 30px 110px;
  }

  .try {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 40px;
  }

  #sec7 img {
    margin: 20px 40px;
}
}

/* 幅が 1200px 以上であれば */
@media screen and (min-width: 1200px) {

  #hello {
    height: 750px;
  }

  #sec2 .row {
    width: 80%
  }

  #sec3 .clover {
    display: flex;
  }
  #sec3 .two-clovers-l, #sec3 .two-clovers-r{
    display: block;
    height: 60px;
    position: relative;
    top: 35rem;
  }
  #sec3 .two-clovers-r {
    transform: rotate(-105deg);
  }

  #sec3 .clovers-mb-r,
  #sec3 .clovers-mb-l {
    display: none;
  }

  #sec6 .sec-text {
    padding: 30px 0px;
  }
  
  .character {
    margin-top: 30rem;
  }
}}