.t_inr{
  padding: 0 2%;
  margin: 0 auto;
}

.top_p{
  font-size: 14px;
  line-height: 1.8;
  font-weight: 500;
}

.top_p p{
  font-weight: 500;
}

.btn01{
  width: 100%;
  margin: 0 auto;
  max-width: 250px;
}

.btn01.btn_left{
  margin: 0;
}

.btn01 a{
  color: #111!important;
  border: solid 2px #111;
  margin: 0 auto;
  position: relative;
  font-size: 15px;
  display: block;
  padding: 10px 20px;
  text-align: center;
  transition: .3s;
}

.btn01 a::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 14px;
  background: url(../images/btn_arrow.png) no-repeat center center / 12px;
  right: 19px;
  top: 42%;
  -webkit-transform: translate(0, -42%);
  -ms-transform: translate(0, -42%);
  transform: translate(0, -42%);
  transition: .5s;
}

.btn01 a:hover{
  background: #fff;
}

.btn01.btn_w a{
  color: #fff!important;
  border: solid 2px #fff;
}

.btn01.btn_w a::before {
  width: 12px;
  height: 14px;
  background: url(../images/btn_arrow_w.png) no-repeat center center / 12px;
}

.btn01.btn_w a:hover{
  background: #111;
}

/*はみ出すflex*/
.column {width: 100%;}
.column-outside-left{margin-left: -3%;margin-bottom: 20px;}
.column-outside-right{margin-right: -3%;margin-bottom: 20px;}

@media screen and (min-width:768px) {
  .top_p{
    font-size: 16px;
    line-height: 2;
  }
  .btn01 a{
    font-size: 16px;
  }
  /*はみ出すflex*/
  .column {width: 48%;}
  .column-outside-left {flex: 1;margin-left: calc(50% - 50vw);margin-right: 4%;z-index: 2; padding-left: 0;}
  .column-outside-right{flex: 1;margin-right: calc(50% - 50vw);margin-left: 4%;}
}

/*============================
    main
============================*
/*.main{margin-top: -168px;}*/
.main_img img {
  object-position: left;
  width: 100%;
}

.main {
  z-index: 1;
  position: relative;
  overflow: hidden;
 margin-top: 81px;
}

.mv_catch{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  -webkit-transform: translate(-40%, -50%);
  -ms-transform: translate(-40%, -50%);
  width: 80%;
  max-width: 943px;
  margin-inline: auto;
}
  .mv_catch img{
    width:80%;
    height:auto;
  }

.mv_catch_02 {
  top: 18%;
  left: 85%;
  width: 25%;
}

  .top_bnr{
    position: absolute;
    top: 480px;
    left: 3%;
    transform: translateY(-52%, -3%);
    -webkit-transform: translateY(-52%, -3%);
    -ms-transform: translateY(-52%, -2%);
  }

@media screen and (min-width:768px) {
  .top_bnr{
    max-width: 400px;
    top: 65%;
    left: 65%;
    transform: translate(-80%, -50%);
    -webkit-transform: translate(-80%, -50%);
    -ms-transform: translate(-80%, -50%);
    width: 100%;
  }
  .mv_catch{
    top: 30%;
    left: 47%;
    transform: translate(-40%, -50%);
    -webkit-transform: translate(-40%, -50%);
    -ms-transform: translate(-40%, -50%);
    width: 80%;
  }

  .mv_catch_02 {
    top: 18%;
    left: 85%;
    width: 25%;
  }
}

@media screen and (min-width:1024px) {
.top_bnr{
    top: 70%;
    left: 30%;
  max-width: 350px;
}
.mv_catch{
 top: 70%;
 left: 70%;
  width: 51%;
}
.mv_catch_02 {
  top: 22%;
  left: 86%;
  width: 18%;
}
.main {
 margin-top: 0px;
}
}


@media screen and (min-width:1440px) {
.top_bnr{
    top: 65%;
    left: 28%;
  max-width: 400px;
}
}

/*============================
    top_bg01
============================*/
.top_bg01{
  background: url(../images/top_bg01.png) no-repeat center center / cover;
  position: relative;
}
.bg_inr{
  position: absolute;
 width: 100%;
  z-index: 1;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  padding-bottom: 80px;
}

