@charset "utf-8";


body {
	font-family: "Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", sans-serif !important;
	font-size: 24px;
}
#container {
	position: relative;
}
section {
	position: relative;
	overflow: hidden;
}
section > div {
	max-width: 800px;
	margin: 0 auto;
}
.btn {
	width: 95%;
	margin: 0 auto;
	text-align: center;
	background: url(../images/gawa/bg_btn.png) no-repeat;
	background-size: 100%;
}
a#toapp {
	position: fixed;
	/*display: block;*/
	display: none;
	z-index: 999;
	right: 5%;
	bottom: 5%;
	background: url(../images/gawa/bg_btn_app.png) no-repeat;
	background-size: 100%;
}
.blk_fade {opacity: 0;}

.lead {
	padding: 5px;
	text-align: center;
	background: #f15a24;
	color: #fff;
}
.mb1 {margin-bottom: 1em;}
.mb2 {margin-bottom: 2em;}

/* main */
#main {
	text-align: center;
	background: #bdbdbd url(../images/gawa/bg_main.png) repeat-y 50% 50%;
}
#main img {
	margin-top: 1em;
	opacity: 0;
	transition: 1s;
}
#main.on img {
	margin-top: 0;
	opacity: 1;
}

/* anchor */
#anchor {
	padding: 0.35em 0;
	border-top: solid 5px #f68d91;
	text-align: center;
	background: url(../images/gawa/bg_anchor.png);
}
#anchor ul {
	display: flex;
	justify-content: space-between;
	width: 99%;
	max-width: 792px;
	overflow: hidden;
	margin: 0 auto;
}
#anchor li {width: 100%;}

/* cont */
#cont {
	padding-bottom: 2.5em;
	background: #fafdff url(../images/gawa/bg_cont.png) repeat-y 50% 50%;
}
#cont > div {
	max-width: 800px;
	margin: 0 auto;
}
.btn_app {text-align: center;}

/* story */
#story {
	padding: 0 1em 3em;
	background: url(../images/gawa/bg_story.png);
}
#story > div {
	max-width: 800px;
	margin: 0 auto;
}
#story_bg {
	padding: 3em 10px 1em;
	background: #fff;
	border-radius: 30px;
	-webkit-box-shadow: 0 0 10px 10px #fff;
	box-shadow: 0 0 10px 10px #fff;
}
#story_bg figure {text-align: center;}
#story_bg figcaption {text-align: left;}

#story_bg figure img {
	width: 100%;
	max-width: 550px;
	margin: 0;
}
#story_bg figure img.ex1 {max-width: 780px;}
#story_bg figure img.ex2 {max-width: 640px;}
#story_bg figure img.ex3 {max-width: 700px;}
#story_bg figure img.ex4 {max-width: 400px;}

#story_bg figcaption {
	max-width: 550px;
	margin: 0 auto;
}
.bnr {padding: 3em 0;}

/* app */
#app > div {
	max-width: 800px;
	margin: 2.5em auto 3em;
	padding: 3em 0;
	border: solid 10px #ed1c24;
	border-radius: 30px;
	background: #fef4f4;
}
#outline {
	overflow: auto;
	width: 80%;
	height: 450px;
	margin: 0 auto;
	padding: 20px 5%;
	font-size: 0.9em;
	/*border: solid 1px #333;*/
}
#outline::-webkit-scrollbar{width: 15px;}/*バーの太さ*/
#outline::-webkit-scrollbar-track{background: #e6e6e6;}/*バーの背景色*/
#outline::-webkit-scrollbar-thumb{background: #f7931e;}/*バーの色*/

#outline h3 {
	margin: 20px 0 5px;
	padding-bottom: 5px;
	border-bottom: solid 1px #666;
	font-size: 1.4em;
	font-weight: bold;
	color: #ed1c24;
}
#outline h3:first-child {
	margin-top: 0;
}

/* ちなみに */
#chinami {
	margin-bottom: 2em;
	text-align: center;
}
#chinami img {margin-bottom: 0.5em;}

