/* Variables
****************************************************************************/
/* Media Queries
****************************************************************************/
/* Utilities
****************************************************************************/
/*clearfix*/
/* set some element's line-height to 1em because of adjust text margin */
/*set fontfamily*/
/*@mixin font-lato {
	font-family: 'Lato', sans-serif;
}
@mixin font-lato-700 {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
}*/
/*@mixin font-montserrat {
	font-family: 'Montserrat', sans-serif;
}*/
/*
	#index.css
*/
/* Sec-Head
****************************************************************************/
.sec-head .head-container {
  background: #fff;
  position: relative;
  border-top: 3px solid #303030;
  border-bottom: 3px solid #303030;
  padding: 10px 0;
  height: 450px; }
  @media only screen and (max-width: 980px) {
    .sec-head .head-container {
      border: none;
      height: auto; } }

.sec-head .title {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 15px;
  width: 165px; }
  @media only screen and (min-width: 768px) and (max-width: 980px) {
    .sec-head .title {
      width: 260px; } }
  @media only screen and (min-width: 981px) {
    .sec-head .title {
      padding-top: 50px;
      width: 329px; } }

.sec-head .copy1, .sec-head .copy2 {
  text-align: center; }

.sec-head .copy1 {
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 15px 0 15px; }
  @media only screen and (max-width: 980px) {
    .sec-head .copy1 {
      width: 200px;
      margin-left: auto;
      margin-right: auto;
      background: url(../../vol3/img/head_copy1_sp.png) no-repeat;
      background-size: 200px 17px;
      height: 20px; } }
  @media only screen and (min-width: 768px) and (max-width: 980px) {
    .sec-head .copy1 {
      width: 250px;
      background-size: 250px auto; } }

.sec-head .copy2 {
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  margin: 10px 15px 0 15px; }
  @media only screen and (max-width: 980px) {
    .sec-head .copy2 {
      width: 143px;
      height: 29px;
      margin-bottom: 10px;
      margin-left: auto;
      margin-right: auto;
      background: url(../../vol3/img/head_copy2_sp.png) no-repeat;
      background-size: 143px 29px; } }
  @media only screen and (min-width: 768px) and (max-width: 980px) {
    .sec-head .copy2 {
      margin-top: 20px;
      width: 230px;
      height: 66px;
      background-size: 230px auto; } }

@media only screen and (min-width: 981px) {
  .sec-head .title {
    margin-top: 30px;
    width: 329px; }
  .sec-head .movie-container {
    width: 764px;
    height: 430px;
    float: left; }
  .sec-head .copy-container {
    position: absolute;
    right: 20px;
    top: 13px;
    width: 180px;
    height: 370px; }
    .sec-head .copy-container .copy1, .sec-head .copy-container .copy2 {
      text-indent: 110%;
      white-space: nowrap;
      overflow: hidden; }
    .sec-head .copy-container .copy1 {
      position: absolute;
      top: 10px;
      right: -13px;
      background: url(../../vol3/img/head_copy1.png) no-repeat;
      width: 73px;
      height: 345px; }
    .sec-head .copy-container .copy2 {
      position: absolute;
      right: 86px;
      top: 18px;
      background: url(../../vol3/img/head_copy2.png) no-repeat;
      width: 56px;
      height: 284px; } }

