@charset "utf-8";

/**
 *
 *  ニュース詳細ページcss
 *
 */

/*--------------------------------------------------------------------------
   overwrite  - 共通CSSの上書き -
---------------------------------------------------------------------------*/

@media all and (max-width: 767px) {
	#Page {
		background: #fff;
	}
}

/*--------------------------------------------------------------------------
  	article
---------------------------------------------------------------------------*/
#Main{
	padding: 30px;
	background: #FFF;
}
.article{
	margin-bottom: 30px;
}
/* @SP */
@media all and (max-width: 767px) {
	#Main{
		margin-top: 15px;
		padding: 0;
	}
}

/* article-ttl
-----------------------------------------------------------------*/
.article .article-ttl{
	position: relative;
	padding-bottom: 5px;
	border-bottom: solid 4px #A9151A;
	font-size: 25px;
	font-weight: bold;
	color: #303030;
}

/* @SP */
@media all and (max-width: 767px) {
	.article .article-ttl{
		padding-bottom: 9px;
		border-bottom: solid 1px #000;
		font-size: 13px;
	}
}


/* article-cont
-----------------------------------------------------------------*/
.article .article-cont{
	padding-top: 63px;
	font-size: 14px;
}
.article .article-cont p{
	margin-top: 5px;
}

/* ul ol デフォルトのcss設定 */
.article .article-cont ul,
.article .article-cont ul li {
	list-style-type:disc;
}
.article .article-cont ol,
.article .article-cont ol li {
	list-style-type:decimal;
}
.article .article-cont li ul,
.article .article-cont li ol {
	margin:0 1.5em;
}
.article .article-cont ul,
.article .article-cont ol {
	margin:0 1.5em 1.5em 1.5em;
}

/* img 画像 */
.article .article-cont .img{
	text-align: center;
}
/* ttl-style 見出し */
.article .article-cont .ttl-style{
	position: relative;
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: solid 2px #AB1419;
	font-size: 16px;
	font-weight: bold;
	color: #303030;
}
/* period　開催期間 */
.article .article-cont .period{
	border: solid 1px #BFBFBF;
	margin: 18px 0;
	padding: 20px;
}
.article .article-cont .period p{
	margin: 0;
}
/* note 注釈 */
.article .article-cont .note{
	margin-top: 20px;
}
.article .article-cont .note li:before{
	content: "※";
}

/* img 画像 */
.article .article-cont .img img{
	max-width: 100%;
	height: auto;
}

/* @SP */
@media all and (max-width: 767px) {
	.article .article-cont{
		padding-top: 10px;
		font-size: 12px;
	}
	.article .article-cont h2,
	.article .article-cont p,
	.article .article-cont li{
		background: url(../../shared/images/spacer.png);
	}

	/* ttl-style 見出し */
	.article .article-cont .ttl-style{
		padding-bottom: 6px;
		margin-bottom: 14px;
		border-bottom: solid 1px #AB1419;
		font-size: 14px;
	}

	/* period　開催期間 */
	.article .article-cont .period{
		padding: 12px;
		font-size: 11px;
	}

	/* img 画像 */
	.article .article-cont .img img{
		width: 100%;
		max-width: 375px;
		height: auto;
		margin: 0 auto;
	}
	/* note 注釈 */
	.article .article-cont .note{
		font-size: 12px;
	}
}


/*--------------------------------------------------------------------------
  	btn-list
---------------------------------------------------------------------------*/

.btn-back a{
	color: #FFF;
	background: #B81B22;
}

/* @SP */
@media all and (max-width: 767px) {
	.btn-back{
		margin-top: 10px;
	}
}

/* item-list
-----------------------------------------------------------------*/
.contentsArticle img {
	max-width: 100%;
	height: auto !important;
}

.subject-item__wrap {
	border: 2px solid #aa2d2a;
	border-radius: 16px;
	margin: 80px auto 40px;
	position: relative;
	padding: 90px 30px 40px;
	background: #fff;
}

