@charset "UTF-8";
/* CSS Document */

/* =========================================================
  Reset
========================================================= */
/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight: normal;list-style-type:none;}
body {line-height:1}
pre,textarea{overflow:auto}
[hidden],audio:not([controls]),template{display:none}
details,main,summary{display:block}
input[type=number]{width:auto}
input[type=search]{-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
progress{display:inline-block}
small{font-size:75%}
textarea{resize:vertical}
[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
*,::after,::before{box-sizing:inherit;border-style:solid;border-width:0}
*{font-size:inherit;line-height:inherit;margin:0;padding:0}
::after,::before{text-decoration:inherit;vertical-align:inherit}
a{text-decoration:none}
audio,canvas,iframe,img,svg,video{vertical-align:middle}
button,input,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em}
code,kbd,pre,samp{font-family:monospace,monospace}
nav ol,nav ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
::-moz-selection{background-color:#B3D4FC;text-shadow:none}
::selection{background-color:#B3D4FC;text-shadow:none}
@media screen{[hidden~=screen]{display:inherit}
  [hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important}
}

/* =========================================================
  Common
========================================================= */
html {
  font-size: 62.5%;
  height: 100%;
}
body {
  color: #212121;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  max-height: 999999px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  background: #efeff1;
}
body.modalActive {
  overflow: hidden;
}
* {
  box-sizing: border-box;
}
a {
  color: #212121;
  text-decoration: none;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}
a:focus {
  outline: none;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.spOnly {
  display: none;
}
.eTxt {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}
h2,h3,h4,p,span,a,figcaption,dt,dd {
  font-weight: 500;
}
@media only screen and (max-width:749px) {
  body {
    /*background: url(../siteimg/sp.jpg) no-repeat;
    background-size: 100%;
    height: 10000px;*/
  }
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }
  img {
    width: 100%;
  }
}
/* =========================================================
  Header
========================================================= */
.header {
  position: fixed;
  justify-content: space-between;
  display: flex;
  width: 100%;
  height: 90px;
  z-index: 999;
  transition: all .25s ease-in;
}
.header.headerStartHere {
  background: linear-gradient(90deg,  rgba(198,165,122,1) 0%,rgba(198,165,122,1) 46%,rgba(235,224,211,1) 100%);
}
.header.headerAboutJbcc {
  background: linear-gradient(90deg,  rgba(196,197,119,1) 0%,rgba(196,197,119,1) 46%,rgba(237,238,194,1) 100%);
}
.header.headerJobField {
  background: linear-gradient(90deg,  rgba(119,197,139,1) 0%,rgba(119,197,139,1) 46%,rgba(186,241,200,1) 100%);
}
.header.headerJbccStyle {
  background: linear-gradient(90deg,  rgba(119,153,197,1) 0%,rgba(119,153,197,1) 46%,rgba(212,222,236,1) 100%);
}
.header.headerLifeWork {
  background: linear-gradient(90deg,  rgba(101,170,170,1) 0%,rgba(101,170,170,1) 46%,rgba(96,208,208,1) 100%);
}
.header.headerRecruit {
  background: linear-gradient(90deg,  rgba(159,119,165,1) 0%,rgba(159,119,165,1) 46%,rgba(197,119,165,1) 100%);
}
.header .jbLogo {
  max-width: 260px;
  width: 13.6%;
  display: flex;
  align-items: center;
  margin-left: 4.8%;
  position: relative;
  z-index: 3;
}
.header .jbLogo a:hover {
  opacity: 0.6;
}
.header .headerWrap {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  width: calc(100% - 20%);
  padding-right: 2.5%;
}
.header .gNav {
  width: 76%;
}
.header .gNav ul {
  display: flex;
  justify-content: center;
}
.header .gNav li {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 90px;
  max-width: 165px;
  width: 100%;
  color: #fff;
  font-size: 1.2rem;
  font-size: clamp(1rem,0.62vw,1.2rem);
  transition: all .25s ease-in;
}
.header .gNav li::after {
  content: "";
  height: calc(tan(60deg) * 11px / 2);
  width: 16px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  bottom: -8px;
  transition: all .25s ease-in;
}
.header .gNav li:hover,
.header .gNav li:hover::after {
  background: #fff;
}
.header .gNav li.nav01:hover {
  color: #c5a377;
}
.header .gNav li.nav02:hover {
  color: #c5c577;
}
.header .gNav li.nav03:hover {
  color: #77c58b;
}
.header .gNav li.nav04:hover {
  color: #7799c5;
}
.header .gNav li.nav05:hover {
  color: #65aaaa;
}
.header .gNav li.nav06:hover {
  color: #c577a5;
}
.header .gNav li span {
  font-weight: bold;
  font-size: 1.5rem;
  font-size: clamp(1.3rem,0.78vw,1.5rem);
  display: block;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.header .gNav .subNav {
  flex-wrap: wrap;
  position: absolute;
  left: 0;
  top: 90px;
  width: 100%;
  justify-content: center;
  padding: 44px 3% 20px;
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease-in;
  z-index: -1;
}
.header .gNav li:hover .subNav {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.header .gNav .nav01 .subNav {
  background: rgba(197, 163, 119, 0.97);
}
.header .gNav .nav02 .subNav {
  background: rgba(197, 197, 119, 0.97);
}
.header .gNav .nav03 .subNav {
  background: rgba(119, 197, 139, 0.97);
}
.header .gNav .nav04 .subNav {
  background: rgba(119, 153, 197, 0.97);
}
.header .gNav .nav05 .subNav {
  background: rgba(101, 170, 170, 0.97);
}
.header .gNav .nav06 .subNav {
  background: rgba(197, 119, 165, 0.97);
}
.header .gNav .subNav li {
  display: block;
  height: auto;
  max-width: 340px;
  width: 19%;
  color: #212121;
  font-size: 1.4rem;
  font-size: clamp(1.2rem,0.72vw,1.4rem);
  transition: none;
  margin: 0 0.9% 16px;
}
.header .gNav .subNav li figcaption {
  padding: 10px 0 4px;
  position: relative;
  display: inline-block;
}
.header .gNav .subNav li figcaption::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: all .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.header .gNav .subNav li a:hover figcaption::after {
  transform: scale(1, 1);
}
.header .gNav .subNav li:hover {
  background: none;
}
.header .gNav .subNav li::after {
  display: none;
}
.header .entry,
.header .regist {
  max-width: 190px;
  width: 12.8%;
  display: flex;
  align-items: center;
  line-height: 1;
  margin-left: auto;
  position: relative;
  z-index: 3;
  height: 90px;
}
.header .regist {
  margin-left: 1%;
}
.header .entry a,
.header .regist a {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 1.5rem;
  font-size: clamp(1.3rem,0.78vw,1.5rem);
  font-weight: bold;
  color: #fff;
  height: 57px;
  letter-spacing: 2px;
  background: #212121;
  border: 2px solid #212121;
  line-height: 1.2;
}
.header .entry a:hover,
.header .regist a:hover {
  background: #fff;
  color: #212121;
}
.header .menuTrigger {
  max-width: 75px;
  width: 5.1%;
  position: relative;
  cursor: pointer;
  margin-left: 3.2%;
  z-index: 3;
}
.header .menuTrigger span {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #212121;
  transition: all .25s;
}
.header .menuTrigger span:nth-of-type(1) {
  top: 41%;
}
.header .menuTrigger span:nth-of-type(2) {
  top: 49%;
}
.header .menuTrigger span:nth-of-type(3) {
  bottom: 41%;
}
.header.navOpen .menuTrigger span:nth-of-type(1) {
  transform: translateY(6px) rotate(-10deg);
}
.header.navOpen .menuTrigger span:nth-of-type(2) {
  opacity: 0;
}
.header.navOpen .menuTrigger span:nth-of-type(3) {
  transform: translateY(-8px) rotate(10deg);
}
.header .hamburgerNav {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  padding: 0;
  background: rgba(33, 33, 33, 0.97);
  height: 100%;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .5s;
  transform: translateX(100%);
}
.header .hamburgerNav::before {
  content: "";
  width: 100%;
  height: 90px;
  background: rgba(33, 33, 33, 0.97);
  position: sticky;
  display: block;
  left: 0;
  top: 0;
  z-index: 2;
}
.header.navOpen .hamburgerNav {
  transform: translateX(0);
}
.header .hamburgerNav .hamburgerNavWrap {
  padding: 0 3%;
}
.header .hamburgerNav .navWrap {
  max-width: 1200px;
  margin: max(3.5%,90px) auto;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.header .hamburgerNav .navWrap::after {
  content: "";
  width: 29%;
}
.header .hamburgerNav .navWrap dl {
  width: 29%;
  margin-bottom: 4.5%;
}
.header .hamburgerNav .navWrap dl:nth-of-type(1),
.header .hamburgerNav .navWrap dl:nth-of-type(4) {
  width: 33%;
}
.header .hamburgerNav .navWrap dl:nth-of-type(2),
.header .hamburgerNav .navWrap dl:nth-of-type(5) {
  width: 38%;
}
.header .hamburgerNav .navWrap dt {
  font-size: 1.2rem;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 55px;
}
.header .hamburgerNav .navWrap dt::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 140px;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.header .hamburgerNav .navWrap dt::after {
  content: "";
  position: absolute;
  bottom: -0.5px;
  left: 0;
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.header .hamburgerNav .navWrap dt span {
  display: block;
  line-height: 1;
  font-size: 2.6rem;
}
.header .hamburgerNav .navWrap dd li {
  margin-bottom: 18px;
  padding-right: 10%;
}
.header .hamburgerNav .navWrap dd li a {
  color: #fff;
  font-size: 1.5rem;
  font-size: clamp(1.3rem,0.78vw,1.5rem);
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.header .hamburgerNav .navWrap dd li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: all .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.header .hamburgerNav .navWrap dd li a:hover::after {
  transform: scale(1, 1);
}
.header.headerTop.scrollNav {
  background: rgba(33, 33, 33, 0.97);
}
.header.headerTop.scrollNav .entry a,
.header.navOpen .entry a,
.header.headerTop.scrollNav .regist a,
.header.navOpen .regist a {
  background: #fff;
  color: #212121;
  border: 2px solid #fff;
}
.header.headerTop.scrollNav .entry a:hover,
.header.navOpen .entry a:hover,
.header.headerTop.scrollNav .regist a:hover,
.header.navOpen .regist a:hover {
  background: #212121;
  color: #fff;
}
.header.headerTop.scrollNav .menuTrigger span,
.header.navOpen .menuTrigger span {
  background: #fff;
}
.innerHead {
  padding: 90px 0 0;
}
@media only screen and (max-width:1200px) {
  .header .jbLogo {
    width: auto;
  }
  .header .headerWrap {
    width: calc(100% - 260px - 4.8%);
  }
  .header .gNav {
    display: none;
  }
  .header .entry,
  .header .regist {
    width: 35%;
  }
  .header .menuTrigger {
    width: 7%;
  }
}
@media only screen and (max-width:749px) {
  .header {
    height: 55px;
  }
  .header .jbLogo {
    max-width: none;
    width: 120px;
    margin-left: 2.5%;
  }
  .header.headerTop .jbLogo {
    margin-left: 8.7%;
    width: 110px;
  }
  .header .headerWrap {
    width: auto;
    padding-right: 2.5%;
  }
  .header .gNav {
    display: none;
  }
  .header .entry,
  .header .regist {
    max-width: none;
    width: 95px;
    height: auto;
  }
  .header .regist {
    margin-left: 4%;
  }
  .header .entry a,
  .header .regist a {
    font-size: 1rem;
    padding: 6px 0;
    line-height: 1.3;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-height: 42px;
    letter-spacing: 0.5px;
  }
  .header .menuTrigger {
    max-width: none;
    width: 35px;
    margin-left: 4%;
  }
  .header .menuTrigger span:nth-of-type(1) {
    top: 38%;
  }
  .header .menuTrigger span:nth-of-type(3) {
    bottom: 36%;
  }
  .header.navOpen .menuTrigger span:nth-of-type(1) {
    transform: translateY(4px) rotate(-10deg);
  }
  .header.navOpen .menuTrigger span:nth-of-type(2) {
    opacity: 0;
  }
  .header.navOpen .menuTrigger span:nth-of-type(3) {
    transform: translateY(-8px) rotate(10deg);
  }
  .header .hamburgerNav {
    padding: 0;
  }
  .header .hamburgerNav::before {
    height: 55px;
  }
  .header .hamburgerNav .hamburgerNavWrap {
    padding: 0 6%;
  }
  .header .hamburgerNav .navWrap {
    max-width: none;
    margin: 20% auto;
    display: block;
  }
  .header .hamburgerNav .navWrap dl {
    width: 100%;
    margin-bottom: 20%;
  }
  .header .hamburgerNav .navWrap dl:nth-of-type(1),
  .header .hamburgerNav .navWrap dl:nth-of-type(4) {
    width: 100%;
  }
  .header .hamburgerNav .navWrap dl:nth-of-type(2),
  .header .hamburgerNav .navWrap dl:nth-of-type(5) {
    width: 100%;
  }
  .header .hamburgerNav .navWrap dt {
    font-size: 3.2vw;
    padding-bottom: 5.5%;
    margin-bottom: 5.5%;
  }
  .header .hamburgerNav .navWrap dt::before {
    max-width: 37.32vw;
  }
  .header .hamburgerNav .navWrap dt::after {
    width: 5.33vw;
  }
  .header .hamburgerNav .navWrap dt span {
    font-size: 6.92vw;
  }
  .header .hamburgerNav .navWrap dd li {
    margin-bottom: 3%;
    padding-right: 10%;
  }
  .header .hamburgerNav .navWrap dd li a {
    font-size: 4vw;
  }
  .header.scrollNav .jbLogo,
  .header.headerTop.scrollNav .jbLogo {
    margin-left: 2.5%;
  }
  .header.scrollNav .entry,
  .header.scrollNav .regist {
    width: 95px;
  }
  .innerHead {
    padding: 55px 0 0;
  }
}
/* ---------- Common Title ---------- */
.commonTitleWrap {
  background: #fff;
  padding: 0 3%;
}
.commonTitleWrap .titleTxt {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 90px;
}
.commonTitleWrap p {
  font-size: 1.625rem;
  line-height: 1.2;
  margin-right: 28px;
}
.commonTitleWrap p span {
  display: block;
  font-size: 1.385rem;
  line-height: 1;
  letter-spacing: 0.8px;
}
.commonTitleWrap h1 {
  font-weight: bold;
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  letter-spacing: 2px;
}
@media only screen and (max-width:749px) {
  .commonTitleWrap {
    padding: 0 6.5%;
  }
  .commonTitleWrap .titleTxt {
    max-width: none;
    height: 12vw;
  }
  .commonTitleWrap p {
    font-size: 1.86vw;
    line-height: 1.6;
    margin-right: 2vw;
    letter-spacing: 1.4px;
    white-space: nowrap;
  }
  .commonTitleWrap p span {
    font-size: 2.13vw;
    letter-spacing: 0;
  }
  .commonTitleWrap h1 {
    font-size: 3.46vw;
    letter-spacing: 0.5px;
    line-height: 1.2;
  }
}
/* =========================================================
  Icons
========================================================= */
.boxArrow {
  position: relative;
}
.boxArrow::before {
  content: "";
  width: 80px;
  height: 80px;
  width: clamp(60px,4.16vw,80px);
  height: clamp(60px,4.16vw,80px);
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  bottom: 5%;
  right: -6.5%;
}
.boxArrow::after {
  content: "";
  width: 80px;
  height: 80px;
  width: clamp(60px,4.16vw,80px);
  height: clamp(60px,4.16vw,80px);
  position: absolute;
  bottom: 5%;
  right: -6.5%;
  z-index: 3;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2080%2080%22%20style%3D%22enable-background%3Anew%200%200%2080%2080%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%3E%3C%2Fg%3E%3Cg%20id%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2222.5166016%2C45.1291504%2022.5166016%2C44.1291504%2054.9658203%2C44.1291504%2045.9179688%2C35.5983887%2046.6035156%2C34.8708496%2057.4833984%2C45.1281738%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat;
  background-size: contain;
}
.iconArrow::after {
  content: "";
  mask-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2035%2011%22%20style%3D%22enable-background%3Anew%200%200%2035%2011%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%3E%3C%2Fg%3E%3Cg%20id%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2234.9833984%2C10.6289062%200.0166016%2C10.6289062%200.0166016%2C9.6289062%2032.4658203%2C9.6289062%2023.4179688%2C1.0986328%2024.1035156%2C0.3710938%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 35px;
  width: clamp(25px,1.82vw,35px);
  height: 11px;
  position: absolute;
  z-index: 2;
  background: #fff;
}
.circleArrow::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
}
.circleArrow::after {
  content: "";
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%2213.8093262%2C22.2565918%2013.2077637%2C21.4577637%2019.130127%2C17.0002441%2013.2077637%2C12.5422363%2013.8093262%2C11.7434082%2020.7922363%2C16.9997559%20%22%2F%3E%3C%2Fsvg%3E') no-repeat;
  background-size: contain;
  width: 34px;
  height: 34px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 3;
}
.iconBlank::after {
  content: "";
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2013%2010%22%20style%3D%22enable-background%3Anew%200%200%2013%2010%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%3E%3C%2Fg%3E%3Cg%20id%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%3E%20%3Cg%3E%20%3Crect%20x%3D%220.2500601%22%20y%3D%222.7498825%22%20class%3D%22st0%22%20width%3D%2210%22%20height%3D%227%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2212.7499399%2C7.749629%2011.7499399%2C7.749629%2011.7499399%2C1.2501174%202.2499399%2C1.2501174%202.2499399%2C0.2501175%2012.7499399%2C0.2501175%20%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat;
  background-size: contain;
  width: 13px;
  height: 10px;
  display: inline-block;
  margin-left: 8px;
}
.iconWSquare::before {
  content: "";
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2033%2036%22%20style%3D%22enable-background%3Anew%200%200%2033%2036%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23DDDDDD%3B%7D%20.st1%7Bopacity%3A0.702%3Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23AEAEAE%3Benable-background%3Anew%20%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M5.8660002%2C8.8650007H33V36H5.8660002V8.8650007z%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M0%2C0h17v17H0V0z%22%2F%3E%3C%2Fsvg%3E') no-repeat;
  width: 33px;
  height: 36px;
  display: inline-block;
  position: relative;
  margin-right: 30px;
}
@media only screen and (max-width:749px) {
  .iconArrow::after {
    width: 4.66vw;
    height: 1.46vw;
  }
  .circleArrow::before {
    width: 5.93vw;
    height: 5.93vw;
  }
  .circleArrow::after {
    width: 5.93vw;
    height: 5.93vw;
  }
  .iconWSquare::before {
    width: 4.53vw;
    min-width: 4.53vw;
    height: 4.93vw;
    margin-right: 3vw;
    top: 0;
  }
}
/* =========================================================
  Breadcrumb
========================================================= */
.breadcrumb {
  padding: 24px 3%;
  background: #fff;
}
.breadcrumb ul {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
}
.breadcrumb li {
  font-size: 1.4rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  color: #aeaeae;
}
.breadcrumb li::after {
  content: ">";
  display: inline-block;
  color: #212121;
  margin: 0 4px;
}
.breadcrumb li:last-child::after {
  display: none;
}
.breadcrumb li a {
  display: block;
}
@media only screen and (max-width:749px) {
  .breadcrumb {
    padding: 2% 8%;
  }
  .breadcrumb ul {
    max-width: none;
  }
  .breadcrumb li {
    letter-spacing: 0;
    font-size: 2.66vw;
  }
}
/* =========================================================
  Main Contents
========================================================= */
.mainContents {
  display: block;
}
.contentW {
  max-width: 1600px;
  margin: 0 auto;
}
.swiper-controller {
  display: none;
}
.square {
  position: absolute;
  z-index: 2;
}
.square span {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  animation: squareBlock 1.8s ease-in-out infinite alternate-reverse;
}
.hoverImg picture {
  display: block;
  overflow: hidden;
}
.hoverImg img {
  transition: .5s all;
}
.hoverImg:hover img {
  transform:scale(1.1,1.1);
  transition: .5s all;
}
.mainLead {
  padding: 80px 3%;
}
.mainLead h2 {
  text-align: center;
  font-size: 2rem;
  font-size: clamp(1.8rem,1.04vw,2rem);
  line-height: 1.35;
  margin-bottom: 48px;
}
.mainLead h2 span {
  display: block;
  font-size: 8rem;
  font-size: clamp(7rem,4.16vw,8rem);
  letter-spacing: 5px;
}
.mainLead h3 {
  text-align: center;
  font-size: 2.4rem;
  font-size: clamp(2.2rem,1.25vw,2.4rem);
  letter-spacing: 1.2px;
  margin-bottom: 42px;
}
.mainLead p {
  letter-spacing: 1px;
  max-width: 1040px;
  margin: 0 auto;
  font-size: 1.8rem;
  font-size: clamp(1.6rem,0.93vw,1.8rem);
  line-height: 1.35;
}
@keyframes squareBlock {
  0% {
    transform: translateY(-20%);
    opacity: 0.6;
  }
  100% {
    transform: translateY(20%);
    opacity: 1;
  }
}
.nextContents {
  text-align: center;
  padding: 44px 3%;
}
.nextContents h2 {
  font-size: 2rem;
  font-size: clamp(1.6rem,1.04vw,2rem);
  margin-bottom: 32px;
  line-height: 1.75;
}
.nextContents h2 span {
  display: block;
  font-size: 3rem;
  font-size: clamp(2.8rem,1.56vw,3rem);
  font-weight: bold;
}
.nextContents ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.nextContents li {
  line-height: 1.2;
  border-right: 2px solid #212121;
  padding: 0 14px 0 0;
  margin: 0 14px 10px 0;
  text-align: left;
}
.nextContents li:first-child {
  border-left: 2px solid #212121;
  padding-left: 14px;
}
.nextContents li a {
  font-size: 2rem;
  font-size: clamp(1.8rem,1.04vw,2rem);
  font-weight: bold;
}
@media only screen and (max-width:749px) {
  .contentW {
    max-width: none;
  }
  .mainLead {
    padding: 17% 0 19%;
  }
  .mainLead h2 {
    font-size: 2.66vw;
    line-height: 1.5;
    margin-bottom: 8%;
  }
  .mainLead h2 span {
    font-size: 10.66vw;
    letter-spacing: 2px;
  }
  .mainLead h3 {
    font-size: 4.26vw;
    letter-spacing: 1.2px;
    margin: 0 8% 8%;
  }
  .mainLead p {
    max-width: none;
    font-size: 3.2vw;
    line-height: 1.4;
    margin: 0 12%;
  }
  .swiper-controller {
    display: block;
  }
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 28.2%;
    width: 8.66vw;
    height: 25.46vw;
    z-index: 3;
  }
  .swiper-button-prev::before,
  .swiper-button-next::before {
    content: "";
    background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2017%2028%22%20style%3D%22enable-background%3Anew%200%200%2017%2028%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%3E%3C%2Fg%3E%3Cg%20id%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%222.4331055%2C27.5837402%200.3598633%2C25.4157715%2012.2983398%2C14.0002441%200.3598633%2C2.5842285%202.4331055%2C0.4162598%2016.6401367%2C13.9992676%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat;
    background-size: contain;
    width: 2.26vw;
    height: 3.73vw;
  }
  .swiper-button-prev {
    left: -19%;
    transform: scale(-1, 1);
  }
  .swiper-button-next {
    right: -19%;
  }
  .swiper-button-disabled {
    display: none;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    display: none;
  }
  .nextContents {
    padding: 5.5% 6.5%;
  }
  .nextContents h2 {
    font-size: 2.66vw;
    margin-bottom: 8%;
  }
  .nextContents h2 span {
    font-size: 4vw;
  }
  .nextContents ul {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .nextContents li {
    width: 50%;
    line-height: 1.3;
    border-right: 1px solid #212121;
    border-left: 1px solid #212121;
    padding: 0 3vw;
    margin: 0 0 3vw;
    text-align: left;
    display: flex;
    align-items: center;
  }
  .nextContents li:first-child {
    border-left: 1px solid #212121;
    padding-left: 3vw;
  }
  .nextContents li:nth-child(2n) {
    border-left: none;
  }
  .nextContents li a {
    font-size: 3.2vw;
  }
}
/* =========================================================
  Footer
========================================================= */
footer {
  background: #212121;
  padding: 2.3% 2.5%;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  color: #fff;
}
footer .footNav ul {
  display: flex;
}
footer .footNav li {
  border-right: 1px solid #fff;
  margin-right: 32px;
  padding-right: 30px;
}
footer .footNav li:last-child {
  border-right: none;
}
footer .footNav li a {
  color: #fff;
  font-size: 1.3rem;
  display: inline-block;
  padding: 5px 0;
}
footer .footNav li a:hover {
  opacity: 0.6;
}
footer .copy {
  font-size: 1.3rem;
}
@media only screen and (max-width:960px) {
  footer {
    display: block;
  }
  footer ul {
    margin-bottom: 2.5%;
    justify-content: center;
  }
  footer .copy {
    text-align: center;
  }
}
@media only screen and (max-width:749px) {
  footer {
    padding: 6% 2.5%;
    letter-spacing: 0.5px;
  }
  footer .footNav ul {
    display: none;
  }
  footer .copy {
    font-size: 2.66vw;
  }
}
/* =========================================================
  Cookie
========================================================= */
.cookieConsent {
  position: fixed;
  bottom: 0;
  padding: 2.05vw 3%;
  width: 100%;
  background: rgba(33, 33, 33, 0.76);
  visibility: hidden;
  z-index: 999;
}
.cookieConsent.isShow {
  visibility: visible;
}
.cookieWrap {
  max-width: 1040px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  font-size: 1.8rem;
  font-size: clamp(1.5rem,0.93vw,1.8rem);
}
.cookieText {
  line-height: 1.88;
  font-weight: 500;
  color: #fff;
  width: calc(100% - 206px - 3%);
}
.cookieBtn {
  width: 206px;
  display: flex;
  justify-content: space-between;
  margin-left: 3%;
}
.cookieBtn li {
  color: #fff;
  width: 95px;
  font-weight: 500;
  text-align: center;
  padding: 8px 0;
  background: #212121;
  border: 2px solid #212121;
  cursor: pointer;
  transition: all .25s ease-in;
}
.cookieBtn li:hover {
  color: #212121;
  background: #fff;
}
.ccHide1 {
  display: none;
}
.ccHide2 {
  animation: hide .3s linear 0s;
  animation-fill-mode: forwards;
}
@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media only screen and (max-width:749px) {
  .cookieConsent {
    padding: 4vw 14% 3vw;
  }
  .cookieWrap {
    max-width: none;
    display: block;
    font-size: 2.66vw;
  }
  .cookieText {
    width: 100%;
  }
  .cookieBtn {
    width: 100%;
    justify-content: center;
    margin: 2vw 0 0;
  }
  .cookieBtn li {
    width: 12.8vw;
    padding: 0.5vw 0;
    margin: 0 2vw;
  }
}