@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 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 1 DAM CARD FOLDER 部分
  --------------------------------------------------------*/
.card-box {
  margin     : auto;
  display    : flex;
  flex-wrap  : wrap;
}

.singlebox {
  box-sizing : border-box;
  border-radius: 10px;
  background : #000080;
  color: #ffffff;
  width      : 990px;
  margin     : 10px auto;
  padding    : 10px 20px 20px 20px;
  display    : flex;
  flex-wrap  : wrap;
}

.card-fol {
  box-sizing : border-box;
  border-radius: 10px;
  background : #87cefa;
  width      : 450px;
  margin     : 10px auto;
  padding    :10px 10px 10px 10px;
  display    : flex;
  flex-wrap  : wrap;
  color      : #000000;
  font-weight: bold;
}

.card-fol p {
  font-family: "じゅん34M";
  font-size  : 1.2em;
  line-height: 1.2;
  margin     : 0.2em 0 0 0;
  color      : #000000;
}

.card-fol div {
  box-sizing : border-box;
  width      : 200px;
  margin     : 10px auto;
  padding    : 5px 0px 5px 5px;
  text-align : center;
}

.card-fol img {
    width  : 170px;
    height : 240px;
}

.card-fol figcaption {
  color       :#000000;
  background  : linear-gradient(transparent 50%, #ffa64d 65%);
  font-weight : bold;
}

.cf-sample {
    width  :400px;
    height :240px;
    float  :right;
    margin :10px 10px 10px 10px;
}
  /*--------------------------------------------------------
    Section 2 部分
  --------------------------------------------------------*/
.h-singlebox {
  margin     : auto;
  display    : flex;
  flex-wrap  : wrap;
}

.h-singlebox div {
  box-sizing : border-box;
  border-radius: 10px;
  background : #000080;
  color: #ffffff;
  width      : 990px;
  margin     : 10px auto;
  padding    : 10px 20px 5px 20px;
}


.h-box {
  margin     : auto;
  display    : flex;
  flex-wrap  : wrap;
}

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

.h-box img {
    width: 210px;
    height:150px;
}

.h-box figcaption {
  background   : linear-gradient(transparent 50%, #ffa64d 65%);
  font-weight  : bold;
}

.v-box {
  margin     : auto;
  display    : flex;
  flex-wrap  : wrap;
}

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

.v-box img {
    width: 150px;
    height:210px;
}

.v-box figcaption {
  background   : linear-gradient(transparent 50%, #ffa64d 65%);
  font-weight  : bold;
}

  /*--------------------------------------------------------
    再下列　コピーライト
  --------------------------------------------------------*/
  #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;
  }