@charset "UTF-8";
/*
  http://tsumugu.saltworks.jp/
  INDEX CSS
  MarkUp -> dice
  LAST UPDATE
  - 2017.09.12 製作開始 (dice)
--------------------------------------------------------------*/

/* メインビジュアル */

#main{
  background:url(/index/images/main/bg_mainbase.png) no-repeat top center;
  height:546px;
  overflow:hidden;
  position:relative;
}
@media screen and (min-width: 1600px) {
  #main{
    background:url(/index/images/main/bg_mainbase.png) no-repeat top center;
    background-size:cover;
  }
}
#main:before,
#main:after{
  content:"";
  display:block;
  position:absolute;
  height:5px;
  width:50%;
  z-index:3;
}
#main:before{
  background:#2c93ff;
  bottom:0;
  right:0;
}
#main:after{
  background:#ff318c;
  bottom:0;
  left:0;
}
#main .inner{
  height:546px;
  margin:0 auto;
  position:relative;
  width:990px;
  z-index:2;
}
#main .inner:before{
  background:url(/index/images/main/bg_mainstamp.png) no-repeat center center;
  content:"";
  display:block;
  position:absolute;
  left:-276px;
  top:1px;
  height:521px;
  width:1528px;
  z-index:1;
}
#main .inner:after{
  background:url(/index/images/main/bg_main.png) no-repeat 11px bottom  ;
  content:"";
  display:block;
  height:545px;
  position:absolute;
  left:0;
  top:0;
  width:990px;
  z-index:2;
}
#main h1{padding:33px 0 37px 411px;}

#main h1 + p{
  color:#262626;
  font-family:  "Noto Sans CJK JP", "Noto Sans",sans-serif;
  font-size:22px;
  font-weight:bold;
  line-height:1.727em;;
  letter-spacing: 0.28em;;
  text-align:center;
  padding:0 0 0 360px;
  width:322px;
}

/* アプリリンク */

#applink{
  background: #fff2f7;
  background: -moz-linear-gradient(left,  #fff2f7 0%, #fff2f7 50%, #edf6ff 50%, #edf6ff 100%);
  background: -webkit-linear-gradient(left,  #fff2f7 0%,#fff2f7 50%,#edf6ff 50%,#edf6ff 100%);
  background: linear-gradient(to right,  #fff2f7 0%,#fff2f7 50%,#edf6ff 50%,#edf6ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff2f7', endColorstr='#edf6ff',GradientType=1 );

}
#applink .inner{
  margin:0 auto;
  width:990px;
}
#applink .box,
#applink .box li{
  display:inline-block;
  vertical-align: top;
}
#applink .box{
  padding:69px 0 70px;
  width:495px;
}
#applink .box h2{
  font-family:  "Noto Sans CJK JP", "Noto Sans",sans-serif;
  margin:0 0 44px;
  position:relative;
}
#applink .greeting h2{margin:0 0 44px 55px;}

#applink .box h2 img,
#applink .box h2 strong{
  display: inline-block;
  vertical-align: top;
}
#applink .box h2 span,
#applink .box h2 strong{width:314px;}

#applink .box h2 strong{
  color:#262626;
  font-size:23px;
  line-height:31px;
  margin:0 0 0 18px;
}
#applink .box h2 span{
  font-size:18px;
  position:absolute;
  left:120px;
  bottom:7px;
}
#applink .nenga h2 span{color:#ff318c;}
#applink .greeting h2 span{color:#0d96e7;}

#applink .box ul{margin:0 0 20px 54px;}

#applink .greeting ul{margin:0 0 20px 109px;}

#applink .box li{
  margin:0 20px 0 0;
  text-align:center;
}
#applink .box li div:nth-child(1){margin:0 0 25px;}

#applink .box li img{vertical-align: bottom;}

#applink .box ul + p{
  font-size:16px;
  margin:0 0 0 54px;
  text-align:center;
  width:310px;
}
#applink .nenga ul + p{color:#ff318c}
#applink .greeting ul + p{color:#0d96e7}


#create h3,
#custom h3,
#print h3,
#option h3{
  background:url(/index/images/bg_title.png) no-repeat top center;
  margin:0 0 34px;
  padding:30px 0 0;
  text-align:center;
}
#create h3 img,
#custom h3 img,
#print h3 img,
#option h3 img{vertical-align: bottom;}


#create{padding:82px 0 69px;}

#create p,
#custom p,
#print p{
  color:#2c2c2c;
  font-size:16px;
  line-height:28px;
  width:590px;
}
#create p{margin:0 auto 66px;}
#custom p{margin:0 auto 35px;}
#print p{margin:0 auto 30px;}

#custom {
  background:#fffde5;
  padding:80px 0 60px;
  position:relative;
}
#custom:after {
  background:url(/index/images/custom/bg.gif) repeat left top;
  background-size:8px 8px;
  content:"";
  display:block;
  position: absolute;
  height:200px;
  bottom:0;
  left:0;
  width:100%;
  z-index:1;
}
#create div,
#custom div,
#print div{
  margin:0 auto;
  position:relative;
  text-align:center;
  z-index:2;
}

/* print */

#print{padding:80px 0 69px;}

#print div{margin:0 0 52px;}

#print ul{text-align:center;}

