@charset "UTF-8";


/* ======================= */
/*   調整用(default) css   */
/* ======================= */

html {
	font-size: 62.5%;
}
body {
	margin: 0;
	padding: 0;
	font-size: 1.6rem;
	font-family: "Meiryo", "Arial", "times new roman", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	background-color: #ffffff;
}


img {
	max-width: 100%;
}


a {
	text-decoration: none;
	color: #4b5564;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}


a:hover {
	color: #000;
}


p {
	font-size: 2.4rem;
	line-height: 1.6;
}





/* table 罫線なし */
table{				
	margin:auto;
}
.b_less{
	border:none;
}
.b_less td{
	border:none;
}





/* ================ */
/*    index.html    */
/* ================ */

/* ------------------------ */
/* 　メインビジュアル　 */
/* ------------------------ */
/* 背景 */

.splash {
  width: 100%;
  min-height: 500px; /* 高さをコンパクトに */
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0;
  background: url("../images/metal_bg.jpg") no-repeat center top;
  background-size: cover;
  transition: height 1s;
  z-index: 0;
}

.splash .center {
  width: 100%;
  max-width: 1000px;  /* 横幅も少し絞る */
  margin: 0 auto;
  position: relative;
  z-index: 1;

  display: flex;       /* 横並び */
  justify-content: center;
  align-items: center; /* ★ 縦中央に揃える */
  gap: 30px;           /* コンパクトに */
}


/* 会社ロゴとメッセージ */
.splash .messa {
    padding-left: 0px; /* move left away from bookshelf */
  flex: 1;
  text-align: center;
  margin: 0; /* 余白をなくす */
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.splash .messa.top {
  margin-top: 20px;
}

.splash .messa.bottom {
  margin-top: 30px;
  font-size: 0.1rem;
  font-weight: bold;
  color: #444;
}

.messa h1{
	margin-top: 50px;
	margin-bottom: 30px; /* add space below h1 */
	font-weight: bold; /* emphasize h1 */
	font: 48px 'District Thin', helvetica, arial;
	font-weight: lighter;
	color: #333;
	-webkit-text-fill-color: #333;
	-webkit-text-stroke-color: white;
	-webkit-text-stroke-width: 0.005em;
}

.messa li{
	margin-top: 10px; /* space above li */
	font: 23px 'District Thin', helvetica, arial;
	list-style: none;
	font-weight: lighter;
	line-height: 30px;
	color :#333;
	-webkit-text-fill-color: #333;
	-webkit-text-stroke-color: white;
	-webkit-text-stroke-width: 0.0005em;
}



/* 右側の動画とカタログ棚 */

.bookshelf-3tier {
  flex: 0 0 440px; /* 少し縮める */
  margin-top: 140px;
}

/* 各棚段 */

.shelf-row {
  height: 150px;
  margin-bottom: 20px;
  background: url("../images/metal_board.png") no-repeat center bottom;
  background-size: contain;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  position: relative; /* 背景表示のために追加 */
  z-index: 0;
}


/* 1段目と2段目の間隔を広げる */
.bookshelf-3tier .shelf-row:first-of-type {
  margin-bottom: 100px;
}


/* 動画ブース */
.video-shelf {
  justify-content: center;
}

.video-container {
  width: 75%;
/*  aspect-ratio: 16 / 9;*/   /* 16:9固定フレーム */
  height: 400px;
  background-image: url('../images/monitor-frame.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px;
 /* border-radius: 8px; */
  margin-bottom: 70px;
  top: 100px;
  overflow: hidden;
  position: relative; /* ボタンを重ねるため */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.video-container video {
  width: 95%;
  height: 95%;
  object-fit: contain;
  display: block;
/* border-radius: 10px; */
  transition: opacity 0.8s ease; /* フェード速度 */
  opacity: 1;
  flex-shrink: 0;
}

.video-container video.fade-out {
  opacity: 0;
}

/* ナビゲーションボタン */
.video-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0);
  color: #e6e6fa;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 50%;
  z-index: 2;
}

.video-nav.prev { left: 10px; }
.video-nav.next { right: 10px; }

.video-nav:hover {
  background: rgba(0,0,0,0.2);
}


/* 本アイコン */
.book-icon {
  display: block;
  width: 100px;
  margin: 0 8px;
  margin-bottom: 70px;
  position: relative;
  z-index: 1;
  display: inline-block;
  transform: perspective(400px) rotateY(-5deg); /* 立体風 */
  transition: transform 200ms ease;
}

.book-icon img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.5);
}

