@charset "utf-8";

/* ========================================
   共通
   ======================================== */
.link-btn{
  max-width: 360px;
  margin: var(--size48) auto 0;
}

.link-btn a{
  position: relative;
  display: block;
  font-size: clamp(15px, calc(16 / 1390 * 100vw), 16px);
  font-weight: 700;
  text-align: center;
  color: var(--bk);
  background: #fff;
  padding: 20px;
  border-radius: 100vmax;
  border: solid 2px var(--bk);
  transition: all .2s ease-in-out;
}

.link-btn.bk a{
  color: #fff;
  background: var(--bk);
}

.link-btn.blue--f a{
  color: var(--blue);
  border-color: var(--blue);
}

.link-btn a::after{
  position: absolute;
  content: '';
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 13px;
  height: 18px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMSA5TDIgMTYiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: right .1s ease-in-out .05s;
}

.link-btn.bk a::after{
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMSA5TDIgMTYiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
}

.link-btn.blue--f a::after{
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMSA5TDIgMTYiIHN0cm9rZT0iIzE1NThkNiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
}

.section .scroll-hint-icon{
  width: 140px;
}

@media (hover: hover){
  .link-btn a:hover{
    color: #fff;
    background: var(--bk);
  }

  .link-btn.bk a:hover{
    color: var(--bk);
    background: #fff;
  }

  .link-btn.blue--f a:hover{
    color: #fff;
    background: var(--blue);
  }

  .link-btn a:hover::after{
    right: 20px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMSA5TDIgMTYiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
  }

  .link-btn.bk a:hover::after{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMSA5TDIgMTYiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
  }
}

@media (hover: none){
  .link-btn a:active{
    color: #fff;
    background: var(--bk);
  }

  .link-btn.bk a:active{
    color: var(--bk);
    background: #fff;
  }

  .link-btn.blue--f a:active{
    color: #fff;
    background: var(--blue);
  }

  .link-btn a:active::after{
    right: 20px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMSA5TDIgMTYiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K');
  }

  .link-btn.bk a:active::after{
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxMyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIgMkwxMSA5TDIgMTYiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
  }
}


/* ========================================
   製品の比較
   ======================================== */
.comparison{
  overflow-x: hidden;
}

.comparison-wrapper{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: hidden;
}

