/* ::::: Init ::::: */

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

*{
	margin: 0;
	border: 0;
	text-decoration: none;
	line-height: 1;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	border-collapse:collapse;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

html {
	background-color: #fff;
}

body {
	background-color: #fff;
	position: relative;
	font-size: 100%;
	font-family: 
	font-weight: 100;
}

h1, h2, h3 {
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	width: auto;
	height: auto;
}

img,a img{
	vertical-align: bottom;
	border: none;
	background: transparent;
	margin: 0px;
	padding: 0px;
}

ul,ol{
	-webkit-padding-start: 0px;
	-moz-padding-start: 0px;
	-ms-padding-start: 0px;
	-o-padding-start: 0px;
	padding-start: 0px;
	list-style-type: none;
}

.left{
	float: left;
}

.right{
	float: right;
}

.center{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.text_left{
	text-align: left;
}

.text_right{
	text-align: right;
}

.text_margin{
	margin-bottom: 3.0vmin;
}

.clear{
	clear: both;
	font-size: 0px;
	line-height: 0px;
	height: 0px;
	width: 0px;
	margin: 0px;
	padding: 0px;
}

iframe {
	vertical-align: bottom;
}

/* ::::: WP CSS ::::: */

.aligncenter {
	display: block;
	margin-top: 20;
	margin-right: auto;
	margin-bottom: 20;
	margin-left: auto;
}
.alignright {
	float: right;
	margin-left: 30px;
}
.alignleft {
	float: left;
	margin-right: 30px;
}
 
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}
 
/* clearfix */
 
.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: ""
    display: block;
    clear: both;
}

.widget-container {
	list-style-type: none;
}

/* ::::: CSS ::::: */

html{
	font-size: 100%;
	height: 100%;
}


body {
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	overflow-x: hidden;
	height: 100%;
}

h1{
	font-size: 4.2vmin;
	line-height: 1.6em;
	letter-spacing: 0.15em;
}

h2{
	font-size: 3.0vmin;
	line-height: 1.6em;
	letter-spacing: 0.1em;
}

h3{
	font-size: 2.8vmin;
	line-height: 1.6em;
	letter-spacing: 0.1em;
}

h4{
	font-size: 2.4vmin;
	line-height: 1.6em;
	letter-spacing: 0.1vmin;
}

h5{
	font-size: 2.0vmin;
	line-height: 1.6em;
	letter-spacing: 0.0vmin;
}

p{
	font-size: 2.2vmin;
	line-height: 1.6em;
	letter-spacing: 0.1em;
}

a{
	color:#0E9EDC;
}

span{
	font-size: 2.0vmin;
	line-height: 1.6em;
	letter-spacing: 0.05em;
}

#title{
	height: 100%;
	width: 100%;
	z-index: 0;
	position: relative;
	background-image: url(../images/slide01.svg);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: cover;
}

.bubble{
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
}

.bubble:after{
	content: "";
	background-image: url(../images/bubble.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	position: absolute;
	overflow: hidden;
	border-radius: 50%;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.bubble img{
	width: 100%;
	height: auto;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity:0;
}

@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}

#bubble01{
	width: 60vmin;
	height: 60vmin;
	top:20vmin;
	right:5vmin;
	z-index:1004;
	
	animation: horizontal 1s ease-in-out 0s infinite alternate;
}

#bubble01 img:nth-child(1) {
	animation: 14s bubble-1 ease-in-out infinite;
	border-radius: 50%;
}

#bubble01 img:nth-child(2) {
	animation: 14s bubble-2 ease-in-out infinite;
	border-radius: 50%;
}

#bubble02{
	width: 40vmin;
	height: 40vmin;
	top:45vmin;
	right:55vmin;
	z-index:1003;
	
	animation: horizontal 1s ease-in-out 0.5s infinite alternate;
}

#bubble02 img:nth-child(1) {
	animation: 10s bubble-1 4s ease-in-out infinite;
	border-radius: 50%;
}

#bubble02 img:nth-child(2) {
	animation: 10s bubble-2 4s ease-in-out infinite;
	border-radius: 50%;
}

#bubble03{
	width: 35vmin;
	height: 35vmin;
	top:15vmin;
	right:45vmin;
	z-index:1002;
	
	animation: horizontal 1s ease-in-out 1.0s infinite alternate;
}

#bubble03 img:nth-child(1) {
	animation: 10s bubble-1 8s ease-in-out infinite;
	border-radius: 50%;
}

#bubble03 img:nth-child(2) {
	animation: 10s bubble-2 8s ease-in-out infinite;
	border-radius: 50%;
}

