@charset "UTF-8";

ul,li{
  list-style: none;
}
.pc-dn{
  display: none;
}
#subject{
  font-size: 16px;
  overflow: hidden;
}
#subject img {
  width: 100%;
}
.light-blue-box{
  background-color: #C1E5E0;
  padding: 100px 0;
}
.sub-head__title {
  img {
    aspect-ratio: auto;
  }
}

@media (max-width: 768px) {
*{
  font-size: 14px
}
.light-blue-box{
  padding: 50px 0;
}
}

/* ============================================================
   fir-title セクション
============================================================ */
.fir-title{
  padding: 100px 15px;
}
.fir-title .container{
  max-width: 960px;
}
.fir-title h2{
  text-align: center;
  margin-bottom: 50px;
}
.fir-title h2 img{
  width: 350px;
}
.fir-title p{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
}
@media (max-width: 768px) {
.fir-title{
  padding: 50px 15px;
}
.fir-title h2{
  margin-bottom: 25px;
}
.fir-title h2 img{
  width: 240px;
}
.fir-title p{
  font-size: 14px;
  line-height: 1.5em;
}
}

/* ============================================================
   .fir-bring セクション
============================================================ */
.fir-bring{
  padding-left: 15px;
  padding-right: 15px;
}
.fir-bring .container{
  max-width: 960px;
  background: #fff;
  border-radius: 20px;
  padding: 50px 80px;
}
.fir-bring h3{
  position: relative;
  text-align: center;
  margin-bottom: 30px;
  font-weight: 700;
}
.fir-bring h3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: #C1E5E0; /* 線の色を調整 */
  z-index: 0;
  transform: translateY(-50%);
}
.fir-bring h3 span{
  position: relative;
  min-height: 40px;
  display: inline-block;
  padding: 0 20px 0 60px;
  font-size: 24px;
  letter-spacing: .2em;
  z-index: 1;
  background: #fff url("/img/first/fir-i01.svg") no-repeat top left 20px / 27px;
}
.fir-bring ul{
  display: flex;
  flex-wrap: wrap;
  gap:25px;
}
.fir-bring li{
  flex: 1 1 calc(50% - 50px);
  padding: 40px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.5em;
  border: 5px solid #ABDDD6;
  text-align: center;
}
.fir-bring li:last-of-type{
  padding-bottom: 20px;
}
.fir-bring li span{
  display: block;
  font-size: 80%;
}
@media (max-width: 960px) {
.fir-bring .container{
  padding: 50px 50px;
}
.fir-bring ul{
  gap:20px;
}
.fir-bring li{
  flex: 1 1 calc(50% - 20px);
  padding: 30px 20px;
  }
}
@media (max-width: 768px) {
.fir-bring .container{
  padding: 40px 0 50px;
}
.fir-bring h3{
  margin-bottom: 30px;
}
.fir-bring h3 span{
  padding: 0 20px 0 60px;
  font-size: 20px;
  letter-spacing: .1em;
  background: #fff url("/img/first/fir-i01.svg") no-repeat top left 20px / 27px;
}
.fir-bring ul{
  display: flex;
  flex-wrap: wrap;
  gap:15px;
  padding-left: 50px;
  padding-right: 50px;
}
.fir-bring li{
  flex: 1 100%;
  padding: 13px 20px;
  font-size: 15px;
  letter-spacing: 0.15em;
  border: 3px solid #ABDDD6;
}
.fir-bring li:last-of-type{
  padding-bottom: 8px;
}
}

