/* fonts.css */
/* Poppins（SIL Open Font License）。Google Fonts に行かず assets/fonts/ から配る。元サイトと同じ 500 と 700 */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/poppins-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* style.css */
/* 元サイトのテーマ nextrelation の style.css の写し。docs/設計.md「見た目」。
   外したもの: Google Fonts の @import（fonts.css で自前配信）、WordPress・Contact Form 7・WP-PageNavi にしか効かない規則、文字化けしたコメント。
   変えたもの: url(../img/…) → /assets/img/theme/…、送信ボタンの規則を button にも。見た目に関わる値は変えない */
body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #000;
	font-family: "Poppins", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background: #fff;
	letter-spacing: 0.05em;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 15px!important;
	line-height: 30px!important;
}
.txt_s{
	font-size: 11px!important;
	line-height: 16px!important;
}
.txt_xs{
	font-size: 10px!important;
	line-height: 16px!important;
}
@media only screen and (min-width: 750px) {
body{
	font-size: 15px!important;
	line-height: 32px!important;
}
.txt_s{
	font-size: 13px!important;
	line-height: 18px!important;
}
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}}
.img100 {
	width:100%;
	height:auto;}
*{
	box-sizing: border-box;
}
h1,h2,h3,h4{
	margin: 0;
	padding: 0;
}
*:focus {
  outline: none;
}
img{
	width: 100%;
	height: auto;
	display: block;}
a,
a:link,
a:visited,
a:hover,
a:active{
	color:#24b1df;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.pc{
	display: none;}
.sp{
	display: block;}
