@charset "UTF-8";

@media (min-width:1100px){
html {
	font-size: 62.5%;
}
body {
	color: #333;
	font-size: 1.2rem;
	font-family: Arial, Helvetica, "sans-serif";
	overflow: scroll;
}
*, *::before, *::after {
	box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
	color: #d03c56;
	text-decoration: none;
}
.title_bar {
	margin: 0px 20% 0px 20%;
	font-family: Arial, Helvetica, "sans-serif";
	font-size:13px;
	font-wieght:bold;
}
.uppercase {
	vertical-align: super;
	font-size:10px;
}
.blank {
	background-color: white;
	height: 20px;
	margin: 0px 0px 0px 0px;
}
.bar {
	height: 30px;
	color: black;
	margin: 0px 20% 0px 20%;
	vertical-align: baseline;
}
.bar p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar p a:link {
	color: black;
	text-decoration: none;
}
.bar p a:visited {
	color: black;
	text-decoration: none;
}
.bar p a:hover {
	color: black;
	text-decoration: underline;
}
.linkage a:link {
	color: #000000;
	text-decoration:none;
}
.linkage a:visited {
	color: #000000;
	text-decoration:none;
}
.linkage a:hover {
	color: #000000;
	text-decoration: underline;
}
.kesu {
		overflow:hidden;
}

/* --------------------------------
 * home-header
 * -------------------------------- */
#header {
	width: 100%;
	height: 70px;
	padding-top:10px;
	padding-bottom:10px;
	background-color: rgb(255,255,255);
}

/* --------------------------------
 * home-header-hamburger
 * -------------------------------- */
#nav-drawer {
	font-color: rgb(37,62,107);	
	width: 10%;
	text-align: center;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
/*ヘッダーまわりはサイトに合わせて調整してください*/
#nav-drawer {
	position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
	display: none;
	text-align: left;
	padding-left: 420px;
}
.nav-unshown a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	border-radius: 3px;
	background: rgb(37,62,107);
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	background: url('images/asset-about-us-portrait.png') fixed;
	background-size: 100% auto;
	background-repeat: no-repeat;
	overflow: hidden;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 410px;/*最大幅（調整してください）*/
	height: 100%;
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	box-shadow: -100px solid white;
}
#nav-content {
	width: 100%
}
#nav-content .background-color {
	width: 100%;
	height: 100%;
	background-color: rgba(0,94,132,0.8);
	overflow: scroll;
	padding: 0px;
	margin: 0px;
}
#indent li {
	list-style-type: none;		/*リストマーカー無しにする*/
	color: #ffffff;			/*文字色*/
	text-decoration: none;		/*リンク部分を下線無しにする*/
	margin: 0px;
	padding: 0px;
}
#indent .first {
	text-align: left;
}
#indent .second {
	text-align: left;
	margin-left: 100px;
	margin-bottom: 0px;
}
#indent .footer {
	text-align: left;
}
#indent .copyright {
	text-align: left;
	letter-spacing: 0.3;
}
#indent li a:link {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:visited {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
hr {
	clear: both;		/*フロート配置をクリアする*/
	max-width: 100%;		/*幅の指定*/
	margin-top: 10px; 
	margin-right: 30px;   /*マージン*/
	border: 1px solid #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#hoge {
	display:none;
}

/* --------------------------------
 * home-header-hamburger-closure button
 * -------------------------------- */
.dli-close {
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	line-height: 1;
	width: 1em;
	height: 0.1em;
	background: currentColor;
	border-radius: 0.1em;
	position: relative;
	transform: rotate(45deg);
	font-size: 33px;
	opacity: 1;
}
.dli-close::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}

/* --------------------------------
 * home-header-continuing
 * -------------------------------- */
#header .dummy {
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
#header .Company_Name {
	font-family: wigwag-bold, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: center;
	width: 60%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 25px;
	text-indent: 0px;
}
#company_logo {
	width: 25px; 
	height: 25px;
}
#header .Language {
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: right;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#header .Contact_Us {
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: center;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#mail_icon {
	margin-top: 5px;
	width: 35px;
	height: 35px;
}
#header a:link {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:visited {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:hover {
	color:rgb(37,62,107); 
	text-decoration:none;
}

/* --------------------------------
 * home-menu
 * -------------------------------- */
#menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	clear: both;
}
.direction_ltr {
	display: flex;
	flex-direction: row;
	direction: ltr;
}
.direction_rtl {
	display: none;
}
#dropmenu{
	font-family: Arial, Helvetica, "sans-serif";
	list-style-type: none;
	max-width: 100%;
	height: 40px;
	margin: 0px auto 0px;
	padding: 0px;
	background: #fff;
	border-bottom: 0px solid rgb(57,137,192);
	border-radius: 3px 3px 0 0;
	float: left;
	position: absolute;
	left: 0%;
	right: 0%;
	z-index: 10;
	display: inline-block;
	margin: 0px 18% 0px 18%;
}
#dropmenu li{
	position: relative;
	width: 14%;
	float: left;
	margin: 0 3% 0 3%;
	padding: 0 0 0 0;
	text-align: center;
	z-index: 10;
}
#dropmenu li a{
	display: block;
	margin: 0px;
	padding: 15px 0px 15px 0px;
	color: #666;
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
	text-decoration: none;
	border-radius: 8px;
	transition: 0.15s;
}
#dropmenu .active > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu li:hover > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu > li:hover > a{
	border-radius: 8px;
}
#dropmenu li ul{
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	border-radius: 0 0 3px 3px;
}
#dropmenu li:last-child ul{
	left: -100%;
	width: 100%
}
#dropmenu li ul li{
	overflow: hidden;
	width: 200%;
	height: 0;
	color: #fff;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
#dropmenu li ul li a{
	margin: 0 -1.5% 0 -1.5%;
	padding: 13px 15px;
	background: rgb(222,230,228);
	text-align: left;
	font-size: 12px;
	font-weight: normal;
}
#dropmenu li:hover ul li{
	overflow: visible;
	height: 38px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#dropmenu li:hover ul li:first-child{
	border-top: 0;
}
#dropmenu li:hover ul li:last-child{
	border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
	border-radius: 8px;
}

/* --------------------------------
 * home-slide-show
 * -------------------------------- */
#slick {
	margin: 10px 20% 0px 20%;
}
#slick　.slick1{
	width: 100%;
	height: auto;
	margin: 10px auto;
	padding: 10px 10px;
}
#slick .image {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0px;
	text-align: center;
}

/* --------------------------------
 * home-special-notice
 * -------------------------------- */
.special_notice {
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #fff;
	margin: 0px 15% 0px 20%;
}
.scroll_list{
  margin: 0px 0px 0px 0px;
  padding: 0;
  width: 90%;  /* コンテンツが見切れて見えるようにする */
  overflow-x: auto;   横スクロールの指定 
  white-space: nowrap;  /* 横スクロールの指定 */
  overflow-scrolling: touch;  /* スクロールを滑らかにする */
  -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
  height:auto;
}
.scroll_list li{
  display: inline-block;  /* 横並びにする指定 */
  list-style: none;
  height: auto;  /* 横スクロールする範囲の高さを指定 */
}
.scroll-list {
	margin-top: 30px;
	max-height: 500px;
	width: 100%;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list .scroll-item a {
	display: block;
	padding: 10px 10px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list .scroll-item:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list .scroll-item a:hover {
	background-color: #fafaf8;
}
.scroll-list .date {
	display: inline-block;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
	line-height: 16px;
}
.scroll-list .category {
	display: inline-block;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: 16px;
}
.scroll-list .category.news {
	background-color: #2c3c53;
}
.scroll-list .title {
	display: inline-block;
	padding-top: 15px;	
	padding-bottom: 5px;	
	padding-left: 50px;
	width: 1000px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:  13px;
	line-height: 16px;
}

/* --------------------------------
 * home-pick-up-contents
 * -------------------------------- */
#pick_up_contents {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 0px 20% 0px 20%;
	overflow: none;
}
#pick_up_contents h2{
	text-align: left;
}
#pick_up_contents p{
	text-align: left;
}
#flex {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}

/* --------------------------------
 * pick-up-contents-parts
 * -------------------------------- */
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
.heading {
	padding: 10px 12px;
	background: url('../images/bg-slash.gif');
	letter-spacing: 1px;
	font-size: 1.6rem;
}
.hidden {
	display: none;
}

/* --------------------------------
 * pick-up-contents-header
 * -------------------------------- */
.article-box {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box:hover {
	opacity: 0.8;
}
.article-box:nth-of-type(odd) {
	float: left;
}
.article-box:nth-of-type(even) {
	float: right;
}
.article-box .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-publications
 * -------------------------------- */
#publications {
	background-color: rgb(230,230,230);
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	padding: 20px 20% 0px 20%;
}
#publications h2 {
	text-align: left;
}
#publications p {
	text-align: left;
}
#flex2 {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex2 .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex2 .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex2 .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex2 .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box2 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box2:hover {
	opacity: 0.8;
}
.article-box2:nth-of-type(odd) {
	float: left;
}
.article-box2:nth-of-type(even) {
	float: right;
}
.article-box2 .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box2 .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box2 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box2 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-videos
 * -------------------------------- */
#videos {
	background-color: rgb(64,64,64);
	font-family: Arial, Helvetica, "sans-serif";
	color: #ffffff;
	height: 500px;
	padding: 20px 20% 0px 20%;
}
#videos h2 {
	text-align: left;
}
#videos p {
	text-align: left;
}
#flex3 {
	margin: 0px 5% 0px 5%;	
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex3 .box3 h3 {
	width: 400px;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #FFFFFF;
	background-color: rgb(64,64,64);
	text-align: center;
	border-color: #ffffff;
	border-style: solid;
	border-width: 0.5px;
}
#flex3 .box3 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex3 .box3 .image {
	height: 100%;
	width: 200px;
	border-left: 0.5px solid #ffffff;
	border-right: 0.5px solid #ffffff;
	border-bottom: 0.5px solid #ffffff;
}
#flex3 .box3 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box3 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box3:hover {
	opacity: 0.8;
}
.article-box3:nth-of-type(odd) {
	float: left;
}
.article-box3:nth-of-type(even) {
	float: right;
}
.article-box3 .title {
	margin-top: 30px;
	color: #ffffff;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box3 .desc {
	margin-top: 5px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box3 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box3 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-follow-me
 * -------------------------------- */
.follow_me {
	background-color: rgb(230,230,230);
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: rgb(0,66,102);
	height: 150px;
	padding: 20px 20% 0px 20%;
	border: 1px solid rgb(230,230,230);
}
.follow_me h2 {
	padding-top: 5px;
}
.follow-me {
	list-style: none;
	margin-left: 50px;
	overflow: hidden;
	padding: 0px;
}
.follow-me li {
	float: left;
	margin: 30px 40px 0px 0px;
	padding: 0;
}
.follow-me li a::before {
	background-color: #eee;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #333;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	height: 30px; /* Button height */
	line-height: 30px; /* Button height */
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	text-align: center;
	width: 30px; /* Button width */
}
.follow-me li a:hover::before {
	color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before,        { content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { content: "\f16b"; }
.follow-me li a[href*="facebook.com/realbluetechnologies"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/research-20210124.html"]::before       { content: "\f09a"; }	
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20210201.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220322.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220729.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20221011.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20230215.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20240119.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { content: "\f1e8"; }
.follow-me li a[href*="twitter.com/RealBlueTech"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/research-20210124.html]&text=[コロナの影響を受けた産業の考察]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20210201.html]&text=[Real Blue Technologies株式会社設立およびホームページ開設のお知らせ]"]::before        { content: "\f099"; }	
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220322.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220729.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20221011.html]&text=[当ウェブサイトのご利用規約および個人情報の取り扱い改訂のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20230215.html]&text=[東京支店開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20240119.html]&text=[海外事業の先導に立てる人材育成オンライン講座のご案内]"]::before        { content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { content: "\f000"; font-family: blogicon; }

.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before,        { background-color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { background-color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { background-color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { background-color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { background-color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { background-color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { background-color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { background-color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { background-color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { background-color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { background-color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { background-color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { background-color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { background-color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { background-color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { background-color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { background-color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { background-color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { background-color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { background-color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { background-color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { background-color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { background-color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { background-color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { background-color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { background-color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { background-color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { background-color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { background-color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { background-color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { background-color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { background-color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { background-color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { background-color: #363636; }

/* --------------------------------
 * home-footer
 * -------------------------------- */
#footer {
	width: 100%;
	height: 60px;
	background-color: #000000;
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #ffffff;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	line-height: normal;
	letter-spacing: 0.1em;
	text-decoration: none;
	padding-left: 20%;
	border-top: 1px solid #000000;
}
#footer .copyright {
	width: 45%;
	text-align: left;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer .footer1 {
	width: 10%;
	text-align: right;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer .footer2 {
	width: 15%;
	text-align: center;
	float: left;
	height: 50px;
	line-height: 50px;
	pudding-right: 5px;
	font-size: 13px;
}
#footer .footer3 {
	width: 10%;
	text-align: left;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer .footer4 {
	width: 8%;
	text-align: left;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer .footer5 {
	width: 12%;
	text-align: left;
	float: left;
	height: 50px;
	line-height: 50px;
}
#footer .copyright_english {
	width: 43.5%;
	text-align: left;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer .footer6 {
	width: 15.6%;
	text-align: right;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer .footer7 {
	width: 13%;
	text-align: center;
	float: left;
	height: 50px;
	line-height: 50px;
	pudding-right: 5px;
	font-size: 13px;
}
#footer .footer8 {
	width: 10%;
	text-align: left;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer .footer9 {
	width: 5.9%;
	text-align: left;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer .footer10 {
	width: 12%;
	text-align: left;
	float: left;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
#footer a:link {
	color: #ffffff;
	text-decoration:none;
	clear: both;
}
#footer a:visited {
	color: #ffffff;
	text-decoration:none;
}
#footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* --------------------------------
 * section: top - about us
 * -------------------------------- */
#about-us {
	margin: 0px 20% 0px 20%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#cloud .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#cloud .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(0,44,72);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#cloud .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#cloud .desc {
	color: #ddc;
}

/* --------------------------------
 * section: message from ceo - about us
 * -------------------------------- */
#message {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#message:hover {
	opacity: 0.85;
}
#message .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(105,110,112);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#message .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#message .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#message .desc {
	color: #fff;
}

/* --------------------------------
 * section: slogan and purpose - about us
 * -------------------------------- */
#slogan-purpose {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#slogan-purpose:hover {
	opacity: 0.85;
}
#slogan-purpose .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#slogan-purpose .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(239,90,97);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#slogan-purpose .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#slogan-purpose .desc {
	color: #fff;
}

/* --------------------------------
 * section: profile - strategy
 * -------------------------------- */
#strategy {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#strategy:hover {
	opacity: 0.85;
}
#strategy .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(252,181,26);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#strategy .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#strategy .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#strategy .desc {
	color: #000;
}

/* --------------------------------
 * section: profile - about us
 * -------------------------------- */
#company-profile {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#company-profile:hover {
	opacity: 0.85;
}
#company-profile .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(193,200,194);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#company-profile .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#company-profile .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#company-profile .desc {
	color: #000;
}

/* --------------------------------
 * detailed pages of about us
 * -------------------------------- */
#section_slogan-and-purpose {
	margin: 0px 20% 0px 20%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_strategy {
	margin: 0px 20% 0px 20%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_profile {
	margin: 0px 20% 0px 20%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.as-of-when {
	margin: 0px 0px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	font-weight: solid;
}
.column1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 150px;
	padding: 30px;
	width: 30%;
	float: left;
}
.mobi {
	display:none;		
}
.row1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 150px;
	padding: 30px;
	width: 70%;
	float: left;
}
.column2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 30%;
	float: left;
}
.row2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 70%;
	float: left;
}
.column3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 30%;
	float: left;
}
.row3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 70%;
	float: left;
}
.column3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	padding: 30px;
	width: 30%;
	float: left;
}
.row3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	padding: 30px;
	width: 70%;
	float: left;
}
.column4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 30%;
	float: left;
}
.row4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 70%;
	float: left;
}
.column5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 600px;
	padding: 30px;
	width: 30%;
	float: left;
}
.row5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 600px;
	padding-top: 15px;
	padding-left: 30px;
	width: 70%;
	float: left;
	padding-left:3.5em;
	text-indent:-1.3em;
}
.column6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 30%;
	float: left;
}
.row6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: auto;
	float: left;
}

/* --------------------------------
 * products-and-services
 * -------------------------------- */
#products_and_services {
	margin: 0px 20% 0px 20%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#products_and_services .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#products_and_services .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#products_and_services .title {
	margin-top: 90px;
	margin-bottom: 15px;
	margin-left: 20px;
	margin-right: 20px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#products_and_services .desc {
	color: #fff;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
}
#products_and_services p {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
}
#products_and_services .special {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
}

#flex4 {
	margin: 0px 2% 0px 2%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	overflow: scroll;
}
#flex4 .box {
	align-items: stretch;
	width: 280px;
	margin: 10px;
}
#flex4 .box .shashin{
	width: 280px;
	height:　200px;
	margin:　0px;	
	padding: 0px;
	border: solid 1px rgb(105,206,246);
	vertical-align:top;
}
#flex4 .box h3 {
	width: 280px;
	height: 0px;
	margin: 0px;
	padding: 30px 0px 10px 0px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: center;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
}
#flex4 .box p {
	width: 280px;
	height: 150px;
	margin: 0px 0px 0px 0px;
	padding: 30px 8px 0px 8px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
    line-height:25px;
}

/* --------------------------------
 * news
 * -------------------------------- */
#news {
	margin: 0px 20% 0px 20%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#news h2 {
	text-align: left;
}
#news p {
	margin-top: 0px;
	text-align: left;
}
#news .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#news .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(106,115,105);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#news .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#news .desc {
	color: #fff;
}
.special_notice2 {
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #fff;
	margin: 10px 20% 10px 20%;
	height:400px;
}
.special_notice2 .image {
	max-width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.special_notice2 h2{
	text-align: left;
}
.special_notice2 p{
	text-align: left;
}
.heading2 {
	padding: 10px 12px;
	background: url('images/bg-slash.gif');
	letter-spacing: 1px;
	font-size: 1.6rem;
}
#pick_up_contents2 {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 10px 20% 10px 20%;
	overflow:scroll;
}
#pick_up_contents2 h2{
	text-align: left;
}
#pick_up_contents2 p{
	text-align: left;
}
.scroll-list2 {
	margin-top: 30px;
	max-height: 500px;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list2 .scroll-item2 a {
	display: block;
	padding: 10px 15px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list2 .scroll-item2:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list2 .scroll-item2 a:hover {
	background-color: #fafaf8;
}
.scroll-list2 .date2 {
	display: inline-block;
	width: 19%;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
}
.scroll-list2 .category2 {
	display: inline-block;
	width: 8%;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 12px;
	line-height: 16px;
}
.scroll-list2 .category2.news2 {
	background-color: #2c3c53;
}
.scroll-list2 .title2 {
	display: inline-block;
	width: 73%;
	padding-left: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

/* --------------------------------
 * publications-and-videos
 * -------------------------------- */
#publications-and-videos-overall {
	margin: 0px 20% 0px 20%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#publications-and-videos-overall h2 {
	text-align: left;
}
#publications-and-videos-overall p {
	margin-top: 0px;
	text-align: left;
}
#publications-and-videos-overall .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#publications-and-videos-overall .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(0,0,0);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#publications-and-videos-overall .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#publications-and-videos-overall .desc {
	color: #ddc
}

/* --------------------------------
 * publications-and-videos-item
 * -------------------------------- */
#publications-and-videos {
	margin: 0px 20% 0px 20%;
	height: 500px;
}
.item {
	width: 180px;
	margin-bottom: 4px;
	padding: 8px;
	border-bottom: 3px solid;
	border-radius: 5px;
	background-color: #fff;
}
.item .image {
	display: block;
	width: 100%;
	height: 109px;
}
.item .category {
	margin: 15px 9px 10px;
	color: #aaa;
	letter-spacing: 1px;
	font-family: "Trebuchet MS", "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
.item .category::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 5px;
	border: 2px solid;
	border-radius: 50%;
	vertical-align: -5px;
}
.item .description {
	margin: 10px;
	line-height: 1.5;
}
.item > a {
	display: block;
	margin: -8px -8px -11px;
	padding: 8px 8px 11px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
}
.item > a:hover {
	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
}
.item-maindish,
.item-maindish .category::before {
	border-color: #FFC0CB;
}
.item-appetizer,
.item-appetizer .category::before {
	border-color: #76C047;
}
.item-column,
.item-column .category::before {
	border-color: #FFF100;
}
.item-breaktime,
.item-breaktime .category::before {
	border-color: #C1EFFF;
}
.item-m {
	width: 364px;
}
.item-m .image {
	height: 146px;
}
.item-l {
	width: 732px;
}
.item-l .image {
	height: 403px;
}

/* --------------------------------
 * contact_form
 * -------------------------------- */
#section_contact_form {
	margin: 0px 20% 0px 20%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_contact_form .button {
	text-align: center;
}
#section_contact_form .button {
	text-align: center;
}
#disclaimer {
	margin: 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: rgb(236,247,251);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	height: 600px;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
#disclaimer li {
	padding: 0px 10% 0px 10%;
}
#blue {
    margin: 0px;
	width: 100%;
    border: 1px solid rgb(161,171,170);
}
table tbody {
}
table tbody tr th {
	padding-right: 20px;
	color: black;
	text-align: right;
	border: none;
	background-color: #ffffff;
	width: 35%;
}
table tbody tr td {
	padding: 10px;
	text-align: left;
	border: none;
	background-color: #ffffff;
	width: 65%;
	height: 40px;
}
table {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	margin: 1px;
	height: 950px;
}
#textfield{
	text-align: left;
}
#item1{
    border: 1px solid rgb(161,171,170);
}
#item2{
    border: 1px solid rgb(161,171,170);
}
#item3{
    border: 1px solid rgb(161,171,170);
}
#item4{
    border: 1px solid rgb(161,171,170);
}
#textfield1{
	text-align: left;
	width:90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textarea{
	text-align: left;
	width:90%;
	height: 400px;
    border: 1px solid rgb(161,171,170);
	padding-top:10px;
	padding-left:10px;
}
#text-count {
   display: block;
   text-align: right;
   margin-top:10px;
   margin-right:10%;
}
#text-count.over {
   font-weight: bold;
   color: #c90000;
}
#textfield2{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield3{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield4{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield5{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield6{
	text-align: left;
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield7{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#name{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#email{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#email_check{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#tel{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#subject{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#caseid{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#body{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#submit{
	float: center;
	margin: 0px 10px 0px 10px;
	padding: 10px 0px 10px 0px;
	font-size:　15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
#reset{
	float: center;
	margin-left: 10px;
	margin-right: 10px;	
	font-size:15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
.maintitle {
	height: 50px;
	font-color: white;
	margin: 20px 20% 0px 20%;
}
.maintitle h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 60% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease {
	margin: 0px 20% 0px 20%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#pressrelease .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#pressrelease .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#pressrelease .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#pressrelease .desc {
	color: #fff;
}
.maintitle_pressrelease {
	height: 50px;
	font-color: white;
	margin: 20px 20% 0px 20%;
}
.maintitle_pressrelease h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 60% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle_pressrelease h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease h4 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
}
#pressrelease h3 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: bold;
	text-align: center;
}
#pressrelease p {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: left;
	line-height: 25px;
}
#pressrelease .left{
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: left;
}
#pressrelease .right{
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: right;
}
.share {
	margin: 0px 0px 0px 0px;
	padding:0px;
	height: 200px;
	flex-direction: column;
	background-color: #ffffff;
}
.btn-twitter {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #55acee;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  height:40px;
  width:5%;
  float:left;
}
.btn-twitter::after {
  position: absolute;
  content: '\f099';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  float:left;
}
.btn-facebook {
  display: inline-block;
  padding: .6em .8em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #315096;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  float:left;
}
.btn-facebook::after {
  position: absolute;
  content: '\f09a';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}
