@charset "utf-8";

/*------------------------------------------
共通

------------------------------------------*/
html{
  scroll-behavior: smooth;
}
.visually-hidden{
  position:absolute;
  opacity: 0;
  width:1px;
  height:1px;
  z-index:-10;
}
:root{
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(30px, 1.193rem + 3.41vw, 60px);

  --font-s:clamp(12px, 0.705rem + 0.23vw, 14px);
  --font-m:clamp(14px, 0.784rem + 0.45vw, 18px);
  --font-l:clamp(16px, 0.909rem + 0.45vw, 20px);


  --color-back:#bbcee5;
  --color-base:#484848;
  --color-gray:#999;
  --color-black:#333;
  --color-blue:#004da1;
  --color-dark-blue:#001e60;
  --color-light:rgba(147,206,225,0.8);
  --color-white-trans:rgba(255,255,255,0.2);
  --color-black-trans:rgba(0,0,0,0.2);

  --filter-gray:brightness(0) saturate(100%) invert(27%) sepia(0%) saturate(12%) hue-rotate(12deg) brightness(98%) contrast(91%);
  --filter-blue:brightness(0) saturate(100%) invert(11%) sepia(64%) saturate(3289%) hue-rotate(214deg) brightness(88%) contrast(107%);
  --filter-white:brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(4deg) brightness(110%) contrast(100%);
}
#dospara-select{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color:var(--color-base);
  background:var(--color-back);
}

#dospara-select .contents-section{
  position:relative;
  width:100%;
  text-align:center;
}
#dospara-select .section-inner{
  position:relative;
  width:calc(100% - 30px);
  max-width:1140px;
  margin:auto;
  text-align:left;
  z-index:2;
}
#dospara-select .contents-section .section-inner{
  padding-top:var(--gap-l);
  padding-bottom:var(--gap-l);
}
#dospara-select h2{
  position:relative;
  font-weight:700;
  font-size:clamp(18px, 0.716rem + 2.05vw, 36px);
  line-height: 1.2;
  color:var(--color-black);
  margin-bottom:var(--gap-m);
  text-align:left;
}
#dospara-select h3{
  position:relative;
  font-weight:700;
  font-size:var(--font-m);
  line-height: 1.2;
  color:var(--color-dark-blue);
  padding:0.5em 1em;
  border-radius:calc(var(--gap-s) / 2);
  margin-bottom:var(--gap-s);
  background:rgba(255,255,255,0.4);
}
#dospara-select .contents-block h3{
  background:var(--color-light);
  margin-bottom:0;
}

#dospara-select  h4{
  font-weight:700;
  font-size:var(--font-l);
  color:var(--color-dark-blue);
  margin-bottom:var(--gap-s);
}

#dospara-select em,
#dospara-select strong{
  font-weight:700;
  font-style: normal;
}
#dospara-select p{
  line-height: 1.6;
}
#dospara-select .note{
  font-weight:400;
  font-size:var(--font-s);
}

#dospara-select h2 .note{
  font-size:var(--font-m);
}

#dospara-select img{
  width:100%;
  margin:auto;
  object-fit: contain;
}
#dospara-select .c-button{
  width:100%;
  border-radius: 3em;
}
#dospara-select .c-button::after,
#dospara-select .product-button::after{
  right:15px;
}
#dospara-select summary {
  display: block;
  list-style: none;
  cursor: pointer;
}
#dospara-select summary::-webkit-details-marker, 
#dospara-select summary::marker {
 display: none; 
}

/*--台紙--*/
#dospara-select .contents-block{
  position:relative;
  width:100%;
  background:rgba(255,255,255,0.7);
  border-radius: var(--gap-s);
  box-shadow: 0px 0px 10px 3px var(--color-black-trans);
}
#dospara-select .contents-block.txt-block{
  padding:var(--gap-m);
}

/*アイコン*/
.tag-w-long::before{
  background: transparent url(../images/ico-warranty-long.svg) no-repeat top center / cover;
}
.tag-w-damage::before{
  background: transparent url(../images/ico-warranty-damage.svg) no-repeat top center / cover;
}

