@charset "utf-8";
/* koho 下層 TOP 共通 */
/* 教養教育センター カスタム */

/*▼モーダルウィンドウを開いた時のずれ対策*/
html {
  scrollbar-gutter: stable;
}
/*▲モーダルウィンドウを開いた時のずれ対策*/


/*スライダー*/
.info_box .slick-dotted.slick-slider {
	margin-bottom: 0;
}

.info_box .slick-dotted.slick-slider img {
	max-width: 100%;
}

.info_box .slick-dots li.slick-active button:before {
	color: #D60000;
}

#contents .info_box ul {
    margin: 0;
}

#contents .info_box ul li{
    margin-bottom: 0;
}

#contents .slide {
    width: 100%;
}

#contents .slide img {
    width: 100%;
}

.slider_copy{
	position:absolute;
    /*top: 0;*/
	right: 0;
	/* bottom: 0;*/
	left: 0;
	margin: auto;
	z-index: 1;
}

.slider_copy_container img{
	width:100%;
}

/*モーダルメニュー*/
.modal-open {
    position: fixed;
    width: 100%;
}

.modalfr {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1001;
    overflow: hidden;
    display: none;
    }

@media screen and (max-width: 736px) {
.modalfr {
    padding-top:35px;
    }
}

.modal-closebtn {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 1000;
}

@media screen and (max-width: 736px) {
.modal-closebtn img {
    max-width: 60%;
}
}

.modal-content {
    text-align: center;
    position: relative;
    width: 850px;
    max-width: 90%;
    max-height: 75vh;
    overflow: auto;
    padding: 20px;
	background-color: #FFF;
	margin: 0 auto;
    justify-content: center;
    align-items: center;
}
.modal-content.features {
    background-image: url("../images/index/img-index-features-bg.jpg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1200px;
}
.modal-content.message {
    background-image: url("../images/index/img-index-message-bg.jpg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1200px;
}
.modal-content.message::after {
  content: '';
  background-color: rgba(0,0,0,0.15);/*画像の上の半透明*/
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
/*  height: 120%; タテスクロールで背景グレイを伸ばす用*/
}
.modal-content.message .modal-txt-w {
/*    padding-right: 150px; 高さが欲しい場合、右paddingを空けるetc.*/
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 736px) {
    .modal-content.features,
    .modal-content.message {
        background-position: center center;
    }
}
    
.modal-content::-webkit-scrollbar,
.modal-content::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(100,100,100,0.80);
    border-radius: 10px;
}


.modal-txt {
    text-align: left;
    color: #000;
    margin-bottom: 2em;
}

.modal-txt-w {
    text-align: left;
    color: #fff;
    margin-bottom: 2em;
}

.morebtn .showDialog a {
    cursor: pointer;
}


@media screen and (max-width: 736px) {
#contents ul.link_box {
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
	margin: 0 auto 20px;
}
	
#contents ul.link_box li {
	clear: both;
	float: none;
	width: 100%;
	margin: 0 0 10px 0;
	box-sizing: border-box;
}
		
#contents ul.link_box li a {
    padding: 3px 17px;
	display: block;
    /*border: 1px solid #000;
    color: #000;*/
    text-decoration: none;
    font-size: 90%;
}

.slider_copy {
    position: absolute;
    top: 250px;
    right: 0;
    /* bottom: 0; */
    left: 0;
    margin: auto;
    z-index: 1;
}

#contents .slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
}

