/*----------------------------------------------------------------------------*/
/* 	株式会社 D.O.D 			TOP page				  CSS    */
/*----------------------------------------------------------------------------*/
@charset "utf-8";

	body {
		background: #FFF;
	}


/* font-family */
	#splash-logo,
	.top-lead,
	h1,
	h2,
	h3 span,
	#g-nav,
	#pc-nav,
	.openbtn,
	#footer{
		font-family: 'Lato', sans-serif;
		font-display: swap;
		letter-spacing: 0.1em;
	}

	/* heading */

	h2 {
		text-transform: uppercase;
		font-size: 3rem;
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 767px) and (max-width: 1020px) {

		h2 {
				font-size:2.0rem;
		}
	}
	@media screen and (max-width:767px) {

		h2 {
				font-size:2rem;
		}
	}

	/* lead */
	.top-lead{
		position: fixed;
		bottom:10%;
		left:5%;
		font-size:3rem;
		text-transform: uppercase;
		font-weight: bold;
		line-height: 1.5;
	}

	.top-lead span.bgLRextend::before{
		background:#333;
	}

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

		.top-lead {
			font-size:2.2rem;
		}
	}
	@media screen and (max-width:380px) {
		.top-lead {
			font-size:1.8rem;
		}
	}

/* ● 横スクロール位置バー の高さ範囲 */
#container{
	height:auto;
}
/* main-area */

	#main-area {
		width:100%;
		margin:0 auto;
		padding: 0 0 50px 0; 
		position: relative;
	}
	#main-area h1 {
		text-indent: -99999px;	/* テキスト非表示 */
	}
	#main-area>.particle {
		margin-top:0px;
	}

	#main-area>#sym01 {		/* ◎So many man Somanny mainds */
		display:block;
		position: absolute;
		top:43%;
		top:44%;
		right:-65%;
		width:100%;
		z-index:0;
	}
	#main-area>#sym01 img {
		display:block;
		width:70%;
		width:60%;
	}
	/* 回転 */
	#main-area>#sym01 img {
		animation-name: rotate01;
		animation-duration: 30.0s;
		animation-timing-function: cubic-bezier(0.5, 0.51, 0.51, 0.52);
		animation-iteration-count: infinite;
	}
	@keyframes rotate01 {
		 0% {
		 	transform: rotateZ(0);
		 }
		 100% {
		 		transform: rotateZ(360deg);
		}
	}

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

		#main-area>#sym01 {
			display:block;
			position: absolute;
			top:50%;
			right:-50%;
			width:100%;
		}
		#main-area>#sym01 img {
			display:block;
			width:30%;
		}
		/* 回転 */
		#main-area>#sym01 img {
			animation-name: rotate01;
			animation-duration: 30.0s;
			animation-timing-function: cubic-bezier(0.5, 0.51, 0.51, 0.52);
			animation-iteration-count: infinite;
		}
		@keyframes rotate01 {
			 0% {
				 	transform: rotateZ(0);
			 }
			 100% {
			 		transform: rotateZ(360deg);
			}
		}
	}

