@charset "utf-8";

/* bootstrap */
@import url("bootstrap5/bootstrap.min.css");

body {background-color: whitesmoke;}
/* ページ内スムースリンク */
html {scroll-behavior: smooth;}
section {
	scroll-margin-top: 60px;
}

h3 {font-size: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem);} /* 320-15-1200-25 */
h3 span {font-size: 0.9em;}

.f-15 {font-size: 1.5rem;}
.f-15-12 {font-size: clamp(1.2rem, 1.091rem + 0.55vw, 1.5rem)}/* 320-12-1600-15 */
.f-15-10 {font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);}/* 320-10-1200-15 */

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.mw-1600 {max-width: 1600px;}
.mw-1200 {max-width: 1200px;}
.mw-1100 {max-width: 1100px;}
.mw-900 {max-width: 900px;}
.mw-620 {max-width: 620px;}
.mw-600 {max-width: 600px;}
.mw-400 {max-width: 400px;}
.mw-300 {max-width: 300px;}
.w-170 {width: 170px;}
.w-50p {width: 50px;}

.w-fit {width: fit-content;}



/* header------------------------------------------- --------- */
.header-banner {
	padding: 0 66px 0 16px;
	background-color: rgba(255, 255, 255, 1);
}

/* PC時のli */
.gnavi {
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}
.gnavi ul li {
	display: inline-block;
	width: 90px;
	text-align: center;
}
.gnavi li a{
    display: block;
	padding:0px 10px;
	margin: 0px;
    text-decoration: none;
    color: #333;
}
/* hover時のアンダーライン */
.gnavi li a{
	position: relative;/*線の基点とするためrelativeを指定*/
}
.gnavi li.current a,
.gnavi li a:hover{
	color:#0481A2;
}
.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/* ハンバーガーメニュー */
.menu-icon {
	width: 40px;
	height: 30px;
	position: fixed; /* ← fixedにして常に右上固定 */
	top: 15px;
	right: 10px;
	cursor: pointer;
	z-index: 3;
	display: inline-block;
}
.menu-icon span {
	display: block;
	height: 4px;
	margin: 6px 0;
	background: #333;
	border-radius: 2px;
	transition: 0.4s;
}
/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
	transform: translateY(10px) rotate(45deg); background-color: white; 
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
	opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg); background-color: white; 
}
/* オーバーレイ背景 */
.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	pointer-events: none;
	transition: 0.4s;
	z-index: 1;
}
#menu-toggle:checked ~ .overlay {
	opacity: 1;
	pointer-events: auto;
}
/* メニュー本体（右から出す） */
.menu {
	position: fixed;
	top: 0;
	right: -250px; /* ← 初期位置を右へ */
	width: 250px;
	height: 100%;
	background: rgba(0,0,0,0.2);
	box-shadow: 2px 0 8px rgba(0,0,0,0.2);
	transition: right 0.4s ease;
	z-index: 2;
}
 /* ← 開いたときは右0へ */
#menu-toggle:checked ~ .menu {right: 0;}
.menu ul {
	list-style: none;
	padding: 60px 20px;
}
.menu li {margin: 20px 0;}
.menu a {
	text-decoration: none;
	color: white;
	font-size: 1.2rem;
	transition: color 0.3s;
}
.menu a:hover {color: #007bff;}
/* /ハンバーガーメニュー */
/* /header------------------------------------------- --------- */

/* top--------------------------------------------------------- */
.grid-box-top {
	display: grid;
	height: 100svh;
	grid-template-rows: 13% 74% 13%;
	grid-template-columns: 1fr;
}

.grid-item-top:nth-child(1) {
	grid-row: 1/4;
	grid-column: 1/2;
}
.grid-item-top:nth-child(2) {
	grid-row: 1/4;
	grid-column: 1/2;
}
.grid-item-top:nth-child(3) {
	grid-row: 2/3;
	grid-column: 1/2;
}
.grid-item-top:nth-child(4) {
	grid-row: 1/4;
	grid-column: 1/2;
}
.grid-item-top:nth-child(5) {
	grid-row: 1/4;
	grid-column: 1/2;
}
/* ドット部分 */
.layer-dot {
    background-color: rgba(0, 0, 0, .2);
    background-image: radial-gradient(#000 10%, transparent 0);/* 円形グラデーション 開始色,終了色 */
    background-size: 3px 3px;
}

/* 流れる文字 */
.f-40-17 {
	font-size: clamp(1.7rem, 0.864rem + 4.18vw, 4rem);/* 320-17-1600-40 */
	line-height: 1;
	color: white;
}
.f-40-17 span {font-size: 0.9em;}

.flowing-a {
	white-space: nowrap;/* 折り返しをしない */
	overflow: hidden;
	animation: flowing-anim-a 15s forwards linear;/* 再生後は、最後のスタイルが適用　変化 */
	animation-iteration-count: infinite;
}
.flowing-b {
	white-space: nowrap;
	overflow: hidden;
	animation: flowing-anim-b 15s forwards linear;
	animation-iteration-count: infinite;
}
@keyframes flowing-anim-a {
	0% {width: 0%;}
	33% {width: 100%;}
	100% {width: 100%;}
}
@keyframes flowing-anim-b {
	0% {width: 0%;}
	33% {width: 0%;}
	66% {width: 100%;}
	100% {width: 100%;}
}

/* トップボタン */
.button-top {
	display: inline-block;
	font-size: 1rem;
	width: 170px;
	padding: 15px;
	margin: 10px auto;
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.3);
	text-align: center;
	font-weight: bold;
	border: solid 2px white;
	-webkit-transition: .4s;
	transition: .4s;
	&:hover{
		color : #ffffff;
		background-color: rgba(0, 64, 255, 0.7);
	}
}

/* 回転 */
.load {animation: spin 10s linear infinite;}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}

