@charset "UTF-8";

.loading {
	width: 100%;
	height: 100vh;
	transition: all 1s;
	background-color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000000;
	opacity: 1;
	visibility: visible;
  }
  
  .loading.is-active {
	opacity: 0;
	visibility: hidden;
  }
  
  .loading-animation {
	width: 100%;
	height: 100vh;
	transition: all 1s;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
  }

  .loading-animation.is-active {
	opacity: 1;
	visibility: visible;
  }

/* ローディングアニメーション */
.center{
    text-align: center;
    margin: 0 auto;
}
.mb100{
	margin-bottom: 100px;
}

/* TOP内の共通部分 */

.h2_decoration{
    height: 25vh;
	margin-bottom: 100px;
	font-size: 2.5rem;
	font-weight: bold;
    color: #fff;
    background: linear-gradient(273.39deg, #E96D00 6.31%, #E44D03 98.92%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.h3_decoration{
	margin-bottom: 100px;
    font-size:1.75rem;
    font-weight:bold;
    color:#333;
    display: inline-block;
	padding:10px;
    border-bottom:5px solid #ff5500;
}

.toppage_btn{
    width: 350px;
    display: block;
	text-align: center;
	text-decoration: none;
	margin: auto;
	padding: 1.125rem 1rem;
    font-size:1.125rem;
	font-weight: bold;
	border: 5px solid #ff5500;
	color: #ff5500;
	border-radius: 8px;
	transition: 0.5s;
}
.toppage_btn:hover {
	color: #fff;
	background: #ff5500;
}
.toppage_plain_text{
	text-align: left;
}

.toppage_plain_shorttext{
	text-align: center;
}

.contents_wrap{
	margin-bottom: 100px;
}

#news,#about,#about-HyogoITE-Lab,#greetings,
#activities,#attractive_point,#activities-photo-gallery,
#business_report,#company,#join,#contact {
	padding-top: 64px;
}


