@charset "UTF-8";

/* top用CSS */

/* ---------------------------------------------------------------------- */
/* コンテンツ */
/* ---------------------------------------------------------------------- */
#main-visual {
	height: 621px;
	background: #23B6BC;
}

.main-visual-inner img {
	width: auto;
	height: auto;
	max-width: 1097px;
/*	max-height: 468px;*/
	margin: 0 auto 0;
	display: block;
}

h1 { /* ページタイトルバナー */
	padding: 0!important;
	margin: 0!important;
}

.main-visual-inner h1 {
	padding-top: 0px!important;
	width: 100%;
	overflow: hidden;
}


h2:before, h2:after {
  content: none;
}

section .content-body {

}

@media screen and (max-width: 768px) {
	#main-visual {
	height: auto;
}


	.main-visual-inner {
	height: auto;
	width: 100%;
	max-width: 1460px;
	background-image: none;
  display: block;
	margin: 0 auto;
	padding-bottom: 0;
	text-align: center;
}

	.main-visual-inner h1 {
	padding-top: 50px!important;
	padding-bottom: 50px!important;
	width: 100%;
	overflow: hidden;
}

	.main-visual-inner img{
		width: 96%;
	
	}
	
	h2 img
	{
		width:80%;
		height: auto;
	}
}


/* ---------------------------------------------------------------------- */
/* banner */
/* ---------------------------------------------------------------------- */
#top-bnr-box {
}

#top-bnr-box ul {
	margin-left: 0;
}

#top-bnr-box .content-body {
	margin-top: 40px;
}

#top-bnr-box ul {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  justify-content:space-between;
	padding-bottom: 0;
}

#top-bnr-box ul li:first-child {
	margin-right: 2%;
}

#top-bnr-box ul li:last-child {
	margin-left: 2%;
}

#top-bnr-box ul li img {
	width: 100%;
}

#top-bnr-box ul li:hover {
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)";
}

@media screen and (max-width: 768px) {
	#top-bnr-box .content-body {
		margin-top: 10px;
	}

	#top-bnr-box ul {
		width: 96%;
		margin: 0 2%;
	  display: block;
		padding-bottom: 0;
	}

	#top-bnr-box ul li:first-child {
		margin-right: 0;
		margin-bottom: 15px;
	}

	#top-bnr-box ul li:last-child {
		margin-top: 15px;
		margin-left: 0;
	}



}


/* ---------------------------------------------------------------------- */
/* コンテンツタイトル */
/* ---------------------------------------------------------------------- */
.svg-h2{
    height: 72px;
    max-width: 100%;
    width: auto;
    background-image: none!important;
}

@media screen and (min-width: 769px) {
.svg-h2{
    height: 72px;
}

}

/* ---------------------------------------------------------------------- */
/* ボタン共通 */
/* ---------------------------------------------------------------------- */
.btn-to
{
	width: 60%;
}

.btn-to:hover
{
	opacity: 0.9;
}

@media screen and (min-width: 769px) {
.btn-to
{
	max-width: 208px;
}

}



