@charset "utf-8";

/* ----------------------------------------------------------------------------
	トップページ
	index.html
---------------------------------------------------------------------------- */
#content img,
#visual img{
	width:100%;
}

#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
}

#loading.disappear{
     display: none;   
}

#content nav#main_u_nav.active ul{
	transform: translate(0%, 13%);
}

@keyframes scrollAnime{
	0% {
		bottom: 15px;
		opacity: 0;
	}
	80% {
		bottom: 0px;
		opacity: 1;
	}
	100% {
		bottom: 0px;
		opacity: 0;
	}
}

#visual{
	width: 100%;
	height: auto;
	position: relative;
	text-align: center;
}
#visual::before{
	content: "";
	display: block;
	padding-top: 66.201%;
}
#visual #name{
	width: 39.5%;
    position: absolute;
    top: 9%;
	left: 50%;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	transform: translate(-50%, 20%);
	z-index: 3;
	opacity: 0;
}
#visual #bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	background: url(../../digitalmedia/img/dm_main_bg.jpg) top 74% center/100% auto no-repeat;
}
#visual #ph{
	width: 37%;
	position: absolute;
	bottom: -10%;
	left: 50%;
	transform: translate(-50%, 0%);
	opacity: 0;
}
#visual #copy{
	width: 70%;
	position: absolute;
	top: 49%;
	left: 50%;
	transform: translate(-50%, 0%);
	opacity: 0;
}
#visual #copy_sp1{
	width: 12%;
	position: absolute;
	opacity: 0;
}
#visual #copy_sp2{
	width: 12%;
	position: absolute;
	opacity: 0;
}
#visual p.note{
	width: 90%;
	position: absolute;
	bottom: 10px;
	right: 5%;
	text-align:right;
	color: #111;
	font-size: 0.75rem;
}
@media only screen and (min-width: 1500px) and (min-aspect-ratio: 16/9) {
	#visual{
		width: 100%;
		height: 100vh;
		position: relative;
	}
	#visual::before{
		content: none;
	}
	#visual #name{
		width: 560px;
		top: 6%;
		transform: translate(-50%, -63%);
	}
	#visual #bg{
		top: 0;
		left: 0;
		opacity: 0;
		background: url(../../digitalmedia/img/dm_main_bg.jpg) top 102% center/100% auto no-repeat;
	}
	#visual #ph{
		width: 40%;
		bottom: -10%;
		left: 50%;
		transform: translate(-50%, 0%);
	}
	#visual #copy{
		width: 70%;
        top: auto;
        bottom: 36%;
        left: 50%;
        transform: translate(-50%, -68%);
	}
	#visual p.note{
		text-shadow: 0 0 3px #FFF;
	}
}
@media only screen and (min-width: 1500px) and (max-aspect-ratio: 16/9) {
	#visual{
		width: 100%;
		height: 100vh;
		position: relative;
	}
	#visual::before{
		content: none;
	}
	#visual #name{
		width: 560px;
		top: 6%;
		transform: translate(-50%, -45%);
	}
	#visual #bg{
		background: url(../../digitalmedia/img/dm_main_bg.jpg) center center/100% auto no-repeat;
	}
	#visual #ph{
		width: 37%;
		bottom: -10%;
		left: 50%;
		transform: translate(-50%, 0%);
	}
	#visual #copy{
		width: 70%;
        top: auto;
        bottom: 36%;
        left: 50%;
        transform: translate(-50%, -68%);
	}
	#visual p.note{
		text-shadow: 0 0 3px #FFF;
	}
}
@media only screen and (min-width: 1250px) and (max-width: 1499px) {
	#visual::before{
		padding-top: 60.000% !important;
	}
	#visual #name{
		width: 38%;
        top: 6%;
        transform: translate(-50%, -13%);
	}
}
@media only screen and (max-width: 1099px) {
	#visual{
		width: 100%;
		height: auto;
		position: relative;
	}
}
@media only screen and (max-width: 768px) {
	#visual{
		width: 100%;
	}
	#visual::before{
		content: "";
		display: block;
		padding-top: 86.201%;
	}
	#visual #name{
		width: 55%;
		top: 6%;
		transform: translate(-50%, 30%);
	}
	#visual #bg{
		top: 0;
		left: 0;
		background: url(../../digitalmedia/img/dm_main_bg.jpg) top 60% center/100% auto no-repeat;
	}

	#visual #ph{
		width: 50%;
		bottom: -10%;
		transform: translate(-50%, -7%);
	}
	#visual #copy{
		width: 90%;
		top: 44%;
		transform: translate(-50%, -30%);
	}
	#visual p.note{
		bottom: 2%;
		right: 2%;
		font-size: 0.625rem;
	}
}
@media only screen and (max-width: 480px) {
	#visual{
		height: calc(100vh - 60px);
		box-sizing: border-box;
	}
	#visual::before{
		content: none;
	}
	#visual #name{
		width: 45%;
		top: 6%;
		transform: translate(-50%, -21%);
	}
	#visual #bg{
		background: url(../../digitalmedia/img/dm_main_bg_sp.jpg) bottom 5% center/110% auto no-repeat;
	}
	#visual #ph{
		width: 85%;
		bottom: -10%;
		transform: translate(-50%, -4%);
	}
	#visual #copy{
		display: none;
	}
	#visual #copy_sp1{
		position: absolute;
		bottom: 28%;
		right: 9%;
		opacity: 0;
	}
	#visual #copy_sp2{
		position: absolute;
		bottom: 4%;
		left: 6%;
		opacity: 0;
	}
	#visual p.note{
		bottom: 0%;
		right: 2%;
		font-size: 0.625rem;
	}
}
@media only screen and (max-width: 400px) {
	#visual #name{
		width: 50%;
		top: 6%;
		transform: translate(-50%, -1%);
	}
}
@media only screen and (max-width: 480px) and (max-height: 630px){
	#visual #name{
		width: 39%;
		top: 6%;
		transform: translate(-50%, -1%);
	}
}
@media only screen and (max-width: 480px) and (max-height: 739px){
	#visual #name{
		width: 140px;
		top: 6%;
		transform: translate(-50%, -1%);
	}
}
@media only screen and (max-width: 480px) and (min-height: 740px){
	#visual #name{
		width: 155px;
		top: 6%;
		transform: translate(-50%, -5%);
	}
	#visual #bg{
		background: url(../../digitalmedia/img/dm_main_bg_sp.jpg) bottom 5% center/110% auto no-repeat;
	}
	#visual #ph{
		width: 85%;
		bottom: -10%;
		transform: translate(-50%, -1%);
	}
	#visual #copy_sp1{
		position: absolute;
		bottom: 28%;
		right: 9%;
		opacity: 0;
	}
	#visual #copy_sp2{
		position: absolute;
		bottom: 4%;
		left: 6%;
		opacity: 0;
	}
}
@media only screen and (max-width: 480px) and (min-height: 780px){
	#visual #name{
		width: 200px;
		top: 6%;
		transform: translate(-50%, 10%);
	}
	#visual #bg{
		background: url(../../digitalmedia/img/dm_main_bg_sp.jpg) bottom 10% center/110% auto no-repeat;
	}
	#visual #ph{
		width: 85%;
		bottom: -10%;
		transform: translate(-50%, 5%);
	}
	#visual #copy_sp1{
		position: absolute;
		bottom: 28%;
		right: 9%;
		opacity: 0;
	}
	#visual #copy_sp2{
		position: absolute;
		bottom: 4%;
		left: 6%;
		opacity: 0;
	}
}


