@charset "utf-8";

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

	Common Settings
	
===============================================================*/

img {
	max-width: 100%;
	height: auto;
	width: auto\9;
}

time {
	font-size: 80%;
}

.end {
	display:inline-block;
	padding: 1px 5px 1px 5px !important;
	font-size: 80%;
	color:#fff !important;
	background:#F00 !important;
}
.big {
	font-size: 120%;
}
.bold {
	font-weight: bold;
}
.red {
	color: #F00;
}
.blue {
	color: #00F;
}
.green {
	color: #007130;
}
.redBlock {
	padding: 0px 5px;
	color: #fff;
	background:#F00;
}
.txtCenter {
	text-align: center !important;
}
.txtRight {
	text-align:right;
}
.txtSmall {
	line-height: 1.2;
}
.txtSmall small {
	display:inline-block;
	font-size: 70%;
}


.tel-link a { color: #06F; text-decoration:underline; }

.onmouse { cursor: pointer !important; }
.link_bnr:hover { text-decoration: underline; }

/*--------------------------------------------------------------
	Clearfix
--------------------------------------------------------------*/

.c_both { clear:both; }
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix { display: inline-table; }

/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* End hide from IE-mac */
.clearfix {
    content: ".";  
    display: block;  
    visibility: hidden;  
    height: 0.1px;  
    font-size: 0.1em;  
    line-height: 0;  
    clear: both;
}
dl:after   {
    content: ".";  
    display: block;  
    visibility: hidden;  
    height: 0.1px;  
    font-size: 0.1em;  
    line-height: 0;  
    clear: both;
}
/*
section:before,
section:after {
    content: ".";  
    display: block;  
    visibility: hidden;  
    height: 0.1px;  
    font-size: 0.1em;  
    line-height: 0;  
    clear: both;
}
*/

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

	screensize 	
	
===============================================================*/

@media print, screen and (min-width: 767px){   
  .PC { display: inline-block !important; }
  .SP { display:none !important; }
}
@media only screen and (max-width: 767px){   
  .PC { display:none !important; }
  .SP { display: inline-block !important; }
}


@media print, screen and (min-width: 767px){   
	
/*スマホのみ改行させる*/
.SPbr {
	display:none;
}
.SPbr + br {
	display: none;
}
}
/*--------------------------------------------------------------
	Zoom In / out Icon
--------------------------------------------------------------*/
.zoom {
	position: relative;
	color: #666;
	line-height: 1.3;
}
.zoom i:before {
	display:inline-block;
	font-weight: 900;
	font-family:"Line Awesome Free","Line Awesome Brands";
	content: "\f00e";
}

/*--------------------------------------------------------------
	Pinch in / out Icon
--------------------------------------------------------------*/
.pinch {
	position: relative;
	color: #666;
	line-height: 1.3;
}
.pinch i:before {
	display:inline-block;
	font-weight: 900;
	font-family:"Line Awesome Free","Line Awesome Brands";
	content: "\f0b2";
}
.pinch i:after {
	display:inline-block;
	font-weight: 900;
	font-family:"Line Awesome Free","Line Awesome Brands";
	content: "\f0a6";
}
/*--------------------------------------------------------------
	Slide / Right and Left
--------------------------------------------------------------*/
.slide {
	position: relative;
	color: #666;
	line-height: 1.3;
}
.slide i:before {
	display:inline-block;
	font-weight: 900;
	font-family:"Line Awesome Free","Line Awesome Brands";
	content: "\f362";
}
.slide i:after {
	display:inline-block;
	font-weight: 900;
	font-family:"Line Awesome Free","Line Awesome Brands";
	content: "\f0a6";
}

/*--------------------------------------------------------------
	img 100% 80%
--------------------------------------------------------------*/

.imgAuto {
	width: auto;
	max-width: 100%;
	padding:0px;
	margin: 0px auto;
	text-align:center;
	box-sizing:border-box;
}
.img100,
.img80 {
	width: 100%;
	padding:0px;
	margin: 0px auto 0px;
	text-align:center;
	box-sizing:border-box;
}
.imgAuto img {
	width: auto;
}
.img100 img {
	width: 100%;
}
.img80 img {
	width: 80%;
}
.img100 > a:hover,
.img80 > a:hover {
	opacity: 0.7;
}
@media only screen and (max-width: 767px){   
.imgAuto.SP60 img {
	width: auto;
	max-width: 60%;
}
}

/*--------------------------------------------------------------
	Default ul / ol
--------------------------------------------------------------*/
ul {
	margin: 0 0 0 0;
	padding: 0;
}
ol {
	margin: 0 0 0 20px;
	padding: 0;
}
ul > li,
ol > li {
	position:relative;
	margin: 0;
	padding: 0;
	padding-left: 1em;
	line-height: 1.5;
}
ul > li {
	list-style: none outside;
	margin-bottom: 10px;
}
ul > li:before {
	position:absolute;
	top: 0;
	left: 0px;
	content: "・"
}
ol > li {
	list-style: decimal outside;
}

/*--------------------------------------------------------------
	img List
--------------------------------------------------------------*/
#contents [class*="imgList"] h4 {
	display:block;
	width: 100%;
	margin: 0px auto 20px;
	padding: 0px;
	text-align:center;
}
#contents [class*="imgList"] ul {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
	max-width: 100%;
	list-style: none;
}
#contents [class*="imgList"] ul li {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	
	padding: 10px;
	margin: 0 0 50px;
	list-style: none;
}

