@charset "utf-8";@charset "UTF-8";
/* CSS Document */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip; 
}
body {
  font-family: sans-serif;
  background: #f6f6f6;
}
.bg-fixed {
  position: fixed;
  inset: 0;
  background: url("/photo/page/20260126/bk.png") center / cover no-repeat;
  z-index: -1;
	background-size: 350px;
}
#lp_content {
	width: 100%;
	margin: 0 auto;
	background: #5e5e5e7a;
	padding: 0 2% 5%;
}
/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* op */
  .opening {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    z-index: 9999;
  }

  .opening.fade-out {
    animation: fadeOutOpening 1.3s ease-out forwards;
  }

  .logo-container {
    width: 320px;
    height: auto;
  }

  .logo-container svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  #frame, #plant-right, #plant-left, #main {
    opacity: 0;
  }

  #tiara-1, #tiara-2, #tiara-3, #tiara-4, #tiara-5 {
    opacity: 0;
  }

  #bottom-1, #bottom-2, #bottom-3, #bottom-4, #bottom-5,
  #bottom-6, #bottom-7, #bottom-8, #bottom-9, #bottom-10,
  #bottom-11, #bottom-12, #bottom-13 {
    opacity: 0;
  }

  #frame {
    animation: smoothFadeIn 0.9s ease-in-out 0s forwards;
  }

  #tiara-1 { animation: smoothFadeIn 0.50s ease-in-out 0.40s forwards; }
  #tiara-2 { animation: smoothFadeIn 0.40s ease-in-out 0.55s forwards; }
  #tiara-3 { animation: smoothFadeIn 0.30s ease-in-out 0.65s forwards; }
  #tiara-4 { animation: smoothFadeIn 0.30s ease-in-out 0.75s forwards; }
  #tiara-5 { animation: smoothFadeIn 0.30s ease-in-out 0.85s forwards; }

  /*#plant-right {                                                                                                        
    opacity: 0;                                                                                                         
    animation: softClipFade 0.80s ease-out 0.65s forwards;                                                                  
  }*/               
  #plant-right  { animation: smoothFadeIn 0.40s ease-in-out 1.1s forwards; }

                                                                                                                        
  @keyframes softClipFade {                                                                                             
    0% {                                                                                                                
      opacity: 1;                                                                                                       
      clip-path: inset(0 0 80% 0);                                                                                      
      filter: blur(1px);                                                                                                
    }                                                                                                                   
    40% {                                                                                                               
      opacity: 1;                                                                                                       
      filter: blur(0px);                                                                                                
    }                                                                                                                   
    100% {                                                                                                              
      opacity: 1;                                                                                                       
      clip-path: inset(0 0 0 0);                                                                                        
      filter: blur(0);                                                                                                  
    }                                                                                                                   
  }                  

  /*#plant-left {                                                                                                        
    opacity: 0;                                                                                                         
    animation: softClipFade 0.90s ease-out 0.80s forwards;                                                                  
  }*/             
  #plant-left  { animation: smoothFadeIn 0.40s ease-in-out 1.3s forwards; }

                                                                                                                        
  @keyframes softClipFade {                                                                                             
    0% {                                                                                                                
      opacity: 0;                                                                                                       
      clip-path: inset(0 0 80% 0);                                                                                      
      filter: blur(1px);                                                                                                
    }                                                                                                                   
    40% {                                                                                                               
      opacity: 1;                                                                                                       
      filter: blur(0px);                                                                                                
    }                                                                                                                   
    100% {                                                                                                              
      opacity: 1;                                                                                                       
      clip-path: inset(0 0 0 0);                                                                                        
      filter: blur(0);                                                                                                  
    }                                                                                                                   
  }     	

  #bottom-1  { animation: smoothFadeIn 0.2s ease-in-out 1.40s forwards; }
  #bottom-2  { animation: smoothFadeIn 0.2s ease-in-out 1.45s forwards; }
  #bottom-3  { animation: smoothFadeIn 0.2s ease-in-out 1.50s forwards; }
  #bottom-4  { animation: smoothFadeIn 0.2s ease-in-out 1.55s forwards; }
  #bottom-5  { animation: smoothFadeIn 0.2s ease-in-out 1.60s forwards; }
  #bottom-6  { animation: smoothFadeIn 0.2s ease-in-out 1.65s forwards; }
  #bottom-7  { animation: smoothFadeIn 0.2s ease-in-out 1.70s forwards; }
  #bottom-8  { animation: smoothFadeIn 0.2s ease-in-out 1.75s forwards; }
  #bottom-9  { animation: smoothFadeIn 0.2s ease-in-out 1.80s forwards; }
  #bottom-10 { animation: smoothFadeIn 0.2s ease-in-out 1.85s forwards; }
  #bottom-11 { animation: smoothFadeIn 0.2s ease-in-out 1.90s forwards; }
  #bottom-12 { animation: smoothFadeIn 0.2s ease-in-out 1.95s forwards; }
  #bottom-13 { animation: smoothFadeIn 0.2s ease-in-out 2.0s forwards; }


  #main {
    animation: smoothFadeIn 1.0s ease-in-out 2.0s forwards;
  }

  @keyframes smoothFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes softFadeIn {
    0% { 
      opacity: 0;
      filter: blur(3px);
    }
    100% { 
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes fadeOutOpening {
    0% {
      opacity: 1;
      visibility: visible;
    }
    100% {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
  }
/* op */
/* hero */
.head {
    overflow: hidden;
    clear: both;
}
.hero {
    padding: 0px 0 1% 0;	
    margin: 0 auto 6%;
    overflow: hidden;
    clear: both;	
}
.hero-header{
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 840px;
    margin: 60px auto 6%;
    display: block;
}
.hero-header h1 {
    font-size: clamp(1.9rem, 5vw, 3.5rem);;
    font-weight: bold;
    margin-bottom: 0px;
    color: #ffffff;
    text-shadow: 1px 1px 14px #00000026;
}
.hero-header p {
    font-size: clamp(1.5rem, 2vw, 1rem);;
    font-weight: normal;
    line-height: 1.6;
    color: #fff;
    text-shadow: 1px 1px 14px #00000057;
}
/* layout */
.hero-layout {
    margin: 0 auto;
    width: 100%;
}
/* left */
.hero-left{
    width: 58%;
    float: left;
    margin-right: 0%;
}
.hero-video {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);	
}
.hero-video a {
    display: inherit;
    margin-bottom: -10px;
}
.hero-video video{
  width: 100%;
  height: auto;	
}
.hero-video img {
  width: 100%;
  height: auto;	
}
.hero-video,
.hero-image{
  cursor: pointer;
  overflow: hidden;
}
/* right */
.hero-right{
    width: 30%;
    float: right;
}
.hero-image {
    width: 100%;
    height: auto;
    margin-bottom: 21%;
    border-radius: 3px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
}
.hero-image a{
    display: inherit;
    margin-bottom: 0px;
}
.hero-image img{
  width: 100%;
max-width: 300px;
  height: auto;
}
.hero-right .hero-image:last-child{
    margin-bottom: 0%;
}
.itemlist{
	width: 100%;	
	margin: 0 auto;	
}
.bnrarea{
	width: 100%;	
	margin: 0 auto;
    margin-bottom: 8%;
}
.slider_wrap{
	width: 100%;
    max-width: 840px;
	margin: 0 auto;	
    margin-bottom: 4%;
}
/* スライドの動き等速 */
.swiper-wrapper {
  transition-timing-function: linear;
}
/* 画像のサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}
.swiper-slide {
    margin: 0 0 0 -1px;
}
.itemlist .item-box {
    width: 100%;
	padding: 0 0%;
    margin-bottom:4%;
    overflow: hidden;
    clear: both;
}
.itemlist .item-box:last-child {
    margin-bottom:2%;
}
.itemlist .item-box .item-image{
    width: 32.66%;
    margin: 0 1% 0 0;
    float: left;
    border-radius: 3px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);	
}
.itemlist .item-box .item-image:first-child{
}
.itemlist .item-box .item-image:last-child{
margin: 0 0% 0 0;
}
.itemlist .item-box .item-image img {
	width: 100%;
	margin: 0 auto;
	display: block;
	height: auto;
    border-radius: 3px;
}
.bnrarea .item-box {
	overflow: hidden;clear: both;
	margin-bottom: 3.7%;
}
.bnrarea .item-box .bnr-image{
width: 49.5%;	
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);		
}
.bnrarea .item-box .bnr-image img {
	width: 100%;
	height: auto;
    border-radius: 3px;	
}
.bnrarea .item-box .bnr-image:first-child{
	float: left;
}
.bnrarea .item-box .bnr-image:last-child{
	float: right;
}
.hero,
.bnrarea{
    width: 100%;
    max-width: 840px;	
}

.itemlist {
    width: 100%;
    padding: 0.3% 0 0 0;
    overflow: hidden;
    clear: both;
    margin-bottom: 7%;
}
.itemlist .item-box{
	width: 100%;
max-width: 840px;	
	margin: 0 auto  0.7%;
}
.itemlist .item-box:last-child {
    margin-bottom: 0%;
    padding-bottom: 1%;
}
  .swiper-wrapper {                                                                                                     
    transition-timing-function: linear !important;                                                                      
  } 
@media screen and (max-width: 980px) {
.hero-header {
    padding: 2%;
}	
.hero-header p{
    font-size: 13px;
}
.hero-header {
    margin:7% auto 8%;
}
.itemlist .item-box {
    margin: 0 auto 0.7%;
}
.itemlist .item-box:last-child {
    padding-bottom: 4%;
}
.logo-container svg {
    width: 60%;
	margin:0 auto;
display:block;
}
.bg-fixed {
	background-size: 180px;
}
.itemlist {
    padding: 2.5% 0 0 0;
}
#lp_content {
    padding: 0 2% 3.5%;
}
.itemlist {
    margin-bottom: 5%;
}
.bnrarea {
    margin-bottom: 9%;
}
.slider_wrap {
    margin: 0 auto 10%;
}	
}
.crumbsList{
    display: none;
}