@import url("/um/v7/css/reset.css");
@import url("keyframes.css");
@import url("https://use.typekit.net/nsb5cpd.css");
@import url("/um/library/css/modal.css");

div#bn_super {
	border-bottom:1px solid #c0c4ce;
}


/* =================================
	Web Fonts
================================= */
div.cover {
	/**/
	font-family: ten-mincho-text, serif;
	font-weight: 400;
	font-style: normal;
	/**/
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	overflow:hidden;
}
div.unit h2:Before,
div.nextoa section h3 > span:first-child,
div.archives article div.inner ul li a > span,
div.sns h3 span {
	font-family: hypatia-sans-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
}


/* =================================
	CSS
================================= */

/* link */
a:link {
	text-decoration:underline;
	color:#0085bb;
}
a:visited {
	text-decoration:none;
	color:#0085bb;
}
a:active {
	text-decoration:none;
	color:#0085bb;
}
a:hover {
	text-decoration:underline;
	color:#0085bb;
}

.xxl {
	font-size:150%;
}
.xl {
	font-size:125%;
}
.l {
	font-size:112.5%;
}
.s {
	font-size:83%;
}
.xs {
	font-size:75%;
}
.xxs {
	font-size:62.5%;
}

@media all and (max-width: 374px) {
.xl, .xxl {
	font-size:112.5%;
}
.s, .xs {
	font-size:62.5%;
}
}
@media all and (min-width: 768px) {
.br-smp {
	display:none;
}
}
.ff {
	font-family:serif;
}
.lazy {
	display:block;
	position:relative;
}
.wbr {
	white-space: nowrap;
	display: inline-block;
}


/*	copyright
============================== */
div.copyright p {
	line-height:1.25;
	text-align:center;
}
div.copyright p > small {
	display:block;
}
@media all and (min-width: 768px) {
	div.copyright p {
		font-size:75%;
	}
	div.copyright p > small {
		padding:40px 0 40px;
	}
	div.copyright p a:hover {
		text-decoration:none;
	}
}
@media all and (max-width: 767px) {
	div.copyright p {
		font-size:62.5%;
	}
	div.copyright p > small {
		padding:30px 12px 30px;
	}
}


/*	background
============================== */
body {
	color:#333;
	text-align:center;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust: 100%;
	font-family:"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}
div.bg {
	background-image: -webkit-gradient(linear, center top, center bottom, from(#90eaff), color-stop(0.2, #d6faf0), color-stop(0.4, #f4ffac), color-stop(0.6, #ffcce6), color-stop(0.8, #90eaff), to(#f4ffac));
	background-image: linear-gradient(#90eaff, #d6faf0 20%, #f4ffac 40%, #ffcce6 60%, #90eaff 80%, #f4ffac);
}


div.fix-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	background-repeat:no-repeat;
	background-position:center center;
	background-size: cover;
	z-index: -1;
	background-color:#fff;
}
div.fix-bg span {
	display:block;
	position:absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
/*	background-color:hsla(344,100%,83%,0.6);*/
}
div.cover {
}
@media all and (min-width: 768px) {
div.fix-bg {
}
div.cover {
}
}
@media all and (max-width: 767px) {
div.fix-bg {
}
div.cover {
	min-width:320px;
}
}



/*	YouTube
============================== */
div.mov-inner {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-color:#000;
	background-size:cover;
}
div.mov-inner iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 768px) {
div.mov-outer {
	margin:0 auto;
	max-width:800px;
}
}
@media all and (max-width: 767px) {
div.mov-outer {
	padding:0 20px;
}
}



/*	.pagetop
============================== */
div.pagetop {
	position:fixed;
	transition: right ease 1s;
	display:none;
	z-index:2;
}
div.pagetop a {
	display:block;
	background-image:url(../img/pagetop.png?0);
	background-size:cover;
	text-indent:110%;white-space:nowrap;overflow:hidden;
	background-repeat:no-repeat;
	background-position:right bottom;
}
@media all and (min-width: 768px) {
div.pagetop {
	bottom:20px;
}
div.pagetop-on {
	right:0;
}
div.pagetop-off {
	right:-104px;
}
div.pagetop a {
	width:100px;
	height:85px;
}
}
@media all and (max-width: 767px) {
div.pagetop {
	bottom:72px;
}
div.pagetop-on {
	right:0;
}
div.pagetop-off {
	right:-70px;
}
div.pagetop a {
	width:68px;
	height:58px;
}
}




/*	.waves
============================== */
.waves {
	position:relative;
	width: 100%;
	margin-bottom:-7px; /*Fix for safari gap*/
}
@media all and (min-width: 768px) {
.waves {
	height:80px;
	min-height:80px;
}
}
@media all and (max-width: 767px) {
.waves {
	height:40px;
	min-height:40px;
}
}
.parallax > use {
	animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 7s;
}
.parallax > use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 10s;
}
.parallax > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 13s;
}
.parallax > use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 20s;
}
@keyframes move-forever {
	0% {
		transform: translate3d(-90px,0,0);
	}
	100% { 
		transform: translate3d(85px,0,0);
	}
}