#print ul li{
  display:inline-block;
  text-align:center;
  width:495px;
}
#print ul li:nth-child(1){
  border-right:1px solid #bfbfbf;
  box-sizing: border-box;
}
#print ul li dt{
  font-family:  "Noto Sans CJK JP", "Noto Sans",sans-serif;
  font-size:24px;
  color:#ff0066;
  font-weight:bold;
  letter-spacing: 0.05em;
  margin:0 0 22px;
  padding:84px 0 0;
}
#print ul li:nth-child(1) dt{
  background:url(/index/images/print/icon1.png) no-repeat top center;
}
#print ul li:nth-child(2) dt{
  background:url(/index/images/print/icon2.png) no-repeat top center;
}
#print ul li dd{
  color:#2c2c2c;
  font-size:16px;
  font-weight:bold;
  line-height:28px;
}

/* option */
#option{
  background:#fffde5;
  padding:80px 0 69px;
}
#option ul{text-align:center;}

#option ul li{
  background:#fff;
  display:inline-block;
  margin:0 10px;
  padding:45px 0;
  vertical-align: top;;
  width:485px;
}
#option ul li dt {
  font-family:  "Noto Sans CJK JP", "Noto Sans",sans-serif;
  font-weight:bold;
}
#option ul li dt div{
  margin:0 0 35px;
}
#option ul li dt div img,
#option ul li dd img{vertical-align: bottom;}

#option ul li dt strong,
#option ul li dt span{
  display:block;
  line-height:1em;
}
#option ul li dt strong{
  font-size:28px;
  letter-spacing: 0.01em;
  margin:0 0 18px;
}
#option ul li dt span{
  font-size:16px;
  letter-spacing: 0.01em;
  margin:0 0 33px;
}
#option ul li dt div span{display:block;}
#option ul li dd{
  font-size:16px;
  line-height:28px;
  margin:0 auto;
  text-align:left;
  width:425px;
}
#option ul li dd img{vertical-align: bottom;}

#option ul li dd:last-child{margin:25px auto 0;}

#option ul li dd span{color:#ff0066;}

/* conveniphoto */

#conveniphoto{
  background:#f5f5f5;
  padding:41px 0 ;
  text-align:center;
}
#conveniphoto a {
  -webkit-transition: all .3s;
  transition: all .3s;
}
#conveniphoto a:hover {opacity:0.7;}






/* 動画再生ページ */
.movieheader{
  box-shadow: 0px 0px 12px 2.2px rgba(90, 83, 89, 0.1);
  text-align:center;
  padding:30px 0;
}
.movieheader div,
.movieheader p{
  display:inline-block;
  vertical-align: top;
}
.movieheader div{margin-right:4vw;}

.movieheader div img{
}
.movieheader p{
  font-size:14px;
  line-height:28px;
  letter-spacing: 0.08em;;
  text-align:left;
}
.moviecont {
  margin:0 auto;
  width:100%;
}
.moviecont .catch{
  color:#ff57a1;
  font-size:36px;;
  font-weight:bold;
  line-height:48px;;
  letter-spacing: 0.08em;
  margin-bottom:30px;
  text-align:center;
}
.moviecont video{
  display:block;
  margin:0 auto 4vw;
  height:auto;
  width:800px;;
}
.download_btn a{
  box-sizing: border-box;
  border:2px solid #5a5359;
  border-radius:5px;
  color:#5a5359;
  display: block;
  font-size:14px;;
  font-weight:bold;
  line-height:48px;
  margin:0 auto 3.333vw;
  text-align:center;
  text-decoration: none;
  width:240px;
}
.moviecont ul{
  margin:0 auto 30px;
  text-align:center
}
.moviecont ul li{
  font-size:14px;;
  line-height:28px;;
}
.moviecont ul + p{
  font-size:24px;;
  font-weight:bold;
  line-height:48px;
  letter-spacing: 0.08em;
  margin:0 auto 8vw;
  text-align:center;
}

.errortxt{
  text-align:center;
  font-size:24px;
  font-weight:bold;
  line-height:200px;
}

.errorcont {
	padding: 10px 20vw;
}

.errorcont p {
	padding: 10px;
}



/* レティーナ ディスプレイ用画像*/

@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx){


  #main{
    background:url(/index/images/main/bg_mainbase@2x.png) no-repeat top center;
    background-size:1600px 542px;
  }
  @media screen and (min-width: 1600px) {
    #main{
      background:url(/index/images/main/bg_mainbase@2x.png) no-repeat top center;
      background-size:cover;
    }
  }

  #main .inner:before{
    background:url(/index/images/main/bg_mainstamp@2x.png) no-repeat center center;
    background-size:1528px 521px;

  }
  #main .inner:after{
    background:url(/index/images/main/bg_main@2x.png) no-repeat 11px bottom  ;
    background-size:913px 388px;
  }

  #create h3,
  #custom h3,
  #print h3,
  #option h3{
    background:url(/index/images/bg_title@2x.png) no-repeat top center;
    background-size:41px 14px;
  }
  #print ul li:nth-child(1) dt{
    background:url(/index/images/print/icon1@2x.png) no-repeat top center;
    background-size:65px 57px;
  }
  #print ul li:nth-child(2) dt{
    background:url(/index/images/print/icon2@2x.png) no-repeat top center;
    background-size:77px 56px;
  }

}