/*
 * 共通レイアウト
 */

/* 画像レイアウト */
img {
	width: 100%;
}

/* 2画面レイアウト */
.two-split-container {
	display: flex;
}

/* 2画面レイアウトの右側コンテンツ幅 */
.two-split-container .contents {
	margin-left: 30%;
	width: 70%;
}

/* サイドバー */
.sidebar {
	font-size: 17px;
	position: fixed;
}

.sidebar li {
	list-style: none;
	margin-top: 15px;
}

.sidebar li.active {
	color: #2196f3;
	display: list-item;
	list-style: initial;
}

.sidebar li a {
	color: #000;
	font-weight: bold;
	list-style: none;
	text-decoration: none;
}

.sidebar li.active a {
	color: #09c;
	font-weight: bold;
	text-decoration: none;
}

/*
 * ヘッダー
 */
header {
	align-items: flex-start;
	background: #fff;
	display: flex;
	height: 80px;
	justify-content: space-around;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}

header .logo_wrap {
	margin-top: 10px;
}

header .logo_wrap.back_color_view {
	background: rgb(255 255 255 / 100%);
}

html.active .logo_wrap {
	position: unset;
}

/*ロゴ画像*/
header img {
	width: 230px;
}

/* ハンバーガーメニュー */
.hamburger_btn {
	cursor: pointer;
	margin-left: 100%;
	position: fixed;
	top: 0;
	z-index: 200;
}

.hamburger_btn span {
	background: #333;
	border-radius: 10px;
	display: none;
	height: 6px;
	position: absolute;
	right: 30px;
	transition: all .4s;
	width: 40px;
}

.hamburger_btn span:nth-of-type(1) {
	top: 25px;
}

.hamburger_btn span:nth-of-type(2) {
	top: 40px;
}

.hamburger_btn span:nth-of-type(3) {
	top: 56px;
}

/*activeクラスが付与されると線が回転して×に*/
html.active .hamburger_btn span:nth-of-type(1) {
	top: 30px;
	transform: translateY(6px) rotate(-45deg);
	width: 40px;
	z-index: 6;
}

html.active .hamburger_btn span:nth-of-type(2) {
	opacity: 0;
}

html.active .hamburger_btn span:nth-of-type(3) {
	top: 42px;
	transform: translateY(-6px) rotate(45deg);
	width: 40px;
	z-index: 6;
}

/*
 * メインメニュー
 */
#menubar ul li {
	font-size: 20px;
}

#menubar ul li a {
	display: block;
	height: 60px;
	padding-top: 20px;
	text-decoration: none;
}

#menubar ul li span {
	color: #999;
	display: block;
	font-size: 10px;
	letter-spacing: .2em;
}

#menubar a.cursor-default {
	color: #333;
	cursor: default;
}

#menubar-s {
	display: none;
}

#menubar_icon {
	display: none;
}

/*
 * ナビゲーション
 */
nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

nav li + li {
	margin-left: 1.5rem;
}

nav li a {
	color: #666;
	font-weight: bold;
	padding-bottom: 10px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

nav li a.active,
nav li a:hover {
	color: #09c;
}

nav li a.active::after,
nav li a:hover::after {
	transform: scale(1.3, 1);
}

nav li a::after {
	background: #09c;
	bottom: 0;
	content: "";
	height: 2px;
	left: 10%;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: all .3s;
	width: 80%;
}

/*
 * メイン
 */
main {
	color: #333;
	font-size: 1rem;
	height: 100%;
	left: 0;
	margin-bottom: 5rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 62.5rem;
	padding: 1rem !important;
	top: 0;
	width: 100%;
}

/*
 * フッター
 */
footer {
	background: black;
	background-image: url(/public/images/0_common/bg-foot.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 310px;
	justify-content: space-between;
	padding: 1rem;
}

footer a {
	color: #09c;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

footer ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

footer li + li {
	margin-left: 1.5rem;
}

footer .container {
	align-items: baseline;
	display: flex;
	justify-content: space-around;
}

footer .container .contents {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
}

footer .container .contents ul {
	display: flex;
	margin-top: 1rem;
}

footer .container .contents ul li span {
	color: #fff;
	font-size: 12px;
}

footer .container .contents ul.mini a {
	color: #999;
	font-size: 12px;
}

footer .copy-right {
    color: #fff;
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
}

footer .footer-img {
	margin-top: 20px;
	width: 200px;
}

/*
 * ページトップ
 */

/*リンクの形状*/
#page-top a {
	background: #000;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 55px;
	justify-content: space-evenly;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
	width: 60px;
}

#page-top a i {
	font-size: 23px;
}

#page-top a span {
	font-size: 13px;
}

#page-top a:hover {
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	cursor: pointer;

/*はじめは非表示*/
	opacity: 0;
	position: fixed;
	right: 10px;
	transform: translateY(100px);
	z-index: 2;
}