#contents [class*="imgList"] ul li > a,
#contents [class*="imgList"] ul li > div {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: auto;
	max-width: 100%;
	height: 100%;
}
#contents [class*="imgList"] ul li img {
	flex-shrink: 0;/*IE*/
	align-self: flex-start;/*safari*/
	width: auto;
	max-width: 100%;
	margin: 0px auto;
	border: 1px solid #ccc;
}

#contents [class*="imgList"] ul li.img200fix img {
	width: 200px;
}

#contents .alignB ul,
#contents .alignB ul li,
#contents .alignB ul li > a,
#contents .alignB ul li > div {
	align-items: flex-end;
	align-content: flex-end;
}


#contents [class*="imgList"] ul li p {
	display:block;
	width: 100%;
	margin-bottom: 0px;
	padding: 0px;
	text-align:center;
}
#contents [class*="imgList"] ul li p.left {
	text-align:left;
}


#contents .imgListAuto ul {
	justify-content: center;
}
#contents .imgListAuto ul li {
	width: auto;
}
#contents .imgList2col ul li {
	width: calc(100% / 2);
}
#contents .imgList3col ul li {
	width: calc(100% / 3);
}
#contents .imgList4col ul li {
	width: calc(100% / 4);
}
#contents .imgList5col ul li {
	width: calc(100% / 5);
}
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, #contents .imgList2col ul li {
	width: 50%;
}
*::-ms-backdrop, #contents .imgList3col ul li {
	width: 33%;
}
*::-ms-backdrop, #contents .imgList4col ul li {
	width: 25%;
}
*::-ms-backdrop, #contents .imgList5col ul li {
	width: 20%;
}
}

@media only screen and (max-width: 767px) {
#contents [class*="imgList"] ul li {
	margin: 0 0 20px;
}
	
#contents .imgList3col ul li {
	width: calc(100%/2);
}

	
#contents .imgList4col ul li,
#contents .imgList5col ul li {
	width: calc(100%/3);
}


}

@media only screen and (max-width: 479px) {
#contents .imgList4col ul li,
#contents .imgList5col ul li {
	width: calc(100%/2);
}

/*----- スマホの時縦並び1カラムに -----*/
#contents .Vertical ul li {
	width: calc(100%);
}
}

/*--------------------------------------------------------------
	Normal Link , External Link
--------------------------------------------------------------*/

.link,
.linkEx,
.linkR,
.linkExR {
	position:relative;
	display: inline-block;
	width: auto;
	margin: 0px auto;
	word-break:break-all;
}

.link,
.linkEx {
	padding-left: 18px;
}
.linkR,
.linkExR {
	padding-right: 20px;
}

.link a,
.linkEx a,
.linkR a,
.linkExR a {
	position:relative;
	display: inline-block;
	text-decoration: underline;
}

.link a:before,
.linkEx a:before,
.linkR a:after,
.linkExR a:after {
	position: absolute;
	display: inline-block;
	width: auto;
	-webkit-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	font-size: 110% !important;
	color: #000;
}
.link a:before {
	top: 0px;
	left: -10px;
	content: "\f0da";
}
.linkEx a:before {
	top: 2px;
	left: -10px;
	content: "\f35d";
	font-size: 0.9em;
}
.linkR a:after {
	bottom: 0px;
	margin-left: 10px;
	content: "\f0da";
}
.linkExR a:after {
	bottom: -3px;
	margin-left: 10px;
	content: "\f35d";
	font-size: 0.9em;
}

/*--------------------------------------------------------------
	PDF / WORD / EXCEL
--------------------------------------------------------------*/
.pdf,
.word,
.excel {
	vertical-align:middle;
	margin-right: 10px;
	padding-left: 22px;
	background-size: contain;
	text-align:left;
}

.pdf {
	background: url(../images/common/pdf.gif) no-repeat 0% 8px;
}
.word {
	background: url(../images/common/word.gif) no-repeat 0% 8px;
}
.excel {
	background: url(../images/common/excel.gif) no-repeat 0% 8px;
}

/*--------------------------------------------------------------
	Small / Medium / Large  btn
--------------------------------------------------------------*/
[class$="btn_l"]{
	margin: 5px auto;
	text-align: left;
}
[class$="btn_c"]{
	margin: 5px auto;
	text-align:center;
}
[class$="btn_r"]{
	margin: 5px auto;
	text-align:right;
}

