@charset "utf-8";


/*---------------------------
共通パーツ
---------------------------*/
html {
  scroll-behavior: smooth;
}

:root{
  --gap-ss: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-s: clamp(20px, 1.023rem + 1.14vw, 30px);
  --gap-m: clamp(30px, 1.534rem + 1.7vw, 45px);
  --gap-l: clamp(40px, 1.818rem + 3.41vw, 70px);
  --gap-ll: clamp(50px, 1.989rem + 5.68vw, 100px);
  --gap-lll: clamp(100px, 5.114rem + 5.68vw, 150px);
  --nav-wrap: 140px;
  --radius: 20px;
  
  --color-blue: #001e60;
  --color-white: #fff;
  
  --filter-blue: brightness(0) saturate(100%) invert(9%) sepia(50%) saturate(5658%) hue-rotate(221deg) brightness(85%) contrast(103%);
  --filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7441%) hue-rotate(108deg) brightness(97%) contrast(97%);
  --filter-black: brightness(0) saturate(100%) invert(0%) sepia(6%) saturate(7500%) hue-rotate(285deg) brightness(103%) contrast(106%);
  
  --font-s:clamp(14px, 0.83rem + 0.23vw, 16px);
  --font-m:clamp(14px, 0.693rem + 0.91vw, 22px);
  --font-ml:clamp(18px, 0.716rem + 2.05vw, 36px);
  --font-l:clamp(24px, 1.227rem + 1.36vw, 36px);
  --font-ll:clamp(50px, 1.989rem + 5.68vw, 100px);
} 

.l-header,
.p-header,
.l-footer,
.p-footer{
  background:#fff;
}

/* SPサイズ調整 */
.u-pcs-hide{
  display:block;
}
.u-sps-hide{
  display:none;
}
@media screen and (max-width: 428px) {
  .u-pcs-hide{
    display:none;
  }
  .u-sps-hide{
    display:block;
  }
}

@media screen and (max-width: 767px) {
  .bnr_link_win11_wrap {
    width: 100%;
    padding: 10px 0 !important;
    margin:auto !important;
}
}
/*---------------------------
LP共通レイアウト
---------------------------*/
#about-galleria{
  position:relative;
  width:100%;
  text-align:center;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight:700;
  font-size: var(--font-m);
  letter-spacing: 0.06em;
} 
#about-galleria img{
  width:100%;
  margin:auto;
  object-fit: contain;
} 


/*------------
コンテンツブロック
--------------*/
#about-galleria .contents-block{
  position:relative;
  width:100%;
  padding:var(--gap-lll) 0;
}
#about-galleria .contents-block .contents-inner{
  position:relative;
  width:calc(100% - 40px);
  max-width:1380px;
  margin:auto;
}
#about-galleria .contents-block .contents-inner.--left{
  width:100%;
  max-width:100%;
}
@media screen and (max-width: 767px) {
  #about-galleria .contents-block .contents-inner.--left{
    width:calc(100% - 40px);
  }
}

/*small*/
#about-galleria .contents-sub-block{
  position:relative;
  width:100%;
  padding-bottom:var(--gap-lll) ;
}
#about-galleria .contents-sub-block .contents-inner{
  position:relative;
  width:calc(100% - 40px);
  max-width:1180px;
  margin:auto;
}

/*---------------------------
H2・H3・テキスト
---------------------------*/

#about-galleria .contents-txt{
  margin-top:var(--gap-m);
}
#about-galleria .contents-txt p{
  line-height:2;
  text-align: left;
}
#about-galleria .contents-txt p + p{
  margin-top:var(--gap-l);
}

#about-galleria h2{
  font-size:var(--font-ml);
  color:var(--color-blue);
  text-align: left;
  letter-spacing:0.05em;
  line-height: 1.4;
}
#about-galleria .hd-caption{
  font-size:var(--font-ml);
  color:var(--color-blue);
}
#about-galleria .h2-en{
  font-family: "Inter", sans-serif;
  font-size:var(--font-ll);
  font-weight: 700;
  letter-spacing: 0.03em;
  color:var(--color-blue);
  text-align:left;
  margin-bottom:var(--gap-s);
}

#about-galleria .h2-en.fade-shine {
    background-image: linear-gradient(
      50deg,
      #001e60 30%,
      #6ea200 45%,
      #dade1a 50%,
      #6ea200 55%,
      #001e60 70%
    );
    background-size: 300% 300%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: none;
  }

#about-galleria .h2-en.fade-shine.is-active {
    animation: shine 3s ease-out forwards;
  }

