@charset "UTF-8";
/* 共通CSS 
------------------------------------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: bottom;
}

h1,h2,h3,h4{
	line-height: 1.4;
	letter-spacing: 0;
	padding: 0;
}
a{
    text-decoration: none;
}
img{
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
#content a,
#content a img {
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
}
#content a:hover img,
#content .btn a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
.btn a {
	display: inline-block;
	padding: 8px 10px;
	background: #000;
	line-height: 1;
}
.btn a:hover {
	background: #666;
}
.btn a:link,
.btn a:visited,
.btn a:hover,
.btn a:active {
	color: #FFF;
	text-decoration: none;
}


/* main */
#outer {
	margin: 0 auto;
	width: 100%;
}
.p{
	display: block;
}
.jiyuukenkyuSupport{
	padding: 60px;	
	background: #DAEEFB;
	background-image: url("../lab/jiyukenkyu/img/jiyukenkyuCloud1.png"), url("../lab/jiyukenkyu/img/jiyukenkyuCloud2.png"),url("../lab/jiyukenkyu/img/jiyukenkyuCloud3.png"),url("../lab/jiyukenkyu/img/jiyukenkyuCloud4.png"),url("../lab/jiyukenkyu/img/jiyukenkyuCloud5.png");
	background-repeat: no-repeat;
}
h2{
	font-size: 22px;
	padding-bottom: 10px;
}
h3{
	font-size: 20px;
	border-bottom: 2px solid #000;
	display: block;
	width: 300px;
	margin: 0 auto;
	padding-bottom: 5px;
}
.supportStep h3 span{
	font-size: 20px;
}
h4{
	font-size: 18px;
	text-align: center;
	display: inline-block;
	margin: 20px 0;
	width: 100%;
}
h5{
	font-size: 18px;
}
p,span,figcaption{
	font-size: 13px;
}
li{
	list-style: none;
}
button{
	border: none;
}

@media(min-width:940px){
	#outer {
		max-width: 940px;
	}
	.p{
		margin-bottom: 20px;
	}
	.pcBr{
		display: block;
	}
	.spBr{
		display: none;
	}
	.jiyuukenkyuSupport{
		background-position: top 300px right 350px, top 300px right, top 100px right, top 300px left, top 40px left;
		background-size: 150px, 100px, 250px, 200px, 100px;
	}
}
@media(max-width:940px) {
	#outer {
        max-width: 500px;
        padding-bottom: 0;
		line-height: 1.8;
    }
	.p{
		margin-bottom: 14px;
	}
	.jiyuukenkyuSupport{
		background-position: top 675px right 100px, top 300px right, top 160px right, top 475px left, top 40px left;
		background-size: 150px, 100px, 175px, 150px, 100px;
	}
	.pcBr{
		display: none;
	}
	.spBr{
		display: block;
	}
	p,span,figcaption{
		font-size: 15px;
	}
	h3,
	h3.stepColor1,
	h3.stepColor2,
	h3.stepColor3{
		font-size: 19px;
	}
	h3{
		width: 250px;
	}
	h4{
		font-size: 17px;
	}
	h5{
		font-size: 15px;
	}
	.jiyuukenkyuSupport{
		padding: 19px;	
		margin-bottom: 30px;
	}
}

