@charset "UTF-8";
/**
 * SCSS Information
 * ===============================================================
 *
 * File name: _module.scss
 * Summary:   モジュール用スタイル
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    modules
 *
 * ===============================================================
*/

.advantageColor,
.blogColor{ color: #9cc9b6;}
.videoColor,
.sitemapColor,
.priceColor{ color: #bbbc79;}
.designColor,
.informationColor,
.recruitColor{ color: #e5c95e;}
.worksColor,
.privacyColor{ color: #f6b7a3;}
.companyColor{ color: #b5b6db;}
.flowColor{ color: #9dd2ed;}
.faqColor{ color: #75c5a3;}
.contactColor{ color: #59abb5;}
.materialColor{ color: #59b57c;}


/** =1
 * ========================================
 * modules
 * ========================================
 */

.mainLogoWideView{
  width: 84px;
  margin: 35px 0 0 50px;
}
.mainLogoWideView .natural{
  display: none;
}
.mainLogoWideView .cls-1,
.mainLogoWideView .cls-2,
.mainLogoWideView .cls-3,
.mainLogoWideView .cls-4,
.mainLogoWideView .cls-5,
.mainLogoWideView .cls-6,
.mainLogoWideView .cls-7,
.mainLogoWideView .cls-8,
.responsiveLogo .cls-1,
.responsiveLogo .cls-2,
.responsiveLogo .cls-3,
.responsiveLogo .cls-4,
.responsiveLogo .cls-5,
.responsiveLogo .cls-6,
.responsiveLogo .cls-7,
.responsiveLogo .cls-8{
  stroke: none;
  stroke-width: 0;
  stroke-miterlimit: 0;
}
.mainLogoWideView .cls-1,
.mainLogoWideView .cls-8{ fill: #3a4361;}
.mainLogoWideView .cls-2{ fill: #f6b7a3;}
.mainLogoWideView .cls-3{ fill: #ffea9a;}
.mainLogoWideView .cls-4{ fill: #b5b6db;}
.mainLogoWideView .cls-5{ fill: #bbbc79;}
.mainLogoWideView .cls-6{ fill: #cceafb;}
.mainLogoWideView .cls-7{ fill: #9dc9b6;}

.responsiveLogo{
  width: 120px;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.responsiveLogo .natural{
  display: none;
}
.is-menuOpened .responsiveLogo{
  display: none;
}
.responsiveLogo .cls-1{ fill: #f6b7a3;}
.responsiveLogo .cls-2{ fill: #ffea9a;}
.responsiveLogo .cls-3{ fill: #b5b6db;}
.responsiveLogo .cls-4{ fill: #bbbc79;}
.responsiveLogo .cls-5{ fill: #cceafb;}
.responsiveLogo .cls-6{ fill: #9dc9b6;}
.responsiveLogo .cls-7,
.responsiveLogo .cls-8{ fill: #3a4361;}

.navLi a{
  position: relative;
  display: inline-block;
  padding: 7px 5px 7px 45px;
  color: #454e6a;
  font-size: 15px;
  font-size: 1.5rem;
}
.navLi.advantageColor a:hover,
.navLi.advantageColor a.current,
.navLi.advantageColor a .english{ color: #9cc9b6;}
.navLi.videoColor a:hover,
.navLi.videoColor a.current,
.navLi.videoColor a .english,
.navLi.priceColor a:hover,
.navLi.priceColor a.current,
.navLi.priceColor a .english{ color: #bbbc79;}
.navLi.designColor a:hover,
.navLi.designColor a.current,
.navLi.designColor a .english{ color: #e5c95e;}
.navLi.worksColor a:hover,
.navLi.worksColor a.current,
.navLi.worksColor a .english{ color: #f6b7a3;}
.navLi.companyColor a:hover,
.navLi.companyColor a.current,
.navLi.companyColor a .english{ color: #b5b6db;}
.navLi.flowColor a:hover,
.navLi.flowColor a.current,
.navLi.flowColor a .english{ color: #9dd2ed;}
.navLi.faqColor a:hover,
.navLi.faqColor a.current,
.navLi.faqColor a .english{ color: #75c5a3;}

.navLi a .english{
  display: inline-block;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  margin-left: 10px;
  font-size: 11px;
  font-size: 1.1rem;
}
.navLi a:hover .english,
.navLi a.current .english{
  opacity: 1;
}
.navLi a::before{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0 , -50%);
  content: "";
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  display: inline-block;
  width: 7px;
  height: 2px;
}
.navLi.advantageColor a::before{ background: #9cc9b6;}
.navLi.videoColor a::before,
.navLi.priceColor a::before{ background: #bbbc79;}
.navLi.designColor a::before{ background: #e5c95e;}
.navLi.worksColor a::before{ background: #f6b7a3;}
.navLi.companyColor a::before{ background: #b5b6db;}
.navLi.flowColor a::before{ background: #9dd2ed;}
.navLi.faqColor a::before{ background: #75c5a3;}
.navLi a:hover::before,
.navLi a.current::before{
  width: 35px;
}

.sideContactLi a{
  display: inline-block;
  border-right: 20px solid transparent;
  height: 0;
  padding: 0 30px 0 35px;
  margin-top: 2px;
  font-size: 13px;
  font-size: 1.3rem;
  color: #fff;
  line-height: 3em;
}
.sideContactLi.sideContactLiContact a{
  width: 110px;
  border-bottom: 40px solid #59abb5;
}
.sideContactLi.sideContactLiMaterial a{
  width: 130px;
  border-bottom: 40px solid #59b57c;
}
.sideContactLi.sideContactLiContact a:hover{
  border-bottom: 40px solid rgba(19,136,150,1);
}
.sideContactLi.sideContactLiMaterial a:hover{
  border-bottom: 40px solid rgba(19,150,69,1);
}
.sideContactNavContactIcon{
  width: 15px;
  vertical-align: baseline;
}
.sideContactNavMaterialIcon{
  width: 12px;
  vertical-align: -.1em;
}

.sideContactLiSns{
  margin-bottom: 10px;
}
.sideContactLiSnsUl{
  padding-left: 18px;
  font-size: 2.0rem;
}
.sideContactLiSnsLi{
  margin-left: 12px;
}
a.sideContactLiSnsLinkInsta{ color: #c13584;}
a.sideContactLiSnsLinkYoutube{ color: #FF0000;}
a.sideContactLiSnsLinkTwitter{ color: #1DA1F2;}
a.sideContactLiSnsLinkFacebook{ color: #3B5998;}



.breadcrumb{
  top: 40px;
  right: 40px;
  color: #000;
  font-size: 12px;
  font-size: 1.2rem;
}

    @media screen and (max-width: 999px) {
      .breadcrumb{
        top: 84px;
        right: 18px;
      }
    }

    @media screen and (max-width: 767px) {
      #home .breadcrumb{
        top: 91px;
      }
      .breadcrumb{
        top: 78px;
      }
      .innerPage .breadcrumb{
        display: none;
      }
    }


/*--中ページ--*/
.sectionInnerPageTitle{
  padding-bottom: 80px;
  margin-bottom: 80px;
}
[data-action="detail"] .sectionInnerPageTitle{
  padding-bottom: 0;
}
.innerPageTitle{
  margin: 0 0 70px 40px;
  padding-left: 40px;
  font-size: 26px;
  font-size: 2.6rem;
}
.innerPageTitle::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0 , -50%);
  width: 25px;
  height: 2px;
  background: #9cc9b6;
}
#advantage .innerPageTitle::before,
#blog .innerPageTitle::before{ background: #9cc9b6;}
#video .innerPageTitle::before,
#sitemap .innerPageTitle::before,
#price .innerPageTitle::before{ background: #bbbc79;}
#design .innerPageTitle::before,
#information .innerPageTitle::before,
#recruit .innerPageTitle::before{ background: #e5c95e;}
#works .innerPageTitle::before,
#privacy .innerPageTitle::before{ background: #f6b7a3;}
#company .innerPageTitle::before{ background: #b5b6db;}
#flow .innerPageTitle::before{ background: #9dd2ed;}
#faq .innerPageTitle::before{ background: #75c5a3;}
#contact .innerPageTitle::before{ background: #59abb5;}
#material .innerPageTitle::before{ background: #59b57c;}

.innerPageTitleCopyH3{
  margin-bottom: 30px;
  font-size: 36px;
  font-size: 3.6rem;
  line-height: 1.4;
}
.innerPageTitleCopyP{
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.8;
}
.pageTitleEnglish{
  bottom: 0;
  right: 0;
  z-index: -1;
  margin-top: -55px;
  font-size: 138px;
  font-size: 13.8rem;
  color: #eeeeee;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

    @media screen and (max-width: 999px) {
      .sectionInnerPageTitle{
        padding-bottom: 60px;
      }
      .pageTitleEnglish{
        font-size: 108px;
        font-size: 10.8rem;
      }
    }

    @media screen and (max-width: 767px) {
      .sectionInnerPageTitle{
        margin-bottom: 60px;
        padding-bottom: 30px;
      }
      [data-action="detail"] .sectionInnerPageTitle{
        margin-bottom: 30px;
      }
      .innerPageTitle{
        margin: 0 40px 50px 20px;
        padding-left: 32px;
        font-size: 22px;
        font-size: 2.2rem;
      }
      .innerPageTitle::before{
        width: 22px;
      }
      .innerPageTitleCopyH3{
        margin-bottom: 20px;
        font-size: 26px;
        font-size: 2.6rem;
      }
      .innerPageTitleCopyP{
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 1.8;
      }
      .pageTitleEnglish{
        font-size: 68px;
        font-size: 6.8rem;
      }
    }


/*--マーク付きH3--*/
.h3TitleHasMark{
  margin: 90px auto;
  font-size: 22px;
  font-size: 2.2rem;
}
.h3TitleHasMark::before{
  content: "";
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50% , 0);
  width: 31px;
  height: 16px;
  background: url(../image/common/h3mark.svg) center no-repeat;
  background-size: contain;
}
.underH3P{
  margin: -30px 0 50px;
}
.h3markSvgWrapper{
  margin: 30px 0;
}
.h3markSvg{
  width: 31px;
  height: 16px;
}
.h3markSvg .cls-1{
  fill: #000;
}

    @media screen and (max-width: 767px) {
      .h3TitleHasMark{
        margin: 40px auto 60px;
        font-size: 20px;
        font-size: 2.0rem;
        line-height: 1.4;
      }
      .h3TitleHasMark::before{
        top: auto;
        bottom: -24px;
        width: 27px;
        height: 13px;
      }
      .underH3P{
        margin: -10px 0 30px;
      }
      .h3markSvgWrapper{
        margin: 0 0 30px;
      }
      .h3markSvg{
        width: 27px;
        height: 13px;
      }
    }

/*--h4--*/
.standardH4{
  margin: 0 0 .5em;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
}

/*--悩みを解決 DL--*/
.detailSolutionDl{
  max-width: 85%;
}
.detailSolutionDt{
  margin-bottom: 10px;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: left;
}
.detailSolutionDd{
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px dotted #aaaaaa;
  text-align: left;
}
.detailSolutionDd:last-of-type{
  margin-bottom: 0;
}
#faq .detailSolutionDd:last-of-type{
  margin-bottom: 30px;
}

    @media screen and (max-width: 767px) {
      .detailSolutionDl{
        max-width: 95%;
      }
      .detailSolutionDt{
        margin-bottom: 5px;
        font-size: 15px;
        font-size: 1.5rem;
      }
      .detailSolutionDd{
        padding-bottom: 20px;
        margin-bottom: 20px;
      }
      #faq .detailSolutionDd:last-of-type{
        margin-bottom: 20px;
      }
    }

/*--活用方法 Gallery--*/
.utilizationGallery{
  flex-wrap: wrap;
  align-items: center;
}
.utilizationGalleryPhoto,
.utilizationGalleryTxt{
  width: 50%;
}
.utilizationGalleryPhoto img{
  object-fit: cover;
  width: 100%;
  height: 220px;
}
.utilizationGalleryTxt{
  padding: 0 30px;
}
.utilizationGalleryTxtCatch{
  position: relative;
  margin-bottom: 15px;
  font-size: 20px;
  font-size: 2.0rem;
}
.utilizationGalleryTxtCatch::before{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 35px;
  height: 2px;
  background: #bbbc79;
}
#design .utilizationGalleryTxtCatch::before{
  background: #e5c95e;
}

    @media screen and (max-width: 767px) {
      .utilizationGallery{
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: -20px;
      }
      .utilizationGallery div:nth-child(1){ order: 1;}
      .utilizationGallery div:nth-child(2){ order: 2;}
      .utilizationGallery div:nth-child(3){ order: 4;}
      .utilizationGallery div:nth-child(4){ order: 3;}
      .utilizationGallery div:nth-child(5){ order: 5;}
      .utilizationGallery div:nth-child(6){ order: 6;}
      .utilizationGallery div:nth-child(7){ order: 8;}
      .utilizationGallery div:nth-child(8){ order: 7;}
      .utilizationGallery div:nth-child(9){ order: 9;}
      .utilizationGallery div:nth-child(10){ order: 10;}
      .utilizationGallery div:nth-child(11){ order: 12;}
      .utilizationGallery div:nth-child(12){ order: 11;}
      .utilizationGallery div:nth-child(13){ order: 13;}
      .utilizationGallery div:nth-child(14){ order: 14;}
      .utilizationGallery div:nth-child(15){ order: 16;}
      .utilizationGallery div:nth-child(16){ order: 15;}
      .utilizationGallery div:nth-child(17){ order: 17;}
      .utilizationGallery div:nth-child(18){ order: 18;}
      .utilizationGalleryPhoto,
      .utilizationGalleryTxt{
        width: 100%;
        margin-bottom: 20px;
      }
      .utilizationGalleryPhoto{
        margin-bottom: 10px;
      }
      .utilizationGalleryPhoto img{
        height: 140px;
      }
      .utilizationGalleryTxt{
        padding: 0 10px;
      }
      .utilizationGalleryTxtCatch{
        margin-bottom: 10px;
        font-size: 16px;
        font-size: 1.6rem;
      }
    }

/*--シナリオ例 Flow--*/
.scenarioFlowWrapper{
  justify-content: space-between;
  flex-wrap: wrap;
}
.scenarioFlowBlock{
  width: 49%;
  margin-bottom: 15px;
}
.scenarioFlowNo{
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 0.7;
}
.scenarioFlowNo span{
  font-style: italic;
}
.scenarioFlowTxtBox{
  height: calc(100% - 27px);
  padding: 25px;
  border: 3px solid #bbbc79;
}
#advantage .scenarioFlowTxtBox{
  border: 3px solid #9cc9b6;
}
#design .scenarioFlowTxtBox{
  border: 3px solid #e5c95e;
}
.scenarioFlowTitle{
  margin-bottom: 15px;
  font-size: 22px;
  font-size: 2.2rem;
}

    @media screen and (max-width: 767px) {
      .scenarioFlowWrapper{
        flex-direction: column;
      }
      .scenarioFlowBlock{
        width: 100%;
      }
      .scenarioFlowBlock:last-child{
        margin-bottom: 0;
      }
      .scenarioFlowNo{
        font-size: 18px;
        font-size: 1.8rem;
      }
      .scenarioFlowTxtBox{
        padding: 15px;
      }
      .scenarioFlowTitle{
        margin-bottom: 10px;
        font-size: 16px;
        font-size: 1.6rem;
      }
    }

/*--会社概要Dl--*/
.companyProfileWrapper{
  width: 85%;
  margin: 0 auto;
}
.companyProfileDl{
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px dotted #aaaaaa;
}
.companyProfileDl:first-child{
  padding-top: 0;
}
#contact .companyProfileDl:first-child{
  padding-top: 30px;
}
#contact p.companyProfileDl:first-child{
  padding-top: 0;
}
.companyProfileDt{
  width: 80px;
  margin-right: 30px;
  font-weight: 500;
}
.companyProfileDd{
  width: calc(100% - 110px);
}

    @media screen and (max-width: 767px) {
      .companyProfileWrapper{
        width: 95%;
      }
      .companyProfileDl{
        align-items: flex-start;
        flex-direction: column;
        padding: 20px 0;
      }
      .companyProfileDt{
        width: 100%;
        margin-right: 0;
      }
      .companyProfileDd{
        width: calc(100% - 80px);
      }
    }

/*--wysiwygArea--*/
.wysiwygArea{
  font-size: 14px;
  font-size: 1.4rem;
}
.wysiwygArea h3{
  position: relative;
  margin: 90px auto;
  font-size: 22px;
  font-size: 2.2rem;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
}
.wysiwygArea h3::before{
  content: "";
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translate(-50% , 0);
  width: 31px;
  height: 16px;
  background: url(../image/common/h3mark.svg) center no-repeat;
  background-size: contain;
}
.wysiwygArea h4{
  margin: 3.5em 0 1em;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
}
.wysiwygArea p{
  margin-bottom: 1.5em;
}
.wysiwygArea strong,
.wysiwygArea b{
  font-weight: 500;
}
.wysiwygArea i{
  font-style: italic;
}
.wysiwygArea a{
  text-decoration: underline;
}
.wysiwygArea ul{
  margin-bottom: 1.5em;
}
.wysiwygArea li{
  margin-left: 18px;
  list-style-type: circle;
}

.wysiwygArea ul.sceneUl{
  margin-bottom: 0;
}
.wysiwygArea .sceneUl p{
  margin-bottom: 0;
}

    @media screen and (max-width: 767px) {
      .wysiwygArea h3{
        margin: 40px auto 60px;
        font-size: 20px;
        font-size: 2.0rem;
        line-height: 1.4;
      }
      .wysiwygArea h3::before{
        top: auto;
        bottom: -24px;
        width: 27px;
        height: 13px;
      }
      .wysiwygArea h4{
        margin: 1.5em 0 .5em;
      }
      .wysiwygArea .sceneUl p{
        font-size: 12px;
        font-size: 1.2rem;
        line-height: 1.4;
      }
    }


/*--colorBox--*/
.grayBox{
  padding: 20px;
  background: #f0f0f0;
}
.whiteBox{
  padding: 40px 20px;
  background: #fff;
}

    @media screen and (max-width: 767px) {
      .whiteBox{
        padding: 20px 10px;
        background: #fff;
      }
    }


/*
* video production Icon UL
* ----------------------------------
*/

.videoIconUl{
  flex-wrap: wrap;
  align-content: flex-start;
  margin-bottom: 70px;
}
.videoIconLi a{
  width: 200px;
  height: 200px;
}
.videoIconLi:nth-of-type(even) a{
  background: #eee;
}
.videoIconLi a:hover{
  background: #138896;
}
.videoIconLiBeforeContents{
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 25px 0 45px;
}
.videoIconLi a:hover .videoIconLiBeforeContents{
  opacity: 0;
}
.videoIconWrapper{
  justify-content: center;
  align-items: center;
  height: 100%;
}
.videoIconTitle{
  font-size: 16px;
  font-size: 1.6rem;
}
.videoIconText{
  font-size: 15px;
  font-size: 1.5rem;
}
.topVideoIconLiAfterContents{
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  opacity: 0;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 25px;
}
.videoIconLi a:hover .topVideoIconLiAfterContents{
  opacity: 1;
}

.videoIconCompany{ width: 78px; margin-top: -10px;}
.videoIconProduct{ width: 72px; margin-top: -10px;}
.videoIconShop{ width: 78px;}
.videoIconShop .cls-1{ fill: #231815;}
.videoIconRecruit{ width: 75px;}
.videoIconManual{ width: 70px; margin-bottom: -10px;}
.videoIconAnimation{ width: 68px;}
.videoIconCg{ width: 65px;}
.videoIconDrone{ width: 72px;}
.videoIconDrone .cls-1{ fill: #231815;}
.videoIconWorld{ width: 76px; margin-top: -5px;}
.videoIconLive{ width: 70px;}
.videoIconEdit{ width: 68px;}
.videoIconVr{ width: 70px;}
.videoIconInteractive{ width: 80px;}

    @media screen and (max-width: 1256px) {
      .videoIconLi{
        width: 33.333%;
      }
      .videoIconLi a{
        width: 100%;
      }
    }

    @media screen and (max-width: 767px) {
      .videoIconUl{
        margin-bottom: 30px;
      }
      .videoIconLi a{
        height: 120px;
      }
      .videoIconLiBeforeContents{
        padding: 20px 5px;
      }
      .videoIconLi a:hover .videoIconLiBeforeContents{
        opacity: 1;
      }
      .videoIconWrapper{
        height: auto;
      }
      .videoIconTitle{
        font-size: 13px;
        font-size: 1.3rem;
        line-height: 1.3;
      }
      .videoIconText{
        font-size: 12px;
        font-size: 1.2rem;
      }
      .topVideoIconLiAfterContents{
        display: none;
      }
      .videoIconLi a:hover .topVideoIconLiAfterContents{
        opacity: 0;
      }

      .videoIconCompany{ width: 53px; margin-top: -10px;}
      .videoIconProduct{ width: 47px; margin-top: -4px;}
      .videoIconShop{ width: 53px;}
      .videoIconRecruit{ width: 50px;}
      .videoIconManual{ width: 45px; margin-bottom: 0; margin-top: 3px;}
      .videoIconAnimation{ width: 43px;}
      .videoIconCg{ width: 40px;}
      .videoIconDrone{ width: 43px; margin-top: -2px;}
      .videoIconWorld{ width: 51px; margin-top: -5px;}
      .videoIconLive{ width: 45px;}
      .videoIconEdit{ width: 43px;}
      .videoIconVr{ width: 45px;}
      .videoIconInteractive{ width: 55px;}
    }

/*-- design Icon Ul--*/

.designIconUl a{
  cursor: default;
}
.designIconCorporate{ width: 78px; margin-top: -10px;}
.designIconRecruit{ width: 75px;}
.designIconEc{ width: 78px;}
.designIconLp{ width: 80px;}
.designIconOwnd{ width: 73px;}
.designIconMultilingual{ width: 78px;}
.designIconSystem{ width: 72px;}
.designIconSupport{ width: 68px;}

.designIconLogo{ width: 66px;}
.designIconNamecard{ width: 78px;}
.designIconDtp{ width: 81px;}
.designIconGoods{ width: 72px;}
.designIconBooth{ width: 61px;}
.designIconApparel{ width: 75px;}

.designIconLiGoods .videoIconTitle,
.designIconLiBooth .videoIconTitle{
  margin-bottom: -17px;
}

    @media screen and (max-width: 767px) {
      .designIconCorporate{ width: 53px; margin-top: -10px;}
      .designIconRecruit{ width: 50px;}
      .designIconEc{ width: 53px;}
      .designIconLp{ width: 55px;}
      .designIconOwnd{ width: 48px;}
      .designIconMultilingual{ width: 53px;}
      .designIconSystem{ width: 47px;}
      .designIconSupport{ width: 43px;}

      .designIconLogo{ width: 41px;}
      .designIconNamecard{ width: 53px;}
      .designIconDtp{ width: 56px;}
      .designIconGoods{ width: 47px;}
      .designIconBooth{ width: 46px;}
      .designIconApparel{ width: 50px;}

      .designIconLiGoods .videoIconTitle,
      .designIconLiBooth .videoIconTitle{
        margin-bottom: 0;
      }
    }

/*
* btn
* ----------------------------------
*/

/*--blackbtn--*/
a.blackBtn,
button.blackBtn{
  display: block;
  border-bottom: 44px solid #000;
  border-right: 25px solid transparent;
  height: 0;
  margin-top: 40px;
  width: 100%;
  max-width: 325px;
  color: #fff;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2.6em;
}
a.blackBtn:hover,
button.blackBtn:hover{
  border-bottom: 44px solid #000;
}
a.blackBtn::before,
button.blackBtn::before{
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 35px;
  height: 0;
  border-bottom: 44px solid #000;
  border-right: 25px solid transparent;
  z-index: -1;
}

    @media screen and (max-width: 999px) {
      button.blackBtn{
        display: block;
        height: 44px;
        margin: 40px auto 0;
        width: 90%;
        max-width: 720px;
        background: #000;
        border: none;
      }
      button.blackBtn:hover{
        border-bottom: none;
      }
      button.blackBtn::before{
        display: none;
      }
      button.blackBtn::after{
        content:"＞";
        display: inline-block;
        margin-left: .5em;
      }
    }

    @media screen and (max-width: 767px) {
      a.blackBtn,
      button.blackBtn{
        margin: 40px auto 0;
        width: 90%;
        max-width: 720px;
      }
    }


.sectionWorks a.blackBtn.linkToWorks,
.sectionBlog a.blackBtn.linkToBlog{
  margin-top: 100px;
}
.sectionInfo a.blackBtn.linkToInfo{
  margin-top: 70px;
}
a.blackBtn.marginAuto,
button.blackBtn.marginAuto{
  margin: 40px auto 0;
}

a.blackBtn.btnBig{
  max-width: 720px;
  margin: 0 auto 70px;
  border-bottom: 74px solid #000;
  border-right: 40px solid transparent;
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 3.2em;
}
a.blackBtn.btnBig::before{
  width: 50px;
  border-bottom: 74px solid #000;
  border-right: 40px solid transparent;
}

    @media screen and (max-width: 767px) {
      .sectionWorks a.blackBtn.linkToWorks,
      .sectionBlog a.blackBtn.linkToBlog{
        margin-top: 80px;
      }
      .sectionInfo a.blackBtn.linkToInfo{
        margin-top: 40px;
      }
      a.blackBtn.btnBig{
        width: 90%;
        margin: 0 auto 40px;
        border-bottom: 44px solid #000;
        border-right: 25px solid transparent;
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 2.6em;
      }
      a.blackBtn.btnBig::before{
        width: 35px;
        border-bottom: 44px solid #000;
        border-right: 25px solid transparent;
      }
    }

/*--backBtntn--*/
a.blackBtn.backBtn{
  border-right: none;
  border-left: 25px solid transparent;
}
a.blackBtn.backBtn::before{
  left: auto;
  right: 100%;
  border-right: none;
  border-left: 25px solid transparent;
}

/*--hover & 各種カラー--*/
a.blackBtn.linkToVideo:hover,
a.blackBtn.linkToVideo::before,
a.blackBtn.linkToPrice:hover,
a.blackBtn.linkToPrice::before{
  border-bottom-color: #bbbc79;
}
a.blackBtn.linkToAdvantage:hover,
a.blackBtn.linkToAdvantage::before,
a.blackBtn.linkToBlog:hover,
a.blackBtn.linkToBlog::before{
  border-bottom-color: #9cc9b6;
}
a.blackBtn.linkToWorks:hover,
a.blackBtn.linkToWorks::before{
  border-bottom-color: #f6b7a3;
}
a.blackBtn.linkToInfo:hover,
a.blackBtn.linkToInfo::before,
a.blackBtn.linkToDesign:hover,
a.blackBtn.linkToDesign::before,
a.blackBtn.linkToRecruit:hover,
a.blackBtn.linkToRecruit::before{
  border-bottom-color: #e5c95e;
}
a.blackBtn.linkToContact:hover,
a.blackBtn.linkToContact::before,
button.blackBtn.linkToContact:hover,
button.blackBtn.linkToContact::before,
a.blackBtn.linkToFlow:hover,
a.blackBtn.linkToFlow::before,
button.blackBtn.linkToFlow:hover,
button.blackBtn.linkToFlow::before{
  border-bottom-color: #59abb5;
 }
 a.blackBtn.linkToMaterial:hover,
 a.blackBtn.linkToMaterial::before,
 button.blackBtn.linkToMaterial:hover,
 button.blackBtn.linkToMaterial::before{
   border-bottom-color: #59b57c;
}
a.blackBtn.linkToFaq:hover,
a.blackBtn.linkToFaq::before{
  border-bottom-color: #75c5a3;
}

#contact[data-action="detail"] a.blackBtn{
  margin-top: 20px;
  border-bottom: 44px solid #aaa;
}
#contact[data-action="detail"] a.blackBtn.linkToContact:hover,
#contact[data-action="detail"] a.blackBtn.linkToContact::before{
  border-bottom-color: #777;
}

/*--colorfulbtn--*/
a.colorfulBtn{
  display: block;
  border-bottom: 36px solid #000;
  border-right: 20px solid transparent;
  height: 0;
  margin-top: 30px;
  max-width: 336px;
  color: #fff;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2.2em;
}
a.colorfulBtn.mt-15{
  margin-top: 15px;
}
a.colorfulBtn.half{
  margin-top: 10px;
  min-width: 178px;
}
a.colorfulBtn.half.both{
  margin-left: 5px;
}
a.colorfulBtn.half.both::before{
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  border-top: 36px solid #000;
  border-left: 20px solid transparent;
  height: 0;
}
a.colorfulBtn.linkToAdvantage{
  border-bottom: 36px solid #9cc9b6;
}
a.colorfulBtn.linkToVideo{
  border-bottom: 36px solid #bbbc79;
}
a.colorfulBtn.linkToDesign{
  border-bottom: 36px solid #e5c95e;
}
a.colorfulBtn.linkToDesign.half.both::before{
  border-top: 36px solid #e5c95e;
}
a.colorfulBtn.linkToCompany{
  border-bottom: 36px solid #b5b6db;
}
a.colorfulBtn.linkToWorks{
  border-bottom: 36px solid #f6b7a3;
}
a.colorfulBtn.linkToContact{
  border-bottom: 36px solid #59abb5;
}
a.colorfulBtn.linkToMaterial{
  border-bottom: 36px solid #59b57c;
}

    @media screen and (max-width: 767px) {
      a.colorfulBtn{
        border-bottom: 36px solid #000;
        margin-top: 20px;
        max-width: 720px;
        font-size: 13px;
        font-size: 1.3rem;
      }
      a.colorfulBtn.linkToAdvantage{
        border-bottom: 30px solid #9cc9b6;
      }
      a.colorfulBtn.linkToAdvantage.half.both::before{
        border-top: 30px solid #9cc9b6;
      }
      a.colorfulBtn.linkToVideo{
        border-bottom: 30px solid #bbbc79;
      }
      a.colorfulBtn.linkToDesign{
        border-bottom: 30px solid #e5c95e;
      }
      a.colorfulBtn.linkToDesign.half.both::before{
        border-top: 30px solid #e5c95e;
      }
      a.colorfulBtn.linkToCompany{
        border-bottom: 30px solid #b5b6db;
      }
      a.colorfulBtn.linkToWorks{
        border-bottom: 30px solid #f6b7a3;
      }
      a.colorfulBtn.linkToContact{
        border-bottom: 30px solid #59abb5;
      }
      a.colorfulBtn.linkToMaterial{
        border-bottom: 30px solid #59b57c;
      }
    }


/*
* AdvantageReason
* ----------------------------------
*/
.reasonVerticalUl{
  justify-content: center;
}
.reasonVerticalLi{
  writing-mode: vertical-rl;
  border-left: 1px solid #000;
  font-size: 18px;
  font-size: 1.8rem;
}
.reasonVerticalLi:last-of-type{
  border-right: 1px solid #000;
}
.reasonVerticalLi a{
  position: relative;
  display: block;
  padding: 25px 35px 5px;
  line-height: 1;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
.reasonVerticalLi a::before{
  transition: all 300ms ease-in-out;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% , 0);
  display: block;
  width: 24px;
  height: 4px
}
.reasonVerticalLi.markAdvantageColor a::before{ background: #9cc9b6;}
.reasonVerticalLi.markVideoColor a::before{ background: #bbbc79;}
.reasonVerticalLi.markDesignColor a::before{ background: #e5c95e;}
.reasonVerticalLi.markWorksColor a::before{ background: #f6b7a3;}
.reasonVerticalLi.markCompanyColor a::before{ background: #b5b6db;}
.reasonVerticalLi.markFlowColor a::before{ background: #9dd2ed;}

.reasonVerticalLi a:hover{
  /* margin-top: -20px;
  padding-bottom: 25px; */
}
.reasonVerticalLi.markAdvantageColor a:hover{ color: #9cc9b6;}
.reasonVerticalLi.markVideoColor a:hover{ color: #bbbc79;}
.reasonVerticalLi.markDesignColor a:hover{ color: #e5c95e;}
.reasonVerticalLi.markWorksColor a:hover{ color: #f6b7a3;}
.reasonVerticalLi.markCompanyColor a:hover{ color: #b5b6db;}
.reasonVerticalLi.markFlowColor a:hover{ color: #9dd2ed;}
.reasonVerticalLi a:hover::before{
  transform: translate(calc(-50% - 17px) , 0);
}

.reasonVerticalLi .reasonSecretTxt{
  opacity: 0;
  display: block;
  transition: all 300ms ease-in-out;
  width: 0;
  height: 0;
  line-height: 1.2;
}
.reasonVerticalLi a:hover .reasonSecretTxt{
  opacity: 1;
  width: auto;
  height: auto;
  margin-left: 15px;
  color: #000;
}

    @media screen and (max-width: 767px) {
      .reasonVerticalLi{
        font-size: 15px;
        font-size: 1.5rem;
      }
      .reasonVerticalLi a{
        padding: 25px 15px 5px;
      }
    }

/*
* worksBlogList
* ----------------------------------
*/
.slickWrapper{
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.slickWrapper.slick-initialized{
  opacity: 1;
}
.slick-track{
  margin: 0 auto;
}
.footerContentsBnrLinkWrapper .slick-track{
  margin: 0 0 0 auto;
}
.slide-arrow{
  cursor: pointer;
  position: absolute;
  bottom: -70px;
  width: 35px;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.slide-arrow:hover{
  opacity: 0.4;
}
.slide-arrow.prev-arrow{ left: 10px;}
.slide-arrow.next-arrow{ left: 55px;}

.worksBlogListUl{
  margin: 0 -10px;
}
.worksBlogListLi{
  margin: 0 10px;
}

    @media screen and (max-width: 767px) {
      .slide-arrow{
        bottom: -60px;
      }
      .slide-arrow.prev-arrow{ left: 39%;}
      .slide-arrow.next-arrow{ left: 50%;}
      .worksBlogListUl{
        margin: 0 -5px;
      }
      .worksBlogListLi{
        margin: 0 5px;
      }
    }

.worksBlogThumbnailImg{
  overflow: hidden;
  max-width: 320px;
  height: 180px;
}
.worksBlogThumbnailImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
#material .worksBlogThumbnailImg{
  height: 227px;
  border: 1px solid #ccc;
}
#material .worksBlogThumbnailImg img{
  object-fit: contain;
}
.worksBlogListLi a:hover .worksBlogThumbnailImg img{
  transform: scale(1.2);
}
.worksBlogThumbnailTxtBox{
  padding-top: 10px;
}
.worksListUl .worksBlogThumbnailTxtBox::before{
  content: "";
  position: absolute;
  bottom: 3px;
  right: 0;
  width: 34px;
  height: 1px;
  background: #000;
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}
.worksListUl .worksBlogThumbnailTxtBox::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 44px;
  height: 1px;
  background: #000;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.worksListUl .worksBlogListLi a:hover .worksBlogThumbnailTxtBox::before{
  width: 54px;
  background: #f6b7a3;
}
.worksListUl .worksBlogListLi a:hover .worksBlogThumbnailTxtBox::after{
  width: 104px;
  background: #f6b7a3;
}
.worksCatCostWrapper{
  flex-direction: column;
  /* justify-content: space-between; */
  margin-bottom: 5px;
}
.worksCatUl{
  flex-wrap: wrap;
}
.worksBlogCat{
  display: inline-block;
  padding: 5px 7px;
  margin-bottom: 5px;
  border: 1px solid #000;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 1;
}
.worksCat{
  margin-right: 5px;
}
.worksCost{
  /* white-space: nowrap; */
  /* margin-left: 5px; */
  text-align: right;
  font-size: 12px;
  font-size: 1.2rem;
}
.worksClient{
  font-size: 12px;
  font-size: 1.2rem;
}
.worksBlogTitle{
  font-size: 15px;
  font-size: 1.5rem;
}

.blogDateCatWrapper{
  justify-content: space-between;
  margin-bottom: 5px;
}
.blogCost{
  margin-right: 5px;
  color: #666666;
  font-weight: 400;
}

    @media screen and (max-width: 767px) {
      .worksBlogThumbnailImg{
        height: 100px;
      }
      #material .worksBlogThumbnailImg{
        height: 125px;
      }
      .worksBlogThumbnailTxtBox{
        padding-bottom: 10px;
      }
      .blogsListUl .worksBlogTitle{
        font-size: 14px;
        font-size: 1.4rem;
      }
    }


/**--works blog 各ページ--**/
.sectionWorksBlogList .worksBlogListUl{
  flex-wrap: wrap;
}
.sectionWorksBlogList .worksBlogListLi{
  width: 100%;
  max-width: 320px;
  margin-bottom: 20px;
}

    @media screen and (min-width: 768px) and (max-width: 1256px) {
      .sectionWorksBlogList .worksBlogListLi{
        width: 30.4%;
      }
      .sectionWorksBlogList .worksBlogListLi a{
        width: 100%;
      }
    }

    @media screen and (max-width: 767px) {
      .sectionWorksBlogList .worksBlogListLi{
        width: calc(50% - 10px);
        margin-bottom: 20px;
      }
    }

.pagerWrapperUl{
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  font-size: 18px;
  font-size: 1.8rem;
}
a.page-numbers, span.page-numbers{
  display: block;
  margin: 0 5px;
  padding: 2px 8px;
  border: 1px solid #000;
}
a.page-numbers,span.page-numbers {
  font-weight: 400;
}
a.page-numbers.next, a.page-numbers.prev, span.page-numbers.next, span.page-numbers.prev{
  border: none;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 300;
}
span.page-numbers.current {
    border: 1px solid #f6b7a3;
    color: #f6b7a3;
}
#information span.page-numbers.current {
    border: 1px solid #e5c95e;
    color: #e5c95e;
}
#blog span.page-numbers.current {
    border: 1px solid #9cc9b6;
    color: #9cc9b6;
}
#material span.page-numbers.current {
    border: 1px solid #59b57c;
    color: #59b57c;
}

    @media screen and (max-width: 767px) {
      .pagerWrapperUl{
        margin-top: 30px;
      }
    }


/*
* newsFeed
* ----------------------------------
*/
.newsFeedDl{
  border-bottom: 1px solid #cccccc;
}
.newsFeedDl a{
  padding: 30px 0;
}
.newsFeedDate{
  width: 75px;
  margin-right: 30px;
  font-weight: 400;
  line-height: 1.6;
}
.newsFeedCatTitleWrapper{
  width: calc(100% - 105px);
}
.newsFeedCat{
  padding: 3px 12px;
  margin-bottom: 10px;
  line-height: 1;
  font-size: 10px;
  font-size: 1.0rem;
  color: #fff;
}
.newsFeedCat.newsFeedCatInfo{ background: #138896;}
.newsFeedCat.newsFeedCatNews{ background: #139645;}

    @media screen and (max-width: 767px) {
      .newsFeedDl a{
        display: block;
        padding: 15px 0;
      }
      .newsFeedDl:first-of-type a{
        padding: 0 0 15px;
      }
      .newsFeedCatTitleWrapper{
        width: 100%;
      }
      .newsFeedCat{
        padding: 3px 12px;
        margin-bottom: 3px;
      }
    }

/*
* worksSortDl
* ----------------------------------
*/
.worksSortCaption{
  width: 85%;
  margin: 0 auto;
}
.worksSortWrapper{
  width: 85%;
  margin: 0 auto 80px;
  padding: 30px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.worksSortDl{
  align-items: flex-start;
}
.worksSortDt{
  width: 105px;
  padding: 5px 0;
  margin-right: 30px;
  border: 1px solid #000;
  line-height: 1;
  text-align: center;
}
.worksSortDd{
  width: calc(100% - 135px);
  padding-top: 3px;
}
.worksSortUl{
  flex-wrap: wrap;
}
.worksSortUl li{
  position: relative;
  margin: 0 15px 10px;
}
.worksSortUl li::before{
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translate(0 , -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  border-color: transparent transparent transparent #f6b6a3;
}
#blog .worksSortUl li::before{
  border-color: transparent transparent transparent #9cc9b6;
}

    @media screen and (max-width: 767px) {
      .worksSortCaption{
        width: 95%;
      }
      .worksSortWrapper{
        width: 95%;
        margin: 0 auto 50px;
        padding: 15px 0;
      }
      .worksSortDl{
        flex-direction: column;
      }
      .worksSortDl:nth-of-type(n+2){
        margin-top: 10px;
      }
      .worksSortDt{
        display: inline-block;
        width: auto;
        padding: 5px 10px;
        margin: 0 0 10px;
        font-size: 12px;
        font-size: 1.2rem;
      }
      .worksSortDd{
        width: 100%;
        padding-top: 0;
      }
      .worksSortUl li{
        margin: 0 10px 5px 15px;
      }
    }


/*
* footer
* ----------------------------------
*/

/*--CONTACTとMATERIALのリンク部分--*/
.footerContactMaterialWrapper{
  transform: translate(0 , -70%);
  border: 1px solid #000;
  background: #fff;
}
.footerContactMaterialLi{
  width: 50%;
}
.footerContactLi::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0 , -50%);
  width: 1px;
  height: 80%;
  background: #000;
}
a.footerContactMaterialLink{
  overflow: hidden;
  height: 100%;
  padding: 45px 40px;
}
.footerContactLink::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 0 25px;
  border-color: transparent transparent transparent #138896;
}
.footerContactLink::after {
  position: absolute;
  top: 0;
  right: -5%;
  z-index: -1;
  content: '';
  width: 110%;
  height: 400%;
  background: #138896;
  transform-origin: right top;
  transform: skewY(-135deg) scale(1, 0);
  transition: transform .3s;
}
.footerContactLink:hover::after {
    transform-origin: right bottom;
    transform: skewY(-135deg) scale(1, 1);
}
.footerMaterialLink::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent #139645 transparent transparent;
}
.footerMaterialLink::after {
  position: absolute;
  bottom: 0;
  left: -5%;
  z-index: -1;
  content: '';
  width: 110%;
  height: 400%;
  background: #139645;
  transform-origin: left bottom;
  transform: skewY(-135deg) scale(1, 0);
  transition: transform .3s;
}
.footerMaterialLink:hover::after {
  transform-origin: left top;
  transform: skewY(-135deg) scale(1, 1);
}

    @media screen and (max-width: 767px) {
      a.footerContactMaterialLink{
        padding: 15px;
      }
    }

.footerContactMaterialTitleWrapper{
  align-items: flex-end;
  margin-bottom: 70px;
}
.footerMaterialTitleUl{
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.footerContactMaterialTitle{
  font-size: 27px;
  font-size: 2.7rem;
  line-height: 1;
}
.footerContactMaterialCaption{
  font-size: 12px;
  font-size: 1.2rem;
}
.footerContactCaption{
  margin-left: 1.5em;
}
.footerMaterialCaption{
  margin-right: 1.5em;
}
.footerContactMaterialIconLi .cls-1{
  fill: #231815;
}
.footerContactMaterialLink:hover .footerContactMaterialIconLi .cls-1{
  fill: #fff;
}
.footerContactIconLi{
  margin-left: auto;
}
.footerMaterialIconLi{
  margin-right: auto;
}
.footerContactIcon{
  width: 28px;
}
.footerMaterialIcon{
  width: 20px;
}
.footerContactMaterialSentence{
  font-size: 13px;
  font-size: 1.3rem;
}

    @media screen and (max-width: 767px) {
      .footerContactMaterialTitleWrapper{
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 15px;
      }
      .footerContactCaption{
        margin-left: 0;
      }
      .footerMaterialCaption{
        margin-right: 0;
      }
      .footerContactIconLi{
        margin-left: 0;
      }
      .footerContactIcon{
        width: 20px;
      }
      .footerMaterialIcon{
        width: 14px;
      }
      .footerContactMaterialSentence{
        font-size: 12px;
        font-size: 1.2rem;
      }
      .footerMaterialLi .footerContactMaterialSentence.txtRight{
        text-align: left;
      }
    }

/*--社名以下 両サイド部分--*/
.footerContentsWrapper{
  justify-content: space-between;
  margin-top: -80px;
}
.footerContentsCompanyWrapper,
.footerContentsBnrLinkWrapper{
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
}
.footerContentsCompanyWrapper{
  justify-content: flex-start;
}

    @media screen and (max-width: 767px) {
      .footerContentsWrapper{
        flex-direction: column;
        justify-content: flex-start;
        margin-top: -140px;
      }
      .footerContentsCompanyWrapper,
      .footerContentsBnrLinkWrapper{
        width: 100%;
      }
      .footerContentsCompanyWrapper{
        margin-bottom: 20px;
      }
    }

/*--社名など 左サイド部分--*/
.footerCompanyName{
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 500;
}
.footerCompanyCaption{
  font-size: 11px;
  font-size: 1.1rem;
}
.footerServiceArea{
  margin-top: 15px;
  font-size: 12px;
  font-size: 1.2rem;
}
.footerAdressDl{
  margin-top: auto;
}
.footerAdressDt{
  display: inline-block;
  padding: 2px 10px;
  margin: 10px 0 5px;
  border: 1px solid #000;
  font-size: 10px;
  font-size: 1.0rem;
  line-height: 1;
}
.footerAdressDd{
  font-size: 12px;
  font-size: 1.2rem;
}

    @media screen and (max-width: 767px) {
      .footerServiceArea{
        margin: 10px 0 5px;
      }
    }

/*--バナーなど 右サイド部分--*/
.footerBnrUl{
  margin: 0 -5px 120px;
}
.footerBnrLi{
  width: 160px;
  margin: 0 5px;
}

    @media screen and (max-width: 767px) {
      .footerBnrUl{
        margin: 0 -5px 20px;
      }
    }


.footerLinkCopyWrapper{
  font-size: 12px;
  font-size: 1.2rem;
}
.footerLinkUl{
  justify-content: flex-end;
  margin-bottom: 10px;
}
.footerLinkLi{
  border-right: 1px solid #000;
  line-height: 1;
}
.footerLinkLi:last-of-type{
  border-right: none;
}
.footerLinkLi a{
  padding: 0 10px;
}

    @media screen and (max-width: 999px) {
      .footerLinkUl{
        flex-direction: column;
        align-items: flex-end;
      }
      .footerLinkLi{
        border-right: none;
        line-height: 1.6;
      }
    }




/*
* iframe
* ----------------------------------
*/
.iframeWrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.iframeWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/*
* pagetop
* ----------------------------------
*/
.pagetop {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.pagetopTriangle{
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 68px 140px;
  border-color: transparent transparent rgba(0,0,0,0.5) transparent;
}
.pagetop a {
  display: block;
  position: absolute;
  top: -42px;
  left: -140px;
  width: 140px;
  height: 110px;
  padding-right: 40px;
  writing-mode: vertical-rl;
  color: #000;
  font-size: 10px;
  font-size: 1.0rem;
}
.pagetop a.scrolled {
  display: none;
}
.pagetop a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 60px;
  width: 1px;
  height: 100%;
  background: #000;
}
.pagetop a::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 48px;
  width: 12px;
  height: 1px;
  background: #000;
  transform: rotate(-60deg);
  transform-origin: left bottom;
}
.pagetop a.scrolled::after {
  bottom: auto;
  top: 0;
  background: #000;
  transform: rotate(60deg);
}
.pagetop a.scrolled span{
  visibility: hidden;
}
.pagetop a.scrolled span::before{
  visibility: visible;
  content: "";
  position: absolute;
  top: 0;
  right: 52px;
  height: 1px;
  width: 16px;
  background: #000;
}

    @media screen and (max-width: 999px) {
      .pagetop a {
        top: 0;
        left: -140px;
        height: 68px;
        padding-right: 6px;
        padding-left: 105px;
      }
      .pagetop a::before {
        right: 25px;
      }
      .pagetop a::after {
        right: 13px;
      }
      .pagetop a.scrolled::after {
        right: 14px;
      }
      .pagetop a.scrolled span::before{
        right: 17px;
      }
    }

    @media screen and (max-width: 767px) {
      .pagetop {
        display: none !important;
      }
      .pagetop a {
        /* left: -250px; */
      }
    }





.headerSnsUl{
  right: 55px;
  top: 10px;
  justify-content: flex-end;
  font-size: 1.8rem;
}
.headerSnsLi{
  margin-left: 12px;
}
a.headerSnsLinkInsta{ color: #c13584;}
a.headerSnsLinkYoutube{ color: #FF0000;}
a.headerSnsLinkTwitter{ color: #1DA1F2;}
a.headerSnsLinkFacebook{ color: #3B5998;}

    @media screen and (max-width: 767px) {
      .headerSnsUl{
        right: 50px;
      }
    }




/*ハンバーガーメニュー ここから*/
.navHandler{
  position: absolute;
  right: 0;
  top: 8px;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.navHandler a{
  color: #000;
}
.is-menuOpened .navHandler a{
  color: #fff;
}

    @media screen and (max-width: 767px) {
      #home .navHandler{
        top: 15px;
      }
      #home .scrolled .navHandler{
        top: 8px;
      }
    }

.menu-trigger,
.menu-trigger span{
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger{
  position: relative;
  width: 30px;
  height: 22px;
}
.menu-trigger span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
}
#home .menu-trigger span,
.is-menuOpened .menu-trigger span{
  background-color: #fff;
}
#home .scrolled .menu-trigger span{
  background-color: #000;
}
.menu-trigger span:nth-of-type(1){
  top: 0;
}
.menu-trigger span:nth-of-type(2){
  top: 10px;
}
.menu-trigger span:nth-of-type(3){
  bottom: 0;
}

/*エフェクト用*/
.menu-trigger.active span:nth-of-type(1){
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.menu-trigger.active span:nth-of-type(2){
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3){
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}

/*ハンバーガーメニュー ここまで*/









/* ---------- ここから絞り込み用CSS ------------ */

/* ---------- 必須CSS ここから ------------ */

/* #result .foo{
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
} */
@keyframes show{
    from{ opacity: 0;}
    to{ opacity: 1;}
}
@keyframes hide{
    from{ opacity: 1;}
    to{ opacity: 0;}
}
#result .foo{
  display: block;
  animation: show 1s ease-in-out 0s forwards;
}
#result .foo[class*="hidden-"] {
  display: none;
  animation: hide 1s ease-in-out 0s forwards;
}


/* ---------- 必須CSS ここまで ------------ */


/* ここから下は見た目の調整 */
.worksSortDd input{
  display: none;
}
.allClearBtn{
  position: relative;
  margin: 10px 15px 0;
}
.allClearBtn::before{
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translate(0 , -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  border-color: transparent transparent transparent #f6b6a3;
}
#blog .allClearBtn::before{
  border-color: transparent transparent transparent #9cc9b6;
}

#select label.selected { /* 選択中のラベルのスタイルを変更 */
  color: #f6b7a3;
  font-weight: 500;
}
#blog #select label.selected { /* 選択中のラベルのスタイルを変更 */
  color: #9cc9b6;
}
/* ---------- 絞り込み用CSSここまで ------------ */