@charset "utf-8";

/* -------------------------------------------------
	first-view
------------------------------------------------- */

#first-view {
	background: #ffd03a;
}
#first-view .mv {
	position: relative;
}
#first-view .mv .title {
	width: calc(592 / 1200 * 100%);
	position: absolute;
	z-index: 10;
	/* 左から来る「この教科書いいね！」の位置指定
	left: 50%;
	top: 10%;
	*/
	left: 70%;
	top: 8%;
	transform: translateX(-50%);
}
#first-view .mv .title img {
	width: 100%;
	opacity: 0;
	transform: translateX(-100%);
}
#first-view .btn {
	width: 624px;
	height: 78px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	letter-spacing: 0.2em;
	font-weight: 700;
	background: #ffd941;
	box-shadow: 15px 15px 10px 0 rgba(0,0,0,0.24);
	border-radius: 39px;
	position: absolute;
	left: 50%;
	top: 79%;
	transform: translateX(-50%);
	transition: background 0.3s ease-out;
}
/* 草彅パート
#first-view .mv .textbook {
	position: absolute;
}
#first-view .mv .textbook img{
	width: 30%;
}

/* 20210123 第２ボタン追加*/
#first-view .btn1{
	width: 520px;
	height: 50px;
	top: 72%;
}
#first-view .btn2{
	top: 84%;
}


/* 20240325：書影 */
/* */
.textbook{
	position: absolute;
	left: 538px;
	top: 140px;
	width: 600px;
	height: 422px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*
	z-index: 5;
	background-color: aqua;
	*/
}
.textbook li{
	width: 142px;
	margin-right: 5px;
	margin-bottom: 10px;
}
.textbook li.flex_spacer{
	width: 20px;
}
.textbook li.wide_size{
	width: 157.5px;
}
.textbook li:nth-child(5),.textbook li:nth-child(9){
	margin-right: 0;
}
.textbook li img{
	width: 100%;
}
@media print, screen and (max-width:1260px) {
	.textbook{
        left: calc(538 / 1260 * 100vw);
        top: calc(140 / 1260 * 100vw);
        width: calc(600 / 1260 * 100vw);
        height: calc(422 / 1260 * 100vw);
	}
    .textbook li{
        width: calc(142 / 1260 * 100vw);
        margin-right: calc(5 / 1260 * 100vw);
        margin-bottom: calc(10 / 1260 * 100vw);
    }
    .textbook li.flex_spacer{
        width: calc(20 / 1260 * 100vw);
    }
    .textbook li.wide_size{
        width: calc(157.5 / 1260 * 100vw);
    }
}
	
	
	

@media print, screen and (min-width:769px) {
	#first-view .btn:hover {
		background: #ffe47a;
	}
}

@media screen and (max-width:768px) {
	#first-view {
		background: #fff;
	}
	#first-view .mv .title {
		width: calc(533 / 640 * 100vw);
		/* 左から来る「この教科書いいね！」の位置指定
		top: 15%;
		*/
		top: 5%;
		left: 50%;
	}
	#first-view .btn {
		width: calc(567 / 640 * 100vw);
		height: calc(101 / 640 * 100vw);
		margin: calc(35 / 640 * 100vw) auto 0;
		font-size: calc(27 / 640 * 100vw);
		letter-spacing: 0.1em;
		box-shadow: 1vw 1vw 2vw 0 rgba(0,0,0,0.24);
		border-radius: calc(55.5 / 640 * 100vw);
		position: static;
		transform: translateX(0);
	}
	#first-view .btn1{
		width: calc(567 / 640 * 100vw);
		height: calc(80 / 640 * 100vw);
	}
}

/* -------------------------------------------------
	iine
------------------------------------------------- */

#iine {
	padding: 0 0 80px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
#iine .box1200 {
	padding-top: 185px;
}
#iine .copy {
	font-size: 37px;
	font-weight: 700;
	letter-spacing: 0.5em;
	position: relative;
	z-index: 4;
}
#iine .desc {
	margin-top: 110px;
	font-size: 24px;
	position: relative;
	z-index: 4;
}
#iine p {
	line-height: 1.79;
}
#iine p + p {
	margin-top: 1.5em;
}
#iine p.bar {
	width: 502px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	background: url(../images/fig_08.svg) no-repeat center bottom / 100% auto;
	position: relative;
	overflow: hidden;
}
#iine p .animation-hider {
	width: 100%;
	height: 7px;
	position: absolute;
	left: 100%;
	bottom: 0;
	content: "";
	display: block;
	background: #fff;
	opacity: 1 !important;
}

@media print, screen and (min-width:769px) {
	#iine::after {
		width: 1267px;
		height: 226px;
		display: block;
		content: "";
		background: url(../images/fig_07.svg) no-repeat 0 0 / contain;
		position: absolute;
		bottom: -2px;
		left: 50%;
		z-index: 10;
		transform: translateX(-53%);
	}
}

@media screen and (max-width:768px) {
	#iine {
		padding: 0 0 calc(65 / 640 * 100vw);
	}
	#iine .box1200 {
		padding-top: calc(160 / 640 * 100vw);
	}
	#iine .copy {
		font-size: calc(37 / 640 * 100vw);
	}
	#iine .desc {
		margin-top: calc(100 / 640 * 100vw);
		font-size: calc(28 / 640 * 100vw);
	}
	#iine p.bar {
		width: calc(546 / 640 * 100vw);
		padding-bottom: 2vw;
		background: url(../images/fig_08_sp.svg) no-repeat center bottom / 100% auto;
	}
	#iine p .animation-hider {
		height: 2vw;
	}
}

/* -------------------------------------------------
	iine > anim-image
------------------------------------------------- */

#iine .anim-image {
	width: 161px;
	height: 262px;
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 70px;
	transform: translateX(-50%);
	opacity: 0;
}
#iine .anim-image.on {
	opacity: 1;
}
#iine .anim-image img {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: left bottom;
	animation-fill-mode: forwards;
}
#iine .anim-image.on img:first-child {
	animation: ex1 0.8s cubic-bezier(0.78, .18, .34, .98) 0s;
}
#iine .anim-image.on img:last-child {
	animation: ex2 2.4s cubic-bezier(0.78, .18, .34, .98) 0s;
}

