@charset "UTF-8";


.f_mplus-2p-regular{font-family: 'Noto Sans JP'; font-weight: 400;}
.f_mplus-2p-bold{font-family: 'Noto Sans JP';font-weight: 900;}



a,
img,
input,
svg,
*:before,
*:after {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}


#status {
  opacity: 0;
  position: fixed;
  right: 20px;
  top: 20px;
  background: hsla( 0, 0%, 0%, 0.8);
  padding: 20px;
  border-radius: 10px;
  z-index: 2; /* over other stuff */
}

:root {


}

.use_root{
	
}



.noto {
    
}

.thin {
    font-weight: 100;
}

.light {
    font-weight: 200;
}

.demi-light {
    font-weight: 300;
}

.regular {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.bold {
    font-weight: 700;
}

.black {
    font-weight: 800;
}


* {
	-webkit-tap-highlight-color: transparent;
	-webkit-overflow-scrolling: touch;
	outline: 0;
	box-sizing: border-box;
	max-height: 999999px;
	position: relative;
}
body, div, p, ul, ol, li, dl, dt, dd, table, th, td, img, figure, h1, h2, h3, h4, h5, h6, form, select {
	margin: 0;
	padding: 0;
}
ul, ol {
	list-style: none;
}
img {
	border: 0;
	vertical-align: bottom;
}
svg, input, select, textarea, label {
	vertical-align: middle;
}
table {
	border-collapse: collapse;
}
strong {
	font-weight: 700;
}

iframe {
	border: none;
}
:focus {
	outline: 0;
}

/*/////////////////////////
base layout　
//////////////////////////*/
html,body {
	width: 100%;
	font-size: 14px;
}
body {
	font-family:  'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 400;
	line-height: 1.6;
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	color:#666666;
	width: 100%;
	background: #102988;
	text-align: left;
    overflow-y: scroll;
    letter-spacing: -0.05em;
}



body.fixed{ overflow-x:hidden; overflow-y: scroll;}


body.fixed #container{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}

html.touchDevice,
.touchDevice body{ font-size: 26px;}


 #container{ position:relative; opacity: 0;}


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

a.noline, aa.noline:link {
	text-decoration: none !important;
}



hr {
	border: 0;
	padding: 0;
	margin: 0;
	height: 1px;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
:placeholder-shown {
 color: #666;
 opacity: 1;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
 color: #666;
 opacity: 1;
}

/* Firefox 18- */
:-moz-placeholder {
 color: #666;
 opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder {
 color: #666;
 opacity: 1;
}

/* IE 10+ */
:-ms-input-placeholder {
 color: #666;
 opacity: 1;
}
.placeholder {
	color: #666;
	opacity: 1;
}
:disabled {
	color: #fff !important;
	opacity: 1 !important;
}
textarea[disabled][readonly], input[disabled][readonly] {
	color: #fff !important;
	opacity: 1 !important;
}

/* IE Only
----------------------------------------------- */
#dp_swf_engine {
	display: none;
}




/* loading cover
----------------------------------------------- */

#loader{
	width: 5000px;
	height: 102%;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
	z-index:50000;
	
	background: url(./img/parts/loading_anim.gif) center center no-repeat #102988;


}

#loadingAnim{
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	text-align: center;
	transform: translate(-50%,-50%);
	display:block;
	color: #ccc;
		display:none;
	 

}


#loading_count{
	position: fixed;
	top: 53%;
	left: 50%;
	width: 200px;
	height: 5px;

	text-align: center;
	transform: translate(-50%,-50%);
	display:none;
	
	background: #e2e8f7;
	
}

#loading_count .bar{ 
 position: absolute; 
	top: 0; left: 0;
	width: 0%;
	height: 5px;
	background: #708ed5;
	

	
}

#loading_count .per{ 
 position: absolute; 
	top: 20px; left: 50%;
	transform: translate(-50%,0);
	width: auto;
	height: auto;
	color: #708ed5;
	font-size: 0.8rem;
}



#loading_count .bar.harf{ width: 50%;}
#loading_count .bar.up{ transition-duration:300ms !important;}




/* content tags
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0 auto 20px auto;
	font-weight: 900;
	display: block;
	line-height: 1;
}

h1{	font-size: 2.5rem;font-weight: 900; line-height: 1.3;}
h2{	font-size: 2rem;font-weight: 900;line-height: 1.3;}
h3{	font-size: 1.75rem;font-weight: 900;line-height: 1.3;}
h4{	font-size: 1.5rem;}
h5{	font-size: 1.25rem;}
h6{	font-size: 1.1rem;}

section{ position: relative;width: 100%; padding:0; margin:0 auto 0px auto; }


p {
	margin-bottom: 2em;
}



p:last-child{}
p:nth-of-type(1){}


ul{ margin-bottom: 2em;}
ul li{}

li:first-child 		{/* 親の最初にあったら*/}
li:last-child 		{/* 親の最後にあったら*/}
li:nth-of-type(1) 	{/* n番目*/}
li:nth-child(odd) 	{/* 奇数*/}
li:nth-child(even) 	{/* 偶数*/}


th,td {
    border: solid 0px;  /* 枠線指定 */
    padding: 0px;      /* 余白指定 */
    font-weight: normal;
}
 
table {
    border-collapse:  collapse; /* セルの線を重ねる */

}

/* modal
----------------------------------------------- */
#coverWrap{ display: none; position: relative; z-index: 5000; width: 100%; height: auto; min-height: 100vh;  background: rgba(0,0,0,0.8); padding-bottom:100px; }

#coverWrap .modalClose.base{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

#coverWrap .modalClose.btn{ width: 120px; height: 120px;  position: fixed; top: 0px; right: 0px; z-index: 1; cursor: pointer;}
#coverWrap .modalClose.btn .bg:before,
#coverWrap .modalClose.btn .bg:after{ content: ''; display: block; width: 32px; height: 6px; background: #fff; position: absolute; top: 50%; left: 50%;z-index: 2;}

#coverWrap .modalClose.btn .bg:before{ transform: translate(-50%,-50%) rotate(-45deg);}
#coverWrap .modalClose.btn .bg:after{ transform: translate(-50%,-50%) rotate(45deg);}

#coverWrap .modalClose.btn .bg{ width: 80px; height: 80px; background: #3c7cf1; position: absolute; top: 0px; right: 0px; z-index: 1;}


#coverWrap .innerWrap{ top: 40px; padding:80px 40px; text-align: center;}
#coverWrap.narrow .innerWrap{ width:700px;}

#coverWrap.fullimage .innerWrap{ width:90vw; height: 90vh; max-width: 920px;}
#coverWrap.fullimage .innerWrap.kojinmei{ background:url(./img/top/kojinmei.png) center center no-repeat; background-size:contain; }

    .pcDevice #coverWrap{ font-size: 0.8em;} 

#coverWrap .contents{  height: auto;}


#coverWrap .contents h3.line{ font-size: 1.4em; line-height: 1.5; color: #3c7cf1; margin-bottom: 40px; display: inline-block;}
#coverWrap .contents h3.line:before{ content: ''; display: block; width: 100%; height: 14px; background: #fad302; position: absolute; bottom: 0; z-index: 1;}
#coverWrap .contents h3.line span{ position: relative; display: inline-block; z-index: 2;}

    .pcDevice #coverWrap .contents h3.line{ font-size: 2.4em;}

#coverWrap .contents p{font-size: 1.2em;}
#coverWrap .contents p.read{ color: #3c7cf1; margin-bottom: 40px;}

    .pcDevice #coverWrap .contents p{font-size: 1.6em;}

    #coverWrap .contents p.read strong{color: #102988;    font-weight: 900;}

#coverWrap .contents h2.title{ font-size: 1.75em;color: #102988; margin-bottom: 40px;}
    .pcDevice #coverWrap .contents h2.title{ font-size: 3em;}

#coverWrap .contents h2.title.icon{ padding-top: 140px;}
#coverWrap .contents h2.title.icon:before{ content: ''; display: block; width: 120px; height: 120px; background:url(./img/common/icon_jizen.svg) center center no-repeat; background-size:contain; position: absolute; top: 0; left: 50%; transform: translate(-50%,0);}

#coverWrap .contents dl.touhyou{ padding-left: 120px; text-align: left; margin-bottom: 80px;}

#coverWrap .contents dl.touhyou dt{margin-bottom: 25px; font-size: 1.4em; font-weight: 900;  color: #102988; line-height: 1.5;}
    .pcDevice #coverWrap .contents dl.touhyou dt{ font-size: 2.4em;}

#coverWrap .contents dl.touhyou dt:before{ content: ''; display: block; width: 100px; height: 120px; position: absolute; top: 0.2em; left: -120px;  z-index: 1;}

.pcDevice #coverWrap .contents dl.touhyou dt:before{ height: 90px;}

#coverWrap .contents dl.touhyou dt:after{ content: ''; display: block; width: 100%; height: 14px; background: #fad302; position: absolute; bottom: 0; left: 0; z-index: 1;}
#coverWrap .contents dl.touhyou dt span{ position: relative; display: inline-block; z-index: 2;}

