@charset "UTF-8";
/* CSS Document */

@import url(reset.css);

html { scroll-behavior: smooth; }
img { vertical-align: bottom; }

::selection { background: #000; color: #fff; }

body {
	font-family: "Kiwi Maru", serif;
	font-size: 16px;
	line-height: 1;
	transition: 2.4s;
}

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

@keyframes objApr {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* 
Kiwi Maru
font-weight: 300, 400, 500
*/





/* SP用記述*/
.br4pc { display: none; }
.forPC { display: none; }

.bg_yellow { background-color: #FFE100; }
.bg_skyblue { background-color: #22C4FF; }
.bg_magenta { background-color: #FF3496; }

header {
	mix-blend-mode: difference;
	position: fixed;
	top: 60px;
	left: 8vw;
	pointer-events: none;
}
header, main .logo {
	width: 36vw;
	max-width: 200px;
}
.fixed_logo { transition: .6s; }
.bg_yellow .fixed_logo { fill: #FFE100; }
.bg_skyblue .fixed_logo { fill: #22C4FF; }
.bg_magenta .fixed_logo { fill: #FF3496; }

main {
	padding-top: min(calc(60px + 58.46vw + 30px), calc(60px + 324px + 30px));
	padding-left: 8vw;
	padding-right: 8vw;
}

.loop .jpn, .loop .eng {
	line-height: 2.25;
	padding-top: 30px;
}
.loop h1 {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
}
.loop .txt { margin-top: 30px; }
.loop .portfolio {
	margin-top: 30px;
	font-weight: 500;
}
.loop address { margin-top: 40px; }
.loop address a {
	text-decoration: #666 underline dashed 1px;
	text-underline-offset: 5px;
}
.loop address .txtM {
	font-weight: 500;
	margin-right: 1em;
}
.loop .logo {
	margin-top: 90px;
	padding-bottom: 30px;
}



@media only screen and (min-width:768px) {
	/* iPad以上対応 */
	.br4sp { display: none; }
	.br4pc { display: inline; }
	.forSP { display: none; }
	.forPC { display: block; }
}



@media only screen and (min-width:960px) {
	/* PC用記述 */
	a[href^="tel:"] { pointer-events: none; }

	header {
		top: 120px;
		left: calc((100% - 960px) / 2);
	}

	main {
		max-width: 1000px;
		margin: 0 auto;
		padding: 578px 20px 0;
	}

	.loop .jpn, .loop .eng {
		line-height: 2.25;
		padding-top: 30px;
	}
	.loop h1 { font-size: 27px; }
	.loop .txt,
	.loop .portfolio,
	.loop address { font-size: 18px; }
	.loop address a[href^="tel:"] { text-decoration: none; }
	.loop address a[href^="mailto:"] { transition: .5s; }
	.loop address a[href^="mailto:"]:hover { mix-blend-mode: difference; }
	.bg_yellow .loop address a:hover { background-color: #FFE100; }
	.bg_skyblue .loop address a:hover { background-color: #22C4FF; }
	.bg_magenta .loop address a:hover { background-color: #FF3496; }

	.loop .logo {
		margin-top: 120px;
		padding-bottom: 30px;
	}

}