@charset "utf-8";

@import url("table.css");


/* =============================================================  HTML,Body,Anchor*/


html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
	text-align: justify;
	/* 必要に応じてワードブレイクを設定 */
	word-break: break-all; 
	margin:0px auto 0px auto;
}




.pcOnly {
	display: block;
}


.spOnly {
	display: none;
}






html {
overflow-x: hidden;
overflow-y: scroll;
}



body{
	width: 100%;
	height: auto;
	margin:0px auto 0px auto;
	overflow:hidden;
	color: #595757;

}

*,
*:before,
*:after {
  box-sizing: inherit;
  box-sizing: inherit;
}





/****************************************************************************************
/* リンク設定
****************************************************************************************/


figure a{color:#666666;text-decoration:none;}
figure a:hover{color:#4fa417;}
figure a:active, a:focus {outline:0;}


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

}
a:active, a:focus {
outline:0;
text-decoration:none;
}

a { text-decoration: none; }





/****************************************************************************************
/* ヘッダーレイアウト設定
****************************************************************************************/



#wrapper {
	margin: 0px auto 0px auto;
	width:100%;
	box-sizing: border-box;

}

#header {
	position: relative;
	display: block;
	width:960px;
	height:127px;
	margin: 30px auto 0 auto;
	box-sizing: border-box;
}


@media screen and (max-width: 1028px){
	#header {
		position: fixed;
		display: block;
		width:100%;
		height:65px;
		margin: 0px auto 0 auto;
		background-color: #ffffff;
		box-sizing: border-box;
		z-index:10;
	}
}



.header_in {
	display: flex;
	justify-content: space-between;
	width:100%;
	height:50px;
	margin: 0px auto 0 auto;
	box-sizing: border-box;
}

.header_left {
	text-align: left;
	box-sizing: border-box;
}


@media screen and (max-width: 1028px){
	.header_left {
		display: block;
		margin-top: 10px;
		margin-left: 10px;
	}
}



.header_right {
	text-align: right;
	box-sizing: border-box;
}



.top_menu_box01 {
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
	background-color: #9F110F;
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
}

.top_menu_box02 {
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 7px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
	background-color: #5D4A88;
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
}




#pagebody {
	margin:0px auto 0px auto;
	width:960px;
	text-align:left;
}

@media screen and (max-width: 1028px){
	#pagebody {
		margin:0px auto 0px auto;
		width:100%;
		text-align:left;
	}
}

.sp_image {
	display: block;
	margin: 0px auto 20px auto;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px){
	.sp_image {
		display: block;
		margin: 20px auto 20px auto;
		width: 90%;
		height: auto;
	}
}



.sp_image2 {
	display: block;
	margin: 0px auto 0px auto;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px){
	.sp_image2 {
		display: block;
		margin: 20px auto 20px auto;
		width: 90%;
		height: auto;
	}
}




/****************************************************************************************
/* メニューレイアウト設定
****************************************************************************************/




.main-nav ul {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

.main-nav ul li {
	flex: 1; /* ←これが核心 */
	text-align: center;
	border-left:1px solid #555555;

}

.main-nav ul li:last-child {
	text-align: center;
	border-right:1px solid #555555;

}



.main-nav a {
	position: relative;
	display: block;     /* ←変更 */
	width: 100%;        /* ←追加（念のため） */
	text-decoration: none;
	color: #333333;
	font-size: 14px;
	padding: 5px 0;
	transition: color 0.3s ease;
	overflow: hidden; /* ←重要（はみ出し防止） */
	padding-bottom: 15px;
}

.main-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0; /* ←高さ0スタート */
	background: #FE1D30;
	z-index: -1; /* ←文字の後ろに */
	transition: height 0.3s ease;
}

.main-nav a:hover {
	color: #333333; /* 背景乗るので白に */
}

.main-nav a:hover::after {
	height: 6px; /* ←下から上に広がる */
	width: 100%;

}


.main-nav li a.active {
	box-shadow: 0px -5px 0px 0px #E71A2D inset;
	color: #3049A3;
}


.main-nav p {
	font-weight: 700;
	font-size: 14px;
}

.main-nav span {
	display: inline-block;
	font-weight: 700;
	font-size: 11px;
	color: #83B1A5;
}


/****************************************************************************************
/* メインイメージ設定
****************************************************************************************/


.slide {
	width:100%;
	height:398px;
	background-image: url(../images/image_bg.gif);
	background-repeat:repeat-x;
	box-sizing: border-box;
	position: relative; /* ←これ追加（最重要） */
	overflow: hidden;   /* ←はみ出し防止（推奨） */
}

.stage {
	width:960px;
	list-style: none;
	position:relative;
	z-index:1;
	box-sizing: border-box;
}

.stage img {
	display: block;
}


.stage li {
	font-size: 0; /* 念のため余白潰し */
	line-height: 0;
}


.main_copy {
	width:960px;
	position:absolute;
	bottom: 25px;
	left: 52%;
	transform: translateX(-50%);
	z-index: 3; /* ←最前面 */
}


@media screen and (max-width: 768px){
	.main_copy {
		width:90%;
		position:absolute;
		bottom: 25px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3; /* ←最前面 */
	}
}



.main_copy p {
	color:#fff;
	font-weight:700;
	font-size: 32px;
	text-shadow:1px 1px 10px #000000;

}

