@charset "utf-8";

/*
@media screen and (max-width: 599px){} phone-only
@media screen and (min-width: 600px){} tablet-portrait-up
@media screen and (min-width: 1025px){} tablet-landscape-up
@media screen and (min-width: 1200px){} desktop-up
@media screen and (min-width: 1800px){} big-desktop-up
*/
/* 共通 */	

ul,ol{
	list-style: none;
}

img{
	vertical-align: top;
}

.wrap{
	background-color: var(--back-color);
}

h1{
	letter-spacing: 2.5px;
	text-align: left;
}

header h1{
	letter-spacing: 0;
}

/* contact-btn */

.contact-btn{
	margin-bottom: 150px;
	display: grid;
	grid-template-columns: [col-start] repeat(5, [col-start] 1fr) [col-end];
}

@media screen and (min-width: 1025px){
	.contact-btn{
		grid-template-columns: [col-start] repeat(12, [col-start] 1fr) [col-end];
	}
}

.contact-btn-inner{
	padding: 0 0 20px;
	border-bottom: 1px solid var(--main-color); 
	grid-column: col-start 3 / col-start 6;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
} 

@media screen and (min-width: 1025px){
	.contact-btn-inner{
		grid-column: col-start 9 / col-start 13;
		gap: 60px;
	}
}

@media screen and (min-width: 1025px){
	#frist-contact{
		margin-top: -240px;
		margin-bottom: 150px;
	}
}

.contact-btn section h1,
.contact-btn section p{
	font-size: 14px;
}

.round_arrow{
	position: relative;
}
	
.round_arrow::before { /* 背景の表示設定 */
	content: "";
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 3px;
	width: 40px; /* 横幅 */
	height: 40px; /* 高さ */
	border-radius: 50%; /* 角の丸み */
	background: var(--sub-color);
}

.round_arrow::after{ /* くの字の表示設定 */
	content: "";
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 13px;
	width: 13px;
	height: 13px;
	border-top: 1px solid var(--subfont-color);
	border-right: 1px solid var(--subfont-color);
	transform: rotate(45deg);
}

.round_arrow:hover::before{
	background: var(--main-color);
}

.round_arrow:hover::after{  
	border-top: 1.5px solid var(--sub-color);
	border-right: 1.5px solid var(--sub-color);
}

/* header */

header{
	height: 70vh;
	position: relative;
}

@media screen and (min-width: 1025px){
	header{
		height: 100vh;
		margin-bottom: 0;
		position: relative;
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape){
	header{
		height: 100vh;
		margin-bottom: 0;
		position: relative;
	}
}

#fixed-header{
	width: 100%;
	height: 80px;
	padding: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	z-index: 999;
	background-color: #fff;
}

#fixed-header.scrolled {
	background-color: rgba(255,255,255,0.95);
	transition: all 0.3s ease;
}

#back{
	width: 100%;
	height: calc(70vh - 80px);
	right: 0;
	bottom: 0;
	position: absolute;
}

@media screen and (min-width: 1025px){
	#back{
		width: 100%;
		height: calc(100vh - 80px);
		right: 0;
		bottom: 0;
		position: absolute;
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape){
	#back{
		width: 100%;
		height: calc(100vh - 80px);
		right: 0;
		bottom: 0;
		position: absolute;
	}
}

/* 2024-09-18 */
#back p{
	width: 90%;
	left: 20px;
	top: 20px;
	margin: 0 auto;
	font-family: "azo-sans-web";
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	text-align: left;
	position: absolute;
	z-index: 111;
	text-shadow: 2px 2px 16px rgba(105, 105, 105, .55);
}

@media screen and (min-width: 1025px){
	#back p{
		left: 40px;
		top: 40px;
		font-family: "azo-sans-web";
		font-size: 34px;
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape){
	#back p{
		font-size: 22px;
	}
}

@media screen and (max-width: 1025px){
	#back p{
		font-size: 24px;
	}
}

@media screen and (max-width: 499px){
	#back p{
		font-size: 18px;
	}
}

#logo{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 5px;
}

#logo img{
	width: 160px;
}

#fixed-header h1{
	font-family: "dnp-shuei-gothic-gin-std";
	font-size: 10px;
	font-weight: 500;
}

@media screen and (min-width: 1025px){
	#logo{
		gap: 10px;
	}
	#logo img{
		width: 260px;
	}
	#fixed-header h1{
		font-size: 14px;
	}
}

