@charset "UTF-8";

/*
1. common
1-1. pagetop
1-2. slider 
1-4. wave svg
1-5. read text
2. header
3. main navigation 
4. container
5. contents
5-1. contents - common
5-2. contents title number
5-3. contents program title
5-4. program introduction
5-5. program interview
5-6. contents parts color
6. growing_story_fair
7. footer
7-1. footer navigation
7-2. footer last
Firefoxのみ
*/

@media screen and (min-width:751px) { 
	/* 1. common */
	body {
		font-size: 1.6rem;
	}
	div.inner {
		max-width: 1000px;
		min-width: 1000px;
	}
	.pc {
		display: block!important;
	}
	.w750, .w320 {
		display: none!important;
	}

	/* 1-2. slider */
  .slide_logo {
    width: 147px;
    height: 32px;
    position: absolute;
    right: 20px;
    top: 16px;
    z-index: 10;
  } 
  .swiper-container {
	height: 100%;
	overflow: inherit;
  }  
	.swiper-container {
		width: 1000px;
		max-height: 384px;
		margin: 48px auto 96px;
		box-sizing: border-box;
	}
	.swiper-slide {font-size: 1.8rem;}
  .swiper-slide img {width: 1000px;}
	.swiper-button-prev,
	.swiper-button-next {
		width: 44px;
		background-size: 44px 44px;
	}
	.swiper-button-next::before {
		width: 44px;
		height: 44px;
	}
	.swiper-button-prev::after {
		width: 44px;
		height: 44px;
	}
	
	/* 1-4. wave svg */
	svg {
		height: 160px;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	/* 1-5. read text*/
	div#read_txt {
		width: 1000px;
		margin-top: 24px;
		margin-bottom: 96px;
	}
	div#read_txt p {
		font-size: 1.7rem;
		line-height: 2.2;
		letter-spacing: 0.2rem;
	}


	/* 2. header */
	div#head div.inner {
		max-width: 1000px;
		min-width: 1000px;
		padding: 16px 0;
		overflow: hidden;
	}
	
div#mw { width: 100%; margin: 0 auto;}
div#head_image_umeda {
  position: relative;
  margin: 0 auto;
	text-align: center;
  padding-top: 70%;
  background: url(../img/top_image_umeda.png) 0 0 no-repeat;
  background-size: 100% auto;
  max-width: 100%;
  height: auto;
}
div#head_image_hirakata {
  position: relative;
  margin: 0 auto;
	text-align: center;
  padding-top: 70%;
  background: url(../img/top_image_hirakata.png) 0 0 no-repeat;
  background-size: 100% auto;
  max-width: 100%;
  height: auto;
}
div#head_image_omiya{
  position: relative;
  margin: 0 auto;
	text-align: center;
  padding-top: 70%;
  background: url(../img/top_image_omiya.png) 0 0 no-repeat;
  background-size: 100% auto;
  max-width: 100%;
  height: auto;
}
.main_txt {
  position: absolute;
  top:81%;
 text-align: center;
 font-size: 1.3vw;
 font-weight: bold;
 padding: 0 10%;
}


/* 3. ribbon */
h2.ribbon {
  line-height: 60px;/*高さ*/
  padding: 0 40px 0 4%;/*文字の左右の余白*/
  font-size: 2.5rem;/*文字サイズ*/
}

	/* 3. main navigation */
	nav#mnav div.mnav_ttl {
		margin-bottom: 48px;
	}

	/* 4. container */
	div#container {
		max-width: 1000px;
		min-width: 1000px;
		margin-top: 0;
		margin-bottom: 0;
	}

