@charset "utf-8";

/*########################################

 全ページ共通のレスポンシブ
 
########################################/*/

@media screen and (max-width: 1100px) {
	/*/////////    全ページ共通のheader   ////////////////*/
	.head-cont{width:97%;}
	/* ==================== 横メニュー ==================== */
	ul#yoko-menu{width:100%;}

	/*全ページ共通のテーブル構造　-------------------*/
	.container {width:97%;}
	
	/* =============全ページ共通のスタイル================== */
	img{max-width: 100%;height: auto;width /***/:auto;　}
	
	/*pickup--------*/
	ul.pickup-ul li {width: 30%;margin: 0 1% 40px 1%;}
	
	/*/////////    全ページ共通のfooter   ////////////////*/
	.footer-cont1 {width: 97%;}
}




@media screen and (max-width: 1000px) {
	/*topics--------*/
	.topics-waku {padding: 30px;}
	.topics-title {width: 165px;padding-top: 10px;font-size: 190%;}/*border: 8px solid #c4cfe7;*/
	.topics-box dl dt{width:135px;}
	.topics-box dl dd{padding:0 5px 0 135px;}
			
	/*/////////    全ページ共通のfooter   ////////////////*/
	.footer-cont1{width:97%;}
	.footer-zip-cont-inner {width: 97%;}

	.footer-zip-cont {padding: 20px 0 30px 0;}
	.footer-zip-cont-left {float: none;width: 100%;padding-left: 0;margin: 0 auto 20px auto;text-align: center;}
	.footer-zip-cont-left .rogo-cap {width: 200px;margin: 0 auto;}
	.footer-zip-cont-left .rogo {margin: 0 auto;}
	.footer-zip br{display:none;}
	.footer-zip span {padding:0 7px 0 7px;}
	.footer-zip strong {display:block;}
	
	.footer-zip-cont-right {float:none;margin: 0 auto;display: table;}
	
	.footer-img {float: none;text-align: center;}
	#footer-link {padding: 20px 0 10px 0;width: 400px;display: table;margin: 0 auto;}
}




