@charset "UTF-8";
#Contents h3 {
	padding: 5px;
	border-left: 4px solid #F00;
}

#modelGallery {
	position: relative;
}

#modelGallery main {
	position: relative;
	display: block;
	background: #000000;
}
#modelGallery main,
#modelGallery main iframe {
	width: 100%;
	height: 600px;
}

#modelGallery main iframe {
	vertical-align: bottom;
	border: none;
	z-index: 1000;
}

@media screen and ( max-width : 1305px ) {
	#modelGallery main,
	#modelGallery main iframe {
		width: 100%;
		height: 45vw;
	}
}

#modelGallery.ex iframe {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
}

#modelGalleryEx {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 200;
	overflow: hidden;
	background: #cccccc;
	border: #ffffff outset 2px;
}

.ex #modelGalleryEx {
	position: fixed;
	z-index: 10001;
}

#modelGalleryEx:hover {
	background: #ffffff;
}

#modelGalleryEx::after {
	content: "← →";
	position: absolute;
	right: 0px;
	top: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 20px;
	font-weight: bold;
	transform-origin: center;
	transform: rotate(-45deg);
	word-break: keep-all;
	white-space: nowrap;
}

#modelGallery.ex #modelGalleryEx::after {
	content: "→ ←";
}

#modelGallery h2 {
	font-size: 1.4em;
	font-weight: bold;
	margin: 20px 0;
	padding: 0 0 0 10px;
	border-bottom: #999999 solid 1px;
	background: none;
}

#modelGallery nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin: 10px auto;
}

#modelGallery nav figure {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 12%;
	height: 153px;
	margin: 0 0.25% 5px;
	background: #000000;
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
	line-height: 1;
}

@media screen and ( max-width : 1305px ) {
	#modelGallery nav {
		width: 638px;
	}
	#modelGallery nav figure {
		width: 24%;
		margin: 0 0.5% 5px;
	}
}

@media screen and ( max-width : 700px ) {
	#modelGallery nav {
		width: 100%;
	}
	#modelGallery nav figure {
		height: 22.54vw;
	}
}

#modelGallery nav figure:hover {
	opacity: 0.8;
}

#modelGallery nav figure img {
	width: auto;
	height: auto;
	max-width: 130px!important;
	max-height: 130px!important;
}

#modelGallery nav figure figcaption {
	position: absolute;
	left: 0px;
	top: 0px;
	background: rgba(255,255,255,0.8);
	padding: 3px 10px;
}

#modelGallery nav figure[data-model-x] figcaption {
	color: red;
}
#modelGallery nav figure[data-model-x] figcaption::after {
	content: "(Coming soon)";
}


@media screen and ( max-width : 960px ) {
	#modelGallery nav {
	}
	#modelGallery nav figure {
	}

	#modelGallery nav figure img {
	}

	#modelGallery nav figure figcaption {
	}
}

@media screen and ( max-width : 600px ) and ( max-aspect-ratio : 1/1 ) {

	#modelGallery {
		display: block;
	}
	#modelGallery main,
	#modelGallery main iframe {
		position: static;
		width: calc( 100vw - 30px );
		height: calc( 100vw - 30px );
	}
	#modelGallery nav {
		margin: 5px 0 0;
		width: calc( 100vw - 30px );
	}
	#modelGallery nav figure {
		width: calc( 25vw - 11.5px );
		height: calc( 25vw - 11.5px );
		margin: 0 5px 5px 0;
	}
	#modelGallery nav figure:nth-child(4n) {
		margin-right: 0;
	}

	#modelGallery nav figure img {
		max-width: calc( 25vw - 20px )!important;
		max-height: calc( 25vw - 20px )!important;
	}

	#modelGallery nav figure figcaption {
		font-size: 1.5vw;
		padding: 3px 5px;
	}
}

#modelGalleryName {
	text-align: center;
}
#modelGalleryName div {
	display: inline-block;
	padding: 0 20px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	background: #eeeeee;
	color: #666666;
	line-height: 40px;
	border-radius: 0 0 20px 20px;
}

.ColumnSet > div {
	box-sizing: border-box;
}


