@charset "UTF-8";

:root {
  /* 1.1 COLOR ----------*/
  --ui-color-brand:#0E2431;
  /* COLOR PALETTE */
  --color-white:#fff;
  --color-black:#000;
  --color-gray:#BDBDBD;
  --color-lightgray:#f2f1ec;
  --color-brand:#0E2431;

  /* FONT SIZE */
  --typo-h1:1.1rem;
  --typo-h2:1.5625rem;
  --ui-typography-h3:1.25rem;
  --ui-typography-h4:1rem;
  --ui-typography-p:1rem;
  --ui-typography-s:.8125rem;

  /* LEADING */
  --typo-h1-leading:1.2;
  --typo-h2-leading:1.2;
  --ui-typography-h4-leading:1.25;
  --ui-typography-p-leading:1.5;

  /* MARGIN */
  --ui-typography-margin-heading:.75rem;
  --ui-typography-margin-body:1.125rem;

  /* 1.3 LAYOUT ----------*/
  --ui-layout-container: 1.25rem;
  --ui-layout-grid     : 3.625rem;
  --ui-layout-gutter   : 1rem;

  /* GAP */
  --ui-gap-header  : 1rem;
  --ui-gap-hero    : 2rem;
  --ui-gap-customer: 2rem;
  --ui-gap-card    : 1.25rem;
  --ui-gap-pricing : 2rem;
  --ui-gap-faq     : 1.5rem;
}

@font-face {
  font-family:'Hina Mincho',serif;
  font-style: normal;
  font-weight: 400;
  src: url(fonts/NotoSerifCJKjp/HinaMincho-Regular.ttf) format(‘truetype’);
  }

  @font-face {
    font-family:‘Noto Serif Japanese’;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/NotoSerifCJKjp/NotoSerifJP-Regular.otf) format(‘opentype’);
    }


/* FOUNDATION --------------------------------------------------------------*/
html{box-sizing:border-box;scroll-behavior:smooth;overflow-x:hidden;}
*,*:before,*:after{box-sizing:inherit}

body {
  background-color:var(--color-white);
  color:var(--ui-color-typography-body);
  font-family:'Hina Mincho', serif; 
  font-size:var(--ui-typography-p);
  line-height:var(--ui-typography-p-leading);
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
  word-wrap : break-word;
  overflow-wrap : break-word;
  width:100%;
  min-height: 100vh;
}
a{color:var(--ui-color-brand);text-decoration-color:var(--ui-color-typography-note)}

h1,h2,h4,p,ul{margin-top:0}
h1,h2,h4{color:var(--color-black)}
h1,h2{margin-bottom: var(--ui-typography-margin-heading)}
h1{font-size:var(--typo-h1);line-height:var(--typo-h1-leading)}
h2{font-size:var(--typo-h2);line-height:var(--typo-h2-leading);letter-spacing:.2rem}
h2 small{display:block}
h4{font-size:var(--ui-typography-h4);line-height:var(--ui-typography-h4-leading)}

p,ul{margin-bottom:var(--ui-typography-margin-body)}
p:last-child,ul:last-child{margin-bottom:0}
ul{padding-left:0}
strong{font-weight:700}
small{font-size:var(--ui-typography-s)}
img,svg{display:block;height:auto;margin:0 auto;max-width:100%}
p.concept{line-height: 2.5; text-align: center;}

.backcolor-black{background-color:var(--color-black);color:var(--color-white);}
  .backcolor-black h2{color:var(--color-white)}

.backcolor-lightgray{background-color:var(--color-lightgray);}
  .backcolor-black h2{color:var(--color-white)}

 .backcolor-brand{background-color:var(--color-brand);}
  .backcolor-brand h2{color:var(--color-white)}


/* sliders
--------------------------------------------------------------*/
.slick-slider{margin-bottom:2rem;overflow:visible;padding-right:6px;}
.slick-slide {margin:0 .2rem}
.slick-slide a{text-decoration:none}
.slick-slide a{height:400px;}

.slick-slide img {
  margin:auto;
  max-width:100%;max-height:100%;  
  object-fit:contain;
  height:100%;
}

.slick-slide {transition: all ease-in-out .3s;opacity:1;position: relative;height:100vh;max-height:300px;}
  .slick-slide img{height:100%;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%)}

