/*!
Theme Name: uresalo
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: uresalo
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

uresalo is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
    word-break: break-all;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

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

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: yu-gothic-pr6n, 游ゴシック, YuGothic, "Hiragino Sans", "ＭＳ Ｐゴシック", sans-serif, system-ui;
	font-size: 18px;
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul, ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto;
	/* Make sure images are scaled correctly. */
	max-width: 100%;
	/* Adhere to container width. */
}

figure {
	margin: 1em 0;
	/* Extra wide images within figure tags don't overflow the content area. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: royalblue;
}

a:visited {
	color: purple;
}

a:hover, a:focus, a:active {
	color: midnightblue;
}

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
	/* Make sure select elements fit in widgets. */
}

.widget select {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}


/*--------------------------------------------------------------
# ここからオリジナル追加
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## スマホヘッダー
--------------------------------------------------------------*/
.clerfix {
    clear: both;
}

.headmenu01 img {
    max-height: 76px;
}

.headmenu02 {
    width: 25%;
    float: left;

}
.inner {
  width: 980px;
  margin: 0 auto;
  position: relative;
}

.inner:after {
  content:"";
  clear: both;
  display: block;
}

/*--------header-----------*/

#top-head {
  top: -100px;
  position: absolute;
  width: 100%;
  margin: 100px auto 0;
  padding: 30px 0 0;
  line-height: 1;
  z-index: 999;
}

#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}

#top-head .inner {
    position: relative;
}
#top-head .logo {
    float: left;
    position: relative;
    font-size: 36px;
    height: 50px;
}

#top-head .logo a {
  position: absolute;
  width: 100%;
  height: 50px;
}

#global-nav ul {
    list-style: none;
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 14px;
}
#global-nav ul li {
    float: left;
    padding:0 30px;
    border-left: 1px dotted #32373c;
}
#global-nav ul li a {
    padding: 5px 5px;
    position: relative;
    display: inline-block;
}

#global-nav ul li a:hover {
 opacity: 0.8;
}

nav span{
    background:#666;
    height:2px;
    display:block;
    position:relative;
    width:50px;
    left:0;
}


/*--------固定化されたときのCSS-----------*/

#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 10px;
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}

#top-head.fixed .logo {
  position: relative;
    font-size: 24px;
    color: #333;
}

#top-head.fixed .logo a {
  position: absolute;
  width: 100%;
  height: 30px;

}
#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
    padding-bottom: 10px;
}




#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}
#nav-toggle {
    display: block;
    position: absolute;
    right: 16px;
    top: 15px;
    width: 50px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}






/*------------タブレット用------------------*/

@media screen and (max-width: 768px) {
  .head-inner {
    display: none;
  }
.topinner {
    margin-right: 3% !important;
    margin-left: 3% !important;
}
.breadcrumbs {
    margin-right: 3% !important;
    margin-left: 3% !important;
}
.page-content, .entry-content, .entry-summary {
    margin: 1.5em 7% 0 7%;
}
  .slick-next {
    right: 0;
  }

  #top-head,
  .inner {
      width: 100%;
      padding: 0;
  }
  #top-head {
  background-color: #fff;
      height: 65px;
      top: 0;
      position: fixed;
      margin-top: 0;
  }
  /* Fixed reset */
  #top-head.fixed {
      padding-top: 0;
      background: #fff;
      height: 65px;
  }
  #mobile-head {
    width: 100%;
    height: 72px;
    z-index: 999;
    position: relative;
  }
  #top-head.fixed .logo,
  #top-head .logo {
      position: absolute;
      left: 13px;
      height: 50px;
      top: 15px;
      color: #333;
      font-size: 26px;
  }
  #global-nav {
      position: absolute;
      /* 開いてないときは画面外に配置 */
      top: -491px;
      background: #31b6ca;
      width: 100%;
      text-align: center;
      padding: 0;
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      z-index: 1;
  }
  #global-nav ul {
      list-style: none;
      position: static;
      right: 0;
      bottom: 0;
      font-size: 12px;
      margin: 0px;
    padding: 0 0 50px 0;
  }
  #global-nav ul li {
      width: 50%;
      float: left;
      position: static;
      padding: 4px 0px 4px 10px;
      text-align: left;
      color: #fff;
      border-bottom: 1px dotted #fff;
      height: 60px;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
      align-items: center; /* 縦方向中央揃え */
      -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
      justify-content: center; /* 横方向中央揃え */
      font-size: 15px;
  }
  #top-head #global-nav ul li a,
  #top-head.fixed #global-nav ul li a {
      width: 100%;
      display: block;
      color: #fff;
      padding: 8px 0;
  }

  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
      top: 11px;
      -webkit-transform: rotate(315deg);
      -moz-transform: rotate(315deg);
      transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
      width: 0;
      left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
      top: 11px;
      -webkit-transform: rotate(-315deg);
      -moz-transform: rotate(-315deg);
      transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open #global-nav {
      /* #global-nav top + #mobile-head height */
      -moz-transform: translateY(556px);
      -webkit-transform: translateY(556px);
      transform: translateY(556px);
    z-index: 99;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow-y: scroll;
    padding-bottom: 100px;
  }
#nav-toggle {
    display: block;
    position: absolute;
    right: 34px;
    top: 15px;
    width: 50px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
.tgtxt {
    text-align: center;
    top: 33px;
}
  .inner h1 {
    border-top: 1px solid #fff;
    margin: 0;
    padding: 0;
}
.adress {
    font-size: 13px;
}
.voicetext1 {
    position: absolute;
    color: #000;
    top: 22%;
    left: 29%;
    font-size: 16px;
    width: 45%;
    text-align: left;
}
.voicetext2 {
position: absolute;
    color: #000;
    top: 53%;
    left: 30%;
    font-size: 16px;
    width: 45%;
    text-align: left;
}
.menu-btn {
    position: fixed;
    top: 32px;
    right: 39px;
    line-height: 50px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}
}




/*--------------------------------------------------------------
## スマホフッダー
--------------------------------------------------------------*/
#foot-menu {
  width: 100%;
  background-color: #a6aaa2;
}
#foot-menu .inner ul {
  width: 50%;
    float: left;
    overflow: hidden;
    border-right: none;
    margin: 0px;
    padding: 5% 0px;
    list-style: none;
}
#foot-menu .inner ul li.list1, #foot-menu .inner ul li.list2 {
  border-top: none;
}
#foot-menu .inner ul li {
}
#foot-menu .inner ul li.list2 a, #foot-menu .inner ul li.list2 span {
  border-right: 1px solid #454545;
}
#foot-menu .inner ul li a {
  text-align: center;
    line-height: 1.75;
    padding: 0;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}
.site-info {
    text-align: center;
    padding: 10px 0;
    background-color: #a6aaa2;
    color: #fff;
    border-top: 1px solid #fff;
    padding-bottom: 40px;
}
#nav-toggle img {
    max-height: 65px;
}
/*--------------------------------------------------------------
## トップページ
--------------------------------------------------------------*/
.voiceph {
    width: 50%;
    float: left;
    margin-right: 3%;
}
.voiceph img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    float: left;
    margin-right: 2%;
}
.voicebox {
	clear: both;
	margin: 3%;
}
.staffblogbox {
    clear: both;
}
.staffblogimg {
width: 30%;
    float: left;
    margin-right: 2%;
}
.staffblogimg img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    float: left;
    margin-right: 2%;
}
span.blogdate {
color: #b2b1b1;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
}
.tblotitle {
    margin: 0;
    overflow: hidden;
    height: 26px;
}
.tblotitle a {
    color: #000;
    text-decoration: none;
}
.insidebox {
	margin: 0;
}

