@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------
	共通
---------------------------------------------------- */
@media only screen and (max-width: 767px){
	.is_sp{
		display: block!important;
	}
	.is_pc{
		display: none!important;
	}
}

@media only screen and (min-width: 768px){
	.is_sp{
		display: none!important;
	}
	.is_pc{
		display: block!important;
	}
}

.red{
	color: #ea5549;
}

/* ===== アップデート機能 ===== */

figcaption {
  color: grey;
  font-size: 100%;
  margin-top: 3%;
  text-align: center;
}

#newfunction{
	width:1100px;
	margin:0 auto;
}
#newfunction h3{
	font-weight: bold;
	font-size: 180%;
	margin:0 0 0;
	font-style: italic;
	text-align:center;
	color:#ad8f2b;
}

#newfunction ul li{
	float:left;
	list-style:none;
	background:#fff;
}
#newfunction ul li img{
	width:100%;
}

ul.pickup_main{
	list-style:none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 10px;
	margin:0 0 50px;
	padding:0;
}
ul.pickup_main li{
	border:1px solid #d0d0d0;
}
li.pickup {
	overflow:		hidden;
	position:		relative;
	border:1px solid #d0d0d0;
}
li.pickup .caption {
	font-size:		110%;
	text-align: 	center;
	padding: 90px 10px 0;
	color:			#fff;
}
li.pickup .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(173,143,43,0.8);
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
li.pickup:hover .mask {
	opacity:		1;	/* マスクを表示する */
}
#pickup{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
  padding: 0;
}
.pic_item{
	overflow:hidden;
	border:1px solid #041e69;
	overflow:hidden;
	padding:10px;
	background:#fff;
	border-radius: 10px;
}
.pic_left{
	float:left;
}

.pic_right{
	float:right;
	line-height:1.7;
}
.pic_right .pickup span{
	font-size:110%;
}
.pic_right_in{
	padding: 10px;
}
.pickup span{
  background-image: linear-gradient(to right, #ad8f2b 0%, #c1a33f 100%);
  color: #fff;
  padding: 7px 20px;
  display: inline;
  font-weight: bold;
  text-align: center;
	font-style:	italic;
}

.pic_left img,.pic_right img{
	width:100%;
}
.pic_item h4{
	font-size:1.5rem;
	margin:10px 0 5px;
}
.pic_item h4 span{
	color:#011855;
}
.pic_item h4 p{
	font-size:120%;
}
.pic_item h4 p span{
	font-size:100%;
}

ul.newfunction_s{
	list-style:none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px 0;
	margin:70px 0 50px;
	padding:0;
}
ul.newfunction_s li{
	float:left;
	list-style:none;
	padding:15px;
}
ul.newfunction_s li.border_r{
	border-right:1px solid #041e69;
}
ul.newfunction_s li.border_b{
	border-bottom:1px solid #041e69;
}
ul.newfunction_s li p{
	line-height:1.6;
}
ul.newfunction_s li h5{
	font-size:120%;
	margin:15px 0 10px;
}
ul.newfunction_s li img{
	width:100%;
}
ul.newfunction_s li img:hover{
	opacity:0.6;
}
ul.newfunction_s li{
	float:left;
	list-style:none;
}
ul.newfunction_s li span{
	font-size:90%;
}
ul.newfunction_s li span a{
	text-decoration:underline;
}

table.section_table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
}

table td {
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 15px;
  vertical-align: top;
  text-align: left;
	background:#fff;
}
.section {
  max-width: 1024px;
  margin: 0 auto;
  padding: 50px 10px;
}
.detail_btn {
	margin-top:20px;
}
.detail_btn a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px auto;
  padding: 0.7em 2em;
  width: 220px;
  color: #c1a33f;
  font-size: 18px;
  transition: 0.3s;
text-align:center;
text-decoration:none;
border:1px solid #c1a33f ;
  background-color: #fff;
}

.detail_btn a::after {
  content: '';
  transform: rotate(45deg);
}

.detail_btn a:hover {
  text-decoration: none;
  background-color: #c1a33f;
	color:#fff;
	border:1px solid #fff;
}
.detail_btn_s {
	margin-top:15px;
}
.detail_btn_s a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px auto;
  padding: 0.7em 2em;
  width: 220px;
  color: #c1a33f;
  font-size: 16px;
  transition: 0.3s;
text-align:center;
text-decoration:none;
border:1px solid #c1a33f ;
  background-color: #fff;
}

.detail_btn_s a::after {
  content: '';
  transform: rotate(45deg);
}

.detail_btn_s a:hover {
  text-decoration: none;
  background-color: #c1a33f;
	color:#fff;
	border:1px solid #fff;
}
#cp{
	margin: 20px auto;
	text-align:center;
}
#cp a:hover{
	opacity:0.8;
}

section {
  max-width: 600px;
  margin: 0 auto;
}
a.btn_04 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  position: relative;
  background: #228bc8;
  border: 1px solid #228bc8;
  box-sizing: border-box;
  padding: 0 25px 0 40px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
}
a.btn_04:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 25px;
  margin-top: -6px;
}
a.btn_04:hover {
  background: #fff;
  color: #228bc8;
}
a.btn_04:hover:before {
  border-top: 2px solid #228bc8;
  border-right: 2px solid #228bc8;
}
@media screen and (max-width: 736px) {
	.youtube{
	  width: 96%;
	  padding-top: 55%;
	}
}

@media screen and (min-width: 737px) and (max-width:1200px){
	#newfunction {
		width:96%;
	}
}

@media all and (max-width: 767px) {
#newfunction,.pic_left,.pic_right,#cp{
	width:98%;
	margin:0 auto;
}
  table th, table td {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  table tr:last-child td:last-child {
    border-bottom: 1px solid #ccc;
  }
ul.newfunction_s li{
	padding:5px;
}
	ul.newfunction_s .border_b{
		border-right:1px solid #041e69 !important;
	}
#pickup{
  grid-template-columns: 1fr;
}
.pic_right_in {
  padding: 15px 0;
}
ul.newfunction_s {
  grid-template-columns: 1fr;
}
ul.pickup_main{
	grid-template-columns: 1fr 1fr
}
li.pickup .caption {
	padding: 50px 10px 0;
}
ul.newfunction_s{
	grid-template-columns: 1fr 1fr ;
	margin:70px 0 50px;
}
}



