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


/********* resets *************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}
textarea {
    overflow: auto;
    vertical-align: top;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
	text-decoration:none;
}
li {
	list-style-type:none;
}
h1, h2, h3, h4 { font-weight:bold }
strong, b { font-weight:bold; }

/* CSS Document */

.fillChild img, .fillChild input, .fillChild select,  .fillChild textarea { width:100%; height:auto; } /*child element will be 100%*/
/*.leftChild img, .leftChild input { float:left; }
.rightChild img, .rightChild input { float:right; }*/

.elem { display:block; visibility:visible; }
.elem2 { display:block; }
.m_elem { display:none; visibility:hidden; }

.relative { position:relative; }
.block { display:block; }

.inputBox { border:1px solid #CCC; margin:2px; background:#FFF; }

/**********************************************/
/************main wrappers********************/
/**********************************************/


html,
body {
	height:100%; /*relative height of browser*/
}

.mainWrap { /*wraps all contents, mother of all containers next to body tag*/
	position:inherit; /*relative height of browser*/
	min-height:100%; /*relative height of browser*/
}

.headWrap { }

.contentWrap { padding-bottom:20px; }


a {
	-webkit-transition : all 0.2s ease-out;
	-moz-transition : all 0.2s ease-out;
	-o-transition :all 0.2s ease-out;
	transition : all 0.2s ease-out;
}



/************************************************************/

.clear { clear:both; }
.left { float:left; }
.right { float:right; }
.center { margin:0 auto; float:none; }
.txtCenter { text-align:center; }
.txtRight { text-align:right; }
.txtLeft { text-align:left; }
.noFloat { float:none; }
.pad { padding:10px; }
.marg { margin:10px; }
.spacer { padding-bottom:10px; clear:both; }
.noPad { padding:0; }
img { height:auto; }


/********************************************/





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

	.pad { padding:6px; }
	.m_txtCenter { text-align:center; }
	.m_txtLeft { text-align:left; }
	.m_left { float:left; }
	.m_right { float:right; }
	.m_center { margin:0 auto; }
	.m_noFloat { float:none; }
	.m_pad { padding:8px; }
	.m_noPad { padding:0; }

	.elem { display:none; visibility:hidden; }
	.elem2 { display:none; }
	.m_elem { display:block; visibility:visible; }

	.m_btn {
		min-width:20px; padding:0 10px; height:40px; line-height:40px; margin:2px; text-align:center;
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
	}


}
/**
 # 個別ページ
 # add: 2016/03/01 n.h
 #
 */
/**********************************/
/****** fix containers 100% ******/
/**********************************/

.defaultWidth { max-width:1166px; width:1166px; }
.sidebarWidth { max-width:336px; width:100%; float:right; }
.contentWidth { max-width:800px; width:100%; float:left; }
.contentWrap {
  padding-top:40px;
}

.mainWrap { /*wraps all contents, mother of all containers next to body tag*/
  position:relative; /*relative height of browser*/
  min-height:100%; /*relative height of browser*/
  z-index:999;
  font-size: 0;
}
/*  clearfix  */

.wrapper:before,
.wrapper:after,
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.wrapper:after,
.clearfix:after{
  clear: both;
}


/****** contents ******//****** contents ******//****** contents ******/