@media only screen and (min-width: 750px) {
.pc{
	display: block;}
.sp{
	display: none;}
}
div{
	transition: .3s;
}
.red{
	color: #ba4245;}
.lightblue{
	color: #52acc0;
}
.lightgray{
	color: #777777;
}

.blinking{
	-webkit-animation:blink 1.2s infinite;
    -moz-animation:blink 1.2s infinite;
    animation:blink 1.2s infinite;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
/*-----------basic-----------*/
.contents{
	overflow: hidden;
}
.relative{
	position: relative;
	z-index: 1;
}
.normal_wrap{
	display: block;
	width: 84%;
	margin: 0 auto;
}
@media only screen and (min-width: 750px) {
.contents{
}
.normal_wrap{
	max-width: 1000px;
	width: 94%;
	margin: 0 auto;
}
}
/******************************
** video
*******************************/
.video-bg{
	overflow: hidden;
	position: fixed;
	width: 100%;
	margin: auto;
	z-index: -2;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.video-bg::before{
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	background: rgba(255,255,255,0.4);}
.video-bg img,
.video-bg video{
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translateX( -50% ) translateY( -50% );
}

/*-----------top-basic-----------*/
.top_text{
	max-width: auto;
	width: 100%;
	opacity: 0;
}
.top_text h3{
	font-size: 8vw;
	line-height: 11vw;
	font-weight: bold;
	margin: 0 0 1.5%;
}
.top_text h3.top_text_en{
	font-size: 11vw;
	line-height: 13vw;
	font-weight: normal!important;
}
.top_text_h3sub{
	font-size: 2.5vw;
	line-height: 3.5vw;
	color:#777777;
	font-weight: bold;
}
.top_text_main{
	font-size: 4.3vw;
	line-height: 8.3vw;
	font-weight: bold;
	padding: 5% 0;
}
.top_text_bt {
	position: relative;
	z-index: 1;
	width: 60%;
	border-radius: 50px;
	overflow: hidden;
	box-shadow: 0 8px 10px 0 rgba(0,0,0,0.2);
	margin: 0 0 0 -1%;
}
.top_text_bt a{
	display: block;
	height: 100%;
	padding: 10% 0;
	color: #fff;
	text-align: center;
	background: linear-gradient(90deg,#006484,#00b3d8);
	font-size: 3vw;
	line-height: 5vw;
	font-weight: normal;
	transition: .3s;
}
.top_text_bt a::before{
	position: absolute;
	z-index: 1;
	content: "";
	background: #fff;
	width: 6px;
	height: 8px;
	left: 13%;
	top: 0;
	bottom: 0;
	margin: auto;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0,100% 50%,0 100%);
	transition: .3s;
}
.top_text_bt a:hover{
	letter-spacing: 0.2em;
	background: linear-gradient(90deg,#007ba3,#00c0e7);
}
@media only screen and (min-width: 750px) {
.top_text{
	max-width: 542px;
	width: 54.2%;
}
.top_text h3{
	font-size: 46px;
	line-height: 64px;
}
.top_text h3.top_text_en{
	font-size: 64px;
	line-height: 80px;
}
.top_text_h3sub{
	font-size: 14px;
	line-height: 24px;
}
.top_text_main{
	font-size: 20px;
	line-height: 40px;
	padding: 24px 0;
}
.top_text_bt {
	width: 227px;
}
.top_text_bt a{
	font-size: 13px;
	line-height: 24px;
}
}
/*-----------drawer-----------*/
ul.drawer_menu {
	width: 84%;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}
ul.drawer_menu li{
	margin: 18px 0;
}
ul.drawer_menu a{
	color: #d4eff5!important;
	font-size: 6vw;
	line-height: 7vw;
	font-weight: 500!important;
	transition: .4s;
}
ul.drawer_menu a:hover{
	color: #fff!important;
}
ul.drawer_menu_below {
	width: 84%;
	margin: 40px auto;
	list-style: none;
	padding: 0;
}
ul.drawer_menu_below a{
	color: #000!important;
	font-size: 10px;
	line-height: 16px;
	font-weight: 500!important;
	transition: .4s;
}
.drawer_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 84%;
	margin: 40px auto 0;
}
.drawer_box a{
	position: relative;
	display: block;
	background: #fff;
	text-align: center;
	color: #007293;
	width: 49%;
	padding: 20px 0;
	border-radius: 6px;
	font-size: 2.6vw;
	line-height: 3.6vw;
}
.drawer_box a::before{
	position: absolute;
	z-index: 1;
	content: "";
	background: #007293;
	width: 6px;
	height: 8px;
	left: 10%;
	top: 0;
	bottom: 0;
	margin: auto;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0,100% 50%,0 100%);
}

/*-----------header-----------*/
header{
	display: block;
	width: 100%;
	position: fixed;
	z-index: 1000;
	padding: 32px 0;
	transition: .5s;
}
.is-animation {
	padding: 32px 0;
	backdrop-filter: blur(10px);
	background: rgba(255,255,255,0.5);
}
.header_wrap{
	width: 100%;
	margin: 0 auto;
	display: block;
}
.header_logo{
	width: 200px;
	margin-left: 7%;
	animation: fadeIn_header_logo 1s ease-out 0s;
}
@-webkit-keyframes fadeIn_header_logo {
  from {opacity: 0;margin-top: -13%;}
  to {opacity: 1;margin-top: 0%;}
}
@keyframes fadeIn_header_logo {
  from {opacity: 0;margin-top: -13%;}
  to {opacity: 1;margin-top: 0%;}
}
ul.header_menu{
	display: none;
	list-style: none;
	overflow-x: scroll;
	margin: 24px 0 0;
	padding: 0 8%;
	box-shadow: 0;
	opacity: 0;
	-webkit-overflow-scrolling: touch;
	animation: fadeIn_header_menu 1s ease-out 0.5s both;
}
@-webkit-keyframes fadeIn_header_menu {
  from {opacity: 0;margin-right: 12px;}
  to,100% {opacity: 1;margin-right: 0;}
}
@keyframes fadeIn_header_menu {
  from {opacity: 0;margin-right: 12px;}
  to,100% {opacity: 1;margin-right: 0;}
}
ul.header_menu::-webkit-scrollbar{
  display: none;
}
ul.header_menu li{
	margin: 0 6% 0 0;
}
ul.header_menu li a{
	display: block;
	width: object-fit;
	white-space: nowrap;
	font-weight: 500!important;
	font-size: 3.2vw;
	line-height: 4.2vw;
	letter-spacing: 0;
	cursor: pointer;
	padding: 2px;
	overflow: hidden;
  color: transparent!important; 
	text-shadow: 0 -2em 0 #fff, 0 0 0 #fff;
  transition: text-shadow 0.4s;
}
ul.header_menu li a:hover {
  text-shadow: 0 0 0 #fff, 0 2em 0 #fff; 
}
@media only screen and (min-width: 750px) {
header{
	padding: 50px 0;
}
.is-animation {
	padding: 20px 0;
}
.header_wrap{
	max-width: 1000px;
	width: 94%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.header_logo{
	width: 180px;
	margin-left: 0;
}
ul.header_menu{
	display: flex;
	overflow: hidden;
	margin: 0;
	background: #009ecd;
	padding: 16px 60px 16px 20px;
	border-radius: 50px;
	box-shadow: 0 12px 10px 0 rgba(0,0,0,0.1);
}
ul.header_menu li{
	margin: 0 1.5% 0 0;
}
ul.header_menu li:last-child{
	margin: 0;
}
ul.header_menu li a{
	color: #fff;
	font-size: 12px;
	line-height: 23px;
	margin: 0 4px;
	font-weight: bold!important;
}
}
@media only screen and (min-width: 920px) {
.header_logo{
	width: 240px;
}
ul.header_menu{
	padding: 20px 80px 20px 30px;
}
ul.header_menu li{
	margin: 0 2% 0 0;
}
ul.header_menu li a{
	font-size: 14px;
	line-height: 26px;
	margin: 0 6px;
	font-weight: bold!important;
}
}
/*-----------fv-----------*/
.fv_wrap {
	padding: 48% 0 30%;
	height: auto;
}
#fv h3{
	font-size: 13vw;
	line-height: 14vw;
	font-weight: 500;
	margin: 0 0 1.5%;
	opacity: 0;
}
video.top_fv_sp {
	position: absolute;
	width: 116%;
	z-index: -1;
	bottom: 0;
	right: -10%;
  -webkit-clip-path: polygon(100% 2%, 0% 100%, 100% 100%);
  clip-path: polygon(100% 2%, 0% 100%, 100% 100%);
	overflow: hidden;
}
video.top_fv_sp2 {
	position: absolute;
	width: 127%;
	z-index: -1;
	bottom: 0;
	right: -15%;
	-webkit-clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
	clip-path: polygon(70% 0, 140% 0, 70% 100%, 0 100%);
	overflow: hidden;
	animation: fadeIn_top_fv_sp 3s ease-out 0s;
}
@-webkit-keyframes fadeIn_top_fv_sp {
  from {opacity: 0;right: -35%;}
  to {opacity: 1;right: -15%;}
}
@keyframes fadeIn_top_fv_sp {
  from {opacity: 0;right: -35%;}
  to {opacity: 1;right: -15%;}
}
.fv_read{
	opacity: 0;
}
@media only screen and (min-width: 750px) {
.fv_wrap {
	padding: 270px 0 120px;
}
#fv h3{
	font-size: 68px;
	line-height: 78px;
}
.mask {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}
.top_fv_video{
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: auto;
	left: 100px;
	animation: fadeIn_top_fv_video 3s ease-out 0s;
}
}
@-webkit-keyframes fadeIn_top_fv_video {
  from {opacity: 0;left: 200px;}
  to {opacity: 1;left: 100px;}
}
@keyframes fadeIn_top_fv_video {
  from {opacity: 0;left: 200px;}
  to {opacity: 1;left: 100px;}
}
/*-----------top-news-----------*/
#news{
	padding: 20% 0 12%;
}
.top_news_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.top_news_left{
	width: 100%;
	opacity: 0;
}
.top_news_right{
	width: 100%;
	margin: 8% 0 0;
}
.top_news_wrap h3{
	font-size: 8vw;
	line-height: 10vw;
	font-weight: 500;
	margin: 0 0 1.5%;
}
.top_news_right dl{
 width:100%; 
}
.top_news_right dt{
	float:left;
	color: #777777;
	font-size: 12px;
	padding: 0 0 24px;
}
.top_news_right dd{
	margin-left:100px;
	font-weight: bold;
	padding: 0 0 24px;
}
.top_news_right dd a{
	color: #000!important;
}
.top_news_margin1{
	margin-bottom: 6%;
}
.top_news_shape1{
	position: absolute;
	z-index: -1;
	width: 26.66666%;
	top: -27%;
	left: 26%;
	animation: fadeIn_top_news_shape1 1s ease-out 0s;
}
@-webkit-keyframes fadeIn_top_news_shape1 {
  from {opacity: 0;top: -53%;left: 10%;}
  to {opacity: 1;top: -27%;left: 26%;}
}
@keyframes fadeIn_top_news_shape1 {
  from {opacity: 0;top: -53%;left: 10%;}
  to {opacity: 1;top: -27%;left: 26%;}
}
@media only screen and (min-width: 750px) {
#news{
	padding: 150px 0 32px;
}
.top_news_wrap h3{
	font-size: 38px;
	line-height: 48px;
}
.top_news_left{
	width: 35.6%;
}
.top_news_right{
	width: 54.4%;
	margin: 0;
}
.top_news_shape1_pc{
	position: absolute;
	z-index: -1;
	width: 140px;
	top: -200px;
	left: 180px;
	animation: fadeIn_top_news_shape1_pc 0.6s ease-out 0s;
}
}
@-webkit-keyframes fadeIn_top_news_shape1_pc {
  from {opacity: 0;top: -360px;left: 100px;}
  to {opacity: 1;top: -200px;left: 180px;}
}
@keyframes fadeIn_top_news_shape1_pc {
  from {opacity: 0;top: -360px;left: 100px;}
  to {opacity: 1;top: -200px;left: 180px;}
}
/*-----------top-public-----------*/
#public{
	position: relative;
	z-index: 1;
}
#public::before{
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
	bottom: 0;
	left: 0;
	right: 0;
}
.top_public_wrap{
	padding: 96% 0 16%!important;
}
.public_img{
	position: absolute;
	z-index: -2;
	top: 0;
	bottom: auto;
	left: -28%;
	width: 170%;
	height: auto;
}
.top_public_shape1{
	position: absolute;
	z-index: -1;
	left: 2%;
	top: 32%;
	width: 90%;
	animation: fadeIn_top_public_shape1 1.2s ease-out 0s;
}
@-webkit-keyframes fadeIn_top_public_shape1 {
  from {opacity: 0;left: -20%;top: 22%;}
  to {opacity: 1;left: 2%;top: 32%;}
}
@keyframes fadeIn_top_public_shape1 {
  from {opacity: 0;left: -20%;top: 22%;}
  to {opacity: 1;left: 2%;top: 32%;}
}
@media only screen and (min-width: 750px) {
.top_public_wrap{
	padding: 86px 0 100px!important;
}
.public_img{
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: auto;
	left: -30%;
	width: 760px;
	height: auto;
}
.top_public_shape1_pc{
	position: absolute;
	z-index: -1;
	left: 120px;
	top: 55px;
	width: 500px;
	animation: fadeIn_top_public_shape1_pc 0.5s ease-out 0s;
}
}
@-webkit-keyframes fadeIn_top_public_shape1_pc {
  from {opacity: 0;left: 50px;top: -40px;}
  to {opacity: 1;left: 120px;top: 55px;}
}
@keyframes fadeIn_top_public_shape1_pc {
  from {opacity: 0;left: 50px;top: -40px;}
  to {opacity: 1;left: 120px;top: 55px;}
}
@media only screen and (min-width: 1000px) {
.top_public_wrap{
	padding: 86px 0 100px!important;
}
.public_img{
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: auto;
	left: -30%;
	width: 760px;
	height: auto;
}
}
/*-----------solution-----------*/
#solution{
	background: url("/assets/img/theme/top_solution_bg_sp.webp")no-repeat center center;
	background-size: cover;
}
.top_solution_wrap{
	padding: 9% 0 13%;
}
.top_solution{
	position: static;
	max-width: 100%!important;
	width: 110%;
	margin-: auto;
}
@media only screen and (min-width: 750px) {
#solution{
	background: url("/assets/img/theme/top_solution_bg.webp")no-repeat center center;
	background-size: cover;
}
.top_solution_wrap{
	padding: 100px 0 100px;
}
.top_solution{
	position: absolute;
	z-index: -1;
	width: 429px;
	top: 0;
	bottom: 0;
	left: auto;
	right: 3%;
	margin: auto;
}
}
@media only screen and (min-width: 800px) {
.top_solution_wrap{
	padding: 180px 0 120px;
}
}
/*-----------ourteam-----------*/
#team{
	position: relative;
	z-index: 1;
}
#team::before{
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
	top: 0;
	left: 0;
	right: 0;
}
.top_team_wrap{
	padding: 64% 0 22%;
}
.ourteam_text{
	margin: 0;
}
.ourteam_img{
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: auto;
	left: -25%;
	width: 160%;
}
.top_team_shape1{
	position: absolute;
	z-index: -1;
	height: 60%;
	bottom: -10%;
	right: -60%;
	object-fit: contain;
}
@media only screen and (min-width: 750px) {
#team{
}
.top_team_wrap{
	padding: 86px 0 200px;
}
.ourteam_text{
	margin: 0 0 0 45.8%;
}
.ourteam_img{
	top: auto;
	bottom: 16%;
	left: -12%;
	width: 65%;
}
.top_team_shape1{
	height: 100%;
	bottom: 0;
	right: -45%;
}
}
/*-----------recruit-----------*/
#recruit{
	padding: 36% 0 22%;
}
.recruit_img{
	position: absolute;
	z-index: -2;
	width: 120%;
	height: 42vw;
	overflow: hidden;
	top: 0;
	left: -10%;
	right: 0;
	margin: auto;
}
.recruit_img img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.top_recruit_shape1{
	position: absolute;
	z-index: -1;
	width: 25%;
	left: -3%;
	top: 10%;
	animation: fadeIn_top_recruit_shape1 0.6s ease-out 0s;
}
@-webkit-keyframes fadeIn_top_recruit_shape1 {
  from {opacity: 0;left: -23%;top: -20%;}
  to {opacity: 1;left: -3%;top: 10%;}
}
@keyframes fadeIn_top_recruit_shape1 {
  from {opacity: 0;left: -23%;top: -20%;}
  to {opacity: 1;left: -3%;top: 10%;}
}
@media only screen and (min-width: 750px) {
#recruit{
	padding: 46px 0 180px;
}
.recruit_img{
	width: 777px;
	height: 250px;
	overflow: hidden;
	top: 0;
	left: auto;
	right: -28%;
	margin: auto;
}
.top_recruit_shape1_pc{
	position: absolute;
	z-index: -1;
	width: 150px;
	left: 0;
	top: -50px;
	animation: fadeIn_top_recruit_shape1_pc 0.6s ease-out 0s;
}
}
@media only screen and (min-width: 1000px) {
.recruit_img{
	right: -10%;
}
}
@-webkit-keyframes fadeIn_top_recruit_shape1_pc {
  from {opacity: 0;left: -100px;top: -250px;}
  to {opacity: 1;left: 0;top: -50px;}
}
@keyframes fadeIn_top_recruit_shape1_pc {
  from {opacity: 0;left: -100px;top: -250px;}
  to {opacity: 1;left: 0;top: -50px;}
}

