@charset "UTF-8";

body {
	color: #1a1a1a;
	font-family: wf-sawarabimincho, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 2vw;
	background-color: #ebeae5;
}

button,
input,
select,
textarea {
	font-size: 1vw;
}

a,
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	color: #1a1a1a;
}

ul,
li {
	list-style: none;
}

/* ====================================================
　nav style
==================================================== */

nav {
	width: 100vw;
	height: 14vh;
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	background-color: rgba(235,234,229,0.9);
	overflow: hidden;
	z-index: 100;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, nav {
		width: 100%;
		height: 80px;
	}
}
/* スマホ用 */
@media screen and (max-width: 320px) {
	nav {
		width: 320px;
		height: 480px;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) { 
		nav {
			height: 100px;
		}
	}
}

nav li {
	float: left;
}

.nav_01 {
	width: 60%;
	font-size: 1.4vw;
	letter-spacing: 0.6vw;
	color: #333;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .nav_01 {
	font-size: 35px;
	letter-spacing: 10px;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.nav_01 {
		font-size: 2.2vw;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) { 
		.nav_01 {
			width: 100%;
			font-size: 5vw;
			line-height: 5vh;
		}
	}
}

.nav_02, .nav_03 {
	width: 20%;
	font-size: 1.4vw;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .nav_02, .nav_03 {
	font-size: 26px;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.nav_02, .nav_03 {
		font-size: 1.8vw;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) { 
		.nav_02, .nav_03 {
			width: 50%;
			font-size: 4vw;
		}
	}
}

/* ====================================================
　header style
==================================================== */

header {
	width: 100vw;
	height: 100vh;
	display: flex;
}
/* スマホ用 */
@media screen and (max-width: 320px) {
	header {
		width: 320px;
		height: 480px;
	}
}

/* headerをゆっくり表示する（animate用） */
.animate-slow {
/* 10秒かけてアニメーションする */
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
/* 1秒待ってからアニメーションする */
	-webkit-animation-duration: 1s;
	animation-delay: 1s;
}

h1 {
	font-size: 3vw;
	letter-spacing: 1vh;
	text-align: center;
	color: #333;
	white-space: nowrap;
/* （中央寄せのため） */
	position: relative;
	top: 0;
	left: 25%;
	transform: translateX(-75%);
/* 文字を縦書き */
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, h1 {
		font-size: 35px;
		letter-spacing: 10px;
	}
}
/* for chrome調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	h1 {
		left: 50%;
	}
}
/* for IE11調整 */
@media all and (-ms-high-contrast: none){
	h1 {
		left: 50%;
	}
}
/* for firefox調整 */
@-moz-document url-prefix() {
	h1 {
		left: 50%;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	h1 {
		top: -10%;
		left: 48%;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) { 
		h1 {
			font-size: 8vw;
			top: -5%;
			left: 46%;
		}
	}
}

/* ====================================================
　main style
==================================================== */

#pagetop {
	position: fixed;
	right: 4.5vw;
	bottom: 4vh;
	cursor: pointer;
}

/* 縦書きの数字用（縦中横） */
.text-combine {
	-webkit-text-combine: horizontal;
	-ms-text-combine-horizontal: all;
	text-combine-upright: all;
}

.box {
	width: 80vw;
	height: 80vh;
	margin : 25% 0 15% 0; 
/* ここをcontainにしてしまうと写真の右側が切れる */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .box {
		width: 100%;
		background-size: contain;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.box {
		background-size: contain;
		margin-left: 10%;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.box {
			background-size: contain;
			margin-left: 10%;
		}
	}
}

.button_01 {
	margin-right: 0.8vw;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .button_01 {
		margin-right: 10px;
		vertical-align: middle;
	}
}

.button_02 {
	margin-bottom: 0.8vh;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .button_02 {
		margin-bottom: 10px;
	}
}

.top_01 {
	background-image: url('../img/top_01.jpg');
}

.vtitle {
	font-size: 2vw;
	letter-spacing: 0.8vh;
	line-height: 8vh;
	color: #333;
	text-align: left;
/* 文字を縦書き */
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .vtitle {
		font-size: 30px;
		letter-spacing: 5px;
		line-height: 250%;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.vtitle {
		font-size: 3vw;
		letter-spacing: 0.8vh;
		line-height: 10vh;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.vtitle {
			font-size: 4vw;
			line-height: 5vh;
		}
	}
}

.text_01 {
/* （横方向中央寄せのため） */
	position: relative;
	top: -15%;
	left: 10%;
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.text_01 {
			top: 25%;
			left: 0;
		}
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.text_01 {
		left: 0;
	}
}

.subtitle_01 {
	font-size: 1.8vw;
	letter-spacing: 0.6vw;
	color: #333;
	text-align: center;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .subtitle_01 {
		font-size: 28px;
		letter-spacing: 5px;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.subtitle_01 {
		font-size: 2.2vw;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.subtitle_01 {
			font-size: 4vw;
		}
	}
}

.subtitle_02 {
	font-size: 1.4vw;
	letter-spacing: 0.6vw;
	color: #333;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .subtitle_02 {
		font-size: 28px;
		letter-spacing: 5px;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.subtitle_02 {
		font-size: 2.2vw;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.subtitle_02 {
			font-size: 4vw;
		}
	}
}

.subtitle_03 {
	font-size: 2vw;
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.subtitle_03 {
			font-size: 4vw;
		}
	}
}

#aboutus {
	width: 100%;
	height: 1000px;
	line-height: 150%;
	position:relative;
	top: 0;
	left: -20%;
/* 文字を縦書き */
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		#aboutus {
			height: 400px;
			line-height: 200%;
			margin-left: 5%;
		}
	}
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, #aboutus {
		left: 35%;
		line-height: 250%;
	}
}

