@charset "UTF-8";

/* video-lead */
@media all {
	.video-lead {text-align: center;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.video-lead {margin-top: 90rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.video-lead {
			margin-top: 110rem;
			line-height: 2.5;
		}
	}
}

/* online-section, seminor-section */
@media all {
	.video-section {background-color: var(--bg-lightblue);}

	.video-header-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
	}
	.video-header-ttl-no {
		display: inline-block;
		color: #fff;
		letter-spacing: 0;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.bg-grid {
			margin-top: 60rem;
			padding: 40rem 0 80rem;
		}
		.video-section {padding: 40rem 25rem 50rem;}
		.video-section + .video-section {margin-top: 30rem;}
		.video-header-ttl {
			font-size: 22rem;
		}
		.video-header-ttl-no {
			padding: 5rem 0 5rem 5rem;
			width: 54rem;
			height: 32rem;
			font-size: 22rem;
			clip-path: polygon(0 0, 100% 0, 47rem 100%, 0 100%);
		}

	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.bg-grid {
			margin-top: 80rem;
			padding: 55rem 0 100rem;
		}
		.video-section {
			margin: 0 auto;
			padding: 30rem 0 70rem;
			width: 1160rem;
		}
		.video-section + .video-section {margin-top: 65rem;}

		.video-header {display: flex;}
		.video-header-ttl {
			margin-left: -15rem;
			width: 405rem;
			font-size: 28rem;
		}
		.video-header-ttl-no {
			padding: 12rem 0 12rem 20rem;
			margin-right: 8rem;
			width: 135rem;
			height: 72rem;
			font-size: 48rem;
			clip-path: polygon(0 0, 100% 0, 115rem 100%, 0 100%);
		}
		.video-header-ttl-txt.narrow {letter-spacing: -4rem;}

		.video-header-lead {
			margin-top: 20rem;
			width: calc(100% - 405rem);
			line-height: 2.5;
		}


	}
}

