@charset "utf-8";


/*--------------------------------------
 base
--------------------------------------*/
html{
	font-size: 62.5%; /* 1rem = 10px */
}
*{
	box-sizing:border-box;
}
body {
	background: #F3F4F6;
	color: #041B30;
	font-size: 1.6rem;
}
strong {
	font-weight:bold;
}
a {
	color: #041B30;
	text-decoration:none;
	transition: opacity 0.3s ease;
	opacity: 1;
}
a:hover {
	opacity: 0.6;
}
br.pchide{
	display: none;
}
img{
	max-width: 100%;
	height: auto;
}
img.pc{
	display: inline-block;
}
img.sp{
	display: none;
}
br.pc{
	display: inline;
}
br.sp{
	display: none;
}
p.pc,
div.pc{
	display: block;
}
p.sp,
div.sp{
	display: none;
}
span.sp{
	display: none;
}
@media only screen and (min-width: 767px) and (max-width: 820px) {
	html{
		font-size: 47%;
	}
}
:root {
	--color-green: #00A0B9;
}
@media screen and (min-width: 768px) and (max-width: 1440px) {
  html{
		font-size: 58%;
	}
}
/*--------------------------------------
 header
--------------------------------------*/
#site-header{
	height: 86px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	transition: all 0.15s linear;
}
body{
	padding-top: 86px;
}
#site-header.scroll{
	background: #fff;
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.05);
}
#site-header .logo img{
	width: 300px;
	height: auto;
	opacity: 1;
	transition: opacity 0.3s ease;
}
#site-header .logo:hover{
	opacity: 0.6;
}
#site-header .global-nav{
	display: flex;
	align-items: center;
	margin-left: auto;
}
#site-header .global-nav ul{
	display: flex;
	gap: 50px;
	font-size: 1.8rem;
	font-weight: 500;
}
#site-header .global-nav a{
	transition: color 0.15s linear;
}
#site-header .global-nav .active a,
#site-header .global-nav a:hover{
	color: var(--color-green);
	opacity: 1;
}
#site-header .contact-btn{
	margin-left: 30px;
	display: flex;
	align-items: center;
	width: 236px;
	height: 60px;
	background: linear-gradient(90deg,rgba(0, 160, 185, 1) 0%, rgba(16, 102, 177, 1) 100%);
	border-radius: 100px;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 500;
	padding-bottom: 4px;
	position: relative;
	overflow: hidden;
}
#site-header .contact-btn:hover{
	opacity: 1;
}
@media only screen and (min-width: 767px) {
	#site-header .contact-btn::after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(16,102,177,1) 0%, rgba(0,160,185,1) 100%);
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	#site-header .contact-btn:hover::after{
		opacity: 1;
	}
}
#site-header .contact-btn::before{
	content: "";
	display: inline-block;
	width: 38px;
	height: 38px;
	background: url("../common/img/ico-mail-w.png") no-repeat;
	background-size: contain;
	margin: 0 20px 0 23px;
	margin-bottom: -4px;
	z-index: 1;
}
#site-header .contact-btn .zindex{
	z-index: 1;
}
.menubtn{
	display: none;
}
/*--------------------------------------
 footer
--------------------------------------*/
#site-footer{
	margin-top: 100px;
	background: #041B30;
	padding-top: 80px;
	padding-bottom: 20px;
	color: #fff;
}
#site-footer .logo img{
	width: 350px;
	height: auto;
}
#site-footer .row01{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 130px;
}
#site-footer .row01 address p{
	font-size: 1.4rem;
	line-height: 2;
}
.footer-nav{
	margin: 60px 0;
}
.footer-nav ul{
	display: flex;
	justify-content: center;
}
.footer-nav ul li{
	padding-bottom: 3px;
}
.footer-nav ul li + li{
	margin-left: 1.5em;
	padding-left: 1.5em;
	border-left: 1px solid #fff;
}
.footer-nav ul li a{
	color: #fff;
	font-size: 1.8rem;
}
#site-footer .copyright{
	text-align: center;
	font-size: 1.4rem;
}