@media screen and (min-width: 428px) {
  .u-pcs-hide{
    display:none;
  }
}

@media screen and (max-width: 427px) {
  .u-sps-hide{
    display:none;
  }
}


/*------------------------------------------
背景
contents-back
------------------------------------------*/

/*背景デフォルト*/
#dospara-select.contents-back{
	position: relative;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background:transparent url(../images/bkg-all.webp?01) no-repeat center center / cover;
  background-attachment: fixed;
  z-index:1;
	transition: background-color 0.8s ease;
}
#dospara-select.contents-back::before{
  position: absolute;
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background-attachment: fixed;
  z-index:2;
}
#dospara-select.contents-back::after{
  position: absolute;
  content:'';
  display: block;
  inset: 0;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity: 0;
  z-index:2;
  transition: opacity 2.5s cubic-bezier(.4,0,.2,1);
}

/*背景：01*/
#dospara-select.contents-back.bkg-01::after{
  background: transparent url(../images/bkg-01.webp) no-repeat top center / 100%;
  background-attachment: fixed;
  opacity: 1;
}

/*背景：02*/
#dospara-select.contents-back.bkg-02::after{
  background: transparent url(../images/bkg-02.webp) no-repeat top center / 100%;
  background-attachment: fixed;
  opacity: 1;
}

/*背景：03*/
#dospara-select.contents-back.bkg-03::after{
  background: transparent url(../images/bkg-03.webp) no-repeat top center / 100%;
  background-attachment: fixed;
  opacity: 1;
}

#dospara-select.contents-back > section,
#dospara-select.contents-back > div{
  position:relative;
  z-index:3;
}

/*------------------------------------------
ナビ
navi
------------------------------------------*/
#dospara-select nav{
  position: sticky;
  top:0;
  left:0;
  z-index:1000;
  width:100%;
  height:80px;
  background:rgba(255,255,255,0.9);
}
#dospara-select nav .section-inner{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
#dospara-select nav .logo{
  width:295px;
  filter:var(--filter-gray);
}
#dospara-select nav .nav-list{
  display:flex;
  gap:30px;
  justify-content: flex-end;
  align-items: center;
}
#dospara-select nav .nav-list li{
  width:auto;
}
#dospara-select nav .nav-list li a{
  height:80px;
  display:flex;
  align-items: center;
  justify-content: center;
  color:#484848;
  font-weight:700;
  font-size:clamp(10px, 0.443rem + 0.91vw, 18px);
  text-align: center;
}
#dospara-select nav .nav-list li a:hover{
  opacity:0.7;
}

@media screen and (max-width: 910px) {
  #dospara-select nav,
  #dospara-select nav .nav-list li a{
    height:50px;
  }
  #dospara-select nav .section-inner{
    width:100%;
  }
  #dospara-select nav{
    display:block;
  }
  #dospara-select nav .logo{
    display:none;
  }
  #dospara-select nav .nav-list{
    gap:0;
    width:100%;
  }
  #dospara-select nav .nav-list li{
    width:calc((100% - 3px) / 4);
  }
  #dospara-select nav .nav-list li + li{
    border-left:1px solid var(--color-back);
  }
}

