﻿/*# sourceURL=shared/css/shared.css */
/*@ sourceURL=shared/css/shared.css */
html:not(.responsive) {
	min-width: 1100px; /* viewport */
}



/*=============================================
 * body
 *=============================================*/

body {
	color: #000;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 15px;
	line-height: 32px;
	letter-spacing: 0.18em;
	background: url("../img/shared/bg.jpg");
	min-width: inherit;
	min-height: inherit;
	max-height: 100%;
}



/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/

.fnt-mincho {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.fnt-meiryo {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fnt-gothic {
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}



/*=============================================
 * .fnt - customs
 *=============================================*/

.fnt-mincho {
}
.fnt-meiryo {
}
.fnt-gothic {
}
.fnt-notoserif {
	font-family: "Noto Serif JP", serif;
}


.fz12{
	font-size: 12px;
}

.fz14{
	font-size: 14px;
}

.fz17{
	font-size: 17px;
}

.fz18{
	font-size: 18px;
}

.fz20{
	font-size: 20px;
}

.fz22{
	font-size: 22px;
}

.fz25{
	font-size: 25px;
}

.fz28{
	font-size: 28px;
}
.fz30{
	font-size: 30px;
}

.fz32{
	font-size: 32px;
}

.fz35{
	font-size: 35px;
}

.fz40{
	font-size: 40px;
}

.fz45{
	font-size: 45px;
}

.fzFourty{
	font-size: 40px;
}

.fz50{
	font-size: 50px;
}

.fzFifty{
	font-size: 50px;
}

.fz55{
	font-size: 55px;
}


.fzFiftyfive{
	font-size: 55px;
}




.c-br{
	color: #B4A890;
}

.c-w{
	color: #FFF;
}

.c-r{
	color: #980101;
}


.butt a, .butt .copy{
	cursor: pointer;
	z-index: 2;
	position: relative;
	font-size: 25px;
	color: #FFF;
	background: url("../img/shared/bg-btn.jpg") no-repeat center center;
	width: 420px;
	height: 76px;
	display: inline-block;
	text-decoration: none;
	-webkit-transition: 0.4s all;
	   -moz-transition: 0.4s all;
	    -ms-transition: 0.4s all;
	     -o-transition: 0.4s all;
	        transition: 0.4s all;
			box-sizing: border-box;
}
.butt a:before, .butt .copy:before{
	content:"";
	top:0;
	right:0;
	bottom:0;
	position:absolute;
	background: url("../img/shared/arr.png");
	width: 92px;
	height: 76px;
}
.butt a:hover, .butt .copy:hover{
	opacity: 0.9;
}
.butt .copy{
	font-style: normal;
}
.butt .copy.copied {
    pointer-events: none;
	padding-top: 24px;
	padding-left: 55px;
	transition: none;
}
.butt span{
	display: inline-block;
	padding-top: 24px;
	padding-left: 55px;
}

.butt.white a{
	color: #000;
	background: url("../img/shared/bg-btn-white.jpg") no-repeat center center;
}
.butt.white a:before{
	content:"";
	top:0;
	right:0;
	bottom:0;
	position:absolute;
	background: url("../img/shared/arr-black.png");
	width: 92px;
	height: 76px;
}


.butt-ver a{
	cursor: pointer;
	font-size: 18px;
	color: #FFF;
	background: url("../img/shared/bg-btn-ver.jpg") no-repeat center center;
	width: 76px;
	height: 306px;
	display: inline-block;
	text-decoration: none;
	-webkit-transition: 0.4s all;
	   -moz-transition: 0.4s all;
	    -ms-transition: 0.4s all;
	     -o-transition: 0.4s all;
	        transition: 0.4s all;
}
.butt-ver a:hover{
	opacity: 0.9;
}
.butt-ver a:before{
	content:"";
	right:0;
	left: 0;
	bottom:0;
	position:absolute;
	background: url("../img/shared/arr-ver2.png");
	width: 76px;
	height: 80px;
}

.butt-ver span{
	display: inline-block;
	padding-top: 45px;
	padding-right: 22px;
}



/*=============================================
 * <main>
 *=============================================*/

main {
	clear: both;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.wrap {
	width: 1000px;
}


#thanks{
	text-align: center;
}


/*=============================================
 * <header>
 *=============================================*/

header {
}
header .wrap-top{
	color: #FFF;
	z-index: 56;
	position: absolute;
	top: 0;
	left: 0;
	width: 440px;
}
header h1 {
	width: 308px;
	margin: auto !important;
	text-align: center;
	font-size: 13px;
	color: #B4A890;
	padding-top: 30px !important;
}
header .logo {
	padding-top: 76px;
	text-align: center;
}
header .navi {
	padding-left: 140px;
	color: #FFF;
	padding-top: 40px;
	display: block;

}

header .navi a{
	margin-bottom: 20px;
	font-size: 20px;
	position: relative;
	-webkit-transition: 0.4s all;
	   -moz-transition: 0.4s all;
	    -ms-transition: 0.4s all;
	     -o-transition: 0.4s all;
	        transition: 0.4s all;
	display: block;
}


header .navi a:before{
	content:"";
	position:absolute;
	background: #939393;
	height: 1px;
	width: 25px;
	top: 50%;
	left:0;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
	-webkit-transition: 0.4s all;
	   -moz-transition: 0.4s all;
	    -ms-transition: 0.4s all;
	     -o-transition: 0.4s all;
	        transition: 0.4s all;
	opacity: 0;
	visibility: hidden;
}

header .navi a:hover,
header .navi a.active{
	color: #939393;
	text-decoration: none;
	padding-left: 35px;
}

header .navi a:hover:before,
header .navi a.active:before{
	opacity: 1;
	visibility: visible;
}




header .tel {
	position: relative;
	width: 330px;
	text-align: center;
	margin: 40px auto 0;
	border: 1px solid #fff;
	border-top: none;
}

header .tel:before{
	content:"";
	top:0;
	left:0;
	position:absolute;
	background: #FFF;
	width: 45px;
	height: 1px;
}


header .tel:after{
	content:"";
	top:0;
	right:0;
	position:absolute;
	background: #FFF;
	width: 45px;
	height: 1px;
}
header .tel .top{
	position: relative;
	top: -12px;
	margin-bottom: -12px;
}
header .tel .bot{
	letter-spacing: 0;
	line-height: 18px;
	padding-bottom: 15px;
}


header .wrap-fix{
	font-size: 18px;
	color: #FFF;
    position: fixed;
    z-index: 66;
    width: 100%;
    background: url("../img/shared/bg-black.jpg");
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s all;
       -moz-transition: 0.4s all;
        -ms-transition: 0.4s all;
         -o-transition: 0.4s all;
            transition: 0.4s all;
}




header .wrap-fix .navi-fix{

}
header .wrap-fix .navi-fix a{
	padding: 25px 20px 25px 0;
	display: inline-block;
}
header .wrap-fix .navi-fix a:last-child{
	padding: 0;

}

header .wrap-fix .navi-fix .tel-fix{
	display: inline-block;
	text-align: center;
	position: absolute;
	top: 8px;
	right: 0;
}

header .wrap-fix .navi-fix .tel-fix:before{
	content:"";
	top:0;
	left: -36px;
	bottom:0;
	position:absolute;
	background: #b4a890;
	height: 59px;
	width: 1px;
}


header .wrap-fix .navi-fix a:hover,
header .wrap-fix .navi-fix a.active{
	color: #B4A890;
	text-decoration: none;
}


header .btn-fix{
	position: fixed;
	top: 180px;
	right: 20px;
	z-index: 66;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 0.6s all;
	   -moz-transition: 0.6s all;
	    -ms-transition: 0.6s all;
	     -o-transition: 0.6s all;
	        transition: 0.6s all;
}


header .wrap-fix.fixed,
header .btn-fix.fixed{
	opacity: 1;
	visibility: visible;
}

/*=============================================
 * key
 *=============================================*/

#key {
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	min-height: 900px;
	position: relative;
}
#key ul {
	min-height: inherit;
}
#key li {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	min-height: inherit;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}