@media screen and (max-width: 768px){
	.main_copy p {
		color:#fff;
		font-weight:700;
		font-size: 26px;
		text-shadow:1px 1px 10px #000000;

	}
}




.main_copy span {
	color:#fff;
	font-weight:700;
	font-size: 20px;
	text-shadow:1px 1px 10px #000000;

}

@media screen and (max-width: 768px){
	.main_copy span {
		color:#fff;
		font-weight:700;
		font-size: 16px;
		text-shadow:1px 1px 10px #000000;
		line-height: 1.6;
	}
}


.leftNav,
.rightNav {
	background-color: #000000;
	outline: none;
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
	box-sizing: border-box;

}

.leftNav:before,
.rightNav:before {
	content:"";
	width:100%;
	height:100%;
	display: block;
	box-sizing: border-box;

}

.leftNav:hover {
	background: url(../images/leftNav.png) right center no-repeat  /*rgba(0,0,0,0.8);*/
}


.rightNav:hover {
	background: url(../images/rightNav.png) left center no-repeat  /*rgba(0,0,0,0.8);*/
}

.leftNav:hover:before,
.rightNav:hover:before {
	background: url(../images/bg2.png);
}



/****************************************************************************************
/* サブメニュー吹き出し設定
****************************************************************************************/

.balloon_wrap {
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: 10px;            /* 間隔 */
	align-items: center;  /* 縦位置揃え */
	margin-top: 20px;
}

@media screen and (max-width: 768px){
	.balloon_wrap {
		display: flex;
		margin: 20px auto 0 auto;
		width: 90%;
		justify-content: space-between;
		gap: 10px;            /* 間隔 */
		align-items: center;  /* 縦位置揃え */
	}
}





.balloon1 {
	width: 100%;
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 10px 10px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	background: #9E110F;
	text-align: center;

}

@media screen and (max-width: 768px){
	.balloon1 {
		width: 100%;
		position: relative;
		display: inline-block;
		margin: 1.5em 0;
		padding: 3px 3px 2px 0px; /* ←左に余白追加（矢印分） */
		color: #ffffff;
		font-size: 8px;
		font-weight: 700;
		background: #9E110F;
		text-align: center;
	}
}





.balloon1:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border: 8px solid transparent;
	border-top: 10px solid #9E110F;
}

.balloon1 p {
	margin: 0;
	padding: 0;
}


.balloon2 img {
	position: static;
	transform: none;
	left: auto;
	top: auto;
	width: 15px;
	height: auto;
}

.balloon2 {
	position: relative;
	display: block;
	margin: 1.5em 0;
	padding: 10px 10px 10px 30px; /* ←左に余白追加（矢印分） */
	color: #333333;
	font-size: 12px;
	font-weight: 700;
	background: #ffffff;
	text-align: center;
	border:1px solid #9E110F;
}


@media screen and (max-width: 768px){
	.balloon2 {
		position: relative;
		display: block;
		margin: 1.5em 0;
		padding: 2px 2px 2px 20px; /* ←左に余白追加（矢印分） */
		color: #333333;
		font-size: 8px;
		font-weight: 700;
		background: #ffffff;
		text-align: center;
		border:1px solid #9E110F;
	}
}



.balloon2 p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0;
	transform: translateX(-18px); /* ←ここがポイント */

}

.balloon_wrap a {
	flex: 1;
	text-decoration: none;
}



/****************************************************************************************
/* トップコメント設定
****************************************************************************************/

.top_box {
	margin: 50px auto 40px auto;
	display: block;
	font-weight: 500;
	font-size: 100%;
	letter-spacing: 1.1px;
	line-height: 1.6;
}

@media screen and (max-width: 768px){
	.top_box {
		width: 90%;
		margin: 30px auto 30px auto;
		display: block;
		font-weight: 500;
		font-size: 100%;
		letter-spacing: 1.1px;
		line-height: 1.6;
	}
}


.top_box p {
	margin: 0px auto 10px auto;
	display: block;
	font-weight: 700;
	font-size: 110%;
	color: #1A86B1;
	letter-spacing: 1.1px;
	line-height: 1.6;
}


h1.blue {
	margin: 0px auto 10px auto;
	display: block;
	font-weight: 700;
	font-size: 110%;
	color: #1A86B1;
	letter-spacing: 1.1px;
	line-height: 1.6;
}



.top_box2 {
	margin: 30px auto 30px auto;
	display: block;
	font-weight: 500;
	font-size: 100%;
	letter-spacing: 1.1px;
	line-height: 1.6;
}

@media screen and (max-width: 768px){
	.top_box2 {
		width: 90%;
		margin: 30px auto 30px auto;
		display: block;
		font-weight: 500;
		font-size: 100%;
		letter-spacing: 1.1px;
		line-height: 1.6;
	}
}


.top_box2 p {
	margin: 0px auto 10px auto;
	display: block;
	font-weight: 700;
	font-size: 110%;
	color: #1A86B1;
	letter-spacing: 1.1px;
	line-height: 1.6;
}


