/*########################################
## FONT ################################
########################################*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Noto+Sans+JP:wght@100..900&display=swap');

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Fp2ywxg089UriCZa4ET-DNl0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 108%;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Fp2ywxg089UriCZa4Hz-D.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 108%;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Hp2ywxg089UriCZ2IHSeH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 108%;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2Hp2ywxg089UriCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 108%;
}

/*
  Reset
----------------------------------------------------------------------------------------------------*/
/**/
header *,
footer *,
#optionNavigationAreaWrap * { box-sizing: border-box; }

header div, header span, header iframe,
header h1, header p,header a,header address,header img,header sub,header sup,header dl,header dt,header dd,header ol,header ul,header li,
header form,header label,header embed,
header menu,header nav,
footer div, footer span, footer iframe,
footer h1,footer p,footer a,footer address,footer img,footer dl,footer dt,footer dd,footer ol,footer ul,footer li,
footer form,footer label,footer embed, footer, header,header fieldset,footer fieldset,
footer menu, footer nav {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.6;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

footer, header, header nav, footer nav {
  display: block;
}

header ol, header ul,
footer ol, footer ul,
#optionNav ol,#optionNav ul {
  list-style: none;
}

header ol,
footer ol,
#optionNav ol {
  margin: 0;
  padding: 0;
}

header ul,
footer ul,
#optionNav ul {
  margin: 0;
  padding: 0;
}

