/* CSS Document */
.mainWidth {
  box-sizing: border-box;
  width: 1280px;
  margin: 0 auto;
  padding: 0 20px 0;
  position: relative; }

.mainWidth.noHead {
  margin-top: 20px; }

#header {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 83px;
  margin: 0;
  padding: 15px 0 0 0;
  color: #ffffff;
  background-color: #15274d;
  text-align: center;
  z-index: 100; }

#main {
  box-sizing: border-box;
  width: 820px;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid #dcdcdc;
  float: left; }

#main.topPage {
  border-top: none; }

.noHead #main {
  padding-top: 0;
  border-top: none; }

#sideBar {
  box-sizing: border-box;
  width: 400px;
  margin: 0;
  padding: 0 0 20px 0;
  float: right; }
  #sideBar .pcSidebar {
    clear: both; }

#footer {
  display: block;
  margin: 0;
  padding: 40px 0 0 0;
  color: #ffffff;
  background-color: #15274d; }

@media screen and (max-width: 768px) {
  .mainWidth.noHead {
    margin-top: 0; }

  #service,
  .pageGuide {
    display: none; }

  .mainWidth {
    width: 100%;
    padding: 0;
    margin: 0; }

  #main {
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: none;
    float: none; }

  #header {
    height: 135px;
    padding: 0; }

  #sideBar {
    width: 100%;
    padding: 0 10px;
    float: none; }

  #sideBar .pcSidebar {
    display: none; }

  .spFormButton {
    display: none; }

  #footer {
    padding-top: 0; } }
@media screen and (max-width: 414px) {
  #header {
    height: 125px; } }
#pageHeader {
  background-color: #15274d; }
  #pageHeader #headItems {
    width: 1280px;
    margin-right: auto;
    margin-left: auto;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 10px 0; }
    @media screen and (max-width: 768px) {
      #pageHeader #headItems {
        width: 100%; } }
    @media screen and (max-width: 768px) {
      #pageHeader #headItems {
        box-sizing: border-box;
        display: block;
        padding: 10px 8px; } }
    #pageHeader #headItems .left {
      width: 270px; }
      @media screen and (max-width: 768px) {
        #pageHeader #headItems .left {
          display: -moz-flex;
          display: -ms-flex;
          display: -webkit-flex;
          display: flex;
          -moz-justify-content: space-between;
          -ms-justify-content: space-between;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -moz-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
          width: 100%; } }
      #pageHeader #headItems .left #headTop #headerLogo {
        text-decoration: none; }
        #pageHeader #headItems .left #headTop #headerLogo .txt {
          box-sizing: border-box;
          display: block;
          margin: 0 0 3px 0;
          padding: 1px 10px;
          background-color: #ffffff;
          border-radius: 20px; }
          #pageHeader #headItems .left #headTop #headerLogo .txt img {
            width: 100%;
            vertical-align: middle; }
        @media screen and (max-width: 768px) {
          #pageHeader #headItems .left #headTop #headerLogo {
            display: block;
            width: 90%;
            max-width: 260px;
            margin: 0 auto; }
            #pageHeader #headItems .left #headTop #headerLogo .txt {
              font-size: 11px; }
            #pageHeader #headItems .left #headTop #headerLogo img {
              width: 100%;
              margin: 0 auto; } }
        @media screen and (max-width: 414px) {
          #pageHeader #headItems .left #headTop #headerLogo {
            width: 188px; }
            #pageHeader #headItems .left #headTop #headerLogo .txt {
              font-size: 10px;
              letter-spacing: -0.1em; } }
      @media screen and (max-width: 768px) {
        #pageHeader #headItems .left #headTop {
          -moz-order: 2;
          -ms-order: 2;
          -webkit-order: 2;
          order: 2; } }
      @media screen and (max-width: 768px) {
        #pageHeader #headItems .left #spMenu {
          -moz-order: 1;
          -ms-order: 1;
          -webkit-order: 1;
          order: 1;
          width: 48px;
          height: 48px;
          background: url("/magazine/images/spMenu.png") center no-repeat; } }
      @media screen and (max-width: 768px) {
        #pageHeader #headItems .left #member {
          -moz-order: 3;
          -ms-order: 3;
          -webkit-order: 3;
          order: 3; }
          #pageHeader #headItems .left #member .user {
            box-sizing: border-box;
            display: block;
            width: 48px;
            height: 48px;
            color: #15274d;
            font-size: 28px;
            font-family: "lvn";
            text-align: center;
            line-height: 42px;
            background-color: #ffffff;
            border: 3px solid #15274d;
            border-radius: 50%; }
          #pageHeader #headItems .left #member .info {
            position: absolute;
            max-height: 0;
            right: 5px;
            overflow: hidden;
            z-index: 99999; }
            #pageHeader #headItems .left #member .info a {
              display: block;
              padding: 0 10px;
              color: #181818;
              line-height: 48px; }
              #pageHeader #headItems .left #member .info a.mypage {
                border-top: 1px solid #dcdcdc; }
          #pageHeader #headItems .left #member a.login {
            box-sizing: border-box;
            display: block;
            width: 48px;
            height: 48px;
            color: #ffffff;
            font-size: 28px;
            font-family: "lvn";
            text-align: center;
            line-height: 42px;
            background-color: #c1c1c1;
            border: 3px solid #15274d;
            border-radius: 50%; } }
      @media screen and (max-width: 768px) {
        #pageHeader #headItems .left #member:hover .info {
          max-height: 300px;
          width: 8.0em;
          text-align: center;
          background-color: #ffffff;
          border: 1px solid #15274d; } }
    #pageHeader #headItems .center {
      width: 610px;
      padding: 40px 10px 0 10px; }
      @media screen and (max-width: 768px) {
        #pageHeader #headItems .center {
          display: none; } }
      #pageHeader #headItems .center .headerMenu {
        display: -moz-flex;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -moz-justify-content: flex-start;
        -ms-justify-content: flex-start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        width: 100%;
        margin: 0;
        padding: 0; }
        #pageHeader #headItems .center .headerMenu li {
          height: 20px;
          border-right: 1px solid #ffffff;
          list-style: none; }
          #pageHeader #headItems .center .headerMenu li:last-child {
            border-right: none; }
          #pageHeader #headItems .center .headerMenu li a {
            padding: 0 10px;
            color: #ffffff;
            line-height: 20px;
            text-decoration: none; }
            #pageHeader #headItems .center .headerMenu li a:hover {
              color: #97b5dd; }
    #pageHeader #headItems .right {
      display: -moz-flex;
      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      -moz-justify-content: flex-end;
      -ms-justify-content: flex-end;
      -webkit-justify-content: flex-end;
      justify-content: flex-end;
      width: 400px; }
      @media screen and (max-width: 768px) {
        #pageHeader #headItems .right {
          display: block; } }
      #pageHeader #headItems .right .sumaistarLogo {
        display: block;
        width: 130px;
        height: 48px;
        background: url("/magazine/images/lvnmatchLogo.png") left top no-repeat; }
        @media screen and (max-width: 768px) {
          #pageHeader #headItems .right .sumaistarLogo {
            display: none;
            background: none; } }
      @media screen and (max-width: 768px) {
        #pageHeader #headItems .right {
          width: 100%; } }
      #pageHeader #headItems .right .loginInfo {
        padding: 0 5px; }
        #pageHeader #headItems .right .loginInfo .login,
        #pageHeader #headItems .right .loginInfo .logout {
          display: inline-block;
          height: 30px;
          margin: 0 0 0 5px;
          padding: 0 10px;
          color: #181818;
          text-decoration: none;
          line-height: 30px;
          white-space: nowrap;
          background-color: #ffffff; }

