@charset "utf8";

a{
text-decoration: none;
}

body{
margin: 0/;
font-family: sans-serif;
display: flex;
flex-direction: column;
overflow-x: hidden;  /* ← 横スクロールを防止 */
height: 100vh; }

header {
background-image:url(https://reserve-time.com/kamicho/ichinotsubo.info/img/IMG_1429_03.jpg);
background-size:cover;
background-position: left 35% top 25%;
color: white;
padding: 7em;
text-align: center;}

.container { flex: 1; display: flex; flex-direction: row; }

nav { background: #f4f4f4;
width: 200px;
padding: 1em;
transition: transform 0.3s ease-in-out; }

nav a{ text-decoration: none; }

main {flex: 1; padding: 0em 0.3em 0em 0em; }
p {font-size:120%; }

.menu-toggle { 
display: none;
position: absolute;
right: 5px;
top: 5px;
background: #FFF100;
color: #000000;
border: none;
padding: 0.5em 1em;
cursor: pointer;
opacity: 0.77;}

footer {
background: #333;
color: white;
padding: 1em;
text-align: center;}


.table_design09 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;}
.table_design09 tr {background-color: #e6f1f6;}
.table_design09 tr:nth-child(even) {background-color: #fff;}
.table_design09 th, .table_design09 td {padding: 1em;}
.table_design09 thead th {
  background-color: #4d9bc1;
  color: #fff;
  font-weight: bold;
  text-align: center;}
.table_design09 tbody th {color: #4d9bc1;}

.responsive-image {
    /* デフォルト（PCなどの広い画面）のスタイル */
    width: 50%; /* 例として固定幅 */
    height: auto; /* アスペクト比を維持 */
}



/* ↓↓スマートフォンなど表示用 */

\@media (max-width: 768px) {
.responsive-image {
        width: 100%; /* 画面幅いっぱいに表示 */
        max-width: 100%; /* 画面幅を超えないように */
    }
header {background-image:url(https://reserve-time.com/kamicho/ichinotsubo.info/img/IMG_1429_03.jpg);
background-size:cover;
padding: 2em;
background-position: left 35% top 7%;}

.container { flex-direction: column; }

nav {
position:fixed; /* ← absolute だと画面サイズに影響を与えることがある */
top: 60px;
right: 0;
height: calc(100% - 60px);
transform: translateX(100%);
z-index: 10; }

nav.active { transform: translateX(0); }

.menu-toggle { display: block; position: fixed;}




input[type=text], textarea { width:100%; padding:8px; box-sizing:border-box }
input[type=email], textarea { width:100%; padding:8px; box-sizing:border-box }
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border:1px solid #ddd}
.button{display:inline-block;padding:6px 10px;background:#1976d2;color:#fff;border-radius:6px;text-decoration:none}




.table_design09 {
border-radius: 0;
text-align: left;}
.table_design09 thead {display:none;}
.table_design09 tr {background-color: unset;}

.table_design09 th, .table_design09 td {
display: block;
border: 0;
border-bottom: 1px solid #4d9bc1;}

.table_design09 tbody th{
background: #4d9bc1;
color:#fff;
text-align: center;}

.table_design09 td::before{
content: attr(data-label);
background-color: #e6f1f6;
font-weight: bold;
display: inline-block;
width: 20%;
min-width: 4em;
text-align: center;
margin-right: 0.5em;
padding: 4px;
border-radius: 100vh;}


}/* ← \@mediaここまで */








body {
font-size:100%;
margin:0px 0px 70px 0px;
}

p {margin:0px 0px 0px 0px;}

h1 {text-align: center;}
h2 {margin:40px 0px 0px 3%;}
h3 {margin: 0px 0px 0px 4%;}
h4 {margin: 0px 0px 0px 5%;}

.page {
background-color:#fff;
padding: 20px 10px 50px 10px;
margin:0px auto 0px auto;
width:95%;
border: 5px solid #fff;
}

html {scroll-behavior: smooth;}

.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 50px;
bottom: 50px;
background: #fff;
border: solid 2px #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}

.pagetop__arrow {
height: 20px;
width: 20px;
border-top: 3px solid #000;
border-right: 3px solid #000;
transform: translateY(20%) rotate(-45deg);
}


.new_title {font-size:95%;color:#000;background-color:#eee;padding:5px 15px 5px 15px;}
.date {font-size:65%;color:#444;line-height: 0.5em;}
.excerpt {font-size:65%;color:#444;line-height: 0.2em;}