@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px), print {
/* mv
-------------------------------------*/
#mv {
    padding-block: 48px 336px;
}
#mv .ttl {
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    margin-bottom: 33px;
}
#mv .txt {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
}

/* flow-sec
-------------------------------------*/
#flow-sec {
    background: #E6E1D1;
    position: relative;
    padding-bottom: 160px;
}
#flow-sec .bg-top {
    position: absolute;
    top: -300px;
    left: 0;
    width: 100%;
    z-index: -1;
}
#flow-sec .bg-top img {
  width: 100%;
  object-fit: cover;
}
#flow-sec .main-ttl {
    text-align: center;
    position: relative;
    top: -180px;
}

/* step
-------------------------------------*/
.step {
    position: relative;
    width: min(95%,1280px);
    margin-inline: auto;
}
.step:not(:last-child) {
    margin-bottom: 179px;
}
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    background: url(../images/flow/step-arrow.svg) no-repeat center center / contain;
    width: 63px;
    height: 87px;
    bottom: -117px;
    left: 50%;
    transform: translateX(-50%);
}
.step .num {
    text-align: center;
    margin-bottom: 9px;
}
.step .ttl {
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 37px;
}
.step .inner {
    /* width: min(95%, 1280px); */
    /* margin-inline: auto; */
    border: 1px solid #262422;
    padding-block: 58px 57px;
    padding-inline: 90px;
    position: relative;
}
.step .sub-ttl {
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 38px;
}
.step .photo img {
    width: 100%;
    height: auto;
}
.step .inBox {
    display: grid;
    grid-template-columns: 47.2727% 1fr;
    gap: 0 40px;
    padding-bottom: 57px;
}
.step .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.8125;
    text-align: left;
}
.step .bottom-txt {
    text-align: center;
}
.step .point-list {
    width: min(95%, 500px);
    padding-block: 32px 39px;
    display: inline-grid;
    gap: 10px;
}
.step .point-list li {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.05em;
    line-height: 1.9333;
    text-align: left;
    border-bottom: 1px dashed #989271;
    padding-bottom: 4px;
    position: relative;
    padding-inline: 26px 0;
}
.step .point-list li:before {
    position: absolute;
    content: "";
    background: url(../images/flow/star.svg) no-repeat center center / contain;
    width: 14px;
    height: 13px;
    top: 42%;
    left: 0;
    transform: translateY(-50%);
}
.step .inBox02 {
    width: min(95%, 1017px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 53.09% 41.00%;
    gap: 0 60px;
    align-items: center;
}
.step .sub-photo img {
    width: 100%;
    height: auto;
}

/* step01
-------------------------------------*/
#step01 .inner {
    padding-block: 58px 68px;
}
/* ボタンエリア */
#step01 .open-btn-area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
#step01 .open-tel-btn img {
  max-width: 100%;
  height: auto;
  opacity: 1;
}
#step01 .open-tel-btn a {
  height: 80px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 40px;
  text-decoration: none;
  border: 1px solid #262422;
  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.16);
  display: block;
  place-content: center;
  text-align: center;
  cursor: default;
}
#step01 .open-mail-btn {
  height: 80px;
  display: grid;
  place-items: center;
  background: #FFE602;
  border-radius: 40px;
  font-weight: bold;
  font-size: 17px;
  line-height: 1.235;
  text-align: center;
  color: #262422;  
  text-decoration: none;
  position: relative;
  transition: opacity 0.3s;
  cursor: pointer;
  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.16);
}
#step01 .open-mail-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 29px;
  height: 21px;
  background: url(../images/common/mail-btn-arrow.svg) no-repeat center center;
  transform: translateY(-50%);
  pointer-events: none;
  background-size: contain;
}
#step01 .open-mail-btn:hover {
  opacity: 0.8;
}

/* step02
-------------------------------------*/
#step02 .inBox {
    padding-bottom: 22px;
}

/* step04
-------------------------------------*/
#step04 .inBox {
    padding-bottom: 18px;
}

/* step05
-------------------------------------*/
#step05 .inBox {
    padding-bottom: 0;
}

/* step06
-------------------------------------*/
#step06 .inner {
    position: relative;
    z-index: 1;        
    background: #E6E1D1;
}
#step06 .deco {
    position: absolute;
    z-index: 0;
    top: -61px;
    right: 164px;
}
#step06 .deco img {
    width: 278px;
    height: 224px;
}