.btn-line {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #1dcd00;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  clear:both;
}
.btn-line::after {
  position: absolute;
  content: "\f3c0";
  font-family: 'Font Awesome 5 Brands';
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: 400;
}
.each-page-image {
	margin: 10px 20% 0px 20%;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.each-page-image .image {
	width: 100%;
	height: auto;
}
.section_message {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	height: 1200px;
	background-color: white;
	margin: 0px 20% 0px 20%;
}
.section_message_responsive {
	display: none;
}
.subtitle {
	font-size: 18px;
	width: 960px;
	height: 20px;
	background-color: white;
	color: black;
}
.message {
	width: 80%;
	height: 1100px;
	margin: 0px;
	border: 0px white solid;
	padding-left: 30px;
	padding-right: 20px;
	background-color: white;
	text-align: justify;
	float: right;
	overflow: scroll;
	letter-spacing: 0px;
	line-height:30px;
}
.comment {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	margin: 10px 20% 0px 20%;
	letter-spacing: 0px;
	line-height:30px;
}
.navi {
	width: 20%;
	height: 1000px;
	background-color: white;
	float: right;
	padding-left:20px;
}
.picture {
	width: 80%;
	height: auto;
}
.adjustment {
	width: 80%;
	height: 20px;
	backgroud-color: white;
	text-align: right;
	float: right;
}

/* --------------------------------
 * paragraph
 * -------------------------------- */
.table_of_contents {
	margin: 0px 20% 0px 20%;
	padding:0px;
	background-color: #ffffff;
	font-size: 15px;
}
#terms_of_services {
	margin: 0px 20% 0px 20%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#terms_of_services2 {
	margin: 0px 20% 0px 20%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#privacy_policy {
	margin: 0px 20% 0px 20%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}	
.paragraph {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph li {
	padding: 0px 60px 0px 50px;
}
.paragraph2 {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph2 li {
	padding: 0px 60px 0px 50px;
}
.paragraph3 {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph3 li {
	padding: 0px 60px 0px 50px;
}

.migiyose {
	margin-right:60px;
	text-align:right;
}
.first_indent {
	padding-left: 1.4em;
	text-indent:  -1.4em;
}
.second_indent {
	padding-left: 4em;
	text-indent: -1.4em;
}
.third_indent {
	padding-left: 6em;
	text-indent: -1.4em;
}
.fourth_indent {
	padding-left: 8em;
	text-indent: -1.4em;
}
.fifth_indent {
	font-size: 15px;
	padding-left: 1.4em;
	text-indent: -1.4em;
	margin: 0px 5% 0px 15%;
}
.maintitle2 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 25px;
}
.maintitle2 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 8% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle3 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 2em;
}
.maintitle3 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(196,194,190);
	position: relative;
	margin: 0px 9% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle5 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 0px;
}
.maintitle5 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	padding-bottom: 5px;
}
.bar2 {
	height: 30px;
	color: black;
	margin: 0px 0px 0px 20%;
	vertical-align: baseline;
	float: left;
	width: 30%;
}
.bar2 p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar2 p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar2 p a:link {
	color: black;
	text-decoration: none;
}
.bar2 p a:visited {
	color: black;
	text-decoration: none;
}
.bar2 p a:hover {
	color: black;
	text-decoration: underline;
}
.page_top {
	height: 30px;
	color: black;
	margin: 0px 20% 0px 0px;
	vertical-align: baseline;
	float: right;
	width: 20%;
	text-align:right;
}
.page_top p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(122,137,135);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.page_top p .bold{
	font-weight: bold;
	color: rgb(122,137,135);
}
.page_top p a:link {
	color: black;
	text-decoration: none;
}
.page_top p a:visited {
	color: black;
	text-decoration: none;
}
.page_top p a:hover {
	color: black;
	text-decoration: underline;
}
}

@media (min-width:769px) and (max-width:1099px){
html {
	font-size: 62.5%;
}
body {
	color: #333;
	font-size: 1.2rem;
	font-family: Arial, Helvetica, "sans-serif";
	overflow: scroll;
}
*, *::before, *::after {
	box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
	color: #d03c56;
	text-decoration: none;
}
.title_bar {
	margin: 0px 10% 0px 10%;
	font-family: Arial, Helvetica, "sans-serif";
	font-size:12px;
	font-wieght:bold;
}
.uppercase {
	vertical-align: super;
	font-size:10px;
}
.blank {
	background-color: white;
	height: 20px;
	margin: 0px 0px 0px 0px;
}
.bar {
	height: 30px;
	color: black;
	margin: 0px 10% 0px 10%;
	vertical-align: baseline;
}
.bar p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar p a:link {
	color: black;
	text-decoration: none;
}
.bar p a:visited {
	color: black;
	text-decoration: none;
}
.bar p a:hover {
	color: black;
	text-decoration: underline;
}
.linkage a:link {
	color: #000000;
	text-decoration:none;
}
.linkage a:visited {
	color: #000000;
	text-decoration:none;
}
.linkage a:hover {
	color: #000000;
	text-decoration: underline;
}
.kesu {
		overflow:hidden;
}

/* --------------------------------
 * home-header
 * -------------------------------- */
#header {
	width: 100%;
	height: 70px;
	padding-top:10px;
	padding-bottom:10px;
	background-color: rgb(255,255,255);
}

/* --------------------------------
 * home-header-hamburger
 * -------------------------------- */
#nav-drawer {
	font-color: rgb(37,62,107);	
	width: 10%;
	text-align: center;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
/*ヘッダーまわりはサイトに合わせて調整してください*/
#nav-drawer {
	position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
	display: none;
	text-align: left;
	padding-left: 420px;
}
.nav-unshown a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	border-radius: 3px;
	background: rgb(37,62,107);
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	background: url('images/asset-about-us-portrait.png') fixed;
	background-size: 100% auto;
	background-repeat: no-repeat;
	overflow: hidden;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 410px;/*最大幅（調整してください）*/
	height: 100%;
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	box-shadow: -100px solid white;
}
#nav-content {
	width: 100%
}
#nav-content .background-color {
	width: 100%;
	height: 100%;
	background-color: rgba(0,94,132,0.8);
	overflow: scroll;
	padding: 0px;
	margin: 0px;
}
#indent li {
	list-style-type: none;		/*リストマーカー無しにする*/
	color: #ffffff;			/*文字色*/
	text-decoration: none;		/*リンク部分を下線無しにする*/
	margin: 0px;
	padding: 0px;
}
#indent .first {
	text-align: left;
}
#indent .second {
	text-align: left;
	margin-left: 100px;
	margin-bottom: 0px;
}
#indent .footer {
	text-align: left;
}
#indent .copyright {
	text-align: left;
	letter-spacing: 0.3;
}
#indent li a:link {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:visited {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
hr {
	clear: both;		/*フロート配置をクリアする*/
	max-width: 100%;		/*幅の指定*/
	margin-top: 10px; 
	margin-right: 30px;   /*マージン*/
	border: 1px solid #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#hoge {
	display:none;
}

/* --------------------------------
 * home-header-hamburger-closure button
 * -------------------------------- */
.dli-close {
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	line-height: 1;
	width: 1em;
	height: 0.1em;
	background: currentColor;
	border-radius: 0.1em;
	position: relative;
	transform: rotate(45deg);
	font-size: 33px;
	opacity: 1;
}
.dli-close::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}

/* --------------------------------
 * home-header-continuing
 * -------------------------------- */
#header .dummy {
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
#header .Company_Name {
	font-family: wigwag-bold, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: center;
	width: 60%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 25px;
	text-indent: 0px;
}
#company_logo {
	width: 25px; 
	height: 25px;
}
#header .Language {
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: right;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#header .Contact_Us {
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: center;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#mail_icon {
	margin-top: 5px;
	width: 30px;
	height: 30px;
}
#header a:link {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:visited {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:hover {
	color:rgb(37,62,107); 
	text-decoration:none;
}

/* --------------------------------
 * home-menu
 * -------------------------------- */
#menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	clear: both;
}
.direction_ltr {
	display: flex;
	flex-direction: row;
	direction: ltr;
}
.direction_rtl {
	display: none;
}
#dropmenu{
	font-family: Arial, Helvetica, "sans-serif";
	list-style-type: none;
	max-width: 100%;
	height: 40px;
	margin: 0px auto 0px;
	padding: 0px;
	background: #fff;
	border-bottom: 0px solid rgb(57,137,192);
	border-radius: 3px 3px 0 0;
	float: left;
	position: absolute;
	left: 0%;
	right: 0%;
	z-index: 10;
	display: inline-block;
	margin: 0px 10% 0px 10%;
}
#dropmenu li{
	position: relative;
	width: 16%;
	float: left;
	margin: 0 2% 0 2%;
	padding: 0 0 0 0;
	text-align: center;
	z-index: 10;
}
#dropmenu li a{
	display: block;
	margin: 0px;
	padding: 15px 0px 15px 0px;
	color: #666;
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
	text-decoration: none;
	border-radius: 8px;
	transition: 0.15s;
}
#dropmenu .active > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu li:hover > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu > li:hover > a{
	border-radius: 8px;
}
#dropmenu li ul{
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	border-radius: 0px;
}
#dropmenu li:last-child ul{
	left: -100%;
	width: 100%
}
#dropmenu li ul li{
	overflow: hidden;
	width: 200%;
	height: 0;
	color: #fff;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
#dropmenu li ul li a{
	margin: 0 -1.5% 0 -1.5%;
	padding: 13px 15px;
	background: rgb(222,230,228);
	text-align: left;
	font-size: 12px;
	font-weight: normal;
}
#dropmenu li:hover ul li{
	overflow: visible;
	height: 38px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#dropmenu li:hover ul li:first-child{
	border-top: 0;
}
#dropmenu li:hover ul li:last-child{
	border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
	border-radius: 8px;
}

/* --------------------------------
 * home-slide-show
 * -------------------------------- */
#slick {
	margin: 10px 10% 0px 10%;
}
#slick　.slick1{
	width: 100%;
	height: auto;
	margin: 10px auto;
	padding: 10px 10px;
}
#slick .image {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0px;
	text-align: center;
}

/* --------------------------------
 * home-special-notice
 * -------------------------------- */
.special_notice {
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #fff;
	margin: 0px 5% 0px 10%;
}
.scroll_list{
  margin: 0px 0px 0px 0px;
  padding: 0;
  width: 90%;  /* コンテンツが見切れて見えるようにする */
  overflow-x: auto;  /* 横スクロールの指定 */
  white-space: nowrap;  /* 横スクロールの指定 */
  overflow-scrolling: touch;  /* スクロールを滑らかにする */
  -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
}
.scroll_list li{
  display: inline-block;  /* 横並びにする指定 */
  list-style: none;
  height: auto;  /* 横スクロールする範囲の高さを指定 */
}
.scroll-list {
	margin-top: 30px;
	max-height: 500px;
	width: 100%;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list .scroll-item a {
	display: block;
	padding: 10px 10px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list .scroll-item:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list .scroll-item a:hover {
	background-color: #fafaf8;
}
.scroll-list .date {
	display: inline-block;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
	line-height: 16px;
}
.scroll-list .category {
	display: inline-block;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: 16px;
}
.scroll-list .category.news {
	background-color: #2c3c53;
}
.scroll-list .title {
	display: inline-block;
	padding-top: 15px;	
	padding-bottom: 5px;	
	padding-left: 50px;
	width: 600px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:  13px;
	line-height: 16px;
}

/* --------------------------------
 * home-pick-up-contents
 * -------------------------------- */
#pick_up_contents {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 0px 10% 0px 10%;
	overflow: none;
}
#pick_up_contents h2{
	text-align: left;
}
#pick_up_contents p{
	text-align: left;
}
#flex {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}

/* --------------------------------
 * pick-up-contents-parts
 * -------------------------------- */
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
.heading {
	padding: 10px 12px;
	background: url('../images/bg-slash.gif');
	letter-spacing: 1px;
	font-size: 1.6rem;
}
.hidden {
	display: none;
}

/* --------------------------------
 * pick-up-contents-header
 * -------------------------------- */
.article-box {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box:hover {
	opacity: 0.8;
}
.article-box:nth-of-type(odd) {
	float: left;
}
.article-box:nth-of-type(even) {
	float: right;
}
.article-box .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-publications
 * -------------------------------- */
#publications {
	background-color: rgb(230,230,230);
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	padding: 20px 10% 0px 10%;
}
#publications h2 {
	text-align: left;
}
#publications p {
	text-align: left;
}
#flex2 {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex2 .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex2 .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex2 .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex2 .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box2 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box2:hover {
	opacity: 0.8;
}
.article-box2:nth-of-type(odd) {
	float: left;
}
.article-box2:nth-of-type(even) {
	float: right;
}
.article-box2 .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box2 .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box2 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box2 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-videos
 * -------------------------------- */
