@charset "UTF-8";
/* ==========================================================

title : 刀剣マンガ教室
scope : 刀剣マンガ教室

memo：

modify : 

last modify : 2022/04/28 tanaka 作成

========================================================== */

/* ------------------------------------ */
/* 共通上書き */
/* ------------------------------------ */
.banner_h1 .txth1 {
  background-color: transparent;
  color: #000;
}
.touken-lesson-detail .banner_h1 .txth1 {
  font-size: 30px;
}

@media screen and (max-width: 767px) {
  .banner_h1 .txth1 {
    font-size: 3.6vw;
  }
  .touken-lesson-detail .banner_h1 .txth1 {
    font-size: 3.1vw;
  }
}

.h2_icon_pattern__wrapper>.h2_icon_pattern.detail_content:nth-of-type(4n+1) .cmn_h2_01 {
  background-image: none;
}
.detail_content .cmn_h2_01 {
  background-color: #FFF;
  border: 1px solid #4d3e23;
  font-size: 26px;
}
.h2_icon_pattern__wrapper>.h2_icon_pattern.detail_content:nth-of-type(4n+1) .cmn_h2_01>span {
  background-color: transparent;
}
.detail_content .cmn_h2_01>span {
  background-image: url(/app/themes/wp-templ/touken-lesson/image/detail/bg-h2.png);
  background-size: 4px;
  color: #000;
  display: block;
  overflow: hidden;
  padding: 1.62% 11% 1.82% 13%;
  margin: 3px;
  width: calc(100% - 6px);
}
.h2_icon_pattern__wrapper>.h2_icon_pattern.detail_content:nth-of-type(4n+1) .cmn_h2_01>span::before {
  background-image: url(/app/themes/wp-templ/touken-lesson/image/detail/bg-flw01-l.png);
}
.detail_content .cmn_h2_01>span::before {
  background-size: 50%; /* translateY(-50%)で画像がボケるため */
  background-position: center left;
  height: 206px;
  left: 0;
  width: 204px;
}
.h2_icon_pattern__wrapper>.h2_icon_pattern.detail_content:nth-of-type(4n+1) .cmn_h2_01>span::after {
  background-image: url(/app/themes/wp-templ/touken-lesson/image/detail/bg-flw01-r.png);
}
.detail_content .cmn_h2_01>span::after {
  background-position: center right;
  height: 58px;
  right: 0;
  width: 84px;
}
.detail_content .cmn_h2_01>span>span {
  display: flex;
    justify-content: center;
    align-items: center;
}
.detail_content .title_no {
  width: 100px;
  white-space: nowrap;
}
.detail_content .title_txt {
  text-align: left;
}
@media (max-width: 767px) {
  .detail_content .cmn_h2_01 {
    font-size: 19px;
  }
  .detail_content .cmn_h2_01>span {
    padding: 1.62% 17% 1.82% 20%;
  }
  .detail_content .cmn_h2_01>span>span {
    flex-wrap: wrap;
  }
  .detail_content .title_no,
  .detail_content .title_txt {
    display: block;
    width: 100%;
    text-align: center;
  }
  .detail_content .title_no {
    font-size: 15px;
    margin-bottom: 5px;
  }
}
@media (max-width: 480px) {
  .detail_content .cmn_h2_01>span::before {
    width: 44%;
  }
  .detail_content .cmn_h2_01>span::after {
    width: 20%;
  }
}

/* バナーエリア */
.wcm.h2_icon_pattern__wrapper > .cmn_bnr_area.col02 {
  margin-top: 80px;
}

@media (max-width: 767px) {
  .wcm.h2_icon_pattern__wrapper > .cmn_bnr_area.col02 {
    margin-top: 60px;
  }
}

@media (min-width: 768px) {
  .characters .cmn_bnr_cap {
    font-size: 1.4rem;
    line-height: 1.29;
  }
}

/* ------------------------------------ */
/* ▼ .cmn_intro_read */
/* ------------------------------------ */
.read_text {
  letter-spacing: .095em;
  text-align: justify;
}

/* ------------------------------------ */
/* ▼ .box_seo */
/* ------------------------------------ */
@media (min-width: 768px) {
  .box_seo {
    margin-top: 70px;
  }
}

