@charset "UTF-8";

/* 数量入力欄を非表示にする */
.ec-numberInput {
  display: none;
}
:root {
  --c-navy: #334873;
  --c-turquoise: #0b88b4;
  --c-red: #a70000;
  --c-light-gray: #d9d9e1;
  --c-gray: #cacad3;
  --c-text: var(--c-navy);
  --grid-size: 50;
  --grid-size-px: calc(var(--grid-size) * 1px);
  --grid-size-vw: 3.8461538462vw;
}
html {
  font-size:62.5%;
  scroll-behavior:smooth
}
header.global {
  margin: 50px auto !important;
}
header.global .menu-primary::before {
  content: none;
}  
.block-hex-content,
.block-hex, 
.block-hex-border{
  border: none!important;
}
.ec-layoutRole .ec-layoutRole__contents {
  background: none;
  padding: 0;
}
.ec-productRole__btn{
  margin-left: 45px;
}
.ec-productRole__btn button{
  font-size: 1.6rem;
}
.ec-headerNaviRole .ec-headerRole__title h1 a{
    color: var(--c-navy);
}
.ec-headerNaviRole .ec-headerNav__itemLink{
  font-size: 12px;
  color: var(--c-navy);
}
.ec-headerNaviRole  i.ec-headerNav__itemIcon,
.ec-headerNaviRole  i.fa-shopping-cart{
  color: var(--c-navy);
}


@media screen and (max-width: 900px) {
  header.global {
    display: none!important;
  }
  .ec-productRole__btn {
    margin-left: 0;
  }
  .ec-productRole__btn button {
    font-size: 1.4rem;
  }
  .app-lineup .app-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
  }

  .app-tab:nth-of-type(1) {
    order: 1;
  }
  .app-tab:nth-of-type(2) {
    order: 3;
  }
  .app-contents:nth-of-type(1) {
    order: 2;
  }
  .app-contents:nth-of-type(2) {
    order: 4;
  }
  .app-lineup .app-row .app-tab:nth-of-type(1){
    --bg: var(--c-turquoise)!important; 
  }

  .app-lineup .app-row .app-tab:nth-of-type(2){
    --bg: var(--c-navy);
    --icon-bg: var(--c-turquoise)!important; 
    --icon-bg-hover: var(--c-navy)!important; 
  }
  .app-lineup .app-row .app-contents:nth-of-type(1){
    --bg: var(--c-turquoise)!important; 
  }

  .app-lineup .app-row .app-contents:nth-of-type(2){
    --bg: var(--c-navy);
    --icon-bg: var(--c-turquoise)!important; 
    --icon-bg-hover: var(--c-navy)!important; 
  }


}




