@charset "utf-8";
/* CSS Document */
/* ホームページ以外の設定 */



/*---------------------------------------------------------------------------------- main */

main {
	margin: 16px 0;
}

/*---------------------------------------------------------------------------------- パンくずナビ */

nav#nav_breadcrumb ol {
	line-height: 1.2;
}

nav#nav_breadcrumb li {
	display: inline-block;
	padding: 0 16px 0 0;
	list-style: none;
	background-image: url(../_image/bcn_arrow.svg);
	background-position: center right 4px;
	background-size: 8px 16px;
	background-repeat: no-repeat;
}

nav#nav_breadcrumb li:nth-last-of-type(1) {
	padding: 0;
	background-image: none;
}

nav#nav_breadcrumb a,
nav#nav_breadcrumb a:visited {
	display: inline-block;
	margin: 0;
	color: white;
	background-color: darkgray;
	border: 1px solid darkgray;
	border-radius: 4px;
}
/*nav#nav_breadcrumb a + a {
	margin-left: 0;
}
nav#nav_breadcrumb img.bcnhome {
	height: 12px;
}*/

nav#nav_breadcrumb a > div, 
nav#nav_breadcrumb a > span {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

nav#nav_breadcrumb li > span {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: darkgray;
	border: 1px solid darkgray;
	border-radius: 4px;
}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ スマートフォン：～666px   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*---------------------------------------------------------------------------------- main */

main {
	width: calc(100% - 8px);
	min-width: 320px; /* iPhone5 */
	margin: 16px auto;
}

/*---------------------------------------------------------------------------------- nav#main */

nav#nav_main {
	display: none;
}

/*---------------------------------------------------------------------------------- パンくずナビ */

nav#nav_breadcrumb ol {
	margin: 3px 0;
/*	font-size: calc(33% + 1.15vw);*/
	font-size: 11px;
}
nav#nav_breadcrumb a > div, 
nav#nav_breadcrumb a > span,
nav#nav_breadcrumb li > span {
	padding: 2px 2px;
	height: 26px;
}
nav#nav_breadcrumb a.w02 > span {
	width: 2.5em;
}
nav#nav_breadcrumb a.w03 > span {
	width: 3.5em;
}
nav#nav_breadcrumb a.w04 > span {
	width: 4.5em;
}
nav#nav_breadcrumb a.w05 > span {
	width: 5.5em;
}
nav#nav_breadcrumb a.w06 > span {
	width: 6.5em;
}
nav#nav_breadcrumb a.w07 > span {
	width: 7.5em;
}
nav#nav_breadcrumb a.w08 > span {
	width: 8.5em;
}
nav#nav_breadcrumb a.w09 > span {
	width: 9.5em;
}
nav#nav_breadcrumb a.w10 > span {
	width: 10.5em;
}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ タブレット：667px～884px ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 667px) {

br.smp {
	display: none;
}

/*---------------------------------------------------------------------------------- パンくずナビ */

nav#nav_breadcrumb ol {
	margin: 0 0 4px 0;
	font-size: 12px;
}
nav#nav_breadcrumb a > div, 
nav#nav_breadcrumb a > span,
nav#nav_breadcrumb li > span {
	padding: 4px 6px;
}

nav#nav_breadcrumb a > div, 
nav#nav_breadcrumb a > span,
nav#nav_breadcrumb li > span {
	padding: 4px 2px;
	height: auto;
}
nav#nav_breadcrumb a.w02 > span,
nav#nav_breadcrumb a.w03 > span,
nav#nav_breadcrumb a.w04 > span,
nav#nav_breadcrumb a.w05 > span,
nav#nav_breadcrumb a.w06 > span,
nav#nav_breadcrumb a.w07 > span,
nav#nav_breadcrumb a.w08 > span,
nav#nav_breadcrumb a.w09 > span,
nav#nav_breadcrumb a.w10 > span {
	width: auto;
}

}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ デスクトップ小：885px～1201px   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 885px) {

/*---------------------------------------------------------------------------------- main */

main {
	float: left;
	margin-left: 20px;
	width: calc(100% - 170px - 20px);
	max-width: calc(410px + 410px + 35px);
}

/*---------------------------------------------------------------------------------- nav#main */

nav#nav_main {
	display: block;
	float: left;
	margin: 16px 0;
	width: 168px;
}

}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ デスクトップ中：1202px～1501px   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 1202px) {

/*---------------------------------------------------------------------------------- main */

main {
	max-width: calc(410px + 410px + 410px + 53px);
}

}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■ デスクトップ大：1502px～ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media (min-width: 1502px) {

/*---------------------------------------------------------------------------------- main */

main {
	width: calc(100% - 170px - 20px - 300px);
}


}
