@charset "utf-8";

.w-full {width: 105%; margin-left: -2.5% !important;}

@media screen and (max-width: 680px) {
    .w-full { width: 100% !important; margin-left: 0 !important;}
}

/*MAIN*/
.main-slide{
  position: relative;
}
.main-slide:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
}
.main .swiper-slide-active:before{
  background: transparent;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    display: none;
}
.main-slide a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-catch{
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  z-index: 1;
  padding: 0 5%;

  @media screen and (max-width:1780px) {
    padding: 0.3%;
  }

  @media screen and (max-width: 680px) {
      position: relative !important;
      width: 100%;
      padding: 30px !important;
  }
}
.main-catch_h2{
  font-size: 54px;
  font-weight: 900;
  text-shadow: 1px 1px 3px #fff;

  @media screen and (max-width:1780px) {
    font-size: 3.4vw;
  }

  @media screen and (max-width: 1180px) {
      margin-bottom: 10px !important;
      letter-spacing: 0;
  }

  @media screen and (max-width: 680px) {
      text-align: center;
      font-size: 7vw;
  }

  @media screen and (max-width: 480px) {
      font-size: 8vw;
  }
}
.main-catch_p{
  font-size: 16px;
  line-height: 1.6em;
  text-shadow: 1px 1px 3px #fff;

  @media screen and (max-width: 1580px) {
      font-size: 14px;
  }

  @media screen and (max-width: 1180px) {
      font-size: 12px;
  }
}
.main-catch_logoset{
  width: 80%;
}

@media screen and (max-width: 1380px) {
  .main-catch_p br{
    display: none;
  }
}
@media screen and (max-width: 1180px) {
  .main-catch_logoset {
    width: 90%;
    max-width: 380px;
  }
}

@media screen and (max-width: 480px) {
  .main {
    margin-bottom: 0 !important;
  }
}

