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

html,body {
width:100%;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
color:#4D4D4D;
}
body {
margin:0;
padding:0;
}

/*Firstview*/
#Firstview {
height:100vh;
position: relative;
overflow: hidden;
}
.firstviewlogo {
z-index: 9999;
}
.firstviewlogo img {
max-width:100%;
}
.border_top,.border_bottom,.border_left,.border_right {
position:absolute;
background:#fff;
z-index: 100;
}
.border_top {
top:20px;
}
.border_bottom {
bottom:20px;
}
.border_top,.border_bottom {
height:24px;
left:20px;
right:20px;
}
.border_left {
left:20px;
}
.border_right {
right:20px;
}
.border_left,.border_right {
width:24px;
top:20px;
bottom:20px;
}
/*About*/
#About {
}
.aboutlist {
padding:2rem;
}
.aboutlist {
  width: 100%;
  position: relative;
  border: solid 5px #00BABC;
  background-color: #fff;
}

.aboutlist::before,
.aboutlist::after {
  position: absolute;
  content: "";
  display: block;
  background-color: #fff;
}

.aboutlist::before {
  top: -5px;
  bottom: -5px;
  left: 10px;
  right: 10px;
}

.aboutlist::after {
  top: 10px;
  bottom: 10px;
  left: -5px;
  right: -5px;
}

.aboutlist ul {
  position: relative;
  z-index: 1;
padding:0;
}
 
.aboutlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}
 
.aboutlist li{
	position:relative;
	padding-left:20px;
}
 
.aboutlist li:after, .aboutlist li:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:4px; 
	left:8px; 
	height:11px; 
	width:4px; 
	background:#707070; 
	border-radius:10px;
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
.aboutlist li:before{
	top:8px; 
	left:3px;
	height:8px; 
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
/*Reason*/
#Reason {
background: #EBEBEB;
width:100%;
}
.Reason {
max-width: 100%;
width:auto;
}
#Reason .card-header {
text-align: center;
background: #0D3849;
color:#fff;
font-size:1.3rem;
font-weight: bold;
}
/*Flow*/