/* step07
-------------------------------------*/
#step07 .inBox {
    padding-bottom: 19px;
}

/* step08
-------------------------------------*/
#step08 .inBox {
    padding-bottom: 0;
}

/* bottom-sec
-------------------------------------*/
#bottom-sec {
  background: url(../images/flow/bottom-sec-bg.jpg) no-repeat center center / cover;
  padding-block: 227px 0;
  overflow: hidden;
}
#bottom-sec .ttl {
  text-align: center;
  margin-bottom: 64px;
}
#bottom-sec .ttl img {
  max-width: 100%;
  height: auto;
}
#bottom-sec .txt {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.93333;
  text-align: center;
  color: #fff;
  margin-bottom: 203px;
}

#bottom-sec .bg-slide {
  overflow: hidden;
  position: relative;
  top: 36px;
}
#bottom-sec .bg-slide .loop .loop__box {
  display: flex;
  width: 100vw;
}
#bottom-sec .bg-slide .loop .loop__box img {
  min-width: 129.3vw;
  height: auto;
}
#bottom-sec .bg-slide .loop .loop__box img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
}
#bottom-sec .bg-slide .loop .loop__box img:last-child {
  -webkit-animation: loop2 50s linear infinite;
  animation: loop2 50s linear infinite;
}

/* bnr-box
-------------------------------------*/
#bnr-box {
  padding-block: 120px 146px;
}
#bnr-box .bnr-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 37px;
  width: min(95%, 1200px);
  margin-inline: auto;
}
#bnr-box .bnr-list li a {
  display: block;
  transition: opacity 0.3s;
}
#bnr-box .bnr-list li a:hover {
  opacity: 0.75;
}
#bnr-box .bnr-list li img {
  width: 100%;
  height: auto;
}

}




/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
#mv {
  padding-block: 14.55vw 43.26vw;
  padding-inline: 6.52vw;
}
#mv .ttl {
  font-weight: bold;
  font-size:5.797vw;
  line-height: 1.458333;
  text-align: center;
  margin-bottom: 7.05vw;
}
#mv .txt {
  font-weight: 500;
  font-size:3.382vw;
  letter-spacing: 0.05em;
  line-height: 1.785714;
}

/* flow-sec
-------------------------------------*/
#flow-sec {
  background: #E6E1D1;
  position: relative;
  padding-bottom: 19.32vw;
}
#flow-sec .bg-top {
  position: absolute;
  top: -34vw;
  left: 0;
  width: 100%;
  z-index: -1;
}
#flow-sec .main-ttl {
  text-align: center;
  position: relative;
  top: -21vw;
}
#flow-sec .main-ttl img {
  width: 32.37vw;
}

/* step
-------------------------------------*/
.step {
  position: relative;
  width: min(95%,91.79vw);
  margin-inline: auto;
}
.step:not(:last-child) {
  margin-bottom: 25.53vw;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  background: url(../images/flow/step-arrow_sp.svg) no-repeat center center / contain;
  width: 15.22vw;
  height: 15.22vw;
  bottom: -19.06vw;
  left: 50%;
  transform: translateX(-50%);
}
.step .num {
  text-align: center;
  margin-bottom: 3.21vw;
  margin-inline: auto;
}
.step .num img {
  width: 23.19vw;
}
.step .ttl {
  font-weight: 900;
  font-size:5.797vw;
  line-height: 1.3333;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 7.25vw;
}
.step .inner {
  border: 0.2vw solid #262422;
  padding-block: 5.2vw 7.25vw;
  position: relative;
}
.step .sub-ttl {
  font-weight: bold;
  font-size:4.348vw;
  letter-spacing: 0.05em;
  line-height: 1.7777;
  text-align: center;
  margin-bottom: 3.83vw;
}
.step .photo img {
  width: 100%;
  height: auto;
}
.step .inBox {
  width: 82.13vw;
  margin-inline: auto;
  display: grid;
  gap: 5.7vw 0;
}
.step .txt {
  font-size:3.382vw;
  line-height: 1.7857;
  letter-spacing: 0.05em;
}
.step .bottom-txt {width: 82.13vw;margin-inline: auto;}
.step .point-list {padding-block: 6.25vw;display: grid;gap: 3.1vw;}
.step .point-list li {
  font-weight: 500;
  font-size:3.382vw;
  letter-spacing: 0.05em;
  line-height: 1.785714;
  text-align: left;
  border-bottom: 0.2vw dashed #989271;
  padding-bottom: 2.57vw;
  position: relative;
  padding-inline: 6.28vw 0;
}
.step .point-list li:before {
  position: absolute;
  content: "";
  background: url(../images/flow/star.svg) no-repeat center center / contain;
  width: 3.38vw;
  height: 3.14vw;
  top: 1vw;
  left: 0;
}
.step .inBox02 {
  width: 82.13vw;
  margin-inline: auto;
  display: grid;
  gap: 6.7vw 0;
  padding-block: 6.55vw 0;
}
.step .inBox02 .txt {
  order: 2;
}
.step .sub-photo {
  order: 1;
}
.step .sub-photo img {
  width: 100%;
  height: auto;
}

