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

html {
	font-size: 1.1vw;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #666;
}

a{
	text-decoration: none;
	color: #666;
}

#wrap{
	width: 100%;
	margin-top: 7rem;
}

footer{
	border-top: 1px #ccc solid;
	background: linear-gradient(lightgreen,#fff)
}

footer ul{
	overflow: hidden;
	width: 85%;
	margin: 1rem auto;
	font-size: 0.9rem;
}

footer ul li{
	float: left;
	text-align: center;
	width: 16.42%;
	padding: 0.5rem 0;
}

footer ul li a{
	width: 100%;
}

footer ul li a:hover{
	border-bottom: 3px lightgreen solid;
}

footer p{
	text-align: center;
	font-size: 0.8rem;
	margin-bottom: 1rem;
}
@media screen and (max-width: 768px){
	footer ul{
		font-size: 1.2rem;
	}
}
@media screen and (max-width: 480px){
	footer ul{
		font-size: 1.5rem;
	}
}


/*==========
   header
==========*/

#home #global-nav #g-nav01 a{
	background-color: lightgreen;
	color: #fff;
}

#procedure #global-nav #g-nav02 a{
	background-color: lightgreen;
	color: #fff;
}

#demo #global-nav #g-nav03 a{
	background-color: lightgreen;
	color: #fff;
}

#operating #global-nav #g-nav04 a{
	background-color: lightgreen;
	color: #fff;
}

#mail #global-nav #g-nav05 a{
	background-color: lightgreen;
	color: #fff;
}

h1{
	margin-left: 1rem;
}

@media screen and (max-width: 1100px){
	header h1 img{
		width: 55%;
	}
}

@media screen and (max-width: 950px){
	header h1 img{
		width: 40%;
	}
}


@media screen and (max-width: 480px){
	header h1 img{
		width: 50%;
	}
}

/*============
      HOME
==============*/

#contact{
	font-weight: bold;
	font-size: 1.3rem;
	text-align: right;
	padding: 1rem 0;
	border-top: 2px lightgreen solid;
	border-bottom: 2px lightgreen solid;
}
@media screen and (max-width: 768px){
	#contact{
		margin-top: 70px;
		font-size: 3rem;
		padding: 1.5rem;
	}
}

@media screen and (max-width: 480px){
	#contact{
		margin-top: 60px;
		font-size: 3rem;
		padding: 1.5rem;
	}
}

.siryou{
	background-color: #0D5607;
	border-radius: 5px;
	padding: 0.2rem 1rem;
	font-weight: bold;
	margin: 0 0.5rem;
}

@media screen and (max-width: 768px){
	.siryou{
		padding: 0.5rem 1.5rem;
		font-size: 2.5rem;
	}
}

.siryou a{
	color: #FFF;
}

#container{
	width: auto;
	margin: 0 auto;
}

h2{
	width: auto;
	font-size: 1.5rem;
	margin: 3rem auto 0;
	text-align: center;
	line-height: 3rem;
	color: #0D5607;
}

h2 span{
	font-size: 2rem;
	padding: 0.3rem 0 0.3rem 0.5rem;
	color: #FFF;
	text-align: center;
	margin: 1rem;
	line-height: 5rem;
	border-radius: 5px;
}

#home h2{
	color: #666;
}

h2 .word-01{
	background-color: cornflowerblue;
}

h2 .word-02{
	background-color: crimson;
}

h2 .word-03{
	background-color: limegreen;
}

@media screen and (max-width: 768px){
	h2,h2 span{
		font-size: 3rem;
		line-height: 180%;
		width: 80%;
	}
}

#contents{
	width: 86%;
	margin: 0 auto;
	overflow: hidden;
	box-sizing: border-box;
}

@media screen and (max-width: 768px){
	#contents{
		width: auto;
	}
}

#contents .contents-menu{
	width: 31.7%;
	border: 2px lightgreen solid;
	border-radius: 20px;
	padding: 1rem;
	box-sizing: border-box;
	margin: 1.5rem 0;
	float: left;
	margin-left: 1.2rem;
	background-color: #FFF;
}

#contents .contents-menu:first-child{
	margin-left: 0.8rem;
}

