@charset "utf-8";
/*------------------------------------------------------------
共通
------------------------------------------------------------*/
html {
  font-size: 62.5%;
}

body {
  -webkit-text-size-adjust: 100%;
  font-family: Verdana, Roboto, 'Droid Sans', '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #333;
}

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

a {
  color: #333;
  text-decoration: none;
}
a:hover {
  opacity: .7;
}

li {
  list-style: none;
}

ruby {
  line-height: 2.0;
}

rp {
  display: none;
}

rt {
  font-size: 0;
}
rt.show {
  font-size: 1.0rem;
}

input[type='text'] {
  -webkit-appearance: none;
  border-radius: 0;
  border: 1px solid #ccd4d8;
  padding: 15px 5px;
  box-sizing: border-box;
}

bgHeader {
  height: 60px;
}

@media screen and (max-width: 736px) {
  bgHeader {
    height: 80px;
  }
}
.error-message {
  color: #c00;
}

/*------------------------------------------------------------
共通クラス
------------------------------------------------------------*/
.text_only {
  font-size: 1.8rem;
  margin-bottom: 60px;
}

.icon_author {
  margin-bottom: 60px;
  text-align: right;
}
.icon_author span {
  display: inline-block;
  text-align: center;
}
.icon_author img {
  max-width: 200px;
  vertical-align: middle;
  margin-bottom: 5px;
}

.sp {
  display: none;
}
@media screen and (max-width: 736px) {
  .sp {
    display: block;
  }
}

#movie_wrap {
  position: relative;
  min-height: 420px;
  margin-bottom: 30px;
  width: 100%;
}

.eq_movie {
  position: absolute;
  min-height: 420px;
  margin-bottom: 30px;
  top: 0;
  left: 0;
  width: 100%;
  text-align: left;
}

#movie_cat01 {
  z-index: 2;
}

#movie_cat02 {
  z-index: 1;
}

.voice_text_wrap {
  margin-bottom: 60px;
  overflow: hidden;
}
.voice_text_wrap dt {
  float: left;
  width: 100px;
  height: 50px;
  border: 1px solid #cdcdcd;
  border-radius: 25px;
  text-align: center;
  padding-top: 14px;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
}
.voice_text_wrap dd {
  margin-left: 120px;
  font-size: 1.8rem;
}

.eq_movie_article {
  margin: 0 auto 30px;
  min-height: 420px;
  width: 700px;
}
.eq_movie_article .jstream-eqPlayer,
.eq_movie_article .h5_player {
  max-height: 400px;
  max-width: 700px;
}

.eq_good {
  width: 680px;
  margin: 0 auto;
}

@media screen and (max-width: 736px) {
  .text_only {
    margin-bottom: 30px;
  }

  .icon_author {
    margin-bottom: 30px;
  }

  #movie_wrap {
    min-height: 240px;
  }

  .eq_movie {
    min-height: 240px;
    margin-bottom: 15px;
  }

  .eq_movie_article {
    margin: 0 auto 10px;
    min-height: 250px;
    width: 100%;
  }
  .eq_movie_article .jstream-eqPlayer,
  .eq_movie_article .h5_player {
    height: 400px !important;
    max-height: 230px;
    position: relative !important;
    width: 100%;
  }

  .eq_good {
    display: none;
  }

  .voice_text_wrap {
    margin-bottom: 30px;
  }
  .voice_text_wrap dt {
    width: 50px;
  }
  .voice_text_wrap dd {
    margin-left: 60px;
    font-size: 1.6rem;
  }
}
/*------------------------------------------------------------
ラッパー
------------------------------------------------------------*/
#wrapper {
  width: 100%;
  overflow: hidden;
}

.inner {
  max-width: 980px;
  margin: 0 auto;
}

@media screen and (max-width: 736px) {
  .inner {
    box-sizing: border-box;
    padding: 0 10px;
  }
}
/*------------------------------------------------------------
header
 ------------------------------------------------------------*/