@keyframes ex1 {
	0% { transform: scale(0.2); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes ex2 {
	0%, 30% { transform: scale(0.2); opacity: 0; }
	50% { transform: scale(1.1); opacity: 1; } /* max */
	70% { transform: scale(1.1); opacity: 0; }
	80% { transform: scale(0.2); opacity: 0; }
	100% { transform: scale(1); opacity: 1; } /* max2 */
}

@media screen and (max-width:768px) {
	#iine .anim-image {
		width: calc(140 / 640 * 100vw);
		height: calc(230 / 640 * 100vw);
		top: 10vw;
	}
}

/* -------------------------------------------------
	philosophy
------------------------------------------------- */

#philosophy {
	padding: 130px 0 200px;
	background: #ffd03a;
}
#philosophy .feature {
	max-width: 870px;
	margin: 0 auto;
}
#philosophy .feature:first-of-type {
	margin-top: 90px;
}
#philosophy .feature + .feature {
	margin-top: 65px;
}
#philosophy .feature .image img {
	width: 100%;
}
#philosophy .feature .text {
	color: #231815;
}
#philosophy .feature .text .title {
	padding-left: 15px;
	padding-bottom: 0.2em;
	margin-bottom: 0.3em;
	font-size: 27px;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: 0.3em;
	position: relative;
	z-index: 2;
}
#philosophy .feature .text .title::after {
	width: calc(100% + 30px);
	height: 1px;
	background: #040000;
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
}
#philosophy .feature .text p {
	padding-left: 15px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.72;
}
#philosophy .btn-wrap {
	max-width: 870px;
	margin: 50px auto 0;
	text-align: right;
	position: relative;
}
#philosophy .btn {
	width: 395px;
	height: 55px;
	border-radius: 28px;
	background: #fff;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease-out;
	font-size: 20px;
	font-weight: 700;
	position: relative;
	z-index: 4;
}

@media print, screen and (min-width:769px) {
	#philosophy .feature {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#philosophy .feature .image {
		width: 210px;
		position: relative;
		z-index: 4;
	}
	#philosophy .feature .text {
		width: calc(100% - 210px);
	}
	#philosophy .btn:hover {
		opacity: 0.8;
	}
}

@media screen and (max-width:768px) {
	#philosophy {
		padding: calc(85 / 640 * 100vw) 0 calc(115 / 640 * 100vw);
	}
	#philosophy .feature {
		max-width: none;
	}
	#philosophy .feature:first-of-type {
		margin-top: calc(90 / 640 * 100vw);
	}
	#philosophy .feature + .feature {
		margin-top: calc(35 / 640 * 100vw);
	}
	#philosophy .feature .image img {
		width: calc(151 / 640 * 100vw);
		display: block;
		margin: 0 auto;
	}
	#philosophy .feature .text .title {
		padding-left: 0;
		padding-bottom: 0.6em;
		margin: 0.5em 0 0.7em;
		font-size: calc(34 / 640 * 100vw);
		line-height: 1.74;
		text-align: center;
	}
	#philosophy .feature .text .title::after {
		width: 100%;
	}
	#philosophy .feature .text p {
		padding-left: 0;
		font-size: calc(31 / 640 * 100vw);
	}
	#philosophy .btn-wrap {
		max-width: none;
		margin: calc(90 / 640 * 100vw) auto 0;
		text-align: center;
	}
	#philosophy .btn {
		width: calc(567 / 640 * 100vw);
		height: calc(101 / 640 * 100vw);
		border-radius: calc(50.5 / 640 * 100vw);
		font-size: calc(27 / 640 * 100vw);
		box-shadow: 1vw 1vw 2vw 0 rgba(0,0,0,0.24);
		position: relative;
		z-index: 30;
	}
}

/* -------------------------------------------------
	consideration
------------------------------------------------- */

#consideration {
	padding: 110px 0 160px;
	background: #fff url(../images/bg_01.svg) repeat center center / 1920px auto;
	position: relative;
	z-index: 20;
}
#consideration .features {
	max-width: 870px;
	margin: 90px auto 0;
	position: relative;
}
#consideration .features::before {
	width: 188px;
	height: 392px;
	content: "";
	background: url(../images/fig_06.svg) no-repeat 0 0 / contain;
	display: block;
	position: absolute;
	left: 30px;
	top: -500px;
}
#consideration .features::after {
	width: 388px;
	height: 420px;
	content: "";
	display: block;
	background: url(../images/fig_02.svg) no-repeat 0 0 / contain;
	position: absolute;
	left: 100%;
	bottom: -265px;
}
#consideration .feature {
	padding-left: 118px;
	position: relative;
}
#consideration .feature + .feature {
	margin-top: 65px;
}
#consideration .feature .num {
	width: 76px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
}
#consideration .feature .num.n1 img {
	width: 38px;
}
#consideration .feature .num.n2 img {
	width: 76px;
}
#consideration .feature .num.n3 img {
	width: 73px;
}
#consideration .feature .text .title {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 0.3em;
}
#consideration .feature .text p {
	margin-top: 1em;
	font-size: 19px;
	line-height: 1.68;
	font-weight: 700;
}
#consideration .feature .text .btn-wrap {
	margin-top: 15px;
	text-align: right;
}
#consideration .feature .text .btn {
	width: 395px;
	height: 54px;
	border-radius: 27px;
	background: #e2e2e2;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	transition: background 0.3s ease-out;
	font-size: 15px;
	font-weight: 700;
}

@media print, screen and (min-width:769px) {
	#consideration .feature .text .btn:hover {
		background: #f1f1f1;
	}
	#consideration .bg-dot {
		width: 96%;
		max-width: 870px;
		margin: 0 auto;
		position: relative;
	}
	#consideration .bg-dot::before {
		width: 188px;
		height: 392px;
		content: "";
		background: url(../common/images/fig_01.svg) no-repeat 0 0 / contain;
		display: block;
		position: absolute;
		left: 10px;
		top: -360px;
	}
}

@media print, screen and (min-width:769px) and (max-width:1250px) {
	#consideration .features::after {
		width: calc(388px * 0.7);
		height: calc(420px * 0.7);
		left: 80%;
		bottom: -300px;
	}
}

@media screen and (max-width:768px) {
	#consideration {
		padding: calc(100 / 640 * 100vw) 0;
		background: #fff url(../images/bg_01.svg) repeat center center / 960px auto;
	}
	#consideration .h-normal {
		position: relative;
		z-index: 8;
	}
	#consideration .features {
		max-width: none;
		margin: calc(90 / 640 * 100vw) auto 0;
		position: relative;
		z-index: 4;
	}
	#consideration .features::before {
		width: calc(194 / 640 * 100vw);
		height: calc(394 / 640 * 100vw);
		left: -2vw;
		top: calc(-500 / 640 * 100vw)
	}
	#consideration .features::after {
		width: calc(231 / 640 * 100vw);
		height: calc(251 / 640 * 100vw);
		left: auto;
		right: 1vw;
		bottom: calc(-280 / 640 * 100vw);
	}
	#consideration .feature {
		padding-left: 0;
	}
	#consideration .feature + .feature {
		margin-top: calc(85 / 640 * 100vw);
	}
	#consideration .feature .num {
		width: calc(76 / 640 * 100vw);
	}
	#consideration .feature .num.n1 img {
		width: calc(39 / 640 * 100vw);
	}
	#consideration .feature .num.n2 img {
		width: calc(76 / 640 * 100vw);
	}
	#consideration .feature .num.n3 img {
		width: calc(73 / 640 * 100vw);
	}
	#consideration .feature .text .title {
		height: 3.2em;
		padding-left: calc(105 / 640 * 100vw);
		display: flex;
		align-items: center;
		font-size: calc(35 / 640 * 100vw);
		line-height: 1.8;
	}
	#consideration .feature .text p {
		font-size: calc(31 / 640 * 100vw);
	}
	#consideration .feature .text .btn-wrap {
		margin-top: calc(25 / 640 * 100vw);
	}
	#consideration .feature .text .btn {
		width: calc(567 / 640 * 100vw);
		height: calc(101 / 640 * 100vw);
		border-radius: calc(50.5 / 640 * 100vw);
		font-size: calc(27 / 640 * 100vw);
		box-shadow: 1vw 1vw 2vw 0 rgba(0,0,0,0.24)
	}
}

