@charset "UTF-8";
/*--------------------------------------------
MV
---------------------------------------------*/
#mv{
	font-size : 0;
}
#mv .slick-dots{
	position : absolute;
	width : 100%;
}
#mv picture{
	overflow : hidden;
	width : 100%;
}
#mv picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}
@media screen and (max-width: 768px){
	#mv{
		height : calc( 450 * 100vw / 768 );
	}
	#mv picture{
		height : calc( 450 * 100vw / 768 );
	}
	#mv .slick-dots{
		bottom : calc( 12 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#mv{
		height : calc( 450 * 100vw / 768 );
	}
	#mv picture{
		height : calc( 450 * 100vw / 768 );
	}
	#mv .slick-dots{
		bottom : calc( 14 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px){
	#mv{
		height : 80vh;
	}
	#mv picture{
		height : 80vh;
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#mv .slick-dots{
		bottom : calc( 14 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#mv .slick-dots{
		bottom : 14px;
	}
}
/*--------------------------------------------
INFORMATION
---------------------------------------------*/
#information .wrap-inner{
}
#information p , #information dt , #information dd , #information li{
	letter-spacing : .1em;
}
#information li{
	margin-bottom : 2em;
	border-bottom : 1px dotted #ccc;
	padding-bottom : 2em;
}
#information li:nth-last-of-type(1){
	border-bottom : none;
}
@media screen and (max-width: 768px){
	#information .wrap-inner{
		margin-top : calc( 26 * 100vw / 768 );
	}
	#information .sub-title01{
		margin-bottom : calc( 15 * 100vw / 768 );
	}
	#information p , #information dt , #information dd , #information li{
		font-size : calc( 24 * 100vw / 768 );
		line-height : 1.2;
	}
}
@media print,screen and (min-width: 769px){
	#information p , #information dt , #information dd , #information li{
		line-height : 1.5;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#information .wrap-inner{
		margin-top : calc( 21 * 100vw / 768 );
	}
	#information .sub-title01{
		margin-bottom : calc( ( 14 - 4 ) * 100vw / 768 );
	}
	#information p , #information dt , #information dd , #information li{
		font-size : calc( 16 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#information .wrap-inner{
		margin-top : calc( 21 * 100vw / 1280 );
	}
	#information .sub-title01{
		margin-bottom : calc( ( 14 - 4 ) * 100vw / 1280 );
	}
	#information p , #information dt , #information dd , #information li{
		font-size : calc( 16 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#information .wrap-inner{
		margin-top : 21px;
	}
	#information .sub-title01{
		margin-bottom : calc( 14px - 4px );
	}
	#information p , #information dt , #information dd , #information li{
		font-size : 16px;
	}
}
/*--------------------------------------------
BLOG
---------------------------------------------*/
#blog picture{
	overflow : hidden;
	width : 100%;
}
#blog picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}
#blog li > a{
	display : block;
}
#blog a div div{
	display : flex;
	align-items : flex-start;
	flex-wrap : wrap;
}
#blog .author:before{
	content : "：";
}
@media screen and (max-width: 768px){
	#blog ul{
		margin-top : calc( 25 * 100vw / 768 );
	}
	#blog li + li{
		margin-top : calc( 20 * 100vw / 768 );
	}
	#blog li a{
		display : flex;
		align-items : center;
	}
	#blog picture{
		width : calc( 220 * 100% / 736 );
		flex-shrink : 0;
		height : calc( 220 * 100vw / 768 );
		margin-right : calc( 14 * 100% / 736 );
	}
	#blog .title{
		font-size : calc( 26 * 100vw / 750 );
		line-height : 1.38;
	}
	#blog time , #blog .author{
		font-size : calc( 24 * 100vw / 750 );
		line-height : 1.5;
	}
	#blog .link02{
		margin-top : calc( 41 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#blog ul{
		display : flex;
		justify-content : center;
	}
	#blog .title{
		line-height : 1.31;
	}
	#blog time , #blog .author{
		line-height : 1.5;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#blog ul{
		margin-top : calc( 14 * 100vw / 768 );
	}
	#blog li{
		width : calc( 180 * 100% / 980 );
	}
	#blog li:not(:nth-child(5n+1)){
		margin-left : calc( 20 * 100% / 980 );
	}
	#blog picture{
		height : calc( 136 * 100vw / 768 );
	}
	#blog .title{
		font-size : calc( 16 * 100vw / 768 );
		margin-top : calc( ( 12 - 2.5 ) * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#blog ul{
		margin-top : calc( 14 * 100vw / 1280 );
	}
	#blog li{
		width : calc( 180 * 100vw / 1280 );
	}
	#blog li:not(:nth-child(5n+1)){
		margin-left : calc( 20 * 100vw / 1280 );
	}
	#blog picture{
		height : calc( 180 * 100vw / 1280 );
	}
	#blog .title{
		font-size : calc( 16 * 100vw / 1280 );
		margin-top : calc( ( 12 - 2.5 ) * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#blog ul{
		margin-top : 14px;
	}
	#blog li{
		width : 180px;
	}
	#blog li:not(:nth-child(5n+1)){
		margin-left : 20px;
	}
	#blog picture{
		height : 180px;
	}
	#blog .title{
		font-size : 16px;
		margin-top : calc( 12px - 2.5px );
	}
	#blog .link02{
		margin-top : calc( 30px - 3.5px );
	}
}
/*--------------------------------------------
CONCEPT
---------------------------------------------*/
@media screen and (max-width: 768px){
	#concept .p-big{
		margin-top : calc( ( 45 - 13.6 ) * 100vw / 768 );
	}
	#concept .text-contents03{
		margin-top : calc( ( 59 - 13.6 - 8.6 ) * 100vw / 768 );
	}
	#concept .text-contents01{
		margin-top : calc( ( 69 - 8.6 - 4.5 ) * 100vw / 768 );
	}
	#concept .text-contents02{
		margin-top : calc( ( 62 - 4.5 ) * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#concept .p-big{
		margin-top : calc( ( 43 - 8.6 ) * 100vw / 768 );
	}
	#concept .text-contents03{
		margin-top : calc( ( 32 - 8.6 - 6.4 ) * 100vw / 768 );
	}
	#concept .text-contents01{
		margin-top : calc( ( 86 - 6.4 ) * 100vw / 768 );
	}
	#concept .text-contents02{
		margin-top : calc( 72 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#concept .p-big{
		margin-top : calc( ( 43 - 8.6 ) * 100vw / 1280 );
	}
	#concept .text-contents03{
		margin-top : calc( ( 32 - 8.6 - 6.4 ) * 100vw / 1280 );
	}
	#concept .text-contents01{
		margin-top : calc( ( 86 - 6.4 ) * 100vw / 1280 );
	}
	#concept .text-contents02{
		margin-top : calc( 72 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#concept .p-big{
		margin-top : calc( 43px - 8.6px );
	}
	#concept .text-contents03{
		margin-top : calc( 32px - 8.6px - 6.4px );
	}
	#concept .text-contents01{
		margin-top : calc( 86px - 6.4px );
	}
	#concept .text-contents02{
		margin-top : 72px;
	}
}
/*--------------------------------------------
GALLERY
---------------------------------------------*/
@media screen and (max-width: 768px){
	#gallery picture img{
		height : calc( 450 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#gallery picutre img{
		height : calc( 300 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#gallery picutre img{
		height : calc( 300 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#gallery picutre img{
		height : 300px;
	}
}
/*--------------------------------------------
PRICE
---------------------------------------------*/
.price-bt p.link {
    text-align: center;
    margin-top: 2em;
}    
    .price-bt p.link a {
        border: 1px solid #666;
        margin: auto;
    }    
@media screen and (max-width: 768px){
	#price .list-price{
		margin-top : calc( 46 * 100vw / 768 );
	}
    .price-bt p.link {
    }    
        .price-bt p.link a {
            border: calc( 3 * 100vw / 768 ) solid #666;
            padding: calc( 15 * 100vw / 768 ) calc( 50 * 100vw / 768 );
        }    
}
@media print,screen and (min-width: 769px){
        .price-bt p.link a {
            border: 1px solid #666;
            padding: 5px 15px;
        }    
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#price .list-price{
		margin-top : calc( 45 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#price .list-price{
		margin-top : calc( 45 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#price .list-price{
		margin-top : 45px;
	}
}

#price .message {
	text-align: center;
	margin-bottom: 2em;
	margin-top: 1em;
}
	#price .message a {
		text-decoration: underline;
	}
