@charset "utf-8";

/* ****************************************************
Title: common.css
***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap');

/* --------------------------------------------------------------------
 :root
-------------------------------------------------------------------- */
:root {

	/* Webサイト全ページ共通テキスト */
	--common-fonts: 'Noto Sans JP', sans-serif;

	/* Webサイト全ページ共通テキスト */
	--common-fonts-color: #333;

	/* Webサイト全ページ共通背景 */
	--common-bg-color: #fff;

	/* Webサイト共通ヘッダーサイトマップ背景 */
	--header-color: #fff;
	--header-button-bg-color: #9b9792;
	--header-button-text-color: #fff;

	/* Webサイト共通フッターサイトマップ背景 */
	--footer-bg-color: #f5f2ed;
	--footer-border-color: #9b9792;

	/* トップ productsBox01 Block */
	--productsBox01-color: #9b9792;
	/* トップ News Block */
	--news-block-bg-color: #f5f2ed;
	/* トップ　タブエリア */
	--tab-bg-passive-color: #fff;
	--tab-bg-passive-text-color: #333;
	--tab-bg-active-color: #9b9792;
	--tab-bg-active-text-color: #fff;

	/* お知らせアイコン付き */
	--news-border-color: #9b9792;
	--news-icon-bg-color: #004098;
	--news-icon-text-color: #fff;
	
	/* 大見出し（HeadingPart/Dafault）・表見出し・FAQ・背景付テキストエリアなど */
	--main-bg-color: #9b9792;
	--sub-bg-color: #f5f2ed;

	/* 大見出し（HeadingParts/Dafault） */
	--heading-text-color: #fff;

	/* 大見出し（HeadingParts）小文字 */
	--heading-small-text-color: #fff;
	
	/* 大見出し（Dafault）の上線・小見出し（Dafault）インデックス線・大見出し（BasicParts）のインデックス線 */
	--main-border-color: #9b9792;
	--sub-border-color: #d5dde3;

	/* 表見出し */
	--table-head-color: --common-fonts-color;

	/* テキストボタン[背景カラー] */
	--main-button-bg-color: #9b9792;

	/* テキストボタン[フォントカラー] */
	--main-button-text-color: #fff;

	/* 背景付テキストエリア */
	--main-text-box-color: #fff;

	/* FAQ - question  */
	--question-text-color: #fff;
	--question-bg-text-color: #fff;
	--question-bg-color: #5282b9;

	/* FAQ - answer  */
	--answer-text-color: #fff;
	--answer-bg-color: #B00;

	/* テキストカラー【枠】  */
	--box-text-color: #fff;

	/* 重要なお知らせ  */
	--important-color: #B00;

	/* メインビジュアル[MV]  */
	--mv-bg-color: rgba(255,255,255,0.8);
	--mv-text-color: #333;

	/* SMP  */
	--input-border-color: #9b9792;
	--registration-bg-color: #4AB63C;
	--registration-border-color: #4AB63C;


	/* <a></a> 基本疑似要素 */
	--default-link-color: #333;
	--default-link: #333;
	--default-visited: #333;
	--default-hover: #333;
	--default-active: #333;

	/* パンくず <a></a> 疑似要素 */
	--breadcrumb-link: #111;
	--breadcrumb-visited: #111;
	--breadcrumb-hover: #9b9792;
	--breadcrumb-active: #9b9792;

	/* フッタ <a></a> 疑似要素 */
	--footer-link: #333;
	--footer-visited: #333;
	--footer-hover: #333;
	--footer-active: #333;

	/* ニュース <a></a> 疑似要素 */
	--news-link: #333;
	--news-visited: #333;
	--news-hover: #333;
	--news-active: #333;
}


/* --------------------------------------------------------------------
 body
-------------------------------------------------------------------- */

body {
	color: var(--common-fonts-color);
	font-family: var(--common-fonts);
	font-size: 16px !important;
	text-align: center;
	text-size-adjust: 100%;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	max-height: 999999px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.webFontPoppins {
	font-family: 'Poppins', sans-serif;
}

.webFontOswald {
	font-family: 'Oswald', sans-serif;
}

#wrap {
	position: relative;
	margin: 0 auto;
	padding: 0px;
	min-width: 1300px;
}

