@charset "utf-8";

/* SP-First CSS */
/* --------------------------------------------------------
プリント箇所指定
-------------------------------------------------------- */

@media print {

	/* no-print */
	header,
	footer,
	#access,
	#pagetop,
	#pagetop img,
	.vertical_nav {
		display: none !important;
	}

	/*A4横*/
	.onepage-print .a4page {
		width: 297mm;
		height: 200mm;
		page-break-after: always;
		font-size: 0 !important;
		line-height: 1 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.onepage-print .a4page img {
		width: 297mm;
		height: auto;
		margin: 0;
		padding: 0;
	}

	/*最後のページは改ページを入れない*/
	.onepage-print .a4page.lastpage {
		page-break-after: auto;
	}

	/*safari用サイズ調整ハック*/
	_::-webkit-full-page-media,
	_:future,
	:root .onepage-print .a4page {
		width: 267mm;
		height: 170mm;
	}

	_::-webkit-full-page-media,
	_:future,
	:root .onepage-print .a4page img {
		width: 267mm;
	}
}

/* A4縦 */
/*  @page { size: A4; } */
/* A4横 */
@page {
	size: A4 landscape;
}

/* マージン設定 */
@page {
	margin: 0;
}

/* --------------------------------------------------------
font
-------------------------------------------------------- */

/* type */
body,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select,
input[type=submit],
input[type=reset],
input[type=button] {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	line-height: 2;
}

/* link */
a {
	cursor: pointer;
	font-weight: 600;
}

a:link,
a:visited,
.btn a:hover,
a:active,
a:focus {
	text-decoration: none;
}

a:hover,
li a:hover,
li.stay a {
	text-decoration: underline;
}

/*画像リンク透過*/
a:hover img,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
button:hover,
.ico-btn:hover,
.social_nav a:hover {
	opacity: 0.85;
	filter: opacity(85%);
}

/* size */
th,
td,
li,
select,
input,
label,
dt,
dd,
time,
li {
	font-size: 1.4rem;
}

/* --------------------------------------------------------
カラー
-------------------------------------------------------- */

html {
	background-color: #fff;
}

/* font-color */
body,
h1,
h2 {
	color: #000;
}

/* link-highlight_SP */
a {
	color: #000;
}

/* link-color */
.btn,
a,
a:focus,
input[type=submit],
input[type=button],
input[type=reset],
button,
.ico-btn {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
}

/* contents */
section {
	background-color: #fff;
}

section:nth-child(even) {
	background-color: #f2f2f2;
}

/* btn */
#nav-drawer .ico-btn i,
#slide_nav ul.social_nav li a {
	color: #5a5a5a;
}

.btn,
input[type=submit] {
	background-color: #000;
}

.btn,
.btn a {
	color: #fff;
}

/* breadcrumb */
#breadcrumb {
	background-color: #ededed;
}

/* --------------------------------------------------------
レイアウト
-------------------------------------------------------- */

html {
	overflow: auto;
}

body {
	overflow: hidden;
}

main.w-all {
	width: 90%;
	margin: 0 5%;
}

section {
	padding: 3rem;
}

section.onepage-print {
	padding: inherit;
}

section.onepage-print .a4page {
	margin-bottom: inherit !important;
}


/* --------------------------------------------------------
header
-------------------------------------------------------- */

header h1 a {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width: 86px;
	height: 86px;
	background: url(../img/logo_hd.png) top left no-repeat;
	background-size: 100% 100%;
	margin: 3rem auto;
}

/* --------------------------------------------------------
footer
-------------------------------------------------------- */

footer {
	font-size: 1.3rem;
}

footer #logo {
	margin: 4rem auto;
	text-align: center;
}

footer a:hover {
	text-decoration: underline;
}

footer #logo img {
	width: 60px;
	height: auto;
}

/* copy */
footer p {
	text-align: center;
	padding: 1.5rem;
	font-size: 1.15rem;
}

/* --------------------------------------------------------
nav
-------------------------------------------------------- */

/*SNSs*/
ul.social_nav {
	text-align: center;
	margin-top: 3rem;
}