/* 自由研究タイトル */
.jiyuukenkyuTitle{
	position: relative;
    background:url(../lab/jiyukenkyu/img/jiyukenkyuTop.jpg) no-repeat ;
    width:100%;
    background-size:100% auto;
	padding-top: 24.25%;
	position: relative;
}
.jyuukenkyuTopBg{
	background:url(../lab/jiyukenkyu/img/jiyukenkyuTop_bg.jpg) no-repeat;
	background-size:100% auto;
}
.jiyuukenkyuTitle a img:nth-child(1){
	width: 95px;
	position: absolute;
	top: 0;
}
.bgColor{
	background: rgba(255,255,255,0.5); 
	position: relative;
}
.stepItemSDGs{
	width: 150px;
}
.stepItem{
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 14px;
	gap: 5px;
}
.stepItem img{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto;
	display: block;
}
.stepItem span{
	font-weight: bold;
}
.itemSpan{
	border-bottom: 1px #000000 solid;
	width: 60px;
	margin: 0 auto;
}
.stepColor1,
.stepColor2,
.stepColor3{
	position: relative;
	left: 3px;
}
.stepItem1 span:last-of-type,.stepColor1{
	color: #2AB9B9;
}
.stepItem2 span:last-of-type,.stepColor2{
	color: #F25B25;
}
.stepItem3 span:last-of-type,.stepColor3{
	color: #E8457E;
}
.jiyuukenkyuStep{
	display: grid;
	justify-content: center;
	gap: 14px;
}
@media(min-width:940px){
	.jiyuukenkyuStep{
		grid-template-columns: repeat(3,200px);
		padding: 75px 0 25px;
		align-items: end;
	}
	.stepItem span:nth-child(4){
		font-size: 13px;
	}
}
@media(max-width:940px) {
	.jiyuukenkyuTitle a img{
		width: 40px;
	}
	.jiyuukenkyuTitle div{
		display: none;
	}
	.jiyuukenkyuTitle a img:nth-child(1){
		width: 60px;
	}
	.jiyuukenkyuStep{
		padding: 20px 0;
	}
	.jyuukenkyuTopBg{
		background:url(../lab/jiyukenkyu/img/jiyukenkyuTop_bg.jpg) repeat;
	}
	.stepItem{
		width: 275px;
	}
}

/* 自由研究サポート */
/* 導入テキスト */
.textFlex {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0 auto;
	width: 100%;
}
.supportText{
	padding-bottom: 30px;
}
.supportText img{
	width: 30px;
	margin-left: 10px;
}
.textColor{
	color: #0591D9;
	text-align: center;
}
@media(max-width:940px) {
	h2{
		font-size: 19px;
		padding-bottom: 14px;
	}
	.supportText img{
		display: none;
	}
}

/* SupportStep */
/* Step1 */
.supportStep1{
	background: #fff;
	padding: 30px;
	margin-bottom: 10px;
}
.step1Text {
	text-align: center;
}
.step1Text h4{
	color: #2AB9B9;
}
.step1Text ul{
	padding: 0 0 1.5rem;
}
.step1Text li{
	font-size: 18px;
}
.step1Text li::before{
	content: "⚫︎";
}
.step1Text p{
    margin: 0 0  1.5rem;
}
.btnItem{
	display: flex;
	gap: 10px;
	border: none;
}
.btnItem img{
	width: 213px;
}

@media(min-width:940px) {
	.step1Text h5{
		font-weight: normal;
	}
	.step1Btn{
		display: grid;
		grid-template-columns: repeat(3, 213px);
		justify-content: space-between;
		padding: 0 30px 30px;
		align-items: center;
	}
	.btnItem{
		flex-direction: column;
	}
	#slideImages{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 0 30px;
	}
	#slideImages li{
		width: 100%;
		height: 230px;
	}
	#slideImages li img{
		height: 230px;
		width: 100%;
		object-fit: cover;
	}
}

@media(max-width:940px) {
	.step1Text h5{
	font-weight: bold;
	}
	.step1Text li{
		font-size: 15px;
	}
	.supportStep1 {
		padding: 19px;
	}
	.step1Btn{
		display: grid;
		flex-direction: column;
		gap: 14px;
		padding-bottom: 30px;
	}
	.btnItem{
		justify-content: center;
	}
	.step1Btn div:first-of-type{
		order: 2;
	}
	.step1Btn div:nth-of-type(2){
		order: 1;
		width: 260px;
		margin: 0 auto;
	}
	.step1Btn div:last-of-type{
		order: 3;
	}

	/* スライド */
	#slider{
		position: relative;
		width: 300px;
		margin: 0 auto;
	}
	
	#slideImages li{
		margin: 20px 0;
		text-align: center;
	}
	#slideImages li img{
		width: 260px;
	}
	.is-hidden{
		display: none;
	}
	
	/*　　左右切り替えボタン　　*/
	#prev,#next{
		width: 40px;
		height: 40px;
		background-color: rgba(160, 160, 160, 0.7);
		border-radius: 50%;
		transform: translateY(-50%);
		z-index: 1;
		position: absolute;
		top: 50%;
		border: none;
		font-size: 20px;
		color: #fff;
		cursor: pointer;
		transition: all 0.3s;
	}
	#prev{
		left: 0;
	}
	#next{
		right: 0;
	}
}