@keyframes shine {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/*---------------------------
H1
---------------------------*/
.page-title{
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid #f6f6f6;
  border-bottom: 1px solid #ececec;
  background-color: var(--color-white);
}
.page-title h1{
  color: #484848;
  font-size: var(--font-s);
  font-weight: 700;
  letter-spacing: 0.12em;
  width: calc(100% - 30px);
  max-width: 1140px;
  text-align: left;
  margin: auto;
}

/*---------------------------
ボタン
---------------------------*/
.c-btn{
  position:relative;
  width:100%;
  height:50px;
  background:var(--color-blue);
  border:1px solid var(--color-white);
  border-radius: 999px;
  padding:5px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
} 
.c-btn::after { 
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: all 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
.c-btn:hover {
  border:1px solid var(--color-blue);
}
.c-btn:hover::after {
  transform: scale(1, 1);
}
.c-btn p{
  width:calc(100% - 40px);
  padding-left:20px;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size:16px;
  color:var(--color-white);
  z-index:+1;
}
@media screen and (max-width: 767px) {
  .c-btn p.small{
    font-size:14px;
  }
}
.c-btn .icon{
  position:relative;
  height:40px;
  width:40px;
  background:var(--color-white);
  border:1px solid var(--color-white);
  border-radius: 999px;
  display:flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  transition: background-color 0.1s 0.1s ease;
  z-index:+1;
}
.c-btn:hover .icon {
  background-color: var(--color-blue);
}
.c-btn:hover p{
  color:var(--color-blue);
}
.c-btn .icon::before{
  position:absolute;
  display: block;
  content:'';
  top:10px;
  left:10px;
  width:20px;
  height:20px;
  aspect-ratio: 1 / 1;
}
.c-btn .icon.--crt::before{
  left:8px;
}
.c-btn .icon.--bwo::before{
  background: transparent url(../images/icon-arrow-open-blue.svg) no-repeat top center / contain;
}
.c-btn .icon.--crt::before{
  background: transparent url(../images/icon-cart-blue.svg) no-repeat top center / contain;
}
.c-btn .icon.--arw::before{
  background: transparent url(../images/icon-arrow-blue.svg) no-repeat top center / contain;
}
.c-btn:hover .icon.--bwo::before,
.c-btn:hover .icon.--crt::before,
.c-btn:hover .icon.--arw::before{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7441%) hue-rotate(108deg) brightness(97%) contrast(97%);
}

/*ボタン白*/
.c-btn.--white{
  background:var(--color-white);
  border:1px solid var(--color-white);
}
.c-btn.--white::after {
  background-color: var(--color-blue);
}
.c-btn.--white p{
  color:var(--color-blue);
}
.c-btn.--white .icon{
  background:var(--color-blue);
}
.c-btn.--white:hover .icon {
  background-color: var(--color-white);
}
.c-btn.--white .icon.--bwo::before,
.c-btn.--white .icon.--crt::before,
.c-btn.--white .icon.--arw::before{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7441%) hue-rotate(108deg) brightness(97%) contrast(97%);
}
.c-btn.--white:hover .icon.--bwo::before,
.c-btn.--white:hover .icon.--crt::before,
.c-btn.--white:hover .icon.--arw::before{
  filter: brightness(0) saturate(100%) invert(9%) sepia(50%) saturate(5658%) hue-rotate(221deg) brightness(85%) contrast(103%);
}

.c-btn.--white:hover p{
  color:var(--color-white);
}

/*---------------------------
KV
---------------------------*/
.kv{
  position:relative;
  width: 100%;
}

/*---------------------------
全体背景
---------------------------*/
#about-galleria .main-contents{
  position:relative;
  padding-top:var(--gap-ll);
}
#about-galleria .main-contents .main-contents-bkg{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:20%;
  z-index:-1;
}
#about-galleria .main-contents .main-contents-bkg video{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

video::-webkit-media-controls {
  display:none !important;
}

#about-galleria .main-contents .main-contents-cont{
  position:relative;
  top:0;
  left:0;
  z-index:2;
}
/*---------------------------
ABOUT
block-about
---------------------------*/
.about-wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  width:100%;
}
.about-image {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  padding-right:var(--gap-ll);
}
.about-title {
}
.about-txt {
}

@media screen and (max-width: 1200px) {
  #about-galleria .contents-block .contents-inner.--left{
    width:calc(100% - 40px);
    margin:auto;
  }
  .about-wrapper{
    display: flex;
    flex-direction: column;
    width:100%;
  }
  .about-title {
    order: 1;
    padding-bottom:var(--gap-s);
  }
  .about-image {
    order: 2;
    width:calc(100% + 20px);
    margin-left:-20px;
    padding-right:0;
  }
  .about-txt {
    order:3;
  }
}

