@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: #9b9792;
	--news-icon-text-color: #fff;
	
	/* 大見出し（HeadingPart/Dafault）・表見出し・FAQ・背景付テキストエリアなど */
	--main-bg-color: #333333;
	--sub-bg-color: #efeeea;

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

	/* 大見出し（HeadingParts）小文字 */
	--heading-small-text-color: #fff;
	
	/* 大見出し（Dafault）の上線・小見出し（Dafault）インデックス線・大見出し（BasicParts）のインデックス線 */
	--main-border-color: #333333;
	--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: #333333;

	/* FAQ - answer  */
	--answer-text-color: #fff;
	--answer-bg-color: rgb(149, 1, 1);

	/* テキストカラー【枠】  */
	--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;
	/* ローカルナビ */
	--common-bg-keycolor: #333;
}


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

body {
	color: var(--common-fonts-color);
	font-family: 'Noto Sans JP', sans-serif;
	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;
	padding-top: 100px;
}

/* VcArea-Header の最大幅制限 */
#VcArea-Header {
  /*max-width: 1240px;*/
  width: 100%;
  margin: 0 auto;
  padding: 10px 10px 0px;
  box-sizing: border-box;
  position: fixed;
  height: 100px;
  background: rgba(255,255,255,0.9);
  /*backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
	transform: translateY(0);*/
}
.toppage #VcArea-Header {
  background: rgba(239,238,234,0.9);
}


@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) {
#VcArea-Header {
  height: 60px;
}

	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: relative;
	top: 0;
	left: 0;
	z-index: 9999;

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


.headerWrap01 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  height: 80px;
  padding: 0 20px;
}

.headerLogo01 {
	float: left;
	margin-inline-end: 10px;
	margin-top: 10px;
}
.headerLogo01 img {
  width: 51px;
  height: 60px;
  inline-size: auto; /* ←もし不要なら削除してOK */
}

.header-banner {
	float: left;
}


.headerRight01 {
	float: right;
	font-weight: normal;
}


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

	& li {
		float: left;
		margin-top: 10px;

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

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

			&: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: 40px;
    height: 60px;
    max-width: 100%;
    height: auto;
    margin-top: -18px;
	}

	.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-color: #2e2e2e;
  color: #fff;
  font-size: 14px;
  padding: 0px 0px 20px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 30px;
}

.footer-logo img {
  width: 80px;
  height: 94px;
  margin-right: 125px; /* ロゴの右マージン */
}

.footer-links {
  display: flex;
  flex: 1;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: flex-start; /* ← 追加：全体を左寄せ */
}

.footer-links ul {
  width: 140px;         /* 各メニューリストの幅 */
  margin-right: 60px;   /* リスト間の余白 */
  text-align: left;
}
.footer-links li {
  margin-bottom: 15px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}
.footer-column.sns {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左寄せ&上揃え */
  justify-content: flex-start;
  gap: 20px;
  margin-top: 0;
}
.footer-sns {
  display: flex;
  flex-direction: column;     /* 縦並びにする */
  gap: 20px;                  /* アイコン間のスペース */
  align-items: center;
  justify-content: center;
}


.footer-sns a {
  display: inline-block;
  margin-left: 16px;
}

.footer-sns img {
  width: 32px;
  height: 32px;
}

.footer-bottom {
  height: 60px;             /* フッターボトムの高さ */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-top: 30px;         /* ボーダーとの間の余白 */
  border-top: 1px solid #555; /* 上部ボーダー */
}
@media (max-width: 767px) {
.footer-bottom {
  height: auto;             /* フッターボトムの高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 15px;
}
}
.footer-bottom-left a {
  color: #fff;
  margin-right: 20px;
  text-decoration: none;
  font-size: 13px;
}

.footer-bottom-left a:hover {
  text-decoration: underline;
}

.footer-bottom-right small {
  font-size: 13px;
  color: #ccc;
}

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




@media (max-width: 767px) {

  /* footer-top を縦並び＋中央寄せに */
  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  /* footer-logo 中央に配置 */
  .footer-logo {
    margin: 0 auto 20px;
    text-align: center;
  }

  .footer-logo img {
    margin: 0 auto !important;
    display: block;
    margin-right: 0 !important; /* ← ← ← ここが追加ポイント */
  }

  /* footer-links を中央寄せの縦並びに */
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer-links ul {
    width: auto;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .footer-links li {
    margin-bottom: 4px;
  }

  /* SNSアイコン横並び中央寄せに */
  .footer-column.sns {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px;
    margin-top: 20px;
  }

  .footer-column.sns img {
    width: 32px;
    height: auto;
  }
	
	
	

  /* float を有効にするため display を block に */
  .footer-links {
    display: block;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* clearfix 兼ねる */
	  padding: 0 40px;
  }

  /* Z型2列配置 */
  .footer-links ul {
    float: left;
    width: 45%;
    padding: 0;
    margin: 0;
    text-align: left;

  }

  .footer-links li {
    margin-bottom: 6px;
    white-space: n: nowrap;
	  margin-left:25%;
  }
	

}








.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;
		}
	}

}


