@charset 'utf-8';


html, body {
    height: 100%;
}

#upper {
	background: rgba(255,255,255,0);
}

body.fixed #upper {
	background: rgba(255,255,255,.9);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	border: none;
}

body:not(.fixed):not(.menuopen) #upper h1,
body:not(.fixed) #logo_header a,
body:not(.fixed):not(.menuopen) #logo_header p {
	color: #fff;
}

body:not(.fixed):not(.menuopen) #logo_header a:hover,
body:not(.fixed):not(.menuopen) #logo_header a.hover {
	color: #fff;
}

body:not(.fixed):not(.menuopen) #logo_header .logotypeset svg .logo_mark {
	fill: #fff;
}

body:not(.fixed) #navi_header_thin .btn_header,
body:not(.fixed) #navi_header_thin .btn_header a {
	color: #fff;
}

body:not(.fixed) #logo_header .logotypeset .logo.logo_type {
	color: #fff;
}


#mainvisual {
	width: 100%;
	height: 70%;
	min-height: 400px;
	overflow: hidden;
	position: relative;
}

#mainvisual > .inner {
	width: 100%;
	height: 100%;
	font-size: 0;
	text-align: center;
	vertical-align: top;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}

#mainvisual > .inner:before {
	display: inline-block;
	content: '';
	height: 100%;
	vertical-align: bottom;
}

#movement_mv {
	width: 100%;
	height: 100%;
	background-image: url(../image/portal/back_mainvisual.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 130%;
	position: absolute;
	top: 0;
	left: 0;
}

#movement_mv:before {
	display: block;
	content: '';
	background: #000;
	opacity: .3;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#mainvisual > .inner:before {
	vertical-align: middle;
}

#mainvisual .cover {
	display: inline-block;
	vertical-align: middle;
}

#tagline {
	display: inline-block;
	width: 100%;
}

#cover_mv {
	padding: 0 30px;
	color: #fff;
}

#cover_mv h1 {
	padding-top: 2em;
	padding-bottom: 1em;
	font-size: 30px;
	font-weight: normal;
	font-feature-settings : 'palt';
}

#cover_mv h2 {
	font-size: 12px;
	font-weight: normal;
	font-feature-settings : 'palt';
}

#cover_mv h1 span,
#cover_mv h2 span {
	display: inline-block;
}

@media only screen and (min-width: 541px) {

	#movement_mv {
		background-size: cover;
	}
}

@media only screen and (min-width: 769px) {
}

@media only screen and (min-width: 1001px) {

	#mainvisual .cover {
		vertical-align: middle;
	}

	#tagline {
	}

	#cover_mv h1 {
		font-size: 50px;
	}

	#cover_mv h2 {
		font-size: 18px;
	}

	#cover_mv h1 > span,
	#cover_mv h2 > span {
		display: block;
	}

	body:not(.fixed) #navi_global li a {
		color: #fff;
	}

	body:not(.fixed) #navi_global li i svg {
		fill: #fff;
	}

	body:not(.fixed) #navi_global .header_call,
	body:not(.fixed) #navi_global .header_call a {
		color: #fff;
	}
}



.caution {
	display: inline-block;
}

.caution p {
	margin-bottom: .5em;
	padding-left: 1em;
	color: #9a9a9a;
	font-size: 1.2em;
	line-height: 1.4;
	text-align: left;
	position: relative;
}

.caution p:before {
	content: '※';
	position: absolute;
	top: 0;
	left: 0;
}




.logoset {
	display: inline-block;
	width: 100%;
}

.logoset .mask {
	display: inline-block;
	width: 100%;
	padding-top: 100%;
	position: relative;
}

.logoset span.logo {
	display: inline-block;
	width: 100%;
	height: 100%;
	vertical-align: top;
	position: absolute;
	top: 0;
	left: 0;
}

.logoset span.logo {
	color: #2b3c51;
}

.logoset span.logo_camera {
	color: #ea5514;
}

.logoset span.logo svg {
	fill: currentColor;
}


#concept {
	width: 100%;
	overflow: hidden;
	background-image: url(../image/portal/back_concept.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

#concept:before {
	display: block;
	content: '';
	background: #8ebde6;
	opacity: .8;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

body.pc #concept {
	background-attachment: fixed;
}

#concept > .inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px;
	text-align: center;
	position: relative;
}

#concept header {
	margin-bottom: 2em;
	text-align: center;
}

#concept header h1 {
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.4;
}

#concept header h1 span {
	display: inline-block;
}

