@charset "utf-8";
/* CSS Document */

/****************************************************************
  lp Base
****************************************************************/
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.p-lpTitle {
  margin: 0 0 18px 0;
}


/* ===========================================
  component
============================================ */
section {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;


}
.p-lpContainer {
  max-width:1200px;
  margin: 0 auto;
  padding: 100px 60px;
  box-sizing: border-box;
  display:-webkit-box;/*--- Androidブラウザ用 ---*/
  display:-ms-flexbox;/*--- IE10 ---*/
  display: -webkit-flex;/*--- safari（PC）用 ---*/
  display:flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (max-width: 991px){
  .p-lpContainer {
    padding: 40px 16px;
  }
}

.p-lpTitle {
  font-size: 4.0rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 761px){
  .p-lpTitle {
    font-size:2.4rem;
  }
}
.p-lpSubTitle {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 40px 0;
}
@media (max-width: 761px){
  .p-lpSubTitle {
    font-size:1.8rem;
    line-height: 1.7;
  }
}
.p-lpLead {
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.7;
}
@media (max-width: 761px){
  .p-lpLead {
    font-size:1.4rem;
  }
}
.p-lpHr {
  border-top: 1px solid #de3c1f;
  position: relative;
}
/* lpCol3
-------------------------------------------- */
.p-lpCol3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media (max-width: 761px){
  .p-lpCol3 {
    display: block;
  }
}
.p-lpCol3__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width : 96% ; /* IE8以下とAndroid4.3以下用フォールバック */
  width : -webkit-calc((100% - 40px)/ 3);
  width: calc((100% - 40px)/ 3);
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

/* lpCol2
-------------------------------------------- */
.p-lpCol2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media (max-width: 761px){
  .p-lpCol2 {
    display: block;
  }
}
.p-lpCol2__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: calc((100% - 20px)/ 2);
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.p-lpCol2__item__inner {
  width: 100%;
}

/* lpCol4
-------------------------------------------- */
.p-lpCol4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media (max-width: 761px){
  .p-lpCol4 {
    display: block;
  }
}
.p-lpCol4__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: calc((100% - 10px)/ 4);
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  margin: 0 4px;
}
.p-lpCol4--center {
  justify-content: center;
}

/* lpCol5
-------------------------------------------- */
.p-lpCol5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.p-lpCol5__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: calc((100% - 10px)/ 5);
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}



@media (max-width: 761px){
  .p-lpCol2__item {
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }
  .p-lpCol3__item {
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }
  .p-lpCol3__item:last-child {
    margin-bottom: 0;
  }
  .p-lpCol4__item {
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }
}

