@charset "UTF-8";
/*
Theme Name: リトラボーカルクラブ スマートフォンサイト
Theme URI:
Description: リトラボーカルクラブ スマートフォンサイト
Author: densuke
Author URI: http://dnsk.jp/
*/
/*コンテンツwidth*/
/*ボーダーカラー*/
/*良く使う色*/
/*line-height*/
/*フォントサイズ*/
/*opacity*/
/*-----------------------------------------------------------------
デフォルトリセット設定
-----------------------------------------------------------------*/
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html {
  color: #333;
  background: #fff;
  width: 100%;
  /*line-height: 150%;*/
  font-size: 6.25%;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
figure {
  margin: 0;
  padding: 0;
  /*line-height: 160%;*/
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

img {
  width: 100%;
  vertical-align: top;
  padding: 0;
  margin: 0;
  line-height: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: normal;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
  font-weight: normal;
}

/*q:before,q:after{ content:''; }*/
/*abbr,acronym{ border:0;font-variant:normal; }
sup{ vertical-align:text-top; }
sub{ vertical-align:text-bottom; }*/
input,
textarea,
select {
  font-size: inherit;
  font-weight: inherit;
}

input,
textarea,
select {
  *font-size: 100%;
}

/*legend{ color:#000; }*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

a {
  display: block;
  /*-webkit-tap-highlight-color: transparent;*/
}

* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*-----------------------------------------------------------------
リンク
-----------------------------------------------------------------*/
a:link {
  color: #333;
  text-decoration: none;
}

a:visited {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #999;
  text-decoration: none;
}

a:active {
  color: #999;
  text-decoration: none;
}

/*-----------------------------------------------------------------
body,Wrapper
-----------------------------------------------------------------*/
body {
  width: 100%;
  font-size: 14rem;
  border: none;
  -webkit-text-size-adjust: 100%;
}

#wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

@media screen and (min-width: 960px) {
  /* PC用CSS */
  /*
    zoom
    */
}

@media screen and (min-width: 960px) and (max-width: 1400px) and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-width: 960px) and (max-width: 1400px) and (min-resolution: 1.5dppx) {
  html.chrome body {
    zoom: 1;
    /*初期の値 0.6*/
    -moz-transform: scale(1, 1);
    /*初期の値 0.6 0.6*/
  }
}

@media screen and (min-width: 960px) and (max-width: 1400px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 960px) and (max-width: 1400px) and (min-resolution: 2dppx) {
  html.chrome body {
    zoom: 1;
    /*初期の値 0.50*/
    -moz-transform: scale(1, 1);
    /*初期の値 0.50 0.50*/
  }
}

@media screen and (min-width: 960px) and (max-width: 1400px) {
  html.chrome.iphone body,
  html.chrome.android body {
    zoom: 1;
    -moz-transform: scale(1, 1);
  }
}

@media screen and (min-width: 960px) {
  #wrapper {
    width: 750px;
    margin: 0 auto;
  }
}

/*-----------------------------------------------------------------
header
-----------------------------------------------------------------*/
header {
  width: 100%;
  position: relative;
  z-index: 1;
}

header .container {
  display: table;
  width: 100%;
  padding: 0 1.866667% 0 1.333333%;
  border-top: 5px solid #03a9f4;
}

header .container h1 {
  display: table-cell;
  padding-right: 1.239669%;
  vertical-align: middle;
}

header .container p {
  display: table-cell;
}

header .container p:nth-of-type(1) {
  padding-right: 2.066116%;
  vertical-align: middle;
}

header .container p#menu {
  /*ナビゲーション*/
  display: table-cell;
  padding-bottom: 3.5px;
  vertical-align: top;
}

header .container p#menu a.slide_btn {
  background: url(img/common/header_menu.png) center center no-repeat;
  -webkit-background-size: contain;
          background-size: contain;
}

header .container p#menu a.slide_btn.active {
  background: url(img/common/header_menu_close.png) center center no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}

#menuContent {
  display: none;
  width: 100%;
  padding: 27px 0 40px;
  background-color: rgba(196, 228, 255, 0.9);
  font-size: 14rem;
  position: absolute;
  top: 72px;
}

#menuContent h2 {
  width: 28.533333%;
  margin: 0 auto 13px;
}

#menuContent #gNav {
  width: 78.666667%;
  margin: 0 auto 20px;
}

#menuContent #gNav > ul > li {
  background-color: #fff;
  margin-bottom: 2px;
}

#menuContent #gNav > ul > li:last-child {
  margin-bottom: 0;
}

#menuContent #gNav > ul > li > a {
  padding: 20px 10%;
  background: url(img/common/icon_note_bl.png) 4% center no-repeat, url(img/common/arrow01_lb.png) 94% center no-repeat;
  -webkit-background-size: 9px auto,
 5px auto;
  background-size: 9px auto,
 5px auto;
  color: #1a96ff;
}

#menuContent #gNav > ul > li .accordion dt {
  padding: 20px 10%;
  background: url(img/common/icon_note_bl.png) 4% center no-repeat, url(img/common/menu_icon_open.png) 94% center no-repeat;
  -webkit-background-size: 9px auto,
 15px auto;
  background-size: 9px auto,
 15px auto;
  color: #1a96ff;
}

#menuContent #gNav > ul > li .accordion dt.open {
  background: url(img/common/icon_note_bl.png) 4% center no-repeat, url(img/common/menu_icon_close.png) 94% center no-repeat;
  -webkit-background-size: 9px auto,
 15px auto;
  background-size: 9px auto,
 15px auto;
}