/* 共通 */
html{
	font-size: 62.5%;
	margin:0;
	padding:0;
	height:100%;
}
body{
	color: #111111 !important;
	margin:0 !important;
	padding:0 !important;
	font-family: "Noto Sans Japanese", "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, verdana, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	font-size: 1.6em;
	font-weight:normal;
	line-height:160%;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	margin:0;
	padding:0;
	height:100%;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
.main_bottom {
	width:100%;
	min-height: 100%;
	margin:0;
	padding: 0;
	background:#fff;
}
.main_bottom_in {
	width:90%;
	min-height: 100%;
	max-width:1500px;
	margin:5% auto;
}
h2{
	font-size: 2rem;
	letter-spacing: 0.1em;
	padding-top: 3%;
	margin: 1% 3%;
	width: 94%;
}
h3{
	font-size:2.5rem;
	letter-spacing:0.08em;
	font-weight:normal;
	margin-top:1%;
	text-align: center;
}
article{
	margin-top:5%;
}
p{
	text-align:left;
	letter-spacing:0.08em;
	margin-left:3%;
}
p.cap{
	font-size:90%;
	text-align:center;
	margin-top: 0;
}
p.note{
	font-size:80%;
}
.att{
	font-size:85%;
	font-weight:light;
	text-align:left;
	list-style:none;
	margin-left:5%;
	opacity:0.7;
}
a {
	color: #222;
	position: relative;
}
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
div.video_box{
	position: relative;
	text-align: center;
	vertical-align:middle;
}
div.video_box i.youtube{
	position: absolute;
	bottom: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding: 0;
}
div.video_box i.youtube:before{
	position:relative;
    display: inline-block;
    content: '\f144';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:5rem;
	font-style: normal;
	opacity:0.6;
}
div.video_box i.youtube_b{
	position: absolute;
	bottom: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding: 0;
}
div.video_box i.youtube_b:before{
	position:relative;
    display: inline-block;
    content: '\f144';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:8rem;
	font-style: normal;
	opacity:0.6;
}
#main_slide{
	background:#ccc;
	height:295px;
	margin-bottom:2%;
}
div.detail_box{
	position: relative;
	text-align: center;
	vertical-align:middle;
}
div.detail_box i.detail{
	position: absolute;
	bottom: 0;
	right: 0;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
}
div.detail_box i.detail:before{
	position:relative;
    display: inline-block;
    content: '\f054';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:2rem;
	font-style: normal;
	opacity:0.6;
	background:#041e69;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding:50%;
}
div.big_box{
	position: relative;
	text-align: center;
	vertical-align:middle;
}
div.big_box i.big{
	position: absolute;
	bottom: 0;
	right: 0;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
}
div.big_box i.big:before{
	position:relative;
    display: inline-block;
    content: '\f00e';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #000;
	font-size:3rem;
	font-style: normal;
	opacity:0.6;
}
div.LeftBox{
	float:left;
	width:46%;
	margin-top: 3%;
	margin-left:3%;
	display:table-cell;
}
.case_bc div.LeftBox{
	float: unset;
	display: flex;
  width: 100%;
  margin: 0;
}

#casestudy div.LeftBox a{
	display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
