/*----------------------------------------------------------------------------*/
/*	テックサービスサイト 		TOP page							  CSS    */
/*----------------------------------------------------------------------------*/
@charset "utf-8";

/* heading */

h2 {
	text-transform: uppercase;
	font-size: 3rem;
}

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

	h2 {
		font-size: 2rem;
	}
}

/* lead */
.top-lead {
	position: fixed;
	bottom: 10%;
	left: 5%;
	font-size: 3rem;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1.5;
}

.top-lead span.bgLRextend::before {
	background: #333;
}

@media screen and (max-width:550px) {
	.top-lead {
		font-size: 2.2rem;
	}
}

@media screen and (max-width:380px) {
	.top-lead {
		font-size: 1.8rem;
	}
}

/* ● 横スクロール位置バー の高さ範囲 */
#container {
	height: auto;
}

/* main-area */

/* 1025px以上のスタイル */
@media (min-width: 1025px) {
	.topcontainer {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 0 auto;
	}

	#main-area,
	.sidebar {
		padding: 10px;
		box-sizing: border-box;

	}

	#main-area {
		flex-grow: 1;
		max-width: 80%;
	}

	.sidebar {
		flex: 0 0 20%;
		max-width: 20%;
		background-color: #555;
		order: 0; 
		position: relative;
        background-image: url('../images/bg/sidebar.jpg'); /* 画像のパスを指定 */
        background-repeat: repeat-y; /* 縦方向に繰り返し */
        background-position: center; /* 中央に配置 */
        background-size: contain; /* 画像がdivに収まるように調整 */
	}

	.sidebar ul {
		list-style: none;
		padding: 0;
		margin: 0;
		text-align: center;
	}

	.sidebar ul li {
		margin: 20px 0;
		display: inline-block;
		width: 100%;
		margin-top: 20px;
	}
	.sidebar ul li span {
		font-size: 18px;
		font-weight: bold;
		color: #aaa;
	}
	.sidebar ul li a img {
		width: 80%;
		transition: opacity 0.3s ease;
	}

	.sidebar ul li a:hover img {
		opacity: 0.7;
	}
}

/* 1024px以下で適用されるスタイル */
@media (max-width: 1024px) {
	.topcontainer {
		flex-direction: column;
	}

	#main-area,
	.sidebar {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.sidebar {
		order: 2;
		background-color: rgba(85, 85, 85, 0.6);
	}

	.sidebar ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.sidebar ul li {
		margin: 10px 0;
		width: calc(33.333% - 20px);
	}

	.sidebar ul li a img {
		width: auto;
		max-width: 100%;
	}
}

@media only screen and (min-width:992px) {
	#cta02 {
		margin: 50px auto 0 auto;
	}
}

/* ■ NEWS section ---------------------------------------------*/

#news {
	margin: 0 auto 50px auto;
	/* ★FAQ挿入時取る */
	width: 100%;
	padding-bottom: 0;
	background-image: url("../images/bg/info_back03.jpg");
	background-size: cover;
	background-position: left 0 bottom 0;
	background-repeat: no-repeat;
}

#news h2 {
	margin: 0 0 50px 0;
	font-size: 46px;
	text-align: center;
	font-weight: bold;
	font-family: "NotoSansCJKjp-Bold";
	color: #fff;
	padding-top: 50px;
	text-shadow: 2px 2px 4px #000;
}

#news h2 span.bgLRextend::before {
	background: #FFF;
}

#news .cont01 {
	margin: 50px auto 0 auto;
	width: 75%;
	padding-top: 30px;
	padding-bottom: 50px;
	background-color: rgba(255, 255, 255, 0.99);
	/*  White  透過95% */
	box-shadow: 1px 1px 10px 1px #aaa;
	-webkit-box-shadow: 1px 1px 10px 1px #aaa;
	-moz-box-shadow: 1px 1px 10px 1px #aaa;
}

#news .cont01 ul {
	margin: 0 auto 0 12%;
	width: 76%;
	margin: 0 auto 0 7.5%;
	width: 85%;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #BDC3C7;
	/* Siver */
	position: relative;
}

#news .cont01 li {
	margin: 0 auto 0 auto;
	width: 100%;
	font-size: 14px;
	font-family: "NotoSansCJKjp-Medium";
	font-display: swap;
	line-height: 28px;
	color: #444;
}

#news .cont01 li.newstitle {
	font-weight: bold;
	font-size: 18px;
}

#news .cont01 li.txt01s {
	font-size: 14px;
}

#news .cont01 li.indent01 {
	padding-left: 1em;
	text-indent: -1em;
	/* 2行目以降1字下げ */
}

#news .cont01 li.date {
	color: #BF0122;
	/* mmts-red02 */
	color: #A4966A;
	/* Gold01 */
	background-color: #f5f5f5;
	/* 薄いグレーの背景色 */
	display: block;
	/* ブロックレベル要素として表示 */
	padding: 10px;
	/* 内部のパディング */
	margin-bottom: 10px;
	/* 下部のマージン */
}

#news .cont01 li .detail {
	text-align: right;
	padding-left: 30px;
}

#news .cont01 li .detail a {
	text-align: right;
	font-size: 13px;
	color: #A4966A;
	/* Gold01 */
}

#news .cont01 li .detail a:hover {
	text-align: right;
	font-size: 13px;
	color: #D35400;
	/* LD-red01 */
}

#news .cont01 .viewall {
	display: block;
	margin: 50px auto 0 39%;
	width: 200px;
	height: 45px;
}

#news .cont01 .nlall {
	display: block;
	margin: 30px auto 60px auto;
	position: relative;
}