/* ■ vision section ----------------------------------------------*/

	#vision{			/* ◆ PC layout */
		margin:-850px auto 150px auto;
		width:85%;
		width:75%;
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	#vision .img{
		margin:0 auto 0 auto;
		width:35%;
		min-height: 590px;
		background:url("../images/top/pict_01.jpg") no-repeat center;
		background-size: cover;
	}
	#vision .content{
		margin:0 auto 0 auto;
		width:50%; 
		text-align: right;
	}
	#vision h2{
		margin:0 0 0 0;
		text-align: right;
		font-size: 3.2rem;
		color:#555;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
	}
	#vision p {
		line-height: 2;
		margin: 0 0 30px 0;
		font-size: 18px;
		color:#333;
		text-align: left;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}
	#vision p.txtex {
		text-align:center;
		font-weight:bold;
		font-family: "Antro_Vectra";
		font-display: swap;
		font-size: 30px;
	}
	#vision .vision-lead{
		margin: 0 0 90px 0;
		position: relative;
		color: #333;
		font-size:1.3rem;
		font-weight: bold;
		text-align: right;
	}
	#vision .vision-lead::after{
		content:'';
		position: absolute;
		bottom:-30px;
		right:0;
		background:#D03C1B;		/* HB-red prored */
		color: #333;
		width:12em;
		height: 1px;
	}
	#vision .btn{
		text-align: right;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
	}

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

		#vision{			/* ◆ PC layout */
			margin:-750px auto 150px auto;
			width:75%;
			display: flex;
			justify-content:space-between;
			align-items: center;
			flex-wrap: wrap;
		}
	}
	@media only screen and (min-width: 1020px) and (max-width: 1400px) {	/*◇ PC-S */

		#vision{			/* ◆ PC layout */
			margin:-650px auto 150px auto;
			width:80%;
			display: flex;
			justify-content:space-between;
			align-items: center;
			flex-wrap: wrap;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 767px) and (max-width: 1020px) {

		#vision{			/* ◆ PC layout */
			margin:-400px auto 150px auto;
			width:90%;
			display: flex;
			justify-content:space-between;
			align-items: center;
			flex-wrap: wrap;
		}
		#vision h2 {
			margin:0 0 0 0;
			font-size: 2.8rem;
			line-height:1.7em;
		}
		#vision .vision-lead{
			margin: 0 0 50px 0;
			position: relative;
			color: #333;
			font-size:1.3rem;
			font-weight: bold;
			text-align: right;
			line-height:1.0em;
		}
		#vision .vision-lead::after{
			content:'';
			position: absolute;
			bottom:-30px;
			right:0;
			background:#D03C1B;		/* HB-red prored */
			color: #333;
			width:12em;
			height: 1px;
		}
		#vision p {
			line-height: 2;
			margin: 0 0 30px 0;
			font-size: 14px;
			color:#333;
		}
		#vision p.txtex {
			text-align:center;
			font-size: 16px;
		}
	}

	@media screen and (max-width:767px) {	/* ◇SP layout */

		#vision{
			margin:20px 0 20px 0;
			margin:-100px 0 20px 0;
			width:100%;
			text-align:center;
		}
		#vision .img{
			margin:0 0 30px 0;
			margin:0 auto 15px auto;
			width:100%;
			width:90%;
			min-height: 290px;
			min-height: 200px;
		}
		#vision h2{
			margin:0 0 10px 0;
			text-align: right;
			font-size: 1.3rem;
		}
		#vision .content{
			margin:0 auto 0 auto;
			width:90%; 
			text-align: left;
		}  
		#vision p {
			font-size: 12px;
			line-height: 1.7em;
			margin: 0 0 15px 0;
			color:#333;
		}
		#vision p.txtex {
			font-size: 15px;
		}
		#vision .vision-lead{
			margin: 0 0 40px 0;
			font-size:13px;
		}
		#vision .vision-lead::after{
			content:'';
			position: absolute;
			bottom:-30px;
			bottom:-15px;
			right:0;
			background:#131D3E;		/* HISAYA-blue01 */
			width:12em;
			height: 3px;
		}
	}