header input,
footer input {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
header input:focus,
footer input:focus {
  outline: none;
}
footer input[type="submit"],
header input[type="submit"] { cursor: pointer; }

/*
  Base Style
----------------------------------------------------------------------------------------------------*/
body header,
body footer,
body #optionNav {
  color: #555566;
  font-size: 14px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body header a,
body footer a,
body #optionNav { text-decoration: none;}

header img,
footer img {
  vertical-align: middle;
}


/*########################################
## COMMON ################################
########################################*/
:root {
  /* content */
  --content-width: 1256px;
  --content-side--pc: 58px;
  --content-side--sp: clamp(16px, 8.21vw, 32px);
  --content-grid-width--pc: 68px;
  --content-grid-gap--pc: 40px;
  --content-grid-gap--sp: 16px;
  /* color */
  --color_main_key: #0E0D6A;
  --color_main_accent: #1EACE5;
  --color_main_base01: #EBF6FF;
  --color_main_base02: #D5EDFF;
  --color_mono_white: #FFFFFF;
  --color_mono_bg_light: #F1F2F6;
  --color_mono_bg_dark: #DDE0E7;
  --color_mono_bg_dark--rgb: 221 224 231;
  --color_mono_bg_black: #222222;
  --color_other_alert: #C50018;
  --color_text_main: #222222;
  --color_text_main--filtered: brightness(0) saturate(100%) invert(4%) sepia(0%) saturate(1944%) hue-rotate(174deg) brightness(101%) contrast(80%);
  --color_text_main--rgb: 34 34 34;
  --color_text_sub: #7A7A7A;
  --color_text_sub--rgb: 122 122 122;
  --color_text_darkgray: #626262;
  --color_link_main: #0066AA;
  --color_link_hover: #1D9BFF;
  --color_link_hover--filtered: brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(1804%) hue-rotate(189deg) brightness(106%) contrast(101%);
  /* transition */
  --transition_duration: 0.5s;
  --transition_easing: ease-out;
  --transition_delay: 0s;
  --transition_default-set: var(--transition_duration) var(--transition_easing) var(--transition_delay);
  --transition_animation-set: 0.3s var(--transition_easing) var(--transition_delay);
  /* header */
  --header-height--pc: 121px;
  --header-height--sp: 78px;
}

.cmn-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/*########################################
## HEADER ################################
########################################*/
/* ----- Header ----- */
.Header,
.Header * {
  font-family: "DM Sans", "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
.Header {
  color: var(--color_text_main);
  z-index: 1001;
}
.Header img {
  max-width: 100%;
  height: auto;
}
/* ----- placeholder ----- */
.header-search .header-search__input::-webkit-input-placeholder { color: var(--color_text_sub) !important; }
.header-search .header-search__input:-moz-placeholder { color:var(--color_text_sub)!important; }
.header-search .header-search__input::-moz-placeholder { color:var(--color_text_sub)!important; opacity: 1; }
.header-search .header-search__input:-ms-input-placeholder { color:var(--color_text_sub)!important; }
.header-search .header-search__input:placeholder-shown { color:var(--color_text_sub)!important; }

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px){
  /* ----- Header ----- */
  :root {
    --header-height: var(--header-height--pc);
    --header-megamenu-height: 0;
  }
  body:has(.Header) {
    padding-top: var(--header-height);
  }
  body:has(.Header .Header__body .header-megamenu[aria-hidden="false"]) > *:not(:has(.Header)):not(.Header):not(.Header *),
  body:has(.Header .Header__body .header-megamenu[aria-hidden="false"]) > *:has(.Header) .Header ~ *  {
    filter: blur(5px);
  }
  .Header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: var(--header-height);
    background: var(--color_mono_white);
    transition: top var(--transition_default-set), transform var(--transition_default-set);
    transform: translateY(-100%);
  }
  .Header.is-fixed{
    transform: translateY(0);
  }
  .Header::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--header-height) + 1px);
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(9deg, #F9F9F9 6.87%, #D8E0E9 89.59%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_default-set), visibility var(--transition_default-set);
  }
  .Header:has(.Header__body .header-megamenu[aria-hidden="false"])::before {
    opacity: 0.9;
    visibility: visible;
  }
  .Header .Header__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-flow: row wrap;
    width: 100%;
    max-width: 1600px;
    padding-block: 20px 0;
    padding-inline: var(--content-side--pc);
    gap: 0 32px;
  }
  .Header:has(.Header__body .header-megamenu[aria-hidden="false"]) .Header__inner::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(100% - var(--content-side--pc) * 2);
    max-width: calc(1600px - var(--content-side--pc) * 2);
    height: 2px;
    background: var(--color_mono_bg_light);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .Header .Header__head {
    align-self: center;
    flex-shrink: 0;
    padding-top: 8px;
  }
  .Header .Header__body {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
  }
  .Header .Header__foot {
    display: none;
  }
  /* ----- header-logo ----- */
  .header-logo {
    width: 100px;
  }
  .header-logo > a {
    display: block;
    width: 100%;
  }
  .header-logo > a > img {
    width: 100%;
  }
  /* ----- header-nav-wrap ----- */
  .header-nav-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 25px 0;
  }
  .header-nav-wrap .header-nav-wrap__head {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  .header-nav-wrap .header-nav-wrap__body {
    display: flex;
    justify-content: flex-end;
    gap: 0 36px;
  }
  /* ----- header-fault ----- */
  .header-fault {
    align-self: flex-start;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0 10px;
  }
  .header-fault::before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: -28px;
    width: 2px;
    height: 12px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ex01_02.svg') no-repeat center / contain;
  }
  .header-fault .header-fault__title {
    position: relative;
    padding-left: 32px;
    color: var(--color_text_main);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  .header-fault .header-fault__title::before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 20px;
    height: 20px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic06_01.svg') no-repeat center / contain;
  }
  .header-fault .header-fault__link {
    color: var(--color_text_darkgray);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.05em;
  }
  .header-fault .header-fault__link > a {
    color: var(--color_text_darkgray);
    font-size: 10px;
    font-weight: 400;
    line-height: 2.1;
    letter-spacing: 0.05em;
    transition: color var(--transition_default-set);
    vertical-align: 0.1em;
  }
  .header-fault .header-fault__link > a:first-of-type {
    padding-inline: 3px 0;
  }
  .header-fault .header-fault__link > a:last-of-type {
    padding-inline: 0 3px;
  }
  .header-fault .header-fault__link > a:hover {
    color: var(--color_link_hover);
  }
  /* ----- header-utility ----- */
  .header-utility {
    display: flex;
    gap: 12px;
  }
  /* ----- header-contact ----- */
  .header-contact .header-contact__link {
    display: block;
    padding: 7px 14px 6px;
    border-radius: 8px;
    background: var(--color_main_key);
    color: var(--color_mono_white);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.06em;
    transition: background var(--transition_default-set);
  }
  .header-contact .header-contact__link:hover {
    background: var(--color_link_hover);
  }
  /* ----- header-language ----- */
  .header-language .header-language__link {
    display: block;
    padding: 7px 14px 6px;
    border-radius: 8px;
    background: var(--color_mono_bg_light);
    color: var(--color_text_main);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    transition: background var(--transition_default-set), color var(--transition_default-set);
  }
  .header-language .header-language__link:hover {
    background: var(--color_mono_bg_dark);
    color: rgb(var(--color_text_main--rgb) / 0.4);
  }
  /* ----- header-search ----- */
  .header-search .header-search__trigger {
    appearance: none;
    display: block;
    padding: 7px 14px 6px;
    border-radius: 8px;
    border: none;
    background: var(--color_mono_bg_light);
    color: var(--color_text_main);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    transition: background var(--transition_default-set), color var(--transition_default-set);
    cursor: pointer;
  }
  .header-search .header-search__trigger .header-search__trigger__label {
    position: relative;
    padding-left: 15px;
  }
  .header-search .header-search__trigger .header-search__trigger__label::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: -1px;
    width: 10px;
    height: 10px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic05_01.svg') no-repeat center / contain;
    transform: translateY(-50%);
    transition: opacity var(--transition_default-set);
  }
  .header-search .header-search__trigger:hover {
    background: var(--color_mono_bg_dark);
    color: rgb(var(--color_text_main--rgb) / 0.4);
  }
  .header-search .header-search__trigger:hover .header-search__trigger__label::before {
    opacity: 0.4;
  }
  .header-search .header-search__megamenu {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: 0;
    padding-inline: var(--content-side--pc);
    background: var(--color_mono_bg_dark);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_default-set), visibility var(--transition_default-set), height calc(var(--transition_duration) / 2) var(--transition_easing);
  }
  .header-search .header-search__megamenu[aria-hidden="false"]{
    height: 100px;
    opacity: 1;
    visibility: visible;
  }
  .header-search .header-search__megamenu__inner {
    position: relative;
    width: 100%;
    padding-block: 31px 29px;
    padding-inline: 30px;
  }
  .header-search .header-search__close {
    appearance: none;
    position: absolute;
    top: 13px;
    right: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic07_01.svg') no-repeat center /contain;
    cursor: pointer;
    white-space: nowrap;
    text-indent: -100vw;
    overflow: hidden;
  }
  .header-search .header-search__form {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .header-search .header-search__set {
    display: flex;
    align-items: stretch;
    border-radius: 4px;
    background: var(--color_mono_white);
    overflow: hidden;
  }
  .header-search .header-search__set:focus-within {
    outline: auto;
    outline-color: var(--color_text_sub);
  }
  .header-search .header-search__input {
    display: block;
    width: 100%;
    height: 40px;
    padding-block: 2px 3px;
    padding-inline: 22px 0;
    color: var(--color_text_main);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  .header-search .header-search__submit {
    appearance: none;
    flex-shrink: 0;
    position: relative;
    display: block;
    width: 48px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    text-indent: -100vw;
    overflow: hidden;
  }
  .header-search .header-search__submit::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic08_01.svg') no-repeat center /contain;
    transform: translate(-50%,-50%);
  }

  /* ----- header-gnav ----- */
  .header-gnav {
    display: flex;
  }
  .header-gnav::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--header-height) - 1px);
    left: 0;
    width: 100%;
    height: calc(var(--header-megamenu-height) + 1px);
    border-radius: 0 0 6px 6px;
    background: var(--color_mono_white);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_default-set), visibility var(--transition_default-set), height calc(var(--transition_duration) / 2) var(--transition_easing);
  }
  .header-gnav:has(.header-megamenu[aria-hidden="false"])::before {
    opacity: 1;
    visibility: visible;
  }
  .header-gnav .header-gnav__list {
    display: flex;
    margin: 0 !important;
  }
  .header-gnav .header-gnav__list > li > [class*="__type"] {
    --padding-inline: 16px;
    appearance: none;
    position: relative;
    display: block;
    margin: 0;
    padding: 0 var(--padding-inline) 25px;
    border: none;
    background: none;
    color: var(--color_text_main);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.045em;
    cursor: pointer;
    transition: color var(--transition_default-set);
  }
  .header-gnav .header-gnav__list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 3px;
    left: var(--padding-inline);
    width: calc(100% - var(--padding-inline) * 2);
    height: 2px;
    background: var(--color_link_main);
    transform: scaleX(0);
    transform-origin: top right;
    transition: transform var(--transition_default-set);
  }
  .header-gnav .header-gnav__list > li > [class*="__type"][class*="--toggle"]:hover::after,
  .header-gnav .header-gnav__list > li > [class*="__type"][class*="--toggle"][aria-expanded="true"]::after,
  .header-gnav .header-gnav__list > li.is-active > [class*="__type"][class*="--toggle"]::after,
  .header-gnav .header-gnav__list > li.is-current > [class*="__type"]::after {
    transform: scaleX(1);
    transform-origin: top left;
  }
  .header-gnav .header-gnav__list > li > [class*="__type"]:not([class*="--toggle"]):hover {
    color: var(--color_link_hover);
  }
  /* ----- header-megamenu ----- */
  .header-megamenu {
    position: absolute;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    top: var(--header-height);
    left: 0;
    width: 100%;
    padding-inline: var(--content-side--pc);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_default-set);
    overflow: hidden auto;
  }
  .header-megamenu[aria-hidden="false"]{
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition_default-set), visibility var(--transition_default-set);
  }
  .header-megamenu .header-megamenu__inner {
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    gap: var(--content-grid-gap--pc);
    width: 100%;
    max-width: calc(1600px - var(--content-side--pc) * 2);
    padding-block: 72px 56px;
  }
  .header-megamenu .header-megamenu__head {
    align-self: flex-end;
    flex-shrink: 0;
    width: calc(var(--content-grid-width--pc) * 4 + var(--content-grid-gap--pc) * 3);
  }
  .header-megamenu .header-megamenu__body {
    flex-grow: 1;
    max-width: calc(min(50%,(1600px - var(--content-side--pc) * 2) / 2) + ((var(--content-grid-width--pc) * 4 + var(--content-grid-gap--pc) * 3) / 2));
    padding-bottom: 24px;
  }
  .header-megamenu .header-megamenu__heading {
    text-align: left;
  }
  .header-megamenu .header-megamenu__heading__title {
    display: block;
    color: var(--color_text_main);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .header-megamenu .header-megamenu__heading__subtitle {
    display: block;
    color: var(--color_text_sub);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
  }

  /* ----- header-column ----- */
  .header-column {
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    gap: var(--content-grid-gap--pc);
    width: 100%;
  }
  .header-column .header-column__item {
    flex-grow: 1;
    max-width: calc(var(--content-grid-width--pc) * 4 + var(--content-grid-gap--pc) * 3);
  }
  .header-column .header-column__item > :first-child {
    margin-top: 0 !important;
  }

  /* ----- header-link-list ----- */
  .header-link-list {
    margin: 15px 0 0 !important;
    padding: 0;
    list-style: none;
  }
  .header-column .header-column__item > .header-link-list:first-child {
    margin-top: -16px !important;
  }
  .header-link-list > li {
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #F1F2F6 78%, rgba(241, 242, 246, 0.00) 100%) 1;
  }
  .header-link-list > li > [class*="__type"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-block: 14px 13px;
    padding-inline: 0 45px;
    color: var(--color_text_main);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-align: left;
    transition: color var(--transition_default-set);
  }
  .header-link-list > li > [class*="__type"]::before,
  .header-link-list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 34px;
    height: 22px;
    transform: translateY(-50%);
    transition: opacity var(--transition_default-set);
  }
  .header-link-list .header-link-list__type::before {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic01_01.svg') no-repeat center /contain;
  }
  .header-link-list .header-link-list__type--blank::before {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic01_02.svg') no-repeat center /contain;
  }
  .header-link-list .header-link-list__type::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic01_01_on.svg') no-repeat center /contain;
    opacity: 0;
  }
  .header-link-list .header-link-list__type--blank::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic01_02_on.svg') no-repeat center /contain;
    opacity: 0;
  }
  .header-link-list > li > [class*="__type"]:hover {
    color: var(--color_link_hover);
  }
  .header-link-list > li > [class*="__type"]:hover::before {
    opacity: 0;
  }
  .header-link-list > li > [class*="__type"]:hover::after {
    opacity: 1;
  }

  /* ----- header-inline-link-list ----- */
  .header-inline-link-list {
    display: flex;
    flex-flow: row wrap;
    margin: 24px 0 0 !important;
  }
  .header-inline-link-list > li {
    position: relative;
  }
  .header-inline-link-list > li:not(:last-child)::after {
    content: "/";
    margin-inline: .6em;
  }
  .header-inline-link-list > li > [class*="__type"] {
    color: var(--color_text_main);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
    transition: color var(--transition_default-set);
  }
  .header-inline-link-list > li > [class*="__type"]:hover {
    color: var(--color_link_hover);
  }

  /* ----- header-card ----- */
  .header-card {
    display: flex;
    flex-flow: row wrap;
    gap: var(--content-grid-gap--pc);
    margin: 1em 0 0;
  }
  .header-card > li {
    width: calc((100% - var(--content-grid-gap--pc)) / 2);
  }
  .header-card > li > [class*="__type"] {
    display: block;
    width: 100%;
  }
  .header-card .header-card__head {
    width: 100%;
  }
  .header-card .header-card__image {
    aspect-ratio: 176 / 117;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  .header-card .header-card__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition_default-set);
  }
  .header-card .header-card__body {
    position: relative;
    width: 100%;
    margin: 10px 0 0;
    padding-right: 15px;
  }
  .header-card > li > [class*="__type"] .header-card__body::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% + 1px);
    right: 0;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
  }
  .header-card .header-card__type .header-card__body::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_03.svg') no-repeat center / contain;
  }
  .header-card .header-card__type--blank .header-card__body::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_04.svg') no-repeat center / contain;
  }
  .header-card .header-card__title {
    color: var(--color_text_main);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: left;
    transition: color var(--transition_default-set);
  }
  .header-card > li > [class*="__type"]:hover .header-card__image > img {
    transform: scale(1.1);
  }
  .header-card > li > [class*="__type"]:hover .header-card__title {
    color: var(--color_text_sub);
  }
  /* ----- header-brand-link ----- */
  .header-brand-link {
    margin: 20px 0 0;
  }
  .header-brand-link .header-brand-link__head {
    text-align: left;
  }
  .header-brand-link .header-brand-link__title {
    position: relative;
    color: var(--color_text_sub);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
  }
  .header-brand-link .header-brand-link__body {
    margin: 26px 0 0;
  }
  .header-brand-link .header-brand-link__list {
    display: flex;
    flex-flow: row wrap;
    gap: 28px;
  }
  .header-brand-link .header-brand-link__list > li {
    display: flex;
    width: calc((100% - 28px * 2) / 3);
  }
  .header-brand-link .header-brand-link__list > li > [class*="__type"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 114 / 76;
    width: 100%;
    border: 1px solid var(--color_mono_bg_light);
    padding-inline: 13px;
    border-radius: 8px;
    background: var(--color_mono_white);
  }
  .header-brand-link .header-brand-link__type--blank::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_02.svg') no-repeat center / contain;
  }
  .header-brand-link .header-brand-link__list > li > [class*="__type"] > img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
    transition: opacity var(--transition_default-set);
  }
  .header-brand-link .header-brand-link__list > li > [class*="__type"]:hover > img {
    opacity: 0.5;
  }

  /* ----- header-gnav ----- */
  .header-banner {
    margin: 1em 0 0;
  }
  .header-banner > [class*="__type"] {
    position: relative;
    display: block;
    aspect-ratio: 392 / 196;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  .header-banner .header-banner__head {
    display: block;
    width: 100%;
    height: 100%;
  }
  .header-banner .header-banner__image {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform var(--transition_default-set);
  }
  .header-banner .header-banner__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .header-banner .header-banner__body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-block: 30px 17px;
    padding-inline: 24px 65px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%);
    color: var(--color_mono_white);
  }
  .header-banner > [class*="__type"] .header-banner__body::after {
    content: "";
    display: block;
    position: absolute;
    bottom: calc(50% - 15px);
    right: 24px;
    width: 34px;
    height: 22px;
    transform: translateY(50%);
  }
  .header-banner .header-banner__type .header-banner__body::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic01_03.svg') no-repeat center / contain;
  }
  .header-banner .header-banner__type--blank .header-banner__body::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic01_04.svg') no-repeat center / contain;
  }
  .header-banner .header-banner__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
  }
  .header-banner .header-banner__subtitle {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
  .header-banner > [class*="__type"]:hover .header-banner__image {
    transform: scale(1.1);
  }
}
/* ======================================================
 * PC Media Queries
====================================================== */
@media print, screen and (min-width: 768px) and (max-width: 1372px) {
  .Header .Header__inner {
    gap: 0 min(20px ,calc(20 / 1372 * 100vw));
    padding-inline: min(20px ,calc(20 / 1372 * 100vw));
  }
  .Header:has(.Header__body .header-megamenu[aria-hidden="false"]) .Header__inner::after {
    width: calc(100% - min(20px ,calc(20 / 1372 * 100vw)) * 2);
  }
  .header-logo {
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .header-gnav .header-gnav__list > li > [class*="__type"] {
    --padding-inline: min(15px ,calc(15 / 1372 * 100vw));
    padding-bottom: min(25px ,calc(25 / 1372 * 100vw));
  }
  .header-megamenu {
    padding-inline: min(20px ,calc(20 / 1372 * 100vw));
  }
  .header-megamenu .header-megamenu__inner {
    flex-flow: row wrap;
    max-width: calc(1600px - min(20px ,calc(20 / 1372 * 100vw)) * 2);
  }
  .header-column .header-column__item {
    width: min(392px, calc(392 / 1372 * 100vw));
    max-width: none;
  }
  .header-brand-link .header-brand-link__list {
    gap: min(28px, calc(28 / 1372 * 100vw));
  }
  .header-brand-link .header-brand-link__list > li {
    width: calc((100% - min(28px ,calc(28 / 1372 * 100vw)) * 2) / 3);
  }
}
@media print, screen and (min-width: 768px) and (max-width: 1256px) {
  .header-megamenu .header-megamenu__inner {
    padding-block: min(36px ,calc(36 / 1256 * 100vw)) min(28px ,calc(28 / 1256 * 100vw));
  }
  .header-megamenu .header-megamenu__body {
    width: 100%;
    max-width: none;
  }
  .header-column .header-column__item {
    width: calc((100% - var(--content-grid-gap--pc)) / 2);
  }
}
@media print, screen and (min-width: 768px) and (max-width: 1024px) {
  .header-nav-wrap .header-nav-wrap__body {
    gap: 0 min(20px,calc(20 / 1372 * 100vw));
  }
  .header-gnav .header-gnav__list > li > [class*="__type"] {
    font-size: clamp(12px, 15px ,calc(15 / 1024 * 100vw));
  }
  .header-fault {
    gap: 0 min(10px,calc(10 / 1372 * 100vw));
  }
  .header-fault::before {
    left: max(-18px ,calc(-18 / 1372 * 100vw));
  }
  .header-fault .header-fault__title {
    padding-left: min(32px ,calc(32 / 1372 * 100vw));
    font-size: clamp(10px, 15px ,calc(15 / 1024 * 100vw));
  }
  .header-fault .header-fault__title::before {
    width: min(20px ,calc(20 / 1372 * 100vw));
    height: min(20px ,calc(20 / 1372 * 100vw));
  }
  .header-fault .header-fault__link {
    font-size: clamp(10px, 12px ,calc(12 / 1024 * 100vw));
  }
}

/* ======================================================
 * SP
====================================================== */
@media screen and (max-width: 767px) {
  /* ----- Header ----- */
  :root {
    --header-height: var(--header-height--sp);
    --header-megamenu-height: 0;
  }
  body:has(.Header) {
    padding-top: var(--header-height);
  }
  body:has(.Header).is-active-menu {
    position: fixed;
    width: 100%;
  }
  body:has(.Header .header-menu[aria-hidden="false"]) > *:not(:has(.Header)):not(.Header):not(.Header *) {
    filter: blur(5px);
  }
  .Header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: var(--header-height);
    background: var(--color_mono_white);
    transition: top var(--transition_default-set), transform var(--transition_default-set);
    transform: translateY(-100%);
  }
  .Header.is-fixed {
    transform: translateY(0);
  }
  .Header::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(9deg, #F9F9F9 6.87%, #D8E0E9 89.59%);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_default-set), visibility var(--transition_default-set);
  }
  .Header:has(.header-menu__megamenu[aria-hidden="false"])::before {
    opacity: 0.9;
    visibility: visible;
  }
  .Header .Header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    gap: 0;
    width: 100%;
    padding-inline: 18px 0;
  }
  .Header .Header__head {
    flex-shrink: 0;
    margin-right: 10px;
  }
  .Header .Header__body {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .Header .Header__body .header-utility,
  .Header .Header__body .header-gnav {
    display: none;
  }
  .Header .Header__foot {
    flex-shrink: 0;
  }
  /* ----- header-logo ----- */
  .header-logo {
    width: min(84px,calc(84 / 390 * 100vw));
  }
  .header-logo > a {
    display: block;
    width: 100%;
  }
  /* ----- header-nav-wrap ----- */
  .header-nav-wrap {
    display: flex;
    align-items: center;
    gap: 0 9px;
  }
  /* ----- header-search ----- */
  .header-search .header-search__trigger {
    position: relative;
    appearance: none;
    display: block;
    width: 36px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    text-indent: -100vw;
    white-space: nowrap;
    overflow: hidden;
  }
  .header-search .header-search__trigger::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic16_01.svg') no-repeat center / contain;
    transform: translate(-50%,-50%);
  }
  .header-search .header-search__megamenu {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: 0;
    padding-inline: 12px 14px;
    background: var(--color_mono_bg_dark);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_default-set), visibility var(--transition_default-set), height calc(var(--transition_duration) / 2) var(--transition_easing);
  }
  .header-search .header-search__megamenu[aria-hidden="false"]{
    height: 80px;
    opacity: 1;
    visibility: visible;
  }
  .header-search .header-search__megamenu__inner {
    position: relative;
    width: 100%;
    padding-block: 20px;
    padding-inline: 0 38px;
  }
  .header-search .header-search__close {
    appearance: none;
    position: absolute;
    top: 50%;
    right: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic07_01.svg') no-repeat center /contain;
    cursor: pointer;
    white-space: nowrap;
    text-indent: -100vw;
    overflow: hidden;
    transform: translateY(-50%);
  }
  .header-search .header-search__form {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .header-search .header-search__set {
    display: flex;
    align-items: stretch;
    border-radius: 4px;
    background: var(--color_mono_white);
    overflow: hidden;
  }
  .header-search .header-search__set:focus-within {
    outline: auto;
    outline-color: var(--color_text_sub);
  }
  .header-search .header-search__input {
    display: block;
    width: 100%;
    height: 40px;
    padding-block: 2px 3px;
    padding-inline: 20px 0;
    color: var(--color_text_main);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  .header-search .header-search__submit {
    appearance: none;
    flex-shrink: 0;
    position: relative;
    display: block;
    width: 48px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    text-indent: -100vw;
    overflow: hidden;
  }
  .header-search .header-search__submit::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: calc(50% + 4px);
    width: 20px;
    height: 20px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic08_01.svg') no-repeat center /contain;
    transform: translate(-50%,-50%);
  }

  /* ----- header-fault ----- */
  .header-fault {
    align-self: flex-start;
    position: relative;
    top: 1px;
    display: flex;
    align-items: baseline;
    gap: 0 8px;
  }
  .header-fault .header-fault__title {
    position: relative;
    padding-left: 24px;
    color: var(--color_text_main);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  .header-fault .header-fault__title::before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 15px;
    height: 15px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic06_01.svg') no-repeat center / contain;
  }
  .header-fault .header-fault__link {
    color: var(--color_text_darkgray);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }
  .header-fault .header-fault__link > a {
    color: var(--color_text_darkgray);
    font-size: 10px;
    font-weight: 400;
    line-height: 2.1;
    letter-spacing: 0.05em;
    vertical-align: 0.1em;
  }
  .header-fault .header-fault__link > a:first-of-type {
    padding-inline: 2px 0;
  }
  .header-fault .header-fault__link > a:last-of-type {
    padding-inline: 0 2px;
  }

  /* ----- header-menu ----- */
  .header-menu .header-menu__trigger {
    appearance: none;
    flex-shrink: 0;
    position: relative;
    display: block;
    width: 41px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    text-indent: -100vw;
    overflow: hidden;
  }
  .header-menu .header-menu__trigger::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 13px;
    height: 14px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic09_01.svg') no-repeat center /contain;
    transform: translateY(-50%)
  }
  .header-menu .header-menu__megamenu {
    position: fixed;
    top: 14px;
    left: 10px;
    width: calc(100% - 20px);
    border-radius: 4px;
    background: var(--color_mono_white);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition_default-set), visibility var(--transition_default-set), left var(--transition_default-set);
  }
  .header-menu .header-menu__megamenu[aria-hidden="false"]{
    opacity: 1;
    visibility: visible;
  }
  .header-menu .header-menu__megamenu__inner {
    position: relative;
    width: 100%;
    padding-block: 34px 28px;
    padding-inline: 22px;
    overflow: hidden;
  }
  .header-menu .header-menu__megamenu__head {
    width: 100%;
  }
  .header-menu .header-menu__logo {
    width: 125px;
  }
  .header-menu .header-menu__logo > a {
    display: block;
    width: 100%;
  }
  .header-menu .header-menu__logo > a > img {
    display: block;
    width: 100%;
  }
  .header-menu .header-menu__megamenu__contents {
    position: relative;
    width: 100%;
    margin: 37px 0 0;
    overflow: hidden;
    transition: height var(--transition_default-set);
  }
  .header-menu .header-menu__megamenu__body,
  .header-menu .header-menu__megamenu__foot {
    position: relative;
    left: 0;
    width: 100%;
    transition: left var(--transition_default-set);
  }
  .header-menu .header-menu__megamenu__contents:has(.js-header-gnav__list.is-active) .header-menu__megamenu__body,
  .header-menu .header-menu__megamenu__contents:has(.js-header-gnav__list.is-active) .header-menu__megamenu__foot {
    left: -100%;
  }
  .header-menu .header-menu__close {
    appearance: none;
    position: absolute;
    top: 15px;
    right: 18px;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic07_01.svg') no-repeat center /contain;
    cursor: pointer;
    white-space: nowrap;
    text-indent: -100vw;
    overflow: hidden;
  }

  /* ----- header-gnav ----- */
  .header-gnav .header-gnav__list {
    margin: 0 !important;
  }
  .header-gnav .header-gnav__list > li {
    border-bottom: 2px solid var(--color_mono_bg_light);
  }
  .header-gnav .header-gnav__list > li > [class*="__type"] {
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: 15px 14px;
    padding-inline: 0 20px;
    border: none;
    background: none;
    color: var(--color_text_main);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .header-gnav .header-gnav__list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 14px;
    height: 14px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic10_01.svg') no-repeat center / contain;
    transform: translateY(-50%);
  }

  /* ----- header-menu-fault ----- */
  .header-menu-fault {
    display: flex;
    justify-content: center;
    padding-block: 19px 16px;
    border-bottom: 2px solid rgb(var(--color_mono_bg_dark--rgb) / 0.6);
  }
  .header-menu-fault .header-menu-fault__list {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    margin: 0 !important;
    padding-left: 45px;
  }
  .header-menu-fault .header-menu-fault__list::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 24px;
    height: 24px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic11_01.svg') no-repeat center /contain;
    transform: translateY(-50%);
  }
  .header-menu-fault .header-menu-fault__list > li {
    width: min(118px, calc((100% - 16px) / 2));
    line-height: 1.4;
  }
  .header-menu-fault .header-menu-fault__list > li > [class*="__type"] {
    color: var(--color_text_darkgray);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
  }
  /* ----- header-utility ----- */
  .header-utility {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 0;
  }
  /* ----- header-contact ----- */
  .header-contact .header-contact__link {
    display: block;
    padding: 7px 14px 6px;
    border-radius: 8px;
    background: var(--color_main_key);
    color: var(--color_mono_white);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.06em;
    transition: background var(--transition_default-set);
  }
  .header-contact .header-contact__link:hover {
    background: var(--color_link_hover);
  }
  /* ----- header-language ----- */
  .header-language .header-language__link {
    display: block;
    padding: 7px 14px 6px;
    border-radius: 8px;
    background: var(--color_mono_bg_light);
    color: var(--color_text_main);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    transition: background var(--transition_default-set), color var(--transition_default-set);
  }
  .header-language .header-language__link:hover {
    background: var(--color_mono_bg_dark);
    color: rgb(var(--color_text_main--rgb) / 0.4);
  }

  /* ----- header-megamenu ----- */
  .header-megamenu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    background: var(--color_mono_white);
    opacity: 1;
    visibility: hidden;
    transition: opacity var(--transition_default-set), visibility var(--transition_default-set), left var(--transition_default-set);
    z-index: 1;
  }
  .header-megamenu[aria-hidden="false"]{
    /* left: 100%; */
    /* opacity: 1; */
    visibility: visible;
  }
  .header-megamenu .header-megamenu__inner{
    padding-block: 20px 40px;
  }
  .header-megamenu .header-megamenu__heading {
    appearance: none;
    position: relative;
    display: inline-block;
    padding: 0;
    padding-left: 34px;
    border: none;
    background: none;
    text-align: left;
  }
  .header-megamenu .header-megamenu__heading::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic10_01.svg') no-repeat center / contain;
    transform: translateY(-50%) scale(-1,1);
  }
  .header-megamenu .header-megamenu__heading__title {
    display: block;
    color: var(--color_text_main);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
  }
  .header-megamenu .header-megamenu__heading__subtitle {
    display: block;
    color: var(--color_text_sub);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
  }
  .header-megamenu .header-megamenu__body {
    margin: 35px 0 0;
  }

  /* ----- header-column ----- */
  .header-column > :first-child {
    margin-top: 0!important;
  }
  .header-column .header-column__item {
    margin-top: 24px;
  }
  .header-column .header-column__item > :first-child {
    margin-top: 0 !important;
  }

  /* ----- header-link-list ----- */
  .header-link-list {
    margin: 20px 0 0 !important;
    padding: 0;
    list-style: none;
  }
  .header-column .header-column__item > .header-link-list:first-child {
    margin-top: -16px;
  }
  .header-link-list > li {
    border-bottom: 2px solid var(--color_mono_bg_light);
  }
  .header-link-list > li > [class*="__type"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-block: 13px 12px;
    padding-inline: 0 20px;
    color: var(--color_text_main);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-align: left;
    transition: color var(--transition_default-set);
  }
  .header-link-list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    transition: filter var(--transition_default-set);
  }
  .header-link-list .header-link-list__type::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic10_01.svg') no-repeat center /contain;
  }
  .header-link-list .header-link-list__type--blank::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic10_01.svg') no-repeat center /contain;
  }

  /* ----- header-inline-link-list ----- */
  .header-inline-link-list {
    display: flex;
    flex-flow: row wrap;
    gap: 1px 0;
    margin: 14px 0 0 !important;
  }
  .header-inline-link-list > li {
    position: relative;
  }
  .header-inline-link-list > li:not(:last-child)::after {
    content: "/";
    margin-inline: .35em;
  }
  .header-inline-link-list > li > [class*="__type"] {
    color: var(--color_text_main);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
    transition: color var(--transition_default-set);
  }

  /* ----- header-card ----- */
  .header-card {
    display: flex;
    flex-flow: row wrap;
    gap: 24px;
    margin: 1em 0 0;
  }
  .header-card > li {
    width: calc((100% - 24px) / 2);
  }
  .header-card > li > [class*="__type"] {
    display: block;
    width: 100%;
  }
  .header-card .header-card__head {
    width: 100%;
  }
  .header-card .header-card__image {
    aspect-ratio: 151 / 100;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  .header-card .header-card__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transition_default-set);
  }
  .header-card .header-card__body {
    position: relative;
    width: 100%;
    margin: 10px 0 0;
    padding-right: 15px;
  }
  .header-card > li > [class*="__type"] .header-card__body::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% + 1px);
    right: 0;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
  }
  .header-card .header-card__type .header-card__body::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_03.svg') no-repeat center / contain;
  }
  .header-card .header-card__type--blank .header-card__body::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_04.svg') no-repeat center / contain;
  }
  .header-card .header-card__title {
    color: var(--color_text_main);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: left;
    transition: color var(--transition_default-set);
  }

  /* ----- header-brand-link ----- */
  .header-brand-link {
    margin: 20px 0 0;
  }
  .header-brand-link .header-brand-link__head {
    text-align: left;
  }
  .header-brand-link .header-brand-link__title {
    position: relative;
    color: var(--color_text_sub);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
  }
  .header-brand-link .header-brand-link__body {
    margin: 13px 0 0;
  }
  .header-brand-link .header-brand-link__list {
    display: flex;
    flex-flow: row wrap;
    gap: 7px;
  }
  .header-brand-link .header-brand-link__list > li {
    display: flex;
    width: calc((100% - 7px * 2) / 3);
  }
  .header-brand-link .header-brand-link__list > li > [class*="__type"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 106 / 70;
    width: 100%;
    border: 1px solid var(--color_mono_bg_light);
    padding-inline: 15px;
    border-radius: 8px;
    background: var(--color_mono_white);
  }
  .header-brand-link .header-brand-link__type--blank::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_02.svg') no-repeat center / contain;
    transition: filter var(--transition_default-set);
  }
  .header-brand-link .header-brand-link__list > li > [class*="__type"] > img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
    transition: opacity var(--transition_default-set);
  }

  /* ----- header-gnav ----- */
  .header-banner {
    margin: 1em 0 0;
  }
  .header-banner > [class*="__type"] {
    position: relative;
    display: block;
    aspect-ratio: 326 / 163;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  .header-banner .header-banner__head {
    display: block;
    width: 100%;
    height: 100%;
  }
  .header-banner .header-banner__image {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform var(--transition_default-set);
  }
  .header-banner .header-banner__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .header-banner .header-banner__body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-block: 30px 17px;
    padding-inline: 20px 60px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%);
    color: var(--color_mono_white);
  }
  .header-banner > [class*="__type"] .header-banner__body::after {
    content: "";
    display: block;
    position: absolute;
    bottom: calc(50% - 15px);
    right: 20px;
    width: 34px;
    height: 22px;
    transform: translateY(50%);
  }
  .header-banner .header-banner__type .header-banner__body::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic01_03.svg') no-repeat center / contain;
  }
  .header-banner .header-banner__type--blank .header-banner__body::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic01_04.svg') no-repeat center / contain;
  }
  .header-banner .header-banner__title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
  }
  .header-banner .header-banner__subtitle {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
  }
}