[class$="btn_l"] a,
[class$="btn_c"] a,
[class$="btn_r"] a {
	position:relative;
	display: inline-block;
	text-decoration: none;
	color: #000;
	border: 1px solid #000;
}
[class$="btn_l"] .white,
[class$="btn_c"] .white,
[class$="btn_r"] .white {
	color: #fff;
	border: 1px solid #fff;
}

[class^="s_btn"] a {
	padding: 5px 40px 5px 20px;
	font-size: 80%;
}

[class^="m_btn"] a  {
	padding: 10px 70px 10px 40px;
	font-size: 100%;
}

[class^="l_btn"] a {
	padding: 10px 80px 10px 50px;
	font-size: 110%;
}
[class^="s_btn"] a:after,
[class^="m_btn"] a:after,
[class^="l_btn"] a:after {
	position: absolute;
	top: 50%;
	right: 20px;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 120%;
	font-family:"Line Awesome Free","Line Awesome Brands";
	font-weight: 900;
	content: "\f061";
}

[class^="s_btn"] a:after {
	right: 15px;
}

[class$="btn_l"] a:hover,
[class$="btn_c"] a:hover,
[class$="btn_r"] a:hover {
	color: #fff;
	border: 1px solid #00479d;
	background: #00479d;
}
[class$="btn_l"] .white:hover,
[class$="btn_c"] .white:hover,
[class$="btn_r"] .white:hover{
	color: #fff;
	border: 1px solid #000;
}


/*--------------------------------------------------------------
	Button List
---------------------------------------------------------------*/
.btnBG {
	display:block;
	width: 100%;
	padding: 30px 0px;
	background: rgba(102,153,255,0.15);
}
.btnBG nav {
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.btnBG .btnList:last-of-type {
	margin-bottom: 0px !important;
}

@media only screen and (max-width: 1000px) {
.btnBG nav {
	width: 100%;
	max-width: 95%;
}	
}

/*	 Common Base
---------------------------------------------------------------*/
.btnList {
	position:relative;
	display: block;
	width: 100%;
	margin: 0px auto 50px;
}
.btnList h4 {
	padding-left: 15px;
}
.btnList ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;

	width: 100%;
	margin: 0px auto;
    list-style: none;
}
.btnList ul li {
	display: flex;
	align-items: stretch;
	align-content: stretch;
	min-height: 40px;
	padding: 0px;
	list-style: none;
}
.btnList ul li a {
	position:relative;
	display: flex;
	align-items: center;
	
	width: 100%;
	padding: 15px 25px 15px 15px;
	text-decoration: none;
	line-height: 1.2;
	color: #000;

}
.btnList ul li a:hover {
	color: #fff;
	background: rgba(0,51,136,0.7);
}
.btnList ul li a:before {
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 10px;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da";
}

@media print, screen and (min-width: 768px) {
	
/*	 Size
---------------------------------------------------------------*/
.col2 ul li {
	width: 48%;
}
.col3 ul li {
	width: 31.333%;
}
.col4 ul li {
	width: 23%;
}
.col5 ul li {
	width: 18%;
}
.col6 ul li {
	width: 14.666%;
}

/*	 Border
---------------------------------------------------------------*/
.btnList ul li {
	/*border-right: 1px solid #666;*/
	border-bottom: 1px solid #666;
}

/*	 For 2 Column
--------------------------------------*/
.col2 ul li{
	margin-right: 4%;
}
.col2 ul li:nth-child(2n) {
	margin-right: 0%;
}
.col2 ul li:nth-child(2n+1) {
	/*border-left: 1px solid #666;*/
}
.col2 ul li:nth-child(-n+2) {
	/*border-top: 1px solid #666;*/
}

/*	 For 3 Column
--------------------------------------*/
.col3 ul li {
	margin-right: 3%;
}
.col3 ul li:nth-child(3n) {
	margin-right: 0%;
}
.col3 ul li:nth-child(3n+1) {
	/*border-left: 1px solid #666;*/
}
.col3 ul li:nth-child(-n+3) {
	/*border-top: 1px solid #666;*/
}

/*	 For 4 Column
--------------------------------------*/
.col4 ul li {
	margin-right: 2.666%;
}
.col4 ul li:nth-child(4n) {
	margin-right: 0%;
}
.col4 ul li:nth-child(4n+1) {
	/*border-left: 1px solid #666;*/
}
.col4 ul li:nth-child(-n+4) {
	/*border-top: 1px solid #666;*/
}

/*	 For 5 Column
--------------------------------------*/
.col5 ul li {
	margin-right: 2.5%;
}
.col5 ul li:nth-child(5n) {
	margin-right: 0%;
}
.col5 ul li:nth-child(5n+1) {
	/*border-left: 1px solid #666;*/
}
.col5 ul li:nth-child(-n+5) {
	/*border-top: 1px solid #666;*/
}

/*	 For 6 Column
--------------------------------------*/
.col6 ul li {
	margin-right: 2.4%;
}
.col6 ul li:nth-child(6n) {
	margin-right: 0%;
}
.col6 ul li:nth-child(6n+1) {
	/*border-left: 1px solid #666;*/
}
.col6 ul li:nth-child(-n+6) {
	/*border-top: 1px solid #666;*/
}
}

