/* index.php reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ====== main visual ====== */
#index .mv {
  width: 100%;
  height: calc((var(--vh) * 100) - 100px);
  position: relative;
  overflow: hidden;
  background: #f2e5d8;
  z-index: 0;
}
x #index .mv .mv_box {
  width: 100%;
  height: 100%;
  position: relative;
}
#index .mv .mv_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#index .mv h1 {
  width: 30vw;
  max-width: 340px;
  position: absolute;
  right: calc(50% - 15vw);
  top: calc((50% - 15vw) - 70px);
  z-index: 10;
}
@media screen and (min-width: 1140px) {
  #index .mv h1 {
    right: calc(50% - 170px);
    top: calc((50% - 170px) - 70px);
  }
}
#index .mv h1 a {
  display: block;
}
#index .mv .arrow {
  width: 20px;
  height: 180px;
  position: absolute;
  left: 40px;
  bottom: calc(var(--vh) * 10);
}
#index .mv .arrow div {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 70%;
  letter-spacing: 0.2em;
  /*! position: absolute;
  top: 0;
  left: 0; */
}
#index .mv .arrow span {
  display: block;
  margin: auto;
}
#index .mv .arrow i {
  display: block;
  margin: auto;
  width: 1px;
  height: 40px;
  margin-top: 10px;
  background: #000000;
}

/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
  #index .mv {
    height: calc(var(--vh) * 50);
  }
  #index .mv .mv_img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #index .mv h1 {
    display: none;
  }
}

/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .mv {
    height: auto;
    min-height: calc(var(--vh) * 50);
  }
  #index .mv .arrow {
    width: 15px;
    height: auto;
    padding-bottom: 45px;
    left: calc(5vw - 10px);
    bottom: calc(var(--vh) * 12);
  }
  #index .mv .arrow span {
    position: absolute;
    bottom: 0;
    left: 50%;
  }
}
/* お知らせバー */
#index .mv .shortnews_box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  background: var(--main-color);
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 15;
}
#index .mv .shortnews_box h3 {
  width: 100px;
  font-weight: bold;
  font-size: 1.2em;
  color: var(--emtext-color);
}
#index .mv .shortnews {
  width: calc(100% - 110px);
  background: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
  gap: 10px;
}
#index .mv .shortnews dd {
  padding: 6px 30px 8px 10px;
  display: flex;
  align-items: center;
}
#index .mv .shortnews dd::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin-top: 3px;
  margin-right: 10px;
  background: #bc7c3c;
  border-radius: 5px;
}

/* タブレット用のスタイル */
@media screen and (max-width: 1025px) {
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .mv .shortnews_box {
    padding: 2%;
  }
  #index .mv .shortnews_box h3 {
    width: 20vw;
  }
  #index .mv .shortnews {
    width: calc(100% - 20vw);
  }
  #index .mv .shortnews dd {
    width: 100%;
    padding: 1vw 0 1vw 2vw;
    font-size: calc(100vw / 28);
  }
  #index .mv .shortnews {
    gap: 0;
  }
}
@media screen and (max-width: 430px) {
}

/* ====== aboutus ====== */
#index .about {
  margin: 0 auto 0;
  position: relative;
}
#index .about .cntns_hl1::after {
  background: url(../images/index/about_h.png) no-repeat;
  background-size: contain;
}
#index .about::before,
#index .about::after {
  content: "";
  display: block;
}
#index .about::before {
  width: 14vw;
  max-width: 300px;
  height: 14vw;
  max-height: 305px;
  background: url(../images/index/bg_il01.png) no-repeat bottom left;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
}
#index .about::after {
  width: 14vw;
  max-width: 300px;
  height: 14vw;
  max-height: 340px;
  background: url(../images/index/bg_il02.png) no-repeat top right;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
}
#index .about .about_box {
  padding: 60px 0 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#index .about .about_img {
  padding-bottom: 200px;
  width: 46%;
  max-width: 850px;
  position: relative;
}
#index .about .about_img_box {
  line-height: 0;
  margin-bottom: 40px;
}
#index .about .about_img_box.moka {
  width: 18%;
  max-width: 180px;
  position: absolute;
  bottom: 5px;
  left: 50%;
}
#index .about .about_txt {
  width: 50%;
}
#index .about .about_txt p {
  width: 100%;
  line-height: 2;
  position: relative;
  margin-bottom: 60px;
  padding-right: 3%;
}
#index .about .about_txt .about_txt_img {
  display: flex;
  gap: 0;
}
#index .about .about_txt .about_txt_img li {
  line-height: 0;
  overflow: hidden;
}
#index .about .about_txt .about_txt_img li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
#index .about .main_btn {
  margin: 0 0 0 auto;
}