/* ---------------------------------------------------------------------- */
/* コンテンツビジュアル共通 */
/* ---------------------------------------------------------------------- */
.details
{
    position: relative;
    box-sizing: border-box;
    padding-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.details:nth-of-type(2n){
    margin-right: 0!important;
    padding-right: 0!important;
    padding-bottom: 0px;
}

.details .btn-to
{
	position: absolute;
	bottom: 0;
	left: calc(50% - 60px);
}

.details-ao
{
	padding-bottom: 50px;	
}

.details-ao .btn-to
{
	position: absolute;
	bottom: 0;
}

@media screen and (min-width: 769px) {
	.details
{
	padding-bottom: 10px;
}

	.details-ao
{
	padding-bottom: 0;
}


.details .btn-to
{
	position: absolute;
	bottom: 0;
	left: calc(50% - 15%);
}


	.details .btn-to
	{
		bottom: 30px;
	}

.details-ao .btn-to
	{
	bottom: 8%;
	left: 21%!important;
	}
}


/* ---------------------------------------------------------------------- */
/* news & blog */
/* ---------------------------------------------------------------------- */

.pickup-news{
	box-sizing: border-box;
	width: 100%;
}

.pickup-news div{
	margin-bottom: 30px;
}

.news-list-box
{
	margin-bottom: 80px;
}


@media screen and (min-width: 769px) {
	.pickup-news{
/*		margin-top: 60px;*/
		display: flex;
		max-width: 1100px;
	}

}

/* ---------------------------------------------------------------------- */
/* open campus */
/* ---------------------------------------------------------------------- */
#open-campus
{
    background-image: url(_images/bg_oc2022.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    text-align: center;
    margin-top: 70px;
    margin-bottom: 70px;
	padding-bottom: 115px;
}

#open-campus .content .content-body
{
	text-align: center!important;
}

#open-campus a{
	transition: 0.2s;
}
#open-campus a:hover{
	opacity: 0.8;
}
@media screen and (max-width: 767px) {
	#open-campus
{
    background-image: url(_images/bg_oc2022.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
	background-size:200% auto;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
	padding-bottom: 50px;
}
	#open-campus img{
		width: 90%;
		height: auto;
	}
}
	
/* ---------------------------------------------------------------------- */
/* POINT */
/* ---------------------------------------------------------------------- */

#point{
    background: linear-gradient(90deg,#4CBBB4 0%,#4CBBB4 50%,#EF858C 50%,#EF858C 100%);
    height: auto;
    padding-bottom: 100px;
}
#point .inner1100
{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 0 40px;
    text-align: center;
    position: relative;
}
#point .inner1100 .josei {
    position: absolute;
    bottom: -5px;
    right: 97px;
}
.content .jujitu .txtbox {
    max-width: 910px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    font-size: 20px;
    padding-bottom: 40px;
}
.content .jujitu .imgbox{
	margin-bottom: 40px;
}

#point ul {
	padding-top: 20px;
}
#point ul li{
	display: inline-block;
	margin: 7px 7px;
	transition: 0.2s;
}
#point ul li:hover{
	opacity: 0.8;
}

@media screen and (min-width: 769px) {
	#point .content
		{
    text-align: center;
    position: relative;
    background-color: #FFFFFF;
    width: 1100px;
    border-radius: 100px;
    padding: 110px 180px;
		}

	#point .content-body
	{
		margin-top: -160px;
		z-index: 99;
	}

	#point .kokka{
		padding: 0 0 100px;
	}
	#point .kokka a{
		transition: 0.2s;
	}
	#point .kokka a:hover{
		opacity: 0.8;
	}
#point .jujitu{
		padding: 0 0 100px;
	}
	#point .sugoi{
		padding: 0 0 100px;
	}
	#point .jujitu a{
		transition: 0.2s;
	}
	#point .jujitu a:hover{
		opacity: 0.8;
	}
}

#movie h3{
	margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
	#point{
    background: linear-gradient(90deg,#4CBBB4 0%,#4CBBB4 50%,#EF858C 50%,#EF858C 100%);
    height: auto;
    padding-bottom: 50px;
}
#point .inner1100
{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0 20px;
    text-align: center;
    position: relative;
}
	#point h3 img{
		width: 80%;
		height: auto;
	}
	#point .content
		{
    text-align: center;
    position: relative;
    background-color: #FFFFFF;
    width: 90%;
    border-radius: 20px;
    padding: 5% 5%;
		}

	#point .content-body
	{
		margin-top: -160px;
		z-index: 99;
	}

	#point .kokka{
		padding: 0 0 50px;
	}
	#point .kokka p img{
		width: 100%;
		height: auto;
	}
	#point .kokka p a img{
		width: 208px;
		height: auto;
	}
