@charset "utf-8";

body {
	font-family: Meiryo, Tahoma, Verdana, Arial, sans-serif;
	font-size: 18px;
	color:#7F7F7F;
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

div#top {
}

div#navibar {
	text-align:center;
	background-color:#FF7033;
}

div#main1 {
	background-color:cornflowerblue;
	margin-top:5px;
	text-align:center;
    border-top: 5px solid #626161;
    border-bottom: 5px solid #626161;
	padding-bottom:20px;
}
div#main4 {
	background-color:#FFF7CC;
	margin-top:5px;
    border-top: 5px solid #626161;
    border-bottom: 5px solid #626161;
	padding-bottom:20px;
	padding-left:20px;
}

div.login {
	text-align:center;
	margin: auto;
	background-color:#E4820A;
	width:250px;
	height:170px;
	border-radius: 25px;
	padding:10px;
}

div#main2 {
	padding-bottom:20px;
	padding-top:20px;
}

div#main3 {
}

div#footer {
	background-color:#626161;
	padding:10px;
	text-align:center;
	color:white;
	font-size: 12px;
}

p#heading {
	background-color:#A6A6A6;
	padding:4px;
	color:white;
}

p#lang {
	float:right;
}
h1 {
	font-size:32px;
}
h2 {
	font-size:24px;
}
.detailText {
	line-height:35px;
}
.lgtext {
	font-size: 42px;
	font-weight:bold;
	color:#EBE6E6;
	line-height: 40px
}
.lgtext2 {
	font-size: 24px;
	font-weight:bold;
	color:#EBE6E6;
}
.mdtext {
	font-size: 18px;
	color:#EBE6E6;
}
.mdBtext {
	font-size: 18px;
	color:#757575;
}
.lgbtext {
	font-size: 32px;
	font-weight:bold;
	color:#343333;
	line-height: 32px;
	text-align: center;
}
.mdtext2 {
	font-size: 16px;
	color:#EBE6E6;
}
.centerText {
	width: 650px;
	text-align: center;
	display: inline-block;
}

p.ltext {
	font-size: 24px;
	font-weight:bold;
	color: #EDE8E9;
}
.btext {
	font-weight:300;
}
.text20 {
	font-size: 20px;
}
.text12 {
	font-size: 12px;
}
.wtext {
	color:white;
}
.stext {
	font-size: 12px;
}
.aotext {
	color: #61b8ae;
}
.akatext {
	color:#740405;
}
.makkatext {
	color:#F40307;
}
.chatext {
	color: #e78f4b;
}
.graytext {
	color:#7F7F7F;	
}

table#features td {
	text-align:center;
	padding-left: 15px;
	padding-right: 15px;
}

td.four {
	width: 240px;	
}

/* fee table */

table.fee {
	margin: 0px auto; /* this centers table */
	border-collapse: collapse;
	border:1px solid #B8B8B8;
}

table.fee td,tr {
	padding: 10px;
	text-align:left;
	border:1px solid #B8B8B8;
}

table.fee th {
	padding: 10px;
	text-align:right;
	border:1px solid #B8B8B8;
}

/* invisible table */

table.invisible {
	margin: 0px auto; /* this centers table */
	border: none;
}

/* no inner border table */

table.noborder {
	margin: 0px auto; /* this centers table */
	border:1px solid #B8B8B8;
}

table.noborder td, th{
	padding: 5px;
	text-align:left;
	border:none;
}

td.bkorange {
	background-color:#e78f4b;	
	color:white;
}

td.bkgreen {
	background-color:#61b8ae;
	color:white;
}
td.bkwhite {
	background-color:white;	
}
th.bkorange {
	background-color:#e78f4b;
	color:white;
}

li{
  margin: 10px 0;
}

/* navigation bar */
#hamburger-toggle {
    display: none;
}
/* Style the hamburger icon label */
.hamburger-icon {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    font-size: 24px;
    color: black;
    padding: 10px;
}
ul.nav {
	display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FF7033;
}

li.nav {
    float: left;
	padding-right: 30px;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
@media screen and (max-width: 768px) {
    
	#logo {
		width: 250px;
	}
    /* Show hamburger icon and position it */
    .hamburger-icon {
        display: block;
        position: absolute;
        top: 5px;
        right: 15px;
    }

    /* Hide the navigation menu by default on mobile */
    ul.nav {
        display: none;
        width: 100%;
    }

    /* Remove floating and center text for list items */
    li.nav {
        float: none;
        width: 100%;
        text-align: center;
        padding-right: 0;
    }

    li.nav a {
        border-bottom: 1px solid #ff8c59; /* Add separator lines */
    }

    /* Show the menu when the hidden checkbox is checked */
    #hamburger-toggle:checked ~ ul.nav {
        display: block;
    }
	h1 {
		font-size:24px;
	}
	h2 {
		font-size:20px;
	}
	.lgtext {
		font-size: 28px;
		font-weight:bold;
		color:#EBE6E6;
		line-height: 40px
	}
	.lgtext2 {
		font-size: 18px;
		font-weight:bold;
		color:#EBE6E6;
	}
	.mdtext {
		font-size: 18px;
		color:#EBE6E6;
	}
	.mdBtext {
		font-size: 13px;
		color:#757575;
	}
	
	.lgbtext {
		font-size: 24px;
		font-weight:bold;
		color:#343333;
		line-height: 32px;
		text-align: center;
	}
	.mdtext2 {
		font-size: 16px;
		color:#EBE6E6;
	}
	p.ltext {
		font-size: 24px;
		font-weight:bold;
		color: #EDE8E9;
	}
	.text20 {
		font-size: 20px;
	}
	.text12 {
		font-size: 12px;
	}
	.stext {
		font-size: 12px;
	}
}

.active {
    background-color: #626161;
    color: white;
}

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #DBD1D1;
    color: black;
    padding: 8px 12px;
    text-decoration: none;
}
.imgcenter {
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.OrangeHeading {
	font-size: 20px;
	font-weight:900;
	background: linear-gradient(transparent 90%, #FF7033 30%);
}

.img1size {
	width: 1092px;
}
.kanjisize {
	width: 942px;
}
.g1size {
	width: 500px;
}
.g2size {
	width: 900px;
}
.SEsize {
	width: 929px;
}
.PBTsize {
	width: 924px;
}
.readsize {
	width: 952px;
}
.inst1size {
	width: 541px;
}
.inst2size {
	width: 847px;
}
.inst3size {
	width: 945px;
}

@media (max-width:480px) {
	.img1size {
		width: 100%;
	}
	.kanjisize {
		width: 100%;
	}
	.g1size {
		width: 100%;
	}
	.g2size {
		width: 100%;
	}
	.SEsize {
		width: 100%;
	}
	.PBTsize {
		width: 100%;
	}
	.readsize {
		width: 100%;
	}
	.inst1size {
		width: 100%;
	}
	.inst2size {
		width: 100%;
	}
	.inst3size {
		width: 100%;
	}
	.resptbl td {
		display:block;
	}
}

/* Basic styling for the form container */
.form-container {
    max-width: 900px; /* Sets a max width for desktop */
    margin: 0 auto;   /* Centers the form */
    padding: 20px;
}

/* Center-align titles */
.form-title, .form-subtitle {
    text-align: center;
}

.form-subtitle {
    color: #616060;
}

/* Spacing for each form group */
.form-group {
    margin-bottom: 1.5rem;
}

/* Style for labels */
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Full-width form inputs for responsiveness */
.form-group input[type="text"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Important: includes padding in the width */
}

/* Style for the submit button */
input[type="submit"] {
    padding: 12px 25px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}