#news .cont01 .nlall a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 200px;
	font-size: 14px;
	font-family: "NotoSansCJKjp-Medium";
	line-height: 1.5em;
	color: #FFF;
	background: url("../images/icon/btn-sym03.png") no-repeat;
	background-size: 8px 8px;
	background-position: 15px 16px;
}

#news .cont01 .nlall a:hover {
	background: url("../images/icon/btn-sym03.png") no-repeat;
	background-size: 8px 8px;
	background-position: 170px 16px;
}

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

	#news {
		margin: 0 auto 0 auto;
		/* ★FAQ挿入時取る */
		width: 100%;
	}

	#news h2 {
		margin: 20px 0 0 0;
		font-size: 20px;
		padding-top: 10px;
	}

	#news .cont01 {
		margin: 20px auto 0 auto;
		width: 95%;
		padding-top: 20px;
		padding-bottom: 30px;
	}

	#news .cont01 ul {
		margin: 0 auto 0 auto;
		width: 87.5%;
		padding-top: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #BDC3C7;
		/* Siver */
		position: relative;
	}

	#news .cont01 li {
		margin: 0 auto 0 auto;
		width: 100%;
		font-size: 12px;
		font-family: "NotoSansCJKjp-Medium";
		font-display: swap;
		line-height: 20px;
		color: #333;
	}

	#news .cont01 li.newstitle {
		font-size: 12px;
		/* フォントサイズを小さく調整 */
	}

	#news .cont01 li.indent01 {
		padding-left: 1em;
		text-indent: -1em;
		/* 2行目以降1字下げ */
	}

	#news .cont01 li.txt01s {
		font-size: 11px;
	}

	#news .cont01 li.date {
		color: #D35400;
		/* ◆ LD-red01 */

		background-color: #f5f5f5;
		/* 薄いグレーの背景色 */
		display: block;
		/* ブロックレベル要素として表示 */
		padding: 10px;
		/* 内部のパディング */
		margin-bottom: 10px;
		/* 下部のマージン */
	}

	#news .cont01 li .detail {
		text-align: right;
		padding-left: 10px;
	}

	#news .cont01 li .detail a {
		text-align: right;
		font-size: 12px;
		color: #A4966A;
		/* Gold01 */
	}

	#news .cont01 li .detail a:hover {
		text-align: right;
		font-size: 12px;
		color: #D35400;
		/* LD-red01 */
	}

	#news .cont01 .viewall {
		display: block;
		margin: 20px auto 0 22%;
		width: 180px;
		width: 56%;
		height: 30px;
	}

	#news .cont01 .nlall {
		display: block;
		margin: 20px auto 45px auto;
		position: relative;
	}

	#news .cont01 .nlall a {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 160px;
		font-size: 12px;
		line-height: 1.5em;
		color: #FFF;
		background: url("../images/icon/btn-sym03.png") no-repeat;
		background-size: 8px 8px;
		background-position: 10px 12px;
	}
}

/* ■ vision section ----------------------------------------------*/

#vision {
	margin: 0 auto 100px auto;
	width: 85%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

#vision .img {
	width: 40%;
	min-height: 590px;
	background: url("../images/top/pict_01.jpg") no-repeat center;
	background-size: cover;
}

#vision .content {
	margin: 0 auto 0 7%;
	width: 50%;
	text-align: right;
}

#vision h2 {
	width: 90%;
	font-size: 3rem;
	font-family: "NotoSansCJKjp-Bold";
	color: #444;
	margin: 0 0 30px 0;
	text-align: right;
}

#vision p {
	line-height: 2;
	margin: 0 0 30px 0;
	width: 90%;
	color: #333;
	text-align: left;
}

#vision .vision-lead {
	margin: 0 0 70px 0;
	margin: 0 auto 30px auto;
	width: 85%;
	position: relative;
	text-align: right;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	font-family: "NotoSansCJKjp-Medium";
	color: #333;
	padding-bottom: 20px;
	border-bottom: 3px solid #131D3E;
}

/*	#vision .vision-lead::after{
		content:'';
		position: absolute;
		bottom:-30px;
		right:0;
		width:90%;
		background:#131D3E;
		width:12em;
		height: 3px;
	}*/
#vision dl {
	margin: 0 auto 30px auto;
	width: 90%;
	line-height: 1.8em;
	color: #333;
	text-align: left;
}

#vision dt {
	margin: 0 auto 15px auto;
	text-align: center;
	font-family: "NotoSansCJKjp-Medium";
	font-size: 18px;
}

#vision dd {
	margin: 0 auto 0 auto;
	width: 90%;
	font-family: "NotoSansCJKjp-Bold";
	font-size: 18px;
	line-height: 3.0em;
	color: #333;
	border-bottom: 1px solid #D41277;
	/* plumsa-pink01 */
	border-bottom: 1px solid #BF0122;
	/* mmts-red02 */
}

#vision dd .chk {
	padding-right: 10px;
	font-size: 15px;
	color: #BF0122;
	/* mmts-red02 */
}

#vision .vision-txt {
	margin: 0 auto 0 auto;
	width: 80%;
	color: #333;
	font-size: 16px;
	font-family: "NotoSansCJKjp-Medium";
}

#vision #vision-fl {
	margin: 30px auto 30px auto;
	width: 100%;
	height: 80px;
	text-indent: -99999px;
	/* テキスト非表示 */
	background-image: url("../images/top/se0101.png");
	background-size: 788px 102px;
	background-size: 591px 77px;
	/* 75% */
	background-position: center center;
	background-repeat: no-repeat;
}

