@charset "utf-8";

/* -------------------------------------------------
  font
------------------------------------------------- */

/*@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 100;
  src: url('/design_technology/craftsmanship/shared_crafts/font/NotoSerifCJKjp-hinted_subset_woff/NotoSerifCJKjp-Thin_sub.woff') format('woff');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url('/design_technology/craftsmanship/shared_crafts/font/NotoSerifCJKjp-hinted_subset_woff/NotoSerifCJKjp-Light_sub.woff') format('woff');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 300;
  src: url('/design_technology/craftsmanship/shared_crafts/font/NotoSerifCJKjp-hinted_subset_woff/NotoSerifCJKjp-DemiLight_sub.woff') format('woff');
}*/
@font-face {
  font-family: 'Noto Serif Japanese';
  font-weight: 400;
  font-style: normal;
  src: url('/design_technology/craftsmanship/shared_crafts/font/NotoSerifCJKjp-hinted_subset_woff/NotoSerifCJKjp-Regular_sub.woff') format('woff');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-weight: 500;
  font-style: normal;
  src: url('/design_technology/craftsmanship/shared_crafts/font/NotoSerifCJKjp-hinted_subset_woff/NotoSerifCJKjp-Medium_sub.woff') format('woff');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-weight: 700;
  font-style: normal;
  src: url('/design_technology/craftsmanship/shared_crafts/font/NotoSerifCJKjp-hinted_subset_woff/NotoSerifCJKjp-Bold_sub.woff') format('woff');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-weight: 900;
  font-style: normal;
  src: url('/design_technology/craftsmanship/shared_crafts/font/NotoSerifCJKjp-hinted_subset_woff/NotoSerifCJKjp-Black_sub.woff') format('woff');
}

/* -------------------------------------------------
  斜体
------------------------------------------------- */

.italic {
  font-style: italic;
  font-size: inherit;
}

/* -------------------------------------------------
  animation
------------------------------------------------- */

.anim {
  opacity: 0;
  transition: all 1s cubic-bezier(.8,.05,.43,1.04);
}
.anim.to-top { transform: translateY(30%); }
.anim.to-bottom { transform: translateY(-30%); }
.anim.to-right { transform: translateX(-30%); }
.anim.to-left { transform: translateX(30%); }

.delay0 { transition-delay: 0s !important; }

.anim.delay01 { transition-delay: 0.1s; }
.anim.delay02 { transition-delay: 0.2s; }
.anim.delay03 { transition-delay: 0.3s; }
.anim.delay04 { transition-delay: 0.4s; }
.anim.delay05 { transition-delay: 0.5s; }
.anim.delay06 { transition-delay: 0.6s; }
.anim.delay07 { transition-delay: 0.7s; }
.anim.delay08 { transition-delay: 0.8s; }
.anim.delay09 { transition-delay: 0.9s; }
.anim.delay10 { transition-delay: 1.0s; }
.anim.delay11 { transition-delay: 1.1s; }
.anim.delay12 { transition-delay: 1.2s; }
.anim.delay13 { transition-delay: 1.3s; }
.anim.delay14 { transition-delay: 1.4s; }
.anim.delay15 { transition-delay: 1.5s; }
.anim.delay32 { transition-delay: 3.2s; }

@media print, screen and (min-width:768px) {
  .anim.pc-delay01 { transition-delay: 0.1s; }
  .anim.pc-delay02 { transition-delay: 0.2s; }
  .anim.pc-delay03 { transition-delay: 0.3s; }
  .anim.pc-delay04 { transition-delay: 0.4s; }
  .anim.pc-delay05 { transition-delay: 0.5s; }
  .anim.pc-delay06 { transition-delay: 0.6s; }
  .anim.pc-delay14 { transition-delay: 1.4s; }
}

@media screen and (max-width:767px) {
  .anim {
    transition-duration: 0.6s;
  }
  .anim.sp-delay01 { transition-delay: 0.1s; }
  .anim.sp-delay02 { transition-delay: 0.2s; }
  .anim.sp-delay03 { transition-delay: 0.3s; }
  .anim.sp-delay04 { transition-delay: 0.4s; }
  .anim.sp-delay05 { transition-delay: 0.5s; }
  .anim.sp-delay06 { transition-delay: 0.6s; }
  .anim.sp-delay14 { transition-delay: 1.4s; }
}

.anim.on {
  opacity: 1;
  transform: translate(0,0);
}

/* -------------------------------------------------
  moreボタン1
------------------------------------------------- */

#rwd-content a.more-style1 {
  width: 311px;
  height: 65px;
  display: inline-block;
  position: relative;
  color: #fff;
  overflow: hidden;
}
#rwd-content a.more-style1 .text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 6;
  font-size: 1.8rem;
  font-style: italic;
  display: inline-block;
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style1.active .text {
  opacity: 1;
}
#rwd-content a.more-style1 .arrow {
  width: 13px;
  height: 13px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  box-sizing: border-box;
  transform: translateY(-40%) rotate(45deg);
  position: absolute;
  top: 50%;
  right: 9%;
  z-index: 6;
  display: inline-block;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style1.active .arrow {
  opacity: 1;
}
#rwd-content a.more-style1 .bg-color {
  width: 0;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  transition: width 0.7s cubic-bezier(.8,.05,.43,1.04) 0.7s, left 0.2s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style1.active .bg-color {
  width: 100%;
}

#rwd-content a.more-style1 .bg-color.gr { background: #148470; }
#rwd-content a.more-style1 .bg-color.bl { background: #238dbf; }
#rwd-content a.more-style1 .bg-color.br { background: #9d4837; }

#rwd-content a.more-style1 .bg-bk {
  width: 0;
  height: 100%;
  display: inline-block;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transition: width 0.7s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style1.active .bg-bk {
  width: 100%;
}

@media print, screen and (min-width: 768px){
  #rwd-content a.more-style1:hover .bg-color {
    left: 100%;
  }
}

@media print, screen and (max-width:767px){
  #rwd-content a.more-style1 {
    width: 90%;
    height: 54px;
  }
  #rwd-content a.more-style1 .text {
    font-size: 1.6rem;
  }
}

/* -------------------------------------------------
  moreボタン2
------------------------------------------------- */

#rwd-content a.more-style2 {
  width: 311px;
  height: 65px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  color: #fff;
  overflow: hidden;
}
#rwd-content a.more-style2 .text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 6;
  font-size: 1.8rem;
  font-style: italic;
  display: inline-block;
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.8,.05,.43,1.04) 0.2s;
}
#rwd-content a.more-style2.active .text {
  opacity: 1;
}
#rwd-content a.more-style2 .arrow {
  width: 13px;
  height: 13px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  box-sizing: border-box;
  transform: translateY(-40%) rotate(45deg);
  position: absolute;
  top: 50%;
  right: 9%;
  z-index: 6;
  display: inline-block;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.8,.05,.43,1.04) 1.4s;
}
#rwd-content a.more-style2.active .arrow {
  opacity: 1;
}
#rwd-content a.more-style2 .bg-color {
  width: 0;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  transition: width 1s cubic-bezier(.8,.05,.43,1.04) 1.0s, left 0.2s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style2.active .bg-color {
  width: 100%;
}