div.modal-txt h3.mod_tit_g{font-size: 150%; background-color: #96a9b3; color: #FFF; padding: 10px 20px; margin-bottom: 20px;}
div.modal-txt-w h3.mod_tit_l{font-size: 300%; color: #FFF; padding: 10px 0px; margin-bottom: 20px;}
div.modal-txt-w h3.mod_tit_l span {font-size: 40%;}
div.modal-txt h3.mod_tit_r{font-size: 150%; background-color: #d60000; color: #FFF; padding: 10px 20px; margin-bottom: 20px;}
div.modal-txt h3.mod_tit_b{font-size: 150%; background-color: #004da0; color: #FFF; padding: 10px 20px; margin-bottom: 20px;}
div.modal-txt p{font-size: 120%;}
div.modal-txt p.frame_g{font-size: 110%; padding: 15px 20px; border: 2px solid #96a9b3; font-weight: bold; margin-top: 20px;}
div.modal-txt p.frame_r{font-size: 110%; padding: 15px 20px; border: 2px solid #f50000; font-weight: bold; margin-top: 20px;}
div.modal-txt p.frame_b{font-size: 110%; padding: 15px 20px; border: 2px solid #004da0; font-weight: bold; margin-top: 20px;}

@media screen and (max-width: 736px) {
div.modal-txt h3.mod_tit_g, div.modal-txt h3.mod_tit_r, div.modal-txt h3.mod_tit_b{font-size: 106%; padding: 10px 20px; line-height: 1.1;}
div.modal-txt h4 {font-size: 94%;}
div.modal-txt p{font-size: 84%;}
div.modal-txt p.frame_g, div.modal-txt p.frame_r, div.modal-txt p.frame_b{font-size: 84%; padding: 10px 15px; line-height: 1.4;}
}

dialog{
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1001;
    overflow: hidden;
  margin: 0;
  padding: 0;
  border: none;
  inset: 0;
  max-width: 100%;
  max-height: 100%;
  opacity:0;
  transition:opacity .3s;

/*▼ふんわり表示するやつ*/
/*
	transition: opacity 1s, translate 1s;
    opacity:0; 
    
      /*&[open] {
        opacity: 1;
        translate: 0 0;
        display: flex;

        @starting-style {
          opacity: 0;
          translate: 0 0;
        }
      }*/
}

dialog[open]{
opacity:1;
display:flex;
  @starting-style{
    opacity:0;
}
}

dialog.closing {
opacity: 0;
}

@media screen and (max-width: 736px) {
dialog{
    padding-top: 30px;
}
}

/* 表組み（table2はレスポンシブ対応） */
div.modal-txt table.table1 {
	width: 100%;
	margin-bottom: 20px;
	border-top: 1px solid #ABBAC2;
	border-left: 1px solid #ABBAC2;
	border-spacing: 0;
}

div.modal-txt table.table1 th {
	padding: 7px;
	background-color: #CBD5DC;
	border-bottom: 1px solid #ABBAC2;
    border-right: 1px solid #ABBAC2;
	color: #000;
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
	font-size: 94%;
}

div.modal-txt table.table1 th.th2 {
	background-color: #E5EBEE;
}

div.modal-txt table.table1 td {
	padding: 7px;
	background-color: #ffffff;
	border-right: 1px solid #ABBAC2;
	border-bottom: 1px solid #ABBAC2;
	
	
}

div.modal-txt table.table1 td p {
	padding-left: 1.2em;
    text-indent: -1.2em;
	font-size: clamp(1.4rem, 0.8333333333vw + 0.76rem, 1.5rem);
	margin-bottom: 0px!important;
	line-height: 1.5;
}

div.modal-txt table.table1 td p.leftside {
	padding-left: 2.2em;
    text-indent: -2.2em;
	font-size: clamp(1.4rem, 0.8333333333vw + 0.76rem, 1.5rem);
	margin-bottom: 0px!important;
	line-height: 1.5;
}


#contents .table1 a {
	color: #000;
}
#contents .table1 a:hover {
	color: #D60000;
	text-decoration: underline;
}

h4.philosophy_subtit{
	font-size:clamp(1.4rem, 0.8333333333vw + 0.76rem, 2rem);
}



/* footer menu */
#footer .footer-menu ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
          align-items: stretch;
}
#footer .footer-menu ul li {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 50%;
  vertical-align: middle;
  position: relative;
  display: table;
  height: 280px;
    background: rgba(242, 245, 247, 1);
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}


#footer .footer-menu ul li a {
  font-size: 14px;
  color: #000;
  text-decoration: none;
  width: 100%;
  vertical-align: middle;
  text-align: center;

  display: table-cell;
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

/* main menu text */
#footer .footer-menu ul li.menu2,
#footer .footer-menu ul li.menu1{
	display: table;
	text-decoration: none;
	-webkit-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
	background: #f2f5f7;
	margin-bottom: 0;
	height: auto;
}
#footer .footer-menu ul li.menu1 { width: 100%;}
#footer .footer-menu ul li.menu2 { width:  50%;}

#footer .footer-menu ul li.menu2.gray,
#footer .footer-menu ul li.menu1.gray{
	background: #e0e7eb;
}

#footer .footer-menu ul li.menu2 a,
#footer .footer-menu ul li.menu1 a{
	width: 100%;

	text-align: center;
font-size: 20px;
line-height: 22px;
padding: 20px;
font-weight: normal;
/*color: #314b57;*/
}