/*-----------footer-----------*/
footer{
	padding-bottom: 22%;
}
.bridge_wrap{
	width: 100%;
	display: block;
	padding: 0 0 12%;
	opacity: 0;
}
.bridge_box{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:stretch;
	margin: 0 auto 12%;
}
.bridge_box a{
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.bridge_label{
	width: 51.5873015873%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 14% 0 0;
	margin: 0;
}
.bridge_label_text{
	font-size: 4.2vw;
	line-height: 6.2vw;
	font-weight: 500;
	margin: 0 0 3%;
}
.bridge_box .bridge_bt{
	position: relative;
	z-index: 1;
	width: 100%;
	border: 1px solid #000;
	text-align: center;
	padding: 4% 0;
	border-radius: 6px;
	font-weight: bold;
	font-size: 2.3vw;
	line-height: 4vw;
	transition: .3s;
}
.bridge_box .bridge_bt::before{
	position: absolute;
	z-index: 1;
	content: "";
	background: #000;
	width: 6px;
	height: 8px;
	left: 10%;
	top: 0;
	bottom: 0;
	margin: auto;
  aspect-ratio: cos(30deg);
  clip-path: polygon(0 0,100% 50%,0 100%);
	transition: .6s;
}
.bridge_box:hover .bridge_bt{
	background: #000;
	color: #fff;
}
.bridge_box:hover .bridge_bt::before{
	background: #fff;
	left: 13%;
}
 .bridge_box .bridge_img{
	width: 43.6507936508%;
	height: 45vw;
	position: relative;
	overflow: hidden;
	border-radius: 5vw;
	box-shadow: 0 10px 12px 0 rgba(0,0,0,0.2);
	 transition: .5s;
}
.bridge_box .bridge_img img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 .bridge_box:hover .bridge_img{
	height: 47vw;
	 margin-top: -2vw;
}

.footer_logo{
	max-width: 305px;
	width: 69.523809523%;
	margin: 0 0 10% -2%;
}

footer nav.footer_menu ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 0;
	margin: 0 0 12%;
}
footer nav.footer_menu ul li{
	display: block;
	width: 50%;
	margin: 1.3% 0;
}
footer nav.footer_menu ul li a{
	display: block;
	font-size: 4.2vw;
	line-height:6.2vw;
	font-weight: 500;
	letter-spacing: 0;
	overflow: hidden;
  color: transparent!important; 
	text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
  transition: text-shadow 0.4s;
}
footer nav.footer_menu ul li a:hover {
  text-shadow: 0 0 0 #000, 0 1.5em 0 #000; 
}
.footer_below{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
}
footer nav.footer_info ul{
	list-style: none;
	padding: 0 0 32px;
	margin: 0;
	font-size: 0;
	line-height: 0;
}
footer nav.footer_info ul li{
	display: block;
	margin: 8% 0;
}
footer nav.footer_info ul li a{
	color: #000!important;
	font-size: 10px;
	line-height: 16px;
	text-decoration: underline;
}
.copyright{
	font-size: 10px;
	line-height: 16px;
	font-weight: 500;
	padding: 0 0 40px;
}
@media only screen and (min-width: 750px) {
footer{
	padding-bottom: 120px;
}
.bridge_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0 0 16%;
}
.bridge_box{
	max-width: 443px;
	width: 47%;
	margin: 0;
}
.bridge_label{
	width: 51.693002257%;
	padding: 13% 0 0;
}
.bridge_label_text{
	font-size: 20px;
	line-height: 32px;
}
.bridge_box .bridge_img{
	width: 43.792325056%;
	height: 228px;
	border-radius: 16px;
	box-shadow: 0 10px 12px 0 rgba(0,0,0,0.2);
}
 .bridge_box:hover .bridge_img{
	height: 242px;
	 margin-top: -14px;
}
.bridge_box .bridge_bt{
	padding: 4% 0;
	border-radius: 6px;
	font-size: 12px;
	line-height: 18px;
}

