@charset "UTF-8";

/* CSS Document */

/*
===================================================

  0. PC : 1380px ~
  A. Medium : 1250px ~
  B. Tablet : 1100px ~
  C. SP : 767px ~

===================================================
*/

/*
===================================================
  0. PC :  1380px ~
===================================================
*/

@media screen and (max-width:1425px) {


/*
---------------------------------------------------
  5. UnderCommon
---------------------------------------------------
*/


/* underIntro */

.underCommonNav {
  right: 0;
}

.underNav ul li span {
  display: block;
  margin-top: 7px;
}

.underNav ul li {
  font-size: 1.7rem;
  letter-spacing: 1.1px;
}
.underNav ul li +  li {
  margin-left: 70px;
}
.underNav ul li + li:before {
  top: 4px;
  left: -38px;
  width: 1px;
  height: 35px;
}


/*
--
*/
}

/*
===================================================
  0. PC :  1350px ~
===================================================
*/

@media screen and (max-width:1350px) {

.underNav ul li {
  font-size: 1.5rem;
  letter-spacing: 1px;
}
.underNav ul li +  li {
  margin-left: 63px;
}
.underNav ul li + li:before {
  top: 4px;
  left: -35px;
  width: 1px;
  height: 33px;
}



/*
--
*/
}



/*
===================================================
  A. Medium :  1250px ~
===================================================
*/

@media screen and (max-width:1250px) {


/*
---------------------------------------------------
  0. Common
---------------------------------------------------
*/

/* cursor */

#stalker {
  display: none;
}

/* humb */

.humbCont .humbNav {
  font-size: 4.9rem;
}


/*
---------------------------------------------------
  1. Header
---------------------------------------------------
*/

/* commmon */

header.active {
  height: 100px;
}
header.active.humbActive {
  margin-top: -100px;
}
header .mainNav {
  display: none;
}
header .mainNav ul li {
  font-size: 1.55rem;
  letter-spacing: 0.5px;
}
header .mainNav ul li + li {
  margin-left: 34px;
}

/* title */

header .title {
  font-size: 4.5rem;
}

header.active .title {
  top:52.8%;
}
header.active .title svg {
  width: 210px;
  transition: all ease .5s;
}


/*
---------------------------------------------------
  2. Footer
---------------------------------------------------
*/

footer > .inner {
  padding-top: 92px;
  width: 85%;
}
.producedCont {
    width: 268px;
    padding-right: 0px;
}
.footNav + .footNav {
    margin-left: 105px;
}

/*
---------------------------------------------------
  3. Common
---------------------------------------------------
*/

/* postList */

.postList li:nth-last-child(-n + 4) {
    padding-bottom: 75px;
}

.postCont .date {
  font-size: 1.1rem;
}
.postCont h3.title {
  font-size: 1.3rem;
  font-weight: 500;
  margin-top: 8px;
  line-height: 23px;
}
.postCont .cat {
  font-size: 1.15rem;
  margin-top: 12px;
}



/* btn */

.btn {
  font-size: 1.35rem;
  letter-spacing: -0.2px;
  margin-left: 28px;
}
.btn:before {
  top: -6px;
  left: -29px;
  content:"";
  font-size: 2.1rem;
}


/*
---------------------------------------------------
  4. Index
---------------------------------------------------
*/


/* mv*/

.mv {
  margin: 0px auto;
  min-height: 720px;
  max-height: initial;
}
.mv .slide {
  background-attachment: initial;
  margin-top: 0px;
}


/* mainCopy */

.mainCopy {
  width: 338px;
  top: 220px;
  left: 80px;
  z-index: 1
}
.mainCopy .title {

}


/* scrollNav */

.scrollNav {
  display: none;
}

/* section - Common */



/* section - News */

.latestNews {
  padding-top: 100px;
  width: calc(100% - 12.8%);
  margin-bottom: 109px;
}
.latestNews .postList {
  margin-top: 45px;
}
a.latestBtn {
  top: 42px;
}


/* section - Service */

.sectService .contInner .left .servServImg.inview2.slideIn.active:before {
  width: 16%;
  transition: all ease .6s;
}
.sectService .contInner .left .servClickImg.active2:before {
  width: 20%;
  transition: all ease .6s;
}



/* section - About us */

.sectAbout {
    margin-left: 7%;
    padding-top: 105px;
    margin-bottom: 193px;
}
.sectAbout .left {
  width: 7%;
}
.sectAbout .right {
  width: 93%;
}

.aboutSlider .slick-slide {
  width: 27vw;
}

button.slick-arrow {
  top: -163px;
}



/* section - Contact us */




/*
---------------------------------------------------
  5. UnderCommon
---------------------------------------------------
*/


/* underIntro */

.underHead .title {
  font-size: 4.7rem;
  letter-spacing: 3.5px;
  margin-left: 0.4%;
}
.companyCont .underHead .title {
  font-size: 5rem;
}
.aboutCont .underHead .title {
  font-size: 5rem;
  margin-bottom: 20px;
}
.mediaCont .underHead .title {
  font-size: 5.2rem;
}
.designCont .underHead .title {
  font-size: 5.1rem;
}

.underHead .title .jpn {
  font-size: 1.25rem;
  margin-top: 5px;
}

.underCommonNav {
    position: absolute;
    top: 8px;
    right: -1.5%;
}

.underNav ul li span {
  margin-top: 5px;
  font-size: 0.7rem;
}
.underNav ul li {
  font-size: 1.5rem;
  letter-spacing: 1px;
}
.underNav ul li +  li {
  margin-left: 59px;
}
.underNav ul li + li:before {
  top: 4px;
  left: -31px;
  width: 1px;
  height: 29px;
}
.underNewsNav .btnParent::after {
  right: -20px;
  width: 6px;
  height: 6px;
}

.underMainImg {
  height: 43vw;
  background-attachment: initial;
}

.circleList .listCont .image .img {
  transform: scale(1);
}
.circleList .desc br {
    display: none;
}
.circleList .selectList .listCont.fadeInUp.scale:hover .image .img {
  transform:scale(1);
  transition:all ease .5s;
}
.selectList .listCont:hover .image .img {
  transform:scale(1);
  transition:all ease .5s;
}



/* underDesc */

.underDesc .left {
  width: 62%;
  margin-right: 7.1%;
}

.underDesc .right .title {
  font-size: 3.1rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin-top: -4px;
  margin-bottom: 43px;
}
.underDesc .right .title span {
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  margin-top: 13px;
  margin-left: 2px;
}
.underDesc .right .desc {
  line-height: 2.8;
}



/* underAbout */

.underAbout .right .desc {
  font-size: 1.55rem;
  line-height: 3.2;
  letter-spacing: 0.05em;
}


/* underSelect */

.underSelect > .inner {
  padding-bottom: 43px;
}
.selectList {
  padding-top: 40px;
}
.selectList .listCont {
    width: 29.3%;
    margin-right: 3%;
    border-radius: 5px;
}
.selectList .listCont + .listCont {
    margin-left: 3%;
}
.selectList .listCont:nth-child(3n + 4) {
    margin-left: 0;
}


.selectList .subTitle {
  font-size: 1.15rem;
}


/*
Design Field
*/

.designFieldList .cont .inner {
  margin: 47px auto 81px;
}
.designFieldList .number {
  font-size: 1.8rem;
}
.designFieldList .title {
  font-size: 4.05rem;
  line-height: 1.25;
  letter-spacing: 0.05em;
  margin-top: 15px;
}



/* Media */

/*
Common
*/

.underMedia {
  margin-top: 175px;
  padding-bottom: 130px;
  padding-top: 36px;
}



/*
Right
*/

.underMedia .cont {
  margin: 70px auto 0;
}
.underMedia .cont .right > .inner {
  width: 74%;
  margin-left: 21.7%;
}
.underMedia .cont .right .title {
  font-size: 3.2rem;
  letter-spacing: 0.03em;
  margin-top: 9px;
}
.underMedia .cont .right .title span {
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  margin-top: 16px;
  margin-left: 3px;
}
.underMedia .cont .right .desc {
  margin-top: 40px;
  font-size: 1.45rem;
}
.visitMore {
  margin-top: 30px;
}


/*
---------------------------------------------------
  6. Journal
---------------------------------------------------
*/

/* detail */




/*
---------------------------------------------------
  7. Design
---------------------------------------------------
*/

/* DesignField */

/*
Mv Left
*/

.fieldMv .cont .title {
  font-size: 6rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
}


/*
FieldCont
*/

.fieldDesc .desc {
  font-size: 1.5rem;
  line-height: 3;
  letter-spacing: 0.06em;
  margin-top: 49px;
  margin-bottom: 21vw;
}


/*
workField
*/

.sectTitle {
  font-size: 5.1rem;
  width: 82%;
  padding-top: 110px;
  letter-spacing: 0.05em;
}
.fieldSlider {
  margin: 93px auto 0;
}
.fieldSlider button.slick-arrow {
  top: -186px;
}
.fieldSlider li .cont .num {
  font-size: 1.9rem;
}
.fieldSlider li .cont .title {
  font-size: 2.45rem;
  margin-top: 11px;
}
.fieldSlider li .cont .title span {
  margin-top: 11px;
}
.fieldSlider li .cont .desc {
  margin-top: 36px;
  line-height: 2.9;
  letter-spacing: 0.06em;
}



/*
caseStudy
*/

.caseList li {
  margin-top: 80px;
  padding-top: 80px;
}

.caseList li .left .image {
  height: 31.5vw;
}

.caseList li .right .cont {
  width: 52%;
}
.caseList li .right .title span.main {
  font-size: 4.9rem;
}
.caseList li .right .title span.sub {
  font-size: 2rem;
  margin-top: 33px;
}


/*
fieldNext
*/

.fieldNext .title {
  font-size: 5.8rem;
}


/* workList */

.workList li .postCont {
  margin-left: 12.1%;
}
.workList li .postCont .title {
  font-size: 4.8rem;
}
.workList li .postCont .date {
  font-size: 2.1rem;
  padding-left: 48px;
}
.workList li .postCont .desc {
  font-size: 1.3rem;
  line-height: 2.4;
  letter-spacing: 0.06em;
  width: 79%;
  margin-top: 39px;
}


/*
---------------------------------------------------
  8. Philosophy
---------------------------------------------------
*/

/* contents */

/*
About
*/

.philoCont .about {
  margin-top: 76px;
}


/*
NextCont
*/

.philoCont .nextCont {
  width: 100%;
  margin: 147px auto 0;
}
.philoCont .nextCont > .inner {
  margin:89px auto;
}
.philoCont .nextCont .nextTitle {
  font-size: 7.3rem;
}


/*
Nav
*/

.underPhiloNav {
  height: 75px;
}



/*
---------------------------------------------------
  10. Contact
---------------------------------------------------
*/


/*
Left
*/

.contactNav ul li + li {
  margin-top: 15px;
}


/*
middle
*/

.contactMain .middle .contactDesc {
  font-size: 1.3rem;
  line-height: 2.65;
  letter-spacing: 0.02em;
  text-align: justify;
}
.contactMain .middle .email span {
  font-size: 1.2rem;
}
.contactMain .middle .email {
  font-size: 1.3rem;
  margin-top: 26px;
}


/*
right
*/

.contactMain .right .formCont + .formCont {
  margin-top: 31px;
}
.contactMain .right .formTitle {
  font-size: 1.3rem;
  letter-spacing: 0.2px;
  margin-bottom: 15px;
}
.contactMain .right .formCont input {
  line-height: 56px;
}




/*
---------------------------------------------------
  11. Privacy Policy
---------------------------------------------------
*/

.policyMain {
  width: calc(100% - 11.3%);
}
.policyMain .cont dl dt {
  font-size: 1.6rem;
}
.policyMain .cont dl dt span {
  font-size: 1.9rem;
}
.policyMain .cont dl dd {
  width: 53%;
  font-size: 1.35rem;
  line-height: 2.6;
  letter-spacing: 0.02em;
  margin-top: -6px;
}



/*
--
*/
}

/*
===================================================
  A'. PC :  1160px ~
===================================================
*/


@media screen and (max-width:1160px) {

.selectList .listCont {
    width: 27.5%;
}

/*
--
*/
}


/*
===================================================
  B. Tablet :  1100px ~
===================================================
*/