@media screen and (max-width: 1280px) {
#wrap {
	/*min-width: 1200px;*/
	min-width: 100%;
}
}
img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	margin: 0 auto;
}

.relative-wrap {
	position: relative;
}

.contDispN {
	display: none;
}

ul,ol {
	list-style: none;
}

/*-----------------------*/

.anc {
	position: relative;
}

.ancIn {
	position: absolute;
}

/*-----------------------*/

.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

.sp_menu {
	display: none !important;
}

.pcBr {
	display: inline !important;
}

.spBr {
	display: none !important;
}

.pcTable {
	display: table !important;
}

.spTable {
	display: none !important;
}

.flex {
	display: flex;
	flex-direction: row-reverse;
}

.contIn1000 {
	width: 1000px;
	margin: 0px auto;
	position: relative;
}

.contIn1170 {
	max-width: 1200px;
	width: auto;
	margin: 0px auto;
	position: relative;
}

.radius200 {
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	-o-border-radius: 200px;
	-ms-border-radius: 200px;
	border-radius: 200px;
}


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

	.contIn1170 {
		width: auto;
		padding: 0 20px !important;
	}
}


@media screen and (max-width: 980px) {

	body {
		font-size: 14px !important;
	}

	#wrap {
		overflow: hidden;
		width: auto;
		margin-top: 0px;
		margin-right: auto;
		margin-bottom: 0px;
		margin-left: auto;
		padding: 60px 0 0 0;
		min-width: 200px;
	}
    .sp_menu {
	display: block !important;
    }
}
@media screen and (max-width: 767px) {

	/*-----------------------*/

	.anc {
		position: relative;
	}

	.ancIn {
		position: absolute;
	}

	/*-----------------------*/

	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}

	.pcBr {
		display: none !important;
	}

	.spBr {
		display: inline !important;
	}

	.pcTable {
		display: none !important;
	}

	.spTable {
		display: table !important;
	}

	.flex {
		display: none !important;
	}

	.contIn1000 {
		width: auto;
	}

	.contIn1170 {
		width: auto;
		padding: 0;
	}

	img {
		display: block;
		margin: 0 auto;
	}

}



/* --------------------------------------------------------------------
 header
-------------------------------------------------------------------- */
header {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 9999;

	& * ul,
	  * ol{
		list-style-type: none;
	}
}


.headerWrap01 {
	box-sizing: border-box;
	padding: 20px 30px 20px;
	background-color: var(--header-color);
	inline-size: 100%;
}


.headerLogo01 {
	float: left;
	margin-inline-end: 10px;

	& img {
		inline-size: auto;
		height: 50px;
	}
}


.header-banner {
	float: left;
}


.headerRight01 {
	float: right;
}


