/*
Theme Name: llorix-one-lite_child
Theme URI: https://www.themeisle.com/
Description: This is a custom child theme I have created.
Author: ThemeIsle
URI: https://www.themeisle.com/
Template: llorix-one-lite
Version: 0.1
*/

/* メニュー非公開 
#menu-primary
{
	display: none !important;
}*/

/* 文字が青くなるのを修正 */
.dark-text {
  color: #454545;
}

/* パワードバイの文字列削除 */
div.powered-by {
  display: none;
}
/* サイト名の文字色変更
h1#site-title a
{
	color:#ff6600;
}
*/
/* トップ背景の設定
header.header
{
	background-repeat:no-repeat;
	background-size:contain;
}
*/
/* トップ背景エリアの設定
div.overlay-layer-wrap
{
	min-height:700px;
}
*/
/* トップロゴの設定 */
div#llorix_one_lite_only_logo img {
  visibility: hidden;
  width: 500px;
}
/* トップロゴの位置調整
div.only-logo
{
	transform:translateY(-50px);
}
*/
/* 各エリアの順序などを設定 */
div#content {
  display: flex;
  flex-direction: column;
}
/* リンク */
div#clients {
  order: 1;
}
/* 会社 */
section#story {
  order: 2;
}
/* スタッフ */
section#team {
  order: 3;
  border: none;
}
section#team div.section-overlay-layer {
  padding-bottom: 0;
  background-color: #646464;
}
div.member-details div.small-text a {
  color: #ffffff;
}
div.team-member {
  margin: 0;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
div.member-pic,
div.member-pic img {
  width: auto;
  height: auto;
}
div.team-member-wrap {
  font-size: 0;
}
div.team-member-wrap div.team-member-box {
  margin: 0;
  padding: 0;
  width: 160px;
}
div.member-details {
  width: 160px;
  height: 215px;
}
/* スケジュールボタン */
section#ribbon {
  order: 4;
}
section#ribbon div.section-overlay-layer {
  /*padding-top:0;*/
  background-color: #646464;
}
/* お知らせ */
section#latestnews {
  order: 5;
}
/* サービス */
section#services {
  order: 6;
  background-color: #646464;
  color: white;
}
section#services h2.dark-text {
  color: white;
}
section#services div.single-service {
  background-color: #646464;
}
section#services a {
  color: #ffa361;
}
/* コンタクト */
div#contactinfo {
  order: 7;
}
/* 地図 */
div#container-fluid {
  order: 8;
}


/* スタッフページ */
table.staff_tbl th,
table.staff_tbl td {
  padding: 0 0.4em;
}


/* pages */
h1.title_line {
  margin-bottom: 0;
  padding-left: 10px;
  background-color: #e0e0e0;
  font-size: 20px;
}
h1.title_line + p {
  margin: 0;
}
@media only screen and (max-height:700px) {
  div#llorix_one_lite_only_logo img {
    display: none;
  }
}


