* {
    box-sizing:border-box;
    word-wrap:break-word;
    margin: 0px;
    padding: 0px;
    color:#545353;
    font-weight:bold;
    font-family:'Segoe UI', 'DFP平成丸ゴシック体W4', Tahoma, Geneva, Verdana, sans-serif;
}
body {
    overflow-y: scroll;
    -ms-overflow-style:none;
    scrollbar-width:none;
}
body::-webkit-scrollbar {
    display:none;
}
a {
    text-decoration: none;
    color:inherit;
}
li {
    list-style:none;
}
img {
     width:100%;
    height:100%;
    max-width:100%;
    display:block;
    object-fit: cover;
}

.container {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.side {
    position:relative;
    width:calc(100vw / 45 * 10);
    /*right:0;*/
    background-color: rgb(244, 244, 244);
}
.main {
    width:calc(100vw - (100vw / 45 * 10));
}
/*ログインフォーム*/
#wpmem_login {
    margin:40px auto;
}
fieldset input {
    background-color: rgb(162, 162, 162)!important;
}
.link-text a {
    color:blue;
}

/*ヘッダー*/
header {
    width:calc(100vw / 45 * 10);
    position:fixed;
    right:0px;
    z-index:9999;
}
.wide-view-menu ul {
    background: rgb(162, 162, 162);
    text-align:center;
    font-weight:bold;
}
.wide-view-menu ul li {
    border:1px solid #fff;
    padding:calc(100vw / 75) calc(100vw / 35);
    font-size:calc(100vw / 50);
    color:#333333;
    transition:all 0.6s;
}
.sns-wrapper {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    padding:calc(100vw / 30) calc(100vw / 95);
}.sns-text {
    width:45%;
    font-size:calc(100vw / 90);
    font-weight:bold;
    padding-right:calc(100vw / 200);
    color:#333333;
}
.sns {
    width:55%;
    padding:0 calc(100vw / 225);
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    font-size:calc(100vw / 45);
}
.sns i {
    -webkit-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
}

/*トップ*/
.notice {
    text-align: center;
    font-size:20px;
    padding:1em 0 0;
}

.flex-design {
    margin:5vw 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    padding:0 5%;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: 5%;
       -moz-column-gap: 5%;
            column-gap: 5%;
}
.pref-wrapper {
    width:47.5%;
}
.pref-image-wrapper {
    position:relative;
    width:100%;
    height:calc((100vw - (100vw / 45 * 10)) * 9 * 475 / 141 / 100);
}
.pref-large-text,.pref-small-text {
    position:absolute;
    color:#fff;
    font-weight:normal;
}
.pref-large-text {
    font-size:calc(100vw / 225 * 9);
    top:30%;
    left:50%;
    transform: translateX(-50%);
}
.pref-small-text {
    font-size:calc(100vw / 375 * 10);
    top:50%;
    left:50%;
    transform: translateX(-50%);
}
.button {
    text-align:center;
    margin:calc(100vw / 375 * 10) 0 calc(100vw / 375 * 20);
}
.button span {
    font-size:calc(100vw / 5625 * 100);
    border:1px solid #333333;
    padding:0.2em 1.5em;
    box-shadow:4px 4px 7px 0 rgb(0 0 0 / 30%);
}
/*フッター*/
.flex-design2 {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin:5vw 0;
}
.flex-inner {
    -webkit-transition:0.6s all;
    -o-transition:0.6s all;
    transition:0.6s all;
    width:50%;
    height:auto;
    background: #000;
}
.flex-inner:hover {
    opacity:0.6;
}

/*タグまわり*/
.tag-wrapper {
    padding:0 8vw;
    margin:8vw 0;
}
.category-title {
    font-size:30px;
    margin:4vw 0;
}

.flex-design3 {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}
.tag1,.tag2 {
    -webkit-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
    font-size:18px;
    margin:13px 0;
}

