@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


body {
	line-height: 1;
	font-family: YuGothic, "游ゴシック", sans-serif;
	font-weight: 500;
	-webkit-font-smoothing: subpixel-antialiased;
}


li {
	list-style-type: none;
}
a {
	text-decoration: none;
}
img {
	vertical-align: bottom;
}
em {
	font-style: normal;
}


h1,
h2 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}






@keyframes bg1 {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(-2960px);
	}
}
@keyframes fly1 {
	0% {
		transform: translate(0px, 0px);
	}
	100% {
		transform: translate(calc(100vw + 650px), calc((100vw + 650px) * -0.3639702342662));
		/* tan(20) */
	}
}
@keyframes label {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(10deg);
	}
	50% {
		transform: rotate(-10deg);
	}
}
@keyframes bounce1 {
	0% {
		height: 56px;
	}
	75% {
		height: 76px;
	}
	100% {
		height: 56px;
	}
}
@keyframes bounce2 {
	0% {
		transform: translateY(0px);
	}
	75% {
		transform: translateY(20px);
	}
	100% {
		transform: translateY(0px);
	}
}


@keyframes bg1_sp {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(-1480px);
	}
}
@keyframes fly1_sp {
	0% {
		transform: translate(0px, 0px);
	}
	100% {
		transform: translate(calc(100vw + 325px), calc((100vw + 325px) * -0.3639702342662));
		/* tan(20) */
	}
}
@keyframes bounce1_sp {
	0% {
		height: 33px;
	}
	75% {
		height: 45px;
	}
	100% {
		height: 33px;
	}
}
@keyframes bounce2_sp {
	0% {
		transform: translateY(0px);
	}
	75% {
		transform: translateY(12px);
	}
	100% {
		transform: translateY(0px);
	}
}