#point .jujitu{
		padding: 0 0 50px;
	}
	#point .sugoi{
		padding: 0 0 50px;
	}
	#point .jujitu a{
		transition: 0.2s;
	}
	#point .jujitu a:hover{
		opacity: 0.8;
	}
}
#point .inner1100 .josei {
    display: none;
}
.content .jujitu .txtbox {
    max-width: 910px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    font-size: 14px;
    padding-bottom: 40px;
}
.content .jujitu .imgbox{
	margin-bottom: 40px;
}
.content .jujitu .imgbox img{
	width: 100%;
	height: auto;
}

#point ul {
	padding-top: 20px;
}
#point ul li{
	display: inline-block;
	margin: 7px 7px;
	transition: 0.2s;
}
#point ul li:hover{
	opacity: 0.8;
}


/* ---------------------------------------------------------------------- */
/* interview */
/* ---------------------------------------------------------------------- */
#interview-header {
    background: linear-gradient(180deg,#F9F9F7 0%,#F9F9F7 50%,#EEEEE8 50%,#EEEEE8 100%);
    height: auto;
}

#interview-header h3 {
    text-align: center;
    display: block;
    width: 100%;
	margin-bottom: 50px;
}
#interview-header ul{
	margin-bottom: 40px;
}
#interview-header ul li{
	display: inline-block;
	margin: 0 2px;
}

#interview-header .centerbut
{
    position: relative;
	text-align: center;
	transition: 0.2s;

}
#interview-header .centerbut:hover{
	opacity: 0.8;
}
.interview-voice .btn-to
{
}

.interview-voice .details .btn-to
{
	position: absolute;
/*	bottom: 30px;*/
	left: calc(50% - 70px)
}
.interview-voice .details a{
	transition: 0.2s;
}
.interview-voice .details a:hover{
	opacity: 0.8;
}
.with-video
{
	left:  calc(30% - 70px)!important;
}

.video
{
	left:  calc(70% - 70px)!important;
}

	.voice-header {
		width: 100%;
		height: auto;
		}
@media screen and (max-width: 767px) {
	#interview-header ul{
	margin-bottom: 40px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
}
	#interview-header ul li img{
	width: 100%;
		height: auto;
}
	.interview-voice .details img{
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 769px) {
#interview-header {
	padding-bottom: 0; 
}

#interview-header .details .btn-to
{
}

	#interview .content  {
    padding-bottom: 0;
    padding-top: 100px;
	}
    #interview2 .content  {
    padding-bottom: 80px;
    padding-top: 30px;
	}
	#interview .details,#interview2 .details {
		width: 96%;
		margin: 0 4.5% 0 0;
	}
    #interview .details:nth-of-type(2n),#interview2 .details:nth-of-type(2n){
    margin-right: 0px!important;
    padding-bottom: 0px;
        
    }
	.voice-header {
		height: 485px;
		}

}


/* ---------------------------------------------------------------------- */
/* CAMPUS LIFE */
/* ---------------------------------------------------------------------- */


/* ---------------------------------------------------------------------- */
/* VOICE */
/* ---------------------------------------------------------------------- */
.campus-life-container {
	display: table;
}

.campus-life-container-inner {
	display: table-cell;
	width: 50%;
}

.campus-life-banner {
	width: 100%;
}


#voice {
	background: none;
}
#voice .content {
    padding-top: 40px;

}

#voice h2 {
    background-image: none;
    margin-bottom: 0px;
    margin-top: 0px;
}


#voice ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 20px;
}

#voice ul li {
	width: 46%;
	margin-left: 2%;
	margin-right: 2%;
	margin-bottom: 30px;
}

#voice ul li img {
	width: 100%;
	height: auto;
}

#voice ul li:hover {
  opacity: 0.9;
  filter: alpha(opacity=90);
  -ms-filter: "alpha(opacity=90)";
}


@media screen and (max-width: 768px) {
	#voice ul {
	  display: block;
		width: 90%;
		margin: 0 5%;
	}

	#voice ul li {
		width: 100%;
		margin-right: 0;
		margin-bottom: 15px;
	}


}


