@charset "utf-8";

/* ------------------------------------------------------------ */

#Firstview					{ width: 100%; background-color: #F4FFDD;
							  position: relative;
							  background-image: url(../img/Fv_Back.jpg);
							  background-position: center center;
							  background-repeat: no-repeat;
							  background-attachment: fixed;
							  background-size: cover;
							  overflow: hidden; }

#Fv_Header					{ width: 100%; height: auto; text-align: center; color: #FFFFFF; font-weight: 600; padding: 5px 0px; background-color: #09A100; }

#Fv_Header-Inner			{ width: 1000px; margin: 0px auto; text-align: left; }

#Firstview-Inner			{ width:  50%; margin: 0px 90% 0px 10%; padding-top: 20px; text-align: center; }

#Firstview h1				{ margin-bottom: 10px; }

#Firstview h2				{ margin-bottom: 10px; }

#Firstview h3				{ }

#Firstview h4				{ position: absolute; bottom:   0px; right: 5%; }

#Firstview h5				{ position: absolute; bottom: -40px; right: 5%; }

#Firstview h6				{ position: absolute; top: 40px; right: 25%; }

#Firstview img				{ vertical-align: bottom; }

@media screen and (min-width: 1920px) and (max-width: 9999px){

#Firstview-Inner			{ width:  50%; margin: 100px 90% 0px 10%; padding-top: 20px; text-align: center; }

#Firstview h4				{ position: absolute; bottom:   0px; right: 17.5%; }

#Firstview h5				{ position: absolute; bottom: -40px; right: 17.5%; }

}

@media screen and (max-width: 767px){

#Firstview					{ height: 800px; background-color: #F4FFDD;
							  position: relative;
							  background-image: url(../img/Fv_Back_SP.jpg);
							  background-position: left center;
							  background-repeat: no-repeat;
							  background-attachment: scroll;
							  background-size: cover;
							  overflow: hidden; }

#Fv_Header					{ display: none; }

#Fv_Header-Inner			{ width: 100%; text-align: center; }

#Firstview-Inner			{ width: 100%; margin: 0px 0% 0px 0%; }

#Firstview h1				{ margin-top: 70px; }

#Firstview h1 img			{ width:  50%; }

#Firstview h2 img			{ width:  70%; }

#Firstview h3 img			{ width:  70%; }

#Firstview h4 img			{ width:  80%; }

#Firstview h5				{ position: absolute; bottom: 10px; left: 50%; }

#Firstview h5 img			{ width: 100%; }

#Firstview h6				{ position: absolute; top: auto; bottom: 30px; left: 10%; }

#Firstview h6 img			{ width:  60%; }

}

@media only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){

#Firstview h4				{ position: absolute; bottom:   0px; right: 2.5%; }

#Firstview h4 img			{ width:  80%; }

#Firstview h5 img			{ width:  80%; }

#Firstview h6				{ position: absolute; top: 320px; right: 15%; }

#Firstview h6 img			{ width:  90%; }


}

/* ------------------------------------------------------------ */

#Advantage					{ width: 100%; padding: 100px 0px; background-color: #D8F0D6; }

#Advantage h2				{ text-align: center; margin-bottom: 30px; }

#About-Inner				{ width: 960px; margin: 0px auto; overflow: hidden; }

#About-Inner-Overflow		{ margin-right: -40px; }

.Ab_Back_1					{ background-image: url(../img/Ab_Back_1.png); background-position: top center; }

.Ab_Back_2					{ background-image: url(../img/Ab_Back_2.png); background-position: top center; }

.Ab_Back_3					{ background-image: url(../img/Ab_Back_3.png); background-position: top center; }

.Ab_Back_4					{ background-image: url(../img/Ab_Back_4.png); background-position: top center; }

#Advantage dl				{ float: left; width: 460px; height: 495px; padding: 25px 50px 0px 50px; margin-right: 40px; margin-bottom: 40px; }

#Advantage dt				{ font-size: 200%; font-weight: 600; color: #009D00; text-align: center; margin-bottom: 50px; }

#Advantage dd.Title			{ font-size: 150%; font-weight: 600; margin-bottom: 10px; }

#Advantage dd.Text			{ font-size:  90%; }