.slick-next{right:-19px!important;}
.slick-prev{left:-19px!important;}
.slick-arrow{z-index:2!important;}
.slick-prev:before,.slick-next:before{
display:block;font-size:12px; width:18px;height:18px;padding:3px;
background-color:var(--color-black);border-radius:50px;}
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus {color:initial!important;opacity:1;outline:none!important}
.slick-prev:before{content:'<'!important}
.slick-next:before{content:'>'!important}

.slick-dots2 li{
  cursor: pointer;
  float:left;list-style:none;
  background-color:var(--color-lightgray);
  margin:0 .2rem;
  border-radius: 50px;width:10px;height:10px;
}
.slick-dots2 .slick-active{opacity:1background-color:var(--color-black)}
.slick-dots2 li button{
  background-color:transparent;
  border:none;
  cursor:pointer;
  outline:none;
  padding:0;
  appearance:none;
  text-indent:-9999px}  

/* 全画面表示CSS */
.hero{
  position: relative;
  overflow: hidden;
  width:100%;height:87vh;}
.helo_black{
  z-index:2;
  position:absolute;
  width:100%;height:100%;background-color:rgba(0,0,0,0.3)}

.slide-image:nth-child(1) {
  background-image:url(./asset/images/main01.jpg);
  animation-delay:0s;
}
.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 24s linear infinite;
}

.slide-image:nth-child(1) {
  background-image: url(./asset/images/main01.jpg);
  animation-delay: -2s;
}

.slide-image:nth-child(2) {
  background-image: url(./asset/images/main02.jpg);
  animation-delay: 6s;
}

.slide-image:nth-child(3) {
  background-image: url(./asset/images/main01.jpg);
  animation-delay: 14s;
}

@keyframes slider-1 {
  0% {
    opacity: 0;
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
  }
    100% {
  opacity: 0;
  }
}


/*.Story*/
.Story h3{padding-bottom:.2rem;border-bottom:1px solid var(--color-black);}
.Story h3 small{padding-left:.5rem}
.Story.backcolor-brand h3{border-bottom-color:var(--color-white);}
.Story.backcolor-brand h3,.Story.backcolor-brand p{color:var(--color-white)}

.Story .databox{width:100%}
.Story .databox .n2{padding:.5rem 1.5rem;}
.Story .slick-next{right:-10px!important;}
.Story .slick-prev{left:-10px!important;}

/* テキスト */
.title-box{
  width:100%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  -webkit-transform: translate(-50%, -40%);
  -ms-transform: translate(-50%, -40%);  
}
.title{
  text-align: center;
  color:var(--color-white);
  font-family:'Hina Mincho', serif ;
  letter-spacing:.06em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,50%);
  width: 100%;
}
  .sitedescription{
    margin-top:1rem;text-align:center;color:var(--color-white);
    font-size: var(--ui-typography-s);
    line-height:var(--ui-typography-h3)}

.ui-layout-container {padding-left:var(--ui-layout-container);padding-right:var(--ui-layout-container)}
.ui-layout-flex,.ui-layout-grid{align-items:center;justify-content:center}
.ui-layout-flex{display:flex}
.ui-layout-grid{display:grid}

/* BUTTON ----------*/
.buttonset {
  display:block;
  width:fit-content;
  line-height:1;
  padding:.5rem 1rem;
  text-align:center;
  text-decoration:none;
  margin:0 auto;
}
.buttonset.black{
  background-color:var(--color-black);color:var(--color-white)}
.buttonset.white{
  background-color:var(--color-white);color:var(--color-black);
  border:1px solid var(--color-black)}
  
/* Aria ----------*/
.ariakink .ui-layout-grid-4{justify-items:flex-start}
.ariakink a{text-decoration:none;padding-top:.1rem;}
.ariakink a::before{content:"・";}

/* banner ----------*/
#banner a{display:block;margin-top:1rem;}

/* SECTION
--------------------------------------------------------------*/
.ui-section-header{height:0}
.ui-section-header__layout{justify-content:space-between}

