@charset "UTF-8";



/* under_obj --------------------------------------------------------------- */
#under_obj,
#under_obj p,
#under_obj p img {
	width: 550px;
	height: 506px;
	}

#under_obj {
	position: absolute;
	left: 0;
	top: 330px;
	}

@media(max-width: 768px){
  #under_obj,
  #under_obj p,
  #under_obj p img {
    width: 350px;
    height: 293px;
    }
	
  #under_obj {
    top: 170px;
    }
	}



/* under_box --------------------------------------------------------------- */
.under_box .underRight {
	margin-bottom: 30px;
	}

	.under_box .underRight h2 span {
		display: inline-block;
		font-size: 55px;
		position: relative;
		top: 10px;
		}

	.under_box .underRight p#ap_1 {
		width: 75%;
		margin: 70px auto;
		}

	.under_box .underRight dl {
		border-top: solid 1px;
		padding: 30px 0;
		}

		.under_box .underRight dl dt {
			cursor: pointer;
			font-size: 22px;
			background-image: url(../../img/home/service/trg.png);
			background-position: right center;
			background-size: 15px 15px;
			}

			.under_box .underRight dl dt span {
				font-size: 16px;
				}

		.under_box .underRight dl dt.trg.active {
			background-image: url(../../img/home/service/trg_active.png);
			}

		.under_box .underRight dl dd {
			display: none;
			padding-top: 20px;
			}

@media(max-width: 768px){
  .under_box .underRight h2 span {
    font-size: 40px;
    }
	
	.under_box .underRight p#ap_1 {
		width: 100%;
		margin: 30px auto;
		}
	
  .under_box .underRight dl {
    padding: 20px 0;
    }
	
    .under_box .underRight dl dt {
      font-size: 18px;
      padding-right: 30px;
      }
	
      .under_box .underRight dl dt span {
        font-size: 14px;
        padding-top: 5px;
        }
	}



/* member --------------------------------------------------------------- */
.under_box .underRight .member {
  float: left;
	width: 210px;
  margin-right: 30px;
	}

.under_box .underRight .member:nth-of-type(3n) {
	margin-right: 0;
	}

	.member .trg {
		cursor: pointer;
		}

		.member .trg p:first-of-type {
			width: 100%;
			margin-bottom: 10px;
			}

			.member .trg p:first-of-type img {
				width: 100%;
				}

		.member .trg p:last-of-type {
			height: 100px;
			text-align: center;
			}

@media(max-width: 768px){
  .under_box .underRight .member {
    width: 48%;
    margin: 0 4% 20px 0;
    }
  
  .under_box .underRight .member:nth-of-type(2n) {
    margin-right: 0;
    }
  
  .under_box .underRight .member:nth-of-type(3),
  .under_box .underRight .member:nth-of-type(9),
  .under_box .underRight .member:nth-of-type(15),
  .under_box .underRight .member:nth-of-type(21),
  .under_box .underRight .member:nth-of-type(27),
  .under_box .underRight .member:nth-of-type(33) {
    margin-right: 4%;
    }
	
		.member .trg p:last-of-type {
			height: 60px;
			}
	}



/* modal --------------------------------------------------------------- */
.modal,
.modal .mask {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	}

.modal {
	display: none;
	z-index: 999999999;
	}

	.modal .mask {
		background-color: rgba(30,30,30,0.8);
		}

	.modal .detail {
		width: 90%;
		max-width: 900px;
		height: 500px;
		transform: translate(-50%,-50%);
		position: absolute;
		left: 50%;
		top: 50%;
		}

		.modal .detail .detailwrap {
			display: none;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 30px;
			overflow-y: scroll;
			text-align: left;
			
			background-color: #ffffff;
			}

			.modal .detail .detailwrap .de01 {
				width: 100%;
				max-width: 300px;
				margin: 0 auto 20px 0;
				text-align: left;
				}

			.modal .detail .detailwrap .de02 {
				}

				.modal .detail .detailwrap .detailscr .de02 p {
					margin-bottom: 1em;
					}

					.modal .detail .detailwrap .detailscr .de02 p a {
						display: inline-block;
						text-decoration: underline;
						}

		.modal .close {
			width: 50px;
			height: 50px;
			cursor: pointer;
			background-image: url(../../img/team/close.png);
			background-position: center center;
			background-size: 15px auto;
			position: absolute;
			right: 10px;
			top: 10px;
			}

@media(max-width: 768px){
	.modal .detail {
		height: 90%;
		}
	}



/* movie --------------------------------------------------------------- */
#movie {
	}

	#movie #movieWrap {
		width: 100%;
		position: relative;
		}

		#movie #movieWrap .youtube {
			width: 100%;
			}

			#movie #movieWrap .youtube iframe {
				width: 90%;
				padding: 0 5%;
				aspect-ratio: 16 / 9;
				
				}