/* Sec01
****************************************************************************/
.sec01 {
  background: #fffdd5; }
  .sec01 .inner {
    background: url(../../vol3/img/sec01_snow_pattern.png) center top;
    border-bottom: 3px solid #fff; }
  .sec01 .comic-list {
    padding-bottom: 70px; }
  @media only screen and (max-width: 980px) {
    .sec01 .inner {
      padding-top: 30px; }
    .sec01 .comic-list .koma {
      /*text-align: center;*/
      margin-bottom: 10px;
      padding: 15px; }
    .sec01 .comic-list .koma:last-child {
      padding-bottom: 0;
      margin-bottom: 0; } }
  @media only screen and (min-width: 0px) and (max-width: 767px) {
    .sec01 .koma1 {
      text-align: right; }
      .sec01 .koma1 img {
        width: 306px; }
    .sec01 .koma2 {
      text-align: center;
      margin-top: 20px;
      margin-right: -10px;
      margin-bottom: 20px; }
      .sec01 .koma2 img {
        width: 96px; }
    .sec01 .koma3 {
      text-align: center; }
      .sec01 .koma3 img {
        width: 290px; }
    .sec01 .koma4 {
      text-align: left;
      margin-top: -30px; }
      .sec01 .koma4 img {
        width: 290px; }
    .sec01 .koma5 {
      margin-top: -30px;
      text-align: right; }
      .sec01 .koma5 img {
        width: 225px; }
    .sec01 .koma6 {
      text-align: center;
      margin-left: -20px; }
      .sec01 .koma6 img {
        width: 270px; }
    .sec01 .koma7 {
      margin-top: -20px;
      text-align: left; }
      .sec01 .koma7 img {
        width: 177px; }
    .sec01 .koma8 {
      margin-top: -20px;
      text-align: center; }
      .sec01 .koma8 img {
        width: 245px; } }
  @media only screen and (min-width: 768px) and (max-width: 980px) {
    .sec01 .comic-list .koma {
      text-align: center; }
      .sec01 .comic-list .koma img {
        max-width: 400px; } }
  @media only screen and (min-width: 981px) {
    .sec01 {
      margin-top: -116px; }
      .sec01 .inner {
        padding-top: 178px;
        height: 1500px; }
      .sec01 .comic-list {
        height: 1302px;
        position: relative;
        width: 980px;
        margin-left: auto;
        margin-right: auto;
        background: url(../../vol3/img/sec01_route.png) no-repeat left 137px top 273px; }
        .sec01 .comic-list .koma {
          position: absolute;
          opacity: 0;
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
          -webkit-transition-duration: 0.6s;
                  transition-duration: 0.6s;
          -webkit-transform: translateY(40px);
                  transform: translateY(40px); }
          .sec01 .comic-list .koma.scroll-in {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            -webkit-transform: translateY(0);
                    transform: translateY(0); }
          .sec01 .comic-list .koma.scroll-in-zoom {
            -webkit-animation: zoom-anime 1.3s;
                    animation: zoom-anime 1.3s;
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            -webkit-transform: translateY(0);
                    transform: translateY(0); }
    @-webkit-keyframes zoom-anime {
      0% {
        -webkit-transform: scale(0);
                transform: scale(0); }
      20% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2); }
      40% {
        -webkit-transform: scale(0.7);
                transform: scale(0.7); }
      60% {
        -webkit-transform: scale(1.1);
                transform: scale(1.1); }
      80% {
        -webkit-transform: scale(0.9);
                transform: scale(0.9); }
      100% {
        -webkit-transform: scale(1);
                transform: scale(1); } }
    @keyframes zoom-anime {
      0% {
        -webkit-transform: scale(0);
                transform: scale(0); }
      20% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2); }
      40% {
        -webkit-transform: scale(0.7);
                transform: scale(0.7); }
      60% {
        -webkit-transform: scale(1.1);
                transform: scale(1.1); }
      80% {
        -webkit-transform: scale(0.9);
                transform: scale(0.9); }
      100% {
        -webkit-transform: scale(1);
                transform: scale(1); } }
        .sec01 .comic-list .koma1 {
          top: 20px;
          right: 20px; }
          .sec01 .comic-list .koma1 img {
            width: 371px;
            height: auto; }
        .sec01 .comic-list .koma2 {
          top: 140px;
          left: 460px; }
          .sec01 .comic-list .koma2 img {
            width: 119px;
            height: auto; }
        .sec01 .comic-list .koma3 {
          top: 65px;
          left: 45px; }
          .sec01 .comic-list .koma3 img {
            width: 402px;
            height: auto; }
        .sec01 .comic-list .koma4 {
          top: 476px;
          left: 4px; }
          .sec01 .comic-list .koma4 img {
            width: 364px;
            height: auto; }
        .sec01 .comic-list .koma5 {
          top: 574px;
          left: 304px; }
          .sec01 .comic-list .koma5 img {
            width: 277px;
            height: auto; }
        .sec01 .comic-list .koma6 {
          top: 643px;
          right: 20px; }
          .sec01 .comic-list .koma6 img {
            width: 325px;
            height: auto; }
        .sec01 .comic-list .koma7 {
          top: 840px;
          left: 446px; }
          .sec01 .comic-list .koma7 img {
            width: 215px;
            height: auto; }
        .sec01 .comic-list .koma8 {
          top: 875px;
          left: 42px; }
          .sec01 .comic-list .koma8 img {
            width: 302px;
            height: auto; } }