.fix-anchor {
  margin-top: -80px;
  padding-top: 80px;
}
@media screen and (max-width: 910px) {
  .fix-anchor {
    margin-top: -50px;
    padding-top: 50px;
  }
}
/*------------------------------------------
キービジュアル
kv
------------------------------------------*/
.kv{
  position:relative;
  width:100%;
  background: transparent url(../images/kv-bkg.webp) no-repeat top left / cover;
  padding-bottom:var(--gap-l);
}
.kv-wrapper{
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-m) 0;
}
.kv-wrapper .logo{
  width:90%;
}
.kv-wrapper .kv-txt{
  width:55%;
}
.kv-wrapper .kv-image{
  width:45%;
}
.kv-wrapper .catch-txt{
  font-weight:700;
  font-size:clamp(16px, 0.545rem + 2.27vw, 36px);
  color:var(--color-blue);
  margin-bottom:var(--gap-s);
}
.kv-wrapper .lead-txt{
  font-weight:700;
  font-size:clamp(14px, 0.511rem + 1.82vw, 30px);
  margin-top:var(--gap-s);
}
/*------保証------*/
.kv-warranty{
  display:flex;
  gap:var(--gap-m);
}
.kv-warranty li{
  flex:1;
  color:var(--color-dark-blue);
  font-weight:700;
  font-size:clamp(18px, 0.716rem + 2.05vw, 36px);
}
.kv-warranty .tag-w-long,
.kv-warranty .tag-w-damage{
  position: relative;
  padding-left: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: auto;
}
.kv-warranty .tag-w-long::before,
.kv-warranty .tag-w-damage:before{
  position:absolute;
  content:'';
  width:60px;
  height:60px;
  top:calc(50% - 30px);
  left:0;
}
.kv-warranty li .limited{
  margin-left:0.2em;
  font-size:clamp(24px, 0.909rem + 2.95vw, 50px);
}
.kv-warranty li .limited strong{
  font-size:1.2em;
}
.kv-warranty .kv-warranty-txt{
  text-align:center;
  font-size:var(--font-m);
  padding-bottom: 1em;
  margin-top: -0.5em;
}
.kv-warranty-note{
  text-align:center;
  font-weight:700;
  font-size:var(--font-m);
  margin-bottom:var(--gap-s);
  color:var(--color-dark-blue);
}

@media screen and (max-width: 767px) {
  #dospara-select .kv-warranty .contents-block {
    padding: 0 10px;
  }
  .kv-warranty .tag-w-long,
  .kv-warranty .tag-w-damage {
    padding-left: 45px;
    flex-direction: column;
    align-items:flex-start;
    text-align: left;
    padding-top: 10px;
    line-height: 1 !important;
  }

  .kv-warranty .tag-w-long::before,
  .kv-warranty .tag-w-damage:before {
    width: 40px;
    height: 40px;
    top: calc(50% - 20px);
    left: 0;
  }
  .kv-warranty li .limited{
    line-height:1 !important;
  }
  .kv-warranty .kv-warranty-txt{
    margin-top: 0.5em;
    line-height:1.2 !important;
  }
}

