@charset "UTF-8";
#main{
	padding-bottom : 1em;
}

@media screen and (max-width: 768px){
    body {
        padding-top : calc( 50 * 100vw / 768 );
    }
}
/*--------------------------------------------
MENU
---------------------------------------------*/
#price {
    padding-bottom: 5em;
}
@media screen and (max-width: 768px){
	#price .list-price{
		margin-top : calc( 46 * 100vw / 768 );
	}
}
@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;
	}
}
.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;
        background: url("../images/ui/title_back01.png");
        background-size: cover;
        background-position: right center ;
	}
	#head-banner h1{
		font-size : calc( 80 * 100vw / 768 );
		padding : 0 0 calc( 40 * 100vw / 768 ) calc( 40 * 100vw / 768 );
	}
        #head-banner h1 span.mini{
            font-size : calc( 60 * 100vw / 768 );
            margin-left: .5em;
        }
	.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{
		padding-bottom : 150px;
	}
	.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;
        background: url("../images/ui/title_back01.png");
        background-size: cover;
	}
	#head-banner h1{
		font-size : 60px;
		padding : 0 0 60px 80px;
	}
        #head-banner h1 span{
            font-size : 40px;
            margin-left: .5em;
        }
	.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;
	}
}

/*--------------------------------------------
staff-detail
---------------------------------------------*/
#staff-detail .main-photo{
	margin : auto auto 2em auto;
}
#staff-detail .main-photo img{
	width : 100%;
	height : auto;
}
#staff-detail .box{
}
	#staff-detail .box p{
		display: inline-block;
		margin-right: 1em;
	}
		#staff-detail .box p span{
			margin-right: .5em;
		}

@media screen and (max-width: 768px){
	#staff-detail .main-photo{
		width : 100%;
	}
	#staff-detail h2{
		font-size : calc( 34 * 100vw / 768 );
		margin-bottom : 1em;
		font-weight : 600;
	}
	#staff-detail .text-wrap{
		font-size: calc( 26 * 100vw / 768 );
	}
    #staff-detail .staff-datamore {
        margin-top: 2em;
        margin-bottom: 4em;
    }
	#staff-detail h3{
		font-size : calc( 28 * 100vw / 768 );
		margin-bottom : 1em;
		font-weight : 500;
        margin-top: 2em;
	}    
	#staff-detail ul {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 1em;
        margin-top: 1em;
	}
        #staff-detail ul li {
            list-style: none;
        }
            #staff-detail ul li a {
                display: inline-block;
                background: #666;
                color: #fff;
                text-decoration: none;
                padding: 10px;
            }
}
@media print,screen and (min-width: 769px){
    #staff-detail .staff-datamore {
        margin-top: 2em;
        margin-bottom: 4em;
    }
	#staff-detail h3{
		font-size : 24px;
		margin-bottom : 1em;
		font-weight : 500;
        margin-top: 2em;
	}    
	#staff-detail ul {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 1em;
        margin-top: 1em;
	}
        #staff-detail ul li {
            list-style: none;
        }
            #staff-detail ul li a {
                display: inline-block;
                background: #666;
                color: #fff;
                text-decoration: none;
                padding: 10px;
            }
}
@media print,screen and (min-width: 769px) and (max-width:1059px){
	#staff-detail .staff-data {
		flex-wrap: wrap;
		align-items: center;
	}
	#staff-detail .main-photo{
		max-width : 500px;
		margin: auto auto 2em auto;
	}
	#staff-detail .text-wrap{
		max : 800px;
		margin: auto auto 2em auto;
	}
	#staff-detail h2{
		font-size : 28px;
		margin-bottom : 20px;
		font-weight : 600;
	}
	#staff-detail .box{
		width: 100%;
		margin-top : 1em;
		margin-bottom : 20px;
		line-height : 1.8;
	}
}
@media print,screen and (min-width: 1060px){
	#staff-detail .staff-data {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	#staff-detail .main-photo , #staff-detail .text-wrap{
		width : 500px;
	}
	#staff-detail h2{
		font-size : 28px;
		margin-bottom : 20px;
		font-weight : 600;
	}
	#staff-detail .box{
		width: 100%;
		margin-top : 1em;
		margin-bottom : 20px;
		line-height : 1.8;
	}
}


/*--------------------------------------------
contact
---------------------------------------------*/