/* -------------------------------------------------
	sdg-esd
------------------------------------------------- */

#sdg-esd {
	padding: 150px 0 190px;
	background: #ffd13a;
}
#sdg-esd .desc {
	margin-top: 1.3em;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.7;
}
#sdg-esd .desc p {
	font-weight: 700;
	letter-spacing: 0.05em;
}
#sdg-esd .desc p + p {
	margin-top: 1.5em;
}

#sdg-esd .two-col .l img,
#sdg-esd .two-col .r img {
	width: 100%;
}
#sdg-esd .two-col .l .caption p {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

@media print, screen and (min-width:769px) {
	#sdg-esd .inner1 {
		max-width: 1078px;
		margin: 0 auto;
		position: relative;
	}
	#sdg-esd .two-col {
		width: 96%;
		max-width: 1078px;
		margin: 0 auto;
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	#sdg-esd .two-col .l {
		width: calc(665 / 1078 * 100%);
	}
	#sdg-esd .two-col .l .caption {
		width: 460px;
		height:113px;
		background: url(../images/bg_02.svg) no-repeat 0 0 / contain;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: -10px;
		right: -15px;
	}
	#sdg-esd .two-col .l .caption p {
		position: relative;
		top: -10px;
	}
	#sdg-esd .two-col .r {
		width: calc(413 / 1078 * 100%);
		padding-top: 15px;
		text-align: right;
	}
	#sdg-esd .two-col .r img {
		width: calc(100% - 10px);
	}
}

@media print, screen and (min-width:769px) and (max-width:1240px) {
	#sdg-esd .inner1 {
		width: 86%;
	}
}

@media screen and (max-width:768px) {
	#sdg-esd {
		padding: calc(215 / 640 * 100vw) 0 calc(10 / 640 * 100vw);
	}
	#sdg-esd .h-normal {
		line-height: 1.7;
		font-size: calc(32 / 640 * 100vw);
	}
	#sdg-esd .desc {
		font-size: calc(31 / 640 * 100vw);
	}
	
	#sdg-esd .two-col {
		position: relative;
	}
	#sdg-esd .two-col .l .box-sp {
		transform: rotate(-5deg);
	}
	#sdg-esd .two-col .l .pic-wrap {
		padding: 3vw 2vw 5vw 5vw;
		background: #fff;
	}
	#sdg-esd .two-col .l .caption {
		width: calc(575 / 640 * 100vw);
		margin: calc(32 / 640 * 100vw) 0 calc(16 / 640 * 100vw);
		background: #ffe785;
		box-shadow: 1vw 1vw 2vw 0 rgba(0,0,0,0.24);
	}
	#sdg-esd .two-col .l .caption p {
		font-size: calc(29 / 640 * 100vw);
		padding: 1.2em 0 1.2em 1.3em;
	}
	#sdg-esd .two-col .r img {
		width: calc(536 / 640 * 100vw);
		display: block;
		margin: calc(25 / 640 * 100vw) auto 0;
	}
	
	#sdg-esd .two-col .l p.clone,
	#sdg-esd .two-col .r p.clone {
		width: calc(580 / 640 * 100%);
		margin: 0 auto;
		font-size: calc(31 / 640 * 100vw);
		font-weight: 700;
		letter-spacing: 0.05em;
		line-height: 1.7;
	}
	#sdg-esd .two-col .l p.clone {
		margin-top: 1em;
		margin-bottom: 1em;
	}
	#sdg-esd .two-col .r p.clone {
		margin-top: 1em;
	}
}

/* -------------------------------------------------
	sdg-esd > slide-wrap
------------------------------------------------- */

#sdg-esd .slide-wrap .item-title .label1 {
	width: calc(80 / 1250 * 100vw);
	height: calc(80 / 1250 * 100vw);
	border-radius: 50%;
	font-size: calc(23 / 1250 * 100vw);
	line-height: 1.4;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
	position: absolute;
	z-index: 10;
}

#sdg-esd .slide-wrap .i1 .item-title .label1 { background: #b3ed80; }
#sdg-esd .slide-wrap .i2 .item-title .label1 { background: #74c966; }
#sdg-esd .slide-wrap .i3 .item-title .label1 { background: #1ecb9b; }
#sdg-esd .slide-wrap .i4 .item-title .label1 { background: #80edd5; }
#sdg-esd .slide-wrap .i5 .item-title .label1 { background: #89e6e8; }
#sdg-esd .slide-wrap .i6 .item-title .label1 { background: #80c5ec; }
#sdg-esd .slide-wrap .i7 .item-title .label1 { background: #a2c7e8; }
#sdg-esd .slide-wrap .i8 .item-title .label1 { background: #c7c6e1; }
#sdg-esd .slide-wrap .i9 .item-title .label1 { background: #d4a0c6; }
#sdg-esd .slide-wrap .i10 .item-title .label1 { background: #eb9abe; }
#sdg-esd .slide-wrap .i11 .item-title .label1 { background: #ee7868; }
#sdg-esd .slide-wrap .i12 .item-title .label1 { background: #ee926a; }
#sdg-esd .slide-wrap .i13 .item-title .label1 { background: #f4cd89; }
#sdg-esd .slide-wrap .i14 .item-title .label1 { background: #ffe454; }
#sdg-esd .slide-wrap .i15 .item-title .label1 { background: #f8ea21; }

#sdg-esd .slide-wrap .i3 .item-title .label1 span,
#sdg-esd .slide-wrap .i5 .item-title .label1 span,
#sdg-esd .slide-wrap .i8 .item-title .label1 span,
#sdg-esd .slide-wrap .i12 .item-title .label1 span,
#sdg-esd .slide-wrap .i14 .item-title .label1 span {
	transform: scaleX(0.8);
}

