@charset "UTF-8";

/* CSS Document */

/*==================================================

contents
=================================================*/

.blog-contents {
	background-color: #ede8cd;
}
.blog-header {
	width: 100%;
	position: relative;
	overflow: hidden;
	background-image: url(../../images/index3_03.png);
	background-position: left top;
	background-repeat: repeat-y;
	background-size: contain;
	padding-top: 5px;
}
.blog-header .border {
	width: 100%;
	line-height: 0
}
.blog-header .home {
	width: 32%;
	position: absolute;
	top: 6%;
	left: 3%;
	transform-origin: center bottom;
	-webkit-animation: home 0.8s ease-out;
    animation: home 0.8s ease-out;
}
.blog-header .logo {
	width: 68.4%;
	position: absolute;
	top: 5%;
	right: 1%;
	-webkit-animation: floating 1.5s ease-in-out infinite;
    animation: floating 1.5s ease-in-out infinite;
}
.blog-header .logo2 {
	width: 68.4%;
	position: absolute;
	top: 5%;
	right: 1%;
	-webkit-animation: floating2 1.8s ease-in-out infinite;
    animation: floating2 1.8s ease-in-out infinite;
}
.blog-header .logo3 {
	width: 68.4%;
	position: absolute;
	top: 5%;
	right: 1%;
	-webkit-animation: floating 2.2s ease-in-out infinite;
    animation: floating 2.2s ease-in-out infinite;
}
.blog-header .bus {
	width: 16.7%;
	position: absolute;
	bottom: 3%;
	right: 0;
	-webkit-animation: shake 0.5s linear infinite;
    animation: shake 0.5s linear infinite;
}
.blog-header .lady {
	width: 16.7%;
	position: absolute;
	bottom: 3%;
	right: 0;
	-webkit-animation: shake 0.5s linear infinite;
    animation: shake 0.5s linear infinite;
}

.blog-footer {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.blog-footer .lady2 {
	width: 16.7%;
	position: absolute;
	bottom: 3%;
	right: 0;
	-webkit-animation: shake 0.5s linear infinite;
    animation: shake 0.5s linear infinite;
}

/* animation1*/

@-webkit-keyframes shake {
	0% {bottom: 3%;}
	50% {bottom: 2%;}
	100% {bottom: 3%;}
}
@keyframes shake {
	0% {bottom: 3%;}
	50% {bottom: 2%;}
	100% {bottom: 3%;}
}

/* animation2*/

@-webkit-keyframes floating {
	0% {top: 5%;}
	50% {top: 2%;}
	100% {top: 5%;}
}
@keyframes floating {
	0% {top: 5%;}
	50% {top: 2%;}
	100% {top: 5%;}
}

/* animation3*/

@-webkit-keyframes floating2 {
	0% {top: 2%;}
	50% {top: 5%;}
	100% {top: 2%;}
}
@keyframes floating2 {
	0% {top: 2%;}
	50% {top: 5%;}
	100% {top: 2%;}
}

/* animation4*/

@-webkit-keyframes home {
	0% {
		transform: scale(0.2);
	}
	50% {
		transform: scaleX(0.5);
		transform: scaleY(1.2);
	}
	100% {
		transform: scaleX(1);
		transform: scaleY(1);
	}
}
@keyframes home {
	0% {
		transform: scale(0.2);
	}
	50% {
		transform: scaleX(0.5);
		transform: scaleY(1.2);
	}
	100% {
		transform: scaleX(1);
		transform: scaleY(1);
	}
}

.blog-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 0;
}
.blog-inner .b-menu {
	width: 95%;
	display: table;
	background-color: #FFF;
	margin: 0 auto 40px;
}
.blog-inner .b-menu li {
	width: 25%;
	display: table-cell;
	text-align: center;
	padding: 20px;
}
.blog-inner .b-menu li a {
	font-size: 1.8rem;
	font-family: "FOT-筑紫A丸ゴシック Std D", "TsukuARdGothicStd-D", sans-serif;
	color: #000;
	text-decoration: none;
}
.blog-inner .b-menu li a i {
	color: #ffba00;
}
.blog-inner .b-menu li a:hover {
	color: #ffba00;
}
.blog-main {
	width: 95%;
	margin: 0 auto;
	padding-bottom: 40px;
}
.blog-main .main {
	width: 100%;
	/*width: 70%;*/
	float: left;
}
.blog-main .main .list {
	width: 100%;
	border: 3px solid #0034b9;
	background-image: url(../../blog/images/index3_15.png);
	background-position: left top;
	background-repeat: repeat;
	background-size: auto;
	background-color: #FFF;
	border-radius: 16px;
	margin-bottom: 40px;
}
.blog-main .main > div:nth-last-of-type(1) {
	margin-bottom: 0;
}
.blog-main .main .list .list-head {
	width: 100%;
	font-size: 1.8rem;
	font-family: "FOT-筑紫A丸ゴシック Std D", "TsukuARdGothicStd-D", sans-serif;
	border-radius: 16px 16px 0 0;
	background-image: url(../../blog/images/index3_07.png),url(../../blog/images/index3_11.png);
	background-position: right 20px center,left top;
	background-repeat: no-repeat,repeat-x;
	background-size: auto,auto;
	padding: 18px 20px;
	-webkit-animation: pop 2.2s ease-in-out infinite;
    animation: pop 2.2s ease-in-out infinite;
}

