@charset "UTF-8";

/******* setting.scss *******/
/******* mixin.scss *******/
@media screen and (max-width: 1100px) {
  header nav {
    right: 165px;
    width: 48%;
  }

  header nav ul {
    width: 100%;
  }

  header nav ul li a {
    font-size: 95%;
  }

  header .headMail a {
    width: 140px;
  }
}

@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;
  }

  /******header******/
  header {
    /*
    background-color: inherit;
    margin: 0 auto;
    max-width: 1300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
*/
    /* SEM&O改修 */
    background-color: #fff;
    margin: 0 auto;
    max-width: 1300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }

  header.view .headCont {
    background-color: rgba(255, 255, 255, 0.9);
    max-height: 100%;
    transition: background-color 0.5s, max-height 0.1s;
  }

  header.view .headLogo span {
    color: #27323b !important;
  }

  header.view .headMenu:before {
    background-position: 0 100%;
  }

  header .headCont {
    box-sizing: border-box;
    height: 19vw;
    max-height: 19vw;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s, max-height 0.1s;
  }

  header .headLogo {
    /*
    top: 4vw !important;
    left: 3vw !important;
    width: 57.3vw;
*/
    top: 4vw !important;
    left: 3vw !important;
    width: 61.5vw;
  }

  header .headLogo img {
    width: 100%;
  }

  header .headLogo span {
    /*
    color: #fff;
    font-size: 70%;
    margin-top: 1%;
*/
    /* SEM&O改修 */
    color: #27323b;
    font-size: 70%;
    margin-top: 1%;
  }

  header .headMenu {
    border-radius: 50%;
    background-color: #27323b;
    height: 11.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 3.5vw;
    right: 3vw;
    width: 11.6vw;
  }

  header .headMenu:before {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    text-indent: 180%;
    white-space: nowrap;
    content: "";
    display: block;
    height: 0px;
    width: 0px;
    background-image: url(../img/common/headMenu.png);
    height: 3vw;
    width: 4vw;
  }

  header nav {
    margin-top: 17vw;
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
  }

  header nav ul {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 90%;
  }

  header nav ul li {
    text-align: center;
  }

  header nav ul li.c:before {
    display: none;
  }

  header nav ul li a {
    color: #27323b !important;
    display: block;
    padding: 3.5vw 0;
  }

  header .headMail {
    margin: 0 auto;
    position: relative;
    top: auto;
    right: auto;
    width: 90%;
  }

  header .headMail a {
    height: auto;
    padding: 4% 0;
    width: 100%;
    position: relative;
  }

  header .headMail a:before {
    margin: -1.75vw 0 0;
    display: inline-block;
    height: 3.5vw;
    position: absolute;
    top: 50%;
    left: 3vw;
    width: 5.335vw;
  }

  /******footer******/
  footer {
    background-image: url(../img/common/footBg_sp.jpg);
  }

  footer .footLogoWrap {
    border-bottom: none;
    display: block;
    max-width: 1140px;
    padding: 8vw 0;
    width: 90%;
  }

  footer .footLogoWrap .footLogoArea .footLogo {
    margin: 0 auto 5vw;
    text-align: center;
    width: 56vw;
  }

  footer .footLogoWrap .footLogoArea p {
    color: #fff;
    font-size: 90%;
    margin: 0 auto 8vw;
    width: 67vw;
  }

  footer .footLogoWrap dl {
    display: block;
    width: 100%;
  }

  footer .footLogoWrap dl dt {
    margin-bottom: 1vw;
    width: 100%;
  }

  footer .footLogoWrap dl dt:after {
    max-width: 70%;
    width: 70%;
  }

  footer .footLogoWrap dl dd {
    border-bottom: 1px solid #fff;
    text-align: center;
    width: 100%;
  }

  footer .footLogoWrap dl dd a {
    padding: 4vw 0 3vw;
  }

  footer .footLogoWrap dl dd a span {
    font-size: 70%;
    margin-right: 10px;
  }

  footer .footLogoWrap dl dd.tel a {
    pointer-events: all;
  }

  footer .footCont {
    display: block;
    max-width: 100%;
    padding: 0 0 5vw;
    text-align: center;
    width: 90%;
  }

  footer .footCont .footLink {
    font-size: 90%;
    margin-bottom: 3vw;
  }

  footer .footCont .footLink a {
    background-position: 0 45%;
    background-size: 1vw;
    padding-left: 2vw;
  }

  footer .footCont .copy {
    color: #fff;
    font-size: 75%;
  }

  /******contents******/
  .contents .mainTitleArea {
    height: 80vw;
    margin-bottom: 15%;
  }

  .contents .mainTitleArea h1 {
    max-width: 100%;
    width: 90%;
  }

  .contents .mainTitleArea .topicPathArea {
    padding: 2% 0;
  }

  .contents .mainTitleArea .topicPathArea ol {
    max-width: 100%;
    width: 90%;
  }

  .contents .secCont {
    margin-bottom: 8%;
    width: 90%;
  }

  .contents .secCont h3 {
    font-size: 130%;
    margin-bottom: 6%;
  }

  .contents .secCont h3:after {
    margin-top: 2%;
    width: 4vw;
  }

  .contents .secCont h4 {
    margin-bottom: 4%;
    padding-left: 2vw;
  }

  /*********index*********/
  #index {
    overflow: hidden;
  }

  #index .mainVisual {
    /*
    background-image: url(../img/index/mainVisual_sp.jpg);
    background-position: 50% 0;
    background-size: cover;
    height: 85.5vw;
    padding-top: 0;
    position: relative;
*/
    /* SEM&O改修 */
    background: url(../img/index/title_sp_202207011417.png) no-repeat 20% 80%,
      url(../img/index/mainVisual_sp_202207011417.jpg) no-repeat 20% 16vw;
    background-size: 85%, contain;
    height: 85.5vw;
    padding-top: 0;
    position: relative;
    margin-bottom: 40vw;
  }

  #index .mainVisual:after {
    /*
    background-image: url(../img/index/character_sp.png);
    margin: 0;
    left: auto;
    bottom: 3.5vw;
    right: 4vw;
    height: 28vw;
    width: 26.4vw;
*/
    /* SEM&O改修 */
    background-image: url(../img/index/character_sp_202207011417.png);
    margin: 0;
    left: auto;
    bottom: -35vw;
    right: 15vw;
    height: 23vw;
    width: 26.4vw;
  }

  #index .mainVisual h1 {
    /*
    background: none;
    font-size: 130%;
    max-width: 90%;
    margin: 0 auto;
    position: absolute;
    bottom: 3vw;
    left: 0;
    right: 0;
    text-align: left;
*/
    /* SEM&O改修 */
    background: none;
    font-size: 130%;
    max-width: 90%;
    margin: 0 auto;
    position: absolute;
    bottom: -22vw;
    left: 0;
    right: 0;
    text-align: left;
  }

  /* SEM&O改修[追加]ココカラ */
  #index .mainVisual h1 img.pc {
    display: none;
  }

  #index .mainVisual h1 img.sp {
    display: block;
    width: 85%;
  }

  /* SEM&O改修[追加]ココマデ */
  #index .mainVisual h1 br {
    display: inline !important;
  }

  #index .indexCont {
    width: 90%;
  }

  #index h2 {
    font-size: 100%;
    text-align: center;
  }

  #index .h201 {
    margin: 0 auto 10%;
  }

  #index .h201 .h201cont {
    background-image: url(../img/index/h201bg_sp_202207011417.jpg);
    display: block;
    padding: 10%;
    width: 100%;
  }

  #index .h201 h2 {
    margin: 0 auto 8%;
    width: 100%;
  }

  #index .h201 .txtArea p {
    margin: 0 auto 8%;
  }

  #index .h201 .btn {
    margin: 0 auto;
    position: relative;
    top: auto;
    left: auto;
  }

  #index .h202 h2 {
    font-size: 100%;
    margin: 0 auto 5%;
  }

  #index .h202 h2 span {
    font-size: 230%;
  }

  #index .h202 .btn {
    margin: 0 auto 10%;
  }

  #index .h202 .indexCont {
    max-width: 100%;
    overflow: hidden;
    width: 100%;
  }

  #index .h202 .tabNavArea {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  #index .h202 .tab {
    max-width: none;
    width: 320vw;
  }

  #index .h202 .tab li a {
    height: 17vw;
  }

  #index .h202 .tabArea {
    background-color: #f3f7fa;
    min-height: 20vw;
    position: relative;
  }

  #index .h202 .tabCont {
    max-width: 100%;
    padding-top: 5vw;
    padding-bottom: 7vw;
  }

  #index .h203 {
    padding-top: 10vw;
  }

  #index .h203 .indexCont {
    padding: 0 5vw 5vw;
    width: 100%;
  }

  #index .h203 .indexCont h2 {
    margin-bottom: 5%;
    position: relative;
    top: auto;
    left: auto;
  }

  #index .h204 {
    background-color: #42637e;
    padding-top: 10vw;
  }

  #index .h204 .indexCont {
    padding: 0 5vw 5vw;
    width: 100%;
  }

  #index .h204 .indexCont h2 {
    margin-bottom: 5%;
    position: relative;
    top: auto;
    left: auto;
  }

  #index .h204 .indexCont .btn {
    margin: 0 auto 8%;
    position: relative;
    top: auto;
    left: auto;
  }

  .newsList dl {
    padding: 3vw 0;
    position: relative;
  }

  .newsList dl:before {
    width: 3vw;
  }

  .newsList dl dt span {
    margin-right: 2vw;
    padding-top: 0.8%;
    width: 15vw;
  }

  .newsList dl dd a:after {
    height: 4vw;
    margin-left: 2vw;
    width: 4vw;
  }

  /*********activity*********/
  #activity .h201 .figArea {
    display: block;
  }

  #activity .h201 .figArea .figTxt {
    max-width: 100%;
  }

  #activity .h201 .figArea .figTxt p {
    margin-bottom: 5%;
  }

  #activity .h201 .figArea .fig {
    max-width: 100%;
    width: 100%;
  }

  #activity .h202 .secWrap {
    padding: 10% 0;
  }

  #activity .contents .cateDetail.type02 .secCont h4 {
    margin-bottom: 5%;
  }

  /* SEM&O改修[追加]ココカラ */
  #activity .contents .pictArea.pc {
    display: none;
  }

  /* SEM&O改修[追加]ココマデ */

  #activity .h202 section {
    max-width: 1140px;
  }

  #activity .cateTop .otherCate {
    flex-wrap: wrap;
    margin-bottom: 15%;
  }

  #activity .cateTop .otherCate li {
    width: 50%;
  }

  #activity .cateTop .otherCate li:nth-child(1),
  #activity .cateTop .otherCate li:nth-child(2) {
    border-bottom: 1px solid #dde4ea;
  }

  #activity .cateTop .otherCate li:nth-child(3) {
    border-left: none;
  }

  #activity .cateTop .otherCate li a {
    background-size: 3vw;
    height: 35vw;
    padding: 4vw;
  }

  #activity .cateTop .otherCate li a span.num {
    margin-bottom: 3%;
  }

  #activity .cateTop .otherCate li a span.linkTxt {
    font-size: 110%;
  }

  #activity .cateDetail .titleArea {
    background: linear-gradient(#fff 0%, #fff 30%, #f3f7fa 30%, #f3f7fa 100%);
    margin-bottom: 12%;
  }

  #activity .cateDetail .titleArea h2 {
    max-width: 90%;
  }

  #activity .cateDetail .titleArea .pictArea {
    max-width: 90%;
    padding-bottom: 27vw;
  }

  #activity .cateDetail .titleArea .pictArea:after {
    bottom: 5vw;
    right: 2vw;
    height: 23vw;
    width: 13vw;
  }

  #activity .cateDetail .titleArea .pictArea .pict {
    margin-bottom: 4%;
  }

  #activity .cateDetail .titleArea .pictArea .pict img {
    width: 100%;
  }

  #activity .cateDetail .titleArea .pictArea p {
    margin-bottom: 4%;
  }

  #activity .cateDetail .secCont section {
    margin-bottom: 12%;
  }

  #activity .cateDetail .secCont ul {
    margin-bottom: 12%;
  }

  #activity .cateDetail .secCont ul li {
    margin-bottom: 2%;
  }

  #activity .cateDetail .secCont ul li:before {
    margin-right: 2vw;
    height: 1.2vw;
    width: 1.2vw;
  }

  #activity .cateDetail .secCont dl {
    margin-bottom: 12%;
  }

  #activity .cateDetail .secCont dl dd {
    margin-top: 3%;
  }

  #activity .cateDetail .secCont p {
    margin-bottom: 5%;
  }

  #activity .cateDetail .secCont .pict {
    margin: 0 auto 12%;
  }

  #activity .cateDetail .secCont .pict img {
    width: 100%;
  }

  #activity .cateDetail .secCont .pict.chara {
    padding-bottom: 5vw;
  }

  #activity .cateDetail .secCont .pict.chara img.charaPict {
    right: 2vw;
    width: 12vw;
  }

  #activity .cateDetail .secCont .pictRow {
    display: block;
    margin: 0;
  }

  #activity .cateDetail .secCont .pictRow .pict {
    margin: 0 0 5%;
    width: 100%;
  }

  #activity .cateDetail .secCont .pictArea {
    display: block;
    margin-bottom: 10%;
  }

  #activity .cateDetail .secCont .pictArea .txtArea {
    width: 100%;
  }

  #activity .cateDetail.type02 .secCont .pictArea .txtArea {
    width: 100%;
    margin-bottom: 5%;
  }

  #activity .cateDetail .secCont .pictArea .txtArea dl,
  #activity .cateDetail .secCont .pictArea .txtArea ul,
  #activity .cateDetail .secCont .pictArea .txtArea table {
    margin-bottom: 5%;
  }

  #activity .cateDetail .secCont .pictArea .pictWrap {
    width: 100%;
  }

  #activity .cateDetail.type02 .secCont .pictArea .pictWrap {
    width: 100%;
    max-width: 100%;
  }

  #activity .cateDetail .secCont .pictArea .pictWrap .pict {
    margin: 0 0 5%;
  }

  #activity .cateDetail .secCont .secNoteArea {
    margin-bottom: 12%;
    padding: 5vw;
  }

  #activity .cateDetail .secCont .secNoteArea p {
    margin-bottom: 3%;
  }

  #activity .cateDetail .secCont .secNoteArea p.alRight {
    margin-bottom: 0;
  }

  #activity .cateDetail .secCont .colDetail {
    margin-bottom: 8%;
  }

  #activity .cateDetail .secCont .colDetail .pict {
    margin-bottom: 5%;
  }

  #activity .cateDetail .secCont .colDetail dl,
  #activity .cateDetail .secCont .colDetail ul,
  #activity .cateDetail .secCont .colDetail table {
    margin-bottom: 5%;
  }

  #activity .cateDetail .secFootArea {
    background-color: #42637e;
    margin-bottom: 15%;
  }

  #activity .cateDetail .secFootArea section {
    max-width: 90%;
    padding: 5vw 0;
  }

  #activity .cateDetail .secFootArea section:before {
    margin-right: 5vw;
    height: 17vw;
    width: 10vw;
  }

  #activity .cateDetail .secFootArea section .secCont h3 {
    margin-bottom: 3%;
  }

  #activity .btn {
    width: 32vw;
  }

  #activity .btn a {
    border-radius: 50px;
    padding: 2vw 0;
  }

  /* ▼ 数式画像挿入用 ▼ */
  section .eqPict {
    /*通常時*/
    height: 2.7rem;
    width: auto;
  }

  section .eqPictY {
    /*縦長めの場合*/
    height: 3.5rem;
    width: auto;
  }

  /* ▲ 数式画像挿入用 ▲ */
  .cateLink {
    display: block;
    margin-bottom: 10%;
  }

  .cateLink li {
    margin-bottom: 5%;
    width: 100%;
  }

  .cateLink li:nth-child(2n) {
    margin-left: 0;
  }

  table {
    margin-bottom: 12%;
  }

  table th {
    box-sizing: border-box;
    padding: 2vw;
    text-align: center;
    vertical-align: middle;
  }

  table th.wNote {
    width: 50%;
  }

  table td {
    box-sizing: border-box;
    padding: 2vw !important;
  }

  .spSlideArea {
    margin-bottom: 12%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .spSlideArea table {
    margin-bottom: 0;
    width: 250%;
  }

  /*********privacypolicy*********/
  #privacypolicy .secCont p {
    margin-bottom: 6%;
  }

  #privacypolicy .secCont p.lead {
    margin-bottom: 13%;
  }

  #privacypolicy .secCont section {
    margin-bottom: 12%;
  }

  #privacypolicy .secCont ol {
    margin-bottom: 12%;
  }

  #privacypolicy .secCont ol li {
    padding-left: 6vw;
  }

  /*********contact*********/
  #contact .secCont p {
    margin-bottom: 8%;
  }

  #contact .contactDetail {
    display: block;
    margin-bottom: 0;
  }

  #contact .contactDetail div {
    margin-bottom: 5%;
    max-width: 100%;
    width: 100%;
  }

  #contact .contactDetail div a {
    min-height: 0;
    padding: 6vw 5vw 6vw 20vw;
  }

  #contact .contactDetail div a:before {
    top: 50%;
    margin-top: -6vw;
    left: 4vw;
    height: 12vw;
    width: 12vw;
  }

  #contact .contactDetail div a span {
    font-size: 160%;
    margin-top: 2px;
  }

  #contact .contactDetail div.tel a {
    pointer-events: all;
  }

  #contact .contactMap {
    display: block;
    padding: 6vw;
  }

  #contact .contactMap .map {
    margin: 0 0 3vw;
    padding-top: 40vw;
    width: 100%;
  }

  #contact .contactMap dl dt {
    margin-bottom: 2vw;
  }

  /*********about*********/
  #about .topLead {
    margin-bottom: 6vw;
  }

  #about .situation01 {
    margin-bottom: 10vw;
  }

  #about .situation01 p {
    margin-bottom: 3.5vw;
  }

  #about .situation01 section {
    margin-top: 7vw;
    padding-bottom: 3vw;
  }

  #about .situation01 section:last-of-type {
    margin-bottom: 5vw;
  }

  #about .situation02 {
    background-image: url(../img/about/situation/bg01_sp.jpg);
    background-position: 0 100%;
    background-size: contain;
  }

  #about .situation02 .secCont {
    padding: 8vw 0 90vw;
  }

  #about .situation02 p {
    margin-bottom: 3.5vw;
    width: 100%;
  }

  #about .situation03 {
    background-image: url(../img/about/situation/bg02_sp.jpg);
    background-position: 0 100%;
    background-size: contain;
    margin-bottom: 8vw;
  }

  #about .situation03 .secCont {
    padding: 8vw 0 90vw;
  }

  #about .situation03 p {
    margin: 0 0 3.5vw;
  }

  #about .situation03 ul {
    margin: 0 0 3.5vw;
  }

  #about .situation03+.backTop {
    margin-bottom: 8vw;
  }
}

@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*********/
  #index .h201 .h301 .detailArea .lead {
    top: -2vw;
    left: 7%;
  }

  #index .h201 .h301 .detailArea .lead span {
    padding: 0.2vw 2vw;
  }

  #index .h201 .h301 .detailArea .lead span:before {
    height: 6.3vw;
    left: -1.9vw;
    width: 2vw;
  }

  #index .h201 .h301 .detailArea .lead span:after {
    height: 6.3vw;
    right: -1.9vw;
    width: 2vw;
  }

  #index .h201 .h301 .detailArea .cate li {
    margin-right: 4vw;
    padding: 0.3vw 2vw 0.2vw 2vw;
  }

  #index .h201 .h301 .detailArea .cate li:before {
    height: 5.5vw;
    left: -2.9vw;
    width: 3vw;
  }
}