@media print, screen and (min-width: 479px) and (max-width: 767px)  {
	
/*	 Size
---------------------------------------------------------------*/
.col2 ul li {
	width: 48%;
}
.col3 ul li {
	width: 31.333%;
}
.col4 ul li {
	width: 31.333%;
}
.col5 ul li {
	width: 31.333%;
}
.col6 ul li {
	width: 31.333%;
}

/*	 Border
---------------------------------------------------------------*/
.btnList ul li {
	/*border-right: 1px solid #666;*/
	border-bottom: 1px solid #666;
}

/*	 For 2 Column
--------------------------------------*/
.col2 ul li{
	margin-right: 4%;
}
.col2 ul li:nth-child(2n) {
	margin-right: 0%;
}
.col2 ul li:nth-child(2n+1) {
	/*border-left: 1px solid #666;*/
}
.col2 ul li:nth-child(-n+2) {
	/*border-top: 1px solid #666;*/
}

/*	 For 3 Column
--------------------------------------*/
.col3 ul li {
	margin-right: 3%;
}
.col3 ul li:nth-child(3n) {
	margin-right: 0%;
}
.col3 ul li:nth-child(3n+1) {
	/*border-left: 1px solid #666;*/
}
.col3 ul li:nth-child(-n+3) {
	/*border-top: 1px solid #666;*/
}

/*	 For 4 Column
--------------------------------------*/
.col4 ul li {
	margin-right: 3%;
}
.col4 ul li:nth-child(3n) {
	margin-right: 0%;
}
.col4 ul li:nth-child(3n+1) {
	/*border-left: 1px solid #666;*/
}
.col4 ul li:nth-child(-n+3) {
	/*border-top: 1px solid #666;*/
}

/*	 For 5 Column
--------------------------------------*/
.col5 ul li {
	margin-right: 3%;
}
.col5 ul li:nth-child(3n) {
	margin-right: 0%;
}
.col5 ul li:nth-child(3n+1) {
	/*border-left: 1px solid #666;*/
}
.col5 ul li:nth-child(-n+3) {
	/*border-top: 1px solid #666;*/
}

/*	 For 6 Column
--------------------------------------*/
.col6 ul li {
	margin-right: 3%;
}
.col6 ul li:nth-child(3n) {
	margin-right: 0%;
}
.col6 ul li:nth-child(3n+1) {
	/*border-left: 1px solid #666;*/
}
.col6 ul li:nth-child(-n+3) {
	/*border-top: 1px solid #666;*/
}
}

@media only screen and (max-width: 479px)  {
	
/*	 Size
---------------------------------------------------------------*/
.col2 ul li,
.col3 ul li,
.col4 ul li,
.col5 ul li,
.col6 ul li {
	width: 48%;
}

/*	 Border
---------------------------------------------------------------*/
.btnList ul li {
	/*border-right: 1px solid #666;*/
	border-bottom: 1px solid #666;
}

/*	 For 2 Column
--------------------------------------*/
.col2 ul li{
	margin-right: 4%;
}
.col2 ul li:nth-child(2n) {
	margin-right: 0%;
}
.col2 ul li:nth-child(2n+1) {
	/*border-left: 1px solid #666;*/
}
.col2 ul li:nth-child(-n+2) {
	/*border-top: 1px solid #666;*/
}

/*	 For 3 Column
--------------------------------------*/
.col3 ul li{
	margin-right: 4%;
}
.col3 ul li:nth-child(2n) {
	margin-right: 0%;
}
.col3 ul li:nth-child(2n+1) {
	/*border-left: 1px solid #666;*/
}
.col3 ul li:nth-child(-n+2) {
	/*border-top: 1px solid #666;*/
}

/*	 For 4 Column
--------------------------------------*/
.col4 ul li{
	margin-right: 4%;
}
.col4 ul li:nth-child(2n) {
	margin-right: 0%;
}
.col4 ul li:nth-child(2n+1) {
	/*border-left: 1px solid #666;*/
}
.col4 ul li:nth-child(-n+2) {
	/*border-top: 1px solid #666;*/
}

/*	 For 5 Column
--------------------------------------*/
.col5 ul li{
	margin-right: 4%;
}
.col5 ul li:nth-child(2n) {
	margin-right: 0%;
}
.col5 ul li:nth-child(2n+1) {
	/*border-left: 1px solid #666;*/
}
.col5 ul li:nth-child(-n+2) {
	/*border-top: 1px solid #666;*/
}

/*	 For 6 Column
--------------------------------------*/
.col6 ul li{
	margin-right: 4%;
}
.col6 ul li:nth-child(2n) {
	margin-right: 0%;
}
.col6 ul li:nth-child(2n+1) {
	/*border-left: 1px solid #666;*/
}
.col6 ul li:nth-child(-n+2) {
	/*border-top: 1px solid #666;*/
}
}