@media print, screen and (min-width:769px) { /* PCスライダー */
	
	#sdg-esd .slide-wrap .item-wrap { /* PCスライド内はデザインを厳密にあてる */
		width: calc(1066 / 1250 * 100vw);
		height: calc(630 / 1250 * 100vw);
		position: relative;
	}
	
	#sdg-esd .slide-wrap .item-title .label1 {
		/*
		box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.2);
		*/
		position: absolute;
	}
	#sdg-esd .slide-wrap .item-wrap .pic {
		position: absolute;
	}
	#sdg-esd .slide-wrap .item-body .note {
		font-size: calc(14 / 1250 * 100vw);
		letter-spacing: 0.1em;
		position: absolute;
	}
	
	/* .iw1 */
	
	#sdg-esd .slide-wrap .iw1 .i1 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw1 .i1 .item-body .p1 {
		width: calc(554 / 1250 * 100vw);
		left: calc(15 / 1250 * 100vw);
		top: calc(105 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw1 .i1 .item-body .n1 {
		right: calc(497 / 1250 * 100vw);
		top: calc(601 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw1 .i2 .label1 {
		left: calc(594 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw1 .i2 .item-body .p1 {
		width: calc(447 / 1250 * 100vw);
		left: calc(594 / 1250 * 100vw);
		top: calc(105 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw1 .i2 .item-body .p2 {
		width: calc(447 / 1250 * 100vw);
		left: calc(594 / 1250 * 100vw);
		top: calc(401 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw1 .i2 .item-body .n1 {
		left: calc(594 / 1250 * 100vw);
		top: calc(378 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw1 .i2 .item-body .n2 {
		right: calc(25 / 1250 * 100vw);
		top: calc(382 / 1250 * 100vw);
	}
	
	/* .iw2 */
	
	#sdg-esd .slide-wrap .iw2 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw2 .item-body .p1 {
		width: calc(168 / 1250 * 100vw);
		left: calc(105 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw2 .item-body .p2 {
		width: calc(572 / 1250 * 100vw);
		left: calc(15 / 1250 * 100vw);
		top: calc(341 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw2 .item-body .p3 {
		width: calc(418 / 1250 * 100vw);
		left: calc(623 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw2 .item-body .n1 {
		left: calc(273 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw2 .item-body .n2 {
		right: calc(479 / 1250 * 100vw);
		top: calc(322 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw2 .item-body .n3 {
		left: calc(467 / 1250 * 100vw);
		top: calc(601 / 1250 * 100vw);
	}
	
	/* .iw3 */
	
	#sdg-esd .slide-wrap .iw3 .i4 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15	 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw3 .i5 .label1 {
		left: calc(683 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw3 .i4 .item-body .p1 {
		width: calc(410 / 1250 * 100vw);
		left: calc(105 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw3 .i5 .item-body .p1 {
		width: calc(268 / 1250 * 100vw);
		left: calc(773 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw3 .i4 .item-body .n1 {
		left: calc(520 / 1250 * 100vw);
		top: calc(552 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw3 .i5 .item-body .n1 {
		right: calc(298 / 1250 * 100vw);
		top: calc(601 / 1250 * 100vw);
	}
	
	/* .iw4 */
	
	#sdg-esd .slide-wrap .iw4 .i6 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(61 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw4 .i7 .label1 {
		left: calc(451 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw4 .i6 .item-body .p1 {
		width: calc(500 / 1250 * 100vw);
		left: calc(15 / 1250 * 100vw);
		top: calc(151 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw4 .i7 .item-body .p1 {
		width: calc(500 / 1250 * 100vw);
		left: calc(541 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw4 .i7 .item-body .p2 {
		width: calc(500 / 1250 * 100vw);
		left: calc(541 / 1250 * 100vw);
		top: calc(196 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw4 .i6 .item-body .n1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(514 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw4 .i7 .item-body .n1 {
		left: calc(541 / 1250 * 100vw);
		top: calc(148 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw4 .i7 .item-body .n2 {
		left: calc(541 / 1250 * 100vw);
		top: calc(571 / 1250 * 100vw);
	}
	
	/* .iw5 */
	
	#sdg-esd .slide-wrap .iw5 .i8 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw5 .i9 .label1 {
		left: calc(547 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw5 .i8 .item-body .p1 {
		width: calc(410 / 1250 * 100vw);
		left: calc(105 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw5 .i9 .item-body .p1 {
		width: calc(404 / 1250 * 100vw);
		left: calc(637 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw5 .i8 .item-body .n1 {
		width: calc(98 / 1250 * 100vw);
		left: calc(515 / 1250 * 100vw);
		top: calc(586 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw5 .i9 .item-body .n1 {
		width: calc(91 / 1250 * 100vw);
		left: calc(550 / 1250 * 100vw);
		top: calc(532 / 1250 * 100vw);
	}
	
	/* .iw6 */
	#sdg-esd .slide-wrap .iw6 .i10 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw6 .i11 .label1 {
		left: calc(596 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw6 .i10 .item-body .p1 {
		width: calc(404 / 1250 * 100vw);
		left: calc(105 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw6 .i11 .item-body .p1 {
		width: calc(445 / 1250 * 100vw);
		left: calc(596 / 1250 * 100vw);
		top: calc(105 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw6 .i10 .item-body .n1 {
		left: calc(514 / 1250 * 100vw);
		top: calc(601 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw6 .i11 .item-body .n1 {
		right: calc(25 / 1250 * 100vw);
		top: calc(586 / 1250 * 100vw);
	}
	
	
	/* .iw7 */
	#sdg-esd .slide-wrap .iw7 .i12 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw7 .i12 .item-body .p1 {
		width: calc(516 / 1250 * 100vw);
		left: calc(105 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw7 .i12 .item-body .p2 {
		width: calc(410 / 1250 * 100vw);
		left: calc(631 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw7 .i12 .item-body .n1 {
		left: calc(105 / 1250 * 100vw);
		top: calc(417 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw7 .i12 .item-body .n2 {
		left: calc(478 / 1250 * 100vw);
		top: calc(601 / 1250 * 100vw);
	}
	
	
	/* .iw8 */
	
	#sdg-esd .slide-wrap .iw8 .i13 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw8 .i14 .label1 {
		left: calc(563 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw8 .i13 .item-body .p1 {
		width: calc(448 / 1250 * 100vw);
		left: calc(105 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw8 .i14 .item-body .p1 {
		width: calc(478 / 1250 * 100vw);
		left: calc(563 / 1250 * 100vw);
		top: calc(105 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw8 .i13 .item-body .n1 {
		left: calc(558 / 1250 * 100vw);
		top: calc(601 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw8 .i14 .item-body .n1 {
		right: calc(25 / 1250 * 100vw);
		top: calc(432 / 1250 * 100vw);
	}
	
	/* .iw9 */
	
	#sdg-esd .slide-wrap .iw9 .i15 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw9 .i15 .item-body .p1 {
		width: calc(490 / 1250 * 100vw);
		left: calc(15 / 1250 * 100vw);
		top: calc(105 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw9 .i15 .item-body .p2 {
		width: calc(424 / 1250 * 100vw);
		left: calc(617 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw9 .i15 .item-body .n1 {
		left: calc(20 / 1250 * 100vw);
		top: calc(574 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw9 .i15 .item-body .n2 {
		left: calc(461 / 1250 * 100vw);
		top: calc(601 / 1250 * 100vw);
	}
	
	/* .iw10 */
	
	#sdg-esd .slide-wrap .iw10 .i16 .label1 {
		left: calc(15 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw10 .i17 .label1 {
		left: calc(559 / 1250 * 100vw);
		top: calc(15 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw10 .i16 .item-body .p1 {
		width: calc(514 / 1250 * 100vw);
		left: calc(15 / 1250 * 100vw);
		top: calc(105 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw10 .i16 .item-body .p2 {
		width: calc(514 / 1250 * 100vw);
		left: calc(15 / 1250 * 100vw);
		top: calc(185 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw10 .i17 .item-body .p1 {
		width: calc(482 / 1250 * 100vw);
		left: calc(559 / 1250 * 100vw);
		top: calc(105 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw10 .i16 .item-body .n1 {
		left: calc(380 / 1250 * 100vw);
		top: calc(150 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw10 .i16 .item-body .n2 {
		left: calc(380 / 1250 * 100vw);
		top: calc(578 / 1250 * 100vw);
	}
	#sdg-esd .slide-wrap .iw10 .i17 .item-body .n1 {
		right: calc(25 / 1250 * 100vw);
		top: calc(440 / 1250 * 100vw);
	}
}

/* PCスライダー (大きい幅用) */
@media print, screen and (min-width: 1250px) {
	
	#sdg-esd .slide-wrap .item-title .label1 {
		width: 80px;
		height: 80px;
		font-size: 23px;
	}
	
	#sdg-esd .slide-wrap .item-wrap { /* PCスライド内はデザインを厳密にあてる */
		width: 1066px;
		height: 630px;
	}
	
	#sdg-esd .slide-wrap .item-body .note {
		font-size: 14px;
	}
	
	/* .iw1 */
	
	#sdg-esd .slide-wrap .iw1 .i1 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw1 .i1 .item-body .p1 {
		width: 554px;
		left: 15px;
		top: 105px;
	}
	#sdg-esd .slide-wrap .iw1 .i1 .item-body .n1 {
		right: 497px;
		top: 601px;
	}
	#sdg-esd .slide-wrap .iw1 .i2 .label1 {
		left: 594px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw1 .i2 .item-body .p1 {
		width: 447px;
		left: 594px;
		top: 105px;
	}
	#sdg-esd .slide-wrap .iw1 .i2 .item-body .p2 {
		width: 447px;
		left: 594px;
		top: 401px;
	}
	#sdg-esd .slide-wrap .iw1 .i2 .item-body .n1 {
		left: 594px;
		top: 378px;
	}
	#sdg-esd .slide-wrap .iw1 .i2 .item-body .n2 {
		right: 25px;
		top: 382px;
	}
	
	/* .iw2 */
	
	#sdg-esd .slide-wrap .iw2 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw2 .item-body .p1 {
		width: 168px;
		left: 105px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw2 .item-body .p2 {
		width: 572px;
		left: 15px;
		top: 341px;
	}
	#sdg-esd .slide-wrap .iw2 .item-body .p3 {
		width: 418px;
		left: 623px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw2 .item-body .n1 {
		left: 273px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw2 .item-body .n2 {
		right: 479px;
		top: 322px;
	}
	#sdg-esd .slide-wrap .iw2 .item-body .n3 {
		left: 467px;
		top: 601px;
	}
	
	/* .iw3 */
	
	#sdg-esd .slide-wrap .iw3 .i4 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw3 .i5 .label1 {
		left: 683px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw3 .i4 .item-body .p1 {
		width: 410px;
		left: 105px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw3 .i5 .item-body .p1 {
		width: 268px;
		left: 773px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw3 .i4 .item-body .n1 {
		left: 520px;
		top: 552px;
	}
	#sdg-esd .slide-wrap .iw3 .i5 .item-body .n1 {
		right: 298px;
		top: 601px;
	}
	
	/* .iw4 */
	
	#sdg-esd .slide-wrap .iw4 .i6 .label1 {
		left: 15px;
		top: 61px;
	}
	#sdg-esd .slide-wrap .iw4 .i7 .label1 {
		left: 451px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw4 .i6 .item-body .p1 {
		width: 500px;
		left: 15px;
		top: 151px;
	}
	#sdg-esd .slide-wrap .iw4 .i7 .item-body .p1 {
		width: 500px;
		left: 541px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw4 .i7 .item-body .p2 {
		width: 500px;
		left: 541px;
		top: 196px;
	}
	#sdg-esd .slide-wrap .iw4 .i6 .item-body .n1 {
		left: 15px;
		top: 514px;
	}
	#sdg-esd .slide-wrap .iw4 .i7 .item-body .n1 {
		left: 541px;
		top: 148px;
	}
	#sdg-esd .slide-wrap .iw4 .i7 .item-body .n2 {
		left: 541px;
		top: 571px;
	}
	
	/* .iw5 */
	
	#sdg-esd .slide-wrap .iw5 .i8 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw5 .i9 .label1 {
		left: 547px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw5 .i8 .item-body .p1 {
		width: 410px;
		left: 105px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw5 .i9 .item-body .p1 {
		width: 404px;
		left: 637px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw5 .i8 .item-body .n1 {
		width: 98px;
		left: 515px;
		top: 586px;
	}
	#sdg-esd .slide-wrap .iw5 .i9 .item-body .n1 {
		width: 91px;
		left: 550px;
		top: 532px;
	}
	
	/* .iw6 */
	#sdg-esd .slide-wrap .iw6 .i10 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw6 .i11 .label1 {
		left: 596px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw6 .i10 .item-body .p1 {
		width: 404px;
		left: 105px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw6 .i11 .item-body .p1 {
		width: 445px;
		left: 596px;
		top: 105px;
	}
	#sdg-esd .slide-wrap .iw6 .i10 .item-body .n1 {
		left: 514px;
		top: 601px;
	}
	#sdg-esd .slide-wrap .iw6 .i11 .item-body .n1 {
		right: 25px;
		top: 586px;
	}
	
	
	/* .iw7 */
	#sdg-esd .slide-wrap .iw7 .i12 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw7 .i12 .item-body .p1 {
		width: 516px;
		left: 105px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw7 .i12 .item-body .p2 {
		width: 410px;
		left: 631px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw7 .i12 .item-body .n1 {
		left: 105px;
		top: 417px;
	}
	#sdg-esd .slide-wrap .iw7 .i12 .item-body .n2 {
		left: 478px;
		top: 601px;
	}
	
	
	/* .iw8 */
	
	#sdg-esd .slide-wrap .iw8 .i13 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw8 .i14 .label1 {
		left: 563px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw8 .i13 .item-body .p1 {
		width: 448px;
		left: 105px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw8 .i14 .item-body .p1 {
		width: 478px;
		left: 563px;
		top: 105px;
	}
	#sdg-esd .slide-wrap .iw8 .i13 .item-body .n1 {
		left: 558px;
		top: 601px;
	}
	#sdg-esd .slide-wrap .iw8 .i14 .item-body .n1 {
		right: 25px;
		top: 432px;
	}
	
	/* .iw9 */
	
	#sdg-esd .slide-wrap .iw9 .i15 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw9 .i15 .item-body .p1 {
		width: 490px;
		left: 15px;
		top: 105px;
	}
	#sdg-esd .slide-wrap .iw9 .i15 .item-body .p2 {
		width: 424px;
		left: 617px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw9 .i15 .item-body .n1 {
		left: 20px;
		top: 574px;
	}
	#sdg-esd .slide-wrap .iw9 .i15 .item-body .n2 {
		left: 461px;
		top: 601px;
	}
	
	/* .iw10 */
	
	#sdg-esd .slide-wrap .iw10 .i16 .label1 {
		left: 15px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw10 .i17 .label1 {
		left: 559px;
		top: 15px;
	}
	#sdg-esd .slide-wrap .iw10 .i16 .item-body .p1 {
		width: 514px;
		left: 15px;
		top: 105px;
	}
	#sdg-esd .slide-wrap .iw10 .i16 .item-body .p2 {
		width: 514px;
		left: 15px;
		top: 185px;
	}
	#sdg-esd .slide-wrap .iw10 .i17 .item-body .p1 {
		width: 482px;
		left: 559px;
		top: 105px;
	}
	#sdg-esd .slide-wrap .iw10 .i16 .item-body .n1 {
		left: 380px;
		top: 150px;
	}
	#sdg-esd .slide-wrap .iw10 .i16 .item-body .n2 {
		left: 380px;
		top: 578px;
	}
	#sdg-esd .slide-wrap .iw10 .i17 .item-body .n1 {
		right: 25px;
		top: 440px;
	}
	
	/* .iw11 */
	
	#sdg-esd .slide-wrap .iw11 .i17 .item-body .p2 {
		width: 590px;
		left: 540px;
		top: 30px;
	}
	#sdg-esd .slide-wrap .iw11 .i17 .item-body .n2 {
		left: 717px;
		top: 307px;
	}
}

@media screen and (max-width:768px) { /* SP アコーディオン */
	#sdg-esd .slide-wrap {
		margin-top: calc(30 / 640 * 100vw);
	}
	#sdg-esd .slide-wrap .item-title {
		height: calc(100 / 640 * 100vw);
		background: #fff;
		position: relative;
		border-bottom: solid 2px #ffd03a;
		position: relative;
	}
	#sdg-esd .slide-wrap .item-title::after {
		content: "";
		width: 2.8vw;
		height: 2.8vw;
		box-sizing: border-box;
		display: block;
		border-top: solid 1px #040000;
		border-right: solid 1px #040000;
		transform: rotate(135deg);
		position: absolute;
		top: 35%;
		right: 8%;
		transition: all 0.3s ease-out;
	}
	#sdg-esd .slide-wrap .item-title.on::after {
		transform: rotate(-45deg);
		top: 45%;
	}
	#sdg-esd .slide-wrap .item-title .label1 {
		width: calc(85 / 640 * 100vw);
		height: calc(85 / 640 * 100vw);
		border-radius: calc(42.5 / 640 * 100vw);
		font-size: calc(16 / 640 * 100vw);
		left: 4.68vw;
		top: 50%;
		transform: translateY(-50%);
	}
	
	#sdg-esd .slide-wrap .item-title .label2 {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: calc(41 / 640 * 100vw);
	}
	
	#sdg-esd .slide-wrap .item-body {
		display: none;
	}
	#sdg-esd .slide-wrap .item-body .inner {
		padding: calc(50 / 640 * 100vw) 4.68vw;
	}
	#sdg-esd .slide-wrap .item-body .group + .group {
		margin-top: calc(36 / 640 * 100vw);
	}
	#sdg-esd .slide-wrap .item-body p {
		margin-top: 0.4em;
		font-size: calc(24 / 640 * 100vw);
		text-align: right;
	}
	
	/* 個別調整 */
	
	/*
	#sdg-esd .slide-wrap .i3 .inner > div + div {
		margin-top: 6vw;
	}
	*/
	#sdg-esd .slide-wrap .i3 .item-title .label2 span {
		transform: scaleX(0.75);
	}
	#sdg-esd .slide-wrap .i4 .item-title .label2 span {
		transform: scaleX(0.8);
	}
	#sdg-esd .slide-wrap .i5 .item-title .label2 span {
		transform: scaleX(0.7);
	}
	#sdg-esd .slide-wrap .i6 .item-title .label2 span {
		transform: scaleX(0.7);
	}
	#sdg-esd .slide-wrap .i7 .item-title .label2 {
		width: 120%;
		padding-left: 3em;	/* うまくセンターにならないので */
	}
	#sdg-esd .slide-wrap .i7 .item-title .label2 span {
		transform-origin: 0 0;	/* うまくセンターにならないので */
		transform: scaleX(0.5);
	}
	/*
	#sdg-esd .slide-wrap .i8 .item-title .label1 {
		line-height: 1.2;
	}
	*/
	#sdg-esd .slide-wrap .i8 .item-title .label2 span {
		transform: scaleX(0.9);
	}
	/*
	#sdg-esd .slide-wrap .i9 .item-body .inner > div + div {
		margin-top: 6vw;
	}
	*/
	#sdg-esd .slide-wrap .i9 .item-title .label2 span {
		transform: scaleX(0.6);
	}
	#sdg-esd .slide-wrap .i10 .item-title .label2 span {
		transform: scaleX(0.75);
	}
	#sdg-esd .slide-wrap .i11 .item-title .label2 span {
		transform: scaleX(0.7);
	}
	
	#sdg-esd .slide-wrap .i12 .item-body .pic-wrap {
		width: calc(410 / 640 * 100vw);
		display: block;
		margin: 0 auto;
	}
	#sdg-esd .slide-wrap .i12 .item-body p {
		padding-right: 1em;
	}
	#sdg-esd .slide-wrap .i12 .item-title .label2 span {
		transform: scaleX(0.9);
	}
	#sdg-esd .slide-wrap .i13 .item-title .label2 span {
		transform: scaleX(0.75);
	}
	
	#sdg-esd .slide-wrap .i14 .item-title .label2 span {
		transform: scaleX(1);
	}
	
	#sdg-esd .slide-wrap .i15 .item-body .inner {
		padding: calc(50 / 640 * 100vw) 2vw;
	}
	#sdg-esd .slide-wrap .i15 .item-body .inner .pic-wrap {
		padding: 1.5vw 2.4vw 2.4vw;
	}
	#sdg-esd .slide-wrap .i15 .item-body .note {
		padding-right: 0.8em;
	}
	
	#sdg-esd .slide-wrap .i16 .item-title .label2 span {
		transform: scaleX(0.75);
	}
	#sdg-esd .slide-wrap .i17 .item-title .label2 {
		width: 120%;
		padding-left: 2.5em;	/* うまくセンターにならないので */
	}
	#sdg-esd .slide-wrap .i17 .item-title .label2 span {
		transform-origin: 0 0;	/* うまくセンターにならないので */
		transform: scaleX(0.525);
	}
	#sdg-esd .slide-wrap .i3 .item-body .p1 {
		width: 60%;
		display: block;
		margin: 0 auto;
	}
	#sdg-esd .slide-wrap .i5 .item-body .p1 {
		width: 60%;
		display: block;
		margin: 0 auto;
	}
}

/* -------------------------------------------------
	modal
------------------------------------------------- */

#modal-base,
#modal-content,
.modal-item {
	display: none;
}

@media print, screen and (min-width:769px) {
	#modal-base {
		width: 100%;
		height: calc(100vh - 160px);
		background: #ffd03a;
		position: fixed;
		left: 0;
		top: 160px;
		z-index: 120;
	}
	#modal-base::before,
	#modal-base::after {
		width: 1000px;
		height: 100%;
		display: block;
		content: "";
		position: absolute;
		top: 0;
		z-index: 10;
	}
	#modal-base::before {
		right: calc(50% + 600px);
		background: url(../common/images/bg_01.png) repeat right 15px / 344px auto;
	}
	#modal-base::after {
		left: calc(50% + 600px);
		background: url(../common/images/bg_01.png) repeat left 15px / 344px auto;
	}
	
	#modal-close {
		width: 120px;
		position: absolute;
		top: -31px;
		right: 86px;
		cursor: pointer;
	}
	
	#modal-content {
		width: 96%;
		max-width: 1200px;
		height: calc(100vh - 230px);
		box-sizing: border-box;
		border: solid 7px #666;
		background: #ffe7a9;
		position: fixed;
		left: 50%;
		top: 210px;
		z-index: 122;
		transform: translateX(-50%);
	}
	#modal-content #modal-inner1 {
		height: 100%;
		overflow: auto;
	}
	#modal-content .modal-inner2 {
		max-width: 1070px;
		width: calc(1070 / 1186 * 100%);
		margin: 0 auto;
		padding: 90px 0 25px;
	}
	
	.modal-item {
		display: none;
	}
}

@media print, screen and (min-width:769px) and (max-width:1260px) {
	#modal-base::before {
		right: 98%;
	}
	#modal-base::after {
		left: 98%;
	}
}

@media screen and (max-width:768px) {
	#modal-content {
		width: 100%;
		height: calc(100vh - 20.31vw);
		padding: 0 4.68%;
		background: #ffe7a9;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: calc(130 / 640 * 100vw);
		z-index: 122;
	}
	#modal-content #modal-inner1 {
		height: 100%;
		padding: 8vw 0 18vw;
		box-sizing: border-box;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	#modal-close-sp {
		width: 100%;
		height: calc(38 / 640 * 100vw);
		padding: 3vw 11vw 3vw 5vw;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 124;
		font-size: calc(24 / 640 * 100vw);
		background: #ffe7a9 url(../common/images/ico_close_03.svg) no-repeat 97% center / 5.93vw auto;
	}
}

/* -------------------------------------------------
	modal-philosophy
------------------------------------------------- */

#modal-philosophy .block + .block {
	margin-top: 55px;
	padding-top: 55px;
	border-top: solid 3px #666;
}
#modal-philosophy .block .left .title {
	font-size: 24px;
	font-weight: 900;
	line-height: 1.66;
	letter-spacing: 0.3em;
}
#modal-philosophy .block .left .desc {
	margin: 1em 0 2.5em;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.75;
}
#modal-philosophy .block .btn {
	width: 100%;
	height: 66px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	background: #fff;
	border-radius: 33px;
	box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.15);
	font-weight: 500;
	letter-spacing: 0.1em;
	transition: opacity 0.3s ease-out;
	/* 複数並べる */
	margin-bottom: .5em;
}

#modal-philosophy .block .btn.pe{ background-color: #bbaeef; }
#modal-philosophy .block .btn.math{ background-color: #34D0FB; }
#modal-philosophy .block .btn.science{ background-color: #88F5A2; }
#modal-philosophy .block .btn.digi{ background-color: #43bdd4; }


@media print, screen and (min-width:769px) {
	#modal-philosophy .block {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	#modal-philosophy .block .left {
		width: calc(560 / 1070 * 100%);
	}
	
	#modal-philosophy .block .left .btn:hover {
		opacity: 0.8;
	}
	
	#modal-philosophy .block .right {
		width: calc(450 / 1070 * 100%);
		text-align: center;
	}
	#modal-philosophy .block .right .image.i1 {
		width: calc(350 / 552 * 100%);
		margin: 0 auto 100px;
	}
	#modal-philosophy .block .right .image.i2 {
		margin-bottom: 100px;
	}
	#modal-philosophy .block .right p {
		margin-top: 0.6em;
		text-align: left;
		font-size: 15px;
	}
}