#rwd-content a.more-style2 .bg-color.nv { background: #26437e; }

#rwd-content a.more-style2 .bg-bk {
  width: 0;
  height: 100%;
  display: inline-block;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transition: width 1s cubic-bezier(.8,.05,.43,1.04) 1s;
}
#rwd-content a.more-style2.active .bg-bk {
  width: 100%;
}

#rwd-content a.more-style2 .border {
  width: 0;
  height: 100%;
  border: solid 0px #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  box-sizing: border-box;
  transition: width 1s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style2.active .border {
  width: 100%;
  height: 100%;
  border-width: 2px;
}

@media print, screen and (min-width: 768px){
  #rwd-content a.more-style2:hover .bg-color {
    left: 100%;
  }
}

@media print, screen and (max-width:767px){
  #rwd-content a.more-style2 {
    width: 90%;
    height: 54px;
  }
  #rwd-content a.more-style2 .text {
    font-size: 1.6rem;
  }
}

/* -------------------------------------------------
  moreボタン3
------------------------------------------------- */

#rwd-content a.more-style3 {
  width: 210px;
  height: 48px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  color: #148470;
  overflow: hidden;
  border: solid 2px #148470;
}
#rwd-content a.more-style3.blue {
  border-color: #2b91c1;
}
#rwd-content a.more-style3 .text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 6;
  font-size: 1.8rem;
  font-style: italic;
  display: inline-block;
  font-weight: bold;
  transition: color 0.2s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style3.blue .text {
  color: #238dbf;
}
#rwd-content a.more-style3 .arrow {
  width: 13px;
  height: 13px;
  border-top: solid 3px #148470;
  border-right: solid 3px #148470;
  box-sizing: border-box;
  transform: translateY(-40%) rotate(45deg);
  position: absolute;
  top: 50%;
  right: 9%;
  z-index: 6;
  display: inline-block;
  transition: border-color 0.2s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style3.blue .arrow {
  border-color: #2b91c1;
}
#rwd-content a.more-style3 .bg-color {
  width: 0;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  transition: width 1s cubic-bezier(.8,.05,.43,1.04) 1.0s, left 0.2s cubic-bezier(.8,.05,.43,1.04);
}

#rwd-content a.more-style3 .bg-bk {
  width: 100%;
  height: 100%;
  display: inline-block;
  /*background: #000;*/
  background: #148470;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 2;
  transition: left 0.2s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content main.pageID-boat a.more-style3 .bg-bk,
#rwd-content main.pageID-me a.more-style3 .bg-bk {
  background: #238dbf;
}

@media print, screen and (min-width: 768px){
  #rwd-content a.more-style3:hover .text {
    color: #fff;
  }
  #rwd-content a.more-style3:hover .arrow {
    border-color: #fff;
  }
  #rwd-content a.more-style3:hover .bg-bk {
    left: 0%;
  }
}

@media print, screen and (max-width:767px){
  #rwd-content a.more-style3 {
    width: 210px;
    height: 38px;
  }
  #rwd-content a.more-style3 .text {
    font-size: 1.7rem;
  }
}

/* -------------------------------------------------
  moreボタン4
------------------------------------------------- */

#rwd-content a.more-style4 {
  width: 210px;
  height: 48px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  color: #148470;
  overflow: hidden;
  border: solid 2px #148470;
}
#rwd-content a.more-style4.blue {
  border-color: #a7523f;
}
#rwd-content a.more-style4 .text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  z-index: 6;
  font-size: 1.8rem;
  font-style: italic;
  display: inline-block;
  font-weight: bold;
  transition: color 0.2s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style4.blue .text {
  color: #a7523f;
}
#rwd-content a.more-style4 .arrow {
  width: 13px;
  height: 13px;
  border-top: solid 3px #148470;
  border-right: solid 3px #148470;
  box-sizing: border-box;
  transform: translateY(-40%) rotate(45deg);
  position: absolute;
  top: 50%;
  right: 9%;
  z-index: 6;
  display: inline-block;
  transition: border-color 0.2s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content a.more-style4.blue .arrow {
  border-color: #a7523f;
}
#rwd-content a.more-style4 .bg-color {
  width: 0;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  transition: width 1s cubic-bezier(.8,.05,.43,1.04) 1.0s, left 0.2s cubic-bezier(.8,.05,.43,1.04);
}

#rwd-content a.more-style4 .bg-bk {
  width: 100%;
  height: 100%;
  display: inline-block;
  /*background: #000;*/
  background: #a7523f;
  position: absolute;
  left: -100%;
  top: 0;
  z-index: 2;
  transition: left 0.2s cubic-bezier(.8,.05,.43,1.04);
}
#rwd-content main.pageID-newMethods a.more-style4 .bg-bk {
  background: #238dbf;
}
#rwd-content main.pageID-me a.more-style4 .bg-bk {
  background: #238dbf;
}

@media print, screen and (min-width: 768px){
  #rwd-content a.more-style4:hover .text {
    color: #fff;
  }
  #rwd-content a.more-style4:hover .arrow {
    border-color: #fff;
  }
  #rwd-content a.more-style4:hover .bg-bk {
    left: 0%;
  }
}

@media print, screen and (max-width:767px){
  #rwd-content a.more-style4 {
    width: 210px;
    height: 38px;
  }
  #rwd-content a.more-style4 .text {
    font-size: 1.6rem;
  }
}


/* -------------------------------------------------
  PCのみにある黒背景のページタイトルリンク
------------------------------------------------- */

@media print, screen and (min-width: 768px){
  #page-title {
    height: 44px;
    padding-top: 6px;
    background: #000;
    box-sizing: border-box;
  }
  #page-title p {
    font-family: 'Roboto';
    font-size: 1.8rem;
    font-weight: bold;
  }
  #page-title p a {
    color: #fff !important;
    text-decoration: none !important;
  }
}

/* -------------------------------------------------
  共通リードスタイル1
------------------------------------------------- */