#content {
    padding-top: 100px;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 8%;
}
.footspace {
    background-color: #F8FBFD;
    padding: 40px 10px;
}
.topinner {
    max-width: 1000px;
    padding: 0px;
    margin-right: auto;
    margin-left: auto;
}
.ninkititle {
    margin-bottom: 20px;
}
.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}
.voicekobatsu {
width: 46%;
    float: left;
    margin: 0 2%;
}
ul.qalist {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.qalist li {
    background: url(images/q.jpg) no-repeat;
    line-height: 2;
    padding: 20px 0;
    margin-right: 2%;
    border-top: 1px dotted #000;
}
ul.qalist a {
    font-size: 20px;
}
ul.qalist li p {
    margin: 0;
}
.sblogk {
width: 100%;
    clear: both;
    margin-bottom: 3%;
}
.sblogk p {
    font-size: 19px;
}
#content h1.entry-title {
font-weight: bold;
    font-size: 30px;
    color: #000;
    border-bottom: 1px solid;
}
.site-maininside h2 {
background: #31b6ca;
position: relative;
    border: none;
    font-size: 23px;
    padding: 1em 1.1em;
    margin-top: 2.1em;
    margin-bottom: 1em;
    border-radius: 3px;
    color: #fff;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.25) inset;
    line-height: 1.4em;
    font-weight: bold;
	}
.site-maininside h2:before, .site-maininside h2:after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    border-top: 1px dashed;
}
.site-maininside h2:after {
    bottom: 3px;
    left: 0;
}
.site-maininside h2:before {
    top: 3px;
    left: 0;
}
h3 {
    border-top: 1px solid #8B6F57;
    border-bottom: 1px solid #8B6F57;
    padding: 10px 0;
}
.site-maininside h4 {
	border-bottom: 1px dotted #e2a4a5;
	color: #e2a4a5;
	font-size: 20px;
	line-height: 30px;
    padding: 10px 0;
	margin-top: 30px;
	margin-bottom: 20px;
	font-weight: bold;
	}
.site-maininside h5 {
	border-left: 10px solid #e2a4a5;
	color: #000;
	font-size: 18px;
	line-height: 27px;
	padding: 10px 20px;
	margin-top: 30px;
	margin-bottom: 20px;
	font-weight: bold;
	}
.site-maininside h6 {
	border-bottom: 1px dotted #333333;
	color: #333333;
	font-size: 16px;
	line-height: 26px;
	padding: 10px 0px;
	margin-top: 30px;
	margin-bottom: 20px;
	font-weight: bold;
	}
.site-maininside {
    margin: 0;
}

.fl_ri {
float: right;
}
h2.entry-title {
padding: 2% 0;
    font-size: 30px;
    color: #5799BD;
    background: url(images/titleback.jpg) repeat-x;
    text-align: center;
}
ul.qalistpage {
    list-style: none;
    padding:0;
    margin: 0;
}
.qainside {
    padding: 20px 0;
    margin-top: -90px;
    padding-top: 90px;
}
#qa {
    margin: 0 2%;
}
.moreqa {
padding: 0 0 40px 0;
float: right;
}
.stvoiceiimg img {
    width: 25%;
    height: 150px;
    object-fit: cover;
    float: left;
    margin-right: 2%;
    margin-bottom: 5%;
}
.staff_l {
    width: 50%;
    margin-right: 5%;
    float: left;
    text-align: center;
}
.VideoWrapper {
    margin-top: 10%;
}
.VideoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
 
.VideoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
p.subcaption {
    text-align: left;
    font-size: 15px;
}
.subimg {
    margin: 10% 0;
}
.subimg img {
    float: left;
    width: 50%;
    height: 180px;
    margin-right: 2%;
    object-fit: cover;
}
.staff_r {
    width: 45%;
    float: left;
}
#staff h3 {
font-size: 20px;
    font-weight: normal;
    margin: 30px 0 10px 0;
    border-bottom: 1px dotted #333;
    font-family: 'Quicksand', sans-serif;
}
.staff_r p {
    margin: 0;
    line-height: 1.5;
}
.staff_r h4 {
    margin: 10px 0 0 0;
    line-height: 2;
}
.stname {
font-size: 30px;
}
footer#colophon {

}
div#staff {
    margin: 0 2%;
}
.reservation_btn {
    margin: 10px 0;
}
.social_btn img {
    max-width: 23%;
}
.reservation_btn img {
    max-width: 48%;
}
.staffichiran {
    width: 29%;
    margin: 10px 2%;
    float: left;
    min-height: 550px;
}
.stiimg img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.stnameb {
    font-size: 20px;
}
.stnameb a {
    text-decoration: none;
    color: #404040;
}
.stnameb a:hover {
    text-decoration: underline;
}
.insidetext h2 {
    position: absolute;
    color: #cd0102;
    top: 32%;
    left: 2%;
    font-size: 30px;
}
.insidetext {
    position: relative;
}
.insidetext img {
    width: 100%;
}
.wp-pagenavi {
    text-align: center;
    padding-top: 5%;
}
#topcontent h2 {
    text-align: center;
    margin-top: 50px;
}
ul.topmenu {
    list-style: none;
    margin: 0 0 5% 0;
    padding: 0;
}
ul.topmenu li {
    width: 49%;
    float: left;
    margin-right: 1%;
    margin-bottom: 6%;
}
.menutitle {
color: #5B001E;
font-weight: bold;
text-align: center;
}
.topmenu p {
    margin: 0;
    height: 40px;
}
.topvoice {
position: relative;
text-align: center;    
}
.top_bot {
    width: 46%;
    float: left;
    margin: 3% 2%;
}
.top_botb {
    width: 46%;
    float: left;
    margin: 3% 2%;
}
.pageup {
    background: url(images/pageup_back.jpg) repeat-x;
    margin: 0;
    padding: 0;
    height: 98px;
    text-align: center;
}
.title img {
    height: auto;
    max-width: 100%;
    max-height: 76px;
}
.topimg {
    text-align: center;
    padding-top: 80px;
        line-height: 0;
}
.topimg img {
    width: 100%;
}

.taxonomies-news-category p a {
    color: #fff;
    text-decoration: none;
}
#taxonomies {
    margin-bottom: 5%;
}
.taxonomies-news-category p {
    border-radius: 10px;
    background-color: #e2a4a5;
    width: 31%;
    color: #fff;
    padding: 1.5%;
    margin-right: 2%;
    margin-left: 0;
    float: left;
    margin-bottom: 1%;
    margin-top: 1%;
}
.footmap {
	text-align: center;
	margin: 5% 0 10% 0;
}
.footlogo {
	text-align: center;
}
.footlogo img {
    margin-bottom: 2%;
}
li.prev {
    float: right;
    list-style: none;
    width: 47%;
    text-align: right;
    font-size: 14px;
        background-color: #CCC;
    padding: 10px;
    line-height: 20px;
}
li.next {
    float: left;
    list-style: none;
    width: 47%;
    font-size: 14px;
        background-color: #CCC;
    padding: 10px;
    line-height: 20px;
}
ul#pagination {
    padding: 0;
    margin: 0;
}
.blogcpbn {
    border-top: 1px dotted #CCC;
    padding-top: 20px;
}
.messe_photo {
    float: left;
    margin-right: 2%;
}
.messe_sign {
    float: right;
    margin-top: 2%;
}
.ow_title {
font-size: 30px;
margin: 2% 0;
}
.ow_photo {
    float: left;
    margin-right: 2%;
}
.ow_text {
}
.me_text {
font-size: 20px;
text-align: center;
}
.yo_bn img {
  width: 100%;
  }
