/*! Writen  by SCSS */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
.garamond {
  font-family: "EB Garamond", serif; }

.inner_main .main_deco.right {
  top: auto;
  bottom: 0;
  right: 0; }

.sec_ttl {
  font-size: clamp(24px, 2.667vw, 32px);
  text-align: center;
  line-height: 1.4; }
  @media screen and (max-width: 480px) {
    .sec_ttl {
      font-size: 6vw; } }

.read_lg {
  font-size: clamp(12px, 1.334vw, 16px); }
  @media screen and (max-width: 480px) {
    .read_lg {
      line-height: 1.4; } }

.brand_ttls {
  text-align: center;
  color: #965b42;
  margin-bottom: clamp(40px, 5.417vw, 65px); }
  .brand_ttls .en {
    font-size: clamp(14px, 1.667vw, 20px);
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 0.2em; }

.item_list {
  max-width: 1370px;
  margin: 0 auto;
  width: calc(100% - 40px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px calc(16%/13.7); }
  @media screen and (max-width: 1300px) {
    .item_list {
      max-width: 1000px;
      gap: 40px 1.33%; } }
  @media screen and (max-width: 768px) {
    .item_list {
      gap: 40px 2%; } }
  @media screen and (max-width: 480px) {
    .item_list {
      gap: 25px 2%; } }
  .item_list .item {
    width: calc(330%/13.7); }
    @media screen and (max-width: 1300px) {
      .item_list .item {
        width: 32%; } }
    @media screen and (max-width: 768px) {
      .item_list .item {
        width: 49%; } }
    @media screen and (max-width: 768px) {
      .item_list .item.img113 {
        margin-right: auto; } }
  .item_list .txt_box {
    margin-top: 10px;
    display: flex;
    align-items: center; }
    @media screen and (max-width: 768px) {
      .item_list .txt_box {
        align-items: flex-start; } }
    .item_list .txt_box .nm {
      font-size: clamp(10px, 1.314vw, 18px);
      line-height: 0.9;
      background: #552f37;
      color: #fff;
      width: 1.1115em;
      height: 1.1115em;
      padding-bottom: 0.1115em;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.5em; }
      @media screen and (max-width: 768px) {
        .item_list .txt_box .nm {
          margin-top: 0.1em; } }
      .item_list .txt_box .nm.ex {
        padding-right: 0.1em; }
    .item_list .txt_box .name {
      font-size: clamp(10px, 1.022vw, 14px);
      letter-spacing: 0.1em; }
      @media screen and (max-width: 960px) {
        .item_list .txt_box .name {
          letter-spacing: 0;
          line-height: 1.2; } }

.txt_box .sec_ttl_min {
  margin-bottom: 0.8em; }
.txt_box .read_lg {
  line-height: 2.75;
  letter-spacing: 0.05em; }

.sec01 {
  background: #dddad3;
  padding-bottom: clamp(60px, 12.084vw, 145px); }
  @media screen and (max-width: 480px) {
    .sec01 {
      padding-bottom: 60px; } }
  .sec01 .sec_ttl_wrap {
    margin-bottom: clamp(40px, 5.834vw, 70px); }
  .sec01 .box01 {
    padding-bottom: clamp(60px, 14.167vw, 170px); }

.sec02 {
  padding-top: clamp(60px, 9.584vw, 115px);
  padding-bottom: clamp(60px, 12.084vw, 145px); }
  @media screen and (max-width: 480px) {
    .sec02 {
      padding-bottom: 60px; } }
  .sec02 .box03 {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: calc(212%/16); }
    @media screen and (max-width: 768px) {
      .sec02 .box03 {
        padding: 0; } }
    .sec02 .box03 .img201_wrap {
      position: relative; }
      @media screen and (max-width: 768px) {
        .sec02 .box03 .img201_wrap {
          width: calc(100% - 40px);
          margin: 0 auto; } }
      .sec02 .box03 .img201_wrap .txt_box {
        text-align: center;
        position: absolute;
        top: 0;
        left: 0; }
        @media screen and (max-width: 768px) {
          .sec02 .box03 .img201_wrap .txt_box {
            position: static;
            margin-bottom: 30px; } }
      .sec02 .box03 .img201_wrap .sec_ttl {
        color: #103676;
        font-size: clamp(24px, 2.834vw, 34px);
        text-align: center;
        line-height: 1.76;
        letter-spacing: 0.05em;
        margin-bottom: clamp(30px, 3.334vw, 40px); }
        @media screen and (max-width: 480px) {
          .sec02 .box03 .img201_wrap .sec_ttl {
            font-size: 6vw; } }
  .sec02 .img_201_cap {
    max-width: 716px;
    width: calc(100% - 40px);
    margin: 13px auto 0; }
  .sec02 .bnr_area {
    max-width: 1000px;
    margin: 0 auto;
    margin-top: clamp(30px, 13.334vw, 160px); }

/*# sourceMappingURL=brand.css.map */