/*################################################
###### optionNavigationArea
################################################*/
#opnav_bg { display: none; background: #000; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; opacity: .8; z-index: 200; }
#optionNav { display: none; font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;  }

@media screen and (min-width: 960px){
    #opnOpNav,
    .clsOpNav { display: none; }
    #optionNavigationAreaWrap { display: block!important; }
    #optionNavigationArea { overflow-x: auto; overflow-y: hidden; width: 100%; background: #f1f2f6; border-bottom: 2px solid #0e0d6a; display: block!important; }
    #optionNavigationArea nav {  }
    #optionNavigationArea ul { display: flex; justify-content: flex-start; white-space: nowrap; width: max-content; height: 50px; }
    #optionNavigationArea ul li { padding: 0; height: 50px;  line-height: 50px; white-space: nowrap; }
    #optionNavigationArea ul li:first-child { padding: 0; background: #dde0e7; }
    #optionNavigationArea ul li:first-child a { padding: 0 60px; }
    #optionNavigationArea ul li a { display: block; height: 100%; padding: 0 20px; color: #222; text-decoration: none; }
    #optionNavigationArea ul li.cur { background: #0e0d6a; }
    #optionNavigationArea ul li.cur a { color: #fff!important;  }
    #optionNavigationArea ul li.cur a:hover{ color: #fff!important; opacity: .5; }
    #optionNavigationArea ul li:not(.cur) a:hover { background: rgba(255,255,255,1); opacity: .5;}
}