/* FlexBox
-------------------- */
ul.flex {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.flex li.item { margin-bottom: 10px; }
ul.flex li.item_img { margin: 10px;}
ul.flex.alcnt { align-items: center;}

.about_txt {
  margin-top: 20px;
  margin-bottom: 20px;
}

	/* contents */
	div.contents {}
	
	div.program_movie i {
		top: 18px;
		padding: 4px 8px 6px;
	}
	div.program_movie i::before{
		font-size: 2.5rem;
	}
	div.program_movie i::after {
		font-size: 1.4rem;
		margin-top: 4px;
	}

	
/* 5. contents */
/* 5-1. contents - common */
ul.gakka { margin: 20px 0 60px 0;}
ul.gakka li { width: 30%; margin-bottom: 40px;}
ul.gakka li img {margin: 10px 0; vertical-align: bottom;}
ul.gakka li h3 { padding: 2px 10px; border:2px solid #0d7ebe;}
ul.gakka li div.under {margin-top: auto; min-height: 0%;}
ul.gakka li p.btn::after {
  position: absolute;
  top: 30%;
  right: .5em;
  content: '';
  border: 5px solid transparent;
  border-left: 5px solid #004587;
}
ul.gakka li p.btn a:hover {
  width: 100%;
  background-color: #004587;
  color: #fff;
  transition: all .3s;
}

.movie {
  padding:30px 40px 30px 0;
}
.movie p.day {font-size: 24px; color: #fff; margin-left: 50px; margin-top: 10px;}

	/* 5-2. contents title number */
	div.gs_num {
		padding-right: 32px;
		padding-left: 32px;
		top: -79px;
		max-width: 252px;
		text-align: center;
	}
	
	/* 5-3. contents program title */
	div.program_ttl p.tag_program {
		padding: 4px 12px;
		margin-left: 16px;
		font-size: 1rem;
		margin-bottom: 12px;
	}
	div.program_ttl p.tag_program::before {
		width: 18px;
		height: 18px;
		left: -9px;
		top: 3px;
	}
	
	div.program_ttl h1 {
		line-height: 1.4;
	}
	div.growing_story01 div.program_ttl h1 {
		margin-bottom: 64px;	
	}
	div.growing_story02 div.program_ttl h1 {
		margin-bottom: 155px;	
	}
	div.growing_story03 div.program_ttl h1 {
		margin-bottom: 110px;	
	}
	
	div.name {}
	div.name p {
		font-size: 2rem;
	}
	div.name p.affiliation {
		font-size: 1.6rem;
	}

	/* プログラム紹介 */
	div.growing_story div.contents header.header {
		display: flex;
		padding-right: 32px;
		padding-left: 32px;
	}
	header.header div.profile_img {
		max-width: 320px;
		margin-right: 3%;
		height: auto;
	}

	
	/* 5-4. program introduction */	
	section.program_intro {
		margin-top: 20px;
		margin-bottom: 90px;
		padding-left: 32px;
	}
	div.program_intro_in {
		padding: 24px;
		position: relative;
		display: flex;
		height: 240px;
	}
	div.program_text {
		width: 49%;
		margin-right: 2%;
	}

		div.program_img {
			width: 100%;
			margin-top: 25px;
		}
		div.growing_story03 div.program_img {
			margin-top: 34px;
		}
		div.program_img ul {
			display: flex;
			width: 100%;
		}
		div.program_img ul li {
			max-width: 208px;
			height: auto;
		}
		div.program_img ul li:not(:last-child) {
			margin-right: 3%;
		}
	
	div.program_movie {
		width: 49%;
	}
	div.program_movie iframe {
		min-height: 240px;
	}

	/* 5-5. program interview */
	article section.section {
		padding-left: 32px;
		padding-right: 32px;
	}
	article section.section img {
		width: 100%;
		height: auto;
	}
	article section.section h1 {
		font-size: 2.2rem;
		margin-bottom: 8px;
	}
	article section.section p {
		line-height: 2;
	}
	
	article section.interview_01 {
		margin-bottom: 32px;
	}
	article section.interview_01,
	article section.interview_02 {
		display: flex;
	}
	div#growing_story01 article section.interview_01 div.lbox,
	div#growing_story01 article section.interview_02 div.rbox,
	div#growing_story02 article section.interview_01 div.lbox,
	div#growing_story02 article section.interview_02 div.rbox,
	div#growing_story03 article section.interview_01 div.lbox,
	div#growing_story03 article section.interview_02 div.rbox {
		width: 67%;
	}
	div#growing_story01 article section.interview_01 div.rbox,
	div#growing_story01 article section.interview_02 div.lbox,
	div#growing_story02 article section.interview_01 div.rbox,
	div#growing_story02 article section.interview_02 div.lbox,
	div#growing_story03 article section.interview_01 div.rbox,
	div#growing_story03 article section.interview_02 div.lbox {
		max-width: 312px;
		height: auto;
	}
	div#growing_story01 article section.interview_01 div.lbox,
	div#growing_story01 article section.interview_02 div.lbox,
	div#growing_story02 article section.interview_01 div.lbox,
	div#growing_story02 article section.interview_02 div.lbox,
	div#growing_story03 article section.interview_01 div.lbox,
	div#growing_story03 article section.interview_02 div.lbox {
		margin-right: 3%;
	}

	article footer.footer {
		display: flex;
		margin-top: 60px;
		padding-left: 32px;
		padding-right: 32px;
	}
	article footer.footer div.comment {
		padding: 24px;
		width: 63%;
		margin-right: 2%;
		margin-bottom: 2%;
		margin-top: -2%;
	}
	article footer.footer div.comment::before {
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-radius: 50%;
		transform: rotate(45deg);
		right: -18px;
		bottom: 25px;
		border-left: 20px solid transparent;
		border-top: 20px solid transparent;
		border-right: 20px solid #f8b62d;
		border-bottom: 20px solid #f8b62d;
	}
	div.growing_story02 article footer.footer div.comment::before {
		border-right-color: #ffde3f;
		border-bottom-color: #ffde3f;
	}
	div.growing_story03 article footer.footer div.comment::before {
		border-right-color: #b3d000;
		border-bottom-color: #b3d000;
	}
	article footer.footer div.comment::after {
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-radius: 50%;
		transform: rotate(45deg);
		right: -20px;
		bottom: 36px;
		border-left: 20px solid transparent;
		border-top: 20px solid #fff;
		border-right: 20px solid #fff;
		border-bottom: 20px solid transparent;
	}
	
	article footer.footer div.comment p {
		line-height: 2;
	}
	article footer.footer div.comment_img {
		max-width: 312px;
		height: auto;
		margin-top: 24px;
	}
	article footer.footer div.comment_img img {
		width: 100%;
		height: auto;
	}
	
	
	/* 6. growing_story_fair */
	div.growing_story_fair {
		margin-top: -66px;
	}
	div.growing_story_fair div.gs_num {
		position: static;
		left: 0;
		top: 0;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0 0 16px 0;
	}
	div#fair_movie {
		height: 648px;
		margin-bottom: -180px;
	}

	
	/* 7. footer */
	footer#footer {	}
	div.footer_inner {
		max-width: 1000px;
	}

	/* 7-1. footer navigation */
	nav#fnav {
		font-size: 1.4rem;
	}
	nav#fnav ul {
		float: right;
	}
	nav#fnav ul li:not(:last-child) {
		margin-right: 12px;
	}

	/* 7-2. footer last */
	div.footer_last {
		margin-top: 32px;
		padding: 16px 0;
	}
	div.footer_last small {
		font-size: 1.2rem;
		float: left;
		margin-top: 22px;
	}
	div.footer_last div.flogo {
		width: 182px;
		height: 40px;
		float: right;
	}
	
	
	/* Firefoxのみ */
	@-moz-document url-prefix() {
		nav#mnav {
			font-size: 1.8rem;
		}
		nav#mnav ul li {
			height: 86px;
		}
		nav#mnav ul li:first-child span.program_name {
			width: 200px;
		}
		nav#mnav ul li:nth-child(2) span.program_name {
			width: 180px;
		}
		nav#mnav ul li:last-child span.program_name {
			width: 200px;
		}
		
		div.growing_story01 div.program_ttl h1 {
			margin-bottom: 90px;	
		}
		div.growing_story02 div.program_ttl h1 {
			margin-bottom: 165px;	
		}
		div.growing_story03 div.program_ttl h1 {
			margin-bottom: 130px;	
		}
		
		div.growing_story:not(:last-child) {
			margin-bottom: 160px;
		}
		
		div.program_ttl p.tag_program::before {
			width: 17px!important;
			height: 17px!important;
		}
		
		div.program_img {
			margin-top: 42px;
		}
		div#growing_story03 div.program_img {
			margin-top: 66px;
		}
		
		article footer.footer div.comment {
			width: 62%;
			margin-right: 3%;
			margin-bottom: 3%;
		}
	}