.header-right{
	width: 20%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
}

#header-contact{
	margin-right: 50px;
}

@media screen and (max-width: 1024px){
	#header-contact{
		display: none;
	}
}

#header-contact img{
	height: 23px;
}

/* nav */
#nav-toggle{
	height: 20px;
	cursor: pointer;
}

#nav-toggle span{
	width: 70px;
	height: 1.5px;
	right: 3%;
	display: block;
	background: var(--main-color);
	position: absolute;
	z-index: 999;
	transition: transform .5s ease-in-out, top .5s ease;
}

#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 15px; }

.open #nav-toggle span:nth-child(1){
	top: 7.5px;
}
.open #nav-toggle span:nth-child(2){
	top: 7.5px;
}

.open #nav-toggle span:nth-child(1){ transform: rotate(20deg); }
.open #nav-toggle span:nth-child(2){ transform: rotate(-20deg); }

.open #logo{
	position: relative;
	z-index: 99999;
}	

#nav-toggle div > span{
	position: relative;
	width: 50px;
}

#gloval-nav{
	width: 100%;
	height: auto;
	background: #fff;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	z-index: 888;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	visibility: hidden;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity .5s ease, visibility .5s ease;
}

#gloval-nav a{
	display: block;
	font-family: "azo-sans-web";
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--main-color);
	text-decoration: none;
	transition: color .5s ease;
}

@media screen and (min-width: 1025px){
	#gloval-nav a{
		font-size: 24px;
	}
}

#gloval-nav a:hover {
	color: var(--sub-color);
}

#gloval-nav ul{
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: left;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content:space-between; 
		gap: 30px;
}

@media screen and (min-width: 1025px){
	#gloval-nav ul{
		width: 65%;
		flex-direction: row;
		gap: 30px;
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape){
	#gloval-nav ul{
		width: 65%;
		flex-direction: row;
		gap: 20px;
	}
}
	
#gloval-nav ul li {
		width: 100%;
		flex-grow: 1;
		opacity: 0;
		transform: translateY(25px);
		transition: transform .5s ease, opacity .5s ease;
}

@media screen and (min-width: 1025px){
	#gloval-nav ul li {
		width: 48%;
	}
}

#gloval-nav ul li:nth-child(2) { transition-delay: .1s; }
#gloval-nav ul li:nth-child(3) { transition-delay: .15s; }
#gloval-nav ul li:nth-child(4) { transition-delay: .2s; }
#gloval-nav ul li:nth-child(5) { transition-delay: .25s; }
#gloval-nav ul li:nth-child(6) { transition-delay: .3s; }
#gloval-nav ul li:nth-child(7) { transition-delay: .35s; }
#gloval-nav ul li:nth-child(8) { transition-delay: .4s; }
#gloval-nav ul li:nth-child(9) { transition-delay: .45s; }

.open { overflow: hidden; }
.open #gloval-nav {
	visibility: visible;
	opacity: 1;
}
.open #gloval-nav li {
	opacity: 1;
	transform: translateX(0);
	transition: transform 1s ease, opacity .9s ease;
}

/* concept-warpper */

#concept-warpper{
	width: 100%;
	margin: 100px 0;
}

@media screen and (min-width: 1025px){
	#concept-warpper{
		margin: 150px 0;
	}
}

#concept-inner{
	width: 85%;
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: [col-start] repeat(5, [col-start] 1fr) [col-end];
	gap: 0;
}

@media screen and (min-width: 1025px){
	#concept-inner{
		grid-template-columns: [col-start] repeat(12, [col-start] 1fr) [col-end];
		gap: 3rem;
	  }
}

#concept-inner div{
	margin-bottom: 100px;
}

#concept-inner div:last-child{
	margin-bottom: 0;
}

#concept-inner div:nth-child(1){
	grid-column: col-start / col-start 6;
	grid-row: 1;
}

#concept-inner div:nth-child(2){
	grid-column: col-start 2 / col-start 7;
	grid-row: 2;
}

#concept-inner div:nth-child(3){
	grid-column: col-start / col-start 5;
	grid-row: 3;
}


