@charset "UTF-8";


#header {
   width: 100vw;
   min-width: 100vw;
   height: 100vh;
   min-height: 100vh;
   padding-top: 20vh;
   background: #fff url("../images/tohensya_alpha.svg") center center no-repeat;
   background-size: contain;
}
#header .jpn {
   width: 40px;
   margin: 20px auto 0;
}

#scrolldown {
   padding-top: 30px;
}
#scrolldown p {
   font-size: 1.8rem;
   width: 40px;
   height: 40px;
   display: block;
   text-align: center;
   text-decoration: none;
   color: #fff;
   line-height: 40px;
   margin: 30px auto 0;
   border-radius: 20px;
   background: #ccc;
}
#scrolldown p span::before {
   content: "\025bc";
}

.fixmenu {
   position: fixed;
   top: 0;
   width: 100%;
   height: 35px;
   padding: 4px 0;
   background: #fff;
   text-align: center;
   opacity: 0;
   z-index: 999;
   box-shadow: 0 0 15px rgba(0,0,0,0.25);
}
.fixmenu .contentsWrap  {
   display: flex;
   justify-content: space-between;
   padding: 0 5%;
}
.fixmenu .contentsWrap div:first-child img {
   width: 180px;
}
.fixmenu .contact {
   width: 30px;
   margin-top: 2px;
}


#contentsBody {
   background-color: #f1ebe5;
   padding: 0;
}

.colum-left { 
   /*background-color: #f1ebe5;*/
   margin-bottom: 10px;
   position: sticky;
   top: 35px;
}
.colum-left div {
   background: /*#c7b299*/ #fff;
   height: 40px;
   text-align: center;
   border-top: solid thin #999;
   border-bottom: solid thin #999;
}
.colum-left div p {
   font-size: 1.6rem;
   line-height: 40px;
}
.colum-right {
   padding: 20px 5% 40px;
}



.work .colum-right > p {
   margin-bottom: 2em;
}
.work .colum-right .result > li {
   width: 100%;
   margin: 0 auto;
   background: #fff;
   border-radius: 10px;
   padding: 15px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 15px rgba(0,0,0,0.10);
   text-align: center;
}
.work .colum-right .result > li:nth-child(3) h3,
.work .colum-right .result > li:last-child h3 {
   margin-bottom: -3px;
   border-bottom: none;
}
.work .colum-right .result h3 {
   text-align: center;
   color: #998675;
   font-size: 2rem;
   margin-bottom: 1em;
   border-bottom: solid thin #998675;
}
.work .colum-right .result h4 {
   text-align: center;
   font-size: 1.8rem;
}
.work .colum-right .result .sub {
   text-align: center;
   margin-bottom: 1.4em;
   font-size: 1.2rem;
   line-height: 1.2;
   font-weight: 500;
   color: #555;
}

.work .colum-right a {
   font-size: 1.2rem;
}
.work .v-next ul {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 1em;
}
.work .v-next ul li img {
   border: solid thin #999;
}
.work .v-next ul li:first-child {
   width: 54%;
}
.work .v-next ul li:last-child {
   width: 40%;
}
.work .v-next .line {
   margin-top: 20px;
}
.work .v-next .line::before {
   content: " ";
   display: block;
   position: relative;
   height: 20px;
   width: 200px;
   margin-left: calc(50% - 100px);
   margin-bottom: 25px;
   border-bottom: dotted thin #000;
}

.work .program ul li {
   margin-bottom: 1em;
}

.work .client {
   font-size: 1.3rem;
   text-indent: -0.7em;
   padding-left: 0.7em;
}
.work .client span {
   font-weight: 700;
}

.profile dl {
   border-bottom: solid thin #999;
}
.profile dl dt {
   font-size: 1.3rem;
   padding: 15px 10px 0;
   border: thin solid;
   border-color: #999 transparent transparent transparent;
   color: #998675;
   font-weight: 700;
}
.profile dl dd {
   font-size: 1.4rem;
   line-height: 1.6;
   padding: 0 10px 15px;
}

