@charset "UTF-8";
/* フォント定設
-----------------------------------------------------------------*/
@font-face {
  font-family: 'MyYuGothicM';
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
  /* 游ゴシックMediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuGothicM';
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic Bold");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: normal;
  src: local("YuMincho-Medium"), local("Yu Mincho Medium"), local("YuMincho-Regular");
  /* 游明朝Mediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: bold;
  src: local("YuMincho-Demibold"), local("Yu Mincho");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

/* イージング
-----------------------------------------------------------------*/
/* デュレーション
-----------------------------------------------------------------*/
/* 共通スタイル定設
-----------------------------------------------------------------*/
.freeareaContent {
  font-family: "Noto Sans JP", MyYuGothicM, "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .1em;
  color: #101010; }
  .freeareaContent img {
    max-width: 100%; }

body {
  width: 100%; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    body {
      content: "portrait"; } }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    body {
      content: "landscape"; } }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .scrollLock body {
      overflow: hidden; } }

a {
  text-decoration: none;
  color: inherit; }

button,
input[type="button"] {
  cursor: pointer; }

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.defs {
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute; }

@media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .dn-portrait {
    display: none !important; } }

@media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
  .dn-landscape {
    display: none !important; } }

@media print, screen and (max-width: 767px) {
  .dn-sp {
    display: none !important; } }

@media print, screen and (max-width: 1023px) {
  .dn-tab_sp {
    display: none !important; } }

@media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .dn-tab_l {
    display: none !important; } }

@media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .dn-tab_p {
    display: none !important; } }

/* フォント定設
-----------------------------------------------------------------*/
@font-face {
  font-family: 'MyYuGothicM';
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
  /* 游ゴシックMediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuGothicM';
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic Bold");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: normal;
  src: local("YuMincho-Medium"), local("Yu Mincho Medium"), local("YuMincho-Regular");
  /* 游明朝Mediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: bold;
  src: local("YuMincho-Demibold"), local("Yu Mincho");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

/* イージング
-----------------------------------------------------------------*/
/* デュレーション
-----------------------------------------------------------------*/
/*=============================================

	レイアウト

==============================================*/
/*=============================================

	ボタンパーツ

==============================================*/
/*=============================================

	タイトル

==============================================*/
/*=============================================

	おすすめバッジ

==============================================*/
/*=============================================

	スライダー　矢印

==============================================*/
/*=============================================

	メインビジュアル

==============================================*/
/*=============================================

	How to

==============================================*/
/*=============================================

	モーダル

==============================================*/
/*=============================================

	APP 導線

==============================================*/
/*=============================================

	商品ラインアップ

==============================================*/
/*=============================================

	見切れスライダー

==============================================*/
/*=============================================

	吹き出し

==============================================*/
/*=============================================

	吹き出し透明

==============================================*/
/*=============================================

	作り方スライダー

==============================================*/
/*=============================================

	作り方スライダー

==============================================*/
/* PC：可変幅 */
/* PC：固定幅1120px */
/* PC：固定幅1080px */
/* PC：固定幅1040px */
@media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .howto_body_inner {
    padding-left: 20px;
    padding-right: 20px; } }

@media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
  .howto_body_inner {
    max-width: 1160px;
    padding-left: 60px;
    padding-right: 60px;
    margin-left: auto;
    margin-right: auto; } }

@media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .howto_body_inner {
    padding-left: 50px;
    padding-right: 50px; } }

/* PC：固定幅880px */
/**************************************
#header
**************************************/
#header {
  position: relative;
  z-index: 9999; }

@media (max-width: 767px) {
  #headUtility {
    display: none; } }

/* フォント定設
-----------------------------------------------------------------*/
@font-face {
  font-family: 'MyYuGothicM';
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
  /* 游ゴシックMediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuGothicM';
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic Bold");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: normal;
  src: local("YuMincho-Medium"), local("Yu Mincho Medium"), local("YuMincho-Regular");
  /* 游明朝Mediumが存在しないWindows8.1用 */ }

@font-face {
  font-family: 'MyYuMinchoM';
  font-weight: bold;
  src: local("YuMincho-Demibold"), local("Yu Mincho");
  /* PostScript Nameを認識できないChrome用にFull Nameを指定 */ }

/* イージング
-----------------------------------------------------------------*/
/* デュレーション
-----------------------------------------------------------------*/
/*=============================================

	レイアウト

==============================================*/
/*=============================================

	ボタンパーツ

==============================================*/
/*=============================================

	タイトル

==============================================*/
/*=============================================

	おすすめバッジ

==============================================*/
/*=============================================

	スライダー　矢印

==============================================*/
/*=============================================

	メインビジュアル

==============================================*/
/*=============================================

	How to

==============================================*/
/*=============================================

	モーダル

==============================================*/
/*=============================================

	APP 導線

==============================================*/
/*=============================================

	商品ラインアップ

==============================================*/
/*=============================================

	見切れスライダー

==============================================*/
/*=============================================

	吹き出し

==============================================*/
/*=============================================

	吹き出し透明

==============================================*/
/*=============================================

	作り方スライダー

==============================================*/
/*=============================================

	作り方スライダー

==============================================*/
/* PC：可変幅 */
/* PC：固定幅1120px */
/* PC：固定幅1080px */
/* PC：固定幅1040px */
@media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .howto_body_inner {
    padding-left: 20px;
    padding-right: 20px; } }

@media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
  .howto_body_inner {
    max-width: 1160px;
    padding-left: 60px;
    padding-right: 60px;
    margin-left: auto;
    margin-right: auto; } }

