body {
  display: flex;
  flex-flow: space-between;
  height: 100vh;
  font-family: Nunito, sans-serif;
  margin: 0;
  color: #333333;
  line-height: 1.53em;
  font-size: 1.2rem;
  background: #fff;
}
div#page {
    margin: auto;
    max-width: 800px;
}
figure {
    width: unset !important;
}
p{
	font-size: 18px;
	font-weight:400;
	margin-top: 0;
}
p a {
    color: #0091ff;
}
blockquote.discord_shoutout {
    margin: 0;
}
blockquote p {
    margin: 0;
    color:#111111;
}
blockquote.discord_shoutout:has(a) {
    background-color: #FFBA0A;
    border-radius: 15px;
    padding: 15px;
	font-size: 18px;
    margin: 0;
	margin-bottom: 18px;
	font-weight: 500;
	color: #ffffff !important;
}
figcaption {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    margin-top: 0;
}
ol{
	font-size: 18px;
	font-weight:400;
	margin-top: 0;
}
ol li {
    margin-bottom: 18px;
}
ul li {
    margin-bottom: 10px;
    border-left: 3px solid #0091FF;
    padding-left: 15px;
}
h1{
	font-size: 36px;
	font-weight:600;
	margin-top: 0;
	line-height: initial;
}
h1.entry-title{
    text-align: center;
}
h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-top: 0;
    background-color: #0091FF;
    color: #ffffff;
    border-radius: 15px;
    padding: 10px 15px;
    margin: 35px 0;
}
h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-top: 0;
    background-color: #f5f5f5;
    border-radius: 15px;
    padding: 10px 15px;
    margin: 35px 0;
}
h4 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
    border-radius: 15px;
    padding: 10px 15px;
    margin: 35px 0;
    text-decoration: underline;
    text-align: center;
}
h5 {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin: 35px 0;
}
h6 {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
    margin: 35px auto;
    background-color: #0091FF;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px;
    width: fit-content;
}
.span_emp {
    background-color: #0091FF;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px;
    margin-left: 3px;
    margin-right: 3px;
}

 
main {
  flex: 3 3 100%;
  overflow: auto;
  padding: 2rem 3rem;
}
 
nav {
  flex: 0 0 300px;
  background-color: #333344;
  min-width: 240px;
  padding: 1rem;
  overflow-y: auto;
  display: none;
}
 
h1,
h2,
p,
blockquote {
  max-width: 700px;
}
 
a {
  color: #eeeeff;
  text-decoration: none;
}
 
.active {
  color: #ff8888;
  font-weight: bold;
}
 
ul {
  list-style: none;
  list-style-type: none;
  padding-left: 0.25rem;
}
ul li span, ul li strong {
    all: unset;
    color: unset;
    color: #eeeeff;
}
.guide-content-container {
    margin: auto;
    padding: 0px;
    border-radius: 25px;
    max-width: 675px;
}

.h2-contents-link{
    padding-inline-start: 0px;
}
.h3-contents-link{
    padding-inline-start: 40px;
}
.h4-contents-link{
    padding-inline-start: 80px;
}
.h5-contents-link{
    padding-inline-start: 120px;
}
.h6-contents-link{
    padding-inline-start: 160px;
}

.status0{
    background-color: #7DB1FF;
    color: #000000;
    font-weight: 500;
    margin-right: 0px;
	padding: 5px;
    border-radius: 5px;
    margin-left: 3px;
    margin-right: 3px;
}
.status1{
    background-color: #FF9A7A;
    color: #000000;
    font-weight: 500;
    margin-right: 0px;
	padding: 5px;
    border-radius: 5px;
    margin-left: 3px;
    margin-right: 3px;
}
.status2{
    background-color: #FFDD85;
    color: #000000;
    font-weight: 500;
    margin-right: 0px;
	padding: 5px;
    border-radius: 5px;
    margin-left: 3px;
    margin-right: 3px;
}
.status3{
    background-color: #BBFFBA;
    color: #000000;
    font-weight: 500;
    margin-right: 0px;
	padding: 5px;
    border-radius: 5px;
    margin-left: 3px;
    margin-right: 3px;
}

.content-break{
	margin: auto;
	margin-bottom: 35px;
	width: 100%;
	height: 2px;
	background: #EEEEEE;
}

.note-box {
    background-color: #f5f5f5;
    border-radius: 15px;
    padding: 15px;
	margin-bottom: 18px;
}
.note-box p {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
}
.notice-box {
    background-color: #f5f5f5;
    border-radius: 15px;
    padding: 15px;
	margin-bottom: 18px;
}
.notice-box p{
    padding-left: 10px;
    padding-right: 10px;
}
.notice-box .note-box{
    background-color: #ffffff;
    border-radius: 15px;
    padding: 15px;
	margin-bottom: 0px;
}
.notice-box .note-box p{
    padding-left: 0px;
    padding-right: 0px;
}
.example-sentence-box {
    background-color: #f5f5f5;
    border-radius: 15px;
    line-height: 40px;
    padding: 15px;
    margin-bottom: 18px;
}
.example-sentence-box p {
	margin-bottom: 0px;
}
.media-card-container {
    display: flex;
    clear: both;
    margin-bottom: 35px;
}
.media-card-4th {
    background-color: #ffffff;
    width: 23%;
    float: left;
    background: #FFFFFF;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 15%);
    border-radius: 20px;
    padding: 1%;
    margin: 0 7px;
}
.media-cover img {
    width: 100%;
    border-radius: 15px;
}
.media-title {
    text-align: center;
}
.wp-block-latest-posts__post-title {
	color: inherit !important;
	font-weight: bold !important;
	line-height: 36px;
}
.wp-block-latest-posts__list li {
	border: none !important;
	background-color: #F5F5F5;
	padding: 20px 25px;
	border-radius: 15px;
	margin: 30px 0;
}
.wp-block-list li {
	padding: 0;
	margin: 14px;
}
.wp-block-latest-posts__list.wp-block-latest-posts {
	max-width: 675px;
}
.img-logo{
	display: flex;
    width: 150px;
    margin: auto;
}
.img-centered{
	display: block;
    width: 50%;
    margin: auto;
    border-radius: 15px;
    margin-bottom: 18px;
}
.img-full {
    display: block;
    width: 100%;
    margin: auto;
    border-radius: 15px;
    margin-bottom: 18px;
}
img.logo{
	content: url("https://guide.mezasu.com/wp-content/themes/mezasu_guides/images/logo400.png");
}

@media (max-width: 800px) {
  /* mobile CSS: hide .desktop div */
  nav {
    display: none;
  }
  main {
    flex: 3 3 100%;
    overflow: auto;
    padding: 0rem 1.25rem;
  }
  .img-logo{
    width: 100px;
  }
}
@media (min-width: 800px) {
  /* desktop CSS: hide .mobile div */
  nav {
    display: display;
  }
  .img-logo{
    width: 150px;
  }
}