#concept .sentence p {
	margin-bottom: 1em;
	color: #000;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.8;
}

#concept .sentence p:last-child {
	margin-bottom: 0;
}

#concept .sentence p br {
	display: none;
}

@media only screen and (min-width: 769px) {

	#concept {
	}

	#concept > .inner {
		padding: 60px;
	}

	#concept header {
		margin-bottom: 5em;
	}

	#concept header h1 {
		font-size: 32px;
	}

	#concept .sentence p {
		font-size: 16px;
	}

	#concept .sentence p br {
		display: inline;
	}
}



#serviceinfo {
	width: 100%;
	overflow: hidden;
	background-image: url(../image/portal/back_serviceinfo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

#serviceinfo:before {
	content: '';
	background-color: #45b035;
	opacity: .8;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

body.pc #serviceinfo {
	background-attachment: fixed;
}

#serviceinfo > .inner {
	width: 100%;
	padding: 50px 30px;
	font-size: 0;
	vertical-align: top;
	position: relative;
	z-index: 2;
}

#serviceinfo header {
	margin-bottom: 20px;
	text-align: center;
}

#serviceinfo header h1 {
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.4;
}

#serviceinfo header h1 span {
	display: inline-block;
}

#serviceinfo footer {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 20px;
	padding-top: 40px;
	padding-bottom: 10px;
	color: #000;
	text-align: center;
}

#serviceinfo footer p {
	margin-bottom: 2em;
	font-size: 13px;
	line-height: 1.6;
}

#serviceinfo footer p.lead {
	font-size: 14px;
	line-height: 1.6;
}

#serviceinfo footer .btnarea a {
	padding: 10px 20px;
}

#servicelist {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
	vertical-align: top;
}

#servicelist .item {
	width: 100%;
	padding: 0 20px;
	padding-bottom: 40px;
	vertical-align: top;
}

#servicelist figure {
	width: 80px;
	height: 80px;
	margin: 0 auto;
	margin-bottom: 30px;
	overflow: hidden;
}

#servicelist figure img {
	width: 100%;
	height: auto;
}

#servicelist h2 {
	margin-bottom: 3px;
	color: #fff;
	font-size: 20px;
	line-height: 1.4;
	font-weight: normal;
}

#servicelist h3 {
	margin-bottom: 20px;
	color: #2f2f2f;
	font-size: 12px;
	line-height: 1.4;
	font-weight: normal;
}

#servicelist p {
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
}

#servicelist .btnarea {
	width: 100%;
	margin-top: 20px;
	font-size: 11px;
}

#servicelist .btnarea a {
	width: 100%;
	padding: 8px 5px;
}

@media only screen and (min-width: 641px) {

	#serviceinfo header {
		margin-bottom: 40px;
	}

	#serviceinfo footer p {
		font-size: 14px;
	}

	#serviceinfo footer p.lead {
		font-size: 16px;
	}

	#serviceinfo footer .btnarea a {
		padding: 10px 40px;
	}

	#servicelist .item {
		display: inline-block;
		width: 33.33%;
		padding-left: 4%;
		padding-right: 4%;
	}
}

@media only screen and (min-width: 769px) {

	#serviceinfo header h1 {
		font-size: 32px;
	}
}




#specialist {
	width: 100%;
	overflow: hidden;
	background-image: url(../image/portal/back_specialist.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

#specialist:before {
	content: '';
	background-color: #d3b44d;
	opacity: .8;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

body.pc #specialist {
	background-attachment: fixed;
}

#specialist > .inner {
	width: min(1000px,100%);
  margin-inline: auto;
	padding: 50px 30px;
	vertical-align: top;
	position: relative;
	z-index: 2;
}

#specialist header {
	margin-bottom: 20px;
	text-align: center;
}

#specialist header h1 {
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.4;
}

#specialist header h1 span {
	display: inline-block;
}

#specialist p.read{
  font-size:14px;
}

ul.item {
  margin:30px auto;
  display: flex;
  gap:20px 20px;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
}
ul.item li{
  flex:0 1 135px;
  aspect-ratio: 1;
  font-size:18px;
  font-weight: bold;
  color:white;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
ul.item li:after{
  content:"";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 150px;
  position: absolute;
  top:50%;
  left: 50%;
  translate:-50% -50%;
  background:linear-gradient(#4e7d95,#29a87d);
}
ul.item li p{
  position: relative;
  text-align: center;
  z-index: 50;
}
@media only screen and (min-width: 769px) {
	#specialist header h1 {
		font-size: 32px;
	}
}
@media only screen and (min-width: 641px) {
  #specialist p.read {
    font-size: 16px;
  }
  ul.item li{
  font-size:16px;
  }
}