.book-icon:hover {
  transform: perspective(400px) rotateY(0deg) scale(1.1); /* ホバーで正面＆拡大 */
}

.loader-overlay {
  position: absolute;
  top: 50px;
  left: 35px;
  width: 30%;
  height: 30%;
  background-color: rgba(255,255,255,0.9);
  display: none; /* 初期状態では非表示 */
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.loader {
  width: 40px;
  height: 40px;
}


.click-message p{
  text-align: center;
  font-size: 1.4rem !important;;
  color: #333;
  margin-top: -60px;
}


.wrapper {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
}


/*sectionタグと、詳細ページの共通設定
---------------------------------------------------------------------------*/
section,
main > article {
	padding: 3% 10%;		/*上下、左右へのボックス内の余白*/
}

/*mainブロックの設定*/
main {
	flex: 1;
}

/*mainブロックのpタグ*/
main p {
	margin-bottom: 2em;					/*下に空けるスペース*/
	font-size: 1.8rem;
}

main p + p {
	margin-top: -0.2em;
}



/* ------------------------ */
/* 　メインコンテンツ部分　 */
/* ------------------------ */
.main-contents {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
}

.main-contents .column-box {
	margin-top: 80px;
}

.main-contents .column-box04 {
	width: 90%;
	margin:0 auto;
	margin-top: 40px;
}

.main-contents .column-box05 {
	width: 100%;
	margin:0 auto;
	margin-top: 10px;
}

.main-contents .column-box06 {
	width: 100%;
	margin:0 auto;
	margin-top: 40px;
}



/* group01 -Newsの所↓に移動- */

/* group02 -Products/doing/Supports-*/

.main-contents .group02 h1 {
	font-size: 4.0rem;
	margin-bottom: 60px;
}

.main-contents .group02 p {
	font-size: 2rem;
}

.main-contents .group02 article {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;xxx
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.main-contents .group02 article figure {
	width: 160px;
}

.main-contents .group02 article figure img {
	border-radius: 10px;
	margin-bottom: 80px;
}

.main-contents .group02 article div {
	width: 640px;
}

.main-contents .group02 article div h4 {
	font-size: 1.6rem;
	margin-bottom: 10px;
}


/* group03 */
/* 20251001の時点では未使用。使えるときが有ったら解放
.group03 {
	width: 320px;
}

.group03 .aside-contents {
	margin-bottom: 50px;
}

.group03 .aside-contents figure {
	margin-bottom: 20px;
}

.group03 .aside-contents figure img {
	border-radius: 15px;
} */


/* group04 -Topics-*/

.main-contents .group04 h1 {
	font-size: 4.0rem;
	margin-bottom: 60px;
}

.main-contents .group04 img {
	width: 240px;
	}


/* group05 -Contact- */

.main-contents .group05 hr {
	height: 1px;
	border: 0;
	border-top: 1px solid #e5e7eb;
	margin-top: 40px;
	margin-bottom: 5px;
}


.main-contents .group05 h1 {
	color: #db1a1a;
	font-family: Work Sans,sans-serif;
	font-size: 2rem;
	font-weight: 500;
	margin-top: 10px;
	margin-left: 40px;
	margin-bottom: 60px;
	position: absolute;
	text-orientation: sideways;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl
}

.main-contents .group05 h4 {
	font-size: 1.8rem;
	margin-top: 70px;
	margin-left: 140px;
}



/* group06 -Company-*/

.main-contents .group06 .contents06 {
 display: flex;
  justify-content: center;
  align-items: center; /* 上下中央揃え */
  flex-wrap: nowrap; /* 改行防止 */
  width: 90%;
  margin: 0 auto;
}

.main-contents .group06 .contents06 figure {
  height: auto;
  width: auto;
  margin-top: 0; /* 余計な余白を削除 */
  object-fit: contain; /* はみ出し防止 */
}

.main-contents .group06 .contents06 figure img {
	width: 300px; 
	max-width: 480px; 
	height: auto;
	border-radius: 15px;
	object-fit: contain;
	margin-top: 0;
}

.main-contents .group06 .contents06 .detail {
	width: 700px;
	white-space: nowrap; /* 指定の改行以外では改行しない */
	overflow: hidden;
	text-overflow: ellipsis; /* 必要なら省略記号で表示 */
}

.main-contents .group06 .contents06 .detail h1 {
	font-size: 4rem;
	margin-bottom: 60px;
}

.main-contents .group06 p {
	font-size: 2rem;
	margin-bottom: 20px;
}






/* ===== 以下は、各コンテンツの装飾、ギミック用 css ===== */
/* ========================================= */
/* 　Products リンク画像 css ※hoverで拡大   */
/* ========================================= */

/* Products用画像ボタン */
.p-button{
	display: inline-block;
	padding: 10px 30px;
	text-align: center;
	color: #888888;
	margin: 5px;
	border: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	letter-spacing: .1rem;
	transition: .5s;
}

.p-button:hover {						/* ボタンにカーソルすると */
	transform: scale(2.2,2.2);			/* 2倍サイズに拡大。 */
}


/* ========================================= */
/* 　doing リンク画像 css ※hoverで拡大&説明文を中央に表示   */
/* ========================================= */
/* doing用画像ボタン */
.p2-button {
  position: relative;
  display: inline-block;
  width: 80%; /* 3つ並ぶように調整 */
  margin: 5%;
  vertical-align: top;
}

.p2-button img {
  width: 100%;
  height: auto;
  display: block;
}

.p2-button:hover {						/* ボタンにカーソルすると */
  transform: perspective(400px) rotateY(0deg) scale(1.1); /* ホバーで正面＆拡大 */
}

/* Products用画像にカーソルすると説明が表示 */
.tooltip-p2 {
  position: relative;
  display: inline-block;
}

.tooltip-text-p2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 1.2rem; /* 2pt大きく */
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.tooltip-p2:hover .tooltip-text-p2 {
  visibility: visible;
  opacity: 1;
}


/* ===================================== */
/* 　ニュースティッカー用 n-slider css   */
/* ===================================== */
/* group01 -News- */

.main-contents .group01 {
  overflow: hidden;
}

.main-contents .group01 .contents01 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: center;
	width: 960px;
	height: 400px; /* 高さを広げて3行表示 */
	margin-left: 4em;
}

.main-contents .group01 .contents01 figure {
	margin-top: 100px;
	width: 30%;
}

.main-contents .group01 .contents01 figure img {
	border-radius: 15px;
}

.main-contents .group01 .contents01 .detail {
	margin-left: 0.5em;
	width: 70%;
}

.main-contents .group01 .contents01 .detail h1 {
	font-size: 4.0rem;
	margin-bottom: 80px;
}

/* 縦スライド */
.slider-container {
	position: relative;
	width: 100%;
	max-width: 600px;
	height: 240px;
	margin: auto;
	margin-top: 20px;
}
.swiper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	display: flex;
	align-items: center;
	font-size: 1.6rem;
	height: 80px;
	background: #fff;
	padding-left: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all 0.3s ease;
}
.dimmed {
	opacity: 0.6;
	transform: scale(0.95);
	color: #999;
}
.frame-overlay {
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	height: 80px;
	border: 6px solid #999;
	background-color: rgba(255, 255, 255, 0);
	box-shadow: 0 0 12px rgba(0,0,0,0.3);
	pointer-events: none;
	z-index: 10;
}
.swiper-slide.center-hover {
	animation: scrollText 8s linear infinite;
}
@keyframes scrollText {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}