/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
  #index .about {
    margin: 0 auto 0;
    position: relative;
  }
  #index .about .about_box {
    align-items: flex-start;
    padding: 4vw 0 6vw;
  }
  #index .about .about_img {
    width: 42%;
  }
  #index .about .about_img_box.moka {
    width: 40%;
    max-width: 180px;
    position: absolute;
    bottom: -10%;
    left: 40%;
  }
  #index .about .about_txt {
    width: 56%;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .about {
    margin: 0 auto 0;
  }
  #index .about::before,
  #index .about::after {
    width: 30vw;
    height: 30vw;
  }
  #index .about .about_box {
    padding: 3vw 0 16vw;
    position: relative;
  }
  #index .about .about_img {
    display: none;
  }
  #index .about .about_txt .about_txt_img {
    flex-wrap: wrap;
  }
  #index .about .about_txt .about_txt_img .sp_block {
    width: 100%;
    height: 60vw;
  }
  #index .about .about_txt .about_txt_img li {
    width: 50%;
  }
  #index .about .about_txt {
    margin: auto;
    width: 90%;
    line-height: 1.8;
    padding: 0;
  }
  #index .about .about_txt p {
    font-size: 100%;
    margin-bottom: 6vw;
  }
  #index .about .about_txt p img {
    width: 25%;
    position: absolute;
    right: 3%;
    bottom: 0;
  }
}

/* ====== brand ====== */
#index .brand {
  margin: 0 auto 0;
  padding: 10vw 0 10vw 0;
  position: relative;
  background: url(../images/index/brand.jpg) no-repeat right top;
  background-attachment: fixed;
  background-size: cover;
}
#index .brand .brand_hl {
  padding: 150px 0;
  text-align: center;
  font-family: "LINE Seed JP", sans-serif;
  font-size: 2.8em;
  font-weight: 900;
  color: #ffffff;
  position: relative;
}
#index .brand .brand_hl::before,
#index .brand .brand_hl::after {
  content: "";
  display: block;
  width: 30vw;
  max-width: 420px;
  height: 10vw;
  max-height: 150px;
  margin: 0 auto;
}
#index .brand .brand_hl::before {
  background: url(../images/index/brand_h.png) no-repeat bottom center;
  background-size: contain;
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
}
#index .brand .brand_hl::after {
  background: url(../images/index/brand_b.png) no-repeat top center;
  background-size: contain;
  position: absolute;
  bottom: -20px;
  right: 0;
  left: 0;
}
#index .brand .brand_txt {
  width: 100%;
  margin-bottom: 30px;
  line-height: 2;
  text-align: center;
  font-size: 1.2em;
  color: #ffffff;
  position: relative;
}
/* タブレット用のスタイル */
@media screen and (max-width: 1081px) {
  #index .brand {
    padding: 10vw 0 10vw 0;
    background-attachment: scroll;
  }
  #index .brand .brand_hl {
    padding: 8vw 0;
    font-size: 2.2em;
  }
  #index .brand .brand_txt {
    margin: 4vw auto;
    line-height: 1.8;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .brand {
    margin: 0 auto;
    padding: 16vw 5vw;
  }
  #index .brand .brand_wpap {
    padding: 4vw 5vw 16vw 5vw;
    background: #ffffff99;
    border-radius: 6vw;
    position: relative;
  }
  #index .brand .brand_hl::before {
    top: -4vw;
  }
  #index .brand .brand_hl::after {
    bottom: -4vw;
  }
  #index .brand .brand_txt {
    width: 100%;
    line-height: 1.8;
  }
  #index .brand .brand_txt p {
    padding-left: 0;
    font-size: 100%;
  }
}
/* ====== historyus ====== */
#index .history {
  margin: 0 auto 0;
  padding: 60px 120px 0;
  position: relative;
}
#index .history .history_box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#index .history .cntns_hl1 {
  width: fit-content;
  margin-bottom: 60px;
}
#index .history .cntns_hl1::after {
  background: url("../images/index/history_h.png") no-repeat;
  background-size: contain;
}
#index .history .history_txt {
  /* background: url("../images/index/history_top_img.jpg") no-repeat top right;
  background-size: 40% auto; */
  width: 60%;
}
#index .history .history_txt::before {
  content: " ";
  display: block;
  width: 20%;
  max-width: 200px;
  height: 16%;
  max-height: 160px;
  background: url("../images/common/moka_02.png") no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 33%;
}
#index .history .history_txt p {
  width: 100%;
  line-height: 2;
  position: relative;
  margin-bottom: 60px;
}
#index .history .history_img {
  width: 36%;
  padding: 60px 0;
  position: relative;
  z-index: 0;
}
#index .history .history_img::before,
#index .history .history_img::after {
  content: "";
  display: block;
  width: 4vw;
  max-width: 60px;
  height: 30vw;
  max-height: 600px;
  background: url(../images/common/coffee_line.png) no-repeat top right;
  background-size: contain;
  z-index: -1;
}
#index .history .history_img::before {
  position: absolute;
  bottom: 0;
  left: 13%;
}
#index .history .history_img::after {
  position: absolute;
  top: 0;
  right: 12%;
}

