@charset "utf-8";

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

/*  common.css */

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


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

reset
///////////////////////////////////*/

/* Fonts
---------------------------------------------------------------------*/
/*localfont  -------------------------*/
@font-face {font-family: a1g; src: url('../fonts/AP-OTF-A1GothicStdN-Bold.otf');}
@font-face {font-family: ftrM; src: url('../fonts/futura medium bt.ttf');}
@font-face {font-family: ftrH; src: url('../fonts/Futura Heavy font.ttf');}
/**/
.font_agn{font-family: agn; }
.font_ftr {font-family: ftr; }



/*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";}
.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  ------------------*/
.fcBlk{color:#000;}
.fcWht{color:#fff;}
.fcBlu{color:#004585;}
.fcBlu2{color:#001930;}
.fcYel{color:#f0ff00;}
.fcRed{background-color:#fd0000;}
.fcOrng{background-color:#fd6b00;}

.bgcBlc{background-color:#000;}
.bgcWht{background-color:#fff;}
.bgcBlu{background-color:#004585;}
.bgcBlu2{background-color:#002f59;}
.bgcYel{background-color:#f0ff00;}
.bgcRed{background-color:#fd0000;}
.bgcRed2{background-color:#ffcece;}
.bgcOrng{background-color:#fd6b00;}
.bgcOrng2{background-color:#ffeadb;}



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

/*link  ------------------*/
a:link {color: #000;text-decoration: none;}
a:visited {color: #000;text-decoration: none;}
a:hover {color: #000;text-decoration: none;}
a:active {text-decoration: none;}


/* reset
---------------------------------------------------------------------*/
html{font-size: 62.5%; }
body{
	margin: 0;
	padding: 0;
	height: 100%;
	font-size:1.6rem; /* 16px*/
	line-height: 2;
	color: #fff;
	background-color: #004585;
	font-family : "Noto Sans Japanese","Lucida Grande", "segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Verdana", "Arial", "sans-serif";
	/*游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;*/
	font-weight: 600;
	-webkit-text-size-adjust: none;	/*border:solid 13px #00336a;*/ }


/*responsive FONTS*/
h1 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3; }

h2 {
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;}

@media (min-width: 1200px) {
    h1 {font-size: 3.6rem;/* 36px*/}
    h2 {font-size: 2.4rem;/* 24px*/} }

@media screen and (max-width: 768px) {
    body{line-height: 2;}
    h1{font-size: 2.4rem;/* 24px*/}
    h2 {font-size: 2rem;/* 20px*/} }

h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	font-size:1.6rem;/* 16px*/
	text-align: left;
	list-style-type: none; }
/**/

/* テキストエリア内文字サイズのブラウザ間での差異をなくす */
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;}


/*font-size
----------------------------------*/
.f8{font-size:8px;}
.f9{font-size:9px;}
.f10{font-size:10px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f26{font-size:26px;}
.f28{font-size:28px;}
.f30{font-size:30px;}


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


/*txt-align
----------------------------------*/
.txt-align-l{text-align: left;}
.txt-align-r{text-align: right;}


/*arrow
----------------------------------*/

.arrow::before{
	content: '';
    display: block;
	width: 0px;
  	height: 0px;
	position: absolute;
    bottom: -10px;
    right: 46%;
    border: 5px solid;
 	border-color: transparent transparent #f0ff00 transparent;
    transform: rotate(180deg); 
	opacity: 0;
	transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);0s;}

.arrow:hover::before {bottom: -18px;opacity: 1;}

/**/
.arw1::before{
    right: -20px;
    width: 7px;
    height: 7px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: rotate(45deg); }

.arw2::before{
    right: 3px;
    width: 7px;
    height: 7px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }

.arw3::before{
    right: -20px;
    width: 7px;
    height: 7px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }

.arw4::before{
    right: -20px;
    width: 10px;
    height: 10px;
    border-top: 4px solid #000;
    border-right: 4px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }

.arw5::before{
    right: -20px;
    width: 10px;
    height: 10px;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }




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

module
///////////////////////////////////*/

/*column
---------------------------*/
.column1{
	width:100%;
	height:auto;
	box-sizing: border-box;
	position: relative; }
@media screen and (max-width: 959px){ .column1{width:90%; margin:0 auto;} }


.column2{
	height:auto;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between; }
@media screen and (max-width: 959px){ .column2{width:100%; flex-wrap: wrap; margin:0; padding: 0;} }
@media screen and (max-width: 768px){  }




/*工事中
---------------------------*/
.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 motion---------------*/
.curtainIn{ position:relative ; opacity: 0; z-index: 0;}

/*line */
.lineWrap {height:12px;}
.lineBlk { width: 100%; height: 50%; position: absolute; bottom:0; z-index: 4; background-color: #161616;}
.lineRed { width: 100%; height: 50%; position: absolute; bottom:0; z-index: 5; background-color: #de0716;}

/*mask */
.maskBlk { width: 100%; height: 100%; position: absolute; top:0; z-index: 4; background-color: #161616;}
.maskRed { width: 100%; height: 100%; position: absolute; top:0; z-index: 5; background-color: #de0716;}


/*animation -------------*/
.ef-animation { animation: ef-animation 0.5s cubic-bezier(.68,0,.37,1) 0.5s forwards;}
@keyframes ef-animation{ 0%{ opacity: 1;} 100% { opacity: 1;} }

/*line */
.ef-animation .lineBlk {animation: lineAnm 0.8s cubic-bezier(.68,0,.37,1) 0.3s forwards; width: 0; }
.ef-animation .lineRed { animation: lineAnm 0.8s cubic-bezier(.68,0,.37,1) 0.7s forwards; width: 0; }
@keyframes lineAnm { 0% { width: 0;} 100% {width: 100%;} }

/*mask */
.ef-animation .maskBlk {animation: maskAnm 0.8s cubic-bezier(.68,0,.37,1) 0.3s forwards; width: 0;}
.ef-animation .maskRed {animation: maskAnm 0.8s cubic-bezier(.68,0,.37,1) 0.7s forwards; width: 0; }
@keyframes maskAnm { 0% { width: 0;} 100% {width: 100%;} } 

/*- @media -*/
@media screen and (max-width: 768px){
.lineWrap {height:8px;} }


/*fade motion---------------------*/
.move,
.move:hover {transition:all 0.4s ease-in-out 1.0s;}

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


/*button
---------------------------------*/
.button{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: transform .3s;
	padding:10px;
	width:400px;
	height:auto;
	font-size: 1.8rem;
	text-align: center;
	color: #004585 ;
	background: #fff;
	font-family:ftrM;
	font-weight: ;
	box-sizing: border-box; }

.button:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  content: '';
  background: #000;
  transform-origin: center center;
  transform: scale(1, 0);
  transition: transform .3s; }

.button:hover:before {transform: scale(1, 1); }


/**/

.button2{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: transform .3s;
	padding:10px;
	width:400px;
	height:auto;
	font-size: 1.8rem;
	text-align: center;
	color: #fff ;
	border: 5px solid #fff; 
	background: ;
	font-family:ftrM;
	font-weight: ;
	box-sizing: border-box; }

.button2:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  content: '';
  background: #f0ff00;
  transform-origin: center center;
  transform: scale(1, 0);
  transition: transform .3s; }

.button2:hover{color: #004585 ;border: 5px solid #f0ff00;  }
.button2:hover:before {transform: scale(1, 1); }

/**/

.button3{
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: transform .3s;
	padding:2rem;
	width:100%;
	height:auto;
	font-size: 2rem;
	text-align: center;
	color: #004585 ;
	background: #fff;
	font-family:;
	font-weight: 800;
	box-sizing: border-box; }

.button3:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  content: '';
  background: #f0ff00;
  transform-origin: center center;
  transform: scale(1, 0);
  transition: transform .3s; }

.button3:hover:before {transform: scale(1, 1); }
.button3-ov{display: block;
	position: relative;
	padding:2rem;
	width:100%;
	height:auto;
	font-size: 1.8rem;
	text-align: center;
	color: #004585 ;
	font-family:;
	font-weight: 800;
	box-sizing: border-box;
	background: #f0ff00; }

/**/

.button4{
	margin:0 auto;
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: transform .3s;
	padding:1.5rem;
	width:50%;
	height:auto;
	font-size: 1.8rem;
	text-align: center;
	color: #fff !important;
	background: #1370c7;
	font-family:;
	font-weight: 800;
	box-sizing: border-box;
	border-radius: 10px;}

.button4:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  content: '';
  background: #f0ff00;
  transform-origin: center center;
  transform: scale(1, 0);
  transition: transform .3s; }

.button4:after { content:url("../images/common/btn-arrow.png"); position: absolute; top: 18px; right:20px;}

.button4:hover{color: #004585 !important; overflow: hidden;}
.button4:hover:before {transform: scale(1, 1); }


/**/

.button5{
	margin:0 auto;
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: transform .3s;
	padding:1.5rem;
	width:50%;
	height:auto;
	font-size: 1.8rem;
	text-align: center;
	color: #004585 !important;
	background: #fff;
	font-family:;
	font-weight: 800;
	box-sizing: border-box;
	border-radius: 10px;}

.button5:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  content: '';
  background: #f0ff00;
  transform-origin: center center;
  transform: scale(1, 0);
  transition: transform .3s; }

.button5:after { content:url("../images/common/btn-arrow2.png"); position: absolute; top: 18px; right:20px;}

.button5:hover{color: #004585 !important; overflow: hidden;}
.button5:hover:before {transform: scale(1, 1); }


/**/

.button6{
	margin:80px auto 0;
	cursor: pointer;
	display: block;
	position: relative;
	z-index: 0;
	transition: transform .3s;
	padding:1.5rem;
	width:400px;
	height:auto;
	font-size: 1.8rem;
	text-align: center;
	color: #004585 !important;
	background: #fff;
	font-family:;
	font-weight: 800;
	box-sizing: border-box;
	border-radius: 10px;}

.button6:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: -1;
  content: '';
  background: #f0ff00;
  transform-origin: center center;
  transform: scale(1, 0);
  transition: transform .3s; }

.button6:after { content:url("../images/common/btn-arrow2.png"); position: absolute; top: 18px; right:20px;}

.button6:hover{color: #004585 !important; overflow: hidden;}
.button6:hover:before {transform: scale(1, 1); }



/*- @media 959px-*/
@media screen and (max-width: 959px){
.button,.button2,.button4{padding:1rem; width:100%; }
.button5{padding:1rem; width:95%; }
.button4:after { content:url("../images/common/btn-arrow.png"); position: absolute; top: 13px; right:20px;}
.button5:after { content:url("../images/common/btn-arrow2.png"); position: absolute; top: 13px; right:20px;}}

/*- @media 768px-*/
@media screen and (max-width: 768px){
.btn1{font-size: 18px; letter-spacing: 0.05em; }
.button6{margin:20px auto 0;padding:1rem; width:95%; }}



/* btn-Wrap----------*/
.btn-Wrap{
    position: relative;
	margin:50px auto ;
	max-width: 960px;
	height:auto;
	box-sizing: border-box; }

.btn-Wrap a{ width: 49%; color: #004585; line-height: 24px;}

/*- @media 959px-*/
@media screen and (max-width: 959px){
.btn-Wrap{width: 95%;}
.btn-Wrap a{margin-bottom: 10px; width: 100%; color: #004585; line-height: 24px;} }



/* nav----------*/
.buttonNav {
    display: inline-block;
    position: relative;
	color: #fff !important;
	transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);0s; }

.buttonNav::after {
    content: '';
    display: block;
    position: absolute;
    top: -50px;
    left: 50%;
    width: 2px;
    height: 40px;
    background-color: #f0ff00;
 
    /* アニメーション用の設定 */
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 300ms;}

.buttonNav:hover {color:#f0ff00 !important;}
.buttonNav:hover::after {transform: scaleY(1);transform-origin: center bottom; }

.over{padding-bottom: 5px; color:#f0ff00 !important; border-bottom: 2px solid #f0ff00; height:auto; }

/*arrow -------------*/
.arwNav::before{
	content: '';
    display: block;
	width: 0px;
  	height: 0px;
	position: absolute;
    bottom: -10px;
    right: 46%;
    border: 5px solid;
 	border-color: transparent transparent #f0ff00 transparent;
    transform: rotate(180deg); 
	opacity: 0;
	transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);0s;}

.arwNav:hover::before {bottom: -18px;opacity: 1;}


/**/
.g-Scale{
	transition: .5s ease;
	filter: grayscale(100%); }


/**/
.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
///////////////////////////////////*/

/**/
#first-View{
	margin:0 auto;
	padding:20px 20px 0 ;
	width: 100%;
	height:auto;
	position: relative;
	box-sizing: border-box;
	z-index: 1000;}

#sub-View{
	margin:0 auto;
	padding:20px 20px 0 ;
	width: 100%;
	height:420px;
	position: relative;
	box-sizing: border-box;}

.line-Waku{
	position: relative;
	margin:50px auto;
	max-width: 1200px;
	height: 100%;
	border: 10px solid #fff;
	box-sizing: border-box; }

.bgFstView {
    background: url('../images/top/firstview_bg.gif') center center;
    background-size: cover; }

.bgSubView {
    background: url('../images/common/sub-top-bg.png') repeat center center; }


@media screen and (max-width: 959px){
#sub-View{height:auto;} }

/*- @media 768px -*/
@media screen and (max-width: 768px){
#first-View{padding:10px 10px 0;}
#sub-View{padding:10px 10px 0; height:auto;}
.line-Waku{height: 90%;border: 7px solid #fff; } }


header{margin:0 auto 0; padding:0 0 0; width : 100% ; box-sizing: border-box; z-index: 1010; position: relative; }


/*scrollanimation------------*/
.scrl {
	padding:25px 0 0 0;
	width:30px;
	height:100px;
	position: absolute;
	bottom: 0;
	right: 44px;
	z-index: 110; }

.scrl a {
	color:#fff;
	letter-spacing: 0.1em;
	-ms-writing-mode: tb-rl;/* IE用　*/
	writing-mode: vertical-rl;}

.scrl a .anm-line {
	position: absolute;
	top: 25px;
	left: 60%;
	content: '';
	width: 1px;
	height: 100px;
	margin-left: -1px;
	background-color: #fff; }

.scrl a .anm-circle {
	position: absolute;
	z-index: 10;
	top: 25px;
	left: 60%;
	content: '';
	width: 13px;
	height: 13px;
	border-radius: 50px;
	margin-left: -7px;
	background-color: #fff;
	text-shadow: 1px 1px 3px #000; 
	animation: sdb 2s infinite;
	box-sizing: border-box; }

@keyframes sdb {
	0% {transform: translate(0, 0); opacity: 1;}
	70% { opacity: 1;}
	100% {transform: translate(0, 90px) scale(0.5); opacity: 0.1;}}

/*- @media 959px -*/
@media screen and (max-width: 959px){.scrl {display: none;} }
/**/


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

G_Nav
/////////////////////////////////*/

nav{
	padding:0 ;
	width:100%;
	height:auto;
	z-index: 1000;
	position: relative;}

.gnavList{
	position: absolute;
	top:10px;
	left:5%;
	width:;
	height:auto;}

.gnavList li{
	position: relative;/*lineAnimation*/ 
	display: inline-block;
	width:;
	font-size:1.6rem;
	line-height:16px;
	font-weight:600;
	letter-spacing: 0.1em;
	text-shadow: 0px 0px 2px #004585;  }

.gnavList li a:link {display: block; margin:0 20px; }
.gnavList li a:visited {}

/*- @media 959px-*/
@media screen and (max-width: 959px){
nav{padding:0 ;height:auto; z-index: 1000; /*background-color: #fff;*/ }
nav .gnavList{display:none;} }



/*dropmenu-------*/
.dropmenu li ul{
	position:absolute;
	z-index: 9999;
	top: 35px;
	left: 0px;
	margin: 0;
	padding: 0;}

.dropmenu li ul li{ margin-top:-2px; overflow: hidden; width:250px; height:0; box-sizing: border-box; transition: .2s; }

.dropmenu li ul li a{
	display: block;
	margin:0;
	overflow: hidden;
	padding: 1.5rem;
	font-size: 14px;
	color:#fff;
	background: #001930;
	text-align: center;
	box-sizing: border-box;
	font-weight:800;
	transition: .2s;
	text-shadow: none;}

.dropmenu ul li:hover > a{background:;}
.dropmenu ul li a:hover{background:#f0ff00; color: #004585;}
#drop li:hover ul li{ margin:0; margin-top:-2px; padding:0; overflow: visible; height: auto; }






/*subHeader
---------------------------*/	
.subHeader {
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative;
	overflow: hidden; }

.sub-ttl{
	padding:30px 40px;
	width: 50%;
	height: auto;
	box-sizing: border-box;
	background-color: #000;
	position: absolute;
	top:50%;
    left:0%;
	z-index: 101; }


.sub-ttl h2 span{
	display: block;
	margin-bottom: 10px;
	font-size:2.4rem;
	line-height:24px;
	color: #fff;
	font-weight:600;
	letter-spacing:0.05em; }

.sub-ttl h2 span div{
	display: inline-block;
	font-size:2rem;
	font-weight:600; }

.sub-ttl h2{
	margin-bottom: 5px;
	width:100% ;
	font-size:8rem;
	line-height:72px;
	color: #fff;
	font-weight:1000;
	letter-spacing: 0.02em; }


.sub-ttl p{
	width:200px ;
	font-size:2rem;
	line-height:28px;
	color: #fff;
	font-weight:;
	letter-spacing: 0.02em; 
	border-bottom: 3px solid #fff;}

/*- @media 959x -*/
@media screen and (max-width: 959px){

.sub-ttl{padding:10% 3%;width: 100%;top:35%; left:0%; }
}

/*- @media 768px -*/
@media screen and (max-width: 768px){
.subHeader {height: 300px; }
.sub-ttl{padding:10% 3%;width: 100%;top:30%; left:0%; }
.sub-ttl h2 span{margin-bottom: 5px;font-size:2rem;line-height:20px; }
.sub-ttl h2 span div{font-size:1.8rem; }
.sub-ttl h2{margin-bottom: 0px;width:100% ;font-size:5rem;line-height:50px;} }


/*sideBtn
---------------------------*/	
.sideRight {
	margin:0px auto;
	width:20px;
	height:auto;
	position:absolute;
	top:5%;
	right:3%;
	z-index:110; }

.sideRight ul{
	padding:0 0;
	width:100%;
	height:auto;
	text-align:center; }

.sideRight ul li{
	margin:-5px 0;
	width:100%;
	height:auto;
	text-align:center; }

.sideRight ul h3{
	margin-bottom: 10px;
	width:100%;
	height:auto;
	text-align:center; }

.sideRight ul li a{
	display:block;
	color: #fff;
	height:auto;
	text-decoration: none; }

.sideRight ul li a:visited{color: #fff;}
.sideRight ul li a:hover{color: #f0ff00;}
.sideRight ul li span {font-size:18px; transition: .3s;}

/*- @media 959px-*/
@media screen and (max-width: 959px){.sideRight {display:none; }}


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

Contents
/////////////////////////////////*/
	
main {
	border-top: 5px solid #fff; 
	margin:0 auto 30px ;
	padding:0;
	width : 100%;
	height:auto;
	position:relative; }

.sub-Main {
	margin:0 auto;
	padding:0;
	width : 100%;
	height:auto;
	position:relative; }

/*- @media 768px-*/
@media screen and (max-width: 768px){
.sub-Main {margin:30px auto; } }

/*h2ttl
---------------------------*/
.h2ttl{
	position:relative;
	z-index: 10;
	margin-bottom:10px;
	font-size: 4rem;
	line-height: 40px;
	font-weight:600;
	color:#fff;
	letter-spacing: 0.05em;
	font-feature-settings : "palt";
	font-family: ftrM; }

.h2ttl span {
	display: block;
	font-size:1.6rem;
	line-height:20px;
	font-weight: 600;
	color:#fff;}

/*- @media 959px-*/
@media screen and (max-width: 959px){
.h2ttl{margin-bottom:10px;font-size: 3rem;line-height: 30px; }
.h2ttl span {font-size:1.6rem;line-height:24px; } }





/*page-top
---------------------------*/	
#page-top{
   width:70px;
   height:70px;
   display:none;
   position:fixed;
   right:35px;
   bottom:0px;
   z-index:1000; }
 
#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 768px-*/
@media screen and (max-width: 768px){#page-top p{display:none;} }



/*contactArea
------------------------------------*/

.contact{
	margin:0 auto ;
	width:100%;
	position: relative; }

.contact-Area{
	padding:5% 3%;
	width: 100%;
	position: relative;
	box-sizing: border-box;}

/**/
.tel-Box{
	width: 50%; 
	position:relative; }

.tel-Box h2{
	margin-bottom:20px;
	font-size:2.6rem;
	line-height:26px;
	text-align:center;
	color:#535353;
	font-weight: 800;
	letter-spacing: ; }

.tel-Box p{
	margin-bottom:20px;
	font-size:6.4rem;
	line-height:64px;
	text-align:center;
	color:#000;
	letter-spacing: ;
	font-family: ftr; }

.tel-Box h3{
	font-size:2.4rem;
	line-height:24px;
	text-align:center;
	color:#535353;
	font-weight: 800;
	letter-spacing: ; }

/**/
.mail-Box{
	width: 50%; 
	position:relative;}

.mail-Box h2{
	margin-bottom:20px;
	font-size:2.6rem;
	line-height:26px;
	text-align:center;
	color:#535353;
	font-weight: 800;
	letter-spacing: ; }

.mail-Box div{
	margin: 0 auto; }

.mail-Box a:link{color:; }
.mail-Box a:visited{color:#000; }


/*- @media 959px -*/
@media screen and (max-width: 959px){
.tel-Box{margin-bottom:20px; width: 100%; padding-bottom: 20px; width: 100%; border-bottom:2px solid #000000 ;   }
.mail-Box{width: 100%; }
}

/*- @media 768px -*/
@media screen and (max-width: 768px){
.contact{width:90%; }
.contact-Area{padding:7% 3%;}
.tel-Box{}
.tel-Box h2{margin-bottom:10px;font-size:1.8rem;line-height:26px; }
.tel-Box p{margin-bottom:10px;font-size:3rem;line-height:30px;}
.tel-Box h3{font-size:1.8rem;line-height:18px; }

.mail-Box{width: 100%; }
.mail-Box h2{margin-bottom:10px;font-size:1.8rem;line-height:26px; }
.mail-Box div{margin: 0 auto; } }


/*google map
------------------------------------*/
.gMap {height:550px ; }
.gmap1 {
	margin:30px auto;
	padding:0px 0px;
	width:100%;
	height:550px ; }

@media screen and (max-width: 959px){ .gMap,.gMap1{width:100%; height:300px;} }


/*slickList
------------------------------------*/
.slickList {
	position: relative;
	z-index: 10000000;
	margin: 0 auto 0; 
	padding:2% ;
	box-sizing: border-box;
	width:100%;
	height:auto;
	background-color: #eaeaea; }

.slickList li {
	margin: 0 5px;
	text-align: center;}

@media screen and (max-width: 959px){ .slickList {padding:4% ; } }


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

footer
////////////////////////////////*/		

footer{
	margin:50px 0;
	width:100%;
	height:auto;
	position:relative; }


/*slogan-----------------*/
.slogan{
	margin: 0 auto 50px;
	padding: 0;
	width: 100%;
	position:relative;}

.slogan figure{
	margin-bottom:20px;
	text-align:center; }

.slogan figure img{
	width: 120px;
	text-align:center; }

.slogan h2{
	margin:0;
	font-size: 3rem;
	line-height: 46px;
	font-weight:600;
	text-align:center;
	color:#fff;
	letter-spacing: 0.1em;
	font-feature-settings : "palt";
	font-family : "Noto Sans Japanese","Lucida Grande", "segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Verdana", "Arial", "sans-serif"; }

@media screen and (max-width: 768px){ 
.slogan{margin-bottom:30px;width: 95%;}
.slogan figure{margin-bottom:10px; }
.slogan figure img{width: 80px; }
.slogan h2{margin:0 auto;font-size: 1.8rem;line-height: 30px; }}


/*fList-----------------*/
.foot-sns-Area{
	margin:0 auto 50px;
	padding: 4rem 0;
	box-sizing: border-box;
	width: 100%;
	background-color: #002f59;}

.foot-sns-Area h3{
	margin-bottom:20px;
	width: 100%;
	height:auto;
	font-size:20px;
	line-height:26px;
	font-weight:600;
	text-align:center;
	color:#fff;
	letter-spacing: 0.1em;
	font-feature-settings : "palt";
	text-align: center;	
	font-family: ftrH;}

.foot-sns-Area ul{
	margin:0 auto;
	max-width: 300px;

	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;}

.foot-sns-Area ul li {
	width: ;
	text-align: center;
	margin:0 ;
	padding: 1.8rem;
	box-sizing: border-box;
	font-size:4rem;
	line-height:40px;
	letter-spacing:;
	font-weight:600;
	background-color: #fff;
	border-radius: 100px;}

.foot-sns-Area ul li a {color: #002f59;}

@media screen and (max-width: 768px){ 
.foot-sns-Area{margin:0 auto 30px;padding: 2rem 0;width: 100%;}
.foot-sns-Area h3{margin-bottom:10px;font-size:16px;}
.foot-sns-Area ul{width:50%;}
.foot-sns-Area ul li {padding: 1rem;font-size:2rem;line-height:20px;}

.foot-sns-Area ul li a {color: #002f59;}}


/*fInner-----------------*/
.fInner{
	margin:0 auto;
	padding: 0% 3%;
	position:relative;}




/*fList-----------------*/
.fList{
	margin:0 auto 50px;
	padding: 0;
	width: 90%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	position:relative;
	z-index: 1000; }

.fList li {
	position:relative;
	font-size:1.6rem;
	line-height:16px;
	letter-spacing:;
	font-weight:400;
	display:;}

.fList li a {
	display: block;
	padding:0;
	color:#fff;
	box-sizing: border-box;
	text-align: center;}



#copy{
	margin:0 auto 0 ;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	line-height:12px; }



/*- @media 959x-*/
@media screen and (max-width: 959px){
footer{margin-bottom: 80px; width:100%; }
.fInner{display: none; }
.fList{margin-bottom: 20px; width: 100%; flex-wrap: wrap;}
.fList li {width: 100%; margin-bottom: 20px; }
.fList li a {padding:0; }}