@charset "UTF-8";

/* reset
------------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0;}
article,aside,details,figcaption,figure,hgroup,menu,nav,section {display:block;}
ul,li{list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; text-decoration:none;}
table {border-collapse:collapse; border-spacing:0;}
input, select, img {vertical-align:middle;}
hr {display:block; height:1px; border:0; margin:1em 0; padding:0; border-top:1px solid rgba(0, 0, 0, 0.1);}

html		{font-size: 64.5%; height: 100vh; scroll-behavior: smooth; scroll-padding-top: 85px;}
body		{font-size: 15px; line-height: 2.0; background: #fff fixed; color: var(--main-txt-color); font-family: "Noto Sans JP", 游ゴシック, YuGothic, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif; line-break: normal; word-break: auto-phrase; word-wrap: normal;}
a			{color: var(--title-txt-color); outline: none; transition: color 0.5s;}
a:hover		{color: #007fdd;}
input,select,textarea{font-family: "Noto Sans JP", 游ゴシック, YuGothic, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;}

:root {
  --main-txt-color: #15151e;
  --title-txt-color: #073a65;
}

/* main
------------------------------------------------------------------------------*/

header						{display: flex; justify-content:space-between; width: 100%; height: 45px; padding: 20px 0; position: sticky; top: 0; left: 0; background: rgba(255,255,255, 0.8); backdrop-filter: blur(10px); z-index: 9999;}
header .logo				{padding: 0 0 0 30px;}
header .logo a				{display: block; padding: 5px;}
header .logo img			{height: 40px;}
header .navigation			{display: block; padding: 0 50px 0 0;}
header .navigation ul		{display: flex;}
header .navigation li		{display: block; font-weight: bold; margin: 0 10px;}
header .navigation a		{color: #333; padding:8px 10px; display: block; position: relative;}
header .navigation a:hover	{color: #007fdd;}
header .navigation a::after {position: absolute; left: 0; content: ''; width: 100%; height: 2px; background: #00AFF2; bottom: -1px; transform: scale(0, 1); transform-origin: left top; transition: transform 0.3s;}
header .navigation a:hover::after {transform: scale(1, 1);}

.hamburger-menu							{display: none; width: 50px; height: 50px; position: relative; border: none; background: transparent; appearance: none; padding: 0; cursor: pointer;}
.hamburger-menubar						{display: inline-block; width: 44%; height: 2px; background: #242424; position: absolute; left: 50%; transform: translateX(-50%); transition: .3s;}
.hamburger-menubar:first-child 			{top: 16px;}
.hamburger-menubar:nth-child(2)			{top: 24px;}
.hamburger-menubar:last-child			{top: 32px;}
.hamburger-menu--open .hamburger-menubar				{top: 50%;}
.hamburger-menu--open .hamburger-menubar:first-child	{transform: translateX(-50%) translateY(-50%) rotate(45deg);}
.hamburger-menu--open .hamburger-menubar:last-child		{transform: translateX(-50%) translateY(-50%) rotate(-45deg);}
.hamburger-menu--open .hamburger-menubar:nth-child(2)	{display: none;}

footer						{position: relative; padding: 30px 0 40px; font-size: 1.2rem; border-top: 1px solid #efefef; background: rgba(255,255,255, 0.8); text-align: center; margin: 100px 0 0 0;}
footer i					{padding-right: 4px;}
footer ul li				{display: inline-block; margin: 0 10px;}
.copyright					{padding: 20px 0 0 0;}
.pagetop					{display: none; position: fixed; right: 15px; bottom: 15px; }
.pagetop a					{height: 50px; width: 50px; background: #ffffff80; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2;}
.pagetop p					{height: 10px; width: 10px; border-top: 3px solid #000; border-right: 3px solid #000; transform: translateY(20%) rotate(-45deg);}

h1							{font-family: "Zen Maru Gothic", serif; font-size: 5rem; font-weight: 100; line-height: 1.2; margin-bottom: 40px;}
h1 strong					{font-size: 4.3rem; font-weight: 900; letter-spacing: -0.2rem;}
h1 strong:first-of-type:after{content:'·';}
h2							{font-size: 2rem; color: var(--title-txt-color);}
h3							{font-size: 2rem; font-weight: 600; line-height: 1.5;}
h3+hr						{height: 1px; width: 60%; margin: 1rem auto 3rem; border-top: 4px solid #fff;}
h4							{font-size: 3rem; color: var(--title-txt-color);}

a.all						{display: contents;}
img.img						{border-radius: 30px;}

.button						{margin: 30px auto;}
.button a					{display: inline-block; text-align: center; padding: 16px 50px; line-height: 1; text-decoration: none !important; color: #fff; background: var(--title-txt-color); border: 1px solid var(--title-txt-color); font-size: 1.5rem; border-radius: 30px; transition: 0.3s;}
.button a:hover				{color: var(--title-txt-color); background: #fff;}
.button a i					{margin-left: 8px;}

.main						{position: relative; min-height: calc(100vh - 210px);}
.main a						{text-decoration: underline;}
.box						{width:80vw; padding: 30px 0; margin: 20px auto;}
.box-2c						{width:80vw; display: flex; justify-content: center; align-items: center; margin: 20px auto;}
.box-2c .txt				{width: 50%;}
.box-2c .img				{width: 50%;}
.box-2c .img img			{width: 100%; border-radius: 5px;}
.box-2c .space				{width: 50px;}
.card						{width:calc(85vw - 100px); background: rgba(255,255,255, 0.7); backdrop-filter: blur(5px); padding: 40px; margin: 20px auto; border-radius: 20px;}
.card p strong				{background: #fff; font-size: 3rem; color: var(--main-txt-color);}
.card p span				{background: #fff; color: var(--main-txt-color);}
.card p span.none			{background: transparent;}
.card p.circle				{text-align: right;}
.card p.circle i			{font-size: 2rem; padding: 14px; background: #fff; border-radius: 50%;}

.pagecover					{position: relative; overflow: hidden; border-radius: 20px; color: #fff; text-align: center; padding: 15% 0;}
.pagecover:after			{position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; left:0; transition: all .3s ease-out; z-index: -1;}
.pagecover h5				{font-size: 3rem; color: #fff;}
.company .pagecover:after	{background: url('../img/cover-company.jpg'); background-size: cover;}
.business .pagecover:after	{background: url('../img/cover-business.jpg'); background-size: cover;}
.recruit .pagecover:after	{background: url('../img/cover-recruit.jpg'); background-size: cover;}
.contact .pagecover:after	{background: url('../img/cover-contact.jpg'); background-size: cover;}

table.list					{width: 70vw; margin: 0 auto;}
table.list th				{padding: 20px 10px; border-bottom: 1px solid #a7bad5; color: #7084b1; font-weight: normal; vertical-align: middle;}
table.list td				{padding: 20px 10px; border-bottom: 1px solid #dde5f1;}

#vantaanimation				{position: fixed; margin-top: -85px;}
#vantaanimation canvas		{overflow: hidden; margin: 0 auto;}

.home						{margin-top: 50px; position: relative;}
.home h3					{font-size: 3rem; color: #00AFF2;}
.home .read					{font-size: 1.7rem;}
.home .card					{display: flex; background: rgba(255,255,255, 0.0);}

.home_gx,
.home_dx,
.home_healthcare			{position: relative; overflow: hidden;}
.home_gx:after,
.home_dx:after,
.home_healthcare:after		{background: url('../img/business_gx.jpg'); background-size: cover; position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; left:0; transition: all .3s ease-out; z-index: -1;}
.home_dx:after				{background: url('../img/business_dx.jpg'); background-size: cover;}
.home_healthcare:after		{background: url('../img/business_healthcare.jpg'); background-size: cover;}
.home_gx:hover:after,
.home_dx:hover:after,
.home_healthcare:hover:after{opacity: .8; transform: scale(1.05);}

.mission					{text-align: center;}
.mission em					{font-size: 1.2rem; color: #7084b1;}

/* Fade in
------------------------------------------------------------------------------*/
.u-fade-in					{opacity: 0;}
.u-fade-in.is-active		{transition: .8s; opacity: 1;}

.u-fade-type-up				{transform: translateY(50px); opacity: 0;}
.u-fade-type-up.is-active	{transition: .6s; transform: translateY(0); opacity: 1;}

.u-fade-type-rl				{transform: translateX(50px); opacity: 0;}
.u-fade-type-rl.is-active	{transition: .6s; transform: translateX(0); opacity: 1;}

.u-fade-type-lr				{transform: translateX(-50px); opacity: 0;}
.u-fade-type-lr.is-active	{transition: .6s; transform: translateX(0); opacity: 1;}

.u-fade-type-zoom			{transform: scale(0.8); opacity: 0;}
.u-fade-type-zoom.is-active	{transition: .6s; transform: scale(1); opacity: 1;}


/* form
------------------------------------------------------------------------------*/
input						{margin: 0; padding: 10px; border: 0; outline: none;}

input,
select,
textarea					{color: var(--main-txt-color); background: #fff; font-size: 16px; width: calc(100% - 20px); padding: 10px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; -webkit-transition: all 0.5s; transition: all 0.5s;}
select						{width: 100%;}
textarea					{height: 200px;}

input:focus,
select:focus,
textarea:focus				{outline: 1px solid #7084b1;}

.buttons					{text-align: center;}

input[type="button"],
input[type="submit"],
input[type="reset"]			{background: var(--title-txt-color); color: #fff; border: 1px solid var(--title-txt-color); border-radius: 30px; width: auto; padding: 12px 30px; cursor: pointer; transition: 0.3s;}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover	{color: var(--title-txt-color); background: #fff;}

.radioItem							{display: flex; align-items: center; column-gap: 4px; width: fit-content; line-height: 1; cursor: pointer;}
.radioItem:not(:last-of-type)		{margin-bottom: 15px;}
input.radioButton					{appearance: none; position: relative; width: 18px; height: 18px; border: 1px solid var(--title-txt-color); border-radius: 9999px; cursor: pointer;}
input.radioButton:checked::after	{content: ""; position: absolute; inset: 0; width: 10px; height: 10px; margin: auto; border-radius: 9999px; background-color: var(--title-txt-color);}

.hissu						{color: #ff0000;}


/* modal
------------------------------------------------------------------------------*/
.overlay		{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.6); display: none; z-index: 99999;}
.modal			{max-width: 60vw; width: 80vw; padding: 15px 20px; background: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px; display: none; z-index: 99999;}
.modal .close	{position: absolute; top: 15px; right: 20px; cursor: pointer; font-size: 20px; width: 45px; text-align: center;}
.modal article	{overflow: auto; max-height: calc( 80vh - 70px ); padding: 10px; margin: 10px 0;}

/* アコーディオン
------------------------------------------------------------------------------*/
.accordion .toggle								{display: none;}
.accordion .Label								{font-size: 2.0rem; padding: 0.5em; display: block; border-bottom: 1px solid #ddd; border-left: 10px solid #f3f3f3; cursor: pointer;}
.accordion .Label::before						{content:""; width: 6px; height: 6px; border-top: 2px solid var(--main-txt-color); border-right: 2px solid var(--main-txt-color); -webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 10px; transform: rotate(135deg);}
.accordion .Label,
.accordion .content								{-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.5s;}
.accordion .content								{height: 0; margin-bottom:10px; padding:0 20px; overflow: hidden;}
.accordion .toggle:checked + .Label + .content	{height: auto; padding:20px ; transition: all 0.5s;}
.accordion .toggle:checked + .Label::before		{transform: rotate(-45deg) !important;}

/* common
------------------------------------------------------------------------------*/
.clear		{clear: both;}

.f-serif	{font-family: "Shippori Mincho B1", serif;}
.f-marug	{font-family: "Zen Maru Gothic", serif;}
.fb			{font-weight:bold;}

.txt-c		{text-align:center;}
.txt-r		{text-align:right;}
.center		{margin:0 auto;}
.mg10		{margin:10px;}
.mg20		{margin:20px;}
.mg30		{margin:30px;}
.mg40		{margin:40px;}
.mg50		{margin:50px;}
.mgtb10		{margin:10px 0;}
.mgtb20		{margin:20px 0;}
.mgtb30		{margin:30px 0;}
.mglr10		{margin:0 10px;}
.mglr20		{margin:0 20px;}
.mglr30		{margin:0 30px;}
.mgr10		{margin-right:10px;}
.mgl10		{margin-left:10px;}
.mgt10		{margin-top:10px;}
.mgt20		{margin-top:20px;}
.mgt30		{margin-top:30px;}
.mgt40		{margin-top:40px;}
.mgt50		{margin-top:50px;}
.mgt60		{margin-top:60px;}
.mgt70		{margin-top:70px;}
.mgt80		{margin-top:80px;}
.mgt90		{margin-top:90px;}
.mgt100		{margin-top:100px;}
.mgb10		{margin-bottom:10px;}
.mgb20		{margin-bottom:20px;}
.mgb30		{margin-bottom:30px;}
.mgb40		{margin-bottom:40px;}
.mgb50		{margin-bottom:50px;}
.mgb60		{margin-bottom:60px;}
.mgb70		{margin-bottom:70px;}
.mgb80		{margin-bottom:80px;}
.mgb90		{margin-bottom:90px;}
.mgb100		{margin-bottom:100px;}
.pd10		{padding:10px;}
.pd20		{padding:20px;}
.pd30		{padding:30px;}
.pd40		{padding:40px;}
.pd50		{padding:50px;}
.pdt5		{padding-top:5px;}
.pdt10		{padding-top:10px;}
.pdt20		{padding-top:20px;}
.pdt30		{padding-top:30px;}
.pdt40		{padding-top:40px;}
.pdt50		{padding-top:50px;}
.pdt60		{padding-top:60px;}
.pdl10		{padding-left:10px;}
.pdl20		{padding-left:20px;}
.pdl30		{padding-left:30px;}
.pdl40		{padding-left:40px;}
.pdl50		{padding-left:50px;}
.pdl60		{padding-left:60px;}
.pdr10		{padding-right:10px;}
.pdr20		{padding-right:20px;}
.pdr30		{padding-right:30px;}
.pdr40		{padding-right:40px;}
.pdr50		{padding-right:50px;}
.pdr60		{padding-right:60px;}

ul.circle li		{list-style: disc; margin-left: 25px;}