@charset "utf-8";
/* CSS Document */
:root{
	--colorBlack: #0D0D0D;
	--colorWhite: #ffffff;
	--colorBgGray:	#FAF6F5;
	--colorOrange: 	#F66718;
	--colorOrangeShadow: #FF9400;
	--gradOrangeTate: linear-gradient(0deg,#FF9400,#E95B0D) ;
	--gradOrangeTate2: linear-gradient(0deg,#E95B0D,#FF9400) ;
	--gradOrangeYoko: linear-gradient(90deg,#FF9400,#E95B0D) ;
}


body{
	color:#212121;
    font-size: 62.5% ;   /* 1.0em = 10px  */
	font-family:"Noto Sans JP", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/* background:url(../img/bg.gif); */
}
a{
	color:#212121;
	text-decoration:none;
}
a:hover{
	color:#95684d;
}
a[href="#"]:hover{
	color:#212121;
}
a.overwhite{
    display:block;
}

body#subpage #primary a[href$=".pdf"]{
	padding-left:30px;
	background:url(../img/imgPDF24x24.png) no-repeat 0 0;
	text-decoration:underline;
	padding-top:3px;
}

a.overwhite:hover,
a.overwhite:hover img,
a.overwhite:hover li{
    cursor:pointer;
	filter: alpha(opacity=60);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6;              /* Safari 1.x */
	opacity:0.6;
	zoom:1;

	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
/*
a[href="#"],
a[href="#"].overwhite:hover{cursor: default;}

a[href="#"].overwhite:hover,
a[href="#"].overwhite:hover img,
a[href="#"].overwhite:hover li{
	filter: alpha(opacity=100); 
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;
}*/

.aligncenter{	text-align:center;}
.alignleft{		text-align:left;}
.alignright{	text-align:right;}
img.aligncenter{ display:block;margin:5px auto;}
img.alignleft{	float:left;}
img.alignright{	float:right;}

.bold{ font-weight:bold;}

.float_left{	float:left;}
.float_right{	float:right;}

.clearfloat{	clear:both;}

.xxlarge{	font-size:1.8em;}
.xlarge{	font-size:1.5em;}
.large{		font-size:1.3em;}
.small{		font-size:0.75em;}
.xsmall{	font-size:0.6em;}
.xxsmall{	font-size:0.5em;}

.radius5{
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	behavior: url(./js/PIE.htc);
}

.shadow{
	-webkit-box-shadow: #ccc 0px 0px 3px;
	-moz-box-shadow: #ccc 0px 0px 3px;
	box-shadow: #ccc 0px 0px 3px;
	behavior: url(./js/PIE.htc);
}
.noshadow{
	-webkit-box-shadow:none !important;
	-moz-box-shadow:none !important;
	box-shadow:none !important;
}

br.spview{
    display: none;
}


/********************************************************/
.boxHalf{
	width: 50%;
}

.boxTwo{	width: 48.5%;}

.boxThree > li{
	float: left;
	width:32%;
	margin-right: 2%;
}
.boxThree > li:nth-child(3n){
	margin-right: 0;
}

.contentsbox{
	overflow:hidden;
	width:100%;
	max-width:1210px;
	margin:0 auto;
    position: relative;
}
.contentsbox-wide{
	overflow:hidden;
	width:100%;
	max-width:1920px;
	margin:0 auto;
}
.colorRed {
    color: #f13131;
}

a.btnLinks {
    display: inline-block;
    padding: 1em 2em;
    background: #a2b8ff;
    min-width: 8em;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4em;
	border-bottom: 2px solid #999;
    color:#000;

	-moz-border-radius:8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;

	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
a.btnLinks:hover {
	background: #eee;
	border-bottom-color:#ddd;
}

a.btnLinks.btnBlue{
    padding: 1em;
    text-align: center;
    background: #0707bb;
    margin: 0 auto 2em;
    border-radius: 0;
    border-bottom: none;
    color: #fff;
}
a.btnLinks.btnBlue:hover {
	background: #4da5ff;
}

/*-------------------------*/

header{
	position: relative;
	z-index: 20;
}

header > .contentsbox{
	position: relative;
	overflow: visible;
	display: flex;
    justify-content: space-between;
}

#logo{	
	display: block;
    width: fit-content;
	position: relative;
}
img#imgLogo {
	width: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-left: 20px;
	/*
	body:not(.home) &{
		width: 141px;
		margin-bottom: 0;
	}
	*/
}

#btnHeaderContact {
    position: fixed;
    top: 0;
    right: 0;
    writing-mode: tb;
    padding: 1.5em 1em;
    display: block;
    background: linear-gradient(0deg,#E95B0D,#FF9400,yellow);
	background-size: 100% 200%;
	background-position: 0 100%;
    color: #fff;
    letter-spacing: 2px;
    font-size: 1.4em;
	transition: all 0.2s;

	&:hover{
		background-size: 100% 200%;
		background-position-y: 0%;
		
	}
}

#spContactButtons{
	position: fixed;
    width: 100vw;
    bottom: 0;
    left: 0;

	& ul{
		display: flex;
		& li{
			width: 50%;

			& a{
				display: block;
				text-align: center;
				padding: 1em 0;
				font-size: 3.5vw;
				z-index: 10;
				color: #fff;
				opacity: 0.7;
			}
			&:nth-child(1) a{
				background: var(--colorOrange);
			}
			&:nth-child(2) a{
				background: var(--colorOrangeShadow);
			}
		}
	}
}

.main-navigation{
	margin-bottom: 30px;
    margin-top: 30px;
	
	ul{
		display: flex;
		gap: 2em;
        font-size: 1.6em;
        font-weight: 600;
	}

	a{
		transition: all 0.3s;
		&:hover{
			color: var(--colorOrangeShadow);
		}
	}
}

footer{
	padding-top: 50px;
	padding-bottom: 50px;
	position: relative;
    z-index: 10;
}

.footer-navigation{
	margin-bottom: 40px;
	
	ul{
		display: flex;
		gap: 2em;
        font-size: 1.6em;
        font-weight: 600;
		justify-content: center;
	}

	
	a{
		transition: all 0.3s;
		&:hover{
			color: var(--colorOrangeShadow);
		}
	}
}

.footer-info {
    text-align: center;
    border-bottom: 1px solid #000;
    margin-bottom: 2em;
    padding-bottom: 2em;
    font-size: 1.4em;
    line-height: 2;
}
.copyright {
    text-align: center;
	font-size: 1.2em;
}


/*-------------------------*/

.bgFirefly {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.firefly {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	filter: blur(20px);
	animation: float 15s infinite linear;
}

.firefly:nth-child(1) {
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgb(255 229 250 / 80%) 0%, rgb(255 186 240 / 40%) 50%, transparent 100%);
	left: 2%;
	animation-delay: 0s;
	animation-duration: 20s;
}

.firefly:nth-child(2) {
	width: 120px;
	height: 120px;
	background: radial-gradient(circle, rgba(255, 235, 205, 0.6) 0%, rgba(255, 235, 205, 0.3) 50%, transparent 100%);
	left: 20%;
	animation-delay: 3s;
	animation-duration: 18s;
}

.firefly:nth-child(3) {
	width: 80px;
	height: 80px;
	background: radial-gradient(circle, rgba(255, 218, 165, 0.9) 0%, rgba(255, 218, 165, 0.5) 50%, transparent 100%);
	left: 30%;
	animation-delay: 6s;
	animation-duration: 22s;
}

.firefly:nth-child(4) {
	width: 110px;
	height: 110px;
	background: radial-gradient(circle, rgb(196 255 215 / 70%) 0%, rgb(196 255 236 / 40%) 50%, transparent 100%);
	left: 40%;
	animation-delay: 9s;
	animation-duration: 16s;
}

.firefly:nth-child(5) {
	width: 140px;
	height: 140px;
	background: radial-gradient(circle, rgba(255, 240, 220, 0.5) 0%, rgba(255, 240, 220, 0.3) 50%, transparent 100%);
	left: 60%;
	animation-delay: 12s;
	animation-duration: 24s;
}

.firefly:nth-child(6) {
	width: 90px;
	height: 90px;
	background: radial-gradient(circle, rgba(255, 225, 180, 0.8) 0%, rgba(255, 225, 180, 0.4) 50%, transparent 100%);
	left: 70%;
	animation-delay: 15s;
	animation-duration: 19s;
}

.firefly:nth-child(7) {
	width: 175px;
	height: 175px;
	background: radial-gradient(circle, rgb(244 255 190 / 60%) 0%, rgb(232 255 190 / 30%) 50%, transparent 100%);
	left: 80%;
	animation-delay: 2s;
	animation-duration: 21s;
}

.firefly:nth-child(8) {
	width: 95px;
	height: 95px;
	background: radial-gradient(circle, rgba(255, 220, 170, 0.7) 0%, rgba(255, 220, 170, 0.4) 50%, transparent 100%);
	left: 90%;
	animation-delay: 8s;
	animation-duration: 17s;
}

@keyframes float {
	0% {
		transform: translateY(100vh) translateX(0) scale(0);
		opacity: 0;
	}
	10% {
		opacity: 1;
		transform: translateY(90vh) translateX(10px) scale(1);
	}
	25% {
		transform: translateY(70vh) translateX(-20px) scale(1.1);
	}
	50% {
		transform: translateY(50vh) translateX(30px) scale(0.9);
	}
	75% {
		transform: translateY(30vh) translateX(-10px) scale(1.2);
	}
	90% {
		opacity: 1;
		transform: translateY(10vh) translateX(20px) scale(0.8);
	}
	100% {
		transform: translateY(-10vh) translateX(0) scale(0);
		opacity: 0;
	}
}
/*-------------------------*/

#toppage #container{
	z-index: 10;
	position: relative;
}