.footer_logo{
	margin: 0 0 50px -0.5%;
}
footer nav.footer_menu ul{
	margin: 0 0 72px;
}
footer nav.footer_menu ul li{
	width: fit-content;
	margin: 0 23px 0 0;
}
footer nav.footer_menu ul li a{
	font-size: 16px;
	line-height: 28px;
}
footer nav.footer_info ul li{
	display: inline-block;
	margin: 0 16px 0 0;
}
.copyright{
	padding: 0 0 30px;
}
}

/*-----------bnr-----------*/
.bl_floatingBanner {
  position: fixed;
	z-index: 1000;
  bottom: 0;
  right: 0;
  width: 60%;
  max-width: 260px;
}
.bl_floatingBanner.js_close {
  display: none;
}
.bl_floatingBanner_img {
  display: block;
  transition: 0.3s;
}
.bl_floatingBanner_close {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: -10px;
  cursor: pointer;
	background: #000;
	border-radius: 50%;
}
.bl_floatingBanner_close span:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
  width: 12px;
  height: 1px;
  background-color: #fff;
  transform: rotate(45deg);
}
.bl_floatingBanner_close span:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
  width: 1px;
  height: 12px;
  background-color: #fff;
  transform: rotate(45deg);
}

/*-----------breadcrumb-----------*/
.breadcrumb {
  padding: 0 0 16px;
}
#breadcrumbs{
	font-size: 12px!important;
	line-height: 20px!important;
}
#breadcrumbs a{
	font-weight: bold;
	color: #000!important;
}
.breadcrumb_last{
	color: #666!important;
}
/*-----------single-----------*/
.single_head{
	padding-top: 100px;
}
.single_container{
	background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)12%,rgba(255,255,255,1)88%,rgba(255,255,255,0));
}
.single_wrap{
	max-width: 760px;
	width: 84%;
	margin: 0 auto;
	padding: 20px 0 80px;
}
.single_wrap2{
	max-width: 900px;
	width: 84%;
	margin: 0 auto;
	padding: 0 0 80px;
}
.single_wrap h2{
	font-size: 5.8vw;
	line-height: 7.8vw;
}
.single_wrap h3{
	font-size: 18px;
	line-height: 38px;
	margin: 50px 0 12px;
}
.single_wrap2 h2{
	font-size: 6.8vw;
	line-height: 8.8vw;
	font-weight: bold;
}
.single_date{
	color: #777777;
	font-size: 12px;
	margin: 0 0 40px;
}
.nav-links {
	max-width: 760px;
	width: 84%;
	margin: 0 auto 80px;
  font-size: 12px;
  display: flex;
}
.nav-links div[class^="nav-"] {
  width: 50%;
}
.nav-links .nav-next {
  margin-left: auto;
}
.nav-links .nav-previous + .nav-next {
  margin-left: -1px;
}
.nav-links a {
	color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5em;
  border: 1px solid #000;
	transition: .3s;
}
.nav-links a:hover {
	color: #fff;
  background: #000;
}
.single_cover {
	max-width: 1280px;
	margin: 0 auto;
	margin-bottom: 16px;
}
.single_cover img{
	width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
.news_archive_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	margin: 30px 0 80px;
	gap:0;
}
.news_archive_box{
	position: relative;
	z-index: 1;
	width: 100%;
	background: #fff;
	box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2);
	padding: 30px 24px;
	font-size: 12px;
	line-height: 20px;
	margin: 0 0 24px;
	border-radius: 6px;
}
.news_archive_box a{
	display: block;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: .2s;
}
.news_archive_box a:hover{
	background: rgba(255,255,255,0.5);
}
.news_archive_box h3{
	font-size: 15px;
	line-height: 25px;
	margin:24px 0 6px;
}
.news_archive_date{
	color: #007293;
}
.news_archive_txt{
	overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.pagenation{
	width: fit-content;
	margin: 60px auto;
}
.page-numbers{
	text-align: center;
  width: 36px;
  line-height: 36px;
  border-radius: 21px;
  margin: auto 12px;
  transition: 0.3s ease-out;
}
.pagenation a{
	color: #b0b0b0!important;
	font-weight: bold!important;
}
.pagenation a:hover{
	color: #000!important;
}
.single_content{
	margin: 50px 0;
}
.single_content p{
	margin: 12px 0;
}
.single_container table{
	display: block;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	table-layout: fixed;
}
.single_container table th{
	display: block;
	width: 100%;
	padding: 2px 0;
	vertical-align: top;
}
.single_container table td{
	display: block;
	width: 100%;
	padding: 2px 0 28px;
	vertical-align: top;
}
@media only screen and (min-width: 750px) {
.single_head{
	padding-top: 168px;
}
.single_wrap,
.single_wrap2{
	width: 94%;
}
.single_wrap h2{
	font-size: 28px;
	line-height: 48px;
}
.single_wrap h3{
	font-size: 20px;
	line-height: 40px;
	margin: 50px 0 12px;
}
.single_wrap2 h2{
	font-size: 38px;
	line-height: 56px;
}
.nav-links {
	width: 94%;
	margin: 0 auto 100px;
}
.nav-links a {
  height: 6.4em;
}
.single_cover {
	margin-bottom: 24px;
}
.single_cover img{
  aspect-ratio: 16 / 5;
  object-fit: cover;
}
.news_archive_wrap{
	gap:0 2.5%;
}
.news_archive_box{
	width: 31.5%;
	font-size: 12px;
	line-height: 18px;
	padding: 40px 24px;
}
.news_archive_box h3{
	font-size: 14px;
	line-height: 24px;
	margin:36px 0 8px;
}
.single_content{
	margin: 50px 0;
}
.single_container table{
	display: table;
}
.single_container table th{
	display: table-cell;
	width: 180px;
	padding: 12px 0;
}
.single_container table td{
	display: table-cell;
	width: calc(100% - 180px);
	padding: 12px 0;
}
}


/*-----------contact-----------*/
.contact_wrap{
	display: block;
}
.contact_left{
	width: 100%;
}
.contact_right{
	width: 100%;
	padding-top: 0;
}
.contact_form{
	display: block;
}
.contact_h3{
	width: 100%;
	margin: 0 0 2px;
	font-size: 13px;
	line-height: 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}
.gray{
	color: #999!important;
}
.required,
.disp_by_click{
	color: #52acc0;
	font-weight: bold;
	padding: 2px 4px;
	margin: 0 0 0 4px;
}
.contact_input{
	width: 100%;
	margin: 0 0 12px;
	padding: 0 0 12px;
}
.contact_input2{
	width: 100%;
	margin: 0 0 32px;
	padding: 12px;
	background: #f3f8f9;
	font-weight: bold;
}
* {
  -webkit-appearance: none;
  appearance: none;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
	background: #b7eaf6;
	color: #000!important;
}
.contact_select {
    position: relative;
}
.contact_select::after {
	content: "";
    position: absolute;
    top: 18px;
    right: 16px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transform: rotate(45deg);
}
select::-ms-expand {
  display: none;
}
select:focus {
  outline: none;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #e7f0ff inset;
}
.textfield{
	width: 100%;
	font-size: 16px;
	line-height: 24px;
	background: #b7eaf6;
	padding: 12px 20px 12px;
	vertical-align: middle;
	outline: none;
	border: none;
}
.textfield:focus,
.textfield:valid{
	background: #e7f0ff!important;
}
::placeholder {
  color: #999;
}
::-ms-input-placeholder {
  color: #999;
}
:-ms-input-placeholder {
  color: #999;
}
.contact_bt {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 32px auto 40px;
}
.contact_bt input[type="submit"], .contact_bt button{
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	border: none;
	outline: none;
	color: #fff;
	padding: 28px 0 28px 8px;
	cursor: pointer;
	background: linear-gradient(90deg,#006383,#00b6dc);
	border-radius: 50px;
	box-shadow: 0 12px 12px 0 rgba(0,0,0,0.2);
	transition: .2s;
}
.contact_bt input[type="submit"], .contact_bt button:hover{
	letter-spacing: 0.2em;
	background: linear-gradient(90deg,#007ba3,#00c0e7);
}
.contact_bt input[type="submit"], .contact_bt button:disabled{
	letter-spacing: 0.2em;
	background: #999!important;
}
.visually-hidden {
 position: absolute;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
}
.request_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 32px;
}
.contact_radio{
	width: 50%;
	font-size: 13px;
	font-weight: bold;
}
.contact_radio2{
	width: 100%;
	font-size: 13px;
	font-weight: bold;
}
.contact_radio2 label{
	display: block;
}
.content01_box{
	border: 1px solid #aeaeae;
	height: 180px;
	overflow-y: scroll;
	padding: 24px 16px;
	font-size: 11px;
	line-height: 17px;
	border-radius: 6px;
	margin: 16px 0 40px;
}
.content01_box h3{
	font-size: 12px;
	line-height: 16px;
	color: #777777;
	font-weight: bold;
}
input[type="radio"],
input[type="checkbox"]{
  position: relative;
	display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #aeaeae;
  border-radius: 50%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type="radio"]{
  vertical-align: -5px;
}
input[type="checkbox"]{
  vertical-align: -8px;
}
input[type="radio"]:checked:before,
input[type="checkbox"]:checked:before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #52acc0;
  content: '';
}
label {
	width: 100%;
	display: inline-block;
}
label span{
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
}
.prev_bt input{
	cursor: pointer;
	background: #999;
	width: 60%;
	margin: 0 auto;
	display: block;
	color: #fff;
	border: none 0;
	padding: 16px 0;
	border-radius: 50px;
}
@media only screen and (min-width: 750px) {
.contact_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.contact_left{
	width: 42%;
}
.contact_right{
	width: 55%;
	padding-top: 4%;
}
.contact_radio{
	font-size: 14px;
}
.contact_radio2{
	font-size: 14px;
}
.content01_box{
	font-size: 12px;
	line-height: 18px;
}
.content01_box h3{
	font-size: 14px;
	line-height: 18px;
}
.request_wrap{
	padding: 24px 0 32px;
}
}

/*-----------recruit-----------*/
.recruit_box_wrap{
	padding: 40px 0 60px;
}
.recruit_box{
	position: relative;
	z-index: 1;
	background: #fff;
	box-shadow: 0 12px 12px 0 rgba(0,0,0,0.15);
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	border-radius: 6px;
	margin-bottom: 5%;
}
.recruit_box a{
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: .2s;
}
.recruit_box a:hover{
	background: rgba(255,255,255,0.3);
}
.recruit_box_pic{
	width: 40%;
}
.recruit_box_pic img{
	width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.recruit_box_text{
	width: 56%;
}
.recruit_box_text h3{
	font-size: 13px;
	line-height: 18px;
	font-weight: bold;
	margin: 0 0 12px;
}
.recruit_box_text .bridge_bt{
	width: 100%;
	padding: 8px 0;
}
@media only screen and (min-width: 750px) {
.recruit_box_wrap{
	padding: 60px 0 100px;
}
.recruit_box{
	padding: 32px;
}
.recruit_box_pic{
	width: 31%;
}
.recruit_box_pic img{
  aspect-ratio: 5 / 3;
  object-fit: cover;
}
.recruit_box_text{
	width: 66%;
}
.recruit_box_text .bridge_bt{
	width: 180px;
	padding: 12px 0;
}
}

/*-----------member-----------*/
.member_wrap{
	padding: 40px 0 60px;
}
.member_box{
	position: relative;
	z-index: 1;
	display: block;
	border-bottom: 1px solid #000;
	padding: 20% 0 12%;
}
.member_box_left{
	width: 46%;
	margin: 0 0 22% 54%;
}
.member_box_job{
	font-size: 13px;
	line-height: 18px;
	margin: 4px 0 0;
}
.member_box_small{
	font-size: 10px;
	line-height: 18px;
}
.member_box_left h3{
	font-size: 20px;
	line-height: 28px;
	margin: 18px 0 4px;
}
.member_box_en{
	font-size: 14px;
	line-height: 18px;
}
.member_box_right{
	width: 100%;
	font-size: 14px!important;
	line-height: 28px;
}
.member_img{
	position: absolute;
	z-index: -2;
	top: 6%;
	bottom: auto;
	left: -8%;
	width: 84%;
	height: auto;
	max-width: 460px;
}
@media only screen and (min-width: 750px) {
.member_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 60px 0 60px;
}
.member_box_left{
	width: 180px;
	margin: 0;
}
.member_box_right{
	width: calc(71% - 180px);
	font-size: 14px!important;
	line-height: 28px;
}
.member_img{
	top: 60px;
	left: 0;
	width: 360px;
}
}

.solution_margin{
	padding-bottom: 8%!important;
}
.solution_wrap{
	padding: 14% 0 13%;
	text-align: left;
	display: block;
	max-width: 1080px;
	width: 94%;
	margin: 0 auto 120px;
}
.solution_wrap h3{
	font-size: 8vw;
	line-height: 10vw;
	font-weight: normal;
	margin: 0 0 1%;
}
.solution_text{
	width: 100%;
}
.solution_img1{
	max-width: 550px;
	width: 100%;
	margin: 20px auto 0;
}
.solution_img2{
	max-width: 550px;
	width: 100%;
	margin: 20px auto 0;
}
#solution2{
	background: url("/assets/img/theme/solution2_bg_sp.webp")no-repeat center center;
	background-size: cover;
}
#solution3{
	background:#f0fafb;
	position: relative;
	z-index: 1;
	padding: 0;
	margin: 0 0 12%;
}
.solution_blue{
	color: #50c1e5;
	font-weight: bold;
	display: inline;
}
.solution_img3{
	max-width: 550px;
	width: 100%;
	margin: 4% auto 0;
}
@media only screen and (min-width: 750px) {
.solution_margin{
	padding-bottom: 60px!important;
}
.solution_wrap{
	padding: 100px 0 60px;
	width: 92%;
	text-align: center;
}
.solution_wrap h3{
	font-size: 48px;
	line-height: 58px;
	font-weight: normal;
	margin: 0 0 1%;
}
#solution2{
	background: url("/assets/img/theme/solution2_bg_pc.webp")no-repeat center center;
	background-size: cover;
}
.solution_img1{
	max-width: 1000px;
	width: 94%;
	margin: 20px auto 0;
}
.solution_img2{
	max-width: 1000px;
	width: 94%;
	margin: 20px auto;
}
#solution3{
	overflow: hidden;
}
.solution_img3{
	max-width: 1000px;
	width: 94%;
}
}