#bubble04{
	width: 20vmin;
	height: 20vmin;
	top:70vmin;
	right:85vmin;
	z-index:1001;
	
	animation: horizontal 1s ease-in-out 1.5s infinite alternate;
}

@keyframes bubble-1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bubble-2 {
	0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#slideshow {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background-image: url(../images/slide02.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	z-index: 2000;
	animation: slideshow 20s ease-in-out infinite;
	opacity: 0;
}

@keyframes slideshow {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#title_part{
	height: 20vmin;
	background-image: url(../images/title_part.svg);
	width: 60vmin;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	z-index: 5000;
	position: absolute;
	bottom: 15.0vmin;
	left: 8.0vmin;
	animation: 2.0s blur01 cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.0s;
}

#title_catchphrase{
	height: 28vmin;
	background-image: url(../images/title_catchphrase.svg);
	width: 80vmin;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	z-index: 5000;
	position: absolute;
	top: 14.0vmin;
	left: 5.0vmin;
	animation: 1.0s blur02 cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.0s forwards ;
}

@keyframes blur01 {
	0% {
		opacity:0.0;
		
		transform: scale(1.1);
	}
	
	100% {
		opacity:1.0;
		
		transform:  scale(1.0);
	}
}

@keyframes blur02 {
	0% {
		opacity:0.0;
		
		transform: scale(1.1);
	}
	60% {
		transform:  rotate(0deg);
	}
	100% {
		opacity:1.0;
		
		transform:  scale(1.0) rotate(-5deg);
	}
}

#title_logo {
	width: 40vmin;
	height: 15vmin;
	background-image: url(../images/title_logo.svg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	z-index: 5000;
	position: absolute;
	bottom: 2.5vmin;
	right: 5.0vmin;
	animation: 2.0s blur01 cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.0s;
}

#title_fade{
	width: 100%;
	z-index: 4500;
	height: 15.0vmin;
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: -webkit-linear-gradient(180deg,rgba(90,166,246,1.00) 10vmin,rgba(90,166,246,0.00) 100%);
	background-image: -moz-linear-gradient(180deg,rgba(90,166,246,1.00) 10vmin,rgba(90,166,246,0.00) 100%);
	background-image: -o-linear-gradient(180deg,rgba(90,166,246,1.00) 10vmin,rgba(90,166,246,0.00) 100%);
	background-image: linear-gradient(180deg,rgba(90,166,246,1.00) 10vmin,rgba(90,166,246,0.00) 100%);
}

#header{
	width: 100%;
	background-color: rgba(2,119,242,0.8);
	z-index: 9999;
	height: 8.0vmin;
	position: fixed;
	background-image: url(../images/menu_bg.svg);
	background-repeat: repeat-x;
	animation: cube_scroll 6.0s ease-in-out infinite;
	background-position: 0% 100%;
	top: 0px;
	left: 0px;
}

@-webkit-keyframes cube_scroll {
	0% {background-position: 0px;}
	100% {background-position: -2000px;}
}

#menu {
	display: flex;
	list-style-type: none;
	position: relative;
	padding-right: 2.5vmin;
}

#menu li {
	height: 8.0vmin;
	overflow: hidden;
	text-align: center;
	position: relative;
}

#menu li:first-child {
	margin-right: auto;
	background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-size: auto 80%;
	background-position: 5.0vmin 50%;
	width:50%
}

#menu li h5 {
	line-height: 8.0vmin;
	padding-left: 1.5vmin;
	padding-right: 2.5vmin;
	font-weight: bold;
	text-align: center;
	transition: all 0.3s ease-in-out;
	white-space: nowrap;
	position: relative;
}

#menu li em {
	font-weight: bold;
}

#menu li h5:hover {
}

#menu li a {
	color: #fff;
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	transition: all 0.2s ease-in-out,color 0.1s linear;
	border-top-right-radius: 100%;
	border-top-left-radius: 50%;
	width: 100%;
}

#menu li a:hover {
	color: #0277F2;
	background-color: rgba(90,166,246,1.00);
	border-radius: 0%;
}

#menu li:first-child a:hover {
	background-color: rgba(90,166,246,0.00);
}

#page_start{
	width: 10vmin;
	height: 10vmin;
	position: absolute;
	bottom: 0px;
}


#introduction_scroll {
	position: absolute;
	z-index: 8000;
	left: 50%;
	bottom: 12.0vmin;
	
	-webkit-animation: 1.0s fadein cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.0s 1 forwards;
	-moz-animation: 1.0s fadein cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.0s 1 forwards;
	-ms-animation: 1.0s fadein cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.0s 1 forwards;
	-o-animation: 1.0s fadein cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.0s 1 forwards;
	animation: 1.0s fadein cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.0s 1 forwards;
	
	animation: tFade 4.0s ease-in-out 0s alternate forwards;
}