#about{
	width: 100%;
	height: auto;
	position: relative;
	text-align: center;
}
#about .in_box{
	padding: 0 0 150px 0;
}
#about h5{
	width: 4.1em;
	color: #d85140;
	font-size: 1.250rem;
	font-weight: bolder;
	letter-spacing: 0.1em;
	text-align: left;
	position: relative;
	font-family: Arial, Helvetica, "sans-serif";
}
#about h5::before{
	content: "";
	width: 100%;
	height: 2px;
	background: #d85140;
	position: absolute;
	bottom: 1px;
	left: 0;
}
#about h2{
	width: 100%;
	font-size: 2.125rem;
	font-weight: bolder;
	letter-spacing: 0.1em;
	text-align: left;
	line-height: 1.6;
	position: relative;
	padding: 1em 0 1em 0;
}
#about h4{
	width: 100%;
	font-size: 1.125rem;
	font-weight: bold;
	letter-spacing: 0.09em;
	text-align: left;
	line-height: 2.0;
}
@media only screen and (max-width: 1099px) {
	#about h5{
		font-size: 1.125rem;
	}
	#about h2{
		font-size: 1.875rem;
	}
	#about h4{
		font-size: 1.000rem;
	}
}
@media only screen and (max-width: 768px) {
	#about{
		padding: 100px 0 0 0;
	}
	#about .in_box{
		padding: 0 0 150px 0;
	}
	#about h5{
		font-size: 1.000rem;
	}
	#about h2{
		font-size: 1.625rem;
	}
	#about h4{
		font-size: 0.938rem;
	}
	#about h4 br{
		display: none;
	}
}
@media only screen and (max-width: 480px) {
	#about{
		padding: 80px 0 0 0;
	}
	#about .in_box{
		padding: 0 0 80px 0;
	}
	#about h5{
		font-size: 0.875rem;
	}
	#about h2{
		font-size: 1.375rem;
	}
	#about h2 br{
		display: none;
	}
	#about h4{
		font-size: 0.875rem;
	}
}


#about .check_area{
	width: 100%;
	position: relative;
	padding-top: 100px;
    margin-top: -100px;
}
#about .check_area .check{
	width: 100%;
	background: url(../img/bg_e01.jpg) top center/ cover repeat;
	margin: 0 auto 0 auto;
	position: relative;
	padding: 0 0 0 0;
}
#about .check_area .check .in_box{
	margin: 0 auto 70px auto;
	position: relative;
	padding: 100px 0 100px 0;
}
#about .check_area .check .icon{
	width: 200px;
	position: absolute;
	top: -60px;
	left: 0;
}
#about .check_area .check .grahp{
	width: 100%;
}
#about .check_area .check h3{
	width: 100%;
	text-align: left;
	color: #d85140;
	font-size: 1.625rem;
	font-weight: bolder;
	letter-spacing: 0.1em;
	padding: 0 0 1.2em 0;
}
#about .check_area .check h4{
	width: 100%;
	text-align: left;
	color: #111;
	font-size: 1.625rem;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.05em;
	padding: 0.7em 0 0 0;
}
#about .check_area .check h4 span{
	color: #d85140;
	font-weight: bolder;
}
#about .check_area .check .ph{
	width: 370px;
    position: absolute;
    top: -210px;
    right: -180px;
}
#about .check_area .check .ph2{
	width: 210px;
    position: absolute;
    bottom: 190px;
    left: -200px;
}
#about .check_area .check .ph3{
	width: 160px;
    position: absolute;
    bottom: -70px;
    right: 110px;
}