#message {
	width: 100%;
	overflow: hidden;
	background-image: url(../image/portal/back_message.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

#message:before {
	content: '';
	background-color: #4d97d3;
	opacity: .8;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

body.pc #message {
	background-attachment: fixed;
}

#message > .inner {
	width: min(1000px,100%);
  margin-inline: auto;
	padding: 50px 30px;
	vertical-align: top;
	position: relative;
	z-index: 2;
}

#message header {
	margin-bottom: 20px;
	text-align: center;
}

#message header h1 {
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.4;
}

#message header h1 span {
	display: inline-block;
}
#message p{
  font-size:13px;
  margin:1.5em 1em;
}

#message .textarea{
  flex:1 1 60%;
  background:rgba(255,255,255,.6);
  padding:min(20px,5%);
}
#message .photoarea{
  flex:0 1 38%;
}
.message_content {
  display: flex;
  gap:2%;
  margin:min(40px,8%) auto;
}
#message p.name{
  font-size:16px;
  font-weight: bold;
  color: white;
}
#message p.name .small{
  font-size:15px;
}
@media only screen and (min-width: 769px) {
	#message header h1 {
		font-size: 32px;
	}
}
@media only screen and (min-width: 641px) {
#message p{
  font-size:16px;
}
#message p.name{
  font-size:18px;
  font-weight: bold;
  color: white;
}
#message p.name .small{
  font-size:.8em;
}
}
/*-----------------*/


#business {
	width: 100%;
	overflow: hidden;
	background-image: url(../image/portal/back_business.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

#business:before {
	content: '';
	background-color: #48daba;
	opacity: .8;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

body.pc #business {
	background-attachment: fixed;
}

#business > .inner {
	width: min(1000px,100%);
  margin-inline: auto;
	padding: 50px 30px;
	vertical-align: top;
	position: relative;
	z-index: 2;
}

#business header {
	margin-bottom: 20px;
	text-align: center;
}

#business header h1 {
	color: #fff;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.4;
}

#business header h1 span {
	display: inline-block;
}
#business p{
  font-size:13px;
}
#business .read{
  margin-top:min(30px,5%);
  position: relative;
  width: fit-content;
  padding-inline:1.5em;
  margin-inline:auto;

}
#business .read:before{
  content:"";
  display: block;
  height: 115%;
  width: 1px;
  background:white;
  position: absolute;
  left:0;
  top:50%;
  translate:0 -50%;
  rotate:-30deg;
}
#business .read:after{
  content:"";
  display: block;
  height: 115%;
  width: 1px;
  background:white;
  position: absolute;
  right:0;
  top:50%;
  translate:0 -50%;
  rotate:30deg;
}
#business .read p{
  font-size:18px;
  text-align: center;
  font-weight: bold;
  color:white;
  max-width: 100%;
  min-width: 0;
  background-image:linear-gradient(to bottom,transparent 60%, #d3b44d 60%);
}
#business .textarea{
  background:rgba(255,255,255,.6);
  padding:min(20px,5%);
  margin-block: min(15px,3%);
}
#business .flex{
  display: block;
  margin:min(30px,3%) 0;
}
#business .flex .textarea{
    flex:1 1 70%;
    margin:0;
}
#business .flex .photoarea{
  flex:0 1 30%;
}
.business_content {
  margin:min(40px,8%) auto;
}
#business h2{
  margin: min(40px,5%) auto 0;
  font-size:18px;
  color:white;
}
#business h3{
  margin: 0 auto  .5em;
  font-size:15px;
}
#business .photoarea img{
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 769px) {
	#business header h1 {
		font-size: 32px;
	}
  #business h2{
  font-size:25px;
}
#business h3{
  margin: 0 auto  .5em;
  font-size:20px;
}
#business .read p{
  font-size:23px;
}
#business .flex {
  display: flex;
}
}
@media only screen and (min-width: 641px) {
#business p{
  font-size:15px;
}


}




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

#companyinfo {
	width: 100%;
	background: #fff;
	overflow: hidden;
	position: relative;
}

#companyinfo > .inner {
	width: 100%;
	padding: 30px;
	vertical-align: top;
	position: relative;
}

#companyinfo header {
	margin-bottom: 20px;
	text-align: center;
}

#companyinfo header h1 {
	font-size: 20px;
	font-weight: normal;
	line-height: 1.4;
}

