@charset "UTF-8";

/* ==================== header ==================== */
header {
	background-image: url(http://nifis-kodomoen.jp/2018/wp-content/themes/nifis-kodomoen/img/back_sky_01.png), url(http://nifis-kodomoen.jp/2018/wp-content/themes/nifis-kodomoen/img/back_green_01.png);
	background-position: left top, left bottom;
}

/* ==================== .hajimaruyo ==================== */
.hajimaruyo {
	margin-bottom: 30px;
    padding-top: 30px;
	text-align: center;
}
.hajimaruyo img {
	width: 62px;
}
@media screen and (min-width: 1440px) {
.hajimaruyo {
	display: none; /* reset */
}
}
/* ==================== .birds_01 ==================== */
.birds_01 img {
    left: 50%;
    margin-left: -150px;
	position: absolute;
    top: 30px;
	width: 65px;
}
@media screen and (min-width: 768px) {
.birds_01 img {
	margin-left: -240px;
	width: 105px;
}
}
@media screen and (min-width: 1440px) {
.birds_01 img {
    position: static;
    margin-left: 90px;
    width: 140px;
}
}
/* ==================== .birds_02 ==================== */
.birds_02 img {
    margin-right: -120px;
    top: -30px;
	position: absolute;
    right: 50%;
	width: 30px;
}
@media screen and (min-width: 768px) {
.birds_02 img {
	margin-right: -180px;
    width: 48px;
}
}
@media screen and (min-width: 1440px) {
.birds_02 img {
    margin-right: -450px;
    top: 150px;
    width: 63px;
}
}
/* ==================== .mark ==================== */
.mark {
	height: 97px;
	left: 50%;
	margin-left: 50px;
	position: absolute;
	top: 60px;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width: 97px;
}
.mark img {
	transform: rotate(15deg);
}
@media screen and (min-width: 1440px) {
.mark {
	width: 122px;
    height: 122px;
    margin-left: 120px;
}
}
/* ==================== h1とリボン ==================== */
@media screen and (min-width: 1440px) {
.home header > div h1 {
	z-index: 1;
}
.home header > div h1 img {
	margin-right: 15px;
    width: 360px;
}
.home header > div .ribbon img {
    width: 345px;
}
}
/* ==================== .hajimaruyo_02 ==================== */
.hajimaruyo_02 {
	display: none;
}
@media screen and (min-width: 1440px) {
.hajimaruyo_02 {
    display: block;
    text-align: center;
    margin-top: -120px;
}
.hajimaruyo_02 img {
    margin-left: 780px;
    position: relative;
    width: 240px;
}
}
/* ==================== .character_02 ==================== */
.character_02 {
	text-align: center;
}
.character_02 img {
   	margin-left: 150px;
    position: relative;
	top: -10px;
	width: 171px;
}
@media screen and (min-width: 768px) {
.character_02 img {
    width: 232px;
    margin-left: 510px;
	top: 0;
}
}
@media screen and (min-width: 1440px) {
.character_02 img {
	width: 300px;
    margin-left: 785px;
}
}
/* ==================== .character_03 ==================== */
.character_03 {
	position: relative;
}
.character_03 img {
    left: 50%;
    margin-left: -180px;
    position: absolute;
    top: -10px;
    width: 200px;
}
@media screen and (min-width: 768px) {
.character_03 img {
    width: 315px;
    margin-left: -450px;
    top: -150px;
}
}
@media screen and (min-width: 1440px) {
.character_03 img {
    width: 420px;
    margin-left: -630px;
}
}
/* ==================== 見出し・段落 ==================== */
.home section h2 {
	margin-bottom: 30px;
	text-align: center;
}
.home section h2,
.home section h3 {
	color: #47372C;
	line-height: 1.4em;
}
.home section > p {
	width: 720px;
}
/* ==================== 動物のアイコン ==================== */
.home section .icon {
	background-repeat: no-repeat;
	background-position: top center;
    background-size: auto 75%;
	margin-bottom: 10px;
	max-width: 100%; /* reset */
    position: relative;
	width: 100%; /* reset */
}
.home #intro .icon,
.home #posts_link .icon {
	background-image: url(../img/back_bear_white_l.png);
}
.home #guideline .icon {
	background-image: url(../img/back_bear_colord_l.png);
}
.home section .icon img {
	width: 40px;
}
@media screen and (min-width: 960px) {
.home section .icon {
    background-size: cover;
}
}
/* ==================== セクション ==================== */
.home section {
	background-color: #fff;
    position: relative;
}
.home header {
    padding-bottom: 200px;
}
.home #guideline {
	background-image: url(../img/back_rainbow.png), url(../img/back_pink.jpg);
	background-repeat: no-repeat, repeat;
	background-position: bottom left -5%, top left;
	background-size:  35% auto, 1000px 750px;
    padding-top: 15vw;
    margin-top: -12vw;
}
.home .pt {
    padding-top: 9vw;
    margin-top: -13vw;
}
.home #guideline .pt {
    margin-top: -15vw;
}
.home .pb {
    padding-bottom: 15vw;
}
@media screen and (min-width: 768px) {
.home header {
    padding-bottom: 12vw;
}
}
@media screen and (min-width: 960px) {
.home header {
	padding-bottom: 135px;
}
.home #guideline {
    padding-top: 105px;
    margin-top: -105px;
}
.home .pt {
    padding-top: 105px;
    margin-top: -135px;
}
.home #guideline .pt {
	margin-top: -105px;
}
.home .pb {
    padding-bottom: 105px;
}
}
@media screen and (min-width: 1440px) {
.home header {
    padding-bottom: 270px;
}
.home #guideline {
    padding-top: 150px;
    margin-top: -150px;
}
.home .pt {
    padding-top: 150px;
    margin-top: -180px;
}
.home #guideline .pt {
	margin-top: -150px;
}
.home .pb {
    padding-bottom: 150px;
}
}
@media screen and (min-width: 1920px) {
.home header {
    padding-bottom: 360px;
}
.home #intro {
    margin-top: 60px;
}
.home #guideline {
	padding-top: 330px;
    margin-top: -330px;
}
.home .pt {
    padding-top: calc(330px - 75px);
    margin-top: -330px;
}
.home #guideline .pt {
	margin-top: -330px;
}
.home .pb {
    padding-bottom: 330px;
}
}
/* ==================== .home #intro ==================== */

