@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
}
* {
	-webkit-touch-callout: none;
}

/*回り込み解除*/
.clearfix:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.clearfix {
	display:inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix{
	height:1%;
}
.clearfix{
	display:block;
}

html{
}
body{
	text-align: center;
}
	width:1160px;

img {
	max-width: 100% ;
    marigin: 0 auto;
}
_img {
    display: block;
    marigin: 0 auto;	
}

h1 {
	position: relative;
    z-index: 1;
    padding: 180px 0 0 0;
    color: #fff;
}
p,h2,h3,h4 {
	margin:0px;
	padding: 0px;
}
ul{
	margin:0px;
	padding: 0px;
}
li {
	list-style:none;	
	margin:0px;
	padding: 0px;
}

a{
	text-decoration : none;
	text-decoration:none;
}
	background:#ffffff;
.catch{
}
.catch .inner{
	text-align:center;
}
.blink{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.0s ease-in-out infinite alternate;
    animation:blink 1.0s 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;}
}
.inner{
	width:1160px;
	margin:0 auto;
}
.m20{
	margin-bottom:20px;
}
.m40{
	text-align:center;
	margin:0 auto;
}
.m100{
	margin-bottom:100px;
}
.m200{
	margin-bottom:200px;
}

.header1{
	height:84px;
	min-width:1160px;
	background:url(../images/head1_bg.jpg) repeat-x;
}
.header2{
	height:639px;
	min-width:1160px;
	background:url(../images/mv_bg.jpg) top center no-repeat;
}
.sec1{
	height:267px;
	background:#000000;
	
}
.btn{
	position:fixed;
	bottom:20px;
	right:20px;
}
.btn2{
	text-align:center;
	margin-bottom:200px;
}
.footer{
	height:40px;
	padding-top: 60px;
    padding-bottom: 110px;
	line-height:25px;
	background:#029f02;
	margin:0 auto;
	min-width:1160px;
}
.footer p{
	margin-bottom:0;
	color:#fff;
}
.footer p a{
	color:#fff;
	margin-left: 10px;
}
.footer p a:hover{
	text-decoration:underline;
	color:#ccc;
}

.footer p.copyright{
	font-size:12px;
	color:#fff;
}

.catch input{
	width:570px;
	padding:23px 30px;
	font-size:25px;
	margin-top:200px;
	margin-bottom:20px;
	-webkit-border-radius: 10px;
}
.catch input:-webkit-input-placeholder {
    color: #eeeeee;
}
.catch input:-ms-input-placeholder {
    color: #eeeeee;
}
.catch input:-moz-placeholder {
    color: #eeeeee;
}
.catch input:focus{
	background:#d9fdff;
}
.catch input[type="image"] {
	padding:0;
	border:none;
	width:637px;
	margin-top:0px;
}
.catch2 input{
	width:500px;
	padding:10px 30px;
	font-size:20px;
	margin-top:15px;
	margin-bottom:20px;
}
.catch2 input[type="image"] {
	padding:0;
	border:none;
	width:284px;
	margin-top:-10px;
}
.catch3 input{
	width:500px;
	padding:10px 30px;
	font-size:20px;
	margin-top:10px;
}
.catch3 input[type="image"] {
	padding:0;
	border:none;
	width:316px;
}

.percent01{
	background: url(../images/01.jpg) center no-repeat;
	min-width:1160px;
	background-size:cover;
}

.inner00{
	background-color:#fffbf2;
	width:1160px;
	text-align: center;
	margin:0 auto;
}
.inner01{
	background-color:#fffbf2;
	min-width:1160px;
	text-align: center;
	margin:0 auto;
}
.inner02{
	min-width:1160px;
	color: #ffffff;
    font-size: 70px;
	font-weight:bold;
	text-align: center;
	margin:0 auto;
	margin-top: -105px;
}

.cd{
	color:#ffffff;
	font-size:47px;
	font-weight:bold;
	line-height:300px;
    margin-bottom: 70px;
	margin-left: -280px;
}
body{
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}


.wrapper {
    width: 1160px;
    margin: 0 auto;
	margin-top: -365px;
	text-align:center;
}


/*パソコン用*/

.pc_percent00{
	background: url(../images/00.jpg) center no-repeat;
	min-width:1160px;
	margin-top: 60px;
}
.pc_percent01{
	background: url(../images/06.jpg) center no-repeat;
	min-width:1160px;
}
.pc_percent02{
	background: url(../images/08.jpg) center no-repeat;
	min-width:1160px;
}
.pc_percent03{
	background: url(../images/10.jpg) center no-repeat;
	min-width:1160px;
}
.pc_percent04{
	background: url(../images/12.jpg) center no-repeat;
	min-width:1160px;
}
.pc_percent05{
	background: url(../images/14.jpg) center no-repeat;
	min-width:1160px;
}
.pc_percent06{
	background: url(../images/16.jpg) center no-repeat;
	min-width:1160px;
}
.pc_percent07{
	background: url(../images/18.jpg) center no-repeat;
	min-width:1160px;
}
.pc_percent08{
	background: url(../images/22.jpg) center no-repeat;
	min-width:1160px;
}
.pc_percent09{
	background: url(../images/24.jpg) center no-repeat;
	min-width:1160px;
}