/**** footer contact section *****/

/* セクション全体 */
.contact-section {
  background-color: #2E2E2E;
  background-image: url("../img/common/bg_contact.png");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: auto;
  padding: 80px 20px;
  color: #fff;
  max-height: 380px;        /* 最大の高さ制限 */
  overflow: hidden;         /* はみ出したら非表示 */
  position: relative;
}

.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

/* 見出し全体 */
.contact-heading {
  position: absolute;
  top: 20px;
  max-width: 300px;
  text-align: left;
}

/* 英語見出し */
.contact-heading .en {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  display: block;
  margin-bottom: 4px;
}

/* 日本語見出し */
.contact-heading .ja {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  display: block;
}

/* 右側ボタンと補足 */
.contact-section {
  position: relative;
  width: 100%;
  background-color: #2e2e2e;
  background-image: url("../img/common/bg_contact.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto;
  padding: 80px 20px;
  color: #fff;
  overflow: hidden;
	margin-bottom: 40px;
}


/* センターコンテンツ：ボタン＋補足 */
.contact-content {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* ボタン仕様（580×100px、白） */
.contact-button a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 580px;
  height: 100px;
  background-color: #ffffff;
  color: #333333;
  font-size: 18px;
  font-weight: 400;
  border-radius: 50px;
  text-decoration: none;
  position: relative;
  transition: background-color 0.3s ease;
}

/* グレー丸＋矢印 */
.contact-button a::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #555555;
  background-image: url("../img/common/arrow_linkbox.png");
  background-repeat: no-repeat;
  background-position: center;
}

/* 補足テキスト */
.contact-note {
  font-size: 13px;
  color: #ffffff;
  line-height: 1.6;
  margin-top: 30px;
}


/* ボタン */
.link-btn.large.white a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 580px;
  height: 60px;
  background-color: #fff;
  color: #333;
  font-size: 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (max-width: 767px) {
.link-btn.large.white a {
  font-size: 18px;
}
}
.link-btn.large.white a::after {
  content: "";
  width: 24px;
  height: 24px;
  background-color: #555;
  background-image: url("../img/common/arrow_linkbox.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.link-btn.large.white a:hover {
  background-color: #eee;
  color: #111;
}

/* 補足文 */
.contact-note {
  font-size: 12px;
  color: #ffffff;
  line-height: 1.6;
  margin-top: 20px;
  text-align: center;
}

@media (max-width: 767px) {
  .contact-grid {
    position: static !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 20px;
  }

  .contact-heading {
    text-align: center;
    width: 100%;
	  top:40px;
  }

  .contact-content {
    width: 100%;
  }

  .contact-content .link-btn {
    width: 100%;
    max-width: 100%;
	 margin-top: 40px;
  }

  .contact-content .link-btn a {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .contact-note {
    margin-top: 20px;
    text-align: center;
  }
	  /* CONTACTセクション特有の見出しサイズ調整 */
  .contact-section .contact-heading .en {
    font-size: 220%;
  }

  /* ボタンと見出しの重なり防止のためのマージン追加 */
  .contact-section .contact-heading {
    margin-bottom: 20px;
  }
}







/* --------------------------------------------------------------------
 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 #333;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

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

/*************************
追加スタイル
**************************/

/* お問い合わせボタン用スタイル */
li.contact-button {margin-top: 0px;}
.contact-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

li.contact-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 50px;
  background-color: #333333;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 400;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  padding: 0;
  margin: 0;
  line-height: 1;
  vertical-align: middle;
  box-sizing: border-box;
  margin-left:15px;
}

li.contact-button a:hover {
  background-color: #555555;
  text-decoration: none;
}

.contact-button a::after {
  display: none !important;
  content: none;
}