@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@700&display=swap');

:root {
--color-01:#fde7e3;
--color-02:#ecf4fd;
--color-03:#fdf9ed;
}

/*==================================================
共通
==================================================*/
html {
/* touch-action: manipulation; */
user-select: none;
}
body {
background:#F5F5F5;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
line-height: 1.8em;
text-size-adjust: 100%;
}

img {
display:inline-block;
max-width: 100%;
height: auto;
/*image-rendering: -webkit-optimize-contrast;*/
}
a,a:link,a:visited {
text-decoration: none;
transition: all ease 0.3s;
outline: none;
color:#000;
}
a:hover,a:active {
opacity: 0.8;
}
@media screen and (max-width: 600px) {
    .spNone {
    display: none;
    }
}/* max-width: 600px */
@media screen and (min-width: 601px) {
    .pcNone {
    display: none;
    }
}/* max-width: 600px */

main.wrap {
max-width:800px;
margin:0 auto;
background-color:#FFF;
text-align: center;
}


/*==================================================
モーダル
==================================================*/
#jikoModal {
position: fixed;
left:0; top:0;
width: 100%;
height: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 500;
display:flex;
justify-content: center;
align-items: center;
}
#jikoModal .modal-content {
background: #fff;
max-width: 96%;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
}
#jikoModal .modal-content ul {
padding: 6% 6% 8%;
display:flex;
justify-content:space-between;
flex-wrap: wrap;
gap: 10px;
}
#jikoModal .modal-content ul li {
width:calc(50% - 5px);
padding-bottom:6px;
}
#jikoModal .modal-content ul li a {
display:block;
text-align: center;
background: #cc4372;
font-weight: bold;
border-radius: 10px;
color: #fff;
font-size: min(3.2vw, 18px);
padding: 1.8em 1em 1.2em;
cursor: pointer;
box-shadow:0 6px 0 #930350;
line-height: 1.7em;
transition: all ease 100ms;
position: relative;
top:0;
}
#jikoModal .modal-content ul li a:hover,
#jikoModal .modal-content ul li a:active {
box-shadow:0 2px 0 #930350;
top:4px;
}
#jikoModal .modal-content ul li a em {
font-style:normal;
font-size:150%;
margin:0 0.2em;
}
@media screen and (min-width: 601px) {
  #jikoModal .modal-content {
  max-width: 600px;
  width: 100%;
  }
}/* max-width: 600px */




/*==================================================
CTA
==================================================*/
.cta {
background: linear-gradient(to bottom,  rgba(209,87,67,1) 1%,rgba(186,77,59,1) 100%);
padding:10vw 2%;
}
.cta .inner {
background: #FFF;
border-radius:1rem;
}
.cta h6 {
padding:4rem 2rem 3rem;
}
.cta ul {
padding:2rem 4% 4rem;
}
.cta ul li:not(:first-child) {
margin-top:0.8rem;
}
.cta ul li a {
transition: all ease 300ms;
}
.cta ul li a:hover,
.cta ul li a:active {
opacity: 0.85;
}
@media screen and (min-width: 601px) {
  .cta {
  padding:8rem 2%;
  }
  .cta ul {
  padding:3rem 6% 6rem;
  }
  .cta ul li:not(:first-child) {
  margin-top:1.2rem;
  }
}/* min-width: 601px */

/* 電話のみCTA */
.telCta {
padding:2rem 0 2.5rem;
}
.telCta a {
display:block;
width: 300px;
margin:0 auto;
}
@media screen and (min-width: 601px) {
  .telCta a {
  width: 500px;
  margin:1rem auto;
  }
}/* min-width: 601px */



/*==================================================
Contens
==================================================*/
.intro {
padding-bottom:2rem;
}


.jirei {
padding:4rem 3%;
}
.jirei h2 {
padding:3rem 0 2rem;
max-width:70%;
margin:0 auto;
}
.jirei h3 {
position: relative;
z-index:1;
}
.jirei ul li p {
position: relative;
top:-15px;
z-index:0;
background-color: var(--color-02);
padding:calc(1em + 15px) 1.5em 1em;
text-align: left;
line-height: 1.5em;
}
@media screen and (min-width: 601px) {
  .jirei ul li p {
  max-width:700px;
  margin:0 auto;
  font-size:1.5em;
  }
}/* min-width: 601px */


.hikaku {
background-color: var(--color-01);
}
.hikaku figure {
padding:3rem 4% 4rem;
}
.hikaku > div {
background:#FFF;
padding-bottom:2rem;
}


.hiyou {
background-color: var(--color-02);
padding:2rem 4%;
}
.hiyou h2 {
max-width: 80%;
margin:3rem auto;
}
.hiyou > figure {
margin:2rem 0 4rem;
}


.riyu {
background-color: var(--color-03);
padding-top:2rem;
}
.riyu h2 {
max-width: 70%;
margin:3rem auto;
}
.riyu ol {
padding:2rem 5% 4rem;
}
.riyu ol li:not(:first-child) {
margin-top:0.6rem;
}