/*--------------------------------------------------------------
	List style Normal Default  [ txt ]
---------------------------------------------------------------*/
.defaultList {
	width: 100%;
	margin: 10px auto;
}
.defaultList ul li {
	line-height: 2;
	list-style: none;
}
	
/*--------------------------------------------------------------
	List style Type disc  [ txt ]
---------------------------------------------------------------*/
.discList {
	margin: 10px auto;
}
.discList ul {
	width: 100%;
	margin: 0px auto;
	list-style:none;
}
.discList ul li {
	margin: 0px 0px 10px 30px;
	list-style: disc;
	line-height: 1.8;
}
	
/*--------------------------------------------------------------
	List style Type number  [ txt ]
--------------------------------------------------------------*/
.numList {
	margin: 0px auto;
}
	
.numList > ul,
.numList > ol {
	width: 100%;
	margin: 0px auto;
	list-style:none;
}
	.numList > ul > li,
	.numList > ol > li {
		margin: 0px 0px 10px 30px;
		list-style: decimal;
	}
	
@media only screen and (max-width: 479px) {
	.numList > ul > li,
	.numList > ol > li {
		margin: 0px 0px 10px 20px;
	}
}
	
/*--------------------------------------------------------------
	List style Type number 2  [ ○number ]
--------------------------------------------------------------*/
.numList2 > ol  {
	position: relative;
	margin:0;
	padding:0
}
.numList2 > ol > li  {
	margin: 0px 0px 10px 5px;
	padding-left:1.25em;
	list-style: none;
	list-style-position: inside;
	line-height: 1.5;
}
.numList2 > ol > li > span {
	position: absolute;
	left:0;
	margin:0;
}
/*IE6*/
*html .numList2 > ol > li > span  {
	left: -1.25em;
}

/*--------------------------------------------------------------
	Boder List
---------------------------------------------------------------*/
.BorderList {
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px dashed #66CCFF;
}
.BorderList:last-of-type {
	padding-bottom: 0px;
	margin-bottom: 0px;
	border-bottom: none;
}

/*--------------------------------------------------------------
	Normal dl
---------------------------------------------------------------*/
.normal_dl {
	margin: 0px auto;
	padding: 0px;
}
	.normal_dl dl {
		display:table;
		width: 100%;
		margin: 0px auto;
		box-sizing:border-box;
		overflow: hidden;
	}
	.normal_dl dl:last-child {
		border-bottom: 1px dotted #666;
	}
		.normal_dl dt,
		.normal_dl dd {
			font-size: 100%;
			padding: 10px 10px 5px 10px;
			min-height: 25px;
		}
		.normal_dl dt:after,
		.normal_dl dd:after {
			display: inline-block;
			content:"";
			height: 100%;
		}
		.normal_dl dt {
			clear: left;
			float: left;
			min-width: 60px;
			margin-right: 1px;
			border-top: 1px dotted #666;
		}
		.normal_dl dt:after {
			clear: left;
			content: "";
		}
		.normal_dl dd {
			border-top: 1px dotted #666;
			overflow:hidden;
			background: #fff;
		}
		.normal_dl dt:first-child,
		.normal_dl dd:nth-child(2) {
			border-top: none;
		}
		
		
@media only screen and (max-width: 479px) {
	.normal_dl dl:last-child {
		border-bottom: none;
	}
}

/*--------------------------------------------------------------
	dl List 1Column
---------------------------------------------------------------*/
.dl1colList {

	display:block;
	width: 100%;
}
.dl1colList dl {
    display: block;
}
.dl1colList dl dt,
.dl1colList dl dd {
	display:block;
	width: 100%;
	padding: 3px 10px;
}

.dl1colList dl dt {
	font-size: 1.1em;
	font-weight:bold;
}
.dl1colList dl dt small {
	display: inline-block;
	margin-left: 10px;
	color: #959595;
}
.dl1colList dl dd {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #c9c9c9;
}
.dl1colList dl dd:last-of-type {
	border-bottom: none;
}

/*----- specialist only -----*/
.dl1colList dl dt p {
	display:inline-block;
}
.dl1colList dl dd .more {
	display:inline;
	margin-left: 10px;
	color: #0066cc;
}

