/* ==================== sass.css ==================== */

@charset "UTF-8";
#contents #foods {
  display: grid;
  grid-row-gap: 1.5em;
  border: 4px solid #fab2e1;
  border-radius: 1.5em;
  margin: 2em auto 0;
}
@media (max-width: 640px) {
  #contents #foods {
    padding: 1em;
  }
}
@media (min-width: 641px) {
  #contents #foods {
    box-sizing: border-box;
    width: 800px;
    padding: 1.5em;
  }
}
#contents #foods > div {
  display: grid;
  grid-row-gap: 1em;
}
#contents #foods > div:nth-of-type(2) {
  border-top: 3px dotted #fab2e1;
  padding-top: 1em;
}
#contents #foods .title {
  display: grid;
  grid-gap: 0.5em 1em;
  line-height: 1;
}
@media (max-width: 640px) {
  #contents #foods .title {
    justify-items: center;
  }
}
@media (min-width: 641px) {
  #contents #foods .title {
    grid-auto-flow: column;
    align-items: center;
    justify-content: start;
  }
}
#contents #foods .title h4,
#contents #foods .title h5 {
  margin: 0;
}
#contents #foods .title h4 {
  color: #8a035d;
  font-size: 130%;
}
@media (max-width: 640px) {
  #contents #foods .title h4 {
    font-size: 120%;
  }
}
#contents #foods .title h5 {
  border-radius: 1em;
  padding: 0.5em 1em;
  color: white;
  font-size: 110%;
}
@media (max-width: 640px) {
  #contents #foods .title h5 {
    font-size: 90%;
  }
}
#contents #foods > div:nth-of-type(1) h5 {
  background-color: #ff3700;
}
#contents #foods > div:nth-of-type(2) h5 {
  background-color: #459e00;
}
#contents #foods .list ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
@media (max-width: 640px) {
  #contents #foods .list.list-1 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
  }
  #contents #foods .list.list-1 ul li {
    width: calc((100% - 2em) / 3);
  }
}
@media (min-width: 641px) {
  #contents #foods .list.list-1 ul {
    display: grid;
    grid-gap: 1.5em;
    grid-template-columns: repeat(4, 7em);
    justify-content: center;
  }
}

@media (max-width: 640px) {
  #contents #foods .list.list-2 ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5em;
  }
}
@media (min-width: 641px) {
  #contents #foods .list.list-2 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
  }
  #contents #foods .list.list-2 ul li {
    width: 6.5em;
  }
}

@media (min-width: 641px) {
  #contents #foods .notes {
    margin-left: auto;
  }
}
#contents #foods .notes ul {
  display: grid;
  grid-row-gap: 0.25em;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#contents #foods .notes ul li {
  margin-left: 1em;
  text-indent: -1em;
}
#contents #foods .notes ul li:before {
  content: "＊";
}
#contents .column .title {
  background-color: #d42f9a;
  color: white;
  white-space: nowrap;
  padding: 0.5em 1em;
  border-radius: 1em;
  line-height: 1em;
  font-size: 120%;
}
@media (max-width: 640px) {
  #contents .column .title {
    display: inline-block;
    /* override */
    width: auto;
    font-size: 105%;
    line-height: 1.2;
  }
}
@media (min-width: 641px) {
  #contents .column .title span {
    position: relative;
    padding-left: 1.25em;
  }
}
@media (min-width: 641px) {
  #contents .column .title span:before {
    content: "●";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
}
@media (min-width: 641px) {
  #contents .column .title br {
    display: none;
  }
}
@media (max-width: 640px) {
  #contents .column#column1_2 {
    padding-top: 2em;
  }
}
#contents .column#column1_2 > div {
  position: relative;
}
@media (max-width: 640px) {
  #contents .column#column1_2 > div {
    padding-top: 1.5em;
  }
}
@media (min-width: 641px) {
  #contents .column#column1_2 > div {
    padding-left: 8em;
    box-sizing: border-box;
    width: 800px;
    background-image: url(../images/common/illust_teacher2.png);
    background-repeat: no-repeat;
    background-position: 1.5em bottom;
    background-size: 4.5em auto;
  }
}
#contents .column#column1_2 > div h4 {
  position: absolute;
  left: 0;
  top: 0;
  width: 6em;
  margin: 0;
  transform: translate(1em, -20%);
}
@media (max-width: 640px) {
  #contents .column#column1_2 > div h4 {
    transform: translate(1em, -50%);
  }
}
#contents .column#column1_2 > div ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  line-height: 1.6;
}
@media (max-width: 640px) {
  #contents .column#column1_2 > div ul {
    padding-top: 2em;
  }
}
#contents .column#column1_2 > div ul li {
  position: relative;
  padding-left: 2.5em;
  color: black;
}
#contents .column#column1_2 > div ul li:not(:first-child) {
  margin-top: 1em;
}
#contents .column#column1_2 > div ul li:before {
  position: absolute;
  left: 0;
  top: 0;
  content: " ";
  display: block;
  width: 2em;
  height: 2em;
  background: url(../images/display/column1_2_icon.svg) no-repeat center center;
  background-size: 2em 2em;
}
#contents .column#column1_2 > div ul li small {
  display: block;
  line-height: 1.5;
}
#contents .column#column1_2 > div ul li .caution {
  margin: 0.5em 0 0;
  color: red;
}



