.PC{display: block;}
.SP{display: none;}
.flex{display: flex;}
.inner { width: 1100px;  margin: 0 auto;}
.l-inner{  width: 1200px; margin: 0 auto; } 
.breadcrumb_box{background: #F8F8F8; padding: 9px 50px 12px; margin: 124px 0 0;}
.breadcrumb_box .breadcrumb-link{max-width: 1500px;}
.breadcrumb_box .breadcrumb-link li{position: relative; display: inline-block;font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal;font-size: 12px;}
.breadcrumb_box .breadcrumb-link li:not(:last-child){padding: 0 57px 0 0;}
.breadcrumb_box .breadcrumb-link li:not(:last-child):before{content: ""; display: block; width: 34px; height: 1px; top: 50%; transform: translateY(-50%); right: 12px;background: #707070;position: absolute; }
.breadcrumb_box .breadcrumb-link li a{font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal; font-size: 12px;}
body{overflow-x: scroll; min-width: 1200px;}

h2{text-align: center; color: #3766B1;font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal; font-size: 16px; line-height: 119%;}
h2 span{font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; font-size: 40px; line-height: 160%; color: #262626;}


.view_btn{transition: 0.5s; opacity: 1;}
.view_btn.thumb-hover{transition: 0.5s; opacity: 0.5;}
/* ------------------------------------------------------------ header */

#header { padding: 26px 32px; position: fixed; background-color: transparent; transition: background-color 0.3s ease; top: 0px; left: 0px; width: 100%; z-index: 2000; min-width: 1200px;}
#header .white_box{margin: 0 0 0 auto;}
#header.scrolled {background-color: #fff;}

header .toplogo { margin: auto; margin-top: 0;}
#header h1 { font-size: 12px; text-align: center; color: #fff; width: 240px; height: auto;}
#header h1 a{display: block; width: 100%;}
#header h1 a img{width: 100%; height: auto;}
#header .menu { float: left; margin: 0; }
#header #search { float: left; width: 225px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 30px 0 0 20px; background: #e6e6e6; }
#header #search input[type="text"] { border: none; padding: 3px 0 3px 5px; width: 175px; background: #e6e6e6; }
#header #search #image-btn { background: url(../images/header/icn_find.png) center center no-repeat #e6e6e6; padding: 0 15px 0 23px; width: 30px; }

#header nav{display: inline-block; margin: 0 0 0 auto;}
#header nav ul { float: right; width: auto; text-align: center; }
#header nav ul li { float: left; width: auto;}
#header nav ul li:not(:last-child){padding: 20px 55px 20px 0;}
#header nav ul li a{font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal;}
#header nav ul li a.btn{width: 189px; height: auto; background: #262626; border-radius: 1000px; color: #fff; padding: 19px 0 20px; font-size: 18px; font-weight: 400; line-height: 160%; display: block;}

/* ------------------------------------------------------------ footer */
footer{background: none; padding: 90px 50px 88px;margin-top: 0; min-width: 1200px; width: 100%;}
footer .footer_box{max-width: 1500px; margin: 0 auto; justify-content: space-between; width: 100%;}
footer .footer_box .titlearea{width: 336px; height: auto; }
footer .footer_box .titlearea h1{width: 300px; height: auto; padding: 110px 0 0;}
footer .footer_box .titlearea h1 img{width: 100%; height: auto;}
footer .footer_box .titlearea .tt{padding: 35px 0 0; font-size: 24px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; line-height: 200%; color: #262626;}
footer .mini_tt{font-size: 12px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal; line-height: 200%; padding: 68px 0 0; color: #262626;}
footer .footer_box .link_box{width: calc(100% - 336px); height: auto; text-align: right;}

footer .footer_box .link_box nav{display: inline-block;}
footer .footer_box .link_box nav ul{display: flex;flex-wrap: wrap; gap: 0em; justify-content: flex-end;}
footer .footer_box .link_box nav ul li{width: calc((100% - 96px) / 5); margin-bottom: 10px;}
footer .footer_box .link_box nav ul li a{font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal; line-height: 150%; color: #262626; font-size: 16px;}
footer .footer_box .link_box nav ul li:nth-child(5n){margin-right: 0;}
footer .footer_box .link_box nav ul li:not(:nth-child(5n)){margin-right: 24px;}
footer .footer_box .link_box nav ul li:last-child{margin-right: 0;}
footer .footer_box .link_box a.btn{margin: 90px 0 0 auto; display: block; padding: 15px 0 23px; border-radius: 1000px; background: linear-gradient(to left, #ff84c6,#6bbaff); font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; line-height: 148%; color: #262626; text-align: center; font-size: 17px; width: 253px; height: auto; }

/* ------------------------------------------------------------ .back_box */
.back_box{border-bottom: 1px solid #D5D5D5;}
.back_box a{width: 191px; height: auto; background: #262626; color: #fff; border-radius: 15px 15px 0 0; text-align: center; font-size: 14px; line-height: 160%; padding: 15px 0 17px; display: block; margin: 0 0 0 auto;}


	/* ===== Auth loading overlay ===== */
	#auth-loading-overlay {
	  position: fixed;
	  inset: 0;
	  z-index: 99999;
	  background: rgba(255, 255, 255, 0.95);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	#auth-loading-overlay .auth-loading-box {
	  text-align: center;
	  font-family: sans-serif;
	  color: #333;
	}
	
	#auth-loading-overlay .auth-loading-box p {
	  margin-top: 12px;
	  font-size: 14px;
	  letter-spacing: 0.04em;
	}
	
	/* Simple spinner */
	#auth-loading-overlay	.spinner {
	  width: 40px;
	  height: 40px;
	  border: 4px solid #ddd;
	  border-top-color: #0078d4;
	  border-radius: 50%;
	  animation: spin 0.9s linear infinite;
	}
	
	@keyframes spin {
	  to { transform: rotate(360deg); }
	}



	/* Any container can become busy */
.is-busy {
	position: relative;
	min-height: 200px; /* change if you want */
}

/* Optional: dim + disable all children while busy */
.is-busy > * {
	opacity: 0.35;
	pointer-events: none;
	user-select: none;
}

/* Spinner overlay (centered) */
.is-busy::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	transform: translate(-50%, -50%);
	border: 4px solid rgba(0,0,0,0.15);
	border-top-color: rgba(0,0,0,0.75);
	border-radius: 50%;
	animation: isBusySpin 0.9s linear infinite;
	z-index: 10;
}

/* Optional: white overlay behind spinner */
.is-busy::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.6);
	z-index: 9;
}

/* Spin animation */
@keyframes isBusySpin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}


._user_p_list .project-name-tag{display: flex;align-items: start;}
._user_p_list .project-name-tag .tt{line-height: 100% !important;}


@media only screen and (max-width:640px){
	.PC{display: none;}
	.SP{display: block;}
	.flex{display: block;}
	body{overflow-x: auto; min-width: auto;}
	.inner { width: 90%; margin: 0 auto;}
	.l-inner{ width: 90%; margin: 0 auto; } 
	.breadcrumb_box{padding: 6px 5% 6px; margin: 86px 0 0; overflow-x: scroll;}
	.breadcrumb_box .breadcrumb-link{width: max-content;}
	.breadcrumb_box .breadcrumb-link li{font-size: 11px;}
	.breadcrumb_box .breadcrumb-link li:not(:last-child){padding: 0 37px 0 0;}
	.breadcrumb_box .breadcrumb-link li:not(:last-child):before{ width: 21px; right: 8px;}
	.breadcrumb_box .breadcrumb-link li a{font-size: 11px;}
	
	h2{ font-size: 16px; }
	h2 span{font-size: 30px;}
	/* ------------------------------------------------------------ header */
	body.stop{overflow: hidden;}
	#header { padding: 0; min-width: auto; }
	#header .clos_header_btn{width: 30px; height: 14px; position: relative; z-index: 2000; margin: 0 0 0 auto;}
	#header .clos_header_btn span{display: block; width: 100%; height: 2px; position: absolute; left: 50%; transform: translateX(-50%); background: #262626; transition: 0.5s;}
	#header .clos_btn span.top{top: 0px;}
	#header .clos_header_btn span.center{top: 50%; transform: translate(-50%, -50%);}
	#header .clos_header_btn span.bottom{bottom: 0px;}
	#header .clos_header_btn.is-open span { transition: 0.5s;}
	#header .clos_header_btn.is-open span.top{top: 50%; transform: translate(-50%, -50%) rotateZ(45deg);}
	#header .clos_header_btn.is-open span.center{top: 50%; transform: translate(-50%, -50%); opacity: 0;}
	#header .clos_header_btn.is-open span.bottom{top: 50%; transform: translate(-50%, -50%) rotateZ(-45deg); bottom: auto;}
	
	#header h1 { font-size: 12px; margin:0; position: relative; z-index: 10;width: 120px; height: auto;}
	#header .menu { float: left; margin: 0; }
	#header #search { float: left; width: 225px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-sizing: border-box; -webkit-box-sizing: border-box; margin: 30px 0 0 20px; }
	#header #search input[type="text"] { border: none; padding: 3px 0 3px 5px; width: 175px;}
	#header #search #image-btn { background: url(../images/header/icn_find.png) center center no-repeat #e6e6e6; padding: 0 15px 0 23px; width: 30px; }
	
	header .toplogo { margin: auto; margin-top: 0; padding: 10px 16px;}
	#header .white_box{display: none; margin: 0; position: absolute; z-index: 100; width: 100%; height: 100vh; top: 0px; left: 0px; background: #fff; padding: 70px 0;overflow-y: scroll;}
	#header .white_box .innner_sp{width: 90%; margin: 0 auto}
	#header .white_box .innner_sp h1{float: none; display: block;color: #000;width: 180px; text-align: left;padding: 15px 0 0;}
	#header .white_box p{font-size: 14px; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; line-height: 179%; letter-spacing: 0.38em;}
	#header .white_box h1 a{font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; font-size: 12px;display: block;}
	#header .white_box h1 a .thick_tt{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 700;font-style: normal; font-style: normal; font-size: 50px;}
	#header .white_box h1 a .thick_tt .tt_2{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 500; font-style: normal; font-size: 50px;}
	#header .white_box .btn_box{padding: 35px 0 0;}
	#header .white_box .btn_box a{display: block; width: 100%; height: auto; font-size: 12px; text-align: center; border-radius: 100px; line-height: 160%; color: #fff;font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal; padding: 6px 0 12px;}	
	#header .white_box .btn_box a span{font-size: 18px; line-height: 145%;}
	#header .white_box .btn_box a.btn_1{background: linear-gradient(to left,#0BC6DE,#28D09C);}
	#header .white_box .btn_box a.btn_2{background: linear-gradient(to left,#FFAC5A,#E84DB6); margin: 15px 0 0;}
	
		
	#header nav{display: block; padding: 35px 0 0;}
	#header nav ul { float: none; width: auto; text-align: center; }
	#header nav ul li { float: none; width: 100%; text-align: left;}
	#header nav ul li:not(:last-child){padding: 0; }
	#header nav ul li a{display: block; padding: 13px 0 13px 30px; position: relative; font-size: 16px;}
	#header nav ul li a:before{content: ""; display: block; width: 18px; height: 1px; position: absolute; top: 50%; transform: translateY(-50%) ; left: 0px; border-bottom: 1px solid #3766B1;}
	#header nav ul li a.btn{width: 100%; padding: 14px 0 15px; font-size: 16px; margin: 40px 0 0; text-align: center;}
	
	/* ------------------------------------------------------------ footer */
	footer{background: none; padding: 42px 0 32px; min-width: auto; width: 90%; margin: 0 auto;}
	footer .footer_box{justify-content: space-between; width: 100%;}
	footer .footer_box .titlearea{width: 100%; height: auto; }
	footer .footer_box .titlearea h1{width: 200px; height: auto; padding: 0;}
	footer .footer_box .titlearea h1 img{width: 100%; height: auto;}
	footer .footer_box .titlearea .tt{padding: 36px 0 0; font-size: 23px; line-height: 160%;}
	footer .mini_tt{font-size: 12px; padding: 58px 0 0; width: 100%; margin: 0 auto; color: #262626; text-align: center;}
	footer .footer_box .link_box{width: 100%;padding: 43px 0 0;}
	
	footer .footer_box .link_box nav{display: inline-block;}
	footer .footer_box .link_box nav ul{gap: 0em; justify-content: flex-end;}
	footer .footer_box .link_box nav ul li{ width: 100%; text-align: left;}
	footer .footer_box .link_box nav ul li a{font-size: 16px;}
	footer .footer_box .link_box nav ul li:not(:last-child){margin-right: 0; margin-bottom: 25px;}
	footer .footer_box .link_box nav ul li:last-child{margin-bottom: 75px;}
	footer .footer_box .link_box a.btn{margin: 0 auto; display: block; padding: 15px 0 23px; font-size: 17px; width: 100%; height: auto; }

	/* ------------------------------------------------------------ .back_box */
	.back_box a{width: 135px; font-size: 12px; padding: 10px 0 12px; border-radius: 9px 9px 0 0;}
}