#coverWrap .contents dl.touhyou dt:nth-of-type(1):before{ background:url(./img/common/icon_jizen_1.svg) center top no-repeat; background-size:contain;}
#coverWrap .contents dl.touhyou dt:nth-of-type(2):before{ background:url(./img/common/icon_jizen_2.svg) center top no-repeat; background-size:contain;}
#coverWrap .contents dl.touhyou dt:nth-of-type(3):before{ background:url(./img/common/icon_jizen_3.svg) center top no-repeat; background-size:contain;}


#coverWrap .contents dl.touhyou dd{ margin-bottom: 65px;font-size: 1.2em; line-height: 1.5;}
.pcDevice #coverWrap .contents dl dd{ font-size: 1.1em;}
#coverWrap .contents dl.touhyou dd:last-of-type{ margin-bottom: 0px;}


#coverWrap .contents .btnArea{opacity: 1 !important;}
#coverWrap .contents .btnArea .bgBtn{ width: 100%;}





.pcDevice #coverWrap .contents .pcWrap{ display: grid; grid-template-columns: 1fr 1fr;grid-gap: 30px;}

#coverWrap .contents dl.step{ padding-left: 0px; text-align: left; margin-bottom: 0px;}

#coverWrap .contents dl.step dt{margin-bottom: 0px; font-size: 1.9em; font-weight: 900;  color: #102988; line-height: 1.3;}
    .pcDevice #coverWrap .contents dl.step dt{ font-size: 2.2em;}


#coverWrap .contents dl.step dt:after{ content: ''; display: block; width: 100%; height: 14px; background: #fad302; position: absolute; bottom: 0; left: 0; z-index: 1;}
#coverWrap .contents dl.step dt span{ position: relative; display: inline-block; z-index: 2;color: #3c7cf1;}

#coverWrap .contents dl.step dt .number{ font-size:0.6em; display: block; transform: translate(0,0.3em);}
#coverWrap .contents dl.step dt .number:first-letter{ font-size:2em;}

#coverWrap .contents dl.step dd .image {text-align: center;}
#coverWrap .contents dl.step dd .image img{ width: 100%;}

#coverWrap .contents dl.step dd:after{content: ''; display: block; width: 180px; height: 180px; position: absolute;  z-index: 10; }
#coverWrap .contents dl.step:nth-of-type(1) dd:after{top: -43px; right: 145px;background:url(./img/modal/pop_1.png) center center no-repeat; background-size:contain;}

#coverWrap .contents dl.step:nth-of-type(2) dd:after{top: -123px; right: 30px;background:url(./img/modal/pop_2.png) center center no-repeat; background-size:contain;}


    .pcDevice #coverWrap .contents dl.step dd:after{width: 90px; height: 90px; }
    .pcDevice #coverWrap .contents dl.step:nth-of-type(1) dd:after{top: -25px; right: 50px;}
    .pcDevice #coverWrap .contents dl.step:nth-of-type(2) dd:after{top: -61px; right: 10px;}

/* class
----------------------------------------------- */
.text{ text-align:left;}


.tLeft{ text-align:left;}


.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 50px;
	padding: 0;
	margin: 0;

}
    



.grid.col_3{
	grid-template-columns: 1fr 1fr 1fr;
}

.grid.col_2{
	grid-template-columns: 1fr 1fr;
}

.grid.col_1{
	grid-template-columns: 1fr;
}

.grid.sp_col_2{
	grid-template-columns: 1fr 1fr;
}


.grid .center {
	display: grid;
	align-items: center;
}

.gridItem {

}

img.full{width:100%; height: auto;}


ul.kome{ text-align: left !important;}
ul.kome li{ padding-left: 1.5em; margin-bottom: 10px; position: relative; line-height: 1.3;}
ul.kome li:before{ content: '※'; display: inline-block; position: absolute; top: 0; left: 0;}


table.data{ margin-bottom: 1em;}
table.data th{ white-space: nowrap; vertical-align: top;}
table.data th:after{ content: '：';}

ul.list{ list-style: disc; padding-left: 1.3em;}
ul.list li{}


.animeOff *{transition: all 0ms cubic-bezier(.50, .0, .50, 1) 0ms !important;}

.tsume{ display: inline-block; letter-spacing: -0.3em;}

.newsList{ text-align: left; }
.newsList dl{
		display: grid;
	grid-template-columns: 160px 1fr;
	grid-auto-rows: auto;
	grid-gap: 5px;
	padding: 0px 0 20px 0;
    margin-bottom: 20px;
	border-bottom: solid 3px #000;
}
.newsList dl dt{ font-size: 0.8em; padding-left: 30px; line-height: 26px;}
.newsList dl dt:before{ content:''; display: block; width: 20px; height: 26px; background: url() left top no-repeat; background-size:contain; position: absolute; top: 0px; left: 0;}

.newsList dl dd{ font-size: 0.9em; line-height: 1.5; padding-top: 0.2em;}

.newsList dl dd a{ text-decoration:none;}


.newsList .bgBtn{ margin-top:40px;}




