* {
  letter-spacing:.05rem;
    line-height:1.5
}
html {
  font-size:100%
}
body {
  font-family:"A-OTF-GothicBBBPro-Medium";
    src:url("../fonts/A-OTF-GothicBBBPro-Medium.otf") format("opentype");
    overflow-x:hidden;
    position:relative
}
body.open {
  overflow-y:hidden;
    padding-right:15px
}
body.fade-in {
  opacity:0;
    animation:fadeIn 1s ease-in forwards
}
@keyframes fadeIn {
  to {
    opacity:1
  }

}
a {
  display:block;
    color:#333;
    text-decoration:none;
    transition:.3s all ease-in-out;
    cursor:pointer
}
@media (any-hover: hover) {
  a:hover {
    opacity:.7
  }
}
li {
  list-style:none
}
p {
  color:#333
}
@media (max-width: 768px) {
  p {
    font-size:0.875rem;
  }
}
img {
  max-width:100%;
    vertical-align:bottom;
    image-rendering:-webkit-optimize-contrast
}

/* .wrap{
  max-width:1440px !important;
  margin:0 auto;
}
.list{
  max-width:1440px;
  margin:0 auto;
} */
#header {
  padding:30px 0;
    transition:.3s ease-in-out all;
    position:fixed;
    width:100%;
    z-index:10
}
@media screen and (max-width: 768px) {
  #header {
    width:100vw
  }

}
#header .logo a {
  position:relative
}
#header .logo a img.black {
  position:absolute;
    left:0;
    opacity:0;
    transition:all .3s ease-in-out
}
#header.scroll {
  padding:15px 0;
    background-color:#fff;
    border-bottom:solid #ccc 1px
}
#header.scroll .headerWrap .logo a img.black {
  opacity:1
}
#header.scroll .headerWrap .right .headerNav ul li a {
  color:#333
}
#header.scroll .headerWrap .right .ham span {
  background:#333
}
#header.scroll.open .headerWrap .logo a img.black {
  opacity:0
}
#header.scroll.open .headerWrap .right .headerNav ul li a {
  color:#fff
}
#header.scroll.open .headerWrap .right .ham span {
  background:#fff
}
#header .headerWrap {
  display:block;
    margin:0 auto;
    padding:0 20px;
    max-width:calc(1160px);
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    position:relative;
    z-index:40
}
@media screen and (min-width: 1280px) {
  #header .headerWrap {
    max-width:100%;
        padding-right:130px;
        padding-left:130px
  }

}
@media screen and (max-width: 768px) {
  #header .headerWrap {
    padding:0 15px 0 20px
  }
}
#header .headerWrap .right {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center
}
#header .headerWrap .right .headerNav ul {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between
}
@media screen and (max-width: 1000px) {
  #header .headerWrap .right .headerNav ul {
    display:none
  }

}
#header .headerWrap .right .headerNav ul li a {
  padding:10px 0;
    margin:0 18px;
    font-weight:bold;
    color:#fff;
    letter-spacing:.1rem;
    transition:unset
}
#header .headerWrap .right .headerNav ul li a>span:nth-child(2) {
  display:none
}
#header .headerWrap .right .headerNav .search {
  display:none;
    opacity:0;
    height:0;
    width:0
}
#header .headerWrap .right .ham {
  cursor:pointer;
    height:40px;
    width:40px;
    position:relative;
    margin-left:50px;
    min-width:40px;
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center
}
#header .headerWrap .right .ham span {
  position:absolute;
    height:3px;
    width:20px;
    background:#fff
}
#header .headerWrap .right .ham span:nth-child(1) {
  top:calc(50% - 8px)
}
#header .headerWrap .right .ham span:nth-child(2) {
  top:calc(50%)
}
#header .headerWrap .right .ham span:nth-child(3) {
  top:calc(50% + 8px)
}
#header .mask {
  opacity:0;
    visibility:hidden;
    transition:opacity .5s ease-in-out,visibility .5s ease-in-out;
    background:linear-gradient(to right, #489FB2, #487DB2);
    background-size:cover;
    background-position:center;
    position:fixed;
    height:100vh;
    width:100vw;
    z-index:20;
    top:0
}
#header.open {
  transition:unset;
    overflow-y:scroll
}
#header.open .headerWrap {
  height:100vh;
    position:relative;
    flex-wrap:nowrap;
    align-items:unset
}
#header.open .headerWrap .logo {
  min-width:200px;
    position:relative;
    top:10px
}
#header.open .headerWrap .logo a {
  display:inline-block
}
#header.open .headerWrap .right {
  flex-wrap:nowrap;
    align-items:unset
}
#header.open .headerWrap .right .headerNav {
  position:relative;
    top:calc(20vh - 10px)
}
#header.open .headerWrap .right .headerNav ul {
  justify-content:flex-start
}
#header.open .headerWrap .right .headerNav ul li {
  width:30%
}
#header.open .headerWrap .right .headerNav ul li a {
  padding:0;
    margin:0 0 30px
}
#header.open .headerWrap .right .headerNav ul li a>span:nth-child(1) {
  font-size:2.5rem;
    padding:0;
    letter-spacing:.2rem;
    line-height:1.1
}
#header.open .headerWrap .right .headerNav ul li a>span:nth-child(1) span {
  line-height:1.1;
    transition-delay:.8s
}
#header.open .headerWrap .right .headerNav ul li a>span:nth-child(1) span .letter_creative {
  transition-delay:.01s
}
#header.open .headerWrap .right .headerNav ul li a>span:nth-child(2) {
  font-size:0.875rem;
    display:block;
    margin-top:5px
}
#header.open .headerWrap .right .headerNav ul li a>span:nth-child(2) span {
  transition-delay:.3s
}
#header.open .headerWrap .right .headerNav ul li a>span {
  overflow:hidden;
    display:block
}
#header.open .headerWrap .right .headerNav ul li a>span>span {
  position:relative;
    top:100px;
    transition:cubic-bezier(0.32, 0.88, 0.37, 0.91) top .5s
}
#header.open .headerWrap .right .headerNav ul li a>span>span.active {
  top:0
}
@media screen and (max-width: 1040px) {
  #header.open .headerWrap .right .headerNav ul {
    display:flex;
        flex-wrap:wrap
  }
  #header.open .headerWrap .right .headerNav ul li {
    width:45%
  }
  #header.open .headerWrap .right .headerNav ul .letter_creative {
    transition-delay:.1s;
        display:none
  }

}
#header.open .headerWrap .right .headerNav .search {
  padding:0 0 160px;
    transition:all ease-in-out .5s;
    opacity:0;
    height:auto;
    width:auto;
    cursor:pointer;
    display:inline
}
#header.open .headerWrap .right .headerNav .search.active {
  opacity:1
}
#header.open .headerWrap .right .headerNav .search h3 {
  color:#fff;
    margin-bottom:20px
}
#header.open .headerWrap .right .headerNav .search h3 span span {
  display:block
}
#header.open .headerWrap .right .headerNav .search h3 span span.en {
  font-size:2.5rem
}
#header.open .headerWrap .right .headerNav .search h3 span span.ja {
  font-size:0.875rem
}
#header.open .headerWrap .right .headerNav .search form {
  border:#ccc solid 1px;
    background:#fff;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:space-between
}
#header.open .headerWrap .right .headerNav .search form input {
  padding:10px;
    width:calc(100% - 70px)
}
#header.open .headerWrap .right .headerNav .search form input::placeholder {
  color:#ccc
}
#header.open .headerWrap .right .headerNav .search form button {
  width:70px;
    color:#fff;
    background:#666
}
#header.open .headerWrap .right .ham {
  position:relative;
    top:0px
}
#header.open .headerWrap .right .ham span:nth-child(1) {
  top:50%;
    transform:rotate(-45deg)
}
#header.open .headerWrap .right .ham span:nth-child(2) {
  top:50%;
    width:0
}
#header.open .headerWrap .right .ham span:nth-child(3) {
  top:50%;
    transform:rotate(45deg)
}
@media screen and (max-width: 768px) {
  #header.open .headerWrap {
    flex-direction:column;
        justify-content:flex-start
  }
  #header.open .headerWrap .logo {
    top:7.5px;
        margin-bottom:60px
  }
  #header.open .headerWrap .right {
    flex-direction:column-reverse;
        justify-content:flex-start;
        position:relative
  }
  #header.open .headerWrap .right .headerNav {
    top:unset
  }
  #header.open .headerWrap .right .headerNav ul li {
    margin-right:5px
  }
  #header.open .headerWrap .right .headerNav ul li a {
    margin-bottom:20px
  }
  #header.open .headerWrap .right .headerNav ul li a>span:nth-child(1) {
    font-size:2rem
  }
  #header.open .headerWrap .right .ham {
    position:absolute;
        top:-85px;
        right:0
  }
  #header.open .headerWrap .right .search h3 .en {
    font-size:2rem !important
  }

}
#header.open .mask {
  opacity:1;
    visibility:visible
}
#mv {
  position:relative
}
#mv ul.projects li {
  height:100vh;
    width:100vw;
    position:relative;
    background-size:cover;
    background-position:center
}
#mv ul.projects li .mask {
  position:absolute;
    background:#000;
    opacity:.2;
    height:100%;
    width:100%
}
#mv ul.projects li .mv_title {
  display:block;
    margin:0 auto;
    padding:0 20px;
    max-width:calc(1020px);
    position:relative;
    top:50vh;
    transform:translateY(-50%)
}
@media screen and (min-width: 1280px) {
  #mv ul.projects li .mv_title {
    max-width:100%;
        padding-right:130px;
        padding-left:130px
  }

}
@media screen and (max-width: 1279px) {
  #mv ul.projects li .mv_title {
    top:48vh
  }

}
@media screen and (max-width: 1024px) {
  #mv ul.projects li .mv_title {
    padding-left:30px
  }

}
#mv ul.projects li .mv_title * {
  color:#fff;
    letter-spacing:.1rem
}
#mv ul.projects li .mv_title .cat {
  font-size:0.875rem;
    margin-bottom:10px
}
#mv ul.projects li .mv_title .title {
  font-size:1.75rem;
    font-weight:normal
}
@media screen and (max-width: 768px) {
  #mv ul.projects li .mv_title .title {
    font-size:1.5rem;
        font-weight:bold
  }

}
#mv ul.topics {
  bottom:40px;
    width:100%;
    display:table;
    background:#fff;
    position:relative;
    left:40px;
    bottom:90px;
    z-index:5
}
@media screen and (min-width: 1280px) {
  #mv ul.topics {
    left:120px
  }

}
#mv ul.topics::after {
  content:"";
    width:100vw;
    height:100%;
    background:#fff;
    position:absolute;
    top:50%;
    left:100%;
    transform:translateY(-50%)
}
#mv ul.topics li a {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:flex-start;
    padding:12px 30px 12px 10px
}
#mv ul.topics li a p {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center
}
#mv ul.topics li a p.cat,#mv ul.topics li a p.date {
  font-size:0.6875rem;
    font-weight:bold;
    padding-right:20px;
    border-right:solid 1px #aaa;
    margin-right:20px;
    margin-top:1px;
    letter-spacing:0
}
#mv ul.topics li a p.cat {
  letter-spacing:.05rem
}
#mv ul.topics li a p.title {
  font-size:0.8125rem
}
@media screen and (max-width: 768px) {
  #mv ul.topics {
    display:block;
    padding-left:10px;
    padding-right:10px;
    width:calc(100% - 20px);
    left:0;
    overflow:hidden
  }
  #mv ul.topics li a .cat,#mv ul.topics li a .date {
    padding-right:15px !important;
    margin-right:15px !important
  }
  #mv ul.topics li a .date {
    border-right:none !important
  }
  #mv ul.topics li a .title {
    margin-top:5px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.4;
    max-height:2.8em
  }
}
#mv.single ul.projects li {
  height:600px
}
#mv.single ul.projects li h2.mv_title {
  top:330px
}
#mv.single ul.projects li h2.mv_title .title {
  margin-bottom:20px
}
#mv.single ul.projects li ul.tag {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:flex-start
}
#mv.single ul.projects li ul.tag li {
  height:unset;
    width:unset;
    font-size:0.75rem;
    margin-right:10px
}
#sticky {
  position:fixed;
    right:0;
    top:50%;
    transform:translateY(-50%);
    z-index:6
}
@media screen and (max-width: 768px) {
  #sticky {
    top:unset;
        transform:unset;
        bottom:20px
  }

}
#topPage {
  max-width:100%;
    overflow:hidden
}
#topPage #project {
  margin-bottom:120px
}
#topPage #project .secTitle {
  margin-bottom:80px
}
#topPage #project .secTitle .ja {
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  #topPage #project .secTitle {
    margin-bottom:50px
  }
  #topPage #project .secTitle .ja {
    font-size: 0.875rem;
  }
}
#topPage #project .list {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:20px
}
#topPage #project .list li {
  width:31%;
    margin-bottom:60px
}
#topPage #project .list li .image {
  width:100%;
    height:66.6666666667%;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color: #f0f0f0;
    margin-bottom:20px;
}
#topPage #project .list li .cat {
  color:#487db2;
    font-size:0.625rem;
    padding:2px 10px;
    border:solid 1px #487db2;
    border-radius:50px;
    display:inline-block;
    margin-bottom:20px;
    letter-spacing:0
}
#topPage #project .list li .title {
  font-family:"A-OTF-MidashiGoPro-MB31",sans-serif;
    font-size:1.25rem;
    font-weight:bold;
    letter-spacing:0;
    margin-bottom:10px
}
@media screen and (max-width: 768px) {
  #topPage #project .list li .title {
    font-weight:normal
  }

}
#topPage #project .list li .tag {
  text-align:left
}
#topPage #project .list li .tag a {
  color:#487db2;
    font-size:0.75rem
}
#topPage #project .list li .tag a:not(:last-child) {
  margin-right:5px;
    margin-bottom:5px
}
@media screen and (max-width: 768px) {
  #topPage #project .list li {
    width:48%;
        margin-bottom:40px
  }
  #topPage #project .list li .image,#topPage #project .list li .cat,#topPage #project .list li .title {
    margin-bottom:15px
  }
  #topPage #project .list li .title {
    font-size:1rem;
        margin-bottom:10px
  }

}
#topPage #about {
  position:relative;
    max-height:884px;
    margin-bottom:90px
}
@media screen and (max-width: 768px) {
  #topPage #about {
    margin-bottom:180px
  }

}
#topPage #about>div {
  position:absolute
}
#topPage #about .bg {
  background:linear-gradient(to right, #489FB2, #487DB2);
    width:69.5833333333%;
    max-height:750px;
    right:0;
    top:125px
}
#topPage #about .img {
  width:54.1666666667%;
    max-height:760px;
    overflow:hidden;
    background-image:url(../img/top/about_bg.png);
    background-size:cover;
    background-position:center
}
#topPage #about .about {
  max-width:790px;
    max-height:650px;
    top:40px;
    right:calc(50vw - 490px);
    background:#fff;
    padding:60px 0;
    overflow:hidden;
    position:absolute;
    width:54.1666666667% !important
}
#topPage #about .about.active {
  padding:60px 70px
}
@media screen and (max-width: 1100px) {
  #topPage #about .about.active {
    width:70% !important;
        max-height:480px
  }

}
@media screen and (max-width: 768px) {
  #topPage #about .about.active {
    width:90% !important;
        padding:20px 30px;
        left:5%;
        margin-right:5%
  }
  #topPage #about .about.active .text {
    font-size:1rem;
        margin-bottom:20px
  }

}
@media screen and (max-width: 768px) {
  #topPage #about .about {
    padding:5% 6%
  }

}
#topPage #about .about h3 {
  font-size:2.1875rem;
    margin-bottom:30px
}
#topPage #about .about .text {
  font-size:1.75rem;
    font-weight:bold;
    font-family:"A-OTF-MidashiGoPro-MB31",sans-serif;
    margin-bottom:60px
}
#topPage #about .about .link {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    justify-content:flex-start
}
#topPage #about .about .link a {
  color:#487db2
}
@media (any-hover: hover) {
  #topPage #about .about .link:hover {
    opacity:1
  }
  #topPage #about .about .link a:hover {
    opacity:1 !important
  }
  #topPage #about .about .link a.white:hover {
    opacity:1 !important
  }
}
#topPage #about .about .link .btn {
  margin:0 30px 0 0
}
@media screen and (max-width: 768px) {
  #topPage #about .about .link .btn {
    margin:0 10px 0 0
  }

}
@media (any-hover: hover) {
  #topPage #about .about .link:hover a,#topPage #about .about .link:hover .btn {
    opacity:1
  }
}
@media screen and (max-width: 1100px) {
  #topPage #about .about {
    right:60px
  }
  #topPage #about .about h3 {
    margin-bottom:20px
  }

}
@media screen and (max-width: 1100px)and (max-width: 768px) {
  #topPage #about .about h3 {
    margin-bottom:10px
  }

}
@media screen and (max-width: 1100px) {
  #topPage #about .about .text {
    font-size:1.25rem;
        margin-bottom:40px
  }
  #topPage #about .about .link {
    flex-wrap:nowrap
  }

}
#topPage #news {
  margin-bottom:114px
}
#topPage #news h2 {
  margin-bottom:30px
}
#topPage #news ul.links {
  margin-bottom:60px
}
#topPage #news ul.links li a {
  display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:30px 40px;
    border-bottom:solid 1px #ccc;
    position:relative
}
@media screen and (max-width: 768px) {
  #topPage #news ul.links li a {
    padding:30px 0
  }
  #topPage #news ul.links li a .text {
    margin-right:10px
  }

}
#topPage #news ul.links li a::after {
  content:"";
    position:absolute;
    display:block;
    height:100%;
    width:0;
    background:linear-gradient(to right, #eee, #fff);
    background-size:cover;
    background-position:center;
    z-index:-1;
    left:0;
    bottom:0;
    transition:all ease-in-out .3s
}
@media (any-hover: hover) {
  #topPage #news ul.links li a:hover {
    opacity:1
  }
  #topPage #news ul.links li a:hover::after {
    width:100%
  }
}
#topPage #news ul.links li a .text .info {
  margin-bottom:20px
}
#topPage #news ul.links li a .text .info span {
  font-size:0.75rem
}
#topPage #news ul.links li a .text .info span.cat {
  background:linear-gradient(to right, #489FB2, #487DB2);
    color:#fff;
    padding:2px 5px;
    margin-left:15px
}
#topPage #works {
  margin-bottom:105px
}
#topPage #works h2 {
  margin-bottom:80px
}
#topPage #works .ja {
  font-size: 1rem;
}
@media screen and (max-width: 768px) {
  #topPage #works h2 {
    margin-bottom:40px
  }
  #topPage #works .ja {
    font-size: 0.875rem;
  }
}

