/* サブページで、テンプレートで対応しきれないスタイルをこちらに記入します。ASのみ書き込み可能 */
@charset "utf-8";

/*=== サブ画面共通 ===*/
/*画面タイトル*/
main > h2{
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 1rem auto 2rem;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.4;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0 2rem;
}

main > h2::before{
  content:"";
  width:60px;
  height:60px;
  flex-shrink:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("../images/ws_blue.png")
}

@media (max-width:768px){
  main > h2{
    gap:0;
    padding:0 1rem;
    font-size:2.5rem;
  }
  main > h2::before{
    display:none;
  }
}

/*section調整*/
@media (max-width:768px){
    section{
    padding-top: 0rem !important;
}
}

/*h3にアイコンを設置*/
h3{
  position: relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  border-bottom:solid 3px #c0cddc;
  margin:0 auto 50px;
  padding:5px 0;
}

h3:after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0%;
  width: 90%;
  height: 3px;
  background-color: var(--accentColor);
}

h3::before{
  content:"";
  width:50px;
  height:50px;
  background:
/*    url("../images/sc_blue.png")*/
    center center / contain
    no-repeat;
}

.h3-type-seach::before{
  background-image:url("../images/sc_blue.png");
}

#participation::before{
  background-image:url("../images/pr_blue.png");
}

#institution::before{
  background-image:url("../images/da_blue.png");
}

@media (max-width:1280px){
  h3{
    margin: 0 1rem;
  }
}
@media (max-width:768px){
  h3{
    gap:0;
    padding:0 1rem;
    /*font-size:1.5rem;*/
  }
  h3::before{
    display:none;
  }
}

/*intro調整*/
@media (max-width: 768px) {
#intro > .intro-container{
  padding: 0 1rem;
}
}

/*list-designレスポンシブ調整*/
@media (max-width:575px) {
  [class^="list-design"]{
  padding: 2rem 0 0;
}
}

@media (max-width:999px) {
    .list-design5.column3 li{
      width: calc(100% / 3 - 1rem);
    }
}	

@media (max-width:768px){
    .list-design4.column2 > .contents-wrap,
    .list-design4.column3 > .contents-wrap,
    .list-design4.column4 > .contents-wrap{
      display: block;
    }
    .list-design4.column2 .item,
    .list-design4.column3 .item,
    .list-design4.column4 .item{
      width: 95%;
    }
    .list-design5.column3 li,
	.list-design5.column4 li,
    .list-design5.column5 li{
      width: calc(100% / 2 - 1rem);
    }
}

@media (max-width:575px){
    .list-design5.column3 li,
    .list-design5.column4 li,
    .list-design5.column5 li,
    .list-design5.column-auto > .contents-wrap{
      width: 100%;
    }
}

/*list-designタイトル*/
h4{
  font-weight: bold;
}

/* list-design4 item画像に下線を入れる（画像とテキストの境界線）
---------------------------------------------- */
.list-design4 .item img{
  border-bottom: 1px solid #c0c0c0;
}

/*「外部サイトへ」のアイコン*/
a.a-link_gaibu:after {
  content: url(../images/common/link_icon.png);
  margin-left: .2em;
  margin-right: .2em;
}

/*テキスト内のリンク*/
.c-line {
  font-size: 105%;
  /*border-bottom: 3px solid #fbd01d;*/
}

a.c-line:hover {
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #FBD01D 50%, #FBD01D 100%);
}


/*旧データコピペ*/
/*=== 教材作成者・資料提供機関一覧 ===*/
/* "#main-ctt"は旧"#inside-contents" */
/*#inside-contents, */#main-ctt {
	margin: 0 auto;
	padding: 0 1.5em 2em;}

  @media(max-width:575px){
    #main-ctt{
      margin: 0 auto;}}
    
  /*".each-section"は旧".cate-box"*/
  .each-section{
    margin-bottom: 50px;
    padding: 0 1.0rem;}
  
  @media(max-width:576px){
    .each-section{
      margin-bottom: 20px;
      padding: 0 5px;
      padding: 0;
      font-size:0.9em;}
	}

.list ul {
	margin-left: 1em;
  list-style: none;
}

.list ul li {
	margin-right: 0.8em;
}

#participation {
  margin-bottom:0;
}

.note-p {
  margin:0 0 0 1em;
  padding: 0 0 1em;
}

@media(max-width:768px){
  h3{padding-left:0;
     font-size:1.8em;}
    }


.hold{
  margin-bottom:0.8em;
}

.hold span{
  font-weight:bold;
  color:#0a3866;
  font-size: 1.2rem;

}

.hold ul{
  margin-left:0px;
}

@media(max-width:575px){
.cate-box {
	margin-bottom: 20px;
	padding: 0 5px;
	font-size:0.9em;
	}
}

/*===== お知らせ・更新情報(トップページのCSSをそのまま転載) =====*/
#bg-area-info{
	position: relative;
	top: 2rem;
	background-color:#fff;
	margin:0 1.5rem 5rem;}

#area-info{
	padding: 1.8em 2rem .8rem;
	background-color:#fff;
	background-clip:padding-box;
	background:
		url(../images/bg_info.gif) left top no-repeat,
		url(../images/bg_info_right_top.gif) right top no-repeat,
		url(../images/bg_info_left_bottom.gif) left bottom no-repeat,
		url(../images/bg_info_right_bottom.gif) right bottom no-repeat,
		url(../images/bg_info_dotted.gif) left top repeat-y,
		url(../images/bg_info_dotted.gif) right top repeat-y,
		url(../images/bg_info_dotted.gif) left top repeat-x,
		url(../images/bg_info_dotted.gif) left bottom repeat-x;}

