@charset "UTF-8";

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "Osaka", "Meiryo", "MS PGothic", Sans-Serif;
  color: #1c1917; /*stone-900*/
  font-display: swap;
}

.num {
  font-family: "Zen Kaku Gothic New", monospace, Sans-Serif;
  font-display: swap;
}

.num_dp {
  font-family: "Zen Tokyo Zoo", monospace, Sans-Serif;
  font-display: swap;
}

.num_sk {
  font-family: "Cabin Sketch", monospace, Sans-Serif;
  font-display: swap;
}

/*smooth scroll

@media (prefers-reduced-motion: no-preference) {
	:root {
	  scroll-behavior: smooth;
	}
  }
*/

body {
  animation: fadein 1s forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

html,
body {
  scroll-padding-top: 56px;
} /*header height*/

@media (min-width: 1024px) {
  html,
  body {
    scroll-padding-top: 80px;
  } /*header height*/
}

/*Hero*/

#hero {
  padding-top: 56px;
} /*header height*/

@media (min-width: 1024px) {
  #hero {
    padding-top: 80px; /*header height*/
    border-bottom: 6px double #44403c; /*stone-700*/
  }
}

.wrapper {
  background-image: linear-gradient(#a8a29e 1px, transparent 1px), linear-gradient(90deg, #a8a29e 1px, transparent 1px), linear-gradient(#d6d3d1 1px, transparent 1px), linear-gradient(90deg, #d6d3d1 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/*========================
	header
========================*/

header {
  position: fixed;
  width: 100%;
  z-index: 999;
  background: transparent;
  border-bottom: 6px double #44403c; /*stone-700*/
}
/*
header .bnbg_logo {
	width: 189px;
	height: 56px;
}*/

header h1 {
  width: calc(100vw - 60px);
  max-width: 320px;
  height: 56px;
  /*border:1px solid #000;*/
}

header h1 span {
  display: block;
  width: 100%;
  /*text-align: justify;
	text-align-last:justify;*/
}

.main_title.top .title_box h2 span.num_dp {
  font-size: clamp(1.125rem, 0.101rem + 5.12vw, 3.375rem); /*-----18px-54px*/
}

.main_title.top .title_box p {
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem); /*-----12px-20px*/
}

@media (min-width: 1024px) {
  .main_title.top .title_box h2 span.num_dp {
    font-size: clamp(3.375rem, 1.661rem + 2.68vw, 4.875rem); /*-----54px-78px*/
  }
}

.bnbg_text_on {
  color: #1c1917; /*stone-900*/
}

.bnbg_header_nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 60px; /*header height + border分*/
  width: 100%;
  height: calc(100vh - 60px);
  transform: translateX(100%);
  background: rgba(41, 37, 36, 0.9); /*#292524 stone-800*/
  background-attachment: fixed;
  transition: ease 0.4s; /*-----リサイズ時のチラつき防止したい場合は、ここをコメントアウトしてactiveのみとする*/
  overflow: auto;
}
.bnbg_nav_items {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  width: 90%;
  max-width: 460px;
  border-top: 1px dotted #fff;
}
.bnbg_nav_items li a {
  min-height: 96px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background-color: #292524;stone-800*/
  border-bottom: 1px dotted #fff;
}
.bnbg_nav_items li.company img {
  filter: brightness(0) invert(1); /*ロゴを白く*/
}

/*@media (min-width: 768px) and (min-height: 1024px) {
		.bnbg_nav_items {
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 0;
			width: 90%;
			max-width: 460px;
		}
	}*/

