@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px), print {
#reason .seo_bread_list {
  margin-bottom: -67px;
  color: #FFFFFF;
  position: relative;
  z-index: 2;
}
#reason .seo_bread_list span {
  color: #FFFFFF;
}

/* fv
-------------------------------------*/
.fv {
  max-width: 1920px;
  margin-inline: auto;
  width: 100%;
  position: relative;
  background: url(../images/reason/fv.jpg)no-repeat center center;
  background-size: cover;
  margin-bottom: 6.25rem;
}
.fv .inner {
  width: min(95%, 998px);
  margin-inline: auto;
  padding: 8.4375rem 0 6.4125rem;
}
.fv .subt {
  font-size: 24px;
  line-height: 1.5833333333;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 1.075rem;
}
.fv h2 {
  font-size: 50px;
  line-height: 1.88;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
}
.fv h2 span {
  font-size: 50px;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFFF00;
  background: #0488E5;
  border-radius: 2.5rem;
  padding: 0rem 1.807rem 0.5rem;
  margin-right: 1.2rem;
  position: relative;
  top: -0.25rem;
  left: 0.4rem;
}

/* sec
-------------------------------------*/
.sec .inner {
  width: min(95%, 1600px);
  margin-inline: auto;
  position: relative;
  display: grid;
  grid-template-columns: 53.75% 32.75%;
  gap: 4.95rem;
  padding: 4.3rem 0 0rem;
}
.sec .inner::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 14.5rem;
  background: #0488E5;
  pointer-events: none;
}
.sec .photo-box {
  position: relative;
  margin: 0 0 0 10rem;
}
.sec .subt {
  position: absolute;
  top: 1.95rem;
  left: -4.35rem;
}
.sec .content {
  position: relative;
  padding: 0.65rem 0 0;
}
.sec .content::after {
  position: absolute;
  content: "";
  top: -23px;
  left: 0;
  background: url(../images/reason/sec01-num.svg) no-repeat;
  background-size: contain;
  width: 79px;
  height: 52px;
}
.sec h2 {
  font-size: 44px;
  line-height: 1.3636363636;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 3.75rem;
}
.sec .txt {
  font-size: 16px;
  line-height: 1.875;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.sec .txt span {
  background: linear-gradient(transparent 60%, #FFFF00 30%);
  font-weight: 700;
}

/* sec01
-------------------------------------*/
.sec01 .content::after {
  background: url(../images/reason/sec01-num.svg) no-repeat;
  background-size: contain;
}

/* sec02
-------------------------------------*/
.sec02 .inner {
  grid-template-columns: 42.5% 52.5%;
  gap: 3.75rem;
  padding: 4.3rem 0 0rem;
}
.sec02 .content::after {
  background: url(../images/reason/sec02-num.svg) no-repeat;
  background-size: contain;
}
.sec02 .content {
  margin: 0 0 0 10rem;
}
.sec02 h2 {margin-bottom: 4.35rem;}
.sec02 .photo-box {
  margin: 0;
}
.sec02 .subt {right: 4.95rem;left: unset;top: 1rem;}

/* sec03
-------------------------------------*/
.sec03 .inner {
  gap: 3.75rem;
}
.sec03 .content::after {
  background: url(../images/reason/sec03-num.svg) no-repeat;
  background-size: contain;
}
.sec03 .subt {
  top: 3.35rem;
  left: -3.75rem;
}
.sec03 .content .list {
  display: grid;
  gap: 1.15rem;
  margin: 2.05rem 0 1.7rem;
}
.sec03 .content .list li {
  color: #141414;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 0 0 0.85rem 2.25rem;
  border-bottom: 1px dashed #8F8F8F;
  position: relative;
  width: 23.125rem;
}
.sec03 .content .list li::before {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: 0;
  width: 26px;
  height: 20px;
  background: url(../images/page-common/check-icon.svg) no-repeat;
  background-size: contain;
}


/* merit
-------------------------------------*/
.merit .inner-box {
  width: min(95%, 1600px);
  margin-inline: auto;
  position: relative;
  padding: 9.65rem 0 4.45rem;
  margin-bottom: 8.75rem;
}
.merit .inner-box::after {
  background: #D7000F;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 484px;
  z-index: 1;
  pointer-events: none;
}
.merit h2 {
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #141414;
  text-align: center;
  margin-bottom: 4.3rem;
  position: relative;
  z-index: 3;
}
.merit h2 span {
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.merit .enttl {
  position: absolute;
  top: 3.55rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.merit .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  position: relative;
  z-index: 2;
  width: min(95%, 1400px);
  margin-inline: auto;
}
.merit .txt-box {
  background: #FFFFFF;
  margin-top: -2rem;
  position: relative;
  z-index: 3;
  width: min(95%, 380px);
  margin-inline: auto;
}
.merit .txt-box .num {
  background: #1C1C1C;
  border: 1px solid #FFFFFF;
  font-size: 24px;
  line-height: 1.6666666667;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  padding: 0.55rem 0;
  margin-bottom: 1.6rem;
}
.merit .txt-box .num span {
  color: #FDF202;
}
.merit .txt-box h3 {
  font-size: 22px;
  line-height: 1.8181818182;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}
.merit .txt-box .txt {
  font-size: 16px;
  line-height: 1.875;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 0 2.5rem 2.4rem;
}
.merit .photo {
  text-align: center;
}
/* list02 */
.merit .list02 .txt-box .txt {
  letter-spacing: 0.05em;
}

.sec02 .merit .inner-box {padding: 10.7rem 0 4.45rem;}
.sec02 .merit .enttl{
    top: 5rem;
}
.sec03 .merit .inner-box {padding: 9.3rem 0 4.45rem;}

/* bnr-box
-------------------------------------*/
.bnr-box {
  width: min(95%, 1200px);
  margin-inline: auto;
  padding: 2.45rem 0 6rem;
}
.bnr-box .item {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}
.bnr-box .item li img {
  margin: 0 0 1rem;
}
.bnr-box .item li .txt{
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.875;
}


/* menu
-------------------------------------*/
.menu {
  background: #EFEFEF;
  max-width: 1920px;
  width: 100%;
  margin-inline: auto;
}
.menu .inner {
  width: min(95%, 1600px);
  margin-inline: auto;
  padding: 7.35rem 0 12.5rem;
}
.menu h2 {
  font-weight: bold;
  font-size: 40px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 3.5rem;
}
.menu .menu-box {
  display: grid;
  gap: 2.5rem;
}
.menu .menu-box .upper {
  position: relative;
}
.menu .menu-box .upper::before {
  content: "";
  position: absolute;
  top: -11rem;
  left: 22.5rem;
  width: 147px;
  height: 176px;
  background: url(../images/page-common/menu-deco.png) no-repeat;
  background-size: contain;
}
.menu .menu-box .bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}
.menu .menu-item {
  background: #FFFFFF;
}
.menu .menu-item.mizumawari .item {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding: 3.125rem 0;
  justify-content: center;
  width: min(95%, 1100px);
  margin-inline: auto;
}
.menu .menu-item.gaisou .item,
.menu .menu-item.other .item{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 3.125rem 2.5rem;
}
.menu .menu-item.other .item {
  padding: 3.125rem 2.5rem;
  text-align: center;
}
.menu .menu-box h3 {
  font-weight: bold;
  font-size: 32px;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  color: #fff;
  padding: 1.69rem 0;
}
.menu .menu-box .mizumawari h3 {
  background: #0488E5;
}
.menu .menu-box .gaisou h3 {
  background: #00A63C;
}
.menu .menu-box .other h3 {
  background: #9C6AA5;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
  .fv .inner {
    width: 77.969vw;
    padding: 10.547vw 0 8.016vw;
  }
  .fv .subt {
    font-size: 1.875vw;
    margin-bottom: 1.344vw;
  }
  .fv h2 {
    font-size: 3.906vw;
  }
  .fv h2 span {
    font-size: 3.906vw;
    border-radius: 3.125vw;
    padding: 0px 2.259vw 0.625vw;
    margin-right: 1.5vw;
    top: -0.312vw;
    left: 0.5vw;
  }
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1680px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1680px) {
/* sec
-------------------------------------*/
.sec .inner {
  width: 95.238vw;
  gap: 4.714vw;
  padding: 4.095vw 0 0px;
}
.sec .inner::before {
  height: 13.81vw;
}
.sec .photo-box {
  margin: 0 0 0 9.524vw;
}
.sec .photo-box img {
  width: 100%;
  height: auto;
}
.sec .subt {
  top: 1.857vw;
  left: -4.143vw;
}
.sec .content {
  padding: 0.619vw 0 0;
}
.sec .content::after {
  top: -1.369vw;
  width: 4.702vw;
  height: 3.095vw;
}
.sec h2 {
  font-size: 2.619vw;
  margin-bottom: 3.571vw;
}
.sec .txt {
  font-size: clamp(0.625rem, 0.309rem + 0.66vw, 1rem);
  margin-bottom: 1.048vw;
}

/* sec01
-------------------------------------*/
.sec01 .subt img {
  width: 7.143vw;
}

/* sec02
-------------------------------------*/
.sec02 .inner {
  gap: 3.571vw;
  padding: 4.095vw 0 0px;
}
.sec02 .subt img {
  width: 7.317vw;
}
.sec02 .content::after {
  width: 4.702vw;
  height: 3.095vw;
}
.sec02 .content {
  margin: 0 0 0 9.524vw;
}
.sec02 h2 {margin-bottom: 4.143vw;}
.sec02 .subt {right: 4.714vw;top: 0.952vw;}

/* sec03
-------------------------------------*/
.sec03 .inner {
  gap: 3.571vw;
}
.sec03 .subt {
  top: 3.19vw;
  left: -3.571vw;
}
.sec03 .subt img {
  width: 7.143vw;
}
.sec03 .content .list {
  gap: 1.095vw;
  margin: 1.952vw 0 1.619vw;
}
.sec03 .content .list li {
  font-size: clamp(0.625rem, 0.309rem + 0.66vw, 1rem);
  padding: 0 0 0.81vw 2.143vw;
  width: 27.024vw;
}
.sec03 .content .list li::before {
  top: -0.238vw;
  width: 1.548vw;
  height: 1.19vw;
}
}



/* ========================================
@media screen and (min-width:768px) and (max-width:1640px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1640px) {
/* merit
-------------------------------------*/
.merit .inner-box {
  width: 97.561vw;
  padding: 9.415vw 0 4.341vw;
  margin-bottom: 8.537vw;
}
.merit .inner-box::after {
  height: 29.512vw;
}
.merit h2 {
  font-size: 1.951vw;
  margin-bottom: 4.195vw;
}
.merit h2 span {
  font-size: 1.951vw;
}
.merit .enttl {
  top: 3.756vw;
}
.merit .enttl img {
  width: 16.951vw;
}
.merit .list {
  gap: 2.439vw;
  width: 85.366vw;
}

.merit .list li {
  display: flex;
  flex-direction: column; 
}
.merit .txt-box {
  margin-top: -1.951vw;
  width: 23.171vw;
  flex: 1; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
}
.merit .txt-box .num {
  font-size: 1.463vw;
  padding: 0.537vw 0;
  margin-bottom: 1.561vw;
}
.merit .txt-box h3 {
  font-size: 1.341vw;
  margin-bottom: 1.463vw;
}
.merit .txt-box .txt {
  font-size: clamp(0.625rem, 0.309rem + 0.66vw, 1rem);
  padding: 0 2.439vw 2.341vw;
}
.merit .photo img {
  width: 100%;
  height: auto;
}

.sec02 .merit .inner-box {padding: 10.439vw 0 4.341vw;}
.sec02 .merit .enttl{
    top: 4.878vw;
}
.sec03 .merit .inner-box {padding: 9.073vw 0 4.341vw;}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1280px)
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
  .bnr-box .item li img {
    width: 100%;
    height: auto;
  }
}


