@charset "UTF-8";

/*=====================

　　＜トピックス＞

　　01.メインコンテンツエリア
　　02.トピックス
　　03.リンクエリア

=====================*/


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

　　01.メインコンテンツエリア

---------------------------------------------------*/
#mainArea {
	width: 100%;
	padding: 70px 0 80px;
	background-color: #fff;
}
	#mainArea.bg01 { background: #eaeaea; }
	#mainArea.bg02 { background: #052234; }
	#mainArea.bg03 { background: #FFF; } 

h3 {
	position: relative;
	font-size: 40px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	text-align: left;
	padding: 0 0 1.5rem;
	margin-bottom: 2rem;
}
h3 span {
	font-size: 16px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 200;
	margin-left: 8px;
}
h3:before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 6px;
	content: '';
	border-radius: 3px;
	background: #ea5514;
}
.topicsArea .txt_l {
    box-sizing: border-box;
    font-size: 18px; <!-- 16pxより変更 -->
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    
    }

}
iframe {
	vertical-align:bottom;
}

img.displayed {
    display: block;
    margin--left: auto;
    margin-right: auto;
}


/* Tab */
@media screen and (max-width: 1200px) {
}

/* sp */
@media screen and (max-width: 768px) {
	#mainArea {
		width: 100%;
		padding: 8% 0 10%;
	}
	h3 {
		font-size: 30px;
	}
	.topicsArea .txt_l {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
タブ
---------------------------------------------------*/
.tab_container {
	margin: auto;
 }
.tab_item {
	width: calc(100%/5);
	/*タブの数に応じてwidthを変更*/
	/*
	タブが1つの場合 → width: 100%;
	タブが2つの場合 → width: calc(100%/2);
	タブが3つの場合 → width: calc(100%/3);
	タブが4つの場合 → width: calc(100%/4);
	タブが5つの場合 → width: calc(100%/5);
	*/
	position: relative;
	float: left;
	display: flex;
	align-items: center;
	height: 50px;
	font-size: 22px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	line-height: 1.4;
	text-align: left;
	color: #FFF;
	box-sizing: border-box;
	margin: 0;
	padding: 5px 0 5px 50px;
	transition: 0.3s;
}
.tab_item:after {
	position: absolute;
	content: '';
	top: 0;
	right: 0;
	border-right: solid 40px #eaeaea;
	border-bottom: solid 50px transparent;
}
.tab_item.tab1 { background: #000000; }
.tab_item.tab2 { background: #052234; }
.tab_item.tab3 { background: #374E5D; }
.tab_item.tab4 { background: #697A85; }
.tab_item.tab5 { background: #96A2A8; }
.tab_item:hover {
	opacity: 0.6;
}
input[name="tab_item"] {
	display: none;
}
#tab1:checked ~ #tab1_con,
#tab2:checked ~ #tab2_con,
#tab3:checked ~ #tab3_con,
#tab4:checked ~ #tab4_con,
#tab5:checked ~ #tab5_con {
	display: block;
}
.tab_container input:checked + .tab_item { color: #FFF; }
.tab_container input:checked + .tab_item.tab1 { background: #000000; }
.tab_container input:checked + .tab_item.tab2 { background: #052234; }
.tab_container input:checked + .tab_item.tab3 { background: #374E5D; }
.tab_container input:checked + .tab_item.tab4 { background: #697A85; }
.tab_container input:checked + .tab_item.tab5 { background: #96A2A8; }

/*
タブの中身
---------------------------------------------------*/
.tab_con {
	display: none;
	height: 1350px;
	box-sizing: border-box;
	padding: 4rem 0;
	clear: both;
	overflow-y: scroll;
	background: #FFF;
}
#tab1_con.tab_con { border: solid 15px #000000; }
#tab2_con.tab_con { border: solid 15px #052234; }
#tab3_con.tab_con { border: solid 15px #374E5D; }
#tab4_con.tab_con { border: solid 15px #697A85; }
#tab5_con.tab_con { border: solid 15px #96A2A8; }

.tab_inner {
	width: 100%;
	margin: auto;
}
/* sp */
@media screen and (max-width: 768px) {
.tab_item:hover {
	opacity: 1.0;
}

#tab1_con.tab_con { border: solid 8px #000000; }
#tab2_con.tab_con { border: solid 8px #052234; }
#tab3_con.tab_con { border: solid 8px #374E5D; }
#tab4_con.tab_con { border: solid 8px #697A85; }
#tab5_con.tab_con { border: solid 8px #96A2A8; }

.tab_item {
	height: 40px;
	font-size: 12px;
	padding: 5px 0 5px 5px;
}
.tab_item:after {
	border-right: solid 30px #eaeaea;
	border-bottom: solid 40px transparent;
}
}


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

　　02.トピックス

---------------------------------------------------*/
#news01 {
	padding-top:100px;
	margin-top:-100px;
}
#news02 {
	padding-top:100px;
	margin-top:-100px;
}
#news03 {
	padding-top:100px;
	margin-top:-100px;
}

.height_30_10 {
	width: 100%;
	height: 30px;
}
.con01 {
	height: 1100px;
	padding: 4.5rem 0 5rem;
	box-sizing: border-box;
	clear: both;
	overflow-y: scroll;
	background: #FFF;
}


.topics_con01 {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	background-color: #fff;
}
.topics_con01_01 {
	width: 100%;
	max-width: 1050px;
	margin: 0 auto 15px;
	display: flex;
	justify-content:space-between;
}
.topics_con01_01 .con01_txt_l {
	font-size: 25px;
	text-align: left;
	color: #1a1a1a;
	line-height: 1.8;
	font-family: 'Noto Sans JP', sans-serif;
}
.topics_con001_01 {
	width: 100%;
	max-width: 1050px;
	margin: 0 auto 40px;
}
.topics_con001_01 .con01_txt_r {
	font-size: 14px;
	text-align: left;
	color: #1a1a1a;
	font-family: 'Noto Sans JP', sans-serif;
}
.topics_con01_02 {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 40px;
	text-align: left;
	font-size: 16px;
	line-height: 1.8;
	font-family: 'Noto Sans JP', sans-serif;
}
.topics_con01_02 span {
	color: #ff0000;
}
.topics_iconArea {
	width: 20%;
	float: right;
	
}
.topics_iconArea ul {
	display:flex;
  	justify-content:flex-end;
  	float: right;
}
.topics_iconArea li {
	width: 40px;
	margin-left: 2.5%;
}
.topics_iconArea li:first-child {
	margin-left: 0;
}
.topics_iconArea a:hover {
	opacity: 0.7;
	transition: 0.3s;
}
.topics_con01_03_1 {
	width: 100%;
	max-width: 1050px;
	margin: 40px auto 0;
}
.topics_con01_03_1 ul {
	display: flex;
	flex-wrap: wrap;
}
.topics_con01_03_1 li {
	width: 23.5%;
	margin-right: 2%;
}
.topics_con01_03_1 li:last-child {
	margin-right: 0;
}
.topics_con01_03_1 img {
	width: 100%;
}
.topics_con01_03_2 {
	width: 100%;
	max-width: 1000px;
	margin: 40px auto 0;
}
.topics_con01_03_2 img {
	width: 100%;
}
.topics_con01_03_3 {
	width: 100%;
	max-width: 1050px;
	margin: 40px auto 0;
}
.topics_con01_03_3 ul {
	display: flex;
	flex-wrap: wrap;
}
.topics_con01_03_3 li {
	width: 49%;
	margin-right: 2%;
}
.topics_con01_03_3 li:last-child {
	margin-right: 0;
}
.topics_con01_03_3 img {
	width: 100%;
}

.topics_con01_03_4 {
	width: 100%;
	max-width: 1050px;
	margin: 40px auto 0;
}
.topics_con01_03_4 ul {
	display: flex;
	flex-wrap: wrap;
}
.topics_con01_03_4 li {
	width: 32%;
	margin-right: 2%;
}
.topics_con01_03_4 li:last-child {
	margin-right: 0;
}
.topics_con01_03_4 img {
	width: 100%;
}
.border {
	width: 100%;
	max-width: 1150px;
	margin: 70px auto 50px;
	border-bottom: 2px solid #eaeaea;
}

.effect h4 {
    font-size: 1.5rem;
    margin: 1rem 0;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    <!-- color: #494949;/*文字色*/ -->
    border-bottom: solid;
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
 }
 
 .effect h5 {
	font-size: 20px;
	color: #0085B2;
	letter-spacing: 0.1em;
	padding: 10px;
	font-weight: bold;
	clear: both;
	margin-top: 10px;
	margin-right: 30px;
	margin-bottom: 10px;
	margin-left: 30px;
}

 /*
1bandテーブルてすと
-----------------------------------*/
table tr {
    text-align: left;
    vertical-align: top;
}

.eventinfo {
    margin: 13px 10px 0;
}
.eventinfo table {
    width: 100%;
    border: 4px #d6d6d6 solid;
    margin-bottom: 13px;
}

.eventinfo table th {
    width: 125px;
    padding: 8px;
    background: #FFF;
    border-bottom: 1px #d6d6d6 solid;
}
.eventinfo table td {
    background: #FFF;
    padding: 8px;
    border-bottom: 1px #d6d6d6 solid;
}
.eventinfo table.wrapper th,
.eventinfo table.wrapper td{
    border: none;
}
.eventinfo table td p {
    margin-top: 5px;
}
.eventinfo table td p:first-child {
    margin-top: 0;
}
h5 .eventinfo {
    margin-top: 0;
}
 
 
/* tab */
@media screen and (max-width: 1200px) {

}
/* sp */
@media screen and (max-width: 768px) {
.height_30_10 {
	width: 100%;
	height: 10px;
}
.con01 {
	width: 100%;
	padding: 2.0rem 0 3rem;
}
.topics_con01 {
	width: 90%;
	margin: 0 auto;
	padding: 0;
}
.topics_con01_01 {
	display: block;
}
.topics_con01_01 .con01_txt_l {
	font-size: 21px;
	margin-bottom: 10px;
}
.topics_con01_01 .con01_txt_r {
	padding: 0;
}
.topics_iconArea ul {
	display:flex;
  	justify-content: left;
}
.topics_iconArea li {
	width: 35px;
	margin-left: 4.5%;
}
.topics_con01_03_1 {
	width: 100%;
	max-width: 1050px;
}
.topics_con01_03_1 ul {
	display: flex;
}
.topics_con01_03_1 li {
	width: 49%;
	margin: 0 2% 2% 0;
}
.topics_con01_03_1 li:nth-of-type(2) {
	margin: 0 0 0 0;
}
.topics_con01_03_4 {
	width: 100%;
}
.topics_con01_03_4 ul {
	display: flex;
}
.topics_con01_03_4 li {
	width: 49%;
	margin: 0 2% 2% 0;
}
.topics_con01_03_4 li:nth-of-type(2) {
	margin: 0 0 0 0;
}
.topics_con01_03_4 li:last-child {
	width: 100%;
	margin: 0 0 0 0;
}
.border {
	margin: 50px auto 10px;
}
}

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

　　03.リンクエリア

---------------------------------------------------*/
.topics_linkArea {
	width: 100%;
	padding: 45px 0;
}
.topics_linkArea ul {
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around;
}
.topics_linkArea li {
	width: 18%;
	margin: 0 0 2% 0 ;
	font-size: 18px;
	text-align: center;
	color: #1a1a1a;
	font-family: 'Noto Sans JP', sans-serif;
}
.topics_linkArea a {
	color: #1a1a1a;
	width: 100%;
	padding: 5px 20px;
	border: 1px solid #1a1a1a;
}
.topics_linkArea a:hover {
	opacity: 0.5;
	transition: 0.3s;
	text-decoration: none;
}
/* sp */
@media screen and (max-width: 768px) {
.topics_linkArea {
	width: 100%;
	padding: 20px 0;
}
.topics_linkArea ul {
	justify-content:space-between;
}
.topics_linkArea li {
	width: 49%;
	margin: 0 2% 6% 0 ;
	font-size: 17px;
}
.topics_linkArea li:nth-of-type(2n) {
	margin: 0 0 6% 0 ;
}
.topics_linkArea a {
	color: #1a1a1a;
	width: 100%;
	padding: 1px 5px;
	border: 1px solid #1a1a1a;
}
}

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

　　03.YouTube動画 レスポンシブ対応

---------------------------------------------------*/
	.movie_wrap {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
	}
	.movie_wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}



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

　　04.CM動画

---------------------------------------------------*/
.movieArea {
	width: 100%;
	max-width: 1200px;
}
.movieArea h3 {
	color: #1a1a1a;
	margin-bottom: 1rem;
}
.movieArea h3 span {
	color: #666;
}
.movieArea .main_movie {
	width: 100%;
	max-width: 1200px;
	display: flex;
	padding: 1.5rem 0 0;
	margin-bottom: 1.5rem;
}
.movieArea .main_movie .movie_l {
	width: 100%;
}
.movieArea .main_movie .movie_l .movie_wrap {
	width: 100%;
	margin-right: 2%;
}
.movieArea .main_movie .con_block {
	width: 24%;
}
.movieArea .con_block ul {
	width: 100%;
}
.movieArea .con_block .movie_wrap {
	width: 100%;
}
.movieArea .con_block li {
	width: 100%;
	margin-bottom: 5%;
}
.movieArea .con_block li:last-child {
	margin-bottom: 0;
}

.movieArea .txt_l2 {
    box-sizing: border-box;
    font-size: 24px; 
    font-weight: 600;
    line-height: 1.8;
    text-align: left;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

/* Tab */
@media screen and (max-width: 1200px) {
}

/* sp */
@media screen and (max-width: 768px) {
	.movieArea .main_movie {
		display: block;
	}
	.movieArea .main_movie .movie_l {
		width: 100%;
		margin-bottom: 5%;
	}
	.movieArea .main_movie .movie_l .movie_wrap {
		width: 100%;
		margin-right: 0;
	}
	.movieArea .main_movie .con_block {
		width: 100%;
	}
	.movieArea .con_block li {
		width: 100%;
		margin-bottom: 5%;
	}
	.movieArea .con_block li:last-child {
		margin-bottom: 0;
	}
}

エフェクト
-------------------------------------------*/
.effect {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha( opacity=0 )";
	transform: translateY(20px);
	-webkit-transform: translateY(20px);  
    -moz-transform: translateY(20px); 
	-webkit-transition: 1.0s ease-out;
	-moz-transition: 1.0s ease-out;
	transition: 1.0s ease-out;
}
.effect.d_02 {
transition-delay:0.2s;
-webkit-transition-delay:0.2s;
}
.effect.d_04 {
transition-delay:0.4s;
-webkit-transition-delay:0.4s;
}
.effect.d_06 {
transition-delay:0.6s;
-webkit-transition-delay:0.6s;
}
.effect.d_08 {
transition-delay:0.8s;
-webkit-transition-delay:0.8s;
}
.effect.start {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	transform: translateY(0px);
	-webkit-transform: translateY(0px);  
    -moz-transform: translateY(0px);    
}