@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');
html{font-size: 62.5%;}
#logo {width: 12%;height: auto;}
#pkm_head {margin-bottom: 0;}


.outer {
  background-image: linear-gradient(90deg, #fff100, #ffd769);
  line-height: 1.6;
  background-size: contain;
  background-position: top;
  background-repeat: repeat;
  font-family: 'M PLUS 1p', sans-serif;
  color: #000;
}
.inner {width: 980px;margin: 0 auto;}

.release {padding:3em 0 1em;}
.release img{margin:0 auto;width:100%;}

.headtext {background-color: #000;padding:1em 0;width:100%;border-radius: 50px;margin-bottom: 3em;}
.headtext p{font-size: 1.3em;color: white;text-align: center;font-weight: bold;}

.information_area{
  background-image:url(../img/bg.webp);
  background-size: cover;
  background-repeat:repeat;
  border:#FFF100 solid 20px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  padding:40em 3em 2em;
  position: relative;
}
.top{
  position: absolute;
  top: 0%;
  width: 108.5%;
  left: -4.3%;
}
.product-container {
  display: flex;
  gap: 2em;
  align-items: flex-start;
  margin-top:1em;
}
.product-container img{width:20%;}
.info-lists {
  display: flex;
  gap: 2em;
}
.product-details h3{font-size: 1.6em;font-family: "Noto Sans JP";}
dl {
 display: grid;
  grid-template-columns: max-content max-content; 
  margin: 0;
  width: fit-content;
}
dt, dd {
  display: inline-block;
  margin: 0;
  padding:0.3em 0;
  background-image: radial-gradient(#F9B600 20%, rgba(255, 255, 255, 0) 25%);
  background-position: bottom;
  background-size: 6px 6px; 
  background-repeat: repeat-x;
  font-family: "Noto Sans JP";
}
dt::after {
  content: "：";
}
dd {
  width:15em; 
}

.note {
  margin-top:1em;}

.button_list {display: flex;gap:1em;margin-top: 1.5em;pointer-events: none;}
.button_list li{width: calc(100% - 2em);border-radius: 50px;text-align: center;cursor: not-allowed;background-color: #ccc !important;}
.button_list li a{color: white;font-weight: bold;font-family: "Noto Sans JP";display: block;width: 100%;text-decoration: none;padding: 0.8em 0;}
.button_list li:hover{opacity: 0.7;text-decoration: none;}
.amazon{background-color:#F9B600;}
.seven{background-color:#009936;}
.rakuten{background-color:#CD1C19;}
.yodobashi{background-color:#253AB1;}

.sample{display: flex;gap:1em;margin-top:2em;padding:2.5em 2em 2em;border: 10px solid #FFF100;border-radius:20px;background-color: white;}
.sample figure{width:88%;}
.sample figure img{width:100%;}
.sample ul li h3{font-size: 0.87em;font-family: "Noto Sans JP";color: #F9B600;}
.sample ul li p{font-size: 0.7em;font-family: "Noto Sans JP";margin-bottom: 0.5em;}

.footer{padding: 2em;}
.footer div.inner p{font-size: 0.8em;text-align: center;line-height: 1.8;}

.pc {display: block;}
.sp {display: none;}


/*smartphone*****************************************************************************************************************************************************************************************/
@media screen and (max-width: 768px) {

.pc {display: none;}
.sp {display: block;}

.sp_head #pkm_head >div ul li a {font-size: 1.2rem;}
.sp_head #pkm_head >div ul li::before {font-size: 1.2rem;}
#pkm_head >div h2 {font-family: 'M PLUS 1p', sans-serif;}

.outer{font-size: 1.55vw;overflow: hidden;}
.inner {width: 94%;}

.headtext p{font-size: 2em;}

.information_area{
  background-image:url(../img/bg.webp);
  background-size: cover;
  background-repeat:repeat;
  border:#FFF100 solid 10px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  padding:40em 3em 3em;
  position: relative;
}

.top{
  position: absolute;
  top: 0%;
  width: 108.5%;
  left: -4.3%;
}
.product-container {
  display: flex;
  flex-direction: column;
  gap: 2em;
  margin-top:1em;
  align-items: center;
}
.product-container img{display:none;}
.info-lists {
  display: flex;
  gap: 1em;
}
.product-details h3{font-size:2.6em;font-family: "Noto Sans JP";}
dl {
 display: grid;
  grid-template-columns: max-content max-content; 
  margin: 0;
  width:100%;
}
dt, dd {
  display: inline-block;
  margin: 0;
  padding:0.6em 0;
  background-image: radial-gradient(#F9B600 20%, rgba(255, 255, 255, 0) 25%);
  background-position: bottom;
  background-size: 6px 6px; 
  background-repeat: repeat-x;
  font-family: "Noto Sans JP";
  font-size: 1.3em;
  font-weight:bold;
}
dt::after {
  content: "：";
}
dd {
  width:15em; 
}

.note {
  margin-top:1em;
text-align: center;
font-size: 1.2em;}

.button_list {display: flex;flex-wrap:wrap;gap:1em;margin-top: 3em;}
.button_list li{width:49%;border-radius: 50px;text-align: center;}
.button_list li a{color: white;font-weight: bold;font-family: "Noto Sans JP";display: block;width: 100%;text-decoration: none;padding: 0.8em 0;font-size: 1.5em;}
.button_list li:hover{opacity: 0.7;text-decoration: none;}
.amazon{background-color:#F9B600;}
.seven{background-color:#009936;}
.rakuten{background-color:#CD1C19;}
.yodobashi{background-color:#253AB1;}

.sample{display: flex;flex-direction:column;gap:1em;margin-top:4em;padding:2em;border: 5px solid #FFF100;border-radius:10px;background-color: white;}
.sample figure{width:100%;}
.sample figure img{width:100%;}
.sample ul li h3{font-size: 2em;font-family: "Noto Sans JP";color: #F9B600;margin-top: 1em;}
.sample ul li p{font-size: 1.5em;font-family: "Noto Sans JP";font-weight: bold;}

footer ul#footer_menu1 li{margin-bottom: 0.5em;}
#footer_copy{line-height: 1.3;}
}