#topPage #works ul.links {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:30px
}
#topPage #works ul.links li {
  width:31%
}
@media screen and (max-width: 768px) {
  #topPage #works ul.links li {
    width:48%
  }

}
#topPage #works ul.links li a {
  margin-bottom:32px
}
#topPage #works ul.links li a .img {
  width:100%;
  height:66.6666666667%;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color: #f0f0f0;
  margin-bottom:10px;
  transition:all 1s cubic-bezier(0.3, 1, 0.05, 1)
}
#topPage #works ul.links li a .title {
  font-size:1rem;
  letter-spacing:0;

}
@media screen and (max-width: 768px) {
  #topPage #works ul.links li a .img,
  #topPage #works ul.links li a .title {
    margin-bottom:15px
  }
  #topPage #works ul.links li a .title {
    font-size:0.875rem;
    margin-bottom:10px
  }
}
#topPage #terroir {
  background-size:cover;
    background-position:center;
    height:430px;
    position:relative;
    margin-bottom:20px
}
#topPage #terroir .bg {
  overflow:hidden;
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%
}
#topPage #terroir .bg::after {
  content:"";
    background:rgba(0,0,0,0.4);
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:1
}
#topPage #terroir .bg::before {
  content:"";
    background:linear-gradient(to right, #489FB2, #487DB2);
    width:100%;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    z-index:10;
    transition:all 1.5s cubic-bezier(0.3, 1, 0.05, 1)
}
#topPage #terroir .bg img {
  height:100%;
    width:100%;
    object-fit:cover;
    transform:scale(1.1);
    transition:all 1.5s cubic-bezier(0.3, 1, 0.05, 1)
}
#topPage #terroir.active .bg img {
  transform:scale(1)
}
#topPage #terroir.active .bg::before {
  width:0
}
#topPage #terroir .wrap {
  padding-top:40px;
    position:relative;
    z-index:2;
    height:100%
}
#topPage #terroir .wrap .title {
  font-size:1.75rem;
    color:#fff;
    font-weight:bold;
    font-family:"A-OTF-MidashiGoPro-MB31",sans-serif;
    letter-spacing:.2rem;
    position:relative;
    z-index:2
}
#topPage #terroir .wrap .desc {
  color:#fff;
    font-size:0.9375rem;
    line-height:1.8;
    margin-top:15px;
    max-width:400px;
    position:relative;
    z-index:2
}
#topPage #terroir .wrap .logo {
  display:block;
    margin-bottom:15px
}
#topPage #terroir .wrap .black {
  position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%)
}
@media (any-hover: hover) {
  #topPage #terroir .wrap .black:hover {
    opacity:1
  }
}
#topPage #terroir .mask {
  background-size:cover;
    background-position:center;
    background:rgba(255,255,255,.1882352941);
    backdrop-filter:blur(5px);
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:0;
    transition:all cubic-bezier(0.4, 0, 0.2, 1) .3s
}
@media (any-hover: hover) {
  #topPage #terroir:hover .mask {
    width:100%
  }
}
@media screen and (max-width: 768px) {
  #topPage #terroir .wrap {
    padding-top:40px
  }
  #topPage #terroir .wrap .logo {
    width:140px;
    margin-bottom:12px
  }
  #topPage #terroir .wrap .title {
    font-size:1.375rem
  }
  #topPage #terroir .wrap .desc {
    font-size:0.8125rem;
    line-height:1.7;
    margin-top:10px;
    max-width:100%
  }
  #topPage #terroir .wrap .black {
    bottom:20px
  }
}
#contact {
  padding:120px 0;
    background:linear-gradient(to right, #489FB2, #487DB2)
}
@media screen and (max-width: 768px) {
  #contact {
    padding:80px 0
  }

}
#contact .wrap {
  display:block;
    margin:0 auto;
    padding:0 20px;
    max-width:calc(780px);
    display:flex;
    align-items:center;
    justify-content:space-between
}
@media screen and (min-width: 1280px) {
  #contact .wrap {
    max-width:100%;
        padding-right:130px;
        padding-left:130px
  }

}
#contact .wrap h2 {
  display:block
}
#contact .wrap h2 img {
  margin-bottom:3px
}
#contact .wrap h2 .title {
  color:#fff;
    margin-bottom:10px
}
#contact .wrap .ja {
  font-size:0.875rem;
    line-height:2;
    color:#fff
}
#contact .wrap .btn {
  margin:0
}
@media screen and (max-width: 768px) {
  #contact .wrap {
    flex-direction:column
  }
  #contact .wrap .ja {
    margin-bottom:40px
  }

}
#footer {
  padding:38px 53px
}
@media screen and (min-width: 1280px) {
  #footer {
    padding:38px 0
  }

}
@media screen and (min-width: 1280px) {
  #footer .wrap {
    max-width:100%;
        padding-right:130px;
        padding-left:130px
  }

}
@media screen and (max-width: 768px) {
  #footer {
    padding:38px 0
  }

}
#footer .flex {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:134px
}
@media screen and (max-width: 1024px) {
  #footer .flex {
    margin-bottom:40px
  }

}
#footer .flex .navWrap {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:flex-start
}
@media screen and (min-width: 1280px) {
  #footer .flex .navWrap {
    justify-content:space-between;
        width:35%
  }

}
#footer .flex .navWrap nav {
  margin-right:30px
}
#footer .flex .navWrap nav li a {
  margin-bottom:15px;
    font-size:0.6875rem
}
#footer .flex .navWrap nav.sns .name {
  margin-bottom:15px;
    font-size:0.6875rem
}
#footer .flex .group .name {
  margin-bottom:20px;
    font-size:0.6875rem
}
#footer .flex .group ul {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  max-width:280px
}
#footer .flex .group ul li {
  width:calc(50% - 10px);
  margin-bottom:20px;
  text-align:center
}
#footer .flex .group ul li:nth-child(odd) {
  margin-right:10px
}
#footer .flex .group ul li:nth-child(even) {
  margin-left:10px
}
@media screen and (max-width: 1100px) {
  #footer .flex {
    flex-direction:column
  }
  #footer .flex .logo {
    margin-bottom:40px
  }
  #footer .flex ul {
    margin-bottom:20px
  }
  #footer .flex ul li {
    margin-bottom:0
  }
  #footer .flex .group ul {
    justify-content:flex-start
  }

}
body {
  position:relative
}
.jakarta {
  font-family:"Plus Jakarta Sans",sans-serif
}
.wrap {
  display:block;
    margin:0 auto;
    padding:0 20px;
    max-width:calc(1020px)
}
@media screen and (min-width: 1280px) {
  #topPage .wrap {
    max-width:100%;
        padding-right:130px;
        padding-left:130px
  }

}
.secTitle {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:flex-start;
    align-items:flex-start
}
@media screen and (min-width: 769px) {
  .secTitle .title {
    min-width:340px
  }

}
.secTitle .title span {
  display:block
}
.secTitle .title span.big {
  font-size:2.1875rem;
    letter-spacing:0
}
.secTitle .title span.small {
  font-size:0.8125rem;
    color:#487db2
}
.secTitle .ja {
  font-size:0.875rem;
    line-height:1.8
}
@media screen and (min-width: 769px) {
  .secTitle .ja {
    margin-top:10px
  }

}
.btn {
  background:linear-gradient(to right, #489FB2, #487DB2);
    color:#fff;
    text-align:center;
    font-size:0.875rem;
    position:relative;
    margin:0 auto
}
.btn::after {
  content:"";
    height:7px;
    width:20px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    top:50%;
    transform:skew(40deg) translateY(-50%);
    position:absolute
}
.btn.square {
  max-width:400px;
    padding:20px 0;
    letter-spacing:.1rem;
    border:solid 1px #487db2
}
.btn.square::after {
  right:40px;
    transition:all ease-in-out .3s
}
@media (any-hover: hover) {
  .btn.square:hover {
    opacity:1
  }
}
.btn.square.white {
  border:solid 1px #487db2;
    color:#487db2;
    background:#fff
}
.btn.square.white::after {
  border-right:solid 1px #487db2;
    border-bottom:solid 1px #487db2
}
.btn.circle {
  width:100px;
    height:100px;
    border-radius:100px
}
@media screen and (max-width: 768px) {
  .btn.circle {
    width:70px;
        height:70px
  }

}
.btn.circle::after {
  left:50%;
    transform:translate(-65%, -65%) skew(40deg)
}
.btn.circle.mini {
  transition:all ease-in-out .3s;
    border:solid 1px #487db2;
    width:40px;
    height:40px
}
.btn.circle.mini::after {
  height:5px;
    width:15px
}
.btn.circle.white {
  background:#fff;
    border:solid 1px #487db2
}
.btn.circle.white::after {
  border-right:1px solid #487db2;
    border-bottom:1px solid #487db2
}
.btn.circle.clear {
  background:none;
    border:solid 1px #fff
}
@media (any-hover: hover) {
  .btn.circle.clear:hover {
    background:#fff
  }
  .btn.circle.clear:hover::after {
    border-right:solid 1px #487db2;
      border-bottom:solid 1px #487db2
  }
}
.squareWrap {
  position:relative;
    height:63px;
    max-width:400px;
    margin:0 auto
}
.squareWrap>a {
  width:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    opacity:1;
    transition:opacity .3s ease-in-out
}
.squareWrap>a.white {
  opacity:0
}
@media (any-hover: hover) {
  .squareWrap:hover>a:not(.white) {
    opacity:0
  }
  .squareWrap:hover>a.white {
    opacity:1
  }
}
.circleWrap {
  position:relative;
    height:100px;
    width:100px;
    margin-right:30px
}
@media screen and (max-width: 768px) {
  .circleWrap {
    height:70px;
        width:70px
  }

}
.circleWrap>a {
  position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    opacity:1;
    transition:opacity .3s ease-in-out
}
.circleWrap>a.white {
  opacity:0
}
@media (any-hover: hover) {
  .circleWrap:hover>a:not(.white) {
    opacity:0
  }
  .circleWrap:hover>a.white {
    opacity:1
  }
}
@media screen and (max-width: 768px) {
  .circleWrap {
    margin-right:10px
  }
  .circleWrap+a {
    font-size:14px;
        white-space:nowrap
  }

}
.circleWrap.mini {
  position:relative;
    height:40px;
    width:40px
}
.circleWrap.mini>div {
  position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    transition:opacity .3s ease-in-out
}
.circleWrap.mini>div.white {
  opacity:1
}
.circleWrap.mini>div:not(.white) {
  opacity:0
}
a .right .btn {
  transition:opacity .5s ease-in-out
}
@media (any-hover: hover) {
  a:hover .btn.white {
    opacity:0
  }
  a:hover .btn:not(.white) {
    opacity:1
  }
}
a.black {
  color:#fff;
    background:#000;
    display:table;
    margin:0 auto;
    font-size:0.8125rem;
    padding:16px 25px;
    border-radius:50px;
    white-space:nowrap
}
a.black img {
  margin-bottom:3px;
    margin-left:5px
}
@media screen and (max-width: 768px) {
  a.black {
    padding:16px 35px 16px 25px
  }

}
.open #sticky {
  position:relative;
    right:15px !important
}
#mv {
  cursor:pointer
}
#mv .projects {
  position:relative
}
#mv .projects::before {
  content:"";
    position:absolute;
    background:linear-gradient(to right, #489FB2, #487DB2);
    width:100%;
    height:100%;
    z-index:1;
    transition:all 1.5s cubic-bezier(0.3, 1, 0.05, 1);
    left:0
}
#mv .projects.active::before {
  left:100vw
}
#mv .projects .slick-slide {
  opacity:1 !important;
    overflow:hidden;
    position:relative
}
#mv .projects .slick-slide .image,#mv .projects .slick-slide .image img {
  transition-delay:1.5s
}
#mv .projects .slick-slide .scale {
  transform:scale(1);
    height:100%;
    transition-delay:2s;
    transition:transform 10s cubic-bezier(0.3, 1, 0.05, 1)
}
#mv .projects .slick-slide .image {
  transform:translateX(-100vw);
    overflow:hidden
}
#mv .projects .slick-slide .image img {
  transform:translateX(80vw)
}
#mv .projects .slick-slide.slick-active {
  z-index:2
}
#mv .projects .slick-slide.slick-active .image,#mv .projects .slick-slide.slick-active .image img {
  transition-delay:0s;
    transition-duration:.5s;
    transform:translateX(0%);
    transition:transform 1.5s cubic-bezier(0.3, 1, 0.05, 1)
}
#mv .projects .slick-slide.slick-active .scale {
  transform:scale(1.07);
    transition-delay:2.5s;
    transition:transform 30s cubic-bezier(0.3, 1, 0.05, 1)
}
#mv .projects .slick-slide.slick-active .mask {
  display:inline !important
}
#mv .projects .slick-slide .mask {
  display:none !important
}
#mv .projects .slick-slide .image {
  position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover
}
#mv .projects .slick-slide .image img {
  width:100%;
    height:100%;
    object-fit:cover
}
#mv .projects .slick-slide .cat,#mv .projects .slick-slide .title {
  opacity:0;
    color:rgba(255,255,255,.0039215686);
    transition:all ease-in-out 1s
}
#mv .projects .slick-slide.slick-active .cat,#mv .projects .slick-slide.slick-active .title {
  color:#fff;
    opacity:1;
    transition-delay:0s;
    position:relative;
    display:block;
    width:fit-content
}
#mv .projects .slick-slide.slick-active .cat::before,#mv .projects .slick-slide.slick-active .title::before {
  content:"";
    position:absolute;
    background:linear-gradient(to right, #489FB2, #487DB2);
    height:100%;
    top:0;
    left:0;
    width:0;
    animation-name:whiteLine;
    animation-fill-mode:forwards;
    animation-duration:1s;
    animation-timing-function:ease;
    animation-delay:0s;
    animation-direction:normal
}
@keyframes whiteLine {
  0% {
    width:0;
        left:0;
        right:auto
  }
  50% {
    width:100%;
        left:0;
        right:auto
  }
  50.1% {
    left:auto;
        right:0
  }
  100% {
    width:0;
        left:auto;
        right:0
  }

}
@media (any-hover: hover) {
  #mv .projects .slick-slide a:hover {
    opacity:1
  }
}
#mv.single .projects::before {
  content:none
}
#mv.single .projects li {
  position:relative
}
#mv.single .projects li .image {
  height:100%;
    overflow:hidden
}
#mv.single .projects li .image img {
  object-fit:cover;
    height:100%;
    width:100%
}
#mv.single .projects li .mask {
  top:0;
    height:100%
}
#mv.single .projects li .mv_title {
  position:absolute
}
#mv.single .projects li .mv_title .cat,#mv.single .projects li .mv_title .title {
  opacity:1
}
#mv .topics {
  position:relative;
    padding:0 20px
}
#mv .topics .slick-arrow {
  display:none !important
}
#mv .topics .slick-list {
  max-width:1020px !important
}
#loading {
  width:100vw;
    height:100vh;
    transition:all 1s;
    background:#e0edf4;
    background-size:50%;
    position:fixed;
    top:0;
    left:0;
    z-index:9999
}
.spinner {
  width:100px;
    height:100px;
    margin:200px auto;
    background-color:#fff;
    border-radius:100%;
    animation:sk-scaleout 1s infinite ease-in-out
}
@keyframes sk-scaleout {
  0% {
    transform:scale(0)
  }
  100% {
    transform:scale(1);
        opacity:0
  }

}
.loaded {
  opacity:0;
    visibility:hidden
}
#errorPage .wrap {
  padding:80px 20px
}
#errorPage .wrap h2 {
  margin-bottom:30px
}
#errorPage .wrap p {
  margin-bottom:50px
}
#errorPage .wrap .squareWrap {
  margin:0
}
@media screen and (min-width: 1280px) {
  #errorPage .wrap {
    max-width:100%;
        padding-right:130px;
        padding-left:130px
  }

}
@media screen and (max-width: 768px) {
  #errorPage .wrap {
    padding:20px
  }
  #errorPage .wrap h2 {
    margin-bottom:30px;
        font-size:1.25rem
  }
  #errorPage .wrap p {
    margin-bottom:30px
  }
  #errorPage .wrap .squareWrap {
    margin:0
  }

}
.singlePage #content [style="flex-basis:20%"] p {
  color:#487db2;
    font-weight:bold;
    font-size:1.75rem;
    line-height:1
}
@media screen and (min-width: 782px) {
  .singlePage #content [style="flex-basis:20%"] p {
    position:relative;
        top:auto;
        transition:top .3s ease;
        padding:5px
  }
  .singlePage #content [style="flex-basis:20%"] p.fixed {
    position:fixed;
        top:140px;
        background:#fff;
        transition:all ease-in-out .3s;
        z-index:2
  }

}
.singlePage #content h2,.singlePage #content p {
  margin-bottom:30px
}
.singlePage #content h2 {
  font-size:1.375rem
}
.singlePage #content p {
  font-size:1rem;
    line-height:2;
    text-align:justify
}
.singlePage #content figcaption {
  font-size:0.875rem
}
.singlePage #content .content a {
  display:inline;
  color:#487db2;
  text-decoration:underline
}
.singlePage #content .content h2 {
  font-size:1.75rem;
  font-weight:bold;
  margin-top:40px;
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:2px solid #487db2
}
.singlePage #content .content h3 {
  font-size:1.375rem;
  font-weight:bold;
  margin-top:30px;
  margin-bottom:15px;
  padding-left:12px;
  border-left:4px solid #487db2
}
.singlePage #content .content h4 {
  font-size:1.125rem;
  font-weight:bold;
  margin-top:25px;
  margin-bottom:10px
}
.singlePage #content .content h5,
.singlePage #content .content h6 {
  font-size:1rem;
  font-weight:bold;
  margin-top:20px;
  margin-bottom:10px
}
.singlePage #content .content p {
  font-size:0.875rem;
  line-height:2;
  margin-bottom:1.5em;
  text-align:justify
}
.singlePage #content .content ul {
  list-style:disc;
  padding-left:1.5em;
  margin-bottom:1.5em
}
.singlePage #content .content ol {
  list-style:decimal;
  padding-left:1.5em;
  margin-bottom:1.5em
}
.singlePage #content .content ul li,
.singlePage #content .content ol li {
  list-style:inherit;
  margin-bottom:0.5em;
  font-size:0.875rem;
  line-height:2
}
.singlePage #content .content ul ul {
  list-style:circle
}
.singlePage #content .content ol ol {
  list-style:lower-alpha
}
.singlePage #content .content blockquote {
  border-left:4px solid #487db2;
  padding:15px 20px;
  margin:20px 0;
  background:#f7f9fc;
  font-style:italic
}
.singlePage #content .content blockquote p {
  margin-bottom:0
}
.singlePage #content .content img {
  max-width:100%;
  height:auto;
  margin:20px auto
}
.singlePage #content .content figure {
  margin:20px auto
}
.singlePage #content .content figcaption {
  font-size:0.75rem;
  color:#666;
  margin-top:5px
}
.singlePage #content .content .wp-block-table table {
  border-collapse:collapse;
  width:100%;
  margin:20px 0
}
.singlePage #content .content .wp-block-table th,
.singlePage #content .content .wp-block-table td {
  border:1px solid #ccc;
  padding:10px;
  text-align:left;
  font-size:0.875rem
}
.singlePage #content .content .wp-block-table th {
  background-color:#f5f5f5;
  font-weight:bold
}
.singlePage #content .content .wp-block-button__link {
  display:inline-block;
  background:linear-gradient(to right, #489FB2, #487DB2);
  color:#fff;
  text-align:center;
  font-size:0.875rem;
  padding:15px 30px;
  text-decoration:none;
  border-radius:5px;
  margin:10px 0
}
.singlePage #content .content pre {
  background-color:#f5f5f5;
  padding:15px;
  border-radius:5px;
  overflow-x:auto;
  margin:20px 0
}
.singlePage #content .content code {
  background-color:#f5f5f5;
  padding:2px 6px;
  border-radius:3px;
  font-family:monospace;
  font-size:0.875rem
}
.singlePage #content .content .wp-block-separator {
  border:none;
  border-top:1px solid #ccc;
  margin:30px 0
}