.radio_margin1{
	margin-top: 32px;
}
.tab_class {
    width: calc(100% - 50px);
    height: 45px;
    line-height: 45px;
    display: inline-block;
    transition: all 0.2s ease;
	font-weight: bold;
}
.content_class {
    display: none;
    clear: both;     
    overflow: hidden;
	margin-top: 32px;
}
#tab1:checked ~ #content1_class,
#tab2:checked ~ #content2_class,
#tab3:checked ~ #content3_class {
    display: block;
}

.solution_service_wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 32px 0 0;
}
.solution_service_box{
	width: 100%;
	background: #fff;
	box-shadow: 0 5px 16px 0 rgba(0,0,0,0.15);
	border-radius: 6px;
	margin: 0 0 32px;
}
.solution_service_head {
	position: relative;
	padding: 32px 30% 32px 50px;
	min-height: 124px;
	height: auto;
}
.solution_service_number{
	position: absolute;
	width: 24px;
	height: 24px;
	background: #00455c;
	color: #fff;
	left: 15px;
	right: auto;
	top: 42%;
	font-size: 10px;
	line-height: 24px;
	font-weight: bold;
	margin: auto;
	border-radius: 50%;
	text-align: center;
}
.solution_service_read{
	color: #00455c;
	font-size: 13px;
	line-height: 24px;
	font-weight: bold;
}
.solution_service_head h4{
	font-size: 20px;
	line-height: 28px;
	transition: .3s;
}
.solution_service_head h4.solution_service_h4_1{
	padding-top: 0;
}
.solution_service_content::before{
	content: "";
	position: absolute;
	width: 92%;
	height: 1px;
	left: 0;
	right: 0;
	margin: auto;
	top: 0;
	background: #e3e3e3;
}
.toggle {
	display: none;
}
.Label,
.solution_service_content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.solution_service_content {
	height: 0;
	overflow: hidden;
}
.toggle:checked + .Label + .solution_service_content {
	height: auto;
	position: relative;
	text-align: left;
	font-size: 13px;
	line-height: 24px;
	padding: 24px 4% 32px;
	transition: all .3s;
}
.solution_service_box input[type="checkbox"]{
	display: none;
}
.Label{
	position: relative;
	cursor: pointer;
}
.Label::after{
	content: "View more";
	position: absolute;
	display: block;
	text-align: center;
	font-size: 10px;
	line-height: 12px;
	width: 90px;
	border: 1px solid #dedede;
	background: #00455c;
	padding: 6px 0;
	border-radius: 20px;
	right: 12px;
	margin: auto;
	top: 40%;
	transition: .3s;
	color: #fff;
}
.Label:hover::after{
	background: #fff;
	color: #00455c;
}
.toggle:checked + .Label::after {
	content: "Close";
}
.Label:hover .solution_service_head h4{
	color: #00455c;
}
@media only screen and (min-width: 750px) {
.solution_service_wrap{
	padding: 32px 0;
}
.solution_service_box{
	width: 32%;
	margin: 0 0 5%;
}
.solution_service_head {
	padding: 32px 0 0;
	height: 130px;
}
.solution_service_number{
	width: 28px;
	height: 28px;
	left: 0;
	right: 0;
	top: -14px;
	font-size: 12px;
	line-height: 28px;
}
.solution_service_head h4.solution_service_h4_1{
	padding-top: 16px;
}
.solution_service_content::before{
	width: 84%;
}
.toggle:checked + .Label + .solution_service_content {
	min-height:310px;
	font-size: 16px;
	line-height: 28px;
	padding: 6% 8% 8%;
}
.Label::after{
	content: "View more";
	position: static;
	display: block;
	text-align: center;
	font-size: 10px;
	line-height: 12px;
	width: 120px;
	border: 1px solid #dedede;
	background: #fff;
	padding: 6px 0;
	border-radius: 20px;
	margin: 0 auto 24px;
	transition: .3s;
	color: #000;
}
.Label:hover::after{
	background: #00455c;
	color: #fff;
}
.toggle:checked + .Label::after {
	content: "Close";
}
}
@media only screen and (min-width: 1000px) {
.solution_service_box{
	width: 32%;
	margin: 0;
}
.toggle:checked + .Label + .solution_service_content {
	min-height:260px;
	padding: 10% 8% 12%;
}
}