div.RightBox{
	float:right;
	width:46%;
	margin-top: 3%;
	margin-right:3%;
	display:table-cell;
}
.case_bc div.RightBox{
	float: unset;
	display: block;
	width: 100%;
  margin: 0;
}
div.CenterBox{
	width:100%;
	margin-top: 3%;
}
div.LeftBox img,div.RightBox img,div.CenterBox img{
	width:100%;
}
div.LeftBox video,div.RightBox video,div.CenterBox video{
	width:100%;
}
div.button_box{
	width:100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: stretch;
  align-items: stretch;
  text-align: center;
	margin-top:2%;
}
.btn_next {
	float:left;
	position: relative;
	display: inline-block;
	padding: 2% 10%;
	border-bottom:1px solid #041e69;
	background:#041e69;
	color:#fff;
	text-align: center;
	text-decoration: none;
}
.btn_next::after {
	position: absolute;
	top: 50%;
	right: .9em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #fff;
	transition: all .2s;
}
.btn_next:hover::after {
	right: -.1em;
}
.btn_back {
	float:left;
	width:20%;
	position: relative;
	display: inline-block;
	padding: 1% 10%;
	margin:1%;
	border-bottom:1px solid #041e69;
	background:#041e69;
	color:#fff;
	text-align: center;
	text-decoration: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.btn_back::after {
	position: absolute;
	top: 50%;
	left: .9em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-right-color: #fff;
	transition: all .2s;
}
.btn_back:hover::after {
	left: -.1em;
}
.btn_bottom {
	display: inline-block;
	text-decoration: none;
}
.btn_bottom::after {
	position: absolute;
	bottom: 20%;
	right: -3em;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-left-width: 5px;
	border-right-width: 5px;
	border-top-color: #041e69;
	transition: all .2s;
}
.btn_bottom:hover::after {
	bottom: -.1em;
}
ul.pagelink{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin:1% auto 0;
	padding: 0;
}
ul.pagelink li{
	list-style:none;
 	position: relative;
	padding: 1% 7%;
	margin: 2%;
}
ul.pagelink li:before,ul.pagelink li:after{
	position: absolute;
	content: '';
}
ul.pagelink li:before {
	right: 0;
	bottom: 0;
	width: 30px;
	height: 30px;
	border-right: 1px solid #041e69;
	border-bottom: 1px solid #041e69;
}
ul.pagelink li:after{
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	border-top: 1px solid #041e69;
	border-left: 1px solid #041e69;
}
div.contact{
	width:80%;
	margin:10% auto;
	border:1px solid #041e69;
	text-align:center;
}
div.contact p{
	text-align:center;
}
div.contact li{
	list-style:none;
}
div.contact li.mail:before{
	position:relative;
    display: inline-block;
    content: '\f0e0';
    font-family: 'FontAwesome';
	cursor:pointer;
	font-size:2.5rem;
	padding-right:1%;
}
div.contact li.tel:before{
	position:relative;
    display: inline-block;
    content: '\f2a0';
    font-family: 'FontAwesome';
	cursor:pointer;
	font-size:2.5rem;
	padding-right:1%;
}
@media screen and (max-width: 960px) {
h2{
	padding-top: 6%;
}
}
@media screen and (max-width: 736px) {
.main_bottom {
	width:100%;
	margin:0 auto;
	padding:0;
}
.main_bottom_in {
	width:96%;
	min-height: 100%;
	margin:5% auto;
}
article{
	margin-top:1%;
	width:100%;
}
h2{
	font-size: 2rem;
	padding-top:25%;
	text-align:center;
}
h3{
	font-size:2rem;
}
p{
	margin:5%;
}
img{
	width:100%;
}
div.LeftBox{
	clear:both;
	display:block;
	width:100%;
	margin:0;
}
div.RightBox{
	clear:both;
	display:block;
	width:100%;
	margin:0;
}
div.LeftBox img,div.RightBox img{
	width:100%;
}
div.LeftBox video,div.RightBox video{
	width:100%;
}
.btn_back {
	width:60%;
	padding: 2% 10%;
}
div.contact{
	width:95%;
	padding:1%;
}
div.contact ul{
	margin:0;
	padding:0;
}
ul.pagelink{
	display: none;
}
}

/* function */
#function div.mainimage{
	margin:0 auto;
	padding:0%;
    background: url('../../function/img/main_bc.png') center center no-repeat;
    background-attachment: scroll;
    background-size: auto;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
}
#function div.mainimage img{
	width:70%;
}
#function div.lead{
	text-align:center;
	width:85%;
	margin:0 auto;
	font-size: 1em;
	font-weight:normal !important;
}
#function h3{
	font-size: 2.5rem;
	padding: 1%;
	border-top:1px solid #041e69;
	border-bottom:1px solid #041e69;
	text-align: center;
	margin:7% auto 0;
}
#function h4{
	font-size: 2rem;
	padding: 1%;
	border-bottom:1px solid #041e69;
	text-align: center;
	background:#fffaef;
}
span.new{
	font-size: 1.5rem;
	background:#fff000;
	margin: 0.5% 2% 0.5% 0;
	padding:0.5% 1%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
span.cloud{
	font-size: 1.5rem;
	background:#c1e0f0;
	margin: 0.5% 2% 0.5% 0;
	padding:0.5% 1%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#function ul.pagelink2{
	width:95%;
	margin:3% auto;
	padding:0;
	list-style:none;
	margin:1% auto 0;
}
#function ul.pagelink2 li{
	float:left;
	background-color:#041e69;
	color:#fff;
	font-size: 1.5rem;
	font-weight:bold;
	padding:0.5%;
	width:22%;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	margin:1%;
	text-align:center;
	white-space:nowrap;
}
#function ul.pagelink2 li:before{
	position:relative;
    display: inline-block;
    content: '\f107';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:3rem;
}
#function ul.pagelink2 li:after{
	display:none;
}
#function table.other{
	width:100%;
	font-size: 1.5rem;
	border-bottom:1px solid #000;
}
#function table.other td{
	padding:0.5%;
	border-right:1px solid #ddd;
	background:#eee;
}
#function div.LineBoxTop{
	text-align:center;
	width:100%;
	margin:0;
	padding:0;
	display:table;
}
#function div.LineBoxTop img{
	width:100%;
}
#function div.LineBoxTop h4{
	font-size: 2.2rem;
	background: #e7d253;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#function div.LineBox{
	text-align:center;
	display:table;
	width:100%;
}
#function div.LineBox img{
	width:70%;
}
#function_detail h1{
	font-size: 3rem ;
	text-align:left;
	font-weight:bold;
	border-bottom:1px solid #041e69;
	padding-bottom:1%;
}
#function_detail h2{
	font-size: 2rem ;
	text-align:left;
	font-weight:bold;
}
#function_detail h3{
	font-size: 2rem ;
	text-align:left;
	font-weight:bold;
}
#function_detail h4{
	font-size: 2rem;
	padding: 1%;
	border-bottom:1px solid #041e69;
	text-align: center;
	background:#fffaef;
}
#function_detail h4.video{
	font-size: 1.8rem;
	background:none;
}
#function_detail h4.video:before{
	background:none;
	position:relative;
    display: inline-block;
    content: '\f008';
    font-family: 'FontAwesome';
	cursor:pointer;
	font-size:2.5rem;
	padding-right:1%;
}
#function_detail table{
	border:1px sold #ddd;
}
#function_detail table th{
	background:#eee;
	padding:1%;
}
#function_detail table td{
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
	padding:1%;
}
#function_detail div.LineBox ul{
	width:100%;
	margin:0;
	padding:0;
}
#function_detail div.LineBox ul li{
	float:left;
	list-style:none;
	margin:1%;
	width:31%;
	display: inline-block;
}
#function_detail div.LineBox ul li p.cap{
	margin-top:0;
	padding-top:0;
}
#function_detail div.LineBox strong{
	font-weight:normal;
	color:#3571d8;
}
@media screen and (max-width: 736px) {
#function div.mainimage img{
	width:100%;
}
#function div.lead{
	text-align:left;
	width:100%;
}
#function ul.pagelink2{
	width:100%;
	margin:3% auto;
}
#function ul.pagelink2 li{
	width:47%;
	margin:1%;
	font-size: 1.3rem;
	letter-spacing:-0.05em;
}
#function h3{
	font-size: 2rem;
}
#function h4{
	font-size: 1.5rem;
}
#function table.other td{
	width:100%;
	display:block;
	clear:both;
}
#function div.LineBoxTop h4{
	font-size: 1.8rem;
}
#function_detail h1{
	font-size: 2.3rem ;
	line-height:150%;
}
#function_detail div.LineBox ul li{
	width:48%;
}
}

