/*
Theme Name: Jacobdisco Design Theme
Theme URI: http://two.jacobdisco.jp/
Description: jacobdisco Design Theme
*/

@import url("https://fonts.googleapis.com/css?family=Barlow|Noto+Sans+JP:300,400&display=swap");

/*----------
RESET
----------*/
ul {
  padding-inline-start: 0;
}

/*----------
BASIC
----------*/
body {
  font-family: "Barlow", "Noto Sans JP", "Lucida Grande",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ,
    sans-serif;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  color: #333;
}

body * {
  box-sizing: border-box;
}

#wrapper {
  line-height: 1.5;
}

#contents {
  width: 100%;
  min-height: calc(66vh - 390px);
}

/*utility-----*/
.font-l {
  font-size: 115%;
}
.font-2l {
  font-size: 130%;
}
.font-s {
  font-size: 90%;
}
.font-2s {
  font-size: 80%;
}
.font-b {
  font-weight: bold;
}
.font-n {
  font-weight: normal;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}

.sp {
  display: block;
}

@media screen and (min-width: 480px) {
}
@media screen and (min-width: 640px) {
  .sp {
    display: none;
  }
}
@media screen and (min-width: 760px) {
}
@media screen and (min-width: 970px) {
}
@media screen and (min-width: 1360px) {
}
@media screen and (min-width: 1500px) {
}
@media screen and (min-width: 1800px) {
}

/*lottie-----*/
.lottie-obj {
  display: inline-block;
  width: 420px;
  height: auto;
  margin: -12px auto 0;
}
.contact__image {
  width: 100%;
  height: 100%;
}

/*header-----*/
header h1 {
  font-size: 14px;
  padding: 20px 0 0;
}
header nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 480px) {

}

@media screen and (min-width: 640px) {
  header h1 {
    margin-top: 20px;
  }
}
@media screen and (min-width: 760px) {

}
@media screen and (min-width: 970px) {
}
@media screen and (min-width: 1360px) {
  header nav ul {
    flex-direction: row;
  }
}
@media screen and (min-width: 1500px) {
}
@media screen and (min-width: 1800px) {
}

header h1 object {
  display: block;
  width: 12%;
  height: auto;
  margin: 0 auto;
  padding: 20px 0 5px 0;
}

/*SNSなどのアイコン-----*/
.fa-brands {
  padding: 0 10px;
}

/*bottom nav-----*/
.bottom-nav nav ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

@media screen and (min-width: 480px) {
}
@media screen and (min-width: 640px) {
}
@media screen and (min-width: 760px) {

}
@media screen and (min-width: 970px) {
}
@media screen and (min-width: 1360px) {
}
@media screen and (min-width: 1500px) {
  .bottom-nav nav ul {
    flex-direction: row;
  }
}
@media screen and (min-width: 1800px) {
}

/*トップのカラー*/
:root {
  --main-top-color: rgba(20, 10, 10, 0.8);
}
.cls-1 {
  color: var(--main-top-color);
}
header nav ul li,
header nav ul li a:visited,
header nav ul li a:link {
  color: var(--main-top-color);
}

header nav ul li a:hover {
  color: #ffff66;
  opacity: 0.7;
}

nav {
  width: 100%;
}
nav.sp {
  display: none;
}
nav ul li {
  display: inline-block;
  list-style: none;
}

nav ul li:after {
  content: "|";
  padding: 0 10px;
}

nav ul li:last-child:after {
  content: "";
}

/*footer-----*/
footer .links-sns {
  display: block;
  margin: 0 auto;
}

footer .links-sns a {
  font-size: 26px;
}

footer .copy {
  font-size: 90%;
  padding-bottom: 30px;
}

footer .links-sns i.fab {
  display: inline;
  padding-right: 1%;
  vertical-align: top;
}
footer .links-sns i.fab:last-child {
  padding-right: 0;
}
footer .links-sns i.fa-facebook-f {
  font-size: 26px;
}
footer .links-sns i.fa-instagram {
  font-size: 30px;
}