@media screen and (max-width:768px) {
	#modal-philosophy .block {
		/* ボタンを複数おけるように変更
		padding-bottom: calc(150 / 640 * 100vw);
		*/
		position: relative;
	}
	#modal-philosophy .block + .block {
		margin-top: calc(70 / 640 * 100vw);
		padding-top: calc(60 / 640 * 100vw);
		border-width: 2px;
	}
	#modal-philosophy .block .left .title {
		font-size: calc(35 / 640 * 100vw);
		line-height: 1.75;
		letter-spacing: 0.18em;
		text-align: center;
	}
	#modal-philosophy .block .left .desc {
		margin: 1.2em 0 1.5em;
		font-size: calc(31 / 640 * 100vw);
	}
	#modal-philosophy .block .btn {
		width: calc(567 / 640 * 100vw);
		height: calc(101 / 640 * 100vw);
		border-radius: calc(50.5 / 640 * 100vw);
		font-size: calc(27 / 640 * 100vw);
		box-shadow: 1vw 1vw 2vw 0 rgba(0,0,0,0.24);
		/* 複数並べる
		position: absolute;
		bottom: 0;
		 */
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-top: .5em;
		margin-bottom: 0;
	}
	#modal-philosophy .block .right .image.i1 {
		width: 70%;
		margin: 0 auto;
		display: block;
	}
    /*
	#modal-philosophy .block .right img {
		width: 100%;
	}
    */
	#modal-philosophy .block .right p {
		margin-top: 0.5em;
		font-size: calc(24 / 640 * 100vw);
	}
}