@media screen and (max-width: 768px){
    #contact {
    }
        #contact dl {
            margin-top: 3em;
            font-size: calc( 26 * 100vw / 768 );
        }
            #contact dl div {
                display: block;
                padding-bottom: calc( 14 * 100vw / 768 );
                margin-bottom: calc( 14 * 100vw / 768 );
                border-bottom: 1px solid #ccc;
            }
                #contact dl div dt {
                    margin-bottom: calc( 10 * 100vw / 768 );
                }
                #contact dl div dd {
                }
                    #contact dl div dd .input-text {
                        padding: calc( 5 * 100vw / 768 );
                        background: #eeeeee;
                        border: none;
                        color: #242424;
                        width: calc(100% - ( 20 * 100vw / 768 ))
                    }
    #contact .bt {
        text-align: center;
        
    }
        #contact .bt p {
            margin-bottom: 10px;

        }
        #contact .bt .contact-bt01 {
            background: #BFA14B;
            color: #fff;
            padding: calc( 5 * 100vw / 768 ) calc( 30 * 100vw / 768 );
            text-align: center;
            font-size: calc( 28 * 100vw / 768 );

        }
        #contact .bt .contact-bt-back {
            background: #999;
            color: #fff;
            padding: 5px 30px;
            text-align: center;
            font-size: calc( 28 * 100vw / 768 );
        }
    #contact a.line-bt {
        display: flex;
        width:80%;
        height: calc( 100 * 100vw / 768 );
        color: #fff;
        font-weight: 600;
        justify-content: center;
        align-items: center;
        margin-top: 1em;
        background: #00B900;
        margin-left: auto;
        margin-right: auto;
        
    }
}
@media print,screen and (min-width: 769px){
    #contact .wrap {
        padding-top: 50px !important;
    }
        #contact dl {
            margin-top: 3em;
            font-size: 16px;
        }
            #contact dl div {
                display: flex;
                padding-bottom: 10px;
                margin-bottom: 10px;
                border-bottom: 1px solid #ccc;
            }
                #contact dl div dt {
                    width: 250px;
                }
                #contact dl div dd {
                    width: calc(100% - 260px );
                }
                    #contact dl div dd .input-text {
                        padding: 5px;
                        background: #eeeeee;
                        border: none;
                        color: #242424;
                    }
    #contact .bt {
        text-align: center;
        
    }
        #contact .bt p {
            margin-bottom: 10px;

        }
        #contact .bt .contact-bt01 {
            background: #BFA14B;
            color: #fff;
            padding: 5px 30px;
            text-align: center;
            font-size: 16px;

        }
        #contact .bt .contact-bt-back {
            background: #999;
            color: #fff;
            padding: 5px 30px;
            text-align: center;
            font-size: 16px;
        }
    .contact-text {
        display: flex;
    }
        .contact-text .text-contents {
            width: calc(100% - 210px)
        }
        .contact-text .qr {
            width: 200px;
        }
            .contact-text .qr img {
                width: 100%;
                height: auto;
            }

}


/*--------------------------------------------
page
---------------------------------------------*/
    .page p a {
        text-decoration: underline;
    }
    
    .page p a.bt-link {
        text-decoration: none;
        background: #aa8511;
        color: #fff;
        padding: .5em 2em;
        display: inline-block;
        margin-top: .5em;
        margin-bottom: .5em;
    }
@media screen and (max-width: 768px){
    .page {
        line-height: 1.8;
        padding-bottom: 5em;
    }
    .page img {
        max-width: 100%;
    }
	.page h2{
		font-size : calc( 34 * 100vw / 768 );
		margin-bottom : 1em;
		font-weight : 600;
	}
	.page h3{
		font-size : calc( 28 * 100vw / 768 );
		margin-bottom : 1em;
		font-weight : 500;
        margin-top: 2em;
	} 


}
@media print,screen and (min-width: 769px){
    .page {
        line-height: 1.8;
        padding-bottom: 5em;
    }
    .page img {
        max-width: 100%;
    }
	.page h2{
		font-size : 28px;
		margin-bottom : 20px;
		font-weight : 600;
	}
	.page h3{
		font-size : 24px;
		margin-bottom : 1em;
		font-weight : 500;
        margin-top: 2em;
	}  
	.page img.size-thumbnail {
		width: 300px;
		height: auto;
	}
	.page img.size-medium {
		width: 500px;
		height: auto;
	}
}
@media print,screen and (min-width: 769px) and (max-width:1059px){

}
@media print,screen and (min-width: 1060px){

}

/*--------------------------------------------
contact
---------------------------------------------*/
span.hissu {
    margin-left: 1em;
    font-size: .8rem;
    color: maroon;
}