#videos {
	background-color: rgb(64,64,64);
	font-family: Arial, Helvetica, "sans-serif";
	color: #ffffff;
	height: 500px;
	padding: 20px 10% 0px 10%;
}
#videos h2 {
	text-align: left;
}
#videos p {
	text-align: left;
}
#flex3 {
	margin: 0px 5% 0px 5%;	
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex3 .box3 h3 {
	width: 400px;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #FFFFFF;
	background-color: rgb(64,64,64);
	text-align: center;
	border-color: #ffffff;
	border-style: solid;
	border-width: 0.5px;
}
#flex3 .box3 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex3 .box3 .image {
	height: 100%;
	width: 100%;
	border-left: 0.5px solid #ffffff;
	border-right: 0.5px solid #ffffff;
	border-bottom: 0.5px solid #ffffff;
}
#flex3 .box3 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box3 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box3:hover {
	opacity: 0.8;
}
.article-box3:nth-of-type(odd) {
	float: left;
}
.article-box3:nth-of-type(even) {
	float: right;
}
.article-box3 .title {
	margin-top: 30px;
	color: #ffffff;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box3 .desc {
	margin-top: 5px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box3 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box3 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-follow-me
 * -------------------------------- */
.follow_me {
	background-color: rgb(230,230,230);
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: rgb(0,66,102);
	height: 150px;
	padding: 20px 10% 0px 10%;
	border: 1px solid rgb(230,230,230);
}
.follow_me h2 {
	padding-top: 5px;
}
.follow-me {
	list-style: none;
	margin-left: 50px;
	overflow: hidden;
	padding: 0px;
}
.follow-me li {
	float: left;
	margin: 30px 40px 0px 0px;
	padding: 0;
}
.follow-me li a::before {
	background-color: #eee;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #333;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	height: 30px; /* Button height */
	line-height: 30px; /* Button height */
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	text-align: center;
	width: 30px; /* Button width */
}
.follow-me li a:hover::before {
	color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before,        { content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { content: "\f16b"; }
.follow-me li a[href*="facebook.com/realbluetechnologies"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/research-20210124.html"]::before       { content: "\f09a"; }	
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20210201.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220322.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220729.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20221011.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20230215.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20240119.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { content: "\f1e8"; }
.follow-me li a[href*="twitter.com/RealBlueTech"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/research-20210124.html]&text=[コロナの影響を受けた産業の考察]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20210201.html]&text=[Real Blue Technologies株式会社設立およびホームページ開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220322.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220729.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20221011.html]&text=[当ウェブサイトのご利用規約および個人情報の取り扱い改訂のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20230215.html]&text=[東京支店開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20240119.html]&text=[海外事業の先導に立てる人材育成オンライン講座のご案内]"]::before        { content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { content: "\f000"; font-family: blogicon; }

.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before,        { background-color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { background-color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { background-color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { background-color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { background-color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { background-color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { background-color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { background-color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { background-color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { background-color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { background-color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { background-color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { background-color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { background-color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { background-color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { background-color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { background-color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { background-color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { background-color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { background-color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { background-color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { background-color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { background-color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { background-color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { background-color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { background-color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { background-color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { background-color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { background-color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { background-color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { background-color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { background-color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { background-color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { background-color: #363636; }

/* --------------------------------
 * home-footer
 * -------------------------------- */
#footer {
	width: 100%;
	height: 300px;
	background-color: #000000;
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #ffffff;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	line-height: normal;
	letter-spacing: 0.1em;
	text-decoration: none;
	padding-left: 10%;
	border-top: 1px solid #000000;
	box-shadow: 1px 0 0 0 black;
	display:flex;
	flex-flow: row wrap;
}
#footer .copyright {
	width: 100%;
	text-align: left;
	height: 20px;
	order: 6;
	font-size:13px;
	padding-left: 0px;
}
#footer .footer1 {
	width: 100%;
	text-align: left;
	height: 10px;
	margin-top: 50px;
	padding-left: 0px;
	order: 1;
	font-size:13px;
}
#footer .footer2 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 2;
	font-size:13px;
}
#footer .footer3 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 3;
	font-size:13px;
}
#footer .footer4 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 4;
	font-size:13px;
}
#footer .footer5 {
	width: 100%;
	text-align: left;
	height: 40px;
	padding-left: 0px;
	order: 5;
}
#footer .copyright_english {
	width: 100%;
	text-align: left;
	height: 20px;
	order: 6;
	font-size:13px;
	padding-left: 0px;
}
#footer .footer6 {
	width: 100%;
	text-align: left;
	height: 15px;
	margin-top: 50px;
	padding-left: 0px;
	order: 1;
	font-size:13px;
}
#footer .footer7 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 2;
	font-size:13px;
}
#footer .footer8 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 3;
	font-size:13px;
}
#footer .footer9 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 4;
	font-size:13px;
}
#footer .footer10 {
	width: 100%;
	text-align: left;
	height: 40px;
	padding-left: 0px;
	order: 5;
	font-size:13px;
}
#footer a:link {
	color: #ffffff;
	text-decoration:none;
	clear: both;
}
#footer a:visited {
	color: #ffffff;
	text-decoration:none;
}
#footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* --------------------------------
 * section: top - about us
 * -------------------------------- */
#about-us {
	margin: 0px 10% 0px 10%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#cloud .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#cloud .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(0,44,72);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#cloud .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#cloud .desc {
	color: #ddc;
}

/* --------------------------------
 * section: message from ceo - about us
 * -------------------------------- */
#message {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#message:hover {
	opacity: 0.85;
}
#message .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(105,110,112);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#message .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#message .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#message .desc {
	color: #fff;
}

/* --------------------------------
 * section: slogan and purpose - about us
 * -------------------------------- */
#slogan-purpose {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#slogan-purpose:hover {
	opacity: 0.85;
}
#slogan-purpose .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#slogan-purpose .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(239,90,97);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#slogan-purpose .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#slogan-purpose .desc {
	color: #fff;
}

/* --------------------------------
 * section: profile - strategy
 * -------------------------------- */
#strategy {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#strategy:hover {
	opacity: 0.85;
}
#strategy .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(252,181,26);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#strategy .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#strategy .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#strategy .desc {
	color: #000;
}

/* --------------------------------
 * section: profile - about us
 * -------------------------------- */
#company-profile {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#company-profile:hover {
	opacity: 0.85;
}
#company-profile .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(193,200,194);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#company-profile .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#company-profile .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#company-profile .desc {
	color: #000;
}

/* --------------------------------
 * detailed pages of about us
 * -------------------------------- */
#section_slogan-and-purpose {
	margin: 0px 10% 0px 10%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_strategy {
	margin: 0px 10% 0px 10%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_profile {
	margin: 0px 10% 0px 10%;
	padding:0px;
/*	height: 1030px;*/
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.as-of-when {
	margin: 0px 0px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	font-weight: solid;
}
.column1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 150px;
	padding: 30px;
	width: 25%;
	float: left;
}
.mobi {
	display:none;		
}
.row1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 150px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	padding: 30px;
	width: 25%;
	float: left;
}
.row3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	padding: 30px;
	width: 75%;
	float: left;
}
.column4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 650px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 650px;
	padding-top: 15px;
	padding-left: 30px;
	width: 75%;
	float: left;
	padding-left:3.5em;
	text-indent:-1.3em;
}
.column6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: auto;
	float: left;
}

/* --------------------------------
 * products-and-services
 * -------------------------------- */
#products_and_services {
	margin: 0px 10% 0px 10%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#products_and_services .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#products_and_services .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#products_and_services .title {
	margin-top: 90px;
	margin-bottom: 15px;
	margin-left: 20px;
	margin-right: 20px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#products_and_services .desc {
	margin-left: 20px;
	margin-right: 20px;
	color: #fff;
}
#products_and_services p {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
}
#products_and_services .special {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
}
#flex4 {
	margin: 0px 0% 0px 0%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	overflow: scroll;
}
#flex4 .box {
	align-items: stretch;
	width: 280px;
	margin: 12.5px;
}
#flex4 .box .shashin{
	width: 280px;
	height:　200px;
	margin:　0px;	
	padding: 0px;
	border: solid 1px rgb(105,206,246);
	vertical-align: top;
}
#flex4 .box h3 {
	width: 280px;
	height: 0px;
	margin: 0px;
	padding: 30px 0px 10px 0px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: center;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
}
#flex4 .box p {
	width: 280px;
	height: 150px;
	margin: 0px 0px 0px 0px;
	padding: 30px 8px 0px 8px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
    line-height:25px;
}
/* --------------------------------
 * news
 * -------------------------------- */
#news {
	margin: 0px 10% 0px 10%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#news h2 {
	text-align: left;
}
#news p {
	margin-top: 0px;
	text-align: left;
}
#news .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#news .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(106,115,105);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#news .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#news .desc {
	color: #fff;
}
.special_notice2 {
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #fff;
	margin: 10px 20% 10px 20%;
	height:400px;
}
.special_notice2 .image {
	max-width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.special_notice2 h2{
	text-align: left;
}
.special_notice2 p{
	text-align: left;
}
.heading2 {
	padding: 10px 12px;
	background: url('images/bg-slash.gif');
	letter-spacing: 1px;
	font-size: 1.6rem;
}
#pick_up_contents2 {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 10px 20% 10px 20%;
	overflow:scroll;
}
#pick_up_contents2 h2{
	text-align: left;
}
#pick_up_contents2 p{
	text-align: left;
}
.scroll-list2 {
	margin-top: 30px;
	max-height: 500px;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list2 .scroll-item2 a {
	display: block;
	padding: 10px 15px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list2 .scroll-item2:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list2 .scroll-item2 a:hover {
	background-color: #fafaf8;
}
.scroll-list2 .date2 {
	display: inline-block;
	width: 19%;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
}
.scroll-list2 .category2 {
	display: inline-block;
	width: 8%;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 12px;
	line-height: 16px;
}
.scroll-list2 .category2.news2 {
	background-color: #2c3c53;
}
.scroll-list2 .title2 {
	display: inline-block;
	width: 73%;
	padding-left: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

/* --------------------------------
 * publications-and-videos
 * -------------------------------- */
#publications-and-videos-overall {
	margin: 0px 10% 0px 10%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#publications-and-videos-overall h2 {
	text-align: left;
}
#publications-and-videos-overall p {
	margin-top: 0px;
	text-align: left;
}
#publications-and-videos-overall .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#publications-and-videos-overall .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(0,0,0);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#publications-and-videos-overall .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#publications-and-videos-overall .desc {
	color: #ddc
}

/* --------------------------------
 * publications-and-videos-item
 * -------------------------------- */
#publications-and-videos {
	margin: 0px 10% 0px 10%;
	height: 500px;
}
.item {
	width: 180px;
	margin-bottom: 4px;
	padding: 8px;
	border-bottom: 3px solid;
	border-radius: 5px;
	background-color: #fff;
}
.item .image {
	display: block;
	width: 100%;
	height: 109px;
}
.item .category {
	margin: 15px 9px 10px;
	color: #aaa;
	letter-spacing: 1px;
	font-family: "Trebuchet MS", "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
.item .category::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 5px;
	border: 2px solid;
	border-radius: 50%;
	vertical-align: -5px;
}
.item .description {
	margin: 10px;
	line-height: 1.5;
}
.item > a {
	display: block;
	margin: -8px -8px -11px;
	padding: 8px 8px 11px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
}
.item > a:hover {
	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
}
.item-maindish,
.item-maindish .category::before {
	border-color: #FFC0CB;
}
.item-appetizer,
.item-appetizer .category::before {
	border-color: #76C047;
}
.item-column,
.item-column .category::before {
	border-color: #FFF100;
}
.item-breaktime,
.item-breaktime .category::before {
	border-color: #C1EFFF;
}
.item-m {
	width: 364px;
}
.item-m .image {
	height: 146px;
}
.item-l {
	width: 732px;
}
.item-l .image {
	height: 403px;
}

/* --------------------------------
 * contact_form
 * -------------------------------- */
#section_contact_form {
	margin: 0px 10% 0px 10%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_contact_form .button {
	text-align: center;
}
#section_contact_form .button {
	text-align: center;
}
#disclaimer {
	margin: 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: rgb(236,247,251);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	height: 600px;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
#disclaimer li {
	padding: 0px 10% 0px 10%;
}
#blue {
    margin: 0px;
	width: 100%;
    border: 1px solid rgb(161,171,170);
}
table tbody tr th {
	padding-right: 20px;
	color: black;
	text-align: right;
	border: none;
	background-color: #ffffff;
	width: 35%;
}
table tbody tr td {
	padding: 10px;
	text-align: left;
	border: none;
	background-color: #ffffff;
	width: 65%;
	height: 40px;
}
table {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	height:950px;
	margin: 1px;
}
#textfield{
	text-align: left;
}
#item1{
    border: 1px solid rgb(161,171,170);
}
#item2{
    border: 1px solid rgb(161,171,170);
}
#item3{
    border: 1px solid rgb(161,171,170);
}
#item4{
    border: 1px solid rgb(161,171,170);
}
#textfield1{
	text-align: left;
	width:90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textarea{
	text-align: left;
	width:90%;
	height: 400px;
    border: 1px solid rgb(161,171,170);
	padding-top:10px;
	padding-left:10px;
}
#text-count {
   display: block;
   text-align: right;
   margin-top:10px;
   margin-right:10%;
}
#text-count.over {
   font-weight: bold;
   color: #c90000;
}
#textfield2{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield3{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield4{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield5{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield6{
	text-align: left;
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textfield7{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#email{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#email_check{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#tel{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#submit{
	float: center;
	margin: 0px 10px 0px 10px;
	padding: 10px 0px 10px 0px;
	font-size:　15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
#reset{
	float: center;
	margin-left: 10px;
	margin-right: 10px;	
	font-size:15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
.maintitle {
	height: 50px;
	font-color: white;
	margin: 20px 10% 0px 10%;
}
.maintitle h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 60% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease {
	margin: 0px 10% 0px 10%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#pressrelease .image {
	float: left;
	width: 50%;
	height: 300px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#pressrelease .content {
	float: left;
	width: 50%;
	height: 300px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#pressrelease .title {
	margin-top: 90px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#pressrelease .desc {
	color: #fff;
}
.maintitle_pressrelease {
	height: 50px;
	font-color: white;
	margin: 20px 20% 0px 20%;
}
.maintitle_pressrelease h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 60% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle_pressrelease h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease h4 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
}
#pressrelease h3 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: bold;
	text-align: center;
}
#pressrelease p {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: left;
	line-height: 25px;
}
#pressrelease .right{
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: right;
}
.share {
	margin: 0px 0px 0px 0px;
	padding:0px;
	height: 200px;
	flex-direction: column;
	background-color: #ffffff;
}
.btn-twitter {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #55acee;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  height:40px;
  width:5%;
  float:left;
}
.btn-twitter::after {
  position: absolute;
  content: '\f099';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  float:left;
}
.btn-facebook {
  display: inline-block;
  padding: .6em .8em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #315096;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  float:left;
}
.btn-facebook::after {
  position: absolute;
  content: '\f09a';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}
.btn-line {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #1dcd00;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  clear:both;
}
.btn-line::after {
  position: absolute;
  content: "\f3c0";
  font-family: 'Font Awesome 5 Brands';
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: 400;
}
.each-page-image {
	margin: 10px 10% 0px 10%;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.each-page-image .image {
	width: 100%;
	height: auto;
}
.section_message {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	height: 1200px;
	background-color: white;
	margin: 0px 10% 0px 10%;
}
.section_message_responsive {
	display: none;
}
.subtitle {
	font-size: 18px;
	width: 960px;
	height: 20px;
	background-color: white;
	color: black;
}
.message {
	width: 80%;
	height: 1100px;
	margin: 0px;
	border: 0px white solid;
	padding-left: 30px;
	padding-right: 20px;
	background-color: white;
	text-align: justify;
	float: right;
	overflow: scroll;
	letter-spacing: 0px;
	line-height:30px;
}
.comment {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	margin: 10px 10% 0px 10%;
	letter-spacing: 0px;
	line-height:30px;
}
.navi {
	width: 20%;
	height: 1000px;
	background-color: white;
	float: right;
	padding-left:20px;
}
.picture {
	width: 80%;
	height: auto;
}
.adjustment {
	width: 80%;
	height: 20px;
	backgroud-color: white;
	text-align: right;
	float: right;
}

/* --------------------------------
 * paragraph
 * -------------------------------- */
.table_of_contents {
	margin: 0px 10% 0px 10%;
	padding:0px;
	background-color: #ffffff;
	font-size: 15px;
}
#terms_of_services {
	margin: 0px 10% 0px 10%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#terms_of_services2 {
	margin: 0px 10% 0px 10%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#privacy_policy {
	margin: 0px 10% 0px 10%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.paragraph {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph li {
	padding: 0px 60px 0px 50px;
}
.paragraph2 {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph2 li {
	padding: 0px 60px 0px 50px;
}
.paragraph3 {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph3 li {
	padding: 0px 60px 0px 50px;
}

.migiyose {
	margin-right:60px;
	text-align:right;
}
.first_indent {
	padding-left: 1.4em;
	text-indent:  -1.4em;
}
.second_indent {
	padding-left: 4em;
	text-indent: -1.4em;
}
.third_indent {
	padding-left: 6em;
	text-indent: -1.4em;
}
.fourth_indent {
	padding-left: 8em;
	text-indent: -1.4em;
}
.fifth_indent {
	font-size: 15px;
	padding-left: 1.4em;
	text-indent: -1.4em;
	margin: 0px 5% 0px 15%;
}
.maintitle2 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 25px;
}
.maintitle2 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 8% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle3 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 85px;
}
.maintitle3 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(196,194,190);
	position: relative;
	margin: 0px 9% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle5 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 0px;
}
.maintitle5 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	padding-bottom: 5px;
}
.bar2 {
	height: 30px;
	color: black;
	margin: 0px 0px 0px 10%;
	vertical-align: baseline;
	float: left;
	width: 30%;
}
.bar2 p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar2 p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar2 p a:link {
	color: black;
	text-decoration: none;
}
.bar2 p a:visited {
	color: black;
	text-decoration: none;
}
.bar2 p a:hover {
	color: black;
	text-decoration: underline;
}
.page_top {
	height: 30px;
	color: black;
	margin: 0px 10% 0px 0px;
	vertical-align: baseline;
	float: right;
	width: 20%;
	text-align:right;
}
.page_top p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(122,137,135);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.page_top p .bold{
	font-weight: bold;
	color: rgb(122,137,135);
}
.page_top p a:link {
	color: black;
	text-decoration: none;
}
.page_top p a:visited {
	color: black;
	text-decoration: none;
}
.page_top p a:hover {
	color: black;
	text-decoration: underline;
}
}

