@charset "utf-8";
/***************************************************************************************************
	page_faq.css
***************************************************************************************************/
/*  */
#header .hbg_blk_1_1, #header .hbg_blk_1_2, #header .hbg_blk_1_3 {
  background-color: #595757;
}
/*  */
#footer {
  background-color: #fcf7ed;
}
/*
*/
#page_faq {
  width:100%;
  overflow: hidden;
  background-color: #fcf7ed;
}
#page_faq .pagebody {
  width:100%;
  z-index: 2;
}
#page_faq .blk_bk {
  display:block;
  pointer-events: none;
}
#page_faq .blk_bk_sp {
  display:none;
  pointer-events: none;
}
/*
*/
#page_faq .blk_1 {
  width:var(--tgt_wid_1);
  max-width: var(--max_wid_1);
  padding:280px 0 0 0;
  margin: auto;
}
/*  */
#page_faq .blk_1_1 {
  width:100%;
  z-index: 2;
}
#page_faq .blk_1_1 h2 {
  display: inline-block;
}
#page_faq .blk_1_1 h2 > span:nth-of-type(1) {
  display: block;
  z-index: 2;
}
#page_faq .blk_1_1 h2 > span:nth-of-type(1) br {
  display: none;
}
#page_faq .blk_1_1 h2 > span:nth-of-type(1) span:nth-of-type(1) {
  display: block;
  font-family: 'Baloo Da 2', cursive;
  font-weight: 800;
  font-size: 70px;
  line-height: 1;
  letter-spacing: .02em;
  color:#898989;
}
#page_faq .blk_1_1 h2 > span:nth-of-type(1) span:nth-of-type(2) {
  display: block;
  font-size:20px;
  line-height: 1;
  color:#898989;
  font-weight: 500;
  padding:5px 0 0 0;
}
#page_faq .blk_1_1 h2 .blk_bk {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 1;
}
/*  */
#page_faq .blk_1_1 h2 .blk_bk .shape_1 {
  position: absolute;
  left: -80px;
  top: -60px;
  width: 120px;
  height: 120px;
  background-image: url('../images/shapes/concept/concept_shape_2.svg');
	background-position: 0 0;
	background-size: 100% auto;
}
/*  */
#page_faq .blk_1_1 h2 .blk_bk .shape_2 {
  position: absolute;
  left: calc(100% + 200px);
  top: 10px;
  width: 64px;
  height: 124px;
  background-image: url('../images/shapes/concept/concept_shape_3.svg');
	background-position: 0 0;
	background-size: 100% auto;
}
/*
*/
#page_faq .blk_1_2 {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 1;
  pointer-events: none;
}
/*  */
#page_faq .blk_1_2 .blk_bk {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
#page_faq .blk_1_2 .blk_bk .shape_1 {
  position: absolute;
  left:50%;
  top:360px;
  width:100vw;
  height:391px;
  background-image: url('../images/shapes/concept/concept_shape_4.svg');
	background-position: 50% 0;
	background-size: max(2000px, 100%) 100%;
  transform:translateX(-50%);
}
#page_faq .blk_1_2 .blk_bk .shape_2 {
  position: absolute;
  left:50%;
  top:-20px;
  width:100vw;
  height:470px;
  background-image: url('../images/shapes/concept/concept_shape_1.svg');
	background-position: 50% 0;
	background-size: max(2000px, 100%) 100%;
  transform:translateX(-50%);
}
/*
*/
#page_faq .blk_2 {
  width:100%;
}
#page_faq .blk_2 > div {
  width:var(--tgt_wid_1);
  max-width: var(--max_wid_1);
  margin: auto;
  padding:140px 0 0 0;
}
#page_faq .blk_2 > div > ul {
  width:100%;
  display:flex;
  list-style: none;
  flex-wrap: wrap;
  justify-content: left;
}
#page_faq .blk_2 > div > ul li {
  display:block;
  padding:0 4% 4% 0;
}
#page_faq .blk_2 > div > ul li a {
  display:block;
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  padding:0 0 0 35px;
}
#page_faq .blk_2 > div > ul li a::before {
	position: absolute;
	display: block;
	content: '';
	width: 24px;
	height: 24px;
	left:0;
	top:-1px;
	background-color: #ffc072;
  border-radius: 50%;
}
#page_faq .blk_2 > div > ul li a::after {
	position: absolute;
	display: block;
	content: '';
	width: 14px;
	height: 14px;
	left:-2px;
	top:4px;
  border-bottom: 3px solid #fcf7ed;
  border-right: 3px solid #fcf7ed;
  transform-origin: 100% 100%;
  transform: scaleX(.8) rotate(45deg);
}
/*
*/
#page_faq .blk_3 {
  width:100%;
}
#page_faq .blk_3 > div {
  width:var(--tgt_wid_1);
  max-width: var(--max_wid_1);
  margin: auto;
  z-index: 2;
  padding:140px 0 0 0;
}
/*  */
#page_faq .blk_3 > div > section {
  width:100%;
  padding:0 0 140px 0;
}
#page_faq .blk_3 > div > section > div:nth-of-type(1) {
  width:100%;
  z-index: 2;
}
#page_faq .blk_3 > div > section > div h3 {
  display: block;
  padding:0 0 30px 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
}
#page_faq .blk_3 > div > section > .blk_bk {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 1;
}
/*  */
#page_faq .blk_3 .blk_faq {
  width:100%;
  padding:0 0 2% 0;
}
#page_faq .blk_3 .blk_faq input {
  display:none;
}
#page_faq .blk_3 .blk_faq h4 {
  width:100%;
  display: block;
}
#page_faq .blk_3 .blk_faq h4 > span {
	position: absolute;
	display: block;
	left:calc(93% + 20px);
	top:50%;
}
#page_faq .blk_3 .blk_faq h4 > span::before,
#page_faq .blk_3 .blk_faq h4 > span::after {
	position: absolute;
	display: block;
	content: '';
	width: 18px;
	height: 2px;
	left:0;
	top:0;
	background-color: var(--col_1);
  transform:translate(-50%, -50%);
  transition:bacground-color .2s ease-out 0s, transform .2s ease-out 0s;
}
#page_faq .blk_3 .blk_faq h4 > span::before {
  transform:translate(-50%, -50%) rotate(-90deg) scale(0);
}
#page_faq .blk_3 .blk_faq input:checked ~ h4 > span::before {
  transform:translate(-50%, -50%) rotate(0deg) scale(1);
  background-color: #ff9aa2;
}
#page_faq .blk_3 .blk_faq input:checked ~ h4 > span::after {
  transform:translate(-50%, -50%) rotate(90deg);
  background-color: #ff9aa2;
}
#page_faq .blk_3 .blk_faq h4 label {
  display: block;
  font-size: 18px;
  line-height: 1.5;
  padding: 20px calc(7% + 30px);
  background-color: #ffd5c6;
  cursor: pointer;
}
#page_faq .blk_3 .blk_faq h4 label::before {
  position: absolute;
  display: block;
  content:'Q';
  left:7%;
  top:19px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
}
#page_faq .blk_3 .blk_faq > div {
  display: block;
  padding: 0 7% 0 calc(7% + 30px);
  background-color: #fac8bf;
  height: 0;
  overflow:hidden;
  opacity: 0;
  pointer-events: none;
  transition:padding .2s ease-out 0s, opacity 0s .2s;
}
#page_faq .blk_3 .blk_faq input:checked ~ div {
  padding: 20px 7% 20px calc(7% + 30px);
  height: 100%;
  opacity: 1;
  pointer-events: auto;
  transition:padding .2s ease-out 0s, opacity 0s 0s;
}
#page_faq .blk_3 .blk_faq > div > p {
  display: block;
  font-size: 18px;
  line-height: 1.5;
  transform:translateY(-20px);
  opacity:0;
  transition:transform .2s ease-out 0s, opacity .2s ease-out 0s;
}
#page_faq .blk_3 .blk_faq input:checked ~ div > p {
  opacity:1;
  transform:translateY(0);
}
#page_faq .blk_3 .blk_faq > div > p * {
  font-size: inherit;
  line-height: inherit;
}
#page_faq .blk_3 .blk_faq > div::before {
  position: absolute;
  display: block;
  content:'A';
  left:7%;
  top:19px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  top:-20px;
  opacity:0;
  transition:top .2s ease-out 0s, opacity .2s ease-out 0s;
}
#page_faq .blk_3 .blk_faq input:checked ~ div::before {
  opacity:1;
  top:19px;
}
/*  */
#page_faq .blk_3 .blk_bk {
  position: absolute;
  width:var(--tgt_wid_1);
  max-width: var(--max_wid_1);
  height: 100%;
  left:50%;
  top:0;
  transform: translateX(-50%);
  z-index: 1;
}
#page_faq .blk_3 .blk_bk .shape_1 {
  position: absolute;
  left:-2%;
  top:min(800px, 80vh);
  width:10%;
  height: auto;
  background-image: url('../images/shapes/faq/faq_shape_1.svg');
	background-position: 0 50%;
	background-size: 100% auto;
  padding:15% 0 0 0;
  transform: translate(-100%, -50%);
}
#page_faq .blk_3 .blk_bk .shape_2 {
  position: absolute;
  left:50%;
  top:min(1600px, 160vh);
  width:100vw;
  height: 100%;
  transform:translateX(-50%);
}
#page_faq .blk_3 .blk_bk .shape_2::before {
  position: absolute;
  display:block;
  content:'';
  left:0;
  top:0;
  width:30%;
  min-width: 400px;
  height: auto;
  background-image: url('../images/shapes/concept/concept_shape_7.svg');
	background-position: 0 50%;
	background-size: 100% auto;
  transform: translate(-10%, -50%);
  padding:15% 0 0 0;
}
#page_faq .blk_3 .blk_bk .shape_3 {
  position: absolute;
  left:108%;
  top:min(2400px, 240vh);
  width:26%;
  height: auto;
  background-image: url('../images/shapes/concept/concept_shape_6.svg');
	background-position: 0 0;
	background-size: 100% auto;
  padding:25% 0 0 0;
  transform:translate(-40%, -75%);
}
/*
*/
#page_faq .blk_4 {
  width:100%;
  padding:0 0 500px 0;
}
#page_faq .blk_4 > section {
  width:var(--tgt_wid_1);
  max-width: var(--max_wid_1);
  margin: auto;
  z-index: 3;
  padding-top:100px;
}
#page_faq .blk_4 > section:first-child {
  padding-top:0;
}
#page_faq .blk_4 > section h3 {
  display: block;
  padding:0 0 30px 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
}
#page_faq .blk_4 > section div {
  padding: 7% 7%;
  background-color:#b5ead7;
}
#page_faq .blk_4 > section.blk_4_2 div {
  background-color:#beddd3;
}
#page_faq .blk_4 > section > div p {
  font-size: 18px;
  line-height: 1.75;
  padding:0 0 20px 0;
}
#page_faq .blk_4 > section > div ul {
  padding:0 0 40px 0;
  list-style: none;
}
#page_faq .blk_4 > section > div ul li {
  font-size: 18px;
  line-height: 1.75;
  padding:0 0 10px 15px;
}
#page_faq .blk_4 > section > div ul li::before {
  position: absolute;
  display: block;
  content:'';
  left:0;
  top:17px;
  width:5px;
  height:5px;
  background-color: var(--col_1);
  border-radius: 50%;
}
/*  */
#page_faq .blk_4 .blk_bk {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
#page_faq .blk_4 .blk_bk .shape_1,
#page_faq .blk_4 .blk_bk .shape_2 {
  position: absolute;
  left:50%;
  top:calc(100% - 120px);
  width:60vw;
  max-width: 1500px;
  min-width: 980px;
  height:auto;
	background-position: 100% 100%;
	background-size: 100% auto;
  transform: translate(calc(-50vw - 10%), -100%);
}
#page_faq .blk_4 .blk_bk .shape_1::before,
#page_faq .blk_4 .blk_bk .shape_2::before {
  display:block;
  content:'';
  width:100%;
  padding:33% 0 0 0;
}
#page_faq .blk_4 .blk_bk .shape_1 {
  background-image: url('../images/shapes/concept/concept_shape_8.svg');
}
#page_faq .blk_4 .blk_bk .shape_2 {
  background-image: url('../images/shapes/concept/concept_shape_9.svg');
}



