/* ---------------------------- */
/* WSO OBOG Homepage COMMON.CSS */
/* ---------------------------- */
/* ---------------------------------------------------- */
/* タグへの設定                                         */
/* ---------------------------------------------------- */
body
	{
	margin				: auto;
	padding				: 0px;
	height				: 100%;
	font-family			: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	}
img {
	margin				: 0px;
	border				: 0px;
	padding				: 0px;
	vertical-align			: bottom;
	}
a {
	color				: black;
	text-decoration			: none;
	}
a:link {
	color				: black;
	}
a:vlink {
	color				: black;
	}
a:visited {
	color				: black;
	}
a:hover {
	color				: rgb(239,25,35);
	}
/* ---------------------------------------------------- */
/* 全体                                                 */
/* ---------------------------------------------------- */
.main_parts {
	margin				: auto;
	background-color		: #8B0000;
	}
.center_parts {
	text-align			: center;
	margin				: auto;
	color				: black;
	background-color		: #ffc;
	}
.header_table {
	width				: 1000px;
	background-color		: Khaki;
	border-collapse			: collapse;
	}
.header_img {
	width				: 150px;
	vertical-align			: middle;
	}
.header_title1 {
	padding-left			: 10px;
	text-align			: left;
	height				: 20px;
	font-size			: 24px;
	color				: CadetBlue;
	}
.header_title2 {
	width				: 714px;
	vertical-align			: middle;
	text-align			: center;
	font-size			: 40px;
	color				: #800;
	}
.header_mnt1 {
	padding-left			: 140px;
	text-align			: left;
	font-size			: 33px;
	}
.header_mnt2 {
	width				: 10px;
	background-color		: #500;
	}

.mnt_menu {
	text-align			: left;
	padding-top			: 12px;
	padding-left			: 400px;
	font-size			: 20px;
	color				: Olive;
	}

.goto_top {
	text-align			: left;
	padding-left			: 20px;
	padding-top			: 12px;
	font-size			: 20px;
	color				: Olive;
	}

.job_title {
	padding-top			: 5px;
	padding-bottom			: 5px;
	margin-top			: 5px;
	margin-bottom			: 5px;
	margin-left			: 5px;
	margin-right			: 5px;
	text-align			: center;
	border-radius			: 10px;
	background-color		: gray;
	color				: white;
	}

.job_title2 {
	padding-top			: 5px;
	padding-bottom			: 5px;
	margin-top			: 5px;
	margin-bottom			: 5px;
	margin-left			: 5px;
	margin-right			: 5px;
	text-align			: center;
	border-radius			: 10px;
	background-color		: pink;
	color				: white;
	}

.rtv_item {
	display				: inline-block;
	width				: 180px;
	text-align			: left;
	padding-left			: 200px;
	font-size			: 20px;
	color				: Olive;
	}

.rtv_submit {
	padding-top			: 30px;
	text-align			: center;
	}

.topic_header {
	padding-top			: 10px;
	padding-left			: 30px;
	text-align			: left;
	font-size			: large;
	color				: black
	}
.topic_detail {
	padding-left			: 80px;
	text-align			: left;
	font-weight			: bold;
	font-size			: large;
	color				: black
	}
.topic_detail_sub {
	padding-left			: 120px;
	padding-right			: 20px;
	padding-bottom			: 20px;
	text-align			: left;
	font-size			: midium;
	color				: black
	}
.upd_date {
	padding-left			: 5px;
	font-size			: small;
	font-style			: italic;
	color				: #800;
	}
/* ---------------------------------------------------- */
/* Tool                                                 */
/* ---------------------------------------------------- */
.on_off {
	background-color		: #ffc;
	color				: black;
	padding				: 5px 10px;
	border				: 1px solid maroon;
	border-top-left-radius		: 10px;
	border-top-right-radius		: 10px;
	border-bottom-right-radius	: 10px;
	border-bottom-left-radius	: 10px;
	font-weight			: normal;
	}
.center {
	text-align			: center;
	}
.left {
	text-align			: left;
	}
.blank_line {
	padding-top			: 20px;
	}
.hr1 {
	border-top			: 1px solid #aaa;
	}
.hr2 {
	border-top			: 2px solid orange;
	background-color		: rgb(232, 243, 131);
	}
/* ---------------------------------------------------- */
/* Header Title                                         */
/* ---------------------------------------------------- */
.header_title {
	padding				: 20px 20px 0px 20px;
	text-align			: center;
	font-size			: 28px;
	color				: green;
	}
/* ---------------------------------------------------- */
/* Top Guide                                            */
/* ---------------------------------------------------- */
.top_guide_text {
	padding				: 4px 10px 4px 0px;
	text-align			: right;
	letter-spacing			: 0px;
	font-size			: 12px;
	background-color		: #8B0000;
	color				: #008080;
	}