/* ================================================ */
/*    会社概要 css と hoverでボタン上に文字列表示   */
/* ================================================ */
/* 会社概要用のtable css */
.ta_com,
.ta_com th,
.ta_com td {
	font-size: 2.0rem;
	margin: auto;
	vertical-align: middle;
	border: 1px solid;
	border-color: #f5f5f5;
	border-left: none;
	border-right: none;
}

.gaiyo {
	width: 360px;
	padding: 0.5em 1em;
}

.link {
	width: 120px;
	padding: 0.1em 0.1em 0.1em 1.5em;
}

/* hoverでボタン画像上に文字列表示 */
.image_link {			
	display: block;
	position: relative;
	text-decoration: none;
}

.image_link img {
	display: block;
	width: 70%;
}

.image_link::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;					/* 表示の優先順位 */
	opacity: 0;
	transition: 0.3s;
}

.image_link::after {
	content: "Click!!";		/* 表示させる文字列 */
	display: block;
	color: red;
	width: 100%;
	font-size: 1rem;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -1em;
	margin-left: -50px;
	opacity: 0;
	z-index: 3;
	transition: 0.3s;
	font-weight: bold;
	letter-spacing: 0.2em;
}

.image_link:hover::before {
	opacity: 0.5;
}

.image_link:hover::after {
	opacity: 1;
	margin-top: -0.5em;
}


