@charset "utf-8";
/* CSS Document */
/*================================================
 *  header
 ================================================*/
@media (max-width:1024px){
        #head_wrap #mobile-head .logo {
            opacity: 0;
        }
        
        #head_wrap.fixed #mobile-head .logo {
            opacity: 1;
        }
    }
@media (min-width: 1025px) {
    /* トップページのみ */
    #head_wrap {
        opacity: 0;
        pointer-events: none;
    }

    /* トップページのみ */
    #head_wrap.fixed {
        opacity: 1;
        pointer-events: inherit;
    }
}


/*================================================
 *  KV
 ================================================*/
#page-home .t-kv{
    position: relative;
    z-index: -1;
    height: 150vw;
}
@media screen and (min-width:768px){
    #page-home .t-kv{
        height: 75vw;
    }
}
@media screen and (min-width:1025px){
    #page-home .t-kv{
        height: 45vw;
    }
}

.kv-bg{
    position: absolute;
    top: 0;
    height:200px;
    width: 100%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    z-index: 90;
}

/* ズームスライダー */
.slick-slider-zoom {
    z-index: 1;
  height: 150vw;
  width: 100vw;  
  margin-inline: auto;  
  overflow: hidden;
}

.slick-slider-zoom img {
    height:150vw;
    width: 100%;
	object-fit: cover;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}

@media screen and (min-width:768px){
    .slick-slider-zoom{
        height:75vw;
    }
    .slick-slider-zoom img{
        height:75vw;
    }
}
@media screen and (min-width:1025px){
    .slick-slider-zoom{
        height:48vw;
    }
    .slick-slider-zoom img {
        height: 48vw;
    }
}


/*LOGO */
.kv-logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
     /*inset:0;
    margin: auto;*/
    z-index: 1;
    max-width: 560px;
    width: 80%;
}



.kv-logo p{
    text-align: center;
    font-weight: bold;

}

.kv-logo p:first-child{
    font-size: 24px;
    margin-bottom: 40px;text-align: left;
}

.kv-logo p:last-child{
    margin-bottom: 10px;
}

.kv-logo p span{
    display: inline-block;
}


@media screen and (min-width:1025px){
    .kv-logo{
        top: 55%;
    } 
}


.kv-copy{
    position: absolute;
    top: 8%;
    left:8%;
    z-index: 100;
}

.sub-copy{
    font-size: 2rem;
    opacity: 0;
  animation: fadeInLeft 1.0s ease-out forwards;
  animation-delay: 0.5s;
}

 
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0); 
  }
}

@media screen and (min-width:768px){
    .sub-copy{
        font-size: 3.2rem;
    }
}

.sub-copy span{
    display: block
}


/* スクロール↓ */
.next_contents{
    display: inline-block;  
    position: absolute;
    bottom:10%;
    left: 45%;
    z-index: 4;
    color: #fff;
    cursor: pointer;
}

@media screen and (min-width:1025px){
    .next_contents{
        bottom: 0;
        left: 50%;
    }
}

.next_contents span {
    position: absolute;
    top: 10px;
    left: 50%;
    height: 24px;  
    width: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb 1.5s infinite;
    animation: sdb 1.5s infinite;
    box-sizing: border-box;
}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}


/*================================================
 *  ご案内
 ================================================*/
.t-guide{
	margin-top: 80px;
}

@media(min-width:1025px) {
	.t-guide{
		margin-top: 160px;
	}
}

.t-guide ul.flex li{
    padding: 16px;
    text-align: center;
}


.t-guide ul.flex li a{
    
}

.t-guide ul.flex li a img{
    width: 64px;
}

.t-guide ul.flex li a p{
    margin-top: 16px;
}

@media(max-width:767px) {
  .t-guide ul.flex.col-04 li:nth-child(odd) {
    border-right: dotted 1px #564e44;
  }
    
  .t-guide ul.flex.col-04 li:nth-child(-n+2) {
    border-bottom: dotted 1px #564e44;
  }
}
@media(min-width:768px) {
    .t-guide ul.flex.col-04 li{
        width: 25%;
        font-size: 1.6rem;
    }
    
    .t-guide ul.flex.col-04 li:not(:last-child){
        border-right: dotted 1px #564e44;
    }
}