@media screen and (min-width: 1025px){
	#concept-inner div:nth-child(1){
		grid-column: col-start / col-start 7;
		grid-row: 1;
	}
	#concept-inner div:nth-child(2){
		margin-top: 120px;
		grid-column: col-start 8 / col-start 13;
		grid-row: 1;
	}
	#concept-inner div:nth-child(3){
		margin-top: -300px;
		grid-column: col-start / col-start 7;
		grid-row: 3;
	}
}

#concept-inner h1{
	margin-bottom: var(--common-margin-x3);
}

#concept-inner h2{
	margin-bottom: var(--common-margin-x3);
	font-family: "dnp-shuei-gothic-gin-std";
	font-size: 20px;
}

@media screen and (min-width: 1025px){
	#concept-inner h2{
		font-size: 28px;
	}
}

#concept-inner p{
	font-size: 14px;
	letter-spacing: 1.5px;
	line-height: 2;
}

/* project-warpper */

#project-warpper{
	width: 100%;
	margin-bottom: 150px;
}

.image-box{
	margin-bottom: 100px;
}

.text-box{
	width: 85%;
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: 80px;
}

.text-box h1{
	line-height: initial;
}

.text-box h1 a{
	margin-left: 30px;
}

.text-box h1 a img{
	width: 20px;
	vertical-align: baseline;
}

@media screen and (min-width: 1025px){	
	.text-box h1 a img{
		width: 30px;
	}
}

.text-box h3{
	font-family: "dnp-shuei-gothic-gin-std";
	font-size: 14px;
}

.inner-box ul{
	width: 85%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: center;
}

.inner-box ul li{
	width: 100%;
	margin-bottom: 80px;
	text-align: left;
	display: inline-block;
	position: relative;
}


@media screen and (min-width: 1025px){	
	.inner-box ul li{
		width: calc((100% - 100px) / 2);
		margin-bottom: var(--common-margin-x5);
	}
}

.inner-box ul li:nth-child(8){
	margin-bottom: 0;
}

@media screen and (min-width: 1025px){
	.inner-box ul li:nth-child(7){
		margin-bottom: 0;
	}
}	

.inner-box img{
	width: 55px;
	margin-top: -10px;
	position: absolute;
	z-index: 
}

.inner-box ol{
	margin-left: 20px;
	padding-left: 50px;
	display: flex;
	flex-direction: column;
}

.inner-box ol li{
	width: 100%;
	margin-bottom: 0;
	text-indent: -1em;
	padding-left: 1em;
}

.inner-box ol li:first-child{
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-indent: 0;
	padding-left: 0;
}

.inner-box ol li:nth-child(4){
	margin-bottom: 40px;
}

.inner-box ol li:last-child{
	text-align: right;
}


.inner-box ol li:last-child a{
	font-family: "azo-sans-web";
	text-transform: uppercase;
	position: relative;
	display: inline-block;
}
	
/** 下線を右から引く **/
.inner-box ol li:last-child a:before{
	position: absolute;
	bottom: -7px;
	right: 0;
	content: "";
	width: 100%;
	height: 1px; /*下線の太さ*/
	background: #000; /*下線の色*/
	transition: transform .3s; /*アニメーション速度*/
	transform-origin: right top; /*アニメーションの起点*/
	transform: scale(4,1);  /*幅は0*/
}
	
.inner-box ol li:last-child a:hover:before {
	background: #CFCBC5;
	transform-origin: right top;
	transform: scale(0,0);/*幅を1に*/
}
	
.inner-box ol li:last-child a:after{
	position: absolute;
	bottom: -7px;
	right: 0;
	content: "";
	width: 100%;
	height: 1px; /*下線の太さ*/
	background: #000;/*下線の色*/
	transition: transform .6s; /*アニメーション速度*/
	transform-origin: right top; /*アニメーションの起点*/
	transform: scale(0,0); /*幅は0*/
}
.inner-box ol li:last-child a:hover:after {
	transform-origin: right top;
	transform: scale(4,1); /*幅を1に*/
}

#project-warpper h2,
#service-warpper h2{
	margin-bottom: var(--common-margin);
	font-size: 14px;
	font-weight: 300;
}

@media screen and (min-width: 1025px){
	#project-warpper h2,
	#service-warpper h2{
		font-size: 16px;
	}
}

#project-warpper h3,
#service-warpper h3{
	margin-bottom: var(--common-margin-x2);
	font-family: "dnp-shuei-gothic-gin-std";
	font-size: 14px;
	font-weight: 400;
}

#service-warpper h3{
	margin-bottom: 0;
}