#introduction_scroll div {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4.0vmin;
	height: 4.0vmin;
	margin-left: -2.0vmin;
	border-left: 1px solid #0E9EDC;
	border-bottom: 1px solid #0E9EDC;
	
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
	-webkit-animation: scrolldown 1.5s infinite;
	-moz-animation: scrolldown 1.5s infinite;
	-ms-animation: scrolldown 1.5s infinite;
	-o-animation: scrolldown 1.5s infinite;
	animation: scrolldown 1.5s infinite;
	
	box-sizing: border-box;
}

@-webkit-keyframes scrolldown {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}

@keyframes scrolldown {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}

.contents{
	padding-top: 10.0vmin;
	padding-right: 15%;
	padding-left: 15%;
	padding-bottom: 10.0vmin;
}

.contents_left{
	width: 50%;
	padding-right: 4vmin;
}

.contents_right{
	width: 50%;
	padding-left: 4vmin;
}

.text_white{
	color: #FFFFFF;
}

.text_blue{
	color: #0E9EDC;
}

.text_brown{
	color: #664F18;
}

.bold{
	font-weight: bold;
}

.headline{
	margin-bottom: 7.5vmin;
	text-decoration: none;
	padding-top: 1vmin;
	padding-right: 8vmin;
	padding-left: 8vmin;
	padding-bottom: 1vmin;
	border-radius: 10vmin;
	border: 1px dashed #4D9DDF;
	display: inline-block;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.50) 50%,rgba(205,236,255,0.50) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.50) 50%,rgba(205,236,255,0.50) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.50) 50%,rgba(205,236,255,0.50) 100%);
	background-image: linear-gradient(180deg,rgba(255,255,255,0.50) 50%,rgba(205,236,255,0.50) 100%);
	width: auto;
	height: 7vmin;
	position: relative;
	font-weight: bold;
}

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

#main01{
	position: relative;
	text-align: center;
	background-image: url(../images/main01_bg.svg);
	background-repeat: repeat-x;
	background-position: 50% 100%;
	padding-bottom: 20vmin;
	background-size: 105% auto;
}

#main01 ul{
	display:flex;
	list-style-type: none;
}

#main01 li{
	width: 30%;
	margin: 1.6%;
	position: relative;
	border-radius: 50%;
	
	box-sizing: border-box;
	transition: all 0.3s ease-in-out;
}

#main01 li img{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}

#main01 li:hover{
	transform:scale(0.98);
	opacity:0.8;
}

#main01 li:before {
    content:"";
    display: block;
    padding-top: 100%; 
}

#main01 li:nth-child(1) {
	background-image: url(../images/main01_image01.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 50%;
}

#main01 li:nth-child(2) {
	background-image: url(../images/main01_image02.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 50%;
}

#main01 li:nth-child(3) {
	background-image: url(../images/main01_image03.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: 50% 50%;
}

#main01 li h3{
	position: absolute;
	top: 2.5vmin;
	left: 50%;
	text-align: center;
	display: inline-block;
	width: 100%;
	overflow-x: hidden;
	white-space: nowrap;
	margin-left: -50%;
	color: #2889d0;
	background: #ffff00;
	transform: rotate(-3deg) skew(-3deg);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
	font-weight: bold;
}

#main01 li h3 em{
	font-weight: bold;
}

#main01 li p{
	padding-top: 1vmin;
	padding-right: 6vmin;
	padding-left: 6vmin;
	padding-bottom: 6vmin;
	background-color: rgba(255,255,255,0.60);
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: left;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
}

#main01 li span{
	overflow: hidden;
}

#main01 li span img{
	width:100%;
}

#main01 li a{
	color:#333;
	display: block;
}

#main02{
	position: relative;
	text-align: center;
	background-color: #5AA6F6;
	background-image: url(../images/main02_bg.svg),url(../images/main02_layer.svg);
	background-repeat: repeat-x;
	background-position: 50% 100%,50% 50%;
	background-size: 105% auto;
}

#slider{
	list-style-type: none;
	margin-bottom: 10.0vmin;
	display:flex;
	flex-wrap:wrap;
}

#slider dd{
	padding: 1vmin;
	position: relative;
	box-sizing: border-box;
	width: 25%;
}

#slider span{
	border: 4px solid #4D9DDF;
	display: block;
	position: relative;
	border-radius: 20px;
	background-color: #FFFFFF;
	transition: all 0.3s ease-in-out;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	overflow: hidden;
}

#slider span:hover{
	box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
	transform:scale(0.98);
}

#slider span img{
	width: 90%;
	margin: 5%;
}