.top_box3 {
  width: 100%;
  margin: 30px auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

@media screen and (max-width: 1028px){
  .top_box3 {
    width: 100%;
    display: block; /* ← これが最重要 */
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ← %やめる */
.top_box3_left {
  flex: 1;   /* 可変 */
}

@media screen and (max-width: 768px){
	.top_box3_left {
		width: 100%;
		display: block;
	}
}



/* ← 固定にする */
.top_box3_right {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 1028px){
	.top_box3_right {
		width: 100%;
		display: block;
	}
}


.top_box3_right img {
  max-width: 390px;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px){
	.top_box3_right img {
		margin: 0 auto 0 auto;
		width: 100%;
		height: auto;
		display: block;
	}
}







ul.top_middle_menu {
	width: 100%;
	position: relative;
	display: flex;
	list-style: none;
	margin: 0 auto 60px auto;
	padding: 0;
	box-sizing: border-box;
	gap: 20px;
}

ul.top_middle_menu li {
	position: relative;
	flex: 1; /* ←これが核心 */
	text-align: left;
}


@media screen and (max-width: 1028px){
	ul.top_middle_menu {
		width: 90%;
		display: flex;          /* ← blockじゃなくflex */
		flex-wrap: wrap;        /* ← 折り返し */
		gap: 10px;              /* ← 余白 */
		margin: 0 auto 60px auto;
	}

	ul.top_middle_menu li {
		flex: 0 0 calc(50% - 5px);
	}

	ul.top_middle_menu li img {
		width:100%;
		height: auto;
		display: block;
	}
}

ul.top_middle_menu li p {
	position: absolute;
	bottom: 5px;
	left: 0;
	right: 0;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	text-align: center; /* ←これが必要 */
}




/********************************************************************************************************
/* 本文ボックス
*********************************************************************************************************/



.ttlTombo {

	width: 100%;
	position: relative;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;

	display: block;
	border: 1px dotted #bdc3c7;
	text-align: left;
	margin: 20px auto 30px auto;

	background:
	radial-gradient(at 0% 0%, rgba(153,186,255,0.4), transparent),
	radial-gradient(at 100% 0%, rgba(255,158,186,0.4), transparent),
	radial-gradient(at 0% 100%, rgba(194,255,238,0.4), transparent),
	radial-gradient(at 100% 100%, rgba(255,184,177,0.4), transparent);

}

.ttlTombo:before,
.ttlTombo:after,
.ttlTombo > span:before,
.ttlTombo > span:after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	background: url(../images/imgcorner.png) 0 0 no-repeat;
}

.ttlTombo:before {
	top: -1px;
	left: -1px;
	transform: rotate(0deg);
}
.ttlTombo:after {
	top: -1px;
	right: -1px;
	transform: rotate(90deg);
}
.ttlTombo > span:before {
	bottom: -1px;
	left: -1px;
	transform: rotate(-90deg);
}
.ttlTombo > span:after {
	bottom: -1px;
	right: -1px;
	transform: rotate(180deg);
}



.ttlTombo p {
	color: #555555;
	font-weight: 700;
	font-size: 100%;
	letter-spacing : 1.5px;
	color: #524640;
}

.ttlTombo p.blue {
	font-size: 120%;
	font-weight: 600;
	padding-bottom: 10px;
	color: #4BBFBF;

}

.ttlTombo p.red {
	font-size: 110%;
	font-weight: 500;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #B3184B;

}

.ttlTombo p.bold_green {
	display: block;
	font-size: 110%;
	line-height: 1.5;
	font-weight: 700;
	color: #6EB92B;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	letter-spacing : 3px;
}






/********************************************************************************************************
/* 本文ボックス
*********************************************************************************************************/



.ttlTombo2 {

	width: 100%;
	position: relative;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;

	display: block;
	border: 1px dotted #bdc3c7;
	text-align: left;
	margin: 20px auto 30px auto;

	background:
	radial-gradient(at 0% 0%, rgba(153,186,255,0.4), transparent),
	radial-gradient(at 100% 0%, rgba(255,158,186,0.4), transparent),
	radial-gradient(at 0% 100%, rgba(194,255,238,0.4), transparent),
	radial-gradient(at 100% 100%, rgba(255,184,177,0.4), transparent);

}

.ttlTombo2:before,
.ttlTombo2:after,
.ttlTombo2 > span:before,
.ttlTombo2 > span:after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	background: url(../images/imgcorner.png) 0 0 no-repeat;
}

.ttlTombo2:before {
	top: -1px;
	left: -1px;
	transform: rotate(0deg);
}
.ttlTombo2:after {
	top: -1px;
	right: -1px;
	transform: rotate(90deg);
}
.ttlTombo2 > span:before {
	bottom: -1px;
	left: -1px;
	transform: rotate(-90deg);
}
.ttlTombo2 > span:after {
	bottom: -1px;
	right: -1px;
	transform: rotate(180deg);
}



.ttlTombo2 p {
	color: #555555;
	font-weight: 700;
	font-size: 100%;
	letter-spacing : 1.5px;
	color: #524640;
}

.ttlTombo2 p.blue {
	font-size: 120%;
	font-weight: 600;
	padding-bottom: 10px;
	color: #4BBFBF;

}

.ttlTombo2 p.red {
	font-size: 110%;
	font-weight: 500;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #B3184B;

}

.ttlTombo2 p.bold_green {
	display: block;
	font-size: 110%;
	line-height: 1.5;
	font-weight: 700;
	color: #6EB92B;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	letter-spacing : 3px;
}






/****************************************************************************************
/* サブタイトル設定
****************************************************************************************/



#subtitle {
	width:100%;
	padding: 5px 0 5px;
	background-image: url(../images/subtitle_base.png?ver-20260416);
	background-position: 50% 0%;
	background-size: cover;
}


