@charset "Shift_JIS";

/* コンテンツ全体の幅設定*/

/* flexboxを使用・センター寄せ・縦ビュポートの高さ最小サイズを100%*/
body{
    display: flex;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}


/* コンテンツ全体の背景色・要素の並列化・幅・マージン*/
.container {
  background: #fff;
  justify-content: center;
  align-items: center;
  width: 1280px;
  margin: auto;
  flex: 1;
}


/* 余白指定 <div id="padding10">*/
#padding10 { padding-top: 2%; padding-bottom: 2%; padding-left: 10%; padding-right: 10%; }  

/* 幅指定 <div id="hidari40">*/
#hidari30 { padding: 60px; width:30%; float:left; }  
#hidari40 { padding: 60px; width:40%; float:left; }  
#hidari50 { padding: 60px; width:50%; float:left; }  
#hidari70 { padding: 60px; width:70%; float:left; }  
#migi30 { padding: 60px; width:30%; float:right; }  
#migi40 { padding: 60px; width:40%; float:right; } 
#migi50 { padding: 60px; width:50%; float:right; } 
#migi70 { padding: 60px; width:70%; float:right; }   


/* 幅1300以下の幅*/
@media (max-width: 1300px){
.container {
  width: 930px;
}
}

/* 幅960以下の幅*/
@media (max-width: 960px){
.container {
  width: 600px;
}
}


/* 幅600以下以下の幅*/
@media (max-width: 600px){
.container {
  justify-content: center;
  align-items: center;
  width:100%;
}
}