/* ------------------------ 
  body        
--------------------------- */
html {  
  font-size: 15px;
}
body {
  display: flex;
  flex-flow: column;
  /* align-items:flex-start; */
  /* position:center; */
  height: 100vh;
  width: 100%;
  text-align:center;
  margin: 0;
  padding: 0;
  flex:1;
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
}

/* ------------------------ 
  項目間隔
--------------------------- */
.interval_01 {
  margin-bottom: 5em;
}
.interval_02 {
  margin-bottom: 2em;
}

/* ------------------------ 
  header(nav.cssを利用_詳細もそちらに記載） 
--------------------------- */


/* ------------------------ 
  main            
--------------------------- */
main {
  background: #fff;
  color: #000;
  flex: 1;
  margin-top: 75px;
  z-index:0;
  user-select: none;  /*テキスト選択:禁止*/
}

/* ------------------------ 
  footer            
--------------------------- */
footer {
  width: 100%;
  margin-top: 5em;
}
footer .footermenu {
  text-align: left;
  padding: 20px 2em;
  background-color: #ccc;
  color:#444;
}
footer .footercopyright {
  text-align: center;
  padding: 3px 0;
  background-color: #000;
  color: #fff;
}

/* ------------------------ 
  各見出し           
--------------------------- */
h2 {
  position: relative;
  font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif;
  padding: 0.5rem 2rem;
  margin-left: -1em;
  margin-bottom: 2em;
  color: #fff;
  text-align: left;
  line-height: 180%;
  background-image: -webkit-gradient(linear, right top, left top, from(#30cfd0), to(#330867));
  background-image: -webkit-linear-gradient(right, #30cfd0 0%, #330867 100%);
  background-image: linear-gradient(to left, #30cfd0 0%, #330867 100%);
}
h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(151, 149, 158);
}

h3 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #435e79;/*左線*/
  text-align: left;
}

/* ------------------------ 
  ウィンドウ内中央化設定            
--------------------------- */
.windowcenter{    
  width: 70%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  max-width: 1000px;
  user-select:text;  /*テキスト選択:OK*/
}

/* ------------------------ 
  メイン :リンク表示関係            
--------------------------- */
main a:link {
  color: #313388;
  text-decoration: underline;
}
main a:visited {
  color: #313388;
}
main a:hover {
  color: #d44242;
  font-weight: bold;
  text-decoration: underline;
}
main a:active {
  color: #d44242;
  text-decoration: underline;
}

/* ------------------------ 
  フッター :リンク表示関係           
--------------------------- */
footer a:link {
  color: #444;
  text-decoration: none;
}
footer a:visited {
  color: #444;
}
footer a:hover {
  color: #313388;
  font-weight: bold;
  text-decoration: underline;
}
footer a:active {
  color: #d44242;
  text-decoration: underline;
}

/* ------------------------ 
  NEWS欄            
--------------------------- */
.newslist{
  margin-left: -1em;
  vertical-align: top;
  text-align: left;
  font-size:11pt;
  line-height:250%;
}

/* ------------------------ 
  main_ウィンドウサイズ用調整
--------------------------- */
/* ■ 幅が 783～1027px ならば ■  */
@media screen and (min-width: 783px) and (max-width: 1027px) {
  /* main */
  main{        
    margin-top: 110px;
  }
}
/* ■ 幅が 620～782px 以下ならば ■  */
@media screen and (min-width: 620px) and (max-width: 782px) {
  /* main */
  main{        
    margin-top: 140px;
  }
}
/* ■ 幅が 620px 以下ならば ■ */
@media screen and (max-width: 620px) {
  /* 項目間隔 */
  .interval_01 {
    margin-bottom: 2em;
  }
  .windowcenter{    
    width: 85%;
  }
  h2 {
    font-size: 16px;
    padding: 8px 1.5rem;
    margin-left: 0em;
    margin-bottom: 1.5em;
    line-height: 160%;
  }
  h2::before {
    border-bottom: none;
  }
  .newslist{   
    margin-left: -2em;
    height: 118px;
    overflow-y: scroll;
  }
}


.flex{
  max-width: 1000px;
  margin: 0 auto;
}
.cmp img{
  max-width: 100%;
  display: block;
  margin: 0 auto;
  text-align: left;
}
@media screen and (min-width:620px) { 
  .flex{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
  }
  .item+.item{
    margin-left:1em;
  }
}





/* ------------------------ 
  サブコンテンツ画面サイズへの柔軟対応           
--------------------------- */
.container {
  display: flex;
  justify-content: space-between; 
}
.container img{
  height: 100%;
}
.container .con_text {
  text-align: left;
  margin-left: 2em;
}

/* ------------------------ 
  ウィンドウサイズ用調整
--------------------------- */
/* ■ 幅が 1027px 以下ならば ■ */
@media screen and (max-width: 1027px) {
  
  .container {
    display: block; /*改行*/
  }
  .container .con_text {
    margin: 0 10px;
  }
}
/* ■ 幅が 620px 以下ならば ■ */
@media screen and (max-width: 620px) {
  
  .container img{
    max-width: 270px;
  }
}