.common-lead1 {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.common-lead1 .text-box {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
}
.common-lead1 .text-box .bg-gray {
  width: 0;
  transition: width 0.8s ease-out 3s;
}
.common-lead1 .title {
  padding: 2em 6% 0;
  font-size: 2.6rem;
  font-weight: bold;
  color: #0e1f41;
  position: relative;
  z-index: 4;
  line-height: 1.5 !important;
}
.common-lead1 .title .small {
  font-size: 1.8rem;
  font-weight: normal;
}
.common-lead1 .desc {
  padding: 65px 6%;
  position: relative;
  z-index: 4;
}
.common-lead1 .desc p {
  font-size: 1.8rem;
  line-height: 1.77 !important;
}
.common-lead1 .desc p + p {
  margin-top: 1em;
}
.common-lead1 .title + .desc {
  padding-top: 2em;
}
.common-lead1 .desc.blue {
  color: #002779;
}
.common-lead1 .desc .note {
  margin-top: 0.4em;
  font-size: 1.6rem;
  display: block;
}

@media print, screen and (min-width: 768px){
  .common-lead1 {
  text-align: right;
  }
  .common-lead1 .text-box {
    width: calc(937 / 1220 * 100%);
    text-align: left;
    margin-right: calc(-90 / 1220 * 100%);
  }
  .common-lead1 .text-box .bg-gray {
    height: 100%;
    content: "";
    display: block;
    background: #efefef;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  .common-lead1 .text-box .bg-gray.active {
    /*width: calc(937px + ((100vw - 1220px) / 2));*/
    width: 100%;
  }
}

@media print, screen and (min-width: 768px) and (max-width:1260px){
  .common-lead1 .text-box .bg-gray.active {
    width: 101.3%;
  }
}

@media print, screen and (min-width: 768px) and (max-width:1400px){
  .common-lead1 .text-box p {
    margin-right: 5%;
  }
}

@media print, screen and (max-width:767px){
  .common-lead1 .rwd-main-content-group {
    width: auto !important;
  }
  .common-lead1 .text-box {
    background: #efefef;
  }
  .common-lead1 .title {
    padding-left: 0.9em;
    font-size: 2.0rem;
    line-height: 1.66 !important;
  }
  .common-lead1 .title .small {
    font-size: 1.4rem;
  }
  .common-lead1 .desc {
    padding: 2.2em 1em;
    font-size: 1.6rem;
  }
  .common-lead1 .desc p {
    font-size: 1.6rem;
    line-height: 1.875 !important;
  }
  .common-lead1 .title + .desc {
    padding-top: 1.6em;
  }
  .common-lead1 .desc .note {
    font-size: 1.5rem;
  }
}

/* -------------------------------------------------
  個別記事内、リードブロック下の動画（mthod2.html）
------------------------------------------------- */

.article-mov {
  width: calc(1020 / 1220 * 100%);
  height: 600px;
  margin: 110px auto 0;
  display: block;
}
.concept-mov > .article-mov {
  margin: 50px auto 0!important;
}

@media print, screen and (min-width:768px) and (max-width:1260px) {
  .article-mov {
    height: calc(600 / 1260 * 100vw);
  }
}

@media screen and (max-width:767px) {
  .article-mov {
    width: 100%;
    height: 52vw;
    margin-top: 60px;
  }
}

/* -------------------------------------------------
  共通レイアウト1
------------------------------------------------- */

.common-layout1 {
  width: 100%;
  padding-bottom: 120px;
  overflow: hidden;
}
.common-layout1 .sec:first-child {
  margin-top: 100px;
  padding-top: 100px;
  position: relative;
}
.pageType-boat .common-layout1 .sec:first-child {
  margin-top: 60px;
/*  padding-top: 60px;*/
  padding-top: 40px;
  position: relative;
}
.common-layout1 .sec:first-child::before {
  width: 210px;
  height: 15px;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: -moz-linear-gradient(90deg, #000000 0%, #273a6b 100%);
  background: -webkit-linear-gradient(90deg, #000000 0%, #273a6b 100%);
  background: linear-gradient(90deg, #000000 0%, #273a6b 100%);
}
.common-layout1 .sec + .sec {
  margin-top: 260px;
}
.pageType-boat .common-layout1 .sec + .sec {
  margin-top: 160px;
}
.common-layout1 h2 {
  font-size: 5.0rem;
  line-height: 1.32;
  font-family: 'Noto Serif Japanese';
  font-weight: 500;
}
.common-layout1 .desc p {
  font-size: 1.8rem;
}
.common-layout1 .desc p + p {
  margin-top: 1em;
}
.common-layout1 .desc p .italic {
  font-style: italic;
}
.common-layout1 .image {
  margin-top: 55px;
  position: relative;
}
main:not(.pageID-culture) .common-layout1 .image {
  margin-top: 100px;
}
.common-layout1 .image img {
  position: relative;
  z-index: 4;
}

main:not(.pageID-culture) .common-layout1 .sec:nth-child(1) .image::before { /* アロー */
  width: 113px;
  height: 173px;
  display: block;
  content: "";
  background: url(/design_technology/craftsmanship/shared_crafts/img/arrow_01.svg) no-repeat 0 0 / contain;
  position: absolute;
  z-index: 2;
  top: calc(100% + 20px);
  right: 3%;
  transform: translateX(-50%);
}
.pageType-boat .common-layout1 .sec:nth-child(1) .image::before { /* アロー */
  display: none!important;
}
.common-layout1 .image::after { /* グレーのボックス */
  width: 0;
  height: calc(540 / 670 * 100%);
  position: absolute;
  top: calc(230 / 670 * 100%);
  z-index: 2;
  content: "";
  display: block;
  background: #e9e9e9;
  transition: width 0.8s ease-out 0.8s;
}
.common-layout1 .image.active::after {
  /*width: calc(998 / 1220 * 100%);　ie11でアニメーションしないのでコメントアウト */
  width: 81.8%;
}

@media print, screen and (min-width: 768px){
  .common-layout1 .text-wrap {
  }
  .common-layout1 h2 {
    margin-bottom: 1.3em;
    font-size: 3.6rem;
  }
  .pageType-boat .common-layout1 h2 {
    width: 100%;
    margin-bottom: 50px;
    font-size: 4.0rem;
  }
  .common-layout1 .desc {
    margin-left: calc(340 / 1220 * 100%);
  }
  .common-layout1 .sec:nth-child(odd) .image::after {
    right: 25.57%;
  }
  .common-layout1 .sec:nth-child(even) .image::after {
    left: 25.57%;
  }
  
  /* effort1 個別 */
  
  .pageID-mc1 .common-layout1 .sec:nth-child(1) .image img {
    width: calc(752 / 1220 * 100%);
    margin-left: calc(468 / 1220 * 100%);
  }
}

@media print, screen and (min-width: 768px) and (max-width:1220px){
  .common-layout1 h2 {
    font-size: calc(50 / 1220 * 100vw);
  }
  main:not(.pageID-culture) .common-layout1 .sec:nth-child(1) .image::before {
    width: calc(113 / 1220 * 100vw);
    height: calc(173 / 1220 * 100vw);
  }
}

@media print, screen and (max-width:767px){
  .common-layout1 {
    padding-bottom: calc(46 / 375 * 100vw);
  }
  .common-layout1 .sec:first-child {
    margin-top: 40px;
    padding-top: 50px;
  }
  .common-layout1 .sec:first-child::before {
    width: 100px;
    height: 10px;
  }
  .common-layout1 .sec + .sec {
    margin-top: 80px;
  }
  .pageType-boat .common-layout1 .sec + .sec {
    margin-top: 100px;
  }
  .common-layout1 h2 {
    font-size: 2.6rem;
  }
  .common-layout1 .desc p {
    margin-top: 2em;
    font-size: 1.6rem;
  }
  
  main:not(.pageID-culture) .common-layout1 .sec:nth-child(1) .image::before { /* アロー */
    width: calc(53 / 375 * 100vw);
    height: calc(81 / 375 * 100vw);
    top: calc(100% + 6.4vw);
    right: 3%;
    transform: translateX(0);
  }
   .pageType-boat .common-layout1 .image {
    margin-top: 80px;
  }

  /* イラスト (or 写真) の部分 <extra-effort , new-methods> */
  
  main:not(.pageID-culture) .common-layout1 .image {
    margin-top: 80px;
  }
  main:not(.pageID-culture) .common-layout1 .image::after {
    height: calc(100% + 24.5vw);
    top: -12.25vw;
  }
  main:not(.pageID-culture) .common-layout1 .sec:nth-child(odd) .image::after {
    left: 0;
  }
  main:not(.pageID-culture) .common-layout1 .sec:nth-child(even) .image::after {
    right: 0;
  }
  main:not(.pageID-culture) .common-layout1 .image.active::after {
    width: calc(187 / 375 * 100vw);
  }
  
  /* イラスト (or 写真) の部分 <ものづくり風土> */
  
  .pageID-culture .common-layout1 .image {
    margin: 50px -5.4% 0;
  }
  .pageID-culture .common-layout1 .image::after {
    width: 0;
    height: calc(46 / 375 * 100vw);
    top: 100%;
    left: calc(100 / 375 * 100%);
  }
  .pageID-culture .common-layout1 .image.active::after {
    width: calc(275 / 375 * 100%);
    transition-delay: 0.6s;
  }
}

/* -------------------------------------------------
  メインビジュアルタイプ1
------------------------------------------------- */

#mv-type1 {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#mv-type1 .pic {
  background: #fff;
}
#mv-type1 .pic img {
  transform: scale(1.2);
  transition: all 0.8s ease-out 0.2s;
  opacity: 0;
}
#mv-type1.active .pic img {
  transform: scale(1);
  opacity: 1;
}

#mv-type1 h1 .text1 {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: bold;
  color: #fff;
  border: solid 1px #fff;
  line-height: 1;
  padding: 0.5em 1.7em 0.4em;
}
main.pageID-plus1 #mv-type1 h1 .text1 {
  color: #371909!important;
  border: solid 1px #371909!important;
  line-height: 1.5;
}

