* {
  scrollbar-color: #2a5c99 transparent; 
}

 ::selection {
  background: #bbbbe5;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: white;
}
 ::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: SlateBlue;
  transition: 0.2s;
} 
h3 {
color: #424242;
}
body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; background: #EEF2F7;
}

header {
  padding:5px;
  background-color:#151515;
  overflow:hidden;
  box-shadow:  0px 5px 6px -1px rgba(0, 0, 0, 0.55);
  -webkit-box-shadow:  0px 5px 6px -1px rgba(0, 0, 0, 0.55);
}
.start {
color: GhostWhite;
background-image:
  linear-gradient(to bottom, transparent, #EEF2F7),
  url('content/background.png');
background-size: cover;
padding-bottom:1px; 
}



header h1 {
color: GhostWhite;
font-size:1.7em;
float:left;
}

header img {
float:left;
padding-right:7px;
}

h1, h2, h3, h4, h5, .desc, footer, address {
text-align: center;
}

.desc {
color: black;
font-size: 1.4em;
}
.box a {
color: #3b74ba;
}

.center {
text-align:center;
justify-content:center;
}

.pc {
  font-size: 1.1em;
  margin: auto;
  max-width: 60%;
}


.column {
  text-align: center;
  max-width: 1200px;
  margin: auto;
  display: grid;
}

@media (min-width: 600px) {
  .column { grid-template-columns: repeat(2, 1fr); }
}

li {float: right;}

li a {
  display: block;
  color: GhostWhite;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  top: 0;
}
.box {
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
  padding: 13px;
  margin: 15px;
  background: white;
  border-radius: 5px;
}

.motto {
 color: black;
 font-size: 4em;
 text-shadow: 1px 1px 1px black;
}

a {
    color: black;
}
a:hover { 
color: gray;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.column a {
 text-decoration: none;
}

.left {
width: 50%;
float:left;
}

.right {
width: 50%;
float:right;
}

footer {
  text-align: center;
  margin: 0 auto;
  display: grid;
  background-color: Gainsboro;
  box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,0.1);
  background-image: url('content/twiga.png');
  background-size: 60px, 60px;
  background-position: right bottom, right top;
  background-repeat: no-repeat;
  text-shadow: 0 1px 0 #e1e1e1;
}

.mission {
  text-align: center;
  margin: 0 auto;
  display: grid;
  box-shadow: inset 0 -1px 5px 0 rgba(0,0,0,0.1);
  background-color:#141414;
  color:GhostWhite;
}

@media (min-width: 600px) {
  footer { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 600px) {
  .mission { grid-template-columns: repeat(3, 1fr); }
}

@media only screen and (min-width: 1921px) {
.pc {
text-align: center;
}
    }
/* IE POLYFILL */
.carousel {
	width: 40vw;
	height: 28vw;
}

.scroll {
	width: 100%;
}

.scroll-item {
	width: 40vw;
}

#navigate {
	width: 40vw;
}
/* IE POLYFILL END */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	padding: 0;
	margin: 0;
}

:root {
	--carousel-width: 20em;
	--carousel-height: calc(calc(calc(9 / 16) * var(--carousel-width)));
}

.center {
	display: flex;
	justify-content: center;
}

.carousel {
	width: var(--carousel-width);
	height: var(--carousel-height);
	contain: strict;
	margin-top: 1vw;
	border-radius: 3vmin;
}

.scroll {
	display: flex;
	align-items: center;
	overflow-y: hidden;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	list-style: none;
}

.scroll::-webkit-scrollbar {
	display: none;
}

.scroll-item {
	width: var(--carousel-width);
}

.scroll-item>img {
	object-fit: contain;
	width: 100%;
	rgba(0, 0, 0, 0.2);
	border-radius: 1rem;
}

.scroll-item>img:active {
	cursor: grabbing;
	cursor: -webkit-grabbing;
}

.scroll-item-outer {
	margin: 1vw;
}

.scroll-item-outer:first-of-type {
	margin: 0;
}

@supports (scroll-snap-align: start) {
	.scroll {
		scroll-snap-type: x mandatory;
	}
	.scroll-item-outer {
		scroll-snap-align: center;
	}
}

@supports not (scroll-snap-align: start) {
	.scroll {
		-webkit-scroll-snap-type: mandatory;
		scroll-snap-type: mandatory;
		-webkit-scroll-snap-destination: 0 50%;
		scroll-snap-destination: 0 50%;
		-webkit-scroll-snap-points-x: repeat(100%);
		scroll-snap-points-x: repeat(100%);
	}
	.scroll-item-outer {
		scroll-snap-coordinate: 0 0;
	}
}

#navigate {
	display: flex;
	justify-content: space-around;
	margin: auto;
	width: var(--carousel-width);
	margin-top: 1vw;
}

#navigate a {
	text-decoration: none;
	color: #333;
	font-size: 1.2rem;
	background: #ddd;
	z-index: 1;
	line-height: 0.6rem;
	border-radius: 1rem;
	padding: 1rem;
	transition: box-shadow 0.5s;
}

#navigate a:hover {
	box-shadow: 0 0 2rem -6px;
}