@charset "utf-8";
/* CSS Document */

body{
	font: 14px/1.6 Helvetica, YuGothic, "Hiragino Kaku Gothic Pro", メイリオ, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	margin:0;
	color:#000000;
	overflow: hidden;
}

/* @group common */

.onlySP {
	display: none;
}

img{
	outline:none;
	border-style:none;
}

a img:hover {
	opacity: 0.5;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

a{
  color:#333;
	text-decoration: none;
}
a:visited{
  color:#333;
}
a:hover {
  color:#999;
}

.alignleft {
	float: left;	
}
.alignright   {
	float: right;
}
.aligncenter {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	display: table;
}

.clear {
	clear: both;
}

.hide {
	display: none;
}

p {
	margin-bottom: 20px;
}

h1 {
	margin: 0;
	padding: 0;
}

h2 {
	font-size: 22px;
	color: #000;
}

h3 {
	font-size: 18px;
	color: #000;
}

h4 {
	font-size: 16px;
	margin-top: 30px;
	margin-bottom: 20px;
	color: #000;
}

h5 {
	font-size: 14px;
	margin-bottom: 6px;
	margin-top: 20px;
	color: #000;
}

h6 {
	font-size: 14px;
	color: #000;
}

.breadcrumb {
	font-size: 12px;
	margin-bottom: 40px;
	color: #666;
}

.breadcrumb a{
	text-decoration: underline;
	margin-right: 12px;	
}

.breadcrumb .divider:after {
	content:"/";
	margin-right: 12px;
}

a.pdf {
	padding-left: 20px;
	background: url(../image/common/pdf.png) 0 center no-repeat;
	background-size: 12px 16px;
}

a.blank {
	padding-left: 20px;
	background: url(../image/common/blank.png) 0 center no-repeat;
	background-size: 14px 11px;
}

/* @end */

/* @group header */

header {
	width: 100%;
	margin-bottom: 40px;
	margin-top: 25px;
}

header .headerInner {
	width: 94%;
	margin-right: 3%;
	margin-left: 3%;
	min-width: 960px;
}

header .headerSub {
	margin-bottom: 12px;
	float: right;
	position: relative;
	z-index: 200;
}

header .headerSub #search {
	position: relative;
	width: 220px;
	height: 28px;
	float: left;
	margin-right: 20px;
}

header .headerSub input#searchBox {
	height:28px;
	padding: 0 30px 0 10px; 
	position:absolute;
	left:0;
	top:0; 
	border-radius:20px;
	outline:0;
	border: 1px solid #d3d3d3;
	width: 220px;
	font-size: 12px;
}

header .headerSub button#searchButton {
	height:30px;
	border:none;
	font-size:13px;
	position: absolute;
	right: 3px;
	padding-left: 7px;
	line-height: 13px;
	top: -1px;
	padding-right: 7px;
}

header .headerSub #member {
	float: right;
	color: #fff;
	background-color: #000;
	font-size: 12px;
	line-height: 12px;
}

header .headerMain {
	clear: both;
	display: inline-block;
	width: 100%;
	position: relative;
	z-index: 100;
}

header .logo {
	width: 300px;
	float: left;
}

header .logo a {
	display: block;
	line-height: 0;
}

/* @end */

/* @group member */

#member ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: #fff;
}
#member ul.pulldown > li{
    float: left;
    position: relative;
    margin: 0;
    padding: 8px 8px 8px 30px;
    width: 120px;
    background-color: #000;
    display: block;
}
#member ul.pulldown > li:before{
		position: absolute;
		content: "";
		top: 50%;
		width:0px;
		height:0px;
		margin: -2px 0 0 0;
		border: 5px solid transparent;	
		border-top: 5px solid #fff;
		cursor: pointer;
		pointer-events: none;
		left: 10px;
}
#member ul.child{
    display: none;
    position: absolute;
    margin-left: 0px;
    padding: 0;
		top: 28px;
		left: 0;
}
#member ul.child li{
    padding: 0px;
		display: block;
    color: #fff;
		margin: 0;
		background-color: #000;
		width: 120px;
}
#member ul.child li a{
    padding: 12px 7px;
		display: block;
    color: #fff;
		margin: 0;
}
#member li a:hover{
    background: #666;
}

/* @end */

/* @group footer */

footer {
	width: 100%;
	background-color: #f7f7f7;
	float: left;
	padding-top: 40px;
	padding-bottom: 32px;
	margin-top: 60px;
}

footer .footerInner {
	width: 94%;
	margin-right: 3%;
	margin-left: 3%;
	min-width: 960px;
}

footer a {
	color: #000;
}

footer .footerMain {
	width: 100%;
	display: inline-block;
	margin-bottom: 20px;
}

footer .footerSub {
	width: 100%;
	clear: both;
}

.footerMain .footerLeft {
	width: 100%;
	float: left;
	margin-right: -300px;
	padding-right: 300px;
}

.footerSub .footerLeft {
	width: 300px;
	float: left;
}

.footerMain .footerRight, .footerSub .footerRight {
	width: 300px;
	float: right;
}