#mv-type1 h1 .text2 {
  opacity: 0;
  transform: translateX(-30%);
  transition: all 1s cubic-bezier(.8,.05,.43,1.04) 0.6s;
}
#mv-type1.active h1 .text2 {
  opacity: 1;
  transform: translate(0,0);
}

@media print, screen and (min-width: 768px){
  #mv-type1 .bg-blue {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 50%;
    background: -moz-linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    background: -webkit-linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    background: linear-gradient(180deg, #2450a8 0%, #152e61 100%);
  }
  #mv-type1 .mv-inner {
    position: relative;
    z-index: 4;
  }
  #mv-type1 .logo,
  #mv-type1 .logo2,
  #mv-type1 .logo3 {
    width: 215px;
    height: 142px;
    padding: 22px 0 0 24px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    overflow: hidden;
  }
  #mv-type1 .logo4 {
    width: 276px;
    height: 142px;
    padding: 36px 0 0 25px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    overflow: hidden;
  }
  #mv-type1 .logo img,
  #mv-type1 .logo2 img,
  #mv-type1 .logo3 img {
    height: 71px;
    position: relative;
    z-index: 4;
  }
  #mv-type1 .logo4 img {
    height: 56px;
    position: relative;
    z-index: 4;
  }
  #mv-type1 .logo::before {
    width: 130%;
    height: 120%;
    content: "";
    display: block;
    background: #148470;
    position: absolute;
    right: 0;
    bottom: 100%;
    z-index: 2;
    transform: rotate(-33.4deg);
    transform-origin: right bottom;
  }
  #mv-type1 .logo2::before {
    width: 130%;
    height: 120%;
    content: "";
    display: block;
    background: #238dbf;
    position: absolute;
    right: 0;
    bottom: 100%;
    z-index: 2;
    transform: rotate(-33.4deg);
    transform-origin: right bottom;
  }
  #mv-type1 .logo3::before,
  #mv-type1 .logo4::before {
    width: 130%;
    height: 120%;
    content: "";
    display: block;
    background: #a7523f;
    position: absolute;
    right: 60px;
    bottom: 100%;
    z-index: 2;
    transform: rotate(-33.4deg);
    transform-origin: right bottom;
  }
  #mv-type1 .pic {
    width: calc((100vw - 1220px) / 2 + 1220px);
    overflow: hidden;
    position: relative;
    z-index: 8;
  }
  #mv-type1 .pic img {
    width: 100%;
  }
  #mv-type1 h1 {
    position: absolute;
    z-index: 10;
    left: 58px;
    bottom: 65px;
  }
  main.pageID-mc2 #mv-type1 h1 { bottom: 64px; }
  main.pageID-mc3 #mv-type1 h1 { bottom: 64px; }
  main.pageID-mc4 #mv-type1 h1 { bottom: 100px; }
  main.pageID-mc5 #mv-type1 h1 { bottom: 49px; }
  main.pageID-mc6 #mv-type1 h1 { bottom: 90px; }
  main.pageID-mc7 #mv-type1 h1 { bottom: 50%; transform: translateY(50%); }
  main.pageID-mc8 #mv-type1 h1 { bottom: 50%; transform: translateY(50%); }
  main.pageID-me1 #mv-type1 h1 { bottom: 210px; }
  main.pageID-me2 #mv-type1 h1 { bottom: 80px; }
  main.pageID-me3 #mv-type1 h1 { bottom: 80px; }
  main.pageID-me4 #mv-type1 h1 { bottom: 80px; }
  
  #mv-type1 h1 .text2 {
    margin-top: 28px;
    display: block;
  }
  main.pageID-mc1 #mv-type1 h1 .text2 img { width: 660px; }
  main.pageID-mc2 #mv-type1 h1 .text2 img { width: 740px; }
  main.pageID-mc3 #mv-type1 h1 .text2 img { width: 823px; }
  
  main.pageID-mc4 #mv-type1 h1 .text2 img { width: 608px; }
  main.pageID-mc5 #mv-type1 h1 .text2 img { width: 703px; }
  main.pageID-mc6 #mv-type1 h1 .text2 img { width: 609px; }
  main.pageID-mc7 #mv-type1 h1 .text2 img { width: 684px; }
  main.pageID-mc8 #mv-type1 h1 .text2 img { width: 614px; }
  main.pageID-plus1 #mv-type1 h1 .text2 img { width: 709px; }

  main.pageID-me1 #mv-type1 h1 .text2 img { width: 606px; }
  main.pageID-me2 #mv-type1 h1 .text2 img { width: 674px; }
  main.pageID-me3 #mv-type1 h1 .text2 img { width: 788px; }
  main.pageID-me4 #mv-type1 h1 .text2 img { width: 677px; }
  main.pageID-boat1 #mv-type1 h1 .text2 img { width: 695px; }
  main.pageID-boat2 #mv-type1 h1 .text2 img { width: 610px; }
  main.pageID-boat3 #mv-type1 h1 .text2 img { width: 676px; }
  main.pageID-boat4 #mv-type1 h1 .text2 img { width: 742px; }
  main.pageID-boat5 #mv-type1 h1 .text2 img { width: 578px; }
}

