@charset "UTF-8";
@-ms-viewport {
  width: device-width;
}
/*--------------------------------------------------------------------------
CSS　Life Style Book カスタム設定(style.css)ver.1 2025.9.10
--------------------------------------------------------------------------*/
/*■■■■■■ 基本設定 ■■■■■■■*/
/*OLIVE GREEN*/
/*MARRON BROWN*/
/*アイスグレー*/
/*■■■■■■■ #0 Life Style Book MAIN IMG ■■■■■■*/
.lsb-main-container {
  margin-bottom: -80px;
  height: 100vh; /* 画面いっぱい */
  padding: 80px 8px 8px; /* ヘッダー分80px上マージン */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 上段：2列 */
.lsb-first-block {
  -webkit-box-flex: 55%;
      -ms-flex: 55%;
          flex: 55%; /* 高さ割合（調整可） */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 8px 1fr;
  grid-template-columns: 2fr 1fr; /* ワイド2/3 : 1/3 */
  gap: 8px;
}

/* 下段：3列 */
.lsb-second-block {
  -webkit-box-flex: 45%;
      -ms-flex: 45%;
          flex: 45%; /* 高さ割合（調整可） */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 8px 1fr 8px 1fr;
  grid-template-columns: 2fr 1fr 1fr; /* 2/4 : 1/4 : 1/4 */
  gap: 8px;
}

/* 背景画像共通設定 */
.lsb-main-img-box_1 {
  background: url(../images/life-style-book/head-limg-lsb_1.jpg) top center no-repeat;
  border-right: 12px solid #4f403b;
}

.lsb-main-img-box_2 {
  background: url(../images/life-style-book/head-limg-lsb_2.jpg) top center no-repeat;
  border-right: 12px solid #8a975f;
}

.lsb-main-img-box_3 {
  background: url(../images/life-style-book/head-limg-lsb_3.jpg) top center no-repeat;
  border-right: 12px solid #7f89a9;
}

.lsb-main-img-box_4 {
  background: url(../images/life-style-book/head-limg-lsb_4.jpg) top center no-repeat;
  border-right: 12px solid #e7e3e6;
}

.lsb-main-img-box_5 {
  background: url(../images/life-style-book/head-limg-lsb_5.jpg) top center no-repeat;
  border-right: 12px solid #e89146;
}

.lsb-main-img-box_1,
.lsb-main-img-box_2,
.lsb-main-img-box_3,
.lsb-main-img-box_4,
.lsb-main-img-box_5 {
  background-size: cover;
}

/*■■■■■■■ #1 Life Style Book 記事共通 ■■■■■■*/
.head-title-flex {
  margin: 0 0 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #3C3935;
  border-bottom: 1px solid #3C3935;
}
.head-title-flex span, .head-title-flex p {
  display: block;
}

.lsb-no1 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: "Arial", Sans-Serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
}
.lsb-no1 strong {
  display: block;
  font-size: 3rem;
  text-align: center;
  font-weight: 400;
}

.lsb-slash {
  width: 50px;
  height: 0;
  border-bottom: 1px solid #3C3935;
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
}

.lsb-title {
  font-size: 2rem;
  line-height: 1.2;
  text-align: right;
  font-family: "Arial", Sans-Serif;
}
.lsb-title small {
  display: block;
  font-size: 1.2rem;
}

.lsb-head-title {
  padding: 0 40px;
  font-size: 3rem;
}

.text-setter {
  color: #6d8158;
}

.text-multiway {
  color: #b2b5bc;
}

.text-cityroam {
  color: #8089AC;
}

.text-setter2 {
  color: #966747;
}

.text-kids {
  color: #ba4120;
}

.lsb-style-read-flex {
  margin: 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.4rem;
  line-height: 1.8;
  font-family: "Noto Sans JP", Sans-Serif;
  gap: 20px;
}
.lsb-style-read-flex img {
  width: 100px;
  height: auto;
}

.lsb-style-read-border {
  display: block;
  width: 1px;
  min-width: 1px;
  height: 100px;
  background-color: #3C3935;
}

