/*----------------------------------------------------------------------------*/
/* 	Tranquwell NEWS page									  CSS    */
/*----------------------------------------------------------------------------*/

	body {
		background:#f3f3f3 url(../images/bg/bg_washi.png);
		background-size:48px 48px;
		letter-spacing:0.1em;
	}
	#main-area {
		width:100%;
		margin:0 auto;
		position: relative;
	}
	@media only screen and (min-width:992px) {	/*■ PC Layout  ■ */
		header {
			position: fixed;
		}
	}
/* ■ MainConents #section01 	NEWS一覧 */

	#section01 {
		margin: 10px auto 0 auto;
		width: 100%;
		padding-bottom:20px;
		background-image:
			url("../images/bg/brline01.svg"),
			url("../images/bg/brline02.svg");
		background-size:
			:contain,
			:contain;
		background-position:
			center top 25%,
			center top 33%;
		background-repeat:
			no-repeat,
			no-repeat;
	}
	#section01 h1,h2,h3,h4,h5,h6{
		font-size:100%;
		font-weight:normal;
	}
	#sec01 {
		margin: 0 auto 0 auto;
		padding-top:10px;
		width: 100%;
		background:linear-gradient(90deg,transparent 0%,transparent 65%,#6E3919 65%,#6E3919 100%);	/* ★ */
	}
	#sec01 #sec01sym01 {
		display:none;
	}
	#section01 h2 {
		display:block;
		margin: 0 auto 10px auto;
		width: 90%;
		font-size:13px;
		font-weight:bold;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color:#FFF;
		padding-left:20px;
		padding-top:8px;
		padding-bottom:8px;
		background:linear-gradient( 90deg, #8d6d2b 80%, #8d6d2b 100% );	/* smm2-base-black,02 */
	}
	#sec01 .casest {
		margin: 0 auto 0 auto;
		width: 90%;
		padding-top:0px;
		padding-bottom:0px;
	}
	#sec01 .casest dl,dt,dd {
		display:block;
	}
	#sec01 .casest li {
		margin: 0 auto 20px auto;
		width: 100%;
		padding-bottom:0;
	}
	#sec01 .casest li:first-child {
		margin-top:20px;
	}
	#sec01 .casest li:last-child {
		background-image:none;
	}
	#sec01 .casest dl.casestitem {
		margin: 0 auto 0 auto;
		width: 100%;
		border: 1px solid #DDD;
		padding-top:10px;
		padding-bottom:25px;
		background-color:#FFF;
			border-radius:5px;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
	}
	#sec01 .casest dl.casestitem dt {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size:13px;
		font-weight:bold;
		padding-left:13px;
		line-height:1.7em;
		color: #6E3919;		/* sopv-brown03 */
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:9px 10px;
		background-position:left 0 top 5px;
	}
	#sec01 .casest dl.casestitem dt a {
		color: #6E3919;		/* sopv-brown03 */
	}
	#sec01 .casest dl.casestitem dt a:hover {
			color: #A4966A;		/* Gold01 */
	}
	#sec01 .casest dl.casestitem dt .important {
		color:#D35400;		/* LD-red01 */
	}
	#sec01 .casest dl.casestitem dd {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size:12px;
		line-height:1.3em;
		padding:0px;
		padding-top:10px;
		padding-left:0px;
	}
	#sec01 .casest dl.casestitem dd p {
		float:left;
		padding-left:10px;
	}
	#sec01 .casest dl.casestitem dd p.detail {
		padding-left:10px;
	}
	#sec01 .casest dl.casestitem dd p.detail a {
		color: #A4966A;		/* Gold01 */
	}
	#sec01 .casest dl.casestitem dd p.detail a:hover {
		color: #B27C04;		/* Gold02 */
	}


	@media only screen and  (max-width: 360px) {

	}

	@media only screen and (min-width:992px) {

		#section01 {
			margin: 50px auto 0 auto;
			width: 100%;
			padding-bottom:80px;
			background-image:
				url("../images/bg/brline01.svg"),
				url("../images/bg/brline02.svg");
			background-size:
				:contain,
				:contain;
			background-position:
				center top 25%,
				center top 33%;
			background-repeat:
				no-repeat,
				no-repeat;
		}
		#sec01 {
			margin: 0  auto 0 auto;
			width: 100%;
			padding-top:30px;
			padding-bottom:10px;
			position:relative;
			background:linear-gradient(90deg,transparent 0%,transparent 10%,#D9D9D9 10%,#F5F5F5 40%,transparent 40%,transparent 100%);	/* ★ */
		}
		#sec01 #sec01sym01 {
			display:block;
			position: absolute;
			top: 10px;
			right: 50px;
			z-index:9;
		}
		#section01 h2 {
			display:block;
			margin: 0 auto 0 auto;
			width: 64%;
			font-size:20px;
			font-weight:normal;
			font-weight:bold;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color:#FFF;
			letter-spacing:1px;
			padding-left:50px;
			padding-top:13px;
			padding-bottom:15px;
			background:linear-gradient( 45deg, #6E3919 80%, #6E3919 100% );	/* smm2-base-black,02 */
		}
		#sec01 .casest {
			margin: 0 auto 0 10%;
			width: 80%;
			padding-top:10px;
			padding-bottom:10px;
		}
		#sec01 .casest li {
			margin: 0 auto 30px auto;
			width: 80%;
			padding-bottom:0;
		}
		#sec01 .casest dl.casestitem {
			margin: 0 auto 0 auto;
			width: 100%;
			padding-top:20px;
			padding-bottom:30px;
			background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過95% */
			border: 1px solid #DDD;
				border-radius:10px;
				-moz-border-radius:10px;
				-webkit-border-radius:10px;
		}
		#sec01 .casest dl.casestitem dt {
			margin: 0 auto 0 auto;
			width: 90%;
			font-size:17px;
			padding-left:0;
			line-height:1.8em;
			font-weight:normal;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			background	: url("../images/icon/btn-arrow.png") no-repeat;
			background-size:11px 12px;
			background-position:left 0 top 9px;
		}
		#sec01 .casest dl.casestitem dd {
			margin: 0 auto 0 auto;
			width: 100%;
			font-size:15px;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			line-height:1.8em;
			padding-top:0px;
			padding-left:50px;
			padding-right:50px;
			padding-bottom:10px;
		}
		#sec01 .casest dl.casestitem dd p {
			float:left;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
		}
		#sec01 .casest dl.casestitem dd p.detail {
			padding-left:20px;
			font-size:14px;
			color: #A4966A;		/* Gold01 */
		}
	}

	@media only screen and (min-width: 993px) and (max-width: 1400px) {	/*◇ PC-S */

		#section01 {
			margin: 10px auto 0 auto;
			background:linear-gradient(90deg,white 0%,white 5%,#F5F5F5 5%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#sec01 {
			margin: 10px auto 0 auto;
		}
		#section01 #sec01title01{
			margin: 0 auto 0 15%;
			width: 90%;
			padding-bottom:0px;
		}
		#section01 #sec01title01 h2 {
			font-size:25px;
		}
		#section01 h3 {
			margin: 15px auto 0px auto;
			width: 75%;
			font-size:16px;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			padding-left:30px;
			padding-top:8px;
			padding-bottom:10px;
		}
		#sec01 .casest {
			margin: 0 auto 0 auto;
			width: 90%;
			padding-top:10px;
			padding-bottom:10px;
		}
		#sec01 .casest dl.casestitem dt {
			margin: 0 auto 0 auto;
			font-size:15px;
		}
		#sec01 .casest dl.casestitem dd {
			font-size:14px;
		}

	}

	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		#section01 {
			margin: 60px auto 0 auto;
			width: 100%;
			padding-bottom:0px;
			background-color:#FFF;
			background:linear-gradient(90deg,#F5F5F5 0%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
			background:linear-gradient(90deg,white 0%,white 10%,#F5F5F5 10%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#section01 #sec01title01 {
			margin: 0 auto 0 auto;
			width: 90%;
		}
		#section01 #sec01title01 h2 {
			font-size:15px;
			font-weight:bold;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			padding-top:40px;
			padding-bottom:10px;
			padding-left:15px;
		}
		#sec01 {
			margin: 0 auto 0 auto;
			width: 100%;
			padding-bottom:0px;
			position:relative;
		}
		#sec01 #sec01sym01 {
			display:none;
		}
		#section01 #sec01title01 {
			width: 80%;
		}
		#section01 #sec01title01 h2 {
			font-size:20px;
			padding-top:30px;
			padding-left:30px;
		}
		#section01 #sec01title01 p {
			width: 80%;
			padding-left:30px;
			padding-bottom:0px;
		}
		#section01 h3 {
			display:block;
			margin: 10px auto 0 12.5%;
			width: 80%;
			font-size:13px;
			font-weight:bold;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color:#FFF;
			padding-left:20px;
			padding-top:10px;
			padding-bottom:8px;
			background-color:#519D9E;		/* WA-green */
		}
		#sec01 .casest {
			margin: 0 auto 0 10%;
			width: 85%;
			padding-top:5px;
			padding-bottom:5px;
		}
		#sec01 .casest li {
			margin: 0 auto 20px auto;
			width: 90%;
		}
	}