@media screen and (max-width: 940px) {
	/*/////////    全ページ共通のheader   ////////////////*/
	#header{border-bottom: 2px solid #323743;}
	#header.smaller {top: 0 !important;}
	.head-cont {height: 60px;}
	.head-left{margin-top:14px;}
	.head-left ul{min-width: 220px;}
	.head-left ul li.head-ul-com1{font-size:14.5px;}
	.head-left ul li.head-ul-com2{font-size:11px;padding:1px 0 3px 0;}
	
	.head-right {margin: 15px 10% 0 0;}
	
	/*index上部の切り替わる画像 slider-pro -------------*/
	.headerimgs-wrapper {margin-top: 62px;}
	.sp-mask,
	.sp-slide,
	.sp-image-container{height: 500px !important;}

	.slider-pro p.sp-layer img{width:560px;height:auto;}
	
	.slider-pro p.sp-layer.bigimg1-title1{margin:160px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg1-title2{margin:140px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg2-title1{margin:160px auto 0 25%;}
	.slider-pro p.sp-layer.bigimg2-title2{margin:150px auto 0 25%;}
	.slider-pro p.sp-layer.bigimg2-title1 img,
	.slider-pro p.sp-layer.bigimg2-title2 img{width:500px;}
	
	.slider-pro p.sp-layer.bigimg3-title1{margin:160px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg3-title2{margin:140px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg4-title1{margin:80px 200px 0 auto;}
	.slider-pro p.sp-layer.bigimg4-title2{margin:40px 200px 0 auto;}
	.slider-pro p.sp-layer.bigimg4-title3{margin:0 200px 0 auto;}
	.slider-pro p.sp-layer.bigimg4-title1 img,
	.slider-pro p.sp-layer.bigimg4-title2 img,
	.slider-pro p.sp-layer.bigimg4-title3 img{width:400px;}
	
	.sp-buttons {display: none;}



	/*-------------------------------------------------------------------------
	ページ上部右の出てくるナビmenuが出現して、入れ替わりに横メニューが消える
	--------------------------------------------------------------------------*/
	.yokomenu-bg{display:none;}
	
	#menubtn{position:fixed;z-index:700;top:9px;right:15px;background:#ccc url(../img/header_menu.png) no-repeat 0 0;width:54px;height:42px;display:block;cursor:pointer;}/*overflow:hidden;text-indent:-8989px;*/
	#menubtn.off{background-position:0 0;}
	#menubtn.on{background-position:0 -42px;}


	/*右側のメニューボタン*/
	.menu-trigger {position:absolute;right: 0;top: 11px;z-index:200;width:34px;height:20px;display: inline-block;transition: all .4s;box-sizing: border-box;left: 0;margin: 0 auto;}
	.menu-trigger span {position: absolute;left: 0;width: 100%;height:2px;background-color:#fff;display: inline-block;transition: all .4s;box-sizing: border-box;}
	
	/*
	.menu-trigger::after {position: absolute;left: 0;bottom: -25px;content: 'メニュー';display: block;width: 100%;color: #003540;font-size:79%;font-weight: 600;text-decoration: none;text-align: center;transition: all .4s;white-space: nowrap;letter-spacing: -0.2em;}
	.menu-trigger.active::after {content: '閉じる';color:#fff;bottom: -33px;font-weight: normal;}
	a.menu-trigger{text-decoration:none;}
	*/
	.menu-trigger span:nth-of-type(1) {}
	.menu-trigger span:nth-of-type(2) {top: 50%;left: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}
	.menu-trigger span:nth-of-type(3) {bottom: 0;}
	
	.menu-trigger.active span{height: 2px;}
	.menu-trigger.active span:nth-of-type(1) {z-index: 10;-webkit-transform: translateY(9px) rotate(-317deg) scale(1.15);transform: translateY(9px) rotate(-317deg) scale(1.15);}
	.menu-trigger.active span:nth-of-type(2) {display: none;}
	.menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-9px) rotate(317deg) scale(1.15);transform: translateY(-9px) rotate(317deg) scale(1.15);}


	/*------------------------------------
	ページ上部右の出てくるナビmenu
	------------------------------------*/
	#navi_sp {display: none;position: fixed;width:100%;z-index:49;overflow-y: scroll;height:100%;right: 0;top: 0;background-color:#003e75;}
	#navi_sp a,
	#navi_sp a:hover{text-decoration:none;}

	#navi_sp ul#yoko-menu-sp {width:100%;clear: both;padding:70px 10px 0 10px;list-style:none none outside;background-image:none;text-align: center;}
	#navi_sp ul#yoko-menu-sp li {margin: 23px 0;}
	#navi_sp ul#yoko-menu-sp li a {font-size:104%;color: #fff;text-decoration: none;line-height:1.2;}
	#navi_sp ul#yoko-menu-sp li a:hover{opacity:0.7;}

	/*submenu*/
	#navi_sp ul#yoko-menu-sp li.spbox01{display:inline-block;width:48%;margin:1px 0;}
	#navi_sp ul#yoko-menu-sp li.spbox01 > a{border: 1px solid #999;font-size: 90%;display: block;margin: 0 3%;padding: 7px 0;}
	
	#navi_sp ul#yoko-menu-sp li.spbox00 > a{}
	#navi_sp ul#yoko-menu-sp li.spbox02 > a{background:url(../img/header_menu_down.png) no-repeat left center;padding-left:17px;}
	#navi_sp ul#yoko-menu-sp li.spbox02.selected > a{background:url(../img/header_menu_up.png) no-repeat left center;padding-left:15px;opacity: 0.5;}
	
	#navi_sp ul#yoko-menu-sp li.spbox03 > a{border: 1px solid #999;font-size: 90%;display: block;margin: 0 3%;padding: 7px 0;}
	
	#navi_sp ul#yoko-menu-sp ul.sub{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;margin: 10px auto 0 auto;padding: 5px 0 0 0;font-size: 93%;width:70%;}
	#navi_sp ul#yoko-menu-sp ul.sub li {margin: 20px 0;}

	/*サブメニューの閉じる
	#navi_sp ul#yoko-menu-sp .sn_close{margin:0 0 0px 0;}
	#navi_sp ul#yoko-menu-sp .sn_close a{color:#fff;padding:11px 10px 11px 25px;display:block;background:#555 url(../img/header_menu_close.gif) no-repeat right center;cursor: pointer;}
	#navi_sp ul#yoko-menu-sp .sn_close a:hover{background-color:#111;opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha( opacity=100 )";}
	*/
	/*subsubmenu
	#navi_sp ul#yoko-menu-sp ul.sub ul.children{display:block !important;}
	#navi_sp ul#yoko-menu-sp ul.sub ul.children li {margin:3px 0;}
	#navi_sp ul#yoko-menu-sp ul.sub ul.children li a{text-indent:30px;}
	*/

	/*メニューの閉じる*/
	#navi_sp p#menuclose{padding: 0 0 25px 0;}
	#navi_sp p#menuclose a{font-size:100%;color:#FFF;padding:9px 0;line-height: 1.0;display: block;background:#444 url(../img/header_menu_close.gif) no-repeat right 15px center;cursor: pointer;width: 260px;margin: 0 auto;text-align: center;}
	#navi_sp p#menuclose a:hover{background-color:#666;opacity:1;}
	
	/*====== クライアント×東京印刷＝成長戦略の加速 ==========*/
	.section.index{padding-top:70px;}
}







@media screen and (max-width: 760px) {
	/*/////////    全ページ共通のheader   ////////////////*/
	.head-right {margin: 15px 75px 0 0;}

	/*index上部の切り替わる画像 slider-pro -------------*/
	.sp-mask,
	.sp-slide,
	.sp-image-container{height: 380px !important;}

	.slider-pro p.sp-layer img{width:440px;height:auto;}
	
	.slider-pro p.sp-layer.bigimg1-title1{margin:120px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg1-title2{margin:100px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg2-title1{margin:120px auto 0 25%;}
	.slider-pro p.sp-layer.bigimg2-title2{margin:100px auto 0 25%;}
	.slider-pro p.sp-layer.bigimg2-title1 img,
	.slider-pro p.sp-layer.bigimg2-title2 img{width:370px;}
	
	.slider-pro p.sp-layer.bigimg3-title1{margin:120px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg3-title2{margin:100px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg4-title1{margin:60px 35% 0 auto;}
	.slider-pro p.sp-layer.bigimg4-title2{margin:0 27% 0 auto;top:150px !important;}
	.slider-pro p.sp-layer.bigimg4-title3{margin:0 27% 0 auto;top:255px !important;}
	.slider-pro p.sp-layer.bigimg4-title1 img,
	.slider-pro p.sp-layer.bigimg4-title2 img,
	.slider-pro p.sp-layer.bigimg4-title3 img{width:310px;}
	
	/*====== クライアント×東京印刷＝成長戦略の加速 ==========*/
	.section.index{padding-top:50px;}
	.index-midashi-box {width:450px;}/*transform: scale(0.85);*/
	.index-midashi1-left img,
	.index-midashi1-right img{height:160px;}
	.shoukai-com1 {margin: 30px 5% 0 5%;}
	
	/*topics--------*/
	.topics-box dl dt {width: 100%;float: none;}
	.topics-box dl dd {padding: 0 5px 0 30px;}
	

	/*/////////    全ページ共通のfooter   ////////////////*/
	.footer-zip-cont-right dl dt{float:none;width:100%;}
	.footer-zip-cont-right dl dd{padding-left:0;} 
	.footer-zip-cont-right dl dd span.zip{width:190px;}
}





@media screen and (max-width: 640px) {
	/*/////////    全ページ共通のheader   ////////////////*/	
	/*全ページ共通のテーブル構造　-------------------*/
	#wrapper {font-size: 93%;}
	
	/*pickup--------*/
	ul.pickup-ul li {width: 45%;margin: 0 1% 30px 1%;}
	ul.pickup-ul li .title{padding:7px 3% 0 0;font-size: 93%;}
	ul.pickup-ul li .com {padding: 6px 0 0 0;}
	
	/*topics--------*/
	.section.topics-bg{padding: 50px 0 40px 0;}
	.topics-waku{padding: 0 10px;}/*padding: 20px 10px;*/
	.topics-title {width: 100%;border: none;padding-top: 0;font-size:230%;display: block;color:#00193a;background:none;line-height: 1.3;}/*border: none;background-color: #fff;*/
	.topics-box dl dt {padding-left: 5px;}
	.topics-box dl dd {padding: 0 5px 0 15px;}
	
	
	/*全ページ共通のページ下部の上部へ戻る */
	#pagetop a {width: 60px;height: 60px;bottom: 20px;right: 15px;}
	
	/*/////////    全ページ共通のfooter   ////////////////*/
	.footer-zip {text-align: left;display: table;margin: 12px auto;}
	.footer-zip strong{text-align: center;}
	.footer-zip span.span-tel {display: block;}
	.footer-zip-cont-right dl dt {text-align: center;}
	.footer-zip-cont-right dl dd span.span-tel {display: block;}
	.footer-zip-cont-right dl dd span.span-tel.tokyo{margin-top: 1em;}
	.footer-zip-cont-right dl dd span.zip {width: auto;}
	.footer-zip-cont {padding: 20px 0 20px 0;}
	.footer-img {padding: 0 10%;}
}





@media screen and (max-width: 540px) {
	/*/////////    全ページ共通のheader   ////////////////*/
	.head-left ul {min-width: 160px;}
	.head-left ul li.head-ul-com1{font-size:11px;}
	.head-left ul li.head-ul-com2{font-size:10px;padding:2px 0 3px 0;}
	
	.head-right {margin: 17px 75px 0 0;}
	.head-rogo a {width: 170px;height: 21px;}
	.head-rogo p {font-size: 8px;margin-left: 30px;}

	/*index上部の切り替わる画像 slider-pro -------------*/
	.sp-mask,
	.sp-slide,
	.sp-image-container{height: 270px !important;}

	.slider-pro p.sp-layer img{width:360px;height:auto;}
	
	.slider-pro p.sp-layer.bigimg1-title1{margin:80px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg1-title2{margin:40px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg2-title1{margin:80px auto 0 23%;}
	.slider-pro p.sp-layer.bigimg2-title2{margin:50px auto 0 23%;}
	.slider-pro p.sp-layer.bigimg2-title1 img,
	.slider-pro p.sp-layer.bigimg2-title2 img{width:300px;}
	
	.slider-pro p.sp-layer.bigimg3-title1{margin:80px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg3-title2{margin:40px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg4-title1{margin:30px 35% 0 auto;}
	.slider-pro p.sp-layer.bigimg4-title2{margin:0 27% 0 auto;top:90px !important;}
	.slider-pro p.sp-layer.bigimg4-title3{margin:0 27% 0 auto;top:170px !important;}
	.slider-pro p.sp-layer.bigimg4-title1 img,
	.slider-pro p.sp-layer.bigimg4-title2 img,
	.slider-pro p.sp-layer.bigimg4-title3 img{width:250px;}

	/*====== クライアント×東京印刷＝成長戦略の加速 ==========*/
	.index-midashi-box {width:380px;}
	.index-midashi1-left img,
	.index-midashi1-right img{height:140px;}
}





@media screen and (max-width: 460px) {
	/*/////////    全ページ共通のheader   ////////////////*/
	.head-right{display: none;}
	.head-left ul li.head-ul-com2{display:none;}
	.head-left ul li.head-ul-com1 {background: url(../img/rogo_sp.png) no-repeat;background-size: contain;width: 149px;height: 42px;text-indent: -8989px;display: block;overflow: hidden;}
	.head-left {margin: 10px 0 0 5px;}
		
	/*pickup--------*/
	.index-midashi.pickup {font-size: 200%;}
	.section.pickup {background: url(../img/pickup_bg.jpg) repeat-y center bottom;padding: 60px 0 30px 0;}
	ul.pickup-ul li {width: 70%;margin: 0 auto 20px auto;}
	
	/*/////////    全ページ共通のfooter   ////////////////*/
	#footer {border-top: 10px solid #003e75;margin-top: 60px;}
}





@media screen and (max-width: 440px) {
	/*index上部の切り替わる画像 slider-pro -------------*/
	.sp-mask,
	.sp-slide,
	.sp-image-container{height: 240px !important;}

	.slider-pro p.sp-layer img{width:310px;height:auto;}
	
	.slider-pro p.sp-layer.bigimg1-title1{margin:75px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg1-title2{margin:15px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg2-title1{margin:75px auto 0 23%;}
	.slider-pro p.sp-layer.bigimg2-title2{margin:20px auto 0 23%;}
	.slider-pro p.sp-layer.bigimg2-title1 img,
	.slider-pro p.sp-layer.bigimg2-title2 img{width:250px;}
	
	.slider-pro p.sp-layer.bigimg3-title1{margin:75px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg3-title2{margin:15px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg4-title1{margin:35px 35% 0 auto;}
	.slider-pro p.sp-layer.bigimg4-title2{margin:0 27% 0 auto;top:85px !important;}
	.slider-pro p.sp-layer.bigimg4-title3{margin:0 27% 0 auto;top:150px !important;}
	.slider-pro p.sp-layer.bigimg4-title1 img,
	.slider-pro p.sp-layer.bigimg4-title2 img,
	.slider-pro p.sp-layer.bigimg4-title3 img{width:200px;}

	/*====== クライアント×東京印刷＝成長戦略の加速 ==========*/
	.index-midashi-box {width:340px;}
	.index-midashi1-left img,
	.index-midashi1-right img{height:120px;}
	
	/*/////////    全ページ共通のfooter   ////////////////*/
	#footer-link {display: none;}
	.copyright {font-size: 55%;letter-spacing: 0;}
}





@media screen and (max-width: 370px) {
	/*index上部の切り替わる画像 slider-pro -------------*/
	.sp-mask,
	.sp-slide,
	.sp-image-container{height:210px !important;}

	.slider-pro p.sp-layer img{width:270px;height:auto;}
	
	.slider-pro p.sp-layer.bigimg1-title1{margin:62px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg1-title2{margin:7px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg2-title1{margin:62px auto 0 23%;}
	.slider-pro p.sp-layer.bigimg2-title2{margin:16px auto 0 23%;}
	.slider-pro p.sp-layer.bigimg2-title1 img,
	.slider-pro p.sp-layer.bigimg2-title2 img{width:220px;}
	
	.slider-pro p.sp-layer.bigimg3-title1{margin:62px auto 0 auto;}
	.slider-pro p.sp-layer.bigimg3-title2{margin:7px auto 0 auto;}
	
	.slider-pro p.sp-layer.bigimg4-title1{margin:30px 35% 0 auto;}
	.slider-pro p.sp-layer.bigimg4-title2{margin:0 27% 0 auto;top:72px !important;}
	.slider-pro p.sp-layer.bigimg4-title3{margin:0 27% 0 auto;top:130px !important;}
	.slider-pro p.sp-layer.bigimg4-title1 img,
	.slider-pro p.sp-layer.bigimg4-title2 img,
	.slider-pro p.sp-layer.bigimg4-title3 img{width:180px;}
	
	.sp-horizontal .sp-arrows {top: 41%;}

	/*====== クライアント×東京印刷＝成長戦略の加速 ==========*/
	.index-midashi-box {width:300px;}
	.index-midashi1-left img,
	.index-midashi1-right img{height:100px;}

	/*pickup--------*/
	ul.pickup-ul li {width: 85%;}
}