/*--------------------------------------------
STAFF
---------------------------------------------*/
@media screen and (max-width: 768px){
	#staff .list-staff{
		margin-top : calc( 54 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#staff .list-staff{
		margin-top : calc( 45 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#staff .list-staff{
		margin-top : calc( 45 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#staff .list-staff{
		margin-top : 45px;
	}
}
/*--------------------------------------------
SHOP
---------------------------------------------*/
#shop picture img{
	width : 100%;
	height : auto;
}
#shop .about a[href^="tel"]{
	display : block;
}
#shop .sns{
	display : flex;
	align-items : center;
}
@media screen and (max-width: 768px){
	#shop .box{
		margin-top : calc( 41 * 100vw / 768 );
	}
	#shop picture{
		width : 100%;
	}
	#shop h3{
		text-align : center;
		margin-top : calc( 40 * 100vw / 768 );
	}
	#shop h3 img{
		height : calc( 55 * 100vw / 768 );
	}
	#shop .about{
		margin-top : calc( ( 34 - 8.6 ) * 100vw / 768 );
	}
	#shop .links{
		margin-top : calc( ( 40 - 8.6 ) * 100vw / 768 );
	}
	#shop .link01{
		margin-left : auto;
		margin-right : auto;
		width : calc( 600 * 100% / 736 );
		height : calc( 80 * 100vw / 768 );
	}
	#shop .sns{
		margin-top : calc( 30 * 100vw / 768 );
		justify-content : center;
	}
	#shop .sns li + li{
		margin-left : calc( 20 * 100vw / 768 );
	}
	#shop .sns img{
		height : calc( 80 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#shop .box{
		display : flex;
		align-items : center;
	}
	#shop picture{
		flex-shrink : 0;
	}
	#shop .about{
		line-height : 1.5;
	}
	#shop .links{
		display : flex;
		align-items : center;
	}
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#shop .box{
		margin-top : calc( 32 * 100vw / 768 );
	}
	#shop picture{
		width : calc( 520 * 100% / 1080 );
		margin-right : calc( 36 * 100% / 1080 );
	}
	#shop h3 img{
		height : calc( 50 * 100vw / 768 );
	}
	#shop .about{
		margin-top : calc( ( 26 - 4 ) * 100vw / 768 );
	}
	#shop .links{
		margin-top : calc( ( 27 - 4 ) * 100vw / 768 );
	}
	#shop .link01{
		width : calc( 118 * 100vw / 768 );
		height : calc( 50 * 100vw / 768 );
	}
	#shop .sns{
		margin-left : calc( 20 * 100vw / 768 );
	}
	#shop .sns li + li{
		margin-left : calc( 10 * 100vw / 768 );
	}
	#shop .sns img{
		height : calc( 40 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#shop .box{
		margin-top : calc( 32 * 100vw / 1280 );
	}
	#shop picture{
		width : calc( 520 * 100% / 1080 );
		margin-right : calc( 36 * 100% / 1080 );
	}
	#shop h3 img{
		height : calc( 50 * 100vw / 1280 );
	}
	#shop .about{
		margin-top : calc( ( 26 - 4 ) * 100vw / 1280 );
	}
	#shop .links{
		margin-top : calc( ( 27 - 4 ) * 100vw / 1280 );
	}
	#shop .link01{
		width : calc( 118 * 100vw / 1280 );
		height : calc( 50 * 100vw / 1280 );
	}
	#shop .sns{
		margin-left : calc( 20 * 100vw / 1280 );
	}
	#shop .sns li + li{
		margin-left : calc( 10 * 100vw / 1280 );
	}
	#shop .sns img{
		height : calc( 40 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#shop .box{
		margin-top : 32px;
	}
	#shop picture{
		width : 520px;
		margin-right : 36px;
	}
	#shop h3 img{
		height : 50px;
	}
	#shop .about{
		margin-top : calc( 26px - 4px );
	}
	#shop .links{
		margin-top : calc( 27px - 4px );
	}
	#shop .link01{
		width : 118px;
		height : 50px;
	}
	#shop .sns{
		margin-left : 20px;
	}
	#shop .sns li + li{
		margin-left : 10px;
	}
	#shop .sns img{
		height : 40px;
	}
}
/*--------------------------------------------
ACCESS
---------------------------------------------*/
    .map-desc {
        padding-top: 1em;
    }
