@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    font-family: 'Noto Sans JP', sans-serif;
}

main,
.main  {
	max-width:1300px;
	width:100%;
	padding:0;
	margin:0 auto;
}

.footer {
	display:none;
}

/*.accordion-label::before,
.accordion-label::after {
	pointer-events:none;
}

input[type="checkbox"],
input[type="radio"] {
	position:relative;
	z-index:10;
}*/

.content-title {
    font-size:2.5rem;
    font-weight:bold;
    color:#1370C6;
	line-height:1.3;
	width:max-content;
	margin:0 auto 3rem;
	text-align:center;
	border-bottom:10px solid #FBFC00;
	padding:0.5rem;
}

.content-title::after {
    content: '';
    background-color: #FBFC00;
}

.title-container {
    width:100%;
    padding-top:1rem;

    .img-box {
        width:100%;
		text-align:center;
		
		img {
			width:15%;
			vertical-align:top;
		}
    }
	
	.text-center {
		text-align:center;
		font-size:0.9rem;
		font-weight:bold;
		background:rgb(255 255 255 / 0.8);
	}
}

.shindan-container {
	margin-top:3rem;
	
    .questions-container {
        width:40%;
		margin:auto;
        border: 1px solid #C7C7C7;

        .question-container {
            width: 100%;

            .question-title {
                color:#FFFFFF;
				font-size:1.2em;
                font-weight:bold;
                width:100%;
				background:#11C3CD;
				text-align:center;
				padding:2rem 1rem 0;
            }
			
			.img-box {
				width:100%;
				
				img {
					vertical-align:top;
					width:100%;
				}
			}
			
            .question-options {
                width:100%;
                color:#484848;
                font-weight:bold;
				padding:2rem;
            }
			
			.divide-box {
				display:table;
				
				.left-box,
				.right-box {
					display:table-cell;
					width:50%;
					vertical-align:top;
					
					.inner-box {
						width:max-content;
						margin:auto;
					}
				}
			}

            .question-option {
				width:max-content;
				
				input,
				label {
					display:inline-block;
					vertical-align:middle;
				}
				
                input[type="radio"] {
                    position: relative;
                    border: 1px solid #666666;
                    border-radius: 50%;
					width:0.8rem;
					height:0.8rem;
                }

                input[type="radio"]:checked {
                    /*background-color: white;*/
                }

                input[type="radio"]:checked::after {
                    content: "";
                    position: absolute;
					z-index:100;
                    margin: auto;
                    border-radius: 50%;
                    background-color: #0062D2;
					width:100%;
					height:100%;
                }

                label {
					font-size:1.2rem;
                    font-weight:bold;
                }
            }
        }
    }
}

.center-box {
	text-align:center;
	margin:2rem auto 3rem;
	
	.custom-button-with-arrow {
		color:#FFFFFF;
		background-color:#11C3CD;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
		text-decoration: none;
		border-radius:50vh;
		padding:1rem 3rem;
		border:none;
		cursor:pointer;

		.text-container,
		.icon-container	{
			display:inline-block;
			vertical-align:middle;
		}
		
		.text-container {
			font-size:1.5rem;
			font-weight:bold;
		}

		.icon-container {
			width:2rem;
			height:2rem;
		}
	}
}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(63 / 390 * 100vw);
    background-color: #0056B8;

    .footer-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(20 / 390 * 100vw);
		
		a {
			font-size:0.8rem;
			font-weight: bold;
			color:#FFFFFF;
			text-decoration:none;
		}
    }
}

@media only screen and (max-width: 1023px) {
	
	main.main,
	div.sidebar {
		margin:0;
		padding:0;
	}
	
}

@media only screen and (max-width: 999px) {
	
	.shindan-container {
		.questions-container {
			width:50%;
			
			.question-container {
				.divide-box {
					.left-box,
					.right-box {
						/*padding-left:1rem;
						padding-right:1rem;*/
					}
				}
			}
		}
	}
	
}

@media only screen and (max-width: 799px) {
	.shindan-container {
		.questions-container {
			width:60%;
		}
	}
}

@media only screen and (max-width: 699px) {
	.title-container {
		.img-box {
			img {
				width:25%;
			}
		}
	}
}

@media only screen and (max-width: 599px) {
	.content-title {
        font-size:2rem;
		border-bottom:7px solid #FBFC00;
    }
	
	.shindan-container {
		.questions-container {
			width:80%;
		}
	}
}

@media only screen and (max-width: 499px) {
	.content-title {
        font-size:1.5rem;
    }
	
	.title-container {
		padding-top:2rem;
		
		.text-center {
			font-size:0.7rem;
		}
		
		.img-box {
			img {
				width:30%;
			}
		}
		
		.title-image-container {
            .text-center {
                font-size: 0.7rem;
            }
		}
	}
	
	.shindan-container {
		.questions-container {
			width:95%;
		}
	}
	
	.footer-container {
		padding:2rem;
		display:block;
		align-items:normal;
		justify-content:normal;
		height:auto;
		gap:normal;
		
        .footer-links {
            display:block;
            align-items:normal;
            justify-content:normal;
            height:auto;
			gap:normal;
			
			a {
				display:inline-block;
				width:45%;
				text-align:center;
				padding:0.3rem 0;
			}
		}
	}
}