@media screen and (max-width: 767px){

#Advantage h2 img			{ width:  95%; }

#About-Inner				{ width: 100%; }

#About-Inner-Overflow		{ margin-right: 0px; }

.Ab_Back_1					{ background-image: url(../img/Ab_Back_1_SP.png); background-position: top center; }

.Ab_Back_2					{ background-image: url(../img/Ab_Back_2_SP.png); background-position: top center; }

.Ab_Back_3					{ background-image: url(../img/Ab_Back_3_SP.png); background-position: top center; }

.Ab_Back_4					{ background-image: url(../img/Ab_Back_4_SP.png); background-position: top center; }

#Advantage dl				{ float: none; width: 320px; height: 344px; padding: 20px 25px 0px 25px; margin: 0px auto 20px auto; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px;
-webkit-box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px;
-moz-box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px; }

#Advantage dt				{ font-size: 150%; font-weight: 600; margin-bottom: 30px; }

#Advantage dd.Title			{ font-size: 125%; font-weight: 600; margin-bottom: 10px; }

#Advantage dd.Text			{ font-size:  80%; line-height: 150%; }

#Advantage dd.Text br		{ display: none; }

}

@media only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){

#About-Inner				{ width: 460px; margin: 0px auto; overflow: hidden; }

#Advantage dl				{ float: left; width: 460px; height: 420px; padding: 25px 50px 0px 50px; margin-right: 0px; margin-bottom: 40px; background-color: #B8DEB7; }

}

/* ------------------------------------------------------------ */

#Report						{ width: 100%; padding-bottom: 90px;
							  position: relative;
							  background-image: url(../img/Rp_Back.jpg);
							  background-position: center center;
							  background-repeat: no-repeat;
							  background-attachment: fixed;
							  background-size: cover;
							  background-color: #000000; }

#Report h2					{ width: 100%; padding: 20px; background-color: #08A100; text-align: center; }

#Report	.Rp_Left			{ width:  50%; margin-top: 100px; float: left; text-align: center; }

#Report	.Rp_Right			{ width:  50%; margin-top: 100px; float: left; }

.Rp_Icon					{ float: left; display: block; margin-right: 10px; }

h3.Center_plus              {background:url(../img/excel_Icon.png) no-repeat; background-position:10%; padding-top:7px; width:500px; height:75px; margin:0 auto;
							 
							 
							
							
							}

h3.Center_plus_top          {}

.Rp_Icon_cen				{ float:none;}

#Report	.Rp_Title_1			{ float: left; display: block; color: #C5CF51; font-size: 200%; font-weight: 600; padding-top: 20px; }

#Report	.Rp_Title_2			{ float: left; display: block; color: #8ECC25; font-size: 200%; font-weight: 600; padding-top: 20px; }

#Report	.Rp_Title_3			{ float: left; display: block; color: #009D01; font-size: 200%; font-weight: 600; padding-top: 20px; }

#Report	div.Rp_Center		{ text-align:center; display: block; color: #006837; font-size: 150%; font-weight: 600; padding-top: 65px; clear:both;}

#Report	span.Rp_Center      {font-size:160%; font-weight:600; }


.Rp_Right p					{ clear: both; margin-bottom: 20px; }

.Rp_Center p				{ clear: both; margin-bottom: 20px; margin-top:20px; }


.Arrow						{ width: 100%; text-align: center; }

.Arrow img					{ width: 90px; height: 30px; }

@media screen and (max-width: 767px){

#Report						{ padding-bottom: 100px;
							  position: relative;
							  background-image: url(../img/Rp_Back.jpg);
							  background-position: center center;
							  background-repeat: no-repeat;
							  background-attachment: scroll;
							  background-size: cover;
							  background-color: #000000; }

#Report h2 img				{ width: 100%; }

h3.Center_plus              {background:url(../img/excel_Icon.png) no-repeat; background-position:20%; padding-top:25px; padding-left:50px;

							font-size:50%; width:auto;}

#Report	.Rp_Left			{ width: 100%; margin-top: 50px; float: none; }

#Report	.Rp_Left img		{ width:  70%; }

#Report	.Rp_Right			{ width: 100%; margin-top:  0px; float: none; padding: 20px; text-align: center; font-size: 80%; }

.Rp_Icon					{ float: none; text-align: center; margin-right: 0px; }

.Rp_Icon img				{ width: 25%; }

#Report	span.Rp_Center      {font-size:140%; font-weight:600; }

.Rp_Center p				{ clear: both; margin-bottom: 20px; margin-top:20px;  padding:0 25px; font-size:70%;}

#Report	div.Rp_Center img  {width:95%;}

#Report	.Rp_Title_1			{ font-size: 125%; float: none; text-align: center; }

#Report	.Rp_Title_2			{ font-size: 125%; float: none; text-align: center; }

#Report	.Rp_Title_3			{ font-size: 125%; float: none; text-align: center; }

}