@media print, screen and (min-width: 768px) and (max-width:1220px){
  #mv-type1 .pic {
    width: 100%;
/*    width: 101%;*/
  }
}

@media print, screen and (min-width: 768px) and (max-width:910px){
   main.pageID-mc2 #mv-type1 h1 .text2 img { width: calc(740px * 0.7); }
   main.pageID-mc3 #mv-type1 h1 .text2 img { width: calc(823px * 0.7); }
   main.pageID-mc5 #mv-type1 h1 .text2 img { width: calc(703px * 0.7); }
   main.pageID-mc6 #mv-type1 h1 .text2 img { width: calc(609px * 0.7); }
   main.pageID-mc7 #mv-type1 h1 .text2 img { width: calc(684px * 0.7); }
   main.pageID-mc8 #mv-type1 h1 .text2 img { width: calc(614px * 0.7); }
}

@media print, screen and (max-width:767px){
  #mv-type1 {
    padding: calc(18 / 375 * 100vw) 0 calc(43 / 375 * 100vw);
    background: -moz-linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    background: -webkit-linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    background: linear-gradient(180deg, #2450a8 0%, #152e61 100%);
  }
  #mv-type1 .logo {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width: calc(138 / 375 * 100vw);
    height: calc(71 / 375 * 100vw);
    background: #148470;
  }
    #mv-type1 .logo2 {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width: calc(120 / 375 * 100vw);
    height: calc(71 / 375 * 100vw);
    background: #238dbf;
  }
  #mv-type1 .logo3 {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width: calc(128 / 375 * 100vw);
    height: calc(71 / 375 * 100vw);
    background: #a7523f;
  }
  #mv-type1 .logo4 {
    position: absolute;
    z-index: 4;
    left: 0;
    top: 0;
    width: calc(168 / 375 * 100vw);
    height: calc(71 / 375 * 100vw);
    background: #a7523f;
  }
/*  main.pageType-method #mv-type1 .logo {
    background: #238dbf;
  }*/
  #mv-type1 .logo img,
  #mv-type1 .logo2 img {
    height: calc(39 / 375 * 100vw);
    position: relative;
    left: calc(19 / 375 * 100vw);
    top: calc(18 / 375 * 100vw);
  }
  #mv-type1 .logo3 img {
    height: calc(35 / 375 * 100vw);
    position: relative;
    left: calc(19 / 375 * 100vw);
    top: calc(18 / 375 * 100vw);
  }
  #mv-type1 .logo4 img {
    height: calc(29 / 375 * 100vw);
    position: relative;
    left: calc(18 / 375 * 100vw);
    top: calc(24 / 375 * 100vw);
  }
  #mv-type1 .pic {
    width: 105.2%;
    overflow: hidden;
    position: relative;
    z-index: 2;
  }
  #mv-type1 .pic img {
    width: 105%;
    max-width: none;
  }
  #mv-type1 h1 {
    position: relative;
    z-index: 4;
  }
  #mv-type1 h1 .text1 {
    font-size: calc(16 / 375 * 100vw);
    padding: 0.5em 1em 0.4em;
    position: relative;
    top: -14vw;
    left: 5vw;
  }
  main.pageID-plus1 #mv-type1 h1 .text1 {
    top: -22vw!important;
  }
  #mv-type1 h1 .text2 {
    padding-top: 1vw;
    display: block;
  }
  
  main.pageID-mc1 #mv-type1 h1 .text2 { width: 94%; margin: -3vw 0 -5vw; }
  main.pageID-mc2 #mv-type1 h1 .text2 { width: 90%; margin: -4vw 0 -6vw; }
  main.pageID-mc3 #mv-type1 h1 .text2 { width: 90%; margin: -5vw 0 -7vw; }
  main.pageID-mc4 #mv-type1 h1 .text2 { width: 100%; margin: -4vw 0 -5vw; }
  main.pageID-mc5 #mv-type1 h1 .text2 { width: 100%; margin: -5vw 0 -7vw; }
  main.pageID-mc6 #mv-type1 h1 .text2 { width: 100%; margin: -5vw 0 -7vw; }
  main.pageID-mc7 #mv-type1 h1 .text2 { width: 92%; margin: -3vw 0 -5vw; }
  main.pageID-mc8 #mv-type1 h1 .text2 { width: 100%; margin: -4vw 0 -6vw; }

  main.pageID-me1 #mv-type1 h1 .text2 { width: 100%; margin: -5vw 0 -8vw; }
  main.pageID-me2 #mv-type1 h1 .text2 { width: 100%; margin: -2vw 0 -5vw; }
  main.pageID-me3 #mv-type1 h1 .text2 { width: 100%; margin: -5vw 0 -6vw; }
  main.pageID-me4 #mv-type1 h1 .text2 { width: 100%; margin: -5vw 0 -8vw; }
  main.pageID-plus1 #mv-type1 h1 .text2 { margin: -13vw 0 -7vw; }

  main.pageID-boat1 #mv-type1 h1 .text2 { width: 98%; margin: -5vw 0 -8vw; }
  main.pageID-boat2 #mv-type1 h1 .text2 { width: 92%; margin: -5vw 0 -8vw; }
  main.pageID-boat3 #mv-type1 h1 .text2 { width: 96%; margin: -6vw 0 -7vw; }
  main.pageID-boat4 #mv-type1 h1 .text2 { width: 98%; margin: -5vw 0 -7vw; }
  main.pageID-boat5 #mv-type1 h1 .text2 { width: 86%; margin: -5vw 0 -8vw; }
}

/* -------------------------------------------------
  #pic-and-copy
------------------------------------------------- */

#pic-and-copy .pic {
  width: 100%;
}
#pic-and-copy .copy {
  width: 100%;
  overflow: hidden;
  margin-top: 3px;
  height: 576px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
#pic-and-copy .copy img + img {
  margin-left: 12px;
}

#pic-and-copy .copy p .text1 {
  opacity: 0;
  transform: translateX(-30%);
  transition: all 1.2s ease-out;
}
#pic-and-copy .copy p.active .text1 {
  opacity: 1;
  transform: translateX(0);
}

#pic-and-copy .copy p .text2 {
  opacity: 0;
  transform: translateX(-30%);
  transition: all 1.2s ease-out 0.4s;
}
#pic-and-copy .copy p.active .text2 {
  opacity: 1;
  transform: translateX(0);
}