.br {
  display: none;
}
@media (max-width: 761px){
  .br {
    display: block;
  }
}
/* ===========================================
intro
============================================ */
.intro {
  background-color: #de3c1f;
}
.intro__imgBg {
  background-image: url(../../img/mv.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 718px;
  max-height: 1030px;
  /* opacity: .2; */
  position: absolute;
  overflow: hidden;
  z-index: 0;
  display: none;
}
.intro__imgBg.displayVisible {
  display: visible;
}

@media (max-width: 761px){
  .intro__imgBg {
    min-height: inherit;
    max-height: inherit;
    height: 100vh;
  }
}
.intro__imgBg:before{
  /* content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute; */
  /*ぼかした分カット*/
  /* top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1; */
}
.intro .p-lpContainer {
  min-height: 718px;
  max-height: 1030px;
  z-index: 1;
  position: relative;
  text-align: center;
  -webkit-box-pack: center;/*--- Androidブラウザ用 ---*/
  -ms-flex-pack: center;/*--- IE10 ---*/
  -webkit-justify-content: center;/*--- safari（PC）用 ---*/
  justify-content: center;
}
@media (max-width: 761px){
  .intro .p-lpContainer {
    min-height: inherit;
    max-height: inherit;
    height: calc(100vh - 50px);
  }
}
.intro .p-lpTitle {
  font-size:6.0rem;
  margin: 0 0 40px;
}
@media (max-width: 761px){
  .intro .p-lpTitle {
    font-size:3.4rem;
    line-height: 1.4;
    margin: 0 0 20px;
  }
}
.intro .p-lpSubTitle {
  margin: 0 0 40px;
}
@media (max-width: 761px){
  .intro .p-lpSubTitle {
    margin: 0 0 20px;
  }
}
.intro .p-lpLead {
  display:inline-block;
  margin: 0 auto 40px;
  text-align: left;
}
@media (max-width: 761px){
  .intro .p-lpLead {
    margin: 0 0 20px;
  }
}
.intro__btn {
  display: inline-block;
  padding:16px 40px;
  background-color: #7bad10;
  color:#fff;
  border-radius: 50px;
  font-size:2.4rem;
  cursor: pointer;
  -webkit-transition:all 0.2s ease-in;
  -moz-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  outline: none;
}
.intro__btn:hover {
  background-color: #b4e351;
  color:#fff;
}
@media (max-width: 761px){
  .intro__btn {
    font-size:1.8rem;
    padding:12px;
  }
}

/* ===========================================
section1
============================================ */
.section1 .p-lpContainer {
  padding: 20px 0 60px;
}
@media (max-width: 991px){
  .section1 .p-lpContainer {
    padding: 40px 16px;
  }
}
.section1 .p-lpCol4__item {
  /* display: flex; */
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
.howVList {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.howVList__title {
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: center;
}
.howVList__text {
  line-height: 1.7;
  padding: 8px 0 0 0;
  text-align: center;
  display: block;
}
.howVList__img {
  display: block;
  display: flex;
  align-items: stretch;
}
.howVText {
  text-align: center;
  margin: 40px 0 0 0;
}
@media (max-width: 761px){
  .section1 .p-lpContainer {
    padding: 20px 16px 0;
  }
  .section1 .p-lpCol4 {
    display: flex;
  }
  .howVList__text {
    display: none;
  }
  .howVList__img {
    margin: 0;
  }
  .howVList__img > img {
    height: 100%;
  }
  .howVText {
    margin: 20px 0 0;
    text-align: left;
  }
}




/* ===========================================
section2
============================================ */
#inlineFrameExample > html > body {
  margin: 0;
}
iframe canvas {
  width: 100%;
  height: auto;
}
iframe {
  overflow: hidden;
}

.section2 .p-lpTitle {
  color: #de3c1f;
  white-space: nowrap;
}
.section2 .p-lpLead {
  margin: 0 0 24px 0;
}

@media (max-width: 761px){
  .section2 .p-lpCol2 {
    display: flex;
    flex-direction: column-reverse;
  }
  .section2 .p-lpCol2__item:not(:first-child) {
    margin: 0 0 24px 0;
  }
}

/* ===========================================
section3
============================================ */
.section3 {
  background-image: url(../../img/sec_03_bg2.JPG);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 800px;
  z-index: -2;
}
@media (max-width: 991px){
  .section3 {
    background-size: contain;
    background-position: center bottom;
    min-height: 440px;
  }
}
@media (max-width: 761px){
  .section3 {
    min-height: 340px;
  }
}
@media (max-width: 375px){
  .section3 {
    min-height: 300px;
  }
}
@media (max-width: 320px){
  .section3 {
    min-height: 280px;
  }
}
.section3 .p-lpContainer {
  color: #de3c1f;
}
.section3 .p-lpSubTitle {
  text-shadow:
    #fff 2px 0px,  #fff -2px 0px,
    #fff 0px -2px, #fff 0px 2px,
    #fff 2px 2px , #fff -2px 2px,
    #fff 2px -2px, #fff -2px -2px,
    #fff 1px 2px,  #fff -1px 2px,
    #fff 1px -2px, #fff -1px -2px,
    #fff 2px 1px,  #fff -2px 1px,
    #fff 2px -1px, #fff -2px -1px;
}
.alpha {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+20,0+100 */
  background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 5%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
  height: 100%;
  width: 100%;
  display: flex;
  position: absolute;
  z-index: -1;
}

/* ===========================================
section4
============================================ */
.section4  {
  margin-top: 1px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+50,eb4a2c+50 */
  background: rgb(255,255,255); /* Old browsers */
  background: -moz-linear-gradient(left, rgba(255,255,255,1) 50%, rgba(222, 60, 31,1) 50%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255,255,255,1) 50%,rgba(222, 60, 31,1) 50%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255,255,255,1) 50%,rgba(222, 60, 31,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#de3c1f',GradientType=1 ); /* IE6-9 */
}

.section4 .p-lpContainer{
  padding: 0;
}
@media (max-width: 761px) {
  .p-lpCol2__item {
      margin:0;
  }
}
.reelContent__img,
.reelContent__text {
  box-sizing: border-box;
  display: block;
  position: relative;
  padding: 40px;
  width: 100%;
}
@media (max-width: 991px){
  .reelContent__img,
  .reelContent__text {
    padding: 20px 10px;
  }
}
@media (max-width: 761px){
  .reelContent__img,
  .reelContent__text {
    padding: 20px 16px;
  }
}
.reelContentBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto auto auto;
  grid-template-rows: auto auto auto;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
  text-align: center;
}
.reelContentBox__box1 {
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  padding:16px;
}
.reelContentBox__box2 {
  -ms-grid-row: 1;
  grid-row-start: 1;
  grid-row-end: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  padding:16px;
}
.reelContentBox__box3 {
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row-start: 2;
  grid-row-end: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  padding:16px;
}
.reelContentBox__box4 {
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row-start: 2;
  grid-row-end: 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  padding:16px;
}

.reelImg__caption {
  margin: 12px 0 0 0;
}

@media (max-width: 761px){
  .reelContentBox {
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
  }
  .reelContentBox__box1 {
    -ms-grid-row: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    padding:16px;
  }
  .reelContentBox__box2 {
    -ms-grid-row: 1;
    grid-row-start: 1;
    grid-row-end: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    padding:16px;
  }
  .reelContentBox__box3 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    padding:16px;
  }
}








