@charset "UTF-8";

:root {
  --gap-ss: clamp(5px, 0.17rem + 0.61vw, 10px);
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(30px, 1.989rem + 5.68vw, 60px);

  --color-blue: #004da1;
  --color-pale-blue: #e2f5fb;
  --color-light-blue: #00a2e6;
  --color-gray: #f6f6f6;
  --color-dark: #222;

  --font-ll:clamp(20px, 0.966rem + 1.21vw, 30px);
  --font-l:clamp(18px, 0.955rem + 0.73vw, 24px);
  --font-m:clamp(14px, 0.761rem + 0.48vw, 18px);
  --font-s:clamp(12px, 0.693rem + 0.24vw, 14px);
  --font-ss:clamp(10px, 0.568rem + 0.24vw, 12px);
}

/*------------------------------------------
基本レイアウト
------------------------------------------*/
html {
  scroll-behavior: smooth;
}

.shop-contens{
  position:relative;
  width:100%;
  text-align:center;
  font-size: clamp(14px, 0.818rem + 0.24vw, 16px);
  letter-spacing: 0.05em;
}

.shop-contens img{
  width:100%;
  object-fit: contain;
  margin-inline: auto;
}


/*ボタン
-------------*/
.shop-contens .c-button{
  width:100%;
  padding-right: 15px;
}
.shop-contens .c-button::after {
  right: 15px;
}
.shop-contens .c-button,
.shop-contens .c-button span,
.shop-contens .c-button p{
  letter-spacing: 0;
  line-height:1.25;
  font-size:clamp(12px, 0.636rem + 0.48vw, 16px);
}
@media screen and (max-width: 767px) {
  .shop-contens .c-button{
    height:40px;
  }
}

/*------------------------------------------
共通レイアウト
------------------------------------------*/
.cont-section {
}

.contents-inner {
  width: calc(100% - 30px);
  max-width: 1140px;
  margin-inline: auto;
  text-align:left;
}

.cont-section .contents-inner {
  padding-block: var(--gap-m);
}

.cont-section + .cont-section .contents-inner{
  border-top:1px solid var(--color-pale-blue);
}

.cont-section section{
  margin-top: var(--gap-m);
}

/*テキスト
-------------*/
.cont-section h2 {
  margin-bottom: var(--gap-s);
  font-weight: 900;
  font-size: var(--font-ll);
  line-height: 1.2;
}

.lead-txt {
  font-size: var(--font-m);
  line-height: 1.6;
}

/*注意事項
-------------*/

.caution-list{
  margin-top:10px;
}

.caution-list li{
  position:relative;
  padding-left:1em;
  font-size:var(--font-ss);
}

.caution-list li::before{
  position:absolute;
  top:0;
  left:0;
  content:'※';
}

.caution-list li + li{
  margin-top:0.5em;
}

/*------------------------------------------
タイトルエリア
------------------------------------------*/
.sec-title{
  padding-block: var(--gap-m);
  background:var(--color-blue);
  margin-bottom:var(--gap-m);
}

.title-wrap{
  width:100%;
  display:flex;
  gap:var(--gap-m);
  align-items: center;
}

.title-txt{
  flex:1;
  display:flex;
  flex-direction: column;
  gap:var(--gap-s);
  color:#fff;
}

.title-txt h1{
  font-size:clamp(30px, 1.364rem + 2.18vw, 48px);
  font-weight:900;
  line-height:1.2;
}

.title-txt .lead-txt {
  font-size: var(--font-m);
}

.info-basic{
  width:40%;
  padding:var(--gap-m);
  border-radius:var(--gap-s);
  background:#fff;
  font-size:var(--font-s);
}

.info-basic dl{
  width:100%;
  display:flex;
  line-height:1.6;
}

.info-basic dt{
  font-weight:700;
  white-space:nowrap;
  width:5em;
  color:var(--color-blue);
}

.info-basic dd{
  flex:1;
}

.info-basic dl + dl{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dotted var(--color-blue);
}

@media screen and (max-width: 767px) {
  .title-wrap{
    flex-direction: column;
  }
  .title-txt,
  .info-basic{
    width:100%;
  }
}

/*------------------------------------------
アクセス
anchor-access
------------------------------------------*/
.access-wrap{
  width:100%;
	display: grid;
	grid-template-columns: 50% 1fr;
	grid-template-rows: 1fr 50px;
  gap:var(--gap-m);
  margin-block: var(--gap-s);
	grid-template-areas:
		"access-map access-txt"
		"access-map access-link";
}

.access-wrap .access-map{
  height:clamp(300px, 15.909rem + 12.12vw, 400px);
  grid-area: access-map;
}
.access-wrap .access-txt{
  grid-area: access-txt;
}
.access-wrap .more-link{
  grid-area: access-link;
  max-width:100%;
}

.access-wrap h3{
  font-weight:700;
  margin-bottom:var(--gap-s);
  color:var(--color-blue);
  font-size:var(--font-m);
}

.access-wrap .access-list li{
  list-style: disc;
  margin-left:1.5em;
  margin-top:var(--gap-ss);
  line-height:1.4;
}