/*=============================================
 * <section>
 *=============================================*/

section {
}



/*=============================================
 * <footer>
 *=============================================*/

footer {
	background: url("../img/shared/bg-black.jpg");
}
footer .logo {
	padding-bottom: 28px;
	padding-top: 74px;
	text-align: center;
}
footer .tel {
	padding: 25px 0 20px;
	color: #FFF;
	text-align: center;
	width: 640px;
	margin: auto;
	background: rgba(255, 255, 255, 0.1);
}


footer .menu-list{
	padding-bottom: 30px;
	border-bottom: 1px solid #b4a890;
	color: #FFF;
	font-size: 15px;
	width: 884px;
	margin: 35px auto 0;
}

footer .menu-list dl{
	line-height: 25px;
	padding-bottom: 15px;
}
footer .menu-list dt{
	width: 245px;
	text-align: right;
	float: left;
}
footer .menu-list dd{
	float: left;
	margin-left: 30px;
}


footer nav {
	padding-top: 30px;
	text-align: center;
	color: #FFF;
}

footer nav > a + a {
    padding-left: 25px;
}
footer nav > a + a:before{
	padding-right: 25px;
}


/*=============================================
 * .socialbuttons
 *=============================================*/

footer #socialbuttons {
	padding-top: 55px;
}