footer .links-sns a,
footer .links-sns a:visited,
footer .links-sns a:link {
  color: var(--main-top-color);
}
footer .copy {
  color: var(--main-top-color);
}

.slide-single__image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.swiper-button-next,
.swiper-button-prev {
  color: #f8d882;
}
.name,
.cliant,
.jenre {
  font-size: 85%;
}
.jenre {
  border: 1px solid #333;
  display: inline-block;
  padding: 2px 20px;
  margin: 10px;
  border-radius: 20px;
}

.jenre.fin-line {
  margin-top: 50%;
}

.viewall {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.overlay.active {
  opacity: 1;
}

#modal-close:hover {
  opacity: 0.6;
}

#modal-close:active {
  font-size: 28px;
  width: 40px;
  height: 40px;
  transition-duration: 100ms;
  right: 12px;
  top: 12px;
}

/*modal-----*/
#modal {
  position: absolute;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  width: 90vw;
  max-width: 1500px;
  height: 80vh;
  top: -30vh;
  border-radius: 20px;
  padding: 2vw;
  overflow: scroll;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#modal h2 {
  font-size: 120%;
}
#modal-html {
  padding-top: 40px;
}
#modal-close {
  position: fixed;
  right: 10px;
  top: 10px;
  font-size: 32px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 0;
  background: rgb(255, 255, 255, 0.7);
  color: #343434;
  border: 1px solid #343434;
}
#modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.work-single-detail {
  text-align: left;
  padding: 20px 1%;
}
.image-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
}
.image-single {
  width: 100%;
  margin: 0;
}
.image-single__image {
  width: 100%;
  height: 100%;
}
.slide-wrap {
  padding: 1vw;
  /*height: 280vw;*/
  overflow: visible;
  /*height: 460vw;*/
  height: auto;
}
.works-single-wrap {
  height: 74vw;
}

/* works */
.swiper-wrapper {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto;
  width: 100vw;
  justify-content: space-around;
  /*position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;*/
  /*flex-wrap: wrap;*/
}
.slide-single {
  width: 43vw !important;
  height: 40vw !important;
  /*max-width: 200px;*/
  margin: 10px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
}

@media screen and (min-width: 480px) {
  .slide-single {
    width: 100%;
  }
}
@media screen and (min-width: 640px) {
  .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media screen and (min-width: 760px) {
}
@media screen and (min-width: 970px) {
  /*.slide-single {
    max-height: 200px;
  }*/
}
@media screen and (min-width: 1360px) {
}
@media screen and (min-width: 1500px) {
}
@media screen and (min-width: 1800px) {
}

@media screen and (min-width: 1800px) {
  .swiper-wrapper {
    padding: 0 1vw;
    width: 80vw !important;
    max-width: 1800px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1500px) {
  .slide-wrap {
    /*height: 30vw;*/
  }
}

/*




#top_menu{
float:left;
color:#c0c0c0;
margin:50px 0 10px 100px;
width:1000px;
}
.menu_top{
float:left;
margin:5px 40px 0 0;
}
.menu_con{
float:left;
}
.bottom_co img{
height: 70px;
}
.disc_con img{
width:150px;
}
.disc_con{
float:left;
width:180px;
margin:5px 0;
}
*/

/*archive--*/
#content-archive .slide-wrap {
  margin-top: 2vw;
}

.slide-wrap {
  /*height: 420vw;*/
}

/*header--*/
.main-logo {
  width: 360px;
  padding: 10px 0;
}

#contents {
  min-height: calc(100vh - 390px);
}

/*header--*/
/*header h1 {
    padding: 20px 0;
  }*/

/*header h1 object {
    width: 98%;
  }*/

/*
nav {
    width: 100%;
    text-align: left;
    padding-left: 4%;
    font-size: 120%;
}
*/
nav {
  display: none;
}
nav.sp {
  display: block;
}
nav ul li {
  display: block;
  padding-bottom: 7px;
}
nav ul li:after {
  content: "";
}

