@charset "utf-8";


/*--------------------------------------------------------------------
レイアウト
--------------------------------------------------------------------*/
html {
	height: 100%;
	overflow-y: scroll;
}
body {
	margin: 0em;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 18px;
	line-height: 1.5;
	color: #222222;
	background-image: url("images/back_main.jpg");
	background-size: cover;
}
.container {
	width: 1200px;
	margin: auto;
}
.container960 {
	width: 960px;
	margin: auto;
}
.half_box {
	width: 50%;
}
.trisect_box {
	width: 33.3%;
}
.waku90 {
	width: 90%;
	margin: 0 auto;
}



/*--------------------------------------------------------------------
文字
--------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6,p {
	padding: 0;
	margin: 0;
}
h1 {
	font-size: 56px;
	font-weight: 900;
	letter-spacing: 0.1em;
}
h2 {
	font-size: 21px;
	margin-bottom: 2em;
	position: relative;
	text-shadow: 0 0 2px white;
	z-index: 0;
}
h2:before {
	content: "";
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	top: 50%;
	/* border: dashed 1px white; */
	left: -50px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: -1;
}
.back_wh2:before {
	background: rgba(255,255,255, 0.7);
}
.back_gh2:before {
	background: rgba(225,225,225, 0.7);
}
h3 {
	font-size: 18px;
}



.blue_text {
	color: #0566ca;
}
.red_text {
	color: #ff4f5e;
}
.danraku {
	text-indent : -1em;
	padding-left : 1em;
	padding-top: 3px;
	padding-bottom: 3px;
	margin: 0;
}

.icon {
	padding-bottom: 1.2em;
	padding-right: 0.5em;
}


/*--------------------------------------------------------------------
リンク
--------------------------------------------------------------------*/
a,
a:link {
	text-decoration: underline; color: #0566ca;
	font-weight: bold; 
}

a:visited {
	text-decoration: underline; color: #0566ca;
}

a:hover,
a:active {
	text-decoration: underline; color: #00378c;
}

/* リンク02 薄ピンク */
a.link02 {
	text-decoration: none; color: rgb(255,210,250);
	font-weight: bold; 
}
a.link02:hover,
a.link02:active {
	text-decoration: underline; color: rgb(255,210,250);
}


/*--------------------------------------------------------------------
画像
--------------------------------------------------------------------*/
img {
	/* Responsive images (ensure images don't scale beyond their parents) */
	max-width: 100%;
	/* Part 1: Set a maxium relative to the parent */
	width: auto\9;
	/* IE7-8 need help adjusting responsive images */
	height: auto;
	/* Part 2: Scale the height according to the width, otherwise you get stretching */
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}




/*--------------------------------------------------------------------
メイン（トップページ）
--------------------------------------------------------------------*/

/* ヘッダー */
header {
	width: 100%;
	position: relative;
	background-image: url("images/top_img.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	padding-bottom: 2em;
	overflow: hidden;
}
/* --アニメーション背景-- */
.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 {
	position: relative;
	z-index: 2;
	left: 5%;
	padding-top: 20px;
}
.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; /* 文字色を透明に（非標準） */
}

/* 背景 */

.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;

}
.flex_back {
	width: 100%;
	display: flex;
}
.flex_red {
	width: 50%;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(252,140,156,1) 35%);
}
.flex_blue {
	width: 50%;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(30,150,200,1) 35%);
}
.f_container {
	margin: 4% 8%;
}


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


/* 主な事業内容 */

.f01-item {
	width: 90%;
	margin: 0 auto;
	margin-bottom: 2em;
	background: #fff;
	padding: 2em 1%;
	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;
	border: 3px solid #ff4f5e;
}
.f01-item::before {
	position: absolute;
	top: -9px;
	left: -9px;
	width: 100%;
	height: 100%;
	border: 3px solid #212121;
	content: '';
}
.f01-item table {
	width: 100%;
}
.f01-item table th {
	text-align: center;
	width: 38%;
	font-size: 110%;
	font-weight: 600;
}
.f01-item table p:first-letter {
	color: #ff4f5e;
}