@media only screen and (min-width: 993px) and (max-width: 1400px) {
	/*◇ PC-S */

	#vision h2 {
		font-size: 2.5rem;
	}

	#vision .vision-lead {
		font-size: 1.1rem;
	}

	#vision .vision-txt {
		font-size: 14px;
	}

	#vision #vision-fl {
		margin: 30px auto 30px auto;
		width: 100%;
		height: 80px;
		text-indent: -99999px;
		/* テキスト非表示 */
		background-image: url("../images/top/se0101.png");
		background-size: 788px 102px;
		background-size: 473px 61px;
		/* 60% */
		background-position: center center;
		background-repeat: no-repeat;
	}
}

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

	#vision {
		margin: 20px 0 20px 0;
		width: 100%;
		text-align: center;
	}

	#vision .img {
		margin: 0 0 30px 0;
		margin: 0 auto 15px auto;
		width: 100%;
		width: 90%;
		min-height: 290px;
		min-height: 200px;
	}

	#vision h2 {
		margin: 0 0 10px 0;
		text-align: right;
		font-weight: bold;
		font-size: 17px;
	}

	#vision .content {
		margin: 0 auto 0 auto;
		width: 90%;
		text-align: left;
	}

	#vision p {
		line-height: 1.8em;
		margin: 0 0 15px 0;
		color: #333;
		text-align: left;
	}

	#vision .vision-lead {
		margin: 0 0 10px 0;
		width: 100%;
		font-size: 12px;
		padding-bottom: 5px;
	}

	/*		#vision .vision-lead::after{
			content:'';
			position: absolute;
			bottom:-15px;
			right:0;
			background:#eb6100;
			background:#131D3E;
			width:12em;
			height: 3px;
		}	*/
	#vision dl {
		margin: 0px auto 10px auto;
		width: 95%;
		line-height: 1.7em;
	}

	#vision dt {
		margin: 0 auto 5px auto;
		width: 90%;
		text-align: left;
		font-size: 13px;
		line-height: 1.7em;
	}

	#vision dd {
		width: 100%;
		font-weight: bold;
		font-size: 13px;
		line-height: 1.7em;
		padding-left: 1.5em;
		text-indent: -1.5em;
		/* 2行目以降1字下げ */
		padding-top: 5px;
		padding-bottom: 5px;
	}

	#vision dd .chk {
		padding-right: 3px;
		color: #BF0122;
		/* mmts-red02 */
	}

	#vision .vision-txt {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size: 12px;
		font-weight: bold;
	}

	#vision #vision-fl {
		margin: 15px auto 0 auto;
		width: 100%;
		height: 350px;
		background-image: url("../images/top/se0101sp.png");
		background-size: 214px 423px;
		background-size: 171px 338px;
		/* 80% */
		background-size: 150px 296px;
		/* 70% */
		background-position: center top 10px;
		background-repeat: no-repeat;
	}

}

/* ■ service section -----------------------------------------------*/

/* ◆system ----- */

#sec0101 {
	margin: 0 auto;
	width: 100%;
	background-image:
		linear-gradient(90deg, #F5F5F5 0%, #F5F5F5 35%, white 37%, white 100%),
		url("../images/bg/brline02.svg"),
		url("../images/bg/brline01.svg");
	background-size:
		auto,
		/* グラデーションにはサイズ指定が不要 */
		contain,
		/* 背景画像1 */
		contain;
	/* 背景画像2 */
	background-position:
		center,
		/* グラデーションには位置指定が不要 */
		center top,
		/* 背景画像1 */
		center top;
	/* 背景画像2 */
	background-repeat:
		no-repeat,
		/* グラデーションには繰り返し指定が不要 */
		no-repeat,
		/* 背景画像1 */
		no-repeat;
	/* 背景画像2 */
	padding-bottom: 20px;
}


#sec0101 #sec-system {
	/* □ 固定ヘッダ アンカー位置差分変更 */
	margin-top: -100px;
	padding-top: 100px;
}

#sec0101 #sec01title01 {
	margin: 0 auto 0 auto;
	width: 80%;
	padding-bottom: 0;
}

#sec0101 #sec01title01 h2 {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
	font-size: 13px;
	line-height: 1.7em;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro", "Kozuka Gothic Pro", "メイリオ",
		Meiryo, Osaka, helvetica, arial,
		"游ゴシック体", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	padding-top: 5px;
	padding-left: 0;
}

#sec0101 #sec01title01 .h2line {
	margin: 10px auto 0 auto;
	width: 100%;
	height: 1px;
	text-indent: -99999px;
	/* テキスト非表示 */
	background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 98%, #cccccc 98%, #cccccc 100%);
	/* mmts-red02 */
}

#sec0101 p.txt01 {
	margin: 15px auto 0 auto;
	width: 80%;
	font-size: 12px;
	line-height: 1.7em;
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro", "Kozuka Gothic Pro", "メイリオ",
		Meiryo, Osaka, helvetica, arial,
		"游ゴシック体", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#sec0101 #compare {
	margin: 15px auto 0 auto;
	width: 100%;
}

#sec0101 #compare>dl {
	display: block;
	margin: 15px auto 0 auto;
	width: 90%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro", "Kozuka Gothic Pro", "メイリオ",
		Meiryo, Osaka, helvetica, arial,
		"游ゴシック体", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #fff;
	border: 2px solid #BF0122;
	/* mmts-red02 */
}

#sec0101 #compare>dl dt {
	margin: 10px auto 10px auto;
	width: 85%;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	color: #BF0122;
	/* mmts-red02 */
	padding-top: 5px;
	padding-bottom: 10px;
	border-bottom: 1px solid #BDC3C7;
	/* Siver */
}

#sec0101 #compare>dl dd {
	margin: 15px auto 0 auto;
	width: 85%;
	font-size: 12px;
	line-height: 1.7em;
	color: #333;
	padding-bottom: 10px;
}