@media screen and (max-width:1100px) {


/*
---------------------------------------------------
  0. Common
---------------------------------------------------
*/

/* contents */

main {
  overflow-x: hidden;
}


/* Left */

.humbCont .left {
  width: 29%;
}
.humbCont .left .inner {
  width: 36%;
  padding-right: 16px;
}
.humbCont .humbNav {
  font-size: 3.7rem;
  letter-spacing: 0.5px;
  padding-top: 12vh;
}
.humbCont .humbNav ul li + li {
  margin-top: 25px;
}
.humbInfo {
  font-size: 1.25rem;
  letter-spacing: 0.2px;
  line-height: 23px;
  white-space: nowrap;
}


/* Middle */

.humbCont .middle {
  width: 55%;
}
.humbCont .middle .inner {
  width: 77%;
}
.humbSubCont {
  top: 12.1vh;
}
.humbSubCont .image.delay {
  height: 33vw;
}
.humbCont.active .humbSubCont .image {
  height: 33vw;
}
.humbSubCont .subImage {
  height: 33vw;
}
.humbSubNav ul li {
  font-size: 1.5rem;
}

/* Right */

.humbCont .right {
  width: 16%;
}
.humbSocial {
  font-size: 1.35rem;
  letter-spacing: 0.3px;
  line-height: 26px;
}



/*
---------------------------------------------------
  1. Header
---------------------------------------------------
*/

/* commmon */

header {
  height: 134px;
}
header.active {
  height: 116px;
}
header.active.humbActive {
  margin-top: -116px;
}

header .headeWrap {
  width: 95.8%;
}

header .mainNav {
  display: none;
}
header .humb {
  top: 49%;
}

/* title */

header .title {
  left: 51.8%;
  font-size: 2rem;
  letter-spacing: 5.5px;
}
header .title.slideIn {
  top: 54.1%;
}
header.active .title {
  font-size: 2rem;
  letter-spacing: 5.4px;
  top: 54.1%;
}

/* humb */

header .humb {
  right: 10px;
}
header .humb.slideIn {
  top: 50%;
}

/* spHumb */

.humbCont.pc {
  display: none;
}
.humbCont.sp {
  display: block;
}
.humbCont.active {
  height: 100%;
}
.humbCont.sp > .inner {
  display: block;
  overflow-y: scroll;
}

.humbClose {
  left: initial;
  transform:initial;
  top: 38px;
  right: 36px;
  width: 34px;
  height: 34px;
}
.humbClose span {
  background-color: #000;
  height: 1px;
}

.humbCont .navCont {
  height: 91.7vh;
  min-height: 400px;
  position: relative;
}
.humbCommonNav {
  position: absolute;
  top: 25px;
  left: 85px;
}

/*
Main
*/

.humbMainNav {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
  transition:all ease .5s;
}
.humbMainNav.fadeOut {
  margin-top: 25px;
  opacity: 0;
  visibility: hidden;
  transition:all ease .5s;
}


.humbMainNav .main {
  font-size: 4.2rem;
  font-family: garamond-premier-pro-display, serif;
  font-weight: 300;
  margin-top: 15vw;
  transition:all ease .5s;
}
.humbMainNav .main li + li {
  margin-top: 21px;
}
.humbMainNav .sub {
  margin-top: 67px;
  font-family:'Helvetica Neue LT W01_41488878';
  font-size: 1.4rem;
  display: none;
}
.humbMainNav .sub li + li {
  margin-top: 14px;
}

.humbMainNav.active {
  visibility: hidden;
  opacity: 0;
  transition:all ease .5s;
}
.humbMainNav.active .main li {
  padding-top: 10px;
  opacity: 0;
  transition:all ease .5s;
}
.humbMainNav .main li {
  padding-top: 0px;
  opacity: 1;
  transition:all ease .5s;
  padding-left: 1px;
}
.humbMainNav .main li:nth-child(1) {
  transition-delay: 0.25s;
}
.humbMainNav .main li:nth-child(2) {
  transition-delay: 0.35s;
}
.humbMainNav .main li:nth-child(3) {
  transition-delay: .45s;
}
.humbMainNav .main li:nth-child(4) {
  transition-delay: .55s;
}

.humbMainNav.active .sub li {
  padding-top: 5px;
  opacity: 0;
  transition:all ease .5s;
}
.humbMainNav .sub li {
  padding-top: 0px;
  opacity: 1;
  transition:all ease .5s;
}
.humbMainNav .sub li:nth-child(1) {
  transition-delay: 0.65s;
}
.humbMainNav .sub li:nth-child(2) {
  transition-delay: 0.75s;
}



.btn-mod02,
a.btn-mod02{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 13px;
    color: #444;
    background: #b0e0e6;
    border: 2px solid transparent;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-mod02:hover,
.btn-mod02:focus,
a.btn-mod02:hover,
a.btn-mod02:focus{
    font-weight: 400;
    color: rgba(255,255,255, .85);
    background: rgba(0,0,0, .7);
    text-decoration: none;
    outline: none;
}
.btn-mod02:active{
    cursor: pointer !important;
}

.btn-mod02.reservebtn02 {
     position: relative;
    bottom: 30px;
}

.btn-mod02.btn-large02{
    padding: 12px 30px;
    font-size: 14px;
}


.btn-mod03,
a.btn-mod03{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 13px;
    color: #444;
    background: #b0e0e6;
    border: 2px solid transparent;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-mod03:hover,
.btn-mod03:focus,
a.btn-mod03:hover,
a.btn-mod03:focus{
    font-weight: 400;
    color: rgba(255,255,255, .85);
    background: rgba(0,0,0, .7);
    text-decoration: none;
    outline: none;
}
.btn-mod03:active{
    cursor: pointer !important;
}

.btn-mod03.reservebtn03 {
     position: relative;
    bottom: 30px;
    left: 10px;
}

.btn-mod03.btn-large03{
    padding: 12px 30px;
    font-size: 14px;
}




/*
Service + About
*/

.humbServNav,.humbAboutNav,.humbInfoNav,.humbPlanNav {
  transition:all ease .5s;
  margin-top: 25px;
  margin-left: -2px;
  opacity:0;
  visibility:hidden;
}
.humbSpSubNav .main li {
  padding-top: 10px;
  opacity: 0;
  transition:all ease .5s;
}

.humbSpSubNav.active {
  visibility: visible;
  opacity: 1;
  transition:all ease .5s;
  margin-top: 0;
}
.humbSpSubNav.active .main li {
  padding-top: 0px;
  opacity: 1;
  transition:all ease .5s;
}
.humbSpSubNav.active .main li:nth-child(1) {
  transition-delay: 0.25s;
}
.humbSpSubNav.active .main li:nth-child(2) {
  transition-delay: 0.35s;
}
.humbSpSubNav.active .main li:nth-child(3) {
  transition-delay: .45s;
}
.humbSpSubNav.active .main li:nth-child(4) {
  transition-delay: .55s;
}
.humbSpSubNav.active .main li:nth-child(5) {
  transition-delay: .65s;
}

.humbSpSubNav.fadeOut {
  visibility: hidden;
  opacity: 0;
  transition:all ease .5s;
  margin-top: 25px;
}




.humbSpSubNav {
  font-size: 2rem;
}
.humbBackBtn {
  font-size: 2.7rem;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  color:#add8e6;
  margin-top: 28px;
}
.humbSpSubNav .main {
  margin-top: 56px;
}
.humbSpSubNav .main li + li {
  margin-top: 27px;
}




/*
SNS
*/

.humbCont .snsCont {
  position: absolute;
  left: 85px;
  bottom:47px;
  opacity: 0;
  visibility: hidden;
  transition:all ease .5s;
}
.humbCont.active .snsCont {
  visibility: visible;
  opacity: 1;
  transition:all ease .5s;
  transition-delay: 1.8s;
}
.humbCont .snsCont ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  font-size: 2rem;
  opacity: 0.8;
}
.humbCont .snsCont ul li + li {
  margin-left: 14px;
}
.dli-plus {
font-size: 3.5rem;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #add8e6;
}


/*
---------------------------------------------------
  2. Footer
---------------------------------------------------
*/

/* common */

footer > .inner {
    width: 73.9%;
    margin: 0px auto 0px;
    padding-top: 100px;
    position: relative;
}
.footTop {
  flex-flow:column;
}


/* navCont */

.footNav + .footNav {
    margin-left: 89px;
}
.footNav ul li {
    font-size: 1.2rem;
}
.footNav ul li + li {
    margin-top: 13px;
}
.navCont .navTitle {
    font-size: 1.95rem;
    letter-spacing: 2.4px;
    margin-bottom: 22px;
}


/* socialCont */

.socialCont {
  position: relative;
  bottom:initial;
  right: initial;
  z-index: 1;
  margin-top: 55px;
  margin-left: -4px;
}
.socialCont .socialNav ul li {
    font-size: 1.6rem;
    height: 42px;
    width: 42px;
    line-height: 43px;
}
.socialCont .socialNav ul li + li {
    margin-left: 7px;
}


/* producedCont */

.producedCont {
  width: 284px;
  margin-left: initial;
  position: relative;
  padding-right: initial;
  margin-top: 50px;
}
.producedCont:before {
  display: none;
}
.producedCont .title {
    font-size: 2.7rem;
    letter-spacing: 3.3px;
    margin-top: 0px;
}
.producedCont .desc {
    font-size: 1.1rem;
    margin-top: 14px;
    line-height: 23px;
}
.producedCont .address {
    margin-top: 28px;
}
.producedCont .address {
    opacity: 0.55;
    font-size: 1rem;
    letter-spacing: 0.2px;
    margin-top: 28px;
}

/* navproducedCont */

.navproducedCont {
   position: absolute;
  left: 85px;
  bottom:47px;
  opacity: 0;
  visibility: hidden;
  transition:all ease .5s;
}
.navproducedCont:before {
  display: none;
}
.navproducedCont .title {
    font-size: 1.5rem;
    letter-spacing: 3.3px;
    margin-top: 0px;
}
.navproducedCont .desc {
    font-size: 1.1rem;
    margin-top: 14px;
    line-height: 23px;
}
.navproducedCont .address {
    margin-top: 10px;
}
.navproducedCont .address {
    opacity: 0.55;
    font-size: 1rem;
    letter-spacing: 0.2px;
    margin-top: 10px;
}

.humbCont.active .navproducedCont {
  visibility: visible;
  opacity: 1;
  transition:all ease .5s;
  transition-delay: 1.8s;
}
.humbCont .navproducedCont ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  font-size: 2rem;
  opacity: 0.8;
}
.humbCont .navproducedCont ul li + li {
  margin-left: 14px;
}


/* footUnder */

.footUnder {
  margin-top: 300px;
  padding-bottom: 43px;
}
.totop {
  right: -70px;
  bottom: 35px;
}
.footUnder .copy {
  font-size: 0.9rem;
  line-height: 17px;
}



/*
---------------------------------------------------
  3. Common
---------------------------------------------------
*/

/* postList */

.postList {
  margin-bottom: 43px;
}
.postList li {
  padding-bottom: 80px;
  width: 29.4%;
}
.postList li:nth-last-child(-n + 4) {
  padding-bottom: 80px;
}
.postList li:nth-child(3n + 3) {
  padding-right: 0;
  border-right: initial;
}
.postList li:nth-child(4n + 5) {
  margin-left: 2.75%;
}
.postList li:nth-child(3n + 4) {
  margin-left: initial;
  padding-right: 2.85%;
}


.postList .postImg {
  height: 19.4vw;
}
.postList .postCont {
  padding-top: 30px;
  width: 98%;
}
.postList .postCont .date {
  font-size: 0.9rem;
}
.postList .postCont h3.title {
  font-size: 1.5rem;
  margin-top: 9px;
  letter-spacing: 0.02em;
  line-height: 1.9;
}
.postList .postCont .cat {
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  margin-left: 1px;
  margin-top: 10px;
}

/* pagenation */

.pagenation {
  margin-bottom: 48px;
}
.pagenation ul li {
  font-size: 1.3rem;
  width: 48px;
  height: 48px;
  line-height: 50px;
}



/*
---------------------------------------------------
  4. Index
---------------------------------------------------
*/

/* mv */

.mv {
  max-height: initial;
  min-height: initial;
  height:calc(100vh - 45px);
  left: 0px;
}

/* mainCopy */

.mainCopy {
  width: 338px;
  top: 183px;
  left: 70px;
}
.mainCopy .title {
  font-size: 3.75rem;
  line-height: 59px;
  letter-spacing: 14px;
  height: 217px;
}
.mainCopy .desc {
  font-size: 0.9rem;
  line-height: 27px;
  width: 230px;
  margin-top: 32px;
}
.mainCopy.fadeInUp .desc {
  margin-top: 27px;
}


/* scrollNav */

.scrollNav {
  bottom: 30px;
  left:56px;
}
.scrollNav.fadeInUp {
  bottom: 25px;
}
.scrollNav .txt {
  font-size: 1.25rem;
  letter-spacing: 0.6px;
}

/* latestInfo */

.latestInfo {
  height: 150px;
  width: 406px;
}
.latestInfo .inner {
    height: calc(100% - 41px);
    padding: 21px;
    width: 86%;
    margin:0 auto;
}
.latestInfo .left {
  padding-left: 0;
}
.latestInfo .left .subTitle {
    font-size: 1rem;
    margin-top: 5px;
    margin-bottom: 17px;
    border-bottom: 1px solid #f0f0f0;
}
.latestInfo .left .date {
  font-size: 0.9rem;
}
.latestInfo .left .title {
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  line-height: 20px;
  height: 3.3em;
  overflow-y: hidden;
  margin-top: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.latestInfo .right {
  margin-right: -0.2%;
}
.latestInfo .right .newsImg {
  width: 104px;
}


/* section - Common */

.sectCommon h2.title {
  font-size: 5.05rem;
  letter-spacing: 2.3px;
}
.sectCommon h2.title span {
  font-size: 1.1rem;
  margin-top: 5px;
  color: rgba(125, 125, 125,0.7);
  letter-spacing: 0.2px;
}
.sectService .navInner .left h2.title span {
  font-size: 1.1rem;
  margin-top: 5px;
    display: block;
  position: relative;
}


/* section - News */

.latestNews {
    padding-top: 84px;
    width: calc(100% - 12.8%);
    margin-bottom: 72px;
}
.latestList {
    margin-top: 57px;
    flex-flow: column
}
.latestList .left {
  display: none;
}
.latestList .left .latestMain {
  padding-bottom: 86px;
  top: 118px;
}
.latestList .left .postImg {
  height: 45.7vw;
}
.latestList .left .postCont .date {
    font-size: 1.15rem;
    letter-spacing: 0.2px;
    margin-top: 4px;
    margin-left: 1px;
}
.latestList .left .postCont h3.title {
    font-size: 1.3rem;
    letter-spacing: -0.2px;
    line-height: 21px;
    margin-top: 9px;
}
.latestList .left .postCont .cat {
    font-size: 1.1rem;
    letter-spacing: 0.4px;
    margin-left: 1px;
    margin-top: 10px;
}

.latestList .right {
    width: 100%;
}
.latestList .right .latestPost {
  text-align: left;
}
.latestList .right .latestPost li:nth-child(1) {
    display: inline-block;
}
.latestList .right .latestPost li:nth-child(7) {
    display: none;
}
.latestList .right .latestPost li + li:nth-child(2n + 3) {
    padding-right: 3.9%;
}
.latestList .right .latestPost li + li:nth-child(3n + 3) {
  border-right: initial;
  padding-right: initial;
}
.latestList .right .latestPost li:nth-child(4) {
  padding-left: initial;
  padding-top: 0;
}
.latestList .right .latestPost li:nth-child(n + 4) {
  padding-top: 0;
}

.latestList .right .latestPost li {
  width: 29.4%;
  padding-right: 2.9%;
  padding-left: 0%;
  padding-bottom: 68px;
}
.latestList .right .latestPost li + li {
  padding-left: 2.9%;
}
.latestList .right .postImg {
  height: 19vw;
}
.latestList .postCont {
    padding-top: 29px;
}
.latestList .postCont h3.title {
  font-size: 1.6rem;
  width: 100%;
  margin: 8px auto 0;
  line-height: 28px;
}
.latestList .postCont .date {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-top: 0px;
  margin-left: 1px;
}
.latestList .postCont .cat {
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  margin-left: 1px;
  margin-top: 12px;
}

a.latestBtn {
  font-size: 2.2rem;
  width: 53px;
  height: 53px;
  line-height: 55px;
  top: 48px;
}


/* section - Service */

.sectService .navInner {
    padding-top: 70px;
    padding-bottom: 276px;
}

.sectService .navInner .left {
    width: 46%;
    margin-left: 8.3%;
}
.sectService .navInner .left .title {
    font-size: 4.2rem;
    line-height: 53px;
    letter-spacing: 5.8px;
}

.sectService .navInner .right {
    width: 45.5%;
    padding-left: 9.5%;
}
.sectService .navInner .right .contTxt {
  left: 50%;
  width: 50%;
}
.sectService .navInner .right .contTxt.active {
  width: 50%;
}

.serviceSubTitle {
  font-size: 1.1rem;
  letter-spacing: 1.3px;
  margin-bottom: 43px;
  margin-left: 81px;
}
.serviceSubTitle:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 1px;
  background-color: #20b2aa;
  top: 51%;
  left: -71px;
}

.sectService .navInner .right .serviceList {
    font-size: 3.9rem;
    letter-spacing: 2.3px;
}
.sectService .navInner .right .serviceList li + li {
    margin-top: 23px;
}

.sectService .navInner .right .contMain {
    width: 74%;
}
.sectService .navInner .right .contMain .number {
  font-size: 1rem;
  letter-spacing: 0.8px;
  margin-top: 76px;
  margin-left: 8px;
}
.sectService .navInner .right .contMain .number:before {
  bottom:-4px;
}
.sectService .navInner .right .contMain .title {
  font-size: 4.4rem;
  padding-top: 16px;
  letter-spacing: 1.7px;
  margin-left: 4px;
}
.sectService .navInner .right .contMain .title span {
    font-size: 1rem;
    margin-top: 3px;
    opacity: 0.9;
}
.sectService .navInner .right .contMain .desc {
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  opacity: 1;
  line-height: 33px;
  margin-left: 37px;
  width: calc(100% - 65px);
  margin-top: 35px;
}
.sectService .navInner .right .contMain .desc br {
  display: none;
}
.sectService .navInner .right .contMain .desc:before {
    top: 7px;
    left: -28px;
    height: 97%;
}

.sectService .navInner .right .serviceList li.active span.bar:before {
  width: 0;
}
.sectService .navInner .right .serviceList li.inview.fadeInUp.active {
  margin-left: 0px;
}
.sectService .navInner .right .serviceList li.active span.jpn {
    display: none;
}

.sectService .contInner .left .servServImg.inview2.slideIn.active:before {
  width: 5%;
  transition:all ease .6s;
}
.sectService .contInner .left  .servClickImg.active:before {
  width: 5%;
  transition:all ease .6s;
}
.sectService .contInner .left  .servClickImg.active2:before {
  width: 5%;
  transition:all ease .6s;
}

a.servBtn {
  font-size: 1.8rem;
  width: 53px;
  height: 53px;
  line-height: 55px;
  margin-top: 31px;
  margin-left: 1px;
}

.servClose {
  position: absolute;
  top: 18px;
  right: 20px;
  height: 26px;
  width: 26px;
}


/* section - Design */

/*
Common
*/

section.sectDesign {
  margin-top: 82px;
  margin-bottom: 110px;
}

section.sectShonan {
  margin-top: 82px;
  margin-bottom: 110px;
}

section.sectYokohama {
  margin-top: 82px;
  margin-bottom: 110px;
}


/*
Head
*/

.sectDesign .slick-dots {
  top: -109px;
  right: 6.6%;
}
.sectDesign .slick-dots li + li {
  margin-left: 20px;
}
.sectDesign .slick-dots li button:before {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.sectShonan .slick-dots {
  top: -109px;
  right: 6.6%;
}
.sectShonan .slick-dots li + li {
  margin-left: 20px;
}
.sectShonan .slick-dots li button:before {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.sectYokohama .slick-dots {
  top: -109px;
  right: 6.6%;
}
.sectYokohama .slick-dots li + li {
  margin-left: 20px;
}
.sectYokohama .slick-dots li button:before {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.sectOsaka .slick-dots {
  top: -109px;
  right: 6.6%;
}
.sectOsaka .slick-dots li + li {
  margin-left: 20px;
}
.sectOsaka .slick-dots li button:before {
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

/*
Cont
*/

.sectDesign .sectCont {
  margin-top: 50px;
}
.designSlider .slick-slide {
  width: 84vw;
}
.sectDesign .slick-list:before {
  height: 91%;
}
.sectDesign .slideIn .slick-list:before {
  width: 0%;
}

.sectShonan .sectCont {
  margin-top: 50px;
}
.sectShonan .slick-list:before {
  height: 91%;
}
.sectShonan .slideIn .slick-list:before {
  width: 0%;
}

.sectYokohama .sectCont {
  margin-top: 50px;
}
.sectYokohama .slick-list:before {
  height: 91%;
}
.sectYokohama .slideIn .slick-list:before {
  width: 0%;
}

.sectOsaka .sectCont {
  margin-top: 50px;
}
.sectOsaka .slick-list:before {
  height: 91%;
}
.sectOsaka .slideIn .slick-list:before {
  width: 0%;
}

.designSlider li .left {
  width: 48%;
}
.designSlider li .left .cont {
  width: 85%;
}
.designSlider li .left .title {
  font-size: 2.6rem;
  line-height: 1.8;
}
.designSlider li .left .title span {
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  margin-top: 10px;
}
.designSlider li .left .desc {
  font-size: 1.2rem;
  line-height: 3.1;
  letter-spacing: 0.04em;
  margin-top: 34px;
}

.designSlider li .right {
    width: 53%;
    position: relative;
    height: 55vw;
}
.designSlider .slick-current li .right .image figure,
.designSlider .is-active-next li .right .image figure {
  height: 56vw;
}

.designSlider li .left .readMore {
  font-size: 0.9rem;
  margin-top: 40px;
  letter-spacing: 0.8px;
}


/* section - Case */

/*
Common
*/

.caseTitle {
  width: 47%;
}

section.sectCase .caseTitle .title {
  font-size: 4.4rem;
  line-height: 1.2;
  letter-spacing: 5.8px;
  margin-top: 120px;
}
section.sectCase h2.title span {
  font-size: 1.1rem;
  margin-top: 7px;
}


/*
caseSlider - Left
*/

.caseSlider li .left {
  width: 47%;
}


/*
caseSlider - Right
*/

.caseSlider li .right {
  width: 53%;
}
.caseSlider li .right .cont {
  width: 55%;
  margin-top: 102px;
}
.caseSlider li .right .slick-counter {
  font-size: 1.1rem;
  margin-bottom: 28px;
}
.caseSlider li .right .title {
  font-size: 4.2rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.caseSlider li .right .subTitle {
  font-size: 1.1rem;
  font-family: 'Helvetica Neue LT W01_55 Roman';
  padding-left: 44px;
  margin-top: 30px;
  letter-spacing: 0.1em;
  opacity: 0.8;
}
.caseSlider li .right .desc {
  font-size: 1.1rem;
  line-height: 3.3;
  letter-spacing: 0.04em;
  margin-top: 37px;
  max-width: initial;
  width: 100%;
}

.caseSlider li .right .readMore {
  font-size: 1rem;
  margin-top: 30px;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.caseSlider button.slick-arrow {
  top:initial;
  bottom: 46px;
  z-index: 2;
}
.caseSlider button.slick-prev {
  right: 36px;
}
.caseSlider button.slick-prev:hover {
  right: 31px;
}
.caseSlider button.slick-next {
  right: 110px;
}
.caseSlider button.slick-next:hover {
  right: 115px;
}



/* section - Media */


/*
Cont
*/

section.sectMedia .sectCont {
  margin: 58px auto 110px;
}

section.sectMedia .sectCont .left {
    width: 53%;
}
section.sectMedia .sectCont .left .image figure {
  height: 56vw;
}

section.sectMedia .sectCont .right .cont {
  width: 50%;
  margin: 0 auto;
}
section.sectMedia .sectCont .right .title {
  font-size: 2.6rem;
  line-height: 1.8;
  letter-spacing: 0.075em;
}
section.sectMedia .sectCont .right .title span {
  font-size: 1.2rem;
  letter-spacing: 0.075em;
  margin-top: 10px;
  margin-left: 2px;
}
section.sectMedia .sectCont .right .desc {
  font-size: 1.3rem;
  line-height: 3.1;
  letter-spacing: 0.04em;
  margin-top: 34px;
  white-space: nowrap;
}
section.sectMedia .sectCont .right .readMore {
  font-size: 0.9rem;
  margin-top: 40px;
  letter-spacing: 0.8px;
}

section.sectParty .sectCont {
  margin:  40px auto 110px;
}

section.sectParty .sectCont .left {
    width: 53%;
}
section.sectParty .sectCont .left .image figure {
  height: 56vw;
}

section.sectParty .sectCont .right .cont {
  width: 50%;
  margin: 0 auto;
}
section.sectParty .sectCont .right .title {
  font-size: 2.6rem;
  line-height: 1.8;
  letter-spacing: 0.075em;
}
section.sectParty .sectCont .right .title span {
  font-size: 1.2rem;
  letter-spacing: 0.075em;
  margin-top: 10px;
  margin-left: 2px;
}
section.sectParty .sectCont .right .desc {
  font-size: 1.3rem;
  line-height: 3.1;
  letter-spacing: 0.04em;
  margin-top: 34px;
  white-space: nowrap;
}
section.sectParty .sectCont .right .readMore {
  font-size: 0.9rem;
  margin-top: 40px;
  letter-spacing: 0.8px;
}



/* section - About us */

.sectAbout {
  margin-left: 7.3%;
  padding-top: 85px;
  margin-bottom: 145px;
}
.sectAbout .left {
    width: 9%;
}
.sectAbout .right {
    width: 97%;
}

.aboutSlider {
  margin-top: 135px;
  margin-left: -26px;
}
.aboutSlider .slick-slide {
  width: 37vw;
}
.aboutSlider .slick-slide + .slick-slide {
  margin-left: 35px;
}
.aboutSlider .slick-slide .image .img {
  height: 24.2vw;
}
.aboutSlider .slick-slide .number {
  font-size: 1.05rem;
}
.aboutSlider .slick-slide .cont .inner {
  width: 72%;
  margin: 35px auto 50px;
}
.aboutSlider .slick-slide .title {
  font-size: 2.2rem;
  letter-spacing: 1.1px;
  margin-top: 7px;
}
.aboutSlider .slick-slide .subTitle {
  font-size: 0.9rem;
  margin-top: 7px;
}
.aboutSlider .slick-slide .desc {
  font-size: 0.9rem;
  line-height: 2.4;
  letter-spacing: 0.05EM;
  margin-top: 22px;
}
.aboutSlider:before {
  width: 0%;
  height: 95%;
  top: 11;
  right: 0vw;
}
.aboutSlider.slideIn:before {
    width: 108%;
}
.aboutSelect .selectList .listCont.fadeInUp.scale:hover .image .img {
  transform:scale(1);
  transition:all ease .5s;
}

button.slick-arrow {
  height: 67px;
  width: 67px;
  top: -140px;
}
button.slick-prev {
  right: 85px;
}
button.slick-prev:hover {
  right: 82px;
}
button.slick-next {
  right: 159px;
}
button.slick-next:hover {
  right: 162px;
}

.mediaSlider button.slick-arrow {
  top: -163px;
}
.mediaSlider button.slick-prev,
.mediaSlider button.slick-prev:hover {
  right: 0px;
}

.mediaSlider button.slick-next,
.mediaSlider button.slick-next:hover {
  right: 73px;
}


/* designSelect */

.designSelect {
  padding-bottom: 115px;
}

.designList {
  margin-top: 69px;
  margin-left: 9.3%;
}

.designSelect .sectIntro {
  width: 80%;
  padding-top: 86px;
}
.designSelect .sectIntro .title {
  font-size: 2.7rem;
  letter-spacing: 0.06em;
}
.designSelect .sectIntro .title span {
  margin-top: 11px;
}

.designList button.slick-arrow {
    top: -140px;
}

.designList button.slick-prev {
    right: 49px;
}
.designList button.slick-prev:hover {
    right: 49px;
}
.designList button.slick-next {
    right: 122px;
}
.designList button.slick-next:hover {
    right: 122px;
}




/* section - Contact us */

.contactTitle {
    font-size: 4.75rem;
    letter-spacing: 1.4px;
}
.sectContact h2.title span {
    margin-top: 0px;
}
.sectContact {
  padding-top: 115px;
  margin-bottom: 200px;
}
.postNav + .sectContact {
  margin-top: 5px;
  border:0;
}
a.contactBtn {
  font-size: 1.8rem;
  width: 60px;
  height: 60px;
  line-height: 62px;
  margin-top: 21px;
}


/*
---------------------------------------------------
  5. UnderCommon
---------------------------------------------------
*/

/* common */

.underCont {
  margin-top: 203px;
}
.archiveCont{
  margin-top: 192px;
}
.aboutCont {
  margin-bottom: initial;
}
.companyCont {
  margin-bottom: 98px;
}
.designFieldCont {
  margin-bottom: 0px;
}

.underTitle {
  font-size: 3.3rem;
  letter-spacing: 0.05em;
  line-height: 1.75;
  top: initial;
  margin-bottom: initial;
}
.underTitle span {
  font-size: 1.3rem;
  margin-top: 16px;
  margin-left: 1px;
}


/* underIntro */

.joinusCont.underIntro {
  margin-bottom: 84px;
}

.underCommonNav {
  display: none;
}
.underHead {
  width: calc(100% - 23.7%);
}
.underHead .title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
}

.underHead .title .eng {
  order: 2;
  font-family: 'Helvetica Neue LT W01_41488878';
  color: #c1c1c1;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  margin-top: 9px;
  margin-left: 3px;
  text-transform: capitalize;
}
.underHead .title .jpn {
  order:1;
  font-size: 2.9rem;
  font-family: a-otf-ryumin-pr6n, serif;
  letter-spacing: 1px;
  color:inherit;
  margin-top: 0;
}

.underMainImg {
  height: calc(100vh - 311px);
  margin: 77px auto 0;
  background-attachment: initial;
}
.underMainImg.sp {
  display: block;
}

/* underAbout */

.underAbout {
  width: calc(100% - 30%);
  margin-top: 105px;
  z-index: -1;
  top:113px;
  flex-flow: column;
}
.underAbout.sp {
  display: block;
  margin-bottom: 120px;
}

.underAbout .left {
  width: 100%;
}
.underAbout .right {
  width: 90%;
  margin-top: 67px;
}
.underAbout .right .desc {
  font-size: 1.45rem;
  line-height: 3.2;
  letter-spacing: 0.035em;
}
.underAbout .right .sign {
  margin-top: 46px;
  margin-left: -5px;
}
.underAbout .right .sign img {
  width: 286px;
}

.underAbout .right .title {
  font-size: 2.9rem;
  letter-spacing: 0.03em;
  line-height: 24px;
  margin-top: 4px;
  font-weight: 500;
  margin-bottom: 43px;
  width: 100%;
}
.underAbout .right .title br {
  display: none;
}
.underAbout .right .title span {
  display: block;
  font-size: 1.4rem;
  font-family: garamond-premier-pro-display, serif;
  color: #bfb3a2;
  letter-spacing: 0.2px;
  margin-top: 20px;
  margin-left: 2px;
}


/* underDesc */

.underDesc {
  width: calc(100% - 30px);
  margin: 76px auto;
}
.designFieldCont .underDesc {
  margin-bottom: 70px;
}

.underDesc > .inner {
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
}
.underDesc > .inner.sp {
    display: block;
}
.underDesc > .inner + .inner {
    margin-top: 16%;
}


.underDesc .left {
  width: 100%;
  margin-right:initial;
  top: 0px;
  position: relative;
}

section.designPhiloCont .underDesc .left {
    height: 68.8vh;
}

.underDesc .left .image {
  height: calc(100vh - 321px);
}
.underDesc .left .philoImage {
  opacity: 1 !important;
}
.underDesc .left .image.slideLeft.transition {
  opacity: 1 !important;
}
.underDesc .left .philoImageTwo,
.underDesc .left .philoImageThree {
  display: none;
}

.underDesc .inner .left .image.philoTwo {
  background-image: url(../../../../../photo-1586205985089-21e11a976566.jpeg);
}
.underDesc .inner .left .image.philoThree {
  background-image: url(../../../../../photo-1504768698754-83a2eef21732.jpeg);
}



.underDesc .right {
  width:100%;
  top: 0px;
  position: relative;
  margin-top: 47px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: calc(100% - 24.7% + 30px);
  margin: 0 auto 0;
  padding-top: 85px;
  flex-wrap: wrap;
}
.underDesc .right .philoScrollOne {
  opacity: 1;
}
.underDesc .right .philoScrollTwo,
.underDesc .right .philoScrollThree {
  display: none;
}

.underDesc .right .title {
  font-size: 3rem;
  letter-spacing: 0.03em;
  margin-top: 4px;
  font-weight: 500;
  margin-bottom: 43px;
  width: 100%;
}
.underDesc .right .title span {
  display: block;
  font-size: 1.4rem;
  font-family: garamond-premier-pro-display, serif;
  letter-spacing: 0.2px;
  margin-top: 20px;
  margin-left: 2px;
}
.underDesc .right .desc {
  font-size: 1.45rem;
  line-height: 3.2;
  letter-spacing: 0.025em;
  width: 90%;
}




.detailBtn {
  font-size: 1.2rem;
  letter-spacing: 0px;
  line-height: 64px;
  border-radius: 37px;
  width: 100%;
  margin: 0px auto 15px;
}
.detailBtn span:before {
  width: 5px;
  height: 5px;
  top: 52%;
}
.detailBtn a {
  border-radius: 37px;
}




/* underMedia */

.underMedia {
  margin-top: 150px;
  padding-top: 0px;
  padding-bottom: 110px;
}
.underMedia .cont {
  width: 81%;
  flex-direction: column;
  margin: 70px auto 0;
}

.underMedia .cont .left {
    width: 100%;
}
.mediaSlider li {
    height: 60vw;
}


.underMedia .cont .right {
    width: 100%;
    display: initial;
    align-items: initial;
    margin-top: 46px;
}
.underMedia .cont .right > .inner {
    width: 94%;
    margin-left: 1.8%;
}
.underMedia .cont .right .title {
  font-size: 3.3rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  top: initial;
  margin-bottom: initial;
}
.underMedia .cont .right .title span {
  font-size: 1.3rem;
  margin-top: 12px;
  margin-left: 4px;
}
.underMedia .cont .right .desc {
  margin-top: 44px;
  font-size: 1.45rem;
  line-height: 2.85;
  letter-spacing: 0.035em;
}
.visitMore {
  margin-top: 33px;
  height: 67px;
  line-height: 67px;
}
.visitMore a {
  font-size: 1.3rem;
}


/* underSelect */

/*
aboutList
*/

.aboutSelect {
  padding: 0px 45px 45px;
  width: calc(100% - 90px);
  background: #fff;
}
.designFieldCont .aboutSelect {
  padding-bottom: 45px;
  padding-top: 0px;
}
.selectList {
  padding-top: 55px;
}
.underSelect {
  margin: 156px auto 0px;
  padding-bottom: 45px;
  padding-top: 45px;
}
.underSelect >  .inner {
  padding-bottom: 26px;
  width: calc(100% - 17%);
}
.aboutSelect .selectList {
  padding-top: 54px;
}
.selectList .cont .inner {
  margin: 43px auto 0;
  width: 73%;
}
.selectList .listCont {
  padding-bottom: 69px;
  width: 47.5%;
  padding-top: 0px;
  margin-right: 2.5%;
  margin-bottom: 49px;
  background: #fff;
}
.selectList .listCont + .listCont {
  margin-left: 2.5%;
}
.selectList .listCont:nth-child(3n + 3) {
   margin-right: 2.5%;
}
.selectList .listCont:nth-child(2n + 2) {
  margin-right: 0;
}
.selectList .listCont:nth-child(2n + 3) {
  margin-left: 0;
}
.selectList .listCont .image {
  height: 28.5vw;
}
.selectList .title {
  font-size: 2.1rem;
  letter-spacing: 0.2px;
}

.selectList .subTitle {
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-top: 9px;
}
.selectList .desc {
  font-size: 1rem;
  color: #6d6d6d;
  line-height: 2.4;
  letter-spacing: 0.03em;
  margin: 29px auto 0;
}

.readMore {
  font-size: 1rem;
  letter-spacing: 0.6px;
  margin-top: 35px;
  margin-left: 1px;
}


/*
circleList
*/

.circleList {
  padding-top: 41px;
  flex-direction: column;
  align-items: center;
}
.circleList .listCont .image .img {
  transform:scale(1);
}
.circleList .listCont {
  width: 90% !important;
  border-right: 0px;
  padding-right: 0;
  padding-top: 50px;
  padding-bottom: 150px;
}
.circleList .listCont +  .listCont {
   border-top: 1px solid #add8e6 !important;
   padding-top: 100px;
   border-right: 0 !important;
}
.circleList  .listCont + .listCont {
  padding-left: 0;
}
.circleList .listCont .image {
  height: 50vw !important;
  width: 50vw;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.circleList .cont .inner {
  margin-top: 57px !important;
}
.circleList .title {
  font-size: 2.4rem !important;
  font-size: calc(24px + ((1vw – 3.2px)*0.7625 )) !important;
  letter-spacing: 0.03em !important;
}
.circleList .subTitle {
  font-size: 1.1rem !important;
  margin-top: 10px !important;
  letter-spacing: 0.09em;
}
.circleList .desc {
  font-size: 1.2rem;
  color: #6d6d6d;
  line-height: 29px;
  width: 165px;
  margin: 35px auto 0;
}
.circleList .readMore {
  margin-left: 0px;
  color: #8b8b8b;
  display: inline-block;
  margin-top: 42px;
}


/*
Design Field
*/

.designFieldList .cont .inner {
  margin-top: 43px;
}
.designFieldList .title {
    font-size: 3.55rem;
    line-height: 1.25;
    letter-spacing: 0.05em;
    margin-top: 15px;
}




/* underCompany */

.underCompany {
    width: 100%;
    margin:0 auto;
}
.underCompany dl dd {
  margin-top: 10px;
  font-size: 1.5rem;
  line-height: 24px;
  letter-spacing: 0.2px;
}
.underCompany dl + dl {
  margin-top: 29px;
}
.businessList {
  font-size: 1.4rem;
  margin-top: 14px;
}
.businessList li + li {
  margin-top: 8px;
}



/*
---------------------------------------------------
  6. Journal
---------------------------------------------------
*/

/* contents */

.newsCont {
  margin-top: 167px;
}
.newsCont .underHead {
  padding-bottom: 29px;
}
.underNewsNav ul li:after {
    bottom: -31px;
}

.underNewsNav {
  margin-left: -10px;
}
.underNewsNav ul li.sp {
  display: block;
}
.underNewsNav ul li.pc {
  display: none;
}
.newsCont .underNewsNav ul li {
  font-size: 1.4rem;
  letter-spacing: 0.7px;
}
.newsCont .underNewsNav ul li:hover:after {
  width: 0px;
}
.underNewsNav select {
  font-size: 1.3rem;
  letter-spacing: 0.7px;
}
.underNewsNav .arrowInner::after {
  top: 7px;
  right: -14px;
  width: 5px;
  height: 5px;
}

.underNewsNav ul li + li:nth-child(2) {
    margin-left: 41px;
}
.underNewsNav ul li + li:nth-child(4) {
    margin-left: 52px;
}

.newsCont > .inner {
  width: calc(100% - 9.4%);
  margin-top: 45px;
}


/* detail */

.singleNews {
  width: calc(100% - 2.6%);
  margin: 196px auto 0px;
}
.singleHead .postTitle {
  font-size: 3.2rem;
  letter-spacing: 0.02em;
  line-height: 43px;
  width: 547px;
  margin: 9px auto;
}
.singleHead .postDate {
  font-size: 1.1rem;
  margin-top: 7px;
  letter-spacing: 0.5px;
}
.singleCont {
  margin-top: 82px;
  margin-bottom: 37px;
  flex-direction: column;
}

.singleCont .left {
  width: 100%;
  position: relative;
  bottom: initial;
  align-self: initial;
}
.singleCont .right {
  width: 100%;
  margin-left: 0;
  margin-right: 0%;
  position: relative;
  bottom: 0;
  align-self: initial;
  margin-top: 60px;
}
.singleCont .right .article {
  font-size: 1.4rem;
  line-height: 2.9;
  bottom: initial;
  align-self: initial;
  width: 68%;
  position: relative;
  margin-left: 52px;
  margin-top: initial;
}
.singleCont .right .article:before {
  content:"";
  position: absolute;
  width:1px;
  height: 100%;
  right: -47px;
}

.singleCont .cat {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  width: 85%;
  margin-top: 22px;
  margin: 32px auto 0px;
}
.singleCont .cat a {
  display: inline-block;
  position: relative;
}


/* postNav */

.postNav {
    top: 52.5%;
    display: none;
}


/* prevNext */

section.prevNext {
  width: calc(100% - 15.5%);
  margin: 132px auto 100px;
}
.prevNext .inner {
  padding-top: 60px;
  padding-bottom: 58px;
}
.prevNext .navPost {
  font-size: 1.7rem;
  width: calc(50% - 15px);
  position: relative;
}
.prevNext .navPost a:before {
  position: absolute;
  content: "";
  top: 51%;
  width: 6px;
  height: 6px;
  border-top: 1px solid #cdb99c;
  border-right: 1px solid #cdb99c;
  z-index: 0;
}
.prevNext .navPost.nextPost {
  padding-left: 26px;
}
.prevNext .nextPost a:before {
  left: -27px;
}
.prevNext .navPost.prevPost {
  padding-right: 26px;
}
.prevNext .navPost.prevPost a:before {
  right: -27px;
}

.prevNext .toIndex {
  width: 26px;
  height: 21px;
  margin-top: 0.4rem;
}



/*
---------------------------------------------------
  7. Design
---------------------------------------------------
*/

/* DesignField */


/*
Mv
*/

.fieldMv > .inner {
  flex-flow:column;
}
.fieldMv .left {
    width: 100%;
}
.fieldMv .cont {
  height: 55vw;
}
.fieldMv .cont .title {
  font-size: 6rem;
  line-height: 1.25;
  letter-spacing: 0.09em;
  margin-top: 0px;
}
.fieldMv .cont .title span {
  font-size: 1.15rem;
  margin-top: 16px;
}

.active .fieldMv .cont .title, .active2 .fieldMv .cont .title {
  transition-delay: 0.6s;
}

.fieldMv .right {
  width: 100%;
  height: 92vw;
}




/*
FieldCont
*/

.fieldMv + .fieldCont {
    margin-top: 106px;
}
.fieldCont > .inner {
  flex-flow:column;
  width: calc(100% - 0px);
}
.fieldCont .left {
  display: none;
}

.fieldCont .right {
    width: 100%;
}

.fieldDesc {
    width: 72%;
    margin:0px auto 0;
}
.fieldDesc .lead {
    font-size: 3.3rem;
    line-height: 1.7;
}
.fieldDesc .desc {
    font-size: 1.45rem;
    line-height: 3.15;
    margin-top: 57px;
    margin-bottom: 0px;
}

/*
close
*/

.fixedClose {
  top: 19px;
  right: 21px;
}


/*
workField
*/

.workField {
  margin-top: 134px;
  padding-bottom: 175px;
}

.sectTitle {
  font-size: 5.5rem;
  width: 81%;
  padding-top: 93px;
}
.sectTitle span {
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  margin-top: 6px;
  margin-left: 1px;
}
.fieldSlider {
  width: 81.1%;
}
.fieldSlider li .cont {
  margin: 0px auto 58px;
}
.fieldSlider li .cont .num {
  font-size: 1.7rem;
}
.fieldSlider li .cont .title {
  font-size: 2.4rem;
  margin-top: 11px;
}
.fieldSlider li .cont .title span {
  font-size: 1.15rem;
  margin-top: 8px;
}
.fieldSlider li .cont .desc {
  line-height: 2.7;
}


.fieldSlider button.slick-arrow {
    top: -193px;
}
.fieldSlider button.slick-next {
    right: 72px;
}
.fieldSlider button.slick-next:hover {
    right: 75px;
}


/*
caseStudy
*/

.caseList {
  width: 96.6%;
  margin: 72px auto 55px;
}
.caseList li {
  margin-top: 0px;
  padding-top: 0px;
  border-top: initial;
  margin-bottom: 0px;
  padding-bottom: 155px;
  border-bottom: 0px solid #ededed;
}
.caseList li:last-child {
  margin-bottom: 0;
  border: none;
  padding-bottom: 73px;
}
.caseList li > .inner {
  flex-flow:column;
}

.caseList li .left {
  width: 100%;
}
.caseList li .left .image {
  height: 73.5vw;
}

.caseList li .right {
  width: 100%;
  display: block;
  align-items: initial;
  margin-top: 72px;
}
.caseList li .right .cont {
  width: 79%;
}
.caseList li .right .title span.main {
  font-size: 5rem;
}
.caseList li .right .title span.sub {
  font-size: 1.4rem;
  margin-top: 25px;
  padding-left: 41px;
}
.caseList li .right .title span.sub:before {
  width: 34px;
  top: 4px;
  transform: rotate(-56deg);
}

.showBtn {
  font-size: 1.3rem;
  width: 93%;
  height: 77px;
  line-height: 79px;
}

.sectClose span {
  padding-left: 20px;
}

/*
fieldNext
*/

.fieldNext {
  height: 88vw;
  margin-top: 60px;
}
.fieldNext > .inner {
  width: 74%;
}
.fieldNext .num {
  font-size: 2.1rem;
  letter-spacing: 0.05em;
  margin-left: 6px;
}
.fieldNext .title {
  font-size: 5.2rem;
  line-height: 1.15;
  margin-top: 30px;
}
.fieldNext .title span {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}
.fieldNext .readMore {
  font-size: 1.1rem;
  margin-top: 69px;
}



/* workList */

.archiveCont {
  margin-bottom: 60px;
}
.workList li + li {
  margin-top: 70px;
  padding-top: 70px;
}
.workList li > .inner {
  width: 98%;
}
.workList li .postCont {
  width: 40.5%;
  margin-left: 9.5%;
}

.workList li .postCont .title {
  font-size: 3.6rem;
  letter-spacing: 0.05em;
}
.workList li .postCont .subTitle {
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-top: 12px;
}
.workList li .postCont .desc {
  font-size: 1rem;
  line-height: 2.4;
  letter-spacing: 0.05em;
  width: 89%;
  margin-top: 14px;
}
.workList li .postCont .detailBtn {
  display: none;
}
.workList li .detailBtn.tablet {
  display: block;
  margin-top: 44px;
}

.workList li .postCont .date {
  font-size: 1.1rem;
  margin-top: 22px;
  padding-left: 33px;
}
.workList li .postCont .date:before {
  content: "";
  position: absolute;
  width: 33px;
  height: 1px;
  transform: rotate(-51deg);
  left: -6px;
  top:2px ;
}
.workList li .postCont .cat {
  font-size: 1.1rem;
  letter-spacing: 0px;
  margin-top: 20px;
}
.workList li .postCont .cat a + a:before {
  margin-right: 2px;
}

.workList li .postImg {
  width: 50%;
  height: 33.2vw;
}
.workList li:nth-child(1) .postImg.slideLeft:before {
  width: 0%;
  transition-delay: 0s;
}


/* works - single */

/*
common
*/

.singleWorks {
    margin-bottom: 69px;
}


/*
MV
*/

.mvCont .title {
  font-size: 5.2rem;
  letter-spacing: 4.5px;
  height: 52px;
}
.mvCont .cat {
  font-size: 1.3rem;
  margin-top: 20px;
  height: 20px;
}

.worksMv .mvCont {
  position: absolute;
  top: 50.9%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  color:#fff;
  text-align: center;
  transition: all ease 0.4s;
}
.worksMv .bg.active {
  background-attachment:initial;
}



/*
workIntro
*/

.workIntro .inner {
  width: 78%;
  margin:0 auto;
  padding-top: 104px;
  padding-bottom: 131px;
  flex-flow: column;
}
.workIntro .left {
  width: 100%;
  margin-top: 6px;
}
.workIntro .left .title {
  font-size: 4.9rem;
  letter-spacing: 1.7px;
  width: 100%;
}
.workIntro .left .date {
  font-size: 1.15rem;
  margin-top: 26px;
  padding-left: 35px;
  opacity: 0.7;
}
.workIntro .left .date:before {
  width: 36px;
  height: 1px;
  transform: rotate(-51deg);
  left: -3px;
  top: 1px;
}
.workIntro .left .cat {
  font-size: 1.2rem;
  margin-top: 24px;
  letter-spacing: 0.1px;
}
.workIntro .left .urlBtn {
  line-height: 43px;
  margin-top: 33px;
}
.workIntro .left a.url {
  font-size: 1.2rem;
}
.workIntro .left a span {
  padding-left: 15px;
}

.workIntro .right {
  width: 54%;
  position: relative;
  padding-top: 7px;
  margin-top: 48px;
}
.workIntro .right:before {
  content: "";
  position: absolute;
  height: 98%;
  width: 0px;
  background-color: rgba(255,255,255,0.2);
  top: 51%;
  left: -47px;
  transform: translateY(-50%);
}
.workIntro .right .desc {
  font-size: 1.3rem;
  letter-spacing: 0px;
  line-height: 2.9;
  opacity: 0.8;
}
.workIntro .right a.url {
  font-size: 1.4rem;
  margin-top: 30px;
  margin-bottom: 33px;
}
.workIntro .right a.url:before {
  margin-right: 3px;
}


/*
workCont
*/

.workCont .subTitle {
  margin-top: 52px;
  margin-bottom: 34px;
}
.workCont .subTitle span.number {
  font-size: 1rem;
  margin-bottom: 6px;
}
.workCont .subTitle span.txt {
  font-size: 1.3rem;
  letter-spacing: 0.6px;
}
.workCont {
  width: 87.5%;
  margin:0 auto;
}
.workCont .image {
  width: 100%;
}
.workCont .image + .image {
  margin-top: 27px;
}

.workCont .credit {
  width: 100%;
  text-align: left;
  white-space: initial;
  margin-left: 1px;
}
.workCont .credit + .credit {
  margin-top: 44px;
}
.workCont .credit > .inner {
  width: 100%;
  text-align: left;
}
.workCont .credit span:nth-child(1) {
  font-size: 1rem;
  letter-spacing: 0.6px;
  width: 50%;
}
.workCont .credit span:nth-child(2) {
  font-size: 1.2rem;
  letter-spacing: 0.3px;
}
.workCont .credit span:nth-child(3) {
  font-size: 1.1rem;
  letter-spacing: 0.2px;
}
.workCont .credit span:nth-child(2) + span:before {
  font-size: 1.3rem;
  margin-left: 3px;
  margin-right: 3px;
}


/*
backBtn
*/

.backBtn {
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  width: 90%;
  margin-top: 80px;
  border-radius: 37px;
}
.backBtn a {
  padding:29px 0;
  border-radius: 37px;
}
.backBtn span:before {
  top: 59%;
  width: 5px;
  height: 5px;
  border-top: solid 1px #b6a389;
  border-right: solid 1px #b6a389;
}


/*
workNext
*/

.workNext {
  background-color: #161616;
  color: #fff;
  height: 640px;
}
.workNext .left {
  width: 50%;
}
.workNext .left.slideIn .image:after {
  width: 11%;
}

.workNext .right {
  width: 50%;
}
.workNext .right .nextCont {
  top: 27.3%;
  left: 9.5%;
  width: 75%;
}
.workNext .nextNav {
  font-size: 1.3rem;
  letter-spacing: 1.3px;
}
.workNext .nextTitle {
  font-size: 4.1rem;
  letter-spacing: 1.9px;
  margin-top: 32px;
}
.workNext .nextCat {
  font-size: 1.1rem;
  margin-top: 9px;
}
.workNext .nextBtn {
  font-size: 1.8rem;
  height: 60px;
  width: 60px;
  line-height: 62px;
  margin-top: 38px;
}


/* Design Guide */

/*
priceList
*/

.priceList {
    margin-bottom: 170px;
}
.priceCont {
    width: 80.6%;
    margin: 95px auto 0;
}
.priceCont dt {
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  width: 33%;
}

.priceCont dd {
    width: 67%;
    margin-top: -7px;
}
.priceCont dd li .nmae {
    font-size: 1.1rem;
    padding-bottom: 10px;
}
.priceCont dd li .price {
    font-size: 0.9em;
    letter-spacing: 0.02em;
    padding-left: 17px;
}
.priceCont dd li .price span {
    font-size: 1.9rem;
    margin-left: 7px;
}



/*
---------------------------------------------------
  8. Philosophy
---------------------------------------------------
*/

/* contents */

/*
Close
*/

.philoClose {
  right: 16px;
  top: 14px;
  height: 53px;
  width: 53px;
}
.philoClose span {
  width: 33px;
}



/*
Title
*/

.philoCont .title {
  top: 48%;
  left: 10%;
  opacity: 1;
  transition:all ease .5s;
}
.active .philoCont .title,
.active2 .philoCont .title {
  opacity: 0;
  transition-delay: 3.2s;
  margin-top: -20px;
}
.philoCont .title .eng {
  font-size: 5.6rem;
  letter-spacing: 5.6px;
  height: 53px;
}
.philoCont .title .eng span {
  display: inline-block;
  margin-top: 42px;
}
.philoCont .title .jpn {
  font-size: 1.45rem;
  letter-spacing: 1.5px;
  margin-top: 14px;
}
.philoCont .title .jpn:before {
  top: -26px;
}


/*
MainImg
*/

.philoCont .mainImg {
  height: calc(100vh - 95px);
  -webkit-transition: 2.3s cubic-bezier(.6,0,.25,1);
  transition: 2.3s cubic-bezier(.6,0,.25,1);
  min-height: initial;
  widows: 100%;
  margin-top: 0;
}
.philoInner.active .philoCont .mainImg {
  height: 65vw !important;
  transition-delay: 3.2s;
}


/*
Nav
*/

.underPhiloNav {
  display: none;
}
.underPhiloNav ul {
  position: absolute;
  right: initial;
  left: 50%;
  transform:translateX(-50%);
}
.underNav ul li {
  font-size: 1.55rem;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.underNav ul li span {
  margin-top: 7px;
}
.underNav ul li + li {
  margin-left: 79px;
}
.underNav ul li + li:before {
  top: 7px;
  left: -38px;
  height: 34px;
}


/*
About
*/

.philoCont .about {
  display: block;
  margin-top: 114px;
  width: 66%;
}
.ourPhilosophy .about .left {
  width: 100%;
}
.ourPhilosophy .about .left > .inner {
  position:  initial;
  top: initial;
  margin-bottom: 58px;
}

.philoCont .about .left .copy {
  font-size: 3.4rem;
  letter-spacing: 1.1px;
  line-height: 38px;
  font-weight: 500;
}
.philoCont .about .left .engDesc {
  margin-top: 18px;
  font-size: 1.35rem;
  letter-spacing: 0.5px;
  line-height: 26px;
  margin-left: 2px;
}

.philoCont .about > .right {
  width: 100%;
  margin-top: 0px;
}
.philoCont .about .right .desc {
  font-size: 1.45rem;
  line-height: 3.2;
  letter-spacing: 0.035em;
  width: 100%;
}


/*
NextCont
*/

.philoCont .nextCont {
  margin: 145px auto 0;
  background: #eee;
  background-size: cover;
  background-position: center center;
  position: relative;
  background-attachment: initial;
}
.ourMission .philoCont .nextCont {
  background-image: url(../img/thumb/philosophy/02_vision.jpg);
}
.ourVision .philoCont .nextCont {
  background-image: url(../img/thumb/philosophy/03_value.jpg);
}
.ourValue .philoCont .nextCont {
  background-image: url(../img/thumb/philosophy/01_story.jpg);
}

.philoCont .nextCont:before {
  content:"";
  position: absolute;
  display: block;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2)
}


.philoCont .nextCont > .inner {
  width: 71%;
  padding: 28.5vw 0;
  flex-direction: column;
  margin: 0px auto 0;
}
.philoCont .nextCont .left {
    width: 100%;
    display: none;
}
.philoCont .nextCont .left .image {
  height: 52vw;
  width: 52vw;
}

.philoCont .nextCont .right > .inner {
  position: relative;
  top: initial;
  left: initial;
  transform:initial;
  white-space: nowrap;
  color:#fff;
}
.philoCont .nextCont .nextNav {
  font-size: 1.45rem;
  letter-spacing: 1.3px;
  margin-left: 2px;
}
.philoCont .nextCont .nextNav:before {
  bottom: -4px;
  background-color: rgba(255,255,255,0.5);
}

.philoCont .nextCont .nextTitle {
  font-size: 5.7rem;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 4.3px;
  margin-top: 42px;
}
.philoCont .nextCont .nextDesc {
  font-size: 1.2rem;
  color:#fff;
  letter-spacing: 0.6px;
  margin-top: 0px;
  margin-left: 1px;
}

.philoCont .nextCont .nextBtn {
  font-size: 1.8rem;
  margin-top: 42px;
  margin-left: 0;
  height: 66px;
  width: 66px;
  line-height: 68px;
  color: #fff;
  border: 1px solid rgba(229, 229, 229, 0.7);
}

.closeMessage {
  font-size: 1.6rem;
  letter-spacing: 0.09em;
  padding-top: 36px;
  padding-bottom: 40px;
  background: initial;
}
.closeMessBtn:before {
  left: -22px;
  width: 7px;
  height: 7px;
}

.closeMessBtn {
  font-size: 1.35rem;
  letter-spacing: 1.6px;
  margin-left: 0px;
}


/*
Guideline
*/

.ourValue .about {
    margin-bottom: 50px;
}
.ourValue .about .left > .inner {
    margin-bottom: 37px;
}
.philoCont .about + .about {
    margin-top: 0px;
    border-top: 0px solid #f5f5f5;
    margin-bottom: 38px;
    padding-top: 44px;
}
.philoCont .about .left .guideCopy span.num {
    font-family: adobe-garamond-pro, serif;
    font-size: 2.4rem;
    margin-right: initial;
    display: inline-block;
    width: 6.3%;
}
.philoCont .about + .about .desc {
    margin-left: 6.5%;
    position: relative;
    font-size: 1.4rem;
    line-height: 39px;
    letter-spacing: 0;
}
.philoCont .about + .about .desc:before {
    content: "";
    position: absolute;
    height: calc(100% - 18px);
    width: 1px;
    background: #eee;
    left: -6.1%;
    top: 12px;
}

.philoCont .about .left .guideCopy {
  font-size: 2.3rem;
  margin-bottom: -13px;
  letter-spacing: 0px;
}




/*
---------------------------------------------------
  10. Contact
---------------------------------------------------
*/

/*
Commmon
*/

.contactCont {
  margin-bottom: 94px;
}
.contactMain {
  width: calc(100% - 24.2%);
  margin-left: auto;
  margin-right: auto;
  margin-top: 52px;
}
.contactMain.animation {
  margin-top: 33px;
}
.contactMain >  .inner {
  flex-wrap: wrap;
  flex-direction: column
}
.contactMain .left {
  width:  100%;
}
.contactMain .middle {
  width: 100%;
  padding-right: 0%;
  margin-top: initial;
}
.contactMain .right {
  width: 100%;
  margin-top: 64px;
}


/*
Left
*/

.contactNav ul li {
  font-size: 1.5rem;
  display: inline-block;
  position: relative;
}
.contactNav span {
  font-size: 1.55rem;
  margin-right: 6px;
  margin-left: 1px;
}
.contactNav ul li + li {
  margin-left: 33px;
  margin-top: initial;
}
.contactNav ul li + li:before {
  content: "";
  position: absolute;
  top: 6px;
  left: -21px;
  width: 1px;
  height: 15px;
  transform: rotate(22deg);
  background-color: #e1e1e1;
}


/*
Middle
*/

.contactMain .middle .contactDesc {
  font-size: 1.3rem;
  line-height: 30px;
  letter-spacing: 0px;
  margin-top: 0px;
}
.contactMain .middle .email {
  font-size: 1.25rem;
  font-family:'Helvetica Neue LT W01_41488878';
  margin-top: 27px;
  margin-left: 2px;
}
.contactMain .middle .email span {
  font-size: 1.2rem;
}


/*
Right
*/

.contactMain .right .formTitle {
  font-size: 1.15rem;
  letter-spacing: 0px;
  margin-bottom: 17px;
}
.contactMain .right .formCont + .formCont {
  margin-top: 36px;
}
.contactMain .right .formCont input {
  font-size: 1.3rem;
  letter-spacing: 0.4px;
  width: calc(100% - 15px);
  line-height: 55px;
  padding-left: 15px;
}
.contactMain .right .formCont textarea {
  height: 24em;
}
.contactMain .right .accept {
  font-size: 1.3rem;
  margin-top: 20px;
}
.contactMain .right .accept a:before {
    bottom: -4px;
}
.contactMain .right .accept span.checkbox-661 {
  margin-right: 7px;
}
.contactMain .right .btnList {
  margin-top: 44px;
  width: 103%;
  margin-left: -1.5%;
}
.contactMain .right .btnList input {
  width:100%;
  margin-left: 0%;
}


/*
---------------------------------------------------
  11. Privacy Policy
---------------------------------------------------
*/

.privacyCont {
  margin-bottom: 165px;
}
.policyMain {
  width: calc(100% - 25%);
  margin-top: 67px;
}
.policyMain.animation {
  margin-top: 58px;
}
.policyMain .cont {
  margin-left: 0%;
}
.policyMain .cont dl {
  flex-flow: column;
}
.policyMain .cont dl:nth-child(1) dt {
  display: none;
}

.policyMain .cont dl + dl {
  margin-top: 62px;
  padding-top: 0;
  border-top: initial;
}
.policyMain .cont dl dt {
  font-size: 2.3rem;
  letter-spacing: 0.04em;
  width: 100%;
}
.policyMain .cont dl dt span {
  font-size: 2.9rem;
  margin-right: 8px;
}
.policyMain .cont dl dd {
  width: 100%;
  font-size: 1.4rem;
  line-height: 31px;
  letter-spacing: 0.02em;
  margin-top: 21px;
}
.policyMain .cont dl:nth-child(1) dd {
  margin-top: -10px;
}


/*
--
*/
}


/*
===================================================
  C. SP :  767px
===================================================
*/

@media screen and (max-width:767px) {



/*
---------------------------------------------------
  0. Common
---------------------------------------------------
*/

html {

}


/*
---------------------------------------------------
  1. Header
---------------------------------------------------
*/

/* commmon */

header {
  height: 125px;
  z-index: 3;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  overflow:hidden;
}
header.active {
  height: 125px;
}
header.active.humbActive {
  margin-top: -78px;
}
header.hide {
  top: -125px;
}
header .headeWrap > .inner {
  width: 95.5%;
}
header .headeWrap {
  width: calc(100% - 25px);
  border-bottom: 1px solid #f4f4f4;
}
header.worksHead .headeWrap {
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
header.worksHead.workActive .headeWrap {
border-bottom: 1px solid #eeee;
transition: all .5s ease;
}

/* title */

header .title {
  font-size: 1.5rem;
  letter-spacing: 0.13em;
  left: 49.7%;
  top: 63%;
  white-space: nowrap;
}
header .title.slideIn {
  top: 40%;
}

header .title.slideIn img{
	width:80px;
	height: auto;
}

header.active .title.slideIn {
  font-size: 1.5rem;

  letter-spacing: 0.13em;
  top: 40%;
}

/* humb */

header .humb {
  width: 23px;
  height: 13px;
  right: 1%;
  top: 40%;
}
header .humb.slideIn {
  top: 40%;
}
header .humb span {
  height: 1px;
}

/* spHumb */

.humbCont.pc {
  display: none;
}
.humbCont.sp {
  display: block;
}
.humbCont.sp > .inner {
  display: block;
  overflow-y: scroll;
  position: relative;
}

.humbClose {
  left: initial;
  transform:initial;
  top: 19px;
  right: 21px;
  width: 23px;
  height: 23px;
}
.humbClose span {
  background-color: #000;
}

.humbCont .navCont {
  height: 87vh;
  min-height: 400px;
  position: relative;
}
.humbCommonNav {
  position: absolute;
  top: 25px;
  left: 14%;
}



/*
Main
*/

.humbMainNav {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
  transition:all ease .5s;
}
.humbMainNav.fadeOut {
  margin-top: 25px;
  opacity: 0;
  visibility: hidden;
  transition:all ease .5s;
}


.humbMainNav .main {
  font-size: 8vw;
  letter-spacing: 0.02em;
  font-weight: 300;
  margin-top: 14vw;
  transition:all ease .5s;
}
.humbMainNav .main li + li {
  margin-top: 17px;
}
.humbMainNav .sub {
  margin-top: 36px;
  font-family:'Helvetica Neue LT W01_41488878';
  font-size: 1.3rem;
}
.humbMainNav .sub li + li {
  margin-top: 9px;
}

.humbMainNav.active {
  visibility: hidden;
  opacity: 0;
  transition:all ease .5s;
}
.humbMainNav.active .main li {
  padding-top: 10px;
  opacity: 0;
  transition:all ease .5s;
}
.humbMainNav .main li {
  padding-top: 0px;
  opacity: 1;
  transition:all ease .5s;
}
.humbMainNav .main li:nth-child(1) {
  transition-delay: 0.25s;
}
.humbMainNav .main li:nth-child(2) {
  transition-delay: 0.35s;
}
.humbMainNav .main li:nth-child(3) {
  transition-delay: .45s;
}
.humbMainNav .main li:nth-child(4) {
  transition-delay: .55s;
}

.humbMainNav.active .sub li {
  padding-top: 5px;
  opacity: 0;
  transition:all ease .5s;
}
.humbMainNav .sub li {
  padding-top: 0px;
  opacity: 1;
  transition:all ease .5s;
}
.humbMainNav .sub li:nth-child(1) {
  transition-delay: 0.65s;
}
.humbMainNav .sub li:nth-child(2) {
  transition-delay: 0.75s;
}

.dli-plus {
font-size: 2rem;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #add8e6;
}



.btn-mod02,
a.btn-mod02{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 13px;
    color: #444;
    background: #b0e0e6;
    border: 2px solid transparent;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-mod02:hover,
.btn-mod02:focus,
a.btn-mod02:hover,
a.btn-mod02:focus{
    font-weight: 400;
    color: rgba(255,255,255, .85);
    background: rgba(0,0,0, .7);
    text-decoration: none;
    outline: none;
}
.btn-mod02:active{
    cursor: pointer !important;
}

.btn-mod02.reservebtn02 {
     position: relative;
     bottom: 20px;
}

.btn-mod02.btn-large02{
    padding: 6px 9px;
    font-size: 10px;
}


.btn-mod03,
a.btn-mod03{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 13px;
    color: #444;
    background: #b0e0e6;
    border: 2px solid transparent;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.btn-mod03:hover,
.btn-mod03:focus,
a.btn-mod03:hover,
a.btn-mod03:focus{
    font-weight: 400;
    color: rgba(255,255,255, .85);
    background: rgba(0,0,0, .7);
    text-decoration: none;
    outline: none;
}
.btn-mod03:active{
    cursor: pointer !important;
}

.btn-mod03.reservebtn03 {
     position: relative;
     bottom: 20px;
    left: 10px;
}

.btn-mod03.btn-large03{
    padding: 6px 9px;
    font-size: 11px;
}


/*
Service + About
*/

.humbServNav,.humbAboutNav,.humbPlanNav,.humbInfoNav {
  visibility: hidden;
  opacity: 0;
  transition:all ease .5s;
  margin-top: 25px;
}
.humbSpSubNav .main li {
  padding-top: 10px;
  opacity: 0;
  transition:all ease .5s;
  white-space: nowrap;
}

.humbSpSubNav.active {
  visibility: visible;
  opacity: 1;
  transition:all ease .5s;
  margin-top: 0;
}
.humbSpSubNav.active .main li {
  padding-top: 0px;
  letter-spacing: 0.03em;
  opacity: 1;
  transition:all ease .5s;
}
.humbSpSubNav.active .main li:nth-child(1) {
  transition-delay: 0.25s;
}
.humbSpSubNav.active .main li:nth-child(2) {
  transition-delay: 0.35s;
}
.humbSpSubNav.active .main li:nth-child(3) {
  transition-delay: .45s;
}
.humbSpSubNav.active .main li:nth-child(4) {
  transition-delay: .55s;
}
.humbSpSubNav.active .main li:nth-child(5) {
  transition-delay: .65s;
}

.humbSpSubNav.fadeOut {
  visibility: hidden;
  opacity: 0;
  transition:all ease .5s;
  margin-top: 25px;
}



.humbSpSubNav {
  font-size: 1.2rem;
  letter-spacing: 0px;
}
.humbBackBtn {
  font-size: 2.3rem;
  color:#add8e6;
  margin-top: 3px;
}
.humbSpSubNav .main {
  margin-top: 33px;
}
.humbSpSubNav .main li + li {
  margin-top: 23px;
}



/*
SNS
*/

.humbCont .snsCont {
  left: 14%;
  bottom: 40px;
}
.humbCont .snsCont ul {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  font-size: 1.9rem;
  opacity: 1;
}
.snsCont li {
  text-align: center;
}
.humbCont .snsCont ul li + li {
  margin-left: 14px;
}

 .slideIn .headerlogo{
position: relative;
top: 23%;
transition: all .3s ease;
text-align: center;

}

.slideIn .headerlogo img{
width:20%;
  height:auto;
}

.active .headerlogo  {
position: relative;
top: 15%;
transition: all .3s ease;
text-align: center;
}

.active .headerlogo  img {
width:20%;
  height:auto;
}


/*
---------------------------------------------------
  2. Footer
---------------------------------------------------
*/

/* common */

footer {
  margin-top: 0px;
}
footer > .inner {
    width: 76%;
    margin: 0px auto 0px;
    padding-top: 72px;
    position: relative;
}


/* navCont */

.navCont {
  display: block;
}
.navCont .navTitle {
    font-size: 1.7rem;
    letter-spacing: 2.3px;
    margin-bottom: 16px;
}
.footNav + .footNav {
    margin-top: 45px;
    margin-left: initial;
    display: block;
}
.footNav:nth-child(2) + .footNav {
  margin-left: 0px;
}
.footNav ul li {
    font-size: 1.2rem;
    opacity: 0.5;
    letter-spacing: 0.1px;
}
.footNav ul li a {
  padding-left: 1px;
}
.footNav ul li a:before {
  display: none;
}
.footNav ul li + li {
    margin-top: 11px;
}

.footNav.one,.footNav.two {
    display: inline-block;
}
.footNav.one + .footNav.two {
    margin-left: 46px;
    margin-top: 0px;
}


/* socialCont */

.socialCont {
  margin-top: 38px;
  margin-left: -3px;
}
.socialCont .socialNav ul li + li {
  margin-left: 7.8px;
}
.socialCont .socialNav ul li {
    font-size: 1.5rem;
    height: 42px;
    width: 42px;
    line-height: 43px;
    border: 1px solid rgba(255,255,255,0.1);
}


/* producedCont */

.producedCont {
  width: 100%;
  max-width: 284px;
  margin-top: 51px;
}
.producedCont .title {
  ffont-size: 2.6rem;
  letter-spacing: 0.11em;
}
.producedCont .desc {
  opacity: 0.5;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  line-height: 21px;
  margin-top: 14px;
}

.producedCont .address {
  opacity: 0.45;
  font-size: 1rem;
  margin-top: 26px;
}
.producedCont .address + .address {
    margin-top: 15px;
}
.producedCont .address a:before {
  bottom: -4px;
}


/* navproducedCont */

.navproducedCont {
   position: absolute;
  left: 85px;
  bottom:47px;
  opacity: 0;
  visibility: hidden;
  transition:all ease .5s;
}
.navproducedCont .title {
  ffont-size: 2rem;
  letter-spacing: 0.11em;
}
.navproducedCont .desc {
  opacity: 0.5;
  font-size: 1.6rem;
  letter-spacing: 0.4px;
  line-height: 21px;
  margin-top: 14px;
}

.navproducedCont .address {
  opacity: 0.45;
  font-size: 1rem;
  margin-top: 10px;
}
.navproducedCont .address + .address {
    margin-top: 15px;
}
.navproducedCont .address a:before {
  bottom: -4px;
}

/* navproducedCont */

.navproducedCont {
   position: absolute;
  left: 14%;
  bottom: 40px;
  opacity: 0;
  visibility: hidden;
  transition:all ease .5s;
}
.navproducedCont:before {
  display: none;
}
.navproducedCont .title {
    font-size: 1.5rem;
    letter-spacing: 3.3px;
    margin-top: 0px;
}
.navproducedCont .desc {
    font-size: 1.1rem;
    margin-top: 14px;
    line-height: 23px;
}
.navproducedCont .address {
    margin-top: 10px;
}
.navproducedCont .address {
    opacity: 0.55;
    font-size: 1rem;
    letter-spacing: 0.2px;
    margin-top: 10px;
}

.humbCont.active .navproducedCont {
  visibility: visible;
  opacity: 1;
  transition:all ease .5s;
  transition-delay: 1.8s;
}
.humbCont .navproducedCont ul {
 display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  font-size: 1.9rem;
  opacity: 1;
}
.humbCont .navproducedCont ul li + li {
  margin-left: 14px;
}

.navproducedCont li {
  text-align: center;
}




/* footUnder */

.footUnder {
  margin-top: 174px;
  padding-bottom: 27px;
}
.footUnder .copy {
  font-size: 0.9rem;
  letter-spacing: 0.8px;
  line-height: 1.8;
  opacity: 0.25;
}
.footUnder .copy span:nth-child(2) {
    margin-left: 5px;
    letter-spacing: 0.1px;
}
.footUnder .copy span:nth-child(3) {
    margin-left: 4px;
    letter-spacing: 0.4px;
}

.totop {
  height: 52px;
  width: 52px;
  right: -21px;
  bottom: 28px;
  border: 1px solid #20b2aa;
}
.totop:hover {
  background: initial;
}
.totop:before {
  width: 6px;
    height: 6px;
}


/*
---------------------------------------------------
  3. Common
---------------------------------------------------
*/


/* postList */

.postList {
  margin-bottom: 30px;
}
.postList li {
  width: calc(50% - 1px);
  margin-bottom: 0px;
  padding-right: initial;
  padding-bottom: 60px;
}
.postList li .inner {
  padding-right: 3.5%;
}
.postList li:nth-child(2n + 3) .inner {
  padding-right: 0;
  padding-left: 3.5%;
}
.postList li:nth-child(1),
.postList li:nth-child(6) {
  width: 100%;
  padding-right: 0;
  border-right: 0;
}
.postList li:nth-child(6) {
  margin-top: 25px;
}
.postList li:nth-child(1) .inner,
.postList li:nth-child(6) .inner {
  padding-right: 0;
  padding-left: 0;
}
.postList li:nth-child(1) .postImg,
.postList li:nth-child(6) .postImg {
  height: 94.5vw;
}
.postList li + li {
  margin-left: initial;
}
.postList li:nth-child(4n + 4){
  padding-right: initial;
  border-right: initial;
}
.postList li:nth-child(4n + 5) {
  margin-left: initial;
}
.postList li:nth-child(-n + 5):nth-child(2n + 2),
.postList li:nth-child(n + 7):nth-child(2n + 3) {
}
.postList li:nth-child(n + 7):nth-child(2n + 3) .inner {
  padding-left: initial;
  padding-right: 9.5%;
}
.postList li:nth-child(-n + 5):nth-child(2n + 3),
.postList li:nth-child(n + 7):nth-child(2n + 2) {
  border-right: initial;
}
.postList li:nth-child(n + 7):nth-child(2n + 2) .inner {
  padding-right: initial;
  padding-left: 9.5%;
}
.postList li:nth-last-child(-n + 4) {
  padding-bottom: 68px;
}
.postList li:nth-last-child(-n + 2) {
  padding-bottom: 43px;
}

.postList .postCont {
  padding-top: 20px;
  width: 95%;
  margin: 0 auto;
}
.postList .postCont .date {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  margin-top: 6px;
  margin-left: 2px;
}
.postList .postCont h3.title {
  font-size: 1.6rem;
  font-size: calc(12px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.02em;
  width: 100%;
  margin: initial;
  margin-top: 8px;
  line-height: 1.8;
}
.postList li:nth-child(1) .postCont,
.postList li:nth-child(6) .postCont {
  padding-top: 28px;
}
.postList li:nth-child(1) .postCont h3.title,
.postList li:nth-child(6) .postCont h3.title {
  font-size: 1.9rem;
  font-size: calc(18px + ((1vw – 3.2px)*0.7625 ));
  line-height: 22px;
  margin-top: 16px;
}
.postList .postCont .cat {
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  margin-top: 11px;
  margin-left: 1px;
}
.postList li:nth-child(1) .postCont .cat,
.postList li:nth-child(6) .postCont .cat {
  margin-top: 21px;
}
.postList .postImg {
  height: 42.6vw;
}

/* pagenation */

.pagenation {
  margin-bottom: 30px;
  margin-left: 3px;
  display: inline-block;
}
.pagenation ul li {
  font-size: 1.4rem;
  width: 46px;
  height: 46px;
  line-height: 48px;
}
.pagenation ul li + li {
  margin-left: 1px;
}
li.prev:before {
  left: 54%;
  width: 6px;
  height: 6px;
}
li.next:before {
  left: 46%;
  width: 6px;
  height: 6px;
}


/*
---------------------------------------------------
  4. Index
---------------------------------------------------
*/

/* mv */

.mv {
  width: calc(100% - 13px);
  margin: 10px auto;
}
.slide {
  background-attachment: initial;
}
.slick-list {
  padding-top: 0px !important;
}

/* mainCopy */

.mainCopy {
  width: initial;
  top: 122px;
  left: 11%;
  z-index: 1;
}
.mainCopy.fadeOut {
  opacity: 0;
  top: 80px;
}
.mainCopy .title {
  font-size: 7.1vw;
  font-size: calc(23px + ((1vw – 3.2px)*0.7625 ));
  line-height: 1.8;
  letter-spacing: 0.38em;
  height: 46.9vw;
}
.mainCopy .desc {
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  line-height: 21px;
  margin-top: 28px;
  width: 170px;
}
.mainCopy.fadeInUp .desc {
  font-size: 0.8rem;
  margin-top: 23px;
  line-height: 21px;
  letter-spacing: 0.2px;
  width: 170px;
}

/* scrollNav */

.scrollNav {
  left: 11%;
  bottom: 15px;
  display: block;
}
.scrollNav.fadeInUp {
  bottom: 30px;
}
.scrollNav.btnCursor.fadeInUp.fadeOut {
  bottom: 45px;
}
.scrollNav .txt {
  font-size: 0.9rem;
}
.scrollNav .txt:after {
  bottom: -5px;
}

/* latestInfo */

.latestInfo {
    height: 130px;
    width: 347px;
    display: none;
}
.latestInfo .inner {
    height: calc(100% - 38px);
    padding: 20px;
    width: 87%;
    margin:0 auto;
}
.latestInfo .left {
  padding-left: 0;
}
.latestInfo .left .subTitle {
    font-size: 1.05rem;
    letter-spacing: 0.4px;
    margin-top: 2px;
    margin-bottom: 9px;
}
.latestInfo .left .date {
  font-size: 1.05rem;
}
.latestInfo .left .title {
  font-size: 1.15rem;
  line-height: 17px;
  height: 3em;
  overflow-y: hidden;
  margin-top: 6px;
}
.latestInfo .right {
  margin-right: -1%;
}
.latestInfo .right .newsImg {
  width: 91px;
}



/* section - Common */

.sectCommon h2.title {
    font-size: 3.9rem;
    font-size: calc(39px + ((1vw – 3.2px)*0.7625 ));
    letter-spacing: 0.06em;
    margin-left: 1px;
}
.sectAbout h2.title {
    font-size: 3.9rem;
    font-size: calc(34px + ((1vw – 3.2px)*0.7625 ));
    letter-spacing: 0.05em;
}
.sectCommon h2.title span {
    font-size: 1rem;
    color: rgba(125, 125, 125,0.8);
    letter-spacing: 0.03em;
    margin-top: 2px;
    margin-left: 0px;
}
.sectCommon h2.title span:before {
    top: -15px;
    width: 68px;
}
.sectService h2.title span:before {
  width: 70px;
  top: -15px;
  background-color: rgba(191, 177, 145, 0.4);
}

/* section - News */

.latestNews {
  padding-top: 46px;
  width: calc(100% - 10%);
  margin-bottom: 40px;
}
.latestNews .postList {
  margin-top: 23px;
}

.latestList {
  margin-top: 43px;
}
.latestList .left {
  display: none;
}
.latestList .right {
  margin-left: initial;
  width: 100%;
}
.latestList .right .latestPost {
  justify-content: left;
}
.latestList .right .latestPost li {
  padding-bottom: 0px;
  width: 47.4%;
  padding-right: 2.55%;
}
.latestList .right .latestPost li:nth-child(n + 3) {
  padding-top: 54px;
}
.latestList .right .latestPost li:nth-child(1) {
  display: block;
  padding-left: 0;
}
.latestList .right .latestPost li:nth-child(6) {
  padding-bottom: 31px;
}
.latestList .right .latestPost li:nth-child(7) {
  display:none;
}
.latestList .right .latestPost li +  li {
  padding-left: 2.55%;
}
.latestList .right .latestPost li:nth-child(2) {
  padding-left: 2.55%;
}
.latestList .right .latestPost li +  li:nth-child(2n +  3) {
  padding-right: 2.55%;
}
.latestList .right .latestPost li +  li:nth-child(2n +  4) {
  padding-left: 2.55%;
}

.latestList .right .latestPost li +  li:nth-child(2n +  2) {
  padding-right: 0;
  border:none;
}
.latestList .right .latestPost li +  li:nth-child(2n +  3) {
  padding-left:0;
}
.latestList .right .latestPost li:nth-last-child(1) {
  padding-bottom: 50px;
}

.latestList .postCont {
  padding-top: 24px;
  text-align: left;
}

.latestList .right .postImg {
  height: 42vw;
}
.latestList .postCont {
  width: 95%;
  margin: 0 auto;
}
.latestList .postCont .date {
  font-size: 0.9rem;
  letter-spacing: 0.7px;
  margin-left: 1px;
}
.latestList .postCont h3.title {
  font-size: 1.4rem;
  font-size: calc(11px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.04em;
  width: 100%;
  margin: initial;
  margin-top: 6px;
  line-height: 1.7;
}
.latestList .postCont .cat {
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  margin-top: 8px;
  margin-left: 1px;
}
.latestList .postCont .cat:before {
  bottom: -4px;
}

a.latestBtn {
  display: none;
}


/* section - Service */

.sectService .navInner {
    padding-top: 72px;
    padding-bottom: 225px;
    display: block;
}
.sectService .navInner .left {
    margin-left: initial;
    width: calc(100% - 26%);
    margin:0 auto;
}
.sectService .navInner .left .title {
    font-size: 3.2rem;
    font-size: calc(33px + ((1vw – 3.2px)*0.7625 ));
    letter-spacing: 0.07em;
    display: inline-block;
    line-height: 30px;
    margin-top: 0;
}
.sectService .navInner .left .title br {
  display: none;
}
.sectService .navInner .left h2.title span {
  font-size: 1rem;
  margin-top: 22px;
  margin-left: 1px;
  color: rgba(255,255,255,0.7);
  position: relative;
    display: block;
}
.sectService .navInner .left h2.title span:before {
  content:"";
  position: absolute;
  top:-11px;
  left:0px;
  height: 1px;
  width: 98%;
  background-color: #20b2aa;
}

.sectService .navInner .right {
    width: calc(100% - 27%);
    margin: 45px auto 0;
    padding-left: 3px;
}
.serviceSubTitle {
  display: none;
}
.sectService .navInner .right .serviceList {
    font-size: 2.3rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-left: -9px;
}
.sectService .navInner .right .serviceList li.inview.fadeInUp {
  opacity: 0.6;
}
.sectService .navInner .right .serviceList li.active span.jpn {
  visibility: hidden;
  opacity: 0;
}
.sectService .navInner .right .serviceList li.active span.bar:before {
  width: 0px;
}
.sectService .navInner .right .serviceList li.inview.fadeInUp.active {
  opacity: 1;
  transition:all ease .6s;
  margin-left: 0px;
}
.sectService .navInner .right .serviceList li + li {
    margin-top: 19px;
}
.sectService .navInner .right .contTxt {
    left: 0%;
    width: 100%;
}
.sectService .navInner .right .contTxt.active {
  width: 100%;
  visibility: visible;
  left: 0;
  opacity: 1;
  transition: all ease 0.4s;
}

.sectService .navInner .right .contMain {
  width: calc(100% - 25%);
  margin: 0 auto;
  opacity: 0;
  transition: all ease 0.4s;
}

.sectService .navInner .right .contMain .number {
  font-size: 1rem;
  letter-spacing: 0px;
  margin-top: 66px;
  margin-left: 3px;
}
.sectService .navInner .right .contMain .number:before {
    background-color: rgba(191, 177, 145, 0.4);
}
.sectService .navInner .right .contMain .title {
  font-size: 4.4rem;
  letter-spacing: 2.1px;
  padding-top: 17px;
  margin-left: 0;
}
.sectService .navInner .right .contMain .title span {
  font-size: 1rem;
  letter-spacing: 0.8px;
  font-family: a-otf-ryumin-pr6n, serif;
  opacity: 0.7;
  margin-top: 1px;
  margin-left: 0px;
}
.sectService .navInner .right .contMain .desc {
  font-size: 1.3rem;
  line-height: 2.6;
  letter-spacing: 0.03em;
  margin-top: 32px;
  margin-left: 27px;
  width: calc(100% - 33px);
  opacity: 0.8;
  padding-top: 2px;
  padding-bottom: 1px;
}
.sectService .navInner .right .contMain .desc:before {
    left: -23px;
}

.servClose {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 22px;
  width: 22px;
  opacity: 0.6;
}

a.servBtn {
  font-size: 1.4rem;
  width: 60px;
  height: 60px;
  line-height: 62px;
  margin-top: 31px;
  margin-left: -5px;
  border: 1px solid rgba(255,255,255,0.3);
}

.sectService .contInner {
  display: none;
}


/* section - Design */

/*
Head
*/

.sectCommon .sectHead {
  width: 74%;
}

/*
Cont
*/

section.sectDesign {
  margin-top: 64px;
  margin-bottom: 60px;
  position: relative;
}
section.sectDesign:after {
  display: block;
  border-top: 1px solid #eee;
  width: 87%;
  margin: 70px auto 0;
}

.sectDesign .slick-track {
  align-items: start;
}
.sectDesign .slick-list {
  padding-left: 0vw;
}
.sectDesign .slick-list:before {
  content:none;
  width: 89%;
}

.designSlider .slick-slide {
  width: 85vw;
}
.designSlider .slick-slide + .slick-slide {
  padding-left: 6.7vw;
}

.sectDesign .sectCont {
  margin-top: 43px;
}
.sectDesign .slick-dots {
  display: none !important;
}



section.sectShonan {
  margin-top: 64px;
  margin-bottom: 60px;
  position: relative;
}
section.sectShonan:after {
  display: block;
  border-top: 1px solid #eee;
  width: 87%;
  margin: 70px auto 0;
}

.sectShonan .slick-track {
  align-items: start;
}
.sectShonan .slick-list {
  padding-left: 0vw;
}
.sectShonan .slick-list:before {
  content:none;
  width: 89%;
}


.sectShonan .sectCont {
  margin-top: 43px;
}
.sectShonan .slick-dots {
  display: none !important;
}

section.sectYokohama {
  margin-top: 64px;
  margin-bottom: 60px;
  position: relative;
}
section.sectYokohama:after {
  display: block;
  border-top: 1px solid #eee;
  width: 87%;
  margin: 70px auto 0;
}

.sectYokohama .slick-track {
  align-items: start;
}
.sectYokohama .slick-list {
  padding-left: 0vw;
}
.sectYokohama .slick-list:before {
  content:none;
  width: 89%;
}


.sectYokohama .sectCont {
  margin-top: 43px;
}
.sectYokohama .slick-dots {
  display: none !important;
}


section.sectOsaka {
  margin-top: 64px;
  margin-bottom: 60px;
  position: relative;
}
section.sectOsaka:after {
  display: block;
  border-top: 1px solid #eee;
  width: 87%;
  margin: 70px auto 0;
}

.sectOsaka .slick-track {
  align-items: start;
}
.sectOsaka .slick-list {
  padding-left: 0vw;
}
.sectOsaka .slick-list:before {
  content:none;
  width: 89%;
}


.sectOsaka .sectCont {
  margin-top: 43px;
}
.sectOsaka .slick-dots {
  display: none !important;
}

.designSlider li {
  flex-flow:column;
}
.designSlider li .right {
  order:1;
  width: 100%;
  height: 65vw;
}
.designSlider li .right .image figure {
  height: 40vw;
}
.designSlider .slick-current li .right .image figure, .designSlider .is-active-next li .right .image figure {
  height: 65vw;
}


.designSlider li .left {
  width: 100%;
  order:2;
  margin-top: 47px;
}
.designSlider li .left .cont {
  margin-top: 20px;
  width: 85%;
}
.designSlider li .left .title {
  font-size: 2.3rem;
  font-size: calc(22px + ((1vw – 3.2px)*0.7625 ));
  line-height: 1.8;
}
.designSlider li .left .title span {
  font-size: 1.3rem;
  letter-spacing: 0.075em;
  margin-top: 4px;
}
.designSlider li .left .desc {
  font-size: 1.1rem;
  line-height: 2.9;
  letter-spacing: 0.05em;
  margin-top: 25px;
}
.designSlider li .left .readMore {
  font-size: 0.9rem;
  margin-top: 37px;
  letter-spacing: 0.06em;
}


/* section - Case */

/*
Common
*/

.caseTitle {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 80vw;
  background-color: rgba(0,0,0,0.1);
}

section.sectCase .caseTitle .title {
  font-size: 3.1rem;
  font-size: calc(34px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.07em;
  margin-left: 13%;
  margin-top: 76px;
  display: none;
}
section.sectCase .caseTitle .title br {
  display: none;
}


/*
caseSlider - common
*/

.caseSlider li {
  flex-direction: column;
}


/*
caseSlider - Left
*/

.caseSlider li .left {
  width: 100%;
  height: 80vw;
}


/*
caseSlider - Right
*/

.caseSlider li .right {
  width: 100%;
}
.caseSlider li .right .cont {
  width: 72%;
  margin-top: 64px;
  margin-bottom: 100px;
}
.caseSlider li .right .slick-counter {
  font-size: 1rem;
  margin-bottom: 28px;
}
.caseSlider li .right .title {
  font-size: 3.2rem;
  font-size: calc(32px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.05em;
}
.caseSlider li .right .subTitle {
  font-size: 1.1rem;
  opacity: 0.6;
  padding-left: 40px;
  margin-top: 26px;
  letter-spacing: 0.05em;
}
.caseSlider li .right .subTitle:before {
  width: 39px;
  height: 1px;
  transform: rotate(-52deg);
  left: -5px;
  top: 0px;
}
.caseSlider li .right .desc {
  font-size: 1.1rem;
  line-height: 2.6;
  letter-spacing: 0.04em;
  margin-top: 34px;
}
.caseSlider li .right .readMore {
  font-size: 1rem;
  margin-top: 32px;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.caseSlider button.slick-arrow {
  bottom: 48px;
}

.caseSlider button.slick-next {
  right: 68px;
}
.caseSlider button.slick-next:before {
  color:#fff;
}
.caseSlider button.slick-next:hover {
  right: 68px;
}
.caseSlider button.slick-prev {
  right: 39px;
}
.caseSlider button.slick-prev:before {
  color:#fff;
}
.caseSlider button.slick-prev:after {
  background-color: #fff;
}
.caseSlider button.slick-prev:hover {
  right: 39px;
}


/* section - Media */

/*
Cont
*/
section.sectMedia {
  padding-top: 70px;
}
section.sectMedia .sectCont {
  width: 93%;
  flex-flow: column;
  margin: 54px auto 110px;
}
section.sectMedia .sectCont .left {
  width: 100%;
}
section.sectMedia .sectCont .left .image figure {
  height: 76vw;
}

section.sectMedia .sectCont .right {
  width: 100%;
}
section.sectMedia .sectCont .right .cont {
  width: 80%;
  margin: 42px auto 0;
}
section.sectMedia .sectCont .right .title {
  font-size: 2.3rem;
  font-size: calc(22px + ((1vw – 3.2px)*0.7625 ));
  line-height: 1.75;
  letter-spacing: 0.05em;
}
section.sectMedia .sectCont .right .title span {
  font-size: 1.2rem;
  letter-spacing: 0.075em;
  margin-top: 9px;
  margin-left: 2px;
}
section.sectMedia .sectCont .right .desc {
  font-size: 1.1rem;
  line-height: 3.1;
  letter-spacing: 0.04em;
  margin-top: 22px;
}
section.sectMedia .sectCont .right .readMore {
  font-size: 1rem;
  margin-top: 33px;
  letter-spacing: 0.06em;
}


section.sectParty .sectCont {
  width: 93%;
  flex-flow: column;
  margin: 54px auto 110px;
}
section.sectParty .sectCont .left {
  width: 100%;
}
section.sectParty .sectCont .left .image figure {
  height: 76vw;
}

section.sectParty .sectCont .right {
  width: 100%;
}
section.sectParty .sectCont .right .cont {
  width: 80%;
  margin: 42px auto 0;
}
section.sectParty .sectCont .right .title {
  font-size: 2.3rem;
  font-size: calc(22px + ((1vw – 3.2px)*0.7625 ));
  line-height: 1.75;
  letter-spacing: 0.05em;
}
section.sectParty .sectCont .right .title span {
  font-size: 1.2rem;
  letter-spacing: 0.075em;
  margin-top: 9px;
  margin-left: 2px;
}
section.sectParty .sectCont .right .desc {
  font-size: 1.1rem;
  line-height: 3.1;
  letter-spacing: 0.04em;
  margin-top: 22px;
}
section.sectParty .sectCont .right .readMore {
  font-size: 1rem;
  margin-top: 33px;
  letter-spacing: 0.06em;
}



/* section - About us */

.sectAbout {
  margin-left: 26.5px;
  padding-top: 60px;
  margin-bottom: 88px;
}
.sectAbout .left {
  width: 5%;
}

.sectAbout .right {
  width: 95%;
}
.aboutSlider {
  margin-top: 110px;
  margin-left: 10px;
}
.aboutSlider .slick-slide {
  width: 74vw;
}
.aboutSlider.slideIn:before {
  width: 111%;
}
.aboutSlider .slick-slide:hover {
  margin-top: 0;
}
.aboutSlider:before {
  width: 0%;
  height: 100%;
  top: 13.7vw;
  right: 0vw;
}
.aboutSlider .slick-slide + .slick-slide {
  margin-left: 21px;
}
.aboutSlider .slick-slide .cont .inner {
  width: 72%;
  margin: 33px auto 51px;
  margin-top: calc(27px + ((1vw – 3.2px)*1.8 ));
  margin-bottom: calc(37px + ((1vw – 3.2px)*1.8 ));
}
.aboutSlider .slick-slide .image .img {
  height: 52vw;
}
.aboutSlider .slick-slide .title {
  font-size: 2rem;
  font-size: calc(17px + ((1vw – 3.2px)*0.7625 ));
  margin-top: 5px;
  letter-spacing: 0.08em;
}
.aboutSlider .slick-slide .subTitle {
  font-size: 1rem;
  color: #b9b9b9;
  letter-spacing: 0.07em;
  display: block;
  margin-top: 6px;
  margin-left: 1px;
}
.aboutSlider .slick-slide .desc {
  display: none;
}


button.slick-arrow {
  font-size: 0;
  height: 20px;
  display: block !important;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  box-shadow: none;
  height: initial;
  width:initial;
  border:none;
  color: #989898;
  top: -92px;
}
button.slick-arrow:before {
}

.designSlider button.slick-arrow {
  display: block !important;
  top: -85px;
}
.mediaSlider button.slick-arrow {
  display: none !important;
}

button.slick-prev {
  right: 39px;
}
button.slick-prev:hover {
  right: 39px;
}
button.slick-next {
  right: 68px;
}
button.slick-next:hover {
  right: 68px;
}


.designSlider button.slick-prev {
  right: 39px;
}
.designSlider button.slick-prev:hover {
  right: 39px;
}
.designSlider button.slick-next {
  right: 68px;
}
.designSlider button.slick-next:hover {
  right: 68px;
}

button.slick-prev:after {
  content:"";
  position: absolute;
  left: -15px;
  display: inline-block;
  top:49%;
  transform: translateY(-50%) rotate(17deg);
  height: 10px;
  width: 1px;
  background-color: #c4c4c4;
}


button.slick-prev:before {
  content: "→";
  font-size: 1.5rem;
  color: #add8e6;
  width: initial;
  height: initial;
  background-image: initial;
}
button.slick-next:before {
  content: "←";
  color: #add8e6;
  font-size: 1.5rem;
  left: 50%;
  width: initial;
  height: initial;
  background-image: initial;
}


/* designSelect */

.designSelect {
  margin-top: 70px;
  padding-bottom: 70px;
}

.designSelect .sectIntro {
  padding-top: 56px;
  width: 77%;
}
.designSelect .sectIntro .title {
  font-size: 2.4rem;
  font-size: calc(23px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.06em;
}
.designSelect .sectIntro .title span {
  font-size: 1rem;
  margin-top: 8px;
  letter-spacing: 0.7px;
}
.designList {
  margin-top: 51px;
  margin-left: 10.9%;
}


/* section - Contact us */

.sectContact .left {
    width: 2%;
}
.sectContact {
  padding-top: 35px;
  margin-bottom: 83px;
  margin-left: 4%;
  border:none;
  padding-left: 13%;
}
.sectContact h2.title span {
  margin-top: 0;
  color: transparent;
}
.contactTitle {
  font-size: 3.8rem;
  font-size: calc(36px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.04em;
  margin-top: -5px;
}
a.contactBtn {
  font-size: 1.4rem;
  width: 52px;
  height: 52px;
  line-height: 54px;
  margin-top: 13px;
  margin-left: -2px;
}


/*
---------------------------------------------------
  5. UnderCommon
---------------------------------------------------
*/

/* common */

.underCont {
  margin-top: 146px;
}
.magazineCont,.musicCont {
  margin-top: 146px;
}
.archiveCont {
  margin-top: 112px;
}
.aboutCont {
  margin-bottom: 0px;
}
.companyCont {
  margin-bottom: 85px;
}
.joinusCont {
  margin-bottom: 85px;
}

.underTitle {
  font-size: 2.4rem;
  font-size: calc(21px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.03em;
  line-height: 1.85;
  position: relative;
  top: initial;
  margin-bottom: 46px;
}
.underTitle span {
  font-size: 1.1rem;
  letter-spacing: 0.6px;
  margin-top: 12px;
  line-height: 2.1;
  margin-left: 1px;
}


/* underIntro */

.underCommonNav {
  display: none;
}
.underHead {
  position: relative;
  width: calc(100% - 22%);
}
.aboutCont .underHead {

}
.underHead .title {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
}
.underHead .title .eng {
  order:2;
  font-family: 'Helvetica Neue LT W01_41488878';
  color: #aaaaaa;
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-top: 8px;
  margin-left: 3px;
  text-transform: capitalize;
}
.underHead .title .jpn {
  order:1;
  font-size: 2.2rem;
  font-size: calc(22px + ((1vw – 3.2px)*0.7625 ));
  font-family: a-otf-ryumin-pr6n, serif;
  letter-spacing: 1.1px;
  color:inherit;
  margin-top: 0;
}

.magazineCont .underHead .title .eng,
.musicCont .underHead .title .eng {
    order: 1;
    font-family: garamond-premier-pro-display, serif;
    color: inherit;
    font-weight: 300;
    font-size: 2.7rem;
    letter-spacing: 1px;
    margin-top: 0px;
    margin-left: 0px;
    text-transform: capitalize;
}
.magazineCont .underHead .title .jpn,
.musicCont .underHead .title .jpn {
    order: 2;
    font-size: 1rem;
    letter-spacing: 0px;
    color: #9c9c9c;
    margin-top: 2px;
}


.underMainImg {
  height: calc(100vh - 300px);
  min-height: 275px;
  width: calc(100% - 20px);
  background-attachment: initial;
  background-position: center center;
  margin:48px auto 0;
}
.underMainImg.sp {
  display: block;
}
.underMainImg:before {
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  width: 0%;
  height: 100%;
  background-color: #fff;
}
.underMainImg.slideLeft:before {
  width: 0%;
  transition: all 1s cubic-bezier(.86,0,.07,1);
  transition-delay:1.9s;
}


/* underAbout */

.underAbout {
  width: 77%;
  margin-top: 53px;
  flex-direction: column;
  flex-wrap: wrap;
  top: initial;
  position: relative;
  z-index: 0;
}
.underAbout.sp {
  display: block;
  margin-bottom: 61px;
}
.underAbout .left {
  width: 100%;
}
.underAbout .right {
  width: 100%;
  margin-top: 0px;
}
.underAbout .right .desc {
  font-size: 1.3rem;
  line-height: 2.55;
  letter-spacing: 0.075em;
  margin-top: 0;
}
.underAbout .right .sign {
  margin-top: 30px;
  margin-left: -3px;
  margin-bottom: 0px;
}
.underAbout .right .sign img {
  width: 231px;
}

.underAbout .right .title {
  font-size: 2.5rem;
  width: 100%;
  line-height: 1.85;
  margin-bottom: 33px;
}
.underAbout .right .title span {
  font-family: garamond-premier-pro-display, serif;
  letter-spacing: 0.03em;
  margin-top: 7px;
}
.underAbout .right .title br {
    display: block;
}


/* underSelect */

.underSelect {
  width: 100%;
  margin: 95px auto 0px;
  padding-top: 25px;
  padding-bottom: 30px;
  background-color: #add8e6;
}
.underSelect > .inner {
  width: calc(100% - 62px);
  margin-left: auto;
  margin-right: auto;
}

.aboutSelect .selectList {
  padding-top: 0px;
}
.aboutSelect {
  padding: 0px 7%;
  width: calc(100% - 14%);
  padding-top: 33px;
  padding-bottom: 23px;
  background: #fff;
}
.designFieldCont .aboutSelect {
  padding-bottom: 23px;
  margin-top: 65px;
  padding-top: 35px;
}

.selectList {
  padding-top: 23px;
}
.selectList .listCont {
  width: 100%;
  padding-bottom: 63px;
  border-right: 1px solid #dddddd;
  padding-top: 0;
  margin-right: initial;
  margin-bottom: 27px;
}
.aboutSelect .selectList .listCont .image .img {
  transform:scale(1);
}
.selectList .listCont {
  border-right: 1px solid #eeeeee;
}

.selectList .listCont:nth-child(n + 4) {
  padding-top: 0px;
}
.selectList .listCont + .listCont {
  margin-left: initial;

}

.selectList .listCont:nth-child(2n + 3){
    padding-left: 0;
    margin-right: initial;
}

.selectList .listCont:nth-child(2n + 2){
  padding-right: 0;
  border:none;
  padding-bottom: 60px;
}
.selectList .listCont:nth-child(2n + 3){
  padding-left: 0;
}

.selectList .listCont:hover .image .img {
  transform:scale(1);
  transition:all ease .5s;
}
.selectList .listCont .image {
  height: 65vw;
}

.selectList .cont .inner {
  margin: 47px auto 0;
}

.selectList .title {
  font-size: 2.1rem;
  font-size: calc(20px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.4px;
  line-height: 21px;
}

.selectList .subTitle {
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  margin-top: 12px;
  margin-left: 1px;
}
.selectList .desc {
  font-size: 1rem;
  color: #626262;
  line-height: 26px;
  letter-spacing: 0.07em;
  margin: 22px auto 0;
}

.selectList .desc br {

}

.selectList .readMore {
  font-size: 1rem;
  letter-spacing: 0.7px;
  margin-top: 22px;
  margin-left:1px;
}
.readMore:before {
  bottom: -7px;
  left: -2%;
  width: 102%;
}
.readMore:after {
  bottom: -7px;
  left: -2%;
  width: 102%;
}


/*
circleList
*/

.circleList {
  flex-direction: column;
  align-items: center;
}
.circleList .listCont .image .img {
  transform:scale(1);
}
.circleList .listCont {
  width: 90% !important;
  border-right: 0px;
  padding-right: 0;
  padding-top: 33px;
  padding-bottom: 105px;
}
.circleList .listCont +  .listCont {
   border-top: 1px solid #eeeeee !important;
   padding-top: 58px;
   border-right: 0 !important;
}
.circleList  .listCont + .listCont {
  padding-left: 0;
}
.circleList .listCont .image {
  height: 60vw !important;
  width: 60vw;
}
.circleList .cont .inner {
  margin-top: 48px !important;
}
.circleList .title {
  font-size: 2.2rem !important;
  font-size: calc(21px + ((1vw – 3.2px)*0.7625 )) !important;
  letter-spacing: 0.03em !important;
}
.circleList .subTitle {
  font-size: 1.1rem !important;
  margin-top: 15px !important;
  letter-spacing: 0.09em;
}
.circleList .desc {
  width: 150px;
  margin: 30px auto 0;
}
.circleList .readMore {
  margin-left: 0px;
  color: #8b8b8b;
  display: inline-block;
  margin-top: 37px;
}


/*
designList
*/


.designFieldList .listCont {
  padding-bottom: 64px !important;
}
.designFieldList .cont .inner {
  margin-top: 45px;
}
.designFieldList .number {
  font-size: 1.7rem;
}
.designFieldList .title {
  font-size: 3.25rem;
  font-size: calc(31px + ((1vw – 3.2px)*0.7625 ));
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-top: 12px;
}
.selectList .desc {
  margin: 24px auto 0;
}
.designFieldList .readMore {
  margin-top: 34px;
}




/* underMedia */

.underDesc {
  width: calc(100% - 20px);
  margin:50px auto 0;
}
.designFieldCont .underDesc {
  margin-bottom: 0px;
}

.underDesc > .inner {
  flex-wrap: wrap;
  flex-flow: column
}
.underDesc .left {
  width: 100%;
  margin-right: 0%;
  top: initial;
  position: relative;
}
.underDesc .left .image {
  height: calc(100vh - 300px);
  min-height: 275px;
  transform:scale(1);
}


.underDesc .right {
  width: calc(100% - 22%);
  top: initial;
  position: relative;
  margin: 19px auto 0;
  padding-top: 52px;
}
.underDesc .right .title {
  font-size: 2.4rem;
  font-size: calc(21px + ((1vw – 3.2px)*0.7625 ));
  width: 100%;
  line-height: 1.75;
  margin-bottom: 33px;
}
.underDesc .right .title br {
  display: block;
}
.underDesc .right .title span {
  font-family: garamond-premier-pro-display, serif;
  letter-spacing: 0.03em;
  margin-top: 9px;
}

.underDesc .right .desc {
  font-size: 1.3rem;
  line-height: 2.6;
  letter-spacing: 0.02em;
  margin-top: 0;
  width: 100%;
  margin-left: 0;
  margin-bottom: 0;
  padding-bottom: initial;
}
.underDesc .right .desc:before {
  display: none;
}
.detailBtn {
  font-size: 1.2rem;
  letter-spacing: 0.2px;
  line-height: 65px;
  margin-top: 21px;
  width:100%;
}
.detailBtn.eng {
  font-size: 1.4rem;
  letter-spacing: 0.8px;
}
.detailBtn a {
}
.detailBtn span {
  margin-left: -9px;
  padding-left: 19px;
}
.detailBtn span:before {
  width: 5px;
  height: 5px;
  top: 53%;
}


/* underMedia */

.underMedia {
  margin-top: 60px;
  padding-top: initial;
  padding-bottom: 80px;
}
.underMedia .sectTitle {
  font-size: 3.3rem;
  font-size: calc(32px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.04em;
}
.underMedia .sectTitle span {
  margin-top: 4px;
}
.mediaSlider li {
  height: 90vw;
}

.underMedia .cont {
  width: 95%;
  margin: 45px auto 0;
}
.underMedia .cont .right {
  width: 81%;
  margin: 32px auto 0;
}
.underMedia .cont .right > .inner {
    width: 100%;
    margin-left: 0%;
}
.underMedia .cont .right .title {
  font-size: 2.4rem;
  font-size: calc(23px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.01em;
  line-height: 1.65;
}
.underMedia .cont .right .title span {
  font-size: 1rem;
  margin-top: 9px;
  margin-left: 2px;
}
.underMedia .cont .right .desc {
  margin-top: 32px;
  font-size: 1.2rem;
  line-height: 2.65;
  width: 100%;
  letter-spacing: 0.035em;
  margin-left: 0;
}

.visitMore {
  width: 104.5%;
  height: 60px;
  line-height: 56px;
  margin-top: 26px;
  margin-left: -3%;
}
.visitMore a {
  font-size: 1.2rem;
}
.visitMore a span {
  margin-left: -5px;
}


/* underProduct */

.designList button.slick-arrow {
  top: -86px;
}
.designList button.slick-next {
  right: 78px;
}


/* underCompany */

.underCompany {
  margin-top: 9px;
  font-size: 1.2rem;
  width: 100%;
  padding-bottom: 45px;
}
.underCompany dl + dl {
  margin-top: 23px;
}
.underCompany dl dt {
  font-size: 1rem;
  letter-spacing: 0.3px;
}
.underCompany dl dd {
  margin-top: 6px;
  letter-spacing: 0.1px;
  font-size: 1.3rem;
  line-height: 22px;
}
.businessList {
  font-size: 1.2rem;
  margin-top: 5px;
}
.businessList li + li {
  margin-top: 7px;
}


/*
---------------------------------------------------
  6. Journal
---------------------------------------------------
*/

/* contents */

.newsCont {
  margin-top: 144px;
}
.newsCont .underHead {
  width: calc(100% - 20px);
  padding-bottom: 18px;
  border-bottom: 0px solid #eeeeee;
}

.underNewsNav {
  margin-left: -16px;
}
.underNewsNav ul li {
  font-size: 1.2rem;
  line-height: 18px;
  letter-spacing: 0.9px;
}
.newsCont .underNewsNav ul li {
  font-size: 1.4rem;
}
.underNewsNav ul li + li:nth-child(2) {
  margin-left: 13px;
}
.underNewsNav ul li + li:nth-child(4) {
  margin-left: 16px;
}
.underNewsNav .arrowInner::after {
  top: 5px;
  right: -14px;
}
.underNewsNav ul li:after {
  bottom: -13px;
  height: 0px;
}
.underNav ul li.current.addCurrent:after {
  width: 22px;
  left: calc((100% - 22px)/2);
}

.underNav ul li:before {
  top: 6px;
  left: -9px;
  height: 11px;
}
.underNav ul li + li:nth-child(2):before {
  left: -9px;
}
.underNewsNav .arrowInner::after {
  top: 8px;
  right: -6px;
  width: 4px;
  height: 4px;
}

.underNewsNav select {
  font-size: 1.4rem;
  letter-spacing: 0.9px;
}


.newsCont > .inner {
  width: calc(100% - 20px);
  margin-top: 27px;
}


/* detail */

.singleNews {
  width: calc(100% - 19px);
  margin: 149px auto 0px;
}
.singleHead {
  text-align: left;
  margin-left: 9.2%;
  width: calc(100% - 13px);
}
.singleHead .postTitle {
  font-size: 2.2rem;
  font-size: calc(21px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.01em;
  line-height: 1.65;
  width: 96%;
  margin:7px 0 3px;
  text-align: left;
}
.singleHead .postDate {
  font-size: 1rem;
  margin-top: 0px;
  letter-spacing: 0.06em;
  margin-left: 0px;
}
.singleCont {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top:57px;
  margin-bottom: 57px;
}

.singleCont .left {
  width: 100%;
  position: relative;
  bottom: initial;
}
.singleCont .left img {
  transform:scale(1);
}
.singleCont .right {
  width: 100%;
  position: relative;
  align-self: initial;
  bottom: initial;
  margin-left: initial;
  margin-top: 26px;
}
.singleCont .right .article {
  font-size: 1.3rem;
  line-height: 2.4;
  letter-spacing: 0.03em;
  margin-top: 9px;
  bottom: initial;
  align-self: initial;
  position: relative;
  width: calc(100% - 18.6%);
  margin: 14px auto 0;
}
.singleCont .right .article:before {
  display: none;
}
.singleCont .right .article img.sign {
  width: 250px;
}
.singleCont .cat {
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  margin-top: 48px;
  margin-bottom: 0;
  margin-left: 9.6%;
}

/* postNav */

.postNav {
  top: initial;
  position: relative;
  width: calc(100% - 20.8%);
  margin: 80px auto 7px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  right: initial;
}
.postNav.slideIn {
  right: initial;
}
.postNav.slideIn.active {
  right: initial;
}
.postBtn {
  font-size: 2.2rem;
  height: 48px;
  width: 48px;
  line-height: 42px;
}
.postBtn.next {
  order:1;
}
.postBtn.shareBtn:nth-child(1) {
  order:2;
}
.postBtn.shareBtn:nth-child(2) {
  order:3;
}
.postBtn.next {
  order:4;
  margin-left: 2px;
  display: none;
}
.postBtn.prev {
  display: none;
}
.postBtn.shareBtn {
  display: none;
}
.postBtn.share {
  position: relative;
  visibility: visible;
  opacity: 1;
  bottom: initial;
  line-height: 48px;
}
.postBtn.facebook {
  font-size: 1.7rem;
}
.postBtn.twitter {
  font-size: 1.7rem;
}

.postBtn + .postBtn {
  margin-top: 0px;
  margin-left: 2px;
}

.postBtn.next:before {
  top: 42%;
  left: 38%;
  width: 6px;
  height: 6px;
}
.postBtn.prev:before {
  top: 42%;
  left: 44%;
  width: 6px;
  height: 6px;
}
.postBtn.next a:before {
  top: 42%;
  left: 38%;
  width: 6px;
  height: 6px;
}
.postBtn.prev a:before {
  top: 42%;
  left: 44%;
  width: 6px;
  height: 6px;
}


/* prevNext */

section.prevNext {
  width: calc(100% - 17.9%);
  margin: 42px auto 68px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding-top: 38px;
  padding-bottom: 35px;
}
.prevNext .inner {
  align-items: center;
  border-top: initial;
  border-bottom: initial;
  padding-top: initial;
  padding-bottom: initial;
}
.prevNext .navPost {
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  width: calc(50% - 5px);
}
.prevNext .navPost.prevPost {
  padding-right: 5px;
}
.prevNext .navPost.nextPost {
  padding-left: 5px;
}
.prevNext .nextPost a {
  padding-right: 23px;
}
.prevNext .navPost.nextPost a:before {
  left: -21px;
  width: 6px;
  height: 6px;
}
.prevNext .prevPost a {
  padding-left: 23px;
}
.prevNext .navPost.prevPost a:before {
  right: -21px;
  width: 6px;
  height: 6px;
}
.prevNext .navPost a:after {
  content:initial;
}
.prevNext .toIndex {
    width: 28px;
    height: 19px;
}



/*
---------------------------------------------------
  7. Design
---------------------------------------------------
*/

/* DesignList */

/*
common
*/

.fixedClose {
  height: 21px;
  width: 21px;
  position: fixed;
  top: 17px;
  right: 17px;
  cursor: pointer;
}


/*
Mv
*/

.fieldMv > .inner {
  width: calc(100% - 20px);
}

.fieldMv .cont {
  height: 80vw;
}
.fieldMv .cont .title {
  font-size: 4rem;
  font-size: calc(36px + ((1vw – 3.2px)*0.7625 ));
  line-height: 1.25;
  letter-spacing: 0.09em;
  margin-top: -1px;
}
.fieldMv .cont .title span {
    font-size: 1.05rem;
}


/*
FieldCont
*/

.fieldMv + .fieldCont {
  margin-top: 51px;
}
.fieldDesc {
  width: 76%;
}

.fieldDesc .lead {
  font-size: 2.4rem;
  font-size: calc(24px + ((1vw – 3.2px)*0.7625 ));
  line-height: 1.7;
}
.fieldDesc .lead span {
  font-size: 1.15rem;
  margin-top: 10px;
}
.fieldDesc .desc {
  font-size: 1.3rem;
  line-height: 2.5;
  margin-top: 36px;
  letter-spacing: 0.04em;
  margin-bottom: 0px;
}


/*
workField
*/

.workField {
  margin-top: 60px;
  padding-bottom: 150px;
  height: initial;
}

.sectTitle {
  font-size: 3.3rem;
  font-size: calc(32px + ((1vw – 3.2px)*0.7625 ));
  width: 76%;
  padding-top: 57px;
}
.sectTitle span {
    font-size: 1rem;
    letter-spacing: 0.03em;
    margin-top: 5px;
    margin-left: 1px;
}

.fieldSlider {
  margin: 39px 0 0;
  width: 90%;
  margin-left: 11.3%;
}
.fieldSlider .slick-slide + .slick-slide {
  margin-left: 46px;
}
.fieldSlider li {
  border-right: none;
}
.fieldSlider li .cont {
  width: 100%;
  margin: 0px 0 58px;
  margin-bottom: 12px;
}
.fieldSlider li .cont .num {
  font-size: 1.5rem;
}
.fieldSlider li .cont .title {
  font-size: 2.1rem;
  margin-top: 6px;
}
.fieldSlider li .cont .title span {
  font-size: 1.1rem;
  margin-top: 9px;
}
.fieldSlider li .cont .desc {
  margin-top: 29px;
  line-height: 2.6;
  letter-spacing: 0.05em;
  text-align: justify;
}

.fieldSlider button.slick-arrow {
  display: block !important;
  top: initial;
  bottom: -70px;
  height: 54px;
  width: 54px;
  box-shadow: initial;
  border: 1px solid #eaeaea;
}

.fieldSlider button.slick-next {
  right: initial;
  left: -10px;
}
.fieldSlider button.slick-next:hover {
  right: initial;
  left: -13px;
}

.fieldSlider button.slick-prev {
  right: initial;
  left: 48px;
}
.fieldSlider button.slick-prev:hover {
  right: initial;
  left: 53px;
}


/*
caseStudy
*/

.caseList {
  width: 94%;
  margin: 46px auto 42px;
}

.caseList li {
  margin-bottom: 0px;
  padding-bottom: 87px;
}
.caseList li:last-child {
  border-bottom: 0;
  padding-bottom: 20px;
}

.caseList li .right {
  width: 100%;
  margin-top: 36px;
}
.caseList li .right .cont {
  width: 81%;
}
.caseList li .right .title span.main {
  font-size: 3rem;
  font-size: calc(28px + ((1vw – 3.2px)*0.7625 ));
}
.caseList li .right .title span.sub {
  font-size: 1.2rem;
  margin-top: 18px;
  padding-left: 28px;
}
.caseList li .right .title span.sub:before {
  width: 29px;
  top: 4px;
  left: -9px;
  transform: rotate(-55deg);
}

.showBtn {
  font-size: 1.3rem;
  width: 90%;
  height: 62px;
  line-height: 64px;
}
.showBtn span {
  position: relative;
  padding-left: 20px;
  margin-left: -11px;
}
.showBtn span:before {
  width: 5px;
  height: 5px;
  top: 60%;
}


/*
fieldNext
*/

.fieldNext {
  width: calc(100% - 20px);
  height: 137vw;
  margin: 85px auto 0;
}
.fieldNext > .inner {
  width: 74%;
}

.fieldNext .num {
  font-size: 1.9rem;
  letter-spacing: 0.05em;
  margin-left: 3px;
}
.fieldNext .title {
  font-size: 3.8rem;
  font-size: calc(38px + ((1vw – 3.2px)*0.7625 ));
  line-height: 1.15;
  margin-top: 19px;
}
.fieldNext .title span {
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  margin-top: 14px;
}
.fieldNext .readMore {
  font-size: 1.1rem;
  margin-top: 52px;
}


/*
sectClose
*/

.sectClose {
  padding: 34px 0 31px;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
}
.sectClose span {
  padding-left: 20px;
}
.sectClose span:before {
  width: 5px;
  height: 5px;
  top: 60%;width: 5px;
  height: 5px;
  top: 60%;
}


/* workList */

.archiveCont {
  margin-top: 152px;
  margin-bottom: 65px;
}
.workList {
  width: calc(100% - 6.5%);
}
.workList li > .inner {
  width: 100%;
  flex-wrap: wrap;
  flex-direction:column;
}

.workList li + li {
  margin-top: 19px;
  padding-top: 67px;
  border-top: 1px solid #b0e0e6;
}

.workList li .postImg {
  width: 100%;
  height: 77vw;
  margin-left: 0%;
  margin-top: 0px;
  order:2;
}

.workList li .postCont {
  width: calc(100% - 21%);
  margin: 0px auto 70px;
  order:1;
}
.workList li .postCont .title {
  font-size: 2.9rem;
  letter-spacing: 1.2px;
}
.workList li .postCont .subTitle {
  font-size: 1rem;
  letter-spacing: 0.06em;
  margin-top: 9px;
}
.workList li .postCont .detailBtn {
  display: block;
  width: 104%;
  margin-left: -3%;
  margin-top: 30px;
  margin-bottom: 0;
}
.workList li .postCont .desc {
  font-size: 1.2rem;
  line-height: 2.4;
  letter-spacing: 0.05em;
  width: 100%;
  margin-top: 15px;
}
.workList li .detailBtn.tablet {
   display: none;
}

.workList li .postCont .date {
  font-size: 1.2rem;
  letter-spacing: 0.8px;
  margin-top: 21px;
  opacity: 0.35;
}
.workList li .postCont .date:before {
  content: "";
  position: absolute;
  width: 28px;
  height: 1px;
  transform: rotate(-55deg);
  left: -1px;
  top: 5px;
}



/* Design Guide */

/*
priceList
*/

.priceList {
    margin-bottom: 90px;
}
.priceCont {
    width: 77.9%;
    margin: 54px auto 0;
}
.priceCont dl {
  flex-flow:column;
}
.priceCont dl + dl {
  margin-top: 67px;
}
.priceCont dt {
  font-size: 1.45rem;
  width: 100%;
}

.priceCont dd {
  margin-top: 41px;
  width: 100%;
}

.priceCont dd li {
  flex-flow:column;
  align-items: initial;
  padding-top: 6px;
  padding-bottom: 34px;
  border-bottom: 1px dotted #ccc;
}
.priceCont dd li:before {
  content:initial;
}
.priceCont dd li .price {
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  padding-left: initial;
  margin-left: initial;
}
.priceCont dd li .price span {
  font-size: 1.8rem;
  margin-left: 6px;
}


/* works - single */

/*
common
*/

.singleWorks {
    margin-bottom: 44px;
}


/*
MV
*/

.worksMv .bg.active {
  background-attachment: initial;
}
.worksMv .bg:before {
  background-color: rgba(0,0,0,0.3);
}
.worksMv .mvCont {
  position: absolute;
  top: 54%;
  width: 95%;
}
.mvCont .title {
  font-size: 3.5rem;
  font-size: calc(34px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.04em;
  height: 33px;
  height: calc(33px + ((1vw – 3.2px)*0.7625 ));
}
.mvCont .cat {
  font-size: 1.1rem;
  margin-top: 20px;
  letter-spacing: -0.1px;
  height: 16px;
}


/*
workIntro
*/

.workIntro .inner {
  width: calc(100% - 22%);
  padding-top: 64px;
  padding-bottom: 95px;
  flex-wrap: wrap;
  flex-direction: column;
}
.workIntro .left {
  width: 100%;
  margin-top: 0px;
}
.workIntro .left .title {
  font-size: 3.1rem;
  letter-spacing: 0.04em;
  width: 100%;
}
.workIntro .left .date {
  font-size: 1.2rem;
  margin-top: 23px;
  letter-spacing: 0.7px;
  padding-left: 34px;
}
.workIntro .left .date:before {
  width: 32px;
  height: 1px;
  transform: rotate(-55deg);
  left: -4px;
  top: 3px;
  bottom: 14px;
}
.workIntro .left .cat {
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  line-height: 26px;
  margin-top: 12px;
  opacity: 0.7;
}

.workIntro .left .urlBtn {
  height: 42px;
  line-height: 39px;
  width: 156px;
  margin-top: 33px;
}

.workIntro .right {
  width: 100%;
  margin-top: 48px;
  padding-top: 0px;
}
.workIntro .right .desc {
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  line-height: 2.2;
  text-align: justify;
  opacity: 0.9;
  position: relative;
  padding-left: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
.workIntro .right .desc:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0px;
  top: 4px;
  left: 0;
  background-color: rgba(255,255,255,0.4);
}
.workIntro .right a.url {
  font-size: 1.4rem;
  font-family: adobe-garamond-pro, serif;
  letter-spacing: 0.7px;
  margin-top: 37px;
  opacity: 0.8;
  padding: 20px 0;
  border: 1px solid rgba(255,255,255,0.5);
  width: 100%;
  border-radius: 41px;
  text-align: center;
}
.workIntro .right a.url:before {
  margin-right: 4px;
  margin-left: -17px;
}


/*
workCont
*/

.workCont .subTitle {
  margin-top: 46px;
  margin-bottom: 33px;
  margin-left: 7px;
}
.workCont .subTitle span.number {
  font-size: 0.9rem;
  margin-bottom: 6px;
  margin-left: 1px;
  letter-spacing: 0.6px;
}
.workCont .subTitle span.txt {
  font-size: 1.4rem;
  letter-spacing: 0.06em;
}
.workCont {
  width: calc(100% - 11%);
  margin:0 auto;
  font-size: 0;
}
.workCont .image {
  width: 100%;
}
.workCont .image + .image {
  margin-top: 9px;
}

.workCont .credit {
  width: 100%;
  text-align: left;
  white-space: initial;
  margin-left: 5px;
  padding-top: 45px;
}
.workCont .credit + .credit {
  margin-top: 49px;
}
.workCont .credit > .inner {
  width: 96% !important;
  text-align: left;
  margin: 0 auto;
}
.workCont .credit span:nth-child(1) {
  font-size: 1.1rem;
  font-family:'Helvetica Neue LT W01_55 Roman';
  opacity: 0.3;
  letter-spacing: 0.4px;
  width: 100%;
  display: block;
  margin-bottom: 11px;
}
.workCont .credit span:nth-child(2) {
  font-size: 1.3rem;
  letter-spacing: 0.7px;
}
.workCont .credit span:nth-child(3) {
  font-size: 1.1rem;
  letter-spacing: 0.2px;
}
.workCont .credit span:nth-child(2) + span:before {
  font-size: 1.2rem;
  margin-left: 3px;
  margin-right: 3px;
}

/*
backBtn
*/

.backBtn {
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  width: calc(100% - 44px);
  margin-top: 47px;
}
.backBtn a {
  padding:26px 0;
}
.backBtn span {
  padding-left: 19px;
}
.backBtn span:before {
  width: 5px;
  height: 5px;
}

/*
workNext
*/

.workNext {
  height:113vw;
}
.workNext > .inner {
  position: relative;
}
.workNext .left {
  width: 0%;
}
.workNext .left .image {
  position: absolute;
}
.workNext .left .image:after {
  content:none;
}
.workNext .left .image:before {
  background-color: rgba(0,0,0,0.4);
}

.workNext .right {
  width: 100%;
}
.workNext .right .nextCont {
  top: 21%;
  left: 50%;
  width: 74%;
  transform:translateX(-50%);
}
.workNext .nextNav {
  font-size: 1.4rem;
  letter-spacing: 1.3px;
}
.workNext .nextTitle {
  font-size: 3.7rem;
  font-size: calc(36px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.04em;
  margin-top: 25px;
}
.workNext .nextCat {
  font-size: 1.1rem;
  letter-spacing: 0.3px;
  margin-top: 8px;
  opacity: 0.7;
}
.workNext .nextBtn {
  font-size: 1.8rem;
  color: #fff;
  width: 63px;
  height: 63px;
  line-height: 66px;
  margin-top: 31px;
  opacity: 0.7;
}

.workNext +  .postNav {
  display: none;
}
.postNav + .sectContact {
  margin-top: 50px;
}


/*
---------------------------------------------------
  8. Philosophy
---------------------------------------------------
*/

/* contents */


/*
close
*/

.philoClose {
  right: 22px;
  top: 18px;
  height: 28px;
  width: 28px;
}
.active .philoClose,.active2 .philoClose {
  opacity: 1;
  transition-delay: 5.15s;
}
.philoClose .inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.philoClose span {
  width: 28px;
  background-color: #fff;
  top: 48%;
  left: 25%;
}

/*
MainImg
*/

.philoCont .mainImg {
  height: calc(100vh - 0px);
  width: calc(100% - 0px);
  min-height: initial;
  margin: 0px auto;
  -webkit-transition: 1.6s cubic-bezier(.6,0,.25,1);
  transition: 1.6s cubic-bezier(.6,0,.25,1);
  transition-delay: 1.2s;
  position: relative;
}
.philoInner.active .philoCont .mainImg {
  height: 79vw !important;
  min-height: initial;
  transition-delay: 3.2s;
}

.philoCont .mainImg .img:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.2);
  transition:all ease .5s;
}

.active .philoCont .mainImg .img:before,
.active2 .philoCont .mainImg .img:before {
  background: rgba(0,0,0,0);
  transition-delay: 3.2s;
}



/*
Title
*/

.philoCont .title {
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  transition:all ease .5s;
}
.active .philoCont .title,
.active2 .philoCont .title {
  opacity: 0;
  transition-delay: 3.2s;
  margin-top: -41px;
}
.philoCont .title .eng {
  text-transform: capitalize;
  font-size: 4.7rem;
  font-weight: 300;
  font-size: calc(47px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.01em;
  height: 42px;
  height: calc(42px + ((1vw – 3.2px)*0.7625 ));
}
.philoCont .title .eng span {
  display: inline-block;
  margin-top: 42px;
}
.philoCont .title .jpn {
  font-size: 1.3rem;
  letter-spacing: 0.5px;
  margin-top: 20px;
}
.philoCont .title .jpn:before {
  top: -14px;
  left: 50%;
  transform:translateX(-50%);
  opacity: 0.7;
}
.active .philoCont .title .jpn:before,
.active2 .philoCont .title .jpn:before {
  width: 47%;
  transition-delay: 1.75s;
}


/*
Nav
*/

.underPhiloNav {
  display: none;
  margin-top: 18px;
  height: 34px;
}
.underPhiloNav ul {
  position: absolute;
  right: initial;
  left: 50%;
  transform:translateX(-50%);
}
.underNav ul li {
  font-size: 1.25rem;
  letter-spacing: 1.5px;
  white-space: nowrap;
  position: relative;
}
.underNav ul li span {
  display: none;
  margin-top: 7px;

}
.underNav ul li + li {
  margin-left: 41px;
}
.underPhiloNav ul li + li:before {
  top: 4px;
  left: -22px !important;
  height: 10px;
}

.underPhiloNav ul li:after {
  bottom: -18px;
}


/*
About
*/

.philoCont .about {
  display: block;
  margin-top: 54px;
  width: 73%;
  opacity: 0;
  transition: all ease .5s;
}
.active .philoCont .about,.active2 .philoCont .about {
  opacity: 1;
  transition-delay: 5.15s;
}
.philoCont .about > .left {
    width: 100%;
    transition-delay: 0s !important;
}
.ourPhilosophy .about .left > .inner {
  position:  initial;
  top: initial;
  margin-bottom: 29px;
}

.philoCont .about .left .copy {
  font-size: 2.4rem;
  font-size: calc(23px + ((1vw – 3.2px)*0.7625 ));
  letter-spacing: 0.04em;
  line-height: 27px;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 0;
}
.philoCont .about .left .copy span.pc {
  display: none;
}
.philoCont .about .left .copy span.sp {
  display: block;
}
.philoCont .about .left .engDesc {
  margin-top: 9px;
  margin-left: 1px;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  line-height: 24px;
}
.philoCont .about .left .engDesc span.pc {
  display: none;
}
.philoCont .about .left .engDesc span.sp {
  display: block;
}

.philoCont .about > .right {
  width: 100%;
  margin-top: 0px;
  transition-delay: 0s !important;
}
.philoCont .about .right .desc {
  font-size: 1.3rem;
  line-height: 2.6;
  letter-spacing: 0.06em;
  width: 100%;
}
.ourValue .philoCont .about .right .desc {
  font-size: 1.3rem;
  line-height: 2.4;
  letter-spacing: 0.4px;
  width: calc(100% - 27px);
}
.ourValue .philoCont .panel div:nth-child(3) .right .desc {
width: 100%;
}


/*
NextCont
*/

.philoCont .nextCont {
  margin: 85px auto 0;
  background: #eee;
  background-size: cover;
  background-position: center center;
  position: relative;
  background-attachment: initial;
}
.philoCont .nextCont:before {
  content:"";
  position: absolute;
  display: block;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2)
}


.philoCont .nextCont > .inner {
  width: 71%;
  margin: 0px auto;
  padding: 35.5vw 0 35.5vw;
  flex-direction: column;
}
.philoCont .nextCont .left {
    width: 100%;
    display: none;
}
.philoCont .nextCont .left .image {
  height: 52vw;
  width: 52vw;
}

.philoCont .nextCont .right > .inner {
  position: relative;
  top: initial;
  left: initial;
  transform:initial;
  white-space: nowrap;
  color:#fff;
}
.philoCont .nextCont .nextNav {
  font-size: 1.25rem;
  letter-spacing: 1.3px;
  margin-left: 2px;
}
.philoCont .nextCont .nextNav:before {
  bottom: -5px;
  background-color: rgba(255,255,255,0.2);
}

.philoCont .nextCont .nextTitle {
  font-size: 5.3rem;
  text-transform: capitalize;
  letter-spacing: 0.4px;
  margin-top: 29px;
}
.philoCont .nextCont .nextDesc {
  font-size: 1.1rem;
  color:#fff;
  letter-spacing: 0.9px;
  margin-top: 3px;
  margin-left: 1px;
}

.philoCont .nextCont .nextBtn {
  font-size: 1.6rem;
  margin-top: 31px;
  height: 63px;
  width: 63px;
  line-height: 63px;
  border: 1px solid rgba(229, 229, 229, 0.4);
}

.philoCont .nextCont.active .nextBtn {
  margin-left: 0;
}


/*
Close Message
*/

.closeMessage {
  padding-top: 23px;
  padding-bottom: 25px;
  margin-left: 0;
}
.closeMessBtn {
  font-size: 1.35rem;
  letter-spacing: 1.6px;
  margin-left: 16px;
}
.closeMessBtn:before {
  top: 3px;
  left: -28px;
  width: 6px;
  height: 6px;
  margin-left: 7px;
}



/*
Guideline
*/

.ourValue .about {
    margin-bottom: 30px;
}
.ourValue .about .left > .inner {
    margin-bottom: 27px;
}
.philoCont .about + .about {
    margin-top: 0px;
    border-top: 0px solid #f5f5f5;
    margin-bottom: 24px;
    padding-top: 30px;
}
.philoCont .about .left .guideCopy span.num {
    font-size: 2.5rem;
    margin-right: initial;
    display: inline-block;
    width: 29px;
}
.philoCont .about + .about .desc {
    margin-left: 32px;
    position: relative;
    font-size: 1.2rem;
    line-height: 27px;
}
.philoCont .about + .about .desc:before {
    content: "";
    position: absolute;
    height: calc(100% - 18px);
    width: 1px;
    background: #eee;
    left: -11.4%;
    top: 6px;
}

.philoCont .about .left .guideCopy {
  font-size: 2.1rem;
  margin-bottom: -3px;
  letter-spacing: 0.1px;
}



/*
---------------------------------------------------
  10. Contact
---------------------------------------------------
*/

/*
Commmon
*/

.contactCont {
  margin-top: 150px;
  margin-bottom: 70px;
}
.contactCont .underHead {
  text-align: center;
}
.contactMain {
  width: calc(100% - 53px);
  margin-top: 29px;
}
.contactMain.animation {
  margin-top: 9px;
  opacity: 1;
  transition: all ease .5s;
}
.contactMain .left {
  width:  100%;
}
.contactMain .middle {
  width: 100%;
  margin: 37px auto 0;
}
.contactMain .right {
  width: 100%;
  margin-top: 54px;
}


/*
Left
*/

.contactNav ul li {
  font-size: 1.15rem;
}
.contactNav span {
  font-size: 1.2rem;
  margin-right: 2px;
  margin-left: 1px;
  font-weight: 600;
}
.contactNav ul li + li {
  margin-left: 10px;
}
.contactNav ul li + li:before {
  content:none;
  top: 7px;
  left: -9px;
  width: 1px;
  height: 12px;
  transform: rotate(30deg);
  background-color: #e1e1e1;
}


/*
Middle
*/

.contactMain .middle .contactDesc {
  font-size: 1.3rem;
  line-height: 2.1;
  letter-spacing: 0px;
  margin-top: 0px;
}
.contactMain .middle .email {
  font-size: 1.3rem;
  font-family:'Helvetica Neue LT W01_41488878';
  margin-top: 17px;
}
.contactMain .middle .email span {
  font-size: 1.15rem;
}


/*
Right
*/

.contactMain .right .formTitle {
  font-size: 1.1rem;
  letter-spacing: 0.6px;
  margin-bottom: 16px;
}
.contactMain .right .required {
  font-size: 1.1rem;
  margin-left: 3px;
}
.contactMain .right .formCont + .formCont {
  margin-top: 35px;
}
.contactMain .right .formCont input {
  font-size: 1.3rem;
  letter-spacing: 0.4px;
  width: calc(100% - 22px);
  line-height: 56px;
  padding-left: 15px;
}
.contactMain .right .formCont textarea {
  height: 15em;
  width: calc(100% - 22px);
}
.contactMain .right .accept {
  font-size: 1.1rem;
  margin-top: 16px;
}
span.wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required {
  position: absolute;
  top: -3px;
}
span.wpcf7-list-item-label::after {
  width: 2px;
  height: 7px;
  left: 30%;
  top: 60%;
  transform: translate(-50%,-50%) rotate(-44deg);
}
span.wpcf7-list-item-label::before {
}

.contactMain .right .accept span.checkbox-661 {
  margin-right: 4px;
  position: absolute;
  top: 6px;
}
span.wpcf7-not-valid-tip {
  font-size: 1rem;
  margin-top: 8px;
  padding-bottom: 0px;
  white-space: nowrap;
}
.contactMain .right .accept a {
  position: relative;
  margin-left: 26px;
}
.contactMain .right .accept .mark {
  font-size: 1.3rem;
  color: #b23636;
}
.contactMain .right .btnList {
  margin-top: 38px;
}
.contactMain .right .btnList input {
  font-size: 1.2rem;
  letter-spacing: 0.1px;
  border-radius: 29px;
  line-height: 62px;
}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
  margin-top: 21px;
  font-size: 1.1rem;
}
div.wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output {
  line-height: 22px;
  font-size: 1.1rem;
  letter-spacing: -0.1px;
  border: 1px solid #ccc !important;
  margin: auto;
  padding: 20px 20px;
  margin-top: 23px;
}
.contactMain .right .accept a:before {
  bottom: -3px;
}


/*
---------------------------------------------------
  11. Privacy Policy
---------------------------------------------------
*/

.privacyCont  {
  margin-bottom: 85px;
}
.policyMain {
  width: calc(100% - 24%);
  margin-top: 56px;
}
.policyMain.animation {
  margin-top: 42px;
}
.policyMain .cont {
  margin-left: 0%;
}
.policyMain .cont dl {
  flex-wrap: wrap;
  flex-direction: column
}
.policyMain .cont dl + dl {
  margin-top: 20px;
  padding-top: 23px;
  border-top: initial;
}
.policyMain .cont dl dt {
  font-size: 2rem;
  width: 100%;
}
.policyMain .cont dl dt span {
  font-size: 2.5rem;
  margin-right: 7px;
  margin-left: 1px;
}
.policyMain .cont dl dd {
  font-size: 1.2rem;
  width: 100%;
  line-height: 26px;
  letter-spacing: 0.1px;
  margin-top: 15px;
}
.policyMain dl:nth-child(1) dt {
  display: none;
}
.policyMain dl:nth-child(1) dd {
  font-size: 1.2rem;
  line-height: 27px;
  letter-spacing: 0.1px;
}

.policyMain .cont dl dd ul {
  margin-top: 21px;
}
.policyMain .cont dl dd ul li + li {
  margin-top: 2px;
}


/*
--
*/
}


/* ========== sp ========== */
@media screen and (max-width: 480px) {

	.submenusp{
	display: block;
}
	/*FontAwesomeを使用しています。*/
.header-8 {
  box-sizing: border-box;
  width: 100%;
  height: 120px;
}

/* ========== nav ========== */


.inner-nav {
  display: flex;
  justify-content: center;
  max-width: 1024px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.menu {
  position: relative;
  padding: 20px;
  cursor: pointer;
  margin-top: 75px;
  font-size: 10px;
  font-family: 'Helvetica Neue LT W01_41488878';
}

.menurent{
	position: relative;
  padding: 20px;
  cursor: pointer;
  margin-top: 70px;
  font-size: 10px;
  text-align: center;
  font-family: 'Helvetica Neue LT W01_41488878';
}

.menu:not(:first-of-type)::before {
  position: absolute;
  top: 30%;
  left: 0;
  width: 1px;
  height: 30%;
  content: '';
  background: #3a3a3a;
}

.menu:hover {
  opacity: 0.7;
}

.menurent:not(:first-of-type)::before {
  position: absolute;
  top: 30%;
  left: 0;
  width: 1px;
  height: 30%;
  content: '';
  background: #3a3a3a;
}

.menurent:hover {
  opacity: 0.7;
}

}

/*
===================================================
  C. SP :  320px
===================================================
*/

@media screen and (max-width:320px) {


/*
---------------------------------------------------
  1. Header
---------------------------------------------------
*/

header  {
	height: 100px;
}
header .title.slideIn {
  top: 42%;
}
header.active .title.slideIn {
  top: 42%;
}




/*
---------------------------------------------------
  4. Index
---------------------------------------------------
*/

.mainCopy {
  top: 108px;
}
.mainCopy .title {
  font-size: 7.3vw;
  line-height: 1.675;
  letter-spacing: 0.39em;
  height: 44.3vw;
}


	.submenusp{
	display: block;
}

.header-8 {
  box-sizing: border-box;
  width: 100%;
  height: 120px;
}


/* ========== nav ========== */

.inner-nav {
  display: flex;
  justify-content: center;
  max-width: 1024px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.menu {
  position: relative;
  padding: 20px;
  cursor: pointer;
  margin-top: 52px;
  font-size: 10px;
  font-family: 'Helvetica Neue LT W01_41488878';
}

.menurent{
	position: relative;
  padding: 20px;
  cursor: pointer;
  margin-top: 47px;
  font-size: 10px;
  text-align: center;
  font-family: 'Helvetica Neue LT W01_41488878';
}

.menu:not(:first-of-type)::before {
  position: absolute;
  top: 30%;
  left: 0;
  width: 1px;
  height: 30%;
  content: '';
  background: #3a3a3a;
}

.menu:hover {
  opacity: 0.7;
}


.menurent:hover {
  opacity: 0.7;
}



/*
--
*/
}