@charset "Shift_JIS";

/*

HP content CSS
create 2023/01/12

*/

/* = import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap');
@font-face{
 font-family:Forma-DJR;
 src:url(FormaDJRMicro-Regular.woff2) format("woff2"),url(FormaDJRMicro-Regular.woff) format("woff");
 font-weight:300;
 font-style:normal;
}

/* = bic common reset
============================================================================== */
div#index {
  max-width: inherit!important;
  width: 100%!important;
  }
#indexheader { max-width: 1200px!important; margin: 0 auto; }



/* = base
============================================================================== */
body {
  margin: 0;
  }


#hp {
  font-family: 'Forma-DJR','Noto Sans JP', sans-serif!important;
  font-size: 16px!important;
  line-height: calc(26/16)!important;
  font-weight: 400!important;
  color: #333;
  text-align: center;
  width: 100%!important;
  margin: 0 auto!important;
  }
#hp h1,#hp h2,#hp h3,#hp h4,#hp h5,#hp p, #hp figure{
  font-family: 'Forma-DJR','Noto Sans JP', sans-serif!important;
  margin: 0 0 1.75vw!important;
  padding: 0!important;
  border: none!important;
}

#hp a { display: inline-block; }
#hp a:hover { color: #fff; text-decoration: none; }

#hp ul, #hp li{
  margin: 0;
  padding: 0;
  list-style: none;
  }
#hp img { max-width: 100%; height: auto; }


#hp section {
  font-family: 'Forma-DJR','Noto Sans JP', sans-serif!important;
  font-weight: 300!important;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: content-box;
}

@media screen and ( max-width:768px) {
  #hp h1,#hp h2,#hp h3,#hp h4,#hp h5,#hp p, #hp figure { margin: 0 0 4vw!important; border: none!important;}
}


/* = bg + wrap
============================================================================== */
.hp-wrap { 
  max-width: 950px;
  margin: auto;
  text-align: left;
  box-sizing: content-box;
}
@media screen and ( max-width:850px) {
	.hp-wrap {
		padding: 0 5vw;
		max-width: 100%;
	}
}

/* = hero
============================================================================== */

#hp-hero {
}

#hp-hero h1 { margin: 0!important; }
#hp-hero picture { margin: 0; padding: 0; line-height: 1; }

/* = title
============================================================================== */

.hp-tac {
  text-align: center!important;
}


/* = intro
============================================================================== */
#hp-intro .hp-wrap {
  margin:5em auto 0;
  max-width:1000px;
}
#hp-intro .hp-wrap p.ld {
  margin:0 25px 3em!important;
  font-size:1.25rem;
  font-weight: 400;
}
@media screen and ( max-width:768px) {
	#hp-intro .hp-wrap {
		max-width: 100%;
	}
}


/* = hp-dialog
============================================================================== */
#hp #hp-cont01 ,#hp-cont02 ,#hp-cont03  {
  background:-webkit-linear-gradient(top, #f3eafb 220px, #f3eafb 100px, #fff 500px );
  position:relative;
}
#hp #hp-cont01 .bg,#hp-cont02 .bg,#hp-cont03 .bg {
  height: 100px!important;
  padding-top: 100px!important;
  background: linear-gradient( 175deg, #fff 52%, #f3eafb 52%);
  border: none;
  position:relative;
}
#hp #hp-cont01 .bg:before,#hp-cont02:before,#hp-cont03:before {
  height: 120px!important;
  padding-top: 100px!important;
  background: linear-gradient( 175deg, #fff 52%, #f3eafb 52%);
  border: none;
  position:relative;
}
#hp .hp-dialog h3 {
  font-size: 1.125em;
  font-weight: 600;
  color: #2d3b92;
  margin: 1em 0 2em!important;
  border: none!important;
  background: none;
}
#hp .hp-dialog p {
  display: inline-block;
  text-indent: -3em;
  padding-left: 3em!important;
  margin-bottom: 3em!important;
}
#hp .hp-dialog p.hp-txtlast {
  margin-bottom: 0!important;
}
#hp .hp-dialog p.no-tidx {
  text-indent: 0em;
}
#hp .hp-dialog p span {
  display: block;
  float:left;
  white-space: nowrap;
  font-weight:600;
  width:3em;
}
#hp .hp-dialog p.cimg {
  text-align:center;
  width: 100%;
  text-indent:0;
  padding:0!important;
}
#hp p.hp-info {
  font-size:1.2rem;
  text-align: center;
  margin: 3em 1rem 7rem!important;
}
#hp p.hp-info img {
  margin-top:1em!important;
}
#hp p.cimg img {
  margin: 0 auto;
  max-width:100%;
}
#hp .hp-flex-row {
  max-width: 100%;
  margin: 0 auto 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#hp .hp-flex-col2 { width: calc( 100% / 2 - 0.5em ); }
#hp p.hp-flex-col2 { width: calc( 100% / 2 - 4em ); }
#hp div.hp-flex-col2 img {width:100%;}