/* HAMBURGER */
#ui-section-header--menu-id{display:none}
.ui-section-header--menu-icon{
  z-index:6;
  display:block;position:relative;cursor:pointer;
  width:2rem;height:2rem;
  margin-top:1rem;
  background-color:rgb(0, 0, 0,80%);
}
.ui-section-header--menu-icon::before,
.ui-section-header--menu-icon::after{
  content:"";
  height:.1rem;
  position:absolute;left:.4rem;
  transition:all 250ms cubic-bezier(.785, .135, .15, .86);
  background:var(--color-white);
  width:1.125rem;
}
.ui-section-header--menu-icon::before{top:.8rem}
.ui-section-header--menu-icon::after{top:1.2rem}
#ui-section-header--menu-id ~ .ui-section-header--menu-icon::before {transform: translateY(0) rotate(deg)}
#ui-section-header--menu-id ~ .ui-section-header--menu-icon::after {transform: translateY(0) rotate(0deg);}  

/* MENU */
.ui-section-header--nav {
  background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,.9));
  box-shadow:0 .5rem 1rem rgba(0,0,0,.05);
  flex-direction:column;
  gap:var(--ui-gap-header);
  opacity:0;
  padding:5rem var(--ui-layout-container) 5rem;
  position:absolute;top:0;left:0;right:0;
  transition:all 250ms cubic-bezier(.785, .135, .15, .86);
  visibility:hidden;
  z-index:3;
  height:100%;
}
  .ui-menu--nav-link{
    padding:.5rem;
    text-decoration:none;
    font-size:var(--ui-typography-p);
    color:var(--color-white)
  }
  .nav_open .ui-section-header--nav {opacity:1;visibility:visible;height:100vh;}
  .nav_open #ui-section-header--menu-id ~ .ui-section-header--menu-icon::before {transform: translateY(0) rotate(deg)}
  .nav_open #ui-section-header--menu-id ~ .ui-section-header--menu-icon::after {transform: translateY(0) rotate(0deg);}

  .nav_open #ui-section-header--menu-id ~ .ui-section-header--menu-icon::before {transform: translateY(3px) rotate(135deg)}
  .nav_open #ui-section-header--menu-id ~ .ui-section-header--menu-icon::after {transform: translateY(-3px) rotate(45deg);width:1.125rem;}  


/* HERO ----------*/
.ui-section-hero{
  padding-bottom:5rem;padding-top:5rem;text-align:center;}
.ui-section-hero__layout{row-gap: var(--ui-gap-hero)}

.sec-set{padding-bottom:2.5rem;padding-top:2.5rem}
.sec-set h2{text-align:center}

.list_dataview.border .ui-layout-container{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--color-black)}
.list_dataview .slider .list_data{background-color:var(--color-white)}

section.sec-set__layout {row-gap:var(--ui-gap-card)}
.ui-section-footer{
  padding-bottom:1.25rem;padding-top:1.25rem;
  background-color:var(--color-black);
  color:var(--color-white);
  margin-top: auto;
}
  

  .pagetop{width:100%;position:relative;margin-top:1rem;margin-bottom:1rem;text-align:center;}
  .pagetop a{
    display: inline-block;
    width: fit-content;
    height: fit-content;
    padding: .2rem;
    font-size:var(--ui-typography-h3);
    color:var(--color-white);
    text-decoration:none;
    border:1px solid var(--color-white);
    border-radius:50px;
    }

.copyright{margin-bottom:0;margin-right:auto;text-align:center}


#langChenge{position:relative;}
 #langChenge input[type="radio"]{display:none}
 /* label→button */
 #langChenge .langlabel{
  position:absolute;
  z-index:4;
  top:1.2rem;padding:.2rem .5rem;border-radius:50px;
  font-size:var(--ui-typography-s);color:var(--color-white)
}
 #langChenge .langlabel.ja1{left:.5rem;}
 #langChenge .langlabel.zh2{left:5rem;} 
 
 /* === 選択されていない言語は非表示にする ==== */
 #langJa:not(:checked) ~ * *:lang(ja) {display:none;}
 #langZh:not(:checked) ~ * *:lang(zh) {display:none;}
 
 /* 言語ラベルon*/
#langJa:checked ~ label[for="langJa"]{background:var(--color-brand);color:var(--color-white);}
#langZh:checked ~ label[for="langZh"]{background:var(--color-brand);color:var(--color-white)}