#pic-and-copy .copy p .text3 {
  -ms-filter: blur(3px);
  filter: blur(3px);
  opacity: 0;
  transform: scale(3);
  transform-origin: left bottom;
  transition: all 1.2s ease-out 1.2s;
}
#pic-and-copy .copy p.active .text3 {
  -ms-filter: blur(0);
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

@media print, screen and (max-width:767px){
  #pic-and-copy {
    padding-top: 0;
    /*padding-top: 50px;*/
  }
  #pic-and-copy .copy {
    height: 335px;
    margin-top: 1px;
  }
  #pic-and-copy .copy p img {
    height: 24px;
  }
  #pic-and-copy .copy img + img {
    margin-left: 6px;
  }

}


/* -------------------------------------------------
  #bottom-logo
------------------------------------------------- */

#bottom-logo {
  width: 251px;
  display: block;
  margin: 50px auto 0;
}

@media print, screen and (min-width: 768px){
  #bottom-logo:hover {
    opacity: 0.5;
  }
}

@media print, screen and (max-width:767px){
  #bottom-logo {
    width: 180px;
  }
}

/* -------------------------------------------------
  #bottom-nav
------------------------------------------------- */

#bottom-nav {
  margin-top: 65px;
}
#bottom-nav .cate-top {
  text-align: center;
  font-size: 1.8rem;
  line-height: 1;
}
#rwd-content #bottom-nav .cate-top a {
  width: 330px;
  padding: 0 0 1em 1em;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
  border-bottom: solid 3px #000;
  text-align: left;
  position: relative;
}
#bottom-nav .cate-top a::after {
  width: 0.9em;
  height: 0.9em;
  box-sizing: border-box;
  border-top: solid 3px #000;
  border-right: solid 3px #000;
  transform: rotate(45deg);
  position: absolute;
  right: 1em;
  top: 0;
  content: "";
  display: block;
}
#bottom-nav .cate-top a:hover::after {
  border-color: #0695d1;
}

#bottom-nav ul .pic {
  position: relative;
}
#bottom-nav ul .current .pic::after {
  position: absolute;
  background: #000;
  left: 0;
  top: 0;
  z-index: 4;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
#bottom-nav ul .pic img {
  width: 100%;
  position: relative;
  z-index: 2;
}

#bottom-nav ul .text1 {
  margin-top: 0.6em;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.3;
}
#bottom-nav ul .text2 {
  font-size: 1.6rem;
}

#rwd-content #bottom-nav ul a,
#rwd-content #bottom-nav ul a:hover {
  color: #000;
}

@media print, screen and (min-width: 768px){
  .pageType-mc #bottom-nav ul,
  .pageType-me #bottom-nav ul  {
    /*width: 912px;*/
    width: 1224px;
    max-width: 98%;
    margin: 55px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
 .pageType-mc #bottom-nav ul li,
  .pageType-me #bottom-nav ul li{
    width: calc(288 / 1224 * 100%);
    margin-right: calc(23 / 1224 * 100%);
  }
  .pageType-boat #bottom-nav ul {
    width: 912px;
    max-width: 98%;
    margin: 55px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
 .pageType-boat #bottom-nav ul li{
    width: calc(288 / 912 * 100%);
    margin-right: calc(23 / 912 * 100%);
  }
  .pageType-mc #bottom-nav ul li:nth-child(4n),
  .pageType-mc #bottom-nav ul li:last-child,
  .pageType-boat #bottom-nav ul li:nth-child(3n),
  .pageType-boat #bottom-nav ul li:last-child,
  .pageType-me #bottom-nav ul li:nth-child(4n),
  .pageType-me #bottom-nav ul li:last-child {
    margin-right: 0;
  }
  
  .pageType-mc #bottom-nav ul li:nth-child(4) ~ li,
  .pageType-boat #bottom-nav ul li:nth-child(3) ~ li {
    margin-top: 30px;
  }
  #bottom-nav ul .current p {
    opacity: 0.5;
  }
  
  #bottom-nav ul a > * {
    transition: transform 0.2s ease-out;
  }
  #bottom-nav ul a:hover > * {
    transform: translateY(-16px);
  }
}

@media print, screen and (max-width:767px){
  #bottom-nav {
    margin-top: 30px;
  }
  #bottom-nav .cate-top {
    font-size: 1.6rem;
    font-weight: bold;
  }
  #rwd-content #bottom-nav .cate-top a {
    width: 254px;
    padding: 0 0 1em 0.7em;
    border-width: 2px;
  }
  #bottom-nav .cate-top a::after {
    border-width: 2px;
  }

  #bottom-nav ul {
    margin-top: 30px;
    border-top: solid 1px #dcdcdc;
  }
  #bottom-nav ul li > * {
    padding: 14px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 1px #dcdcdc;
  }
  #bottom-nav ul li .current {
    background: #e7e7e7;
  }
  #bottom-nav ul .pic {
    width: calc(147 / 375 * 100%);
  }
  #bottom-nav ul .texts {
    width: calc(175 / 375 * 100%);
    margin-left: calc(16 / 375 * 100%);
  }

  #bottom-nav ul .text1 {
    margin-top: 0;
    font-size: 1.5rem;
    line-height: 1.3;
  }
  #bottom-nav ul .text2 {
    margin-top: 0.3em;
    font-size: 1.4rem;
    line-height: 1.3;
  }
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
  てへんのしごとINDEX, 新たな工法INDEX　共通
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* --------------------------------------------
  .crafts-cate-top #main-visual
-------------------------------------------- */

.crafts-cate-top #main-visual {
  position: relative;
}
.crafts-cate-top #main-visual .col2 {
  position: relative;
  z-index: 4;
}
.crafts-cate-top #main-visual .col2 h1 img {
  width: 100%;
}
.crafts-cate-top #main-visual .col2 .texts {
  background: #148470;
  display: flex;
  justify-content: center;
  align-items: center;
}
.crafts-cate-top.pageID-boat #main-visual .col2 .texts {
  background: #238dbf;
}
.crafts-cate-top.pageID-me #main-visual .col2 .texts {
  background: #238dbf;
}
.crafts-cate-top.pageID-plus #main-visual .col2 .texts {
  background: #a7523f;
}
.crafts-cate-top #main-visual .col2 .texts p {
  margin-top: 2em;
  color: #fff;
  font-family: 'Noto Serif Japanese';
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1.7;
  text-align: center;
}
.crafts-cate-top.pageID-plus #main-visual .col2 .texts p {
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.crafts-cate-top.pageID-newMethods #main-visual .col2 .texts p {
  font-size: 2.4rem;
}
.crafts-cate-top.pageID-me #main-visual .col2 .texts p {
  font-size: 2.4rem;
}
.crafts-cate-top.pageID-boat #main-visual .col2 .texts p {
  font-size: 2.6rem;
}
.crafts-cate-top #main-visual .col2 .pic {
  overflow: hidden;
  position: relative;
  background: #fff;
}
.crafts-cate-top #main-visual .col2 .pic::after {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  background: #148470;
  transition: left 1s cubic-bezier(.8,.05,.43,1.04) 1s;
}
.crafts-cate-top.pageID-boat #main-visual .col2 .pic::after {
  background: #238dbf;
}
.crafts-cate-top.pageID-me #main-visual .col2 .pic::after {
  background: #238dbf;
}
.crafts-cate-top.pageID-plus #main-visual .col2 .pic::after {
  background: #a7523f;
}
.crafts-cate-top #main-visual .col2 .pic.active::after {
  left: 100%;
}
.crafts-cate-top #main-visual .col2 .pic img {
  width: 100%;
  transform: scale(1.1);
  transition: all 0.8s ease-out 2s;
  position: relative;
  z-index: 2;
  opacity: 0;
}
.crafts-cate-top #main-visual .col2 .pic.active img {
  transform: scale(1);
  opacity: 1;
}