/*	.header
============================== */
div.header {
	background-color:#fff;
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), to(hsla(191,100%,78%,0.3)));
	background-image: linear-gradient(transparent, hsla(191,100%,78%,0.3));
}
div.header,
div.header header {
	position:relative;
}
div.header header h1 {
	text-align:left;
}
div.header header h1 span {
	display:block;
}
div.header header h1 > span {
	position:relative;
	height:0;
	padding-top:76.9230769230769%;
	background-size:cover;
}
div.header header h1 span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}
div.header header h1 span span {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
div.header header p.oa {
	margin-bottom:2em;
}
div.header header p.oa > span {
	display:inline-block;
	font-weight:700;
	line-height:1.5;
	background-image: -webkit-gradient(linear, center left, center right, from(#004e8c), color-stop(0.5, #66b2cc), to(#004e8c));
	background-image: linear-gradient(to right, #004e8c, #66b2cc 50%, #004e8c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
div.header header p.copy {
	color:#2f788e;
	line-height:1.5;
}
@media all and (min-width: 768px) {
div.header {
}
div.header header {
	max-width:1080px;
	margin:0 auto;
	padding:30px 0;
}
div.header header h1 {
	width:380px;
	margin:0 auto 30px;
}
div.header header p.oa > span {
	font-size:200%;
}
div.header header p.copy {
	font-size:175%;
}
}
@media all and (max-width: 767px) {
div.header header {
	padding:20px 0;
}
div.header header h1 {
	width:60%;
	margin:0 auto 15px;
}
div.header header p.oa > span {
	font-size:5vw;
}
div.header header p.copy {
	font-size:4.5vw;
}
}


/*	.map
============================== */
div.map > div {
	position:relative;
	height:0;
	padding-top:56.25%;
	/*
	background-size:cover;
	background-image:url(../img/map.png);
	*/
}
div.map > div > div,
div.map > div > div:before {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
div.map > div > div:before {
	content:"";
	display:block;
	background-image: -webkit-gradient(linear, center left, center right, from(#004e8c), to(#66b2cc));
	background-image: linear-gradient(to right, #004e8c, #66b2cc);
	-webkit-mask-image: url(../img/map.png?0);
	mask-image: url(../img/map.png?0);
	-webkit-mask-size: cover;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
div.map > div > div p {
	position: absolute;
	line-height:1.5;
	color:#2f788e;
}
@media all and (min-width: 768px) {
div.map {
	width:640px;
	margin:0 auto;
}
div.map > div > div p {
	left:10%;
	bottom:15%;
	font-size:125%;
}
}
@media all and (max-width: 767px) {
div.map {
	padding:0 20px;
}
div.map > div > div p {
	left:5%;
	bottom:10%;
	font-size:3.25vw;
}
}

/*	.unit
============================== */
div.unit {
	text-align:left;
/*	-webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); */
}

div.unit h2 {
	text-align:center;
	line-height:1.25;
	background-image: -webkit-gradient(linear, center left, center right, from(#004e8c), to(#66b2cc));
	background-image: linear-gradient(to right, #004e8c 40%, #66b2cc 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
div.unit h2:Before {
	display:block;
}
div.nextoa h2:Before {
	content:"Next OA";
}
div.archives h2:Before {
	content:"Archives";
}
div.navigator h2:Before {
	content:"Navigator";
}
div.sns h2:Before {
	content:"SNS";
}
div.unit h2 span {
	display:inline-block;
	font-weight:normal;
}
div.nextoa h2 span,
div.sns h2 span {
	display:none;
}
@media all and (min-width: 768px) {
div.unit {
	padding:50px 0;
}
div.unit h2 {
	margin-bottom:2.5em;
}
div.unit h2:before {
	font-size:400%;
}
div.unit h2 > span {
	font-size:200%;
}
div.unit article {
	margin:0 6vw;
}
div.unit article > div.inner {
	max-width:980px;
	margin:0 auto;
	padding:50px;
	border:2px solid #fff;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
}
@media all and (max-width: 767px) {
div.unit {
	padding:30px 0 60px;
}
div.unit h2 {
	margin-bottom:1.5em;
}
div.unit h2:before {
	font-size:12vw;
}
div.unit h2 > span {
	font-size:6vw;
}
}


/*	figure
============================== */
div.unit figure > span, div.unit figure span img {
	display:block;
}
div.unit figure > span {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-size:cover;
	background-position:center center;
}
div.navigator figure > span {
	padding-top:142.8703703703704%;
}
div.unit figure span.lazy-done {
	-webkit-animation: fadeIn 800ms;
	animation: fadeIn 800ms;
}
div.unit figure span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 768px) {
}
@media all and (max-width: 767px) {
}
@media print {
div.unit figure {
	display:none;
}
}


/*	.nextoa
============================== */
div.nextoa {
/*	background-color:#f4ffac;
	background-image: -webkit-gradient(linear, center top, center bottom, from(#90eaff), color-stop(0.5, #d6faf0), to(#f4ffac));
	background-image: linear-gradient(#90eaff, #d6faf0 50%, #f4ffac); */
}
div.nextoa p.copy {
	line-height:1.5;
	margin-bottom:1em;
}
div.nextoa section h3 {
	color:#2f788e;
	text-align:center;
	line-height:1.5;
	margin-bottom:1em;
}
div.nextoa section h3 > span {
	display:block;
}
div.nextoa section h3 > span:first-child {
}
div.nextoa section p.txt {
	text-align:center;
	line-height:1.5;
}
@media all and (min-width: 768px) {
div.nextoa p.copy {
	font-size:200%;
}
div.nextoa section h3 {
	font-size:200%;
}
div.nextoa section figure {
	margin-bottom:40px;
}
div.nextoa section figure span.lazy-done {
	-webkit-box-shadow:20px 20px 0 0 hsla(0,0%,100%,.5);
	box-shadow:20px 20px 0 0 hsla(0,0%,100%,.5);
}
div.nextoa section p.txt {
	font-size:125%;
}
}
@media all and (max-width: 767px) {
div.nextoa p.copy {
	font-size:4vw;
}
div.nextoa section h3 {
	font-size:5vw;
}
div.nextoa section figure {
	margin-bottom:20px;
}
div.nextoa section figure span.lazy-done {
	-webkit-box-shadow:10px 10px 0 0 hsla(0,0%,100%,.5);
	box-shadow:10px 10px 0 0 hsla(0,0%,100%,.5);
}
div.nextoa section p.txt {
	font-size:100%;
}
div.nextoa section {
	padding:0 20px;
}
}

/*	.archives
============================== */
div.archives {
/*	background-image: -webkit-gradient(linear, center top, center bottom, from(#f4ffac), to(#ffcce6));
	background-image: linear-gradient(#f4ffac, #ffcce6); */
}
div.archives article div.inner ul {
	display:flex;
	flex-wrap:wrap;
}
div.archives article div.inner ul li {
}
div.archives article div.inner ul li a {
	text-decoration:none;
}
div.archives article div.inner ul li a figure {
	margin-bottom:15px;
}
div.archives article div.inner ul li a,
div.archives article div.inner ul li a figure > span,
div.archives article div.inner ul li a > span,
div.archives article div.inner ul li b {
	display:block;
}
div.archives article div.inner ul li a > span,
div.archives article div.inner ul li b {
	text-align:center;
	line-height:1.5;
}
div.archives article div.inner ul li a figure > span.lazy-done {
	-webkit-box-shadow:6px 6px 0 0 hsla(0,0%,100%,.8);
	box-shadow:6px 6px 0 0 hsla(0,0%,100%,.8);
}
@media all and (min-width: 768px) {
div.archives article div.inner ul {
	gap:40px;
}
div.archives article div.inner ul li {
	width:calc((100% - 40px*2)/3);
}
div.archives article div.inner ul li a > span,
div.archives article div.inner ul li a > b {
	font-size:112.5%;
}
}
@media all and (max-width: 767px) {
div.archives article div.inner {
	padding:0 20px;
}
div.archives article div.inner ul {
	gap:20px;
}
div.archives article div.inner ul li {
	width:calc((100% - 20px)/2);
}
div.archives article div.inner ul li a > span,
div.archives article div.inner ul li a > b {
	font-size:87.5%;
}
}


/*	.sns
============================== */
div.sns {
/*	background-image: -webkit-gradient(linear, center top, center bottom, from(#90eaff), to(#f4ffac));
	background-image: linear-gradient(#90eaff, #f4ffac); */
}
div.tw-inner {
}
div.sns h3 {
	color:#2f788e;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	text-align:center;
	gap:2px;
	margin-bottom:1.5em;
}
div.sns h3:before {
	content:"";
	display:inline-block;
	width:60px;
	height:60px;
	background-color:#2f788e;
	/*
	background-size:300% 300%;
	background-image:url(/um/img/sns_logos_blk.svg);
	*/
	-webkit-mask-image: url(/um/img/sns_logos_blk.svg);
	mask-image: url(/um/img/sns_logos_blk.svg);
	-webkit-mask-size: 300% 300%;
	mask-size: 300% 300%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
div.sns h3 span {
	display:inline-block;
	line-height:1.25;
}
@media all and (min-width: 768px) {
div.sns h3 span {
	font-size:250%;
}
div.tw-inner {
	max-width:720px;
	margin:0 auto;
}
}
@media all and (max-width: 767px) {
div.sns h3 span {
	font-size:8vw;
}
div.tw-inner {
	padding:0 28px;
}
}
/*	iframe.twitter-timeline
============================== */
iframe#twitter-widget-0 {
	background-color:#fff;
}
@media all and (min-width: 768px) {
iframe#twitter-widget-0 {
    height:500px !important;
}
}
@media all and (max-width: 767px) {
iframe#twitter-widget-0 {
    height:500px !important;
}
}


div.recta {
/*	background-color:#f4ffac; */
	padding:30px 0;
}
div.spot {
/*	background-color:#f4ffac; */
	padding:30px 0;
}


/*	.navigator
============================== */
div.navigator {
/*	background-color:#90eaff;
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ffcce6), to(#90eaff));
	background-image: linear-gradient(#ffcce6, #90eaff); */
}
div.navigator > article > div.inner > section h3,
div.navigator > article > div.inner > section p {
	line-height:1.5;
}
div.navigator > article > div.inner > section h3 {
	margin-bottom:0.5em;
}
div.navigator > article > div.inner > section h3 span {
	letter-spacing:0.2em;
}
@media all and (min-width: 768px) {
div.navigator > article > div.inner {
	display:flex;
	flex-direction:row-reverse;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}
div.navigator > article > div.inner > figure {
	width:35%;
}
div.navigator > article > div.inner > figure span.lazy-done {
	-webkit-box-shadow:20px 20px 0 0 hsla(0,0%,100%,.5);
	box-shadow:20px 20px 0 0 hsla(0,0%,100%,.5);
}
div.navigator > article > div.inner > section {
	width:60%;
	position:relative;
}
div.navigator > article > div.inner > section h3 {
	position:relative;
}
div.navigator > article > div.inner > section h3 span {
	color:#2f788e;
	font-size:225%;
	position:relative;
	z-index:1;
}

div.navigator > article > div.inner > section h3:after {
	content:"NAOMI TRAUDEN";
	font-family: hypatia-sans-pro, sans-serif;
	font-weight: 400;
	color:hsla(193,50%,37%,0.3);
	display:block;
	font-size:275%;
	position:absolute;
	top:-60%;
	opacity:0.6;
}
div.navigator > article > div.inner > section p {
	font-size:125%;
	line-height:2;
}
}
@media all and (max-width: 767px) {
div.navigator > article > div.inner {
	padding-right:20px;;
}
div.navigator > article > div.inner > figure {
	position:relative;
	z-index:1;
	margin-left:30%;
	width:70%;
}
div.navigator > article > div.inner > section {
	color:#fff;
	background-color:hsla(197,100%,36%,0.7);
	padding:100px 20px 20px;
	margin-top:-80px;
	margin-right:20%;
	position:relative;
	text-align:center;
}

div.navigator > article > div.inner > section:after {
	content:"NAOMI TRAUDEN";
	font-family: hypatia-sans-pro, sans-serif;
	font-weight: 400;
	display:inline-block;
	font-size:8vw;
	opacity:0.2;
	position:absolute;
	left:0;
	top:80px;
}

div.navigator > article > div.inner > section h3 {
	font-size:150%;
}
div.navigator > article > div.inner > section p {
	font-size:100%;
}
}



/*	sns icons
============================== */
div.sns-icons {
	background-color:#90eaff;
}
div.sns-icons > aside {
	display:table;
	margin:0 auto;
}
div.sns-icons > aside > div {
	display:table-cell;
	width:50%;
	vertical-align:middle;
}
div.sns-icons > aside > div:first-child h2,
div.sns-icons > aside > div:first-child p {
	text-align:center;
	line-height:1.5;
}
div.sns-icons ul.icons li span, div.sns-icons ul.icons li a {
	display:block;
}
div.sns-icons ul {
	text-align:left;
	width:100%;
}
div.sns-icons ul.icons li {
	width:33.333333333333333%;
	float:left;
}
div.sns-icons ul.icons li span a {
	position:relative;
	height:0;
	padding-top:100%;
	overflow:hidden;
	border-radius:50% 50%;
}
div.sns-icons ul.icons li span a span {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	text-indent:110%;white-space:nowrap;overflow:hidden;
	background-size:300% 300%;
	background-image:url(/um/img/sns_logos.svg);
}
div.sns-icons ul.icons li.tw span a span {
	background-color:#1da1f2;
	background-position:left top;
}
div.sns-icons ul.icons li.fb span a span {
	background-color:#1877f2;
	background-position:center bottom;
}
div.sns-icons ul.icons li.ln span a span {
	background-color:#00b900;
	background-position:right top;
}
div.sns-icons ul.icons li.ig span a span {
	background-color:#cf2e92;
	background-position:center center;
}
div.sns-icons ul.icons li.yt span a span {
	background-color:#da1725;
	background-position:left center;
}
div.sns-icons ul.icons li.tt span a span {
	background-color:#000;
	background-position:right bottom;
}

@media all and (min-width: 768px) {
div.sns-icons {
	padding:25px 0;
}
div.sns-icons > aside {
	width:540px;
}
div.sns-icons > aside > div:first-child h2 {
	font-size:125%;
}
div.sns-icons > aside > div:first-child p {
	font-size:83%;
}
div.sns-icons ul.icons li:nth-child(3n-2) > span {
	margin-right:12px;
}
div.sns-icons ul.icons li:nth-child(3n-1) > span {
	margin-left:6px;
	margin-right:6px;
}
div.sns-icons ul.icons li:nth-child(3n) > span {
	margin-left:12px;

}
}
@media all and (max-width: 767px) {
div.sns-icons {
	padding:15px 0;
}
div.sns-icons > aside {
	width:80%;
}
div.sns-icons > aside > div:first-child h2 {
	font-size:3vw;
}
div.sns-icons > aside > div:first-child p {
	font-size:2vw;
}
div.sns-icons ul.icons li:nth-child(3n-2) > span {
	margin-right:10px;
}
div.sns-icons ul.icons li:nth-child(3n-1) > span {
	margin-left:5px;
	margin-right:5px;
}
div.sns-icons ul.icons li:nth-child(3n) > span {
	margin-left:10px;

}
}