.pb-0-50 {padding-bottom: 0px;}
@media screen and (max-width: 575px) {
.pb-0-50 {padding-bottom: 50px;}
}
/* /top--------------------------------------------------------- */

/* トピックス */
.news-box {border-bottom: solid 1px silver;}
.nwes-box-icon-1 {color: white; background-color: #888;border-radius: 999px;} /* おしらせ */
.f-08em {font-size: 0.8rem;}
/* /トピックス */

/* 業務効率化 */
.grid-box-efficiency {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 30% 5% 65%;
}
@media screen and (max-width: 768px) {
.grid-box-efficiency {
	display:block;
}
}
.grid-item-efficiency:nth-child(1) {
	grid-row: 1/2;
	grid-column: 1/3;
}
.grid-item-efficiency:nth-child(2) {
	grid-row: 1/2;
	grid-column: 2/4;
	background: url(image/quotqtion-a.svg) top/contain no-repeat, url(image/quotqtion-b.svg) bottom/contain no-repeat;
}
h2 {font-size: 2.5rem;}
h2 span {font-size: 0.9em;}
.bg-efficiency {background-color: bisque;}

/* スタッフの画像を小さくする */
.w-100-30 {width: 100%;}
@media screen and (max-width: 575px) {
.w-100-50 {width: 50%;}
}
/* /業務効率化 */

/* 提供サービス */
/* /提供サービス */

/* セミナー */
.h5-course {
	font-size: 2rem;
	background-color: white;
}
.seminar-bg-1 {background-color: aquamarine;}
.seminar-bg-2 {background-color: bisque;}
.seminar-bg-3 {background-color: darkcyan;}
/* /セミナー */

/* コンサルティング */
.consulting-box {
	border: solid 1px slategray;
	border-radius: 10px;
}
.w-15p {width: 15%;}
/* /コンサルティング */

/* 導入の流れ */
.w-10p {width: 10%;}
.no-box {
	background-color: darkcyan;
	color: white;
	font-weight: bold;
}
.flow-font {
	width: 90%;
	line-height: 0.9;
}
.flow-title {
	color: navy;
	padding-right: 1rem;
}
.f-07 {font-size: 0.7em;}
/* 導入の三角 */
.triangle {
	background: darkcyan;
	width: 100%;
	aspect-ratio: 3/1;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* /導入の流れ */

/* よくある質問 */
/* /よくある質問 */

/* BLOG */
/* /BLOG */

/* お問い合わせ */
.contact-box {
	border: solid #c0c0c0 1px;
	border-radius: 10px;
}
.contact-icon {
	background-color: #c0c0c0;
	aspect-ratio: 1/1;
	height: 100px;
}
.contact-box p {line-height:1.3rem;}
.contact-box p span {font-size: 1.8rem;}
.contact-bg-color :hover {background-color: white;}
/* /お問い合わせ */




.button {
	display: inline-block;
	font-size: 1rem;
	width: 170px;
	padding: 15px;
	margin: 10px auto;
	color: gray;
	background-color: rgba(255, 255, 255, 1);
	text-align: center;
	font-weight: bold;
	border: solid 2px grey;
	-webkit-transition: .4s;
	transition: .4s;
	&:hover{
		color : white;
		border: solid 2px white;
		background-color: rgba(0, 64, 255, 0.7);
	}
}

/* omotenashi.html--------------------------------------------------------- */
/* labelの色 */
.mail-label-bg {
	background-color: lavender;
	/* 文頭の矢印 */
	&:before {
		content: "";
		display: inline-block;
		content: url("image/icon-mail-arrow.svg");
		vertical-align: middle;
		padding-right: 5px;
	}
}
/* /omotenashi.html--------------------------------------------------------- */