#header {
  position: relative;
  z-index: 1000;
  height: 190px;
  font-size: 1.4rem;
  line-height: 16px;
}
#header h1 {
  text-align: center;
  padding-top: 50px;
}
#header .bt_menu {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 9999;
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
}
#header .movie_caution{
  position: fixed;
  left:20px;
  top: 60px;
  font-size:1.0rem;
  z-index: 0;
  width: 100%;
  text-align: center;
  color: rgba(185, 0, 0, 0.8);
}
#header .lang {
  position: fixed;
  right: 230px;
  top: 20px;
  overflow: hidden;
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
}
#header .lang li {
  color: #fff;
  float: left;
  width: auto;
  padding: 0 15px;
  height: 16px;
  background: #dadada;
  cursor: pointer;
}
#header .lang li:nth-child(1) {
  border-radius: 30px 0 0 30px;
}
#header .lang li:nth-child(2) {
  border-radius: 0 30px 30px 0;
}
#header .lang li:hover {
  background: #000;
  text-decoration: none;
}
#header .lang li.select {
  background: #000;
  cursor: default;
}
#header .lang li a {
  color: #fff;
}
#header .ruby {
  position: fixed;
  right: 55px;
  top: 20px;
  overflow: hidden;
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
}
#header .ruby dt {
  float: left;
  width: auto;
  margin-right: 5px;
}
#header .ruby dd {
  color: #fff;
  float: left;
  width: auto;
}
#header .ruby dd ul {
  overflow: hidden;
}
#header .ruby dd ul li {
  float: left;
  width: auto;
  padding: 0 15px;
  height: 16px;
  background: #dadada;
  cursor: pointer;
}
#header .ruby dd ul li:nth-child(1) {
  border-radius: 30px 0 0 30px;
}
#header .ruby dd ul li:nth-child(2) {
  border-radius: 0 30px 30px 0;
}
#header .ruby dd ul li:hover {
  background: #000;
  text-decoration: none;
}
#header .ruby dd ul li.select {
  background: #000;
  cursor: default;
}
#header .search {
  position: fixed;
  right: 20px;
  top: 20px;
}
#header .search dt {
  cursor: pointer;
}
#header .search dd {
  display: none;
  width: 270px;
  position: absolute;
  top: 35px;
  right: 0;
  z-index: 1000;
}
#header .search dd form {
  overflow: hidden;
}
#header .search dd input {
  display: inline-block;
  float: left;
  width: 200px;
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  box-sizing: border-box;
}
#header .search dd button {
  display: inline-block;
  background: #000;
  color: #fff;
  text-align: center;
  border: none;
  width: 70px;
  height: 24px;
  line-height: 24px;
  cursor: pointer;
  letter-spacing: 0.5px;
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
}
#header .search.open dd {
  display: block;
}
#header nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 80px;
  box-sizing: border-box;
  font-size: 1.8rem;
}
#header nav.open {
  display: block;
  opacity: 1;
}
#header nav ul {
  background: url("../common/images/bg_line_b.png") left top repeat-x;
  overflow: hidden;
  padding-top: 1px;
}
#header nav ul li {
  float: left;
  width: 50%;
  background: url("../common/images/bg_line_b.png") left bottom repeat-x;
  box-sizing: border-box;
  padding-bottom: 1px;
}
#header nav ul li:nth-child(odd) {
  background: url("../common/images/bg_line_b_tate.png") right top repeat-y, url("../common/images/bg_line_b.png") left bottom repeat-x;
  padding-right: 1px;
}
#header nav ul li img {
  vertical-align: middle;
  margin: 0 5px 3px 0;
}
#header nav ul li a {
  display: block;
  padding: 10px 0 10px 5px;
  font-size: 1.4rem;
}
#header nav ul li a:hover {
  background-color: #f6f6f6;
  text-decoration: none;
}

@media all and (max-width: 736px) {
  #header {
    height: 180px;
    font-size: 1.2rem;
  }
  #header h1 {
    padding-top: 80px;
    margin-top: 0;
  }
  #header h1 img {
    width: 240px;
    height: auto;
  }
  #header .movie_caution{
    display: none;
  }
  #header .lang {
    right: 10px;
    top: 50px;
  }
  #header .ruby {
    right: 47px;
  }
  #header .tutorial {
    right: 10px;
  }
  #header .search {
    top: 20px;
    right: 18px;
  }
}
/*------------------------------------------------------------
footer
 ------------------------------------------------------------*/
#footer {
  background: #fff;
  text-align: center;
}
#footer ul {
  font-size: 0;
  padding: 30px 0;
  border-bottom: 1px solid #f6f6f6;
}
#footer ul li {
  font-size: 1.4rem;
  display: inline-block;
  line-height: 1;
  margin: 0 20px;
}
#footer p {
  font-size: 1.2rem;
  padding: 30px 0;
}
#footer p small {
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
}

