@charset "UTF-8";
#dia_btn_wrap {
	font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif !important;
}
#dia_jhclub{
	position: fixed;
	bottom: 22%;
	right: 20px;
	z-index: 1000;
	filter: drop-shadow( 2px 2px 5px rgba(0,0,0,0.35 ));
}
#dia_jhclub:hover{
	cursor: pointer;
}
#dia_jhclub a{
	display: block;
}
.dia_close{
	padding: 0.1em;
	width: calc( 30px - 0.2em );
	height: calc( 30px - 0.2em );
	background: #4d4d4d;
	color: #ffffff;
	border-radius: 50%;
	position: absolute;
	top: -10px;
	right: -10px;
	text-align: center;
	font-size: 1.5rem;
}
.dia_btn{
	margin: 0 5% 0 5.5%;
	width: calc( ( 100% - 5% - 5.5% - 5.5% ) / 2 );
	height: 75px;
	float: left;
	text-align: center;
}
.dia_btn:last-child{
	margin: 0 5.5% 0 0;
}
.dia_btn:last-child a{
	background: #f9874e;
}

.dia_btn a{
	height: 75px;
	background: #034ea2;
	display: block;
}
.dia_btn p{
	padding: 1.8em 0 0 0;
	color: #ffffff;
	display: inline-block;
}
.dia_btn a span{
	margin: 0 0 0 8px;
	padding: 1.4em 0 0;
	width: 46px;
	height: calc( 46px - 1.4em);
	display: inline-block;
	color: #f9874e;
	background: #ffffff;
	border-radius: 50%;
	font-size: 80%;
	text-align: center;
	font-weight: bold;
}
.dia_intro{
	text-align: center;
	display: block;
	overflow: hidden;
}
.dia_intro.jch__content_width{
	margin-bottom: 2em;
}
.dia_intro p{
	margin: 0;
	padding: 0;
	line-height: 1.7em;
	color: #000000;
	font-weight: bold;
	font-size: 1.2rem;
}
.dia_btn_wrap_color{
	margin: 0;
	padding: 2.5em 0 3em 0;
	background: #eeebe8;
	overflow: hidden;
	display: block;
}
.jch__content_width {
/* 	overflow: hidden; */
	margin: 0 auto;
	padding: 0;
	height: 100%;
	/*! vertical-align: middle; */
}

/* == from ,to,,,,,web and book */
#jhc__main_body {
	padding: 0 0 50px 0;
	display: block;
}






.jhc__archive_contents_warning_bl{
	margin: 0 0 19px 0;
	padding: 14px 0 13px 0;
	color: #ff0000;
	text-align: center;
	font-size: 87%;
	letter-spacing: 0.087em;
	background: #e5e5e5;
	clear: both;
}
#jhc_archive_contentsno{
	margin: 0 0 55px 0;
	padding: 50px;
	width: calc( 100% - 100px);
	overflow: hidden;
	display: block;
	clear: both;
	position: relative;
	background: #ffffff;
}
.jhc_archive_contentsupper{
	margin: 0 0 45px 0;
	padding: 0;
	width: 100%;
	display: block;
	clear: both;
}
.jhc__archive_contents .jhc_archive_contents_h2ttl{
	margin: 0 0 26px 0;
	padding: 28px 0 26px 0;
	font-size: 150%;
	font-weight: bold;
	letter-spacing: 0.075em;
	position: relative;
	line-height: 1.3em;
	display: block;
	color: #000000;
}
.jhc__archive_contents .jhc_archive_contents_h2ttl:after{
	content: '';
	margin: 0;
	padding: 0;
	width: 100%;
	height: 3px;
	display: block;
	background: #000000;
	position: absolute;
	bottom: 0;
	left: -50px;
}
#jhc_archive_contentsno .jhc__contents_head_box{
	padding: 10px 17px 10px 19px;
	font-size: 84%;
}
#jhc_archive_contentsno .jhc__category_inner_b{
	letter-spacing: 0.1em;
}
.jhc__archive_contents h3{
	margin: 0 0 25px 0;
	padding: 0;
	font-size: 200%;
	line-height: 1.27em;
	letter-spacing: 0.075em;
}
.jhc__archive_contents .jhc_archive_contents_h3ttl:before, .jhc__archive_contents .jhc_archive_contents_h3ttl:after{
	display: none;
}
.jhc__archive_contents .jhc_archive_contents_h3ttl{
	padding-left: 0;
	display: block;
	clear: none;
}
.jhc_archive_contents_cover{
	margin: -78px 0 40px 40px;
	padding: 0;
	display: block;
	float: right;
	position: relative;
	z-index: 5;
}
.jhc_archive_contents_cover img{
	width: 100%;
	max-width: 190px;
	box-shadow: 0px 3px 9px 0 rgba(51, 51, 51, 0.3);
	-webkit-box-shadow: 0px 3px 9px 0 rgba(51, 51, 51, 0.3);
	-moz-box-shadow: 0px 3px 9px 0 rgba(51, 51, 51, 0.3);
	-o-box-shadow: 0px 3px 9px 0 rgba(51, 51, 51, 0.3);
	-ms-box-shadow: 0px 3px 9px 0 rgba(51, 51, 51, 0.3);
	float: right;
}

