@charset "UTF-8";

/* =Universal Box-sizing */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/*============================================
  =RESET
=============================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  border-collapse: collapse !important;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse !important;
  border-spacing: 0;
}
caption, th, td {
  font-weight: normal;
  text-align: left;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}
a img {
  border: 0 !important;
}
audio, canvas, video {
  display: inline-block;
  max-width: 100%;
}
video {
  height: auto;
}
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

/*
------------------------------------------
 =BASIC
------------------------------------------
*/
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  display: inline-block;
}
h1, h2, h3, h4, h5 {
  line-height: 1;
}
button, fieldset, form, input, label, legend, select, textarea {
  margin: 0;
  padding: 0;
  font: inherit;
  vertical-align: baseline;
}
input, textarea, select {
  font-size: 16px;
}
input[type="button"],
input[type="text"],
input[type="submit"],
textarea {
  appearance: none;
  border-radius: 0;
}
input[type=text],
input[type=email],
input[type=tel],
textarea,
button,
select {
  display: block;
  outline: none;
  width: 100%;
}
textarea {
  resize: none;
}
input[type=checkbox],
input[type=radio] {
  display: none;
}
button, input[type=button], input[type=submit], label, select {
  cursor: pointer;
}
/* Link Style */
a {
  color: var(--color-black);
  text-decoration: none;
  transition: 0.4s ease;
  outline: 0;
}
a:hover {
  color: #666;
}
a:hover img {
  opacity: .7;
}
@media (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}

/* Utility: Font Size */
.fs-9  { font-size: 9px !important;}
.fs-10 { font-size: 10px !important;}
.fs-11 { font-size: 11px !important;}
.fs-12 { font-size: 12px !important;}
.fs-13 { font-size: 13px !important;}
.fs-14 { font-size: 14px !important;}
.fs-15 { font-size: 15px !important;}
.fs-16 { font-size: 16px !important;}
.fs-18 { font-size: 18px !important;}
.fs-20 { font-size: 20px !important;}
.fs-21 { font-size: 21px !important;}
.fs-24 { font-size: 24px !important;}
.fs-28 { font-size: 28px !important;}
.fs-30 { font-size: 30px !important;}
.fs-36 { font-size: 36px !important;}
.fs-48 { font-size: 48px !important;}
.fs-60 { font-size: 60px !important;}

/* Utility: Spacing  */
.mt05 { margin-top:  5px !important; }
.mt10 { margin-top: 10px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mb05 { margin-bottom:  5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }

/* Grid Layout Format */
.l-grid {
  display: grid;
}
.l-grid.col2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 6rem 4rem;
}
.l-grid.col3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem 4rem;
}
.l-grid.col4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 6rem 4rem;
}
.l-grid.col5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 6rem 2.4rem;
}
.l-grid.col6 {
  grid-template-columns: repeat(6, 1fr);
  gap: 6rem 2.4rem;
}
@media only screen and (max-width: 960px) {
  .l-grid.col2, .l-grid.col3 {
    grid-template-columns: 1fr;
  }
  .l-grid.col3 {
    row-gap: 3.2rem;
  }
  .l-grid.col4, .l-grid.col5, .l-grid.col6 {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem 2.4rem;
  }
}

/* flex Layout Format */
.l-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-row-rev { flex-direction: row-reverse; }
.flex-col-rev { flex-direction: column-reverse; }

