@charset "utf-8";
/* ===================================================================
CSS information
=================================================================== */
/* Theme Name:
Theme URI:
Author:SYUNSUKE ISHIDA */
/* -----------------------------------------------------------
■ PC用CSS 画面の横幅が481px以上のデバイスに適用
----------------------------------------------------------- */
body {
  line-height: 1.6;
  color:#23282D;
}
img {
  width: 100%;
}

/* -----------------------------------------------------------
■ヘッダー部分
----------------------------------------------------------- */
header {
	width:95%;
	margin:20px auto;
}
#header-logo {
	width:45%;
	margin:0 auto;
}
#main-menu {
	display: none;
}
#header-tel {
	display: none;
}
/* -----------------------------------------------------------
■コンテンツ全体
----------------------------------------------------------- */
#contents-title {
  padding: 100px 0 0 0;
  text-align: center;
  color: #fff;
  font-size: 50px;
  line-height: 0.8;
  text-shadow: 2px 2px 3px #a3a3a3;
  letter-spacing: 0.15em
}
#contents-title span {
  font-size: 20px;
  letter-spacing: 0em
}
/* -----------------------------------------------------------
■メイン部分
----------------------------------------------------------- */
#top-main-contents {
  width: 100%;
  padding: 0 0 30px 0;
  background: url("../../images/top/main-bg.jpg") no-repeat;
	background-size: contain;

}
#inner-contents {
	padding:180px 0 0 0;
}
#about-main-contents {
  width: 100%;
  padding: 0 0 30px 0;
  background: url("../../images/about/about-img.png") no-repeat 50% 0 #f8f8f8;
}
#about-inner-contents {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0 0 0;
}
#shisetsu-main-contents {
  width: 100%;
  padding: 0 0 30px 0;
  background: url("../../images/shisetsu/shisetsu-img.png") no-repeat 50% 0 #f8f8f8;
}
#shisetsu-inner-contents {
  width: 100%;
  margin: 0 auto;
  padding: 80px 0 0 0;
}
#blog-main-contents {
  width: 100%;
  padding: 0 0 30px 0;
  background: url("../../images/shisetsu/shisetsu-img.png") no-repeat 50% 0 #f8f8f8;
}
#blog-inner-contents {
  width: 100%;
  margin: 0 auto;
  padding: 80px 0 0 0;
}
#policy-main-contents {
  width: 100%;
  padding: 0 0 30px 0;
  background: url("../../images/about/about-img.png") no-repeat 50% 0 #f8f8f8;
}
#policy-inner-contents {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0 0 0;
}
#contact-main-contents {
  width: 100%;
  padding: 0 0 30px 0;
  background: url("../../images/about/about-img.png") no-repeat 50% 0 #f8f8f8;
}
#contact-inner-contents {
  width: 100%;
  margin: 0 auto;
  padding: 60px 0 0 0;
}

/* -----------------------------------------------------------
■メニュー部分
----------------------------------------------------------- */
.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s;
}
.overlay.open {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.menu-trigger {
  display: inline-block;
  width: 36px;
  height: 28px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 100;
/*   transform: translateX(0);
  transition: transform .5s;
 */}
/* .menu-trigger.active {
  transform: translateX(-250px);
}
 */.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #2CA8E8;
  transition: all .5s;
}
.menu-trigger.active span {
  background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-12px) rotate(45deg);
}
 
nav.drawer {
  width: 250px;
  height: 100%;
  padding-top: 50px;
  background-color: rgb(16, 69, 153, 0.8);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  transform: translate(250px);
  transition: all .5s;
}
nav.open {
  transform: translateZ(0);
}
nav.drawer li {
  padding: 0 0 8px 10px;
  font-size:90%;
}
nav.drawer li a {
  color:#fff;
}
.drawer-menu01 {
	margin:0 0 12px 0;
	border-bottom:1px dotted #bbdbf3;
}

.drawer-menu02 {
	margin:0 0 8px 0;
	border-bottom:1px dotted #006eb0;
}