.singlePage #content .content .is-layout-grid {
  border-top:1px solid #ccc;
  border-left:1px solid #ccc;
  gap:0;

  & > * {
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    padding:15px 20px;
  }

  & p {
    margin-bottom:0;
  }

  & strong {
    font-size:1.125rem;
    display:block;
    font-weight:bold;
    margin-bottom:0.5rem;
  }
}
@media screen and (max-width: 768px) {
  .singlePage #content .wp-block-columns {
    gap:0
  }
  .singlePage #content .box {
    margin-bottom:50px
  }
  .singlePage #content .content h2 {
    font-size:1.5rem
  }
  .singlePage #content .content h3 {
    font-size:1.25rem
  }

}
#projectSinglePage #content {
  padding-top:100px;
    padding-bottom:100px
}
#projectSinglePage #content .content h2 {
  border-bottom:none;
  padding-bottom:0;
  margin-top:0
}
#projectSinglePage #content .content h3 {
  border-left:none;
  padding-left:0
}
#projectSinglePage #mv {
  cursor:unset
}
#projectSinglePage #mv .tag li {
  cursor:pointer
}
#projectSinglePage .box {
  margin-bottom:100px
}
#worksSinglePage #content {
  padding-top:60px;
    padding-bottom:100px
}
#worksSinglePage .box {
  padding-bottom:40px;
    margin-bottom:40px;
    border-bottom:solid 1px #bfbfbf
}
#worksSinglePage .worksSlide {
  position:relative;
    margin-bottom:20px
}
#worksSinglePage .worksSlide .slick-arrow {
  position:absolute;
    top:50%;
    transform:translateY(-50%);
    height:94px;
    width:94px;
    background-position:center;
    background-size:100%;
    z-index:2;
    cursor:pointer
}
#worksSinglePage .worksSlide .prev-arrow {
  background-image:url(../img/common/works_left.png);
    left:0
}
#worksSinglePage .worksSlide .next-arrow {
  background-image:url(../img/common/works_right.png);
    right:0
}
#worksSinglePage .worksSlide .slick-list {
  margin:0 120px
}
#worksSinglePage .worksSlide .slick-list .slick-slide {
  position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    width:100%;
    height:576px
}
#worksSinglePage .worksSlide .slick-list .slick-slide img {
  width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}