/*============================
    top_concept
============================*/

.top_concept{
    padding: 60% 0 40px;
    background:url(../images/top_concept.png) no-repeat top right / 90%;
  position: relative;
}

/*
.top_concept::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  width: 60%;
  height: 100%;
  background: url(../images/top_concept.png) no-repeat top right / 50%;
  z-index: -1;
}*/

.top_concept .t_inr{
  max-width: 1270px;
}

.concept_ttl .span{
  padding: 5px;
  background: #fff;
  font-size: 20px;
  width: fit-content;
  margin-bottom: 10px;
}

.concept_ttl .span strong{
  font-weight: normal;
  font-size: 25px;
}

.concept_txt{
  width: 100%;
  font-size: 14px;
  line-height: 1.8;
  font-weight: bold;
}
@media screen and (min-width:768px) {
  .top_concept{
    background:url(../images/top_concept.png) no-repeat top right / 50%;
    padding: 100px 0 30px;
  }
  .concept_txt{
    width: 380px;
    font-size: 16px;
    line-height: 1.8;
  }
}

@media screen and (min-width:1247px) {
  .top_concept{
    padding: 100px 0 150px;
    background:url(../images/top_concept.png) no-repeat top right / contain;
  }
  .concept_ttl .span{
    padding: 10px;
    font-size: 50px;
    margin-bottom: 15px;
  }
  
  .concept_ttl .span strong{
    font-weight: normal;
    font-size: 65px;
  }

  
}

/*============================
    top_concept
============================*/
.top_about{
  /*padding: 0 0 80px;*/
  position: relative;
}

.top_about_movie{
  position: relative;

}

.top_about_movie video{
  height: 1400px;
  object-fit: cover;
}
.top_about_movie::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  background-image: radial-gradient(#ffffff 20%, transparent 31%), radial-gradient(#ffffff 20%, transparent 31%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
}

.top_about .t_inr{
  max-width: 1275px;
 /* width: 100%;
  z-index: 1;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  padding-bottom: 80px;*/
}

.uji_txt .top_p p{
  font-weight: bold;
}

.uji_ttl_span{
  font-size: 20px;
  margin-bottom: 15px;
}

.uji_txt{
  margin-top: 90px;
}

/* .top_about:before {
  position: absolute;
  content: "";
  width: 30%;
  height: 225px;
  right: 4%;
  bottom: -10%;
  background: url(../images/top_uji.png) no-repeat right bottom;
  background-size: contain;
  z-index: 1;
} */
@media screen and (min-width:500px){
.top_about_movie video {
   height: 1500px;
}
}
@media screen and (min-width:780px) {
  .uji_txt {
    margin-top: 20px;
}
.uji_ttl_span {
  font-size: 50px;
  margin-bottom: 10px;
}
.uji_ttl_img{
  max-width: 80%;
}
/* .top_about:before {
  width: 46%;
  height: 125px;
  right: 0;
  bottom: -15%;
} */
.top_about .t_inr{
  top: 40px;
  padding-bottom:0;
}
.top_about_movie video {
  height: 2000px;
}
}

@media screen and (min-width:780px) {
  .top_about_movie video{
    height: 1800px;
    object-fit: cover;
  }
}

@media screen and (min-width:250px) {
  .top_about_movie video{
    height: 1371px;
    object-fit: cover;
  }
}

@media screen and (min-width:1500px) {
  .top_about_movie video {
    height: 1551px;
}
}


/*============================
    top_recom
============================*/
.top_recom{
  padding: 50px 0;
  background: url(../images/top_rec_bg.jpg) no-repeat center left / cover;
}

.top_recom .t_inr{
  max-width: 1275px;
}

.recom_ttl{
  text-align: center;
  color: #fff;
  font-size: 23px;
  padding: 25px 0;
  background: url(../images/recom_ttl.png) no-repeat center center / contain;
}