@media screen and (max-width: 768px) {
  body.fix {
    overflow: hidden; }

  #menuScreen {
    position: fixed;
    top: 0;
    left: -110%;
    display: -moz-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    z-index: 99999; }
    #menuScreen.on {
      left: 0; }
    #menuScreen .menuList {
      min-width: 16.0em;
      height: 100%;
      overflow: auto; }
      #menuScreen .menuList li {
        background-color: #333333;
        border-top: 1px solid #4d4d4d; }
        #menuScreen .menuList li a {
          display: block;
          padding: 10px 1.0em;
          color: #ffffff;
          line-height: 28px;
          text-decoration: none; }
        #menuScreen .menuList li .parent {
          display: -moz-flex;
          display: -ms-flex;
          display: -webkit-flex;
          display: flex;
          -moz-justify-content: space-between;
          -ms-justify-content: space-between;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          padding: 10px 1.0em;
          color: #ffffff;
          line-height: 28px;
          text-decoration: none; }
        #menuScreen .menuList li .parent::after {
          content: ">";
          display: block;
          -moz-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          -moz-transition-duration: 0.5s;
          -ms-transition-duration: 0.5s;
          -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s; }
        #menuScreen .menuList li .parent.show::after {
          -moz-transform: rotate(-450deg);
          -ms-transform: rotate(-450deg);
          -webkit-transform: rotate(-450deg);
          transform: rotate(-450deg); }
        #menuScreen .menuList li .child {
          display: none; }
          #menuScreen .menuList li .child li {
            background-color: #706e6e; }
            #menuScreen .menuList li .child li a {
              padding-left: 2.0em; }
    #menuScreen .close {
      width: 100%; }
      #menuScreen .close .button {
        display: block;
        width: 40px;
        height: 40px;
        font-size: 30px;
        line-height: 40px;
        text-align: center;
        background-color: #ffffff; } }
#footer .link {
  display: block;
  margin: 0;
  padding: 30px 0;
  color: #ffffff;
  font-size: 13px;
  text-align: center; }
  @media screen and (max-width: 768px) {
    #footer .link {
      padding: 0 0 70px 0;
      background-color: #15274d;
      color: #15274d;
      font-size: 0;
      line-height: 0; } }
  @media screen and (max-width: 768px) {
    #footer .link a {
      display: block;
      padding: 0 20px;
      font-size: 16px;
      line-height: 48px;
      text-align: left;
      border-bottom: 1px solid #dcdcdc; } }
  #footer .link p {
    color: #ffffff; }
    @media screen and (max-width: 768px) {
      #footer .link p {
        font-size: 16px; } }