/* 対象となる法人・団体 */
.f02-item {
	display: flex;
	justify-content: space-around;
}
.f02-item-naka {
	width: 30%;
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 2px 2px 3px rgba(0,0,0,0.2);

	display: flex;
	flex-direction: column;
}
.f02-item h3 {
	width: 100%;
	border-radius: 30px 30px 0 0;
	padding: 1em 0;

	text-align: center;
	flex-grow: 1;
}
.f02-pink {
	background: #f8cbc5;
}
.f02-yellow {
	background: #f1f3b7;
}
.f02-blue {
	background: #cfeaed;
}
.f02-item p {
	padding: 1.5em 5%;
}

/* 当社の強み */
.f03-item {
	display: flex;
	justify-content: space-around;
}
.f03-item-naka {
	width: 50%;
}
.f03-photo {
	background-image: url("images/photo01.png");
	background-repeat: no-repeat;
	background-position: right;
	min-height: 280px;
	border-radius: 10px;
}

/* 今後の展望 */
.f04-item {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-around;
}
.f04-item-naka {
	width: 47%;
	margin-left: 3%;
}
.f04-photo {
	background-image: url("images/photo02.png");
	background-repeat: no-repeat;
	background-position: center;
	min-height: 280px;
	border-radius: 10px;
}

/* AI活用場面 */