footer ul {
	float: left;
	width: 20%;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

footer li {
	list-style-type: none;
	margin-bottom: 20px;
	font-size: 12px;
	padding-left: 12px;
	background: url(../image/common/arrow.svg) left 0px top 5px no-repeat;
	background-size: 4px 7px;
}

footer .footerTwitter, footer .footerInstagram {
	background: url(../image/common/twitter.svg) left 0px top 8px no-repeat;
	background-size: 15px 15px;
	padding-left: 25px;
	font-size: 12px;
	margin-bottom: 10px;
	font-weight: bold;
	line-height: 1.5;
	float: left;
	clear: both;
}

footer .footerInstagram {
	background: url(../image/common/instagram.svg) left 0px top 8px no-repeat;
	background-size: 15px 15px;
}

footer a:hover .footerTwitter, footer a:hover .footerInstagram {
	opacity: 0.5;
}

footer .snsAccount {
	float: left;
	color: #666;
	font-size: 10px;
}

footer .footerLogo {
	width: 140px;
}

footer address {
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
}
/* @end */

/* @group index */

h2.topTitle {
	text-align: center;
	margin-bottom: 30px;
	margin-top: 0;
}

.topTitleEn {
	font-size: 22px;
	border-bottom: 2px solid #000;
	width: 80px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 5px;
	margin-bottom: 10px;
}

.topTitleJa {
	font-size: 14px;
	margin-left: auto;
	margin-right: auto;
}

.grid {  
	width:100%;
	padding:10px;
	margin-right: auto;
	margin-left: auto;
}

.grid-item {
	width: 120px;
	margin-bottom: 25px;
	box-shadow: 0 0 1px #999;
	position: relative;
}

.grid-item a {
	line-height: 0;
	display: block;
}

a .item-info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
	z-index: 10;
	line-height: 1.4;
	color: #fff;
	height: 100%;
	font-size: 12px;
	opacity: 0;
}