/* animation4*/

@-webkit-keyframes pop {
	0% {background-position: right 20px center,left top;}
	50% {background-position: right 20px top,left top;}
	100% {background-position: right 20px center,left top;}
}
@keyframes pop {
	0% {background-position: right 20px center,left top;}
	50% {background-position: right 20px top,left top;}
	100% {background-position: right 20px center,left top;}
}
.blog-main .main .list .list-head span {
	display: inline-block;
	margin-left: 10px;
}
.blog-main .main .list .list-contents {
	width: 100%;
	display: table;
	padding: 20px;
}
.blog-main .main .list .list-contents dl {
	margin-top: 1em;
}
.blog-main .main .list .list-contents dt {
	width: 30%;
	min-width: 100px;
	display: table-cell;
}
.blog-main .main .list .list-contents dt span {
	display: block;
	height: 180px;
	overflow: hidden;
}
.blog-main .main .list .list-contents dt img {
	
}
.blog-main .main .list .list-contents dd {
	display: table-cell;
	padding-left: 20px;
}
.blog-main .main .list .list-contents dd p {
	line-height: 2.4rem;
}
.blog-main .main .list .list-contents dd p.link {
	margin-top: 1em;
}
.blog-main .main .list .list-contents dd p.link a {
	display: inline-block;
	color: #FFF;
	text-decoration: none;
	background-color: #ff3f73;
	padding: 10px 30px;
}
.blog-main .main .list .list-contents dd p.link a:hover {
	background-color: #ffabc2;
}
.blog-main .main .list .list-contents dd p.category {
	font-size: 1.2rem;
	margin-top: 1em;
}
.blog-main .tool {
	width: 25%;
	float: right;
}
.blog-main .tool.blog-search {
	width: 100%;
	max-width: 800px;
	float: none;
	margin: 0 auto;
}
.blog-main .tool .title {
	width: 100%;
	text-align: center;
	border-radius: 24px;
	background-color: #FFF;
	border: 3px solid #000;
	margin-bottom: 10px;
	padding: 5px;
}
.blog-main .tool .calendar {
	width: 100%;
	margin-top: 40px;
}
.blog-main .tool .calendar .title {
	color: #ff3f73;
	border: 3px solid #ff3f73;
}
.blog-main .tool .calendar .dummy {
	text-align: center;
}
.blog-main .tool .calendar .dummy img {
	max-width: 100%;
	height: auto;
}
.blog-main .tool .archives {
	width: 100%;
	margin-top: 40px;
}
.blog-main .tool .archives .title {
	color: #7cb600;
	border: 3px solid #7cb600;
}
.blog-main .tool .archives > ul > li {
	border-bottom: 1px solid #FFF;
	padding: 10px 0;
}
.blog-main .tool .archives ul li a {
	color: #7cb600;
	text-decoration: none;
}
.blog-main .tool .archives > ul > li > ul > li {
	width: 20%;
	float: left;
	text-align: right;
	padding: 10px;
}
.blog-main .tool .archives > ul > li > ul:after {
	content:" ";
    display:block;
    clear:both;
}

.blog-main .tool .category {
	width: 100%;
	margin-top: 40px;
}
.blog-main .tool .category .title {
	color: #0091e5;
	border: 3px solid #0091e5;
}
.blog-main .tool .category ul li {
	padding: 5px 0;
}
.blog-main .tool .category ul li a {
	color: #0091e5;
	text-decoration: none;
}

