@charset "utf-8";

body {
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ","Meiryo", sans-serif;
	margin: 0;
	background-color: #E1E1E1;
}

#container{
	background-color: #FFFFFF;
}

p {
	word-break: break-all;
	line-height: 1.8rem;
	letter-spacing: 0.03rem;
	font-size: 1.1rem;
	}
h1 {
	word-break: break-all;
	line-height: 2rem;
	letter-spacing: 0.06rem;
	font-size: 1.8rem;
}
h2 {
	word-break: break-all;
	line-height: 1.5rem;
	letter-spacing: 0.06rem;
	font-size: 1.4rem;
}
img {
	vertical-align: bottom;
}

ul {
	list-style-type:none;
	word-break: break-all;
	
}






/*ヘッダーの記述*/
#header {
	width: 100%;
	border-bottom: 2px solid #cccccc;
	background-color: #FFFFFF;
	position: relative;	
}
.toplogo {
	height: 90px;
}
.toplogo img {
	max-width: 60%;
	height: auto;
	padding: 10px 10px 10px 10px;
}

/*三本線の記述*/
/*クリックエリアと位置を指定*/
#menubtn {
	position: absolute;
	top: 0;
	right: 20px;
	width: 50px;  /*クリックエリアの横幅*/
	height: 50px; /*クリックエリアの高さ*/
	cursor: pointer;
	padding-top: 0px;
}

/*3本線の1本ごとに共通するスタイルを指定*/
#menubtn .line {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 50px; /* 横幅 */
	height: 3px; /* 1本辺りの高さ */
	background: #91AE3F; /* 線の色 */

/*適用するプロパティ、変化する時間、変化する速度 */
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

/*3本線の各線の位置を指定*/
#menubtn .line_01 { top: 28px; }
#menubtn .line_02 { top: 46px; }
#menubtn .line_03 { top: 64px; }


#nav {
	display:none;
}
#nav ul{
	list-style: none;
	width: 100%;
}
#nav li a {
	display: block;
	color: #333333;
	text-align: right;
	text-decoration: none;
	padding-right: 1rem;
}
#nav li a:hover {
	background-color:#cccccc;
}
#nav ul:after {
	content: "";
	display: block;
	clear: both;
}

#nav ul li a p {
	font-size: 1rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}


#nav .sub-menu a {
	color: #fff;
	display: block;
	font-size: 0.9rem;
	border-top-width: 0px;
	padding-right: 1.6rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	background-color: #0bd;
}

#nav .sub-menu li a:hover {
	background-color:#0090aa;
}

.no-links {
	opacity:0.7;
	pointer-events:none;/*リンクを非リンクに変える*/
	cursor:default;/*マウスカーソルを矢印のまま変えない*/
	text-decoration:none;/*下線を消す*/
}
#header:after {
	content: "";
	display: block;
	clear: both;
}


/*コンテンツ部分の記述*/
.topimage img {
	max-width: 100%;
	height: auto;
}
.topimage {
	text-align: center;
}
.pc {
	display:none;
}

.gray {
	background-color: #F0F0F0;
}

.title-center {
	text-align: center;
	padding-top: 8rem;
}

.title-left {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 3rem;
	border-bottom: 1px solid #000000;
	text-align: left;
	padding-top: 8rem;
}

.picture-area img{
	max-width: 100%;
	height: auto;
}

.information  {
	padding-bottom: 8rem;
}
.information li  {
	display: block;
	border-bottom: 1px solid #000000;
	font-size: 0.9rem;
	text-decoration: none;
	padding-top: 1.5rem;
	padding-bottom:1.5rem;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	color: #000000;
}
/*リンクページができたらオン
.information li a:hover {
	background-color: #D8D8D8;
}*/
.information time {
	font-weight: bold;
	float:left;
	width:100px;
}
.infomation :after {
	content:"";
	display:block;
	clear:both;
}
.information .info-text {
	float :none;
	width :auto;
	margin-left:100px;
}


