@charset "utf-8";

/*============================
こだわり
============================*/
.concept .header {
  padding: 0.70rem 0;
  text-align: center;
  color: #FFF;
}
@media screen and (max-width: 640px) {
  .concept .header {
    padding: 0.35rem 0;
  }
}

.concept .header .tit {
  font-size: 0.42rem;
  letter-spacing: 0.12em;
    line-height: 1.25em;
}
@media screen and (max-width: 640px) {
  .concept .header .tit {
    font-size: 0.21rem;
    line-height: 1.5;
  }
}

.concept .header .txt {
  padding-top: 0.20rem;
  font-size: 0.16rem;
  letter-spacing: 0.10em;
  line-height: 1.75;
    text-align: center;
}
@media screen and (max-width: 640px) {
  .concept .header .txt {
    padding-top: 0.10rem;
    font-size: 0.14rem;
    letter-spacing: 0.05em;
  }
}

/* 各こだわり */
.concept .concept_box {
  padding: 0.70rem 0;
  position: relative;
}
@media screen and (max-width: 640px) {
  .concept .concept_box {
    padding: 0.35rem 0;
  }
}

.concept .concept_box::after {
  content: "";
  width: 100%;
  max-width: 9.00rem;
  height: 1px;
  background-color: #5A5952;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
@media screen and (max-width: 640px) {
  .concept .concept_box::after {
    max-width: calc(100% - 0.40rem);
  }
}

.concept .concept_box:last-child::after {
  content: none;
}

.concept .concept_box .tit {
  text-align: center;
  font-size: 0.38rem;
  letter-spacing: 0.10em;
  padding-bottom: 0.50rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .tit {
    font-size: 0.28rem;
    padding-bottom: 0.25rem;
    line-height: 1.5;
  }
}

.concept .concept_box .in {
  max-width: 9.80rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.concept .concept_box .in + .in {
  margin-top: 0.25rem;
}

.concept .concept_box .in .ph_wrap {
  width: 100%;
  max-width: 4.50rem;
  height: auto;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .ph_wrap {
    max-width: 100%;
    height: 66vw;
  }
}

.concept .concept_box .in .ph_wrap.-full {
  max-width: 100%;
  height: 5.00rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .ph_wrap.-full {
    height: 66vw;
  }
}

.concept .concept_box .in .ph_wrap a {
  display: block;
  height: 100%;
}

.concept .concept_box .in .ph_wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.concept .concept_box .in .ph_wrap a:hover img {
  transform: scale(1.04);
  opacity: 0.7;
}

.concept .concept_box .in .txt_box {
  width: 100%;
  max-width: 3.90rem;
  padding-top: 0.20rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box {
    max-width: 100%;
  }
}

.concept .concept_box .in .txt_box.-full {
  max-width: 100%;
  padding-top: 0.60rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box.-full {
    max-width: 100%;
    padding-top: 0.20rem;
  }
}

.concept .concept_box .in .txt_box .catch {
  font-size: 0.24rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  padding-bottom: 0.20rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box .catch {
    font-size: 0.18rem;
    text-align: left;
    padding-bottom: 0.10rem;
  }
}

.concept .concept_box .in .txt_box .txt {
  font-size: 0.16rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: justify;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box .txt {
    font-size: 0.14rem;
  }
}

.concept .concept_box .in .txt_box .more_link {
  padding-top: 0.50rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box .more_link {
    padding-top: 0.30rem;
    text-align: right;
  }
}

.concept .concept_box .in .txt_box .more_link a {
  font-family: "Roboto", serif;
  color: #333;
  position: relative;
  font-size: 0.14rem;
}

.concept .concept_box .in .txt_box .more_link a::after {
  content: ">";
  display: inline-block;
  padding-left: 0.20rem;
}

.concept .concept_box .in .txt_box .more_link a::before {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .3s;
}

.concept .concept_box .in .txt_box .more_link a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}

.concept .concept_box .in .txt_box.-full .list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box.-full .list {
    gap: 0.20rem 0;
  }
}

.concept .concept_box .in .txt_box.-full .list .detail {
  width: 100%;
  max-width: 2.16rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box.-full .list .detail {
    width: 100%;
    max-width: 49%;
  }
}

.concept .concept_box .in .txt_box.-full .list .detail .ph {
  width: 100%;
  height: 2.30rem;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box.-full .list .detail .ph {
    height: 33vw;
  }
}

.concept .concept_box .in .txt_box.-full .list .detail .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept .concept_box .in .txt_box.-full .list .detail .num {
  background-color: #641417;
  text-align: center;
  color: #FFF;
  font-size: 0.32rem;
  letter-spacing: 0.10em;
  font-family: "Roboto", serif;
  padding: 0.17rem 0 0.20rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box.-full .list .detail .num {
    background-color: #641417;
    text-align: center;
    color: #FFF;
    font-size: 0.20rem;
    letter-spacing: 0.10em;
    font-family: "Roboto", serif;
    padding: 0.10rem 0 0.12rem;
  }
}

.concept .concept_box .in .txt_box.-full .list .detail .txt {
  font-size: 0.20rem;
  letter-spacing: 0.10em;
  line-height: 1.3;
  text-align: center;
  padding-top: 0.20rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .in .txt_box.-full .list .detail .txt {
    font-size: 0.14rem;
    letter-spacing: 0.10em;
    line-height: 1.3;
    text-align: center;
    padding-top: 0.10rem;
  }
}

/* アイスランドラム協会認定店 */
.concept .concept_box .icelandic_lamb_box {
  background-color: #262626;
  padding: 0.50rem 0.90rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 9.00rem;
  box-sizing: border-box;
  margin-top: 0.65rem;
  margin-bottom: 0.20rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .icelandic_lamb_box {
    padding: 0.30rem;
    margin-top: 0.05rem;
  }
}

.concept .concept_box .icelandic_lamb_box .logo {
  width: 2.20rem;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .icelandic_lamb_box .logo {
    width: 1.70rem;
    margin: auto;
  }
}

.concept .concept_box .icelandic_lamb_box .logo img {
  display: block;
}

.concept .concept_box .icelandic_lamb_box .txt_box {
  width: 100%;
  max-width: 4.48rem;
  color: #FFF;
  padding-top: 0;
}
@media screen and (max-width: 640px) {
  .concept .concept_box .icelandic_lamb_box .txt_box {
    padding-top: 0.20rem;
  }
}