@charset "UTF-8";

/* ===================================================================
format
=================================================================== */
/*	html
--------------------------------------------------------------------*/
html {
  /* font-size指定をremで設定するための処理　1.6rem = 16px */
  font-size: 62.5%;
}

/*	body
--------------------------------------------------------------------*/
body {
  font-size: 1.6rem;
  color: #000;
  line-height: 1;
  font-family: 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  background: url(../images/bg3.gif) repeat;
}

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

/* ===================================================================
Layout
=================================================================== */
/* ===================================================================
Layout-contents
=================================================================== */
/*	header
--------------------------------------------------------------------*/
#header {
width: 100%;
border-bottom: 1px solid #000;
background: #f4f4f4;
}

#header h1 {
text-align: center;
line-height: 1;
}

/*	mainImg
--------------------------------------------------------------------*/
#mainImg {
position: relative;
width: 980px;
height: 611px;
margin: 0 auto 60px;
background: url(../images/mainImg.png) no-repeat;
}

#mainImg .copy {
position: absolute;
top: 50%;
left: 50%;
margin: -145px 0 0 -382px;
}

#mainImg .btn {
position: absolute;
bottom: 0;
left: 50%;
margin: 0 0 0 -191px;
}

#mainImg .btn_txt {
position: absolute;
right: 110px;
bottom: 21px;
}

#mainImg .access_c {
width: 240px;
top: 100px;
right: 0;
position: absolute;
}

#mainImg .access_c ul {
text-align: center;
}

#mainImg .access_c li {
display: inline-block;
margin: 0 2px 10px;
padding: 0 5px;
font-size: 25px;
font-weight: bold;
text-align: center;
background: #000000;
color: #CCF000;
}

#mainImg .access_c p {
text-align: center;
color: #CC0000;
}

.marquee {
width: 500px;
padding: 0.5em 0;
overflow: hidden;
background-color: #f6f6f6;
margin-bottom: 10px;
position: absolute;
top: 10px;
right: -90px;
}

.marquee p:after {
content:"";
white-space:nowrap;
padding-right:50px;
}

.marquee p {
margin:0;
padding-left:500px;
font-size: 28px;
color: #ff0000;
font-weight: bold;
display:inline-block;
white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/*	contents
--------------------------------------------------------------------*/
#sec01 {
position: relative;
width: 980px;
height: 720px;
margin: 0 auto;
padding: 30px;
background: url(../images/sec01_bg.png) repeat;
}

#sec01 h2 {
font-size: 35px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
}

#sec01 .text {
position: absolute;
top: 140px;
left: 30px;
width: 460px;
}

#sec01 .text p {
font-size: 24px;
color: #FFFFFF;
}

#sec01 .ojisan {
position: absolute;
bottom: 30px;
right: 30px;
width: 428px;
height: 410px;
}

#sec01 .ojisan span {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -72px;
}

#sec01 ul {
    position: absolute;
    list-style: none;
    top: -149px;
    width: 428px;
    height: 410px;
    margin: 0 auto;
    padding: 0;
    animation: rotate 30s linear infinite;
    z-index: 10;
}
@keyframes rotate {
    100% { transform: rotate(360deg); }
}
#sec01 ul li {
    position: absolute;
    width: 130px;
    height: 130px;
    margin: 0;
    padding: 30px 0 0;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    animation: rotate-elm 30s linear infinite;
}
@keyframes rotate-elm {
    100% { transform: rotate(-360deg); }
}
#sec01 ul li .fa {
    font-size: 26px;
}
#sec01 ul li p {
    margin: 5px 0 0;
    font: 400 13px/1 'Lato', sans-serif;
}
#sec01 ul li:nth-child(1) {
    top: -25px;
    left: 140px;
}
#sec01 ul li:nth-child(2) {
    top: 100px;
    left: 5px;
}
#sec01 ul li:nth-child(3) {
    top: 70px;
    right: 5px;
}
#sec01 ul li:nth-child(4) {
    bottom: 10px;
    left: 70px;
}
#sec01 ul li:nth-child(5) {
    bottom: 20px;
    right: 40px;
}


#sec02 {
width: 980px;
margin: 0 auto;
padding: 30px;
background: #3cff00;
}

#sec02 h2 {
margin-bottom: 20px;
font-size: 35px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
}

#sec02 ul {
display: flex;
justify-content: space-between;
}

#sec02 li {
width: 286px;
list-style-type: none;
}

#sec02 h3 {
font-size: 30px;
font-weight: normal;
color: #FFFFFF;
text-align: center;
}


#sec03 {
width: 980px;
margin: 0 auto;
padding: 30px 0;
background: #e86bff;
}

