@charset "utf-8";
/* CSS Document */

/*PC:body-------------------------------------*/
@media screen and (min-width:961px){
	.pc {display: block !important;}
	.tb {display: none !important;}
	.sp {display: none !important;}
	
	/* nav-text：PCのみ */
	.texthover span {display: inline-block; transition: transform 0.3s;}
	.texthover:hover span {transform: perspective(600px) rotateY(0deg) rotateX(20deg);}
	.texthover {padding-bottom: 3px; background-image: linear-gradient(#6b401b, #6b401b); background-repeat: no-repeat; background-position: bottom right; background-size: 0 2px;  transition: background-size 0.3s;}
	.texthover:hover {background-position: bottom left; background-size: 100% 2px;}
	
	.btn-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0;}
	.btn {position: relative; display: block; width: 200px; height: 68px; line-height: 68px; font-size: 18px; text-decoration: none; color: #6b401b; text-align: center; cursor: pointer; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:hover {color: #6b401b; text-decoration: none;}
	.btn:hover:before, .btn:hover::after, .btn:before, .btn:after {border: 1px solid #6b401b;}
	.btn:hover:before,.btn:before {border-width: 2px 0 0 2px;}
	.btn:hover::after, .btn:after {border-width: 0 2px 2px 0;}
	.btn:hover:before {content: ""; height: 25px; width: 25px; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:hover::after {content: ""; height: 25px; width: 25px; position: absolute; top: 43px; left: 174px; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:before {content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:after {content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	
	.btn-a a {font-family: 'Noto Serif JP', serif; font-size: 14px; letter-spacing: 0.1em; color: #fff; background: #333; font-weight: 400; border: solid 1px #333; display: block; box-sizing: border-box; max-width: 300px; text-align: center;  padding: 16px 64px; margin: 3px 24px; margin-inline: auto; text-decoration: none; cursor: pointer; transition: all 0.3s; border-radius: 5px;}
	.btn-a a:hover {color: #333; background: initial; transition: all 0.3s;}

}

/*TB:body-------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 960px){
	.pc {display: none !important;}
	.tb {display: block !important;}
	.sp {display: none !important;}
	
	.btn-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0;}
	.btn {position: relative; display: block; width: 140px; height: 46px; line-height: 46px; font-size: 16px; text-decoration: none; color: #6b401b; text-align: center; cursor: pointer; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:hover {color: #6b401b; text-decoration: none;}
	.btn:hover:before, .btn:hover::after, .btn:before, .btn:after {border: 1px solid #6b401b;}
	.btn:hover:before,.btn:before {border-width: 1px 0 0 1px;}
	.btn:hover::after, .btn:after {border-width: 0 1px 1px 0;}
	.btn:hover:before {content: ""; height: 25px; width: 25px; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:hover::after {content: ""; height: 25px; width: 25px; position: absolute; top: 20px; left: 114px; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:before {content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:after {content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	
	.btn-a a {font-family: 'Noto Serif JP', serif; font-size: 14px; letter-spacing: 0.1em; color: #fff; background: #333; font-weight: 400; border: solid 1px #333; display: block; box-sizing: border-box; max-width: 300px; text-align: center;  padding: 16px 64px; margin: 0 24px; margin-inline: auto; text-decoration: none; cursor: pointer; transition: all 0.3s; border-radius: 5px;}
	.btn-a a:hover {color: #333; background: initial; transition: all 0.3s;}
	.btn_exp {width: 300px; height: 24px; line-height: 24px; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;}
}

/*SP:body-------------------------------------*/
@media screen and (max-width: 767px){
	.pc {display: none !important;}
	.tb {display: none !important;}
	.sp {display: block !important;}
	
	.btn-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0;}
	.btn {position: relative; display: block; width: 140px; height: 46px; line-height: 46px; font-size: 16px; text-decoration: none; color: #6b401b; text-align: center; cursor: pointer; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:hover {color: #6b401b; text-decoration: none;}
	.btn:hover:before, .btn:hover::after, .btn:before, .btn:after {border: 1px solid #6b401b;}
	.btn:hover:before,.btn:before {border-width: 1px 0 0 1px;}
	.btn:hover::after, .btn:after {border-width: 0 1px 1px 0;}
	.btn:hover:before {content: ""; height: 25px; width: 25px; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:hover::after {content: ""; height: 25px; width: 25px; position: absolute; top: 20px; left: 114px; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:before {content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	.btn:after {content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; -webkit-transition:all 0.4s; transition:all 0.4s;}
	
	.btn-a a {font-family: 'Noto Serif JP', serif; font-size: 14px; letter-spacing: 0.1em; color: #fff; background: #333; font-weight: 400; border: solid 1px #333; display: block; box-sizing: border-box; max-width: 300px; text-align: center;  padding: 16px 64px; margin: 24px; margin-inline: auto; text-decoration: none; cursor: pointer; transition: all 0.3s; border-radius: 5px;}
	.btn-a a:hover {color: #333; background: initial; transition: all 0.3s;}
	
}