.Flow_no1_title,.Flow_no2_title,.Flow_no3_title,.Flow_no4_title,.Flow_no5_title {
color:#fff;
font-weight: bold;
font-size: 0.8rem;
}
.Flow_no1_title {
display: inline-block;
position: relative;
min-width: 100px;
min-height: 100px;
border-radius: 50%;
background: #0D3849;
text-align:center;
line-height: 100px;
}
.Flow_no1_title::before{
	position: absolute;
	top:75%;
	left:50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
    content: '';
    display: inline-block;
    background: #0D3849;
}
.Flow_no1_text {
}
.Flow_no2_title {
position: relative;
display: inline-block;
min-width: 100px;
min-height: 100px;
border-radius: 50%;
background: #0070A7;
}
.Flow_no2_title span {
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :100px;
text-align:center;
}
.Flow_no2_title::before{
	position: absolute;
	top:75%;
	left:50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
    content: '';
    display: inline-block;
    background: #0070A7;

}
.Flow_no2_text {
}
.Flow_no3_title {
position: relative;
display: inline-block;
min-width: 100px;
min-height: 100px;
border-radius: 50%;
background: #00BABC;
}
.Flow_no3_title span {
position: absolute;
display: inline-block;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :100px;
text-align:center;
}
.Flow_no3_title::before{
position: absolute;
top:75%;
left:50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
content: '';
display: inline-block;
background: #00BABC;
}
.Flow_no3_text {
}
.Flow_no4_title {
display: inline-block;
position: relative;
min-width: 100px;
min-height: 100px;
border-radius: 50%;
background: #FF9E29;
text-align:center;
line-height: 100px;
}
.Flow_no4_title::before{
position: absolute;
top:75%;
left:50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
content: '';
display: inline-block;
background: #FF9E29;
}
.Flow_no4_text {
}
.Flow_no5_title {
display: inline-block;
position: relative;
min-width: 100px;
min-height: 100px;
border-radius: 50%;
background: #FF3636;
text-align:center;
line-height: 100px;
}
.Flow_no5_text {
}
/*Contact*/
#Contact {
background: #EBEBEB;
text-align: center;
}
#Contact .tel {
text-decoration: none;
color:#4d4d4d;
font-size:1.5rem;
cursor: default;
}
#Contact .tel:visited {
color: #4d4d4d;
}
.btn-flat-border {
  display: inline-block;
  padding: 1em 3em;
  text-decoration: none!important;
  color: white;
  background: #222222;
  transition: .3s;
}
.btn-flat-border:hover {
background: #FFF;
outline: solid 1px #222222;
color: #222222;
}
.logo img {
max-width:100%;
}
@media screen and ( min-width:992px ) {
.sp {
display: none;
}
h2 {
margin-bottom:2rem;
}
/*Firstview*/
#Firstview {
background: url("img/firstview_bg.jpg") no-repeat;
background-size: cover;
background-position: center;
}
.firstviewlogo {
width:300px;
position: absolute;
top:70px;
left:70px;
}
.Firstview_catch span {
display: block;
color:#fff;
background: #000;
padding:0.5rem 0.5rem 0.5rem 4rem;
font-weight: bold;
z-index:9999;
}
.Firstview_catch {
position: absolute;
bottom:100px;
z-index: 9999;
}
.Firstview_catch_sub {
width:600px;
font-size:1.5rem;
margin-bottom:3%;
}
.Firstview_catch_main {
width:700px;
font-size: 3rem;
}
.testtube {
position: absolute;
top:55vh;
right:15vh;
height:35vh;
z-index: 1000;
}
#About,#Reason,#Flow,#Contact {
padding:6rem 0;
}
.Footer_con {
display: flex;
justify-content: space-between;
align-content: center;
}
/*Reason*/
#Reason .card {
margin:0;
padding:0;
display: flex;
}
.Reason_Facility {
display: flex;
}
#Reason ul {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
#Reason .card {
height:16rem;
}
#Reason .card-body {
padding:1rem 0;
}
#Reason ul li {
width:50%;
margin-bottom: 0.5rem;
padding-left :0;
}
/*Pic*/
#Pic {
height:200px;
background: url("img/imagepic.png") no-repeat;
background-size: cover;
background-position: center;
}
.Flow_contents .row,.Flow_contentsx2 .row{
display: flex;
align-items: center;
}
.Flow_contents,.Flow_contentsx2{
height:150px;
}
.Flow_no1_title::before{
height: 125px;
width: 10px;
}
.Flow_no2_title::before{
height: 125px;
width: 10px;
}
.Flow_no3_title::before{
height: 125px;
width: 10px;
}
.Flow_no4_title::before{
height: 125px;
width: 10px;
}
footer {
height:80px;
background: #222222;
color:#FFF;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: block;
width:300px;
}
.logo img {
max-width:100%;
}
}
@media screen and ( max-width:991px ) {
/*Firstview*/
#Firstview {
background: url("img/firstview_bg.jpg") no-repeat;
background-size: cover;
background-position: center;
}
.firstviewlogo {
width:300px;
position: absolute;
top:70px;
left:70px;
}
.Firstview_catch span {
display: block;
color:#fff;
background: #000;
padding:0.5rem 0.5rem 0.5rem 4rem;
font-weight: bold;
z-index:9999;
}
.Firstview_catch {
position: absolute;
bottom:50px;
z-index: 9999;
}
.Firstview_catch_sub {
width:400px;
font-size:1rem;
margin-bottom:3%;
}
.Firstview_catch_main {
width:600px;
font-size: 2.5rem;
}
.testtube {
position: absolute;
top:0;
right:0;
height:80vh;
z-index: 1000;
}
/*About*/
#About,#Reason,#Flow,#Contact {
padding:4rem 0;
}
/*Reason*/
#Reason .card {
margin-bottom:1rem;
}
#Reason .card-deck {
display:block;
}

