/* 
--------------------------------------------- */
.size_l {
  font-size: 1.75rem;
  font-size: clamp(1.75rem, 1.65rem + 0.4vw, 2rem);
  margin-bottom: 2em;
  font-weight: 600;
}
.size_m {
  font-size: 2.25rem;
  font-size: clamp(2.25rem, 1.95rem + 1.2vw, 3rem); 
  margin-bottom: 2em;
}
.size_s {
  font-size: 1.625rem;
  font-size: clamp(1.625rem, 1.575rem + 0.2vw, 1.75rem);
  margin-bottom: 1.2em;
  font-weight: 500;
}
.deco_txt_l {
font-size: 2.9375rem;
font-size: clamp(2.9375rem, 1.3625rem + 6.3vw, 6.875rem);
color: #e6e6e6;
}
.cl_pink {
  color: #d8677e;
}
.txtbox_lh {
  line-height: 2.2;
}
.txtbox p {
  font-size: 0.9375rem;
  font-size: clamp(0.9375rem, 0.8875rem + 0.2vw, 1.0625rem);
  margin-bottom: 1.5em;
}
picture {
  display: block;
}
.kado {
  border-radius: 20px;
  overflow: hidden;
}
.kado img {
  vertical-align: bottom;
  min-width: 100%;
  object-fit: cover;
}
.ttlbg_w {
  background-color: #fff;
  padding: 5px 5px;
}
@media screen and (max-width:640px) {
  .size_m {
    margin-bottom: 1.5em;
  }
}
@media screen and (max-width:800px) {
  .ttlbg_w {
    background-color: inherit;
    padding: 0;
  }
}

