@charset "utf-8";

/* global.css
 * **************************************************
 * Body
 * Header
 * Global Navigation
 * Common Elements
 * Content
 * Footer
 * **************************************************
 */

/* 新フォーマットのページ */
body {
	min-width: 1240px;
}

/* Body
-------------------------------------------------- */

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #FFFFFF;
	color: #666666;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic", san-serif;
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* inner */
[class$="-inner"] {
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 1200px;
}

/* Header
-------------------------------------------------- */

#header {
	background-color: #000000;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic", san-serif;
	position: relative;
	transition: top 0.2s ease-in;
	width: 100%;
}

#header.fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}

#header .header {
	padding: 20px 10px 7px;
	position: relative;
	width: 100%;
}

#header.fixed .header {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* logo */
#header .logo {
	text-align: left;
}

#header .logo svg {
	fill: #ffffff;
	display: block;
	height: auto;
	transition: .2s;
	width: 170px;
}

#header.fixed .logo svg {
	width: 155px;
}

/* search-button */
#header .search-button {
	background: #ffffff url(../images/new/common/icon_search.svg) no-repeat center right;
	background-size: 40px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	height: 40px;
	position: absolute;
	top: 3px;
	right: 0;
	width: 40px;
	z-index: 1;
}

#header.fixed .search-button {
	z-index: 4;
}

#header.fixed .search.active+.search-button {
	z-index: 1;
}

/* search */
#header .search {
	position: absolute;
	top: 3px;
	right: 0;
	width: 270px;
}

#header .search input[type="text"] {
	background-color: #ffffff;
	border: none;
	border-radius: 20px;
	display: block;
	height: 40px;
	outline: none;
	padding: 0 40px 0 20px;
	position: absolute;
	top: 0;
	right: 0;
	width: 270px;
	transition: all .2s;
	z-index: 1;
}

#header .search input[type="image"] {
	background: url(../images/new/common/icon_search.svg) no-repeat center right;
	background-size: 40px;
	border: none;
	border-radius: 20px;
	display: inline-block;
	height: 40px;
	outline: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	z-index: 3;
}

#header.fixed .search input[type="text"] {
	padding: 0;
	width: 40px;
}

#header.fixed .search.active input[type="text"] {
	padding: 0 40px 0 20px;
	width: 270px;
}

/* toggle */
#header #toggle {
	display: none;
}

/* Global Navigation
-------------------------------------------------- */

#header.fixed #globalnavi {
	margin: 0;
	position: absolute;
	top: -74px;
	left: 200px;
	width: 790px;
	z-index: 11;
}

#globalnavi nav ul {
	list-style: none;
	margin: 0;
}

#globalnavi nav>ul.menu {
	align-items: center;
	display: flex;
}

#globalnavi nav>ul.menu>li {
	color: #ffffff;
	cursor: pointer;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.02em;
	height: 74px;
	margin: 0;
	position: relative;
	width: 20%;
}

#header.fixed #globalnavi nav>ul.menu>li {
	width: auto;
}

#globalnavi nav>ul.menu>li:hover {
	background-color: #909090;
}

#globalnavi nav>ul.menu>li>a {
	display: inline-block;
	height: 74px;
	line-height: 74px;
	pointer-events: none;
	width: 100%;
}

#header.fixed nav>ul.menu>li>a {
	padding: 0 20px;
}

#globalnavi ul.menu>li ul.sub-menu {
	background-color: #5E5F63;
	opacity: 0;
	padding: 30px;
	position: absolute;
	top: 74px;
	left: 0;
	text-align: left;
	transition: all .2s ease;
	visibility: hidden;
	min-width: 270px;
	z-index: 1;
}

#globalnavi ul.menu>li:hover ul.sub-menu {
	opacity: 1;
	visibility: visible;
}

#globalnavi ul.sub-menu li {
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.02em;
	margin: 0;
	white-space: nowrap;
}

#globalnavi ul.sub-menu li+li {
	margin-top: 14px;
}

#globalnavi ul.sub-menu li a:hover {
	opacity: 0.5;
}