.pc_inner{
	width:100%;
	margin:0 auto;
	text-align:center;
}
.pc_inner01{
	min-width: 1160px;
    margin: 1.8rem 0;
}
.pc_inner02{
	min-width: 1160px;
    margin-top: -220px;
    margin-bottom: 130px;
}
.pc_inner03{
	min-width: 1160px;
    margin: -275px 0 170px;
}
.pc_inner04{
	min-width: 1160px;
    margin: -255px 0 180px -460px;
}
.pc_inner04 img {
	width: 30%;
}

.pc_wrapper {
    width: 1160px;
    margin: -2rem auto 2.5rem;
	text-align:center;
}
.pc_wrapper2 {
    width: 1160px;
    margin: 6rem auto 10rem;
	text-align:center;
}
.pc_wrapper3 {
    width: 1160px;
    margin: 0 auto;
	text-align:center;
}


.pc_cd{
	color:#ff2e2e;
	font-size:50px;
	font-weight:bold;
	text-align:center;
	width: 100%;
}

.pc_header {
	z-index: 1;
    position: fixed;
    top: 0;
    left:0;
	width:100%;
}
.pc_btn {
    position: fixed;
    width: 25%;
    bottom: 20px;
    right: -920px;
    left: 0px;
	margin: 0 auto;
}
.pc_movie {
	min-width: 980px;
}
.navbar-inner {
    background: #fff;
    -webkit-box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
    z-index: 10;
}
.navbar-inner {
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0px;
    border: 0;
    padding: 5px 0;
    /* margin-bottom: 80px; */
}
.brand {
    text-align: center;
    padding: 10px 30px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    /* text-shadow: 0 -1px 0 rgb(0 0 0 / 50%); */
}




/*スマホ用*/