/* 上に上がる動き */
#page-top.UpMove {
	animation: UpAnime .5s forwards;
}

@keyframes UpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 下に下がる動き */
#page-top.DownMove {
	animation: DownAnime .5s forwards;
}

@keyframes DownAnime {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 1;
		transform: translateY(100px);
	}
}

.parent-element {
	background: #ffffff00;
	height: 80px;
	position: relative;
}

.background-title {
	background-image: url(/public/images/0_common/bg-title.jpg);
	background-repeat: no-repeat;
	height: 117px;
	position: absolute;
	top: 80px;
	width: 100%;
}

/*
 * プライバシーマーク
 */
#pmark {
	margin: 10px;
}

/* タブレットサイズに適用 */
@media screen and (max-width:913px) {
	/*
     * ヘッダー
     */
	header {
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	header img {
		margin-left: 20px;
		width: 200px;
	}

	html.active header img {
		width: 0;
	}

	html.active nav li + li {
		margin-left: 0;
	}

	nav li a::after {
		left: 24px;
		width: 95px;
	}

	/* 透明化にしない */
	header .logo_wrap {
		background: rgb(255 255 255 / 0%);
		margin-top: 0;
		padding: 14px 4px 6px 0;
	}


	/*
     * メインメニュー
     */
	/*スマホ用メニュー*/
	html.active #menubar-s {
		display: flex;
		align-content: center;
	}

	#menubar-s {
		background: #fff;
		height: 100%;
		position: fixed;
		width: 100%;
		z-index: 999;
	}


	#menubar-s li span {
		color: #000;
		font-size: 12px;
		margin-left: 0;
	}

	#menubar-s ul {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
	}

	#menubar-s li {
		list-style: none;
		text-align: center;
	}

	.no-top #menubar-s ul li:first-of-type {
		margin-top: 80px;
	}

	#menubar-s li a {
		align-items: flex-start;
		color: #03a9f4;
		display: flex;
		flex-direction: column;
		font-size: 20px;
		font-weight: bold;
		letter-spacing: .1em;
		padding: 10px;
		text-decoration: none;
		text-transform: uppercase;
	}

	#menubar {
		display: none;
	}

	/* ３本バーアイコン設定 */
	.hamburger_btn span {
		display: block;
	}

	html.active .hamburger_btn span {
		background: #333;
	}

	/*
     * コンテンツブロック共通
     */
	#contents {
		padding: 50px 0;
	}

	#contents h2 {
		margin-bottom: 2rem;
	}

	.two-split-container .contents {
		margin: 20px;
		margin-left: 0;
		width: 100%;
	}

	/*
     * ボタンエリア共通
     */
	.btn_area {
		margin-bottom: 2rem;
		text-align: center;
	}

	/*
     * スクロールバー
     */
	.scrolldown3 {
		display: none;
	}

	/*
     * サイドバー
     */
	.sidebar {
		display: none;
	}


	/*
     * フッター
     */
	footer {
		font-size: 20px;
		height: 100% !important;
	}

	footer li {
		border-bottom: 1px solid #525252;
		margin-top: 20px;
	}

	footer .container .contents ul.mini li {
		border-bottom: none;
	}

	footer .container .contents ul.mini li a {
		color: #fff;
		font-size: 14px;
		font-weight: bolder;
		margin-left: 10px;
	}

	footer .container .contents ul li span {
		color: #fff;
		font-size: 14px;
		font-weight: bolder;
		margin-left: 10px;
	}

	footer li + li {
		margin-left: 0;
	}

	footer .container {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 10px;
	}

	footer .container .contents {
		display: block;
		width: 100%;
	}

	footer .container .contents ul {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}

	/*
     * メイン
     */
	main {
		padding: 0;
	}
}


/*スマホサイズに適用*/
@media screen and (max-width:599px) {

	/*スマホ用メニュー*/
	#menubar-s li {
		height: 80px;
	}

	html.active .top #menubar-s {
		margin-top: -40px;
	}

	footer {
		font-size: 20px;
		height: 100% !important;
	}

	footer li {
		border-bottom: 1px solid #525252;
		margin-top: 20px;
	}

	footer .container .contents ul.mini li {
		border-bottom: none;
	}

	footer .container .contents ul.mini li a {
		color: #fff;
		font-size: 14px;
		font-weight: bolder;
		margin-left: 10px;
	}

	footer .container .contents ul li span {
		color: #fff;
		font-size: 14px;
		font-weight: bolder;
		margin-left: 10px;
	}

	footer li + li {
		margin-left: 0;
	}

	footer .container {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 10px;
	}

	footer .container .contents {
		display: block;
		width: 100%;
	}

	footer .container .contents ul {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}
}


@keyframes slidein {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(0%);
	}
}

@keyframes slideout {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100%);
	}
}