@media (min-width : 500px ) and ( max-width : 768px ){
html {
	font-size: 62.5%;
}
body {
	color: #333;
	font-size: 1.2rem;
	font-family: Arial, Helvetica, "sans-serif";
	overflow: scroll;
}
*, *::before, *::after {
	box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
	color: #d03c56;
	text-decoration: none;
}
.title_bar {
	margin: 0px 5% 0px 5%;
	font-family: Arial, Helvetica, "sans-serif";
	font-size:12px;
	font-wieght:bold;
}
.uppercase {
	vertical-align: super;
	font-size:10px;
}
.blank {
	background-color: white;
	height: 20px;
	margin: 0px 0px 0px 0px;
}
.bar {
	height: 30px;
	color: black;
	margin: 0px 5% 0px 5%;
	vertical-align: baseline;
}
.bar p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar p a:link {
	color: black;
	text-decoration: none;
}
.bar p a:visited {
	color: black;
	text-decoration: none;
}
.bar p a:hover {
	color: black;
	text-decoration: underline;
}
.linkage a:link {
	color: #000000;
	text-decoration:none;
}
.linkage a:visited {
	color: #000000;
	text-decoration:none;
}
.linkage a:hover {
	color: #000000;
	text-decoration: underline;
}
.kesu {
		overflow:hidden;
}

/* --------------------------------
 * home-header
 * -------------------------------- */
#header {
	width: 100%;
	height: 70px;
	padding-top:10px;
	padding-bottom:10px;
	background-color: rgb(255,255,255);
}

/* --------------------------------
 * home-header-hamburger
 * -------------------------------- */
#nav-drawer {
	font-color: rgb(37,62,107);	
	width: 10%;
	text-align: center;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
/*ヘッダーまわりはサイトに合わせて調整してください*/
#nav-drawer {
	position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
	display: none;
	text-align: left;
	padding-left: 420px;
}
.nav-unshown a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 30px;
	height: 22px;
	vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	border-radius: 3px;
	background: rgb(37,62,107);
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	background: url('images/asset-about-us-portrait.png') fixed;
	background-size: 100% auto;
	background-repeat: no-repeat;
	overflow: hidden;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 410px;/*最大幅（調整してください）*/
	height: 100%;
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	box-shadow: -100px solid white;
}
#nav-content {
	width: 100%
}
#nav-content .background-color {
	width: 100%;
	height: 100%;
	background-color: rgba(0,94,132,0.8);
	overflow: scroll;
	padding: 0px;
	margin: 0px;
}
#indent li {
	list-style-type: none;		/*リストマーカー無しにする*/
	color: #ffffff;			/*文字色*/
	text-decoration: none;		/*リンク部分を下線無しにする*/
	margin: 0px;
	padding: 0px;
}
#indent .first {
	text-align: left;
}
#indent .second {
	text-align: left;
	margin-left: 100px;
	margin-bottom: 0px;
}
#indent .footer {
	text-align: left;
}
#indent .copyright {
	text-align: left;
	letter-spacing: 0.3;
}
#indent li a:link {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:visited {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
hr {
	clear: both;		/*フロート配置をクリアする*/
	max-width: 100%;		/*幅の指定*/
	margin-top: 10px; 
	margin-right: 30px;   /*マージン*/
	border: 1px solid #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#hoge {
	display:none;
}

/* --------------------------------
 * home-header-hamburger-closure button
 * -------------------------------- */
.dli-close {
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	line-height: 1;
	width: 1em;
	height: 0.1em;
	background: currentColor;
	border-radius: 0.1em;
	position: relative;
	transform: rotate(45deg);
	font-size: 33px;
	opacity: 1;
}
.dli-close::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}

/* --------------------------------
 * home-header-continuing
 * -------------------------------- */
#header .dummy {
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
#header .Company_Name {
	font-family: wigwag-bold, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: center;
	width: 60%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 20px;
	text-indent: 0px;
}
#company_logo {
	width: 25px; 
	height: 25px;
}
#header .Language {
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: right;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#header .Contact_Us {
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: left;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#mail_icon {
	margin-top: 5px;
	width: 30px;
	height: 30px;
}
#header a:link {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:visited {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:hover {
	color:rgb(37,62,107); 
	text-decoration:none;
}

/* --------------------------------
 * home-menu
 * -------------------------------- */
#menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	clear: both;
}
.direction_ltr {
	display: flex;
	flex-direction: row;
	direction: ltr;
}
.direction_rtl {
	display: none;
}
#dropmenu{
	font-family: Arial, Helvetica, "sans-serif";
	list-style-type: none;
	max-width: 100%;
	height: 40px;
	margin: 0px auto 0px;
	padding: 0px;
	background: #fff;
	border-bottom: 0px solid rgb(57,137,192);
	border-radius: 3px 3px 0 0;
	float: left;
	position: absolute;
	left: 0%;
	right: 0%;
	z-index: 10;
	display: inline-block;
}
#dropmenu li{
	position: relative;
	width: 20%;
	float: left;
	margin: 0 0% 0 0%;
	padding: 0 0 0 0;
	text-align: center;
	z-index: 10;
}
#dropmenu li a{
	display: block;
	margin: 0px;
	padding: 15px 0px 15px 0px;
	color: #666;
	font-size: 14px;
	font-weight: normal;
	line-height: 1;
	text-decoration: none;
	border-radius: 0px;
	transition: 0.15s;
}
#dropmenu .active > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu li:hover > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu > li:hover > a{
	border-radius: 0px;
}
#dropmenu li ul{
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	border-radius: 0px;
}
#dropmenu li:last-child ul{
	left: -100%;
	width: 100%
}
#dropmenu li ul li{
	overflow: hidden;
	width: 200%;
	height: 0;
	color: #fff;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
#dropmenu li ul li a{
	margin: 0 0% 0 0%;
	padding: 13px 15px;
	background: rgb(222,230,228);
	text-align: left;
	font-size: 12px;
	font-weight: normal;
}
#dropmenu li:hover ul li{
	overflow: visible;
	height: 38px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#dropmenu li:hover ul li:first-child{
	border-top: 0;
}
#dropmenu li:hover ul li:last-child{
	border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
	border-radius: 0px;
}

/* --------------------------------
 * home-slide-show
 * -------------------------------- */
#slick {
	margin: 10px 5% 0px 5%;
}
#slick　.slick1{
	width: 100%;
	height: auto;
	margin: 10px auto;
	padding: 10px 10px;
}
#slick .image {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0px;
	text-align: center;
}

/* --------------------------------
 * home-special-notice
 * -------------------------------- */
.special_notice {
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #fff;
	margin: 0px 5% 0px 5%;
}
.scroll_list{
  margin: 0px 0px 0px 0px;
  padding: 0;
  width: 90%;  /* コンテンツが見切れて見えるようにする */
  overflow-x: auto;  /* 横スクロールの指定 */
  white-space: nowrap;  /* 横スクロールの指定 */
  overflow-scrolling: touch;  /* スクロールを滑らかにする */
  -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
}
.scroll_list li{
  display: inline-block;  /* 横並びにする指定 */
  list-style: none;
  height: auto;  /* 横スクロールする範囲の高さを指定 */
}
.scroll-list {
	margin-top: 30px;
	max-height: 500px;
	width: 100%;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list .scroll-item a {
	display: block;
	padding: 10px 10px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list .scroll-item:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list .scroll-item a:hover {
	background-color: #fafaf8;
}
.scroll-list .date {
	display: inline-block;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
	line-height: 16px;
}
.scroll-list .category {
	display: inline-block;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: 16px;
}
.scroll-list .category.news {
	background-color: #2c3c53;
}
.scroll-list .title {
	display: inline-block;
	padding-top: 15px;	
	padding-bottom: 5px;	
	padding-left: 50px;
	width: 600px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:  13px;
	line-height: 16px;
}

/* --------------------------------
 * home-pick-up-contents
 * -------------------------------- */
#pick_up_contents {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 0px 5% 0px 5%;
	overflow: none;
}
#pick_up_contents h2{
	text-align: left;
}
#pick_up_contents p{
	text-align: left;
}
#flex {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}

/* --------------------------------
 * pick-up-contents-parts
 * -------------------------------- */
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
.heading {
	padding: 10px 12px;
	background: url('../images/bg-slash.gif');
	letter-spacing: 1px;
	font-size: 1.6rem;
}
.hidden {
	display: none;
}

/* --------------------------------
 * pick-up-contents-header
 * -------------------------------- */
.article-box {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box:hover {
	opacity: 0.8;
}
.article-box:nth-of-type(odd) {
	float: left;
}
.article-box:nth-of-type(even) {
	float: right;
}
.article-box .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-publications
 * -------------------------------- */
#publications {
	background-color: rgb(230,230,230);
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	padding: 20px 5% 0px 5%;
}
#publications h2 {
	text-align: left;
}
#publications p {
	text-align: left;
}
#flex2 {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex2 .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex2 .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex2 .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex2 .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box2 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box2:hover {
	opacity: 0.8;
}
.article-box2:nth-of-type(odd) {
	float: left;
}
.article-box2:nth-of-type(even) {
	float: right;
}
.article-box2 .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box2 .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box2 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box2 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-videos
 * -------------------------------- */
#videos {
	background-color: rgb(64,64,64);
	font-family: Arial, Helvetica, "sans-serif";
	color: #ffffff;
	height: 500px;
	padding: 20px 5% 0px 5%;
}
#videos h2 {
	text-align: left;
}
#videos p {
	text-align: left;
}
#flex3 {
	margin: 0px 5% 0px 5%;	
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex3 .box3 h3 {
	width: 400px;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #FFFFFF;
	background-color: rgb(64,64,64);
	text-align: center;
	border-color: #ffffff;
	border-style: solid;
	border-width: 0.5px;
}
#flex3 .box3 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex3 .box3 .image {
	height: 100%;
	width: 100%;
	border-left: 0.5px solid #ffffff;
	border-right: 0.5px solid #ffffff;
	border-bottom: 0.5px solid #ffffff;
}
#flex3 .box3 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box3 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box3:hover {
	opacity: 0.8;
}
.article-box3:nth-of-type(odd) {
	float: left;
}
.article-box3:nth-of-type(even) {
	float: right;
}
.article-box3 .title {
	margin-top: 30px;
	color: #ffffff;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box3 .desc {
	margin-top: 5px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box3 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box3 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-follow-me
 * -------------------------------- */
.follow_me {
	background-color: rgb(230,230,230);
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: rgb(0,66,102);
	height: 150px;
	padding: 20px 5% 0px 5%;
	border-bottom: 1px solid rgb(230,230,230);
}
.follow_me h2 {
	padding-top: 5px;
}
.follow-me {
	list-style: none;
	margin-left: 50px;
	overflow: hidden;
	padding: 0px;
}
.follow-me li {
	float: left;
	margin: 30px 40px 0px 0px;
	padding: 0;
}
.follow-me li a::before {
	background-color: #eee;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #333;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	height: 30px; /* Button height */
	line-height: 30px; /* Button height */
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	text-align: center;
	width: 30px; /* Button width */
}
.follow-me li a:hover::before {
	color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before,        { content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { content: "\f16b"; }
.follow-me li a[href*="facebook.com/realbluetechnologies"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/research-20210124.html"]::before       { content: "\f09a"; }	
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20210201.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220322.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220729.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20221011.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20230215.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20240119.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { content: "\f1e8"; }
.follow-me li a[href*="twitter.com/RealBlueTech"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/research-20210124.html]&text=[コロナの影響を受けた産業の考察]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20210201.html]&text=[Real Blue Technologies株式会社設立およびホームページ開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220322.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220729.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20221011.html]&text=[当ウェブサイトのご利用規約および個人情報の取り扱い改訂のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20230215.html]&text=[東京支店開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20240119.html]&text=[海外事業の先導に立てる人材育成オンライン講座のご案内]"]::before        { content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { content: "\f000"; font-family: blogicon; }

.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before,        { background-color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { background-color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { background-color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { background-color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { background-color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { background-color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { background-color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { background-color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { background-color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { background-color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { background-color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { background-color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { background-color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { background-color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { background-color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { background-color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { background-color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { background-color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { background-color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { background-color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { background-color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { background-color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { background-color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { background-color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { background-color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { background-color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { background-color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { background-color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { background-color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { background-color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { background-color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { background-color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { background-color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { background-color: #363636; }

/* --------------------------------
 * home-footer
 * -------------------------------- */
#footer {
	width: 100%;
	height: 300px;
	background-color: #000000;
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #ffffff;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	line-height: normal;
	letter-spacing: 0.1em;
	text-decoration: none;
	padding-left: 5%;
	border-top: 1px solid #000000;
	display:flex;
	flex-flow: row wrap;
}
#footer .copyright {
	width: 100%;
	text-align: left;
	height: 20px;
	order: 6;
	font-size:13px;
	padding-left: 0px;
}
#footer .footer1 {
	width: 100%;
	text-align: left;
	height: 10px;
	margin-top: 50px;
	padding-left: 0px;
	order: 1;
	font-size:13px;
}
#footer .footer2 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 2;
	font-size:13px;
}
#footer .footer3 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 3;
	font-size:13px;
}
#footer .footer4 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 4;
	font-size:13px;
}
#footer .footer5 {
	width: 100%;
	text-align: left;
	height: 40px;
	padding-left: 0px;
	order: 5;
}
#footer .copyright_english {
	width: 100%;
	text-align: left;
	height: 20px;
	order: 6;
	font-size:13px;
	padding-left: 0px;
}
#footer .footer6 {
	width: 100%;
	text-align: left;
	height: 15px;
	margin-top: 50px;
	padding-left: 0px;
	order: 1;
	font-size:13px;
}
#footer .footer7 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 2;
	font-size:13px;
}
#footer .footer8 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 3;
	font-size:13px;
}
#footer .footer9 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 4;
	font-size:13px;
}
#footer .footer10 {
	width: 100%;
	text-align: left;
	height: 40px;
	padding-left: 0px;
	order: 5;
	font-size:13px;
}
#footer a:link {
	color: #ffffff;
	text-decoration:none;
	clear: both;
}
#footer a:visited {
	color: #ffffff;
	text-decoration:none;
}
#footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* --------------------------------
 * section: top - about us
 * -------------------------------- */
#about-us {
	margin: 0px 0% 0px 0%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#cloud .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#cloud .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(0,44,72);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#cloud .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#cloud .desc {
	color: #ddc;
}

/* --------------------------------
 * section: message from ceo - about us
 * -------------------------------- */
#message {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#message:hover {
	opacity: 0.85;
}
#message .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(105,110,112);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#message .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#message .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#message .desc {
	color: #fff;
}

/* --------------------------------
 * section: slogan and purpose - about us
 * -------------------------------- */
#slogan-purpose {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#slogan-purpose:hover {
	opacity: 0.85;
}
#slogan-purpose .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#slogan-purpose .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(239,90,97);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#slogan-purpose .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#slogan-purpose .desc {
	color: #fff;
}

/* --------------------------------
 * section: profile - strategy
 * -------------------------------- */
#strategy {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#strategy:hover {
	opacity: 0.85;
}
#strategy .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(252,181,26);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#strategy .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#strategy .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#strategy .desc {
	color: #000;
}

/* --------------------------------
 * section: profile - about us
 * -------------------------------- */
#company-profile {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#company-profile:hover {
	opacity: 0.85;
}
#company-profile .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(193,200,194);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#company-profile .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#company-profile .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#company-profile .desc {
	color: #000;
}

/* --------------------------------
 * detailed pages of about us
 * -------------------------------- */
#section_slogan-and-purpose {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_strategy {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_profile {
	margin: 0px 0% 0px 0%;
	padding:0px;
/*	height: 1100px;*/
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.as-of-when {
	margin: 0px 0px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	font-weight: solid;
}
.column1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 180px;
	padding: 30px;
	width: 25%;
	float: left;
}
.mobi {
	display:none;		
}
.row1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 180px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	padding: 30px;
	width: 25%;
	float: left;
}
.row3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	padding: 30px;
	width: 75%;
	float: left;
}
.column4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 730px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 730px;
	padding-top: 15px;
	padding-left: 30px;
	padding-right: 30px;
	width: 75%;
	float: left;
	padding-left:3.0em;
	text-indent:-1.3em;
}
.column6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding: 30px;
	width: 25%;
	float: left;
}
.row6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding: 30px;
	width: 75%;
	float: left;
}
.column7 {
	clear: both;
}
/* --------------------------------
 * products-and-services
 * -------------------------------- */
#products_and_services {
	margin: 0px 0% 0px 0%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#products_and_services .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#products_and_services .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#products_and_services .title {
	margin-top: 30px;
	margin-bottom: 15px;
	margin-left: 5px;
	margin-right: 5px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#products_and_services .desc {
	margin-left: 5px;
	margin-right: 5px;
	color: #fff;
}
#products_and_services p {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
}
#products_and_services .special {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
	margin: 0px 5% 0px 5%;
}

#flex4 {
	margin: 0px 0% 0px 0%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: scroll;
}
#flex4 .box {
	align-items: stretch;
	width: 280px;
	margin:10px;
}
#flex4 .box .shashin{
	width: 280px;
	height:　200px;
	margin:　0px;	
	padding: 0px;
	border: solid 1px rgb(105,206,246);
	vertical-align:top;
}
#flex4 .box h3 {
	width: 280px;
	height: 0px;
	margin: 0px;
	padding: 30px 0px 10px 0px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: center;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
}
#flex4 .box p {
	width: 280px;
	height: 150px;
	margin: 0px 0px 0px 0px;
	padding: 30px 8px 0px 8px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
    line-height:25px;
}
/* --------------------------------
 * news
 * -------------------------------- */
#news {
	margin: 0px 0% 0px 0%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#news h2 {
	text-align: left;
}
#news p {
	margin-top: 0px;
	text-align: left;
}
#news .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#news .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(106,115,105);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#news .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#news .desc {
	color: #fff;
}
#pick_up_contents2 {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 10px 5% 10px 5%;
	overflow:scroll;
}
#pick_up_contents2 h2{
	text-align: left;
}
#pick_up_contents2 p{
	text-align: left;
}
.scroll-list2 {
	margin-top: 30px;
	max-height: 500px;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list2 .scroll-item2 a {
	display: block;
	padding: 10px 15px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list2 .scroll-item2:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list2 .scroll-item2 a:hover {
	background-color: #fafaf8;
}
.scroll-list2 .date2 {
	display: inline-block;
	width: 19%;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
}
.scroll-list2 .category2 {
	display: inline-block;
	width: 8%;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 12px;
	line-height: 16px;
}
.scroll-list2 .category2.news2 {
	background-color: #2c3c53;
}
.scroll-list2 .title2 {
	display: inline-block;
	width: 73%;
	padding-left: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

/* --------------------------------
 * publications-and-videos
 * -------------------------------- */
#publications-and-videos-overall {
	margin: 0px 0% 0px 0%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#publications-and-videos-overall h2 {
	text-align: left;
}
#publications-and-videos-overall p {
	margin-top: 0px;
	text-align: left;
}
#publications-and-videos-overall .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#publications-and-videos-overall .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(0,0,0);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#publications-and-videos-overall .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#publications-and-videos-overall .desc {
	color: #ddc
}