.recom_item{
  width: 100%;
  background: url(../images/osusume_item_bg.png) no-repeat center center / contain;
  position: relative;
  margin-bottom: 20px;
}
.recom_img{
    text-align: center;
    max-width: 300px;
    margin: 0 auto 15px;
  position: relative;
} 

.r_item_ttl{
  font-weight: 700;
  text-align: center;
  margin:0 auto 15px;
  padding-bottom: 10px;
  color: #fff;
  border-bottom: double 4px #fff;
  width: fit-content;
  font-size: 32px;
}

.r_item_txt{
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  line-height: 1.8;
  width: fit-content;
  margin: 0 auto;
}

.take_img{
  position: absolute;
  right: 0%;
  bottom: 2%;
  width: 100px;
}

.recom_item:nth-child(4) .take_img{
  right: inherit ;
  left: 0;
  bottom: 2%;
}
.menu_link .btn01 {
   max-width: 100%;
   width: 100%;
   margin-bottom: 5px;
}

.menu_link .btn01 a{
  color: #fff !important;
  border: solid 2px #fff;
}

.menu_link .btn01 a::before {
  background: url(../images/btn_arrow_w.png) no-repeat center center / 12px;
}

.menu_link .btn01 a:hover{
  background: #111;
}


@media screen and (min-width:768px) {
  .take_img ,.take_img02{
    width: 100px;
  }
}

@media screen and (min-width:938px) {
  .menu_link .btn01 {
    max-width: 100%;
    width: 48%;
    margin-bottom: 5px;
}
}

@media screen and (min-width:1024px) {
  .top_recom{
    padding: 100px 0;
    background: url(../images/top_rec_bg_sp.jpg) no-repeat center center / cover;
  }
  .recom_ttl {
    font-size: 65px;
    padding: 20px 0;
    background: url(../images/recom_ttl.png) no-repeat center center / contain;
  }
  .recom_item{
    width: 48%;
    margin-bottom: 20px;
  }
  .recom_item:nth-child(2n){
    margin-top: 120px;
  }
  .recom_img{
    text-align: center;
    max-width: 300px;
    margin: 0 auto 15px;
  }
  .recom_img img{
    max-width: 300px;
  }
  .r_item_ttl{
    font-size: 20px;
  }
  .r_item_txt{
    font-size: 16px;
    line-height: 1.8;
  }
  .menu_link .btn01 {
    max-width: 100%;
    width: 23%;
    margin-bottom: 0px;
}
}


/*============================
    top_store
============================*/
.top_store{
  padding: 40px 0;
  background: url(../images/top_store_bg.png) no-repeat center center / cover;
}

.top_store .t_inr{
  max-width: 1270px;

}

.top_store_ttl{
  text-align: center;
  font-size: 25px;
}

.store_item{
  width: 100%;
  margin-bottom: 30px;
}

.top_store_logo{
  text-align: center;
  margin-bottom: 20px;
}

.top_store_logo img{
  max-width: 300px;
}

.top_store_txt{
  text-align: center;
  line-height: 1.5;
  font-size: 16px;
}

.btn_ig.btn01 a::before{
  background: url(../images/btn_ig_ico.png) no-repeat center center / 20px;
  right: inherit;
  left: 20px;
  width: 20px;
  height: 20px;
  top: 48%;
}

.btn_ig.btn01 a{
  font-size: 18px;
}

@media screen and (min-width:768px) {
  .top_store{
    padding: 100px 0;
  }
  .top_store_ttl{
    font-size: 60px;
  }
  .store_item {
    width:48%;
    margin-bottom: 0px;
  }
  .top_store_logo img{
      width: auto;
  }
  .top_store_txt{
    font-size: 18px;
    line-height: 2;
  }
}


/*============================
    top_recruit
============================*/
.top_recruit{
  padding: 40px 0;
  background: url(../images/top_recruit_bg_499.jpg) no-repeat center center / cover;
  color: #fff;
}
 
.top_recruit .t_inr{
  max-width: 1000px;
}

.top_recruit_txt{
  font-size: 16px;
  text-align: center;
  line-height: 2;
}