.subject-item__title {
	color: #fff;
	background-color: #aa2d2a;
	display: inline-block;
	border-radius: 10px;
	text-align: center;
	width: 500px;
	padding: 15px 0;
	position: absolute;
	left: 50%;
	top: -50px;
	transform: translateX(-50%);
}
.subject-item--main {
	font-size: 29px;
	font-weight: 600;
	margin-top: 0;
	line-height: 1;
}
.subject-item--sub {
	font-size: 14px;
	font-weight: normal;
}
.subject-item__wrap .item-list {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 40px;
}

.subject-item__wrap .item-list li{
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 5px;
	width: 100%;
}
.article-cont .subject-item__wrap ul.item-list li {
	list-style: none;
	margin: 18px;
}
.subject-item__wrap .item-list li a{
	display: block;
	text-decoration: none;
	color: inherit;
	width: 220px;
}

.subject-item__wrap .item-list li span{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}

.subject-item__wrap .item-list li .img{
	text-align: center;
}
.subject-item__wrap .item-list li .img img{
	width: 100%;
	height: auto;
	max-width: 220px;
}
.subject-item__wrap .item-list li .txt-wrap{
	position: relative;
	word-break: break-all;
  text-align: left;
	color: #333;
	font-weight: bold;
	padding: 0 20px;
}
.subject-item__wrap .item-list li .txt-wrap .plate {
	/* position: absolute;
	top: -60px;
	left: 0; */
	margin: 5px 0;
}
.subject-item__wrap .item-list li .txt-wrap .ttl{
	font-size: 16px;
	box-sizing: border-box;
	line-height: 24px;
}
.subject-item__wrap .item-list li .txt-wrap .price-pattern {
	width: 100%;
	font-size: 22px;
	box-sizing: border-box;
	margin-bottom: 8px;
}
.subject-item__wrap .item-list li .txt-wrap .price{
	letter-spacing: 0;
	margin-right: -10px;
}
.subject-item__wrap .item-list li .txt-wrap .price span{
	display: inline-block;
}
.subject-item__wrap .item-list li .txt-wrap .price span:not(:first-child)::before{
	margin: 0 0.1em 0 -0.1em;
	content: '/';
}
.subject-item__wrap .item-list li .txt-wrap .note{
	width: 100%;
	font-size: 12px;
	box-sizing: border-box;
	color: #555555;
	font-weight: normal;
}
.subject-item__wrap .item-list li a.btton--missing-item {
	display: inline-block;
	border: 2px solid #aa2d2a;
	border-radius: 6px;
	text-align: center;
	margin-top: auto;
	padding: 4px 20px 4px 10px;
	position: relative;
	font-size: 15px;
}
.subject-item__wrap .item-list li a.btton--missing-item::before {
	content: '';
	width: 8px;
	height: 8px;
	border-width: 2px 2px 0 0;
	border-color: #aa2d2a;
	border-style: solid;
	position: absolute;
	right: 8px;
	top: 14px;
	transform: rotate(45deg);
}

/* @SP */
@media all and (max-width: 767px) {
	.subject-item__wrap {
		padding: 80px 15px 40px;
		border-radius: 8px;
	}
	.subject-item__title {
		width: 285px;
		padding: 12px 0;
		border-radius: 5px;
		top: -30px;
	}
	.subject-item--main {
		font-size: 14px;
	}
	.subject-item--sub {
		font-size: 10px;
	}
  .subject-item__wrap .item-list {
    grid-template-columns: repeat(2,1fr);
    gap: 30px 15px;
  }
	.article-cont .subject-item__wrap ul.item-list li {
		margin: 8px;
	}
	.subject-item__wrap .item-list li + li {
			margin-top: 0;
	}
	.subject-item__wrap .item-list li a {
		width: 100%;
	}
	.subject-item__wrap .item-list li .img img{
    width: 144px;
    height: auto;
    max-width: none;
	}
	.article .article-cont .subject-item__wrap ul.item-list {
		margin: 0;
	}
	.subject-item__wrap .item-list li .txt-wrap {
    padding: 0 12px;
	}
	
	.subject-item__wrap .item-list li .txt-wrap .ttl {
    font-size: 14px;
	}
	.subject-item__wrap .item-list li .txt-wrap .note {
		line-height: 1.5;
	}
	.subject-item__wrap .item-list li .txt-wrap .price {
		font-size: 9px;
	}
	.subject-item__wrap .item-list li .txt-wrap .price-pattern {
    font-size: 17px;
	}
	.subject-item__wrap .item-list li .txt-wrap .plate img {
		width: 34px;
		height: 34px;
	}
	.subject-item__wrap .item-list li a.btton--missing-item {
		border-radius: 3px;
		font-size: 12px;
	}
	.subject-item__wrap .item-list li a.btton--missing-item::before {
		top: 11px;
		transform: rotate(45deg);
	}
}