/* キービジュアル */
.main_vs{
	width: 100%;
	height: 100vh;
	background-image: url(../images/index/top_key.gif);
	background-size: contain;
	background-repeat: no-repeat;
    background-position: top center;	
	margin-top: 100px;
    -webkit-background-size: cover;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* キャッチコピーフェードイン */
.fadein {
    color: #EB570E;
    font-size: 3.5rem;
    font-weight:bold;
    opacity: 0;
    }

a {
	text-decoration: none;
	color: #333;
}

.copy{
	text-align: center;
	font-size: 3rem;
	margin-bottom: 5rem;
	}


/*以下フェードイン表示の指定*/
.fadein {
	opacity: 0;
	animation: fadein 6s ease forwards;
	}
	@keyframes fadein {
	100% {  opacity: 1;}
}

/*以下遅延の指定*/
.txt01 {animation-delay: 1s;}
.txt02 {animation-delay: 1.5s;}
.txt03 {animation-delay: 2.5s;}
.txt04 {animation-delay: 3s;}


 /* お知らせ */

/*------ スライダーの横幅 ------*/
.slider1{
	width:90%;
	max-width: 1300px;
	margin:0 auto;
}

/*------ スライダー画像 ------*/
.slider1 img{
	width:100%;
}

/*-------- 高さ調整 ----------*/
.slider1 .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.slider1 .slick-next{
	right: -5%;
}
.slider1 .slick-prev{
	left: -5%;
}
.slider1 .slick-arrow{
	width: initial;
	height: initial;
	z-index:2;
}
.slider1 .slick-arrow:before{
	font-size: 30px;
	color: #EB570E;
}

/*お知らせ カード見た目*/

.news_card{
	padding: 1rem;
}

.news_card_tag{
	min-width: 3.75rem;
	display: inline-block;
	padding: 0.25rem;
	text-align: center;
	background-color: #E44D03;
	color: #fff;
	margin-bottom: 0.5rem;
}

.news_card h4{
	color: #5C1212;
	letter-spacing: 0.03rem;
	margin-bottom: 0.75rem;
}

.news_card span{
	font-size: 1.5rem;
}

.news_card_text{
	height: 340px;
	position: relative;
	background-color: #ffffdd;
	padding: 1rem 1rem;
	border-radius: 0 8px 8px 0;
}

.news_card_text dl{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	text-align: left;
}

.news_card_text dt{
	width: 20%;
	margin-bottom: 10px;
}

.news_card_text dd{
	width: 80%;
	margin-bottom: 10px;
}

.newslink{
	display: flex;
	align-items: center;
	padding: 0 1rem 1rem 0;
	position: absolute;
	bottom: 0;
	right: 0;
}
.newslink_icon{
	width: 16px;
	height: auto;
}

.news_slider {
	margin-bottom: 2rem;
}

.slick-dotted.slick-slider {
	margin-bottom: 100px;
}
/* about 研究会について */
/* ITエレ研とは */

.about_catch-copy_container{
	width: 100%;/*1300px*/
	max-width: 1300px;
	margin: 0 auto 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.copy_fontsize{
	font-size: 2rem;
}
.fontcolor01{
	color: #e96d00;
}
.fontcolor02{
	color: #007ce8;
}
.no_break{
	display: inline-block;
}

/* ご挨拶 */
.greetings{
	background-color: #ffffdd;
	padding: 50px 0;
	margin-bottom: 100px;
}

.greetings_container{
	width: 100%;/*1300px*/
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 50px;
	display: flex;
	align-items: center;
}

.greetings_text{
	margin-right: 50px;
	text-align: justify;
	font-size: 1.125rem;
	padding: 1rem;
}
.greetings_text_inner{
	margin-bottom: 50px;
}
.chairman_name{
	text-align: right;
	color: #5c1212;
	font-weight: bold;
}
.name_font{
	font-size:1rem;
}


/* 活動内容 */
.activities_wrap{
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 50px;
}

.activities_wrap--item:first-child{
	width: 67%;
	aspect-ratio: 1300 / 330;
	background-color: #344a5f;
	align-self: flex-start;
	margin-top: -200px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
}
.activities_wrap--item:last-child{
	width: 67%;
	aspect-ratio: 1300 / 330;
	align-self: flex-end;
	z-index: 100;
}

/* 偶数は左右逆 */
.activities_wrap:nth-child(even) > .activities_wrap--item:first-child{
	align-self: flex-end;
}
.activities_wrap:nth-child(even)> .activities_wrap--item:last-child{
	align-self: flex-start;
}

/* 文章説明部分のレイアウト */
.activities_detail{
	background-color: #fff;
	width: 50%;
	height: auto;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 8px;
	padding: 1rem;
	text-align: left;
}
.detail_title{
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.detail_explain{
	font-size: 1rem;
}

/* 外部リンクの文字とアイコン */
.hyogo-kg_link{
	text-align: right;
	display: flex;
	justify-content: end;
	align-items: flex-end;
}
a.blue-text{
	color: blue;
}
.icon--externalLink{
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/index/ri_external-link-line.png);
    background-size: contain;
    z-index: 10000000;
    vertical-align: bottom;
}

/* 会員企業様の声 */
.attractive_point_container{
	width: 67.7%;/*1300px*/
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1.5;
}
.attractive_point_container:nth-child(even){
	flex-direction: row-reverse;
}

.member_illust{
	min-width: 150px;
	max-width: 150px;
	height: auto;
}
.interview dt,dd{
	margin-bottom: 0.5rem;
}
.interview dt{
	color: #5C1212;
	font-weight: bold;
}
.qa{
	color: darkcyan;
	font-family: serif; 
	font-size: 1.5rem;
	font-weight: bold;
	vertical-align: bottom;
	
}
.interview dd{
	margin-left: 1rem;
}
.interview_title{
	margin: 0.75rem 0;
}
.marker{
	font-weight: bold;
	text-decoration: underline;
	text-decoration-thickness: 0.5em; /* 線の太さ */
	text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */
	text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
	text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}
.question{
	font-size: 1.25rem;
}

/* 左向き吹き出し */
.balloon1-left {
	position: relative;
	display: inline-block;
	margin: 1.5em 0 1.5em 15px;
	padding: 1rem;
	width: calc(100% - 150px);
	color: #555;
	font-size: 16px;
	background: #ffffdd;
  }
  
  .balloon1-left:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #ffffdd;
  }
  
  /* .balloon1-left dl {
	margin: 0;
	padding: 0;
  } */

/* 右向き吹き出し */
  .balloon1-right {
	position: relative;
	display: inline-block;
	margin: 1.5em 15px 1.5em 0;
	padding: 1rem;
	width: calc(100% - 150px);
	color: #555;
	font-size: 16px;
	background: #ffffdd;
  }
  
  .balloon1-right:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid #ffffdd;
  }
/*   
  .balloon1-right dl {
	margin: 0;
	padding: 0;
  } */

