/*----------------------------------------------------------------------------*/
/* 	Tranquwell  TOURS page								 	CSS      */
/*----------------------------------------------------------------------------*/
	main {
/*		background-color:#FFF;	*/
	}
	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;
	}
	#main-area>.particle {
		margin-top:0px;
	}
	#main-area>.circlesym {	/* ◎ */
		position:absolute;
		top:150px;
		right:8.5%;
		width:231px;
		height:231px;
		z-index:9;
	}
	#main-area>.circlesym .circle {
		margin: 0 auto 0 auto;
		width:231px;
		height:231px;
		background: url( "../images/bg/csym03.png" ) no-repeat;
		background-size: 231px 231px;
		background-position:center 0;
		position:relative;
	}
	#main-area>.circlesym .circle::before {
	 	content: '';
	 	padding-top: 50%;
	}
	/* 回転 */
	#main-area>.circlesym .circle {
		animation-name: rotate;
		animation-duration: 8s;
		animation-timing-function: cubic-bezier(0.5, 0.51, 0.51, 0.52);
		animation-iteration-count: infinite;
	}
	@keyframes rotate {
		 0% {
		 	transform: rotateZ(0);
		 }
		 100% {
			transform: rotateZ(360deg);
		}
	}
	#main-area>.circlesym .syml {
		position:absolute;
		top:28%;
		left:0;
		right:0;
		margin:auto;
		width:121px;
		height:88px;
		text-align:center;
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		#main-area>.circlesym {	/* ◎ */
			position:absolute;
			top:140px;
			right:8.5%;
			width:192px;
			height:192px;
		}
		#main-area>.circlesym .circle {
			margin: 0 auto 0 auto;
			width:192px;
			height:192px;
			background: url( "../images/bg/csym03.png" ) no-repeat;
			background-size: 192px 192px;	/* 70% */
			background-position:center 0;
			position:relative;
		}
		#main-area>.circlesym .syml {
			position:absolute;
			top:28%;
			left:0;
			right:0;
			margin:auto;
			width:97px;
			height:70px;
		}
	}
	@media screen and (max-width:767px) {

		#main-area {
			width:100%;
			margin:0 auto;
			position: relative;
		}
		#main-area>.particle {
			margin-top:200px;
		}
		#main-area>.circlesym {	/* ◎ */
			position:absolute;
			top:40px;
			top:360px;
			right:5%;
			width:137px;
			height:137px;
			z-index:999999;
		}
		#main-area>.circlesym .circle {
			margin: 0 auto 0 auto;
			width:137px;
			height:137px;
			background: url( "../images/bg/csym03.png" ) no-repeat;
			background-size: 137px 137px;	/* 50% */
			background-position:center 0;
			position:relative;
		}
		#main-area>.circlesym .syml {
			position:absolute;
			top:28%;
			left:0;
			right:0;
			margin:auto;
			width:73px;
			height:53px;
		}
	}

/* ■ introduction section -----------------------------------------------*/

	#introduction {
		margin:-10px auto 0 auto;
		width:100%;
		padding-bottom:50px;
	}

	@media screen and (max-width:550px) {
		#introduction h2{
			margin:0 0 50px 0;
		}
	}
	#introduction h2 span.bgLRextend::before{
		background:#333;
	}
	#introduction .cont {
		margin:0 auto 0 auto;
		width:100%;
		/* height:480px; */
/*		background:linear-gradient(rgba(000, 000, 000, 0.4), rgba(000,000, 000, 0.4)),
		url("../images/tours/post/tit01.jpg") no-repeat;
		background-size: cover;
		background-position: center top 0; */
/*		background-color:#F0EDE4;	*/	/* tranquwell-beigegray */
		position:relative;
	}
	#introduction .cont img {
		display:block;
		margin:0 auto 0 auto;
		width:100%;
		filter: brightness(70%);	/* ◆ 明度調整 */
		z-index:0;
	}
	#introduction .cont>.textbox {
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin:auto;
		width:70%;
		/* height:480px; */
		/* padding:40px 30px 40px 30px; */
		padding:0;
		z-index:1;
	}
	#introduction .cont>.textbox>h2{
		margin:0 auto 50px auto;
		font-size:34px;
		text-align:center;
		line-height:1.8em;
		color:#FFF;
	}
	#introduction .cont>.textbox>p.txt {
		margin:0 auto 0 auto;
		font-size:20px;
		text-align:left;
		line-height:2.2em;
		/* font-family: "Lora", "Noto Serif JP", serif; */
		font-display: swap;
		color:#FFF;
		/* padding-left:3.5%; */
	}

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

		#introduction {
			margin:0 auto 0 auto;
			width:100%;
			height:350px;
			padding-bottom:0;
		}
		#introduction .cont {
			margin:0 auto 0 auto;   
			width:100%;
			height:auto;