#mainimage{
    overflow-x: hidden;
	z-index: 2;
    position: relative;
	width: 100%;

	& .contentsbox{
		overflow:visible;
		position: relative;
		display: flex;
		justify-content: center;
	}

}

div.mv-catchcopy{
	
	width: 50%;
	max-width: 530px;
	position: relative;
	color: #231815;
	font-size: 46px;
	font-weight: 600;

	& ul{
		margin: 25px 0;
		& li{
			margin: 20px 0;
			background: url(../img/icoStandard.png) no-repeat left 5px;
			padding-left: 30px;
            background-size: auto 0.9em;
			& span{
				font-size: 0.7em;
			}
		}
	}

	p{
		font-size: 24px;
		font-weight: normal;
		line-height: 1.5;
	}
}

#txtMV-price-quality{
	display: block;
	background: var(--gradOrangeTate);
	color: #fff;
	font-weight: 600;
    padding: 12px 0 15px;
    text-align: center;
    line-height: 1;
	font-size: 46px;
	margin-top: 45px;
}

#imgMV-ribbon{
	position: absolute;
	bottom: 0;
	right: 50%;
    transform: translateX(calc(50% + 290px));
    z-index: 10;
}

#mv-images{
	position: relative;
    overflow: hidden;
	width: 50%;
	max-width: 580px;
    margin-left: 5%;
	padding-bottom: 20px;

	img.mv-slide-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100% - 20px);
		object-fit: cover;
		opacity: 0;
		transition: opacity 1s ease-in-out;
		
		&.active {
			opacity: 1;
		}
	}

}