.jc-center  { justify-content: center; }
.jc-between { justify-content: space-between; }
.jc-end     { justify-content: flex-end; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.l-flex.col2{
  gap: 4rem;
}
.l-flex.col2 .f-col{
  width: calc((100% - 4rem) / 2);
}
.l-flex.col3{
  gap: 4rem;
}
.l-flex.col3 .f-col{
  width: calc((100% - 8rem) / 3);
}
.l-flex.col4{
  gap: 4rem;
}
.l-flex.col4 .f-col{
  width: calc((100% - 12rem) / 4);
}
@media only screen and (max-width: 960px) {
  .l-flex.col2 .f-col,
  .l-flex.col3 .f-col,
  .l-flex.col4 .f-col{
    width: 100%;
  }
}

/* Font Setting */
.tx-L { text-align: left !important; }
.tx-C { text-align: center !important; }
.tx-R { text-align: right !important; }
.tx-bold { font-weight: 900; }
.tx-justify { text-align: justify !important; }
.tx-caption { font-size: 1.3rem; }
.tx-primary { color: var(--color-primary); }

/* Device View Control */
.viewPC, .viewSP, .viewTBSP, .viewPCTB {
  display: none;
}
@media (min-width: 1024px) {
  .viewPC, .viewPCTB { display: block; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .viewPCTB, .viewTBSP { display: block; }
}
@media (max-width: 767px) {
  .viewSP, .viewTBSP { display: block; }
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
  appearance: none;
  width: 100%;
  border: 1px solid #DEDEDE;
  border-radius: .4rem;
  background-color: #F8F8F8;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  transition:
    border-color .3s,
    box-shadow .3s,
    background-color .3s;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select {
  min-height: 5.4rem;
  padding: 8px 40px 8px 15px;
}

textarea {
  min-height: 20rem;
  padding: 1.6rem;
  resize: vertical;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea {
  cursor: text;
}

select {
  cursor: pointer;
}

/* 入力中・選択中 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: #295BE1;
  background: #fff;
  box-shadow: 0 0 0 .3rem rgba(41, 91, 225, .25);
  outline: none;
}

/* 入力後・選択後 */
input[type="text"].is-filled:not(:disabled),
input[type="email"].is-filled:not(:disabled),
input[type="tel"].is-filled:not(:disabled),
input[type="url"].is-filled:not(:disabled),
input[type="number"].is-filled:not(:disabled),
textarea.is-filled:not(:disabled),
select.is-filled:not(:disabled) {
  border-color: #C2D3FF;
  background: #E9F4FF;
}

/* 入力後でもfocus中はfocusを優先 */
input[type="text"].is-filled:focus,
input[type="email"].is-filled:focus,
input[type="tel"].is-filled:focus,
input[type="url"].is-filled:focus,
input[type="number"].is-filled:focus,
textarea.is-filled:focus,
select.is-filled:focus {
  border-color: #295BE1;
  background: #fff;
  box-shadow: 0 0 0 .3rem rgba(43, 101, 246, .18);
}

/*
------------------------------------------
 =Animaton
------------------------------------------
*/
.js-effect {
  opacity: 0;
  will-change: opacity, transform;
  transition: all 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.fadeIn      { transform: none; }
.fadeInUp    { transform: translateY(40px); }
.fadeInDown  { transform: translateY(-40px); }
.slideLeft   { transform: translateX(-50px); }
.slideRight  { transform: translateX(50px); }
.zoomIn      { transform: scale(0.9); }
.zoomInDown  { transform: scale(1.2) translateY(-60px); }
.zoomInUp    { transform: scale(1.2) translateY(60px); }
.blur        { filter: blur(10px); transform: scale(1.05); }

.bounceInUp    {
  transform: translateY(100px); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bounceInDown  {
  transform: translateY(-100px); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bounceInLeft  {
  transform: translateX(-100px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bounceInRight {
  transform: translateX(100px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rubberBand {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  60% { transform: scaleX(1.15) scaleY(0.85); }
  100% { transform: scale(1); }
}
@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
.js-effect.is-show.bounceIn   {
  animation: bounceIn 0.8s both;
}
.js-effect.is-show.rubberBand {
  animation: rubberBand 0.8s both;
  opacity: 1;
}
.js-effect.is-show.heartBeat  {
  animation: heartBeat 1.3s ease-in-out both;
  opacity: 1;
}
.js-effect.is-show {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  filter: blur(0) !important;
  animation-delay: inherit;
}

/* Delay classes */
.delay-1  { transition-delay: 0.1s !important; animation-delay: 0.1s !important; }
.delay-2  { transition-delay: 0.2s !important; animation-delay: 0.2s !important; }
.delay-3  { transition-delay: 0.3s !important; animation-delay: 0.3s !important; }
.delay-4  { transition-delay: 0.4s !important; animation-delay: 0.4s !important; }
.delay-5  { transition-delay: 0.5s !important; animation-delay: 0.5s !important; }
.delay-6  { transition-delay: 0.6s !important; animation-delay: 0.6s !important; }
.delay-7  { transition-delay: 0.7s !important; animation-delay: 0.7s !important; }
.delay-8  { transition-delay: 0.8s !important; animation-delay: 0.8s !important; }
.delay-9  { transition-delay: 0.9s !important; animation-delay: 0.9s !important; }
.delay-10 { transition-delay: 1.0s !important; animation-delay: 1.0s !important; }
.delay-12 { transition-delay: 1.2s !important; animation-delay: 1.2s !important; }
.delay-14 { transition-delay: 1.4s !important; animation-delay: 1.4s !important; }
.delay-16 { transition-delay: 1.6s !important; animation-delay: 1.6s !important; }
.delay-18 { transition-delay: 1.8s !important; animation-delay: 1.8s !important; }
.delay-20 { transition-delay: 2.0s !important; animation-delay: 2.0s !important; }

/* hover Animation */
.ov-action-item-non .ov-action-item_ttl span,
.ov-action-item .ov-action-item_ttl span {
  background-image: linear-gradient(#222, #222);
  background-repeat: no-repeat;
  transition: background-size 0.6s cubic-bezier(0.17, 0.935, 0.305, 1);
}
.ov-action-item-non .ov-action-item_ttl span {
  background-position: 100% 100%;
  background-size: 0% 1px;
}
.ov-action-item-non:hover .ov-action-item_ttl span {
  background-position: 0% 100%;
  background-size: 100% 1px;
}
.ov-action-item .ov-action-item_ttl span {
  background-position: 0% 100%;
  background-size: 100% 1px;
}
.ov-action-item:hover .ov-action-item_ttl span {
  background-position: 100% 100%;
  background-size: 0% 1px;
}
.ov-action-item-non .ov-action-item__thumb img,
.ov-action-item .ov-action-item__thumb img {
  transition: transform 0.4s cubic-bezier(0.17, 0.935, 0.305, 1);
}
.ov-action-item-non:hover .ov-action-item__thumb img,
.ov-action-item:hover .ov-action-item__thumb img {
  transform: scale(1.1);
  opacity: .8;
}


/*
------------------------------------------
 =WORDPRESS
------------------------------------------
*/
body.admin-bar #header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar #header {
        top: 46px;
    }
}


/*=========================================================

  =Global Layout

==========================================================*/
:root {
  --color-blue: #295BE1;
  --color-dark-blue: #0634B1;
  --color-black: #222;
  --bg-light-grey: #F3F6FA;
  --bg-light-blue: #EAF4FF;
  --font-family-en:  "Outfit", sans-serif;
  --border-radius-40: 4rem;
  --border-radius-32: 3.2rem;
  --border-radius-24: 2.4rem;
  --border-radius-16: 1.6rem;
  --border-radius-8: .8rem;
  --border-radius-4: .4rem;
}
html {
  font-family: YakuHanJP,"LINE Seed JP", sans-serif;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "palt" 1, "liga" 1, "calt" 1;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 10px;
  color: var(--color-black);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 10rem;
}
body {
  background: #F3F6FA;
  width: 100%;
  font-size: 1.8rem;
  letter-spacing: .02em;
  line-height: 1.8;
}
@media only screen and (max-width:960px) {
  body {
    font-size: 1.6rem;
  }
}
.grecaptcha-badge { visibility: hidden !important; }


/*============================================

  =COMMON LAYOUT

=============================================*/
/*
------------------------------------------
 =フレームレイアウト
------------------------------------------
*/
#wrapper {
  width: 100%;
  position: relative;
  padding-top: 9rem;
}
.inner {
  max-width: 118rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.wrap {
  padding: 8rem 0 9.6rem;
}
.main-body {
  position: relative;
}
.content-row {
  display: grid;
  gap: 4.8rem;
  grid-template-columns: auto 30rem;
}
.shadow-content{
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.06);
}
@media screen and (max-width:960px) {
  #wrapper {
    padding-top: 6.4rem;
  }
  .wrap {
    padding: 6.4rem 0 8rem;
  }
  .content-row {
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }
}


/*
------------------------------------------
 =ヘッダー
------------------------------------------
*/
#header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  transition: all 0.3s;
  z-index: 10;
  height: 9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-dark-blue);
  padding: 0 2.4rem;
  color: #fff;
}
#header .logo {
  align-items: center;
  display: flex;
  gap: 1.6rem;
}
#header .logo .logo-object {
  height: auto;
  width: 31rem;
}
#header .logo a:hover img{
  opacity: 1;
}
#header .logo .logo-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.22;
  padding: .8rem;
  border: .1rem solid #9BAEE0;
  border-radius: .8rem;
  font-size: 1.2rem;
  font-weight: 700;
}
#header.scroll {
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 0;
  height: 6rem;
}
#header.scroll #gnav-contact .g-nav-btn-link{
  padding:1rem 1.6rem;
}

