@charset "utf-8";
/* CSS information */
/* ===================================================================
  file name  : accordion_precaution
  author     : JRE MALL
  about      : ご注意事項　アコーディオン
  date       : 2025/03/19
  update     : 
=================================================================== */

/* ========== PC ========== */

/* ------------------------
   共通 
------------------------ */
/* --- .container --- */
.container {
  padding-bottom: 40px;
  /* background-color: #fff; */
	background-color: #ebf8fb;
  background-image: url(https://shopping.geocities.jp/honyaclubbook/paypay/img/tentouuketori/bg.png);
  font-size: 14px;
  line-height: 1.5;
  /* padding-top: 20px; */
	box-sizing: border-box;
}
a {
  color: #0077b3;
}

/* --- .section  --- */
.section {
  margin: 0 auto 50px;
	padding: 0 10px;
}
.section h2 {
  font-size: 26px;
  text-align: center;
  color: #6f99a4;
  font-weight: bold;
}
.section h3 {
	font-size: 20px;
	font-weight: bold;
	background-color: #30a08c;
	color: #fff;
	text-align: center;
	padding: 5px;
	margin-bottom: 30px;
}
span.attention {
  color: #FF0004;
  /* color: #ee6677; */
}
li div.button {
  width: 50%;
  margin: 10px 0;
  background-color: #eeeeee;
  border: solid 2px #ccc;
  border-radius: 15px;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  font-weight: bold;
}
li div.button a {
  padding: 10px !important;
  display: block;
}
li div.note {
  /* width: 30%; */
  font-size: 12px;
  color: #555;
  display: inline-block;
  padding: 0;
}

/* ------------------------
   .section#maincontents
------------------------ */
.section#maincontents {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
}
.section#maincontents .txt_area {
  background-color: #ffffff;
  color: #30a08c;
  font-size: 22px;
  padding: 20px;
  text-align: center;
  border-radius: 20px;
  font-weight: bold;
}


/* ------------------------
   .section#caution 
------------------------ */
.section#caution .inner {
	background-color: #fff;
	border-radius: 15px;
	padding: 20px;
	margin: 0 auto 30px;
	width: 90%;
	box-shadow: 2px 4px 12px rgb(0 0 0 / 10%);
}
.section#caution p {
  width: 85%;
  margin: 20px auto 10px;
  text-align: center;
  font-weight: bold;
}
.section#caution p span {
  color: #FF0000;
  font-size: 18px;
  font-weight: bold;
}
/* .inner .img_area {
  padding: 30px;
} */
.inner.ng .img_area {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.inner.ng .img_area img {
  width: 48%;
}




.section#caution li dl dt {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}
.section#caution li dl dd {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.section#caution li dl dd .img {
	width: 40%;
	text-align: center;
}
.section#caution li dl dd .txt {
	width: 55%;
}
.section#caution li dl dd .txt p {
	margin-bottom: 1.5em;
}
.section#caution li dl dd .txt p span {
	color: #dc0101;
}


/* ------------------------
   .section#faq 
------------------------ */
.section#faq h4 {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
}
/* --- .title-faq --- */
.title-faq {
  font-size: 18px;
  font-weight: bold;
  border-bottom: solid 3px #4c8795;
  padding: 5px 0;
  margin-bottom: 15px;
  color: #434343;
}
/* --- .accordion-area --- */
.accordion-area {
	width: 75%;
	margin: 0 auto;
}
.accordion-area h3.title.question {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 40px;
  border-bottom: solid 1px #fff;
  position: relative;
  background: url(https://shopping.c.yimg.jp/lib/honyaclubbook/ico_faq02.gif) no-repeat left 10px top 10px #30a08c;
  line-height: 1.5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
	margin-bottom: 0;
}
.accordion-area h3.title.question span.many {
  font-size: 16px;
}
.accordion-area .js-ac .title:after {
  content: '＋';
  position: absolute;
  right: 30px;
}
.accordion-area .js-ac .toggle {
  display: none;
}
.accordion-area .js-ac .title.is-active:after {
  content: '－';
}
/* .accordion-area .js-ac .toggle {
  display: block;
} */
.accordion-area .toggle.answer {
  margin-bottom: 40px;
  border: solid 1px #ccc;
  box-sizing: border-box;
  padding: 10px;
	background-color: #fff;
}
.accordion-area .toggle.answer ul {
  background: url(https://shopping.c.yimg.jp/lib/honyaclubbook/ico_faq03.gif) no-repeat left 0 top 5px;
}
.accordion-area .toggle.answer li {
  padding: 5px 30px;
}
.accordion-area .toggle.answer li a {
  padding: 0;
  line-height: 1.2;
}
.accordion-area .toggle.answer dt {
  margin-bottom: 5px;
}
.accordion-area .toggle.answer dd {
  text-indent: 1em;
}

/* ------------------------
   .section#store-service-area 
------------------------ */
#store-service-area {
  width: 70%;
  margin: 0 auto;
  border: solid 2px #ccc;
  box-sizing: border-box;
  padding: 20px;
  line-height: 1.5;
  text-align: center;
	background-color: #fff;
}
#store-service-area ul.btn-area {
  margin: 20px 0;
}
/* #store-service-area p.customer {
  margin-top: 20px;
} */