@media screen and (min-width:768px) {
  .top_recruit{
    padding: 40px 0;
    background: url(../images/top_recruit_bg_sp.jpg) no-repeat center center / cover;
  }
  .top_recruit_txt{
    font-size: 20px;
    line-height: 1.8;
  }
}

@media screen and (min-width:1024px) {
.top_recruit{
   padding: 80px 0;
  background: url(../images/top_recruit_bg.jpg) no-repeat center center / cover;
}
}


/*============================
    top_news
============================*/
.top_news{
  padding: 40px 0;
  background: url(../images/top_news.jpg) no-repeat center center / cover;
  color: #fff;
}

.top_news .t_inr{
  max-width: 1130px;
}

.top_news_ttl{
  font-size: 25px;
  text-align: center;
}

.top_news_left{
  width: 100%;
}
.top_news_right{
   width: 100%;
}

@media screen and (min-width:769px) {
  .top_news {
    padding: 80px 0;
  }
  .top_news_ttl {
    font-size: 50px;
  }
  .top_news_left {
   width:230px;
  }
  .top_news_right {
    width: calc(100% - 280px);
  }
}


/*============================
    top_contact
============================*/
.top_contact{
  padding: 40px 0 40px;
 background: url(../images/top_contact_bg02.png) no-repeat center right 35% / cover;

}
.top_contact_box {
  width: fit-content;
  text-align: center;
}
.contact_logo img{
  width: 300px;
}
.contact_tel{
  font-size: 23px;
  padding-left: 27px;
  font-weight: bold;
  background: url(../images/contact_tel_bg.png) no-repeat center left / 19px;
  width: fit-content;
  margin: 0 auto 15px;
}
.time_ttl{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 5px;
  border: solid 1px #111;
  font-weight: bold;
}

.contact_time_right{
  line-height: 1.8;
  /*margin-left: 20px;*/
}

.time_flex{
  width: 280px;
  margin: 0 auto 20px;
}

.con_link_btn:nth-child(2){
  margin-left: 0px;
}
.con_link_btn{
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
    }
.con_link_btn a{
  transition: .3s;
  display: block;
  width: fit-content;
    margin: 0 auto;
}
.con_link_btn a:hover{
  background: #fff;
}
@media screen and (min-width:768px) {
  .contact_logo img{
    max-width: 300px;
  }
  .contact_tel {
    font-size: 35px;
    padding-left: 35px;
    font-weight: bold;
    background: url(../images/contact_tel_bg.png) no-repeat center left / 28px;
    width: fit-content;
    margin: 0 auto 20px;
  }
}
@media screen and (min-width:1115px) {
.top_contact{
  padding: 130px 0 80px;
 background: url(../images/top_contact_bg.png) no-repeat center right / cover;
}
.top_contact_box{
    margin-right: auto;
  margin-left: 50px;
  }
.con_link_btn{
    width: 47%;
    text-align: center;
    margin-bottom: 5px;
  }
  .con_link_btn:nth-child(2) {
    margin-left: 0;
}
  .con_link_btn img{
    width: auto;
  }
}
@media screen and (min-width:1720px) {
.top_contact_box{
    margin-right: auto;
  margin-left: 200px;
  }
  }
/*============================
    footre
============================*/
.footer{
  padding: 20px 0 10px;
  background: url(../images/footer_bg.jpg);
}

.footer .t_inr{
  max-width: 1000px;
}

.ft_nav_li{
  padding: 0 3px;
  text-align: center;
  line-height: 2;
  width:100%;
  margin-bottom: 5px;
  font-size: 12px;

 /* border-right:solid 1px #fff ;*/
}

/*
.ft_nav_li:last-child{
  border-right:none;
}*/

.ft_nav_li a{
  color: #fff!important;
}

.c_copy{
  text-align: center;
  font-size: 11px;
  color: #fff;
}

@media screen and (min-width:768px) {
  .footer{
    padding: 30px 0 10px;
    background: url(../images/footer_bg.jpg);
  }
  .ft_nav_li{
    width: 100%;
    margin-bottom: 0px;
    text-align: center;
    font-size: 14px;
  }
  .c_copy{
    text-align: center;
    font-size: 12px;
    color: #fff;
  }
}

.d_none{
  display: none;
}