.black {
      color: #fff;
      background: #000;
}
.required {
    color: #f00;
}  
/* --- お問い合わせフォームのカスタマイズ --- */
/* 入力部分 */
.wpcf7 select, input[type="email"], input[type="text"], textarea {
width: 96%; /* 最大の幅 */
font-size: 100%; /* フォントの大きさ */
padding: 0.5em; /* 文字と入力枠の間の余白（0.5文字を指定）*/
border: 1px solid #ccc; /* 枠の指定 */
border-radius: 4px; /* コーナーを微妙に丸く */
}
/* 送信ボタン */
input[type="submit"] {
width: 270px; /* ボタンの幅 */
font-size: 18px; /* フォントの大きさ */
font-weight: bold; /* 太文字 */
text-align: center; /* 位置を中央に */
text-decoration:none; /* 文字の下線は消す */
color: #ffffff; /* 文字色 */
background: #49a9d4; /* ボタンの背景色 */
padding: 10px 40px; /* ボタンの余白 */
border-radius: 5px; /* ボタンの角を丸く */
border: 0; /* ボタンの枠線を消す */
border-bottom : 1px solid #757575 ; /* 下部にだけ1pxの線を引く */
}
.wpcf7 input[type="submit"]:hover {
opacity: 0.5; /* マウスオンで半透明にする */
}
.form_inq {
padding: 2% 0 2% 4%;
background-color: #f1f4f9;
border-radius: 1%;
margin-top: 5%;
border: 1px solid #ccc;
}
blockquote {
    position: relative;
    font-size: 19px;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #fee2f0;
    color: #777777;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #777777;
    font-size: 28px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

  
/*--------------------------------------------------------------
## PCヘッダー
--------------------------------------------------------------*/
@media screen and (min-width:768px) {
// 通常のデスクトップに適用したいスタイル //

  .head-inner {
    display: none;
  }

  .slick-next {
    right: 0;
  }

  #top-head,
  .inner {
      width: 100%;
      padding: 0;
  }
  #top-head {
      top: 0;
      position: fixed;
      margin-top: 0;
      height: 80px;
    background-color: #fff;
  }
  /* Fixed reset */
  #top-head.fixed {
      padding-top: 0;
      background: #fff;
  }

  #mobile-head {
    float: right;
    width: 260px;
    height: auto;
    position: relative;
}
  #top-head.fixed .logo,
  #top-head .logo {
      position: absolute;
      left: 13px;
      height: 50px;
      top: 15px;
      color: #333;
      font-size: 26px;
  }
  #global-nav {
      position: absolute;
      /* 開いてないときは画面外に配置 */
      top: -548px;
      background: #f3f3f3;
      width: 100%;
      text-align: center;
      padding: 0;
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
  }
  #global-nav ul {
      list-style: none;
      position: static;
      right: 0;
      bottom: 0;
      font-size: 12px;
      margin: 0px;
    padding: 0 0 50px 0;
  }
  #global-nav ul li {
width: 50%;
      float: left;
      position: static;
      padding: 4px 0px 4px 10px;
      text-align: left;
      color: #32373c;
      border-bottom: 1px dotted #32373c;
      height: 60px;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
      align-items: center; /* 縦方向中央揃え */
      -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
      justify-content: center; /* 横方向中央揃え */
      font-size: 15px;
  }
  #top-head #global-nav ul li a,
  #top-head.fixed #global-nav ul li a {
      width: 100%;
      display: block;
      color: #32373c;
      padding: 10px 0;
  }

  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
      top: 11px;
      -webkit-transform: rotate(315deg);
      -moz-transform: rotate(315deg);
      transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
      width: 0;
      left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
      top: 11px;
      -webkit-transform: rotate(-315deg);
      -moz-transform: rotate(-315deg);
      transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open #global-nav {
      /* #global-nav top + #mobile-head height */
      -moz-transform: translateY(628px);
      -webkit-transform: translateY(628px);
      transform: translateY(628px);
    z-index: 99;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow-y: scroll;
    padding-bottom: 100px;
  }
  #top-head .title {   
        float: left;
        margin: 0;
        padding: 13px 0 0 0;
        width: 360px;
        clear: none;
        background-color: #fff;
        height: 80px;
        text-align: right;
}
  #top-head title img {
    max-height: 76px;
}
.title p {
    margin: 0;
    color: #000;
    font-size: 15px;
    line-height: 1;
}
#nav-toggle img {
    max-height: 76px;
}
#foot-menu .inner ul li {
    border-left: none;
}
.foottext p {
    font-size: 25px;
        margin: 0;
}
.footinfo {
text-align: center;
}
.inquiry {
    width: 500px;
}
.foottext {

}
.adress {
    font-size: 20px;
}
ul.topmenu li {
    width: 48%;
    float: left;
    margin-right: 2%;
    margin-bottom: 3%;
}
.voicetext1 {
position: absolute;
    color: #000;
    top: 26%;
    left: 29%;
    font-size: 14px;
    width: 46%;
    text-align: left;
}
.voicetext2 {
position: absolute;
    color: #000;
    top: 53%;
    left: 30%;
    font-size: 14px;
    width: 46%;
    text-align: left;
}
.footbtn {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}
.menu-btn {
position: fixed;
    top: 32px;
    right: 24px;
    line-height: 50px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    color: #31b6ca;
}
ul.gallerylist img {
    width: 18%;
    margin: 1%;
    float: left;
    height: 250px;
    object-fit: cover;
}
#foot-menu .inner {
  padding: 0 14% 0 14%;
    margin: 0;
    opacity: 1;
}
.headmenu01 {
width: 174px;
    float: left;
    height: 80px;
    text-align: center;
    padding-top: 15px;
}
.titletxtt {
    color: #000;
    font-size: 15px;
    margin: 19px 0 0 2%;
    float: left;
    line-height: 1.5;
}
.featuretitle {
    color: #31b6ca;
    font-size: 50px;
}
.smtxt {
font-size: 40px;
}
.staffblogbox {
    clear: both;
    width: 850px;
    float: right;
}
.readmore {
    margin: 2% auto 8% auto;
}
.readmore2 {
    margin: 0 auto 2% auto;
}
.introductiontxt {
    text-align: center;
        margin-bottom: 4%;
}
#topcontent h2.tpttl2 {
    color: #31b6ca;
    text-align: center;
    font-weight: 100;
    font-size: 45px;
    letter-spacing: 10px;
    margin-bottom: 1%;
    margin-top: 0;
}
#topcontent h2.tpttl3 {
    color: #31b6ca;
    text-align: center;
    font-weight: 100;
    font-size: 37px;
    letter-spacing: 1px;
    margin-bottom: 1%;
    margin-top: 0;
}
.spcbox img {
    float: left;
    width: 52%;
}
.spctxtbox {
    float: left;
    margin-left: 4%;
        width: 44%;
}
.spcbox {
    padding: 5%;
    background-color: #f3f3f3;
    margin: 0 0 5% 0;
}
.instabx {
    margin: 0 auto 5% auto;
    width: 616px;
}
.recruitowtitle {
    color: #31b6ca;
    font-size: 25px;
}
.cucca {
width: 60%;
text-align: center;
margin: 0 auto 5% auto;
}
.fourbox img {
    padding: 1%;
    width: 49%;
}
.recruitowbx2 img {
    float: left;
    margin-right: 2%;
}
}