/* グーグルカレンダー */
.cal_wrapper {
  overflow: hidden;
  margin: 2.0833% auto;
  min-width: 260px;
  max-width: 960px;
  height: 600px;
}
.googlecal {
  position: relative;
  padding-bottom: 100%;
  height: 0;
}
.googlecal iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  /*height:100% !important;*/
}
@media only screen and (min-width:768px) {
  .googlecal {
    padding-bottom: 75%;
  }
}
/* グーグルカレンダーのボタン */
.cal_button {
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding: 0.4em 0;
  max-width: 960px;
  border: 1px solid #666666;
  background-color: #f3f3f3;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}


/* YouTubeレスポンシブ */
div.youtube {
  position: relative;
  padding-top: 56.25%;
  width: 100%;
}
div.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


/* 入会案内 */
div.join_guidance {
  position: relative;
  padding: 50px 0 0 0;
}
div.join_guidance p {
  display: inline-block;
  margin: 0;
}
/*見出し*/
div.join_guidance div.midashi {
  margin: 20px 0;
  border-bottom: 1px solid #f16c20;
  text-align: center;
  font-size: 24px;
  line-height: 28px;
}
/*ご入会までの流れ*/
div.join_guidance div.step_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 0 0 0;
}
div.join_guidance div.step_block > div:nth-of-type(1) {
  position: relative;
  max-width: 400px;
  width: 100%;
  background-color: gray;
  text-align: center;
}
div.join_guidance div.step_block > div:nth-of-type(1) > p:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  background-color: #f16c20;
  text-align: center;
  transform: translate(-50%,-50%);
}
div.join_guidance div.step_block > div:nth-of-type(1) > p:nth-of-type(1),
div.join_guidance div.step_block > div:nth-of-type(1) > p:nth-of-type(1) span {
  color: #ffffff;
  font-weight: bold;
}
div.join_guidance div.step_block > div:nth-of-type(1) > p:nth-of-type(1) span {
  font-size: 120%;
}
div.join_guidance div.step_block > div:nth-of-type(2) {
  padding: 20px;
  max-width: 600px;
  width: 100%;
}
div.join_guidance div.step_block > div:nth-of-type(2) span {
  display: inline-block;
  padding: 0 0 20px 0;
  font-size: 140%;
}
div.join_guidance div.step_block > div:nth-of-type(2) a {
  display: block;
  float: right;
  margin: 40px 0 0 0;
  padding: 10px 20px;
  border: 2px solid #f16c20;
  border-radius: 5px;
}
/*いますぐ無料ダウンロード*/
div.join_guidance div.app_block {
  margin: 50px 0;
  background-color: gray;
}
div.join_guidance div.app_block > div:nth-of-type(1) {
  padding: 20px 0 0 0;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  text-align: center;
  font-size: 24px;
  line-height: 28px;
}
div.join_guidance div.app_block > div:nth-of-type(2) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
div.join_guidance div.app_block > div:nth-of-type(2) > div {
  padding: 20px 0 0 0;
  min-width: 300px;
  width: 50%;
  text-align: center;
}
div.join_guidance div.app_block > div:nth-of-type(2) > div a {
  display: inline-block;
  margin: 0 10px 0 0;
  width: 50%;
}
div.join_guidance div.app_block > div:nth-of-type(2) > div > img {
  width: 100px;
}
/*アプリ登録方法*/
div.join_guidance div.howto_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 0 0 0;
}
div.join_guidance div.howto_block > div:nth-of-type(1) {
  position: relative;
  max-width: 400px;
  width: 100%;
  border: 1px solid #000000;
  background-color: gray;
  text-align: center;
}
div.join_guidance div.howto_block > div:nth-of-type(2) {
  padding: 20px;
  max-width: 600px;
  width: 100%;
}
div.join_guidance div.howto_block > div:nth-of-type(2) span {
  display: inline-block;
  padding: 0 0 20px 0;
  font-size: 140%;
}
div.join_guidance div.howto_block > div:nth-of-type(2) span.caution {
  padding: 20px 0;
  color: red;
  font-weight: bold;
}


/* トップ背景画像 */
.header {
  background-position: center !important;
  background-repeat: no-repeat;
}
/* トップメッセージの設定 */
div#top_event_msg {
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}
div#top_event_msg div {
  display: inline-block;
  /* background-color:rgba(0,0,0,0.3); */
  /* border-radius:5px; */
  padding: 0 10px;
  max-width: 500px;
  text-align: left;
  text-shadow: 1px 1px 1px #000000,-1px 1px 1px #000000,1px -1px 1px #000000,-1px -1px 1px #000000;
}
div#intro-section,
h5#intro_section_text_2 {
  margin-top: 300px;
  text-shadow: 1px 1px 1px #000000,-1px 1px 1px #000000,1px -1px 1px #000000,-1px -1px 1px #000000;
}
div#llorix_one_lite_header {
  padding-bottom: 0;
}
div#llorix_one_lite_only_logo img {
  /*visibility: visible;*/
}

/* LINEボタン */
/* Instagramボタン */
#line_btn,
#insta_btn {
  position: fixed;
  right: 0;
  z-index: 100;
  min-width: 50px;
  max-width: 80px;
  width: calc((80vw/640)*100);
  height: auto;
}
#line_btn {
  bottom: clamp(calc(5px + 50px + 5px), calc(5px + ((80vw/640)*100) + 5px), calc(5px + 80px + 5px));
}
#insta_btn {
  bottom: 5px;
}
#line_btn img,
#insta_btn img {
  width: 100%;
  height: 100%;
}
#line_btn:hover img,
#insta_btn:hover img {
  opacity: 0.8;
}

/* iPad横向きの不具合対応 */
.iPad .header {
  background-attachment: scroll !important;
}

/* トップ予約ボタン */
#top_reserve_btn_parent {
  padding: 30px 0;
  text-align: center;
}
#top_reserve_btn {
  display: inline-block;
  padding: 10px 25px;
  border: 3px solid #f16c20;
  border-color: #f16c20;
  border-radius: 30px;
  background: rgba(241,108,32,0.8);
  color: #ffdeca;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: none;
  white-space: initial;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  transition: none;
}
#top_reserve_btn a {
  padding: 0 5px;
  color: #ffffff;
  text-decoration: underline;
  font-size: 20px;
}
#top_reserve_btn a:hover {
  opacity: 0.8;
}