/* -----------------------------------------------------------
■フッター部分
----------------------------------------------------------- */
footer {
	padding: 0 20px;
	background: #2CA8E8;
}
#footer-logo {
	width:50%;
	margin:0 auto;
	padding: 20px 0;
}
#footer-menu {
	display: none;
}
footer nav.footer-menu-list {
}
footer nav.footer-menu-list2 {
}
footer nav li {
}
footer nav li a {
}
footer nav li a:hover {
}
.footer-sitemap-link {
}
#footer-undernavi {
	display: none;
}
#footer-undernavi ul {

}
#footer-undernavi ul li a {
}
address {
	padding:10px 0;
	text-align:center;
}
/* -----------------------------------------------------------
■トップページ
----------------------------------------------------------- */
#top-container {

}
#top-container h1 {
    margin: 0 0 20px 0;
    font-size: 180%;
    text-align: center;
    color: #3694c4;
}
.wf-sawarabimincho {
  font-family: "Sawarabi Mincho";
}
#top-container a {
  transition: 0.5s;
}
#top-container a:hover {
  opacity:0.7;
}
#office-box {
	width:96%;
	margin:0 auto;
}
.office-1,.office-2 {
	width:92%;
	margin:0 auto 20px auto;
	padding:10px;
	background:#f0f8ff;
}
#office-box img {
}
#office-box h2 {
	text-align:center;
	font-size:115%;
	color:#096FC8;
}
.office-1 p,.office-2 p {
	text-align:center;
	color:#23282D;
}
#two-column {
	width:96%;
	margin:0 auto;
}
#news-box {
	width:96%;
	margin:0 auto;
}
#news-box h2 {
    margin: 40px 0 20px 0;
    font-size: 160%;
    text-align: center;
    color: #3694c4;
}
#news-box li {
	width:80%;
	margin:0 auto 20px auto;
	padding:15px;
	background:#F5F5F5;

}
#news-box li span {
}
#news-box li a {
	color:#23282D;

}
#news-box li a:hover {
}
#fece-box {
}
#fece-box h2 {
    margin: 40px 0 20px 0;
    font-size: 160%;
    text-align: center;
    color: #3694c4;
}
#fece-frame {
	width: 350px;
	margin:0 auto;
}
#recruit-ad {
  width: 96%;
  margin: 0 auto 30px auto;
  background: #ffffff;
}
#recruit-ad a {
	display:block;
	text-align:center;
}
#recruit-ad img {
	width:50%;
}
/* -----------------------------------------------------------
■法人案内
----------------------------------------------------------- */
#aboutus {
  width: 96%;
  margin: 0 auto 30px auto;
  background: #FFFFFF;
}
#aboutus h2 {
  margin: 0 0 30px 0;
  padding:20px 0 0 0;
  font-size: 30px;
  text-align: center;
  color: #3694c4;
}
#aboutus table {
	width:96%;
	margin: 0 auto 30px auto;
}
#aboutus table tr {
}
#aboutus table th {
	width:92%;
	margin:0 auto;
	padding:8px;
	display:block;
	color:#fff;
	text-align:left;
	background:#188DC8;
	font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
#aboutus table td {
	width:92%;
	margin:0 auto;
	padding:8px 0 16px 0;
	display:block;
    font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
#philosophy {
  width: 96%;
  margin: 0 auto 30px auto;
  padding: 50px 0;
  background: #FFFFFF;
}
#philosophy h2 {
  margin: 0 0 30px 0;
  font-size: 30px;
  text-align: center;
  color: #3694c4;
}
#representative {
  width: 96%;
  margin: 0 auto 30px auto;
  padding: 50px 0;
  background: #FFFFFF;
}
#representative h2 {
  margin: 0 0 30px 0;
  font-size: 30px;
  text-align: center;
  color: #3694c4;
}
#philosophy h3 {
  margin: 0 0 15px 0;
  font-size: 26px;
  text-align: center;
  color: #3694c4;
}
#philosophy .cnter-text {
  margin:0 0 15px 0;
  font-size: 18px;
  text-align: center;
}
.article-text {
  width: 92%;
  margin:0 auto 20px auto;
  font-size:108%;
}
.align-right {
  width: 92%;
  margin:0 auto 20px auto;
  text-align:right;
}
.align-right span {
  font-size:150%;
}
#houkoku {
  width: 96%;
  margin: 0 auto 30px auto;
  padding: 30px 0;
}
#kessan,#genkyo {
  width: 94%;
  margin: 0 auto 20px auto;
  padding: 0 3%;
  background: #fff;
}
#kessan ul, #genkyo ul {
  width: 96%;
  padding: 0 0 40px 0;
  margin: 0 auto;
}
#kessan h2, #genkyo h2 {
  margin: 0 0 30px 0;
  padding: 30px 0 0 0;
  font-size: 30px;
  text-align: center;
  color: #3694c4;
}