/***************************************************************************************************
  responsive
***************************************************************************************************/

@media screen and (max-width: 1000px) {
/*
*/
#page_faq {
}
/*  */
#page_faq .blk_bk {
  display:none;
}
#page_faq .blk_bk_sp {
  display:block;
}
/*
*/
#page_faq .blk_1 {
  width:var(--tgt_wid_2);
  max-width: var(--max_wid_2);
  padding:220px 0 0 0;
  margin: auto;
}
/*  */
#page_faq .blk_1_1 h2 > span:nth-of-type(1) span:nth-of-type(1) {
  font-size: 48px;
}
#page_faq .blk_1_1 h2 > span:nth-of-type(1) span:nth-of-type(2) {
  font-size:16px;
  padding:3px 0 0 0;
}
/*  */
#page_faq .blk_1_1 h2 .blk_bk_sp {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 1;
}
#page_faq .blk_1_1 h2 .blk_bk_sp .shape_1 {
  position: absolute;
  left: -60px;
  top: -30px;
  width: 80px;
  height: 80px;
  background-image: url('../images/shapes/concept/concept_shape_2.svg');
	background-position: 0 0;
	background-size: 100% auto;
}
/*  */
#page_faq .blk_1_2 .blk_bk_sp {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
#page_faq .blk_1_2 .blk_bk_sp .shape_1 {
  position: absolute;
  left:50%;
  top:calc(100% + 410px);
  width:100vw;
  height:400px;
  background-image: url('../images/shapes/concept/concept_shape_11.svg');
	background-position: 50% 0;
	background-size:1155px 100%;
  transform:translate(-50%, -100%);
}
#page_faq .blk_1_2 .blk_bk_sp .shape_2 {
  position: absolute;
  left:50%;
  top:0;
  width:100vw;
  height:380px;
  background-image: url('../images/shapes/concept/concept_shape_10.svg');
	background-position: 50% -20px;
	background-size: max(650px, 100%) 100%;
  transform:translateX(-50%);
}
#page_faq .blk_1_2 .blk_bk_sp .shape_3 {
  position: absolute;
  left: 100%;
  top: 70px;
  width: 77px;
  height: 154px;
  background-image: url('../images/shapes/concept/concept_shape_3.svg');
	background-position: 0 0;
	background-size: 100% auto;
  transform:translateX(-70%);
}
/*  */
#page_faq .blk_1_2 .blk_bk_sp {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
#page_faq .blk_1_2 .blk_bk_sp .shape_1 {
  position: absolute;
  left:50%;
  top:calc(100% + 430px);
  width:100vw;
  height:400px;
  background-image: url('../images/shapes/concept/concept_shape_11.svg');
	background-position: 50% 0;
	background-size:1155px 100%;
  transform:translate(-50%, -100%);
}
#page_faq .blk_1_2 .blk_bk_sp .shape_2 {
  position: absolute;
  left:50%;
  top:0;
  width:100vw;
  height:380px;
  background-image: url('../images/shapes/concept/concept_shape_10.svg');
	background-position: 50% -20px;
	background-size: max(650px, 100%) 100%;
  transform:translateX(-50%);
}
#page_faq .blk_1_2 .blk_bk_sp .shape_3 {
  position: absolute;
  left: 100%;
  top: 70px;
  width: 77px;
  height: 154px;
  background-image: url('../images/shapes/concept/concept_shape_3.svg');
	background-position: 0 0;
	background-size: 100% auto;
  transform:translateX(-70%);
}
/*
*/
#page_faq .blk_2 > div {
  width:var(--tgt_wid_2);
  max-width: var(--max_wid_2);
  padding:100px 0 0 0;
  z-index: 2;
}
#page_faq .blk_2 > div > ul {
  display:block;
}
#page_faq .blk_2 > div > ul li {
  padding:0 0 30px 0;
}
#page_faq .blk_2 > div > ul li a {
  font-size: 14px;
  line-height: 1.25;
  padding:0 0 0 25px;
  white-space: normal;
}
#page_faq .blk_2 > div > ul li a::before {
	width: 20px;
	height: 20px;
	left:0;
	top:-1px;
}
#page_faq .blk_2 > div > ul li a::after {
	width: 10px;
	height: 10px;
	left:0px;
	top:4px;
  border-width: 2px;
}
/*  */
#page_faq .blk_2 .blk_bk_sp {
  position: absolute;
  left:50%;
  top:0;
  width:100%;
  height:100%;
  z-index: 1;
  transform: translateX(-50%);
}
#page_faq .blk_2 .blk_bk_sp .shape_1 {
  position: absolute;
  left: 100%;
  top:110%;
  width:18%;
  height: auto;
  background-image: url('../images/shapes/concept/concept_shape_14.svg');
	background-position: 0 0;
	background-size: 100% auto;
  padding:23% 0 0 0;
  transform:translate(-100%, -50%);
}
/*
*/
#page_faq .blk_3 {
}
#page_faq .blk_3 > div {
  width:var(--tgt_wid_2);
  max-width: var(--max_wid_2);
  padding:80px 0 0 0;
}
/*  */
#page_faq .blk_3 > div > section {
  padding:0 0 100px 0;
}
#page_faq .blk_3 > div > section:last-of-type {
  padding:0 0 0 0;
}
#page_faq .blk_3 > div > section > div h3 {
  padding:0 0 20px 0;
  font-size: 18px;
}
/*  */
#page_faq .blk_3 .blk_faq {
  padding:0 0 3% 0;
}
#page_faq .blk_3 .blk_faq h4 > span {
	left:calc(95% - 5px);
}
#page_faq .blk_3 .blk_faq h4 label {
  font-size: 14px;
  padding: 17px calc(5% + 25px);
}
#page_faq .blk_3 .blk_faq h4 > span::before,
#page_faq .blk_3 .blk_faq h4 > span::after {
	width: 14px;
	height: 2px;
}
#page_faq .blk_3 .blk_faq h4 label::before {
  left:5%;
  top:14px;
  font-size: 18px;
}
#page_faq .blk_3 .blk_faq > div {
  padding: 0 7% 0 calc(5% + 25px);
}
#page_faq .blk_3 .blk_faq input:checked ~ div {
  padding: 17px 7% 17px calc(5% + 25px);
}
#page_faq .blk_3 .blk_faq > div > p {
  font-size: 14px;
  transform:translateY(-17px);
}
#page_faq .blk_3 .blk_faq > div::before {
  left:5%;
  top:-17px;
  font-size: 18px;
}
#page_faq .blk_3 .blk_faq input:checked ~ div::before {
  opacity:1;
  top:14px;
}
/*
*/
#page_faq .blk_3 .blk_bk_sp {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index: 1;
}
#page_faq .blk_3 .blk_bk_sp .shape_1 {
  position: absolute;
  left:0;
  top:100vh;
  width:25%;
  max-width: 120px;
  height: auto;
  background-image: url('../images/shapes/faq/faq_shape_1.svg');
	background-position: 0 50%;
	background-size: 100% auto;
  padding:40% 0 0 0;
  transform: translate(-30%, -80%);
}
#page_faq .blk_3 .blk_bk_sp .shape_2 {
  position: absolute;
  left:50%;
  top:175vh;
  width:100vw;
  height: 100%;
  transform:translateX(-50%);
}
#page_faq .blk_3 .blk_bk_sp .shape_2::before {
  position: absolute;
  display:block;
  content:'';
  left:0;
  top:0;
  width:80%;
  max-width: 600px;
  height: auto;
  background-image: url('../images/shapes/concept/concept_shape_7.svg');
	background-position: 0 50%;
	background-size: 100% auto;
  transform: translate(-10%, -50%);
  padding:40% 0 0 0;
}
#page_faq .blk_3 .blk_bk_sp .shape_3 {
  position: absolute;
  left:100%;
  top:250vh;
  width:30%;
  max-width: 130px;
  height: auto;
  background-image: url('../images/shapes/concept/concept_shape_6.svg');
	background-position: 0 50%;
	background-size: 100% auto;
  padding:35% 0 0 0;
  transform:translate(-80%, -50%);
}

