@charset "utf-8";
/*****************************************************************************
CSS only for /ew/pewbct/hito/digitalcontents/chokogaku/ page
*****************************************************************************/

/* Set
-----------------------------------------*/
.contentBlock h3 {
	margin-top: 50px!important;
}
.contentBlock em {
	font-weight: bold;
}

a[href^="tel:"] {
	color: #222;
	pointer-events: none;
	cursor: default;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	a[href^="tel:"] {
		pointer-events: auto;
	}
}

.Intro em {
	margin: 0 0.5em;
}

/* MemoList
-----------------------------------------*/
ul.MemoList li {
	font-size: 14px;
	line-height: 1.5;
	text-indent: -1em;
	padding: 0 0 0 1em;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	ul.MemoList li {
		font-size: 12px;
	}
}
ul.MemoList--num li {
	text-indent: -2em;
	padding: 0 0 0 2em;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	ul.MemoList--num li {
		text-indent: -1.5em;
		padding: 0 0 0 1.5em;
	}
}

/* MemoArea
-----------------------------------------*/
.MemoArea {
	font-size: 14px;
	margin-top: 16px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.MemoArea {
		font-size: 12px;
	}
}

/* MovieArea
-----------------------------------------*/
.MovieArea {
	aspect-ratio: 16 / 9;
	max-width: 560px;
	margin: 0 auto;
}
.MovieArea iframe {
  width: 100%;
  height: 100%;
}

/* Summary
-----------------------------------------*/
.Summary {
	display: grid;
	grid-template-columns: repeat(2, 45.75%);
	justify-content: space-between;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Summary {
    display: block;
  }
}
.Summary__box {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	position: relative;
	border: 1px solid #707070;
	border-radius: 8px;
	padding: 28px 35px 43px;
	box-sizing: border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Summary__box {
    display: block;
		padding: 18px 23px 35px;
  }
	.Summary__box + .Summary__box {
		margin-top: 56px;
	}
}

.Summary__box--plus::before,
.Summary__box--plus::after {
	content: '';
	background-color: #D0592B;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Summary__box--plus::before,
	.Summary__box--plus::after {
		top: auto;
		transform: translate(-50%, 0);
	}
}
.Summary__box--plus::before {
	width: 44px;
	height: 10px;
	right: -60px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Summary__box--plus::before {
		width: 33px;
		height: 8px;
		right: auto;
		bottom: -32px;
		left: 50%;
	}
}
.Summary__box--plus::after {
	width: 10px;
	height: 44px;
	right: -43px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Summary__box--plus::after {
		width: 8px;
		height: 33px;
		right: auto;
		bottom: -44.5px;
		left: 50%;
	}
}