/* ========================================
@media screen and (min-width:768px) and (max-width:1680px)
======================================== */
@media screen and (min-width:768px) and (max-width:1680px) {
  .menu h2 {
    font-size: 2.381vw;
    margin-bottom: 3.333vw;
  }
  .menu .menu-box h3 {
    font-size: 1.905vw;
    padding: 1.61vw 0;
  }
  .menu .menu-box .upper::before {
    top: -10.476vw;
    left: 21.429vw;
    width: 8.75vw;
    height: 10.476vw;
  }
  .menu .menu-item img {
    width: 19.238vw;
    height: auto;
    max-width: 340px;
  }
  .menu .menu-item.mizumawari .item {
    gap: 2.381vw;
    padding: 2.976vw 0;
    width: 65.476vw;
  }
  .menu .menu-item.gaisou .item{
    padding: 2.976vw 2.381vw;
    gap: 1.19vw;
  }
  .menu .menu-item.other .item {
    padding: 2.976vw 2.381vw;
    text-align: center;
  }
}


/* ========================================
@media screen and (max-width: 767px) 
======================================== */
@media screen and (max-width: 767px) {
.main-title {
  margin-bottom: 0;
}

/* fv
-------------------------------------*/
.fv {
  max-width: 100vw;
  margin-inline: auto;
  width: 100%;
  position: relative;
  background: url(../images/reason/fv_sp.jpg)no-repeat center center;
  background-size: cover;
  margin-bottom: 11.5vw;
}
.fv .inner {
  width: 91.79vw;
  margin-inline: auto;
  padding: 14vw 0 14.5vw;
}
.fv .subt {
  font-size:3.865vw;
  line-height: 1.75;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 3vw;
}
.fv h2 {
  font-size:6.28vw;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
}
.fv h2 span {
  font-size:7.005vw;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFFF00;
  background: #0488E5;
  border-radius: 10vw;
  padding: 2.06vw 4vw;
  margin: 1.5vw 2.5vw 2vw 0;
  position: relative;
  display: inline-block;
}
.fv h2 span:nth-of-type(3) {
  margin-right: 0;
}

/* sec
-------------------------------------*/
.sec .inner {
  position: relative;
  display: grid;
  gap: 4.95rem;
}
.sec .photo-box {
  display: grid;
  width: 91.79vw;
  margin-inline: auto;
  order: 1;
}
.sec .photo {
  order: 2;
  margin-top: -7vw;
  position: relative;
  z-index: 1;
}
.sec .subt {
  order: 1;
  position: relative;
  z-index: 2;
}
.sec .content {margin-top: -21.5vw;order: 2;}
.sec h2 {
  font-size:4.831vw;
  line-height: 1.5;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #FFFFFF;
  background: #0488E5;
  position: relative;
  padding: 16vw 0 6vw 29vw;
  margin: 0 0 6.5vw;
}
.sec h2::after {
  position: absolute;
  content: "";
  top: 18vw;
  left: 7vw;
  background: url(../images/reason/sec01-num_sp.svg) no-repeat;
  background-size: contain;
  width: 16.2vw;
  height: 11vw;
}
.sec .txt {
  font-size:3.382vw;
  line-height: 1.85714;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 1.9vw;
  width: 86.96vw;
  margin-inline: auto;
}
.sec .txt span {
  background: linear-gradient(transparent 60%, #FFFF00 30%);
  font-weight: 700;
}

/* sec02
-------------------------------------*/
.sec02 h2::after {
  background: url(../images/reason/sec02-num_sp.svg) no-repeat;
}

/* sec03
-------------------------------------*/
.sec03 h2::after {
  background: url(../images/reason/sec03-num_sp.svg) no-repeat;
}
.sec03 .content .list {
  gap: 3.5vw;
  margin: 6.5vw 0 6.619vw;
  display: grid;
}
.sec03 .content .list li {
  font-size:3.865vw;
  letter-spacing: 0.1em;
  padding: 0 0 1.9vw 8.5vw;
  width: 86.96vw;
  margin-inline: auto;
  border-bottom: 0.2vw dashed #8F8F8F;
  position: relative;
}
.sec03 .content .list li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6.29vw;
  height: 4.85vw;
  background: url(../images/page-common/check-icon.svg) no-repeat;
  background-size: contain;
}


/* merit
-------------------------------------*/
.merit {
  position: relative;
}
.merit .inner-box::after {
  background: #D7000F;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 352.5vw;
  z-index: 1;
  pointer-events: none;
  transform: translateX(-50%);
}
.merit .inner-box {
  width: 91.79vw;
  margin-inline: auto;
  position: relative;
  padding: 26.8vw 0 14.5vw;
  margin-bottom: 20.3vw;
}
.merit h2 {
  font-size:7.729vw;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #141414;
  text-align: center;
  margin-bottom: 11.5vw;
  position: relative;
  z-index: 3;
}
.merit h2::after {
  content: none;
}
.merit h2 span {
  font-size:5.797vw;
  line-height: 1.75;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.merit .enttl {
  position: absolute;
  top: 6vw;
  left: 49%;
  transform: translateX(-50%);
  z-index: 2;
  width: 56.8vw;
}
.merit .enttl img {}
.merit .list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16.7vw;
  position: relative;
  z-index: 2;
}
.merit .txt-box {
  background: #FFFFFF;
  margin-top: -9.5vw;
  position: relative;
  z-index: 3;
  width: 82.126vw;
  margin-inline: auto;
  padding: 0 0 4.4vw;
}
.merit .txt-box .num {
  background: #1C1C1C;
  border: 0.2vw solid #FFFFFF;
  font-size:4.831vw;
  line-height: 2;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  padding: 1vw 0;
  margin-bottom: 5.8vw;
}
.merit .txt-box .num span {
  color: #FDF202;
}
.merit .txt-box h3 {
  font-size:5.314vw;
  line-height: 1.545454;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3.65vw;
}
.merit .txt-box .txt {
  font-size:3.382vw;
  line-height: 1.87571428;
  letter-spacing: 0.1em;
  font-weight: 500;
  padding: 0 6vw;
  width: auto;
}
.merit .photo {
  text-align: center;
}
.sec .merit h2 {padding: 0;background: none;font-size: 6.763vw;line-height: 1.35714;margin-bottom: 14vw;}

/* bnr-box
-------------------------------------*/
.bnr-box {
  width: 83.575vw;
  margin-inline: auto;
  padding: 2vw 0 18vw;
  margin-top: -2.9vw;
}
.bnr-box .item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9vw;
}
.bnr-box .item li img {
  margin: 0 0 3vw;
}
.bnr-box .item li .txt{
  font-weight: 500;
  font-size:3.865vw;
  letter-spacing: 0.1em;
  line-height: 1.875;
}


