@charset "UTF-8";

/************************************************
reset
************************************************/

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,picture,
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, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body {
  background: #fff;
  box-sizing: border-box;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  display:block;
}

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

ul,ol {
  list-style: none;
}

picture {
  display: block;
}

/************************************************
LAYOUT
************************************************/
body {
  background: #f3f1f0;
}
.wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  font-family: '游ゴシック', 'Yu Gothic', '游ゴシック体', YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
  box-sizing: border-box;
  position: relative;
  color: #111;
  background: #fff;
}

.wrapper img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.video{
    width: 90%;
    margin-left: 5%;
}

/************************************************
Q block
************************************************/
.qblock .inner {
  padding: 0 4%;
}
.q_list {
  padding:10% 4%;
}

.qblock li  {
  width: 100%;
  margin-bottom: 4%;
}

.qblock input[type=checkbox],
.qblock input[type=radio] {

  display: none;
}

.qblock input[type=checkbox]:focus,
.qblock input[type=radio]:focus{
  outline: 0;
  box-shadow: none;
}

.qblock label {
  cursor: pointer;
  position: relative;
  display: block;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  max-width: 638px;
  width: 100%;
}

.wrapper .qblock img.btn_on {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.wrapper .qblock input[type=checkbox]:checked + img.btn_on,
.wrapper .qblock input[type=radio]:checked + img.btn_on{
  display: block;
}

/************************************************
CV
************************************************/
.btn {
  margin: 0 auto 2%;
  padding: 0 3.2%;
}
.btn a:hover img {
  opacity:0.8;
  transition: all 0.3s ease;
}
p.notes {
  font-size:min(3.33vw,25px);
  padding: 0 3.2%;
  margin-bottom: 10%;
  text-align: center;
}
@media (max-width: 750px) {
  p.notes {
    font-size: 12px;
  }
}


/************************************************
footer
************************************************/
.footerLink {
  width: 100%;
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
.footerLink li a {
  color: #fff;
  text-decoration: none;
}
.footerLink li {
  margin: 0 10px;
}
.footerLink li + li:before {
  content: "|";
  color: #fff;
  padding-right: 20px;
}

.copy {
  text-align: center;
  padding: 10px;
}