@charset "utf-8";

/* 共通設定
--------------------------------------------------------------------------*/
.container {position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto;}
.dispFlex {display: flex; flex-direction: row; flex-wrap: nowrap; gap: 30px;}
.calcArea2 {width: calc(50% - 30px * 1 / 2); margin-left: 0;}
.calcArea3 {width: calc(33.333% - 30px * 2 / 3); margin-left: 0;}
.calcArea4 {width: calc(25% - 30px * 3 / 4); margin-left: 0;}
.imgArea {position: relative;}
.imgArea img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.iframeArea span {position: relative; display: block; max-width: 100%; margin: 0; padding-top: 56.25%;}
.iframeArea span iframe {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
@media (min-width: 1921px) {}
@media (min-width: 1200px) {}
@media (max-width: 1199px) {}
@media (max-width: 1199px) and (min-width: 992px) {
  .container {max-width: 970px;}
  .dispFlex {gap: 25px;}
  .calcArea2 {width: calc(50% - 25px * 1 / 2);}
  .calcArea3 {width: calc(33.333% - 25px * 2 / 3);}
  .calcArea4 {width: calc(25% - 25px * 3 / 4);}
}
@media (min-width: 992px) {}
@media (max-width: 991px) {}
@media (max-width: 991px) and (min-width: 768px) {
  .container {max-width: 750px;}
  .dispFlex {gap: 20px;}
  .calcArea2 {width: calc(50% - 20px * 1 / 2);}
  .calcArea3 {width: calc(33.333% - 20px * 2 / 3);}
  .calcArea4 {width: calc(25% - 20px * 3 / 4);}
}
@media (min-width: 768px) {}
@media (max-width: 767px) {
  .container {max-width: 450px; padding: 0 15px;}
  .dispFlex {gap: 15px;}
  .calcArea2, .calcArea3 {width: 100%;}
  .calcArea4 {width: calc(50% - 15px * 1 / 2);}
}
@media (max-width: 360px) {}

/* #worksPage設定
--------------------------------------------------------------------------*/
#worksPage #sec1 {padding-bottom: 90px;}
#worksPage #sec1 .container {flex-direction: column;}
#worksPage #sec1 .container .appeal {align-items: flex-start; flex-wrap: wrap; order: 2; margin-bottom: 30px;}
#worksPage #sec1 .container .appeal h2 {width: 100%; height: auto; margin: 30px 0 0; padding-bottom: 30px; border-bottom: solid 2px #3D554F; font-size: 26px; font-weight: 500; line-height: 1.4; text-align: center;}
#worksPage #sec1 .container .appeal p {width: calc(1180px - 450px - 30px); line-height: 1.8;}
#worksPage #sec1 .container .appeal .imgArea {width: 450px; height: 300px;}
#worksPage #sec1 .container .overview {flex-wrap: wrap; order: 3;}
#worksPage #sec1 .container .overview dl {width: calc(50% - 15px); padding-bottom: 15px; border-bottom: solid 1px #3D554F;}
#worksPage #sec1 .container .overview dl dt {font-weight: 500;}
#worksPage #sec1 .container .overview dl dd {position: relative; padding-left: 20px;}
#worksPage #sec1 .container .features {flex-wrap: wrap; gap: 15px; order: 1;}
#worksPage #sec1 .container .features figure {width: 945px; height: 630px;}
#worksPage #sec1 .container .features ul {flex-direction: column; gap: 15px; width: 220px;}
#worksPage #sec1 .container .features ul li {width: inherit; height: 145px;}
#worksPage #sec1 .container .features ul li.current {opacity: 0.25;}
#worksPage #sec1 .container .gallery {order: 4; margin-top: 30px;}
#worksPage #sec1 .container .gallery li a {display: block; width: 100%; padding-top: 65%;}
#worksPage #sec1 .container #youtubeArea {order: 5; justify-content: center; align-items: flex-start;}
#worksPage #sec1 .container #youtubeArea .iframeArea {position: relative; display: block; max-width: 100%; margin: 30px 0; padding-top: 27.5%;}
#worksPage #sec1 .container #youtubeArea .iframeArea:empty {width: 0; margin: 0 0 0 -30px; padding-top: 0 !important;}
#worksPage #sec1 .container #youtubeArea .iframeArea iframe {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
@media (min-width: 1921px) {}
@media (min-width: 1200px) {}
@media (max-width: 1199px) {}
@media (max-width: 1199px) and (min-width: 992px) {
  #worksPage #sec1 {padding-bottom: 75px;}
  #worksPage #sec1 .container .appeal {margin-bottom: 25px;}
  #worksPage #sec1 .container .appeal h2 {margin: 25px 0 0; padding-bottom: 25px; font-size: 24px;}
  #worksPage #sec1 .container .appeal p {width: calc(970px - 360px - 25px);}
  #worksPage #sec1 .container .appeal .imgArea {width: 360px; height: 240px;}
  #worksPage #sec1 .container .overview dl {width: calc(50% - 13px);}
  #worksPage #sec1 .container .overview dl dt {font-size: 18px;}
  #worksPage #sec1 .container .overview dl dd {padding-left: 18px; font-size: 18px;}
  #worksPage #sec1 .container .features figure {width: 780px; height: 520px;}
  #worksPage #sec1 .container .features ul {width: 175px;}
  #worksPage #sec1 .container .features ul li {height: 115px;}
  #worksPage #sec1 .container .gallery {margin-top: 25px;}
  #worksPage #sec1 .container #youtubeArea .iframeArea {margin: 25px 0;}
  #worksPage #sec1 .container #youtubeArea .iframeArea:empty {margin-left: -25px;}
}
@media (min-width: 992px) {
  #worksPage h1 {background-image: url('images/works/pageTitle-h1.webp');}
}
@media (max-width: 991px) {
  #worksPage h1 {background-image: url('images/works/pageTitle-mp.webp');}
}
@media (max-width: 991px) and (min-width: 768px) {
  #worksPage #sec1 {padding-bottom: 60px;}
  #worksPage #sec1 .container .appeal {margin-bottom: 20px;}
  #worksPage #sec1 .container .appeal h2 {margin: 20px 0 0; padding-bottom: 20px; font-size: 22px;}
  #worksPage #sec1 .container .appeal p {width: calc(750px - 270px - 20px);}
  #worksPage #sec1 .container .appeal .imgArea {width: 270px; height: 180px;}
  #worksPage #sec1 .container .overview dl {width: calc(50% - 10px);}
  #worksPage #sec1 .container .overview dl dt {font-size: 16px;}
  #worksPage #sec1 .container .overview dl dd {padding-left: 16px; font-size: 16px;}
  #worksPage #sec1 .container .features figure {width: 600px; height: 400px;}
  #worksPage #sec1 .container .features ul {width: 135px;}
  #worksPage #sec1 .container .features ul li {height: 90px;}
  #worksPage #sec1 .container .gallery {margin-top: 20px;}
  #worksPage #sec1 .container #youtubeArea .iframeArea {margin: 20px 0;}
  #worksPage #sec1 .container #youtubeArea .iframeArea:empty {margin-left: -20px;}
}
@media (min-width: 768px) {
  #worksPage #sec1 .container .overview dl dt, #worksPage #sec1 .container .overview dl dd {display: inline-block;}
  #worksPage #sec1 .container .overview dl dd::before {content: '：';}
}
@media (max-width: 767px) {
  #worksPage #sec1 {padding-bottom: 45px;}
  #worksPage #sec1 .container .appeal {margin-bottom: 15px;}
  #worksPage #sec1 .container .appeal h2 {margin: 15px 0 0; padding-bottom: 15px; font-size: 20px;}
  #worksPage #sec1 .container .appeal p {width: 100%; line-height: 1.6;}
  #worksPage #sec1 .container .appeal .imgArea {width: 100%; height: auto; padding-top: 65%;}
  #worksPage #sec1 .container .overview dl {width: calc(50% - 8px);}
  #worksPage #sec1 .container .overview dl dt, #worksPage #sec1 .container .overview dl dd {padding-left: 0; font-size: 14px; line-height: 1.6;}
  #worksPage #sec1 .container .features figure {width: 100%; height: auto; padding-top: 65%;}
  #worksPage #sec1 .container .features ul {flex-direction: row; width: 100%;}
  #worksPage #sec1 .container .features ul li {height: auto; padding-top: 20%;}
  #worksPage #sec1 .container .gallery {flex-wrap: wrap; margin-top: 15px;}
  #worksPage #sec1 .container #youtubeArea {flex-direction: column;}
  #worksPage #sec1 .container #youtubeArea .iframeArea {margin: 0; padding-top: 56.25%;}
  #worksPage #sec1 .container #youtubeArea .iframeArea:first-of-type {margin-top: 15px;}
  #worksPage #sec1 .container #youtubeArea .iframeArea:last-of-type {margin-bottom: 15px;}
  #worksPage #sec1 .container #youtubeArea .iframeArea:empty {margin-top: -15px;}
}
@media (max-width: 360px) {
  #worksPage #sec1 .container .overview dl dt, #worksPage #sec1 .container .overview dl dd {font-size: 90%;}
}

/* #worksPage設定
--------------------------------------------------------------------------*/
#worksPage .newsArea {flex-wrap: wrap; justify-content: center; margin-bottom: 15px; padding: 30px 0 0;}
#worksPage .newsArea article {flex-direction: column; gap: 0; padding-bottom: 15px; border-bottom: solid 3px #1837B5;}
#worksPage .newsArea article a {flex-direction: column-reverse; flex-grow: 1; gap: 0; width: 100%;}
#worksPage .newsArea article a .textArea {position: relative; flex-direction: column-reverse; flex-grow: 1; gap: 10px; width: 100%; padding: 0;}
#worksPage .newsArea article a .textArea h3 {flex-grow: 1; padding: 0; font-size: 16px; line-height: 1.4;}
#worksPage .newsArea article a .imgArea {width: 100%; margin-bottom: 10px; padding-top: 65%;}
@media (max-width: 1199px) {
  #worksPage .newsArea article a .textArea h3 {font-size: 14px;}
}
@media (max-width: 1199px) and (min-width: 992px) {
  #worksPage .newsArea {padding: 25px 0 0;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #worksPage .newsArea {padding: 20px 0 0;}
}
@media (max-width: 767px) {
  #worksPage .newsArea {padding: 15px 0 0;}
  #worksPage .newsArea article a {flex-direction: row-reverse; flex-wrap: wrap; height: 100px;}
  #worksPage .newsArea article a .textArea {width: 60%; height: 100px; padding: 0 0 0 5px;}
  #worksPage .newsArea article a .textArea h3 {height: 70px; line-height: 1.3; overflow: hidden;}
  #worksPage .newsArea article a .imgArea {width: 40%; height: 100px; margin-bottom: 0; padding: 0;}
}

/* 設定
--------------------------------------------------------------------------*/
@media (min-width: 1921px) {}
@media (min-width: 1200px) {}
@media (max-width: 1199px) {}
@media (max-width: 1199px) and (min-width: 992px) {}
@media (min-width: 992px) {}
@media (max-width: 991px) {}
@media (max-width: 991px) and (min-width: 768px) {}
@media (min-width: 768px) {}
@media (max-width: 767px) {}
@media (max-width: 360px) {}

/* 設定
--------------------------------------------------------------------------*/
@media (min-width: 1921px) {}
@media (min-width: 1200px) {}
@media (max-width: 1199px) {}
@media (max-width: 1199px) and (min-width: 992px) {}
@media (min-width: 992px) {}
@media (max-width: 991px) {}
@media (max-width: 991px) and (min-width: 768px) {}
@media (min-width: 768px) {}
@media (max-width: 767px) {}
@media (max-width: 360px) {}