@media (min-width: 1024px) {
  /*
		header .bnbg_logo {
			width: 324px;
			height: 96px;
		}*/

  header h1 {
    width: 400px;
    height: 80px;
  }

  .bnbg_header_nav {
    position: static;
    transform: initial;
    background-color: inherit;
    height: inherit;
    display: flex;
    justify-content: end;
    width: auto;
    background: transparent;
  }
  .bnbg_nav_items {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding: 0;
    max-width: none;
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
    /*background: rgba(41,37,36,0.9);#292524 stone-800*/
  }
  .bnbg_nav_items li a {
    color: #292524; /*stone-800*/
    background: #f6efe5; /*paper*/
    border: 2px solid #292524; /*stone-800*/
    height: 52px;
    min-height: 0;
    padding: 0 4px 0 8px;
    margin-right: 4px;
  }
  .bnbg_nav_items li a:hover {
    color: #f6efe5; /*paper*/
    background: #44403c; /*stone-700*/
    border: 2px solid #292524; /*stone-800*/
  }
  .bnbg_nav_items li.company a {
    color: #292524; /*stone-800*/
    background: #f6efe5; /*paper*/
    border: 2px solid #292524; /*stone-800*/
    height: 52px;
    min-height: 0;
    padding: 0 4px;
    margin-right: 4px;
  }
  .bnbg_nav_items li.company img {
    filter: brightness(0) sepia();
  }
  .bnbg_nav_items li.company a:hover {
    background: #44403c; /*stone-700*/
    color: #f6efe5; /*paper*/
  }
  .bnbg_nav_items li.company a:hover img {
    filter: brightness(0) invert(1); /*ロゴを白く*/
  }
}

@media (min-width: 1280px) {
  /*header .bnbg_logo {
			width: 405px;
			height: 120px;
		}*/

  .bnbg_nav_items li a {
    padding: 0 10px 0 16px;
  }

  .bnbg_nav_items li.company a {
    padding: 0 16px;
  }
}

/* ハンバーガーメニュー */

.bnbg_ham_btn_box {
  width: 60px;
  height: 48px;
}
.bnbg_ham_btn {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
  padding: 0.5rem 1rem;
}

@media (min-width: 1024px) {
  .bnbg_ham_btn {
    display: none;
  }
}

.bnbg_ham_btn span {
  width: 100%;
  height: 1px;
  position: relative;
  transition: ease 0.4s;
  display: block;
}
.bnbg_ham_btn span:nth-child(1) {
  top: 0;
  background-color: #44403c; /*stone-700*/
}
.bnbg_ham_btn span:nth-child(2) {
  margin: 8px 0;
  background-color: #44403c; /*stone-700*/
}
.bnbg_ham_btn span:nth-child(3) {
  top: 0;
  background-color: #44403c; /*stone-700*/
}

/* ハンバーガーメニュークリック後のスタイル */

.bnbg_header_nav.active {
  transform: translateX(0);
  transition: ease 0.4s;
}
.bnbg_ham_btn.active span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}
.bnbg_ham_btn.active span:nth-child(2) {
  opacity: 0;
}
.bnbg_ham_btn.active span:nth-child(3) {
  top: -9px;
  transform: rotate(-45deg);
}

/*breadcrumb*/

.breadcrumb {
  padding: 0.5rem 1rem;
  font-size: 75%;
  border-top: 2px solid #44403c; /*stone-700*/
}

.breadcrumb .breadcrumb_group {
  display: block;
}

.breadcrumb .breadcrumb_group li {
  display: inline;
  font-weight: 500;
}

.breadcrumb .breadcrumb_group li a {
  display: inline-block;
}

.breadcrumb .breadcrumb_group li:last-child {
  color: #78716c; /*stone-500*/
  font-weight: 700;
}

.breadcrumb_itemlink[href]:hover {
  opacity: 0.5;
}

.breadcrumb_group > * + * {
  margin-left: 0.25em;
}

.breadcrumb_group > * + *::before {
  content: "/";
  margin-left: 0.5em;
  margin-right: 0.5em;
  opacity: 0.5;
  color: #78716c; /*stone-500*/
}