@media only screen and (max-width: 1099px) {
	#about .check_area{
		padding-top: 100px;
		margin-top: -100px;
	}
	#about .check_area .check{
		background: url(../img/bg_e01.jpg) top center/ cover repeat;
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
	}
	#about .check_area .check .in_box{
		margin: 0 auto 70px auto;
		padding: 80px 0 80px 0;
	}
	#about .check_area .check .icon{
		width: 20%;
        top: -8%;
	}
	#about .check_area .check h3{
		font-size: 1.412rem;
	}
	#about .check_area .check h4{
		font-size: 2.4vw;
	}
	#about .check_area .check .ph{
		width: 36%;
        top: -27%;
        right: -15%;
	}
	#about .check_area .check .ph2{
		width: 15%;
        bottom: 28%;
        left: -8%;
	}
	#about .check_area .check .ph3{
		width: 16%;
        bottom: -9%;
        right: 3%;
	}
}
@media only screen and (max-width: 768px) {
	#about .check_area{
		padding-top: 80px;
		margin-top: -80px;
	}
	#about .check_area .check{
		background: url(../img/bg_e01.jpg) top center/ cover repeat;
		margin: 0 auto 0 auto;
		padding: 0 0 0 0;
	}
	#about .check_area .check .in_box{
		margin: 0 auto 70px auto;
		padding: 80px 0 80px 0;
		box-sizing: border-box;
	}

	#about .check_area .check .icon{
		width: 20%;
        top: -8%;
	}
	#about .check_area .check h3{
		font-size: 1.412rem;
	}
	#about .check_area .check h4{
		font-size: 1.125rem;
	}
	#about .check_area .check .ph{
		width: 36%;
        top: -25%;
        right: -15%;
	}
	#about .check_area .check .ph2{
		width: 15%;
        bottom: 28%;
        left: -8%;
	}
	#about .check_area .check .ph3{
		width: 16%;
        bottom: -9%;
        right: 3%;
	}
}
@media only screen and (max-width: 480px) {
	#about .check_area .check .icon{
		width: 28%;
        top: -6%;
	}

	#about .check_area .check h3{
		font-size: 1.250rem;
	}
	#about .check_area .check h4{
		font-size: 1.125rem;
	}
	
	#about .check_area .check .ph{
		width: 36%;
        top: -15%;
        right: -15%;
	}
	#about .check_area .check .ph2{
		width: 15%;
        bottom: 41%;
        left: -15%;
	}
}


#about .faculty{
	width: 100%;
	height: auto;
	position: relative;
	text-align: center;
}
#about .faculty .in_box{
	padding: 50px 0 80px 0;
}

#about .faculty .in_box .icon{
	width: 220px;
	position: absolute;
	top: -100px;
	left: 0;
}
#about .faculty .in_box h3{
	width: 100%;
	font-size: 1.875rem;
	font-weight: bolder;
	letter-spacing: 0.1em;
	text-align: left;
	line-height: 1.6;
	position: relative;
	padding: 0 0 0.8em 0;
}
#about .faculty .in_box h3.center{
	text-align: center;
}
#about .faculty .in_box p{
	padding: 0 0 2.5em 0;
}
#about .faculty .in_box .risou{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
}
#about .faculty .in_box .risou .img1{
	width: 29%;
	padding: 12% 0 0 0;
}
#about .faculty .in_box .risou .img2{
	width: 46%;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -18.5%;
}
#about .faculty .in_box .risou .img3{
	width: 29%;
	padding: 12% 0 0 0;
}
#about .faculty .in_box i{
	width: 60px;
	margin: 0 auto;
	padding: 50px 0;
	display: block;
}

#about .faculty ul.ph {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	padding: 0 0 30px 0;
}
#about .faculty ul.ph li{
	width: calc((100% / 3) - 20px);
	position: relative;
	padding: 0 0 30px 0;
}
#about .faculty ul.ph li figure{
	width: 100%;
	position: relative;
	padding: 0 0 0 0;
}
#about .faculty ul.ph li p{
	width: 100%;
	text-align: center;
	position: relative;
	padding: 1.0em 0 0 0;
}

@media only screen and (max-width: 1099px) {
	#about .faculty .in_box{
		padding: 30px 0 80px 0;
	}

	#about .faculty .in_box .icon{
		width: 22%;
		top: -6%;
		left: 0;
	}
	#about .faculty .in_box h3{
		font-size: 1.625rem;
	}
	#about .faculty .in_box .risou .img1{
		width: 29%;
		padding: 12% 0 0 0;
	}
	#about .faculty .in_box .risou .img2{
		width: 46%;
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 0 0 -18.5%;
	}
	#about .faculty .in_box .risou .img3{
		width: 29%;
		padding: 12% 0 0 0;
	}
	#about .faculty .in_box i{
		width: 50px;
		padding: 40px 0;
	}

	#about .faculty ul.ph {
		padding: 0 0 30px 0;
	}
	#about .faculty ul.ph li{
		width: calc((100% / 3) - 20px);
		padding: 0 0 30px 0;
	}
	#about .faculty ul.ph li p{
		padding: 0.8em 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	#about .faculty .in_box{
		padding: 30px 0 50px 0;
	}

	#about .faculty .in_box h3{
		font-size: 1.250rem;
	}
	#about .faculty .in_box .risou .img1{
		width: 29%;
		padding: 12% 0 0 0;
	}
	#about .faculty .in_box .risou .img2{
		width: 46%;
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 0 0 -18.5%;
	}
	#about .faculty .in_box .risou .img3{
		width: 29%;
		padding: 12% 0 0 0;
	}
	#about .faculty .in_box i{
		width: 30px;
		padding: 30px 0;
	}

	#about .faculty ul.ph {
		padding: 0 0 30px 0;
	}
	#about .faculty ul.ph li{
		width: calc((100% / 2) - 10px);
		padding: 0 0 20px 0;
	}
	#about .faculty ul.ph li p{
		padding: 0.4em 0 0 0;
	}
}
@media only screen and (max-width: 480px) {
	#about .faculty .in_box .icon{
		width: 30%;
        top: -3%;
	}
	#about .faculty .in_box{
		padding: 30px 0 50px 0;
	}

	#about .faculty .in_box h3{
		font-size: 1.125rem;
	}
	#about .faculty .in_box .risou .img1{
		width: 48%;
		padding: 0 0 0 0;
		order: 1;
	}
	#about .faculty .in_box .risou .img2{
		width: 80%;
		position: relative;
		top: auto;
		left: auto;
		margin: 0 auto 0 auto;
		order: 3;
	}
	#about .faculty .in_box .risou .img3{
		width: 48%;
		padding: 0 0 0 0;
		order: 2;
	}
	#about .faculty .in_box i{
		width: 30px;
		padding: 30px 0;
	}

	#about .faculty ul.ph {
		padding: 0 0 30px 0;
	}
	#about .faculty ul.ph li{
		width: calc((100% / 2) - 10px);
		padding: 0 0 20px 0;
	}
	#about .faculty ul.ph li p{
		padding: 0.4em 0 0 0;
	}
}