.comparison-wrapper.is-grabbing {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.comparison-tb{
  min-width: 1180px;
  margin: 0;
}

.comparison-tb colgroup col{
  width: 15.6%;
}
.comparison-tb colgroup col.archi{
  width: calc(11% - clamp(5px, calc(10 / 1390 * 100vw), 10px));
}
.comparison-tb colgroup col.space{
  width: clamp(10px, calc(20 / 1390 * 100vw), 20px);
}

.comparison-tb th,
.comparison-tb td{
  position: relative;
  font-size: var(--size16);
  text-align: center;
  vertical-align: middle;
  border-bottom: solid 1px var(--bd-color);
  padding: clamp(12px, calc(14 / 1390 * 100vw), 14px) clamp(6px, calc(10 / 1920 * 100vw), 10px);
}

.comparison-tb th.archi.disp,
.comparison-tb td.archi.disp{
  background: #fffaf3;
}

.comparison-tb th.disp,
.comparison-tb td.disp{
  background: #f8fbff;
}

.comparison-tb th.space,
.comparison-tb td.space{
  font-size: 0;
  padding: 0!important;
  width: clamp(6px, calc(10 / 1390 * 100vw), 10px)!important;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.comparison-tb th{
  font-weight: 700;
}

.comparison-tb th.recommend{
  color: #fff;
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: clamp(6px, calc(8 / 1390 * 100vw), 8px);
}

.comparison-tb th.recommend.archi{
  background: #fff;
}
.comparison-tb th.recommend.archi.disp{
  background: #d6a915;
}
.comparison-tb th.recommend.disp{
  background: var(--blue);
}

.comparison-tb .comparison-tb__th.head,
.comparison-tb .comparison-tb__th.archi,
.comparison-tb .comparison-tb__th.space{
  border-bottom: none;
}

.comparison-tb .comparison-tb__type{
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: 400;
}

.comparison-tb .comparison-tb__type.archi{
  border-top: solid 1px var(--bd-color);
}

.comparison-tb .cloud::after{
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background: var(--bd-color);
}

.comparison-tb thead th.th_fixed::before{
  content: none;
}

.comparison-tb tbody tr:last-of-type th.th_fixed::after{
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--bd-color);
}

.comparison-tb tbody th a{
  position: relative;
  z-index: 2;
  display: inline-block;
  text-decoration: underline;
}

.comparison-tb tbody th.th_fixed span{
  position: relative;
  z-index: 2;
  display: inline-block;
}

.comparison-tb .mark{
  display: block;
  margin: 4px auto;
  line-height: 1;
  width: clamp(26px, calc(30 / 1390 * 100vw), 30px);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.comparison-tb .mark--hidden{
  display: none;
}
.comparison-tb .mark--cloud{
  width: 28px;
  height: 26px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjY2OCA5LjgyODEyTDE2Ljc4MDMgMTAuMTczOEgyNS43NzY0TDE4Ljc5MiAxNS4yNDhMMTguNDk4IDE1LjQ2MTlMMTguNjEwNCAxNS44MDY2TDIxLjI3ODMgMjQuMDE3NkwxNC4yOTM5IDE4Ljk0MzRMMTQgMTguNzI5NUwxMy43MDYxIDE4Ljk0MzRMNi43MjA3IDI0LjAxNzZMOS4zODk2NSAxNS44MDY2TDkuNTAxOTUgMTUuNDYxOUw5LjIwODAxIDE1LjI0OEwyLjIyMzYzIDEwLjE3MzhIMTEuMjE5N0wxMS4zMzIgOS44MjgxMkwxNCAxLjYxNzE5TDE2LjY2OCA5LjgyODEyWiIgZmlsbD0iIzE1NThENiIgc3Ryb2tlPSIjMTU1OEQ2Ii8+Cjwvc3ZnPgo=');
}
.comparison-tb .mark--full{
  width: 30px;
  height: 30px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTMuNSIgc3Ryb2tlPSIjMTU1OEQ2IiBzdHJva2Utd2lkdGg9IjMiLz4KPGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iNy41IiBzdHJva2U9IiMxNTU4RDYiIHN0cm9rZS13aWR0aD0iMyIvPgo8L3N2Zz4=');
}
.comparison-tb .mark--good{
  width: 28px;
  height: 28px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTQiIGN5PSIxNCIgcj0iMTIuNSIgc3Ryb2tlPSIjMTU1OEQ2IiBzdHJva2Utd2lkdGg9IjMiLz4KPC9zdmc+Cg==');
}
.comparison-tb .mark--limited{
  width: 31px;
  height: 27px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMjciIHZpZXdCb3g9IjAgMCAzMSAyNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjA1NzYgMjQuNzVIMi45NDIzOEwxNS41IDIuOTk5MDJMMjguMDU3NiAyNC43NVoiIHN0cm9rZT0iIzE1NThENiIgc3Ryb2tlLXdpZHRoPSIzIi8+Cjwvc3ZnPgo=');
}
.comparison-tb .mark--none{
  width: 28px;
  height: 3px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMyIgdmlld0JveD0iMCAwIDI4IDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyOCIgaGVpZ2h0PSIzIiByeD0iMS41IiBmaWxsPSIjODg4ODg4Ii8+Cjwvc3ZnPgo=');
}

.comparison-tb .link-btn{
  width: 90%;
  margin: 0 auto;
}

.comparison-tb .link-btn a{
  font-size: clamp(12px, calc(14 / 1390 * 100vw), 14px);
  padding: 0.75em 1em;
}

.comparison-tb .link-btn a::after{
  content: none;
}

.comparison .notes{
  display: grid;
  grid-template-columns: 3em 1fr;
  margin-top: clamp(16px, calc(26 / 1390 * 100vw), 26px);
}

.comparison .notes dt,
.comparison .notes dd{
  line-height: calc(20 / 16);
}

.comparison .notes a{
  display: inline;
  text-decoration: underline;
}

@media screen and (min-width: 768px){
  .comparison-tb th.th_fixed{
    position: sticky;
    z-index: 10;
    left: 0;
    background: #fff;
    border-bottom: none;
  }

  .comparison-tb th.th_fixed::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--bd-color);
  }
}

@media screen and (max-width: 767px){
  .comparison-tb{
    min-width: 1140px;
  }

  .comparison-wrapper{
    margin-right: calc(clamp(15px, calc(20 / 768 * 100vw), 20px) * -1);
  }
}

@media screen and (max-width: 374px){
  .comparison-wrapper{
    margin-right: calc(clamp(12px, calc(14 / 375 * 100vw), 14px) * -1);
  }
}

@media (hover: hover){
  .comparison-tb tbody th a:hover{
    opacity: var(--opacity);
  }

  .comparison .notes a:hover{
    opacity: var(--opacity);
  }
}

@media (hover: none){
  .comparison-tb tbody th a:active{
    opacity: var(--opacity);
  }

  .comparison .notes a:active{
    opacity: var(--opacity);
  }
}