body.desktop header .inner{
  padding:0 16px;
}
/**
 ** Grid
 **/
.grid{
  padding:8px;
  margin-bottom:72px;
}
.catchcopy{
  margin-bottom:24px;
}
.catchcopy img{
  display:block;
  height:auto;
  margin-left:auto;margin-right:auto;
}
body:not(.desktop) .catchcopy img{
  width:50%;
}
body.desktop .catchcopy img{
  width:25%;
}
.logo img{
  display:block;
  width:auto;height:64px;
  margin-left:auto;margin-right:auto;
}
.logo{
  margin-bottom:72px;
}

body.desktop .scroll{
  display:none !important
}
.scroll{
  position:absolute;
  width:18px;height:40px;
  left:50%;bottom:16px;
  margin-left:-9px;
  opacity:1;
  pointer-events:auto;
}
.scroll a{
  display:block;
  width:100%;height:40px;
  background-color:#eee;
  border-radius:99em;
}
.scroll svg{
  fill:#e61f21;
  display:block;
  position:absolute;
  width:8px;height:4.8px;
  left:5px;top:17px;
  -webkit-animation-name:line-repetition;animation-name:line-repetition;
  -webkit-animation-duration:2.5s;animation-duration:2.5s;
  -webkit-animation-timing-function:cubic-bezier(.37,.16,.12,1);animation-timing-function:cubic-bezier(.37,.16,.12,1);
  -webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;
}
@-webkit-keyframes line-repetition{
  0%{
    -webkit-transform:translateY(-10px);transform:translateY(-10px);
    opacity:0;
  }
  60%{
    -webkit-transform:translateY(7px);transform:translateY(7px);
    opacity:1;
  }
  100%{
    -webkit-transform:translateY(10px);transform:translateY(10px);
    opacity:0;
  }
}
@keyframes line-repetition{
  0%{
    -webkit-transform:translateY(-10px);transform:translateY(-10px);
    opacity:0;
  }
  60%{
    -webkit-transform:translateY(7px);transform:translateY(7px);
    opacity:1;
  }
  100%{
    -webkit-transform:translateY(10px);transform:translateY(10px);
    opacity:0;
  }
}

/**
 ** MESSAGE
 **/
#message{
  background:#fafafa;
}
#message .content p{
  font-size:14px;
}
@media screen and (max-width:639px){
  #message .inner{
    padding:40px 8px;
  }
}
@media screen and (min-width:640px){
  #message .inner{
    padding:64px 16px;
  }
  #message header{
    margin-left:245px;
  }
  #message .content > div:first-child{
    width:245px;
    flex-grow:0;flex-shrink:0;
  }
  #message .content > div:first-child img{
    width:auto;height:100px;
    opacity:.72;
  }
}

/**
 ** NEWS
 **/
#news .content li{
  line-height:32px;
  padding-right:8px;
}
#news .content li:not(:last-child){
  border-bottom:1px dotted #c4c4c4;
}
#news .content li div{
  width:64px;
  margin-right:16px;
}
#news .content li span,
#news .content li time{
  display:block;
  width:64px;
  text-align:center;
}
#news .content li span{
  color:#fff;
  background:#000;
}
#news .content li a{
  color:#333;line-height:32px;
}
@media screen and (max-width:639px){
  #news .inner{
    padding:40px 8px 0 8px;
  }
  #news .content li{
  	padding-bottom:8px;margin-bottom:8px;
  	font-size:12px;
  }
}
@media screen and (min-width:640px){
  #news .inner{
    padding-top:64px;
  }
  #news .content{
    width:72%;
    margin-left:auto;margin-right:auto;
  }
  #news .content li span,
  #news .content li time{
  	margin-top:8px;
    font-size:10px;line-height:16px;
  }
  #news .content li a{
    color:#000;font-size:12px;
  }
}

/**
 ** Photo
**/
#photo header{
  padding: 0 8px;
}
#photo header p:last-child{
  margin-left:8px;margin-right:8px;
}
#photo header strong{
  font-size:14px;
}
#photo .content > div{
  overflow:hidden;
}
#photo h2 a{
  margin-left:16px;
}
#photo .content{
  overflow:hidden;
}
#photo .content a{
  display:block;
  height:100%;
  overflow:hidden;
  line-height:0;
  background:#000;
}
#photo .content .height img{
  width:100%;height:auto;
}
#photo .content .width img{
  width:auto;height:100%;
}
#photo .content img{
  -webkit-transition:all .5s;transition:all .5s;
}
#photo .content a:hover img{
  -webkit-transform:scale(1.2,1.2);transform:scale(1.2, 1.2);
  opacity:.72;
}
@media screen and (max-width:639px){
  #photo .inner{
    padding-top:40px;
  }
  #photo .content li{
    padding:8px;
  }
}
@media screen and (min-width:640px){
  #photo .inner{
    padding-top:64px;
  }
  #photo .content li{
    padding:16px;
  }
}

