@charset "utf-8";
/*BASE*/

/*News Topics*/
#contents ul.pages li.pickup .title-box h2 {
	color:#333;
	font-weight:800;	
}
#contents ul.pages li.pickup .title-box h2:first-letter {
	color:rgba(1,175,212,1);
}
#contents ul.pages li.pickup .title-box p {
	color:#333;
	position:static;
}

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

/*HEADER*/


/*CONTENTS*/
#home .bt-txt {
	display:block;
	width:240px;
	margin:auto;
}

/*MainVisual*/
#mainvisual h1.logo {
	display:none;
}

/*私たちは*/
#about {
	background-color:rgba(255,255,255,1);
}
#about h1.title.line {
	font-size:18px;
	padding:4rem 2rem 2rem;
	margin-bottom:0;
}
#about .content {
	background: linear-gradient(125deg, var(--color-logo) 0%, rgba(24,140,207,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
	padding:4rem 2rem;
	
}
#about .content-box {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1rem;
	margin:auto;
}
#about .content-box .img-box img {
	width:100%;
	height:auto;
}
#about .content-box .txt-box {
	grid-column: 1 / 3;
	background:rgba(255,255,255,.8);
	padding:1rem;
}
#about .content-box .txt-box .comment-box {
	color:#333;
	text-align:justify;
}

/*CONTENTS*/
#contents {
	background: linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(24,140,207,.8) 60%, rgba(24,140,207,.8) 100%) fixed;
	padding:4rem 2rem;
}
#contents .content-box {
}
#contents .content-box .point {
	mix-blend-mode: multiply;
}
#contents .point li:not(:last-child) {
	padding-bottom:1rem;
	margin-bottom:1rem;
	border-bottom:dotted 4px #CCC;
}
#contents .point h2 {
	display:flex;
	align-items:center;
	font-size:16px;
	font-weight:700;
	margin-bottom:.5rem;
}
#contents .point h2 .first {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:2em;
	height: auto;
	aspect-ratio: 1 / 1;
	letter-spacing:0;
	margin-right:.2em;
	color:#FFF;
	background-color:var(--color-logo);
	border-radius:10px;
}

#contents .content-box .works {
	position:relative;
}
#contents .works ul {
	padding-top:3em;
}
#contents .works ul li {
	line-height:1;
	letter-spacing:0;
	text-align:center;
	background-color:var(--color-logo);
	clip-path: polygon(
		32px 0,
    	100% 0,
    	calc(100% - 32px) 100%,
    	0 100%,
    	0 100%
	);
}
#contents .works ul li:not(:last-child) {
	margin-bottom:1rem;
}
#contents .works ul li a {
	display:block;
	color:#FFF;
	padding:1em;
}
#contents .works ul li a > span {
	display:block;
	text-align:center;
}

/*実績紹介*/
#works {
	padding:4rem 0;
}
#works a.bt-txt {
	margin:auto;
}
}

@media screen and (min-width: 768px), print {
/*BASE*/

/*HEADER*/
#header {
	background-color:rgba(255,255,255,1);
	background-image: none;
	transform: translateY(-100%);
	transition:transform 0.4s ease;
}
#header.display-on {
	transform: translateY(0);
}

/*CONTENTS*/
#home .bt-txt {
	display:block;
	width:240px;
	margin:auto;
}

/*MainVisual*/
#mainvisual  h1.logo {
	text-align:center;
}
#mainvisual  h1.logo img {
	/*width:auto;
	height:48px;*/
	width:42vh;
	height:auto;
	min-width:280px;
	max-width:600px;
}

/*私たちは*/
#about {
	background-color:rgba(255,255,255,1);
}
#about h1.title.line {
	font-size:clamp(24px, 2.4vw, 32px);
	padding:100px 80px 60px;
	margin-bottom:0;
}
#about .content {
	background: linear-gradient(125deg, var(--color-logo) 0%, rgba(24,140,207,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
	padding:100px 80px 100px;
	
}
#about .content-box {
	display:flex;
	align-items:center;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
}
#about .content-box .img-box {
	flex:1;
	text-align:right;
}
#about .content-box .img-box img {
	width:100%;
	height:auto;
}
#about .content-box .txt-box {
	width:calc(100% / 3);
}
#about .content-box .txt-box .comment-box {
	color:#555;
	text-align:justify;
}

/*CONTENTS*/
#contents {
	background: linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(24,140,207,1) 60%, var(--color-logo) 100%) fixed;
	padding:100px 80px 100px;
}
#contents .content-box {
	display:flex;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
}
#contents .content-box .point {
	flex:1;
	mix-blend-mode: multiply;
}
#contents .point li:not(:last-child) {
	padding-bottom:1rem;
	margin-bottom:1rem;
	border-bottom:dotted 4px #CCC;
}
#contents .point h2 {
	display:flex;
	align-items:center;
	font-size:clamp(18px, 1.8vw, 24px);
	font-weight:700;
	letter-spacing:0.14em;
	margin-bottom:.5rem;
}
#contents .point h2 .first {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:2em;
	height:2em;
	letter-spacing:0;
	margin-right:.4em;
	color:#FFF;
	background-color:var(--color-logo);
	border-radius:10px;
}

#contents .content-box .works {
	width:calc(100% / 3);
	position:relative;
}
#contents .works ul {
	padding-top:3em;
	position:sticky;
	top:200px;
	mix-blend-mode:screen;
}
#contents .works ul li {
	line-height:1;
	letter-spacing:0;
	text-align:right;
	border-right: solid 2px #FFF;
	border-bottom: solid 1px #FFF;
	background-color:rgba(0,64,255,0);
	clip-path: polygon(
		32px 0,
    	100% 0,
    	100% 100%,
    	0 100%,
    	0 100%
	);
	transition:background-color ease-in .2s;
}
#contents .works ul li:not(:last-child) {
	margin-bottom:2rem;
}
#contents .works ul li:hover {
	background-color:rgba(0,64,255,1);
}
#contents .works ul li a {
	display:block;
	color:#FFF;
	padding:1em;
}
#contents .works ul li a > span {
	display:block;
	text-align:justify;
	text-align-last:justify;
	width:9em;
	margin:0 0 0 auto;
}

/*実績紹介*/
#works {
	padding:100px 0;
}
#works a.bt-txt {
	margin:auto;
}
}

/* ==========================================
   iOSのみ fixed 無効化
   ========================================== */
@supports (-webkit-touch-callout: none) {
	@media (hover: none) and (pointer: coarse) {
		#contents {
			background-attachment:scroll;
		}
		#contents .works ul {
			mix-blend-mode:normal;
		}
		#contents .works ul li {
			border-right: solid 2px var(--color-logo);
			border-bottom: solid 1px var(--color-logo);
			background-color:rgba(24,140,207,1);
		}
	}
}