/*------------スマホ用------------------*/
@media screen and (max-width: 480px) {
#topcontent h2.tpttl {
    color: #31b6ca;
    text-align: left;
    font-weight: 100;
    font-size: 35px;
    letter-spacing: 8px;
    margin-bottom: 1%;
    line-height: 1;
}
.readmore2 {
    margin: 0 auto 2% auto;
}
.mbimport {
margin-bottom: 10% !important;
}
.cucca {
text-align: center;
margin: 0 auto 5% auto;
}
.instabx {
    margin-bottom: 15%;
}
.recruitowtxt p {
    font-size: 15px;
}
.spcbox {
    padding: 10% 5% 1px 5%;
    background-color: #f3f3f3;
    margin: 5% 0 5% 0;
}
.spcbox img {
    margin-top: 3%;
}
.introductiontxt {

}
#topcontent h2.tpttl2 {
    color: #31b6ca;
        text-align: center;
        font-weight: 100;
        font-size: 35px;
        letter-spacing: 6px;
        margin-bottom: 1%;
        margin-top: 10px;
}
#topcontent h2.tpttl3 {
    color: #31b6ca;
        text-align: center;
        font-weight: 100;
        font-size: 30px;
        letter-spacing: 1px;
        margin-bottom: 1%;
        margin-top: 10px;
}
.readmore {
    margin: 10% auto 20% auto;
}
.smtxt {
font-size: 25px;
}
.featuretitle {
    color: #31b6ca;
    font-size: 35px;
}
.titletxtt {
    color: #000;
        font-size: 10px;
        line-height: 1.25;
        margin: 13px 0 0 0px;
        float: left;
}
.headmenu01 {
width: 174px;
    float: left;
    height: 80px;
    text-align: center;
}
  .topimg {
    padding-top: 60px;
        line-height: 0;
}
.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 3% 0 3%;
}
.entry-content-a {
	margin: 1.5em 0 0 0;
}
.headmenu01 img {

}
.headmenu01 {
padding-top: 18px;
        width: 115px;
        float: left;
        height: 40px;
        text-align: center;
}

#mobile-head {
float: right;
    width: 62px;
    height: 60px;
    z-index: 1;
    position: relative;
}
.title {
float: left;
        margin: 0;
        padding: 5px 0 0 0px;
        width: 30%;
        clear: none;
        background-color: #fff;
        height: 37px;
        text-align: center;
}
.title p {
    margin: 0;
    color: #000;
    font-size: 11px;
    line-height: 1;
}
/* トップページ設定 */
.voicebox {
    clear: both;
    margin: 5%;
}
.voicekobatsu {
    width: 100%;
    float: none;
    clear: both;
    margin-bottom: 10%;
}
ul.qalist li {
    background: url(images/q.jpg) no-repeat;
    line-height: 2;
    margin-bottom: 20px;
    margin-right: 0;
    width: 100%;
    float: none;
}
.sblogk {
    width: 100%;
    float: none;
    margin-right: 0;
        clear: both;
    margin-bottom: 8%;
}
#content {
    padding-top: 100px;
}
.foottext {
    text-align: center;
}
.adress {
    font-size: 15px;
}
.inquiry {
    width: 300px;
}
.voicekobatsu p {
    margin: 0;
}
.stvoiceiimg img {
    width: 40%;
    height: 150px;
    object-fit: cover;
    float: left;
    margin-right: 2%;
    margin-bottom: 5%;
}
.stvoice p {
    font-size: 10px;
}
.staff_l {
    width: 100%;
    margin-right: 0;
    float: none;
    padding-top: 0;
    text-align: center;
}
.staff_r {
    width: 100%;
    float: none;
}
.staffichiran {
    width: 46%;
    margin: 10px 2%;
    float: left;
}
.stiimg img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}
.insidetext h2 {
    position: absolute;
    color: #cd0102;
    top: 20%;
    left: 2%;
    font-size: 18px;
    text-shadow: 0px 2px 2px #fff;
}
.staffblogimg {
    width: 35%;
    float: left;
    margin-right: 2%;
}
.staffblogimg img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    float: left;
    margin-right: 2%;
}
.sblogk p {
    font-size: 10px;
    margin-top: 0px;
}
.voicetext1 {
    position: absolute;
    color: #000;
    top: 23%;
    line-height: 1.2;
    left: 27%;
    font-size: 8px;
    width: 51%;
    text-align: left;
}
.voicetext2 {
    position: absolute;
    color: #000;
    top: 52%;
    line-height: 1.2;
    left: 28%;
    font-size: 8px;
    width: 51%;
    text-align: left;
}
.footbtn {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}
.taxonomies-news-category p {
    border-radius: 10px;
    background-color: #e2a4a5;
    width: 48%;
    color: #fff;
    padding: 1.5%;
    margin-right: 2%;
    margin-left: 0;
    float: left;
    margin-bottom: 1%;
    margin-top: 1%;
}
.fea_box p {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
}

.messe_sign {
    float: none;
    text-align: center;
}
.yo_bn img {
    width: 220px;
}
.ow_photo {
    float: none;
    text-align: center;
    margin: 0;
}
.messe_photo {
    float: none;
    margin: 0;
    text-align: center;
}
.messe_sign img {
    width: 70%;
}
#nav-toggle {
    display: block;
    position: absolute;
    right: 11px;
    top: 12px;
    width: 40px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
.tgtxt {
    top: 30px;
    text-align: center;
    font-size: 15px;
}
.menu-btn {
color: #31b6ca;
    position: fixed;
    top: 23px;
    right: 15px;
    line-height: 50px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}
ul.gallerylist img {
    width: 48%;
    margin: 1%;
    float: left;
    height: 215px;
    object-fit: cover;
}
#foot-menu .inner {
  padding: 0 3% 0 3%;
    margin: 0;
    opacity: 1;
}
}

/*-----------トグルボタンのCSS-------------*/
 

#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #31b6ca;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.menu-btn span:after {
    content: attr(data-txt-menu);
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu-btn span:after {
    content: attr(data-txt-close);
}

/*-----------スタイルページ共通のCSS-------------*/
.staffimage {
    width: 40%;
    float: left;
    margin-right: 5%;
}
.staffinfo {
    float: left;
    width: 50%;
}
ul.gallerylist {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.thumbnails img {
    width: 28%;
    margin: 0 1%;
    float: left;
}
#style-gallery #taxonomies {
    border: 1px solid #5799bd;
    background-color: #fff;
    padding: 5%;
    font-size: 14px;
}
#style-gallery #taxonomies p {
    float: left;
    font-size: 12px;
    line-height: 15px;
    margin: 0;
    width: 100%;
}
#style-gallery input[type="submit"] {
    width: 190px;
    margin-top: 15px;
}
#style-gallery #taxonomies a.current,
#style-gallery #taxonomies a:hover {
    color: #95BF97;
    background-color: #e7f2f6;
}
#style-gallery #taxonomies a {
	color: #000;
	text-decoration:none;
	margin: 0 4px 0 0;
		display: table-cell;
	vertical-align: middle;
	height: 30px;
	width: 220px;
	overflow: hidden;
}
#taxonomies h4 {
    padding: 2% 5%;
    background-color: #5799bd;
    color: #fff;
    width: 100%;
}
#taxonomies h3 {
    font-family: 'Quicksand', sans-serif;
    border-left: 10px solid #e2a4a5;
    color: #000;
    font-size: 18px;
    line-height: 27px;
    padding: 10px 20px;
    font-weight: bold;
    margin-top: 0px;
    border-top: none;
    border-bottom: none;
}
#staff h3.gasititle {
	border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    color: #000;
    padding: 1% 2%;
    margin: 2% 0;
    font-family: 'Crimson Text', "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
.staff_r dt {
    font-size: 14px;
    color: #000;
    padding: 1% 2%;
    margin: 0 0 2% 0;
    font-weight: normal;
    background-color: #eee;
}
.staff_r dd {
    margin: 0 0 5% 0;
}
.staffinfo h5 {
    font-size: 14px;
    color: #000;
    padding: 1% 2%;
    margin: 0 0 5% 0;
    font-weight: normal;
    background-color: #eee;
}

