@charset "utf-8";

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

@font-face {
 font-family: "nsjp";
 font-style: normal;
 font-weight: 100;
 src: url("font/nsjp_th.woff") format("woff");
}
@font-face {
 font-family: "nsjp";
 font-style: normal;
 font-weight: 300;
 src: url("font/nsjp_dl.woff") format("woff");
}
@font-face {
 font-family: "nsjp";
 font-style: normal;
 font-weight: 500;
 src: url("font/nsjp_m.woff") format("woff");
}
@font-face {
 font-family: "nsjp";
 font-style: normal;
 font-weight: 700;
 src: url("font/nsjp_b.woff") format("woff");
}

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,picture,
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,picture,
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;}
ol { list-style-type: none;}
img { width: 100%; max-width: 100%; height: auto; line-height: 0;}
br { line-height: inherit;}
button{
 background-color: transparent !important;
 border: none !important;
 cursor: pointer !important;
 outline: none !important;
 padding: 0 !important;
 appearance: none !important;
}
figure,picture {
 display: block;
 line-height: 0;
}

/* 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;}

*, ::after, ::before { box-sizing: border-box;}

::selection { color:#1d1d1d; background:#E0D8BF; text-shadow:none; opacity:1;}
::-moz-selection { color:#1d1d1d; background:#E0D8BF; text-shadow:none; opacity:1;}

/*--------------------------------------------------------------------------
 html
---------------------------------------------------------------------------*/
html {
 font-size: 62.5%;
 overflow-x: hidden;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
}

/*--------------------------------------------------------------------------
 body
---------------------------------------------------------------------------*/
body {
 font-family: "YakuHanJP", "nsjp", "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
 font-size:14px;
 font-size: 1.4rem;
 font-weight: 300;
 line-height: 1.8;
 color: #202020;
 -webkit-font-smoothing: antialiased;
 -webkit-text-size-adjust:100%;
 letter-spacing: 0.08em;
 overflow: hidden;
}

body .w300 { font-weight: 300 !important;}

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

.sp { display: none;}

@media all and (max-width: 1200px){
 .modal-video-close-btn {
  width: 30px !important;
  height: 30px !important;
  right: 15px !important;
 }
}

/*----------------------------------------------------------------------
 a
----------------------------------------------------------------------*/
a,a:link,a:visited,a:focus,a:active {
 color: #1d1d1d;
 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
---------------------------------------------------------------------------*/
#content {}
#content .inner_xl {
 max-width: 1560px;
 margin: 0 auto;
}
#content .inner_m {
 max-width: 1400px;
 margin: 0 auto;
}
#content .inner_m {
 max-width: 1200px;
 margin: 0 auto;
}

/*--------------------------------------------------------------------------
 Animation
---------------------------------------------------------------------------*/
.fade-in { opacity: 0;}
/* ie11 ハック*/
@media all and (-ms-high-contrast:none){
.fade-in {
 opacity: 1;
}
}
.in {
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}

@-webkit-keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

.fade-up {
 opacity: 0;
 transform: translate(0,30px);
 -webkit-transform: translate(0,30px);
}
/* ie11 ハック*/
@media all and (-ms-high-contrast:none){
.fade-up {
 opacity: 1;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
}
.up {
 -webkit-animation-name: fadeUp;
 animation-name: fadeUp;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}

.delay01 { animation-delay: 0.5s;}
.delay02 { animation-delay: 1s;}
@media screen and (max-width: 768px) {
 .delay01 { animation-delay: 0s;}
 .delay02 { animation-delay: 0s;}
}

@-webkit-keyframes fadeUp {
 from {
  opacity: 0;
  transform: translate(0,30px);
  -webkit-transform: translate(0,30px);
 }
 to {
  opacity: 1;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
}
@keyframes fadeIn {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

.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);
 transition-delay: 0.1s;
}
.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);
 transition-delay: 0.1s;
}
.right {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
.mask-pht { position: relative;}
.mask-txt::after {
 content: "";
 width: 100%;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 background: #FFF;
}
.is_visible.mask-txt::after {
 background: #FFF;
 animation-name: mask-txt;
 animation-delay: 0.75s;
 animation-duration: 0.75s;
 animation-fill-mode: forwards;
 animation-timing-function: ease-out;
}
@keyframes mask-txt {
 0% {
  width: 100%;
 }
 100% {
  width: 0;
 }
}
.mask-pht {
 position: relative;
}
.mask-pht::after {
 content: "";
 width: 0;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 background: #ffe5e0;
}
.is_visible.mask-pht::after {
 animation-name: mask-pht;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;
 animation-timing-function: ease;
}
@keyframes mask-pht {
 0% {
  width: 0;
  left: 0;
 }
 50% {
  width: 100%;
  left: 0;
 }
 55% {
  width: 100%;
  left: auto;
  right: 0;
 }
 100% {
  width: 0;
  left: auto;
  right: 0;
 }
}
.mask-pht { overflow: hidden; }
.mask-pht figure { line-height: 0;}
.mask-pht img { opacity: 0;}
.is_visible.mask-pht img {
 animation-name: delay;
 animation-delay: 0.75s;
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-timing-function: ease-out;
}
@keyframes delay {
 0% {
  opacity: 0;
  transform:scaleX(1)scaleY(1);
 }
 20% {
  opacity: 0;
  transform:scaleX(1)scaleY(1);
 }
 100% {
  opacity: 1;
  transform:scaleX(1.02)scaleY(1.02);
 }
}

.zoom  {
 display: block;
 -webkit-transition: .4s ease-out;
 -moz-transition: .4s ease-out;
 transition: .4s ease-out;
}
a:hover .zoom { transform:scaleX(1.05)scaleY(1.05);}

@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);
 }
}