@media screen and ( max-width:768px) {
  #hp-cont01 h2,#hp-cont02 h2,#hp-cont03 h2 {
		font-size: 2.0rem;
		line-height:1.2em;
		padding-top:80px!important;
		padding-bottom:20px!important;
	}
	#hp #hp-cont01 .bg, #hp-cont02 .bg, #hp-cont03 .bg {
    height: 50px!important;
    padding-top: 50px!important;
	}
  #hp-cont01 h2:before, #hp-cont02 h2:before, #hp-cont03 h2:before {  }
  #hp .hp-flex-row {max-width: 100%; margin: 0 auto;}
  #hp .hp-flex-col2, #hp p.hp-flex-col2 { width: 100%; }
  #hp .hp-flex-col2 img {margin-bottom: 2em;}
}

/* = hp spectre camera
============================================================================== */
#hp .hp-spectre__camera {
  background-color: #e5cdfa;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin:4vw auto;
}
#hp .hp-spectre__camera .hp-wrap {
  max-width:100%;
	margin:4em 0;
}
#hp .hp-spectre__camera-main {
  background:#fff url("../images/camera-s02.jpg") no-repeat 50% 0;
  color: #000;
  height: 530px;
  position: relative;
}
#hp .hp-spectre__camera-main h3 {
  position: absolute;
  right: 0;
  top: 15%;
  margin: 0!important;
  padding: 0!important;
  text-align: right!important;
  background:none;
}
#hp .hp-spectre__camera-main p {
  font-size: calc( 30/16 * 1rem );
  position: absolute;
  /*left: 52%;*/
  right: 10%;
  padding-right: 20%;
  top: 55%;
  transform: translateY(-45%);
}
#hp .hp-spectre__camera .hp-flex__row p.hp-txt {
  padding-left: 10%!important;
}
#hp .hp-spectre__camera .hp-flex__row p img {
  margin-bottom: 10%!important;
}
@media screen and ( max-width:1199px) {
  #hp .hp-spectre__camera-main {
    background-position: 45% bottom;
    background-size: auto 90%;
  }
  #hp .hp-spectre__camera-main img {
    width: 75%;
  }
  #hp .hp-spectre__camera-main p {
    font-size: calc( 30/16 * 0.75rem );
    padding-right: 12%;
    top: 40%;
    transform: translateY(-40%);
  }
}
@media screen and ( max-width:768px) {
  #hp .hp-spectre__camera-main {
    background-size: contain!important;
    height: auto;
    padding-top: calc( 720/768 * 100% );
    padding-bottom: calc( 20/768 * 100% );
  }
  #hp .hp-spectre__camera-main h3 {
		position:static;
    text-align: center!important;
		margin-bottom:2em!important;
  }
  #hp .hp-spectre__camera-main p {
    font-size: calc( 30/16 * 0.6rem );
    text-align: center;
    position: static;
    padding:1vw!important;
  }
  #hp .hp-spectre__camera-main {
    background:#fff url("../images/camera-s02-sp.jpg") no-repeat 0 0;
  }
  #hp .hp-spectre__camera .hp-flex__row p.hp-txt {
    padding-left: 1%!important;
  }

}
#hp .hp-flex__row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  /*align-items: center;*/
  align-content: center;
  text-align: left;
	gap: 30px;
}
#hp .hp-flex__col2{
  width: 50%;
}
#hp .hp-flex__row-start{
  align-items:flex-start;
}
@media screen and ( max-width:768px) {
  /*#hp { font-size: calc( 100 / 375 * 17 * 1vw )!important;  }
  #hp h1,#hp h2,#hp h3,#hp h4,#hp h5,#hp p, #hp figure { margin: 0 0 4vw; }*/
  #hp {
    font-size: calc( 24/16 * 0.675rem )!important;
  }
  #hp .hp-flex__row {
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem;
		padding-bottom: 2rem;
  }
}

/* = hp spectre main
============================================================================== */
.hp-spectre__main {
  background:linear-gradient(115deg,#aa5bed 15%, rgba(255,215,127,0.5) );
  position: relative;
  padding: 2vw 0 0;
}
.hp-spectre__main:after {
  content: '';
  background: url("../images/deco.png") no-repeat 0 center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.hp-spectre__main h2 {
  position: relative;
  z-index: 2;
  padding: 0 2vw!important;
}
@media screen and ( max-width:768px) {
  .hp-spectre__main, .hp-envy__main {
    padding:4vw 0 0;
  }
  .hp-spectre__main:after {
    background-size: 200%;
  }
  .hp-spectre__main_img {
    width: 100%;
    position: static;
  }
}

/* = products
============================================================================== */
#hp-product {
  letter-spacing: 0.03em;
  padding-bottom: 4vw!important;
}
#hp-product h2 {
  background:#212237 url("../images/deco.png") 0 50%!important;
  font-size: calc( 52/16 * 1rem );
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 4rem 0;
  margin: 0;
}