/* ranking */
@media all {
	.ranking-header,
	.ranking-footer
	 {text-align: center;}

	 .ranking-header-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
	}

	.ranking-item {background-color: #fff;}
	img.rank-img {display: inline-block;}
	.ranking-item .rank {
		font-family: var(--lineseed);
		font-weight: bold;
	}
	.ranking-item .rank-ttl {font-weight: 600;}
	.ranking-item .rank-account-name {font-weight: 600;}

	.ranking-header .balloon,
	.ranking-footer .balloon {padding: 0 2em;}
	.ranking-footer .balloon {transform: scaleY(-1)}
	.ranking-footer .balloon > p {
		margin-top: .5em;
		transform: scaleY(-1);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.ranking-content {margin-top: 50rem;}
		.ranking-header-ttl {
			margin-top: 10rem;
			margin-bottom: 30rem;
			font-size: 22rem;
		}
		.ranking-content .balloon {font-size: 14rem;}

		.ranking-list {
			margin: 0 auto;
			width: 320rem;
		}
		.ranking-item {
			box-shadow: 2rem 2rem 4rem rgba(0,0,0,.2);
		}
		.ranking-item + .ranking-item {margin-top: 20rem;}

		.ranking-item .rank {
			font-size: 36rem;
		}
		img.rank-img {
			margin-right: 6rem;
			padding-bottom: 4rem;
			width: 30rem;
		}
		.ranking-item .rank small {font-size: 20rem;}

		.rank-ttl {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rem 10rem 0 10rem;
		}
		.rank-ttl .rank {width: 90rem;}
		.rank-ttl .ttl {
			flex-shrink: 0;
			width: calc(100% - 90rem);
			font-size: 14rem;
			line-height: 24rem;
		}
		.rank-date {
			margin: 10rem auto 0;
			width: calc(100% - 20rem);
			padding-bottom: 10rem;
			border-bottom: max(1px, 1rem) solid #e5e5e5;
			font-size: 11rem;
			text-align: right;
		}

		.ranking-item .rank-account {
			display: flex;
			flex-wrap: wrap;
			padding: 10rem;
		}
		.rank-account-name {
			flex-shrink: 0;
			min-width: 120rem;
		}
		.rank-x-account {
			min-width: 180rem
		}
		.ranking-item .x-logo {
			margin-right: 10rem;
			width: 14rem;
			transform: translateY(2rem);
		}

		.ranking-footer {
			margin-top: 30rem;
			padding-bottom: 10rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.ranking-content {margin-top: 50rem;}
		.ranking-header-ttl {
			margin-top: 30rem;
			font-size: 28rem;
		}
		.ranking-list {
			display: flex;
			justify-content: center;
			margin-top: 40rem;
		}
		.ranking-item {
			width: 20%;
			max-width: 200rem;
			border: max(1rem, 1px) solid #e5e5e5;
		}
		.ranking-item:not(:last-child) {border-right: none;}

		.ranking-item > div {
			margin: 0 auto;
			padding: 0 5rem;
			width: calc(100% - 5rem);
		}
		.ranking-item .rank,
		.ranking-item .rank-date {
			border-bottom: max(1px, 1rem) solid #e5e5e5;
		}
		.ranking-item .rank {
			padding-top: 15rem;
			height: 60rem;
			font-size: 40rem;
		}
		img.rank-img {
			margin-right: 6rem;
			padding-bottom: 4rem;
			width: 30rem;
		}
		.ranking-item .rank small {font-size: 22rem;}
		.ranking-item .rank-thumb {
			margin-top: 10rem;
			transition: opacity .3s;
		}
		.ranking-item .rank-thumb:hover {
			opacity: .7;
			cursor: pointer;
		}
		.ranking-item .rank-ttl {
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			margin-top: 10rem;
			height: 72rem;
			font-size: 14rem;
			line-height: 24rem;
		}
		.ranking-item .rank-date {
			margin-top: 10rem;
			padding-bottom: 12rem;
			font-size: 12rem;
			text-align: right;
		}

		.ranking-item .rank-account {
			margin-top: 12rem;
			padding-bottom: 14rem;
			font-size: 14rem;
		}
		.ranking-item .rank-account a {transition: opacity .3s;}
		.ranking-item .rank-account a:hover {opacity: .7;}
		.rank-x-account {margin-top: 10rem;}
		.ranking-item .x-logo {width: 12rem;}

		.balloon {font-size: 18rem;}

		.ranking-footer {
			margin-top: 30rem;
			padding-bottom: 30rem;
		}
		
	}
}

/* seminor-section */
@media all {
	.seminor-theme-content {
		position: relative;
		font-weight: bold;
		background-color: #fff;
	}
	.seminor-theme-ttl {
		position: absolute;
		font-family: var(--lineseed);
		color: #fff;
	}

	.theme-item {position: relative;}
	.theme-item::before {
		content: '●';
		position: absolute;
		top: calc(50% - .4em);
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1em;
		height: 1em;
		font-size: .8em;
		background : linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(181, 7, 222, 1) 50%, rgba(0, 162, 231, 1) 100%);
		background-clip: text;
		color: transparent;
	}
	.andmore {
		position: absolute;
		background : linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(181, 7, 222, 1) 50%, rgba(0, 162, 231, 1) 100%);
		background-clip: text;
		color: transparent;
		background-size: 120%;
		background-position-x: 30%;
	}

	.youtube-iframe-wrapper {background-color: #fff;}
	.youtube-iframe-wrapper > iframe {
		width: 100%;
		height: 100%;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.seminor-theme-content {
			margin-top: 60rem;
			border-radius: 7rem;
			font-size: 14rem;
		}
		.seminor-theme-ttl {
			top: -16rem;
			left: 0;
			padding: 9rem 11rem;
			width: 140rem;
			height: 32rem;
			clip-path: polygon(0 0, 100% 0, 130rem 100%, 0 100%);
		}
		.theme-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 30rem 10rem 40rem;
			line-height: 30rem;
		}
		.theme-item {
			padding-left: 14rem;
			width: 47.5%;
		}
		.andmore {
			bottom: 20rem;
			right: 15rem;
		}

		.youtube-item {
			margin-top: 40rem;
			text-align: center;
		}
		.youtube-iframe-wrapper {
			margin-top: 20rem;
			padding: 2rem;
			width: 350rem;
			height: 196.875rem;
			border-radius: 3rem;
		}
		.youtube-balloon {
			margin: 0;
			padding: 0 1.5em;
			font-size: 14rem;
			font-feature-settings: normal;
		}

		.youtube-under-bnr {margin-top: 40rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.seminor-theme-content {
			margin: 80rem auto 0;
			width: 820rem;
			border-radius: 10rem;
			font-size: 18rem;
		}

		.seminor-theme-ttl {
			top: -10rem;
			left: -20rem;
			padding: 12rem 11rem 0;
			width: 40rem;
			height: 160rem;
			writing-mode: vertical-rl;
			clip-path: polygon(0 0, 100% 0, 100% 150rem, 0 100%);
		}
		.theme-list {
			display: flex;
			flex-wrap: wrap;
			padding: 20rem 0 20rem 60rem;
			line-height: 40rem;
		}
		.theme-item {
			padding-left: 26rem;
			width: 260rem;
			font-size: 18rem;
			line-height: 2.5;
		}
		.theme-item:nth-child(3n) {width: 230rem;}

		.andmore {
			bottom: 30rem;
			right: 30rem;
		}

		.youtube-list {
			margin: 50rem auto 0;
			width: 660rem;
		}
		.youtube-item {position: relative;}
		.youtube-item + .youtube-item {margin-top: 40rem;}
		.youtube-iframe-wrapper {
			padding: 10rem;
			width: 660rem;
			height: 380rem;
			border-radius: 10rem;
		}
		.youtube-balloon {
			position: absolute;
			left: -45rem;
			margin: 0;
			padding: 2em 0;
			font-size: 18rem;
			writing-mode: vertical-rl;
			font-feature-settings: normal;
		}
		.item1 .youtube-balloon {top: calc(50% - 162rem);}
		.item2 .youtube-balloon {top: calc(50% - 99rem);}
		.youtube-balloon::after {
			top: auto;
			bottom: 0;
			transform-origin: right center;
		}
		.youtube-under-bnr {
			margin-top: 70rem;
		}
	}
}