ul.social_nav li {
	display: inline-block;
	vertical-align: bottom;
	vertical-align: -webkit-baseline-middle;
}

ul.social_nav li a {
	padding: 1.5rem 1rem;
	display: block;
}

ul.social_nav li a img {
	width: auto;
	height: 2.1rem;
}

/*side_nav*/
#side_nav {
	position: fixed;
	right: 2rem;
	top: 6.4rem;
	z-index: 1;
}

#side_nav ul.social_nav {
	margin-top: 0;
	text-align: left;
}

#side_nav ul.social_nav li {
	display: block;
}

#side_nav ul.social_nav li a {
	padding: 0;
	display: block;
	margin-bottom: 1rem;
}

/*vertical_nav*/
ul.vertical_nav {
	display: none;
}

/* --------------------------------------------------------
access
-------------------------------------------------------- */

#info_box {
	padding: 5rem 2rem;
	text-align: center;
	background: #fbfbfb;
}

.link_tel p,
.link_tel a,
.contact_nav p,
.contact_nav a {
	font-family: "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt"1;
	-webkit-font-smoothing: antialiased;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
}

.link_tel a {
	font-size: 110%;
}

.link_tel span {
	font-size: 80%;
}

/* 前にアイコン */
.link_tel:before {
	background: url(../img/ico_qa.svg) 0 0 no-repeat;
	-webkit-background-size: 7.9rem 5.1rem;
	background-size: 7.9rem 5.1rem;
	content: "";
	display: inline-block;
	width: 7.9rem;
	height: 5.1rem;
	position: relative;
	top: 0;
	margin-bottom: 1.5rem;
}

.link_tel {
	margin-bottom: 5rem;
}

.link_tel span {
	display: block;
	padding: 1rem 0 .5rem;
}

/* 前にアイコン */
.contact_nav li:before {
	background: url(../img/ico_contact01.svg) 0 0 no-repeat;
	-webkit-background-size: 7.9rem 5.1rem;
	background-size: 7.9rem 5.1rem;
	content: "";
	display: block;
	width: 7.9rem;
	height: 5.1rem;
	position: relative;
	top: 0;
	margin-bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}

.contact_nav li:nth-of-type(2):before {
	background: url(../img/ico_contact02.svg) 0 0 no-repeat;
}

.contact_nav li:nth-of-type(3):before {
	background: url(../img/ico_contact03.svg) 0 0 no-repeat;
}

.contact_nav {
	margin-bottom: 5rem;
}

.contact_nav li {
	margin-bottom: 3rem;
}

address h2 span {
	display: block;
	margin-left: -1.5rem;
}

address p {
	text-align: center;
}

/* map */
#map {
	width: 100vw;
	position: relative;
	font-size: 0;
}

#map .btn {
	position: absolute;
	bottom: 3rem;
	right: 6rem;
	padding: 1rem 2rem;
	width: auto;
	margin: inherit;
}

#map .btn:hover {
	opacity: 1;
	filter: opacity(100%);
	background-color: #7b7b7b;
}

/* --------------------------------------------------------
main
-------------------------------------------------------- */

main h2,
main p {
	text-align: center;
	margin-bottom: 3rem;
	max-width: 100%;
}

.nav_box {
	position: relative;
}

.nav_box .vertical_nav {
	position: absolute;
}

/* --------------------------------------------------------
form
-------------------------------------------------------- */

/* title */
#contactform h2 img {
	width: 30rem;
}

.sec_form form dt,
.sec_form form dd,
.sec_form .note,
.sec_form h2,
.sec_form p,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select,
label,
input[type=submit],
input[type=reset],
input[type=button],
table.kakunin th,
table.kakunin td {
	font-family: "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt"1;
	-webkit-font-smoothing: antialiased;
	font-size: 1.6rem;
	font-weight: 600;
}

.sec_form h2 {
	font-size: 2.2rem;
}

.sec_form p {
	font-size: 1.4rem;
	font-weight: 400;
}