/* about */
#about{
	margin:0;
	padding:0;
}
#about .lead{
	text-align:center;
	margin:3% auto 1%;
	line-height:200%;
}
#about h3{
	font-size:2.5rem;
	color:#041e69;
	font-weight: bold;
	line-height:120%;
	text-align:left;
}
#about h4{
	font-size:4rem;
	color:#b6943a;
	font-family: adobe-garamond-pro, serif;
	font-weight: 400;
	margin-bottom:2%;
	letter-spacing:-0.03em;
	opacity:0.6;
	margin-top: 0;
	padding-top: 0;
}
#about h4 span{
	font-size:8rem;
}
@media screen and (max-width: 736px) {
#about .lead{
	text-align:left;
}
#about h3{
	font-size:2.3rem;
	text-align:center;
}
#about h4{
	font-size:3rem;
	text-align:center;
	margin-top:5%;
}
#about h4 span{
	font-size:5rem;
}
}


/* sample */
#sample div.lead{
	text-align:center;
	width:85%;
	margin:0 auto;
}
#sample ul.sample{
    width: 100%;
	margin:1% auto;
	padding: 0;
	display:block;
	clear:both;
    display: table;
    table-layout: fixed;
}
#sample ul.sample li{
	width:20.7%;
	height: 0;
	overflow:hidden;
	margin:2%;
	display:inline-block;
	/display:inline;
	/zoom:1;
	vertical-align:top;
	background-size: cover;
	padding-bottom: 13%;
}
#sample ul.sample li img{
	width:100%;
}
@media screen and (max-width: 960px) {
#sample ul.sample li{
	width:45%;
	background-size: cover;
	padding-bottom: 30%;
}
}
@media screen and (max-width: 736px) {
#sample ul.sample{
	width:95%;
	margin:1% auto;
	padding:0;
	clear:both;
	display:block;
}
#sample ul.sample li{
	width:49%;
	margin:1% auto;
	background-size: cover;
	padding-bottom: 32%;
}
}
.scale {
    overflow: hidden;
}
.scale img {
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.scale img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

/* panorama */
#panorama .lead{
	text-align:center;
	margin:3% auto 1%;
	line-height:200%;
}
#panorama h4{
	font-size: 2rem;
	text-align:center;
	padding:1%;
	border-top:1px solid #81511c;
	border-bottom:1px solid #81511c;
}
#panorama div.how{
	width:80%;
	margin:1% auto;
	background:#fffaef;
	border-radius:15px;
	padding:1%;
	text-align:center;
}
#panorama .iframeWrapper{
    position:relative;
    width:60%;
	margin:1% auto;
    height:0;
    padding-top:30%;
}
#panorama .iframeWrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#panorama div.DlBox{
	width:80%;
	margin:1% auto;
	padding:0;
}
#panorama div.DlBox ul li{
	width:43%;
	float:left;
	margin:2% 3%;
	list-style:none;
	text-align:center;
}
#panorama div.DlBox ul li img{
	width:100%;
	border:1px solid #614c3b;
}
@media screen and (max-width: 736px) {
#panorama h3{
	width:80%;
	margin:3% auto;
}
#panorama div.how{
	width:90%;
}
#panorama div.how img{
	display:none;
}
#panorama .iframeWrapper{
    width:90%;
    padding-top:60%;
}
#panorama div.DlBox{
	width:100%;
}
#panorama div.DlBox ul{
	width:95%;
	margin:1% auto;
	padding:0;
}
#panorama div.DlBox ul li{
	width:95%;
	clear:both;
	margin-top:8%;
}
}

/* 導入事例一覧 20241030追記 */
.casestudy_ttl_wrap{
	margin-top: clamp(48px, calc(56 / 737 * 100vw), 56px);
}
.casestudy_ttl_wrap a.logo{
	display: block;
	margin-left: 3%;
	margin-block-start: 1em;
	margin-block-end: 1em;
	width: clamp(200px, calc(240 / 737 * 100vw), 240px);
}
.casestudy_ttl_wrap .logo img{
	width: 100%;
	height: auto;
}
.casestudy_ttl{
	max-width: 1500px;
	width: 90%;
	margin: 0 auto;
	padding: 2% 0;
	border-top: 1px solid #81511c;
	border-bottom: 1px solid #81511c;
	font-size: 2.5rem;
	text-align: center;
}

/* casestudy */
#casestudy h3{
	width:100%;
	font-size:2.5rem;
	font-weight:bold;
	padding:2% 0;
	margin:3% auto;
	border-top:1px solid #81511c;
	border-bottom:1px solid #81511c;
}
#casestudy span.vol{
	background:#ac8422;
	color:#FFF;
	padding:3px 10px;
	margin-bottom:2%;
	margin-right:2%;
	font-weight:normal;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#casestudy img{
	float:center;
	margin:3% auto 0;
	display:block;
	max-width: 100%;
	height: auto;
}
#casestudy .case_bc img{
	float: unset;
	margin: 0;
	object-fit: cover;
  width: 100%;
  height: 100%;
}

/* 導入事例一覧 20241211追記 START */
@media screen and (max-width: 736px){

	#casestudy .column_img{
		width: 90%;
		margin-inline: auto;
	}
}
@media screen and (min-width: 737px){

	#casestudy .column_img{
		display: flex;
		max-width: 1130px;
		margin-inline: auto;
		column-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	}
	#casestudy .column_img img{
		float: unset;
		width: 50%;
	}
}
/* 導入事例一覧 20241211追記 END */

