@charset "UTF-8";

/*add DM*/
body {
	font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

h1 {
	clear: both;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

.spObj_{
		 display: none;
	 }
.btn_back{
	margin: auto;
	max-width: 500px;
    width: 100%;
}
 @media screen and (max-width: 767px) {
	 .btn_back{
	    width: 90%;
         }
	 .spObj_{
		 display: block;
	 }
}
.btn_back a {
    background-color: #ffffff;
    display: inline-block;
    padding: 10px 7px;
    margin: 50px auto;
    text-align: center;
    color: #b71254;
	border: 1px solid #b71254;
    text-decoration: none;
    font-size: 120%;
    max-width: 500px;
    width: 100%;
    position: relative; }
    @media screen and (max-width: 767px) {
    .btn_back a {
        padding: 0.7rem 0.5rem;
        margin: 1rem auto 1.5rem;
        font-size: 4.2666666667vw;
        width: 100%; 
		line-height:1.2;} }
    .btn_back a:before {
      content: '';
      width: 12px;
      height: 12px;
      border: 0px;
      border-top: solid 1px #b71254;
      border-right: solid 1px #b71254;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      position: absolute;
      top: 52%;
      right: 20px;
      margin-top: -8px; }

/*add DM*/
.howtoTtl + p {
  margin-top: -10px;
}

.howtoTtl {
  font-size: 20px;
  padding-bottom: 4px;
  font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif !important;
}

.faqHowtoTtl {
  padding-top: 0;
}

.btnContact {
  position: relative;
}

.btnContact {
  background-image: none;
}

.btnContact a:hover {
  background-image: none;
}

.bottomBtn.btnContact a:after {
  content: "";
  background: none;
  background-image: url(/images/common/icon_out_link.png);
  background-repeat: no-repeat;
  position: absolute;
  bottom: 3px;
  right: 5px;
  width: 7px;
  height: 6px;
  background-size: 7px auto;
}

.bottomBtn.btnContact a:hover:after {
  background-image: url(/images/common/icon_out_link_on.png);
}

.howtoAttention {
  color: #b71254;
}

@media screen and (max-width: 766px) {
  .howtoTtl {
    font-size: 17px;
  }
}

/* ----------------------------------------
  基本設定
---------------------------------------- */
.howto {
  margin-top: 16px;
}

.howto img {
  max-width: 100%;
  height: auto;
}

@media all and (min-width: 767px), print {
  .howto {
    margin-top: -15px;
  }
}

@media all and (min-width: 960px) {
  .howto {
    margin-top: -43px;
  }
}

.howto-detail {
  margin-top: 16px;
}
@media all and (max-width: 766px){
.howto-detail {
  margin-top: 30px;
}	
}

.howto-detail img {
  max-width: 100%;
  height: auto;
}

/*@media all and (min-width: 767px), print {
  .howto-detail {
    margin-top: -15px;
  }
}*/

@media all and (min-width: 960px) {
  .howto-detail {
    margin-top: 20px;
  }
}

/* ----------------------------------------
  パンくずリスト add DM
---------------------------------------- */
.navitopicpath_{
	text-align: left;
	max-width: 940px;
	margin: 5px auto 25px;
}
@media all and (max-width: 767px) {
  .navitopicpath_{
    margin-top: 15px;
  }
}

/* ----------------------------------------
  見出し
---------------------------------------- */
.howto-hdg {
  margin: 0 15px 25px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  font-size: 22px;
  line-height: 1;
}

@media all and (min-width: 767px), print {
  .howto-hdg {
    margin: 0 auto 28px;
    padding-right: 20px;
    padding-left: 20px;
    max-width: 1000px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 30px;
  }
}

.howto-detail-hdg {
  margin: 0 15px 17px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  font-size: 18px;
  line-height: 1.33333;
}

@media all and (min-width: 767px), print {
  .howto-detail-hdg {
    margin: 0 auto 37px;
    padding-right: 20px;
    padding-left: 20px;
    max-width: 940px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 24px;
  }
}

/* ----------------------------------------
  動画
---------------------------------------- */
.howto-video {
  padding: 15px;
  background-color: #f4f4f4;
}

@media all and (min-width: 767px), print {
  .howto-video {
    padding: 30px 20px;
  }
}

@media all and (min-width: 767px), print {
  .howto-video__inner {
    margin-right: auto;
    margin-left: auto;
    max-width: 960px;
  }
  .howto-video__inner::before, .howto-video__inner::after {
    display: table;
    content: ' ';
  }
  .howto-video__inner::after {
    clear: both;
  }
}

@media all and (min-width: 767px), print {
  .howto-video__item,
  .howto-video__banner {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    float: left;
  }
}

.howto-video__item:not(:last-child) {
  margin-bottom: 20px;
}

@media all and (min-width: 767px), print {
  .howto-video__item {
    width: 62.5%;
  }
  .howto-video__item:not(:last-child) {
    margin-bottom: 0;
  }
}

.howto-video__image {
  margin: 0;
}

.howto-video__target {
  display: block;
  position: relative;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.howto-video__target:hover {
  opacity: 0.6;
}

.howto-video__target::after {
  content: '';
  margin-right: auto;
  margin-left: auto;
  width: 15.51724%;
  height: 27.60736%;
  display: block;
  position: absolute;
  top: 29.7546%;
  right: 0;
  left: 0;
  background: url("../images/btn-play.svg") no-repeat 0 0;
  background-size: 100% auto;
}

@media all and (min-width: 767px), print {
  .howto-video__target {
    margin-right: auto;
    margin-left: auto;
    max-width: 600px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .howto-video__target::after {
    width: 10%;
    height: 17.75148%;
    top: 41.12426%;
  }
}

.howto-video__image {
  margin: 0;
}

.howto-video__caption {
  margin-right: auto;
  margin-left: auto;
  padding: 0 20px;
  position: absolute;
  top: 61.34969%;
  right: 0;
  left: 0;
  color: #fff;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  font-size: 12px;
  line-height: 1.66667;
  text-align: center;
}

.howto-video__banner {
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.howto-video__banner:hover {
  opacity: 0.6;
}

.howto-video__banner img {
  width: 100%;
}

.howto-video-detail {
  margin-bottom: 30px;
  padding: 10px 15px 20px;
  background-color: #f4f4f4;
}

.howto-video-detail2 {
  margin-bottom: 30px;
  padding: 10px 15px 20px;
  background-color: #f4f4f4;
}


.howto-video-detail2 ul{
   max-width: 940px;
	margin: 0 auto;
	padding-left: 10px;
	display: flex;
}
.howto-video-detail2 li{
	/*float: left;*/
	padding: 20px 10px 10px;

}


.howto-video-detail2 .howto-video__target {
  display: block;
  position: relative;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.howto-video-detail2 .howto-video__target:hover {
  opacity: 0.6;
}

.howto-video-detail2 .howto-video__target::after {
	content: '';
	margin-right: auto;
	margin-left: auto;
  width: 20%;
  height: 100%;
	/* [disabled]width: 15.51724%; */
	/* [disabled]height: 27.60736%; */
	display: block;
	position: absolute;
	top: 34.7546%;
	right: 0;
	left: 0;
	background: url("../images/btn-play.svg") no-repeat 0 0;
	background-size: 100% auto;
}

@media all and (min-width: 767px), print {
  .howto-video__caption {
    top: 62.13018%;
    font-size: 18px;
    line-height: 1.66667;
  }
}

@media all and (min-width: 767px), print {
  .howto-video__banner {
    padding-left: 4.16667%;
    width: 37.5%;
  }
  .howto-video__banner:only-child {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    float: none;
    width: 100%;
    max-width: 600px;
    display: block;
  }
}

@media all and (min-width: 767px), print {
  .howto-video-detail {
    margin-bottom: 44px;
    padding: 30px 0;
  }
}
@media all and (min-width: 767px), print {
.howto-video-detail2 .howto-video__target {
    margin-right: auto;
    margin-left: auto;
    max-width: 450px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
.howto-video-detail2 .howto-video__target::after {
  width: 15%;
  height: 50%;
	/* [disabled]width: 10%; */
	/* [disabled]height: 17.75148%; */
	top: 36.12426%;
  }
}
@media all and (max-width: 767px) {
.howto-video-detail2 ul{
	display: block;
}
}

/* ----------------------------------------
  コンテンツ
---------------------------------------- */
.howto-detail-content {
  padding-right: 15px;
  padding-left: 15px;
}

.howto-detail-intro {
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
}

@media all and (min-width: 767px), print {
  .howto-detail-content {
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    max-width: 940px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
 .howto-detail-intro {
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
	padding-bottom: 20px;
    max-width: 940px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

/* ----------------------------------------
  リンク
---------------------------------------- */
.howto-detail-link {
  padding-bottom: 50px;
}

@media all and (min-width: 767px), print {
  .howto-detail-link {
    padding-bottom: 70px;
  }
  .howto-detail-link::before, .howto-detail-link::after {
    display: table;
    content: ' ';
  }
  .howto-detail-link::after {
    clear: both;
  }
}

.howto-detail-link__item:not(:last-child) {
  margin-bottom: 10px;
}

@media all and (min-width: 767px), print {
  .howto-detail-link__item {
    margin-left: 1.66667%;
    float: left;
    width: 31.66667%;
  }
  .howto-detail-link__item:nth-child(3n) {
    width: 33.33333%;
  }
  .howto-detail-link__item:nth-child(3n+1) {
    margin-left: 0;
  }
  .howto-detail-link__item:not(:last-child) {
    margin-bottom: 0;
  }
}

/* ----------------------------------------
  リフトアッププログラム
---------------------------------------- */
.howto-detail-liftup-header {
  margin-top: -15px;
  padding: 15px 15px 25px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
}

@media all and (min-width: 767px), print {
  .howto-detail-liftup-header {
    margin-right: auto;
    margin-left: auto;
    padding: 0 20px 40px;
    max-width: 1000px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
  }
}

.howto-detail-liftup-header__lead {
  margin-bottom: 17px;
  font-size: 12px;
  line-height: 1.4;
}

.howto-detail-liftup-header__lead small {
  font-size: 80%;
}

@media all and (min-width: 767px), print {
  .howto-detail-liftup-header__lead {
    margin-bottom: 4px;
    padding-top: 2px;
    font-size: 15px;
  }
}

.howto-detail-liftup-header__hdg-en,
.howto-detail-liftup-header__hdg-ja {
  display: block;
}

.howto-detail-liftup-header__hdg-en {
  font-size: 27px;
  line-height: 1.11111;
}

@media all and (min-width: 767px), print {
  .howto-detail-liftup-header__hdg-en {
    font-size: 30px;
    line-height: 1.5;
  }
}

.howto-detail-liftup-header__hdg-ja {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1;
}

@media all and (min-width: 767px), print {
  .howto-detail-liftup-header__hdg-ja {
    margin-top: 1px;
    font-size: 15px;
  }
}

.howto-detail-steps {
  margin-top: 34px;
}

@media all and (min-width: 767px), print {
  .howto-detail-steps {
    margin-top: 48px;
  }
}

.howto-detail-steps__icon {
  margin-bottom: 3px;
  padding: 6px 10px;
  display: inline-block;
  background-color: #b71254;
  color: #fff;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  line-height: 1;
  text-align: center;
}

@media all and (min-width: 767px), print {
  .howto-detail-steps__icon {
    margin-bottom: 18px;
    padding: 7px 15px;
    font-size: 12px;
  }
}

/* ----------------------------------------
  ベーシックな使い方
---------------------------------------- */
.howto-index {
  margin-top: 35px;
}

@media all and (min-width: 767px), print {
  .howto-index {
    margin-top: 48px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    max-width: 1000px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.howto-index-hdg {
  margin-bottom: 22px;
  padding-right: 15px;
  padding-left: 15px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  font-size: 20px;
  line-height: 1.5;
}

@media all and (min-width: 767px), print {
  .howto-index-hdg {
    margin-bottom: 32px;
    padding-right: 0;
    padding-left: 0;
    font-size: 22px;
    line-height: 1.36364;
  }
}

.howto-index-list {
  margin-top: 29px;
  margin-bottom: 55px;
  padding-right: 8px;
  padding-left: 8px;
}

@media all and (min-width: 767px), print {
  .howto-index-list {
    margin-top: 16px;
    margin-bottom: 80px;
    margin-left: -3.0303%;
    padding-right: 0;
    padding-left: 0;
  }
  .howto-index-list::before, .howto-index-list::after {
    display: table;
    content: ' ';
  }
  .howto-index-list::after {
    clear: both;
  }
}

.howto-index-list__item {
  border-bottom: solid 1px #dedede;
  position: relative;
}

.howto-index-list__item::after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  background-color: #b71254;
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.howto-index-list__item:hover::after {
  opacity: 1;
}

.howto-index-list__item[aria-hidden="true"] {
  display: none;
}

.howto-index-list__item[data-item-category-anim="fade-in"] {
  -webkit-animation: showItems 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          animation: showItems 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.howto-index-list__item[data-item-category-anim="hidden"] {
  visibility: hidden;
}

@media all and (min-width: 767px), print {
  .howto-index-list__item {
    margin-left: 3.0303%;
    float: left;
    width: 45.45455%;
  }
  .howto-index-list__item[data-item-category-clear*="2"] {
    clear: left;
  }
}

@media all and (min-width: 1024px) {
  .howto-index-list__item {
    width: 30.30303%;
  }
  .howto-index-list__item[data-item-category-clear*="2"] {
    clear: none;
  }
  .howto-index-list__item[data-item-category-clear*="3"] {
    clear: left;
  }
}

.howto-index-list__target {
  padding-top: 5px;
  padding-bottom: 5px;
  display: block;
  position: relative;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.howto-index-list__target:hover {
  text-decoration: none;
  opacity: 0.6;
}

.howto-index-list__target::after {
  margin-top: -3px;
  position: absolute;
  top: 50%;
  right: 14px;
  content: '';
  width: 5px;
  height: 5px;
  display: block;
  position: absolute;
  border-top: solid 1px #787878;
  border-right: solid 1px #787878;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.howto-index-list__target--black {
  padding-top: 9px;
  padding-bottom: 9px;
}

.howto-index-list__target--black::after {
  border-color: #fff;
}

@media all and (min-width: 767px), print {
  .howto-index-list__target, .howto-index-list__target--black {
    padding-top: 20px;
    padding-bottom: 3px;
  }
  .howto-index-list__target::after {
    margin-top: 7px;
  }
}

.howto-index-list__target-inner {
  padding-left: 12px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table;
}

.howto-index-list__target--black .howto-index-list__target-inner {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #000;
  color: #fff;
}

@media all and (min-width: 767px), print {
  .howto-index-list__target-inner {
    padding-left: 30px;
    min-height: 116px;
  }
  .howto-index-list__target--black .howto-index-list__target-inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.howto-index-list__hdg,
.howto-index-list__image {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: table-cell;
  vertical-align: middle;
}

.howto-index-list__hdg {
  width: 60%;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
}

.howto-index-list__hdg-en,
.howto-index-list__hdg-ja {
  display: block;
}

.howto-index-list__hdg-en {
  font-size: 12px;
  line-height: 1.16667;
}

@media all and (min-width: 767px), print {
  .howto-index-list__hdg-en {
    line-height: 1.33333;
  }
}

.howto-index-list__hdg-ja {
  font-size: 11px;
  line-height: 1.27273;
}

@media all and (min-width: 767px), print {
  .howto-index-list__hdg-ja {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.33333;
  }
}

.howto-index-list__image {
  padding-right: 20px;
  padding-left: 20px;
  width: 1%;
  min-width: 110px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}

.howto-index-list__image > img {
  width: 70px;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

a:hover .howto-index-list__image > img {
  -webkit-transform: scale(1.1, 1.1);
      -ms-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}

@media all and (min-width: 767px), print {
  .howto-index-list__image {
    padding-right: 0;
    padding-left: 0;
    min-width: 116px;
  }
  .howto-index-list__image > img {
    width: 116px;
  }
}

@-webkit-keyframes showItems {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes showItems {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes hideItems {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes hideItems {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ----------------------------------------
  使い方詳細
---------------------------------------- */
/* ----------------------------------------
  バナー
---------------------------------------- */
.howto-banner-list {
  margin-bottom: 70px;
}

.howto-banner-list img {
  width: 100%;
  height: auto;
}

@media all and (min-width: 767px), print {
  .howto-banner-list {
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    max-width: 1000px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .howto-banner-list::before, .howto-banner-list::after {
    display: table;
    content: ' ';
  }
  .howto-banner-list::after {
    clear: both;
  }
}

.howto-banner-list__item:not(last-child) {
  margin-bottom: 15px;
}

@media all and (min-width: 767px), print {
  .howto-banner-list__item {
    float: left;
    width: 47.91667%;
  }
  .howto-banner-list__item:not(last-child) {
    margin-bottom: 0;
  }
  .howto-banner-list__item:nth-child(even) {
    margin-left: 4.16667%;
  }
}

.howto-banner-list__target {
  display: block;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.howto-banner-list__target:hover {
  opacity: 0.6;
}


/* ----------------------------------------
  合わせて読みたい
---------------------------------------- */
.item-detail-journal {
  overflow: hidden;
  background-color: #f4f4f4;
}

.item-detail-journal__inner {
  padding: 30px 0;
}

@media all and (min-width: 767px), print {
  .item-detail-journal__inner {
    margin-right: auto;
    margin-left: auto;
    padding: 38px 20px 40px;
    max-width: 1000px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

.item-detail-journal-hdg {
  margin-bottom: 23px;
  padding-right: 22px;
  padding-left: 22px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  font-size: 20px;
  line-height: 1;
}

@media all and (min-width: 767px), print {
  .item-detail-journal-hdg {
    margin-bottom: 40px;
    padding-right: 0;
    padding-left: 0;
    font-size: 22px;
  }
}

@media all and (min-width: 767px), print {
  .item-detail-journal-list::before, .item-detail-journal-list::after {
    display: table;
    content: ' ';
  }
  .item-detail-journal-list::after {
    clear: both;
  }
}

.item-detail-journal-list__item {
  margin-right: 30px;
  margin-right: 9.375vw;
  margin-left: 30px;
  margin-left: 9.375vw;
  width: 260px;
  width: 81.25vw;
}

@media all and (min-width: 767px), print {
  .item-detail-journal-list__item {
    margin-right: 0;
    margin-left: 0;
    float: left;
    width: 31.91489%;
  }
  .item-detail-journal-list__item:not(:first-child) {
    margin-left: 2.12766%;
  }
}

.item-detail-journal-list__target {
  display: block;
  background-color: #fff;
}

.item-detail-journal-list__target:hover {
  text-decoration: none;
}

.item-detail-journal-list__image {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.item-detail-journal-list__image::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(34, 34, 34, 0.6);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.item-detail-journal-list__image img {
  width: 100%;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95), -webkit-transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

a:hover .item-detail-journal-list__image img {
  -webkit-transform: scale(1.05, 1.05);
      -ms-transform: scale(1.05, 1.05);
          transform: scale(1.05, 1.05);
}

a:hover .item-detail-journal-list__image::after {
  opacity: 1;
  pointer-events: auto;
}

.item-detail-journal-list__image-more {
  padding-bottom: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: opacity 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.item-detail-journal-list__image-more::after {
  content: '';
  margin-right: auto;
  margin-left: auto;
  width: 42px;
  height: 1px;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

a:hover .item-detail-journal-list__image-more {
  opacity: 1;
  pointer-events: auto;
}

.item-detail-journal-list__data {
  padding: 16px 15px 10px;
}

@media all and (min-width: 767px), print {
  .item-detail-journal-list__data {
    padding: 20px 20px 14px;
  }
}

.item-detail-journal-list__corner {
  margin-bottom: 7px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  line-height: 1.26667;
}

@media all and (min-width: 767px), print {
  .item-detail-journal-list__corner {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.375;
  }
}

.item-detail-journal-list__series,
.item-detail-journal-list__desc {
  font-size: 12px;
  line-height: 1.58333;
}

@media all and (min-width: 767px), print {
  .item-detail-journal-list__series,
  .item-detail-journal-list__desc {
    font-size: 14px;
    line-height: 1.57143;
  }
}

.item-detail-journal-list__tag {
  margin-top: 8px;
  margin-bottom: -10px;
  margin-left: -10px;
}

.item-detail-journal-list__tag::before, .item-detail-journal-list__tag::after {
  display: table;
  content: ' ';
}

.item-detail-journal-list__tag::after {
  clear: both;
}

@media all and (min-width: 767px), print {
  .item-detail-journal-list__tag {
    margin-top: 14px;
  }
}

.item-detail-journal-list__tag-item {
  margin-bottom: 10px;
  margin-left: 10px;
  float: left;
}

.item-detail-journal-list__tag-target {
  padding: 7px 14px;
  display: inline-block;
  background-color: #f8f8f8;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif;
  font-size: 11px;
  line-height: 1;
}

@media all and (min-width: 767px), print {
  .item-detail-journal-list__tag-target {
    padding: 8px 18px;
    font-size: 12px;
  }
}

.item-detail-journal .btn-slider-pager {
  width: 30px;
}

.item-detail-journal .btn-slider-pager--next {
  right: 0;
  background-position: 50% 50%;
}

.item-detail-journal .btn-slider-pager--prev {
  left: -2.4%;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}