/* ============================================================
   fir-myno セクション
============================================================ */
.fir-myno{
  padding: 100px 15px;
}
.fir-myno .container{
  max-width: 960px;
}
.fir-myno h3{
  text-align: center;
  padding: 20px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #fff;
  line-height: 1.5em;
  vertical-align: middle;
  background: #EE848A;
  border-radius: 50px;
  margin-bottom: 50px;
}
.fir-myno h3 img{
  display: inline-block;
  width: 35px;
  vertical-align: middle;
  margin-right: 20px;
}
.fir-myno p{
  max-width: 820px;
  font-size: 20px;
  line-height: 1.8em;
  margin: 0 auto 20px;
}
.fir-myno .img-box{
  text-align: center;
  margin-bottom: 50px;
}
.fir-myno .img-box img{
  width: 100%;
  max-width: 765px;
}
.fir-myno a{
  display: block;
  font-size: 20px;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
.fir-myno{
  padding: 50px 15px;
}
.fir-myno h3{
  position: relative;
  text-align: left;
  padding: 10px 10px 10px calc((100% - 103px) / 2);
  font-size: 20px;
  letter-spacing: .15em;
  color: #fff;
  line-height: 1.3em;
  margin-bottom: 30px;
}
.fir-myno h3 img{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc((100% - 206px) / 2);
  width: 24px;
}
.fir-myno p{
  font-size: 14px;
  line-height: 1.5em;
  margin: 0 auto 10px;
}
.fir-myno .img-box{
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
.fir-myno a{
  font-size: 14px;
  text-align: left;
  margin-bottom: 30px;
}
}

/* ============================================================
   fir-line セクション
============================================================ */
.fir-line{
  height: 10px;
  width: 100%;
  background: linear-gradient(to right, #ED838A 50%, #00A7A5 50%);
}

/* ============================================================
   fir-note セクション
============================================================ */
.fir-note{
  padding: 100px 15px;
  background: #FFD8D3;
}
.fir-note .container{
  max-width: 1100px;
}
.fir-note h4{
  text-align: center;
  font-size: 32px;
  letter-spacing: .2em;
  vertical-align: middle;
  margin-bottom: 50px;
}
.fir-note h4 img{
  display: inline-block;
  width: 62px;
  vertical-align: middle;
  margin-right: 40px;
}
.fir-note p{
  font-size: 20px;
  line-height: 2em;
  border: 5px solid #C1E5E0;
  background: #fff;
  padding: 50px 80px;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
.fir-note{
  padding: 50px 5px;
}
.fir-note h4{
  font-size: 20px;
  letter-spacing: .2em;
  margin-bottom: 30px;
}
.fir-note h4 img{
  width: 36px;
  margin-right: 20px;
}
.fir-note p{
  font-size: 14px;
  line-height: 1.5em;
  padding: 30px 20px;
  margin-bottom: 0;
}
}

/* ============================================================
   .fir-dw セクション
============================================================ */
.fir-dw{
  padding: 100px 15px;
}
.fir-dw .container{
  max-width: 1070px;
  padding: 50px 80px;
  border: 5px solid #C1E5E0;
  border-radius: 0;
}
.fir-dw h4{
  position: relative;
  text-align: center;
  margin-bottom: 50px;
}
.fir-dw h4::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: #C1E5E0; /* 線の色を調整 */
  z-index: 0;
  transform: translateY(-50%);
}
.fir-dw h4 span{
  position: relative;
  display: inline-block;
  padding: 0 30px;
  font-size: 32px;
  letter-spacing: .2em;
  z-index: 1;
  background: #fff;
}
.fir-dw p{
  font-size: 20px;
  line-height: 2em;
  margin-bottom: 50px;
}
.fir-dw a{
  display: block;
  text-align: center;
  border: 5px solid #9FCEC6;
  border-radius: 50px;
  padding: 15px 20px;
  vertical-align: middle;
  font-size: 20px;
}
.fir-dw span{
  font-size: 20px;
}
.fir-dw img,
.fir-dw .mini-text{
  vertical-align: middle;
}
.fir-dw img{
  display: inline-block;
  width: 40px;
  margin-right: 20px;
}
.fir-dw .mini-text{
  font-size: 90%;
}

@media (max-width: 960px) {
.fir-dw .container{
  padding: 50px 50px;
}
}
@media (max-width: 768px) {
.fir-dw{
  padding: 50px 20px;
}
.fir-dw .container{
  padding: 30px 0;
}
.fir-dw h4{
  margin-bottom: 30px;
}
.fir-dw h4 span{
  padding: 0 20px;
  font-size: 20px;
  letter-spacing: .1em;
}
.fir-dw p{
  font-size: 14px;
  line-height: 1.5em;
  padding: 0 20px;
  margin-bottom: 30px;
}
.fir-dw .link-box{
  padding: 0 20px;
}
.fir-dw a{
  padding: 15px;
  vertical-align: middle;
  font-size: 18px;
  font-weight: 700;
}
.fir-dw img{
  width: 31px;
  margin-right: 0;
}
.fir-dw span{
  display: none;
}
}


address{
  font-style: normal;
}





@media (max-width: 768px) {
.pc-dn{
  display: block;
}
.sp-dn{
  display: none!important;
}
}