@media (min-width: 1024px) {
  .breadcrumb {
    padding: 0.5rem;
    font-size: 82.5%;
    border-top: none;
  }

  .breadcrumb .breadcrumb_group {
    display: flex;
    flex-wrap: wrap;
  }

  .breadcrumb_group > * + * {
    margin-left: 0.5em;
  }

  .breadcrumb_group > * + *::before {
    content: "/";
    margin-left: 0.75em;
    margin-right: 0.75em;
  }
}

/*========================
	footer
========================*/

/*pagetop*/

#page_top {
  display: block;
  position: fixed;
  bottom: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  background: #1c1917; /*stone-900*/
  /*border-radius: 24px;*/
  padding-top: 4px;
  opacity: 0;

  cursor: pointer;
  z-index: 9;
}

#page_top span {
  display: block;
  padding-top: 4px;
  font-size: 0.625rem;
  text-align: center;
}

svg.arrow {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  height: 1.5rem;
  width: 1.5rem;
}

@media (min-width: 1024px) {
  #page_top {
    padding-top: 0;
    right: 16px;
    bottom: 16px;
  }
  svg.arrow {
    height: 2rem;
    width: 2rem;
  }
}

@media (min-width: 1440px) {
  #page_top {
    right: 34px;
    /*bottom:34px;*/
  }
}

/*========================
	color and text
========================*/

/*gradient sample

.bj_gradient_chart_lime {background-image: linear-gradient(135deg, #cedb40 0%, #bacb28 100%);}
.bj_gradient_chart_teal {background-image: linear-gradient(135deg, #31c9bc 0%, #19a391 100%);}
.bj_gradient_chart_sky {background-image: linear-gradient(135deg, #22b0e4 0%, #1394d8 100%);}
.bj_gradient_chart_blue {background-image: linear-gradient(135deg, #4d81bc 0%, #2a5191 100%);}
.bj_gradient_chart_purple {background-image: linear-gradient(135deg, #b365d9 0%, #853abb 100%);}
.bj_gradient_chart_red {background-image: linear-gradient(135deg, #f0465b 0%, #e22533 100%);}
.bj_gradient_chart_orange {background-image: linear-gradient(135deg, #ff5e00 0%, #ff3500 100%);}
.bj_gradient_chart_amber {background-image: linear-gradient(135deg, #ffc04b 0%, #ff9628 100%);}

.bj_gradient_chart_lime_base {background-image: linear-gradient(150deg,#e3eb93 0%, #e3eb93 8%,#fff 8%, #fff 92%,#e3eb93 92%, #e3eb93 100%);}
.bj_gradient_chart_teal_base {background-image: linear-gradient(150deg, #bcefea 0%, #bcefea 8%,#fff 8%, #fff 92%,#bcefea 92%, #bcefea 100%);}
.bj_gradient_chart_sky_base {background-image: linear-gradient(150deg, #c0e8f7 0%, #c0e8f7 8%,#fff 8%, #fff 92%,#c0e8f7 92%, #c0e8f7 100%);}
.bj_gradient_chart_blue_base {background-image: linear-gradient(150deg, #c5dcf5 0%, #c5dcf5 8%,#fff 8%, #fff 92%,#c5dcf5 92%, #c5dcf5 100%);}
.bj_gradient_chart_purple_base {background-image: linear-gradient(150deg, #e9d3f4 0%, #e9d3f4 8%,#fff 8%, #fff 92%,#e9d3f4 92%, #e9d3f4 100%);}
.bj_gradient_chart_red_base {background-image: linear-gradient(150deg, #fac5cc 0%, #fac5cc 8%,#fff 8%, #fff 92%,#fac5cc 92%, #fac5cc 100%);}
.bj_gradient_chart_orange_base {background-image: linear-gradient(150deg, #ffcdb1 0%, #ffcdb1 8%,#fff 8%, #fff 92%,#ffcdb1 92%, #ffcdb1 100%);}
.bj_gradient_chart_amber_base {background-image: linear-gradient(150deg, #ffe2ad 0%, #ffe2ad 8%,#fff 8%, #fff 92%,#ffe2ad 92%, #ffe2ad 100%);}

.bj_title_line {background: linear-gradient(90deg, #FBBF24 0%, #FB923C 100%);}
.bj_gradient_icon {background-image: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);}
.bj_gradient_btn {background-image: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);}
.bj_hero_person_expt_copy {background-image: linear-gradient(135deg, #ea580c 0%, #FBBF24 100%);}
.bj_entry {background-image: linear-gradient(135deg, #FDE68A 0%, #fb923c 45%, #fb923c 55%, #FDE68A 100%);}*/