#casestudy .cap.youtube_wrap{
	max-width: 560px;
	margin-inline: auto;
}
#casestudy .cap.youtube_wrap iframe{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
#casestudy span.com{
	font-size:2rem;
	font-weight:bold;
	line-height: 200%;
}
#casestudy span.kind{
	color:#ac8422;
	border:1px solid #ac8422;
	padding:5px;
	margin-left:10px;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#casestudy strong{
	background:#fffea2;
	font-weight:normal;
}
#casestudy div.reason{
	margin: 5% auto;
	width: 100%;
	border: 1px solid #ccc;
	overflow: hidden;
	display: table;
}
#casestudy h3.reason_ttl{
	background: #111;
	color: #fff;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	width: 30%;
	font-size:2.5rem;
	font-weight: 400;
}
#casestudy div.reason_content ul li{
	line-height: 200%;
	list-style:none;
}
#casestudy p.que{
	font-size:2rem;
	font-weight:bold;
	margin:5% 0 2% 3%;
}
#casestudy p.ans{
}
#casestudy span.p01{
	color:#1219a1;
	border-bottom:1px solid #1219a1;
}
#casestudy span.p02{
	color:#d65a1d;
	border-bottom:1px solid #d65a1d;
}
#casestudy dl{  
	width : 90%;
	margin:0 auto;
}
#casestudy dt{  
	float : left;
	clear : both;
	font-weight : bold;
	text-align:center;
}
#casestudy dd{  
	margin-left : 50px;
}
#casestudy h4{
	font-size:170%;
	text-align: center;
	font-weight:normal;
}
#casestudy div.ref{
	background-image: url("../images/case_bc.gif");
	padding:1%;
}
#casestudy table{
	width:90%;
	border:1px solid #ccc;
	margin:3% auto;
	padding:2%;
	background:#FFF;
}
#casestudy table caption{
	text-align:left;
	font-size:110%;
	font-weight : normal;
	margin-bottom:2%;
}
#casestudy table td{
	border-bottom:1px dotted #ccc;
	padding:1%;
	border-right:1px dotted #ccc;
}
#casestudy table td.price{
	text-align:right;
	border-right:none;
}
#casestudy table td.last{
	border-bottom:3px solid #ccc;
}
#casestudy table td.total{
	border-bottom:none;
}

#casestudy .case_wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, calc(32 / 1600 * 100vw), 32px) clamp(10px, calc(48 / 1600 * 100vw), 48px);
}
#casestudy div.case_bc{
	/* width:50%;
	float:left; */
  width: 100%;
  /* float: unset; */
  display: flex;
  align-items: flex-start;
  column-gap: clamp(16px, calc(24 / 1600 * 100vw), 24px);
}
#casestudy h5{
	width: 100%;
	font-size:1.8rem;
	/* margin:10% auto 1%; */
	margin:10% auto 3%;
	padding:1%;
	border-top:1px solid #ac8422;
	border-bottom:1px solid #ac8422;
	color:#ac8422;
	text-align:center;
}
@media screen and (max-width: 736px) {
#casestudy h3{
	font-size:2rem;
}
#casestudy span.com{
	font-size:1.5rem;
}
#casestudy h3.reason_ttl{
	font-size:2rem;
}
#casestudy p.que{
	font-size:1.8rem;
}
#casestudy div.case_bc{
	/* width:48%;
	margin:1%;
	float:left; */
	display: block;
}
}

/* spec */
#spec table{
	width:80%;
	margin:1% auto;
}
#spec table p{
	overflow: hidden;
	margin:0.4%;
}
#spec table th{
	width:25%;
	border-right:1px #ccc solid;
	border-bottom:1px #ccc solid;
}
#spec table td{
	width:75%;
	/*border-bottom:1px #ccc solid !important;*/
	padding:2%;
}
#spec table p.imex{
	background:#fff;
	padding:0.5%;
	margin:0;
	color:#041e69;
	border:#041e69 1px solid;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin-right:3%;
	float: left;
}
@media screen and (max-width: 736px) {
#spec table{
	width:100%;
}
#spec table th{
	width:100%;
	display:block;
	padding:2%;
	margin-top:5%;
	border-right:none;
	border-bottom:1px #ccc dotted;
	background:#eee;
}
#spec table td{
	width:100%;
	display:block;
}
}

/* faq */
#faq span{
	font-size:150%;
	color:#041e69;
	margin-right:2%;
	font-weight:bold;
}
div.accordion {
	width: 95%;
	margin:1% auto;
}
div.accordion ul{
	list-style:none;
	border-top:1px solid #b2961e;
	border-bottom:1px solid #b2961e;
	padding: 0;
}
div.accordion ul li{
}
div.accordion ul li p{
	margin:2%;
	font-size:90%;
}
div.accordion .toggle{
	font-size:110%;
	padding-right:35px;
}
div.accordion > ul > li > a {
  display: block;
  font-size: 16px;
  text-decoration: none;
  background-color: #FFF;
  cursor: pointer;
  padding: 10px 12px;
  position: relative;
	padding:2%;
}
div.accordion > ul > li > a:hover{
  background-color: #eee;
}
div.accordion > ul > li > a:after, div.accordion > ul > li > a.active:after{
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 16px;
  color: #041e69;
}
div.accordion > ul > li > a:after{
  content: "▼";
}
div.accordion > ul > li > a.active:after{
  content: "▲";
}
div.accordion > ul > li > ul {
  display: none;
}
div.accordion > ul > li > ul > li > a{
  display: block;
  font-size: 14px;
  padding: 6px 12px;
  position: relative;
}
#faq table{
	width:85%;
	margin:3% auto;
}
#faq table th{
	border-top:1px solid #041e69;
	border-right:1px solid #041e69;
	padding:3%;
	width:30%;
}
#faq table th.last{
	border-bottom:1px solid #041e69;
}
#faq table td{
	border-top:1px solid #041e69;
	padding:3%;
}
#faq table td.last{
	border-bottom:1px solid #041e69;
}

@media screen and (max-width: 736px) {
div.accordion .toggle{
	font-size:100%;
}
}

/* price */
#price .lead{
	text-align:center;
	margin:3% auto 1%;
	line-height:200%;
}
#price h4{
	font-size:2.5rem;
	padding-left:3.2em;
	text-indent:-3.2em;
}
#price h4 span{
	font-size:2rem;
	background: #041e69;
	color: #FFF;
	padding: 3px 10px;
	margin-right: 2%;
	font-weight: normal;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#price span.tele{
	background: #fecf00;
	padding:0.5% 1%;
}
#price img{
	width:100%;
}
#price caption{
	font-size:2rem;
	font-weight:bold;
	text-align:left;
	margin-left:2%;
	margin-bottom:1%;
}
#price table{
	width:100%;
}
#price table th{
	border-top:1px solid #b2961e;
	border-right:1px solid #b2961e;
	padding:1%;
	background:#fffaef;
}
#price table th.first{
	border-left:1px solid #b2961e;
}
#price table td{
	border-top:1px solid #b2961e;
	border-right:1px solid #b2961e;
	padding:1%;
	background:#FFF;
}
#price table td.last, th.last{
	border-bottom:1px solid #b2961e;
}
#price a.help{
	background: url('../images/ico_help.png') no-repeat;
	padding-left:30px;
	padding-bottom:40px;
	height:40px;
	font-weight:normal;
}
#price div.btn_price{
	background-color:#0060F4;
	font-size: 2rem
	padding:1%;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	width:30%;
	margin:3% auto;
	color:#fff;
	text-align:center;
}
#price div.btn_price:before{
	position:relative;
    display: inline-block;
    content: '\f07a';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:3rem;
	padding-right:3%;
}
#price table.option{
	width:80%;
}
@media screen and (max-width: 736px) {
#price h4{
	font-size:2rem;
	padding-left:4em;
	text-indent:-4em;
}
#price div.btn_price{
	font-size: 1.8rem;
	width:80%;
}
}