/*--------------------------------------------------------------
	dl List 2Column
---------------------------------------------------------------*/
.dl2colList {
	display:block;
	width: 100%;
}
.dl2colList dl {
	position:relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.dl2colList dl dt {
	width: 15%;
	padding: 10px 30px 25px 0px;
	font-weight:bold;
	border-right: 2px solid #c9c9c9;
}
.dl2colList dl dd {
	width: 85%;
	padding: 10px 0px 25px 30px;
}

@media print, screen and (min-width: 1010px) {
.dl2colList dl dt {
	width: 15%;
}
.dl2colList dl dd {
	width: 85%;
}
}
@media only screen and (max-width: 767px) {
.dl2colList dl dt {
	width: 35%;
}
.dl2colList dl dd {
	width: 65%;
}
}

@media only screen and (max-width: 479px) {
.dl2colList dl {
    display: block;
}
.dl2colList dl dt {
	border-right: none;
	background:rgba(0,51,136,0.2);
}
.dl2colList dl dd {
	margin-bottom: 20px;
}
.dl2colList dl dt,
.dl2colList dl dd {
	display:block;
	width: 100%;
	padding: 3px 10px;
}
}

/*--------------------------------------------------------------
	Youtube
---------------------------------------------------------------*/
.youtube {
	position:relative;
	margin: 0px auto 20px;
	text-align:center;
	
	width:100%;
	padding-top:56.25%;
}

.yt100 {
	width:100%;
	padding-top:56.25%;
}
.yt80 {
	width:80%;
	padding-top:45%;
}
.yt60 {
	width:100%;
	max-width: 60%;
	padding-top:56.25%;
}
.yt50 {
	width:50%;
	padding-top:28.12%;
}

.youtube iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*--------------------------------------------------------------
	Google Map
---------------------------------------------------------------*/
.GoogleMap {
	position:relative;
	width:100%;
	padding-top:56.25%;
	margin: 0px auto;
	text-align:center;
	border: 1px solid #CCC;
	overflow:hidden;
	box-sizing:border-box;
}
.GoogleMap iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

	Size Adjust Common [ table / Column List ]
	
===============================================================*/

#wrapper .width5 { width: 5%;}
#wrapper .width10 { width: 10%;}
#wrapper .width15 { width: 15%;}
#wrapper .width20 { width: 20%;}
#wrapper .width25 { width: 25%;}
#wrapper .width30 { width: 30%;}
#wrapper .width35 { width: 35%;}
#wrapper .width40 { width: 40%;}
#wrapper .width45 { width: 45%;}
#wrapper .width50 { width: 50%;}
#wrapper .width55 { width: 55%;}
#wrapper .width60 { width: 60%;}
#wrapper .width65 { width: 65%;}
#wrapper .width70 { width: 70%;}
#wrapper .width75 { width: 75%;}
#wrapper .width80 { width: 80%;}
#wrapper .width85 { width: 85%;}
#wrapper .width90 { width: 90%;}
#wrapper .width95 { width: 95%;}
#wrapper .width100 { width: 100%;}


#wrapper .size5 { width: 5%;}
#wrapper .size10 { width: 10%;}
#wrapper .size15 { width: 15%;}
#wrapper .size20 { width: 20%;}
#wrapper .size25 { width: 25%;}
#wrapper .size30 { width: 30%;}
#wrapper .size35 { width: 35%;}
#wrapper .size40 { width: 40%;}
#wrapper .size45 { width: 45%;}
#wrapper .size50 { width: 50%;}
#wrapper .size55 { width: 55%;}
#wrapper .size60 { width: 60%;}
#wrapper .size65 { width: 65%;}
#wrapper .size70 { width: 70%;}
#wrapper .size75 { width: 75%;}
#wrapper .size80 { width: 80%;}
#wrapper .size85 { width: 85%;}
#wrapper .size90 { width: 90%;}
#wrapper .size95 { width: 95%;}
#wrapper .size100 { width: 100%;}

@media only screen and (max-width: 767px) {
#wrapper .size5,
#wrapper .size10,
#wrapper .size15,
#wrapper .size20,
#wrapper .size25,
#wrapper .size30,
#wrapper .size35,
#wrapper .size40,
#wrapper .size45,
#wrapper .size50,
#wrapper .size55,
#wrapper .size60,
#wrapper .size65,
#wrapper .size70,
#wrapper .size75,
#wrapper .size80,
#wrapper .size85,
#wrapper .size90,
#wrapper .size95,
#wrapper .size100 { width: 100%;}
}


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

	table List [ 2col ]
	
===============================================================*/
.table2col {
	width: 100%;
	margin: 0px auto 40px;
	border-left: solid 1px #ddd;
	box-sizing:border-box;
	background: #FFF;
}
.table2col dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;

	width: 100%;
	margin: 0px auto;
    list-style: none;

	border-top: solid 1px #ddd;
}

.table2col dl dt {
	background-color: #f7f5ec;
}
.table2col dl dt,
.table2col dl dd {
	padding: 10px;
	border-right: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
	vertical-align: top;
	*zoom: 1;
	box-sizing:border-box;
}

@media only screen and (max-width: 767px) {
	
.table2col {
	border-bottom:none;
	border-left:none;
}
.table2col dl:first-child {
	border-top: solid 1px #ddd;
}
.table2col dl {
	display: block;
	border-left: solid 1px #ddd;
	border-bottom:none;
}
.table2col dl:first-child dt:first-child,
.table2col dl:first-child dd:nth-child(n) {
	border-top:none;
}

.table2col dl dt,
.table2col dl dd {
	display: block;
}

}

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

	Text and Img 2column List
	
===============================================================*/
.timg2colst * {
	box-sizing:border-box;
}
.timg2colst ul {
	display: block;

	width: 100%;
	margin: 0px auto;
    list-style: none;
}