#slider dd h2{
	padding: 2vmin;
	position: absolute;
	background-color: rgba(255,255,255,0.60);
	top: 0px;
	left: 0px;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	text-align: center;
	display: inline-block;
	width: 100%;
}

#slider dd em{
	width: 100%;
	padding-top: 1vmin;
	padding-right: 2vmin;
	padding-left: 2vmin;
	padding-bottom: 2vmin;
	background-color: rgba(255,255,255,0.60);
	position: absolute;
	bottom: 0px;
	left: 0px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

#slider dd p{
	
	overflow: hidden;
	max-height: 5em;
}

#slider a h2{
	color: #0E9EDC;
}

#slider a p{
	color: #999;
}

#main03{
	text-align: center;
	position: relative;
	
	background-image: url(../images/main01_bg.svg);
	background-repeat: repeat-x;
	background-position: 50% 100%;
	background-size: 105% auto;
	padding-bottom: 20vmin;
}

#news{
	margin-bottom: 10vmin;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 4vmin;
	border-bottom: 1px dashed #0E9EDC;
}

#news li{
	display: flex;
	align-items: center;
	padding-top: 4vmin;
	margin-top: 4vmin;
	border-top: 1px dashed #0E9EDC;
}

#news span{
	width: 15vmin;
	height: 15vmin;
}

#news span img{
	height:100%;	
}

#news h5{
	color: #0E9EDC;
	padding-right: 2.0vmin;
	text-align: center;
}

#news p{
	overflow: hidden;
	padding-left: 2.0vmin;
	max-height: 5em;
	text-align: left;
	padding-right: 2.0vmin;
}

#news a{
	color: #666;	
}

#news a:hover{
	color: #999;	
}

a.morearrow{
	position: relative;
	display: inline-block;
	padding: 1vmin 6vmin 1vmin 3vmin;
	color: #fff;
	text-decoration: none;
	border-radius: 5vmin;
	background: #62A1CB;
	transition: all 0.3s ease-in-out;
	white-space: nowrap;
}
a.morearrow:before,
a.morearrow:after{
	content:"";
	display:block;
	position:absolute;
}
a.morearrow:before{
	width:4vmin;
	height:4vmin;
	background:#fff;
	border-radius:50%;
	right:1vmin;
	top:1vmin;
}
a.morearrow:after{
	width:1vmin;
	height:1vmin;
	border-right:2px solid #62A1CB;
	border-top:2px solid #62A1CB;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	right:2.8vmin;
	top:2.3vmin;
}

a.morearrow:hover{
	transform:translateX(2vmin);
}

#main04{
	background-color: #5AA6F6;
	
	text-align: center;
	background-color: #5AA6F6;
	background-image: url(../images/main02_bg.svg),url(../images/main02_layer.svg);
	background-repeat: repeat-x;
	background-position: 50% 100%,50% 50%;
	background-size: 105% auto;
}

#voice{
	margin-bottom: 10vmin;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 4vmin;
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	justify-content:space-between;
}

#voice li{
	width: 30%;
	position: relative;
	background-color: #ffffe7;
	padding: 3.0vmin;
	margin-bottom: 4.0vmin;
	border-radius:4px;
	transition: all 0.3s ease-in-out;
}

#voice li:hover{
	transform:scale(1.05);
}

#voice span{
	width: 100%;
	margin-bottom: 4vmin;
	overflow: hidden;
	display: inline-block;
	border: 4px solid #FFFFFF;
}

#voice span img{
	width:100%;	
}

#voice h5{
	position: absolute;
	bottom: 3.0vmin;
	right: 4.0vmin;
}

#voice p{
	background-image: linear-gradient(rgba(241,207,164,0.5) .05em, transparent .05em);
	background-size: 100% 1.6em;
	line-height: 1.6em;
	padding-left: 1.0vmin;
	padding-right: 1.0vmin;
	padding-bottom: 3.2em;
	text-align: left;
}

#voice a{
	color: #999;
}

#main05{
	display:flex;
}

.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#banner{
	display: flex;
	flex-wrap:wrap;
	list-style-type: none;
	}

#banner li{
	padding: 1vmin;
	}
	
#banner span{
	width: 100%;
	display: block;
	text-align: center;
	position: relative;
	padding-bottom: 1vmin;
}

#banner span img{
	width: 100%;
}

.big_banner{
	width: 100%;
	
}

.small_banner{
	width: 50%;
}

#main06{
	text-align: center;
}

#googlemaps {
position: relative;
padding-top: 40%;
height: 0;
overflow: hidden;
}

