@charset "UTF-8";

/* ======================
File Name: resource2017/css/layout-home.css
Latest Update: 2017/03/27
Version: 1.0
====================== */


/*  Main Title  */
.header .header-fig {
	position: relative;
	width: 100%;
	min-height: 100%;
	background-image: url(../images/header-fig-bg.png);
	background-repeat: repeat-x;
	background-size: contain; 
	text-align: center;
}
.header .header-fig .header-fig-pc {
	display: block;
	width: 100%;
	max-width: 940px;
	height: auto;
	max-height: 500px;
	min-height: 53%;
	margin: 0 auto;
}
.header .header-fig .header-fig-sp {
	display: none;
}
.header .header-fig .svg ,
.header .header-fig .png ,
.header .header-fig .dummy {
	display: block;
	width: 100%;
	height: auto;
	min-height: 300px;
	margin: 0;
}


@media only screen and (max-width: 600px) {
	.header .header-fig {
		background-image: url(../images/header-fig-bg-sp.png);
	}
	.header .header-fig .header-fig-pc {
		display: none;
	}
	.header .header-fig .header-fig-sp {
		display: block;
		height: auto;
		min-height: 82%;
		margin: 0;
	}
}


/* Section Mission */
.section-mission#mission-01 ,
.section-mission#mission-04 {
	background-image: url(../images/section-bg-thick.png);
}
.section-mission#mission-02 {
	background-image: url(../images/section-bg-white.png);
}
.section-mission#mission-03 {
	background-image: url(../images/section-bg-light.png);
}

.section-box {
	width: 100%;
    display:-webkit-box;
    display:-moz-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
	-js-display: flex;
    display:flex;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -webkit-flex-pack:center;
    -moz-flex-pack:center;
    -ms-flex-pack:center;
    -webkit-justify-content:center;
    -moz-justify-content:center;
    justify-content:center;
	background-image: url(../images/section-bg-box.png);
	background-repeat: no-repeat;
}
@media  (min-width: 760px) {
}
.section-box .section-mission#mission-03 ,
.section-box .section-mission#mission-04 {
	width: 50%;
	max-width: 490px;
}
@media  (max-width: 760px) {
	.section-box {
		display: block;
		background: none;
	}
	.section-box .section-mission#mission-03 ,
	.section-box .section-mission#mission-04 {
		display: block;
		width: 100%;
		max-width: 760px;
	}
}


.section-mission-title {
	margin: 2.5em 0 1.4em 0;
	padding: 0;
	color: #2db1b9;
	line-height: 0.1rem;
	text-align: center!important; 
}
.section-mission-title .section-title-svg {
	width: auto;
	max-width: 100%;
	height: 36px;
}
/* ( for print Chrome )  */
@media only screen and (max-width: 800px) {
	.section-mission-title .section-title-svg {
	}
}
@media only screen and (max-width: 760px) {
	.section-mission-title {
		margin: 2.2em 0 1.2em 0;
	}
	.section-mission-title .section-title-svg {
		height: 35px;
	}
}
@media only screen and (max-width: 540px) {
	.section-mission-title {
		margin: 1.9em 0 1.0em 0;
	}
	.section-mission-title .section-title-svg {
		height: 33px;
	}
}