/* ==================== #contents/#column1_1.css ==================== */

#contents #column1_1 h5 {
	margin: 0;
	font-size: 120%;
	text-align: center;
}
#contents #column1_1 ul {
	margin: 1em -1em 0;
	padding: 0;
	list-style-type: none;
	display: table;
	table-layout: fixed;
	border-spacing: 1em 0;
}
#contents #column1_1 li {
	display: table-cell;
	vertical-align: top;
	width: 14em;
	background-color: white;
	border-radius: 1em;
	padding: 1em;
	text-align: center;
	color: black;
}
#contents #column1_1 li span {

}
#contents #column1_1 li img {
	display: block;
	margin: 0 auto 0.5em;
	width: auto;
	height: 8em;
}


@media (max-width: 640px) {
	#contents #column1_1 {
		margin-top: 2em;
	}
	#contents #column1_1 > div {
		padding-top: 3em;
	}
	#contents #column1_1 li {
		width: 10em;
		font-size: 90%;
	}
	#contents #column1_1 li:nth-of-type(2) br {
		display: none;
	}
	#contents #column1_1 li img {
		height: 7em;
	}
}



/* ==================== #contents/#main.css ==================== */

#main1_3 .image {
	vertical-align: bottom;
	width: 14em;
}
#main4_1 .image,
#main4_2 .image {
	width: 10em;
}
#main4_2 strong {
	display: block;
	margin: 0.5em 0;
}



/* ==================== #contents/#summary.css ==================== */

@media (min-width: 641px) {
	#summary2_1 .image {
		height: 10em;
	}
	#summary2_1 .text {
		vertical-align: middle;
	}
}



/* ==================== #contents/comment.css ==================== */

#contents .comment {
	margin: 2em auto 0;
	text-align: center;
}
#contents .comment > div {
	border-radius: 1em;
	background-color: #ffe8ff;
	color: #8a035d;
}
#contents .comment .image {
	width: 4.5em;
}
#contents .comment .text {
	text-align: justify;
}


@media (max-width: 640px) {
	#contents .comment > div {
		padding: 1em;
	}
	#contents .comment > div:after {
		content: ' ';
		clear: both;
		display: block;
		height: 0;
		font-size: 0;
	}

	#contents .comment .image {
		float: left;
		width: 4em;
		margin: 0 0.5em 0 0;
	}

}


@media (min-width: 641px) {
	#contents .comment > div {
		display: inline-table;
	}

	#contents .comment .image {
		padding: 1em 1.5em 0;
		vertical-align: bottom;
	}
	#contents .comment .text {
		vertical-align: middle;
		padding: 1.5em;
		padding-left: 0;
	}
	#contents .comment#comment2_1 > div {
		width: 42em;
	}
	#contents .comment#comment2_2 > div {
		width: 40em;
	}
	#contents .comment#comment2_3 > div {
		width: 38em;
	}
}



/* ==================== #contents/figure.css ==================== */

#contents .figure h4 {
	color: #ad0d76;
	border-left: 6px solid #fa73cb;
	padding-left: 0.5em;
	font-size: 130%;
}


@media (max-width: 640px) {
	#contents .figure h4 {
		font-size: 110%;
	}
}


@media (min-width: 641px) {
	#contents .figure {
		position: relative;
	}
	#contents .figure h4 {
		margin: 0;
	}
	#contents .figure#figure2_1 {
		width: 582px;
	}
}



/* ==================== #contents/sample.css ==================== */

#contents .sample {
	margin: 2em auto 0;
}


@media (min-width: 641px) {

	#contents .sample#sample2_1,
	#contents .sample#sample2_2,
	#contents .sample#sample2_5 {
		border: 1px solid #cccccc;
	}
	#contents .sample#sample2_1 {
		width: 765px;
	}
	#contents .sample#sample2_2 {
		width: 727px;
	}
	#contents .sample#sample2_3 {
		width: 573px;
	}
	#contents .sample#sample2_4 {
		width: 508px;
	}
	#contents .sample#sample2_5 {
		width: 477px;
	}

}