@charset "UTF-8";

section.block .intro h2 {
	color: #333333;
	font-size: 24px;	
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 0.5em;	
}
.intro {
	margin-bottom: 2em;
	padding: 0 4%;
}
.intro p {
	font-size: 115%;
	color: #ffffff;
	font-weight: 600;
	line-height: 1.8;
	text-align: left;
}
.block .item {
	position: relative;
	margin-bottom: 7em;
}
.block .item:last-of-type {	
	margin-bottom: 5em;
}
.block .item .lbl {
	position: absolute;
	top: -1em;
	left: calc(50% - 140px);
	font-weight: 600;
	z-index: 3;
}
.block .item .lbl span {
	font-size: 13px;
	display: block;
	width: 50px;
	height: 50px;
	line-height: 50px;
	background: #fef6ec;
	text-align: center;
	border-radius: 50%;
	position: relative;
	z-index: 4;
}
.block .item .lbl h3 {
	font-size: 18px;
	width: 75px;
	height: 75px;
	line-height: 75px;
	color: #ffffff;
	background: #111111;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	top: 8px;
	left: 42px;
}
.block .item .imgarea {
	position: absolute;	
	width: 270px;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index: 2;
}
.block .item dl {
	background: #ffffff;
	border-radius: 1em;
	padding: 2em 2em 1.5em;
	position: relative;
	z-index: 1;
	top: 4em;
	text-align: left;
	max-width: 400px;
	margin: 0 auto;
}
.block .item dl dt {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 0.5em;
	line-height: 1.4;
}
.block .item dl dd {
	font-size: 16px;
	line-height: 1.6;
}
.btnarea {
	margin-top: 0.8em;
}

/* mv */
#mv {
	background: #ffffff;
}
#mv .mvbg {
	background: #67b2f8 url("../img/bg_nami_blue.svg") repeat-x 50% 100% / 42px auto;
}
#mv .mvbg::before {
	content: "";
	display: block;
	background: url("../img/bg_ellipse.png") no-repeat 50% 100% / 220% 100%;
	height: 93vw;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
#mv .ttlarea {
	text-align: center;
}
#mv .ttlarea .inner {
	background: url("../img/icon_experiment.svg") no-repeat 50% 8vw / 13vw auto,
		url("../img/icon_magnet.svg") no-repeat 10% 54vw / 12vw auto,
		url("../img/icon_dropper.svg") no-repeat 89% 55vw / 9vw auto, 
		url("../img/icon_leaf.svg") no-repeat 50% 77vw / 9vw auto,
		url("../img/mv_character01_sp.png") no-repeat 50% 88% / 90vw auto,
		url("../img/mv_character02_sp.png") no-repeat 5% 5vw / 27vw auto,
		url("../img/mv_character03_sp.png") no-repeat 93% 5vw / 22vw auto,
		url("../img/loupe.png") no-repeat 50% 16vw / 50vw auto;
	min-height: 110vw;
	box-sizing: border-box;
	padding-top: 26vw;
}
#mv .ttlarea h1 {
	width: 70vw;
  margin: 0 auto 4vw;
}
#mv .ttlarea p {
	width: 54vw;
  margin: 0 auto;
}
section.block .innerlink .inner {
	width: 92%;
	padding-top: 30px;
	padding-bottom: 30px;
}
.innerlink .inner p {
	font-size: 115%;
	font-weight: 600;
	line-height: 1.8;	
}
.innerlink .btnarea {
	background: url("../img/icon_gloves.svg") no-repeat 3% 5px / 60px auto,
		url("../img/icon_compass.svg") no-repeat 100% 100% / 42px auto,
		url("../img/icon_mortar.svg") no-repeat 90% 2% / 40px auto;
	padding-top: 50px;
	padding-bottom: 30px;
}
.innerlink .btnarea li {
	margin-bottom: 1em;
}
.innerlink .btnarea span {
	font-size: 115%;
}
.innerlink .btnarea .yellow span {
	color: #fdae03;	
}
.innerlink .btnarea .green span {
	color: #39b664;	
}
.innerlink .btnarea .pink span {
	color: #f6539c;	
}
.innerlink .btnarea a {	
	padding: 0 24px 0 34px;
	min-width: inherit;
	width: 80%;
}
.innerlink .btnarea .yellow a {
	background: #fdae03 url("../img/icon_arrow_btm.svg") no-repeat 18px center / auto 18px;
}
.innerlink .btnarea .green a {
	background: #39b664 url("../img/icon_arrow_btm.svg") no-repeat 18px center / auto 18px;	
}
.innerlink .btnarea .pink a {
	background: #f6539c url("../img/icon_arrow_btm.svg") no-repeat 18px center / auto 18px;	
}