.balloon1-right,.balloon1-left{
	text-align: left;
}



/*活動の様子*/

.activity_pic {
	overflow:hidden;
	position:relative;	/* 相対位置指定 */
	margin: 0 1rem;
}

.caption {
	width: 100%;
	margin: 0 auto;
	font-size: 1.2rem;
	position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);/*キャプションの文字を左右上下中央ぞろいに*/
	color: #fff;
}

.caption{
	line-height: 0;
}

.photo_name {
	margin-bottom: 1rem;
}

.mask {
	width:100%;
	max-width: 234px;
	height:100%;
	position:absolute;	/* 絶対位置指定 */
	top:0;
	left:0;
	opacity:0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:all 0.2s ease;
}

.activity_pic:hover .mask {
	opacity:1;	/* マスクを表示する */
}


/*事業報告*/
.business_report_wrap{
	width: 67.7%;/*1300px*/
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	column-gap: 8px;
}
.business_report_btn{
	/* width: 15rem; */
	max-width: 234px;
	padding: 0.5rem;
	aspect-ratio: 1 / 1;
    background: linear-gradient(273.39deg, #E96D00 6.31%, #E44D03 98.92%);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.business_report_btn:hover {
	transform: scale(1.1);
	transition: .8s;
  }

.btn_inner{
	display: flex;
	flex-direction: column;
	/*レスポンシブではrowに変えること*/
	align-items: center;
}
.btn_inner .year{
	margin-bottom: 1rem;
	font-size: 1.75rem;
	font-weight: bold;
	color: #fff;
}
.btn_inner .year span{
	/* vertical-align:text-bottom; */
	font-size: 2.75rem;
}
.btn_inner .pdf_icon{
	width: 3.5rem;
	height: auto;
}

/*参加企業*/
.company_slider_top,.company_slider_bottom{
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}

.company .toppage_btn {
	margin-bottom: 5rem;
}
/* 企業スライダー */

.p-infinite-slider__items {
	margin-bottom: 3rem;
}

.p-infinite-slider__list {
	margin-right: 6rem;
}

.js-infinite-slider {
	text-align: left;
}

.wrap {
	position: relative;
	width: 240px;
	height: 150px;
	border:  5px solid #aaa;
	border-radius: 8px;
}


.contain_wrap {
	position: absolute;
}

.contain {
	display: flex;
	justify-content: center;
	width: 230px;
	height: 140px;
	margin: 0 auto;
	text-align: center;
	aspect-ratio: 105 / 64;
}

.contain img {
	padding: 0.5rem 1rem;
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.company_name {
	height: 3rem;
    position: relative;
    padding-top: 1.2rem;
    font-weight: bold;
    text-align: center;
	margin-bottom: 1.5rem;
}

.company_name:before,
.company_name::after {
    position: absolute;
    top: 0.8rem;
    height: 3rem;
    content: '';
}

.company_name::before {
    border-left: solid 3px #ff5500;
    left: 0;
    transform: rotate(-30deg);
}

.company_name::after {
    border-right: solid 3px #ff5500;
    right: 0;
    transform: rotate(30deg);
}

/* お問い合わせ */
.contact section{
	text-align: center;
}


/*-------------------------------
    レスポンシブ
--------------------------------- */
@media screen and (max-width:1366px) {

/* TOP共通部分 */
.text_width{
	width: 67.7%;
}
/* ITエレ研とは1366px */
.copy{
	font-size: 1.75rem;
}
/* 活動内容1366px */
.activities_wrap-L,.activities_wrap-R{
	margin-bottom: 96px;
}
.activities_wrap--item:first-child{
	margin-top: -150px;
}

/* 文章説明部分のレイアウト */
.activities_detail{
	width: 59.4%;
}

/* 事業報告1366px */
.business_report_wrap{
		/* width: 73.2%; */
		width: 80.5%;
		flex-direction: column;
		justify-content: center;
	}
.business_report_btn{
		width:80%;
		height: 3.5rem;
		/* margin-bottom: 20px; */
		margin: 0 auto 20px;
	}
.btn_inner{
	flex-direction: row;
	align-items:stretch;
}
.btn_inner .year{
	font-size: 1.25rem;
	margin-bottom: 0;
}
.btn_inner .year span{
	font-size: 1.5rem;
}
.btn_inner .pdf_icon{
	width: 1.5rem;
	height: auto;
}

/*参加企業1366px*/
.company_slider_top,.company_slider_bottom{
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	}
}
/* 1366px */


@media screen and (max-width:930px) {

.main_vs {
	height: 50vh;
}

/* TOP共通部分930px */
.h2_decoration{
	font-size: 2rem;
	font-weight: normal;
}

.toppage_plain_text{
	width: 100%;
}

/* ITエレ研とは930px */
.about_catch-copy_container{
	width: 100%;
	display: block;
	}

/* ご挨拶930px */
.greetings_container{
	width: 100%;
	display: block;
	}
.greetings_text{
	margin:0 0 50px 0;
}

/* 活動内容930px */
.activities_wrap--item:first-child{
	width: 100%;
	margin-top: 0px;
	border-radius: 0;
}
.activities_wrap--item:last-child{
	width: 100%;
}

/* 文章説明部分のレイアウト930px */
.activities_detail{
	width: 96%;
	border-radius: 0;
}


/*事業報告930px*/
.business_report_wrap{
	width: 80.5%;
	flex-wrap: wrap;
	justify-content: center;
}
.business_report_btn{
	width:80%;
	height: 3.5rem;
	margin-bottom: 20px;
	font-size: 1.75rem;
}
.business_report_btn span{
	font-size: 2rem;
}

}
/*930px*/


@media screen and (max-width:768px) {

/* TOP内の共通部分768px */

.h2_decoration{
    height: 15vh;
	font-size: 1.5rem;
	margin-bottom: 50px;
}

.h3_decoration{
	margin-bottom: 30px;
    font-size:1.5rem;
}
.toppage_btn{
	width: 75%;
	font-size: 1.125rem;
	padding: 1rem;
}

.copy {
	font-size: min(7vw, 32px);
	margin: 2rem 0;
}

.fadein {
	font-size: min(7vw, 42px);
}

/*お知らせ768px*/
/* .news_slider{
	width: 100%;
	flex-direction: column;
	align-items: center;
}
.news_card{
	width: 100%;
	max-width: 400px;
	height: auto;
	margin-right: 0;
} */

/* ITエレ研とは768px */
.about_catch-copy_container{
		/* width: 67.7%;1300px */
		width: 100%;
		display: block;
	}
.copy_fontsize{
		font-size: 1rem;
	}
.annotation{
		font-size: 0.75rem;
	}

/* ご挨拶768px */
.greetings_container{
		/* width: 67.7%;1300px */
		width: 100%;
		display: block;
		padding: 0 20px;
	}

.greetings_text{
	margin:0 0 50px 0;
	padding: 0;
}

/* 活動内容768px */
/* 文章説明部分のレイアウト768px */
.activities_detail{
	margin: 16px;
}

/* ITエレ研の魅力768px */
.attractive_point_container{
		width: 100%;
		display: block;
		margin-bottom: 100px;
}
.attractive_point_container:last-child{
	margin-bottom: 0;
}
.member_illust{
	margin: 0 auto;
}

/* 下向き吹き出し768px */
  .balloon1-left,.balloon1-right {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 1rem;
	width: 100%;
	color: #555;
	font-size: 16px;
	background: #ffffdd;
  }
  
  .balloon1-left:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -30px;
	border: 30px solid transparent;
	border-top: 30px solid #ffffdd;
  }
  .balloon1-right::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -30px;
	border: 30px solid transparent;
	border-top: 30px solid #ffffdd;
  }
  .balloon1-left p,.balloon1-right p {
	margin: 0;
	padding: 0;
  }

  /* 活動の様子 */
  .caption {
	position: static;
	top: 0%;
  -ms-transform: translate(0,0);
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  text-align: center;
	color: #333;
	font-size: 1rem;
}

  .mask {
	position: static;
	background-color: transparent;
	opacity: 1;
	margin-top: 1rem;
}
}/* 768px */

@media screen and (max-width: 500px) {
	.main_vs {
		height: 30vh;
		margin-bottom: 3rem;
	}
	
	.copy {
		margin-bottom: 2rem;
	}

}/* 500px */

@media screen and (max-width: 400px) {

/*お知らせ カード見た目400px*/

.news_card_tag{
	width: 3.75rem;
	padding: 0.25rem;
	text-align: center;
	background-color: #E44D03;
	color: #fff;
	margin-bottom: 0.5rem;
}
.news_card h4 span{
font-size: 1.25rem;
}
.news_card_text dl{
font-size: 0.875rem;
}
.newslink{
font-size: 0.875rem;
}
.newslink_icon{
	width: 14px;
	height: auto;
}

}/* 400px */