@charset "UTF-8";
/*===============================================*/
/*  common.css */
/*===============================================*/
/*//////////////////////////////////

reset
///////////////////////////////////*/
/* Fonts
---------------------------------------------------------------------*/
/*localfont  -------------------------*/
@font-face {
  font-family: ggb;
  src: url("../fonts/GenJyuuGothic-Bold.ttf");
  /*localFont*/ }
@font-face {
  font-family: bnc;
  src: url("../fonts/bahnschrift.ttf");
  /*localFont*/ }
/*iconfont  -------------------------*/
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.eot?6hhvcc");
  src: url("../fonts/icomoon.eot?6hhvcc#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?6hhvcc") format("truetype"), url("../fonts/icomoon.woff?6hhvcc") format("woff"), url("../fonts/icomoon.svg?6hhvcc#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-line:before {
  content: "\e009"; }

.icon-mail:before {
  content: "\e901"; }

.icon-mail2:before {
  content: "\e902"; }

.icon-tel:before {
  content: "\e903";
  font-size: 14px;
  padding-right: 5px; }

.icon-home:before {
  content: "\e904";
  font-size: 14px; }

.icon-facebook:before {
  content: "\ea90"; }

.icon-instagram:before {
  content: "\ea92"; }

.icon-twitter:before {
  content: "\ea96"; }

.icon-search:before {
  content: "\e900"; }

.icon-mobile:before {
  content: "\e958"; }

.icon-heart:before {
  content: "\e9da"; }