#worksSinglePage .thumbnails {
  display:flex;
    justify-content:space-between;
    padding:0;
    list-style:none;
    margin:0 120px 70px
}
#worksSinglePage .thumbnails li {
  cursor:pointer;
    width:11%;
    height:72px
}
#worksSinglePage .thumbnails li img {
  width:100%;
    height:100%;
    opacity:.7;
    transition:opacity .3s;
    object-fit:cover
}
@media (any-hover: hover) {
  #worksSinglePage .thumbnails li:hover img {
    opacity:1
  }
}
#worksSinglePage h2.pageTitle {
  margin-bottom:60px
}
#worksSinglePage h2.pageTitle span {
  text-align:center;
    display:table;
    margin:0 auto
}
#worksSinglePage h2.pageTitle span.big {
  margin-bottom:20px;
    font-size:2.125rem
}
#worksSinglePage h2.pageTitle span.small {
  font-size:0.875rem
}
#worksSinglePage .tags {
  display:flex;
    margin-bottom:60px;
    flex-wrap:wrap
}
#worksSinglePage .tags li a {
  margin-right:10px;
    padding:5px 10px;
    border:solid #333 1px;
    border-radius:5px;
    font-size:0.625rem;
    margin-bottom:10px
}
@media screen and (max-width: 768px) {
  #worksSinglePage #content {
    padding-top:40px;
        padding-bottom:70px
  }
  #worksSinglePage .box {
    padding-bottom:20px;
        margin-bottom:20px
  }
  #worksSinglePage .worksSlide {
    margin-bottom:10px
  }
  #worksSinglePage .worksSlide .slick-arrow {
    height:30px;
        width:30px
  }
  #worksSinglePage .worksSlide .prev-arrow {
    left:10px
  }
  #worksSinglePage .worksSlide .next-arrow {
    right:10px
  }
  #worksSinglePage .worksSlide .slick-list {
    margin:0
  }
  #worksSinglePage .worksSlide .slick-list .slick-slide {
    height:248px
  }
  #worksSinglePage .thumbnails {
    margin:0 0 40px;
        flex-wrap:wrap
  }
  #worksSinglePage .thumbnails li {
    width:22%;
        height:54px;
        margin-bottom:5px
  }
  #worksSinglePage h2.pageTitle {
    margin-bottom:50px
  }
  #worksSinglePage h2.pageTitle span.big {
    margin-bottom:10px;
        font-size:1.75rem
  }
  #worksSinglePage .tags {
    display:flex;
        margin-bottom:60px
  }
  #worksSinglePage .tags li a {
    margin-right:10px;
        padding:5px 10px;
        border:solid #333 1px;
        border-radius:5px;
        font-size:0.625rem
  }

}
#singlePage #content {
  padding:40px 20px 120px
}
#singlePage #content .mv {
  margin-bottom:30px
}
#singlePage #content .title {
  margin-bottom:0;
    font-size:2rem
}
#singlePage #content .date {
  color:#ccc
}
#singlePage #content .content {
  margin-bottom:60px
}
#singlePage #content .content h2 {
  font-size:1.75rem;
  font-weight:bold;
  margin-top:40px;
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:2px solid #487db2
}
#singlePage #content .content h3 {
  font-size:1.375rem;
  font-weight:bold;
  margin-top:30px;
  margin-bottom:15px;
  padding-left:12px;
  border-left:4px solid #487db2
}
#singlePage #content .content h4 {
  font-size:1.125rem;
  font-weight:bold;
  margin-top:25px;
  margin-bottom:10px
}
#singlePage #content .content h5,
#singlePage #content .content h6 {
  font-size:1rem;
  font-weight:bold;
  margin-top:20px;
  margin-bottom:10px
}
#singlePage #content .content p {
  font-size:0.875rem;
  line-height:2;
  margin-bottom:1.5em;
  text-align:justify
}
#singlePage #content .content ul {
  list-style:disc;
  padding-left:1.5em;
  margin-bottom:1.5em
}
#singlePage #content .content ol {
  list-style:decimal;
  padding-left:1.5em;
  margin-bottom:1.5em
}
#singlePage #content .content ul li,
#singlePage #content .content ol li {
  list-style:inherit;
  margin-bottom:0.5em;
  font-size:0.875rem;
  line-height:2
}
#singlePage #content .content ul ul {
  list-style:circle
}
#singlePage #content .content ol ol {
  list-style:lower-alpha
}
#singlePage #content .content blockquote {
  border-left:4px solid #487db2;
  padding:15px 20px;
  margin:20px 0;
  background:#f7f9fc;
  font-style:italic
}
#singlePage #content .content blockquote p {
  margin-bottom:0
}
#singlePage #content .content a {
  display:inline;
  color:#487db2;
  text-decoration:underline
}
#singlePage #content .content img {
  max-width:100%;
  height:auto;
  margin:20px 0
}
#singlePage #content .content figure {
  margin:20px 0
}
#singlePage #content .content figcaption {
  font-size:0.75rem;
  color:#666;
  margin-top:5px
}
#singlePage #content .content .wp-block-table table {
  border-collapse:collapse;
  width:100%;
  margin:20px 0
}
#singlePage #content .content .wp-block-table th,
#singlePage #content .content .wp-block-table td {
  border:1px solid #ccc;
  padding:10px;
  text-align:left;
  font-size:0.875rem
}
#singlePage #content .content .wp-block-table th {
  background-color:#f5f5f5;
  font-weight:bold
}
#singlePage #content .content .wp-block-button__link {
  display:inline-block;
  background:linear-gradient(to right, #489FB2, #487DB2);
  color:#fff;
  text-align:center;
  font-size:0.875rem;
  padding:15px 30px;
  text-decoration:none;
  border-radius:5px;
  margin:10px 0
}
#singlePage #content .content pre {
  background-color:#f5f5f5;
  padding:15px;
  border-radius:5px;
  overflow-x:auto;
  margin:20px 0
}
#singlePage #content .content code {
  background-color:#f5f5f5;
  padding:2px 6px;
  border-radius:3px;
  font-family:monospace;
  font-size:0.875rem
}
#singlePage #content .content .wp-block-separator {
  border:none;
  border-top:1px solid #ccc;
  margin:30px 0
}
@media screen and (max-width: 768px) {
  #singlePage #content {
    padding:30px 20px 80px
  }
  #singlePage #content .mv {
    margin-bottom:20px
  }
  #singlePage #content .title {
    font-size:1.75rem
  }
  #singlePage #content .content {
    margin-bottom:40px
  }
  #singlePage #content .content h2 {
    font-size:1.5rem
  }
  #singlePage #content .content h3 {
    font-size:1.25rem
  }

}
#contentList {
  margin:40px auto 120px
}
@media screen and (max-width: 768px) {
  #contentList {
    margin:30px auto 60px
  }

}
@media screen and (min-width: 1280px) {
  #contentList.wrap {
    max-width:100%;
        padding-right:130px;
        padding-left:130px
  }

}
#contentList .titleWrap {
  margin-bottom:50px
}
#contentList .titleWrap .secTitle {
  font-size:1.75rem;
    line-height:1.2;
    margin-bottom:10px
}
#contentList .titleWrap p.text {
  font-size:1rem;
    line-height:2
}
@media screen and (max-width: 768px) {
  #contentList .titleWrap {
    margin-bottom:30px
  }
  #contentList .titleWrap .secTitle {
    font-size:1.5rem;
        margin-right:0;
        margin-bottom:20px
  }
  #contentList .titleWrap p.text {
    line-height:1.5
  }

}
#contentList .list {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between
}
#contentList .list>li {
  width:32%;
    margin-bottom:40px
}
#contentList .list>li img {
  width:100%;
    object-fit:contain;
    margin-bottom:10px;
    background-color: #f0f0f0;
}
#contentList .list>li p {
}
#contentList .list>li p.title {
  margin-bottom:10px;;
  word-break: break-all;
}
#contentList .list>li p.date {
  font-size: 0.75rem;
  color:#999
}
#contentList .list>li ul {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:flex-start
}
#contentList .list>li ul li {
  margin-right:10px;
    margin-bottom:3px
}
#contentList .list>li ul li a {
  font-size:0.75rem;
    color:#999
}
@media screen and (max-width: 768px) {
  #contentList .list>li {
    width:48%;
        margin-bottom:30px
  }
  #contentList .list>li p.title {
    margin-bottom:5px
  }

}
#archivePage .cat {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:flex-start;
    margin-bottom:60px
}
#archivePage .cat li.active {
  pointer-events:none;
    text-decoration:underline
}
#archivePage .cat li a {
  padding:5px 0;
    margin-right:40px;
    font-weight:bold
}
@media screen and (max-width: 768px) {
  #archivePage .cat li a {
    margin-right:20px
  }

}
#privacyPage #content {
  padding-bottom:80px
}
#privacyPage #content * {
  line-height:2;
    text-align:justify
}
#privacyPage #content h2 {
  font-size:2rem;
    margin-bottom:40px
}
#privacyPage #content p,#privacyPage #content ul {
  margin-bottom:40px
}
#privacyPage #content h3 {
  margin-bottom:10px
}
#privacyPage #content a {
  display:inline-block;
    text-decoration:underline
}
#privacyPage #content .address span {
  display:inline-block;
    min-width:70px
}
@media screen and (max-width: 768px) {
  #privacyPage #content {
    padding-bottom:60px
  }
  #privacyPage #content * {
    line-height:1.8;
        text-align:left
  }
  #privacyPage #content h2 {
    font-size:1.75rem;
        margin-bottom:30px
  }
  #privacyPage #content p,#privacyPage #content ul {
    margin-bottom:30px
  }
  #privacyPage #content h3 {
    margin-bottom:10px
  }

}
#recruitSinglePage #content .title {
  padding:5px
}
@media screen and (max-width: 768px) {
  #recruitSinglePage #content .title {
    padding:0
  }

}
#recruitSinglePage #content h2.pageTitle {
  margin-bottom:60px
}
#recruitSinglePage #content h2.pageTitle span {
  text-align:center;
    display:table;
    margin:0 auto
}
#recruitSinglePage #content h2.pageTitle span.big {
  margin-bottom:20px;
    font-size:2.125rem
}
@media screen and (max-width: 768px) {
  #recruitSinglePage #content h2.pageTitle {
    margin-bottom:40px
  }
  #recruitSinglePage #content h2.pageTitle span.big {
        font-size:1.75rem
  }

}
#recruitSinglePage #content .content {
  margin-bottom:80px
}
#recruitSinglePage #content .content .box {
  margin-bottom:30px;
    border-bottom:solid 1px #bfbfbf
}
#recruitSinglePage #content .content .box [style="flex-basis:20%"] p {
  font-size:1.8125rem;
    text-align:left;
    line-height:1.2;
    letter-spacing:.1rem
}
@media screen and (max-width: 768px) {
  #recruitSinglePage #content .content .box [style="flex-basis:20%"] p {
    font-size:1.5rem;
        margin-bottom:20px;
        letter-spacing:.05rem
  }

}
#recruitSinglePage #content .content .box:first-child {
  padding-top:30px;
    border-top:solid 1px #bfbfbf
}
#recruitSinglePage #content .gray_box {
  background:#eee;
    padding:60px 0 80px;
    margin:0 0 100px
}
@media screen and (max-width: 768px) {
  #recruitSinglePage #content .gray_box {
    padding:40px 0 50px
  }

}
#recruitSinglePage #content .gray_box .apply {
  text-align:center;
    font-weight:bold;
    font-size:1.375rem;
    margin:0 20px 30px
}
@media screen and (max-width: 768px) {
  #recruitSinglePage #content .gray_box .apply {
    font-size:1.125rem;
        line-height:1.5
  }

}
@media screen and (max-width: 768px) {
  #recruitSinglePage #content .gray_box .btn {
    width:calc(100% - 40px)
  }
  #recruitSinglePage #content .gray_box .btn::after {
    content:none
  }

}
@media screen and (max-width: 768px) {
  #recruitSinglePage .box {
    margin-bottom:20px;
        letter-spacing:.1rem
  }
  #recruitSinglePage h2.pageTitle {
    margin-bottom:50px
  }
  #recruitSinglePage h2.pageTitle span.big {
    margin-bottom:10px;
        font-size:1.75rem
  }

}
#recruitArchivePage .list li {
  border-top:#ccc solid 1px;
    margin-bottom:0
}
#recruitArchivePage .list li a {
  padding:30px 0 30px
}
@media (any-hover: hover) {
  #recruitArchivePage .list li a:hover {
    opacity:1
  }
}
#recruitArchivePage .list li a .company {
  color:#487db2;
    border:solid 1px #487db2;
    padding:3px 10px;
    display:inline-block;
    border-radius:50px;
    margin-bottom:20px
}
#recruitArchivePage .list li a .section {
  font-size:1rem
}
#recruitArchivePage .list li a .name {
  font-size:1.5rem;
    font-weight:bold;
    margin-bottom:20px
}
#recruitArchivePage .list li a .info {
  letter-spacing:.1rem;
    line-height:1.8;
    margin-bottom:20px
}
@media screen and (max-width: 768px) {
  #recruitArchivePage .list li a {
    padding:20px 0 20px
  }
  #recruitArchivePage .list li a .company {
    white-space:nowrap;
        font-size:0.625rem;
        margin-bottom:10px;
        letter-spacing:0
  }
  #recruitArchivePage .list li a .section {
    white-space:nowrap;
        font-size:0.625rem
  }
  #recruitArchivePage .list li a .name {
    font-size:1.25rem;
        margin-bottom:15px
  }
  #recruitArchivePage .list li a .info {
    letter-spacing:.05rem;
        line-height:1.5;
        margin-bottom:15px;
        font-size:0.75rem
  }

}
.bread {
  list-style:none;
    padding:0;
    margin:0 0 40px;
    display:flex;
    align-items:center;
    font-size:14px;
    align-items:center;
    flex-wrap:nowrap;
    overflow:hidden
}
.bread * {
  line-height:1 !important
}
@media screen and (max-width: 768px) {
  .bread {
    margin:0 0 30px
  }

}
.bread li {
  margin-right:5px;
    display:flex;
    align-items:center;
    flex-shrink:0
}
.bread li:last-child {
  flex-shrink:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.bread li:not(:first-child) a {
  margin:0 5px 0 8px
}
.bread li a {
  text-decoration:none;
    color:#0073aa;
    display:flex
}
@media (any-hover: hover) {
  .bread li a:hover {
    text-decoration:underline
  }
}
.bread li img {
  width:16px;
    height:16px;
    margin-right:7px
}
#contactPage h2 {
  font-size:2.125rem;
    line-height:1.2;
    margin-bottom:10px
}
#contactPage .text {
  font-size:0.875rem;
    line-height:2;
    margin-bottom:60px
}
#contactPage form {
  margin-bottom:120px;
    max-width:665px
}
#contactPage form * {
  font-size:0.875rem
}
#contactPage form .flex {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    justify-content:space-between;
    width:100%
}
#contactPage form .flex .q {
  width:48%
}
#contactPage form .flex .q input {
  width:100%
}
#contactPage form .q {
  margin-bottom:30px
}
#contactPage form .title {
  margin-bottom:10px
}
#contactPage form .title .kome {
  color:#0094dd;
    margin-left:7px
}
#contactPage form input {
  border:solid #ccc 1px;
    padding:6px 10px;
    width:48%
}
@media screen and (max-width: 480px) {
  #contactPage form input {
    width:100%
  }

}
#contactPage form input[type=radio] {
  width:unset;
    padding:unset;
    border:unset;
    appearance:none;
    width:18px;
    height:18px;
    border:1px solid #333;
    border-radius:50%;
    display:inline-block;
    position:relative;
    margin-right:10px
}
#contactPage form input[type=radio]::before {
  content:"";
    width:10px;
    height:10px;
    background-color:#0094dd;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    display:none
}
#contactPage form input[type=radio]:checked::before {
  display:block
}
#contactPage form .wpcf7-list-item {
  margin:0;
    display:block;
    margin-bottom:10px
}
#contactPage form .wpcf7-list-item label {
  display:flex;
    align-items:center
}
@media screen and (max-width: 480px) {
  #contactPage form .wpcf7-list-item label span {
    font-size:0.8125rem
  }

}
#contactPage form textarea {
  border:solid #ccc 1px;
    width:100%;
    padding:6px 10px
}
#contactPage form button {
  padding:10px 40px
}
#contactPage form button::after {
  content:none
}
#contactPage form .privacySec .flex p {
  display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px
}
#contactPage form .privacySec a {
  display:inline-block;
    text-decoration:underline;
    color:#0094dd;
    text-decoration-color:#0094dd
}
#contactPage form .count {
  text-align:right
}
@media screen and (max-width: 600px) {
  #wpadminbar {
    position:fixed !important
  }

}
.spOnly {
  display:none
}
@media screen and (max-width: 768px) {
  .spOnly {
    display:inline
  }
  .pcOnly {
    display:none
  }

}
@font-face {
  font-family:"A-OTF-GothicBBBPro-Medium";
    src:url("../fonts/A-OTF-GothicBBBPro-Medium.otf") format("opentype")
}
@font-face {
  font-family:"A-OTF-MidashiGoPro-MB31";
    src:url("../fonts/A-OTF-MidashiGoPro-MB31.otf") format("opentype")
}
/*# sourceMappingURL=style.min.css.map */