@charset "utf-8";
/*****************************************************************************
CSS only for /lifesolutions/about/history/index.html
*****************************************************************************/

.fixed {
    position: fixed;
    top: 0;
    padding: 0;
    width: 100%;
    z-index:1;
}

@media only screen and (max-width:640px) and (max-device-width:1280px) {
	
	.fixed {
    position: fixed;
    top: 0px;
    padding: 0;
    width: 100%;
}
}
/* .kv_block
-----------------------------------------*/

.kv_block{
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: url('../img/img_history_kv.jpg') 0 50% no-repeat;
    background-size: cover;
	height: 500px;
}

.kv_block_inner {
    margin: 0 auto;
    padding: 0;
    text-align: right;
	top: 50%;
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
}

.kv_block_title {
	font-size: 48px;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	text-align:left;
	margin-left:auto;
	width: 540px;
	color: #FFF;
}

@media screen and (max-width:967px) {
.kv_block {
    width: 100%;
    position: relative;
    background: url('../img/img_history_kv.jpg') center 24% no-repeat;
    background-size: cover;
	height: 400px;
}

.kv_block_title{
	font-size: 48px;
	font-family: 'Roboto', sans-serif;
    font-weight: 800;
	line-height: 1.2;
	text-align:left;
	margin-left:20px;
}
}

@media screen and (max-width:640px) {
	
.kv_block {
    width: 100%;
    position: relative;
    background: url('../img/img_history_kv_sp.jpg') 0 bottom no-repeat;
    background-size: cover;
	height: 120vw;
}

.kv_block_inner {
	top: 30%;
	-webkit-transform : translateY(-30%);
	transform : translateY(-30%);
}
	
.kv_block_title{
	font-size: 8vw;
	margin: 20px 20px;
}
	
}

/* .lead_block
-----------------------------------------*/

.lead_block {
	padding: 5em 0;
}

.lead_block h2 {
	font-size: 2.25em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 10px;
}

.lead_block p {
	font-size: 1.125em;
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
	line-height: 1.6;
	text-align: center;
}

.nav_fixed{
	background:  #FFF;
}

.lead_block ul {
	margin: 10px auto;
	text-align: center;
	width: auto;
	display: block;
}

.lead_block ul li {
	display:inline-block;
	text-align: center;
	width: 200px;
	border-right: 1px solid #000;
	padding: 10px 0;
	font-size: 1.125em;
	font-family: 'Roboto', sans-serif;
    font-weight: 600;
}

.lead_block ul li:first-child {
	border-left: 1px solid #000;
}

.lead_block ul li a {
	color: #000 !important;
	transition: 1.0s ;
}

.lead_block ul li a:hover {
	text-decoration: none;
	opacity: 0.5 ;
}


@media only screen and (max-width:640px) and (max-device-width:1280px) {
.lead_block h2 {
	font-size: 6vw;
}

.lead_block p {
	font-size: 4vw;
	text-align: left;
	margin: 0 20px;
}

.lead_block ul li {
	width: 24%;
	border-right: none;
	position: relative;
	padding: 0px 0;
}

.lead_block ul li:first-child {
	border-left: none;
}

.lead_block ul li a:after{
	color:#000;
	content: " \f107";
	font-family: FontAwesome;
	font-size:120%;
	margin: 0 0 0;
	}
}

/* .fadein
-----------------------------------------*/
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 300ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/* since1918
-----------------------------------------*/

#since1918 {
	background: url('../img/bg_1918.png');
	padding-top:  60px;
}

.since1918_pc {
	width: 1030px;
	height: 2267px;
	position: relative;
	margin: 0 auto;
}

.since1918_pc h2 {
	font-size: 6em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin-bottom: 10px;
	position: absolute;
	top: 40px;
	left: 24px
}

.since1918_pc h3 {
	font-size: 3em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin: 10px 0;
	position: absolute;
	top: 126px;
	left: 430px;
}

.since1918_pc p {
	font-size: 1.08em;
	font-family: 'Roboto', sans-serif;
    font-weight: 500;
	line-height: 1.4;
	position: absolute;
	top: 250px;
	left: 430px;
	width: 440px;
}

.since1918_img01_pc{
	position: absolute;
	top: 140px;
	left: 24px;
}

.since1918_img02_pc{
	position: absolute;
	top: 350px;
	left: 0px;
}

.since1918_img03_pc{
	position: absolute;
	top: 570px;
	left: 0px;
}

.since1918_img04_pc{
	position: absolute;
	top: 1150px;
	left: 0px;
}

/* since1970
-----------------------------------------*/

#since1970 {
	background: url('../img/bg_1970.jpg');
	padding-top:  60px;
}

.since1970_pc {
	width: 1030px;
	height: 2246px;
	position: relative;
	margin: 0 auto;
}

.since1970_pc h2 {
	font-size: 6em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin-bottom: 10px;
	position: absolute;
	top: 40px;
	left: 24px
}

.since1970_pc h3 {
	font-size: 3em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin: 10px 0;
	position: absolute;
	top: 126px;
	left: 430px;
}

.since1970_pc p {
	font-size: 1.08em;
	font-family: 'Roboto', sans-serif;
    font-weight: 500;
	line-height: 1.4;
	position: absolute;
	top: 250px;
	left: 430px;
	width: 440px;
}

.since1970_img01_pc{
	position: absolute;
	top: 140px;
	left: 24px;
}

