@charset "UTF-8";
/*----------------------------------------------------------
更新日：2025年07月29日
=PC(960以上)
=PC & タブレット(960以下)
=スマホ(768px以下)
-------------------------------------------------------------*/

/*==================================================================
  Page common style
===================================================================*/
#header {
	background: rgba(12, 12, 30, 1) !important;
}
#pageTitle {
	margin: 0;
	padding-top: 70px;
	background: linear-gradient(to right, rgba(5,127,89,1) 0%, rgba(5,127,89,1) 50%,rgba(194,237,209,1) 75%);
}
#pageTitle .inner{
	color: #FFF;
	max-width: 1080px;
	margin: 0 auto;
	padding: 4em 0 3em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#pageTitle .inner .txt{
	width: 52%;
}
#pageTitle .inner .txt .title{
	font-weight: 700;
	line-height: 1.5;
}
#pageTitle .inner .txt .title span{
	color: #fff721;
	font-size: 1.5em;
}
#pageTitle .inner .txt p{
	font-size: 1.2em;
	font-weight: 500;
}
#pageTitle .inner .pic{
	width: 44%;
	border-radius: 8px;
	overflow: hidden;
}
#pageTitle.onlyTxt{
/*	background: rgba(5,127,89,1);*/
}
#pageTitle.onlyTxt .inner{
	padding: 3.5em 1em;
/*	justify-content: center;*/
}
#pageTitle.onlyTxt .inner .title{
	font-weight: 700;
	margin: 0;
}
#pageTitle.onlyTxt .inner .title span {
	font-size: 1.6em;
}
.sec section + section {
	padding-top: 1.5em;
}
@media only screen and (max-width:1080px) {
	#pageTitle{
		padding-left: 1em;
		padding-right: 1em;
	}
}
@media only screen and (max-width:768px) {
	#pageTitle {
		padding-top: 14vw;
		background: linear-gradient(to bottom, rgba(5,127,89,1) 0%, rgba(5,127,89,1) 60%,rgba(194,237,209,1) 90%);
	}
	#pageTitle .inner{
		padding: 2em 0;
		flex-direction: column;
	}
	#pageTitle .inner .txt{
		width: 100%;
	}
	#pageTitle .inner .txt .title{
		font-size: 1.5em;
	}
	#pageTitle .inner .txt .title span{
		font-size: 1.3em;
	}
	#pageTitle .inner .txt p{
		font-size: 1em;
	}
	#pageTitle .inner .pic{
		width: 100%;
	}
}

.centerImg{
	margin:2em 0;
	text-align: center;
}

/* #about
------------------------------------------------------*/
#about{
	padding-top: 3em;
}
@media only screen and (max-width:768px) {
	#about{
		padding-top: 8vw;
	}
}

/* #feature
------------------------------------------------------*/
#feature{
	border-top: 1px solid #ccc;
}
#feature .flowImg{
	margin-top:4em;
	text-align: center;
}
/* .point ----------*/
.point{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 4em;
}
.point li{
	width: 49%;
	margin-bottom: 1em;
	padding: 1.5em 2em;
	background-color: #e6f5f1;
	border-radius: 6px;
}
.point dt {
	display: flex;
	align-items: center;
	margin-bottom: 0.5em;
}
.point dt p{
	color: #02b362;
	font-size: 2.5em;
	font-weight: 700;
	font-family: 'Roboto';
	line-height: 1.2;
	margin-bottom: 0;
	white-space: nowrap;
}
.point dt .headline3{
	margin-left: 0.8em;
	margin-bottom: 0;
}
.point dd{
	margin: 0;
}

/* .col2type ----------*/
.col2type {
	display: flex;
	justify-content:space-between;
}
.col2type li {
	width: calc(50% - 20px);
	margin: 0 10px;
	padding: 1em;
	border: 1px solid #ccc;
	text-align: center;
}
.col2type li .title {
	font-size: 1.2em;
	width: 80%;
	margin: 0 auto 1em;
	border-radius: 100vw;
	background: #0551b0;
	color: #FFF;
}
.col2type li .pic{
	margin-bottom: 1em;
}
.col2type li .txt{
	margin-bottom: 0;
}

#feature .col2type{
	margin:2em 0;
}

@media only screen and (max-width:768px) {
	#feature .flowImg{
		margin:2em 0;
	}
	.point{
		flex-direction: column;
		margin-bottom: 2em;
	}
	.point li {
		width: 100%;
	}
	.col2type {
		flex-direction: column;
	}
	.col2type li {
		width: auto;
		max-width: none;
		margin: 0 auto 1em;
	}
	.col2type li .box {
		width: auto;
		max-width: none;
		margin: 0 auto 1em;
	}
	.col2type li .box .headline {
		min-width: 160px;
	}
	#feature .col2type{
		margin-bottom:0;
	}
}