/* compare */

#compare div.lead{
	font-size:2rem;
	text-align:center;
	line-height:250%;
}
#compare div.lead span{
	background:#ffee5d;
	padding:1% 3%;
}
#compare ul.pickup_top li{
	float:left;
	width:20%;
	margin:1%;
	padding:1%;
	background:#ff;
	list-style:none;
	border-radius:10px;
	border:1px solid #bebebe;
	text-align:center;
}
#compare ul.pickup_top li div{
	margin:0%;
	padding:2%;
	background:#041e69;
	border-radius:6px;
	color:#fff;
	text-align:center;
}
#compare ul.pickup_top li img{
	width:100%;
	margin:1% auto;
}
#compare ul.pickup_bottom li{
	float:left;
	width:20%;
	margin:1%;
	padding:1%;
	background:#ff;
	list-style:none;
	border-radius:10px;
	border:1px solid #bebebe;
	text-align:center;
}
#compare ul.pickup_bottom li div{
	margin:0%;
	padding:2%;
	background:#041e69;
	border-radius:6px;
	color:#fff;
	text-align:center;
}
#compare ul.pickup_bottom li img{
	width:100%;
	margin:1% auto;
}
#compare ul.pickup_bottom li a.detail{
	font-size:1.4rem;
	float: right;
	margin-top:1%;
	color:#041e69;
	width: 100%;
	text-align: right;
}
#compare ul.pickup_bottom li a.detail::before{
    content: '\f061';
    font-family: 'FontAwesome';
	margin-right:2%;
}
#compare div.flame{
	width:80%;
	margin:1% auto;
	padding:2%;
	background:#fff;
	border-radius:10px;
	border:1px solid #bebebe;
	text-align:center;
	height: 100%;
    min-height: 100%;
}
body > div.flame { 
    height: auto; 
}
#compare div.flame span{
	width:40%;
	margin:1%;
	padding:1%;
	background:#041e69;
	border-radius:6px;
	color:#fff;
	text-align:center;
	clear:both;
	display:block;
}
#compare div.flame h3{
	font-size:2.5rem;
	font-weight:bold;
	margin:0 auto 3%;
}
#compare div.flame img{
	width:85%;
	margin-bottom:2%;
}
#compare div.flame div.pname{
	font-size:1.2em;
	font-weight:bold;
	text-align:left;
	margin-left:2%;
}
#compare div.flame div.myhome{
	background:#efefef;
	border-radius:10px;
	padding:2%;
	font-size:90%;
}
#compare table{
	width:90%;
	margin:1% auto;
	font-size:90%;
}
#compare table caption{
	font-size:1.8rem;
	margin:1%;
}
#compare table th{
	border-bottom:1px solid #ccc;
	padding:1%;
}
#compare table th.pname{
	border-bottom:1px solid #ccc;
	padding:1%;
	background:#eee;
	text-align:center;
}
#compare table tr{
	border-bottom:1px solid #ccc;
	padding:2%;
	text-align:left;
	vertical-align:top;
}
#compare table td{
	border-bottom:1px solid #ccc;
	padding:2%;
	text-align:left;
}
#compare table strong{
	color:#ff0000;
	font-weight:normal;
}
#compare div.cam{
	width:80%;
	margin:4% auto;
}
#compare div.cam img{
	width:100%;
}
.scroll table{
width:100%;
}
.scroll{
overflow: auto;　　　　/*tableをスクロールさせる*/
white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}
#compare div.flame span.imex{
	background: #fff;
	padding: 0.5%;
	color: #041e69;
	border: #041e69 1px solid;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin-right: 1%;
}
#compare h4{
	font-size:2.5rem;
	margin:0;
	line-height:150%;
}
#compare h5{
	font-size:1.8rem;
	margin:0;
	line-height:150%;
}
#compare div.flame ul{
	width:100%;
	margin: 0;
	padding: 0;
	display:flex;
	flex-wrap:wrap;
}
#compare div.flame ul li{
	float:left;
	width:19.8%;
	margin:0.5% ;
	padding:2%;
	background:#fff;
	border-radius:10px;
	border:1px solid #bebebe;
	text-align:left;
	list-style:none;
	display:block;
}
#compare div.cam img.bana_sp{
	display:none;
}
@media only screen and (max-width: 960px){
#compare div.flame{
	width:95%;
}
#compare div.flame ul li{
	width:43%;
}
}
@media only screen and (max-width: 736px){
#compare ul.pickup_top{
	display:none;
}
#compare div.flame{
	width:95%;
	margin:3% auto;
}

#compare div.flame span{
	width:auto;
}
#compare div.flame h3{
	font-size:2rem;
}
#compare div.flame h4{
	font-size:1.8rem;
}
#compare div.cam{
	width:100%;
}
#compare div.cam img.bana_pc{
	display:none;
}
#compare div.cam img.bana_sp{
	display:block;
}
}