/* Sec02
****************************************************************************/
.sec02 {
  position: relative; }
  .sec02:before {
    position: absolute;
    top: -200px;
    width: 100%;
    height: 200px;
    content: "";
    background: url(../../vol3/img/sec02_haed_mask.png) repeat-x center bottom;
    background-size: auto; }
  .sec02 .sec-head {
    padding-top: 40px;
    position: relative; }
    .sec02 .sec-head .title {
      text-indent: 110%;
      white-space: nowrap;
      overflow: hidden;
      width: 230px;
      height: 160px;
      margin-bottom: 0 !important;
      background: url(../../vol3/img/sec02_title_p01.png) no-repeat center top;
      background-size: contain; }
    @media only screen and (min-width: 0px) and (max-width: 767px) {
      .sec02 .sec-head {
        padding-top: 0; }
        .sec02 .sec-head .title {
          width: auto;
          background: url(../../vol3/img/sec02_title_p01_sp.png) no-repeat center top;
          background-size: 300px auto; }
          .sec02 .sec-head .title img {
            display: none; } }
    @media only screen and (min-width: 768px) and (max-width: 980px) {
      .sec02 .sec-head {
        margin-bottom: 30px; }
        .sec02 .sec-head .title {
          width: 300px;
          height: 200px; } }
    @media only screen and (min-width: 981px) {
      .sec02 .sec-head {
        width: 980px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px; }
        .sec02 .sec-head .title {
          width: 980px;
          height: 264px;
          position: relative; }
          .sec02 .sec-head .title:before, .sec02 .sec-head .title:after {
            position: absolute;
            width: 217px;
            content: "";
            height: 108px;
            background: url(../../vol3/img/sec02_title_p02.png) no-repeat center top; }
          .sec02 .sec-head .title:before {
            top: 80px;
            left: 100px; }
          .sec02 .sec-head .title:after {
            top: 74px;
            right: 84px;
            background: url(../../vol3/img/sec02_title_p03.png) no-repeat center top; } }
  .sec02 .visual01 {
    position: relative; }
    @media only screen and (max-width: 980px) {
      .sec02 .visual01 {
        background: url(../../vol3/img/sec02_visual01_sp.jpg) no-repeat center center;
        background-size: cover; }
        .sec02 .visual01:before {
          display: block;
          content: "";
          padding-top: 100%; }
        .sec02 .visual01 .copy {
          position: absolute;
          top: 40px;
          left: calc(50% - 29px);
          width: 58px; }
          .sec02 .visual01 .copy img {
            width: 100%; } }
    @media only screen and (min-width: 981px) {
      .sec02 .visual01 {
        height: 600px;
        background: url(../../vol3/img/sec02_visual01.jpg) no-repeat center center;
        background-size: cover; }
        .sec02 .visual01 .copy {
          position: absolute;
          top: 90px;
          left: 67%; } }
  .sec02 .list-wrapper {
    background: url(../../vol3/img/bg_pattern2.png); }
    @media only screen and (min-width: 981px) {
      .sec02 .list-wrapper {
        padding-top: 60px;
        padding-bottom: 15px; } }
  .sec02 .how-to-area {
    position: relative; }
  .sec02 .howto-list {
    margin-top: 40px;
    padding-bottom: 20px; }
    .sec02 .howto-list .title {
      width: 260px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px; }
      .sec02 .howto-list .title img {
        width: 100%; }
    @media only screen and (min-width: 0px) and (max-width: 767px) {
      .sec02 .howto-list .title {
        margin-top: 30px; } }
    @media only screen and (max-width: 980px) {
      .sec02 .howto-list {
        padding: 10px; } }
    @media only screen and (min-width: 981px) {
      .sec02 .howto-list {
        width: 980px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 60px;
        padding-bottom: 0; }
        .sec02 .howto-list .title {
          width: 294px;
          position: relative;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 36px; }
          .sec02 .howto-list .title:before {
            position: absolute;
            content: "";
            width: 277px;
            height: 250px;
            top: -72px;
            left: -304px;
            background: url(../../vol3/img/sec02_howto_tit_p01.png) no-repeat; } }
  .sec02 .bg-obj {
    overflow: visible;
    top: 0;
    left: 0;
    display: none; }
    .sec02 .bg-obj img {
      position: absolute; }
    .sec02 .bg-obj .obj1 {
      top: 0;
      left: calc(50% - 540px); }
    .sec02 .bg-obj .obj2 {
      top: 0;
      left: calc(50% + 490px); }
    .sec02 .bg-obj .obj3 {
      top: 380px;
      left: calc(50% - 690px); }
    .sec02 .bg-obj .obj4 {
      top: 330px;
      left: calc(50% + 670px); }
    .sec02 .bg-obj .obj5 {
      top: 840px;
      left: calc(50% - 640px); }
    .sec02 .bg-obj .obj6 {
      top: 690px;
      left: calc(50% + 550px); }
    .sec02 .bg-obj .obj7 {
      top: 1040px;
      left: calc(50% + 690px); }
    .sec02 .bg-obj .obj8 {
      top: 1260px;
      left: calc(50% - 720px); }
    .sec02 .bg-obj .obj9 {
      top: 1470px;
      left: calc(50% + 530px); }
    @media only screen and (min-width: 981px) {
      .sec02 .bg-obj {
        display: block; } }
  .sec02 .howto-item {
    background: #fff;
    position: relative;
    z-index: 1;
    border: 2px solid #333;
    /*howto-item Touch*/
    /*howto-item PC*/ }
    .sec02 .howto-item .txt-box .sub-tit {
      font-weight: bold;
      font-size: 25.6px;
      font-size: 1.6rem;
      margin-bottom: 15px; }
    .sec02 .howto-item .txt-box .main-tit {
      font-size: 41.6px;
      font-size: 2.6rem;
      font-weight: bold;
      margin-bottom: 15px; }
      .sec02 .howto-item .txt-box .main-tit span {
        display: inline-block;
        margin-right: 11.2px;
        margin-right: 0.7rem; }
    .sec02 .howto-item .txt-box .read {
      font-size: 24px;
      font-size: 1.5rem;
      margin-bottom: 20px; }
    .sec02 .howto-item .txt-box .material-box {
      padding: 15px 0;
      border-top: 2px solid #dadada;
      border-bottom: 2px solid #dadada;
      margin-bottom: 20px; }
      .sec02 .howto-item .txt-box .material-box:after {
        content: "";
        clear: both;
        display: block; }
      .sec02 .howto-item .txt-box .material-box .tit {
        float: left;
        width: 100px;
        font-size: 25.6px;
        font-size: 1.6rem;
        font-weight: bold; }
      .sec02 .howto-item .txt-box .material-box .cnt {
        float: right;
        width: 450px; }
        .sec02 .howto-item .txt-box .material-box .cnt .container:after {
          content: "";
          clear: both;
          display: block; }
        .sec02 .howto-item .txt-box .material-box .cnt .container .p-img {
          width: 70px;
          float: left; }
        .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt {
          width: 380px; }
          .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt h4 {
            font-size: 25.6px;
            font-size: 1.6rem;
            line-height: 1.3em;
            font-weight: bold;
            text-decoration: underline; }
            .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt h4 span {
              font-size: 20px;
              font-size: 1.25rem;
              font-weight: normal; }
          .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt a:link, .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt a:visited, .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt a:active {
            text-decoration: none; }
          .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt a:hover h4 {
            text-decoration: none; }
        .sec02 .howto-item .txt-box .material-box .cnt .container .p-num {
          font-weight: bold;
          font-size: 20px;
          font-size: 1.25rem;
          margin-top: 5px; }
        .sec02 .howto-item .txt-box .material-box .cnt .tools {
          font-size: 24px;
          font-size: 1.5rem;
          font-weight: bold;
          margin-top: 10px; }
    .sec02 .howto-item .txt-box .making-box .tit {
      font-size: 25.6px;
      font-size: 1.6rem;
      font-weight: bold; }
    .sec02 .howto-item .txt-box .making-box ul:after {
      content: "";
      clear: both;
      display: block; }
    .sec02 .howto-item .txt-box .making-box li:after {
      content: "";
      clear: both;
      display: block; }
    .sec02 .howto-item .txt-box .making-box li .num {
      width: 22px;
      font-size: 24px;
      font-size: 1.5rem;
      font-weight: bold;
      display: block;
      float: left;
      text-align: center;
      padding-bottom: 4px;
      border-bottom: 2px solid #333; }
    .sec02 .howto-item .txt-box .making-box li .txt {
      float: right;
      font-size: 24px;
      font-size: 1.5rem; }
    .sec02 .howto-item .photo-box {
      position: relative;
      margin: 15px;
      padding: 10px; }
    @media only screen and (max-width: 980px) {
      .sec02 .howto-item {
        margin: 15px;
        padding: 10px;
        position: relative;
        margin-left: auto;
        margin-right: auto; }
        .sec02 .howto-item .txt-box .sub-tit {
          font-size: 1.1rem;
          line-height: 1.2em;
          margin-bottom: 6px;
          padding-right: 85px; }
        .sec02 .howto-item .txt-box .main-tit {
          font-size: 1.5rem;
          margin-bottom: 10px;
          line-height: 1.2em;
          padding-right: 85px; }
          .sec02 .howto-item .txt-box .main-tit span {
            width: 20px; }
            .sec02 .howto-item .txt-box .main-tit span img {
              width: 100%; }
        .sec02 .howto-item .txt-box .read {
          font-size: 1.0rem;
          padding-right: 85px; }
        .sec02 .howto-item .txt-box .material-box {
          margin-bottom: 10px; }
          .sec02 .howto-item .txt-box .material-box .tit {
            font-size: 1.2rem;
            margin-bottom: 10px;
            width: 70px; }
          .sec02 .howto-item .txt-box .material-box .cnt {
            width: calc(100% - 70px); }
            .sec02 .howto-item .txt-box .material-box .cnt .container:after {
              content: "";
              clear: both;
              display: block; }
            .sec02 .howto-item .txt-box .material-box .cnt .container .p-img {
              width: auto;
              padding-right: 7px; }
            .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt {
              width: auto; }
              .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt h4 {
                font-size: 1.2rem; }
                .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt h4 span {
                  font-size: 1.0rem; }
            .sec02 .howto-item .txt-box .material-box .cnt .container .p-num {
              font-weight: bold;
              font-size: 1.1rem;
              margin-top: 5px; }
            .sec02 .howto-item .txt-box .material-box .cnt .tools {
              font-size: 1.2rem;
              font-weight: bold;
              margin-top: 10px; }
        .sec02 .howto-item .txt-box .making-box .tit {
          font-size: 1.2rem;
          margin-bottom: 10px; }
        .sec02 .howto-item .txt-box .making-box ul:after {
          content: "";
          clear: both;
          display: block; }
        .sec02 .howto-item .txt-box .making-box li {
          margin-bottom: 8px; }
          .sec02 .howto-item .txt-box .making-box li:after {
            content: "";
            clear: both;
            display: block; }
          .sec02 .howto-item .txt-box .making-box li .num {
            width: 14px;
            font-size: 1.1rem; }
          .sec02 .howto-item .txt-box .making-box li .txt {
            width: calc(100% - 26px);
            font-size: 1.3rem; }
        .sec02 .howto-item .photo-box {
          position: absolute;
          margin: 0;
          padding: 0;
          top: -5px;
          right: -5px;
          text-align: center;
          max-width: 140px;
          margin-left: auto;
          margin-right: auto; }
          .sec02 .howto-item .photo-box img {
            width: 100px; }
          .sec02 .howto-item .photo-box img.small-img {
            width: 60px;
            position: absolute;
            top: -10px;
            left: -20px; }
        .sec02 .howto-item .btn-download {
          display: none; }
        .sec02 .howto-item .btn-download2 {
          margin-top: 10px;
          z-index: 1;
          position: relative; }
          .sec02 .howto-item .btn-download2 a {
            display: block;
            border: 2px solid #333;
            width: 260px;
            height: 50px;
            margin-left: auto;
            margin-right: auto;
            background: #26c3d1; }
            .sec02 .howto-item .btn-download2 a span {
              display: block;
              width: 256px;
              height: 46px;
              text-indent: 110%;
              white-space: nowrap;
              overflow: hidden;
              background: url(../../vol3/img/sec02_btn_download.png) no-repeat center center;
              background-size: 240px auto; }
          .sec02 .howto-item .btn-download2 a:hover span {
            -webkit-animation: download-hover 0.8s;
                    animation: download-hover 0.8s;
            -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
                    animation-timing-function: linear; } }
    @media only screen and (min-width: 768px) and (max-width: 980px) {
      .sec02 .howto-item {
        margin: 40px 15px; }
        .sec02 .howto-item .txt-box .sub-tit {
          font-weight: bold;
          font-size: 1.6rem;
          margin-top: 10px;
          margin-bottom: 10px; }
        .sec02 .howto-item .txt-box .main-tit {
          font-size: 2.6rem;
          font-weight: bold;
          margin-bottom: 15px; }
          .sec02 .howto-item .txt-box .main-tit span {
            width: auto;
            line-height: 1.4em; }
        .sec02 .howto-item .txt-box .read {
          font-size: 1.5rem;
          margin-bottom: 20px; }
        .sec02 .howto-item .txt-box .material-box .tit {
          font-size: 1.6rem; }
        .sec02 .howto-item .txt-box .material-box .cnt {
          float: right;
          width: 550px; }
          .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt h4 {
            font-size: 1.6rem;
            line-height: 1.3em; }
            .sec02 .howto-item .txt-box .material-box .cnt .container .p-txt h4 span {
              font-size: 1.25rem;
              font-weight: normal; }
          .sec02 .howto-item .txt-box .material-box .cnt .container .p-num {
            font-size: 1.25rem; }
          .sec02 .howto-item .txt-box .material-box .cnt .tools {
            font-size: 1.5rem; }
        .sec02 .howto-item .txt-box .making-box .tit {
          font-size: 1.6rem; }
        .sec02 .howto-item .txt-box .making-box li .num {
          width: 22px;
          font-size: 1.5rem;
          font-weight: bold; }
        .sec02 .howto-item .txt-box .making-box li .txt {
          float: right;
          font-size: 1.5rem; }
        .sec02 .howto-item .btn-download2 {
          margin: 20px 0; }
        .sec02 .howto-item .photo-box {
          max-width: 240px;
          margin-left: auto;
          margin-right: auto;
          right: -10px;
          top: -10px; }
          .sec02 .howto-item .photo-box img {
            width: 240px; }
          .sec02 .howto-item .photo-box img.small-img {
            width: 120px;
            position: absolute;
            top: -10px;
            left: -50px; } }
    @media only screen and (min-width: 981px) {
      .sec02 .howto-item {
        width: 960px;
        margin: 0 10px 30px 10px;
        padding: 30px 30px 60px 30px; }
        .sec02 .howto-item:after {
          content: "";
          clear: both;
          display: block; }
        .sec02 .howto-item .txt-box {
          float: left;
          width: 550px; }
          .sec02 .howto-item .txt-box .making-box ul {
            margin-top: 20px; }
            .sec02 .howto-item .txt-box .making-box ul:after {
              content: "";
              clear: both;
              display: block; }
          .sec02 .howto-item .txt-box .making-box li {
            float: left;
            width: 170px;
            margin-right: 20px;
            margin-bottom: 20px; }
            .sec02 .howto-item .txt-box .making-box li .txt {
              width: 135px; }
          .sec02 .howto-item .txt-box .making-box li:nth-child(3n) {
            margin-right: 0; }
        .sec02 .howto-item .photo-box {
          float: right;
          width: 340px;
          margin: -40px 0 0 0;
          padding: 0; }
          .sec02 .howto-item .photo-box .small-img {
            position: absolute;
            left: -80px;
            top: 0; }
        .sec02 .howto-item .btn-download {
          margin-top: -40px;
          margin-left: 38px;
          z-index: 1;
          position: relative; }
          .sec02 .howto-item .btn-download a {
            display: block;
            text-align: center;
            width: 303px;
            padding: 2px 3px;
            box-sizing: border-box;
            height: 74px;
            border: 2px solid #000;
            background: #fff;
            line-height: 50px;
            -webkit-perspective: 300px;
                    perspective: 300px;
            -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d; }
            .sec02 .howto-item .btn-download a span {
              display: block;
              height: 70px;
              text-indent: 110%;
              white-space: nowrap;
              overflow: hidden;
              background: url(../../vol3/img/sec02_btn_download.png) no-repeat center center;
              background-size: contain; }
          .sec02 .howto-item .btn-download a:hover span {
            background-image: url(../../vol3/img/sec02_btn_download2.png); }
          .sec02 .howto-item .btn-download a:before,
          .sec02 .howto-item .btn-download a:after {
            position: absolute;
            z-index: -1;
            display: block;
            content: ''; }
          .sec02 .howto-item .btn-download a:after {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #26c3d1;
            -webkit-transform-origin: center bottom;
                    transform-origin: center bottom;
            -webkit-transform: rotateX(0);
                    transform: rotateX(0); }
          .sec02 .howto-item .btn-download a:hover:after {
            -webkit-transform: rotateX(-180deg);
                    transform: rotateX(-180deg); }
          .sec02 .howto-item .btn-download a,
          .sec02 .howto-item .btn-download a:before,
          .sec02 .howto-item .btn-download a:after {
            box-sizing: border-box;
            -webkit-transition: all .3s;
            transition: all .3s; }
        .sec02 .howto-item .btn-download-td {
          display: none; } }

/* Sec03
****************************************************************************/
.sec03 .tit {
  background: url(../../vol3/img/sec03_title_p01.png) no-repeat left top;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 20px; }
  @media only screen and (max-width: 980px) {
    .sec03 .tit {
      width: 300px;
      height: 78px; } }
  @media only screen and (min-width: 981px) {
    .sec03 .tit {
      width: 435px;
      height: 112px; } }

.sec03 .visual {
  border: 6px solid #000;
  margin: 0 15px; }

.sec03 .copy {
  text-align: center;
  margin: 0 0 20px 0; }

.sec03 .copy2 {
  font-size: 20.8px;
  font-size: 1.3rem;
  text-align: center; }

.sec03 .btn-detail {
  width: 240px;
  margin-left: auto;
  margin-right: auto; }
  .sec03 .btn-detail a:link {
    text-decoration: none; }
  .sec03 .btn-detail a:hover {
    text-decoration: none; }
  .sec03 .btn-detail a:visited {
    text-decoration: none; }
  .sec03 .btn-detail a {
    font-weight: bold;
    display: block;
    border: 2px solid #333;
    padding: 14px 20px;
    text-align: center; }
    .sec03 .btn-detail a span {
      display: inline-block;
      line-height: 1em;
      padding-left: 20px;
      background: url(img/arrow_a.png) no-repeat left center;
      background-size: 12px 12px; }
  .sec03 .btn-detail img {
    width: 100%; }

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .sec03 {
    padding-top: 30px;
    padding-bottom: 30px; }
    .sec03 .visual {
      margin: 15px;
      padding: 20px; }
    .sec03 .copy {
      margin: 10px 0; }
      .sec03 .copy img {
        width: 100%; }
    .sec03 .copy2 {
      line-height: 1.7em;
      margin-bottom: 20px; }
    .sec03 .product-name-sp {
      font-size: 1.3rem;
      font-weight: bold;
      margin-bottom: 15px;
      text-align: center; }
      .sec03 .product-name-sp .sub1 {
        font-size: 1.1rem; }
      .sec03 .product-name-sp .sub2 {
        font-weight: normal; }
    .sec03 .box-photo {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20px; }
      .sec03 .box-photo img {
        width: 100%; }
    .sec03 .box-text p {
      font-size: 1.3rem;
      margin-bottom: 10px; }
    .sec03 .box-text .spec {
      margin-bottom: 20px; }
    .sec03 .product-name {
      display: none; }
    .sec03 .btn-detail {
      font-size: 1.3rem;
      background-size: 12px 12px; } }

@media print, screen and (min-width: 768px) and (max-width: 9999px) {
  .sec03 {
    padding-top: 90px;
    padding-bottom: 100px; }
    .sec03 .visual {
      margin-left: auto;
      margin-right: auto; }
    .sec03 .copy {
      text-align: center;
      margin: 40px 0 20px 0; }
    .sec03 .copy2 {
      font-size: 1.8rem;
      line-height: 1.75em; }
    .sec03 .product-name-sp {
      display: none; }
    .sec03 .cnt {
      padding: 20px 40px 40px 40px; }
      .sec03 .cnt:after {
        content: "";
        clear: both;
        display: block; }
      .sec03 .cnt .box-photo {
        width: 300px;
        float: left; }
      .sec03 .cnt .box-text {
        width: 560px;
        float: right; }
        .sec03 .cnt .box-text .product-name {
          font-weight: bold;
          font-size: 2.0rem;
          line-height: 1.3em;
          margin-bottom: 16px; }
          .sec03 .cnt .box-text .product-name .sub1 {
            font-size: 1.5rem; }
          .sec03 .cnt .box-text .product-name .sub2 {
            font-size: 1.4rem;
            font-weight: normal; }
        .sec03 .cnt .box-text p {
          font-size: 1.5rem;
          margin-bottom: 14px;
          line-height: 1.6em; }
        .sec03 .cnt .box-text .spec {
          font-size: 1.25rem;
          font-weight: bold;
          margin-bottom: 26px; }
    .sec03 .btn-detail {
      margin-left: auto;
      width: 100%; }
      .sec03 .btn-detail a {
        width: 296px;
        margin-left: auto;
        margin-right: 0; } }

@media only screen and (min-width: 768px) and (max-width: 980px) {
  .sec03 .visual {
    width: calc(100% - 40px); }
  .sec03 .copy2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto; }
  .sec03 .cnt .box-text {
    width: 300px; } }