.since1970_img02_pc{
	position: absolute;
	top: 350px;
	left: 0px;
}

.since1970_img03_pc{
	position: absolute;
	top: 1178px;
	left: 0px;
}

/* since2000
-----------------------------------------*/

#since2000 {
	background: url('../img/bg_2000.jpg');
	padding-top:  60px;
}

.since2000_pc {
	width: 1030px;
	height: 2357px;
	position: relative;
	margin: 0 auto;
}

.since2000_pc h2 {
	font-size: 6em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin-bottom: 10px;
	position: absolute;
	top: 40px;
	left: 24px
}

.since2000_pc h3 {
	font-size: 3em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin: 10px 0;
	position: absolute;
	top: 126px;
	left: 430px;
}

.since2000_pc p {
	font-size: 1.08em;
	font-family: 'Roboto', sans-serif;
    font-weight: 500;
	line-height: 1.4;
	position: absolute;
	top: 250px;
	left: 430px;
	width: 440px;
}

.since2000_img01_pc{
	position: absolute;
	top: 140px;
	left: 24px;
}

.since2000_img02_pc{
	position: absolute;
	top: 350px;
	left: 0px;
}

.since2000_img03_pc{
	position: absolute;
	top: 1352px;
	left: 0px;
}

/* since2019
-----------------------------------------*/

#since2019 {
	background: #79b7c6;
	padding-top:  60px;
}

.since2019_pc {
	width: 1030px;
	height: 2822px;
	position: relative;
	margin: 0 auto;
}

.since2019_pc h2 {
	font-size: 6em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin-bottom: 10px;
	position: absolute;
	top: 40px;
	left: 24px
}

.since2019_pc h3 {
	font-size: 3em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin: 10px 0;
	position: absolute;
	top: 126px;
	left: 430px;
}

.since2019_pc p {
	font-size: 1.08em;
	font-family: 'Roboto', sans-serif;
    font-weight: 500;
	line-height: 1.4;
	position: absolute;
	top: 250px;
	left: 430px;
	width: 440px;
}

.since2019_img01_pc{
	position: absolute;
	top: 140px;
	left: 24px;
}

.since2019_img02_pc{
	position: absolute;
	top: 350px;
	left: 0px;
}

.since2019_img03_pc{
	position: absolute;
	top: 1137px;
	left: 0px;
}

.since2019_img04_pc{
	position: absolute;
	top: 1697px;
	left: 0px;
}

.solutions_pc{
	padding: 6%;
	border: 1px solid #FFF;
	border-radius: 10px;
	margin: 30px 0 0;
	width: 786px;
	height: 420px;
	box-sizing: border-box;
	position: absolute;
	top: 2220px;
	right: 10px;
}

.solutions_pc p {
	font-size: 1.25em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.6;
	position: absolute;
	top: 30px;
	left: 40px;
	width: 700px;
}

.solutions_pc h4 {
	font-size: 1.08em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin: 10px 0;
}

.solutions_pc_img01 {
	width: 340px;
	position: absolute;
	top: 100px;
	left: 40px;
}

.solutions_pc_img02 {
	width: 340px;
	position: absolute;
	top: 100px;
	left: 406px;
}

.solutions_pc_img01 img,
.solutions_pc_img02 img {
	width: 340px;
}

.solutions_pc a {
	font-size: 0.88em;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	padding: 8px 24px;
	background: #000;
	border-radius: 20px;
	display: inline-block;
	color: #FFF !important;
	transition: 1.0s ;
}

.solutions_pc a:hover {
	text-decoration: none;
	opacity: 0.7 ;
}

/* since for SP
-----------------------------------------*/

@media only screen and (max-width:640px) and (max-device-width:1280px) {
#since1918,
#since1970,
#since2000 {
	padding: 40px 0 0;
}

#since2019 {
	padding: 40px 0 30px;
}

.since1918_sp,
.since1970_sp,
.since2000_sp,
.since2019_sp {
	padding: 30px 0 0;
	margin: 0 2.60416%;
}

.since1918_sp h2,
.since1970_sp h2,
.since2000_sp h2,
.since2019_sp h2 {
	font-size: 20vw;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin-bottom: 10px;
	text-align:center;
}

.since1918_sp h3,
.since1970_sp h3,
.since2000_sp h3,
.since2019_sp h3 {
	font-size: 8vw;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin: 10px 0;
}

.since1918_sp p,
.since1970_sp p,
.since2000_sp p,
.since2019_sp p {
	font-size: 4vw;
	font-family: 'Roboto', sans-serif;
    font-weight: 500;
	line-height: 1.4;
	margin-bottom: 10px;
}

.since1918_sp img,
.since1970_sp img,
.since2000_sp img,
.since2019_sp img {
	display: block;
}

.solutions_sp{
	padding: 6%;
	border: 1px solid #FFF;
	border-radius: 10px;
	margin: 30px 0 0;
}

.solutions_sp h4 {
	font-size: 4vw;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	line-height: 1.2;
	margin: 10px 0;
}

.solutions_sp img {
	margin-top: 20px;
}

.solutions_sp a {
	font-size: 3.4vw;
	font-family: 'Roboto', sans-serif;
    font-weight: 900;
	padding: 8px 24px;
	background: #000;
	border-radius: 20px;
	display: inline-block;
	color: #FFF !important;
}
}