@media all and (max-width: 736px) {
  #footer ul {
    padding: 15px 0;
  }
  #footer ul li {
    font-size: 1.0rem;
    margin: 0 5px;
  }
  #footer p {
    font-size: 1.0rem;
    padding: 15px 0;
  }
}
/*------------------------------------------------------------
パンくず
------------------------------------------------------------*/
#pankuzu.hoshi {
  background: rgba(48, 135, 176, 0.75);
}
#pankuzu.hoshi p {
  background: url("../common/images/pan_icon_hoshi.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.outdoor {
  background: rgba(55, 85, 10, 0.75);
}
#pankuzu.outdoor p {
  background: url("../common/images/pan_icon_outdoor.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.budo {
  background: rgba(249, 146, 35, 0.75);
}
#pankuzu.budo p {
  background: url("../common/images/pan_icon_budo.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.cafe {
  background: rgba(171, 185, 39, 0.75);
}
#pankuzu.cafe p {
  background: url("../common/images/pan_icon_cafe.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.sweets {
  background: rgba(239, 117, 139, 0.75);
}
#pankuzu.sweets p {
  background: url("../common/images/pan_icon_sweets.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.market {
  background: rgba(237, 62, 44, 0.75);
}
#pankuzu.market p {
  background: url("../common/images/pan_icon_market.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.shodo {
  background: rgba(70, 2, 56, 0.8);
}
#pankuzu.shodo p {
  background: url("../common/images/pan_icon_shodo.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.anime {
  background: rgba(5, 142, 178, 0.65);
}
#pankuzu.anime p {
  background: url("../common/images/pan_icon_anime.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.book {
  background: rgba(158, 81, 7, 0.75);
}
#pankuzu.book p {
  background: url("../common/images/pan_icon_book.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.tera-jinja {
  background: rgba(185, 0, 0, 0.8);
}
#pankuzu.tera-jinja p {
  background: url("../common/images/pan_icon_tera-jinja.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.music {
  background: rgba(253, 233, 8, 0.75);
}
#pankuzu.music p {
  background: url("../common/images/pan_icon_music.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.suizokukan {
  background: rgba(0, 50, 151, 0.75);
}
#pankuzu.suizokukan p {
  background: url("../common/images/pan_icon_suizokukan.png") left center no-repeat;
  background-size: 50px auto;
}
#pankuzu.other {
  background: rgba(153, 153, 153, 0.5);
}
#pankuzu.other p {
  /*background: url("../common/images/pan_icon_suizokukan.png") left center no-repeat;
  background-size: 50px auto;*/
  padding-left: 0;
}
#pankuzu p {
  color: #fff;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  padding: 20px 0 20px 60px;
}
#pankuzu p a {
  color: #fff;
  position: relative;
  margin-right: 5px;
}
#pankuzu p a:after {
  display: inline-block;
  content: '';
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #fff;
  margin-left: 10px;
}

/*------------------------------------------------------------
下層用タイトルヘッダー
------------------------------------------------------------*/
#page_head {
  background: #f6f5f5;
  padding: 100px 0;
  margin-bottom: 100px;
  text-align: center;
  position: relative;
}
#page_head.topics {
  padding: 90px 0;
}
#page_head.shoku {
  background: url("../shoku/images/bg_shoku.jpg") center top no-repeat;
  background-size: cover;
}
#page_head.hanashi {
  background: url("../hanashi/images/bg_hanashi.jpg") center top no-repeat;
  background-size: cover;
}
#page_head.kanji {
  background: url("../kanji/images/bg_kanji.jpg") center top no-repeat;
  background-size: cover;
}
#page_head dl {
  width: 100%;
  height: 100%;
}
#page_head dl:before {
  content: '';
  position: absolute;
  background: url("../common/images/bg_kanji_sub.png") center center no-repeat;
  background-size: 140px;
  width: 140px;
  height: 140px;
  left: 50%;
  top: 50%;
  margin-top: -70px;
  margin-left: -70px;
  z-index: 20;
}
#page_head dl dt {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  margin: -55px 0 0 -35px;
}
#page_head dl dd {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  width: 180px;
  margin: 10px 0 0 -90px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
}
#page_head dl dd small {
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.0rem;
  font-weight: normal;
  font-style: italic;
}
#page_head figure {
  margin-bottom: 15px;
}
#page_head h1 {
  font-size: 4.2rem;
  line-height: 0.8;
  letter-spacing: 0.4rem;
}
#page_head h1 small {
  font-size: 1.8rem;
  font-weight: normal;
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
}