@media screen and (max-width: 768px){
	#access .map-container{
		margin-top : calc( 30 * 100vw / 768 );
	}
	#access .map-wrap .parking{
		width : calc(100vw - calc(50 * 100vw / 768));
		margin-top : calc(10 * 100vw / 768);
		margin : auto;
	}
	#access .access-text{
		padding : calc(10 * 100vw / 768) calc(10 * 100vw / 768) calc(30 * 100vw / 768) calc(10 * 100vw / 768);
	}
    .parking-wrap {
        padding : calc(10 * 100vw / 768) calc(10 * 100vw / 768) calc(30 * 100vw / 768) calc(10 * 100vw / 768);
    }
    .parking-wrap img {
        width: 100%;
    }
}
@media print,screen and (min-width: 769px){
	#access .map-wrap{
		position : relative;
	}
	#access .map-wrap .parking{
		position : absolute;
		right : 10px;
		top : 10px;
		width : 350px;
		z-index : 20;
		max-width : 30vw;
	}
	#access .map-wrap iframe{
		z-index : 5;
	}
	#access .access-text{
		padding : 5px 30px 30px 30px;
		display : flex;
	}
	#access .access-text p{
		width : 50%;
	}
    .map-desc {
        display: flex;
        max-width: 1060px;
        margin: auto;
    }
    .access-text {
        width: 600px;
    }
    .parking-wrap {
    }
    .parking-wrap img {
        height: 300px;
    }
}
@media screen and (min-width: 769px) and (max-width:1279px){
	#access .map-container{
		margin-top : calc( 30 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 1280px) and (max-width:1379px){
	#access .map-container{
		margin-top : calc( 30 * 100vw / 1280 );
	}
}
@media print,screen and (min-width: 1380px){
	#access .map-container{
		margin-top : 30px;
	}
}