@media(min-width:1025px) {
    .t-guide ul.flex.col-04 li{
        font-size: 2.4rem;
    }
}

/*================================================
 *  あいさつ
 ================================================*/
.t-intro{
    background: #fafafa;
}

.intro-inner .contents-box_m{
    background: url("../img/intro_bg.png")no-repeat;
    background-position: top left;
    background-size: contain;
}

@media(max-width: 767px) {
    .intro-inner .contents-box_m{
        /*padding-top: 280px;*/
        padding-top: 55vw;
    }
    
    .intro-inner h2 .copy01{
        font-size:3.5vw;
    }
    
    .intro-inner h2 .copy02 {
        margin-top: 8px;
        font-size:6vw;
    }
    
    .t-intro h2 .copy02 img{
        display: none;
    }
    
    .intro-inner .text-area {
        margin-top: 24px;
    }
    
    .intro-inner .text-area p{
        line-height:2.4;
    }
    
    
}


@media(min-width:768px) {
    .intro-inner .contents-box_m{
        background-position: bottom left;
        background-size: 80%;
    }
    
    .intro-inner .text-rl {
        margin-left: auto;
        padding: 80px 40px 80px 0;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    
    .intro-inner .number{
        text-combine-upright: all;
    }
    
    .intro-inner h2 {
        margin-left: 40px;
    }
    
    .intro-inner h2 .copy01{
        font-size: 2rem;
        margin-left: 8px;
    }
    
    .intro-inner h2 .copy02{
        font-size: 3.2rem;
        letter-spacing: 0.15em;
    }
    
    .t-intro h2 .copy02 .parentheses{
        display: none;
    }
    
    .intro-inner .text-area p{
        margin-top: 0;
        line-height: 3;
    }
}

/*================================================
 *  オリジナル型の製作
 ================================================*/
.original_mold .flex{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;            
}
                        
.original_mold .text{    
    flex: 1;            
}
            
            
.original_mold .text h2{
    font-size: 2.4rem;            
}
            
            
.original_mold .text p{            
    margin-top: 16px;
}
            
.original_mold .text p span{
    display: inline-block;
}
            
.original_mold img{          
    width: 100%;
    object-fit: cover;
}
            
@media screen and (max-width:1024px){            
    .original_mold img{            
        order: -1;            
    }
            
    .original_mold .text h2{            
        margin-top: 16px;            
    }            
}
        
@media screen and (min-width:1025px){            
    .original_mold img{        
        height: 320px;
        width: 480px;
        object-fit: cover;        
    }
                
    .original_mold .text{
        margin-right: 40px; 
    }
}




/*================================================
 *  商品紹介
 ================================================*/
.t-products{
    margin-top: 80px;
}


@media screen and (max-width:767px){
    .t-products{
        margin-top: 80px;
    }
    
    .t-products .contents-head p{
        text-align: left;
    }
}

.slick-slider-carousel{
    height: auto;
	width: 100%;
	margin: 40px auto 0 auto;
    padding: 0px;
}

@media(min-width:1025px) {
    .slick-slider-carousel{
        width: 95%
    }
}

.slick-slider-carousel li{
    padding: 0 8px;
}

.slick-slider-carousel li:hover{
    opacity: 0.8;
}

.slick-slider-carousel img{
	width: 100%;
    height: auto;
    object-fit: cover;
}

.slick-slider-carousel .text-area{
    margin-top: 8px;
    text-align: center;
}

.slick-slider-carousel .link-btn{
    position: relative;
    margin-top: 16px;
    padding: 8px 16px;
    background: #564e44;
    color: #fff;
}

.slick-slider-carousel .link-btn::after{
    position: absolute;
    top: 0;
    right: 24px;
    bottom: 0;
    height: .64rem;
    width: .64rem;
    margin: auto;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    content: '';
}

.t-products a.link-btn{
    margin-top: 80px;
}