/*text-size*/

.bj_display-1 {
  font-size: calc(1.725rem + 5.7vw);
}
.bj_display-2 {
  font-size: calc(1.675rem + 5.1vw);
}
.bj_display-3 {
  font-size: calc(1.575rem + 3.9vw);
}
.bj_display-4 {
  font-size: calc(1.475rem + 2.7vw);
}

.bj_display-5 {
  font-size: calc(1.375rem + 1.5vw);
}
.bj_display-6 {
  font-size: calc(1.325rem + 1.1vw);
}
.bj_display-7 {
  font-size: calc(1.325rem + 0.9vw);
}
.bj_display-8 {
  font-size: calc(1.3rem + 0.6vw);
}
.bj_display-9 {
  font-size: calc(1.275rem + 0.3vw);
}
.bj_display-10 {
  font-size: calc(1.1rem + 0.25vw);
}

@media (min-width: 1024px) {
  .bj_display-1 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .bj_display-2 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .bj_display-3 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .bj_display-4 {
    font-size: calc(1.375rem + 1.5vw);
  }
}

/*========================
	other
========================*/

/*疑似blockquote*/

div.bq {
  position: relative;
  border: 1px solid #a5b4fc; /*indigo-300*/
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: #e0e7ff; /*indigo-100*/
  /*margin-top: 2.5rem;*/
  padding: 2rem 1rem;
}
div.bq:before {
  position: absolute;
  font-family: serif;
  content: "“";
  color: #a5b4fc;
  top: 10px;
  left: 16px;
  font-size: 2rem;
  font-weight: 900;
}
div.bq:after {
  position: absolute;
  font-family: serif;
  content: "„";
  color: #a5b4fc;
  right: 16px;
  bottom: 10px;
  font-size: 2rem;
  font-weight: 900;
}
div.bq p {
  margin: 0;
  font-style: oblique;
  font-weight: 500;
}

/*READ MORE btn*/

.blog_card div.more {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #44403c; /*stone-700*/
  border-left: 1px solid #44403c; /*stone-700*/
  background: #f6efe5; /*paper*/
}

.blog_card:hover div.more {
  border-color: transparent;
  background: transparent;
}

.blog_card div.more p {
  margin-left: 2rem;
  margin-right: -2rem;
  z-index: 1;
  transition: all 0.2s ease;
}

.blog_card div.more p::after {
  display: inline-block;
  width: 2rem;
  text-align: center;
  content: "\025b6";
}

.blog_card:hover div.more p {
  margin-right: -1rem;
  opacity: 0.5;
}

.blog_card:hover div.more p::after {
  opacity: 0;
}