/* ■ service section -----------------------------------------------*/

	#service {			/* ◆PC　layout */
		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 0%,
			center top 3%;
		background-repeat:
			no-repeat,
			no-repeat;
		padding-bottom:30px;
		position:relative;
	}
	#service h2{
		text-align: center;
		margin:0 0 100px 0;
		font-weight:bold;
		font-size: 3.2rem;
		color:#555;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
		padding-top:20px;
	}
	#service>.tsym01 {	/* 01# */
		display:block;
		position: absolute;
		top:20px;
		left:61%;
	}
	#service>.tsym01 img {
		display:block;
	}

	@media screen and (max-width:550px) {
		#service h2{
			margin:0 0 50px 0;
		}
	}
	#service h2 span.bgLRextend::before{
	}
	#service .service-area{
		margin:0 auto 270px 5%;
		width:95%;
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	@media screen and (max-width:590px) {
		#service .service-area{
			margin:0 0 50px 0;   
			margin:0 auto 20px auto;   
		}
	}
	#service .service-area::after{
		content:'';
		position: absolute;
		width: 70%;
		height: 23em;
		background:#00B0CE;		/* HB-red prored */
		background:#ececec;		/* thin-gray */
		right:10%;
		top:20%;
		z-index: -1;
	}
	#service .service-area:nth-of-type(2n+1){
		flex-direction: row-reverse;
	}
	#service .service-area .img{
		width:50%;
	}
	#service .service-area .content {
		margin: 0 auto 0 auto;
		width:40%;
		background:#fff;
		box-shadow: 0 0 20px #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top:150px;
	}
	#service .service-area .content>.tsym03 {	/* 03# */
		display:block;
		position: absolute;
		top:38px;
		left:12%;
	}
	#service .service-area .content>.tsym03 img {
		display:block;
		zoom:0.7;
	}
	#service .service-area .content>.tsym04 {	/* 04# */
		display:block;
		position: absolute;
		top:45px;
		right:12%;
	}
	#service .service-area .content>.tsym04 img {
		display:block;
		zoom:0.7;
	}
	#service .service-area:nth-of-type(2n) .img {
		text-align:center;
	}
	#service .service-area:nth-of-type(2n) .content {
		margin-left:-2%;
	}

	#service .service-area .content-area{
		padding:40px;
	}
	#service .service-area .content-area h3{
		text-align: center;
		font-size: 1.2rem;
		margin: 0 0 30px 0;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}
	#service .service-area .content-area h3 span {
		font-weight: bold;
		display: block;
		font-size: 1.2rem;
		font-family: "Futura Heavy font";
		font-display: swap;
		color:#555;
	}
	#service .service-area .content-area p {
		margin:0 0 30px 0;   
		font-size: 0.9rem;
		line-height:1.8em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		padding:0 5% 0 5%;
	}
	#service .service-area .content-area p span {
		font-size: 1.0rem;
		font-weight: 700;
		line-height:2.8em;
	}
	#service .btn{
		text-align: right;
		font-family: "Futura Heavy font";
		font-display: swap;
		font-size: 0.9rem;
	}

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

	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 767px) and (max-width: 1020px) {

		#service h2{
			text-align: center;
			margin:0 0 70px 0;
			font-size: 2.5rem;
			padding-top:30px;
		}
		#service .service-area .img{
			width:40%;
		}
		#service .service-area:nth-of-type(2n+1) {
			flex-direction:row;
		}
		#service .service-area .content {
			margin: 0 auto 0 auto;
			width:55%;
			box-shadow: 0 0 20px #ccc;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			top:150px;
		}
		#service .service-area:nth-of-type(2n) .content {
			margin-left:0;
		}
	}

	@media screen and (max-width:767px) {	/* ◇ SP　layout */

		#service {
			margin:50px auto 0 auto;
			width:100%;
			background:linear-gradient(90deg, #F3F3F3 0%,#F3F3F3 30%,transparent 30%,transparent 100%);	/* ★ */
			padding-bottom:30px;
		}
		#service h2{
			margin:0 0 15px 0;
			font-size:1.3rem;
			padding-top:10px;
		}
		#service .service-area{
			margin:0 0 10px 0;
			z-index:1;
		}
		#service .service-area::after{
			content:'';
			position: absolute;
			width: 100%;
			height: 23em;
			height: 20em;
			background:#F5F5F5;
			right:10%;
			top:20%;
			z-index: -1;
		}
		#service .service-area .img{
			margin:0 auto 30px auto;   
			width:100%;
			z-index: 2;
			text-align:center;
		}
		#service .service-area .content{
			margin: 0 auto 0 5%;
			width:90%;
			top:220px;
			box-shadow: 0 0 5px #ccc;
		}
		#service .service-area .content-area{
			padding:0px;
			padding-bottom:20px;	/* ★btn 追加時除く */
		}
		#service .service-area .content-area h3{
			margin: 20px 0 20px 0;
			text-align: center;
			font-size: 15px;
		}
		#service .service-area .content-area h3 span{
			font-weight: bold;
			text-transform: uppercase;
			display: block;
			font-size: 15px;
		}
		#service .service-area .content-area p{
			margin:0 auto 0 auto;
			width:90%;
			font-size: 0.8rem;
			line-height:1.7em;
		}
		#service .service-area .content-area p span {
			font-size:0.8rem;
			font-weight:bold;
			line-height:2.4em;
		}
		#service>.tsym01 {	/* 01# */
			display:block;
			position: absolute;
			top:10px;
			left:70%;
		}
		#service>.tsym01 img {
			display:block;
			width:50%;
		}
	}

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

		#service .service-area .img{
			margin:0 auto 30px auto;   
			width:100%;
			z-index: 2;
			text-align:center;
		}
		#service .service-area .img img {
			width:85%;
			padding-left:5%;
		}
		#service .service-area .content{
			width:100%;
			top:-10px;
			top:-10px;
			animation:none;
			opacity: 1;
			z-index: 1;
		}
		#service .service-area:nth-of-type(2n) .content {
			margin-left:5%;
		}
	}

