/* ------------------------ 
  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: 3em;
}

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


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

/* ------------------------ 
  footer            
--------------------------- */
footer {
  width: 100%;
  margin-top: 3em;
}
footer .footermenu {
  text-align: left;
  padding: 15px 2em;
  background-color: #1c3018;
  color:#ddd;
}
footer .footercopyright {
  text-align: center;
  padding: 3px 0;
  background-color: #1c3018;
  color: #ddd;
}

/* ------------------------ 
  各見出し           
--------------------------- */
h2 {
  position: relative;
  font-family: 'ヒラギノ角ゴ ProN W3', 'HiraKakuProN-W3', 'Hiragino Mincho ProN', '游ゴシック', 'Yu Gothic', 'Meiryo', 'Verdana', 'Helvetica', 'Arial', 'sans-serif';
  text-align: left;
  color: #f3d23e;             /*文字色*/
  font-size: 20px;              /*文字サイズ*/
  padding: 0.5rem 1.5rem;       /*文字回りの余白（上下左右）*/
  display: block;
  border: 1px solid #f3d23e;  /*囲み線（太さ 実線 色）*/
  box-shadow: 5px 7px 0 #8f9e8f;  /*影（左右距離 上下距離 ぼかしサイズ 色*/
  /*background-color: #324131;    背景色*/
  background-image: linear-gradient(to left, #6a8f67 -50%, #324131 100%);
}

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: #ddd;
  text-decoration: none;
}
footer a:visited {
  color: #ddd;
}
footer a:hover {
  color: #f1c100;
  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;
}
@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;
  font-size: 16px;
  line-height: 190%;
}
.container .catch{
  width: 300px;
  height: 259px;
}
.container .con_text {
  width: 580px;
  text-align: left;
  margin: 1em;
}

/* ------------------------ 
  ウィンドウサイズ用調整
--------------------------- */
/* ■ 幅が 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: 350px;
  }
  .container .con_text {
    width: 350px;
    padding: 1em;
  }
}


/* ------------------------ 
  ボタン関係
--------------------------- */
.button04 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*margin: 0 auto;*/
  padding: 0.5em 1.5em;
  width: 270px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  background-color: #85bdba;
  border: 0px solid #85bdba;
  border-radius: 10px;
}
.button04 a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}
.button04 a:link {
  color: #fff;
  text-decoration: none;
}
.button04 a:visited {
  color: #18524f;
}
.button04 a:hover {
  color: #913f1f;
  text-decoration: none;
  background-color: #f3a790;
}
.button04 a:hover::after {
  border-top: 3px solid #000;
  border-right: 3px solid #000;
}
.button04 a:active {
  color: #2285b1;
  text-decoration: none;
}


@media screen and (max-width: 620px) {
  .button04 {
    width: 270px;
  }
}