@charset "UTF-8";
/*
  便利カタログについて
-----------------------------------------------*/
.our-pride-01 {}

/* タイトル画像の配置を上書き */
.l-head_img img {
  object-position: left center;
}

/*----------------
  sec-01
*/
.sec-01 {
  background-color: var(--c-main-green);
}
.features-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px 7%;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}
.features-area ._left {
  color: #fff;
  text-align: center;
  /*width: 30%;*/
}
.features-area ._right {
  color: #fff;
  /*width: 70%;*/
}
/* タイトル */
.features-area .features-ttl {
  font-size: clamp( 1.5rem, calc( 1.32rem + 0.72vw ), 1.875rem );/* 24px - 30px */
  line-height: 1.6;
}
.features-area .features-ttl ._emphasis {
  color: var(--c-main-bright-green);
}
.features-area .lead-01 {
  font-size: clamp( 0.9375rem, calc( 0.85rem + 0.36vw ), 1.125rem );/* 15px - 18px */
  font-weight: 600;
  line-height: 1.8;
  margin-top: 20px;
  font-feature-settings: "palt";
}

@media screen and (min-width: 768px) {
  .features-area {
    padding: 60px 0;
  }
}
@media screen and (min-width: 1024px) {
  .sec-01 {
    /*背景斜めに配色の塗り足し*/
    background-image: linear-gradient(90deg, #ffffff 40%, var(--c-main-green) 40.05%);
  }
  .features-area {
    background-image: linear-gradient(102deg, #ffffff 32%, var(--c-main-green) 32.05%);
    flex-direction: row;
    padding: 80px 0;
  }
  .features-area ._left {
    color: var(--c-base-text);
    width: 30%;
  }
  .features-area ._right {
    width: 70%;
  }
}

/*----------------
  sec-02
*/
.sec-02 {
  padding: 60px 0 0;
  position: relative;
  text-align: center;
}

/* タイトル 共通 */
.sec-ttl-01 ._l-txt {
  font-size: clamp( 1.5rem, calc( 1.15rem + 1.45vw ), 2.25rem );
}

.features-search {
  margin: 80px auto;
  text-align: left;
}
/* 共通タイトル */
.benri-ttl__wrap {
  border-top: 1px solid var(--c-link01);
  border-bottom: 1px solid var(--c-link01);
  margin-bottom: 20px;
}
.benri-ttl__wrap .benri-ttl {
  color: var(--c-main-green);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp( 1.25rem, calc( 1.13rem + 0.48vw ), 1.5rem );/* 20px - 24px */
  padding: 8px;
}
/* 段落タイトル */
.benri-ttl__wrap .benri-ttl ._l-txt {
  /*color: rgba(0,93,102,0.5);*/
  font-size: calc(36rem / 16);
  font-weight: 600;
  position: relative;
  padding-right: 40px;
  opacity: 0.5;
}
/* 段落タイトルの間の線 */
.benri-ttl__wrap .benri-ttl ._l-txt::after {
  background-color: var(--c-main-green);
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 28px;
  height: 1px;
}
/* 写真カタログ見開き */
.sec-02 .features-search ._pic01 {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  margin: 30px auto;
}

/* 2カラム */
.features-search.l-2column {
  display: flex;
  flex-direction: column;
  gap: 30px 6%;
}
.features-search.l-2column .l-2column__main {
  flex: 1;
}

@media (min-width: 768px) {
  .sec-02 {
    padding: 100px 0 40px;
  }
  .features-search.l-2column {
    flex-direction: row;
  }
  .features-search.l-2column .l-2column__pic {
    width: calc(100% * (380 /1000));
  }
}

/*----------------
  sec-03
*/
.sec-03 {
  background-color: var(--c-main-green);
  color: #fff;
  padding: 70px 0 50px;
  position: relative;
}
/* レイアウト */
.features-choose {
  display: flex;
  flex-direction: column;
  gap: 30px 6%;
  margin: 60px auto;
}
.features-choose li {
  margin-bottom: 40px;
}
.features-choose ._main {
  flex: 1;
}
/* タイトルを白に */
.sec-03 .benri-ttl__wrap .benri-ttl {
  color: #fff;
}
.sec-03 .benri-ttl__wrap .benri-ttl ._l-txt::after {
  background-color: #fff;
}
@media (min-width: 768px) {
  .sec-03 {
    padding: 90px 0 50px;
  }
  .features-choose {
    flex-direction: row;
    margin: 80px auto;
  }
  .features-choose ._pic {
    width: calc(100% * (380 /1000));
  }
}


/*----------------
  sec-04 カタログのご請求
*/
.sec-04 {
  background-color: var(--c-main-dark-green);
  color: #fff;
  padding: 70px 0 50px;
}
.request-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px 5%;
  margin: 60px auto;
}
.request-wrap ._pic {
  background-color: rgba(255,255,255,0.2);
  /*border-radius: 10px;*/
  display: flex;
  justify-content: center;
  padding: 15px;
  width: 100%;
}
.request-wrap ._pic img {
  max-width: 190px;
  box-shadow: 3px 2px 8px rgba(0,0,0,0.4);
}
.request-wrap ._main {
  flex: 1;
}

/* ボタン */
.sec-04 .btn-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  max-width: max-content;
  margin: 30px auto 0;
}

