@charset "utf-8";

/* PERIOD
---------------------------------------- */

.scheme ul {padding-left: 10px; font-size: 0;}
.scheme li {display: inline-block; margin-right: 10px; font-size: 100%;}

.flow {float: left; padding-left: 20px; width: 440px; margin-right: 40px;}
.flow dl {text-align: center; padding: 5px 10px 0; position: relative; margin-bottom: 55px;}
.flow dl:after {content: ""; position: absolute; left: 0; bottom: -45px; width: 0; height: 0; border-top: transparent 45px solid; border-left: transparent 210px solid; border-right: transparent 210px solid;}
.flow dl dt{font-size: 153%; font-weight: bold;}
.flow dl dd{font-size: 96%; font-weight: bold;}
.flow dl.day1 {background: #f08630; color: #fff;}
.flow dl.day1:after {border-top-color: #f08630;}
.flow ul.lattice li {display: table; width: 100%; height: 55px; border: #ddd 3px solid; background: url(../../common/img/bgi_lattice.png) repeat 0 0;}
.flow ul.lattice li a {display: table-cell; vertical-align: middle; text-align: center; background: url(../../common/img/icon_success.png) no-repeat 25px center; font-weight: bold; font-size: 128%;}

/*.curriculum {float: left; width: 440px;}*/
.example {padding: 25px; border: #ddd 3px solid; border-radius: 7px; margin-bottom: 40px;}
.example dl {position: relative;}
.example dl dt {position: absolute; top: -45px; left: -10px; padding: 5px; background: #fff; font-size: 115%; font-weight: bold;}
.example dl dd {margin-bottom: 15px;}
.example dl dd:last-child {margin-bottom: 0;}
.example dl dd ul li:before {content: "・";}

.spComp { border:3px solid #8fc31f; padding:20px 10px; border-radius:10px; }
.spComp ul {float:left;width:33%;padding: 0 5px;}
.spComp li { /*float:left; width:33%;*/ font-size:13px; }
.spComp .fsS { font-size:12px; }
	@media screen and (max-width: 480px) {
/*.spComp li { width:90%; }*/
.spComp ul { width:100%;float: none;}
	}

.curriBox { border: 5px solid #f08630; padding: 10px 30px; }

.pageTitle {font-size: 30px; text-align: center; background: #f1f1eb; color: #f08630; padding: 20px 0; margin-bottom: 30px;}
	@media screen and (max-width: 480px) {
		.pageTitle {font-size: 22px;}

	}
	
/*好事例集改修190322*/
.caseList { margin-top:20px; display: flex; padding-left: 45px;}
	@media screen and (max-width: 480px) {
.caseList {width: 100%;display: block;margin-right: 0;}
}

.caseList:nth-child(even) { margin-right: 0;}
.caseList dt.case-img { width: 100px; margin-right:10px; }
	@media screen and (max-width: 480px) {
.caseList dt.case-img { max-width: 100px; margin-right:0;margin-bottom: 5px; }
}

.caseList dt.case-img > img { border:1px solid #cccccc; }
.caseList dd a {font-size: 16px;display: inline-block;}
.caseList dd {font-size: 14px;}
.caseList.newflag { background: url("/period/img/flag.png") no-repeat left top;}

/*.shintai,.chiteki,.hattatsu,.seishin,.other {  }*/

.job_ico { 
color: #fff;
padding: 4px 0;
border-radius: 4px;
width: 50px;
text-align: center;
height: 28px;
display: inline-block;
vertical-align: top; 
margin-right: 10px;
line-height: 1.6;
}

.job_txt {width: 80%;}
	@media screen and (max-width: 480px) {
.job_txt {width: 100%;}
}


.support-collection h3 {
font-size: 20px;
font-weight: bold;
margin: 25px auto 0px;
border-bottom: 2px dotted #ccc;
cursor: pointer;
position: relative;
padding-bottom: 5px;
}
.support-collection h3::after {
  content: "";
  position: absolute;
  right: 25px;
  top: 25%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 2px #f08630;
  border-right: solid 2px #f08630;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.support-collection h3.opBtn.open::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 40%;
}

.support-collection h3 span {
margin-right: 10px;
font-size: 14px;
/*color: #e70e1e;*/
font-weight: normal;
}

.shintai-box h3 { color: #89c34b; }
.shintai .job_ico { background-color: #89c34b; }

.chiteki-box h3 { color: #ff7c80; }
.chiteki .job_ico { background-color: #ff7c80; }

.hattatsu-box h3 { color: #a550d0; }
.hattatsu .job_ico { background-color: #a550d0; }

.seishin-box h3 { color: #57b0dd; }
.seishin .job_ico { background-color: #57b0dd; }

.other-box h3 { color: #e9b107; }
.other .job_ico { background-color: #e9b107; }

li.lineheading {color: #8fc31f;font-weight: bold;}



/* PERIOD
---------------------------------------- */
.step-04 {
  margin-left: 7rem;
  margin-bottom: 2rem;
}


.curriculum {
  width: 90%;
  margin: 0 auto 20px;
 }
 
 dl.curriculum1 {
  background: #fff9e5;
  width: 100%;
  border: #fcc800 2px solid;
  padding: 15px 30px;
 }
 .curriculum1 dt, .curriculum1 dd {
  float: left;
  width: 100%;
 }
 .curriculum1 dt {
  color: #f08630;
  font-size: 128%;
  font-weight: bold;
  margin-bottom: 10px;
 }
 .curriculum1 dd {
     display: grid;
     grid-template-columns: 1fr 1fr;
 
 } 
 .tool_example {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 0 2rem 0;
}

 
 
 @media screen and (max-width: 768px){
  .curriculum {
  width: 100%;
 }
 .curriculum1 dt, .curriculum1 dd {
  float: none;
  width: 100%;
 }
 }


 .curriculum1 li {
  list-style-type: disc;
  margin-left: 1rem;
 }
 .curriculum1 .cu_photo {
     float: right;
 }
 
 @media screen and (max-width: 768px){
 .curriculum1 .cu_photo {
  float: none;
  text-align: center;
  display: block;
  margin-top: 1rem;
 }

 .step-04 {
  margin-left:0;
}


 }