#company_solution{
	background: url("/assets/img/theme/top_solution_bg_sp.webp")no-repeat center center;
	background-size: cover;
	padding: 13% 8% 5%;
	margin: 0 0 10%;
	width: 100%;
}
.company_solution_text{
	max-width: auto;
	width: 100%;
	opacity: 0;
}
.company_solution_sub{
	font-size: 2.5vw;
	line-height: 3.5vw;
	color:#777777;
	font-weight: bold;
}
.company_solution_main{
	font-size: 3.8vw;
	line-height: 6.4vw;
	font-weight: bold;
	padding: 1% 0;
	margin-bottom: 6%;
}
@media only screen and (min-width: 750px) {
#company_solution{
	background: url("/assets/img/theme/top_solution_bg.webp")no-repeat center center;
	background-size: cover;
	padding: 60px 6% 30px;
	margin: 0 0 30px;
}
.company_solution_sub{
	font-size: 14px;
	line-height: 24px;
}
.company_solution_main{
	font-size: 20px;
	line-height: 40px;
	padding: 6px 0;
	margin-bottom: 24px;
}
}
/* drawer.css */
/* jquery-drawer v3.2.2 の CSS の写し（MIT）。開閉は src/shared/js/main.js が body の class を付け替える */
/*!
 * jquery-drawer v3.2.2
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
 */

