*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:"Yu Gothic","Meiryo",sans-serif;

line-height:1.8;

background:#f7f7f7;

padding-top:80px;

}

/*======================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

height:80px;

background:#003333;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 30px;

box-shadow:0 3px 10px rgba(0,0,0,.2);

z-index:999;

}

.logo a{

font-size:28px;

font-weight:bold;

text-decoration:none;

color:#fff;

}

.menu{

display:flex;

list-style:none;

}

.menu>li{

position:relative;

}

.menu>li>a{

display:block;

padding:30px 20px;

text-decoration:none;

color:#fff;

transition:.3s;

}

.menu>li>a:hover{

background:#0078d4;

}

/*====================*/

.submenu{

position:absolute;

left:0;

top:100%;

background:#fff;

list-style:none;

min-width:220px;

box-shadow:0 5px 15px rgba(0,0,0,.25);

opacity:0;

visibility:hidden;

transform:translateY(15px);

transition:.3s;

}

.dropdown:hover .submenu{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.submenu a{

display:block;

padding:12px 15px;

text-decoration:none;

color:#333;

border-bottom:1px solid #ddd;

}

.submenu a:hover{

background:#eee;

}

/*======================*/

main{

max-width:1000px;

margin:auto;

padding:40px;

background:#fff;

min-height:700px;

}

footer{

text-align:center;

padding:30px;

background:#003333;

color:#fff;

}

/*======================*/

#menuBtn{

display:none;

background:none;

border:none;

font-size:30px;

color:#fff;

cursor:pointer;

}

/*======================*/

@media(max-width:768px){

header{

height:auto;

padding:15px;

flex-wrap:wrap;

}

#menuBtn{

display:block;

}

nav{

display:none;

width:100%;

}

nav.show{

display:block;

}

.menu{

flex-direction:column;

}

.menu>li>a{

padding:15px;

border-top:1px solid rgba(255,255,255,.2);

}

.submenu{

position:static;

opacity:1;

visibility:visible;

transform:none;

box-shadow:none;

max-height:0;

overflow:hidden;

transition:max-height .4s;

background:#e8e8e8;

}

.dropdown.open .submenu{

max-height:600px;

}

.submenu a{

padding-left:35px;

}

.dropdown:hover .submenu{

opacity:1;

}

}

main img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border-radius: 8px;
}

h1{
    font-size:2.2rem;
    line-height:1.3;
    margin-bottom:20px;
}

h2{
    font-size:1.6rem;
    line-height:1.4;
    margin:30px 0 15px;
}
@media (max-width:768px){

    h1{
        font-size:1.5rem;
        line-height:1.2;
        margin:0 0 12px;
    }

    h2{
        font-size:1.15rem;
        line-height:1.25;
        margin:18px 0 8px;
    }

    p{
        font-size:0.95rem;
        line-height:1.7;
    }

}
table {
	font-size: 0.95em;
}

/* テーブル共通 */
table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    border:1px solid #ccc;
    padding:10px;
}

/* スマホ */
@media (max-width:768px){

    table{
        display:block;
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        white-space:nowrap;
    }

}

@media (max-width:768px){

    .dropdown.open .submenu{

        max-height:250px;      /* 必要に応じて調整 */
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;

    }

}