.lsb-img-adjust2 {
  margin: 30px 0 0;
}

.lsb-sub-flex {
  margin: -30px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.lsb-sub2-flex {
  margin: -80px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.lsb-style-text-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  font-family: "Noto Sans JP", Sans-Serif;
  gap: 30px;
}
.lsb-style-text-flex strong {
  margin: 30px 0 20px;
  font-size: 2.6rem;
  display: block;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.lsb-style-text-flex img {
  margin: 0 0 30px;
  width: 100px;
  height: auto;
}
.lsb-style-text-flex p {
  margin: 0 0 30px;
  font-size: 1.5rem;
}

/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 320px) and (max-width: 566px) {
  /*■■■■■■■ MAIN IMG (XS) ■■■■■■*/
  .lsb-main-container {
    height: 100vh; /* 画面いっぱい固定 */
    padding: 80px 8px -80px; /* ヘッダー分 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  /* 上段 */
  .lsb-first-block {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; /* 50% */
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr; /* 1列2行 */
    height: 50%;
    gap: 8px;
  }
  .lsb-main-img-box_1,
  .lsb-main-img-box_2 {
    height: 100%; /* 上段の中で高さ揃える */
  }
  /* 下段 */
  .lsb-second-block {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1; /* 50% */
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 8px 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto 8px auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .lsb-second-block > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .lsb-second-block > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .lsb-second-block > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .lsb-second-block > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  /* 下段 上半分 */
  .lsb-main-img-box_3 {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/span 2; /* 2列分をまたぐ */
    height: 100%;
  }
  /* 下段 下半分（横並び） */
  .lsb-main-img-box_4,
  .lsb-main-img-box_5 {
    -ms-grid-row: 2;
    grid-row: 2;
    height: 100%;
  }
  .lsb-second-block {
        grid-template-areas: "box3" "box4 box5";
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  /*■■■■■■■ #1 Life Style Book 記事共通 (XS) ■■■■■■*/
  .head-title-flex {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
  }
  .lsb-head-title {
    padding: 0;
    font-size: 2.4rem;
  }
  /*パターンA*/
  .lsb-style-read-flex {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .lsb-style-read-border {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #3C3935;
  }
  .lsb-sub-flex {
    margin: 0 0 0;
  }
  .lsb-sub2-flex {
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .lsb-img-adjust {
    margin-bottom: 30px;
  }
  .lsb-style-text-flex strong {
    font-size: 2.4rem;
  }
  .lsb-style-text-flex img {
    margin: 0 0 30px;
  }
  .lsb-style-text-flex p {
    margin: 0 0 30px;
  }
} /*xs*/
/*------------(SM)------------*/
@media (min-width: 567px) and (max-width: 767px) {
  /*■■■■■■■ MAIN IMG (SM) ■■■■■■*/
  .lsb-main-container {
    height: 100vh; /* 画面いっぱい固定 */
    padding: 80px 8px -80px; /* ヘッダー分 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  /* 上段 */
  .lsb-first-block {
    -webkit-box-flex: 40%;
        -ms-flex: 40%;
            flex: 40%; /* 50% */
    display: -ms-grid;
    display: grid;
    -ms-grid-row: 2;
    grid-row: 2;
    height: 40%;
    gap: 8px;
  }
  .lsb-main-img-box_1,
  .lsb-main-img-box_2 {
    height: 100%; /* 上段の中で高さ揃える */
  }
  /* 下段 */
  .lsb-second-block {
    -webkit-box-flex: 60%;
        -ms-flex: 60%;
            flex: 60%; /* 50% */
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 8px 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto 8px auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .lsb-second-block > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .lsb-second-block > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .lsb-second-block > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .lsb-second-block > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  /* 下段 上半分 */
  .lsb-main-img-box_3 {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/span 2; /* 2列分をまたぐ */
    height: 100%;
  }
  /* 下段 下半分（横並び） */
  .lsb-main-img-box_4,
  .lsb-main-img-box_5 {
    -ms-grid-row: 2;
    grid-row: 2;
    height: 100%;
  }
  .lsb-second-block {
        grid-template-areas: "box3" "box4 box5";
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  /*■■■■■■■ #1 Life Style Book 記事共通 (SM) ■■■■■■*/
  .head-title-flex {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
  }
  .lsb-head-title {
    padding: 0 0 0 20px;
    font-size: 2.4rem;
  }
  /*パターンA*/
  .lsb-style-read-flex {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .lsb-sub-flex {
    margin: 0 0 0;
  }
  .lsb-sub2-flex {
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .lsb-img-adjust {
    margin-bottom: 30px;
  }
  .lsb-style-text-flex strong {
    font-size: 2.4rem;
  }
  .lsb-style-text-flex img {
    margin: 0 0 30px;
  }
  .lsb-style-text-flex p {
    margin: 0 0 30px;
  }
} /*SM*/
/*------------(MD)------------*/
@media (min-width: 768px) and (max-width: 1023px) {
  /*■■■■■■ ＃0　自転車一覧 (MD) ■■■■■■■*/
  .lsb-main-container {
    height: 100vh; /* 画面いっぱい固定 */
    padding: 80px 8px -80px; /* ヘッダー分 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  /* 上段 */
  .lsb-first-block {
    -webkit-box-flex: 40%;
        -ms-flex: 40%;
            flex: 40%; /* 50% */
    display: -ms-grid;
    display: grid;
    -ms-grid-row: 2;
    grid-row: 2;
    height: 40%;
    gap: 8px;
  }
  .lsb-main-img-box_1,
  .lsb-main-img-box_2 {
    height: 100%; /* 上段の中で高さ揃える */
  }
  /* 下段 */
  .lsb-second-block {
    -webkit-box-flex: 60%;
        -ms-flex: 60%;
            flex: 60%; /* 50% */
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 8px 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto 8px auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .lsb-second-block > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .lsb-second-block > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .lsb-second-block > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .lsb-second-block > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  /* 下段 上半分 */
  .lsb-main-img-box_3 {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/span 2; /* 2列分をまたぐ */
    height: 100%;
  }
  /* 下段 下半分（横並び） */
  .lsb-main-img-box_4,
  .lsb-main-img-box_5 {
    -ms-grid-row: 2;
    grid-row: 2;
    height: 100%;
  }
  .lsb-second-block {
        grid-template-areas: "box3" "box4 box5";
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
  /*■■■■■■■ #1 Life Style Book 記事共通 (MD) ■■■■■■*/
  .head-title-flex {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
  }
  .lsb-head-title {
    padding: 0 0 0 20px;
    font-size: 2.4rem;
  }
  /*パターンA*/
  .lsb-style-read-flex {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .lsb-sub-flex {
    margin: 0 0 0;
  }
  .lsb-img-adjust {
    margin-bottom: 30px;
  }
  .lsb-style-text-flex strong {
    font-size: 2.4rem;
  }
  .lsb-style-text-flex img {
    margin: 0 0 30px;
  }
  .lsb-style-text-flex p {
    margin: 0 0 30px;
  }
} /*MD*/
/*------------(LG)------------*/
@media (min-width: 1024px) and (max-width: 1215px) {
  /*■■■■■■■ #1 Life Style Book 記事共通 (MD) ■■■■■■*/
  .head-title-flex {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
  }
  .lsb-head-title {
    padding: 0 0 0 30px;
    font-size: 2.4rem;
  }
  /*パターンA*/
  .lsb-sub-flex {
    margin: -30px 0 0;
  }
  .lsb-img-adjust {
    margin-bottom: 30px;
  }
  .lsb-style-text-flex strong {
    font-size: 2.4rem;
  }
  .lsb-style-text-flex img {
    margin: 0 0 20px;
  }
  .lsb-style-text-flex p {
    margin: 0 0 20px;
  }
} /*LG*/
/*------------(XL)------------*/
/*XL*/