.tag1 span {
    padding:8px 20px;
    background: #bcbcbc;
    border-radius:5px;
}
.tag2 span {
    padding:8px 20px;
    background: #e1e0e0;
    border-radius:5px;
}
/*最下層のcss*/
.about-wrapper {
    -webkit-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
}
.about-wrapper:hover {
    opacity:0.6;
}
/*検定申し込みページ*/
.top-view-wrapper .pref-image-wrapper {
    height:auto;
}
.top-view-wrapper .pref-large-text {
    font-size:calc(100vw / 155 * 10);
    top:35%;
}
.top-view-wrapper .pref-small-text {
    font-size: calc(100vw / 275 * 10);
}
.main-container {
    padding:0 8vw;
    margin:8vw 0;
}
.exhibition {
    font-size:calc(100vw / 460 * 10);
}
.navigation-title {
    text-align:center;
    font-size:calc(100vw / 30);
    margin:5vw 0;
}

.flex-design4 {
    margin:4vw 0;
}
.flex-design4-inner {
    margin:5vw 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.contents1 {
    width:47.5%;
    height:calc((100vw - (100vw / 45 * 10)) * 9 * 475 / 141 / 100);
}
.contents2 {
    width:47.5%;
    height:calc((100vw - (100vw / 45 * 10)) * 9 * 475 / 141 / 100);
}
.contents3 {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    width:100%;
    height:calc((100vw - (100vw / 45 * 10)) * 9 * 475 / 141 / 100 / 5);
}
.genre {
    font-size:calc(100vw / 45);
    color:#000;
    width:40%;
}
.level {
    font-size:calc(100vw / 50);
    width:60%;
}
.contents4 {
    padding:2vw 0;
    font-size:calc(100vw / 75);
    width:100%;
    height:calc((100vw - (100vw / 45 * 10)) * 9 * 475 / 141 / 100 / 5 * 3);
}
.contents5 {
    font-size:calc(100vw / 50);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width:100%;
    height:calc((100vw - (100vw / 45 * 10)) * 9 * 475 / 141 / 100 / 5);
    border:1px solid #333333;
    -webkit-box-shadow:4px 4px 7px 0 rgb(0 0 0 / 30%);
            box-shadow:4px 4px 7px 0 rgb(0 0 0 / 30%);
}
.contents6 {
    font-size:calc(100vw / 45);
    color:#000;
    width:100%;
}
/*ローディング*/
.hide {
    opacity:0;
    visibility:hidden;
}


@keyframes Yspin {
  0% {
    top: 0;
  }
  50% {
    top: 100%;
    opacity: 0;
  }
  51% {
    top: -100%;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

@-webkit-keyframes Yspin {
  0% {
    top: 0;
  }
  50% {
    top: 100%;
    opacity: 0;
  }
  51% {
    top: -100%;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
.loading-wrapper {
    z-index:9999;
    position:fixed;
    width:100vw;
    height:100vh;
    margin: 0;
    background-color: #fff;
}

.loading {
  position: absolute;
  width: 100%;
  top: calc(50% - 30px);
  text-align: center;
}

.loading span {
  color: #000;
  font-size: 30px;
}

.loading .animate {
  position: absolute;
  top: 0;
}

.loading span:nth-child(2) {
  color: #0088cc;
  animation: Yspin 1.5s linear infinite;
  -webkit-animation: Yspin 1.5s linear infinite;
}

.loading span:nth-child(3) {
  margin-left: 25px;
  color: #e23069;
  animation: Yspin 1s linear infinite;
  -webkit-animation: Yspin 1s linear infinite;
}

.loading span:nth-child(4) {
  margin-left: 50px;
  color: #F0E300;
  animation: Yspin 1.25s linear infinite;
  -webkit-animation: Yspin 1.25s linear infinite;
}

.loading span:nth-child(5) {
  padding-left: 77px;
}
/*スクロールアニメーション関係*/
.sa {
    opacity:0;
    -webkit-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
}
.sa-up {
    -webkit-transform:translate(0,50px);
        -ms-transform:translate(0,50px);
            transform:translate(0,50px);
}
.show {
    opacity:1;
    -webkit-transform:none;
        -ms-transform:none;
            transform:none;
}
/*マウスオーバー関係*/
.tag1:hover,.tag2:hover,.wide-view-menu ul li:hover,.sns i:hover {
    opacity:0.6;
}
.contents5,.button span {
    background: -webkit-gradient(
        linear,
        left top, right top,
        from(#ffffff),
        color-stop(51%, #ffffff),
        to(rgba(176, 178, 179, 0.9))
    );
    background: -o-linear-gradient(
        left,
        #ffffff 0%,
        #ffffff 51%,
        rgba(176, 178, 179, 0.9)
    );
    background: linear-gradient(
        to right,
        #ffffff 0%,
        #ffffff 51%,
        rgba(176, 178, 179, 0.9)
    );
    background-size: 200% auto;
    -webkit-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
}
.contents5:hover,.button span:hover {
    background-position: right center;  
    background-size: 250% auto;
}
/*ジャンル別ページ関連*/
.genre-title {
    text-align:center;
    font-size:calc(100vw / 30);
    margin:5vw 0;
}
.pref-large-text2 {
    position:absolute;
    color:#fff;
    font-weight:normal;
    font-size:calc(100vw / 15);
    top: 50%;
    left:50%;
    transform: translateX(-50%);
}

/*スマホ表示用メニュー*/
.logo {
    font-weight:normal;
    position:absolute;
    color: #ffffff;
    top:50%;
    left:2vw;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size:calc(100vw / 15);
    -webkit-transition:all .6s;
    -o-transition:all .6s;
    transition:all .6s
}
#menu-btn-check {
    display:none;
}
/* ハンバーガーメニュー外観 */
.humburger-menu {
    position:relative;
    display:none;
    height:12vw;
    z-index: 999;
}
.menu-btn {
    cursor: pointer;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    right:0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:30px;
    height:30px;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    margin:0 3vw 0;
}
.menu-btn .bar1,
.menu-btn .bar2,
.menu-btn .bar3 {
    display:block;
    width:30px;
    height:3px;
    border-radius:3px;
    background-color: #fff;
    position:absolute;
    -webkit-transition:all .6s;
    -o-transition:all .6s;
    transition:all .6s;
}
.menu-btn .bar3 {
    bottom:0;
}
.menu-btn .bar2 {
    top:0;
}
/* ハンバーガーメニューアニメーション */
.menu-btn .bar1.button-active {
    background-color: #fff!important;
    opacity:0;
}
.menu-btn .bar2.button-active {
    background-color: #fff!important;
    top:13.5px;
    
    -webkit-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
            transform:rotate(45deg);
}
.menu-btn .bar3.button-active {
    background-color: #fff!important;
    bottom:13.5px;
    
    -webkit-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
            transform:rotate(-45deg);
}
.menu-content.button-active {
    z-index:10;
    opacity:1;
    pointer-events: auto;
}
.logo.button-active {
    color: #fff!important;
}
body.button-active {
    overflow-y: hidden;
}
/*スマホメニュー関連*/
.menu-content {
    pointer-events: none;
    display:none;
    position:fixed;
    top:0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:100vw;
    height:100vh;
    padding:10vw;
    -webkit-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
    z-index:-10;
    opacity:0;
    background: url(./images/menu-bg.jpg) center center no-repeat;
    background-size: cover;
}
.menu-content li {
    -webkit-transition:all 0.6s;
    -o-transition:all 0.6s;
    transition:all 0.6s;
    color:#f0f0f0;
    font-size: calc(100vw / 20);
    padding:2vw 3vw;
    text-align:center;
}
.menu-content li:hover,.menu-content .sns-wrapper i:hover {
    color:#9f9f9f;
}
.menu-content .sns-wrapper {
    width:60%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.sp-up {
    transform: translateY(25px);
}
.active {
    transform: none;
}
.menu-content .sns-text {
    font-size:calc(100vw / 30);
    margin:3vw 0;
    padding-right:0;
    color:#f0f0f0;
}
.menu-content .sns i {
    font-size:calc(100vw / 20);
    color:#f0f0f0;
}
/*メニューリストをふわっと順番に出すための記述*/
.fade-in {
    opacity:0;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}
.fade-in.fade-in-active {
    opacity:1;
}