/* Another Option用外部スタイルシート */


body {
  margin: 0;
  padding: 0;
  background-color: #cccccc;
  overflow-wrap: anywhere;
}

a:link {color:#00f;}
a:visited {color:#9933ff;}
a:hover {color:#f00;}
a:active {color:#ff0;}

h2,h3,h4,h5{text-align: center;}

.kwaku01{margin: 0 auto; border: 10px outset #ccffff;background-color: #afeeee;}
.kwaku02{border : solid blue 1px; background-color : #97ffff; padding : 5px;}

.cent{margin-left: auto;margin-right: auto;}


header {
  width: 100%;
  height: 200px;
  max-width: 1200px;
  background-image: url(http://era.change.jp/wp/wp-content/uploads/2015/03/aoeoc_logo3.gif);
  background-size: cover;
  margin: 0 auto; 
}

header div{
  color: #fff;
  padding: 20px;
}

.ueobi {
  background-color: #000;
  height: 5px;
}

footer {
padding: 10px:
  color: #fff;
    width: 100%;
    max-width: 1200px;
    background-color: #666666;
    margin: 0 auto;
}

footer .ttl{
padding: 3px 20px;
text-align: right;
color: #fff;
}


.lw{line-height:150%;}

.lh {font-size: 0.8em;}

.lp {color: #cc0000;}

.rj {text-align: right;}
.cj {text-align: center;}


.aowaku01 {
   border-width : 10px;
   border-style : double;
   border-color : #ccc;
   padding:3px;
}


/* コンテナ */

.flex-container {
    display: flex; /* フレックスコンテナとして指定 */
    justify-content: space-between; /* 子要素の間にスペースを均等に配置 */
    align-items: stretch; /* 子要素の高さを揃える */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* コンテナを中央に配置 */
}

/* アイテム */


.left-column, .main-column, .right-column {
    padding: 20px;
    box-sizing: border-box; /* パディングとボーダーを含めてサイズを計算 */
}

.left-column {
    flex: 15;
    max-width: 15%;
    text-align: right;
    background-color: #eeeeee;
}

.left-column div{
margin-bottom: 1em;
}

.main-column {
    flex: 50;
    max-width: 50%;
    background-color: #fff;
}

.right-column {
    flex: 35;
    max-width: 45%;
    background-color: #fff;
}





/* タブレット用スタイルシート */

@media screen and (max-width: 1000px) 
{

}

@media screen and (max-width: 768px) 
{

.flex-container {flex-direction: column;}

.left-column {
    flex: 3;
    max-width: 100%;
    text-align: center;

  order: 1;

}

.main-column {
    flex: 3;
    max-width: 100%;
  order: 0;
}

.right-column {
    flex: 3;
    max-width: 100%;
  order: 2;
}


}

/* 中間用のスタイルシート1 */

@media screen and (max-width: 450px) 
{


}

/* 中間用のスタイルシート2 */

@media screen and (max-width: 400px) 
{


}

/* スマホ用スタイルシート */

@media screen and (max-width: 700px) 
{

}

@media screen and (max-width: 340px) 
{



}