/*------------スタイルページPC用------------------*/
@media screen and (min-width:768px) {
#style-gallery #taxonomies div {
	float: left;
	width: 31%;
    margin-right: 2%;
}
#style-gallery #taxonomies a span {
	display: block;
	margin-left: 20px;
	vertical-align:middle;
	    color: #000;
}
.stylelist li {

}
.stylelist li img {
    width: 31%;
    margin: 1%;
    float: left;
    height: 250px;
    object-fit: cover;
}
ul.stylelist {
    list-style: none;
    width: 768px;
    margin: 5% 0;
    padding: 0;
}
.staff_l .mainImage img {
    padding-top: 35px;
}
}
/*------------スタイルページスマホ用------------------*/
@media screen and (max-width: 480px) {
#style-gallery #taxonomies div {
    width: 100%;
}
#style-gallery #taxonomies div {
	width: 100%;
}
#style-gallery #taxonomies a span {
	display: block;
	margin-left: 20px;
	vertical-align:middle;
	    color: #000;
}
.stylelist li img {
    width: 48%;
    margin: 1%;
    float: left;
    height: 180px;
    object-fit: cover;
}
ul.stylelist {
    list-style: none;
    width: 100%;
    margin: 5% 0;
    padding: 0;
}
}
/*------------サロンページPC用------------------*/
@media screen and (min-width:768px) {
.staff_salon li {
    float: left;
    width: 31%;
    margin: 1%;
}
ul.salolist li {
    width: 48%;
    float: left;
    margin: 0 1% 3% 1%;
}
.staff_salon li img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}
}
/*------------サロンページスマホ用------------------*/
@media screen and (max-width: 480px) {
.staff_salon li {
    float: left;
    width: 48%;
    margin: 1%;
}
ul.salolist li {
    width: 100%;
    margin-bottom: 10%;
}
.staff_salon li img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
}
/*------------サロンページ共通------------------*/
.concept_r {
    margin-top: 7%;
}
.staff_salon ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#salondetail h3 {
	border-bottom: 1px dotted #333333;
	color: #333333;
	font-size: 20px;
	line-height: 26px;
	padding: 10px 0px;
	margin-top: 30px;
	margin-bottom: 20px;
	font-weight: bold;
}
.information table {
    background-color: #FFFFFF;
    width: 100%;
}
.information th {
    background-color: #cccccc1f;
    padding: 10px;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
}
.information td {
    padding: 10px 12px;
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    word-break: break-all;
}
.tableedge {
    border-top: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-collapse: separate;
}
.information h4 {
    font-size: 20px;
}
ul.salolist {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.salolist img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.saliname {
	font-size: 20px;
    line-height: 2;
    margin-top: 3%;
}
ul.salolist p {
    margin: 0;
    padding: 0;
}
p.scheck {
    background: url(images/check.jpg) no-repeat 0;
    padding: 0 0 0 17px;
    line-height
}
p.scheck a {
    color: #000;
}

/*-----------スマホフッター固定のCSS-------------*/
.footerFloatingMenu {
    display: block;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
    padding: 0;
    margin: 0;
}
.footerFloatingMenu ul {
    list-style: none;
}
.footerFloatingMenu li {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    margin-bottom: 0;
    float: left;
}
.footerFloatingMenu li a {
    display: block;
    min-width: inherit;
    padding: 10px 5px 5px;
}
.footerFloatingMenu .item1 a {
    color: #fff;
    background: #fff;
    border: 1px solid #fff;
    height: 45px;
    padding-top: 6px;
}
.footerFloatingMenu .item2 a {
    color: #fff;
    background: #3f2322;
    border: 1px solid #3f2322;
    height: 45px;
    text-decoration: none;
}


/*-----------クーポンページのCSS-------------*/
.coupon-list {
    display: table;
    width: 100%;
    border: solid #BFB9B0;
    border-width: 1px 1px 0 1px;
}
.couponinbox {
    display: table-cell;
    vertical-align: top;
    word-break: break-all;
    width: 100%;
    padding: 15px 8px;
}
.coupontaisho {
color: #fff;
    background-color: #8b6f57;
    min-width: 80px;
    height: auto;
    font-size: 25px;
    line-height: 30px;
    padding: 17px;
    text-align: center;
    margin-right: 5px;
    clear: both;
}
.menu_tab p {
    border-radius: 10px;
    background-color: #8B6F57;
    width: 23%;
    color: #fff;
    padding: 1.5%;
    margin-right: 1%;
    margin-left: 1%;
    float: left;
    margin-bottom: 1%;
    margin-top: 1%;
}
.menu_tab p a {
color: #fff;
text-decoration: none;
}
.menu_tab {
    margin-bottom: 4%;
}
.qrcode {
    margin-bottom: 30px;
}
.coupon_image {
        max-width: 30%;
    float: right;
}
.c_m_ko {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 1px 10px;
    color: #000;
    text-align: left;
    white-space: nowrap;
    background-color: #ed691c59;
    font-size: 20px;
}
.c_m_ko2 {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 1px 10px;
    color: #000;
    text-align: left;
    white-space: nowrap;
    background-color: #EDE4D5;
    font-size: 20px;
}
.coupon_price {
    margin-bottom: 12px;
    color: #CC0000;
    overflow: hidden;
    font-weight: bold;
    font-size: 19px;
}
.coupon_detail h3 {
    color: #000;
    padding: 0px;
    overflow: hidden;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 15px;
    border: none;
}
.couponbx {
    border: solid 1px #ECE2D6;
    vertical-align: top;
    width: 100%;
    margin-bottom: 20px;
}
.insidebodpa {
    padding: 15px;
}
.coupon_description {
    display: block;
    overflow: hidden;
    float: left;
    width: 67%;
    margin-bottom: 10px;
}
.coupon-explanation p {
    color: #333;
    font-size: .7em;
    line-height: 1.6;
}
.item-photo {
    text-align: center;
    width: 30%;
    float: left;
    margin-left: 3%;
    margin-bottom: 5px;
}
ul.smacpsmal {
    clear: both;
    font-size: 15px;
    margin: 10px 0 0 0;
    padding: 10px;
    background-color: #F9F5EC;
}
ul.smacpsmal li {
    list-style: none;
}
.yukou {
    color: #CC4466;
}
.cpbtn {
    margin-top: 10px;
}
/*-----------クーポンページのCSS-------------*/
.coupon-list {
    display: table;
    width: 100%;
    border: solid #BFB9B0;
    border-width: 1px 1px 0 1px;
}
.couponinbox {
    display: table-cell;
    vertical-align: top;
    word-break: break-all;
    width: 100%;
    padding: 15px 8px;
}
.coupontaisho {
color: #fff;
    background-color: #8b6f57;
    min-width: 80px;
    height: auto;
    font-size: 25px;
    line-height: 30px;
    padding: 17px;
    text-align: center;
    margin-right: 5px;
    clear: both;
}
.menu_tab p {
    border-radius: 10px;
    background-color: #8B6F57;
    width: 23%;
    color: #fff;
    padding: 1.5%;
    margin-right: 1%;
    margin-left: 1%;
    float: left;
    margin-bottom: 1%;
    margin-top: 1%;
}
.menu_tab p a {
color: #fff;
text-decoration: none;
}
.menu_tab {
    margin-bottom: 4%;
}
.qrcode {
    margin-bottom: 30px;
}
.coupon_image {
        max-width: 30%;
    float: right;
}
.c_m_ko {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 1px 10px;
    color: #000;
    text-align: left;
    white-space: nowrap;
    background-color: #ed691c59;
    font-size: 20px;
}
.c_m_ko2 {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 1px 10px;
    color: #000;
    text-align: left;
    white-space: nowrap;
    background-color: #EDE4D5;
    font-size: 20px;
}
.coupon_price {
    margin-bottom: 12px;
    color: #CC0000;
    overflow: hidden;
    font-weight: bold;
    font-size: 19px;
}
.coupon_detail h4 {
    color: #000;
    padding: 0px;
    overflow: hidden;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 15px;
    border: none;
}
.couponbx {
    border: solid 1px #ECE2D6;
    vertical-align: top;
    width: 100%;
    margin-bottom: 20px;
}
.insidebodpa {
    padding: 15px;
}
.coupon_description {
    display: block;
    overflow: hidden;
    float: left;
    width: 67%;
    margin-bottom: 10px;
}
.coupon-explanation p {
    color: #333;
    font-size: .7em;
    line-height: 1.6;
}
.item-photo {
    text-align: center;
    width: 30%;
    float: left;
    margin-left: 3%;
    margin-bottom: 5px;
}
ul.smacpsmal {
    clear: both;
    font-size: 15px;
    margin: 10px 0 0 0;
    padding: 10px;
    background-color: #F9F5EC;
}
ul.smacpsmal li {
    list-style: none;
}
.yukou {
    color: #CC4466;
}
.cpbtn {
    margin-top: 10px;
}
/*------------ブログページレイアウト変更------------------*/
@media screen and (min-width:768px) {
.newsallimg {
    position: relative;
    height: 200px;
    overflow: hidden;
    width: 30%;
    display: inline-block;
}
.toukonews {
width: 65%;
    float: right;
    margin: 0 20px 0 0;
}
.newsall {
    width: 100%;
    clear: both;
    padding: 5% 0;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}
}
@media screen and (max-width: 480px) {
.newsallimg img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.newsallimg {
    float: left;
    width: 40%;
}
.toukonews {
    width: 56%;
    float: left;
    margin-left: 4%;
}
.newsall {
    width: 100%;
    clear: both;
    padding: 5% 0;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}
}
.toukoutitleb {
    font-size: 21px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -.003em;
    line-height: 1.58;
    margin-top: 10px;
}
.toukoutitleb a {
	text-decoration: none;
	color: #e2a4a5;
}
.clearwppn {
    clear: both;
    padding: 5% 0;
}
.voicetext {
	text-align: left;
    font-size: 21px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -.003em;
    line-height: 1.8;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
    font-family: Hiragino Mincho ProN !important;
}
.red {
    color: #cc0001;
}
a img {
outline:none;
}
a{
	outline: none;
}
a:focus{
	outline: none;
}

/*------------ビフォーアフターPC用------------------*/
@media screen and (min-width:768px) {
.afimg img {
width: 300px;
    height: auto;
}
.befimg img {
width: 300px;
    height: auto;
    float: left;
}
.befimg {
width: 360px;
    background: url(images/bf-yaji.jpg) 103% 50% no-repeat;
    float: left;
}
.afimg {
    float: left;
}
.bfinbox {
	max-width: 700px;
	margin-right: auto;
	margin-left: auto;
}
.bfinfo {
    background-color: #f3e8e8;
    padding: 5%;
    margin: 5% 0;
    font-size: 21px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -.003em;
    line-height: 1.58;
    font-family: Hiragino Mincho ProN !important;
}
}
/*------------ビフォーアフタースマホ用------------------*/
@media screen and (max-width: 480px) {
.afimg img {
width: 100%;
    height: auto;
}
.befimg img {
width: 100%;
    height: auto;
    float: none;
}
.befimg {
width: 100%;
    background: none;
    float: none;
}
.afimg {
    float: none;
}
.bfinbox {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.bfinfo {
    background-color: #f3e8e8;
    padding: 5%;
    margin: 5% 0;
    font-size: 21px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -.003em;
    line-height: 1.58;
    font-family: Hiragino Mincho ProN !important;
}
}
/*-----------サイト独自のCSS-------------*/
.backblue {
background: #f3f3f3;
    padding: 5% 0;
}
.topcen {
 text-align: center;
}

.toppagemenu {
margin: 5% 0;
}
.foottext p {
    font-size: 25px;
    margin-bottom: 2%;
}
.stvoice {
    border-bottom: 1px dotted #000;
}
/*-----------PCのみ改行→<br class="pc">・<br class="sp">スマホのみ改行→-------------*/
@media screen and (min-width: 680px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 680px){   
  .pc { display:none; }
  .sp { display:block; }
}
/*-----------枠線消し-------------*/
a img {
outline:none;
}
a{
	outline: none;
}
a:focus{
	outline: none;
}
/*-----------フッターline/telボタン-------------*/
.l_fixed {
    position: fixed;
    z-index: 70;
}
.b_fixed {
    position: fixed;
    z-index: 70;
}
@media screen and (max-width: 480px) {
.l_fixed {
right: 10px;
    bottom: 111px;
    width: 90px;
    height: 90px;
}
.b_fixed {
right: 10px;
    bottom: 10px;
    width: 90px;
    height: 90px;
}
}
@media screen and (min-width:768px) {
.l_fixed {
right: 10px;
    top: 90px;
    width: 90px;
    height: 90px;
}
.b_fixed {
right: 10px;
    top: 190px;
    width: 90px;
    height: 90px;
}
}
/*==================================================
ふわっと出てくる
===================================*/


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

/* 大嶋さんサイトテスト用　*/
.manualmidasi {
    color: #000;
    font-size: 20px;
    line-height: 30px;
    padding: 10px 0;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: bold;
}
ul.mokuji a {
    text-decoration: underline;
    color: #000;
}
ul.mokuji li {
    list-style-type: none;
}
.mokuji {
line-height: 1.6;
padding:0;
}

.mokuji li {
list-style-type:none;
}

.mokuji ul {
position:relative;
padding:0;
margin:0 0 0 1.5em;
}

.mokuji ul::before {
content:"";
position:absolute;
top:0;
left:0;
height:100%;
border-left: 1px solid #333;
}

.mokuji ul li {
list-style-type:none;
position: relative;
padding-left: 1.5em;
}

.mokuji ul li::before {
content:"";
position: absolute;
top:0.7em;
left:0;
width: 1em;
border-top: 1px solid #333;
}

.mokuji ul li:first-child {
padding: 0.8em 0 0 1.5em;
}

.mokuji ul li:first-child::before {
top:1.4em;
padding-top: 1em;
}

.mokuji ul li:last-child::before {
height:100%;
background-color: #FFF;
}
.mokuji a {
    text-decoration: underline;
    color: #000;
}
ul.mokuji {
    margin: 25px 0 0 20px;
}
h6 a,
h6 a:visited {
text-decoration: none;
color: #000;
}
.topvideo {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    overflow-x: hidden;
    z-index: -1;
    left: 0;
    top: 0;
}
.topvideo .key-video {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.topvideo .key-video video {
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
@media screen and (min-width:768px) {
.topvideo .key-video video {
    width: 100%;
}
}
.pinkmarker {
background: linear-gradient(transparent 60%, #deedef 60%);
}
#topcontent h2.tpttl {
    color: #31b6ca;
    text-align: left;
    font-weight: 100;
    font-size: 44px;
    letter-spacing: 8px;
    margin-bottom: 1%;
    line-height: 1;
}

.readmore,
.readmore2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    font-weight: 400;
    color: #ab8b8c;
    background: #fff;
    width: 300px;
    height: 60px;
    font-size: 18px;
    letter-spacing: 0.12em;
    box-shadow: 0.3rem 0.3rem 1.5rem rgba(0, 0, 0, 0.1);
    border-radius: 6.95rem;
}
.readmore a,
.readmore2 a {
    color: #ab8b8c;
    text-decoration: none;
}
.instabx img {
    width: 50%;
    float: left;
    max-width: 308px;
}
.recruitowbx {
    margin: 5% 0 6% 0;
}
.recruitowbx img {
    width: 40%;
    float: left;
    margin-right: 2%;
}
.recruitowtitle {
    color: #31b6ca;
}
.clearfix {
    clear: both;
}
/*-----------レンタルページ-------------*/
.rentalmenu ul.imagelist {

}
li, ul {
    list-style: none;
}
.rentalmenu {
    text-align: center;
    margin-bottom: 50px;
}

.rentalmenu .h_eng {
    font-size: 1.5rem;
    font-family: lato, sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}
ul.imageslist {
    margin: 0;
    padding: 0;
}
.centertext p {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 10px;
    font-size: .9rem;
    letter-spacing: 3px;
    line-height: 1.5rem;
    font-family: source-han-sans-japanese, sans-serif;
}
.underbutton {
    background-color: #749e88;
    max-width: 400px;
    height: 70px;
    padding: 20px 0 0 0;
    margin: 0 auto;
    margin-bottom: 50px;
}
.underbutton a {
    color: #fff;
    text-decoration: none;
}
@media screen and (min-width:768px) {
ul.imageslist li {
    width: 23%;
    float: left;
    margin: 1%;
}
}

@media screen and (max-width: 480px) {
ul.imageslist li {
    width: 48%;
    float: left;
    margin: 1%;
}
}
/*-----------各店ページ-------------*/
.fourbox img {
    border-radius: 20px;
}
ul.menulist {
    margin: 0;
    padding: 0;
}
.yokonarabi {
    border-bottom: solid 1px #dedede;
    margin-bottom: 30px;
}
.h_jp {
    font-size: 1.3rem;
    font-family: dnp-shuei-mincho-pr6, sans-serif;
    margin-right: 10px;
}
.h_eng {
    font-family: annabelle-jf, sans-serif;
    color: #749e88;
}
section.shopinfo .textbox .intext {
    margin-bottom: 30px;
}
section.shopinfo .textbox p.taiou {
    margin-bottom: 20px;
}
section.shopinfo .textbox ul.targetlist li.van_ichi {
    background-color: #221815;
}

section.shopinfo .textbox ul.targetlist li a {
    color: #fff;
text-decoration: none;
}
section.shopinfo .textbox ul.targetlist li.van_kiyo {
    background-color: #00471f;
}
section.shopinfo .textbox ul.targetlist li.clear_s {
    background-color: #ff4e68;
}
section.shopinfo .textbox ul.targetlist li.vous {
    background-color: #e1c4a3;
}
ul.targetlist {
    margin: 0;
    padding: 0;
}

@media screen and (min-width:768px) {
section.shopinfo .imagebox {
    width: 480px;
    float: left;
}
.menubox {
    margin-bottom: 8%;
}
section.shopinfo .textbox {
   width: 500px;
        float: right;
}
section.shopinfo .textbox ul.targetlist li {
    height: 50px;
width: 48%;
    float: left;
    margin: 1%;
    text-align: center;
    padding: 9px;
}
}

@media screen and (max-width: 480px) {
.menubox {
    margin-bottom:25%;
}
section.shopinfo .textbox ul.targetlist li {
    height: 40px;
width: 48%;
    float: left;
    margin: 1%;
    text-align: center;
    padding: 9px;
    font-size: 15px;
}
}


/* ▼ #wl-stats 内だけに適用（グローバルを一切上書きしません） ▼ */
#wl-stats{--wl-ink:#1b2533;--wl-muted:#7b8494;--wl-card:#fff;--wl-line:#e9edf2;--wl-gold:#bfa06a;--wl-shadow:0 6px 18px rgba(15,23,42,.06);--wl-r:18px;--wl-gap:24px}
#wl-stats{color:var(--wl-ink); font-family:inherit}
#wl-stats *{box-sizing:border-box} /* セクション内のみ */

#wl-stats .wl-title{
  display:flex; align-items:center; gap:14px;
  font-weight:700; font-size:clamp(18px,2.4vw,24px); letter-spacing:.1em; margin:0 0 18px
}
#wl-stats .wl-title::before{content:"";display:block;height:1px;width:56px;background:var(--wl-line)}

#wl-stats .wl-grid{
  display:grid; gap:var(--wl-gap);
  grid-template-columns:repeat(3,minmax(260px,1fr));
  margin-top: 4%;
}

#wl-stats .wl-card{
  background:var(--wl-card); border:1px solid var(--wl-line); border-radius:var(--wl-r);
  box-shadow:var(--wl-shadow); padding:24px 22px
}

