@charset "UTF-8";
/**
 * CSS Information
 * ===============================================================
 *
 * File name: _contents.scss
 * Summary:   ページ・コンテンツごとの固有スタイル
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    home
 *
 * ===============================================================
*/
/** =1
 * ========================================
 * home
 * ========================================
 */

 .topWorksUl{
   flex-wrap: wrap;
   /* justify-content: center; */
   margin: 0 -1.2%;
 }
 .topWorksLi{
   width: calc(100%/4 - 2.4%);
   margin: 0 1.2% 15px 1.2%;
   max-width: 230px;
   min-width: 150px;
 }
 .topWorksLi > a{
   padding: 10px;
   background: #f2f2f2;
 }
 .topWorksLi .imageBox .object-fit-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   font-family: 'object-fit: cover;'/*ie対応用*/;
 }
 .noLists{
   margin-top: 150px;
 }

     @media screen and (max-width: 767px) {
       .topWorksLi{
         width: calc(100%/2 - 2.4%);
         margin: 0 1.2% 8px 1.2%;
       }
       .noLists{
         margin-top: 70px;
       }
     }

 .hoverTxtArea{
   opacity: 0;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 10px;
   background: #fff;
 }
 .topWorksLi > a:hover .hoverTxtArea{
   opacity: 1;
 }
 .hoverTxtAreaInner{
   justify-content: center;
   align-items: center;
   height: 100%;
   padding: 10%;
   background: url(../image/top/hoverTxtAreaInnerBg.gif) 0 0 ;
 }
 .hoverTxtAreaInner .catBox{
   top: 10px;
   right: 10px;
   padding: 3px 8px;
   background: #fff;
   font-size: 12px;
   font-size: 1.2rem;
 }
 .hoverTxtAreaInner .worksTitle{
   font-size: 18px;
   font-size: 1.8rem;
 }


/** =2
  * ========================================
  * detail
  * ========================================
  */
.worksDetailImageGrayWrapper{
  overflow: hidden;
  padding: 40px 50px 20px;
  margin-bottom: 25px;
  background: #f2f2f2;
}
.worksDetailImageWhiteWrapperUl{
  padding: 40px 10%;
  margin-bottom: 20px;
  background: #fff;
}
.worksDetailImageWhiteWrapperUl .slick-list{
  overflow: visible;
}
.worksDetailImageLi{
  opacity: 0;
}
.worksDetailImageLi.slick-current{
  opacity: 1;
}
.worksDetailImageLi img{
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}
.worksDetailImageTitle{
  bottom: -75px;
  left: -12.5%;
  opacity: 0;
  transform: translate(-100% , 0);
  width: 50%;
  font-size: 14px;
  font-size: 1.4rem;
}
.worksDetailImageTitle.on{
  opacity: 1;
  transform: translate(0 , 0);
}

    @media screen and (max-width: 912px) {
      .worksDetailImageGrayWrapper{
        padding: 25px 30px 15px;
      }
      .worksDetailImageWhiteWrapperUl{
        padding: 25px 6%;
        margin-bottom: 15px;
      }
      .worksDetailImageLi img{
        max-height: 321px;
      }
      .worksDetailImageTitle{
        bottom: -60px;
        left: -7%;
      }
    }

    @media screen and (max-width: 767px) {
      .worksDetailImageGrayWrapper{
        padding: 15px 15px 10px;
      }
      .worksDetailImageWhiteWrapperUl{
        padding: 10px 4%;
        margin-bottom: 35px;
      }
      .worksDetailImageLi img{
        max-height: 187px;
      }
      .worksDetailImageTitle{
        bottom: -38px;
        left: -4%;
        width: auto;
        font-size: 13px;
        font-size: 1.3rem;
      }
    }

.slideArrow{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 1;
  width: 19px;
  cursor: pointer;
}
.prevArrow{
  left: -10px;
}
.nextArrow{
  right: -10px;
}

    @media screen and (max-width: 767px) {
      .slideArrow{
        width: 12px;
      }
      .prevArrow{
        left: -7px;
      }
      .nextArrow{
        right: -7px;
      }
    }

