@charset "utf-8";

@import url("header.css");
@import url("nav.css");
@import url("footer.css");

/*body *{ border:0.02px solid #F50004; background:rgba(000,000,000,0.1)}
*/


html,
body { width:100%; min-width: 320px; overflow-x: hidden; }
body { height:auto; background:#fff; }


/* フォントの指定 */
html { font-size: 62.5%; }
body,input,select,textarea { 
	font-size:16px; font-size:1.6rem; 
	line-height:1.8; 
	letter-spacing:0.05em;
	font-family: Arial, Helvetica,"Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-feature-settings: "palt";
	color:#000000; }
	
a {color:#000000; text-decoration: none; transition: 0.3s;
}
p {text-align:justify; text-justify:inter-ideograph;}
main a {color:#000000; text-decoration: underline;}
main a:hover {color:#808080;}

/* セレクト時の色指定 */
::selection {
    background: #DFDFDF;
    color: #000;
}
::-moz-selection {
    background: #DFDFDF;
    color: #000;
}

.inner { width: 94%; margin: 0 auto;}
.mw100 { max-width: 100%;}
.showPc { }
.showSp { display: none;}
.imgTxt { position:relative;}
.imgTxt p { overflow: hidden;position:absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent:-100vw; font-size: 10px!important; }
@media screen and (max-width:768px){
	html { font-size: 50%; }
	.showPc { display: none ; }
	.showSp { display: block ; }
}




/* --------------------------------------------

#main

---------------------------------------------- */ 

#main { }


.pageTitle-def {
	margin-bottom: 2em;
	background:#1E1E1E;
}
.pageTitle-def h1 {
	padding: 1.5em 0 0.4em;
	text-align: center;
	font-size: 20px; font-size: 2rem;
	font-weight: normal;
	color: #fff;
}



/* --------------------------------------------

.breadcrumb　パンくずリスト

---------------------------------------------- */ 
.breadcrumb {
	margin-top: 80px;
	overflow: hidden;
	background: #282828;
}
.breadcrumb * {
}
.breadcrumb li {
	float: left;
	position: relative;
	padding: 0 2em;
	font-size: 13px; font-size: 1.3rem;
	line-height: 2.4;
	color: #fff;
}
.breadcrumb li:last-child {
	padding-left: 2.8em;
	max-width: calc(100vw - 10em);
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.breadcrumb li a {
	color: #fff;
	border-bottom: 1px solid #B5B5B5;
	transition: 0.2s;
}
.breadcrumb li a::after {
	content: "";
	position: absolute; right: -0.6em;
	border-bottom: none;
	transition: 0.2s;
}
.breadcrumb li:hover a {
	color: #ADADAD;
	border-bottom: 1px solid #ADADAD;
}

/* 三角部分 */
.breadcrumb li a::before{
  border: 1.2em solid transparent;
  border-left: 1.2em solid #f3f3f3;
  box-sizing: border-box;
  content: "";
  height: 1.2em;
  width: 1.2em;
  margin: -1.2em 0 0 0;
  position: absolute;
  top: 50%;
  left: 100%;
  z-index:2;
}
.breadcrumb li a::after {
  border: 1.1em solid transparent;
  border-left: 1.1em solid #282828;
  box-sizing: border-box;
  content: "";
  height: 1.1em;
  width: 1.1em;
  margin: -1.1em 0 0 0px;
  position: absolute;
  top: 50%;
  left: 100%;
  z-index:3;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

@media screen and (max-width:960px){
.breadcrumb {
	margin-top: 60px;
}
}
@media screen and (max-width:599px){
.breadcrumb {
	margin-top: 50px;
}
.breadcrumb li {
	display: block;
	padding: 0 1.4em;
	font-size: 10px; font-size: 1.0rem;
}
.breadcrumb li:nth-last-of-type(1),
.breadcrumb li:nth-last-of-type(2),
.breadcrumb li:nth-last-of-type(3){
}
}





/* --------------------------------------------

校正用　制作中ページ

---------------------------------------------- */ 
.pendPages {
	padding: 8em 0;
	margin-bottom: 5em;
	font-size: 20px; font-size: 2rem;
	color: red;
	text-align: center;
	border:2px solid red;
}

.pendImage {
	display: block;
	position: relative;
	left: 50%;
	margin-left: -678px;
}

@media screen and (max-width:768px){
.pendImage {
	width: 120vw;
	margin-left: -60vw;
}
}



/* --------------------------------------------

検索

---------------------------------------------- */ 
.sarch {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 1em;
	text-align: center;
}

.sarch__item {
	width: 13em;
	display: inline-block;
  color: #fff;
  background: #000;
	border: 1px solid #646464;
}

.sarch__item select {
	width: 100%;
	padding: 0.4em 0.8em;
  color: #fff;
  background: url("../img/share/search__form-select.png") no-repeat right #000;
	background-size: contain;
	border:none;
}


.sarch__category {
}

.sarch__language {
	position: relative;
}
.sarch__language select {
	padding-left: 3em;
}
.sarch__language-icon {
	display: block;
	width: 1.8em; height: 1.2em;
	position: absolute; top: 0.6em; left: 0.5em;
	background: url("../../_common/img/share/country__button-all.png");
	background-size: cover;
}
.sarch__language-icon img {
	display: block;
	width: 100%;
}


.sarch__btn {
	display: inline-block;
}
.sarch__btn input {
	padding: 0 1em;
	line-height: 2.7;
	background: #C7C7C7;
	border:none;
	cursor: pointer;
	transition: 0.2s;
}
.sarch__btn input:hover {
	background: #8B8B8B;
}

@media screen and (max-width:768px){
.sarch {
}

.sarch select {
  width: 100%;
}

.sarch__category,
.sarch__language {
  float: none;
}

.sarch__category {
  margin-bottom: 1em;
}
}


/* --------------------------------------------

タグで検索

---------------------------------------------- */ 
.search-tag {
	max-width: 1500px;
	padding: 0 10% 6em;
	margin: auto;
	text-align: center;
}
.search-tag::before {
	content: "タグで探す";
	display: block;
	padding: 1em;
	text-align: center;
	font-size: 14px; font-size: 1.4rem;
}
.search-tag a {
  display: inline-block;
	overflow: hidden;
  margin: 4px 1px;
  padding: 0.3em 1em;
	height: 40px;
	line-height: 30px;
	vertical-align: bottom;
  font-size: 13px; font-size: 1.3rem;
  text-decoration: none;
  text-align: center;
  background: #e8e8e8;
	border-radius: 0.2em;
	transition: 0.3s;
}
.search-tag a:hover {
	/*letter-spacing: 0.3em;*/
	background: #F1F1F1;
}


.search-tag a[href="postDetail?tag="],
.search-tag a[href="postDetail?tag="],
.search-tag a[href="postDetail?tag=12"],
.search-tag a[href="postDetail?tag=20"],
.search-tag a[href="postDetail?tag=15"],
.search-tag a[href="postDetail?tag=11"],
.search-tag a[href="postDetail?tag=8"],
.search-tag a[href="postDetail?tag=7"],
.search-tag a[href="postDetail?tag=5"],
.search-tag a[href="postDetail?tag=3"],
.search-tag a[href="postDetail?tag=1"] {
  font-size:1.12em;
}


/* --------------------------------------------

Post

---------------------------------------------- */ 
/*-- Number -*/
.post__number {
	width: 2.0em;
	padding: 0.2em 0 0.15em;
	text-align: center;
	font-size: 26px; font-size: 2.6rem;
	font-weight: 600;
	line-height: 0.8;
	color: #e50012;
	border-radius: 0 5px 5px 0;
	background: #fff;
}

.post__number::before {
	content: "POST";
	display: block;
	padding-bottom: 0.3em;
	font-size: 0.3em;
}




.postGrid__item {
	overflow: hidden;
	padding: 0 20px 20px 0;
}

.postGrid__item a {
	display: block;
	width: 100%; height: 100%;
	text-decoration: none;
	position: relative;
}


/*-- Text -*/
.post__title {
	font-weight: bold;
	line-height: 1.4;
}

/* フォントサイズ個別指定 */

/* top */
.top-postGrid .post__number b {
	font-size: 26px; font-size: 2.6rem;
}

/* list */
.list-postGrid .post__number b,
.postDetail__list .post__number b {
	font-size: 24px; font-size: 2.4rem;
}

/* detail */
.postDetail .post__number b {
	font-size: 27px; font-size: 2.7rem;
}


/*-- Category -*/
.post__category {
	width: 100%;
	font-size: 14px; font-size: 1.4rem,;
	color: #e50012;
	font-weight: 600;
	white-space: nowrap;
	/*text-shadow: 
	1px 1px 10px rgba(255,255,255,1),
	-1px 1px 10px rgba(255,255,255,1),
	1px -1px 10px rgba(255,255,255,1), 
	-1px -1px 10px rgba(255,255,255,1);*/
}
.post__category b {
	border-top: solid #e50012;
	display: block;
	font-weight: bold;
}


/* フォントサイズ個別指定 */

/* top */
.top-postGrid .post__category {
	max-width: 120px;
}

/* list */
.list-postGrid .post__category,
.postDetail__list .post__category {
	max-width: 116px;
	font-size: 13px; font-size: 1.3rem,;
}

/* detail */
.postDetail .post__category {
	max-width: 125px;
}



/* フォントサイズ個別指定 */

/* top */
.top-postGrid .post__title {
	overflow: hidden;
	width: 100%;
	position: absolute; top: 0; left: 0;
	height: 3.2em;
	padding: 0.3em 0.5em;
	font-size: 18px; font-size: 1.8rem;
	color: #fff;
	background: rgba(0,0,0,0.3);
	transition: 0.3s;
}
.top-postGrid a:hover .post__title {
	background: rgba(191,31,18,0.8);
}

/* list */
.list-postGrid .post__title {
	font-size: 18px; font-size: 1.8rem;
}


/*-- Layout -*/
.post__info {
	width: 100%;
}

.post__info .post__number,
.post__info .post__category {
	float: left;
}

.post__info .post__number {
	margin-right: 0.5em;
}

.post__image {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.post__image > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	
	transition: 0.3s;
	transition-timing-function:ease-out;
}

.postGrid__item a:hover .post__image > img {
	transform: scale(1.08);
	opacity: 0.7;
}



.post__title {
	padding: 0.4em 0;
}


/*-- Grid --*/
.postGrid__item,
.postGrid__item .post__box {
	position: relative;
	width: 100%;
	height: 100%;
}



.postGrid__item .post__info {
	position: absolute; bottom: 0.3em; left: 0;
	line-height: 1.5;
	transition: 0.3s;
}
.postGrid__item a:hover .post__info {
	left: -0.3em;
}


.postGrid__item.movie .post__image::before {
	display: block;
	content: "";
	position: absolute; bottom: 0.6em; right: 0.5em; z-index: 5;
	width: 30px;
	height: 29px;
	background: url("../img/share/movie_icon.png") center no-repeat;
	background-size: contain;
}





/* --------------------------------------------

top

---------------------------------------------- */ 
.top-postGrid .postGrid__item {
	width: 20vw;
	height: 20vw;
}
@media screen and (max-width:1356px){
.top-postGrid .postGrid__item {
  width: 28vw;
	height: 28vw;
}
}
@media screen and (max-width:960px){
.top-postGrid .postGrid__item {
  width: 48vw;
	height: 48vw;
}
}
@media screen and (max-width:599px){
.top-postGrid .postGrid__item {
	padding: 0 0em 1.5em 0;
}
.top-postGrid .postGrid__item {
	width: 90vw;
	height: 90vw;
}
}

.top-postGrid .postGrid__item-x2 {
  width: 40vw;
	height: 20vw;
}
@media screen and (max-width:1356px){
.top-postGrid .postGrid__item-x2 {
  width: 56vw;
	height: 28vw;
}
}
@media screen and (max-width:960px){
.top-postGrid .postGrid__item-x2 {
  width: 96vw;
	height: 48vw;
}
}
@media screen and (max-width:599px){
.top-postGrid .postGrid__item-x2 {
	width: 90vw;
	height: 90vw;
}
}

.top-postGrid .postGrid__item-h2 {
  width: 20vw;
	height: 40vw;
}
@media screen and (max-width:1356px){
.top-postGrid .postGrid__item-h2 {
  width: 28vw;
	height: 56vw;
}
}
@media screen and (max-width:960px){
.top-postGrid .postGrid__item-h2 {
  width: 48vw;
	height: 96vw;
}
}
@media screen and (max-width:599px){
.top-postGrid .postGrid__item-h2 {
	width: 90vw;
	height: 90vw;
}
}


/* --------------------------------------------

中ページ

---------------------------------------------- */ 
/*-- Post --*/
.list-postGrid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
	width: 94%;
	/*max-width: 1460px;*/
	margin: 0 auto;
	padding: 2em 0;
}

.list-postGrid .postGrid__item {
	width: 22vw;
	height: 20vw;
}

.list-postGrid .postGrid__item .post__image {
	width: 100%;
	height: 15vw;
}

.list-postGrid .postGrid__item .post__title {
	overflow: hidden;
	height: 3.7em;
	padding: 0.25em;
	line-height: 1.2;
}

@media screen and (max-width:1356px){
.list-postGrid .postGrid__item {
	width: 30vw;
	height: 25vw;
}
.list-postGrid .postGrid__item .post__image {
	height: 18vw;
}
}
@media screen and (max-width:960px){
.list-postGrid .postGrid__item {
	width: 45vw;
	height: 42vw;
}
.list-postGrid .postGrid__item .post__image {
	height: 32vw;
}
}
@media screen and (max-width:599px){
.list-postGrid .postGrid__item {
	padding: 0 0em 1.5em 0;
}
.list-postGrid .postGrid__item {
	width: 96vw;
	height: 80vw;
}
.list-postGrid .postGrid__item .post__image {
	height: 65vw;
}
}










/* --------------------------------------------

投稿

---------------------------------------------- */ 
#postBtn {
	position: fixed; top: 100px; right: 0px;
	width: 90px; height: 90px;
	font-size: 10px; font-size:1.0rem;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
	z-index: 999;
}
#postBtn a {
	position: relative;
	display: block;
	width: 100%; height: 100%;
	text-align: center;
	text-decoration: none;
	transition: 0.3s;
}




.post__button {
  position: fixed; top: 8em; right: 0;
  width: 30%; max-width: 91px;
}
@media screen and (max-width:960px){
.post__button {
	top: auto; bottom: 190px;
	width: 60px; height: 60px;
}
}

.post__button img {
  display: block;
  width: 100%;
}




.pager {
  width: 90%;
  margin: 0 auto 5em;
  text-align: center;
}

.pager__button {
  display: inline-block;
  width: 3em;
  height: 3em;
	margin-bottom: 0.25em;
	font-size: 13px; font-size:1.3rem;
  line-height: 2.8;
  text-align: center;
  border: 2px solid #bebebe;
  border-radius: 5px;
	transition: 0.3s;
}

.pager__button a {
  display: block;
  width: 100%;
  height: 100%;
	text-decoration: none;
}

.pager__button:hover,
.pager__button-active {
  border-color: #eaeaea;
  background: #eaeaea;
}

@media screen and (max-width:960px){
	
}