@charset "UTF-8";
/* ----------------------------------------------------------------------
ユーザーサポート
---------------------------------------------------------------------- */
:root {
  --blue: #1a4fa0;
  --blue-dark: #163d82;
  --blue-light: #e8eef8;
  --blue-mid: #2d6cbf;
  --accent: #f5a623;
  --text: #333;
  --text-light: #666;
  --border: #d0d8e8;
  --bg: #f4f6fb;
  --white: #fff;
  --shadow: 0 2px 8px rgba(26,79,160,0.10);
}

/* ===== NAV BUTTONS ===== */
.nav-buttons-wrap {
  background: #fff;
}

.nav-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.nav-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 3.2rem 4rem 3.2rem 2rem;
  border-radius: 6px;
  font-size: 2rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s;
  font-family: inherit;
  width: 100%;
}

.nav-btn:hover {
  background: var(--blue-dark);
}

.nav-btn .icon {
  font-size: 15px;
}

.nav-btn .arrow {
  background: #fff;
  color: var(--blue);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

/* 2nd row: span 3 cols evenly as 2 buttons */
.nav-btn-row2 {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.nav-btn-row2 .nav-btn {
  font-size: 2.4rem;
  padding: 2.9rem 4rem 2.9rem 2rem;
}

/* Icon + text left group for row2 buttons */
.nav-btn .btn-left {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.nav-btn .btn-icon-img {
  flex-shrink: 0;
}

.nav-btn .btn-text {
  text-align: left;
}

.nav-btn .btn-text small {
  display: block;
  line-height: 1;
  font-size: 1.6rem;
}

/* ===== SECTION ===== */
.section-title {
  text-align: center;
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 28px;
  color: var(--text);
  letter-spacing: 0.04em;
}

/* ===== INTRO BLOCK ===== */
.intro-block {
  display: flex;
  gap: 8rem;
  align-items: center;
  width: 90%;
  max-width: 1400px;
  margin: 21.4rem auto 0;
}

.intro-block .intro-img {
  width: 56rem;
}

.intro-block .intro-text {
  width: calc(100% - 64rem);
}

.intro-block .intro-text p {
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
}
.intro-block .intro-text h3{font-size: 1.8rem;}

.intro-block .intro-text .contact {
  margin-top: 14px;
  font-size: 13px;
}
.intro-block .intro-text .contact a{max-width:42rem;}

/* ===== USER REGISTRATION SECTION ===== */
.user-reg-section {
  margin-top: 18rem;
}

.user-reg-inner {
  display: flex;
  gap: 8rem;
  align-items: center;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.user-reg-img {
  width: 56rem;
}

.user-reg-inner .text {
  width: calc(100% - 64rem);
}

.user-reg-inner .text p {
  margin-bottom: 1.6rem;
  font-size: 1.8rem;
  line-height: 2;
}

.user-reg-inner .text a.button {
  width: 50rem;
  height: 6rem;
  margin-top: 3rem;
}

/* ===== SUPPORT INFO ===== */
#support-info {
  margin-top: 14rem;
}

.support-info-grid {
  max-width: 1400px;
  margin: 0 auto 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 0;
}

/* 左カラム: 右側に仕切り線なし、各行に下線 */
.support-col {
  display: flex;
  flex-direction: column;
}

.support-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 3.5rem 7rem 3.5rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: inherit;
  background: url(../images/arrow_blue.svg) no-repeat right 3rem center / 20px 20px;
	margin-bottom: -1px;
}


/* 各カラム先頭カードの上に線を追加 */
.support-card:first-child {
  border-top: 1px solid var(--border);
}

.support-card:nth-child:hover {
  background: #e6ecf2;
}

.support-card .date {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 1.4rem;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 13.5rem;
  text-align: center;
}

.support-card .content {
  flex: 1;
  line-height: 1.5;
  border-left: 1px solid var(--border);
  padding-left: 3rem;
}

.support-card .chevron {
  width: 22px;
  height: 22px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.center-btn a.button {
  margin: 4rem auto 0;
  width: 32rem;
  height: 6rem;
  font-size: 1.6rem;
}

/* ===== FAQ ===== */
#faq {
  margin-top: 18rem;
}

.faq-list {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 22px;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 3rem 23px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
  background: #fff;
}

.faq-q .plus {
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: none;
}

/* 開いている時はマイナス記号 */
.faq-item.open .faq-q .plus::before {
  content: "−";
}

.faq-item:not(.open) .faq-q .plus::before {
  content: "+";
}

.faq-a {
  display: none;
  background: #fff;
}

.faq-item.open .faq-a {
  display: block;
  padding: 2.5rem;
  margin: 0 3rem 3.5rem;
  color: #004da1;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  background: #e6ecf2;
  border-radius: 8px;
}

#faq .center-btn a.button {
	width:100%;
  max-width: 42rem;
  height: 7rem;
}

/* ===== DOWNLOAD ===== */
.download-section {
  margin-top: 18rem;
  margin-bottom: 18rem;
}

.download-main {
  display: flex;
  align-items: center;
	justify-content:space-between;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

/* 左カラム: 外枠カード */
.download-img-box {
  flex-shrink: 0;
  width: 40%;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.download-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: #d4d9e2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  overflow: hidden;
}

.download-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.download-img-box .dl-meta {
  padding: 2.1rem 1.6rem 4.2rem;
  border-top: 1px solid var(--border);
}

.download-img-box .label {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 4px;
  text-align: center;
}

.download-img-box .version {
  font-size: 1.8rem;
  text-align: center;
}

.download-info { width: 53%; }

.download-info p {
  line-height: 2;
  font-size: 1.8rem;
}

/* ID・パスワードボックス: 枠線＋タイトル横線スタイル */
.info-box {
  border: 1.5px solid var(--blue);
  border-radius: 8px;
  padding: 0;
  color: #004da1;
  margin-top: 4rem;
  margin-bottom: 4rem;
  position: relative;
}

.info-box .info-title {
  position: absolute;
  top: -16px;
  left: 18px;
  background: #fff;
  padding: 0 8px;
  font-weight: 700;
  font-size: 1.8rem;
  color: #004da1;
  white-space: nowrap;
}

.info-box .info-body {
  padding: 2.5rem 3rem;
  line-height: 2;
}

.info-box .info-body a {
  color: #004da1; text-decoration: underline;
}

#download a.button {
  width: 100%;
	max-width:42rem;
  font-size: 1.6rem;
}

/* ===== OTHER DOWNLOADS GRID ===== */
.other-dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 25px;
	width:90%;
  max-width: 1400px;
  margin: 0 auto;
}

