body {
        margin: 0;
        padding: 0;
      font-family: Noto Sans JP, sans-serif;
    }
    
    .container {
        max-width: 1500px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        background-color:white;
     }

    .logo {
        margin-bottom: 5px;
        position: absolute;
        top: 20px; 
        left: 3%;
        transform: translateX(-10%);
        z-index: 1; 
	margin:15px;
        display:flex;
    }

    .logo img {
        max-width: 350px; 
        height: auto;
	margin-top:1%;
    }

    .title {
        background-color: #AFBCEA;
        color: white;
        text-align: center;
        padding: 10px 0;
        flex-grow: 1; 
    }

    .navigation {
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
	background-color:#333;
    }

    .navigation a {
        text-decoration: none;
        color: black;
        padding: 5px 10px;
	text-align:center;
	font-size:25px;
        color:#D9D9CC;
    }

    .navigation a:hover {
        background-color: #FFFFFF;
	color:#000000;
    }

a:hover {
    font-weight:bold;
  }

    .contenta {
        background-color: #FFFFF0;
        color: black;
        padding: 30px;
        text-align: justify;
	line-height:25px;
        font-size:20px;
	padding-left:50px;
        margin:3px;
    	border: 4px solid black;
    	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    }


    ol.inline-list li{
      display: inline;
      margin: 0; 
      padding: 0; 
    }

    ol.inline-list li {
      margin-right: 10px; 
      text-align:justify;
    }
	
    .arrangelist{
	margin: 0 10px;
        padding: 10pt;
        text-align: center;
     }

    .arrangelist a {
      margin-right: 20px; 
    }


.arrangelist a:hover {
      font-weight: bold;
    }

    .flow{
        line-height:15px;
}

.flow a{
	text-decoration: none;
        color:#333;
}


.flow a:hover {
      font-weight: bold;
    }


    footer {
      background-color: #333;
      color: #fff;
      padding: 5px;
      text-align: center;
    }
    footer a {
      color: #fff;
      text-decoration: none;
      margin: 0 10px;
      font-size: 20px;      
    }
    footer p {
      margin: 5px 0;
      font-size: 13px; 
    }


    @media (max-width: 768px) {
      footer {
        display: flex;
        flex-direction: column;
        text-align: left;
      }
      footer p {
        margin: 5px 20px;
      }

    .arrangelist{
        display: flex;
	flex-direction: column;
        text-align: left;

     }

 ol.inline-list li{
      display: block;

    }

    .navigation {
        display:block;
        background-color: #333;
        padding: 3px 0;
    }


    }


.h2c{
font-size:30px;
background-color:#FFFFF0;
text-align: center;
padding:20px;
justify-content: center;
}

.header {
  background-image: url('mac2.jpg');
  background-size: cover;
  background-position: top;
  height: 50vh; /* Set height to 100% of the viewport height */
  background-color: rgba(255, 255, 255, 0.1); 
  position: relative;
}

.word-art {
  font-family: 'Segoe Script', cursive; 
  text-shadow: 
    0 4px 0 rgba(0, 0, 0, 0.5), 
    4px 4px 8px rgba(0, 0, 0, 0.5); 
  display: flex;
  font-size:80px;
  margin-top:10%;
  margin-left:40%;
  color:white;
}

  .containerrec {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin-top: 20px; 
  }

  .item {
    box-sizing: border-box; 
    background-color: #FFFFF0; 
    display: flex;
    flex-direction: row; 
    align-items: center;
    text-align: left;
    line-height: 1.5; 
    margin-top;0px;
  }


  .item2 {
    width:95%; 
    margin: 5px;
    padding:15px; 
    box-sizing: border-box; 
    background-color: #FFFFF0; 
    display: flex;
    flex-direction: column; 
    text-align: left;
    border: 2px solid black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    line-height: 1.5; 
    margin-top;0px;
    padding-buttom:0px;
  }

  .item img {
    max-width: 300px; 
    height: auto;
    margin-right: 15px; 
  }



.itemp{
    font-size:22px;
    text-align:justify;
}

.itemhead{
    font-weight:bold;
    font-size:25px;
    padding:10px;
    padding-top:0px;
}

.item p {
    flex: 1; 
    line-height: 1.2;
  }

  .item h3 {
    margin-top: 0; 
    margin-bottom: 0px; 
    position: relative; 
    background-color:white;
  }


  .underline {
    text-decoration: none; 
    border-bottom: 15px solid #DEDE3E; 
    display: inline-block; 
    color: #1A1A18; 
  }


.highlight {
    background-color: #F9DDD6; 
    padding: 10px; 
    color:black;
    font-size:20px;
}


@media (max-width: 800px) {
  .header {
    height: 30vh; 
    position: relative;
  }
   .logo img {
        max-width: 200px; 
        height: auto;
	margin-top:0.1%;
    }

    .logo {
        margin-bottom: 5px;
        position: absolute;
        top: 5px; 
        left: 3%;
        transform: translateX(-10%);
        z-index: 1; 
        
    }

.word-art {
  font-family: 'Segoe Script', cursive; 
  text-shadow: 
    0 2px 0 rgba(0, 0, 0, 0.5), 
    2px 2px 4px rgba(0, 0, 0, 0.5); 
  display: flex;
  font-size:35px;
  margin-top:15%;
  margin-left:40%;
  color:white;
}

.item {
      width: 100%; 
      flex-direction: column; 
      text-align: justify; 
    }

    .item img {
      max-width: 100%; 
      margin-right: 0; 
    }

.itemp{
    font-size:18px;
}

.itemhead{
    font-size:20px;
}
.item2 {
    width:100%; 
}
}