* {
   margin: 0;
   padding: 0; /* 全てのプロパティの余白とパディングをリセットしています。*/
}


body {
max-width: 1000px;
margin:0 auto;
border: 1px solid #cccccc;
}

/* デザインB（スマホ） */
@media only screen and (max-width: 1024px) {
body {
max-width: 100%;
margin:0 auto;
}
}

#container {
  display: flex;
}
#side {
  width: 20%;
  padding: 10px;
}
#main {
  width: calc( 100% - 20% );
  padding: 20px;
}
#header {
    text-align: center;
}
#header img {
    border-bottom: 1px solid #cccccc;
}
#footer {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
ul.footer-menu li {
display: inline;
}
#menu {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
}


/* 画像スマホ調整 */
img {
max-width: 100% ;
height: auto;
}
.resizeimage img { width: 100%; }

/* ボーダー */
.bottom_line {
border-bottom: 1px solid #cccccc;
}

/* リンク下線なし画像薄く */

.menu_design_or a {
color: #3f3f3f;
text-decoration: none;
}
.menu_design_or a:hover {
color: #3f3f3f;
text-decoration: none;
}
.menu_design_b a {
color: #3f3f3f;
text-decoration: none;
}
.menu_design_b a:hover {
color: #3f3f3f;
text-decoration: none;
}
a img {
  opacity: 1;
  transition: 0.3s;
}
a:hover img {
  opacity: .5;
}

/* メニューリスト */

#side ul {
  list-style: none;
}

.menu_design_or ul {
  display: flex;
  flex-wrap: wrap;
}
.menu_design_or li {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
  margin: 8px 0px;
  width: 100%;
}
.menu_design_or li::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #f4a006;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.menu_design_or li:hover::after {
  transform: scale(1, 1);
}


.menu_design_b ul {
  display: flex;
  flex-wrap: wrap;
}
.menu_design_b li {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: bold;
  margin: 8px 0px;
  width: 100%;
}
.menu_design_b li::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #0066CC;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.menu_design_b li:hover::after {
  transform: scale(1, 1);
}



/* 見出し */
#main h3 {font-size: 1em;
          border-bottom: 1px dashed #cccccc;}