@media only screen and (min-width:992px) {
	/*■ PC Layout  ■ */

	#sec0101 {
		margin: 0 auto;
		width: 100%;
		background-image:
			linear-gradient(90deg, white 0%, white 5%, #E5E5E5 5%, #F5F5F5 38%, white 38%, white 100%),
			url("../images/bg/brline02.svg"),
			url("../images/bg/brline01.svg");
		background-size:
			auto,
			/* グラデーションはサイズ指定不要 */
			cover,
			/* 1つ目の背景画像 */
			cover;
		/* 2つ目の背景画像 */
		background-position:
			center,
			/* グラデーションは位置指定不要 */
			center top,
			/* 1つ目の背景画像 */
			center top 3%;
		/* 2つ目の背景画像の位置を微調整 */
		background-repeat:
			no-repeat,
			/* グラデーションの繰り返し不要 */
			no-repeat,
			/* 1つ目の背景画像 */
			no-repeat;
		/* 2つ目の背景画像 */
		padding-bottom: 30px;
	}

	#sec0101 #sec-system {
		/* □ 固定ヘッダ アンカー位置差分変更 */
		margin-top: -130px;
		padding-top: 130px;
	}

	#sec0101 #sec01title01 {
		margin: -50px auto 0 auto;
		width: 80%;
		padding-bottom: 0;
	}

	#sec0101 #sec01title01 h2 {
		display: block;
		margin: 0 auto 0 auto;
		width: 90%;
		text-align: center;
		font-size: 30px;
		font-family: "NotoSansCJKjp-Bold";
		padding-top: 0px;
		padding-bottom: 0;
	}

	#sec0101 #sec01title01 .h2line {
		margin: 20px auto 0 auto;
		width: 85%;
		height: 1px;
		text-indent: -99999px;
		/* テキスト非表示 */
		background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 98%, #cccccc 98%, #cccccc 100%);
		/* mmts-red02 */
	}

	#sec0101 p.txt01 {
		margin: 30px auto 0 auto;
		width: 60%;
		font-size: 15px;
		line-height: 1.8em;
		color: #333;
		font-family: "NotoSansCJKjp-Regular";
	}

	#sec0101 #compare {
		margin: 0 auto 0 auto;
		width: 65%;
		display: flex;
		justify-content: space-between;
		/*			align-items: center;	*/
		flex-wrap: wrap;
	}

	#sec0101 #compare>dl {
		margin: 30px auto 0 auto;
		width: 45%;
		border: 3px solid #BF0122;
		/* mmts-red02 */
	}

	#sec0101 #compare>dl dt {
		margin: 0 auto 20px auto;
		width: 90%;
		font-size: 17px;
		font-family: "NotoSansCJKjp-Bold";
		padding-top: 15px;
		padding-bottom: 15px;
		border-bottom: 1px solid #BDC3C7;
		/* Siver */
	}

	#sec0101 #compare>dl dd {
		margin: 0 auto 0 auto;
		width: 85%;
		font-size: 14px;
		line-height: 1.8em;
		font-family: "NotoSansCJKjp-Regular";
		padding-bottom: 20px;
	}

}

@media only screen and (min-width: 993px) and (max-width: 1400px) {
	/*◇ PC-S */

}

/* Tablet Layout ◇ */
@media only screen and (min-width: 768px) and (max-width: 992px) {}


/* ◆テックサービスとは ----- */

#section01 {
	margin: 120px auto 0 auto;
	width: 100%;
	background-image:
		url("../images/bg/brline02.svg"),
		url("../images/bg/brline01.svg");
	background-size:
		contain,
		/* 1つ目の背景画像 */
		contain;
	/* 2つ目の背景画像 */
	background-position:
		center top 14%,
		/* 1つ目の背景画像の位置 */
		center top 12%;
	/* 2つ目の背景画像の位置 */
	background-repeat:
		no-repeat,
		/* 1つ目の背景画像の繰り返し無し */
		no-repeat;
	/* 2つ目の背景画像の繰り返し無し */
	padding-bottom: 0px;
}

#section01 #sec01title {
	margin: 0 auto 70px auto;
	width: 80%;
	padding-bottom: 0;
}

#section01 #sec01title h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#section01 #sec01title h2 img {
    margin: 0; /* 余計な間隔を削除 */
    width: 400px; /* 画像の幅を400pxに設定 */
    height: auto; /* 高さは自動調整 */
}


#section01 #sec01title .h2line {
	margin: 30px auto 0 auto;
	width: 85%;
	height: 1px;
	text-indent: -99999px;
	/* テキスト非表示 */
	background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 98%, #cccccc 98%, #cccccc 100%);
	/* mmts-red02 */
}

@media screen and (max-width:550px) {
	#section01 h2 {
		margin: 0 0 50px 0;
	}
}

#section01 h2 span.bgLRextend::before {
	background: #333;
}

#section01 .service-area {
	margin: 0 auto 220px 5%;
	width: 95%;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

@media screen and (max-width:590px) {
	#section01 .service-area {
		margin: 0 0 50px 0;
		margin: 0 auto 20px auto;
	}
}

#section01 .service-area::after {
	content: '';
	position: absolute;
	width: 70%;
	height: 23em;
	background: #f3f3f3;
	right: 10%;
	top: 20%;
	z-index: -1;
}

#section01 .service-area:nth-of-type(2n+1) {
	flex-direction: row-reverse;
}

#section01 .service-area .img {
	width: 50%;
}

#section01 .service-area .content {
	margin: 0 auto 0 auto;
	width: 46%;
	background: #fff;
	box-shadow: 0 0 20px #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	top: 150px;
}

#section01 .service-area:nth-of-type(2n) .img {
	text-align: center;
}

#section01 .service-area:nth-of-type(2n) .content {
	margin-left: -2%;
}