#index .history .history_img01 {
  width: 55%;
  margin: 0 0 -40px auto;
}
#index .history .history_img02 {
  width: 45%;
  margin: 0 auto -80px 0;
}
#index .history .history_img03 {
  width: 40%;
  margin: 0 0 0 auto;
}

/* タブレット用のスタイル */
@media screen and (max-width: 1181px) {
  #index .history {
    margin: 0 auto 0;
    padding: 6vw 8vw 0;
    position: relative;
  }
  #index .history .history_txt::before {
    width: 18%;
    height: 12%;
    right: 24%;
    bottom: -5%;
  }
  #index .history .cntns_hl1 {
    width: 100%;
    margin-bottom: 2vw;
  }
  #index .history .history_txt {
    background: none;
  }
  #index .history .history_img01 {
    width: 80%;
    margin: 0 0 0 auto;
  }
  #index .history .history_img02 {
    width: 70%;
    margin: 5vw auto 0 0;
  }
  #index .history .history_img03 {
    width: 60%;
    margin: 5vw 0 0 auto;
  }
  #index .history .history_img::before,
  #index .history .history_img::after {
    height: 45vw;
    max-height: 600px;
  }
  #index .history .history_img::before {
    position: absolute;
    bottom: 20%;
  }
}
@media screen and (max-width: 1081px) {
  #index .history {
    width: 90%;
    margin: 0 auto 0;
    padding: 6vw 0 0;
    position: relative;
  }
  #index .history .history_box {
    padding: 4vw 0 6vw;
  }
  #index .history .history_txt h3 {
    font-size: 1.4em;
    line-height: 1.4;
  }
  #index .history .history_txt {
    line-height: 1.8;
    width: 59%;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index .history {
    margin: 7vw auto;
  }
  #index .history .history_box {
    padding: 3vw 0 6vw;
    position: relative;
  }
  #index .history .cntns_hl1 {
    margin-bottom: 6vw;
  }
  /* #index .history .sp_block {
    width: 90%;
    margin: 0 auto 3vw;
  } */
  #index .history .history_txt {
    width: 100%;
    line-height: 1.8;
    background: none;
  }
  #index .history .history_txt::before {
    width: 30%;
    max-width: 200px;
    height: 20%;
    max-height: 160px;
    position: absolute;
    bottom: 21%;
    right: 55%;
  }
  #index .history .history_txt p {
    margin-bottom: 6vw;
    padding-left: 0;
    padding-right: 5px;
    font-size: 100%;
  }
  #index .history .history_txt p .moka {
    width: 28%;
    max-width: 200px;
    position: absolute;
    bottom: -13%;
    right: auto;
  }
  #index .history .history_img {
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 0;
  }
  #index .history .history_img01 {
    width: 55%;
    margin: 0 0 -40px auto;
  }
  #index .history .history_img02 {
    width: 45%;
    margin: 0 auto -80px 0;
  }
  #index .history .history_img03 {
    width: 40%;
    margin: 0 0 0 auto;
  }
  #index .history .history_img::before,
  #index .history .history_img::after {
    content: "";
    display: block;
    width: 6vw;
    max-width: 60px;
    height: 60vw;
    max-height: 600px;
  }
  #index .history .history_img::before {
    bottom: 0;
  }
}