/* -------------------------------------------------
	modal-universal
------------------------------------------------- */

#modal-universal .block + .block {
	margin-top: 70px;
	padding-top: 70px;
	border-top: solid 3px #666;
}
#modal-universal p,
#modal-universal li {
	letter-spacing: 0.05em;
}
#modal-universal .title1 {
	margin-bottom: 1.5em;
	font-size: 24px;
	font-weight: 900;
	color: #231815;
	letter-spacing: 0.2em;
}
#modal-universal .desc1 {
	font-size: 20px;
	font-weight: 500;
	color: #231815;
	line-height: 1.95;
}
#modal-universal .copy {
	height: 46px;
	padding: 0 2em;
	margin: 2em 0 0.9em;
	border-radius: 23px;
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.2em;
	background: #f7ac3b;
}
#modal-universal .desc2 {
	font-size: 19px;
	color: #231815;
	line-height: 2;
}
#modal-universal .man {
	margin-top: 35px;
	display: flex;
}
#modal-universal .man .image {
	width: 210.5px;
}
#modal-universal .man .texts {
	margin-left: 34px;
	color: #231815;
}
#modal-universal .man .text1 {
	font-size: 18px;
	line-height: 1.8;
}
#modal-universal .man .name {
	margin-top: 0.5em;
	font-size: 21px;
}
#modal-universal .man .text2 {
	margin: 0.2em 0 0.8em;
	font-size: 18px;
}
#modal-universal .man .to-profile {
	color: #ff711d;
	font-size: 16px;
}
#modal-universal .figure {
	margin-top: 15px;
}
#modal-universal .figure ul {
	display: flex;
	justify-content: space-between;
}
#modal-universal .figure ul li {
	width: calc(512 / 1070 * 100%);
}
#modal-universal .figure ul li .f-title {
	height: 30px;
	margin-bottom: 15px;
	border-radius: 15px;
	background: #231815;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
}
#modal-universal .figure ul li .f-caption {
	margin-top: 0.5em;
	font-size: 16px;
	color: #231815;
}
#modal-universal .figure .f-desc {
	margin-top: 1em;
	font-size: 20px;
	line-height: 1.95;
	font-weight: 500;
}