/* Step2 */
.step2Text{
	background: #fff;
	padding: 30px ;
	position: relative;
}
.step2Text img{
	position: absolute;
	width: 100px;
	left: 150px;
	top: 40px;
}
.step2Text h4,.step2Flow h4{
	color: #F25B25;
}
.step2Text h4{
	border-bottom: 1px solid #F25B25;
}
.step2Flow h4{
	margin-top: 0;
}
.step2Text{
	text-align: center;
}

figure img{
	width: 100%;
	height: 220px;
	object-fit: cover;
}
.step2Banner{
	text-align: center;
}
.step2Banner img,.step3Text button img{
	width: 400px;
	height: auto;
}
@media(min-width:940px) {
	.spOnly
	.step2Text h4{
		border-bottom: 1px solid #F25B25;
		width: 350px;
		padding-bottom: 5px;
	}
	.step2Flow{
		background: #FCEBD0;
		padding: 30px 60px;
		margin-bottom: 10px;
	}
	.step2Banner  span{
		font-size: 13px;
	}
	.step2Grid{
		display: grid;
		justify-content: center;
		gap: 30px;
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 40px;
	}
	.step2Grid figure{
		width: 335px;
	}
	.step2Figure5{
		grid-column: 1 / -1;
  		justify-self: center;
	}
	.step2TextBig,.step2TextBig span{
		font-size: 16px;
	}
}
@media(max-width:940px) {
	.step2Text img{
		display: none;
	}
	.step2Text h4{
		border-bottom: 1px solid #F25B25;
		width: 300px;
	}
	.step2Text{
		padding: 19px;
	}
	.step2Flow{
		background: #FCEBD0;
		padding: 19px;
		margin-bottom: 10px;
	}
	.step2Grid{
		margin-bottom: 20px;
	}
	figure{
		margin-bottom: 30px;
		position: relative;
		width: 260px;
		margin: 0 auto 30px;
	}
	figure img{
		border-radius: 0 40px 0 40px;
		height: 180px;
	}
	figure::before{
		padding: 7px;
		background: #F25B25;
		color: #fff;
		font-weight: bold;
		display: block;
		position: absolute;
		border-radius: 0 0 50% 0;
		width: 30px;
	}
	figure:first-of-type::before {
		content: "01";
	  }
	  
	figure:nth-of-type(2)::before {
		content: "02";
	  }
	figure:nth-of-type(3)::before {
		content: "03";
	}
	figure:nth-of-type(4)::before{
		content: "04";
	}
	.step2Figure5 figure::before {
		content: "05";
	}
}


/* Step3 */
.step3Text h4, .step3Report h4{
	color: #E8457E;
}
.step3Report h4{
	margin-top: 0;
}
.step3Report h5{
	text-align: center;
	font-size: 15px;
}
.step3Report h4{
	margin-bottom: 0;
}
.step3Text{
	background: #fff;
	padding: 30px;
	text-align: center;
}
.step3Report{
	background: #FEFCE3;
	padding: 30px 60px 60px;
}
.reportItem img,.reportItem4 img{
	width: 340px;
	height: 240px;
	object-fit: cover;
}