#wl-stats .wl-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
#wl-stats .wl-ic{width:28px;height:28px;color:#31b6ca;flex:0 0 28px}
#wl-stats .wl-tt{font-weight:700; font-size:16px; letter-spacing:.05em}

#wl-stats .wl-rows{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
#wl-stats .wl-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 12px;border:1px dashed var(--wl-line);border-radius:12px;background:#fff
}
#wl-stats .wl-label{font-size:14px;color:var(--wl-muted)}
#wl-stats .wl-val{font-weight:800;font-size:20px}
#wl-stats .wl-note{margin:.5em 2px 0;color:var(--wl-muted);font-size:13px}

/* レスポンシブ（2カラム→1カラム） */
@media (max-width: 1024px){
  #wl-stats .wl-grid{grid-template-columns:repeat(2,minmax(240px,1fr))}
}
@media (max-width: 640px){
  #wl-stats{--wl-gap:18px}
  #wl-stats .wl-grid{grid-template-columns:1fr;margin-top: 8%;}
}
/* ▲ /#wl-stats スコープCSS ▲ */

span.smalltxt {
    font-size: 25px;
    letter-spacing: 2px;
}


.spcbox {
  position: relative;
  display: inline-block;
}

.spcbox .spc-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #333;
  color: #fff;
  font-size: 15px;
  padding: 3px 8px;
  border-radius: 6px; /* 角アール */
  z-index: 2;
  line-height: 1.2;
}
.mabar {
margin-bottom: 5%;
}