/* ===== bread crambs ===== */
.galleryBC {
	display: flex;
	margin-bottom: 10px;
}
.galleryBC > li {
	width: 60px;
	height: 60px;
	margin-right: 10px;
	background-color: #000000;
	background-size: 100% auto;
	background-position: center;
	border-radius: 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}
.galleryBC > li:hover {
	opacity: 0.7;
}

/* BC root */
.galleryBC > li.galleryBC_root {
	background-image: url(/image/global/products/advanced/electronics/optical/map/map_point.jpg);
	background-size: auto 100%;
}

/* F1 */
.galleryBC > li.galleryBC_Home,
.galleryBC > li.galleryBC_HomeOffice,
.galleryBC > li.galleryBC_Office1,
.galleryBC > li.galleryBC_Offce2 {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/onu.jpg);
}
.galleryBC > li.galleryBC_5G-Antenna {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/5g.jpg);
}
.galleryBC > li.galleryBC_DataCenter {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/data-center.jpg);
}
.galleryBC > li.galleryBC_RegionalNode {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/regional-node.jpg);
}
.galleryBC > li.galleryBC_SubmarineCableStation {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/submarine_cable_station.jpg);
}
.galleryBC > li.galleryBC_CPO {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/cpo.jpg);
}
.galleryBC > li.galleryBC_LiDAR-Drone {
	background-image: url("/image/global/products/advanced/electronics/optical/map/bc/drone.jpg");
}
.galleryBC > li.galleryBC_LiDAR-Car {
	background-image: url("/image/global/products/advanced/electronics/optical/map/bc/car.jpg");
}
.galleryBC > li.galleryBC_LiDAR-Car-ToF {
	background-image: url("/image/global/products/advanced/electronics/optical/map/bc/cartof.jpg");
}
.galleryBC > li.galleryBC_LiDAR-Car-FMCW {
	background-image: url("/image/global/products/advanced/electronics/optical/map/bc/carfmcw.jpg");
}

/* F2 */


/* component */
.galleryBC > li.galleryBC_Home + li.galleryBC_TO-TOSA,
.galleryBC > li.galleryBC_HomeOffice + li.galleryBC_TO-TOSA,
.galleryBC > li.galleryBC_Office1 + li.galleryBC_TO-TOSA,
.galleryBC > li.galleryBC_Offce2 + li.galleryBC_TO-TOSA,
.galleryBC > li.galleryBC_LiDAR-Drone + li.galleryBC_LiDAR-LD,
.galleryBC > li.galleryBC_LiDAR-Car-ToF + li.galleryBC_LiDAR-LD {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/to-tosa_01.jpg);
}
.galleryBC > li.galleryBC_Home + li.galleryBC_TO-ROSA,
.galleryBC > li.galleryBC_HomeOffice + li.galleryBC_TO-ROSA,
.galleryBC > li.galleryBC_Office1 + li.galleryBC_TO-ROSA,
.galleryBC > li.galleryBC_Offce2 + li.galleryBC_TO-ROSA,
.galleryBC > li.galleryBC_LiDAR-Drone + li.galleryBC_LiDAR-PD,
.galleryBC > li.galleryBC_LiDAR-Car-ToF + li.galleryBC_LiDAR-PD {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/to-rosa_01.jpg);
}
.galleryBC > li.galleryBC_CFP4Transceiver + li.galleryBC_TOSA,
.galleryBC > li.galleryBC_DataCenter + li.galleryBC_TOSA,
.galleryBC > li.galleryBC_5G-Antenna + li.galleryBC_TOSA {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/tosa_01.jpg);
}
.galleryBC > li.galleryBC_5G-Antenna + li.galleryBC_TO-ROSA {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/to-rosa_02.jpg);
}
.galleryBC > li.galleryBC_SubmarineCableStation + li.galleryBC_EDFA,
.galleryBC > li.galleryBC_RegionalNode + li.galleryBC_EDFA {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/edfa_01.jpg);
}
.galleryBC > li.galleryBC_SubmarineRepeater {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/edfa_02.jpg);
}
.galleryBC > li.galleryBC_DataCenter + li.galleryBC_Non-HermeticROSA {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/nh-rosa_01.jpg);
}
.galleryBC > li.galleryBC_DataCenter + li.galleryBC_IntegratedTOSA {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/i-tosa_01.jpg);
}
.galleryBC > li.galleryBC_SubmarineCableStation + li.galleryBC_MicroiTLA,
.galleryBC > li.galleryBC_RegionalNode + li.galleryBC_MicroiTLA {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/itla.jpg);
}
.galleryBC > li.galleryBC_SubmarineCableStation + li.galleryBC_CFP4Transceiver,
.galleryBC > li.galleryBC_RegionalNode + li.galleryBC_CFP4Transceiver {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/cfp4.jpg);
}
.galleryBC > li.galleryBC_CFP4Transceiver + li.galleryBC_HermeticROSA {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/h-rosa_01.jpg);
}
.galleryBC > li.galleryBC_SubmarineCableStation + li.galleryBC_CFP2Transceiver {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/cfp2.jpg);
}
.galleryBC > li.galleryBC_CFP2Transceiver + li.galleryBC_IC-TROSA {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/ic-trosa.jpg);
}
.galleryBC > li.galleryBC_CPO + li.galleryBC_CW-Laser-Source {
	background-image: url(/image/global/products/advanced/electronics/optical/map/bc/cw.jpg);
}



