@charset "utf-8";

/*--------------------------------------------------------
  webフォント読み込み
--------------------------------------------------------*/

@font-face {
	font-family: "じゅん34M";
	src: url('../fonts/Jun34Pro-M.woff') format('woff');
}

/*--------------------------------------------------------
  HTML
--------------------------------------------------------*/

  body {
    margin: auto;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, sans-serif;
    font-size: 100%;
  }

  h1 {
    font-family: "じゅん34M";
    font-size: 1.8em;
    text-align: center;
  }

  h2 {
    font-family: "じゅん34M";
    font-size: 1.5em;
    font-weight: normal;
    margin: 1em 0 0 0;
  }

  h3 {
    font-family: "じゅん34M";
    font-size: 1.2em;
    font-weight: normal;
    margin: 0 0 0 0;
  }

  /*--------------------------------------------------------
    headerモジュール
  --------------------------------------------------------*/

  #header_cont {
    max-width: 1100px;
    height: 100px;
    margin: auto;
  }

  #header_logo {
    width: 40%;
    max-width: 400px;
    margin: auto;
    float: left;
  }

  #header_logo img {
    display: inline;
    max-width: 400px;
  }

  #header_addr {
    width: 60%;
    max-width: 400px;
    float: right;
    text-align: right;
    margin-top:10px;
    margin-right: 10px;
  }

  /*--------------------------------------------------------
    メイン部分
  --------------------------------------------------------*/
  article#main {
    clear:both;
    width: 100%;
    max-width: 1080px;
    display: block;
    background: #e0ffff;
    margin: 0.5em auto;
    border: 1px solid;
  }

  div#main_cont {
    display: block;
    padding: 1em 2em 1em 2em;
  }

  p#main_cont {
    margin: 0 0 0.8em 2em;
  }

  .guide {
    font-size: 0.9em;
    text-align: right;
    padding: 0.5em 2em 0.5em;
  }

  .guide a {
    padding-right: 25px;
    background-image: url("../images/arrow-r.png");
    background-repeat: no-repeat;
    background-position: right;
  }

  /*--------------------------------------------------------
    Section 2 & 3 部分
  --------------------------------------------------------*/
  .box {
    margin     : auto;
    display    : flex;
    flex-wrap  : wrap;
    flex-grow  : 1;
  }

  .box div {
    box-sizing : border-box;
    border-radius: 10px;
    background : #87cefa;
    width      : 230px;
    margin     : 10px auto;
    padding    : 10px 10px 10px 15px;
  }

  .box img {
    width : 200px;
    height: 120px;
  }

  .box img#new_but {
    width  : 40px;
    height : 20px;
  }

  .box ul {
    margin : 0 0 15px 0;
  }

  .box li {
    margin : 0 0 10px -15px;
  }

  .box figcaption {
    text-align: center;
    background   : linear-gradient(transparent 50%, #ffa64d 75%);
  }

  /*--------------------------------------------------------
    Section 1 部分
  --------------------------------------------------------*/
  .box3 {
    margin     : auto;
    display    : flex;
    flex-wrap  : wrap;
    flex-grow  : 1;
  }

  .box3 div {
    box-sizing : border-box;
    border-radius: 10px;
    background : #87cefa;
    width      : 320px;
    margin     : 10px auto;
    padding    : 10px 10px 10px 15px;
  }

  .box3 img#new_but {
    width  : 40px;
    height : 20px;
  }

  .box3 ul {
    margin : 0 0 15px 0;
  }

  .box3 li {
    margin : 0 0 15px -15px;
  }

  /*--------------------------------------------------------
    Section 2 部分
  --------------------------------------------------------*/
  .box2 {
    margin     : auto;
    display    : flex;
    flex-wrap  : wrap;
    flex-grow  : 1;
  }

  .box2 div {
    box-sizing : border-box;
    border-radius: 10px;
    background : #87cefa;
    width      : 480px;
    margin     : 10px auto;
    padding    : 10px 10px 10px 15px;
  }

  .box2 img#new_but {
    width  : 40px;
    height : 20px;
  }

  .box2 ul {
    margin : 0 0 15px 0;
  }

  .box2 li {
    margin : 0 0 15px -15px;
  }

  /*--------------------------------------------------------
    再下列　コピーライト
  --------------------------------------------------------*/
  #pagetop {
    width: 100%;
    max-width: 1080px;
    display: block;
    margin: 1em auto 0;
  }

  #pagetop a {
    display: block;
    width: 400px;
    font-size: 1em;
    text-align: center;
    color: #ffffff;
    background-color: #0047c7;
    padding-top: 10px;
    margin: 0px 0px 0px auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  #pagetop a:visited {
    color: #ffffff;
  }

  #pagetop a:hover {
    background-color: #507ac7;
  }

  #footer{
    width: 100%;
    border-top: 3px solid #0047c7;
  }

  .copyright {
    font-size: 0.875em;
    text-align: center;
    color: #fff;
    background-color: #0030af;
    padding: 0.5em 0;
  }