.sec_form form dt,
.sec_form form dd,
.sec_form form label .radiobox_txt,
.sec_form form label .checkbox_txt {
	letter-spacing: .3rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
table.kakunin td {
	font-weight: 400;
}

.sec_form form label {
	display: block;
	padding: 1rem 0;
	margin-bottom: .5rem;
}

.form_combo {
	margin-bottom: 2.5rem;
}

table.kakunin th,
table.kakunin td {
	border: none;
	min-height: 4.5rem;
}

table.kakunin th {
	border-radius: 6px;
}

table.kakunin td {
	padding: 2rem 1rem;
}

/* ----------------------------------------------------------------------------------------------
PC START
---------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------
base layout
-------------------------------------------------------- */

@media screen and (min-width : 768px) {

	/* for all desktop PC ※縦メニュー位置都合でPC用は幅1024pxのみ */
	#wrapper {
		margin: 0 auto;
		width: 1024px;
		min-height: 100%;
	}

	#header-in,
	#breadcrumb ol,
	#info_box .link_tel,
	#info_box .contact_nav,
	#footer-in,
	footer p {
		margin: 0 auto;
		width: 1024px;
	}

	main.w-all {
		width: 1024px;
		height: 100%;
		min-height: 100%;
		float: none;
		margin: 0;
	}
}

@media screen and (max-width: 1980px) and (min-width: 1481px) {

	/* for  desktop PC */
	/*
	#wrapper,
	#header-in,
	#breadcrumb ol,
	#footer-in,
	footer p,
	main.w-all {
		width: 1300px;
		margin: 0 auto;
		display: block;
	}
	 */
}

@media screen and (max-width: 1480px) and (min-width: 1200px) {

	/* for  note PC */
	/*
	#wrapper,
	#header-in,
	#breadcrumb ol,
	#footer-in,
	footer p,
	main.w-all {
		width: 1100px;
		margin: 0 auto;
		display: block;
	}
	 */
}

@media screen and (max-width: 1199px) and (min-width: 992px) {

	/* for small note PC */
	/*
	#wrapper,
	#header-in,
	#breadcrumb ol,
	#footer-in,
	footer p,
	main.w-all {
		width: 900px;
		margin: 0 auto;
		display: block;
	}
	 */
}

@media screen and (max-width: 991px) and (min-width: 768px) {

	/* for 縦 ipad&tablet */
	#wrapper,
	#header-in,
	#breadcrumb ol,
	#info_box .link_tel,
	#info_box .contact_nav,
	#footer-in,
	footer p,
	main.w-all {
		width: 730px;
		margin: 0 auto;
		display: block;
	}
}

/* --------------------------------------------------------
design details
-------------------------------------------------------- */