@media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .howto_body_inner {
    padding-left: 50px;
    padding-right: 50px; } }

/* PC：固定幅880px */
.footer {
  position: relative; }

#main .breadcrumbs {
  display: block;
  background-color: #fff; }

.dn-tab_1080 {
  display: none !important; }
  @media (min-width: 1024px) and (max-width: 1115px) {
    .dn-tab_1080 {
      display: inline !important; } }

/*=============================================

  wrapper

==============================================*/
.wrapper {
  position: relative;
  margin-top: 0; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .wrapper {
      padding-bottom: 3.73%;
      margin-bottom: 226px; } }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .wrapper {
      padding-bottom: 3.82%;
      margin-bottom: 200px; } }

/*=============================================

  モーダル

==============================================*/
@media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .howto_modalArea_inner {
    padding: 32px 16px; } }

@media print, screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .howto_modalArea_inner {
    padding: 32px 46px; } }

@media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
  .howto_modalArea_inner {
    padding: 32px 44px; } }

.howtoModal_title {
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.3;
  color: #42ABB2;
  text-align: center;
  margin-bottom: 32px; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .howtoModal_title {
      font-size: 20px; } }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .howtoModal_title {
      font-size: 24px; } }

/*=============================================

  c-inview

==============================================*/
.c-inview {
  will-change: filter;
  -webkit-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
  -webkit-transition: opacity 0.6s, -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-filter 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.6s, -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-filter 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.6s, transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.6s, transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), filter 1.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-filter 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .c-inview.is-hide {
    opacity: 0;
    -webkit-filter: brightness(140%);
    filter: brightness(140%); }
    @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
      .c-inview.is-hide {
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0); } }
    @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
      .c-inview.is-hide {
        -webkit-transform: translate3d(0, 70px, 0);
        transform: translate3d(0, 70px, 0); } }

/*=============================================

  追従バナー

==============================================*/
.fixedBanner {
  position: fixed;
  margin: auto;
  -webkit-transition: .3s .2s;
  -o-transition: .3s .2s;
  transition: .3s .2s;
  z-index: 7777;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s ease, visibility .3s ease;
  -o-transition: opacity .3s ease, visibility .3s ease;
  transition: opacity .3s ease, visibility .3s ease; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .fixedBanner {
      width: 136px;
      bottom: 88px;
      right: 5px; } }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .fixedBanner {
      width: 203px;
      bottom: 40px;
      right: 40px; } }
  .fixedBanner.is-show {
    opacity: 1;
    visibility: visible; }

.fixedBanner_inner {
  position: relative; }

.fixedBanner_closeButton {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #101010;
  z-index: 2; }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .fixedBanner_closeButton {
      cursor: pointer; } }
  @media (hover: hover) {
    .fixedBanner_closeButton {
      -webkit-transition: -webkit-transform .35s ease;
      transition: -webkit-transform .35s ease;
      -o-transition: transform .35s ease;
      transition: transform .35s ease;
      transition: transform .35s ease, -webkit-transform .35s ease; }
      .fixedBanner_closeButton:hover {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg); } }

.fixedBanner_closeButton_inner {
  position: relative;
  width: 30px;
  height: 30px; }

.fixedBanner_closeButton_bar {
  position: absolute;
  display: block;
  width: 16px;
  height: 2px;
  background-color: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; }
  .fixedBanner_closeButton_bar:nth-child(1) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  .fixedBanner_closeButton_bar:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); }

@media (hover: hover) {
  .fixedBannerLink {
    -webkit-transition: opacity .35s ease;
    -o-transition: opacity .35s ease;
    transition: opacity .35s ease; }
    .fixedBannerLink:hover {
      opacity: .7; } }

@media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .fixedBannerLink_img {
    width: 136px; } }

@media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
  .fixedBannerLink_img {
    width: 203px; } }

.fixedBannerLink_img img {
  width: 100%; }

/*=============================================

	高級感のある本格上製本仕上げのフォトブックです。

==============================================*/
.introSection {
  text-align: center; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .introSection {
      margin-top: 16px; } }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .introSection {
      margin-top: 53px; } }

.intro_text {
  font-size: 15px;
  line-height: 2;
  margin-top: 24px;
  text-align: center; }

/********************************************

titleCenter

**********************************************/
@media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
  .c-titleCenter {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin-left: auto;
    margin-right: auto; } }

.c-textCenter {
  margin-top: 32px;
  margin-left: 0;
  line-height: 2; }
  @media print, screen and (min-width: 1024px) and (orientation: landscape), screen and (min-width: 1025px) {
    .c-textCenter {
      text-align: center; } }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .c-textCenter {
      margin-top: 24px; } }

/********************************************

breadcrumbs

**********************************************/
#main .breadcrumbs {
  margin-bottom: 25px !important; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    #main .breadcrumbs {
      display: block;
      background: transparent; } }

/*=============================================

	かんたん作成

==============================================*/
.howto {
  margin-top: 155px; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .howto {
      margin-top: 90px; } }

.howto_text {
  text-align: center;
  margin-top: 32px; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .howto_text {
      text-align: left;
      margin-top: 20px; } }

@media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .howto_title,
  .howto_text {
    padding-left: 20px;
    padding-right: 20px; } }

.howto_body {
  background-color: #F5F5F5;
  margin-top: 80px;
  padding: 64px 0; }
  @media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
    .howto_body {
      margin-top: 60px;
      padding: 40px 0; } }

@media print, screen and (max-width: 1023px), screen and (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {
  .howto_body_inner {
    padding-left: 35px;
    padding-right: 35px; } }