@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}

ol, ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
/* -------------------------------------------------------------- */

body{
color:#555;
font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#fff;
-webkit-text-size-adjust:100%;
}



.item p{
	padding-bottom:0;}


.post ul{
  padding: 0.5em 0 0.5em 1.5em;
}

.post img{
	display:flex;
	}
	

.space-bottom{
	padding-bottom:20px;
}

.under{
	border-bottom:dotted 2px;
}

.inner2{
  max-width: 1500px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 50px 20px 50px　20px;
}

.box {
	display: flex;
  flex-direction: row;
}
.box + .box{
  margin-top: 80px;
  
}
.box__body{
  width: 50%;
  padding: 0 20px;
}
.box__ttl {
  font-size: 20px;
  text-transform: uppercase;
}
.box__txt {
  margin-top: 20px;
}
.box__image{
  display:flex;
  flex-wrap:wrap;
}
.box__image img{
  object-fit: contain;
  max-width:80%;
}

.box.reverse{
  flex-direction: row-reverse;
  margin-left:auto;
}

.box.reverse .description_right{
	top:50%;
	left:0;
}

/*ここからボックス_学部*/
.wrap {
  border: 1px solid #64a4b5;
  padding:0;
  margin:10 10 10 10;
  font-size:13px;
  font-weight:bold;
  
}

/*コンテンツ初めは非表示*/
.answer {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  overflow: hidden;
}
.answer p {
  line-height:1.5em;
  margin: 0;
  padding: 1em;
  font-weight:normal;
}

/*クリックするとコンテンツ表示*/
input:checked ~ .answer {
  max-height: 200px;
  opacity: 1;
  visibility: visible;
}

/* アコーディオン表示の際に三角回転 */
input:checked ~ label .icon {
  transform: rotate(180deg);
}

/*チェックボックスを非表示にする*/
input {
  display: none;
}

label {
  padding: 0;
  background: #d3e2e6;/*水色*/
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 15px;
}
label p{
  padding: 0.5em;
}

/*三角矢印アイコン*/
.icon {
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transform-origin: center 43%;
  transition: transform 0.5s;
}
.icon::before,
.icon::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 3px;
  background-color: #64a4b5;
}
.icon::before {
  left: 0;
  transform: rotate(45deg);
}
.icon::after {
  right: 0;
  transform: rotate(-45deg);
}
/*ここまで*/

/*ここからボックス_大学院*/
.wrap_daigakuin {
  border: 1px solid #0c9163;
  padding:0;
  margin:10 10 10 10;
  font-size:13px;
  font-weight:bold;
  
}
/*ここまで*/

@media screen and (max-width: 768px){
	.description_right { /* ツールチップのスタイル */
  width: 200px; /* 横幅 */
}
.space-bottom{
	padding-bottom:110px;
}
.box {
    display: block;
  }
  .box + .box{
    margin-top: 60px;
  }
  .box__body{
    width: 100%;
    padding: 0;
  }
  .box__image{
    margin-top: 20px;
    width: 80%;
	margin:auto;
  }
}

.box18{
	width:60em;
    margin:auto;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px grey;
    border-bottom: solid 2px grey;
	display: -webkit-flex;
	display:flex;
    justify-content: center;
    align-items: center;
}
.box18:before, .box18:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: calc(100% + 20px);
    background-color: grey;
}
.box18:before {left: 10px;}
.box18:after {right: 10px;}

.box18 .item {
    width:calc(100%/3-30px);
	padding:20px 60px;
	font-size:0.8vw;
	text-align:center;
	overflow-wrap:break-word;
	white-space:nowrap;
}

.box18 a{
	color:#444;
}

.box18 a:hover{
	color:#5f9ea0;
	font-weight:bold;
}


@media (max-width:1500px){
	.box18 .item{
		font-size:14px;
}}

@media (max-width:1000px){
	.box18{
		width:20em;
		flex-direction:column;
}

	.box18 .item{
		width:calc(100%/3-100px);
		padding:10px 15px;
		margin:0;
	}
}