#subtitle_in {
	width: 960px;
	margin: 0 auto 0px auto;
	height: 100px;
	display: flex;
	align-items: flex-end; /* ←これが本質 */
}

@media screen and (max-width: 768px){
	#subtitle_in {
		width: 90%;
		margin: 30px auto 0px auto;

	}
}



.subtitle01 {
	font-size: 12px;
	color: #fff;
	margin-bottom: 1px;
	letter-spacing: 1px;
}

.subtitle01 img {
	display: block;
	width: auto;
	height: 14px;
}

@media screen and (max-width: 768px){
	.subtitle01 img {
		display: block;
		width: auto;
		height: 10px;

	}
}



.subtitle02 {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1.1px;
	margin-bottom : 10px;
}



h2{
	display: block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin: 30px auto 20px auto;
	padding: 0.5em 1.0em 0.5em 2.0em;
	background-color: #550F0F;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-align: left;
	color: #ffffff;
}

h2::after {
	position: absolute;
	top: 50%;
	left: 1.0em;
	transform: translateY(-50%);
	content: '';
	width: 5px;
	height: 20px;
	background-color: #ffffff;
}

h2 span{
	position: absolute;
	top: 50%;
	right: 1.0em;
	transform: translateY(-50%);
	font-size: 12px;
	white-space: nowrap;
}

@media screen and (max-width: 768px){
	h2{
		margin: 20px auto 15px auto;
		width: 90%;
	}
}







h3{
	display: block;
 	position: relative;
	width: 100%;
	margin: 20px auto 20px auto;
	padding:0.5em 0.5em 0.5em 2.0em;
	background-color:#550F0F;
	font-size: 16px;
	font-weight:700;
	letter-spacing: 1.5px;
	text-align: left;
	color: #ffffff;
}


@media screen and (max-width: 768px){
	h3{
		width: 90%;
	}
}

 
h3::after {
	position: absolute;
	top: 50%;
 	left:1.0em;
	transform:translateY(-50%);
	content: '';
	width: 5px;
	height:20px;
	background-color: #ffffff;
}


h4{
	display: block;
 	position: relative;
	width: 100%;
	margin: 20px auto 20px auto;
	font-size: 16px;
	font-weight:700;
	letter-spacing: 1.5px;
	text-align: left;
	color: #1A86B1;
}


@media screen and (max-width: 768px){
	h4{
		width: 90%;
	}
}

 





.red {
	display: block;
	font-weight: 700;
	font-size: 110%;
	color: #BB0931;
	margin: 20px auto 20px auto;
}


@media screen and (max-width: 768px){
	.red {
		display: block;
		width: 90%;
		font-weight: 700;
		font-size: 110%;
		color: #BB0931;
		margin: 20px auto 20px auto;
	}
}



.blue {
	display: inline-block;
	font-weight: 700;
	font-size: 100%;
	color: #115976;
}

.mb20 {
	display: block;
	margin: 0px auto 20px auto;
	line-height: 1.6;
	font-size: 95%;

}

@media screen and (max-width: 768px){
	.mb20 {
		width: 90%;
		display: block;
		margin: 0px auto 20px auto;
		line-height: 1.6;
		font-size: 95%;
	}
}

ol.ol_list {
	width: 100%;
	display: block;
	margin: 30px auto 30px auto;
	line-height: 1.6;
	font-size: 95%;
}

@media screen and (max-width: 768px){
	ol.ol_list {
		width: 90%;
		display: block;
		margin: 0px auto 20px auto;
		line-height: 1.6;
		font-size: 95%;
	}
}

@media screen and (max-width: 768px){
	.right {
		width: 90%;
		display: block;
		margin: 0px auto 20px auto;
		line-height: 1.6;
		font-size: 95%;
	}
}

@media screen and (max-width: 768px){
	.privacy {
		width: 90%;
		display: block;
		margin: 0px auto 20px auto;
		line-height: 1.6;
		font-size: 95%;
	}
}

/****************************************************************************************
/* お問い合わせ
****************************************************************************************/

.button07 {
	background-color: #66AECB;
	color: #ffffff;
	border-radius: 10px;
	padding: 10px 30px;
	text-decoration: none;
	font-size: 1em;
	box-shadow: 0 5px 0 #1A86B1;
}

@media screen and (max-width: 768px){
	.privacy {
	font-size: 0.6em;

	}
}


.button07:hover {
	color: #ffffff;
	opacity: 0.6;
}



.button08 {
	background-color: #ffd700;
	color: #000;
	border-radius: 10px;
	padding: 10px 30px;
	text-decoration: none;
	font-size: 1em;
	box-shadow: 0 5px 0 #b8860b;
}
.button08:hover {
	color: #000;
	opacity: 0.6;
}

/****************************************************************************************
/* トップへ設定
****************************************************************************************/



#page-top {
	position: fixed;
	bottom: 50px;
	right: 20px;
}
#page-top a {

}
#page-top a:hover {
	filter: alpha(opacity=60);
	-moz-opacity:.6;
	opacity:.6;
}


/**************************
/* Googlemap用
**************************/

.accessmap{
width : 958px;
height : 350px;

border: 1px #cccccc solid;
}