/* ================================== */
/*  Supportsカーソルを合わせると説明が表示　①ブラック吹き出しVer.   */
/* ================================== */
/* カーソルを重ねる要素 */
.tooltip {
	position: relative;				/* ツールチップの位置の基準に */
	cursor: inline-block;				/* カーソルを当てたときにポインターに */
}

/* ツールチップのテキスト */
.tooltip-text {
	opacity: 0; 					/* はじめは隠しておく */
	visibility: hidden;				/* はじめは隠しておく */
	position: absolute;				/* 絶対配置 */
	left: 50%;						/* 親に対して中央配置 */
	transform: translateX(-50%);	/* 親に対して中央配置 */
	bottom: -30px;					/* 親要素下からの位置 */
	display: inline-block;
	padding: 5px; 					/* 余白 */
	white-space: nowrap; 			/* テキストを折り返さない */
	font-size: 0.8rem; 				/* フォントサイズ */
	line-height: 1.3; 				/* 行間 */
	background: #333; 				/* 背景色 */
	color: #fff; 					/* 文字色 */
	border-radius: 3px; 			/* 角丸 */
	transition: 0.3s ease-in; 		/* アニメーション */
}

/* ホバー時にツールチップの非表示を解除 */
.tooltip:hover .tooltip-text {
	opacity: 1;
	visibility: visible;
}


/* =================================== */
/*  Consultation 問合せボタン css ※hoverで拡大   */
/* =================================== */
.c-btn {
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	align-items: center;
	background: #f5f6f7;
	border-radius: 9999px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: -60px;
	margin-left: 640px;
	height: 80px;
	justify-content: center;
	width: 80px
}

.c-btn:hover {
	box-shadow: none;
	transform: translateY(10px);
	cursor: pointer;
}

.c-btn a {
	margin: auto;
}





/* ================= */
/*    汎用table用    */
/* ================= */
/*  table 罫線なし   */
.b_less {
	border: none;
}

.b_less td {
	border: none;
}


/* =========================== */
/*  画像拡大用 虫眼鏡アイコン  */
/* =========================== */
.p_plus {
	position: relative;
	display: inline-block;
}
.rp_plus48 {
	position:absolute;
	padding: 5px 4px;						/* ルーペアイコンを画像の角から離す量の設定 */  
	left:0px;
	top:0px;
}

.p_plus01 {
	text-align:center;
}


/* ============= */
/*	汎用 ボタン	*/
/* ============= */
/* btn4　緑・小さい楕円影付き */
.btn4 {
	display: block;
	margin: 0 auto;
	color: #fff;
	font-weight: bold;
	background-color: #00a5a0;
	box-shadow: 0 5px 0 #008480;
	text-align: center;
	text-decoration: none;
	width: 60px;
	height: 20px;
	line-height: 20px;
	border-radius: 40px;
	border: none;
}

.btn4: hover {
	box-shadow: none;
	transform: translateY(5px);
	cursor: pointer;
}

/* btn-square-pop　オレンジ・四角角なし影付き */
.btn-square-pop {
	position: relative;
	display: inline-block;
	padding: 0.5em 1em;
	text-decoration: none;
	color: #FFF;
	background: #fd9535;					/*背景色*/
	border-bottom: solid 2px #d27d00;		/*少し濃い目の色に*/
	border-radius: 4px;						/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-weight: bold;
}