#kessan li, #genkyo li {
  padding: 4px 0 10px 0;
}
#kessan li a, #genkyo li a {
  color: #343434;
  text-decoration: none;
}
#kessan li span, #genkyo li span {
  margin: 0;
  color:#188DC8;
}
#kessan li a:hover, #genkyo li a:hover {
  color: #3694c4;
}
#enkaku {
  width: 96%;
  margin: 0 auto 30px auto;
  padding: 50px 0 10px 0;
  background: #fff;
}
#enkaku h2 {
  margin: 0 0 30px 0;
  font-size: 30px;
  text-align: center;
  color: #3694c4;
}
#enkaku table {
  width:96%;
  margin: 0 auto 10px auto;
}
#enkaku table tr {
}
#enkaku table th {
	width:92%;
	margin:0 auto;
	padding:8px;
	display:block;
	color:#fff;
	text-align:left;
	background:#188DC8;
	font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
#enkaku table td {
	width:92%;
	margin:0 auto;
	padding:8px 0 16px 0;
	display:block;
    font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
/* -----------------------------------------------------------
・施設案内
----------------------------------------------------------- */
#shisetsu-menu {
	display:none;
}

.left-box {
	width: 96%;
	margin:0 auto 20px auto;
}
.right-box {
	width: 96%;
	margin:0 auto;
}
p.right-box-text {
  margin: 0 0 40px 0;
  padding:0 10px;
  font-size: 108%;
}
.right-box dt {
  padding: 0 0 0 10px;
  float: left;
  font-size: 100%;
}
.right-box dd {
  margin: 0 0 20px 120px;
  font-size: 108%;
}
#shisetsu-text {
	width:90%;
	margin: 0 auto 30px auto;
}
/* -----------------------------------------------------------
・ワークホーム明友
----------------------------------------------------------- */
#workhome-meiyu {
  width: 96%;
  margin: 0 auto;
  background: #fff;
}
#workhome-meiyu h1 {
	margin: 0 0 20px 0;
	padding: 20px 10px 0 10px;
	font-size: 150%;
	text-align: center;
	color: #2CA8E8;
}
#workhome-meiyu h2 {
  margin: 0 0 30px 0;
  font-size: 160%;
  text-align: center;
  color: #343434;
  line-height: 0.8;
}
#workhome-meiyu h3 {
  margin: 0 0 40px 0;
  padding: 10px 0 10px 40px;
  font-size: 20px;
  color: #fff;
  background: #2CA8E8;
}
#workhome-meiyu h4 {
  margin: 0 0 20px 0;
  padding: 8px 5px 5px 20px;
  font-size: 18px;
  color: #fff;
  background: #82C7E6;
}
/* -----------------------------------------------------------
・明友デイサービス
----------------------------------------------------------- */
#meiyuday {
  width: 96%;
  margin: 0 auto;
  background: #fff;
}
#meiyuday h1 {
	margin: 0 0 20px 0;
	padding: 20px 10px 0 10px;
	font-size: 150%;
	text-align: center;
	color: #2CA8E8;
}
#meiyuday h2 {
  margin: 0 0 30px 0;
  font-size: 160%;
  text-align: center;
  color: #343434;
  line-height: 1.8;
}
#meiyuday h2 span {
  font-size: 80%;
}
#meiyuday h3 {
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 20px;
  color: #fff;
  background: #2CA8E8;
}
#meiyuday h4 {
  margin: 0 0 20px 0;
  padding: 8px 5px 5px 20px;
  font-size: 18px;
  color: #fff;
  background: #82C7E6;
}
/* -----------------------------------------------------------
・東部在宅障害者福祉センター
----------------------------------------------------------- */
#tobu {
  width: 96%;
  margin: 0 auto;
  background: #fff;
}
#tobu h1 {
	margin: 0 0 20px 0;
	padding: 20px 10px 0 10px;
	font-size: 150%;
	text-align: center;
	color: #2CA8E8;
}
#tobu h2 {
  margin: 0 0 30px 0;
  font-size: 160%;
  text-align: center;
  color: #343434;
  line-height: 1.8;
}
#tobu h3 {
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 20px;
  color: #fff;
  background: #2CA8E8;
}
#tobu h4 {
  margin: 0 0 20px 0;
  padding: 8px 5px 5px 20px;
  font-size: 18px;
  color: #fff;
  background: #82C7E6;
}
#tobu h5 {
  font-size: 120%;
  color: #2CA8E8;
}
/* -----------------------------------------------------------
・魚崎デイサービス
----------------------------------------------------------- */
#uozakiday {
  width: 96%;
  margin: 0 auto;
  background: #fff;
}
#uozakiday h1 {
	margin: 0 0 20px 0;
	padding: 20px 10px 0 10px;
	font-size: 150%;
	text-align: center;
	color: #2CA8E8;
}
#uozakiday h2 {
  margin: 0 0 30px 0;
  font-size: 160%;
  text-align: center;
  color: #343434;
  line-height: 1.8;
}
#uozakiday h2 span {
  font-size: 80%;
}
#uozakiday h3 {
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 20px;
  color: #fff;
  background: #2CA8E8;
}
#uozakiday h4 {
  margin: 0 0 20px 0;
  padding: 8px 5px 5px 20px;
  font-size: 18px;
  color: #fff;
  background: #82C7E6;
}
/* -----------------------------------------------------------
・ひがしなだ障害者地域生活支援センター
----------------------------------------------------------- */
#higasinada {
  width: 96%;
  margin: 0 auto;
  background: #fff;
}
#higasinada h1 {
	margin: 0 0 20px 0;
	padding: 20px 10px 0 10px;
	font-size: 150%;
	text-align: center;
	color: #2CA8E8;
}
#higasinada h2 {
  margin: 0 0 30px 0;
  font-size: 160%;
  text-align: center;
  color: #343434;
  line-height: 1.8;
}
#higasinada h2 span {
  font-size: 50%;
}
#higasinada h3 {
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 20px;
  color: #fff;
  background: #2CA8E8;
}
#higasinada h4 {
  margin: 0 0 20px 0;
  padding: 8px 5px 5px 20px;
  font-size: 18px;
  color: #fff;
  background: #82C7E6;
}
/* -----------------------------------------------------------
・ながた障害者地域生活支援センター
----------------------------------------------------------- */
#nagata {
  width: 96%;
  margin: 0 auto;
  background: #fff;
}
#nagata h1 {
	margin: 0 0 20px 0;
	padding: 20px 10px 0 10px;
	font-size: 150%;
	text-align: center;
	color: #2CA8E8;
}
#nagata h2 {
  margin: 0 0 30px 0;
  font-size: 160%;
  text-align: center;
  color: #343434;
  line-height: 1.8;
}
#nagata h2 span {
  font-size: 50%;
}
#nagata h3 {
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 20px;
  color: #fff;
  background: #2CA8E8;
}
#nagata h4 {
  margin: 0 0 20px 0;
  padding: 8px 5px 5px 20px;
  font-size: 18px;
  color: #fff;
  background: #82C7E6;
}
/* -----------------------------------------------------------
・うおざき障害者地域生活支援センター
----------------------------------------------------------- */
#uozaki {
  width: 96%;
  margin: 0 auto;
  background: #fff;
}
#uozaki h1 {
	margin: 0 0 20px 0;
	padding: 20px 10px 0 10px;
	font-size: 150%;
	text-align: center;
	color: #2CA8E8;
}
#uozaki h2 {
  margin: 0 0 30px 0;
  font-size: 160%;
  text-align: center;
  color: #343434;
  line-height: 1.8;
}
#uozaki h2 span {
  font-size: 50%;
}
#uozaki h3 {
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 20px;
  color: #fff;
  background: #2CA8E8;
}
#uozaki h4 {
  margin: 0 0 20px 0;
  padding: 8px 5px 5px 20px;
  font-size: 18px;
  color: #fff;
  background: #82C7E6;
}
#shisetsu-text-uozaki {
	width:92%;
	margin:0 auto 20px auto;
}
/* -----------------------------------------------------------
■施設タイムスケジュール
----------------------------------------------------------- */
.timeschedule {
  width:96%;
  margin: 0 auto 30px auto;
  overflow: auto;

}
.timeschedule th {
  padding: 8px 0;
  font-size: 85%;
  color: #ffffff;
  background: #00BCC1;
  border: 1px solid #d2d2d2;
}
.timeschedule td {
  font-size: 85%;
  padding: 20px 0;
  text-align: center;
  border: 1px solid #d2d2d2;
}
.timeschedule td span {
  font-size: 70%;
}
.timeschedule td:nth-child(odd) {
  background: #EAF6FD;
}
.timeschedule td:nth-child(even) {
  background: #EFEFEF;
}