/*---------------------------
Movie
block-movie
---------------------------*/
.movie-wrapper{
  text-align:center;
}
.movie-wrapper h3{
  margin-bottom:var(--gap-ss);
}
.movie-wrapper .movie-frame{
  margin:auto;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.movie-wrapper .movie-frame iframe{
  width:100%;
  height:100%;
}
.movie-wrapper .movie-image{
  width:100%;
  max-width:600px;
  margin:auto;
}
.movie-wrapper .movie-image a:hover{
  opacity: 0.7;
}

.movie-wrapper .btn-wrap{
  width:100%;
  max-width:370px;
  margin:var(--gap-s) auto 0 auto;
}

/*---------------------------
HISTORY
block-history
---------------------------*/
.history-list-wrapper{
  width:100%;
}
.history-list{
  display:flex;
  gap:40px;
  margin: var(--gap-l) 0;
}

.history-list li{
  flex:1;
}
.history-year{
  font-family: "Inter","Roboto","Noto Sans JP", sans-serif;
  font-weight:900;
  font-size:40px;
  text-align:left;
  margin-bottom:var(--gap-ss);
  color:var(--color-blue);
}
.history-img{
  position:relative;
  width:100%;
  padding:20px 0;
  border-top: 1px solid var(--color-blue);
}
.history-img img{
  background:#fff;
}
.history-img::before{
  position:absolute;
  content:'';
  top: -7px;
  left: -27px;
  width: 14px;
  height: 14px;
  background:var(--color-blue);
  border-radius: 999px;
}
.history-txt{
  line-height:1.2;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  color:var(--color-blue);
}

@media screen and (max-width: 1200px) {
  .history-list-wrapper{
    overflow-x: scroll;
    margin-bottom:5px;
  }
  .history-list{
    display:flex;
    gap:34px;
  }
  .history-list li{
    flex:auto;
    width:200px;
  }
  .history-img::before{
    left: -24px;
  }
}

.history-wrapper .btn-wrap{
  margin-top:var(--gap-l);
  width:100%;
  max-width:370px;
  margin:auto;
}

/*---------------------------
QUALITY
block-quality
---------------------------*/
#block-quality.contents-block{
  background:rgba(255,255,255,0.6);
}

.quality-wrapper{
  margin-top:var(--gap-l);
  width:100%;
  display:flex;
  gap:var(--gap-ll);
}
.quality-wrap-left {
  width:40%;
}
.quality-wrap-right {
  width:calc(60% - var(--gap-l));
  text-align:left;
}
.quality-wrapper .contents-txt{
  margin-top:0 !important;
}

.quality-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
}
.quality-list li{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap:var(--gap-s);
  background:var(--color-white);
  border-radius: 20px;
  padding:var(--gap-s);
}
.quality-list-img{
  width:60%;
  margin:auto;
}
.quality-list-txt{
  color:var(--color-blue);
  font-size:var(--font-s);
}
.quality-wrapper .btn-wrap{
  margin-top:var(--gap-l);
  width:100%;
  max-width:370px;
}

@media screen and (max-width: 767px) {
  .quality-wrapper{
    flex-direction: column;
    gap:var(--gap-l);
  }
  .quality-wrap-left,
  .quality-wrap-right {
    width:100%;
  }
  .quality-wrapper .btn-wrap{
    margin-left:auto;
    margin-right:auto;
  }
}