.inner-link a {
  position: relative;
  padding-right: 0.25em;
  font-size: 14px;
  font-weight: 400 !important;
  line-height: calc(24 / 16);
  color: #b81c22;
  text-decoration: underline;
  word-break: break-word;

  &::after {
    position: relative;
    top: 1px;
    display: inline-block;
    width: 5.84px;
    height: 9.7px;
    margin: 0 0 0 5px;
    content: '';
    background: #b81c22 no-repeat center / contain;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5.84" height="9.7" viewBox="0 0 5.84 9.7"><path d="M10.293,8.465a1,1,0,0,0,0,1.414L12.414,12l-2.121,2.121a1,1,0,0,0,1.414,1.415l2.829-2.829a1,1,0,0,0,0-1.414L11.707,8.465a1,1,0,0,0-1.414,0Z" transform="translate(-10 -8.172)" fill-rule="evenodd"/></svg>');
  }
}

@media (min-width: 768px) {
  .inner-link a {
    font-size: 16px;
  }
}

.outer-link a {
  position: relative;
  padding-right: 0.25em;
  font-size: 14px;
  font-weight: 400 !important;
  line-height: calc(24 / 16);
  color: #b81c22;
  text-decoration: underline;
  word-break: break-word;

  &::after {
    position: relative;
    top: 1px;
    display: inline-block;
    width: 5.84px;
    height: 9.7px;
    margin: 0 0 0 5px;
    content: '';
    background: #b81c22 no-repeat center / contain;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5.84" height="9.7" viewBox="0 0 5.84 9.7"><path d="M10.293,8.465a1,1,0,0,0,0,1.414L12.414,12l-2.121,2.121a1,1,0,0,0,1.414,1.415l2.829-2.829a1,1,0,0,0,0-1.414L11.707,8.465a1,1,0,0,0-1.414,0Z" transform="translate(-10 -8.172)" fill-rule="evenodd"/></svg>');
    width: 13px;
    height: 13px;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="13.359" height="13.425" viewBox="0 0 13.359 13.425"><g transform="translate(22971 3426)"><path d="M.805-.7H8.579A1.507,1.507,0,0,1,10.084.805V8.579a1.507,1.507,0,0,1-1.505,1.505H.805A1.507,1.507,0,0,1-.7,8.579V.805A1.507,1.507,0,0,1,.805-.7ZM8.579,8.684a.105.105,0,0,0,.105-.105V.805A.105.105,0,0,0,8.579.7H.805A.105.105,0,0,0,.7.805V8.579a.105.105,0,0,0,.105.105Z" transform="translate(-22970.301 -3425.3)" fill="evenodd"/><path d="M11.855,13.425H4.581a.7.7,0,1,1,0-1.4h7.274a.1.1,0,0,0,.105-.105V4.646a.7.7,0,0,1,1.4,0V11.92A1.507,1.507,0,0,1,11.855,13.425Z" transform="translate(-22971 -3426)" fill="evenodd"/></g></svg>');
  }
}

@media (min-width: 768px) {
  .outer-link a {
    font-size: 16px;
  }
}