/* ■ WORK section ---------------------------------------*/

	#works {
		margin:0 auto 0 auto;
		width:100%;
		padding-top:30px;
		padding-bottom:80px;
		background:linear-gradient(180deg, 0%,transparent 12%,#F3F3F3 12%,#F3F3F3 40%,transparent 40%,transparent 100%);	/* ★ */
		position:relative;
	}
	#works h2{
		font-size: 3.2rem;
		text-align: center;
		margin:0 0 50px 0;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
		color:#555;
	}
	#works>.tsym02 {	/* 02# */
		display:block;
		position: absolute;
		top:20px;
		left:37%;
	}
	#works>.tsym02 img {
		display:block;
	}

	@media screen and (max-width:550px) {
		#works h2{
			margin:0 0 50px 0;
		}
	}
	#works h2 span.bgLRextend::before{
		background:#333;
	}
	#works #wkinf-area {
		margin:0 auto 0 auto;
		width:87.5%;
		padding:30px 2.5% 50px 2.5%;
	}
	#works .work-area {
		margin:0 auto 0 auto;
		width:100%;
	}
	#works .work-area .guidetxt {
		margin:30px auto 0 30%; 
		width:45%;
		font-size:18px;
		line-height:2.0em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		color:333;
		padding-bottom:30px;
	}

	@media screen and (max-width:590px) {
		#works .work-area{
			margin:0 auto 20px auto;   
		}
	}
	#works .work-area .cont01 {
		margin: 0 auto 0 auto;
		width:100%;
		display:flex;
		flex-wrap:wrap;
		flex-direction:row;
/*		justify-content: space-between;	*/	/* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
		justify-content: flex-start;		/* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
/*		border: 1px solid #BDC3C7;*/	/* Siver */
	}
	#works .work-area .cont01>dl,dt,dd {
	}
	#works .work-area .cont01>dl {
		margin: 0 auto 20px auto;
		width:32%;
		padding-bottom:60px;
		background-color:#FFF;
		position:relative;
		border: 1px solid #BDC3C7;	/* Siver */
	}
	#works .work-area .cont01>dl dt {
		margin: 20px 0 20px 5%;
		width:90%;
		text-align:center;
		font-size: 16px;
		line-height:1.0em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		color: #6E3919;		/* fujiken-brown01 */
		color: #444;
		padding-left:0;
		padding-top:5px;
		padding-bottom:20px;
		border-bottom: 1px solid #BDC3C7;	/* Siver */
	}
	#works .work-area .cont01>dl:first-child dt {
		background-image:url("../images/top/sec02n01.png");
		background-size:	125px 41px;
		background-size:	81px 27px;	/* 65% */
		background-position:	left 0 top 0;
		background-repeat:no-repeat;
	}
	#works .work-area .cont01>dl dd {
		margin:0 auto 0 auto;   
		width:85%;
		font-size:13px;
		line-height:1.7em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-display: swap;
		color:333;
		padding-bottom:10px;
	}
	#works .work-area .cont01>dl dd.btn {
		position:absolute;
		bottom:10px;
		left:0;
		right:0;
		margin:auto;
		text-align: center;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
		padding-top:30px;
	}
	#works .nlall {
		display: block;
		margin: 45px auto 60px auto;
		margin: 30px auto 60px auto;
		position:relative;
	}
	#works .nlall a {
		display: block;
		position:absolute;
		top:0;
		left:0;
		right:0;
		margin:auto;
		width:200px;
		font-size:14px;
		line-height:1.5em;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
		color: #FFF;
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:8px 8px;
		background-position: 15px  15px;
	}
	#works .nlall a:hover {
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:8px 8px;
		background-position: 170px 15px; 
	}

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

		#works {
			margin:30px auto 0 auto;
			width:100%;
			padding-top:20px;
			padding-bottom:0;
			background-color:transparent;
			background:linear-gradient(90deg,#F0EDE4 0%,#F0EDE4 30%,white 30%,white 100%);	/* ★ */
		}
		#works #wkinf-area{
			margin:0 auto 0 auto;   
			width:95%;
			padding:15px 2.5% 20px 2.5%;
		}
		#works .work-area{
			margin:0 auto 0 auto;
			width:100%;
		}
		#works .work-area .cont01>dl {
			margin: 0 auto 20px auto;
			width:32%;
		}
		#works .work-area .cont01>dl dt {
			margin: 20px 0 20px auto;
			width:100%;
			font-weight:bold;
			font-size: 15px;
			line-height:1.7em;
		}
	}

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

		#works {
			margin:0 auto 0 auto;
			width:100%;
			background:linear-gradient(90deg, #F3F3F3 0%,#F3F3F3 30%,transparent 30%,transparent 100%);	/* ★ */
			padding-top:10px;
			padding-bottom:0;
		}
		#works h2{
			margin:0 0 0 0;
			font-size:1.3rem;
			padding-top:0;
		}
		#works #wkinf-area{
			margin:0 auto 0 auto;   
			width:90%;
			padding:0 2.5% 20px 2.5%;
		}
		#works .work-area{
			margin:0 auto 0 auto;
			width:100%;
		}
		#works .work-area .guidetxt {
			margin:10px auto 0 auto;   
			width:85%;
			font-size:13px;
			font-weight:bold;
			line-height:1.7em;
			padding-bottom:15px;
		}
		#works .work-area .cont01 {
			margin: 20px auto 0 auto;
			width:100%;
			display:block;
			border:none;
		}
		#works .work-area .cont01>dl {
			margin: 0 auto 20px auto;
			width:100%;
			padding-bottom:30px;
			border: 1px solid #BDC3C7;	/* Siver */
		}
		#works .work-area .cont01>dl dt {
			margin: 20px auto 15px auto;
			width:90%;
			text-align:center;
			font-size: 15px;
			line-height:1.0em;
			font-weight:bold;
			padding-left:0px;
			padding-top:5px;
			padding-bottom:10px;
		}
		#works .work-area .cont01>dl:first-child dt {
			background-size:	125px 41px;
			background-size:	63px 21px;	/* 50% */
			background-position:	left 0 top 0;
			background-repeat:no-repeat;
		}
		#works .work-area .cont01>dl:nth-child(2) dt {
			background-image:url("../images/top/sec02n02.png");
			background-size:	126px 41px;
			background-size:	63px 21px;	/* 50% */
			background-position:	left 0 top 0;
			background-repeat:no-repeat;
		}
		#works .work-area .cont01>dl:nth-child(3) dt {
			background-image:url("../images/top/sec02n03.png");
			background-size:	126px 41px;
			background-size:	63px 21px;	/* 50% */
			background-position:	left 0 top 0;
			background-repeat:no-repeat;
		}
		#works .work-area .cont01>dl dd {
			margin:0 auto 0 auto;   
			width:90%;
			font-size:12px;
			line-height:1.6em;
			padding-bottom:20px;
			color:333;
		}
		#works .work-area .cont01>dl dd img {
			padding-bottom:10px;
		}
		#works .work-area .cont01>dl dd.btn {
			position:absolute;
			bottom:0;
			left:0;
			right:0;
			margin:auto;
			text-align: center;
		}
		#works .nlall {
			display: block;
			margin: 20px auto 45px auto;
			position:relative;
		}
		#works .nlall a {
			display: block;
			position:absolute;
			top:0;
			left:0;
			right:0;
			margin:auto;
			width:160px;
			font-size:12px;
			line-height:1.5em;
			color: #FFF;
			background	: url("../images/icon/btn-arrow.png") no-repeat;
			background-size:8px 8px;
			background-position: 10px  12px; 
		}
		#works>.tsym02 {	/* 01# */
			display:block;
			position: absolute;
			top:10px;
			left:70%;
		}
		#works>.tsym02 img {
			display:block;
			width:50%;
		}
	}

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

		#works .work-area .img{
			margin:0 auto 30px auto;   
			width:100%;
			z-index: 2;
			text-align:center;
		}
		#works .work-area .img img {

			width:85%;
			padding-left:5%;
		}
		#works .work-area .content{
			width:100%;
			top:-10px;
			top:-10px;
			animation:none;
			opacity: 1;
			z-index: 1;
		}
		#works .work-area:nth-of-type(2n) .content {
			margin-left:5%;
		}
	}