.dl-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.dl-card .dl-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.5;
}

.dl-card .dl-sub {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 11px;
  line-height: 1.5;
}

.btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.18s;
  width: 80%;
  justify-content: center;
  margin-top: auto;
}

.btn-dl:hover {
  background: var(--blue-dark);
}

.btn-dl .dl-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* dl-subが無いカード: タイトルを縦中央、ボタンは下端 */
.dl-card:not(:has(.dl-sub)) .dl-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== REMOTE SUPPORT ===== */
.remote-section {
  margin-top: 18rem;
}

.remote-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.remote-img {
  width: 43%;
}

.remote-info {
  width:53%;
}

.remote-info > p {
  font-size: 1.8rem;
  margin-bottom: 4.5rem;
  line-height: 2;
}

/* 「こんな時にご利用ください」枠線ボックス */
.remote-use-box {
  border: 1.5px solid var(--blue);
  border-radius: 8px;
  padding: 0;
  position: relative;
}

.remote-use-box .use-title {
  position: absolute;
  top: -20px;
  left: 35px;
  background: #fff;
  padding: 0 8px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

.remote-use-box .remote-icons {
  display: flex;
  gap: 1rem;
  padding: 2.4rem 1.6rem 2.4rem;
  justify-content: space-around;
}

.remote-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  color: #004da1;
  font-size: 1.4rem;
  text-align: center;
}
.remote-icon-item img{
	width:8rem;
}
.remote-btn-wrap {
  text-align: center;
  margin-top: 28px;
}