section.top-concept{
	padding: 100px;
	position: relative;
	mix-blend-mode: multiply;
	background: url(../img/bgTop-concept.jpg) no-repeat left center #fff;


	&::before{
/*		content: "";*/
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../img/bgTop-concept.jpg) no-repeat left center;
		width: 100%;
		height: 70vh;
		mix-blend-mode: multiply;
	}

	.contentsbox{
		writing-mode: vertical-rl;
		text-orientation: upright;
		line-height: 2.2;
		letter-spacing: 0.02em;
		font-size: 18px;
		color: #333;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		text-align: justify;
		flex-direction: column;
		align-items: start;
	}

	.section-header{
		margin-right: 100px;
		h2{
			display:flex;
			flex-direction: column-reverse;
			align-items: start;
			letter-spacing: 0.1em;
            font-weight: 600;
            font-size: 60px;
            line-height: 1;
            margin-left: 1em;

		
			& span{
				color: var(--colorOrange);
				letter-spacing: 0;
				font-family: "Cardo";
				font-size: 26px;
				text-orientation: initial;
				line-height: 1.7;
			}
		}

	}

	.concept-message{
		letter-spacing: 3px;
        font-size: 30px;
        line-height: 2.2;
        max-height: 22em;

		p{
			margin-left: 1em;
		}
	}
}


.section-header {
	text-align: center;
	margin-bottom: 80px;
}