/* ===== VIDEO ===== */
#videoGallery {
	display: flex;
	justify-content: center;
	margin-top: 30px;
	margin-bottom: 30px;
}
#videoGallery[class*="col"] {
	justify-content: space-between;
}
#videoGallery > div {
	position: relative;
	max-width: 600px;
	cursor: pointer;
}
#videoGallery.col2 > div {
	width: calc( 50% - 7px );
}
#videoGallery.col3 > div {
	width: calc( 33.33% - 7px );
}
#videoGallery > div::before,
#videoGallery > div::after {
	content: "";
	overflow: hidden;
	position: absolute;
	left: 50%;
	top: 50%;
}
#videoGallery > div::before {
	background-color: rgba(0,0,0,.45);
	width: 100px;
	height: 100px;
	margin-left: -50px;
	margin-top: -50px;
	border-radius: 50%;
}
#videoGallery > div::after {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-color: transparent transparent transparent #ffffff;
	border-width: 13px 0 13px 22px;
	margin-left: -8px;
	margin-top: -13px;
}
#videoGallery > div img {
	width: 100%;
	max-width: 100%;
	height: 100%!important;
}

#videoBox {
	position: fixed;
	left: 0;
	top: 0;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
}
#videoBox.show {
	display: block;
}
#videoOverlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	cursor: pointer;
}
#videoOverlay > div {
	position: absolute;
	right: 15px;
	top: 15px;
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	border: #ffffff solid 1px;
}
#videoOverlay > div::before,
#videoOverlay > div::after {
	content: "";
	overflow: hidden;
	position: absolute;
	left: 23px;
	top: 0px;
	width: 4px;
	height: 100%;
	border-radius: 2px;
	background: #ffffff;
	transform-origin: center;
}
#videoOverlay > div::before {
	transform: rotate(45deg);
}
#videoOverlay > div::after {
	transform: rotate(-45deg);
}
#videoContent {
	position: absolute;
	left: calc( 50% - 480px );
	top: calc( 50% - 270px );
	width: 960px;
	height: 540px;
}
#videoContent > video {
	width: 100%;
}
#videoContent > * {
	display: none;
}
#videoContent > *.show {
	display: block;
}
@media screen and ( max-width : 1260px ) {
	#videoContent {
		left: calc( 50vw - 38.095vw );
		top: calc( 50vh - 21.43vw );
		width: 76.19vw ;
		height: 42.86vw;
	}
}
@media screen and ( max-height : 740px ) and ( min-aspect-ratio : 1260 / 740 ) {
	#videoContent {
		left: calc( 50vw - 64.865vh );
		top: calc( 50vh - 36.485vh );
		width: 129.73vh ;
		height: 72.97vh;
	}
}
@media screen and ( max-width : 767px ) {
	#videoBox {
		position: static;
		display: block;
	}
	#videoContent > * {
		display: block;
		margin-bottom: 20px;
	}
	#videoOverlay,
	#videoGallery > div {
		display: none;
	}
	#videoContent {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: auto;
	}
}