/* ■ MainConents #newssection  */

	#newssection {
		margin: 10px auto 0 auto;
		width: 100%;
		padding-bottom:50px;
		background:linear-gradient(90deg,white 0%,white 65%,#F5F5F5 65%,#F5F5F5 100%);	/* ★ */
	}
	#newssection h1,h2,h3,h4,h5,h6{
		font-size:100%;
		font-weight:normal;
	}
	#newssec{
		margin: 10px auto 0 auto;
		width: 100%;
		padding-bottom:10px;
	}
	#newssec #newssecsym01 {
		display:none;
	}
	#newssection #newssectitle01 {
		margin: 0 auto 0 auto;
		width: 90%;
	}
	#newssection #newssectitle01 h2 {
		font-size:16px;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		padding-top:20px;
		padding-left:15px;
	}
	#newssection #newssectitle01 p {
		width: 100%;
		font-size:12px;
		color:#333;
		line-height:22px;
		padding-top:10px;
		padding-left:20px;
	}
	#newssec #news {
		margin: 0 auto 0 auto;
		width: 90%;
		padding-top:10px;
		padding-bottom:0px;
		background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過98% */
	}
	#newssec #news  .category01 {	/* NEWS & RELEASE カテゴリー */
		margin: 10px auto 10px auto;
		width:40%;
		font-size:12px;
		text-align:center;
		font-weight:bold;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color: #FFF;
		padding:7px;
		background-color:#DAD1BB;		/* smm2-beigegray  */
	}
	#newssec #news  h3 {
		display:block;
		margin: 20px auto 10px auto;
		width: 90%;
		font-size:13px;
		font-weight:bold;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color:#333;
		line-height:18px;
		padding-left:10px;
		padding-bottom:5px;
		border-left: 5px solid #221815;		/* base-black */
		border-bottom: 1px solid #BDC3C7;	/* Siver */
	}
	#newssec #news dl,dt,dd {
		display:block;
	}
	#newssec #news dl.newsitem {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-bottom:20px;
	}
	#newssec #news dl.newsitem dt {
		margin: 0 auto 10px auto;
		width: 90%;
		font-size:12px;
		font-weight:bold;
		padding-top:10px;
		padding-left:15px;
		color:#444;
		line-height:1.7em;
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:8px 9px;
		background-position:left 0 top 15px;
	}
	#newssec #news dl.newsitem dd {
		margin: 0 auto 0 auto;
		width: 90%;
		font-size:12px;
		line-height:1.5em;
		padding-left:0px;
	}
	#newssec #news dl.newsitem dd a {
		color: #A4966A;		/* Gold01 */
	}
	#newssec #news dl.newsitem dd a:hover {
		color: #B27C04;		/* Gold02 */
	}
	#newssec #news .newsdt-img {
		margin: 20px auto 0 auto;
	}
	#newssec #news .newsdt-img img {
		display:block;
		margin: 0 auto 0 auto;
	}
	#newssec .listbk {		/* 一覧に戻る */
		display	: block;
		margin: 20px auto 0 45%;
		width: 180px;
		height:30px;
	}

	@media only screen and  (max-width: 360px) {

	}

	@media only screen and (min-width:768px) {

		#newssection {
			margin: 50px auto 80px auto;
			width: 100%;
			padding-bottom:30px;
			background-color:#FFF;
			background:linear-gradient(90deg,transparent 0%,transparent 10%,#D9D9D9 10%,#F5F5F5 40%,transparent 40%,transparent 100%);	/* ★ */
		}
		#newssec{
			margin: 30px auto 0 auto;
			width: 100%;
			padding-bottom:50px;
			position:relative;
		}
		#newssec #newssecsym01 {
			display:block;
			position: absolute;
			top: 0px;
			right: 50px;
			z-index:9;
		}
		#newssection #newssectitle01{
			margin: 0px auto 0 17%;
			width: 80%;
			padding-bottom:0px;
		}
		#newssection #newssectitle01 h2 {
			font-size:36px;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			padding-left:5.5%;
			padding-bottom:30px;
		}
		#newssection #newssectitle01 p {
			width: 100%;
			font-size:16px;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color:#333;
			line-height:30px;
			padding-bottom:20px;
			padding-left:80px;
		}
		#newssec #news {
			margin: 30px auto 0 15%;
			width: 70%;
			padding-top:10px;
			padding-bottom:50px;
			background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過95% */
			border: solid 1px #DDD;
			position: relative;
		}
		#newssec #news:after{	/* ■入れ子を使って2重線 */
