@charset "utf-8";
/*=============================================================
 top_message Layout
=============================================================*/
/* ttl index
-------------------------------------------------------------*/
#topicPath{
  color: #333;
  top: 20px;
}
#topicPath a{
  color: #333;
}
#topicPath a::after{
  background: #333;
}
#ttl-page{
  height: 100%;
  top:20px;
}
#ttl-page #ttl-pageinner{
  width: 100%;
  max-width: 960px;
  margin-bottom: 40px;
  margin-left: auto !important;
  margin-right: auto !important;
}
#ttl-page .ttl-pageBox{
  position: absolute;
  top:78px;
  left:-126px;
}
#ttl-page .ttl-pageBox h1{
  position: relative;
  color: #fff;
  padding: 0;
  height: 100%;
}
#ttl-page .ttl-pageBox h1>.ttl{
  position: absolute;
  width: 100%;
  top:50%;
  left:50%;
  font-size: 26px;
  transform: translateY(-50%) translateX(-50%);
  vertical-align: middle;
}
#ttl-page .ttl-pageBox h1>.ttl>img{
 margin: 2px 10px 0 0;
}
#ttl-page .main-img{
  text-align: right;
  margin-right: -36px;
}
#ttl-page .catch{
  text-align: left;
  position: absolute;
  top:292px;
	font-size: 26px;
	line-height: 1.8;
}
#ttl-page .catch>span{
  display:block;
  position:relative;
  padding-bottom: 50px;
}
#ttl-page .catch>span:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 145px;
  height: 4px;
  background: linear-gradient(to right, #cf121b 0%, #f6b32c 100%);
}
#ttl-page .name{
  margin-left :125px;
  margin-top: 277px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
#ttl-page .name>span{
  font-size: 16px;
  display: block;
  line-height: 1.8;
  margin-bottom: 12px;
}
@media only screen and (min-width: 751px) and (max-width: 1260px) {
  #ttl-page #ttl-pageinner{width: 90%;}
  #ttl-page .catch{top: 252px;}
  #ttl-page .name{margin-top:227px;}
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:750px), only screen and (max-device-width:750px){
/*=============================================================
 top_message Layout
=============================================================*/  
/* ttl index
-------------------------------------------------------------*/
#ttl-page #ttl-pageinner{
  margin-left: 0 !important;
  margin-right: 0 !important;
	margin-bottom: 0;
}
#ttl-page .ttl-pageBox{
  position: absolute;
  top:0;
  left:0;
  width: 260px;
}
#ttl-page .ttl-pageBox h1{
  position: relative;
  color: #fff;
  padding: 0;
  height: 100%;
}
#ttl-page .ttl-pageBox h1>.ttl{
  font-size: 22px;
	line-height: 1.2;
  width: 100%;
}
#ttl-page .ttl-pageBox h1>.ttl>img{
 width: 42px;
 margin-top: 2px;
} 
#ttl-page .ttl-pageBox h1>.imgttl-bg{
	width: 260px;
	height: auto;
}
#ttl-page .main-img{
  margin-top: 42px;
  margin-left: 20px;
  margin-right: 0;
  /*height: 380px;*/
  width: 100%;
  text-align: right;
	overflow: hidden;
	position: static;
}
	
#ttl-page .main-img>img{
  height: auto;
  width: 100%;
  object-fit: cover;
  object-position: 100% 0;
}  
#ttl-page .catch{
  position: static;
  margin: 20px;
  font-size: 20px;
}
#ttl-page .catch>span{
  padding-bottom: 30px;
}
#ttl-page .catch>span:after{
  left: -20px;
  width: 76%;
}
#ttl-page .name{
  margin-left :40px;
  margin-top: 110px;
  font-size: 18px;
}
#ttl-page .name>span{
  font-size: 12px;
}
  
}