@media print, screen and (min-width: 767px) {
.timg2colst {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;

	width: 100%;
	margin: 0px auto;
    list-style: none;
}

.timg2colst .txtL {
	-webkit-order: 1;
	order: 1;
}
.timg2colst .imgR {
	-webkit-order: 2;
	order: 2;
	padding-left: 30px;
}


.timg2colst .imgL {
	-webkit-order: 1;
	order: 1;
	padding-right: 30px;
}
.timg2colst .txtR {
	-webkit-order: 2;
	order: 2;
}


}

@media only screen and (max-width: 767px) {
.timg2colst .txtL {
	margin-bottom: 30px;
}
.timg2colst .imgR,
.timg2colst .imgL {
	margin: 20px auto;
	text-align:center;
}
.timg2colst .imgR p,
.timg2colst .imgL p {
	text-align: left;
}

}

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

	Table dl only
	
===============================================================*/
.dlTable {
	width: 100%;
	margin: 0px auto 30px;
	background: #FFF;
}

.dlTable > dl {
	display: flex;
	border: 1px solid rgba(44,184,194,1);
}

.dlTable > dl > dt,
.dlTable > dl > dd {
	padding: 10px 20px;
}
.dlTable > dl > dt > p,
.dlTable > dl > dd > p {
	padding: 0px !important;
}


.dlTable > dl > dt {
	background-color: rgba(44,184,194,0.2);
}

.dlTable > dl {
	flex-wrap: wrap;
}
.dlTable > dl > dd {
}
.dlTable > dl > dt,
.dlTable > dl > dd {
	border-bottom: 1px dashed rgba(44,184,194,1);
}
.dlTable > dl > dt:last-of-type,
.dlTable > dl > dd:last-of-type {
	border-bottom: none;
}


@media only screen and (max-width: 767px) {
	
.dlTable > dl > dt > p,
.dlTable > dl > dd > p {
	padding: 0px !important;
}
.dlTable > dl > dt,
.dlTable > dl > dd {
	padding: 10px !important;
	border-bottom: 1px solid rgba(44,184,194,1);
}


}

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

	Table ul dl
	
===============================================================*/

.uldlTable {
	width: 100%;
	margin: 0px auto 30px;
	background: #FFF;
}
.uldlTable.small {
	font-size: 0.8em;
}

.uldlTable > ul,
.uldlTable > dl {
	display: flex;
}

.uldlTable > ul > li,
.uldlTable > dl > dt,
.uldlTable > dl > dd {
	padding: 10px 20px;
	list-style: none;
}
.uldlTable > ul > li > p,
.uldlTable > dl > dt > p,
.uldlTable > dl > dd > p {
	padding: 0px !important;
}


.uldlTable > ul > li,
.uldlTable > dl > dt {
	text-align: center;
}

/*----- ul -----*/
.uldlTable > ul {
	width: 100%;
	border-top: 1px solid rgba(44,184,194,1);
	border-left: 1px solid rgba(44,184,194,1);
	border-right: 1px solid rgba(44,184,194,1);
	background-color: rgba(44,184,194,0.2);
}
.uldlTable > ul > li {
	border-left: 1px dashed rgba(44,184,194,1);
}
.uldlTable > ul > li:first-of-type {
	border-left: none;
}

/*----- dl -----*/
.uldlTable > dl {
	flex-wrap: wrap;
	border-left: 1px solid rgba(44,184,194,1);
	border-right: 1px solid rgba(44,184,194,1);
	border-bottom: 1px solid rgba(44,184,194,1);
}
.uldlTable > dl > dd {
	border-left: 1px dashed rgba(44,184,194,1);
}
.uldlTable > dl > dt,
.uldlTable > dl > dd {
	border-top: 1px dashed rgba(44,184,194,1);
}


/*--------------------------------------------------------------
	Table Option
--------------------------------------------------------------*/
@media print, screen and (min-width: 767px) {
.wrap > ul > li > .ttl,
.wrap > dl > dt > .ttl,
.wrap > dl > dd > .ttl {
	display: none;
}
}

@media only screen and (max-width: 767px) {
	
.wrap > ul {
	display: none;
}
.wrap > dl {
	flex-direction: column;
}
.wrap > ul > li,
.wrap > dl > dt,
.wrap > dl > dd {
	width: 100%;
	text-align:left;
}

/*----- dl -----*/
.wrap > dl {
	border-top: 1px solid rgba(44,184,194,1);
}
.wrap > dl > dt {
	background-color: rgba(44,184,194,0.2);
}
.wrap > dl > dd {
	border-left: none;
}
.wrap > dl > dt:first-of-type {
	border-top: none;
}

.wrap > ul > li,
.wrap > dl > dt,
.wrap > dl > dd {
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
}

.wrap > ul > li > .ttl,
.wrap > dl > dt > .ttl,
.wrap > dl > dd > .ttl,
.wrap > ul > li > .ttl2,
.wrap > dl > dt > .ttl2,
.wrap > dl > dd > .ttl2 {
	display:flex;
	align-items: center;
	padding: 10px;
	background: rgba(44,184,194,0.2);
}
.wrap > ul > li > .ttl + p,
.wrap > dl > dt > .ttl + p,
.wrap > dl > dd > .ttl + p,
.wrap > ul > li > .ttl2 + p,
.wrap > dl > dt > .ttl2 + p,
.wrap > dl > dd > .ttl2 + p {
	padding: 10px !important;
}
.wrap > ul > li > .ttl,
.wrap > dl > dt > .ttl,
.wrap > dl > dd > .ttl {
	width: 30%;
}
.wrap > ul > li > .ttl + p,
.wrap > dl > dt > .ttl + p,
.wrap > dl > dd > .ttl + p {
	width: 70%;
}

.wrap > ul > li > .ttl2,
.wrap > dl > dt > .ttl2,
.wrap > dl > dd > .ttl2 {
	width: 100%;
}
.wrap > ul > li > .ttl2 + p,
.wrap > dl > dt > .ttl2 + p,
.wrap > dl > dd > .ttl2 + p {
	width: 100%;
}

}


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

	Stripe List
	
