@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
:root {
 --crmwhite: #f3ece2;
 --black: #0f0f0f;
 --darkgray: #1e1e1e;
 --orange: #ea523f;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  font-family: "Zen Kaku Gothic New",'Arial', sans-serif, 'メイリオ';
	background-color:var(--black);
  color: var(--crmwhite);
  letter-spacing: 0.175em;
  font-weight: 300;
  transition: all .3s;
}
p, li, dt, dd, th, td, pre {
  -ms-line-break: strict;
  line-break: strict;
  -ms-word-break: break-strict;
  word-break: break-all;
}

p {
  font-size: clamp(11px, calc(10px + 0.625vw), 16px);
  display: block;
  word-wrap: break-word;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-kerning: normal;
  font-kerning: normal;
  line-height: 2;
}

section {
  width: 100%;
}
.small_space{
  width:70%;
  max-width:600px;
  margin:0 auto;
}
.low_space{
  width:70%;
  max-width:1000px;
  margin:0 auto;
}
.space{
  width:70%;
  max-width:1200px;
  margin:0 auto;
}
.space2{
  width:85%;
  max-width:1500px;
  margin:0 auto;
}
.space3{
  width:100%;
  max-width:1500px;
  margin:0 auto;
}
@media screen and (max-width:1149px){
.small_space,.low_space,.space,.space2,.space3{
  width:80%;
}
}
@media screen and (max-width:768px){
.small_space,.low_space,.space,.space2,.space3{
  width:90%;
}
}
@media screen and (max-width:480px){
.small_space,.low_space,.space,.space2,.space3{
  width:95%;
}
}
img {
  height: auto;
  max-width: 100%;
  user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}
a {
  color: inherit;
  text-decoration: none;
}

/* パンくずリスト */
#breadcrumb{
  font-size: 0.8rem;
  margin-top: 30px;
  margin-bottom: 100px;
}
#breadcrumb ul{
  list-style: none;
}
#breadcrumb li{
  display: inline;
}
#breadcrumb li a{
  color: inherit;
  text-decoration: none;
}
#breadcrumb li + li:before{
  content: ">";
  margin:.5em;
}

header{
	width:100%;
}
.pc { display: block !important; }
.sp { display: none !important; }
 
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}
.display_cont{
	display:flex;
	flex-wrap:wrap;
}
.display_cont-reverse{
	display:flex;
	flex-wrap:wrap-reverse;
}
.beside_30p_cont{
	width:30%;
}
.beside_50p_cont{
	width:50%;
}
.beside_50p_cont img{
	width:100%;
}
.beside_70p_cont{
	width:70%;
}
@media screen and (max-width:1149px){
.beside_30p_cont, .beside_50p_cont, .beside_70p_cont{
	width:100%;
	}
}
h2{
	font-weight:900;
	font-size: clamp(20px, calc(20px + 0.625vw), 40px);
	line-height: 1.8;
	margin-bottom:30px;
}
h2 span{
  color:var(--orange);
}

h3 {
	font-weight:900;
	font-size: clamp(14px, calc(14px + 0.625vw), 24px);
	line-height: 1.8;
    margin-bottom: 30px;
}
h3 span{
  color:var(--orange);
}
.title_subtxt{
  font-weight:700;
}
.EN_minititle {
	font-weight:900;
	font-size: clamp(9px, calc(10px + 0.625vw), 14px);
	line-height: 1.8;
  position:relative;
}
.EN_minititle::after {
    content: "";
    position: absolute;
    bottom: 5px;
    right: -70px;
    width: 60px;
    height: 1px;
    background: var(--black);
}