@media (min-width: 768px) {
  .sec-04 {
    padding: 90px 0 50px;
  }
  .request-wrap ._pic {
    width: calc(100% * (360 / 1200));
  }
  .request-wrap {
    flex-direction: row;
    margin: 80px auto;
  }
  .sec-04 .btn-wrap {
    flex-direction: row;
    margin: 30px 0 0;
  }
}

/*----------------
  sec-05 カタログの軌跡
*/
.sec-05 {
  background-color: var(--c-main-green);
  color: #fff;
  padding: 0 0 60px;
  position: relative;
}
.sec-05::before {
  background-image: linear-gradient(163deg, rgba(0, 134, 147, 0.3), rgba(0, 134, 147, 0) 35%);
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 囲み */
.history-ttl__container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 30px 5%;
  position: relative;
}

.history-ttl__container ._pic {
  position: relative;
}
.history-ttl__container ._main {
  flex: 1;
  padding: 50px 0 30px;
  max-width: 90%;
}
/* タイトル */
.history-ttl__container ._main .history-ttl {
  font-size: clamp( 1.25rem, calc( 1.02rem + 0.96vw ), 1.75rem );/* 20px - 28px */
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1em;
  position: relative;
  padding-left: 50px;
}
.history-ttl__container ._main .history-ttl::before {
  background-color: var(--c-main-bright-green);
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 1px;
}
.history-ttl__container ._main .history-lead {
  font-size: clamp(1rem, calc(0.94rem + 0.24vw), 1.125rem);/* 16px - 18px */
  font-weight: 600;
  line-height: 1.8;
  margin-bottom: 1em;
}

@media (min-width: 768px) {
  .history-ttl__container {
    flex-direction: row;
    align-items: flex-start;
    width: 95%;
    margin: 0 auto 0 0;
  }
  .history-ttl__container ._pic {
    width: 35%;
  }
  .history-ttl__container ._main {
    padding: 90px 0 50px;
    max-width: 900px;
  }
}

/*----------------
  カタログの沿革
*/
.history__list {
  width: min(90%, 1100px);
  margin: 40px auto 20px;
  position: relative;
}
.history__list ._item {
  border-bottom: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  position: relative;
}
/* 年度 */
.history__list ._item ._year {
  color: var(--c-main-bright-green);
  font-size: calc(18rem / 16);
  font-weight: 600;
  width: 110px;
  flex-shrink: 0;
}
.history__list ._item ._year .font-en {
  display: inline-block;
  font-size: calc(50rem / 16);
}
.history__list ._item .history-content {
  /*padding: 10px 0 0;*/
}
.history__list ._item .history-content .history-block {
  display: flex;
  gap: 10px;
}
.history-content ._month {
  font-weight: 600;
  width: 3em;
  flex-shrink: 0;
}
.history-content .history-txt {
  flex: 1
}
.history-content .history-txt .note-txt {
  font-size: calc(14rem / 16);
  display: block;
  margin-top: 10px;
}

/* 画像 */
.history__list ._item .history-pic {
  margin-top: 20px;
  width: max-content;
}
.history__list ._item .history-pic img {
  max-height: 130px;
  width: auto;
}
/*画像を小さく表示したい場合*/
.history__list ._item .history-pic._small img {
  max-height: 100px;
  width: auto;
}

@media screen and (min-width: 768px) {
  .history__list {
    margin: 80px auto 40px;
  }
  .history__list ._item {
    flex-direction: row;
    align-items: center;
    gap: 20px 5%;
  }
  .history__list ._item .history-content {
    flex: 1;
  }
  .history__list ._item .history-pic {
    margin-top: 0;
  }
}