@charset "utf-8";
/* 
---------------------------------------
common
---------------------------------------
*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0; padding:0;}
html {
	overflow-y:scroll;
	-webkit-text-size-adjust: 100%;
}
table{border-collapse:collapse; border-spacing:0; vertical-align:top;}
img {
	max-width: 100%;
	height: auto;
	border:0;
	vertical-align:top;
}
li{list-style:none;}
area:active{outline:none;}
a{outline:none;}
a:link{
	text-decoration: none;
}
a:hover img{filter: alpha(opacity=70); opacity:0.7;}

address{font-style:normal;}
h1,h2,h3,h4,h5,h6,p,th,td,table,dl,dt,dd,ul,ol,li{ font-weight:normal;}

.alnL{text-align:left;}
.alnC{text-align:center;}
.alnR{text-align:right;}

.opa70 {
  opacity: 0.7;
}
.textUnderLine{
	text-decoration: underline;
}
.no-wrap {
  white-space: nowrap;
}
/* 
---------------------------------------
フォント
---------------------------------------
*/
.font12{
	font-size: 12px;
}
.font16{
	font-size: 16px;
}
.font18{
	font-size: 18px;
}
.font21{
	font-size: 21px;
}
.font28{
	font-size: 28px;
}
.font32{
	font-size: 32px;
}
.fontRed{
	color: #F00;
}
.fontPink{
	color: #EC8076;
}
.fontBrown{
	color: #963;	
}
.fontBold{
    font-weight: bold;
}
/* 
---------------------------------------
padding
---------------------------------------
*/

.pt0{padding-top:0 !important;}
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt100{padding-top:100px !important;}

.pb0{padding-bottom:0 !important;}
.pb5{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb30{padding-bottom:30px !important;}
.pb50{padding-bottom:50px !important;}

.pl0{padding-left:0 !important;}
.pl5{padding-left:5px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl50{padding-left:50px !important;}

.pr0{padding-right:0 !important;}
.pr5{padding-right:5px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}
.pr50{padding-right:50px !important;}


/* 
---------------------------------------
追従バナー(右サイドバー)
---------------------------------------
*/
.right-fixed-banner {
	position: fixed;
	bottom: 0%;
	right: 0;
	width: 60px;
	margin-right: 0%;
    z-index: 4;
}
#rightInfo {
    position: relative;
	width:100%;
	height: 100px;
	background: #e56e00;
	writing-mode: vertical-rl;
	color:#fff;
}
#rightInfo p{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
	white-space: nowrap;
}
#rightForm {
    position: relative;
	width:100%;
	height: 120px;
	background: #87a322;
	writing-mode: vertical-rl;
	color:#fff;
}
#rightForm p{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
	white-space: nowrap;
}
#return {
    position: relative;
	width:100%;
	height: 60px;
	background: #666;
	text-align: center;
	color:#fff;
}
#return p{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.right-fixed-banner a:link{
	color:#fff;
	text-decoration: none;
}
.right-fixed-banner a:visited{
	color:#fff;
	text-decoration: none;
}
.right-fixed-banner a:hover{
	color:#fff;
	text-decoration: none;
	opacity: 0.7;
}
.right-fixed-banner a:active{
	color:#fff;
	text-decoration: none;
}
/* 
---------------------------------------
追従バナー(フットバー)
---------------------------------------
*/
.bottom-fixed-banner {
	position: fixed;
	bottom: 0%;
	left: 0;
	width: 100%;
	height: 40px;
	z-index: 4;
	background-color: #fff;
}
#bottom-fixed-box{
	width: 100%;
	height: 40px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	border-top: 1px solid #fff;
	background: #000;
	display: flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -ms-flexbox;
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	justify-content : space-between;
	-webkit-justify-content : space-between;
}
#bottomInfo {
	width:35%;
	height: 40px;
	background: #e56e00;
	text-align: center;
	color:#fff;
}
#bottomInfo p{
	padding: 10px 3px 10px 3px;
}
#bottomForm {
	width:45%;
	height: 40px;
	background: #87a322;
	text-align: center;
	color:#fff;
}
#bottomForm p{
	padding: 10px 3px 10px 3px;
}
#bottomReturn {
	width:20%;
	height: 40px;
	background: #666;
	text-align: center;
	color:#fff;
}
#bottomReturn p{
	padding: 10px 3px 10px 3px;
}
.bottom-fixed-banner a:link{
	color:#fff;
	text-decoration: none;
}
.bottom-fixed-banner a:visited{
	color:#fff;
	text-decoration: none;
}
.bottom-fixed-banner a:hover{
	color:#fff;
	text-decoration: none;
	opacity: 0.7;
}
.bottom-fixed-banner a:active{
	color:#fff;
	text-decoration: none;
}
/* 
---------------------------------------
フェードイン表示
---------------------------------------
*/
.fadein {
  opacity : 0;
  transform: translateY(-20px);
  transition: all 1s;
}
.fadein2 {
  opacity : 0;
  transform: translateY(-40px);
  transition: all 2s;
}
.fadein3 {
  opacity : 0;
  transform: translateY(-60px);
  transition: all 2s;
}
.fadein4 {
  opacity : 0;
  transform: translateY(-80px);
  transition: all 2s;
}
.fadein5 {
  opacity : 0;
  transform: translateY(-100px);
  transition: all 2s;
}
.fadein6 {
  opacity : 0;
  transform: translateY(-120px);
  transition: all 2s;
}
.fadein7 {
  opacity : 0;
  transform: translateY(-140px);
  transition: all 2s;
}