/* ===== Full Size Image Button ===== */
.fullSizeViewLink {
	text-decoration: none!important;
}

.fullSizeViewLink::after,
[lang="en"] .fullSizeViewLink::after {
	content: "View Full Size";
}
[lang="ja"] .fullSizeViewLink::after {
	content: "拡大画像を見る";
}
[lang="zh"] .fullSizeViewLink::after,
[lang="zh-cn"] .fullSizeViewLink::after {
	content: "查看全尺寸";
}

.fullSizeViewLink::after {
	display: block;
	width: 200px;
	margin: 10px auto 30px;
	padding: 7px 0 5px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	color: #c02;
	border: #c02 solid 1px;
	border-radius: 5px;
	background: #ffffff;
	cursor: pointer;
}

.fullSizeViewLink:hover::after {
	color: #ffffff;
	background: #c02;
}

.prdList {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	margin: 30px -10px;
}

.prdList > li {
	width: calc( 100% / 8 - 20px );
	margin: 10px;
	text-align: center;
}
@media all and ( max-width: 1304px ) {
	.prdList > li {
		width: calc( 100% / 7 - 20px );
	}
}
@media all and ( max-width: 1130px ) {
	.prdList > li {
		width: calc( 100% / 6 - 20px );
	}
}
@media all and ( max-width: 970px ) {
	.prdList > li {
		width: calc( 100% / 5 - 20px );
	}
}
@media all and ( max-width: 810px ) {
	.prdList > li {
		width: calc( 100% / 4 - 20px );
	}
}
@media all and ( max-width: 650px ) {
	.prdList > li {
		width: calc( 100% / 3 - 20px );
	}
}
@media all and ( max-width: 490px ) {
	.prdList > li {
		width: calc( 100% / 2 - 20px );
	}
}

.prdList > li > * {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.prdList > li > img:first-child {
	width: 100%;
	box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.5);
	border-radius: 5px;
}

.prdList > li > strong {
	background: #EEEEEE;
	padding: 5px 0;
	margin: 15px 0 10px;
}

.prdList > li > a:last-child {
	padding-right: 20px;
	background: url(/image/common/jp/r1/icon/icon_pdf_hd.gif) no-repeat right -5px center;
	background-size: 30px auto;
}



.prdTableCaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-bottom: 15px;
}
.prdTableCaption > * {
}

.prdTableCaption > a {
	margin-left: auto;
	padding-right: 25px;
	background: url(/image/common/jp/r1/icon/icon_pdf_hd.gif) no-repeat right -5px center;
	background-size: 30px auto;
}

.prdTableImg {
	position: relative;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 5px;
}

.prdTableSup {
	text-align: center;
	margin: 0 0 10px;
}

.prdTableImg > img {
	max-width: none!important;
	width: auto!important;
}

.How_to_Select_Thermo-Module {
	position: relative;
	padding: 20px 30px 40px;
	margin: 20px 0 0;
	background: #f2f2f2;
	border-radius: 20px;
}

.How_to_Select_Thermo-Module * {
	color: #000000!important;
}

.How_to_Select_Thermo-Module > h3 {
	font-size: 24px;
	font-weight: normal;
	padding: 0!important;
	border: none!important;
}

.How_to_Select_Thermo-Module > p {
	padding: 0 0 20px;
}

.How_to_Select_Thermo-Module > figure {
	height: 30px;
	padding-bottom: 80px;
	overflow: hidden;
}
.How_to_Select_Thermo-Module > :checked ~ figure {
	height: auto;
}

.How_to_Select_Thermo-Module > figure,
.How_to_Select_Thermo-Module > figure > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0!important;
}

.How_to_Select_Thermo-Module > figure > * {
	width: 32%;
}

.How_to_Select_Thermo-Module > figure > div > img {
	width: 100%;
}