@media screen and (min-width: 0px) and (max-width: 959px) {
    /*
    #opnOpNav { width: 8vw; height: 8vw; border-radius: 4vw; background: #0e0d6a; position: fixed; right: 5vw; top: 3.6vw; z-index: 201; }
    #opnOpNav.mop { display: none; }
    .clsOpNav { width: 8vw; height: 8vw; border-radius: 4vw; background: #fff; position: absolute; right: 5vw; top: 3.6vw; }
    #opnOpNav div,
    .clsOpNav div { position: relative; }
    #opnOpNav div span { display: block; width: 40%;  height: 1px; background: #fff; position: absolute; left: 30%; }
    #opnOpNav div span:first-child { top: 2.3vw; }
    #opnOpNav div span:nth-child(2) { top: 3.8vw; }
    #opnOpNav div span:last-child { top: 5.3vw; }

    .clsOpNav div span { display: block; width: 40%;  height: 2px; background: #0e0d6a; position: absolute; }
    .clsOpNav div span:first-child { transform: rotate(45deg); top: 4vw; left: 2.5vw;}
    .clsOpNav div span:last-child { transform: rotate(-45deg); top: 4vw; left: 2.5vw; }
    */

    #optionNavigationAreaWrap { display: block!important; }
    #optionNavigationArea { overflow-x: auto; overflow-y: hidden; width: 100%; background: #f1f2f6; border-bottom: 2px solid #0e0d6a; display: block!important; }
    #optionNavigationArea nav {  }
    #optionNavigationArea ul { display: flex; justify-content: flex-start; white-space: nowrap; width: max-content; height: 13vw; padding-right: 50%; }
    #optionNavigationArea ul li { padding: 0; height: 13vw;  line-height: 13vw; white-space: nowrap; }
    #optionNavigationArea ul li:first-child { padding: 0; background: #dde0e7; font-size: 3vw; }
    #optionNavigationArea ul li:first-child a { padding: 0 6vw; }
    #optionNavigationArea ul li a { display: block; height: 100%; padding: 0 3vw; color: #222; font-size: 3vw; text-decoration: none!important; }
    #optionNavigationArea ul li.cur { background: #0e0d6a; }
    #optionNavigationArea ul li.cur a { color: #fff!important; text-decoration: none; }
    #optionNavigationArea ul li.cur a:hover{ color: #fff!important; opacity: .5; }
    #optionNavigationArea ul li:not(.cur) a:hover { background: rgba(255,255,255,1); opacity: .5;}

}

