@charset "utf-8";
/* CSS Document */
/* -------------------- header -------------------- */
/* 背景色変更 不要な場合は削除 */
header {
  background-color: hsla(0, 0%, 100%, .50);
}
body {
  background-color: #E5EDEF;
  font-size: 16px;
  line-height: 2.2;
  text-align: center;
  color: #00A345;
}
footer {
  background-color: #E5EDEF;
}
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
/* -------------------- 全体 -------------------- */
img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
ul::after {
  content: " ";
  display: block;
  clear: both;
}
.txt {
  text-align: left;
}
.title_eng {
  font-family: "gill-sans-nova-condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
}
/* -------------------- イントロ -------------------- */
#intro {
  padding-top: 3%;
  padding-bottom: 3%;
}
.main_visual {
  width: 90%;
  max-width: 1920px;
  margin: 0 auto;
}
.main_visual ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  margin: 0 auto;
  padding: 5% 0%;
  gap: 0% 1%;
}
.section_item ul li {
  border: solid rgba(0, 163, 69, 1.00) 8px;
  border-radius: 20px;
}
.title_box {
  width: 80%;
  max-width: 520px;
  margin: 0 auto;
  padding-top: 5%;
}
.sub_title {
  line-height: 1.8;
  letter-spacing: 0.15em;
}
#intro .title_eng {
  font-size: 5em;
  line-height: 1.34;
  padding: 5% 0% 5%;
}
.keyword ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 auto;
  padding: 4% 0% 8%;
  gap: 0% 5px;
  width: 100%;
  font-size: 17px
}
.keyword li {
  font-family: "gill-sans-nova-condensed", sans-serif;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0.03em;
  line-height: 0.8em;
}
.keyword .photo_module {
  padding-bottom: 0px;
}
.keyword a {
  color: #00A345;
}
.keyword i {
  font-size: 1.5em;
  padding: 0 1% 10% 1%;
}
.kokuti {
  width: 80%;
  max-width: 680px;
  margin: 0 auto;
  padding: 3% 6%;
  font-weight: bold;
  border: 1px solid #00A345;
  margin-top: 4%;
}
.kokuti a {
  color: #0200D0;
}
.kokuti img {
  padding: 2% 0% 3%;
  max-width: 560px;
}
.kokuti p.txt {
  font-size: 0.9em;
}
@media (max-width: 768px) {
  #intro {
    padding-top: 12%;
    padding-bottom: 3%;
  }
  .main_visual {
    width: 85%;
  }
  .main_visual ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .sub_title {
    line-height: 1.8;
    letter-spacing: 0.15em;
    font-size: 12px;
  }
  #intro .title_eng {
    font-size: 3.2em;
    line-height: 1.34;
    padding: 5% 0% 5%;
  }
  .keyword ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 auto;
    padding: 4% 0% 8%;
    gap: 0% 5px;
    width: 100%;
    font-size: 14px
  }
  .keyword li {
    font-family: "gill-sans-nova-condensed", sans-serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.03em;
    line-height: 0.8em;
  }
  .kokuti {
    width: 90%;
    padding: 5% 6%;
    font-weight: bold;
    border: 1px solid #00A345;
    margin-top: 5%;
  }
  .kokuti img {
    padding: 2% 0% 3%;
  }
  .kokuti p.txt {
    font-size: 0.8em;
  }
}
/* -------------------- 内容 -------------------- */
section {
  margin: 0 auto;
  width: 90%;
  max-width: 900px;
  padding-top: 3%;
  padding-bottom: 3%;
}
.section_main {
  border: solid rgba(0, 163, 69, 1.00) 8px;
  border-radius: 20px;
  padding: 8% 10% 5%;
}
.photo_module {
  margin: 0 auto;
  padding-bottom: 8%;
}
.photo_box {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.section_main .title_eng {
  font-size: 3.5em;
  padding-top: 5%;
  line-height: normal;
}
.sec_title {
  background-color: #fff;
  display: table;
  padding: 1% 8%;
  margin: 0 auto;
  margin-bottom: 3%;
  font-weight: bold;
  letter-spacing: 0.1em;
  border: 1px solid #00A345;
}
.title_rubi {
  font-size: 0.9em;
  padding-bottom: 8%
}
.txt_box {
  padding-bottom: 8%;
}
p.coodinate_link {
  font-size: 0.8em;
  padding-top: 1%;
}
p.coodinate_link a {
  color: #00A345;
  padding: 0 0.5%
}
@media (max-width: 768px) {
  .photo_box {
    display: block;
    justify-content: space-between;
  }
  .section_main .title_eng {
    font-size: 2.8em;
    padding-top: 5%;
    line-height: normal;
  }
  .title_rubi {
    font-size: 0.7em;
    padding-bottom: 8%
  }
  p.coodinate_link {
    line-height: 1.65em;
    padding-top: 3%;
  font-size: 0.7em;
  }
  .sec_title {
    line-height: normal;
    font-size: 0.8em;
    padding: 2% 4%;
	  margin-bottom: 6%;
  }
}
.wi90 {
  width: 90%;
}
.wi80 {
  width: 80%;
}
.wi70 {
  width: 60%;
}
.wi60 {
  width: 70%;
}
.wi50 {
  width: 50%;
}
.wi40 {
  width: 40%;
}
.pt10 {
  padding-top: 10%;
}
.pt15 {
  padding-top: 15%;
}
.pt20 {
  padding-top: 20%;
}
.pb0 {
  padding-bottom: 0%;
}
@media (max-width: 768px) {
  .wi90, .wi80 {
    width: 100%;
  }
  .wi70, .wi60, .wi50, .wi40 {
    width: 70%;
  }
  .sp_wi100 {
    width: 100%;
  }
  .pt10, .pt15, .pt20 {
    padding: 0;
  }
}
.section_item {
  padding: 5% 0%
}
.section_item ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 0 auto;
  padding: 5% 0%;
  gap: 3% 5%;
  gap: 30px 30px;
}
.section_item ul li {
  border: solid rgba(0, 163, 69, 1.00) 8px;
  border-radius: 20px;
}
.section_item ul li a img {
  width: 100%;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}