@media print, screen and (min-width: 768px){
  .crafts-cate-top #main-visual .bg-blue {
    height: 245px;
    width: 100%;
    background: -moz-linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    background: -webkit-linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    background: linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  
  .crafts-cate-top #main-visual .col2 {
    display: flex;
  }
  .crafts-cate-top #main-visual .col2 .texts {
    width: calc(480 / 1220 * 100%);
  }
  .crafts-cate-top #main-visual .col2 .texts .group1 {
    width: 100%;
    text-align: center;
  }
  .crafts-cate-top #main-visual .col2 .pic {
    width: calc(740 / 1220 * 100%);
  }
  .crafts-cate-top #main-visual .col2 h1 {
    width: calc(324 / 480 * 100%);
    display: inline-block;
  }
  .crafts-cate-top.pageID-newMethods #main-visual .col2 h1 {
    width: calc(353 / 480 * 100%);
  }
  .crafts-cate-top.pageID-me #main-visual .col2 h1 {
    width: calc(353 / 480 * 100%);
  }
  .crafts-cate-top.pageID-plus #main-visual .col2 h1 {
    width: calc(400 / 480 * 100%);
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1260px){
  .crafts-cate-top #main-visual .col2 .texts p {
    font-size: calc(28 / 1260 * 100vw);
  }
  .crafts-cate-top.pageID-newMethods #main-visual .col2 .texts p {
    font-size: calc(24 / 1260 * 100vw);
  }
  .crafts-cate-top.pageID-me #main-visual .col2 .texts p {
    font-size: calc(24 / 1260 * 100vw);
  }
}

@media print, screen and (max-width: 767px){
  .crafts-cate-top #main-visual {
    padding: calc(19 / 375 * 100vw) 0 calc(36 / 375 * 100vw);
    background: -moz-linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    background: -webkit-linear-gradient(180deg, #2450a8 0%, #152e61 100%);
    background: linear-gradient(180deg, #2450a8 0%, #152e61 100%);
  }
  #rwd-content .crafts-cate-top #main-visual .rwd-main-content-group {
    width: auto;
  }
  .crafts-cate-top #main-visual .col2 h1 {
    width: calc(220 / 338 * 100%);
  }
  .crafts-cate-top.pageID-plus #main-visual .col2 h1 {
    width: calc(269 / 301 * 100%);
  }
  .crafts-cate-top #main-visual .col2 .texts {
    width: calc(338 / 375 * 100%);
    padding: calc(28 / 375 * 100vw) 0 calc(24 / 375 * 100vw);
    display: block;
    position: relative;
    z-index: 8;
  }
  .crafts-cate-top #main-visual .col2 .texts .group1 {
    padding: 0 0 0 calc(37 / 338 * 100%);
  }
  .crafts-cate-top #main-visual .col2 .texts p {
    margin-top: 1em;
    font-size: calc(19 / 375 * 100vw);
    line-height: 1.4;
    text-align: left;
  }
  .crafts-cate-top.pageID-plus #main-visual .col2 .texts p {
    margin-top: 1em;
    font-size: calc(20 / 375 * 100vw);
    line-height: 1.44;
  }
  .crafts-cate-top.pageID-boat #cont-list .text-group .title p{
  background: #238dbf;
  white-space: nowrap;
  }
  .crafts-cate-top.pageID-newMethods #main-visual .col2 .texts p {
    font-size: calc(19 / 375 * 100vw);
  }
  .crafts-cate-top.pageID-me #main-visual .col2 .texts p {
    font-size: calc(19 / 375 * 100vw);
  }
  
  .crafts-cate-top #main-visual .col2 .pic {
    margin: calc(-53 / 375 * 100%) 0 0 calc(36 / 375 * 100%);
    background: transparent;
    position: relative;
    z-index: 6;
  }
  .crafts-cate-top #main-visual .col2 .pic::after {
    opacity: 0;
  }
}

/* --------------------------------------------
  .first-lead
-------------------------------------------- */

.crafts-cate-top .first-lead {
  max-width: 1020px;
  margin: 55px auto 0;
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.9;
  color: #0e1f41;
  line-height: 1.63 !important;
}

@media print, screen and (max-width: 767px){
  .crafts-cate-top .first-lead {
    margin-top: 38px;
    font-size: 1.8rem;
    text-align: left;
  }
}

/* -------------------------------------------------
  .cont-list
------------------------------------------------- */

.crafts-cate-top #cont-list {
  margin-top: 85px;
  position: relative;
}

.crafts-cate-top #cont-list .cont .bg-gray {
  width: 0;
  background: #ededed;
  position: absolute;
  z-index: 2;
  transition: all 0.8s ease-in 0.2s;
}

.crafts-cate-top #cont-list .cont + .cont {
  margin-top: 80px;
}
.crafts-cate-top #cont-list .cont .col2 .text-group2 {
  margin-left: calc(53 / 519 * 100%);
}
.crafts-cate-top #cont-list .text-group .title {
  height: 35px;
  padding: 0 3em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  line-height: 1;
  background: #148470;
  color: #fff;
}
.crafts-cate-top #cont-list .text-group .title.higher {
  height: 50px;
}
.crafts-cate-top.pageID-boat #cont-list .text-group .title {
  background: #238dbf;
  white-space: nowrap;
}
.crafts-cate-top.pageID-me #cont-list .text-group .title {
  background: #238dbf;
  white-space: nowrap;
}
.crafts-cate-top.pageID-plus #cont-list .text-group .title {
  background: #a7523f;
  white-space: nowrap;
}
.crafts-cate-top #cont-list .text-group .copy {
  margin-top: 1.2em;
  font-size: 2.4rem;
  line-height: 1.6;
  font-weight: bold;
}
.crafts-cate-top #cont-list .text-group .desc {
  margin-top: 0.9em;
  font-size: 1.6rem;
  line-height: 1.64;
}
.crafts-cate-top #cont-list .text-group .more-wrap {
  margin-top: 22px;
  text-align: right;
}