#subNavCable,#subNavTel { display:none; }

/*########################################
## FOOTER ################################
########################################*/
  /* ----- Footer ----- */
  .Footer,
  .Footer * {
    font-family: "DM Sans", "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  }
  .Footer {
    z-index: 101;
  }

/* ======================================================
 * PC
====================================================== */
@media print, screen and (min-width: 768px){
  /* ----- Footer ----- */
  .Footer {
    padding-block: 110px 120px;
    padding-inline: var(--content-side--pc);
    border-top: 2px solid var(--color_mono_white);
    background: linear-gradient(225deg, #E7E9F2 22.4%, var(--color_mono_white) 97.14%);
  }
  .Footer .Footer__inner {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
  }
  .Footer .Footer__inner > :first-child {
    margin-top: 0;
  }
  .Footer .Footer__head > :first-child,
  .Footer .Footer__body > :first-child {
    margin-top: 0;
  }
  .Footer .Footer__body {
    position: relative;
    margin: 118px 0 0;
  }
  /* ----- footer-brand-link ----- */
  .footer-brand-link {
    margin: 20px 0 0;
  }
  .footer-brand-link .footer-brand-link__title {
    position: relative;
    color: var(--color_text_sub);
    font-size: 12px;
  }
  .footer-brand-link .footer-brand-link__title::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 7px;
    margin-inline: 10px 0;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ex01_01.svg') no-repeat center / contain;
    vertical-align: 1px;
  }
  .footer-brand-link .footer-brand-link__body {
    margin: 10px 0 0;
  }
  .footer-brand-link .footer-brand-link__body > :first-child {
    margin-top: 0 !important;
  }
  .footer-brand-link .footer-brand-link__list {
    display: flex;
    flex-flow: row wrap;
    gap: 16px;
  }
  .footer-brand-link .footer-brand-link__list > li {
    position: relative;
    display: flex;
    top: 0;
    gap: 16px;
    width: calc((var(--content-width) - var(--content-grid-gap--pc) * 5) / 6);
    opacity: 1;
    transition: top var(--transition_animation-set), opacity var(--transition_animation-set);
  }
  .footer-brand-link .footer-brand-link__list > li:not(.is-show) {
    top: 10px;
    opacity: 0;
  }
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 176 / 117;
    width: 100%;
    padding-inline: 12px;
    border-radius: 8px;
    background: var(--color_mono_white);
  }
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"]::before,
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"]::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    transition: opacity var(--transition_default-set);
  }
  .footer-brand-link .footer-brand-link__type::before {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_01.svg') no-repeat center / contain;
  }
  .footer-brand-link .footer-brand-link__type--blank::before {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_02.svg') no-repeat center / contain;
  }
  .footer-brand-link .footer-brand-link__type::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_01_on.svg') no-repeat center / contain;
    opacity: 0;
  }
  .footer-brand-link .footer-brand-link__type--blank::after {
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_02_on.svg') no-repeat center / contain;
    opacity: 0;
  }
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"] > img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
    transition: opacity var(--transition_default-set);
  }
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"]:hover::before {
    opacity: 0;
  }
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"]:hover::after {
    opacity: 1;
  }
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"]:hover > img {
    opacity: 0.5;
  }
  /* ----- footer-logo ----- */
  .footer-logo {
    margin: 20px 0 0;
  }
  .footer-logo .footer-logo__image {
    display: block;
    width: 165px;
  }
  .footer-logo .footer-logo__image > img {
    max-width: 100%;
    height: auto;
  }
  /* ----- footer-link-column ----- */
  .footer-link-column {
    display: flex;
    flex-flow: row wrap;
    gap: var(--content-grid-gap--pc);
    margin: 73px 0 0;
  }
  .footer-link-column .footer-link-column__item {
    width: calc((100% - var(--content-grid-gap--pc)) / 2);
  }
  .footer-link-column .footer-link-column__item > :first-child {
    margin-top: 0;
  }
  /* ----- footer-link ----- */
  .footer-link {
    display: flex;
    flex-flow: row wrap;
    gap: .785em var(--content-grid-gap--pc);
    margin: 20px 0 0;
  }
  .footer-link .footer-link__item {
    min-width: calc((100% - var(--content-grid-gap--pc) * 2) / 3);
  }
  .footer-link .footer-link__item > :first-child {
    margin-top: 0 !important;
  }
  .footer-link .footer-link__list {
    margin: 1em 0 0 !important;
    padding: 0;
    list-style: none;
  }
  .footer-link .footer-link__list > :first-child {
    margin-top: 0;
  }
  .footer-link .footer-link__list > li {
    position: relative;
    top: 0;
    margin: .785em 0 0;
    opacity: 1;
    transition: top var(--transition_animation-set), opacity var(--transition_animation-set);
  }
  .footer-link .footer-link__list > li:not(.is-show) {
    top: 10px;
    opacity: 0;
  }
  .footer-link .footer-link__list > li > [class*="__type"] {
    color: var(--color_text_main);
    font-size: 15px;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.04em;
    transition: color var(--transition_default-set);
  }
  .footer-link .footer-link__list > li > [class*="__type"]:hover {
    color: var(--color_link_hover);
  }
  /* ----- footer-link-v2 ----- */
  .footer-link-v2 {
    display: flex;
    flex-flow: row wrap;
    gap: 6px var(--content-grid-gap--pc);
    margin: 20px 0 0;
  }
  .footer-link-v2 .footer-link-v2__item {
    min-width: calc((100% - var(--content-grid-gap--pc) * 2) / 3);
  }
  .footer-link-v2 .footer-link-v2__item > :first-child {
    margin-top: 0 !important;
  }
  .footer-link-v2 .footer-link-v2__list {
    margin: 1em 0 0 !important;
    padding: 0;
    list-style: none;
  }
  .footer-link-v2 .footer-link-v2__list > :first-child {
    margin-top: 0;
  }
  .footer-link-v2 .footer-link-v2__list > li {
    position: relative;
    top: 0;
    margin: 6px 0 0;
    opacity: 1;
    transition: top var(--transition_animation-set), opacity var(--transition_animation-set);
  }
  .footer-link-v2 .footer-link-v2__list > li:not(.is-show) {
    top: 10px;
    opacity: 0;
  }
  .footer-link-v2 .footer-link-v2__list > li > [class*="__type"] {
    color: var(--color_text_darkgray);
    font-size: 12px;
    line-height: 1.4;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.04em;
    transition: color var(--transition_default-set);
  }
  .footer-link-v2 .footer-link-v2__list > li > [class*="__type"]:hover {
    color: var(--color_link_hover);
  }
  /* ----- footer-column ----- */
  .footer-column {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-flow: row wrap;
    gap: var(--content-grid-gap--pc);
    margin: 60px 0 0;
  }
  /* ----- footer-sns ----- */
  .footer-sns {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(var(--content-grid-width--pc) * 5 + var(--content-grid-gap--pc) * 4);
    gap: 0 var(--content-grid-gap--pc);
    padding-block: 22px 28px;
    padding-inline: 31px 49px;
    border-radius: 8px;
    background: var(--color_mono_white);
  }
  .footer-sns .footer-sns__title {
    color: var(--color_text_sub);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
  }
  .footer-sns .footer-sns__lead {
    margin-top: 3px;
    color: var(--color_text_darkgray);
    font-size: 12px;
    line-height: 1.5;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.08em;
  }
  .footer-sns .footer-sns__body {
    display: flex;
    justify-content: center;
    padding: 5px 0 0;
    width: calc(22px * 5 + 14px * 4);
  }
  .footer-sns .footer-sns__list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 14px;
    margin: 0 !important;
  }
  .footer-sns .footer-sns__list > li > a {
    display: flex;
    align-items: center;
    width: 22px;
    height: 23px;
  }
  .footer-sns .footer-sns__list > li > a > img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
    filter: brightness(0) saturate(100%) invert(21%) sepia(17%) saturate(238%) hue-rotate(56deg) brightness(94%) contrast(83%);
    transition: filter var(--transition_default-set);
  }
  .footer-sns .footer-sns__list > li > a:hover > img {
    filter: none;
  }
  /* ----- footer-utility ----- */
  .footer-utility {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-flow: row-reverse wrap;
    gap: 10px 36px;
    text-align: right;
  }
  /* ----- footer-pagetop ----- */
  .footer-pagetop {
    position: absolute;
    top: 0;
    right: 0;
  }
  .footer-pagetop .footer-pagetop__link {
    position: relative;
    padding-right: 64px;
    color: var(--color_text_darkgray);
    font-size: 15px;
    line-height: 1.8;
    transition: color var(--transition_default-set);
  }
  .footer-pagetop .footer-pagetop__link::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    right: 0;
    width: 34px;
    height: 22px;
    border-radius: 8px;
    background: var(--color_text_sub);
    transition: background var(--transition_default-set);
  }
  .footer-pagetop .footer-pagetop__link::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    right: 12px;
    width: 10px;
    height: 10px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic04_01.svg') no-repeat center / contain;
  }
  .footer-pagetop .footer-pagetop__label {
    position: relative;
  }
  .footer-pagetop .footer-pagetop__label::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    right: -18px;
    width: 2px;
    height: 12px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ex01_02.svg') no-repeat center / contain;
    transition: filter var(--transition_default-set);
  }
  .footer-pagetop .footer-pagetop__link:hover {
    color: var(--color_link_hover);
  }
  .footer-pagetop .footer-pagetop__link:hover::before {
    background: var(--color_link_hover);
  }
  .footer-pagetop .footer-pagetop__link:hover .footer-pagetop__label::after {
    filter: var(--color_link_hover--filtered);
  }
  /* ----- footer-language ----- */
  .footer-language {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }
  .footer-language .footer-language__link {
    color: var(--color_text_sub);
    transition: color var(--transition_default-set);
  }
  .footer-language .footer-language__link:hover {
    color: var(--color_link_hover);
  }
  /* ----- footer-copyright ----- */
  .footer-copyright {
    line-height: 1;
  }
  .footer-copyright small {
    color: var(--color_text_sub);
    font-size: 12px;
    font-weight: 300;
    line-height: 1;
  }
}