@media screen and (min-width: 901px) {
header.global {
  margin-bottom: 0px!important;
}
.ec-headerNaviRole{
  padding-bottom: 0px!important;
  justify-content: flex-end;
}
.ec-headerNaviRole .ec-headerNaviRole__left{
  text-align: right;
  margin-right: 10px;
}
.ec-headerNaviRole .ec-headerRole__title h1 a{
    text-align: right;
    font-size: 14px!important;
}
.ec-headerNaviRole .ec-headerTitle{
}
.ec-headerNaviRole .ec-headerTitle__title{
    text-align: right;

}
.ec-headerNaviRole .ec-headerRole__navSP{
}
.ec-headerNaviRole .ec-headerNavSP{
}
.ec-headerNaviRole .fas.fa-bars{
}
.ec-headerNaviRole .ec-headerNaviRole__right{
    width: initial;
}
.ec-headerNaviRole .ec-headerNaviRole__nav{
}
.ec-headerNaviRole .ec-headerNav{
}
.ec-headerNaviRole .ec-headerNav__item{
}
.ec-headerNaviRole .ec-headerNav__itemIcon.fas.fa-user.fa-fw{
}
.ec-headerNaviRole .ec-headerNav__itemLink{
  font-size: 12px;
  color: var(--c-navy);
}
.ec-headerNaviRole .ec-headerNav__itemLink i.ec-headerNav__itemIcon{
  color: var(--c-navy);
}


.ec-headerNaviRole .ec-headerNav__itemIcon.fas.fa-heart.fa-fw{
}
.ec-headerNaviRole .ec-headerNav__itemIcon.fas.fa-lock.fa-fw{
}
.ec-headerNaviRole .ec-headerRole__cart{
}
.ec-headerNaviRole .ec-cartNaviWrap{
}
.ec-headerNaviRole .ec-cartNavi{
}
.ec-headerNaviRole .ec-cartNavi__icon.fas.fa-shopping-cart{
}
.ec-headerNaviRole .ec-cartNavi__badge{
}
.ec-headerNaviRole .ec-cartNavi__label{
}
.ec-headerNaviRole .ec-cartNavi__price{
}
.ec-headerNaviRole .ec-cartNaviIsset{
}
.ec-headerNaviRole .ec-cartNaviIsset__cart{
}
.ec-headerNaviRole .ec-cartNaviIsset__cartImage{
}
.ec-headerNaviRole .ec-cartNaviIsset__cartContent{
}
.ec-headerNaviRole .ec-cartNaviIsset__cartContentTitle{
}
.ec-headerNaviRole .ec-font-size-1{
}
.ec-headerNaviRole .ec-cartNaviIsset__cartContentPrice{
}
.ec-headerNaviRole .ec-cartNaviIsset__cartContentTax{
}
.ec-headerNaviRole .ec-cartNaviIsset__cartContentNumber{
}
.ec-headerNaviRole .ec-cartNaviIsset__action{
}
.ec-headerNaviRole .ec-blockBtn--action{
}
.ec-headerNaviRole .ec-blockBtn.ec-cartNavi--cancel{
}


}




footer a{
  color: var(--c-navy);
  text-decoration: none!important;
}
footer .ec-footerTitle .ec-footerTitle__logo a{
  color: var(--c-navy);
  text-decoration: none!important;
}
footer .ec-footerTitle .ec-footerTitle__copyright {
  color: var(--c-navy);
  text-decoration: none!important;
}


