@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Cormorant');

body{background: inherit;}

.font-min{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.en01{font-family: 'Cormorant', serif; font-style: italic;}

.mt-xxs{margin-top: 8px !important;}.mb-xxs{margin-bottom: 8px !important;}.ml-xxs{margin-left: 8px !important;}.mr-xxs{margin-right: 8px !important;}
.mt-xs{margin-top: 12px !important;}.mb-xs{margin-bottom: 12px !important;}.ml-xs{margin-left: 12px !important;}.mr-xs{margin-right: 12px !important;}
.mt-ss{margin-top: 18px !important;}.mb-ss{margin-bottom: 18px !important;}.ml-ss{margin-left: 18px !important;}.mr-ss{margin-right: 18px !important;}
.mt-s{margin-top: 28px !important;}.mb-s{margin-bottom: 28px !important;}.ml-s{margin-left: 28px !important;}.mr-s{margin-right: 28px !important;}
.mt-m{margin-top: 46px !important;}.mb-m{margin-bottom: 46px !important;}.ml-m{margin-left: 46px !important;}.mr-m{margin-right: 46px !important;}
.mt-l{margin-top: 65px !important;}.mb-l{margin-bottom: 65px !important;}.ml-l{margin-left: 65px !important;}.mr-l{margin-right: 65px !important;}

.pt-xxs{padding-top: 8px !important;}.pb-xxs{padding-bottom: 8px !important;}.pl-xxs{padding-left: 8px !important;}.pr-xxs{padding-right: 8px !important;}
.pt-xs{padding-top: 12px !important;}.pb-xs{padding-bottom: 12px !important;}.pl-xs{padding-left: 12px !important;}.pr-xs{padding-right: 12px !important;}
.pt-ss{padding-top: 18px !important;}.pb-ss{padding-bottom: 18px !important;}.pl-ss{padding-left: 18px !important;}.pr-ss{padding-right: 18px !important;}
.pt-s{padding-top: 28px !important;}.pb-s{padding-bottom: 28px !important;}.pl-s{padding-left: 28px !important;}.pr-s{padding-right: 28px !important;}
.pt-m{padding-top: 46px !important;}.pb-m{padding-bottom: 46px !important;}.pl-m{padding-left: 46px !important;}.pr-m{padding-right: 46px !important;}
.pt-l{padding-top: 65px !important;}.pb-l{padding-bottom: 65px !important;}.pl-l{padding-left: 65px !important;}.pr-l{padding-right: 65px !important;}

.mod-freeHTMLinner{max-width: 1052px; margin-left: auto; margin-right: auto;}
.bg-area{background: url(/-/media/cojp/product/hsm/magazine/img/bg-01); padding: 60px 0 120px; position: relative;}
.bg-area:before{content: ''; background: url(/-/media/cojp/product/hsm/magazine/img/bg-02t) center; background-size: auto 100%; position: absolute; top: 0; display: block; width: 100%; height: 61px;}
.bg-area:after{content: ''; background: url(/-/media/cojp/product/hsm/magazine/img/bg-02b) center; background-size: auto 100%; position: absolute; bottom: 0; display: block; width: 100%; height: 61px;}


.pankuzu{background: #fff; border-bottom: 1px solid #ddd; padding: 12px 0;}
.pankuzu .inner{max-width: 1052px; margin-left: auto; margin-right: auto;}
.pankuzu .inner li {display: inline; line-height: 1.8em; font-size: 0.9em;}
.pankuzu .inner li + li{border-left: 1px solid; margin-left: 14px; padding-left: 14px;}
.pankuzu .inner li a{text-decoration: underline; color: #a5365c;}

.tags{display: block; margin: 8px 0;}
.tags i{font-style: normal; display: inline-block; font-size: 0.8em; padding: 2px 8px;}

.overflow-h{overflow: hidden;}
.float-l{float: left;}
.float-r{float: right;}

.mag-2clm{position: relative;}
.mag-2clm > .float-l{width: 700px;}
.mag-2clm > .float-r{width: 334px;}
.clm-2-list{margin:0 -2%;}
.clm-2-list li{float: left; width: 46%; margin: 2%;}


.clm-3-list{margin:0 -1%;}
.clm-3-list li{float: left; width: 31.3%; margin: 1%;}

/* Category style */
.cate-life{background: #4c678b !important; color: #fff !important;}
.cate-kids{background: #7ca7c8 !important; color: #fff !important;}
.cate-hobby{background: #80b35e !important; color: #fff !important;}
.cate-use{background: #dba742 !important; color: #fff !important;}
.cate-event{background: #d86c78 !important; color: #fff !important;}

.hrstyle01{border-bottom: none; border-top: 2px solid #ddd; margin: 0;}

.boxstyle01{padding: 30px; border: 1px solid #e3ddd3; background: #fff; position: relative;}

.magazinelist li a{box-sizing: border-box; display: block; border: 1px solid #e3ddd3; height: 100%; background: #fff;}
.magazinelist li a p{padding: 0 10px 10px;}

.ttlstyle01 {text-align: center; font-size: 1.6em; border-bottom: 2px solid #ac9c80; padding-bottom: 22px;}
.ttlstyle01 small{display: block; margin-bottom: 12px; font-size: 0.9em; color: #b7a790;}
.ttlstyle01 em{position: relative; padding: 0 10px; z-index: 1;}

.btn a{display: block;}
.btnstyle01 a{background: #4c4c4c; color: #fff; text-align: center; padding:16px 10px 16px 34px; line-height: 1.4em; border-radius: 6px; font-size: 1.18em; position: relative; max-width: 700px; margin-left: auto; margin-right: auto;}
.btnstyle01.pnk a{background: #e74d80;}
.btn-more a:before{content: '▶︎'; font-size: 0.5em; position: absolute; left: 12px;}
.btn-back a:before{content: '◀︎'; font-size: 0.5em; position: absolute; left: 12px;}


.page-headarea{text-align: center; background: url(/-/media/cojp/product/hsm/magazine/img/box02l) left 0 center no-repeat,url(/-/media/cojp/product/hsm/magazine/img/box02r) right 0 center no-repeat; background-size: contain;}

.rankingnav.fixed{position: fixed; top: 20px; left: 50%; margin-left: 192px;}
.rankingnav.absolute{position: absolute; right: 0; bottom: 0;}


.rankingnav h3{text-align: center; color: #81796d; background: #fff; padding: 15px 0 22px; border-top: 2px solid #ac9c80; border-bottom: 2px solid #ac9c80;}
.rankingnav h3 em{font-size: 2em; line-height: 1.6em;}
.rankingnav ul li{box-shadow: 0 0 8px rgba(0,0,0,0.1);}
.rankingnav ul li + li{margin-top: 14px;}
.rankingnav ul li a{display: block; position: relative;}
.rankingnav ul li a:hover{opacity: 1;}


/* slider */
.slider-container {display: none; position: relative;}
.slider-container.initialized {display:block;}
.slider {overflow: hidden;}
.slider li a{display: block; position: relative;}
.slider li a:hover{opacity: 1;}
.slider li a .tags{position: absolute; top: 0; left: 0; margin-top: 0; z-index: 1;}
.slider li a .tags i{font-size: 1em; padding: 4px 10px;}
.slider li a p{position: absolute; background: rgba(0,0,0,.7); color: #fff; bottom: 0; padding: 10px; text-align: left;}

.slider-arrow {
  position: absolute;
  top: 0;
	width: 60px;
	background: #000;
  height: 100%;
  color: #fff;
  line-height: 36px;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;  /* 重要 */
}
.slider-prev {left: 0;
	background: -moz-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.4) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00ffffff',GradientType=1 );
}
.slider-next {right: 0;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(0,0,0,0.4) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(0,0,0,0.4) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(0,0,0,0.4) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#66000000',GradientType=1 );
}
.slider-arrow i{display: block; height: 100%; line-height: 100%; position: relative;}
.slider-arrow i img{position: absolute; top: 50%; width: 68px; margin-top: -40px;}
.slider-prev i img{left: -20px;}
.slider-next i img{right: -20px;}

.cate-nav ul {overflow: hidden; margin: -0.5%;}
.cate-nav ul li{display: inline-block; width: 19%; float: left; margin:0 0.5%;}
.cate-nav ul li a{display: block; border-radius: 4px; font-size: 1.18em; text-align: center; padding:16px 6px;}
.cate-nav ul li a i{display: inline-block; width: 2.4em; margin-right: 7px; margin-left: -1.4em;}
.cate-nav ul li a i img{width: 100%; vertical-align: middle;}
.cate-nav ul li a span{vertical-align: middle;}
.cate-nav ul li.current a{position: relative; pointer-events:none;}
.cate-nav ul li.current a:after{content: ''; position: absolute; display: block; width: 96%; height: 84%; border: 2px solid #ffffff; top: 8%; left: 2%; box-sizing: border-box; border-radius: 3px;}

.cate-ttl p{display: block; font-size: 1.35em; text-align: center; padding:12px 6px;}


/* detail style */
.kiji { padding: 32px 0; position: relative;}
.kiji a,
.mv_kiji a {color: #e74d80;}
.mv_kiji { padding: 0 0 32px; position: relative;}
.kiji{border-top: 1px solid #e3ddd3;}
.kiji .tit { font-size: 20px; line-height: 160%; color: #e74d80; padding-left: 34px; background: url("/-/media/cojp/product/hsm/magazine/img/icon_kiji_tit") no-repeat left top; min-height: 31px;}
.mv {position: relative; padding: 0 0 32px;}
.mv .icon { position: absolute; top: -82px; left: 0px;}
.mv .icon p { position: absolute; top: 18px; left: 0px; width: 100%; color: #ffffff; text-align: center; font-size: 14px; font-weight: bold; line-height: 24px;}
.mv .icon p span { font-size: 24px; line-height: 24px;}
.mv .tit { font-size: 1.6em; line-height: 160%; min-height: 31px;}
.mv .tit .tags{font-size: 0.7em; line-height: 1.4em;}
.mv .txt { margin-top: 35px; font-size: 14px; line-height: 150%; color: #000000;}
.kiji_img { margin-top: 20px; text-align: center;}
.kiji_img .img { max-width: 100%; height: auto;}
/* ABS修正 2018/2/15 */
/* .mv .sns { height: 24px; margin-top: 20px; overflow: hidden;} */
.mv .sns { margin-top: 20px; overflow: hidden;}
.mv .sns img{margin-bottom:5px;}
/* ABS修正 2018/2/15 終わり */
.mv .sns ul li { float:left; margin-left: 5px;}
.kiji .subtit { font-size: 14px; line-height: 150%; color: #000000; margin-top: 30px; padding-bottom: 15px; font-weight: bold;}
.kiji .txt { margin-top: 35px; font-size: 14px; line-height: 150%; color: #000000;}
.kiji .txt .right { color: #e74d80; float: right;}
.kiji ul.list{font-size: 14px;}
.kiji ul.list li{ list-style:disc; padding:0 0 0 0px; margin:0 0 0 10px; text-indent:5px;}
.mar_t30 {margin-top:30px;}
.kiji .txt_2 { font-size: 14px; line-height: 150%; color: #000000;}
.kiji .txt_3 { font-size: 14px; line-height: 150%; color: #3306CD; margin-top: 40px; font-weight: bold;}
.kiji .txt_4 { font-size: 14px; line-height: 150%; margin-top: 30px; font-weight: bold;}
.kiji .txt_5 { margin-bottom: 35px; font-size: 14px; line-height: 150%; background-color:#B9E7F8; padding:10px;}
.kiji .txt_6 { color: #000000; float: right;}
.kiji .m_list td{ border-bottom:1px solid #999999; line-height:200%; font-size: 14px;}
.bold{font-weight:bold;}
.kiji .subtit_2 { font-size: 14px; line-height: 120%; color: #000000; margin-top: 35px; font-weight: bold;}



.onlysp{display: none;}

@media screen and (max-width: 640px) {
a:hover{opacity: 1;}
.onlypc{display: none;}
.onlysp{display: block;}

.inner{width: 96%; margin: 0 2%;}

.mt-xxs{margin-top: 4px !important;}.mb-xxs{margin-bottom: 4px !important;}.ml-xxs{margin-left: 4px !important;}.mr-xxs{margin-right: 4px !important;}
.mt-xs{margin-top: 8px !important;}.mb-xs{margin-bottom: 8px !important;}.ml-xs{margin-left: 8px !important;}.mr-xs{margin-right: 8px !important;}
.mt-ss{margin-top: 10px !important;}.mb-ss{margin-bottom: 10px !important;}.ml-ss{margin-left: 10px !important;}.mr-ss{margin-right: 10px !important;}
.mt-s{margin-top: 22px !important;}.mb-s{margin-bottom: 22px !important;}.ml-s{margin-left: 22px !important;}.mr-s{margin-right: 22px !important;}
.mt-m{margin-top: 28px !important;}.mb-m{margin-bottom: 28px !important;}.ml-m{margin-left: 28px !important;}.mr-m{margin-right: 28px !important;}
.mt-l{margin-top: 48px !important;}.mb-l{margin-bottom: 48px !important;}.ml-l{margin-left: 48px !important;}.mr-l{margin-right: 48px !important;}

.pt-xxs{padding-top: 4px !important;}.pb-xxs{padding-bottom: 4px !important;}.pl-xxs{padding-left: 4px !important;}.pr-xxs{padding-right: 4px !important;}
.pt-xs{padding-top: 8px !important;}.pb-xs{padding-bottom: 8px !important;}.pl-xs{padding-left: 8px !important;}.pr-xs{padding-right: 8px !important;}
.pt-ss{padding-top: 10px !important;}.pb-ss{padding-bottom: 10px !important;}.pl-ss{padding-left: 10px !important;}.pr-ss{padding-right: 10px !important;}
.pt-s{padding-top: 22px !important;}.pb-s{padding-bottom: 22px !important;}.pl-s{padding-left: 22px !important;}.pr-s{padding-right: 22px !important;}
.pt-m{padding-top: 28px !important;}.pb-m{padding-bottom: 28px !important;}.pl-m{padding-left: 28px !important;}.pr-m{padding-right: 28px !important;}
.pt-l{padding-top: 48px !important;}.pb-l{padding-bottom: 48px !important;}.pl-l{padding-left: 48px !important;}.pr-l{padding-right: 48px !important;}

.page-headarea{background: url(/-/media/cojp/product/hsm/magazine/img/box02l) left 10px top no-repeat,url(/-/media/cojp/product/hsm/magazine/img/box02r) right 10px top no-repeat; background-size: 20%;}
.page-headarea img{width: 164px; margin-bottom: 12px;}

.cate-nav ul{margin: 1%;}
.cate-nav ul li{width: 48%; margin: 1%;}
.cate-nav ul li a i{width: 1.4em;}

.mag-2clm > .float-l{float: none; width: 96%; margin: 0 2%;}
.mag-2clm > .float-r{float: none; width: 100%; margin-top: 22px;}

.clm-2-list{margin: 0;}
.clm-2-list li{float: none; width: 100%; margin: 0;}
.clm-2-list li + li{margin-top: 14px;}
.clm-3-list{margin: 0;}
.clm-3-list li{float: none; width: 100%; margin: 0;}
.clm-3-list li + li{margin-top: -1px;}
.clm-3-list li a{display: table; width: 100%;padding:10px; position: relative;}
.clm-3-list li a img{display: table-cell; vertical-align: middle; width: 115px;}
.clm-3-list li a p{display: table-cell; vertical-align: middle; font-size: 0.9em; padding-left:10px;}
.clm-3-list li a .tags{margin: 0 0 5px;}
.clm-3-list li a .tags i{padding: 0 4px;}
.clm-3-list li a:hover{opacity: 1;}

.printermag-cate section{width: 86%; margin: 0 3%}

/* sp menu */
#contents_wrapper { position: relative; overflow: hidden; transition: all.3s ease; background: #fff;}
#contents_wrapper.open { -webkit-transform: translateX(80px); transform: translateX(80px);}
#contents_hd .bg { display: table; width: 100%; background: #d991a3; background-size: 100% auto; padding: 10px 0 ;}
#contents_hd #menu { vertical-align: middle; width: 50px;}
#page_01 {position: relative;}
#page_01.fix{position: fixed; width: 100%; top: 0; left: 0; z-index: 100;}
#menu_btn { position: absolute; top: 0; left: 0; width: 50px; height: 50px; opacity: 1;}
#menu_btn.none {opacity: 0;}
#menu_btn_float { background: #433b31; position: fixed; width: 50px; height: 50px; z-index: 100; opacity: 1; display: block; top: 44px;}
#menu_btn_float.fixed_menu { transition: all.3s ease; background: #433b31; background-size: 50px 50px; top: 0px; opacity: 1; display: block;}
#menu_btn_float.open {top: 44px;}
#menu_btn span,
#menu_btn_float span { background: #ffffff; width: 20px; height: 3px; position: absolute; left: 15px; display: block; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
#menu_btn span:nth-child(1),#menu_btn_float span:nth-child(1) {top: 15px;}
#menu_btn span:nth-child(2),#menu_btn_float span:nth-child(2) {top: 23px;}
#menu_btn span:nth-child(3),#menu_btn_float span:nth-child(3) {top: 31px;}
#menu_btn.open span:nth-child(1),
#menu_btn_float.open span:nth-child(1) { top: 23px; -webkit-transform: rotate(45deg) translateX(0px) translateY(0px); transform: rotate(45deg) translateX(0px) translateY(0px);}
#menu_btn.open span:nth-child(2),
#menu_btn_float.open  span:nth-child(2) {opacity: 0;}
#menu_btn.open span:nth-child(3),
#menu_btn_float.open span:nth-child(3) { top: 23px; -webkit-transform: rotate(-45deg) translateX(0px) translateY(0px); transform: rotate(-45deg) translateX(0px) translateY(0px);}
#contents_hd h1 { vertical-align: middle; text-align: center;}
#contents_hd_sewco { vertical-align: middle; text-align: center;}
#slide_menu {display: none; position: absolute; top: 49px; left: 0; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; transition: all .3s ease; width: 100%; background: #b17887; z-index: 100;}
#slide_menu ul li a{display: block; color: #fff; padding:10px; text-align: center; background: url(/-/media/cojp/product/printer/home/magazine/img/printermag-slide-r) no-repeat right center; background-size: 36px;}
#slide_menu ul li a em{display: block; font-size: 1.2em;}
#slide_menu ul li + li{border-top: 1px dotted #fff;}
#slide_menu.open {display: block;}
#contents_wrapper { position: relative; overflow: hidden; transition: all.3s ease; background: #fff;}
#contents_wrapper.open { -webkit-transform: translateX(80px); transform: translateX(80px);}



.boxstyle01{padding: 26px 4%;}

.slider li a:hover{opacity: 1;}

.rankingnav.fixed{position: inherit; top: inherit; left: inherit; margin-left: 0;}
.rankingnav.absolute{position: inherit; right: inherit; bottom: inherit;}
.rankingnav ul li a:hover p{text-decoration: none;}
.rankingnav ul{width: 96%; margin: 0 2%;}

.bg-area{padding: 30px 0 70px;}
.bg-area:before{height: 40px;}
.bg-area:after{height: 40px;}

.ttlstyle01{margin-bottom: 22px;}

.cate-nav ul li a{padding: 12px 6px;}


}

/* ABS追加 2018/2/13 */
.video iframe{
  width:560px;
  height:315px;
}
@media screen and (max-width: 640px) {
	.video{
	  position:relative;
	  width:100%;
	  padding-top:56.25%;}
	.video iframe{
	  position:absolute;
	  top:0;
	  right:0;
	  width:100%;
	  height:100%;
	}
}
.insta{
	width:658px;
	margin:0 auto;
}
@media screen and (max-width: 640px) {
	.insta{
		width:100%;
	}
}
div[id*="___plusone"] {
	vertical-align:top !important;
}
#snsPart iframe{
	vertical-align:top;
}
/* ABS追加 終わり */

/* ABS追加 2018/6/27 */
.kiji_img_banner { text-align: left;}
.kiji_img_banner .img { max-width: 100%; height: auto;}
/* ABS追加 終わり */

/* ---------------------------------------------------------
   ページャーPC用
----------------------------------------------------------*/
#paging { margin: 40px auto; text-align: center;}
#paging li { display: inline-block; margin: 0 3px;}

.light-theme a, .light-theme span{ display: block; width: 40px; height: 40px; padding: 13px 0 0 0; height: 27px; background-color: #e5e5e5; border-radius: 5px; color: #282828; font-size: 14px; font-weight: 500; line-height: 1em; text-decoration: none; cursor: pointer;}
#paging li .next, #paging li .prev { width: 80px;}
.light-theme a:hover,
.light-theme .current, .light-theme span:hover { background-color: #696969; color: #ffffff; opacity: 1;}
.light-theme .current.next,
.light-theme .current.prev{display: none;}


@media screen and (max-width: 640px) {
	/* ---------------------------------------------------------
	   ページャー SP用
	----------------------------------------------------------*/
	.light-theme a, .light-theme span{display: none;}
	.light-theme .next,
	.light-theme .prev{display: inline-block !important; font-size: 1.2em; text-align: center; color: #fff; background: #606060; font-weight: bold; padding: 14px 17px 4px;}
	.light-theme .next:hover,
	.light-theme .prev:hover{background: #606060; opacity: 1;}
	.light-theme .disabled{pointer-events: none; opacity: 0.3; display: none !important;}
}