/* #setting
------------------------------------------------------*/
#setting{
	border-top: 1px solid #ccc;
}
@media only screen and (max-width:768px) {
}

/* #case
------------------------------------------------------*/
#case{
	border-top: 1px solid #ccc;
}
@media only screen and (max-width:768px) {
}

/* #setting
------------------------------------------------------*/
/* .col3type ----------*/
.col3type {
	display: flex;
	justify-content:space-between;
}
.col3type li {
	width: calc(33.333% - 2em);
  margin-bottom: 2em;
}
.col3type li .title {
	font-weight: 700;
	margin: 0 auto 0.6em;
}
.col3type li .pic{
	margin-bottom: 0.6em;
}
.col3type li .txt{
	margin-bottom: 0;
}
@media only screen and (max-width:768px) {
	.col3type {
		display: block;
	}
	.col3type li {
		width: auto;
		max-width: none;
		margin: 0 auto 1.5em;
	}
	.col3type li .title {
		min-width: 160px;
	}
}

/* #scene
------------------------------------------------------*/
#scene {
	border-top: 1px solid #ccc;
}
.sceneList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.sceneList li {
	width: 48%;
	margin-bottom: 2em;
	border: 1px solid #ccc;
	padding: 1.5em 1.5em 0.5em;
}
.sceneList li .pic {
	text-align: center;
}
.sceneList li .txt {
	padding-top: 1em;
}
.sceneList li .title {
	color: #02b362;
	font-size: 1.25em;
	font-weight: 700;
	margin-bottom: 0.3em;
	line-height: 1.5;
}

.scenePic {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.scenePic li {
	width: calc(33.333% - 2em);
  margin-bottom: 2em;
}
.scenePic li .title {
	text-align: center;
	margin: 0 auto 0.4em;
}

@media only screen and (max-width:768px) {
 #scene {
/*		padding-top: 8vw;*/
	}
	.sceneList li {
		width: 100%;
		margin-bottom: 1em;
	}
	.sceneList li .pic img {
		width: 100%;
	}
	.scenePic {
		display: block;
	}
	.scenePic li {
		width: auto;
		max-width: none;
		margin: 0 auto 1.2em;
	}
	.scenePic li .title {
		min-width: 160px;
	}
}

.bottomBan{
	text-align: center;
	margin: 1em auto;
}
.bottomBan img {
    transition: 0.3s;
}
.bottomBan a:hover img {
    opacity: 0.7;
}

/* #case
------------------------------------------------------*/
/* .capPictype ----------*/
.capPicType{
	display: flex;
	justify-content:space-between;
	padding: 1.5em;
	border: 1px solid #ccc;
  margin: 0;
}
/* 2つ目以降の要素を、1px上にずらして重ねる */
body .capPicType + .capPicType {
  margin-top: -1px;
}
.capPicType .txt {
  flex-shrink: 0;
  width: 30%;
}
.capPicType .txt .title{
	margin: 0 auto 0.6em;
	font-weight: 700;
	
}
.capPicType .pic {
    margin: 0 0 0 2em;
}
@media only screen and (max-width:768px) {
	.capPicType {
		flex-direction: column;
	}
	.capPicType .txt,
	.capPicType .pic{
		width: auto;
		max-width: none;
		margin: 0;
	}
}

/* #blog
------------------------------------------------------*/
#blog{
	border-top: 1px solid #ccc;
}
.col2txtP {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	margin-bottom: 2em;
	padding: 2em;
	background-color: #f8f8f8;
}
.col2txtP .txt {
	flex-grow: 1;
	padding-top: 1em;
}
.col2txtP .yt {
	flex-shrink: 0;
	width: 40%;
	margin-right: 2em;
}
@media only screen and (max-width:768px) {
	.col2txtP {
		display: block;
		padding: 1em;
	}
	.col2txtP .txt {
		padding-top: 0;
	}
	.col2txtP .yt {
		width: auto;
		margin: 1em auto;
	}
}



/* #contact
------------------------------------------------------*/
#contact {
 	padding:3em 1em;
}
#contact .txt {
 margin-bottom: 2em;
 text-align: center;
}
#contact .cautionBox {
 margin-top: 2em;
}
#contact .backBox {
 margin-top: 5%;
 text-align: center;
}
#contact.sec.thanks {
/* margin-top: 70px;*/
 padding-bottom: 5em;
}
#contact.thanks .contactInner {
 padding: 6% 4% 6%;
}
@media only screen and (max-width:768px) {
 #contact {}
 #contact.sec.thanks {
/*  margin-top: 14vw;*/
  padding-bottom: 12vw;
 }
 #contact .txt {
  text-align: left;
 }
 #contact .txt br {
  display: none;
 }
}