/*---------------------------
PRODUCT
block-product
---------------------------*/
.product-list{
  margin-top:var(--gap-s);
  width:100%;
  display: flex;
  flex-wrap: wrap;
  gap:10px;
}
.product-list li{
  width:calc((100% - 10px) / 2);
}
.product-list li.--large{
  width:100%;
}
.product-item {
  position: relative;
  overflow: hidden;
  padding:var(--gap-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-item.--s {
  background: url("../images/series_bg_s.webp") no-repeat center/cover;
}
.product-item.--x {
  background: url("../images/series_bg_x.webp") no-repeat center/cover;
}
.product-item.--f {
  background: url("../images/series_bg_f.webp") no-repeat center/cover;
}
.product-item.--n {
  background: url("../images/series_bg_n.webp") no-repeat center/cover;
}
.product-item.--g {
  background: url("../images/series_bg_g.webp") no-repeat center/cover;
}

.product-item .item-wrap{
  display:flex;
  justify-content: space-between;
  gap:20px;
}

.product-item.--s .item-img{
  width:34%;
}
.product-item.--x .item-img{
  width:42%;
}
.product-item.--f .item-img{
  width:56%;
}
.product-item.--n .item-img{
  width:48%;
}
.product-item.--g .item-img{
  width:53%;
}
.product-item .item-txt{
  display:flex;
  flex-direction: column;
  text-align:left;
  gap:20px;
}
.product-item .item-txt p{
  text-align:left;
}
.product-item .item-ttl{
  height:95px;
}
.product-item .item-copy-l{
  height:45px;
}
.product-item.--n .item-copy-l{
  height:85px;
}
.product-item .item-copy-s{
  height:20px;
}
.product-item .item-copy-s-txt{
  color:#fff;
  font-size:clamp(16px, 0.909rem + 0.45vw, 20px);
}
.product-item .item-ttl img,
.product-item .item-copy-l img,
.product-item .item-copy-s img{
  width:auto !important;
  height:100% !important;
  margin:0 !important;
}

@media screen and (max-width: 1700px) {
  .product-item .item-ttl {
    height:66px;
  }
  .product-item .item-copy-l{
    height:35px;
  }
  .product-item.--n .item-copy-l{
    height:55px;
  }
  .product-item {
    gap:10px;
  }
}


@media screen and (min-width: 768px) and (max-width: 1699px) {
  .product-item .item-ttl {
    height:45px;
  }
  .product-item .item-copy-l{
    height:26px;
  }
  .product-item.--n .item-copy-l{
    height:40px;
  }
}

@media screen and (max-width: 767px) {
  .product-list{
    flex-direction: column;
  }
  .product-list li{
    width:100%;
  }
  .product-item .item-wrap{
    flex-direction: column;
    gap:20px;
  }

  .product-item.--s .item-img{
    width:50%;
    margin:auto;
  }
  .product-item.--x .item-img,
  .product-item.--f .item-img,
  .product-item.--n .item-img{
    width:60%;
    margin:auto;
  }
  .product-item.--g .item-img{
    width:90%;
    margin:auto;
  }
  .product-item .item-ttl {
    height:66px;
  }
  .product-item .item-copy-l{
    height:35px;
  }
  .product-item.--n .item-copy-l,
  .product-item.--g .item-copy-l{
    height:66px;
  }
  .product-item.--s .item-copy-s{
    height:18px;
  }
}


/*ボタン*/
.btn-wrappers{
  display:flex;
  gap:20px;
}
.btn-wrappers .btn-wrap{
  width:235px;
}
.product-item.--g .btn-wrappers .btn-wrap{
  width:300px;
}
@media screen and (max-width: 767px) {
  .btn-wrappers{
    flex-direction: column;
    gap:10px;
  }
  .btn-wrappers .btn-wrap{
    flex-direction: column;
  }
  .btn-wrappers .btn-wrap,
  .product-item.--g .btn-wrappers .btn-wrap{
    width:100%;
  }
}
/*---------------------------
PRODUCT下
---------------------------*/
.product-btn-wrapper{
  margin:var(--gap-l) auto;
  display: flex;
  gap:var(--gap-m);
  align-items: center;
  justify-content: center;
}
.product-btn-wrapper .btn-wrap{
  width:300px;
}


@media screen and (max-width: 767px) {
  .product-btn-wrapper{
    flex-direction: column;
    gap:10px;
  }
}

/*---------------------------
バナー
block-banner
---------------------------*/
.galleria-banner{
  position:relative;
  margin:auto;
  width:100%;
}
.galleria-banner .--bwo{
  position:relative;
  padding-right:1.5em;
  width:fit-content;
  margin:0 auto 20px auto;
  font-size:var(--font-m) !important;
}
.galleria-banner .--bwo::after{
  position:absolute;
  content:'';
  right:0;
  top:calc(50% - 0.5em);
  width:1em;
  height:1em;
  background: transparent url(../images/icon-arrow-open-blue.svg) no-repeat top center / cover;
}
.galleria-banner img{
  margin-top:var(--gap-s);
  max-width:600px;
}
.galleria-banner a:hover{
  opacity: 0.7;
}

/*---------------------------
アニメーション動き
---------------------------*/
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in.is-active {
  opacity: 1;
  transform: translate(0, 0);
}

.fade-display{
 animation-name: anime-display;
 animation-duration:3s;
}
@keyframes anime-display
{
 0%{
  opacity: 0;
 }

 100%{
  opacity: 1;
 }
}

.fade-delay1 {
  transition-delay: 100ms;
}
.fade-delay2 {
  transition-delay: 200ms;
}
.fade-delay3 {
  transition-delay: 300ms;
}
.fade-delay4 {
  transition-delay: 400ms;
}
.fade-delay5 {
  transition-delay: 500ms;
}

.fade-in-zoom {
  transform: scale(0.5);
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}