@media print, screen and (min-width:769px) {
	#modal-universal .man .to-profile:hover {
		text-decoration: underline;
	}
}

@media print, screen and (min-width:769px) and (max-width:990px) {
	#modal-universal .figure ul li .f-title {
		font-size: 15px;
		letter-spacing: 0;
	}
	#modal-universal .copy {
		letter-spacing: 0.15em;
	}
}

@media screen and (max-width:768px) {
	#modal-universal .block + .block {
		margin-top: calc(55 / 640 * 100vw);
		padding-top: calc(55 / 640 * 100vw);
		border-width: 2px;
	}
	#modal-universal .title1 {
		font-size: calc(35 / 640 * 100vw);
		text-align: center;
	}
	#modal-universal .desc1 {
		font-size: calc(31 / 640 * 100vw);
		line-height: 1.8;
	}
	#modal-universal .copy {
		height: auto;
		padding: 0.6em 0;
		margin: 2em 0 1.1em;
		border-radius: 0;
		display: block;
		font-size: calc(33 / 640 * 100vw);
		text-align: center;
		line-height: 1.6;
	}
	#modal-universal .desc2 {
		font-size: calc(31 / 640 * 100vw);
		line-height: 1.8;
	}
	#modal-universal .man {
		margin-top: calc(80 / 640 * 100vw);
		display: block;
	}
	#modal-universal .man .image {
		width: calc(210 / 640 * 100vw);
		margin: 0 auto;
	}
	#modal-universal .man .texts {
		margin-left: 0;
		text-align: center;
	}
	#modal-universal .man .text1 {
		margin-top: 1em;
		font-size: calc(27 / 640 * 100vw);
	}
	#modal-universal .man .text1.ls0 {
		letter-spacing: 0;
	}
	#modal-universal .man .name {
		font-size: calc(31 / 640 * 100vw);
	}
	#modal-universal .man .text2 {
		margin: 0.7em 0 1em;
		font-size: calc(27 / 640 * 100vw);
	}
	#modal-universal .man .to-profile {
		font-size: calc(27 / 640 * 100vw);
	}
	#modal-universal .figure {
		margin-top: calc(30 / 640 * 100vw);
	}
	#modal-universal .figure ul {
		display: block;
	}
	#modal-universal .figure ul li {
		width: auto;
	}
	#modal-universal .figure ul li + li {
		margin-top: calc(35 / 640 * 100vw);
	}
	#modal-universal .figure ul li .f-title {
		height: calc(50 / 640 * 100vw);
		margin-bottom: 2.5vw;
		border-radius: calc(25 / 640 * 100vw);
		font-size: calc(28 / 640 * 100vw);
		letter-spacing: 0;
	}
	#modal-universal .figure ul li .f-caption {
		font-size: calc(24 / 640 * 100vw);
	}
	#modal-universal .figure .f-desc {
		font-size: calc(31 / 640 * 100vw);
		line-height: 1.8;
	}
}