#section01 .service-area .content-area {
	padding: 40px;
}

#section01 .service-area .content-area h3 {
	margin: 0 0 20px 0;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.5em;
	font-family: "NotoSansCJKjp-Bold";
	font-weight: bold;
	/* mmts-red02 */
	color: #005816;
	/* Gold01 */
}

#section01 .service-area .content-area h3 span {
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	color: #555;
	font-size: 1.6rem;
}

#section01 .service-area .content-area p {
	margin: 0 0 30px 0;
	width: 100%;
	line-height: 1.8em;
	font-family: "NotoSansCJKjp-Regular";
	color: #333;
}

#section01 .btn {
	text-align: right;
}


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

	#section01 {
		margin: 0 auto;
		width: 100%;
		background-image:
			url("../images/bg/brline02.svg"),
			url("../images/bg/brline01.svg");
		background-size:
			cover,
			/* 1つ目の背景画像 */
			cover;
		/* 2つ目の背景画像 */
		background-position:
			center top 1%,
			/* 1つ目の背景画像の位置を微調整 */
			center top 0%;
		/* 2つ目の背景画像の位置 */
		background-repeat:
			no-repeat,
			/* 1つ目の背景画像の繰り返し無し */
			no-repeat;
		/* 2つ目の背景画像の繰り返し無し */
		padding-bottom: 30px;
	}

	#section01 #sec01title {
		margin: 0 auto 0 auto;
		width: 80%;
		padding-top: 50px;
		padding-bottom: 0;
	}

	#section01 #sec01title h2 {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-bottom: 5px;
	}
	
	#section01 #sec01title h2 img {
		margin: 0; /* 余計な間隔を削除 */
		width: 300px; /* 画像の幅を400pxに設定 */
		height: auto; /* 高さは自動調整 */
	}

	#section01 #sec01title .h2line {
		margin: 10px auto 0 auto;
		width: 100%;
		height: 1px;
		text-indent: -99999px;
		/* テキスト非表示 */
		background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 98%, #cccccc 98%, #cccccc 100%);
		/* mmts-red02 */
	}

	#section01 .service-area {
		margin: 20px 0 10px 0;
	}

	#section01 .service-area::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 23em;
		height: 20em;
		background: #F5F5F5;
		right: 10%;
		top: 20%;
		z-index: -1;
	}

	#section01 .service-area .img {
		margin: 0 auto 30px auto;
		width: 100%;
		z-index: 2;
		text-align: center;
	}

	#section01 .service-area .content {
		margin: 0 auto 0 5%;
		width: 90%;
		top: 220px;
		box-shadow: 0 0 5px #ccc;
	}

	#section01 .service-area .content-area {
		padding: 0px;
		padding-bottom: 20px;
		/* ★btn 追加時除く */
	}

	#section01 .service-area .content-area h3 {
		margin: 10px 0 10px 0;
		text-align: center;
		font-size: 14px;
		line-height: 1.7em;
	}

	#section01 .service-area .content-area h3 span {
		font-weight: bold;
		text-transform: uppercase;
		display: block;
		font-size: 16px;
	}

	#section01 .service-area .content-area p {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size: 12px;
		line-height: 1.7em;
	}

}

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

	#section01 .service-area .img {
		margin: 0 auto 30px auto;
		width: 100%;
		z-index: 2;
		text-align: center;
	}

	#section01 .service-area .img img {
		width: 85%;
		padding-left: 5%;
	}

	#section01 .service-area .content {
		width: 100%;
		top: -10px;
		top: -10px;
		animation: none;
		opacity: 1;
		z-index: 1;
	}

	#section01 .service-area:nth-of-type(2n) .content {
		margin-left: 5%;
	}
}

/* ◆ 事業内容について -----*/

#section02 {
	margin: 0 auto 0 auto;
	width: 100%;
	padding-bottom: 20px;
	background: linear-gradient(90deg, #F5F5F5 0%, #F5F5F5 35%, white 37%, white 100%);
}

#section02 #sec-scratch {
	/* □ 固定ヘッダ アンカー位置差分変更 */
	margin-top: -100px;
	padding-top: 100px;
}

#section02 #sec02title {
	margin: -30px auto 0 auto;
	width: 80%;
	padding-bottom: 0;
}

#section02 #sec02title h2 {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
	font-size: 17px;
	line-height: 1.5em;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro", "Kozuka Gothic Pro", "メイリオ",
		Meiryo, Osaka, helvetica, arial,
		"游ゴシック体", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	padding-top: 5px;
	padding-left: 0;
}

#section02 #sec02title .h2line {
	margin: 10px auto 0 auto;
	width: 100%;
	height: 1px;
	text-indent: -99999px;
	/* テキスト非表示 */
	background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 98%, #cccccc 98%, #cccccc 100%);
	/* mmts-red02 */
}

#section02 p.txt01 {
	margin: 15px auto 0 auto;
	width: 80%;
	font-size: 12px;
	line-height: 1.7em;
	color: #333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro", "Kozuka Gothic Pro", "メイリオ",
		Meiryo, Osaka, helvetica, arial,
		"游ゴシック体", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#section02>ul {
	margin: 0 auto 0 auto;
	width: 90%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#section02>ul>li {
	margin: 15px auto 0 auto;
	width: 48%;
	text-align: center;
	font-size: 12px;
	line-height: 1.7em;
	font-weight: bold;
	padding: 10px;
	background-color: #fff;
	border: 2px solid #444;
}

#section02>ul>li img {
	height: 60px;
	padding-bottom: 5px;
}

#section02 p.txt02 {
	margin: 20px auto 0 auto;
	width: 60%;
	font-size: 13px;
	line-height: 1.7em;
	font-weight: bold;
	color: #333;
}

