@charset "UTF-8";

.otherPageTtl1 {

  font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif !important;

  font-weight: bold;

  font-size: 28px;

  margin: 0 0 30px;

}

.sbuTitle {

	font-size: 18px;

	text-align: center !important;

	margin-bottom: 10px;

}

.tipsBox {

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.tipsBox > * {

	width: 48.4375%;

	text-align: left;

}

.tipsBox + .tipsBox {

	margin-top: 50px;

}

.tipsBox:nth-child(odd) > .tipsBoxImg {

	order: 1;

}

.tipsBox:nth-child(odd) > .tipsBoxMain {

	order: 2;

}

.tipsBox:nth-child(even) > .tipsBoxImg {

	order: 2;

}

.tipsBox:nth-child(even) > .tipsBoxMain {

	order: 1;

}

.tipsBox > .tipsBoxMain .item-detail-intro__hdg {

	line-height: 1.1;

}

.text-align1 { text-align: center; }

.mt01 { margin-top: 0px; }

.mt02 { margin-top: 20px; }

.ml15 { margin-left: 15px !important; }



@media screen and (min-width: 768px) and (max-width: 1024px) {

.text-align1 { text-align: center; }

.mt01 { margin-top: 0px; }

.mt02 { margin-top: 20px; }

.ml15 { margin-left: 0px !important; }

}



@media screen and (max-width: 767px) {

.otherPageTtl1 {

    font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif!important;

    font-weight: bold;

    font-size: 20px;

    margin: 0 0 20px;

}

.otherPageBoxOtl2.column-module-5_6 .otherPageTtl2 {

    font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif !important;

    font-weight: bold;

    font-size: 18px!important;

    border-bottom: 1px solid #333;

    padding-bottom: 7px;

}

.tipsBox {

	flex-direction: column;

}

.tipsBox:nth-child(odd) > .tipsBoxImg,

.tipsBox:nth-child(even) > .tipsBoxImg {

	order: 1;

	width: 100%;

}

.tipsBox:nth-child(odd) > .tipsBoxMain,

.tipsBox:nth-child(even) > .tipsBoxMain {

	order: 2;

	width: 100%;

}

.tipsBox > .tipsBoxMain .item-detail-intro__hdg {

	text-align: center;

 }

.text-align1 { text-align: left; }

.mt01 {margin-top: -40px; }

.mt02 { margin-top: 0px; }

.ml15 { margin-left: 0px !important; }

}



/*---------------------------------------

　「安全上のご注意」アコーディオン 

---------------------------------------*/

.accordion {

  width: 960px;

  background: #f2f2f2;

  margin: 10px auto;

}

.accordion-header {

  height: 100px;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  cursor: pointer;

  font-size: 20px;

  font-weight: 300;

  color: #333;

  background-color: #f2f2f2;

  text-align: center;

}

.accordion-icon {

  position: absolute;

  right: 20px;

  font-size: 32px;

  color: #d6001c;

  transition: transform 0.5s;

}

.accordion-content {

  display: none;

  padding: 30px;

  background-color: #f2f2f2;

  animation: fadeIn 0.5s ease-in-out;

}

.accordion-content ul {

  padding-left: 10px;

}

.accordion-content li {

  text-indent: -0.5em;

  padding-left: 0.5em;

}

.accordion p {

  text-indent: -1em;

  padding-left: 1em;

}

.image-wrap {

  display: flex;

  align-items: flex-start;

  gap: 20px;

  max-width: 960px;

  margin: 0 auto;

}

.text-list {

  flex: 1;

  list-style: disc inside;

  padding: 0;

  margin: 0;

}

.text-list li {

	margin-bottom: 0em;

  text-indent: -0.5em;

  padding-left: 0.5em;

}

.image-box {

  flex-shrink: 0; 

}

.image-box img {

  width: 200px; 

  height: auto;

  display: block;

}



@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(-5px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@media screen and (min-width: 768px) and (max-width: 1024px) {

.accordion {

    width: 100%;

    padding: 0 15px;

    box-sizing: border-box;

}

.accordion-header {

    height: 80px;

    font-size: 18px;

  }

.accordion-icon {

    font-size: 28px;

    right: 15px;

  }

.accordion-content {

    padding: 20px;

  }

.accordion-content ul {

  padding-left: 10px;

}

.accordion-content li {

  text-indent: -0.5em;

  padding-left: 0.5em;

}

.accordion p {

  text-indent: -1em;

  padding-left: 1em;

}

.image-wrap {

    flex-direction: row;

    flex-wrap: wrap;

    gap: 16px;

}

.text-list {

    flex: 1 1 60%;

}

.image-box {

    flex: 1 1 200px;

    max-width: 200px;

}

.image-box img {

    width: 100%;

    height: auto;

  }

}



@media screen and (max-width: 767px) {

.accordion {

    width: 100%;

    padding: 0 16px;

    box-sizing: border-box;

}

.accordion-header {

    height: 70px;

    font-size: 16px;

}

.accordion-icon {

    font-size: 24px;

    right: 15px;

}

.accordion-content {

    padding: 15px 15px 30px 15px;

}

.accordion-content ul {

  padding-left: 10px;

}

.accordion-content li {

  text-indent: -0.5em;

  padding-left: 0.5em;

}

.accordion p {

  text-indent: -1em;

  padding-left: 1em;

}

.image-wrap {

    flex-direction: column;

    align-items: center;

    gap: 16px;

}

.image-box img {

    width: 100%;

    max-width: 300px;

    height: auto;

    display: block;

    margin: 0 auto;

}

.text-list {

    width: 100%;

}

.text-list li {

    margin-bottom: 0em;

		text-indent: -0.5em;

		padding-left: 0.5em;

  }

}



/*--画像の「※ イメージ」テキスト--*/

.box-image-txt {

  margin: 15px auto 0;

  padding: 0 25px;

  max-width: 720px;

  -webkit-transition: opacity .2s linear;

  transition: opacity .2s linear;

  font-size: 0;

  line-height: 1;

}

.box-image-txt:after {

  content: "※イメージ";

  margin-top: 8px;

  display: block;

  text-align: right;

  font-size: 12px;

}



@media all and (min-width: 767px), print {

.box-image-txt {

  margin: 15px auto 0;

  padding: 0 25px;

  max-width: 720px;

  -webkit-transition: opacity .2s linear;

  transition: opacity .2s linear;

  font-size: 0;

  line-height: 1;

}

.box-image-txt:after {

  content: "※イメージ";

  margin-top: 8px;

  display: block;

  text-align: right;

  font-size: 12px;

  }

}

	

/* スマホ用<br> */

@media screen and (max-width:414px) {

	.br-sp { display: block; }

	.br-tb { display: none; }

	.br-pc { display: none; }

}

/* tablet用<br> */

@media only screen and (min-width:415px) and (max-width:834px) {

	.br-sp { display: none; }

	.br-tb { display: block; }

	.br-pc { display: none; }

}

/* pc用<br> */

@media screen and (min-width:835px) {

	.br-sp { display: none; }

	.br-tb { display: none; }

	.br-pc { display: block; }

}



/* 20250805追加 */

.item-detail-title {

  border-top: solid 1px #d2d2d2;

}



.otherPageBoxOtl2.column-module-5_6 .areaR .imgArea,

.otherPageBoxOtl2.column-module-5_6 .areaL .imgArea {

  position: relative;

}



.otherPageBoxOtl2.column-module-5_6 .areaR .note,

.otherPageBoxOtl2.column-module-5_6 .areaL .note {

  font-size: 11px;

  padding: 0;

  position: absolute;

  bottom: 0;

  right: 1em;

  width: fit-content;

}



/* ----------------------------------------

  ムービーエリア：横2つ並び（グレー背景）

---------------------------------------- */

.movie_title {

    font-family: "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", HiraMinPro-W3, "HG明朝B", "ＭＳ 明朝", "MS Mincho", serif !important;

    font-weight: bold;

    font-size: 28px;

    margin: 0 0 25px;

    text-align: center;

}

@media screen and (max-width: 766px) {

  .movie_title {

      margin: 0 0 15px;

  }

}

.movie-note-black {

    font-size: 13px;

    padding-top: 10px;

    padding-bottom: 20px;

    text-align: center !important;

}

@media screen and (max-width: 766px) {

  .movie-note-black {

      padding-bottom: 0px;

  }

}

.movie-annotation_slide {

    font-size: 11px;

    padding-right: 20px;

    text-align: right !important;

}

@media screen and (min-width: 767px) and (max-width: 1028px) {

  .movie-annotation_slide {

    font-size: 11px;

    padding-right: 0px;

    text-align: right !important;

  }

}  

@media screen and (max-width: 766px) {

  .movie-annotation_slide {

    font-size: 11px;

    padding-right: 0;

    text-align: center !important;

  }

}



.BC-gray { background-color:#f4f4f4; }



.movie-BoxBC {

    width: 900px;

    margin: 0 auto;

    padding: 40px 0 20px;

    position: relative;

    z-index: 1;

}

.box-movie_area_2BC {

    margin: 100px auto 50px;

    text-align: center;

    clear: both;

}

.box-movie_area_2BC .movie-Box {

    padding-bottom: 0px;

}

.box-movie_area_2BC .twoClm {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 40px;

}



.box-movie_area_2BC .areaL .imgArea img,

.box-movie_area_2BC .areaR .imgArea img  {

    width: 100%;

}

.box-movie_area_2BC .areaL p,

.box-movie_area_2BC .areaR p  {

    padding-top: 12px;

    padding-bottom: 20px;

    margin: 0 auto;

    text-align: left;

}



@media screen and (min-width: 767px) and (max-width: 1028px) {

.movie-BoxBC {

    width: 100%;

    max-width: 768px;

    padding: 40px 25px 30px;

    position: relative;

    z-index: 1;

}

.box-movie_area_2BC {

    text-align: center;

    margin: 60px auto 0px;

    max-width: 768px;

    clear: both;

}

.box-movie_area_2BC .movie-Box {

    margin: 0;

    padding: 40px 20px;

}

.box-movie_area_2BC .twoClm {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 25px;

}

.box-movie_area_2BC .areaL .imgArea,

.box-movie_area_2BC .areaR .imgArea {

    width: 100%;

}

.box-movie_area_2BC .areaL .imgArea img,

.box-movie_area_2BC .areaR .imgArea img  {

    width: 100%;

}

.box-movie_area_2BC .areaL p,

.box-movie_area_2BC .areaR p  {

    padding-top: 12px;

    padding-bottom: 20px;

    text-align: left;

  }

}

@media screen and (max-width: 766px) {

.movie-BoxBC {

    width: 340px;

    padding: 40px 0px 20px;

    position: relative;

    z-index: 1;

} 

.box-movie_area_2BC {

    text-align: center;

    margin: 80px auto 60px;

}

.box-movie_area_2BC .movie-Box {

    margin: 0 auto;

    padding: 40px auto;

    clear: both;

}

.box-movie_area_2BC .twoClm {

    width: 100%;

    max-width: 340px;

    margin: 0 auto;

    grid-template-columns: 1fr;

}

.box-movie_area_2BC .areaL {

    width: 100%;

    margin: 0 auto;

}

.box-movie_area_2BC .areaR {

    width: 100%;

    margin: 20px auto 0px auto;

}

.box-movie_area_2BC .areaL .imgArea,

.box-movie_area_2BC .areaR .imgArea {

    width: 100%;

    margin: 0 auto;

    text-align: center;

}

.box-movie_area_2BC .areaL .imgArea img {

    width: 100%;

}

.box-movie_area_2BC .areaR .imgArea img {

    margin-top: 20px;

    width: 100%;

} 

.box-movie_area_2BC .areaL p,

.box-movie_area_2BC .areaR p  {

    padding-top: 12px;

    padding-bottom: 10px;

    width: 100%;

    text-align: left;

  }

}

.box-movie-pickup-video__play {

  display: block;

  position: relative;

}

.box-movie-pickup-video__play::after {

  content: '';

  margin-right: auto;

  margin-left: auto;

  width: 60px;

  height: 60px;

  display: block;

  position: absolute;

  top: 50%;

  right: 0;

  left: 0;

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

  background: url("../img/ic-play.png") no-repeat 0 0;

  background-size: 100% auto;

  opacity: 0.4;

}

@media screen and (max-width: 766px) {

  .box-movie-pickup-video__play::after {

    width: 15.51724%;

    height: 27.60736%;

  }

}



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

	modal

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

.movie__modal {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

  background-color: rgba(0, 0, 0, 0.8);

  opacity: 0;

  pointer-events: none;

  z-index: 10000;

  -webkit-transition: 0.4s opacity;

  transition: 0.4s opacity;

}

.movie__modal[data-active="true"] {

  opacity: 1;

  pointer-events: auto;

}

.movie__modal__inner {

  position: relative;

  width: 100%;

  max-width: 900px;

}

.movie__modal__inner::before {

  content: "";

  display: block;

  padding-top: 56.25%;

}

.movie__modal__inner iframe {

  position: absolute;

  top: 0;

  right: 0;

  width: 100% !important;

  height: 100% !important;

}

.movie__modal__close {

  position: absolute;

  top: 0;

  right: 0;

  width: 80px;

  height: 80px;

  background-color: #000;

  cursor: pointer;

}

@media screen and (max-width: 767px) {

  .movie__modal__close {

    width: 10.6666666667vw;

    height: 10.6666666667vw;

  }

}

.movie__modal__close::before,

.movie__modal__close::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  display: block;

  width: 50px;

  height: 2px;

  margin: auto;

  background-color: #fff;

}

.movie__modal__close::before {

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

}

.movie__modal__close::after {

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg);

}

@media screen and (max-width: 767px) {

  .movie__modal__close::before,

  .movie__modal__close::after {

    width: 6.6666666667vw;

    height: 0.2666666667vw;

  }

}