/* ■ about section -----------------------------------------------*/

	#about{
		margin: 60px 0 180px 0;
		background-image:
			url("../images/bg/brline02.svg"),
			url("../images/bg/brline01.svg");
		background-size:
			contain,
			contain;
		background-position:
			center top 0%,
			center top 3%;
		background-repeat:
			no-repeat,
			no-repeat;
	}
	#about h2 {
		text-align: center;
		margin:0 0 100px 0;
		padding-top:10px;
		font-size: 3.2rem;
		color:#555;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
		color:#444;
	}

	@media screen and (max-width:550px) {
		#about h2{
			margin:0 0 50px 0;
		}
	}
	#about .about-list {
		width: 96%;
		max-width: 860px;
		max-width: 760px;
		margin: 0 auto;
	}
	#about .about-list li {
		border-bottom: 1px solid #ccc;
		margin:0 0 15px 0;
		padding: 0 0 15px 0;
	}
	#about .about-list dl {
		display: flex;
		justify-content: space-between;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}
	#about .about-list dt {
		width:30%;
		padding: 0 0 0 40px;
	}
	#about .about-list dd {
		width:65%;
	}
	#about .nlall {
		display: block;
		margin: 45px auto 60px auto;
		position:relative;
	}
	#about .nlall a {
		display: block;
		position:absolute;
		top:0;
		left:0;
		right:0;
		margin:auto;
		width:200px;
		font-size:14px;
		font-weight:bold;
		line-height:1.5em;
		color: #FFF;
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:8px 8px;
		background-position: 15px  16px;
	}
	#about .nlall a:hover {
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:8px 8px;
		background-position: 170px 16px; 
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 767px) and (max-width: 1020px) {

		#about{
			margin: -50px 0 100px 0;
			background-image:
				url("../images/bg/brline02.svg"),
				url("../images/bg/brline01.svg");
			background-size:
				contain,
				contain;
			background-position:
				center top 0%,
				center top 3%;
			background-repeat:
				no-repeat,
				no-repeat;
		}
		#about h2 {
			text-align: center;
			margin:0 0 70px 0;
			font-size: 2.5rem;
			padding-top:30px;
		}
		#about .about-list{
			width: 85%;
			max-width: 760px;
			margin: 0 auto;
		}
	}
	@media screen and (max-width:767px) {

		#about{
			margin: 30px 0 0 0;
			background-image:
				url("../images/bg/brline02.svg"),
				url("../images/bg/brline01.svg");
			background-size:
				contain,
				contain;
			background-position:
				center top 0%,
				center top -10%;
			background-repeat:
				no-repeat,
				no-repeat;
		}
		#about h2{
			margin:0 0 30px 0;
			font-size:1.3rem;
			padding-top:30px;
		}
		#about .about-list{
			width: 90%;
			max-width: 860px;
			margin: 0 auto;
		}
		#about .about-list dt{
			width:25%;
			text-align:right;
			padding: 0 0 0 25px;
		}
		#about .about-list dd{
			width:70%;
		}
		#about .nlall {
			display: block;
			margin: 20px auto 45px auto;
			position:relative;
		}
		#about .nlall a {
			display: block;
			position:absolute;
			top:0;
			left:0;
			right:0;
			margin:auto;
			width:160px;
			font-size:12px;
			line-height:1.5em;
			font-weight:bold;
			font-family: "Futura Heavy font";
			font-display: swap;
			color: #FFF;
			background	: url("../images/icon/btn-arrow.png") no-repeat;
			background-size:8px 8px;
			background-position: 10px  12px; 
		}
	}

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

		#about .about-list dt{
			padding:0 0 0 10px; 
		}
	}

