@charset "utf-8";
/* -----------------------------
 common.css
----------------------------- */

/* Reset */
@import url("./destyle.css");

:root {
/*	--xx-pale-color: #FFFFFF;
	--pale-color:    #DDDDDD;

	--darker-color:  #555555;
	--dark-color:    #333333;
	--x-dark-color:  #222222;
	--xx-dark-color: #111111;

	--trans-color:   rgba(255, 255, 255, 0.85);

	--menu-highlight-color: #D96D00;*/

/*	--font-serif: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Times New Roman", serif;
	--font-sans-serif: "Yu Gothic", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;*/
	--font-serif: "Zapf Humanist",serif;
	--font-sans-serif: "Suisse Regular",sans-serif;
}

body {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	min-height: 100vh;
	background-color: #FFFEF2;

	line-height: 150%;
	font-family: var(--font-sans-serif);
	color: #333333;
}



/* ------------------------------
 generalz
------------------------------ */

.wholeLink {
	cursor: pointer;
}

span.nowrap {
	display: inline-block;
	white-space: nowrap;
}

main button.def {
	padding: 2px 15px;
	border: 1px solid #999999;
	border-radius: 2px;
	background:
		linear-gradient(
			to bottom,
			#EEEEEE 0%,
			#DDDDDD 100%
		);
	color: #333333;
}

main button.def:active {
	background:
		linear-gradient(
			to bottom,
			#DDDDDD 0%,
			#EEEEEE 100%
		);
}

/* ------------------------------
 header
------------------------------ */
header {
	width: 100%;
	background-color: #FFFFFF;
	border-bottom: 1px solid #CCCCCC;
	color: #222222;

	z-index: 80;
}

header.scrolled {
	position: fixed;
	width: 100%;
}

header .topic1 {
	display: flex;
	justify-content: center;
	align-items: center;

	padding: 5px;
	background-color: #000000;
	color: #FFFFFF;
}

header .topic2 {
	display: flex;
	justify-content: center;
	align-items: center;

	padding: 5px;
	background-color: #222222;
	color: #FFFFFF;
}

header > div {
	display: flex;
	align-items: center;
}

header #logo {
	margin: 10px;
}

header #logo img {
	width: 55px;
	height: auto;
}

header .sns {
	display: flex;
	align-items: center;
}

header .sns li {
	margin: 10px;
}

header .sns img {
	width: 30px;
	height: auto;
}

/* ------------------------------
 main
------------------------------ */
main {
	flex-grow: 1;
	padding-bottom: 100px;
	color: var(--dark-color);
}

/* ------------------------------
 chat
------------------------------ */
#chat {
	position: fixed;
	right: 20px;
	bottom: 50px;
	z-index: 99;
}

#chat button[name="open"] {
	width: 70px;
	height: 70px;
	background-color: #333333;
	background-image: url(../../images/common/icon-chat.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px;
	border: 2px solid #FFFEF2;
	border-radius: 50%;
}

#chat button[name="open"] img {
	display: none;
}

#chat #chatWindow {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 100px;

	width: 380px;
	max-width: 80%;
	height: 600px;
	max-height: 80%;

	background-color: #FFFFFF;
	filter: drop-shadow(1px 1px 3px #CCCCCC);
}

#chat #chatWindow .head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background-color: #333333;
	color: #FFFFFF;
}

#chat #chatWindow button[name="close"] {
	display: flex;
	justify-content: center;
	align-items: center;

	width: 50px;
	height: 50px;
}

#chat #chatWindow button[name="close"] img {
	width: 50%;
	height: 50%;
}

#chat #chatWindow iframe {
	width: 100%;
	height: 100%;
}

/* ------------------------------
 footBnr
------------------------------ */
#banner {
	margin-bottom: 200px;
	text-align: center;
}
#banner p {
	padding: 0px 30px;
}
#banner img {
	width: 400px;
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
}
#banner a {
	color: #0000FF;
	text-decoration: underline;
}


/* ------------------------------
 footer
------------------------------ */
footer {
	background-color: #333333;
	color: #FFFFFF;
}

footer nav {
	padding: 30px 15px;
}

footer ul p {
	padding: 10px 5px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
}

footer ul ul {
/*	margin-left: 20px;*/
	margin-bottom: 20px;
}

footer ul ul li {
	margin: 10px 5px;
}

footer > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: xx-small;
}

footer .logo {
	margin: 10px 15px;
	flex-shrink: 0;
}

footer .logo img {
	width: auto;
	height: 30px;
}

footer .copyright {
	margin: 0px 15px;
}

/* -----------------------------
 PC
----------------------------- */
@media screen and (min-width:1000px) {
	.onlysp {
		display: none!important;
	}

	header > div {
		justify-content: flex-start;
	}

	header nav {
		flex-grow: 1;
	}

	header nav .gNavBtn {
		display: none;
	}

	header nav ul {
		display: flex;
	}

	header nav li {
	}

	header nav li > a,
	header nav li > span {
		display: block;
		padding: 20px;
		cursor: pointer;
	}

	header nav li > span {
		position: relative;
	}
/*
	header nav li > a:hover::after,
	header nav li > span:hover::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 5px;
		background-color: #333333;
	}*/

	header nav li > div {
		position: absolute;
		left: 0;
		display: none;
		width: 100%;
		padding: 50px 100px;
		border-top: 1px solid #CCCCCC;
		box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
		background-color:#FFFFFF;
	}

	header nav li ul {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	header nav li ul a {
		display: inline;
		padding: 0px;
	}

	footer nav {
		padding: 30px 0px;
		font-size: small;
	}

	footer nav > ul {
		display: flex;
		flex-wrap: wrap;
	}

	footer nav > ul > li {
		width: calc((100% - 90px) / 3);
		margin: 0px 15px;
	}
}

/* -----------------------------
 Tablet
----------------------------- */
@media screen and (max-width:999px) {
	.onlypc {
		display: none;
	}

	header #logo {
		order: 1;
		flex-grow: 1;

		margin: 10px;
		color: #FFFFFF;
	}

	header nav {
		order: 3;
		margin: 10px;
	}

	header nav .gNavBtn {
		width: 40px;
		cursor: pointer;
	}

	header nav .gNavBtn img {
		width: 100%;
		height: auto;
	}

	header nav .gNav {
		display: none;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		background-image: url(../../images/common/x-mark.png);
		background-size: auto 30px;
		background-position: right 10px top 10px;
		background-repeat: no-repeat;
		cursor: pointer;
		z-index: 90;
	}

	header nav .gNav > ul {
		width: 70vw;
		min-width: 50vw;
		max-width: calc(100vw - 50px);
		height: 100vh;
		margin-left: -100%;
		padding: 5px;
		background-color: rgba(0, 0, 0, 0.2);
		cursor: auto;
	}

	header nav .gNav > ul li:not(:last-of-type) {
		border-bottom: 1px solid #FFFFFF;
	}

	header nav .gNav > ul a,
	header nav .gNav > ul span {
		display: block;
		padding: 10px;
		color: #FFFFFF;
		cursor: pointer;
	}

	header nav li > div {
		display: none;
		padding-left: 20px;
		border-top: 1px solid #CCCCCC;
		box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
	}

	header nav li ul {
		font-size: small;
		line-height: 150%;
	}

	header .sns {
		order: 2;
	}
}

/* -----------------------------
 SP
----------------------------- */
@media screen and (max-width:639px) {
	.onlypc {
		display: none!important;
	}
}