#point{
	width: 100%;
	height: auto;
	position: relative;
	text-align: center;
	background: #f5f2e9;
}
#point .in_box{
	padding: 120px 0 50px 0;
}
#point .in_box h3 {
	width: 220px;
	position: absolute;
	top: -30px;
    left: -30px;
}
#point ul {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	z-index: 3;
}
#point ul li{
	width: 50%;
	position: relative;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 0 0 70px 80px;
	box-sizing: border-box;
}
#point ul li h5{
	position: absolute;
	top: 10%;
	left: 0;
}
#point ul li:nth-child(1) h5{
	width: 33px;
}
#point ul li:nth-child(2) h5{
	width: 48px;
}
#point ul li:nth-child(3) h5{
	width: 48px;
}
#point ul li:nth-child(4) h5{
	width: 48px;
}
#point ul li h4{
	font-size: 1.375rem;
	font-weight: bold;
	text-align: left;
	line-height: 1.6;
	color: #111;
}
#point ul li h4 span{
	font-weight: bold;
	color: #d85140;
	text-decoration: underline;
}
@media only screen and (max-width: 1099px) {
	#point .in_box{
		padding: 80px 0 50px 0;
	}
	#point .in_box h3 {
		width: 22%;
		top: -6%;
		left: 0%;
	}

	#point ul li{
		width: 100%;
		padding: 0 0 60px 7%;
		box-sizing: border-box;
		align-items: center;
	}
	#point ul li h5{
		position: absolute;
		top: -10%;
		left: 0;
	}
	#point ul li:nth-child(1) h5{
		width: 3%;
	}
	#point ul li:nth-child(2) h5{
		width: 4.4%;
	}
	#point ul li:nth-child(3) h5{
		width: 4.4%;
	}
	#point ul li:nth-child(4) h5{
		width: 4.4%;
	}
	
	#point ul li h4{
		font-size: 1.250rem;
	}
	#point ul li h4 br{
		display: none;
	}
}
@media only screen and (max-width: 768px) {
	#point .in_box{
		padding: 50px 0 40px 0;
	}
	#point .in_box h3 {
		width: 22%;
		top: -6%;
		left: 0%;
	}

	#point ul li{
		width: 100%;
		padding: 0 0 30px 7%;
	}
	#point ul li h5{
		position: absolute;
		top: 10%;
		left: 0;
	}
	#point ul li:nth-child(1) h5{
		width: 3%;
	}
	#point ul li:nth-child(2) h5{
		width: 4.4%;
	}
	#point ul li:nth-child(3) h5{
		width: 4.4%;
	}
	#point ul li:nth-child(4) h5{
		width: 4.4%;
	}
	
	#point ul li h4{
		font-size: 1.125rem;
	}
}
@media only screen and (max-width: 480px) {
	#point .in_box{
		padding: 50px 0 40px 0;
	}
	#point .in_box h3 {
		width: 30%;
        top: -5%;
		left: 0%;
	}

	#point ul li{
		width: 100%;
		padding: 0 0 30px 7%;
	}
	#point ul li h5{
		position: absolute;
		top: 10%;
		left: 0;
	}
	#point ul li:nth-child(1) h5{
		width: 3%;
	}
	#point ul li:nth-child(2) h5{
		width: 4.4%;
	}
	#point ul li:nth-child(3) h5{
		width: 4.4%;
	}
	#point ul li:nth-child(4) h5{
		width: 4.4%;
	}
	
	#point ul li h4{
		font-size: 1.000rem;
	}
}



#curriculum{
	width: 100%;
	height: auto;
	position: relative;
	text-align: center;
	padding-top: 150px;
	margin-top: -150px;
}
#curriculum .in_box{
	padding: 120px 0 50px 0;
}
#curriculum .in_box h3 {
	width: 220px;
	position: absolute;
	top: -30px;
    left: -30px;
}

#curriculum .in_box .over{
	width: 100%;
	position: relative;
	display: block;
	line-height: 0;
}
#curriculum .in_box .inner{
	width: 100%;
	position: relative;
	display: block;
	line-height: 0;
}
#curriculum .in_box .inner .grahp{
	width: calc(100%);
}
@media only screen and (max-width: 1099px) {
	#curriculum .in_box{
		padding: 70px 0 50px 0;
	}
	#curriculum .in_box h3 {
		width: 22%;
		position: absolute;
		top: -6%;
		left: 0;
	}
}
@media only screen and (max-width: 768px) {
	#curriculum .in_box{
		padding: 70px 0 50px 0;
	}
	#curriculum .in_box h3 {
		width: 22%;
		position: absolute;
		top: -4%;
		left: 0;
	}
	#curriculum .in_box .over{
		width: 100%;
		position: relative;
		display: block;
		line-height: 0;
	}
	#curriculum .in_box .inner{
		width: 100%;
		position: relative;
		display: block;
		line-height: 0;
	}
	#curriculum .in_box .inner .grahp{
		width: calc(100%);
	}
}
@media only screen and (max-width: 480px) {
	#curriculum .in_box{
		padding: 70px 0 50px 0;
	}
	#curriculum .in_box h3 {
		width: 30%;
		position: absolute;
		top: -4%;
		left: 0;
	}
	
	#curriculum .in_box .over{
		width: 100%;
		height: 500px;
		overflow: auto;
		touch-action: manipulation;
	}
	#curriculum .in_box .inner{
		width: 670px;
		height: 500px;
		display:flex;
		flex-wrap: wrap;
		align-items: flex-start;
		box-sizing: border-box;
	}
	#curriculum .in_box .inner .grahp{
		width: 100%;;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		box-sizing: border-box;
	}
}