/*NOTICE*/
.notice-wrapper {display: flex; background: #eee;}
.notice-icon{color: #e63e80; flex-basis:20%; -webkit-flex-basis:20%; max-width: 10em; font-size: 15px; font-weight: 900;}
.notice-icon img{width: 3em; vertical-align: -8px; margin-right: .5rem;}
.notice-list {padding-left: 0;}
@media screen and (max-width: 680px) {
    .notice-wrapper {flex-wrap: wrap;}
    .notice-list {padding: 10px 20px 20px !important; margin: 0;}
    .notice-list li + li {border-bottom: 1px solid #eee;}
    .notice-icon{font-size: 18px; flex-basis: 100%; -webkit-flex-basis: 100%; display: block; width: 100%; max-width: 100%; text-align: center; margin-top: 10px; display: flex; align-items: center; justify-content: center;}
    .notice-icon img {width: 4em; vertical-align: -6px; margin-left: -3em;}
}

/*PICKUP*/
.picup-ol {
    gap: 10px 1%;
}

.picup-li{
  /* (100% - gap * 隙間の数) / １行あたりの表示件数 */
  flex: 0 0 calc((100% - 4%) / 5);
  max-width: calc((100% - 4%) / 5);

  @media screen and (max-width: 1480px) {
    flex: 0 0 calc((100% - 3%) / 4);
    max-width: calc((100% - 3%) / 4);

    &:nth-child(n + 9) {
      display: none;
    }
  }

  @media screen and (max-width: 780px) {
    flex: 0 0 calc((100% - 2%) / 3);
    max-width: calc((100% - 2%) / 3);

    &:nth-child(n + 7) {
      display: none;
    }
  }

  @media screen and (max-width: 480px) {
    flex: 0 0 calc((100% - 1%) / 2);
    max-width: calc((100% - 1%) / 2);

    &:nth-child(n + 5) {
      display: none;
    }
  }
}

.picup-li:last-child {
  display: block;
}

.picup-li p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.picup-li a {height: 100%; border: 1px solid #eee;}
.picup-li_title{
  width: 100%;
  bottom: 0;
  left: 0;
  /* background: rgba(0,0,0,0.7); */
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.picup-li img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.picup-li_p{
  line-height: 1.4em;
}
.picup-li_next{
  width: 100%;
}
.picup-li_next--btn{
  padding-top: 48.5%;
  text-align: center;
}
.picup-li_next--btn:first-child{
  background: #e4007f;
  margin-bottom: 3%;
}
.picup-li_next--btn:last-child{
  background: #009ce1;
}
.picup-li_next--btn span{
  display: block;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.picup-li_next--btn:hover{
  background: #faee00;
}
.picup-li_next--btn:hover span{
  color: #222;
}
.picup-li-full {min-height: 100px; flex-grow: 1; max-width: 40%; margin-left: auto!important;}
.picup-li-full--btn {background: #009ce1; position: relative;}
.picup-li-full--btn span {color: #fff; font-size: 18px; font-weight: 700; text-align: center;}
.picup-li a:hover, .picup-li a:hover span {color: #fff;}
.picup-li:hover .picup-li_title, .picup-li:hover .picup-li-full--btn {color: #fff; background: #e4007f !important;}
.picup-li-full--btn i {
  position: absolute;
    font-size: 21px;
    color: #fff;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

@media screen and (max-width: 1680px) {
  .picup-li_title{
    font-size: 16px;
  }
}
@media screen and (max-width: 1480px) {
  .picup-li_title{
    font-size: 15px;
  }
}
@media screen and (max-width: 1280px) {
  .picup-li_title{
    font-size: 14px;
    letter-spacing: 0;
  }
  .picup-li_next--btn span {
      font-size: 18px;
  }
    .picup-li-full {max-width: 50%;}
}
@media screen and (max-width: 780px) {
  .picup-li_title{
    font-size: 13px;
  }
  .picup-li_p{
    font-size: 12px;
    list-style: none;1.3em
  }
  .picup-li_next--btn span {
      font-size: 16px;
  }
    .picup-li-full {max-width: 66.6%;}
}
@media screen and (max-width: 480px) {
    .picup-li-full {max-width: 100%;}
}

/*NEWLY*/
.newly-ol {
    gap: 10px 1%;
}

.newly-li{
  /* (100% - gap * 隙間の数) / １行あたりの表示件数 */
  flex: 0 0 calc((100% - 4%) / 5);
  max-width: calc((100% - 4%) / 5);

  @media screen and (max-width: 1480px) {
    flex: 0 0 calc((100% - 3%) / 4);
    max-width: calc((100% - 3%) / 4);
  }

  @media screen and (max-width: 780px) {
    flex: 0 0 calc((100% - 2%) / 3);
    max-width: calc((100% - 2%) / 3);
  }

  @media screen and (max-width: 480px) {
    flex: 0 0 calc((100% - 1%) / 2);
    max-width: calc((100% - 1%) / 2);
  }
}

/*NEWLY-CLASSIC*/
.newly--classic {
  &:not(.is-open) {
    /* 初期表示（5件 * 2行） */
    .newly-li:nth-child(n + 11) {
      display: none;
    }
  }

  /* 更に表示（5件 * 3行） */
  &.is-open {
    .newly-li {
      display: list-item;
    }
  }

  @media (max-width: 1480px) {
    /* 初期表示（4件 * 2行） */
    &:not(.is-open) {
      .newly-li:nth-child(n + 9) {
        display: none;
      }
    }

    /* 更に表示（4件 * 3行） */
    &.is-open {
      .newly-li {
        display: list-item;
      }

      .newly-li:nth-child(n + 13) {
        display: none;
      }
    }
  }

  @media (max-width: 780px) {
    /* 初期表示（3件 * 2行） */
    &:not(.is-open) {
      .newly-li:nth-child(n + 7) {
        display: none;
      }
    }

    /* 更に表示（3件 * 3行） */
    &.is-open {
      .newly-li {
        display: list-item;
      }

      .newly-li:nth-child(n + 10) {
        display: none;
      }
    }
  }

  @media (max-width: 480px) {
    /* 初期表示（2件 * 4行）8BOX */
    &:not(.is-open) {
      .newly-li:nth-child(n) {
        display: list-item;
      }

      .newly-li:nth-child(n + 9) {
        display: none;
      }
    }

    /* 更に表示（2件 * 6行）12BOX */
    &.is-open {
      .newly-li:nth-child(n) {
        display: list-item;
      }

      .newly-li:nth-child(n + 13) {
        display: none;
      }
    }
  }
}

/*NEWLY-NEW*/
.newly--new,
.newly--oem {
  /* 初期表示（5件 * 1行） */
  &:not(.is-open) {
    .newly-li:nth-child(n + 6) {
      display: none;
    }
  }

  /* 更に表示（5件 * 2行） */
  &.is-open {
    .newly-li {
      display: list-item;
    }
  }

  @media (max-width: 1480px) {
    /* 初期表示（4件 *1行） */
    &:not(.is-open) {
      .newly-li:nth-child(n + 5) {
        display: none;
      }
    }

    /* 更に表示（4件 * 2行） */
    &.is-open {
      .newly-li {
        display: list-item;
      }

      .newly-li:nth-child(n + 9) {
        display: none;
      }
    }
  }

  @media (max-width: 780px) {
    /* 初期表示（3件 *1行） */
    &:not(.is-open) {
      .newly-li:nth-child(n + 4) {
        display: none;
      }
    }

    /* 更に表示（3件 * 2行） */
    &.is-open {
      .newly-li {
        display: list-item;
      }

      .newly-li:nth-child(n + 7) {
        display: none;
      }
    }
  }

  @media (max-width: 480px) {
    /* 初期表示（2件 * 2行）4BOX */
    &:not(.is-open) {
      .newly-li:nth-child(n) {
        display: list-item;
      }

      .newly-li:nth-child(n + 5) {
        display: none;
      }
    }

    /* 更に表示（2件 * 4行）8BOX */
    &.is-open {
      .newly-li:nth-child(n) {
        display: list-item;
      }

      .newly-li:nth-child(n + 9) {
        display: none;
      }
    }
  }
}

.show-more--btn {
  background: #009ce1;
  margin: 0 0 0 auto !important;
  border: none !important;
  border-radius: 3em;
  position: relative;
  flex: 0 0 calc((100% - 4%) / 5);
  max-width: calc((100% - 4%) / 5);

  @media screen and (max-width: 1480px) {
    flex: 0 0 calc((100% - 3%) / 4);
    max-width: calc((100% - 3%) / 4);
  }

  @media screen and (max-width: 780px) {
    flex: 0 0 calc((100% - 2%) / 3);
    max-width: calc((100% - 2%) / 3);
  }

  @media screen and (max-width: 480px) {
    flex: 0 0 calc((100% - 1%) / 2);
    max-width: calc((100% - 1%) / 2);
  }
}

.show-more--btn:hover {
  background: #e4007f;
}

.show-more--btn_a {
  color: #fff;
  padding: 0.6em 2em 0.7em;
}

.show-more--btn_a:hover {
  color: #fff;
}

.show-more--btn i {
    position: absolute;
    font-size: 21px;
    color: #fff;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.newly-li p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.newly-li_p{
    line-height: 1em;
}
.newly-li_p--price{
    font-size: 18px;
    font-weight: 700;
}
.display_price span {
    /* color: #009e9d; */
    font-size: .82em;
}
.display_price span em {
    color: #009e9d;
    font-style: normal;
    font-size: 1.1em;
}
.newly-li_p--stock{
    display: inline-block;
    background: #888888;
    font-size: 12px;
    color: #fff;
    list-style: 1em;
    padding: 3px 5px 4px;
    border-radius: 3px;
}
.newly-li_next {min-height: 150px; /* flex-grow: 1; */ max-width: 24%; margin-left: auto!important;}
.newly-li_next--btn{
  position: relative;
  display: block;
  background: #faee00;
  padding-top: 100%;
}
.newly-li_next--btn span{
  display: block;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #222;
  font-size: 18px;
  font-weight: 700;
}
.newly-li_next--btn:hover{
  background: #e4007f;
}
.newly-li_next--btn:hover span{
  color: #fff;
}
.newly-li a.is_new::before,
.product-list_li a.is_new::before {
    content: "NEW";
    color: #fff;
    background: #ff0000;
    border: 3px solid #fff;
    width: 17%;
    height: 17%;
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    top: -.9rem;
    right: -.7rem;
    opacity: .8;
    z-index: 999;
}
.newly-li figure.square img,
.product-list_li figure.square img {
    border: 1px solid #d6d6d6;
}
@media screen and (max-width: 1680px) {
  .newly-li_p--price,
  .newly-li_p--price small,
  .newly-li_p--stock{
    letter-spacing: 0;
  }
}
@media screen and (max-width: 1280px) {
  .newly-li_p--stock{
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 3px 3px;
    font-size: 10px;
    z-index: 1;
  }
  .newly-li_p--price {
      font-size: 16px;
  }
}

/*OEM*/
.oem-next-btn{
  background: #009e9d;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4em;
}
.oem-next-btn:hover{
  background: #e4007f;
  color: #fff;
}
.oem-next-btn.bg-blue:hover{
    background: #fecf1d !important;
}
.oem-next-btn br{
  display: none;
}
@media screen and (max-width: 680px) {
  .oem-next-btn{
    font-size: 18px;
	flex-basis:100%;
	-webkit-flex-basis:100%;
	max-width:100%;
  width: 100%;
  margin-bottom: 10px;;
  }
}
@media screen and (max-width: 480px) {
  .oem-next-btn br{
    display: block;
  }
}

/*OEM ARCHIVE*/
.oem p{
  font-size: clamp(14px, 1.2vw, 16px);
}
.oem-flow_left{
    flex-basis:40%;
    -webkit-flex-basis:40%;
    max-width:40%;
}
.oem-flow_right{
    flex-basis:55%;
    -webkit-flex-basis:55%;
    max-width:55%;
}
.oem-flow_point h5{
	background: #eac53a;
	margin-bottom: 5px !important;
}
.oem-flow_point h5 b{
  background: #c22074;
  display: inline-block;
  width: 50px;
  margin-right: 10px;
  padding: 15px 0 !important;
  color: #fff;
  font-size: 28px;
  text-align: center;
}
.oem-flow_point h5 span{
	display:flex;
	display:-webkit-flex;
	align-items:center;
	-webkit-align-items:center;
	font-size: 18px;
	font-weight: 700;
}
.oem-flow_point li ol{
	padding: 0 0 0 50px !important;
	margin: 0 0 20px 0 !important;
}
.oem-flow_point li{
	padding: 5px;
}
.oem-flow_point-list p{
	padding-left: 50px;
	margin: 20px 0 !important;

}
.oem-flow_point--list li:before{
	content: "●";
	color: #009ce1;
	display: inline;
}
.oem-flow_point--list li{
	font-size: 16px;
	padding: 7px 0 !important;
}
.oem-flow_h3{
  font-size: 21px;
  font-weight: 700;
}
.oem-inq{
    background: #009e9d;
    border-radius: 30px;
    padding: 10px 20px;
    color: #fff;
    line-height: 1em;
    vertical-align: 3px;
    font-size: 18px;
    cursor: pointer;
}
.oem-inq i,
.oem-inq:hover i{
  color: #fff;
  font-size: 18px;
}
.oem-inq:hover{
  color: #fff;
  background: #c22074;
}
.oem-what_left,
.oem-what_right{
    flex-basis:48%;
    -webkit-flex-basis:48%;
    max-width:48%;
}
.oem-what_h3 {
  font-size: 21px;
  font-weight: 700;
}
.oem-what_h3 span{
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: 80px;
  height: 80px;
  background: #eac53a;
  border-radius: 50%;
}
.oem-what_inner{
    border: 2px solid;
    width: calc(100% - 10px);
    margin: 0 0 40px auto;
    padding: 20px;
    box-sizing: border-box;
}
.oem-what_left p:last-child{
  margin-bottom: 0 !important;
}
.oem-what_right--sozai img{
  display: inline-block;
  width: 32%;
  height: auto;
}
/*
.oem-list_li{
	flex-basis:15%;
	-webkit-flex-basis:15%;
	max-width:15%;
	margin:0 1% 10px !important;
}
*/
.oem-list_li a img{
    width: 100%;
}
.oem-product-list-title{
	font-size: 18px;
	font-weight: 700;
	color: #009ce1;
}
.oem-list-date span{
  color: #009ce1;
}
.oem-list-title span:first-child{
  background: #009ce1;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  color: #fff;
	flex-basis:5em;
	-webkit-flex-basis:5em;
	max-width:5em;
  line-height: 1em;
}
.oem-list-target span:first-child{
  background: #c22074;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  color: #fff;
	flex-basis:5em;
	-webkit-flex-basis:5em;
	max-width:5em;
  line-height: 1em;
}
.oem-list-title span:nth-child(2),
.oem-list-target span:nth-child(2){
	flex:1;
	-webkit-flex:1;
  padding-left: 5px;
}
.oem-list-summary{
  background: #eee;
  padding: 10px;
}
.oem-list_li-l {
  flex-basis:23%;
  -webkit-flex-basis:23%;
  max-width:23%;
}
@media screen and (max-width: 1480px) {
    .oem-list_li-l {
		flex-basis:31%;
		-webkit-flex-basis:31%;
		max-width:31%;
    }
}
@media screen and (max-width: 1280px) {
	.oem-flow_left,
	.oem-flow_right{
		flex-basis:48%;
		-webkit-flex-basis:48%;
		max-width:48%;
	}
}
@media screen and (max-width: 780px) {
	.oem-flow_left,
	.oem-flow_right,
	.oem-what_left,
	.oem-what_right{
		flex-basis:100%;
		-webkit-flex-basis:100%;
		max-width:100%;
		margin-bottom: 40px;
	}
	.oem-list_li-l{
		flex-basis:48%;
		-webkit-flex-basis:48%;
		max-width:48%;
		margin:0 0 40px !important;
	}
	.oem-list-title span:nth-child(2),
	.oem-list-target span:nth-child(2){
		flex-basis:100%;
		-webkit-flex-basis:100%;
		max-width:100%;
		margin-bottom: 5px !important;
	}
	.oem-list-date{
		padding-bottom: 2px !important;
	}
	.oem-list-title{
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}
@media screen and (max-width: 480px) {
	.oem-product-list-title{
		font-size: 16px;
	}
}
/*TOP NEWS*/
.topnews{
  background: #eee;
}
.topnews-h4{
    flex-basis:25%;
    -webkit-flex-basis:25%;
    max-width:25%;
  font-size: 21px;
  font-weight: 700;
}
.topnews-h4-smll{
  font-size: 12px;
  letter-spacing: 5px;
  border-top: 1px solid #999;
  margin-top: 10px;
  padding-top: 10px;
}
.topnews-nav{
    flex:1;
    -webkit-flex:1;
}
.topnews-nav-ol{
  border-bottom: 1px solid #999;
  padding-top: 8px !important;
  margin-bottom: 40 !important;
}
.topnews-nav-ol li a{
  position: relative;
  display: inline-block;
  padding:0 0 10px;
  margin: 0 4em 0 0;
}
.topnews-nav-ol li a.active:after{
  position: absolute;
  content: "";
  display: block;
  bottom: -3px;
  width: 100%;
  height: 4px;
  background: #222;
}
.__news-area{
  display: none;
}
#__news-area1{
    display: block;
}
.topnews-list li{
  margin-bottom: 15px !important;
}
.topnews-list li:last-child{
  margin-bottom: 0 !important;
}
.topnews-list span{
  color: #666;
  letter-spacing: 3px;
}
.topnews-next_btn {
  background: #222;
  color: #fff;
  font-weight: 700;
  font-size: 21px;
}
.topnews-next_btn:hover{
  background: #009ce1;
  color: #fff;
}
@media screen and (max-width: 1380px) {
  .topnews-h4{
    flex-basis:20%;
    -webkit-flex-basis:20%;
    max-width:20%;
  }
  .topnews-nav-ol{
    padding-top: 8px !important;
  }
  .topnews-nav-ol li a{
    margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 1280px) {
  .topnews-nav-ol{
    padding-top: 3px !important;
  }
  .oem-next-btn{
   font-size: 18px;
  }
}
@media screen and (max-width: 780px) {
  .topnews-list span{
    display: block;
  }
}
@media screen and (max-width: 680px) {
  .topnews{
    padding:30px 10px !important;
  }
  .topnews-h4{
    flex-basis:100%;
    -webkit-flex-basis:100%;
    max-width:100%;
    text-align: center;
    margin-bottom: 30px;
  }
  .topnews-h4-smll{
    border-top: none;
    margin-top: 5px;
    padding-top: 0;
  }
  .topnews-nav-ol{
    justify-content:space-between;
    -webkit-justify-content:space-between;
  }
  .topnews-nav-ol li{
    flex-basis:16%;
    -webkit-flex-basis:16%;
    max-width:16%;
    text-align: center;
  }
  .topnews-nav-ol li a{
    margin: 0;
    font-size: 12px;
  }
  .topnews-list{
    margin-bottom: 20px !important;
  }
  .topnews-list span{
    letter-spacing: 5px;
    color: #666;
  }
.oem-next-btn {
    font-size: 16px;
}
}

/*BUTTON*/
button:hover {
    cursor: pointer;
}
.transit-btn{
    background: #009e9d;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4em;
    position: relative;
}
.transit-btn br{
    display: none;
}
.transit-btn i {
    position: absolute;
    font-size: 21px;
    color: #fff;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.transit-btn.btn-prev i {
    left: 2rem;
    right: unset;
}
.transit-btn, .transit-btn i {-webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out;}

.transit-btn:hover{
    background: #e4007f;
    color: #fff;
}
.transit-btn:hover i {
    color: #fff;
}
.transit-btn.bg-blue:hover{
    background: #fecf1d !important;
}

@media screen and (max-width: 1280px) {
    .transit-btn{
     font-size: 18px;
    }
  }
@media screen and (max-width: 680px) {
    .transit-btn{
        font-size: 16px;
        flex-basis:100%;
        -webkit-flex-basis:100%;
        max-width:100%;
        width: 100%;
        margin-bottom: 10px;;
    }
}
@media screen and (max-width: 480px) {
    .transit-btn br{
        display: block;
    }
}

/*PAGES*/
.dl-pages-base {background: #f3f3f3; padding: 30px 35px; display: flex; flex-wrap: wrap;}
.dl-pages-base dt {color: #2e335f; font-weight: bold; padding: 20px; flex-basis: 20%; border-bottom: 1px solid #dad9d6;}
.dl-pages-base dd {border-bottom: 1px solid #dad9d6; flex-basis: 70%;}
.dl-pages-base dt, .dl-pages-base dd {padding: 0 0 20px 20px;}
.dl-pages-base p.indent { text-indent: -1rem; padding-left: 1rem; }

.dl-pages-head {background: #f3f3f3; padding: 35px 35px 25px; display: flex; flex-wrap: wrap;}
.dl-pages-head dt {color: #2e335f; font-weight: bold; background-color: #dad9d6; text-align: center; padding: 10px; margin-bottom: 1rem; flex-basis: 100%;}
.dl-pages-head dd {border-bottom: 1px solid #dad9d6; padding: 10px; flex-basis: 100%;}

.dl-pages-text {border: 4rem solid #f3f3f3; padding: 2rem 3rem;}
.dl-pages-text dt {font-size: 1.15rem; border-bottom: 1px solid #ccc; font-weight: 700; margin-bottom: .8rem;}
.dl-pages-text dd {margin-bottom: 2.5rem;}
.dl-pages-text p.indent { text-indent: -1rem; padding-left: 1rem; }
.dl-pages-text .sub-indent, .dl-pages-base .sub-indent { display: block; padding-left: 1rem; text-indent: 0; }

.dl-pages-sub { display: flex; flex-wrap: wrap; margin: 0 0 0 auto; }
.dl-pages-sub dt { flex-basis: 15%; color: #2e335f; line-height: 1.3rem; font-weight: bold; background-color: #dad9d6; margin: .5rem .5% !important; padding: .3rem .8rem; display: flex; align-items: center; justify-content: center; }
.dl-pages-sub dd { flex-basis: 80%; padding: .5rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center;}
.dl-pages-sub dt, .dl-pages-sub dd{ margin-bottom: .5rem;}
.dl-pages-sub dd dl {margin: 0;}
.inquiry-to {display:flex;}

.pages-logo {max-width: 30%; margin: 0 auto; text-align: center;}
.pages-logo img {width: 100%;}
.pages-main-image {text-align: center; -webkit-filter: sepia(8%); filter: sepia(8%);}
.pages-main-image img {max-width: 100%; height: auto; display: block;}
.ceo-intro-layout {display: flex; flex-direction: row; align-items: flex-start; gap: 3%; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2%;}
.ceo-intro-image {flex: 0 0 28%; max-width: 28%;}
.ceo-intro-image img {width: 100%; height: auto; display: block;}
.ceo-intro-text {flex: 1; text-align: left;}
.ceo-intro-text p {margin: 0; padding: 0;}
.ceo-intro-text .page-heading-sub {margin-top: 1.5rem; margin-bottom: 1rem;}
.ceo-signature {width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; text-align: right; padding: 0 2%;}

@media screen and (max-width: 600px) {
    .ceo-intro-layout {flex-direction: column; align-items: center; gap: 1.5rem;}
    .ceo-intro-image {flex: 0 0 auto; max-width: 280px; width: 80%;}
    .ceo-intro-text {text-align: center;}
    .ceo-signature {text-align: right;}
}

.pages-sdgs-img {max-width: 70%; margin: 0 auto; text-align: center;}
.pages-sdgs-img img {width: 100%;}

.pages-box { display: flex; align-items: stretch; justify-content: flex-start; gap: .5rem 2%; flex-wrap: wrap;padding: 0; }
.pages-box .pages-box-item { flex-basis: 32%; list-style: none; border: 1px solid #ccc; position: relative; }
.pages-box .pages-box-item img {width: 100%;}
.pages-box .title-box {text-align: center;}
.pages-box .title { width: 80%; padding: 1rem; margin: 0 auto; text-align: left; }
.pages-box .title span { line-height: 2rem; text-align: left; display: block; }

.pages-box-low { display: flex; align-items: stretch; justify-content: flex-start; gap: .5rem 2%; flex-wrap: wrap; padding: 0; }
.pages-box-low .pages-box-item { flex-basis: 32%; list-style: none; border: 1px solid #ccc; position: relative; }
.pages-box-low .title-box {text-align: center;}
.pages-box-low .title { width: 80%; padding: 1rem; margin: 0 auto; text-align: left; }
.pages-box-low .title span { line-height: 2rem; text-align: left; display: block; }

.pages-box .title span:first-child, .pages-box-low .title span:first-child {color: #777; font-size: 1.2rem;}
.pages-box .hover, .pages-box-low .hover {display: none; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); margin: auto;}
.pages-box .hover i, .pages-box-low .hover i {font-size: 3rem;}
.pages-box a:hover .hover, .pages-box-low a:hover .hover{display: block;}

.pages-movie {margin: 0 auto; width: 80%; text-align: center;}
.pages-movie iframe {max-width: 100%;}

@media screen and (max-width: 955px){
    .dl-pages-base dt { background-color: #dad9d6; text-align: center; padding: 8px 15px; flex-basis: 100%; }
    .dl-pages-base dd {border: none; flex-basis: 100%;}
    .dl-pages-text { border: 2rem solid #f3f3f3; padding: 1rem;}
    .dl-pages-sub { margin: 0; width: 100%;}
    .dl-pages-sub dt {flex-basis: 36%;}
    .dl-pages-sub dd {flex-basis: 63%;}
    .pages-logo {max-width: 40%;}
    .inquiry-to {display:block}

    .pages-sdgs-img { max-width: 80%; }
	.pages-movie{ display: block; width: 100%; flex-basis:100%;-webkit-flex-basis:100%;max-width:100%; padding-right:0;}
}

@media screen and (max-width: 680px){
    .pages-logo {max-width: 60%;}
    .pages-sdgs-img { max-width: 90%; }
    .pages-box .pages-box-item {
        flex-basis: 49%;
    }
}

@media screen and (max-width: 480px){
    .pages-sdgs-img { max-width: 100%; }
    .pages-box .pages-box-item {
        flex-basis: 100%;
    }
    .pages-box-low .pages-box-item {
        flex-basis: 100%;
    }
}

/*CORPORATE TIMELIME*/
.corporate_tmtimeline {
	margin: 30px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
}

/* The line */
.corporate_tmtimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20%;
    width: 10px;
    background-image: linear-gradient(to top, #439f9d, #439f9d 12px, transparent 5px, transparent 15px);
    background-size: 1px 15px;
    margin-left: -9px;
}

.corporate_tmtimeline > li {
	position: relative;
}

/* The date/time */
.corporate_tmtimeline > li .corporate_tmtime {
	display: block;
	width: 25%;
	padding-right: 100px;
	position: absolute;
    top: .3rem;
}

.corporate_tmtimeline > li .corporate_tmtime span {
	display: block;
    font-weight: 700;
	text-align: right;
    line-height: 2rem;
}

.corporate_tmtimeline > li .corporate_tmtime span:first-child {
	font-size: 0.9em;
	color: #bdd0db;
}

.corporate_tmtimeline > li .corporate_tmtime span:last-child {
	font-size: 2em;
	color: #439f9d;
}

.corporate_tmtimeline > li:nth-child(odd) .corporate_tmtime span:last-child {
	color: #79bfbd;
}

/* Right content */
.corporate_tmtimeline > li .corporate_tmlabel {
    display: inline-block;
	margin: 0 0 15px 25%;
	background: #439f9d;
	color: #fff;
	padding: 2em 4rem;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.4;
	position: relative;
	border-radius: 5px;
}

.corporate_tmtimeline > li:nth-child(odd) .corporate_tmlabel {
	background: #79bfbd;
}

.corporate_tmtimeline > li .corporate_tmlabel h2 {
    color: #fff;
    font-weight: 700;
	margin-top: 0px;
	padding: 0 0 10px 0;
}
.corporate_tmlabel p {
    color: #fff;
    font-weight: 400;
    padding-top: .5rem;
    margin: 0;
}
.corporate_tmtimeline > li .corporate_tmlabel h2 + p {
    border-top: 1px solid rgba(255,255,255,0.4);
}

/* The triangle */
.corporate_tmtimeline > li .corporate_tmlabel:after {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #439f9d;
	border-width: 10px;
	top: 10px;
}

.corporate_tmtimeline > li:nth-child(odd) .corporate_tmlabel:after {
	border-right-color: #79bfbd;
}

/* The icons */
.corporate_tmtimeline > li .corporate_tmicon {
	width: 40px;
	height: 40px;
	font-family: 'ecoico';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 1.4em;
	line-height: 40px;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	color: #fff;
	background: #439f9d;
	border-radius: 50%;
	box-shadow: 0 0 0 8px #79bfbd;
	text-align: center;
	left: 20%;
	top: 0;
	margin: 0 0 0 -25px;
}

@media screen and (max-width: 65.375em) {
	.corporate_tmtimeline > li .corporate_tmtime span:last-child {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 47.2em) {
	.corporate_tmtimeline:before {
        top: 4.5rem;
        left: 0;
        right: 0;
        bottom: 3rem;
        margin: auto;
	}

	.corporate_tmtimeline > li .corporate_tmtime {
		width: 100%;
		position: relative;
		padding: 0 0 20px 0;
	}
    .corporate_tmtimeline > li:nth-child(odd) .corporate_tmtime span:last-child {
        color: #439f9d;
    }
	.corporate_tmtimeline > li .corporate_tmtime span {
        text-align: center;
        background: #fff;
        padding: .8rem;
	}

	.corporate_tmtimeline > li .corporate_tmlabel {
		margin: 0 0 30px 0;
		padding: 1em;
		font-weight: 400;
		font-size: 95%;
        display: block;
	}

	.corporate_tmtimeline > li .corporate_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #439f9d;
		top: -20px;
	}

	.corporate_tmtimeline > li:nth-child(odd) .corporate_tmlabel:after {
		border-right-color: transparent;
		border-bottom-color: #79bfbd;
	}

	.corporate_tmtimeline > li .corporate_tmicon {
        display: none;
	}
}

/*SITEMAP*/
.pages-sitemaps-ul {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}
.pages-sitemaps-ul li {
    list-style: none;
    line-height: 2.5rem;
}
.pages-sitemaps-ul li:before {
    content: "●";
    padding-right: .3rem;
}
.pages-sitemaps-ul ul li:before {
    content: "ー";
}

/*PROPOSAL*/
.pages-proposal-ul {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
}
.pages-proposal-ul li {
    font-size: 1.3rem;
    font-weight: 700;
    list-style: none;
    line-height: 4rem;
    color: #e63e80;
}
.pages-proposal-ul li:before{
    padding-right: 1rem;
    font-family: "Font Awesome 5 Free";
    font-size: 2.2rem;
    font-weight: 900;
    content: "\f863";
    color: #e63e80;
}
.pages-recommendation-ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    width: calc(100% + 1.3%); /*liのmargin-rightと呼応*/
}
.pages-recommendation-ul li {
    flex-basis: 32%;
    list-style: none;
    border: 1px solid #ccc;
    margin-right: 1.3%;
    margin-bottom: 1.3%;
}
.pages-recommendation-ul div {
    padding: .5rem;
    font-size: 1.2rem;
    min-height: 4rem;
}

/*TOP NEWS*/
.topnews{
  background: #eee;
}
.topnews-h4{
    flex-basis:25%;
    -webkit-flex-basis:25%;
    max-width:25%;
  font-size: 21px;
  font-weight: 700;
}
.topnews-h4-smll{
  font-size: 12px;
  letter-spacing: 5px;
  border-top: 1px solid #999;
  margin-top: 10px;
  padding-top: 10px;
}
.topnews-nav{
    flex:1;
    -webkit-flex:1;
}
.topnews-nav-ol{
  border-bottom: 1px solid #999;
  padding-top: 8px !important;
  margin-bottom: 40 !important;
}
.topnews-nav-ol li a{
  position: relative;
  display: inline-block;
  padding:0 0 10px;
  margin: 0 4em 0 0;
}
.topnews-nav-ol li a.active:after{
  position: absolute;
  content: "";
  display: block;
  bottom: -3px;
  width: 100%;
  height: 4px;
  background: #222;
}
.__news-area{
  display: none;
}
#__news-area1{
    display: block;
}
.topnews-list li{
  margin-bottom: 15px !important;
}
.topnews-list li:last-child{
  margin-bottom: 0 !important;
}
.topnews-list span{
  color: #666;
  letter-spacing: 3px;
}
.topnews-next_btn {
  background: #222;
  color: #fff;
  font-weight: 700;
  font-size: 21px;
  position: relative;
}
.topnews-next_btn i {
    position: absolute;
    font-size: 21px;
    color: #fff;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.topnews-next_btn, .topnews-next_btn i {-webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.topnews-next_btn:hover{
  background: #009ce1;
  color: #fff;
}
.topnews-next_btn:hover i {
    color: #fff;
}
@media screen and (max-width: 1380px) {
  .topnews-h4{
    flex-basis:20%;
    -webkit-flex-basis:20%;
    max-width:20%;
  }
  .topnews-nav-ol{
    padding-top: 8px !important;
  }
  .topnews-nav-ol li a{
    margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 1280px) {
  .topnews-nav-ol{
    padding-top: 3px !important;
  }
}
@media screen and (max-width: 780px) {
  .topnews-list span{
    display: block;
  }
}
@media screen and (max-width: 680px) {
  .topnews{
    padding:30px 10px !important;
  }
  .topnews-h4{
    flex-basis:100%;
    -webkit-flex-basis:100%;
    max-width:100%;
    text-align: center;
    margin-bottom: 30px;
  }
  .topnews-h4-smll{
    border-top: none;
    margin-top: 5px;
    padding-top: 0;
  }
  .topnews-nav-ol{
    justify-content:space-between;
    -webkit-justify-content:space-between;
  }
  .topnews-nav-ol li{
    flex-basis:16%;
    -webkit-flex-basis:16%;
    max-width:16%;
    text-align: center;
  }
  .topnews-nav-ol li a{
    margin: 0;
    font-size: 12px;
  }
  .topnews-list{
    margin-bottom: 20px !important;
  }
  .topnews-list span{
    letter-spacing: 5px;
    color: #666;
  }
}


/*ARCHIVE*/
.product-list_search {
    margin-top: -2rem;
}
.product-list_search--input{
  width: 100%;
  border-radius: 20px;
  box-shadow: none;
  border: 1px solid #999;
}
.product-list_search--btn{
  border: none;
  box-shadow: none;
  background: transparent;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.product-list_search--btn i{
  font-size: 24px;
  color: #999;
}
.product-list_search_price_section {
  display: flex;
  justify-content: space-between;
}
.product-list_search_price {
  width: 70%;
}
.product-list_search_price_input {
  display: flex;
  align-items: center;
  width: 100%;
}
#slider {
  padding: 0 16px;
}
.noUi-value.noUi-value-horizontal {
  font-size: small !important;
  color: #AAA;
}
.product-list_search_options {
  display: flex;
  align-items: center;
  row-gap: 1em;
}
.product-list_search_options--select {
  width: 36%;
}
.product-list_search_options--select-small {
    width: 12%;
  }
.product-list_search_options--btn {
  width: 14%;
  height: 48px;
  border: none;
  border-radius: 3px;
  text-align: center;
  font-size: 15px;
  color: #FFF;
  background: #e4007f;
}
.product-list_search_options--btn i {
  color: #FFF;
}
.category-summary-wrap {
    margin: 0 auto 1.6rem;
    max-width: 1000px;
    width: 90%;
}
.category-summary {
    background-color: #eee;
    border-radius: 15px;
    padding: 1rem;
}

.catag{
    flex:1;
    -webkit-flex:1;
}
.catag-a{
    position: relative;
    display: inline-block;
    margin-left: 14px;
    margin-bottom: 5px;
    padding: 6px 12px 6px 5px;
    background: #009ce1;
    border-radius: 0 3px 3px 0;
    font-size: 13px;
    color: #fff;
    text-align: center;
    z-index: 8;
    -webkit-transition: 0s ease-in-out;
    -moz-transition: 0s ease-in-out;
    -o-transition: 0s ease-in-out;
    transition: 0s ease-in-out;
}
.catag-a span{
    padding-left: 2px;
    color: #fff;
    -webkit-transition: 0s ease-in-out;
    -moz-transition: 0s ease-in-out;
    -o-transition: 0s ease-in-out;
    transition: 0s ease-in-out;
}
.catag-a:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0;
    width: 19px;
    height: 19px;
    border-radius: 3px;
    -webkit-transform-origin: left top;
    -webkit-transform: rotate(45deg);
    transform-origin: left top;
    transform: rotate(45deg);
    background: #009ce1;
    z-index: -1;
}
.catag-a:hover,
.catag-a:hover:before{
    background: #e4007f;
    color: #fff;
}
.catag-a:hover span{
    color: #fff;
}
.product-list_sort--dropdown{
    padding: 5px;
    border: 1px solid #999;
    border-radius: 3px;
}
.product-list_li{
    flex-basis:19%;
    -webkit-flex-basis:19%;
    max-width:19%;
    margin-right: 1% !important;
    margin-bottom: 30px !important;
}
.product-list_li_discontinued {
  background-color: #eee;
  flex-basis:19%;
  -webkit-flex-basis:19%;
  max-width:19%;
  margin-right: 1% !important;
  margin-bottom: 30px !important;
}
.product-list_title{
    font-size: 18px;
    font-weight: 700;
}
.product-list_title_discontinued {
  font-size: 16px;
  font-weight: 700;
}
.product-list_p{
    line-height: 1.5rem;
    gap: 4px; /* 価格と「在庫あり」の間に、最低限これだけは空ける（くっつかないように） */
}
.product-list_p--price{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.05; /* 価格が 2 行以上になったときの行間。親（.product-list_p）の 1.5rem より詰める */
}
.product-list_p--price small {
    font-size: 14px;
}
.product-list_li p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* 「在庫あり」アイコンの背景色は #888888 で統一している。
   同じ色を使う箇所：.product-list_p--stock / .newly-li_p--stock /
   .related-li_p--stock, .history-li_p--stock, .bundle-li_p--stock / .oem-product-list-p--stock */
.product-list_p--stock{
    display: inline-block;
    background: #888888;
    font-size: 10px;
    color: #fff;
    list-style: 1em;
    /* 左右の余白は最小限に。右は字間の分だけ空いて見えるので、左より 1px 少なくする */
    padding: 3px 3px 4px 4px;
    border-radius: 3px;
    line-height: 1rem;
    white-space: nowrap;
    /* 横並び（flex）の中では、放っておくと行の高さいっぱいに引き伸ばされる。
       隣の価格が 2 行以上になっても、アイコンの大きさのまま、価格の高さの中央に置く */
    align-self: center;
    flex-shrink: 0;
}
.product-list_p--free-shipping, .post-table_top--free-shipping {
    display: inline-block;
    max-width: 40px;
    border: 1px solid #e4007f;
    font-size: 12px;
    color: #e4007f;
    line-height: 1.1rem;
    padding: 1px 3px 2px;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    border-radius: 3px;
    text-align: center;
}
.product-list_li_next--btn{
    display: block;
    background: #faee00;
    padding-top: 100%;
}
.product-list_li_next--btn span{
    display: block;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #222;
    font-size: 18px;
    font-weight: 700;
}
.product-list_li_next--btn:hover{
    background: #e4007f;
}
.product-list_li_next--btn:hover span{
    color: #fff;
}
.coupon-info p {
  margin-bottom: 0px !important;
}

nav:has(.pagination) {margin-bottom: 100px;}
.pagination {margin: 0; padding: 0; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; flex-wrap: wrap; -webkit-flex-wrap: wrap;}
.pagination li{list-style: none; padding: 0; margin: 0;}
.pagination li span, .pagination li a{width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; flex-flow: column; vertical-align: top; margin-left: 2px;}
.pagination li a {
    background: #009e9d;
    color: #fff;
}
.pagination li a:hover{
    background: #e4007f;
}
.pagination li.current span{background: #ccc; color: #fff;}
.pager-pre span,
.pager-next span,
.pager-pre a,
.pager-next a{
    background: transparent !important;
    font-size: 48px !important;
    color: #ccc !important;
    margin-top: -12px;
    line-height: 0.4em;
}
.pager-pre a:hover,
.pager-next a:hover{
    color: #009e9d !important;
}
.pager-numbers{
    display: inline-block;
    margin-top: -19px;
    padding: 0 5px;
    font-size: 38px;
    color: #ccc
}
@media screen and (max-width: 1680px) {
    .product-list_p--price,
    .product-list_p--price small,
    .product-list_p--stock{
        letter-spacing: 0;
    }
}
@media screen and (max-width: 1480px) {
    .product-list_li,
    .product-list_li_discontinued{
        flex-basis:24%;
        -webkit-flex-basis:24%;
        max-width:24%;
        position: relative;
    }
    .product-list_li:nth-child(15){
        display: block;
    }
    .product-list_title{
        font-size: 16px;
    }
}
@media screen and (max-width: 680px) {
    .product-list_search {
        margin-top: -1rem;
    }
    .product-list_search_options {
        align-items: flex-start;
        row-gap: .5rem;
    }
    .product-list_search_options--select {
        width: 49%;
    }
    .product-list_search_options--select-small {
        width: 42%;
    }
    .product-list_search_options--btn {
        width: 20%;
        margin-left: auto;
    }
    .category-summary-wrap {
        width: 100%;
    }
    .product-list_p {
      position: relative;
    }
    .post-table_bottom .product-list_p--stock{
        margin-left: .5rem;
        border-radius: 3px;
        font-size: 10px;
        opacity: .85;
        z-index: 1;
    }
    .product-list_p--free-shipping, .post-table_top--free-shipping {
        max-width: 30px;
        padding: 1px 1px 2px;
    }
    .product-list_p--price {
        font-size: 16px;
    }
    .catag-a{
        padding: 6px 5px 9px 0px;
        font-size: 11px;
        line-height: 1em;
    }
}
@media screen and (max-width: 780px) {
    .product-list_li{
        flex-basis: 32%;
        -webkit-flex-basis: 32%;
        max-width: 32%;
    }
    .product-list_li:nth-child(15){
        display: none;
    }
}
@media screen and (max-width: 680px) {
    .catag,
    .product-list_sort--dropdown{
        flex-basis: 100%;
        -webkit-flex-basis: 100%;
        max-width: 100%;
    }
    .catag{
        margin-bottom: 10px;
    }
    .product-list_p--stock {padding: 0 3px 2px 4px;}
    .coupon-info {
      display: block !important;
    }
    .alert::before {
      top: 0 !important;
    }
}
@media screen and (max-width: 480px) {
    .product-list_li{
        flex-basis: 49%;
        -webkit-flex-basis: 49%;
        max-width: 49%;
    }
    .product-list_li:nth-child(15){
        display: block;
    }
}

.curriculum-header-banner-ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.3rem 3%; margin: 6rem 0 0 0; padding: 0; }
.curriculum-header-banner-ul li { flex-basis: 38.5%; max-width: 400px; display: flex; align-items: center; flex-direction: column; list-style: none; }
.curriculum-header-banner-ul li .curriculum-header-banner-image { width: 100%; }
.curriculum-header-banner-ul li span { line-height: 1.2rem; color: #555; font-size: .8rem; }

.curriculum-list {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; list-style-type: none;}
.curriculum-list li {width: 32%; margin-bottom: 2%; position: relative; display: block; padding: 0; border: 5px solid #EEE; border-radius: 0 0 25px 0;}
.curriculum-list li::after {content: ""; display: block; position: absolute; right: 0; bottom: -3px; width: 10px; height: 15px; border-left: 5px solid #EEE; border-top: 5px solid #EEE; transform: rotate(10deg);}
.curriculum-list li .link-wrap {display: flex; align-items: center; text-decoration: none;}
.curriculum-list li .link-wrap img {width: 40%; margin-right: 1.5rem; border-right: 1px solid #eee; padding-right: 5px;}
.curriculum-list li span { font-size: 1.1rem; }
.curriculum-list li.nichibun .link-wrap img {background: #f9dfcd;}
.curriculum-list li.kairyudo .link-wrap img {background: #d2eadc;}
.curriculum-list .nichibun,
.curriculum-list .nichibun::after {border-color: #f9dfcd;}
.curriculum-list .nichibun:hover {color: #ff6a00;}
.curriculum-list .kairyudo,
.curriculum-list .kairyudo::after {border-color: #d2eadc;}
.curriculum-list .kairyudo:hover {color: #01913a;}
@media (max-width: 600px) {
    .curriculum-list li {width: 48%; margin-bottom: 4%;}
    .curriculum-header-banner-ul li { flex-basis: 95%; max-width: none; }
    .curriculum-header-banner-ul li span {line-height: 1rem;}
}

/*POST*/
.post-h2, .post-section-hedding{
    font-size: 26px;
    font-weight: 700;
    line-height: 2rem;
}
.post-h2:before, .post-section-hedding:before{
    content: "";
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url(/images/common/title_h2.svg) no-repeat;
    background-size: cover;
    margin-right: 8px;
    vertical-align: -6px;
}
.flexslider{
    position: sticky;
    top: 0;
    border: none;
    margin: 0;
    background: transparent;
}
.flex-control-thumbs li{
    width: 10%;
    padding-right: 5px;
    margin-bottom: 5px;
}
.post-header_img{
    flex-basis:40%;
    -webkit-flex-basis:40%;
}
.post-header_detail{
    flex-basis:56%;
    -webkit-flex-basis:56%;
}
.post-table_top{
  width: 100%;
  border-collapse: collapse;
}
.post-table_top th,
.post-table_top td{
  border-bottom: 1px solid #999;
  padding: 10px 0;
}
.post-table_top th{
  border-top: 1px solid #999;
}
.post-table_top th:nth-child(2),
.post-table_top td:nth-child(2){
  text-align: center;
  background: #eee;
}
.post-table_top td:nth-child(3){
  padding-right: 10px;
  text-align: right;
}
.post-table_top td:last-child{
  width: 130px;
  text-align: right;
}
.post-table_top td:last-child button{
  width: 100%;
  background: #e4007f;
  padding: 5px 0 7px;
  border: none;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  line-height: 1em;
  cursor: pointer;
}
.post-table_top td:last-child button:hover{
  background: #009ce1;
}
.post-tooem{
  background: #009e9d;
  padding: 5px 10px;
}
.post-tooem_p{
  margin: 0;
  font-size: 18px;
  color: #fff;
}
.post-tooem_p:before{
  padding-right: 5px;
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  font-weight: 900;
  content: "\f7d9";
  color: #fff;
}
.post-tooem_a{
    flex-basis:120px;
    -webkit-flex-basis:120px;
    max-width:120px;
  background: #faee00;
  padding: 5px 0 7px;
  border-radius: 3px;
  text-align: center;
  line-height: 1em;
  letter-spacing: 0;
}
.post-tooem_a:hover{
  background: #e4007f;
  color: #fff;
}

.post-head-h2 {color: #217f7d; margin-bottom: .5rem;}
.post-detail-head-title {background: #eee; padding: .5rem; text-align: center;}
.post-detail{
    margin-top: 0;
    border: 1px solid #ccc;
    border-left: 10px solid #ddd;
    line-height: 1.3rem;
    padding: .5rem 1rem;
}
.post-detail + .post-detail {border-top: 0;}
.post-detail a:after {font-family: "Font Awesome 5 Free"; content: '\f360'; color: #e63e80; font-size: 1rem; font-weight: 900; }
.post-detail_h2{font-size: 1.3rem; font-weight: 700;}
.post-detail_h3{font-size: 1.3rem; line-height: 1.8rem; font-weight: 400; text-align: center; margin-bottom: 1.5rem;}
.post-detail_h4{font-size: 1.1rem; line-height: 1.5rem; font-weight: 400;}
.post-detail-box-images, .post-detail-dl { margin: .5rem 0; }
.post-detail-dl { display: flex; align-items: center; border-top: 1px solid #eee; padding-top: .5rem; }
.post-detail-dt { text-align: center; background: #a0d8ea; padding: .5rem; border-radius: 5px; width: 20%; min-width: 95px; margin-right: 1rem; }
.post-detail-dt, .post-detail-dd { margin-bottom: 0; }
.post-detail-box { border-top: 1px solid #eee; padding-top: .5rem; }
.post-detail-box:first-child { border: none; }
.post-detail-box-title { background: #a0d8ea; padding: .5rem; border-radius: 5px; text-align: center; }
.post-detail-box-content { margin: .5rem; }
.post-detail-box-images { text-align: center; max-width: 100%; }
.post-detail-box-images-image, .post-detail-box-images-image { margin-bottom: .5rem; }
.post-detail-box-images-image img { max-height: 300px; }
.post-detail-box-movie {margin: .5rem auto; width: 98%; text-align: center;}
.post-detail-box-movie iframe {max-width: 100%;}

.post-h2_sp{
  display: none;
}
.post-table_bottom{
  width: 100%;
  border-collapse: collapse;
}
.post-table_bottom th,
.post-table_bottom td{
  border-bottom: 1px solid #999;
  padding: 10px 0;
}
.post-table_bottom th{
  border-top: 1px solid #999;
  line-height: 1.3em;
}
.post-table_bottom td:first-child{
  width: 150px;
  padding-right: 10px;
}
.post-table_bottom th:nth-child(3),
.post-table_bottom td:nth-child(3){
  text-align: center;
  background: #eee;
}
.post-table_bottom th:nth-child(5),
.post-table_bottom td:nth-child(5){
  background: #eee;
}
.post-table_bottom td:nth-child(4),
.post-table_bottom td:nth-child(5),
.post-table_bottom td:nth-child(6){
  padding-right: 10px;
  text-align: right;
}
.post-table_bottom td:last-child{
  width: 280px;
  text-align: right;
}
.post-table_bottom td:last-child button{
  display: inline-block;
  width: 130px;
  background: #e4007f;
  padding: 5px 0 7px;
  border: none;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  line-height: 1em;
  cursor: pointer;
}
.post-table_bottom td:last-child button:hover{
  background: #009ce1;
}
.post-footer{
  width: 100%;
}
.post-footer_btob,
.post-footer_tooem{
    flex-basis:49.5%;
    -webkit-flex-basis:49.5%;
    max-width:49.5%;
  background: #009e9d;
  padding: 10px;
}
.post-footer_tooem--p{
  margin: 0;
  font-size: 18px;
  color: #fff;
}
.post-footer_tooem{
  padding: 6px 10px;
}

.post-footer_tooem--btn {
  width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }
@media screen and (max-width: 993px) {
  .post-footer_tooem--btn {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .post-footer_tooem--btn {
    width: 100%;
    flex-wrap: wrap;
  }
}
.post-footer_btob--p{
  flex: 1;
  -webkit-flex: 1;
  margin: 0;
  padding-left: 2em;
  font-size: 16px;
  color: #fff;
  text-indent: -1.5em;
  line-height: 1.3em;
}
.post-footer_tooem--p:before{
  padding-right: 5px;
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  font-weight: 900;
  content: "\f7d9";
  color: #fff;
}
.post-footer_btob--p:before{
  padding-right: 5px;
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  font-weight: 900;
  content: "\f559";
  color: #fff;
  vertical-align: -5px;
}
.post-footer_tooem--a,
.post-footer_btob--a{
    flex-basis:120px;
    -webkit-flex-basis:120px;
    max-width:180px;
  background: #faee00;
  padding: 5px 2px 5px;
  border-radius: 3px;
  text-align: center;
  line-height: 1em;
  letter-spacing: 0;
  word-break: keep-all;
}
.post-footer_tooem--a--l{
  margin-right: 10px;
}

@media screen and (max-width: 767px) {
  .post-footer_tooem--a--l {
    margin-right: 0;
    margin-bottom: 10px;
  }

}
.post-footer_tooem--a:hover,
.post-footer_btob--a:hover{
  background: #e4007f;
  color: #fff;
}
.post-footer--stock {
    background: #eee;
    border-radius: 10px;
    margin: 0 0 0.5rem;
    padding: 0.5rem;
    width: 100%;
}
.post-footer--stock p {
    font-size: .8rem;
    padding: 0;
    margin: 0;
}

/* 商品 旧コンテンツ装飾 */
.old-contents h2, .old-contents h3 {line-height: 1.5rem; margin-top: 3rem; padding-bottom: 0.3rem;}
.old-contents h2 { font-size: 1.3rem; }
.old-contents h3 {border-bottom: 1px solid; font-size: 1.2rem; color: #333;}

@media screen and (max-width: 1480px) {
    .post-detail-box-movie {position: relative; width: 100%; padding-top: 56.25%;}
    .post-detail-box-movie iframe {position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
}

@media screen and (max-width: 1280px) {
    .post-footer_btob--p{
        font-size: 14px;
    }
    .product-list_search_price {
      width: 100%;
    }
}

@media screen and (max-width: 980px) {
    .post-table_bottom td:last-child {
        width: 100px;
    }
    .post-table_bottom td:last-child button{
        width: 100%;
        margin-bottom: 5px;
        font-size: 13px;
    }
    .post-footer_tooem--p,
    .post-footer_btob--p,
    .post-footer_tooem--a,
    .post-footer_btob--a{
        flex-basis:100%;
        -webkit-flex-basis:100%;
        max-width:100%;
    }
    .post-footer_tooem--p,
    .post-footer_btob--p{
        margin-bottom: 10px;
    }
    .post-footer_tooem--p{
        text-align: center;
    }
}
@media screen and (max-width: 780px) {
    .post-h2{
        display: none;
    }
    .post-h2_sp{
        display: block;
    }
    .post-header_img,
    .post-header_detail {
        flex-basis: 100%;
        -webkit-flex-basis: 100%;
        max-width: 100%;
    }
    .post-table_bottom th{
        font-size: 12px;
    }

    .post-footer--stock p {
        font-size: .75rem;
    }
}
@media screen and (max-width: 680px) {
    .post-detail-box-movie {width: 80%;}
    .post-table_bottom table,
    .post-table_bottom tbody{
        display: block;
    }
    .post-table_bottom tr{
        display:flex;
        display:-webkit-flex;
        justify-content:space-between;
        -webkit-justify-content:space-between;
        flex-wrap:wrap;
        -webkit-flex-wrap:wrap;
        margin-bottom: 30px !important;
    }
    .post-table_bottom th{
        display: none;
    }
    .post-table_bottom td{
        padding: 5px 0;
        position: relative;
    }
    .post-table_bottom td:first-child{
        flex-basis:10%;
        -webkit-flex-basis:10%;
        max-width:10%;
        padding: 0;
        border-top: 5px solid #666;
    }
    .post-table_bottom td:nth-child(2),
    .post-table_bottom td:nth-child(3){
        flex-basis:45%;
        -webkit-flex-basis:45%;
        max-width:45%;
        display:flex;
        display:-webkit-flex;
        align-items:center;
        -webkit-align-items:center;
        -webkit-justify-content:center;
        border-top: 5px solid #666;
    }
    .post-table_bottom td:nth-child(2) {padding: 5px 2px;}
    .post-table_bottom td:nth-child(4),
    .post-table_bottom td:nth-child(5),
    .post-table_bottom td:nth-child(6){
        flex-basis:33.3%;
        -webkit-flex-basis:33.3%;
        max-width:33.3%;
    }
    .post-table_bottom td:nth-child(4):before{
        content:"メーカー希望小売価格";
        display: block;
        font-size: 12px;
    }
    .post-table_bottom td:nth-child(5):before{
        content:"非会員価格";
        display: block;
        font-size: 12px;
    }
    .post-table_bottom td:nth-child(6):before{
        content:"会員価格";
        display: block;
        font-size: 12px;
    }
    .post-table_bottom td:last-child{
        flex-basis:100%;
        -webkit-flex-basis:100%;
        max-width:100%;
    }
    .post-table_bottom td:last-child button{
        width: 120px;
        margin: 0 0 0 auto;
    }
}
@media screen and (max-width: 480px) {
    .post-table_top td:last-child {
        width: 90px;
    }
    .post-table_top td:last-child button {
        font-size: 12px;
    }
    .post-table_bottom td:nth-child(4):before,
    .post-table_bottom td:nth-child(5):before,
    .post-table_bottom td:nth-child(6):before{
        font-size: 10px;
    }
    .post-footer_tooem--p{
        font-size: 14px;
    }
    .post-footer_btob--p{
        font-size: 11px;
    }
    .post-footer_tooem--p:before,
    .post-footer_btob--p:before {
        font-size: 16px;
    }
}

/*RELATED HISTORY & PRODUCT BUNDLE*/
.related_wrapper{
    background: #eee;
    padding: 20px !important;
}
/* Fix image sizing in related events */
.related-li img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}
.related-li_title {
    font-size: 18px;
    font-weight: 700;
}
.history-li_title, .bundle-li_title{
    font-size: 14px;
    font-weight: 700;
}
.bundle-li_title .product-list_p--free-shipping {
    margin-top: 2px;
}
.bundle-li {
    position: relative;
    padding-bottom: 1rem !important;
}
.related-li_p,
.history-li_p,
.bundle-li_p {
    line-height: 1em;
    align-items: center;
    justify-content: flex-start;
}
.bundle-li_p {
    margin-bottom: 1rem;
    flex-wrap: nowrap;
}
.related-li_p--price{
    font-size: 18px;
    font-weight: 700;
}
.history-li_p--price,
.bundle-li_p--price {
    font-size: 12px;
    font-weight: 700;
}
.bundle-li_p--price-title {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #009e9d;
    padding: .2rem .3rem .3rem;
    border-radius: 5px;
    margin-right: .3rem;
    white-space: nowrap;
}
.bundle-li_p--price span {
    font-size: 80%;
}
.related-li_p--stock,
.history-li_p--stock,
.bundle-li_p--stock {
    display: inline-block;
    background: #888888;
    font-size: 12px;
    color: #fff;
    list-style: 1em;
    padding: 3px 5px 4px;
    border-radius: 3px;
    margin: 0 0 0 auto; /* 関連商品・ついで買い等で、「価格」が長すぎて「在庫」がカラム落ちした際に右寄せするため */
}
.history-li_p--stock{
    background: #999;
    padding: 2px 4px 3px;
    font-size: 10px;
}
.bundle-li_cart-button-form {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 99999;
}
.bundle-li_cart-button {
    background: #e4007f;
    padding: 0.3rem 0.5rem 0.5rem;
    border: none;
    border-radius: 3px;
    text-align: center;
    color: #fff;
    line-height: 1em;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: all .3s;
}
.bundle-li_cart-button:hover {
    background: #009ce1;
}
.related-next,
.related-prev{
    top: 0;
    width: auto;
    height: 100%;
    background: #eee;;
    margin-top: 0;
    padding: 0 8px;
}
.related-next{
    right: 0;
}
.related-prev{
    left: 0;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 21px;
    color: #444;
}
@media screen and (max-width: 1780px) {
    .history-li_p--price{
        flex-basis:100%;
        -webkit-flex-basis:100%;
        max-width:100%;
        margin-bottom: 5px !important;
    }
    .history-li_p--stock{
        display: inline-block;
        margin: 0 0 0 auto;
    }
}
@media screen and (max-width: 1580px) {
    .related-li_title,
    .related-li_p--price {
        font-size: 16px;
        letter-spacing: 0;
    }
    .related-li_p--price small{
        letter-spacing: 0;
    }
    .related-li_p--stock{
        padding: 2px 4px 3px;
        font-size: 10px;
        letter-spacing: 0;
    }
    .history-li_title{
        margin-bottom: 0 !important;
    }
}
@media screen and (max-width: 1280px) {
    .related-li_title,
    .related-li_p--price {
        font-size: 14px;
    }
}
@media screen and (max-width: 680px) {
    .history-li_title {
        font-size: 12px;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 16px;
    }
    .bundle-li_p {
        flex-wrap: wrap;
    }
}


/*FLEX CHILD*/

/*PC 1 BOX*/
.flex01{
    flex-basis: 100%;
    -webkit-flex-basis: 100%;
    max-width: 100%;
}
/*PC 4 BOX*/
.flex04{
    flex-basis:24%;
    -webkit-flex-basis: 24%;
    max-width:24%;
}
.flex_start_flex04 {
    margin-left: -1.3% !important;
}
.flex_start .flex04 {
    margin-left: 1%;
}

/*FLEX CHILD COMMON*/
.flexbox-li-title{
    width: 100%;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.flexbox-li{
    flex-basis: 32%;
    -webkit-flex-basis: 32%;
    max-width: 32%;
    margin-bottom: 10px !important;
    list-style: none;
    /*
    max-width:32%;
    margin-bottom: 40px !important; */
}
.event_idea_list .flexbox-li{
    flex-basis: 24.25%;
    -webkit-flex-basis: 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px !important;
    list-style: none;
    /*
    max-width:32%;
    margin-bottom: 40px !important; */
}
.flexbox-li_p{
    line-height: 1.4em;
}
.flexbox-li_next{
    width: 100%;
}
.flexbox-li_next--btn{
    padding-top: 48.5%;
    text-align: center;
}
.flexbox-li_next--btn:first-child{
    background: #e4007f;
    margin-bottom: 3%;
}
.flexbox-li_next--btn:last-child{
    background: #009ce1;
}
.flexbox-li_next--btn span{
    display: block;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.flexbox-li_next--btn:hover{
    background: #faee00;
}
.flexbox-li_next--btn:hover span{
    color: #222;
}
@media screen and (max-width: 1680px) {
    .flexbox-li-title{
        font-size: 16px;
    }
}
@media screen and (max-width: 1480px) {
    .event_idea_list .flexbox-li{
        flex-basis: 32.66%;
        -webkit-flex-basis: 32.66%;
        max-width: 32.66%;
    }
    .flexbox-li-title{
        font-size: 15px;
    }
}
@media screen and (max-width: 1280px) {
    .flexbox-li-title{
        font-size: 14px;
        letter-spacing: 0;
    }
    .flexbox-li_next--btn span {
        font-size: 18px;
    }
    /* これ何のため？イベントリストの５つ目でおかしくなる */
    /* .flexbox-li:nth-child(5){
        display: block;
    } */
}
@media screen and (max-width: 680px) {
    .flex_start .flex04 {
        flex-basis: 49% !important;
        -webkit-flex-basis: 49% !important;
        max-width: 49% !important;
        margin-left: 1% !important;
    }
    .flex_start .flex04:nth-child(even) {
        margin-left: 1.3%;
    }
    .flex_start .flex04:nth-child(odd) {
        margin-left: 0;
    }

    /* Fix decorative elements overlapping text on mobile */
    .spikes-bf::before, .spikes-af::after {
        z-index: -1 !important;
        /* height: 25px !important; */
    }
    .flexbox-li {
        flex-basis: 99%;
        -webkit-flex-basis: 99%;
        max-width: 99%;
    }
    .event_idea_list .flexbox-li {
      flex-basis: 49% !important;
      -webkit-flex-basis: 49% !important;
      max-width: 49% !important;
      margin-bottom: 10px !important;
    }
    .flexbox-li:nth-child(odd){
        margin-left: 0 !important;
    }
    .flexbox-li-title{
        font-size: 13px;
    }
    .flexbox-li_p{
        font-size: 12px;
        list-style: none;
    }
    .flexbox-li_next--btn span {
        font-size: 16px;
    }
    .sp-100p {
        flex-basis:100%;
        -webkit-flex-basis:100%;
        max-width:100%;
    }
}

/* wysiwyg 装飾 */
.wysiwyg-content h2 { font-size: 28px; font-weight: 700; line-height: 2.2rem; position: relative; } /* .page-heading と同じ */
.wysiwyg-content h2:after { content: ""; display: block; width: 100%; height: 5px; background: url(/images/common/line.svg) repeat-x; background-size: contain; margin: 10px 0; }
.wysiwyg-content h3 {font-size: 24px; font-weight: 700; line-height: 2.3rem;} /* .post-h2, .post-section-hedding と同じ */
.wysiwyg-content h3:before { content: ""; display: inline-block; width: 34px; height: 34px; background: url(/images/common/title_h2.svg) no-repeat; background-size: cover; margin-right: 8px; vertical-align: -6px; }
.wysiwyg-content h4 { font-size: 20px; display: inline-block; font-weight: 700; border-bottom: 5px dotted #e4007f; padding: 0 0 5px 0; margin-bottom: 2rem; line-height: 1.4em; }
.wysiwyg-content strong {font-size: 1.05rem;}
.wysiwyg-content a, .wysiwyg-content a strong {color: #009ce1;}
.wysiwyg-content a:hover, .wysiwyg-content a strong:hover {color: #e4007f;}
.wysiwyg-content ol li, .wysiwyg-content ul li {color: #222;}
.wysiwyg-content ol {list-style: none; counter-reset: li; padding: 0; margin: .8rem 0;}
.wysiwyg-content ol li:not(:first-child), .wysiwyg-content ul li:not(:first-child) {line-height: 1.6rem; margin-top: 0.5em;}
.wysiwyg-content ol li {position: relative; padding-left: 2.1em;}
.wysiwyg-content ol li:not(:first-child) { margin-top: 0.5rem; }
.wysiwyg-content ol li:before {
    counter-increment: li;
    content: counter(li);
    position: absolute;
    left: 0;
    top: 2px;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #009e9d;
    font-size: 11px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-family: 'Verdana';
}
.wysiwyg-content ul {padding-left: 1.5rem; margin: .8rem 0;}
.wysiwyg-content ul li::marker {color: #009e9d;}

/*HR 装飾*/
.spikes-bf, .spikes-af {position: relative;}
.spikes-bf::before, .spikes-af::after {content: ''; position: absolute; right: 0; left: -0%; z-index: 10; display: block; height: 50px; background-size: 50px 100%; background-position: 0 0;}
.spikes-bf.bg-blue-light::before {bottom: 100%; background-image: linear-gradient( 45deg , #90d8ef 25%, transparent 25%), linear-gradient( 315deg , #90d8ef 25%, transparent 25%);}
.spikes-af.bg-blue-light::after {top: 100%; background-image: linear-gradient(135deg, #90d8ef 25%, transparent 25%), linear-gradient(225deg, #90d8ef 25%, transparent 25%);}
.spikes-bf.bg-pink-light::before {bottom: 100%; background-image: linear-gradient( 45deg , #f6becf 25%, transparent 25%), linear-gradient( 315deg , #f6becf 25%, transparent 25%);}
.spikes-af.bg-pink-light::after {top: 100%; background-image: linear-gradient(135deg, #f6becf 25%, transparent 25%), linear-gradient(225deg, #f6becf 25%, transparent 25%);}

.semicircle-bf {position: relative; min-height: 10.5vh; margin-top: 100px;}
.semicircle-bf::before {position: absolute; content: ''; left: 50%; z-index: 10; width: 100px; height: 100px; border-radius: 50%; background: inherit; transform: translateX(-50%) translateY(-50%); top: -10px; }
.semicircle-af {position: relative; min-height: 10.5vh; margin-bottom: 100px;}
.semicircle-af::before {position: absolute; content: ''; left: 50%; z-index: 10; width: 100px; height: 100px; border-radius: 50%; background: inherit; transform: translateX(-50%) translateY(50%); bottom: -10px;}

@media screen and (max-width: 680px) {
    .semicircle-bf::before, .semicircle-af::before {
        z-index: -1 !important;
        width: 50px !important;
        height: 50px !important;
    }

    .semicircle-bf, .semicircle-af {
        margin-top: 40px !important;
        margin-bottom: 30px !important;
        min-height: 5vh !important;
    }
}

.legoblock-bf{position: relative; padding: 2.5em 0;}
.legoblock-bf:before {position: absolute; content: ''; pointer-events: none; width: 100%; height: 30px; background-size: 80px 100%; top: 0;}
.legoblock-bf.bg-pink-light:before{background-image: -webkit-linear-gradient( 45deg , #f6becf 50%, #fff 50%); background-image: linear-gradient( 45deg , #f6becf 50%, #ffffff 50%);}

.legoblock-af{position: relative; padding: 2.5em 0;}
.legoblock-af:before {position: absolute; content: ''; pointer-events: none; width: 100%; height: 30px; background-size: 80px 100%; bottom: 0;}
.legoblock-af.bg-pink-light:before{background-image: -webkit-linear-gradient( 135deg , #f6becf 50%, #fff 50%); background-image: linear-gradient( 135deg , #f6becf 50%, #ffffff 50%);}

.legoblock2-bf{position: relative; padding: 2.5em 0;}
.legoblock2-bf:before {position: absolute; content: ''; pointer-events: none; width: 100%; height: 30px; background-size: 80px 100%; top: 0; background-image: -webkit-linear-gradient( 40deg , #f6becf 50%, #fff 50%); background-image: linear-gradient( 40deg , #f6becf 50%, #ffffff 50%);}
.legoblock2-af{position: relative; padding: 2.5em 0;}
.legoblock2-af:before {position: absolute; content: ''; pointer-events: none; width: 100%; height: 30px; background-size: 80px 100%; bottom: 0; background-image: -webkit-linear-gradient( 135deg , #f6becf 50%, #fff 50%); background-image: linear-gradient( 135deg , #f6becf 50%, #ffffff 50%);}

.curved-af {position: relative; height: 80px;}
.curved-af::after {content: ''; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; position: absolute; bottom: 0; width: 100%; background: #fff; height: 50%;}
.curved-bf {position: relative; min-height: 10px; margin-top: 60px !important;}
.curved-bf.bg-yellow::before {content: ''; border-top-left-radius: 50% 70%; border-top-right-radius: 50% 70%; position: absolute; top: -50px; left: 0; width: 100%; background: #fecf1d !important; height: 75px;}

.skewed-bf {position: relative; height: 5rem;}
.skewed-bf div {position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: 0; transform: skewY( 2deg ); transform-origin: top left;}
.skewed-af {position: relative; height: 13vh;}
.skewed-af div {position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: 0; transform: skewY( -2deg ); transform-origin: top left;}
.skewed-bf.bg-navy div, .skewed-af.bg-navy div{background: #2c3e50; }

.stitch {position: relative; height: 5rem;}
.stitch:before {content: ""; position: absolute; left: 1%; top: 9px; width: 98%; height: 2px; background: linear-gradient( 90deg , rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 50%, transparent 50%, transparent 100%); background-size: 15px 4px;}
.stitch:after {content: ""; position: absolute; left: 1%; bottom: 9px; width: 98%; height: 2px; background: linear-gradient( 90deg , rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 50%, transparent 50%, transparent 100%); background-size: 15px 4px;}

/*カテゴリ*/
.category-list li {display: inline-block; margin: 5px 2px 0 !important;}
.category-list li a {display: inline-block; border-radius: 10px; padding: 5px 10px 7px !important; line-height: 1em; font-size: 12px; font-weight: 500; color: #444;}
.category-list li a:hover {color: #222; background: #389ce1 !important;}

/* 関連カテゴリ（小表示） */
.related_category_list {display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; margin-bottom: 0.5rem;}
.related_category_list .related_category_list--title {font-size: 12px; margin-right: 10px; white-space: nowrap;}
.related_category_list .category-list li {margin: 0 !important;}
.category-list li a.category-list--larger {margin: 2px 2px 2px 0; padding: 7px 12px 9px !important; font-size: 16px;}
.category-list li a.category-list--smaller {padding: 4px 8px 5px !important; font-size: 11px;}

.post-header .category-list li a {background-color: #fecf1d;}

/*SIGNIN*/
.signin-header {margin: 1rem 0;}
.signin-row {display: flex; align-items: stretch;}
.signin-row-label, .signin-row-input {display: flex; align-items: center; padding: 1rem;}
.signin-row-label {background: #f9cc48; width: 30%; min-width: 30%; margin-bottom: 5px;}
.signin-row-input {flex-wrap: wrap;}

/*EVENT*/
.event-list li {box-shadow: 1px 1px 3px rgb(0 0 0 / 10%);}
.event-list-title {background-color: #009ce1; transition: all .5s;}
.event-list li:hover .event-list-title {background-color: #e4007f;}

/* Special*/
.event-list--special .event-list--special-img-wrap { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; line-height: 0; background: #f5f5f5; }
.event-list--special .event-list--special-img-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.event-list--special .event-list--special-img-wrap .expand-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.event-list--special .event-list-title--below { display: block !important; width: 100%; height: calc(2.8em + 20px) !important; padding: 10px; margin: 0 !important; box-sizing: border-box; overflow: hidden !important; }
.event-list--special .event-list-title--below-inner { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: break-word; line-height: 1.4; color: inherit; font-size: inherit; font-weight: inherit; }
@media screen and (max-width: 680px) { .event-list--special .event-list-title--below { height: calc(4.2em + 20px) !important; } .event-list--special .event-list-title--below-inner { -webkit-line-clamp: 3 !important; line-clamp: 3 !important; } }

.event-list li:before, .event-list li:after {content: ""; display: block; width: 100%; height: 100%; border: 1px solid #ddd; background: #fff; border-radius: 2px; box-shadow: 1px 1px 3px rgb(0 0 0 / 10%); position: absolute; left: 0; top: 0; z-index: -1; visibility: hidden; transition: all .3s;}
.event-list li:nth-child(odd):before {-webkit-transform: rotate( -3deg ); transform: rotate( -3deg );}
/* .event-list li:nth-child(odd):after {-webkit-transform: rotate( 2deg ); transform: rotate( 2deg );} */
.event-list li:nth-child(even):before {-webkit-transform: rotate( 3deg ); transform: rotate( 3deg );}
/* .event-list li:nth-child(even):after {-webkit-transform: rotate( -2deg ); transform: rotate( -2deg );} */
.event-list li:hover:before, .event-list li:hover:after { visibility: visible; }
.event-list li img {border: 1px solid #ddd; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.event-list li:hover img {opacity: .6;}
.event-list-post{display: flex; flex-wrap: nowrap; align-items: center;}
.border-box {border: 1px solid #ddd;}
/* .event-list-post-img:before{content: ''; position: absolute; z-index: 2; top: 8px; right: 8px; bottom: 8px; left: 8px; border: solid 1px #fff;} */
.event-list-post-img img{width: 100%; height: 100%;}
.event-list-post-content{flex: 1; color: #292929; font-size: 1.2rem; position: relative; padding: 1.5rem 1.5rem .8rem; overflow: hidden; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; display: flex; flex-direction: column; justify-content: space-between;}
/* .event-list-post-content:before{content: ""; width: 100%; z-index: -1; position: absolute; top: 0px; bottom: 0px; left: -12px; transform: skewX(5deg); background: #fffrgb(249, 249, 249); border-left: 1px solid rgb(222, 222, 222);} */
/* .event-list-post:hover .event-list-post-content-time-wrap p{background: #fff; color: #50bbb9;} */
.event-list-post:hover{opacity: .8;}
.event-list-post-content-title{font-size: 1.5rem; font-weight: 700; line-height: 1.5rem; width: 77%; padding-bottom: 1.5rem;}
.event-list-post-content-title.no-time-icon {width: 100%;}
/* 所要時間の丸は、カードの文章欄の右上に固定する（タイトルは幅 77% で、その右の空きに入る）。
   TANO-420 でイベント詳細の指定と一緒に消えていたので戻した */
.event-list-post-content-time-wrap {position: absolute; top: 0; right: 0; margin: 5px;}
/* 所要時間の丸を、タイトルと上下中央にそろえる（タイトルが 1 行でも 2 行でも）。
   タイトルと丸を同じ行に並べ、説明文をその下に置く。丸のあるカードだけに効かせる。
   :has() が使えない古いブラウザでは、上の「右上に固定」のままになる */
@media screen and (min-width: 681px) {
    .event-list-post-content:has(> .event-list-post-content-time-wrap) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto 1fr;
        /* タイトルは丸のすぐ手前まで伸ばす。横の間隔は最小限にする */
        gap: 1rem 6px;
    }
    .event-list-post-content:has(> .event-list-post-content-time-wrap) > .event-list-post-content-title {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        width: 100%;
        padding-bottom: 0;
    }
    .event-list-post-content:has(> .event-list-post-content-time-wrap) > .event-list-post-content-time-wrap {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        position: static;
        /* カードの右の余白（1.5rem）に食い込ませて、丸を右端へ寄せる。その分、タイトルの欄が広がる */
        margin: 0 -1rem 0 0;
    }
    .event-list-post-content:has(> .event-list-post-content-time-wrap) > .event-list-post-content-summary {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .event-list-post-content:has(> .event-list-post-content-time-wrap) .event-list-post-content-time {
        margin: 0;
    }
}
.sm-event-list-post-content-time-wrap { display: none; }
.event-list-post-content-time, .event-single-post-icon-icon{font-size: .9rem; color: #fff; text-align: center; line-height: 1rem; padding: .7rem 0; width: 70px; height: 70px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.event-list-post-content-time {width: 65px; height: 65px;}
.event-single-post-icon-icon{font-size: .85rem;}
.event-list-post-content-time > .post-icon-lead, .event-single-post-icon-icon > .post-icon-lead {font-size: .8rem; color: inherit; letter-spacing: .005rem; margin-bottom: 0.15rem;}
a.event-list-post:hover .event-list-post-content-title {color: #e4007f !important;}
a.event-list-post:hover .event-list-post-content-time > .post-icon-lead{color: #fff;}
a.event-list-post:hover .event-list-post-content span:nth-child(2) {color: inherit;}
.event-list-post-content-summary{line-height: 1.4rem; /* max-height: 9rem; */ overflow: hidden; margin: 0;}
.event-list-post--content-footer-wrap { display: flex; flex-direction: column; width: 100%; padding: 0 .8rem .8rem; }
.event-list-post-content-tools, .event-list-post-content-target-age, .event-list-post-content-price {width: 100%; overflow: hidden; text-overflow: ellipsis; background-color: #fff; margin: .3rem 0 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;}
/* .event-list-post-content-tools span{width: 70%; color: #065a90;} */
.event-list-post-content-tools span {white-space: pre-wrap; line-height: 1.3;}
.event-list-post-content-tools span:first-child,
.event-list-post-content-target-age span:first-child,
.event-list-post-content-price span:first-child {
    width: 30%;
    min-width: 30%;
    flex-basis: 30%;
    font-size: .9rem;
    color: #fff;
    padding: 5px;
    border-radius: 15px;
    text-align: center;
    margin-right: 10px;
    line-height: 1.2rem;
}

.event_idea_list {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    gap: 1%;
    margin: 0;
    padding: 0;
}
.event_idea_list .event-list-post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    /*クラシック*/
    .event-single-post-classic { max-width: 780px; margin: 0 auto; }
    .event-single-post-classic img {margin: .5rem auto;}
    .event-single-post-classic h3 {margin: 2.5rem auto 0}

.event-single-post-header {min-height: 1px;}
.event-single-post-howto-make-image, .event-single-post-movie{margin-bottom: 50px;}
.event-single-post-movie, .event-single-post-movie iframe {width: 100%;}
.event-single-post-note {margin-top: 1rem;}
.event-single-post-box { color: #777777; background-color: #fff; border: 4px solid #f6bfbc; border-radius: 3.5em 4.8em 7em 1.7em/0.9em 1.5em 1.8em 4.3em; margin: 3rem 40px 1rem 120px !important; padding: 2em; max-width: 90%; position: relative; }
.event-single-post-box-images {display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 0 -1%;}
.event-single-post-box-images-image {margin-bottom: 1rem;}
.event-single-post-box-images > * {padding: 0 0 0 1%; flex-grow: 0;}
.flex-width-20p > * {flex-basis: 20%;}
.flex-width-25p > * {flex-basis: 25%;}
.flex-width-33p > * {flex-basis: 33%;}
.flex-width-50p > * {flex-basis: 50%;}
.flex-width-100p > * {flex-basis: 100%;}
.image-fb-48p { flex-basis: 48%; }
.image-fb-100p { flex-basis: 100%; }

.event-single-post-main { display: flex; align-items: center; justify-content: space-around; padding: 2rem; }
.event-single-post-main-img {text-align: center; max-width: 500px; position: relative; }
/* .event-single-post-main-img:before { content: ''; position: absolute; z-index: 999; top: 8px; right: 8px; bottom: 8px; left: 8px; border: solid 1px #fff; } */
.event-single-post-main-img img {max-height: 350px;}
.event-single-post-heading{padding-left: 3.5rem; text-indent: -3.5rem; line-height: 2.3rem;}
.event-single-post .indent, .event-single-post .indent{padding-left: 120px; padding-right: 40px;}
.event-single-post-summary { padding: 1rem 0 0 1rem; flex-basis: 60%; }
.event-single-post-time{font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #0b6f6e;}
.event-p-default {font-size: 1.2rem !important;}

.event-single-post-icon-wrap {display: flex; justify-content: flex-end; margin: 1rem 0;}
.event-single-post-icon {max-width: 40%; display: flex; flex-wrap: wrap; justify-content: flex-end;}
.event-single-post-icon .icon-auto {border-radius: 50%;}
.event-single-post-icon-time-note { flex-basis: 100%; text-align: right; font-size: .92rem; font-weight: 400; }
.event-single-post-tools {max-width: 60%;}

.event-single-post-related-table-wrap {padding: 40px 30px;}
.event-single-post-related-table {width: 100%; border-collapse: collapse;}
.event-single-post-related-table th{color: #461e2a; font-weight: 700; text-shadow: 0 0 #fff; border-top: 1px solid #ffeaf0; border-bottom: 1px solid #ffeaf0; line-height: 1.3em;}
.event-single-post-related-table td{padding: 10px 5px; padding-left: 0; border-bottom: 1px solid #ffeaf0; position: relative;}
.event-single-post-related-table .expand-link:hover{}
.event-single-post-related-table .related-img{width: 10%;}
.event-single-post-related-table .related-title{width: 20%;}
.event-single-post-related-table .related-code{width: 8%;}
.event-single-post-related-table .related-img:hover, .event-single-post-related-table .related-title:hover, .event-single-post-related-table .related-code:hover {color: #e4007f !important;}
.event-single-post-related-table .related-price{width: 13%;}
.event-single-post-related-table .related-price span{margin-right: -8px; font-size: .9em;}
.event-single-post-related-table .related-price span:before{content: "\A"; white-space: pre;}
.event-single-post-related-table .related-button button{color: #fff; font-weight: 500; margin: 5px auto; padding: 7px 12px; cursor: pointer; border: 1px solid transparent; border-radius: 5px; transition: all .3s ease 0s !important;}
.event-single-post-related-table .related-button button:hover{background-color: #fecf1d !important; color: #222;}
.event-single-post-related-table td.prelative:hover{opacity: .6;}

.event-spec {display: flex; background:#fbd94b; padding: 30px !important; }
.event-spec .title {background-color: #fbd94b; padding: .8rem 1rem; margin: 0 0 1rem; text-align: center; color: #fff; font-size: 1.3rem;}
.event-spec-text { margin-right: 1rem; font-size: 1.1rem;}
.event-spec-text + .event-spec-text {border-top: 1px solid #ccc;}
.event-image-box{flex-basis:40%; -webkit-flex-basis:40%; max-width:480px;}
.event-spec-image { width: 100%; max-width: 100%;}
.event-spec-box{ flex:1; -webkit-flex:1; margin-left: 30px; background: #fff; padding: 30px; }
.event-spec-images { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.event-spec-images-image {margin-right: .5rem; margin-bottom: .8rem;}

.event-howto{border: none; background: #eee; padding: 20px !important; margin: 0 0 20px 0 !important; border-left: 10px solid #009d9c;}
.event-howto:first-child{ margin-top: 0; border-top: none;}
.event-howto-title{font-size: 18px; font-weight: 700; color: #009d9c; padding: 0 0 0 1.2em; text-indent: -1.2em; line-height: 1.3em; margin-bottom: 10px; }
.event-howto-title:before{ content: "★"; color: #009d9c; font-size: 21px;}
.event-howto-image { margin: 10px 0; display: block; max-width: 100%; }

.event-howto-image, .event-single-post-box-images-image img { max-height: 500px; }
.pc-none {
  display: none;
}

@media screen and (max-width: 1480px){
	.event-spec-text{ font-size: 16px; }
}
@media screen and (max-width: 1280px){
	.event-spec-text{ font-size: 14px; }
    .event-list-post-content {padding: .8rem;}
    .event-list-post-content-tools span:first-child,
    .event-list-post-content-target-age span:first-child,
    .event-list-post-content-price span:first-child {
        font-size: .75rem;
    }
    .event-list-post-content-tools span:nth-child(2),
    .event-list-post-content-target-age span:nth-child(2),
    .event-list-post-content-price span:nth-child(2) {
        font-size: .9rem;
    }
    .event-single-post .indent, .event-single-post .indent{padding-left: 60px; padding-right: 20px;}
}
@media screen and (max-width: 980px) {
    .event-single-post-box { max-width: 100%; margin: 3rem 1rem 1rem !important; }
    .image-fb-48p {flex-basis: 100%;}
    .event-single-post-icon {max-width: 100%; justify-content: flex-end; align-items: center; margin: 1.5rem 0 0;}
    .event-single-post-icon-icon { font-size: .9rem; margin-right: 5px; }
    .event-single-post-icon-icon > .post-icon-lead {font-size: .9rem;}
    .event-single-post-icon-time-note {flex-basis: 100%;}
}
@media screen and (max-width: 680px){
    .event-list-post{flex-wrap: wrap;}
    .event-list-post-content-title{width: 100%; line-height: 1.5rem; padding-bottom: .1rem;}
    /* スマホではタイトルが幅いっぱいになるので、右上には重ねず、これまでどおり文章の下に置く */
    .event-list-post-content-time-wrap {position: static; margin: 0;}
    .event-list-post-content{padding: 3% 3% 0 3%;}
    /* 下の欄（対象年齢・１人あたり・必要な道具）の左右の余白を、上の文章欄（3%）とそろえる */
    .event-list-post--content-footer-wrap {padding: 0 3% .8rem;}
    .event-list-post-content h3 {font-size: 1rem;}
    .event-list-post-content-tools span:first-child,
    .event-list-post-content-target-age span:first-child,
    .event-list-post-content-price span:first-child{position: relative; left: 0; bottom: 0; flex-wrap: wrap; justify-content: flex-start; text-overflow: unset; white-space: pre-wrap; margin-top: 0; margin-bottom: .5rem;}
    .event-list-post-content-tools span, .event-list-post-content-target-age span, .event-list-post-content-price span { width: 100%;}
    .event-list-post-content-tools span:first-child, .event-list-post-content-target-age span:first-child {font-size: .85rem; flex-basis: 90px; padding: 2px; margin: 0 0 .5rem;}
    .event-list-post-content-tools span:first-child:after, .event-list-post-content-target-age span:first-child:after {content: "\A"; white-space: pre ;}
    .event-list-post-img {position: relative;}
    .sm-event-list-post-content-time-wrap { position: absolute; display: block; bottom: .3rem; right: .3rem;}
    .sm-event-list-post-content-time-wrap{margin: 5px; z-index: 99;}
    .sm-event-list-post-content-time-wrap p{font-size: .8rem; margin-block-start: 0; margin-block-end: 0;}
    .event-list-post-content-time > .post-icon-lead{font-size: .6rem;}
    .event-list-post-content-time {width: 54px; height: 54px; line-height: 0.8rem; box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.3);}

    .event-single-post-main {flex-direction: column; padding: 2rem 1rem;}
    .event-single-post-summary { padding: 1rem 3% 0; }
    .event-single-post-movie {position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;}
    .event-single-post-movie iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}

    .event-single-post .indent, .event-single-post .indent{padding: 0;}
    .event-single-post-tools {max-width: 100%;}
    .event-single-post-related-table-wrap {padding: 0 20px;}
    .event-single-post-related-table tr{display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin-bottom: 30px !important;}
    .event-single-post-related-table th{display: none;}
    .event-single-post-related-table td{padding: 5px 0; border-bottom: 1px solid #ffeaf0; word-break: break-all;}
    .event-single-post-related-table .related-img,
    .event-single-post-related-table .related-code,
    .event-single-post-related-table .related-title{border-top: 5px solid #f7f7f7; padding-left: 5px;}
    .event-single-post-related-table .related-code,
    .event-single-post-related-table .related-title{display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; -webkit-justify-content: center;}
    .event-single-post-related-table .related-img{width: 33.3%; flex-basis: 33.3%; -webkit-flex-basis: 33.3%; max-width: 33.3%; padding: 0;}
    .event-single-post-related-table .related-img img{border-right: 1px solid #fff;}
    .event-single-post-related-table .related-code{position: absolute; top: 0; left: calc(33.3% + 5px); width: auto; justify-content: flex-start; -webkit-justify-content: flex-start; border-color: transparent;}
    .event-single-post-related-table .related-code:before {content: "品番: "; font-size: 10px; margin-right: 5px;}
    .event-single-post-related-table .related-title{flex-basis: 66.7%; -webkit-flex-basis: 66.7%; max-width: 66.7%; padding-top: 1.5rem;}
    .event-single-post-related-table .related-price{flex-basis: 33.3%; -webkit-flex-basis: 33.3%; max-width: 33.3%;}
    .event-single-post-related-table .maker_price:before{content: "メーカー希望小売価格"; display: block; font-size: 10px;}
    .event-single-post-related-table .member_price:before{content: "会員価格"; display: block; font-size: 10px;}
    .event-single-post-related-table .regular_price:before{content: "非会員価格"; display: block; font-size: 10px;}
    .event-single-post-related-table .related-button{flex-basis: 100%; -webkit-flex-basis: 100%; max-width: 100%; width: 100px; text-align: right;}
    .event-single-post-related-table .related-button button{border: 1px solid #fff;}

    .event-list-post-content-title {font-size: 1.1rem; width: 100%; padding-left: 0;}
    .event-list-post-content-tools, .event-list-post-content-target-age, .event-list-post-content-price {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: #fff;
        margin: 0.3rem 0 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    .event-list-post-content-tools,
    .event-list-post-content-target-age,
    .event-list-post-content-price {
      flex-direction: column !important;
      text-align: left;
    }
    .event-list-post-content-tools span:first-child,
    .event-list-post-content-target-age span:first-child,
    .event-list-post-content-price span:first-child {
      /* ラベル（対象年齢・１人あたり・必要な道具）は、横幅いっぱいにせず、文字の分だけの幅にして左に置く */
      width: auto;
      min-width: 0;
      flex-basis: auto;
      align-self: flex-start;
      font-size: .65rem;
      color: #fff;
      padding: 3px 7px;
      text-align: center !important;
      line-height: 1.2rem;
  }
  .event-list-post-content-tools span:nth-child(2),
  .event-list-post-content-target-age span:nth-child(2),
  .event-list-post-content-price span:nth-child(2) {
    font-size: .7rem;
    line-height: 1.1em;
}
    /* 対象年齢・１人あたりは値が短いので、ラベルと値を 1 行に並べる。
       必要な道具は値が長くなることがあるので、ラベルの下に値を置くまま */
    .event-list-post-content-target-age,
    .event-list-post-content-price {
      flex-direction: row !important;
      align-items: center;
      gap: 5px;
    }
    .event-list-post-content-target-age span:first-child,
    .event-list-post-content-price span:first-child {
      flex: 0 0 auto;
      align-self: center;
      margin: 0;
    }
    /* ラベルの後ろに入れてある改行を、1 行に並べるときは外す */
    .event-list-post-content-target-age span:first-child:after {
      content: none;
    }
    .event-list-post-content-target-age span:nth-child(2),
    .event-list-post-content-price span:nth-child(2) {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
    }
    /* 必要な道具の値は、ラベルの下で少し右へ下げて書き出す */
    .event-list-post-content-tools span:nth-child(2) {
      padding-left: 8px;
      box-sizing: border-box;
    }
    .event-spec { flex-direction: column; }
    .event-spec-text { margin-right: 0; }
    .event-spec-image { max-width: 95%; margin: 0 auto; }

	.event-spec-box{ margin: 30px 0 0 0;}
	.event-spec-image {width: 100%; max-width: 100%;}

  .event_idea_list .event-list-post {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.event-list-post-content-tools > span:first-child {
  margin-bottom: .3rem !important;
}
.event-list-post-content-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.2rem;
  max-height: calc(1.2rem * 2);
  margin-bottom: 0;
  font-size: .8rem;
}
.sm-none {
  display: none;
}
.pc-none {
  display: block;
}
.event-list-detail {
  margin-top: auto;
  width: 100%;
}
/* スマホでも、対象年齢などの欄をカードの下にそろえる（PC と同じ）。
   隣のカードとタイトルや説明文の行数が違っても、この欄と下のボタンの位置が横でそろう。
   余った高さは、この欄の上に集める（ボタン側の margin-top: auto と半分ずつにならないよう、ボタン側は 0 にする） */
.event_idea_list .event-list-post--content-footer-wrap {
  margin-top: auto;
}
.event_idea_list .event-list-post--content-footer-wrap + .event-list-detail {
  margin-top: 0;
}
.event-list-detail-button {
  width: 100%;
  color: white;
  padding: .8rem 0;
  border: none;
}
.event-list-post-content-price span:first-child {
  margin-right: 0;
}
}
@media screen and (max-width: 480px){
	.event-spec{ padding: 20px !important;}
	.event-spec-box{ margin: 20px 0 0 0; padding: 20px !important;}
}

/*NEWS*/
.news-list {padding: 0;}

.news-list-li {position: relative; display: flex; margin: 0 0 20px; padding: 10px; border-top: 1px solid rgb(229, 229, 229); background: rgb(255, 255, 255);}
.news-list-li:hover .news-list-box {opacity: .7;}
.news-list-li:hover .news-list-readmore {opacity: 1;}

.news-list-date i, .news-list-date time, .news-date i, .news-date time {color: #444;}
.news-list-category {color: rgb(255, 255, 255); font-size: 0.9em; text-align: center; width: 9%; min-width: 80px; background: gray; padding: 8px 6px 8px 8px; margin-right: 1rem; display: flex; align-items: center; justify-content: center; transition: all .5s ease 0s !important; z-index: 99; position: relative;}
.news-list-category:before {display: block; content: ''; padding-top: 100%;}
.news-list-category:hover {filter: saturate(200%) brightness(150%);}/*hue-rotate(90deg)*/
.news-list-category:hover i {display: block;}
.news-list-category i {color: #fff; position: absolute; bottom: 5px; right: 5px; display: none;}
.news-list-category a{z-index: 999;}
.news-list-li-box {padding: 0 15px 0 0; overflow: hidden;}
.news-list-title {color: rgb(2, 20, 31); font-size: 1.15rem; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; margin: 5px 5px 15px 0px;}
.news-list-readmore {font-size: 0.9em; font-weight: 400; position: absolute; right: 10px; bottom: 10px; border: 1px solid #fff; box-shadow: 0 0 10px 12px #fff; margin: 0px auto; padding: 8px 10px 8px 16px; border-radius: 4px; animation: 1.1s ease 0s 1 normal none running anime1; transition: all 0.5s ease-in-out 0s; opacity: 0;}
.news-list-readmore, .news-list-readmore i {color: #fff;}
.news-single-post {line-height: 1.5rem;}


/*CASE STUDY*/
.case-study-curved-af:after {background: #fffbf2;}
.case-study-header {background: linear-gradient(#ccc 1px, transparent 1px) #fffbf2; background-size: auto 2.5rem; line-height: 2.5rem; /*box-shadow: 0 5px 8px -5px rgb(0 0 0 / 50%);*/}
.case-study-header-main {display: flex; align-items: flex-start;}
.case-study-header-content {margin: 5px 2% 2rem; color: rgb(41, 41, 41); flex-grow: 1; max-width: 60%; padding-bottom: 2rem; }
.case-study-date {text-align: right; white-space: nowrap;}
.case-study-header-content-row {font-size: 1.1rem; line-height: 2.5rem; margin: 0; display: flex;}
.case-study-header-content-row-title {min-width: 120px;}
.case-study-header-content-row-title span {font-size: 1.2rem; background: linear-gradient(transparent 40%, rgb(19 179 255 / 50%) 0%); border-radius: 2px; padding: 0 1rem .4rem;}
.case-study-header-content-row-title span.target {background: linear-gradient(transparent 40%, rgb(230 62 128 / 50%) 0%)}
.case-study-header-content-row-content {}
.case-study-header-img-wrap {flex-basis: 35%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;}
.case-study-header-img {
    text-align: center;
    max-height: 380px;
    overflow: hidden;
    margin: 50px;
    background: #fff;
    transform: rotate(3deg);
    -webkit-box-shadow:
        0px 0px 0px 24px #fff,
        0px 0px 0px 25px rgb(0 0 0 / 20%),
        0px 4px 15px 18px #666;
    -moz-box-shadow:
        0px 0px 0px 24px #fff,
        0px 0px 0px 25px rgba(0,0,0,0.2),
        0px 4px 15px 18px #666;
    box-shadow:
        0px 0px 0px 24px #fff,
        0px 0px 0px 25px rgb(0 0 0 / 20%),
        0px 4px 15px 18px #666;
}
.case-study-header-img img {width: auto; max-height: 380px; object-fit: contain; object-position: center center; margin-bottom: 35px; border: solid 1px rgb(148 148 148 / 60%);}

.case-study-category-list {margin-top: -8px ​!important;}
.case-study-category-list li { display: inline-block; margin: 0 2px !important; }
.case-study-category-list a {display: inline-block; border-radius: 10px; padding: 5px 10px 7px !important; line-height: 1em; font-size: 12px; font-weight: 500; color: #fff;}
.case-study-category-list li:hover a {background-color: #fecf1d !important;}

.case-study-single-post-wrap {margin-bottom: 5rem;}
/* .case-study-single-post {width: 90%; line-height: 2rem; margin: 0 auto; padding: 3rem; background: #a0d8ea; border-radius: 50px;} */
.case-study-header-content .case-study-single-post {width: fit-content; line-height: 2.5rem; margin: 3rem auto 0 0; padding: 1rem 2rem; border: 4px solid rgb(255 202 0 / 70%); background: none; border-radius: 50px;}

.case_study-single-post-images { width: 90%; margin: 0 auto; padding: 1rem 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.case_study-single-post-images-image { width: 49%; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center;}
.case_study-movie {margin: 0 auto; width: 80%; text-align: center;}
.case_study-movie iframe {max-width: 100%;}

.case_study-comments {width: 90%; margin: 100px auto 40px;}
.case_study-comments-comment-title {display: inline-block; height: auto; padding: 1em 1.5em; margin: 2rem 0 1rem; overflow: hidden; box-shadow: 0.25rem 0 0.25rem hsl(0deg 0% 0% / 10%); background-image: linear-gradient( 90deg , hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem) , linear-gradient( 90deg , hsla(60, 100%, 85%, 1), hsla(60, 100%, 85%, 1)); font-size: 1.125rem; line-height: 1.8; -webkit-transform-origin: left top; transform-origin: left top;}
.case_study-comments-comment:nth-child(odd) .case_study-comments-comment-title { -webkit-transform: rotate( -2deg ); transform: rotate( -2deg );}
.case_study-comments-comment:nth-child(even) .case_study-comments-comment-title { -webkit-transform: rotate( -1deg ); transform: rotate( -1deg );}
.case_study-comments-comment-content { line-height: 1.8rem; }

.case-study-list {padding: 0; list-style: none; display: flex; flex-wrap: wrap; column-gap: 1%;}
.case-study-list:after {display: block; content: ""; width: 32.9%;}
.case-study-list-li {position: relative; margin: 0 0 1.5rem; border: 1px solid #aaa; width: 19.2%; min-height: 470px; padding-bottom: 35px; border-radius: 25px;}
.case-study-list-li img {width: 100%; height: auto; border-radius: 25px 26px 0 0;}
.case-study-list-box {width: 100%; padding: 0 3%;}
.case-study-list-li-img-wrap {position: relative;}
.case-study-list-li-img-wrap:before { overflow: hidden; content: ""; display: block; padding-top: 100%; }
.case-study-list-li img { border-radius: 25px 26px 0 0; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: cover; }
.case-study-list-title, .case-study-list-target {display: flex; flex-wrap: nowrap; align-items: center;}
.case-study-list-title {margin: .5rem 0;}
.case-study-list-title span:first-child, .case-study-list-target span:first-child {font-size: .9rem; color: #fff; text-align: center; width: 50px; min-width: 50px; padding: .2rem 0; margin-right: 1rem; border-radius: 5px; background: #e63e80;}
.case-study-list-title span:first-child {background-color: #009ce1;}
.case-study-list-title span:nth-child(2), .case-study-list-target span:nth-child(2) {font-size: 1.2rem;}
.case-study-list-target {margin: .5rem 0 1rem;}
.case-study-list-date {position: absolute; top: 0; right: 0; padding: 10px 15px; background: rgb(250 207 72); text-align: center; white-space: nowrap; border: 1px solid rgb(250 207 72); border-radius: 0 25px;}
.case-study-list-date span {color: #fff;}
.case-study-list-category span {display: inline-block; color: #fff; font-size: .8rem; border-radius: 15px; padding: 5px 10px 7px !important; line-height: 1em; margin: 0 0 3px 0; white-space: nowrap;}
.case-study-list-category span:hover {color: #222; background: #faee00 !important;}
.case-study-list-category a {position: relative; z-index: 99;}
.case-study-list-summary {line-height: 1.5rem; margin: 2rem 0 2.8rem 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.case-study-list-summary-event {line-height: 1.5rem; margin: 0 0 2rem;}
.case-study-list-readmore {font-size: 0.9em; font-weight: 400; text-align: center; position: absolute; left: 25px; right: 25px; bottom: 10px; border: 1px solid #fff; margin: 0px auto; padding: 8px 10px 8px 16px; border-radius: 4px; animation: 1.1s ease 0s 1 normal none running anime1; transition: all 0.5s ease-in-out 0s;}
.case-study-list-li:hover {border-color: #fffe56;}
.case-study-list-li:hover p {background-color: #e63e80 !important;}
.case-study-list-li:hover img, .case-study-list-li:hover .case-study-list-summary {opacity: .6;}

.case-study-single-post-related-table-wrap{padding: 20px 30px 40px;}
.case-study-single-post-related-table{width: 100%; border-collapse: collapse;}
.case-study-single-post-related-table th{color: #461e2a; font-weight: 700; text-shadow: 0 0 #fff; border-top: 1px solid #ffeaf0; border-bottom: 1px solid #ffeaf0; line-height: 1.3em;}
.case-study-single-post-related-table td{padding: 10px 5px; padding-left: 0; border-bottom: 1px solid #ffeaf0; position: relative;}
.case-study-single-post-related-table .expand-link:hover{}
.case-study-single-post-related-table .related-img{width: 150px;}
.case-study-single-post-related-table .related-img img{background: #fff;}
.case-study-single-post-related-table .related-title{width: 20%;}
.case-study-single-post-related-table .related-code{width: 8%;}
.case-study-single-post-related-table .related-img:hover, .case-study-single-post-related-table .related-title:hover, .case-study-single-post-related-table .related-code:hover {opacity: .6;}
.case-study-single-post-related-table .related-price{width: 13%;}
.case-study-single-post-related-table .related-price span{margin-right: -8px; font-size: .9rem;}
.case-study-single-post-related-table .related-price span:before{content: "\A"; white-space: pre;}
.case-study-single-post-related-table .related-button button{color: #fff; font-weight: 500; margin: 5px auto; padding: 7px 12px; cursor: pointer; border: 1px solid transparent; border-radius: 5px;}
.case-study-single-post-related-table .related-button button:hover{border: 1px solid #fff; opacity: .8;}
.case-study-single-post-related-table td.prelative:hover{opacity: .6;}


@media screen and (max-width: 1680px){
    .case-study-list-li {width: 24.25%;}
    .case-study-header-content {max-width: 60%;}
}

@media screen and (max-width: 1420px){
    .case-study-list-li {width: 32.66%;}
    .case-study-header-content {max-width: 50%;}
}

@media screen and (max-width: 1180px){
    .case-study-list-li {width: 49%;}
}

@media screen and (max-width: 680px){
    .case-study-header-main {display: block; padding-top: 45px; margin-top: -70px;}
    .case-study-header-content {max-width: 100%;}
    .case-study-header-content-row-title { width: 30%; }
    .case-study-header-content-row-content { width: 70%; }
    .case_study-single-post-images-image { width: 100%;}
    .case_study-movie {position: relative; width: 80%; padding-top: 56.25%;}
    .case_study-movie iframe {position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
    .case-study-list-li {width: 100%; margin-top: 10px; padding-bottom: 15px; min-height: unset;}
    .case-study-list-category span {color: #222; font-size: .8rem; background: #fff !important; border: 1px solid #009ce1; border-radius: unset; }
    .case-study-list-title span:nth-child(2), .case-study-list-target span:nth-child(2) {font-size: 1.1rem;}
    .case-study-list-readmore {position: relative; left: unset; right: unset; width: 80%; text-align: center; margin-top: 1.5rem;}

    .case-study-single-post .indent, .case-study-single-post .indent{padding: 0;}
    .case-study-single-post-related-table-wrap {padding: 0 20px;}
    .case-study-single-post-related-table tr{display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin-bottom: 30px !important;}
    .case-study-single-post-related-table th{display: none;}
    .case-study-single-post-related-table td{padding: 5px 0; border-bottom: 1px solid #ffeaf0;}
    .case-study-single-post-related-table .related-img,
    .case-study-single-post-related-table .related-code,
    .case-study-single-post-related-table .related-title{border-top: 5px solid #f7f7f7; padding-left: 5px;}
    .case-study-single-post-related-table .related-code,
    .case-study-single-post-related-table .related-title{display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; -webkit-justify-content: center;}
    .case-study-single-post-related-table .related-img{width: 33.3%; flex-basis: 33.3%; -webkit-flex-basis: 33.3%; max-width: 33.3%; padding: 0;}
    .case-study-single-post-related-table .related-img img{border-right: 1px solid #fff;}
    .case-study-single-post-related-table .related-code{position: absolute; top: 0; left: calc(33.3% + 5px); width: 100%; justify-content: flex-start; -webkit-justify-content: flex-start; border-color: transparent;}
    .case-study-single-post-related-table .related-code:before {content: "品番: "; font-size: 10px; margin-right: 5px;}
    .case-study-single-post-related-table .related-title{flex-basis: 66.7%; -webkit-flex-basis: 66.7%; max-width: 66.7%; padding-top: 1.5rem;}
    .case-study-single-post-related-table .related-price{flex-basis: 33.3%; -webkit-flex-basis: 33.3%; max-width: 33.3%;}
    .case-study-single-post-related-table .maker_price:before{content: "メーカー希望小売価格"; display: block; font-size: 10px;}
    .case-study-single-post-related-table .member_price:before{content: "会員価格"; display: block; font-size: 10px;}
    .case-study-single-post-related-table .regular_price:before{content: "非会員価格"; display: block; font-size: 10px;}
    .case-study-single-post-related-table .related-button{flex-basis: 100%; -webkit-flex-basis: 100%; max-width: 100%; width: 100px; text-align: right;}
    .case-study-single-post-related-table .related-button button{border: 1px solid #fff;}
}


/*OEM商品*/
.oem-product-list-li{ flex-basis:32%; -webkit-flex-basis:32%; max-width:32%; margin-right: 1% !important; margin-bottom: 30px !important; padding-bottom: 3rem !important; position: relative;}
.oem-product-list-p{ line-height: 1em;}
.oem-product-list-p--price{ font-size: 18px; font-weight: 700;}
.oem-product-list-li p:last-child { margin-bottom: 0; padding-bottom: 0;}
.oem-product-list-p--stock{ display: inline-block; background: #888888; font-size: 12px; color: #fff; list-style: 1em; padding: 3px 5px 4px; border-radius: 3px;}
.oem-product-list-li-next--btn{ display: block; background: #faee00; padding-top: 100%;}
.oem-product-list-li-next--btn span{ display: block; width: 100%; top: 50%; transform: translateY(-50%); text-align: center; color: #222; font-size: 18px; font-weight: 700;}
.oem-product-list-li-next--btn:hover{ background: #e4007f;}
.oem-product-list-li-next--btn:hover span{ color: #fff;}
.oem-product-list-readmore {font-size: 0.9em; font-weight: 400; text-align: center; position: absolute; left: 25px; right: 25px; bottom: 10px; border: 1px solid #fff; margin: 0px auto; padding: 8px 10px 8px 16px; border-radius: 4px; animation: 1.1s ease 0s 1 normal none running anime1; transition: all 0.5s ease-in-out 0s;}
.oem-product-list-readmore, .oem-product-list-readmore i {color: #fff;}
.oem-product-list-li:hover .oem-product-list-readmore { background-color: #e63e80 !important; }


.oem-product-detail{}
.oem-product-detail-header {min-height: 1px;}

.oem-product-detail-header-main { display: flex; align-items: center; justify-content: space-around; padding: 2rem; }
.oem-product-detail-header-img {text-align: center; max-width: 450px; position: relative; }
/* .oem-product-detail-header-img:before { content: ''; position: absolute; z-index: 999; top: 8px; right: 8px; bottom: 8px; left: 8px; border: solid 1px #fff; } */
.oem-product-detail-header-img img {max-height: 350px;}
.oem-product-detail-header-summary { padding-left: 2rem; flex-basis: 60%; }
.oem-product-detail-header-summary-title { font-size: 28px; display: block; font-weight: 700; border-bottom: 5px dotted #e63c88; padding: 0 0 10px 0; margin-bottom: 3rem; line-height: 1.4em }
.oem-product-detail-header-summary-text { font-size: 18px; }

/*.oem-product-detail .indent {padding-left: 120px; padding-right: 40px;}*/
.oem-product-detail p {}

.oem-product-detail-spec {display: flex; background:#fbd94b; padding: 30px !important; }
.oem-product-detail-spec-text { margin-right: 1rem; font-size: 18px;}
.oem-product-detail-spec-text + .oem-product-detail-spec-text {border-top: 1px solid #ccc;}
.oem-product-detail-image-box{flex-basis:40%; -webkit-flex-basis:40%; max-width:480px;}
.oem-product-detail-spec-image { width: 100%; max-width: 100%;}
.oem-product-detail-spec-box{ flex:1; -webkit-flex:1; margin-left: 30px; background: #fff; padding: 30px; }

.oem-product-detail-howto{border: none; background: #eee; padding: 20px !important; margin: 0 0 20px 0 !important; border-left: 10px solid #009d9c;}
.oem-product-detail-howto:first-child{ margin-top: 0; border-top: none;}
.oem-product-detail-howto-title{font-size: 1.25rem; font-weight: 700; color: #009d9c; padding: 0 0 0 1.2em; text-indent: -1.2em; line-height: 1.3em; margin-bottom: 10px; }
.oem-product-detail-howto-title:before{ content: "★"; color: #009d9c; font-size: 21px;}
.oem-product-detail-howto-text { margin: 0; }
.oem-product-detail-howto-image { margin: 10px 0; display: block; max-width: 100%; }

.oem-product-detail-howtoplay-title{flex-basis:100%;-webkit-flex-basis:100%;max-width:100%; margin-bottom: 20px !important; position: relative;}
.oem-product-detail-howtoplay-title {font-size: 1.25rem; text-align: center; background-color: #fff; background-image: radial-gradient(#fccb00 30%, transparent 30%); background-size: 10px 10px;}
.oem-product-detail-howtoplay-title span, .oem-product-detail-fulfill-title span{font-size: 18px;  background: #fff; display: inline-block; padding: 10px; font-weight: 800;}
.oem-product-detail-howtoplay-title:first-child{margin: 0 0 1rem;}
.oem-product-detail-howtoplay-movie {margin: 0 auto; width: 80%; text-align: center;}
.oem-product-detail-howtoplay-movie iframe {max-width: 100%;}

.oem-product-detail-table{width: 96%; border-collapse: collapse; border-spacing: 2px; table-layout: fixed; margin-left: 2%; margin-right: 2%;}
.oem-product-detail-table tr th:nth-child(2){border-left: 3px dotted #fff; border-right: 3px dotted #fff;}
.oem-product-detail-table tr td{ border-bottom: 3px dotted #ef4e98;}
.oem-product-detail-table th{background: #ef4e98; color: #fff; font-size: 18px; font-weight: 500; text-shadow: 0 0 #fff; border-top: 1px solid #ffeaf0; border-bottom: 1px solid #ffeaf0; padding: 15px 0;}
.oem-product-detail-table td{padding: 10px 5px; font-size: 16px; line-height: 1.4em;}
.oem-product-detail-table td:nth-child(2){text-align: center; border-left: 3px dotted #ef4e98; border-right: 3px dotted #ef4e98;}

.oem-product-detail p{ font-size: 16px;}

.oem-product-detail-howtoplay{display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; margin-bottom: 40px;}
.oem-product-detail-howtoplay-movie{flex-basis:35%;-webkit-flex-basis:35%;max-width:35%; padding-right: 30px; margin-bottom: 20px;}
.oem-product-detail-howtoplay-image{flex-basis:35%;-webkit-flex-basis:35%;max-width:35%; padding-right: 30px; margin-bottom: 20px;}
.oem-product-detail-howtoplay-image img{width: 100%; height: auto;}
.oem-product-detail-howtoplay-textbox{flex:1;-webkit-flex:1;}
.oem-product-detail-howtoplay-movieyt{position: relative; width: 100%; padding-top: 56.25%;}
.oem-product-detail-howtoplay-movieyt iframe{position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.oem-product-detail-fulfill-title{position: relative; display: inline-block; margin: 0 0 10px 0; padding: 10px 30px; color: #fff; border-radius: 0 100vh 100vh 0; background: #009fe8; -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2); box-shadow: 3px 3px 5px rgba(0, 0, 0, .2); font-size: 18px;}
.oem-product-detail-fulfill-title:before {position: absolute; bottom: -10px; left: 0; width: 0; height: 0; content: ''; border-top: 10px solid #04628e; border-left: 10px solid transparent;}
.oem-product-detail-fulfill-item{ border: 2px solid; width: calc(100% - 10px); margin: -20px 0 40px auto; padding: 20px; box-sizing: border-box;}
.oem-product-detail-fulfill-text{margin: 1.5em 0;}
.oem-product-detail-fulfill-image {text-align: center; display: flex; flex-wrap: wrap;}
.oem-product-detail-fulfill-image img {width: 100%;}

.oem-product-detail-flow-title{text-align: center; font-weight: 800; margin: -60px auto 20px; width: 110px; height: 110px; border-radius: 50%; background: #009d9c; color: #fff; position: relative; line-height: 1.2em; box-shadow: 0 5px 5px rgba(0,0,0,0.2)}
.oem-product-detail-flow-title span{font-size: 18px; line-height: 1.2em; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; width: 100%;}
.oem-product-detail-flow-title:before { content: "■■■"; color: #009d9c; position: absolute; top: -5px; left: 50%; transform: rotate( 90deg ) translateX(-50%) translateY(25px); }
.oem-product-detail-flow:first-of-type .oem-product-detail-flow-title:before{display: none;}

.oem-product-detail-flow{width: 100%; max-width: 980px; margin: 0 auto; background: #eee; padding: 30px; margin-bottom: 70px; box-shadow: 0 5px 3px rgba(0,0,0,0.2); border: 10px solid #fff;}
.oem-product-detail-flow p{text-align: left;}
.oem-product-detail-flow-titleh4{font-size: 18px; font-weight: 800; margin-bottom: 5px;}
.oem-product-detail-flow-titleh4:before{content: "●"; color: #e4007f; }
.oem-product-detail-flow p { text-align: left; border-bottom: 10px solid #fff; padding-bottom: 15px; margin-bottom: 15px; }
.oem-product-detail-flow p:last-child{border: none !important; padding-bottom: 0;}


@media screen and (max-width: 1480px){
	.oem-product-detail-header-summary-title { font-size: 21px; margin-bottom: 2rem; }
	.oem-product-detail-header-summary-text { font-size: 16px; }
	.oem-product-detail-spec-text{ font-size: 16px; }

	.oem-product-detail-howtoplay-movie{flex-basis:50%;-webkit-flex-basis:50%;max-width:50%; padding-right: 30px;}
	.oem-product-detail-howtoplay-image{flex-basis:50%;-webkit-flex-basis:50%;max-width:50%; padding-right: 0;}
}
@media screen and (max-width: 1280px){
	.oem-product-detail-spec-text{ font-size: 14px; }
  .oem-product-detail-table th,.oem-product-detail-table td{font-size: 14px;}
}
@media screen and (max-width: 780px){
	.oem-product-detail-header-summary-title { font-size: 18px;}
	.oem-product-detail-header-summary-text { font-size: 14px; }
    .oem-product-detail-fulfill-image {flex-wrap: wrap;}
    .oem-product-detail-fulfill-image img {width: 100% !important;}

	.oem-product-detail-howtoplay-movie{ display: block; width: 100%; flex-basis:100%;-webkit-flex-basis:100%;max-width:100%; padding-right:0;}
	.oem-product-detail-howtoplay-image{flex-basis:100%;-webkit-flex-basis:100%;max-width:100%;}

  .oem-product-detail-table,.oem-product-detail-table tbody,.oem-product-detail-table tr,.oem-product-detail-table th,.oem-product-detail-table td{display: block; border: none !important; margin: 0; padding: 0; width: 100%; text-align: left !important;}
  .oem-product-detail-table th{ display: none;}
  .oem-product-detail-table td{font-size: 16px;}
  .oem-product-detail-table td:nth-child(3){margin-bottom: 20px;}
  .oem-product-detail-table td:first-child{background: #ef4e98; padding: 5px 10px; color: #fff; margin-bottom: 5px;}
  .oem-product-detail-table td:first-child br{display: none;}
  .oem-product-detail-table td:nth-child(2):before, .oem-product-detail-table td:nth-child(3):before{ display: inline-block; width: 5em; background: #ddd; padding: 5px 10px; text-align: center; margin-bottom: 10px;}
  .oem-product-detail-table td:nth-child(2):before{content: "ロット";}
  .oem-product-detail-table td:nth-child(3):before{content: "金額(税込)";}

}
@media screen and (max-width: 680px){
    .oem-product-detail-header-main { flex-direction: column; }
    .oem-product-detail-header-summary { margin-top: 2rem; padding: 0; }
    .oem-product-detail-main {flex-direction: column; padding: 2rem 1rem;}
    .oem-product-detail-summary { padding: 1rem 3% 0; }

    .oem-product-detail{ width: 95%; margin: 0 auto; }
    .oem-product-detail .indent {padding: 0;}

    .oem-product-detail-spec { flex-direction: column; }
    .oem-product-detail-spec-text { margin-right: 0; }
    .oem-product-detail-spec-image { max-width: 95%; margin: 0 auto; }

	.post-h2, .post-section-hedding{ font-size: 6vw;}
	.oem-product-detail-image-box{flex-basis: 100%; -webkit-flex-basis: 100%; max-width: 100%;}
	.oem-product-detail-spec-box{ margin: 30px 0 0 0;}
	.oem-product-detail-spec-image {width: 100%; max-width: 100%;}
	.oem-product-detail-howtoplay-title{padding: 0 30px !important; text-align: left;}
}
@media screen and (max-width: 480px){
	.oem-product-detail-spec{ padding: 20px !important;}
	.oem-product-detail-spec-box{ margin: 20px 0 0 0; padding: 20px !important;}
	.oem-product-detail-howto-title{ font-size: 16px;}
	.oem-product-detail p{ font-size: 14px; }
	.oem-product-detail-fulfill-title{font-size: 16px;}
	.oem-product-detail-flow{padding: 20px;}
  .oem-product-detail-table td{font-size: 14px;}
  .oem-product-detail-table td:first-child br{display: block;}
}

/*OEM製作事例*/
.oem-case-study-curved-af:after {background: #fffbf2;}
.oem-case-study-legoblock:before {background-image: -webkit-linear-gradient( 135deg , #f6becf 50%, #fffbf2 50%) !important; background-image: linear-gradient( 135deg , #f6becf 50%, #fffbf2 50%) !important;}
.oem-case-study-header {background: linear-gradient(#ccc 1px, transparent 1px) #fffbf2; background-size: auto 2.5rem; line-height: 2.5rem; padding: 2.5rem 0 0; /*box-shadow: 0 5px 8px -5px rgb(0 0 0 / 50%);*/}
.oem-case-study-header-main {display: flex; align-items: flex-start; justify-content: space-around;}
.oem-case-study-header-content {margin: 5px 2% 2rem; color: rgb(41, 41, 41); flex-grow: 1; max-width: 50%; padding-bottom: 2rem; }
.oem-case-study-date {text-align: right; white-space: nowrap;}
.oem-case-study-header-content-row {font-size: 1.1rem; line-height: 2.5rem; margin: 0; display: flex; column-gap: 1rem;}
.oem-case-study-header-content-row-title {flex-basis: 20%; white-space: nowrap;}
.oem-case-study-header-content-row-title span {font-size: 1.2rem; background: linear-gradient(transparent 40%, rgb(19 179 255 / 50%) 0%); border-radius: 2px; padding: 0 1rem .4rem;}
.oem-case-study-header-content-row-title span.target {background: linear-gradient(transparent 40%, rgb(230 62 128 / 50%) 0%); }
.oem-case-study-header-content-row-title span.customize {background: linear-gradient(transparent 40%, rgb(102 230 62 / 50%) 0%); font-size: 1.1rem;}
.oem-case-study-header-content-row-content {}
.oem-case-study-header-img-wrap {flex-basis: 35%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;}
.oem-case-study-header-img {
    text-align: center;
    max-width: 75%;
    max-height: 380px;
    overflow: hidden;
    margin: 50px;
    background: #fff;
    transform: rotate(3deg);
    -webkit-box-shadow:
        0px 0px 0px 24px #fff,
        0px 0px 0px 25px rgb(0 0 0 / 20%),
        0px 4px 15px 18px #666;
    -moz-box-shadow:
        0px 0px 0px 24px #fff,
        0px 0px 0px 25px rgba(0,0,0,0.2),
        0px 4px 15px 18px #666;
    box-shadow:
        0px 0px 0px 24px #fff,
        0px 0px 0px 25px rgb(0 0 0 / 20%),
        0px 4px 15px 18px #666;
}
.oem-case-study-header-img img {width: auto; max-height: 380px; object-fit: contain; object-position: center center; margin-bottom: 35px; border: solid 1px rgb(148 148 148 / 60%);}

.oem-case-study-category-list {margin-top: -8px ​!important;}
.oem-case-study-category-list li { display: inline-block; margin: 0 2px !important; }
.oem-case-study-category-list a {display: inline-block; border-radius: 10px; padding: 5px 10px 7px !important; line-height: 1em; font-size: 12px; font-weight: 500; color: #fff;}
.oem-case-study-category-list li:hover a {background-color: #fecf1d !important;}

.oem-case-study-single-post-wrap {padding-top: 20px; margin-bottom: 5rem;}
/* .oem-case-study-single-post {width: 90%; line-height: 2rem; margin: 0 auto; padding: 3rem; background: #a0d8ea; border-radius: 50px;} */
.oem-case-study-single-post {width: fit-content; line-height: 2.5rem; margin: 3rem auto 0 0; padding: 1rem 2rem; border: 4px solid rgb(247 125 162 / 60%); background: none; border-radius: 50px;}
.oem-case_study-single-post-images { width: 90%; margin: 0 auto; padding: 3rem 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.oem-case_study-single-post-images-image { width: 49%; margin-bottom: 1rem; }
.oem-case_study-movie {margin: 0 auto; width: 80%; text-align: center;}
.oem-case_study-movie iframe {max-width: 100%;}

.oem-case_study-comments {width: 90%; margin: 100px auto 40px;}
.oem-case_study-comments-comment-title {display: inline-block; height: auto; padding: 1em 1.5em; margin: 2rem 0 1rem; overflow: hidden; box-shadow: 0.25rem 0 0.25rem hsl(0deg 0% 0% / 10%); background-image: linear-gradient( 90deg , hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem) , linear-gradient( 90deg , hsla(60, 100%, 85%, 1), hsla(60, 100%, 85%, 1)); font-size: 1.125rem; line-height: 1.8; -webkit-transform-origin: left top; transform-origin: left top;}
.oem-case_study-comments-comment:nth-child(odd) .oem-case_study-comments-comment-title { -webkit-transform: rotate( -2deg ); transform: rotate( -2deg );}
.oem-case_study-comments-comment:nth-child(even) .oem-case_study-comments-comment-title { -webkit-transform: rotate( -1deg ); transform: rotate( -1deg );}
.oem-case_study-comments-comment-content { line-height: 1.8rem; }

.oem-case-study-list {padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between;}
.oem-case-study-list:after {display: block; content: ""; width: 32.9%;}
.oem-case-study-list-li {position: relative; margin: 0 0 1.8rem; padding-bottom: 8rem; border: 1px solid #aaa; border-radius: 25px; width: 31.5%;}/* min-height: 470px; */
.oem-case-study-list-li img {width: 100%; height: auto; border-radius: 25px 25px 0 0;}
.oem-case-study-list-box {width: 100%; padding: 0 3%; margin-bottom: 1.5rem;}
.oem-case-study-list-title, .oem-case-study-list-target {display: flex; flex-wrap: nowrap; align-items: center;}
.oem-case-study-list-title {margin: .5rem 0;}
.oem-case-study-list-title span:first-child, .oem-case-study-list-target span:first-child {font-size: .9rem; color: #fff; text-align: center; width: 50px; min-width: 50px; padding: .2rem 0; border-radius: 5px; margin-right: 1rem;}
.oem-case-study-list-title span:nth-child(2), .oem-case-study-list-target span:nth-child(2) {font-size: 1.1rem;}
.oem-case-study-list-title span:first-child { background: #009ce1}
.oem-case-study-list-target span:first-child { background: #e63e80}
.oem-case-study-list-target {margin: .5rem 0;}
.oem-case-study-list-date {position: absolute; top: 0; right: 0; padding: 10px; background: rgb(255 75 130 / 70%); text-align: center; white-space: nowrap; border: 1px solid rgb(255 75 130 / 70%); border-radius: 0 24px;}
.oem-case-study-list-date span {color: #000;}
.oem-case-study-list-category span {display: inline-block; color: #fff; font-size: .8rem; border-radius: 15px; padding: 5px 10px 7px !important; line-height: 1em; margin: 0 0 3px 0; white-space: nowrap;}
.oem-case-study-list-category span:hover {color: #222; background: #faee00 !important;}
.oem-case-study-list-category a {position: relative; z-index: 99;}
.oem-case-study-list-summary {text-align: center; padding: 1rem; background-color: #eee; position: absolute; left: 0; right: 0; bottom: 4rem;}
.oem-case-study-list-readmore {font-size: 0.9em; font-weight: 400; text-align: center; position: absolute; left: 25px; right: 25px; bottom: 10px; border: 1px solid #fff; margin: 0px auto; padding: 8px 10px 8px 16px; border-radius: 4px; animation: 1.1s ease 0s 1 normal none running anime1; transition: all 0.5s ease-in-out 0s;}
/*
.oem-case-study-list-li:hover {border-color: #e63e80;}
.oem-case-study-list-li:hover p {background-color: #e63e80 !important;}
.oem-case-study-list-li:hover img, .oem-case-study-list-li:hover .oem-case-study-list-summary {opacity: .6;}
*/

.oem-case-study-single-post-related-table-wrap{padding: 2rem 0;}
.oem-case-study-single-post-related-table{width: 95%; margin: 2rem 2rem 0; border-collapse: collapse;}
.oem-case-study-single-post-related-table th{color: #461e2a; font-weight: 700; text-shadow: 0 0 #fff; border-top: 1px solid #ffeaf0; border-bottom: 1px solid #ffeaf0; line-height: 1.3em; padding: .5rem 0;}
.oem-case-study-single-post-related-table td{padding: 10px 5px; padding-left: 0; border-bottom: 1px solid #ffeaf0; position: relative;}
.oem-case-study-single-post-related-table .expand-link:hover{}
.oem-case-study-single-post-related-table .related-img{width: 20%;}
.oem-case-study-single-post-related-table .related-img img{background: #fff; border-radius: 5%;}
.oem-case-study-single-post-related-table .related-title{width: 50%;}
.oem-case-study-single-post-related-table .related-img:hover, .oem-case-study-single-post-related-table .related-title:hover, .oem-case-study-single-post-related-table .related-code:hover {opacity: .6;}
.oem-case-study-single-post-related-table .related-button button{color: #fff; font-weight: 500; margin: 5px auto; padding: 7px 12px; cursor: pointer; border: 1px solid transparent; border-radius: 5px;}
.oem-case-study-single-post-related-table .related-button button:hover{border: 1px solid #fff; opacity: .8;}
.oem-case-study-single-post-related-table td.prelative:hover{opacity: .6;}


@media screen and (max-width: 1280px){
    .oem-case-study-list-li {width: 48%;}
}

@media screen and (max-width: 680px){
    .oem-case-study-header-img {margin-left: auto; margin-right: auto;}
    .oem-case-study-header-main {display: block; padding-top: 45px; margin-top: -70px;}
    .oem-case-study-header-content {max-width: 100%;}
    .oem-case-study-header-content-row-title { width: 30%; }
    .oem-case-study-header-content-row-content { width: 70%; }
    .oem-case_study-single-post-images-image { width: 100%;}
    .oem-case_study-movie {position: relative; width: 80%; padding-top: 56.25%;}
    .oem-case_study-movie iframe {position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
    .oem-case-study-list-li {width: 100%; margin-top: 10px; padding-bottom: 15px; min-height: unset;}
    .oem-case-study-list-category span {color: #222; font-size: .8rem; background: #fff !important; border: 1px solid #009ce1; border-radius: unset; }
    .oem-case-study-list-title span:nth-child(2), .oem-case-study-list-target span:nth-child(2) {font-size: 1.1rem;}
    .oem-case-study-list-readmore {position: relative; left: unset; right: unset; width: 80%; text-align: center; margin-top: 1.5rem;}

    .oem-case-study-single-post .indent, .oem-case-study-single-post .indent{padding: 0;}
    .oem-case-study-single-post-related-table{margin: 1rem 1rem 0;}
    .oem-case-study-single-post-related-table tr{display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin-bottom: 30px !important;}
    .oem-case-study-single-post-related-table th{display: none;}
    .oem-case-study-single-post-related-table td{padding: 5px 0; border-bottom: 1px solid #ffeaf0;}
    .oem-case-study-single-post-related-table .related-img,
    .oem-case-study-single-post-related-table .related-button,
    .oem-case-study-single-post-related-table .related-title{border-top: 1px solid #f7f7f7;}
    .oem-case-study-single-post-related-table .related-title{display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; -webkit-justify-content: center;}
    .oem-case-study-single-post-related-table .related-img{width: 20%; flex-basis: 20%; -webkit-flex-basis: 20%; max-width: 20%; padding: 0;}
    .oem-case-study-single-post-related-table .related-img img{border-right: 1px solid #fff;}
    .oem-case-study-single-post-related-table .related-title{flex-basis: 46%; -webkit-flex-basis: 46%; max-width: 46%;}
    .oem-case-study-single-post-related-table .related-button{flex-basis: 34%; -webkit-flex-basis: 34%; max-width: 34%; width: 34px; text-align: right; display: flex; align-items: center; justify-content: center;}
    .oem-case-study-single-post-related-table .related-button button{border: 1px solid #fff;}
}

/*カート*/
.product-added-list{width: 95%; border-collapse: collapse; box-sizing: border-box; margin: 0 auto;}
.product-added-list th,
.product-added-list td{
    border-bottom: 1px solid #999;
    padding: 10px 0;
    text-align: center;
}
.product-added-list th{
    border-top: 1px solid #999;
    line-height: 1.3em;
}
.product-added-list td:first-child{
    width: 20%;
    padding-right: 10px;
}
.product-added-list th:nth-child(3),
.product-added-list td:nth-child(3),
.product-added-list th:nth-child(5),
.product-added-list td:nth-child(5){
    background: #eee;
}
.product-added-list td:nth-child(4),
.product-added-list td:nth-child(5){
    padding-right: 10px;
    text-align: right;
}
.product-added-list td:last-child{
    width: 100px;
    text-align: right;
}
.product-added-list td:last-child button{
    display: inline-block;
    width: 130px;
    background: #e4007f;
    padding: 5px 0 7px;
    border: none;
    border-radius: 3px;
    text-align: center;
    color: #fff;
    line-height: 1em;
    cursor: pointer;
}
.product-added-list td:last-child button:hover{
    background: #009ce1;
}

.product-cart-list{width: 100%; border-collapse: collapse; box-sizing: border-box;}
.product-cart-list th,
.product-cart-list td{
    border-bottom: 1px solid #999;
    padding: 10px;
    text-align: center;
}
.product-cart-list th{
    border-top: 1px solid #999;
    line-height: 1.3em;
}
.product-cart-list td:first-child{
    width: 15%;
    padding-right: 10px;
}
.product-cart-list th:nth-child(2) {
    min-width: 250px;
    width: 30%;
}

.product-cart-list th:nth-child(3),
.product-cart-list td:nth-child(3),
.product-cart-list th:nth-child(5),
.product-cart-list td:nth-child(5){
    background: #eee;
}
.product-cart-list td:nth-child(4),
.product-cart-list td:nth-child(5),
.product-cart-list td:nth-child(6){
    text-align: right;
}
.product-added-list .prelative:hover, .product-cart-list .prelative:hover {opacity: .7;}

.product-cart-list .remove-button {color: #e63e80; background: #e4007f; display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; line-height: 35px; border: none; border-radius: 8px; overflow: hidden; transition: 0.5s; cursor: pointer;}
.product-cart-list .remove-button i {color: #fff; font-size: 1.3rem;}
.product-cart-list .remove-button:hover {background: #009ce1;}
.product-cart-list .remove-button:hover i {color: #fff;}

.product-cart-list .product-list_p--stock { margin-top: 2px; }

.product-cart-pretext {color: #555; font-weight: bold; font-size: .75rem; white-space: nowrap;}
.product-cart-pretext:after {content: "\A"; white-space: pre;}

.product-cart-total-wrap { display: flex; justify-content: flex-end; }
.product-cart-total { width: 60%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-top: 1px solid #439f9d; border-bottom: 1px solid #439f9d; margin: 2rem 0; }
.product-cart-total div { padding: 2rem; min-height: 60px; min-width: 40%; display: flex; align-items: center; justify-content: right; }
.product-cart-total .product-cart-total-title { width: 40%; background: #eee; justify-content: center;}

.product-cart-button-wrapper { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.product-cart-button { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.4em; border: none; padding: 20px 2.5rem 20px .8rem; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.product-cart-button.product-cart-button-back {padding: 20px .8rem 20px 2.5rem;}
.product-cart-button i { position: absolute; font-size: 21px; color: #fff; right: .8rem; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }
.product-cart-button, .product-cart-button i {-webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.product-cart-button-login { background: #009ce1; }
.product-cart-button-register { background: #e4007f; }
.product-cart-button-guest { background: #009e9d; }
.product-cart-button-login:hover, .product-cart-button-register:hover, .product-cart-button-guest:hover { background: #faee00; color: #009e9d; }
.product-cart-button-login:hover i, .product-cart-button-register:hover i, .product-cart-button-guest:hover i { color: #009e9d; }
.product-cart-button-next { background: #009e9d; }
.product-cart-button-next:hover { background: #e4007f; color: #fff; }
.product-cart-button-next:hover i { color: #fff; }
.product-cart-button-back { background: #777; }
.product-cart-button-back:hover { color: #fff; background: #444; }
.product-cart-button-back:hover i { color: #fff; }
.product-cart-button i.pa-left { left: 1rem; right: auto;}

@media screen and (max-width: 780px) {
    .product-added-list { width: 100%; }
    .product-added-list th{
        font-size: 12px;
    }
    .product-cart-list th{
        font-size: 12px;
    }
}
@media screen and (max-width: 680px) {
    .product-added-list table,
    .product-added-list tbody{
        display: block;
    }
    .product-added-list tr{
        display:flex;
        display:-webkit-flex;
        justify-content:space-between;
        -webkit-justify-content:space-between;
        flex-wrap:wrap;
        -webkit-flex-wrap:wrap;
        margin-bottom: 30px !important;
    }
    .product-added-list th{
        display: none;
    }
    .product-added-list td{
        padding: 5px;
    }
    .product-added-list td:first-child{
        flex-basis: 20%;
        -webkit-flex-basis: 20%;
        max-width: 20%;
        padding: 0;
        border-top: 5px solid #666;
    }
    .product-added-list td:nth-child(2),
    .product-added-list td:nth-child(3){
        flex-basis: 25%;
        -webkit-flex-basis: 25%;
        max-width: 25%;
        display:flex;
        display:-webkit-flex;
        align-items:center;
        -webkit-align-items:center;
        -webkit-justify-content:center;
        border-top: 5px solid #666;
    }
    .product-added-list td:nth-child(2) {flex-basis: 55%; -webkit-flex-basis: 55%; max-width: 55%; padding: 5px 2px;}
    .product-added-list td:nth-child(4),
    .product-added-list td:nth-child(5),
    .product-added-list td:nth-child(6){
        flex-basis: 33.3%;
        -webkit-flex-basis: 33.3%;
        max-width: 33.3%;
    }
    .product-added-list td:nth-child(4):before {
        content:"メーカー希望小売価格";
        display: block;
        font-size: 12px;
        color: #555;
    }
    .product-added-list td:nth-child(6):before {
        content:"数量";
        display: block;
        font-size: 12px;
        color: #555;
    }

    .product-cart-list table,
    .product-cart-list tbody{
        display: block;
    }
    .product-cart-list tr{
        display:flex;
        display:-webkit-flex;
        justify-content:space-between;
        -webkit-justify-content:space-between;
        flex-wrap:wrap;
        -webkit-flex-wrap:wrap;
        margin-bottom: 30px !important;
    }
    .product-cart-list th{
        display: none;
    }
    .product-cart-list td{
        padding: 5px;
    }
    .product-cart-list td:first-child{
        flex-basis: 20%;
        -webkit-flex-basis: 20%;
        max-width: 20%;
        padding: 0;
        border-top: 5px solid #666;
    }
    .product-cart-list td:nth-child(2),
    .product-cart-list td:nth-child(3){
        flex-basis: 25%;
        -webkit-flex-basis: 25%;
        max-width: 25%;
        display:flex;
        display:-webkit-flex;
        align-items:center;
        -webkit-align-items:center;
        -webkit-justify-content:center;
        border-top: 5px solid #666;
    }
    .product-cart-list td:nth-child(2) {flex-basis: 55%; -webkit-flex-basis: 55%; max-width: 55%; padding: 5px 2px;}
    .product-cart-list td:nth-child(4),
    .product-cart-list td:nth-child(5),
    .product-cart-list td:nth-child(6){
        flex-basis: 33.3%;
        -webkit-flex-basis: 33.3%;
        max-width: 33.3%;
    }
    .product-cart-list td:nth-child(4):before {
        content:"メーカー希望小売価格";
        display: block;
        font-size: 12px;
        color: #555;
    }
    .product-cart-list td:nth-child(6):before {
        content:"数量";
        display: block;
        font-size: 12px;
        color: #555;
    }
    .product-cart-list td:nth-child(7) { flex-basis: 50%; -webkit-flex-basis: 50%; max-width: 50%; margin: 0 0 0 auto; border-color: #000; display: flex; align-items: flex-end; justify-content: center; }
    .product-cart-list td:nth-child(7) span { padding-right: .2rem; }
    .product-cart-list td:nth-child(7):before { content: "小計"; font-size: 14px; color: #555; display: inline-block; padding-right: .8rem; }
    .product-cart-list td:last-child { flex-basis: 15%; -webkit-flex-basis: 15%; max-width: 15%; border-bottom: none; padding-bottom: 0; display: flex; align-items: flex-end; justify-content: flex-end; }
    .product-cart-list td:last-child button { width: 35px; }

    .product-cart-total { width: 100%; border-top: 5px solid #439f9d; }
    .product-cart-total div { padding: 1rem; }
    .product-cart-total-title { font-weight: bold; width: 45%; }

    .product-cart-button-wrapper { flex-direction: column; align-items: center; margin-bottom: 5rem !important; }
    .product-cart-button { width: 95%; margin-bottom: 10px !important; }
    .product-cart-button.w30p { width: 100% !important;}
}
@media screen and (max-width: 480px) {
    .product-added-list td:nth-child(4):before,
    .product-added-list td:nth-child(5):before,
    .product-added-list td:nth-child(6):before{
        font-size: 10px;
    }

    .product-cart-list td:nth-child(4):before,
    .product-cart-list td:nth-child(5):before,
    .product-cart-list td:nth-child(6):before{
        font-size: 10px;
    }
}

/*会員登録*/
.register-flow {width: 90%; text-align: center; margin: 0 auto 3rem;}
.register-flow-images-1 { display: flex; flex-wrap: nowrap; align-items: baseline; }
.register-flow-images-1 img { min-width: 0; }
.register-flow-images-2 { display: flex; flex-wrap: nowrap; justify-content: space-between; max-width: 85%; margin: 0 auto;}
.register-flow-images-2 img { width: 24%; }
.register-flow-images-3 { display: flex; flex-wrap: nowrap; justify-content: space-between; max-width: 85%; margin: 0 auto;}
.register-flow-images-3 img { width: 31%;}
.register-flow-title-img {max-width: 60%; margin: 2rem 1rem;}
.register-flow-text {max-width: 80%; text-align: left; margin: 0 auto; padding-left: 0.8em;}
.register-flow-text span { font-size: 13.5px; text-indent: -1em; display: block; line-height: 1.5em; }

@media screen and (max-width: 1280px) {
    .register-flow-text span { font-size: 12px; line-height: 1.4em; }
}
@media screen and (max-width: 680px) {
    .register-flow-images-1, .register-flow-images-2, .register-flow-images-3 { flex-wrap: wrap; max-width: 95%; }
    .register-flow-images-3 {justify-content: center;}
    .register-flow-images-2 img { width: 49%; }
    .register-flow-images-3 img { width: 50%; padding: 0 .5rem 1rem; margin-bottom: 1rem; border-bottom: 1px dotted #888;}
    .register-flow-text {max-width: 100%;}
}

/*購入情報*/
.shopping-order-sub-title {background: #eee; padding: 1rem; margin: 2rem auto;}
.shopping-order-form th, .shopping-order-form td {text-align: left;}

/* 見積もり */
.shopping-quotation {
  padding-top: 50px;
  position: relative;
}
.shopping-quotation::before {
  content: "";
  display: block;
  width: 0;
  margin: 0 auto;
  border-top: 50px solid #fecf1d;
  border-left: 10vw solid transparent;
  border-right: 10vw solid transparent;
  border-bottom: 20px solid transparent;
}
.shopping-quotation-title {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  font-size: 24px;
  color: #000;
}
.shopping-quotation .form-wrap {
  max-width: 600px;
  margin: 0 auto;
}
.shopping-quotation .form-head {
  flex-basis: 150px;
}
.shopping-quotation .form-body {
  flex-basis: calc(100% - 150px);
}
.shopping-quotation-button {
  padding: 15px 100px;
  background: #fecf1d;
  border: none;
  color: #FFF;
  font-size: 20px;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.2);
  cursor: pointer;
}

.shopping-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
}

.shopping-flow li {
  position: relative;
  flex-basis: 150px;
  margin: 10px;
  padding: 10px 25px 10px 5px;
  text-align: center;
  border-radius: 0 25px 25px 0;
  background: #FAECB4;
  transform: rotate(5deg);
}
.shopping-flow li::before {
  position: absolute;
  left: 5px;
  top: 0;
  content: "";
  width: 3px;
  height: 100px;
  background: #FFF;
}
.shopping-flow li::after {
  position: absolute;
  right: 25px;
  top: 0;
  content: "";
  width: 3px;
  height: 100px;
  background: #FFF;
}
.shopping-flow li:nth-child(2n+1) {
  transform: rotate(-5deg);
}
.shopping-flow li.current {
  background: #fecf1d;
}

@media screen and (max-width: 780px) {
    .shopping-flow { flex-wrap: nowrap; justify-content: space-around; padding: 0; }
    .shopping-flow li { font-size: .5rem; margin: .7rem .1rem; padding: 6px 14px 6px 5px; border-radius: 0 20px 20px 0; display: flex; align-items: center; justify-content: center;}
    .shopping-flow li:nth-child(3n+1) { transform: rotate( -5deg); }
    .shopping-flow li::before { left: 3px; }
    .shopping-flow li::after { right: 12px; }
}

/* たのつくについてページ */
.about {
    .about-item {
        text-align: center;

        .about-item-title {
            position: relative;
            display: inline-block;
            background: #fccb00;
            border-radius: 10px;
            margin: 0 auto 40px;
            padding: 20px 30px 20px 40px;
            text-align: center;
            font-weight: 700;
            font-size: 24px;
            letter-spacing: 7px;
            line-height: 1.2;
        }
    }
    @media screen and (max-width: 480px) {
         .page-title {
            font-size: 34px;
        }
    }
    @media screen and (max-width: 380px) {
        .about-item-title {
            font-size: 21px;
        }
    }
    /* たのつくについて */
    .about-item--tanotsuku {
        .about-item-title::before {
            content: '';
            position: absolute;
            bottom: -28px;
            left: 50%;
            transform: translateX(-50%);
            border: 14px solid transparent;
            border-top-color: #fccb00;
        }
        .about-item_point li {
            position: relative;
            width: 20%;
            margin: 0 10px !important;
            padding: 10% !important;
            border-radius: 50%;
            background: #000;
        }
        .about-item_point li span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 48px;
        }
        .about-item_point li span:before {
            display: inline-block;
            content: "/";
            transform: rotate(-30deg);
            transform-origin: center center;
            padding-right: 5px;
        }
        .about-item_point li span:after {
            content: "/";
            padding-left: 5px;
        }
        .about-item_point li small {
            display: block;
            background: #fff;
            position: absolute;
            top: -15px;
            right: -15px;
            position: absolute;
            width: 30%;
            padding: 15% !important;
            border-radius: 50%;
        }
        .about-item_point li small i {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 38px;
        }
        .about-item_point li:first-child {
            background: #429698;
        }
        .about-item_point li:first-child small {
            border: 5px solid #429698;
        }
        .about-item_point li:first-child i {
            color: #429698;
        }
        .about-item_point li:nth-child(2) {
            background: #c93277;
        }
        .about-item_point li:nth-child(2) small {
            border: 5px solid #c93277;
        }
        .about-item_point li:nth-child(2) i {
            color: #c93277;
        }
        .about-item_point li:last-child {
            background: #3692d1;
        }
        .about-item_point li:last-child small {
            border: 5px solid #3692d1;
        }
        .about-item_point li:last-child i {
            color: #3692d1;
        }
        .about-logo_tanotsuku {
            display: inline-block;
            width: 60%;
            max-width: 300px;
            background: #fff;
            position: relative;
            top: -100px;
            padding: 0 10px;
        }
        .about-item_detail {
            width: 100%;
            max-width: 800px;
            border: 5px solid #009ce1;
            border-radius: 50px;
        }

        .about-item_description {
            margin: -60px 0 0;
        }

        .about-item_img {
            display: inline-block;
            position: relative;
            overflow: hidden;
            padding: 6px;
        }
        .about-item_img img {
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
        }
        .about-item_img:before,
        .about-item_img:after {
            content: "";
            position: absolute;
            z-index: 1;
            width: 97px;
            height: 50px;
            background: #fff;
            transform: rotate(-30deg);
        }
        .about-item_img:before {
            box-shadow: 0 10px 8px -12px rgba(0, 0, 0, 0.8);
            top: -24px;
            bottom: auto;
            right: auto;
            left: -26px;
        }
        .about-item_img:after {
            box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.7);
            top: auto;
            bottom: -22px;
            right: -25px;
            left: auto;
        }
        @media screen and (max-width: 1480px) {
            .about-item_point li span {
                font-size: 38px;
            }
        }
        @media screen and (max-width: 1280px) {
            .about-item_point li {
                width: 30%;
                padding: 15% !important;
            }
        }
        @media screen and (max-width: 980px) {
            .about-item_point {
                margin-bottom: 100px !important;
            }
            /* .about-item-2nd-title {
                font-size: 24px;
                line-height: 1.4em;
            }
            .about-item-2nd-title img {
                display: inline-block;
                padding-top: 10px;
            } */
        }
        @media screen and (max-width: 680px) {
            .about-item_point li span {
                font-size: 28px;
            }
            .about-item_point li small i {
                font-size: 28px;
            }
            .about-item_point li:first-child small{
                border: 3px solid #429698;
            }
            .about-item_point li:nth-child(2) small{
                border: 3px solid #c93277;
            }
            .about-item_point li:last-child small{
                border: 3px solid #3692d1;
            }
            .about-item_point li small {
                top: -5px;
                right: -5px;
            }
            .about-item_description p{
                text-align: left;
            }
            .about-item_description p br{
                display: none;
            }
        }

        @media screen and (max-width: 480px) {
            .about-item_point li {
                margin: 0 5px !important;
            }
            .about-item_point li {
                width: 32%;
                padding: 16% !important;
            }
            .about-item_point li span {
                font-size: 21px;
            }
            .about-item_point li small i {
                font-size: 21px;
            }
            .about-logo_tanotsuku {
                top: -75px;
            }
            .about-item_detail {
                border-radius: 30px;
            }
        }
        @media screen and (max-width: 380px) {
            .about-item_detail {
                padding: 30px 10px !important;
            }
            .about-item_point{
                margin-bottom: 60px !important;
            }
        }
    }

    /* リブランディング宣言。
       箱や囲みを使わず、原色のベタと大きな文字でぱきっと見せる。
       角丸・影・淡い色は使わない。色はピンク・黄・青の 3 色だけ */
    .about-rebrand2 {
        max-width: 1000px;
        margin: 60px auto 0;
        padding: 0 30px;
        box-sizing: border-box;
        text-align: left;

        /* 3 色のベタ帯。ブロックの始まりと終わりをはっきり区切る */
        .about-rebrand2_stripe {
            display: flex;
            height: 14px;

            span {
                flex: 1 1 0;
            }
            span:nth-child(1) {
                background: #3692d1;
            }
            span:nth-child(2) {
                background: #fccb00;
            }
            span:nth-child(3) {
                background: #c93277;
            }
        }
        .about-rebrand2_head {
            padding: 45px 0 45px;
            text-align: center;
        }
        .about-rebrand2_title {
            margin: 0 0 28px;
            color: #222;
            font-size: 60px;
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: 0.02em;
        }
        .about-rebrand2_title .about-rebrand2_title-sub {
            display: block;
            margin-bottom: 8px;
            color: #222;
            font-size: 26px;
            font-weight: 900;
            letter-spacing: 0.3em;
        }
        .about-rebrand2_title .about-rebrand2_title-em {
            display: inline-block;
            margin-left: 0.12em;
            padding: 0 0.18em;
            background: #c93277;
            color: #fff;
            font-size: inherit;
            font-weight: inherit;
            transform: rotate(-3deg);
        }
        .about-rebrand2_lead {
            margin: 0;
            color: #222;
            font-size: 20px;
            font-weight: 900;
            line-height: 1.8;
        }
        .about-rebrand2_lead .about-rebrand2_mark {
            padding: 0.1em 0.3em;
            background: #fccb00;
            font-size: inherit;
            font-weight: inherit;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }
        .about-rebrand2_main {
            display: flex;
            align-items: center;
            gap: 48px;
            margin-bottom: 48px;
        }
        .about-rebrand2_text {
            flex: 1 1 0;
            min-width: 0;

            p {
                margin: 0 0 1.2em;
                color: #222;
                font-size: 16px;
                line-height: 1.8;
            }
            p:last-child {
                margin-bottom: 0;
            }
        }
        .about-rebrand2_text--narrow {
            max-width: 760px;
            margin: 0 auto;
        }
        /* 本文中の、たのつくが何のサイトかを言い表す語句。ピンクの太字で、まわりより大きく打ち出す。
           見出しやリード文と同じ黄色のベタは使わない
           （strong にしているので、検索エンジン・AI にも重要な語句として伝わる） */
        .about-rebrand2_text .about-rebrand2_key {
            color: #c93277;
            font-size: 1.5em;
            font-weight: 900;
            line-height: 1.5;
        }
        /* 写真は丸く切り取る。後ろに青のベタの円を、右下へ少しずらして重ねる */
        .about-rebrand2_image {
            position: relative;
            flex: 0 0 38%;
            margin-right: 16px;

            &::before {
                content: "";
                position: absolute;
                top: 16px;
                left: 16px;
                width: 100%;
                height: 100%;
                background: #3692d1;
                border-radius: 50%;
            }
            img {
                position: relative;
                display: block;
                width: 100%;
                height: auto;
                aspect-ratio: 1;
                object-fit: cover;
                object-position: 36% 50%; /* 万華鏡の先が円の縁で切れないよう、左（万華鏡側）へ寄せている */
                border-radius: 50%;
            }
        }
        .about-rebrand2_promise {
            margin: 42px 0;
            color: #c93277;
            font-size: 28px;
            font-weight: 900;
            line-height: 1.5;
            letter-spacing: 0.02em;
            text-align: center;
        }

        @media screen and (max-width: 780px) {
            margin-top: 60px;
            padding: 0 14px;

            .about-rebrand2_stripe {
                height: 10px;
            }
            .about-rebrand2_head {
                padding: 36px 0 32px;
            }
            .about-rebrand2_title {
                font-size: 34px;
            }
            .about-rebrand2_title .about-rebrand2_title-sub {
                font-size: 18px;
            }
            .about-rebrand2_lead {
                font-size: 16px;
                line-height: 1.75;
                text-align: left;

                br {
                    display: none;
                }
            }
            .about-rebrand2_main {
                flex-direction: column;
                align-items: stretch;
                gap: 28px;
                margin-bottom: 32px;
            }
            .about-rebrand2_text p {
                font-size: 15px;
                line-height: 1.8;
            }
            .about-rebrand2_image {
                flex: none;
                width: 80%;
                max-width: 320px;
                margin: 0 auto;
            }
            .about-rebrand2_promise {
                margin: 36px 0;
                font-size: 20px;
                text-align: left;
            }
        }
    }

    /* OEM：上に文章、下に写真を横いっぱいに並べる。薄いクリーム色の角丸の箱にまとめる */
    .about-oem {
        padding: 0 30px 30px;

        .about-oem_box {
            max-width: 1200px;
            margin: 0 auto;
            padding: 48px;
            background: #fff8dc;
            border-radius: 16px;
            box-sizing: border-box;
            text-align: center;
        }
        .about-oem_detail {
            position: relative;
            max-width: 760px;
            margin: 0 auto 40px;

            p {
                margin: 0 0 1em;
                line-height: 1.7;
                text-align: left;
            }
        }
        /* 紙吹雪の飾り。見出しの「制作」の右肩に添える（文字の大きさに合わせて伸び縮みする） */
        .about-oem_title .about-oem_deco {
            position: relative;
            display: inline-block;
            font-size: inherit;
            font-weight: inherit;
        }
        .about-oem_title .about-oem_deco::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 2.6em;
            height: 2.6em;
            background: url('../images/pages/about-model20.png') center / contain no-repeat;
            transform: translate(58%, -46%);
            pointer-events: none;
        }
        .about-oem_detail .about-oem_label {
            display: inline-block;
            text-align: center;
            margin: 0 0 16px;
            padding: 4px 14px;
            background: #fccb00;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.08em;
            line-height: 1.6;
        }
        .about-oem_title {
            margin: 0 0 24px;
            font-size: 28px;
            font-weight: 900;
            line-height: 1.6;
            letter-spacing: 0.03em;
        }
        .about-oem_title .about-oem_marker {
            font-size: inherit;
            font-weight: inherit;
            background: linear-gradient(transparent 62%, #fccb00 62%);
        }
        .about-oem_button {
            margin-top: 28px;
        }
        .about-oem_button a {
            display: inline-block;
            padding: 14px 32px;
            background: #fccb00;
            border: 2px solid #fccb00;
            border-radius: 999px;
            color: #333;
            font-size: 16px;
            font-weight: 700;
            text-decoration: none;
            transition: background-color 0.2s;
        }
        .about-oem_button a::after {
            content: "→";
            margin-left: 10px;
        }
        .about-oem_button a:hover {
            background: #fff;
            color: #333;
            text-decoration: none;
        }
        /* 写真は同じ比率に切りそろえ、等間隔に並べる */
        .about-oem_img {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
            margin: 0;
            padding: 0;

            li {
                margin: 0;
            }
            img {
                display: block;
                width: 100%;
                aspect-ratio: 3 / 2;
                object-fit: cover;
                border-radius: 8px;
            }
        }

        @media screen and (max-width: 1080px) {
            .about-oem_box {
                padding: 40px 32px;
            }
            .about-oem_img {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        @media screen and (max-width: 680px) {
            padding: 0 10px 30px;

            .about-oem_box {
                padding: 32px 18px 24px;
            }
            .about-oem_title {
                font-size: 22px;
            }
            .about-oem_detail {
                margin-bottom: 28px;
            }
            .about-oem_img {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 6px;
            }
        }
    }

    /* 会員価格が1番お得。
       控えめに見せるブロック。面や枠は使わず、白地のまま上下に黄色の細い線を引くだけ。
       文字も大きくしすぎない */
    .about-bestrate2 {
        margin-top: 10px;
        padding: 0 30px;
        text-align: center;

        .about-bestrate2_panel {
            max-width: 860px;
            margin: 0 auto;
            padding: 36px 0 32px;
            border-top: 3px solid #fccb00;
            border-bottom: 3px solid #fccb00;
        }
        .about-bestrate2_crown {
            width: 52px;
            margin: 0 auto 12px;

            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }
        .about-bestrate2_title {
            margin: 0 0 24px;
            color: #222;
            font-size: 24px;
            font-weight: 900;
            line-height: 1.5;
            letter-spacing: 0.03em;
        }
        .about-bestrate2_title .about-bestrate2_title-sub {
            display: block;
            color: #555;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.08em;
        }
        .about-bestrate2_title .about-bestrate2_title-em {
            color: #c93277;
            font-size: inherit;
            font-weight: 900;
        }
        .about-bestrate2_text {
            max-width: 720px;
            margin: 0 auto 24px;
            text-align: left;

            p {
                margin: 0 0 0.8em;
                color: #333;
                font-size: 15px;
                line-height: 1.8;
            }
            p:last-child {
                margin-bottom: 0;
            }
            .about-bestrate2_key {
                color: #222;
                font-size: inherit;
                font-weight: 900;
            }
        }
        .about-bestrate2_chara img {
            display: block;
            width: 100%;
            max-width: 520px;
            height: auto;
            margin: 0 auto;
        }
        .about-bestrate2_note {
            max-width: 860px;
            margin: 14px auto 0;
            color: #888;
            font-size: 12px;
            line-height: 1.7;
            text-align: left;
        }

        @media screen and (max-width: 780px) {
            padding: 0 10px;

            .about-bestrate2_title {
                font-size: 20px;
            }
            .about-bestrate2_title .about-bestrate2_title-sub {
                font-size: 14px;
            }
        }
    }

    /* メーカー・ブランド「クラフテリオ」の紹介。
       控えめな補足のブロック。ごく薄いグレーのベタ面に、中央 1 列で小さく置く。枠線・角丸・色は使わない */
    .about-maker2 {
        padding: 0 30px;

        .about-maker2_inner {
            max-width: 860px;
            margin: 0 auto;
            padding: 40px 48px;
            background: #f5f5f5;
            box-sizing: border-box;
            text-align: center;
        }
        .about-maker2_label {
            margin: 0 0 12px;
            color: #888;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.15em;
        }
        .about-maker2_logo img {
            width: 60%;
            max-width: 170px;
        }
        .about-maker2_title {
            margin: 12px 0 22px;
            color: #555;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.7;
            letter-spacing: 0.05em;
        }
        .about-maker2_body {
            max-width: 680px;
            margin: 0 auto;
            color: #555;
            font-size: 14px;
            line-height: 1.9;
            text-align: left;

            p {
                margin: 0 0 0.9em;
            }
            p:last-child {
                margin-bottom: 0;
            }
        }

        @media screen and (max-width: 780px) {
            padding: 0 10px;

            .about-maker2_inner {
                padding: 30px 20px;
            }
        }
    }

    /* 先生方へ：クラフテリオのご案内。
       クラフテリオのサイトの「授業お役立ちコラム」に出てくる、マス目のノートの体裁を使う。
       ・地は白に水色の細い方眼（CSS のグラデーションで描く。画像は使わない）
       ・3 つの特長は、ノートに画びょうで留めた白いメモ（3 枚で色違い。上に青い丸い画びょう）
       ・ボタンは「MORE」を添えたピンクの丸いボタン
       色はクラフテリオのサイトのもの（水色 #5ab4dc、青 #2896c8、黄 #ffe146、ピンク #dc78a0、黄緑 #82c260） */
    .about-teacher3 {
        padding: 0 30px;
        text-align: center;

        .about-teacher3_note {
            max-width: 1100px;
            margin: 0 auto;
            padding: 60px 56px 56px;
            /* 20px ごとの細い線と、100px ごとの少し濃い線で方眼にする */
            background-color: #fff;
            background-image:
                linear-gradient(#b9dcee 1px, transparent 1px),
                linear-gradient(90deg, #b9dcee 1px, transparent 1px),
                linear-gradient(#e0f0f8 1px, transparent 1px),
                linear-gradient(90deg, #e0f0f8 1px, transparent 1px);
            background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
            background-position: -1px -1px;
            border: 4px solid #5ab4dc;
            box-sizing: border-box;
        }
        /* 見出しの行：左にキャラクター、右に見出しとロゴ。行ごと中央に置き、文字は左揃え。
           キャラクターは、右のかたまり（見出し 2 行＋ロゴ）の上下中央に来る */
        .about-teacher3_head {
            display: flex;
            justify-content: center;
            align-items: center;
            /* 見出しの左端が、上のラベル（小学校・中学校の先生方へ）の左端とそろう間隔。
               文字数と文字サイズから計算した値なので、ラベルや見出しの文言・大きさを変えたら合わせ直す */
            gap: 81px;
            margin-bottom: 32px;
            text-align: left;
        }
        .about-teacher3_chara {
            position: relative;
            flex: 0 0 auto;
            /* 上下の余白を同じにして、テリオくんの絵そのものが右のかたまりの上下中央に来るようにする */
            /* 左の余白は、吹き出しの左の線がちょうど収まる分だけ。余分に取ると、行が中央からずれて見える */
            padding: 10px 0 10px 20px;

            img {
                display: block;
                width: 150px;
                height: auto;
            }
        }
        /* キャラクターの左肩のひとこと。クラフテリオのサイトの形をそのまま写している。
           ・小さな縦書きの 3 行を、ななめに傾ける
           ・右に垂直の線、左にななめの線（2 本は平行ではなく、下に向かってすぼまる）
           位置は、文末の「！」がテリオくんの右耳の上に来るように合わせている（キャラクターの幅 150px が基準）。
           サイトでは白文字だが、白い方眼の上なので青にしている */
        .about-teacher3_voice {
            position: absolute;
            /* 文末の「！」が、テリオくんの右耳（向かって左の耳）のすぐ上に来る位置 */
            top: -23px;
            left: -5px;
            width: 80px;
            height: 112px;
            margin: 0;
            pointer-events: none;
        }
        .about-teacher3_voice::before,
        .about-teacher3_voice::after {
            content: "";
            position: absolute;
            width: 1.5px;
            background: #2896c8;
        }
        /* 左の線：ななめ */
        .about-teacher3_voice::before {
            /* 下の端を固定して、上の端を左へ倒す（文字に近い下側は動かさない） */
            top: 39px;
            left: 40px;
            height: 70px;
            transform: rotate(-31deg);
            transform-origin: bottom left;
        }
        /* 右の線：垂直 */
        .about-teacher3_voice::after {
            top: 13px;
            left: 73px;
            height: 77px;
        }
        .about-teacher3_voice .about-teacher3_voice-text {
            position: absolute;
            top: 6px;
            right: 23px; /* 右の線から離す。傾けると下へ行くほど右に寄るので、その分も見込んでいる */
            color: #2896c8;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: 0.1em;
            white-space: nowrap;
            writing-mode: vertical-rl;
            -webkit-writing-mode: vertical-rl;
            transform: rotate(-17deg);
            transform-origin: top right;
        }
        .about-teacher3_head .about-teacher3_title {
            margin-bottom: 0;
        }
        .about-teacher3_label {
            display: inline-block;
            margin: 0 0 18px;
            padding: 5px 22px;
            background: #5ab4dc;
            border-radius: 999px;
            color: #fff;
            font-size: 16px;
            font-weight: 900;
            letter-spacing: 0.1em;
            line-height: 1.6;
        }
        .about-teacher3_title {
            margin: 0 0 26px;
            color: #222;
            font-size: 28px;
            font-weight: 900;
            line-height: 1.6;
            letter-spacing: 0.04em;
        }
        /* 「クラフテリオ」は青の大きな文字に、黄色の蛍光ペンを引く */
        .about-teacher3_title .about-teacher3_name {
            color: #2896c8;
            font-size: 1.7em;
            font-weight: 900;
            font-style: normal;
            line-height: 1.2;
            background: linear-gradient(transparent 68%, #ffe146 68%);
        }
        .about-teacher3_logo {
            margin: 14px 0 0;

            img {
                display: block;
                width: 230px;
                max-width: 100%;
            }
        }
        .about-teacher3_lead {
            max-width: 800px;
            margin: 0 auto 48px;
            color: #222;
            font-size: 16px;
            line-height: 1.8;
            text-align: left;
        }
        /* リード文の中で強調する語句。太字にして、ノートに引いたような黄色の蛍光ペンを添える
           （見出しの「クラフテリオ」と同じ表現。strong なので、検索エンジン・AI にも重要な語句として伝わる） */
        .about-teacher3_lead .about-teacher3_key {
            font-size: inherit;
            font-weight: 900;
            background: linear-gradient(transparent 62%, #ffe146 62%);
        }
        /* 画びょうで留めた白いメモ */
        .about-teacher3_points {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 24px;
            margin: 0 0 44px;
            padding: 0;

            /* 3 枚のメモで、アイコン・見出し・説明文の行の高さを共有する（subgrid）。
               見出しが 1 枚だけ 2 行に折り返しても、説明文の書き出しの高さは 3 枚でそろう */
            li {
                position: relative;
                display: grid;
                grid-row: span 3;
                grid-template-rows: subgrid;
                row-gap: 0;
                justify-items: center;
                align-items: start;
                padding: 34px 22px 26px;
                background: #fff;
                border: 3px solid #5ab4dc;
                border-top-width: 12px;
                border-radius: 10px;
            }
            /* メモは 3 枚で色を変える（クラフテリオのサイトのタイルの 3 色：ピンク・黄緑・黄）。
               枠とアイコンに色を使い、文字は黒のまま */
            li:nth-child(1) {
                border-color: #dc78a0;
            }
            li:nth-child(2) {
                border-color: #82c260;
            }
            li:nth-child(3) {
                border-color: #f5c800;
            }
            li:nth-child(1) .about-teacher3_point-icon {
                color: #dc78a0;
            }
            li:nth-child(2) .about-teacher3_point-icon {
                color: #82c260;
            }
            li:nth-child(3) .about-teacher3_point-icon {
                color: #f5c800;
            }
            li::before {
                content: "";
                position: absolute;
                top: -22px;
                left: 50%;
                width: 22px;
                height: 22px;
                background: #2896c8;
                border: 3px solid #fff;
                border-radius: 50%;
                box-sizing: border-box;
                transform: translateX(-50%);
            }
            .about-teacher3_point-icon {
                margin-bottom: 12px;
                color: #5ab4dc;
                font-size: 40px;
                line-height: 1;
            }
            .about-teacher3_point-title {
                display: block;
                margin-bottom: 10px;
                color: #222;
                font-size: 19px;
                font-weight: 900;
                line-height: 1.5;
            }
            .about-teacher3_point-text {
                display: block;
                justify-self: stretch;
                color: #222;
                font-size: 14px;
                line-height: 1.6;
                text-align: left;
            }
        }
        .about-teacher3_closing {
            margin: 0 0 22px;
            color: #222;
            font-size: 18px;
            font-weight: 900;
            line-height: 1.6;

            /* 幅が足りないときは、読点のあと（2 つのかたまりの間）で改行する。
               1 行に押し込むと、画面幅によってはノートの面からはみ出していた */
            span {
                display: inline-block;
                font-size: inherit;
                font-weight: inherit;
            }
        }
        .about-teacher3_button a {
            display: inline-block;
            padding: 9px 56px 12px;
            background: #dc78a0;
            border-radius: 999px;
            color: #fff;
            font-size: 17px;
            font-weight: 900;
            line-height: 1.4;
            letter-spacing: 0.04em;
            text-decoration: none;
            transition: background-color 0.2s;
        }
        .about-teacher3_button .about-teacher3_button-more {
            display: block;
            color: #ffe146;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.16em;
        }
        .about-teacher3_button a:hover {
            background: #2896c8;
            color: #fff;
            text-decoration: none;
        }

        @media screen and (max-width: 780px) {
            padding: 0 10px;

            .about-teacher3_note {
                padding: 40px 18px 36px;
            }
            .about-teacher3_head {
                flex-direction: column;
                gap: 14px;
                text-align: center;
            }
            .about-teacher3_logo img {
                margin: 0 auto;
            }
            .about-teacher3_label {
                font-size: 14px;
            }
            .about-teacher3_title {
                font-size: 19px;
            }
            .about-teacher3_lead {
                margin-bottom: 36px;
                font-size: 15px;

                br {
                    display: none;
                }
            }
            .about-teacher3_points {
                grid-template-columns: 1fr;
                gap: 28px;
                margin-bottom: 32px;
            }
            .about-teacher3_closing {
                font-size: 15px;
            }
            .about-teacher3_button a {
                display: block;
                padding: 9px 16px 12px;
                font-size: 15px;
            }
        }
    }
    .about-partition {
        text-align: center;
        margin: 8rem auto;

        img {
            width: 5%;
        }

        @media screen and (max-width: 680px) {
            img {
                width: 10%;
            }
        }
    }
}

.coupon-apply-button {
  border-radius: 5px;
  color: #fff;
  background: #e4007f;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 35px;
  line-height: 35px;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  transition: 0.5s;
  cursor: pointer;
  margin: 5px;
}

/*20241219*/
:root{
	--green: #009e9d;
	--pink: #e1187d;
	--blue: #1a9fe4;
	--yellow: #fbcc3d;
	--orange: #df682c;
	--purple: #ab5cbd;
}
.oem-message{
	background: var(--green);
	text-align: center;
	color: #fff;
	font-size: clamp(16px, 1.4vw, 24px) !important ;
	font-weight: 700;
	border-radius: 0.5em;
	padding: 0.7em;
	position: relative;
}
.oem-message b{
	color: var(--yellow);
	font-size: clamp(21px, 2vw, 32px) !important ;
	vertical-align: -0.02em;
}
.oem-message:after{
    content: "";
    display: block;
    width: 98.5%;
    height: 70%;
    border: 3px dashed #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 0.5em;
}
.oem-message br{
	display: none;
}
.oem-head{
	margin-bottom: 5em;
}
.oem-head,
.oem-head_photos{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
}
.oem-head_content{
	width: 50%;
	margin-right: 5%;
}
.oem-h2{
	font-size: clamp(14px, 1.8vw, 28px) !important ;
	font-weight: 900;
	line-height: 1.3;
}
.oem-head_photos{
	flex: 1;
}
.oem-head_photo{
	width: 49.5%;
	display: block;
	margin-bottom: 1%;
}
.oem-head_img{
	width: 100%;
	vertical-align: bottom;
	line-height: 0;
}
.oem-head_ul{
	display: flex;
	justify-content: center;
	margin: 2em auto;
	padding: 0;
}
.oem-head_li{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10em;
	height: 10em;
	border-radius: 50%;
	margin: 0 0.2em;
}
.oem-head_li:nth-child(1){
	background: var(--green);
}
.oem-head_li:nth-child(2){
	background: var(--pink);
}
.oem-head_li:nth-child(3){
	background: var(--blue);
}
.oem-head_li small,
.oem-head_li b{
	display: block;
	color: #fff;
	text-align: center;
	line-height: 1.2;
}
.oem-head_li small{
	font-size: clamp(11px, 1vw, 14px);
	margin-bottom: 0.5em;
}
.oem-head_li b{
	font-size: clamp(18px, 1.4vw, 24px);
	position: relative;
}
.oem-head_li b:before,
.oem-head_li b:after{
	content: "/";
	display: inline-block;
	color: #fff;
}
.oem-head_li b:before{
	transform: scale(-1, 1);
	padding-left: 0.1em;
}
.oem-head_p{
	font-size: clamp(13px, 1.2vw, 16px) !important;
}
@media screen and (max-width: 1480px) {
	.oem-head_img{
		object-fit: cover;
		aspect-ratio: 1 / 1;
	}
}
@media screen and (max-width: 1280px) {
	.oem-message:after {
		width: 98%;
		border: 2px dashed #fff;
	}
	.oem-head_content{
		width: 100%;
		margin-right: 0;
	}
	.oem-head_photos{
		width: 100%;
		flex: inherit;
	}
	.oem-head_photo{
		width:24%;
	}
	.oem-head_img{
		aspect-ratio: 1.5 / 1;
	}
	.oem-head_li{
		width: 9em;
		height: 9em;
	}
}
@media screen and (max-width: 580px) {
	.oem-h2 {
		font-size: 4vw !important ;
	}
	.oem-message {
		font-size: 4.5vw !important ;
		line-height: 1.2;
	}
	.oem-message br{
		display: block;
	}
    .oem-message:after {
        width: 97%;
        height: 80%;
    }
	.oem-head_photo{
		width:49.5%;
	}
	.oem-head_ul {
		margin: 1em auto;
	}
	.oem-head_li {
		width: 7em;
		height: 7em;
	}
}
.oem-issue{
	margin-bottom: 5em;
}
.oem-issue_h3{
	text-align: center;
	margin-bottom: 1em;
}
.oem-issue_h3 b{
	display: inline-block;
	font-size: clamp(19px, 1.7vw, 28px);
	position: relative;
}
.oem-issue_h3 b:before,
.oem-issue_h3 b:after{
	content: "/";
	display: inline-block;
}
.oem-issue_h3 b:before{
	transform: scale(-1, 1);
	padding-left: 0.1em;
}
.oem-issue_ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
.oem-issue_li{
	list-style: none;
	width: 24%;
	text-align: center;
}
.oem-issue_tanopen img{
	width: clamp(150px, 15vw, 220px);
}
.oem-issue_p,
.oem-issue_p b,
.oem-issue_p em{
	font-size: clamp(14px, 1.1vw, 18px) !important;
	font-weight: 700;
}
.oem-issue_p{
	background: #eee;
	padding: 0.5em 1em;
	line-height: 1.3;
	border-radius: 0.5em;
	position: relative;
}
.oem-issue_p b{
	display: inline-block;
	background: linear-gradient(180deg, #eee 0%, #eee 70%, var(--yellow) 70%, var(--yellow) 100%);
}
.oem-issue_p em{
	color: var(--pink);
	font-size: 110% !important;
}
.oem-issue_p:before,
.oem-issue_p:after {
    content: "●";
    color: #eee;
    display: block;
    position: absolute;
}
.oem-issue_p:before{
    right: 0.5em;
    bottom: -1.3em;
    font-size: 200%;
}
.oem-issue_p:after{
	right: 2.2em;
    bottom: -4em;
}
.oem-issue_p br:nth-of-type(2){
	display: none;
}
@media screen and (max-width: 1280px) {
	.oem-issue_p br:nth-of-type(2){
		display: block;
	}
	.oem-issue_p:before {
		right: 0;
		bottom: -1.2em;
	}
	.oem-issue_p:after {
		right: 1.2em;
		bottom: -3.5em;
	}
}
@media screen and (max-width: 680px) {
	.oem-issue {
		margin-bottom: 2em;
	}
	.oem-issue_li{
		width: 49%;
		margin-bottom: 1em !important;
	}
	.oem-issue_p br:nth-of-type(2){
		display: none;
	}
}
@media screen and (max-width: 480px) {
	.oem-issue_p br:nth-of-type(2){
		display: block;
	}
}

.oem-solution{
	margin-bottom: 5em;
}
.oem-solution_h4,
.oem-solution_h4 b{
	font-weight: 700;
	font-size: clamp(21px,3vw, 38px);
}
.oem-solution_h4{
	text-align: center;
	position: relative;
	padding-bottom: 1em;
	margin-bottom: 1.5em;
}
.oem-solution_h4 b{
	color: var(--pink);
}
.oem-solution_h4:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 70%;
    box-sizing: border-box;
    border: 5px solid var(--blue);
    border-top: none;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    translate: -50%;
}
.oem-solution_h4:after {
    content: "▼";
	color: var(--blue);
    position: absolute;
    bottom: -0.6em;
    left: 50%;
	transform: translateX(-50%);
}
.oem-solution_content{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.oem-solution_tanopen{
	width: clamp(100px, 12vw, 220px);
}
.oem-solution_ul{
	flex: 1;
	margin: 0;
	padding: 0;
}
.oem-solution_li{
	list-style: none;
	margin: 0 0 1em 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.oem-solution_item{
	flex: 1;
	width: calc(100% - 2em);
	margin: 0 0 0 auto;
	border-left: 10px solid var(--yellow);
	padding-left: 1em;
}
.oem-solution_h5{
	margin-bottom: 0.5em;
}
.oem-solution_h5 small{
	font-size: clamp(16px, 2vw, 24px);
	color: var(--pink);
	font-weight: 700;
	margin-bottom: 0.2em;
}
.oem-solution_h5 b{
	background: var(--yellow);
	padding: 0.3em 1em 0.4em;
	display: inline-block;
	border-radius: 3em;
	font-size: clamp(16px, 1.7vw, 24px);
}
.oem-solution_photo{
	width: 35%;
	margin-left: 2em;
}
.oem-solution_li:nth-child(2) .oem-solution_item{
	order: 1;
	border-left: none;
	border-right: 10px solid var(--yellow);
	padding-right: 1em;
}
.oem-solution_li:nth-child(2) .oem-solution_photo {
    margin-left: 0;
	margin-right: 1em;
}
.oem-solution_p{
    font-size: clamp(13px, 1.2vw, 16px) !important;
	margin-bottom: 0;
}
@media screen and (max-width: 1380px) {
	.oem-solution_img{
		object-fit: cover;
		aspect-ratio: 1.3 / 1;
	}
}
@media screen and (max-width: 680px) {
	.oem-solution{
		margin-bottom: 3em;
	}
	.oem-solution_li{
		align-items: flex-end;
		margin-bottom: 2em;
	}
	.oem-solution_li:last-child{
		margin-bottom: 0;
	}
	.oem-solution_photo{
		width: 100%;
		margin: 1em 0 0 !important;
		order: 2 !important;
	}
	.oem-solution_img{
		object-fit: cover;
		aspect-ratio: 1.7 / 1;
	}
}

.oem-cv{
	text-align: center;
	margin-bottom: 8em;
}
.oem-cv_small{
	display: inline-block;
	position: relative;
	font-size: clamp(13px, 1.2vw, 16px) !important;
	margin-bottom: 0.2em;
	color: var(--pink);
}
.oem-cv_small:before,
.oem-cv_small:after{
	content: "/";
	display: inline-block;
	transform: scale(1.1, 1.1);
}
.oem-cv_small:before{
	transform: scale(-1.1, 1.1) ;
	padding-left: 0.2em;
}
.oem-cv_a{
	display: inline-block;
	font-size: clamp(16px, 2.4vw, 28px) !important;
	padding: 0.5em 1.5em 0.6em;
	background: var(--pink);
	box-shadow: 0 3px 2px rgba(0,0,0,0.3);
	border-radius: 3em;
	color: #fff;
	transition: 0.3s all;
	position: relative;
}
.oem-cv_a:hover{
	background: var(--yellow);
	color: #000;
}
.oem-cv_a:after{
	content: "";
	display: block;
	width: 4em;
	height: 4em;
	background: url("../images/oem/tanopen07.png") no-repeat;
	background-size: cover;
	position: absolute;
	bottom: -0.3em;
	right: -2.5em;
}
@media screen and (max-width: 480px) {
	.oem-cv{
		margin-left: -2em;
		margin-bottom: 5em;
	}
}

/*OEM POINT*/
.oem-points{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.oem-point{
	width: 32%;
	text-align: center;
	background: #fbcc3d38;
	padding: 1em;
	border-radius: 1em;
}
.oem-point_num{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.7em;
	height: 1.7em;
	margin: -1em auto 0.2em;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	line-height: 1;
}
.oem-point_num,
.oem-point_num i{
	font-size: clamp(24px, 3vw, 38px);
}
.oem-point_mark{
	padding: 0.5em 0;
}
.oem-point_mark i{
	font-size: clamp(90px, 10vw, 120px);
	color: var(--yellow);
}
.oem-point_h5{
	color: var(--blue);
	font-size: clamp(16px, 1.4vw, 24px) !important;
	font-weight: 700;
	margin: 0.5em 0;
}
.oem-point_p{
	line-height: 1.3;
	font-size: clamp(13px, 1.3vw, 16px) !important;
	margin-bottom: 0.5em;
}
.oem-point_p a{
	line-height: 1.3;
	font-size: clamp(13px, 1.3vw, 16px) !important;
	color: var(--pink);
	text-decoration: underline;
}
.oem-point_p a:hover{
	color: var(--blue);
}
.oem-creation_ol{
	display: flex;
	justify-content: space-between;
    background: #eee;
    padding: 2em !important;
    border-radius: 1em;
}
.oem-creation_li{
	width: 31.3%;
	display: flex;
	align-content: space-between;
	flex-wrap: wrap;
}
.oem-creation_header,
.oem-creation_imgs{
	width: 100%;
}
.oem-creation_h4{
	background: var(--blue);
	color: #fff;
	text-align: center;
	padding: 0.5em 0;
	line-height: 1;
	font-size: clamp(15px, 1.4vw, 21px) !important;
	margin-bottom: 0.5em;
	letter-spacing: 0;
}
.oem-creation_img:first-child{
	margin-bottom: 1em;
}
.oem-creation_img{
    border: 5px solid #fff;
}
.oem-creation_p{
	font-size: clamp(13px, 1.3vw, 16px) !important;
	line-height: 1.4;
	margin: 0.5em 0 !important;
}
.oem-support_ol{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3em;
}
.oem-support_h5{
	font-size: clamp(17px, 2vw, 34px) !important;
	margin-bottom: 0.5em;
	font-weight: 700;
	line-height: 1.3;
	padding-left: 0.5em;
}
.oem-support_li:first-child .oem-support_h5{
	color: var(--blue);
	border-left: 10px solid var(--blue);
}
.oem-support_li:nth-child(2) .oem-support_h5{
	color: var(--pink);
	border-left: 10px solid var(--pink);
}
.oem-support_li:nth-child(3) .oem-support_h5{
	color: var(--yellow);
	border-left: 10px solid var(--yellow);
}
.oem-support_li:nth-child(4) .oem-support_h5{
	color: var(--green);
	border-left: 10px solid var(--green);
}
.oem-support_li:nth-child(5) .oem-support_h5{
	color: var(--orange);
	border-left: 10px solid var(--orange);
}
.oem-support_li:nth-child(6) .oem-support_h5{
	color: var(--purple);
	border-left: 10px solid var(--purple);
}
.oem-support_img{
	display: block;
	margin-bottom: 1em;
	position: relative;
}
.oem-support_p{
	line-height: 1.3;
	margin-bottom: 0;
}
.oem-support_a{
	display: inline-block;
	margin: 0 0 0 auto;
	color: #fff;
	line-height: 1;
	padding:0.6em 2em 0.7em;
	border-radius: 3em;
	font-size: clamp(14px, 1.2vw, 18px) !important;
	position: absolute;
	right: 0.5em;
	bottom: 0.7em;
	transition: 0.3s all;
}
.oem-support_li:first-child .oem-support_a{
	background: var(--blue);
}
.oem-support_li:nth-child(2) .oem-support_a{
	background: var(--pink);
}
.oem-support_li:nth-child(3) .oem-support_a{
	background: var(--yellow);
}
.oem-support_li:nth-child(4) .oem-support_a{
	background: var(--green);
}
.oem-support_li:nth-child(5) .oem-support_a{
	background: var(--orange);
}
.oem-support_li:nth-child(6) .oem-support_a{
	background: var(--purple);
}
.oem-support_a:hover{
	color: #000;
	background: #fff !important;
}
/*
.oem-list{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2em 1em;
}
.oem-list_li{
	width: 100%;
    -webkit-flex-basis: 100%;
    max-width: 100%;
	margin-bottom: 0 !important;
}
*/
.oem-list_thumb{
	margin-bottom: 0.5em;
}
.oem-list_img{
	display: block;
	object-fit: cover;
	background: #eee;
	aspect-ratio: 1;
}
.oem-list_p{
	font-size: clamp(13px, 1.1vw, 15px) !important;
	line-height: 1.3;
	margin: 0.5em 0 0 !important;
}
.oem-product-list-title{
	font-size: clamp(15px, 1.1vw, 16px);
	line-height: 1.3;
}
.oem-cv_product .oem-cv_a{
	background: var(--yellow);
	color: #000;
}
.oem-cv_product .oem-cv_small{
	color: #000;
}
.oem-cv_product .oem-cv_a:after {
    width: 3.8em;
    height: 3.8em;
    background: url(../images/oem/tanopen08.png) no-repeat;
    background-size: cover;
}
.oem-cv_product .oem-cv_a:hover{
	background: var(--blue);
	color: #fff;
}
.oem-flow p{
	margin-bottom: 1.5em !important;
	font-size: clamp(14px, 1.1vw, 15px);
	line-height: 1.4;
}
.oem-flow p small{
	display: block;
	font-size: clamp(12px, 1vw, 13px);
    line-height: 1.4;
    margin: 0.6em 0;
}
.oem-cv_case .oem-cv_a{
	background: var(--blue);
	color: #fff;
}
.oem-cv_case .oem-cv_small{
	color: var(--blue);
}
.oem-cv_case .oem-cv_a:after {
    width: 3.8em;
    height: 3.8em;
    background: url(../images/oem/tanopen09.png) no-repeat;
    background-size: cover;
}
.oem-cv_case .oem-cv_a:hover{
	background: var(--pink);
}
.oem-flow-check{
    margin: 2em 0 1em;
    padding-left: 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.oem-flow_point-list{
    margin-bottom: 4em !important;
}
.oem-flow-check li{
    width: 33%;
    background: #eee;
    padding: 1em !important;
    margin-bottom: 0.5em !important;
}
.oem-flow-check li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    font-weight: 900;
    color: var(--blue);
    font-size: 160%;
    margin-right: 0.2em;
    display: inline-block;
    vertical-align: middle;
}
.oem-flow_ol li{
    padding: 0.5em 0 0.5em 1.2em !important;
    text-indent: -1.2em;
}
.oem-flow_ol li:before{
    content: "●";
    color: var(--pink);
    margin-right: 0.2em;
}
.oem-flow_point-list a,
.oem-flow_ol li a{
    text-decoration: underline;
    color: var(--pink);
}
.oem-flow_point-list a:hover,
.oem-flow_ol li a:hover{
    color: var(--blue);
}
.oem-list_swiper{
    overflow: hidden;
}
@media screen and (max-width: 780px) {
	.oem-creation_ol{
		padding: 2em 1em !important;
	}
	.oem-creation_li{
		width: 32.3%;
	}
	.oem-support_ol {
		gap: 1em;
	}
}
@media screen and (max-width: 680px) {
	.oem-points{
		display: block;
	}
	.oem-point{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: max-content 2fr;
		margin-bottom: 1em;
		position: relative;
	}
	.oem-point_num {
		position: absolute;
		top: 50%;
		left: -0.3em;
		transform: translateY(-50%);
		margin: inherit;
	}
	.oem-point_mark{
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		display: flex;
        justify-content: center;
        align-items: center;
		margin-left: 1em;
		padding: 0 1em;
	}
	.oem-point_mark i {
		font-size: clamp(40px, 8vw, 80px);
	}
	.oem-point_h5{
		grid-column: 2 / 6;
		grid-row: 1 / 2;
		text-align: left;
		margin-bottom: 0.2em;
	}
	.oem-point_p{
		grid-column: 2 / 6;
		grid-row: 2 / 3;
	}
	.oem-point_p{
		text-align: left;
	}
	.oem-point_p br{
		display: none;
	}
	.oem-creation_ol{
		display: block;
	}
	.oem-creation_li{
		width: 100%;
		display: block;
		margin-bottom: 1.5em !important;
	}
	.oem-creation_imgs{
		display: flex;
		justify-content: space-between;
	}
	.oem-creation_img{
		width: 49.5%;
		margin-bottom: 0.5em !important;
	}
	.oem-support_a{
		padding:0.6em 1em 0.7em;
	}
	.oem-flow p br{
		display: none;
	}
}
@media screen and (max-width: 580px) {
	.oem-support_ol {
		grid-template-columns: repeat(1, 1fr);
		gap: 2.5em;
	}
	.oem-support_h5{
		font-size: clamp(18px, 5vw, 24px) !important;
	}
}

/* Bookmark */
.bookmark {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bookmark-add-btn,
.bookmark-destroy-btn {
  padding: 5px 16px;
  border-radius: 3px;
  text-align: center;
  background-color: #fff;
  line-height: 1em;
  margin-bottom: 1em;
}
.bookmark-add-btn {
  color: #e4007f;
  border: 2px solid #e4007f;
}
.bookmark-add-btn i {
  color: #e4007f;
}
.bookmark-destroy-btn {
  color: #888;
  border: 2px solid #888;
}
.bookmark-destroy-btn i {
  color: #888;
}
.product-bookmark-list_ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bookmark-posts .add_cart button {
  width: 100%;
  background: #e4007f;
  padding: 5px 0 7px;
  border: none;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  line-height: 1em;
  cursor: pointer;
}

.product-bookmark_list_li {
  width: calc(50% - 1em);
  display: flex;
  align-items: flex-start;
  border: 1px solid #eee;
  padding: 8px 12px 8px 12px;
  margin-bottom: 1em;
  margin-right: 1em;
  border-radius: 2em;
  box-shadow: 0 0 8px #eee;
}
.product-bookmark_list_li a {
  width: 25%;
  margin: 1.4em 0;
}
.product-bookmark_list_li figure.square {
  width: 100%;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  overflow: hidden;
}

.product-bookmark_list_li figure.square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-content-sm {
  display: none;
}
.product-image-sm {
  display: none;
}
.bookmark-post-table_top{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: .8em;
}
.bookmark-post-table_top td{
  border-top: 1px solid #eee;
  padding: 4px 0;
  font-size: 14px;
}
.bookmark-post-table_top th{
  border-bottom: 1px solid #eee;
  padding: 4px 0;
  font-size: 10px;
  border-top: 1px solid #eee;
}
.bookmark-post-table_top th:nth-child(2),
.bookmark-post-table_top td:nth-child(2){
  text-align: center;
  background: #eee;
}
.bookmark-post-table_top td:nth-child(3){
  padding-right: 10px;
  text-align: right;
}
.bookmark-post-table_top td:last-child{
  width: 130px;
  text-align: right;
}
.bookmark-post-table_top td:last-child button{
  width: 100%;
  background: #e4007f;
  padding: 5px 0 7px;
  border: none;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  line-height: 1em;
  cursor: pointer;
}
.bookmark-post-table_top td:last-child button:hover{
  background: #009ce1;
}
.bookmark-post-table_top .kinds {
  width: 50%;
}
.bookmark-post-table_top .kinds .sku-name span {
  font-size: .9em !important;
  line-height: 1.4em;
}
.bookmark-post-table_top .price {
  width: 13%;
  font-weight: 700 !important;
  font-size: 1.4em !important;
}
.bookmark-post-table_top .price small {
  font-size: .6em !important;
}
.bookmark-post-table_top .code .sku-code {
  font-size: .7em;
}
.bookmark-buttons .bookmark-add-btn,
.bookmark-buttons .bookmark-destroy-btn {
  font-size: 10px;
  border: 1.5px solid;
}
@media screen and (max-width: 1600px) {
  .product-bookmark_list_li {
    width: 100%;
    margin-bottom: .8em;
    margin-right: 0;
  }
  .product-info {
    padding: 0 1em;
  }
  .bookmark-post-table_top tr{
    border-bottom: 1px solid #eee;
  }
}
@media screen and (max-width: 600px) {
  .product-bookmark_list_li {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: .8em;
    margin-right: 0;
  }
  .product-info {
    width: 100%;
    height: 100%;
    padding: 0;
    flex-direction: row;
    align-items: center;
  }
  .product-bookmark_list_li a {
    width: 40%;
    margin-right: .4em;
  }
  .product-list-items {
    width: 60%;
    align-items: center;
  }
  .product-content-pc {
    display: none;
  }
  .product-content-sm {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 1em 1em;
  }
  .sku-block::after {
    content: "";
    display: block;
    border-bottom: 1px solid #eee;
    margin: 1.2em 0;
  }
  .bookmark-posts .kinds {
    line-height: 1.4em;
  }
  .sku-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .3em;
  }
  .bookmark-posts .code {
    align-items: center;
    margin-bottom: .5em;
  }
  .bookmark-posts .code .sku-code{
    color: #666;
    font-size: .85em;
  }
  .bookmark-posts .product-list_p--stock {
    padding: .3em .8em;
    margin-right: .4em;
  }
  .bookmark-posts .price {
    font-size: 1.8em;
    font-weight: 700;
    margin-left: .1em;
  }
  .bookmark-posts .price small{
    font-size: .6em !important;
  }
  .product-image-sm {
    display: block;
  }
  .product-image-pc {
    display: none;
  }
  .bookmark-add-btn,
  .bookmark-destroy-btn {
    margin-left: 1em;
  }
  .bookmark-posts .add_cart button{
    width: 100%;
    background: #e4007f;
    padding: .5em 1.2em .6em 1.2em;
    border: none;
    border-radius: 3px;
    text-align: center;
    color: #fff;
    line-height: 1.2em;
    cursor: pointer;
  }
}