/*!------------------------------------*\
    Base
\*!------------------------------------*/

.drawer-open {
  overflow: hidden !important;
}

.drawer-nav {
  position: fixed;
  z-index: 9000;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  color: #fff;
	padding-top: 6%;
}
.drawer-nav ul li{
}
.drawer-nav ul li a{
}
.drawer-nav li a span {
	font-size:8px;
	line-height: 10px;
	letter-spacing: 0.2em;}
.drawer-brand {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 3.75rem;
  display: block;
  padding-right: .75rem;
  padding-left: .75rem;
  text-decoration: none;
  color: #222;
}

.drawer-menu {
  margin: 0;
  padding: 60px 0;
  list-style: none;
}

.drawer-menu-item {
  font-size: 1rem;
  display: block;
  padding: .75rem;
  text-decoration: none;
  color: #222;
}

.drawer-menu-item:hover {
  text-decoration: underline;
  color: #555;
}

/*! overlay */

.drawer-overlay {
	transition: .3s;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(117,184,207,1);
}

.drawer-open .drawer-overlay {
  display: block;
}

/*!------------------------------------*\
    Top
\*!------------------------------------*/

.drawer--top .drawer-nav {
  top: -100%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--top.drawer-open .drawer-nav {
  top: 0;
}



/*!------------------------------------*\
    Left
\*!------------------------------------*/

.drawer--left .drawer-nav {
  left: -16.25rem;
  -webkit-transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: left .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

.drawer--left.drawer-open .drawer-nav,
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
  left: 0;
}

.drawer--left.drawer-open .drawer-hamburger {
  left: 16.25rem;
}

/*!------------------------------------*\
    Right
\*!------------------------------------*/

.drawer--right .drawer-nav {
right: -100%;
  
}

.drawer--right.drawer-open .drawer-nav,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
	-webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  right: 0;
}

.drawer--right.drawer-open .drawer-hamburger {
  right: 12px;
}

/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/

.drawer-hamburger {
  position: fixed;
  z-index: 9001;
  top: 24px;
	right: 6%;
  display: block;
	box-sizing: border-box;
  box-sizing: content-box;
  width: 18px;
	height: 18px;
  padding: 18px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  border: 0;
  outline: 0;
	border-radius: 50%;
	background: linear-gradient(90deg,#006584,#00b3d8);
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.15);
}

.drawer-hamburger:hover {
  cursor: pointer;
}

.drawer-hamburger-icon {
  position: relative;
  display: block;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  width: 100%;
  height: 0.1em;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #fff;
}
.is-in .drawer-hamburger-icon,
.is-in .drawer-hamburger-icon:before {
	background-color: #666666;
}
.drawer-hamburger-icon{
	width: 100%!important;
	margin-top: -4px;
}

.drawer-hamburger-icon:before{
	position: absolute;
	top: 8px;
	right: 0;
	content: ' ';
	width: 100%!important;
}

.drawer-open .drawer-hamburger-icon {
	margin-top: 0;
	width: 100%!important;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:before {
	top: 0;
	width: 100%!important;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}



/*!------------------------------------*\
    accessibility
\*!------------------------------------*/

/*!
 * Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content
 */

.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/*!
 * Use in conjunction with .sr-only to only display content when it's focused.
 * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 * Credit: HTML5 Boilerplate
 */

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
}

/*!------------------------------------*\
    Sidebar
\*!------------------------------------*/

.drawer--sidebar {
}

.drawer--sidebar .drawer-contents {
}

@media (min-width: 64em) {
  .drawer--sidebar .drawer-hamburger {
    display: none;
    visibility: hidden;
  }

  .drawer--sidebar .drawer-nav {
    display: block;
    -webkit-transform: none;
            transform: none;
    position: fixed;
    width: 12.5rem;
    height: 100%;
  }

  /*! Left */
  .drawer--sidebar.drawer--left .drawer-nav {
    left: 0;
    border-right: 1px solid #ddd;
  }

  .drawer--sidebar.drawer--left .drawer-contents {
    margin-left: 12.5rem;
  }

  /*! Right */
  .drawer--sidebar.drawer--right .drawer-nav {
    right: 0;
    border-left: 1px solid #ddd;
  }

  .drawer--sidebar.drawer--right .drawer-contents {
    margin-right: 12.5rem;
  }

  /*! container */
  .drawer--sidebar .drawer-container {
    max-width: 48rem;
  }
}

@media (min-width: 75em) {
  .drawer--sidebar .drawer-nav {
    width: 16.25rem;
  }

  .drawer--sidebar.drawer--left .drawer-contents {
    margin-left: 16.25rem;
  }

  .drawer--sidebar.drawer--right .drawer-contents {
    margin-right: 16.25rem;
  }

  /*! container */
  .drawer--sidebar .drawer-container {
    max-width: 60rem;
  }
}

/*!------------------------------------*\
    Navbar
\*!------------------------------------*/

.drawer--navbarTopGutter {
  padding-top: 3.75rem;
}

.drawer-navbar .drawer-navbar-header {
  border-bottom: 1px solid #ddd;
}

.drawer-navbar {
  z-index: 102;
  top: 0;
  width: 100%;
}

/*! .drawer-navbar modifier */

.drawer-navbar--fixed {
  position: fixed;
}

