@charset "UTF-8";

body {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    background: #ffefef;
}

img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}

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

cta

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

.cta {
    position: relative;
}

.cta_btn {
    position: absolute;
    width: 100%;
    top: 75%;
    left: 55%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

/* .cta_btn2 {
    position: absolute;
    width: 50%;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
} */

.cta_btn3 {
    position: absolute;
    width: 100%;
    top: 58%;
    left: 55%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.cta_btn img._shiny,.cta_bta2 img._shiny {
    overflow: hidden;
    transition: 300ms;
}

.cta_btn img._shiny::before,.cta_btn img._shiny::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #ffffff;
    transition: 300ms;
    animation: shinyshiny 2.5s ease-in-out infinite;
}

@keyframes shinyshiny {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.cta a {
    text-decoration: none;
}

.cta a > p {
    text-align: center;
    color: #403a35;
}

.cta_fixed {
    background-color: rgba(255, 255, 255, 0.8);    padding: 1% 0;
    position: fixed;
    max-width: 750px;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.cta_fixed_btn img {
    width: 60%;
    margin: 0 auto;
    display: block;
}


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

faq

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

.faq {
    background: url(../img/faq_back.jpg) no-repeat top / cover;
    padding: 10% 0;
    width: 100%;
}

.faq-title {
    width: 80%;
    padding-right: 5%;
}

.faq img {
    display: block;
    margin : 0 auto;
}

.faq-wrap {
    border-radius: 10px;
    width: 90%;
    margin: 0 auto;
    padding: 2% 3%;
}

.faq-question {
    cursor: pointer;
    background: #047857 url(../img/faq_question.png) no-repeat 2% center/ 6%;
    border-bottom: 1px dotted var(--back-sub-color);
    padding: 2% 10%;
    font-size: 130%;
    color: #fff;
    font-weight: bold;
    border-radius: 10px;
    line-height: 150%;
}

.faq-answer {
    display: none;
    background: #fff url(../img/faq_answer.png) no-repeat 2% center/ 6%;
    padding: 2% 10%;
    border-radius: 10px;
    margin: 1% 0;
    font-size: 130%;
    line-height: 180%;
    color: #5e5e5e;
}

.faq-answer > span {
    font-weight: bold;
    color: #b91c1c;
}

.accordionlist:not(:first-child) {
    margin-top: 10px;
}

.accordion-title {
    position: relative;
}

.accordion-title:before {
    position: absolute;
    content: '';
    top: 50%;
    right: 25px;
    height: 4px;
    width: 15px;
    background: #fff;
    transform: rotate(90deg);
    transition: all .3s ease-in-out;
}

.accordion-title:after {
    position: absolute;
    content: '';
    top: 50%;
    right: 25px;
    height: 4px;
    width: 15px;
    background: #fff;
    transition: all .3s ease-in-out;
}

.accordion-title.open:before {
    transform: rotate(180deg);
}

.accordion-title.open:after {
    opacity: 0;
}

.clinic {
    background: #fff;
    padding: 5%;
}

.clinic dl {
    margin: 0 auto;
    display: flex;
    border-bottom: 1px solid #222222;
    padding: 2%;
    font-size: 120%;
    line-height: 150%;
}

.clinic dl > dt {
    width: 35%;
}

.clinic dl > dd {
    width: 45%;
}

.clinic h3 {
    color: #9a8553;
    text-align: center;
    margin-top: 10%;
}

.clinic a {
    color: #222222!important;
}

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

attention

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

.attention {
    background: #f1f1f1;
    padding: 5% 0;
}

.attention .accordionlist > .faq-question {
    background: none;
    font-size: 200%;
    color: #057857;
}

.attention .accordionlist > .faq-question::before {
    background: #057857;
}

.attention .accordionlist > .faq-question::after {
    background: #057857;
}

.attention .accordionlist > .faq-answer {
    background: none;
    padding: 0;
}

/*slick-slider*/
.ba {
    background: #fff;
    padding-bottom: 10%;
}

.ba_box {
  width: 100%;
  margin: -10% auto;
  padding-bottom: 10%;
  padding-left: 6%;
  overflow: hidden;
}

.ba_box li {
  margin-right: 0.7%;
}

.ba_box li > img {
  width: 100%;
}

.slick-prev {
  background: url(../img/05_arrowL.png) no-repeat center / contain!important;
  left: 0;
}

.slick-next {
  background: url(../img/05_arrowR.png) no-repeat center / contain!important;
  right: 0;
}

.slick-prev, .slick-next {
  top: 35%;
  width: 10%;
  height: 100%;
  z-index: 999;
}

.slick-next:before {
  content: ''!important;
}

.slick-prev:before {
  content: ''!important;
}

.slick-dots {
  bottom: 2%;
  left: 0;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #b91c1c;
}

.slick-dots li button:before {
  color: #757575;
}

.slick-dots li button:before {
  font-size: 18px;
}

.slick-prev:hover {
  background: url(../img/05_arrowL.png) no-repeat center / contain;
}

.slick-next:hover {
  background: url(../img/05_arrowR.png) no-repeat center / contain;
}

.ba p {
    width: 90%;
    margin: 0 auto;
    line-height: 150%;
    font-size: 110%;
}


footer {
    background: #aaaaaa;
    color: #fff;
    text-align: center;
    padding: 3% 3% 27% 3%;
    line-height: 180%;
}

footer a {
    color: #fff!important;
}

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

  legal

========================== */
.sub {
    line-height: 180%;
}

.sub h2{
color: #d97748;
font-size: 24px;
font-weight: bold;
margin: 1em 0;
line-height: 1.3em;
}

.sub h3{
  color: #d97748;
  font-size: 20px;
  font-weight: bold;
  margin: 1em 0;
}

.sub-list{
    list-style: none;
    line-height: 180%;
}

.sub-list li:not(:last-child){
    margin-bottom: 0.8em;
}

.section-contents{
    background:#fff;
    padding-left: 1em;
    border-left: 3px solid #d97748;
    padding: 1em;
    line-height: 180%;

}

.section-contents:not(:last-child){
    margin-bottom: 10px;
}

.section-contents h4{
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 1em;
}

.section-contents p{
    padding-left: 1em;
}

.section-box:last-child{
  margin-bottom: 2em;
}

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

  law

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

.detail{
  padding: 1em 0;
  font-weight: bold;
  font-size: 18px;
}

.detail-box{
  padding-left: 1em;
}



/*---------------スマホ*---------------*/

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

.cta_btn {
    width: 90%;
    left: 50%;
}

.cta_btn3 {
    width: 90%;
    left: 50%;
}

.cta a > p {
    font-size: 75%;
}

.cta_fixed_btn img {
    width: 75%;
}

.faq-wrap {
    width: 90%;
}

.faq-title {
    width: 80%;
}

.faq-question {
    background: #047857 url(../img/faq_question.png) no-repeat 3% center / 10%;
    font-size: 100%;
    padding: 3% 10% 3% 16%;    
}

.faq-answer {
    background: #fff url(../img/faq_answer.png) no-repeat 3% center / 10%;
    font-size: 100%;
    padding: 3% 3% 3% 16%;
}

.accordion-title:before {
    right: 15px;
}

.accordion-title:after {
    right: 15px;
}

.clinic dl {
    font-size: 85%;
}

.attention .accordionlist > .faq-question {
    font-size: 120%;
}

.sub {
    padding: 0 5%;
}

}