/* ====== information ====== */
#index #information {
  margin: 0 auto 0;
  position: relative;
}
#index #information .cntns_hl1::after {
  background: url("../images/index/information_h.png") no-repeat;
  background-size: contain;
}
#index #information::before,
#index #information::after {
  content: "";
  display: block;
}
#index #information::after {
  width: 11vw;
  max-width: 140px;
  height: 13vw;
  max-height: 170px;
  background: url("../images/index/cfe_il01.png") no-repeat bottom left;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 12%;
}
#index #information::before {
  width: 14vw;
  max-width: 150px;
  height: 14vw;
  max-height: 280px;
  background: url("../images/index/cfe_il02.png") no-repeat top right;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 3%;
}
#index .info_box {
  padding: 60px 0 120px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
#index .info_box::before {
  content: " ";
  display: block;
  width: 10%;
  max-width: 160px;
  height: 16%;
  max-height: 160px;
  background: url("../images/common/moka_03.png") no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -5%;
  right: -5%;
}
#index .info_data {
  width: 42%;
  position: relative;
}
#index .info_data_box {
  line-height: 0;
  margin-bottom: 40px;
}
#index .info_data_box h3 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 20px 0 20px;
}
#index .info_data_box .info_data_items {
  width: fit-content;
}
#index .info_data_box .info_data_items dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 5px;
  border-bottom: 2px dashed #bc7c3c;
}
#index .info_data_box .info_data_items dt {
  min-width: 120px;
  padding-left: 1.4em;
  font-weight: bold;
  position: relative;
}
#index .info_data_box .info_data_items dt::before {
  content: " ";
  width: 1em;
  height: 1em;
  display: inline-block;
  background: url("../images/common/icon_02.png") no-repeat;
  background-size: contain;
  position: absolute;
  top: 0.25em;
  left: 0;
}
#index .info_data_box .info_data_items dt::after {
  content: "：";
  display: block;
  position: absolute;
  top: 0.25em;
  right: 0;
}
#index .info_box .info_data_map {
  height: calc(var(--vh) * 40);
}
#index .info_box .info_data_map iframe {
  width: 100%;
  height: 100%;
}
#index .info_txt {
  width: 55%;
  padding-right: 3%;
}
#index .info_txt p {
  width: 100%;
  line-height: 2;
  position: relative;
}
#index .info_txt p .moka {
  width: 16%;
  max-width: 160px;
  position: absolute;
  bottom: -5%;
  right: 5%;
}
#index .info_txt .info_txt_img {
  display: flex;
  align-items: end;
  gap: 0;
  margin-bottom: 30px;
}
#index .info_txt .info_txt_img li:first-child {
  margin-bottom: 30px;
}
#index .info_txt .info_txt_img li:last-child {
  margin-left: -60px;
}

/* タブレット用のスタイル */
@media screen and (max-width: 1181px) {
  #index #information::before {
    width: 14vw;
    max-width: 150px;
    height: 14vw;
    max-height: 280px;
    position: absolute;
    bottom: -10%;
    left: auto;
    right: 26%;
  }
  #index .info_box::before {
    position: absolute;
    bottom: -10%;
    right: 8%;
  }
}
@media screen and (max-width: 1081px) {
  #index #information {
    margin: 4vw auto 0;
    position: relative;
  }
  #index .info_box {
    padding: 4vw 0 6vw;
  }
  #index .info_data {
    width: 46%;
  }
  #index .info_data_box .info_data_items dt {
    min-width: 12vw;
  }
  #index .info_box .info_data_map {
    max-height: 200px;
  }
  #index .info_txt {
    width: 52%;
  }
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 768px) {
  #index #information {
    margin: 7vw auto;
  }
  #index #information::after {
    width: 20vw;
    max-width: 120px;
    height: 20vw;
    max-height: 150px;
    right: 5%;
  }
  #index #information::before {
    width: 20vw;
    max-width: 150px;
    height: 30vw;
    max-height: 280px;
    bottom: -3%;
    left: 50%;
  }
  #index .info_data {
    width: 100%;
    position: relative;
  }
  #index .info_box {
    padding: 3vw 0 16vw 0;
    position: relative;
  }
  #index .info_box::before {
    width: 16%;
    max-width: 160px;
    height: 8%;
    max-height: 160px;
    position: absolute;
    bottom: -3%;
    right: 5%;
  }
  #index .info_data_box .info_data_items {
    width: 100%;
  }
  #index .info_data_box .info_data_items dt {
    min-width: 24vw;
  }
  #index .info_box .info_data_map {
    height: calc(var(--vh) * 30);
    margin-bottom: 4vw;
  }
  #index .info_img {
    display: none;
  }
  #index .info_txt {
    width: 100%;
    line-height: 1.8;
  }
  #index .info_txt p {
    font-size: 100%;
  }
}