iframe{
	margin-top: 0px;
	margin-bottom: 5px;
}


@media screen and (max-width: 768px){
	iframe{
    		display: block;           /* ←これが重要 */
		margin: 0 auto 5px auto;
		width: 90%;
	}
}



.map_address{
	display: block;
	font-weight: 700;
	font-size: 90%;
	margin: 0 auto 30px auto;
	width: 90%;
}



/****************************************************************************************
/* フッター設定
****************************************************************************************/


#pankuzu {
	width:100%;
	margin:50px auto 0px auto;
	border-top:1px solid #e1e1da;
	background-color:#f5f5ee;
	padding-top:7px;
	padding-bottom:10px;

}
#pankuzu_in {
	width:960px;
	font-size:80%;
	margin:0px auto 0px auto;

}

@media screen and (max-width: 768px){
	#pankuzu_in {
		width:90%;
		font-size:80%;
		margin:0px auto 0px auto;

	}
}





ul #pankuzu_in {
	display: block;
	margin:0px auto 0px auto;
	text-align:left;
}

#pankuzu_in li { 
display:table-cell;
padding-left:15px;
padding-right:15px;
background: url('../images/arrow.gif') no-repeat;
background-position: 0px 4px;
}


@media screen and (max-width: 768px){
	#pankuzu_in li { 
		display:table-cell;
		padding-left:15px;
		padding-right:15px;
		background: url('../images/arrow.gif') no-repeat;
		background-position: 0px 4px;
	}

}






#pankuzu2 {
	width:958px;
	margin:0px auto 0px auto;
	background-color:#f5f5ee;
	padding-top:3px;
	padding-bottom:5px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #bbbbbb;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #bbbbbb;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #bbbbbb;

}




#balloon-1-bottom {
  position: relative;
  display: flex;                 /* ←変更 */
  justify-content: space-between;
  align-items: center;

  padding: 0 15px;
  min-width: 958px;
  line-height: 34px;

  color: #19283C;
  background: #F6F6F6;
  border: 1px solid #19283C;
}


@media screen and (max-width: 768px){
	#balloon-1-bottom {
		margin: 0 auto 0 auto;
		width: 90%;
		min-width: 90%;
	}
}




/* absoluteをやめる */
#pankuzu_in1,
#pankuzu_in2 {
  position: static;
	font-size: 85%;
}

/* ul整形 */
#pankuzu_in2 {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* li */
#pankuzu_in2 li {
  padding-left: 15px;
  margin-left: 10px;
  background: url('../images/arrow.gif') no-repeat 0 center;
}





#footer {
	width:100%;
	margin:0px auto 0px auto;
	border-top:1px solid #d7d7d0;
	background-color:#ebebe4;

}



#footer02 {
	margin:0px auto 0px auto;
	width:960px;
	padding-top: 40px;
	padding-bottom: 20px;

}

@media screen and (max-width: 1028px){
	#footer02 {
		margin:0px auto 0px auto;
		width:90%;
		padding-top: 40px;
		padding-bottom: 20px;

	}
}




/****************************************************************************************
/* フッターメニューレイアウト設定
****************************************************************************************/




ul.footer_menu {
	width: 100%;
	position: relative;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	gap: 25px;
}

ul.footer_menu li {
	flex: 1; /* ←これが核心 */
	text-align: left;
}


ul.footer_menu p {
	display:block;
	font-size:95%;
	color: #1A86B1;
	font-weight: 700;
	font-size: 15px;
	text-align: left;
	padding-bottom: 5px;
	border-bottom: 1px dotted #000000;
	letter-spacing: 1.1px;
}





ul.bottom_submenu {
	display: block;
	margin:12px auto 20px auto;
	padding-left:0;
	text-align:left;

}

ul.bottom_submenu li {
	display:block;
	padding-left:15px;
	background: url('../images/arrow-side.gif') no-repeat;
	background-position: 0px 8px;
	margin-bottom: 8px;
	font-size:85%;

}

ul.bottom_submenu li a {
	color: #323232;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 1.1px;
}





#footer_in {
	margin:0px auto 0px auto;
	display: flex;
	width:960px;
	font-size:85%;
	padding-top: 30px;
	padding-bottom: 35px;
	justify-content: space-between;
	align-items: stretch;

}

@media screen and (max-width: 1028px){
	#footer_in {
		margin:0px auto 0px auto;
		display: block;
		width:90%;
		font-size:85%;
		padding-top: 30px;
		padding-bottom: 35px;
		justify-content: space-between;
		align-items: stretch;

	}
}




#footer_in_left {
	width:660px;
	text-align:left;
	letter-spacing: 1.1px;
	line-height: 1.6;
}



#footer_in_right {
	width:300px;
	text-align:right;

}



@media screen and (max-width: 768px){
	#footer_in_left {
		width:100%;
		text-align:left;
		letter-spacing: 1.1px;
		line-height: 1.6;
		margin-bottom: 20px;
	}

	#footer_in_right {
		width:100%;
		text-align:center;

	}

}





p.neriki_bbb{
	font-size:140%;
	color:#323232;
	font-weight: 700;
	margin-bottom: 10px;
}


@media screen and (max-width: 768px){
	p.neriki_bbb{
		font-size:120%;
		color:#323232;
		font-weight: 700;
		margin-bottom: 10px;
	}
}