.brand_name {
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: rgba(0, 163, 69, 1.00) solid 2px;
}
.data {
  background-color: #00A345;
  color: aliceblue;
  padding: 0.5% 4% 1%;
  margin-right: 1.5%;
  font-size: 0.8em;
  letter-spacing: 0.05em;
  border-radius: 15px;
  font-family: "gill-sans-nova-condensed", sans-serif;
}
.item_name {
  margin: 0 auto;
  padding: 0.5% 0% 2%;
  font-weight: bold;
}
.item_cap {
  margin: 0 auto;
  text-align: left;
  line-height: 1.85;
  padding-bottom: 3%;
}
.item_price {
  font-size: 0.85em;
}
a.buy_button {
  color: #fff;
  border-radius: 100px;
  background-color: #00A345;
  display: block;
  width: 150px;
  font-family: "gill-sans-nova-condensed", sans-serif;
  padding: 0% 0% 1%;
  font-size: 1.2em;
}
a.buy_button:hover {
  color: #C1F1ED;
  opacity: inherit;
}
.caution {
  font-size: 0.8em;
  text-align: left;
  padding-top: 3%;
  text-decoration: underline;
  color: firebrick;
  line-height: 1.65em;
}
.section_item .brand_name {
  padding-top: 2%;
}
.section_item .item_name {
  width: 90%;
  padding: 0.5% 0% 1%;
}
.section_item .item_cap {
  width: 90%;
  line-height: 1.5;
  padding-bottom: 1%;
}
.section_item .item_price {
  font-size: 0.85em;
  text-align: center;
  padding-bottom: 4%;
}
@media (max-width: 768px) {
  .section_item ul {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0 auto;
    padding: 5% 0%;
    gap: 3% 5%;
    gap: 30px 30px;
  }
  a.buy_button {
    margin: 0 auto;
    text-align: center;
    margin-top: 5%;
  }
  .caution {
    text-align: center;
  }
}
a.itiran {
  border: solid rgba(0, 163, 69, 1.00) 8px;
  border-radius: 20px;
  color: #fff;
  background-color: #00A345;
  display: block;
  width: 100%;
  padding: 1% 0%;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.25em;
}
a.itiran:hover {
  color: #C1F1ED;
  opacity: inherit;
}
/* -------------------- 表示非表示 -------------------- */
@media (min-width: 769px) {
  .sp {
    display: none;
  }
}
@media (max-width: 768px) {
  .pc {
    display: none;
  }
}
/* -------------------- アニメーション -------------------- */
/* 下から */
.item_block ul li {
  opacity: 0;
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}