@charset "UTF-8";

/* ------------------------------------

 common

------------------------------------ */

:root {
  --key: #007bba;
  --key-p: #4c95cb;
  --common-bg: #e1e0d4;
  --common-txt: #807241;
  --siteColor: #491b02;
  --container: calc(100% - 40px);
  --maxwidth: 1080px;
  --gap: 70px;
  --gap-M: 50px;
}

@media screen and (min-width: 768px) {
  :root {
    --container: calc(100% - min(5vw,120px) );
    --gap: 100px;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  color: #333;
  position: relative;
  font-size: min(3.5vw,14px);
  text-align: justify;
}
em {
  font-weight: 700;
}
.container {
  width: var(--container);
  max-width: var(--maxwidth);
  margin: auto;
}
.e-caution {
  display: block;
  font-size: min(3vw,12px);
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
  a {
    transition: .3s all;
  }
  a:hover {
    opacity: .8;
  }
  .e-caution {
    font-size: 13px;
  }
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: inherit;
  }
  .sp {
    display: none;
  }
}

/* siteLink ---------*/
.b-siteLink {
  color: var(--siteColor);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b-siteLink .b-mark {
  aspect-ratio: 1/1;
  width: 18px;
  margin-left: 9px;
  border-radius: 50%;
  border: 1px solid var(--siteColor);
  position: relative;
  transform: translateY(1px);
}
.b-siteLink .b-mark::after {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 45%;
  border-top: 1px solid var(--siteColor);
  border-right: 1px solid var(--siteColor);
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%,-50%) rotate(45deg);
}

/* ------------------------------------

 header

------------------------------------ */
.b-header,
.b-header .container{
  display: flex;
}
.b-header {
  flex-direction: column-reverse;
  padding-bottom: var(--gap-M)
}

/* hdMain ---------*/
.b-hdMain {
  background: var(--key);
  color: #fff;
  text-align: center;
}
.b-hdMain .b-tel {
  margin: auto;
}
.b-hdMain .b-tel span {
  display: block;
  margin: 7px 0;
  font-weight: 500;
}
.b-hdMain .b-tel {
  width: 63.89%;
}
@media screen and (max-width: 767px) {
  .b-hdMain .container {
    flex-direction: column;
  }
  .b-hdMain .b-txts {
    padding: min(5vw,20px);
  }
}
@media screen and (min-width: 768px) {
  .b-hdMain .container {
    align-items: center;
  }
  .b-hdMain .b-txts,
  .b-hdMain .e-img {
    width: 50%;
  }
  .b-hdMain .b-txts {
    padding: 0 40px;
  }
}
@media screen and (max-width: 1080px) {
  .b-hdMain .container {
    width: 100%;
    margin: 0;
  }
  .b-hdMain .b-tel {
    width: 100%;
    max-width: 294px;
  }
}