.sec04 {
  background: #f5f5f5; }
  .sec04 .list-container {
    background-color: #f5f5f5;
    padding: 5px 15px 30px 15px; }
    .sec04 .list-container table {
      width: 100%; }
    .sec04 .list-container .list_title {
      text-align: center;
      font-weight: bold;
      font-size: 24px;
      font-size: 1.5rem;
      margin-bottom: 10px; }
    .sec04 .list-container .cell1, .sec04 .list-container .cell2, .sec04 .list-container .cell3 {
      text-align: center;
      padding: 16px 0; }
    .sec04 .list-container .btn-download {
      -webkit-transition-duration: 0.2s;
              transition-duration: 0.2s; }
      .sec04 .list-container .btn-download:hover {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
    .sec04 .list-container .list_dl dt {
      margin-right: 12px;
      width: 214px;
      text-align: center; }
    .sec04 .list-container .list_dl dd {
      font-size: 22.4px;
      font-size: 1.4rem;
      margin-top: 10px; }
    .sec04 .list-container dl.top_box {
      margin-bottom: 19px; }
    @media only screen and (max-width: 980px) {
      .sec04 .list-container {
        padding: 5px 0 30px 0; }
        .sec04 .list-container .list_dl dt {
          margin-left: auto;
          margin-right: auto; }
        .sec04 .list-container .list_dl dd span {
          display: inline-block;
          margin-bottom: 10px; }
        .sec04 .list-container .list_dl .btn-download {
          display: block;
          text-indent: 110%;
          white-space: nowrap;
          overflow: hidden;
          background: url(img/list_btn_sp.gif) no-repeat;
          background-size: contain;
          margin-left: auto;
          margin-right: auto;
          width: 290px;
          height: 50px; }
        .sec04 .list-container .list_title {
          font-size: 1.8rem; }
        .sec04 .list-container .list_sample {
          margin-bottom: 10px; }
        .sec04 .list-container table th, .sec04 .list-container table td {
          display: block;
          margin-right: 15px;
          margin-left: 15px;
          float: left \9; }
        .sec04 .list-container table tr {
          border-bottom: 2px solid #dedede; }
        .sec04 .list-container table td {
          border-top: 1px dotted #dedede; }
        .sec04 .list-container table td:first-child {
          border: none; } }
    @media only screen and (min-width: 981px) {
      .sec04 .list-container {
        padding: 60px 0 128px 0; }
        .sec04 .list-container table {
          width: 100%; }
          .sec04 .list-container table td {
            border-bottom: 1px solid #dedede;
            border-right: 1px solid #dedede;
            vertical-align: middle;
            padding: 30px 0; }
          .sec04 .list-container table .cell1, .sec04 .list-container table .cell2, .sec04 .list-container table .cell3 {
            padding: 0;
            padding-top: 30px;
            padding-bottom: 30px; }
          .sec04 .list-container table .cell1 {
            width: 245px;
            padding-left: 15px;
            vertical-align: bottom;
            text-align: left; }
          .sec04 .list-container table .cell2 {
            vertical-align: bottom; }
            .sec04 .list-container table .cell2 span {
              display: inline-block;
              font-size: 1.4rem;
              margin-bottom: 10px; }
          .sec04 .list-container table .cell3 {
            padding-left: 16px;
            width: 270px;
            border-right: none;
            vertical-align: bottom; }
          .sec04 .list-container table .vmiddle {
            vertical-align: middle;
            padding-top: 80px; }
          .sec04 .list-container table .vmiddle2 {
            vertical-align: middle; }
        .sec04 .list-container .list_title {
          text-align: left;
          font-size: 1.6rem;
          margin-bottom: 20px; }
        .sec04 .list-container .list_dl dt,
        .sec04 .list-container .list_dl dd {
          display: inline-block;
          vertical-align: bottom;
          text-align: left; }
        .sec04 .list-container .list_dl dt {
          text-align: center; }
        .sec04 .list-container .list_dl dd a {
          margin-top: 10px; }
        .sec04 .list-container .list_dl .btn-download {
          display: block;
          text-indent: 110%;
          white-space: nowrap;
          overflow: hidden;
          background: url(img/list_btn.gif) no-repeat;
          width: 195px;
          height: 41px; }
        .sec04 .list-container dl.top_box {
          margin-bottom: 19px; } }
  .sec04 .cell3 > a:link, .sec04 .cell3 > a:hover, .sec04 .cell3 > a:visited {
    text-decoration: none; }
  .sec04 .list_sample dt, .sec04 .list_sample dd {
    display: inline-block;
    vertical-align: top; }
    .sec04 .list_sample dt p, .sec04 .list_sample dd p {
      text-align: left; }
    .sec04 .list_sample dt .p-tit, .sec04 .list_sample dd .p-tit {
      font-size: 22.4px;
      font-size: 1.4rem;
      line-height: 1.3em;
      font-weight: bold; }
      .sec04 .list_sample dt .p-tit span, .sec04 .list_sample dd .p-tit span {
        font-size: 20px;
        font-size: 1.25rem;
        font-weight: normal; }
    .sec04 .list_sample dt .p-num, .sec04 .list_sample dd .p-num {
      font-weight: bold;
      font-size: 20px;
      font-size: 1.25rem;
      margin-top: 5px;
      margin-bottom: 7px; }
    .sec04 .list_sample dt .link-detail, .sec04 .list_sample dd .link-detail {
      font-size: 20px;
      font-size: 1.25rem;
      background: url(img/arrow_a.png) no-repeat left center;
      background-size: 12px 12px;
      text-decoration: underline;
      padding-left: 18px; }
      .sec04 .list_sample dt .link-detail:hover, .sec04 .list_sample dd .link-detail:hover {
        text-decoration: none; }
  .sec04 .list_sample dt {
    padding-right: 8px; }
  .sec04 .list_sample dd {
    font-size: 13px;
    line-height: 150%; }

/* YTB Movie
****************************************************************************/
#movie01 {
  position: absolute;
  /*left: 6px;*/
  top: 7px;
  width: 764px;
  height: 430px; }
  @media only screen and (max-width: 980px) {
    #movie01 {
      position: relative;
      width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
      left: 0; }
      #movie01:before {
        content: "";
        display: block;
        padding-top: 55%; } }

#movie01 .movBox {
  left: 0;
  top: 0; }

