@charset "UTF-8";

.loading{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10011;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	opacity: 1;
	visibility: visible;
	transition: all 1s;
}
.loading.is-active{
	opacity: 0;
	visibility: hidden;
}
.loading-animation {
	width: 100%;
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
}
.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}
.loading img {
	display: block;
	margin: 0 auto;
	width: 35vw;
	max-width: 350px;
	opacity: 1;
	transform: translateY(0);
	animation: loadingFadeUp 0.3s ease-in forwards;
	animation-delay: 1.5s; /* ← ロゴがしっかり見える時間 */
}

@keyframes loadingFadeUp {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(40);
	}
}

.fadein {
	opacity : 0;
	transform : translate(0, 0.5em);
	transition : all 0.5s;
}
 
.fadein.active{
	opacity : 1;
	transform : translate(0, 0);
}

article{
	position: relative;
	z-index: 2;
}

header{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 998;
	width: 100%;
	transition: .1s;
}
header:hover{
	background: var(--white90);
}
header #header{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	line-height: normal;
}
header h1{
	display: flex;
	align-items: stretch;
}
header h1 a{
	display: flex;
	align-items: center;
	padding: var(--size-40px);
	background:  var(--white);
}
header h1 a img{
	width: 134px;
}
header #header nav{
}
header #header nav ul{
	display: flex;
	align-items: stretch;
	height: 100%;
}
header #header nav ul li{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-left: var(--size-80px);
	height: auto;
}
header #header nav ul li a{
	font-size: var(--font-2down);
	color: var(--gray);
}
header #header nav ul li strong{
	font-size: var(--font-2up);
	font-weight: var(--font-normal);
	color: var(--black);
	display: block;
	margin-bottom: 0.3em;
	width: 100%;
}
header #header nav ul li:last-child{
	background: var(--sky);
	min-width: 150px;
	min-height: 150px;
	transition : all 0.2s;
}
header #header nav ul li:last-child:hover{
	background: var(--blue);
}
header #header nav ul li:last-child a{
	font-size: var(--font-3down);
	padding: var(--size-20px);
	color: var(--white);
}

header #header nav ul li:last-child a img{
	width: 1.7vw;
	max-width: 25px;
}
header #header nav ul li:last-child a strong{
	font-size: var(--font-2up);
	color: var(--white);
	margin-top: 0.5em;
}

.btnBox ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}
.btnBox li{
	width: calc(50% - var(--size-20px));
	margin: var(--size-20px) 0;
	border: var(--borderGray);
	border-radius: var(--r10);
	text-align: center;
}
.btnBox li:only-child{
	margin-left: 0;
	margin-right: 0;
}
.btnBox ul:has(> li:only-child) {
  justify-content: center;
}

.btnBox li a{
	display: block;
	padding: var(--size-40px) var(--size-10px);
	background: url("../img/linkOff.svg") right var(--size-40px) center no-repeat;
	transition : all 0.2s;
}
.btnBox li a:hover{
	background: url("../img/linkOn.svg") right var(--size-40px) center no-repeat;
}

.anchorBtnBox ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.anchorBtnBox li{
	width: calc(50% - var(--size-20px));
	margin: var(--size-10px) 0;
	border: var(--borderGray);
	border-radius: var(--r10);
	text-align: center;
}
.anchorBtnBox li a{
	display: block;
	padding: var(--size-20px) var(--size-10px);
	background: url("../img/anchorLinkOff.svg") right var(--size-40px) center no-repeat;
	transition : all 0.2s;
}
.anchorBtnBox li a:hover{
	background: url("../img/anchorLinkOn.svg") right var(--size-40px) center no-repeat;
}

#bannerBox{
	padding: var(--size-120px) 0;
	background: url("../img/bgLogo.svg") right var(--size--40px) center no-repeat var(--thinblue);
	background-size: 60%;
}
#bannerBox h4{
	display: inline-block;
	background: var(--blue);
	color: var(--white);
	padding: 0.3em 1.5em;
	font-size: var(--font-2down);
	font-weight: var(--font-normal);
	margin-bottom: 0.5em;
}
#bannerBox p{
	margin-bottom: var(--size-30px)
}
#bannerBox > div:last-child{
	display: flex;
}
#bannerBox > div:last-child > div{
	width: calc(100% / 3);
	padding: var(--size-10px) var(--size-20px);
}
#bannerBox > div a{
	display: block;
}

#footContact{
	position: relative;
	z-index: 2;
	background: url("../img/footerImg.jpg") center bottom no-repeat var(--white);
	background-size: 100% auto;
	padding: var(--size-200px) var(--size-40px) calc(var(--size-100px) + var(--size-220px));
}