/* experiment */
#experiment {
	background: #fcc94f url("../img/bg_nami_orange.svg") repeat-x 50% 0 / 42px auto;
}
#experiment h2 {
	color: #ee3e1c;
	background: url("../img/icon_pendulum.svg") no-repeat calc(50% + 30px) 70px / 54px auto, url("../img/princess01.png") no-repeat calc(50% - 46px)100% / 80px auto;
	padding-bottom: 110px;
}
#experiment.block .item {
	margin-bottom: 10em;
}
#experiment.block .item dl {
	top: 6em;
	padding-top: 10em;	
}
#experiment.block .item .lbl h3,
#experiment.block .item dl dt {
	color: #e59701;	
}
#experiment.block .item .btnarea a {
	color: #333333;
	background-color: #fcb417;
	background-image: url("../img/icon_arrow_bk.svg");
}

/* column */
#column {
	background: #50bb75 url("../img/bg_nami_orange_green.svg") repeat-x 50% 0 / 42px auto;
}
#column h2 {
	color: #ffde00;
	background: url("../img/icon_book.svg") no-repeat calc(50% - 46px) 60px / 46px auto, url("../img/princess02.png") no-repeat calc(50% + 30px)100% / 68px auto;
	padding-bottom: 110px;
}
#column .intro .imgarea {
	width: 75%;
    min-width: 260px;
    max-width: 400px;
	margin: 1em auto 0;
}
#column.block .item .lbl h3,
#column.block .item dl dt {
	color: #39b664;	
}
#column.block .item .btnarea a {
	background-color: #39b664;
}

/* event */
#event {
	background: #fed6e2 url("../img/bg_nami_green_pink.svg") repeat-x 50% 0 / 42px auto;
}
#event h2 {
	color: #f6539c;
	background: url("../img/icon_testtube.svg") no-repeat calc(50% + 30px) 70px / 54px auto, url("../img/princess03.png") no-repeat calc(50% - 46px)100% / 68px auto;
	padding-bottom: 110px;
}
#event .intro p {
	color: #333333;
}
#event ul.flexbox li {
	display: flex;
	justify-content: space-between;
	background: #fff;
	padding: 1em;
	border-radius: 1em;
	margin: 0 auto 1em;
	max-width: 470px;
}
#event ul.flexbox li .imgarea {
	width: 34%;
}
#event ul.flexbox li .txtarea {
	width: 62%;
	text-align: left;
}
#event ul.flexbox li .txtarea h3 {
	margin: 0.2em 0;
	font-size: 16px;
	text-align: left;
	font-weight: 600;
	color: #f6539c;
	line-height: 1.4;	
}
#event ul.flexbox li .txtarea p {
	font-size: 15px;
}
#event ul.flexbox li .txtarea .btnarea {
	margin-top: 0.5em;
	text-align: right;
}
#event ul.flexbox li .txtarea .btnarea a {
	background-color: #f6539c;
	font-size: 15px;
	padding-left: 12px;
	padding-right: 30px;
	width: 100%;
	max-width: 200px;
}

/* 〜374px
------------------------------ */
@media screen and (max-width: 374px) {
	#event ul.flexbox li .txtarea .btnarea a {
		background-color: #f6539c;
		font-size: 14px;
		letter-spacing: 0;
		padding: 0 30px 0 12px;
		background-position: right 10px center;
		background-size: 16px auto;
	}
}

/* 414px〜479px：SP landscape
------------------------------ */
@media screen and (min-width: 414px) {
	
	#experiment h2 {
		background-position: calc(50% + 146px) 50%, calc(50% - 140px) 100%;
		padding: 40px 0 40px 14px;
	}
	#column h2 {
		background-position: calc(50% - 146px) 50%, calc(50% + 138px) 100%;
		padding: 40px 20px 40px 0;
	}
	#event h2 {
		background-position: calc(50% + 146px) 50%, calc(50% - 138px) 100%;
		padding: 40px 0 40px 14px;
	}
}
/* 480px〜599px：SP landscape
------------------------------ */
@media screen and (min-width: 480px) {
	section.block .innerlink .inner {
		padding-bottom: 10px;
	}
	.innerlink .btnarea {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background-position: 2% 100%, 100% 100%, 98% 0;
		background-size: 70px auto, 54px auto, 52px auto;
		padding-bottom: 60px;
	}
	.innerlink .btnarea li {
		margin: 0 5px 1em;
	}
	.innerlink .btnarea li:last-of-type {
		margin-bottom: 0;
	}
	.innerlink .btnarea a {
		width: 100%;
	}
}


/* 600px〜959px：tablet
------------------------------ */
@media screen and (min-width: 600px) {
  /***************************
      container
  ***************************/ }