@media screen and (max-width:960px) {
  #header {
    width: 100%;
    top: 0;
    left: 0;
    height: 6.4rem;
    padding: 0 2.4rem;
    justify-content: center;
  }
  #header .logo {
    flex-direction: column;
    gap: .4rem;
  }
  #header .logo .logo-object {
    width: 18rem;
  }
  #header .logo .logo-info {
    font-size: 1rem;
    padding: .3rem .8rem;
    border-radius: .4rem;
  }
}

/* G-nav */
#g-nav ul {
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
}
#g-nav ul .g-nav-list_item {
  position: relative;
}
#g-nav li a {
  display: block;
  position: relative;
  line-height: 1.44;
}
#gnav-contact {
  margin: 0 0 0 2rem;
}
#gnav-contact .g-nav-btn-link {
  display: block;
  padding: 1.6rem;
  text-align: center;
  border-radius: .8rem;
  background: #fff;
  border: .2rem solid #fff;
  color: var(--color-dark-blue);
  transition:
    transform .1s ease,
    background-color .3s ease-in-out,
    color .3s ease-in-out;
}
#gnav-contact .txt {
  position:relative;
  padding-left:2.8rem;
}
#gnav-contact .txt::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 2rem;
  height: 2rem;
  -webkit-mask-image: url(../img/icon/contact.svg);
  mask-image: url(../img/icon/contact.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: translateY(-50%);
  background-color: var(--color-dark-blue);
}