#project-warpper h4{
	font-size: 12px;
	font-weight: 400;
}

/*  */

.arrow_animation_button {
	display: inline-block;
	position: relative;
	padding: 8px 50px 8px 30px;
	border:  1px solid var(--main-color);
	color: var(--main-color);
	border-radius: 10px;
}
	
.arrow_animation_button:hover { 
	background: rgba(255,255,255,0.3);
}
	
.arrow_animation_button::before { 
	content: "";
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 35px;
	width: 13px;
	height: 13px;
	border-top: 1.5px solid var(--main-color);
	border-right: 1.5px solid var(--main-color);
	transform: rotate(45deg);
	animation: slideBlink 1s linear infinite; 
}
	
@keyframes slideBlink {
	from { /* アニメーション開始時のスタイル */
		opacity: 0;
		right: 35px;
	}
	to { /* アニメーション終了時のスタイル */
		opacity: 1;
		right: 15px;
	}
}

/* service-warpper */

#service-warpper{
	width: 100%;
	padding-bottom: 150px;
}
	
/*  */
.inner-box-2{
	width: 85%;
	max-width: 1000px;
	margin: 0 auto;	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	gap: 80px;
}

.inner-box-2 div{
	width: 100%;
	text-align: left;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--common-margin);
}

@media screen and (min-width: 1025px){
	.inner-box-2 div{
		width: calc((100% - 100px) / 2);
	}
}

.innertext{
	width: 75%;
}

.innertext li{
	margin-bottom: 10px;
}

.innertext li:first-child{
	font-size: 14px;
	font-weight: 600;
}

/* business-warpper */

#business-warpper{
	width: 100%;
	margin-top: var(--common-margin-x5);
	color: var(--subfont-color);
	background-color: var(--background-color);
}

#business-warpper section{
	padding: 100px 0;
}

#business-warpper section h1{
	letter-spacing: 2.5px;
	color: var(--subfont-color);
	text-align: center;
}

#business-warpper section h2{
	margin-bottom: var(--common-margin);
	font-size: 16px;
	font-weight: 300;
	text-align: center;
	color: var(--subfont-color);
}

#business-warpper section h3{
	color: var(--subfont-color);
	font-family:"dnp-shuei-gothic-gin-std";
	font-weight: 400;
	text-align: center;
}

#business-warpper section ul{
	width: 85%;
	max-width: 650px;
	margin: 0 auto;
	margin-bottom: var(--common-margin-x2);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 15px;
}

#business-warpper section ul li{
	width: 100%;
}

@media screen and (min-width: 1025px){
	#business-warpper section ul li{
		width: calc((100% - 100px) / 2);
	}
}

.lasttext{
	width: 85%;
	max-width: 650px;
	margin: 0 auto;
	text-align: right;
	color: var(--subfont-color);
}

/* contact-warpper */

#contact-warpper{
	width: 100%;
	padding: var(--common-margin-x5) 0;
	text-align: center;
	background-color: #fff;
}

#contact-warpper section{
	width: 85%;
	max-width: 650px;
	margin: 0 auto;
}

#contact-warpper h1{
	margin-bottom: var(--common-margin-x3);
}

#contact-warpper h2{
	margin-bottom: var(--common-margin-x2);
	font-size: 16px;
}

/* aside */

#both-sides{
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1024px){
	#both-sides{
		display: none;
	}
}

#both-sides p{
	font-family: "azo-sans-web";
	letter-spacing: 1px;
	text-transform: uppercase;
	text-orientation: sideways;
	writing-mode: vertical-rl;
	color: var(--main-color);
}

#both-sides ul{
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	position: fixed;
	z-index: 2;
}

@media screen and (min-width: 1025px){
	#both-sides ul{
		left: 10px;
	}
}

#both-sides ul li{
	margin-bottom: var(--common-margin-x4);
}

#both-sides ul li:last-child{
	margin-bottom: 0;
}

/* footer */

footer{
	padding-bottom: var(--common-margin);
	text-align: center;
}

.footer-inner{
	width: 100%;
	margin: 0 auto;
	padding-top: var(--common-margin-x5);
	font-family: "azo-sans-web";
}

@media screen and (min-width: 1025px){
	.footer-inner{
		width: 85%;
	}
}

footer .contact-btn{
	margin-bottom: var(--common-margin-x4);
}