/* width
-------------------- */
.w10 { width: 10px; } .w20 { width: 20px; } .w30 { width: 30px; } .w40 { width: 40px; } .w50 { width: 50px; } .w60 { width: 60px; } .w70 { width: 70px; } .w80 { width: 80px; } .w90 { width: 90px; } .w100 { width: 100px; }
.w110 { width: 110px; } .w120 { width: 120px; } .w130 { width: 130px; } .w140 { width: 140px; } .w150 { width: 150px; } .w160 { width: 160px; } .w170 { width: 170px; } .w180 { width: 180px; } .w190 { width: 190px; } .w200 { width: 200px; }
.w210 { width: 210px; } .w220 { width: 220px; } .w230 { width: 230px; } .w240 { width: 240px; } .w250 { width: 250px; } .w260 { width: 260px; } .w270 { width: 270px; } .w280 { width: 280px; } .w290 { width: 290px; } .w300 { width: 300px; }
.w310 { width: 310px; } .w320 { width: 320px; } .w330 { width: 330px; } .w340 { width: 340px; } .w350 { width: 350px; } .w360 { width: 360px; } .w370 { width: 370px; } .w380 { width: 380px; } .w390 { width: 390px; } .w400 { width: 400px; }
.w410 { width: 410px; } .w420 { width: 420px; } .w430 { width: 430px; } .w440 { width: 440px; } .w450 { width: 450px; } .w460 { width: 460px; } .w470 { width: 470px; } .w480 { width: 480px; } .w490 { width: 490px; } .w500 { width: 500px; }
.w510 { width: 510px; } .w520 { width: 520px; } .w530 { width: 530px; } .w540 { width: 540px; } .w550 { width: 550px; } .w560 { width: 560px; } .w570 { width: 570px; } .w580 { width: 580px; } .w590 { width: 590px; } .w600 { width: 600px; }
.w610 { width: 610px; } .w620 { width: 620px; } .w630 { width: 630px; } .w640 { width: 640px; } .w650 { width: 650px; } .w660 { width: 660px; } .w670 { width: 670px; } .w680 { width: 680px; } .w690 { width: 690px; } .w700 { width: 700px; }
.w710 { width: 710px; } .w720 { width: 720px; } .w730 { width: 730px; } .w740 { width: 740px; } .w750 { width: 750px; } .w760 { width: 760px; } .w770 { width: 770px; } .w780 { width: 780px; } .w790 { width: 790px; } .w800 { width: 800px; }
.w810 { width: 810px; } .w820 { width: 820px; } .w830 { width: 830px; } .w840 { width: 840px; } .w850 { width: 850px; } .w860 { width: 860px; } .w870 { width: 870px; } .w880 { width: 880px; } .w890 { width: 890px; } .w900 { width: 900px; } .w910 { width: 910px; } .w920 { width: 920px; }
.w930 { width: 930px; } .w940 { width: 940px; } .w950 { width: 950px; } .w960 { width: 960px; }

/* margin-bottom
-------------------- */
.mgb10 { margin-bottom: 10px!important; } .mgb20 { margin-bottom: 20px!important; } .mgb30 { margin-bottom: 30px!important; } .mgb40 { margin-bottom: 40px!important; } .mgb50 { margin-bottom: 50px!important; } .mgb56 { margin-bottom: 56px!important; } .mgb60 { margin-bottom: 60px!important; } .mgb70 { margin-bottom: 70px!important; } .mgb80 { margin-bottom: 80px!important; } .mgb90 { margin-bottom: 90px!important; } .mgb100 { margin-bottom: 100px!important; }
.mgb110 { margin-bottom: 110px!important; } .mgb120 { margin-bottom: 120px!important; } .mgb130 { margin-bottom: 130px; } .mgb140 { margin-bottom: 140px; } .mgb150 { margin-bottom: 150px; } .mgb160 { margin-bottom: 160px; } .mgb170 { margin-bottom: 170px; } .mgb180 { margin-bottom: 180px; } .mgb190 { margin-bottom: 190px; } .mgb200 { margin-bottom: 200px; }

}