.rotate {
  animation: rotate_reel 60s steps(60) infinite;
}
@keyframes rotate_reel {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.reelContent__textBg {
  position: absolute;
  margin-left: 300px;
  filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.4));
}
@media (max-width: 991px){
  .reelContent__textBg {
    margin-left: 180px;
  }
}
@media (max-width: 761px){
  .reelContent__textBg {
    margin-left: 175px;
    max-width: 320px;
  }
}
.reelContent__text {
  background-color: #de3c1f;
  color: #fff;
  text-align: left;
  line-height: 1.7;
}
.reelContentText {
  max-width: 310px;
}
.reelContentText > .reelContentText__box {
  margin: 16px 0 0 0;
}
.reelContentText__title {
  font-size: 2.4rem;
  margin: 0 0 8px 0;
}


@media (max-width: 761px){
  .section4 {
    background: none;
  }
  .section4 .p-lpCol2 {
    display: flex;
    flex-direction: column-reverse;
  }
  .reelContentText__title {
      font-size: 1.8rem;
  }
}
/* ===========================================
section5
============================================ */
.section5 .p-lpContainer{
  padding: 100px 0;
}

.section5__content {
  margin-top: 80px;
}

.slide {
  width: 100%;
  height: 100px;
  display: block;
  position: relative;
  overflow: visible;
}
.slide_container {
  position: absolute;
  top: 0;
}

.timecode {
  display: flex;
}

.slideList {
  display: flex;
  height: 90px;
  position: relative;
  left: 0;
  overflow:visible;
}
.slideList__item {
  display: flex;
  width: 200px;
  margin: 4px;
  justify-content: center;
  text-align: center;
  align-items: center;
  background: #fff;
  overflow:visible;
}

.slideList__item img {
  transition-duration: 0.3s;
}
.slideList__item img:hover {
  cursor: zoom-in;
  transform: scale(3);	/*画像の拡大率*/
  transition-duration: 0.3s;	/*変化に掛かる時間*/
}
/* ===========================================
section6
============================================ */
.howtoList {
  background: #f5f5f5;
  box-sizing: border-box;
  border-radius: 8px;
  display: block;
  position: relative;
  padding:20px;
  width: 100%;
}
.howtoList__title {
  font-size: 2.4rem;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 24px 0;
  color: #de3c1f;
}
.howtoList .num {
  font-size: 4rem;
  display: block;
}
.howtoList__img {
  margin: 0 0 24px 0;
  border-radius: 4px;
  padding:4px;
  background-color: #fff;
}

/* ===========================================
section7
============================================ */

.section7__content {
  margin: 40px 0;
}
@media (max-width: 761px){
  .section7__content {
    margin: 40px 0 0 0;
  }
}
.section7__contentTitle {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 20px 0;
}

.toyList {
  background: #f5f5f5;
  border-radius: 10px;
  box-sizing: border-box;
  display: block;
  position: relative;
  padding:20px;
  width: 100%;
}
.toyList__title {
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: center;
}
.toyList__year {
  display: block;
  text-align: center;
  padding: 0 0 4px 0;
}
.toyList__text {
  line-height: 1.7;
  padding: 8px 0 0 0;
  text-align: center;
}
.toyList__img {
  margin: 0 0 24px 0;
  border-radius: 4px;
  padding:4px;
  background-color: #fff;
}

/* ===========================================
section7
============================================ */
.l-bottomContent .p-lpHr{
    border-top: 1px solid #ddd;
}
.l-bottomContentInner{
  padding: 40px;
  text-align: center;
}
.l-bottomContent {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
}
.l-bottomContent a {
  color: #de3c1f;
  text-decoration: underline;
}
.l-bottomContent a:hover {
  color: #640E13;
}
@media (max-width: 761px){
  .l-bottomContentInner{
    padding: 60px 16px;
  }
  .l-bottomContent {
    font-size: 1.8rem;
    line-height: 1.7;
  }
}
/* ===========================================
benefit
============================================ */
.benefitList {
  background: #f5f5f5;
  border-radius: 10px;
  box-sizing: border-box;
  display: block;
  position: relative;
  padding:20px;
  width: 100%;
}
.benefitList__title {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.benefitList__text {
  line-height: 1.7;
  padding: 16px 0 0 0;
  text-align: center;
}



/*-----------lp @Responsive----------*/
@media (max-width: 1199px) {

}
@media (max-width: 991px){

}
@media (max-width: 761px){
  /* .p-lpTitle {
    font-size: 2.6rem;
    font-weight: normal;
    line-height: 1.2;
    text-align: center;
  }
  .p-lpSubTitle {
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 40px 0;
  }
  .p-lpLead {
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 1.7;
  } */
}