@charset "UTF-8";
/* CSS Document */
html {
	scroll-behavior: smooth;
}
#pageWrap {
	background-image: url("../images/bg.jpg");
	background-size: 100%;
}
.notes-area {
    margin: 0 auto 0;
}
.boxWidth {
	container-type: inline-size;
}
#pageTit {
	position: relative;
}
#pageTit h2 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#pageTit h2 span {
    font-size: 100%;
}

#sec01 {
	
}
#sec01 .h3Box {
	padding-bottom: 3%;
	h3 {
		font-size: 30px;
		letter-spacing: 0.1em;
	}
	p {
		font-size: 22px;
	}
}
#sec01 .yumeTit {
	background-color: #d74787;
	padding: 0px 0 0.5em;
	color: #fff;
	font-size: 40px;
	h3 {
		line-height: 1;
	}
	.yellow {
		margin-left: 1em;
		color: #fff000;
	}
}
#sec01 .yumeBox {
	.imgBox {
		width: 28%;
	}
	.txtBox {
		width: 40%;
	}
	.box02 {
		order: 1;
	}
}
#sec01 .yumeBox .txtBox {
	display: flex;
justify-content: center;
align-items: center;
	flex-wrap: wrap;
	container-type: inline-size;
	h4 {
		font-size: clamp(13px, 3.5cqw, 24px);
		color: #d74787;
		text-align: center;
		padding: 1em 0 0.5em;
	}
	dl {
		border-top: #000 solid 1px;
		border-bottom: #000 solid 1px;
		padding: 0.5em 0;
		dt {
			font-size: clamp(13px, 3.2cqw, 22px);
		}
		dd {
			font-size: clamp(13px, 2.8cqw,18px);
			text-align: left;
			ul {
				line-height: 1.4;
			}
			li {
				
				display: inline-block;
				padding-right: 1em;
			}
		}
	}
	ul.flex {
		width: 100%;
		padding: 1em 0;
		li {
			font-size: clamp(11px, 2.3cqw,15px);
			width: 49%;
			text-align: left;
		}
	}
	p.caption {
		font-size: 10px;
		text-align: left;
	}
}
.pink {
	color: #d74787;
}

#sec01 .trafBox {
	padding: 3% 0;
	div {
		width: 31%;
		position: relative;
		p {
			position: absolute;
			top: 5%;
			width: 90%;
			left: 5%;
		}
	}
}

.btns {
	padding: 3% 0;
	ul {
		li {
			width: 19%;
			border-top: #000 solid 1px;
			border-bottom: #000 solid 1px;
			container-type: inline-size;
			padding: 0.3em 0;
			position: relative;
			a {
				color: #000;
				font-size: 7.6cqw;
			}
		}
		li:hover::after {
				content: "▼";
			line-height: 0.8;
			font-size: 150%;
			position: absolute;
			top: 100%;
			left: calc(50% - 0.5em);
			}
	}
}

#secMap {
	padding: 30px 0;
}

.itemWrap {
	padding: 20px 0;
	h4 {
		width: 100%;
		text-align: left;
		position: relative;
		line-height: 1;
		margin-bottom: 15px;
		font-size: clamp(15px, 2.0cqw,26px);
		.engTxt {
			
			&::before {
				content: "｜";
			}
			&::after {
				content: "｜";
			}
		}
		.jp {
			font-size: 70%;
			position: absolute;
			right: 0;
		}
		&::after {
			content: "";
			position: absolute;
			width: calc(100% - 13cqw);
			height: 3px;
			right: 0;
			bottom: 0px;
			background-color: #888467;
		}
	}
	.item {
		
	}
}
.item3 .item {
	width: 31%;
	max-width: 370px;
}
.itemWrap .item p {
	font-size: clamp(13px, 1.7cqw,18px);
	padding: 0.3em 0 1em;
	span {
		display: block;
	}
}

