@charset "utf-8";
/* ==================================================================
CSS information
style info : NEWS 詳細
================================================================== */


/* ----------------------------------------------------------------------------------------------------------------
OVERWRITE
---------------------------------------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------------------------------------------
.secNewsTitle
---------------------------------------------------------------------------------------------------------------- */
.secNewsTitle { position: relative; width: 100%; margin: 0 auto; padding: calc(145/750*100%) calc(50/750*100%) calc(60/750*100%); border-bottom: 4px solid #1fcefa; 
background: url("../_img/bg_title_sp.jpg") top center no-repeat; background-size: 100%; }
.secNewsTitle .secInner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; align-items: center; }

.sNT__date { color: #c7c7c7; font-size: calc(22/750*100vw); line-height: 1; align-self: center; }
.sNT__category { margin-left: 1em; }
.sNT__category span { font-size: calc(20/750*100vw); line-height: 1; padding: 2px 1em 2px; color: #000; }
.sNT__title { width: 100%; margin-top: 0.3em; color: #fff; line-height: 1.21; font-size: calc(42/750*100vw); font-weight: bold; }
.sNT__lead { width: 100%; margin-top: 0.5em; color: #fff; line-height: 1.61; font-size: calc(26/750*100vw); white-space: break-spaces; }

.sNT__date, 
.sNT__title, 
.sNT__lead { text-shadow: 0 0 3px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,1); }

@media screen and (min-width: 641px) {
	.secNewsTitle { padding: calc(140/1360*100%) 0 calc(90/1360*100%); background: url("../_img/bg_title_pc.jpg") top center no-repeat; background-size: calc(1920/1360*100%); }
	
	.sNT__date { font-size: 1.17647vw; }
	.sNT__category {}
	.sNT__category span { font-size: 1.17647vw; padding: 2px 1em 2px; }
	.sNT__title { width: calc(800/1260*100%); margin: 0.1em calc(460/1260*100%) 0 0; line-height: 1.21; font-size: 3.08823vw; }
	.sNT__lead { width: calc(800/1260*100%); margin: 1em calc(460/1260*100%) 0 0; color: #d7d7d7; line-height: 1.61; font-size: 1.32352vw; }
	
	.sNT__date, 
	.sNT__title, 
	.sNT__lead { text-shadow: 0 0 5px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1); }
}
@media screen and (min-width: 1361px) {
	.secNewsTitle { padding-top: 140px; padding-bottom: 90px; background-size: 1920px; }
	
	.sNT__date { font-size: 1.6rem; }
	.sNT__category span { font-size: 1.6rem; }
	.sNT__title { font-size: 4.2rem; }
	.sNT__lead { font-size: 1.8rem; }
}


/* ----------------------------------------------------------------------------------------------------------------
.secNewsDetail
---------------------------------------------------------------------------------------------------------------- */
.secNewsDetail { width: calc(650/750*100%); margin: calc(70/750*100%) auto 0; }


.hl2 { font-size: calc(36/750*100vw); font-weight: bold; margin-top: 2em; margin-bottom: 0.8em; }

.hl3 { font-size: calc(30/750*100vw); font-weight: bold; margin-top: 1.2em; margin-bottom: 0.8em; border-left: 6px solid #1781a0; padding: 3px 0 3px 0.8em; }

.textBox { font-size: calc(24/750*100vw); line-height: 1.61; letter-spacing: 0.05em; margin-top: 0.8em; margin-bottom: 0.8em; white-space: break-spaces; }

.notesBox { font-size: calc(20/750*100vw); line-height: 1.61; letter-spacing: 0.05em; margin-top: 2em; margin-bottom: 0.8em; padding-top: 0.8em; border-top: 1px solid #1781a0; }

.picBox { margin: calc(30/750*100vw) auto; text-align: center; }

.listBox { margin: 1em 0; }
.listBox > li { font-size: calc(24/750*100vw); line-height: 1.41; margin-bottom: 0.5em; }

.listBox.-typeA { list-style: disc; padding-left: 1.2em; }
.listBox.-typeB > li { text-indent: -1em; padding-left: 1em; }

.tableBox { margin: calc(30/750*100vw) auto; font-size: calc(24/750*100vw);  }
.tableBox td { vertical-align: middle; }
.tableBox .tableBox__pic { vertical-align: top; text-align: center; }

.tableBox.-typeA {}
.tableBox.-typeA .tableBox__text { line-height: 1.41; }
.tableBox.-typeA .tableBox__text.-textR { }
.tableBox.-typeA .tableBox__text.-textL { }

.tableBox.-typeB {}
.tableBox.-typeB td { border: 1px solid #3d3d3d; border-collapse: collapse; padding: 10px; }

.tableBox.-typeC { width: 100%; }
.tableBox.-typeC th,
.tableBox.-typeC td { border: 1px solid #3d3d3d; border-collapse: collapse; padding: 10px; }
.tableBox.-typeC th { background: #1781a0; text-align: center; }
.tableBox.-typeC.-col { overflow-x: auto; }
.tableBox.-typeC.-row {}

.tableBox.-typeD { width: 100%; }
.tableBox.-typeD th,
.tableBox.-typeD td { border: 1px solid #3d3d3d; border-collapse: collapse; padding:2px calc(2/750*100vw); text-align: center;	font-size: calc(20/750*100vw);}
.tableBox.-typeD th { background: #1781a0; text-align: center; }
.tableBox.-typeD.-col { overflow-x: auto; }
.tableBox.-typeD.-row {}

.ytBox { margin: calc(30/750*100vw) 0; position: relative; }
.ytBox a { display: block; position: relative; }
.ytBox a::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../_img/icon_play.png") center no-repeat; background-size: 100%; }

@media screen and (max-width: 640px) {
.tableBox.-typeA td,
.tableBox.-typeB td { display: block; }

.tableBox.-typeA .tableBox__text { padding-top: 1em; padding-bottom: 1em; }


.tableBox.-typeC.-row th, 
.tableBox.-typeC.-row td { display: block; }
.tableBox.-typeD.-row th, 
.tableBox.-typeD.-row td { display: block; }


}
@media screen and (min-width: 641px) {
	.secNewsDetail { width: 100%; margin-top: calc(70/1360*100%); }
	.secNewsDetail .secInner { padding-top: 0; }
	
	
	.hl2 { font-size: 2.20588vw; margin-top: 2em; margin-bottom: 0.8em; }

	.hl3 { font-size: 1.76470vw; margin-top: 1.8em; margin-bottom: 0.8em; padding: 3px 0 3px 0.8em; }
	
	.textBox { font-size: 1.4vw; line-height: 1.81; margin-top: 0.8em; margin-bottom: 0.8em; }
	
	.notesBox { font-size: 1.02941vw; line-height: 2.01; margin-top: 2em; margin-bottom: 0.8em; padding-top: 0.8em; }
	
	.picBox { margin: calc(30/1260*100%) 0; }
	
	.listBox > li { font-size: 1.4vw; line-height: 1.41; }
	
	.tableBox { margin: calc(30/1260*100%) auto; font-size: 1.17647vw; }
	
	.tableBox.-typeA {}
	.tableBox.-typeA .tableBox__text { padding-bottom: 1em; }
	.tableBox.-typeA .tableBox__text.-textR { padding-left: 1em; }
	.tableBox.-typeA .tableBox__text.-textL { padding-right: 1em; }
	
	.tableBox.-typeB {}
	.tableBox.-typeD td { border: 1px solid #3d3d3d; border-collapse: collapse; padding: 10px;text-align: left;font-size: 1.17647vw;}
	.tableBox.-typeC { width: 80%; }

	.ytBox { width: calc(640/1260*100%); margin: calc(30/1260*100%) auto; }
	.ytBox a::after { background-size: 80%; }
	
	.ytBox a { transition: transform 0.2s ease 0s; }
	.ytBox a:hover { transform: scale(1.1); }
	
}
@media screen and (min-width: 1361px) {
	.secNewsDetail { margin-top: 70px; }
	
	.hl2 { font-size: 3.0rem; }
	.hl3 { font-size: 2.4rem; }
	.textBox,
	.listBox > li,
	.tableBox { font-size: 1.9rem; }
	.notesBox { font-size: 1.4rem; }

}



/* ----------------------------------------------------------------------------------------------------------------
.secFooterLinks
---------------------------------------------------------------------------------------------------------------- */
.secFooterLinks { width: calc(650/750*100%); margin: calc(100/750*100%) auto 0; padding-bottom: calc(160/750*100%); }

.secFooterLinks .sFL__btn { width: calc(550/650*100%); margin: 0 auto; }

@media screen and (min-width: 641px) {
	.secFooterLinks { width: 100%; margin-top: calc(100/1360*100%); padding-bottom: calc(100/1360*100%); }
	
	.secFooterLinks .sFL__btn { width: calc(400/1260*100%); }
}
@media screen and (min-width: 1361px) {
	.secFooterLinks { margin-top: 100px; padding-bottom: 100px; }
}


/* ----------------------------------------------------------------------------------------------------------------
test-tab
---------------------------------------------------------------------------------------------------------------- */
/*タブ切り替え全体のスタイル　２つのタブパターン*/
.tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #01191D;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 0 auto;
}
  
  /*タブのスタイル*/
  .tab_item {
	width: calc(100%/2);
	height: 50px;
	border-bottom: 3px solid #23CEF9;
	background-color: #013140;
	line-height: 50px;
	font-size: calc(20/750*100vw);
	text-align: center;
	color: #fff;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
  }
  .tab_item:hover {
	opacity: 0.75;
  }
  
  /*ラジオボタンを全て消す*/
  input[name="tab_item"] {
	display: none;
  }
  
  /*タブ切り替えの中身のスタイル*/
  .tab_content {
	display: none;
	padding: 40px 3% 0;
	clear: both;
	overflow: hidden;
  }
  
  
  /*選択されているタブのコンテンツのみを表示*/
  #tab1:checked ~ #tab1_content,
  #tab2:checked ~ #tab2_content {
	display: block;
  }
  
  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .tab_item {
	background-color: #23CEF9;
	color: #fff;
  }

@media screen and (min-width: 641px) {
	.tab_item {
	font-size: 1.8vw;
	}
	.tab_content {
		padding: 40px 5% 0;
	  }
}


@media screen and (min-width: 1361px) {
	.tab_item {
		font-size: 18px;
	}
}



/*タブ切り替え全体のスタイル　３つのタブパターン*/
  /*タブのスタイル*/
  .tab_item_tree {
	width: calc(100%/3);
	height: 50px;
	border-bottom: 3px solid #23CEF9;
	background-color: #013140;
	line-height: 50px;
	font-size: calc(20/750*100vw);
	text-align: center;
	color: #fff;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
  }
  .tab_item_tree:hover {
	opacity: 0.75;
  }
  
  /*ラジオボタンを全て消す*/
  input[name="tab_item_tree"] {
	display: none;
  }
  
  /*タブ切り替えの中身のスタイル*/
  .tab_content_tree {
	display: none;
	padding: 40px 3% 0;
	clear: both;
	overflow: hidden;
  }
  
  
  /*選択されているタブのコンテンツのみを表示*/
  #tab1_tree:checked ~ #tab1_content_tree,
  #tab2_tree:checked ~ #tab2_content_tree, 
  #tab3_tree:checked ~ #tab3_content_tree {
	display: block;
  }
  
  /*選択されているタブのスタイルを変える*/
  .tabs input:checked + .tab_item_tree {
	background-color: #23CEF9;
	color: #fff;
	opacity: 1;
  }

@media screen and (min-width: 641px) {
	.tab_item_tree {
	font-size: 1.8vw;
	}
	.tab_content_tree {
		padding: 40px 5% 0;
	  }
}


@media screen and (min-width: 1361px) {
	.tab_item_tree {
		font-size: 18px;
	}
}









p.bar_graph_tite {
	width: 100%;
    margin: calc(10/750*100%) auto 0;
    padding: 15px 0 10px;
    border: 1px solid #d5d5d5;
    border-bottom: none;
    background-color: #FFF;
    text-align: center;
    color: #444444;
	font-size: calc(22/750*100vw);
}
div.css_bar_graph {
	width: 100%;
	height: 300px;
	margin: 0 auto;
	/* --- font --- */
	font-size: calc(12/750*100vw);
	font-weight: normal;
	color: #444444;
	background-color: #ffffff;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	border-left: 1px solid #d5d5d5;
	border-right: 1px solid #d5d5d5;
	overflow-x: auto;
	overflow-y: hidden;
}
@media screen and (min-width: 641px) {

p.bar_graph_tite {
	width: 80%;
	font-size: 1.8vw;
    padding: 20px 0 15px;
	
}
	  div.css_bar_graph{
		width: 80%;
		font-size: 1.17647vw;
	  }
}
@media screen and (min-width: 1361px) {

p.bar_graph_tite {
	width: 80%;
	font-size: 2rem;
    padding: 25px 0 20px;
	
}

	div.css_bar_graph{
	  font-size: 1.6rem;
	}
}

  /* ------ hyperlinks ------ */
  
  div.css_bar_graph a {
	color: #444444;
	text-decoration: none;
  }
  
  /* ------ lists ------ */
  
  div.css_bar_graph ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
  }
  
  div.css_bar_graph li {
	margin: 0px;
	padding: 0px;
  }
  
  /* ==================== Y-AXIS LABELS ==================== */
  /* ------ base ------ */
  
  div.css_bar_graph ul.y_axis {
	width: calc(50/700*100%);
	position: absolute;
	left: calc(10/700*100%);
	text-align: right;
	height: 100%;
	overflow-y: hidden;
  }
  
  /* ------ labels ------ */
  
  div.css_bar_graph ul.y_axis li.y_axis_6 {
	width: 100%;
	height: calc(51/360*100%);	/* 50px including border */
	float: left;
	color: #888888;
	/* --- alignment correction --- */
	border-top: 1px solid transparent;
	position: relative;
	top: calc(8/360*100%);	/* value = font height */
	z-index: 100;
  }
  
  div.css_bar_graph ul.x_axis li {
	display: inline;
	line-height : 1em; 
	width: calc(51/360*100%);
	float: left;
  }


  /* ==================== GRAPH LABEL  ==================== */
  /* ------ base ------ */


  div.css_bar_graph div.label {
	width: 100%;
	height: 50px;
	float: left;
	margin-top: 20px;
	text-align: center;
  }
  
  div.css_bar_graph div.label span { font-weight: bold; }
  
  /* ==================== GRAPH  ==================== */
  /* ------ base ------ */
  
  div.css_bar_graph div.graph {
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
  }
  
  /* ------ grid ------ */
  
  div.css_bar_graph div.graph ul.grid { width: 100%; height:100%; position:relative;}
  
  /* ------ IE grid ------ */
  
  div.css_bar_graph div.graph li.y_axis_6 {
	width: 100%;
	height: calc(49/360*100%);
	float: left;
	border-top: 1px solid #e5e5e5;
  }
  
  /* ------ other browsers grid ------ */
  
  div.css_bar_graph div.graph li.y_axis_6:nth-child(odd) {
	width: 100%;
	height: calc(49/360*100%);
	float: left;
	border-top: 1px solid #e5e5e5;
	background-color: #f8f8f8;
  }
  
  div.css_bar_graph div.graph li.y_axis_6:nth-child(even) {
	width: 100%;
	height: calc(49/360*100%);
	float: left;
	border-top: 1px solid #e5e5e5;
  }
  div.css_bar_graph div.graph li.y_axis_6:last-child {
	border-bottom: 1px solid #d5d5d5;
  }

  
  /* ==================== BARS COMMON  ==================== */
  /* ------ common styles ------ */
  
  div.css_bar_graph div.graph li.bar {
	width: calc(25/360*100%);
	float: left;
	position: absolute;
	bottom: 5%;
	text-align: center;
  }
  
  /* ------ bar top label ------ */
  
  div.css_bar_graph div.graph li.bar span {
	position: relative;
	top: -30px;
	padding: 3px 5px 3px 5px;
	z-index: 100;
	background-color: #eeeeee;
	border: 1px solid #bebebe;
	/* --- css3 --- */
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	/* --- gradient --- */
	background-image: linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#ebebeb'); /* IE5.5 - 7 */
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#ebebeb'); /* IE8 */
	background: -ms-linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb); /* IE9 */
	background: -moz-linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb); /* Firefox */
	background: -o-linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb); /* Opera 11  */
	background: -webkit-linear-gradient(top, #ffffff, #f1f1f1 1px, #ebebeb); /* Chrome 11  */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(0.05, #f1f1f1), color-stop(1, #ebebeb)); /* Chrome 10, Safari */
	/* --- shadow --- */
	text-shadow: 0px 1px 0px rgba(255,255,255,1);
	box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
  }
  
  /* ------ bars positions ------ */
  
  div.css_bar_graph div.graph li.nr_1 { left: calc(60/360*100%); }
  
  div.css_bar_graph div.graph li.nr_2 { left: calc(100/360*100%); }
  
  div.css_bar_graph div.graph li.nr_3 { left: calc(140/360*100%); }
  
  div.css_bar_graph div.graph li.nr_4 { left: calc(180/360*100%); }
  
  div.css_bar_graph div.graph li.nr_5 { left: calc(220/360*100%); }
  
  div.css_bar_graph div.graph li.nr_6 { left: calc(260/360*100%); }
  
  div.css_bar_graph div.graph li.nr_7 { left: calc(300/360*100%); }
  
  div.css_bar_graph div.graph li.nr_8 { left: calc(340/360*100%); }
  

  /* ==================== BLUE BAR  ==================== */
  /* ------ base ------ */
  
  div.css_bar_graph div.graph li.blue {
	background: #208faf;	/* --- IE --- */
	background: rgba(32,143,175,0.8);
  }
  
  
  /* ==================== GREEN BAR  ==================== */
  /* ------ base ------ */
  
  div.css_bar_graph div.graph li.green {
	background: #608d00;	/* --- IE --- */
	background: rgba(96,141,0,0.8);
  }
  
  /* ==================== ORANGE BAR  ==================== */
  /* ------ base ------ */
  
  div.css_bar_graph div.graph li.orange {
	background: #ff9000;	/* --- IE --- */
  }
  /* ==================== PURPLE BAR  ==================== */
  /* ------ base ------ */
  
  div.css_bar_graph div.graph li.purple {
	background: #7d47ba;	/* --- IE --- */
  }
 
  /* ==================== RED BAR  ==================== */
  /* ------ base ------ */
  
  div.css_bar_graph div.graph li.red {
	background: #d23648;	/* --- IE --- */
  }
  
  /* ==================== HOVERS  ==================== */
  
  div.css_bar_graph div.graph li.blue:hover {
	cursor: pointer;
	background: #208faf;
  }
  
  div.css_bar_graph div.graph li.green:hover {
	cursor: pointer;
	background: #608d00;
  }
  
  div.css_bar_graph div.graph li.orange:hover {
	cursor: pointer;
	background: #ff9000;
  }
  
  div.css_bar_graph div.graph li.purple:hover {
	cursor: pointer;
	background: #7d47ba;
  }
  
  div.css_bar_graph div.graph li.red:hover {
	cursor: pointer;
	background: #d23648;
  }
  
  div.css_bar_graph div.graph li.bar:hover span {
	cursor: pointer;
	top: -40px;
	padding: 10px;
	margin: 0px;
  }



    /* ==================== X-AXIS LABELS  ==================== */
  /* ------ base ------ */
  

div.x_axis_graph {
	width: 100%;
	/* --- font --- */
	font-size: calc(12/750*100vw);
	font-weight: normal;
	color: #444444;
	background-color: #ffffff;
	position: relative;
	margin: 0 auto 40px;
	border-left: 1px solid #d5d5d5;
	border-right: 1px solid #d5d5d5;
	border-bottom: 1px solid #d5d5d5;

}
div.x_axis_graph ul.x_axis {
    width: 85%;
    margin-left: 15%;
	padding-top: calc(98/300*100vw);
}
@media screen and (max-width: 400px) {
	div.x_axis_graph ul.x_axis {
	padding-top: calc(120/300*100vw);
	}
}
@media screen and (min-width: 530px) {
	div.x_axis_graph ul.x_axis {
	padding-top: calc(82/300*100vw);
	}
}
@media screen and (min-width: 641px) {
	  div.x_axis_graph{
		width: 80%;
		font-size: 1.17647vw;
	  }
	  div.x_axis_graph ul.x_axis {
		padding-top: calc(72/300*100vw);
	  }
}
@media screen and (min-width: 830px) {
	div.x_axis_graph ul.x_axis {
	padding-top: calc(60/300*100vw);
	}
}

@media screen and (min-width: 1361px) {
  div.x_axis_graph{
	font-size: 1.6rem;
  }
  div.x_axis_graph ul.x_axis {
	padding-top: 265px;
  }
}

  /* ------ labels ------ */
  
div.x_axis_graph ul.x_axis li {
    position: absolute;
	top: 0;
    transform: rotate(-44deg);
	white-space: nowrap;
	text-align: right;
	display:block;
}