@media only screen and (min-width:992px) {
	/*■ PC Layout  ■ */

	#section02 {
		margin: 330px auto 80px auto;
		width: 100%;
		padding-bottom: 50px;
		background-image:
			linear-gradient(90deg, white 0%, white 5%, #E5E5E5 5%, #F5F5F5 38%, white 38%, white 100%),
			url("../images/bg/brline02.svg"),
			url("../images/bg/brline01.svg");
		background-size:
			auto,
			/* 線形グラデーションのサイズはauto（実際にはサイズ指定不要） */
			cover,
			/* 1つ目の背景画像 */
			cover;
		/* 2つ目の背景画像 */
		background-position:
			center,
			/* 線形グラデーションの位置（この場合は指定不要） */
			center top 10%,
			/* 1つ目の背景画像 */
			center top 30%;
		/* 2つ目の背景画像 */
		background-repeat:
			no-repeat,
			/* 線形グラデーションの繰り返し（この場合は指定不要） */
			no-repeat,
			/* 1つ目の背景画像 */
			no-repeat;
		/* 2つ目の背景画像 */
	}

	#section02 #sec02title {
		margin: -50px auto 0 auto;
		width: 80%;
		padding-bottom: 0;
	}

	#section02 #sec02title h2 {
		display: block;
		margin: 0 auto 0 auto;
		width: 90%;
		text-align: center;
		font-size: 36px;
		font-family: "NotoSansCJKjp-Bold";
		padding-top: 0px;
		padding-bottom: 0;
	}

	#section02 #sec02title .h2line {
		margin: 20px auto 0 auto;
		width: 85%;
		height: 1px;
		text-indent: -99999px;
		/* テキスト非表示 */
		background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 98%, #cccccc 98%, #cccccc 100%);
		/* mmts-red02 */
	}

	#section02 p.txt01 {
		margin: 30px auto 0 auto;
		width: 60%;
		font-size: 16px;
		line-height: 1.8em;
		color: #333;
		font-family: "NotoSansCJKjp-Regular";
	}

	#section02>ul {
		margin: 0 auto 0 auto;
		width: 75%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	#section02>ul>li {
		margin: 30px auto 0 auto;
		width: 18%;
		text-align: center;
		font-size: 14px;
		line-height: 1.8em;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Bold";
		color: #444;
		padding: 20px;
		border: 2px solid #BF0122;
		/* mmts-red02 */
		border: 2px solid #444;
	}

	#section02>ul>li img {
		height: 65px;
		padding-bottom: 10px;
	}

	#section02 p.txt02 {
		margin: 30px auto 0 auto;
		width: 75%;
		text-align: center;
		font-size: 16px;
		line-height: 1.8em;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
	}

}

.detail-buttons {
    display: flex;
    justify-content: space-around;
    margin: 20px 50px;
    flex-wrap: wrap;
}

.button-link {
    display: inline-block;
    background-color: #555;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-bottom: 10px; /* SPでのマージン */
}
.button-link:hover {
    background-color: #6b6c6d;
}

@media (max-width: 768px) {
    .detail-buttons {
        flex-direction: column;
        align-items: center;
    }

    .button-link {
        width: 80%; /* SPでのボタンの幅 */
    }
}

@media only screen and (min-width: 993px) and (max-width: 1400px) {
	/*◇ PC-S */

}

/* Tablet Layout ◇ */
@media only screen and (min-width: 768px) and (max-width: 992px) {}

/* ■handling manufacture banner  */

#hdlmanufacture {
	margin: 0px auto 0 auto;
	width: 100%;
	padding-bottom: 20px;
	background-color: #FFF;
	background: linear-gradient(180deg, white 0%, white 15%, #F5F5F5 15%, #F5F5F5 30%, white 30%, white 100%);
	/* ★ */
}

#hdlmanufacture h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

#sec01 {
	margin: 0 auto 0 auto;
	width: 100%;
	position: relative;
}

#sec01 #sec01sym01 {
	display: none;
}

#hdlmanufacture #sec01title01 {
	margin: 20px auto 0 auto;
	width: 90%;
	height: 30px;
	border-left: 5px solid #262626;
	/* plumsa-blue01 */
}

#hdlmanufacture #sec01title01 h2 {
	font-size: 15px;
	font-weight: bold;
	color: #444;
	padding-top: 5px;
	padding-left: 15px;
}

#hdlmanufacture #sec01title01 h2 .h2ex {
	font-size: 11px;
	font-weight: normal;
	color: #BDC3C7;
	/* Siver */
	padding-left: 15px;
}

#hdlmanufacture .items {
	margin: 0 auto -60px auto;
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

#hdlmanufacture .items ul.slider li {
	margin: 0 5px 0 auto;
	width: 80px;
	height: 35px;
	text-align: center;
	font-size: 13px;
	line-height: 1.0em;
	font-weight: bold;
	color: #333;
	padding: 10px;
	padding-bottom: 0;
	list-style-type: none;
	background-color: #FFF;
	border: 1px solid #BDC3C7;
	/* Siver */
}

#hdlmanufacture .items ul.slider li.small {
	font-size: 10px;
}