/* このセクションだけに限定して上書き */
.topinner .spcbox {
  position: relative;
  display: block;     /* ← inline-block をやめてブロック要素に */
  width: 100%;
  box-sizing: border-box;
}

/* 念のため画像のはみ出し防止＆下の余白対策 */
.topinner .spcbox img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* float解除が必要なら（.clearfixが効かないケース向け） */
.topinner .spcbox::after {
  content: "";
  display: block;
  clear: both;
}
/* =========================================================
   ヒーロー動画：オーバーレイ（.topvideo .key-video 配下のみ有効）
   既存CSSはそのまま、必要分だけ上書き/追加
   ========================================================= */

/* 1) 動画を“全面カバー”で安定させる（既存指定より強いセレクタで上書き） */
.topvideo .key-video > video {
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0; と同義 */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 画面いっぱいにトリミング */
  transform: none;       /* 既存の translateX(-50%) を打ち消し */
  left: 0;
  top: 0;
  z-index: 1;            /* オーバーレイより下 */
}

/* 2) テキスト/画像を重ねるレイヤー */
.topvideo .key-video .kv-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;                  /* 動画の上 */
  display: grid;
  align-content: center;       /* 垂直：中央寄せ（下寄せにしたい場合は end） */
  justify-items: start;        /* 水平：左寄せ（中央にしたい場合は center） */
  padding: clamp(16px, 4vw, 48px);
  /* iPhoneノッチ配慮 */
  padding-left: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right));

  /* 視認性を上げるための軽い影 */
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);

  pointer-events: none;        /* クリックを動画に通す（必要なら要素単位で外す） */
}

/* 3) 「Life beams」画像（ロゴ） */
.topvideo .key-video .kv-badge {
  width: clamp(220px, 30vw, 500px);  /* ← 少し大きめに拡大 */
  height: auto;
  margin-bottom: clamp(8px, 2vw, 16px);
  display: block;
}