#pageTop {
   padding-bottom: 30px;
}
#pageTop a {
   font-size: 1.8rem;
   width: 40px;
   height: 40px;
   display: block;
   text-align: center;
   text-decoration: none;
   color: #000;
   line-height: 36px;
   margin: 0 auto;
   border-radius: 20px;
   border: solid thin #000;
}
#pageTop a span::before {
   content: "\025b2";
}

#footer {
   /*position: fixed;
   bottom: 0;*/
   width: 100vw;
   text-align: center;
   z-index: 5;
   background: #fff;
}
#footer small {
   text-align: center;
   font-size: 1.2rem;
   line-height: 2;
}


/* =============================================================================================
	device setting
	画面幅が767以下（タブレット・スマホ横　スタイル）
 ============================================================================================= */
@media screen and   ( max-width:767px) { 
   
   .hide_sp {
      display: none;
   }
}



/* メディアクエリサンプル */
/* =============================================================================================
	device setting
	画面幅が768以上（PC小　スタイル）
 ============================================================================================= */
@media screen and   ( min-width:768px) { 
  /*　画面サイズが767pxまではここを読み込む　*/
   
   .hide_pc {
      display: none;
   }
   
   #header {
      width: 100vw;
      min-width: 100vw;
      height: 100vh;
      min-height: 100vh;
      padding-top: 27vh !important;
      background: #fff url("../images/tohensya_alpha.svg") center center no-repeat;
      background-size: contain;
   }
   #header .jpn {
      width: 60px;
      margin: 0 auto;
   }

   .fixmenu {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      padding: 10px 0;
   }
   .fixmenu .contentsWrap {
      max-width: 1000px;
      margin: 0 auto;
   }
   .fixmenu .contentsWrap div:first-child img {
      width: 240px;
   }
   .fixmenu .contentsWrap .contact {
      width: 44px;
      margin-top: 4px;
   }
   
   #contentsBody {
      padding: 20px;
   }
   .work, .profile {
      display: flex;
      width: 860px;
      justify-content: space-between;
      margin: 0 auto;
   }

   .colum-left { 
      width: 120px;
      background-color: none;
      position: relative;
   }
   .colum-left div {
      background: #c7b299;
      width: 120px;
      height: 120px;
      text-align: center;
      border: none;
      position: sticky;
      top: 100px;
   }
   .colum-left div p {
      font-size: 1.6rem;
      line-height: 120px;
   }
   .colum-right {
      width: 740px;
      padding: 40px 5% 40px;
   }



   .work .colum-right > p {
      font-size: 1.6rem;
   }
   .work .colum-right .result > li {
      padding: 30px;
      margin-bottom: 40px;
   }
   .work .colum-right .result > li:nth-child(3) h3,
   .work .colum-right .result > li:last-child h3 {
      margin-bottom: -3px;
      border-bottom: none;
   }
   .work .colum-right .result h3 {
      font-size: 2.5rem;
   }
   .work .colum-right .result h4 {
      font-size: 2.4rem;
   }
   .work .colum-right .result .sub {
      font-size: 1.4rem;
   }

   .work .colum-right a {
      font-size: 1.4rem;
      line-height: 3;
      color: #000;
   }
   .work .colum-right a:hover {
      color: #555;
   }
   .work .program {
   }
   .work .program ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   .work .program ul li {
      margin-bottom: 30px;
      width: 260px;
   }
   .work .program ul li:nth-child(5),
   .work .program ul li:last-child {
      margin-bottom: 0;
   }
   
   .v-next h4 + p + a img,
   .v-next h4 + p + img {
      max-width: 420px;
   }

   .profile dl {
      border-bottom: solid thin #555;
      background: #fff;
      display: flex;
      flex-wrap: wrap;
   }
   .profile dl dt {
      width: 150px;
      text-align: center;
      font-size: 1.4rem;
      line-height: 30px;
      padding: 15px;
      border: thin solid;
      border-color: #555 transparent transparent #555;
      color: #000;
      font-weight: 500;
   }
   .profile dl dd {
      width: calc(100% - 150px);
      font-size: 1.6rem;
      line-height: 30px;
      padding: 15px;
      border: thin solid;
      border-color: #555 #555 transparent #555;
   }
   
}