@charset "UTF-8";
/* ------------------------------------- 

  default02.css (Last Update 2025.6.12)

  Copyright 2025 Kyoritsu Computer Service Co., Ltd.
 
 	- header
	+ body
		- list
		- pdf
		- img
	+ navbar
		- clone-nav
	+  container
		- h2
		- title
		- feature
		- bg-slant
        - card
        - kcs_topics
        - google-cal
        -question_area
	- inview
	- chart
	- contact
	- footer
   ------------------------------------- */
 
 
 
/* ------------------------------------- */
/*	 header
/* ------------------------------------- */
#header{
	width: 100%;
/*	height: 32.6vw;*/
	background: linear-gradient(0deg, rgba(240, 247 , 253, 1.0), rgba(255, 255, 255, 0)),url('../images/bg_index.webp') repeat-x;
	background-size: 50%;
	animation: scroll-anim 120s linear infinite;
}
@media screen and (max-width:767px) {
/*　画面サイズが767px以下の場合　*/
    #header{
/*    height: 67.2vw;*/
    animation: scroll-anim 60s linear infinite;
    }
}
@keyframes scroll-anim {
	100% {
		background-position: -100% 0;
	}
}

/* ------------------------------------- */
/*	 body
/* ------------------------------------- */

body {
	background: #f0f7fd;
    font-family: 'Noto Sans JP', sans-serif;
    color: #444444;
}

/*--　※～～等　--*/
.list01 {
	text-indent:-1em;
	padding-left:1em;
}
/*--　（1）～～　等--*/
.list02 {
	text-indent:-2.5em;
	padding-left:2.5em;
}

/*---pdf---*/
.pdf {
	background:url(../../images/icon_pdf.png) no-repeat right;
	padding-right:27px;
}

/*---img---*/
a:hover img {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
    transition: all  0.3s ease;
}





/* ------------------------------------- */
/*	 navbar
/* ------------------------------------- */	

/* サブナビゲーション表示　スクロールダウンで表示、固定 */
.clone-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
}
.is-show {
  transform: translateY(0);
}

nav {
background: rgba(255,255,255, 0.95);
}
ul.nav a{
color: rgba(0,0,0, .55);
}
ul.nav a:hover{
color: rgba(0,0,0, .7);
}
ul.nav a:active{
color: rgba(0,0,0, .9);
}

/* ------------------------------------- */
/*	 container
/* ------------------------------------- */	

/* コンテンツ見出し下の短いバー */
 h2{
	position: relative;
	display: inline-block;
}
 h2:before {
	content: '';
	position: absolute;
	bottom: -15px;
	display: inline-block;
	width: 60px;
	height: 5px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #8ae5f6;
	border-radius: 2px;
}

.title{
/* タイトル英文字 */
    opacity:0.5;
}

#feature{
background: rgba(255,255,255, 0.8);
}

.bg-slant{
/* 背景斜め */
    clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% calc(100% - 7vw), 0 100%);
}

.card{
	background:#FFFFFF url(../../images/bg_card.svg) no-repeat bottom right;
    border:none;
	background-size:30% auto;
/*    box-shadow: 0 .5rem 1rem rgba(0,0,0, .15);*/
}

/* カードにリンクがある場合のオンマウスのスタイル */
.kcs_topics a{
	text-decoration: none;
}
.kcs_topics a h3{
    	color: #444444;
}
.kcs_topics a:hover .card-text{
	text-decoration: underline;  

}

/* カード内リンクテキストのオンマウス時にアンダーライン表示*/
.kcs_topics .card-text a:hover{
	text-decoration: underline;
}

/* スマホ閲覧時の表の横スクロール対応  */
@media screen and (max-width:575px) {
    .table-scroll{
        overflow: auto;
        white-space: nowrap; 
    }
}

/* Googleカレンダー埋め込みレスポンシブ */
.google-cal iframe {
width:100%;
max-width:950px;
height:400px;
}
@media (min-width: 750px) {
.google-cal iframe {
height:600px;
}
}

/* Googleマップ埋め込みレスポンシブ */
.google-map {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}

.google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*マッチング診断*/
#question_area {
 }
.txt_hide {
display: none;
}
.txt_display {
display: block;
}
#btn_area{
margin-top:30px;
}

/* ------------------------------------- */
/*	 inview
/* ------------------------------------- */
.photos .card{
	  opacity:0;
	  margin-top:20px;
}
.fadeINdown{
    transition: all 0.5s ease-in;
	opacity: 1 !important;
	 transform: translateY(-20px);
}

h2{
 	opacity:0;
 	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.scaleIN{
    transition: all 0.5s ease-in;
    transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
    opacity: 1 !important;
}

.img-fluid{
	  opacity:0;
}
.fadeIN{
    transition: all 0.5s ease-in;
	opacity: 1 !important;
}

.rounded-circle{
    opacity:0;
	transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
}
.rotateIN{
	transition: all 1.0s ease-in;
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
	opacity: 1 !important;
}

.btn{
	opacity: 0;
	transform: translate(-60px,0); 
	-webkit-transform: translate(-60px,0);
}
.btn-outline-info:hover,
.btn-info:hover {
color:#FFFFFF;
}
.rightIN{
	transition: all 0.3s ease-in;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	opacity: 1 !important;
}

/* ------------------------------------- */
/*	 chart
/* ------------------------------------- */	
canvas {
      width: 100%;
      height: auto;
}

/* ------------------------------------- */
/*	 contact
/* ------------------------------------- */
#contact{
	background: url(../images/bg_contact.jpg) no-repeat center center  / cover;
}

/* ------------------------------------- */
/*	 footer
/* ------------------------------------- */
footer a,
footer a:hover,
footer a:focus {
	color:#FFFFFF;	
    text-decoration:none;
}