.blog_card div.more span {
  display: block;
  width: 44px;
  height: 44px;
  background: #f6efe5; /*paper*/
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.blog_card div.more span::before {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 0px;
  height: 0px;
  border: 0px solid #44403c; /*stone-700*/
  border-top-color: #a8a29e;
  border-left-color: #a8a29e;
  background-color: transparent;
  transition: all 0.2s ease;
  overflow: hidden;
  transform-origin: right bottom;
}

.blog_card:hover div.more span::before {
  border-width: 22px;
  content: "";
  /*filter: drop-shadow(-1px 0px 0px rgba(0,0,0,0.6));*/
}

.blog_card p.title span.title_l {
  font-feature-settings: "palt"; /*『』を詰める*/
  letter-spacing: 0.05rem; /*『』以外の間隔を調整*/
}

.blog_card.new,
.blog_card.new02,
.blog_card.trial,
.blog_card.interview,
.blog_card.hps {
  position: relative;
  background: #e9d8bf; /*paper_dark*/
}

.blog_card.new div.more,
.blog_card.new div.more span,
.blog_card.new02 div.more,
.blog_card.new02 div.more span,
.blog_card.trial div.more,
.blog_card.trial div.more span,
.blog_card.interview div.more,
.blog_card.interview div.more span,
.blog_card.hps div.more,
.blog_card.hps div.more span {
  background: #e9d8bf; /*paper_dark*/
}

.blog_card.new:hover div.more,
.blog_card.new02:hover div.more,
.blog_card.trial:hover div.more,
.blog_card.interview:hover div.more,
.blog_card.hps:hover div.more {
  border-color: transparent;
  background: transparent;
}

/*白い斜線の囲み枠
.blog_card.new::before,
.blog_card.new02::before,
.blog_card.hps::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	border-image-source: repeating-linear-gradient(135deg, #fff, #fff 4px, rgba(0 0 0 / 0) 0, rgba(0 0 0 / 0) 8px); 
	border-image-slice: 16;
	border-image-repeat: round;
	border-style: solid;
	border-width: 16px;
}*/

.blog_card.new::after {
  position: absolute;
  content: "";
  display: block;
  width: 24%;
  height: 24%;
  min-width: 64px;
  min-height: 64px;
  max-width: 120px;
  max-height: 120px;
  right: 2px;
  top: 2px;
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_new.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-blend-mode: screen;
  z-index: 998;
}

.blog_card.new:hover::after {
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_new_on.svg");
}
.blog_card.short.new:hover::after {
  /*short verはhover時の変化なし*/
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_new.svg");
}

.blog_card.new02::after {
  position: absolute;
  content: "";
  display: block;
  width: 24%;
  height: 24%;
  min-width: 64px;
  min-height: 64px;
  max-width: 120px;
  max-height: 120px;
  right: 2px;
  top: 2px;
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_new02.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-blend-mode: screen;
  z-index: 998;
}

.blog_card.new02:hover::after {
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_new02_on.svg");
}
.blog_card.short.new02:hover::after {
  /*short verはhover時の変化なし*/
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_new02.svg");
}

.blog_card.trial::after {
  position: absolute;
  content: "";
  display: block;
  width: 24%;
  height: 24%;
  min-width: 64px;
  min-height: 64px;
  max-width: 120px;
  max-height: 120px;
  right: 2px;
  top: 2px;
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_trial.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-blend-mode: screen;
  z-index: 998;
}

.blog_card.trial:hover::after {
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_trial_on.svg");
}
.blog_card.short.trial:hover::after {
  /*short verはhover時の変化なし*/
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_trial.svg");
}

.blog_card.interview::after {
  position: absolute;
  content: "";
  display: block;
  /*width: 36%;
  height: 18%;
  min-width: 128px;
  min-height: 64px;
  max-width: 240px;
  max-height: 120px;*/
  width: 48%;
  height: 24%;
  min-width: 128px;
  min-height: 64px;
  max-width: 200px;
  max-height: 100px;
  left: 2px;
  top: 2px;
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_interview.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-blend-mode: screen;
  z-index: 998;
}

.blog_card.interview:hover::after {
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_interview_on.svg");
}
.blog_card.short.interview:hover::after {
  /*short verはhover時の変化なし*/
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_interview.svg");
}

.blog_card.hps::after,
.blog_card.short.hps::after {
  position: absolute;
  content: "";
  display: block;
  width: 48%;
  height: 24%;
  min-width: 128px;
  min-height: 64px;
  max-width: 240px;
  max-height: 120px;
  left: 2px;
  top: 2px;
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_cheer.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-blend-mode: screen;
}

.blog_card.short.hps::after {
  left: auto;
  right: -40px;
}

.blog_card.hps:hover::after {
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_cheer_on.svg");
}
.blog_card.short.hps:hover::after {
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_cheer.svg");
}

.blog_card.new::after,
.blog_card.new02::after,
.blog_card.trial::after,
.blog_card.interview::after,
.blog_card.hps::after {
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2)) contrast(1);
}