.subtitle_w {
	padding: 0.5em 1.5em;
	background:
	linear-gradient(135deg, transparent 20px, #fff 0) top left,/*重なり順番1*/
	linear-gradient(-135deg, transparent 20px, #fff 0) top right,/*重なり順番2*/
	linear-gradient(-45deg, transparent 20px, #fff 0) bottom right,/*重なり順番3*/
	linear-gradient(45deg, transparent 20px, #fff 0) bottom left/*重なり順番4*/;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
.flex01 {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.use_box {
	box-sizing: border-box;
	width: 48%;
	background: #ffba3c;
	border-radius: 12px;
	padding: 0.8em;
	border: 2px solid #ffdc9a;
	border-bottom: solid 6px #e69619;
	font-weight: 700;
	text-align: center;
	margin-bottom: 4%;
}

.example_t {
	width: 100%;
	border-collapse: separate;
	border-spacing: 5px 10px;
}
.example_t th {
	background: #fff;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	font-size: 150%;
	font-weight: 800;
}
.example_t td {
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 5%, rgba(255,255,255,1) 90%);
	border-radius: 0 40px 40px 0;
	padding: 0 1.5em;
}
.example_t span {
	color: #ff5459;
	font-size: 110%;
	font-weight: 600;
}

.ability_t {
	margin-top: 2.5em;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 82%;
	background: rgba(255,255,255,0.85);
}
.ability_t thead {
	background: #fff;
}
.ability_t th, .ability_t td {
	border: 1px solid #ddd;
}
.ability_t span {
	color: #ff5459;
	font-weight: 800;
}
.ability_t tbody td:nth-child(2) {
	text-align: center;
}
.ability_t tbody td:nth-child(3) {
	padding-left: 0.5em;
	padding-right: 0.5em;
}
.ability_t tbody td {
	padding: 0.3em 0;
}
.a_t01 {
	background: rgba(255,220,225,0.85);
}
.a_t02 {
	background: rgba(210,232,253,0.85);
}
.a_t03 {
	background: rgba(218,216,252,0.85);
}
.a_t04 {
	background: rgba(255,231,212,0.85);
}
.a_t05 {
	background: rgba(223,249,225,0.85);
}
.a_t06 {
	background: rgba(200,240,230,0.85);
}



/* 会社概要 */

.profile_t {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px 8px;
}
.profile_t th, .profile_t td {
	padding: 1em;
	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;
}

.flex_chart {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

/*  フッター */

.footer_f {
	width: 100%;
	display: flex;
}
.ff-item-a {
	width: 40%;
}
.ff-item-b {
	width: 60%;
	font-size: 117%;
}

#footer	{
	clear: both;
}
#footer small {
	font-size: 12px;
	font-weight: bold;
	line-height: 1.3;
	padding-bottom: 20px;
}
/* ▼表示領域が600px未満の場合 */
@media screen and (max-width: 599px) {
   #footer small { font-size: 10px; }
}






/*--------------------------------------------------------------------
ページトップへ戻るボタン
--------------------------------------------------------------------*/

.pagetop {
	position: fixed;
	bottom: 65px;
	right: 30px;
	margin: 0 auto;
	z-index: 200;
}
.pagetop a {
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	display: block;
	line-height: 1;
	font-size: 20px;
	padding-top: 15px;
	border-radius: 50px;
	width: 50px;
	height: 35px;
	border: 3px solid #fff;
	background-color: #ff5459;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
.pagetop a:hover {
	text-decoration: none;
	opacity: 0.7;
}




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

/* ▼表示領域が960px以上の場合 */
@media screen and (min-width: 960px) {

}

/* ▼表示領域が1200px未満の場合 */
@media screen and (max-width: 1199px) {
   .container { width:92%; margin-left:4%; margin-right:4%; }
}
/* ▼表示領域が960px未満の場合 */
@media screen and (max-width: 959px) {
   .container960 { width:92%; margin-left:4%; margin-right:4%; }
   h1 { font-size:220%; }

   .flex_back { flex-wrap:wrap; }
   .flex_red { width:100%; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(253,140,156,1) 15%, rgba(253,140,156,1) 85%, rgba(255,255,255,0) 100%); }
   .flex_blue { width:100%; background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(30,150,200,1) 15%); }
}
/* ▼表示領域が800px未満の場合 */
@media screen and (max-width: 799px) {
   .f01-item { padding:2em 3%; }
   .f01-item table tr, .f01-item table th, .f01-item table td { display:block; }
   .f01-item table th { width:100%; }

   .flex01 { flex-wrap:wrap; }
   .f02-item { flex-wrap:wrap; }
   .f02-item-naka { display:block; width:100%; margin-bottom:1.5em; }
   .f02-item h3 { float:left; width:35%; height:6em; border-radius:30px 0 0 30px; }
   .f02-item p { float:left; width:55%; padding:1.5em 5%;  }

   .f03-item { flex-direction:column; }
   .f03-item-naka { width:100%; }
   .f03-photo { text-align:center; background-position:50px right; min-height:210px; margin-top:1em; }

   .f04-item { flex-direction:column; }
   .f04-item-naka { width:100%; margin-left:0;}
   .f04-photo { text-align:center; min-height:210px; margin-top:1em; }

   .footer_f { flex-wrap:wrap; }
   .ff-item-a { width:100%; display:flex; justify-content:center; align-items:center; }
   .ff-item-b { width:100%; display:flex; justify-content:center; align-items:center; margin-top:1em; font-size:107%;}
}
/* ▼表示領域が700px未満の場合 */
@media screen and (max-width: 699px) {
   h1 { font-size:26px; }
   header { background-size:250%; background-position:72% center; }
   .h_logo { position:static; width:50%; left:0; text-align:center; margin:0 auto; padding-top:50px; }
   .h_chach h1 { position:static; left:0; text-align:center; line-height:1.7; }
   .h_chach { margin-left:4%; margin-right:4%; }
}
/* ▼表示領域が600px未満の場合 */
@media screen and (max-width: 599px) {
   body { font-size:15px; }
   h2 { font-size:19px; }
   h2:before { width:70px; height:70px; left:-15px; }
   h3 { font-size:15px; }
   .container { width:88%; margin-left:6%; margin-right:6%; }
   .container960 { width:88%; margin-left:6%; margin-right:6%; }

   .subtitle_w img { width:65px; }

   .flex_chart { flex-direction:column; }
   .f_c_aken { width:140px; }

   .pagetop { bottom:10px; right:5px;}
   .pagetop a { font-size:14px; padding-top:8px; border-radius:30px; width:30px; height:22px; }

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