@charset "utf-8";

/*====================================
  一般
====================================*/

body {
	margin:0;
	padding:0;
	font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#333333;
	font-size:16px;
	line-height:1.6em;
	
}
@media print {
  body {
      font-family:sans-serif;
  }
}

a {
	text-decoration: none;
	color:#0074bd;
}

a:hover {
	text-decoration: none;
    opacity: 0.7;
}

img {
	vertical-align:top;
	border:none;
}

a:hover img.hov {
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}

/* ---IE7.IE8 clearfix--- */
.clearfix:after { content: ".";display: block;clear: both;height: 0;visibility: hidden; }
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}


/*====================================
  レイアウト調整
====================================*/
.panel {
  display: inline-block;
}

.overflow {
  overflow: hidden;
}

.f_left {
  float: left;
}

.f_right {
  float: right;
}


/*====================================
  色指定
====================================*/
.red {
  color: #e73656;
}

.green {
  color: #72af2d;
}


/*====================================
  テキスト基本設定
====================================*/
p {
  text-indent: 1em;
}

.no_indent {
  text-indent: 0;
}

.down {
  margin-bottom: 30px;
}

.indent {
  padding-left: 1em;
}

.koduka {
  /*---- IEで崩れるので使用しない----*/
  font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
  line-height: 1.2;
}

.bold {
  font-weight: bold;
}

.space {
  height: 3.4em
}

.sasshi_content .book_outline:nth-of-type(3n) .book .space {
  height: 5.5em;
}

.sasshi_content .book_outline:nth-of-type(6) .book .space {
  height: 1.8em;
}

.sasshi_content .book_outline:nth-of-type(4) .book .space {
  height: 5.5em;
}

.sasshi_content .book_outline:nth-of-type(7) .book .space {
  height: 0;
}

.pc_none {
  display: none;
}
.sp_none {
  display: block;
}

/*====================================
  横幅設定
====================================*/
.container {
  max-width: 100%;
  margin: 0 auto;
}

/*====================================
  背景設定
====================================*/
.wrapper {

}

/*====================================
  ヘッダー
====================================*/
div#header {
	text-align: center;
	background: url(../images/header_line.gif) repeat-x left top;
}

div#header p.editorial {
	text-align: center;
	position: relative;
	margin-top: -7px;
	font-size: 12px;
}

div#document {
	width: 900px;
	margin: 0 auto;
}

.title {
	text-align: center;
	margin:40px 0 20px 0;
}

#logo {
  background: url(../img/pattern_orange.jpg) repeat;
}

#logo img {
  margin: 0 auto;
  max-width: 672px;
  margin: 5% 0;
  box-sizing: border-box;
}

#pagetop{
    position:fixed;
    right: 40px;
    bottom: 40px;
    cursor: pointer;
    z-index: 10;
}

.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

/*====================================
  ヘッダー・ナビ
====================================*/

nav ul li a {
  width: 100%;
  color: #5d412a;
  font-weight: bold;
}

nav {
  padding: 10px 0 10px 38px;
  background: #fff;
  border-bottom: 4px solid #ffc98d;
}

nav ul {
  text-align: center;
}

nav ul li {
  width: 30%;
  box-sizing: border-box;
  margin-right: 1%;
  padding-left: 0.5%;
  font-size: 18px;
}

nav ul li:nth-of-type(3) {
  margin-right: 0;
}

nav ul li img {
  margin-right: 7px;
}

/*====================================
  各共通項目
====================================*/

.heading_title {
  padding: 60px 0;
}

/*====================================
  導入部（メイン）
====================================*/

.introduction {
  background: url(../img/pattern_white.jpg);
  text-align: center;
  padding: 80px 0;
  box-sizing: border-box;
}

.introduction .main_img {
  max-width: 772px;
  margin: 0 0 60px 0;
}

.introduction .description {
  color: #5d412a;
  font-size: 18px;
  line-height: 2.0em;
}

.introduction .description .sp_style {
  font-weight: bold;
  font-size: 27px;
}

