@charset "utf-8";
/* CSS Document */


.box_tab {
	margin: 0 2%;
}

.box_full {
    width: 100%;
}

.tabbox {
	clear: left;
	padding-top: 3%;
	padding-right: 0px;
	padding-bottom: 3%;
	padding-left: 0px;
	width: 100%;
}

/* タブ２
-----------------------------------------*/
/* タブ */
ul#tab {
	zoom: 1;
	color: #666666;
	list-style: none;
	padding: 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: -5px;
	margin-left: auto;
}
ul#tab:after {
	content:".";
	display: block;
	height:0px;
	clear:both;
	line-height:0;
	visibility:hidden;
}
ul#tab li {
	float: left;
	text-align: center;
	margin-left: 20px;
}
.syncer-acdn{
	float: left;
	text-align: center;
	margin-left: 35px;
}

ul#tab li:last-child {
	background: none;
}
ul#tab li a {
	display: block;
	color:#666666;
	font-size: 18px;
	padding: 15px 0px 15px 0px;
	border: 1px solid pink;
	/*border-bottom:none;*/
	/*border-radius: 5px 5px 0 0;*/
	box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
	background-color:#fff;
	text-decoration: none;
	width: 480px;
	border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    transition: all .5s ease;
	}
ul#tab li a:hover {
    color: #666;
    border-color: pink;
    outline: 0;
	text-decoration: none;
}
ul#tab li.active,
ul#tab li.active a,
ul#tab li.active a:hover {
    color:#fff;
    border-color: pink;
    outline: 0;
	background-color:pink;
	border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    transition: all .5s ease;
}
#detail {
	clear: both;
	overflow: hidden;
	width: 100%;
	position: relative;
	padding: 20px 1% 20px 1%;
	box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
	/*border-radius: 0 5px 5px 5px;*/
	border-left: solid 1px #CCC;
	border-right: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}
.tabbox {
	display: none;
}



/* タブ３
-----------------------------------------*/
/* タブ */
ul#tab03 {
	zoom: 1;
	color: #666666;
	list-style: none;
	padding: 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: -5px;
	margin-left: auto;
}
ul#tab03:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
ul#tab03 li {
	float: left;
	text-align: center;
	margin-left: 35px;
}
/*.syncer-acdn{
	float: left;
	text-align: center;
	margin-left: 35px;
}*/

ul#tab03 li:last-child {
	background: none;
}
ul#tab03 li a {
	display: block;
	color:#666666;
	font-size: 18px;
	padding-top: 15px;
	padding-right: 40px;
	padding-bottom: 15px;
	padding-left: 0;
	border-bottom:none;
	border-radius: 5px 5px 0 0;
	box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
	background-color:#CCCCCC;
	width: 300px;
	}
ul#tab03 li a:hover {
    color: #ffffff;
    border-color: #333;
    outline: 0;
	text-decoration: none;
}
ul#tab03 li.active,
ul#tab03 li.active a,
ul#tab03 li.active a:hover {
    color:#666666;
    border-color: #333;
    outline: 0;
	background-image:url("../img/bg/1_37.gif");
	background-repeat:repeat;
}
#detail {
	clear: both;
	overflow: hidden;
	width: 100%;
	position: relative;
	padding: 20px 1% 20px 1%;
	box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
	/*border-radius: 0 5px 5px 5px;*/
	border-left: solid 1px #CCC;
	border-right: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}
/*.tabbox {
	display: none;
}*/

/* タブ４
-----------------------------------------*/
/* タブ */
ul#tab04 {
	zoom: 1;
	color: #666666;
	list-style: none;
	padding: 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: -5px;
	margin-left: auto;
}
ul#tab04:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
ul#tab04 li {
	float: left;
	text-align: center;
	margin-left: 35px;
}
/*.syncer-acdn{
	float: left;
	text-align: center;
	margin-left: 35px;
}*/

ul#tab04 li:last-child {
	background: none;
}
ul#tab04 li a {
	display: block;
	color:#666666;
	font-size: 18px;
	padding: 15px 0px 15px 0px;
	border: 1px solid pink;
	/*border-bottom:none;*/
	/*border-radius: 5px 5px 0 0;*/
	box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
	background-color:#fff;
	text-decoration: none;
	width: 200px;
	border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    transition: all .5s ease;
	}