/*------------------------------------------
ボタン
anchor-link
------------------------------------------*/
.anchor-link{
  width:100%;
  display:grid;
  gap:var(--gap-s);
  grid-template-columns: repeat(4,1fr);
  margin:var(--gap-m) 0;
}
.anchor-link li{
  width:100%;
}
.anchor-link li a{
  position:relative;
  display:block;
  width:100%;
  padding:1em;
  text-align:left;
  background:transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) , var(--color-white-trans));
  border-radius: 3em;
  border:1px solid var(--color-gray);
  font-weight:700;
}
.anchor-link li a:hover{
  cursor: pointer;
  background:transparent;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) , var(--color-black-trans));
  border:1px solid var(--color-black);
  color:#fff;
}
.anchor-link li a::after{
  position: absolute;
  content: '';
  top: calc(50% - 4px);
  right: 25px;
  width: 8px;
  height: 8px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: var(--color-base);
}
.anchor-link.anchor-link-top li a::after{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.anchor-link.anchor-link-btm li a::after{
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  top: calc(50% - 2px);
}
.anchor-link li a:hover::after{
  border-color:#fff;
}

@media screen and (min-width: 768px) and (max-width: 950px) {
  .anchor-link li a{
    font-size:12px;
  }
}
@media screen and (max-width: 767px) {
  .anchor-link{
    grid-template-columns: repeat(2,1fr);
  }
  .anchor-link li a{
    font-size:12px;
  }
  .anchor-link li a::after{
    right: 16px;
  }
}


/*------------------------------------------
商品リスト
product-wrapper
------------------------------------------*/
/*------CommingSoon-----*/
.comming-soon{
  width:100%;
  padding:var(--gap-l);
  font-weight:700;
  font-size:clamp(18px, 0.716rem + 2.05vw, 36px);
  text-align:center;
}

/*------共通台紙------*/
.product-wrapper{
  width:100%;
  position:relative;
}
.icon_sweep{
  display:none;
}
.product-list{
  display: flex;
  gap:var(--gap-s);
  flex-wrap: wrap;
}
.product-list.list-4 li{
  width:calc((100% - (var(--gap-s)*3)) / 4);
}
.product-list.list-3 li{
  width:calc((100% - (var(--gap-s)*2)) / 3);
}
.product-list li a,.product-list--set li{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap:10px;
  padding:var(--gap-s);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 60%, var(--color-white-trans));
  border-radius: var(--gap-s);
  box-shadow: 0px 0px 10px 3px var(--color-black-trans);
}
.product-list li a:hover{
  cursor: pointer;
  background: #fff;
  box-shadow: 0px 0px 10px 3px var(--color-light);
}
.product-list--set li{
  width:calc((100% - (var(--gap-s)*1)) / 2);
}
.product-list--set li a{
  all: revert;
  display: block;
  color: #484848;
  text-decoration: none;
}
.product-list--set li a:hover{
  all: revert;
  color: #484848;
}
.product-list--set li .set-images{
  display: flex;
  gap:var(--gap-s);
}
.product-list--set li .set-images .set-image-left,.product-list--set li .set-images .set-image-right{
  flex: 1;
  margin-bottom: 10px;
}
.product-list--set li .product-button img{
  width: auto !important;
  height: 1em;
  margin: 0 0.5em 0 0 !important;
}

@media screen and (max-width: 767px) {
  .product-wrapper{
    overflow-x: scroll;
    padding: 15px;
    width: calc(100% + 30px);
    margin-left: -15px;
  }
  .icon_sweep{
    display:block;
    position:absolute;
    top:50px;
    right:50px;
    width:100px !important;
    height:100px !important;
    z-index:+1;
  }
  .scroll_over .icon_sweep {
    opacity: 0;
    z-index: -1;
  }
  .product-list{
    flex-wrap: nowrap;
  }
  .product-list.list-4 li,
  .product-list.list-3 li,
  .product-list.list-4 li a,
  .product-list.list-3 li a{
    width:200px;
  }
  .product-list--set li{
    width:300px;
    flex-shrink: 0;
  }
}
/*------共通中身データ------*/
.product-list .product-top,
.product-list .product-btm{
  position:relative;
  width:100%;
  display:flex;
  flex-direction: column;
  gap:10px;
}
#dospara-select .product-list .product-image{
  width:75%;
  margin:auto;
}
#dospara-select .product-list .product-name{
  line-height:1.2;
  font-weight:700;
  font-size:var(--font-m);
}
#dospara-select .product-list .product-stk{
  font-weight:700;
  font-size:var(--font-s);
}
#dospara-select .product-list .product-stk{
  font-weight:700;
  font-size:var(--font-s);
}
#dospara-select .product-list .product-price{
  font-size:var(--font-m);
}
#dospara-select .product-list .main-price{
  font-weight:700;
  font-size:var(--font-l);
}
#dospara-select .product-list .product-button{
  font-weight:700;
  font-size:var(--font-s);
  height:46px;
  width:100%;
  border-radius:3em;
}