/* --------------------------------
 * publications-and-videos-item
 * -------------------------------- */
#publications-and-videos {
	margin: 0px 5% 0px 5%;
	height: 500px;
}
.item {
	width: 180px;
	margin-bottom: 4px;
	padding: 8px;
	border-bottom: 3px solid;
	border-radius: 5px;
	background-color: #fff;
}
.item .image {
	display: block;
	width: 100%;
	height: 109px;
}
.item .category {
	margin: 15px 9px 10px;
	color: #aaa;
	letter-spacing: 1px;
	font-family: "Trebuchet MS", "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
.item .category::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 5px;
	border: 2px solid;
	border-radius: 50%;
	vertical-align: -5px;
}
.item .description {
	margin: 10px;
	line-height: 1.5;
}
.item > a {
	display: block;
	margin: -8px -8px -11px;
	padding: 8px 8px 11px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
}
.item > a:hover {
	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
}
.item-maindish,
.item-maindish .category::before {
	border-color: #FFC0CB;
}
.item-appetizer,
.item-appetizer .category::before {
	border-color: #76C047;
}
.item-column,
.item-column .category::before {
	border-color: #FFF100;
}
.item-breaktime,
.item-breaktime .category::before {
	border-color: #C1EFFF;
}
.item-m {
	width: 364px;
}
.item-m .image {
	height: 146px;
}
.item-l {
	width: 732px;
}
.item-l .image {
	height: 403px;
}

/* --------------------------------
 * contact_form
 * -------------------------------- */
#section_contact_form {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height:2300px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_contact_form .button {
	text-align: center;
}
#section_contact_form .button {
	text-align: center;
}
#disclaimer {
	margin: 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: rgb(236,247,251);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	height: 700px;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
#disclaimer li {
	padding: 0px 5% 0px 5%;
}
#blue {
    margin: 0px;
	width: 100%;
    border: 1px solid rgb(161,171,170);
}
table tbody tr th,
table tbody tr td {
　  width: 100%;
	display: block;
	float: center;
}
table tbody tr th {
	padding-left: 20px;
	color: black;
	text-align: left;
	border: none;
	background-color: #ffffff;
	width: 300px;
}
table tbody tr td {
	padding: 10px;
	text-align: left;
	border: none;
	background-color: #ffffff;
	width: 100%;
	height: 40px;
}
table {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	margin-left: auto;
	margin-right: 0%;
	border-collapse: collapse;
	height: 1300px;
	margin: 1px;
}
#textfield{
	text-align: left;
}
#item1{
    border: 1px solid rgb(161,171,170);
}
#item2{
    border: 1px solid rgb(161,171,170);
}
#item3{
    border: 1px solid rgb(161,171,170);
}
#item4{
    border: 1px solid rgb(161,171,170);
}
#textfield1{
	text-align: left;
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textarea{
	text-align: left;
	width: 90%;
	height: 400px;
    border: 1px solid rgb(161,171,170);
	padding-top: 10px;
	padding-left: 10px;
}
#text-count {
   display: block;
   text-align: right;
   margin-top: 10px;
   margin-right: 10%;
}
#text-count.over {
   font-weight: bold;
   color: #c90000;
}
#textfield2{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#otoiawase {
	height: 500px;	
}
#textfield3{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield4{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield5{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield6{
	text-align: left;
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield7{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#email{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#email_check{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#tel{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#submit{
	float: center;
	margin: 0 20% 5% 20%;
	padding: 10px 0px 10px 0px;
	font-size:　15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
#reset{
	float: center;
	margin: 0 20% 0 20%;
	font-size:15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
.maintitle {
	height: 50px;
	font-color: white;
	margin: 20px 5% 0px 5%;
}
.maintitle h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 60% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#pressrelease .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#pressrelease .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#pressrelease .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#pressrelease .desc {
	color: #fff;
}
.maintitle_pressrelease {
	height: 50px;
	font-color: white;
	margin: 20px 5% 0px 5%;
}
.maintitle_pressrelease h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 60% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle_pressrelease h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease h4 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
}
#pressrelease h3 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: bold;
	text-align: center;
}
#pressrelease p {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: left;
	line-height: 25px;
}
#pressrelease .right{
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: right;
}
.share {
	margin: 0px 0px 0px 0px;
	padding:0px;
	height: 200px;
	flex-direction: column;
	background-color: #ffffff;
}
.btn-twitter {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #55acee;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  height:40px;
  width:5%;
  float:left;
}
.btn-twitter::after {
  position: absolute;
  content: '\f099';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  float:left;
}
.btn-facebook {
  display: inline-block;
  padding: .6em .8em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #315096;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  float:left;
}
.btn-facebook::after {
  position: absolute;
  content: '\f09a';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}
.btn-line {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #1dcd00;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  clear:both;
}
.btn-line::after {
  position: absolute;
  content: "\f3c0";
  font-family: 'Font Awesome 5 Brands';
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: 400;
}
.each-page-image {
	margin: 10px 5% 0px 5%;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.each-page-image .image {
	width: 100%;
	height: auto;
}
.section_message {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	height: 1200px;
	background-color: white;
	margin: 0px 5% 0px 5%;
}
.section_message_responsive {
	display: none;
}
.subtitle {
	font-size: 18px;
	width: 960px;
	height: 20px;
	background-color: white;
	color: black;
}
.message {
	width: 70%;
	height: 1200px;
	margin: 0px;
	border: 0px white solid;
	padding-left: 30px;
	padding-right: 20px;
	background-color: white;
	text-align: justify;
	float: right;
	overflow: scroll;
	letter-spacing: 0px;
	line-height:30px;
}
.comment {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	margin: 10px 5% 0px 5%;
	letter-spacing: 0px;
	line-height:30px;
}
.navi {
	width: 30%;
	height: 1000px;
	background-color: white;
	float: right;
	padding-left:20px;
}
.picture {
	width: 80%;
	height: auto;
}
.adjustment {
	width: 80%;
	height: 20px;
	backgroud-color: white;
	text-align: right;
	float: right;
}

/* --------------------------------
 * paragraph
 * -------------------------------- */
.table_of_contents {
	margin: 0px 5% 0px 5%;
	padding:0px;
	background-color: #ffffff;
	font-size: 15px;
}
#terms_of_services {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#terms_of_services2 {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#privacy_policy {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.paragraph {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph li {
	padding: 0px 60px 0px 50px;
}
.paragraph2 {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph2 li {
	padding: 0px 60px 0px 50px;
}
.paragraph3 {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1em;
	text-indent:-1.4em;
}
.paragraph3 li {
	padding: 0px 60px 0px 50px;
}

.migiyose {
	margin-right:60px;
	text-align:right;
}
.first_indent {
	padding-left: 1.4em;
	text-indent:  -1.4em;
}
.second_indent {
	padding-left: 4em;
	text-indent: -1.4em;
}
.third_indent {
	padding-left: 6em;
	text-indent: -1.4em;
}
.fourth_indent {
	padding-left: 8em;
	text-indent: -1.4m;
}
.fifth_indent {
	font-size: 15px;
	padding-left: 1.4em;
	text-indent: -1.4em;
	margin: 0px 5% 0px 15%;
}
.maintitle2 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 25px;
}
.maintitle2 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 8% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle3 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 85px;
}
.maintitle3 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(196,194,190);
	position: relative;
	margin: 0px 9% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle5 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 0px;
}
.maintitle5 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	padding-bottom: 5px;
}
.bar2 {
	height: 30px;
	color: black;
	margin: 0px 0px 0px 5%;
	vertical-align: baseline;
	float: left;
	width: 70%;
}
.bar2 p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar2 p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar2 p a:link {
	color: black;
	text-decoration: none;
}
.bar2 p a:visited {
	color: black;
	text-decoration: none;
}
.bar2 p a:hover {
	color: black;
	text-decoration: underline;
}
.page_top {
	height: 30px;
	color: black;
	margin: 0px 5% 0px 0px;
	vertical-align: baseline;
	float: right;
	width: 30%;
	text-align:right;
}
.page_top p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(122,137,135);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.page_top p .bold{
	font-weight: bold;
	color: rgb(122,137,135);
}
.page_top p a:link {
	color: black;
	text-decoration: none;
}
.page_top p a:visited {
	color: black;
	text-decoration: none;
}
.page_top p a:hover {
	color: black;
	text-decoration: underline;
}
}

@media ( min-width : 351px ) and (max-width : 499px ){
html {
	font-size: 62.5%;
}
body {
	color: #333;
	font-size: 1.2rem;
	font-family: Arial, Helvetica, "sans-serif";
	overflow: scroll;
}
*, *::before, *::after {
	box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
	color: #d03c56;
	text-decoration: none;
}
.title_bar {
	margin: 0px 5% 0px 5%;
	font-family: Arial, Helvetica, "sans-serif";
	font-size:12px;
	font-wieght:bold;
}
.uppercase {
	vertical-align: super;
	font-size:10px;
}
.blank {
	background-color: white;
	height: 20px;
	margin: 0px 0px 0px 0px;
}
.bar {
	height: 30px;
	color: black;
	margin: 0px 5% 0px 5%;
	vertical-align: baseline;
}
.bar p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar p a:link {
	color: black;
	text-decoration: none;
}
.bar p a:visited {
	color: black;
	text-decoration: none;
}
.bar p a:hover {
	color: black;
	text-decoration: underline;
}
.linkage a:link {
	color: #000000;
	text-decoration:none;
}
.linkage a:visited {
	color: #000000;
	text-decoration:none;
}
.linkage a:hover {
	color: #000000;
	text-decoration: underline;
}
.kesu {
		overflow:hidden;
}

/* --------------------------------
 * home-header
 * -------------------------------- */
#header {
	width: 100%;
	height: 70px;
	padding-top:10px;
	padding-bottom:10px;
	background-color: rgb(255,255,255);
}

/* --------------------------------
 * home-header-hamburger
 * -------------------------------- */
#nav-drawer {
	font-color: rgb(37,62,107);	
	width: 10%;
	text-align: center;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
/*ヘッダーまわりはサイトに合わせて調整してください*/
#nav-drawer {
	position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
	display: none;
	text-align: left;
	padding-left: 91%;
}
.nav-unshown a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 10px;
	height: 22px;
	vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 22px;/*長さ*/
	border-radius: 3px;
	background: rgb(37,62,107);
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	background: url('images/asset-about-us-portrait.png') fixed;
	background-size: 100% auto;
	background-repeat: no-repeat;
	overflow: hidden;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 90%;/*最大幅（調整してください）*/
	height: 100%;
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	box-shadow: -100px solid white;
}
#nav-content {
	width: 100%
}
#nav-content .background-color {
	width: 100%;
	height: 100%;
	background-color: rgba(0,94,132,0.8);
	overflow: scroll;
	padding: 0px;
	margin: 0px;
}
#indent li {
	list-style-type: none;		/*リストマーカー無しにする*/
	color: #ffffff;			/*文字色*/
	text-decoration: none;		/*リンク部分を下線無しにする*/
	margin: 0px;
	padding: 0px;
}
#indent .first {
	text-align: left;
}
#indent .second {
	text-align: left;
	margin-left: 100px;
	margin-bottom: 0px;
}
#indent .footer {
	text-align: left;
}
#indent .copyright {
	text-align: left;
	letter-spacing: 0.3;
}
#indent li a:link {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:visited {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
hr {
	clear: both;		/*フロート配置をクリアする*/
	max-width: 100%;		/*幅の指定*/
	margin-top: 10px; 
	margin-right: 30px;   /*マージン*/
	border: 1px solid #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#hoge {
	display:none;
}

/* --------------------------------
 * home-header-hamburger-closure button
 * -------------------------------- */
.dli-close {
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	line-height: 1;
	width: 1em;
	height: 0.1em;
	background: currentColor;
	border-radius: 0.1em;
	position: relative;
	transform: rotate(45deg);
	font-size: 33px;
	opacity: 1;
}
.dli-close::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}

/* --------------------------------
 * home-header-continuing
 * -------------------------------- */
#header .dummy {
	display:none;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
#header .Company_Name {
	font-family: wigwag-bold, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: center;
	width: 90%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 20px;
	text-indent: 0px;
}
#company_logo {
	width: 20px; 
	height: 20px;
}
#header .Language {
	display:none;
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: right;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#header .Contact_Us {
	display:none;
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: left;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#mail_icon {
	display: none;
	margin-top: 5px;
	width: 30px;
	height: 30px;
}
#header a:link {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:visited {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:hover {
	color:rgb(37,62,107); 
	text-decoration:none;
}

/* --------------------------------
 * home-menu
 * -------------------------------- */
#menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	clear: both;
}
.direction_ltr {
	display: none;
}
.direction_rtl {
	display: flex;
	flex-direction: row;
	direction: rtl;
}
#dropmenu{
	font-family: Arial, Helvetica, "sans-serif";
	width: 100%;  /* コンテンツが見切れて見えるようにする */
	margin: 0px;
	padding: 0px;
	overflow:hidden;
	overflow-x:scroll;
	white-space: nowrap;  /* 横スクロールの指定 */
	overflow-scrolling: touch;  /* スクロールを滑らかにする */
	-webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
	position: absolute;
	z-index: 10;
}
#dropmenu li{
	display: inline-block;  /* 横並びにする指定 */
	list-style: none;
	height: auto;  /* 横スクロールする範囲の高さを指定 */
	width: 22%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	position: relative;
	z-index: 10;
}
#dropmenu li a{
	display: table-cell;
  	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	height: 40px;
	width: 20%;
	color: #666;
    font-size: min(16px, 100%);
	font-weight: normal;
	line-height: 1;
	text-decoration: none;
	border-radius: 0px;
	transition: 0.15s;
}
#dropmenu .active > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu li:hover > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu > li:hover > a{
	border-radius: 0px;
}
#dropmenu li ul{
	display:none;
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	border-radius: 0px;
}
#dropmenu li:last-child ul{
	display:none;
	left: -100%;
	width: 100%
}
#dropmenu li ul li{
	display:none;
	overflow: hidden;
	width: 200%;
	height: 0;
	color: #fff;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
#dropmenu li ul li a{
	display:none;
	margin: 0 0% 0 0%;
	padding: 13px 15px;
	background: rgb(222,230,228);
	text-align: left;
	font-size: 14px;
	font-weight: normal;
}
#dropmenu li:hover ul li{
	display:none;
	overflow: visible;
	height: 38px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#dropmenu li:hover ul li:first-child{
	display:none;
	border-top: 0;
}
#dropmenu li:hover ul li:last-child{
	display:none;
	border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
	display:none;
	border-radius: 0px;
}

/* --------------------------------
 * home-slide-show
 * -------------------------------- */
#slick {
	margin: 10px 5% 0px 5%;
}
#slick　.slick1{
	width: 100%;
	height: auto;
	margin: 10px auto;
	padding: 10px 10px;
}
#slick .image {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0px;
	text-align: center;
}

/* --------------------------------
 * home-special-notice
 * -------------------------------- */
.special_notice {
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #fff;
	margin: 0px 0% 0px 5%;
}
.scroll_list{
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 105%;  /* コンテンツが見切れて見えるようにする */
	overflow-x: auto;  /* 横スクロールの指定 */
	white-space: nowrap;  /* 横スクロールの指定 */
	overflow-scrolling: touch;  /* スクロールを滑らかにする */
	-webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
}
.scroll_list li{
	display: inline-block;  /* 横並びにする指定 */
	list-style: none;
	height: auto;  /* 横スクロールする範囲の高さを指定 */
}
.scroll-list {
	margin-top: 30px;
	margin-left: -10%;
	max-height: 500px;
	width: 100%;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list .scroll-item a {
	display: block;
	padding: 10px 10px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list .scroll-item:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list .scroll-item a:hover {
	background-color: #fafaf8;
}
.scroll-list .date {
	display: inline-block;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
	line-height: 16px;
}
.scroll-list .category {
	display: inline-block;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: 16px;
	padding:1px;
}
.scroll-list .category.news {
	background-color: #2c3c53;
}
.scroll-list .title {
	display: inline-block;
	padding-top: 15px;	
	padding-bottom: 5px;	
	padding-left: 20px;
	width: 600px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:  13px;
	line-height: 16px;
}

/* --------------------------------
 * home-pick-up-contents
 * -------------------------------- */
#pick_up_contents {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 0px 5% 0px 5%;
	overflow: none;
}
#pick_up_contents h2{
	text-align: left;
}
#pick_up_contents p{
	text-align: left;
}
#flex {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}

/* --------------------------------
 * pick-up-contents-parts
 * -------------------------------- */
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
.heading {
	padding: 10px 12px;
	background: url('../images/bg-slash.gif');
	letter-spacing: 1px;
	font-size: 1.6rem;
}
.hidden {
	display: none;
}

/* --------------------------------
 * pick-up-contents-header
 * -------------------------------- */
.article-box {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box:hover {
	opacity: 0.8;
}
.article-box:nth-of-type(odd) {
	float: left;
}
.article-box:nth-of-type(even) {
	float: right;
}
.article-box .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-publications
 * -------------------------------- */
#publications {
	background-color: rgb(230,230,230);
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	padding: 20px 5% 0px 5%;
}
#publications h2 {
	text-align: left;
}
#publications p {
	text-align: left;
}
#flex2 {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex2 .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex2 .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex2 .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex2 .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box2 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box2:hover {
	opacity: 0.8;
}
.article-box2:nth-of-type(odd) {
	float: left;
}
.article-box2:nth-of-type(even) {
	float: right;
}
.article-box2 .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box2 .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box2 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box2 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-videos
 * -------------------------------- */