.btn-square-pop:active {
	border-bottom: solid 2px #fd9535;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/* btn-square-raised  浮き出し文字 */
.btn-square-raised {
  display: inline-block;
  width: 20%;
  line-height: 2;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;/*下線消す*/
  background: #668ad8;/*ボタン色*/
  color: white;/*文字の色*/
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #627295;
  border-radius: 12px;/*角の丸み*/
  font-weight: bold;/*太字に*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
  text-shadow: -1px -1px rgba(255, 255, 255, 0.44), 1px 1px rgba(0, 0, 0, 0.38);
}
  
.btn-square-raised:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}


/* =========================== */
/*  support event 共通main-area  */
/* =========================== */

/*========= レイアウトのためのCSS ===============*/

#container2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 80px;
  margin-top:-10px;
}

#header2 {
  width:24%;
  background:#f3f3f3;
}

.main-area {
  width:74%;
  background:#f3f3f3;
}

/* --- おしらせタイトル --- */
.main-area h1 .pageTitle {
  margin: -20px 0px 0px 0px;		/* ページタイトルのマージン（上右下左） */
  padding: 60px 0px 0px 5px;		/* ページタイトルのパディング（上下、左右） */
  font-size: 180%;					/* ページタイトルの文字サイズ */
  color: #666666;					/* ページタイトルの文字色 */
}

/* ================================== */
/*  タイトル下線アニメーション(汎用)  */
/* ================================== */
/*sectionタグと、詳細ページの共通設定
---------------------------------------------------------------------------*/
section,
main > article {
	padding: 3% 10%;		/*上下、左右へのボックス内の余白*/
}

/*mainブロックの設定*/
main {
	flex: 1;
}

/*main-areaブロック内のh2タグ*/
main h2 {
	margin-top: 2em;					/* 上に空けるスペース */
	margin-bottom: 1em;	/*下に空けるスペース*/
	padding: 1em 2em 0;					/* 上 | 左右 | 下 */
	font-size: 2rem;					/* 文字サイズ */
	color: #666666;						/* 文字の色 */
	position: relative;					/* アニメーションに必要な設定 */
	letter-spacing: 0.4em;				/* 文字間隔を少しだけ広くとる設定 */
	border-bottom: 3px solid #f5f5f5;	/* デフォルトのラインの色。下の「bottom」と「height」の３ヶ所の数字部分を合わせる */
}

/*下線スタイル*/
main h2 .uline {
	display: inline-block;
	position: relative;
	padding: 10px 20px;					/* h2タグ内の余白。上下、左右への順番。 */
	bottom: -3px;						/* 上の「border-bottom」と下の「height」の３ヶ所の数字部分を合わせる。※この行だけマイナスをつけるように。 */
}

main h2 .uline::before {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 3px;						/* ラインの高さ。上の「border-bottom」と「bottom」の３ヶ所の数字部分を合わせる */
	background: #00b1d4;				/* アニメーション時のラインの色 */
	transition: 1s 0.5s;				/* 1sはアニメーションの実行時間は1秒。0.5秒遅れてスタートする指定。 */
	transform: scaleX(0);				/* 幅。最初は0にして見えなくしておく。 */
	transform-origin: left top;			/* 線の出現起点が左からになるように。中央からの出現がよければこの１行削除。 */
}

main h2.linestyle .uline::before {
	transform: scaleX(1);
}

/*main-areaブロック内のh3タグ*/
main h3 {
	padding: 0 20px;
	margin-bottom: 1em;					/*下に空けるスペース*/
	border-bottom: 1px solid #ddd;
}


/*main-areaブロック内のh4タグ*/
main h4 {
	padding: 0 20px;
	margin-top: 2em;					/*上に空けるスペース*/
	margin-left: 2em;					/*上に空けるスペース*/
	margin-bottom: 1em;					/*下に空けるスペース*/
	font-size: 1.8rem;
}

/*main-areaブロック内のh5タグ*/
main h5 {
	padding: 0 20px;
	margin-bottom: 1em;					/*下に空けるスペース*/
	font-size: 1.6rem;
	color: blue;
	display: flex;
	align-items: center;
	gap: 8px;
}

/*main-areaブロック内のh6タグ*/
.main-area h6 {
	padding: 0 20px;
	margin-left: 4em;					/*左に空けるスペース*/
	margin-bottom: 0.5em;				/*下に空けるスペース*/
	font-size: 1.6rem;
}