/*------商品ナビ------*/
.tab-menu{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:var(--gap-s);
  margin-bottom:var(--gap-m);
}
.tab-menu{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:var(--gap-s);
  margin-bottom:var(--gap-m);
}
.tab-menu .tab{
  padding:0.5em;
  background:transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) , var(--color-white-trans));
  border-radius: 3em;
  border:1px solid var(--color-gray);
  text-align:center;
}
.tab-menu .tab p{
  position:relative;
  padding-left:1.5em;
  font-size:clamp(12px, 0.614rem + 0.68vw, 18px);
  margin:auto;
  width:fit-content;
  font-weight:700;
}
.tab-menu .tab p::after{
  position:absolute;
  content:'';
  top:calc(50% - 0.5em);
  left:0;
  width:1em;
  height:1em;
  filter:var(--filter-gray);
}
.tab-menu .tab[data-tab="tab-all"] p{
  padding-left:0;
}
.tab-menu .tab[data-tab="tab-memory"] p::after{
  background: transparent url(../images/ico-lineup-memory.svg) no-repeat top center / cover;
}
.tab-menu .tab[data-tab="tab-ssd"] p::after{
  background: transparent url(../images/ico-lineup-ssd.svg) no-repeat top center / cover;
}
.tab-menu .tab[data-tab="tab-power"] p::after{
  background: transparent url(../images/ico-lineup-power.svg) no-repeat top center / cover;
}
.tab-menu .tab[data-tab="tab-case"] p::after{
  background: transparent url(../images/ico-lineup-case.svg) no-repeat top center / cover;
}
.tab-menu .tab[data-tab="tab-cooler"] p::after{
  background: transparent url(../images/ico-lineup-fan.svg) no-repeat top center / cover;
}
.tab-menu .tab[data-tab="tab-fan"] p::after{
  background: transparent url(../images/ico-lineup-fan.svg) no-repeat top center / cover;
}
.tab-menu .tab[data-tab="tab-supply"] p::after{
  background: transparent url(../images/ico-lineup-power.svg) no-repeat top center / cover;
} 
.tab-menu .tab.active,
.tab-menu .tab:hover{
  background:transparent;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) , var(--color-black-trans));
  border:1px solid var(--color-black);
  color:#fff;
  cursor: pointer;
}
.tab-menu .tab.active p::after,
.tab-menu .tab:hover p::after{
  filter: none;
}

.tab-content{
  display:none;
}
.tab-content.active{
  display:block;
}

@media screen and (max-width: 767px) {
  .tab-menu{
    grid-template-columns: repeat(2,1fr);
  }
}

/*------商品ブロック------*/
.product-block + .product-block{
  margin-top:var(--gap-m);
}
.product-sub-block + .product-sub-block{
  margin-top:var(--gap-m);
}


/*------------------------------------------
保証
warranty
------------------------------------------*/
.warranty-wrapper{
  display:flex;
  gap:var(--gap-m);
  flex-wrap: wrap;
}
.warranty-wrapper .contents-block{
  padding:var(--gap-s);
}
#dospara-select .warranty-wrapper .contents-block.warrant-long,
#dospara-select .warranty-wrapper .contents-block.warrant-damage{
  width:calc((100% - var(--gap-m)) / 2);
}
.warranty-wrapper .contents-block.warrant-about{
  width:100%;
}

#dospara-select h3.tag-w-long,
#dospara-select h3.tag-w-damage {
  padding-left: 2.5em;
}
.warranty-wrapper .tag-w-long::before,
.warranty-wrapper .tag-w-damage::before{
  position:absolute;
  content:'';
  width:1.4em;
  height:1.4em;
  top:calc(50% - 0.7em);
  left:0.5em;
}

#dospara-select .warranty-wrapper .contents-block.warrant-about summary h3{
  margin-bottom:0;
}
.warrant-detail-block{
  padding:var(--gap-m);
}

.warranty-wrapper .warrant-detail-block p{
  font-size:var(--font-m);
  line-height:1.6;
}

.warranty-wrapper .warrant-detail-block .contents-txt + .contents-txt{
  margin-top:var(--gap-s);
}

.warranty-wrapper .warrant-detail-block p + p{
  margin-top:var(--gap-s);
}
.warranty-wrapper .warrant-detail-block p.note + p.note{
  margin-top:0px;
}
.warranty-wrapper .warrant-detail-block ul{
  list-style-type: disc;
  margin-left:1.5em;
}
.warranty-wrapper .warrant-detail-block li + li{
  margin-top:var(--gap-s);
}