#footer .footer-menu ul li.menu1 a:hover,
#footer .footer-menu ul li.menu2 a:hover{
	background: rgba(214,0,0,1); /*#D60000 text color*/

	color: #fff;
}

@media screen and (max-width: 736px) {
    #footer .footer-menu ul li.menu2 a, 
    #footer .footer-menu ul li.menu1 a{
		font-size: 14px;
		padding: 10px;
}
}


/*幅広い学びの丸集合部分*/
ul.manabi_list_circle{
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:15px;
}

ul.manabi_list_circle::after{
	display: block;
	content:"";
	width: 12vw;
}

ul.manabi_list_circle li{
	aspect-ratio: 1 / 1;       /* 正方形を維持 */
	border-radius: 50%;
	width:12vw;
	display: flex;
	justify-content: center;   /* 横中央 */
	align-items: center;       /* 縦中央 */
	text-align: center;
}

ul.manabi_list_circle li.circle01{background-color: #627a86;}
ul.manabi_list_circle li.circle02{background-color: #f8b500;}
ul.manabi_list_circle li.circle03{background-color: #009d62;}
ul.manabi_list_circle li.circle04{background-color: #69308d; margin-left:17.5%;}
ul.manabi_list_circle li.circle05{background-color: #00b0a8; margin-right:17.5%;}
ul.manabi_list_circle li.circle06{background-color: #e63178;}
ul.manabi_list_circle li.circle07{background-color: #ec6c00;}
ul.manabi_list_circle li.circle08{background-color: #0085cd;}

ul.manabi_list_circle li span{
	font-size: 1vw;
	color: #FFF;
	font-weight: bold;
	line-height: 1.5;
}

ul.manabi_list_circle li img{
	width:100%;
}

@media screen and (max-width: 768px) {
ul.manabi_list_circle{
justify-content: center;
gap:10px;
}

ul.manabi_list_circle li{
	padding: 5px 10px;
	width:30%;
	font-size: 0.7em;
}

ul.manabi_list_circle li span{
font-size: 2.5vw;
}

}


/*Voice部分モーダル*/
.clickable {
  cursor: pointer;
}

dl.mod_qa{
	/*display: flex;
	flex-wrap: wrap;*/
	width: 100%;
	
}

dl.mod_qa dt{
	font-size: 110%;
	background-color: #e5ebee;
	font-weight: bold;
	color: #000;
	padding: 5px 10px;
}
dl.mod_qa dd{
	width: 100%;
	font-size: 100%;
	padding: 10px;
	margin-bottom: 30px;
}
.p_tit{
	display: flex;
	gap: 20px;
	margin-bottom: 25px
}

.p_tit .photo{
	width: 40%;
}

.p_tit .midashi{
	width: 60%;
}

.p_tit .midashi p{
	font-weight: bold;
	font-size: 130%;
	margin-bottom: 30px
}
.p_tit .midashi p.name{
	font-size: 95%;
}

.p_tit .midashi p.jugyou{
	font-size: 95%;
	text-align: right;
	color: #FFF;
	background-color: #F50000;
	margin-bottom: 10px;
	padding: 3px 10px;
	display: inline-block;
}


@media screen and (max-width: 736px) {
dl.mod_qa dt{
	font-size: 100%;
	padding: 10px ;
	line-height: 1.5;
}
dl.mod_qa dd{
	width: 100%;
	font-size: 87%;
	padding: 10px;
	margin-bottom: 50px;
}

.p_tit{
	display: block;
	gap: 20px;
	margin-bottom: 25px;
}

.p_tit .photo{
	width: 100%;
}

.p_tit .midashi{
	width: 100%;
	margin-top: 20px;
}

.p_tit .midashi p{
	font-weight: bold;
	font-size: 120%;
	margin-bottom: 30px
}
.p_tit .midashi p.name{
	font-size: 90%;
	text-align: right;
}

.p_tit .midashi p.jugyou{
	font-size: 95%;
	text-align: right;
	color: #FFF;
	background-color: #F50000;
	margin-bottom: 10px;
	padding: 3px 10px;
	display: inline-block;
}


}