.section-title {
	font-size: 60px;	
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.section-title span {
	display: block;
	color: var(--colorOrange);
	font-size: 26px;
	font-family: "Roboto";
	letter-spacing: 0.02em;
	font-weight: 400;
	margin-top: 0.8em;
}

.tagline{
	font-weight: 500;
	font-size: 40px;
	margin-top: 80px;
	line-height: 1.3;

	＆br{
		display: none;
	}
}

.project-card {
	overflow: hidden;
	margin-bottom: 60px;
	display: flex;
	align-items: center;
	min-height: 320px;
}

.project-card:nth-child(even) {
	flex-direction: row-reverse;
}

.project-image {
	flex: 1;
	height: 480px;
	position: relative;
	overflow: hidden;

	box-shadow: -20px 20px 0 orange;
    margin-bottom: 20px;
}
.project-card:nth-child(odd) .project-image {
	box-shadow: 20px 20px 0 orange;
}

.project-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-content {
	flex: 1;
	padding: 60px;
	position: relative;
	display: flex;
	justify-content: center;
}

.project-label {
	color: var(--colorOrange);
	font-size: 28px;
	margin-bottom: 15px;

	background: var(--gradOrangeTate);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.project-title {
	font-size: 50px;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.8;
    display: inline-block;
    border-bottom: 1px solid var(--colorOrange);
	letter-spacing: 0.02em;
}

.project-description {
	font-size: 26px;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* CTA Button */
.cta-button {
	text-align: center;
	margin: 60px 0;
}

.btn-primary {
	display: inline-block;
	background-color: #000;
	color: white;
	padding: 18px 60px;
	text-decoration: none;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	background-image: url(../img/arrowRightW.png);
	background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: calc(100% - 60px) 47%;
}
.btn-primary:after {
    content: "";
    display: inline-block;
    margin-right: 2em;
}

a.btn-primary:hover {
	color: #fff;
	background-color: var(--colorOrange);
	transform: translateY(-2px);
}

.news-section {
	margin: 100px 0;
	background-color: var(--colorBgGray);
	padding: 100px 0 50px;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	margin-bottom: 40px;
}

.news-card {
	overflow: hidden;
	transition: transform 0.3s ease;
}

.news-image {
	height: 200px;
	background-color: #ddd;
	position: relative;
}

.news-content {
	padding: 10px 0 0;
}

.news-date {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
}

.news-tags {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.tag {
	display: inline-block;
	padding: 4px;
	font-size: 12px;
	color: var(--colorWhite);
	background-color: var(--colorOrange);
}


.news-title {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}





/* Flow Section */
.flow-section {
	margin: 100px auto;
}

.flow-list {
	display: flex;
	gap: 80px 40px;
	flex-wrap: wrap;
}

.flow-item {
    border-bottom: none;
    position: relative;
	width: 190px;
	height: 190px;
    z-index: 0;
	display: flex;
    flex-direction: column;
    justify-content: center;

	&:nth-child(6){
		margin-left: 60px;
	}

    &::before,&::after{
        content: "";
        display: block;
        width: 190px;
        height: 190px;
        position: absolute;
        z-index: -1;
        border-radius: 100px;
        left: -1px;
    }
	&::before{
        border: 1px solid #000;
    }
    &:nth-child(1):before{ border-color: #FBE2EF; }
    &:nth-child(2):before{ border-color: #D1ECF3; }
    &:nth-child(3):before{ border-color: #E1EEDA; }
    &:nth-child(4):before{ border-color: #FBDDC5; }
    &:nth-child(5):before{ border-color: #F2D8E1; }
    &:nth-child(6):before{ border-color: #F1E7DE; }
    &:nth-child(7):before{ border-color: #F8F2C0; }
    &:nth-child(8):before{ border-color: #E9F0C7; }
    &:nth-child(9):before{ border-color: #DFE6EE; }
    &:nth-child(10):before{ border-color: #D1ECF3; }

    &::after{
        background: #fffdf1;
        top:calc(50% - 95px - 3px);
        z-index: -2;
    }

	& .arrow-dotline{
		position: absolute;
		right: -37px;
		width: 34px;
		display: block;
		border-top: 9px dotted #000;
	}
	& .arrow-dotline-naname{
		position: absolute;
		background: url(../img/dotline-naname.png) no-repeat;
		background-size: contain;
		width: 810px;
		height: 93px;
		right: 85px;
        bottom: -88px;
	}
}


.flow-number {
	font-size: 38px;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-optical-sizing: auto;
	color: var(--colorOrange);
	flex-shrink: 0;
	text-align: center;

	background: var(--gradOrangeTate);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.flow-number span {
	font-size: 16px;
	letter-spacing:0.08em;
	display: block;
}

.flow-content {

}

.flow-text {
	flex: 1;
}

.flow-title {
	text-align: center;
	font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
	letter-spacing: 0.02em;
	margin-bottom: 0.7em;
	line-height: 1.3;
}



.flow-description {
	font-size: 16px;
	line-height: 2;
}

.flow-image {
	width: 430px;
	height: 300px;
	background-color: #ddd;
	flex-shrink: 0;
	margin-left: 100px;
}

#footContact{
	color: #fff;
	text-align: center;
	background: url(../img/bg-contact.jpg) no-repeat center;
	background-size: cover;
	padding: 90px 0 70px;
	position: relative;
	z-index: 2;

	& .contentsbox{
		position: relative;
		z-index: 1;
	}
	&::after{
		content:"";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: #0008;
		z-index: 0;
	}
	
	.section-header{
		margin-bottom: 50px;

		& + p{
			font-size: 1.8em;
			margin-bottom: 2em;
		}
	}


	.section-title {
		font-family: "Noto Serif JP", serif;
		span{
			color: #fff;
			font-family: "Cardo";
			font-weight: 600;
		}
	}

	.btn-footContact{
		display: inline-block;
		background: linear-gradient(90deg,#E95B0D,#FF9400,yellow);
		background-size: 200% 100%;
		background-position-x: 0;
		font-weight: bold;
		font-size: 28px;
		padding: 1em 60px;
		color: #fff;
		width: 13.5em;
        margin: 0 auto;
		transition: all 0.3s;

		&:hover{
			background-position-x: 100%;
		}

		&::before, &::after{
			content: "";
			display: inline-block;
			height: 1em;
			background-repeat: no-repeat;
			vertical-align: middle;
		}

		&::before{
			background-image: url(../img/icoMail.svg);
			width: 1.3em;
			margin-right: 0.3em;
		}

		&::after{
			width: 1em;
			background-image: url(../img/arrowRightW.png);
			background-position-y: 35%;
			margin-left: 0.3em;
		}
	}

	a.footContact-tel[href*="tel"] {
		display: table;
		color: #fff;
        margin: 35px auto 20px;
		line-height: 40px;
		font-size: 50px;
		font-family: "Roboto Condensed";
		font-weight: bold;
		padding-left: 1em;
		background: url(../img/icoPhone.svg) no-repeat 0 0;
		background-size: contain;
		
	}

	.foot-contactInfo{
		display: flex;
		gap: 1.5em;
		font-size: 17px;
        justify-content: center;
        line-height: 1.3;
	}
}

.instagram{
	padding: 90px 0 60px;
	background-color: var(--colorBgGray);

	.section-title{
		letter-spacing: 2px;
		padding-left: 0.9em;
		background: url(../img/icoInstagram.svg) no-repeat 0 bottom;
		background-size: 0.7em;
		display: table;
		margin: 0 auto;
	}

	.btn-primary::before{
		content: "";
		display: inline-block;
		width: 1.2em;
        height: 1.2em;
        background-size: 1.2em;
        background-image: url(../img/icoInstagramW.svg);
        background-repeat: no-repeat;
        background-position: 0 bottom;
        vertical-align: sub;
        margin-right: 0.5em;
	}
}

.feed-instagram{
	width: 100%;
	max-width: 1000px;
	margin: 30px auto;
}

/* plugin - Instagram Feed Lite */
.sb_instagram_header {
    display: none;
}
#sbi_load {
    display: none;
}


#btnGototop{
	position: fixed;
	bottom: 10px;
	right: 20px;
	background: url(../img/btnGototop.png) no-repeat;
	width: 80px;
	height: 95px;
	text-indent: 100%;
	overflow: hidden;
	z-index: 30;

	&.stay{
		position: absolute;
	}

	&:hover {
    	animation: swing 0.6s ease-in-out infinite alternate;
	}

}
@keyframes swing {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-8px);
	}
}
/*-------------------------*/

.post-type-archive #container,
.tax-cate #container{
	padding: 100px 0 100px;

	h2{
		text-align: center;
		& + p{
			text-align: center;
			margin-bottom: 1em;
		}
	}
}

.archive-datalist{
	&.contentsbox{
		overflow: visible;
	}

	& > ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap:3.5em 1.5%;

		& > li{
			width: 23.85%;

			&:nth-child(3n){
				margin-right: 0;
			}

			& p{
				padding: 0.5em 0 0;

				& > span.date{
					display:block;
					margin-bottom: 0.5em;
				}
			}

			& .thumb{
				display: block;
				width: 100%;
				aspect-ratio: 1 / 1;
				overflow: hidden;
				cursor: pointer;

				img{
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					transition: all 0.3s ease;
				}
			}
		}
	}
	a:hover .thumb img {
		transform: scale(1.1);
		filter: brightness(1.2);
	}

	& .btnGotoPage{
		margin-top: 0;
		margin-right: 1.5em;
		margin-bottom: 1.5em;
		&.x-small{
			float: right;
		}
	}
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    list-style: none;
    padding: 0;
}

#sidebar .post-grid {
	grid-template-columns: none;

}

.post-grid li {
    overflow: hidden;
    transition: transform 0.3s ease;
}

.post-grid li a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.post-grid .thumb {
    height: 200px;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.post-grid .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.post-grid p:first-of-type {
    padding: 10px 0 0;
}

.post-grid .date {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.post-grid .dataCategoryLists {
    display: flex;
    gap: 8px;
	margin: 0;
    list-style: none;
    padding: 0;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
}

.post-grid .category {
    display: inline-block;
    padding: 4px;
    font-size: 12px;
    color: var(--colorWhite);
    background-color: var(--colorOrange);
}

.post-grid .post-title {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* ホバーエフェクト */
.post-grid a:hover .thumb img {
    transform: scale(1.1);
}



#dataCategory{
	display: flex;
	justify-content: center;
	margin-bottom: 2em;
    font-size: 20px;
	flex-wrap: wrap;

	& > li{
		padding: 0 2.5em;
		border-right: 1px solid #000;
		line-height: 1.5;

		.archive.information &,
		.tax-info-category & {
			padding: 1em 2.5em;
			background-color: var(--colorOrange);
		}

		&:last-child{
			border: none;
		}

		&.current > a,
		& > a:hover{
			text-decoration: underline;
			text-decoration-thickness: 3px;
			text-underline-offset: 10px;
				color: var(--colorOrange);
		}

		& > a{
			display: block;
			text-align: center;
		}
	}
}


/**************************************/


.single #container h2{
	display: flex;
	flex-direction: column-reverse;
	font-size: 48px;
	font-weight: 600;
    line-height: 1.3;
	padding-bottom: 0.5em;
	margin-top: 1em;
	margin-bottom: 0.5em;

	border-bottom: 2px solid;
	border-image-source: var(--gradOrangeYoko);
	border-image-slice: 1;

	& span.date{
		font-size: 0.5em;
		font-weight: 400;		
		margin-top: 0.5em;
	}

	&:has(span){
		border: none;
		padding-bottom: 0;
		border-image: none;
	}
}

.single #entryBody{
	padding-bottom: 80px;
	clear: both;
	line-height: 2;
	font-size: 16px;

	& .thumb{
		margin-bottom: 2em;
		clear: both;
		& img{
			max-width: 100%;
			height: auto;
			margin: 0 auto;
			display: block;
            object-fit: cover;
            aspect-ratio: 3 / 2;
		}
	} 

	& strong{
		font-weight: 600;
	}

	& > p{
		margin-bottom: 1em;
	}
	& > ol{
		& li{
			list-style: decimal;
		}
	}
	& > ul{
		padding-left: 2em;
		margin-bottom: 1em;
		& li{
			list-style: disc;
		}
	}
	
	h3,h4{
        font-weight: bold;
		margin-top: 1em;
	}
}

#single-categories {
	padding: 0.5em 1em;
	border: 3px solid var(--colorPaleOrange);
	border-radius: 2em;
	width: max-content;
	float: right;
	margin-bottom: 2em;
	
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: right;
		gap: 1em;

		&::before{
			content: "Category";
			font-family: "Roboto", sans-serif;
			align-self: center;
			color: var(--colorOrange);
		}

		& > li{
			display: block;
			& a{
				padding: 0.3em 0.5em 0.4em;
                background-color: var(--colorOrange);
                color: #fff;
				&:hover{
					background-color: #FFB300;
					color: #fff;
					text-decoration: none;
				}
			}
		}
	}
}


.single #container{
	margin: 100px 0;
}
.single #container > .contentsbox.hasSidebar{

	display: flex;
	gap: 100px;

	& #entryBody{
		max-width: 900px;
	}
	& #sidebar{
		width: 20%;
	}
}

#sidebar{
	& h3{
		text-align: center;
		font-weight: 600;
		margin-bottom: 0.5em;
		font-size: 20px;
	}
}

ul#sideCategory{
	& li{
		font-size: 14px;
		margin-bottom: 0.5em;
		& a{
			display: block;
			padding: 0.5em 0 0.5em 20px;
			background: url(../img/icoTriangle.svg) no-repeat left 8px;
		}
	}

}