.drawer-navbar-header {
  position: relative;
  z-index: 102;
  box-sizing: border-box;
  width: 100%;
  height: 3.75rem;
  padding: 0 .75rem;
  text-align: center;
}

.drawer-navbar .drawer-brand {
  line-height: 3.75rem;
  display: inline-block;
  padding-top: 0;
  padding-bottom: 0;
  text-decoration: none;
}

.drawer-navbar .drawer-brand:hover {
}

.drawer-navbar .drawer-nav {
  padding-top: 3.75rem;
}

.drawer-navbar .drawer-menu {
  padding: 40px 0;
}

@media (min-width: 64em) {
  .drawer-navbar {
    height: 3.75rem;
    border-bottom: 1px solid #ddd;
  }

  .drawer-navbar .drawer-navbar-header {
    position: relative;
    display: block;
    float: left;
    width: auto;
    padding: 0;
    border: 0;
  }

  .drawer-navbar .drawer-menu--right {
    float: right;
  }

  .drawer-navbar .drawer-menu li {
    float: left;
  }

  .drawer-navbar .drawer-menu-item {
    line-height: 3.75rem;
    padding-top: 0;
    padding-bottom: 0;
  }

  .drawer-navbar .drawer-hamburger {
    display: none;
  }

  .drawer-navbar .drawer-nav {
    position: relative;
    left: 0;
    overflow: visible;
    width: auto;
    height: 3.75rem;
    padding-top: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  .drawer-navbar .drawer-menu {
   padding: 40px 0;
  }

  /*! dropdown */
  .drawer-navbar .drawer-dropdown-menu {
    position: absolute;
    width: 16.25rem;
    border: 1px solid #ddd;
  }

  .drawer-navbar .drawer-dropdown-menu-item {
    padding-left: .75rem;
  }
}

/*!------------------------------------*\
    Dropdown
\*!------------------------------------*/

.drawer-dropdown-menu {
  display: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

.drawer-dropdown-menu > li {
  width: 100%;
  list-style: none;
}

.drawer-dropdown-menu-item {
  line-height: 3.75rem;
  display: block;
  padding: 0;
  padding-right: .75rem;
  padding-left: 1.5rem;
  text-decoration: none;
  color: #222;
}

.drawer-dropdown-menu-item:hover {
  text-decoration: underline;
  color: #555;
}

/*! open */

.drawer-dropdown.open > .drawer-dropdown-menu {
  display: block;
}

/*! drawer-caret */

.drawer-dropdown .drawer-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
  transition: opacity .2s ease, -webkit-transform .2s ease;
  transition: transform .2s ease, opacity .2s ease;
  transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/*! open */

.drawer-dropdown.open .drawer-caret {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/*!------------------------------------*\
    Container
\*!------------------------------------*/

.drawer-container {
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 64em) {
  .drawer-container {
    max-width: 60rem;
  }
}

@media (min-width: 75em) {
  .drawer-container {
    max-width: 70rem;
  }
}

@media only screen and (min-width: 750px) {
.drawer-hamburger {
  display: none;}
	}
	

/* animate.css */
/* animate.css（MIT）のうち、元サイトが使っている fadeIn と fadeInUp と .animated だけ。
   .wow の要素は main.js が見えるまで隠し、見えたら動かす（元の wow.js と同じ） */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
  }
  30% {
    opacity: 0;
    transform: translate3d(0, 5%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation-duration: 0.2ms !important;
    transition-duration: 0.2ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* site.css */
/* この作りで足した分。元の見た目は変えない。docs/設計.md「見た目」 */

/* WordPress が出していた読み上げ用の文（投稿ナビゲーションの見出し）と、ページ内リンク */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 元の CSS は *:focus { outline: none } で消している。キーボードで操作する人のために、キーボードのときだけ枠を出す */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
label:focus-visible {
  outline: 2px solid #007ba3;
  outline-offset: 2px;
}

/* WP-PageNavi の既定（元サイトのページ送りの罫線）。テーマの .pagenation が色と幅を上書きする */
.pagenation a,
.pagenation span {
  display: inline-block;
  text-decoration: none;
}
.pagenation .page-numbers.current {
  color: #000;
  font-weight: bold;
}
.pagenation .prev,
.pagenation .next,
.pagenation .dots {
  width: auto;
}

/* 固定バナーの閉じる（元は div。button にしたので見た目の既定を消す。色と形はテーマの規則） */
button.bl_floatingBanner_close {
  appearance: none;
  border: 0;
  padding: 0;
  display: block;
}
/* 元の <font size="5"> <font size="4"> の大きさ */
.font_xl {
  font-size: x-large;
}
.font_l {
  font-size: large;
}

/* 背景動画（元は JS が <video> を差し込む）。autoplay できない端末は何も出さない */
.video-bg video {
  display: block;
}

/* ---------- フォームの 3 段 ---------- */
/* 文字数の残り（元は Contact Form 7 の文字数カウンタ） */
.form_count {
  font-weight: normal;
}
/* 誤りの文（送信に失敗して入力ページに戻ったとき） */
.form_error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #ba4245;
  border-radius: 6px;
  color: #ba4245;
  font-size: 13px;
  line-height: 20px;
  font-weight: bold;
}
.form_noscript {
  margin: 16px 0;
  color: #ba4245;
  font-weight: bold;
}
/* 確認ページの表 */
.confirm_table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
}
.confirm_table th,
.confirm_table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 8px;
  border-bottom: 1px solid #dedede;
  font-size: 14px;
  line-height: 22px;
}
.confirm_table th {
  width: 36%;
  font-weight: bold;
}
.confirm_table td {
  white-space: pre-wrap;
  word-break: break-all;
}
.confirm_empty {
  font-weight: bold;
}
/* 確認ページの 2 つのボタン（送信するは元の送信ボタンの見た目、戻るは灰） */
.contact_bt .form_back {
  background: #999 !important;
  margin-bottom: 16px;
}
.contact_bt .form_back:hover {
  letter-spacing: 0.05em;
}

/* 資料ダウンロードの LP: 見本画像の切り替え（元はページに直書きのスタイル） */
.lp_switcher {
  text-align: center;
}
.lp_switcher img {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto;
}
.lp_switcher_nav {
  margin-top: 10px;
}
.lp_switcher_nav button {
  font-size: 20px;
  border: 2px solid #fff;
  background-color: #bbbbbb;
  color: black;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
}
/* 送信完了ページの見本画像とダウンロードのボタン（元はページに直書きのスタイル） */
.responsive-img {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.download-button {
  display: block;
  width: 300px;
  max-width: 80%;
  margin: 20px auto;
  background-color: #808080;
  color: #ffffff !important;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 30px;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.download-button:hover {
  background-color: #006888;
  transform: scale(1.03);
}
/* 送信完了ページの左の列は全幅（元は style 属性） */
.contact_left.full {
  width: 100%;
}
/* 404 の文（元はページに直書きのスタイル） */
.notfound_text {
  text-align: center;
  padding: 60px 0;
}
/* 元の <font size="6"> の大きさ */
.font_xxl {
  font-size: xx-large;
}