/* 4) キャッチコピー */
.topvideo .key-video .kv-copy {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  font-size: clamp(14px, 2.8vw, 28px); /* PC基準は小さめ */
  letter-spacing: .04em;
}
/* スマホ時にもう少し大きく */
@media (max-width: 767px) {
  .topvideo .key-video .kv-copy {
    font-size: clamp(18px, 4vw, 24px); /* ← スマホで拡大 */
  }
}
@media (max-width: 767px) {
  .topvideo .key-video .kv-overlay {
    align-content: end;   /* 中央 → 下寄せ */
    padding-bottom: 20%;  /* 下に余白を追加して位置を調整（数値は調整してください） */
  }
}







.fourbox {
    margin-bottom: 7%;
}
.recruitowbx2 {
    background: #fff;
    padding: 5%;
    margin: 5% auto;
    border-radius: 10px;
}

/* ===== Recruit Banner ===== */
/* カスタム変数で調整しやすくしています */
.recruit-banner{
  --banner-radius: 16px;
  --banner-shadow: 0 18px 40px rgba(0,0,0,.18);

  /* ▼高さを調整（以前より低め） */
  --banner-height-mobile: 200px;   /* スマホ時 */
  --banner-height-desktop: 250px;  /* PC時 */

  --overlay-color: rgba(0,0,0,.25);
  --frame-color: rgba(255,255,255,.70);
  --title-size-min: 34px;          /* 文字も少し小さめに */
  --title-size-max: 44px;
  --title-weight: 600;
  --title-letter-spacing: 0.15em;

  position: relative;
  width: 100%;
  height: var(--banner-height-mobile);
  border-radius: var(--banner-radius);
  overflow: hidden;
  box-shadow: var(--banner-shadow);
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}


/* デスクトップで高さUP */
@media (min-width: 768px){
  .recruit-banner{ height: var(--banner-height-desktop); }
}

/* うっすら黒オーバーレイ */
.recruit-banner__overlay{
  position: absolute; inset: 0;
  background: var(--overlay-color);
  z-index: 1;
}

/* 細枠（ミニマルな上品さ） */
.recruit-banner__frame{
  position: absolute; inset: 24px;
  border: 1px solid var(--frame-color);
  border-radius: calc(var(--banner-radius) - 6px);
  z-index: 2;
}

/* 中央配置 */
.recruit-banner__center{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 3;
  text-align: center;
  padding: 0 4vw;
}

/* タイトル */
.recruit-banner__title{
  margin: 0;
  color: #fff;
  font-weight: var(--title-weight);
  /* モバイル〜PCで滑らかに拡大（28px〜56px） */
  font-size: clamp(var(--title-size-min), 4vw, var(--title-size-max));
  letter-spacing: var(--title-letter-spacing);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.25);
  /* 日本語フォントのにじみ軽減 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== オプション（お好みで追加・削除） ===== */
/* 画像がとても明るい場合（枠と文字を濃く） */
/*
.recruit-banner.is-light {
  --frame-color: rgba(0,0,0,.45);
  --overlay-color: rgba(0,0,0,.30);
}
.recruit-banner.is-light .recruit-banner__title{
  color: #111;
  text-shadow: 0 2px 12px rgba(255,255,255,.3);
}
*/

/* クリック可能にしたい場合（外枠を <a> に） */
/*
a.recruit-banner{ display:block; text-decoration:none; color:inherit; }
a.recruit-banner:focus-visible{ outline: 3px solid #75B6FF; outline-offset: 4px; }
*/
/* ===== 複数バナーを横並びに ===== */
.recruit-banner-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* PCでは2カラムに */
@media (min-width: 768px) {
  .recruit-banner-wrap {
    flex-direction: row;
    justify-content: center; /* 中央寄せ（お好みで space-between も可） */
    align-items: stretch;
    gap: 32px;
  }

  .recruit-banner-wrap a {
    flex: 1; /* 均等幅に */
    display: block;
  }

  .recruit-banner {
    height: var(--banner-height-desktop); /* 既存変数をそのまま利用 */
  }
}
/* ===== 単色バナー専用クラス（既存の recruit-banner に影響を与えない） ===== */
.recruit-banner--solid {
  background: #31b6ca;
  position: relative;
  width: 100%;
  height: 150px; /* ← スマホもPCも共通で半分の高さに統一 */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  isolation: isolate;
  margin-top: 30px; /* 必要に応じて 40px〜80px に調整可能 */
}

/* 内部白線 */
.recruit-banner--solid .recruit-banner__frame {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 10px;
  z-index: 1;
}

/* 中央配置 */
.recruit-banner--solid .recruit-banner__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  text-align: center;
}

/* 文字設定 */
.recruit-banner--solid .recruit-banner__title {
  color: #fff;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: 0.15em;
  text-shadow: 0 2px 10px rgba(0,0,0,.15);
}

/* PCのみ高さを半分にして横幅いっぱい */
@media (min-width: 768px) {
  .recruit-banner--solid {
    height: 150px;
    width: 100%;
  }
}






/* ======================
   Recruit Grid（背景写真入り 3カラムVer）
   - SP: 1カラム
   - PC: 3カラム
   - 背景写真＋白線＋角R＋中央文字
   ====================== */

/* ラッパー */
.recruit-grid-photo{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* PCでは3カラム */
@media (min-width: 768px){
  .recruit-grid-photo{
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

/* カード本体 */
.rcp-card{
  --rcp-radius: 16px;
  --rcp-height-sp: 200px;
  --rcp-height-pc: 150px;
  --rcp-bg: none; /* 背景画像はインラインstyleで指定 */

  position: relative;
  display: block;
  width: 100%;
  height: var(--rcp-height-sp);
  border-radius: var(--rcp-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  background-image: var(--rcp-bg);
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* PC高さ */
@media (min-width: 768px){
  .rcp-card{ height: var(--rcp-height-pc); }
}

/* 半透明オーバーレイ */
.rcp-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 0;
  transition: background .3s ease;
}

/* 内部白線 */
.rcp-frame{
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: calc(var(--rcp-radius) - 6px);
  z-index: 1;
  pointer-events: none;
}

/* 中央配置 */
.rcp-center{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  text-align: center;
}

/* 文字設定 */
.rcp-title{
  color: #fff;
  font-weight: 600;
  font-size: clamp(40px, 4vw, 44px);
  letter-spacing: 0.15em;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ホバー時：明るく＆浮く */
@media (hover:hover){
  .rcp-card:hover::before{
    background: rgba(0,0,0,.15);
  }
  .rcp-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(0,0,0,.16);
  }
}

/* PC時フォーカス枠 */
.rcp-card:focus-visible{
  outline: 3px solid #75B6FF;
  outline-offset: 4px;
}
/* ====== 3カラムが効かないときの強制パッチ（最後に追記） ====== */

/* ラッパーを確実にGrid化＋3カラムに */
.recruit-grid-photo{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 28px !important;
  row-gap: 28px !important;
  justify-items: stretch;
  align-items: stretch;
}

/* 直下のカード（a）に付いている幅やfloat等をリセット */
.recruit-grid-photo > a.rcp-card{
  display: block !important;
  width: auto !important;        /* ← 固定幅を解除 */
  max-width: none !important;
  float: none !important;        /* ← 左右フロートを無効化 */
  margin: 0 !important;          /* ← 余計な左右マージンを無効化 */
}

/* SPは1カラムに戻す */
@media (max-width: 767.98px){
  .recruit-grid-photo{
    grid-template-columns: 1fr !important;
    column-gap: 20px !important;
    row-gap: 20px !important;
  }
}