#contactBox{
	display: flex;
	align-items: center;
	background: var(--sky);
	color: var(--white);
	padding: var(--size-40px) var(--size-100px);
	border-radius: var(--rall);
}
#contactBox a{
	color: var(--white);
}
#contactBox > div{
	width: calc(100% / 3);
	padding: 0 var(--size-20px);
}
#contactBox > div:first-child h2 strong{
	display: block;
	font-size: 211%;
	line-height: normal;
	font-weight: var(--font-normal);
}
#contactBox > div:first-child h2 span{
	display: block;
	font-size: var(--font-1down);
	line-height: normal;
	font-weight: var(--font-normal);
}
#contactBox > div:first-child p{
	font-size: var(--font-1down);
	line-height: var(--line-height2down);
	margin-top: 1em;
}
#contactBox #contactTel{
	border-right: var(--borderWhite);
}
#contactBox #contactTel,
#contactBox #contactMail{
	text-align: center;
	line-height: normal;
	padding-top: var(--size-40px);
	padding-bottom: var(--size-40px);
}
#contactBox #contactTel img,
#contactBox #contactMail img{
	display: block;
	max-width: 30px;
	margin: 0 auto;
}
#contactBox #contactTel img{
	margin-bottom: var(--size-5px);
}
#contactBox #contactMail img{
	margin-bottom: var(--size-20px);
}
#contactBox #contactTel p:first-child{
	font-size: 233%;
}
#contactBox #contactMail a{
	display: block;
	background: var(--white);
	padding: 1em;
	color: var(--sky);
	border-radius: var(--rall);
	margin: 0 var(--size-20px);
	transition : all 0.2s;
}
#contactBox #contactMail a:hover{
	background: var(--blue);
	color: var(--white);
}

footer{
	position: relative;
	z-index: 2;
	background: var(--white);
}
footer #footerBox{
	background:  var(--blue);
	padding-bottom: var(--size-240px);
}
footer ul{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
footer ul li{
	background: var(--white);
	line-height: normal;
	width: calc(100% / 3);
}
footer ul li a{
	position: relative;
	display: block;
	padding: var(--size-40px) var(--size-20px);
	text-align: center;
	transition : all 0.15s;
}
footer ul li a:hover{
	background: var(--blue);
	color: var(--white);
}
footer ul li a::after{
	content: "";
	position: absolute;
	left: -1px;
	top: -1px;
	display: block;
	width: calc(100% - 1px);
	height: calc(100% - 1px);
	border: var(--borderblue);
}
#footerBox div{
	margin-top: var(--size-40px);
}
footer p{
	font-size: var(--font-2down);
	text-align: center;
	padding: var(--size-160px) 0 var(--size-240px);
}


/*-- ========== under --*/
.under #underTop{
	padding-top: calc(150px + var(--size-80px));
	padding-bottom: var(--size-40px);
}
.under #underTop h2{
	line-height: normal;
	padding: 0 var(--baseBoxpLR);
	margin-bottom: var(--size-40px);
}
.under #underTop h2 strong{
	display: block;
	font-size: var(--font-h2);
	font-weight: var(--font-light);
}
.under #underTop h2 span{
	display: block;
	font-weight: var(--font-normal);
	margin-top: 0.5em;
}
.under #underTop ul{
	display: flex;
	align-items: center;
	background: var(--thinblue);
	padding: 0 var(--baseBoxpLR);
}
.under #underTop li{
	padding: var(--size-20px) 0.5em;
	font-size: var(--font-3down);
	line-height: normal;
	white-space: nowrap;
}
.under #underTop li:first-child img{
	max-width: 14px;
}
.under #underTop li:nth-child(5){
	overflow: hidden;
	text-overflow: ellipsis;
}