/*=============================================
 * copyright
 *=============================================*/

address {
	padding-bottom: 70px !important;
	color: #B4A890;
	font-size: 14px;
	text-align: center;
	padding-top: 15px !important;
}


.menu-list > dl {
	zoom: 1 !important;
}

.menu-list > dl:after {
	content: "." !important;
	clear: both !important;
	display: block !important;
	height: 0 !important;
	visibility: hidden !important;
}

/* CSS for FireFox */
@-moz-document url-prefix() {
	.txt-latin{
			direction: ltr !important;
			writing-mode: vertical-lr !important;
			-o-writing-mode: vertical-lr
			-ms-writing-mode: vertical-lr
			-ms-writing-mode: tb-lr;
			-moz-writing-mode: vertical-lr
			-webkit-writing-mode: vertical-lr
		}
}

@-webkit-keyframes grayscale {
    0% {
        -webkit-filter: grayscale(100%);
        /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }
    to {
        -webkit-filter: grayscale(0);
        /* Safari 6.0 - 9.0 */
        filter: grayscale(0);
    }
}
@keyframes grayscale {
    0% {
        -webkit-filter: grayscale(100%);
        /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }
    to {
        -webkit-filter: grayscale(0);
        /* Safari 6.0 - 9.0 */
        filter: grayscale(0);
    }
}
.grayscale {
    -webkit-animation-name: grayscale;
    animation-name: grayscale;
}



@media screen and (max-width: 1500px){
	header .btn-fix{
		top: 90px;
	}

	#pagetop{
		-webkit-transform: scale(0.7);
		   -moz-transform: scale(0.7);
		    -ms-transform: scale(0.7);
		     -o-transform: scale(0.7);
		        transform: scale(0.7);
	}
}


.disf{
	display: flex;
}
.tc{
	text-align: center;
}

.btn-lang {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 5;
}

.btn-lang li a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #3c3939;
	width: 80px;
	height: 40px;
	text-align: center;
	font-size: 20px;
	letter-spacing: 0.1em;
	line-height: 25px;
	background: #fff;
}
.btn-lang .active a {
	background-image: url("../img/english/bg_btn_lang.jpg");
	background-position: center top;
	background-repeat: repeat;
}

.btn-lang li a:hover {
	text-decoration: none;
	opacity: 0.8;
}

.btn-lang li+li {
	margin-left: 3px;
}