.blog-main .tool .text-search {
	width: 100%;
}
.blog-main .tool .text-search .inner {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}
.blog-main .tool .text-search .title {
	color: #ffba00;
	border: 3px solid #ffba00;
	margin-bottom: 40px;
}
.blog-main .tool .text-search input[type="text"],.text-search textarea {
	width: 75%;
	border: 2px solid #ffba00;
	border-radius: 4px;
	background: #FFF;
	padding: 7px;
}
.blog-main .tool .text-search .s-button {
	width: 20%;
	font-size: 1.4rem;
	text-align: center;
	color: #FFF;
	border-radius: 4px;
	background: #ffba00;
	margin-left: 5%;
	padding: 6px 0;
}
.blog-main .main .article {
	width: 100%;
	border: 3px solid #0034b9;
	background-image: url(../../blog/images/index3_07.png),url(../../blog/images/index3_11.png);
	background-position: right 20px top 10px,left top;
	background-repeat: no-repeat,repeat-x;
	background-size: auto,auto;
	background-color: #FFF;
	border-radius: 16px;
	padding: 10px 20px 20px 20px;
	-webkit-animation: pop2 2.2s ease-in-out infinite;
    animation: pop2 2.2s ease-in-out infinite;
}

/* animation5*/

@-webkit-keyframes pop2 {
	0% {background-position: right 20px top 10px,left top;}
	50% {background-position: right 20px top 20px,left top;}
	100% {background-position: right 20px top 10px,left top;}
}
@keyframes pop2 {
	0% {background-position: right 20px top 10px,left top;}
	50% {background-position: right 20px top 20px,left top;}
	100% {background-position: right 20px top 10px,left top;}
}
.blog-main .main .article h1 {
	font-size: 2.4rem;
	line-height: 3.2rem;
	margin: 35px 0 30px;
}
.blog-main .main .article img {
	max-width: 100%;
    height: auto;
	margin-bottom: 3%;
}
.blog-main .main .article p.category {
	font-size: 1.2rem;
	margin-top: 1em;
}
.blog-main .main .article p.date {
	font-family: "FOT-筑紫A丸ゴシック Std D", "TsukuARdGothicStd-D", sans-serif;
}


/* img */

.blog-header img,.blog-main .main .list .list-contents dt img,.blog-footer img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* cf */

.blog-main:after {
    content:" ";
    display:block;
    clear:both;
}


@media only screen and (min-width:1px) and (max-width: 1040px) {
	
	
}

@media only screen and (max-width: 768px) {
	
	.blog-inner .b-menu {
		margin: 0 auto 5%;
	}
	.blog-inner .b-menu li {
		padding: 3% 10px;
	}
	.blog-inner .b-menu li {
		width: initial;
		width: auto;
	}
	.blog-inner .b-menu li a {
		font-size: 1.4rem;
	}
	.blog-inner {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		padding: 5% 0;
	}
	.blog-main {
		padding-bottom: 5%;
	}
	.blog-main .main {
		width: 100%;
		float: none;
	}
	.blog-main .tool {
		display: none;
	}
	.blog-main .tool.blog-search {
		display: block;
	}
	.blog-main .main .article h1 {
		font-size: 2rem;
		line-height: 3rem;
		margin: 35px 0 30px;
	}
	.blog-main .tool .calendar {
		width: 100%;
		margin-top: 5%;
	}
	.blog-main .tool .archives {
		width: 100%;
		margin-top: 5%;
	}
	.blog-main .tool .category {
		width: 100%;
		margin-top: 5%;
	}
	.blog-main .tool .archives > ul > li > ul > li {
		padding: 2%;
	}
	.blog-main .tool .text-search .title {
		margin-bottom: 5%;
	}
	
}

@media only screen and (max-width: 568px) {
	
	.blog-main .tool .archives > ul > li > ul > li {
		width: 33.33%;
	}
	.blog-main .main .list .list-contents dt {
		width: 100%;
		max-width: 300px;
		display: block;
		margin: 0 auto 3%;
	}
	.blog-main .main .list .list-contents dd {
		width: 100%;
		display: block;
		padding-left: 0;
	}
}
	
@media only screen and (max-width: 480px) {
	
	.blog-inner .b-menu li a {
		font-size: 1.2rem;
	}
	
}