@charset "UTF-8";

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

  全体レイアウト

================================================================
*/
#wrapper {
  position: relative;
  max-width: 2000px;
  min-width: 1300px;
  margin: 0 auto;}
.inner {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;}
#container {
  position: relative;
  min-height: 100vh;}
.pcn {
  display: none;}
.spn {
  display: inline-block;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#wrapper {
  max-width: 100%;
  min-width: 100%;}
.inner {
  width: 100%;}
.pcn {
  display: inline-block;}
.spn {
  display: none;}}

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

  ヘッダー構成

================================================================
*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1200px;
  height: 80px;
  padding: 0 110px 0 50px;
  z-index: 10;}
#header .flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;}
#header .flex .logo a {
  color: #fff;
}
#header .flex .logo a img {
  width: 200px;
  height: auto;
  transition: .3s;}
#header .flex .logo a img:hover {
  opacity: .8;}
#header .flex .right {
  display: flex;
  align-items: center;}
#header .flex .right ul {
  display: flex;
  font-weight: 600;
  font-size: 14px;}
#header .flex .right ul li + li {
  margin-left: 30px;}
#header .flex .right ul li a {
  display: inline-block;
  color: #fff;
  transition: .3s ease-in-out;}
#header .flex .right ul li a:hover {
  color: var(--color-primary);}
#header.transform .flex .logo {
  display: none;}
#header.transform .flex .right ul {
  display: none;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#header {
  min-width: 100%;
  height: 15vw;
  padding: 0 0 0 6vw;}
#header .flex {
  align-items: flex-end;}
#header .flex .logo a img {
  width: 40vw;}
#header .flex .right ul {
  display: none;}
}


/*

  バーガートリガー

================================================================
*/
#trigger {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background: var(--color-primary);
  border-radius: 0 0 0 10px;
  cursor: pointer;
  transition: .3s;
  z-index: 3;}
#trigger .menu-trigger {
  pointer-events: none;
  position: relative;
  top: -4px;
  width: 30px;
  height: 8px;
  border: none;
  appearance: none;}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .3s;}
.menu-trigger {
  background: none;}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;}
.menu-trigger span:nth-of-type(1) {
  top: 0;}
.menu-trigger span:nth-of-type(2) {
  bottom: 0;}
.menu-trigger.active span:nth-of-type(1) {
  top: -3px;
  transform: translateY(7px) rotate(-35deg);}
.menu-trigger.active span:nth-of-type(2) {
  bottom: -3px;
  transform: translateY(-6px) rotate(35deg);}
#trigger:hover .menu-trigger span:nth-of-type(1) {
  top: -3px;}
#trigger:hover .menu-trigger span:nth-of-type(2) {
  bottom: -3px;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#trigger {
  display: flex;
  width: 15vw;
  height: 15vw;}
#trigger .menu-trigger {
  top: -.5vw;
  width: 6vw;
  height: 2vw}
.menu-trigger.active span:nth-of-type(1) {
  width: 6vw;
  top: 0;
  transform: translateY(.9vw) rotate(-40deg);}
.menu-trigger.active span:nth-of-type(2) {
  width: 6vw;
  bottom: 0;
  transform: translateY(-.9vw) rotate(40deg);}
#trigger:hover .menu-trigger span:nth-of-type(1) {
  top: 0;}
#trigger:hover .menu-trigger span:nth-of-type(2) {
  bottom: 0;}
}

/*

  バーガーメニュー

================================================================
*/
#burger {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  padding: 10px;
  background-color: var(--color-primary);
  z-index: 2;}
#burger .burger-inner {
  width: 100%;
  height: 100%;
  padding: 70px 8% 40px 6%;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);}
#burger .burger-inner .layerbox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;}
#burger .burger-inner .top {
  display: flex;
  justify-content: space-between;}
#burger .burger-inner .top > div {
  width: 45%;
  font-size: 14px;}
#burger .burger-inner .top > div .box {
  display: flex;
  justify-content: space-between;}
#burger .burger-inner .top > div .box > div {
  width: 48%;}
#burger .burger-inner .top > div .box > div .stitle {
  line-height: 1.5;
  font-size: 15px;}
#burger .burger-inner .top > div .box > div .stitle + .stitle {
  margin-top: 10px;}
#burger .burger-inner .top > div .box > div .stitle + ul {
  margin-top: 10px;}