@media screen and (min-width: 961px) {
  #g-nav,
  #nav-wrap,
  #g-nav ul,
  #g-nav ul .g-nav-list_item {
    height: 100%;
  }
  #g-nav ul {
    align-items: center;
  }
  #g-nav ul .g-nav-list_item {
    padding: 0 1.6rem;
  }
  #g-nav li .g-nav-link {
    color: inherit;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 1;
    padding: 0;
    overflow: visible;
  }
  #g-nav li .g-nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0%;
    width: 100%;
    height: .6rem;
    background: rgba(255, 255, 255, 1);
    transition: .3s ease-in-out;
    transform: scale(1, 0);
    transform-origin: center bottom;
  }
  #g-nav li .g-nav-link:hover::before {
    transform: scale(1, 1);
  }
  #g-nav li.current a {
    opacity: 0.4;
  }
  @media (hover: hover) {
    #gnav-contact .g-nav-btn-link:hover {
      background:none;
      color:#fff;
    }
    #gnav-contact .g-nav-btn-link:hover .txt::after{
      background-color: #fff;
    }
  }
}

@media screen and (max-width:960px) {
  #g-nav {
    padding: 0;
    position: fixed;
    z-index: 999;
    top: -400%;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #F2F4F5;
    transition: all 0.6s;
  }
  #g-nav li a {
    overflow: hidden;
  }
  #g-nav ul {
    display: block;
    width: 100%;
    margin: 8rem auto 2.4rem auto;
  }
  #g-nav ul li {
    font-size: 1.4rem;
    margin: 0;
  }
  #g-nav ul li .g-nav-link {
    padding: 2.4rem 2rem;
    color: #222;
  }
  #g-nav .g-nav-list {
    position: relative;
  }
  #g-nav .g-nav-list::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), 1px, transparent 1px, transparent 3px);
    background-size: 3px 1px;
    background-repeat: repeat-x;
  }
  #g-nav .g-nav-list .g-nav-list_item::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), 1px, transparent 1px, transparent 3px);
    background-size: 3px 1px;
    background-repeat: repeat-x;
  }
  #g-nav .g-nav-list .g-nav-list_item.active {
    border-bottom: none;
  }
  #g-nav li .g-nav-link:hover {
    background-color: #ddd;
  }
  #gnav-contact .g-nav-btn-link {
    width: 72%;
    margin: 3rem auto 0;
    padding: 2.8rem 2rem !important;
    background: var(--color-dark-blue);
    border: .2rem solid var(--color-dark-blue);
    color: #fff;
    transition: transform 0.1s ease;
  }
  #gnav-contact .txt::after {
    background-color: #fff;
  }
  @media (hover: none) {
   #gnav-contact .g-nav-btn-link:active{
      transform: scale(.95);
      color: #fff;
    }
  }
}


@media screen and (max-width:960px) {
  #g-nav.panelactive {
    top: 0;
  }
  #g-nav.panelactive #nav-wrap {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100dvh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* G-nav-openbtn */
.g-nav-openbtn {
  display: none;
}