/*--------------------------------------------------------------------------
 Header
---------------------------------------------------------------------------*/
#header {
 width: 100%;
 position: relative;
}
#header .logo {
 width: 218px;
 line-height: 0;
 position: absolute;
 top: 30px;
 left: 50%;
 z-index: 10;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (max-width: 1200px) {
 #header .logo { width: 180px;}
}
@media screen and (max-width: 768px) {
 #header .logo {
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);

 }
}

/*--------------------------------------------------------------------------
 title
---------------------------------------------------------------------------*/
.sec-tit {
 position: relative;
 line-height: 0;
}
.sec-tit span {
 display: inline-block;
 padding: 10px 20px;
 background: #000;
 color: #fff;
}
.sec-tit.sizeSS { text-align: right;}
.sec-tit.sizeSS span {
 color: #000;
 background: none;
}
.sec-tit .small {
 line-height: 1;
 font-family: neue-haas-unica, sans-serif;
 font-size: 36px;
 font-weight: 200;
 font-style: italic;
}
.sec-tit .big {
 padding-top: 0;
 line-height: 1.3;
 font-family: neue-haas-unica, sans-serif;
 font-size: 46px;
 font-weight: 500;
}
.sec-tit .curning {letter-spacing: 0;}
.sec-tit.sizeS .small { font-size: 26px;}
.sec-tit.sizeS .big { font-size: 40px;}
.sec-tit.sizeSS .small {
 padding: 8px 20px 4px 0;
 font-size: 16px;
 font-weight: 300;
}
.sec-tit.sizeSS .big {
 padding: 0 20px 7px 0;
 color: #202020;
 font-size: 20px;
 font-weight: 400;
 border-bottom: 1px solid #555;
}

@media screen and (max-width: 1200px) {
 .sec-tit {}
 .sec-tit span { padding: 10px 20px;}
 .sec-tit .small { font-size: 30px;}
 .sec-tit .big { font-size: 36px;}
 .sec-tit.sizeS .small { font-size: 20px;}
 .sec-tit.sizeS .big { font-size: 32px;}
 .sec-tit.sizeSS .small { font-size: 14px;}
 .sec-tit.sizeSS .big { font-size: 16px;}
}
@media screen and (max-width: 768px) {
 .sec-tit {}
 .sec-tit span { padding: 5px 12px 5px 4vw;}
 .sec-tit .small { font-size: 20px;}
 .sec-tit .big { font-size: 24px;}
 .sec-tit.sizeS .small { font-size: 16px;}
 .sec-tit.sizeS .big { font-size: 20px;}
 .sec-tit.sizeSS .small {
  padding: 3px 4vw 6px 12px;
  font-size: 12px;
 }
 .sec-tit.sizeSS .big {
  padding: 0 4vw 5px 0;
  font-size: 12px;
 }
}

/*--------------------------------------------------------------------------
 contact
---------------------------------------------------------------------------*/
#contact {
 margin-top: 200px;
 padding: 180px 0;
 position: relative;
 background-image: url(../img/contact/bg.jpg);
 background-position: center top;
 background-attachment: fixed;
 background-size: cover;
 overflow: hidden;
}
#contact.blk {
 margin-top: 0;
 padding: 120px 0;
 position: relative;
 background-image: none;
 background: #101010;
}
#contact h2 {
 text-align: center;
 letter-spacing: 0.02em;
 line-height: 1;
 font-size: 62px;
 color: #fff;
 font-family: neue-haas-unica, sans-serif;
 font-weight: 600;
}
#contact .btn {
 width: 90%;
 max-width: 768px;
 margin: 65px auto 0;
 text-align: center;
}
#contact .btn a {
 display: block;
 text-align: center;
 line-height: 96px;
 color: #FFF;
 background: #d62027;
 -webkit-border-radius: 3px;
         border-radius: 3px;
 position: relative;
}
#contact .btn a:hover { background: #000;}
#contact .btn a span {
 display: block;
 font-size: 18px;
 font-weight: bold;
}
#contact .btn a i {
 width: 60px;
 line-height: 0;
 position: absolute;
 right: 30px;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