/*footer--*/
footer {
  margin-top: 20px;
}
footer .copy {
  font-size: 80%;
}
footer .links-sns i.fab {
  padding-right: 5%;
}

@media screen and (min-width: 480px) {
  footer {
    margin-top: 40px;
  }

  footer .copy {
    padding-bottom: 60px;
  }
  .links-sns a {
    padding-right: 1%;
  }
}
@media screen and (min-width: 640px) {
}
@media screen and (min-width: 760px) {
}
@media screen and (min-width: 970px) {
}
@media screen and (min-width: 1360px) {
}
@media screen and (min-width: 1500px) {
}
@media screen and (min-width: 1800px) {
}

/*
body {
 width:570px;
 margin:0 auto;
 text-align:center;
 font-size:16px;
}
*/
/*
#top_menu{
float:left;
color:#c0c0c0;
margin:20px 0 10px 0;
width:640px;
}
.menu_top{
float:left;
margin:5px 400px 30px 100px;
}
.home_icon{
margin-left:90px;
}
.menu_con{
float:left;
}
.bottom_co img{
height: 78px;
}
.disc_con img{
width:200px;
}
.disc_con{
float:left;
width:210px;
margin:5px 0;
}
*/

@media screen and (min-width: 480px) {
  /*modal-----*/
  .slide-wrap {
    /*height: 380vw;*/
    /*height: 400vw;*/
  }
  .works-single-wrap {
    height: 68vw;
  }
}

@media screen and (min-width: 640px) {
  /*modal-----*/

  #modal-html {
    padding-top: 20px;
  }
  .image-wrap {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .slide-wrap {
    margin-top: 5vw;
    /*height: 146vw;*/
    /*height: 140vw;*/
  }
  .works-single-wrap {
    height: 42vw;
  }
  .image-single {
    width: 70%;
    margin: 5px;
  }
  .slide-single {
    width: 20vw !important;
    height: 20vw !important;
  }
  .swiper-wrapper {
    padding: 0;
    width: 100vw !important;
  }

  /*
body {
 width:860px;
 margin:0 auto;
 text-align:center;
 font-size:15px;
}
*/
  /*
#top_menu{
float:left;
width:860px;
color:#c0c0c0;
margin:50px 0 10px 100px;
}
.menu_top{
float:left;
margin:5px 40px 0 0;
}
.menu_con{
float:left;
}
.bottom_co img{
height: 70px;
}
.disc_con img{
width:150px;
}
.disc_con{
float:left;
width:180px;
margin:5px 0;
}
*/
}

@media screen and (min-width: 760px) {
  /*modal-----*/
  #modal {
    width: 60vw;
    height: 80vh;
    padding: 1vw;
  }

  .swiper-wrapper {
    padding: 0;
    width: 90vw !important;
  }

  .slide-single {
    width: 18vw !important;
    height: 18vw !important;
  }
  .slide-wrap {
    /*height: 124vw;*/
    /*height: 110vw;*/
  }
  .works-single-wrap {
    height: 36vw;
  }

  /*
body {
 width:1080px;
 margin:0 auto;
 text-align:center;
 font-size:14px;
}
*/
  /*
#top_menu{
float:left;
color:#c0c0c0;
margin:50px 0 10px 100px;
width:1080px;
}
.menu_top{
float:left;
margin:5px 40px 0 0;
}
.menu_con{
float:left;
}
.bottom_co img{
height: 70px;
}
.disc_con img{
width:150px;
}
.disc_con{
float:left;
width:180px;
margin:5px 0;
}
*/
}

