@charset "UTF-8";
/* CSS Document */



/* ====================================================================
	IpadPro 1024px > 
==================================================================== */


/* ---------------------------------------------------
	Top
--------------------------------------------------- */

@media only screen and (max-width: 1024px) {

	#main.checked .container {
		width: 80%;
	}



}



/* ====================================================================
	Ipad 768px > 
==================================================================== */


/* ---------------------------------------------------
	Top
--------------------------------------------------- */

@media only screen and (max-width: 768px) {

	.icons {
		width: 56%;
	}

	.special_a .fl01 span {
		font-size: 1rem;
	}

	#main.checked .container {
		width: 90%;
	}

	#ending .tweetArea .sns {
		width: 100%;
	}

	#ending .moreVideoArea .singleVideo .info {
		min-height: 100px;
	}

	#omake {
		padding: 8% 0;
	}

	#omake .memo {
		width: 90%;
	}

	#omake .omakeImg {
		width: 100%;
	}

	#contact .ancate .btn {
		width: 70%;
	}

	.voice-text-right {
		margin-right: 0px;
	}

	#main .type_b select {
		width: 18%;
	}

	.popup.show .voice p.voice-text:last-child {
		font-size: 1rem;
	}

	
}


/* ====================================================================
	Smartphone 600px > 
==================================================================== */


/* ---------------------------------------------------
	Top
--------------------------------------------------- */