.side-blog-entries{
	margin-top: 80px;
}


.single .btn-primary{
	margin: 0 auto;
	display: table;
}


.pagination {
    margin: 40px auto;
    text-align: center;
    font-size: 24px;
    font-family: "Roboto", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;

    & a,
    & span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1em;
        height:1em;
        padding: 0 10px;
        text-align: center;
        text-decoration: none;
        color: var(--colorBrown);
        transition: all 0.3s ease;
    }

    & .current-total {
        font-weight: 500;
    }

    & .disabled {
        opacity: 0.3;
        cursor: not-allowed;
        color: var(--colorBrown);
    }

    & a:hover {
        background-color: var(--colorOrange);
    }

    & .first,  & .last,
	& .prev, & .next,
    & .jump-prev, & .jump-next {
        padding: 0;
        background: var(--colorOrange) no-repeat 50% 40%;
        background-size: 60% auto;
        display: block;
        width: 40px;
        height: 20px;
        border-radius: 0;
        text-indent: 100%;
        overflow: hidden;
    }

	& .prev,
    & .next{
		background-image: url(../img/arrowRightW.png);
	}
    & .first,
    & .last,
	& .jump-prev,
    & .jump-next{
		background-image: url(../img/arrowRightW-double.png);
	}

	& .next,& .jump-next,
	& .last {
		transform: scaleX(100%);
	}

	& .prev,& .jump-prev,
	& .first {
		transform: scaleX(-100%);
	}
}