a:hover .item-info {
	opacity: 1;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.item-info p  {
	margin: 5%;
	display: inline-block;
	height: 90%;
	overflow: hidden;
}

.item-info .title {
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

.item-info .data {
	display: block;
}

.grid-item img {
	width: 100%;
}

.topNews {
	background-color: #f7f7f7;
	padding-bottom: 40px;
	padding-top: 40px;
	display: inline-block;
	width: 100%;
}

.topNewsInner {
	width: 94%;
	margin-right: 3%;
	margin-left: 3%;
	min-width: 960px;
	position: relative;
}

h2.topNewsTitle {
	text-align: center;
	margin: 0 auto 30px;
}

h2 .topNewsTitleLine {
	border-bottom: 2px solid #000;
	width: 70px;
	padding-top: 10px;
	margin-right: auto;
	margin-left: auto;
}

.topNewsList {
	width: 100%;
}

.topNewsArticle {
	width: 100%;
	float: left;
	margin-bottom: 20px;
	overflow: hidden;
}

.topNewsBtn {
	right: 0;
	float: right;
}

.topNewsBtn a {
	background: url(../image/common/circlearrow.svg) left 0px top 2px no-repeat;
	background-size: 12px 12px;
	padding-left: 16px;
}

.topNewsArticle .date {
	float: left;
	margin-right: 5px;
	bottom: 2px;
	position: relative;
	width: 80px;
}

.topNewsArticle .category {
	float: left;
	font-size: 10px;
	border: 1px solid #333;
	width: 110px;
	text-align: center;
	margin-right: 15px;
	letter-spacing: -1px;
}

.topNewsArticle a {
	background: url(../image/common/arrow.svg) left 0px top 6px no-repeat;
	background-size: 4px 7px;
	padding-left: 12px;
	float: left;
	width: 100%;
	margin-right: -222px;
	padding-right: 222px;
}

.topReviSns {
	padding-top: 60px;
	display: inline-block;
	margin-right: 3%;
	margin-left: 3%;
	width: 94%;
}

.topRevision {
	width: 100%;
	float: left;
	margin-right: -340px;
	padding-right: 340px;
}

.topRevisionInner {
	border: 1px solid #000;
	min-height: 478px;
	position: relative;
}

h2.topRevisionTitle {
	padding: 20px;
	border-bottom: 1px solid #000;
	margin: 0;
}

.topRevisionBtn {
	right: 20px;
	float: right;
	position: absolute;
	top: 24px;
}

.topRevisionBtn a {
	background: url(../image/common/circlearrow.svg) left 0px top 2px no-repeat;
	background-size: 12px 12px;
	padding-left: 16px;
}

.topRevisionList {
	padding: 20px 20px 0;
	display: inline-block;
}

.topRevisionArticle {
	width: 100%;
	float: left;
	margin-bottom: 20px;
	overflow: hidden;
}

.topRevisionArticle .category {
    float: left;
    font-size: 10px;
    border: 1px solid #333;
    width: 110px;
    text-align: center;
    margin-right: 15px;
    letter-spacing: -1px;
}

.topNewsBtn {
	right: 0;
	float: right;
}

.topNewsBtn a {
	background: url(../image/common/circlearrow.svg) left 0px top 2px no-repeat;
	background-size: 12px 12px;
	padding-left: 16px;
}

.topRevisionArticle .date {
	float: left;
	margin-right: 5px;
	bottom: 2px;
	position: relative;
	width: 80px;
}

.topRevisionArticle a {
	background: url(../image/common/arrow.svg) left 0px top 6px no-repeat;
	background-size: 4px 7px;
	padding-left: 12px;
	float: left;
	margin-right: -100px;
	padding-right: 100px;
}

.topTweet {
	width: 300px;
	float: right;
	border: 1px solid #000;
	padding: 1px;
}

/* @end */

/* @group list */

.detail ,
.searchList ,
.form  ,
.newsList,
.newsDetail,
.subscription,
.login{
	width: 960px;
	margin: auto;
}

/*左カラム*/

.searchList .sideBar {
	width: 240px;
	background-color: #efefef;
	padding: 20px 20px 0;
	margin-right: 40px;
	float: left;
}

.searchList .sideBar li {
	list-style: none;
	background: url(../image/common/arrow.svg) left 0px top 6px no-repeat;
	background-size: 4px 7px;
	padding-left: 12px;
	font-size: 12px;
	color: #000;
	margin-bottom: 12px;
}

.searchList .sideBar ul {
	margin-bottom: 20px;
}

.searchList .sideBar ul.sideSyllabary li {
	float: left;
	padding-right: 17px;
}

.searchList .sideBar ul {
	overflow: hidden;
}

.searchList .sideBar .sideTitle {
	margin-bottom: 22px;
	font-size: 14px;
}

/*右カラム*/

.searchList .listTitle {
	font-size: 14px;
	width: 680px;
	padding-bottom: 10px;
	border-bottom: 1px solid #9e9e9e;
	margin-bottom: 40px;
	overflow: hidden;
	position: relative;
}

.searchList .listTitle h2 {
	font-size: 14px;
	float: left;
	width: 100%;
	margin-right: -80px;
	padding-right: 80px;
}

.searchList .listBtnWrapper {
	width: 80px;
	position: absolute;
	bottom: 13px;
	right: 0;
}

.searchList .listBtn {
	height: 19px;
	width: 19px;
	margin-left: 20px;
	float: left;
	opacity: 1;
}

.searchList a .listBtn {
	opacity: 0.2;
}

.searchList a:hover .listBtn {
	opacity: 1;
}

.searchList .listWrapper {
	width: 680px;
	margin-bottom: 0px;
	float: left;
}

/*ボックス表示*/

.searchList .listBox a img:hover {
	opacity: 1;
}

.searchList .listBox .item {
	font-size: 12px;
	line-height: 18px;
	margin-right: 40px;
	margin-bottom: 40px;
	width: 140px;
	float: left;
}

.searchList .listBox .item P {
	margin-bottom: 0;
}

.searchList .listBox .item a:hover .itemImgWrapper {
	opacity: 0.5;
}

.searchList .listBox .item:nth-child(4n) {
	margin-right: 0px;
}

.searchList .listBox .item:nth-child(4n+1) {
	clear: both;
}

.searchList .listBox .itemImgWrapper {
	margin-bottom: 10px;
	display: table;
	width: 100%;
}

.searchList .listBox .itemImg {
	display: table-cell;
	vertical-align: middle;
	background-color: #fff;
	width: 140px;
	height: 200px;
	text-align: center;
}

.searchList .listBox .itemImg img{
	display: block;
	max-width: 140px;
	max-height: 200px;
	border: 1px solid #efefef;
	margin-left: auto;
	margin-right: auto;
}

/*ライン表示*/

.searchList .listLine a img:hover {
	opacity: 1;
}

.searchList .listLine .item {
	overflow: hidden;
	margin-bottom: 20px;
	border-bottom: 1px solid #efefef;
	padding-bottom: 20px;
}

.searchList .listLine .item a {
	display: inline-block;
}

.searchList .listLine .item a:hover {
	opacity: 0.5;
}

.searchList .listLine img {
	width: 120px;
	float: left;
	margin-right: 20px;
}

.searchList .listLine .itemInner {
	overflow: hidden;
}

.searchList .listLine .itemTitle {
	font-size: 16px;
	margin-bottom: 10px;
	font-weight: bold;
	color: #000;
}

.searchList .listLine .itemWriter {
	font-size: 14px;
	margin-bottom: 10px;
	line-height: 22px;
	color: #333;
}

.searchList .listLine .itemSummary {
	font-size: 14px;
	line-height: 22px;
	color: #333;
	margin-bottom: 0;
}

/*ページャー*/

.pager {
	margin-right: auto;
	margin-left: auto;
	display: table;
	text-align: center;
	clear: both;
	padding-top: 20px;
}

.pager ul {
	float: left;
}

.pager li {
	list-style: none;
	float: left;
	margin-right: 6px;
	margin-top: 3px;
	margin-left: 6px;
	text-align: center;
}

.pager li a {
	display: inline-block;
	width: 20px;
	padding-bottom: 2px;
}

.pager .arrowL , 
.pager .arrowR {
	float: left;
}
.pager .arrowL a {
	width: 30px;
	height: 30px;
	border: 1px solid #9e9e9e;
	background: url(../image/common/arrow_end.svg) center center no-repeat;
	background-size: 7px 7px;
	transform: scale(-1, 1);
	margin-right: 10px;
	float: left;
}

.pager .arrowR a {
	width: 30px;
	height: 30px;
	border: 1px solid #9e9e9e;
	background: url(../image/common/arrow_end.svg) center center no-repeat;
	background-size: 7px 7px;
	margin-left: 10px;
	float: left;
}

.pager .arrowL a:hover , 
.pager .arrowR a:hover {
	background-color: #efefef;
}

.pager .location {
	border-bottom: 1px solid #000;
	width: 20px;
	padding-bottom: 2px;
}

/* @end */

/* @group detail */

/*左カラム*/

.detail .detailLeftBox {
	float: left;
	font-size: 12px;
	width: 340px;
	margin-right: 40px;
}

.detail .detailLeftBox .detailPh img {
	border: 1px solid #efefef;
	width: 340px;
	margin-bottom: 20px;
}

.detail .detailLeftBox .thumPh {
	width: 79px;
	border: 1px solid #efefef;
	float: left;
	margin-right: 8px;
	margin-bottom: 8px;
}

.detailLeftBox .thumBox {
	margin-right: -8px;
	overflow: hidden;
	margin-bottom: 22px;
}

.detail  .detailLeftBox .detailTable {
	width: 340px;
	background-color: #efefef;
	text-align: left;
	padding: 20px;
	line-height: 26px;
	margin-bottom: 30px;
}

.detail  .detailLeftBox .detailTable th {
	white-space: nowrap;
	padding-right: 20px;
	width: 80px;
}

.detail .detailLeftBox a .sample {
	background-color: #333;
	height: 36px;
	float: left;
	color: white;
	width: 160px;
}

.detail .detailLeftBox a:hover .sample {
	opacity: 0.5;
}

.detail .detailLeftBox .sampleInner {
	background: url(../image/common/sample.svg) left 30px top 9px no-repeat;
	background-size: 14px;
	padding-left: 40%;
	padding-top: 9px;
}

.detail .detailLeftBox .support {
	padding-top: 9px;
	height: 30px;
	float: right;
	width: 160px;
}

.detail .detailLeftBox .support a {
	height: 30px;
	background: url(../image/common/arrow.svg) left center no-repeat;
	background-size: 4px;
	padding-left: 10px;
	white-space: nowrap;
}

.detail .detailLeftBox .ecStore {
	margin-top: 30px;
	display: inline-block;
}

.detail .detailLeftBox .ecStore p {
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 5px;
}

.detail .detailLeftBox .ecStore a {
	margin-top: 20px;
	display: inline-block;
	float: left;
	width: 160px;
}

.detail .detailLeftBox .ecStore a:nth-child(odd) {
	float: right;
}

.detail .detailLeftBox .ecStore img {
	border: 1px solid #333;
	width: 100%;
	display: block;
}

/*右カラム*/

.detail .detailRightBox {
	overflow: hidden;
}

.detail .detailRightBox a img:hover {
	opacity: 1;
}

.detail  h2 {
	line-height: 32px;
	padding-bottom: 10px;
	color: #000;
	border-bottom: 1px solid black;
	margin-bottom: 30px;
}

.detail .detailLeftBox h2 {
	display: none;
}

.detail h3 {
	margin-bottom: 30px;
	color: #000;
	margin-top: 40px;
	border-top: 1px solid #efefef;
	padding-top: 20px;
}

.detail .detailText {
	color: #666;
	line-height: 22px;
}

.detail .detailText h3:first-of-type  {
	margin-top: 0px;
	border-top: 0px solid #efefef;
	padding-top: 0;
}

.detail .detailRightBox .item {
	font-size: 12px;
	line-height: 18px;
	margin-right: 33px;
	margin-bottom: 30px;
	width: 120px;
	float: left;
}

.detail .detailRightBox .item p {
	margin-bottom: 0;
}

.detail .detailRightBox .item a:hover .itemImgWrapper {
	opacity: 0.5;
}

.detail .detailRightBox .item:nth-child(4n) {
	margin-right: 0px;
}

.detail .detailRightBox .item:nth-child(4n+1) {
	clear: both;
}

.detail .detailRightBox .itemImgWrapper {
	margin-bottom: 10px;
	display: table;
	width: 100%;
}

.detail .detailRightBox .itemImg {
	display: table-cell;
	vertical-align: middle;
	background-color: #fff;
	width: 120px;
	height: 170px;
	text-align: center;
}

.detail .detailRightBox .itemImg img{
	display: block;
	max-width: 120px;
	max-height: 170px;
	border: 1px solid #efefef;
	margin-left: auto;
	margin-right: auto;
}

/* lightgallery */
#lg-download, 
#lg-share, 
#lg-actual-size, 
#lg-zoom-out, 
#lg-zoom-in, 
#lg-fullscreen, 
.lg-fullscreen, 
.lg-autoplay-button {
	display: none;
}

.lg-outer .lg-thumb-item {
	border-radius: 0px;
}

.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
	border-style: none;
}

/* @end */

/* @group form */

.form h2 ,
.newsList h2,
.newsDetail h2 ,
.subscription h2,
.login h2{
	line-height: 32px;
	padding-bottom: 10px;
	color: #000;
	border-bottom: 1px solid black;
	margin-bottom: 30px;
}

.form .formBox {
	border-top: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
}

.form .formLine {
	overflow: hidden;
	border-bottom: 1px solid #d3d3d3;
	display:flex;
}

.form .formItem {
	width: 284px;
	background-color: #efefef;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-top: 40px;
	float: left;
}

.form .formItem p {
	margin-bottom: 0;
}

.form .formInput {
	padding-top: 35px;
	padding-bottom: 35px;
	padding-left: 40px;
	float: left;
	width: 676px;
}

input {
/*	-webkit-appearance: none;
	border-radius: 0;*/
}

.form .inputNo {
	width: 141px;
	height: 32px;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	height: 32px;
	text-indent: 10px;
}

.form .bookNoBox {
	padding-top: 40px;
	padding-left: 40px;
	float: left;
	width: 676px;
	margin-bottom: 30px;
}

.form .textHalf
{
	width: 287px;
	margin-right: 20px;
	float: left;
	border: 1px solid #ddd;
	height: 32px;
	text-indent: 10px;
}

.form .textLong
{
	width: 594px;
	float: left;
	border: 1px solid #ddd;
	height: 32px;
	text-indent: 10px;
}

.form .textArea {
	border: 1px solid #ddd;
	padding: 10px;
	width: 594px;
	line-height: 18px;
	display: block;
	border-radius: 0;
}

.form .inputName {
	margin-right: 40px;
}

.form .formCheck {
	margin-bottom: 10px;
	float: left;
}

.form label.checkbox {
	margin-right: 20px;
	cursor: pointer;
	border: 1px solid #ddd;
	padding: 5px 10px;
	float: left;
}

.form label.checkbox:hover {
	background-color: #efefef;
}

.form label.checkbox input {
	margin-right: 10px;
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #333;
	color: #fff;
}

.form label.checkbox input:checked {
	background-color: #333;
}

.form label.radio {
	margin-right: 20px;
	cursor: pointer;
	border: 1px solid #ddd;
	padding: 5px 10px;
	float: left;
}

.form label.radio:hover {
	background-color: #efefef;
}

.form label.radio input {
	margin-right: 10px;
	border-radius: 20px;
	background-color: #fff;
	border: 1px solid #333;
	color: #fff;
}

.form label.radio input:checked {
	background-color: #333;
}

.form .zasshi {
	width: 594px;
	height: 32px;
	border: 1px solid #ddd;
	border-radius: 0px !important;
	text-indent: 10px;
	background: url(../image/common/select.svg) right 10px center no-repeat;
	background-size: 7px 14px;
}

.form .submit {
	width: 214px;
	height: 46px;
	margin: 40px auto auto;
}

.form .btn{
	background-color:black;
	text-align: center;
	color: white;
	width: 214px;
	height: 46px;
	font-size: 14px;
	line-height: 46px;
	padding-left: 12px;
	transition: 400ms;
}

.form .btn:hover {
	opacity: 0.5;
}

.form .btn::before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 8px;
	height:8px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background-size: contain;
	margin-left: -30px;
	margin-top: 19px;
}

