@charset "UTF-8";
/* CSS Document */

.widget-type-rich_text h2 {
color: #00349d;
font-size: 24px;
background-color: #f3f5fa;
border-radius: 6px;
padding: 12px 20px;
margin-bottom: 30px;
}

.widget-type-rich_text h3 {
font-size: 20px;
font-weight: bold;
margin: 0 0 20px 0;
padding: 0 10px;
}

.widget-type-rich_text p {
margin: 0 10px 20px;
}

.widget-type-rich_text ul,
.widget-type-rich_text ol{
font-size: 16px;
margin: 0 10px 20px;
padding: 0 0 0 24px;
}

.widget-type-rich_text ul li {
position: relative;
list-style: none;
font-weight: bold;
}

.widget-type-rich_text ul li::after {
display: block;
content: '';
position: absolute;
top: .5em;
left: -1em;
width: 10px;
height: 10px;
background-color: #fff;
border: 3px solid #0054FF;
border-radius: 100%;
}


/*************************
セミナーフロー図
*************************/

.step-outer {
border-radius: 6px;
padding: 40px;
background: #f3f5fa;
}

.box-title {
display: flex;
margin-bottom: 30px;
}
.title-l {
width:80%;
height:50px;
text-align: left;
}
.title-r {
width:20%;
height:50px;
text-align: right;
}

.title-r img,
.title-l img {
height:50px;
}

.step-container {
display:flex;
}

.box-step {
display:flex;
flex-direction: column;
width: 20%;
padding: 0 10px 0 0;
background-image: url("https://f.hubspotusercontent10.net/hubfs/8735563/zac_selfplan/arrow_pc.png");
background-position: center right 0px;
background-repeat: no-repeat;
background-size: 10px 12px;
}

.step4,
.step5 {
	background-image: none;
}

.step5 {
	padding: 0 0 0 10px;
}

.box-step-inner {
display:  flex;
padding: 20px;
flex-grow: 1;
border: 1px solid #D3DEF1;
background: #ffffff;
}

ol.card {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

li.card-step {
	text-align: center;
	height: 115px;
	padding-bottom: 15px;
	/*background: #eeeeee;*/
}

	li.card-step img {
		width: 100%;
		max-width: 60px;
	}

li.card-list {
	padding-bottom: 10px;
	/*background: #dddddd;*/	
}

li.card-list ul {
	margin: 0;
	padding: 0 0 0 17px;
}

div.step5 li.card-step {
	padding-top: 35px;
	font-size: 20px;
	font-weight: bold;
	color:#00349d;
}



/*************************
セミナー内容BOX
*************************/

/***** 大枠　　*****/
.span6 {
position: relative;
border: 1px solid #D5D5D5;
}

.box-contents {
}

.box-contents p,
.box-contents ul,
.box-contents ol{
margin: 0;
padding: 0;
list-style: inside;
}

.box-inner {
padding: 30px 30px 100px 30px;
}

/****** 最後の枠が一つだけの時 *********/
.last-box {
	position: relative;
	width: 48.618784527%;
	border: 1px solid #D5D5D5;
}


/***** タイトル　　*****/  
ol.title-contents {
list-style: none;
display: flex;
width: 100%;
height: 80px;
align-items: center;
border-bottom: 1px solid #D5D5D5;
}

ol.title-contents li {
width: 80px;
color: #00349d;
}

li.title-left {
text-align: center;
padding-top: 12px;
height: 80px;
font-size: 18px;
font-weight: bold;
line-height: 26px;
border-right: 1px solid #D5D5D5;
}

	li.title-left span {
	  font-size: 32px;
	}

li.title-right {
flex: 1;
padding: 0 20px;
font-size: 22px;
font-weight: bold;
line-height: 32px;
}

/***** 開催日時　　*****/
ol.date-box {
list-style: none;
display: flex;
width: 100%;
align-items: flex-start;
margin-bottom: 20px;
}

li.date-label {
width: 85px;
}

	li.date-label span {
	  font-size: 14px;
	  background: #FCCF00;
	  padding: 4px 8px;
	  border-radius:4px;
	}

li.date-info {
flex: 1;
font-size: 16px;
font-weight: bold;
line-height: 22px;
padding-top: 2px;
}

ol.day {
	list-style: none;
}

ol.day li {
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
}

	/*li.date-info span {
	  font-size: 18px;
	  padding: 0 2px;
	}*/

p.info-text {
font-size: 16px;
margin-bottom: 20px;
}


ul.info-list {
margin: 0 0 20px 20px;
}

/***** ボタン　　*****/
div.box-btn {
position:absolute;
bottom:0px;
width:100%;
height: 100px;
padding: 10px 15% 30px;
text-align: center;
}

a.btn-form {
text-decoration: none;
}

a.btn-form p {
width: 100%;
color: #ffffff;
font-size: 16px;
text-decoration: none;
text-align: center;
padding: 10px;
border-radius:100vh;
background-color: #00349d;
}

a.btn-form:hover {
text-decoration: none;
}

a.btn-form:hover p {
color: #000000;
text-decoration: none;
background: #FCCF00;
}



@media (max-width: 767px) {

h1 {
	font-size: 24px;
}
	
.widget-type-rich_text h2 {
	font-size: 20px;
}

.widget-type-rich_text h3 {
	font-size: 18px;
}
	
/*************************
セミナーフロー図
*************************/
	
.step-outer {
	padding: 20px 20px;
}
	
.box-title {
	margin-bottom: 15px;
}
.title-l {
	height:35px;
}
.title-r {
	height:35px;
}

.title-r img,
.title-l img {
	height:35px;
}

.step-container {
	display:block;
}

.box-step {
	width: 100%;
	padding: 0 0 10px 0;
	background-image: url("https://f.hubspotusercontent10.net/hubfs/8735563/zac_selfplan/arrow_sp.png");
	background-position: bottom 0px center;
	background-repeat: no-repeat;
	background-size: 12px 10px;
}
	
	.step4,
	.step5 {
		background-image: none;
	}

.box-step-inner {
	padding:10px;
}
	
ol.card {
	display: flex;
	align-items:center;
	/*list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;*/
}

li.card-step {
	width: 25%;
	padding: 0;
	height:auto;
	/*background: #eeeeee;*/
}
	
	li.card-step img {
		width: 100%;
		max-width: 40px;
	}

li.card-list {
	width: 75%;
	padding: 0 0 0 15px;
	/*background: #dddddd;*/
}
	
div.step5 li.card-step {
	padding-top: 0;
	font-size: 18px;
}
	
/*************************
セミナー内容BOX
*************************/

/***** 大枠　　*****/
	
.span6 {
	margin-bottom: 20px !important; 
}

.box-inner {
	padding: 15px 15px 100px 15px;
}

/****** 最後の枠が一つだけの時 *********/
.last-box {
	width: 100%;
}
	
/***** タイトル　　*****/


li.title-left {
font-size: 16px;
line-height: 26px;
}

	li.title-left span {
	  font-size: 28px;
	}

li.title-right {
font-size: 18px;
line-height: 28px;
}
	
a.btn-form:hover p {
color: #ffffff;
background: #00349d;
}
	
	
}