.item012 {
	.item {
		width: 100%;
		background-color: #efeddf;
		border: #dcdbce solid 2px;
		margin-bottom: 30px;
		align-items: center;
		.leftBox {
			width: 54%;
			align-items: center;
			.imgBox {
				width: 65%;
				max-width: 410px;
			}
			.minBox {
				width: 35%;
				position: relative;
				padding: 0 3.5%;
				img {
					/*width: 50%!important;*/
				}
				&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 5%;
				height: 90%;
				width: 1px;
				background-color: #dcdbce;
			}
			}
		
			
		}
		.txtBox {
			padding: 0 2.5%;
			width: 46%;
			dt {
				font-size: clamp(13px, 1.7cqw,18px);
			}
			dd {padding: 0.5em 0;
				border-top: #000 solid 1px;
		border-bottom: #000 solid 1px;
				text-align: left;
				ul {
					
				}
				li {
					display: inline-block;
					font-size: clamp(12px, 1.8cqw,14px);
				}
			}
			p.caption {
				font-size: 10px;
				text-align: left;
				padding-top: 1em;
				line-height: 1.3;
			}
		}
	}
}
.item013 {
	gap:20px 0;
}
.item013 .flex {
	align-items: center;
	width: 65%;
	background-color: #efeddf;
		border: #dcdbce solid 2px;
	.imgBox {
		width: 69%;
		max-width: 530px;
	}
	.figBox {
		width: 30%;
		padding: 20px;
		p {
			text-align: justify;
			padding-top: 1em;
		}
	}
	 
}
.item013 .item {
	width: 31%;
	max-width: 370px;
}

.item2 .item {
	width: 47.5%;
}
.item2, .item2 .item p {
    padding-bottom: 0;;
}
#shop .itemWrap h4::after {
	width: 81cqw;
}
#education .itemWrap h4::after {
	width: 79cqw;
}
#medical .itemWrap h4::after,
#finance .itemWrap h4::after{
	width: 83cqw;
}
#public .itemWrap h4::after {
	width: 71cqw;
}

#secInfo {
	padding: 5% 0;
	margin-top: 5%;
	background-color: #f2ede3;
	h3 {
		border-bottom: #000 solid 1px;
		padding: 0.6em 0;
		font-size: 28px;
		font-size: clamp(18px, 3.7cqw, 28px);
	}
	.tableBox {
		width: 48%;
		container-type: inline-size;
	}
	table{
		width: 100%;
		margin-top: 30px;
	}

	th,td {
		font-size: clamp(13px, 2.8cqw, 16px);
		padding: 0.5em 0;
		line-height: 1.3;
	}
	th {
		text-align: left;
	}
	td {
		text-align: right;
	}
	td:nth-child(2){
		width: 3.2em;
	}
	td:nth-child(3){
		width: 2.2em;
	}
	td:nth-child(4){
		width: 1.7em;
	}
	td:nth-child(5){
		width: 4.2em;
	}
	th.category01,th.category02 {
		font-size: clamp(14px, 3.5cqw, 20px);
		border-bottom: #777 solid 1px;
		padding: 0.3em 0;
	}
}
.itemWrap .item p .fs07 {
	font-size: 80%;
}


@media screen and (max-width: 959px){
	#sec01 .h3Box {
    h3 {
        font-size: 3.3cqw;
			letter-spacing: 0em;
    }
		p {
			font-size: 2.5cqw;
		}
	}
	#sec01 .yumeTit {
    font-size: 4.6cqw;
	}
	#sec01 .yumeBox {
		width: 100%;
		margin: 0 auto;
	.imgBox {
		width: 50%;
	}
	.txtBox {
		width: 90%;
		margin: 0 auto;

		dl dd li {
			font-size: 2.1cqw;
		}
	}
	.box02 {
		order: 0;
	}
}
	.itemWrap {
    h4 {
       font-size: clamp(15px, 3.0cqw, 26px);
    }
	}
	#shop .itemWrap h4::after {
		width: 72cqw;
	}
	#education .itemWrap h4::after {
		width: 69cqw;
	}
	#medical .itemWrap h4::after,
	#finance .itemWrap h4::after{
		width: 74cqw;
	}
	#public .itemWrap h4::after {
		width: 56cqw;
	}
	
	.itemWrap {
    padding: 20px 0 0;
	}
	.btns  ul li a {
		font-size: 11cqw;
   }
	.item012 .item {
		max-width: 500px;
		margin: 0px auto 30px;
		.leftBox {
			width: 100%;
			.minBox::after {
				display: none;
			}
		}
		.txtBox {
			width: 100%;
			ul {
				line-height: 1.4;
				li {
				font-size: 2.0cqw;
			}
			}
			
		}
	}
	.item013 {
		justify-content: center;
		gap:20px 4%;
	}
	.item013 .flex {
	align-items: center;
	width: 100%;
		max-width: 600px;
	.imgBox {
		width: 69%;
		max-width: 530px;
	}
	.figBox {
		width: 30%;
		padding: 20px;
		p {
			font-size: 1.8cqw;
		}
	}
	 
}
	.item013 .box02 {
		order: 1;
	}
	#secInfo .tableBox {
		width: 96%;
		max-width: 500px;
		margin: 0 auto;
    }


}