.How_to_Select_Thermo-Module > label {
	position: absolute;
	left: 0;
	bottom: 40px;
	width: 100%;
	padding-top: 30px;
	cursor: pointer;
	background: -webkit-linear-gradient(rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%);
	background: -o-linear-gradient(rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%);
	background: linear-gradient(rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%);
}
.How_to_Select_Thermo-Module > input {
	display: none;
}
.How_to_Select_Thermo-Module > label::before {
	content: "More";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 50px;
	margin: 0 auto;
	border-radius: 10px;
	background: #ffffff;
	color: #0088D4;
	font-size: 20px;
}
.How_to_Select_Thermo-Module > :checked ~ label::before {
	content: "Close";
}
.How_to_Select_Thermo-Module > label:hover::before {
	background: #0088D4;
	color: #ffffff;
}

@media all and ( max-width: 940px ) {
	.How_to_Select_Thermo-Module > figure > img,
	.How_to_Select_Thermo-Module > figure > div > img {
		width: 49%;
	}

	.How_to_Select_Thermo-Module > figure > div {
		width: 100%;
		margin-top: 20px!important;
	}
}

@media all and ( max-width: 600px ) {
	.How_to_Select_Thermo-Module {
		padding: 20px 15px;
	}

	.How_to_Select_Thermo-Module > figure > img,
	.How_to_Select_Thermo-Module > figure > div > img {
		width: 100%;
	}

	.How_to_Select_Thermo-Module > figure > div {
		width: 100%;
		margin-top: 0px!important;
	}

	.How_to_Select_Thermo-Module > figure > img + img,
	.How_to_Select_Thermo-Module > figure > div > img {
		margin-top: 20px;
	}
}


[id^="explanation"] {
	display: none;
}
[id^="explanation"] + label {
	position: relative;
	display: inline-block;
	padding: 10px 40px 10px 20px;
	background: #0088D4;
	cursor: pointer;
	color: #ffffff;
	border-radius: 10px;
	text-align: center;
}
[id^="explanation"] + label:hover {
	opacity: 0.8;
}
[id^="explanation"] + label > span {
	display: inline-block;
}
[id^="explanation"] + label::after {
	content: "";
	position: absolute;
	right: 15px;
	top: calc( 50% - 8px );
	display: block;
	width: 9px;
	height: 9px;
	border-style: solid;
	border-color: #ffffff;
	border-width: 3px 3px 0 0;
	overflow: hidden;
	transition-property: top,transform;
	transition-duration: 180ms;
	transition-timing-function: ease-out;
	transform-origin: center;
	transform: rotate(135deg);
}
[id^="explanation"]:checked + label::after {
	top: calc( 50% - 5px );
	transform: rotate(-45deg);
}
[id^="explanation"] + label + dl {
	display: none;
	flex-wrap: wrap;
	padding: 20px 30px;
	margin: 10px 0 0;
	background: #f2f2f2;
	border-radius: 20px;
}
[id^="explanation"]:checked + label + dl {
	display: flex;
}
[id^="explanation"] + label + dl > * {
	padding: 10px 0 0;
	margin: 10px 0 0;
	border-top: #cccccc solid 1px;
	box-sizing: border-box;
	line-height: 1.2;
}
[id^="explanation"] + label + dl > dt:first-child,
[id^="explanation"] + label + dl > dt:first-child + dd {
	padding: 0;
	margin: 0;
	border-top: none;
}
[id^="explanation"] + label + dl > dt {
	width: 450px;
}
[id^="explanation"] + label + dl > dd {
	width: calc( 100% - 450px );
}
@media all and ( max-width: 900px ) {
	[id^="explanation"] + label + dl {
		padding: 10px 15px;
	}
	[id^="explanation"] + label + dl > * {
		padding: 5px 0 0;
		margin: 5px 0 0;
		font-size: 12px;
	}
	[id^="explanation"] + label + dl > dt,
	[id^="explanation"] + label + dl > dd {
		width: 100%;
	}
	[id^="explanation"] + label + dl > dd {
		border: none;
		padding: 0;
		margin: 0;
	}
}

.specTable {
	overflow-x: scroll;
	width: 100%;
	border: #000000 solid 2px;
}
.specTable  > table {
	margin: 0!important;
}
.specTable  > table * {
	text-align: center;
	word-break: keep-all;
}