/* flow-section */
@media all {

	.flow-item {
		position: relative;
		background-color: var(--bg-lightblue);
		text-align: center;
	}
	.flow-item-no,
	.flow-item-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
	}
	.flow-item-no {
		position: relative;
		display: inline-block;
		--rainbow-text-end: 85%;
	}
	.flow-item-no::after {
		content: '●';
		position: absolute;
		z-index: 3;
		left: 50%;
		color: #00a2e7;
	}
	.flow-item:nth-child(2) .flow-item-no::after {color: #b507de;}
	.flow-item:nth-child(3) .flow-item-no::after {color: #f00;}

	.flow-item-txt {text-align: left;}

	.flow-item .flow-line {
		position: absolute;
		z-index: 1;
		display: block;
		height: max(1px, 1rem);
		background: #999;
		width: 0;
		transition: width .5s;
	}
	.flow-item:nth-child(1) .flow-line {
		background: linear-gradient(to right, #00a2e7, #b507de);
	}
	.flow-item:nth-child(2) .flow-line {
		background: linear-gradient(to right, #b507de, #f00);
	}

	.sending-ttl {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		border-radius: 2em;
		color: #fff;
	}

	.cocothink-ttl {
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to top right, #28b1bb, #35c5bb, #9ce1bb);
		color: #fff;
		font-weight: bold;
		border-radius: 2em;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.flow-section {padding: 60rem 25rem 160rem;}

		.flow-list {margin-top: 40rem;}

		.flow-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-wrap: wrap;
			padding-left: 10rem;
			border-radius: 7rem;
			height: 160rem;
		}
		.flow-item.june {height: 126rem;}
		.flow-item.august {height: 310rem;}
		.flow-item.september {height: 242rem;}
		.flow-item + .flow-item {margin-top: 10rem;}
		.flow-item-no {
			position: relative;
			margin: 150rem 50rem 150rem 0;
			padding: 0rem 0;
			width: 50rem;
			font-size: 35rem;
		}
		.flow-item-no::after {
			top: 45rem;
			top: calc(50% - 7rem);
			left: 62rem;
			font-size: 15rem;
		}
		
		.flow-item-no small {font-size: 23rem;}
		.flow-item-no .tilde {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 3rem;
			width: 100%;
			writing-mode: vertical-rl;
		}
		.flow-item-ttl,
		.flow-item-txt {width: calc(100% - 100rem);}

		.flow-item-txt {
			padding-left: 18rem;
			padding-right: 14rem;
		}
		.flow-item-ttl {
			display: block;
			margin: 0;
			font-size: 18rem;
			text-align: left;
		}

		.flow-item-period {margin-top: 3rem;}
		.flow-item-period p {margin-top: 10rem;}
		.flow-item-period p:not(:first-child) {display: inline-block;}

		.flow-item-txt {
			position: relative;
			margin-top: 6rem;
			line-height: 24rem;
		}
		.flow-item-notice {
			position: absolute;
			bottom: -16rem;
			right: 14rem;
			font-size: 11rem;
		}


		.flow-item .flow-line {
			top: 50rem;
			top: 50%;
			left: 69rem;
			transition-timing-function: ease;
			transition: width .75s;
			transform: rotate(90deg);
			transform-origin: left center;
		}
		.flow-item.june .flow-line.animated {width: 230rem;}
		.flow-item.august .flow-line.animated {width: 270rem;}

		.august .flow-item-ttl {margin-top: 10rem;}
		.august .sending-ttl {
			margin-top: 10rem;
			width: 100%;
			height: 21rem;
		}
		.august .sending-list {
			margin-top: 5rem;
		}
		.august .flow-item-img {
			display: block;
			margin: 8rem auto 0;
			width: 154rem;
			height: 120rem;
		}

		.september.flow-item {padding-bottom: 30rem;}
		.september .flow-item-ttl {line-height: 26rem;}
		.cocothink-ttl {
			height: 21rem;
			margin: 6rem 0;
		}
		.cocothink-btn {
			position: absolute;
			bottom: -20rem;
			right: 20rem;
		}

	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.flow-section {
			padding: 100rem 0 230rem;
			text-align: center;
		}
		.flow-section-inner {width: 970rem;}

		.flow-list {
			display: flex;
			justify-content: space-between;
			margin-top: 50rem;
		}

		.flow-item {
			padding-top: 25rem;
			border-radius: 10rem;
			width: 220rem;
			height: 448rem;
		}
		.flow-item.august {width: 300rem;}
		.flow-item.september {width: 400rem;}
		.flow-item-no {font-size: 40rem;}
		.flow-item-no small {font-size: 28rem;}
		.flow-item-no::after {
			bottom: -43rem;
			font-size: 15rem;
		}
		.flow-item-ttl {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 2.25em;
			line-height: 1.5;
		}
		
		.flow-line {
			bottom: -36rem;
			left: calc(50% + 8rem);
			transition-timing-function: linear;
		}
		.flow-item:nth-child(1) .flow-line {
			transition-timing-function: ease-in;
			transition-duration: .5s;
		}
		.flow-item:nth-child(2) .flow-line {
			transition-timing-function: ease-out;
			transition-delay: .5s;
		}
		.flow-line.animated {width: 280rem;}
		.august .flow-line.animated {width: 370rem;}
		.flow-item-ttl {
			margin-top: 70rem;
			margin-bottom: 20rem;
			font-size: 22rem;
		}
		.flow-item-period > p {
			font-size: 18rem;
			line-height: 32rem;
			white-space: nowrap;
		}
		.flow-item-txt {line-height: 28rem;}
		
		.sending-ttl {
			width: 220rem;
			height: 24rem;
		}
		.sending-list {
			margin-top: 5rem;
			padding-left: 50rem;
		}
		.september .flow-item-txt {
			margin-left: auto;
			margin-right: auto;
			width: 320rem;
		}
		.august .flow-item-img {
			position: absolute;
			bottom: -70rem;
			left: calc(50% - 100rem);
			width: 200rem;
			height: 156rem;
		}

		.cocothink-ttl {
			height: 24rem;
			margin-bottom: 6rem;
		}
		.cocothink-btn {
			position: absolute;
			bottom: -30rem;
			left: calc(50% - 100rem);
		}

	}
}








/* template-section */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}