@charset "UTF-8";

/*
  ページ別CSS
*/

/***********************************************************
#1 オーバーライド: c-main
***********************************************************/
#c-main {
}

#c-main a.a-linkbtn {
  padding: 0.5em 1.5em;
  font-size: 0.9em;
	margin:  2.0em 0 1.0em ;
	border: solid 1px #333;
	width: inherit;
	color: #333;
	text-decoration: none;
}


/*//////////////////
#4 レスポンシブ（タブレット用）
//////////////////*/
@media screen and (max-width: 768px) {
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
}

/***********************************************************
#1 faculty
***********************************************************/

#c-main .box-faculty {
  padding: 1.0em 0 2.0em ;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  position: relative;
  background: url("/_themes/kokoni_sikanai_manabi/images/bg_matsue_campus.png") no-repeat;
  background-size: 90vw;
  background-position: center center;
  aspect-ratio: 5 / 3	;
}
#c-main .box-faculty-in {
  padding: 1.0em 0 ;
  margin: 0 auto;
  width: 80vw;
  max-width: 100%;
}
#c-main .box-faculty-in h2 {
  color: #fff;
}
#c-main .box-faculty-in p {
  color: #fff;
}

#c-main p.p-faculty {
  text-align: center;
  margin: 3.0em 0 0.5em;
}
#c-main p.p-faculty img {
  max-width: 250px;
}

#c-main .col-faculty {
  width: 100%;
  max-width: 100%;
  margin: 1.5em 0 ;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

#c-main .col-faculty-co {
  margin: 0 3% 3.0em ;
  flex-basis: calc( 100% / 4 - 6%);
}

#c-main .f01 {
  padding: 0 ;
}

#c-main .f02 {
  padding: 3.0em 0 0 ;
}

#c-main .f03 {
  padding: 6.0em 0 0 ;
}
#c-main .f04 {
  padding: 3.5em 0 0 ;
}

#c-main .f05 {
  padding: 6.5em 0 0 ;
}

#c-main .f06 {
  padding: 1.5em 0 0 ;
}

#c-main .f07 {
  padding: 4.1em 0 0 ;
}



/***********************************************************
#1 TOPページ モーダルエリア
***********************************************************/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
  background: #000;
}

/*以下はコンテンツ内のレイアウト*/

.modaal-container {
    color: #000;
    max-width: 60vw;
    background: #fff;
	padding: 0;
}

.modaal-content-container {
	padding: 0;
}

.modaal-container .col-modaal {
  width: 100%;
  max-width: 100%;
  margin: 0 ;
  padding: 1.5em 1.0em ;
}

.modaal-container .col-modaal h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
}



.modaal-container .col-modaal .cel-modaal {
  width: 100%;
  max-width: 100%;
  margin: 0 ;
  padding: 0 0 0 1.0em ;
}

.modaal-container .col-modaal h3.h3-hou {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  color: #c81041;
}
.modaal-container .col-modaal h3.h3-hou::before {
  content: "■ ";
}

.modaal-container .col-modaal h3.h3-nin {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  color: #72bb2b;
}
.modaal-container .col-modaal h3.h3-nin::before {
  content: "■ ";
}

.modaal-container .col-modaal h3.h3-edu {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  color: #f08300;
}
.modaal-container .col-modaal h3.h3-edu::before {
  content: "■ ";
}
.modaal-container .col-modaal h3.h3-sei {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  color: #668833;
}
.modaal-container .col-modaal h3.h3-sei::before {
  content: "■ ";
}

.modaal-container .col-modaal h3.h3-riko {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  color: #865d84;
}
.modaal-container .col-modaal h3.h3-riko::before {
  content: "■ ";
}

.modaal-container .col-modaal h3.h3-ene {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  color: #263786;
}
.modaal-container .col-modaal h3.h3-ene::before {
  content: "■ ";
}

.modaal-container .col-modaal h3.h3-med {
  font-size: 1.4em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  color: #006bb6;
}
.modaal-container .col-modaal h3.h3-med::before {
  content: "■ ";
}

.modaal-container .col-modaal h3.h3-img {
  max-width: 200px;
}

.modaal-container .col-modaal p {
  font-size: 1.1em;
  margin-bottom: 1.1em;
  font-weight: 600;
}

.modaal-container .col-modaal p.good {
  font-size: 1.4em;
  margin-bottom: 1.1em;
  font-weight: 700;
  color: #ff1d25;
  margin-left: 0.5em;
}

.modaal-close {
  top:90%;
}

.modaal-container p.p-btn {
  letter-spacing: 0.02em;
  font-weight: 300;
  margin: 2.0em 0 ;
  padding: 0 ;
  text-align: center;
}
.modaal-container p.p-btn a:link,
.modaal-container p.p-btn a:visited {
  font-size:0.9em;
  letter-spacing: 0.05em;
  color: #000;
  border: solid 2px #ff7baa;
  padding: 0.4em 3.0em 0.6em;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  border-radius: 100vw;
}
.modaal-container p.p-btn a:hover {
  text-decoration: underline;
  background: #f0f0f0;
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {

#c-main .box-faculty {
  padding: 0 ;
  width: 95vw;
  background-size: 95vw;
}
#c-main .box-faculty-in {
  padding: 0.5em 0 ;
  width: 100%;
}		

#c-main .col-faculty {
  margin: 0 ;
}	
	
#c-main .col-faculty-co {
  padding-left:1% ;
  padding-right:1% ;
  margin: 0 ;
  flex-basis: calc(100% / 3 );
}	

#c-main .f01 {
  padding-top: 0 ;
}

#c-main .f02 {
  padding-top: 0.5em;
}

#c-main .f03 {
  padding-top: 1.0em ;
}
#c-main .f04 {
  padding-top: 2.0em ;
}

#c-main .f05 {
  padding-top: 1.2em ;
}

#c-main .f06 {
  padding-top: 0.5em ;
}

#c-main .f07 {
  padding-top: 1.3em ;
}	
	
.modaal-container {
    max-width: 75vw;
}

.modaal-container .col-modaal {
  flex-direction: column;
}
	
.modaal-container .col-modaal h3.h3-hou,
.modaal-container .col-modaal h3.h3-nin,
.modaal-container .col-modaal h3.h3-edu,
.modaal-container .col-modaal h3.h3-sei,
.modaal-container .col-modaal h3.h3-riko,
.modaal-container .col-modaal h3.h3-ene,
.modaal-container .col-modaal h3.h3-med {
  font-size: 1.2em;
}

.modaal-container .col-modaal p {
  font-size: 0.9em;
  line-height: 1.3em;
}

.modaal-container .col-modaal p.good {
  font-size: 1.1em;
}

.modaal-container .col-modaal h3.h3-img {
  max-width: 150px;
}


	
}