#outlinetbl {
	padding: 20px;
	padding-top: 0;
}

#companyinfo table {
	display: block;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

#companyinfo table th,
#companyinfo table td {
	line-height: 1.4;
	text-align: left;
}

#companyinfo table th {
	display: inline-block;
	padding: 0 1em;
	border-bottom: 1px solid #4c472d;
	font-size: 12px;
	font-weight: normal;
	white-space: nowrap;
}

#companyinfo table td {
	display: block;
	font-size: 13px;
	padding-top: 1em;
	padding-left: 2em;
}

#companyinfo table tr {
	display: block;
	width: 100%;
	padding: 1em 0;
	border-bottom: 1px solid #4c472d;
}

#companyinfo table tbody {
	display: block;
	width: 100%;
}

#companyinfo table td ul {
	margin-left: 1.5em;
}

#companyinfo table td li:not(:last-child) {
	margin-bottom: .5em;
}

#companyinfo table td .caution {
	margin-top: .5em;
	padding-left: 1em;
	color: #808080;
	font-size: .8em;
	line-height: 1.5;
	position: relative;
}

#companyinfo table td .caution::before {
	content: '※';
	position: absolute;
	top: 0;
	left: 0;
}

@media only screen and (min-width: 769px) {

	#companyinfo {
		padding-bottom: 30px;
	}

	#companyinfo > .inner {
		padding: 50px;
	}

	#outlinetbl {
		padding: 0;
		padding-bottom: 20px;
	}

	#companyinfo table {
		display: table;
	}

	#companyinfo table th,
	#companyinfo table td {
		display: table-cell;
		padding: .8em 2em;
		border: none;
		font-size: 18px;
	}

	#companyinfo table th {
		width: 10em;
	}

	#companyinfo table tr {
		display: table-row;
		padding: 0;
	}

	#companyinfo table tbody {
		display: table-row-group;
	}
}



#information {
	width: 100%;
	padding: 30px 0;
	padding-bottom: 50px;
	background: rgba(255,255,255,.5);
}

#information > .inner {
	width: 100%;
	font-size: 0;
	vertical-align: top;
	position: relative;
}

#information .blockheader {
	margin-bottom: 10px;
}

#information .sharebutton {
	margin-bottom: 30px;
}

@media only screen and (min-width: 769px) {

	#information {
		padding: 50px 0;
	}
}



#snstimeline {
	width: 100%;
	padding: 30px;
	background: rgba(242, 238, 211, .5);
}

#snstimeline > .inner {
	width: 100%;
	font-size: 0;
	text-align: center;
	vertical-align: top;
	position: relative;
}

#snstimeline .widget {
	display: inline-block;
	width: 100%;
	max-width: 400px;
	height: 400px;
	margin-bottom: 20px;
	padding: 0;
	text-align: center;
	vertical-align: top;
	overflow: hidden;
	position: relative;
}

#snstimeline .widget > .loading_announce {
	display: inline-block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#snstimeline .widget > .loading_announce div {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.8);
	font-size: 0;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	position: relative;
}

#snstimeline .widget > .loading_announce div:before {
	display: inline-block;
	content: '';
	height: 100%;
	font-size: 0;
	vertical-align: middle;
}

#snstimeline .widget > .loading_announce div > span {
	display: inline-block;
	width: 60%;
	font-size: 10px;
	line-height: 1.4;
	vertical-align: middle;
}

#snstimeline .widget:last-child {
	margin-bottom: 0;
}

#snstimeline .sandbox {
	width: 100%;
	text-align: center;
	overflow: hidden;
	position: relative;
}

@media only screen and (min-width: 641px) {

	#snstimeline {
		padding: 30px;
	}

	#snstimeline .widget {
		width: 50%;
		max-width: 500px;
		height: 500px;
		margin: 0 auto;
		padding: 0 20px;
	}

	#snstimeline .widget > .loading_announce {
		padding: 0 20px;
	}
}

#background {
	width: 100%;
	background-image: url(../image/portal/back_body.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: fixed;
	top: 0;
	z-index: -1;
}

@media only screen and (max-width: 768px) and (orientation: landscape) {

	#background {
		height: 100%;
	}
}

@media only screen and (min-width: 769px) {

	#background {
		height: 100%;
	}
}



#accessmap {
	width: 100%;
	position: relative;
}

#map {
	width: 100%;
	height: 200px;
	position: relative;
}

#map iframe {
	width: 100% !important;
	height: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
}

@media only screen and (min-width: 769px) {

	#map {
		height: 400px;
	}
}