/* howto */
#howto .lead{
	text-align:center;
	margin:3% auto 1%;
	line-height:200%;
}
#howto table.howto{
	width:100%;
	padding:2%;
	background:#fff;
	border:1px solid #ddd;
	margin:3%;
}
#howto table.howto td{
	width:55%;
	vertical-align: top;
	border-bottom:2px solid #ddd;
}
#howto table.howto td.last{
	border:none;
}
#howto table.howto td.img{
	width:45%;
	vertical:top;
}
#howto table.howto h3{
	font-size:2rem;
	text-align:left;
	margin:2% auto 0;
	font-weight:bold;
}
#howto table.howto img{
	width:100% !important;
	float:left;
}
#howto hr.trouble{
	border:1px solid #fff;
	width:100%;
}
#howto span.trouble{
	background:#2f6e14;
	padding:0.5% 2%;
	color:#fff;
}
#howto div.trouble{
	display:flex;
}
#howto div.trouble_l{
	float:left;
	width:30.5%;
	padding:1.7%;
	margin:0.5%;
	border:2px solid #fff;
	background:#eee;
	border-radius: 5px;
}
#howto h3.trouble{
	font-size:1.8rem;
	margin:1% auto 5%;
	background:#797979;
	color:#fff;
	text-shadow:none;
	padding:1%;
}
#howto span.hint{
	background:#ca3c2d;
	padding:0.5% 2%;
	color:#fff;
}
/* fotter */
footer{
	background:#222222;
	padding: 1%;
	width:98%;
	margin:0;
}
footer nav.nav-footer{
	padding:3% 0 0% 2%;
	width: 97%;
	margin: 0;
}
footer ul{
	margin-left:-30px;
}
footer ul li{
	list-style:none;
	margin:2% 0;
}
footer ul li a{
	color:#FFF;
	text-decoration:none;
}
footer ul li a:hover {
    color: #6e4d08;
}
footer div.title{
	color:#e7d253;
	padding:1.5%;
	text-align:center;
	border-bottom:1px solid #e7d253;
}
footer div.col_logo{
	float:left;
	width: 20%;
	margin-right: 2%;
}
footer div.col_logo img{
	width:100%;
}
footer div.col_1{
	float:left;
	width: 18%;
	margin-right: 2%;
}
footer div.col_2{
	float:left;
	width: 18%;
	margin-right: 2%;
}
footer div.col_3{
	float:left;
	width: 16%;
	margin-right: 2%;
	text-align:center;
}
footer div.col_3 a{
	color:#FFF;
	text-decoration:none;
}
footer div.col_3 a:hover {
    opacity:0.5;
}
footer div.btn_price{
	background-color:#0060F4;
	font-size: 1.5rem;
	padding:1%;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	padding:3%;
}
div.btn_price:before{
	position:relative;
    display: inline-block;
    content: '\f07a';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:2rem;
	padding-right:3%;
}
footer div.btn_catalog{
	background-color:#4d4d4d;
	font-size: 1.5rem;
	padding:1%;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	padding:3%;
}
div.btn_catalog:before{
	position:relative;
    display: inline-block;
    content: '\f249';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:2rem;
	padding-right:3%;
}
footer div.btn_contact{
	background-color:#4d4d4d;
	font-size: 1.5rem;
	padding:1%;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	padding:3%;
}
div.btn_contact:before{
	position:relative;
    display: inline-block;
    content: '\f108';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:2rem;
	padding-right:3%;
}
footer div.english{
	margin:5% auto;
	font-size: 1.3rem;
}
footer div.english:before{
	position:relative;
    display: inline-block;
    content: '\f0ac';
    font-family: 'FontAwesome';
	cursor:pointer;
	color: #fff;
	font-size:2.5rem;
	padding-right:3%;
}
footer ul.sns{
	width:10%;
	margin:1% auto;
	padding: 0;
	display: flex;
	justify-content: center;
}
footer ul.sns li{
	list-style:none;
	margin-right:5%;
	width:33%;
	padding: 0;
}
footer ul.sns li img{
	width:100%;
}
footer p.copy{
	font-size:70%;
	opacity:0.8;
	color:#FFF;
	text-align:center;
	margin:0;
	width:100%;
	padding:0;
}
footer p.copy a{
	color:#FFF;
}
@media screen and (max-width: 960px) {
footer div.btn_price{
	background: none;
	background-color:#0060F4;
	font-size:90%;
	height:40px;
	padding:20px 10px 10px 10px;
	margin:0;
}
footer div.btn_catalog{
	background: none;
	background-color:#4d4d4d;
	height:40px;
	padding:10px 10px 10px 10px;
	margin-top: -4%;
	font-size:90%;
	letter-spacing:-0.05em;
}
footer div.btn_contact{
	background: none;
	background-color:#4d4d4d;
	height:30px;
	padding:20px 10px 10px 10px;
	margin-top: -4%;
	font-size:90%;
}
footer div.col_logo img{
	display:none;
}
footer div.col_1{
	float:left;
	width: 28%;
	margin-right: 1%;
}
footer div.col_2{
	float:left;
	width: 25%;
	margin-right: 1%;
}
footer div.col_3{
	float:left;
	width: 18%;
	margin-right: 1%;
	text-align:center;
}
footer ul.sns{
	width:20%;
}
}
@media only screen and (max-width: 736px){
footer{
	width:100%;
	margin:1% auto;
	padding: 0;
}
footer nav.nav-footer{
	clear:both;
	display:block;
	width:90%;
	height:100%;
	margin:1% auto;
}
footer div.col_logo{
	text-align:center;
}
footer div.col_logo img{
	width: 300%;
}
footer div.title{
	width: 95%;
	margin:1% auto;
	padding:0;
}
footer div.col_1{
	width: 100%;
	margin: 0;
	padding: 0;
}
footer div.col_2{
	width: 100%;
	margin: 0;
	padding: 0;
}
footer div.col_3{
	width: 100%;
	margin: 0;
	padding: 0;
}
footer ul.sns{
	width:40%;
}
}

/* page-top */
#page-top{
	width:50%;
	margin:5% auto 0;
	display:block;
	clear:both;
	text-align:center;
}
#page-top span{
	display:block;
	clear:both;
	text-align:center;
	line-height:400%;
    margin-left: -35px;
}
.arrow{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #855f11;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	content: "";
	vertical-align: middle;
}
.arrow_up::before{
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border-top: 2px solid #855f11;
	border-left: 2px solid #855f11;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* megasoftglobalnavi */
#header {
	width: 100%;
	color: #aaa;
	background: #222;
	position: relative;
	z-index: 10005;
}
#header .inner {
	position: static;
}
#logo {
	float: left;
	width: 125px;
	margin: 7px 0 0 20px;
}
#logo a {
	display: block;
	height: 0;
	padding: 40px 0 0;
	overflow: hidden;
	background: url(../img/logo.png) no-repeat left center;
	background-size: 100% auto;
}
@media only screen and (max-width: 767px) {
  #logo {
    width: 100px;
    margin: 10px 0 0 10px;
}
}