@media screen and (max-width: 1200px) {
 #contact {
  margin-top: 120px;
  padding: 100px 0;
 }
 #contact.blk { padding: 90px 0;}
 #contact h2 { font-size: 48px;}
 #contact .btn {
  max-width: 614px;
  margin: 40px auto 0;
 }
 #contact .btn a { line-height: 80px;}
 #contact .btn a span { font-size: 14px;}
 #contact .btn a i {
  width: 48px;
  right: 20px;
 }
}
@media screen and (max-width: 768px) {
 #contact {
  margin-top: 90px;
  padding: 60px 0;
  background: url(../img/contact/bg-sp.jpg) center center no-repeat;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
 }
 #contact.blk { padding: 50px 0;}
 #contact h2 { font-size: 34px;}
 #contact .btn {
  margin: 30px auto 0;
 }
 #contact .btn a {
  display: block;
  line-height: 60px;
  -webkit-border-radius: 2px;
          border-radius: 2px;
 }
 #contact .btn a span {font-size: 12px;}
 #contact .btn a i {
  width: 30px;
  right: 15px;
 }
}

/*--------------------------------------------------------------------------
 Footer
---------------------------------------------------------------------------*/
#footer {
 padding:  0;
 background: ##fff;
 position: relative;
 z-index: 0;
}
#footer .inner {
 width: 80vw;
 margin: 0 auto;
 color: #dcdcdc;
 display: flex;
 position: relative;
}
#footer .inner::before {
 content: "";
 width: 1px;
 height: 100%;
 display: block;
 background: #585858;
 position: absolute;
 left: 50%;
 top: 0;
}
#footer .inner > div {
 max-width: 50%;
 padding: 6vw 0;
 -webkit-flex: 0 1 50%;
     -ms-flex: 0 1 50%;
         flex: 0 1 50%;
}
#footer .inner .box-l {
 padding-right: 6vw;
 text-align: center;
 -webkit-order: -1;
     -ms-order: -1;
         order: -1;
}
#footer .inner .box-l h2 {
 width: 280px;
 margin: 0 auto;
}
#footer .inner .box-l h2 + p {
 padding-top: 1em;
 letter-spacing: 0.14em;
 font-size: 12px;
}
#footer .inner .box-r { padding-left: 6vw;}
#footer .inner .box-r h3 { max-width: 464px;}
#footer .inner .box-r h3 + p {
 padding-top: 1.5em;
 letter-spacing: 0.1em;
 line-height: 2.2;
 font-size: 14px;
}

@media screen and (max-width: 1200px) {
/* #footer { padding: 80px 0;}*/
 #footer { padding: 0;}
 #footer .inner { width: 86.666vw;}
 #footer .inner .box-l h2 { width: 180px;}
 #footer .inner .box-l h2 + p {
  letter-spacing: 0.1em;
  font-size: 9px;
 }
 #footer .inner .box-r { padding-left: 6vw;}
 #footer .inner .box-r h3 { max-width: 464px;}
 #footer .inner .box-r h3 + p {
  padding-top: 1.5em;
  line-height: 2;
  font-size: 12px;
 }
}
@media screen and (max-width: 768px) {
 #footer { padding: 0px 0 0px!important;}
 #footer .inner { display: block;}
 #footer .inner::before { content: none;}
 #footer .inner > div {
  max-width: initial;
  padding: 0;
 }
 #footer .inner .box-l {
  margin-top: 30px;
  padding-top: 30px;
  padding-right: 0;
  border-top: 1px solid #585858;
 }
 #footer .inner .box-r { padding-left: 0;}
 #footer .inner .box-r h3 { max-width: 320px;}
 #footer .inner .box-r h3 + p {
  text-align: justify;
  font-size: 11px;
 }
 #footer .inner .box-r h3 + p br { display: none;}
}

/*--------------------------------------------------------------------------
 fix-contact
---------------------------------------------------------------------------*/
#fix-contact { display: none;}

@media screen and (max-width: 768px) {
 footer { 
/*    padding-bottom: 76px;*/ }
 #fix-contact * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
 #fix-contact {
  width : 100%;
  position: fixed;
  display: block;
  bottom: -80px;
  z-index: 1040;
  opacity: 0;
  filter:alpha(opacity=0);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  background: #202020;
 }
 #fix-contact.next-link {
  background: #FFF;
  -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
          box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
 }
 #fix-contact.active {
  bottom: 0;
  opacity: 1;
 }
 #fix-contact ul {
  width: 100%;
  padding: 0 5px;
  font-size: 0;
  letter-spacing: 0;
 }
 #fix-contact ul li {
  width: 100%;
  margin: 5px auto;
  text-align: center;
  line-height: 56px;
  background: #202020;
 }
 #fix-contact.next-link ul li { background: #FFF;}
 #fix-contact ul li a {
  display: block;
  color: #FFF;
  position: relative;
 }
 #fix-contact ul li a span {
  display: inline-block;
  vertical-align: middle;
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
 }
 #fix-contact.next-link ul li a,
 #fix-contact.next-link ul li a span {
  color: #000;
  font-weight: 300;
 }
 #fix-contact ul li a i {
  width: 30px;
  line-height: 0;
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
 }
}