/* b-pageHd ---------*/
.b-pageHd {
  color: var(--siteColor);
  padding: 20px 0;
}
.b-pageHd .container {
  justify-content: space-between;
}
.b-pageHd .e-logo {
  margin: 0;
}
@media screen and (max-width: 767px) {
  .b-pageHd .e-logo {
    width: 45%;
    max-width: 180px;
  }
  .b-pageHd .b-siteLink span {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .b-pageHd {
    padding: 30px 0;
  }
  .b-pageHd .e-logo {
    width: 270px;
  }
}

/* e-ttl ---------*/
.e-ttl {
  text-align: center;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .e-ttl {
    font-size: min(6.5vw,26px);
  }
}
@media screen and (min-width: 768px) {
  .e-ttl {
    font-size: 32px;
  }
}
/* ------------------------------------

 main

------------------------------------ */
.b-main .e-ttl {
  color: var(--key);
  margin: var(--gap) auto;
}
/* ------------------------------------

 features

------------------------------------ */

/* common -------------*/
.b-bsc {
  width: var(--container);
  max-width: var(--maxwidth);
  margin: auto;
  padding-bottom: var(--gap);
}
.b-bsc .e-mds,
.b-bsc .e-shoulder {
  font-weight: 700;
  line-height: 1.6;
}
.b-bsc .e-mds {
  text-align: center;
  background: var(--key-p);
  color: #fff;
}
.b-bsc .e-shoulder {
  color: var(--key);
}
.b-bsc .e-contImg {
  margin-top: 20px;
}
.b-bsc .b-txt + .e-shoulder {
  margin-top: var(--gap-M);
}
@media screen and (max-width: 767px) {
  .b-bsc .e-mds {
    width: 65vw;
    margin: auto;
  }
  .b-bsc .e-mds {
    font-size: min(5vw,20px);
    padding: .5em .5em .55em;
    margin-bottom: 20px;
    white-space: nowrap;
  }
  .b-bsc .e-shoulder {
    font-size: min(4.5vw,18px);
    margin-bottom: 10px;
  }
  .b-bsc .e-shoulder span {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .b-bsc {
    display: flex;
    align-items: flex-start;
  }
  .b-bsc .e-mds,
  .b-bsc .e-shoulder {
    font-size: 24px;
  }
  .b-bsc .e-mds {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    aspect-ratio: 1/1;
    width: 150px;
    min-width: 150px;
    line-height: 1.35;
    margin-top: 10px;
    margin-right: 30px;
  }
  .b-bsc .e-mds span {
    display: block;
  }
  .b-bsc .e-shoulder {
    margin-bottom: 15px;
  }
  .b-bsc .e-contImg.m-tel {
    width: 360px;
  }
}

/* modify */

.b-bsc.m-cont-01 .e-contImg {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .b-bsc.m-cont-01 .b-content .b-img {
    margin-top: 20px;
  }
  .b-bsc.m-cont-02 .e-mds {
    margin-bottom: var(--gap-M);
  }
}
@media screen and (min-width: 768px) {
  .b-bsc.m-cont-01 .b-content {
    display: flex;
  }
  .b-bsc.m-cont-01 .b-content .b-txt {
    width: 490px;
    min-width: 490px;
    margin-right: 30px;
  }
  .b-bsc.m-cont-01 .b-content .b-img {
    margin-top: 5px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1130px) {
  .b-bsc.m-cont-01 .b-content {
    flex-wrap: wrap;
  }
  .b-bsc.m-cont-01 .b-content .b-txt {
    width: 100%;
  }
  .b-bsc.m-cont-01 .b-content .e-contImg img {
    max-width: 490px;
  }
  .b-bsc.m-cont-01 .b-content .b-img {
    width: 100%;
    max-width: 490px;
    margin-top: 30px;
  }
}


/* ------------------------------------

 faq

------------------------------------ */
.b-faq .e-ttl {
  margin-bottom: 0;
}
.b-faq .b-item {
  position: relative;
  margin-top: var(--gap-M);
}
.b-faq dt,
.b-faq dt::before,
.b-faq dd::before {
  font-weight: 700;
  color: var(--key);
  line-height: 1.6;
}
.b-faq dt,
.b-faq dd {
  position: relative;
}
.b-faq dt::before,
.b-faq dd::before {
  position: absolute;
  left: 0;
  top: 0;
}
.b-faq dt {
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.b-faq dt::before {
  content: "Q.";
}
.b-faq dd::before {
  content: "A.";
}
@media screen and (max-width: 767px) {
  .b-faq dt,
  .b-faq dt::before,
  .b-faq dd::before {
    font-size: min(4.5vw,18px);
  }
  .b-faq dt,
  .b-faq dd {
    padding-left: min(7.5vw,30px);
  }
  .b-faq dd::before {
    margin-top: -.1em;
  }
}
@media screen and (min-width: 768px) {
  .b-faq dt,
  .b-faq dt::before,
  .b-faq dd::before {
    font-size: 24px;
  }
  .b-faq dt,
  .b-faq dd {
    padding-left: 35px;
  }
  .b-faq dd::before {
    margin-top: -.2em;
  }
}


/* ------------------------------------

 message

------------------------------------ */
.b-message {
  background: var(--common-bg);
  padding: var(--gap-M) 0;
}
.b-message .e-mds {
  color: var(--common-txt);
  font-weight: 700;
  margin: 0 0 15px;
}
@media screen and (max-width: 767px) {
  .b-message .e-mds {
    font-size: min(5vw,20px);
  }
  .b-message .b-img {
    width: 32.5vw;
    max-width: 150px;
    float: right;
    margin-left: 20px;
    margin-top: -5px;
    /* margin-top: min(-15vw); */
  }
  .b-message .b-content .b-txt::after {
    content: "";
    display: block;
    aspect-ratio: 1/1;
    width: 1px;
    clear: both;
  }
}
@media screen and (min-width: 768px) {
  .b-message {
    padding-bottom: 0;
  }
  .b-message .e-mds {
    font-size: 24px;
  }
  .b-message .container {
    display: flex;
    flex-direction: row-reverse;
    container-type: inline-size;
  }
  .b-message .b-txt {
    margin-bottom: var(--gap-M);
    margin-right: 9.5cqw;
  }
  .b-message .b-img {
    width: 223px;
    min-width: 223px;
    margin: 0 30px 0 9cqw;
  }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
  .b-message .b-txt {
    margin-right: 0;
  }
  .b-message .b-img {
    margin-left: 0;
  }
}

/* ------------------------------------

 flow

------------------------------------ */
.b-flow .container {
  padding: var(--gap-M) 0;
}
.b-flow .e-ttl {
  color: var(--common-txt);
  margin: 0;
}
.b-flow .b-item dt {
  position: relative;
  line-height: 1.4;
}
.b-flow .b-item .e-num {
  display: block;
  aspect-ratio: 1/1;
  position: absolute;
  left: 0;
}
.b-flow .b-item dd {
  margin-top: .4em;
}
@media screen and (max-width: 767px) {
  .b-flow {
    background: var(--common-bg);
  }
  .b-flow .b-item {
    margin-top: 30px;
  }
  .b-flow .b-item dt,
  .b-flow .b-item dd {
    padding-left: min(8vw,32px);
  }
  .b-flow .b-item .b-tel {
    width: min(56.5vw,226px);
    margin-top: 10px;
    margin-left: min(8vw,32px);
  }
  .b-flow .b-item dt {
    font-size: min(4vw,16px);
  }
  .b-flow .b-item .e-num {
    width: 1.375em;
    top: .1em;
  }
}
@media screen and (min-width: 768px) {
  .b-flow .container {
    background: var(--common-bg);
    padding-left: 50px;
    padding-right: 50px;
    border-radius: 10px;
  }
  .b-flow .e-ttl {
    margin-bottom: 20px;
  }
  .b-flow .b-content {
    display: flex;
    flex-wrap: wrap;
  }
  .b-flow .b-item dt,
  .b-flow .b-item dd {
    padding-left: 40px;
  }
  .b-flow .b-item dt {
    font-size: 18px;
  }
  .b-flow .b-item .e-num {
    width: 28px;
    top: 3px;
  }
}
@media screen and (min-width: 1101px) {
  .b-flow .container {
    padding-left: 100px;
    padding-right: 100px;
  }
}

/* modify */

@media screen and (min-width: 768px) {
  .b-flow .b-item.m-01 {
    width: 100%;
    border-bottom: 1px solid #333;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }
  .b-flow .b-item.m-01 .b-tel {
    width: 360px;
    min-width: 360px;
    margin: 15px 0;
  }
  .b-flow .b-item.m-01 dd {
    margin-top: -3px;
  }
  .b-flow .b-item.m-02 {
    width: 25%;
    padding-right: 35px;
  }
  .b-flow .b-item.m-03 {
    width: 37%;
    padding: 0 35px;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
  }
  .b-flow .b-item.m-04 {
    width: 38%;
    padding-left: 35px;
  }
}

@media screen and (min-width: 768px) and (max-width: 925px) {
  .b-flow .b-item.m-01 .b-tel {
    margin-left: 40px;
  }
}

/* ------------------------------------

 footer

------------------------------------ */
.b-footer {
  border-top: 1px solid #333;
  margin-top: var(--gap);
  padding-bottom: var(--gap);
  text-align: center;
  color: var(--siteColor);
}
.b-footer .e-ttl {
  padding-top: var(--gap-M);
  color: var(--key);
}
.b-footer .e-logo,
.b-footer .b-mail {
  margin: var(--gap-M) auto;
}
.b-footer .e-logo,
.b-footer .b-tel a {
  display: block;
}

.b-footer .e-logo {
  width: min(67vw,268px);
}
.b-footer .b-tel a {
  margin: 10px auto 0;
}
.b-footer .b-mail a {
  font-size: min(5vw,20px);
}
.b-footer .b-mail .e-caution {
  color: #333;
  margin-top: 10px;
}
.b-footer .b-mail .e-caution span {
  display: block;
}

@media screen and (max-width: 767px) {
  .b-footer .e-logo,
  .b-footer .b-mail {
    margin: 30px auto;
  }
  .b-footer .b-tel a {
    width: min(80vw,320px);
  }
}
@media screen and (min-width: 768px) {
  .b-footer .e-logo,
  .b-footer .b-mail {
    margin: var(--gap-M) auto;
  }
  .b-footer .b-tel a {
    width: 360px;
  }
}