/* ごあいさつ */
#greeting {
	padding: 0 5% 5%;
	background: #f7eee2;
	color: #42210a;
}
#greeting > div {
	max-width: 800px;
	margin: 0 auto;
}
#greeting p {
	max-width: 700px;
	margin: 0;
}

/* アニメ */
.bounce {
	animation: bounce 3s 1 ease-out forwards;
	transform-origin: 50% 50%;
	animation-play-state: running;
}
@keyframes bounce {
	0% { transform: scale(0.8, 0.8); opacity: 0; margin-top: 150px;}
	5% { transform: scale(1.2, 1.2); opacity: 0.5;}
	10% { transform: scale(1, 1);  opacity: 1; margin-top: 0;}
	15% { transform: scale(1.1, 1.1);  opacity: 1;}
	20% { transform: scale(1, 1);  opacity: 1;}
	100% { transform: scale(1, 1);  opacity: 1;}
}
.bounce2 {
	animation: bounce2 3s 1 ease-out forwards;
	transform-origin: 50% 50%;
	animation-play-state: running;
	/*animation-delay: 1s;*/
}
@keyframes bounce2 {
	0% { transform: scale(0.8, 0.8); opacity: 0;}
	5% { transform: scale(1.2, 1.2); opacity: 0.5;}
	10% { transform: scale(1, 1);  opacity: 1;}
	15% { transform: scale(1.1, 1.1);  opacity: 1;}
	20% { transform: scale(1, 1);  opacity: 1;}
	100% { transform: scale(1, 1);  opacity: 1;}
}
.fade_in {
	animation: fade_in 1.5s 1 ease-out forwards;
	transform-origin: 50% 50%;
	animation-play-state: running;
}
.fade_in_fast {
	animation: fade_in 0.5s 1 ease-out forwards;
	transform-origin: 50% 50%;
	animation-play-state: running;
}
@keyframes fade_in {
	0% { opacity: 0; }
	100% {  opacity: 1; }
}
.slide_in {
	animation: slide_in 1s 1 ease-in forwards;
	transform-origin: 50% 50%;
	animation-play-state: running;
}
@keyframes slide_in {
	0% { bottom: 100%; opacity: 0;}
	100% {  bottom: 0%;  opacity: 1;}
}

/* 共通 */
.red {
	color: #d20012;
}
.sml {
	font-size: 0.8em;
	line-height: 1.2;
}
.bld {
	font-weight: bold;
}
.pos_l {
	position: relative;
}
.t_r {
	text-align: right;
}
.mb0 {margin-bottom: 0!important;}
.mb10 {margin-bottom: 10px!important;}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}


/* ==================================================== */
/*                                             ：-799px                                                */
/* ==================================================== */
@media screen and (max-width: 799px) {

.bnr {padding: 1em 0;}

/* cont */
#cont {
	padding-bottom: 1.5em;
}

/* story */
#story {
	padding: 0 1em 2em;
}
#story_bg {
	padding: 1em 10px 1em;
}

/* app */
#app > div {
	margin: 1.5em auto;
	padding: 1em 0 2em;
	border: solid 5px #ed1c24;
	border-radius: 20px;
}

/* 応募ボタン */
.btn_app {padding: 0 0.5em;}

#toapp {
	width: 200px;
	height: 200px;
}

a:hover img {
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}


}


/* ==================================================== */
/*                                             ：-640px                                                */
/* ==================================================== */
@media screen and (max-width: 640px) {

/* cont */
#cont p.ov {overflow: hidden;}
#cont p.ov img {
	max-width: 116%;
	width: 116%;
	margin-left: -8%;
}

#story {padding: 0 0 2em;}
#story_bg {
	padding: 1em 0 1em;
	border-radius: 0;
}
#story_bg figcaption {padding: 0 1em;}
#story_bg figure img {max-width: 100%;}
#story_bg figure img.ex1 {max-width: 100%;}
#story_bg figure img.ex2 {max-width: 100%;}
#story_bg figure img.ex3 {max-width: 100%;}
#story_bg figure img.ex4 {max-width: 70%;}

}