.introduction .description .marker {
  background: linear-gradient(transparent 65%, #c5e2fd 65%);
}

/*====================================
  導入部（メイン）と冊子の中身の境界線
====================================*/
.border {
  background: url(../img/border_wave.png) repeat-x;
  height: 17px;
}

/*====================================
  冊子の中身
====================================*/
.sasshi_content {
  background: url(../img/pattern_blue.jpg);
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
/*
.sasshi_content::after {
  content: url(../img/border_b.png);
  position: absolute;
  bottom: -5px;
  width: 100%;
  height: 10px;
}
*/

.sashi_wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.sasshi_content .book_outline {
  position: relative;
}

.sasshi_content .book_outline .title_shiori {
  position: absolute;
  left: 100px;
  border: 0;
}

.sasshi_content .book_outline:nth-of-type(2n) .title_shiori {
  left: 200px;
}

.sasshi_content .book {
  margin: 0 auto;
  padding: 120px 0;
  background: url(../img/content_book_bk.png) no-repeat left 5em top 8px;
  margin-bottom: 40px;
}

.sasshi_content .book_outline:nth-of-type(2n) .book {
  margin-left: 100px;
}

.sasshi_content .book .title_imgs {
  width: 45%;
}

.sasshi_content .book .title_imgs img {
  width: 85%;
  padding-left: 125px;
  padding-top: 40px;
}

.sasshi_content .book_outline:first-of-type .book .title_imgs img {
  width: 65%;
}

.sasshi_content .book .text {
  width: 55%;
  margin-top: 20px;
  padding: 0 70px 0 55px;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1.8em;
  letter-spacing: 0.1em;
}

.sasshi_content .book_outline:nth-of-type(2n) .book .text {
  margin-top: 0;
}

.sasshi_content .book_outline:nth-of-type(2n) .book .text {
  padding-left: 115px;
}

.sasshi_content .book .text .comment,
.sasshi_content .book .text p {
  width: 75%;
  text-align: left;
  color: #5d412a;
}

.sasshi_content .book_outline:nth-of-type(2n) .book .text .comment,
.sasshi_content .book_outline:nth-of-type(2n) .book .text p {
  width: 95%;
}

.sasshi_content .book_outline:last-of-type .book {
  margin-bottom: 0;
}

.sasshi_content .book .text .comment {
  background: #fff6ba;
  border: 1px dashed #f5ac3c;
  border-radius: 10px;
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
  }

.sasshi_content .book .text .comment {
  margin-top: 5px;
}

.sasshi_content .book .text .comment p {
  width: 100%;
}

.book .text .comment>h4 {
  text-align: center;
}

.book .text .comment>h4 img {
  margin-bottom: 7px;
}

.kuma {
  position: absolute;
  bottom: 0;
  left: 0;
}

.kuma_right {
  position: absolute;
  bottom: 0;
  right: 0;
}

#left-box .img {
  clear: both;/*.spaceのfloat解除*/
  margin: 0.5em 0 0 0.5em;/*画像の周りの余白*/
}

.sasshi_content .book .title_imgs img.tate {
  width: 40%;
}

/*====================================
  うれしい付録
====================================*/
.furoku {
  background: url(../img/pattern_stripe.jpg);
  text-align: center;
}

.furoku_wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding-bottom: 60px;
}

.furoku .block {
  background: #ffeb95;
  width: 45%;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 20px;
  color: #5d412a;
}

.furoku .block:first-of-type {
  margin-right: 5%;
}

.furoku .block h3 {
  font-size: 24px;
  padding: 45px 10px;
  text-align: left;
}

.furoku .block:nth-of-type(2) h3 {
  padding: 35px 10px;
}

.furoku .block .detail {
  margin: 10px 0;
  font-size: 15px;
  text-align: left;
}

.furoku div.block .detail {
  text-align: center;
}

.furoku .comment {
  background: #fff6ba;
  border: 1px dashed #f5ac3c;
  border-radius: 10px;
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.8em;
  letter-spacing: 0.1em;
}

.furoku .comment h4 {
  text-align: center;
}

.furoku .comment .space {
  height: 0;
}

.furoku .comment h4 {
  margin: 7px 0;
}

.furoku .block.last_block {
  clear: both;
  margin: 0 auto;
}

.furoku .froku_img {
  width: 80%;
}
/*====================================
  matchHeight.js
====================================*/

ul {
    max-width: 960px;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
li {
    float: left;
    width: 200px;
    margin: 5px;
    padding: 5px;
}

#sample_box {
  margin-bottom: 40px;
}

/*====================================
  読者の声
====================================*/
.readers {
  background: url(../img/pattern_pink.jpg);
  text-align: center;
}

.readers_wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.readers .voice {
  max-width: 713px;
}

.readers .notes {
  color: #5d412a;
  font-size: 13px;
  padding: 20px 0;
}

/*====================================
  きめ細かくフォロー
====================================*/
.follow {
  background: url(../img/pattern_white.jpg);
  text-align: center;
}

.follow_wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding-bottom: 40px;
}

.follow .bikou {
  background: #f6dbab;
  color: #352112;
  text-align: center;
  width: 330px;
  padding: 10px;
  font-size: 13px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 40px;
}

.follow .follow_img {
  max-width: 956px;
}


/*====================================
  フッター
====================================*/

.footer {
  background: #bedefd;
  text-align: center;
  color: #5c4029;
}

.footer_wrapper {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 20px 10px;
}

.footer .heading_title {
  font-size: 22px;
  padding-bottom: 5px;
  padding-top: 20px;
  border-bottom: 1px dashed #5c4029;
  margin-bottom: 10px;
}

.footer .footer_text {
  text-align: left;
}

.footer .link {
  text-decoration: underline;
  color: #5c4029;
}

.footer .space {
  height: 0;
}

/*
.footer .p_mark {
  width: 75px;
}
*/

.footer .footer_space {
  background: #cde5f9;
  border-radius: 10px;
  padding: 15px 15px;
  margin-top: 60px;
}

.footer .footer_space .shaho_img {
  margin-bottom: 15px;
}

.footer .footer_space table {
  text-align: left;
  margin: 0 auto;
  width: 100%;
}

.footer .footer_space table tr,
.footer .footer_space table tbody {
  width: 100%;
}

.footer .footer_space table tr th,
.footer .footer_space table tr td {
  padding: 3px;
}

.footer .footer_space table tr th {
  width: 15%;
}

.footer .footer_space table tr td:first-of-type {
  width: 60%;
}

.footer .footer_space table tr td:nth-of-type(2) {
  width: 20%;
}

.footer .copy {
  font-size: 12px;
  margin-top: 30px;
}