/* ===================================================================

scss core settings

=================================================================== */
/* ===================================================================

reset style

=================================================================== */
html{
  /*font-size: 62.5%; /* -> 10px */
  font-size: calc(100vw * 10 / 1200); /* 横幅1200pxの時フォントサイズ10pxが基準値 */
}
@media only screen and (min-width: 1200px) {  /* 横幅1200px以上の場合はフォントサイズを大きくしない */
  html {
    font-size: 10px;
  }
}
@media only screen and (max-width: 849px) {
  html {
    font-size: calc(100vw * 10 / 375);
  }
}

html,
body,
header,
footer,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video{
  border: 0;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section{
  display: block;
}

blockquote,
q{
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after{
  content: none;
}

li{
  list-style-type: none;
}


/* ===================================================================

utility

=================================================================== */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
}

.ofi {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  font-family: "object-fit: cover;";
  width: 100%;
  height: 100%;
}

.pc_only {
  display: block;
}
.sp_only {
  display: none;
}
@media (max-width: 849px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}


/* ===================================================================

init style

=================================================================== */
body{
	box-sizing: border-box;
	background: #4A4A4A;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.1rem;
  text-align: center;
}

main{
	z-index: 555;
	overflow: hidden;
}

a {
  text-decoration: none;
  color: #fff;
}

a:hover {
  text-decoration: none;
  color: #fff;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  width: 100%;
  height: auto;
}

#wrap {
  overflow-x: hidden;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 850px) {
  /* #wrap {
    max-width: 1200px;
  } */
  #wrap img {
    max-width: none;
  }
}

@media (max-width: 849px) {
  #wrap {
    max-width: 850px;
  }
}

video {
  width: 100%;
}


/* ===================================================================

contents style

=================================================================== */
/* top */
.top {
  background-image: url(../images/top_bg_pc.png?20250317);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 40vw;
  position: relative;
}

.top .box {
  position: absolute;
  width: 40%;
  top: 35%;
  right: 10%;
}

.top .copy {
  font-size: 3.5rem;
  letter-spacing: 0.2rem;
  font-weight: 800;
  line-height: 7.0rem;
}

.top .title {
  width: 65%;
  padding-top: 2%;
}

@media (max-width: 849px) {
  .top {
    background-image: url(../images/top_bg_sp.png?20250317);
    height: 170vw;
  }
  .top .box {
    width: 90%;
    top: 12%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .top .title {
    width: 100%;
  }
}

.soon {
  font-size: 3.0rem;
  letter-spacing: 0.5rem;
  font-weight: 600;
  padding: 30px 0;
}

@media (max-width: 849px) {
  .soon {
    font-size: 2.5rem;
  }
}

/* point */
.point {
  position: relative;
  height: 40vw;
}

.point .products {
  position: absolute;
  width: 40%;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.point .title1 {
  position: absolute;
  width: 25%;
  bottom: 65%;
  left: 5%;
}

.point .title2 {
  position: absolute;
  width: 25%;
  top: 70%;
  right: 5%;
}

.point .title {
  font-size: 3.0rem;
  letter-spacing: 0.5rem;
  font-weight: 600;
  background-color: #2f2f2f;
  color: #fff;
  position: relative;
  padding-left: 2%;
  display: block;
}

.point .title1 .title::before {
  content:'';
  position: absolute;
  top: 120%;
  right: -50%;
  background: #fff;
  width: 50%;
  height: 2px;
  transform: rotate(30deg);
  transform-origin: 0 50%;
  display: inline-block;
}

.point .title2 .title::before {
  content:'';
  position: absolute;
  top: 120%;
  left: -90%;
  background: #fff;
  width: 90%;
  height: 2px;
  transform: rotate(60deg);
  transform-origin: 100% 50%;
  display: inline-block;
}

.point .title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 120%;
  background: #fff;
  width: 100%;
  height: 2px;
}

.point .image1 {
  position: absolute;
  width: 25%;
  bottom: 0;
  left: 5%;
}

.point .image2 {
  position: absolute;
  width: 25%;
  top: 0;
  right: 5%;
}

.point .detail {
  font-size: 2.2rem;
  text-align: left;
  padding: 0 1%;
  margin-top: 5%;
  z-index: 100;
  letter-spacing: 0;
}

@media (max-width: 849px) {
  .point {
    height: 270vw;
  }
  .point .products,
  .point .title1 .title::before,
  .point .title2 .title::before,
  .point .title::after {
    display: none;
  }
  .point .image1,
  .point .title1,
  .point .image2,
  .point .title2 {
    position: static;
    width: 90%;
    margin: 0 5%;
  }
  .point .image1,
  .point .image2 {
    margin: 5% 0 10%;
  }
  .point .detail {
    background-color: transparent;
    padding: 0;
    margin-top: 5%;
    font-size: 1.6rem;
    text-align: center;
  }

}

/* image */
.image {
  display: flex;
  gap: 0.5%;
  margin-top: 5%;
}

.image img {
  width: 33%;
  margin-bottom: 0.5%;
}

@media (max-width: 849px) {
  .image {
    display: block;
  }
  .image img {
    width: 100%;
    margin-bottom: 5%;
  }
}

/* coming */
.coming {
  position: relative;
}

.coming .box {
  position: absolute;
  width: 25%;
  top: 40%;
  right: 26%;
}

.coming .copy {
  font-size: 3.5rem;
  font-weight: 600;
  background-color: #fff;
  color: #2f2f2f;
}

.coming .title {
  width: 95%;
  margin-bottom: 2%;
}

.coming .products {
  position: absolute;
  width: 25%;
  top: 15%;
  left: 20%;
}

.coming .flash {
  position: absolute;
  width: 20%;
  top: 0;
  left: 15%;
}

@media (max-width: 849px) {
  .coming .box {
    width: 70%;
    top: 65%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .coming .copy {
    font-size: 2.5rem;
  }
  .coming .products {
    width: 50%;
    top: 10%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .coming .flash {
    left: 25%;
  }
}

/* line */
.flt_btn {
  position: fixed;
  bottom: 2%;
  right: 0;
  width: 100%;
  text-align: right;
}
.flt_btn img {
  width: 35%;
}

@media (max-width: 849px) {
  .flt_btn {
    bottom: 5%;
  }
  .flt_btn img {
    width: 90%;
  }
}


/* ===================================================================

footer style

=================================================================== */
footer {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  padding: 5% 0;
}

@media (max-width: 849px) {
  footer {
    padding: 10% 0 30%;
  }
}