/* ---------------------------------------------------------------------- */
/* NEWS BLOG */
/* ---------------------------------------------------------------------- */
#blog dl
{
    max-width: 800px;
    margin: 0 auto;
    line-height: 2em;
    padding: 15px;
    background-color: #fff;
    box-sizing: border-box;
}

#blog dl a
{
    color: #404040;
    text-decoration: none;
}

#blog dt
{
	float: left;
	width: 7em;
	text-align: left;
	line-height: 3em;
	padding-left: 1em;
	border-bottom: 1px solid #ccc;
}

#blog a dt
{
	color: #404040;
}

#blog dl dd
{
	padding-left: 8em;
	margin-left: 0;
	line-height: 3em;
	border-bottom: 1px solid #ccc;
}

/*#blog dl a dd
{
	border-bottom: 1px solid #cacaca;
}

#blog dl a:nth-last-child(1) dd
{
	border-bottom: none;
}*/

#blog dd strong { font-weight: bold; }
#blog dd span { color: #404040; }

#blog p.to-blog
{
	width: 100%;
	text-align: center;
	margin-top: 20px;
}

@media screen and (max-width: 768px) {
	#blog dl
	{
		width: 98%;
		padding-left: 1%;
		padding-right: 1%;
	}

	#blog dt
	{
		float: left;
	}


}


/* スマホ横表示 */
@media screen and (max-width: 640px) and (orientation: landscape){

}


/* スマホ縦表示 */
@media screen and (max-width: 640px) and (orientation: portrait){

}

/* ---------------------------------------------------------------------- */
/* 追加youtube スタイル */
/* ---------------------------------------------------------------------- */
@media screen and (min-width: 769px) {

  #youtube-top  .content {
display: -webkit-box;
display: -moz-box;
/*display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;*/

width: 100%;
  }

    #youtube-top .content-body {
    padding-left: 20%;
    padding-right: 20%;
    width: 60%
  }

    #youtube-top .content-body img {
    width: 100%;
    height: auto;
  }

}
.youtube-contents {
	justify-content: center;

}

.youtube-box{
  margin-bottom: 40px;
}

.youtube-wrap {
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}
 
.youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#youtube-top .content-body img {
  width: 100%;
  height: auto;
}

.youtube-box{
  margin-bottom: 40px;
}

@media screen and (min-width: 769px) {
.youtube-box{
  margin-left: 1%;
  margin-right: 1%;
}

.youtube-contents {
 display: flex;
}

.youtube-box{
 width: 48%;
}


}

/* ---------------------------------------------------------------------- */
/*  */
/* ---------------------------------------------------------------------- */
.banner-container
{
	height: auto;
	box-sizing: border-box;
	background-color: #EF858C;
}


.banner-container ul {
	margin-left: 0;
}

.banner-container .banner-container-inner {
	display: table;
	height: 100%;
	width: 100%;
	max-width: 1460px;
	margin: 0 auto;
	text-align: center;
	color: #FFFFFF;
}

