/****************************************************************
	                        共通
****************************************************************/
@charset "utf-8";
html {
	font-size: 100%;
}
    @media (max-width: 1000px) {
        html { font-size: 80%; }
    }
    @media (max-width: 768px) {
        html { font-size: 65%; }
    }
    @media (max-width: 520px) {
        html { font-size: 50%; }
    }
html,body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1;
}
	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var, b, i,	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
		background: transparent;
		border: 0;
		font-weight: normal;
		margin: 0;
		outline: 0;
		padding: 0;
		vertical-align: baseline;
	}
body {
	padding: 0px;
	color: #221814;
	font-size: 1rem;
    line-height: 1.8em;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
	background-attachment: fixed;
	letter-spacing: 0.1em;
}
	a:hover img {
		filter: alpha(opacity=90);
		-moz-opacity:0.70;
		opacity:0.90;
	}
	a:hover {
		filter: alpha(opacity=90);/
		-moz-opacity:0.70;
		opacity:0.90;
	}
	img {
		border:0px;
		max-width: 100%;
		vertical-align: top;
	}
	article,aside,details,figcaption,figure,
	footer,header,hgroup,menu,nav,section {
		display:block;
	}
	ul { list-style:none; }
	table {
		border-collapse:collapse;
		border-spacing:0;
	}
	p { padding-bottom: 0px; }
.br600,.br520 { display: none; }
    @media (max-width: 600px) {
        .br600 { display: block; }
    }
    @media (max-width: 520px) {
        .br520 { display: block; }
    }

/**************************************************
                    コンテンツ
***************************************************/
.sec-inner {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
    background-color: #ed7980;
    text-align: center;
    color: #fff;
}
.header-text01 {
    font-size: 28px;
    font-weight: bold;
    height: 75px;
    line-height: 75px;
}
    @media (max-width: 1000px) {
        .header-text01 {
            font-size: 24px;
            height: 65px;
            line-height: 65px;
        }
    }
    @media (max-width: 768px) {
        .header-text01 {
            font-size: 17px;
            height: 45px;
            line-height: 45px;
        }
    }
.main-img-sec {
    position: relative;
    width: 100%;
}
.main-img {
    width: 100%;
}
.item {
    position: absolute;
}
.item01 {
    top: 3%;
    left: 3%;
    width: 22.9%;
}
.item02 {
    left: 2%;
    top: 24%;
    width: 21.5%;
    animation-delay: 0.2s;
}
.item03 {
    left: 1%;
    bottom: -11%;
    width: 24.5%;
    animation-delay: 0.3s;
}
.item04 {
    top: 5%;
    right: 3%;
    width: 24.5%;
    animation-delay: 0.1s;
}

.sec01 {
    position: relative;
    padding: 3% 0 2%;
    background-color: #ed7980;
}
    @media (max-width: 520px) {
        .sec01 {
            padding-top: 20px;
        }
    }
.sec01-inner {
    max-width: 630px;
    width: 90%;
    margin: 0 auto;
}
    .sec01-textbox01 {
        position: relative;
        z-index: 1;
    }
        .sec01-text01 {
            position: relative;
            font-size: 5rem;
            line-height: 1em;
            font-weight: bold;
            color: #fff462;
            z-index: 1;
        }
        .sec01-text02 {
            font-size: 1.6rem;
            line-height: 1.4em;
            font-weight: bold;
            margin: 0.8em auto 2.5em;
            white-space: nowrap;
        }
            @media (max-width: 520px) {
                .sec01-text02 {
                    margin-bottom: 3.5em;
                }
            }
            @media (max-width: 400px) {
                .sec01-text02 {
                    margin-bottom: 5em;
                }
            }
    .sec01-textbox02 {
        font-size: 11px;
        line-height: 1.5em;
        text-align: justify;
    }
    .sec01-textbox03 {
        font-size: 11px;
        margin: 0.8em auto 2em;
    }
        @media (max-width: 520px) {
            .sec01-textbox03 {
                line-height: 1.5em;
                margin-bottom: 50px;
            }
        }
    small {
        font-size: 11px;
    }
.item05 {
    bottom: 61%;
    right: -1.5%;
    width: 31%;
    animation-delay: 0.5s;
}
    @media (max-width: 1250px) {
        .item05 {
            right: 0;
        }
    }
    @media (max-width: 768px) {
        .item05 {
           bottom: 85%;
           width: 26%;
        }
    }
    @media (max-width: 520px) {
        .item05 {
           bottom: 89%;
        }
    }
    @media (max-width: 400px) {
        .item05 {
           bottom: 92%;
        }
    }
.item06 {
    left: 2%;
    bottom: 16%;
    width: 22%;
}
    @media (max-width: 1200px) {
        .item06 {
            width: 17%;
        }
    }
    @media (max-width: 1000px) {
        .item06 {
            bottom: unset;
            top: -5%;
        }
    }
    @media (max-width: 520px) {
        .item06 {
            top: 5%;
            left: 1%;
        }
    }
    @media (max-width: 400px) {
        .item06 {
            top: 11%;
            left: 3%;
            width: 18%;
        }
    }
.item-logo {
    right: 3%;
    bottom: 5%;
    width: 8.1%;
}
    @media (max-width: 520px) {
        .item-logo {
            width: 50px;
            bottom: 8%;
        }
    }
.my-bounce-in {
  animation-name: bounceIn;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  20% { transform: scale3d(1.08, 1.08, 1.08); }
  40% { transform: scale3d(.9, .9, .9); }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% { transform: scale3d(.97, .97, .97); }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