/*			background:linear-gradient(rgba(000, 000, 000, 0.4), rgba(000,000, 000, 0.4)),
			url("../images/tours/post/tit01.jpg") no-repeat;
			background-size: cover;
			background-position: center top 0; 	*/
			position:relative;
		}
		#introduction .cont img {
			margin:0 auto 0 auto;
			width:auto;
			height:350px;
			object-fit: cover;		/* トリミング */
		}
		#introduction .cont>.textbox {
			position:absolute;
			top: 50%;
			left: 50%;
			/* top:10px;
			left:0;
			right:0; */
			margin:auto;
			width:90%;
		}
		#introduction .cont>.textbox>h2{
			margin:0px auto 10px auto;
			width:100%;
			text-align:center;
			font-size:14px;
			font-weight:bold;
			line-height:1.8em;
			padding-top:15px;
		}
		#introduction .cont>.textbox>p.txt {
			margin:0 auto 0 auto;   
			width:100%;
			text-align:left;
			font-size:12px;
			line-height:2.0em;
		}
	}

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

	}

/* ■ MainConents #section01  */

	#section01 {
		margin:-61px auto 0 auto;
		width:100%;
		background-image:
			url("../images/bg/brline02.svg"),
			url("../images/bg/brline01.svg");
		background-size:
			:contain,
			:contain;
		background-position:
			center top 44%,
			center top 42%;
		background-repeat:
			no-repeat,
			no-repeat;
		
	}
	#section01>h2 {
		display:block;
		margin: 0 auto 0 auto;
		width: 100%;
		text-align:center;
		font-size:32px;
		font-weight:bold;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		padding-top:80px;
		padding-bottom:30px;
	}
	#section01>p {
		margin:0 auto 0 auto;
		width:100%;
		text-align:center;
		font-size: 16px;
		line-height:1.8em;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color:#333;
	}
	#section01 .cont {
		margin: 30px auto 0 auto;
		width:75%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-bottom:30px;
	}
	#section01 .cont>ul {
		margin: 30px auto 0 auto;
		width:47%;
		background-color:rgba( 255,255,255,0.97 ); 	/*  White  透過97% */
		box-shadow: 0 0 5px #ccc;
		position:relative;
		padding-bottom:80px;
	}
	#section01 .cont>ul li {
		margin: 0 auto 0 auto;
		width:100%;
	}
	#section01 .cont>ul li img {
		display:block;
		margin: 0 auto 0 auto;
		width:100%;
	}
	#section01 .cont>ul li dl {
		margin: 0 auto 0 auto;
		width:100%;
	}
	#section01 .cont>ul li dt {
		margin: 30px auto 20px auto;
		width:100%;
		text-align:center;
		font-size: 20px;
		font-weight:bold;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color: #6E3919;		/* sopv-brown03 */
	}
	#section01 .cont>ul li dd {
		margin: 0 auto 0 auto;
		width:80%;
		font-size: 14px;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color:#333;
	}
	#section01 .cont>ul li dd:nth-child(3) {
		font-size: 14px;
		padding-top:20px;
		color: #6E3919;		/* sopv-brown03 */
	}
	#section01 .cont>ul li dd:nth-child(4) {
		font-size: 14px;
		color: #A4966A;		/* Gold01 */
		padding-top:20px;
		padding-bottom:30px;
	}
	#section01 .cont>ul li.btn {
		position:absolute;
		bottom:25px;
		left:0;
		right:0;
		margin:auto;
		text-align: center;
		padding-top:10px;
	}
	#section01 .cont>ul  li.btn .btnlinestretches3 span {
		font-size:14px;
	}
	#section01 .cont .exank {
		margin: 80px auto 0 auto;
		width:100%;
		text-align: center;
	}
	#section01 .cont .exank a {
		display:block;
		margin: 0 auto 0 auto;
		width:40%;
		text-align: center;
		font-size:16px;
		font-weight:bold;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color: #8d6d2b;		/* tranquwell01 */
		padding:15px 0 15px 0;
		background-color:#F0EDE4;		/* tranquwell-beigegray */
		border:1px solid #8d6d2b;		/* tranquwell01 */
	}
	#section01 .cont .exank a:hover {
		display:block;
		color:#FFF;
		background-color: #8d6d2b;		/* tranquwell01 */
		border:1px solid #8d6d2b;		/* tranquwell01 */
	}
	#section01 #splan {
		margin: 50px auto 0 auto;
		width:100%;
		text-align: center;
		padding:50px 0 30px 0;
		background-color:#F0EDE4;		/* tranquwell-beigegray */
	}
	#section01 #splan #splan-btn {
		margin: 0 auto 0 auto;
		width:20%;
		border:1px solid #8d6d2b;		/* tranquwell01 */
	}
	#section01 #splan #splan-btn a {
		display:block;
		padding:15px 30px 15px 30px; 
		text-align:center;
		font-weight:bold;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color:#FFF;
		background-color: #8d6d2b;		/* tranquwell01 */
	}
	#section01 #splan #splan-btn a:hover {
		display:block;
		color: #8d6d2b;		/* tranquwell01 */
		background-color: #F0EDE4;		/* tranquwell-beigegray */
	}
	#section01 #splan p.tailtxt {
		width:100%;
		text-align:center;
		font-size:18px;
		font-family: "Lora", "Noto Serif JP", serif;
		font-display: swap;
		color:#333;
		padding-top:30px;
		padding-bottom:30px;
	}

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

		#section01 {
			margin:0 auto 0 auto;
			width:100%;
			background-image:
				url("../images/bg/brline02.svg"),
				url("../images/bg/brline01.svg");
			background-size:
				:contain,
				:contain;
			background-position:
				center top 54%,
				center top 52%;
			background-repeat:
				no-repeat,
				no-repeat;
			padding-bottom:0px;
		}
		#section01>h2 {
			display:block;
			margin: 0 auto 0 auto;
			width: 100%;
			text-align:center;
			font-size:16px;
			padding-top:30px;
			padding-bottom:10px;
		}
		#section01>p {
			margin:0 auto 0 auto;   
			width:70%;
			text-align:left;
			font-size: 12px;
			line-height:1.7em;
		}
		#section01 .cont {
			margin: 20px auto 0 auto;
			width:100%;
			display:block;
		}
		#section01 .cont>ul {
			margin: 20px auto 0 auto;
			width:90%;
			box-shadow: 0 0 3px #ccc;
		}
		#section01 .cont>ul li {
			margin: 0 auto 0 auto;
			width:100%;
		}
		#section01 .cont>ul li img {
			display:block;
			margin: 0 auto 0 auto;
			width:100%;
		}
		#section01 .cont>ul li dl {
			margin: 0 auto 0 auto;
			width:100%;
		}
		#section01 .cont>ul li dt {
			margin: 10px auto 10px auto;
			width:100%;
			text-align:center;
			font-size: 13px;
		}
		#section01 .cont>ul li dd {
			margin: 0 auto 0 auto;
			width:80%;
			font-size: 12px;
		}
		#section01 .cont>ul li dd:nth-child(3) {
			font-size: 10px;
			padding-top:5px;
		}
		#section01 .cont>ul li dd:nth-child(4) {
			font-size: 10px;
			padding-bottom:10px;
		}
		#section01 .cont>ul  li.btn .btnlinestretches3 span {
			font-size:13px;
		}
		#section01 .cont .exank {
			margin: 20px auto 0 auto;
			width:100%;
			text-align: center;
		}
		#section01 .cont .exank a {
			display:block;
			margin: 0 auto 0 auto;
			width:50%;
			text-align: center;
			font-size:12px;
			font-weight:bold;
			font-family: "Lora", "Noto Serif JP", serif;
			font-display: swap;
			color: #8d6d2b;		/* tranquwell01 */
			padding:7px 15px 7px 15px; 
			background-color:#F0EDE4;		/* tranquwell-beigegray */
			border:1px solid #8d6d2b;		/* tranquwell01 */
		}
		#section01 .cont .exank a:hover {
			display:block;
			color:#FFF;
			background-color: #8d6d2b;		/* tranquwell01 */
			border:1px solid #8d6d2b;		/* tranquwell01 */
		}
		#section01 #splan {
			margin: 0 auto 0 auto;
			width:100%;
			text-align: center;
			padding:30px 0 30px 0;
		}
		#section01 #splan #splan-btn {
			margin: 0 auto 0 auto;
			width:50%;
		}
		#section01 #splan #splan-btn a {
			display:block;
			padding:7px 15px 7px 15px; 
			text-align:center;
			font-weight:bold;
		}
		#section01 #splan p.tailtxt {
			font-size:12px;
			padding-top:20px;
			padding-bottom:10px;
		}
	}

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

		#section01 .cont {
			margin: 30px auto 0 auto;
			width:95%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			padding-bottom:20px;
		}
		#section01 .cont>ul {
			margin: 30px auto 0 auto;
			width:47%;
			background-color:rgba( 255,255,255,0.97 ); 	/*  White  透過97% */
			box-shadow: 0 0 5px #ccc;
			position:relative;
			padding-bottom:40px;
		}
		#section01 .cont .exank {
			margin: 50px auto 30px auto;
			width:100%;
		}
		#section01 #splan {
			margin: 0 auto 0 auto;
			width:100%;
		}
	}

/* waves 背景透過 0 */

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

		#waveCanvas{
			margin:0 auto 0 auto;
		}
	}