@media screen and (min-width: 970px) {
  /*modal-----*/
  .swiper-wrapper {
    padding: 0 4vw;
    width: 92vw !important;
  }

  .slide-single {
    width: 13vw !important;
    height: 13vw !important;
  }

  .slide-wrap {
    /*height: 57vw;*/
    /*height: 60vw;*/
  }
  .works-single-wrap {
    height: 28vw;
  }

  /*
body {
 width:1500px;
 margin:0 auto;
 text-align:center;
 font-size:14px;
}
*/
  /*
#top_menu{
float:left;
color:#c0c0c0;
margin:50px 0 10px 122px;
width:1500px;
}
.menu_top{
float:left;
margin:5px 40px 0 0;
}
.menu_con{
float:left;
}
.bottom_co img{
height: 70px;
}
.disc_con img{
width:150px;
}
.disc_con{
float:left;
width:180px;
margin:5px 0;
}
*/
}

@media screen and (min-width: 1360px) {
  /*modal-----*/
  .swiper-wrapper {
    padding: 0 3vw;
    width: 94vw !important;
    max-width: 1320px;
  }
  .slide-wrap {
    /*height: 74vw;*/
    /*height: 50vw;*/
  }
  .works-single-wrap {
    height: 22vw;
  }
  .slide-single {
    width: 12vw !important;
    height: 12vw !important;
  }
}

@media screen and (min-width: 1500px) {
  .swiper-wrapper {
    padding: 0 15vw;
    width: 70vw !important;
  }
  .slide-single {
    width: 10vw !important;
    height: 10vw !important;
  }
  .slide-wrap {
    margin-top: 2vw;
    /*height: 40vw;*/
  }
  .works-single-wrap {
    height: 20vw;
  }
  .image-single {
    width: 48%;
    margin: 5px;
  }
  .image-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
  }
  .slide-single {
    width: 10vw !important;
    height: 10vw !important;
  }
}

@media screen and (min-width: 1800px) {
  .swiper-wrapper {
    padding: 0 1vw;
    width: 98vw !important;
    max-width: 1800px;
    margin: 0 auto;
  }
  .slide-single {
    /*width: 12vw !important;
    height: 12vw !important;*/
  }
  .slide-wrap {
    /*margin-top: 18vw;*/
    /*height: 36vw;*/
    /*height: 14vw;*/
  }
  .works-single-wrap {
    height: 16.5vw;
  }
  #content-archive .slide-wrap {
    /*height: 36vw;*/
  }
  #content-archive .works-single-wrap {
    height: 20vw;
  }
  .slide-single {
    width: 5vw !important;
    height: 5vw !important;
  }
}

a {
  text-decoration: none;
}
a:link {
  color: #000000;
}

a:visited {
  color: #000000;
}
a:hover {
  opacity: 0.7;
  text-decoration: none;
}

a img {
  border-style: none;
}

/*
#contents{
overflow:visible;
 width:100%;
}
*/
/*
.kobetsu{
width:95%;
margin-left:5%;
}

#left_menu{
float:left;
color:#c0c0c0;
margin:20px;
width:12%;
}

#left_menu img {
width:52px;
height:auto;
}

#left_menu div {
float:center;
margin:12px 0;
}

#main{
float:left;
 width:81%;
 margin:15px 0 0 15px;
 text-align:left;
}

#bottom_img{
width:100%;
}

.bottom_co{
float:left;
}

.disc_con p{
font-size:90%;
width:90%;
}

.video_con{
float:left;
width:210px;
margin-bottom:20px;
}

.video_con p {
width:85%;
}

.pre {
font-size:100%;
margin-bottom:60px;
}

.pre p {
line-height:140%;
}

.pre .date {
font-size:160%;
}

.fin {
font-size:100%;
margin-bottom:50px;
}

.fin p {
line-height:140%;
}

.fin .date {
font-size:120%;
}
*/
/*
h1 {
float:left;
font-weight:normal;
font-size:120%;
letter-spacing:6px;
margin-bottom:20px;
}
*/
/*
h2 {
float:left;
font-weight:normal;
font-size:120%;
letter-spacing:6px;
margin-bottom:20px;
}

.clear{
 clear: both; visibility: hidden; height: 0;
}
*/