@media all and (max-width: 736px) {
  #page_head {
    margin-bottom: 25px;
  }
  #page_head.topics {
    padding: 30px 0;
  }
  #page_head h1 {
    font-size: 2.6rem;
    letter-spacing: 0;
  }
  #page_head h1 small {
    font-size: 1.6rem;
  }
}
/*------------------------------------------------------------
下層用カテゴリー一覧
------------------------------------------------------------*/
#cat_list {
  background: #f6f5f5;
  padding: 70px 0;
}
#cat_list h2 {
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
  letter-spacing: 0.3rem;
  text-align: center;
  font-size: 3.2rem;
  position: relative;
  margin-bottom: 55px;
}
#cat_list h2:before {
  content: '';
  position: absolute;
  background: #000000;
  width: 20px;
  height: 3px;
  top: 50px;
  left: 50%;
  margin-left: -10px;
}
@media all and (max-width: 736px) {
  #cat_list h2 {
    margin-bottom: 20px;
    letter-spacing: 0.3rem;
    font-size: 1.8rem;
  }
  #cat_list h2:before {
    width: 10px;
    height: 2px;
    top: 30px;
    margin-left: -5px;
  }
}
#cat_list ul {
  max-width: 980px;
  overflow: hidden;
  font-size: 0;
  text-align: center;
}
#cat_list ul li {
  font-size: 1.4rem;
  display: inline-block;
  width: 145px;
  height: 145px;
  margin: 0 9px 18px;
  text-align: center;
  border-radius: 20px;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