.worksDetailImageThumbnailUl{
  width: 50%;
  margin-left: auto;
  text-align: right;
}
.worksDetailImageThumbnailLi{
  display: inline-block !important;
  width: 40px !important;
  height: 40px;
  margin-left: 5px;
  float: none;
  opacity: .5;
  cursor: pointer;
}
.worksDetailImageThumbnailLi.slick-current{
  opacity: 1;
}
.worksDetailImageThumbnailLi img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;'/*ie対応用*/;
}
.worksDetailImageThumbnailUl .slick-track{
  width: auto !important;
}

    @media screen and (max-width: 912px) {
      .worksDetailImageThumbnailLi{
        width: 30px !important;
        height: 30px;
      }
    }

    @media screen and (max-width: 767px) {
      .worksDetailImageThumbnailUl{
        width: 100%;
      }
    }

.catArea{
  margin-bottom: 2px;
  padding: 3px 8px;
  background: #77a2be;
  font-size: 13px;
  font-size: 1.3rem;
}
.detailTitle{
  font-size: 20px;
  font-size: 2.0rem;
}
.yearAreaWrapper{
  font-size: 12px;
  font-size: 1.2rem;
}
.yearAreaWrapper span::after{
  content: "／";
}
.yearAreaWrapper span:last-of-type::after{
  content: "";
}
.detailTxtMark{
  margin: 15px 0;
  font-size: 8px;
  font-size: 0.8rem;
  color: #838383;
}
.freeAreaDt{
  white-space: nowrap;
}
.freeAreaDt::after{
  content: "：";
}






/** =3
* ========================================
* profile
* ========================================
*/
.profileName{
  font-size: 20px;
  font-size: 2.0rem;
}
.profileNameEn{
  margin-left: 12px;
  font-size: 12px;
  font-size: 1.2rem;
}
.profileNameJob{
  font-size: 12px;
  font-size: 1.2rem;
}
.profileNameComment{
  margin-bottom: 15px;
}
.profileNameComment:last-of-type{
  margin-bottom: 0;
}

.sectionProfileHistoryWrapper{
  margin-top: 60px;
}
.profileHistoryTitle:not(:nth-of-type(1)){
  margin-top: 30px;
}
.profileHistoryDt{
  position: relative;
  width: 80px;
}
.profileHistoryDt::after{
  content: "：";
  position: absolute;
  right: -10px;
  top: 0;
}
.profileHistoryDd{
  width: calc(100% - 80px);
  margin-left: 15px;
}

    @media screen and (max-width: 912px) {
      .sectionProfileHistoryWrapper{
        margin-top: 40px;
      }
    }




/** =4
* ========================================
* CONTACT
* ========================================
*/
.sectionContactForm .standardDl:first-of-type{
  margin-top: 10px;
  border-top: 1px dotted #aaaaaa;
}
.contactPrivacyArea {
  padding: 35px 0 0;
  font-size: 13px;
  font-size: 1.3rem;
}
.contactPrivacyAreaTitle {
  margin-bottom: 15px;
}

.checkBoxWrapper {
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  background: #eeeeee;
  font-size: 15px;
  font-size: 1.5rem;
}
.checkBoxWrapper:hover{
  background: #ddd;
}
.checkBoxWrapper .checkbox {
  width: 100%;
  padding: 25px 0;
}
.checkbox input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.checkbox input[type=checkbox] + .icon-checkbox {
  display: inline-block;
  position: relative;
  bottom: -.2em;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  border: 1px solid #555;
  background-color: #fff;
  vertical-align: baseline;
}
.checkbox input[type=checkbox] + .icon-checkbox:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 60%;
  height: 30%;
  margin-top: -28%;
  margin-left: -29%;
  transform: rotate(-45deg);
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  opacity: 0;
}
.checkbox input[type=checkbox]:checked + .icon-checkbox:after {
  opacity: 1;
}
.is-disabled{
  opacity: 0.3;
}
.is-disabled .submitBtn {
  cursor: default;
  pointer-events: none;
}

.formBtnWrapper {
  justify-content: center;
}
.formBtnWrapper button.btn{
  margin-left: 10px;
  margin-right: 10px;
}

.thanksTxtWrapper p{
  margin-bottom: 15px;
}
.thanksTxtWrapper p:first-child{
  font-size: 15px;
  font-size: 1.5rem;
}



/** =5
* ========================================
* PRIVACY
* ========================================
*/
.privacyDt{
  margin-bottom: 20px;
  font-size: 15px;
  font-size: 1.5rem;
}
.privacyDd{
  padding-left: 25px;
  margin-bottom: 30px;
}
.privacyDd:last-of-type{
  margin-bottom: 0;
}

    @media screen and (max-width: 767px) {
      .privacyDd{
        padding-left: 12px;
      }
    }