@charset "UTF-8";

:root {
  /* 1.1 COLOR ----------*/
  --ui-color-brand: #353535;
  /* COLOR PALETTE */
  --color-white:#fff;
  --color-black:#000;
  --color-gray:#333;  
  --color-lightgray:#f2f1ec;
  --color-logoback:#071c4d;

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

  /* 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:.3rem;
  --ui-gap-hero    :2rem;
  --ui-gap-customer:2rem;
  --ui-gap-card    :1.25rem;
  --ui-gap-pricing :2rem;
}

@font-face {
  font-family: ‘Noto Serif Japanese’;
  font-style:normal;
  font-weight:400;
  src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-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: ‘Noto Serif Japanese’, 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%;
}
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)}
h2.ttls{font-size:var(--ui-typography-h3);}

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%}

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

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

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

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

.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 16s linear infinite;
}
.slide-image:nth-child(1) {
  background-image:url(./asset/images/main.jpg);
  animation-delay:0s;
}
.slide-image:nth-child(2) {
  background-image: url(./asset/images/main1.jpg);
  animation-delay:4s;
}

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

.slide-image:nth-child(4) {
  background-image: url(./asset/images/main3.jpg);
  animation-delay:12s;
}

@keyframes slider-1 {
  /* 非表示状態からフェードインを開始する */
  0% {
    opacity: 0;
    transform: scale(1); /* ズームのための指定 */
  }
  /* フェードインを完了し完全表示する */
  5%{opacity:1}
  /* ここまで完全表示を維持したらフェードアウトを開始する */
  33.33%{opacity:1}
  /* フェードアウトを完了し非表示にする */
  41.66% {
    opacity: 0;
    transform: scale(1.2); /* ズームのための指定 */
  }  
  100%{opacity:0}
}

/* テキスト */
.title-box{padding-top:10rem;}
.title{
  display:block;
  font-size:0;
  width:300px;height:104px;
  margin:0 auto;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  background-image:url(./asset/images/titlelogo.svg);
}
  .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)}

/* recommended ----------*/
#recommended h2{display:none}

/* brandconcept ----------*/
#brandconcept h2{
  color:transparent;
  background: linear-gradient(0deg, #B67B03 0%, #fae17b 45%, #FEE9A0 70%, #fae17b 85%, #B67B03 90% 100%); 
  -webkit-background-clip:text;  
}
#brandconcept .ui-layout-grid-3{grid-template-columns:repeat(3, 1fr)}
#brandconcept .ui-layout-grid-3 div:nth-of-type(3) {position: static}
.brandconcept_image{overflow:hidden;max-width:90%;margin-bottom:1rem}
  .brandconcept_image.logo{flex-shrink:1}
  .brandconcept_image.pict{flex-shrink:2}  
  
/* 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{
  position:relative;
  display:block;position:relative;cursor:pointer;
  width:2rem;height:1.9rem;
  margin-top:1rem;
  z-index:4;
  background-color:rgb(0, 0, 0,67%);
}
.ui-section-header--menu-icon span{
  position:absolute;
  right:2.9rem;bottom:0;
  transform:translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);  
  display:block;
  text-align:center;
  color:var(--color-white);
  font-size:var(--ui-typography-ss);
}
.ui-section-header--menu-icon::before,
.ui-section-header--menu-icon::after{
  content:"";
  text-align: center;
  height:.1rem;
  position:absolute;right:.4rem;
  transition:all 250ms cubic-bezier(.785, .135, .15, .86);
  background:var(--color-white);
}
.ui-section-header--menu-icon::before{width:1.4rem;top:.7rem}
.ui-section-header--menu-icon::after{width:1rem;top:1.1rem}

#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;color:var(--color-white);font-size: var(--ui-typography-s);}
  .nav_open .ui-section-header--nav {opacity:1;visibility:visible;}
  .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);width:1.3rem;}
  .nav_open #ui-section-header--menu-id ~ .ui-section-header--menu-icon::after {transform: translateY(-3px) rotate(45deg);width:1.3rem;}  

/* 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)}
.list_data p {
  color:var(--color-gray);
  margin:.5rem;
  line-height:var(--ui-typography-p-leading);
  height:calc(1em * 4.5);
  overflow:hidden;
  position:relative;
  word-wrap: break-word;
}
.list_data.ce_data a{display:block;position:relative;width:100%;height:auto}  
.list_data.ce_data img{width:100%;height:auto;}
.list_data.ce_data span{
  display:block;width:100%;height:100%;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding-top:35%;
  text-align:center;
  font-size:var(--ui-typography-s);
  color:var(--color-white);
  background-color: rgba(0,0,0,0.3)}

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)}
  .footer_lnk{
    text-align:center;
    margin-bottom:1rem;
    padding:1rem 0;
    border-bottom: 1px solid var(--color-white);
    font-size: var(--ui-typography-s)
  }
  .footer_lnk a{padding:0 .5rem;color:var(--color-white)} 

  .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-bottom:1px solid var(--color-white);
    }

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

/* #Concept ----------*/
#Concept p{text-align:center;}

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