@media screen and (min-width: 769px) {
	body {
		width: 100vw;
		overflow-x: hidden;
		background: #fbfeff;
	}
	#wrap {
		width: 100vw;
		overflow: hidden;
	}

	#bg {
		position: absolute;
		width: 100vw;
		height: 900px;
		left: 0;
		top: 0;
		z-index: 1;
		background: url(../img/bg.jpg) 50% 0 no-repeat;
		background-size: cover;
	}



	main {
		position: relative;
		padding: 0 0 45px;
	}
	
	
	
	
	#cloud1 {
		position: absolute;
		width: 100%;
		height: 255px;
		left: 0;
		top: 775px;
		z-index: 5;
	}
	#cloud1 span {
		display: block;
		width: 5920px;
		height: 255px;
		background: url(../img/cloud1.png) 0 0 repeat-x;
		
		animation: bg1 100s linear infinite;
	}
	
	
	#cloud2 {
		position: absolute;
		width: 100%;
		height: 165px;
		left: 0;
		bottom: 0;
		z-index: 50;
	}
	#cloud2 span {
		display: block;
		width: 5920px;
		height: 165px;
		background: url(../img/cloud2.png) 0 0 repeat-x;
		
		animation: bg1 120s linear infinite;
	}
	
	
	
	
	
	
	
	
	

	#title {
		position: relative;
		height: 452px;
		z-index: 10;
		background: url(../img/title.png) 50% 50% no-repeat;
	}


	#content {
		position: relative;
		box-sizing: border-box;
		width: 900px;
		z-index: 10;
		margin: 0 auto;
		padding: 0 0 40px;
		background: #fff;
		border: 12px solid #fff;
		border-color: #00a7eb #073190 #073190 #00a7eb;
	}
	#content:before {
		content: "";
		position: absolute;
		display: block;
		width: 12px;
		height: 12px;
		right: -12px;
		top: -12px;
		z-index: 20;
		background: #00a7eb;
	}
	#content:after {
		content: "";
		position: absolute;
		display: block;
		width: 12px;
		height: 12px;
		left: -12px;
		bottom: -12px;
		z-index: 20;
		background: #073190;
	}







	#content h2 {
		height: 85px;
		margin: 34px 0 20px;
		background: url(../img/title_campaign.png) 50% 0 no-repeat;
	}


	#content section {
		width: 800px;
		margin: 0 auto;
	}
	
	#content .column {
		position: relative;
		padding: 30px 30px 24px;
		border-bottom: 2px solid #eee;
	}
	#content .column + .column {
	}
	#content h3 {
		margin: 0 0 22px;
		font-size: 26px;
		font-weight: bold;
		color: #073190;
	}
	#content article {
		color: #333;
		font-size: 16px;
		font-weight: bold;
		line-height: 1.9;
	}
	#content article p {
	}
	#content article p.note {
		padding-left: 1.2em;
		text-indent: -1.2em;
		font-size: 14px;
	}
	#content article p.note:before {
		content: "※";
		display: inline-block;
		width: 1.2em;
		text-indent: 0;
	}
	
	#content article li {
		padding-left: 1em;
		text-indent: -1em;
	}
	#content article li:before {
		content: "・";
		display: inline-block;
		width: 1em;
		text-indent: 0;
	}
	
	#content article a {
		color: #00a7eb;
		cursor: pointer;
		text-decoration: underline;
	}
	#content article a:hover {
		text-decoration: none;
	}
	
	
	figure.ticket {
		position: absolute;
		width: 363px;
		height: 266px;
		right: -94px;
		top: 50%;
		margin-top: -133px;
		background: url(../img/ticket.png) 0 0 no-repeat
	}
	
	
	





	#content nav {
		height: 96px;
	}
	#content nav a {
		display: block;
		height: 96px;
		line-height: 96px;
		text-align: center;
		color: #073190;
		font-size: 24px;
		font-weight: bold;
		text-decoration: none;
		cursor: pointer;
		
		transition: all 300ms ease-out;
	}
	
	
	#content nav a .less {
		display: none;
	}
	
	
	
	#content nav a em {
		position: relative;
		display: inline-block;
		width: 28px;
		height: 18px;
		margin: 0 0 0 12px;
		vertical-align: middle;
		background: url(../img/arrow.png) 50% 50% no-repeat;
		
		transform: translateY(-2px);
		transition: all 300ms ease-out;
	}
	#content nav a:hover {
		color: #7683b5;
	}
	#content nav a:hover em {
		opacity: 0.7;
	}
	
	
	#content .detail {
		height: 0;
		overflow: hidden;
		
		transition: height 600ms ease-out;
	}
	
	#content.opened	nav a .less {
		display: inline;
	}
	#content.opened	nav a .more {
		display: none;
	}
	
	#content.opened nav a em {
		transform: rotate(180deg);
	}
	
	
	

	#entry {
		position: relative;
		width: 652px;
		height: 224px;
		z-index: 50;
		margin: -50px auto 0;
	}
	#entry a {
		position: relative;
		display: block;
		height: 224px;
		background: url(../img/btn_entry.png) 0 0 no-repeat;
	}
	#entry a em {
		position: absolute;
		display: block;
		width: 38px;
		height: 34px;
		top: 34px;
		left: 467px;
		background: url(../img/icon_plane.png) 0 0 no-repeat;
		
		transition: transform 500ms ease-in-out;
	}
	#entry a:hover em {
		transform: translateX(40px);
	}


	.plane {
		position: absolute;
		width: 650px;
		height: 152px;
		z-index: 1000;
		left: -650px;
		top: 1400px;
		background: url(../img/plane.png) 0 0 no-repeat;
	}
	body.modern .plane {
		animation: fly1 5s linear 500ms;
	}


	body.ie .plane {
		transition: transform 5s linear 500ms;
	}
	


	#pagetop {
		position: fixed;
		width: 60px;
		height: 135px;
		right: 30px;
		bottom: 30px;
		z-index: 500;
	}
	#pagetop span {
		position: absolute;
		display: block;
		width: 100%;
		height: 56px;
		left: 0;
		top: 0;
		z-index: 10;
		background: url(../img/pagetop.png) 0 0 no-repeat;
	}
	#pagetop strong {
		position: absolute;
		display: block;
		width: 100%;
		height: 98px;
		left: 0;
		bottom: 0;
		z-index: 1;
	}
	#pagetop strong em {
		display: block;
		height: 98px;
		background: url(../img/pagetop.png) 0 100% no-repeat;
		transform-origin: 30px 21px;
	}
	
	#pagetop a:hover em {
		animation: label 500ms linear;
	}
	
	
	#pagetop a.active span {
		animation: bounce1 500ms ease-out;
	}
	#pagetop a.active strong {
		animation: bounce2 500ms ease-out;
	}
	
	
	
	#pagetop {
		opacity: 0;
		visibility: hidden;
		transition: opacity 300ms linear, visibility 300ms linear;
	}
	body.scrolled #pagetop {
		opacity: 1;
		visibility: visible;
	}
	
	
	
	
	/* ---------------------------------------------------------------------------------------------------- */
	/* グローバルフッター */
	
	#gheader {
		position: relative;
		height: 66px;
		background: #fff;
	}
	#gheader .inner {
		position: relative;
		max-width: 960px;
		margin: 0 auto;
	}
	#gheader .tsite {
		position: absolute;
		left: 0;
		top: 18px;
	}
	#gheader .tsite img {
		width: 348px;
		height: 29px;
	}
	
	#gheader .logo {
		position: absolute;
		right: 0;
		top: 13px;
	}
	
	

	/* ---------------------------------------------------------------------------------------------------- */
	/* グローバルフッター */
	
	#gfooter {
		position: relative;
		z-index: 100;
		text-align: center;
		font-weight: normal;
		background: #fff;
	}
	
	#gfooter .inner {
		max-width: 890px;
		margin: 0 auto;
		padding: 28px 0 20px;
	}
	
	#gfooter .tpoint {
		height: 28px;
		margin-bottom: 20px;
	}
	
	#gfooter ul {
		font-size:0;
	}
	
	#gfooter li {
		display: inline-block;
		font-size: 12px;
		margin: 0 0 10px 10px;
		padding: 0 10px 0 0;
		border-right: 1px solid #d1d1d1;
	}
	
	#gfooter li:first-child { margin-left: 0;}
	#gfooter li:nth-of-type(4) { padding-right: 0; border-right: 0;}
	#gfooter li:nth-of-type(5) { margin-left: 0; }
	#gfooter li:last-child { padding-right: 0; border-right: 0; }
	
	#gfooter small {
		display: block;
		padding: 12px 0;
		color: #fff;
		font-size: 12px;
		line-height: 1;
		background: #000;
	}
	
	#gfooter .inner a {
		color: #1a1a1a;
		text-decoration: none;
		
		-ms-transition:     opacity 400ms linear;
		-webkit-transition: opacity 400ms linear;
		-moz-transition:    opacity 400ms linear;
		transition:         opacity 400ms linear;
	}
	
	#gfooter .inner a:hover {
		opacity: .7;
	}
}