/*			content: "";
			border: solid 1px #DDD;
			position: absolute;
			top: 5px;
			left: 5px;
			width: calc(100% - 10px);
			height: calc(100% - 10px);	*/
		}
		#newssec #news  p.category01 {	/* NEWS & RELEASE カテゴリー */
			margin: 20px auto 30px 10%;
			width:20%;
			font-size:16px;
			text-align:center;
			font-weight:normal;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color: #FFF;
			padding:12px;
			background-color:#DAD1BB;		/* smm2-beigegray  */
		}
		#newssec #news  h3 {
			display:block;
			margin: 30px auto 10px auto;
			width: 80%;
			font-size:20px;
			font-weight:normal;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color:#444;
			line-height:30px;
			padding-left:30px;
			padding-bottom:10px;
			border-left: 7px solid #221815;		/* base-black */
			border-bottom: 1px solid #BDC3C7;	/* Siver */
		}
		#newssec #news dl.newsitem {
			margin: 0 auto 0 auto;
			width: 85%;
			padding-bottom:0px;
		}
		#newssec #news dl.newsitem dt {
			margin: 0 auto 20px auto;
			width: 85%;
			font-size:17px;
			padding-top:20px;
			padding-left:25px;
			line-height:27px;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color:#333;
			background	: url("../images/icon/btn-arrow.png") no-repeat;
			background-size:13px 12px;
			background-position:left 0 top 28px;
		}
		#newssec #news dl.newsitem dd {
			margin: 0 auto 0 auto;
			width: 90%;
			font-size:16px;
			line-height:1.7em;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color:#333;
			padding-left:50px;
			padding-right:50px;
			padding-bottom:25px;
		}
		#newssec #news .newsdt-img {
			margin: 30px auto 30px auto;
			width: auto;
		}
		#newssec .listbk {		/* 一覧に戻る */
			display: block;
			position: absolute;
			bottom: 30px;
			left:0%;
			width: 200px;
			height:45px;
		}
	}

	@media only screen and (min-width: 993px) and (max-width: 1400px) {	/*◇ PC-S */

		#newssection {
			background:linear-gradient(90deg,white 0%,white 5%,#F5F5F5 5%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#newssec{
			margin: 90px auto 0 auto;
			width: 100%;
			padding-bottom:50px;
			position:relative;
		}
		#newssection #newssectitle01{
			margin: 0px auto 0 10%;
			width: 85%;
			padding-bottom:0px;
		}
		#newssection #newssectitle01 h2 {
			font-size:25px;
			padding-bottom:10px;
		}
		#newssec #news  h3 {
			font-size:17px;
			padding-left:20px;
			padding-bottom:5px;
		}
		#newssec #news dl.newsitem {
			margin: 0 auto 0 auto;
			width: 90%;
			padding-bottom:0px;
		}
		#newssec #news dl.newsitem dt {
			width: 85%;
			font-size:15px;
		}
		#newssec #news dl.newsitem dd {
			margin: 0 auto 0 auto;
			width: 85%;
			font-size:14px;
			line-height:1.7em;
			padding-top:0px;
			padding-left:0px;
			padding-right:0px;
			padding-bottom:20px;
		}



	}

	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		#newssection {
			margin: 0 auto 0 auto;
			width: 100%;
			padding-bottom:0px;
			background:linear-gradient(90deg,white 0%,white 5%,#F5F5F5 5%,#F5F5F5 40%,white 40%,white 100%);	/* ★ */
		}
		#newssec{
			margin: 50px auto 0 auto;
			width: 100%;
			padding-bottom:50px;
			position:relative;
		}
		#newssection #newssectitle01{
			margin: 70px auto 0 17%;
			width: 80%;
			padding-bottom:0px;
		}
		#newssection #newssectitle01 h2 {
			font-size:24px;
			font-weight:bold;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color: #519D9E;		/* WA-green */
			padding-left:0;
			padding-bottom:0px;
		}
		#newssec #news {
			margin: 30px auto 0 8%;
			width: 85%;
			padding-top:20px;
			padding-bottom:20px;
			background-color:rgba( 255,255,255,0.90 ); 	/*  White  透過95% */
			position: relative;
		}
		#newssec #news  p.category01 {	/* NEWS & RELEASE カテゴリー */
			margin: 10px auto 10px 5%;
		}
		#newssec #news  h3 {
			width: 90%;
			font-size:17px;
			font-weight:bold;
			padding-left:20px;
			padding-bottom:5px;
		}
		#newssec #news dl.newsitem {
			margin: 0 auto 0 auto;
			width: 90%;
		}
		#newssec #news dl.newsitem dt {
			margin: 0 auto 0 auto;
			width: 90%;
			font-size:16px;
			padding:15px;
			padding-top:0px;
			padding-left:25px;
			line-height:27px;
			color:#444;
			background	: url("../images/icon/arrow01.png") no-repeat;
			background-size:14px 13px;
			background-position:left 0 top 6px;
		}
		#newssec #news dl.newsitem dd {
			margin: 0 auto 0 auto;
			width: 100%;
			font-size:13px;
			line-height:20px;
			padding-top:0px;
			padding-left:50px;
			padding-right:50px;
			padding-bottom:10px;
		}
		#newssec .listbk {		/* 一覧に戻る */
			display: block;
			position: absolute;
			bottom: 30px;
			left:-60px;
			width: 200px;
			height:45px;
		}
	}