#burger .burger-inner .top > div .box > div ul + .stitle {
  margin-top: 30px;}
#burger .burger-inner .top > div .box > div .stitle a {
  display: block;
  padding: 2px 0;
  color: var(--color-primary);
  transition: .3s;}
#burger .burger-inner .top > div .box > div .stitle a:hover {
  color: var(--color-primary);}
#burger .burger-inner .top > div ul.list01 li {
  line-height: 1.5;}
#burger .burger-inner .top > div ul.list01 li + li {
  margin-top: 10px;}
#burger .burger-inner .top > div ul.list01 li a {
  display: block;
  padding: 2px 0;
  color: #151515;
  transition: .3s;}
#burger .burger-inner .top > div ul.list01 li a:hover {
  color: var(--color-primary);}
#burger .burger-inner .top > div ul li a {
  position: relative;
  padding-left: 20px!important;}
#burger .burger-inner .top > div ul li a:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: #E8E8E8;}
/* ------------------------------------------------------- sp */
@media (max-width: 767px) {
#burger {
  padding: 2vw;}
#burger .burger-inner {
  overflow: auto;
  overscroll-behavior-y: contain;
  height: calc(100dvh - 4vw);
  padding: 10vw 6vw 0;}
#burger .burger-inner .top {
  flex-direction: column;}
#burger .burger-inner .top > div {
  width: 100%;
  font-size: 3.3vw;}
#burger .burger-inner .top > div + div {
  margin-top: 10vw;}
#burger .burger-inner .top > div .title {
  color: var(--color-primary);
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 4vw;
  margin-bottom: 4vw;
  padding-left: 4vw;
  font-weight: 700;
  font-size: 6vw;}
#burger .burger-inner .top > div .title:before {
  width: 1.6vw;
  height: 1.6vw;
  left: 1.5vw;
  margin-top: -2.2vw;}
#burger .burger-inner .top > div .title + ul {
  margin-top: 3.5vw;}
#burger .burger-inner .top > div .box {
  display: block;}
#burger .burger-inner .top > div .box > div {
  width: 100%;}
#burger .burger-inner .top > div .box > div .stitle {
  height: 13vw;
  border-bottom: 1px solid #E8E8E8;
  font-size: 3.6vw;
  line-height: 1.0;}
#burger .burger-inner .top > div .box > div .stitle + .stitle {
  margin-top: 0;}
#burger .burger-inner .top > div .box > div .stitle + ul {
  margin:4vw 0;}
#burger .burger-inner .top > div ul.list01 li + li {
  margin-top: 0;}
#burger .burger-inner .top > div ul.list01 li a {
  padding: 2vw 0;
  font-size: 4.6vw;}
#burger .burger-inner .top > div ul li a {
  padding-left: 4vw!important;}
#burger .burger-inner .top > div ul li a:before {
  width: 2vw;}
#burger .burger-inner .top > div ul.list01 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-bottom: 4vw;}
  #burger .burger-inner .top > div ul.list01 a.pick {
    color: var(--color-primary);
  }
  #burger .banner img {
    border-radius: 8px;
  }
}


/* ------------------------------------------------------- sp */
@media (max-width: 767px) {

}

/*

  フッター

================================================================
*/
#footer {
  padding-bottom: 20px;
  position: relative;
  background: #fff;
}
#footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--grad-primary);
}
#footer .logo {
  margin: 0 auto 2rem;
}
#footer .logo a {
  width: 280px;
  display: block;
  padding: 0 1rem;
  background: #fff;
}
#footer .logo a img {
  margin-top: -3rem;
}
#footer .f-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}
#footer .f-menu li {

}
#footer .f-menu li a {
  color: var(--color-text);
  position: relative;
}
#footer .f-link {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
#footer .f-link li {
}
#footer .f-link li a {
  color: var(--color-text);
  width: 300px;
  padding: 2rem;
  border: 1px solid var(--color-text);
  display: block;
}
#footer .f-sns {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
#footer .f-sns li {
  padding: 0.8rem;
    background: var(--color-contrast);
    border-radius: 50%;
}
#footer .f-sns li a {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}
#footer .f-sns li a img {

}
#footer .f-sns li a img.x {

}
#footer address {
  color: var(--color-text);
  text-align: center;
  font-family: var(--font-en);
  font-size: 12px;}