.banner-container-image {
	display: table-cell;
	height: 100%;
	width: 50%;
	max-width: 730px;
	background-image: url("_images/img_oc2.jpg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 264px;
	text-align: center;
	color: #FFFFFF;
}

.banner-container-contactus {
	display: table-cell;
	width: 50%;
	max-width: 730px;
}

.banner-container-contactus-inner {
	max-width: 550px;
/*	padding-top: 10px;*/
}

.banner-container .banner-container-inner h2 {
	margin-bottom: 0;
	color: #FFFFFF;
}

.banner-container .banner-container-inner ul {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
/*  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;*/
  justify-content:space-between;
	padding-bottom: 40px;
	margin-top: 40px;
}

.banner-container .banner-container-inner ul li {
  display: inline-block;
  padding: 1.1em 0;
  border: solid 2px #fff;
  border-radius: 3em;
  transition: .4s;
	background-color: #EF858C;
	width: 12em;
	font-size: 1.15em;
}

.banner-container .banner-container-inner ul a {
  text-decoration: none;
	color: #fff;
	font-weight: 600;
}

.banner-container .banner-container-inner ul li:hover {
	border: solid 2px #FFFFFF;
	background-color: #fff;
	color: #EF858C;
}

.banner-container .banner-container-inner ul li:first-child {
	margin-right: 15px;
}

.banner-container .banner-container-inner ul li:last-child {
	margin-left: 15px;
}

.banner-container .banner-container-inner ul li img {
	width: 100%;
}

@media print, screen and ( min-width : 769px ) {
	.banner-container
	{
		height: 260px;
	}

}

@media only screen and ( max-width : 768px ) {
	.banner-container
{
	background-color: #fff;
}


.banner-container .banner-container-inner {
	display: block;
	height: auto;
	width: 100%;
	max-width: 1460px;
	margin: 0 auto;
	text-align: center;
	color: #FFFFFF;
}

.banner-container-image {
	display: none;
}

.banner-container-contactus {
	display: block;
	width: 100%;
	max-width: 730px;
}

.banner-container-contactus-inner {
		background-color: #EF858C;
	max-width: 550px;
	padding-top: 10px;
	padding-bottom: 30px;
}
	}

.expenses-box {
width: 100%;
	border: 8px solid #c3b8b1;
	padding: 20px 30px 80px;
	color: #ef858c;
	text-align: center;
	font-weight: bold;
	font-size: 200%;
	background-color: #fff;
}

.expenses-box .btn-to {
bottom: 20px;
}

@media print, screen and ( min-width : 769px ) {
.expenses-box .btn-to {
left: calc(50% - 70px);
bottom: 20px;
}
}

@media only screen and ( max-width : 768px ) {
	.btn-to
{
	max-width: 208px!important;
}

.interview-voice .details .btn-to
{
	left: calc(50% - 60px)
}

.with-video
{
	left:  calc(30% - 60px)!important;
}

.video
{
	left:  calc(70% - 60px)!important;
}



}

/*20220628追記　*/

.ao-banner {
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
	transition: 0.2s;
}
.ao-banner:hover{
	opacity: 0.8;
}
.ao-banner img{
	max-width: 1106px;
	width: 90%;
	height: auto;
}
.bg-gray2
{
    background-color: #EEEEE8!important;
}
.bg-gray3
{
    background-color: #F9F9F7!important;
}
.inner1100
{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 0 60px;
    text-align: center;
    position: relative;
}
.bannerarea {
    padding-top: 50px;
    padding-bottom: 50px;
}

.inlinebox3 {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}
.inlinebox3 a {
	transition: 0.2s;
}
.inlinebox3 a:hover {
	opacity: 0.8;
}
.blogbox {
    width: 526px;
    background: #fff;
    padding: 50px 5px 0px;
    display: inline-block;
	vertical-align: top;
	margin: 0 5px ;
}
.twitterbox {
    width: 526px;
    background: #fff;
    padding: 20px 5px 50px;
    display: inline-block;
    text-align: center;
	vertical-align: top;
	margin: 0 5px;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
@media screen and (max-width: 767px) {
	.pc{
	display: none;
}
.sp{
	display: block;
}
	.ao-banner {
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
	transition: 0.2s;
}
	.inner1100
{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 50px 0 60px;
    text-align: center;
    position: relative;
}
.bannerarea {
    padding-top: 50px;
    padding-bottom: 50px;
}

.inlinebox3 {
    display: inline-block;
    margin-left: 0px;
    margin-right: 0px;
	margin-bottom: 20px;
}
.inlinebox3 a {
	transition: 0.2s;
}
.inlinebox3 a:hover {
	opacity: 0.8;
}
.blogbox {
    width: 90%;
    background: #fff;
    padding: 50px 5px 0px;
    display: inline-block;
	vertical-align: top;
	margin: 0 5px 20px;
}
	.blogbox h3 img{
		width: 80%;
		height: auto;
	}
.twitterbox {
    width: 90%;
    background: #fff;
    padding: 20px 5px 50px;
    display: inline-block;
    text-align: center;
	vertical-align: top;
	margin: 0 5px;
}
}