@media only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){

#Report						{ padding-bottom: 100px; }

#Report h2 img				{ width: 80%; }

#Report	.Rp_Left			{ width: 100%; margin-top: 50px; float: none; }

#Report	.Rp_Left img		{ width:  70%; }

#Report	.Rp_Right			{ width: 100%; margin-top:  0px; float: none; padding: 20px; text-align: center; }

.Rp_Icon					{ float: none; text-align: center; margin-right: 0px; }

.Rp_Icon img				{ width: 25%; }

#Report	.Rp_Title_1			{ font-size: 125%; float: none; text-align: center; }

#Report	.Rp_Title_2			{ font-size: 125%; float: none; text-align: center; }

#Report	.Rp_Title_3			{ font-size: 125%; float: none; text-align: center; }

}

/* ------------------------------------------------------------ */

#Merit						{ clear: both; padding: 0px 0px 100px 0px; }

#Merit h2					{ width: 100%; padding: 20px; margin-bottom: 0px; background-color: #08A100; text-align: center; }

#Merit .Mt_Adoption			{ float: left; width: 49%; margin-top: 100px; margin-right: 1%; text-align: right; }

#Merit .Mt_Individual		{ float: left; width: 49%; margin-top: 100px; margin-left:  1%; text-align:  left; }

@media screen and (max-width: 767px){

#Merit h2 img				{ width: 70%; }

#Merit .Mt_Adoption			{ float: none; width: 100%; margin-top: 50px; margin-right: 0%; text-align: center; }

#Merit .Mt_Adoption img		{ width: 80%; }

#Merit .Mt_Individual		{ float: none; width: 100%; margin-top: 50px; margin-left:  0%; text-align: center; }

#Merit .Mt_Individual img	{ width: 80%; }

}

@media only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){

#Merit h2 img				{ width: 70%; }

#Merit .Mt_Adoption			{ float: none; width: 100%; margin-top: 50px; margin-right: 0%; text-align: center; }

#Merit .Mt_Adoption img		{ width: 80%; }

#Merit .Mt_Individual		{ float: none; width: 100%; margin-top: 50px; margin-left:  0%; text-align: center; }

#Merit .Mt_Individual img	{ width: 80%; }

}

/* ------------------------------------------------------------ */

#Flow						{ width: 100%; padding: 0px 0px 200px 0px; background-color: #D8F0D6; }

#Flow h2					{ text-align: center; margin-top: 50px; margin-bottom: 50px; }

#Fl_Inner					{ width: 960px; margin: 0px auto; }

#Flow dl					{ float: left; width: 200px; }

#Flow dd					{ font-size: 75%; }

#Fl_Explanation				{ width: 960px; margin: 30px auto 0px auto; color: #08A100; font-size: 80%; font-weight: 600; line-height: 200%; }

.Fl_Arrow					{ float: left; }

@media screen and (max-width: 767px){

#Flow						{ padding: 0px 0px 100px 0px; }

#Flow h2 img				{ width: 95%; }

#Fl_Inner					{ width: 100%; }

#Flow dl					{ float: none; width: 200px; margin: 0px auto 50px auto; text-align: center; }

#Flow dl img				{ width: 100px; }

#Flow dt img				{ width:  80%; }

#Fl_Explanation				{ width:  90%; font-size: 70%; }

.Fl_Arrow					{ display: none; }

}

@media only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){

#Flow						{ padding: 0px 0px 100px 0px; }

#Flow h2 img				{ width: 70%; }

#Fl_Inner					{ width: 100%; }

#Flow dl					{ float: none; width: 200px; margin: 0px auto 50px auto; text-align: center; }

#Flow dl img				{ width: 100px; }

#Fl_Explanation				{ width:  90%; font-size: 70%; }

.Fl_Arrow					{ display: none; }

}

/* ------------------------------------------------------------ */

#Company					{ width: 100%; padding: 100px 0px 200px 0px;
							  position: relative;
							  background-image: url(../img/Cp_Back.jpg);
							  background-position: center center;
							  background-repeat: no-repeat;
							  background-attachment: fixed;
							  background-size: cover;
							  background-color: #000000; }

#Company #h2-Box			{ text-align: center; margin-bottom: 50px; }

#Company h2					{ font-size: 300%; font-weight: 600; border-bottom: 5px #000000 solid; display: inline; }

#Cp_Status					{ width: 50%; margin: 0px auto; font-size: 80%; }