@media screen and (max-width:960px) {
  .g-nav-openbtn {
    display: block;
    position: fixed;
    z-index: 9999;
    top: .6rem;
    right: 1rem;
    cursor: pointer;
    width: 4.8rem;
    height: 4.8rem;
    background: #fff;
    border-radius: 50%;
  }
  .g-nav-openbtn .openbtn-area {
    transition: all .4s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
  }
  .g-nav-openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: calc(50% - 9px);
    height: 2px;
    background: var(--color-blue);
    width: 18px;
    z-index: 9999;
  }
  .g-nav-openbtn span:nth-of-type(1) { top: -6px; }
  .g-nav-openbtn span:nth-of-type(2) { top: 0px; }
  .g-nav-openbtn span:nth-of-type(3) { top: 6px; }

  .g-nav-openbtn.active {
    background: var(--color-blue);
  }
  .g-nav-openbtn.active .openbtn-area {
    transform: rotateY(-360deg);
  }
  .g-nav-openbtn.active span:nth-of-type(1) {
    top: -6px;
    left: -9px;
    transform: translateY(6px) rotate(-135deg);
    width: 18px;
    background: #fff;
  }
  .g-nav-openbtn.active span:nth-of-type(2) {
    opacity: 0;
  }
  .g-nav-openbtn.active span:nth-of-type(3) {
    top: 6px;
    left: -9px;
    transform: translateY(-6px) rotate(135deg);
    width: 18px;
    background: #fff;
  }
}

@media screen and (max-width: 960px) {
  #g-nav,
  .g-nav-openbtn {
    display: none;
  }
}



/*
------------------------------------------
 =フッター
------------------------------------------
*/
#footer{
  background:var(--color-dark-blue);
  border-radius:1.6rem 1.6rem 0 0;
  color:#fff;
  padding:8rem 0 3.2rem;
  margin-top:12rem;
}
#footer .footer-cta{
  display: grid;
  grid-template-columns: 1fr 45rem;
  align-items: center;
  gap: 4rem;
  margin-bottom: 7rem;
}
#footer .footer-cta-heading{
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.4;
  margin-left:8rem;
}
#footer .footer-cta-link{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 0 2rem;
  border-radius: var(--border-radius-8);
  background: #fff;
  border: .2rem solid #fff;
  color: var(--color-dark-blue);
  position: relative;
  transition: background 0.3s, color 0.3s;
}
#footer .footer-cta-link::after {
  position: absolute;
  right: 1rem;
  top: 50%;
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  transform: translateY(-50%);
  transition: transform .2s ease, background-color .3s ease;
  -webkit-mask-image: url(../img/icon/list-arrow.svg);
  mask-image: url(../img/icon/list-arrow.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-dark-blue);
}
#footer .footer-cta-link .txt{
  font-size: 2rem;
  font-weight: 700;
  position: relative;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
#footer .footer-cta-link .txt::before{
  display: block;
  content: "";
  width: 2.8rem;
  height: 2.8rem;
  -webkit-mask-image: url(../img/icon/contact.svg);
  mask-image: url(../img/icon/contact.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--color-dark-blue);
  transition: background-color 0.3s;
}

@media (hover: hover) {
  #footer .footer-cta-link:hover {
    background:none;
    color:#fff;
  }
  #footer .footer-cta-link:hover::after {
    transform: translateY(-50%) translateX(4px);
    background-color: #fff;
  }
  #footer .footer-cta-link:hover .txt::before{
    background-color: #fff;
  }
}
@media (hover: none) {
  #footer .footer-cta-link:active{
    transform: scale(.95);
    transition: transform 0.1s ease;
    color: var(--color-dark-blue);
  }
}

@media only screen and ( max-width:960px) {
  #footer{
    padding:4rem 0 2.4rem;
    margin-top:6.4rem;
  }
  #footer .footer-cta{
    grid-template-columns: 1fr;
    gap:2.4rem;
    margin-bottom: 3.2rem;
  }
  #footer .footer-cta-heading{
    font-size: 2.4rem;
    margin-left:0;
    text-align: center;
  }
  #footer .footer-cta-link {
    min-height: 10rem;
  }
  #footer .footer-cta-link .txt{
    font-size: 1.8rem;
  }
}