html,
body {
  position: relative;
  font-size:100%;
  font-family: Helvetica, "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  color:#3a3a3a;
  background:#f7f7f7;
  height:100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h2, h3, h4 {
  font-family: Helvetica, "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight:bold;
}
p {
  font-size:14px;
  color:#222222;
  line-height:22px;
  font-family: Helvetica, "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}
.wrapper {
  width: 100%;
  display:block;
}
.mobile-only { display:none; }
.pc-only { display:block; }
.pc-only-inline { display:inline; }
img { display:block; }
.headWrap {
  height:58px;
  background:#FFF;
  border-bottom:solid 1px #ededed;
}
.logo {
  float:left;
  display:block;
  margin-top:14px;
}
.sponsor {
  margin-top:22px;
  float:left;
  overflow:auto;
}
.sponsor li {
  float:left;
  margin-left:44px;
}
.sponsor a {
  display:block;
}
.menu {
  float:right;
  width:420px;
  overflow:auto;
  margin-top: 18px;
  text-align:right;
}
.menu li {
  display: inline-block;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  margin-left:20px;
}
.menu a {
  font-size:0.8em;
  color:#5a5a5a;
  font-weight:bold;
  display:block;
}
.title2 {
  font-size: 36px;
  color: #181818;
  font-weight: 800;
  line-height: 46px;
  padding: 0;
}
.title4 {
  color:#FFF;
  font-size:24px;
  text-align:center;
  font-weight:800;
  margin-bottom:20px;
  line-height:26px;
}
.subscribe {
  margin-top:30px;
}
.article-wrap {
  padding:40px;
  background:#FFF;
  border:solid 1px #e9e9e9;
}
.bn-only-sell {
  color: #E04D5D;
  font-size: 14px;
  margin-bottom: 10px;
}
.main-detail-block {
  border-color: #ff8c1a;
}
/* --- sidebar --- */
.sideblock {
  margin-bottom:20px;
  padding-top:30px;
  padding-right: 30px;
  padding-left: 30px;
	padding-bottom: 20px;
  position:relative;
}


@media only screen and (max-width: 350px) {
  .sideblock {
    padding-top: 15px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 0px;
  }
}
.gravatar {
  max-width: 100px;
  max-height: 145px;
  padding: 0 0 20px;
  margin: 0 auto;
}
.gravatar-img {
  width: 100%;
}
.images-container {
  max-width: 80px;
  width: 100%;
  overflow: hidden;
  padding:0;
  float: left;
}
.magazine-id-container {
  margin: 0 0 3px;
}
.magazine-id {
  font-size:12px;
}
.award-icons {
  font-size:0;
  line-height:1;
}
.award-icons-item {
  list-style-type: none;
  display: inline-block;
  margin-right: 8px;
}
.mag-meta {
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: left 2px;
  text-indent: 15px;
  font-size: 14px;
}
.meta-price {
  color: inherit;
  font-size: 14px;
  font-weight: normal;
  line-height: 2;
}
.first-month-tag {
  color: #d82324;
  padding-left: 10px;
}
.meta-period {
  background-image: url(https://www.mag2.com/img/icon_routine.png);
  text-indent: 20px;
}
.meta-type {
  background-image: url(https://www.mag2.com/img/icon_mail.png);
  text-indent: 20px;
}
.syogetsu {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #FFF;
}
.subscribe .syogetsu {
  float:left;
  display: inline-block;
  margin-bottom:0;
  margin-left:10px;
  position: relative;
  top: 17px;
}
.block1 {
  background:#FFF;
  border-left:solid 4px #222;
  box-sizing:border-box;
}
/*---------------------
▼▼ btn ▼▼
---------------------------*/
.btn {
  text-decoration: none;
  outline: none;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px
}

.btn:hover,
.btn:focus {
  text-decoration: none
}

.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
}

.btn-regist {
  padding: 15px 16px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.33;
  background-image: -webkit-linear-gradient(#F7C285,#ff8c1a);
  background-image: linear-gradient(#F7C285,#ff8c1a);
  border: #96792F solid 1px;
  border-bottom: #856b29 solid 1px;
  box-shadow: 0 1px rgba(251,239,208,1.0) inset;
  color: #FFFFFF!important;
  text-shadow: 0 1px 0 rgb(78, 45, 12);
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -webkit-appearance: none;
}
.btn-regist:focus,
.btn-regist:hover,
.btn-regist:active {
  color: #FFFFFF!important;
  background-image: -webkit-linear-gradient(#FFAF51,#FF8900);
  background-image: linear-gradient(#FFAF51,#FF8900);
  box-shadow: 0 1px rgba(250,221,196,1.0) inset;
  cursor: pointer;
}

.bn-btn,
.form2 input[type="submit"],
.form2 button[type="submit"] {
  width:100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}
.bn-btn .bn-btn-link {
  text-decoration: none;
}

.osusume.off {
  display: none;
}
.recommend-points {
  float:left;
}
.recommend-points li{
  font-weight: bold;
  font-size:14px;
  line-height: 1.9;
  display: list-item;
  list-style: none;
}
.recommend-points li:before {
  font-family:'FontAwesome';
  content: '\f00c';
  padding: 5px;
}
.js-folding-block {
  position: relative;
  overflow: hidden;
}
.js-folding-block.fold {
  height: 160px;
}
.js-folding-block.mag-sample.fold {
  height: 160px;
}
.js-folding-block.fold:after {
  content: ' ';
  height: 50px;
  background: url(../img/gradation.png) repeat-x bottom center;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
}
.expand-btn {
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  text-align: center;
  cursor: pointer;
}
.expand-btn.off {
  bottom: -30px;
  border: 1px solid #9A9A9A;
  background-color: #fff;
}
.expand-btn:hover {
  color: #e80008;
  transition: all 0.3s ease;
}
.expand-btn-text {
  background-color: #FFFFFF;
  color:inherit;
  display: inline-block;
  padding: 0 20px;
}
.on > .expand-btn-text {
  border: 1px solid #9A9A9A;
}
.author-name {
  font-weight: normal;
  font-size: 15px;
}
.author-name:before {
  font-family: 'FontAwesome';
  content: '\f007';
  padding-right: 3px;
  font-size: 15px;
  color: #666;
}
.date {
  float:right;
  text-align:right;
  font-size:14px;
  color:#9c9c9c;
}
.article-title {
  margin-bottom: 20px;
}
.side-title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}
.readbox {
  overflow:auto;
  margin-top:20px;
}
.show_more_backnumber,
.readmore {
  float:right;
  height:42px;
  padding-right:50px;
  background:url(../img/arrow.png) right center no-repeat;
  color:#247dc2;
  font-size:14px;
  line-height:42px;
  margin-top: 10px;
}
.subscribe { overflow:auto; margin-bottom:0; }
.subscribe .title4, .subscribe input[type="text"], .subscribe input[type="submit"] { float:left; }

.subscribe input[type="submit"] { width:110px; margin-top:0; padding-top: 8px;   height: 48px; float:right;  }
.subscribe .title4 { margin-bottom:0; line-height: 48px; display: inline-block; }
.subscribe input[type="text"] { width:330px; }


.footer-wrap {
  overflow:auto;
  background:#FFF;
  border-top:solid 1px #e3e3e3;
  padding:22px 0;
}

.footer-logo { float:right; }

.list-footer {
  float:left;
  width:1010px;
  margin-bottom:10px;
}
.list-footer li {
  float:left;
  font-size:12px;
  line-height: 12px;
}
.list-footer li a {
  padding:0 8px;
  color:#247dc2;
  border-right:solid 1px #247dc2;
}
.list-footer li:first-child a {
  padding-left:0;
}
.list-footer li:last-child a {
  border-right:0;
}
.list-footer a:hover { text-decoration:underline; }
.copyright {
  float:left;
  color:#444;
  font-size:12px;
  padding-top:10px;
}
.label2 {
  float: left;
  font-size: 18px;
  color: #656565;
  line-height: 27px;
  font-weight: bold;
}
.marker { width:30px; height:27px; background:#cfcfcf; display:block; position:absolute; left:-41px; top:0; }

.leftThis { float:left; width:1010px; }

.fm_free {
  position:absolute;
  left:0;
  top:0;
  width:80px;
  height:80px;
  overflow: hidden;
}
.fm_free_inner {
  position: relative;
  background-color: #e80008;
  color: #fff;
  font-weight: bold;
  transform: rotate(-45deg);
  width:110px;
  height:110px;
  transform-origin: -35% 85%;
  z-index: 10;
}
.fm-free-txt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  text-align: center;
  color: #FFFFFF;
  line-height: 1.3;
  font-size: 14px;
}
.main_right_top {
  position:absolute;
  right:0;
  top:0;
  padding: 10px;
  overflow: hidden;
}
.mag-sample {
  box-sizing: border-box;
  text-align: left;
  color: #323232;
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
}
.html_format .mag-sample {
  height: 475px;
}
.mag-sample iframe {
  overflow: scroll;
  border: 0;
  width: 100%;
  height: 95%;
  display: block;
}
.mag-sample > span {
  width: 100%;
  display: block;
  overflow: hidden;
}
.zengamen {
  padding-right: 15px;
  box-sizing: border-box;
}
.bk-wrap {
  background-color: #F9F9F9;
  border: 1px solid #EFEFEF;
  padding: 20px;
  font-size: 13px;
}
.bk-wrap td {
  font-weight: bold;
  padding-left: 10px;
}
.gallery-wrap {
}
.gallery {
  display: block;
  overflow: hidden;
  font-size:0;
  line-height:1;
}
.gallery-item {
  max-width: 82px;
  width: 30%;
  display: inline-block;
  margin-right: 3%;
}
.gallery-image {
  width: 100%;
}
.free-space .inner {
  max-height: 450px;
  overflow: auto;
}
.margin10-item {
  margin-bottom: 10px;
}
.margin20-item {
  margin-bottom: 20px;
}
.margin30-item {
  margin-bottom: 30px;
}

/* SNSシェアボタン */
.sns-btns {
}
.sns-btns-wrap {
  line-height: 1;
  font-size: 0;
  text-align: center;
}
.sns-btns-wrap .sns-btns-item {
  display: inline-block;
}
.sns-btns-wrap li:not(:last-child) {
  margin-right: 10px;
}
.no-baloon .sns-btns-wrap {
  height: 20px;
  overflow: hidden;
  text-align: left;
}
.no-baloon .sns-btns-wrap li {
  vertical-align: top;
}
.no-baloon .sns-btns-hatebu {
  width: 80px;
}
/* twitter */
.twitter_btn{
  width: 68px;
}

.arrow_box {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  text-align: center;
  font-size: 11px;
  height: 33px;
  line-height: 33px;
  display: block;
  text-decoration: none;
  color: #333;
  border-radius: 3px;
  font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.arrow_box:after, .arrow_box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 3px;
  margin-left: -3px;
}
.arrow_box:before {
  border-color: rgba(221, 221, 221, 0);
  border-top-color: #ccc;
  border-width: 4px;
  margin-left: -4px;
}

@media only screen and (min-width: 1181px) {
  .menu { display:block !important; }
}

@media only screen and (max-width: 1180px) {
  body { padding-top:60px; }
  p { word-wrap: break-word; }
  .footer-wrap, .contentWidth, .sidebarWidth  { padding:0 10px; box-sizing: border-box; }
  .defaultWidth { max-width:600px; width:100%; }
  .sidebarWidth { max-width:600px; width:100%; float:none; }
  .contentWidth { max-width:600px; width:100%; float:none; }

  .headWrap { height: 54px; position:fixed; width:100%; z-index:999; top:0; }
  .sp-menu { display:block; width:34px; height:34px; position:absolute; right:10px; top:10px; background:url(../img/sp/menu.png) center center no-repeat; }
  .sp-menu-close { background:url(../img/sp/menu-close.png) center center no-repeat; }
  .logo { width:120px; margin:0 auto; display:block; float:none; padding-top:12px; }
  .sponsor { display:none; }
  .menu { position:absolute; right:0; top:26px; width:100%;  padding:0; }
  .menu li { float:none; display:block; background:#7e7e7e; margin:0 10px;  }
  .menu li:first-child {  padding-top:10px; }
  .menu li:last-child { padding-bottom:10px; }
  .menu a { padding:6px 0; width:100%; text-align:center; color:#FFF; font-weight:400; font-size:15px; }
  .menu { display:none; }
  .title2 { font-size: 28px; line-height: 38px; }
  .article-wrap { padding:20px; }
  .readmore {margin: 0 auto; display: block; overflow: hidden; box-sizing: border-box;}
  .block2 { padding:20px; }

  .marker { display:none; }
  .title4 { font-size: 20px; margin-bottom: 15px; }

  .list-footer { margin-bottom:0; }
  .list-footer, .leftThis { float: left; width: 225px; }
  .list-footer li { float:none; }
  .list-footer li a { padding:0; border:0; padding-left:10px !important; line-height:24px; border-left:solid 1px #247dc2; }
  .copyright { text-align:center; font-size:11px;width: 100%; }
  .date { position: absolute; width: 100%; text-align: left; left: 0; top:0; }
  .block1 { border: solid 4px #222; }

  .show_more_backnumber { background: url(../img/sp/arrow.png) right center no-repeat;  background-size: 42px; margin: 10px auto 0; display: block; overflow: hidden; box-sizing: border-box;}
  .footer-wrap { padding-top:15px; }

  .copyright { padding-bottom:20px; }

  .mobile-only { display:block; }
  .pc-only,.pc-only-inline { display:none; }
  .title2 { padding-top: 35px; }
  .subscribe input[type="submit"],
  .subscribe .title4,
  .subscribe .syogetsu {width: 100%;}
  .subscribe .syogetsu {margin-bottom: 10px; top: 0;}
  .html_format .mag-sample {display: none;}
  .text_format .mag-sample { margin-bottom: 10px;}
  .zengamen { padding-right: 0; background-color: #EAF0F5; }
  .zengamen .readmore { float: none; text-align: center; font-size: 16px; background: none; padding: 7px; border: 1px solid #247dc2; height: auto; }
  .fm_free { left: 10px; top: 10px; width: 110px; height: 30px; }
  .fm_free_inner { transform: rotate(0deg); width: 110px; height: 30px; transform-origin: 0% 0%; }
  .fm-free-txt { bottom: inherit; top: 0; line-height: 30px; }
}
/**
 # colorbox Setting
 # add: 2016/02/29 n.h
 */
#cboxOverlay {
  background: #000;
}
#cboxLoadedContent {
  background: #fff;
}
#cboxLoadedContent {
  padding: 0;
  overflow: auto;
  -moz-box-shadow: 0px 1px 10px #000000;
  -webkit-box-shadow: 0px 1px 10px #000000;
  box-shadow: 0px 1px 10px #000000;
}
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose , #cboxTitle {
  top: -30px;
}
#colorbox, #cboxOverlay, #cboxWrapper {
  overflow: visible;
}
#cboxTitle {
  color: #fff;
}

.mag-subscribe-notice {
  font-size: 14px;
  color: #d82324;
  text-align: center;
}

.mag-subscribe-footer-notice {
  font-size: 14px;
  color: #d82324;
  text-align: center;
  margin-top: 15px;
}

.mag2award-bt {
  margin-bottom: 10px;
  text-align: right;
}

@media only screen and (max-width : 1180px ) {
  .mag2award-bt {
    text-align: center;
  }
}

/*-- 20180515 --*/

.bk-bnbtn {
  display: block;
  margin: 20px auto 10px;
  border: 1px solid #333;
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  color: #3a3a3a;
  max-width: 280px;
  font-size: 16px;
  font-weight: bold;
}

.bk-bnbtn:hover {
	background-image: linear-gradient(#FFAF51, #FF8900);
	box-shadow: 0 1px rgba(250, 221, 196, 1.0) inset;
	cursor: pointer;
	border: #96792F solid 1px;
  border-bottom: #856b29 solid 1px;
  color: #FFFFFF!important;
	transition: 0s;
}

.bn-link {
    color: #247dc2;
    font-size: 14px;
    padding: 10px 0;
    display: block;
    text-align: center;
}


/* =============================
SHARE-2637
===============================*/

.report-form {
    margin: 15px 0;
    text-align: center;
    border: 1px solid #f00;
    padding: 10px;
    line-height: 1.4;
		font-size: 13px;
}