.under section{
	padding-top: var(--size-160px);
}
.under article section h3{
	display: flex;
	align-items: center;
	font-size: var(--font-h3);
	line-height: normal;
	font-weight: var(--font-normal);
	margin-bottom: var(--size-30px)
}
.under section h3 span{
	display: inline-block;
	background: var(--blue);
	color: var(--white);
	font-size: 43.75%;
	padding: 0.3em 1.5em;
	margin-top: 0.5em;
	margin-right: 0.5em;
}
.under article section h4{
	font-size: var(--font-h4);
	line-height: normal;
	margin-bottom: var(--size-20px)
}
.under .tableBox dl{
	display: flex;
}
.under .tableBox dl:nth-child(odd){
	background: var(--thinblue);
}
.under .tableBox dt,
.under .tableBox dd{
	padding: var(--size-40px);
}
.under .tableBox dt{
	width: 15em;
	font-weight: var(--font-bold);
	line-height: var(--line-height1down);
	padding-left: var(--size-60px);
}
.under .tableBox dd{
	width: calc(100% - 15em);
	line-height: var(--line-height1down);
	padding-right: var(--size-60px);
}
.under .tableBox dd ul{
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	padding-left: 1em;
}
.under .tableBox dd li{
	font-size: var(--font-1down);
	line-height: var(--line-height1down);
	text-indent: -1.4em;
	padding-left: 1em;
	margin-top: 0.3em;
}
.under .tableBox dd li::before{
	content: "※ ";
}
.under .tableBox dd ul:last-child{
	margin-bottom: 0;
}



/*-- ========== TOP --*/
#top article{
	margin-top: calc(92vh - 7.3vw);
}

#top #mv{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
	background: url("../img/top/mv.jpg") center center no-repeat;
	background-size: cover;
	width: 100%;
	height: 92vh;
}
#top #mv h1{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
#top #mvLogo{
	position: relative;
	left: 0;
	top: 0;
}

#top #TopBgWhite{
	background: url("../img/top/topBg.svg") right var(--size--40px) top var(--size-40px) no-repeat var(--white);
	background-size: 57%;
	padding-bottom: var(--size--200px);
}

#top #topInfo{
	margin-bottom: var(--size-40px);
}
#top #topInfo div a{
	display: flex;
	width: 46vw;
}
#top #topInfo div p{
	padding: var(--size-30px) var(--size-40px);
	font-size: var(--font-1down);
	line-height: normal;
}
#top #topInfo div p:first-child{
	padding-right: var(--size-10px);
}
#top #topInfo div p:nth-child(2){
	padding-left: 0;
	padding-right: var(--size-20px);
}
#top #topInfo div p:last-child{
	padding-left: 0;
	width: calc(100% - var(--size-60px) - 7.5vw);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#top #topTxt{
	position: relative;
	margin-bottom: var(--size-160px)
}
#top #topTxtBox{
	display: flex;
	align-items: center;
	width: 100%;
}
#top #topTxtBoxTxt{
	width: calc(100vw - 33.33vw);
	padding: 0 var(--size-80px);
}
#top #topTxt h2{
	font-family: "Noto Serif JP";
	font-weight: var(--font-exlight);
	font-size: 355.55%;
	line-height: var(--line-height2down);
	margin-bottom: var(--size-50px);
}
#top #topTxtImg01{
	position: relative;
	width: 44.46vw;
}
#top #topTxtImg02{
	width: calc(100vw / 3);
}

#top .topSv{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--size-20px);
}
#top .topSv div{
	width: calc(100% / 3 * 2);
}
#top .topSv h3{
	position: relative;
	top: var(--size--30px);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	line-height: normal;
	font-weight: var(--font-normal);
	width: calc(100% /3);
}
#top .topSv h3 span{
	display: inline-block;
	writing-mode: vertical-rl;
	background: var(--blue);
	color: var(--white);
	padding: 1.5em 0.3em 1.5em 0.4em;
	font-size: var(--font-2down);
	white-space: nowrap;
	margin-left: 0.5em;
}
#top .topSv h3 strong{
	display: block;
	writing-mode: vertical-rl;
	font-size: 177.77%;
	font-weight: var(--font-normal);
	white-space: nowrap;
}
#top .topSv p{
	position: relative;
	top: var(--size--60px);
	width: calc(100% / 3 * 2);
	margin-left: calc(100% / 3);
}
#top .topSv p a{
	display: block;
	background: url("../img/linkOn.svg") right var(--size-80px) center no-repeat var(--thinblue);
	padding: var(--size-60px) var(--size-180px) var(--size-60px) var(--size-80px);
	transition : all 0.2s;
}
#top .topSv p a:hover{
	background: url("../img/linkOff.svg") right var(--size-80px) center no-repeat var(--blue);
	color: var(--white);
}

#top #topBtnBox{
	margin-top: var(--size-80px);
	margin-bottom: var(--size-140px);
}


