@charset "utf-8";





/*-------- fonts css --------*/
@font-face {
  font-family: 'singo';
  src: url('../fonts/singo.otf');
}

@font-face {
  font-family: 'singo';
  src: url('../fonts/singo.woff');
}

@font-face {
font-family: 'Lato', sans-serif;
}

@font-face {
  font-family: 'yumin';
  src: url('../fonts/yumin.woff2');
}

@font-face {
  font-family: 'yumin';
  src: url('../fonts/yumin.woff');
}

@font-face {
  font-family: 'yumin';
  src: url('../fonts/yumin.otf');
}

@font-face {
  font-family: 'yumin';
  src: url('../fonts/yumin.ttf');
}
--------*/

/*-------- fonts css --------*/
@font-face {
  font-family: 'ygr';
  src: url('../font/ygr.woff');
}

@font-face {
  font-family: 'ygr';
  src: url('../font/ygr.woff2');
}

@font-face {
  font-family: 'ygr';
  src: url('../font/ygr.otf');
}

@font-face {
  font-family: 'ygr';
  src: url('../font/ygr.ttf');
}

@font-face {
  font-family: 'ygr';
  src: url('../font/ygr.eot');
}








/*-------- reset css --------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{
margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;font-family: 'ygr';
}


/*-------- ����100%�K�� css --------*/
html {height:100%;font-family: 'ygr';}
body {height:100%;margin:0;overscroll-behavior-y: contain;/*--background-image: url(../img/haikeis.svg);background-repeat:no-repeat;background-position:top -600px left -500px;background-size:1200px 1200px;--*/font-family: 'ygr';}


/*-------- ����100%�K�� css --------*/



/*-------- 1px ~ 900px css --------*/
@media screen and (min-width:1px) and ( max-width:900px) {
div#fullheight{
display:none;
}

.scroll4 {
margin:auto;
padding:0.75% 0;
width:100%;
font-size: 140%;
line-height: 1.5em;
text-align: center;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 5px solid #000;
color: #fbc800;
background: #2e2e00;
height:auto;
position: fixed;
overflow: hidden;
bottom: 0;
/*--left: 0;
right:0;--*/
}

.scroll4 span{
display: inline-block;
padding-left: 150%;
white-space: nowrap;
line-height: 1em;
animation: scrollAnime4 6s linear infinite;
}

@keyframes scrollAnime4{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}


div#centermainsp{
max-width:900px;
width:100%;
height:100%;
position: relative;
}

div#centermainwords1sp{
color:#555555;
width:100%;
padding:;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords2sp{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords3sp{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords4sp{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords5sp{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centerbottomssp{
width:100%;
height:80px;
}

}





/*-------- 901px ~ 1280px css --------*/
@media screen and (min-width:901px) and ( max-width:1280px) {

div#fullheightsp{
display:none;
}

div#fullheight{
display:flex;
height:100%;
/*--background-image:url(../img/haikeis.svg);background-repeat:no-repeat;background-position:bottom -600px right -500px;background-size:1200px 1200px;--*/
/*--background-color:#ffffff;--*/
}

div#leftconts{
width:100%;
height:100%;
/*--background-color:#ffffff;--*/
position:relative;
/*--background-size:100% auto;--*/
background-repeat:no-repeat;
background-position:bottom left;
}

div#leftcontslinkbox{
border:0;
max-width:260px;
width:90%;
padding:0;
position:absolute;
top:50px;
right:0;
left:0;
margin:auto;
}

h3#leftcontslinkboxtitle{
font-size:1.5em;
margin:0;
padding:0;
line-height:;
letter-spacing:;
color:#555555;
font-weight:;
text-align:justify;
}

a#leftlinks{
font-weight:bold;
color:#555555;
text-decoration:none;
text-align:justify;
letter-spacing:1px;
}

span#leftlinksword1{
font-size:1em;
}

span#leftlinksword2{
font-size:0.8em;
line-height:30px;
}

div#rightconts{
width:100%;
height:100%;
/*--background-color:#ffffff;--*/
position:relative;
/*--background-image:url('../img/right.png');--*/
background-size:100% auto;
background-repeat:no-repeat;
background-position:top right;
}

div#rightcontslinkbox{
border:0;
max-width:230px;
width:90%;
padding:0;
position: absolute;
bottom:150px;
right:0;
left:0;
margin:auto;
}

a#rightlinks1{
font-weight:bold;
color:#555555;
text-decoration:none;
text-align:center;
display:block;
border:1px solid #000;
border-radius:40px;
padding:20px 0;
letter-spacing:1.5px;
background-color:#fff;
margin:0 auto 20px auto;
font-size:1em;
}

a#rightlinks2{
font-weight:bold;
color:#555555;
text-decoration:none;
text-align:center;
display:block;
border:1px solid #000;
border-radius:40px;
padding:20px 0;
letter-spacing:1.5px;
background-color:#fff;
margin:0 auto;
font-size:1em;
}

.scroll {
margin:auto;
padding:0.75% 0;
width:30%;
font-size: 140%;
line-height: 1.5em;
text-align: center;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 5px solid #000;
color: #fbc800;
background: #2e2e00;
height:auto;
position: fixed;
overflow: hidden;
bottom: 0;
left: 0;
right:0;
}

.scroll span{
display: inline-block;
padding-left: 150%;
white-space: nowrap;
line-height: 1em;
animation: scrollAnime 6s linear infinite;
}

@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}


.scroll2 {
display:none;
writing-mode: vertical-rl;
margin: ;
padding:0 1%;
max-width:35px;
width:100%;
font-size: 140%;
line-height: 1.5em;
text-align: center;
border: 0;
color: #555555;
background : #fff;
height:100%;
overflow: hidden;
}