/* ==================== .home #place ==================== */
.home #place iframe {
	border: 0;
	width: 100%;
}
@media screen and (max-width: 767px) {
.home #place iframe {
	height: 100vw;
    max-height: 360px;
}
}
/* ==================== .home #guideline ==================== */
.home #guideline h3 {
	font-size: 120%;
	margin-bottom: 5px;
	width: 720px;
}
/* ==================== .home #posts_link ==================== */
.home #posts_link dl {
	border-bottom: 1px dotted #EEE;
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	margin-bottom: 0;
	width: 720px;
}
.home #posts_link dl > * {
	font-size: 0.85rem;
}
.home #posts_link dl dt {
	color: #999;
	min-width: 140px;
	padding: 10px 0;
	white-space: nowrap;
}
.home #posts_link dl dt::before {
    color: #EE869A;
    content: "■";
}
.home #posts_link dl dd {
	width: calc(100% - 140px);
}
.home #posts_link dl dd a {
	display: block;
	padding: 10px 0;
}
.home #posts_link .tonews {
	margin-top: 15px;
}
.home #posts_link .tonews a {
    background-color: #EE869A;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    padding: 0.2rem 1rem;
    text-decoration: none;
}
@media screen and (max-width: 767px) {
.home #posts_link dl dt {
	padding-bottom: 0;
}
.home #posts_link dl dd {
	width: 100%;
}
.home #posts_link dl dd a {
	padding-top: 0;
}
.home #posts_link .tonews a {
    font-size: 90%;
    padding: 0.2rem 0.5rem;
}
}
/* ==================== .home #login ==================== */
.home #login > div {
	position: relative;
    max-width: 100%; /* reset */
}
.home #login > div iframe {
    border: 1px solid #999;
	display: block;
	margin-left: auto;
	margin-right: auto;
}