@media only screen and (max-width: 360px) {}

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

	#hdlmanufacture {
		margin: 0 auto 0 auto;
		width: 90%;
		padding-bottom: 20px;
		background-color: #FFF;
		background: linear-gradient(180deg, white 0%, white 10%, #F5F5F5 10%, #F5F5F5 20%, white 20%, white 85%, #F5F5F5 85%, #F5F5F5 92%, white 92%, white 100%);
		/* ★ */
		background: linear-gradient(180deg, white 0%, white 10%, #F5F5F5 10%, #F5F5F5 20%, white 20%, white 45%, #F5F5F5 45%, #F5F5F5 60%, white 60%, white 85%, #F5F5F5 85%, #F5F5F5 92%, white 92%, white 100%);
		/* ★ */
		background: linear-gradient(180deg, white 0%, white 10%, #F5F5F5 10%, #F5F5F5 20%, white 20%, white 55%, #E7DDD2 55%, #E7DDD2 92%, white 92%, white 100%);
		/* ★ */
	}

	#sec01 {
		margin: 0 auto 0 auto;
		width: 90%;
		padding-bottom: 30px;
		position: relative;
	}

	#hdlmanufacture #sec01title01 {
		margin: 0 auto 50px auto;
		width: 85%;
		height: 40px;
		border-left: 7px solid #262626;
		/* plumsa-blue01 */
	}

	#hdlmanufacture #sec01title01 h2 {
		font-size: 30px;
		font-family: "NotoSansCJKjp-Bold";
		line-height: 1.5em;
		color: #444;
		padding-top: 0px;
	}

	#hdlmanufacture #sec01title01 h2 .h2ex {
		font-size: 15px;
		font-family: "NotoSansCJKjp-Regular";
		padding-left: 30px;
	}

	#hdlmanufacture .items {
		margin: 0 auto -20px auto;
		width: 85%;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	#hdlmanufacture .items ul.slider li {
		margin: 0 10px 0 auto;
		width: 120px;
		height: 50px;
		font-size: 15px;
		line-height: 1.0em;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		padding: 15px;
		padding-bottom: 0;
		background: url("../images/icon/arrow01.png") no-repeat;
		background-size: 11px 15px;
		background-position: left 5px center;
		background-color: #FFF;
		border: 1px solid #BDC3C7;
		/* Siver */
	}

	#hdlmanufacture .items ul.slider li.small {
		font-size: 14px;
	}
}

/* Tablet Layout ◇ */
@media only screen and (min-width: 768px) and (max-width: 992px) {

	#hdlmanufacture {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-bottom: 0px;
		background-color: #FFF;
		background: linear-gradient(90deg, white 0%, white 10%, #F5F5F5 10%, #F5F5F5 40%, white 40%, white 100%);
		/* ★ */
	}

	#sec01 {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-bottom: 30px;
		position: relative;
	}

	#sec01 #sec01sym01 {
		display: block;
		position: absolute;
		top: -30px;
		right: 5px;
		z-index: 9;
	}

	#sec01 #sec01sym01 img {
		zoom: 0.6;
	}

	#hdlmanufacture #sec01title01 {
		margin: 150px auto 0 auto;
		width: 90%;
		height: 35px;
		border-left: 5px solid #262626;
		/* plumsa-blue01 */
	}

	#hdlmanufacture #sec01title01 h2 {
		font-size: 20px;
		padding-top: 5px;
		padding-left: 30px;
	}

	#hdlmanufacture .items {
		margin: 70px auto 0 auto;
		width: 90%;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
	}
}

/* ◆整備・検査事例 -----*/

#case {
	margin: 50px auto 0 auto;
	width: 100%;
	padding-bottom: 20px;
	background: linear-gradient(90deg, #F5F5F5 0%, #F5F5F5 35%, white 37%, white 100%);
}

#case #sec01title05 {
	margin: -30px auto 0 auto;
	width: 80%;
	padding-bottom: 0;
}

#case #sec01title05 h2 {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
	font-size: 17px;
	line-height: 1.7em;
	font-weight: bold;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "小塚ゴシック Pro", "Kozuka Gothic Pro", "メイリオ",
		Meiryo, Osaka, helvetica, arial,
		"游ゴシック体", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	padding-top: 20px;
	padding-left: 0;
}

#case #sec01title05 .h2line {
	margin: 5px auto 0 auto;
	width: 100%;
	height: 1px;
	text-indent: -99999px;
	/* テキスト非表示 */
	background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 98%, #cccccc 98%, #cccccc 100%);
	/* mmts-red02 */
}

#case #casestudy {
	margin: 0 auto 0 auto;
	width: 100%;
}

#case #casestudy>dl {
	display: block;
	margin: 30px auto 0 auto;
	width: 80%;
	padding-bottom: 20px;
	background-color: #fff;
	border: 2px solid #444;
}

#case #casestudy>dl dt {
	margin: 0 auto 0 auto;
	width: 90%;
	text-align: center;
	font-size: 14px;
	line-height: 1.7em;
	font-weight: bold;
	color: #333;
	padding: 10px;
	padding-bottom: 5px;
}

#case #casestudy>dl dd {
	margin: 0 auto 0 auto;
	width: 90%;
	font-size: 12px;
	line-height: 1.7em;
	font-weight: normal;
	color: #333;
	padding-top: 10px;
}

#case #casestudy>dl dd img {
	padding-top: 0px;
	padding-bottom: 10px;
}