.index-column1 {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	padding-top: 2rem;
	padding-bottom: 1.5rem;
}
.index-column1 ul li {
	padding-top: 2.5rem;
	position: relative;
}
.index-column1 ul li a{
	display: block;
	text-decoration: none;
	padding-bottom: 2.5rem;
}
.index-column2 {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 3rem;
	padding-top: 2rem;
}
.index-column1 ul li a:link { color:#000000; text-decoration:none }
.index-column1 ul li a:visited { color:#cccccc; text-decoration:none }
.index-column1 ul li a:hover { color:#91AE3F; text-decoration:none }
.index-column1 ul li a:active { color:#91AE3F; text-decoration:none }

.list-number {
	font-size: 2.9rem;
	font-family: serif;
	font-style: italic;
	float: left;
	vertical-align: text-bottom;
	width: 75px;
	position: absolute;
	bottom: 0px;
}
.list-text {
	font-size: 1rem;
	float : none;
	width : auto;
	margin-left: 75px;
	vertical-align: text-bottom;
	position: absolute;
	bottom: 7px;
	line-height: 1rem;
}
.index-column3 {
	margin-left: auto;
	margin-right: auto;
	padding-top: 4.5rem;
	padding-bottom: 3rem;
	width: 80%;
}
.index-column3-list {
	margin-bottom: 2.5rem;
	text-align: center;
}
.list-number-2 {
	top: 0.5rem;
	font-size: 1.4rem;
}
.list-text-2 {
	font-size: 0.9rem;
	float : none;
	width : auto;
	line-height: 1rem;
}
.list-img{
	max-width: 85px;
	hight: auto;
}

.index-column3 ul li a:link { color:#000000; text-decoration:none }
.index-column3 ul li a:visited { color:#cccccc; text-decoration:none }
.index-column3 ul li a:hover { color:#91AE3F; text-decoration:none }
.index-column3 ul li a:active { color:#91AE3F; text-decoration:none }

.index-column3-list:after {
	content:"";
	display: block;
	clear: both;
}
.contact {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	padding-top: 2rem;
	padding-bottom:8rem;
}
.contact p{
	padding-bottom: 2rem;
}
.button-area1{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2rem;
	padding-bottom: 4rem;
}
.button-area1:after {
	content: "";
	display: block;
	clear: both;
}

.button-gray2 {
	position: relative;
	display: inline-block;
	text-decoration: none;
	outline: none;
	size: 1.2rem;
	color: #FFFFFF;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:3rem;
	text-align: center;
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
	background-color: #91AE3F;
}

.button-gray2::after {
	content: '';
	width: 21px;
	height: 21px;
	border-top: solid 1px #FFFFFF;
	border-right: solid 1px #FFFFFF;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right: 1.2rem;
}
.button-gray2:hover {
	background-color: #333333;
	color:#FFFFFF;
}


/*詳細ページの記述*/

.column-title-box {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3rem;
	padding-bottom: 2rem;
}

.column-title-center h1 {
	font-size: 1.8rem;
	padding-top: 7rem;
	text-align: center;
}
.column-title-box:after {
	content: "";
	display: block;
	clear: both;
}

.column-title-center {
	text-align: center;
}
.column-title {
	width: 80%;
	margin-left: auto;
	margin-right:auto;
	text-align: right;
	padding-top: 0.5rem;
}

.column-title p {
	line-height: 1.2rem;
	padding-top: 0.4rem;
}
.column-number {
	font-size: 6rem;
	font-family: serif;
	font-style: italic;
	line-height: 4.5rem;
	color: #cccccc;
	border-bottom: 1px solid #000000;
}

.column-title-text {
	width:100%;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
	padding-top: 1.5rem;
}

.column-list{
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	counter-reset: number;
}
.column-list li {
	position:relative;
	padding-left:2.5rem;
	padding-top:1.2rem;
	padding-bottom:1.2rem;
	line-height:1.3rem;
}
.column-list p {
	padding-top:1rem;
	padding-bottom:2rem;
	line-height:1.3rem;
}

.note {
	font-size: 0.8rem;
	padding-top: 1rem;
	color: #91AE3F;
}
.note-no {
	font-weight: bold;
	float:left;
	width:35px;
}
.note .note-text {
	float :none;
	width :auto;
	padding-left:35px;
}

.column-1-1 {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 3rem;
	overflow-x: hidden;
	overflow-y: hidden;
}
.column-1-1 p {
	padding-top: 1rem;
	text-align: justify;
}

.column-img-r {
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.column-box {
	padding-bottom: 4rem;
	padding-top: 2rem;
}
.column-box:after {
	content:"";
	display: block;
	clear: both;
}
.column-index-box {
	disply: block;
	position: relative;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3rem;
}

.column-index-box p {
	line-height: 1.3rem;
}
.column-index-box a:link { color:#91AE3F; text-decoration:none }
.column-index-box a:visited { color:#cccccc; text-decoration:none }
.column-index-box a:hover { color:#000000; text-decoration:none }
.column-index-box a:active { color:#91AE3F; text-decoration:none }

.back1 {
	float: left;
	width:50%;
}
.back1 h1 {
	font-family: serif;
	font-style: italic;
	text-align: left;
	font-size: 2rem;
	padding-bottom: 0.5rem;
}
.back1 p {
	text-align: left;
	font-size: 1rem;
}

.next h1 {
	font-family: serif;
	font-style: italic;
	text-align: right;
	font-size: 2rem;
	padding-bottom: 0.5rem;
}
.next p {
	text-align: right;
}
.back-arrow::after {
	content: '';
	width: 21px;
	height: 21px;
	border-top: solid 1px #91AE3F;
	border-right: solid 1px #91AE3F;
	-ms-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	position: absolute;
	left: -6%;
	top:60%;
}
.next-arrow::after {
	content: '';
	width: 21px;
	height: 21px;
	border-top: solid 1px #91AE3F;
	border-right: solid 1px #91AE3F;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right: -6%;
	top:60%;
}
.back1 a {
	text-decoration: none;
}

.column-index-box:after {
	content:"";
	display: block;
	clear: both;
}

.no-links2 {
	opacity:0;
	pointer-events:none;/*リンクを非リンクに変える*/
	cursor:default;/*マウスカーソルを矢印のまま変えない*/
	text-decoration:none;/*下線を消す*/
}

/*製品記述*/

.column4-list-img {
	max-width: 180px;
	height: auto;		
}
.content ul li img {
	max-width: 100%;
	height: auto;
	width: auto;
}
.area {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top:2rem;
	padding-bottom: 3rem;
	text-align: center;
}
.area img {
	max-width:100%;
	height:100%;
}

.area p {
	text-align: left;
	padding-top:.6rem;
	padding-bottom:2rem;
	line-height:1.3rem;
}

.area:after {
	content:"";
	display:block;
	clear:both;
}


/*導入記述*/
.flow-title {
	margin-left: 10%;
	margin-right: 10%;
	width: 80%;
	}
.flow-box{
	padding-bottom: 3rem;
	padding-top: 3rem;
}

.flow-box1 {
	display: block;
	padding-top: 3.5rem;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 1px solid #000000;
	height: 11rem;
	position: relative;
}

.flow-step {
	float: left;
	width: 15%;
	text-align: right;
	font-size: 2.8rem;
	font-style: italic;
	font-family: serif;
}

.flow-text {
	float: none;
	margin-left: 20%;
	padding-top: 0.7rem;
}

.flow-text p {
	padding-top: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.4rem;
}
.flow-note {
	color: #91AE3F;
	font-size: 0.8rem;
}

.flow-box1:after {
	content:"";
	display:block;
	clear:both;
}

.flow-text:after {
	content:"";
	display:block;
	clear:both;
}

.flow-arrow::after {
	content: '';
	width: 21px;
	height: 21px;
	border-top: solid 1px #333333;
	border-right: solid 1px #333333;
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	position: absolute;
	left: 50%;
	margin-top: 12px;
}


/* 〜矢印の記述〜 */
.page-top
{
	display: none ;
}
.page-top
{
	margin: 0 ;
	padding: 0 ;
}
.page-top p
{
	margin: 0;
	padding: 0;
	position: fixed;
	right: 70px;
	bottom: 70px;
}
.move-page-top::after {
	content: '';
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-decoration: none;
	border-top: solid 2px #91AE3F;
	border-right: solid 2px #91AE3F;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(315deg);
	position: absolute;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.move-page-top:hover {
	opacity: 0.85 ;
	cursor:pointer;
  }
#container:after {
	content: "";
	display: block;
	clear: both;
}

/* 〜フッターの記述〜 */
#footer {
	background-color: #cccccc;
	text-align: center;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}
#footer p {
	font-size: 0.8rem;
	color: #838383;
}



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

.button-area1{
	width: 370px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2rem;
	padding-bottom: 4rem;
}


.index-column3 {
	margin-left: auto;
	margin-right: auto;
	padding-top: 4.5rem;
	padding-bottom: 3rem;
	width: 80%;
}
.index-column3-list {
	position: relative;
	height: 5rem;
	margin-bottom: 2.5rem;
	text-align: left;
}
.list-number-2 {
	font-style: italic;
	margin-left: 100px;
	position: absolute;
	top: 0.5rem;
	font-size: 1.4rem;
}
.list-text-2 {
	font-size: 0.9rem;
	float : none;
	width : auto;
	line-height: 1rem;
	margin-left: 110px;
	position: absolute;
	bottom: 0.6rem;
}
.list-img{
	max-width: 85px;
	hight: auto;
	float: left;
	position: absolute;
	bottom: 0px;
}

/*製品記述*/
.column4-box ul li {
	float: left;
	width: 50%;
	margin-left: 0px;
	margin-right: 0px;
}
.column4-box {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}
.column4-box li img {
	text-align:center;
	height: auto;
	max-width: 90%;
}
.column4-box h1 {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 1.3rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.column4-box p {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2rem;
	padding-bottom: 2rem;
}

.column4-box:after {
	content:"";
	display: block;
	clear: both;
}

.area {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;	
}

.one{
	float: left;
	width: 40%;
	margin: 0 5% 0 5%;
	height: 350px;
}

}


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

.pc {
	display:block;
}
.mobile {
	display:none;
}

.index {
	text-align: center;
	margin-left: 10%;
	margin-right: 10%;
}
.index li a img {
	height: auto;
	max-width: 65%;
}
.index ul li {
	float: left;
	width: 25%;
	margin-left: 0px;
	margin-right: 0px;
}
.index:after {
	content:"";
	display: block;
	clear: both;
}	


.title-center {
	text-align: left;
	padding-top: 5rem;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.title-center h2 {
	font-size: 1.6rem;
}

.column-number {
	font-size: 8rem;
	line-height: 6rem;
}
.column-title-text {
	text-align: right;	
}
.title-center:after {
	content:"";
	display:block;
	clear:both;
}
.index-column1 {
	width: 80%;
	padding-bottom: 4rem;
	margin-right: auto;
	margin-left: auto;
}
.index-column1 li a {
	display: block;
	border-bottom: 1px solid #000000;
	text-decoration: none;
	position: relative;
	padding-bottom: 2.5rem;
	padding-left: 0rem;
}

.list-text {
	width:79%;
}


.index-column3 {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2.5rem;
	padding-bottom: 3rem;

}
.index-column3-list {
	border-bottom: 1px solid #000000;
}
.arrow-gray::after {
	content: '';
	width: 21px;
	height: 21px;
	border-top: solid 1px #000000;
	border-right: solid 1px #000000;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right: 3.6rem;
}
.arrow-gray-2::after {
	content: '';
	width: 21px;
	height: 21px;
	border-top: solid 1px #000000;
	border-right: solid 1px #000000;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right: 3.6rem;
	top: 1.2rem;
}
.button-area1{
	width: 370px;
	margin-left: auto;
	margin-right: 10%;
	padding-top: 2rem;
	padding-bottom: 4rem;
}

/*詳細ページの記述*/
.column-title-center h1 {
	font-size: 1.8rem;
	padding-top: 7rem;
	text-align: left;
}

.column-title {
	width: 80%;
	margin-left: auto;
	margin-right:auto;
	text-align: right;
	padding-top: 0.5rem;
}
.column-img-l {
	float: right;
	margin-left: 1rem;
	margin-bottom: 1rem;
}
.column-img-r {
	float: left;
	margin-right: 4rem;
	margin-bottom: 1rem;
}
.column-list{
	width: 70%;
	margin-left:auto;
	margin-right:auto;
	counter-reset: number;
}

/*4ページの記述*/

.img-box {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

.one{
	float: left;
	width: 40%;
	margin: 0 5% 0 5%;
	height: 380px;
}

}

@media (min-width: 1200px){
	#header,#container,#footer {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

}

/* =========================
   1) レイアウト幅の統一（はみ出し防止）
   ========================= */
#header,
#container,
#footer,
#nav {
  width: 100%;
  max-width: 1200px;         /* 任意のサイト最大幅に合わせてOK */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* #header を基準にして子要素を配置 */
#header { position: relative; }

/* #nav 内部もはみ出さない */
#nav ul,
#nav .sub-menu,
#nav li a {
  width: 100%;
  box-sizing: border-box;
}

/* 展開時にヘッダ直下で重なるよう調整（横幅は親に追随） */
#nav {
  position: relative;   /* slideToggle を崩さないため relative のまま */
  z-index: 2500;
  background: transparent; /* 既存デザイン踏襲。必要なら白などに */
}

/* =========================
   2) English ボタン（ハンバーガー左に固定）
   ========================= */
/* #menubtn: right:20px / width:50px → その左に 16px 余白 */
.lang-btn {
  position: absolute;
  right: calc(20px + 50px + 16px);
  top: 24px;                       /* 22〜28px で微調整 */
  z-index: 3000;
}
.lang-btn a {
  display: inline-block;
  padding: 6px 14px;
  background: #0073aa;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.3s ease;
}
.lang-btn a:hover { background: #005f88; }

@media (max-width: 480px) {
  .lang-btn { right: calc(20px + 50px + 10px); top: 20px; }
}

/* =========================
   3) ハンバーガー → ✗ 変形アニメ
   ========================= */
#menubtn { z-index: 3100; } /* メニューより前面に */
#menubtn .line {
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease, background-color 0.2s ease;
  transform-origin: center center;
}
#menubtn:hover .line { background: #6f8f2f; } /* 任意のホバー色 */

#menubtn.active .line_01 {
  top: 46px;                  /* 真ん中に寄せる */
  transform: rotate(45deg);
}
#menubtn.active .line_02 { opacity: 0; }      /* 中央線を消す */
#menubtn.active .line_03 {
  top: 46px;                  /* 真ん中に寄せる */
  transform: rotate(-45deg);
}

/* 動きを控えたいユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  #menubtn .line { transition: none; }
}

/* =========================
   4) メニュー見た目の微調整（任意・安全）
   ========================= */
/* メニューの各行の押下領域を確保 */
#nav li a { padding: 0.6rem 1rem; }
/* サブメニューは既存色に合わせる（必要なら調整） */
#nav .sub-menu a { padding: 0.6rem 1.6rem; }
/* 右寄せテキストでも横幅超過しないように */
#nav li a p { margin: 0; }

/* =========================
   5) 言語別メニューの初期表示（あれば）
   ========================= */
/* HTML 内に #menu-jp / #menu-en がある場合のみ有効。JSで出し分け */
#menu-jp, #menu-en { display: none; }