@charset "UTF-8";

.contents_wrap #facompass_contents.facompass_watch.event { margin-top: 40px; }
#module_breadcrumbs ul li { color: #d50000; }
.contents_wrap p { margin-top: 0; }
#contents { width: 100%; min-width: 720px; line-height: 1.4; }
#contents img { vertical-align: bottom; }
#contents .arw { background: url(../img/arw.png) no-repeat left 0.35em; padding-left: 12px; display: inline-block; }
#contents .icon { vertical-align: baseline; padding-left: 3px; }
#contents .button { display: block; font-size: 85.7%; font-weight: bold; padding: 10px 10px 8px; background-color: #fff; border: 1px solid #d9d9d9; text-align: center; }
#contents .switch_img { visibility: hidden; }

#contents #head { padding-bottom: 12px; }
#contents #head #logo { float: left; padding-right: 33px; }
#contents #head #logo img { width:270px;}
#contents #head #summary { float: left; }
#contents #head #summary .text { font-weight: bold; margin-bottom: 8px; }
#contents #head #summary .link { font-size: 85.7%; }
#contents #head .button { float: right; width: 240px; padding: 15px 10px; }
#contents #head .button:hover span { text-decoration: underline; }

#popup { width: 640px; margin: 0 auto; font-size: 87.5%; }
#popup .close { background-color: #f2f2f2; padding: 25px 0 20px; margin-bottom: 50px; }
#popup .close a { display: block; width: 238px; border: 1px solid #b3b3b3; background-color: #fff; padding: 8px 0 6px; font-size: 85.7%; font-weight: bold; margin: 0 auto; color: #333; text-align: center; text-decoration: none; cursor: pointer; }
#popup .close span:before { content:"× "; }
#popup .close a:hover { text-decoration: underline; }
#popup #accessmap .head { background-color: #218d1b; color: #fff; font-size: 128.6%; font-weight: bold; text-align: center; padding: 40px 0 35px; }
#popup #accessmap #map01 { background-color: #f2f2f2; text-align: center; padding: 40px 30px; }
#popup #accessmap #map02 { background-color: #d9d9d9; text-align: center; padding: 40px 30px; }
#popup #products{ background-color: #f2f2f2; }
#popup #products #products_head { display: table; padding: 25px 30px; width: 580px; height: 54px; color: #fff; font-weight: bold; }
#popup #products #products_head .new { display: table-cell; vertical-align: top; width: 50px; }
#popup #products #products_head .new span { display: block; min-height: 20px; text-align: center; font-weight: bold; background: #ffd900; font-size: 85.7%; color: #333; padding: 15px 5px 12px; }
#popup #products #products_head .comingsoon { display: table-cell; vertical-align: top; width: 50px; }
#popup #products #products_head .comingsoon span { display: block; min-height: 30px; text-align: center; font-weight: bold; background: #fff; font-size: 85.7%; color: #218d1b; padding: 10px 8px 8px; line-height: 1.2; }
#popup #products #products_head .name { display: table-cell; padding-left: 10px; width: 400px; }
#popup #products #products_head em { font-size: 128.6%; }
#popup #products #products_head.sol01 { background: url(../products/img/bg_sol01_pc.png) #218d1b no-repeat 500px 25px;}
#popup #products #products_head.sol02 { background: url(../products/img/bg_sol02_pc.png) #218d1b no-repeat 500px 25px;}
#popup #products #products_head.sol03 { background: url(../products/img/bg_sol03_pc.png) #218d1b no-repeat 500px 25px;}
#popup #products .section { padding:0 30px; margin-top: 28px; }
#popup #products .section .head { font-weight: bold; margin-bottom: 5px; }
#popup #products .section .note { font-size: 85.7%; }
#popup #products #lead .head { color: #33a02c; font-size: 114.3%; }
#popup #products #lead .text { float: left; width: 320px; }
#popup #products #lead .img { float: right; position: relative; }
#popup #products #lead .img .product { border: 1px solid #d1d1d1; width: 238px; }
#popup #products #lead .img .pickup { position: absolute; top: -20px; right: -20px; }
#popup #products #lead .img .pickup img { width: 82px; }
#popup #products #linkarea { margin-top: 30px; padding: 30px; background-color: #D9D9D9; }
#popup #products #linkarea ul li { float: left; width: 287px; margin-bottom: 5px; margin-left: 6px; }
#popup #products #linkarea ul.single li { float: none; width: 100%; margin-bottom: 0; margin-left: 0; }
#popup #products #linkarea ul li.odd { margin-left: 0; }
#popup #products #linkarea ul li span { display: inline-block; min-height: 19px; }
#popup #products #linkarea ul li.feature span { background: url(../products/img/bg_feature.png) no-repeat left top; padding-left: 25px; }
#popup #products #linkarea ul li.spec span { background: url(../products/img/bg_spec.png) no-repeat left top; padding-left: 26px; }
#popup #products #linkarea ul li.download span { background: url(../products/img/bg_download.png) no-repeat left top; padding-left: 28px; }
#popup #products #linkarea ul li.catalog span { background: url(../products/img/bg_catalog.png) no-repeat left top; padding-left: 25px; }
#popup #products #linkarea ul li a { display: block; padding: 10px; background-color: #33a02c; color: #FFF; font-weight: bold; text-align: center; }
#popup #products #linkarea ul li a:hover { opacity: 0.8; filter: alpha(opacity=80); text-decoration: none; }
#popup #products #linkarea .note { font-size: 85.7%; margin-top: 5px; }
#popup #products .info { text-align: center; font-weight: bold; color: #218d1b; }