/*-- ========== About --*/
#about #aboutCon01 > div{
	display: flex;
	margin-top: var(--size-60px);
}
#about #aboutCon01 > div dl{
	width: calc(100% / 3);
	padding: var(--size-60px) var(--size-40px);
}
#about #aboutCon01 > div dl:nth-child(2){
	border-left: var(--border);
	border-right: var(--border);
}
#about #aboutCon01 > div dl dt{
	text-align: center;
	line-height: normal;
	font-weight: var(--font-bold);
	margin-bottom: var(--size-40px)
}
#about #aboutCon01 > div dl dt strong{
	font-size: var(--font-1up);
	display: block;
}
#about #aboutCon01 > div dl dt span{
	font-size: var(--font-2down);
	display: block;
	margin-top: 0.3em;
}
#about #aboutCon01 > div dl dd{
	font-size: var(--font-1down);
	line-height: var(--line-height1down);
}
#about #aboutCon02{
	display: flex;
	width: 100%;
	padding-bottom: var(--size-160px);
}
#about #aboutCon02 div:first-child{
	width: calc(100% - 39.735%);
	padding-right: var(--size-40px);
}
#about #aboutCon02 div:last-child{
	width: 39.735%;
	max-width: 480px;
}
#about #aboutCon03{
	
}


/*-- ========== Business --*/
#business .serviceBox h4{
	display: flex;
	align-items: center;
}
#business .serviceBox h4 span{
	display: block;
	width: 0.3em;
	height: 1em;
	margin-right: 0.3em;
	background: var(--black);
}
#business .serviceList{
	border: var(--borderthinblue);
	background: var(--thinblue);
	padding: var(--size-60px) var(--size-40px);
	margin-top: var(--size-40px);
}
#business .serviceList li{
	margin-top: 0.5em;
	text-indent: -0.8em;
	padding-left: 1em;
	line-height: var(--line-height1down);
}
#business .serviceList li::before{
	content: "・ ";
}
#business .serviceList li:first-child{
	margin-top: 0;
}
#business #service01{
	padding-bottom: var(--size-160px);
}
#business #service02{
	border-top: var(--borderthinblue);
	border-bottom: var(--borderthinblue);
	background: var(--thinblue);
	padding-bottom: var(--size-160px);
}
#business #grouphomeList{
	margin-top: var(--size-60px);
}
#business #grouphomeList div{
	display: flex;
	justify-content: space-between;
}
#business #grouphomeList div dl{
	width: calc(25% - var(--size-20px));
	background: var(--blue);
	color: var(--white);
	padding: var(--size-60px) var(--size-40px);
}
#business #grouphomeList div dt{
	text-align: center;
	line-height: normal;
	font-weight: var(--font-bold);
	margin-bottom: 1em;
}
#business #grouphomeList div dt span{
	display: block;
	font-size: var(--font-2down);
	margin-bottom: 0.3em;
}
#business #grouphomeList div dt strong{
	font-size:  var(--font-1up);
}
#business #grouphomeList div dd{
	font-size: var(--font-1down);
	line-height: var(--line-height1down);
}
#business #grouphomeList div dd a{
	display: block;
	text-align: center;
	font-size: var(--font-1down);
	line-height: normal;
	background: var(--white);
	color: var(--black);
	border-radius: var(--rall);
	padding: 1em;
	margin-top: 1em;
}
#business .serviceFlexBox{
	display: flex;
	width: 100%;
}
#business .serviceFlexBox > div:first-child{
	width: 31.1258%;
	max-width: 376px;
}
#business .serviceFlexBox > div:last-child{
	width: calc(100% - 31.1258%);
	padding-left: var(--size-40px);
}
#business .serviceBox .serviceList{
	background: var(--white);
}
#business .rectangle .dots-wrap {
	display: flex;
	justify-content: center;
}
#business .slick-dots{
	display: flex;
	justify-content: flex-end;
	bottom:var(--size--5px) !important;
}
#business .slick-dots li{
	background: var(--thingray);
	width: var(--size-40px) !important;
	height: var(--size-5px) !important;
	overflow: hidden;
	margin: 0;
}
#business .slick-dots .slick-active{
	background: var(--black);
}
#business .slick-dots li button:before{
	content: "" !important;
}


/*-- ========== Recruit --*/
#recruit section h4{
	background: var(--blue);
	color: var(--white);
	padding: 0.6em 1em;
}
#recruit section h3{
	margin-top: var(--size-60px);
}
#recruit section.anchorBtnBox h3{
	margin-top: 0;
}
#recruit section .btnBox{
	margin-top: var(--size-60px);
}
#recruit #bannerBox{
	margin-top: var(--size-140px);
}