#movie01 .button img,
#movie02 .button img {
  width: 101px; }
  @media only screen and (min-width: 0px) and (max-width: 767px) {
    #movie01 .button img,
    #movie02 .button img {
      width: 60px; } }

#movie01, #movie02 {
  box-sizing: border-box; }

@media print, screen and (min-width: 768px) and (max-width: 9999px) {
  #movie01 .thumbnail:before,
  #movie02 .thumbnail:before {
    content: "";
    border: 5px solid #26b7c1;
    background: rgba(255, 255, 255, 0.2);
    width: 754px;
    height: 420px;
    position: absolute;
    display: none; } }

#movie01:hover .button,
#movie02:hover .button {
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }

#movie01:hover .thumbnail:before,
#movie02:hover .thumbnail:before {
  display: block; }

#movie02 {
  position: relative;
  width: 764px;
  height: 430px;
  margin: 0 auto; }
  @media only screen and (max-width: 980px) {
    #movie02 {
      position: relative;
      width: 100%;
      height: auto;
      margin: 0;
      padding: 0;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      border-top: 2px solid #333;
      border-bottom: 2px solid #333; }
      #movie02:before {
        content: "";
        display: block;
        padding-top: 56.4%; } }
  #movie02 .movBox {
    top: 0; }

.ytp-thumbnail-overlay-image {
  background-size: 40% !important; }

/* common movie */
.movBox {
  position: absolute;
  left: 0;
  top: 36px;
  width: 100%;
  height: 100%; }
  .movBox .thumbnail {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none; }
    .movBox .thumbnail img {
      width: 100%;
      height: auto; }
  .movBox iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }
  .movBox .button {
    position: absolute;
    left: 0;
    top: 0;
    display: table;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    pointer-events: none; }
    .movBox .button a {
      display: table-cell;
      text-align: center;
      vertical-align: middle; }
    .movBox .button img {
      filter: alpha(opacity=80);
      -moz-opacity: 0.80;
      opacity: 0.80;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      width: 25%;
      height: auto; }
  .movBox .ytFrame {
    z-index: 1;
    transform: translateZ(0px);
    -moz-transform: translateZ(0px);
    -webkit-transform: translateZ(0px);
    -o-transform: translateZ(0px);
    -ms-transform: translateZ(0px); }

.scroll-in-obj {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  .scroll-in-obj.scroll-in {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-transform: translateY(0);
            transform: translateY(0); }