@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
* { box-sizing: border-box; }
body { 
   margin: 0;
   padding: 0;
   background: radial-gradient(#B00003, #210001);
}
.main-contents {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 0 80px;
   color: #FFFFFF;
}
header { margin-bottom: 50px; }
.button-base {
   font-family: "Noto Sans JP", sans-serif;
   background: rgba(128, 128, 128, .3);
   box-shadow: 0px 0px 15px rgba(255, 255, 255, .6) inset;
   border: 1px solid #ccc;
   border-radius: 4px;
   color: #fff;
   font-size: 1em;
   margin: 10px 0 10px;
   padding: 10px 30px;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   transition: 0.3s;
}
.button-base:hover {
   font-weight: bold;
   text-shadow: #ff0 0px 0px 5px;
   opacity: 0.8;
}
.button-red {
   background: rgba(160, 0, 0, .5);
   box-shadow: 0px 0px 15px rgba(255, 0, 0, .8) inset;
   border: 1px solid #f00;
   color: #fff;
}
/* ヒーロー(スライド) */
@keyframes horizontal-animation-left {
   from { transform: translateX(0); }
   to { transform: translateX(-100%); }
}
@keyframes horizontal-animation-right {
   from { transform: translateX(-100%); }
   to { transform: translateX(0%); }
}
.hero-container {
   display: flex;
   overflow: hidden;
}
.hero-wrapper-up {
   display: flex;
   animation: horizontal-animation-left 60s linear infinite;
}
.hero-wrapper-bottom {
   display: flex;
   animation: horizontal-animation-right 60s linear infinite;
}
.slide { width: 500px; }
.slide img {
   width: 100%;
   height: auto;
   vertical-align: bottom;
}

/* ヘッダ */
.logo-header {
   position: absolute;
   top: 191.25px;
   right: 0;
   left: 0;
   margin: 0 auto;
   width: 1200px;
   text-align: center;
   padding: 10px 0;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 15px;
}
.logo-header-mit { width: 70%; }
.logo-header-tgs { width: 98%; padding: 2px 0 0; }
.tgs-period {
   font-family: "Noto Sans JP", sans-serif;
   font-size: 1.2rem;
   font-weight: 700;
   color: #000;
}

/* 項目見出し */
.product-header {
   font-family: "Noto Sans JP", sans-serif;
   margin: 80px auto;
   padding-bottom: 10px;
   font-size: 32px;
   letter-spacing: 5px;
   height: 52px;
   text-align: center;
   color: #fff;
   background-color: #000;
   border: 1px solid #C00;
   border-radius: 4px;
   box-shadow: 0 0 10px #FF0000;
}

/* 展示作品グリッド */
.contents-grid {
   display: grid;
   gap: 20px;
   grid-template-columns: 200px 200px 200px 200px 200px;
   grid-template-rows: 200px 200px;
   place-content: center;
}
.contents-item {
   width: 200px;
   overflow: hidden;
}
.contents-item img {
   cursor: pointer;
   width: 200px;
   transition: 0.5s all;
}
.contents-item img:hover {
   transform: scale(1.2, 1.2);
   transition: 0.5s all;
}

/* ポートフォリオグリッド */
.portfolio-grid {
   display: grid;
   gap: 30px;
   grid-template-columns: 330px 330px 330px;
   grid-template-rows: 330px;
   place-content: center;
}
.portfolio-item {
   width: 330px;
   overflow: hidden;
}
.portfolio-item img {
   cursor: pointer;
   width: 330px;
   transition: 0.5s all;
}
.portfolio-item img:hover {
   transform: scale(1.2, 1.2);
   transition: 0.5s all;
}

/* 各種リンク */
.gc-link {
   display: flex;
   gap: 100px;
   text-align: center;
   justify-content: center;
}
.gc-link img { width: 100px; }

/* モーダル */
.modal-wrapper {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
   width: 100%;
   height: 100%;
}
.modal-back {
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   cursor: pointer;   
}
.modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   z-index: 11;
   background: rgba(0, 0, 0, 1);
   cursor: pointer;
   transition: opacity 0.6s;
}
.modal-close:hover {
   opacity: 0.6;
}
.modal-close:before,
.modal-close:after {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 20px;
   height: 1px;
   background: #fff;
   content: '';
}
.modal-close:before {
   transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close:after {
   transform: translate(-50%, -50%) rotate(-45deg);
}
.work-window {
   width: 800px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 20px;
   border: 2px solid #FF0000;
   border-radius: 15px;
   box-shadow: 0 0 20px #FF0000 inset;
   background-color: rgba(0, 0, 0, 0.9);
}
.work-title {
   position: relative;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 700;
   font-size: 2em;
   text-align: center;
   padding: 10px 0;
   margin: 0 0 15px;
}
.work-title::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 1px;
   margin: 0 auto;
   text-align: center;
   background-image: -webkit-linear-gradient(left, transparent, #F00 35%, #F00 65%, transparent);
   background-image: linear-gradient(to right, transparent, #F00 35%, #F00 65%, transparent);
   background-position: center;
   background-repeat: no-repeat;
}
.work-content { display: flex; }
.work-movie { text-align: center; margin: 0 auto; }
.work-movie, .work-discription {
   padding: 5px;
   font-family: "Noto Sans JP", sans-serif;
   font-weight: 400;
   font-size: 16px;
}
.work-koushien {
   text-align: center;
   margin: 20px auto 0;
}

.work-portfolio-img {
   text-align: center;
   margin: 0 auto;
   padding: 10px 5px;
   width: 90%;
}
.work-portfolio-img img { width: 95%; }

/* メディアクエリ */
@media(max-width: 1280px) {
   .main-contents { max-width: 950px; }
   .logo-header {
      top: 202.185px;
      width: 900px;
   }
   .contents-grid {
      grid-template-columns: 150px 150px 150px 150px 150px;
      grid-template-rows: 150px 150px;
   }
   .contents-item { width: 150px;}
   .contents-item img { width: 150px; }
   .portfolio-grid {
      grid-template-columns: 280px 280px 280px;
      grid-template-rows: 280px;
   }
   .portfolio-item { width: 280px; }
   .portfolio-item img { width: 280px; }
}
@media(max-width: 860px) {
   .main-contents { max-width: 375px; }
   .slide { width: 300px; }
   .logo-header {
      top: 119.805px;
      width: 375px;
   }
   .tgs-period { font-size: 14px; }
   .product-header {
      font-family: "Noto Sans JP", sans-serif;
      margin: 40px auto;
      font-size: 24px;
      width: 350px;
      height: 48px;
   }
   .contents-grid {
      grid-template-columns: 150px 150px;
      grid-template-rows: 150px 150px 150px 150px 150px;
   }
   .contents-item { width: 150px; }
   .contents-item img { width: 150px; }
   .portfolio-grid {
      grid-template-columns: 280px;
      grid-template-rows: 280px 280px 280px;
   }
   .portfolio-item { width: 280px; }
   .portfolio-item img { width: 280px; }
   .gc-link { gap: 30px; }
   .gc-link img { width: 70px; }

   .modal-close {
      top: 15px;
      right: 15px;
      width: 30px;
      height: 30px;
   }
   .work-title {
      position: relative;
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 700;
      font-size: 1.5em;
      text-align: center;
      padding: 5px 0;
      margin: 0 0 10px;
   }
   .work-window { width: 80%; }
   .work-content { display: block; }
   .yt-frame { width: 256px; height: 144px; }
}