.blog_card.new:hover::after,
.blog_card.new02:hover::after,
.blog_card.trial:hover::after,
.blog_card.interview:hover::after,
.blog_card.hps:hover::after {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 1)) contrast(1.5);
  /*filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3)) contrast(1.5);*/
}

/*short verはhover時の変化なし*/
.blog_card.short.new::after,
.blog_card.short.new02::after,
.blog_card.short.trial::after,
.blog_card.short.interview::after,
.blog_card.short.hps::after {
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2)) contrast(1);
}

/*short verは変化なし*/

@media (min-width: 1440px) {
  .blog_card.new::after,
  .blog_card.new02::after,
  .blog_card.trial::after,
  .blog_card.interview::after {
    right: 2px;
    top: 4px;
  }

  .blog_card.hps::after {
    left: 2px;
    top: 4px;
  }
}

@media (min-width: 1440px) {
  .blog_card.short.hps::after {
    position: absolute;
    content: "";
    display: block;
    /*width: 64%;
    height: 32%;*/
    width: 48%;
    height: 24%;
    min-width: 128px;
    min-height: 64px;
    max-width: 240px;
    max-height: 120px;
    left: auto;
    right: -40px;
    top: 4px;
    background-image: url("/blog/benefit_blog/common/cmn_img/icon_stamp_cheer.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-blend-mode: screen;
  }
}

/*short ver ポラロイド白枠あり写真周りに背景をいれたいとき .bg_on 追加*/

.blog_card.short .poraloid.bg_on {
  background-image: url("/blog/benefit_blog/common/cmn_img/bg_poraloid@2x.png"); /*fallback
	background-image: url("/blog/benefit_blog/common/cmn_img/bg_poraloid.svg"), none;*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-blend-mode: multiply;
}

.past .blog_card.short .poraloid.bg_on {
  /*過去の記事では背景画像なし*/
  background: none;
}

/*short ver 内の.textをアコーディオン表示に*/

.past .blog_card.short {
  position: relative;
  cursor: pointer;
}

.past .blog_card.short:hover {
  background-color: #fff;
}

.past .blog_card.short::before,
.past .blog_card.short::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 3px;
  /*border-radius: 2px;*/
  background-color: #44403c;
  position: absolute; /* relative-->.past .blog_card.short */
  right: 21px;
  /*top: 50%;*/
  bottom: 24px;
  transform: translateY(-50%);
  transition: opacity 0.2s;
  transition: transform 0.4s;
}

.past .blog_card.short::after {
  transform: translateY(-50%) rotate(90deg);
}

.past .blog_card.short.is-open::before {
  opacity: 0;
}

.past .blog_card.short.is-open::after {
  transform: translateY(-50%) rotate(180deg);
  background-color: #78716c;
}

.past .blog_card.short .text {
  opacity: 0;
  visibility: hidden;
  width: fit-content;
  height: 0;
  padding-top: 0; /*for like accordion ★*/
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  transition: padding 0.25s, opacity 0.25s, visibility 0.25s;
}

.past .blog_card.short.is-open .text {
  overflow: hidden;
  padding-top: 0.75rem; /*for like accordion ★*/
  height: auto;
  opacity: 1;
  visibility: visible;
  /*background-color: #fff;
	padding-bottom: 1rem;
	min-width: 100%;*/
}

@media (min-width: 1024px) {
  .past .blog_card.short .text,
  .past .blog_card.short.is-open .text {
    width: 100%;
  }
}