/* ■ MainConents #information  INFORMATION */

	#information {
		margin: -25px auto 0 auto;
		width: 100%;
		padding-bottom:0;
		background:linear-gradient(90deg,#E5E5E5 0%,#F5F5F5 37%,white 37%,white 100%);
	}
	#information h1,h2,h3,h4,h5,h6{
		font-size:100%;
		font-weight:normal;
	}
	#infct {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-top:0;
		padding-bottom:50px;
		background-image:url("../images/bg/info_back01.jpg");
		background-size:	contain;
		background-position:	left 0 top 0;
/*		background-attachment:fixed;*/
		background-repeat:no-repeat;
		position:relative;
	}
	#infct h2 {
		margin: 0 auto 0 auto;
		font-size:18px;
		text-align:center;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
		color:#fff;
		letter-spacing: 0.1em;
		padding-top:20px;
		padding-bottom:20px;
	}
	#infct01 {
		margin: 50px auto 0 auto;
		width: 90%;
		padding-top:20px;
		padding-bottom:30px;
		background-color:rgba( 255,255,255,0.98 ); 	/*  White  透過98% */
			box-shadow: 0px 1px 3px 1px #aaa;
			-webkit-box-shadow: 0px 1px 3px 1px #aaa;
			-moz-box-shadow: 0px 1px 3px 1px #aaa;
	}
	#infct01 ul {
		margin: 0 auto 0 auto;
		width: 90%;
		padding-top:5px;
		padding-bottom:5px;
		border-bottom: 1px solid #BDC3C7;	/* Siver */
		position:relative;
	}
	#infct01 li {
		margin: 0 auto 0 auto;
		width: 100%;
		font-size:12px;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		line-height:20px;
		color: #333;
	}
	#infct01 li.indent01 {
	 	padding-left:1em;
		text-indent:-1em;	/* 2行目以降1字下げ */
	}
	#infct01 li.txt01s {
		font-size:11px;
	}
	#infct01 li:first-child {
		margin: 0 auto 0 auto;
		width: 100%;
		height: 27px;
		position:relative;
	}
	#infct01 li:first-child .date {
		position:absolute;
		top:0;
		left:2.5%;
		font-size:12px;
		line-height:2.0em;
		color: #1E0F00;		/* sopv-brown01 */
	}
	#infct01 li:first-child .category {
		position:absolute;
		top:2px;
		right:0;
		text-align:center;
		font-size:12px;
		color: #FFF;
		padding:0 15px 0 15px;
	}
	#infct01 li.title {
		margin: 0 auto 0 auto;
		width: 100%;
		font-size:12px;
		line-height:1.7em;
		font-weight:600;
	}
	#infct01 li.title a {
		color: #555;
	}
	#infct01 li.title a:hover {
		color: #A4966A;		/* Gold01 */
	}
	#infct01 li a.continue {
		color: #A4966A;		/* Gold01 */
	}
	#infct01 li a.continue:hover {
		color: #B27C04;		/* Gold02 */
	}
	#infct01 .viewall {
		display: block;
		margin: 20px auto 0 22%;
		width: 180px;
		width: 56%;
		height:30px;
	}
	#infct01 .nlall {
		display: block;
		margin: 20px auto 45px auto;
		position:relative;
	}
	#infct01 .nlall a {
		display: block;
		position:absolute;
		top:0;
		left:0;
		right:0;
		margin:auto;
		width:160px;
		font-size:12px;
		line-height:1.5em;
		font-weight:bold;
		font-family: "Futura Heavy font";
		font-display: swap;
		color: #FFF;
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:8px 8px;
		background-position: 10px  12px; 
	}

	#infct #infctrind {
		display:none;
	}

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

	}

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

		#information {
			margin: 180px auto 0 auto;
			width: 100%;
			padding-bottom:0px;
			background:linear-gradient(180deg,white 0%,white 12%,#F5F5F5 12%,#F5F5F5 50%,white 50%,white 100%);	/* ★ */
		}
		#infct {
			margin: 0 auto 0 auto;
			width: 90%;
			width: 100%;
			padding-top:30px;
			padding-bottom:250px;
			background:linear-gradient(rgba(00, 00, 00, 0.3), rgba(00, 00, 00, 0.3)),
			url("../images/bg/info_back01.jpg") no-repeat;
			background-size: cover;
			background-position: center top 0; 
			background-attachment:fixed;
			position:relative;
		}
		#infct h2 {
			margin: 0 auto 0 auto;
			text-align:center;
			font-size: 3.2rem;
			font-family: "Futura Heavy font";
			font-display: swap;
			color:#fff;
			letter-spacing: 0.2em;
			padding-top:50px;
			padding-bottom:50px;
		}
		#infct01 {
			margin: 30px auto 0 auto;
			width: 75%;
			padding-top:40px;
			padding-bottom:80px;
			background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過95% */
				box-shadow: 0px 1px 2px 1px #aaa;
				-webkit-box-shadow: 0px 1px 2px 1px #aaa;
				-moz-box-shadow: 0px 1px 2px 1px #aaa;
		}
		#infct01 ul {
			margin: 0 auto 0 12%;
			width: 76%;
			padding-top:10px;
			padding-bottom:10px;
			border-bottom: 1px solid #BDC3C7;	/* Siver */
			position:relative;
		}
		#infct01 li {
			margin: 0 auto 0 auto;
			width: 100%;
			font-size:14px;
			font-family: "Noto Sans JP", serif;
			font-optical-sizing: auto;
			font-weight: 500;
			font-style: normal;
			font-display: swap;
			line-height:28px;
			color: #444;
		}
		#infct01 li.txt01s {
			font-size:14px;
		}
		#infct01 li.indent01 {
		 	padding-left:1em;
			text-indent:-1em;	/* 2行目以降1字下げ */
		}
		#infct01 li:first-child {
			margin: 0 auto 25px auto;
			width: 100%;
			height: auto;
			padding-bottom:10px;
			position:relative;
		}
		#infct01 li:first-child .date {
			position:absolute;
			top:0;
			left:0;
			line-height:2.2em;
			font-size:14px;
			font-weight:600;
		}
		#infct01 li:first-child .category {
			position:absolute;
			top:0;
			left:17%;
			width:17%;
			text-align:center;
			font-size:12px;
			padding:0 15px 0 15px;
		}
		#infct01 li.title {
			margin: 30px auto 0 auto;
			width: 100%;
			font-size:15px;
			line-height:1.7em;
			font-weight:600;
		}
		#infct01 .viewall {
			display: block;
			margin: 50px auto 0 39%;
			width: 200px;
			height:45px;
		}
		#infct01 .nlall {
			display: block;
			margin: 45px auto 60px auto;
			position:relative;
		}
		#infct01 .nlall a {
			display: block;
			position:absolute;
			top:0;
			left:0;
			right:0;
			margin:auto;
			width:200px;
			font-size:14px;
			font-weight:bold;
			line-height:1.5em;
			color: #FFF;
			background	: url("../images/icon/btn-arrow.png") no-repeat;
			background-size:8px 8px;
			background-position: 15px  16px;
		}
		#infct01 .nlall a:hover {
			background	: url("../images/icon/btn-arrow.png") no-repeat;
			background-size:8px 8px;
			background-position: 170px 16px; 
		}
		#infct #infctrind {
			position: absolute;
			top: 27%;
			left:8%;
			display: block;
		}
		#infct #infctrind img {
			display:block;
			zoom:0.85;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		#information {
			margin: 0 auto 0 auto;
			width: 100%;