/* company */

.page.company #container{
	padding-bottom: 0;
	background: url(../img/bgCompany-info.jpg) no-repeat left;
	background-size: cover;

	.section-header{
		text-align: left;
		.section-title{
			line-height: 1;

			& span {
				margin-top: 0.5em;
				font-weight: 500;
			}
		}
	}
}

#company-greeting{
	display: flex;	
	gap: 70px;
	max-width: 1800px;
	margin: 0 auto 150px;
	align-items: center;

	.greeting-contents{
		width: 65%;
		padding-top: 50px;
	}

	.greeting-image{
		order: -1;
		width: 35%;

		img{
			max-width: 100%;
		}
	}


	.section-header{
		margin-bottom: 50px;

		p{
			font-size: 32px;
			line-height: 1.3;
			font-weight: 500;
			letter-spacing: 0.02em;
		}
	}

	.greeting-message{
		font-size: 16px;
		line-height: 1.8;
		padding-right: 100px;
		letter-spacing: 0.05em;

		& h3 {
			font-size: 1.2em;
			font-weight: 500;
			margin-bottom: 0.5em;
		}

		& p{
			margin-bottom: 1.2em;

			&.ceoname{
				text-align: right;
				display: block;
				font-size: 1.6em;
				font-weight: 500;
			}
		}

	}
}


#company-info{
	font-size: 16px;
	line-height: 1.6;
	padding-bottom: 150px;

	.section-header{
		max-width: 1000px;
		margin: 0 auto 50px;

	}
	
	table{
		border-spacing:0;
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
	}
	tr {
		display: grid;
		grid-template-columns: 1fr 4fr;
		gap: 20px;
	}

	th {
		border-bottom: 1px solid var(--colorOrange);
		padding: 15px 0;
		text-align: left;
		font-weight: 500;
		width: 180px;
		vertical-align: top;
	}
	
	td {
		border-bottom: 1px solid #C9C9C9;
		padding: 15px 0;
		vertical-align: top;
	}

	tr:first-child th{
		border-top: 1px solid var(--colorOrange);
	}
	tr:first-child td{
		border-top: 1px solid #C9C9C9;;
	}

}

/* concept */

.page.concept #container{
	padding: 0;
}

#concept-dialogue{
	background-color: var(--colorBgGray);
	padding-top: 150px;
	padding-bottom: 100px;
}


.dialogue-header{
	max-width: 1600px;
	margin:0 auto 50px ;
	h2 {
		font-size: 60px;
		max-width: 1210px;
		margin: 0 auto 1em;
		padding-bottom:0.4em;
		border-bottom: 1px solid #000;
		font-weight: 600;
		letter-spacing: 0.05em;


		span{
			display: block;
			margin-bottom:0.4em;
			color: var(--colorOrange);			
			font-weight: 400;
            font-family: "Roboto";

			background: var(--gradOrangeTate2);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

	}
}

.dialogue-block{
	margin-bottom: 50px;
	h3{
		font-size: 36px;
		font-weight: 600;
		padding-bottom: 0.8em;
		border-bottom: 1px solid var(--colorOrange);
		margin-bottom: 0.5em;
	}
}

.dialogue-header-contents{
	display: flex;

	& p{
		writing-mode: vertical-rl;
        text-orientation: upright;
        width: 30%;
        display: flex;
        align-items: center;
        font-size: 60px;
        line-height: 2;
        letter-spacing: 0.2em;
        font-weight: 600;
        padding-top: 0.5em;

		
		@media (max-width: 1600px){
			font-size: 3.7vw;
		}
	}

	& img{
		max-width: 100%;
		width: 70%;
		height: auto;
	}
}


.dialogue-contents{
	display: flex;
	gap: 4%;
	align-items: center;

	& > div{
		width: 48%;
	}
	&.wide{
		flex-direction: column;

		div{
			width: 100%;
		}
	}

	.dialogue-texts{
		p{
			line-height: 1.8;
            margin-bottom: 1em;
            font-size: 1.6em;
			span{
				font-weight: bold;
				margin-right: 0.5em;
			}
		}
	}

	.dialogue-image{

		.dialogue-block:nth-child(even) &{
			order: -1;
		}

		.dialogue-contents.wide &{
			order: 0;
		}

		& img{
			width: 100%;
			height: auto;
		}
	}

}

#concept-plans{
	max-width: 1600px;
	margin: 100px auto 0;
}