.form .formText {
	font-size: 12px;
	color: #666666;
	margin-bottom: 10px;
	float: left;
	clear: both;
	width: 100%;
}

.form .required:after{
	content: '';
	background-image: url(../image/common/required.jpg);
	display: inline-block;
	width: 24px;
	height: 15px;
	margin-left: 10px;
	background-size: contain;
	position: absolute;
	margin-top: 3px;
}

/* @end */

/* @group newsList */

.newsList .newslistBox {
	border: 1px solid #c3c3c3;
	margin-bottom: 40px;
}

.newsList .newsListLine:nth-child(odd) {
	background-color: #efefef;
}

.newsList .newsListLine {
	height: 54px;
	width: 958px;
	padding-left: 20px;
	vertical-align: middle;
	height: 54px;
	padding-right: 20px;
}

.newsList .newsListDay {
	line-height: 54px;
	float: left;
	margin-right: 25px;
	margin-bottom: 0;
}

.newsList .newsListTag {
	float: left;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 10px;
	margin-right: 25px;
	height: 54px;
	letter-spacing: -1px;
}

.newsList .tag {
	border: 1px solid #c3c3c3;
	height: 24px;
	width: 110px;
	line-height: 24px;
	text-align: center;
}

.newsList .newsTitle {
	line-height: 54px;
	background: url(../image/common/arrow.svg) left 0px top 22px no-repeat;
	background-size: 4px 7px;
	padding-left: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* @end */

/* @group newsDetail */

.newsDetailBox {
	border: 1px solid #c3c3c3;
	width: 800px;
	margin: auto;
}

.newsDetailTitle {
	background-color: #efefef;
	padding: 20px 80px;
}

.newsDetailDay {
	margin-bottom: 5px;
}

.newsDetailText {
	padding: 20px 80px 40px;
	line-height: 22px;
}

.newsDetailText p {
	margin-bottom: 20px;
}

.newsDetailText h2{
	border: none;
	font-weight: 500;
}

.newsDetail a {
	text-decoration: underline;
}

/* @end */

/* @group subscription login */

.subscriptionBox {
	font-size: 14px;
}

.subscription h3 {
	font-size: 18px;
	margin-bottom: 4px;
}

.subscription .stylRed {
	color: #cc1919;
}

.subscription ul {
	position: relative;
}

.subscription li {
	list-style: none;
	padding-left: 16px;
}

.subscription-memberpolicy li {
    list-style-type: decimal !important;
    padding-left: 0px !important;
}

.subscription-memberpolicy li:before {
    content: "" !important;
}

.subscription-memberpolicy ul {
    padding-left: 2rem;
}

.subscription-memberpolicy .list-style-type-clear {
  list-style-type: none !important;
}

.subscription li:before {
	content: "・";
	color: #000;
	position: absolute;
	left: 0;
}

.subscription .nonmember, 
.subscription .member, 
.loginBox {
	background-color: #efefef;
	padding: 40px;
	margin-bottom: 40px;
}

.subscriptionBox {
	margin-bottom: 40px;
}

.subscription .member .btn, 
.loginBox .member .btn {
	background-color: #000;
	text-align: center;
	color: white;
	width: 214px;
	height: 46px;
	font-size: 14px;
	line-height: 46px;
	padding-left: 12px;
	transition: 200ms;
}

.subscription .member .btn:hover, 
.loginBox .member .btn:hover {
	opacity: 0.5;
}

.subscription .member .btn::before, 
.loginBox .member .btn::before {
	content: "";
	background-image: url(../image/common/login.svg);
	display: inline-block;
	position: absolute;
	width: 24px;
	height: 20px;
	background-size: contain;
	margin-left: -30px;
	margin-top: 13px;
}

.subscription .nonmember .btn, 
.loginBox .nonmember .btn {
	background-color: #000;
	text-align: center;
	color: white;
	width: 214px;
	height: 46px;
	font-size: 14px;
	line-height: 46px;
	padding-left: 12px;
	transition: 200ms;
}

.subscription .nonmember .btn:hover, 
.loginBox .nonmember .btn:hover {
	opacity: 0.5;
}

.subscription .nonmember .btn::before, 
.loginBox .nonmember .btn::before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 8px;
	height: 8px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background-size: contain;
	margin-left: -30px;
	margin-top: 19px;
}