/* section 01 */
#mission-01 .section-text {
	width: 62%;
	padding: 0 0 1.4em 0;
}
#mission-01 .section-figure {
	width: 34%;
	padding: 0 0 1.4em 0;
}
#mission-01 .section-figure .section-figure-svg {
	max-width: 100%;
	height: auto;
}
#mission-01 .section-sp {
	display: none;
}
@media only screen and (max-width: 700px) {
	#mission-01 .section-float-left ,
	#mission-01 .section-float-right {
		float: none;
	}
	#mission-01 .section-text {
		width: auto;
		padding-bottom: 1.2em;
	}
	#mission-01 .section-figure {
		display: none;
	}
	#mission-01 .section-sp {
		display: block;
		padding-top: 1.2em;
	}
	#mission-01 .section-sp figure {
		max-width: 80%;
		margin: 0 auto;
	}
	#mission-01 .section-pc {
		display: none;
	}
}
#mission-01 .home-about-care {
	width: 100%;
	display: inline-block;
	font-size: 0.1%;
    letter-spacing: -10em;
}
#mission-01 .home-about-care li {
	line-height: 0em;
	width: 33.3%;
	display: inline-block;
    letter-spacing: normal;
}
#mission-01 .home-about-care li a {
	position: relative;
	display: block;
	width: 83%;
	margin-left: auto;
	margin-right: auto;
}
#mission-01 .home-about-care li a:after {
	content: "詳しく知る";
	text-indexnt: -9999px;
	overflow: hidden;
	position: absolute;
	box-sizing: border-box;
	width: 40%;
	height: 12.5%;
	bottom: 11.5%;
	left: 50%;
	margin: 0 0 0 -20%; 
	border: 2px #ffffff solid;
	background-image: url(../images/home-about-link.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#mission-01 .home-about-care li a:hover:after {
	background-color: rgba(255,255,255,0.3);
	-webkit-transition: 0.15s ease-in;
	-moz-transition: 0.15s ease-in;
	-o-transition: 0.15s ease-in;
	transition: 0.15s ease-in;
	width: 42%;
	margin: 0 0 0 -21%; 
	height: 13.5%;
	bottom: 11.0%;
}
#mission-01 .home-about-care li a:hover img {
	filter: alpha(opacity=90);
	-moz-opacity: 0.90;
	opacity: 0.90;
	-webkit-transition: 0.25s ease-in;
	-moz-transition: 0.25s ease-in;
	-o-transition: 0.25s ease-in;
	transition: 0.25s ease-in;
}
#mission-01 .home-about-care li img {
	width: 100%;
	height: auto;
	border: none;
}
@media only screen and (max-width: 760px) and (min-width: 701px) {
	#mission-01 .home-about-care {
		width: 106%;
		margin-left: -3%; 
		margin-right: -3%; 
	}
	#mission-01 .home-about-care li a {
		width: 86%;
	}
}
@media only screen and (max-width: 700px) {
	#mission-01 .home-about-care {
		max-width: 600px;
		margin-left: auto; 
		margin-right: auto; 
	}
	#mission-01 .home-about-care li {
		width: 49.5%;
	}
	#mission-01 .home-about-care li:first-child {
		margin-left: 10px; 
		margin-right: 10px;
	}
	#mission-01 .home-about-care li a {
	}
	#mission-01 .home-about-care li img {
	}
}
@media only screen and (max-width: 640px) {
	#mission-01 .home-about-care {
		margin-left: auto; 
		margin-right: auto; 
	}
	#mission-01 .home-about-care li {
		width: 49.5%;
	}
	#mission-01 .home-about-care li a {
		width: 90%;
	}
	#mission-01 .home-about-care li img {
	}
	#mission-01 .home-about-care li a:after ,
	#mission-01 .home-about-care li a:hover:after {
		width: 47%;
		height: 13.8%;
		bottom: 11.75%;
		margin: 0 0 0 -23.5%; 
		border: 2px #ffffff solid;
	}
}
@media only screen and (max-width: 540px) {
	#mission-01 .home-about-care {
		width: 106%;
		margin-left: -3%; 
		margin-right: -3%; 
	}
	#mission-01 .home-about-care li a:after ,
	#mission-01 .home-about-care li a:hover:after {
		width: 54%;
		height: 15%;
		bottom: 12%;
		margin: 0 0 0 -27%; 
	}
}


/* section 02 */
#mission-02 .member-fig-narabi {
	display: none;
}
@media only screen and (max-width: 640px) {
	#mission-02 .member-fig-narabi {
		display: block;
		width: 100%;
		text-align: center;
	}
	#mission-02 .member-fig-narabi img {
		max-width: 95%;
		height: auto;
	}
}

/* section 03 */
#mission-03 .section-figure-svg {
	max-width: 100%;
	height: auto;
}
.section-mission .point  {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.section-mission .point li {
	margin-bottom: 0.4em;
	padding: 0 0 0.4em 26px;
	line-height: 1.4em;
	text-indent: 0em;
	background-repeat: no-repeat !important;
	background-position: -1px 0px;
	background-size: 18px 24px;
}
.section-mission .point li:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 720px) {
	.section-mission .point li {
		background-position: -1px -0px;
	}
}
.section-mission .point li.point-01 {
	background-image: url(../images/seven-point-01.png);
}
.section-mission .point li.point-02 {
	background-image: url(../images/seven-point-02.png);
}
.section-mission .point li.point-03 {
	background-image: url(../images/seven-point-03.png);
}
.section-mission .point li.point-04 {
	background-image: url(../images/seven-point-04.png);
}
.section-mission .point li.point-05 {
	background-image: url(../images/seven-point-05.png);
}
.section-mission .point li.point-06 {
	background-image: url(../images/seven-point-06.png);
}
.section-mission .point li.point-07 {
	background-image: url(../images/seven-point-07.png);
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
	.section-mission .point li.point-01 {
		background-image: url(../images/seven-point-01@2x.png);
	}
	.section-mission .point li.point-02 {
		background-image: url(../images/seven-point-02@2x.png);
	}
	.section-mission .point li.point-03 {
		background-image: url(../images/seven-point-03@2x.png);
	}
	.section-mission .point li.point-04 {
		background-image: url(../images/seven-point-04@2x.png);
	}
	.section-mission .point li.point-05 {
		background-image: url(../images/seven-point-05@2x.png);
	}
	.section-mission .point li.point-06 {
		background-image: url(../images/seven-point-06@2x.png);
	}
	.section-mission .point li.point-07 {
		background-image: url(../images/seven-point-07@2x.png);
	}
}



/* section 04 */
#mission-04 .section-text {
	width: 61%;
}
#mission-04 .section-figure {
	width: 35%;
	padding: 30px 0 2.6em 0;
}
#mission-04 .section-figure .section-figure-svg {
	height: auto;
}
@media only screen and (max-width: 860px) and (min-width: 641px) {
	#mission-04 .section-figure {
		padding-top: 8%;
	}
}
@media only screen and (max-width: 640px) {
	#mission-04 .section-float-left ,
	#mission-04 .section-float-right {
		float: none;
	}
	#mission-04 .section-text ,
	#mission-04 .section-figure {
		width: auto;
	}
	#mission-04 .section-text {
		padding-bottom: 1.2em;
	}
	#mission-04 .section-figure {
		padding: 0 0 2.6em 0;
		text-align: center;
	}
}