s			padding-bottom:0;
			background:linear-gradient(180deg,#F5F5F5 0%,#F5F5F5 56%,white 56%,white 100%);	/* ★ */
		}
		#information #infcttitle01{
			margin: 0 auto 0 auto;
			width: 70%;
			padding-bottom:20px;
		}
		#information #infcttitle01 h2 {
			font-size:3.0rem;
			font-weight:bold;
		}
		#infct {
			margin: 0 auto 0 auto;
			width: 100%;
			padding-top:0;
			padding-bottom:100px;
			background-image:url("../images/bg/info_back01.jpg");
			background-size:	cover;
			background-position:	left 0 top 0;
			background-repeat:no-repeat;
			position:relative;
		}
		#infct01 {
			margin: 10px auto 0 auto;
			width: 85%;
			padding-top:40px;
			padding-bottom:80px;
		}
		#infct h2 {
			margin: 0 auto 0 auto;
			font-size:2.0rem;
		}
		#infct01 .nlall {
			display: block;
			margin: 30px auto 30px auto;
			position:relative;
		}
	}

/* ■ faq section ------------------------------------------------*/

	#faq{
		margin:150px 0 80px 0;
			padding-bottom:200px;
			background-image:url("../images/bg/info_back01.jpg");
			background-size:	1600px 1068px;
			background-size:	cover;
			background-position:	left 0 bottom 0;
			background-attachment:fixed;
			background-repeat:no-repeat;