.warranty-wrapper .warrant-detail-block p.contents-lead{
  font-weight:700;
  color:var(--color-dark-blue);
  font-size:clamp(20px, 0.886rem + 1.82vw, 36px) !important;
}
.warranty-wrapper .warrant-detail-block p.contents-lead .note{
  margin-left:5px;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px) !important;
}

@media screen and (max-width: 767px) {
  .warranty-wrapper{
    flex-direction: column;
  }
  #dospara-select .warranty-wrapper .contents-block.warrant-long,
  #dospara-select .warranty-wrapper .contents-block.warrant-damage{
    width:100%;
  }
}

/*---詳しく見る----------------------*/
#dospara-select .warranty-wrapper .contents-block.warrant-about summary h3 {
  border-top-right-radius: 3em;
  border-bottom-right-radius: 3em;
}

.more-button{
  position:absolute;
  top:0;
  right:0;
  width:fit-content;
  height:100%;
  width:200px;
  display:flex;
  align-items: center;
  justify-content: center;
  padding:1em 3em 1em 1em;
  background:transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) , var(--color-white-trans));
  border-radius: 3em;
  border:1px solid var(--color-gray);
  font-weight:700;
  color:var(--color-base);
}
.warrant-about details .more-button::before {
  position: absolute;
  content: '';
  width: 14px;
  height: 2px;
  top: calc(50% - 1px);
  right: 14px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: #6d6d6d;
}
.warrant-about details .more-button::after {
  position: absolute;
  content: '';
  width: 2px;
  height: 14px;
  top: calc(50% - 7px);
  right: 20px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: #6d6d6d;
}
.warrant-about details[open] .more-button::after {
    transform: rotate(90deg);
    transition: 0.3s all;
}

@media screen and (max-width: 767px) {
  .more-button{
    width:120px;
    font-size:12px;
  }
}
@media screen and (max-width: 427px) {
  .more-button{
    width:4em;
    padding:1em;
  }
}


.warranty-wrapper table{
  font-size:var(--font-m);
}
.warranty-wrapper th,
.warranty-wrapper td{
  padding:1em;
  font-weight:400;
  border:1px solid #ccc;
}
.warranty-wrapper th{
  white-space: nowrap;
}
.warranty-wrapper td.date{
  white-space: nowrap;
}

.warranty-wrapper thead th{
  background:#d6ebf0;
}
.warranty-wrapper table strong{
  font-size:clamp(18px, 0.989rem + 0.68vw, 24px);
}

.warranty-wrapper .logo{
  width:280px;
  margin-top:var(--gap-s);
}

.warrant-nocover-list{
  margin-top:var(--gap-s);
}

@media screen and (max-width: 767px) {
  .warranty-wrapper table{
  border-bottom:1px solid #ccc;
  }
  .warranty-wrapper thead{
    display: none;
  }
  .warranty-wrapper th,
  .warranty-wrapper td{
    display: block;
    text-align: left;
    border-bottom: none;
  }
  .warranty-wrapper th{
    background:#d6ebf0;
  }

}


/*------------------------------------------
キャンペーン
campaign
------------------------------------------*/
.campaign-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:var(--gap-m);
}

.campaign-list a:hover {
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .campaign-list{
    grid-template-columns: repeat(2, 1fr);
  }
}


/*------------------------------------------
ニュース
NEWS
------------------------------------------*/
#news dl{
  font-size:var(--font-m);
}
#news dl + dl{
  margin-top:var(--gap-s);
  padding-top:var(--gap-s);
  border-top:1px dotted var(--color-back);
}
#news dl dt{
  margin-bottom:5px;
}
#news dl dd{
  line-height:1.6;
}
#news dl a{
  color:var(--color-blue);
}
#news dl a:hover{
  opacity: 0.7;
}



/*------------------------------------------
ドスパラセレクトとは
about
------------------------------------------*/
#about p{
  font-size:var(--font-l);
}
#about p + p{
  margin-top:var(--gap-s);
}


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

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

.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);
}