@charset "UTF-8";

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

 file name  :  common.css

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

/* --------------------------------------------------
 normalize.css v3.0.2 | MIT License | git.io/normalize
--------------------------------------------------- */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}h1,h2,h3,h4,h5{font-weight:normal;font-size:100%;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;vertical-align:bottom;}svg:not(:root){overflow:hidden;}figure{margin:0;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver;}legend{padding:0;border:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}ul{padding:0;}ul li{list-style:none;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    width: 100%;
    background: #fff;
    color: #000;
    letter-spacing: .3rem;
    font-size: 1.2rem;
    font-family: 'Balthazar', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1;

    -webkit-text-size-adjust: 100%;
}
img{ vertical-align: bottom;}
a{ color: #000; text-decoration: none;}
.sp{ display: none;}
#wrap{ position: relative; margin: 0 auto; min-height: 100vh; width: 960px;}

@media screen and (max-width: 768px){
    body{ min-width: 0;}
    *, *:after, *:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
    img{ max-width: 100%; width: auto; height: auto;}
    .pc{ display: none;}
    .sp{ display: block;}
    #wrap{ width: 100%;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: relative; height: 150px;}
.header h1{ width: 150px; line-height: 150px;}
.header h1 img{ width: 100%; vertical-align: middle;}

.header .pc nav{ position: absolute; top: 70px; left: 240px;}
.header .pc nav li{ position: relative; display: inline-block; margin: 0 0 0 30px;}
.header .pc nav li:first-child{ margin: 0;}
.header .pc nav a{ display: inline-block; padding: 0 8px 4px; font-size: 1.5rem;}

.header .pc nav ul ul{ position: absolute; top: 50%; left: 50%; z-index: 100000; visibility: hidden; margin-left: -45px; width: 90px; opacity: 0; transition: .4s;}
.header .pc nav li:hover ul{ top: 100%; visibility: visible; opacity: 1;}
.header .pc nav li li{ display: block; margin: 20px 0 0; width: 100%;}
.header .pc nav li li:first-child{ margin: 20px 0 0;}
.header .pc nav li li a{ display: block; text-align: center;}

.header .pc aside{ position: absolute; top: 72px; right: 0;}
.header .pc aside li{ display: inline-block; margin: 0 0 0 30px;}
.header .pc aside li:first-child{ margin: 0;}
.header .pc aside a{ padding: 0 8px 4px;}

@media screen and (max-width: 768px){
    .header{ padding: 30px 15px 0 15px; height: auto;}
    .header h1{ display: inline-block; width: 30%; line-height: normal;}
    .header .pc{ display: none;}
}

/* effect */
.header .pc a{
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.header .pc a:before {
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 1px;
  background: #000;
  content: "";
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: right;
  transition-property: right;
}
.header .pc a:hover:before,
.header .pc a:focus:before,
.header .pc a:active:before{ right: 0;}

.header h1 a{ box-shadow: 0;}
.header h1 a:before{ display: none;}

/* --------------------------------------------------
 main
--------------------------------------------------- */
.main{ padding: 70px 0;}
.main h2{ text-align: center;}
.main h2 + ul{ margin: 45px 0 0; text-align: center;}
.main h2 + ul li{ display: inline-block; padding: 0 45px;}
.main h2 + ul li a{ font-size: 2.5rem;}
.main nav{ margin: 110px 0 0;}
.main nav ul{ text-align: center;}
.main nav li{ display: inline-block; padding: 0 70px; height: 20px; border-right: 1px solid; line-height: 20px;}
.main nav li:first-child{ border-left: 1px solid;}
.main nav a{ font-size: 1.5rem;}
.main aside{ margin: 110px 0 0;}
.main aside ul{ text-align: center;}
.main aside li{ display: inline-block; padding: 0 24px; height: 20px; border-right: 1px solid; line-height: 20px;}
.main aside li:first-child{ border-left: 1px solid;}

@media screen and (max-width: 768px){
    .main{ padding: 90px 15px 60px;}
    .main h2{ font-size: 1rem;}
    .main h2 + ul{ margin: 30px 0 0;}
    .main h2 + ul li{ display: inline-block; padding: 0 20px;}
    .main h2 + ul li a{ font-size: 2rem;}
    .main nav{ margin: 90px 0 0;}
    .main nav li{ padding: 0; width: 33.3333%; height: auto; line-height: normal;}
    .main nav a{ font-size: 1rem;}
    .main aside{ margin: 90px 0 0;}
    .main aside li{ padding: 0 15px; height: auto; border-right: 1px solid; font-size: 1rem; line-height: normal;}
}

/* page */
.page{ padding: 0 0 70px;}
.page header{ text-align: center;}
.page header h1{ font-size: 2.5rem;}
.body{ margin: 45px auto 0; text-align: center; font-size: .9rem; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.8;}
.body p{ margin: 35px 0 0;}

@media screen and (max-width: 768px){
    .page{ padding: 90px 15px 60px;}
    .page header h1{ font-size: 1rem;}
    .body{ margin: 30px 0 0; font-size: 1.2rem;}
    .body p{ margin: 15px 0 0;}
}

/* collection list */
.list{ padding: 0 0 70px;}
.box-wrap{ overflow: hidden; margin: -30px -30px 0 0; zoom: 1;}
.box{ position: relative; float: left; margin: 30px 30px 0 0; width: 300px;}
.box img{ width: 100%;}

@media screen and (max-width: 768px){
    .list{ padding: 30px 15px 60px;}
    .box-wrap{ margin: -15px 0 0;}
    .box{ float: none; margin: 15px 0 0; width: 100%;}
}

/* effect */
.fadein-up{ opacity:0;}
.fadein-up.appear{ opacity: 1; -webkit-animation: slide-in-up 0.4s ease-out both; animation: slide-in-up 0.4s ease-out both;}
@-webkit-keyframes slide-in-up{
    0%{ opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px);}
    100%{ opacity: 1; -webkit-transform: none; transform: none;}
}
@keyframes slide-in-up {
    0%{ opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px);}
    100%{ opacity: 1; -webkit-transform: none; transform: none;}
}

/* collection detail */
.detail{ padding: 0 0 70px;}
.detail figure{ margin: 0 auto; width: 600px;}
.detail figure img{ width: 100%;}
.spec{ margin: 70px 0 0;}
.spec ul{ margin: -40px 0 0; text-align: center;}
.spec li{ display: inline-block; margin: 40px 0 0; width: 33.3333%;}
.spec h2{ font-size: 1rem;}
.spec p{ padding: 8px 0 0; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .detail{ padding: 30px 0 60px;}
    .detail figure{ margin: 0 ; width: 100%;}
    .spec{ margin: 0; padding: 30px 15px 60px;}
    .spec ul{ margin: 0;}
    .spec li{ display: block; margin: 30px 0 0; width: 100%;}
    .spec h2{ font-size: 1.2rem;}
    .spec p{ font-size: 1.4rem;}
}

/* form */
.form{ margin: 0 auto; width: 400px; font-size: 1.3rem;}
.form table{ width: 100%;}
.form th{ display: block; padding: 45px 0 0; width: 100%;}
.form td{ display: block; padding: 15px 0 0; width: 100%;}
.form input{ box-sizing: border-box; padding: 10px; width: 100%; height: 40px; border: none; border: 1px solid;}
.form textarea{ box-sizing: border-box; padding: 10px; width: 100%; height: 160px; border: none; border: 1px solid;}
.form .submit{ margin: 45px 0 0;}
.form .submit button{ width: 100%; height: 40px; border: none; border: 1px solid; background: none; letter-spacing: .3rem; line-height: 40px;}
.form h2{ margin: 45px 0 0;}
.form .thanks{ margin: 45px 0 0; text-align: center;}

@media screen and (max-width: 768px){
    .form{ width: 100%;}
    .form th{ padding: 30px 0 0;}
    .form td{ padding: 15px 0 0;}
    .form textarea{ height: 80px;}
    .form .submit{ margin: 30px 0 0;}
    .form .submit button{ letter-spacing: .2rem;}
    .form h2{ margin: 30px 0 0;}
    .form .thanks{ margin: 30px 0 0; text-align: left;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ position: absolute; bottom: 0; left: 0; padding: 0 0 30px; width: 100%; text-align: center;}
.footer small{ font-size: .8rem;}

@media screen and (max-width: 768px){
    .footer{ padding: 0 0 20px;}
    .footer small{ font-size: 1rem;}
}