/* 
---------------------------------------
左右フェードイン
---------------------------------------
*/
/* 左からスライドイン */
.fadeinLeft {
　display: none;
  opacity: 0;
}
.fadein-left {
  animation-name: left;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  position: relative;
  display: block;
  opacity: 1;
}
@keyframes left {
  from {
    opacity: 0;
    left: -400px;
  }
  to {
    opacity: 1;
    left: 0;
  }
}

/* 右からスライドイン */
.fadeinRight {
　display: none;
  opacity: 0;
}
.fadein-right {
  animation-name: right;
  animation-duration: 2s;
  position: relative;
  display: block;
  opacity: 1;
}
@keyframes right {
  from {
    opacity: 0;
    left: 200px;
  }
  to {
    opacity: 1;
    left: 0;
  }
}

/* スクロール読み込み */
.scrolling {
　display: none;
  opacity: 0;
}
.scroll-1 {
  animation-name: moving;
  animation-duration: 3s;
  position: relative;
  display: block;
  opacity: 1;
}

@keyframes moving {
  from {
    opacity: 0;
    left: 0;
  }
  to {
    opacity: 1;
    left: 0;
  }
}
/* 
---------------------------------------
table
---------------------------------------
*/
table.common {
	width: 100%;
	margin-bottom: 15px;
}
table.common th{
	text-align: right;
	padding-top: 5px;
	padding-right: 25px;
	padding-bottom: 5px;
	padding-left: 5px;
}
table.common td{
	padding: 5px;
}

/* 
---------------------------------------
レスポンシブ対応　改行
---------------------------------------
*/
/*---PC時改行--*/
@media screen and (min-width:961px){
.br-pc{display:block;}
.br-tb{display:none;}
.br-sp{display:none;}
}
/*---タブレット時改行--*/
@media screen and (max-width: 960px) {
.br-pc{display:none;}
.br-tb{display:block;}
.br-sp{display:none;}
}
/*---スマホ時改行--*/
@media screen and (max-width: 767px) {
.br-pc{display:none;}
.br-tb{display:block;}
.br-sp{display:block;}
}



/* 
---------------------------------------
レスポンシブ対応 非表示
---------------------------------------
*/
@media screen and (max-width: 960px){
.noneTablet {display:none}
}
@media screen and (max-width:767px){
.noneSp {display:none}
}

/* 
---------------------------------------
レスポンシブ対応
---------------------------------------
*/
.pc	{ display:inline!important; }
.sp	{ display:none!important; }
@media screen and (max-width: 767px) {
.pc	{ display:none!important; }
.sp { display:inline!important; }
}



/* 
---------------------------------------
ボディ
---------------------------------------
*/

body {
	font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ヒラギノ角ゴ W3",Arial,sans-serif;
	font-size: 15px;
	line-height: 160%;
	margin: 0px;
	padding: 0px;
	color: #333;
	_display: inline;
	_zoom:1;
	background-color: #fff
}
button {
  color: #333;
}

@media screen and (max-width : 460px ){

/* 
---------------------------------------
table
---------------------------------------
*/

table.common {
	width: 100%;
	margin-bottom: 15px;
	margin-right: auto;
	margin-left: auto;
}
table.common th {
	display: block;
	padding: 5px;
	width:100%;
	text-align: left;
}
table.common td {
	display: block;
	padding: 5px;
	width:100%;
}
}