@charset "utf-8";

/* ================= */
/* 要素のリセット    */
/* ================= */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* ================= */
/* 全体設定          */
/* ================= */
html, body {
    font: 13px marugo, HG丸ゴシックM-PRO, verdana, arial, sans-serif;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

#wrapper {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}


/* 文字サイズ  */
h1 {font-size: 2em;}
h2 {font-size: 1.6em;}
h3 {font-size: 1.3em;}
.text-area-100,.text-area-50{font-size: 1.1em; line-height: 26px;}


/* トップバナー  */
.main-banner {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.main-banner img {
    width: 960px;
    max-width: 100%;
    height: auto;
}

/* ボタン */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border {
  margin-bottom: 12px;
  padding: 0;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

  border-radius: 0;
}

a.btn-border span {
  position: relative;

  display: block;

  padding: 1.25rem 3rem;

  color: #000;
  border: 2px solid #000;
  border-radius: 0.5rem;
  background: #fff;
}

a.btn-border:before {
  position: absolute;
  bottom: -8px;
  left: 0;

  display: block;

  width: 100%;
  height: 14px;

  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

  border: 2px solid #000;
  border-top: 1px solid #000;
  border-radius: 0 0 0.5rem 0.5rem;
  background-image: -webkit-repeating-linear-gradient(
    135deg,
    #000,
    #000 1px,
    transparent 2px,
    transparent 5px
  );
  background-image: repeating-linear-gradient(
    -45deg,
    #000,
    #000 1px,
    transparent 2px,
    transparent 5px
  );
  background-size: 7px 7px;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;
}

a.btn-border:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
}

a.btn-border:hover:before {
  bottom: -5px;
}

a.btn-border:active {
  -webkit-transform: translate(0, 7px);
  transform: translate(0, 7px);
}

a.btn-border:active:before {
  bottom: -1px;
}

.center{
text-align: center;
margin-bottom: 20px;
padding-left: 2%;
padding-right: 2%;
}


/* ================= */
/* コンテンツ         */
/* ================= */
/* 枠  */
#on {border: solid 10px black; margin-bottom: 20px;}

/* セクション  */
.section {padding: 10px 15px;}

.section-containar {
    display: flex;
    margin-bottom: 20px;
}

.section-containar2 {
    display: flex;
    border-bottom: solid 2px black;
}

h1 {
    padding: 0 0 0 .35em;
    border-left: 8px solid black;
    border-bottom: 2px solid black;
    color: black;
    font-weight: bold;
    text-align: center;
}

h3:first-letter{
    font-size: 150%;
    color: #6495ed;
}

.text-area-100 {
    width: 95%;
    padding: 10px;
}

.text-area-50 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    padding: 15px;
}

.text-area-50 p {padding: 10px;}
.text-area-50 a:hover {opacity: 0.7;}

.text-area-50 img {
    width: 480px;
    max-width: 100%;
    height: auto;
}

.image-area {margin-top: auto;}

.image-area img {
    width: 380px;
    max-width: 100%;
    height: auto;
}


/* 下部バナー  */
.banner {
    text-align: center;
    margin-bottom: 20px;
}

.banner img {
    width: 846px;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.banner a:hover {opacity: 0.7;}

/* フッター  */
footer p {
    text-align: center;
    font-size: 11px;
    color: #fff;
    background: black;
    padding: 10px;
    margin-top: 20px;
}

footer a {color: #fff;}


/* スマホ  */
@media screen and (max-width: 630px) {
    h1 {font-size: 1.8em;}
    h2 {font-size: 1.5em;}
    h3 {font-size: 1.2em;}
    .text-area-100,.text-area-50{font-size: 1.1em; line-height: 26px;}

    .main-banner {margin-bottom: 10px;}

    .section-containar {flex-wrap: wrap; flex-direction: column;}
    .section-containar2 {flex-wrap: wrap; flex-direction: column; border-bottom: none;}
    .text-area-100 {width: 100%; box-sizing: border-box;}
    .text-area-50 {width: 100%; padding: 0; box-sizing: border-box; border-bottom: solid 2px black;}
    h2 {padding-top: 20px;}

}