.mail_otoiawase{
	display: block;
	font-size:120%;
	background-color:#323232;
	color: #ffffff;
	font-weight: 700;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 20px;
	padding-right: 20px;
	letter-spacing: 1.1px;
	margin-bottom: 10px;
}


.tel01{
	font-size:130%;
	font-family:Arial, sans-serif;
	color:#323232;
	font-weight: 700;
}

.tel02{
	font-size:240%;
	font-family:Arial, sans-serif;
	color:#323232;
	font-weight: 700;

}

.copyright{
	font-size:77%;
	font-family:Arial, sans-serif;
	color:#000000;
}




.bottom_line {
	display: block;
	width:100%;
	height:13px;
	background-image: url(../images/bottom_line.gif);
	background-repeat:repeat-x;
}





.copyright_area {
	text-align:right;
	width:960px;
	margin:0px auto 0px auto;
	padding-top:5px;
	padding-bottom:10px;

}


@media screen and (max-width: 768px){
	.copyright_area {
		text-align:center;
		width:100%;
		margin:0px auto 0px auto;
		padding-top:5px;
		padding-bottom:10px;

	}
}





/* 採用サブメニュー
---------------------------------------------------- */


ul.recruit_menu {
	width: 100%;
	position: relative;
	display: flex;
	list-style: none;
	margin: 20px auto 60px auto;
	padding: 0;
	box-sizing: border-box;
	gap: 20px;
}

ul.recruit_menu li {
	position: relative;
	flex: 1; /* ←これが核心 */
	text-align: left;
}

@media screen and (max-width: 768px){
  ul.recruit_menu {
	width: 90%;
	flex-wrap: wrap; /* ←これ必須 */
	justify-content: space-between;
	justify-content: flex-start;/*左寄せで配置*/
	box-sizing: border-box;
	gap: 10px;

  }

  ul.recruit_menu li {
  flex: 0 0 calc(33.333% - 7px);
  }

  ul.recruit_menu img.senpai_pic {
    width: 100%;
    height: auto;
    display: block;
  }
}



.recruit_bottom_box_in01{
	display: block;
	width:100%;
	padding:10px;
	text-align:center;
	background-color:#ebebe4;

}


.recruit_bottom_box_in01 a{
	display:block;
	width:100%;
	text-align:center;
}



.recruit_bottom_box_in01 a:hover{
	display:block;
	background-color:#ffffff;
	width:100%;
	text-align:center;
	vertical-align:middle;
}





/**************************
/* 先輩紹介
**************************/




.senpai {
	justify-content: space-between;
	margin: 30px auto 30px auto;
	display: flex;
	width:960px;
	text-align:left;
}

@media screen and (max-width: 768px){
	.senpai {
		margin: 30px auto 30px auto;
		display: block;
		width:90%;
		text-align:left;
	}
}



.senpai_left {
	width:35%;
	text-align:left;
}


@media screen and (max-width: 768px){
	.senpai_left {
		display: block;
		width:100%;
		text-align:left;
	}
}



.senpai_left img {
	width:100%;
	height: auto;
	display: block;
}


.senpai_right {
	width:60%;
	text-align:left;
	line-height: 1.6;
	font-size: 95%;
}

@media screen and (max-width: 768px){
	.senpai_right {
		display: block;
		width:100%;
		text-align:left;
		line-height: 1.6;
		font-size: 95%;
	}
}


.senpai_name_box {
	width: 100%;
	display: block;
	font-size: 80%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
}





/* 先輩紹介
---------------------------------------------------- */


.senpai_box {
	width:588px;
	background-color:#ffffff;
	font-size: 100%;
	margin:0px auto 0px auto;
	text-align:center;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #bbbbbb;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #bbbbbb;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #bbbbbb;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #bbbbbb;
	color:#555555;
	margin-top:15px;
	margin-bottom:7px;

	}

@media screen and (max-width: 768px){
	.senpai_box {
		display: block;
		width:100%;
	}
}



.senpai_box1 {
	width:588px;
	background-color:#ffffff;
	font-size: 100%;
	margin:0px auto 0px auto;
	text-align:center;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #bbbbbb;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #bbbbbb;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #bbbbbb;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #bbbbbb;
	color:#555555;
	margin-bottom:7px;

	}

@media screen and (max-width: 768px){
	.senpai_box1 {
		display: block;
		width:100%;
	}
}


.senpai_box_in {
	margin:0px auto 0px auto;
	padding:5px;
	margin-left:5px;

	font-weight: bold;
	color: #26adad;
	text-align:left;
	}


