﻿@charset "UTF-8";

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

Name: pagetitle.css

Copyright 2018 Hitachi Document Solutions Co., Ltd.

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

/* Page Title
=========================================================================================== */
.PageTitleStyle {
  position: relative;
  overflow: hidden;
  height: 400px;
  margin: 0 auto 20px;
}
.PageTitleStyle .PageTitle_TextWrap {
  position: relative;
  margin: auto;
  max-width: 965px;
  height: 100%;
  z-index: 0;
}
.PageTitleStyle .PageTitle_Text {
	position: absolute;
	top: 25%;
	/*left: 30%;*/
	width: 150%;
	/*background-color: rgba(0,0,0,0.7);*/
	text-align: left;
	padding: 0 0px 0 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.PageTitleStyle .PageTitle_Text::before {
  content: "";
  /*background: rgba(0,0,0,0.7);*/
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 9999px;
}

.PageTitleStyle .PageTitle_Text::after {
  content: "";
  /*background: rgba(0,0,0,0.7);*/  
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 9999px;
}
#CategoryTop.PageTitleStyle .PageTitle_Text {
  width: 100%;
}
.PageTitleStyle .PageTitle_Text h1 {
    /*position: absolute;*/
    margin:  0px 0px 0px 0px;
	font-size: 250%;
	font-weight: bolder;
	line-height: 100%;
	color: #fff;
	text-shadow: black 1px 1px 2px, silver 0 0 20px;
    /*right: 195px;
    top: 499px;*/
}
.PageTitleStyle .PageTitle_Text h1 strong{
    /*position: absolute;*/
	color: #fff;
}
.PageTitleStyle .PageTitle_Text .SubTitle {
  margin:  15px 0px 0px 0px;
  font-size: 180%;
  line-height: 160%;
}
.PageTitleStyle .PageTitle_Text .SubTitle * {
  color: #fff;
  text-shadow: black 1px 1px 2px, silver 0 0 20px;
}
.PageTitleStyle .PageTitle_Image {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  filter: brightness(70%);
}

.PageTitleStyle .PageTitle_Image h1 {
	position: absolute;
	font-size: 83%;
	font-weight: normal;
	line-height: 83%;
	color: #fff;
	/*right: 10%;
	bottom: 3%;*/
}


@media screen and (min-width: 995px) and (max-width: 1304px){
	#CategoryTop {
		width: 100%;
		padding: 15px 15px;
		margin-left: -15px;
	}
	}

@media screen and (max-width: 994px) {
	#CategoryTop {
		width: 100%;
		padding: 15px 15px;
		margin-left: -15px;
	}
	}


/* responsive 
@media screen and (max-width: 579px) {
	.PageTitleStyle .PageTitle_Text {
	left: 20%;
	}
	.PageTitleStyle .PageTitle_Text h1 {
    right: 0px;
	}
}

@media screen and (max-width: 399px) {
	.PageTitleStyle .PageTitle_Text {
	left: 10%;
	padding: 0 0px 0 20px;
	}
	.PageTitleStyle .PageTitle_Text h1 {
    right: auto;
	width: 244px;
	}
	.PageTitleStyle .PageTitle_Text .SubTitle {
  	margin: 0;
  	font-size: 170%;
  	line-height: 150%;
  	color: #fff;
}
	.PageTitleStyle .PageTitle_Image {
  	background-position: -100px center;
}