#hp-product__spectre > .hp-spectre__main {
  padding: 2vw 1vw 1vw!important;
}
#hp-product__spectre > .hp-spectre__main h3 {
  position: relative;
  z-index: 2;
  background:none;
}
#hp-product h4 {
  font-size: calc( 30/16 * 1rem )!important;
  line-height: 1!important;
  font-weight: bold!important;
  text-align: center;
}
#hp-product h4 span {
  font-size: calc( 18/16 * 1rem )!important;
  font-weight: 400!important;
}

#hp-product h4 span.hp-product__ttl {
  font-size: calc( 30/16 * 1rem )!important;
  display: block;
  background: #212237!important;
  color: #fff;
  margin-bottom: 2rem;
  padding: 1vw 0;
}

#hp-product ul {
  display: flex;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 4vw auto 0;
  justify-content: center;
  font-size: 18px!important;
  line-height: calc(30/18)!important;
  }
#hp-product ul li {
  margin: 0 1vw;
  width: 50%;
}
#hp-product ul li strong{
  font-weight: bold;
}

@media screen and ( max-width:1199px) {
  #hp-product h4 span.hp-product__ttl {
    font-size: calc( 20/769 * 100vw )!important;
  }
}
@media screen and ( max-width:768px) {
  #hp-product h2 {
    font-size: calc( 52/16 * 0.6rem );
    padding: 4vw 0;
    background-size: 200%!important;
  }
  #hp-product h4 span.hp-product__ttl {
    font-size: calc( 16/320 * 100vw )!important;
    padding: 3vw 0;
		margin-top: 3vw;
    letter-spacing: -0.025em;
  }
  #hp-product ul {
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }
  #hp-product ul li {
    width: 100%;
    line-height: 1.5;
    margin: 0 0 4vw;
  }
  #hp-product h3 {
    font-size: calc( 30/16 * 0.8rem )!important;
  }
  #hp-product h3 span {
    font-size: calc( 18/16 * 0.75rem )!important;
  }
  #hp-product h4 {
    margin-left: 0;
    padding-left: 0;
  }
}


/* = button
============================================================================== */
.hp-btn, .hp-btn-btm {
  display: inline-block;
  background: #885ff1;
  color: #fff!important;
  font-size: 20px;
  line-height: calc(26/20);
  font-weight: 400;
  padding: 1rem 1.5vw;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.6);
  position: relative;
  z-index: 3;
  }
.hp-btn:hover, .hp-btn-btm:hover {
  color: #fff!important;
  background-color: #412098;
  box-shadow:none;
  border:none;
  text-decoration:none;
  -webkit-transition: all .3s;
  transition: all .3s;
}

@media screen and ( max-width:768px) {
  .hp-btn, .hp-btn-btm { font-size: calc( 100 / 375 * 20 * 1vw ); padding: 1rem 3vw; }
}

/* = navi
============================================================================== */
#hp-nav {
  position: fixed;
  bottom: 15%;
  right: 0;
  z-index: 99;
  line-height: 0;
  width: 120px;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
  }
#hp-nav li a:hover { 
  opacity: 0.8; 
  -webkit-transition: all .3s;
  transition: all .3s;
}

/*このクラスが付与されると表示する*/
.hp-active{
  opacity: 1!important;
  visibility: visible!important;
  animation: fadeIn 0.2s ease 0.3s 1 normal;
}

@media screen and ( max-width:1000px) {
  #hp-nav { width: 100px; }
}
@media screen and ( max-width:768px) {
  #hp-nav {
    top: inherit;
    bottom:0;
    width: calc(100% - 20px);
    margin: 0 10px;
  }
  #hp-nav ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding-top: 1px;
  }
  #hp-nav li:first-of-type a img { border-top-left-radius: 0; }
  #hp-nav li:last-of-type a img { border-bottom-left-radius: 0; }
}

/* = other
============================================================================== */
#hp sup { font-size: 13px; margin-right: 0.5rem; vertical-align:text-top; }
#hp #hp-intro p.hp-caption { font-size: 13px; margin:10px 0 0!important;}
.mb4w { margin-bottom: 4vw!important; }
.hp-disp-sp { display: none; }
.hp-disp-pc { display: block; }
.smponly {display:none;}
.hp-mb2w {
  margin-bottom: 2vw!important;
}
.hp-mr2w {
  margin-right: 2vw!important;
}
.hp-p2w {
  padding: 2vw!important;
}
.hp-p4w {
  padding: 4vw!important;
}
.hp-pt2w {
  padding-top: 2vw!important;
}
.hp-pt4w {
  padding-top: 4vw!important;
}
.hp-pt6w {
  padding-top: 6vw!important;
}
.hp-pl0 {
  padding-left: 0!important;
}
.hp-mb0 {
  margin-bottom: 0!important;
}
.hp-pb0 {
  padding-bottom: 0!important;
}
.hp-disp__sp { display: none; }

@media screen and ( max-width:768px) {
  .hp-disp-sp,.hp-disp__sp { display: block; }
  .hp-disp-pc { display: none; }
  #hp sup, .hp-caption { font-size: 10px; }
}
@media screen and ( max-width:420px) {
  .smponly {display:block;}
}