#googlemaps iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#footer_box{
	background-color: #183e72;
	width: 100%;
	padding-top: 8.0vmin;
	padding-bottom: 5.0vmin;
}

#footer {
	width: 70%;
	margin-right: auto;
	margin-left: auto;
}

#footer h2{
	text-align: center;
	color: #FFFFFF;
	margin-bottom: 5.0vmin;
}

#footer h3{
	text-align: center;
	color: #FFFFFF;
	margin-bottom: 5.0vmin;
}

#footer h4{
	text-align: center;
	color: #FFFFFF;
	margin-bottom: 5.0vmin;
}

#footer h5{
	text-align: center;
	color: #FFFFFF;
}

#footer ul{
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	margin-bottom: 4.0vmin;
	border-top: 1px solid #FFFFFF;
	list-style-type: none;
	padding-top: 2.5vmin;
	display:flex;
	justify-content:space-between;
}

#footer li{
	color: #FFFFFF;
	text-align: center;
}

#page_box{
	width: 100%;
	position: relative;
	
	background-image: url(../images/page_bg.svg);
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: contain;
}

#page{
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 15vmin;
	padding-bottom: 15vmin;
	min-height: 50vmin;
}

.about_bg{
	
}

.article{
	position: relative;
}

.article_center{
}

.article_left{
}

.article_right{
}

.article h1{
}

.article h2{
}

.article h3{
}

.article h4{
}

.article h5{
}

.article p{
}

.article strong{
}

.article p a:link,.article p a:visited{
}

.article p a:hover,.article p a:active{
}

.article span{
}

#category{
	list-style-type: none;
}

#category li{
	padding-top: 4vmin;
	padding-bottom: 4vmin;
}

#category li:nth-child(2n) img {
	float: left;
	margin-right: 4vmin;
}

#category li:nth-child(2n+1) img {
	float: right;
	margin-left: 4vmin;
}

#category h2{
	/*border-bottom: 1px solid #0E9EDC;*/
	padding-bottom: 2vmin;
}

#breadcrumb{
	padding: 0;
	border-radius: 5.0vmin;
	background-color: #0277F2;
	position: relative;
	margin-left: -2.0vmin;
	display: inline-flex;
	align-items: center;
	flex-wrap: no-wrap;
	}

#breadcrumb li {
	list-style-type: none;
	padding-left: 3.0vmin;
	padding-right: 4.0vmin;
	position: relative;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#breadcrumb li:last-child {
	padding-right: 3.0vmin;
}

#breadcrumb li:hover {
	padding-right: 6.0vmin;
}

#breadcrumb li:last-child:hover {
	padding-right: 3.0vmin;
}

#breadcrumb li:hover  > a h5{
	color: #fff;
	letter-spacing: 0.2em;
}

#breadcrumb li:after {
	content: "";
	width: 1em;
	height: 1em;
	position: absolute;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	right: 0px;
	top: 50%;
	margin-top: -0.5em;
}

#breadcrumb li:last-child:after {
	content : none;
	display: none;
}

#breadcrumb h5 {
	font-size: 1.5vmin;
	letter-spacing: 0.1em;
	color: #fff;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	line-height: 2.2em;
	white-space: nowrap;
	max-width: 16em;
	overflow: hidden;
}

#breadcrumb a h5:link,#breadcrumb a h5:visited{
	color: #fff;
}

#breadcrumb a h5:hover,#breadcrumb a h5:active{
	color: #12978d;
}

.breadcrumb_over:after {
	content: "";
	display: block;
	height: 2em;
	width: 2em;
	position: absolute;
	top: 0px;
	right: 3.0vmin;
	background:linear-gradient(to left, #20B2AA, rgba(32,178,170,0.5));
}

/* pagination */
.pagination h2.screen-reader-text { display: none; }

.pagination a {
	padding-top: 1.0vmin;
	padding-right: 2.0vmin;
	padding-left: 2.0vmin;
	padding-bottom: 1.0vmin;
	display: inline-block;
	border: solid 1px #cccccc;
	color: #666666;
	background-color: #ffffff;
	text-decoration: none;
}
.pagination a:hover {
	background-color: #e8e8e8;
}
.pagination span {
	padding: 2.0vmin;
	display: inline-block;
}
.pagination span.current {
}
.pagination {
	overflow: hidden;
	text-align: center;
	clear: both;
	background-color: transparent;
}

.internal_link{
	background-color: #0E9EDC;
	display: block;
	text-align: center !important;
	color: #FFFFFF;
	padding: 1em !important;
	margin-top: 4.0vmin;
	margin-bottom: 4.0vmin;
	transition: all 0.2s ease-in-out;
	border-radius: 10px !important;
	float: none !important;
	margin-right: auto !important;
	margin-left: auto !important;
	width: 40%;
}

.internal_link:hover{
	background-color: #73CAEF;
}

.margin_st{
	margin-top: 2.0vmin;	
}

.margin_sb{
	margin-bottom: 2.0vmin;	
}

.margin_bb{
	margin-bottom: 8.0vmin;	
}

.margin_bt{
	margin-top: 8.0vmin;	
}

.anker{
	position: absolute;
	margin-top: -12.0vmin;
}

.more{
	text-align: center;
	transition: all 0.2s ease-in-out;
	display: inline-block;
}

.more:hover {
	transform:scale(1.1);
}

.more a {
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	text-decoration: none;
	margin-bottom: 4.0vmin;
	color:#0E9EDC;
}

.more span {
	position: absolute;
	top: 2.5vmin;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #0E9EDC;
	border-bottom: 1px solid #0E9EDC;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}

@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
	}
	20% {
		-webkit-transform: rotate(-45deg) translate(-10px, 10px);
	}
	40% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
	}
}

@keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0);
	}
	20% {
		transform: rotate(-45deg) translate(-10px, 10px);
	}
	40% {
		transform: rotate(-45deg) translate(0, 0);
	}
}

.morew{
	text-align: center;
	transition: all 0.2s ease-in-out;
	display: inline-block;
}

.morew:hover {
	transform:scale(1.1);
}

.morew a {
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	text-decoration: none;
	margin-bottom: 4.0vmin;
	color:#fff;
}

.morew span {
	position: absolute;
	top: 2.5vmin;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}

#gotop{
	display: block;
	position: fixed;
	right: 2%;
	bottom: 4%;
	z-index: 7000;
	
	width: 5.0vmin;
	height: 5.0vmin;
	border-radius: 50%;
	background-color: rgba(0,159,255,0.7);
	
	opacity:0;
	transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#gotop.scroll{
	opacity:1;
}

#gotop:after{
	display: block;
	content: "";
	left: 50%;
	width: 2vmin;
	height: 2vmin;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	z-index: 7001;
	transform: rotate(-45deg);
	position: absolute;
	top: 50%;
	margin-top: -0.6vmin;
	margin-left: -1.2vmin;
}

#gotop:hover {
	-webkit-animation: gotophover .3s ease-in-out;
	-moz-animation: gotophover .3s ease-in-out;
	-ms-animation: gotophover .3s ease-in-out;
	-o-animation: gotophover .3s ease-in-out;
	animation: gotophover .3s ease-in-out;
}

@-webkit-keyframes gotophover {
	50% { -webkit-transform: scale(1.3); }
}

@keyframes gotophover {
	50% { transform: scale(1.3); }
}

#gotopp{
	display: block;
	position: fixed;
	right: 2%;
	bottom: 4%;
	z-index: 7000;
	
	width: 5.0vmin;
	height: 5.0vmin;
	border-radius: 50%;
	background-color: rgba(0,159,255,0.7);
	
	transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#gotopp:after{
	display: block;
	content: "";
	left: 50%;
	width: 2vmin;
	height: 2vmin;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	z-index: 7001;
	transform: rotate(-45deg);
	position: absolute;
	top: 50%;
	margin-top: -0.6vmin;
	margin-left: -1.2vmin;
}

#gotopp:hover {
	-webkit-animation: gotophover .3s ease-in-out;
	-moz-animation: gotophover .3s ease-in-out;
	-ms-animation: gotophover .3s ease-in-out;
	-o-animation: gotophover .3s ease-in-out;
	animation: gotophover .3s ease-in-out;
}

/* Contact Page */

*:focus {outline: none;}


.contact_form {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

.contact_form ul {
	padding-top: 5.0vmin;
	list-style-type: none;
}

.contact_form li{
	padding-top: 5.0vmin;
	padding-bottom: 5.0vmin;
	position: relative;
	clear: both;
} 

.contact_form h4{
	float: left;
	text-align: left;
}


.contact_form input {
	padding: 0.5vmin;
	min-width: 10.0vmin;
	font-size: 2.0vmin;
	line-height: 1.6em;
	letter-spacing: 0.05em;
	float: right;
}

.contact_form textarea {
	padding: 1.0vmin;
	width: 100%;
	resize: vertical;
	margin-top: 2.0vmin;
	
	font-size: 2.4vmin;
	line-height: 1.6em;
	font-weight: 400;
	letter-spacing: 0.05em;
}

.contact_form input, .contact_form textarea { 
		border:1px solid #aaa;
		border-radius:0.1vmin;
		padding-right:4.0vmin;
		-moz-transition: padding .25s; 
		-webkit-transition: padding .25s; 
		-o-transition: padding .25s;
		transition: padding .25s;
	}
	
.contact_form input:focus, .contact_form textarea:focus {
		background: #fff; 
		border:1px solid #555; 
		box-shadow: 0 0 0.5vmin #aaa; 
		padding-right:8.0vmin;
}

/* Item Spec */

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

.itemspec input[type="radio"] {
  display: none;
}

.itemspec label {
  display: inline-block;
  padding: 1vmin 3vmin;
  color: #fff;
  background-color: #71b3f8;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
}
.itemspec label:hover,
.itemspec input[type="radio"]:checked + label {
  color: #FFF;
  background-color: #3492f4;
}

.itemspec .tabbox {
  width: 100%;
  border: 1px solid #3492f4;
  border-radius: 0 5px 5px 5px;
  box-sizing: border-box;
}

.itemspec > .tabbox > div {
  display: none;
}

#itemtab01:checked ~ .tabbox > #itemview01 {
  display: block;
}

