/* 背景色 */
header {
    background-color: #FFF;
}

body {
    background-color: #ECFBFE;
}

footer {
    background-color: #1EA3AF;
}

/*  */

body {
    font-size: 14px;
    margin: 0px;
    font-family: 'Noto Sans JP', sans-serif;
}
header {
    text-align: center;
    height: 10vh;
}
header img.logo {
    height: 5vh;
    padding-right: 5%;
    margin: 2.5vh 0;
}

main {
    text-align: center;
    padding: 0 10%;
    overflow: hidden;
}

h1 {
    font-size: 1.5em;
    margin: 0;
    padding: 0.8em 0 0.3em;
}
.guidance_wrap {
    min-height: 55px;
    margin: 5px 0;
}

.question {
    background-color: #FFF;
    height: 50vh;
    text-align: center;
    padding: 10px;
}

.question_progress {
    /* position: absolute; */
    /* top: 100px; */
    margin: 0 auto;
}

.question ul.choices {

    list-style: none;
    padding: 0;
    margin: 0 auto;

    display: flex;
    flex-flow: column;
}

.question ul.choices li {
    /* 最低の高さ */
    min-height: 3.5em;
    display: table;
    margin: 0 0 1em;
}

.question .choice_button {
    /* 上下中央 */
    display: table-cell;
    vertical-align: middle;
    /* 左右中央 */
    text-align: center;

    /* フォントスタイル */
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;

    /* カーソル */
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;

    /* ボタンスタイル */
    letter-spacing: 0.1em;
    border-radius: 0.5rem;
    background-color: #1EA3AF;
    border: none;
    padding: 5px;

    text-decoration: none;
  }

/* .question .choice_button:hover {
    border: 1px solid #1EA3AF;
    background-color: #fff;
    color: #1EA3AF;
} */

.question .choice_button.selected {
    border: 1px solid #1EA3AF;
    background-color: #fff;
    color: #1EA3AF;
}

.question .progress {
    text-align: center;
}

.question .total_point {
    font-size: 1.5rem;
    font-weight: 700;
}

.question .question_footer {
    margin-top: 10px;
    display: flex;
}

.question .question_footer div{
    width: 33%;
}

.prev_button {
    /* フォントスタイル */
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: #1EA3AF;

    /* ボタンスタイル */
    cursor: pointer;

    letter-spacing: 0.1em;
    border-radius: 0.5rem;
    background-color: #fff;
    border: 1px solid #1EA3AF;
    padding: 5px;
    min-width: 60%;

    display: block;
}

/* footer内のテキストは縦中央に固定 */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 1em 0;

    /* テキストの配置 */
    text-align: center;
    vertical-align: middle;
    font-size: 0.7em;


    color: #FFF;
    height: 2vh;
}

/* トランジション */
.question {
    position: relative;
    overflow: hidden;
    /* width: 270px; */
    max-width: 300px;
    margin: 0 auto;
}

.page {
    position: absolute;
    width: 93%;
    margin: 0 auto;
}

.next-enter-active, .next-leave-active,
.prev-enter-active, .prev-leave-active  {
  transition: all .8s ease-out;
}
.next-enter {
  transform: translateX(450px);
}
.next-enter-to {
  transform: translateX(0);
}
.next-leave {
  transform: translateX(0);
}
.next-leave-to {
  transform: translateX(-450px);
}
.prev-enter {
  transform: translateX(-450px);
}
.prev-enter-to {
  transform: translateX(0);
}
.prev-leave {
  transform: translateX(0);
}
.prev-leave-to {
  transform: translateX(450px);
}





/* 追記 */
.header__fixed.fixed{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
  background-color: #fff;
  }
  


/* ==========================================================================
  HEADER
  =========================================================================== */

.header {
    background-color: #fff;
    height: 100px;
    padding: 32px 25px 32px 96px;
    box-sizing: border-box;
  }
  
  .home .header {
    background-color: transparent;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;
  }
  
  .header__logo {
    display: inline-block;
  }
  
  .header__logo > img,
  .header__logo a {
    width: 148px;
    height: 36px;
    display: inline-block;
    transition: all 0.2s;
  }
  
  .header__logo a:hover {
    opacity: 0.6;
    cursor: pointer;
  }
  
  .spMenu,
  .spMenu.active,
  .header__menuBtn {
    display: none;
  }
  
  .header__menu {
    width: calc(100% - 200px);
    text-align: right;
    float: right;
  }
  
  .header__menu-item {
    display: inline-block;
    margin-right: 24px;
    margin-top: 5px;
  }
  
  .header__menu-item a {
    color: #333;
    text-decoration: none;
    font-size: 1.6rem;
    transition: all 0.2s;
  }
  
  .header__menu-item a:hover {
    opacity: 0.6;
    cursor: pointer;
    color: #20a3af;
  }


.header__gnav{
	background-color: #ECFCFF;
}

.header__gnav-list{
	width: 1020px;
	margin:0 auto;
	text-align: center;
}

.header__gnav-item{
	display: inline-block;
	margin: 0 17px;
	line-height: 50px;
}

.header__gnav-item a{
	color: #333;
	text-decoration: none;
    font-size: 16px;
}

.header__gnav-item a:hover{
	opacity: 0.6;
	cursor: pointer;
}


.header__linkBtn{
	display: inline-block;
	float: right;
}

.header__linkBtn a {
    width: 246px;
    display: inline-block;
    box-sizing: border-box;
    display: inline-block;
    line-height: 1;
    box-sizing: border-box;
    font-size: 2rem;
    font-weight: bold;
    background-color: #20a3af;
    color: #fff;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 48px;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
}

.header__linkBtn a::before {
    content: "";
    background-image: url(https://sleep-medical.net/wp/wp-content/themes/sleep-medical-clinic/assets/img/reservation_ico.svg);
    width: 28px;
    height: 28px;
    background-size: 28px;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    top: 6px;
    margin-top: -11px;
}

.header__linkBtn a:hover{
	opacity: 0.6;
}


@media screen and (max-width: 768px) {
    .header__linkBtn, .header__gnav {
        display: none;
    }
}