@media only screen and (max-width: 600px) {

	.for-pc {
		display: none;
	}
	
	.for-sp {
		display: block;
	}

	.h1 {
		font-size: 2rem;
	}

	#question .video_area {
		width: 100%;
	}

	.labelcss label.clickme {
		width: 40%;
	}

	#question .question_step {
		font-size: 1.2rem;
		padding-left: 4%;
		line-height: 1.5;
    	letter-spacing: .05em;
	}

	#question .question_title {
		font-size: 1.2rem;
	}

	#question form p input {
		font-size: 1.2rem;
	}

	#question .show .submit {
		width: 100%;
		font-size: 1rem;
		margin-top: 4%;
	}

	.icons {
		width: 80%;
	}

	#question {
		padding: 8% 0 12%;
	}

	#answer .question_single {
		border: 4px solid #169ec7;
	}

	#answer .question_step {
		font-size: 1.2rem;
		padding: .6% 4%;
	}

	#answer .question_title {
		font-size: 1.2rem;
	}

	#answer form p input {
		font-size: 1.2rem;
	}

	#answer .show .submit {
		font-size: 1.1rem;
		width: 100%;
		margin-top: 4%;
	}

	.hint_area {
		padding: 6% 4%;
		margin-bottom: 22%;
	}

	.archive_title {
		font-size: 1.1rem;
		padding: 2%;
	}

	#story + .archive_area {
		font-size: 1rem;
	}

	.archive_area p {
		width: 48%;
	}

	#hintdesc1 p {
		font-size: 1rem;
	}

	.special_a .fl01 {
		width: 100%;
	}

	.special_a .fl02 {
		width: 100%;
	}

	#answer .answer_area .special_b p input {
		width: 100%;
		margin: 1% 0;
	}

	#extra {
		padding: 4%;
	}

	#extra li {
		margin-right: 8%;
		margin-bottom: 1%;
		letter-spacing: .04em;
	}

	#extra2 ul{
		margin-top: 6%;
	}

	#extra2 li {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 4%;
	}

	#extra2 .btnlist {
		font-size: 1.2rem;
		padding-left: 4%;
	}




	#main #nav li {
		width: 48%;
    	margin-bottom: 3%;
	}

	#main .type_a .flex01 {
		width: 100%;
	}

	#main .type_a .flex02 {
		width: 100%;
	}

	#main .movieSingle {
		width: 49%;
	}

	#main .type_a .flex01 {
		padding-left: 0;
	}

	#main .formBox .ttl {
		margin-top: 4%;
	}

	#main .type_b select {
		width: 35%;
		box-sizing: border-box;
		padding: 8px;
		border-radius: 8px;
		border: 3px solid #ccc;
		margin-bottom: 3%;
		margin-right: 3%;
		margin-left: 3%;
	}

	#extra {
		margin-top: 8%;
	}

	.caution a {
		font-size: .6rem;
	}

	#main .type_c input {
		margin-bottom: 3%;
		margin-right: 3%;
		margin-left: 3%;
		max-width: 50%;
	}

	#main .type_c select {
		width: 50%;
		margin-bottom: 3%;
		margin-right: 3%;
		margin-left: 3%;
	}

	.popup3.show .box {
		width: 86%;
	}

	.intro .ttl {
		font-size: 1.6rem;
		text-align: left;
	}

	.intro .person .flex01 {
		width: 90%;
    	margin: 4% auto;
	}

	.intro .person .flex02 {
		width: 100%;
	}

	.intro .person .name {
		text-align: center;
	}

	.intro .ttl {
		font-size: 1.4rem;
		margin-bottom: 4%;
	}

	.intro2 .history li {
		font-size: .9rem;
	}

	.intro2 {
		padding: 8%;
	}

	#main .pic {
		width: 100%;
	}

	.lum-lightbox-image-wrapper img {
		width: 90% !important;
		max-height: 70vh !important;
		object-fit: contain;
		margin: 0 auto;
	}

	.popup2.show .box i {
		font-size: 2rem;
	}

	.caution a {
		padding: 0;
		margin-bottom: 4%;
	}

	#main .infomation {
		margin-top: 6%;
		width: 100%;
		line-height: 1.4;
	}

	#commingsoon .ttl {
		width: 90%;
	}

	#commingsoon .date {
		font-size: 1.2rem;
	}

	#commingsoon .txt {
		font-size: 1.2rem;
	}

	#commingsoon .play {
		margin-top: 6%;
	}

	#ending .inner {
		width: 90%;
	}

	#ending .endmovie {
		width: 100%;
	}

	#ending .txt {
		margin-top: 2%;
	}

	#ending .title {
		font-size: 2.4rem;
		margin-bottom: 4%;
	}

	#ending .morettl {
		font-size: 1.5rem;
		line-height: 1.6;
	}

	#ending .moreVideoArea .singleVideo {
		width: 100%;
		margin-bottom: 10%;
	}

	#ending .moreVideoArea .singleVideo .info {
		min-height: auto;
	}

	#ending .ancate .info {
		margin-bottom: 6%;
	}

	#ending .ancate .btn {
		width: 80%;
	}

	#ending .f_logo img {
		width: 30%;
	}

	#omake .title {
		font-size: 2rem;
	}

	#omake .image {
		width: 100%;
	}

	#omake .memo {
		width: 100%;
	}

	#omakequiz {
		padding: 8% 0 140px;
	}

	#f_nav .box li {
		width: calc(100%/2);
	}

	#f_nav .box li a {
		padding: 8px 0;
	}

	#f_nav .box li:last-child {
		width: 100%;
	}

	.page_top {
		right: 10px;
		bottom: 160px;
	}

	#main #nav li:last-child {
		width: 100%;
	}

	#main .pic2 {
		width: 100%;
		margin: 4% 0 6%;
	}

	.caution {
		width: 100%;
	}

	#omake .block .chat {
		width: calc(100% - 120px);
		margin-right: 0;
	}

	#omake .block_reverse .chat {
		width: calc(100% - 120px);
		margin-left: 0px;
	}

	#omake .block {
		padding-bottom: 4%;
		margin-bottom: 4%;
	}

	#omake .block_reverse {
		padding-bottom: 4%;
		margin-bottom: 4%;
	}

	#contact .ancate .btn {
		width: 70%;
	}

	#contact .f_logo img {
		width: 40%;
    	margin: 8% auto 2%;
	}

	.youtubeInfo {
		width: 100%;
	}

	#ending .omakeArea .desc {
		font-size: 1rem;
		margin-bottom: 13%;
	}

	#ending .desc a {
		font-size: 1.5rem;
		padding-left: 0px;
		display: block;
		font-weight: bold;
	}

	#main #nav.omakeNav li {
		width: 48%;
	}

	#main #nav.omakeNav li:last-child {
		width: 100%;
	}

	#f_nav.omakefNav .box li {
		width: calc(100%/2);
	}

	#contact .ancate .btn {
		width: 100%;
		margin-bottom: 6%;
	}

	#f_nav.omakefNav .box li:last-child {
		width: 100%;
	}

	.popup.show .box {
		width: 90%;
		padding: 14px;
	}

	.voice-text-right {
		padding: 8px;
	}

	.popup.show .voice p.voice-text:last-child {
		text-align: left;
	}

	.liveImg {
		width: 50%;
	}

	#main .step {
		font-size: 1.3rem;
	}

	#main .formBox {
		padding: 20px;
		border: 5px #c20100 solid;
	}

	.liveComment {
		font-size: 1rem;
		    line-height: 1.4;
    padding: 4px 0;
	}

	#main .type_b p {
		margin-bottom: 10px;
	}

	


}