/*site main rules
---------------------------------------------------------------------*/
/*color  ------------------*/
.fcGly {
  color: #404040; }

.fcOrn {
  color: #ff6c00; }

.bgcGly {
  background-color: #404040; }

.bgcOrn {
  background-color: #ff6c00; }

.bgcRed {
  background-color: #fc3131; }

/*テキストのハイライトカラーを変える  ------------------*/
::selection {
  /* Safari and Opera */
  background: #404040;
  color: #fff; }

::-moz-selection {
  /* Firefox */
  background: #404040;
  color: #fff; }

/*link  ------------------*/
a:link {
  color: #404040;
  text-decoration: none; }

a:visited {
  color: #404040;
  text-decoration: none; }

a:hover {
  color: #404040;
  text-decoration: none; }

a:active {
  text-decoration: none; }

/* reset
---------------------------------------------------------------------*/
body {
  margin: 0;
  padding: 0;
  font-size: 100%;
  /* IE */
  line-height: 26px;
  color: #404040;
  font-family: "Noto Sans Japanese", "Lucida Grande", "segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo";
  font-weight: 600;
  -webkit-text-size-adjust: none;
  /*border:solid 13px #00336a;*/ }

html > body {
  font-size: 14px;
  /* Except IE */ }

html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
  margin: 0;
  padding: 0;
  border: 0; }

h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  list-style-type: none; }

/* Layout
 * *********************************** */
article,
aside,
footer,
header,
nav,
section,
main {
  display: block; }

* {
  box-sizing: border-box; }

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

/* テキストエリア内文字サイズのブラウザ間での差異をなくす */
textarea {
  font-size: 100%; }

/* 画像の下にできる隙間をなくす */
img {
  border: 0;
  vertical-align: bottom; }

img {
  max-width: 100%;
  height: auto;
  width: auto; }

/* hr 要素は不可視で使う */
hr {
  display: none; }

/* br 要素のレスポンシブ化 */
@media screen and (max-width: 959px) {
  .brNone {
    display: none; } }
/*margin
----------------------------------*/
/*上  ------------------*/
.mrt5 {
  margin-top: 5px; }

.mrt10 {
  margin-top: 10px; }

.mrt15 {
  margin-top: 15px; }

.mrt20 {
  margin-top: 20px; }

.mrt30 {
  margin-top: 30px; }

.mrt40 {
  margin-top: 40px; }

.mrt50 {
  margin-top: 50px; }

/*右  ------------------*/
.mrr1 {
  margin-right: 1px; }

.mrr2 {
  margin-right: 2px; }

.mrr3 {
  margin-right: 3px; }

.mrr4 {
  margin-right: 4px; }

.mrr5 {
  margin-right: 5px; }

.mrr6 {
  margin-right: 6px; }

.mrr7 {
  margin-right: 7px; }

.mrr8 {
  margin-right: 8px; }

.mrr9 {
  margin-right: 9px; }

.mrr10 {
  margin-right: 10px; }

.mrr15 {
  margin-right: 15px; }

.mrr20 {
  margin-right: 20px; }

.mrr25 {
  margin-right: 25px; }

.mrr30 {
  margin-right: 30px; }

/*下  ------------------*/
.mrb5 {
  margin-bottom: 5px; }

.mrb10 {
  margin-bottom: 10px; }

.mrb15 {
  margin-bottom: 15px; }

.mrb20 {
  margin-bottom: 20px; }

.mrb30 {
  margin-bottom: 30px; }

.mrb40 {
  margin-bottom: 40px; }

.mrb50 {
  margin-bottom: 50px; }

/*左  ------------------*/
.mrl1 {
  margin-left: 1px; }

.mrl2 {
  margin-left: 2px; }

.mrl3 {
  margin-left: 3px; }

.mrl4 {
  margin-left: 4px; }

.mrl5 {
  margin-left: 5px; }

.mrl6 {
  margin-left: 6px; }

.mrl7 {
  margin-left: 7px; }

.mrl8 {
  margin-left: 8px; }

.mrl9 {
  margin-left: 9px; }

.mrl10 {
  margin-left: 10px; }

.mrl15 {
  margin-left: 15px; }

.mrl20 {
  margin-left: 20px; }

.mrl25 {
  margin-left: 25px; }

.mrl30 {
  margin-left: 30px; }

/*float
----------------------------------*/
.left {
  float: left; }

.right {
  float: right; }

#left {
  float: left; }

#right {
  float: right; }

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

opening/loader
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
.loading {
  z-index: 30;
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000; }

.loader {
  position: absolute;
  top: 40%; }

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 1.3em;
  height: 1.3em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out; }

.loader {
  color: #a7a7a7;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0; }

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.loader:after {
  left: 3.5em; }

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
/*
.loading p {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #e86363;
	width: 350px;
	height: 210px;
	background: url(../images/common/loading.png) no-repeat center center;
	background-size: 350px 190px;
	text-align: center;
	padding: 160px 0 0 0;
	margin: -105px 0 0 -175px; }*/
/*//////////////////////////////////

module
///////////////////////////////////*/
/*column
---------------------------*/
.column1 {
  margin: 0 auto;
  padding: 100px 0 50px;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  position: relative; }

.column2 {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  height: auto;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between; }

@media screen and (max-width: 959px) {
  .column1 {
    width: 90%;
    padding: 50px 0 30px; } }
@media screen and (max-width: 959px) {
  .column2 {
    width: 90%;
    flex-wrap: wrap; } }
/*工事中
---------------------------*/
.construction {
  margin: 0px 0px 50px;
  padding: 100px 0 0;
  width: 100%;
  box-sizing: border-box; }

.construction h2 {
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 20px;
  text-align: center; }

.construction p {
  text-align: center;
  font-size: 14px; }

.construction p span {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  color: #ea608e;
  font-weight: bold; }

/*//////////////////////////////////

 animation
///////////////////////////////////*/
/*curtain
---------------------------------*/
.curtainIn {
  position: relative;
  /*opacity: 0;*/
  z-index: 0; }

.maskWH {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
  background-color: #fff; }

.maskWH-wh {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 4;
  background-color: #e7e5e5; }

.wht {
  background-color: #fff; }

.gly {
  background-color: #f3f3f3; }

/*animation ------------*/
.ef-animation {
  animation: ef-animation 0s ease-in-out 0s forwards; }

@keyframes ef-animation {
  0% {
    opacity: 1; }
  100% {
    opacity: 1; } }
.ef-animation .maskWH {
  animation: maskWH 0.6s ease-in-out 0.5s forwards;
  margin-left: 0; }

.ef-animation .maskWH-wh {
  animation: maskWH 0.8s ease-in-out 0.8s forwards;
  margin-left: 0; }

@keyframes maskWH {
  0% {
    margin-left: 0; }
  100% {
    margin-left: 100%; } }
/*button
---------------------------------*/
.btn-Type1 {
  margin: 0 auto;
  padding: 1.2rem;
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0.05em;
  color: #fff !important;
  background-color: #ff6c00;
  font-family: ggb;
  font-feature-settings: "palt"; }

@media screen and (max-width: 959px) {
  .btn-Type1 {
    width: 100%; } }
/**/
.btn-Type2 {
  margin: 0 auto;
  padding: 1.2rem;
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0.05em;
  color: #fff !important;
  background-color: #B0B0B0;
  font-family: ggb;
  font-feature-settings: "palt"; }

@media screen and (max-width: 959px) {
  .btn-Type2 {
    width: 100%; } }
/**/
.button1 {
  cursor: pointer;
  display: block;
  position: relative;
  z-index: 0;
  transition: all 0.4s; }

.button1:hover {
  background-color: #ff0014; }

/*要素出現-----*/
.move,
.move:hover {
  transition: all 0.8s ease-in-out 1.0s; }

.fade_box {
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0; }

/**/
.mcurtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: mcurtain 1s;
  -webkit-animation-iteration-count: 1;
  z-index: 99; }

@-webkit-keyframes mcurtain {
  0% {
    width: 100%;
    background-color: #fff; }
  100% {
    width: 0%;
    background-color: #fff; } }
/**/
.transform01 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .5s ease;
  transition: all .5s ease; }

/*//////////////////////////////////

Header
///////////////////////////////////*/
header {
  margin: 0 auto;
  padding: 1rem;
  max-width: 1400px;
  position: relative; }
  header h1 {
    width: 300px;
    text-align: left; }

/*959px--*/
@media screen and (max-width: 959px) {
  header {
    width: 95%; } }
/*768px--*/
@media screen and (max-width: 768px) {
  header h1 {
    width: 100%;
    text-align: center; } }
/*//////////////////////////////////

G_Nav
//////////////////////////////////

nav{
	position:fixed;
	z-index: 100;
	top:30%;
	left:30px;
	
	margin:0 auto; 
	padding:0 ;
	width :;
	height:auto; }

.gnavList{
	width:100%;
	height:auto; }

.gnavList li{
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	
	margin-bottom: 40px;
	font-size:18px;
	line-height:18px;
	text-align:left;
	font-weight:500;
	letter-spacing: ; 
	font-family: mor;
	font-feature-settings : "palt";
	position: relative;/*lineAnimation
	transition: .2;}


.gnavList li:after {
	position: absolute;
	bottom: -23px;
	right: 10px;
	content: '';
	width: 3px;
	height: 3px;
	border-radius: 100%;
	z-index: 0;
	background-color: #575757; }
.gnavList li:last-child:after {display: none;}

nav ul li a{ display: block; text-decoration: none; height:auto; transition: .3s;position: relative;/*lineAnimation}

nav ul li a::after {
	content: '';
    display: block;
    position: absolute;
    top: -15%;
    left: 25%;
    width: 1px;
    height: 130%;
    background-color: #2be923;
	
	transform: scaleY(0); 
	transform-origin: center bottom; 
	transition: transform .3s;}

nav ul li a:hover::after { transform: scaleY(1);transform-origin: center top;}

.gnavList li a:link {color: #575757 !important;}
.gnavList li a:visited {color: #575757 !important;}
.gnavList li a:hover,.gnavList li a.active{color: #2be923 !important;}*/
/*- @media 959px-
@media screen and (max-width: 1200px){
nav{display:none; } }*/
/*//////////////////////////////////

Contents
/////////////////////////////////*/
main {
  margin: 0 auto;
  padding: 0;
  width: calc(100% - 150px);
  height: auto;
  position: relative; }

/*959px--*/
@media screen and (max-width: 959px) {
  main {
    width: calc(100% - 0px); } }
/*h2ttl
---------------------------*/
.h2ttl-Wrap {
  margin: 0;
  width: 100%;
  height: 200px;
  background-color: #dfdfdf;
  overflow: hidden; }

/*page-top
---------------------------*/
#page-top {
  width: 70px;
  height: 70px;
  display: none;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 100; }

#page-top p {
  margin: 0;
  padding: 0;
  text-align: center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

#move-page-top {
  color: #fff;
  line-height: 50px;
  text-decoration: none;
  display: block;
  cursor: pointer; }

@media screen and (max-width: 768px) {
  #page-top {
    right: 10px;
    bottom: 10px; } }
/*////////////////////////////////

footer
////////////////////////////////*/
footer {
  margin: 0;
  padding: 0 0 30px;
  width: 100%;
  height: auto;
  position: relative; }
  footer h1 {
    margin-bottom: 10px;
    text-align: center; }

#copy {
  width: 100%;
  height: auto;
  font-size: 12px;
  text-align: center;
  font-family: "mor"; }