/*--------------------------------------
 common
--------------------------------------*/
.al-center{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.page-title{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 272px;
}
.page-bg{
	background-image: url("../common/img/page-bg.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top center;
}
.breadcrumb{ 
	margin: auto;
	padding: 0 50px;
	margin-top: 10px;
	& ul{
	}
	& li{
		display: inline-block;
		font-size: 1.2rem;
	}
	& li::after{
		content: ">";
		margin: 0 1em;
	}
	& li:last-child::after{
		display: none;
	}
}
/*--------------------------------------
 top
--------------------------------------*/
#main-visual{
	position: relative;
	margin-bottom: 90px;
}
#main-visual .img{
	width: 63%;
	height: 60vh;
	max-height: 600px;
	margin-left: auto;
	border-radius: 93px 0 0 93px;
	overflow: hidden;
}
#main-visual .mv-copy{
	background: #fff;
	position: absolute;
	left: 3%;
	bottom: 16%;
	width: 41%;
	max-width: 600px;
	height: 29%;
	min-height: 180px;
	border-radius: 29px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
#main-visual .mv-copy img{
	width: 66%;
	height: auto;
}
#main-visual .mv-txt{
	font-size: 5.7rem;
	font-weight: 700;
	line-height: 1.25;
  background-image: url("../img/top/copy-gradient.png");
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
	font-feature-settings: "palt";
	letter-spacing: 0.03em;
}
#main-visual .line{
	position: absolute;
	right: 0;
	bottom: -16.5%;
	width: 82%;
	z-index: 2;
}
.inner{
	width: 100%;
	margin: auto;
	padding: 0 140px;
}
.inpage-nav{
	background: #fff;
	border-radius: 15px;
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.16);
}
.inpage-nav ul{
	display: flex;
	justify-content: center;
	padding: 45px 0;
}
.inpage-nav ul li{
	flex: 1 1 0;
}
.inpage-nav ul li + li{
	border-left: 1px dashed #041B30;
}
.inpage-nav ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	height: 60px;
	text-align: center;
	color: var(--color-green);
	font-size: 2rem;
	font-weight: 600;
}
.ico-link:hover{
	opacity: 1;
}
.ico-link-arrow{
	display: inline-block;
	width: 51px;
	height: 41px;
	position: relative;
}
.ico-link-arrow img{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
}
.ico-link-arrow::before,
.ico-link-arrow::after{
	content: "";
	display: block;
	width: 41px;
	height: 41px;
	border-radius: 41px;
	background: #D1ECF1;
	position: absolute;
	left: 0;
	top: 0;
}
.ico-link-arrow::before{
	z-index: 2;
	background: var(--color-green);
	transform: scale(0);
	transition: transform 0.2s ease;
}
@media only screen and (min-width: 767px) {
	button:hover .ico-link-arrow::before,
	a:hover .ico-link-arrow::before{
		transform: scale(1);
	}
}
#top-topics{
	margin: 70px 0 130px 0;
}
.title{
	display: flex;
	flex-direction: column;
	align-items: center;
	.en{
		font-size: 5rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		color: var(--color-green);
		border-bottom: 4px solid #D1ECF1;
		position: relative;
		padding-bottom: 15px;
	}
	.en::after{
		content: "";
		display: block;
		width: 30px;
		height: 4px;
		background: var(--color-green);
		position: absolute;
		left: 0;
		bottom: -4px;
	}
	.jp{
		text-align: center;
		font-size: 2rem;
		font-weight: 500;
		margin-top: 10px;
	}
}
.title.white{
	.en{
		color: #fff;
	}
	.jp{
		color: #fff;
	}
}
#top .title{
	align-items: flex-start;
}
.ico-link{
	color: var(--color-green);
	font-size: 1.4rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ico-link.white{
	color: #fff;
}
#top-topics{
	display: flex;
	gap: 77px;
	position: relative;
}
.ico-link-pos{
	position: absolute;
	left: 0;
	top: 120px;
}
.topics-list{
	flex-grow: 1;
}
.topics-list li + li{
	margin-top: 13px;
}
.topics-list li a{
	display: flex;
	align-items: center;
	padding: 20px 20px;
	background: #fff;
	border-radius: 100px;
	line-height: 1.5;
	 transition: all 0.3s ease;
	& time{
		color: var(--color-green);
		display: inline-block;
		border-right: 4px solid var(--color-green);
		padding-right: 24px;
		margin-right: 24px;
	}
}
@media only screen and (min-width: 767px) {
	.topics-list li a:hover{
		opacity: 1;
		color: var(--color-green);
		transform: translateX(10px);
	}
}
.box-right{
	width: calc(100% - 40px); 
	margin-left: auto;
	padding-left: 100px; 
	background: #fff;
	border-radius:50px 0 0 50px;
	box-shadow: 0px 0px 99px 0px rgba(0,0,0,0.11);
}
#top-about{
	padding-top: 225px;
	padding-bottom: 235px;
	margin-bottom: 110px;
	position: relative;
}
#top-about .bg-txt{
	position: absolute;
	top: 184px;
	right: 0;
	width: 56%;
	width: calc(100% - 620px);
}
.lead-title{
	font-size: 5rem;
	line-height: 1.62;
	font-weight: 600;
	&::first-letter{
		color: var(--color-green);
	}
}
.lead-txt{
	font-size: 1.6rem;
	line-height: 2.125;
	margin-top: 85px;
}
#top-about .txt-img{
	display: flex;
	gap: 60px;
	.txt{
		width: 43%;
		min-width: 580px;
		flex-shrink: 0;
	}
	.img{
		margin-top: 140px;
	}
	.img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.bdr-left{
	border-radius: 28px 0 0 28px;
	overflow: hidden;
}
#top-service{
	margin-top: 150px;
	max-width: 1450px;
	display: flex;
	gap: 70px;
	padding-right: 100px;
	position: relative;
}
.service-list{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 30px 70px;
	& a{
		background: #F9FAFD;
		padding: 40px 30px;
		border-radius: 10px;
	}
	& a:hover{
		opacity: 1;
	}
	& h3{
		font-size: 2.4rem;
		font-weight: 600;
		color: var(--color-green);
		margin-bottom: 30px;
	}
	.img{
		overflow: hidden;
		border-radius: 10px;
	}
	& p{
		font-size: 1.4rem;
		line-height: 2;
		margin-top: 20px;
	}
}
.img-zoom-hover .img img{
	transform: scale(1);
	transition: transform 1.5s ease;
}
.img-zoom-hover:hover .img img{
	transform: scale(1.1);
}
.box-shadow{
	box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.06);
}
#top-philosophy{
	position: relative;
	padding-top: 278px;
	padding-left: 55px;
	padding-bottom: 90px;
	margin-bottom: 120px;
	.bg-txt{
		position: absolute;
		top: 78px;
		right: 0;
		width: 71%;
	}
}
#top-philosophy .flex-content{
	padding-right: 100px;
	display: flex;
	align-items: center;	
	gap: 70px;
	.img{
		border-radius: 40px;
		overflow: hidden;
		flex-grow: 1;
		max-width: 500px;
	}
	.name{
		line-height: 1.5;
		font-size: 1.4rem;
		margin-top: 25px;
		text-align: center;
	}
	.txt .lead-title{
		white-space: nowrap;
	}
	.txt .lead-txt{
		margin-top: 50px;
	}
}
#top-office .link{
	margin-left: 140px;
}
#top-office .grid{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	height: 1000px;
	position: relative;
}
#top-office .title{
	margin-left: 140px;
}
#top-office .table-wrap .bg{
	background: rgba(255, 255, 255, 0.9);
	border-radius: 0 54px 54px 0;
	padding: 15px 70px 15px;
	padding-left: 140px;
	box-shadow: 0px 7px 14px 0px rgba(0,0,0,0.6);
}
#top-office .title,
#top-office .table-wrap,
#top-office .link{
	position: relative;
	z-index: 1;
}
#top-office .office-bg{
	background: url("../img/top/office-bg.jpg") no-repeat;
	background-size: cover;
	background-position: center center;
}
#top-office .fade-bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 0;
	opacity: 0.3;
	transition: opacity 0.8s linear;
}
#top-office .fade-bg.active{
	opacity: 1;
}
#top-office .link{
	margin-top: 30px;
	margin-bottom: 60px;
}
.table-style01{
	width: 100%;
	line-height: 1.5;
	& tr + tr{
		border-top: 1px dashed #041B30;
	}
	& th,
	& td{
		padding: 15px 0;
		vertical-align: middle;
	}
	& th{
		color: var(--color-green);
		padding-right: 35px;
		align-items: center;
		white-space: nowrap;
	}
	.ico img{
		width: 40px;
		height: auto;
		margin-right: 20px;
		vertical-align: -12px;
	}
}
#top-office .img{
	border-radius: 40px 0 0 40px;
	overflow: hidden;
}
.map{
	margin: 150px 140px;
	border-radius: 20px;
	overflow: hidden;
}
.map iframe{
	width: 100%;
	height: 580px;
}
.map iframe + p{
	margin-top: 20px;
}
.fadein{
	opacity: 0;
	transition: opacity 0.3s linear;
}
.fadein.active,
.active .fadein{
	opacity: 1;
}
.slidein{
  -webkit-clip-path: inset(-20px 100% -20px -20px);
  clip-path: inset(-20px 100% -20px -20px);
	transition: all 0.6s ease;
}
.slidein.active,
.active .slidein{
  -webkit-clip-path: inset(-20px -20px -20px -20px);
  clip-path: inset(-20px -20px -20px -20px);
}
.slidein-right{
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
  transition: all 0.6s ease;
}
.slidein-right.active,
.active .slidein-right{
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.delay200ms{ transition-delay: 200ms; }
.delay300ms{ transition-delay: 300ms; }
.delay400ms{ transition-delay: 400ms; }
.delay500ms{ transition-delay: 500ms; }
.delay600ms{ transition-delay: 600ms; }
.delay700ms{ transition-delay: 700ms; }
.delay800ms{ transition-delay: 800ms; }
.delay900ms{ transition-delay: 900ms; }
.delay1000ms{ transition-delay: 1000ms; }
.delay1200ms{ transition-delay: 1200ms; }

/*--------------------------------------
 service
--------------------------------------*/
.lead-section{
	display: flex;
	align-items: flex-start;
	margin-left: 140px;
	gap: 60px;
}
#service .lead-section{
	margin-top: 60px;
	.lead-title{
		white-space: nowrap;
	}
}
#service .lead-section .bg-txt{
	margin-bottom: 20px;
}
.bg-content{
	background: #fff;
	border-radius: 23px;
	box-shadow: 0px 0px 66px 0px rgba(0,0,0,0.16);
	margin: 60px 140px;
	padding: 35px 50px;
}
article p{
	font-size: 1.4rem;
	line-height: 2;
}
h2.ico-link{
	font-size: 2.4rem;
	margin-bottom: 35px;
}
.bg-content .col{
	display: flex;
	gap: 60px;
}
.bg-content .img{
	width: 35%;
	flex-shrink: 0;
}
.bg-content .img img{
	border-radius: 17px;
}
#service .btn-l{
	margin-top: 30px;
}
.faq{
	margin-top: 60px;
}
.faq-title{
	font-size: 1.8rem;
	font-weight: 600;
}
.faq-title::before{
	content: "";
	display: inline-block;
	width: 60px;
	height: 45px;
	background: url("../img/service/ico-faq.png") no-repeat;
	background-size: contain;
	vertical-align: -14px;
	margin-right: 10px;
}
.faq-content dl{
	margin: 16px 0;
}
.faq-content dl dt{
	font-size: 1.6rem;
	line-height: 2;
	font-weight: 500;
	cursor: pointer;
	padding: 20px 50px 20px 20px;
	background: #F9FAFD;
}
.faq-content dl dt:hover{
	color: #666;
}
.faq-content dl dt,
.faq-content dl dd{
	position: relative;
}
.faq-content dl dd{
	font-size: 1.4rem;
	line-height: 1.8;
	padding: 19px 70px 19px 20px;
}
/* .faq-content dl dd::before{
	content: "";
	display: inline-block;
	width: 99px;
	height: 83px;
	background: url("../img/service/img-faq.png") no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 22px;
} */
.faq-content dl dt .ico{
	display: inline-block;
	width: 20px;
	height: 20px;
	position: absolute;
	top: calc(50% - 10px);
	right: 18px;
}
.faq-content dl dt .ico:before,
.faq-content dl dt .ico:after{
	content: "";
	display: block;
	width: 20px;
	height: 1px;
	background: #041B30;
	position: absolute;
	top: 10px;
	left: 0;
}
.faq-content dl dt .ico:after{
	transform: rotate(90deg);
	transition: all 0.2s linear;
}
.faq-content dl dt.active .ico:after{
	transform: rotate(0deg);
}
.faq-content dl dd p + p{
	margin-top: 20px;
}
.ico-dot{
	color: var(--color-green);
	font-weight: 600;
	font-size: 3rem;
	margin-bottom: 30px;
}
.ico-dot::before{
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 16px;
	background: var(--color-green);
	vertical-align: 3px;
	margin-right: 15px;
}
#service .ico-dot{
	margin-top: 30px;
}
/*--------------------------------------
 office
--------------------------------------*/
#office .lead-section{
	.img-box{
		flex-grow: 1;
		width: 100%;
	}
	.img{
		margin-top: 40px;
	}
	.img img{
		width: 300px;
		height: auto;
	}
	.lead-title{
		white-space: nowrap;
	}
}
.contents-col{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	padding-left: 0;
}
.bracket{
	color: var(--color-green);
	position: relative;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 600;
	padding: 35px 57px;
}
.bracket::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-top: 1px solid var(--color-green);
  border-left: 1px solid var(--color-green);
}
.bracket::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-bottom: 1px solid var(--color-green);
  border-right: 1px solid var(--color-green);
}
.contents-col .title{
	display: flex;
	align-items: center;
	justify-content: center;
}
.bg-txt.al-right{
	text-align: right;
	margin-top: 140px;
}
#office section + section{
	margin-top: 140px;
}
#office .map{
	margin-bottom: 30px;
}
#office .map + p{
	padding: 0 160px;
}
.txt-history{
	margin-top: 84px;
}
.txt-history img{
	max-width: 514px;
	height: auto;
}