@media screen and (max-width: 768px){
	#contents .contents-menu{
		margin-left: 1.5%;
	}
	#contents .contents-menu:first-child{
	margin-left: 0.8%
}
}

@media screen and (max-width: 480px){
	#contents .contents-menu{
		float: none;
		width: 98%;
		margin: 0 auto 1rem;
		border-radius: 5px;
	}
	#contents .contents-menu img{
		width: 15%;
	}
}

#contents .contents-menu img{
	display: block;
	margin: 0 auto;
}

h3{
	font-size: 1.3rem;
	margin: 0.5rem 0;
	color: #0D5607;
}

@media screen and (max-width: 480px){
	h3{
		font-size: 3rem;
	}
}

#contents .contents-menu p{
	width: auto;
	line-height: 1.5rem;
}

@media screen and (max-width: 480px){
	#contents .contents-menu p{
	line-height: 3rem;
	font-size: 2rem;
	}
}

/*===========================
		導入の流れ
=============================*/
#procedure header,#demo header,#operating header,#mail header{
	border-bottom: lightgreen 3px solid;
}

#procedure #container,#demo #container,#operating #container,#mail #container{
	width: 85%;
	margin-top: 65px;
}
	
@media screen and (max-width: 480px){
	#procedure #container{
		width: 100%;
	}
}

#procedure h2{
	text-align: left;
	padding: 1rem 0;
	color: #0D5607;
}

@media screen and (max-width: 768px){
	#procedure h2,#demo h2,#operating h2,#mail h2{
		font-size: 3rem;
		width: 100%;
	}
}

#procedure h3{
	margin-bottom: 1.5rem;
	text-align: center;
	color: #666;
	font-size: 1.6rem;
}

#procedure #container .inner{
	width: 100%;
	margin: 0 auto;
	border: 3px lightgreen solid;
	box-sizing: border-box;
	border-radius: 10px 10px;
	padding: 1rem;
}

@media screen and (max-width: 768px){
	#procedure #container .inner{
		width: auto;
	}
	#procedure h3,#demo h3,#mail h3{
		font-size: 2rem;
	}
}

.star{
	color: chartreuse;
	font-size: 2rem;
}

@media screen and (max-width: 768px){
	.star,.icon-finder,.icon-point-right{
		font-size: 3rem;
	}
}

#procedure #container .inner li{
	margin: 0 auto;
	font-size: 1.5rem;
}

@media screen and (max-width: 768px){
	#procedure #container .inner li{
		font-size: 2rem;
	}
}

#procedure #container .inner li:nth-child(odd){
	border: 3px #ccc solid;
	box-sizing: border-box;
	border-radius: 10px;
	width: 80%;
	padding: 1.5rem 01.5rem;
}

@media screen and (max-width: 768px){
	#procedure #container .inner li:nth-child(odd){
		border: 2px #ccc solid;
		width: 85%;
	}
}

@media screen and (max-width: 480px){
	#procedure #container .inner li:nth-child(odd){
		border: 2px #ccc solid;
	}
}

#procedure #container .inner li:nth-child(even){
	width: 20%;
}

#procedure #container .inner li img{
	display: block;
	margin: 0 auto;
}

#procedure #container .inner li:nth-child(odd) img{
	margin-top: 1.5rem;
	width: 30%;
}

#procedure section:last-child{
	margin-bottom: 3rem;
}

#procedure section:last-child h2{
	color: red;
	text-align: center;
}


.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


.lang{
	color: deepskyblue;
	font-weight: bold;
}

.line{
	border-bottom: 1px red solid;
}

#container section:last-child p{
	text-align: center;
}

section:last-child p{
	line-height: 2rem;
	font-size: 1.2rem;
}

@media screen and (max-width: 768px){
	section:last-child p{
		font-size: 2rem;
		line-height: 3.5rem;
	}
}

#procedure .fuwat{
	color: red;
}


/*===================
   イメージ＆デモ
====================*/

#demo #container{
	width: 85%;
	margin-bottom: 2rem;
}

#demo #container h2{
	text-align: left;
	padding: 0.8rem 0 1rem;
	color: #0D5607;
}

