@charset "UTF-8";

/***********************
    common
***********************/
.anchor{
  padding-top: 7.5rem;
  margin-top: -7.5rem;
}
.wrapper{
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.withebox{
  background: #fff;
  max-width: 1080px;
  margin: 0 auto;
  padding: 6rem 3rem;
}
.tubebox{
  max-width: 800px;
  margin: 0 auto;
  position: relative;
	padding-bottom : 56.25%;
}
.tubebox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ttl1,
.ttl2,
.ttl3{
  margin-bottom: 2rem;
  text-align: center;
}
.ttl1 h2{
  color: #B20211;
  font-size: 3rem;
  font-weight: bold;
}
.ttl2 h2{
  color: #FF7733;
  font-size: 3rem;
  font-weight: bold;
}
.ttl3 h2{
  display: inline-block;
  font-size: 4rem;
  font-weight: bold;
  position: relative;
}
.ttl3 h2::before{
  content: "";
  background: #DB652A;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 120%;
}
.subttl1 p{
  font-size: 2.4rem;
}
.dpsp,
.dptab{
  display: none;
}
@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 768px) {
    .dptab{
      display: block;
    }
}
@media only screen and (max-width: 767px) {
  .ttl1 h2,
  .ttl2 h2,
  .subttl1 p{
    font-size: 1.8rem;
  }
  .ttl3 h2{
    font-size: 2rem;
  }
  .dpsp{
    display: block;
  }
  .withebox{
    padding: 3rem 1rem;
  }

}