@media(min-width:940px) {
	.reportItem1,.reportItem4{
		display: grid;
		justify-content: space-between;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.reportItem2{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-content: center;
		gap: 20px;
	}
	.reportItem p{
		font-size: 13px;
	}
	.reportItem2 div:last-of-type{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.reportItem3{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-content: center;
	}
	.reportAccordionItem{
		border-bottom:1px solid rgb(195, 195, 195) ;
		padding: 20px 0;
	}
	.reportAccordionItem:nth-child(5){
		border: none;
	}
	.reportItem3Left,.reportItem3Right{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.contentAccordionTitle h6{
		color: #e3007f;
		font-size: 16px;
		display: block;
		margin-bottom: 20px
	}
	.rightH6{
		padding-left: 15px;
	}
	.leftItem {
		padding-right: 15px;
		border-right:1px solid rgb(195, 195, 195) ;
	}
	.rightItem{
		padding-left: 15px;
	}
	.leftItem,.rightItem{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.rightItem img:first-of-type,
	.leftItem img:first-of-type, 
	.reportItem2 div:last-of-type,
	.reportItem4 img:first-of-type{
		order: 1;
	}
	.rightItem img:last-of-type,
	.leftItem img:last-of-type,
	.reportItem2 div:first-of-type,
	.reportItem4 div{
		order: 2;
	}
	.rightItem div,
	.leftItem div,
	.reportItem4 img:nth-of-type(2){
		order: 3;
	}
	.reportItem4 img:last-of-type{
		order: 4;
	}
}

@media(max-width:940px){
	.step3Text{
		padding:19px;
	}
	.step3Report {
		background: #FEFCE3;
		padding: 30px 19px 60px;
	}

	/* アコーディオンパネル */
	.contentAccordionTitle{
		position: relative;
		font-size: 15px;
		width: 100%;
		padding: 10px;
  		border: none;
		color: #e3007f;
		font-weight: bold;
  		border-bottom: 1px solid #000000;
  		text-align: left;
  		cursor: pointer;
  		background-color: transparent;
  	}
	.contentAccordionTitle h6{
		display: inline-block;
		width: 80%;
		font-size: 15px;
	}
	.reportItem1,
	.reportItem2,
	.leftItem,
	.rightItem,
	.reportItem4{
		max-height: 0; 
  		overflow: hidden;
		margin: 20px 0;
		display: none;
	}
	.reportItem1 img{
		display: flex;
		justify-content: center;
	}

	.reportItem p.longText,
	.reportItem p,
	.reportItem4 p {
		height: auto;
		margin-bottom: 28px;
		display: block
	}
	.reportItem img,.reportItem4 img{
		display: block;
		margin:0 auto 20px;
		width: 260px;
		height: 170px;
	}
	.reportItem1.open,
	.reportItem2.open,
	.leftItem.open, 
	.rightItem.open,
	.reportItem4.open {
		max-height: 100%;
		display: block;
  	}
	.reportArrow{
		display: block;
		width: 20px;
		position: relative;
		position: absolute;
		right: 20px;
		top: 50%;
	}
	.contentAccordionTitle.active .reportArrow{
		transform: rotate(180deg);
	}
	.reportArrow span{
		width: 15px;
		height: 1px;
		background-color: #000000;
		display: block;
		position: absolute;
	}
	.reportArrow span:first-of-type{
		rotate: 45deg;
		right: 38%;
	}
	.reportArrow span:last-of-type{
		rotate: -45deg;
		left: 38%;
	}
}

/* お問い合わせ */
.supportInquiry{
	background: #fff;
	padding: 30px;
}
.supportInquiry div{
	margin-bottom: 20px;
}
.supportInquiry p{
	text-align: center;
}
.inquirySmallp{
	font-size: 11px;
}
.inquirySns{
	display: flex;
	justify-content: center;
	gap: 20px;
}
.inquirySns img{
	width: 40px;
}
.inquiryParticipate{
	margin: 0 auto;
	display: flex; 
    justify-content: center;
}
.inquiryParticipate img{
	width: 410px;
}
@media(max-width:940px){
	.supportInquiry{
		padding: 19px;
	}

}

.globalNav a:nth-child(4) {
    background-color: #666;
    color: #fff;
}