.otoiawase {
	width: 100%;
	text-align: center;
	position:relative;
	top: 0;
	left: 10%;
}

form {
	position:relative;
	top: 0;
	left: -10%;
}
/* for chrome調整 */
@media screen and (-webkit-min-device-pixel-ratio:0){
	form{
		left: 10%;
	}
}
/* for firefox調整 */
@-moz-document url-prefix() {
	form {
		left: 10%;
	}
}
/* for IE11調整 */
*::-ms-backdrop, form {
	left: 10%;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, form {
		margin-left: 0;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	form {
		top: 0;
		left: 10%;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		form {
			top: 0;
			left: 10%;
		}
	}
}

#form {
	position:relative;
	top: 0;
	left: -10%;
}

.tel_04 {
	font-size: 1.3vw;
	white-space: nowrap;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .tel_04 {
		font-size: 18px;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.tel_04{
		font-size: 2.3vw;
		line-height: 1.8vh;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.tel_04 {
			font-size: 3.5vw;
		}
	}
}

.req {
	font-size: 0.8vw;
	color: #f00;
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.req {
			font-size: 3vw;
		}
	}
}

#submit {
	text-align: center;
	position:relative;
	top: 0;
	left: 10%;
}
/* for chrome調整 */
@media screen and (-webkit-min-device-pixel-ratio:0){
	#submit {
		left: -30%;
	}
}
/* for firefox調整 */
@-moz-document url-prefix() {
	#submit {
		left: -10%;
	}
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, #submit {
		left: -15%;
		margin: 5% 0;
	}
}
/* for IE11調整＆大きい画面用 */
*::-ms-backdrop, #submit {
	margin-left: -15%;
}
@media screen and (min-width: 320px) {
*::-ms-backdrop, #submit {
	margin-left: -35%;
}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	#submit {
		left: -10%;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		#submit {
			left: -10%;
		}
	}
}

#submit_01 {
	width: 439px;
	height: 60px;
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		#submit_01 {
			width: 80vw;
			height: 12vw;
		}
	}
}

footer {
	font-size: 1vw;
	letter-spacing: 0.2vw;
	text-align: center;
	margin: 10vh 0;
}
/* for safari5調整 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, footer {
		margin: 50px 0;
	}
}
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	footer {
		font-size: 2vw;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		footer {
			font-size: 3.5vw;
		}
	}
}

/* 改行を追加する */
/* スマホ用（横） */
@media screen and (max-width: 979px) {
	.br::before {
		content: "\A";
		white-space: pre;
	}
}
/* スマホ用（縦） */
@media screen and (max-width: 979px) {
	@media all and (orientation: portrait) {
		.br::before {
			content: "\A";
			white-space: pre;
		}
	}
}