/* 720px〜959px：tablet
------------------------------ */
@media screen and (min-width: 720px) {
	#mv .mvbg::before {
		background-size: 180% 100%;
		height: 380px;
	}	
	#mv .ttlarea .inner {
		background: url("../img/icon_experiment.svg") no-repeat 50% 28px / 66px auto,
			url("../img/icon_magnet.svg") no-repeat 32% 60px / 60px auto,
			url("../img/icon_dropper.svg") no-repeat 71% 66px / 44px auto,
			url("../img/icon_leaf.svg") no-repeat 50% 313px / 46px auto,
			url("../img/mv_character01_sp.png") no-repeat 50% 90% / 520px auto,
			url("../img/mv_character02_sp.png") no-repeat calc(50% - 290px) 20px / 130px auto,
			url("../img/mv_character03_sp.png") no-repeat calc(50% + 290px) 20px / 110px auto,
			url("../img/loupe.png") no-repeat 50% 78px / 240px auto;
		padding-top: 140px;
		min-height: 460px;		
	}
	#mv .ttlarea h1 {
		width: 500px;
		margin-bottom: 1em;
	}
	#mv .ttlarea p {
		width: 400px;
	}	
	section.block .intro h2 {
		font-size: 32px;
	}
	#experiment h2, #column h2, #event h2 {
		background: none;
		padding: 0;
	}
	#experiment .intro {
		background: url("../img/icon_pendulum.svg") no-repeat 85% 10px / 64px auto, url("../img/princess01.png") no-repeat 0 100% / 108px auto;
		padding: 20px 0 14px;
	}
	#column .intro {
		background: url("../img/icon_book.svg") no-repeat 16% 4px / 54px auto, url("../img/princess02.png") no-repeat 100% 10% / 94px auto;
		padding: 20px 0 0;
	}
	#event .intro {
		background: url("../img/icon_testtube.svg") no-repeat 85% 10px / 64px auto, url("../img/princess03.png") no-repeat 0 50% / 92px auto;
		padding: 20px 0 0;
	}	
	.block .item {
		max-width: 310px;
  		margin-left: 5px;
  		margin-right: 5px;
	}
	.intro p {
		font-size: 16px;
		width: 67%;
		margin: 0 auto;
		text-align: center;
	}
	#mv .mvbg, #experiment, #column, #event {
		background-size: 62px auto;
	}
	.innerlink .inner p {
		font-size: 130%;
	}
	#column .intro .imgarea {
		width: 90%;
		max-width: 825px;
	}
	#experiment.block .item {
		margin-bottom: 8em;
	}
	#event ul.flexbox li .txtarea .btnarea a {
		font-size: 16px;
	}
}


/* 960px〜1279px：small PC
------------------------------ */
@media screen and (min-width: 960px) {
	section.block .intro h2 {
		font-size: 40px;		
	}
	#mv .mvbg::before {
		background-size: cover;	
		height: 215px;
		padding-top: 60px;
	}
	#mv .ttlarea .inner {		
		background: url("../img/icon_experiment.svg") no-repeat 50% 24px / 80px auto,
			url("../img/icon_magnet.svg") no-repeat calc(50% - 170px) 20px / 70px auto,
			url("../img/icon_dropper.svg") no-repeat calc(50% + 190px) 26px / 50px auto,
			url("../img/icon_leaf.svg") no-repeat 51% 244px / 55px auto,
			url("../img/mv_character01.png") no-repeat calc(50% - 340px) 24px / 253px auto,
			url("../img/mv_character02.png") no-repeat calc(50% + 340px) 40px / 194px auto,
			url("../img/loupe.png") no-repeat calc(50% + 12px) 40px / 296px auto;
		min-height: 375px;
		padding-top: 120px;
	}
	#mv .ttlarea h1 {
		width: 551px;
		margin-bottom: 1em;
	}
	#mv .ttlarea p {
		width: 442px;
	}	
	section.block .innerlink .inner {
		padding-top: 50px;
		padding-bottom: 30px;  
	}
	.innerlink .btnarea {
		background-position: 2% 100%, 99% 95%, 94% 25%;
		background-size: 80px auto, 50px auto, 59px auto;
		padding-top: 20px;
		padding-bottom: 10px;    
	}	
	#experiment .intro {
		background-position: 78% 6px, 10% 100%;
		background-size: 80px auto, 130px auto;
		padding: 20px 0 18px;
	}
	#column .intro {
		background-position: 24% 4px,94% 0;
		background-size: 60px auto, 102px auto;
		padding: 20px 0 2px;
	}
	#event .intro {
		background-position: 75% 10px, 12% 0;
		background-size: 70px auto, 106px auto;
	}	
	.block .item dl {
		top: 3em;
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
	.block .item,
	.block .item:last-of-type {
		margin-bottom: 4em;
	}
	.intro p {
		font-size: 19px;
		width: 100%;
	}
	.innerlink .btnarea span {
		font-size: 14px;
	}
	.innerlink .btnarea a {
		padding: 0 26px 0 40px;
	}
	
	
	#experiment.block .item dl {
		padding-top: 7em;
	}
	#event ul.flexbox {
		justify-content: space-between;
		padding: 0 5px;
	}
	#event ul.flexbox li {
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
	}
}