#cat_list ul li a {
  color: #fff;
}
#cat_list ul li dl {
  width: 100%;
  height: 100%;
}
#cat_list ul li dl:before {
  content: '';
  position: absolute;
  width: 126px;
  height: 126px;
  left: 50%;
  top: 50%;
  margin-top: -63px;
  margin-left: -63px;
  z-index: 20;
}
#cat_list ul li dl:after {
  content: '';
  position: absolute;
  width: 126px;
  height: 126px;
  left: 50%;
  top: 50%;
  margin-top: -63px;
  margin-left: -63px;
  z-index: 10;
}
#cat_list ul li dl dt {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  margin: -55px 0 0 -30px;
}
#cat_list ul li dl dd {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  width: 140px;
  margin: 10px 0 0 -70px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
}
#cat_list ul li dl dd small {
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
  font-family: "Times New Roman", Times, serif;
  font-size: 1.0rem;
  font-weight: normal;
  font-style: italic;
}
#cat_list ul li.hoshi dl {
  background: url("../common/images/bg_photo_hoshi.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.hoshi dl:before {
  background: url("../common/images/bg_kanji_hoshi.png");
  background-size: 126px auto;
}
#cat_list ul li.outdoor dl {
  background: url("../common/images/bg_photo_outdoor.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.outdoor dl:before {
  background: url("../common/images/bg_kanji_outdoor.png");
  background-size: 126px auto;
}
#cat_list ul li.outdoor dl:after {
  background: url("../common/images/bg_kanji_outdoor02.png");
  background-size: 126px auto;
}
#cat_list ul li.budo dl {
  background: url("../common/images/bg_photo_budo.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.budo dl:before {
  background: url("../common/images/bg_kanji_budo.png");
  background-size: 126px auto;
}
#cat_list ul li.budo dl:after {
  background: url("../common/images/bg_kanji_budo02.png");
  background-size: 126px auto;
}
#cat_list ul li.cafe dl {
  background: url("../common/images/bg_photo_cafe.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.cafe dl:before {
  background: url("../common/images/bg_kanji_cafe.png");
  background-size: 126px auto;
}
#cat_list ul li.cafe dl:after {
  background: url("../common/images/bg_kanji_cafe.png");
  background-size: 126px auto;
}
#cat_list ul li.sweets dl {
  background: url("../common/images/bg_photo_sweets.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.sweets dl:before {
  background: url("../common/images/bg_kanji_sweets.png");
  background-size: 126px auto;
}
#cat_list ul li.sweets dl:after {
  background: url("../common/images/bg_kanji_sweets02.png");
  background-size: 126px auto;
}
#cat_list ul li.market dl {
  background: url("../common/images/bg_photo_market.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.market dl:before {
  background: url("../common/images/bg_kanji_market.png");
  background-size: 126px auto;
}
#cat_list ul li.market dl:after {
  background: url("../common/images/bg_kanji_market02.png");
  background-size: 126px auto;
}
#cat_list ul li.market dl dd a {
  font-size: 1.6rem;
}
#cat_list ul li.shodo dl {
  background: url("../common/images/bg_photo_shodo.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.shodo dl:before {
  background: url("../common/images/bg_kanji_shodo.png");
  background-size: 126px auto;
}
#cat_list ul li.shodo dl:after {
  background: url("../common/images/bg_kanji_shodo02.png");
  background-size: 126px auto;
}
#cat_list ul li.anime dl {
  background: url("../common/images/bg_photo_anime.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.anime dl:before {
  background: url("../common/images/bg_kanji_anime.png");
  background-size: 126px auto;
}
#cat_list ul li.anime dl:after {
  background: url("../common/images/bg_kanji_anime02.png");
  background-size: 126px auto;
}
#cat_list ul li.anime dl dd a {
  font-size: 1.6rem;
}
#cat_list ul li.book dl {
  background: url("../common/images/bg_photo_book.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.book dl:before {
  background: url("../common/images/bg_kanji_book.png");
  background-size: 126px auto;
}
#cat_list ul li.book dl:after {
  background: url("../common/images/bg_kanji_book02.png");
  background-size: 126px auto;
}
#cat_list ul li.tera-jinja dl {
  background: url("../common/images/bg_photo_tera-jinja.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.tera-jinja dl:before {
  background: url("../common/images/bg_kanji_tera-jinja.png");
  background-size: 126px auto;
}
#cat_list ul li.tera-jinja dl:after {
  background: url("../common/images/bg_kanji_tera-jinja02.png");
  background-size: 126px auto;
}
#cat_list ul li.music dl {
  background: url("../common/images/bg_photo_music.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.music dl:before {
  background: url("../common/images/bg_kanji_music.png");
  background-size: 126px auto;
}
#cat_list ul li.suizokukan dl {
  background: url("../common/images/bg_photo_suizokukan.jpg") center no-repeat;
  background-size: cover;
}
#cat_list ul li.suizokukan dl:before {
  background: url("../common/images/bg_kanji_suizokukan.png");
  background-size: 126px auto;
}
#cat_list ul li.suizokukan dl:after {
  background: url("../common/images/bg_kanji_suizokukan02.png");
  background-size: 126px auto;
}

@media all and (max-width: 736px) {
  #cat_list {
    padding: 35px 0;
  }
  #cat_list ul {
    width: auto;
  }
  #cat_list ul li {
    width: 48.5%;
    margin: 0 0 9px;
    float: left;
  }
  #cat_list ul li:nth-child(even) {
    float: right;
  }
}
/*------------------------------------------------------------
記事一覧
------------------------------------------------------------*/
#topics_list {
  max-width: 1440px;
  min-width: 768px;
  margin: 0 auto 100px;
  overflow: hidden;
}
#topics_list h2 {
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
  letter-spacing: 0.3rem;
  text-align: center;
  font-size: 3.2rem;
  position: relative;
  margin-bottom: 55px;
}
#topics_list h2:before {
  content: '';
  position: absolute;
  background: #000000;
  width: 20px;
  height: 3px;
  top: 50px;
  left: 50%;
  margin-left: -10px;
}
@media all and (max-width: 736px) {
  #topics_list h2 {
    margin-bottom: 20px;
    letter-spacing: 0.3rem;
    font-size: 1.8rem;
  }
  #topics_list h2:before {
    width: 10px;
    height: 2px;
    top: 30px;
    margin-left: -5px;
  }
}
#topics_list figure {
  float: left;
  max-width: 300px;
  width: 31.25%;
  margin-bottom: 3.125%;
  border-radius: 30px;
  background: #edebeb;
  overflow: hidden;
  position: relative;
}
#topics_list figure:nth-of-type(3n+2) {
  margin: 0 3.125%;
}
#topics_list figure:nth-last-of-type(-n+3) {
  margin-bottom: 50px;
}
#topics_list figure:after {
  display: block;
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
}
#topics_list figure img {
  width: 100%;
  height: auto;
}
#topics_list figure figcaption {
  padding: 10px 20px 15px;
  font-size: 2.0rem;
  font-weight: bold;
}
#topics_list > p {
  clear: both;
  text-align: center;
}
#topics_list > p a {
  display: inline-block;
  width: 300px;
  background: #000 url("../common/images/bt_arrow_l.png") right center no-repeat;
  color: #fff;
  font-size: 1.6rem;
  line-height: 60px;
  border-radius: 30px;
  font-family: 'Cabin', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
}