#head-banner {
    background: url("../images/products/mv.png") center center no-repeat;
    background-size: cover;
	background-position: right center;
    display: flex;
    align-items: flex-end ;
    justify-content: flex-start;
    
}
    #head-banner h1 {
        font-family: 'Dancing Script', cursive;
			color: #B9A339;
    }

/*--- products ------------*/
html {
    scroll-behavior: smooth;
}

    .products .page-navi ul {
            display: flex;
            align-items: center;
            justify-content: center;
    }
    .products-list .top {
        text-align: right;
        position: relative;
    }
 
@media screen and (max-width: 768px){
    #head-banner {
        height: 35vh;
        max-height: calc( 400 * 100vw / 768 );
        margin-bottom: 1em;
    }
        #head-banner h1 {
            font-size: calc( 80 * 100vw / 768 );
            padding: 0 0 calc( 40 * 100vw / 768 ) calc( 40 * 100vw / 768 );
        }
    .products .page-navi {
    }
    .products .page-navi ul li {
            width: 10em;
            margin: 0 calc( 10 * 100vw / 768 );
        }
            .products .page-navi ul li a {
                display: block;
                text-align: center;
                white-space: nowrap;
                border-bottom: 1px solid #666;
                padding-bottom: 5px;
            }
    .products-list  {
    }
    .products-list  .section-title01 {
        padding-top: 5em;
    }
    .products-list ul  {
        margin-bottom: 2em;
    }
    .products-list ul  li p.link {
        margin-top: 10px;
    }    
        .products-list ul  li p.link a {
            border: 1px solid #666;
            padding: 5px 15px;
            margin-right: 1em;
        }
    .products-list .top {
        margin-top: -1em;
        padding-bottom: 3em;
    }

}
@media print,screen and (min-width: 769px){
    #head-banner {
        height: 35vh;
        max-height: 350px;
        margin-bottom: 1em;
    }
        #head-banner h1 {
            font-size: 60px;
            padding: 0 0 60px 80px;
        }
    .products .page-navi {
        margin-bottom: 6em;
    }
    .products .page-navi ul li {
            width: 220px;
            margin: 0 10px;
        }
            .products .page-navi ul li a {
                display: block;
                text-align: center;
                padding: 20px ;
                border: 1px solid #ccc;
            }
    .products-list ul  {
        margin-bottom: 100px;
    }
        .products-list ul  li p.link a {
            border: 1px solid #666;
            padding: 5px 15px;
            margin-right: 1em;
        }
    .products-list .top {
        margin-top: -5em;
        padding-bottom: 8em;
    }

}

.frame-wrapper__video {
  position: relative;
  height: 0;
  padding-bottom: 54%;
  overflow: hidden;
  margin-bottom: 50px;
}

.frame-wrapper__video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px){
    .frame-wrapper__video {
        width: calc( 100% - ( 48 * 100vw / 768 ));
        margin: calc( 24 * 100vw / 768 );
    }
}
@media print,screen and (min-width: 769px){
    .frame-wrapper__video {
        width: calc( 100% - 20px );
        max-width: 1080px;
        margin-right: auto;
        margin-left: auto;
    }
}