#area-info h3{
	color:#fff;
	border:1px solid rgba(42, 124, 123, 0);
	text-shadow:#567B8A 1px 1px 2px, #567B8A -1px 1px 2px, #567B8A 1px -1px 2px, #567B8A -1px -1px 2px, 
	#5F7C7B 0px 2px 0px, #5F7C7B 0px 3px 0px;
	background-color:rgba(42, 124, 123, 0.7); /*#2A7C7B*/}

@media screen and (max-width: 540px) {
	#bg-area-info{
		margin:0 .5rem 3.5rem;}

	#area-info{
		top: 1rem;
		margin-bottom: 2rem;
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
}

ul.ul-info{
	list-style-type:none;
	padding-left:0;
	margin-bottom:1.8em;}

ul.ul-info li{
	padding-top:1.0rem;
  padding-bottom:0.5rem;
	border-bottom:1px dotted #b3b3b3;}

ul.ul-info > li:first-child{
	padding-top:0.5rem;}

ul.ul-info ul.ul-inside{
	list-style-type:disc;
	padding-left:1.5em;}

ul.ul-info ul.ul-inside li{
	border-bottom:none;
	padding-top:.3em;}

ul.ul-info ul.ul-inside li:first-child{
	padding-top:1.0em;}

ul.ul-info dl{
	display:flex;}

ul.ul-info dt{
	position:relative;
	font-weight:normal;
	padding-right:0;
	padding-left:0;}/*幅とラベルの余白はブラウザ幅別に別途CSSの記載あり*/

@media(min-width:800px){
ul.ul-info dt{
	width:11.5em;
	margin-right:3.5em;}}

@media(max-width:799px){
ul.ul-info dt{
	width:10em;
	margin-right:2em;}}

ul.ul-info dt.ico-oshirase, ul.ul-info dt.ico-koushin, ul.ul-info dt.ico-sonota{}

ul.ul-info dt.ico-oshirase::after, ul.ul-info dt::after, ico-koushin, ul.ul-info dt.ico-sonota::after{
	color:white;
	font-size:69%;
	font-weight:bold;
	position:absolute;
	text-align:center;
	right:0;
	top:-2px;
	letter-spacing:0.05em;
	padding:1px 5px;
	border-radius:2px;
/*	width:5em;*/}/*※タグの文字数がそれぞれ異なる場合、widthの調整が必要となります*/


ul.ul-info dt.ico-oshirase::after{
	content:"お知らせ";
	background-color:#d72e39;}

ul.ul-info dt.ico-koushin::after{
	content:"更新情報";
	background-color:#1461b7;}

ul.ul-info dt.ico-sonota::after{
	content:"サンプル";
	background-color:#00856A;}

ul.ul-info dd{
	width:calc(100% - 15em);
	padding-right:0;
	margin-bottom:0;/*Bootstrap:reset(Original->margin-bottom:0.5rem;)*/}

p.txt-readmore{
	text-align:right;}

p.txt-readmore a:before{
	content:"\025B6\020";}

@media(max-width:768px){
	ul.ul-info dl{
		flex-wrap:wrap;}
	ul.ul-info dt{
		margin-bottom:1em;}
	ul.ul-info dd{
		width:100%;}}
/*旧データコピペ　ここまで*/

/*=== ワークショップ成果 ===*/
.cooperation-link{
/*  font-weight:bolder;*/
  display: inline-block;
	border: 1px solid var(--accentColor);
  border-radius: 12px;
  background-color: #ffffff;
	margin:10px 5px 0 0;
  padding:10px 15px;
  color: var(--accentColor);
	text-decoration: none;
}

.cooperation-link:hover {
	color:#ffffff;
	background-color: var(--accentColor);
	text-decoration: none;
}

.list-design4 .item{
  border: 2px solid var(--accentColor);
}

.list-design4 .item img{
  object-fit: fill;
/*  object-position:50% 0;
  width: 100%;
  height: 60%;
  min-height: 240px;
  max-height: 280px!important;*/
}

/*=== 「～で探す」画面 ===*/
/*　ボタン色（トップ画面から転記） */
.clr-re a{
	font-weight:bolder;
	border: 2px solid var(--accentColor);
    background-color: #ffffff;
	color: var(--accentColor);
	text-decoration: underline;
}

.clr-re a:hover {
	color:#ffffff;
	background-color: var(--accentColor);
	text-decoration: none;
}

/*introに画面内リンク設置*/
  ul.link-box{
    /*text-align: center;*/
   display:flex;
    flex-wrap:wrap;
    justify-content:start;
    column-gap:1.8rem;
    row-gap:0.3rem;
    line-height:1.4;
  }

ul.link-box a{
    position:relative;
    text-decoration:none;
    color:var(--accentColor);
    margin-left: 0;
    font-size:1.2rem;
}
ul.link-box a:hover{
    color:#262626;
}

ul.link-box a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    background:var(--accentColor);
    transition:.3s;
}

ul.link-box a:hover::after{
    width:100%;
}

/*「学年で探す」英字フォントサイズ下げる*/
.en-font{
	font-size: 1.1rem !important;
}

/*時代で探すul間は空ける*/
.ulmg-top{
   margin-top:2.0rem;
}