/**
 ** STYLING
 **/
@media screen and (max-width:639px){
  #styling .inner{
		padding:40px 8px;
	}
}
@media screen and (min-width:640px){
  #styling .inner{
    padding:64px 16px;
  }
  #styling > .inner > header{
    width:54.3478%;
  }
}
#styling header{
  position:relative;
}
#styling article{
  background-position:right top;background-repeat:no-repeat;
}
#styling article header{
  margin-bottom:24px;
  z-index:10;
}
#styling article h3 img{
  height:13px;width:auto;
}
#styling article header p{
  font-weight:bold;
}
#styling article .content{
  position:relative;
  min-height:240px;
}
#styling article .text{
  /*top:0;left:24px;*/
  width:80%;
  background:rgba(255,255,255,.64);
}
#styling article .text p{
  font-size:13px;
}
@media screen and (max-width:639px){
  #styling article header{
    padding:0 8px;
  }
  #styling article h3{
    margin-bottom:16px;
    /*text-align:center;*/
  }
  #styling article header p{
    font-size:14px;
  }
  #styling article .content{
    padding:0 8px;
  }
  #styling article .text{
    /*margin-bottom:96px;*/
    padding:0 8px 8px 0;
  }
}
@media screen and (min-width:640px){
  #styling article h3{
    margin-bottom:32px;
  }
  #styling article header p{
    padding:0 24px;
    font-size:16px;
  }
  #styling article .content{
    padding:0 24px;
  }
  #styling article .text{
    margin-bottom:96px;
    padding:16px 16px 16px 0;
  }
}
#styling article .content ul{
  -webkit-align-items:flex-end;align-items:flex-end;
}
#styling article .content ul:not(:last-child){
  margin-bottom:16px;
}
#styling article .content ul:last-child{
  
}
#styling article .content li{
  width:50%;
}
#styling article .content li{
  font-size:12px;line-height:1.7;
}
#styling article .content li:last-child{
  padding-bottom:16px;
}
#styling article .content li strong{
  display:block;
  margin-bottom:8px;
}
#styling article footer{
  padding:32px 24px 0 24px;
  border-top:2px dashed #ccc;
}
#styling article footer ul{
  /*margin-bottom:32px;*/
}
#styling article footer li{
  font-size:13px;line-height:1.7;
}
#styling article footer li:not(:last-child){
  margin-bottom:16px;
}
#styling article footer li strong{
  border-bottom:2px dashed #E61F21;
}
#styling article footer li img{
  height:24px;width:auto;
}
#styling footer button{
  display:inline-block;
  padding:0 8px;
  color:#fff;font-size:11px;line-height:32px;
  background:#333;
  border-radius:16px;
}
.price-sheet img{
  height:24px;width:auto;
}
.price-sheet dl{
  font-size:14px;
  border-bottom:dashed 1px #ccc;
}
.price-sheet p + dl{
  border-top:dashed 1px #ccc;
}
.price-sheet dt{padding-left:8px}
.price-sheet dd{padding-right:8px}
.price-sheet dt,
.price-sheet dd{line-height:40px}
.price-sheet dd span + i{margin-left:.5em}
.price-sheet dd i{font-weight:bold}

/**
 ** HOW TO ORDER
 **/
#order{
  background:#fafafa;
}
#order .slider .picture img{
  width:100%;height:auto;
}
#order .slider p.no{
  margin-bottom:0;
  padding-left:4px;
  line-height:1;
}
#order .slider p.title{
  line-height:1;
}
#order .slider{
  margin-bottom:16px;
}
#order .content ul li{
  padding:0 4px;
}
#order .content ul a{
  font-size:12px;font-family:monospace;
}
#order .content ul a:not(.is-active){
  color:#ccc;
}
#order .content ul a.is-active{
  color:#333;
}
@media screen and (max-width:639px){
	#order .inner{
		padding:40px 8px;
	}
  #order .slider .picture{
    margin-bottom:16px;
  }
  #order .slider .text p:not(.no):not(.title){
    font-size:14px;line-height:1.6;
  }
  #order .slider p.no{
    font-size:10px;
  }
  #order .slider p.title{
    margin-bottom:16px;
    font-size:24px;
  }
}
@media screen and (min-width:640px){
  #order .inner{
    padding:64px 16px;
  }
  #order .slider .item > div > *{
    width:50%;
  }
  #order .slider .text{
    padding:16px;
  }
  #order .slider .text > div{
    position:relative;
    top:50%;left:0;
    width:100%;
    -webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);
  }
  #order .slider p.no{
    font-size:10px;
  }
  #order .slider p.title{
    margin-bottom:24px;
    font-size:32px;
  }
  #order .slider p:not([class]){
    font-size:12px;
  }
  #order .slider .text{
    background:#fff;
  }
}