.crafts-cate-top #cont-list .bg-grad {
  width: calc(84 / 1220 * 100%);
  height: 100%;
  background: url(/design_technology/craftsmanship/extra-effort/img/bg_01.jpg) repeat 0 0 / 100% auto;
  position: absolute;
  left: calc(50% - 610px);
  top: 0;
  z-index: 2;
}
.crafts-cate-top.pageID-newMethods #cont-list .bg-grad {
  background: url(/design_technology/craftsmanship/new-methods/img/bg_01.jpg) repeat 0 0 / 100% auto;
}
.crafts-cate-top.pageID-boat #cont-list .bg-grad {
  background: url(/design_technology/craftsmanship/outboards/img/bg_01.jpg) repeat 0 0 / 100% auto;
}
.crafts-cate-top.pageID-me #cont-list .bg-grad {
  background: url(/design_technology/craftsmanship/outboards/img/bg_01.jpg) repeat 0 0 / 100% auto;
}
.crafts-cate-top.pageID-plus #cont-list .bg-grad {
  background: url(/design_technology/craftsmanship/plus/img/bg_01.jpg) repeat 0 0 / 100% auto;
}
@media print, screen and (min-width: 768px){
  .crafts-cate-top #cont-list {
    width: 100%;
    overflow: hidden;
  }
  .crafts-cate-top #cont-list .cont {
    position: relative;
    z-index: 4;
  }
  
  .crafts-cate-top #cont-list .cont .bg-gray {
    width: 0%;
    height: calc(100% - 44px);
    top: 44px;
  }
  .crafts-cate-top #cont-list .cont:nth-child(odd) .bg-gray {
    left: 0;
  }
  .crafts-cate-top #cont-list .cont:nth-child(even) .bg-gray {
    right: 0;
  }
  .crafts-cate-top #cont-list .cont .bg-gray.active {
    width: 150%;
  }
  
  .crafts-cate-top #cont-list .cont .col2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 4;
  }
  .crafts-cate-top #cont-list .cont:nth-child(odd) .col2 {
    margin-left: calc(168 / 1220 * 100%);
    flex-direction: row-reverse;
  }
  .crafts-cate-top #cont-list .cont:nth-child(even) .col2 {
    margin-right: calc(168 / 1220 * 100%);
    justify-content: flex-start;
  }
  .crafts-cate-top #cont-list .cont .col2 .pic {
    width: calc(480 / 1052 * 100%);
    display: block;
    position: relative;
    z-index: 6;
  }
  .crafts-cate-top #cont-list .cont .col2 .pic:hover img {
    opacity: 1;
  }
  .crafts-cate-top #cont-list .cont .col2 .text-group {
    width: calc(519 / 1052 * 100%);
    padding: 88px 0 44px;
    position: relative;
    z-index: 6;
  }
  
  .crafts-cate-top #cont-list .bg-grad {
    height: calc(100% + 44px);
  }
}

@media print, screen and (max-width: 767px){
  .crafts-cate-top #cont-list {
    margin-top: 55px;
  }

  .crafts-cate-top #cont-list .cont {
    position: relative;
  }
  .crafts-cate-top #cont-list .cont + .cont {
    margin-top: 45px;
  }
  
  .crafts-cate-top #cont-list .cont .bg-gray {
    height: calc(100% - 33.3vw);
    bottom: 0;
    left: 0%;
    z-index: 2;
  }
  .crafts-cate-top #cont-list .cont .bg-gray.active {
    width: 106%;
  }

  .crafts-cate-top #cont-list .cont .col2 {
    margin-left: 5.7%;
    padding-bottom: 36px;
    position: relative;
    z-index: 4;
  }
  .crafts-cate-top #cont-list .cont .col2 .text-group2 {
    margin-left: 5%;
  }
  .crafts-cate-top #cont-list .pic,
  .crafts-cate-top #cont-list .text-group {
    position: relative;
    z-index: 4;
  }
  .crafts-cate-top #cont-list .pic {
    display: block;
  }
  .crafts-cate-top #cont-list .text-group .title {
    height: 33px;
    padding: 0 1.5em;
    margin-top: 21px;
    font-size: 1.6rem;
  }
  .crafts-cate-top #cont-list .text-group .copy {
    margin-top: 0.8em;
    font-size: 2.1rem;
    line-height: 1.4;
  }
  .crafts-cate-top #cont-list .text-group .desc {
    margin-top: 0.6em;
    font-size: 1.4rem;
  }
  .crafts-cate-top #cont-list .text-group .more-wrap {
    margin: 20px 0 0;
  }
  .crafts-cate-top #cont-list .text-group .more-wrap .more-style3.to-left:not(.on) {
    transform: translateX(-30%);
  }

  .crafts-cate-top #cont-list .bg-grad {
    width: calc(17 / 375 * 100%);
    background: url(/design_technology/craftsmanship/extra-effort/img/bg_01_sp.jpg) repeat 0 0 / 100% auto;
    left: 0;
  }
  .crafts-cate-top.pageID-boat #cont-list .bg-grad {
    background: url(/design_technology/craftsmanship/boats/img/bg_01_sp.jpg) repeat 0 0 / 100% auto;
  }
  .crafts-cate-top.pageID-me #cont-list .bg-grad {
    background: url(/design_technology/craftsmanship/outboards/img/bg_01_sp.jpg) repeat 0 0 / 100% auto;
  }
  .crafts-cate-top.pageID-plus #cont-list .bg-grad {
    background: url(/design_technology/craftsmanship/plus/img/bg_01_sp.jpg) repeat 0 0 / 100% auto;
  }
}

/* -------------------------------------------------
  記事の最初に写真
------------------------------------------------- */

.common-layout0 {
  width: 100%;
  padding-bottom: 120px;
  overflow: hidden;
}
.common-layout0 .image {
  margin-top: 55px;
  position: relative;
}
.common-layout0 .image img {
  position: relative;
  z-index: 4;
}

.common-layout0 .image::after { /* グレーのボックス */
  width: 0;
  height: calc(540 / 670 * 100%);
  position: absolute;
  top: calc(230 / 670 * 100%);
  z-index: 2;
  content: "";
  display: block;
  background: #e9e9e9;
  transition: width 0.8s ease-out 0.8s;
}
.common-layout0 .image.active::after {
  /*width: calc(998 / 1220 * 100%);　ie11でアニメーションしないのでコメントアウト */
  width: 81.8%;
}

@media print, screen and (min-width: 768px){
  .common-layout0 .sec0:nth-child(odd) .image::after {
    /*right: calc(312 / 1220 * 100%);　ie11でアニメーションしないのでコメントアウト */
    right: 25.57%;
  }
}

@media print, screen and (max-width:767px){
  .common-layout0 {
    padding-bottom: calc(46 / 375 * 100vw);
  }
  .common-layout0 .sec0:first-child::before {
    width: 100px;
    height: 10px;
  }
 }
  
.desc .sign{
  text-align: center;
  color: #4c6190;
}