/* 背景
--------------------------------------------- */
.sec_wrap_bg {
  background-image: url(../img/about/bg_about_ie.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
.sec_wrap_bg::before{
  content: '';
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

/* 日吉津村のいいところ
--------------------------------------------- */
.sec_iitoko { 
  position: relative;
  color: #fff;
  padding-top: 270px;
  padding-bottom: 80px;
}
.wrap_iitoko {
  width: 85%;
}
.pic_map {
  max-width: 637px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}
.blk_map {
  position: relative;
  padding-top: 70px;
}
.box_iitoko1,.box_iitoko2 {
  background-color: #fff;
  border-radius: 50%;
  z-index: 1;
  aspect-ratio: 1/1;
  color: #000;
  font-size: 0.875rem;
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
  display: grid;
  place-content: center;
  width: 31%;
  position: absolute;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  padding-top: 1em;
}
.box_iitoko1{
  left: -20px;
  top: 297px;
  top: 54%;
}
.box_iitoko2{
  top: 170px;
  top: 32%;
  right: -20px;
}
.ttl_s_iitoko {
  font-size: 1.0625rem;
  font-size: clamp(1.0625rem, 0.9875rem + 0.3vw, 1.25rem);
  margin-bottom: 0.5em;
  font-weight: 600;
}
.deco_iitoko1 ,.deco_iitoko2 {
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  margin: 0 auto;
  z-index: 2;
}
.deco_iitoko1 {
  width: 78px;
  width: 28%;
}
.deco_iitoko2 { 
  width: 47px;
  width: 17.4%;
}
@media screen and (max-width:800px) {
  .sec_iitoko { 
    padding-top: 180px;
  }
  .blk_map {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .box_iitoko1,.box_iitoko2 {
    border-radius: 10px;
    aspect-ratio: inherit;
    display: block;
    width: 49%;
    position: relative;
    padding-top: 0;
    left: 0;
    right: 0;
    top: -9vw;
    padding: 14vw 20px 40px 20px;
  }
    .deco_iitoko1 ,.deco_iitoko2 {
    top: -9vw;
    z-index: 2;
  }
}

/* Hiezu Village
--------------------------------------------- */
.sec_mask {
  position: relative;
}
.blk_mask {
  position: relative;
  display: block;
  width: 100%;
  height: 115px;
  background-image: url(../img/cmn/bg.gif);
  -webkit-mask-image: url(../img/about/mask_about_bg_round.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: top center;
  mask-image: url(../img/about/mask_about_bg_round.png);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: top center;
}
.txtbox_mask {
  background-image: url(../img/cmn/bg.gif);
  margin-top: -2px;
}
.deco_mask {
  position: absolute;
  top: -60px;
  width: 75px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media screen and (max-width:800px) {
  .blk_mask {
    -webkit-mask-size: 150% 100%;
    mask-size: 150% 100%;
  }
}

/* 
--------------------------------------------- */
.sec_meguri{
  padding-top: 100px;
  padding-bottom: 50px;
}
.wrap_meguri {
  display: flex;
  gap: 7%;
  text-align: left;
}
.sec_wrap_meguri .sec_meguri:nth-child(even) .wrap_meguri { 
  flex-flow: row-reverse;
}
.imgbox_meguri {
  position: relative;
  width: 40%;
}
.ttlbox_meguri {
  position: absolute;
  z-index: 2;
}
.pic_meguri {
  margin-bottom: 30px;
}
.ttl_meguri {
  writing-mode: vertical-rl;
}
.txtbox_meguri {
  flex: 1;
  max-width: 480px;
  padding-top: 30px;
  margin-right: 7.5%;
  z-index: 3;
  position: relative;
}
.sec_wrap_meguri .sec_meguri:nth-child(even) .txtbox_meguri { 
  margin-right: 0;
  margin-left: 7.5%;
}
.pic_l_meguri {
  margin-bottom: 70px;
}
@media screen and (max-width:800px) {
  .wrap_meguri {
    display: block;
  }
  .imgbox_meguri {
    width: 100%;
  }
  .ttlbox_meguri {
    position: static;
  }
  .ttl_meguri {
    writing-mode: inherit;
  }
  .txtbox_meguri {
    max-width: 100%;
    padding-top: 0px;
    margin-right: 0;
  }
  .ttlbox_meguri ,.pic_meguri,.txtbox_meguri{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  .pic_meguri {
    position: static;
  }
  .pic_l_meguri{
    width: 100%;
  }
  .pic_l_meguri .kado{
    border-radius: 0;
  }
}

/* 人の暮らしを巡る
--------------------------------------------- */
.ttlbox_nichijo {
  right: 10%;
  top: -30px;
}
.deco_img_nichijo {
  width: 47px;
  position: absolute;
  bottom: -20px;
  right: 10%;
  z-index: 1;
}

/* 自然を巡る
--------------------------------------------- */
.sec_shizen {
  padding-top: 240px;
}
.ttlbox_shizen {
  left: 32%;
  top: -90px;
}
.txtbox_shizen {
  padding-top: 150px;
}
.pic_tsuri {
  width: 59%;
  position: absolute;
  left: -40%;
  top: -190px;
}
.deco_img_shizen {
  width: 78px;
  position: absolute;
  bottom: -20px;
  right: 50%;
  z-index: 1;
  transform: scaleX(-1);
}
@media screen and (max-width:800px) {
  .sec_shizen {
    padding-top: 50px;
  }
  .pic_tsuri {
    position: static;
    width: 85%;
  }
  .deco_img_shizen {
    display: none;
  }
  .txtbox_shizen {
    padding-top: 0px;
  }
}

/* 食を巡る
--------------------------------------------- */
.sec_shoku {
  padding-top: 240px;
  padding-bottom: 100px;
}
.txtbox_shoku {
  padding-top: 150px;
}
.pic_kinoko {
  width: 59%;
  position: absolute;
  right: -40%;
  top: -190px;
}
.ttlbox_shoku {
  right: 32%;
  top: -90px;
}
.deco_img_shoku {
  width: 76px;
  position: absolute;
  bottom: 50px;
  left: 60%;
  z-index: 1;
}
@media screen and (max-width:800px) {
  .sec_shoku {
    padding-top: 50px;
  }
  .pic_kinoko {
    position: static;
    width: 85%;
  }
  .deco_img_shoku {
    display: none;
  }
  .txtbox_shoku {
    padding-top: 0px;
  }
}


/* 日吉津のあゆみを巡る
--------------------------------------------- */
.sec_ayumi {
  background-image: url(../img/about/bg_about_ie.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  padding-top: 150px;
  padding-bottom: 130px;
  margin-bottom: 50px;
}
.wrap_ayumi {
  width: 85%;
  color: #fff;
  position: relative;
}
.sec_ayumi::before{
  content: '';
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}
.ttl_ayumi {
  margin-bottom: 1.2em;
}
.btn_ayumi {
  background-color: #fff;
  color: #000;
  margin-top: 20px;
}
.btn_ayumi:active, .btn_ayumi:visited, .btn_ayumi:focus {
    background-color: rgb(255, 255, 255);
    color: #000;
}
.btn_ayumi::after {
    background-color: #000;
    background-image: none;
    mask-image: url(../img/cmn/ico_cmn_arrow_black.svg);
    mask-repeat: no-repeat;
    mask-size: 100%;
    mask-position: center center;
}