.access-wrap .x-link{
  grid-area: access-link;
  width:100%;
}
.access-wrap .x-link .c-button{
  width:100%;
  padding:10px;
  text-align: center;
  background:#000;
}

.access-wrap .x-link .c-button::after{
  border-color:#fff
}
.access-wrap .x-link .c-button::before{
  background:#fff;
  opacity: 0.1;
}

.shop-contens .access-wrap .x-link .c-button img{
  height:100%;
  width:auto;
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(54deg) brightness(108%) contrast(101%);
}

@media screen and (max-width: 767px) {
  .access-wrap{
    display: flex;
    flex-direction: column;
  }
}

/*------------------------------------------
もっと見る
------------------------------------------*/
.more-link{
  width:100%;
  max-width:600px;
  margin-inline: auto;
}

.more-link p + p{
  margin-top:var(--gap-s);
}

/*------------------------------------------
お取り扱い商品・サービス
anchor-service
------------------------------------------*/
.service-list{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:var(--font-m);
}

.service-list li{
  display:flex;
  flex-direction: column;
  gap:10px;
  border: 1px solid #a3a3a3;
  border-radius: var(--gap-s);
  background: #fff;
  padding:var(--gap-s);
}

.service-list li .service-tag{
  width:fit-content;
  padding:0.3em 1em;
  border-radius: 100vw;
  background:var(--color-pale-blue);
  color:var(--color-blue);
  font-weight:700;
  font-size:var(--font-s);
}

.service-list li .service-ttl{
  width:fit-content;
  font-weight:900;
  font-size:var(--font-m);
}

.service-list li .service-txt{
  line-height:1.6;
}


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



/*------------------------------------------
秋葉原本店のお支払い方法
anchor-payment
------------------------------------------*/
#anchor-payment .p-shop-information__store-detail__title{
  display:none;
}

.info-content{
  width:100%;
}

.info-content img{
  margin-top:10px;
}

.info-content + .info-content{
  flex:1;
  margin-top:var(--gap-m);
  gap:var(--gap-m);
}

.info-content + .info-content p{
  line-height:1.6;
}

.info-content > div{
  flex:1;
}


@media screen and (max-width: 767px) {
  .info-content + .info-content{
    flex-direction: column;
  }
}

/*------------------------------------------
フロア情報
anchor-floor
------------------------------------------*/
.floor-list{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:var(--gap-s);
}

.floor-list > li{
  border: 1px solid #a3a3a3;
  border-radius: var(--gap-s);
  background: #fff;
  padding:var(--gap-s);
}

.floor-list h3{
  background:var(--color-blue);
  padding:0.5em 1em;
  color:#fff;
  font-size:var(--font-m);
  font-weight:700;
  border-radius: 2px;
}

.floor-list h3 span{
  margin-right:0.2em;
  font-size:110%;
}

.floor-list section{
  margin-top:var(--gap-s);
}

.floor-list h4{
  font-size:var(--font-m);
  font-weight:900;
}

.floor-list ul{
  margin-top:var(--gap-s);
  margin-left:var(--gap-m);
}

.floor-list ul > li{
  list-style: disc;
}

.floor-list ul > li + li{
  margin-top:0.5em;
}

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

/*------------------------------------------
よくあるご質問
service-faq
------------------------------------------*/
.faq-list{
  width:100%;
  counter-reset: faq-counter; 
}

.faq-list > li {
  counter-increment: faq-counter; 
  border-bottom:1px dotted #c8c8c8;
}
.faq-list > li:first-child{
  border-top:1px dotted #c8c8c8;
}

.faq-list > li details[open]{
  padding-bottom:var(--gap-s);
}

.faq-list > li summary {
  list-style: none;
  display: block;
  position:relative;
  padding:var(--gap-s) 3em var(--gap-s) 0;
  font-size:clamp(14px, 0.818rem + 0.24vw, 16px);
  font-weight:700;
  cursor:pointer;
}
.faq-list > li details[open] summary {
  padding-bottom:calc(var(--gap-s) / 2);
}

.faq-list > li summary::-webkit-details-marker {
  display:none;
}
.faq-list > li summary::before{
  position:absolute;
  content:'';
  top:calc(50% - 1px);
  right:0;
  background:var(--color-blue);
  width:1em;
  height:2px;
}
.faq-list > li summary::after{
  position:absolute;
  content:'';
  top:calc(50% - 0.5em);
  right:calc(0.5em - 1px);
  background:var(--color-blue);
  width:2px;
  height:1em;
  transition: all 0.3s;
}
.faq-list > li details[open] summary::after{
  transform: rotate(90deg);
  transition: 0.3s all;
}

.faq-list > li summary h3 {
  position:relative;
  padding-left:3em;
}

.faq-list > li summary h3::before {
  position:absolute;
  left:0;
  top:0;
  color:var(--color-blue);
  font-weight:700;
  content: "Q." counter(faq-counter); 
}

.faq-cont{
  background: var(--color-gray);
  border-radius: 2px;
  padding:var(--gap-s);
  font-size:clamp(12px, 0.636rem + 0.48vw, 16px);
  line-height:1.6;
}