/***********************
    inner
***********************/
.inner1{
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 2rem;
}
@media only screen and (max-width: 767px) {
  .inner1{
    padding: 0 1rem;
  }
}
/***********************
    btn
***********************/
.linkbtn ,
.lineupgrbtn{
  text-align: center;
}
.linkbtn a,
.lineupgrbtn a{
  background: #DB652A;
  color: #fff;
  padding: 1rem 2rem;
}
.linkbtn a i,
.linkbtn2 a i,
.lineupgrbtn a i{
  font-size: 2rem;
  margin-left: 1rem;
  transform: rotateZ(333deg);
}
.closebox a:hover,
.linkbtn a:hover,
.itembtnbox:hover .lineupgrbtn a{
  background: #fff;
  color: #DB652A;
}
.linkbtn2{
  margin: 1rem 0;
}
.linkbtn2 a{
  background: #FFE080;
  color: #000000;
  display: block;
  font-weight: bold;
  margin: 0 auto;
  max-width: 235px;
  padding: 1rem 2rem;
}
.linkbtn2 a:hover{
  background: #000000;
  color: #FFE080;
}
.closebox {
  margin: 8rem 0 3rem;
  text-align: center;
}
.closebox a{
  background: #DB652A;
  color: #fff;
  display: block;
  max-width: 300px;
  margin: 0 auto;
  padding: 1rem 0;
  width: 100%;
}
.closebox2{
  margin: 3rem 0 ;
  text-align: center;
}
.closebox2 a{
  background: #FFC000;
  color: #000;
  display: block;
  max-width: 300px;
  margin: 0 auto;
  padding: 1rem 0;
  width: 100%;
}
.closebox2 a:hover{
  background: #000;
  color: #FFC000;
}
/***********************
    flexbox
***********************/
.flexbox1{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flexbox2{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.flexbox3{
  display: flex;
  flex-wrap: wrap;
}
.flexbox4{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/***********************
    header
***********************/
.cmn-head{
  background: #000;
  color: #fff;
  line-height: 1.5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
}
.headbox{
  /* padding: 0 2rem; */
  padding: .5rem 2rem;
  position: relative;
}
.headbox p{
  font-size: 2.4rem;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.headlogo{
  width: 215px;
}
.headbox .linkbtn{
  margin: 0 .5rem;
}
.headbox .linkbtn a{
  padding: 1rem;
}
.dp1420br{
  display: none;
}
@media only screen and (max-width: 1420px) {
  .dp1420br{
    display: block;
  }
  .headbox p{
    text-align: center;
  }
}
@media only screen and (max-width: 1180px) {
  .headbox .flexbox2{
    flex-direction: column;
  }
  .headbox .linkbtn{
    margin: 1rem 0;
    width: 100%;
  }
  .headbox .linkbtn a{
    padding: .5rem 1rem;
    display: block;
  }
}
@media only screen and (max-width: 900px) {
  .headbox{
    display: block;
  }
  .dp1420br{
    display: none;
  }
  .headbox p{
    font-size: 2rem;
    margin-bottom: 1rem;
    position: static;
    transform: none;
    text-align: left;
  }
  .headbox .flexbox2{
    position: absolute;
    right: 10px;
    bottom: 0;
  }
}
@media only screen and (max-width: 825px) {
  .dp1420br{
    display: block;
  }
}
@media only screen and (max-width: 767px) {
    .headbox .linkbtn{
      display: none;
    }
    .headlogo,
    .headbox p{
      text-align: center;
      width: 100%;
    }
    .headlogo img{
      width: 165px;
    }
    .headbox p{
      font-size: 1.8rem;
    }
}

/***********************
    footer
***********************/
/* .cmn-foot{
  background: #DB652A;
} */
.fotbox{
  background: #DB652A;
  padding: 3rem 0;
  text-align: center;
}
.fotbox .imgbox{
  max-width: 400px;
  margin: 0 auto;
}
.fotttl{
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  padding-top: 2rem;
}

.footcopy{
  background: #000;
  padding: 2rem 0;
  text-align: center;
}
.footcopy p{
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .footcopy{
    padding: 2rem 0 8rem;
  }
  .footcopy p{
    font-size: 14px;
  }
}

/***********************
    top1
***********************/
.top-sec1{
  background: #DB652A;
  color: #fff;
  margin-top: 7.5rem;
  text-align: center;
}
.slidetxt{
  padding: 3rem 0 4rem;
}
.main-cc{
  padding: 1rem 0;
}
.main-cc h2{
  font-size: 4rem;
}
.linkbox1 {
  text-align: center;
}
.linkbox1 a{
  background: #000;
  color: #fff;
  display: block;
  font-size: 2.8rem;
  max-width: 765px;
  margin: 0 auto;
  padding: 1rem 0;
}
.linkbox1 a:hover{
  background: #fff;
  color: #000;
}
@media only screen and (max-width: 1024px) {
  .linkbox1 a{
    max-width: 75%;
  }
}
@media only screen and (max-width: 768px) {
  .main-cc h2{
    font-size: 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .main-cc h2{
    font-size: 2rem;
  }
  .linkbox1 a{
    font-size: 1.8rem;
  }
}
/***********************
    top2
***********************/
.top-sec2{
  background: #FFFAEA;
  padding: 5rem 0;
}


/***********************
    top3
***********************/
.top-sec3{
  background: url(../images/top/ts3bg.jpg) no-repeat center/ cover;
  padding: 5rem 0;
}

/***********************
    top4
***********************/
.top-sec4{
  padding: 10rem 0;
}

.linkgr{
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 2rem;
}
.linkgr li{
  margin: 1%;
  text-align: center;
  width: 31%;
}
.linkgr li a{
  background: #DB652A;
  color: #fff;
  display: block;
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem 0;
}
.linkgr li a:hover{
  background: #000;
}

.bnrbox{
  background: #DB652A;
  margin: 4rem auto;
  max-width: 800px;
}
.bnrbox .flogobox{
  text-align: center;
  width: 40%;
}
.bnrbox .flinkbox{
  text-align: center;
  width: 60%;
}
.bnrbox .flinkbox p{
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
}

.lineupitems{
  margin: 0 auto;
  max-width: 1080px;
}
.lineupgrbox{
  margin: 3rem auto;
}

.itembtnbox{
  cursor: pointer;
}
.itemboxs{
  background: #FFE080;
  display: none;
  padding: 2rem;
}


.itembtnbox{
  background: #FFC000;
    padding: 1rem 2rem;
}
.lineupgrttl .fimgbox{
  margin-right: 1rem;
  width: 50px;
}
.lineupgrttl .fimgbox img{
  background: #fff;
}
.lineupgrttl .ftxtbox h3{
  font-size: 2rem;
  font-weight: bold;
}

.itembox{
  background: #fff;
  margin: 0 auto 3rem;
  padding: 2rem;
}
.itembox h3{
  border-bottom: 1px solid #FF7733;
  font-size: 2.4rem;
  font-weight: bold;
  padding-bottom: .5rem;
}
.itemcc{
  font-size: 2rem;
  font-weight: bold;
  margin: 1rem 0;
}

.inbox1,
.inbox2{
  margin: 2rem 0;
}
.inbox1 .ftubebox,
.inbox1 .fimgbox1,
.inbox1 .fimgbox2,
.inbox1 .ftxtbox,
.inbox2 .fimgbox1,
.inbox2 .ftxtbox,
.inbox2 .fimgbox2{
  margin: 1%;
  width: 48%;
}
.inbox1 .ftxtbox .txtbox,
.inbox2 .ftxtbox .txtbox{
  border: 1px solid #FF7733;
  padding: 1rem;
}
.inbox1 .ftxtbox2{
  display: inline-block;
  margin: 0 auto;
}
.inbox1 .ftubebox{
  width: 55%;
}
.inbox1 .fimgbox1{
  text-align: center;
  width: 40%;
}
.fimgbox2{
  text-align: center;
}
.subtxt{
  margin-top: 1rem;
}

@media only screen and (max-width: 1024px) {
  .inbox1 .ftubebox{
    text-align: center;
    width: 100%;
  }
  .inbox1 .fimgbox1{
    width: 48%;
  }
  .inbox1 .ftxtbox{
    margin: 1% auto;
  }
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 767px) {
  .linkgr li{
    margin: 1% auto;
    width: 90%;
  }
  .linkgr li a{
    font-size: 1.6rem;
    padding: 0.5rem 0;
  }
  .bnrbox .flogobox{
    margin: 1rem 0;
    width: 100%;
  }
  .bnrbox .flinkbox{
    width: 100%;
  }
  .itembtnbox{
    justify-content: center;
  }
  .lineupgrttl{
    margin-bottom: 1rem;
  }
  .itemboxs,
  .itembox{
    padding: 2rem 1rem;
  }
  .inbox1 .ftubebox, .inbox1 .fimgbox1, .inbox1 .fimgbox2, .inbox1 .ftxtbox, .inbox2 .fimgbox1, .inbox2 .ftxtbox, .inbox2 .fimgbox2{
    width: 100%;
  }
  .ftubebox {
    position: relative;
    padding-bottom : 56.25%;
  }
  .ftubebox iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/***********************
    popuplinks
***********************/
.fixbnr{
  background: #DB652A;
  color: #fff;
  display: none;
  padding: .5rem 1rem;
  position: fixed;
  top: 20%;
  right: 10px;
}
.fixbnr.fixbnrDP{
  display: block;
}
.popup{
  background: rgba(0,0,0,.7);
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 99999;
}
.popup.open{
  display: block;
}
.popupinbox {
  background: #fff;
  margin: auto;
  max-width: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 5rem 2rem;
  text-align: center;
  width: 100%;
}
.fotspmenu{
  display: none;
}
@media only screen and (max-width: 1024px) {
  .fixbnr{
    top: 10%;
  }
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 767px) {
  .fixbnr.fixbnrDP{
    display: none !important;
  }
  .fotspmenu{
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .menu-list{
    background: #fff;
    border-top: 3px solid #fff;
  }
  .menu-list li{
    width: 49.5%;
  }
  .menu-list li a{
    background: #DB652A;
    color: #fff;
    display: block;
    padding: 2rem 0;
    text-align: center;
  }
}