/*		background-image:
			url("../images/bg/brline01.svg"),
			url("../images/bg/brline02.svg");
		background-size:
			contain,
			contain;
		background-position:
			center top 0%,
			center top 17%;
		background-repeat:
			no-repeat,
			no-repeat;
		padding-bottom:50px;	*/
	}

	#faq h2{
		font-size: 3rem;
		text-align: center;
		margin:0 0 50px 0;
		color:#FFF;
		padding-top:30px
	}

	#faq h2 span.bgLRextend::before{
		background:#FFF;
	}
	#faq .cont01 {
		margin: 50px auto 0 auto;
		width: 80%;
		padding-top:50px;
		padding-bottom:60px;
		background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過95% */
			box-shadow: 1px 1px 10px 1px #aaa;
			-webkit-box-shadow: 1px 1px 10px 1px #aaa;
			-moz-box-shadow: 1px 1px 10px 1px #aaa;
	}
	#faq ul {
		color:#222;
	}
	#faq ul li .box {
		background:#E7DDD2;		/* beige */
		background:#EEE;
	}

	.faq-bg {
		margin: 0 0 200px 25%
		width:90%;
		position: relative;
		height: 55vh;
		height: 50vh;
		background:url("../images/top/pict_06.jpg") no-repeat;
		background-size:contain;
		background-position:  right 17% center;
		background-position:  right 25% center;
	}
	.faq-bg::after{
		content:'';
		position: absolute;
		top:15%;
		left:8%;
		width:80%;
		height:55vh;
		height:50vh;
		background:#EEE;
		z-index: -1;
	}

	@media screen and (max-width:768px) {
		.faq-bg,
		.faq-bg::after{
			height:35vh;
		} 
		.faq-bg::after{
			content:'';
			position: absolute;
			top:15%;
			left:0%;
			width:100%;
			height:40vh;
			background:#EEE;
			z-index: -1;
		}
	}
	@media screen and (max-width:550px) {
		#faq{
			margin:0 0 100px 0;
		}
		#faq h2{
			margin: 0 0 20px 0;
			font-size:24px;
		}
		.faq-bg{
			margin:0 0 50px 25%;
			margin:0 0 0 auto;
			margin:80px 0 50px auto;
		}
		.faq-bg,
		.faq-bg::after{
			height:20vh;
		} 

		#faq .cont01 {
			margin: 20px auto 0 auto;
			width: 95%;
			padding-top:10px;
			padding-bottom:15px;
			background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過95% */
				box-shadow: 1px 1px 10px 1px #aaa;
				-webkit-box-shadow: 1px 1px 10px 1px #aaa;
				-moz-box-shadow: 1px 1px 10px 1px #aaa;
		}
		#faq ul {
			margin: 0 auto 0 auto;
			width: 95%;
		}

	}