.headerNavi01 {
	float: left;
    padding-block-start: 10px;

	& li {
		float: left;

		&:first-child {
			border-left: none;
		}

		& a {
			display: inline-block;
			font-size: 16px !important;
			line-height: 1.4em;
			padding: 4px 15px 4px 15px;
			position: relative;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}


.headerBtn01 {
	float: left;
	margin: 0px 15px 0px 15px;

	& a {
		display: block;
		box-sizing: border-box;
		color: var(--header-button-text-color) !important;
		background-color: var(--header-button-bg-color);
		font-size: 16px !important;
		line-height: 1.0em;
		padding: 20px;
		inline-size: 165px;
		block-size: 55px;
		border-radius: 2.30769em;

		&:link {
			color: #ffffff;
			text-decoration: none;
		}

		&:visited {
			color: #ffffff;
			text-decoration: none;
		}

		&:hover {
			color: #ffffff;
			text-decoration: none;
		}

		&:active {
			color: #ffffff;
			text-decoration: none;
		}
	}
}

.headerLangWrap01 a {
	font-size: 12px !important;
	line-height: 1.8em;
	color: #666666;
	display: inline-block;

	&:link {
		color: #666666;
		text-decoration: none;
	}

	&:visited {
		color: #666666;
		text-decoration: none;
	}

	&:hover {
		color: #000000;
		text-decoration: none;
		border-bottom: 1px solid #000000;
	}

	&:active {
		color: #666666;
		text-decoration: none;
	}
}

.headerLangWrap01 .active a {
	color: #000000;
	border-bottom: 1px solid #000000;
}



/*------------------*/

.headerLang01 {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	box-sizing: border-box;
	height: 30px;
	padding: 0 20px 0 20px;
	position: relative;
}

.headerLangWrap01 {
	position: relative;
	padding-inline-end: 40px;
}

.headerLangWrap01::after {
	content: "";
	background-image: url("../img/common/header_lang_icon01.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 14px auto;
	width: 14px;
	height: 14px;
	position: absolute;
	left: -7px;
	top: 50%;
	margin-top: -7px;
}

.headerLangWrap01::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 4px 0 4px;
	border-color: #999999 transparent transparent transparent;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -4px;
}


/*------------------------*/

.pcHeaderMegaNavi01 {
	box-sizing: border-box;
	width: 100vw;
	padding: 34px 0px 0px 0px;
	position: absolute;
	top: 60px;
	left: 0px;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transition-duration: 0.2s;
	z-index: 1000;
}

.headerNavi01 li:hover .pcHeaderMegaNavi01 {
	visibility: visible;
	opacity: 1;
	transition-duration: 0.2s;
}

.headerNavi01 li>p {
	display: inline-block;
	font-size: 16px !important;
	line-height: 1.4em;
	padding: 4px 15px 4px 15px;
	position: relative;
	cursor: pointer;
}

.headerNavi01 a:link {
	color: #111;
	text-decoration: none;
}

.headerNavi01 a:visited {
	color: #111;
	text-decoration: none;
}

.headerNavi01 a:hover {
	color: #111;
	text-decoration: underline;
}

.headerNavi01 a:active {
	color: #111;
	text-decoration: none;
}

.megaNaviIn01 {
	background-color: var(--main-color);
	color: #111;
	padding: 30px 0px 30px 0px;
}

.megaNaviIn01>.contIn1170>a {
	display: block;
	text-align: left;
	font-size: 18px !important;
	line-height: 1.2em;
	font-weight: bold;
	margin-bottom: 28px;
}

.megaNaviIn01>.contIn1170>a::after {
	content: "";
	display: inline-block;
	background-image: url("../img/common/cont_btn_ar02.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 14px auto;
	width: 14px;
	height: 10px;
	margin-left: 10px;
	vertical-align: middle;
}

.megaNavi01 li {
	width: 24%;
	margin: 0px 1.3% 10px 0px;
	border-left: none;
}

.megaNavi01 li:nth-child(4n) {
	margin-right: 0px;
}

.megaNavi01 li a {
	position: relative;
	display: flex;
	align-items: center;
	text-align: left;
	background-color: var(--common-bg-color);
	box-sizing: border-box;
	width: 100%;
	height: 60px;
	padding: 10px 25px 10px 18px;
}

.megaNavi01 li a:hover {
	text-decoration: none;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	transition-duration: 0.3s;
}

.megaNavi01 li a::after {
	content: "";
	background-image: url("../img/common/cont_btn_ar01.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px auto;
	width: 16px;
	height: 16px;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -8px;
}


/* --------------------------------------------------------------------
 header content
-------------------------------------------------------------------- */
.headerCont01 {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0px;
	right: 30px;
}

.search-open {
	position: absolute;
	top: 0;
	right: -30px;
	background: url(../img/common/header_search_icon01.png) no-repeat right;
	background-size: 30px;
	inline-size: 30px;
	block-size: 30px;
	cursor: pointer;
}

.search-open.active {
	position: absolute;
	top: 0;
	right: -30px;
	background: url(../img/common/header_search_icon02.png) no-repeat right;
	background-size: 30px;
	inline-size: 30px;
	block-size: 30px;
	cursor: pointer;
}

.pcSearchWrap01 {
	display: none;
}

.search-open.active .pcSearchWrap01 {
	display: block;
}


.spSearchInput01 {
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--sub-color1);
	background-color: var(--main-color);
	box-sizing: border-box;
	outline: none;
	inline-size: 200px;
	block-size: 30px;
	padding: 10px;
	background-image: url(../img/common/btn_search01_sp.png);
	background-repeat: no-repeat;
	background-position: right 10px bottom 45%;
	background-size: 16px 16px;
}


@media screen and (min-width: 980px) {
	.slideNaviBg01 {
		display: none;
	}

	.closeBtn01 {
		display: none;
	}

	.pcHeaderMegaNavi01 {
		display: block !important;
	}

	.footerSpAcCont01 {
		display: block !important;
	}

}

@media screen and (max-width: 980px) {

	.headerRight01 {
		float: left;
		margin-top: 20px;
	}

	.headerNavi01 {
		float: left;
	}

	.headerNavi01 li {
		float: left;
	}

	.headerNavi01 li>a {
		display: inline-block;
		font-size: 15px !important;
		line-height: 1.4em;
		padding: 4px 7px 4px 7px;
		position: relative;
	}

	.headerNavi01 li>p {
		display: inline-block;
		font-size: 15px !important;
		line-height: 1.4em;
		padding: 4px 7px 4px 7px;
		position: relative;
		cursor: pointer;
	}

	.pcHeaderMegaNavi01 {
		padding: 34px 0px 0px 0px;
		top: 115px;
	}

	.megaNavi01 li a {
		position: relative;
		display: flex;
		align-items: center;
		text-align: left;
		background-color: var(--common-bg-color);
		box-sizing: border-box;
		width: 100%;
		height: 60px;
		padding: 10px 25px 10px 18px;
	}

}

@media screen and (max-width: 980px) {

	#VcArea-Header {
		padding: 0px 0px 0px 0px;
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 1000;
	}
	.headerWrap01{
		padding: 0;
	}

	.headerLogo01 {
		float: left;
		padding-left: 20px;
		display: flex;
		align-items: center;
		height: 60px;
	}

	.headerLogo01 img {
		width: 232px;
		height: auto
	}

	.headerRight01 {
		float: none;
	}

	.headerNavi01 {
		float: none;
		margin-bottom: 20px;
	}

	.headerNavi01 li {
		float: left;
	}

	.headerNavi01>li {
		width: 100%;
		border-left: none;
	}

	.headerNavi01 li>a {
		display: block;
		font-size: 14px !important;
		line-height: 1.0em;
		padding: 15px 15px 15px 0px;
		position: relative;
		border-bottom: 1px solid var(--sub-color1);
	}

	.headerNavi01 li>a::after {
		content: "";
		background-image: url("../img/common/cont_btn_ar02.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 10px auto;
		width: 10px;
		height: 8px;
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -4px;
	}

	.headerNavi01 li>a:hover {
		text-decoration: underline;
	}

	.headerBtn01 {
		float: left;
		margin: 0px 30px 0px 0px;
	}

	.headerBtn01 a {
		display: block;
		background-color: #111;
		color: #ffffff;
		font-size: 14px !important;
		line-height: 1.0em;
		box-sizing: border-box;
		padding: 10px;
		width: 165px;
		border-radius: 100px;
		text-align: center;
	}

	.headerBtn01 a:link {
		color: #ffffff;
		text-decoration: none;
	}

	.headerBtn01 a:visited {
		color: #ffffff;
		text-decoration: none;
	}

	.headerBtn01 a:hover {
		color: #ffffff;
		text-decoration: none;
	}

	.headerBtn01 a:active {
		color: #ffffff;
		text-decoration: none;
	}

	.headerLangWrap01 {
		float: none;
		padding: 0px 0px 0px 0px;
	}

	.headerLangWrap01 a {
		font-size: 12px !important;
		line-height: 1.8em;
		color: #666666;
		display: inline-block;
	}

	.headerLangWrap01 a:link {
		color: #666666;
		text-decoration: none;
	}

	.headerLangWrap01 a:visited {
		color: #666666;
		text-decoration: none;
	}

	.headerLangWrap01 a:hover {
		color: #000000;
		text-decoration: none;
		border-bottom: 1px solid #000000;
	}

	.headerLangWrap01 a:active {
		color: #666666;
		text-decoration: none;
	}

	.headerLangWrap01 .active a {
		color: #000000;
		border-bottom: 1px solid #000000;
	}

	.headerSearchWrap01 {
		float: none;
		margin-left: 0px;
		padding-top: 0px;
		padding-right: 20px;
		clear: both;
	}

	/*------------------*/

	.headerLang01 {
		position: relative;
		display: inline-block;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border: none;
		outline: none;
		background: transparent;
		box-sizing: border-box;
		height: 30px;
		padding: 0px 30px 0px 20px;
	}

	.headerLangWrap01 {
		position: relative;
		display: inline-block;
	}

	.headerLangWrap01::after {
		content: "";
		background-image: url("../img/common/header_lang_icon01.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 14px auto;
		width: 14px;
		height: 14px;
		position: absolute;
		left: 0px;
		top: 50%;
		margin-top: -7px;
	}

	.headerLangWrap01::before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 4px 0 4px;
		border-color: #999999 transparent transparent transparent;
		position: absolute;
		right: 0px;
		top: 50%;
		margin-top: -5px;
	}

	/*--------------*/

	.headerCont01 {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		top: 0px;
		right: 0px;
		margin-inline-end: 20px;
		margin-block-start: 15px;
	}

	/*------------------------*/

	.pcHeaderMegaNavi01 {
		box-sizing: border-box;
		width: 100%;
		padding: 0px 0px 0px 0px;
		position: relative;
		top: 0px;
		left: 0px;
		text-align: center;
		visibility: visible;
		opacity: 1;
		transition-duration: 0.2s;
		z-index: 1000;
		display: none;
	}

	.headerNavi01 li:hover .pcHeaderMegaNavi01 {
		visibility: visible;
		opacity: 1;
		transition-duration: 0.2s;
	}

	.headerNavi01 li>p {
		display: block;
		font-size: 14px !important;
		line-height: 1.0em;
		position: relative;
		border-bottom: 1px solid var(--sub-color1);
		padding: 0px;
	}

	.headerNavi01 li>p>a {
		display: block;
		padding: 15px 15px 15px 0px;
	}

	.headerNavi01 li>p>a::after {
		content: "";
		background-image: url("../img/common/cont_btn_ar02.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 10px auto;
		width: 10px;
		height: 8px;
		display: block;
		float: right;
		margin-right: 55px;
		margin-top: 3px;
	}

	.headerNavi01 li {
		position: relative;
	}

	.headerNavi01 li>p.ac {
		display: block;
		width: 45px;
		height: 45px;
		position: absolute;
		top: 0px;
		right: 0px;
		border-bottom: none;
	}

	.headerNavi01 li>p.ac::after {
		content: "";
		width: 1px;
		height: 30px;
		background-color: var(--sub-color1);
		position: absolute;
		left: 0px;
		top: 50%;
		margin-top: -15px;
	}

	.headerNavi01 li>p.ac::before {
		content: "＋";
		position: absolute;
		right: 15px;
		top: 50%;
		margin-top: -8px;
		color: #1775c1;
		font-size: 14px !important;
		line-height: 1.0em;
	}

	.headerNavi01 li>p.ac.open::before {
		content: "ー";
	}

	.megaNaviIn01 {
		padding: 0px;
	}

	.megaNaviIn01>.contIn1170>a {
		display: none;
	}

	.megaNavi01 li {
		width: 100%;
		margin: 0px 0px 0px 0px;
	}

	.megaNavi01 li:nth-child(4n) {
		margin-right: 0px;
	}

	.megaNavi01 li:nth-child(2n) {
		margin-right: 0px;
	}

	.megaNavi01 li a {
		position: relative;
		display: flex;
		align-items: center;
		text-align: left;
		background-color: var(--common-bg-color);
		box-sizing: border-box;
		width: 100%;
		height: 40px;
		padding: 10px 22px 10px 10px;
		font-size: 12px !important;
		border-left: 1px solid var(--sub-color1);
	}

	.megaNavi01 li a:hover {
		text-decoration: none;
		filter: alpha(opacity=70);
		-moz-opacity: 0.7;
		opacity: 0.7;
		transition-duration: 0.3s;
	}

	.megaNavi01 li a::after {
		content: "";
		background-image: url("../img/common/cont_btn_ar01.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 16px auto;
		width: 16px;
		height: 16px;
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -8px;
	}

	/*--------------------------*/

	.headerMenu01Wrap {
		width: 60px;
	}

	.headerMenu01 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 60px;
		position: fixed;
		top: 0px;
		right: 0px;
		z-index: 9999;
	}

	.headerMenu01 img {
		width: 100%;
		height: auto;
	}

	.slideNaviWrap01 {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		right: 0px;
		z-index: 9999;
		visibility: hidden;
		opacity: 0;
		transition-duration: 0.2s;
	}

	.slideNaviWrap01.open {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		right: 0px;
		z-index: 9999;
		visibility: visible;
		opacity: 1;
		transition-duration: 0.2s;
	}

	.slideNaviWrap01In {
		background-color: var(--header-color);
		box-sizing: border-box;
		text-align: left;
		padding: 0px 0px 20px 20px;
		width: 86%;
		height: 90vh;
		position: absolute;
		top: 60px;
		right: -600px;
		transition-duration: 0.4s;
		overflow: auto;
	}

	.open .slideNaviWrap01In {
		right: 0px;
	}

	.slideNaviBg01 {
		background-color: #000000;
		opacity: 0.7;
		width: 120vw;
		height: 120vh;
		position: fixed;
		top: 60px;
		left: 0px;
	}

	.closeBtn01 {
		position: fixed;
		top: 0px;
		right: 0px;
		z-index: 10000;
	}

	.closeBtn01 img {
		width: 60px;
		height: auto;
	}

	/*-----------------*/

	.spNaviSeachWrap01 {
		position: relative;
	}

	.spNaviSeachWrap01 .icon01 {
		inline-size: 100% !important;
		block-size: auto;
	}

	.spSearchInput01 {
		border: none;
		background-color: var(--common-bg-color);
		box-sizing: border-box;
		inline-size: 100%;
		block-size: 40px;
		padding: 10px 40px 10px 20px;
		border-radius: 0px;
	}

	.spSearchButton01 {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0;
		border: none;
		outline: none;
		background: transparent;
		width: 40px;
		height: 40px;
		position: absolute;
		top: 0px;
		right: 0px;
		cursor: pointer;
	}

}


/* --------------------------------------------------------------------
 footer
-------------------------------------------------------------------- */
#VcArea-Footer{
    background: var(--common-bg-color)
}
#VcArea-Footer * ul,#VcArea-Footer * ol{
    list-style-type: none;
}

.footerBottom{
    padding-top: 30px;
    padding-bottom: 30px;
}
.pagetopButton {
	display: none;
	position: fixed;
	bottom: 80px;
	right: 30px;
}

.footerWrap01 {
	background-color: var(--footer-bg-color);
	padding: 60px 0px 55px 0px;

	& a:link {
		color: var(--footer-link);
		text-decoration: none;
	}

	& a:visited {
		color: var(--footer-visited);
		text-decoration: none;
	}

	& a:hover {
		color: var(--footer-hover);
		text-decoration: underline;
	}

	& a:active {
		color: var(--footer-active);
		text-decoration: none;
	}
}


.footerBox01 {
	inline-size: 25%;
	float: left;
	color: #111;
	text-align: left;

	& .logo01 img {
		width: 160px;
		height: auto;
	}

	& .link01 {
		font-size: 16px !important;
		line-height: 1.8em;
		margin-bottom: 10px;
	}

	& .link02 {
		margin-bottom: 30px;
	}

	& .link02 li {
		font-size: 14px !important;
		line-height: 2.0em;
	}
}




.footerNavi01 {
	float: left;

	& li {
		float: left;
		padding: 0px 20px 0px 20px;
		border-left: 1px solid #ffffff;
		font-size: 14px !important;
		line-height: 1.4em;
	}

	& li:first-child {
		padding-left: 0px;
		border-left: none;
	}
}

.footerCopy01 {
	font-size: 12px !important;
	line-height: 1.4em;
	margin-top: 20px;
}

.footerNavi01Wrap01 {
	float: right;
}



.footerLogoWrap01 .logo02 img {
	max-width: 200px;
	height: auto;
}

.footerLogoWrap01 .logo02 {
	float: left;
}

.footerLogoWrap01 .cont01 {
	float: left;
	text-align: left;
	padding-left: 25px;
	font-size: 12px !important;
	line-height: 1.8em;
}


.footerSpAcCont01 a {
    padding-left: 12px;
    position: relative;

	&:before {
		content: "└";
		position: absolute;
		left: 0;
		font-size: 8px;
	}
}

@media screen and (max-width: 980px) {

	.footerBlock01 {
		margin-bottom: 60px;
	}

	.footerBox01 {
		box-sizing: border-box;
		width: 33%;
		padding-right: 0px;
	}

	.footerNavi01Wrap01 {
		float: none;
		margin-bottom: 30px;
	}

	.footerLogoWrap01 {
		float: none;
	}


}



@media screen and (max-width: 980px) {

	.pagetopButton {
		display: none;
		position: fixed;
		bottom: 20px;
		right: 20px;

		& img {
			width: 40px;
			height: auto;
		}
	}

	.footerWrap01 {
		padding: 20px 20px 30px 20px;

		& .contIn1170 {
			padding: 0 !important;
		}
	}

	.footerBlock01 {
		margin-block-end: 25px;
	}

	.footerBox01 {
		width: auto;
		float: none;
		text-align: left;
		position: relative;

		& .logo01 {
			text-align: center;
			margin-bottom: 20px;
		}

		& .logo01 img {
			width: 102px;
			height: auto;
		}

		& .link01 {
			font-size: 12px !important;
			line-height: 1.0em;
			font-weight: bold;
			margin-bottom: 0px;
			border-bottom: 1px solid var(--footer-border-color);
		}

		& .link01 a {
			display: block;
			padding: 15px 15px 15px 0px;
		}

		& .link01 a::after {
			font-family: "Font Awesome 6 FREE";
			font-weight: 900;
			content: "\f061";
			color: var(--default-link-color);
			inline-size: 8px;
			block-size: 8px;
			display: block;
			float: right;
			margin-inline-end: 3px;
			margin-block-start: 3px;
		}

		& .link01.link0102 a::after {
			margin-inline-end: 55px;
		}

		& .ac {
			display: block;
			width: 45px;
			height: 45px;
			position: absolute;
			top: 0px;
			right: 0px;
			border-bottom: none;
		}

		& .ac::after {
			content: "";
			width: 1px;
			height: 30px;
			background-color: #cdcbc8;
			position: absolute;
			left: 0px;
			top: 50%;
			margin-top: -15px;
		}

		& .ac::before {
			font-family: "Font Awesome 6 FREE";
			font-weight: 900;
			content: "\2b";
			color: var(--default-link-color);
			position: absolute;
			right: 15px;
			top: 50%;
			margin-top: -8px;
			font-size: 14px !important;
			line-height: 1.0em;
		}

		& .ac.open::before {
			content: "－";
		}

		& .link02 {
			margin-bottom: 0px;
		}

		& .link02 li {
			font-size: 12px !important;
			line-height: 2.0em;
		}

		& .link02 li a {
			position: relative;
			display: block;
			box-sizing: border-box;
			padding: 7px 20px 7px 15px;
			background-color: #ffffff;
			border-bottom: 1px solid #cdcbc8;
			border-left: 1px solid #cdcbc8;
			border-right: 1px solid #cdcbc8;
		}

		& .link02 li a::after {
			font-family: "Font Awesome 6 FREE";
			font-weight: 900;
			content: "\f061";
			color: var(--default-link-color);
			width: 16px;
			height: 16px;
			position: absolute;
			right: 10px;
			top: 50%;
			margin-top: -8px;
		}
	}

	.spFooterBox {
		width: auto;
		float: none;
	}

	.footerSpAcCont01 {
		display: none;
	}

    .footerBottom{
		padding: 20px 20px 30px 20px;
    }
	.footerNavi01 {
		float: none;
		text-align: left;
		margin-bottom: 38px;

		& li {
			float: none;
			padding: 0px 0px 0px 0px;
			border-left: none;
			font-size: 12px !important;
			line-height: 2.0em;
		}

		& li:first-child {
			padding-left: 0px;
			border-left: none;
		}
	}

	.footerCopy01 {
		text-align: left;
		font-size: 10px !important;
		line-height: 1.4em;
		float: none;
	}

	.spFooterBox .link01 > br{
		display: none
	}
	/*-------------------*/

	.footerNavi01Wrap01 {
		float: none;
	}

	.footerLogoWrap01 {
		float: left;

		& .logo02 img {
			width: 150px;
			height: auto;
		}

		& .logo02 {
			padding-top: 5px;
		}

		& .cont01 {
			text-align: left;
			padding-left: 25px;
			font-size: 10px;
			line-height: 1.8em;
		}
	}

}

/* --------------------------------------------------------------------
 parts
-------------------------------------------------------------------- */
.contMainColumn_01 {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 75px;
	float: left;
	text-align: left;
	font-size: 16px !important;
	line-height: 1.8em;
}

@media screen and (max-width: 767px) {

	.contMainColumn_01 {
		width: auto;
		padding: 30px 20px 40px 20px;
		border-right: none;
		float: none;
		text-align: left;
		font-size: 14px !important;
		line-height: 1.8em;
	}

}




.partsWrap01 {
	padding-top: 0px;
}

.contMainColumn_02 {
	box-sizing: border-box;
	inline-size: calc(100% - 270px - 30px);
	padding-top: 50px;
	padding-bottom: 75px;
	float: left;
	text-align: left;
	font-size: 16px !important;
	line-height: 1.8em;
}

.contMainColumn_03 {
	box-sizing: border-box;
	inline-size: calc(100% - 460px - 30px);
	padding-top: 50px;
	padding-bottom: 75px;
	float: left;
	text-align: left;
	font-size: 16px !important;
	line-height: 1.8em;
}

.contMainColumn_03 {
	box-sizing: border-box;
	inline-size: calc(100% - 460px - 30px);
	padding-top: 50px;
	padding-bottom: 75px;
	float: left;
	text-align: left;
	font-size: 16px !important;
	line-height: 1.8em;
}


.contSideColumn * ul,.contSideColumn * ol{
    list-style-type: none;
}
.contSideColumn {
	box-sizing: border-box;
	inline-size: 270px;
	padding-top: 50px;
	padding-bottom: 75px;
	float: right;
	text-align: left;
}
.contSideColumn.contSideformColumn {
	inline-size: 460px;
}


@media screen and (max-width: 1000px) {
.contSideColumn {
	inline-size: 100%;
	padding-top: 50px;
	padding-bottom: 75px;
	float: none;
}
.contMainColumn_03{
	float: none;
    width: auto;
    padding: 30px 20px 40px 20px;
}	
.contSideColumn.contSideformColumn {
    inline-size: 100%;
}
}

/*----------------------*/

.parts1column .contMainColumn {
	width: auto;
	border-right: none;
}

@media screen and (max-width: 767px) {

	.partsWrap01 {
		padding-top: 0px;
	}

	.contMainColumn_02 {
		width: auto;
		padding: 30px 20px 40px 20px;
		border-right: none;
		float: none;
		text-align: left;
		font-size: 14px !important;
		line-height: 1.8em;
	}

	.contSideColumn {
		width: auto;
		padding: 0px 20px 40px 20px;
		float: none;
		text-align: left;
	}

}

@media screen and (min-width: 768px) and (max-width: 1199.98px) {
	.contMainColumn_02 {
		width: 100%;
		padding: 30px 0 40px 0;
		border-right: none;
		float: none;
		text-align: left;
		font-size: 14px !important;
		line-height: 1.8em;
	}

	.contSideColumn {
		width: 100%;
		/*padding: 0px 0 40px 0;
		float: none;*/
		text-align: left;
	}
}

/*pagetop*/
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 1px #9b9792;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #9b9792;
    border-right: 3px solid #9b9792;
    transform: translateY(20%) rotate(-45deg);
}