/* step01
-------------------------------------*/
#step01 .num {
  width: 23.19vw;
}
/* ボタンエリア */
#step01 .open-btn-area {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 6.04vw 0;
  width: 86.96vw;
  margin-inline: auto;
  padding-block: 8.66vw 2.5vw;
}
#step01 .open-tel-btn a {
  height: 19.32vw;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 9.66vw;
  text-decoration: none;
  transition: opacity 0.3s;
  cursor: pointer;
  /* box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.16); */
  display: grid;
  place-items: center;
  text-align: center;
}
#step01 .open-tel-btn img {
  width: 54.83vw;
}
#step01 .open-tel-btn a:hover {
  opacity: 0.8;
}
#step01 .open-mail-btn {
  height: 19.32vw;
  display: grid;
  place-items: center;
  background: #FFE602;
  border-radius: 9.66vw;
  font-weight: bold;
  font-size:4.106vw;
  line-height: 1.235;
  text-align: center;
  color: #262422;
  text-decoration: none;
  position: relative;
  transition: opacity 0.3s;
  cursor: pointer;
  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.16);
  padding-left: 2vw;
}
#step01 .open-mail-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9.25vw;
  width: 7.00vw;
  height: 5.07vw;
  background: url(../images/common/mail-btn-arrow.svg) no-repeat center center;
  transform: translateY(-50%);
  pointer-events: none;
  background-size: contain;
}
#step01 .open-mail-btn:hover {
  opacity: 0.8;
}

/* step02
-------------------------------------*/
#step02 .num {
  width: 23.67vw;
}

/* step06
-------------------------------------*/
#step06 .inner {
  position: relative;
  z-index: 1;        
  background: #E6E1D1;
}
#step06 .deco {
  position: absolute;
  z-index: 0;
  top: -10.73vw;
  right: -1.5vw;
}
#step06 .deco img {
  width: 34.54vw;
  height: 47.58vw;
}
#step06 .bottom-txt {
  padding-block: 7.25vw 0;
}

/* bottom-sec
-------------------------------------*/
#bottom-sec {
  background: url(../images/flow/bottom-sec-bg_sp.jpg) no-repeat center center / cover;
  padding-block: 19.14vw 0;
}
#bottom-sec .ttl {
  text-align: center;
  margin-bottom: 9.95vw;
}
#bottom-sec .txt {
  font-weight: 500;
  font-size:3.623vw;
  letter-spacing: 0.05em;
  line-height: 1.86666;
  text-align: center;
  color: #fff;
  margin-bottom: 5vw;
  width: 89.37vw;
  margin-inline: auto;
}
#bottom-sec .bg-slide {
  overflow: hidden;
  position: relative;
  top: 4vw;
}
#bottom-sec .bg-slide .loop .loop__box {
  display: flex;
  width: 100vw;
}
#bottom-sec .bg-slide .loop .loop__box img {
  min-width: 278.8vw;
}
#bottom-sec .bg-slide .loop .loop__box img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
  animation: loop 50s -25s linear infinite;
}
#bottom-sec .bg-slide .loop .loop__box img:last-child {
  -webkit-animation: loop2 50s linear infinite;
  animation: loop2 50s linear infinite;
}

/* bnr-box
-------------------------------------*/
#bnr-box {
  padding-block: 19.5vw 34vw;
}
#bnr-box .bnr-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4.83vw 0;
  width: min(95%, 91.79vw);
  margin-inline: auto;
}
#bnr-box .bnr-list li a {
  display: block;
  transition: opacity 0.3s;
}
#bnr-box .bnr-list li a:hover {
  opacity: 0.75;
}
#bnr-box .bnr-list li img {
  width: 100%;
  height: auto;
}
}