/**
 ** PROFILE
 **/
#profile .picture img{
  height:auto;
}
@media screen and (max-width:639px){
  #profile .inner{
    padding:40px 8px;
  }
  #profile .content li:first-child{
    margin-bottom:32px;
  }
  #profile .picture{
  	margin-bottom:16px;
  }
  #profile .picture img{
    width:100%;
  }
}
@media screen and (min-width:640px){
  #profile .inner{
    padding:64px 16px;
  }
  #profile .content li:first-child{
    margin-bottom:40px;
  }
  #profile li > div{
    width:50%;
  }
  #profile .picture.align-right{
    padding-right:16px;
  }
  #profile .picture:not(.align-right){
    padding-left:16px;
  }
  #profile .picture img{
    width:72%;
  }
}
#profile .picture{
  position:relative;
  overflow:hidden;
}
#profile .picture span{
  position:absolute;
  display:block;
  top:0;left:0;
  height:100%;
  z-index:10;
  background:#000;
}

@media screen and (min-width:640px){
	#profile .profile{
  	width:50%;
	}
}
#profile .profile span{
  display:block;
}
#profile .post,
#profile .en.name{
  margin-bottom:16px;
  opacity:.8;
  font-size:10px;
}
#profile .ja.name{
  margin-bottom:8px;
  font-size:20px;font-weight:200;
}
#profile .profile p{
  font-size:12px;
}

.news-dialog{
  position:fixed;
  top:0;left:0;
  width:100%;
  overflow:hidden;
  background:#fff;
  z-index:300;
}
.dialog-toolbar{
  position:relative;
  width:100%;
  height:56px;
  box-shadow:0 2px 2px rgba(0,0,0,.24)
}
.dialog-toolbar a{
  position:absolute;
  right:12px;
  top:12px;
  display:block;
  width:32px;height:32px;
}
.dialog-toolbar a img{
  width:32px;height:32px;
}
.dialog-inner{
  padding:16px 0;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;overflow-scrolling:touch;
}
.dialog-content .title{
  margin-bottom:1em !important;
  font-size:20px;line-height:1.3;
}
.dialog-content time,
.dialog-content .title + span{
  display:block;
  padding:0 8px;
  margin-bottom:32px;
  color:#666;
}
.dialog-inner p{
  padding:0 8px;
  font-size:14px;
}
.dialog-inner p:not(:last-child){
  margin-bottom:1.5em;
}
.dialog-inner figure{
  width:100%;
}
.dialog-inner figure img{
  width:100%;height:auto;
}

#contact-form p{
  margin-bottom:56px;
}
#contact-form p img{
  height:24px;width:auto;
}
#contact-form dl{
  margin-bottom:16px;
}
#contact-form dt{
  color:#fff;line-height:40px;
}
#contact-form input,
#contact-form textarea{
  background-color:#ec5556;
  border:none;
  border-radius:4px;
  color:#fff;
}
#contact-form input{
  padding:0 8px;
  line-height:40px;
}
#contact-form textarea{
  padding:8px;
  height:200px;
}
#contact-form button{
  padding:0 24px;
  color:#000;font-weight:bold;line-height:40px;
  background:#fff;
  border-radius:4px;
}
@media screen and (max-width:479px){
  #contact-form{
    width:100%;
    padding:0 16px;
  }
  #contact-form input,
  #contact-form textarea{
    width:100%;
  }
}
@media screen and (min-width:480px){
  #contact-form{
    width:480px;
    margin-left:auto;margin-right:auto;
  }
  #contact-form input,
  #contact-form textarea{
    width:80%;
  }
}
@media screen and (min-width:640px){
  #contact-form dt{
    width:140px;
    flex-grow:0;flex-shrink:0;
  }
  #contact-form dd{
    width:calc(100% - 140px);
    flex-grow:0;flex-shrink:0;
  }
}

.sending,
.success,
.error{
  padding:56px 16px;
  margin-bottom:56px;
  color:#fff;line-height:1.6;
  background:#ec5556;
  border-radius:8px;
}