#carousel{
	width: 100%;
	position: relative;
	margin: 10px 0 90px 0;
}
@media only screen and (max-width: 1099px) {
	#carousel{
		margin: 10px 0 90px 0;
	}
}
@media only screen and (max-width: 768px) {
	#carousel{
		margin: 10px 0 60px 0;
	}
}
@media only screen and (max-width: 480px) {
	#carousel{
		margin: 0 0 60px 0;
	}
}

#pickup{
	width: 100%;
	position: relative;
	margin: 70px 0 0 0;
	z-index: 1;
}
#pickup .in_box{
	box-sizing: border-box;
	padding: 120px 0 70px 100px;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#pickup::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0;
	right: 0;
    left: calc(50% - 475px);
	background-color: rgba(240, 130, 0, 0.8);
	border-radius: 20px 0 0 20px;
}
#pickup h3 {
	width: 350px;
	position: absolute;
	top: -30px;
    left: 50%;
	margin: 0 0 0 -120px;
}
#pickup .unit {
	width: 47%;
}
#pickup .unit figure{
	width: 100%;
}
#pickup .unit h4{
	width: 100%;
	text-align: left;
	font-size: 1.5000rem;
	font-weight: bold;
	color: #FFF;
	letter-spacing: 0.09em;
	padding: 0.7em 0 0.5em 0;
}
#pickup .unit p{
	text-align: left;
	font-size: 1.125rem;
	font-weight: bold;
}

@media only screen and (max-width: 1099px) {
	#pickup{
		margin: 70px 0 0 0;
	}
	#pickup .in_box{
		box-sizing: border-box;
		padding: 80px 0 50px 60px;
	}
	#pickup::before {
		left: calc(50% - 45%);
	}
	#pickup h3 {
		width: 35%;
		top: -6%;
		left: 50%;
		margin: 0 0 0 -12%;
	}
	#pickup .unit {
		width: 47%;
	}
	#pickup .unit h4{
		font-size: 1.412rem;
	}
	#pickup .unit p{
		font-size: 1.000rem;
	}
}
@media only screen and (max-width: 768px) {
	#pickup{
		margin: 50px 0 0 0;
	}
	#pickup .in_box{
		box-sizing: border-box;
		padding: 40px 0 30px 40px;
	}
	#pickup h3 {
		width: 35%;
		top: -12%;
		left: 50%;
		margin: 0 0 0 -15%;
	}
	#pickup .unit {
		width: 47%;
	}
	#pickup .unit h4{
		font-size: 1.250rem;
	}
	#pickup .unit p{
		font-size: 0.938rem;
	}
}
@media only screen and (max-width: 480px) {
	#pickup{
		margin: 50px 0 0 0;
	}
	#pickup .in_box{
		box-sizing: border-box;
		padding: 50px 0 30px 10px;
	}
	#pickup h3 {
		width: 45%;
        top: -4%;
        left: 50%;
        margin: 0px 0 0 -22%;
	}
	#pickup .unit {
		width: 100%;
		padding: 0 0 20px 0;
	}
	#pickup .unit h4{
		font-size: 1.125rem;
	}
	#pickup .unit p{
		font-size: 0.875rem;
	}
}


#message{
	width: 100%;
	position: relative;
	margin: -50px 0 60px 0;
	z-index: 2;
}
#message .in_box{
	box-sizing: border-box;
	padding: 120px 70px 70px 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#message::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
    right: calc(50% - 475px);
	background: url(../img/bg_messe.png) center center/900px auto repeat;
	border-radius: 0 0 0 0;
	z-index: -1;
}
#message::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
    right: calc(50% - 475px);
	border-top: #d85140 1px solid;
	border-right: #d85140 1px solid;
	border-bottom: #d85140 1px solid;
	box-sizing: border-box;
	margin: 20px;
	opacity: 0.5;
	z-index: 0;
}
#message h3 {
	width: 100%;
	text-align: left;
	font-size: 1.875rem;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #d85140;
	padding: 0 0 1em 0;
}
#message .clm {
	width: 46%;
}
#message .clm:nth-child(2) {
	width: 48%;
}
#message .clm .prof{
	width: 100%;
}
#message .clm .prof figure{
	width: 100%;
}
#message .clm .prof .name{
	width: 100%;
	text-align: left;
	font-size: 1.412rem;
	font-weight: bold;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	padding: 1em 0 0.6em 0;
}
#message .clm .prof .name small{
	font-size: 0.813em;
	font-weight: bold;
	padding: 0 0 0 0.7em;
}
#message .clm .prof p{
	width: 100%;
	text-align: left;
	font-size: 0.875rem;
	line-height: 1.8;
	padding: 0 0 0 0 !important;
}
#message .clm p{
	padding: 0 0 1em 0;
}