@media screen and (min-width : 768px) {

	/* for PC 共通↓ */
	section,
	section.onepage-print {
		margin: 0px -500%;
		padding: 3rem 500%;
		display: block;
	}

	/* --------------------------------------------------------
	nav
	-------------------------------------------------------- */

	/*side_nav*/
	#side_nav {
		top: 7.6rem;
	}

	#side_nav ul.social_nav li a {
		margin-bottom: 2rem;
	}

	/*vertical_nav*/
	.nav_box,
	#info_box {
		position: relative;
	}

	ul.vertical_nav {
		display: block;
		position: absolute;
	}

	ul.vertical_nav li {
		display: inline-block;
		padding-left: 1.5rem;
	}

	ul.vertical_nav li img {
		width: 3.3rem;
		height: auto;
	}

	.nav_box ul.vertical_nav {
		right: 10rem;
		bottom: 4rem;
	}

	#info_box ul.vertical_nav {
		right: 10rem;
		top: 8rem;
	}

	/*icon120%*/
	#nav-open,
	.ico-close,
	.ico-btn img {
		width: 2.88rem;
		height: 2.88rem;
	}

	ul.social_nav li a img {
		width: auto;
		height: 2.52rem;
	}

	/* --------------------------------------------------------
	access
	-------------------------------------------------------- */

	#info_box {
		padding: 5rem 0;
	}

	.link_tel p,
	.link_tel a,
	.contact_nav p,
	.contact_nav a {
		letter-spacing: .2rem;
	}

	/* 前にアイコン */
	.link_tel:before {
		top: 6.5rem;
		left: -9.5rem;
	}

	.link_tel {
		padding-left: 17.5rem;
		margin-top: -4rem !important;
		text-align: left;
	}

	/* telリンク無効 */
	a[href^="tel:"] {
		pointer-events: none;
	}

	/* 前にアイコン */
	.contact_nav li:before {
		display: inline-block;
		top: 2rem;
		left: -9.5rem;
		margin-bottom: inherit;
		transform: inherit;
		-webkit-transform: inherit;
		-ms-transform: inherit;
	}

	.contact_nav {
		padding-left: 17.5rem;
		padding-top: 1rem;
		text-align: left;
	}

	.contact_nav li {
		margin-bottom: 0;
		text-align: left;
	}

	.contact_nav li a {
		margin-left: -8rem;
	}

	/* address */
	address {
		margin-top: 8rem;
	}

	address p {
		text-align: center;
	}

	/* --------------------------------------------------------
	table
	-------------------------------------------------------- */

	table th {
		width: 30%;
	}

	table td {
		width: 70%;
	}

	/*--------------------------------------------------------
	btn
	--------------------------------------------------------*/

	.btn,
	input.btn {
		width: 40%;
		margin: 0 auto 3rem;
	}

	/*--------------------------------------------------------
	main
	--------------------------------------------------------*/

	.btn_box xxx {
		position: absolute;
		bottom: 5rem;
		left: 0;
		right: 0;
		margin: auto;
		width: 40%;
	}

	/*--------------------------------------------------------
	form
	-------------------------------------------------------*/

	section.sec_contents,
	section.sec_form {
		margin: 0px -500%;
		padding: 8rem 500%;
		display: block;
	}

	/* title */
	#contactform h2 img {
		width: 46rem;
		margin-bottom: 5rem;
	}

	.sec_form form {
		width: 80%;
		max-width: 880px;
		margin: 0 auto;
	}

	.sec_form form dl {
		display: inline-block;
	}

	.sec_form form dt {
		display: inline-block;
		width: 25%;
		vertical-align: top;
		padding-top: .75rem;
		margin-bottom: 3rem;
	}

	.sec_form form dd {
		display: inline-block;
		width: 75%;
		margin-bottom: 3rem;
	}

	.kakunin table th,
	.kakunin table td {
		width: 100%;
	}

	.kakunin .btn01 input.btn,
	.kakunin .btn02 input.btn {
		width: 100%;
	}

	/* ----------------------------------------------------------------------------------------------
PC END
---------------------------------------------------------------------------------------------- */
}

/* ----------------------------------------------------------------------------------------------
For IE
---------------------------------------------------------------------------------------------- */

@media all and (-ms-high-contrast:none) {

	input[type="checkbox"]:checked + span::before {
		background-color: #fbfbfb;
		background-image: url("../img/ico_check_for_ie.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 2.4rem 2.4rem;
	}

	input[type="radio"]:checked + span::before {
		background-color: #fbfbfb;
		background-image: url("../img/ico_radio_for_ie.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 2.4rem 2.4rem;
	}

	/* ----------------------------------------------------------------------------------------------
For IE END
---------------------------------------------------------------------------------------------- */
}

/* ----------------------------------------------------------------------------------------------
For Edge
---------------------------------------------------------------------------------------------- */

@supports (-ms-ime-align: auto) {

	/* ----------------------------------------------------------------------------------------------
For Edge END
---------------------------------------------------------------------------------------------- */
}

/* ----------------------------------------------------------------------------------------------
追加調整
---------------------------------------------------------------------------------------------- */

/* iPhone5 @media */
@media screen and (max-width: 374px) {}

/* iPad vertical  @media */
@media screen and (max-width: 991px) and (min-width: 768px) {

	/*vertical_nav*/
	ul.vertical_nav {
		display: none;
	}

	#info_box .link_tel,
	#info_box .contact_nav {
		width: 70%;
		margin: 0 15% 5rem;
	}
}

/* ----------------------------------------------------------------------------------------------
 END
---------------------------------------------------------------------------------------------- */