/*----------
	social-attempt
----------*/
.social-attempt {
	position: relative;
	margin: 20px -20px 0;
	padding: 37px 20px 30px;
	border-radius: 20px;
}
.social-attempt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.5;
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: repeat;
	background-size: 600px auto;
	background-image: url(/kids/assets/img/common/bg_category2.png);
}
.social-attempt__label {
	position: absolute;
	left: 0;
	top: 20px;
	z-index: 2;
	width: 100%;
	text-align: center;
}
.social-attempt__label > p {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 5px;
	background-color: var(--color-prim);
	color: #FFFFFF;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: var(--line-height-s);
}
.social-attempt__label ruby[data-ruby] {
	position: relative;
}
.social-attempt__label ruby[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	left: -2em;
	right: -2em;
	top: -10px;
	font-size: 1rem;
	transform: scale(0.7);
	text-align: center;
}
.social-attempt__label rt {
	display: none;
}
.social-attempt__content {
	position: relative;
	z-index: 1;
	background-color: #FFFFFF;
	border-radius: 20px;
	cursor: pointer;
}
.social-attempt__picture {
	position: relative;
}
.social-attempt__picture .social-attempt__img-main {
	height: 0;
	padding-bottom: 335px;
	position: relative;
	overflow: hidden;
}
.social-attempt__picture .social-attempt__img-main img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	object-fit: cover;
	object-position: center;
}
.social-attempt__front {
	text-align: center;
	padding: 30px 20px 20px;
}
.social-attempt__front .social-attempt__logo {
	width: 140px;
	margin: 0 auto;
}
.social-attempt__front .social-attempt__keyword {
	display: inline-block;
	width: 140px;
	margin-top: 10px;
	padding: 1px 0;
	border-radius: 100px;
	color: var(--color-prim);
	font-size: 1.4rem;
	font-weight: bold;
	line-height: var(--line-height-s);
}
.social-attempt__front .social-attempt__title {
	margin-top: 4px;
	color: var(--color-prim);
	font-size: 3.4rem;
	font-weight: bold;
	line-height: 1.2;
}
.social-attempt__front .social-attempt__title rt {
	font-size: 1rem;
	transform: scale(0.8);
}
.social-attempt__front .social-attempt__teach {
	display: none;
}
.social-attempt__textarea {
	padding: 0 20px 32px;
}
.social-attempt__textarea .social-attempt__img-sdgs {
	max-width: 275px;
	margin: 20px auto 0;
}
.social-attempt__textarea .social-attempt__img-sdgs.social-attempt__img-sdgs--2pieces {
	max-width: 184px;
}
.social-attempt__textarea .social-attempt__btn {
	margin-top: 25px;
}
.social-attempt__character {
	position: absolute;
	left: 0;
	top: 247px;
	z-index: 1;
	width: 100%;
	height: 125px;
}
.social-attempt__character img {
	position: absolute;
	left: calc(50% - 62.5px);
	bottom: 0;
	width: 125px;
	height: 125px;
}
.social-attempt__character .social-attempt__chara-ura {
	display: none;
}
.social-attempt__character--1 img {
	bottom: -19px;
}
.social-attempt__character--2 img {
	bottom: -19px;
}
.social-attempt__character--3 img {
	bottom: -54px;
}
.social-attempt__character--3 .social-attempt__chara-omote {
	display: none;
}
.social-attempt__character--3 .social-attempt__chara-ura {
	display: block;
}
.social-attempt__character--4 img {
	bottom: -19px;
}
.social-attempt__character--4 .social-attempt__chara-omote--1 {
	left: calc(50% - 120px);
}
.social-attempt__character--4 .social-attempt__chara-omote--2 {
	height: auto;
	left: calc(50% + 5px);
}
.social-attempt--green {
	background-color: #BAF3B6;
}
.social-attempt--green .social-attempt__keyword {
	background-color: #BAF3B6;
}
.social-attempt--yellow {
	background-color: #FFF79B;
}
.social-attempt--yellow .social-attempt__keyword {
	background-color: #FFF79B;
}
.social-attempt--blue {
	background-color: #B1EDFE;
}
.social-attempt--blue .social-attempt__keyword {
	background-color: #B1EDFE;
}
@media (min-width: 744px) {
	.social-attempt {
		margin: 30px 0 0;
		padding: 50px 40px;
		border-radius: 30px;
	}
	.social-attempt__label {
		top: 29px;
		transform: rotate(0.03deg);
	}
	.social-attempt__label > p {
		padding: 6px 15px;
		font-size: 2rem;
	}
	.social-attempt__label ruby[data-ruby]::before {
		top: -11px;
		transform: scale(0.8);
	}
	.social-attempt__content {
		display: flex;
		flex-direction: row-reverse;
		min-height: 442px;
		border-radius: 30px;
	}
	.social-attempt.is-ura .social-attempt__content {
		animation: anime-karuta 0.4s ease-in-out;
	}
	.social-attempt.is-omote .social-attempt__content {
		animation: anime-karuta 0.4s ease-in-out;
	}
	.social-attempt__picture {
		width: 50%;
	}
	.social-attempt__picture .social-attempt__img-main {
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding-bottom: 0;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
		text-align: right;
	}
	.social-attempt__picture .social-attempt__img-main img {
		position: static;
		width: auto;
		height: 100%;
		border-top-left-radius: 0;
		border-bottom-right-radius: 0;
		object-fit: fill;
	}
	.social-attempt__picture .social-attempt__img-main::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		visibility: hidden;
		opacity: 0.5;
		display: block;
		width: 100%;
		height: 100%;
		background-color: #000000;
		transition: visibility 0s 0.2s;
	}
	.social-attempt.is-ura .social-attempt__picture .social-attempt__img-main::before {
		visibility: visible;
	}
	.social-attempt__front {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 100%;
		text-align: center;
		padding: 30px 0 20px;
		transition: visibility 0s 0.2s;
	}
	.social-attempt.is-ura .social-attempt__front {
		visibility: hidden;
	}
	.social-attempt__front .social-attempt__logo {
		width: 204px;
	}
	.social-attempt__front .social-attempt__keyword {
		width: 202px;
		margin-top: 30px;
		padding: 2px 0;
		font-size: 1.8rem;
		transform: rotate(0.03deg);
	}
	.social-attempt__front .social-attempt__title {
		margin-top: 10px;
		font-size: 5rem;
	}
	.social-attempt__front .social-attempt__title rt {
		margin: 0 8px;
		font-size: 1.2rem;
		transform: translate(10px, -7px);
	}
	.social-attempt__front .social-attempt__teach {
		position: relative;
		display: block;
		margin: 25px 0 7px;
		padding: 10px 4px 10px 97px;
		text-align: left;
		transform: rotate(0.03deg);
	}
	.social-attempt__front .social-attempt__teach::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 84px;
		height: 84px;
		background: var(--color-seco-yellow) url(/kids/assets/img/common/icon_interview.svg) no-repeat center center/59px auto;
		border-radius: 100%;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	}
	.social-attempt__front .social-attempt__teach .social-attempt__teach-text1 {
		display: block;
		color: var(--color-prim);
		font-size: 3.3rem;
		font-weight: bold;
		line-height: 1.27;
	}
	.social-attempt__front .social-attempt__teach .social-attempt__teach-text2 {
		display: block;
		color: var(--color-prim);
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 1.62;
	}
	.social-attempt__textarea {
		width: 50%;
		visibility: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 35px 35px 20px 40px;
		transition: visibility 0s 0.2s;
	}
	.social-attempt__textarea::after {
		font-family: iconfont !important;
		/* stylelint-disable-line declaration-no-important,font-family-no-missing-generic-family-keyword */
		speak: none;
		font-style: normal;
		font-weight: normal;
		line-height: 1;
		content: var(--icon-arrow-back);
		position: absolute;
		left: calc(50% - 25px);
		bottom: -25px;
		width: 50px;
		height: 50px;
		background-color: var(--color-seco-yellow);
		border-radius: 100%;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
		color: var(--color-prim);
		font-size: 2.4rem;
		line-height: 50px;
		text-align: center;
	}
	.social-attempt__textarea .social-attempt__text {
		margin-top: 8px;
		visibility: hidden;
		transition: visibility 0s 0.2s;
	}
	.social-attempt.is-ura .social-attempt__textarea .social-attempt__text {
		visibility: visible;
		transition: visibility 0s 0.3s;
	}
	.social-attempt__textarea .social-attempt__img-sdgs {
		position: absolute;
		right: 0;
		top: 55px;
		width: 50%;
		max-width: 100%;
		margin: 0;
		padding: 0 20px;
	}
	.social-attempt__textarea .social-attempt__img-sdgs img {
		display: block;
		max-width: 355px;
		margin: 0 auto;
	}
	.social-attempt__textarea .social-attempt__img-sdgs.social-attempt__img-sdgs--2pieces {
		max-width: 100%;
	}
	.social-attempt__textarea .social-attempt__img-sdgs.social-attempt__img-sdgs--2pieces img {
		max-width: 235px;
	}
	.social-attempt__textarea .social-attempt__btn {
		width: 100%;
		margin-top: 20px;
	}
	.social-attempt.is-ura .social-attempt__textarea {
		visibility: visible;
	}
	.social-attempt__character {
		left: auto;
		right: 40px;
		top: auto;
		bottom: 50px;
		width: calc(50% - 40px);
		height: 240px;
	}
	.social-attempt__character img {
		left: calc(50% - 120px);
		width: 240px;
		height: 240px;
	}
	.social-attempt__character .social-attempt__chara-omote {
		visibility: visible;
		transition: visibility 0s 0.2s;
	}
	.social-attempt.is-ura .social-attempt__character .social-attempt__chara-omote {
		visibility: hidden;
	}
	.social-attempt__character .social-attempt__chara-ura {
		display: block;
		visibility: hidden;
		transition: visibility 0s 0.2s;
	}
	.social-attempt.is-ura .social-attempt__character .social-attempt__chara-ura {
		visibility: visible;
	}
	.social-attempt__character--1 img {
		bottom: -34px;
	}
	.social-attempt__character--1 .social-attempt__chara-ura {
		bottom: -29px;
	}
	.social-attempt__character--2 img {
		bottom: -44px;
	}
	.social-attempt__character--2 .social-attempt__chara-ura {
		left: calc(50% - 150px);
		width: auto;
	}
	.social-attempt__character--3 img {
		bottom: -44px;
	}
	.social-attempt__character--3 .social-attempt__chara-omote {
		display: block;
	}
	.social-attempt__character--4 .social-attempt__chara-omote--1 {
		left: 3px;
		bottom: -44px;
	}
	.social-attempt__character--4 .social-attempt__chara-omote--2 {
		height: auto;
		left: auto;
		right: -58px;
		bottom: -47px;
	}
	.social-attempt__character--4 .social-attempt__chara-ura--1 {
		left: 3px;
		bottom: -44px;
	}
	.social-attempt__character--4 .social-attempt__chara-ura--2 {
		width: auto;
		left: auto;
		right: -70px;
		bottom: -44px;
	}
}
@media (max-width: 900px) and (min-width: 744px) {
	.social-attempt__character--4 .social-attempt__chara-omote--1 {
		left: -60px;
	}
	.social-attempt__character--4 .social-attempt__chara-ura--1 {
		left: -60px;
	}
}