/* ------------------------
   #page-top 
------------------------ */
#page-top {
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 9999;
}
#page-top a {
  display: block;
  z-index: 999;
  padding: 15px 0 0 15px;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  background-color: #000000;
  color: #ffffff;
  opacity: 0.5;
}
#page-top a:hover {
  opacity: 0.4;
}
.arrow {
  display: block;
  width: 10px;
  height: 10px;
  border: 6px solid;
  border-color: #ffffff #ffffff transparent transparent;
  transform: rotate(-45deg);
  margin: 7px 0 0 4px;
}	

/* ------------------------
   display 
------------------------ */
.pc_display {
	display: block;
}
.sp_display {
	display: none;
}

/* ========== /PC ========== */


/* ========== SP ========== */
@media screen and (max-width: 767px) {
  /* ------------------------
   共通 
------------------------ */
  /* --- .container --- */
  /* .container {
    padding: 10px 0 0;
  } */
	
	/* --- .sectionr --- */
  .section {
    margin: 0 auto;
		padding: 10px 0;
  }
	  .section h2 {
    font-size: 22px;
  }

  li div.button {
    width: 100%;
  }
  li div.note {
    width: 100%;
    text-align: center;
  }
	
  /* ------------------------
   .section #maincontents
------------------------ */	
  .section#maincontents {
    flex-wrap: wrap;
  }
  .section#maincontents .txt_area {
    font-size: 16px;
  }
	.section#maincontents .icon_area dl {
		width: 100%;
	}
	.section#maincontents .icon_area dl dt img {
		width: 70%;
	}
			
  /* ------------------------
   .section #caution
------------------------ */	
  .section#caution .inner {
    width: 80%;
  }
  .inner .img_area {
    padding: 20px 0;
    flex-direction: column;
  }
  .section#caution p {
    width: 95%;
  }
  .section#caution p span {
    font-size: 14px;
    line-height: 1.4;
  }
  .inner.ng .img_area img {
    max-width: 100%;
    height: auto;
  }
    .inner.ng .img_area img:first-child {
      margin-bottom: 30px;
  }

  
  
	.section#caution li {
		padding: 20px 10px;
	}
	.section#caution li:last-child {
		margin: 0 auto;
	}
	.section#caution li dl dd {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.section#caution li dl dd .img {
		width: 100%;
		margin-bottom: 20px;
	}
	.section#caution li dl dd .txt {
		width: 100%;
		margin-bottom: 20px;
	}
	
  /* ------------------------
   .section#faq
------------------------ */
	.section#faq .section {
		margin: 0 auto;
	}
  /* --- .title-faq --- */
  .title-faq {
    /* padding-top: 20px; */
    margin-bottom: 10px;
  }
  /* --- .accordion-area --- */
  .accordion-area {
    width: 100%;
  }
  .accordion-area h3.title.question {
    text-align: left;
  } 
  .accordion-area .js-ac .title:after {
    content: '＋';
    position: absolute;
    right: 20px;
  }
  .accordion-area .js-ac .toggle {
    display: none;
  }
  .accordion-area .js-ac.is-active .title:after {
    content: '－';
  }
  .accordion-area .js-ac.is-active .toggle {
    display: block;
  }
  .accordion-area .toggle.answer ul {
    background: url(https://shopping.c.yimg.jp/lib/honyaclubbook/ico_faq03.gif) no-repeat left 0 top 5px;
  }
  .accordion-area .toggle.answer li {
    letter-spacing: normal;
    padding: 5px 0 5px 30px;
  }
  .accordion-area .toggle li a {
    position: relative;
    display: inline-block;
    /*padding-right: 30px;*/
    padding: 15px 30px 15px 10px;
  }
  /* .accordion-area .toggle li a:after {
    content: "〉";
    vertical-align: middle;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 15px;
  } */
  
  /* ------------------------
   .section#store-service-area
------------------------ */
  #store-service-area {
    width: 100%; 
    padding: 10px;
  }
  #store-service-area p {
  text-align: left;
  }
  
  /* ------------------------
   #page-top 
------------------------ */
#page-top {
  right: 2%;
}
	
  /* ------------------------
   display 
------------------------ */
.pc_display {
	display: none;
}
.sp_display {
	display: block;
}

  
}
/* ========== /SP ========== */