.bgBtn{transition: all 200ms cubic-bezier(.50, .0, .50, 1); display: inline-block; background: #102988; color: #fff; min-width: 480px; padding: 0 20px; line-height: 100px; text-decoration: none !important; text-align: center; font-weight: 900; font-size:1.6rem;}
.pcDevice .bgBtn:hover{ background-color:#273e94 !important;}

.bgBtn span{ display: inline-block; padding: 0 20px 0 80px;}
.bgBtn.iconForm span:before{ content: ''; display: inline-block; width: 60px; height: 45px; background: url(./img/common/icon_form.svg) center center no-repeat; background-size:contain;  position: absolute; top: 50%; left: 0; transform: translate(0,-50%);}

.bgBtn.arrow{ text-align:left; padding-left: 35px;}
.bgBtn.arrow:after{ content: ''; display: inline-block; width: 20px; height: 20px; position: absolute; top: 50%; right: 35px; transform: translate(0,-50%) rotate(-45deg); border-bottom: solid 4px #fad302; border-right: solid 4px #fad302;}

.bgBtn.toTop{min-width: 250px; line-height: 50px;}
.bgBtn.toTop.arrow:after{ width: 10px;  height: 10px;}

.toArchiveTop{ text-align:center; padding-top: 100px; display: none;}

.btnArea{ text-align: center;opacity: 0; transform: translate(0,50px);}
.btnArea.in{opacity: 1; transform: translate(0,0);}


.bgWhite{ background-color: #fff;}
.bgLight{ background-color: #e5eeff;}
.bgWater{ background-color: #c4d9ff;}
.bgSky{ background-color: #3c7cf1; color: #fff;}
.bgDark{ background-color: #102988; color: #fff;}

section.area.bgWhite h2.title{ color:#3c7cf1;}
section.area.bgLight h2.title{ color:#102988;}
section.area.bgWater h2.title{ color:#102988;}
section.area.bgSky h2.title{ color:#fad302;}
section.area.bgDark h2.title{ color:#fad302;}

section.area.bgWhite h3.titleRead{ color:#3c7cf1;}
section.area.bgLight h3.titleRead{ color:#3c7cf1;}
section.area.bgWater h3.titleRead{ color:#3c7cf1;}
section.area.bgSky h3.titleRead{ color:#fad302;}
section.area.bgDark h3.titleRead{ color:#fad302;}


.inview{ transition: all 500ms cubic-bezier(.50, .0, .50, 1);}


/* header
----------------------------------------------- */

header.globalHeader{ position: fixed;width: 100%; height: 80px; z-index: 100;color: #102988 !important; }

header.globalHeader a{color: #102988 !important;}




header.globalHeader .contentWrap{  width: 100%; height:80px; background: #fff;transition: all 500ms cubic-bezier(.50, .0, .50, 1);transform: translate(0,-120px); }

header.globalHeader.in .contentWrap,
body:not(.home) header.globalHeader .contentWrap{ transform: translate(0,0);}


header.globalHeader .logo{ display: grid;
align-items: center; width: 200px; height: 80px; position: absolute; top: 0px; left: 80px; font-size: 1.5rem; line-height: 1; font-weight: 900; text-decoration: none; letter-spacing: 0.3rem;}
header.globalHeader .logo small{ display: block; font-size: 0.7rem; letter-spacing: 0.2rem; padding:0 0 0 0.2em; margin-bottom: 5px;}
header.globalHeader .logo img{width:100%; height: auto;}

header.globalHeader .logo h1{ line-height:inherit;  padding: 0; margin: 0;}


header.globalHeader #menuBtn{width: 120px; height: 120px; position: fixed; top: 0px; right: 0px; cursor: pointer; opacity: 1; transform: translate(120px,0); transition: all 600ms cubic-bezier(0,0.5,0.5,1) 600ms;}

body:not(.home) header.globalHeader #menuBtn{transform: translate(0,0); }

body.introIn header.globalHeader #menuBtn{opacity: 1; transform: translate(0,0);}

header.globalHeader #menuBtn .bg{width: 80px; height: 80px; position: absolute; top: 0px; right: 0px;  background: #fff; }

header.globalHeader #menuBtn hr{transition: all 250ms cubic-bezier(.50, .0, .50, 1);width: 32px; height: 7px; background: #102988; position: absolute; position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%);}

    .pcDevice header.globalHeader #menuBtn:hover hr{background: #273e94;}

header.globalHeader #menuBtn hr:nth-of-type(1){ margin-top: -15px; }
header.globalHeader #menuBtn hr:nth-of-type(2){ }
header.globalHeader #menuBtn hr:nth-of-type(3){ margin-top: 15px;}

header.globalHeader.menuOpen{}
header.globalHeader.menuOpen #menuBtn hr:nth-of-type(1){ transform: translate(-50%,-50%) rotate(-45deg);margin-top: 0px; }
header.globalHeader.menuOpen #menuBtn hr:nth-of-type(2){ opacity: 0;}
header.globalHeader.menuOpen #menuBtn hr:nth-of-type(3){transform: translate(-50%,-50%) rotate(45deg);margin-top: 0px; }



header.globalHeader .share{ position: absolute; top: 28px; right: 100px; opacity: 0;transition: all 600ms cubic-bezier(0,0.5,0.5,1) 600ms;
}

body:not(.home) header.globalHeader .share{ opacity: 1;}


header.globalHeader.ouen .share{ right: 325px;}

header.globalHeader.ouen .ouenBtn{ position: absolute; top: 23px; right: 90px; background: #102988; width: 220px; height: 35px; line-height: 35px; color: #fff !important; text-decoration: none; text-align: center; padding-left: 32px;
cursor: pointer;
font-weight: 900;
opacity: 0;
    transition: all 600ms cubic-bezier(0,0.5,0.5,1) 600ms;
}
body:not(.home) header.globalHeader.ouen .ouenBtn{ opacity: 1;}
header.globalHeader.ouen .ouenBtn:before{ content:''; display: block; position: absolute; top: 50%; left: 6px; transform: translate(0,-50%);width: 35px; height: 35px;background: url(./img/common/icon_ouen.svg) center center no-repeat; background-size:75% 75%; }
header.globalHeader.ouen .ouenBtn:hover{transition: all 200ms cubic-bezier(.50, .0, .50, 1); background-color:#283f94;}

body.introIn header.globalHeader.ouen .ouenBtn{ opacity: 1;}



@media screen and (max-width: 900px) {
    header.globalHeader.ouen .share,
    header.globalHeader.ouen .ouenBtn{ display: none;}
}
    
header.globalHeader .share li{ display: inline-block; line-height: 0;}

header.globalHeader .share li:nth-of-type(1) { background:#1877f2; border-radius: 9999px; overflow: hidden;  }

header.globalHeader .share li:nth-of-type(2),
header.globalHeader .share li:nth-of-type(3){ margin-left: 7px;}

body.introIn header.globalHeader .share{ opacity: 1;}

#spMenu{ width: auto; border-right:0; padding: 40px;  background: #fff; position: fixed; top: 80px; right: 0px; text-align: left;  pointer-events: none; transition: all 250ms cubic-bezier(.50, .0, .50, 1); transform: translate(100%,0);}
header.globalHeader.menuOpen #spMenu{ pointer-events: all; transform: translate(0,-2px);}

#spMenu ul{ padding: 0; margin: 0;}
#spMenu ul li{ line-height:2.5;margin-bottom: 10px;font-size: 1.3em;}
#spMenu ul li a{ display: block; text-decoration: none; color:#102988 !important; white-space: nowrap;}
#spMenu ul li a:hover{ text-decoration: underline;}
#spMenu ul li.spacerBottom{ margin-bottom: 40px;}

#spMenu ul li a:hover span{ text-decoration: underline;}

#spMenu ul li a.iconBlank span{ display:inline-block; padding-right: 16px; line-height: 1.2;}
#spMenu ul li a.iconBlank span:after{ content:''; display: block; width: 8px; height: 7px;  position: absolute; top: 0; right:0; background: url(./img/parts/icon_blank_blue.png) center top no-repeat; background-size:contain;}

#globalFooter{ padding:160px 0 0px 0; background: #102988; }

#globalFooter .innerWrap{opacity: 0; }
#globalFooter .innerWrap.in{opacity: 1; }

#globalFooter > .innerWrap:nth-of-type(1){ padding-bottom: 80px;}
#globalFooter .innerWrap p:last-of-type{ margin-bottom: 0;}

#globalFooter ul.share{ margin-bottom: 40px;}
#globalFooter ul.share li{ display: inline-block; line-height: 0;}

#globalFooter ul.share li:nth-of-type(1) { background:#1877f2; border-radius: 9999px; overflow: hidden;  }

#globalFooter ul.share li:nth-of-type(1),
#globalFooter ul.share li:nth-of-type(2){ margin-right: 7px;}

#globalFooter .caution{ color:#fad302; margin-bottom: 40px; line-height: 1; }


#globalFooter h5{color:#3c7cf1; margin-bottom: 30px; font-size: 1em;}

#globalFooter ul.links{ margin-bottom: 80px;}
#globalFooter ul.links li{ display: inline-block; padding-right: 20px; margin-right: 20px; margin-bottom: 1rem; border-right:solid 1px #fff; line-height: 1; }
#globalFooter ul.links li:last-child{  border-right:0; padding-right: 0px; margin-right: 0px;}

#globalFooter ul.links li a.iconBlank{ padding-right:16px;}
#globalFooter ul.links li a.iconBlank:after{ content:''; display: block; width: 8px; height: 7px; position: absolute; top: 3px; right:0; background: url(./img/parts/icon_blank.png) center top no-repeat; background-size:contain;}

#globalFooter .libDems{ position:absolute; bottom: 80px; right: 0px; }
#globalFooter .libDems a{ margin-bottom: 20px; display: inline-block;}
#globalFooter .libDems a:last-child{margin-bottom: 0px;}



#globalFooter .sslBanner {
    position: relative;
   text-align: right;
}


#globalFooter .fullWrap{ background: #000; color: #fff;}
#globalFooter .fullWrap .copyright{display: inline-block; white-space: nowrap; line-height: 50px;}
#globalFooter .fullWrap .privacy{display: inline-block; white-space: nowrap; line-height: 50px; position: absolute; right: 0; font-size: 0.8rem; }
#globalFooter .fullWrap .privacy a{}


#fixedFooter {    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 100;
background: #fff;
bottom: 0;
left: 0;
    overflow: hidden;
    transform: translate(0,200px);
    transition: all 300ms cubic-bezier(.50, .0, .50, 1);
    opacity:0;
}

.introIn #fixedFooter { opacity:1;}

    .touchDevice #fixedFooter{height: 110px;}

    #fixedFooter .share{ display: block; position: absolute; bottom: 20px; left: 50%; transform: translate(-50%,0) scale(1,1);margin: 0; transform-origin: center bottom; height: 22px; padding: 0; vertical-align: top; line-height: 22px; font-size: 0; }
    
    .touchDevice #fixedFooter .share{transform: translate(-50%,0) scale(2.34,2.34);}

    #fixedFooter .share li{ display: inline-block; height: 22px; line-height: 22px;}
    #fixedFooter .share li:nth-of-type(1){ transform: translate(0,1px);
	        background: #1877f2;
    border-radius: 9999px;
    overflow: hidden;
    }    
        #fixedFooter .share li:nth-of-type(2),
    #fixedFooter .share li:nth-of-type(3){ margin-left:7px;}

    #fixedFooter .share li:nth-of-type(1) iframe{ transform: translate(0,1px)}


#fixedFooter.ouen{ height: 200px;}

#fixedFooter.ouen a.ouen{ display: block; position: relative; top: 20px; margin: auto; background: #102988; width:90%; height: 90px; line-height:90px; color: #fff !important; text-decoration: none; text-align: center; padding-left: 35px;
cursor: pointer;
opacity: 1;
}

#fixedFooter.ouen a.ouen span{ display: inline-block; padding:0 80px; font-size: 1.2em; font-weight: 900;}
#fixedFooter.ouen a.ouen span:before{ content:''; display: block; position: absolute; top: 50%; left: 10px; transform: translate(0,-50%);width: 60px; height: 60px;background: url(./img/common/icon_ouen.svg) center center no-repeat; background-size:75% 75%; }



.touchDevice #fixedFooter.ouen .share{    transform: translate(-50%,0) scale(2.0,2.0);}


/* layout
----------------------------------------------- */
.innerWrap{ position: relative;width: 80%; height: 100%; max-width: 1000px; margin: auto; padding:0px;}

.innerWrap.lineBox{ border:solid 10px #fad302; padding: 80px 70px;}

section.area{ padding: 160px 0; border: solid 0px #f30;}
section.area h2.title{ font-size:2.6em; padding-top: 95px; margin-bottom: 150px; line-height: 1.2; text-align: center; font-weight: 900;opacity: 0; transform: translate(0,50px);}
section.area h2.title:before{ content:''; display: block; width: 50px; height: 50px;  position: absolute; top: 0; left: 50%; transform: translate(-50%,0);}

section.area h2.title.in{ opacity: 1; transform: translate(0,0);}

section.area h3.titleRead{ text-align: center; font-size:1.7em; line-height: 1.5; font-weight: 900; margin-bottom: 30px;opacity: 0; transform: translate(0,50px);}
section.area h3.titleRead.in{ opacity: 1; transform: translate(0,0);}

.contentsWrap{ position: relative;overflow: hidden; }
body:not(.home) .contentsWrap{ transform: translate(0,0); padding-top: 80px;}



/* top
----------------------------------------------- */
#topContents{ color:#fff;}


#topContents{ background-color:#102988; min-height:700px; max-height:800px;
    min-width: 750px;
    width: 100%;
    padding:0;
}

#topContents #mainVisual_1{ background:url(../img/top/mainvisual.jpg) center top no-repeat; background-size:cover; position:absolute; top:0; left:0; z-index:1;}
#topContents #mainVisualSlide{ position:absolute; top:0; left:0; z-index:1; overflow:hidden;
}


#topContents #mainVisualSlide:after {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; height: 100%;
    z-index: 3;
    overflow: hidden;
    background:url(./img/parts/bg_dot_black30.png) center center;
}

#topContents #slide {
    position:relative;
    z-index:2;
}
#topContents #slide ul{ margin:0 !important; padding:0 !important;}
#topContents #slide li {
    position:absolute;
    left:0px !important;
    top:0px;
    width:100% !important;
}



#slideWrap{
  width:100%;
    position:relative;
    z-index:2;margin:0 !important; padding:0 !important;
} 
#slideWrap li{
    position:absolute;
    left:0px !important;
    top:0px;
    width:100% !important;
}

  #slideWrap li:nth-of-type(1) { background:url(/wp/wp-content/uploads/slide_01.jpg) center center no-repeat; background-size:cover !important; }
    #slideWrap li:nth-of-type(2) { background:url(/wp/wp-content/uploads/slide_02.jpg) center center no-repeat; background-size:cover !important; }
    #slideWrap li:nth-of-type(3) { background:url(/wp/wp-content/uploads/slide_03.jpg) center center no-repeat; background-size:cover !important; }
     #slideWrap li:nth-of-type(4) { background:url(/wp/wp-content/uploads/slide_04.jpg) center center no-repeat; background-size:cover !important; }
     


#topContents .innerWrap{  width: 90%;position: relative; z-index: 10; padding: 80px 0 80px 0;max-width:none;}

#topContents .innerWrap .name{ width: 50%; margin-bottom: 70px; opacity: 0; transform: translate(0,0px); transition: all 1000ms cubic-bezier(0,0.5,0.5,1) 100ms;}
body.introIn #topContents .name{opacity: 1; transform: translate(0,0);}




#topContents .innerWrap .name span{ display: block;font-size: 2.7rem; letter-spacing: 0rem; margin-bottom: 30px; line-height: 1; font-weight: 900; }
#topContents .innerWrap .name img{ width: 100%; height: auto;}


#topContents .innerWrap .logoMark{width: 560px; padding-left:170px; max-width: 560px;}
#topContents .innerWrap .logoMark:before{ content:''; display: block; width: 165px; height: 138px; position: absolute; top: 50%; left: 0; transform: translate(0,-50%); background:url(./img/common/logo_mark.png) center top no-repeat; background-size:contain;}

#topContents .innerWrap .logoMark span{ margin-bottom: 10px; font-size: 2.2rem; padding-left: 0.07em;}



#topContents .innerWrap .read{ font-size: 2.2rem; margin-bottom: 20px; line-height: 1.5; font-weight: 900;opacity: 0; transform: translate(0,0px);transition: all 1000ms cubic-bezier(0,0.5,0.5,1) 100ms;}
body.introIn #topContents .read{opacity: 1; transform: translate(0,0);}

#topContents .innerWrap .youtube{display: grid;
align-items: center; text-align: center; width: 360px; height: 203px; background: #000;opacity: 0; transform: translate(0,50px); transition: all 600ms cubic-bezier(0,0.5,0.5,1) 600ms;}
body.introIn #topContents .innerWrap .youtube{opacity: 1; transform: translate(0,0);}

#topContents .innerWrap .youtube iframe{ width: 100%; height: 100%;}

#topContents .innerWrap .link{ grid-gap: 30px; width: 350px;position: absolute; bottom: 60px; right: 0;}
#topContents .innerWrap .link li{opacity: 0; transform: translate(0,50px); }

#topContents .innerWrap .link li:nth-of-type(1){transition: all 600ms cubic-bezier(0,0.5,0.5,1) 600ms;}
#topContents .innerWrap .link li:nth-of-type(2){transition: all 600ms cubic-bezier(0,0.5,0.5,1) 600ms;}
body.introIn #topContents .innerWrap .link li{opacity: 1; transform: translate(0,0);}

#topContents .innerWrap .link li a{ width: 160px; height: 160px;  border-radius: 80px; text-align: center; text-decoration: none;

display: grid;
align-items: center;
font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.3;
cursor: pointer;
    

     
        /*animation: animation 1000ms linear infinite;*/
        
}

.pcDevice #topContents .innerWrap .link li a:before{ content: ''; 
	
	width: 160px; height: 160px; border-radius: 80px; background: #3c7cf1;
	position: absolute; top: 0; left: 0;
	   animation: circleAttention2 ease-in-out 2500ms;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
      transition: all 200ms cubic-bezier(.50, .0, .50, 1); 
	
}


.pcDevice #topContents .innerWrap .link li a:hover:before{background: #4f89f2;}


#topContents .innerWrap .link li a:after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
    border-bottom: solid 3px #fad302;
    border-right: solid 3px #fad302;
    
    animation: arrowdown 2500ms infinite ;
    
}

#topContents .innerWrap .link li a small{ font-size:0.6em;}

#topContents .innerWrap .link li a .item{ margin-top: -15px;}

section#topContents .innerWrap .share{display: none;}


#topContents.in{}






/* tools
----------------------------------------------- */
section#tools{ padding: 0;}
section#tools .innerWrap{ padding: 10px 0; opacity: 0;}
section#tools .innerWrap.in{ opacity: 1;}

section#tools ul.share{ position: absolute; right: 5px; top: 50%; opacity: 0;transform: translate(0,0%);}
section#tools ul.share.in{opacity: 1; transform: translate(0,-50%);}
section#tools ul.share li{ display: inline-block; margin-left: 10px;}

section#tools .today{ z-index: 2; display: block; width:240px; height:auto; line-height: 40px; padding-left:62px; overflow: hidden; background:#3c7cf1; text-decoration: none; font-weight: 900;transition: background 200ms cubic-bezier(.50, .0, .50, 1); }


section#tools .today:hover{background: #4f89f2;}

section#tools .today:before{ content:''; display: block; width: 30px; height: 30px; position: absolute; top: 50%; left: 20px; transform: translate(0,-50%);background: url(./img/common/icon_calendar.svg) no-repeat; background-size:contain;}

section#tools .today:after{ content:''; display: block; width: 12px; height: 12px; position: absolute; top: 50%; right: 20px; transform: translate(0,-50%) rotate(-45deg); border-bottom: solid 3px #fff;border-right: solid 3px #fff;}

section#tools #feedArea{ display: block;  height:auto; padding-left:260px; position: absolute; top: 0; left: 0; z-index: 1;
width:100%;
     min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}

section#tools #feedArea a{
      display: block;  height:auto; line-height: 60px; 
width:100%;
     min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* link
----------------------------------------------- */
section#links{ padding:80px 0;}

section#links h2{}

ul.banner{ grid-template-columns: 1fr 1fr;grid-gap: 20px; opacity: 0; transform: translate(0,50px);}
ul.banner.in{ opacity: 1;transform: translate(0,0px);}

ul.banner li{ text-align: left !important; line-height: 1;}
ul.banner li a{ text-decoration: none; display: grid; align-items: center; background: #ccc; height: 100px;}

ul.banner li a:before{ content:''; display: block; width: 60px; height: 60px; position: absolute; left: 30px; top: 50%; transform: translate(0,-50%); }

ul.banner li h4{ line-height: 1; display: block; width: 100%;  height: auto; max-width: 100%; margin-bottom: 0px; padding-left: 110px; padding-right: 30px; font-size: 1.5em; font-weight: 900;}
ul.banner li small{ display:block; padding-top: 10px; font-weight: 400; font-size: 0.8em; }

ul.banner li:nth-of-type(1) a{ background-color: #1b95e0;}
ul.banner li:nth-of-type(2) a{ background-color: #2d8c3c;}
ul.banner li:nth-of-type(3) a{ background-color: #3b5998;}
ul.banner li:nth-of-type(4) a{ background-color: #ff0000;}

ul.banner li:nth-of-type(5) a{ background-color: #f00075;}

ul.banner li:nth-of-type(1) a:before{ background:url(./img/common/icon_x.svg) center center no-repeat; background-size:contain;}
ul.banner li:nth-of-type(2) a:before{ background:url(./img/common/icon_blog.svg) center center no-repeat; background-size:contain; left: 36px;}
ul.banner li:nth-of-type(3) a:before{ background:url(./img/common/icon_facebook.svg) center center no-repeat; background-size:contain;}
ul.banner li:nth-of-type(4) a:before{ background:url(./img/common/icon_youtube.svg) center center no-repeat; background-size:contain;}

ul.banner li:nth-of-type(5) a:before{ background:url(./img/common/icon_instagram.svg) center center no-repeat; background-size:contain;}



section#links #ouenArea{ margin-top: 20px; text-align: center; padding: 80px 80px 180px 80px; max-height:0:transition: all 5000ms cubic-bezier(.50, .0, .50, 1) 500ms;overflow: hidden; position: relative; color: #fff;}

section#links #ouenArea:before{ content:'';    background-color: #102988; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;transition: all 5000ms cubic-bezier(.50, .0, .50, 1);}

section#links #ouenArea .contentWrap{ margin-bottom: 0px; position: relative; z-index: 2;}
section#links #ouenArea .contentWrap h2.title{font-size: 3.4em; opacity: 1; color: #fff; padding-bottom: 12px; margin-bottom: 40px;    transform: translate(0,0px); position: relative; display: inline-block; white-space: nowrap;}

section#links #ouenArea .contentWrap h2.title:before{ width: 80px;height: 60px; background: url(./img/common/icon_ouen.svg) center center no-repeat; background-size:contain; }

section#links #ouenArea .contentWrap h2.title hr{ background: #fad302; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px;}


section#links #ouenArea .contentWrap .read{margin-bottom: 40px; font-size: 1.7em;}
section#links #ouenArea .contentWrap .btn{ cursor: pointer;position: absolute; bottom:-130px; left: 50%; transform: translate(-50%,0);display: block; width: 80%; max-width: 480px; margin: auto; padding: 0; line-height: 100px; background: #3c7cf1; color: #fff; font-size: 2.5em; font-weight: 900; transition: all 200ms cubic-bezier(.50, .0, .50, 1);}

section#links #ouenArea .contentWrap .btn:hover{ background-color:#5089f2 !important;}

section#links #ouenArea .contentWrap .btn span{ display: inline-block;
    animation: boyon .4s ease infinite alternate;
    
  }



section#links #ouenArea .select{
     position: relative; z-index: 2;
    display: none;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	grid-gap: 20px;
	padding: 0;
	margin: 0;
    opacity: 0;
    transition: all 500ms cubic-bezier(.50, .0, .50, 1);
}
section#links #ouenArea .select li{ margin-bottom: 80px;}

section#links #ouenArea .select li .image{ width: 100%; padding: 40px 40px 20px 40px; margin-bottom: 20px;background: #fff; color: #000;}
section#links #ouenArea .select li .image img{ width: 100%; height: auto; margin-bottom: 20px;}
section#links #ouenArea .select li .image p{ text-align: left; line-height: 1.5; margin-bottom: 0; padding: 0 20px;}

section#links #ouenArea .select li .text{ padding:0px 0 40px 0; margin: 0; text-align: center; font-size: 2.3em; line-height: 1.6;}

section#links #ouenArea .select li ul{
    	display: grid;
	grid-template-columns:1fr 220px;
	grid-auto-rows: auto;
	grid-gap: 20px;
	padding: 0;
	margin: 0;
    
}
section#links #ouenArea .select li ul li{ margin: 0;}

section#links #ouenArea .select li ul li a{ display: block !important; height: 100px; line-height: 100px; overflow: hidden;transition: all 200ms cubic-bezier(.50, .0, .50, 1); color:#fff;  font-weight: 900; text-align: left; text-decoration: none;}



section#links #ouenArea .select li ul li:nth-of-type(1) a{ background:url(./img/common/icon_x.svg) 30px center #1b95e0 no-repeat; background-size:auto 50px; font-size: 2.5em; padding-left: 100px;}
section#links #ouenArea .select li ul li:nth-of-type(2) a{ background:url(./img/top/share/icon_share_fb.svg) 20px center  #3b5998 no-repeat; background-size:auto 60px;font-size: 1.6em;padding-left: 73px;}


section#links #ouenArea .select li ul li:nth-of-type(1) a:hover{ background-color:#32a0e3 !important;}
section#links #ouenArea .select li ul li:nth-of-type(2) a:hover{ background-color:#4f6aa3 !important;}

section#links #ouenArea .select li ul li:nth-of-type(3){}
section#links #ouenArea .select li:last-child{ margin-bottom: 0;}

section#links #ouenArea.open{ padding-bottom: 160px; margin-bottom: 80px;}
section#links #ouenArea.open .contentWrap .btn{ opacity: 0; pointer-events: none;}
section#links #ouenArea.open .select{ padding-top: 30px; display: grid; }
section#links #ouenArea.open .select.in{  opacity: 1;}



@media screen and (max-width:1100px) {
    section#links #ouenArea .contentWrap h2.title{font-size: 3em;}
}

@media screen and (max-width:960px) {
    section#links #ouenArea .select li ul{grid-template-columns:1fr 130px;}
    section#links #ouenArea .select li ul li a{ height: 60px; line-height: 60px; }
    
    section#links #ouenArea .select li ul li:nth-of-type(1) a{  background-size:auto 35px; font-size: 1.8em; padding-left: 83px;}
section#links #ouenArea .select li ul li:nth-of-type(2) a{ background-size:auto 40px;font-size: 0.9em;padding-left: 53px;}
.pcDevice #topContents .innerWrap .link li a:before{ display: none;}

}

@media screen and (max-width:940px) {
    section#links #ouenArea .contentWrap h2.title{font-size: 4vw;}
    section#links #ouenArea .contentWrap .read{font-size: 2.2vw;}
    section#links #ouenArea .select li .text{ font-size: 2vw;}

}


@media screen and (max-width:750px) {
    section#links #ouenArea .contentWrap h2.title{ font-size: 2.4em; line-height: 1.5;}
    section#links #ouenArea .contentWrap h2.title hr:nth-of-type(1){ bottom: 0.1em; left:50%;  transform: translate(-50%,0);width:85%;}
    section#links #ouenArea .contentWrap h2.title hr:nth-of-type(2){ bottom: 1.6em; left:50%; transform: translate(-50%,0); width:100%;}
    section#links #ouenArea .contentWrap .read{ font-size: 1.3em; text-align: left; line-height: 1.3;}
    section#links #ouenArea .select li .text{ text-align: left;    font-size: 1.3em;}
    section#links #ouenArea .contentWrap .btn{ font-size: 1.5em; width: 100%;    max-width: none;}
    
    section#links #ouenArea .select li .image p{font-size: 0.8em; padding: 0;}
        section#links #ouenArea .select li ul{grid-template-columns:1fr 170px;}
    section#links #ouenArea .select li ul li a{ height: 100px; line-height: 100px;}
    section#links #ouenArea .select li ul li:nth-of-type(1) a{  background-size:auto 40px; font-size: 1.2em; padding-left: 100px;}
section#links #ouenArea .select li ul li:nth-of-type(2) a{ background-size:auto 40px;font-size: 0.8em;padding-left: 53px;}

}


/* message
----------------------------------------------- */
section#message{}

section#message h2.title{ margin-bottom: 75px; padding-top: 85px;}
section#message h2.title:before{ width: 80px;height: 60px; background: url(./img/common/icon_message.svg) center center no-repeat; background-size:contain; }

section#message .lineBox{
    border: solid 10px #fad302;
    padding: 70px 70px;
    opacity: 0; transform: translate(0,50px);
}
section#message .lineBox.in{
    opacity: 1; transform: translate(0,0px);
}

section#message .lineBox .read{font-size:2.5em; font-weight: 900; text-align: center; line-height: 2; margin-bottom: 60px;}


section#message .lineBox .text{font-size:1.25em;line-height: 2;}



/* profile
----------------------------------------------- */
section#profile{}


section#profile h2.title:before{ width: 80px;height: 60px; background: url(./img/common/icon_profile.svg) center center no-repeat; background-size:contain; }

section#profile .grid.layout{grid-template-columns: 1fr 290px; grid-gap: 80px;opacity: 0; transform: translate(0,50px);}
section#profile .grid.in{opacity: 1; transform: translate(0,0);}

section#profile .gridItem.image{ grid-column: 2; grid-row: 1/2;}
section#profile .gridItem.image img{ width:290px; height: auto;}
section#profile .gridItem.contentWrap{grid-column: 1; grid-row: 1/2; }

section#profile .name{ display: grid; grid-template-columns: auto 1fr; grid-gap:10px; align-items: center; font-weight: 900; margin-bottom: 80px; margin-top: -20px; line-height: 1; font-size: 3.8em;}
section#profile .name small{ display: grid; align-items: center; font-size:0.5em; line-height: 50px;}


ruby > rt {
display: block;
font-size: 0.3em;
line-height: 1.2;
text-align: start;
transform: translate(0,10px);
}


.uaFF rt{ display: ruby-text-container;}

section#profile .name img{ height:auto; width: 290px;}


section#profile dl.history{display: grid; grid-template-columns: 10em 1fr; grid-gap:10px; margin-bottom: 80px;}
section#profile dl.history dt{ }
section#profile dl.history dd{}

section#profile table.data{ margin-bottom:2em;}



/* seisaku
----------------------------------------------- */
section#plan{}
section#plan h2.title:before{ width: 80px;height: 76px; background: url(./img/common/icon_plan.svg) center center no-repeat; background-size:contain; }

section#plan .mamoruWrap{ text-align: center;}
section#plan .mamoruWrap h4{ font-weight: 900; color: #3c7cf1; font-size: 2.05em; margin-bottom: 60px; line-height: 1.5;opacity: 0; transform: translate(0,50px);}
section#plan .mamoruWrap h4.in{opacity: 1; transform: translate(0,0px);}

section#plan .mamoruWrap h3{font-weight: 900;  font-size: 2.8em; margin-bottom: 160px; line-height: 1.5;opacity: 0; transform: translate(0,50px);}
section#plan .mamoruWrap h3.in{opacity: 1; transform: translate(0,0px);}

section#plan .mamoruWrap h3.gensoku{ max-width: 800px; margin-left: auto; margin-right: auto; font-size: 4.0em;}
section#plan .mamoruWrap h3.gensoku .grid{ padding-top:80px;}

section#plan .mamoruWrap h3.gensoku ruby{ position: relative;}
section#plan .mamoruWrap h3.gensoku ruby rt{  line-height: 0; transform: translate(0,-0.2em); vertical-align: middle;}



section#plan .mamoruWrap h3.gensoku .ruby{ position: relative;
  display: inline-block;
  
}
section#plan .mamoruWrap h3.gensoku .ruby .rt{
  
  display: inline-block;
  position: absolute;
  top:0;
  left: 50%;
  transform: translate(-50%,-0.8em);
  font-size: 0.3em;
  width: 100%;
 }



section#plan .planWrap{ background:  #3c7cf1; padding:80px 60px;}


dl.plan{}
dl.plan dt{ font-weight: 900; border-left: solid 20px #fad302; padding-left: 2em; padding-bottom: 3px; margin-bottom: 0.7em; font-size: 2.5em; line-height: 1.3;opacity: 0; transform: translate(0,50px);}
dl.plan dt.in{opacity: 1; transform: translate(0,0);}

dl.plan dt:before{ display: inline-block; width:auto; padding-right: 0.3em; text-align: right; position: absolute; top: 0; left: 0.3em;}
dl.plan dt:nth-of-type(1):before{ content:'Ⅰ.';}
dl.plan dt:nth-of-type(2):before{ content:'Ⅱ.';}
dl.plan dt:nth-of-type(3):before{ content:'Ⅲ.';}
dl.plan dt:nth-of-type(4):before{ content:'Ⅳ.';}
dl.plan dt:nth-of-type(5):before{ content:'Ⅴ.';}

dl.plan dd{margin-bottom: 80px; padding-left: 6.5em; color: #102988;font-size: 1em; line-height: 1.5;opacity: 0; transform: translate(0,50px);}
dl.plan dd.in{opacity: 1; transform: translate(0,0);}
dl.plan dt p{font-size: 0.7em; line-height: 1.5;  margin-bottom: 0.5em; padding-top: 30px; font-weight: 400;}

dl.plan dd:last-child{ margin-bottom: 0;}

dl.plan ul.list{ margin-bottom: 0em;font-size: 1.25em;}
dl.plan ul.list li{margin-bottom: 0.7em; line-height: 1.3; }

/* supporter
----------------------------------------------- */
section#supporter{}
section#supporter h2.title{ margin-bottom: 30px;}
section#supporter h2.title:before{ width: 80px;height: 80px; background: url(./img/common/icon_supporter.svg) center center no-repeat; background-size:contain; }

section#supporter p:last-of-type{ margin-bottom:60px;}

section#supporter p{opacity: 0; transform: translate(0,50px);}
section#supporter p.in{opacity: 0; transform: translate(0,0px);}

/* volunteer
----------------------------------------------- */
section#volunteer{}
section#volunteer h2.title{ margin-bottom: 30px; padding-top: 80px}
section#volunteer h2.title:before{ width: 80px;height: 80px; background: url(./img/common/icon_hand.svg) center center no-repeat; background-size:contain; }

section#volunteer p:last-of-type{ margin-bottom:60px;}

section#volunteer p{opacity: 0; transform: translate(0,50px);}
section#volunteer p.in{opacity: 0; transform: translate(0,0px);}

/* kenkin
----------------------------------------------- */
section#kenkin{}
section#kenkin h2.title{ margin-bottom: 30px;}
section#kenkin h2.title:before{ width: 80px;height: 80px; background: url(./img/common/icon_heart.svg) center center no-repeat; background-size:contain; }

section#kenkin p:last-of-type{ margin-bottom:40px;}

section#kenkin p{opacity: 0; transform: translate(0,50px);}
section#kenkin p.in{opacity: 0; transform: translate(0,0px);}


section#kenkin .ex{ padding: 30px; margin-bottom: 90px;font-size: 0.8em; border: solid 1px #9daecc;opacity: 0; transform: translate(0,50px);}
section#kenkin .ex.in{opacity: 0; transform: translate(0,0px);}
section#kenkin .maru{ margin-bottom: 0;}
section#kenkin .maru li{ padding-left: 1.5em; line-height: 1.3; margin-bottom: 0;}
section#kenkin .maru li:before{ content:'◎'; display: block; position: absolute; top: 0; left: 0;}



/* supporter
----------------------------------------------- */
section#jimin{}
section#jimin h2.title{ margin-bottom: 30px;}
section#jimin h2.title:before{ width: 80px;height: 80px; background: url(./img/common/icon_members.svg) center center no-repeat; background-size:contain; }

section#jimin p:last-of-type{ margin-bottom:60px;}

section#jimin p{opacity: 0; transform: translate(0,50px);}
section#jimin p.in{opacity: 0; transform: translate(0,0px);}



/* contact
----------------------------------------------- */
section#contact{}
section#contact h2.title{ margin-bottom: 30px;}
section#contact h2.title:before{ width: 80px;height: 80px; background: url(./img/common/icon_question.svg) center center no-repeat; background-size:contain; }

section#contact p:last-of-type{ margin-bottom:60px;}

section#contact p{opacity: 0; transform: translate(0,50px);}
section#contact p.in{opacity: 0; transform: translate(0,0px);}


/* office
----------------------------------------------- */
section#office{ text-align: center;}
section#office h2.title{ margin-bottom: 70px;}
section#office h2.title:before{ width: 80px;height: 80px; background: url(./img/common/icon_map.svg) center center no-repeat; background-size:contain; }
section#office h4{font-size: 1.7em; font-weight: 900;opacity: 0; transform: translate(0,50px);}
section#office h4.in{opacity: 1; transform: translate(0,0);}
section#office .map{ height: 300px; margin-bottom: 10px;opacity: 0; transform: translate(0,50px);}
section#office .map.in{opacity: 1; transform: translate(0,0);}
section#office .map iframe{ width: 100%; height: 100%;}
section#office p{ margin-bottom: 80px;opacity: 0; transform: translate(0,50px);}
section#office p.in{opacity: 1; transform: translate(0,0);}
section#office p:last-child{ margin-bottom: 0;}




/* feed
----------------------------------------------- */

section#feed{ }

section#feed .innerWrap{opacity: 0; transform: translate(0,50px);}
section#feed .innerWrap.in{opacity: 1; transform: translate(0,0);}

section#feed .grid { grid-gap: 20px; height: 500px;}
section#feed .grid .gridItem{ }
section#feed .grid .gridItem:nth-of-type(1){}
section#feed .grid .gridItem:nth-of-type(2){}

.facebook-wrapper {
    max-width: 500px;
    margin: 0 auto;
}
.facebook-wrapper > .fb-page {
    width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}





/* form
----------------------------------------------- */


dl.formWrap{ grid-template-columns: 200px 1fr; margin-bottom: 40px; grid-gap: 10px;}
dl.formWrap .googleCaptcha{ overflow:hidden;}
dl.formWrap .captchaArea{ width:250px; height: 60px; background: #ccc; float: right;}


#contactForm dl.formWrap .single,
#contactForm dl.formWrap .multi{ width:100%;}
#contactForm dl.formWrap .zip{ width:200px;}
#contactForm dl.formWrap .tel{ width:200px}
#contactForm dl.formWrap .medium{ width:100%;}
#contactForm dl.formWrap .min{ width:5em}

#contactForm .doui{ text-align: center; padding:40px 20px; margin-bottom: 40px;    border-top: solid 1px #ccc; border-bottom: solid 1px #ccc;}

dl.formWrap .hissu{ color:#c00; font-size: 0.7em;}
dl.formWrap {}
dl.formWrap dt{text-align: left; padding-right: 10px; font-weight: 900;}
dl.formWrap dd{ padding-bottom: 20px; padding-top: 0.2em;}
dl.formWrap dd span{ display: block;}

dl.formWrap dt .sub{ display: block !important; padding-top: 2px;}

#contactForm input[type="text"] ,
#contactForm input[type="email"] ,
#contactForm textarea{ padding: 10px; font-size: 16px; border: solid 1px #ccc;}

  #contactForm input[type="checkbox"]{
         transform: scale(2,2);
      margin-right: 1em;
       
    }


.response{ overflow:hidden; text-align: center; margin-bottom: 80px;}

#contactForm .wpcf7-submit{ display: grid;align-items: center; text-align: center;  border: 0; padding: 0; margin: 0; background: #102988; color: #fff; width: 250px; height: 50px; 
	    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 1.6rem;
	cursor:pointer;
	transition: all 300ms;
    margin: auto;
}

.pcDevice #contactForm .wpcf7-submit:hover{background: #273e94;}



#contactForm div.wpcf7-response-output {
	margin: 20px 0;
	padding: 20px;
	border: 0px solid #ff0000;
}
#contactForm div.wpcf7-mail-sent-ok,
#contactForm div.wpcf7-validation-errors,
#contactForm div.wpcf7-mail-sent-ng,
#contactForm div.wpcf7-spam-blocked,
#contactForm div.wpcf7-acceptance-missing{padding: 20px !important; border: 0 !important; background: #c4d9ff !important; color: #102988 !important;}

.wpcf7-recaptcha,
.inv-recaptcha-holder{ display:block; width:256px; float: none; margin: auto;}

#contactForm span.wpcf7-list-item{margin: 0 0 0 0em; display: block;}

.wpcf7-list-item-label{ display:inline-block !important;}





header.contentsHeader{}
header.contentsHeader h2.pageTitle{
    color: #102988;
    font-size: 1.6em;
    padding-top: 0px;
    margin-bottom: 3em;
    line-height: 1.2;
    text-align: left;
    font-weight: 900;
}



body.page_posts.supporter header.contentsHeader h2.pageTitle,
body.page_posts.volunteer header.contentsHeader h2.pageTitle,
body.page_posts.kenkin header.contentsHeader h2.pageTitle,
body.page_posts.contact header.contentsHeader h2.pageTitle{  padding-left: 80px;}


body.page_posts.supporter header.contentsHeader h2.pageTitle:before,
body.page_posts.volunteer header.contentsHeader h2.pageTitle:before,
body.page_posts.kenkin header.contentsHeader h2.pageTitle:before,
body.page_posts.contact header.contentsHeader h2.pageTitle:before{  content:''; display: block; width: 60px; height: 60px; position: absolute; left: 0px; top: 50%; transform: translate(0,-50%);}


body.page_posts.supporter header.contentsHeader h2.pageTitle:before{ background:url(./img/common/icon_supporter.svg) center center no-repeat; background-size:contain;}
body.page_posts.volunteer header.contentsHeader h2.pageTitle:before{ background:url(./img/common/icon_hand.svg) center center no-repeat; background-size:contain;}
body.page_posts.kenkin header.contentsHeader h2.pageTitle:before{ background:url(./img/common/icon_heart.svg) center center no-repeat; background-size:contain;}
body.page_posts.contact header.contentsHeader h2.pageTitle:before{ background:url(./img/common/icon_question.svg) center center no-repeat; background-size:contain;}



.entry-content h3 {
    color: #3c7cf1;
    font-size: 1.2em;
    line-height: 1.5;
    font-weight: 900;
    margin-bottom: 1.5em;
}

.entry-content .redArea{ color:#c00; margin-bottom: 40px;}


/* PC用アニメーション */

.anim{ transition: all 500ms cubic-bezier(.175,.885,.32,1.275); }


.inview{}
.inview.in{opacity:1 !important;}



@media screen and (max-width:1100px) {
	
    section#profile .name {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:960px) {
    
    #topContents {min-height: 800px;}
    #topContents .innerWrap{ width: 100%; padding: 0;min-height: 800px;}
    
    #topContents .innerWrap .name{ position: absolute; top: 60px; left: 5%; width: 40%;}
    #topContents .innerWrap .name span{ font-size: 2.2rem !important;}
    .pcDevice #topContents .innerWrap .name span{ font-size: 1.6rem !important;}
    
        #topContents .innerWrap .read{ position: absolute; top: 275px; left: 5%; white-space: nowrap;line-height: 1.5 !important;}
        #topContents .innerWrap .youtube{position: absolute; top: 400px; left: 5%;}
    
    #topContents .innerWrap .link {
        grid-gap: 2px;
        width: 100%;
        position: absolute;
        bottom: 0px;
        right: 0;
        background-color: #102988;
    }
    #topContents .innerWrap .link li{opacity: 1 !important; transform: translate(0,0) !important;}
    #topContents .innerWrap .link li .spSmall{ font-size:0.7em;}
    
    #topContents .innerWrap .link li a {
        width: 100%;
        height: 160px;
        border-radius: 0px;
        background: #fff;
        color: #102988;
        text-align: left;
        padding-left: 10%;
        text-decoration: none;
        display: grid;
        align-items: center;
        font-weight: 900;
        font-size: 1.2rem;
        line-height: 1.5;
    }
    
    #topContents .innerWrap .link li a:after{
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        right: 30px;
        left: auto;
        transform: translate(0,-50%) rotate(-45deg);
        border-bottom: solid 4px #102988;
        border-right: solid 4px #102988;
           animation: arrowright 2500ms infinite ;
    }
    
    #topContents .innerWrap .link li a .item{ margin-top: -10px;}
    
    #topContents .innerWrap .link li a br{ display:none;}
    #topContents .innerWrap .link li a br:nth-of-type(1){ display:inline-block;}
    
    section#tools .innerWrap{opacity: 1; transform: translate(0,0);}
    section#tools ul.share{opacity: 1; transform: translate(0,-50%);}
    
    section#links ul.banner{opacity: 1; transform: translate(0,0);}
    
    section#message .lineBox .read{ font-size: 1.3em; line-height: 1.6;}
    section#message .lineBox .text{ font-size: 1em; line-height: 1.6;}
    
	section#profile .grid.layout {
        grid-template-columns:1fr !important;
        grid-gap: 40px !important;
    }
    section#profile .gridItem {
        grid-column:auto !important;
        grid-row: auto !important;
    }
    
    section#profile .gridItem.image,
    section#profile .name{ text-align: center !important; line-height: 1;}
    section#profile .name small{ line-height: 1; padding-top: 20px;}
    section#profile .name img{ margin: auto;}
    
    section#plan .mamoruWrap h3 span{ display: block;}
    section#plan .mamoruWrap h3 br{display: none;}
    
}


@media screen and (max-width:750px) {
	
    
    #fixedFooter.in{ transform: translate(0,0);}
    
    
	.innerWrap {
        width: 90%;
    }
     .innerWrap.lineBox{   padding: 80px 50px;}
    
    .bgBtn{ font-size: 1.1em;}
    section.area h2.title{font-size: 2.1em;}
    section.area h3.titleRead{ font-size: 1.2em;}
    
    header.globalHeader,
    header.globalHeader .contentWrap,
    header.globalHeader .logo{ height: 120px;}
    header.globalHeader .logo{ left:40px;}
    
    header.globalHeader .logo h1{width: 320px;}
    header.globalHeader .logo h1 span{margin-bottom: 0;}
    
    header.globalHeader #menuBtn{}
    #spMenu {
        width: 100%;
        border-right: 0;
        padding: 40px;
        top: 120px;
        height: 100vh;
    }
    
    header.globalHeader #menuBtn .bg{    width: 120px;
    height: 120px;}
    
    
    header.globalHeader .share{display: none;}
    
    #spMenu ul li {
        line-height: 80px;
        font-size: 1.0em;
    }
    
    #globalFooter{ padding-top: 80px; overflow-x: hidden;Z}
    #globalFooter ul.share{transform: scale(1.8,1.8); transform-origin: left; width: 350px; overflow: hidden;}
    
    
    #slideWrap li:nth-of-type(1) { background:url(/wp/wp-content/uploads/slide_01_sp.jpg) center center cover  no-repeat !important;  }
    #slideWrap li:nth-of-type(2) { background:url(/wp/wp-content/uploads/slide_02_sp.jpg) center center cover  no-repeat !important; }
    #slideWrap li:nth-of-type(3) { background:url(/wp/wp-content/uploads/slide_03_sp.jpg) center center cover  no-repeat !important; }
    #slideWrap li:nth-of-type(4) { background:url(/wp/wp-content/uploads/slide_04_sp.jpg) center center cover  no-repeat !important; }
    
    
    section.area h2.title{ padding-top: 160px !important;}
    section.area h2.title:before{ width:125px !important; height: 125px !important;}
    
    section#topContents {min-height: 850px;}
    section#topContents .innerWrap{ min-height: 850px;}
    
    section#topContents .innerWrap .name{ width: 60%; }
    section#topContents .innerWrap .name span{ font-size: 1.2rem !important;}
    
    
section#topContents .innerWrap .logoMark{width: 540px; padding-left:160px; max-width: none;}
section#topContents .innerWrap .logoMark:before{ content:''; display: block; width: 155px; height: 126px; position: absolute; top: 50%; left: 0; transform: translate(0,-50%); background:url(./img/common/logo_mark.png) center top no-repeat; background-size:contain;}

section#topContents .innerWrap .logoMark span{ margin-bottom: 10px; font-size: 2.2rem;}

    
    
    
    section#topContents .innerWrap .read{ font-size: 1.2rem !important; top: 220px;}
    section#topContents .innerWrap .youtube{position: absolute; top: 540px; left: 5%;}
    
    section#topContents .innerWrap .share{ display: block; position: absolute; bottom: 10px; left: 50%; margin: 0; transform-origin: center bottom; transform: translate(-50%,0) scale(1,1); opacity: 0; transition: all 1000ms cubic-bezier(0,0.5,0.5,1) 800ms;}
    
    .touchDevice section#topContents .innerWrap .share{  transform: translate(-50%,0) scale(1.95,1.95); }
    
    body.introIn #topContents .share{ opacity: 1;}
 
    section#topContents .innerWrap .share li{ display: inline-block; line-height: 0;}
    section#topContents .innerWrap .share li:nth-of-type(1){      background: #1877f2;border-radius: 9999px;overflow: hidden;}
     section#topContents .innerWrap .share li:nth-of-type(2),
    section#topContents .innerWrap .share li:nth-of-type(3){ margin-left:7px;}
    
        section#topContents .innerWrap .share li:nth-of-type(1) iframe{ transform: translate(0,1px)}
    
    section#tools .today{  width: 300px;   line-height: 80px;}
    section#tools #feedArea { padding-left: 320px;}
    section#tools #feedArea a{ line-height: 120px;}

    section#tools .innerWrap{padding: 20px 0;}
    section#tools ul.share{ transform: translate(0,-50%) scale(1,1); transform-origin: right;}
    section#tools ul.share.in{ opacity: 1; transform: translate(0,-50%) scale(1,1);}
    
    .touchDevice section#tools ul.share{ transform: translate(0,-50%) scale(1.5,1.5); transform-origin: right;}
    .touchDevice section#tools ul.share.in{ opacity: 1; transform: translate(0,-50%) scale(1.5,1.5);}
    
    ul.banner {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }
    ul.banner li a{ height:140px;}
    ul.banner li h4{ padding-left: 130px;}
    ul.banner li a:before{ left:40px;}
    
    ul.banner li:nth-of-type(2) a:before{ left: 47px;}
    
    
    section#profile .gridItem.image img{ width:400px; height: auto;}
    section#profile .name{font-size: 2.2em;}
    section#profile dl.history{grid-template-columns:1fr !important; grid-gap:0px; }
    section#profile dl.history dd{ padding-bottom: 30px;}
    
    section#plan .mamoruWrap h4{   font-size: 1.3em;}
    section#plan .mamoruWrap h3{font-size: 1.7em; display: inline-block; text-align: left;}
    section#plan .mamoruWrap h3 br{display: inline-block;}
    
    section#plan .mamoruWrap h3.gensoku{ max-width: 800px; margin-left: auto; margin-right: auto; font-size: 2.0em;text-align: center;}
    section#plan .mamoruWrap h3.gensoku .grid{ padding-top:40px; grid-gap: 40px;}
    
    section#plan .mamoruWrap h3.juten{ padding-left:0.8em;}
    
    section#plan .planWrap{padding: 30px;}
    dl.plan dt{    font-size: 1.65em;  padding-left: 1.8em; padding-top: 10px}
    dl.plan dt:before{ left: 0.4em; top:10px;}
    dl.plan dt p{ padding-left: 0;font-size: 0.79em; padding-top: 1em;}
    dl.plan dd{   padding-left: 0px; font-size:0.8em;}
    
    dl.plan ul.list{}
    dl.plan ul.list li{}
    section#supporter p{ line-height: 1.4;}
    
    section#office p{font-size: 0.9em; }
    section#office .map{ height: 500px; margin-bottom: 20px;}
    
    section#feed{ padding-bottom: 550px;}
    section#feed .grid{
        margin: auto;
        width: 500px;
        grid-template-columns: 1fr;
        grid-gap: 50px;
        height: auto;
        transform-origin: center top;
        transform: scale(1.35,1.35);
    }
    
    
    #globalFooter .libDems {
        position: relative;
        bottom: auto;
        right: auto;
        padding-top: 80px;
    }
    
    #globalFooter .libDems img{ width:300px;}
    
    
    #globalFooter .sslBanner {
padding-top: 100px;
       text-align: left;
    }
    
    #globalFooter .sslBanner img{ min-width: 260px;}
    
    
    #globalFooter .fullWrap{ text-align:center; padding: 30px 0 40px 0;}
    #globalFooter .fullWrap .privacy {
        display: inline-block;
        white-space: nowrap;
        line-height: 50px;
        position: relative;
        right: auto;
        margin-bottom: 30px;
    }
    
   
     #globalFooter ul.links li a.iconBlank{ padding-right:20px;}
     #globalFooter ul.links li a.iconBlank:after{ width: 12px; height: 10px;    top: 8px;}
    
    #spMenu ul li a.iconBlank span{ padding-right:20px;}
    #spMenu ul li a.iconBlank span:after{ width: 12px; height: 10px;    top: 5px;}
    
    
    #contactForm .wpcf7-submit{  height: 100px;} 
    

    dl.formWrap { display: block;}
    
    #contactForm input[type="text"], 
    #contactForm input[type="email"], 
    #contactForm textarea {
        padding: 20px;
        font-size: 26px !important;
    }
    
     #contactForm input[type="checkbox"]{
         transform: scale(3,3);
         margin-bottom: 1em;
    }
    
    
}