/* globalnavi */
#hNav {
  float: right;
}
#hNav ul{
	list-style:none;
}
#hNav > ul {
  border-right: 1px solid #333;
  height: 25px;
}
#hNav > ul > li {
  float: left;
	height: 40px;
}
#hNav > ul > li > a {
  color: #fff;
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 0 20px;
	font-size: 90%;
}
#hNav > ul > li > a:hover {
}
#hNav > ul > li > a:before {
  font-family: FontAwesome;
  font-weight: normal !important;
  margin-right: 10px;
  position: relative;
  top: 1px;
}
@media only screen and (max-width: 767px) {
  #hNav > ul > li > a {
    font-size: 7px;
    font-size: 0.7rem;
    padding: 0;
    width: 60px;
    text-align: center;
    line-height: 20px;
	margin-top: -10px;
  }
  #hNav > ul > li > a:before {
    margin: 3px 0 -3px;
    display: block;
    position: relative;
  }
}
@media screen and (max-width: 320px) {
  #hNav > ul > li > a {
    width: 50px;
  }
}
#hNav > ul > li.product > a:before {
  content: "\f0c9";
  font-size: 17px;
}
#hNav > ul > li.learning a:before {
  content: "\f108";
  font-size: 15px;
}
#hNav > ul > li.onlineshop a:before {
  content: "\f07a";
  font-size: 19px;
}
#hNav > ul > li.english a:before {
  content: "\f0ac";
  font-size: 19px;
}
@media only screen and (max-width: 767px) {
  #hNav > ul > li.onlineshop a span {
    display: none;
  }
#product_menu {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  background: #000;
  color: #fff;
  border-bottom: 1px solid #333;
  line-height: 1;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.7);
  display: none;
}
#product_menu a {
  color: #fff;
  text-decoration: none;
}
#product_menu ul {
  width: 100%;
  overflow: hidden;
	margin:0 auto;
}
#product_menu ul li {
  float: left;
  display: table;
}
#product_menu ul li a {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}
#product_menu ul li a:hover {
  background-color: #111;
}
#product_menu .item {
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
@media only screen and (max-width: 767px) {
  #product_menu .item {
    border-bottom-style: none;
  }
}
#product_menu .item > li {
  width: 19%;
  height: 225px;
}
@media only screen and (max-width: 767px) {
  #product_menu .item > li {
    width: 100%;
    height: auto;
  }
}
#product_menu .item a {
  font-size: 100%;
  background-repeat: no-repeat;
  background-position: center 75px;
  background-size: 45px auto;
}
@media only screen and (max-width: 767px) {
  #product_menu .item a {
    padding: 10px 0 10px 40px;
    background-position: 15px center;
    background-size: 30px;
    border-left-style: none;
    border-top: 1px solid #333;
    vertical-align: middle;
    line-height: 20px;
  }
}
#product_menu .item a:hover {
  background-position: center 80px;
}
@media only screen and (max-width: 767px) {
  #product_menu .item a:hover {
    background-position: 17px center;
  }
}
#product_menu .item a.archi10pro {
  background-image: url(common/img/ico/ico_archi10pro.png);
}
#product_menu .item a.pro9ex {
  background-image: url(common/img/ico/ico_mdex.png);
}
#product_menu .item a.pro9 {
  background-image: url(common/img/ico/ico_md.png);
}
#product_menu .item a.neo3 {
  background-image: url(common/img/ico/ico_id.png);
}
#product_menu .item a.rd2 {
  background-image: url(common/img/ico/ico_rd.png);
}
#product_menu .item a .lead {
  display: block;
  padding-bottom: 90px;
	font-size:85%;
}
@media only screen and (max-width: 767px) {
  #product_menu .item a .lead {
    padding-bottom: 0;
    margin-bottom: 5px;
  }
}
#product_menu .item a strong {
  display: block;
	font-size:100%;
  font-weight: 400;
  margin-top: 10px;
}
@media only screen and (max-width: 767px) {
  #product_menu .item a strong {
    vertical-align: text-bottom;
    display: inline-block;
    *display: inline;
    *zoom: 1;
	font-size: 80%;
    margin: 0;
  }
}
#product_menu .search,
#product_menu .pages {
  border-right: 1px solid #333;
}
#product_menu .search > li,
#product_menu .pages > li {
  width: 50%;
  height: 90px;
}
@media only screen and (max-width: 767px) {
  #product_menu .search > li,
  #product_menu .pages > li {
    width: 100%;
    height: auto;
  }
}
#product_menu .search a,
#product_menu .pages a {
	font-size:110%;
}
@media only screen and (max-width: 767px) {
  #product_menu .search a,
  #product_menu .pages a {
    padding: 15px 0;
    border-left-style: none;
  }
}
#product_menu .search a::before,
#product_menu .pages a::before {
  font-family: FontAwesome;
  font-weight: normal !important;
  margin-right: 15px;
}
#product_menu .search a.compare::before,
#product_menu .pages a.compare::before {
  content: "\f0c5";
}
#product_menu .search a.function::before,
#product_menu .pages a.function::before {
  content: "\f002";
}
#product_menu .search a.perspective::before,
#product_menu .pages a.perspective::before {
  content: "\f002";
}
#product_menu .search a.school::before,
#product_menu .pages a.school::before {
  content: "\f19d";
}
#product_menu .search a.guide::before,
#product_menu .pages a.guide::before {
  content: "\f0f6";
}
#product_menu .pages {
  border-top: 1px solid #333;
}
#product_menu .pages > li {
}

/* ---------------------------------------------------- 
	Gナビ
---------------------------------------------------- */
#gNavi {
  width: 100%;
}
#gNavi ul {
  width: 980px;
  margin: 0 auto;
  _zoom: 1;
}
#gNavi ul li {
  float: left;
  word-wrap: normal;
}