#Cp_Status .L				{ width: 20%; border-bottom: 1px #999999 solid; padding: 20px 0px; }

#Cp_Status .R				{ width: 80%; border-bottom: 1px #999999 solid; padding: 20px 0px; }

@media screen and (max-width: 767px){

#Company					{ padding: 100px 0px 100px 0px;
							  position: relative;
							  background-image: url(../img/Cp_Back.jpg);
							  background-position: center center;
							  background-repeat: no-repeat;
							  background-attachment: scroll;
							  background-color: #000000;  }

#Company h2					{ font-size: 200%; }

#Cp_Status					{ width:  90%; margin: 0px auto; }

#Cp_Status .L				{ width: 100%; display: block; /*background-color: #09A100;*/ border-bottom: 1px #999999 solid; padding: 10px 20px; }

#Cp_Status .R				{ width: 100%; display: block; /*background-color: #FFFFFF;*/ border-bottom: 1px #999999 solid; padding: 10px 20px; }

}

@media only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){

#Company					{ width: 100%; padding: 100px 0px 200px 0px;
							  position: relative;
							  background-image: url(../img/Cp_Back.jpg);
							  background-position: center center;
							  background-repeat: no-repeat;
							  background-attachment: scroll;
							  background-size: cover;
							  background-color: #000000; }

}

/* ------------------------------------------------------------ */

#Form						{ width: 100%; padding: 100px 0px 200px 0px; background-color: #E0F3DF; }

#Form #h2-Box				{ text-align: center; margin-bottom: 50px; }

#Form h2					{ font-size: 300%; font-weight: 600; border-bottom: 5px #000000 solid; display: inline; }

#Form h3					{ text-align: center; margin-bottom: 50px; }

#Form-Inner					{ width: 1000px; margin: 0px auto; padding: 100px; background-color: #FFFFFF; }

#Fm_Form					{ width: 100%; }

#Fm_Form tr					{ width: 100%; }

#Fm_Form th					{ width:  35%; padding: 10px; border-bottom: 1px #CCCCCC solid; text-align: right; }

#Fm_Form td					{ width:  65%; padding: 10px; border-bottom: 1px #FFFFFF solid; }

#Fm_Form .Fm_Waku			{ width: 100%; padding: 20px; border: 1px #666666 solid; }

#Fm_Form .Fm_Waku2			{ width: auto; padding: 10px; border: 1px #666666 solid; margin-left: 10px; }

#Fm_Form .Red				{ float:  left; padding: 10px; background-color: #CC0000; color: #FFFFFF; font-weight: 600;
							  border-radius: 15px;
							  -webkit-border-radius: 15px;
							  -moz-border-radius: 15px; }

#Fm_Form .Gray				{ display: none;
							  float:  left; padding: 10px; background-color: #CCCCCC; color: #FFFFFF; font-weight: 600;
							  border-radius: 15px;
							  -webkit-border-radius: 15px;
							  -moz-border-radius: 15px; }

#Fm_Form .Capt				{ float: right; padding: 10px; }

label						{ width: 100%; display: block; padding: 10px; }

label .Type					{ display: none; }

input.Fm_Waku:focus, textarea:focus {  }

#Fm_CheckText				{ text-align: center; margin: 30px 0px; font-size: 75%; }

#Fm_CheckText a				{ color: #000000; font-weight: 600; }

#Fm_BtnBros					{ text-align: center; }

#Fm_Button					{ background-color: #09A100; color: #FFFFFF; text-decoration: none;
							  padding: 20px 40px;
							  margin: 5px 5px;
							  font-size: 175%;
							  font-weight: 600;
							  border-radius: 20px;
							  -webkit-border-radius: 20px;
							  -moz-border-radius: 20px;
							  border: none;
							  cursor: pointer; }

#Fm_Button:hover			{ background-color: #F27E31;
							  -webkit-transition: 0.5s ease-in-out;
							  -moz-transition: 0.5s ease-in-out;
							  -o-transition: 0.5s ease-in-out;
							  transition: 0.5s ease-in-out; }

.Fm_Explanation				{ width: 100%; margin-bottom: 30px; }