/*-- ========== Information --*/
#information #infoList > a{
	display: flex;
	padding: var(--size-40px);
}
#information #infoList > a:nth-child(odd){
	background: var(--thinblue);
}
#information #infoList > a p:first-child{
	white-space: nowrap;
	line-height: var(--line-height1down);
	padding-right: var(--size-60px);
}
#information #infoList > a p:last-child{
	width: 100%;
}
#information #pagination{
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--size-80px);
}
#information #pagination a,
#information #pagination span{
	display: block;
	padding: 1em 1.6em;
	border: var(--borderthinblue);
	margin-right: 0.5em;
	margin-bottom: 0.5em;
}
#information #pagination span{
	border: var(--border);
}
#information #pagination span.dots{
	border: none;
}
#information #pagination a:hover{
	border: var(--border);
}

#information #infoSingle .date{
	margin-bottom: var(--size-40px);
}
#information #infoSingle .infoTxtBox p{
	margin-bottom: 1em;
}
#information #infoSingle .infoTxtBox p:last-child{
	margin-bottom: 0;
}
#information #infoSingle .infoTxtBox a{
	text-decoration: underline;
}
#information #infoSingle .infoTxtBox a:hover{
	text-decoration: none;
}
#information #infoSingle .infoTxtBox iframe{
	display: block;
	/*width: 100%;*/
	max-width: 560px;
	/*height: 56.25%;*/
	max-height: 315px;
	margin: var(--size-40px) auto;
}
#information #infoSingle .infoTxtBox img{
	width: auto;
}


/*-- ========== Contact --*/
#contact .formCon{
	display: flex;
	border-bottom: var(--borderGray);
	margin-bottom: var(--size-20px);
}
#contact .formCon > div:first-child{
	width: 12em;
	padding: var(--size-20px);
	padding-left: 0;
}
#contact .formCon > div:first-child p{
	padding-top: 0.5em;
}
#contact #contactCheck .formCon > div:first-child p{
	padding-top: 0;
}
#contact .formCon > div:last-child{
	width: calc(100% - 12em);
	padding: var(--size-20px) 0;
}
#contact .formCon .wpcf7-text{
	width: 100%;
	padding: 1em;
	font-size: 100%;
	border: var(--borderGray2);
	background: var(--thingray);
}
#contact .formCon .wpcf7-textarea{
	width: 100%;
	height: 8em;
	padding: 1em;
	font-size: 100%;
	border: var(--borderGray2);
	background: var(--thingray);
}
#contact .formCon .w50 input{
	width: 50%;
}
#contact .submitBtn{
	text-align: center;
}
#contact .submitBtn .wpcf7-submit{
	font-size: 100%;
	width: 100%;
	max-width: 376px;
	padding: var(--size-30px) var(--size-40px);
	background: var(--blue);
	color: var(--white);
	border-radius: var(--rall);
}
#contact .submitBtn .wpcf7-spinner{
	display: block;
}
#contact .submitBtn .wpcf7-previous{
	font-size: var(--font-1down);
	width: 100%;
	max-width: 272px;
	padding: var(--size-30px) var(--size-40px);
	background: var(--thingray);
	border: var(--borderGray2);
	border-radius: var(--rall);
	margin-right: var(--size-20px)
}


/*-- ========== Privacy --*/
#privacy section h5{
	display: flex;
	width: 100%;
	margin-top: var(--size-40px);
	margin-bottom: 0.5em;
}
#privacy section h5:first-child{
	margin-top: 0;
}
#privacy section h5 span{
	display: block;
}
#privacy section h5 span:first-child{
	width: 2.1em;
}
#privacy section h5 span:last-child{
	width: calc(100% - 2.1em);
}
#privacy #privacyTxtBox{
	padding-top: var(--size-80px);
}
#privacy #privacyTxtBox > div{
	border-bottom: var(--borderGray);
	padding-bottom: 2em;
	margin-bottom: 3em;
}
#privacy #privacyTxtBox p{
	line-height: var(--line-height1down);
	margin-bottom: 0.5em;
}
#privacy #privacyTxtBox p:last-child{
	margin-bottom: 0;
}
#privacy #privacyTxtBox ul{
	padding-left: 1.5em;
	margin-bottom: 0.5em;
}
#privacy #privacyTxtBox ul:last-child{
	margin-bottom: 0;
}
#privacy #privacyTxtBox ul li{
	margin-top: 0.3em;
	list-style: disc;
	line-height: var(--line-height2down);
}



@media screen and (max-width: 1499px) {/* 1499px */

/*-- ========== Business --*/
	#business .serviceFlexBox > div:first-child li img{
		width: 29vw;
		max-width: inherit;
		height: 29vw;
	}

}