@media all and (max-width: 736px) {
  #topics_list {
    width: auto;
    min-width: 0;
    margin: 0 1% 50px;
  }
  #topics_list figure {
    max-width: none;
    width: 48.5%;
  }
  #topics_list figure:nth-of-type(2n) {
    float: right;
  }
  #topics_list figure:nth-of-type(3n+2) {
    margin: 0 0 3.125%;
  }
  #topics_list figure:nth-last-of-type(-n+3) {
    margin-bottom: 3.125%;
  }
  #topics_list figure:after {
    top: 10px;
    right: 10px;
  }
  #topics_list figure figcaption {
    padding: 5px 10px 10px;
    font-size: 1.4rem;
  }
}
/*#topics_list{
	overflow: hidden;
	margin-bottom: 100px;
	h2{
		@include title01();
	}
	dl{
		float: left;
		max-width: 300px;
		width: 31.25%;
		@include kadomaru(30);
		background: #edebeb;
		overflow: hidden;
		margin-bottom: 3.125%;
		&:nth-of-type(3n+2){
			margin: 0 3.125% 3.125%;//(100 - (31.25 * 3)) / 2%;
		}
		&:nth-last-of-type(-n+3){
			margin-bottom: 50px;
		}
		dt{
			img{
				width: 100%;
				height: auto;
			}
		}
		dd{
			font-size: 2.0rem;
			font-weight: bold;
			padding: 15px 20px;
		}
	}
	>p{
		clear: both;
		text-align: center;
		a{
			@include bt_l();
		}
	}
}
@media all and (max-width: $break_sp) {
	#topics_list {
		margin-bottom: 50px;
		dl{
			max-width: none;
			width: 48.5%;
			&:nth-of-type(2n){
				float: right;
			}
			&:nth-of-type(3n+2){
				margin: 0 0 3.125%;
			}
			&:nth-last-of-type(-n+3){
				margin-bottom: 3.125%;
			}
			dd{
				padding: 10px;
				h3{
					font-size: 1.6rem;
				}
			}
		}
	}
}*/
/*------------------------------------------------------------
ケース一覧
------------------------------------------------------------*/
#case_list {
  overflow: hidden;
  margin-bottom: 100px;
}
#case_list p:not(.pagination):nth-of-type(1) {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.8rem;
  font-weight: bold;
}
#case_list figure {
  float: left;
  max-width: 300px;
  width: 31.25%;
  border-radius: 30px;
  background: #edebeb;
  overflow: hidden;
  margin-bottom: 3.125%;
  text-align: center;
  position: relative;
}
#case_list figure:nth-of-type(3n+2) {
  margin: 0 3.125%;
}
#case_list figure:nth-last-of-type(-n+3) {
  margin-bottom: 50px;
}
#case_list figure img {
  width: 100%;
  height: auto;
}
#case_list figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 15px 0;
}

@media all and (max-width: 736px) {
  #case_list {
    margin-bottom: 50px;
  }
  #case_list p:not(.pagination):nth-of-type(1) {
    margin-bottom: 25px;
    font-size: 1.6rem;
  }
  #case_list figure {
    max-width: none;
    width: 48.5%;
  }
  #case_list figure:nth-of-type(even) {
    float: right;
  }
  #case_list figure:nth-of-type(3n+2) {
    margin: 0 0 3.125%;
  }
  #case_list figure:nth-last-of-type(-n+3) {
    margin-bottom: 3.125%;
  }
  #case_list figure figcaption {
    font-size: 1.6rem;
    padding: 10px;
  }
}
/*------------------------------------------------------------
ページネーション
------------------------------------------------------------*/
.pagination {
  clear: both;
  text-align: center;
  line-height: 40px;
  font-size: 0;
}
.pagination .current, .pagination a:hover {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #cdcdcd;
  font-size: 2.0rem;
  background: #fff;
  color: #333;
  margin: 0 5px;
  border-radius: 21px;
}
.pagination a {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  font-size: 2.0rem;
  background: #000;
  color: #fff;
  margin: 0 5px;
  border-radius: 21px;
}