@media only screen and (max-width: 1099px) {
	#message{
		margin: -20px 0 60px 0;
	}
	#message .in_box{
		padding: 80px 50px 50px 0;
	}
	#message::before {
		right: calc(50% - 45%);
	}
	#message::after {
		right: calc(50% - 45%);
		margin: 20px;
	}
	#message h3 {
		font-size: 1.625rem;
	}
	#message .clm {
		width: 46%;
	}
	#message .clm:nth-child(2) {
		width: 48%;
	}
	#message .clm .prof .name{
		font-size: 1.375rem;
	}

	#message .clm .prof p{
		font-size: 0.875rem;
	}
}
@media only screen and (max-width: 768px) {
	#message{
		margin: -5px 0 40px 0;
	}
	#message .in_box{
		padding: 40px 30px 40px 0;
	}
	#message::before {
		right: calc(50% - 45%);
	}
	#message::after {
		right: calc(50% - 45%);
		margin: 15px;
	}
	#message h3 {
		font-size: 1.412rem;
	}
	#message .clm {
		width: 46%;
	}
	#message .clm:nth-child(2) {
		width: 48%;
	}
	#message .clm .prof .name{
		font-size: 1.250rem;
	}

	#message .clm .prof p{
		font-size: 0.813rem;
	}
}
@media only screen and (max-width: 480px) {
	#message{
		margin: 15px 0 40px 0;
	}
	#message .in_box{
		padding: 40px 30px 40px 0;
	}
	#message::before {
		right: calc(50% - 45%);
	}
	#message::after {
		right: calc(50% - 45%);
		margin: 15px;
	}
	#message h3 {
		font-size: 1.375rem;
		letter-spacing: 0.05em;
	}
	#message .clm {
		width: 100%;
		padding: 0 0 20px 0;
	}
	#message .clm:nth-child(2) {
		width: 100%;
	}
	#message .clm .prof .name{
		font-size: 1.125rem;
	}

	#message .clm .prof p{
		font-size: 0.750rem;
	}
}
@media only screen and (max-width: 330px) {
	#message h3 {
		font-size: 1.250rem;
		letter-spacing: 0.05em;
	}
}

#chigai{
	width: 100%;
	position: relative;
	margin: 70px 0 60px 0;
	z-index: 5;
}
#chigai .in_box{
	box-sizing: border-box;
	padding: 70px 0 70px 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#chigai .in_box .ph{
	width: 220px;
    position: absolute;
    top: -120px;
    right: 120px;
}
#chigai .in_box .ph2{
	width: 140px;
    position: absolute;
    top: 150px;
    right: -50px;
}
#chigai .in_box .ph3{
	width: 180px;
    position: absolute;
    bottom: 260px;
    left: -210px;
}

#chigai .in_box h3{
	text-align: left;
	font-size: 2.000rem;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #d85140;
	padding: 0 0 1.0em 0;
}
#chigai .in_box h3 span{
	font-weight: bold;
	color: #006fbc;
}
#chigai .in_box h5{
	text-align: left;
	font-size: 1.125rem;
	font-weight: bold;
	letter-spacing: 0.09em;
	line-height: 1.6;
	color: #111;
	padding: 0 0 0 0;
}
#chigai .in_box h5 span{
	font-weight: bold;
	color: #d85140;
}
#chigai .in_box h5 span.f2{
	color: #006fbc;
}

#chigai .ex{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	padding: 0 0 0 0;
	margin: 60px 0 0 0;
}
#chigai .ex::after {
	content: "";
	position: absolute;
	left: 50%;
	top: auto;
	bottom: 0;
	border-left: 1px dashed #555;
	height: calc(100% - 90px);
}

#chigai .ex h4{
	width: 100%;
	text-align: left;
	font-size: 1.500rem;
	font-weight: bold;
	letter-spacing: 0.09em;
	color: #111;
	padding: 0 0 1.0em 0;
}
#chigai .ex h4 span{
	font-weight: bold;
	color: #8d8e8e;
}

#chigai .ex .clm{
	width: 46%;
}
#chigai .ex .clm .info{
	width: 100%;
	text-align: left;
	font-size: 1.250rem;
	font-weight: bolder;
	line-height: 1.6;
	letter-spacing: 0.09em;
	color: #d85140;
	padding: 0 0 0.5em 0;
}
#chigai .ex .clm.f2 .info{
	color: #006fbc;
}
#chigai .ex .clm .info i{
	width: 100%;
	display: block;
	padding: 7px 0 0 0;
}
#chigai .ex .clm ul{
	width: 100%;
	padding: 0 0 20px 10px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	box-sizing: border-box;
}
#chigai .ex .clm ul li{
	width: 100%;
	padding: 0 0 0 0;
	font-size: 1.000rem;
	font-weight: bold;
	position: relative;
	line-height: 1.5;
	margin: 0 0 0.4em 0;
	text-align: left;
}
#chigai .ex .clm ul li::before{
	content: "●";
	color: #d85140;
	padding: 0 0.2em 0 0;
}
#chigai .ex .clm.f2 ul li::before{
	color: #006fbc;
}
#chigai .ex .clm a.link{
	width: 13em;
	font-size: 1.125rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.0;
	color: #FFF;
	padding: 0.7em 3.5em 0.7em 2.5em;
	background: #006fbc url(../../digitalmedia/img/icon_deteil2.png) center right 2em/15px auto no-repeat;
	border-radius: 30px;
	display: block;
	overflow: hidden;
	margin: 10px auto 40px auto;
}



#chigai .field{
	width: 100%;
	position: relative;
}
#chigai .field .in_box{
	box-sizing: border-box;
	padding: 70px 50px 70px 50px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	box-sizing: border-box;
}
#chigai .field::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0;
	left: 0;
    right: calc(50% - 475px);
	background-color: #f5f2e9;
	border-radius: 0 20px 20px 0;
}

