@import url("base.css");
/*************************************************************************** COMMON STYLE */
@font-face { font-family: "HakusyuGyosyo_kk"; src: url("../../fonts/2019/HakusyuGyosyo_kk/b22a0a71d2f6bd524bea8c916cf7509d.eot"); /* IE9*/ src: url("../../fonts/2019/HakusyuGyosyo_kk/b22a0a71d2f6bd524bea8c916cf7509d.eot?#iefix") format("embedded-opentype"), url("../../fonts/2019/HakusyuGyosyo_kk/b22a0a71d2f6bd524bea8c916cf7509d.woff2") format("woff2"), url("../../fonts/2019/HakusyuGyosyo_kk/b22a0a71d2f6bd524bea8c916cf7509d.woff") format("woff"), url("../../fonts/2019/HakusyuGyosyo_kk/b22a0a71d2f6bd524bea8c916cf7509d.ttf") format("truetype"), url("../../fonts/2019/HakusyuGyosyo_kk/b22a0a71d2f6bd524bea8c916cf7509d.svg#HakusyuGyosyo_kk") format("svg"); /* iOS 4.1- */ }

@font-face { font-family: mincho; src: url("../../fonts/2019/YuMincho/yumin.ttf"); }

.mincho { font-family: "mincho" !important; }

.hakusyu { font-family: "HakusyuGyosyo_kk" !important; }

body { background-color: #0d1147; font-size: 14px; line-height: 1.5; color: #fff; font-family: mincho; }

p { letter-spacing: 1px; }

.inner { width: 1020px; margin: 0 auto; }

/*VALIDATE CONTACT*/
.error { display: block; font-size: 12px; color: red; }

.areaTitle { color: #fff; font-size: 80px; width: 80px; line-height: 0.9; font-weight: normal; }

.wrap1 { overflow: hidden; }

.wrap1 .areaTitle { float: left; margin-top: 30px; margin-left: 45px; writing-mode: tb-lr; height: 75%; }

.wrap1 .wrap1Right { float: right; width: 740px; }

@-moz-document url-prefix() { .wrap1 .areaTitle { writing-mode: vertical-lr; } }

/* HEADER */
#header { width: 100%; background: #000; position: fixed; top: 0; left: 0; right: 0; z-index: 99999; min-width: 1349px; }

#header .mainMenu { text-align: center; }

#header .mainMenu .menu { display: inline-block; vertical-align: top; padding: 10px 0; }

#header .mainMenu .menu li { border-right: 1px solid #313138; width: 199px; float: left; }

#header .mainMenu .menu li:last-child { border-right: none; }

#header .mainMenu .menu li a { color: #fff; font-size: 20px; }

/* MAIN */
#main { width: 100%; background: url("../../images/2019/index/main_effect.png") no-repeat top center/100% 100%; position: relative; margin-top: 50px; }

#main .mainPhoto { text-align: center; }

#main .logo { position: absolute; left: 50%; bottom: -1.2%; transform: translateX(-50%); }

#main .smog { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); width: 85%; }

/* CONTENT */
#content { width: 100%; }

/* FOOTER */
#footer { text-align: center; padding-top: 80px; background-image: linear-gradient(transparent 10%, #000); }

#footer a.rootBtn { display: block; max-width: 300px; text-align: center; color: #fff; margin: 0 auto; padding: 15px; background: rgba(255, 255, 255, 0.15); }

#footer a.rootBtn:hover { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; }

#footer .scrollToTop { position: fixed; right: 4%; bottom: 9%; display: none; }

#footer .copyright { font-size: 12px; padding: 50px 0 25px; }

.sp { display: none; }

/*HOVER EFFECT*/
@media (min-width: 769px) { #header .mainMenu .menu li { position: relative; }
  #header .mainMenu .menu li:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(13, 17, 71, 0.6); transform: scale(0, 1); transform-origin: top left; transition: all 300ms ease; }
  #header .mainMenu .menu li:hover:after { transform-origin: top right; transform: scale(1, 1); }
  #header .mainMenu .menu li a { position: relative; z-index: 1; } }

/* FIX TABLET */
@media (max-width: 1350px) and (min-width: 769px) { body { width: 1350px; } }

/* STYLE MOBILE */
@media (max-width: 768px) { .pc { display: none; }
  .sp { display: block; }
  .inner { width: 100%; padding: 0 5.33%; }
  .areaTitle { width: 100%; font-size: 40px; text-align: center; letter-spacing: 0; }
  .wrap1 .areaTitle { margin: 0 0 30px 0; }
  .wrap1 .wrap1Right { width: 100%; }
  #header { display: none; }
  #main { overflow: hidden; margin-top: 0; }
  #main .inner { padding: 0; }
  #main .inner .logo { width: 69.5%; }
  #main .inner .smog { width: 150%; }
  #footer { padding-top: 50px; }
  #footer a.rootBtn { margin: 0 auto; }
  #footer .scrollToTop { position: fixed; right: 0.5%; bottom: 4%; width: 13.5vw; }
  #footer .copyright { font-size: 11px; padding: 30px 0 12px; } }