.app-lineup{--bg: var(--c-navy);color:#fff}
.app-tab{position:relative;display:flex;flex-wrap:wrap;transition:opacity .2s linear 0s}
.app-tab:hover{opacity:.85}
.app-tab:before{content:"";display:block;position:absolute;background-color:var(--bg);mix-blend-mode:multiply;inset:0}
.app-tab.-active:hover{opacity:1}
.app-tab-inner{position:relative;padding:40px 0 45px;width:100%}
.app-tab-num{font-size:1.6rem;font-weight:400}
.app-tab-info{margin:15px 45px 0;display:grid;grid-template-columns:auto 1fr;grid-column-gap:20px;-moz-column-gap:20px;column-gap:20px}
.app-tab-logo{width:140px;grid-column:1/2;grid-row:1/3}
.app-tab-name{font-size:3.8rem;line-height:1.25;grid-column:2/3;grid-row:1/2;margin:0 0 20px}
.app-tab-intro{font-size:1.6rem;font-weight:400;grid-column:2/3;grid-row:2/3}
.app-contents{height:0;overflow:hidden;position:relative;z-index:1}
.app-contents:before{content:"";display:block;position:absolute;background-color:var(--bg);mix-blend-mode:multiply;inset:0}
.app-contents.-active{height:auto}
.app-contents-inner{position:relative;display:flex;padding:100px 0}
.app-info{display:flex;flex-wrap:wrap;width:330px;gap:40px;align-content:start}
.app-info-item{width:100%;padding:0 50px 0 0}
.app-info-heading{font-size:1.2rem;margin:0 0 1em}
.app-info-text{padding:0 0 0 45px}
.app-info-button{margin:0 0 0 30px;transition:opacity .2s linear 0s}
.app-info-button:hover{opacity:.85}
.app-info-item.contact .app-info-text{font-size:1.4rem;margin:1em 0 0}
.app-article{--border-color: #fff;flex:1;padding:0 60px 0 70px;border-left:1px solid #fff;border-left:1px solid var(--border-color);position:relative}
.app-article:before,.app-article:after{content:"";display:block;background:var(--border-color);position:absolute;width:4px;height:4px;rotate:45deg;left:0;translate:calc(-50% - .5px) 0}
.app-article:before{top:0}
.app-article:after{bottom:0}
.app-article h3{font-size:5rem;font-weight:300}
.app-article p{font-size:1.8rem;font-weight:400;margin-top:1.5em;line-height:1.5}
.app-article p:first-child{margin-top:0}
.app-article .thumbnails{display:flex;flex-wrap:wrap;gap:20px}
.app-article .thumbnails .thumb{position:relative;width:calc(50% - 10px);transition:opacity .2s linear 0s;cursor:pointer}
.app-article .thumbnails .thumb:before{content:"";display:block;background:url(../icon/icon_loupe.svg) no-repeat center center var(--icon-bg);width:30px;height:30px;right:0;bottom:0;position:absolute;transition:background-color .2s linear 0s}
.app-article .thumbnails .thumb:hover{opacity:.85}
.app-article .thumbnails .thumb:hover:before{background-color:var(--icon-bg-hover)}
.app-article-section{margin-top:30px}
.app-article-section:first-child{margin-top:0}
.app-article-section.video{width:100%;aspect-ratio:16/9;position:relative}
.app-article-section.video iframe{width:100%;height:100%}
.app-article-comment{width:100%;border:none;overflow:hidden}


.product-catch-copy {
  font-size: 1.5em;
}
.app-lineup {
  display: block; /* もしくはデフォルトのまま */
}

.app-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px 10px;
  margin-bottom: 10px;
}

.app-row .app-tab {
  /* 1行目2列に並ぶ（デフォルトでOK） */
}

.app-row .app-contents {
  grid-column: span 2; /* 2列分使う（全幅） */
}

/* .app01{--bg: var(--c-turquoise)}
.app01 .block-hex{--hex-text-color: var(--c-turquoise);--hex-arrow-color: var(--c-turquoise)}
.app01.app-tab{grid-column:1/2;grid-row:1/2}
.app01.app-contents{grid-column:1/3;grid-row:2/3}

.app02{--icon-bg: var(--c-turquoise);--icon-bg-hover: var(--c-navy)}
.app02.app-tab{grid-column:2/3;grid-row:1/2}
.app02.app-contents{grid-column:1/3;grid-row:2/3} */
/* .app03{--icon-bg: var(--c-turquoise);--icon-bg-hover: var(--c-navy)}
.app03.app-tab{grid-column:1/2;grid-row:3/4}
.app03.app-contents{grid-column:1/3;grid-row:4/5}
.app04{--bg: var(--c-gray)}
.app04 .block-hex{--hex-text-color: var(--c-turquoise);--hex-arrow-color: var(--c-turquoise)}
.app04.app-tab{grid-column:2/3;grid-row:3/4}
.app04.app-tab:hover{opacity:1}
.app04 .app-tab-name{font-size:2rem;position:absolute;top:50%;left:50%;translate:-50% -50%;margin:0}
.app04.app-contents{grid-column:1/3;grid-row:4/5} */

.app-tab[data-app-index="1"] ,
.app-tab[data-app-index="4"] ,
.app-tab[data-app-index="5"] ,
.app-tab[data-app-index="8"] ,
.app-tab[data-app-index="9"] ,
.app-tab[data-app-index="12"] ,
.app-tab[data-app-index="13"] ,
.app-tab[data-app-index="16"] ,
.app-tab[data-app-index="17"] ,
.app-tab[data-app-index="20"] ,
.app-tab[data-app-index="21"] ,
.app-tab[data-app-index="24"] ,
.app-tab[data-app-index="25"] ,
.app-contents[data-app-index="1"] ,
.app-contents[data-app-index="4"] ,
.app-contents[data-app-index="5"] ,
.app-contents[data-app-index="8"] ,
.app-contents[data-app-index="9"] ,
.app-contents[data-app-index="12"] ,
.app-contents[data-app-index="13"] ,
.app-contents[data-app-index="16"] ,
.app-contents[data-app-index="17"] ,
.app-contents[data-app-index="20"] ,
.app-contents[data-app-index="21"] ,
.app-contents[data-app-index="24"] ,
.app-contents[data-app-index="25"] 
{ --bg: var(--c-turquoise); 
   --icon-bg: var(--c-turquoise);
   --icon-bg-hover:var(--c-navy); 
}
.app-tab[data-app-index="2"] ,
.app-tab[data-app-index="3"] ,
.app-tab[data-app-index="6"] ,
.app-tab[data-app-index="7"] ,
.app-tab[data-app-index="10"] ,
.app-tab[data-app-index="11"] ,
.app-tab[data-app-index="14"] ,
.app-tab[data-app-index="15"] ,
.app-tab[data-app-index="18"] ,
.app-tab[data-app-index="19"] ,
.app-tab[data-app-index="22"] ,
.app-tab[data-app-index="23"] ,
.app-contents[data-app-index="2"] ,
.app-contents[data-app-index="3"] ,
.app-contents[data-app-index="6"] ,
.app-contents[data-app-index="7"] ,
.app-contents[data-app-index="10"] ,
.app-contents[data-app-index="11"] ,
.app-contents[data-app-index="14"] ,
.app-contents[data-app-index="15"] ,
.app-contents[data-app-index="18"] ,
.app-contents[data-app-index="19"] ,
.app-contents[data-app-index="22"] ,
.app-contents[data-app-index="23"] 
{ --icon-bg: var(--c-navy); 
  --icon-bg-hover: var(--c-turquoise); 
}
/* 以降も同様に */



dialog[data-astro-cid-uiixupwn][open] {
  opacity:1;
  scale:1
}
dialog[data-astro-cid-uiixupwn] {
  padding:0;
  width:95vw;
  text-align:center;
  max-width:1500px;
  position:fixed;
  left:50%;
  top:50%;
  translate:-50% -50%;
  border:none;
  margin:0;
  opacity:0;
  scale:0;
  overflow:visible;
  transition:opacity .3s ease-out,scale .3s ease-out,overlay .3s ease-out allow-discrete,display .3s ease-out allow-discrete
}
@starting-style {
  dialog[data-astro-cid-uiixupwn][open] {
    opacity:0;
    scale:0
  }
}
dialog[data-astro-cid-uiixupwn]::backdrop {
  position:fixed;
  inset:0;
  background-color:#0000;
  transition:display .3s allow-discrete,overlay .3s allow-discrete,background-color .3s
}
dialog[data-astro-cid-uiixupwn][open]::backdrop {
  background-color:#00000040
}
@starting-style {
  dialog[data-astro-cid-uiixupwn][open]::backdrop {
    background-color:#0000
  }
}
.close[data-astro-cid-uiixupwn] {
  position:absolute;
  top:0;
  right:0;
  translate:0 -100%;
  display:block;
  background-color:var(--c-navy);
  width:50px;
  height:50px;
  cursor:pointer;
  transition:background-color .2s linear 0s
}
.close[data-astro-cid-uiixupwn]:hover {
  background-color:var(--c-turquoise)
}
.close[data-astro-cid-uiixupwn]:before,
.close[data-astro-cid-uiixupwn]:after {
  content:"";
  display:block;
  width:60%;
  height:2px;
  border-radius:1px;
  background:#fff;
  position:absolute;
  top:50%;
  left:50%;
  translate:-50% -50%
}
.close[data-astro-cid-uiixupwn]:before {
  rotate:45deg
}
.close[data-astro-cid-uiixupwn]:after {
  rotate:-45deg
}
.image-viewer-inner[data-astro-cid-uiixupwn] img[data-astro-cid-uiixupwn] {
  width:auto;
  margin:0 auto
}
html {
  scroll-behavior:auto
}





@media screen and (max-width: 1300px) {
  .app-tab-info {
    margin-left:var(--grid-size-vw)
  }
  .app-tab-name br,
  .app-tab-intro br {
    display:none
  }
}
@media screen and (max-width: 900px) {
  .app-lineup {
    grid-template-columns:auto
  }
  .app-tab-info {
    margin-left:45px
  }
  .app-tab-logo {
    width:80px
  }
  .app-tab-name {
    font-size:3rem;
    margin-bottom:15px
  }
  .app-tab-intro {
    font-size:1.2rem
  }
  .app-contents-inner {
    flex-direction:column;
    border-top:1px solid #fff;
    margin:5px calc(var(--grid-size-px) * 1.5) 0;
    padding:30px calc(var(--grid-size-px) / 2)
  }
  .app-contents-inner:before,
  .app-contents-inner:after {
    content:"";
    display:block;
    background:#fff;
    position:absolute;
    width:4px;
    height:4px;
    rotate:45deg;
    top:0;
    translate:0 calc(-50% - .5px)
  }
  .app-contents-inner:before {
    left:0
  }
  .app-contents-inner:after {
    right:0
  }
  .app-info {
    width:auto;
    flex-direction:column
  }
  .app-info-item {
    padding-right:0
  }
  .app-info-heading .point-line-icon {
    display:none
  }
  .app-info-text {
    padding-left:0
  }
  .app-info-button {
    --hex-size: 40;
    margin-left:0
  }
  .app-info-item.contact .app-info-button {
    width:15em;
    margin:0 auto
  }
  .app-article {
    border-left:none;
    border-top:1px solid var(--border-color);
    padding:40px calc(var(--grid-size-px) / 2);
    margin:40px 0 0
  }
  .app-article:before,
  .app-article:after {
    translate:0 calc(-50% - .5px)
  }
  .app-article:after {
    inset:0 0 auto auto
  }
  .app-article h3 {
    font-size:3rem
  }
  .app-article p {
    font-size:1.4rem
  }
  .app-article .thumbnails .thumb {
    width:100%
  }
  .app-article-section {
    margin-top:30px;
  }

  /* .app01.app-contents {
    grid-column:1/2;
    grid-row:2/3
  }
  .app02.app-tab {
    grid-column:1/2;
    grid-row:3/4
  }
  .app02.app-contents {
    grid-column:1/2;
    grid-row:4/5
  }
  .app03 {
    --bg: var(--c-turquoise);
    --icon-bg: var(--c-navy);
    --icon-bg-hover: var(--c-turquoise)
  }
  .app03.app-tab {
    grid-column:1/2;
    grid-row:5/6
  }
  .app03.app-contents {
    grid-column:1/2;
    grid-row:6/7
  }
  .app04.app-tab {
    grid-column:1/2;
    grid-row:7/8
  }
  .app04 .app-tab-name {
    position:static;
    translate:0 0;
    text-align:center;
    padding:1em 0
  }
  .app04.app-contents {
    grid-column:1/2;
    grid-row:8/9
  } */
}

@media screen and (max-width: 900px) {
    .close[data-astro-cid-uiixupwn] {
      width:30px;
      height:30px
    }
}

@media screen and (max-width: 400px) {
  .app-tab-info {
    margin-left:calc(var(--grid-size-vw) * 2)
  }
  .app-contents-inner {
    margin:5px calc(var(--grid-size-vw) * 1.5) 0;
    padding:30px calc(var(--grid-size-vw) / 2)
  }
  .app-info-button {
    font-size:1.4rem
  }
  .app-article {
    padding:40px calc(var(--grid-size-vw) / 2)
  }
}