@charset "utf-8";
/* CSS Document */
/* -------------------- header -------------------- */
/* 背景色変更 不要な場合は削除 */
header {
  background-color: #fffcf8;
}
/* -------------------- 共通 -------------------- */
body {
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}
img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
div {
  margin: 0 auto;
}
section {
  margin: 0 auto;
  margin-bottom: 12%;
  max-width: 680px;
  width: 95%;
}
h1 {
  text-align: center;
  font-weight: bold;
  font-size: 1.10em;
  margin-bottom: 3%;
  letter-spacing: 0.08em;
}
h2 {
  font-size: 2.2em;
  text-align: center;
  margin-bottom: 3%;
}
h3 {
  font-size: 1.35em;
  text-align: center;
  margin-bottom: 4%;
}
hr {
  margin-bottom: 8%;
}
ul::after {
  content: " ";
  display: block;
  clear: both;
}
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  h1 {
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 3%;
    letter-spacing: 0.05em;
  }
  section {
    margin-bottom: 20%;
    max-width: 680px;
    width: 95%;
  }
  hr {
    margin-bottom: 12%;
  }
}
/* -------------------- イントロ -------------------- */
.intro {
  margin-top: 3%
}
.main_visual {
  width: 100%;
  margin-bottom: 2%;
}
.intro_title {
  max-width: 580px;
  margin-bottom: 3%;
  margin-top: 8%;
}
.intro_description {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 5%;
  width: 100%
}
@media (max-width: 768px) {
	.intro {
  margin-top: 9%
}
  .intro_title_box {
    width: 82%;
    margin-bottom: 12%;
  }
}
/* -------------------- ルック -------------------- */
.look_box {
  position: relative;
  margin-bottom: 12%;
}
.section_title_box {
  width: 70%;
  padding-bottom: 6%;
}
.batch {
  width: 150px;
  height: 150px;
  border: solid 1px #000;
  border-radius: 50%;
  padding: 7.5% 5% 0%;
  position: absolute;
  top: 2.5%;
  left: 2.5%
}
.batch img {
  width: 100%;
}
.batch .check {
  width: 100%;
  padding-top: 22%;
}
.batch .dot {
  width: 70%;
  padding-top: 12%;
}
.look_box img {
  padding-bottom: 4%
}
.look_box .items_used {
  padding-bottom: 5%
}
.look_box .items_used a {
  font-size: 1.25em;
  padding-bottom: 1%;
  display: block;
}
.font_bold {
  font-weight: bold;
}
p.coordi_link {
  font-size: 0.85em;
  padding-top: 2%;
  padding-bottom: 4%;
}
.coordi_link a {
  padding-right: 2%
}
@media (max-width: 768px) {
  .section_title_box {
    width: 80%;
  }
  .batch {
    width: 110px;
    height: 110px;
    border: solid 1px #000;
    border-radius: 50%;
    padding: 7.5% 5% 0%;
    position: absolute;
    top: 2.5%;
    left: 2.5%
  }
  .batch img {
    width: 100%;
  }
  .batch .check {
    width: 100%;
    padding-top: 27%;
  }
  .batch .dot {
    width: 70%;
    padding-top: 15%;
  }
	.look_box .description,.look_box .coordi_link, .items_used a {
		width: 95%;
		margin: 0 auto;
	}
}
/* -------------------- その他アイテム -------------------- */
.other_item_box ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 2%;
  gap: 6% 2%;
}
.other_item_box li img {
  border-radius: 20px;
  padding-bottom: 3%;
}
.soil_series .brand_name {
  text-align: center;
  font-size: 1.2em;
  text-decoration: underline;
  padding: 3% 0% 2%;
}
.other_item_box .brand_name {
  text-align: center;
  font-size: 0.9em;
  text-decoration: underline;
}
.other_item_box .description {
  font-size: 0.75em;
}
.soil_series ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 2%;
  gap: 6% 2%;
}
.soil_series p.brad_name {
  font-size: 2em;
}
.soil_series ul .position {
  text-align: center;
  font-size: 0.9em;
  text-decoration: none;
}
.soil_series ul .description {
  text-align: center;
}
.all_link {
  text-align: center;
  font-size: 1.25em;
  letter-spacing: 0.1em;
  border: 2px #4D9BC1 solid;
  width: 85%;
  max-width: 680px;
  padding: 1% 0%;
  transition: 0.3s;
}
.all_link:hover {
  text-align: center;
  font-size: 1.25em;
  letter-spacing: 0.1em;
  border: 2px #4D9BC1 solid;
  background-color: #4D9BC1;
}
@media (max-width: 768px) {
  .other_item_box ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2%;
    gap: 8% 2%;
  }
}
/* -------------------- 表示非表示 -------------------- */
@media (min-width: 769px) {
  .sp {
    display: none;
  }
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}