@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/

.CONTENTS { width: 100%; max-width: 1080px; margin: 40px auto; }

@media screen and (max-width: 768px){
  .CONTENTS { width:100%; margin:40px auto; font-size:14px; text-align:justify; }
}

/* h1 */
h1.UNDERLINE::after {left:0; width:160px; }
@media screen and (min-width: 768px){
  h1.UNDERLINE::after {left:-16px; width:250px; }
}

/* リード */
.lead { padding:0 5%; font-weight: normal;}
@media screen and (min-width: 768px){
  .lead { padding:0%; }
}

.qa-container { background: #f0f8e8; font-weight: normal; max-width: 1080px;}
.qa-list { list-style: none; padding: 0; margin: 0; }
.first_link  { display: flex; padding: 15px; text-decoration: none; color: #333; }
.qa-link  { display: flex; padding: 15px; text-decoration: none; color: #333; border-top: 1px solid #dcdcdc; position: relative;}
.qa-list li:not([class]) { padding: 0 20px; }
.qa-list .first_li { padding: 20px 20px 0 20px; position: relative;}
.qa-list .last_li { display: block; padding: 0 20px 20px 20px;}
.qa-list li:hover { background: #e0f0d0; }
.last_link {border-bottom: 1px solid #dcdcdc;}
.qa-list li p { margin-right: 19px;}
.qa-link::after { content: '';position: absolute; top: 40%; right: 10px; width: 6px; height: 6px; border-left: 1.2px solid #888; border-bottom: 1.2px solid #888; transform: rotate(-45deg);}
.first_link::after { content: '';position: absolute; top: 40%; right: 30px; width: 6px; height: 6px; border-left: 1.2px solid #888; border-bottom: 1.2px solid #888; transform: rotate(-45deg);}

.answer { display: block;}
.qa-answer { padding: 20px;font-weight: normal; background: #fff; margin: 20px; border-bottom: 1px solid #ddd;}
.qa-answer ul li{ display: inline-block; position: relative;margin: 30px 0;}
.qa-answer li img { position: absolute; z-index: 0; left: -20px; top: -13px;}
.qa-answer li h3 { position: relative; z-index: 1; padding: 5px 0; color: #556b2f; margin: 0px; }
.qa-answer li h3.center {margin: 0 5px;}
.qa-answer ul.q li.text { font-size: 18px; margin: 0;}
.qa-answer ul li.text { margin: 0;}
.qa-answer ul li.text a { display: inline-block; margin: 20px 0; text-decoration-thickness:1px; }
#answer16 { margin-bottom: 120px;}

@media screen and (min-width: 768px){
  .answer { display: flex;}
  .qa-link::after { content: '';position: absolute; top: 40%; right: 14px; width: 8px; height: 8px; border-left: 1.2px solid #888; border-bottom: 1.2px solid #888; transform: rotate(-45deg);}
  .first_link::after { content: '';position: absolute; top: 40%; right: 34px; width: 8px; height: 8px; border-left: 1.2px solid #888; border-bottom: 1.2px solid #888; transform: rotate(-45deg);}
  .qa-container { margin: 0 auto; max-width: 1080px; }
  .qa-answer li img {left: 0;}
  .qa-answer { margin:10px auto; padding:50px 0;}
  .qa-answer li h3 { margin: 0 14px; }
  .qa-answer li h3.center {margin: 0 20px;}

  .qa-answer ul.q li.text { font-size: 18px; margin:30px 0 0 20px;}
  #answer02 ul.q li.text { margin:15px 0 0 20px;}
  .qa-answer ul li.text { margin:30px 0 50px 20px;}
}



/* h2 */
h2.UNDERLINE{ position: relative; z-index: 1;}
h2.UNDERLINE:after { content: ""; position: absolute; bottom: 7px; height: 5px; transform: matrix(1, -.03, .03, 1, 0, 0); background: transparent linear-gradient(90deg, #9bc6c0, #9bc6c0 0%, #e6baaa) 0 0 no-repeat padding-box; border-radius: 3px; z-index: -1;}
h2.UNDERLINE::after {left:0; width:300px; }
@media screen and (min-width: 768px){
  h2.UNDERLINE::after {left:-16px; width:310px; }
}



/*FAQ*/
.faq { background-color: #f0f8e8; padding: 20px 5% 0 5%; margin-bottom: 120px;}
@media screen and (min-width: 768px){
  .faq { padding: 20px 35px 0 35px; margin-bottom: 120px;}
}
.qa-list { text-align: left;}
.qa-list dl { position: relative;margin: 0; padding: 28px 40px 28px 0; cursor: pointer;
    border-bottom: 1px solid #ccc;}
.qa-list dl:last-child { margin-bottom: 30px; border-bottom:none;}
.qa-list dl::before { position: absolute; top: 40px; right: 15px; display: block; width: 7px;
    height: 7px; margin: auto; content: ''; transform: rotate(135deg); border-top: 1px solid #888;
    border-right: 1px solid #888;}
.qa-list .open::before { transform: rotate(-45deg);}
.qa-list dl dt { position: relative; margin: 0; padding: 0 0 0 10%; font-weight: 400; font-size:16px;}
@media screen and (min-width: 768px){
  .qa-list dl dt { padding-left:4%; font-size: 18px;}
}
.qa-list dl dt::before { font-size: 22px; line-height: 1; position: absolute; top: 3px;left: 0; display: block; content:'Q.'; color: #3285bf;font-weight: bold;}/*url('../img/qicon.svg')*/
.qa-list dl dd::before { font-size: 22px; line-height: 1; position: absolute; top: 20px; left: 32px; display: block; content: 'A.'; font-weight: bold; color: #3285bf;}
.qa-list dl dd { position: relative; display: none; height: auto; margin: 30px 0 0 0; padding: 55px 0 30px 10%; font-weight: 400;background: white;	margin-right: calc(50% - 50vw);padding-left: 8px;padding-right: calc(50vw - 50% + 8px);}
.qa-list dl dd p { font-size:15px; }
.qa-list dl dd a{margin-left: 25px;}
.qa-list dl dd p {margin: 30px 0 0;margin-right: calc(46% - 50vw);padding-left: 25px;padding-right: calc(50vw - 50% - 7px);text-align: justify;}
.qa-list dl dd p:first-child {margin-top: 0;}


@media screen and (min-width: 768px){
  .qa-list dl dd{margin-right: 0;font-size:16px;padding:3% 4% 3% 7%;text-align: justify;}
  .qa-list dl dd p{margin-right: 0;padding-right: 0;}
  .qa-list dl dd::before{top: 34px;}
}