/* ------------------------------------ */
/* ▼ contents_list */
/* ------------------------------------ */
.contents_list {
  max-width: 880px;
  margin: 55px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contents_list_item {
  background: url(/app/themes/wp-templ/touken-lesson/image/bg-contents-list-item.jpg);
  border: 1px solid #8e613a;
  width: calc(50% - 40px);
  margin: 0 20px 0;
}
.contents_list_item + .contents_list_item  {
  margin-top: 37px
}

@media (min-width: 768px) {
  .contents_list_item:nth-of-type(-n+2) {
    margin-top: 0;
  }
  .contents_list_item:nth-of-type(2n-1):last-of-type {
    position: relative;
  }
  .contents_list_item:nth-of-type(2n-1):last-of-type::after {
    background: url(/app/themes/wp-templ/image-cmn/spacer/img-cmn-spacer-02.png) no-repeat center center;
    content: "";
    display: block;
    opacity: 0.7;
    position: absolute;
    left: calc(100% + 40px);
    top: 0;
    height: 100%;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .contents_list {
    margin-top: 40px;
  }
  .contents_list_item {
    width: calc(100% - 60px);
    margin: 0 30px 0;
  }
}

.contents_list_item_title {
  background-color: rgba(0,118,201,0.36);
  display: flex;
    align-items: center;
    justify-content: center;
  font-size: 1.12em;
  line-height: 1.35;
  padding: 11px 15px;
}
@media (min-width: 768px) {
  .contents_list_item:nth-of-type(4n+2) .contents_list_item_title,
  .contents_list_item:nth-of-type(4n+3) .contents_list_item_title {
    background-color: rgba(219,99,59,0.36);
  }  
}
@media (max-width: 767px) {
  .contents_list_item:nth-of-type(2n) .contents_list_item_title {
    background-color: rgba(219,99,59,0.36);
  }
}
.contents_list_item.coming_soon .contents_list_item_title {
  background-color: rgba(219,192,164,0.36);
}
.contents_list_item_title>span {
  display: flex;
    justify-content: center;
    align-items: center;
}
.contents_list_item_title .title_no {
  margin-right: 1em;
  white-space: nowrap;
}
.contents_list_item_img {
  margin: 15px 14px 14px;
}
.contents_list_item_img img {
  vertical-align: bottom;
}
.coming_soon .contents_list_item_img {
  padding-top: 62.815%;
  background-image: url(/app/themes/wp-templ/touken-lesson/image/img-coming-soon01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
}
.coming_soon:nth-of-type(2n-1) .contents_list_item_img {
  background-image: url(/app/themes/wp-templ/touken-lesson/image/img-coming-soon02.jpg);
}

@media (max-width: 767px) {
  .contents_list_item_title>span {
    flex-wrap: wrap;
  }
  .contents_list_item_title .title_no,
  .contents_list_item_title .title_txt {
    display: block;
    width: 100%;
    text-align: center;
  }
  .contents_list_item_title .title_no {
    font-size: 15px;
    margin-bottom: 5px;
    margin-right: 0;
  }
}

.contents_list_item .cmn_link_btn {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 42.714%;
  font-size: 0.78em;
}
@media (min-width: 768px) {
  .contents_list_item .cmn_link_btn .cmn_link_btn_text {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ------------------------------------ */
/* ▼ detail_content */
/* ------------------------------------ */
.detail_content {
  max-width: 830px;
  margin: 50px auto 0;
}
.cmn_section_desc {
  margin-top: 25px;
}
.detail_img {
  text-align: center;
  max-width: 466px;
  margin: 25px auto 0px;
  line-height: 0;
}
.detail_img img + img {
  margin-top: 18px;
}
/* 登場キャラクター */
.characters {
  max-width: 824px;
  margin: 67px auto 0;
}
/* ページ移動 */
.detail_link_area {
  max-width: 650px;
  margin: 0 auto 120px;
}
.detail_page {
  margin: 0 auto 20px;
}
.detail_page .cmn_link_btn {
  float: right;
  width: 220px;
}
.detail_page .cmn_link_btn.btn_pre {
  float: left;
}
.detail_page .cmn_link_btn_text {
  padding: 9px 30px 9px 0;
}
.detail_page .cmn_link_btn_text::before {
  height: 18px;
  width: 18px;
  right: 0;
}
.detail_page .cmn_link_btn_text::after {
  border-width: 5px 0 5px 8.5px;
  right: 4px;
}
.detail_page .cmn_link_btn.btn_pre .cmn_link_btn_text {
  padding: 9px 0 9px 30px;
}
.detail_page .cmn_link_btn.btn_pre  .cmn_link_btn_text::before {
  right: auto;
  left: 0;
}
.detail_page .cmn_link_btn.btn_pre .cmn_link_btn_text::after {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  right: auto;
  left: 4px;
}

@media (max-width: 767px) {
  .detail_content {
    margin: 25px 15px 40px;
  }

  .characters {
    margin: 30px auto 0;
  }

  .detail_link_area {
    margin: 0 auto 0;
  }
  .detail_page {
    margin: 0 auto 30px;
    max-width: 490px;
  }
  .detail_page .cmn_link_btn {
    max-width: 150px;
    width: 42.23%;
  }
}