.senpai_name_box {
	width:100%;
	background-color:#2b3e6d;
	color:#ffffff;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	}


.senpai_title_box {
	width:580px;
	background-color:#2b3e6d;
	color:#ffffff;
	font-weight:700;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:left;
	}

@media screen and (max-width: 768px){
	.senpai_title_box {
		display: block;
		width:100%;
	}
}



/**************************
/* 中途採用情報
**************************/

.exp_title_box {
	width:950px;
	background-color:#2b3e6d;
	color:#ffffff;
	font-weight:bold;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:left;
	}

@media screen and (max-width: 768px){
	.exp_title_box {
		margin : 0 auto 0 auto;
		display: block;
		width:90%;
	}
}







/* ボックス関連
---------------------------------------------------- */


.box {
	width:958px;
	background-color:#ffffff;
	font-size: 100%;
	margin:0px auto 10px auto;
	text-align:center;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #bbbbbb;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #bbbbbb;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #bbbbbb;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #bbbbbb;
	color:#555555;
	}



@media screen and (max-width: 768px){
	.box {
		width:90%;
	}
}



.in-box {
	margin:0px auto 0px auto;
	padding-top:20px;
	padding-bottom:20px;
	width:95%;
	font-weight: 700;
	color: #26adad;
	text-align:left;
	letter-spacing: 1.1px;
	line-height: 1.6;
	}


.in-box2 {
	margin:0px auto 0px auto;
	padding-left:5px;
	padding-top:15px;
	padding-bottom:15px;

	width:920px;
	font-weight: bold;
	color: #bb0931;

	text-align:left;
	}


/* FAQ
---------------------------------------------------- */

.faq_box {
	width:960px;
	background-color:#2b3e6d;
	color:#ffffff;
	line-height: 18px;
	text-align:center;
	margin-top: 30px;
	}


@media screen and (max-width: 768px){
	.faq_box {
		width:90%;
		background-color:#2b3e6d;
		color:#ffffff;
		line-height: 18px;
		text-align:center;
		margin: 20px auto 0 auto;
	}

}




.in-faq_box {
	width:100%;
	color:#ffffff;
	background-color:#2b3e6d;
	text-align:left;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	font-weight: 700;
	}


.faq_box_a {
	width:100%;
	margin:0px auto 0px auto;
	text-align:center;
	background-color:#f6fef3;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #bbbbbb;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #bbbbbb;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #bbbbbb;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #bbbbbb;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	line-height: 1.6;
	}
@media screen and (max-width: 768px){
	.faq_box_a {
		width:90%;
		margin:0px auto 0px auto;
		text-align:left;
	}

}


.faq_box_a_in {
	width:920px;
	margin:0px auto 0px auto;
	text-align:left;
	}


@media screen and (max-width: 768px){
	.faq_box_a_in {
		width:100%;
		margin:0px auto 0px auto;
		text-align:left;
	}

}


/**************************
/* 製品情報画像用ポイント
**************************/

.points > div {
 display: inline-block;
 width: 960px;
 background-color:#2b3e6d;
		padding-top: 0px;

}


@media screen and (max-width: 768px){
	.points > div {
		margin: 0 auto 0 auto;
		display: block;
		padding-top: 5px;
		width: 90%;
		background-color:#2b3e6d;
		box-sizing: border-box;
	}
}






.points p {
	margin: 0em 0;
	font-weight:700;
	color:#ffffff;
	text-align:center;
	padding-top: 10px;
	padding-bottom: 13px;
}
/* 共通 */
.points .image {
 position: relative;
}
/* ①triangle-b */
.point-triangle-b:after {
 position: absolute;
 content: " ";
 bottom: 0;
 left: 50%;
 height: 0;
 width: 0;
 border:10px solid transparent;
 border-bottom:10px solid #2b3e6d;
 margin-left: -10px;
}


.points2 > div {
 display: inline-block;
 width: 235px;
 background-color:#2b3e6d;

}


@media screen and (max-width: 768px){
	.points2 > div {
		margin: 0 auto 0 auto;
		display: block;
		padding-top: 1px;
		width: 100%;
		height: 100%;
		background-color:#2b3e6d;
		box-sizing: border-box;
	}
}



/* 共通 */
.points2 .image {
 position: relative;
	padding-bottom: 0px;
}

@media screen and (max-width: 768px){
	.points2 .image {
		 position: relative;
		padding-bottom: 1px;
	}
}




/* ①triangle-b */
.point-triangle-b2:after {
 position: absolute;
 content: " ";
 bottom: 48%;
 left: 100%;
 height: 0;
 width: 0;
 border:10px solid transparent;
 border-right:10px solid #2b3e6d;
 margin-left: -20px;
}




.point2_box {
  width: 235px;
  height: 100%;
  background-color:#2b3e6d;
  font-weight:bold;
  color:#ffffff;
  text-align:center;
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
}

@media screen and (max-width: 768px){
	.point2_box {
		width: 100%;
		height: 100%;
		background-color:#2b3e6d;
		font-weight:bold;
		color:#ffffff;
		text-align:center;
		display: flex;
		justify-content: center; /* 横中央 */
		align-items: center;     /* 縦中央 */
	}
}

/* =========================
  全体レイアウト
========================= */
.product{
  width:960px;
  margin:20px auto 0 auto;
  display:flex;
  justify-content: space-between;
}


@media screen and (max-width: 768px){
	.product{
	  width:90%;
	  margin:20px auto 0 auto;
	  display:block;
	  justify-content: space-between;
		box-sizing: border-box;

	}
}

/* 左右カラム */
.product_left,
.product_right{
  width:470px;
  display:flex;              /* ←ここが重要 */
  justify-content: space-between;
}

@media screen and (max-width: 768px){
	.product_left,
	.product_right{
		width:100%;
		display:flex;              /* ←ここが重要 */
		justify-content: space-between;
		box-sizing: border-box;
		margin-bottom: 20px;

	}
}

/* 内部2分割 */
.product_left_in,
.product_right_in{
  width:235px;
}

@media screen and (max-width: 768px){
	/* 内部2分割 */
	.product_left_in,
	.product_right_in{
	  width:50%;
	}
}


/******************************************************************************
/* タブレットサイズ
*******************************************************************************/


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

body {
	font-size: 90%;
}



.pcOnly {
	display: none;
}


.spOnly {
	display: block;
}



/******************************************************************************
/* スマホ用メニュー
*******************************************************************************/


.sub_menu {
	display: flex;
	padding-top: 70px;
	padding-bottom: 0px;
	justify-content: space-between;
	flex-wrap: wrap;

}



nav{
	display: none;
	position: absolute;
	top:0px;
	width: 100%;
	left: 0;
	padding-bottom: 50px;
	z-index: 9999999;

}
 
/*------------------------------------プルダウンの部分を記述--------------*/
 
nav ul{
	margin:30px auto 0px;
	width: 90%;
}
 
nav ul li{
	display: inline-block;
	text-align: center;
	margin-bottom: 10px;
	letter-spacing: 1px;
}
 
/*最後のメニューは下線を不要にする -------------------------------------------*/






/*開閉ボタンの作り方 ------------------------------------------------*/

#nav_toggle {
	display: block;
	width: 65px;
	height: 65px;
	position: absolute;/*固定にします。*/
	top: 0px;
	right: 0px;/*左端に配置*/
	z-index: 9999999;
	background-color: #134165;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	cursor: pointer

}



