@charset "utf-8";
@import url("root.css");

/*root*/
/*------------------------------------------------------------*/
/* IT用語について                                         */
/*------------------------------------------------------------*/

.glossary_page {
	section.glossary {
		padding: 55px 0;

		@media screen and (max-width:820px) {
			padding-top: 30px;
		}

		.glossary_box {
			border-radius: 20px;
			text-align: center;

			ul {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				li {
					&.kana-group {
						width: 100%;
						background: none;
						padding: 0;
						box-shadow: none;
						margin-bottom: 55px;
						padding: 0;
						cursor: auto;

						>h3 {
							font-size: 2.2rem;
							margin-bottom: 15px;
							padding: 0;
							/* padding-bottom: 15px;
							border-bottom: 2px solid var(--deep-blue); */

							@media screen and (max-width:820px) {
								font-size: 1.8rem;
							}
							@media screen and (max-width:480px) {
								font-size: 1.6rem;
								/* padding-bottom: 10px; */
								margin-bottom: 10px;
							}

							&::after {
								display: none;

							}
						}

						&:hover {
							transform: translateY(0);
							box-shadow: none;

						}

					}

					width: calc(50% - 6px);
					background: white;
					border-radius: 8px;
					/* padding: 35px 55px; */
					text-align: left;
					/* background: #eef9fd; */
					padding: 20px 20px 20px;
					border-radius: 8px;
					box-shadow: 0px 6px 10px rgba(0, 0, 0, .16);
					margin-bottom: 10px;
					transition: all .1s;
					transform: translateZ(0);
					cursor: pointer;

					@media screen and (max-width:820px) {
						width: 100%;
					}

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

						border-radius: 4px;

						padding: 15px;
						margin-bottom: 6px;
					}

					&:hover {
						transform: translateY(3px);
						box-shadow: 0px 3px 6px rgba(0, 0, 0, .06);

					}

					@media screen and (max-width:820px) {
						&:active {
							transform: translateY(3px);
							box-shadow: 0px 3px 6px rgba(0, 0, 0, .06);

						}

						&:hover {
							box-shadow: 0px 6px 10px rgba(0, 0, 0, .16);
							transform: translateZ(0);

						}
					}

					/* &:last-child{
						margin-bottom: 0;
					} */

					h3,
					h4 {

						font-size: 1.3rem;
						letter-spacing: 0.04em;
						position: relative;
						/* padding-left: 15px; */
						line-height: 2.4rem;

						display: flex;
						align-items: flex-end;
						padding-right: 5%;

						@media screen and (max-width:820px) {
							margin: 0;
							padding: 0;
							padding-right: 8%;

						}

						@media screen and (max-width:480px) {
							font-size: 1rem;
							line-height: 1.6rem;
						}

						small {
							font-weight: 500;
							color: #414141;
						}

						i {
							color: var(--navy);
							font-size: 1.4rem;
							margin-right: 8px;
							padding-top: 0;
							padding-bottom: 3px;
							margin: 0;
							margin-right: 10px;

							@media screen and (max-width:480px) {
								font-size: 1rem;
								margin-right: 5px;
							}
						}

						strong {
							font-size: 125%;
							margin-right: 0.2rem;
							font-weight: 600;
						}

						/* &::before {
							position: absolute;
							content: "";
							width: 5px;
							height: 2.4rem;
							background: var(--deep-blue);
							left: 0;
							top: .2rem;
							margin: auto;
						} */
						&::after {
							font-family: FontAwesome;
							position: absolute;
							content: "\f067";
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
							font-weight: 500;
							font-size: 1.4rem;
							text-align: left;
							color: var(--navy);
						}

						&.open {
							&::after {
								position: absolute;
								content: "\f068";
							}

						}
					}

					.text {
						/* padding-left: 36px; */
						margin-top: 20px;
						padding-top: 15px;
						border-top: 2px dotted var(--navy);
						display: none;

						p {
							color: #414141;
							font-size: 1.3rem;
							line-height: 2.7rem;
							letter-spacing: 0.04em;
							font-weight: 500;

							@media screen and (max-width:480px) {
								font-size: 1.1rem;
								line-height: 2.4rem;
							}

							strong {
								font-size: 105%;
							}
						}

					}

				}
			}
		}
	}

}