@media screen and (min-width: 768px) and (max-width: 980px) {
	#gheader .tsite {
		left: 20px;
	}
	#gheader .logo {
		right: 20px;
	}
	
	#content {
		width: auto;
		margin-left: 40px;
		margin-right: 40px;
	}
	#content section {
		width: auto;
		margin-left: 20px;
		margin-right: 20px;
	}
	#content article {
		font-size: 15px;
	}
}


@media screen and (max-width: 768px) {
	
	br.soft {
		display: none;
	}
	
	a {
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	body {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
	}
	
	
	
	
	
	body {
		width: 100vw;
		overflow-x: hidden;
		background: #fbfeff;
	}
	body.ie {
		overflow-x: hidden;
	}
	#wrap {
		width: 100vw;
		overflow: hidden;
	}

	#bg {
		position: absolute;
		width: 100vw;
		height: 106.66vw;
		left: 0;
		top: 0;
		z-index: 1;
		background: url(../img/bg_sp.jpg) 50% 0 no-repeat;
		background-size: cover;
	}



	main {
		position: relative;
		padding: 0 0 75px;
	}
	
	
	
	#cloud1 {
		position: absolute;
		width: 100%;
		height: 128px;
		left: 0;
		top: calc(106.66vw - 60px);
		z-index: 5;
	}
	#cloud1 span {
		display: block;
		width: 2960px;
		height: 128px;
		background: url(../img/cloud1.png) 0 0 repeat-x;
		background-size: auto 128px;
		
		animation: bg1_sp 100s linear infinite;
	}
	
	
	#cloud2 {
		position: absolute;
		width: 100%;
		height: 128px;
		left: 0;
		bottom: 0;
		z-index: 50;
	}
	#cloud2 span {
		display: block;
		width: 2960px;
		height: 128px;
		background: url(../img/cloud2.png) 0 0 repeat-x;
		background-size: auto 128px;
		
		animation: bg1_sp 120s linear infinite;
	}
	
	
	
	
	
	
	
	
	

	#title {
		position: relative;
		width: 315px;
		height: 282px;
		z-index: 10;
		margin: 0 auto;
		background: url(../img/title.png) 50% 50% no-repeat;
		background-size: 315px 175px;
	}


	#content {
		position: relative;
		box-sizing: border-box;
		z-index: 10;
		margin: 0 30px;
		padding: 0 0 20px;
		background: #fff;
		border: 6px solid #fff;
		border-color: #00a7eb #073190 #073190 #00a7eb;
	}
	#content:before {
		content: "";
		position: absolute;
		display: block;
		width: 6px;
		height: 6px;
		right: -6px;
		top: -6px;
		z-index: 20;
		background: #00a7eb;
	}
	#content:after {
		content: "";
		position: absolute;
		display: block;
		width: 6px;
		height: 6px;
		left: -6px;
		bottom: -6px;
		z-index: 20;
		background: #073190;
	}







	#content h2 {
		height: 42px;
		margin: 18px 0 11px;
		background: url(../img/title_campaign.png) 50% 0 no-repeat;
		background-size: auto 42px;
	}


	#content section {
		margin: 0 11px;
	}
	
	#content .column {
		position: relative;
		padding: 15px 12px 15px;
		border-bottom: 2px solid #eee;
	}
	#content .column + .column {
	}
	#content h3 {
		margin: 0 0 11px;
		font-size: 14px;
		font-weight: bold;
		color: #073190;
	}
	#content article {
		color: #333;
		font-size: 12px;
		font-weight: bold;
		line-height: 1.6;
	}
	#content article br {
		display: none;
	}
	#content article p.note {
		margin-top: 3px;
		padding-left: 1.1em;
		text-indent: -1.1em;
		font-size: 10px;
	}
	#content article p.note:before {
		content: "※";
		display: inline-block;
		width: 1.1em;
		text-indent: 0;
	}
	
	#content article li {
		padding-left: 1em;
		text-indent: -1em;
	}
	#content article li:before {
		content: "・";
		display: inline-block;
		width: 1em;
		text-indent: 0;
	}
	
	#content article a {
		color: #00a7eb;
		cursor: pointer;
		text-decoration: underline;
	}
	#content article a.touched {
		text-decoration: none;
	}
	
	
	figure.ticket {
		width: 236px;
		height: 194px;
		margin: 0 auto -30px;
		background: url(../img/ticket_sp.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	
	
	





	#content nav {
		height: 60px;
	}
	#content nav a {
		display: block;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #073190;
		font-size: 14px;
		font-weight: bold;
		text-decoration: none;
		cursor: pointer;
		
		transition: all 300ms ease-out;
	}
	
	
	#content nav a .less {
		display: none;
	}
	
	
	
	#content nav a em {
		position: relative;
		display: inline-block;
		width: 14px;
		height: 9px;
		margin: 0 0 0 6px;
		vertical-align: middle;
		background: url(../img/arrow.png) 50% 50% no-repeat;
		background-size: 100% auto;
		
		transform: translateY(-1px);
		transition: all 300ms ease-out;
	}
	#content nav a.touched {
		color: #7683b5;
	}
	#content nav a.touched em {
		opacity: 0.7;
	}
	
	
	#content .detail {
		height: 0;
		overflow: hidden;
		
		transition: height 600ms ease-out;
	}
	
	#content.opened	nav a .less {
		display: inline;
	}
	#content.opened	nav a .more {
		display: none;
	}
	
	#content.opened nav a em {
		transform: rotate(180deg);
	}
	
	
	

	#entry {
		position: relative;
		width: 281px;
		height: 112px;
		z-index: 50;
		margin: -28px auto 0;
	}
	#entry a {
		display: block;
		height: 112px;
		background: url(../img/btn_entry_sp.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	#entry a em {
		position: absolute;
		display: block;
		width: 19px;
		height: 17px;
		top: 17px;
		left: 209px;
		background: url(../img/icon_plane.png) 0 0 no-repeat;
		background-size: 19px 17px;
		
		transition: transform 500ms ease-in-out;
	}
	#entry a:hover em {
		transform: translateX(20px);
	}




	.plane {
		position: absolute;
		width: 325px;
		height: 76px;
		z-index: 1000;
		left: -325px;
		top: 1000px;
		background: url(../img/plane.png) 0 0 no-repeat;
		background-size: 325px 76px;
	}

	body.modern .plane {
		animation: fly1 5s linear 500ms;
	}


	body.ie .plane {
		transition: transform 5s linear 500ms;
	}




	#pagetop {
		position: fixed;
		width: 35px;
		height: 79px;
		right: 8px;
		bottom: 8px;
		z-index: 500;
	}
	#pagetop span {
		position: absolute;
		display: block;
		width: 100%;
		height: 33px;
		left: 0;
		top: 0;
		z-index: 10;
		background: url(../img/pagetop_sp.png) 0 0 no-repeat;
		background-size: 100% auto;
	}
	#pagetop strong {
		position: absolute;
		display: block;
		width: 100%;
		height: 57px;
		left: 0;
		bottom: 0;
		z-index: 1;
	}
	#pagetop strong em {
		display: block;
		height: 57px;
		background: url(../img/pagetop_sp.png) 0 100% no-repeat;
		background-size: 100% auto;
		transform-origin: 17px 13px;
	}
	
	#pagetop a.touched em {
		animation: label 500ms linear;
	}
	
	
	#pagetop a.active span {
		animation: bounce1_sp 500ms ease-out;
	}
	#pagetop a.active strong {
		animation: bounce2_sp 500ms ease-out;
	}
	
	
	
	#pagetop {
		opacity: 0;
		visibility: hidden;
		transition: opacity 300ms linear, visibility 300ms linear;
	}
	body.scrolled #pagetop {
		opacity: 1;
		visibility: visible;
	}
	
	
	
	
	
	
	
	
	
	/* ---------------------------------------------------------------------------------------------------- */
	/* グローバルフッター */
	
	#gheader {
		position: relative;
		height: 40px;
		background: #fff;
	}
	#gheader .inner {
		position: relative;
	}
	#gheader .tsite {
		position: absolute;
		left: 12px;
		top: 11px;
	}
	#gheader .tsite img {
		width: 204px;
		height: 17px;
	}
	
	#gheader .logo {
		position: absolute;
		right: 12px;
		top: 8.5px;
	}
	#gheader .logo img {
		width: 116px;
		height: 19px;
	}
	
	

	/* ---------------------------------------------------------------------------------------------------- */
	/* グローバルフッター */

	#gfooter{
		position: relative;
		z-index: 90;
		margin: 0;
		text-align: center;
		font-weight: normal;
		background: #fff;
	}
	
	#gfooter .inner{
		width: auto;
		margin: 0 auto;
		padding: 30px 15px 15px;
	}
	
	#gfooter .tpoint{
		height: 20px;
		margin-bottom: 30px;
	}
	
	#gfooter ul{
		font-size: 0;
	}
	
	#gfooter li {
		display: inline-block;
		font-size: 12px;
		margin: 0 0 10px 10px;
		padding: 0 10px 0 0;
		border-right: 1px solid #d1d1d1;
	}
	
	#gfooter li:first-child{ margin-left: 0; }
	#gfooter li:nth-of-type(4){ padding-right: 0; border-right: 0; }
	#gfooter li:nth-of-type(5){ margin-left: 0; }
	#gfooter li:last-child{ padding-right: 0; border-right: 0; }
	
	#gfooter small{
		display: block;
		padding:12px 0; 
		font-size: 12px;
		color: #fff;
		background: #000;
	}
	
	#gfooter .inner a {
		color: #1a1a1a;
		text-decoration: none;
	}
}