@media only screen and (min-width:992px) {
	/*■ PC Layout  ■ */

	#case {
		margin: 50px auto auto;
		width: 100%;
		padding-top: 30px;
		padding-bottom: 80px;
		background-image: linear-gradient(90deg, white 0%, white 5%, #E5E5E5 5%, #F5F5F5 38%, white 38%, white 100%),
			url("../images/bg/brline02.svg"),
			url("../images/bg/brline01.svg");
		background-size: auto,
			/* 線形グラデーションにはサイズ指定が不要 */
			cover,
			/* 1つ目の背景画像 */
			cover;
		/* 2つ目の背景画像 */
		background-position: center,
			/* 線形グラデーションの位置指定はここで十分 */
			center top 10%,
			/* 1つ目の背景画像 */
			center top 30%;
		/* 2つ目の背景画像 */
		background-repeat: no-repeat,
			/* 線形グラデーションの繰り返しは不要 */
			no-repeat,
			/* 1つ目の背景画像 */
			no-repeat;
		/* 2つ目の背景画像 */
	}

	#case #sec01title05 {
		margin: 0 auto 0 auto;
		width: 80%;
		padding-bottom: 0;
	}

	#case #sec01title05 h2 {
		display: block;
		margin: 0 auto 0 auto;
		width: 90%;
		text-align: center;
		font-size: 38px;
		font-family: "NotoSansCJKjp-Bold";
		padding-top: 0px;
		padding-bottom: 0;
	}

	#case #sec01title05 .h2line {
		margin: 20px auto 30px auto;
		width: 85%;
		height: 1px;
		text-indent: -99999px;
		/* テキスト非表示 */
		background: linear-gradient(90deg, #CCCCCC 0%, #CCCCCC 98%, #cccccc 98%, #cccccc 100%);
		/* mmts-red02 */
	}

	#case #casestudy {
		margin: 0 auto 0 auto;
		width: 65%;
		padding-bottom: 100px;
		padding-bottom: 30px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	#case #casestudy>dl {
		margin: 30px auto 0 auto;
		width: 45%;
		padding-bottom: 30px;
		border: 2px solid #444;
	}

	#case #casestudy>dl dt {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size: 16px;
		line-height: 1.8em;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Bold";
		padding: 20px;
		padding-bottom: 10px;
	}

	#case #casestudy>dl dd {
		margin: 0 auto 0 auto;
		width: 85%;
		font-size: 14px;
		line-height: 1.8em;
		font-weight: normal;
		font-family: "NotoSansCJKjp-Medium";
		padding-top: 10px;
	}

	#case #casestudy>dl dd img {
		padding-top: 0px;
		padding-bottom: 10px;
	}
}

@media only screen and (min-width: 993px) and (max-width: 1400px) {
	/*◇ PC-S */

}

/* Tablet Layout ◇ */
@media only screen and (min-width: 768px) and (max-width: 992px) {}

/* ■ faq section ------------------------------------------------*/

#faq {
	margin: 50px 0 80px 0;
	padding-bottom: 200px;
	background-image: url("../images/bg/info_back01.jpg");
	background-size: 1600px 1068px;
	background-size: cover;
	background-position: left 0 bottom 0;
	background-attachment: fixed;
	background-repeat: no-repeat;


	/*		background-image:
			url("../images/bg/brline01.svg"),
			url("../images/bg/brline02.svg");
		background-size:
			:contain,
			:contain;
		background-position:
			center top 0%,
			center top 17%;
		background-repeat:
			no-repeat,
			no-repeat;
		padding-bottom:50px;	*/
}

#faq h2 {
	font-size: 3rem;
	text-align: center;
	margin: 0 0 50px 0;
	font-size: 50px;
	font-weight: bold;
	font-family: "NotoSansCJKjp-Bold";
	color: #FFF;
	padding-top: 50px
}

#faq h2 span.bgLRextend::before {
	background: #FFF;
}

#faq .cont01 {
	margin: 50px auto 0 auto;
	width: 80%;
	padding-top: 50px;
	padding-bottom: 60px;
	background-color: rgba(255, 255, 255, 0.95);
	/*  White  透過95% */
	box-shadow: 1px 1px 10px 1px #aaa;
	-webkit-box-shadow: 1px 1px 10px 1px #aaa;
	-moz-box-shadow: 1px 1px 10px 1px #aaa;
}

#faq ul {
	color: #222;
}

#faq ul li .box {
	background: #E7DDD2;
	/* beige */
	background: #EEE;
}

.faq-bg {
	.faq-bg {
		margin: 0 0 200px 25%;
		width: 90%;
		/* 修正: widthプロパティを正しく追加 */
		position: relative;
		height: 50vh;
		/* 修正: heightプロパティの重複を解消、最終値を使用 */
		background: url("../images/top/pict_06.jpg") no-repeat right 25% center;
		/* 統合: backgroundプロパティを一つに */
		background-size: contain;
	}

	.faq-bg::after {
		content: '';
		position: absolute;
		top: 15%;
		left: 8%;
		width: 80%;
		height: 55vh;
		height: 50vh;
		background: #EEE;
		z-index: -1;
	}

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

		.faq-bg,
		.faq-bg::after {
			height: 35vh;
		}

		.faq-bg::after {
			content: '';
			position: absolute;
			top: 15%;
			left: 0%;
			width: 100%;
			height: 40vh;
			background: #EEE;
			z-index: -1;
		}

		#faq h2 {
			margin: 0 0 20px 0;
			font-size: 20px;
		}
	}

	@media screen and (max-width:550px) {
		#faq {
			margin: 0 0 0 0;
			padding-bottom: 80px;
		}

		#faq h2 {
			margin: 0 0 20px 0;
			font-size: 18px;
			padding-top: 30px
		}

		.faq-bg {
			margin: 0 0 50px auto;
		}

		.faq-bg,
		.faq-bg::after {
			height: 20vh;
		}

		#faq .cont01 {
			margin: 20px auto 0 auto;
			width: 95%;
			padding-top: 10px;
			padding-bottom: 15px;
			background-color: rgba(255, 255, 255, 0.95);
			/*  White  透過95% */
			box-shadow: 1px 1px 10px 1px #aaa;
			-webkit-box-shadow: 1px 1px 10px 1px #aaa;
			-moz-box-shadow: 1px 1px 10px 1px #aaa;
		}

		#faq ul {
			margin: 0 auto 0 auto;
			width: 95%;
		}

		#faq ul li h3 {
			font-size: 13px;
			line-height: 1.5em;
		}

		#faq ul li .box {
			font-size: 12px;
			line-height: 1.5em;
		}
	}