.Summary__head {
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.contentBlock .Summary__title {
	text-align: center;
	background-color: transparent!important;
	border: none;
	padding: 0!important;
	margin: 0!important;
}
.Summary__title img {
	max-width: 100%;
}
.Summary__title--01 img {
	width: 40.3%;
}
.Summary__title--02 img {
	width: 89.7%;
}
.Summary__intro {
	font-size: 20px;
	font-weight: bold;
	margin-top: 20px;
}
.Summary__lead {
	font-size: 16px;
	font-weight: bold;
	padding: 11.5px 0;
}
.Summary__lead em {
	font-size: 40px;
}

.Summary__text {
	margin-top: 10px;
}
.Summary__text p {
	font-size: 14px;
	line-height: 2;
}

.Summary__list {
	margin-top: 20px;
}
.LabelList {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.LabelList .LabelList__item {
	font-weight: bold;
	text-align: center;
	width: calc((100% - 10px) / 2);
	padding: 8px;
	box-sizing: border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.LabelList .LabelList__item {
    font-size: 14px;
		padding: 8px 5px;
  }
}

.Color01 { background-color: #85A9D9; }
.Color02 { background-color: #E8868A; }
.Color03 { background-color: #FAC48D; }
.Color04 { background-color: #E0E996; }
.Color05 { background-color: #93D3C5; }
.Color06 { background-color: #E98CBB; }
.Color07 { background-color: #E99040; }

/* PriceData
-----------------------------------------*/
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.PriceData {
		white-space: nowrap;
    overflow-x: scroll;
  }
}
.PriceData table {
	font-size: 16px;
	line-height: 1.5;
	width: 100%;
	border-collapse: separate;
	border: 1px solid #AFB2CB;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.PriceData table {
		font-size: 14px;
		table-layout: fixed;
  }
}

.PriceData__group1 {
	width: 10.5%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.PriceData__group1 {
		width: 80px;
  }
}
.PriceData__group2 {
	width: 29.5%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.PriceData__group2 {
		width: 135px;
  }
}
.PriceData__group3,
.PriceData__group4 {
	width: 30%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.PriceData__group3,
	.PriceData__group4 {
		width: 200px;
  }
}

.PriceData th {
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #AFB2CB;
	border-bottom: 1px solid #AFB2CB;
	padding: 13px 10px;
	box-sizing: border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.PriceData th {
		white-space: normal;
  }
}
.PriceData__course th {
	color: #FFF;
}
.PriceData__course th:nth-of-type(1) {
	background-color: #8EA2BC;
}
.PriceData__course th:nth-of-type(2) {
	background-color: #394757;
}

.PriceData td {
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #AFB2CB;
	border-bottom: 1px solid #AFB2CB;
	padding: 13px 10px;
	box-sizing: border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.PriceData td {
		white-space: normal;
  }
}
.PriceData td:last-child {
	border-right: none;
}
.PriceData tr:last-child td {
	border-bottom: none;
}

/* BtnList
-----------------------------------------*/
.BtnList {
	display: flex;
	justify-content: center;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.BtnList {
		display: block;
	}
}

/* TblData
-----------------------------------------*/
.TblData {
	margin-top: 20px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData {
		white-space: nowrap;
    overflow-x: scroll;
  }
}
.TblData table {
	line-height: 1.5;
	width: 100%;
	border-collapse: separate;
	border: 1px solid #AFB2CB;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData table {
		table-layout: fixed;
  }
}
.TblData__title {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	color: #FFF;
	background-color: #404040;
	border-right: 1px solid #AFB2CB;
	border-bottom: 1px solid #AFB2CB;
	padding: 13px 13px;
	box-sizing: border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData__title {
		white-space: normal;
		padding: 13px 10px;
  }
}
.TblData td {
	font-size: 14px;
	vertical-align: middle;
	border-right: 1px solid #AFB2CB;
	border-bottom: 1px solid #AFB2CB;
	padding: 15px 13px;
	box-sizing: border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData td {
		white-space: normal;
		padding: 13px 10px;
  }
}
.TblData td:last-child {
	border-right: none;
}
.TblData tr:last-child td {
	border-bottom: none;
}

.TblData ul li {
	font-size: 14px;
	line-height: 1.5;
	padding-bottom: 0;
}

.TblData__explain {
	display: flex;
	flex-wrap: wrap;
}
.TblData__explain dt {
	width: 30%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData__explain dt {
		width: 40%;
  }
}
.TblData__explain dd {
	width: 70%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData__explain dd {
		width: 60%;
	}
}

/* TblData--01 */
.TblData--01 .TblData__title:nth-child(1) {
	width: 15%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData--01 .TblData__title:nth-child(1) {
		width: 150px;
	}
}
.TblData--01 .TblData__title:nth-child(2) {
	width: 14%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData--01 .TblData__title:nth-child(2) {
		width: 120px;
	}
}
.TblData--01 .TblData__title:nth-child(3) {
	width: 41%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData--01 .TblData__title:nth-child(3) {
		width: 280px;
	}
}
.TblData--01 .TblData__title:nth-child(4) {
	width: 30%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData--01 .TblData__title:nth-child(4) {
		width: 190px;
	}
}

/* TblData--02 */
.TblData--02 .TblData__title:nth-child(1) {
	width: 27.3%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData--02 .TblData__title:nth-child(1) {
		width: 180px;
	}
}
.TblData--02 .TblData__title:nth-child(2) {
	width: 7.7%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData--02 .TblData__title:nth-child(2) {
		width: 70px;
	}
}
.TblData--02 .TblData__title:nth-child(3) {
	width: 65%;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.TblData--02 .TblData__title:nth-child(3) {
		width: 250px;
	}
}

/* Flow
-----------------------------------------*/
.Flow {
	display: flex;
	gap: 0 6px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Flow {
		flex-wrap: wrap;
		gap: 20px 10px;
  }
}
.Flow__item {
	width: calc((100% - 6px * 3) / 4);
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Flow__item {
		width: calc((100% - 10px) / 2);
  }
}
.Flow__head {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	height: 100px;
	padding: 9px 7px 0 7px;
	box-sizing: border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Flow__head {
		background-size: cover;
		height: 110px;
		padding: 8px 5px 3px 5px;
	}
	.Flow__item--company > .Flow__head {
		border-left: 1px solid #A96223;
	}
}

.Flow__item--customer > .Flow__head {
	background-image: url(/ew/pewbct/hito/digitalcontents/chokogaku/img/bg_flow_01.svg);
}
.Flow__item--company > .Flow__head {
	background-image: url(/ew/pewbct/hito/digitalcontents/chokogaku/img/bg_flow_02.svg);
}

/* .Flow__head::before {
	content: '';
	background-color: #A96223;
	position: absolute;
	height: 100px;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.Flow__item--customer > .Flow__head::before {
	top: 0;
	right: -30px;
	width: 30px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Flow__item--customer > .Flow__head::before {
		right: -25px;
		width: 25px;
		height: 110px;
	}
}
.Flow__item--company > .Flow__head::before {
	top: -1px;
	right: -30px;
	width: 29px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Flow__item--company > .Flow__head::before {
		right: -25px;
		width: 24px;
		height: 110px;
	}
}

.Flow__item--company > .Flow__head::after {
	content: '';
	background-color: #FCF2DF;
	position: absolute;
	top: 0;
	right: -28px;
	width: 28px;
	height: 98px;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Flow__item--company > .Flow__head::after {
		right: -24px;
		width: 24px;
		height: 108px;
	}
} */

.Flow__item--customer > .Flow__head {
	color: #FFF;
	/* background-color: #A96223; */
}
/* .Flow__item--company > .Flow__head {
	background-color: #FCF2DF;
	border: 1px solid #A96223;
} */

.contentBlock .Flow__title {
	font-size: 23px;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	background-color: transparent!important;
	width: calc(100% - 30px);
	border: none;
	padding: 0!important;
	margin: 0!important;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.contentBlock .Flow__title {
		font-size: 17px!important;
		width: calc(100% - 20px);
  }
}
.contentBlock .Flow__title > span {
	font-size: 14px;
	display: block;
	text-align: left;
	padding-left: 0!important;
	margin-bottom: 9px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.contentBlock .Flow__title > span {
		font-size: 12px;
	}
}
.Flow__body {
	font-size: 14px;
	line-height: 1.5;
	margin-top: 10px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
	.Flow__body {
		font-size: 12px;
  }
}