/* ---------------------------------------------------- */
/* Footer                                               */
/* ---------------------------------------------------- */
.footer {
	padding-top			: 4px;
	padding-bottom			: 4px;
	text-align			: center;
	background-color		: #8B0000;
	}
.footer_text {
	letter-spacing			: 0px;
	font-size			: 12px;
	color				: #FFFFFF;
	}
/* ---------------------------------------------------- */
/* Menu                                                 */
/* ---------------------------------------------------- */
menu	{
	padding-left			: 2px;
	padding-right			: 2px;
	padding-top			: 2px;
	}
nav 	{
	display				: flex;
	gap				: 0.09rem;
	}
/* ---------------------------------------------------- */
a.menu_item1 {
	flex				: 1;
	background-color		: #800;
	color				: #fff;
	border				: 1px solid;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item1a {
	flex				: 1;
	background-color		: darkseagreen;
	color				: #fff;
	border				: 1px solid;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item1m {
	flex				: 1;
	background-color		: darkblue;
	color				: #fff;
	border				: 2px solid aqua;
	padding				: 0.3rem 0.6rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item1ma {
	flex				: 1;
	background-color		: darkseagreen;
	color				: #fff;
	border				: 2px solid aqua;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item1adm {
	flex				: 1;
	background-color		: cornflowerblue;
	color				: #fff;
	border				: 2px solid aqua;
	padding				: 0.3rem 0.6rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item1adma {
	flex				: 1;
	background-color		: darkseagreen;
	color				: #fff;
	border				: 2px solid aqua;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
/* ---------------------------------------------------- */
a.menu_item2 {
	flex				: 1;
	background-color		: darkblue;
	color				: #fff;
	border				: 1px solid;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item2a {
	flex				: 1;
	background-color		: pink;
	color				: maroon;
	border				: 1px solid;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item2m {
	flex				: 1;
	background-color		: darkblue;
	color				: #fff;
	border				: 2px solid red;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item2ma {
	flex				: 1;
	background-color		: pink;
	color				: maroon;
	border				: 2px solid red;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
/* ---------------------------------------------------- */
a.menu_item3 {
	flex				: 1;
	background-color		: midnightblue;
	color				: #fff;
	border				: 1px solid;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item3a {
	flex				: 1;
	background-color		: pink;
	color				: maroon;
	border				: 1px solid;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item3m {
	flex				: 1;
	background-color		: midnightblue;
	color				: #fff;
	border				: 2px solid red;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item3ma {
	flex				: 1;
	background-color		: pink;
	color				: maroon;
	border				: 2px solid red;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
/* ---------------------------------------------------- */
a.menu_item4 {
	flex				: 1;
	background-color		: cornflowerblue;
	color				: #fff;
	border				: 1px solid;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item4a {
	flex				: 1;
	background-color		: pink;
	color				: maroon;
	border				: 1px solid;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item4m {
	flex				: 1;
	background-color		: cornflowerblue;
	color				: #fff;
	border				: 2px solid red;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
a.menu_item4ma {
	flex				: 1;
	background-color		: pink;
	color				: maroon;
	border				: 2px solid red;
	padding				: 0.3rem;
	text-align			: center;
	text-decoration			: none;
	transition			: all 0.5s ease-out;
	}
/* ---------------------------------------------------- */
a.menu_item:hover,
a.menu_item:focus {
  	background-color		: #fff;
	color				: #333;
	}

.msgbox{
  width:50%;
  margin:5% auto;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding:1em;
  line-height:1.5em;
  background:hsla(67, 95%, 95%, 1);
}
#box_one {
  border:solid 5px hsla(0, 95%, 35%, 1);
}
#box_two{
   border:dotted 5px hsla(0, 95%, 35%, 1);
}
#box_three{
   border:dashed 5px hsla(0, 95%, 35%, 1);
}

/* ---------------------------------------------------- */
/* Slider                                               */
/* ---------------------------------------------------- */
.xslider_wrap {
	display: flex;
	overflow: hidden;
	width: 100%;
	background: #e2ffc4;
	box-shadow: 0 2px 5px #999;
}

.xslider1 , .xslider2 {
	display: inline-flex;
	flex: none;
	animation: xslider 40s 2s linear infinite;	/* 30s 2s */
}

.xslider_wrap:hover div {
	animation-play-state: paused!important;
}

.xslider1 div , .xslider2 div {
	flex: none;
	padding: 10px;
}

.xslider1 div:hover , .xslider2 div:hover {
	transform: translateY(-5px);
}

@keyframes xslider {
	0% {
	transform: translateX(0);
	}
	100% {
	transform: translateX(-100%);
	}
}