/* menu
-------------------------------------*/
.menu {
  background: #EFEFEF;
  max-width: 100vw;
  width: 100%;
  margin-inline: auto;
}
.menu .inner {
  width: 91.79vw;
  margin-inline: auto;
  padding: 9.2vw 0 24.2vw;
}
.menu h2 {
  font-weight: bold;
  font-size:4.831vw;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 6.5vw;
}
.menu .menu-box {
  display: grid;
  gap: 7.5vw;
}
.menu .menu-box .upper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7.5vw;
}
.menu .menu-box .bottom {
  display: grid;
  gap: 8vw;
}
.menu .menu-item {
  background: #FFFFFF;
}
.menu .menu-item li {
  text-align: center;
}
.menu .menu-item.mizumawari .item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.8vw;
  padding: 7.2vw 4.8vw;
}
.menu .menu-item.gaisou .item,
.menu .menu-item.other .item{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.8vw;
  padding: 7.2vw 4.8vw;
}
.menu .menu-box h3 {
  font-weight: bold;
  font-size:4.348vw;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  color: #fff;
  padding: 5.8vw 0;
}
.menu .menu-box .mizumawari h3 {
  background: #0488E5;
}
.menu .menu-box .gaisou h3 {
  background: #00A63C;
}
.menu .menu-box .other h3 {
  background: #9C6AA5;
}


}