#videos {
	background-color: rgb(64,64,64);
	font-family: Arial, Helvetica, "sans-serif";
	color: #ffffff;
	height: 500px;
	padding: 20px 5% 0px 5%;
}
#videos h2 {
	text-align: left;
}
#videos p {
	text-align: left;
}
#flex3 {
	margin: 0px 5% 0px 5%;	
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex3 .box3 h3 {
	width: 400px;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #FFFFFF;
	background-color: rgb(64,64,64);
	text-align: center;
	border-color: #ffffff;
	border-style: solid;
	border-width: 0.5px;
}
#flex3 .box3 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex3 .box3 .image {
	height: 100%;
	width: 100%;
	border-left: 0.5px solid #ffffff;
	border-right: 0.5px solid #ffffff;
	border-bottom: 0.5px solid #ffffff;
}
#flex3 .box3 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box3 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box3:hover {
	opacity: 0.8;
}
.article-box3:nth-of-type(odd) {
	float: left;
}
.article-box3:nth-of-type(even) {
	float: right;
}
.article-box3 .title {
	margin-top: 30px;
	color: #ffffff;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box3 .desc {
	margin-top: 5px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box3 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box3 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-follow-me
 * -------------------------------- */
.follow_me {
	background-color: rgb(230,230,230);
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: rgb(0,66,102);
	height: 150px;
	padding: 20px 5% 0px 5%;
	border-bottom: 1px solid rgb(230,230,230);
}
.follow_me h2 {
	padding-top: 5px;
}
.follow-me {
	list-style: none;
	margin-left: 50px;
	overflow: hidden;
	padding: 0px;
}
.follow-me li {
	float: left;
	margin: 30px 40px 0px 0px;
	padding: 0;
}
.follow-me li a::before {
	background-color: #eee;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #333;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	height: 30px; /* Button height */
	line-height: 30px; /* Button height */
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	text-align: center;
	width: 30px; /* Button width */
}
.follow-me li a:hover::before {
	color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before,        { content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { content: "\f16b"; }
.follow-me li a[href*="facebook.com/realbluetechnologies"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/research-20210124.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20210201.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220322.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220729.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20221011.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20230215.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20240119.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { content: "\f1e8"; }
.follow-me li a[href*="twitter.com/RealBlueTech"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/research-20210124.html]&text=[コロナの影響を受けた産業の考察]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20210201.html]&text=[Real Blue Technologies株式会社設立およびホームページ開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220322.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220729.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20221011.html]&text=[当ウェブサイトのご利用規約および個人情報の取り扱い改訂のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20230215.html]&text=[東京支店開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20240119.html]&text=[海外事業の先導に立てる人材育成オンライン講座のご案内]"]::before        { content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { content: "\f000"; font-family: blogicon; }

.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before,        { background-color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { background-color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { background-color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { background-color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { background-color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { background-color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { background-color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { background-color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { background-color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { background-color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { background-color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { background-color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { background-color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { background-color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { background-color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { background-color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { background-color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { background-color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { background-color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { background-color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { background-color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { background-color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { background-color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { background-color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { background-color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { background-color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { background-color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { background-color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { background-color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { background-color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { background-color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { background-color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { background-color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { background-color: #363636; }

/* --------------------------------
 * home-footer
 * -------------------------------- */
#footer {
	width: 100%;
	height: 300px;
	background-color: #000000;
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #ffffff;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	line-height: normal;
	letter-spacing: 0.1em;
	text-decoration: none;
	padding-left: 5%;
	border-top: 1px solid #000000;
	display:flex;
	flex-flow: row wrap;
}
#footer .copyright {
	width: 100%;
	text-align: left;
	height: 20px;
	order: 6;
	font-size:13px;
	padding-left: 0px;
}
#footer .footer1 {
	width: 100%;
	text-align: left;
	height: 10px;
	margin-top: 50px;
	padding-left: 0px;
	order: 1;
	font-size:13px;
}
#footer .footer2 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 2;
	font-size:13px;
}
#footer .footer3 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 3;
	font-size:13px;
}
#footer .footer4 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 4;
	font-size:13px;
}
#footer .footer5 {
	width: 100%;
	text-align: left;
	height: 40px;
	padding-left: 0px;
	order: 5;
}
#footer .copyright_english {
	width: 100%;
	text-align: left;
	height: 20px;
	order: 6;
	font-size:13px;
	padding-left: 0px;
}
#footer .footer6 {
	width: 100%;
	text-align: left;
	height: 15px;
	margin-top: 50px;
	padding-left: 0px;
	order: 1;
	font-size:13px;
}
#footer .footer7 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 2;
	font-size:13px;
}
#footer .footer8 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 3;
	font-size:13px;
}
#footer .footer9 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 4;
	font-size:13px;
}
#footer .footer10 {
	width: 100%;
	text-align: left;
	height: 40px;
	padding-left: 0px;
	order: 5;
	font-size:13px;
}
#footer a:link {
	color: #ffffff;
	text-decoration:none;
	clear: both;
}
#footer a:visited {
	color: #ffffff;
	text-decoration:none;
}
#footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* --------------------------------
 * section: top - about us
 * -------------------------------- */
#about-us {
	margin: 0px 0% 0px 0%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#cloud .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#cloud .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(0,44,72);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#cloud .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#cloud .desc {
	color: #ddc;
}

/* --------------------------------
 * section: message from ceo - about us
 * -------------------------------- */
#message {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#message:hover {
	opacity: 0.85;
}
#message .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(105,110,112);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#message .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#message .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#message .desc {
	color: #fff;
}

/* --------------------------------
 * section: slogan and purpose - about us
 * -------------------------------- */
#slogan-purpose {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#slogan-purpose:hover {
	opacity: 0.85;
}
#slogan-purpose .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#slogan-purpose .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(239,90,97);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#slogan-purpose .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#slogan-purpose .desc {
	color: #fff;
}

/* --------------------------------
 * section: profile - strategy
 * -------------------------------- */
#strategy {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#strategy:hover {
	opacity: 0.85;
}
#strategy .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(252,181,26);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#strategy .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#strategy .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#strategy .desc {
	color: #000;
}

/* --------------------------------
 * section: profile - about us
 * -------------------------------- */
#company-profile {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#company-profile:hover {
	opacity: 0.85;
}
#company-profile .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(193,200,194);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#company-profile .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#company-profile .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#company-profile .desc {
	color: #000;
}

/* --------------------------------
 * detailed pages of about us
 * -------------------------------- */
#section_slogan-and-purpose {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_strategy {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_profile {
	margin: 0px 0% 0px 0%;
	padding:0px;
/*	height: 1300px;*/
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.as-of-when {
	margin: 0px 0px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	font-weight: solid;
}
.column1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 250px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 250px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	padding: 30px;
	width: 30%;
	float: left;
}
.row3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	padding: 30px;
	width: 70%;
	float: left;
}
.column4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 800px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 800px;
	padding-top: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
	padding-left:1.3em;
	text-indent:-1.3em;
}
.column6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column8 {
	height: 30px;
	width: 30%;
	float: left;
}
.row8 {
	height: 30px;
	width: 70%;
	float: left;
}
.column7 {
	clear: both;
}
/* --------------------------------
 * products-and-services
 * -------------------------------- */
#products_and_services {
	margin: 0px 0% 0px 0%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#products_and_services .image {
	float: left;
	width: 50%;
	height: 250px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#products_and_services .content {
	float: left;
	width: 50%;
	height: 250px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#products_and_services .title {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#products_and_services .desc {
	color: #fff;
}
#products_and_services p {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
}
#products_and_services .special {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
	margin: 0px 5% 0px 5%;
}

#flex4 {
	margin: 0px 0% 0px 0%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: scroll;
}
#flex4 .box {
	align-items: stretch;
	width: 280px;
	margin:10px;
}
#flex4 .box .shashin{
	width: 280px;
	height:　200px;
	margin:　0px;	
	padding: 0px;
	border: solid 1px rgb(105,206,246);
	vertical-align:top;
}
#flex4 .box h3 {
	width: 280px;
	height: 0px;
	margin: 0px;
	padding: 30px 0px 10px 0px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: center;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
}
#flex4 .box p {
	width: 280px;
	height: 150px;
	margin: 0px 0px 0px 0px;
	padding: 30px 8px 0px 8px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
    line-height:25px;
}
/* --------------------------------
 * news
 * -------------------------------- */
#news {
	margin: 0px 0% 0px 0%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#news h2 {
	text-align: left;
}
#news p {
	margin-top: 0px;
	text-align: left;
}
#news .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#news .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(106,115,105);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#news .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#news .desc {
	color: #fff;
}
#pick_up_contents2 {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 10px 5% 10px 5%;
	overflow:scroll;
}
#pick_up_contents2 h2{
	text-align: left;
}
#pick_up_contents2 p{
	text-align: left;
}
.scroll-list2 {
	margin-top: 30px;
	max-height: 500px;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list2 .scroll-item2 a {
	display: block;
	padding: 10px 15px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list2 .scroll-item2:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list2 .scroll-item2 a:hover {
	background-color: #fafaf8;
}
.scroll-list2 .date2 {
	display: inline-block;
	width: 19%;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
}
.scroll-list2 .category2 {
	display: inline-block;
	width: 8%;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 12px;
	line-height: 16px;
}
.scroll-list2 .category2.news2 {
	background-color: #2c3c53;
}
.scroll-list2 .title2 {
	display: inline-block;
	width: 73%;
	padding-left: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

/* --------------------------------
 * publications-and-videos
 * -------------------------------- */
#publications-and-videos-overall {
	margin: 0px 0% 0px 0%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#publications-and-videos-overall h2 {
	text-align: left;
}
#publications-and-videos-overall p {
	margin-top: 0px;
	text-align: left;
}
#publications-and-videos-overall .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#publications-and-videos-overall .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(0,0,0);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#publications-and-videos-overall .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#publications-and-videos-overall .desc {
	color: #ddc
}

/* --------------------------------
 * publications-and-videos-item
 * -------------------------------- */
#publications-and-videos {
	margin: 0px 5% 0px 5%;
	height: 500px;
}
.item {
	width: 180px;
	margin-bottom: 4px;
	padding: 8px;
	border-bottom: 3px solid;
	border-radius: 5px;
	background-color: #fff;
}
.item .image {
	display: block;
	width: 100%;
	height: 109px;
}
.item .category {
	margin: 15px 9px 10px;
	color: #aaa;
	letter-spacing: 1px;
	font-family: "Trebuchet MS", "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
.item .category::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 5px;
	border: 2px solid;
	border-radius: 50%;
	vertical-align: -5px;
}
.item .description {
	margin: 10px;
	line-height: 1.5;
}
.item > a {
	display: block;
	margin: -8px -8px -11px;
	padding: 8px 8px 11px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
}
.item > a:hover {
	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
}
.item-maindish,
.item-maindish .category::before {
	border-color: #FFC0CB;
}
.item-appetizer,
.item-appetizer .category::before {
	border-color: #76C047;
}
.item-column,
.item-column .category::before {
	border-color: #FFF100;
}
.item-breaktime,
.item-breaktime .category::before {
	border-color: #C1EFFF;
}
.item-m {
	width: 364px;
}
.item-m .image {
	height: 146px;
}
.item-l {
	width: 732px;
}
.item-l .image {
	height: 403px;
}

/* --------------------------------
 * contact_form
 * -------------------------------- */
#section_contact_form {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height:2300px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_contact_form .button {
	text-align: center;
}
#section_contact_form .button {
	text-align: center;
}
#disclaimer {
	margin: 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: rgb(236,247,251);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	height: 1100px;
	overflow: hidden;
	width: 100%;
	padding-left:1.0em;
	text-indent:-1.0em;
}
#disclaimer li {
	padding: 0px 5% 0px 5%;
}
#blue {
    margin: 0px;
	width: 100%;
    border: 1px solid rgb(161,171,170);
}
table tbody tr th,
table tbody tr td {
　  width: 100%;
	display: block;
	float: center;
}
table tbody tr th {
	padding-left: 20px;
	color: black;
	text-align: left;
	border: none;
	background-color: #ffffff;
	width: 300px;
}
table tbody tr td {
	padding: 10px;
	text-align: left;
	border: none;
	background-color: #ffffff;
	width: 100%;
	height: 40px;
}
table {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	margin-left: auto;
	margin-right: 0%;
	border-collapse: collapse;
	height: 1300px;
	margin: 1px;
}
#textfield{
	text-align: left;
}
#item1{
    border: 1px solid rgb(161,171,170);
}
#item2{
    border: 1px solid rgb(161,171,170);
}
#item3{
    border: 1px solid rgb(161,171,170);
}
#item4{
    border: 1px solid rgb(161,171,170);
}
#textfield1{
	text-align: left;
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textarea{
	text-align: left;
	width: 90%;
	height: 400px;
    border: 1px solid rgb(161,171,170);
	padding-top: 10px;
	padding-left: 10px;
}
#text-count {
   display: block;
   text-align: right;
   margin-top: 10px;
   margin-right: 10%;
}
#text-count.over {
   font-weight: bold;
   color: #c90000;
}
#textfield2{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#otoiawase {
	height: 500px;	
}
#textfield3{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield4{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield5{
	text-align: left;
	width: 30%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield6{
	text-align: left;
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield7{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#email{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#email_check{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#tel{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#submit{
	float: center;
	margin: 0 20% 5% 20%;
	padding: 10px 0px 10px 0px;
	font-size:　15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
#reset{
	float: center;
	margin: 0 20% 0 20%;
	font-size:15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
.maintitle {
	height: 50px;
	font-color: white;
	margin: 20px 5% 0px 5%;
}
.maintitle h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 50% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#pressrelease .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#pressrelease .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#pressrelease .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#pressrelease .desc {
	color: #fff;
}
.maintitle_pressrelease {
	height: 50px;
	font-color: white;
	margin: 20px 5% 0px 5%;
}
.maintitle_pressrelease h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 60% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle_pressrelease h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease h4 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
}
#pressrelease h3 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: bold;
	text-align: center;
}
#pressrelease p {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: left;
	line-height: 25px;
}
#pressrelease .right{
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: right;
}
.share {
	margin: 0px 0px 0px 0px;
	padding:0px;
	height: 200px;
	flex-direction: column;
	background-color: #ffffff;
}
.btn-twitter {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #55acee;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  height:40px;
  width:5%;
  float:left;
}
.btn-twitter::after {
  position: absolute;
  content: '\f099';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  float:left;
}
.btn-facebook {
  display: inline-block;
  padding: .6em .8em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #315096;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  float:left;
}
.btn-facebook::after {
  position: absolute;
  content: '\f09a';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}
.btn-line {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #1dcd00;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  clear:both;
}
.btn-line::after {
  position: absolute;
  content: "\f3c0";
  font-family: 'Font Awesome 5 Brands';
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: 400;
}
.each-page-image {
	margin: 10px 5% 0px 5%;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.each-page-image .image {
	width: 100%;
	height: auto;
}
.section_message {
	display: none;
}
.section_message_responsive {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	height: 2300px;
	background-color: white;
	margin: 0px 5% 0px 5%;
}
.subtitle {
	font-size: 18px;
	width: 960px;
	height: 20px;
	background-color: white;
	color: black;
}
.message {
	width: 70%;
	height: 1200px;
	margin: 0px;
	border: 0px white solid;
	padding-left: 30px;
	padding-right: 20px;
	background-color: white;
	text-align: justify;
	float: right;
	overflow: scroll;
	letter-spacing: 0px;
	line-height:30px;
}
.message_responsive {
	width: 70%;
	height: 2200px;
	margin: 0px;
	border: 0px white solid;
	padding-left: 30px;
	padding-right: 20px;
	background-color: white;
	text-align: justify;
	float: right;
	overflow: scroll;
	letter-spacing: 0px;
	line-height:30px;
}
.comment {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	margin: 10px 5% 0px 5%;
	letter-spacing: 0px;
	line-height:30px;
}
.navi {
	width: 30%;
	height: 1000px;
	background-color: white;
	float: right;
	padding-left:20px;
}
.picture {
	width: 80%;
	height: auto;
}
.adjustment {
	width: 80%;
	height: 20px;
	backgroud-color: white;
	text-align: right;
	float: right;
}

/* --------------------------------
 * paragraph
 * -------------------------------- */
.table_of_contents {
	margin: 0px 5% 0px 5%;
	padding:0px;
	background-color: #ffffff;
	font-size: 15px;
}
#terms_of_services {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#terms_of_services2 {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#privacy_policy {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.wide {
	display: none;
}
.paragraph {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1.0em;
	text-indent:-1.0em;
}
.paragraph li {
	padding: 0px 30px 0px 50px;
}
.paragraph2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1.0em;
	text-indent:-1.0em;
}
.paragraph2 li {
	padding: 0px 30px 0px 50px;
}
.paragraph3 {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1.0em;
	text-indent:-1.0em;
}
.paragraph3 li {
	padding: 0px 30px 0px 50px;
}
.migiyose {
	margin-right:60px;
	text-align:right;
}
.first_indent {
	padding-left: 1.4em;
	text-indent:  -1.4em;
}
.second_indent {
	padding-left: 2em;
	text-indent: -1.0em;
}
.third_indent {
	padding-left: 6em;
	text-indent: -1.4em;
}
.fourth_indent {
	padding-left: 8em;
	text-indent: -1.4m;
}
.fifth_indent {
	font-size: 15px;
	padding-left: 1.4em;
	text-indent: -1.4em;
	margin: 0px 5% 0px 15%;
}
.maintitle2 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 25px;
}
.maintitle2 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 8% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle3 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 3em;
}
.maintitle3 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(196,194,190);
	position: relative;
	margin: 0px 9% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle5 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 0px;
}
.maintitle5 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	padding-bottom: 5px;
}
.bar2 {
	height: 30px;
	color: black;
	margin: 0px 0px 0px 5%;
	vertical-align: baseline;
	float: left;
	width: 60%;
	width: 60%;
}
.bar2 p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar2 p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar2 p a:link {
	color: black;
	text-decoration: none;
}
.bar2 p a:visited {
	color: black;
	text-decoration: none;
}
.bar2 p a:hover {
	color: black;
	text-decoration: underline;
}
.page_top {
	height: 30px;
	color: black;
	margin: 0px 5% 0px 0px;
	vertical-align: baseline;
	float: right;
	width: 30%;
	text-align:right;
}
.page_top p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(122,137,135);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.page_top p .bold{
	font-weight: bold;
	color: rgb(122,137,135);
}
.page_top p a:link {
	color: black;
	text-decoration: none;
}
.page_top p a:visited {
	color: black;
	text-decoration: none;
}
.page_top p a:hover {
	color: black;
	text-decoration: underline;
}
}
@media (max-width : 350px ){
html {
	font-size: 62.5%;
}
body {
	color: #333;
	font-size: 1.2rem;
	font-family: Arial, Helvetica, "sans-serif";
	overflow: scroll;
}
*, *::before, *::after {
	box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
	color: #d03c56;
	text-decoration: none;
}
.title_bar {
	margin: 0px 5% 0px 5%;
	font-family: Arial, Helvetica, "sans-serif";
	font-size:12px;
	font-wieght:bold;
}
.uppercase {
	vertical-align: super;
	font-size:10px;
}
.blank {
	background-color: white;
	height: 20px;
	margin: 0px 0px 0px 0px;
}
.bar {
	height: 30px;
	color: black;
	margin: 0px 5% 0px 5%;
	vertical-align: baseline;
}
.bar p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar p a:link {
	color: black;
	text-decoration: none;
}
.bar p a:visited {
	color: black;
	text-decoration: none;
}
.bar p a:hover {
	color: black;
	text-decoration: underline;
}
.linkage a:link {
	color: #000000;
	text-decoration:none;
}
.linkage a:visited {
	color: #000000;
	text-decoration:none;
}
.linkage a:hover {
	color: #000000;
	text-decoration: underline;
}
.kesu {
		overflow:hidden;
}

/* --------------------------------
 * home-header
 * -------------------------------- */
#header {
	width: 100%;
	height: 70px;
	padding-top:10px;
	padding-bottom:10px;
	background-color: rgb(255,255,255);
}

