@charset "utf-8";
/* CSS Document */
#adminBox, .acms-admin-box,
.tss_comprehensiveHead,
.tss_footer{
  position: relative;
  z-index: 100;
}

img{max-width: 100%;}

.lhp_body{
  position: relative;
  z-index: 10;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
.lhp_body::before{
  content: "";
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0);
  z-index: 3;
  transition: background-color 0.2s linear;
}
.lhp_body.contents::before{background-color: rgba(0, 255, 246, 0.2);}
.lhp_body.company::before{background-color: rgba(117, 255, 87, 0.2);}
.lhp_body.present::before{background-color: rgba(255, 255, 255, 0.5);}
.lhp_skyimage{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.lhp_skyimage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lhp_venueimage{
  position: fixed;
  left: 0;
  bottom: -440px;
  width: 100%;
  height: 440px;
  text-align: center;
  filter: drop-shadow(0px 0px 30px #00337F);
  z-index: 2;
}
@media screen and (max-width:960px){
  .lhp_venueimage{
    height: 360px;
    bottom: -360px;
  }
}
@media screen and (max-width:550px){
  .lhp_venueimage{
    height: 252px;
    bottom: -252px;
  }
}
.lhp_photoblock{transition: opacity 0.2s linear;}
.lhp_photoblock.fade{opacity: 0;}
.lhp_slide{
  position: fixed;
  width: 300px;
  opacity: 0;
  transition: opacity 0.25s linear;
  pointer-events:none;
}
.lhp_slide.slick-initialized{opacity: 1;}
.lhp_slide picture{
  display: block;
  width: 300px;
  aspect-ratio: 1;
}
.lhp_photo1{
  top: 404px;
  left: calc(50% - 931px);
}
.lhp_photo2{
  top: 240px;
  left: calc(50% - 768px);
}
.lhp_photo3{
  top: 404px;
  left: calc(50% - 604px);
}
.lhp_photo4{
  top: 400px;
  right: calc(50% - 630px);
}
.lhp_photo5{
  top: 564px;
  right: calc(50% - 796px);
}
.lhp_photo6{
  top: 400px;
  right: calc(50% - 960px);
}
.lhp_photo2 .slick-list,
.lhp_photo3 .slick-list,
.lhp_photo4 .slick-list{
  position: relative;
  overflow: unset;
}
.lhp_photo2 .slick-list::after{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url(../img/txt_plant.svg);
  background-size: contain;
  top: 65px;
  left: 242px;
  width: 88px;
  height: 88px;
}
.lhp_photo3 .slick-list::after{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url(../img/txt_gourmet.svg);
  background-size: contain;
  bottom: 0px;
  left: 0px;
  width: 114px;
  height: 113px;
}
.lhp_photo4 .slick-list::after{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url(../img/txt_zakka.svg);
  background-size: contain;
  top: -29px;
  left: 49px;
  width: 88px;
  height: 88px;
}
.lhp_photo4 .slick-list::before{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url(../img/txt_workshop.svg);
  background-size: contain;
  bottom: -9px;
  left: -6px;
  width: 125px;
  height: 125px;
}



.lhp_main{
  position: relative;
  padding: 56px 7px 0;
  text-align: center;
  z-index: 10;
}
.lhp_main::after{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url(../img/il_topfuwa.png);
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 832px;
  height: 832px;
  pointer-events: none;
}
.lhp_main h1{
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  display: inline-block;
}
.lhp_main h1 img{
  aspect-ratio: 790 / 396;
}
.lhp_main h1::after{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url(../img/il_deco01.png);
  background-repeat: no-repeat;
  background-size: contain;
  top: 240px;
  left: 50%;
  transform: translateX(calc(-50% + -357px));
  width: 132px;
  height: 132px;
}
.lhp_main h1::before{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url(../img/il_deco02.png);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -145px;
  left: 50%;
  transform: translateX(calc(-50% + 310px));
  width: 204px;
  height: 222px;
}
.lhp_txtblock{
  line-height: 1.5;
  color: #FFFFFF;
  text-shadow: 0 0 6px #00337F;
}
.lhp_txt8{
  margin-bottom: 4px;
  font-size: 2rem;
}
.lhp_txt9{
  margin-bottom: 20px;
  font-size: 1.5rem;
  color:#FFFFA8;
  font-weight:bold;
}
.lhp_txt10{
  font-size: 1.125rem;
  padding-bottom:1em;
  line-height: 1.75;
}
.lhp_txt10 span{
  display: block;
}


.lhp_bnr{
  display: flex;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto 72px;
  gap: 0 16px;
  z-index: 99;
  position: relative;
  justify-content: center;
}
.lhp_bnr div{
  width:80%;
  max-width:650px;
}
.lhp_bnr a{
  display: inline-block;
  background-color: #FFFFFF;
}
.lhp_bnr a picture{
  display: block;
  aspect-ratio: 32/5;
}


.lhp_shopimage{
  position: relative;
  margin-bottom: 64px;
  margin-top: 40px;
  width: calc(100% + 14px);
  margin-left: -7px;
  padding: 1px 0;
  background-color: #FFFFFF;
}
.lhp_imgslider .slick-list{margin-left: -1px;}
.lhp_imgslider .slick-slide{margin-left: 1px;}
.lhp_imgslider picture{aspect-ratio: 1;}
.lhp_shoplistlink{
  position: absolute;
  top: calc(50% - 47px);
  left: calc(50% - 144px);
  width: 288px;
  height: 94px;
}
.lhp_shoplistlink a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 96px 40px #00FFFF;
  animation: flash 2s linear infinite;
}
@keyframes flash{
  0%{box-shadow: 0px 0px 0 0 #00FFFF;}
  50%{box-shadow: 0px 0px 32px 2px #00FFFF;}
  100%{box-shadow: 0px 0px 0 0 #00FFFF;}
}


.lhp_videoarea{
  max-width: 640px;
  aspect-ratio: 16/9;
  margin: 0 auto 80px;
  box-shadow: 0 0 0 3px #FFFFFF;
}
.lhp_videoarea iframe{vertical-align: top;}

.lhp_bring{
  position: relative;
  width: 100%;
  max-width: 1160px;
  margin: 36px auto;
}

.lhp_bring img{
  width:100%;
}



.lhp_bnr_lera{
  display: flex;
  max-width: 85%;
  justify-content: center;
  margin: 0 auto;
  gap: 3%;
  margin-bottom: 24px;
}

.lhp_bnr_lera a{
  display: block;
  background-color: #FFFFFF;
}
.lhp_bnr_lera a img{
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  border: 1px solid #999999;
}


.lhp_asstxt p{
  font-size:0.750em;
  text-align: center;
}

.slick-list{
  pointer-events:none;
}

.tss_footer{
  background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%);
  height: 58px;
  padding: 1.8em 0 0.5em;
}
.tss_footer a{
  font-size: 0.875rem;
  color: #000000;
}



/*-- 遊べるコンテンツ --*/
.lsp_contentslist{
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-bottom: 14px;
  padding: 0 16px 42px;
}
.lsp_contentslist h2{
  margin-bottom:32px;
  text-align: center;
  color:#FFFD43;
  font-size:1.5em;
  line-height:1.375;
  font-weight:bold;
}
.lsp_contentslist h2 span{
  background: linear-gradient(transparent 87%, rgb(198 255 229 / 32%) 50%);
}
.lsp_contentslist>ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
  max-width: 1160px;
  margin: auto;
  gap: 24px 1.72%;
}
.lsp_contentslist>ul>li{
  position: relative;
  width: 49.1%;
  padding: 32px;
}
.lsp_contentslist>ul>li::after{
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 20px;
}
.lsp_contentslist>ul>li{
  background: linear-gradient(135deg,  #FFFFFF 0%,#E1FFEE 100%);
  box-shadow: 0px 0px 10px #D3E2B3;
}
.lsp_contentslist>ul>li:last-of-type{
  display: flex;
  flex-direction: column;
}
.lsp_contentslist>ul>li:last-of-type p{
  text-align:right;
  font-size:0.75rem;
  margin-top: 0.5em;
}
.lsp_contentstitlebox{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.lsp_contentslist>ul>li h3{
  margin-bottom: 8px;
  font-size: 1.375rem;
  font-weight: bold;
}
.lsp_contentslist>ul>li h3{color: #009ACE;}
.lsp_contentstitlebox ul{
  display: flex;
  gap: 2px;
  max-width: 180px;/*アイコン最大3こまで*/
}
.lsp_contentstitlebox ul li{width: 48px;}
.lsp_contentslist>ul>li .lsp_detailbox{
  justify-content: space-between;
  margin-bottom: 10px;
}
.lsp_contentslist>ul>li .lsp_detailbox > div:first-of-type{
  width: 88%;
  margin: auto;
  padding: 8px 0;
}
.lsp_contentslist>ul>li .lsp_detailbox div:first-of-type img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lsp_contentslist>ul>li .lsp_detailbox div:nth-of-type(2){width: 52%;}
.lsp_contentslist>ul>li .lsp_detailbox dl{
  display: flex;
  flex-wrap: wrap;
  line-height: 1.75;
  margin-bottom: 14px;
  font-size: 0.75rem;
}
.lsp_contentslist>ul>li .lsp_detailbox dl dt{width: 4.2em;}
.lsp_contentslist>ul>li .lsp_detailbox dl dt::after{
  content: "▶";
  display: inline-block;
}
.lsp_contentslist>ul>li .lsp_detailbox dl dd{
  width: calc(100% - 4.2em);
}
.lsp_contentslist>ul>li .lsp_detailbox a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  text-decoration: none;
  text-align: center;
  font-size: 0.875rem;
  font-weight: bold;
  color: #009ACE;
  border-radius: 15px;
  background: #FFFFFF;
  border: 1px solid #B4B4B4;
}
.lsp_contentslist>ul>li .lsp_text{
  min-height: 4.875em;
  line-height: 1.5;
  font-size: 0.875rem;
}
.lsp_contentslist>ul>li .lsp_notes{
  line-height: 1.5;
  font-size: 0.75rem;
}
.lsp_timetable{
  display:flex;
  gap:0 16px;
  margin:auto;
}


/*-- ロハスカンパニーのご紹介 --*/
.lsp_companylist{
  width: calc(100% + 32px);
  margin:0 auto 48px -16px;
  padding: 0 16px;
}
.lsp_companylist h2{
  margin-bottom:32px;
  text-align: center;
  color:#FFFD43;
  font-size:1.5em;
  font-weight:bold;
}
.lsp_companylist h2 span{
  background: linear-gradient(transparent 87%, rgb(198 255 229 / 32%) 50%);
}
.lsp_companylist ul{
  max-width:1200px;
  width:100%;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  gap:36px;
}
.lsp_companylist ul li{
  width:calc((100% - 72px) / 3);
  background: linear-gradient(to bottom right, #FFFFFF 0%, #E1F8FF 100%);
  display:flex;
  flex-direction: column;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
}
.lsp_companylist ul li figure img{
  padding:4px;
  width:100%;
}
.lsp_comslide{display: none;}
.lsp_comslide.slick-initialized{display: block;}
.lsp_companylist ul.slick-dots{display: block;}
.lsp_companylist ul.slick-dots li{
  display: inline-block;
  width: 20px;
  background-color: transparent;
  box-shadow: none;
}
.lsp_companylist ul.slick-dots li:only-child{display: none;}
.slick-dots li button:before{font-size: 32px;}
.lsp_companylist ul li figcaption{
  font-size:1.375rem;
  color:#009ACE;
  font-weight:bold;
  text-align: center;
  padding: 0.5em 0;
}

.lsp_companylist ul li > p{
  font-size:0.75em;
  width:94.25%;
  margin:0 auto;
  background-image:url("../img/bg_dot.svg");
  background-position:top left;
  background-repeat:repeat-x;
  background-size:100% auto;
  padding:1.25em 0;
  text-align: left;
  line-height:1.6;
}

.lsp_companylist ul li > .lsp_companybnr{
  margin-top:auto;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
}

.lsp_companylist ul li > div a{
  display:block;
  text-align: center;
}

.lsp_companylistbnr{
  width: 100%;
  max-width: 1200px;
  margin: 120px auto 48px;
}

.lsp_companylistbnr ul{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  gap:36px;
}

.lsp_companylistbnr ul li{
  width:calc((100% - 72px) / 3);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  background-color:#FFFFFF;
}

/*案内*/
.lsp_guidewrap{
  width: calc(100% + 32px);
  margin-left: -16px;
  padding:48px 16px;
  background-color:#FFFFFF;
  position:relative;
  z-index:99;
}
.lsp_guidebox{
  max-width: 1200px;
  width: 100%;
  margin:0 auto;
  display: flex;
  gap:2%;
  justify-content: center;
}
.lsp_guidebox_map{width: 40%;}
.lsp_guidebox_txt{
  width: 58%;
  line-height:1.6;
  text-align: left;
  font-size:0.875em;
}
.lsp_guidebox_txt dt{font-weight: bold;margin-bottom: 0.5em;}
.lsp_guidebox_txt dd{font-size: 0.875em;}
.lsp_guidebox_txt dd ul{padding-left: 2em;}
.lsp_guidebox_txt li{text-indent:-1em;}
.lsp_guidebox_txt li:nth-last-of-type(n+2){margin-bottom: 0.3em;}

.lsp_prewrap{
  max-width: 580px;
  width: 100%;
  margin:32px auto;
  background: linear-gradient(135deg,  #FFFFFF 0%,#FFF9BE 100%);
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
  padding:24px 8px;
  text-align: left;
}
.lsp_prebox{
  display: flex;
  gap:2%;
  justify-content: center;
  line-height: 1.5;
}

.lsp_prebox div{width: 18%; text-align: center;}
.lsp_prebox dl{width: 82%;}
.lsp_prebox dl dt{
  font-weight: bold;
  font-size: 1.375em;
  color: #E36CA4;
  margin-bottom: 1em;
}
.lsp_prebox dl dd{font-size: 0.875em;}
.lsp_prebox dl dd:nth-last-of-type(n+2){margin-bottom: 0.5em;}

.lsp_btmwrap{
  padding-bottom:64px;
  position:relative;
  z-index:99;
}

.lsp_result{
  width: 100%;
  text-align: center;
  margin-bottom: 1em;
  padding-top:2em;
}

.lsp_group{
  text-align: center;
  font-size: 0.875em;
  max-width: 1000px;
  margin: 0 auto 2em;
  line-height: 1.6;
  background-color: #ffffffb8;
  padding: 0.5em 1em 0.25em;
}
.lsp_group p{margin-bottom: 1em;}

.lsp_group_bnr{
  display: flex;
  gap:24px;
  justify-content: center;
}
/*-- --*/



@media screen and (min-width:801px){
  .lhp_bnr a:hover img{opacity: 0.5;}
  .lhp_shoplistlink a:hover img{opacity: 0.5;}
  .lsp_contentslist>ul>li .lsp_detailbox a:hover{border: 2px solid #009ACE;}
  .lsp_companylist ul li > div a:hover{opacity: 0.5;}
  .lhp_bnr_lera a:hover img{opacity: 0.5;}
}







@media screen and (max-width:1200px){
  .lhp_main h1 img{
    aspect-ratio: 680 / 388;
  }
}




@media screen and (max-width:800px){
  .lhp_bnr{margin-bottom: 40px;}
  .lhp_shopimage{
    margin-top: 24px;
    margin-bottom: 40px;
  }
  .lhp_shoplistlink{
    top: calc(50% - 29px);
    left: calc(50% - 90px);
    width: 180px;
    height: 58px;
  }
  .lhp_shoplistlink img{width: 150px;}
  .lhp_videoarea{margin-bottom: 40px;}
}

@media screen and (max-width:640px){
  .lhp_main h1 img{
    aspect-ratio: 680 / 388;
  }
  .lhp_main h1::after{
    top: -40px;
    transform: translateX(0);
    left: 0;
    right: clamp(16.563rem, 1.102rem + 57.8vw, 30rem);
    /* 265- 480 428-800 */
    width: clamp(6.25rem, 3.949rem + 8.6vw, 8.25rem);
    /* 100-132 428-800 */
  }
  .lhp_main h1::before{
    bottom: auto;
    top: -50px;
    right:0;
    left: clamp(15.938rem, -0.242rem + 60.48vw, 30rem);
    left:auto;
    /* 255-480 428-800 */
    transform: translateX(0);
    width: clamp(6.25rem, 1.935rem + 16.13vw, 10rem);
    /* 100-160 428-800 */
  }
  .lhp_txt9{
    font-size: 1.25rem;
    margin-bottom:12px;
  }
  .lhp_txt9 span{display: block;}
  .lhp_txt10{font-size:0.875em;}
  .lhp_main::after{
    width:100%;
    height:100%;
    background-image: url(../img/il_topfuwa_sp.webp);
    background-repeat:no-repeat;
    background-size:96%;
    top: -110px;
  }
  .lhp_slide{
    position:absolute;
    width: 132px;
    opacity:1;
  }
  .lhp_slide picture{
    width:100%;
    display: block;
  }
  .lhp_photoblock{
    width:100%;
    display: inline-grid;
    height: 230px;
    position:relative;
  }
  .lhp_photo1{
    top: 72px;
    left: calc(50% - 260px);
  }
  .lhp_photo2 {
    top: 0px;
    left: calc(50% - 185px);
  }
  .lhp_photo3 {
    top: 75px;
    left: calc(50% - 112px);
  }
  .lhp_photo4 {
    top: 0;
    right: calc(50% - 120px);
  }
  .lhp_photo5 {
    top: 74px;
    right: calc(50% - 194px);
  }
  .lhp_photo6 {
    top: 0;
    right: calc(50% - 268px);
  }
  .lhp_photo2 .slick-list::after{
    top: 22px;
    left: 100px;
    width: 48px;
    height: 48px;
  }
  .lhp_photo3 .slick-list::after{
    bottom: -14px;
    left: 10px;
    width: 56px;
    height: 56px;
  }
  .lhp_photo4 .slick-list::before{
    width: 54px;
    height: 54px;
    bottom: -13px;
    left: 12px;
  }
  .lhp_photo4 .slick-list::after {
    top: -13px;
    left: 22px;
    width: 46px;
    height: 46px;
  }
  .lsp_btmwrap{
    padding:0 7px 164px;
  }
  
  .lsp_contentslist>ul{justify-content: center;}
  .lsp_contentslist>ul>li{
    width: 570px;
    max-width: 100%;
    padding: 16px;
  }
  .lsp_contentslist>ul>li .lsp_detailbox{flex-wrap: wrap;}
  .lsp_contentslist>ul>li .lsp_detailbox div:nth-of-type(2){display: contents;}
  .lsp_contentslist>ul>li .lsp_detailbox dl{
    width: 52%;
    font-size: 0.75rem;
  }
  .lsp_contentslist>ul>li .lsp_detailbox a{
    width: 260px;
    height: 40px;
    margin: 10px auto 0;
    padding-top: 8px;
    border-radius: 20px;
  }
  .lsp_contentslist>ul>li .lsp_text{height: auto;}


  .lsp_companylist ul li{width:100%;}
  .lsp_companylistbnr ul{gap: 36px 2%;}
  .lsp_companylistbnr ul li{width:49%;}

  .lsp_guidewrap{
    width:100%;
    margin-left:0;
  }
  .lsp_guidebox{flex-wrap: wrap;}
  .lsp_guidebox_map{width: 80%; margin:0 auto 1em;}
  .lsp_guidebox_txt{width: 100%;}
  
  
  
}