#itemtab02:checked ~ .tabbox > #itemview02 {
  display: block;
}

#itemtab03:checked ~ .tabbox > #itemview03 {
  display: block;
}

#itemtab04:checked ~ .tabbox > #itemview04 {
  display: block;
}

.itemspec table {
    margin: 0 auto;
    width: 100%;
    border: none;
    border-collapse: separate;
    border-spacing: 0 10px;
}
 
.itemspec table th {
	vertical-align: middle;
	width: 30%;
	border-right: solid 2px #3492f4;
	padding-top: 1vmin;
	padding-bottom: 1vmin;
	text-align: center;
}
 
.itemspec table td {
	padding-right: 2.5vmin;
	padding-left: 2.5vmin;
	padding-top: 1vmin;
	padding-bottom: 1vmin;
	width: 70%;
	border: none;
	vertical-align: middle;
	overflow: hidden;
}
 
.itemspec table td:fst-child {
    padding: 0 0 0 10px;
    vertical-align: middle;
}

.dots {
  border-width: 0 0 8px;
  border-style: solid;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(198,88%,46%,1.00)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
   width: 100%;
}

.nopc{
	display:none;
}

@media screen and (max-width: 1024px) and (orientation:landscape) {

#bubble01{
	width: 40vmin;
	height: 40vmin;
	top:15vmin;
	right:5vmin;
}

#bubble02{
	width: 25vmin;
	height: 25vmin;
	top:30vmin;
	right:40vmin;
	
	animation: horizontal 1s ease-in-out 0.5s infinite alternate;
}

#bubble03{
	width: 20vmin;
	height: 20vmin;
	top:15vmin;
	right:40vmin;
	
	animation: horizontal 1s ease-in-out 1.0s infinite alternate;
}

#bubble04{
	width: 15vmin;
	height: 15vmin;
	top:40vmin;
	right:60vmin;
	
	animation: horizontal 1s ease-in-out 1.5s infinite alternate;
}

#menu {
	padding-right: 0vmin;
}

#menu li{
}

#menu li:first-child {
	width: 40%;
	margin-right: auto;
	background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-position: 10% 50%;
	background-size: auto 60%;
}

#menu h5 {
	padding-left: 2vmin;
	padding-right: 2vmin;
}

#title{
	height: 80%;
}

#title_part{
	width: 40vmin;
	height: 15vmin;
	position: absolute;
	left: 8.0vmin;
	bottom: 15.0vmin;
	background-size: contain;
}

#title_catchphrase{
	width: 70vmin;
	height:20vmin;
	top: 10vmin;
	left: 5.0vmin;
	background-size: contain;
}

#title_logo {
	bottom:5vmin;
	width: 25vmin;
	height: 15vmin;
}

.contents{
	display:block;
	padding-top: 8.0vmin;
	padding-right: 12%;
	padding-left: 12%;
	padding-bottom: 8.0vmin;
}

#main01 li{
	width: 32%;
	margin: 1%;
	border-radius: 20px;
}

#main01 li h2{
	top: 2vmin;
}

#main01 li p{
	padding: 1.5vmin;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

#slider dd{
	width: 33.3%;
}

#slider dd h2{
	padding: 1.5vmin;
}

#slider dd p{
	padding: 1.5vmin;
}

#news{
	width: 100%;
}

#voice{
	width: 100%;
}

#voice li{
	width: 45%;
}

#page{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.nopc{
	display:block;
}

.notab{
	display:none;
}

}

@media screen and (max-width: 1600px) {
	
	#slider dd{

	width: 50%;
}
	
}