@media screen and (max-width: 1366px) {/* iPad pro　landscape */

/*-- ========== Information --*/
	#information #infoSingle .infoTxtBox iframe{
		display: block;
		width: 100%;
		height: 56.25vw;
		margin: var(--size-40px) auto;
	}

}



@media screen and (max-width: 1194px) {/* iPad pro 11　landscape */

/*-- ========== under --*/
	#underTop li{
		padding: var(--size-40px) 0.5em;
	}
	#underTop li:first-child{
		max-width: 2.2vw;
		padding-right: 1em;
	}
	#underTop li:first-child img{
		width: 1.2vw;
		max-width: inherit;
	}



/*-- ========== TOP --*/
	#top #topTxt h2{
		font-size: 325%;
	}

	#top .topSv h3 strong{
		font-size: 165%;
	}

}



@media screen and (max-width: 1024px) {/* iPad pro　portrait */

	header h1 a img{
		width: 13.0859vw;
	}
	header #header nav ul li:last-child{
		background: var(--sky);
		min-width: 14.648vw;
		min-height: 14.648vw;
	}
	header #header nav ul li:last-child a{
		font-size: var(--font-3down);
		padding: var(--size-20px);
		color: var(--white);
	}
	header #header nav ul li:last-child a img{
		width: 1.7vw;
	}
	header #header nav ul li:last-child a strong{
		font-size: var(--font-2up);
		color: var(--white);
		margin-top: 0.5em;
	}

	#contactBox{
		flex-wrap: wrap;
		padding: var(--size-80px) var(--size-60px);
		border-radius: var(--r40);
	}
	#contactBox > div{
		width: calc(100% / 2);
	}
	#contactBox > div:first-child{
		width: 100%;
		text-align: center;
		padding-bottom: var(--size-40px);
	}


/*-- ========== under --*/
	.under #underTop{
		padding-top: calc(14.648vw + var(--size-80px));
		padding-bottom: var(--size-40px);
	}
	.under #underTop li:first-child{
		max-width: 2.5vw;
	}
	.under #underTop li:first-child img{
		width: 1.4vw;
		max-width: inherit;
	}


/*-- ========== TOP --*/
	#top #topTxtBox{
		align-items: flex-start;
	}
	#top #topTxtBoxTxt{
		padding-top: var(--size-80px);
	}
	#top #topTxt h2{
		font-size: 280%;
	}

	#top .topSv h3 strong{
		font-size: 146%;
	}


}



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

	header{
		position: relative;
		transition: 0;
	}
	header:hover{
		background: none;
	}
	header #header{
		display: block;
	}
	header h1{
		display: block;
	}
	header h1 a{
		display: block;
		background:  none;
		text-align: center;
	}
	header h1 a img{
		width: 17.4479vw;
	}
	header #header nav{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: var(--white);
	}
	header #header nav ul{
		width: 100%;
	}
	header #header nav ul li{
		font-size: var(--font-2down);
		min-width: calc(100% / 3);
		margin-left: 0;
	}
	header #header nav ul li a{
		width: 100%;
		padding: var(--size-20px) 0;
	}
	header #header nav ul li:last-child{
		min-width: calc(100% / 3);
		min-height: inherit;
	}
	header #header nav ul li:last-child a{
		padding: var(--size-20px) 0;
	}
	header #header nav ul li:last-child a img{
		width: 4.5vw;
	}

	#footContact{
		position: relative;
		z-index: 2;
		background: url("../img/footerImg.jpg") center bottom no-repeat var(--white);
		background-size: 100% auto;
		padding: var(--size-240px) 0 var(--size-240px);
	}

	#contactBox{
		padding: var(--size-120px) var(--size-60px);
		border-radius: var(--r100);
	}
	#contactBox a{
		color: var(--white);
	}
	#contactBox > div{
		width: 100%;
		padding: 0 var(--size-20px);
	}
	#contactBox > div:first-child{
		text-align: left;
	}
	#contactBox #contactTel{
		border-right: none;
		border-bottom: var(--borderWhite);
	}
	#contactBox #contactTel,
	#contactBox #contactMail{
		padding-top: var(--size-40px);
		padding-bottom: var(--size-40px);
	}
	#contactBox #contactTel img,
	#contactBox #contactMail img{
		max-width: 7vw;
	}
	#contactBox #contactMail a{
		padding: 2em 1em;
	}

	.btnBox ul{
		display: block;
	}
	.btnBox li{
		width: 100%;
		margin: var(--size-20px) 0;
	}

	.btnBox li a{
		padding: var(--size-40px) var(--size-10px);
	}

	.anchorBtnBox ul{
		display: block;
	}
	.anchorBtnBox li{
		width: 100%;
	}
	.anchorBtnBox li a{
		padding: var(--size-20px) var(--size-10px);
	}

	#bannerBox{
		padding: var(--size-160px) 0 var(--size-140px);
		background: url("../img/bgLogo.svg") right -10vw center no-repeat var(--thinblue);
		background-size: 100%;
	}
	#bannerBox > div:last-child{
		display: block;
	}
	#bannerBox > div:last-child > div{
		width: 100%;
		padding: var(--size-20px) 8vw;
	}
	#bannerBox > div a{
		display: block;
	}

	footer #footerBox{
		padding-bottom: var(--size-240px);
	}
	footer ul li{
		width: calc(100% / 2);
	}
	footer ul li a{
		font-size: var(--font-1down);
		padding: var(--size-40px) var(--size-10px);
	}
	footer p{
		padding-bottom: var(--size-240px);
	}