#chigai .field .left{
	width: 45%;
}
#chigai .field .right{
	width: 55%;
}
#chigai .field h3{
	width: 100%;
	text-align: left;
	font-size: 1.412rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #d85140;
	padding: 0 0 1em 0;
}
#chigai .field ul{
	width: 100%;
	padding: 0 0 20px 10px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	box-sizing: border-box;
}
#chigai .field ul li{
	width: 100%;
	padding: 0 0 0 0;
	font-size: 1.250rem;
	font-weight: bold;
	position: relative;
	line-height: 1.5;
	margin: 0 0 0.6em 0;
	text-align: left;
}
#chigai .field ul li::before{
	content: "◉";
	color: #d85140;
	padding: 0 0.2em 0 0;
}


#chigai .commingsoon{
	width: 100%;
	position: relative;
	margin: -50px 0 0 0;
}
#chigai .commingsoon .in_box{
	box-sizing: border-box;
	padding: 70px 0 70px 50px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#chigai .commingsoon::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0;
	right: 0;
    left: calc(50% - 475px);
	background-color: #d85140;
	border-radius: 20px 0 0 20px;
	opacity: 0.5;
}

#chigai .commingsoon .ttl_area {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 0 40px 0;
}
#chigai .commingsoon .ttl_area h3{
	text-align: left;
	font-size: 2.000rem;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #FFF;
	padding: 0 1em 0 0;
}
#chigai .commingsoon .ttl_area .comming{
	width: auto;
	font-size: 2.25rem;
	font-weight: bolder;
	letter-spacing: 0.15em;
	color: #fbed21;
	font-family: Arial, Helvetica, "sans-serif";
}
#chigai .commingsoon p{
	font-size: 1.125rem;
	line-height: 1.8;
	letter-spacing: 0.09em;
}
@media only screen and (max-width: 1099px) {
	#chigai{
		margin: 70px 0 60px 0;
	}
	#chigai .in_box{
		padding: 70px 0 70px 0;
	}
	#chigai .in_box .ph{
		width: 22%;
		top: -11%;
        right: 11%;
	}
	#chigai .in_box .ph2{
		width: 14%;
		top: 15%;
        right: -6%;
	}
	#chigai .in_box .ph3{
		width: 18%;
		bottom: -2%;
        left: -9%;
	}

	#chigai .in_box h3{
		font-size: 1.875rem;
	}
	#chigai .in_box h5{
		font-size: 1.000rem;
	}

	#chigai .ex{
		margin: 60px 0 0 0;
	}
	#chigai .ex::after {
		left: 50%;
		height: calc(100% - 90px);
	}

	#chigai .ex h4{
		font-size: 1.375rem;
	}

	#chigai .ex .clm{
		width: 46%;
	}
	#chigai .ex .clm .info{
		font-size: 1.125rem;
	}
	#chigai .ex .clm .info br{
		display: none;
	}
	#chigai .ex .clm .info i{
		padding: 7px 0 0 0;
	}
	#chigai .ex .clm ul{
		padding: 0 0 20px 10px;
	}
	#chigai .ex .clm ul li{
		font-size: 0.938rem;
	}

	#chigai .ex .clm a.link{
		width: 13em;
		font-size: 1.000rem;
		padding: 0.7em 3.5em 0.7em 2.5em;
		background: #006fbc url(../../digitalmedia/img/icon_deteil2.png) center right 2em/15px auto no-repeat;
		margin: 10px auto 40px auto;
	}

	#chigai .field .in_box{
		padding: 50px 40px 50px 40px;
	}
	#chigai .field::before {
		right: calc(50% - 45%);
	}

	#chigai .field .left{
		width: 100%;
		padding: 0 0 20px 0;
	}
	#chigai .field .right{
		width: 100%;
	}
	#chigai .field h3{
		font-size: 1.375rem;
	}
	#chigai .field ul{
		padding: 0 0 20px 10px;
	}
	#chigai .field ul li{
		font-size: 1.125rem;
	}
	#chigai .field ul li br{
		display: none;
	}


	#chigai .commingsoon{
		margin: -30px 0 0 0;
	}
	#chigai .commingsoon .in_box{
		padding: 50px 0 50px 30px;
	}
	#chigai .commingsoon::before {
		left: calc(50% - 45%);
	}

	#chigai .commingsoon .ttl_area {
		padding: 0 0 40px 0;
	}
	#chigai .commingsoon .ttl_area h3{
		font-size: 1.875rem;
	}
	#chigai .commingsoon .ttl_area .comming{
		width: auto;
		font-size: 1.875rem;
	}
	#chigai .commingsoon p{
		font-size: 1.000rem;
	}
}
@media only screen and (max-width: 768px) {
	#chigai{
		margin: 50px 0 40px 0;
	}
	#chigai .in_box{
		padding: 50px 0 50px 0;
	}
	#chigai .in_box .ph{
		width: 22%;
		top: -5%;
        right: 11%;
	}
	#chigai .in_box .ph2{
		width: 14%;
        top: 0%;
        right: -6%;
	}
	#chigai .in_box .ph3{
		width: 18%;
		bottom: -2%;
        left: -9%;
		display: none;
	}

	#chigai .in_box h3{
		font-size: 1.625rem;
		line-height: 1.5;
	}
	#chigai .in_box h5{
		font-size: 0.938rem;
	}

	#chigai .ex{
		margin: 40px 0 0 0;
	}
	#chigai .ex::after {
		content: none;
		left: 50%;
		height: calc(100% - 30px);
	}

	#chigai .ex h4{
		font-size: 1.250rem;
	}

	#chigai .ex .clm{
		width: 100%;
		padding: 0 0 20px 0;
	}
	#chigai .ex .clm .info{
		font-size: 1.000rem;
	}
	#chigai .ex .clm .info br{
		display: none;
	}
	#chigai .ex .clm .info i{
		padding: 7px 0 0 0;
	}
	#chigai .ex .clm ul{
		padding: 0 0 20px 0;
	}
	#chigai .ex .clm ul li{
		font-size: 0.875rem;
	}

	#chigai .ex .clm a.link{
		width: 100%;
		font-size: 0.938rem;
		padding: 0.7em 3.5em 0.7em 2.5em;
		background: #006fbc url(../../digitalmedia/img/icon_deteil2.png) center right 2em/15px auto no-repeat;
		margin: 10px auto 40px auto;
		box-sizing: border-box;
		
	}

	#chigai .field .in_box{
		padding: 40px 30px 40px 30px;
	}

	#chigai .field .left{
		width: 100%;
		padding: 0 0 20px 0;
	}
	#chigai .field .right{
		width: 100%;
	}
	#chigai .field h3{
		font-size: 1.125rem;
		line-height: 1.5;
	}
	#chigai .field ul{
		padding: 0 0 20px 0;
	}
	#chigai .field ul li{
		font-size: 1.000rem;
	}


	#chigai .commingsoon{
		margin: -30px 0 0 0;
	}
	#chigai .commingsoon .in_box{
		padding: 50px 0 50px 30px;
	}
	#chigai .commingsoon::before {
		left: calc(50% - 45%);
	}

	#chigai .commingsoon .ttl_area {
		padding: 0 0 20px 0;
	}
	#chigai .commingsoon .ttl_area h3{
		font-size: 1.625rem;
		padding: 0 0 0.5em 0;
		text-align: center;
		margin: 0 auto;
	}
	#chigai .commingsoon .ttl_area .comming{
		width: 100%;
		margin: 0 auto;
		font-size: 1.625rem;
	}
	#chigai .commingsoon p{
		font-size: 0.938rem;
	}
}
@media only screen and (max-width: 480px) {
	#chigai{
		margin: 50px 0 40px 0;
	}
	#chigai .in_box{
		padding: 50px 0 50px 0;
	}
	#chigai .in_box .ph{
		width: 22%;
		top: -5%;
        right: 11%;
	}
	#chigai .in_box .ph2{
		width: 14%;
        top: 0%;
        right: -6%;
	}
	#chigai .in_box .ph3{
		width: 18%;
		bottom: -2%;
        left: -9%;
	}

	#chigai .in_box h3{
		font-size: 1.250rem;
	}
	#chigai .in_box h5{
		font-size: 0.938rem;
	}

	#chigai .ex{
		margin: 40px 0 0 0;
	}
	#chigai .ex::after {
		content: none;
		left: 50%;
		height: calc(100% - 30px);
	}

	#chigai .ex h4{
		font-size: 1.125rem;
	}

	#chigai .ex .clm{
		width: 100%;
		padding: 0 0 20px 0;
	}
	#chigai .ex .clm .info{
		font-size: 1.000rem;
	}
	#chigai .ex .clm .info br{
		display: none;
	}
	#chigai .ex .clm .info i{
		padding: 7px 0 0 0;
	}
	#chigai .ex .clm ul{
		padding: 0 0 20px 0;
	}
	#chigai .ex .clm ul li{
		font-size: 0.813rem;
	}


	#chigai .field .in_box{
		padding: 30px 20px 30px 20px;
	}

	#chigai .field .left{
		width: 100%;
		padding: 0 0 20px 0;
	}
	#chigai .field h3{
		font-size: 1.000rem;
	}
	#chigai .field ul{
		padding: 0 0 20px 0;
	}
	#chigai .field ul li{
		font-size: 0.875rem;
	}


	#chigai .commingsoon{
		margin: -30px 0 0 0;
	}
	#chigai .commingsoon .in_box{
		padding: 40px 0 40px 10px;
	}

	#chigai .commingsoon .ttl_area {
		padding: 0 0 20px 0;
	}
	#chigai .commingsoon .ttl_area h3{
		font-size: 1.412rem;
	}
	#chigai .commingsoon .ttl_area .comming{
		width: 100%;
		margin: 0 auto;
		font-size: 1.375rem;
	}
	#chigai .commingsoon p{
		font-size: 0.875rem;
	}
}