.footer-utility {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-utility:not(:has(.footer-nav)) {
  justify-content: center;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.footer-logo .logo-object {
  height: auto;
  width: 31rem;
  display: block;
}
.footer-logo .logo-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.22;
  padding: .8rem;
  border: .1rem solid #9BAEE0;
  border-radius: .8rem;
  font-size: 1.4rem;
  font-weight: 700;
}
.footer-logo a:hover img {
  opacity: 1;
}
.footer-nav-list {
  display: flex;
  gap: 3.2rem;
}
.footer-nav-list a {
  color:#fff;
  font-size: 1.4rem;
  font-weight: 700;
}
.footer-nav-list li a span {
  background-image: linear-gradient(#fff, #fff);
  background-position: 100% 100%;
  background-size: 0% 1px;
  background-repeat: no-repeat;
  transition: background-size 0.6s cubic-bezier(0.170, 0.935, 0.305, 1.000);
}
.footer-nav-list li a:hover span {
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media only screen and ( max-width:960px) {
  .footer-utility {
    padding: 2.4rem 0;
    flex-direction: column;
    align-items: center;
    gap:1.6rem;
  }
  .footer-logo{
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 100%;
  }
  .footer-logo .logo-object {
    width: 24rem;
  }
  .footer-logo .logo-info {
    font-size: 1rem;
    padding: .4rem .8rem;
    border-radius: .4rem;
  }
  .footer-nav-list{
    justify-content: space-between;
    gap: 2.4rem;
    width: 100%;
  }
  .footer-nav-list a {
    font-size: 1.4rem;
    white-space: nowrap;
  }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem 0 2.4rem;
}
.footer-bottom ul {
  align-items: center;
  display: flex;
  gap:3.2rem;
}
.footer-bottom li {
  position: relative;
}
.footer-bottom li a {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 1.4rem;
  transition: .2s ease-in-out;
  position: relative;
  line-height: 1.4;
}
.footer-bottom li a span {
  background-image: linear-gradient(#fff, #fff);
  background-position: 100% 100%;
  background-size: 0% 1px;
  background-repeat: no-repeat;
  transition: background-size 0.6s cubic-bezier(0.170, 0.935, 0.305, 1.000);
}
.footer-bottom li a:hover span {
  background-position: 0% 100%;
  background-size: 100% 1px;
}
.footer-bottom .blanklink a {
  padding-right: 1.8rem;
}
.footer-bottom .blanklink a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  -webkit-mask-image: url(../img/icon/blanklink.svg);
  mask-image: url(../img/icon/blanklink.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #fff;
  transition: transform .2s ease-in-out;
}
.copyright {
  font-size: 1.4rem;
  text-align: right;
}
.footer-bottom-note{
  color: rgba(255, 255, 255, 0.6);
  font-size:1.2rem;
  text-align: center;
}
.footer-bottom-note a{
  color:#fff;
  text-decoration:underline;
  transition: opacity .2s;
}
.footer-bottom-note a:hover{
  text-decoration:none;
  opacity: 0.8;
}
@media only screen and ( max-width:960px) {
  .footer-bottom{
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
  }
  .footer-bottom li a {
    font-size: 1.2rem;
  }
  .copyright{
    font-size: 1.2rem;
    text-align: center;
  }
}


/*
------------------------------------------
 =見出し
------------------------------------------
*/
.section-icon-heading {
  display: grid;
  gap: .8rem;
  grid-template-columns: 4.8rem auto;
  align-items: center;
  margin-bottom:2.4rem;
}
.section-icon-heading .title{
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.35;
}
.border-top-heading{
  padding-top: 2.4rem;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 2.4rem;
  position: relative;
}
.border-top-heading::before,
.border-top-heading::after{
  position: absolute;
  top: 0;
  content: "";
  display: block;
  height: .2rem;
}
.border-top-heading::before {
  left: 0;
  width: 1.8rem;
  background: var(--color-blue);
}
.border-top-heading::after{
  width: calc(100% - 2.2rem);
  right: 0;
  background: #ccc;
}
.border-top-heading.icon-heading .txt{
  position:relative;
  padding-left:3.8rem;
}
.border-top-heading.icon-heading .txt::before {
  content: "";
  display: inline-block;
  width: 2.8rem;
  height: 2.8rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 2;
}
.border-top-heading.icon-heading.cat-title-phone .txt::before{
  background-image: url(../img/icon/category/phone.svg);
}
.border-top-heading.icon-heading.cat-title-utm .txt::before{
  background-image: url(../img/icon/category/utm.svg);
}
.border-top-heading.icon-heading.cat-title-security_switch .txt::before{
  background-image: url(../img/icon/category/security-switch.svg);
}
.border-top-heading.icon-heading.cat-title-server .txt::before{
  background-image: url(../img/icon/category/server.svg);
}
.border-top-heading.icon-heading.cat-title-wifi .txt::before{
  background-image: url(../img/icon/category/wifi.svg);
}
.border-top-heading.icon-heading.cat-title-printer .txt::before{
  background-image: url(../img/icon/category/printer.svg);
}
.border-top-heading.icon-heading.cat-title-ups .txt::before{
  background-image: url(../img/icon/category/ups.svg);
}
.page-header{
  color:#fff;
  position: relative;
  background: linear-gradient(135deg, #1947cc 0%, #1d58de 64%, #2d64df 100%);
  height: 20rem;
}
.page-heading{
  font-size:4.8rem;
  font-weight:700;
  line-height: 1.2;
}
.page-heading.category{
  position:relative;
  padding-left:6.4rem;
}
.page-heading.category::before {
  content: "";
  display: inline-block;
  width: 4.8rem;
  height:4.8rem;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 2;
  background-color: #fff;
}
.page-heading.category.cat-title-phone::before{
  -webkit-mask-image: url(../img/icon/category/phone.svg);
  mask-image: url(../img/icon/category/phone.svg);
}
.page-heading.category.cat-title-utm::before{
  -webkit-mask-image: url(../img/icon/category/utm.svg);
  mask-image: url(../img/icon/category/utm.svg);
}
.page-heading.category.cat-title-security_switch::before{
  -webkit-mask-image: url(../img/icon/category/security-switch.svg);
  mask-image: url(../img/icon/category/security-switch.svg);
}
.page-heading.category.cat-title-server::before{
  -webkit-mask-image: url(../img/icon/category/server.svg);
  mask-image: url(../img/icon/category/server.svg);
}
.page-heading.category.cat-title-wifi::before{
  -webkit-mask-image: url(../img/icon/category/wifi.svg);
  mask-image: url(../img/icon/category/wifi.svg);
}
.page-heading.category.cat-title-printer::before{
  -webkit-mask-image: url(../img/icon/category/printer.svg);
  mask-image: url(../img/icon/category/printer.svg);
}
.page-heading.category.cat-title-ups::before{
  -webkit-mask-image: url(../img/icon/category/ups.svg);
  mask-image: url(../img/icon/category/ups.svg);
}
.page-heading.contact{
  text-align: center;
}
.page-heading.contact-thanks{
  text-align: center;
  /* padding-top:4rem; */
}

@media screen and (max-width:960px) {
  .section-icon-heading {
    gap: .8rem;
    grid-template-columns: 4rem auto;
    margin-bottom:1.6rem;
  }
  .section-icon-heading .title{
    font-size: 2.8rem;
  }
  .border-top-heading {
    padding-top: 2rem;
    font-size: 2.4rem;
  }
  .border-top-heading.icon-heading .txt{
    padding-left:2.8rem;
  }
  .border-top-heading.icon-heading .txt::before {
    width: 2rem;
    height: 2rem;
  }
  .page-header{
    height: 16rem;
  }
  .page-heading{
    font-size:2.8rem;
  }
  .page-heading.category{
    padding-left:2.8rem;
  }
  .page-heading.category::before {
    width: 2rem;
    height:2rem;
  }
}


/* パンクズ
---------------------------------*/
.breadcrumb{
  font-size: 1.2rem;
  line-height: 1;
  text-align: left;
  padding:1rem 0 2rem;
  overflow: hidden;
  height:4rem ;
}
.breadcrumb-list{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}
.breadcrumb-list li {
  position: relative;
  padding-left: 2.4rem;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.breadcrumb-list li:first-child {
  padding-left: 0;
}
.breadcrumb-list li:nth-child(1),
.breadcrumb-list li:nth-child(2) {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.breadcrumb-list li a{
  color:inherit;
}
.breadcrumb-list li:not(:has(a)) {
  opacity: .7;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.breadcrumb-list li:nth-child(n+2):before {
  border-right: .1rem solid #fff;
  border-top: .1rem solid #fff;
  content: " ";
  display: inline-block;
  height: .5rem;
  padding-left: 0;
  position: absolute;
  left: .8rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
  width: .5rem;
}
.breadcrumb-list li a span{
  background-image: linear-gradient(#fff, #fff);
  background-position: 100% 100%;
  background-size: 0% 1px;
  background-repeat: no-repeat;
  transition: background-size 0.6s cubic-bezier(0.170, 0.935, 0.305, 1.000);
}
.breadcrumb-list li a:hover span{
  background-position: 0% 100%;
  background-size: 100% 1px;
}
@media only screen and ( max-width:960px) {
  .breadcrumb{
    padding:1rem 0 1.6rem;
  }
}


/* Link btn
---------------------------------*/
.link-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 60px;
  border: .2rem solid var(--color-blue);
  color: var(--color-blue);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .02em;
  min-width: 28rem;
  padding: 2rem 3.2rem;
  text-align: center;
  z-index: 1;
  box-shadow: 0 .4rem .8rem rgba(0, 0, 0, .2);
  transition:background-color .3s ease-in-out,color .3s ease-in-out,box-shadow .3s ease-in-out;
}
.link-btn .txt {
  position: relative;
  display: inline-block;
}
.link-btn .next-arrow{
  padding-right: 2.4rem;
}
.link-btn .next-arrow::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  width: 1.8rem;
  height: 1.8rem;
  -webkit-mask-image: url(../img/icon/circle-next.svg);
  mask-image: url(../img/icon/circle-next.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: translateY(-50%);
  background-color: currentColor;
  opacity: 1;
}
.link-btn .prev-arrow{
  padding-left: 2.4rem;
}
.link-btn .prev-arrow::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 1.8rem;
  height: 1.8rem;
  -webkit-mask-image: url(../img/icon/circle-prev.svg);
  mask-image: url(../img/icon/circle-prev.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transform: translateY(-50%);
  background-color: currentColor;
  opacity: 1;
}

@media screen and (max-width: 960px) {
  .link-btn {
    padding: 1.8rem 2rem;
  }
}
@media (hover: hover) {
  .link-btn:hover {
    background-color: var(--color-blue);
    color: #fff;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  .link-btn:hover .next-arrow::after {
    animation: arrow-slide-next .4s forwards ease-in-out;
  }
  .link-btn:hover .prev-arrow::after {
    animation: arrow-slide-prev .4s forwards ease-in-out;
  }
}
@keyframes arrow-slide-next {
  0% {
    transform: translateY(-50%) translateX(0);
    background-color: currentColor;
    opacity: 1;
  }
  49% {
    transform: translateY(-50%) translateX(120%);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) translateX(-120%);
    background-color: #fff;
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) translateX(0);
    background-color: #fff;
    opacity: 1;
  }
}
@keyframes arrow-slide-prev {
  0% {
    transform: translateY(-50%) translateX(0);
    background-color: currentColor;
    opacity: 1;
  }
  49% {
    transform: translateY(-50%) translateX(-120%);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) translateX(120%);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) translateX(0);
    background-color: currentColor;
    opacity: 1;
  }
}



@media (hover: none) {
  .link-btn:active{
    transform: scale(.95);
    color: var(--color-blue);
    transition: transform 0.1s ease;
  }
}

.c-btn {
  text-align: center;
  margin-top: 4.8rem;
}
@media screen and (max-width: 960px) {
  .c-btn {
    margin-top: 3.2rem;
  }
}


/* トラブルリスト
---------------------------------*/
.trouble-content{
  background: #fff;
  border-radius:var(--border-radius-16);
  padding:4rem 4rem 4.8rem;
}
.trouble-list{
  display: grid;
  gap: 1.6rem;
}
.trouble-list .item a{
  background: var(--bg-light-blue);
  border-radius: var(--border-radius-8);
  border: .2rem solid transparent;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 2rem;
  font-weight:700;
  line-height: 1.2;
  padding: 1.6rem 4.6rem 1.6rem 1.6rem;
  position: relative;
}
.trouble-list .item a::before {
  content: "Q";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  font-size: 2.2rem;
  font-family: var(--font-family-en);
  font-weight:700;
  line-height: 1;
}
.trouble-list .item a::after {
  position: absolute;
  right: 1.6rem;
  top: 50%;
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  background: url(../img/icon/list-arrow.svg) center / cover;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
@media only screen and ( max-width:960px) {
  .trouble-content{
    padding:2rem 2rem 3.2rem;
  }
  .trouble-list{
    gap: 1rem;
  }
  .trouble-list .item a{
    font-size: 1.6rem;
    padding: 1.6rem 2.8rem 1.6rem 1.2rem;
    gap: .6rem;
  }
  .trouble-list .item a::before {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.6rem;
  }
  .trouble-list .item a::after {
    right: 1rem;
    width: 1rem;
    height: 1rem;
  }
}

@media (hover: hover) {
  .trouble-list .item a:hover,
  .trouble-list .item a:focus-visible {
    border:.2rem solid var(--color-blue);
  }
  .trouble-list .item a:hover::after,
  .trouble-list .item a:focus-visible::after {
    transform: translateY(-50%) translateX(3px);
  }
}
@media (hover: none) {
  .trouble-list .item a:active{
    transform: scale(.95);
    border:.2rem solid var(--color-blue);
    transition: transform 0.1s ease;
  }
}