@keyframes anime-karuta {
	0% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(0, 1);
	}
	100% {
		transform: scale(1, 1);
	}
}
/*----------
	social-sdgs
----------*/
.social-sdgs {
	margin: 42px -10px 0;
	padding: 42px 0 8px;
	background: url(/kids/assets/img/common/bg_line_dot.png) repeat-x left top/7px auto;
}
.social-sdgs__logo {
	max-width: 280px;
	margin: 0 auto;
}
.social-sdgs__lead {
	margin: 30px -10px 0;
	color: var(--color-prim);
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}
.social-sdgs__lead ruby[data-ruby] {
	position: relative;
}
.social-sdgs__lead ruby[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	left: -2em;
	right: -2em;
	top: -14px;
	font-size: 1rem;
	transform: scale(0.7);
	text-align: center;
}
.social-sdgs__lead rt {
	display: none;
}
.social-sdgs__btn {
	margin-top: 30px;
}
.social-sdgs__btn a > span {
	font-size: 1.4rem;
}
@media (min-width: 744px) {
	.social-sdgs {
		margin: 60px 0 0;
		padding: 60px 0 0;
	}
	.social-sdgs__logo {
		max-width: 483px;
	}
	.social-sdgs__lead {
		margin: 47px 0 0;
		font-size: 2.2rem;
		transform: rotate(0.03deg);
	}
	.social-sdgs__lead ruby[data-ruby]::before {
		top: -15px;
		transform: scale(0.8);
	}
	.social-sdgs__btn {
		max-width: 535px;
		margin: 45px auto 0;
	}
	.social-sdgs__btn a > span {
		font-size: 2.2rem;
		line-height: 1.13;
	}
}