/* -----------------------------------------------------------
■施設googlemap
----------------------------------------------------------- */
.gmap {
	width:92%
	margin:0 auto;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
/* -----------------------------------------------------------
■明輪会だより　ブログ
----------------------------------------------------------- */
#blog-list {
  width: 96%;
  margin: 0 auto;
  padding: 40px 0;
  background: #fff;
}
#blog-maintitle {
  width:96%;
  margin: 0 auto 40px auto;
  font-size: 150%;
  color: #2781D8;
  border-bottom: 1px solid #2CA8E8;
}
#blog-contents {
  width: 96%;
  margin:0 auto;
}
.entry {
  margin: 0 0 50px 0;
  padding: 0 0 50px 0;
  border-bottom: 1px dotted #c3c3c3;
}
.entry-img {
  width: 96%;
  margin:0 auto;
}
.entry-img img {
  max-width:;
}
.entry-box {
  width: 96%;
  margin:0 auto;
}
.entry-box time {
  font-size: 100%;
  margin: 0 30px 300px 0;
  color:#23282D;
}
.ath {
  margin: 0 0 10px 0;
  font-size: 100%;
  color:#23282D;
}
.entry-box h1 {
  margin: 0 0 10px 0;
  font-size: 140%;
  color:#22A9DB;
}
.blog-text {
  margin: 0 0 30px 0;
  color:#23282D;
}
.viewmore {
  width: 120px;
  padding: 10px;
  font-size: 118%;
  text-align: center;
  color: #2CA8E8;
  border: 1px solid #2CA8E8;
  transition: color .5s;
}
.viewmore:hover {
  color: #fff;
  background: #3694c4;
}
#blog-contents p {
  margin: 0 0 20px 0;
  color:#23282D;
}


