@charset "utf-8";
/* 商品ができるまで（固定ページ）用 */
/* ------------------------------------------  もくじページ .page-link */
.page-link {
  font-size: .9em;
  lihe-height: 1.4;
}
/* ------------------------------------------  商品開発ものがたり .kaihatsu */
/* ------------------------------------------  タイトル */
h1.c-pageTitle__main.kaihatsu {
  width: 100%;
  height: 0;
  margin: 0 0 1em;
  padding: 15vw 0 0;
  background-color: #df8576;
  background-image: url("../images/anecdote/hiwa_ttl.png");
  background-position: left -20vw top -3vw;
  background-repeat: no-repeat;
  background-size: auto 23vw;
  border: none;
  overflow: hidden;
}
h1.c-pageTitle__main.kaihatsu::before {
  display: none;
}
h2.kaihatsu-ttl {
  padding: 0;
  margin: 0;
  color: #393939;
  font-weight: bold;
  font-size: 1.4em;
  line-height: 1.2;
  background-image: none;
  border: none;
}
.c-postContent h3.sub-ttl {
  margin: .5em 0;
  padding: .5em 2vw;
  color: #a40000;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: center;
  background-color: #FFFFFF;
  border: 2px solid #faeadd;
}
.c-postContent h4 {
  margin: .5em 0;
  color: #DF6E01;
}
/* ------------------------------------------  ページタイトル .ttlbox */
.ttlbox {
  background-image: url("../images/anecdote/piano-item_img.jpg");
  background-repeat: no-repeat;
  background-position: right top 4vw;
  background-size: 130px 85px;
}
.ttlbox p:first-child {
  margin-bottom: .5em;
  color: #a40000;
  font-size: 1.2em;
  line-height: 1.2;
}
.ttlbox .bg-red {
  display: inline-block;
  padding: .2em .5em;
  color: #FFFFFF;
  font-size: 1rem;
  background-color: #a40000;
}
/* ------------------------------------------  本文 .articlebox */
.articlebox section {
  padding-bottom: 2em;
  position: relative;
  overflow: hidden;
}
.articlebox section:last-child {
  padding-bottom: 0;
}
.articlebox section::after {
  content: "";
  width: 90%;
  height: 2px;
  background-color: #df8576;
  filter: blur(2px);
  position: absolute;
  left: 50%;
  bottom: 3vw;
  transform: translateX(-50%);
}
.articlebox section:last-child::after {
  display: none;
  content-visibility: hidden;
}
.articlebox section p {
  margin-bottom: 1em;
  line-height: 1.6;
}
.articlebox section .flo-r {
  max-width: 144px;
  margin-left: .5em;
}
/* ------------------------------------------  誘導リンク .lp-link-img */
.lp-link-img a {
  display: block;
  margin: 2em 0;
  height: 0;
  padding-top: 69.23vw;
  background-image: url("../images/anecdote/piano_banner.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  overflow: hidden;
}
.c-postContent.p-page__content + .ga-shop_link {
  margin: 4em 0 0;
}
/* ------------------------------------------  ピアノ教本ができるまで .seisaku */
.c-postContent.p-page__content.seisaku {
  padding: 1em 0;
  background-color: #fff0cf;
  border-radius: .5em;
}
.seisaku section {
  margin: 0;
  padding: 0 2vw;
  color: #492107;
}
.seisaku section p {
  margin-bottom: .5em;
}
.seisaku strong {
  color: #d73a00;
}
.seisaku .mark_ylw {
  background:linear-gradient(transparent 60%, #ffec9e 60%);
}
/* ------------------------------------------  タイトル */
h2.seisaku-ttl {
  height: 0;
  margin: 0;
  padding-top: 12vw;
  line-height: 3;
  background-image: url("../images/anecdote/seisaku_ttl.gif");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  border: none;
  overflow: hidden;
}
h2.seisaku-ttl + * {
  margin: .5em 0 0;
}
.seisaku h3 {
  margin: 1em 0 0;
  padding: .5em 0 .5em 56px;
  color: #d73a00;
  line-height: 40px;
  position: relative;
}
.seisaku h3::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-image: url("../images/anecdote/flow-no.jpg");
  background-repeat: no-repeat;
  background-size: 44px 352px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.seisaku .seisaku1 h3::before {
  background-position: center top -2px;
}
.seisaku .seisaku2 h3::before {
  background-position: center top -46px;
}
.seisaku .seisaku3 h3::before {
  background-position: center top -90px;
}
.seisaku .seisaku4 h3::before {
  background-position: center top -134px;
}
.seisaku .seisaku5 h3::before {
  background-position: center top -178px;
}
.seisaku .seisaku6 h3::before {
  background-position: center top -222px;
}
.seisaku .seisaku7 h3::before {
  background-position: center top -266px;
}
.seisaku .seisaku8 h3::before {
  background-position: center top -310px;
}
/* ------------------------------------------  こんにちは .hello */
.hello {
  margin: 0 2vw;
  padding: .5em 2vw;
  background-color: #FFFFFF;
  box-shadow: 0 0 3px 1px #ffce7d;
  border-radius: .2em;
}
/* ------------------------------------------  工程 .seisaku* */
.imgbox {
  position: relative;
}
.seisaku6 .imgbox {
  position: relative;
  height: 250px;
}
.seisaku7 .imgbox {
  position: relative;
  height: 340px;
}
.seisaku8 .imgbox {
  position: relative;
  height: 200px;
}
.seisaku-img {
  display: block;
  width: 270px;
  height: 180px;
  margin: 1em auto;
  background-image: url("../images/anecdote/seisaku_img.jpg");
  background-repeat: no-repeat;
  background-size: 270px 2340px;
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 3px #80796C;
  box-sizing: border-box;
  overflow: hidden;
}
.seisaku-img.no1 {
  background-position: left top;
}
.seisaku-img.no2 {
  background-position: left top -180px;
}
.seisaku-img.no3 {
  background-position: left top -360px;
}
.seisaku-img.no4 {
  background-position: left top -540px;
}
.seisaku-img.no5 {
  background-position: left top -720px;
}
.seisaku-img.no6 {
  background-position: left top -900px;
}
.seisaku-img.no7 {
  background-position: left top -1080px;
}
.seisaku-img.no8 {
  background-position: left top -1260px;
  position: absolute;
  right: 0;
  top: 0;
}
.seisaku-img.no9 {
  background-position: left top -1440px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.seisaku-img.no10 {
  background-position: left top -1620px;
  position: absolute;
  left: 0;
  top: 0;
}
.seisaku-img.no11 {
  background-position: left top -1800px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.seisaku-img.no12 {
  background-position: left top -1980px;
}
.seisaku-img.no13 {
  margin: 0 auto;
  background-position: left bottom;
}
.seisaku-img.no3 + picture {
  margin-top: -80px;
}
.seisaku-img.no12 + picture {
  width: 135px;
  height: 55px;
  position: absolute;
  right: 0;
  top: 0;
}
.seisaku8 {
  background-image: url("../images/anecdote/seisaku_8-1_img.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 30vw auto;
}
.last .bgbox {
  background-image: url("../images/anecdote/seisaku_last-1_img.jpg");
  background-repeat: no-repeat;
  background-position: right bottom 1em;
  background-size: 30vw auto;
}
.last .blnbox {
  padding-top: 1em;
  background-image: url("../images/anecdote/seisaku_last_bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}
.last .blnbox picture {
  position: relative;
  top: 2em;
}

@media screen and (min-width: 980px){
/* ------------------------------------------  もくじページ .page-link */
.page-link {
  margin-bottom: 60px;
  text-align: center;
  font-size: 1rem;
}
/* ------------------------------------------  商品開発ものがたり .kaihatsu */
/* ------------------------------------------  タイトル */
h1.c-pageTitle__main.kaihatsu {
  margin: 0;
  padding: 90px 0 0;
  background-color: transparent;
  background-position: left top;
  background-size: 730px 90px;
}
h2.kaihatsu-ttl {
  font-size: 1.6em;
  line-height: 1.4;
  text-align: left;
}
.c-postContent h3.sub-ttl {
  padding: .5em 0;
}
/* ------------------------------------------  ページタイトル .ttlbox */
.ttlbox {
  min-height: 170px;
  margin: 1em 0;
  padding-left: 280px;
  background-position: left top;
  background-size: 260px 170px;
}
.ttlbox .bg-red {
  margin-bottom: .5em;
}
/* ------------------------------------------  本文 .articlebox */
.articlebox {
  padding: 20px 0;
  border: 3px solid #faeadd;
  border-radius: 20px;
}
.articlebox section {
  padding: 0 20px 2em;
  position: relative;
  overflow: hidden;
}
.articlebox section::after {
  bottom: 20px;
}
.articlebox section .flo-r {
  max-width: 220px;
}
.articlebox section.bg_img {
  background-image: url("../images/anecdote/092340.jpg"), url("../images/anecdote/040846.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: 150px 161px, 150px 225px;
  background-position: right 20px top, right 80px top 95px;
  background-blend-mode: multiply;
}
.articlebox section .graph-img {
  width: 290px;
  position: absolute;
  right: 20px;
  top: 200px;
}
/* ------------------------------------------  誘導リンク .lp-link-img */
.lp-link-img a {
  padding-top: 450px;
  background-size: 650px 450px;
}
/* ------------------------------------------  ピアノ教本ができるまで .seisaku */
.c-postContent.p-page__content.seisaku {
  padding: 20px 0;
  border-radius: 10px;
  line-height: 1.6;
}
.seisaku section {
  padding: 60px 40px 0;
  overflow: hidden;
  position: relative;
}
.seisaku section p {
  margin-bottom: 1em;
}
.seisaku .flexbox {
  clear: both;
  align-items: center;
  justify-content: space-between;
  margin-top: -80px;
}
.seisaku .flexbox p:first-child {
  flex: 0 1 40%;
}
.seisaku .flexbox:nth-of-type(even) p:first-child {
  margin-left: 20px;
}
/* ------------------------------------------  タイトル */
h2.seisaku-ttl {
  padding-top: 120px;
  background-size: 730px 120px;
}
.seisaku h3 {
  margin: 0 20px 0 0;
  padding: 100px 0 0 100px;
  width: 0;
  height: 0;
  float: left;
  overflow: hidden;
}
.seisaku h3::before {
  width: 100px;
  height: 100px;
  background-size: 110px 880px;
  z-index: 10;
}
.seisaku .seisaku1 h3::before {
  background-position: center top -5px;
}
.seisaku .seisaku2 h3::before {
  background-position: center top -115px;
}
.seisaku .seisaku3 h3::before {
  background-position: center top -225px;
}
.seisaku .seisaku4 h3::before {
  background-position: center top -335px;
}
.seisaku .seisaku5 h3::before {
  background-position: center top -445px;
}
.seisaku .seisaku6 h3::before {
  background-position: center top -555px;
}
.seisaku .seisaku7 h3::before {
  background-position: center top -665px;
}
.seisaku .seisaku8 h3::before {
  background-position: center top -775px;
}
/* ------------------------------------------  こんにちは .hello */
.hello {
  width: 650px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
}
/* ------------------------------------------  工程 .seisaku* */
.seisaku6 .imgbox {
  height: 300px;
}
.seisaku7 .imgbox {
  height: 300px;
}
.seisaku8 h3 + p {
  margin-top: 40px;
}
.seisaku8 .imgbox {
  margin-top: 100px;
  height: 350px;
}
.seisaku-img {
  width: 525px;
  height: 350px;
  background-size: 525px 4550px;
}
.flexbox .seisaku-img,
.seisaku6 .imgbox .seisaku-img ,
.seisaku7 .imgbox .seisaku-img {
  width: 375px;
  height: 250px;
  background-size: 375px 3250px;
}
.seisaku-img.no1 {
  background-position: left top;
}
.seisaku-img.no2 {
  background-position: left top -350px;
  position: relative;
  left: -60px;
}
.seisaku-img.no3 {
  background-position: left top -700px;
}
.seisaku-img.no4 {
  background-position: left top -750px;
}
.seisaku-img.no5 {
  background-position: left top -1000px;
}
.seisaku-img.no6 {
  background-position: left top -1250px;
}
.seisaku-img.no7 {
  background-position: left top -1500px;
}
.seisaku-img.no8 {
  background-position: left top -1750px;
}
.seisaku-img.no9 {
  background-position: left top -2000px;
}
.seisaku-img.no10 {
  background-position: left top -2250px;
}
.seisaku-img.no11 {
  background-position: left top -2500px;
}
.seisaku-img.no12 {
  background-position: left top -3850px;
}
.seisaku-img.no13 {
  margin: 0 auto;
  background-position: left bottom;
}
.seisaku-img.no12 + picture {
  width: 270px;
  height: 110px;
}
.seisaku5 .flexbox:nth-of-type(even) {
  flex-direction: row-reverse;
} 
.seisaku8 {
  background-size: 280px 230px;
}
.last .bgbox {
  background-position: right bottom -5px;
  background-size: 280px 420px;
}
.last .blnbox {
  padding-top: 0;
  background-position: left -20px center;
  background-size: 750px 220px;
}
.last .blnbox picture {
  position: relative;
  top: 2em;
}

}