#remote .center-btn a.button {
  max-width: 42rem;
  height: 7rem;
  margin-top: 6rem;
}

/* ===== RESPONSIVE ===== */
/* タブレット: 画像とテキストの段組みを縦並びに */
@media (max-width: 1024px) {
	.intro-block,.user-reg-section,.download-section,.remote-section {    margin-top: 10rem;}
	.download-section{margin-bottom:10rem;}
  .other-dl-grid {
    grid-template-columns: repeat(3, 1fr);
  }
	.nav-btn{font-size:1.6rem;}
	.nav-buttons{gap:2rem;}
	.nav-btn-row2{gap:2rem;}
	.nav-btn-row2 .nav-btn{		font-size:1.6rem;	}
	.nav-btn .btn-text small {    font-size: 1.4rem;}
	.intro-block,.user-reg-inner{justify-content:space-between; gap:0;align-items: start;}
	.intro-block .intro-img,.user-reg-img {    width: 46%;}
	.intro-block .intro-text,.user-reg-inner .text {    width: 50%;}
	.intro-block .intro-text p{font-size:1.6rem;}
	.user-reg-inner .text a.button {width: 100%;}
	.user-reg-inner .text p,.remote-info > p {    font-size: 1.6rem;    line-height: 1.8;}
	.download-main,.remote-inner {	align-items: flex-start;}
	.support-card .date {width:10rem;}
	.support-card .content{font-size:1.4rem;}
}
/* スマホ */
@media (max-width: 820px) {
	.section-title{font-size:3.2rem;}
	.support-info-grid {grid-template-columns: 1fr;}
	.other-dl-grid {    grid-template-columns: repeat(2, 1fr);  }
	.btn-primary {    min-width: unset;    width: 100%;    padding: 14px 24px;  }
	.remote-use-box .remote-icons {    flex-wrap: wrap;    gap: 1.8rem 0;  }
	.remote-icon-item {    flex: 0 0 40%;  }
	.page-header h1 {    font-size: 22px;  }
	.nav-btn {    font-size: 1.1rem;  }
	.download-info p {    line-height: 1.8;    font-size: 1.6rem;}
}
/* 小型スマホ */
@media (max-width: 520px) {
    .intro-block, .user-reg-section, .download-section, .remote-section {        margin-top: 8rem;    }
	.section-title {    font-size: 2.0rem;    }
	.nav-btn{padding:1.5rem; font-size: 1.4rem;}
	.nav-btn-row2 .nav-btn {  font-size: 1.4rem;  padding:1rem; }
	.nav-btn-row2 .nav-btn img{width:41px;}
	.nav-btn .btn-text small {   font-size: 1.1rem;   }
	.intro-block .intro-text, .user-reg-inner .text {     width: 100%;    }
	.download-info {    width: 100%;}
	.remote-info {    width: 100%;}
  .intro-block, .user-reg-inner, .download-main, .remote-inner {
    flex-direction: column;
    gap: 2rem;
  }
  .intro-block .intro-img, .user-reg-img, .download-img-box, .remote-img {
    width: 100%;
    min-width: 0;
  }
  .intro-block {
    align-items: stretch;
  }
  .nav-buttons {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .nav-btn-row2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .support-info-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .other-dl-grid {
    grid-template-columns: 1fr 1fr;
  }
  .other-dl-grid {
    grid-template-columns: 1fr;
  }
  .info-box .info-body {    padding: 3rem;  }
  .support-card {    padding: 1rem 4rem 1rem 1rem;    background-position: right 1rem center; gap: 1rem; }
	.support-card .date{min-width:unset;}
	.support-card .content{padding-left: 1.5rem;}
	.user-reg-inner .text a.button{ background-position: right 1rem center;}
}

@media (any-hover: hover) {
	.support-card:hover {
	  background: url(../images/arrow_blue.svg) no-repeat right 3rem center / 20px 20px,#ddeaf8;
	}

}