.wm-vr {
    font-feature-settings: normal;
    white-space: nowrap;
    writing-mode: vertical-rl;
}
.txt_size_bigtitle{
  font-size: clamp(30px, calc(30px + 0.625vw), 40px);
	line-height: 1.8;
    font-weight: 500;
}
.txt_size_catchtitle{
  font-size: clamp(18px, calc(18px + 0.625vw), 28px);
	line-height: 1.8;
}
.txt_size_catch{
	font-size: clamp(14px, calc(12px + 0.625vw), 22px);
	line-height: 1.8;
}
.txt_size_L{
  font-size: clamp(13px, calc(10px + 0.625vw), 18px);
	line-height: 1.8;
}
.txt_size_M{
  font-size: clamp(11px, calc(10px + 0.625vw), 16px);
	line-height: 1.8;
}
.txt_size_S{
	font-size: clamp(9px, calc(10px + 0.625vw), 14px);
	line-height: 1.8;
}


.basictitle{
    position: relative;
}
.basic_txtbox{
  text-align: center;
}
.star_connect{
    width: 150px;
    display: block;
    margin: 0 auto 50px auto;
}
.centertitle{
	margin:100px 0 50px 0;
	text-align: center;
}
@media screen and (max-width:768px){
.basictitle{
    margin-bottom: 75px;
}
.basictitle::after{
    bottom: -41px;
}
.centertitle{
	margin:50px 0 25px 0;
}
}


.coming_soon{
  position:relative;
}
.coming_soon:after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
    position: absolute;
    border-radius: 10px;
    background-image: url(../img/comingsoon.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 30% auto;
}
.nami_bg{
  position:relative;
}
.nami_bg:before{
  content:"";
  width:100%;
  height:40%;
  position:absolute;
  z-index:-1;
  top: 50%;
  transform: translateY(-50%);
  background-image:url(image.php?id=029);
  background-size:300px;
  background-repeat:repeat;
}

.centered_box {
  border-left:1px solid var(--crmwhite);
  border-right:1px solid var(--crmwhite);
  padding:30px 50px;
  margin:30px 0;
  position:relative;
  background-color: var(--black);
}
.centered_box::before{
  content: "";
  display:block;
  width:calc(100% - 90px);
  height:30px;
  position:absolute;
  top:-30px;
  border-top:1px solid var(--crmwhite);
  margin: 0 auto 30px auto;
}
.centered_box::after{
  content: "";
  display:block;
  width:calc(100% - 90px);
  height:30px;
  position:absolute;
  bottom:-30px;
  border-bottom:1px solid var(--crmwhite);
  margin: 30px auto 0 auto;
}
.centered_box img{
  width:20px;
  margin:6px 3px 0 0;
}
.sec_bg{
  position:relative;
}

.sec_bg::before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  background-image:url(image.php?id=046);
  background-repeat: no-repeat;
  background-size:100% auto;
  background-position:top center;
}
@media screen and (max-width:1149px){
.sec_bg::before{
  background-image:url(image.php?id=048);
}
}
@media screen and (max-width:480px){
.sec_bg::before{
  background-image:url(image.php?id=047);
  background-size:90% auto;
}
}


#scroll_nav ul{
  display:flex;
  justify-content:center;
  margin:100px 0 50px 0;
}
#scroll_nav li{
  width:calc(25% - 12px);
  min-width:210px;
  background-color:var(--darkgray);
  transition: all .3s;
  border-radius:15px;
  margin:0 5px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
#scroll_nav li:hover{
  background-color:#000;
}
@media screen and (max-width:768px){
#scroll_nav li{
  min-width:auto;
}
}
#scroll_nav li a{
  width:100%;
  height:100%;
  padding:10px 10px 20px 10px;
  text-align: center;
}
#scroll_nav li p{
  font-weight:700;
}
#scroll_nav li span{
  color:var(--orange);
  font-size:10px;
  font-weight:900;
}
.scroll_icon{
  width:100%;
}
#scroll_nav li img{
  width:20px;
  margin:0 auto;
}

@media screen and (max-width:1149px){
#scroll_nav ul{
  flex-wrap:wrap;
}
#scroll_nav li{
  width:calc(50% - 12px);
  margin:5px;
}
}
@media screen and (max-width:768px){
#scroll_nav ul{
  margin:500px 0 50px 0;
}
}