/* --------------------------------------------------------- sp */
@media (max-width: 767px) {
  #footer {
    padding-bottom: 20px;
    position: relative;
  }
  #footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(10px);
    background: (0,0,0,.4);
  }
  #footer .logo {
    display: block;
    margin: -5vw auto 5vw;
    width: 30vw;
  }
  #footer .f-menu {
  }
  #footer .f-menu li {
  
  }
  #footer .f-menu li a {
  
  }
  #footer .f-link {
  
  }
  #footer .f-link li {
  
  }
  #footer .f-link li a {
  
  }
  #footer .f-sns {
  
  }
  #footer .f-sns li {
  
  }
  #footer .f-sns li a {
  
  }
  #footer .f-sns li a img {
  
  }
  #footer .f-sns li a img.x {
  
  }

#footer address {
  font-size: 2.6vw;
}
}

/*

  CTA

================================================================
*/
/* --------------------------------------------------------- sp */
@media (max-width: 767px) {
}


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

  トップへ戻る

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

#to-top {
  position: fixed;
  bottom: 2rem;
  right: 3rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 15px 1px #ddd;
  width: 80px;
  height: 80px;
  z-index: 5;
  transition: .3s;
}
#to-top p{
  color: #fff;
  white-space: nowrap;
  font-size: 18px;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
}
#to-top::before {
  content: "";
  background: url(../img/common/ksimg.png) center / contain;
  position: absolute;
  top: -30px;
  left: -10px;
  width: 60px;
  height: 80px;
  transition: .3s;
}
#to-top:hover {
  width: 70px;
  height: 75px;
  opacity: .8;
}
#to-top:hover::before {
  top: -100px;
  transition: .5s ease;
}

@media (max-width: 767px) {
#to-top {
  bottom: 3vw;
  right: 3vw;
  width: 18vw;
  height: 18vw;
}
#to-top p{
  font-size: 4vw;
}
#to-top::before {
  top: -10vw;
  left: -2vw;
  width: 14vw;
  height: 20vw;
  background-repeat: no-repeat;
}
#to-top:hover {
  width: 17vw;
  height: 17.5vw;
}
#to-top:hover::before {
  top: -20vw;
}
}

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

  none link

================================================================
*/
.nonelink {
  pointer-events: none;
  opacity: .3;}

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

  サイドバー

================================================================
*/
#sidebar {
  width: calc(30% - 80px);
  margin-right: 80px;
}
#sidebar h2 {
    font-size: 1.2rem;
    margin-bottom: 0;
    background: var(--color-primary);
    border-radius: 6px;
    padding: .8rem 1rem;
    color: #fff;
}
#sidebar h3 {

}
#sidebar div {
}
#sidebar .update {
    line-height: 1.4;
    margin-bottom: 2rem;
    font-size: 14px;
    
}
#sidebar .update li{
    padding: 1rem;
    border-bottom: 1px solid #eee;
}
#sidebar .update li:last-child {
    border-bottom: 1px solid #eee;
}
#sidebar .update li a {
    color: var(--color-text);
}
#sidebar .update li a:hover,
#sidebar .update li a:hover span
 {
    color: var(--color-primary);
    opacity: .8;
    transition: .3s;
}
#sidebar .update li a span {
    display: block;
    font-size: 12px;
    font-family: var(--font-en);
    font-weight: 500;
    color: #777;
    margin-bottom: 0.2rem;
}
#sidebar .archive {
    line-height: 1.4;
    margin: 1rem 0 2rem;
    font-size: 14px;
}
#sidebar .archive li {
    margin-bottom: .4rem;
}
#sidebar .archive li:before a:hover {
    color: var(--color-primary);
    opacity: .8;
    transition: .3s;
}
#sidebar .archive li a {
    color: var(--color-text);
    position: relative;
    padding-left: 1rem;
}
#sidebar .archive li a:before {
    content: "";
    position: absolute;
    width: 0.4rem;
    height: 1px;
    background: #777;
    top: 50%;
    left: 0.4rem;
    transform: translateX(-50%);
}
#sidebar .archive li a:hover {
    color: var(--color-primary);
    opacity: .8;
    transition: .3s;
}
#sidebar .archive li a:hover:before{
    background: var(--color-primary);
    opacity: .8;
    transition: .3s;
}
@media (max-width: 767px) {
#sidebar {
  width: 100%;
  margin-right: 0;
  padding: 10vw 0;
}
}