/******* setting.scss *******/
/******* mixin.scss *******/
@media screen and (max-width: 960px) {
  div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fildset, input, textarea, p, blockquote, table, th, td, address, div {
    font-size: 2.8vw;
    line-height: 180%;
  }

  .menuOpen {
    height: 100%;
    overflow: hidden;
  }

  br.sp {
    display: inline-block;
  }

  img.sp {
    display: inline-block;
  }
  img.sp + img {
    display: none;
  }

  .wrapper:before {
    border-right-width: 5px;
  }

  /******header******/
  header .headCont {
    flex-wrap: wrap;
    padding: 3vw !important;
  }
  header .headLogo a {
    height: 9.2vw;
    width: 40vw;
  }
  header .spMenu {
    display: block;
    height: 8vw;
    position: relative;
    width: 8vw;
  }
  header .spMenu span {
    background-color: #fff;
    height: 3px;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    transition: all 0.6s;
  }
  header .spMenu span:nth-child(2) {
    top: 50%;
    margin-top: -1.5px;
  }
  header .spMenu span:nth-child(3) {
    top: auto;
    bottom: 0;
  }
  header .headNav {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: all 0.6s;
    width: 100%;
  }
  header nav {
    padding-top: 3vw;
  }
  header nav ul {
    border-right: none;
    display: block;
    margin-bottom: 5vw;
  }
  header nav ul li {
    border-bottom: 1px dotted #333;
    font-size: 140%;
    margin-right: 0;
    letter-spacing: 0.1em;
  }
  header nav ul li a {
    display: block;
    padding: 2vw;
  }
  header nav ul li a:after {
    display: none !important;
  }
  header .headSns {
    justify-content: center;
  }
  header .headSns li {
    margin-left: 5vw;
  }
  header .headSns li:first-of-type {
    margin-left: 0;
  }
  header .headSns li a {
    font-size: 165%;
  }
  header.scroll .spMenu span {
    background-color: #333;
  }

  .menuOpen header {
    background-color: rgba(255, 255, 255, 0.9);
  }
  .menuOpen header .headLogo a {
    background-image: url(../img/common/logo_scroll.png);
  }
  .menuOpen header .spMenu span {
    background-color: #333;
  }
  .menuOpen header .spMenu span:nth-child(1) {
    top: 50%;
    transform: rotate(135deg);
  }
  .menuOpen header .spMenu span:nth-child(2) {
    left: 50%;
    width: 0;
  }
  .menuOpen header .spMenu span:nth-child(3) {
    top: 50%;
    bottom: auto;
    transform: rotate(-135deg);
  }
  .menuOpen header .headNav {
    max-height: 100vh;
  }
  .menuOpen header nav ul {
    border-right-color: #333;
  }
  .menuOpen header nav ul li a {
    color: #333;
  }
  .menuOpen header nav ul li a:after {
    background-color: #333;
  }
  .menuOpen header .headSns li a {
    color: #333;
  }

  /******footer******/
  footer {
    padding-bottom: 3vw;
  }
  footer .footCont {
    margin: 0 auto 3vw;
    padding: 8vw 4vw 5vw;
  }
  footer .footCont ul.footSns {
    margin: 0 auto 4vw;
  }
  footer .footCont ul.footSns li {
    margin: 0 2vw;
  }
  footer .footCont ul.footSns li a {
    font-size: 135%;
    height: 10vw;
    width: 10vw;
  }
  footer .footCont ul.footNav li {
    margin-left: 3vw;
    margin-bottom: 2vw;
    padding-left: 3vw;
  }
  footer .footCont ul.footNav li:before {
    height: 4vw;
    top: 50%;
    margin-top: -2.3vw;
  }

  /******main******/
  main {
    background-size: 200%;
    padding-top: 40vw;
  }
  main .secCont {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15vw 4vw;
  }
  main .secCont.wAll .secCont {
    padding-bottom: 8vw;
    padding-top: 8vw;
  }
  main .secCont.wAll section:last-of-type .secCont {
    padding-bottom: 15vw;
  }
  main .secCont h1 {
    margin: 0 auto 5vw;
  }
  main .secCont h1 span {
    font-size: 225% !important;
    margin-bottom: 2vw;
    letter-spacing: normal !important;
  }
  main p {
    margin-bottom: 5vw;
  }
  main .btn {
    width: 100%;
  }
  main .btn a {
    font-size: 110%;
    height: 10vw;
  }
  main .btn a:after {
    height: 2vw;
    margin-top: -1vw;
    top: 50%;
    right: 3vw;
    width: 2vw;
  }

  .mb20 {
    margin-bottom: 2vw !important;
  }

  .mb30 {
    margin-bottom: 3vw !important;
  }

  .mb40 {
    margin-bottom: 4vw !important;
  }

  .mb60 {
    margin-bottom: 6vw !important;
  }

  .mb80 {
    margin-bottom: 7vw !important;
  }

  /******** index ********/
  #index .mainVisual .title {
    height: 130vw;
    padding: 0 4vw;
  }
  #index .mainVisual h1 {
    font-size: 530%;
  }
  #index .secCont h2 {
    margin: 0 auto 5vw;
  }
  #index .secCont h2 span {
    font-size: 225% !important;
    margin-bottom: 2vw;
    letter-spacing: normal !important;
  }
  #index .h201 .secCont {
    display: block;
    padding-top: 10vw;
    padding-bottom: 10vw;
  }
  #index .h201 .secCont h2 {
    font-size: 250%;
    margin: 0 auto 3vw;
    text-align: center;
    width: 100%;
  }
  #index .h201 .secCont h2 br {
    display: none;
  }
  #index .h201 .secCont .secDetail {
    border-left: none;
    padding-left: 0;
    width: 100%;
  }
  #index .h201 .secCont .secDetail h3 {
    font-size: 180%;
    margin: 0 auto 3vw;
    text-align: center;
  }
  #index .h202,
  #index .h203,
  #index .h204 {
    border-bottom: none;
  }
  #index .h202 .secFlex,
  #index .h203 .secFlex,
  #index .h204 .secFlex {
    display: block;
    padding: 4vw;
  }
  #index .h202 .secDetail,
  #index .h203 .secDetail,
  #index .h204 .secDetail {
    width: 100%;
  }
  #index .h202 .secCont,
  #index .h203 .secCont,
  #index .h204 .secCont {
    margin: 0;
    padding: 5vw 4vw 4vw;
  }
  #index .h202 h2,
  #index .h203 h2,
  #index .h204 h2 {
    margin-bottom: 2.5vw;
    padding-bottom: 2.5vw;
  }
  #index .h205 {
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.9) 18%, rgba(255, 255, 255, 0.9) 100%), url(../img/index/bg04.jpg) no-repeat 50% 0;
    background-size: 200%;
    padding: 35vw 0 8vw;
  }
  #index .h205 h3 {
    margin: 0 auto 5vw;
  }
  #index .careerBannerWrap {
    padding: 5vw 0;
  }
  #index .careerBannerWrap .careerBanner a {
    padding: 5vw;
  }
  #index .careerBannerWrap .careerBanner p {
    height: 25vw;
  }
  #index .careerBannerWrap .careerBanner p span {
    font-size: 225%;
    margin-top: -2vw;
  }
  #index .h206,
  #index .h207 {
    padding: 6vw 0;
  }
  #index .bannerArea {
    padding: 5vw 0 1px;
  }
  #index .bannerArea ul li {
    margin: 0 2vw 4vw;
    width: 28%;
  }
  #index .bannerArea ul li img {
    width: 100%;
  }

  .infoList {
    width: 100%;
  }
  .infoList li {
    display: block;
    margin-bottom: 1.5vw;
    padding: 0 20vw 1.5vw 0;
  }
  .infoList li span {
    width: 100%;
  }
  .infoList li a {
    padding-right: 0;
    width: 100%;
  }
  .infoList li a:after {
    top: 3vw;
    width: 10vw;
  }

  .newsList {
    margin-bottom: 4vw;
  }
  .newsList li {
    margin: 0 3% 3vw 0 !important;
    width: 48.5%;
  }
  .newsList li:nth-child(2n) {
    margin-right: 0 !important;
  }
  .newsList li .pict {
    margin-bottom: 3vw;
  }
  .newsList li p {
    padding: 0 3vw 3vw;
  }
  .newsList li p span {
    display: block;
    font-weight: bold;
    margin-bottom: 1.2vw;
  }

  .pictRow {
    margin: 0 auto 5vw;
  }

  .pager a,
  .pager span {
    height: 5vw;
    margin: 0 1.5vw;
    width: 5vw;
  }
  .pager a.c, .pager a:hover {
    background-color: #000;
    color: #fff;
  }
  .pager a.prev {
    border: none;
    font-size: 250%;
    margin-left: 0;
  }
  .pager a.prev:hover {
    background-color: inherit;
    color: #000;
    opacity: 0.7;
  }
  .pager a.next {
    border: none;
    font-size: 250%;
    margin-right: 0;
  }
  .pager a.next:hover {
    background-color: inherit;
    color: #000;
    opacity: 0.7;
  }

  /******** blog ********/
  .tabNav {
    margin: 0 auto 7vw;
  }
  .tabNav li {
    margin: 0 1.5vw 2vw;
  }
  .tabNav li a {
    font-size: 120%;
    padding-bottom: 2vw;
    min-width: 17vw;
  }

  .blogTitleArea {
    margin-bottom: 8vw;
    padding: 8vw 4vw;
  }
  .blogTitleArea h2 {
    font-size: 145%;
    margin-bottom: 3vw;
  }
  .blogTitleArea p span {
    margin-right: 2vw;
    padding: 0.5vw 2vw;
  }

  .blogCont {
    margin-bottom: 8vw;
    padding-bottom: 1vw;
  }
  .blogCont .blogPict {
    margin: 0 auto 5vw;
  }
  .blogCont .blogTxtArea {
    max-width: 100%;
  }

  .pageNav {
    max-width: 100%;
    padding-top: 18vw;
  }
  .pageNav div {
    margin: 0 auto;
    width: 100%;
  }
  .pageNav div a {
    height: 15vw;
    width: 100%;
  }
  .pageNav div.prev {
    width: 48%;
  }
  .pageNav div.prev a:before {
    height: 2vw;
    margin-top: -1vw;
    top: 50%;
    left: 3vw;
    width: 2vw;
  }
  .pageNav div.next {
    width: 48%;
  }
  .pageNav div.next a:after {
    height: 2vw;
    margin-top: -1vw;
    top: 50%;
    right: 3vw;
    width: 2vw;
  }

  .pictRowArea {
    display: block;
  }
  .pictRowArea.reverse .pict {
    margin-bottom: 0;
  }
  .pictRowArea .detail {
    width: 100%;
  }
  .pictRowArea .pict {
    margin-bottom: 5vw;
    width: 100%;
  }

  .titleStyle01 {
    font-size: 160%;
    margin-bottom: 3vw;
  }

  .titleStyle02 {
    font-size: 140%;
    margin: 0 auto 3vw;
  }

  table th {
    border-bottom: none;
    display: block;
    padding: 3vw 0 1vw 0;
    width: 100%;
  }
  table td {
    border-bottom: 1px solid #333;
    display: block;
    padding: 0 0 3vw 0;
  }
  table tr:first-of-type td {
    border-top: none;
  }

  /******** company ********/
  .philosophyLead {
    padding-top: 8vw;
    width: 100%;
  }
  .philosophyLead p {
    width: 80%;
  }

  .outlineTable {
    width: 100%;
  }
  .outlineTable .officer li {
    margin-right: 10%;
    width: 45%;
  }

  .historyWrap {
    width: 100%;
  }
  .historyWrap:before {
    left: 0;
  }
  .historyWrap dl {
    min-height: 0;
    position: relative;
    padding: 12vw 0 5vw 8vw;
  }
  .historyWrap dl:last-of-type {
    padding-bottom: 12vw;
  }
  .historyWrap dl:before {
    top: 5.6vw;
    left: 3px;
    width: 5vw;
  }
  .historyWrap dl dt {
    top: 3vw;
    left: 8vw;
    display: flex;
    align-items: center;
  }
  .historyWrap dl dt span {
    margin: 0 2vw 0 0;
  }
  .historyWrap dl dd {
    margin-top: 4vw;
    padding-left: 0;
  }
  .historyWrap dl dd span {
    position: relative;
    top: auto;
    left: auto;
    display: block;
  }

  /******** institutionDetail ********/
  .institutionDetail .wAll {
    padding-top: 10vw;
  }
  .institutionDetail .titleArea {
    margin-bottom: 8vw;
  }
  .institutionDetail .titleArea h1 {
    font-size: 150%;
    padding: 0 4vw;
    text-shadow: 0px 2px 0px #fff;
  }
  .institutionDetail .titleArea h1 span {
    font-size: 200% !important;
    margin-bottom: 2vw;
    text-shadow: 0px 2px 0px #fff;
  }
  .institutionDetail .institutionCont .secPict {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }
  .institutionDetail .institutionCont .secCont {
    display: block;
  }
  .institutionDetail .institutionCont .secDetail {
    max-width: 100%;
    padding: 0;
    width: 100%;
  }
  .institutionDetail .institutionCont .secDetail h2 {
    margin-bottom: 5vw;
  }
  .institutionDetail .slideArea {
    padding: 5vw 0 15vw;
  }
  .institutionDetail .slideArea .slick-dots {
    bottom: -10vw;
  }
  .institutionDetail .slideArea .slick-dots li {
    margin: 0 2vw;
  }
  .institutionDetail .slideArea .slick-dots li button {
    height: 2.5vw;
    width: 2.5vw;
  }
  .institutionDetail .slideArea .pictSlide .slick-track li {
    margin: 0;
  }
  .institutionDetail .institutionOutline .secCont {
    padding-bottom: 8vw !important;
  }
  .institutionDetail .institutionOutline h3 {
    margin: 0 auto 5vw;
    text-align: center;
  }
  .institutionDetail .institutionOutline .institutionTable {
    margin: 0 auto;
    width: 100%;
  }
  .institutionDetail .institutionOutline .institutionTable th {
    border-bottom: 1px solid #333;
    display: table-cell;
    padding: 2vw 0;
    width: 30%;
  }
  .institutionDetail .institutionOutline .institutionTable td {
    border-bottom: 1px dotted #333;
    display: table-cell;
    padding: 2vw 1vw;
    vertical-align: middle;
  }
  .institutionDetail .institutionOutline .institutionTable tr:first-of-type th ~ th {
    border-bottom: 1px dotted #333;
    padding: 2vw 1vw;
    text-align: center;
  }

  /******** contact ********/
  .contactLead dd {
    margin-top: 4vw;
  }

  .contactForm .keyColor01 {
    color: #ff0000;
  }
  .contactForm dl {
    display: block;
    margin-bottom: 4vw;
  }
  .contactForm dl dt {
    margin-bottom: 2vw;
    width: 100%;
  }
  .contactForm dl dt.req {
    display: flex;
  }
  .contactForm dl dt.req:after {
    margin-left: 2vw;
    position: relative;
    top: auto;
    right: auto;
  }
  .contactForm dl dd {
    border-left: none;
    border-bottom: 1px dotted #000;
    margin: 0;
    padding-bottom: 4vw;
    padding-left: 0;
    width: 100%;
  }
  .contactForm dl dd input {
    border: 1px solid #ccc;
  }
  .contactForm dl dd input.type01 {
    height: 12vw;
    padding: 0 2vw;
  }
  .contactForm dl dd input.type01:nth-of-type(2) {
    margin-top: 2vw;
  }
  .contactForm dl dd input.type02 {
    height: 12vw;
    margin-left: 10px;
    width: 32vw;
  }
  .contactForm dl dd input.type02:first-of-type {
    margin-right: 5vw;
  }
  .contactForm dl dd textarea {
    height: 35vw;
  }
  .contactForm dl dd.radioButton {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    align-items: center;
  }
  .contactForm dl dd.radioButton label {
    margin: 0 5vw 2vw 0;
  }
  .contactForm dl dd.radioButton label input {
    margin-right: 10px;
    vertical-align: -0.1em;
  }
  .contactForm .formBtn {
    flex-wrap: wrap;
    margin-top: 8vw;
  }
  .contactForm .formBtn button {
    font-size: 165%;
    height: 20vw;
    margin: 0 0 3vw;
    width: 100%;
  }

  /******** privacy ********/
  .privacyArea {
    padding-top: 4vw;
  }
  .privacyArea dl {
    margin-bottom: 4vw;
    padding-bottom: 4vw;
  }
  .privacyArea dl dt {
    margin-bottom: 3vw;
  }
  .privacyArea dl dd ul {
    margin: 3vw 0 0 2vw;
  }

  /******** sponsor ********/
  .sponsorList {
    display: flex;
    flex-wrap: wrap;
  }
  .sponsorList li {
    margin: 0 3% 3vw 0 !important;
    width: 48.5%;
  }
  .sponsorList li:nth-child(2n) {
    margin-right: 0 !important;
  }
  .sponsorList li a {
    padding: 3vw;
  }
  .sponsorList li span {
    padding: 3vw;
  }
  .sponsorList li .pict {
    margin-bottom: 3vw;
  }
  .sponsorList li p {
    padding: 3vw 0 0;
  }
}
@media screen and (max-width: 470px) {
  div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fildset, input, textarea, p, blockquote, table, th, td, address {
    font-size: 3.4vw;
  }

  #index .h205 {
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0.9) 12%, rgba(255, 255, 255, 0.9) 100%), url(../img/index/bg04.jpg) no-repeat 50% 0;
    background-size: 150%;
  }
}