/* ======================================================
 * SP
====================================================== */
@media screen and (max-width: 767px) {
  /* ----- Footer ----- */
  .Footer {
    padding-block: 56px 16vw;
    padding-inline: var(--content-side--sp);
    border-top: 2px solid var(--color_mono_white);
    background: var(--color_mono_bg_light);
  }
  .Footer .Footer__inner {
    width: 100%;
    margin: 0 auto;
  }
  .Footer .Footer__inner > :first-child {
    margin-top: 0;
  }
  .Footer .Footer__body {
    position: relative;
    margin: 64px 0 0;
    padding-bottom: 14px;
  }
  .Footer .Footer__head > :first-child,
  .Footer .Footer__body > :first-child {
    margin-top: 0;
  }
  /* ----- footer-brand-link ----- */
  .footer-brand-link {
    margin: 28px 0 0;
  }
  .footer-brand-link .footer-brand-link__title {
    position: relative;
    color: var(--color_text_sub);
    font-size: 11px;
    font-weight: 500;
  }
  .footer-brand-link .footer-brand-link__title::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 7px;
    margin-inline: 11px 0;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ex01_01.svg') no-repeat center / contain;
  }
  .footer-brand-link .footer-brand-link__body {
    margin: 14px 0 0;
  }
  .footer-brand-link .footer-brand-link__body > :first-child {
    margin-top: 0 !important;
  }
  .footer-brand-link .footer-brand-link__list {
    display: flex;
    flex-flow: row wrap;
    gap: 8px 10px;
  }
  .footer-brand-link .footer-brand-link__list > li {
    position: relative;
    top: 0;
    display: flex;
    width: calc((100% - 10px) / 2);
    opacity: 1;
    transition: top var(--transition_animation-set), opacity var(--transition_animation-set);
  }
  .footer-brand-link .footer-brand-link__list > li:not(.is-show) {
    top: 10px;
    opacity: 0;
  }
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 158 / 105;
    width: 100%;
    padding-inline: 19px;
    border-radius: 8px;
    background: var(--color_mono_white);
  }
  .footer-brand-link .footer-brand-link__type--blank::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic02_02.svg') no-repeat center / contain;
    transition: filter var(--transition_default-set);
  }
  .footer-brand-link .footer-brand-link__list > li > [class*="__type"] > img {
    width: 100%;
    height: 100%;
    max-width: 240px;
    object-fit: scale-down;
    object-position: center;
    transition: opacity var(--transition_default-set);
  }
  /* ----- footer-logo ----- */
  .footer-logo {
    margin: 20px 0 0;
  }
  .footer-logo .footer-logo__image {
    display: block;
    width: 110px;
  }
  .footer-logo .footer-logo__image > img {
    max-width: 100%;
    height: auto;
  }
  /* ----- footer-link-column ----- */
  .footer-link-column {
    display: block;
    margin: 46px 0 0;
  }
  .footer-link-column > :first-child {
    margin-top: 0;
  }
  .footer-link-column .footer-link-column__item {
    width: 100%;
    margin: 36px 0 0;
  }
  .footer-link-column .footer-link-column__item > :first-child {
    margin-top: 0 !important;
  }
  /* ----- footer-link ----- */
  .footer-link {
    display: flex;
    flex-flow: row wrap;
    gap: .785em var(--content-grid-gap--sp);
    margin: 20px 0 0;
  }
  .footer-link .footer-link__item {
    width: calc((100% - var(--content-grid-gap--sp)) / 2);
  }
  .footer-link .footer-link__item > :first-child {
    margin-top: 0 !important;
  }
  .footer-link .footer-link__list {
    margin: 1em 0 0 !important;
    padding: 0;
    list-style: none;
  }
  .footer-link .footer-link__list > :first-child {
    margin-top: 0;
  }
  .footer-link .footer-link__list > li {
    position: relative;
    top: 0;
    margin: .785em 0 0;
    opacity: 1;
    transition: top var(--transition_animation-set), opacity var(--transition_animation-set);
  }
  .footer-link .footer-link__list > li:not(.is-show) {
    top: 10px;
    opacity: 0;
  }
  .footer-link .footer-link__list > li > [class*="__type"] {
    color: var(--color_text_main);
    font-size: 14px;
    font-weight: 500;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.04em;
  }
  /* ----- footer-link-v2 ----- */
  .footer-link-v2 {
    display: flex;
    flex-flow: row wrap;
    gap: 6px var(--content-grid-gap--sp);
    margin: 20px 0 0;
  }
  .footer-link-v2 .footer-link-v2__item {
    width: 100%;
  }
  .footer-link-v2 .footer-link-v2__item > :first-child {
    margin-top: 0 !important;
  }
  .footer-link-v2 .footer-link-v2__list {
    margin: 1em 0 0 !important;
    padding: 0;
    list-style: none;
  }
  .footer-link-v2 .footer-link-v2__list > :first-child {
    margin-top: 0;
  }
  .footer-link-v2 .footer-link-v2__list > li {
    position: relative;
    top: 0;
    margin: 6px 0 0;
    opacity: 1;
    transition: top var(--transition_animation-set), opacity var(--transition_animation-set);
  }
  .footer-link-v2 .footer-link-v2__list > li:not(.is-show) {
    top: 10px;
    opacity: 0;
  }
  .footer-link-v2 .footer-link-v2__list > li > [class*="__type"] {
    color: var(--color_text_darkgray);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.04em;
  }
  /* ----- footer-column ----- */
  .footer-column {
    display: block;
    margin: 40px 0 0;
  }
  /* ----- footer-sns ----- */
  .footer-sns {
    width: 100%;
    padding-block: 25px 29px;
    padding-inline: 20px;
    border-radius: 8px;
    background: var(--color_mono_white);
  }
  .footer-sns .footer-sns__head {
    display: flex;
    align-items: flex-start;
    gap: 0 var(--content-grid-gap--sp);
  }
  .footer-sns .footer-sns__title {
    min-width: 70px;
    color: var(--color_text_sub);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
  }
  .footer-sns .footer-sns__lead {
    padding-top: 5px;
    color: var(--color_text_darkgray);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    font-feature-settings: "palt" 1;
    letter-spacing: 0.08em;
  }
  .footer-sns .footer-sns__body {
    margin: 12px 0 0;
    padding-left: calc(70px + var(--content-grid-gap--sp));
  }
  .footer-sns .footer-sns__list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 18px;
  }
  .footer-sns .footer-sns__list > li > a {
    display: flex;
    align-items: center;
    width: 22px;
    height: 23px;
  }
  .footer-sns .footer-sns__list > li > a > img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
    filter: brightness(0) saturate(100%) invert(21%) sepia(17%) saturate(238%) hue-rotate(56deg) brightness(94%) contrast(83%);
  }
  /* ----- footer-utility ----- */
  .footer-utility {
    margin: 28px 0 0;
  }
  .footer-utility .footer-utility__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--content-grid-gap--sp);
  }
  .footer-utility .footer-utility__body {
    margin: 14px 0 0;
  }
  /* ----- footer-pagetop ----- */
  .footer-pagetop .footer-pagetop__link {
    position: relative;
    padding-right: 51px;
    color: var(--color_text_darkgray);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
    transition: color var(--transition_default-set);
  }
  .footer-pagetop .footer-pagetop__link::before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    right: 0;
    width: 25px;
    height: 16px;
    border-radius: 6px;
    background: var(--color_text_sub);
  }
  .footer-pagetop .footer-pagetop__link::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    right: 9px;
    width: 7px;
    height: 7px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ic04_01.svg') no-repeat center / contain;
  }
  .footer-pagetop .footer-pagetop__label {
    position: relative;
  }
  .footer-pagetop .footer-pagetop__label::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    right: -14px;
    width: 2px;
    height: 12px;
    background: url('/proxy/123456/www.kddi.com/extlib/common/img_new/cmn_ex01_02.svg') no-repeat center / contain;
  }
  /* ----- footer-language ----- */
  .footer-language {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
  }
  .footer-language .footer-language__link {
    color: var(--color_text_sub);
  }
  /* ----- footer-copyright ----- */
  .footer-copyright small {
    color: var(--color_text_sub);
    font-size: 11px;
    font-weight: 300;
    line-height: 1.8;
  }
}


/*########################################
## OTHER ################################
########################################*/
.view-pc { display: block; }
.view-sp { display: none; }

@media screen and (min-width: 0px) and (max-width: 767px) {
.view-sp { display: block; }
.view-pc { display: none; }
}