/* _setting CSS */
body {
  height: 100%;
  margin: 0;
}

#wrapper:before {
  content: 'CV';
}

#contents {
  width: 100%;
  margin: 0.71429vw auto 3.57143vw;
  padding: 4.28571vw 0 0;
  background: #222222 url(../images/biography/cv/bg_img1.jpg) no-repeat center top/100%;
}

/* min-width:751px | 751px ~
------------------------------------------------------------------------- */
@media screen and (min-width: 751px) {
  /* @media screen
  ------------------------------------------------------------------------- */
  #wrapper:before {
    top: 20.2vw;
  }

  #contents .sec {
    width: 85.71429vw;
    margin: 0 0 4.28571vw auto;
    padding: 6.07143vw 30.35714vw 4.28571vw 6.07143vw;
    background: #fff;
    font-weight: 600;
  }
  #contents .sec h3 {
    position: relative;
    margin: 0 0 1.07143vw;
    padding: 0 0 0 1.78571vw;
    font-size: 1.42857vw;
    font-weight: 600;
  }
  #contents .sec h3:before {
    content: '';
    position: absolute;
    top: 46%;
    left: 0;
    width: 1.07143vw;
    height: 1px;
    background: #3c3c3c;
    transition: 0.7s cubic-bezier(0, 1, 0.975, 1) !important;
    transition-delay: 0.2s !important;
  }
  #contents #sec1 .box {
    display: flex;
    justify-content: space-between;
  }
  #contents #sec1 .box h4 {
    width: 16.78571vw;
    font-size: 1.28571vw;
    letter-spacing: 0;
    font-weight: 600;
  }
  #contents #sec1 .box .text {
    width: 35.35714vw;
    margin: 0 0 2.5vw;
    font-size: 1vw;
  }
  #contents #sec1 .box table {
    width: 100%;
  }
  #contents #sec1 .box table th,
  #contents #sec1 .box table td {
    width: 7.14286vw;
    padding: 0.28571vw 0;
    line-height: 1.8;
    font-size: inherit;
  }
  #contents #sec1 .box table td {
    width: 27.5vw;
  }
  #contents #sec1 .box .btn {
    margin: 1.07143vw 0 0;
  }
  #contents #sec1 .box .btn a {
    display: inline-block;
    position: relative;
    padding: 0.35714vw 3.57143vw;
    border: 1px solid #848484;
    transition: 0.4s;
    font-size: 1.28571vw;
  }
  #contents #sec1 .box .btn a:before {
    content: '';
    position: absolute;
    left: 1.07143vw;
    top: 50%;
    width: 0.57143vw;
    height: 0.57143vw;
    border: 1px solid #848484;
    border-top: none;
    border-left: none;
    transform: translateY(-55%) rotate(45deg);
  }
  #contents #sec1 .box .btn a:hover {
    opacity: 0.6;
  }
  #contents #sec2 {
    margin-left: 0;
    padding: 6.07143vw 5.71429vw 5vw 20.35714vw;
  }
  #contents #sec2 .msec {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: 2.85714vw 0 4.28571vw;
  }
  #contents #sec2 .msec .area {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 1.42857vw;
  }
  #contents #sec2 .msec .area h4 {
    width: 100%;
    margin: 0 0 0.35714vw;
    font-size: 1.42857vw;
    font-weight: 600;
  }
  #contents #sec2 .msec .area .list {
    width: 18.21429vw;
    margin: 0 0 0.71429vw;
    padding: 0 1.42857vw 0 0;
  }
  #contents #sec2 .msec .area .list h5 {
    position: relative;
    width: 100%;
    margin: 0 0 0.14286vw;
    padding: 0 0 0 1.42857vw;
    color: #848484;
    font-size: 1vw;
    font-weight: 600;
  }
  #contents #sec2 .msec .area .list h5:before {
    content: '';
    position: absolute;
    top: 46%;
    left: 0;
    width: 0.85714vw;
    height: 1px;
    background: #848484;
    transition: 0.7s cubic-bezier(0, 1, 0.975, 1) !important;
    transition-delay: 0.2s !important;
  }
  #contents #sec2 .msec .area .list ul li {
    font-size: 1vw;
    margin: 0 0 0.14286vw;
    padding: 0 1.07143vw 0 0;
  }
  #contents #sec2 .msec .area .list ul li a {
    position: relative;
  }
  #contents #sec2 .msec .area .list ul li a:after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #333;
    opacity: 0;
    transition: 0.5s;
  }
  #contents #sec2 .msec .area .list ul li a:hover:after {
    opacity: 1;
  }
  #contents #sec2 .msec .area .list2 {
    display: flex;
    flex-wrap: wrap;
    width: 37.85714vw;
  }
  #contents #sec2 .msec .map {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: 2.85714vw 0 4.28571vw;
  }
  #contents #sec2 .msec .map_info {
    position: relative;
    width: 22.85714vw;
    padding: 1.42857vw 0 0;
  }
  #contents #sec2 .msec .map_info li {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.42857vw;
    background: #333333;
    opacity: 0;
    transition: 0.3s;
    color: #fff;
    pointer-events: none;
  }
  #contents #sec2 .msec .map_info li.on {
    opacity: 1;
  }
  #contents #sec2 .msec .map_info li .text {
    order: 2;
  }
  #contents #sec2 .msec .map_info li .text h5 {
    margin: 0 0 0.71429vw;
    border-bottom: 1px solid #848484;
    font-size: 1.28571vw;
  }
  #contents #sec2 .msec .map_info li .text p {
    font-size: 1vw;
  }
  #contents #sec2 .msec .map_info li .img {
    margin: 0 0 1.07143vw;
    border: 1px solid #848484;
  }
  #contents #sec2 .msec .map.is-wide .map_info {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 31.42857vw;
  }
  #contents #sec2 .msec .map.is-wide .map_info li:nth-child(5) .text {
    width: 100%;
  }
  #contents #sec2 .msec .map.is-wide .map_info li:nth-child(5) .img {
    width: calc(50% - 10px);
    display: inline-block;
  }
  #contents #sec2 .msec .map.is-wide .map_info li:nth-child(5) .img:last-child {
    margin-left: 20px;
  }
  #contents #sec2 .msec .map.is-wide .map_img {
    margin-left: auto;
  }
  #contents #sec2 .msec .map_img {
    position: relative;
    width: 35vw;
    height: 36.28571vw;
    background: url(../images/biography/cv/map1.jpg) no-repeat center/100%;
  }
  #contents #sec2 .msec .map_img li {
    position: absolute;
    top: 65%;
    left: 61.5%;
  }
  #contents #sec2 .msec .map_img li a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1.42857vw;
    height: 1.42857vw;
    padding: 1px 0 0;
    border-radius: 100%;
    background: #333;
    color: #fff;
    font-size: 1vw;
    letter-spacing: 0;
  }
  #contents #sec2 .msec .map_img li a span {
    position: relative;
  }
  #contents #sec2 .msec .map_img li a:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.21429vw 0.71429vw 0 0.71429vw;
    border-color: #333 transparent transparent transparent;
  }
  #contents #sec2 .msec .map_img li.on {
    z-index: 1;
  }
  #contents #sec2 .msec .map_img li.on a {
    background: #EB58D5;
  }
  #contents #sec2 .msec .map_img li.on a:before {
    border-color: #EB58D5 transparent transparent transparent;
  }
  #contents #sec2 .sec2_2 .area {
    display: block;
  }
  #contents #sec2 .sec2_2 .map_img {
    width: 35vw;
    height: 22.85714vw;
    background: url(../images/biography/cv/map2.jpg) no-repeat center/100%;
  }
  #contents #sec3 {
    width: 100%;
    padding: 4.28571vw 0 0;
    background: #fff;
  }
  #contents #sec3 h3 {
    margin: 0 0 1.42857vw;
    font-size: 1.71429vw;
    font-weight: 500;
    text-align: center;
  }
  #contents #sec3 ul {
    display: flex;
    justify-content: space-between;
    width: 71.42857vw;
    margin: 0 auto;
  }
  #contents #sec3 ul li {
    width: 12.42857vw;
  }
  #contents #sec3 ul li a {
    transition: 0.4s;
  }
  #contents #sec3 ul li a:hover {
    opacity: 0.7;
  }

  /* @media screen
  ------------------------------------------------------------------------- */
}
/* ////.min-width:751px | 751px ~
---------------------------------------------------------------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
max-width:750px | ~ 750px
------------------------------------------------------------------------- */
@media screen and (max-width: 750px) {
  /* @media screen
  ------------------------------------------------------------------------- */
  #wrapper:before {
    top: 78vw;
  }

  #contents {
    margin: 4vw auto 0;
    padding: 0;
    background: #222222;
  }
  #contents .sec {
    width: 96vw;
    margin: 0 0 26.66667vw;
    padding: 16vw 4.8vw 8vw 8.53333vw;
    background: #fff;
    font-weight: 600;
  }
  #contents .sec h3 {
    position: relative;
    margin: 0 0 1.33333vw;
    padding: 0 0 0 6.66667vw;
    font-size: 5.33333vw;
    font-weight: 500;
  }
  #contents .sec h3:before {
    content: '';
    position: absolute;
    top: 46%;
    left: 0;
    width: 4vw;
    height: 1px;
    background: #3c3c3c;
    transition: 0.7s cubic-bezier(0, 1, 0.975, 1) !important;
    transition-delay: 0.2s !important;
  }
  #contents #sec1 {
    width: 100%;
    margin: 0 0 26.66667vw;
    padding: 26.66667vw 0;
    background: url(../images/biography/cv/bg_img1.jpg) no-repeat center top/auto 100%;
  }
  #contents #sec1 h3 {
    margin-bottom: 6.66667vw;
  }
  #contents #sec1 .inner {
    width: 96vw;
    padding: 16vw 4.8vw 16vw 8.53333vw;
    background: #fff;
    font-weight: 600;
  }
  #contents #sec1 .box h4 {
    margin: 0 0 1.33333vw;
    font-size: 4.8vw;
    font-weight: 600;
    letter-spacing: 0;
  }
  #contents #sec1 .box .text {
    margin: 0 0 6.66667vw;
    font-size: 3.73333vw;
  }
  #contents #sec1 .box .text p {
    line-height: 1.7;
  }
  #contents #sec1 .box table {
    width: 100%;
  }
  #contents #sec1 .box table th,
  #contents #sec1 .box table td {
    width: 12vw;
    padding: 0 0 2.66667vw;
    line-height: 1.8;
    font-size: inherit;
  }
  #contents #sec1 .box table td {
    width: 70.66667vw;
  }
  #contents #sec1 .box .btn {
    margin: 4vw 0 0;
  }
  #contents #sec1 .box .btn a {
    display: inline-block;
    position: relative;
    padding: 1.6vw 20.8vw;
    border: 1px solid #848484;
    transition: 0.4s;
    font-size: 4.8vw;
    letter-spacing: 0.05em;
  }
  #contents #sec1 .box .btn a:before {
    content: '';
    position: absolute;
    left: 4vw;
    top: 50%;
    width: 2.13333vw;
    height: 2.13333vw;
    border: 1px solid #848484;
    border-top: none;
    border-left: none;
    transform: translateY(-55%) rotate(45deg);
  }
  #contents #sec1 .box .btn a:hover {
    opacity: 0.6;
  }
  #contents #sec2 .msec {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    margin: 5.33333vw 0 16vw;
  }
  #contents #sec2 .msec .area {
    width: 100%;
    order: 2;
  }
  #contents #sec2 .msec .area h4 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    margin: 0 0 1.33333vw;
    color: #848484;
    font-size: 5.33333vw;
    font-weight: 600;
  }
  #contents #sec2 .msec .map {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
  }
  #contents #sec2 .msec .map_info {
    order: 2;
    position: relative;
    width: 100%;
  }
  #contents #sec2 .msec .map_info h5 {
    margin: 2.66667vw 0 0;
  }
  #contents #sec2 .msec .map_info h5 a {
    display: block;
    position: relative;
    width: 100%;
    padding: 2.66667vw 0 1.6vw;
    border: 1px solid #848484;
    font-size: 3.73333vw;
    text-align: center;
    letter-spacing: 0.05em;
  }
  #contents #sec2 .msec .map_info h5 a:before {
    content: '';
    position: absolute;
    left: 4vw;
    top: 50%;
    width: 2.13333vw;
    height: 2.13333vw;
    border: 1px solid #848484;
    border-top: none;
    border-left: none;
    transform: translateY(-55%) rotate(45deg);
  }
  #contents #sec2 .msec .map_info h5.on a {
    background: #E6E6E6;
  }
  #contents #sec2 .msec .map_info h5.on a:before {
    border: 1px solid #848484;
    border-bottom: none;
    border-right: none;
    transform: translateY(-28%) rotate(45deg);
  }
  #contents #sec2 .msec .map_info .info_list {
    order: 2;
    position: relative;
    width: 100%;
    height: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    background: #333333;
    transition: 0.7s linear;
  }
  #contents #sec2 .msec .map_info .info_list.on {
    height: auto;
    max-height: 1000vw;
  }
  #contents #sec2 .msec .map_info .info_list ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2.66667vw;
  }
  #contents #sec2 .msec .map_info .info_list li {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 37.33333vw;
    margin: 0 0 5.33333vw;
    transition: 0.3s;
    color: #fff;
  }
  #contents #sec2 .msec .map_info .info_list li:nth-last-child(1), #contents #sec2 .msec .map_info .info_list li:nth-last-child(2) {
    margin: 0;
  }
  #contents #sec2 .msec .map_info .info_list li .text {
    order: 2;
  }
  #contents #sec2 .msec .map_info .info_list li .text h5 {
    line-height: 1.4;
    margin: 0 0 2.66667vw;
    padding: 0 0 1.33333vw;
    border-bottom: 1px solid #848484;
    font-size: 3.73333vw;
  }
  #contents #sec2 .msec .map_info .info_list li .text p {
    font-size: 3.73333vw;
    letter-spacing: 0;
  }
  #contents #sec2 .msec .map_info .info_list li .text p .th,
  #contents #sec2 .msec .map_info .info_list li .text p .td {
    display: inline-block;
  }
  #contents #sec2 .msec .map_info .info_list li .img {
    margin: 0 0 2.66667vw;
  }
  #contents #sec2 .msec .map_info .info_list li .img img {
    border: 1px solid #848484;
  }
  #contents #sec2 .msec .map_info .info_list li.sp-wide {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  #contents #sec2 .msec .map_info .info_list li.sp-wide .img {
    display: inline-block;
    width: 37.33333vw;
  }
  #contents #sec2 .msec .map_info .info_list li.sp-wide .img:last-child {
    margin-left: 2.4vw;
  }
  #contents #sec2 .msec .map_img {
    position: relative;
    width: 100%;
    margin: 0 0 8vw;
    padding: 85.86667vw 0 0;
    background: url(../images/biography/cv/sp_map1.jpg) no-repeat center/100%;
  }
  #contents #sec2 .msec .map_img li {
    display: none;
  }
  #contents #sec2 .sec2_2 .map_img {
    padding: 66.66667vw 0 0;
    background: url(../images/biography/cv/sp_map2.jpg) no-repeat center bottom/100%;
  }
  #contents #sec3 {
    position: relative;
    padding: 16vw 4vw 13.33333vw;
    background: #fff;
  }
  #contents #sec3:after {
    content: '';
    position: absolute;
    top: 99.9%;
    left: 0;
    width: 100%;
    height: 1vw;
    background: #fff;
  }
  #contents #sec3 h3 {
    margin: 0 0 5.33333vw;
    font-size: 6.4vw;
    font-weight: 500;
    text-align: center;
  }
  #contents #sec3 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  #contents #sec3 ul li {
    width: 44.53333vw;
    margin: 0 0 2.66667vw;
  }

  /* @media screen
  ------------------------------------------------------------------------- */
}