/* --------------------------------
 * home-header-hamburger
 * -------------------------------- */
#nav-drawer {
	font-color: rgb(37,62,107);	
	width: 10%;
	text-align: center;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
/*ヘッダーまわりはサイトに合わせて調整してください*/
#nav-drawer {
	position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
	display: none;
	text-align: left;
	padding-left: 91%;
}
.nav-unshown a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 10px;
	height: 22px;
	vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 22px;/*長さ*/
	border-radius: 3px;
	background: rgb(37,62,107);
	display: block;
	content: '';
	cursor: pointer;
}
#nav-open span:before {
	bottom: -8px;
}
#nav-open span:after {
	bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	background: url('images/asset-about-us-portrait.png') fixed;
	background-size: 100% auto;
	background-repeat: no-repeat;
	overflow: hidden;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 90%;/*最大幅（調整してください）*/
	height: 100%;
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
	box-shadow: -100px solid white;
}
#nav-content {
	width: 100%
}
#nav-content .background-color {
	width: 100%;
	height: 100%;
	background-color: rgba(0,94,132,0.8);
	overflow: scroll;
	padding: 0px;
	margin: 0px;
}
#indent li {
	list-style-type: none;		/*リストマーカー無しにする*/
	color: #ffffff;			/*文字色*/
	text-decoration: none;		/*リンク部分を下線無しにする*/
	margin: 0px;
	padding: 0px;
}
#indent .first {
	text-align: left;
}
#indent .second {
	text-align: left;
	margin-left: 100px;
	margin-bottom: 0px;
}
#indent .footer {
	text-align: left;
}
#indent .copyright {
	text-align: left;
	letter-spacing: 0.3;
}
#indent li a:link {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:visited {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	text-decoration: none;
}
#indent li a:hover {
	color: #ffffff; 	/*リンクにマウスが乗ったら背景色を変更する*/
	opacity: 0.7;
	text-decoration: none;
}
hr {
	clear: both;		/*フロート配置をクリアする*/
	max-width: 100%;		/*幅の指定*/
	margin-top: 10px; 
	margin-right: 30px;   /*マージン*/
	border: 1px solid #cccccc;	/*内容の区切りをグレーの点線表示にする*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}
#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#hoge {
	display:none;
}

/* --------------------------------
 * home-header-hamburger-closure button
 * -------------------------------- */
.dli-close {
	display: inline-block;
	vertical-align: middle;
	color: #ffffff;
	line-height: 1;
	width: 1em;
	height: 0.1em;
	background: currentColor;
	border-radius: 0.1em;
	position: relative;
	transform: rotate(45deg);
	font-size: 33px;
	opacity: 1;
}
.dli-close::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}

/* --------------------------------
 * home-header-continuing
 * -------------------------------- */
#header .dummy {
	display:none;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
}
#header .Company_Name {
	font-family: wigwag-bold, sans-serif;
	font-weight: bold;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: center;
	width: 90%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 18px;
	text-indent: 0px;
}
#company_logo {
	width: 20px; 
	height: 20px;
}
#header .Language {
	display:none;
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: right;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#header .Contact_Us {
	display:none;
	font-family: wigwag-bold, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-color: rgb(37,62,107);
	text-align: left;
	width: 10%;
	float: left;
	line-height: 50px;
	letter-spacing: 1px;
	font-size: 15px;
}
#mail_icon {
	display: none;
	margin-top: 5px;
	width: 30px;
	height: 30px;
}
#header a:link {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:visited {
	color:rgb(37,62,107); 
	text-decoration:none;
}
#header a:hover {
	color:rgb(37,62,107); 
	text-decoration:none;
}

/* --------------------------------
 * home-menu
 * -------------------------------- */
#menu {
	width: 100%;
	height: 80px;
	background-color: #ffffff;
	clear: both;
}
.direction_ltr {
	display: none;
}
.direction_rtl {
	display: flex;
	flex-direction: row;
	direction: rtl;
	text-align:center;
}
#dropmenu{
	font-family: Arial, Helvetica, "sans-serif";
	width: 100%;  /* コンテンツが見切れて見えるようにする */
	margin: 0px;
	padding: 0px;
	overflow:hidden;
	overflow-x:scroll;
	white-space: nowrap;  /* 横スクロールの指定 */
	overflow-scrolling: touch;  /* スクロールを滑らかにする */
	-webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
	position: absolute;
	z-index: 10;
}
#dropmenu li{
	display: inline-block;  /* 横並びにする指定 */
	list-style: none;
	height: auto;  /* 横スクロールする範囲の高さを指定 */
	width: 22%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	position: relative;
	z-index: 10;
}
#dropmenu li a{
	display: table-cell;
  	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	height: 40px;
	width: 20%;
	color: #666;
    font-size: min(16px, 100%);
	font-weight: normal;
	line-height: 1;
	text-decoration: none;
	border-radius: 0px;
	transition: 0.15s;
}
#dropmenu .active > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu li:hover > a{
	background: rgb(57,137,192);
	color: white;
}
#dropmenu > li:hover > a{
	border-radius: 0px;
}
#dropmenu li ul{
	display:none;
	list-style: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	border-radius: 0px;
}
#dropmenu li:last-child ul{
	display:none;
	left: -100%;
	width: 100%
}
#dropmenu li ul li{
	display:none;
	overflow: hidden;
	width: 200%;
	height: 0;
	color: #fff;
	-moz-transition: .2s;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-ms-transition: .2s;
	transition: .2s;
}
#dropmenu li ul li a{
	display:none;
	margin: 0 0% 0 0%;
	padding: 13px 15px;
	background: rgb(222,230,228);
	text-align: left;
	font-size: 14px;
	font-weight: normal;
}
#dropmenu li:hover ul li{
	display:none;
	overflow: visible;
	height: 38px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}
#dropmenu li:hover ul li:first-child{
	display:none;
	border-top: 0;
}
#dropmenu li:hover ul li:last-child{
	display:none;
	border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
	display:none;
	border-radius: 0px;
}

/* --------------------------------
 * home-slide-show
 * -------------------------------- */
#slick {
	margin: 10px 5% 0px 5%;
}
#slick　.slick1{
	width: 100%;
	height: auto;
	margin: 10px auto;
	padding: 10px 10px;
}
#slick .image {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0px;
	text-align: center;
}

/* --------------------------------
 * home-special-notice
 * -------------------------------- */
.special_notice {
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #fff;
	margin: 0px 0% 0px 5%;
}
.scroll_list{
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 105%;  /* コンテンツが見切れて見えるようにする */
	overflow-x: auto;  /* 横スクロールの指定 */
	white-space: nowrap;  /* 横スクロールの指定 */
	overflow-scrolling: touch;  /* スクロールを滑らかにする */
	-webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
}
.scroll_list li{
	display: inline-block;  /* 横並びにする指定 */
	list-style: none;
	height: auto;  /* 横スクロールする範囲の高さを指定 */
}
.scroll-list {
	margin-top: 30px;
	margin-left: -10%;
	max-height: 500px;
	width: 100%;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list .scroll-item a {
	display: block;
	padding: 10px 10px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list .scroll-item:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list .scroll-item a:hover {
	background-color: #fafaf8;
}
.scroll-list .date {
	display: inline-block;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
	line-height: 16px;
}
.scroll-list .category {
	display: inline-block;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 13px;
	line-height: 16px;
	padding:1px;
}
.scroll-list .category.news {
	background-color: #2c3c53;
}
.scroll-list .title {
	display: inline-block;
	padding-top: 15px;	
	padding-bottom: 5px;	
	padding-left: 20px;
	width: 600px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:  13px;
	line-height: 16px;
}

/* --------------------------------
 * home-pick-up-contents
 * -------------------------------- */
#pick_up_contents {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 0px 5% 0px 5%;
	overflow: none;
}
#pick_up_contents h2{
	text-align: left;
}
#pick_up_contents p{
	text-align: left;
}
#flex {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}

/* --------------------------------
 * pick-up-contents-parts
 * -------------------------------- */
.clearfix::after {
	content: '';
	display: block;
	clear: both;
}
.heading {
	padding: 10px 12px;
	background: url('../images/bg-slash.gif');
	letter-spacing: 1px;
	font-size: 1.6rem;
}
.hidden {
	display: none;
}

/* --------------------------------
 * pick-up-contents-header
 * -------------------------------- */
.article-box {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box:hover {
	opacity: 0.8;
}
.article-box:nth-of-type(odd) {
	float: left;
}
.article-box:nth-of-type(even) {
	float: right;
}
.article-box .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-publications
 * -------------------------------- */
#publications {
	background-color: rgb(230,230,230);
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	padding: 20px 5% 0px 5%;
}
#publications h2 {
	text-align: left;
}
#publications p {
	text-align: left;
}
#flex2 {
	margin: 0px 5% 0px 5%;
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex2 .box2 h3 {
	width: 400px;
	height: auto;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #ffffff;
	background-color: rgb(127,127,127);
	text-align: center;
	border-color: rgb(179,179,179);
	border-style: solid;
	border-width: 0.5px;
}
#flex2 .box2 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex2 .box2 .image {
	height: 55%;
	width: 100%;
	border-left: 0.5px solid rgb(179,179,179);
	border-right: 0.5px solid rgb(179,179,179);
	border-bottom: 0.5px solid rgb(179,179,179);
}
#flex2 .box2 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box2 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box2:hover {
	opacity: 0.8;
}
.article-box2:nth-of-type(odd) {
	float: left;
}
.article-box2:nth-of-type(even) {
	float: right;
}
.article-box2 .title {
	margin-top: 30px;
	color: #555;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box2 .desc {
	margin-top: 5px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box2 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box2 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-videos
 * -------------------------------- */
#videos {
	background-color: rgb(64,64,64);
	font-family: Arial, Helvetica, "sans-serif";
	color: #ffffff;
	height: 500px;
	padding: 20px 5% 0px 5%;
}
#videos h2 {
	text-align: left;
}
#videos p {
	text-align: left;
}
#flex3 {
	margin: 0px 5% 0px 5%;	
	display: flex;
	justify-content:space-between;
	overflow: scroll;
}
#flex3 .box3 h3 {
	width: 400px;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: #FFFFFF;
	background-color: rgb(64,64,64);
	text-align: center;
	border-color: #ffffff;
	border-style: solid;
	border-width: 0.5px;
}
#flex3 .box3 {
	align-items: stretch;
	height: auto;
	width: 100%;
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px;
}
#flex3 .box3 .image {
	height: 100%;
	width: 100%;
	border-left: 0.5px solid #ffffff;
	border-right: 0.5px solid #ffffff;
	border-bottom: 0.5px solid #ffffff;
}
#flex3 .box3 p {
	height: auto;
	width: 100%;
	padding-top: 10px;
}
.article-box3 {
	position: relative;
	display: block;
	width: 315px;
	height: 360px;
	margin-top:30px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;	  
	padding: 210px 15px 0;
	box-shadow: 6px 6px 8px -4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
.article-box3:hover {
	opacity: 0.8;
}
.article-box3:nth-of-type(odd) {
	float: left;
}
.article-box3:nth-of-type(even) {
	float: right;
}
.article-box3 .title {
	margin-top: 30px;
	color: #ffffff;
	font-size: 1.4rem;
	line-height: 1.6;
}
.article-box3 .desc {
	margin-top: 5px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.article-box3 .date {
	position: absolute;
	right: 0;
	bottom: 15px;
	display: block;
	width: 160px;
	padding: 4px;
	background-color: rgb(0,59,137);
	color: #ffffff;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 1.1rem;
}
.article-box3 .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* --------------------------------
 * home-follow-me
 * -------------------------------- */
.follow_me {
	background-color: rgb(230,230,230);
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: rgb(0,66,102);
	height: 150px;
	padding: 20px 5% 0px 5%;
	border-bottom: 1px solid rgb(230,230,230);
}
.follow_me h2 {
	padding-top: 5px;
}
.follow-me {
	list-style: none;
	margin-left: 50px;
	overflow: hidden;
	padding: 0px;
}
.follow-me li {
	float: left;
	margin: 30px 40px 0px 0px;
	padding: 0;
}
.follow-me li a::before {
	background-color: #eee;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	color: #333;
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	height: 30px; /* Button height */
	line-height: 30px; /* Button height */
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	text-align: center;
	width: 30px; /* Button width */
}
.follow-me li a:hover::before {
	color: #fff;
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before,        { content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { content: "\f16b"; }
.follow-me li a[href*="facebook.com/realbluetechnologies"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/research-20210124.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20210201.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220322.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20220729.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20221011.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20230215.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="https://www.facebook.com/share.php?u=https://www.realblue.co.jp/pressrelease-20230215.html"]::before       { content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { content: "\f1e8"; }
.follow-me li a[href*="twitter.com/RealBlueTech"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/research-20210124.html]&text=[コロナの影響を受けた産業の考察]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20210201.html]&text=[Real Blue Technologies株式会社設立およびホームページ開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220322.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20220729.html]&text=[本社移転のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20221011.html]&text=[当ウェブサイトのご利用規約および個人情報の取り扱い改訂のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20230215.html]&text=[東京支店開設のお知らせ]"]::before        { content: "\f099"; }
.follow-me li a[href*="twitter.com/share?url=[https://www.realblue.co.jp/pressrelease-20240119.html]&text=[海外事業の先導に立てる人材育成オンライン講座のご案内]"]::before        { content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { content: "\f000"; font-family: blogicon; }
.follow-me li a[href*="amazon.co.jp"]:hover::before,
.follow-me li a[href*="amazon.com"]:hover::before,        { background-color: #ff9900; }
.follow-me li a[href*="codepen.io"]:hover::before         { background-color: #000000; }
.follow-me li a[href*="delicious.com"]:hover::before      { background-color: #3399ff; }
.follow-me li a[href*="deviantart.com"]:hover::before     { background-color: #05cc47; }
.follow-me li a[href*="digg.com"]:hover::before           { background-color: #000000; }
.follow-me li a[href*="dribble.com"]:hover::before        { background-color: #ea4c89; }
.follow-me li a[href*="dropbox.com"]:hover::before        { background-color: #007ee5; }
.follow-me li a[href*="facebook.com"]:hover::before       { background-color: #3b5998; }
.follow-me li a[href*="feedly.com"]:hover::before         { background-color: #6cc655; }
.follow-me li a[href*="flickr.com"]:hover::before         { background-color: #0063dc; }
.follow-me li a[href*="foursquare.com"]:hover::before     { background-color: #f94877; }
.follow-me li a[href*="github.com"]:hover::before         { background-color: #181717; }
.follow-me li a[href*="plus.google.com"]:hover::before    { background-color: #dc4e41; }
.follow-me li a[href*="b.hatena.ne.jp"]:hover::before     { background-color: #008fde; }
.follow-me li a[href*="instagram.com"]:hover::before      { background-color: #125688; }
.follow-me li a[href*="last.fm"]:hover::before            { background-color: #d51007; }
.follow-me li a[href*="linkedin.com"]:hover::before       { background-color: #0077b5; }
.follow-me li a[href*="nicovideo.jp"]:hover::before       { background-color: #eaeaea; }
.follow-me li a[href*="pinterest.com"]:hover::before      { background-color: #bd081c; }
.follow-me li a[href*="getpocket.com"]:hover::before      { background-color: #ef3f56; }
.follow-me li a[href*="reddit.com"]:hover::before         { background-color: #ff4500; }
.follow-me li a[href*="skype.com"]:hover::before,
.follow-me li a[href*="skype:"]:hover::before             { background-color: #00aff0; }
.follow-me li a[href*="slideshare.net"]:hover::before     { background-color: #2d2d2d; }
.follow-me li a[href*="spotify.com"]:hover::before        { background-color: #84bd00; }
.follow-me li a[href*="steamcommunity.com"]:hover::before { background-color: #171a21; }
.follow-me li a[href*="stumbleupon.com"]:hover::before    { background-color: #eb4929; }
.follow-me li a[href*="tumblr.com"]:hover::before         { background-color: #36465d; }
.follow-me li a[href*="twitch.tv"]:hover::before          { background-color: #6441a5; }
.follow-me li a[href*="twitter.com"]:hover::before        { background-color: #55acee; }
.follow-me li a[href*="vimeo.com"]:hover::before          { background-color: #1ab7ea; }
.follow-me li a[href*="vine.co"]:hover::before            { background-color: #11b58a; }
.follow-me li a[href*="weibo.com"]:hover::before          { background-color: #e6162d; }
.follow-me li a[href*="whatsapp.com"]:hover::before       { background-color: #64d548; }
.follow-me li a[href*="wordpress.com"]:hover::before,
.follow-me li a[href*="wordpress.org"]:hover::before      { background-color: #21759b; }
.follow-me li a[href*="youtube.com"]:hover::before        { background-color: #cd201f; }
.follow-me li a[href$="/feed"]:hover::before              { background-color: #ffa500; }
.follow-me li a[href$="/subscribe"]:hover::before         { background-color: #363636; }

/* --------------------------------
 * home-footer
 * -------------------------------- */
#footer {
	width: 100%;
	height: 300px;
	background-color: #000000;
	font-family: wigwag-bold, sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #ffffff;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	line-height: normal;
	letter-spacing: 0.1em;
	text-decoration: none;
	padding-left: 5%;
	border-top: 1px solid #000000;
	display:flex;
	flex-flow: row wrap;
}
#footer .copyright {
	width: 100%;
	text-align: left;
	height: 20px;
	order: 6;
	font-size:13px;
	padding-left: 0px;
}
#footer .footer1 {
	width: 100%;
	text-align: left;
	height: 10px;
	margin-top: 50px;
	padding-left: 0px;
	order: 1;
	font-size:13px;
}
#footer .footer2 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 2;
	font-size:13px;
}
#footer .footer3 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 3;
	font-size:13px;
}
#footer .footer4 {
	width: 100%;
	text-align: left;
	height: 10px;
	padding-left: 0px;
	order: 4;
	font-size:13px;
}
#footer .footer5 {
	width: 100%;
	text-align: left;
	height: 40px;
	padding-left: 0px;
	order: 5;
}
#footer .copyright_english {
	width: 100%;
	text-align: left;
	height: 20px;
	order: 6;
	font-size:13px;
	padding-left: 0px;
}
#footer .footer6 {
	width: 100%;
	text-align: left;
	height: 15px;
	margin-top: 50px;
	padding-left: 0px;
	order: 1;
	font-size:13px;
}
#footer .footer7 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 2;
	font-size:13px;
}
#footer .footer8 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 3;
	font-size:13px;
}
#footer .footer9 {
	width: 100%;
	text-align: left;
	height: 15px;
	padding-left: 0px;
	order: 4;
	font-size:13px;
}
#footer .footer10 {
	width: 100%;
	text-align: left;
	height: 40px;
	padding-left: 0px;
	order: 5;
	font-size:13px;
}
#footer a:link {
	color: #ffffff;
	text-decoration:none;
	clear: both;
}
#footer a:visited {
	color: #ffffff;
	text-decoration:none;
}
#footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* --------------------------------
 * section: top - about us
 * -------------------------------- */
#about-us {
	margin: 0px 0% 0px 0%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#cloud .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#cloud .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(0,44,72);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#cloud .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#cloud .desc {
	color: #ddc;
}

/* --------------------------------
 * section: message from ceo - about us
 * -------------------------------- */
#message {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#message:hover {
	opacity: 0.85;
}
#message .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(105,110,112);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#message .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#message .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#message .desc {
	color: #fff;
}

/* --------------------------------
 * section: slogan and purpose - about us
 * -------------------------------- */
#slogan-purpose {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#slogan-purpose:hover {
	opacity: 0.85;
}
#slogan-purpose .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#slogan-purpose .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(239,90,97);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#slogan-purpose .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
}
#slogan-purpose .desc {
	color: #fff;
}

/* --------------------------------
 * section: profile - strategy
 * -------------------------------- */
#strategy {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#strategy:hover {
	opacity: 0.85;
}
#strategy .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(252,181,26);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#strategy .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#strategy .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#strategy .desc {
	color: #000;
}

/* --------------------------------
 * section: profile - about us
 * -------------------------------- */
#company-profile {
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
	transition: opacity 0.15s;
}
#company-profile:hover {
	opacity: 0.85;
}
#company-profile .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(193,200,194);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#company-profile .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#company-profile .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #000;
	font-weight: normal;
	font-size: 2.0rem;
}
#company-profile .desc {
	color: #000;
}

/* --------------------------------
 * detailed pages of about us
 * -------------------------------- */
#section_slogan-and-purpose {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_strategy {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height: 1500px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_profile {
	margin: 0px 0% 0px 0%;
	padding:0px;
/*	height: 1500px;*/
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.as-of-when {
	margin: 0px 0px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	font-weight: solid;
}
.column1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 250px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 250px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row3 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	padding: 30px;
	width: 30%;
	float: left;
}
.row3_1 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	padding: 30px;
	width: 70%;
	float: left;
}
.column4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row4 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 900px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row5 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 900px;
	padding-top: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
	padding-left:1.3em;
	text-indent:-1.3em;
}
.column6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: right;
	font-weight: bold;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 30%;
	float: left;
}
.row6 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	text-align: left;
	font-weight: solid;
	height: 80px;
	padding-top: 15px;
	padding-left: 0px;
	padding-right: 30px;
	width: 70%;
	float: left;
}
.column8 {
	height: 30px;
	width: 30%;
	float: left;
}
.row8 {
	height: 30px;
	width: 70%;
	float: left;
}
.column7 {
	clear: both;
}
/* --------------------------------
 * products-and-services
 * -------------------------------- */
#products_and_services {
	margin: 0px 0% 0px 0%;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#products_and_services .image {
	float: left;
	width: 50%;
	height: 250px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#products_and_services .content {
	float: left;
	width: 50%;
	height: 250px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#products_and_services .title {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#products_and_services .desc {
	color: #fff;
}
#products_and_services p {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
}
#products_and_services .special {
	margin: 0px;
	border: none;
	color: black;
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
	margin: 0px 5% 0px 5%;
}

#flex4 {
	margin: 0px 0% 0px 0%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: scroll;
}
#flex4 .box {
	align-items: stretch;
	width: 280px;
	margin:10px;
}
#flex4 .box .shashin{
	width: 280px;
	height:　200px;
	margin:　0px;	
	padding: 0px;
	border: solid 1px rgb(105,206,246);
	vertical-align:top;
}
#flex4 .box h3 {
	width: 280px;
	height: 0px;
	margin: 0px;
	padding: 30px 0px 10px 0px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: center;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
}
#flex4 .box p {
	width: 280px;
	height: 150px;
	margin: 0px 0px 0px 0px;
	padding: 30px 8px 0px 8px;
	border: none;
	color: black;
	background-color: rgb(204,235,246);
	text-align: left;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: solid;
	font-size: 15px;
    line-height:25px;
}
/* --------------------------------
 * news
 * -------------------------------- */
#news {
	margin: 0px 0% 0px 0%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#news h2 {
	text-align: left;
}
#news p {
	margin-top: 0px;
	text-align: left;
}
#news .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#news .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(106,115,105);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#news .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#news .desc {
	color: #fff;
}
#pick_up_contents2 {
	background-color: #ffffff;
	font-family: Arial, Helvetica, "sans-serif";
	color: #000000;
	height: 500px;
	margin: 10px 5% 10px 5%;
	overflow:scroll;
}
#pick_up_contents2 h2{
	text-align: left;
}
#pick_up_contents2 p{
	text-align: left;
}
.scroll-list2 {
	margin-top: 30px;
	max-height: 500px;
	overflow-y: auto;
	margin-bottom: 30px;
	list-style-type: none;
}
.scroll-list2 .scroll-item2 a {
	display: block;
	padding: 10px 15px;
	color: #333;
	font-size: 0;
	transition: background-color 0.1s;
}
.scroll-list2 .scroll-item2:nth-of-type(even) a {
	background: url('images/bg-slash.gif');
}
.scroll-list2 .scroll-item2 a:hover {
	background-color: #fafaf8;
}
.scroll-list2 .date2 {
	display: inline-block;
	width: 19%;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 13px;
}
.scroll-list2 .category2 {
	display: inline-block;
	width: 8%;
	border-radius: 5px;
	background-color: #d03c56;
	color: #fff;
	text-align: center;
	letter-spacing: 1px;
	font-size: 12px;
	line-height: 16px;
}
.scroll-list2 .category2.news2 {
	background-color: #2c3c53;
}
.scroll-list2 .title2 {
	display: inline-block;
	width: 73%;
	padding-left: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

/* --------------------------------
 * publications-and-videos
 * -------------------------------- */
#publications-and-videos-overall {
	margin: 0px 0% 0px 0%;
	height: 300px;
	padding: 0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#publications-and-videos-overall h2 {
	text-align: left;
}
#publications-and-videos-overall p {
	margin-top: 0px;
	text-align: left;
}
#publications-and-videos-overall .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#publications-and-videos-overall .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(0,0,0);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#publications-and-videos-overall .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#publications-and-videos-overall .desc {
	color: #ddc
}