===============================================================*/

.StripeList {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0px auto;
}

.StripeList dl {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
	width: 100%;
	max-width: 100%;
	margin: 0px auto;
}

.StripeList dl dt,
.StripeList dl dd {
	display: flex;
	align-items: center;
	padding: 20px 3%;
	font-weight: 300;
}

@media print, screen and (min-width: 767px) {

.StripeList dl dt:nth-of-type(2n+1),
.StripeList dl dd:nth-of-type(2n+1) {
	background: rgba(135,166,214,0.2);
}
}


.StripeList dl dt > h5,
.StripeList dl dd > div,
.StripeList dl dd > p {
	font-weight: 300;
	padding: 0px;
	margin: 0px;
}

.StripeList dl dd > p {
	padding: 0px !important;
}

@media only screen and (max-width: 767px) {
.StripeList dl dt,
.StripeList dl dd {
	width: 100%;
	max-width: 100%;
}
	
.StripeList dl dt {
	margin-top: 20px;
	padding: 7px 10px;
	background: rgba(135,166,214,0.3);
}
.StripeList dl dt h5 {
	display:inline-block;
	font-weight: 400;
}
.StripeList dl dd {
	padding: 7px 10px;
}

}

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

	Normal Table
	
===============================================================*/
table {
	width: auto;
	border-collapse: separate;
	border-spacing:0;
	empty-cells:show;

	border-top:1px solid #ccc;
	border-left:none;
	border-bottom:none;
	border-right:1px solid #ccc;
	
	font-size: 90%;
}
table th,
table td {
	padding: 10px;
	border-top:none;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-right:none;
}
table th {
	width: auto;
	text-align:center;
	font-weight: 500;
	background-color:#eee;
}
table td {
	vertical-align:top;
}

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

	Table [ side slide ]
	
===============================================================*/

#scrollTable {
	width:100%;
	position:relative;
	margin: 0px auto 30px;
	box-sizing:border-box;
}

#scrollTable * {
	box-sizing:border-box;
}

#scrollTable table {
	width: 100%;
	border-collapse: separate;
	border-spacing:0;
	empty-cells:show;

	border-top:1px solid #ccc;
	border-left:none;
	border-bottom:none;
	border-right:1px solid #ccc;
}

#scrollTable th,
#scrollTable td {
	padding: 15px 10px;
	border-top:none;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-right:none;
}
#scrollTable tbody th,
#scrollTable thead th:first-child {
	/*width: 25%;*/
	background-color:#eee;
}

#scrollTable tbody td {
	/*width: 25%;*/
	vertical-align:top;
}
	#scrollTable tbody td small {
		display:block;
		color: #666;
		font-size: 90%;
	}

#scrollTable thead th {
	width: auto;
	text-align:center;
	font-weight: 500;
	background-color: #fff;
}


/*----- Option -----*/

/*----- 全体 -----*/
.thCenter table th,
.tdCenter table td {
	text-align:center;
}

/*----- 個別毎に -----*/
table .Center th,
table .Center td {
	text-align:center;
}




@media only screen and (max-width: 797px) {
	
#scrollTable {
	overflow-x:scroll;
}

	#scrollTable table {
		width: 150%;
	}
	
	#scrollTable.width300 table {
		width: 300%;
	}
	
	
#scrollTable th,
#scrollTable td {
	padding: 8px 10px;
	vertical-align:top;
}

#scrollTable table {
	border-right:1px solid #fff;
}

#scrollTable tr th:last-child,
#scrollTable tr td:last-child {
	border-right:1px solid #ccc;
}

}

/*----- Option -----*/

table .blue {
	background-color: #d9ffff;
}
table .yellow {
	background-color: #ffffac;
}
table .pink {
	background-color: #ffc8c8;
}


.shape {
	display: inline-block;
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}
.shape.i01 {
	background-image:url(../images/products/shape01.gif);
}

.shape.i02 {
	background-image:url(../images/products/shape02.gif);
}

.shape.i03 {
	background-image:url(../images/products/shape03.gif);
}