ul#tab04 li a:hover {
    color: #ffffff;
    border-color: #333;
    outline: 0;
	text-decoration: none;
}
ul#tab04 li.active,
ul#tab04 li.active a,
ul#tab04 li.active a:hover {
    color:#fff;
    border-color: pink;
    outline: 0;
	background-color:pink;
	border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    transition: all .5s ease;
}
#detail {
	clear: both;
	overflow: hidden;
	width: 100%;
	position: relative;
	padding: 20px 1% 20px 1%S;
	box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
	/*border-radius: 0 5px 5px 5px;*/
	border-left: solid 1px #CCC;
	border-right: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}
/*.tabbox {
	display: none;
}*/

/* タブ４（固定ボタン）
-----------------------------------------*/
/* タブ */
ul#tab04s {
	zoom: 1;
	color: #666666;
	list-style: none;
	padding: 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: -5px;
	margin-left: auto;
}
ul#tab04s:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
ul#tab04s li {
	/*float: left;*/
	text-align: center;
	margin-left: 35px;
	margin: 0px;
}

ul#tab04s li:last-child {
	background: none;
}
ul#tab04s li a {
	display: block;
	color:#666666;
	font-size: 18px;
	/*padding: 15px 0px 15px 0px;*/
	/*border: 1px solid pink;*/
	/*border-bottom:none;*/
	/*border-radius: 5px 5px 0 0;*/
	/*box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);*/
	text-decoration: none;
	/*width: 200px;*/
	border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    transition: all .5s ease;
	}
ul#tab04s li a:hover {
    color: #ffffff;
    border-color: #333;
    outline: 0;
	text-decoration: none;
}
ul#tab04s li.active,
ul#tab04s li.active a,
ul#tab04s li.active a:hover {
    color:#fff;
    border-color: pink;
    outline: 0;
	background-color:pink;
	border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    transition: all .5s ease;
}
#detail {
	clear: both;
	overflow: hidden;
	width: 100%;
	position: relative;
	padding: 20px 1% 20px 1%S;
	box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
	/*border-radius: 0 5px 5px 5px;*/
	border-left: solid 1px #CCC;
	border-right: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}
/*.tabbox {
	display: none;
}*/


/*------------↓ここからウィンドウ幅が770〜1024pxの場合に適用するCSS---------------*/
@media screen and (max-width: 1024px) {
.box_full {
    width: 100%;
}
.tabbox {
	width: 100%;
}	
ul#tab li a {
	width: 45vw;
}

#detail {
	width: 100%;
}

/* タブ３
-----------------------------------------*/
ul#tab03 li a {
	width: 180px;
}
/* タブ４
-----------------------------------------*/
ul#tab04 li {
	width: 20%;
}
	
ul#tab04 li a {
	width: 100%;
}
/* タブ４（固定ボタン）
-----------------------------------------
ul#tab04s li {
	width: 20%;
}
	
ul#tab04s li a {
	width: 100%;
}*/
	
ul#tab04s {
	margin: 0px 0px 0px 0px;
	padding: 0 ;
	/*max-width: 992px;*/
	width: 100%;
	float:left;
}

ul#tab04s li {
	margin: 5px 0px 0px 0px;
	padding: 0 ;
    width: 12.5%;
	float:left;
}
ul#tab04s li a {
	width: 100%;
}
}
/*------------↓ここからウィンドウ幅が580〜770pxの場合に適用するCSS---------------*/

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




}

/*------------↓ここからウィンドウ幅が0〜580pxの場合に適用するCSS---------------*/
@media screen and (max-width:580px) {
ul#tab li {
	float: left;
	text-align: center;
	margin-left: 15px;
}

ul#tab li a {
	font-size: 14px;
	padding-right: 10px;
	width: 45vw;
}

/* タブ３
-----------------------------------------*/
ul#tab03 li {
	float: left;
	text-align: center;
	margin-left: 10px;
}

ul#tab03 li a {
	width: 80px;
	text-align: center;
	font-size: 14px;
	padding-right: 0px;
}

/* タブ４
-----------------------------------------*/
ul#tab04 li {
	float: left;
	text-align: center;
	margin-left: 10px;
	width: 20%;
}

ul#tab04 li a {
	width: 100%;
	text-align: center;
	font-size: 16px;
}

}

/*------------↓ここからウィンドウ幅が0〜480pxの場合に適用するCSS---------------*/
@media screen and (max-width:480px) {
ul#tab li {
	float: left;
	text-align: center;
	margin-left: 0px;
}

ul#tab li a {
	font-size: 11px;
	padding-right: 0px;
	width: 48vw;
}
	
/* タブ４（固定ボタン）
-----------------------------------------*/
ul#tab04s li {
	float: left;
	text-align: center;
	margin-left: 10px;
	width: 20%;
}

ul#tab04s li a {
	width: 100%;
	text-align: center;
	font-size: 16px;
}

}