/* ▲ max-width:750px  */



/* media
----------------------------------------------- */
.onlyPC{ display:inline-block !important;}
.onlySP{ display:none !important;}
		
@media screen and (max-width: 1000px) {	

}


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

	
	.onlyPC{ display:none !important;}
	.onlySP{ display:inline-block !important;}
	
	
	
	
}



/* keyframes
----------------------------------------------- */

@keyframes shake-horse1 {
  from, to {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}



.buruburu {
    display: inline-block;
    animation: hurueru .2s ;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}




.scrollAnim {
    animation: scrolltenmetsu 3000ms ;
}


@keyframes arrowdown {
    0% {  bottom: 25px;}
	10% { bottom: 20px;}
	30% {  bottom: 25px;}
	40% {  bottom: 20px;}
	50% {  bottom: 25px;}
	90% {  bottom: 25px;}
	100% {  bottom: 25px;}
}

@keyframes arrowright {
    0% { right: 35px;}
	10% { right: 30px;}
	30% {  right: 35px;}
	40% {  right: 30px;}
	50% {  right: 35px;}
	90% {  right: 35px;}
	100% {  right: 35px;}
}


@keyframes circleAttention {
    0% { transform: scale(1,1);}
    10% { transform: scale(1,1);}
    12% { transform: scale(1.1,1.1);}
	13% { transform: scale(1.05,1.05);}
	15% {  transform: scale(1.1,1.1);}
	30% {  transform: scale(1.1,1.1);}
	32% {  transform: scale(1,1);}
	33% {  transform: scale(1.05,1.05);}
	35% {  transform: scale(1,1);}
	100% { transform: scale(1,1);}
}

.element-animation{
  animation: circleAttention2 ease-in-out 3s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

@keyframes circleAttention2{
  0% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  22% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  25% {
    transform:  scaleX(1.15) scaleY(1.15) ;
  }
  29% {
    transform:  scaleX(1.10) scaleY(1.10) ;
  }
  34% {
    transform:  scaleX(1.14) scaleY(1.14) ;
  }
  41% {
    transform:  scaleX(1.15) scaleY(1.15) ;
  }
  54% {
    transform:  scaleX(1.15) scaleY(1.15) ;
  }
  57% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  62% {
    transform:  scaleX(1.05) scaleY(1.05) ;
  }
  66% {
    transform:  scaleX(1.01) scaleY(1.01) ;
  }
  73% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }

  }






@keyframes scrolltenmetsu {
    0% { opacity: 0;}
	20% { opacity: 1;}
	40% { opacity: 0;}
	60% { opacity: 0;}
	70% { opacity: 0;}
	80% { opacity: 0;}
	90% { opacity: 0;}
	100% { opacity: 0;}
}

@keyframes scrolltenmetsu2 {
    0% { opacity: 0;}
	50% { opacity: 1;}
	60% { opacity: 1;}
	100% { opacity: 0;}
}


@keyframes boyon {
0% {transform: translateY(1px);}
  100% {transform: translateY(-6px);}
}





.animation-target {
  -webkit-animation: animation 1000ms linear infinite both;
  animation: animation 1000ms linear infinite both;
}

/* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bl%3A1%2Cs%3A%5B%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A1000%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A1.5%2Cy%3A1.5%7D%2Cs%3A3%2Cb%3A5%7D%5D%7D */

@-webkit-keyframes animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.7% { -webkit-transform: matrix3d(1.245, 0, 0, 0, 0, 1.245, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.245, 0, 0, 0, 0, 1.245, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  7.31% { -webkit-transform: matrix3d(1.438, 0, 0, 0, 0, 1.438, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.438, 0, 0, 0, 0, 1.438, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.01% { -webkit-transform: matrix3d(1.543, 0, 0, 0, 0, 1.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.543, 0, 0, 0, 0, 1.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.61% { -webkit-transform: matrix3d(1.569, 0, 0, 0, 0, 1.569, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.569, 0, 0, 0, 0, 1.569, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.72% { -webkit-transform: matrix3d(1.516, 0, 0, 0, 0, 1.516, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.516, 0, 0, 0, 0, 1.516, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  32.83% { -webkit-transform: matrix3d(1.492, 0, 0, 0, 0, 1.492, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.492, 0, 0, 0, 0, 1.492, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  51.05% { -webkit-transform: matrix3d(1.501, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.501, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.27% { -webkit-transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  87.49% { -webkit-transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.7% { -webkit-transform: matrix3d(1.245, 0, 0, 0, 0, 1.245, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.245, 0, 0, 0, 0, 1.245, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  7.31% { -webkit-transform: matrix3d(1.438, 0, 0, 0, 0, 1.438, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.438, 0, 0, 0, 0, 1.438, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.01% { -webkit-transform: matrix3d(1.543, 0, 0, 0, 0, 1.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.543, 0, 0, 0, 0, 1.543, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.61% { -webkit-transform: matrix3d(1.569, 0, 0, 0, 0, 1.569, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.569, 0, 0, 0, 0, 1.569, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.72% { -webkit-transform: matrix3d(1.516, 0, 0, 0, 0, 1.516, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.516, 0, 0, 0, 0, 1.516, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  32.83% { -webkit-transform: matrix3d(1.492, 0, 0, 0, 0, 1.492, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.492, 0, 0, 0, 0, 1.492, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  51.05% { -webkit-transform: matrix3d(1.501, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.501, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.27% { -webkit-transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  87.49% { -webkit-transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}