.jhc_archive_contents_lead{
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1.65em;
	letter-spacing: 0.05em;
}
.jhc_magazine_profile{
	margin: 0;
	padding: 10px;
	clear: both;
	overflow: hidden;
	display: block;
	background: #e5e5e5;
	line-height: 1.75em;
	letter-spacing: 0.06em;
	font-size: 86%;
}
.jhc_magazine_profile_img{
	margin: 0;
	padding: 0;
	width: 180px;
	display: block;
	overflow: hidden;
	float: left;
}
.jhc_magazine_profile_img img{
	vertical-align: bottom;
}
.jhc_magazine_profile_text{
	margin: 0;
	padding: 30px 30px 30px 32px;
	width: calc( 100% - 180px - 62px );
	float: right;
}
.jhc_magazine_profile_name{
	margin: 0 0 16px 0;
	font-size: 111%;
	font-weight: bold;
	line-height: 1.4em;
	letter-spacing: 0.115em;
}
.jhc_magazine_profile_text p{
	margin: 0;
	padding: 0;
	line-height: 1.75em;
	font-size: 87%;
	letter-spacing: 0.058em;
}
#jhc_archive_contents_magazine{
	margin: 0;
	padding: 50px 50px 50px 50px;
	width: calc( 100% - 100px );
	clear: both;
	overflow: hidden;
	background: #ffffff;
}

#jhc_archive_contents_magazine h2 {
	margin: 50px 0 36px 0;
	padding: 0;
	width: 100%;
	display: block;
	font-size: 189%;
	font-weight: bold;
	letter-spacing: 0.09em;
	/* margin: 0 0 70px 0; */
	clear: both;
	overflow: hidden;
	position: relative;
}

.jhc__archive_contents h3 {
	margin-top: 36px;
	/*margin-bottom: 38px;*/
	padding: 0 0 1px 40px;
	width: calc( 100% - 40px );
	font-size: 150%;
	color: #004ea2;
	line-height: 1.2em;
	letter-spacing: 0.11em;
	position: relative;
	clear: both;
	display: inline-block;
}

.jhc__archive_contents h3:before {
	content: '';
	margin: 0;
	padding: 0;
	width: 22px;
	height: 22px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 7, 139, 0.8);
	z-index: 100;
	z-index: 2;
}

.jhc__archive_contents h3:after {
	content: '';
	margin: 0;
	padding: 0;
	width: 18px;
	height: 18px;
	display: block;
	position: absolute;
	/* bottom: 0; */
	top: 13px;
	left: 13px;
	background: rgba(0, 101, 189, 0.8);
	z-index: 100;
	z-index: 1;
}

.jhc__archive_contents h4 {
	margin: 20px 0;
	padding: 0;
	width: 100%;
	display: block;
	font-size: 130%;
	font-weight: bold;
	letter-spacing: 0.09em;
}

#jhc_archive_contents_magazine p{
	margin: 0;
	padding: 0;
	display: block;
	line-height: 1.9em;
	letter-spacing: 0.1em;
	font-size: 108%;
	font-weight: normal;
	text-indent: 1em;
}
.jhc_magazine_imgright{
	margin: 0 0 10px 43px;
	padding: 0;
	display: block;
	float: right;
}
.jhc_magazine_imgleft{
	margin: 0 43px 10px 0;
	padding: 0;
	display: block;
	float: left;
}


/********ページトップ********/
#jhc_magazine_pagetop{
	margin: 0;
	padding: 0;
	position: fixed;
	right: 20px;
	bottom: 80px;
}
#jhc_magazine_pagetop a{
	margin: 0;
	padding: 0;
	width: 50px;
	height: 50px;
	display: block;
	background: #004ea1;
}
#jhc_magazine_pagetop a:after{
	content: '';
	margin: 0;
	padding: 0;
	border: 10px solid #ffffff;
	border-color: transparent transparent #ffffff transparent;
	border-width: 10px 8px;
	left: calc( 50% - 8px );
	position: absolute;
	top: 10px;
}

body{
    -webkit-touch-callout:none; /* リンク長押しのポップアップ(※1)を無効化*/
    -webkit-user-select:none; /*テキスト長押しの選択ボックス(※2)を無効化*/
}