.contept-plan-block{
	margin-bottom: 50px;
	
	.concept-header{
		display: flex;
		margin-bottom: 50px;
		align-items: center;
	}

	.concept-header-contents{
		width: 40%;
		writing-mode: vertical-rl;
        text-orientation: upright;
		display: flex;
		flex-direction: column;
		justify-content: center;

		h2{
			font-size: 60px;
			font-weight: bold;
			margin-left: 20px;
			line-height: 1.5;
			display: inline-block;
			letter-spacing: 0.2em;

			span{
				color: var(--colorOrange);
				font-size: 24px;
				text-orientation: initial;
				font-weight: 500;
				display: block;
				letter-spacing: 0;

				background: var(--gradOrangeYoko);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		p{
            font-size: 30px;
            line-height: 1.6;
            font-weight: 500;
            letter-spacing: 0.15em;
		}
	}

	.concept-header-image{
		width: 60%;
		img{
			width: 100%;
			box-shadow: orange -20px 20px 0px;
		}
	}

	&:nth-child(even){
		.concept-header-image{
			order: -1;
			img{
				box-shadow: orange 20px 20px 0px;
			}
		}
	}
}


.concept-plan-contents{

	ol {
		display: flex;
		flex-wrap: wrap;
		gap:4%;
	}
	& ol > li{
		margin-bottom: 80px;
		&.short{
			width: 48%;
		}
		&.wide{
			width: 100%;
		}
	}

	h3{
		display: inline-flex;
        align-items: flex-end;
        font-size: 32px;
        font-weight: 600;
        line-height: 38px;
        padding-bottom: 0.5em;
        border-bottom: 1px solid #000;
        margin-bottom: 30px;
	}

	.plan-contents{

		&.flex-yoko{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&.flex-wrap{
			display: flex;
			flex-wrap: wrap;
			gap: 50px;
			align-items: center;

			& .plan-texts {
				margin-right: 80px;
			}
		}

		.plan-texts {
			font-size: 16px;
			line-height: 1.8;

			p.basetext20px{
				font-size: 20px
			}
			.txt-xlarge{	font-size: 1.5em;}
			.txt-large{		font-size: 1.2em;}
			.txt-small{		font-size: 0.9em;}
			.txt-xsmall{	font-size: 0.7em;}
		}


	}

}

.point-number {
	font-size: 50px;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-optical-sizing: auto;
	color: var(--colorOrange);
	margin-right: 15px;
	flex-shrink: 0;
	text-align: center;
	display: inline-block;
	line-height: 0.8;

	background: var(--gradOrangeTate);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	& span {
		font-size: 20px;
		letter-spacing:0.08em;
		display: block;
		line-height: 1.5;
	}
}

ul#planA-point1{
	margin-bottom: 30px;

	& li{
		font-weight: 500;
		margin-bottom: 1em;
		font-size: 14px;
		background:url(../img/icoCheck.png) no-repeat left 1em;	
		padding-left: 30px;

		& span{			
			font-size: 24px;
			border-bottom: 4px solid #FFF700;			
			white-space: pre;
			&::after{
				content: "\A";
			}
		}
	}

}

/* contact */

#pagetitle{
	text-transform: uppercase;
	color: #fff;
	font-family: "Cardo" ;
	font-size: 60px;
	padding: 120px;
	background: #e2e2e2 no-repeat center;
	background-size: cover;
	text-shadow:3px 3px 10px #aaa;
}

.concept #pagetitle{ background-image:url(../img/bgTitle-Concept.png);}
.company #pagetitle{ background-image:url(../img/bgTitle-Company.png);}
.blog #pagetitle,
.single #pagetitle,
.tax-cate #pagetitle{ background-image:url(../img/bgTitle-Blog.png);}
.contact #pagetitle,
.error #pagetitle,
.confirm #pagetitle,
.thanks #pagetitle{ background-image:url(../img/bgTitle-Contact.png);}
.privacy #pagetitle{ background-image:url(../img/bgTitle-Privacy.jpg);}

ul#breadlist{
	display: flex;
	font-size: 14px;
	margin-top: 0.5em;
	position: absolute;

	& li{
		&:not(:last-child)::after{
			content: "＞";
			margin: 0 3px;
		}
		&.current{
			font-weight: bold;
		}
	}

}


.page #container{
	padding:75px 0;
}

.page.contact #container{
	padding:150px 0;
}


/* お問合せフォーム */
.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-header h1 {
    font-size: 36px;
    margin-bottom: 35px;
    line-height: 1.6;
	font-family: "Noto Serif JP";
	font-weight: 800;
}

.contact-header p {
    color: #666;
    margin-bottom: 10px;
    line-height: 1.8;
	font-size: 1.6em;
}

.phone-info {
    margin: 20px 0;
}

.phone-number {
    font-size: 50px;
    font-weight: bold;
	font-family: "Roboto Condensed";
    color: #333;
    margin-bottom: 10px;
	transition: all 0.3s;

	&::before{
		content: "";
        display: inline-block;
        width: 0.75em;
        height: 0.75em;
        mask-image: url(../img/icoPhone.svg);
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: #000;
        margin-right: 0.15em;	
		transition: all 0.3s;
	}

	&:hover{
		color: var(--colorOrangeShadow);

		&::before{
			background-color: var(--colorOrangeShadow);
		}
	}
}

.business-hours {
    color: #666;
	font-size: 18px;
    margin-top: 1em;
}

.contact-form-section {
    background: #fff;
    padding: 30px 100px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	max-width: 800px;
    margin: 30px auto 10px;

	.contact &{
		margin:100px auto 10px;
	}
}

.contact-form-section h2 {
    text-align: center;
	font-size: 36px;
    margin-bottom: 35px;
    line-height: 1.6;
	font-family: "Noto Serif JP";
	font-weight: 800;
}

.contact-form-section a{
	text-align: center;
	display: block;
	color: #006FFF;
	font-size:16px;

	.page.confirm &{
		display: none;
	}
}