#popup #qr { background-color: #f2f2f2; }
#popup #qr .head { background-color: #218d1b; padding: 25px 30px; width: 580px; color: #fff; font-weight: bold; font-size: 128.6%; text-align: center; }
#popup #qr .image { padding: 30px 0; text-align: center; }
#popup #qr .text { background-color: #d9d9d9; padding: 30px; }
#popup #qr .text .bold { margin-bottom: 10px; }


/* FOR SMARTPHONE
-------------------------------------------------- */
@media screen and (max-width: 640px) {
	.contents_wrap #facompass_contents.facompass_watch.event { margin-top: 20px; }
	.contents_wrap { font-size: 100%; width: auto; margin: 0 8px; }
	.contents_wrap p { margin-top: 0; }
	.head_compass .nav_compass.open ul { z-index: 10; }

	#contents { min-width: 0; margin-bottom: 25px; }
	#contents img { max-width: 100%; }
	.pc_icon { display: inline; padding-left: 3px; vertical-align: baseline!important; }
	#contents .button { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

	#contents .arw { background: url(../img/arw_2x.png) no-repeat left 0.3em; background-size: 8px auto; }

	#contents #head { padding: 20px 20px 25px; }
	#contents #head #logo { float: none; padding-right: 0; text-align: center; margin-bottom: 15px; }
	#contents #head #logo img { width:240px;}
	#contents #head #summary { float: none; width:100%; text-align: center;}
	#contents #head .button { float: none; width: auto; max-width: 454px; padding: 12px; margin: 20px auto 0; }

	#popup { width: auto; position: relative; }
	#popup .close { margin-bottom: 0; }
	#popup .closebtn { position: absolute; top: 0; right: 0; }
	#popup #accessmap .head { font-size: 114.3%; padding: 30px 0; }
	#popup #accessmap #map01,
	#popup #accessmap #map02 { padding: 40px 10px; }
	#popup #accessmap img { max-width: 100%; }
	#popup #products #products_head { padding: 30px 20px 40px; box-sizing: border-box; width: 100%;  height: auto; }
	#popup #products #products_head.sol01 { background: url(../products/img/bg_sol01_sp.png) #218d1b no-repeat 93.7% 90%; background-size: 50px auto; }
	#popup #products #products_head.sol02 { background: url(../products/img/bg_sol02_sp.png) #218d1b no-repeat 93.7% 90%; background-size: 50px auto; }
	#popup #products #products_head.sol03 { background: url(../products/img/bg_sol03_sp.png) #218d1b no-repeat 93.7% 90%; background-size: 50px auto; }
	#popup #products .section { padding:0 20px; margin-top: 25px; }
	#popup #products #products_head .new { width: 4.1em;  }
	#popup #products #products_head .new span { width: 3.1em; min-height: 0; padding: 1.3em 0.5em; }
	#popup #products #products_head .comingsoon { width: 4.1em;  }
	#popup #products #products_head .comingsoon span { width: 2.6em; min-height: 0; padding: 0.8em 0.8em; }
	#popup #products #products_head .name { width: auto; }
	#popup #products #lead .text { width: auto; float: none; display: table-cell; }
	#popup #products #lead .img { float: none; margin-bottom: 30px;  }
	#popup #products #lead .img .product {  width: auto; max-width: 100%; }
	#popup #products #linkarea { padding: 20px; }
	#popup #products #linkarea ul li { float: none; width: 100%; margin-bottom: 2px; margin-left: 0; }
	#popup #products #linkarea ul li span { min-height: 20px; }
	#popup #products #linkarea ul li.feature span { background: url(../products/img/bg_feature_2x.png) no-repeat left top; background-size: 17px auto; }
	#popup #products #linkarea ul li.spec span { background: url(../products/img/bg_spec_2x.png) no-repeat left top; background-size: 21px auto; }
	#popup #products #linkarea ul li.download span { background: url(../products/img/bg_download_2x.png) no-repeat left top; background-size: 21px auto; }
	#popup #products #linkarea ul li.catalog span { background: url(../products/img/bg_catalog_2x.png) no-repeat left top; background-size: 21px auto; }
}