/* -------------------------------------------------
	modal-torikumi
------------------------------------------------- */

#modal-torikumi .title {
	margin-bottom: 1.5em;
	font-size: 24px;
	line-height: 1.6;
	color: #231815;
	font-weight: 900;
	letter-spacing: 0.3em;
}
#modal-torikumi .title.t2 {
	margin-top: 1.8em;
}
#modal-torikumi .ref {
	margin-top: 0.5em;
	font-size: 14px;
}

@media print, screen and (min-width:769px) {
	#modal-torikumi .title {
		padding-right: 160px;
	}
	
	#modal-torikumi .two-col {
		display: flex;
		justify-content: space-between;
	}
	#modal-torikumi .two-col.tc1 {
		margin-bottom: 15px;
	}
	#modal-torikumi .two-col.tc1 .left {
		width: calc(531.5 / 1070 * 100%);
	}
	#modal-torikumi .two-col.tc1 .right {
		width: calc(491.5 / 1070 * 100%);
	}
	#modal-torikumi .two-col.tc2 .left {
		width: calc(501.5 / 1070 * 100%);
	}
	#modal-torikumi .two-col.tc2 .right {
		width: calc(523.5 / 1070 * 100%);
	}
}

@media screen and (max-width:768px) {
	#modal-torikumi .title {
		font-size: calc(33 / 640 * 100vw);
	}
	#modal-torikumi .title.t2 {
		margin-top: 2.5em;
	}
	#modal-torikumi .ref {
		font-size: calc(24 / 640 * 100vw);
	}
	#modal-torikumi .pic2,
	#modal-torikumi .pic3,
	#modal-torikumi .pic5 {
		margin-top: calc(45 / 640 * 100vw);
	}
	
	#modal-torikumi .two-col.tc2 .right {
		position: relative;
	}
	#modal-torikumi .two-col.tc2 .right .ref {
		margin: 0;
		position: absolute;
		right: 0;
		bottom: 22vw;
	}
}