@media (min-width: 1440px) {
  .past .blog_card.short .text,
  .past .blog_card.short.is-open .text {
    width: fit-content;
  }
}

/*refreshなどで複数のコメントを吹き出しで区切る場合*/

.balloon_tl,
.balloon_tr,
.balloon_bl,
.balloon_br {
  position: relative;
  padding: 1.5rem 1.25rem;
  border-radius: 8px;
  border: 2px solid #78716c; /*stone-500*/
  margin-bottom: 28px;
}

.balloon_tl p.text,
.balloon_tr p.text,
.balloon_bl p.text,
.balloon_br p.text {
  margin: 0 !important;
}

.balloon_tl::before {
  position: absolute;
  top: -18px;
  right: 25%;
  transform: skew(-45deg);
  height: 18px;
  width: 24px;
  border-left: 2px solid #78716c;
  content: "";
  background-color: #f6efe5; /*paper*/
}

.balloon_tr::before {
  position: absolute;
  top: -18px;
  left: 25%;
  transform: skew(45deg);
  height: 18px;
  width: 24px;
  border-right: 2px solid #78716c;
  content: "";
  background-color: #f6efe5; /*paper*/
}

.balloon_bl::before {
  position: absolute;
  top: 100%;
  right: 25%;
  transform: skew(-45deg);
  height: 18px;
  width: 24px;
  border-right: 2px solid #78716c;
  content: "";
  background-color: #f6efe5; /*paper*/
}

.balloon_br::before {
  position: absolute;
  top: 100%;
  left: 25%;
  transform: skew(45deg);
  height: 18px;
  width: 24px;
  border-left: 2px solid #78716c;
  content: "";
  background-color: #f6efe5; /*paper*/
}

.new .balloon_tl::before,
.new .balloon_tr::before,
.new02 .balloon_tl::before,
.new02 .balloon_tr::before,
.new .balloon_bl::before,
.new .balloon_br::before,
.new02 .balloon_bl::before,
.new02 .balloon_br::before {
  background-color: #e9d8bf; /*paper-dark*/
}

@media (min-width: 1024px) {
  .balloon_tl,
  .balloon_tr,
  .balloon_bl,
  .balloon_br {
    padding: 2.25rem 2rem;
    border-radius: 12px;
    margin-bottom: 36px;
  }
}

/*
side h3（1024以上のみ表示）.side h3.title--->base_bnftblog.css
*/

@media (min-width: 1024px) {
  .side h3.title span.ctg {
    display: block;
    min-width: calc(100% + 52px);
    position: relative;

    margin-top: 16px;
    margin-left: -36px;
    margin-right: -16px;
    /*padding: 12px 20px 12px 40px;*/
    padding: 12px;
    color: #292524; /*stone-800*/
    font-size: 1rem;
    /*border-bottom:6px solid #a8a29e;stone-400*/
    filter: drop-shadow(2px 6px 0px rgba(0, 0, 0, 0.1));
    background-color: #fff;
    background-repeat: repeat-y;
    background-position: right top;
    background-size: 35%;
  }

  .side h3.title span.ctg.ctg01 {
    background-image: url("/blog/benefit_blog/common/cmn_img/bg_side_ctg01.png"); /*fallback
			background-image: url("/blog/benefit_blog/common/cmn_img/bg_side_ctg01.svg"), none;*/
  }

  .side h3.title span.ctg.ctg02 {
    background-image: url("/blog/benefit_blog/common/cmn_img/bg_side_ctg02.png"); /*fallback
			background-image: url("/blog/benefit_blog/common/cmn_img/bg_side_ctg02.svg"), none;*/
  }

  .side h3.title span.ctg.ctg03 {
    background-image: url("/blog/benefit_blog/common/cmn_img/bg_side_ctg03.png"); /*fallback
			background-image: url("/blog/benefit_blog/common/cmn_img/bg_side_ctg03.svg"), none;*/
  }

  .side h3.title span.ctg.ctg04 {
    background-image: url("/blog/benefit_blog/common/cmn_img/bg_side_ctg04.png"); /*fallback
			background-image: url("/blog/benefit_blog/common/cmn_img/bg_side_ctg04.svg"), none;*/
  }
}