#Reason ul {
padding-inline-start:20px;
}
#Reason ul li {
margin-bottom: 0.5rem;
}
/*Pic*/
#Pic {
height:200px;
background: url("img/imagepic.png") no-repeat;
background-size: cover;
background-position: center;
}
/*Flow*/
.Flow_contents {
height:200px;
}
.Flow_contentsx2 {
height:270px;
}
.Flow_no1_title::before{
height: 200px;
width: 10px;
}
.Flow_no2_title::before{
height: 200px;
width: 10px;
}
.Flow_no3_title::before{
height: 200px;
width: 10px;
}
.Flow_no4_title::before{
height: 200px;
width: 10px;
}
footer {
font-size:0.8rem;
text-align: center;
padding:1rem 0;
background: #222222;
color:#FFF;
box-sizing: border-box;
}
.logo {
display: block;
width:200px;
margin:0 auto;
}
}
@media screen and ( max-width:767px ) {	
.sp {
display: none;
}
h2 {
margin-bottom:3rem;
}

/*Firstview*/
#Firstview {
background: url("img/firstview_bg_sp.jpg") no-repeat;
background-size: cover;
background-position: center;
}
.firstviewlogo {
width:150px;
position: absolute;
top:50px;
left:50px;
}
.Firstview_catch span {
display: block;
color:#fff;
background: #000;
padding:0.5rem 0.5rem 0.5rem 2rem;
font-weight: bold;
z-index:9999;
}
.Firstview_catch {
position: absolute;
bottom:50px;
z-index: 9999;
}
.Firstview_catch_sub {
width:310px;
font-size:0.8rem;
margin-bottom:3%;
}
.Firstview_catch_main {
width:350px;
font-size: 1.5rem;
}
.testtube {
height:80vh;
position: absolute;
right:1rem;
z-index: 1000;
}
/*About*/
#About,#Reason,#Flow,#Contact {
padding:4rem 0;
}
/*Reason*/
#Reason .card {
margin-bottom:1rem;
}
#Reason .card-deck {
display:block;
}

#Reason ul {
padding-inline-start:20px;
}
#Reason ul li {
margin-bottom: 0.5rem;
}
/*Pic*/
#Pic {
height:200px;
background: url("img/imagepic.png") no-repeat;
background-size: cover;
background-position: center;
}
/*Flow*/
.Flow_contents {
height:200px;
}
.Flow_contentsx2 {
height:270px;
}
.Flow_no1_title::before{
height: 200px;
width: 10px;
}
.Flow_no2_title::before{
height: 200px;
width: 10px;
}
.Flow_no3_title::before{
height: 200px;
width: 10px;
}
.Flow_no4_title::before{
height: 200px;
width: 10px;
}
footer {
font-size:0.8rem;
text-align: center;
padding:1rem 0;
background: #222222;
color:#FFF;
box-sizing: border-box;
}
.logo {
display: block;
width:200px;
margin:0 auto;
}
}
@media screen and ( max-width:575px ) {
.pc {
display: none;
}
h2 {
margin-bottom:3rem;
}

/*Firstview*/
#Firstview {
background: url("img/firstview_bg_sp.jpg") no-repeat;
background-size: cover;
background-position: center;
height: 90vh;
}
.firstviewlogo {
width:150px;
position: absolute;
top:50px;
left:50px;
}
.Firstview_catch span {
display: block;
color:#fff;
background: #000;
padding:0.5rem 0.5rem 0.5rem 2rem;
font-weight: bold;
z-index:9999;
}
.Firstview_catch {
position: absolute;
bottom:100px;
z-index: 9999;
}
.Firstview_catch_sub {
width:310px;
font-size:0.8rem;
margin-bottom:3%;
}
.Firstview_catch_main {
width:350px;
font-size: 1.5rem;
}
.testtube {
height:22vh;
position: absolute;
top:12rem;
left:2rem;
z-index: 1000;
}
/*About*/
#About,#Reason,#Flow,#Contact {
padding:4rem 0;
}
/*Reason*/
#Reason .card {
margin-bottom:1rem;
}
#Reason ul {
padding-inline-start:20px;
}
#Reason ul li {
margin-bottom: 0.5rem;
}
/*Pic*/
#Pic {
height:300px;
background: url("img/imagepic_s.png") no-repeat;
background-size: cover;
background-position: center;
}
/*Flow*/
.Flow_contents {
height:200px;
}
.Flow_contentsx2 {
height:270px;
}
.Flow_no1_title::before{
height: 200px;
width: 10px;
}
.Flow_no2_title::before{
height: 200px;
width: 10px;
}
.Flow_no3_title::before{
height: 200px;
width: 10px;
}
.Flow_no4_title::before{
height: 200px;
width: 10px;
}
footer {
font-size:0.8rem;
text-align: center;
padding:1rem 0;
background: #222222;
color:#FFF;
box-sizing: border-box;
}
.logo {
display: block;
width:200px;
margin:0 auto;
}
}