#outline{
	width: 85%;
	max-width: 650px;
	margin: 0 auto;
	margin-bottom: var(--common-margin-x4);
	text-align: left;
}

#outline li{
	margin-bottom: 5px;
}

#outline li img{
	width: 180px;
}

/* 2024-09-17 */

.busi-img-box{
	width: 85%;
	max-width: 1000px;
	margin: 0 auto;
	margin-bottom: var(--common-margin-x4);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 15px;
}

@media screen and (min-width: 1025px){
	.busi-img-box{
		flex-direction: row;
	}
}

.busi-img-box li{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 15px;
}

@media screen and (min-width: 1025px){
	.busi-img-box li img,
	.busi-img-box li div{
		width: calc((100% - 100px) / 2);
	}
}

.busi-img-box h4{
	margin: 15px 0 15px;
	text-align: left;
	color: #fff;
	font-size: 12px;
}

.busi-img-box h4 span{
	background: var(--sub-color);
}

.busi-img-box h5{
	margin: 15px 0 25px;
	text-align: left;
	color: #fff;
	font-size: 12px;
}

.busi-img-box p{
	margin-bottom: 25px;
}

#newbtn-warpper{
	width: 100%;
	margin-bottom: 80px;
}

#newbtn-inner{
	width: 85%;
	max-width: 1000px;
	margin: 0 auto;
}

@media screen and (min-width: 1025px){
	#newbtn-inner{
		margin-top: -240px;
		margin-bottom: 150px;
		display: flex;
		flex-wrap: wrap;
		fflex-direction: column;
		justify-content: flex-end;
	}
}

#newbtn-inner ul li{
	margin-bottom: 30px;
}

.newbtn01,
.newbtn02{
	height: 51px;
	line-height: 51px;
	min-width: 300px;
	text-align: center;
	background: var(--sub-color);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid var(--sub-color);
	-webkit-transition: all .3s;
	transition: all .3s;
	border-radius: 50px;
}

@media screen and (min-width: 1025px){
	.newbtn01,
	.newbtn02{
		font-size: 20px;
	}
}

.newbtn01:hover, .newbtn02:hover{
	color: var(--sub-color);
	border: 1px solid var(--sub-color);
	background-color: #fff;
}

.add-img{
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}	

.add-img li{
	width: 50%;
}

/* 2025-08-08 */

#business-warpper{
	margin-top: 0;
}

/* partner-warpper */

#par-warpper{
	width: 100%;
	margin-top: var(--common-margin-x5);
	color: var(--subfont-color);
	background-color:var(--subfont-color) ;
}

#par-warpper section{
	padding: 100px 0;
}

#par-warpper section h1{
	font-size: 2.4rem;
	margin-bottom: var(--common-margin-x2);
	line-height: 1.2;
	color: var(--main-color);
	text-align: center;
}

@media screen and (min-width: 1025px){
	#par-warpper section h1{
		font-size: 2.8rem;
	}
}

#par-warpper section h2{
	margin-bottom: var(--common-margin-x2);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	color: var(--main-color);
}

#par-warpper section h3{
	margin-bottom: var(--common-margin-x2);
	font-size: 2.4rem;
	line-height: 1.2;
	text-align: center;
	color: var(--main-color);
}

@media screen and (min-width: 1025px){
	#par-warpper section h3{
		font-size: 4.0rem;
	}
}

#par-warpper section img{
	margin-bottom: var(--common-margin-x3);
}

#par-warpper section h4{
	margin-bottom: var(--common-margin-x3);
	font-size: 1.2rem;
	font-weight: 400;
	text-align: left;
	color: var(--main-color);
}

@media screen and (min-width: 1025px){
	#par-warpper section h4{
		font-size: 1.6rem;
		text-align: center;
	}
}

#par-warpper section ul{
	width: 85%;
	max-width: 300px;
	margin: 0 auto;
}

.club-btn{
	height: 51px;
	line-height: 51px;
	min-width: 300px;
	text-align: center;
	background: var(--background-color);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border: 1px solid var(--background-color);
	-webkit-transition: all .3s;
	transition: all .3s;
	border-radius: 50px;
}

@media screen and (min-width: 1025px){
	.club-btn{
		font-size: 20px;
	}
}

.club-btn:hover{
	color: var(--background-color);
	border: 1px solid var(--background-color);
	background-color: #fff;
}

#par-warpper .text-box{
	margin-bottom: 0;
}