.Fm_Explanation .Title		{ width:  20%; padding: 10px; margin-bottom: 1px; border-top: 1px #666666 solid; display: block; float: left;
							  background-color: #666666; color: #FFFFFF; }

.Fm_Explanation .Text		{ width:  80%; padding: 10px; margin-bottom: 1px; border-top: 1px #666666 solid; display: block; float: left; }

@media screen and (max-width: 767px){

#Form						{ padding: 100px 0px 100px 0px; }

#Form h2					{ font-size: 200%; }

#Form h3					{ font-size:  80%; width: 90%; margin: 0px auto 50px auto; }

#Form-Inner					{ width: 100%; padding: 20px; }

#Fm_Form th					{ width: 100%; display: block; background-color: #EEEEEE; }

#Fm_Form td					{ width: 100%; display: block; }

#Fm_Form .Capt				{ float: left; padding: 10px; }

}

@media only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){

#Form						{ padding: 100px 0px 100px 0px; }

#Form h2					{ font-size: 200%; }

#Form h3					{ font-size:  80%; width: 90%; margin: 0px auto 50px auto; }

#Form-Inner					{ width: 100%; padding: 20px; }

#Fm_Form th					{ width: 100%; display: block; background-color: #EEEEEE; }

#Fm_Form td					{ width: 100%; display: block; }

}

/* ------------------------------------------------------------ */

nav							{ position: fixed; top: -10px; right: 20px; }

nav:hover					{ position: fixed; top:  -7px; right: 20px;
							  -webkit-transition: 0.25s ease-in-out;
							  -moz-transition: 0.25s ease-in-out;
							  -o-transition: 0.25s ease-in-out;
							  transition: 0.25s ease-in-out; }

nav img						{ width: 271px; height: 97px; }

@media screen and (max-width: 767px){

nav							{ position: fixed; top: auto; top: -10px; right: 20px; }

nav:hover					{ position: fixed; top: auto; top: - 7px; right: 20px;
							  -webkit-transition: 0.25s ease-in-out;
							  -moz-transition: 0.25s ease-in-out;
							  -o-transition: 0.25s ease-in-out;
							  transition: 0.25s ease-in-out; }

nav img						{ width: 203px; height: 73px; }

}

/* ------------------------------------------------------------ */

#p_FtBack					{ width: 45px; height: 45px;
							  position: fixed; bottom: 40px; right: 40px; z-index: 9999; }

#p_FtBack a					{ display: block; text-decoration: none;
							  color: #FFFFFF; font-weight: bold; }

#p_FtBack a:hover			{ width: 45px; height: 45px;
							  opacity: 0.5;
							  filter: alpha(opacity=50);
							  -moz-opacity: 0.5; }

@media screen and (max-width: 767px){
	
	#p_FtBack					{ width: 45px; height: 45px;
							  position: fixed; bottom: 5px; right: 10px; z-index: 9999; }
	
	
	}

/* ------------------------------------------------------------ */

footer						{ width: 100%; height: auto; text-align: center;
							  padding: 50px 0px; background-color: #5A5A5A; 
							  color:#fff;
							  }

@media screen and (max-width: 767px){

footer img					{ width: 50%; }

}

/* ------------------------------------------------------------ */

@media screen and (min-width: 1024px){ .PC { display: block; } .SP { display: none; }
											 body { font-family: 'Noto Sans Japanese', sans-serif; } }
@media screen and (max-width: 1023px){ .PC { display: block; } .SP { display: none; } }
@media screen and (min-width:  768px){ .PC { display: block; } .SP { display: none; } }
@media screen and (max-width:  767px){ .PC { display: none; } .SP { display: block; } }
@media screen and (max-width:  479px){ .PC { display: none; } .SP { display: block; } }

/* 大ディスプレイ */
@media screen and (min-width: 1920px) and (max-width: 9999px){ }

/* 中ディスプレイ～ノート */
@media screen and (min-width: 768px) and (max-width: 1919px){ }

/* 中ディスプレイ以上のＰＣ全て */
@media screen and (min-width: 768px){ }

/* ファブレットや最近のスマホ */
@media screen and (max-width: 767px){ }

/* 一昔前の小さいスマホ */
@media screen and (max-width: 479px){ }

/* 一昔前の小さいスマホの横 */
@media screen and (min-device-width: 320px) and (max-device-width: 720px) and (orientation:landscape){ }

/* ｉＰａｄの縦 */
@media screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait){ }

/* ｉＰａｄの横 */
@media screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){ }

/* ファブレットや最近のスマホとｉＰａｄの縦＆横（便利） */
@media only screen and (max-width: 767px),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){ }
 
 /* ｉＰａｄの縦＆横（便利） */
@media only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:portrait),
 only screen and (min-device-width: 721px) and (max-device-width: 1024px) and (orientation:landscape){ }