@charset "UTF-8";
/*-------------------------------
common
-------------------------------*/
.pc_DispNone{
display: none;
}
/*-------------------------------
slider
-------------------------------*/
#topSliderArea{
margin: 0 auto 4%;
}
/*-------------------------------
items
-------------------------------*/
.itemBlock{
max-width: 1000px;
margin: 0 auto 5%;
}
.itemBlock p{
text-align: center;
}
.itemBlock .ttlBlock{
position: relative;
text-align: center;
margin: 0 0 3%;
}
.itemBlock .ttlBlock h2{
max-width: 66px;
margin: 0 auto;
}
.itemBlock .icon{
position: absolute;
box-sizing: border-box;
right: 164px;
bottom: 0;
width: 145px;
height: 145px;
border-radius: 72px;
background: #c01a2b;
padding: 45px 19px 20px 21px;
}
.itemBlock .ttlBlock p.icon:last-child{
right: 0;
}
.itemBlock .itemListBlock01{
margin: 0 0 5%;
width: 100%;
}
.itemBlock .itemListBlock01 li{
width: 32%;
margin: 0 2% 5% 0;
float: left;
}
.itemBlock .itemListBlock01 li:nth-child(3n){
margin: 0 0 5%;
}
.itemBlock .button{
background: #c01a2b;
width: 298px;
border: #c01a2b 1px solid;
}
.itemBlock .button img{
padding: 19px 91px 13px;
max-width: 118px;
border-radius: 10px;
}
.itemBlock .button:hover{
background: #fff;
}
/*-------------------------------
news
-------------------------------*/
.newsBlock{
max-width: 1000px;
margin: 0 auto 5%;
font-size: 0.8975rem;
}
.newsBlock a{
color:#000;
}
.newsBlock a:hover{
text-decoration: underline;
}
.newsBlock h2{
margin: 0 0 1.2% 0.5%;
}
.newsBlock .borderBlock01{
border: 1px #000 solid;
line-height: 1.5;
padding: 1.1% 2% 1.1% 2%;
}
.newsBlock .borderBlock01 .inner{
width:78%;
float: left;
}
.newsBlock .borderBlock01 .inner +p{
width:20%;
float: right;
margin: 2.87rem 0 0;
text-align: right;
}
.newsBlock .borderBlock01 dt,
.newsBlock .borderBlock01 dd{
float: left;
width: 80%;
margin: 0 0 0 15px;
}
.newsBlock .borderBlock01 dt{
width: 10%;
margin: 0 15px 0 0;
}
/*-------------------------------
denshichi
-------------------------------*/
.denshichiBlock{
width:100%;
padding: 9% 28.83%;
margin:0 0 7%;
position: relative;
overflow: hidden;
background:url(../img/top/denshichi_bg_01.jpg) 50% 48% no-repeat;
background-size: cover;
box-sizing: border-box;
}
.denshichiBlock .innerBlock h2{
max-width: 783px;
margin: 0 auto 8%;
}
.denshichiBlock .innerBlock .text{
text-align: center;
color: #fff;
line-height: 3;
margin: 0 0 8%;
}
.denshichiBlock .btn2colBlock li{
float: left;
width: 48%;
background: rgba(255,255,255,0);
box-sizing: border-box;
margin: 0 4% 0 0;
}
.denshichiBlock .btn2colBlock li:last-child{
margin: 0;
}
/*-------------------------------
story
-------------------------------*/
.storyBlock{
max-width: 1000px;
margin: 0 auto 5%;
}
.storyBlock h2{
max-width: 322px;
margin: 0 auto 3.2%;
}
.storyBlock p{
margin: 0 auto 1%;
}
.storyBlock p:last-child{
margin: 0;
}
/*-------------------------------
movie
-------------------------------*/
.movieBlock{
max-width: 1000px;
margin: 0 auto 5%;
overflow: hidden;
background: url(../img/common_bg_01.gif) left bottom repeat-x;
background-size: 4px;
padding: 0 0 44px;
}
.movieBlock h2{
max-width: 9.2%;
float: left;
margin: 0 0 5%;
}
.movieBlock .movie2colBlock{
max-width: 78.9%;
float: right;
}
.movieBlock .movie2colBlock .movie{
margin: 0 0 3%;
}
.movieBlock .movie2colBlock li{
max-width: 48.3%;
float: left;
margin: 0 3.4% 4% 0;
}
.movieBlock .movie2colBlock li:nth-child(2n){
margin:0 0 4%;
}
.movieBlock .movie2colBlock li dt{
max-width: 82px;
margin: 0 auto 3%;
}
.movieBlock .movie2colBlock li dd{
color:#7f6f63;
line-height: 1.5;
}
.movieBlock .movie2colBlock li dd .bold{
font-weight: bold;
color:#7f6f63;
}
.movieBlock .movie2colBlock li:last-child dt{
max-width: 103px;
}
/*-------------------------------
topic
-------------------------------*/
.topicBlock{
max-width: 1000px;
margin: 0 auto 5%;
}
.topicBlock h2{
max-width: 320px;
margin: 0 auto 5%;
}
.topicBlock ul{
margin: 0 0 2%;
}
.topicBlock ul li{
float: left;
margin: 0 2% 2% 0;
border-radius: 5px;
box-shadow: 6px 6px #ccc;
width: 32%;
box-sizing: border-box;
}
.topicBlock ul li img{
border-radius: 5px;
}
.topicBlock ul li:nth-child(3n){
margin: 0;
}
/*-------------------------------
info
-------------------------------*/
.infoBlock{
width: 100%;
max-width: 800px;
margin: 0 auto 5%;
line-height: 1.5;
}
.infoBlock h2{
max-width: 283px;
padding: 10% 0 0;
margin: 0 auto 5%;
}
.infoBlock .contentBlock{
border-bottom: 1px dashed #c9c9c9;
padding: 0 0 2%;
}
.infoBlock .contentBlock:last-child{
border-bottom: none;
padding: 0;
}
.infoBlock .contentBlock li{
float: left;
margin: 2% 0 0;
width: 48%;
}
.infoBlock .contentBlock li:nth-child(1){
border-right: 1px dashed #c9c9c9;
padding: 0 1.9% 0 0;
margin: 2% 0 0 0;
}
.infoBlock .contentBlock li:nth-child(2){
padding: 0 0 0 1.9%;
width: 48%;
}
.infoBlock .contentBlock .cat{
font-size: 1.125rem;
color:#b9a48b;
margin: 10px 0;
}
.infoBlock .ttl2colBlock{
margin: 0 0 10px;
}
.infoBlock .contentBlock .ttl{
width: 73%;
float: left;
line-height: 1.2;
}
.infoBlock .contentBlock .date{
float: right;
border: #000 solid 1px;
border-radius: 5px;
line-height: 1.2;
margin: -10px 0 0;
padding: 5px;
}
.infoBlock .contentBlock .excerpt{
font-size:0.9065rem;
}
/*-------------------------------
study
-------------------------------*/
.studyBlock{
margin: 0 0 5%;
padding: 5% 0;
background: url(../img/common_bg_02.jpg) left top;
}
.studyBlock .text2ColBlock h2{
float: right;
width: 100%;
max-width: 91px;
}
.studyBlock .text2ColBlock{
margin: 0 auto;
width: 100%;
max-width: 840px;
}
.studyBlock .text2ColBlock .leftBlock{
float: left;
max-width: 85.3%;
position: relative;
}
.studyBlock .leftBlock .img{
max-width: 594px;
margin: 0 0 5%;
}
.studyBlock .leftBlock .mincho{
margin: 0 0 5%;
}
.studyBlock .leftBlock .icon{
position: absolute;
width: 100%;
max-width: 133px;
top: 13%;
right: 0%;
}
.studyBlock .leftBlock .button{
background: #c01a2b;
max-width: 300px;
margin: 0 auto;
padding: 0;
}
.studyBlock .leftBlock .btn{
text-align: center;
}
.studyBlock .leftBlock a.button{
background: #c01a2b;
max-width: 298px;
margin: 0 auto;
border: #c01a2b 1px solid;
}
.studyBlock .leftBlock a.button img {
max-width: 122px;
padding: 11px 87px;
border-radius: 9px;
}
.studyBlock .leftBlock a.button:hover{
background: #fff;
}
/*-------------------------------
gallarey
-------------------------------*/
.galleryBlock{
margin: 0 0 12%;
position: relative;
}
.galleryBlock h2{
max-width: 283px;
margin: 0 auto 2%;
}
.galleryBlock .icon{
max-width: 137px;
position: absolute;
right: 30%;
bottom: -15%;
}
/*--------------------------------------------------------------
tablet
--------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
/*-------------------------------
item
-------------------------------*/
.itemBlock{
width: 95%;
margin: 0 auto 10%;
}
.itemBlock .ttlBlock .icon{
bottom: 0;
box-sizing: border-box;
height: 120px;
padding: 39px 19px 20px 21px;
position: absolute;
right: 124px;
width: 120px;
}
/*-------------------------------
news
-------------------------------*/
.newsBlock{
width: 95%;
margin: 0 auto 10%;
}
.newsBlock .borderBlock01 dt{
width: 10%;
margin: 0 6% 0 0;
}
/*-------------------------------
denshichi
-------------------------------*/
.denshichiBlock{
padding: 9% 10%;
background-size: 114% auto;
}
/*-------------------------------
story
-------------------------------*/
.storyBlock .bgBlock{
margin: 0 0 5%;
background-size: cover;
background-position: 50% top;
}
.storyBlock .innerBlock{
background-position: 50% top;
width: 100%;
padding: 40px 2.7% 0 26.7%;
}
/*-------------------------------
movie
-------------------------------*/
.movieBlock{
width: 95%;
margin: 0 auto 10%;
}
/*-------------------------------
topic
-------------------------------*/
.topicBlock{
width: 95%;
margin: 0 auto;
}
/*-------------------------------
info
-------------------------------*/
.infoBlock{
max-width: 95%;
margin: 0 auto 5%;
}
.infoBlock .contentBlock .ttl {
width: 100%;
float: none;
line-height: 1.2;
}
.infoBlock .contentBlock .date {
margin: 10px 0 0;
padding: 5px;
width: 88px;
float: none;
}
/*-------------------------------
study
-------------------------------*/
.studyBlock .text2ColBlock{
max-width: 95%;
}
.studyBlock .text2ColBlock .leftBlock {
  max-width: 79%;
}
.studyBlock .leftBlock .img {
max-width: 90.4%;
}
.studyBlock .leftBlock .icon {
max-width: 106px;
right: -39px;
top: 16%;
}
/*-------------------------------
gallarey
-------------------------------*/
.galleryBlock .icon {
bottom: -42px;
max-width: 96px;
position: absolute;
right: 12%;
}
}
/*--------------------------------------------------------------
smart phone
--------------------------------------------------------------*/
@media screen and (max-width: 599px) {
/*-------------------------------
common
-------------------------------*/
.pc_DispNone{
display: block;
}
/*-------------------------------
slider
-------------------------------*/
#topSliderArea{
margin: 19vw auto 8%;
}
/*-------------------------------
item
-------------------------------*/
.itemBlock{
margin: 0 auto 15%;
}
.itemBlock .ttlBlock{
margin: 0 auto 3%;
}
.itemBlock .ttlBlock h2 {
max-width: 55%;
margin: 0 auto 5%;
}
.itemBlock .spBottomBlock{
letter-spacing: -0.4em;
}
.itemBlock .spBottomBlock p{
letter-spacing: normal;
display: inline-block;
width: 49%;
margin: 0 2% 0 0;
}
.itemBlock .spBottomBlock p:last-child{
margin: 0;
}
.itemBlock .icon{
position: relative;
right: 0;
bottom: 0;
width: 100%;
height: auto;
border-radius: 5px;
background: #fff;
padding: 15% 10% 10%;
display: inline-block;
border: 1px solid #c01a2b;
}
.itemBlock .itemListBlock01{
margin: 0 auto 5%;
}
.itemBlock .itemListBlock01 li{
width: 49%;
margin: 0 2% 5% 0;
}
.itemBlock .itemListBlock01 li:nth-child(3n){
margin: 0 2% 5% 0;
}
.itemBlock .itemListBlock01 li:nth-child(2n){
margin: 0 0 5% 0;
}
.itemBlock .btnBlock{
width: 90%;
margin: 0 auto 5%;
}
.itemBlock .button{
background: #c01a2b;
width: 100%;
padding: 0;
}
.itemBlock .button img {
max-width: 45%;
padding: 5% 27.5%;
}
.itemBlock .button:hover{
background: #fff;
}
/*-------------------------------
news
-------------------------------*/
.newsBlock{
width: 95%;
margin: 0 auto 15%;
}
.newsBlock .borderBlock01 {
line-height: 1.5;
padding: 3% 5%;
}
.newsBlock .borderBlock01 .inner,
.newsBlock .borderBlock01 .inner + p,
.newsBlock .borderBlock01 dt,
.newsBlock .borderBlock01 dd{
float: none;
width: 100%;
}
.newsBlock .borderBlock01 dd{
margin: 0 0 0 2%;
width: 98%;
}
.newsBlock .borderBlock01 .inner + p{
margin: 10px 0 0;
}
/*-------------------------------
denshichi
-------------------------------*/
.denshichiBlock {
background-size: 223% auto;
margin: 0 0 15%;
padding: 9% 5%;
}
.denshichiBlock .innerBlock .text {
line-height: 2;
font-size: 0.75rem;
}
/*-------------------------------
story
-------------------------------*/
.storyBlock{
margin: 0 auto 15%;
}
.storyBlock h2 {
max-width: 65%;
}
.storyBlock .innerBlock{
padding: 39px 4% 0 14%;
}
/*-------------------------------
movie
-------------------------------*/
.movieBlock {
  margin: 0 auto 15%;
  width: 90%;
  padding: 0;
}
.movieBlock h2,
.movieBlock .movie2colBlock{
float: none;
margin: 0 0 10%;
max-width: 100%;
}
.movieBlock h2{
max-width: 60%;
margin: 0 auto 5%;
}
.movieBlock .movie2colBlock li{
float:none;
width: 100%;
max-width: 100%;
margin: 0 0 10%;
}
.movieBlock .movie2colBlock li:nth-child(2n) {
margin: 0 0 10%;
}
.movieBlock .movie2colBlock li dt {
margin: 0 auto 3%;
max-width: 104.5px;
}
.movieBlock .movie2colBlock li:last-child dt {
  max-width: 85px;
}
.movieBlock .movie2colBlock li dd {
font-size: 0.875rem;
}
/*-------------------------------
topic
-------------------------------*/
.topicBlock{
margin: 0 auto 15%;
}
.topicBlock h2 {
max-width: 245px;
}
.topicBlock ul {
margin: 0;
float: left;
}
.topicBlock ul li:nth-child(3n){
margin: 0 4% 4% 0;
}
.topicBlock ul li {
margin: 0 4% 4% 0;
width: 48%;
}
.topicBlock ul li:nth-child(2n){
margin: 0 0 4%;
}
/*-------------------------------
info
-------------------------------*/
.infoBlock {
width: 95%;
margin: 0 auto 15%;
border: none !important;
}
.infoBlock h2 {
max-width: 220px;
padding:0;
}
.infoBlock .contentBlock li {
float: none;
margin: 0 0 5% !important;
padding: 0 0 5% !important;
width: 100% !important;
border: none !important;
border-bottom: 1px dashed #c9c9c9 !important;
}
/*-------------------------------
study
-------------------------------*/
.studyBlock {
margin: 0 0 10%;
padding: 7.5% 0 15%;
}
.studyBlock .text2ColBlock{
width: 95%;
margin: 0 auto;
}
.studyBlock .text2ColBlock h2,
.studyBlock .text2ColBlock .leftBlock {
float: none;
max-width: 100%;
}
.studyBlock .text2ColBlock h2{
max-width: 80%;
margin: 0 auto 15%;
}
.studyBlock .leftBlock .mincho {
font-size: 0.875rem;
line-height: 1.2;
}
.studyBlock .leftBlock .icon {
margin: 0 auto 5%;
max-width: 90px;
position: absolute;
right: 0;
top: -18%;
width: 100%;
}
.studyBlock .button {
  background: #c01a2b;
  border: 1px solid #c01a2b;
}
.studyBlock .button:hover {
  background: #fff;
}
.studyBlock .leftBlock a.button{
width: 100%;
max-width: 100%;
}
.studyBlock .leftBlock a.button img {
padding: 5% 30%;
max-width: 40%;
}
/*-------------------------------
gallarey
-------------------------------*/
.galleryBlock h2 {
max-width: 70%;
margin: 0 auto 5%;
}
.galleryBlock .icon{
bottom: 0;
max-width: 95%;
position: relative;
right: 0;
margin: 5% auto 0;
background: #c01a2b;
border-radius: 10px;
}
.galleryBlock .icon img{
padding: 5% 30%;
max-width: 40%;
}
}

/*190408 add*/
.contents_ttl{
	max-width: 1000px;
	margin: 3% auto 5%;
	padding: 0 3%;
	text-align: center;
	font-size: 1.5rem/*24*/;
	font-weight: bold;
	color: #736357;
	letter-spacing: .2rem;
	position: relative;
}
.contents_ttl br{display: none}
.contents_ttl::after{
	content: "";
	top: 50%;
	width: 60%;
	height: 1px;
	left: 0;
	right: 0;
	margin: auto;
	border-top:1px solid #736357;
	position: absolute;
}
.contents_ttl span{
display: inline-block;
background: #fff;
padding: 5px 15px;
color: #736357;
position: relative;
z-index: 1;
}
@media screen and (max-width: 1000px) {
.contents_ttl{
	font-size: 2.4vw;
	letter-spacing: .08vw
}
.contents_ttl span{padding: .5vw 1.5vw}
}
@media screen and (max-width: 599px) {
.TopContent#contents-wrap{
margin: 0 !important;
}
.contents_ttl{
	line-height: 1.5;
	font-size: 5vw;
	margin: 0 auto 8%;
}
.contents_ttl br{display: block}
.contents_ttl::after{width: 80%}

}