.subscription .btn, .loginBox .btn {
	width: 214px;
	height: 46px;
	margin: 40px auto auto;
	display: block;
}

.subscription input, .login input {
	border: 1px solid #d3d3d3;
	height: 32px;
	text-indent: 13px;
	background-color: white;
	width: 500px;
}

.subscriptionForm, .loginForm {
	width: 620px;
	margin: auto;
}

.subscriptionForm .pass, 
.subscriptionForm .mailaddress, 
.loginForm .pass, 
.loginForm .mailaddress {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.loginBox .forget {
	text-decoration: underline;
	margin-bottom: 40px;
	text-align: center;
	margin-top: 40px;
}

.loginBox .forget a {
	color: #333333;
}

.login .line {
	border-bottom: 1px solid #9e9e9e;
}

/* @end */

/* @group kenchiku */

.kenchi {
	width: 960px;
	margin: auto;
}

.kenchiImgWrapper {
    width: 100%;
    background-color: #000;
    height: 100px;
    display: table;
    text-align: center;
    margin-bottom: 40px;
}

 .kenchiImg{
 	width: 302px;
    display: table-cell;
 	vertical-align: middle;
 }

.kenchiImg img {
    width: 302px;
}

.kenchiTitle{
	line-height: 32px;
	padding-bottom: 10px;
	color: #000;
	border-bottom: 1px solid black;
	margin-bottom: 30px;
}

.kenchiLeft {
	width: 620px;
	margin-right: 40px;
	float: left;
}

.kenchiBook {
	width: 280px;
	margin-right: 40px;
	float: left;
	box-shadow: 0 0 1px #999;
	margin-bottom: 40px;
}

.kenchiText {
	width: 300px;
	float: left;
	margin-bottom: 40px;
}

.kenchi h3 {
	font-size: 22px;
	line-height: 33px;
	margin-bottom: 40px;
}

.kenchiNews{
    background-color: #f7f7f7;
    padding-top: 20px;
    display: inline-block;
    width: 100%;
	margin-bottom: 40px;
}
.kenchiRevision{
    padding-top: 20px;
    display: inline-block;
    width: 100%;
	margin-bottom: 40px;
	border: 1px solid #000;
}
.kenchi .kenchiNewsInner {
	width: 94%;
	min-width: 620px;
	position: relative;
}

.kenchiNewsArticle {
	width: 100%;
	float: left;
	margin-bottom: 20px;
	overflow: hidden;
}

.kenchiNewsInner h2.kenchiTitle {
	text-align: left;
	margin: 0 auto 20px;
	border-bottom: 1px solid #000;
	text-indent: 20px;
	padding-bottom: 10px;
}

.kenchiNewsList {
	width: 100%;
	margin-right: 20px;
	margin-left: 20px;
}

.kenchiNewsArticle .date {
	float: left;
	margin-right: 5px;
	bottom: 2px;
	position: relative;
	width: 80px;
}
.kenchiNewsArticle .category {
	float: left;
	font-size: 10px;
	border: 1px solid #333;
	width: 110px;
	text-align: center;
	margin-right: 15px;
	letter-spacing: -1px;
}

.kenchiNews .kenchiNewsArticle a {
	background: url(../image/common/arrow.svg) left 0px top 6px no-repeat;
	background-size: 4px 7px;
	padding-left: 12px;
	float: left;
	width: 100%;
	margin-right: -252px;
	padding-right: 252px;
	font-size: 12px;
}

.kenchiRevision .kenchiNewsArticle a {
	background: url(../image/common/arrow.svg) left 0px top 6px no-repeat;
	background-size: 4px 7px;
	padding-left: 12px;
	float: left;
	width: 100%;
	margin-right: -252px;
	padding-right: 252px;
	font-size: 12px;
}

.kenchiNewsBtn  {
	right: 20px;
	float: right;
	position: absolute;
	top: 3px;
}
.kenchiNewsBtn a {
	background: url(../image/common/circlearrow.svg) left 0px top 2px no-repeat;
	background-size: 12px 12px;
	padding-left: 16px;
}
.kenchiBanner {
	float: left;
	width: 300px;
}
.kenchiBanner img{
	width:  100%;
	height: auto;
	margin-bottom: 20px;
}
.kenchiWrapper {
	overflow: hidden;
}
.backNumber h2{
	line-height: 32px;
	padding-bottom: 10px;
	color: #000;
	border-bottom: 1px solid black;
	margin-bottom: 30px;
	text-align: left;
}
.backNumber .listBox{
	overflow: hidden;
}
.backNumber a img:hover {
	opacity: 1;
}

.backNumber  .item {
	font-size: 12px;
	line-height: 18px;
	margin-right: 40px;
	margin-bottom: 40px;
	width: 160px;
	float: left;
}
.backNumber .item P {
	margin-bottom: 0;
}

.backNumber .item a:hover .itemImgWrapper {
	opacity: 0.5;
}

.backNumber .item:nth-child(5n) {
	margin-right: 0px;
}

.backNumber .item:nth-child(5n+1) {
	clear: both;
}

.backNumber .itemImgWrapper {
	margin-bottom: 10px;
	display: table;
	width: 100%;
}

.backNumber .itemImg {
	display: table-cell;
	vertical-align: middle;
	background-color: #fff;
	width: 160px;
	height: 231px;
	text-align: center;
}

.backNumber .itemImg img{
	display: block;
	max-width: 160px;
	max-height: 231px;
	border: 1px solid #efefef;
	margin-left: auto;
	margin-right: auto;
}
.backNumber .item P {
	margin-bottom: 0;
}
.backNumber  .btn {
	background-color: #000;
	text-align: center;
	color: white;
	width: 214px;
	height: 46px;
	font-size: 14px;
	line-height: 46px;
	padding-left: 12px;
	transition: 200ms;
}

.backNumber .btn:hover {
	opacity: 0.5;
}

.backNumber .btn::before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 8px;
	height: 8px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background-size: contain;
	margin-left: -30px;
	margin-top: 19px;
}
.backNumber .btn {
	width: 214px;
	height: 46px;
	margin: 40px auto auto;
	display: block;
}
/* @end */