#sec03 h2 {
margin-bottom: 20px;
font-size: 35px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
}

#sec04 {
width: 980px;
margin: 0 auto;
padding: 30px;
background: #6600cc;
}

#sec04 h2 {
margin-bottom: 20px;
font-size: 35px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
}

#sec04 p {
color: #FFFFFF;
}

#sec04 ul {
display: flex;
justify-content: space-between;
}

#sec04 li {
width: 450px;
list-style-type: none;
}

#sec04 li img {
display: block;
width: 450px;
height: 290px;
margin-bottom: 20px;
color: #FFFFFF;
border: 1px solid #FFFFFF;
}

#sec04 li h3 {
margin-bottom: 20px;
padding: 10px 0;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #fffc00;
}



#sec05 {
width: 980px;
margin: 0 auto;
padding: 30px;
background: #cc0000;
}

#sec05 h2 {
margin-bottom: 20px;
font-size: 35px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
}

#sec05 p.subt {
margin-bottom: 20px;
padding: 20px 0;
text-align: center;
font-size: 24px;
font-weight: bold;
border: 5px solid #fff600;
background: #FFFFFF;
}

#sec05 table {
margin-bottom: 30px;
}

#sec05 th {
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}

#sec05 td {
color: #FFFFFF;
}

#sec05 .cta_btn {
margin-bottom: 80px;
text-align: center;
}

#sec05 .cta_btn a {
padding: 10px 30px;
color: #000;
font-size: 24px;
font-weight: bold;
background: orange;
}



#sec06 {
width: 980px;
margin: 0 auto 70px;
padding: 30px;
background: url(../images/renga.gif) repeat;
}

#sec06 ul {
display: flex;
justify-content: space-between;
width: 800px;
margin: 30px auto;
}

#sec06 ul li {
list-style: none;
}

#sec06 ul li a {
padding: 10px 30px;
color: #fff;
background: orange;
}

#sec06 h2 {
width: 567px;
margin: 0 auto 10px;
}

#sec06 p {
margin-bottom: 20px;
padding: 20px;
text-align: center;
color: #ffff24;
background: #e506c3;
}

#sec06 table {
margin-bottom: 20px;
}

#sec06 th {
padding: 10px;
background: #9cbc41;
}

#sec06 th span {
background: #CC0000;
color: #ffff24;
}

#sec06 td {
padding: 10px;
background: #FFFFFF;
}

#sec06 td input,
#sec06 td textarea{
width: 100%;
padding: 5px;
border: 1px solid #ccc;
}

#sec06 input[type="submit"] {
cursor: pointer;
display: block;
width: 382px;
height: 65px;
margin: 0 auto;
border: none;
text-indent: -9999px;
background: url(../images/sec06_btn.png) no-repeat 0 0;
}





#sec07 {
width: 100%;
padding: 30px 0;
border-top: 1px solid #CCC;
background: #f8f8f8;
}

#sec07 p {
padding-bottom: 30px;
line-height: 1.8;
font-size: 18px;
text-align: center;
font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

#sec07 p a {
color: #CC0000;
text-decoration: underline;
}

#sec07 strong {
color: #c00;
}


#sec07 ul {
text-align: center;
}

#sec07  li {
display: inline-block;
margin-left: 30px;
list-style-type: none;
}

#sec07  li:first-child {
margin-left: 0;
line-height: 1;
}

#sec07 ul.cta_list {
margin-bottom: 35px;
}

#sec07 ul.cta_list a {
padding: 10px 30px;
text-decoration: underline;
color: #1a0dab;
font-size: 18px;
font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

#sec07 ul.cta_list a:hover {
text-decoration: none;
}


/*	sidebar
--------------------------------------------------------------------*/
/*	footer
--------------------------------------------------------------------*/
#footer {
width: 100%;
padding: 30px 0;
background: #FFFFFF;
}

#footer #f_logo {
width: 151px;
margin: 0 auto 20px;
}

#footer p {
padding-bottom: 10px;
text-align: center;
font-size: 12px;
}

/* ===================================================================
Pagetop
=================================================================== */
.pagetop {
  position: fixed;
  right: 40px;
  bottom: 0;
}
.pagetop a {
  display: block;
}


/* ===================================================================
Rollover 背景が白の時用
=================================================================== */
a img {
  opacity: 1;
  transition: .3s ease-in-out;
  backface-visibility: hidden;
}

a:hover img {
  opacity: .7;
  filter: alpha(opacity=30);
}

/* ===================================================================
点滅
=================================================================== */
.blinking{
	-webkit-animation:blink 0.3s ease-in-out infinite alternate;
    -moz-animation:blink 0.3s ease-in-out infinite alternate;
    animation:blink 0.3s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}