/*-- ========== under --*/
	.under #underTop{
		padding-top: var(--size-40px);
	}
	.under #underTop h2 {
		margin-bottom: var(--size-60px);
	}
	.under #underTop h2 strong{
		font-size: 8vw;
	}
	.under #underTop li:first-child{
		max-width: 5.2vw;
	}
	.under #underTop li:first-child img{
		width: 2.7vw;
		max-width: inherit;
	}

	.under article section h3{
		display: block;
	}
	.under section h3 span{
		display: block;
		width: 10em;
		text-align: center;
		padding: 0.3em 1.5em;
		margin-top: 0;
		margin-right: 0;
		margin-bottom: 0.5em;
	}

	.under .tableBox dl:nth-child(odd) {
		background: var(--white);
	}
	.under .tableBox dl{
		display: block;
	}
	.under .tableBox dt{
		width: 100%;
		padding: var(--size-20px);
		background: var(--blue);
		color: var(--white);
	}
	.under .tableBox dd{
		width: 100%;
		padding: var(--size-20px);
		padding-bottom: var(--size-40px);
	}


/*-- ========== TOP --*/
	#top article{
		margin-top: calc(76vh - 28.5vw);
	}

	#top #mv{
		height: 76vh;
	}

	#top #TopBgWhite{
		background: url("../img/top/topBg.svg") right -10vw top 80vw no-repeat var(--white);
		background-size: 110%;
		padding-bottom: var(--size--200px);
	}

	#top #topInfo div a{
		width: 100%;
	}

	#top #topTxt{
		position: relative;
		margin-bottom: var(--size-160px);
	}
	#top #topTxtBox{
		display: block;
	}
	#top #topTxtBoxTxt{
		width: 100%;
		padding: var(--size-80px) var(--baseBoxpLR);
	}
	#top #topTxt h2{
		font-size: 370%;
		margin-bottom: var(--size-60px);
	}
	#top #topTxtImg01{
		position: relative;
		width: 89vw;
	}
	#top #topTxtImg02{
		width: 100%;
		padding-left: 34vw;
	}

	#top .topSv{
		position: relative;
		display: block;
		margin-top: 0;
	}
	#top .topSv div{
		width: 100%;
	}
	#top .topSv h3{
		position: absolute;
		top: var(--size--80px);
		width: calc(100% /3);
	}
	#top .topSv h3 span{
		margin-top: 0.5em;
	}
	#top .topSv h3 strong{
		background: var(--white);
		padding: 0.3em;
	}
	#top .topSv p{
		top: -6vw;
		width: 92%;
		margin-left: 8%;
	}
	#top .topSv p a{
		display: block;
		background: url("../img/linkOn.svg") right var(--size-40px) center no-repeat var(--thinblue);
		background-size: 8vw;
		padding: var(--size-40px) var(--size-120px) var(--size-40px) var(--size-60px);
		margin-bottom: var(--size-80px);
	}
	#top .topSv p a:hover{
		background: url("../img/linkOff.svg") right var(--size-40px) center no-repeat var(--blue);
		background-size: 8vw;
	}

	#top #topBtnBox{
		margin-top: var(--size-80px);
		margin-bottom: var(--size-240px);
	}


/*-- ========== About --*/
	#about #aboutCon01 > div{
		display: block;
		margin-top: var(--size-40px);
	}
	#about #aboutCon01 > div dl{
		width: 100%;
		padding: var(--size-40px) var(--size-20px);
	}
	#about #aboutCon01 > div dl:nth-child(2){
		border-top: var(--border);
		border-bottom: var(--border);
		border-left: 0;
		border-right: 0;
	}
	#about #aboutCon01 > div dl dt{
		margin-bottom: var(--size-20px);
	}
	#about #aboutCon02{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-bottom: var(--size-140px);
	}
	#about #aboutCon02 div:first-child{
		width: 100%;
		padding-right: 0;
		margin-bottom: var(--size-80px);
	}
	#about #aboutCon02 div:last-child{
		width: 80%;
		max-width: inherit;
		margin: 0 auto;
	}


