@charset "utf-8";

/**
 *
 * global: サイト共通
 *
 */

@import url('https://fonts.googleapis.com/css?family=Lato:300');

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body { line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
nav ul { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none;}
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
ul {list-style:none; overflow: hidden;}
ol { list-style-type: none;}
img { width: 100%; max-width: 100%; height: auto; line-height: 0;}
br { line-height: inherit;}

/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}

::selection { color:#6A3906; background:#ceb97d; text-shadow:none; opacity:1;}
::-moz-selection { color:#6A3906; background:#ceb97d; text-shadow:none; opacity:1;}

/*--------------------------------------------------------------------------
 html
---------------------------------------------------------------------------*/
html{
 font-size: 62.5%;
 overflow-x: hidden;
}

/*--------------------------------------------------------------------------
 body
---------------------------------------------------------------------------*/
body{
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, Arial, "メイリオ", Meiryo, sans-serif;
 font-size:14px;
 font-size: 1.4rem;
 line-height: 1.8;
 color: #6A3906;
 -webkit-text-size-adjust:100%;
 letter-spacing: 0.075em;
}

/* @SP */
@media all and (max-width: 767px){
 body{
  min-width: 320px;
  font-size: 12px;
  font-size: 1.2rem;
 }
}

/*----------------------------------------------------------------------
 a
----------------------------------------------------------------------*/
a,a:link,a:visited,a:focus,a:active {
 outline:none;
 text-decoration: none;
}
a {
 -webkit-transition:  all 0.4s;
 -moz-transition:  all 0.4s;
 -o-transition:  all 0.4s;
 transition:  all 0.4s;
}

/*--------------------------------------------------------------------------
 clearfix
---------------------------------------------------------------------------*/
.cf:before, .cf:after { content: " "; display: table;}
.cf:after { clear: both;}
.cf { *zoom: 1;}

/*--------------------------------------------------------------------------
 width
---------------------------------------------------------------------------*/
section .inner {
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
}


/*--------------------------------------------------------------------------
 Fade
---------------------------------------------------------------------------*/
.fade-in {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
}
.in {
 opacity: 1.0;
}
.fade-up {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(0,40px);
 -webkit-transform: translate(0,40px);
}
.up {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
.fade-left {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(-40px,0);
 -webkit-transform: translate(-40px,0);
}
.left {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
.fade-right {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(40px,0);
 -webkit-transform: translate(40px,0);
}
.right {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}

@media screen and (max-width: 920px) {
 .fade-left,
 .fade-right {
  transition: all 1.2s;
   -o-transition: all 1.2s; /* opera */
   -moz-transition: all 1.2s; /* firefox */
   -webkit-transition: all 1.2s; /* chrome, safari */
   -ms-transition: all 1.2s; /* ie */
  opacity: 0;
  transform: translate(0,40px);
  -webkit-transform: translate(0,40px);
 }
 .left,
 .right {
  opacity: 1.0;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
}