/*
*/
#page_faq .blk_4 {
  padding:60px 0 300px 0;
}
#page_faq .blk_4_2 {
  padding:60px 0 0 0;
}
#page_faq .blk_4 > section {
  width:var(--tgt_wid_2);
  max-width: var(--max_wid_2);
}
#page_faq .blk_4 > section h3 {
  padding:0 0 20px 0;
  font-size: 18px;
}
#page_faq .blk_4 > section div {
  padding: 5% 17px;
  background-color:#b5ead7;
}
#page_faq .blk_4 > section.blk_4_2 div {
  background-color:#beddd3;
}
#page_faq .blk_4 > section > div p {
  font-size: 14px;
  padding:0 0 15px 0;
}
#page_faq .blk_4 > section > div ul {
  padding:0 0 30px 0;
}
#page_faq .blk_4 > section > div ul li {
  font-size: 14px;
  line-height: 1.75;
  padding:0 0 5px 12px;
}
#page_faq .blk_4 > section > div ul li::before {
  left:0;
  top:11px;
  width:4px;
  height:4px;
}
/*  */
#page_faq .blk_4 .blk_bk_sp {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
#page_faq .blk_4 .blk_bk_sp .shape_1,
#page_faq .blk_4 .blk_bk_sp .shape_2 {
  position: absolute;
  left:50%;
  top:0;
  width:100vw;
  height:100%;
	background-position: -10% calc(100% - 80px);
	background-size: min(500px, 90%) auto;
  transform: translateX(-50%);
}
#page_faq .blk_4 .blk_bk_sp .shape_1::before,
#page_faq .blk_4 .blk_bk_sp .shape_2::before {
  display:block;
  content:'';
  width:100%;
  padding:40% 0 0 0;
}
#page_faq .blk_4 .blk_bk_sp .shape_1 {
  background-image: url('../images/shapes/concept/concept_shape_12.svg');
}
#page_faq .blk_4 .blk_bk_sp .shape_2  {
  background-image: url('../images/shapes/concept/concept_shape_13.svg');
}




/*  */
}