#nav_toggle div {
	position: relative;
	background-color: rgba(59,59,59,0.77);
	z-index: 999999;


}

#nav_toggle p {
	color:#134165;
	font-weight: 700;
}

 
#nav_toggle span {
	display: block;
	height: 3px;
	background-color: #ffffff;
	position:absolute;
	width: 50%;
	top: 50px;
	left: 22px;
	transition: 0.5s ease-in-out;
	text-align: center;
	margin-top: 21px;
}


 
#nav_toggle p {
	display: block;
	position:absolute;
	transition: 0.5s ease-in-out;
	text-align: center;
	margin-top: 49px;
	margin-left: 0px;
	font-size: 75%;
}

nav {
	position: fixed;
	background-color: rgba(59,59,59,0.77);
	z-index: 999999;
}

 
/*-----------------------------------------------------三本ずつずらして設定*/

#nav_toggle span:nth-child(1){
	top:0px;
	left: 17px;
}
#nav_toggle span:nth-child(2){
	top:10px;
	left: 17px;
}
#nav_toggle span:nth-child(3){
	top: 20px;
	left: 17px;
}

 
/*-----------------------------開閉ボタンopen時-------*/

.open #nav_toggle span:nth-child(1) {
top: 9px;
left: 17px;
transform: rotate(135deg);
}
 
/* ----------------------------2本目を非表示にすることで、三本が2本になる*/

.open #nav_toggle span:nth-child(2) {
display:none;
}

.open #nav_toggle span:nth-child(3) {
top: 9px;
left: 17px;
transform: rotate(-135deg);
}


/******************************************************************************
/* スマホ用メニュー各ブロック
*******************************************************************************/


.homeWorkItem{text-align: center; padding: 1px;}


.homeWorkItem .line{
	display: none;
	position: absolute;
	background-color: #d9d9d9;
	transition:all 0.3s 0s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}


.homeWorkItem .line{display: block; transition:all 0.3s 0s cubic-bezier(0.215, 0.61, 0.355, 1)}

.homeWorkItem .line.line-top{top: 0;left: 0; width: 100%; height: 1px}
.homeWorkItem .line.line-left{top: 0;left: 0; height: 100%; width: 1px}
.homeWorkItem .line.line-bottom{bottom: 0;left: 0; width: 100%; height: 1px}
.homeWorkItem .line.line-right{right: 0; top: 0; height: 100%; width: 1px}

.homeWorkItem a{display:block;}
.homeWorkItem a{position:relative; box-sizing:border-box;background:none; height: 65px;}
.homeWorkItem a:hover{color: #ffd20d}
.homeWorkItem a:hover .line{background-color: #ffd20d}
.homeWorkItem a:hover .line.line-top{height: 4px}
.homeWorkItem a:hover .line.line-left{width: 4px}
.homeWorkItem a:hover .line.line-bottom{height: 4px}
.homeWorkItem a:hover .line.line-right{width: 4px}

.homeWorkItem .menutitle{
	position: absolute;
	width:100%;
	top: 50%;
	transform : translateY(-50%);
	font-size: 100%;
	font-weight: 500;
	text-align: center;
	color: #ffffff;
	text-decoration: none;

}




/******************************************************************************
/* スマホ用メニュー各ブロックサイズ
*******************************************************************************/



nav ul li:nth-child(1) {
	width: 100%;
	z-index: 1;

}



nav ul li:nth-child(2) {
	width: 49%;
}



nav ul li:nth-child(3) {
	width: 49%;
}

nav ul li:nth-child(4) {
	width: 49%;
}


nav ul li:nth-child(5) {
	width: 49%;

}

nav ul li:nth-child(6) {
	width: 49%;

}


nav ul li:nth-child(7) {
	width: 49%;

}


nav ul li:nth-child(8) {
	width: 49%;

}



nav ul li:nth-child(9) {
	width: 49%;

}


nav ul li:nth-child(10) {
	width: 100%;

}

}