@charset "utf-8";

/************************************************************************************
RESET
*************************************************************************************/
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: inherit;
 font-size: 100%;
 vertical-align: baseline;
 -webkit-text-size-adjust: 100%;
}

html {
 line-height: 1;
 font-size: 62.5%;
}

ol,
ul {
 list-style: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

caption,
th,
td {
 text-align: left;
 font-weight: normal;
 vertical-align: middle;
}

q,
blockquote {
 quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
 content: "";
 content: none;
}

img,
fieldset {
 border: 0;
}

/* set image max width to 100% */
img {
 max-width: 100%;
 height: auto;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
 display: block;
}

*,
*:before,
*:after {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

body {
 color: #455963;
 font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
 font-feature-settings: "palt"1;
}

a:link,
a:visited,
a:active {
 color: #009ea7;
 text-decoration: underline;
 word-wrap: break-word;
 outline: none;
}

a:hover {
 color: #000;
 text-decoration: underline;
 -webkit-transition: 0.2s linear;
 transition: 0.2s linear;
}

a img {
 border: none;
 -webkit-transition: 0.2s linear;
 transition: 0.2s linear;
}

a:hover img {
 opacity: 0.7;
}

input[type=search] {
 -webkit-appearance: none;
 outline: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
 display: none;
}

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

.clearfix {
 display: inline-block;
}

.clearfix {
 display: block;
 zoom: 1;
}

.clear {
 clear: both;
 font: 0pt/0pt sans-serif;
}

.left {
 float: left;
}

.left_img {
 float: left;
 padding-right: 20px;
 padding-bottom: 17px;
}

.left_img_c {
 float: left;
 padding-right: 20px;
 padding-bottom: 17px;
}

.right {
 float: right;
}

.right_img {
 float: right;
 padding-bottom: 7px;
 padding-left: 10px;
}

.right_img_c {
 float: right;
 padding-bottom: 7px;
 padding-left: 10px;
}

/* text_font
---------------------------------------------*/

em {
 color: #005BB7;
}

.b {
 font-weight: bold;
}

.c {
 text-align: center;
 margin: 0px auto;
}

.r {
 text-align: right;
 display: block;
}

.l {
 text-align: left;
}

.pt1em {
 padding-top: 1rem;
}

.mb05em {
 margin-bottom: 0.5rem;
}

.mb1em {
 margin-bottom: 1rem;
}

.mb3em {
 margin-bottom: 3rem;
}


.mt05em {
 margin-top: .5rem;
}

.mt1em {
 margin-top: 1rem;
}

.mt2em {
 margin-top: 2rem;
}

.mt3em {
 margin-top: 3rem;
}

.mt4em {
 margin-top: 4rem;
}

.mt5em {
 margin-top: 5rem;
}


.ml1em {
 margin-left: 1em;
}

.ml2em {
 margin-left: 2em;
}

.pad_A1em {
 padding: 1em;
}

.pad_A2em {
 padding: 2em;
}

.disc ul {
 list-style-type: disc;
 padding-left: 1.5em;
 text-indent: -.1em;
}

.decimal  { padding-left: 1em; }
ol  {
    list-style-type: decimal;
    margin-left: 1em;
    text-indent: .1em;
}

.indent     { 
     margin-left: 1em;
     text-indent: -1em;
}

.p1 {
 padding-bottom: 1em;
 padding-top: 0.2em;
 line-height: 1.4em;
}

.overflow {
 overflow: hidden;
 _zoom: 1;
}
.lspac {letter-spacing: -0.04em;}

.f_gothic {
 font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.f_mincho {
 font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}
.fc_c { color: #009ea7;}

.borgra {
 border-bottom: 1px solid;
 border-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%, transparent);
 border-image-slice: 1;
}

.borgra02 {
 max-width: 250px;
 padding: 1rem;
 color: white;
 border-width: 1px;
 border-style: solid;
 border-image:
  linear-gradient(to bottom,
   red,
   rgba(0, 0, 0, 0)) 1 100%;
}

.borgra03 {
 border-bottom: 1px solid;
 border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 0) 100%, transparent);
 border-image-slice: 1;
}

/* content base
---------------------------------------------*/
main {
 position: relative;
 clear: both;
}

.header {
 text-align: left;
 margin: 0px auto;
 padding: 1em;
}

.ComingSoon {
 padding: 15rem 0;
font-size: 3rem;
 line-height: 1.4em;
color: #ccc;
}

.a_boxlink li a:link,
.a_boxlink li a:visited,
.a_boxlink li a:active {
text-decoration: none;
color: #000;
}

/* page-top */
#pagetop {
 position: fixed;
 bottom: 20px;
 right: 20px;
 display: block;
 background-color: rgba(0, 0, 0, 0.5);
 color: #fff;
 text-decoration: none;
 font-weight: bold;
 font-size: .8rem;
 width: 50px;
 height: 50px;
 text-align: center;
 line-height: 22px;
 border-radius: 30px;
 padding-top: 25px;
 box-sizing: border-box;
}

#pagetop:before {
 content: '\25B2';
 position: absolute;
 top: 10px;
 left: 0;
 width: 100%;
 text-align: center;
 font-size: 15px;
}

#pagetop:hover {
 opacity: 0.7;
}

a.anchor {
    display: block;
    padding-top: 7rem;
    margin-top: -7rem;
}

/* css animation */
.transform {
 -webkit-transform: translateY(30px);
 transform: translateY(30px);
 -webkit-transition: 1.0s ease;
 transition: 1.0s ease;
 opacity: 0;
}
.transform02 {
 -webkit-transform: translateY(70px);
 transform: translateY(70px);
 -webkit-transition: 2.4s ease;
 transition: 2.4s ease;
 opacity: 0;
}

.transform.fade_on {
 -webkit-transform: translateY(0px);
 transform: translateY(0px);
 opacity: 1;
}
.transform02.fade_on {
 -webkit-transform: translateY(0px);
 transform: translateY(0px);
 opacity: 1;
}
.delay02 {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.delay03 {
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
.delay04 {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.delay05 {
	-webkit-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
.delay06 {
	-webkit-transition-delay: 1s;
	transition-delay: 1s;
}



/*tooltip Box*/
.con-tooltip {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.tooltip {
  visibility: hidden;
  z-index: 1;
  opacity: .40;
  width: 300px;
  padding: 2rem;
  background: #000;
  color: #fff;
  font-size: 1.7rem;
  font-weight: bold;
  position: absolute;
  top:0%;
  left:0%;
  border-radius: 10px;
  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
}
.tooltip::after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12.5px 0 12.5px;
  border-color: #000 transparent transparent transparent;
  position: absolute;
  left: 0%;
}
.con-tooltip:hover .tooltip{
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
  transition: .3s linear;
}
.tipright .tooltip { top:-100%; left:0%; }
.tipright .tooltip::after{
  top:100%;
  left:10%;
  transform: rotate(0deg);
}