/* MEDIA
--------------------------------------------------------------*/
/* 768PX */
@media screen and (min-width:48rem) {
  :root {
    /* FONT SIZE */
    --typo-h1: 2.1875rem;
    --typo-h2: 1.75rem;
    --ui-typography-h4:1.125rem;
    --ui-typography-p:1rem;
    --ui-typography-s:.875rem;

    /* MARGIN */
    --ui-typography-margin-body: 1.25rem;

    /* LAYOUT */
    --ui-layout-container: 4.25rem;
    --ui-layout-gutter   : 1.5rem;

    /* GAP */
    --ui-gap-header: 1.5rem;
    --ui-gap-card  : 1.5rem;
    --ui-gap-faq   : 2rem;
  }
  .ui-image-half-right{padding-left: var(--ui-layout-gutter)}
  .ui-layout-container,
  .ui-layout-column-center{margin-left:auto;margin-right:auto;}

  .ui-layout-grid-2,
  .ui-layout-grid-3,
  .ui-layout-grid-4{column-gap:var(--ui-layout-gutter);justify-items:center;}
  .ui-layout-grid-2,
  .ui-layout-grid-3{grid-template-columns: repeat(2, 1fr)}
  .ui-layout-grid-4{grid-template-columns: repeat(4, 1fr)} 

  .ui-layout-grid-3{grid-template-columns:repeat(3, 1fr)}
  .ui-layout-grid-3 div:nth-of-type(3) {position: static}

  .ui-layout-grid-4{grid-template-columns:4}
  .ui-layout-column-4 {
    width:calc((var(--ui-layout-grid) * 4) +
           (var(--ui-layout-gutter) * 3));
  }
  .ui-component-list--item{background-size:1.25rem;padding-left:2rem}

  /* HEADER */
  .ui-menu--nav-link{font-size:var(--ui-typography-p);padding:0}
  .tabs_notdisplay{display:block}
  .ui-menu--nav-link{font-size:var(--ui-typography-h3)}

  /* TITLE */  
  .title{/*width:400px;height:139px*/}
  .sitedescription{font-size:var(--ui-typography-p);line-height:var(--ui-typo-h2)}
  .slick-slide {margin:0 .5rem}  

/*.Story
.Story .databox{display:flex;align-items:center;justify-content:space-around}
.Story .databox .n1,.Story .databox .n2{width:50%;height:100%;}
.Story2 .n1{order:1;}
.Story2 .n2{order:0;}
*/
.Story .slick-slide {max-height:450px;}

/* HAMBURGER */
.ui-section-header--menu-icon{width:3rem;height:3rem}
.ui-section-header--menu-icon::before,
.ui-section-header--menu-icon::after{width:2rem;}
.ui-section-header--menu-icon::before{top:1.2rem}
.ui-section-header--menu-icon::after{top:1.8rem}
#ui-section-header--menu-id:checked ~.ui-section-header--menu-icon::before {width:2rem;}
#ui-section-header--menu-id:checked ~.ui-section-header--menu-icon::after {width:2rem;}
}


/* 1024PX ----------*/
@media screen and (min-width:64rem) {
  /* 全画面表示CSS */
  .hero{width:auto}
  /*VARIABLE*/
  :root{--ui-layout-container:0}
  .ui-layout-container{width:60rem}
  .ui-layout-grid-3{grid-template-columns:repeat(3, 1fr)}
  .ui-layout-grid-3 div:nth-of-type(3) {position: static}

  /* sliders
  --------------------------------------------------------------*/
  .slick-slide {margin:0 .5rem}  
}

/* 8.3 1200PX ----------*/
@media screen and (min-width:75rem) {
  :root {
    /* FONT SIZE */
    --typo-h1: 2.25rem;
    --typo-h2: 2.1875rem;
    --ui-typography-h4: 1.4375rem;

    /* MARGIN */
    --ui-typography-margin-heading: 1rem;
    --ui-typography-margin-body   : 1.75rem;

    --ui-layout-grid  : 4rem;
    --ui-layout-gutter: 2rem;
    /* GAP */
    --ui-gap-header  : 2rem;
    --ui-gap-customer: 4rem;
    --ui-gap-card    : 2rem;
    --ui-gap-pricing : 3rem;    
  }

  /* TYPOGRAPHY */
  .ui-text-intro {font-size:var(--ui-typography-h4)}

  /* LAYOUT */  
  .ui-layout-container{width:70rem}    

}