.faq {
padding:2rem 3%;
}
.faq dl {
margin:3rem 0;
text-align: left;
}
.faq dl dt {
position: relative;
margin-left:65px;
background-color: #b9e3f9;
padding:0.8em 1em;
border-radius: 10px;
}
.faq dl dd {
position: relative;
margin-right:65px;
background-color: #fde7e3;
padding:0.8em 1em;
border-radius: 10px;
margin-top:1.5rem;
}
.faq dl dt::before,
.faq dl dt::after,
.faq dl dd::before,
.faq dl dd::after {
content:'';
display:block;
position: absolute;
z-index: 1;
}
.faq dl dt::before {
width:calc(65px - 12px);
height: 100%;
left:-65px; top:0;
}
.faq dl.q1 dt::before {
background:url(../img/jiko08_khk/faq_q_icon01.png) no-repeat;
background-size: contain;
}
.faq dl.q2 dt::before {
background:url(../img/jiko08_khk/faq_q_icon02.png) no-repeat;
background-size: contain;
}
.faq dl.q3 dt::before {
background:url(../img/jiko08_khk/faq_q_icon03.png) no-repeat;
background-size: contain;
}
.faq dl.q4 dt::before {
background:url(../img/jiko08_khk/faq_q_icon04.png) no-repeat;
background-size: contain;
}
.faq dl.q5 dt::before {
background:url(../img/jiko08_khk/faq_q_icon05.png) no-repeat;
background-size: contain;
}
.faq dl dt::after {
width:20px;
height:20px;
background:#b9e3f9;
transform:rotate(45deg);
left:-3px; top:30px;
z-index: 0;
}
.faq dl dd::before {
width:calc(65px - 12px);
height: 100%;
right:-65px; top:0;
background:url(../img/jiko08_khk/faq_a_icon.png) no-repeat;
background-size: contain;
}
.faq dl dd::after {
width:20px;
height:20px;
background:#fde7e3;
transform:rotate(45deg);
right:-3px; top:30px;
z-index: 0;
}
@media screen and (min-width: 601px) {
  .faq dl {
  margin:6rem 0;
  font-size:1.5em;
  line-height:1.6em;
  }
  .faq dl dt {
  margin-left:100px;
  }
  .faq dl dd {
  margin-right:100px;
  margin-top:3rem;
  }
  .faq dl dt::before {
  width:calc(100px - 12px);
  left:-100px;
  }
  .faq dl dd::before {
  width:calc(100px - 12px);
  right:-100px;
  }
}/* min-width: 601px */



.officeInfo {
padding:2rem;
background:#f4f4f4;
}
.officeInfo .inner {
background:#FFF;
padding: 1.5em;
border-radius:10px;
}
.officeInfo h2 {
font-family:serif;
font-size:110%;
margin-bottom:1em;
}
.officeInfo dl {
font-size:1.3rem;
line-height: 1.2em;
text-align: left;
margin-top:1em;
}
.officeInfo dl dd {
padding-left: 1em;
}
@media screen and (min-width: 601px) {
  .officeInfo {
  padding:4rem 10%;
  }
  .officeInfo h2 {
  font-size:130%;
  }
  .officeInfo dl {
  font-size:1.4rem;
  display:table;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  }
  .officeInfo dl dt,
  .officeInfo dl dd {
  display:table-cell;
  }
  .officeInfo dl dt {
  width:8em;
  }
}/* min-width: 601px */




/*==================================================
footer
==================================================*/
#footer {
padding-bottom:min(28vw, 150px);
padding-top:2rem;
}
#footer > ul {
display:flex;
flex-wrap: nowrap;
justify-content:center;
padding:2rem 2%;
}
#footer > ul li {
text-align: center;
font-size:1.3rem;
padding:0 1.5em;
}
#footer .CopyRight {
display: block;
text-align: center;
font-size:1rem;
}
@media screen and (min-width: 601px) {

}/* max-width: 600px */




/*==================================================
下部固定ボタン
==================================================*/
#fixBtn {
width:100%;
margin:0 auto;
text-align: center;
position: fixed;
left:0; bottom:0;
z-index:100;
background-color: rgba(255,255,255,1);
box-shadow: 0 -0.5rem 0.5rem rgba(50,50,50,0.1);
padding-top: 6px;
}
#fixBtn ul {
max-width:800px;
margin:0 auto;
}
#fixBtn ul li {
width: 80%;
margin:0 auto 4px;
}

/* 2カラム */
#fixBtn ul.col2 {
margin:0 auto 4px;
display:flex;
padding:0 2%;
}
#fixBtn ul.col2 li {
width: 48%;
}
@media screen and (min-width: 601px) {
  #fixBtn ul li {
  width: 60%;
  }
}/* min-width: 601px */