/* Common Elements
-------------------------------------------------- */

/* img */
img {
	vertical-align: bottom;
	/* max-width: 100%; */
}

/* link */
a {
	color: inherit;
	text-decoration: none;
	transition: .3s;
}

a:hover {
	color: inherit;
	text-decoration: none;
}

a[target="_blank"] span {
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20width%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m16.945%2016.944h-10.89v-10.888h3.825v-1.556h-3.825a1.56%201.56%200%200%200%20-1.555%201.556v10.888a1.56%201.56%200%200%200%201.555%201.556h10.89a1.56%201.56%200%200%200%201.555-1.556v-3.824h-1.555zm-4.278-12.444v1.556h3.189l-6.923%206.922%201.089%201.089%206.923-6.922v3.189h1.555v-5.834z%22%20fill%3D%22%23fff%22%20transform%3D%22translate(-4.5%20-4.5)%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
	background-size: 1em;
	padding: 0 1.56em 0 0;
}

/* Content
-------------------------------------------------- */

main {
	display: block;
}

.main-inner {
	padding-top: 30px;
	padding-bottom: 110px;
}

/* Footer
-------------------------------------------------- */

#footer {
	background-color: #5E5F63;
	color: #ffffff;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic", san-serif;
	padding: 80px 0 55px;
	text-align: left;
}

#footer ul {
	font-size: 13px;
	list-style: none;
	margin: 0;
}

#footer ul li {
	margin: 0;
}

#footer a:hover {
	opacity: 0.5;
}

/* footernavi */
#footer .footernavi>ul {
	display: flex;
	list-style: none;
	justify-content: flex-start;
}

#footer .footernavi>ul>li {
	letter-spacing: 0.04em;
	width: 16.66%;
}

#footer .footernavi>ul>li>a {
	font-weight: bold;
}

#footer .footernavi ul.sub-menu {
	margin: 14px 0 0 0;
}

#footer .footernavi ul.sub-menu li+li {
	margin-top: 4px;
}

/* footerlink */
#footer .footerlink {
	margin: 90px 0 0 0;
}

#footer .footerlink ul li {
	display: inline;
	font-size: 13px;
	letter-spacing: 0.04em;
	margin: 0 10px 0 0;
}

#footer .footerlink ul li a {
	display: inline;
}

/* copyright */
#footer .copyright {
	font-size: 13px;
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
}



/* ▼ 旧レイアウト設定 ▼ */
#globalnavi a,
#header a:visited,
#header a:link,
#footer a,
#footer a:visited,
#footer a:link {
	color: #ffffff !important;
}


/* ======================================
	2 : container [ コンテナ ]（<!-- /#globalNavi --></div> 〜 <div id="footer">）
====================================== */
#container {
	clear: both;
	margin: 20px auto 30px auto;
	width: 900px;
	text-align: left;
}
#container:after {
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}
#container .inner{
	float: left;
	margin: 0;
	width:677px;
}


/* ======================================
	3 : novisualAnchors [ アンカー ]
====================================== */
div.novisualAnchors{
	width: 0;
	height: 0;
	font-size: 1px;
	line-height: 1px;
	overflow: hidden;
	/* except MacIE \*/position: absolute;/* end */
	left: 0;
	top: 0;
	color: #fff;
}
div.novisualAnchors a{
	font-size: 1px;
	line-height: 1px;
	color: #fff;
	text-decoration: none;
}

/* ======================================
	7 : content [ コンテンツ ]
====================================== */
/*読み込みエリアのフォントサイズ統一（123.1%）
------------------------------------------------------------------- */
#content {
	margin: 0 0 50px 0;	
	width:677px;
	font-size:123.1%;
}

/* 共通カラム（1カラム）
------------------------------------------------------------------- */
#commonColumn #content {
	float: left;
	margin: 0 0 30px 0;
	width:900px;
}


/* ======================================
	8 : side [ サイド ]
====================================== */
/* 右（下層ページ共通）
------------------------------------------------------------------- */
#sideRight {
	float: right;
	margin: 0 0 30px 0;
	width: 200px;
}