.sp_percent00{
	background: url(../images/26_0.jpg) center no-repeat;
	background-size:cover;
	margin-top: 40px;
}
.sp_percent01{
	background: url(../images/30.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent02{
	background: url(../images/34.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent03{
	background: url(../images/36.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent04{
	background: url(../images/39.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent05{
	background: url(../images/42.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent06{
	background: url(../images/44.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent07{
	background: url(../images/47.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent08{
	background: url(../images/49.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent09{
	background: url(../images/51.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent10{
	background: url(../images/53.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent11{
	background: url(../images/56.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent12{
	background: url(../images/59.jpg) center no-repeat;
	background-size:cover;
}
.sp_percent13{
	background: url(../images/61.jpg) center no-repeat;
	background-size:cover;
}

.sp_inner{
	width:100%;
	margin:0 auto;
	text-align:center;
}
.sp_inner00{
    position: absolute;
    margin: 0 9.6%;
    width: 80%;
}
.sp_inner01{
	margin: 0.8rem auto;
    width: 85%;
}
.sp_inner02{
    position: absolute;
    margin: -9.5% 0 0 73%;
}
.sp_inner02 img {
    width: 70%;
}
.sp_inner03{
    position: absolute;
    margin: -8.5% 0 0 35%;
}
.sp_inner03 img {
    width: 20%;
}
.sp_inner04{
	position: absolute;
    font-size: 1.7vh;
    color: #000;
    margin-top: -1.5%;
    margin-left: 9.5%;
	font-family:"Century Gothic", sans-serif;
}
.sp_inner04 span{
    font-family: 'Poppins', sans-serif;
}

.catch_sp input[type="text"]{
	width: 77%;
    padding: 12px 20px;
    font-size: 15px;
    margin-bottom: 10px;
    -webkit-border-radius: 7px;;
}
.catch_sp input[type="image"] {
	width:90%;
	padding:0;
	border:none;
	margin-bottom:50px;
}

.sp_cd{
	color:#ff2e2e;
	font-size:28px;
	font-weight:bold;
	text-align:center;
	width: 100%;
}

.sp_wrapper {
    margin: 0 auto;
	text-align:center;
}
.sp_wrapper2 {
	margin: 1.5rem auto 3rem;
	text-align:center;
}
.sp_wrapper3 {
	margin-bottom: 4rem;
}

.sp_footer{
	width: 100%;
    padding-top: 20px;
    padding-bottom: 35px;
    line-height: 35px;
    background: #029f02;
}
.sp_footer2{
	padding-top: 20px;;
}
.sp_footer p{
	margin: -0.1rem 0 0;
}
.sp_footer p a{
	color:#fff;
	font-size:13px;
}
.sp_footer p a:hover{
	text-decoration:underline;
	color:#CCC;
}

.sp_footer p.law {
    float: none;
    font-size: 12px;
    color: #fff;
    margin-right: 15px;
}
.sp_footer p.law2 {
    float: none;
    font-size: 13px;
    color: #fff;
    line-height: 18px;
}
.sp_footer p.copyright{
	float: none;
    font-size: 11px;
    color: #fff;
    /* margin-right: 15px; */
    margin-top: -25px;
}
.sp_footer2 p.copyright{
	float: none;
    font-size: 11px;
    color: #fff;
    margin-top: -25px;
}
.sp_header {
	z-index: 1;
    position: fixed;
    top: 0;
    left:0;
	width:100%;
}
.sp_nav {
	z-index: 2;
    margin-top: 58px;
}
.sp_btn {
	position: fixed;
	width: 100%;
	bottom: 0px;
}
.sp_navbar-inner {
    height: 40px !important;
}
.sp_navbar-inner {
    background: #fff;
    -webkit-box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
    z-index: 10;
}
.sp_navbar-inner {
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0px;
    border: 0;
    padding: 5px 0;
    /* margin-bottom: 80px; */
}
.sp_brand {
    text-align: center;
    padding: 10px 30px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #333;
    /* text-shadow: 0 -1px 0 rgb(0 0 0 / 50%); */
}




/*以下上下にアニメーションする表示の指定*/
.animated {
  animation: move-y .5s infinite alternate ease-in-out;
  display: inline-block;
  color: red;
}
@keyframes move-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/*以下フェードイン表示の指定*/
.fadein {
    opacity: 0;
    animation: fadein 1s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}
 
/*以下遅延の指定*/
.txt01 {animation-delay: 1s;}
.txt02 {animation-delay: 4s;}
.txt03 {animation-delay: 7s;}
.txt04 {animation-delay: 10s;}
.txt05 {animation-delay: 13s;}
.txt06 {animation-delay: 16s;}


.purun {
      -webkit-animation: purun 0.8s linear 0s 1;
      animation: purun 2.3s infinite alternate;
    }
@-webkit-keyframes purun {
    0%   { -webkit-transform: scale(0.0, 0.0) translate(0%, 0%); }
    15%  { -webkit-transform: scale(0.0, 0.0) translate(0%, 0%); }
    30%  { -webkit-transform: scale(0.0, 0.0) translate(0%, 0%); }
    50%  { -webkit-transform: scale(0.0, 0.0) translate(0%, 0%); }
    70%  { -webkit-transform: scale(0.0, 0.0) translate(0%, 0%); }
    100% { -webkit-transform: scale(0.0, 0.0) translate(0%, 0%); }
}
@keyframes purun {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
    15%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
    30%  { transform: scale(0.9, 0.9) translate(0%, 0%); }
    50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
    70%  { transform: scale(0.9, 0.9) translate(0%, 0%); }
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.fluffy {
  animation: fluffy1 2.5s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateX(0) }
  5% { transform:translateX(0) }
  10% { transform:translateX(0) }
  20% { transform:translateX(-15px) }
  25% { transform:translateX(0) }
  30% { transform:translateX(-15px) }
  50% { transform:translateX(0) }
  100% { transform:translateX(0) }
}

.sample-text1 {
    animation-name: fadein;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}
.sample-text2 {
    animation-name: fadein;
    animation-duration: 0.75s;
    animation-iteration-count: 1;
}
.sample-text3 {
    font-size: 27px;
	color: #FFF;
    animation-name: fadein;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
.sample-text3sp {
	font-size: 14px;
    text-align: center;
	color: #FFF;
    animation-name: fadein;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
.sample-text4 {
    animation-name: fadein;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
.sample-text5 {
    animation-name: fadein;
    animation-duration: 1.25s;
    animation-iteration-count: 1;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(35px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.blinking {
    -webkit-animation: blink 0.2s ease-in-out infinite alternate;
    animation: blink 0.2s ease-in-out infinite alternate;
}

/*---スライド---*/
.bg-image-loop {
	width: 100%;
	height: 180px; /* 画像の高さを指定 */
	position: relative;
	background: url("../images/09.jpg") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 23s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */
	margin: 0 0;
	padding: 0;
	min-width:1160px;
}
.sp_bg-image-loop {
	width: 100%;
	height: 100px; /* 画像の高さを指定 */
	position: relative;
	background: url("../images/09.jpg") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 45s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */
	margin: 0 0;
	padding: 0;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: 2200px 0; } /* 2200pxとは使用した背景画像の長さ */
}





/* exitpopup
==================================================================================================== */
#exitPopup {
  height: 20px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}
#overlay {
  background: rgba(0,0,0,.8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
#popupWindow {
  border: solid 20px #333;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
}






/* ウィンドウ幅が0〜768pxの場合に適用するCSS */
@media screen and ( max-width:750px )
{
img {max-width:100%; width /***/:auto; /*IE8用ハック*/} /*画像サイズが横幅に合わせて可変します*/

html { font-size: calc(112.5% + 0.5vw) }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

@media only screen and (max-width: 750px) {
img {  }width: 100%;
}