#sidebar {
  width: 96%;
 margin:0 auto;
}
#category, #archive {
  margin: 0 0 60px 0;
  border: 1px solid #c4c4c4;
}
#category h1, #archive h1 {
  padding: 15px 0;
  color: #fff;
  font-size: 120%;
  text-align: center;
  background: #2CA8E8;
}
#category li a, #archive li a {
  padding: 20px 0 20px 30px;
  display: block;
  border-bottom: 1px dotted #c4c4c4;
}
#category li:last-child a, #archive li:last-child a {
  border-bottom: none;
}

/* -----------------------------------------------------------
■求人情報
----------------------------------------------------------- */
.entry-recruit img {
	width:96%;
	height:auto;
	margin:0 auto;
}
dl.recruit-info {
}
dl.recruit-info dt {
	width: 92%;
	margin:0 auto 10px auto;
	padding: 10px;
	font-size:118%;
	color:#fff;
	background:#2CA8E8;
}
dl.recruit-info dd {
	width:92%;
	margin:0 auto 20px auto;
	padding: 10px;
	font-size:108%;
}
/* -----------------------------------------------------------
■個人情報保護方針
----------------------------------------------------------- */
#policy {
  width: 96%;
  margin: 0 auto 30px auto;
  padding: 10px;
  background: #FFFFFF;
}
#policy h2 {
  margin: 0 0 30px 0;
  font-size: 30px;
  text-align: center;
  color: #3694c4;
}
#policy h3 {
	width:92%;
  margin: 0 auto 8px auto;
  color: #3694c4;
  font-size: 20px;
}
#policy ul li {
	width:92%;
	margin: 0 auto 5px auto;
	font-size: 88%;
}
#policy table {
	width:96%;
  margin: 0 auto 30px auto;
}
#policy table tr {
}
#policy table th {
	width:92%;
	margin:0 auto;
	padding:8px;
	display:block;
	color:#fff;
	text-align:left;
	background:#188DC8;
	font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
#policy table td {
	width:92%;
	margin:0 auto;
	padding:8px 0 16px 0;
	display:block;
    font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
.policy-text {
	width:92%;
	margin:0 auto;
}
/* -----------------------------------------------------------
■お問合せ
----------------------------------------------------------- */
#contact {
  width: 96%;
  margin: 0 auto 30px auto;
  padding: 10px;
  background: #FFFFFF;
}
#contact h2 {
  margin: 0 0 30px 0;
  font-size: 30px;
  text-align: center;
  color: #3694c4;
}
#contact table {
	width:96%;
	margin: 0 auto 30px auto;
}
#contact table tr {
}
#contact table th {
	width:92%;
	margin:0 auto;
	padding:8px;
	display:block;
	color:#fff;
	text-align:left;
	background:#2CA8E8;
	font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
#contact table td {
	width:92%;
	margin:0 auto;
	padding:8px 0 16px 0;
	display:block;
    font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
#contact table td input {
  padding:8px;
}
/* -----------------------------------------------------------
■アニメーション設定
----------------------------------------------------------- */

.css-fadein {
  /* アニメーション設定*/
  animation-name: fadein;
  animation-duration: 0.8s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay: 0; /*アニメーション開始させる時間*/
  animation-iteration-count: 1; /*繰り返し回数*/
  animation-direction: normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
/*アニメーション*/
@keyframes fadein {
  0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  /*アニメーション*/
}
.sa {
  opacity: 0;
  transition: all .5s ease;
}
.sa.show {
  opacity: 1;
  transform: none;
}
.sa--up {
  transform: translate(0, 30px);
}