@media screen and (max-width: 768px) and (orientation:portrait) {

h1{
	font-size: 4.8vmin;
	line-height: 1.6em;
	letter-spacing: 0.15em;
}

h2{
	font-size: 3.6vmin;
	line-height: 1.6em;
	letter-spacing: 0.1em;
}

h3{
	font-size: 3.4vmin;
	line-height: 1.6em;
	letter-spacing: 0.1em;
}

h4{
	font-size: 2.6vmin;
	line-height: 1.6em;
	letter-spacing: 0.0em;
}

h5{
	font-size: 2.4vmin;
	line-height: 1.6em;
	letter-spacing: -0.1em;
}

p{
	font-size: 3.0vmin;
	line-height: 1.6em;
	letter-spacing: 0.05em;
}

#header{
	height: 8.0vmin;
}

#menu {
	padding-right: 0vmin;
}

#menu li{
	height: 10.0vmin;
}

#menu li:first-child {
	width: 38%;
	margin-right: auto;
	background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-position: 5% 30%;
	flex-grow: 2;
	background-size: 90% auto;
}

#menu h5 {
	line-height: 10.0vmin;
	padding-left: 0.5vmin;
	padding-right: 0.5vmin;
}

#title{
	height: 40%;
}

.bubble{
	display:none;
}

#title_part{
	width: 40vmin;
	height: 15vmin;
	position: absolute;
	left: auto;
	bottom: 4.0vmin;
	right: 2.0vmin;
	background-size: contain;
}

#title_catchphrase{
	width: 70vmin;
	height:20vmin;
	top: 9.0vmin;
	left: 2.0vmin;
	background-size: contain;
}

#title_logo {
	width: 20vmin;
	height: 5vmin;
	bottom: 5.0vmin;
	
	right:auto;
	left: 5.0vmin;
}

#gotop{
	right: 4%;
	bottom: 6%;
	
	width: 8.0vmin;
	height: 8.0vmin;
}

#gotop:after{
	width: 3.0vmin;
	height: 3.0vmin;
	margin-top: -0.8vmin;
	margin-left: -1.5vmin;
}

.contents{
	display:block;
	padding-top: 8.0vmin;
	padding-right: 10%;
	padding-left: 10%;
	padding-bottom: 8.0vmin;
}

.contents_left{
	width: 100%;
	padding-right: 0px;
	margin-bottom: 5.0vmin;
}

.contents_right{
	width: 100%;
	padding-left: 0px;
}

#main01 ul{
	display:block;
}

#main01 li{
	width: 100%;
	margin-top: 5.0vmin;
	border-radius: 0px;
	border: 1pt solid #6A97D4;
}

#main01 li:before {
    content:"";
    display: block;
    padding-top: 50%; 
}

#main01 li:nth-child(1) {
	background-size: auto 100%;
	background-position: -25% 0%;
}

#main01 li:nth-child(2) {
	background-size: auto 100%;
	background-position: -25% 0%;
}

#main01 li:nth-child(3) {
	background-size: auto 100%;
	background-position: -25% 0%;
}

#main01 li h3{
	padding: 0vmin;
	position: absolute;
	top: 4.0vmin;
	left: auto;
	right:0px;
	color: #0E9EDC;
	
	text-align: center;
	display: inline-block;
	width: 60%;
	
	text-shadow: 1px 1px 1px rgba(58,97,130,0.5);
}

#main01 li p{
	padding: 2.5vmin;
	background-color: rgba(255,255,255,0.0);
	bottom: 6.0vmin;
	left: auto;
	right:0px;
	
	display: inline-block;
	width: 60%;
}

#main01 li span{
	width: 40%;
}

#main01 li span img{
	width:40%;
}

#slider dd{
	width: 50%;
}

#news{
	width: 100%;
}

#voice{
	width: 80%;
}

#voice li{
	width: 100%;
	margin-top: 0vmin;
	margin-right: 0vmin;
	margin-left: 0vmin;
	margin-bottom: 8.0vmin;
}

#voice p{
	background-image: linear-gradient(rgba(241,207,164,0.5) .05em, transparent .05em);
	background-size: 100% 1.6em;
	line-height: 1.6em;
	padding-left: 2.0vmin;
	padding-right: 2.0vmin;
	padding-bottom: 4.2em;
}

#main05{
	display:block;
}

#footer{
	text-align: center;	
}

.contact_form input {
	font-size: 3.4vmin;
}

.contact_form textarea {
	font-size: 3.4vmin;
}

#category li:nth-child(2n) img {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4vmin;
}

#category li:nth-child(2n+1) img {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4vmin;
}

#page{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.itemspec{
	width: 100%;
	float: none;
}

.nopc{
	display:block;
}

.notab{
	display:block;
}

.nosp{
	display:none;
}

}