@media all and (max-width: 736px) {
  .pagination {
    line-height: 30px;
  }
  .pagination .current, .pagination a:hover {
    width: 30px;
    height: 30px;
    font-size: 1.6rem;
  }
  .pagination a {
    width: 30px;
    height: 30px;
    font-size: 1.6rem;
  }
}
/*------------------------------------------------------------
前へ次へボタン
------------------------------------------------------------*/
.change_page {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin-bottom: 60px;
}
.change_page > li a {
  display: block;
  box-sizing: border-box;
  height: 60px;
  border-radius: 30px;
  border: 2px solid #333;
  font-weight: bold;
}
.change_page > li a:hover {
  color: #fff;
  background: #333;
  text-decoration: none;
}
.change_page > li#prev_page {
  float: left;
  width: 130px;
  /*
  //矢印
  position: relative;
  &:before{
  	display: block;
  	content: '';
  	width: 0;
  	height: 0;
  	position: absolute;
  	top: 50%;
  	left: 5%;
  	border: 5px solid transparent;
  	border-right-color: $color_font;
  	margin-top: -4px;
  }
  &:hover:before{
  	border-right-color: #fff;
  }
  */
}
.change_page > li#prev_page a {
  font-size: 2.8rem;
  line-height: 56px;
}
.change_page > li#next_page {
  float: right;
  width: 130px;
  /*
  //矢印
  position: relative;
  &:before{
  	display: block;
  	content: '';
  	width: 0;
  	height: 0;
  	position: absolute;
  	top: 50%;
  	left: 88%;
  	border: 5px solid transparent;
  	border-left-color: $color_font;
  	margin-top: -4px;
  }
  &:hover:before{
  	border-left-color: #fff;
  }
  */
}
.change_page > li#next_page a {
  font-size: 2.8rem;
  line-height: 56px;
}
.change_page > li#back_list {
  position: absolute;
  top: 0;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
.change_page > li#back_list a {
  color: #fff;
  background: #333;
  padding-top: 15px;
}
.change_page > li#back_list a:hover {
  color: #333;
  background: #fff;
}

@media all and (max-width: 736px) {
  .change_page {
    margin-bottom: 30px;
  }
  .change_page > li#prev_page, .change_page > li#next_page {
    width: 30%;
    margin-bottom: 20px;
  }
  .change_page > li#back_list {
    position: static;
    width: auto;
    margin-left: 0;
    clear: both;
  }
}
/*------------------------------------------------------------
ことば
------------------------------------------------------------*/
.glossary > p {
  display: inline-block;
  box-sizing: border-box;
  height: 50px;
  width: 250px;
  border: 1px solid #cdcdcd;
  border-radius: 25px;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  padding-top: 17px;
  margin-bottom: 30px;
  cursor: pointer;
  position: relative;
}
.glossary > p:before {
  display: block;
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 90%;
  border: 5px solid transparent;
  border-left-color: #333;
  margin-top: -4px;
}
.glossary > p:hover {
  background: #333;
  color: #fff;
  border: 1px solid #333;
}
.glossary > p:hover:before {
  border-left-color: #fff;
}
.glossary > p.on {
  background: #333;
  color: #fff;
  border: 1px solid #333;
}
.glossary > p.on:before {
  top: 56%;
  left: 86%;
  border-top-color: #fff;
}
.glossary > p.on:hover:before {
  border-left-color: transparent;
}
.glossary > ul {
  display: none;
  background: #f6f5f5;
  padding: 20px;
  margin-bottom: 30px;
  text-align: left;
}
.glossary > ul li {
  list-style: disc;
  margin-left: 15px;
}
.glossary > ul li em {
  font-style: normal;
  font-weight: normal;
  font-family: Verdana, Roboto, 'Droid Sans', '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}

/*------------------------------------------------------------
その他のページ
------------------------------------------------------------*/
.box_others {
  margin-top: 30px;
  margin-bottom: 100px;
}
.box_others h2 {
  margin-bottom: 10px;
  border-bottom: #666 1px dotted;
  padding-bottom: 10px;
}

/*# sourceMappingURL=base.css.map */