/* 
--------------------------------------------- */
.size_l {
  font-size: 1.75rem;
  font-size: clamp(1.75rem, 1.65rem + 0.4vw, 2rem);
  margin-bottom: 2em;
}
.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;
}
.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;
}

@media screen and (max-width:640px) {
  .size_m {
    margin-bottom: 1.5em;
  }
}

/* 日吉津のあゆみ
--------------------------------------------- */
.sec_ayumi {
  background-image: url(../img/history/bg_history_daisen.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  padding-top: 250px;
  padding-bottom: 180px;
}
.wrap_ayumi {
  position: relative;
  color: #fff;
  width: 85%;
  text-align: left;
}
.sec_ayumi::before{
  content: '';
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}
.ttl_ayumi{
  margin-left: 1.2em;
  letter-spacing: 0.05em;
}
.blk_note {
  background-image: url(../img/history/bg_history_note.svg);
  background-size: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 560px;
  width: 100%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 100px 30px 120px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.02em;
  position: relative;
}
.txtbox_ayumi {
  line-height: 2.2;
}
.txtbox_ayumi p{
  margin-left: 1.5em;
}
.deco_megane {
  position: absolute;
  left: -30px;
  bottom: 35px;
  width: clamp(7.1875rem, 4.4375rem + 11vw, 14.0625rem);;
}
.deco_coffee {
  position: absolute;
  right: 40px;
  bottom: -35px;
  width: clamp(4.375rem, 2.625rem + 7.000000000000001vw, 8.75rem);
}
.deco_shiori {
  position: absolute;
  top: -50px;
  right: -50px;
}

@media screen and (max-width:700px) {
  .deco_shiori {
    display: none;
  }
}
@media screen and (max-width:640px) {
  .sec_ayumi {
    padding-top: 100px;
    padding-bottom: 180px;
  }
  .wrap_ayumi {
    width: 85%;
  }
  .ttl_ayumi{
    margin-left: 0;
  }
  .blk_note {
    height: auto;
    writing-mode: inherit;
    padding: 100px 0;
    display: block;
    background-image: none;
  }
  .txtbox_ayumi p {
    margin-left: 0;
  }
  .deco_megane {
    left: 0;
    bottom: 0;
  }
}

/* はじまり
--------------------------------------------- */
.sec_hazimari {
  background-color: #fff;
  background-image: url(../img/cmn/bg.gif);
  padding-top: 130px;
  padding-bottom: 100px;
}
.wrap_hazimari {
  display: flex;
  flex-wrap: wrap;
  gap: 10%;
  width: 85%;
}
.ttlbox_hazimari {
  max-width: 180px;
}
.ttl_hazimari {
  writing-mode: vertical-rl;
  text-align: left;
}
.doco_tsuta {
  width: 100%;
  margin-bottom: 50px;
  display: block;
}
.sec_hazimari .blk_txt {
  text-align: left;
  padding-top: 50px;
  flex: 1;
  padding-left: 5%;
}
@media screen and (max-width:640px) {
  .sec_hazimari {
    padding-top: 80px;
    padding-bottom: 20px;
  }
  .wrap_hazimari {
    display: block;
  }
  .ttl_hazimari {
    writing-mode:inherit;
  }
  .ttlbox_hazimari {
    max-width: 100%;
  }
  .sec_hazimari .blk_txt {
    padding-left: 0;
    padding-top: 0px;
  }
  .doco_tsuta {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}


/* 暮らしを支えてきたもの
--------------------------------------------- */
.sec_kurashi {
  padding-top: 150px;
  padding-bottom: 150px;
}
.wrap_sasae {
  display: flex;
  flex-flow: row-reverse;
  margin-bottom: 100px;
  text-align: left;
  gap: 10%;
  padding-right: 7.5%;
}
.ttl_kurashi {
  writing-mode: vertical-rl;
  max-width: 180px;
  margin-right: auto;
}
.pic_kurashi {
  width: 57%;
}
.pic_kurashi img{
  object-fit: cover;
  min-width: 100%;
}
.wrap_sangyo {
  display: flex;
  text-align: left;
  width: 85%;
  gap: 10%;
}
.pic_sangyo {
  width: 37.5%;
}
.blk_sangyo {
  flex: 1;
  padding-top: 30px;
  margin-bottom: 50px;
}

@media screen and (max-width:640px) {
  .sec_kurashi {
    padding-top: 50px;
    padding-bottom: 80px;
  }
  .wrap_sasae {
    display: block;
    padding-right: 0%;
    width: 85%;
    margin-bottom: 50px;
  }
  .ttl_kurashi {
    writing-mode:inherit;
    max-width:100%;
  }
  .pic_kurashi {
    width: 100%;
  }
  .wrap_sangyo {
    display: block;
    width: 85%;
  }
  .pic_sangyo {
    min-width: 207px;
    margin-left: auto;
    margin-right: auto;
  }
  .blk_sangyo {
    padding-top: 0px;
  }
}
/* 全幅画像
--------------------------------------------- */
.sec_pic {
  max-height: 600px;
  overflow: hidden;
}
.sec_pic img{
  min-width: 100%;
}
@media screen and (max-width:640px) {
  .sec_pic .kado{
    border-radius: 0;
  }
}
/* 時代の変化とともに
--------------------------------------------- */
.sec_jidai {
  padding-top: 150px;
  padding-bottom: 100px;
}
.wrap_jidai {
  display: flex;
  text-align: left;
  gap: 15%;
  width: 85%;
}
.ttl_jidai {
  writing-mode: vertical-rl;
}
.ttlbox_jidai {
  max-width: 180px;
  margin-left: 5%;
}
.blk_jidai {
  max-width: 410px;
  padding-top: 60px;
}
@media screen and (max-width:640px) {
  .sec_jidai {
    padding-top: 80px;
    padding-bottom: 50px;
  }
  .wrap_jidai {
    display: block;
  }
  .ttl_jidai {
    writing-mode: inherit;
  }
  .ttlbox_jidai {
    max-width: 100%;
    margin-left: 0;
  }
  .blk_jidai {
    max-width:100%;
    padding-top: 0px;
  }
}

/* 転換点を巡る
--------------------------------------------- */
.sec_tenkan {
  padding-top: 120px;
  padding-bottom: 100px;
}
.wrap_tenkan {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  gap: 10%;
  width: 85%;
}
.ttlbox_tenkan {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ttl_tenkan {
  writing-mode: vertical-rl;
  text-align: left;
}
.txtbox_tenkan {
  flex: 1;
  padding-top: 30px;
}
.pic_tenkan {
  width: 37.5%;
}
@media screen and (max-width:640px) {
  .sec_tenkan {
    padding-top: 60px;
    padding-bottom: 50px;
  }
  .wrap_tenkan {
    display: block;
  }
  .ttlbox_tenkan {
    display: block;
  }
  .ttl_tenkan {
    writing-mode:inherit;
  }
  .txtbox_tenkan {
    padding-top: 0px;
  }
  .pic_tenkan {
    min-width: 207px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 人を大切にする村へ
--------------------------------------------- */
.sec_hito {
  padding-top: 150px;
  padding-bottom: 50px;
}
.wrap_hito {
  display: flex;
  flex-flow: row-reverse;
  gap: 10%;
  text-align: left;
}
.ttl_hito {
  writing-mode: vertical-rl;
}
.ttlbox_hito {
  max-width: 180px;
}
.txtbox_hito {
  padding-top: 100px;
  flex: 1;
}
@media screen and (max-width:640px) {
  .sec_hito {
    padding-top: 100px;
    padding-bottom: 10px;
  }
  .wrap_hito {
    display: block;
    width: 85%;
  }
  .ttl_hito {
    writing-mode: inherit;
  }
  .ttlbox_hito {
    max-width: 100%;
  }
  .txtbox_hito {
    padding-top: 0px;
  }
}

/* これからを巡る
--------------------------------------------- */
.sec_korekara {
  padding-top: 100px;
  padding-bottom: 150px;
}
.wrap_meguru {
  display: flex;
  flex-flow: row-reverse;
  gap: 10%;
}
.wrap_mirai {
  padding-top: 130px;
  width: 85%;
  text-align: left;
  display: flex;
  flex-flow: row-reverse;
  gap: 10%;
}
.ttlbox_korekara {
  max-width: 180px;
  text-align: left;
}
.ttl_korekara {
  writing-mode: vertical-rl;
}
.pic_korekara {
  width: 57.1%;
}
.pic_mirai {
  width: 37.5%;
}
.txtbox_mirai {
  padding-top: 50px;
  margin-bottom: 20px;
}
@media screen and (max-width:640px) {
  .sec_korekara {
    padding-top: 50px;
    padding-bottom: 100px;
  }
  .wrap_meguru {
    display: block;
    width: 85%;
  }
  .wrap_mirai {
    padding-top: 0px;
    display: block;
  }
  .ttlbox_korekara {
    max-width: 100%;
  }
  .ttl_korekara {
    writing-mode: inherit;
  }
  .pic_korekara {
    width: 100%;
    margin-bottom: 30px;
  }
  .pic_mirai {
    min-width: 207px;
    margin-left: auto;
    margin-right: auto;
  }
  .txtbox_mirai {
    padding-top: 20px;
  }

}

/* 日吉津のあゆみ
--------------------------------------------- */
.sec_mguru {
  background-image: url(../img/history/bg_history_daisen.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  padding-top: 150px;
  padding-bottom: 130px;
  margin-bottom: 50px;
}
.wrap_mguru {
  width: 85%;
  color: #fff;
  position: relative;
}
.sec_mguru::before{
  content: '';
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}
.ttl_mguru {
  margin-bottom: 1.2em;
}
.btn_mguru {
  background-color: #fff;
  color: #000;
  margin-top: 20px;
}
.btn_mguru:active, .btn_mguru:visited, .btn_mguru:focus {
    background-color: rgb(255, 255, 255);
    color: #000;
}
.btn_mguru::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;
}