.slick-slide {transition: all ease-in-out .3s;opacity:1;}
.slick-list{padding-right:10%;}


.slick-track {margin-left:0;}

.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:1;background-color:var(--color-black)}
.slick-dots2 li button{
  background-color:transparent;
  border:none;
  cursor:pointer;
  outline:none;
  padding:0;
  appearance:none;
  text-indent:-9999px}
p.concept_s{font-size: 0.9em;}

/* 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-card  : 1.5rem;
  }
  .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 */
  .tabs_notdisplay{display:block;}
  
  /* TITLE */  
  .title-box{padding-top:18rem}  
  .title{width:400px;height:139px}    
  .sitedescription{font-size:var(--ui-typography-p);line-height:var(--ui-typo-h2)}

  .slick-slide {margin:0 .5rem}  

  /* recommended ----------*/
  #recommended h2{display:inherit}

  /* brandconcept ----------*/
  #brandconcept h2{display:inherit}
  .brandconcept_image{max-width:200px;}
  /* HAMBURGER */
  .ui-section-header {padding-bottom:0;padding-top:0;}
  /* ICON
  .ui-section-header--menu-icon{display:none;}*/
  /* nav
  .ui-section-header--nav {
    background:none;
    background-color: rgba(0,0,0,0.6);
    border-radius:10px;
    flex-direction: row;
    opacity: 1;
    padding: 0;
    margin-top:.5rem;
    position: static;
    visibility: visible;
    -ms-flex-wrap: wrap;flex-wrap: wrap;
    gap:initial;    
  }
  .ui-section-header--nav-link {font-size: var(--ui-typography-s);padding:0;}
  .ui-menu--nav-link{padding:0;padding:.5rem .8rem;}
  .ui-menu--nav-link span{white-space:nowrap!important;}*/

  p.concept_s{font-size:1em}
.ui-section-header--menu-icon{width:48%;border-radius:50px}
.ui-section-header--menu-icon::before{width:1.9rem}
.ui-section-header--menu-icon::after{width:.9rem}
#ui-section-header--menu-id:checked ~
.ui-section-header--menu-icon::before {}
#ui-section-header--menu-id:checked ~
.ui-section-header--menu-icon::after {}
.ui-section-header--menu-icon span{
  right:2.9rem;bottom:-6px;
  font-size:var(--ui-typography-s);
}

.ui-menu--nav-link{font-size:var(--ui-typography-h3)}
}


/* 1024PX ----------*/
@media screen and (min-width:64rem) {
  /* 全画面表示CSS */
  .hero{width:auto;height:70vh}
  /*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}

  /* TITLE */  
  .title-box{padding-top:8rem}

  .brandconcept_image{max-width:300px;}

  /* sliders
  --------------------------------------------------------------*/
  .slick-slide {margin:0 .5rem}  
  p.concept_s{font-size: 1em;}
  .ui-section-header--menu-icon{width:50%;}
}

/* 8.3 1200PX ----------*/
@media screen and (min-width:75rem) {
  :root {
    /* FONT SIZE */
    --typo-h1: 2.75rem;
    --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-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}

  /* TITLE */  
  .title-box{padding-top:10rem}     
  p.concept_s{font-size:1em}
  .ui-section-header--menu-icon{width:27.5%}

}