#menuContent #gNav > ul > li .accordion dd {
  display: none;
}

#menuContent #gNav > ul > li .accordion dd ul {
  padding: 0 0 10px 10%;
}

#menuContent #gNav > ul > li .accordion dd ul li a {
  padding: 15px 0;
  background: url(img/common/arrow01_lb.png) 92% center no-repeat;
  -webkit-background-size: 5px auto;
  background-size: 5px auto;
  color: #1a96ff;
}

#menuContent #gNav > ul > li .accordion dd ul li a:before {
  content: "┗ ";
}

#menuContent .btn {
  width: 78.666667%;
  margin: 0 auto 20px;
}

#menuContent .contactWrap {
  width: 78.666667%;
  padding: 4px;
  margin: 0 auto 25px;
  background-color: #fff;
  border: 2px solid #1a96ff;
}

#menuContent .contactWrap .inner {
  padding: 18px 28px;
  border: 1px solid #1a96ff;
}

#menuContent .contactWrap .inner .logo {
  width: 74.945055%;
  margin: 0 auto 16px;
}

#menuContent .contactWrap .inner h3 {
  width: 89.67033%;
  margin: 0 auto 8px;
}

#menuContent .contactWrap .inner .time {
  width: 93.186813%;
  margin: 0 auto 16px;
}

#menuContent .contactWrap .inner .holiday {
  margin-bottom: 12px;
  font-size: 13rem;
  text-align: center;
  color: #1a96ff;
}

#menuContent .contactWrap .inner ul {
  overflow: hidden;
}

#menuContent .contactWrap .inner ul li {
  float: left;
  width: 29.010989%;
  margin-right: 6.4835165%;
}

#menuContent .contactWrap .inner ul li:nth-child(3n) {
  margin-right: 0;
}

#menuContent .contactWrap .inner ul li:nth-child(-n+3) {
  margin-bottom: 10px;
}

#menuContent .list_close {
  width: 69.333333%;
  margin: 0 auto;
}

/*-----------------------------------------------------------------
footer
-----------------------------------------------------------------*/
footer .nav01 {
  background-color: #f3f3f3;
  padding-bottom: 18px;
  margin-bottom: 20px;
}

footer .nav01 h3 {
  margin-bottom: 21px;
}

footer .nav01 ul {
  width: 92%;
  margin: 0 auto;
  overflow: hidden;
}

footer .nav01 ul li {
  float: left;
  width: 48%;
  margin-bottom: 12px;
}

footer .nav01 ul li:nth-child(odd) {
  margin-right: 4%;
}

footer .contactWrap {
  width: 92%;
  padding: 4px;
  margin: 0 auto 20px;
  background-color: #fff;
  border: 2px solid #1a96ff;
}

footer .contactWrap .inner {
  padding: 18px 0;
  border: 1px solid #1a96ff;
}

footer .contactWrap .inner .logo {
  width: 60%;
  margin: 0 auto 20px;
}

footer .contactWrap .inner h3 {
  width: 65%;
  margin: 0 auto 10px;
}

footer .contactWrap .inner .time {
  width: 68%;
  margin: 0 auto 5px;
}

footer .contactWrap .inner .holiday {
  margin-bottom: 15px;
  font-size: 13rem;
  text-align: center;
  color: #1a96ff;
}

footer .contactWrap .inner ul {
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
}

footer .contactWrap .inner ul li {
  float: left;
  width: 29.010989%;
  margin-right: 6.4835165%;
}

footer .contactWrap .inner ul li:nth-child(3n) {
  margin-right: 0;
}

footer .contactWrap .inner ul li:nth-child(-n+3) {
  margin-bottom: 15px;
}

footer .nav02 ul {
  overflow: hidden;
  border-top: 1px solid #e6e6e6;
}

footer .nav02 ul li {
  float: left;
  width: 50%;
  border-bottom: 1px solid #e6e6e6;
}

footer .nav02 ul li:nth-child(odd) {
  border-right: 1px solid #e6e6e6;
}

footer .nav02 ul li a {
  padding: 15px 0;
  background-color: #f8f8f8;
  text-align: center;
  font-size: 12rem;
}

footer #copyright {
  padding: 10px 0;
  background-color: #1a96ff;
  text-align: center;
  font-size: 12rem;
  color: #fff;
}

#pagetop {
  width: 13.333333%;
  right: 4%;
  bottom: 50px;
  position: fixed;
  z-index: 1000;
}

/**
ポップアップ
*/
/* モーダルウィンドウのスタイル */
.modal {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: none;
  -webkit-transition: opacity 1s ease 0s;
  transition: opacity 1s ease 0s;
  /* モーダルウィンドウの中身のスタイル */
}

.modal .inner {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.modal .inner img {
  width: auto;
  max-width: 90vw;
}

.modal.open {
  display: block;
  opacity: 1;
}

.modal .icon-close {
  position: fixed;
  top: 5vw;
  right: 5vw;
  z-index: 9999;
  max-width: 8.26667vw;
}

/* オーバーレイのスタイル */
.overLay {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.74);
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

@media screen and (min-width: 960px) {
  .modal {
    /* モーダルウィンドウの中身のスタイル */
  }
  .modal .inner img {
    width: auto;
    max-width: 100%;
  }
  .modal .icon-close {
    top: 50px;
    right: 50px;
    max-width: 62px;
  }
}