/*  Technique Style */
/*  Last Up Dataed 2020.08.27  */

/* =======================================
   Common Style
======================================= */
/*----  Tablet Style ------*/
@media screen and (max-width: 1024px){
  header h1{
      background: url(/images/logo_bk.png) no-repeat center top;
      background-size: 100px auto;
  }
}
/*----  SmartPhone Style ------*/
@media screen and (max-width: 599px){
  header h1{
      background: url(/images/logo_bk.png) no-repeat center top;
      background-size: 100px auto;
  }
}

/* ----------------------------------
    Main Visual
------------------------------------ */
div#mainVisual{
    background: url(/technique/images/img_main_carving_pc.jpg) center no-repeat;
    background-size: cover;
}
div#mainVisual h1{
  color: #111;
  letter-spacing: .2em;
}
div#mainVisual h1 span{
    position: absolute;
    left: 16%;
}
/*----  Tablet Style ------*/
@media screen and (max-width: 1024px){
	div#mainVisual h1 span{
	left: 0%;
	}
}
/*----  SmartPhone Style ------*/
@media screen and (max-width: 599px){
    div#mainVisual{
        background: url(/technique/images/img_main_carving_sm.jpg) center no-repeat;
        background-size: cover;
    }
}

.techniqueArea{
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    padding: 40px 0 0;
    text-align: center;
}
section{
  margin-bottom: 100px;
}
div.explanation{
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}
section h2{
    writing-mode:vertical-rl; /*  縦書き  */
    font-size: 2em;
    font-weight: 900;
    margin: 0 auto 30px;
    letter-spacing: .3em;
    width: 40px;
}
section p{
    margin-bottom: 35px;
}
section figure{
    margin: 0 auto;
    margin-bottom: 30px;
}
section figure img{
    width: 100%;
    height: auto;
    outline: solid 1px #fff;
    outline-offset: -4px;
}
section figure.visual img{
    outline: none;
    outline-offset:inherit;
}

/*----------  Tablet Style -------------*/
@media screen and (max-width: 1024px){
  .techniqueArea{
      width: 100%;
      min-width: inherit;
  }
  div.explanation{
      width: 90%;
  }
}

/*--------  SmartPhone Style ----------*/
@media screen and (max-width: 599px){
  .techniqueArea{
      width: 100%;
      min-width: inherit;
      padding-top: 20px;
  }
  section{
    margin-bottom: 40px;
  }
  div.explanation{
      width: 90%;
  }
  section h2{
      font-size: 1.25em;
      margin: 0 auto 10px;
  }
  section p{
      margin-bottom: 10px;
      font-size: 0.875em;
  }
  section figure{
      margin-bottom: 10px;
  }
  section figure.visual{
    margin-bottom: 20px;

  }
}

/* =======================================
   木　彫 Style
======================================= */
.carving figure.kind{
    width: 680px;
}
.carving figure.kind img{
    outline: solid 1px #BAA52E;
}
.carving .process{
    display: flex;
    flex-wrap:nowrap;
    justify-content: space-between;
}
.carving .process figure{
    width: 48%;
    margin: 0;
}
/*----------  Tablet Style -------------*/
@media screen and (max-width: 1024px){
  .carving figure.kind{
      width: 60%;
  }
}
/*--------  SmartPhone Style ----------*/
@media screen and (max-width: 599px){
  .carving figure.kind{
      width: 100%;
  }
  .carving .process{
      display: inherit;
      width: 100%;
      margin: 0 auto;
  }
  .carving .process figure{
      width: 60%;
      margin:0 auto 10px;
  }
}

/* =======================================
   漆 Style
======================================= */
.lacquer .explanation .inner{
    display: flex;
    flex-wrap:nowrap;
    justify-content: space-between;
}
.lacquer .explanation .inner div{
    width: 48%;
}
.lacquer .explanation .inner div p:last-child{
  margin-bottom: 0;
}
.lacquer .explanation .inner figure{
     width: 48%;
}
/*----------  Tablet Style -------------*/
@media screen and (max-width: 1024px){

}
/*--------  SmartPhone Style ----------*/
@media screen and (max-width: 599px){
  .lacquer .explanation .inner{
      display: inherit;
      flex-wrap:inherit;
      justify-content: inherit;
  }
  .lacquer .explanation .inner div{
      width: 100%;
  }
  .lacquer .explanation .inner div p:last-child{
    margin-bottom: 40px;
  }
  .lacquer .explanation .inner figure{
    width: 60%;
    margin: 0 auto;
  }
}

/* =======================================
   色　彩 Style
======================================= */
.coloring .state,
.metallicfoil .state{
    position: relative;
    height: 616px;
    width: 1000px;
    margin: 0 auto;
}
.coloring .state figure,
.metallicfoil .state figure{
    position: absolute;
    width: 540px;
}
.coloring .state figure:first-child,
.metallicfoil .state figure:first-child{
    left: 0;
    top: 0;
    z-index: 2;
}
.coloring .state figure:last-child,
.metallicfoil .state figure:last-child{
    right: 0;
    bottom: 0;
    z-index: 1;
    margin-bottom: 0;
}
/*----------  Tablet Style -------------*/
@media screen and (max-width: 1024px){
  .coloring .state,
  .metallicfoil .state{
      height: 516px;
      width: 75%;
  }
    .coloring .state figure,
    .metallicfoil .state figure{
      width: 420px;
  }
}
/*--------  SmartPhone Style ----------*/
@media screen and (max-width: 599px){
  .coloring .state,
  .metallicfoil .state{
      position: inherit;
      height: auto;
      width: 100%;
  }
  .coloring .state figure,
  .metallicfoil .state figure{
      position: inherit;
      width: 60%;
  }
}
/* =======================================
   截　金 Style
======================================= */
.metallicfoil .state figure{
    position: absolute;
    width: 520px;
}

/*----------  Tablet Style -------------*/
@media screen and (max-width: 1024px){
  .metallicfoil .state figure{
      position: absolute;
      width: 420px;
  }
}
/*--------  SmartPhone Style ----------*/
@media screen and (max-width: 599px){
  .metallicfoil .state figure{
      position: inherit;
      width: 60%;
  }
}