@media (min-width: 1440px) {
  .side h3.title span.ctg {
    min-width: calc(100% + 64px);
    margin-left: -48px;
    margin-right: -16px;
    font-size: 1.125rem;
  }

  .side h3.title span.ctg::before,
  .side h3.title span.ctg::after {
    left: 20%;
  }
  .side h3.title span.ctg::after {
    left: calc(20% + 4px);
  }
}

/*.side_link .bunner { poisition:relative }  --->base_bnftblog.css*/

.side_link.club .bunner .masking_tape {
  position: absolute;
  top: -1.5rem;
  left: 25%;
  width: 50%;
  height: 40px;
  background-image: linear-gradient(-45deg, rgba(251, 191, 36, 0.5) 25%, rgba(255, 555, 255, 0.8) 25%, rgba(255, 555, 255, 0.8) 50%, rgba(251, 191, 36, 0.5) 50%, rgba(251, 191, 36, 0.5) 75%, rgba(255, 555, 255, 0.8) 75%, rgba(255, 555, 255, 0.8) 100%);
  background-size: 20px 20px;
  border-left: 2px dotted rgba(0, 0, 0, 0.1);
  border-right: 2px dotted rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  padding: 0.25rem 2rem;
  transform: rotate(-4deg);
}

.side_link.hps .bunner .masking_tape {
  position: absolute;
  top: -1.5rem;
  left: 25%;
  width: 50%;
  height: 40px;
  background-image: linear-gradient(-45deg, rgba(248, 113, 113, 0.5) 25%, rgba(255, 555, 255, 0.8) 25%, rgba(255, 555, 255, 0.8) 50%, rgba(248, 113, 113, 0.5) 50%, rgba(248, 113, 113, 0.5) 75%, rgba(255, 555, 255, 0.8) 75%, rgba(255, 555, 255, 0.8) 100%);
  background-size: 20px 20px;
  border-left: 2px dotted rgba(0, 0, 0, 0.1);
  border-right: 2px dotted rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding: 0.25rem 2rem;
  transform: rotate(-4deg);
}

.side_link.ta .bunner .masking_tape {
  position: absolute;
  top: -1.5rem;
  left: 25%;
  width: 50%;
  height: 40px;
  background-image: linear-gradient(-45deg, rgba(96, 165, 250, 0.5) 25%, rgba(255, 555, 255, 0.8) 25%, rgba(255, 555, 255, 0.8) 50%, rgba(96, 165, 250, 0.5) 50%, rgba(96, 165, 250, 0.5) 75%, rgba(255, 555, 255, 0.8) 75%, rgba(255, 555, 255, 0.8) 100%);
  background-size: 20px 20px;
  border-left: 2px dotted rgba(0, 0, 0, 0.1);
  border-right: 2px dotted rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding: 0.25rem 2rem;
  transform: rotate(-4deg);
}

.side_link.club .bunner .push_pin {
  /*yellow pin*/
  position: absolute;
  top: -2rem;
  left: 25%;
  width: 50%;
  height: 54px;
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_push_pin_yl.png"); /*fallback
		background-image: url("/blog/benefit_blog/common/cmn_img/icon_push_pin_yl.svg"), none;*/
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

.side_link.hps .bunner .push_pin {
  /*pink pin*/
  position: absolute;
  top: -2rem;
  left: 25%;
  width: 50%;
  height: 54px;
  background-image: url("/blog/benefit_blog/common/cmn_img/icon_push_pin_pk.png"); /*fallback
		background-image: url("/blog/benefit_blog/common/cmn_img/icon_push_pin_pk.svg"), none;*/
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}