@charset "utf-8";


/*--------------------------------------------------------------------
メインイメージ
--------------------------------------------------------------------*/
.main_image {
	width: 100%;
	position: relative;
	z-index: -1;
	overflow: hidden;
	background-image: url("../images/top_img.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	padding-bottom: 2em;
}
/* --アニメーション背景-- */
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 97%;
    overflow: hidden;
}
.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}
.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
/* ------ */

.h_logo {
	visibility: hidden;
	position: relative;
	left: 0;
	top: -60px;
}
.h_chach {
	margin-top: 2em;
	margin-right: 5em;
}
.h_chach h1 {
	position: relative;
	left: 7%;
	line-height: 1.1;
	height: fit-content; /* テキスト量に合わせる */
	background: linear-gradient(to bottom, rgba(4,102,202,0.9) 0%, rgba(66,162,250,0.9) 35%, rgba(0,55,140,0.9) 100%);

	-webkit-background-clip: text; /* 背景を文字にクリップ */
	-webkit-text-fill-color: transparent; /* 文字色を透明に */
	text-fill-color: transparent; /* 文字色を透明に（非標準） */
}
.h_chach p {
	position: relative;
	left: 7%;
	font-size: 23px;
	font-weight: 600;
	padding-top: 0.5em;
}


/*--------------------------------------------------------------------
背景
--------------------------------------------------------------------*/

.back01 {
	background-image: url("../images/back01.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
}
.back02 {
	background-image: url("../images/back02.png");
	background-repeat: repeat;
}
.back03 {
	background-image: url("../images/back_canvas.jpg");
	background-repeat: repeat;

}


/* AI動画（ご挨拶） */
.js-modal-btn {
	display: block;
	border: none;
	background: #fff;
	border: 2px solid #222222;
	padding: 0.5em 2em;
	border-radius: 60px;
	font-size: 110%;
	font-weight: bold;
	color: #222222;
	cursor: pointer;
	transition: 0.5s;
}
.js-modal-btn img {
	max-width: 100px;
}
.js-modal-btn:hover {
	background: #a9d2e9;
}


/*--------------------------------------------------------------------
メイン選択ボタン
--------------------------------------------------------------------*/
.mainbtn_fbox {
	display: flex;
	flex-diretion: row;
	margin-top: 2em;
	box-shadow: 0 3px 3px 2px #ddd;
}
.topm_select {
	display: inline-block;
	width: 100%;
	text-decoration: none;
	outline: none;
	background-color: #1064b0;
	position: relative;
	transition: color 0.5s ease;
	display: flex;
	justify-content: center;
}
.topm_select h3 {
	align-self: center;
	font-size: 120%;
	z-index: 2;
	padding: 0 1em;
}
.topm_select:hover {
}
.topm_select:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}
.topm_select::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #00378c;
	transform: scaleX(0);
	transform-origin: right;
	transition: all 0.5s ease;
	transition-property: transform;
}


/*--------------------------------------------------------------------
会社概要
--------------------------------------------------------------------*/

.flex_cback {
	display: flex;
	justify-content: space-between;
	position: relative;
}
.flex_outline {
	width: 50%;
}
.flex_chart {
	width: 46%;
}
.f_container {
	margin: 4%;
}

.profile_t {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px 8px;
	font-size: 94%;
}
.profile_t th, .profile_t td {
	padding: 1em 0.6em;
	border: 2px solid #ebebeb;
}
.profile_t th {
	background: #ffe8df;
	border-radius: 20px 0 0 20px;
}
.profile_t td {
	background: #fff;
	border-radius: 0 20px 20px 0;
}

.chara_img {
	position: absolute;
	right: 0;
	bottom: 0;
}


/*--------------------------------------------------------------------
セミナー
--------------------------------------------------------------------*/

.seminar_box {
	background: #fff;
	border-radius: 20px;
	padding: 5%;
}
.seminar_flex {
	display: flex;
	justify-content: space-around;
	margin-top: 1em;
}
.s_f_left {
	padding-right: 1em;
}
.s_f_table {
	width: 100%;
	border-spacing: 0 10px;
	margin: 1em 0;
}
.s_f_table th, .s_f_table td {
	padding: 0.8em 0.5em;
	box-shadow: 0 2px 2px 1px #ddd;
}
.seminar_flex table th {
	background: #5ac3c5;
	color: #fff;
}
.seminar_flex table td {
	background: #fdfdfd;
}
.s_f_p {
	text-align: center;
	font-weight: 600;
}
.s_f_p span {
	border-bottom: 2px dotted #fd8c9c;
}


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


/* ▼表示領域が960px未満の場合 */
@media screen and (max-width: 959px) {
   .mainbtn_fbox { flex-direction:column; }
   .topm_select h3 { padding:1em; text-align:center; }

   .flex_cback { flex-wrap:wrap; }
   .flex_outline { width:100%; }
   .flex_chart { width:100%; }

   .seminar_flex { flex-wrap:wrap; }
   .s_f_left { padding:0 0 1em 0; }
}
/* ▼表示領域が800px未満の場合 */
@media screen and (max-width: 799px) {
   .top_logo { width:45%; }
   .h_logo { width:45%; }
}
/* ▼表示領域が700px未満の場合 */
@media screen and (max-width: 699px) {
   .main_image { background-size:250%; background-position:72% center; }
   .h_chach h1 { position:static; left:0; text-align:center; line-height:1.7; }
   .h_chach p { position:static; left:0; text-align:center; line-height:1.5; font-size:17px; }
   .h_chach { margin-left:4%; margin-right:4%; }
}
/* ▼表示領域が600px未満の場合 */
@media screen and (max-width: 599px) {
   .subtitle_w img { width:65px; }

   .f_c_aken { width:140px; }
}
/* ▼表示領域が400px未満の場合 */
@media screen and (max-width: 399px) {
   .subtitle_w img { width:40px; }
   .subtitle_w { padding:0.5em 0.8em; }
}