@media screen and (max-width: 599px){
	.itemWrap  h4 {
        .engTxt ,.jp {
					letter-spacing: 0em;
        }
    }

	#sec01 .h3Box {
		h3 {
			font-size: 5.3cqw;
		}
		p {
			font-size: 3.4cqw;
		}
		
	}
	#sec01 .yumeBox .txtBox {
		h4 {
			font-size: clamp(13px, 4.5cqw, 24px);
			line-height: 1.3;
    }
		ul.flex {
        li {
            font-size: clamp(11px, 3.2cqw, 15px);
            width: 100%;
            text-align: left;
        }
    }
	}
	#sec01 .yumeBox .txtBox dl {
		dt {
			font-size: clamp(13px, 5.2cqw, 22px);
		}
		dd li {
			font-size: 3.4cqw;
		}
	}
	#sec01 .trafBox {
		width:90%;
		max-width: 350px;
		margin: 30px auto;
	}
	#sec01 .trafBox div {
		width: 100%;
		padding-bottom: 20px;
    }
    .btns ul li a {
        font-size: 17cqw;
			font-size: clamp(10px, 17cqw, 13px);
			letter-spacing: -0.05em;
			line-height: 1.3;
				display: flex;
justify-content: center;
align-items: center;
			height: 3em;
    }
	.itemWrap h4 {
         font-size: clamp(15px, 5.4cqw, 20px);
		margin-bottom: 30px;
		margin-top: 30px;
	}
	#shop .itemWrap h4::after,
#education .itemWrap h4::after,
#medical .itemWrap h4::after,
#finance .itemWrap h4::after,
#public .itemWrap h4::after,
	#shop .itemWrap h4::after {
    width: calc(100% - 0cqw);
		top: 110%;
}
	.item3 .item {
    width: 90%;
    max-width: 350px;
		margin: 0 auto;
	}
	.item012,.item013 .flex {
		width: 90%;
    max-width: 350px;
		margin: 0 auto;
}
	.item013 .flex {
		margin-bottom: 20px;
	}
	  .item013 {
        gap: 0px 4%;
			padding-bottom: 0;
    }
	.item013 .item {
		width: 90%;
    max-width: 350px;
	}
	    .itemWrap {
        padding: 0px 0 0;
    }
	.item2 .item {
     width: 90%;
    max-width: 350px;
		margin: 0 auto;
}
	
	.item012 .item .leftBox .imgBox {
		width: 100%;
		max-width: 600px;
    }
	.itemWrap .item p {
    font-size: clamp(13px, 4.4cqw, 15px);
    padding: 0.3em 0 1em;
}
	.item012 .item .leftBox .minBox {
		width: 55%;
		position: relative;
		padding: 10px 3.5%;
margin: 0 auto;
    }
	.item012 .item .txtBox dt {
		font-size: clamp(13px, 5cqw, 18px);

    }
	    .item012 .item .txtBox ul li {
				font-size: clamp(12px, 3.5cqw, 14px);

    }
	.item013 .flex {
		.imgBox {
			width: 100%;
			max-width: 530px;
		}
		.figBox {
			width: 100%;
			img {
				width: 50%!important;
			}
			p {
				font-size: clamp(12px, 3.5cqw, 14px);
			}
		}
	}




	
	
}