.jhc_magazine_profile .box_left {
	margin: 5px 10px 10px 0;
	padding: 0;
	max-width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
	float: left;
}
.jhc_magazine_profile .box_right {
	margin:  5px 0 10px 10px;
	padding: 0;
	max-width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
	float: right;
}
.jhc_magazine_profile .box_center {
	margin:  10px auto;
	padding: 0;
	max-width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
	clear: both;
}
#jhc_archive_contents_magazine .box_center{
	margin: 10px auto 10px;
	padding: 0;
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}
#jhc_archive_contents_magazine .box_right {
	margin: 10px 0 10px 43px;
	padding: 0;
	max-width: 100%;
	height: auto;
	display: block;
	float: right;
}
#jhc_archive_contents_magazine .box_left {
	margin: 10px 43px 10px 0;
	padding: 0;
	max-width: 100%;
	height: auto;
	display: block;
	float: left;
}
.jhc_magazine_profile span{
	display: block;
	clear: both;
}

@media all and (-ms-high-contrast:none){
	*::-ms-backdrop, 
	.jhc_magazine_pageprev .jhc__button_sm_inner {
		padding: 10px 13px 5px 25px;
		font-weight: bold;
	} /* IE11 */

	.jhc_magazine_pagenext .jhc__button_sm_inner {
		padding: 10px 25px 5px 13px;
		font-weight: bold;
	} /* IE11 */
	#jhc_archive_contentsno .jhc__contents_head_box{
		padding: 14px 17px 8px 19px;
	}
	.jhc__archive_contents_warning{
		padding-top: 3px;
	}
	#jhc__button_nolog_swit ul li a{
		padding: 10px 10px 5px 10px;
	}
	#jhc__button_nolog .jhc__button_arc{
		padding: 10px 10px 6px 30px;
	}
}
@-moz-document url-prefix(){
	#jhc_magazine_pageshift{
		filter: drop-shadow( 0px -1px 10px rgba(51, 51, 51, 0.4));
		
}
.jhc_archive_contents_cover img{
	filter: drop-shadow(0px 3px 9px rgba(51, 51, 51, 0.3));
}
#jhc_orderbtn_recommend,
#jhc_orderbtn_page {
	filter: drop-shadow(0px 0px 2px inset rgba(51, 51, 51, 0.4));
}
#jhc_orderbtn_recommend.jhc_btn_clicked,
#jhc_orderbtn_page.jhc_btn_clicked{
	filter: drop-shadow(
		0px 0px 4px inset rgba(255, 255, 255, 0.4),
		0px 0px 2px inset rgba(0, 0, 0, 0.4));
	}
}
@media screen and (max-width: 1000px){
	#jhc__main_body.jhc__archive_contents .jch__content_width, 	#jhc__header_archive .jch__content_width, #jhc_magazine_pageshift .jch__content_width{
		margin: 0 20px;
		padding: 0;
		width: calc( 100% - 40px );
	}
}
@media screen and (max-width: 910px){
	#jhc_ac_bmbtn{
		background-position: 9px center;
	}
}
@media screen and (max-width: 840px){
	#jhc__main_body {
		padding: 0 0 40px 0;
	}
	#jhc__header_archive .jhc__header_le {
	margin: 0;
		padding: 0;
		text-align: center;
		width: auto;
		float: left;
  }

  #jhc__header_archive .jhc__header_le img {
		width: 120px;
	}
	#jhc__header_archive .jhc__header_ri{
		margin: 0;
		display: block;
		width: calc(100% - 131px);
		padding: 0px;
	}
	#jhc__header_archive{
		padding: 10px 0;
	}
	#jhc__header_archive .jhc__header_ri .jhc__button_arc span{
		display: none;
	}
	#jhc__header_archive .jhc__header_ri .jhc__button_arc{
		padding: 5px;
		width: 20px;
		height: 20px;
		background-position: center center;
		position: relative;
		border-radius: 2px;
	}
	#jhc__header_archive .jhc__header_ri .jhc__button_arc img{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
	}
	#jhc__button_nolog{
		text-align: left;
	}

	#jhc__header_archive .jhc__header_ri .jhc__button_arc span#jhc_ac_closebtn2 {
	  display: inline-block;
	  top: 7px;
	  left: 3px;
	}
	#jhc__header_archive #jhc_ac_sharebtn01,
	#jhc__header_archive #jhc_ac_sharebtn02 {
	  padding: 5px;
	}
	
	#jhc_ac_closebtn {
	    padding: 5px !important;
	}

	#jhc_canvas {
		height: calc(100% - 50px - 50px);
		top: 50px;
	}

}
@media screen and (max-width: 767px){
	.jhc_archive_contents_cover{
		margin: 0 0 20px 0;
		width: 100%;
		float: none;
		clear: both;
		text-align: center;
	}
	.jhc_archive_contents_cover img{
		margin: 0 auto;
		float: none;
	}
	#jhc__main_body.jhc__archive_contents h2.jhc_archive_contents_h2ttl:after{
		width: calc( 100% + 100px );
	}
	#jhc_archive_contents_magazine .box_left,
	#jhc_archive_contents_magazine .box_right{
		margin: 5px auto 20px;
		max-width: 100%;
		height: auto;
		display: block;
		float: none;
		width: auto;
	}
	
	.dia_btn{
		margin: 0 0 1.5em 0;
		width: 100%;
	}
}
@media screen and (max-width: 739px){
	.jhc_magazine_imgright, .jhc_magazine_imgleft{
		margin: 0 0 20px 0;
		width: 100%;
		clear: both;
		display: block;
	}
}
@media screen and (max-width: 700px){
	#jhc_archive_contentsno{
		padding: 50px 40px;
		width: calc( 100% - 80px );
	}
	#jhc_archive_contents_magazine{
		padding: 0 40px 50px 40px;
		width: calc( 100% - 80px );
	}
}
@media screen and (max-width: 650px){
	.jhc_magazine_profile_img{
		margin: 0 auto 20px auto;
		float: none;
	}
	.jhc_magazine_profile_text{
		padding: 0;
		width: 100%;
		float: none;
	}
}

