@media (max-width: 768px) {
	#main-img,
	#main-img .inner,
	.main,
	.smoke,
	.highlight {
		height: 480px;
	}

	#main-img .catch-en {
		font-size: 28px;
	}

	@keyframes catch-en-anim {
		0% {
			bottom: 10%;
			opacity: 0;
		}

		100% {
			bottom: 5%;
			opacity: 1;
		}
	}

	/* main */
	#main .ttl-1 {
		display: block;
		text-align: center;
	}

	#main .section-1 .intro-box {
		margin-top: 20px;
	}

	#main .section-1 .intro-box .english-ttl {
		width: auto;
		text-align: center;
		float: none;
	}

	#main .section-1 .intro-box p:nth-child(2) {
		width: auto;
		margin-top: 20px;
		float: none;
	}



	/* intro */
	#main {
		padding-top: 24px;
	}

	#main .work-info {
		margin: 0px 16px;
	}

	#main .work-info .img-box-1 {
		width: 100%;
		height: 320px;
		float: none;
	}
	#main .work-info .txt-box {
		width: 100%;
		float: none;
		margin-top: 28px;
	}

	#main .work-info .img-box-2 {
		width: 100%;
		height: 320px;
		float: none;
	}

	#main .work-info h2 {
		padding-left: 0;
		font-size: 20px;
	}

	.line-1 {
		margin-left: 16px;
		margin-right: 16px;
	}

	#main .work-info .txt-box .txt-1 {
		margin: 24px 0 0 0;
		padding: 0 16px;
	}

	#main .work-info .img-box-2 {
		margin-top: 24px;
	}

	/* blocl-1 */
	#main .block-1 .img-box-1 {
		width: 100%;
		height: 300px;
	}

	#main .block-1 .txt-box {
		width: 85%;
		margin: 0 auto;
		padding-top: 20px;
		float: none;
		clear: both;
	}

	#main .block-1 .img-box-2 {
		margin-top: 24px;
		width: 100%;
	}

	#main .block-1 .txt-box h2 {
		padding: 0 0 12px 0;
	}

	#main .block-1 .txt-box p {
		padding: 0;
		margin-top: 20px;
	}

	/* example-box */
	.example-box {
		margin-top: 0px;
		padding-bottom: 32px;
	}

	.example-box .img-box-2 {
		width: 100%;
		margin: 0 auto;
	}

	.example-box .txt-box {
		position: static;
	}

	.example-box .txt-box .ttl-box-1 {
		position: relative;
		bottom: 16px;
	}


	/* section-3 */
	/*news*/
	.section-3 .news-box {
		padding: 32px 0;
	}

	.section-3 .news-box .txt-box-2 p:nth-child(2) {
		float: none;
	}

	.section-3 .news-box .txt-box-2 p.date span.year {
		display: inline-block;
	}

	.section-3 .news-box .ttl-2 {
		width: 100%;
		margin: 0 auto;
		float: none;
		text-align: left;
		font-size: 18px;
	}


	.section-3 .news-box .txt-box-2 p.date {
		text-align: left;
		margin-top: 20px;
		margin-right: 0;
		float: none;
	}

	.section-3 .news-box .txt-box-2 p.date span.year {
		text-align: center;
	}

	.section-3 .news-box .txt-box-2 {
		float: none;
	}

}

@media (max-width: 480px) {
	#main-img,
	#main-img .inner,
	.main,
	.smoke,
	.highlight {
		height: 320px;
	}

	#main-img .catch-en {
		font-size: 20px;
	}

	#main-img .logo-box {
		position: absolute;
		left: 0px;
		top: 0px;
	}

	#main-img .logo-box {
		position: absolute;
		left: 0px;
		top: 24px;
		width: 100%;
		text-align: center;
	}

	#main .ttl-1 {
		margin: 0 0 24px 0;
		line-height: 1.4em;
		font-size: 18px;
		font-weight: bold;
	}

	#main .section-1 .intro-box .english-ttl {
		width: 100%;
		line-height: 1;
		font-size: 18px;
		font-weight: bold;
		float: left;
	}

	#main .section-1 .intro-box p:nth-child(2) {
		width: 100%;
		font-size: 14px;
		float: right;
	}

	.example-box .img-box-2 {
		height: 280px;
	}

	.section-3 .news-box .txt-box-2 {
		margin: 0 0 16px 0;
		padding: 0 0 12px 0;
	}

	.section-3 .news-box .txt-box-2 p.date {
		font-size: 16px;
	}
	.section-3 .news-box .txt-box-2 p.date span {
		font-size: 16px;
	}

	.section-3 .news-box .txt-box-2 p.date span.year {
		font-size: 14px;
	}

}