/*-- ========== Business --*/
	#business .serviceList{
		padding: var(--size-60px) var(--size-40px);
		margin-top: var(--size-60px);
	}
	#business #service01{
		padding-bottom: var(--size-160px);
	}
	#business #service02{
		padding-bottom: var(--size-160px);
	}
	#business #grouphomeList{
		margin-top: var(--size-60px);
	}
	#business #grouphomeList div{
		flex-wrap: wrap;
	}
	#business #grouphomeList div dl{
		width: calc(50% - var(--size-20px));
		padding: var(--size-60px) var(--size-40px);
		margin-bottom: var(--size-40px)
	}
	#business .serviceFlexBox{
		flex-wrap: wrap;
	}
	#business .serviceFlexBox > div:first-child{
		width: 100%;
		max-width: inherit;
	}
	#business .serviceFlexBox > div:first-child li img{
		width: 70vw;
		height: 70vw;
	}
	#business .serviceFlexBox > div:first-child ul li{
		margin: 0 var(--size-10px);
	}
	#business .serviceFlexBox > div:last-child{
		width: 100%;
		padding-left: 0;
		margin-top: var(--size-60px);
	}
	#business .slick-dots{
		display: flex;
		justify-content: flex-end;
		bottom:var(--size--10px) !important;
	}
	#business .slick-dots li{
		width: 15vw !important;
		height: var(--size-10px) !important;
		margin: 0 !important;
	}


/*-- ========== Information --*/
	#information #infoList > a{
		display: block;
		padding: var(--size-40px);
	}
	#information #infoList > a p:first-child{
		padding-right: 0;
		padding-bottom: 0.5em;
	}
	#information #pagination{
		margin-top: var(--size-120px);
	}
	#information #pagination a,
	#information #pagination span{
		font-size: var(--font-1down);
		width: calc(calc(100% / 7) - 0.5em);
		padding: 1em 1.6em;
	}
	#information #pagination a:nth-child(8),
	#information #pagination span:nth-child(8){
		margin-right: 0;
	}
	#information #pagination .prev,
	#information #pagination .next{
		width: 100%;
		text-align: center;
		margin-right: 0;
	}


/*-- ========== Contact --*/
	#contact .formCon{
		display: block;
	}
	#contact .formCon > div:first-child{
		width: 100%;
		padding: 0;
	}
	#contact .formCon > div:first-child p{
		padding-top: 0;
		font-weight: var(--font-bold);
	}
	#contact .formCon > div:last-child{
		width: 100%;
		padding: var(--size-20px) 0;
	}
	#contact #contactCheck .formCon{
		margin-bottom: var(--size-40px)
	}
	#contact #contactCheck .formCon > div:last-child{
		width: 100%;
		padding: var(--size-10px) 0 var(--size-20px);
	}
	#contact .formCon .wpcf7-textarea{
		height: 16em;
	}
	#contact .formCon .w50 input{
		width: 80%;
	}
	#contact .submitBtn .wpcf7-submit{
		width: 50vw;
		max-width: inherit;
	}
	#contact .submitBtn .wpcf7-previous{
		width: 20vw;
		max-width: inherit;
	}

}



@media screen and (max-width: 759px) {/* SP */

	header #header nav ul li a{
		width: 100%;
		padding: var(--size-30px) 0;
	}
	header #header nav ul li:last-child a{
		padding: var(--size-30px) 0;
	}

	#footContact{
		padding: var(--size-160px) 0 var(--size-200px);
	}
	footer #footerBox{
		padding-bottom: var(--size-240px);
	}
	footer ul li a{
		padding: var(--size-40px) var(--size-10px);
	}
	footer p{
		padding-bottom:calc(var(--size-60px) + var(--size-240px));
	}


/*-- ========== TOP --*/
	#top #topTxt h2 {
		font-size: 285%;
	}


/*-- ========== Business --*/
	#business #grouphomeList div dl{
		width: 100%;
		padding: var(--size-60px) var(--size-40px);
		margin-bottom: var(--size-40px)
	}


/*-- ========== Contact --*/
	/*#contact .formCon .wpcf7-text {
		font-size: 130%;
	}*/


}