/*--------------------------------------
 profile
--------------------------------------*/
#profile .lead-section {
  margin-left: 140px;
  gap: 60px;
  .txt {
    flex: 0 0 auto;
    width: 60%;
  }
  .lead-title {
    white-space: nowrap;
    width: max-content;
  }
	.img{
		margin-right: 140px;
	}
	.img .name{
		margin-top: 18px;
		text-align: center;
		font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", "MS Mincho", serif;
		font-weight: 500;
		font-size: 2rem;
	}
	.profile-txt{
		margin-top: 60px;
	}
	.profile-txt p + p{
		margin-top: 1em;
	}
	.box-shadow{
		border-radius: 20px;
		overflow: hidden;
	}
}
#profile .bg-txt{
	text-align: right;
	margin-bottom: 30px;
	& img{
		width: 38%;
		height: auto;
	}
}
/*--------------------------------------
 recruit
--------------------------------------*/
#recruit .bg-txt{
	text-align: right;
	margin-bottom: 30px;
	& img{
		width: 60%;		
	}
}
#recruit .lead-section {
  margin-left: 140px;
  gap: 60px;
  .txt {
    flex: 0 0 auto;
    width: min-content; 
  }
  .lead-title {
    white-space: nowrap;
    width: max-content;
  }
	.img{
		text-align: right;
	}
}
.title-lead{
	max-width: 990px;
	margin: 40px auto 60px auto;
}
#jobs{
	margin: 60px 0;
}
.job-content{
	background: #fff;
	border: 1px solid #DCDCDC;
	padding: 30px;
	margin: 0 140px;
}
.job-content + .job-content{
	margin-top: 35px;
}
.job-content .grid{
	display: grid;
  grid-template-areas:
    "img txt"
    "img table"; 
  grid-template-columns: 300px 2fr;
	grid-template-rows: auto 1fr; 
	gap: 0 70px;
	margin-bottom: 50px;
	.img{
 		grid-area: img;
	}
	.txt{
		grid-area: txt;
	}
	.table{
		grid-area: table;
	}
	& h3{
		font-size: 2.3rem;
		line-height: 1.5;
		font-weight: 600;
		color: var(--color-green);
	}
	.tags{
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin-top: 30px;
		margin-bottom: 30px;
		& li{
			background: #D1ECF1;
			padding: 10px 15px;
			font-size: 1.4rem;
		}
	}
}
.btn-l{
	display: inline-block;
	text-align: center;
	padding: 20px 72px 22px 30px;
	background: linear-gradient(90deg,rgba(0, 160, 185, 1) 0%, rgba(16, 102, 177, 1) 100%);
	color: #fff;
	position: relative;
	min-width: 340px;
	margin: auto;
	border-radius: 100px;
	border: 0;
	font-size: 1.8rem;
	cursor: pointer;
}
.btn-l .ico-link-arrow{
	position: absolute;
	right: 4px;
	top: calc(50% - 20px);
}
.btn-l:hover{
	opacity: 1;
}
.sub-title{
	text-align: center;
	& h2{
		font-size: 2.4rem;
		font-weight: 600;
		color: var(--color-green);
		margin-bottom: 2em;
	}
	& p{
		line-height: 2;
	}
}
/*--------------------------------------
 contact
--------------------------------------*/
#form{
	max-width: 1120px;
	margin: auto;
}
.form-grid{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 30px 50px;
	.tit-col{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	& h3{
		font-size: 2rem;
		font-weight: 600;
		color: var(--color-green);
		border-left: 6px solid var(--color-green);
		padding-left: 10px;
	}
	& input[type="text"],
	& input[type="number"],
	& input[type="email"],
	& input[type="tel"],
	& textarea{
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 20px;
		width: 100%;
		font-weight: normal;
	}
	& input[type="text"]:focus,
	& input[type="number"]:focus,
	& input[type="email"]:focus,
	& input[type="tel"]:focus,
	& textarea:focus{
		border-color: var(--color-green);
	}
	& input.month,
	& input.day{
		max-width: 4em;
		margin: 0 10px;
	}
	& input.year{
		max-width: 6em;
		margin-right: 10px;
	}
	& textarea{
		max-width: 100%;
		height: 15em;
		box-sizing: border-box;
	}
	/* remove arrows form input */
	& input[type=number]::-webkit-inner-spin-button,
	& input[type=number]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	& input[type=number] {
		-moz-appearance: textfield;
	}
	.req,
	.opt{
		color: #fff;
		background: #888;
		padding: 0px 10px 2px 10px;
		margin-left: 20px;
		border-radius: 5px;
		font-size: 1.4rem;
		font-weight: 400;
	}
	.req{
		background: linear-gradient(180deg,rgba(0, 160, 185, 1) 0%, rgba(16, 102, 177, 1) 100%);
	}
}
#form{
	line-height: 2;
}
.privacy{
	background: #fff;
	border: 1px solid #ccc;
	padding: 30px 20px;
	height: 16em;
	overflow: scroll;
	margin: 70px 0 30px 0;
	& h3{
		text-align: center;
		font-size: 1.8rem;
		font-weight: 700;
		color: var(--color-green);
		margin-bottom: 0.2em;
		margin-top: 1em;
	}
	& h3:first-child{
		margin-top: 0;
	}
	& p{
		line-height: 1.5;
	}
	& p + p{
		margin-top: 1em;
	}
}
.privacy-check{
	text-align: center;
}
#form ul li + li{
	margin-top: 0.5em;
}
label.error{
	color: #c60c18;
	display: block;
	margin-top: 12px;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 1.5rem;
	animation: blink 0.5s infinite alternate;
}
label.error::before{
	content: "※";
}
#contact .btn-wrap{
	margin-top: 60px;
	margin-bottom: 40px;
	gap: 20px;
}
.send{
	padding-top: 60px;
	padding-bottom: 60px;
	margin-top: 0;
}
.send .sub-title{
	margin-bottom: 50px;
}
/*--------------------------------------
 topics
--------------------------------------*/
.main-twocol{
	display: grid;
	grid-template-columns: 270px 1fr;
	margin: 0 140px;
	gap: 24px;
}
.main-twocol aside{
	order: 1;
}
.main-twocol main{
	order: 2;
}
#aside > h3{
	text-align: center;
	color: #fff;
	background: linear-gradient(180deg,rgba(0, 160, 185, 1) 0%, rgba(16, 102, 177, 1) 100%);
	padding: 18px 0;
	border-radius: 10px;
	font-size: 2.4rem;
}
.aside-cat-list li{
	background: #fff;
	border: 1px solid #DCDCDC;
	border-radius: 8px;
	margin-top: 8px;
	& a{
		display: block;
		padding: 10px 0 10px 20px;
		line-height: 1.5;
		position: relative;
	}
	& a::after{
		content: "";
		display: inline-block;
		width: 17px;
		height: 16px;
		background: url("../common/img/ico-link-arrow-blk.svg") no-repeat;
		background-size: contain;
		position: absolute;
		top: calc(50% - 8px);
		right: 10px;
	}
}
.bnr-list{
	margin-top: 50px;
	& li + li{
		margin-top: 24px;
	}
	& img{
		border-radius: 20px;
	}
}
.single-title{
	background: #fff;
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.5;
	padding: 20px 20px;
	border-radius: 20px;
}
.post-meta{
	margin: 30px 30px;
}
.time{
	color: var(--color-green);
}
.cat-list{
	display: flex;
	gap: 10px;
	margin-top: 20px;
	& a{
		display: inline-block;
		background: var(--color-green);
		color: #fff;
		padding: 6px 10px 7px 10px;
		border-radius: 3px;
		font-weight: 500 !important;
	}
}
.main-twocol .bg-content{
	margin: 0;
}
.archive-content{
	background: #fff;
	display: grid;
	grid-template-columns: 200px 1fr;
	padding: 20px;
	gap: 20px;
	border-radius: 20px;
	margin-top: 30px;
	& h2{
		font-size: 1.8rem;
		font-weight: 600;
		line-height: 2;
		margin-top: 20px;
	}
}
.archive-content:first-child{
	margin-top: 0;
	
}
/*pagenavi*/
body .wp-pagenavi{
text-align: center;
margin: 40px 0;
width: 100%;
}
body .wp-pagenavi span,
body .wp-pagenavi a{
font-weight: 700;
display: inline-block;
min-width: 45px;
height: 45px;
line-height: 45px;
font-size: 1.5rem;
margin: 0 4px;
border-radius: 100px;
box-sizing: content-box;
}
body .wp-pagenavi span.pages{
padding: 0 10px;
}
body .wp-pagenavi .current,
body .wp-pagenavi a:hover{
background: #00A0B9;
color: #fff;
font-weight: normal;
}
body .yarpp-related{
	margin-top: 100px;
}
/*--------------------------------------
 wide monitor
--------------------------------------*/
@media only screen and (min-width: 1500px) {
	#profile .lead-section,
	.contents-col,
	.bg-content,
	.main-twocol,
	.job-content,
	.map {
		margin-left: auto;
		margin-right: auto;
		max-width: 1400px;
	}
	#profile .lead-section .img{
		margin-right: 0;
	}
}