﻿@charset "UTF-8";

/* ----------------------------------
 よくある質問
---------------------------------- */
#freepage_faq .top-lead { margin: 0 0 40px; font-size: var(--font-size-main); line-height: var(--line-height-high);}
#freepage_faq section { margin: 0 0 60px;}
#freepage_faq section h2 {
  margin: 0 0 24px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: var(--color-sub) 2px solid;
  font-size: var(--font-size-H2);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.04em;
  text-align: left;
}
#freepage_faq section h4 {
  font-size: var(--font-size-H5);
}
#freepage_faq .faq-box { padding: 0 0 1px; margin: 0 0 24px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden;}
#freepage_faq .faq-question-ttl { padding: 30px 30px 30px calc(var(--font-size-large) + 50px); margin: 0; font-size: var(--font-size-large); font-weight: 700; position: relative; cursor: pointer;}
#freepage_faq .faq-question-ttl .q {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: var(--font-size-H3);
  font-weight: 700;
	line-height: 1.0;
  color: var(--color-blue);
	position: absolute;
	top: 26px;
	left: 30px;
}
#freepage_faq .faq-question-ttl .opener { 
	width: 30px;
	height: 30px;
	border-radius: 30px;
	display: block;
	background: var(--button-bg1);
	position: absolute;
	top: calc(50% - 15px);
	right: 30px;
}
#freepage_faq .faq-question-ttl .opener::before,
#freepage_faq .faq-question-ttl .opener::after {
  content: '';
  width: 14px;
  height: 0;
  border: none;
  border-top: #FFF 2px solid;
  display: block;
  position: absolute;
  top: calc(50% - 1px);
  right: calc(50% - 7px);
  transform: rotate(0deg);
  transition: all 0.3s;	
}
#freepage_faq .faq-question-ttl .opener::before { transform: rotate(90deg);}
#freepage_faq .faq-question-ttl.open .opener::before { transform: rotate(0deg);}
#freepage_faq .faq-answer { padding: 30px; margin: 0 30px 30px; border-radius: var(--border-radius); display: none; background-color: var(--color-cream);}
#freepage_faq .faq-answer dt { padding: 0 0 0 calc(var(--font-size-main) + 20px); margin: 0 0 14px; font-size: var(--font-size-main); font-weight: 700; color: var(--color-orange); position: relative;}
#freepage_faq .faq-answer dt a { font-size: var(--font-size-main); font-weight: 700; text-decoration: underline; color: var(--color-orange); transition: var(--transition);}
#freepage_faq .faq-answer dt a:hover { text-decoration: none;}
#freepage_faq .faq-answer:has(dd.notext) dt { margin-bottom: 0;}
#freepage_faq .faq-answer .a {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: var(--font-size-H4);
  font-weight: 700;
	line-height: 1.0;
  color: var(--color-orange);
	position: absolute;
	top: -1px;
	left: 0;
}
#freepage_faq .faq-answer dd { padding: 0 0 0 calc(var(--font-size-main) + 20px); font-size: var(--font-size-main);}
#freepage_faq .faq-answer dd .check { color: var(--color-orange);}
#freepage_faq .faq-answer dd h4 { margin: 20px 0 14px;}
#freepage_faq .faq-answer dd p,
#freepage_faq .faq-answer dd li { font-size: var(--font-size-main);}
#freepage_faq .faq-answer dd p + p,
#freepage_faq .faq-answer dd p + ul,
#freepage_faq .faq-answer dd p + figure,
#freepage_faq .faq-answer dd figure + p,
#freepage_faq .faq-answer dd figure + ul,
#freepage_faq .faq-answer dd ul + ul,
#freepage_faq .faq-answer dd ul + p,
#freepage_faq .faq-answer dd ul + figure { margin-top: 14px;}
#freepage_faq .faq-answer dd .indent { padding-left: 1em; text-indent: -1em;}
#freepage_faq .faq-answer dd .image-list { margin: 20px 0 0; display: flex; column-gap: 20px;}
#freepage_faq .faq-answer dd .image-list .image-item { width: 300px;}
#freepage_faq .faq-answer dd a { text-decoration: underline; transition: var(--transition);}
#freepage_faq .faq-answer dd a:hover { text-decoration: none;}

#freepage_faq dl.time-select { width: fit-content; padding: 0; margin: 20px 0 0 0; border: var(--border-solid1); display: flex; align-items: center; background: #FFF;}
#freepage_faq dl.time-select dt { padding: 10px 20px; margin: 0; font-size: var(--font-size-main); font-weight: 500; color: var(--color-base); background: var(--color-bg);}
#freepage_faq dl.time-select dd { min-width: 150px; padding: 10px 20px; margin: 0; border-left: var(--border-solid1); font-weight: 700; text-align: center; letter-spacing: 0.04em;}


/* ----------------------------------
 よくある質問 SP
---------------------------------- */
[data-browse-mode="S"] #freepage_faq section h2 { padding: 0 0 12px; margin: 0 0 16px; font-size: var(--font-size-H3); letter-spacing: 0;}
[data-browse-mode="S"] #freepage_faq .faq-box { padding: 0 0 1px; margin: 0 0 12px;}
[data-browse-mode="S"] #freepage_faq .faq-question-ttl { padding: 16px 30px 16px calc(var(--font-size-main) + 26px); font-size: var(--font-size-main);}
[data-browse-mode="S"] #freepage_faq .faq-question-ttl .q { left: 16px; top: 13px;}
[data-browse-mode="S"] #freepage_faq .faq-question-ttl .opener { width: 20px; height: 20px; top: calc(50% - 10px); right: 10px;}
[data-browse-mode="S"] #freepage_faq .faq-question-ttl .opener::before,
[data-browse-mode="S"] #freepage_faq .faq-question-ttl .opener::after { width: 10px; right: calc(50% - 5px);}
[data-browse-mode="S"] #freepage_faq .faq-answer { padding: 16px; margin: 0 16px 15px; margin-top: 12px;}
[data-browse-mode="S"] #freepage_faq .faq-answer dt { padding: 0 0 0 calc(var(--font-size-main) + 10px);}
[data-browse-mode="S"] #freepage_faq .faq-answer dd { padding: 0 0 0 calc(var(--font-size-main) + 10px);}
[data-browse-mode="S"] #freepage_faq .faq-answer dd .image-list { margin: 20px 0 0; display: block; column-gap: 0;}
[data-browse-mode="S"] #freepage_faq .faq-answer dd .image-list .image-item { max-width: 300px; width: 100%; margin: 0 auto; text-align: center;}
[data-browse-mode="S"] #freepage_faq .faq-answer dd .image-list .image-item + .image-item { margin-top: 16px;}

[data-browse-mode="S"] #freepage_faq .faq-question-ttl { padding: 16px 16px 16px calc(var(--font-size-main) + 26px);}
[data-browse-mode="S"] #freepage_faq .faq-question-ttl .opener { display: none;}

[data-browse-mode="S"] #freepage_faq dl.time-select { width: 100%; display: block;}
[data-browse-mode="S"] #freepage_faq dl.time-select dt { text-align: center;}
[data-browse-mode="S"] #freepage_faq dl.time-select dd { border-left: none; border-top: var(--border-solid1);}