.required-note {
    margin-bottom: 30px;
    font-size: 16px;
}

.required-mark {
    color: #e74c3c;
    font-weight: bold;
}

/* MW WP Form スタイリング */
.mw_wp_form {
    width: 100%;
}

.mw_wp_form table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.mw_wp_form th {
    padding:10px;
    text-align: right;
    font-weight: bold;
    width: 30%;
    vertical-align: top;
	font-size: 20px;
	line-height: 1.3;

	&.required::before {
		content: "*";
    	color: #e74c3c;
		font-weight: normal;
	}
}

.mw_wp_form td {
    padding:10px;
	line-height: 1.6;
}

.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form input[type="tel"],
.mw_wp_form textarea {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
	background: #fafafa;

	&::placeholder{
		color: #ccc;
	}
}



.mw_wp_form textarea {
    height: 120px;
    resize: vertical;
}


.mw_wp_form input[type="submit"] {
    background: var(--gradOrangeTate2);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    display: block;
    transition: all 0.3s ease;

	&:hover {
		background: var(--colorOrangeShadow);
		transform: translateY(-2px);
		box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
	}
}


.mw_wp_form .error {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
}







#formmessage{
	border:3px double #ffdb4b;
	padding: 15px;
	margin-bottom: 25px;
}
#subpage #container #formmessage p{
	margin-bottom: 1em;
}
#subpage #container #formmessage p:last-child{	margin-bottom:0;}



.contact #privacypolicy{
	border:1px solid #ddd;
	padding: 5px;
	font-size: 1em;
	line-height: 1.3;
	margin-bottom:45px;
}

.contact #privacypolicy ul{
	padding-left: 2em;
}
.contact #privacypolicy ul li{
	list-style: disc;
}

#contactpolicy{
    padding: 3%;
    background-color: #f2f2f2;
    margin-top: 30px;
}

.page.contact #container h3 {
    background: #fff;
    color: #000;
    width: auto;
    margin-bottom: 1em;
    padding: 0.5em;
    line-height: 1.7;
}


#contact-tel {
    border: 5px solid #2196F3;
    padding: 20px 30px;
    margin: 0 10%;
    text-align: center;
}
#contact-tel h3 {
    background: #6b95b7;
    padding: 20px;
    font-weight: 500;
    border-left: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 2.4em;
    margin-bottom: 25px;
    clear: both;
}

#tblContact{
	clear: both;
	width: 100%;
	font-size: 1.4em;
	line-height: 1.5;
    border-top:1px dotted #281206;
    border-left:1px dotted #281206;
}

#tblContact th{
	width:25%;
	teble-layout:fixed;
	text-align:left;
	border-bottom:1px dotted #281206;
	padding:0.8em 0 0.8em 25px;
	font-weight:bold;
	line-height:1.5em;
	vertical-align:middle;
    background: #e6f0ff;

}

#tblContact th.hissu:after {
    float: right;
    background: #F30B4E;
    color: #fff;
    display: inline-block;
    content: "必須";
    padding: 3px 5px;
    font-size: 0.8em;
    margin-right: 1em;
}


#tblContact td{
	border-bottom:1px dotted #281206;
	border-right:1px dotted #281206;
	padding:0.8em 2%;
	line-height:1.5em;
	vertical-align: middle;
}
#tblContact td[colspan]{
	padding:0.8em 25px;
}


#tblContact input[type="text"],
#tblContact input[type="tel"],
#tblContact input[type="email"]{
	width:96%;
	padding:0.5em;
	border:1px solid #ccc;
    font-size: 1.4em;
}
#tblContact .mwform-tel-field input[type="text"]{
	width:auto;
}

#tblContact select{
	padding:0.5em;
	border:1px solid #ccc;
    font-size: 1.4em;
}

#tblContact span.wpcf7-list-item{
	width:8em;
	display:inline-block;
}


#tblContact td#tdDate span{
	float:left;
	clear:left;
	margin-right:1em;
	margin-top:0.3em;
}
#tblContact td#tdDate input{
	width:30%;
	margin-bottom:1em;
}


#tblContact .iptMini input[type="text"],
#tblContact .iptMini input[type="tel"]{
	width:15%;
}
#tblContact .iptMiddle input[type="text"]{
	width:100%;
}

#tblContact textarea{
	width:96%;
	padding:0.5em;
	font-size: 1.4em;
	line-height:1.5em;
    
}

#tblContact .hint{
	margin-left:0.5em;
}
.mw_wp_form_preview #tblContact td span{
	display:none;
}

#tblContact a{
    color: #3333CC;
    text-decoration: underline;
}

input#zip{
	width:8em;
}

span.hissu {
    color: #ff0000;
}

input#btnSubmit,
#btnSubmit input[type="submit"] {
	margin-top:20px;
	background:#122488;
	padding:30px 70px;
	font-size:1.8em;
	color:#fff;
	border:1px solid #fff;
	-webkit-box-shadow: #666 0px 0px 3px;
	-moz-box-shadow: #666 0px 0px 3px;
	box-shadow: #666 0px 0px 3px;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
input#btnSubmit:hover,
#btnSubmit input[type="submit"]:hover{
	background-color:#2196f3;
}

input[readonly]{
	background:#f2f2f2;
	color:#666;
}
#subpage #container p.telnumber {
    font-weight: bold;
    font-size: 4em;
    line-height: 1.3;
    color: #FF5722;
}

/* zipaddr-jp */
#autozip{
	display: none !important;
}