@media screen and (max-width: 540px){
	#jhc_archive_contentsno{
		padding: 50px 25px;
		width: calc( 100% - 50px );
	}
	#jhc_archive_contents_magazine{
		padding: 0 25px 50px 25px;
		width: calc( 100% - 50px );
	}
	#jhc__main_body {
		padding: 0 0 40px 0;
	}
	#jhc__header_archive .jhc__header_le {
		margin: 0 0 10px;
		width: 100%;
		float: none;
	}
	#jhc__header_archive .jhc__header_ri {
		margin: 0;
		padding: 0;
		width: 100%;
	}
	#jhc__button_nolog .jhc__button_arc {
		margin: 0 1px;
	}
	#jhc_ac_closebtn {
		float: none;
	}
	.jhc_magazine_profile .box_left,
	.jhc_magazine_profile .box_right{
		margin: 0 auto 10px;
		max-width: 100%;
		height: auto;
		width: auto;
		display: block;
		float: none;
	}
	#jhc_canvas {
		height: calc(100% - 90px - 50px);
		top: 90px;
	}

}
@media screen and (max-width: 375px){
	#jhc_archive_contentsno{
		padding: 50px 20px;
		width: calc( 100% - 40px );
	}
	#jhc_archive_contents_magazine{
		padding: 0 20px 50px 20px;
		width: calc( 100% - 40px );
	}
	#dia_jhclub{
		bottom: calc( 80px + 100px );
	}
}

@media screen and (max-width: 374px){
	#jhc__header_archive .jch__content_width, #jhc_magazine_pageshift .jch__content_width{
		margin: 0 10px;
		width: calc( 100% - 20px );
	}
	.jhc__header_le{
		margin-top: 1%;
		width: 32%;
	}
	#jhc_magazine_pagetop, #dia_jhclub{
		right: 10px;
	}
}
@media screen and (max-width: 340px){
	#jhc_archive_contentsno{
		padding: 50px 15px;
		width: calc( 100% - 30px );
	}
	#jhc_archive_contents_magazine{
		padding: 0 15px 50px 15px;
		width: calc( 100% - 30px );
	}

}
@media print { 
	#jhc__header_archive {
	  position: relative;
	}
	.jhc__header_ri {
	  display: none;
	}
	#jhc__main_body {
	  padding-top: 0;
	}
	#jhc_magazine_pagetop {
	  display: none;
	}
	#jhc_magazine_pageshift {
	  display: none;
	}
}


/* sato_add */
.jhc__header_ri {
	width: calc(100% - 27%);
}
.jhc__button_nolog_swit {
	overflow: hidden;
	float: left;
	width: auto;
	margin: 0 10px 0 0;
}

.jhc__button_nolog_swit_inner {
	float: left;
}

.jhc__button_nolog_swit_inner li{
	padding: 8px 0px 7px 0px;
	border: 1px solid #000;
	border-radius: 4px;
	font-weight: normal;
	font-size: 87%;
	float: left;
}

#jhc__button_nolog {
	width: auto;
	height: auto;
}


.jhc__button_nolog_swit_inner a {
	padding: 8px 13px;
}

#jhc_archive_contents_magazine ul {
	margin: 10px 0;
	padding: 10px;
	font-size: 110%;
	font-weight: normal;
	letter-spacing: 0.077em;
	line-height: 1.85em;
	border: 1px solid #444444;
}
@media all and (-ms-high-contrast: none){
	.dia_btn{
		width: calc( ( 100% - 5% - 5.5% - 5.5% ) / 2 - 1px );
	}
	.dia_btn p{
		padding-top: 2em;
	}
}