@media screen and (max-width: 640px){
/* for SmartPhone */

/* @group common */

.onlySP {
	display: inline;
}

a:hover {
  color:#333;
}

a:active {
  color:#999;
}

.breadcrumb {
	margin-bottom: 30px;
}

/* @end */

/* @group header */

header {
	margin-bottom: 20px;
	margin-top: 0px;
	border-bottom: 1px solid #eee;
	padding-top: 15px;
	padding-bottom: 0px;
}

header .headerInner {
	min-width: 100px;
	margin: 0;
	width: 100%;
	padding: 0;
	line-height: 0;
}

header .headerSub {
	display: none;
}

header nav {
	display: block;
}

header .logo {
	width: 200px;
	float: left;
	margin-left: 3%;
	margin-top: 2px;
}

/* @end */

/* @group index */
	
.grid {  
	width: 100%;
	padding: 0%;
	margin-right: auto;
	margin-left: auto;
}

.grid-item {
	width: 100px;
	line-height: 0;
	margin-bottom: 25px;
	box-shadow: 0 0 1px #999;
	position: relative;
}

a:hover .item-info {
	opacity: 0;
}

.topNewsInner {
	min-width: 100px;
}

.topNewsArticle a {
	margin: 5px 0px 5px 0;
	width: 97%;
	padding: 0 0 0 3%;
}

.topReviSns {
	padding-top: 40px;
}

.topRevision {
	width: 100%;
	float: left;
	margin-right: -0px;
	padding-right: 0px;
	margin-bottom: 40px;
}

.topRevisionArticle a {
	margin-right: 0px;
	padding-right: 0px;
}

.topTweet {
	width: 100%;
	float: left;
}

/* @end */

/* @group footer */

footer {
	margin-top: 40px;
}

footer .footerInner {
	min-width: 100px;
}

.footerMain .footerLeft {
	width: 100%;
	float: left;
	margin-right: 0;
	padding-right: 0;
	margin-bottom: 20px;
}

footer ul {
	float: left;
	width: 33.3%;
}

.footerSub .footerLeft {
	width: 100%;
	float: left;
	margin-bottom: 10px;
}

.footerMain .footerRight, 
.footerSub .footerRight {
	width: 100%;
	float: left;
}

.footerMain .footerRight {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding-top: 20px;
	padding-bottom: 10px;
}

/* @end */

/* @group list */

.detail , .searchList {
	width: 94%;
	margin-right: 3%;
	margin-left: 3%;
}

.searchList .sideBar {
	display: none;
}

.searchList .listWrapper, 
.searchList .listTitle {
	width: 100%;
}

.searchList .listBox .item {
	margin-right: 3%;
	width: 48.5%;
}

.searchList .listBox .item a:hover .itemImgWrapper {
	opacity: 1;
}

.searchList .listBox .item:nth-child(even) {
	margin-right: 0%;
}

.searchList .listLine .item a:hover {
	opacity: 1;
}

/* @end */

/* @group detail */

.lg-actions .lg-next, 
.lg-actions .lg-prev {
	/* lightbox */
	display: none !important;
}

.detail .detailLeftBox h2 {
	display: block;
	margin-bottom: 30px;
}

.detail .detailLeftBox a .sample {
	width: 48.5%;
}

.detail .detailLeftBox .support {
	width: 48.5%;
}

.detail .detailLeftBox .ecStore a {
	margin-top: 3%;
	display: inline-block;
	float: left;
	width: 48.5%;
}

.detail .detailLeftBox .ecStore img {
	width: 100%;
}

.searchList .listLine img {
	width: 30%;
	margin-right: 5%;
}

.detail .detailLeftBox .detailPh {
	width: 70%;
	margin-right: auto;
	margin-left: auto;
}

.detail .detailLeftBox, 
.detail .detailLeftBox .detailTable, 
.detail .detailLeftBox .detailPh img {
	width: 100%;
	margin-right: 0px;
}

.detail .detailLeftBox {
	float: none;
}

.detail .detailRightBox {
	margin-top: 40px;
}

.detail .detailRightBox h2 {
	display: none;
}

.detail .detailText h3:first-of-type  {
	border-top: 1px solid #efefef;
	padding-top: 20px;
	margin-bottom: 20px;
	margin-top: 2px;
}

.detail .detailRightBox .item {
	margin-right: 3%;
	width: 48.5%;
}

.detail .detailRightBox .item a:hover .itemImgWrapper {
	opacity: 1;
}

.detail .detailRightBox .item:nth-child(even) {
	margin-right: 0%;
}

.detail .detailRightBox .item:nth-child(odd) {
	clear: both;
}

/* @end */

/* @group form */
.form  ,
.newsList,
.newsDetail,
.subscription,
.login  {
	width: 94%;
	margin-right: 3%;
	margin-left: 3%;
}

.form .formInput {
	width: 94%;
	margin-right: 3%;
	margin-left: 3%;
	padding-top: 10px;
	padding-left: 0px;
	padding-bottom: 0;
}

.form .zasshi{
	width: 100%;
	margin-bottom: 10px;
}

.form .formItem {
	width: 100%;
	padding-right: 3%;
	padding-left: 3%;
	float: none;
	padding-bottom: 10px;
	padding-top: 10px;
}

.form  .formLine{
	display: block;
}

.form .bookNoBox  {
	width: 97%;
	margin-left: 3%;
	padding-top: 10px;
	padding-left: 0px;
}

.form .inputNo {
	width: 48.5%;
	margin-right: 3%;
}

.form .inputNo:nth-child(even) {
	width: 48.5%;
	margin-right: 0%;
}

.form .textHalf,
.form .textLong {
	width: 100%;
	margin: 0 0 10px;
}

.form .textArea {
	margin-bottom: 10px;
	padding: 10px;
	width: 100%;
}

.form .kubun input {
	margin-bottom: 10px;
}

input,
textArea,
select {
	font-size: 16px;
}

/* @end */

/* @group newsList */

.newsList .newsListLine {
	height: auto;
	width: 100%;
	padding-left: 3%;
	padding-right: 3%;
	overflow: hidden;
}

.newsList .newsTitle{
	float: left;
	width: 100%;
}

.newsList .newsListDay ,
.newsList .newsListTag {
	margin-bottom: -10px;
}

/* @end */

/* @group newsDetail */

.newsDetailBox {
	width: 100%;
}

.newsDetailTitle {
	padding-right: 3%;
	padding-left: 3%;
}

.newsDetailText {
	padding-right: 3%;
	padding-left: 3%;
}

/* @end */

/* @group subscription login */

.subscription input,
.login  input{
	width: 100%;
}

.subscriptionForm,
.loginForm {
	width: 100%;
}

.subscriptionForm .pass ,
.subscriptionForm .mailaddress,
.loginForm .pass ,
.loginForm .mailaddress{
	display: block;
}

/* @end */

/* @group kenchiku */
.kenchi {
	width: 100%;
	padding-right: 3%;
		padding-left: 3%;
}
.kenchiLeft,
.kenchiBook, 
.kenchiText,
.kenchi .kenchiNewsInner,
.kenchiBanner,
.backNumber .listWrapper, 
.backNumber .listTitle
{
	width: 100%;
}
.kenchi .kenchiNewsInner {
	min-width: 100%;
}
.backNumber .listWrapper, 
.backNumber .listTitle {
	width: 100%;
}

.backNumber .listBox .item {
	margin-right: 3%;
	width: 48.5%;
}

.backNumber .listBox .item a:hover .itemImgWrapper {
	opacity: 1;
}

.backNumber .item:nth-child(even) {
	margin-right: 0%;
}

.backNumber .listLine .item a:hover {
	opacity: 1;
}
.backNumber .item:nth-child(5n+1) {
	clear: none;
}
.kenchiNews .kenchiNewsArticle a{
	margin: 5px 0px 5px 0;
	width: 94%;
	padding: 0 3%;
}
.kenchiRevision {
	width: 100%;
	float: left;
	margin-right: -0px;
	padding-right: 0px;
	margin-bottom: 40px;
}

.kenchiRevision .kenchiNewsArticle a {
	margin: 5px 0px 5px 0;
	width: 94%;
	padding: 0 3%;
}
/* @end */

}

@media screen and (max-width: 320px){

/* for iPhone SE */
.grid-item {
	width: 80px;
}
	
}