@media screen and (max-width: 768px){
	#container h2 .icon-finder{
		font-size: 3rem;
	}
}

@media screen and (max-width: 480px){
	#container h2 .icon-finder{
		font-size: 5rem;
	}
}

.box{
	width: 100%;
	margin: 0 auto;
	padding: 1rem 0;
	border: 3px solid lightgreen;
	border-radius: 12px;
	text-align: center;
	position: relative;
}


.box img{
	margin-top: 1rem;
}

.box p{
	line-height: 150%;
}

@media screen and (max-width: 768px){
	.box p{
		width: 80%;
		margin: 0 auto;
	}
}

.sankaku{
	width: 0;
	height: 0;
	margin: 0 auto;
	border: 5rem solid transparent;
	border-top: 5rem solid lightgreen;
}

.red{
	color: red;
	font-weight: bold;
}

/*===================
    　動作環境
====================*/
#operating #container{
	width: 60%;
}
@media screen and (max-width: 768px){
	#operating #container{
		width: 95%;
	}
}

#operating h2{
	text-align: left;
}

table,table tr,table th,table td{
	border: 1px darkgreen solid;
}

table{
	width: 100%;
	margin: 1rem auto;
	font-size: 1.2rem;
}

@media screen and (max-width: 768px){
	table{
		font-size: 2rem;
	}
}

table th{
	width: 30%;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	background-color: lightgreen;
}

table td{
	line-height: 180%;
	padding-left: 1rem;
}

#note{
	width: 100%;
	margin: 2.5rem auto;
}

#note p{
	line-height: 150%;
}

@media screen and (max-width: 768px){
	#note{
		font-size: 2rem;
		width: 80%;
		margin: 0 auto;
		text-indent: -1rem;
	}
}

/*=========================
　　　　お問い合わせ
==========================*/
#mail h2{
	font-size: 1.3rem;
}

#mail #container{
	width: 45%;
}

@media screen and (max-width: 768px){
	#mail #container{
		width: 95%;
	}
}

#mail #container h2{
	text-align: left;
	margin-top: 8rem;
}

@media screen and (max-width: 768px){
	#mail #container h2{
		font-size: 3rem;
	}
}

#mail #container .inner{
	width: 100%;
	margin: 1rem auto 0;
	border: 3px lightgreen solid;
	border-radius: 15px;
	box-sizing: border-box;
	padding: 0 1rem 1rem 1rem;
}

#mail #container .inner dt{
	margin-top: 2rem;
	font-size: 1.3rem;
	font-weight: bold;
	color: #0D5607;
}

#mail #container .inner dd{
	margin-top: 0.5rem;
	font-size: 1.1rem;
	font-weight: bold;
}

#mail #container .inner img{
	display: inline;
	text-align: left;
}


#mail #container .inner dd a{
	text-decoration-line: underline;
}

@media screen and (max-width: 768px){
	#mail #container .inner{
		border-radius: 5px;
		border: 2px lightgreen solid;
		padding: 2rem;
	}
	#mail #container .inner dt,#mail #container .inner dd{
		font-size: 2.5rem;
	}
}

#mail #container img{
	display: block;
	margin: 0 auto;
}

.text{
	display: inline-block;
}

#procedure h2 .text{
	color: red;
}


/*====================
   アイコンフォント
======================*/

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?w9dssa');
  src:  url('fonts/icomoon.eot?w9dssa#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?w9dssa') format('truetype'),
    url('fonts/icomoon.woff?w9dssa') format('woff'),
    url('fonts/icomoon.svg?w9dssa#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-point-right:before {
  content: "\ea04";
}
.icon-finder:before {
  content: "\eabf";
}
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?w9dssa');
  src:  url('fonts/icomoon.eot?w9dssa#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?w9dssa') format('truetype'),
    url('fonts/icomoon.woff?w9dssa') format('woff'),
    url('fonts/icomoon.svg?w9dssa#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-point-right:before {
  content: "\ea04";
	color: orange;
}

.icon-finder:before {
  content: "\eabf";
	color: darkgreen;
}

#mail .icon-point-right:before {
	content: "\ea04";
}