@charset 'UTF-8';

/*---------------------------------------------

style CSS for 

v.1.0.0
at 20.10.3

---------------------------------------------*/
@font-face {
	font-family: 'Franklin HeaIta';
	src: url(../fonts/FuturaRoundCond-Medium.woff);
}

/* initialize */
@media all,initialize {
	body {
		background-color: #eee;
		color: #444;
	}
}

/* utility */
@media all,utility {
	.pc {
		display: block;
	}
	.sp {
		display: none;
	}
	.ut-futura {
		font-family: 'Franklin HeaIta', sans-serif;
		letter-spacing: .125em;
	}
	.ut-flexArea {
		display: flex;
	}
	.ut-flexArea.-fwWrap {
		flex-wrap: wrap;
	}
	.ut-flexArea.-jcBetween {
		justify-content: space-between;
	}
	.ut-flexArea.-jcCenter {
		justify-content: center;
	}
	.ut-flexArea.-aiCenter {
		align-items: center;
	}
	.ut-width {
		width: 100%;
		margin: auto;
		padding: 0 20px;
	}
	.ut-width .ut-width {
		padding: 0;
	}
	.ut-width.-wNormal {
		max-width: 1040px;
	}
	.ut-width.-wMiddle {
		max-width: 830px;
	}
	.ut-width.-wSmall {
		max-width: 660px;
	}
}

/* utility */
@media all,utility {
}

/* standard */
@media all,standard {
	.page-header {
		background-color: #eee;
		background-image: url(../img/bg_orange.png), url(../img/bg_green.png), url(../img/bg_yellow.png), url(../img/bg_purple.png), url(../img/bg_blue.png);
		background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
		background-position: bottom 16px center, bottom 12px center, bottom 8px center, bottom 4px center, bottom center;
		padding: 4em 0 8em;
		min-height: calc(100vh - 4em);
/*
		width: 100%;
		position: fixed;
		top: 0;
	}
	.container {
		margin-top: 100vh
*/
	}
	.page-header>.title {
		font-size: 36px;
		color: #666;
	}
	.page-header>.nav {
		font-size: 24px;
		color: #666;
		line-height: 1.5;
	}
	.page-footer {
		padding-top: 8em;
		padding-bottom: 8em;
		font-family: 'Franklin HeaIta', sans-serif;
	}
	.page-footer>* {
		line-height: 1.5;
		font-size: 24px;
	}
	.page-header>.globalNav-menu {
		margin-top: 1em;
	}
	.page-footer>.colophone-block {
		margin-top: 1em;
	}
	.globalNav-menu>.list>.item {
		display: flex;
		align-items: center;
	}
	.globalNav-menu>.list>.item::before {
		content: '▼';
		font-size: 50%;
		padding-right: .5em;
	}
	.globalNav-menu>.list>.item.-misc2006::before {
		color: #f39939;
	}
	.globalNav-menu>.list>.item.-misc2009::before {
		color: #90c53b;
	}
	.globalNav-menu>.list>.item.-wh2008::before {
		color: #eddc44;
	}
	.globalNav-menu>.list>.item.-oakley2008::before {
		color: #ce93bf;
	}
	.globalNav-menu>.list>.item.-misc2013::before {
		color: #65aadd;
	}

	.section-block {
		padding-top: 8em;
		padding-bottom: 8em;
		background-repeat: repeat-x;
		background-position: bottom center;
	}
	.section-block.-misc2006 {
		background-image: url(../img/bg_orange.png);
	}
	.section-block.-misc2009 {
		background-image: url(../img/bg_green.png);
	}
	.section-block.-wh2008 {
		background-image: url(../img/bg_yellow.png);
	}
	.section-block.-oakley2008 {
		background-image: url(../img/bg_purple.png);
	}
	.section-block.-misc2013 {
		background-image: url(../img/bg_blue.png);
	}

	.section-header>.title {
		font-size: 48px;
		font-weight: normal;
		color: #666;
		line-height: 1;
		padding-bottom: .25em
	}
	.section-header>.content {
	}
	.section-body>.inner {
		display: flex;
		flex-wrap: wrap;
		margin: -10px;
	}
	.section-body>.inner>.item {
		flex: 0 1 25%;
		padding: 10px
	}
	.modal-block>.inner {
		position: relative;
		display: block;
		width: 100%;
		padding-top: 100%;
	}
	.modal-block>.inner>.title {
		position: absolute;
		bottom: 0;
		z-index: 2;
		font-size: 14px;
		background-color: rgba(0,0,0,.4);
		color: #eee;
		padding: 5px;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	.modal-block>.inner>.content {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
		overflow: hidden;
	}
	.modal-block>.inner>.content>.image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top left;
	}
	.modal-block.-koishikute>.inner>.content>.image {
	}

	
	
	.section-block>.section-body {
		margin-top: 4em
	}
	
	
	
	#page-top {
		position: fixed;
		z-index: 900;
		bottom: 0;
		right: 0;
		width: 100%;
		text-align: center;
		background-color: rgba(0,0,0,.4);
		color: #eee;
	}
	#page-top>a {
		display: block;
		padding: 20px;
		width: 100%;
		height: 100%;
	}

	
	
}


/* -- -- 768px -- -- */

/* utility */
@media utility, print, screen and (max-width: 768px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.section-body>.inner {
		margin: -10px;
	}
	.section-body>.inner>.item {
		flex: 0 1 50%;
		padding: 10px
	}

}
@media utility, print, screen and (max-width: 480px) {
	.section-body>.inner {
		margin: -5px;
	}
	.section-body>.inner>.item {
		flex: 0 1 50%;
		padding: 5px
	}
	.modal-block>.inner>.title {
		font-size: 12px;
	}

}