/*main-areaブロック内のh7タグ*/
.main-area h7 {
	padding: 0 20px;
	margin-top: 4em;					/*上に空けるスペース*/
	font-size: 1.8rem;
	font-weight: bold;
}



/*2カラムの場合
---------------------------------------------------------------------------*/
/*2カラム（.mainと.sub）を囲むブロック*/
.c2 {
	display: flex;						/*flexボックスを使う指定*/
	flex-direction: column;				/*子要素を縦並びにする*/
	padding: 5%;						/*ボックス内の余白*/
}

/*.main-areaのsectionのpaddingを一旦リセット*/
.main section {
	padding: 0;
}

/*１つ目以外のsectionの上部に空ける余白。section同士の上下間にとる余白です。*/
.main section:not(:nth-of-type(1)) {
	padding-top: 5%;
}

/*main-area（※頭にドット「.」のない「main」とは全く異なります。）*/
.main {
	order: 2;							/*表示させる順番。数字が小さい方が最初に表示されます。*/
}

/*sub*/
.sub {
	order: 1;							/*表示させる順番。数字が小さい方が最初に表示されます。*/
}

/*sub内のh3タグ*/
.sub h3 {
	font-weight: normal;
	font-size: 1rem;
	margin: 0;
	border: none;
	background: #00b1d4;				/*背景色*/
	color: #fff;						/*文字色*/
	text-align: center;					/*テキストをセンタリング*/
}


/*  タイトルTop画像  */
.main-area div.s2 {
	position:relative;
	top:10px;
}
/* main-areaの文字サイズ */

.main-area p.bun01{		/* 説明文01の体裁 */
	margin-top: 1em;
	padding-left: 7em;
	font-size: 1.4rem;
}


.main-area table{
  font-size: 1.4rem;
}

.main-area ul.modal03{
	margin-left: 10em;
	display: flex;
}	

.main-area li.modal03{
  list-style: none;
  margin-left: 20px;
}

/*========= おしらせ内容のCSS ===============*/


.main-area section{
  padding:30px;
}

.main-area div.box-design14 {
  margin: 20px auto 20px 20px;
  padding: 20px;
  border: 2px solid #434343;
}

.main-area h3.box-design14-ttl {
  position: relative;
  left: -40px;
  background-color: #4c9ac0;
  color: #fff;
  padding: 0.5em 1.2em;
  margin: 10;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}



.main-area h20.title {
    font-size: 16px;
}

 /* === ラジオボタンは非表示 ================== */
#content1 input[type="radio"]{
  display    : none;
}
 
 /* === 各ラジオボタンのラベルをボタンに変更 == */
#content1 label{
  display    : inline-block;
  border     : 1px solid #ccc;
  box-shadow : 2px 2px #999;
  padding    : 2px 6px;
}
 
 /* === 選択されている言語のラベル色を変更 ==== */
#content1 input[type="radio"]:checked + label {
  background : #6D9FEF;
}

#content1  {
 border: none;
 padding: 10px;
 background: #fffffff;
 margin-top: 10px;
}


/* ================================================ */
/*	              各ページごとのCSS                 */
/*	 ↑+↓のcssを使用。必要に応じて↓のcssを修正    */
/*	 同じcssを使用しているページも有るので、        */
/*   修正時は、その点を考慮して、修正してください   */
/* ================================================ */

/* ================================================ */
/* =================  index.html  ================= */
/* ================================================ */
/* ◆ destyle.css：体裁調整用                       */
/* ◆ slick.css：上下スライド                       */
/* ◆ 6-1-7.css：左右スライド                       */
/* ================================================ */

/* ================================================ */
/* ================  support.html  ================ */
/* ================================================ */
/* ◆ 5-4-1.css：イベント告知(背景など)             */
/* ◆ 5-1-2.css：可動式サイドメニュー(体裁)         */
/* ◆ 9-2-1.css：アコーディオン過去お知らせ         */
/* ================================================ */

/* ================================================ */
/* ================  support.html  ================ */
/* ================================================ */
/* ◆ 5-4-1.css：お知らせ内容(背景など)             */
/* ◆ 5-1-2.css：可動式サイドメニュー(体裁)         */
/* ◆ modal3.css：モーダル機能                      */
/* ================================================ */