/* --------------------------------
 * publications-and-videos-item
 * -------------------------------- */
#publications-and-videos {
	margin: 0px 5% 0px 5%;
	height: 500px;
}
.item {
	width: 180px;
	margin-bottom: 4px;
	padding: 8px;
	border-bottom: 3px solid;
	border-radius: 5px;
	background-color: #fff;
}
.item .image {
	display: block;
	width: 100%;
	height: 109px;
}
.item .category {
	margin: 15px 9px 10px;
	color: #aaa;
	letter-spacing: 1px;
	font-family: "Trebuchet MS", "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
.item .category::before {
	content: '';
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 5px;
	border: 2px solid;
	border-radius: 50%;
	vertical-align: -5px;
}
.item .description {
	margin: 10px;
	line-height: 1.5;
}
.item > a {
	display: block;
	margin: -8px -8px -11px;
	padding: 8px 8px 11px;
	border-radius: inherit;
	color: #777;
	transition: all 0.3s;
}
.item > a:hover {
	box-shadow: 0 0 6px -1px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
}
.item-maindish,
.item-maindish .category::before {
	border-color: #FFC0CB;
}
.item-appetizer,
.item-appetizer .category::before {
	border-color: #76C047;
}
.item-column,
.item-column .category::before {
	border-color: #FFF100;
}
.item-breaktime,
.item-breaktime .category::before {
	border-color: #C1EFFF;
}
.item-m {
	width: 364px;
}
.item-m .image {
	height: 146px;
}
.item-l {
	width: 732px;
}
.item-l .image {
	height: 403px;
}

/* --------------------------------
 * contact_form
 * -------------------------------- */
#section_contact_form {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height:2300px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#section_contact_form .button {
	text-align: center;
}
#section_contact_form .button {
	text-align: center;
}
#disclaimer {
	margin: 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: rgb(236,247,251);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	height: 1100px;
	overflow: hidden;
	width: 100%;
	padding-left:1.0em;
	text-indent:-1.0em;
}
#disclaimer li {
	padding: 0px 5% 0px 5%;
}
#blue {
}
table tbody tr th,
table tbody tr td {
　  width: 100%;
	display: block;
	float: center;
}
table tbody tr th {
	padding-left: 20px;
	color: black;
	text-align: left;
	border: none;
	background-color: #ffffff;
	width: 300px;
}
table tbody tr td {
	padding: 10px;
	text-align: left;
	border: none;
	background-color: #ffffff;
	width: 100%;
	height: 40px;
}
table {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	margin-left: auto;
	margin-right: 0%;
	border-collapse: collapse;
	height: 1300px;
	margin: 1px;
}
#textfield{
	text-align: left;
}
#item1{
    border: 1px solid rgb(161,171,170);
}
#item2{
    border: 1px solid rgb(161,171,170);
}
#item3{
    border: 1px solid rgb(161,171,170);
}
#item4{
    border: 1px solid rgb(161,171,170);
}
#textfield1{
	text-align: left;
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#textarea{
	text-align: left;
	width: 90%;
	height: 400px;
    border: 1px solid rgb(161,171,170);
	padding-top: 10px;
	padding-left: 10px;
}
#text-count {
   display: block;
   text-align: right;
   margin-top: 10px;
   margin-right: 10%;
}
#text-count.over {
   font-weight: bold;
   color: #c90000;
}
#textfield2{
	text-align: left;
	width: 25%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#otoiawase {
	height: 500px;	
}
#textfield3{
	text-align: left;
	width: 25%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield4{
	text-align: left;
	width: 25%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield5{
	text-align: left;
	width: 25%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield6{
	text-align: left;
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#textfield7{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#email{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#email_check{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left:10px;
}
#tel{
	text-align: left;	
	width: 90%;
	height: 30px;
    border: 1px solid rgb(161,171,170);
	padding-left: 10px;
}
#submit{
	float: center;
	margin: 0 0% 5% 0%;
	padding: 10px 0px 10px 0px;
	font-size:　15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
#reset{
	float: center;
	margin: 0 0% 0 0%;
	font-size:15px;
	background: rgb(23,115,168);
	color: white;
    border: 1px solid rgb(23,115,168);
	height: 30px;
}
.maintitle {
	height: 50px;
	font-color: white;
	margin: 20px 5% 0px 5%;
}
.maintitle h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 50% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease {
	margin: 0px 5% 0px 5%;
	padding:0px;
	height: 2100px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
	overflow: fixed;
}
#pressrelease .image {
	float: left;
	width: 50%;
	height: 200px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#pressrelease .content {
	float: left;
	width: 50%;
	height: 200px;
	background-color: rgb(48,89,168);
	opacity: 1;
	margin: 0px;
	padding: 0 10px 0 10px;
}
#pressrelease .title {
	margin-top: 45px;
	margin-bottom: 15px;
	color: #fff;
	font-weight: normal;
	font-size: 2.0rem;
	clear: both;
}
#pressrelease .desc {
	color: #fff;
}
.maintitle_pressrelease {
	height: 50px;
	font-color: white;
	margin: 20px 5% 0px 5%;
}
.maintitle_pressrelease h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(117,188,219);
	position: relative;
	margin: 0px 60% 0px 0px;
	font-size: 18px;
	padding-bottom: 5px;
}
.maintitle_pressrelease h3:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px rgb(57,137,192);
	bottom: -2.5px;
	width: 50%;
}
#pressrelease h4 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
}
#pressrelease h3 {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: bold;
	text-align: center;
}
#pressrelease p {
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: left;
	line-height: 25px;
}
#pressrelease .right{
    font-family: Arial, Helvetica, "sans-serif";
    padding: 0px;
    font-size: 15px;
    font-weight: normal;
	text-align: right;
}
.share {
	margin: 0px 0px 0px 0px;
	padding:0px;
	height: 200px;
	flex-direction: column;
	background-color: #ffffff;
}
.btn-twitter {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #55acee;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  height:40px;
  width:5%;
  float:left;
}
.btn-twitter::after {
  position: absolute;
  content: '\f099';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  float:left;
}
.btn-facebook {
  display: inline-block;
  padding: .6em .8em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #315096;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  float:left;
}
.btn-facebook::after {
  position: absolute;
  content: '\f09a';
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
}
.btn-line {
  display: inline-block;
  padding: .6em 1em .6em 2.5em;
  margin: 0 30px .4em 0;
  background-color: #1dcd00;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  height:40px;
  width:5%;
  clear:both;
}
.btn-line::after {
  position: absolute;
  content: "\f3c0";
  font-family: 'Font Awesome 5 Brands';
  top: 50%;
  left: .5em;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: 400;
}
.each-page-image {
	margin: 10px 5% 0px 5%;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.each-page-image .image {
	width: 100%;
	height: auto;
}
.section_message {
	display: none;
}
.section_message_responsive {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	height: 2300px;
	background-color: white;
	margin: 0px 5% 0px 5%;
}
.subtitle {
	font-size: 18px;
	width: 960px;
	height: 20px;
	background-color: white;
	color: black;
}
.message {
	width: 70%;
	height: 1200px;
	margin: 0px;
	border: 0px white solid;
	padding-left: 30px;
	padding-right: 20px;
	background-color: white;
	text-align: justify;
	float: right;
	overflow: scroll;
	letter-spacing: 0px;
	line-height:30px;
}
.message_responsive {
	width: 70%;
	height: 2200px;
	margin: 0px;
	border: 0px white solid;
	padding-left: 30px;
	padding-right: 20px;
	background-color: white;
	text-align: justify;
	float: right;
	overflow: scroll;
	letter-spacing: 0px;
	line-height:30px;
}
.comment {
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 15px;
	margin: 10px 5% 0px 5%;
	letter-spacing: 0px;
	line-height:30px;
}
.navi {
	width: 30%;
	height: 1000px;
	background-color: white;
	float: right;
	padding-left:20px;
}
.picture {
	width: 80%;
	height: auto;
}
.adjustment {
	width: 80%;
	height: 20px;
	backgroud-color: white;
	text-align: right;
	float: right;
}

/* --------------------------------
 * paragraph
 * -------------------------------- */
.table_of_contents {
	margin: 0px 5% 0px 5%;
	padding:0px;
	background-color: #ffffff;
	font-size: 15px;
}
#terms_of_services {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#terms_of_services2 {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
#privacy_policy {
	margin: 0px 5% 0px 5%;
	padding:0px;
	display: flex; 
	flex-direction: column;
	background-color: #ffffff;
}
.wide {
	display: none;
}
.paragraph {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1.0em;
	text-indent:-1.0em;
}
.paragraph li {
	padding: 0px 30px 0px 50px;
}
.paragraph2 {
	margin: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1.0em;
	text-indent:-1.0em;
}
.paragraph2 li {
	padding: 0px 30px 0px 50px;
}
.paragraph3 {
	margin: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 15px;
	background-color: white;
	border:	1px solid rgb(0,162,191);
	line-height: 25px;
	text-align: left;
	font-weight: solid;
	overflow: scroll;
	width: 100%;
	padding-left:1.0em;
	text-indent:-1.0em;
}
.paragraph3 li {
	padding: 0px 30px 0px 50px;
}

.migiyose {
	margin-right:60px;
	text-align:right;
}
.first_indent {
	padding-left: 1.4em;
	text-indent:  -1.4em;
}
.second_indent {
	padding-left: 2em;
	text-indent: -1.0em;
}
.third_indent {
	padding-left: 6em;
	text-indent: -1.4em;
}
.fourth_indent {
	padding-left: 8em;
	text-indent: -1.4m;
}
.fifth_indent {
	font-size: 15px;
	padding-left: 1.4em;
	text-indent: -1.4em;
	margin: 0px 5% 0px 15%;
}
.maintitle2 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 25px;
}
.maintitle2 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 8% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle3 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 3em;
}
.maintitle3 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(196,194,190);
	position: relative;
	margin: 0px 9% 0px 0px;
	padding: 0px 0px 0px 22px;
	font-size: 15px;
	padding-bottom: 5px;
}
.maintitle5 {
	height: 50px;
	font-color: white;
	margin: 0px 0px 0px 0px;
}
.maintitle5 h3 {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	border-bottom: solid 3px rgb(188,217,228);
	position: relative;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 15px;
	padding-bottom: 5px;
}
.bar2 {
	height: 30px;
	color: black;
	margin: 0px 0px 0px 5%;
	vertical-align: baseline;
	float: left;
	width: 60%;
	width: 60%;
}
.bar2 p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(23,80,145);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.bar2 p .bold{
	font-weight: bold;
	color: rgb(23,80,145);
}
.bar2 p a:link {
	color: black;
	text-decoration: none;
}
.bar2 p a:visited {
	color: black;
	text-decoration: none;
}
.bar2 p a:hover {
	color: black;
	text-decoration: underline;
}
.page_top {
	height: 30px;
	color: black;
	margin: 0px 5% 0px 0px;
	vertical-align: baseline;
	float: right;
	width: 30%;
	text-align:right;
}
.page_top p {
	font-family: Arial, Helvetica, "sans-serif";
	font-type: solid;
	font-size: 12px;
	color: rgb(122,137,135);
	font-weight: solid;
	position: relative;
	margin: 0px 0px 0px 0px;
	padding-bottom: 0px;
}
.page_top p .bold{
	font-weight: bold;
	color: rgb(122,137,135);
}
.page_top p a:link {
	color: black;
	text-decoration: none;
}
.page_top p a:visited {
	color: black;
	text-decoration: none;
}
.page_top p a:hover {
	color: black;
	text-decoration: underline;
}
}