.scroll2 span{
display: inline-block;
padding-left: 100%;
white-space: nowrap;
line-height: 1em;
animation: scrollAnime2 40s linear infinite;
}

@keyframes scrollAnime2{
    0% { transform: translateY(-110%)}
  100% { transform: translateY(100%)}
}

.scroll3 {
display:none;
writing-mode: vertical-rl;
margin: ;
padding:0 1%;
max-width:35px;
width:100%;
font-size: 140%;
line-height: 1.5em;
text-align: center;
border: 0;
color: #555555;
background : #fff;
height:100%;
overflow: hidden;
}

.scroll3 span{
display: inline-block;
padding-left: 100%;
white-space: nowrap;
line-height: 1em;
animation: scrollAnime3 40s linear infinite;
}

@keyframes scrollAnime3{
    0% { transform: translateY(50%)}
  100% { transform: translateY(-155%)}
}

div#centermain{
max-width:380px;
width:100%;
height:100%;
position: relative;
}

div#centermainwords1{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords2{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords3{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords4{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords5{
color:#555555;
width:96%;
padding:2%;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centerbottoms{
width:100%;
height:80px;
}

}





/*-------- 1281px ~ css --------*/
@media screen and (min-width:1281px) {

div#fullheightsp{
display:none;
}

div#fullheight{
display:flex;
height:100%;
/*--background-image:url(../img/haikeis.svg);background-repeat:no-repeat;background-position:bottom -600px right -500px;background-size:1200px 1200px;--*/
}

div#leftconts{
width:100%;
height:100%;
/*--background-color:#ffffff;--*/
position:relative;
/*--background-image:url('../img/left.png');--*/
background-size:100% auto;
background-repeat:no-repeat;
background-position:bottom left;
}

div#leftcontslinkbox{
border:0;
max-width:280px;
width:90%;
padding:0;
position:absolute;
top:50px;
right:0;
left:0;
margin:auto;
}

h3#leftcontslinkboxtitle{
font-size:1.5em;
margin:0;
padding:0;
line-height:;
letter-spacing:;
color:#555555;
font-weight:;
text-align:justify;
}

a#leftlinks{
font-weight:bold;
color:#555555;
text-decoration:none;
text-align:justify;
letter-spacing:1px;
}

span#leftlinksword1{
font-size:1.1em;
}

span#leftlinksword2{
font-size:0.9em;
line-height:30px;
}

div#rightconts{
width:100%;
height:100%;
/*--background-color:#ffffff;--*/
position:relative;
/*--background-image:url('../img/right.png');--*/
background-size:100% auto;
background-repeat:no-repeat;
background-position:top right;
}

div#rightcontslinkbox{
border:0;
max-width:240px;
width:90%;
padding:0;
position: absolute;
bottom:150px;
right:0;
left:0;
margin:auto;
}

a#rightlinks1{
font-weight:bold;
color:#555555;
text-decoration:none;
text-align:center;
display:block;
border:1px solid #000;
border-radius:40px;
padding:20px 0;
letter-spacing:1.5px;
background-color:#fff;
margin:0 auto 20px auto;
font-size:1.1em;
}

a#rightlinks2{
font-weight:bold;
color:#555555;
text-decoration:none;
text-align:center;
display:block;
border:1px solid #000;
border-radius:40px;
letter-spacing:1.5px;
padding:20px 0;
background-color:#fff;
margin:0 auto;
font-size:1.1em;
}

.scroll {
margin:auto;
padding:0.75% 0;
max-width:380px;
width:100%;
font-size: 140%;
line-height: 1.5em;
text-align: center;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 5px solid #000;
color: #fbc800;
background: #2e2e00;
height:auto;
position: fixed;
overflow: hidden;
bottom: 0;
/*--left: 0;
right:0;--*/
}

.scroll span{
display: inline-block;
padding-left: 150%;
white-space: nowrap;
line-height: 1em;
animation: scrollAnime 6s linear infinite;
}

@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}


.scroll2 {
writing-mode: vertical-rl;
margin: ;
padding:0 1%;
max-width:35px;
width:100%;
font-size: 140%;
line-height: 1.5em;
text-align: center;
border: 0;
color: #555555;
background : #fff;
height:100%;
overflow: hidden;
}

.scroll2 span{
display: inline-block;
padding-left: 100%;
white-space: nowrap;
line-height: 1em;
animation: scrollAnime2 300s -150s linear infinite;
}

@keyframes scrollAnime2{
    0% { transform: translateY(-100%)}
  100% { transform: translateY(0%)}
}

.scroll3 {
writing-mode: vertical-rl;
margin: ;
padding:0 1%;
max-width:35px;
width:100%;
font-size: 140%;
line-height: 1.5em;
text-align: center;
border: 0;
color: #555555;
background : #fff;
height:100%;
overflow: hidden;
}

.scroll3 span{
display: inline-block;
padding-left: 100%;
white-space: nowrap;
line-height: 1em;
animation: scrollAnime3 300s -150s linear infinite;
}

@keyframes scrollAnime3{
    0% { transform: translateY(0%)}
  100% { transform: translateY(-100%)}
}

div#centermain{
max-width:380px;
width:100%;
height:100%;
position: relative;
}

div#centermainwords1{
color:#555555;
max-width:360px;
width:100%;
padding:10px;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords2{
color:#555555;
max-width:360px;
width:100%;
padding:10px;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords3{
color:#555555;
max-width:360px;
width:100%;
padding:10px;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords4{
color:#555555;
max-width:360px;
width:100%;
padding:10px;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centermainwords5{
color:#555555;
max-width:360px;
width:100%;
padding:10px;
margin:0 auto;
height:auto;
background-color:#ffffff;
}

div#centerbottoms{
width:100%;
height:80px;
}

}