.deteilbtn {
	padding: 0 0 90px 0;
}
.deteilbtn a.link{
	width: 20em;
	font-size: 1.125rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.0;
	color: #FFF;
	padding: 0.7em 4.5em 0.7em 3.5em;
	background: #d95d51 url(../../digitalmedia/img/icon_deteil2.png) center right 2em/15px auto no-repeat;
	border-radius: 30px;
	display: block;
	overflow: hidden;
	margin: 0 auto 0 auto;
	box-sizing: border-box;
}

@media only screen and (max-width: 1099px) {
	.deteilbtn {
		padding: 0 0 90px 0;
	}
	.deteilbtn a.link{
		width: 20em;
		font-size: 1.000rem;
		background: #d95d51 url(../../digitalmedia/img/icon_deteil2.png) center right 2em/15px auto no-repeat;
	}
}
@media only screen and (max-width: 768px) {
	.deteilbtn {
		padding: 0 0 60px 0;
	}
	.deteilbtn a.link{
		font-size: 0.938rem;
		background: #d95d51 url(../../digitalmedia/img/icon_deteil2.png) center right 2em/15px auto no-repeat;
	}
}
@media only screen and (max-width: 480px) {
	.deteilbtn a.link{
		width: 100%;
		font-size: 0.938rem;
		padding: 0.7em 3.0em 0.7em 2.0em;
		background: #d95d51 url(../../digitalmedia/img/icon_deteil2.png) center right 1em/15px auto no-repeat;
	}
}