@charset "UTF-8";

body,
h1,
h2,
h3,
h4,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

/* フォント  */
/* font-family: "Zen Kurenaido", sans-serif; */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Zen Kurenaido", sans-serif;
  background-color: #f8f6f3;
  color: #333333;
  overflow-x: hidden;
}

li {
  list-style-type: none;
}

img {
  vertical-align: bottom;
}

a {
  text-decoration: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}

/*/// 全ページ共通 ///*/

header,
#top,
#indexbox,
#salonbox,
#infobox,
#stylebox,
#recruitbox,
#contactbox,
footer {
  width: 100%;
  margin: 0 auto;
}

h2 {
  font-family: "Caveat", cursive;
  font-size: clamp(35px, 6vw, 90px);
  color: #cbb79c;
  text-align: center;
}

h3 {
  text-align: center;
}

p {
  font-size: clamp(8px, 1.8vw, 17px);
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
/* .scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
} */


/* ボタン */
a.button {
  font-family: "Caveat", cursive;
  font-size: clamp(8px, 3vw, 30px);
  color: #fff;
  background-color: #9ba17b;
  width: 20%;
  padding: 0.5% 5%;
  margin: 0 auto;
  border-radius: 10%;
  transition : 0.3s;
}

a.button:hover {
  background-color:#D8B7A0;
  transition : 0.3s;
}


/* ヘッダー */
header {
  position: sticky;
  top: 0px;
  z-index: 100;
  height: 30%;
  background-color: rgba(255, 255, 255, 0.685);
}

/* .header {
  
} */

header img {
    width: 100%;
    min-width: 77px;
}

h1 {
  width: 10%;
  height: auto;
  position: absolute;
  top: -1.7vh;
  padding: 1%;
}

nav.mainnav {
  display: flex;
  justify-content: right;
}

nav.mainnav ul {
  margin: 3% 5% 1% 3%;
}

/* 予約固定ボタン */
.button-reserve {
  background: url(./img/hairsalon-img/button-reserve.png) no-repeat center/contain;
  display: block;
  max-width: 70px;
  width: 10%;
  aspect-ratio: 2/5;
  z-index: 2;
  position: fixed;
  bottom: 125px;
  right: -1px;
}

/* ナビの設定 */
nav ul {
  display: flex;
  margin-top: 5px;
}

nav ul li {
  font-size: 12px;
  width: 150%;
  text-align: center;
}

nav ul li:last-child {
  border: none;
}

nav.mainnav ul li a {
  display: block;
  color: #333333;
  padding: 10px;
  font-family: "Caveat", cursive;
  font-size: clamp(16px, 2.3vw, 27px);
  text-shadow: 0.5px 0.5px 0 #fff, -0.5px 0.5px 0 #fff, -0.5px -0.5px 0 #fff,
    0.5px -0.5px 0 #fff;
}
nav ul .current {
  background-color: #9ba17b;
}

/* ナビ左から右に線が伸びて背景になる */
/* 背景の設定 */
nav ul li a {
  position: relative;
  transition: all 0.3s;
}
nav ul li a::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 0; /*背景の形状*/
  height: 1px;
  background: #9ba17b;
  opacity: 0; /*はじめは透過を0*/
}
/* hoverの設定 */
nav ul li a:hover::after {
  width: 100%;
  opacity: 1;
  animation: bgappear 0.3s forwards; /*アニメーションの指定*/
}
/*アニメーションで線を伸ばして背景をつける*/
@keyframes bgappear {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #9ba17b;
  }
}
nav ul li a:hover {
  z-index: 1;
}
/* フッター */

footer {
  background-color: #cbb79c;
  color: #fff;
  margin-top: 10%;
  padding: 2%;
}

footer img {
  width: 15%;
  min-width: 70px;
  display: block;
  margin: 0 auto;
  padding: 3%;
}

.footer-nav ul {
  justify-content: center;
  margin: 3% 15%;
}

.footer-nav ul li a {
  color: #fff;
  padding: 5%;
  font-family: "Neucha", cursive;
  font-size: clamp(12px, 2.0vw, 18px);
}

footer small {
  display: block;
  margin-top: 40px;
  margin-bottom: 40px;
  text-align: center;
}

.hot-p{
    margin: 8% 15%;
    padding-right: 20%;
    text-align: center;
    position: relative;
}

.hot-p p {
    font-size: clamp(14px, 2.2vw, 20px);
}

.hot-p a {
    background: url(./img/hairsalon-img/Beauty_Logo_270_90.gif) center /cover;
    display: inline-block;
    min-width: 100px;
    width: 18%;
    aspect-ratio: 3/1;
    position: absolute;
    left: 50%;
    bottom: -1.4vh;
}

footer small {
    font-size: clamp(8px, 1.8vw, 12px);
}





/* indexここから */

/* スライド */
.slider {
  width: 100vw;
  aspect-ratio: 2/1;
	/* height: 80vh; */
	overflow: hidden;
	position: relative;
	max-width: 100%;
}
.slider li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}

.slider li img {
  object-fit: cover;
  object-position: center;
  width: 100%;
	height: 100%;
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}
.slider li:nth-of-type(2){
	/* background-image: url(../slide2.jpg); */
	animation-delay: 5s;
}
.slider li:last-of-type{
	/* background-image: url(../slide3.jpg); */
	animation-delay: 10s;
}
/* ここまでスライド */

.concept {
  padding: 10% 15%;
}

.concept h2{
  font-size: clamp(30px, 3.5vw, 64px);
  color: #333333;
  margin-bottom: 1%;
}

.white-bc {
  background-color: #fff;
  padding: 5%;
}

.concept .white-bc {
  width: 80%;
  margin: 0 auto;
}

.concept .white-bc p {
  text-align: center;
}

.concept .white-bc::after {
  content: "";
  display: block;
  background: url(./img/hairsalon-img/hasami.png) center/cover;
  position: absolute;
  left: 45%;
  margin-top: 2%;
  min-width: 40px;
  width: 8%;
  aspect-ratio: 1/1;
  transform: rotate(135deg);
}

.salon-index {
  margin-top: 8%;
  background-color: #fff;
  padding: 12% 5%;
}

.salon-index h2 {
  margin-bottom: 7%;
}

.salon-index div {
  display: table-cell;
}

.asiya-ten,
.kousien-ten,
.okamoto-ten {
  aspect-ratio: 3/4;
  object-fit: cover;
  padding: 2%;
}

.tenpo-syasinn {
  padding-bottom: 10%;
  position: relative;
}

.giziyouso::before {
  content: "NEW!";
  color: #333333;
  font-size: 120%;
  z-index: 1;
  display: block;
  position: absolute;
  top: -3vh;
  left: 35.5%;
  z-index: 0;
}

.asiya-ten {
  width: 80%;
  height: 80%;
}

.okamoto-ten {
  width: 88%;
  height: 88%;
}

.syukusyou {
  text-align: center;
}

.bc-gizi-asiya::before {
  content: "";
  background: url(./img/hairsalon-img/20thanv.png) no-repeat center/cover;
  min-width: 40px;
  width: 7%;
  aspect-ratio: 1/1;
  display: block;
  position: absolute;
  top: 1vh;
  left: 3vw;
}

.salon-index p {
  display: block;
  text-align: center;
}

.bc-flower {
  background: url(./img/hairsalon-img/micheile-henderson-bLCQXpLPmXY-unsplash.jpg) center/cover;
  width: 100%;
  aspect-ratio: 2/1;
  margin-bottom: 20%;
}

.style-index {
  margin: 4% auto;
}

.style-index h2 {
  color: #333333;
  margin-bottom: 5%;
}

.backg-white {
  background-color: #fff;
  width: 100%;
  aspect-ratio: 3/1;
  display: flex;
  /* align-items: center; */
  overflow: hidden;
  padding: 4% 0;
}

.backg-white div {
  width: 30%;
  aspect-ratio: 3/4;
  margin: 1%;
  animation: loop-slide 45s infinite linear 1s both;
}

@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-668%);
  }
}

.style-index-img1 {
  background: url(./img/short/001short.jpg) center/cover;
}
.style-index-img2 {
  background: url(./img/bob/001bob.jpg) center/cover;
}
.style-index-img3 {
  background: url(./img/long/001long.jpg) center/cover;
}
.style-index-img4 {
  background: url(./img/bob/002bob.jpg) center/cover;
}
.style-index-img5 {
  background: url(./img/short/002short.jpg) center/cover;
}
.style-index-img6 {
  background: url(./img/long/002long.jpg) center/cover;
}

.style-index p{
  display: block;
  text-align: center;
  padding-top: 6%;
}

.bc-desk {
  background: url(./img/hairsalon-img/eugenia-pan-kiv-cPlEy1SNs1c-unsplash.jpg) center/cover;
  width: 100%;
  aspect-ratio: 2/1;
  margin: 30% 0 0;
}

.news-index {
  padding: 20% 0;
  background-color: #fff;
}

.news_article {
  max-width: 500px;
  width: 30%;
  margin: 5% auto 10%;
}

.news_article li{
  border-bottom:1px solid #cbb79c;
  list-style:none;
  display: block;
}

.news_article li time {
  vertical-align: middle;
  display: inline-block;
  font-size: clamp(8px, 1.8vw, 16px);
  color: #796c5b;
}

.news_articl li p {
  display: block;
}

.news-index-button{
  display: block;
  text-align: center;
}

.button-recruit {
  background: url(./img/hairsalon-img/recruit-topimg.jpg) no-repeat;
  background-size: cover;
  background-position: center 80% ;
  width: 60%;
  aspect-ratio: 5/1;
  display: block;
  margin: 10% auto;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.253);
}

.button-recruit p {
  backdrop-filter: brightness(0.8);
  color: #fff;
  font-family: "Caveat", cursive;
  font-size: clamp(20px, 4vw, 60px);
  text-align: center;
  line-height: 4;
  padding-top: 2%;
  transition : 0.2s;
}

.button-recruit p:hover {
  backdrop-filter: brightness(0.5);
  transition : 0.2s;
}



/* index以外のtop画像 */
.back-top {
  display: block;
  width: 100%;
  aspect-ratio: 4/1;
}


/* salonここから */
.salon-top {
 background: url(./img/hairsalon-img/salon-top.jpg) center/cover;
}

.space_h2 h2 {
  margin: 10% 0;
}

.salon-button {
  display: flex;
  justify-content: space-around;
}

.salon-button a {
  background-color: #9BA17B;
  color: #fff;
  padding: 1% 5%;
  font-size: clamp(10px, 2vw, 20px);
  border-radius: 10%;
  box-shadow: 0px 4px 10px #000;
  transition : 0.3s;
  position: relative;
}

.salon-button a:hover {
  background-color: #D8B7A0;
  transition : 0.3s;
}

.gizi-asiya::before {
  content: "";
  background: url(./img/hairsalon-img/20thanv.png) no-repeat center/cover;
  min-width: 23px;
  width: 21%;
  aspect-ratio: 1/1;
  display: block;
  position: absolute;
  top: -6vh;
  left: 0vw;
}

.giziyousoo::before {
    content: "NEW!";
    color: #333333;
    font-size: 100%;
    display: block;
    width: 100%;
    position: absolute;
    left: 0vw;
    top: -4vh;
}

.tennpo-information {
  width: 80%;
  margin: 15% auto;
}

.tennpo-information h3 {
  text-align: left;

}

.tennpo-information h3::before {
  content: "";
  display: inline-block;
  background: url(./img/hairsalon-img/gizi-star.png) no-repeat center/cover;
  width: 2%;
  aspect-ratio: 1/1;
}

.tennpo-information table {
  margin: 10% auto;
  border: solid 1px #C1C1C1;
  border-collapse: collapse;
}

.tennpo-information table th,
.tennpo-information table td {
  border: solid 1px #C1C1C1;
}

.tennpo-information table th {
  background-color: #cbb79c5e;
  font-weight: 300;
  width: 30%;
}

.tennpo-information table td {
  padding: 2% 5%;
}

.tennpo-information tr {
  font-size: clamp(8px, 1.8vw, 18px);
}

.map {
  background-color: #fff;
  padding: 5%;
}

.map h4 {
  margin-bottom: 3%;
  padding-left: 6%;
  font-size: clamp(8px, 1.8vw, 18px);
}

.map iframe {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}


/* infoここから */
.info-top {
  background: url(./img/hairsalon-img/info-top.jpg) center/cover;
}

.winter-vacation {
  background-color: #fff;
  margin: 0 auto;
  padding: 5%;
  max-width: 800px;
  width: 80%;
  border: dashed 2px #9BA17B;
  border-width: 4px;
}

.winter-vacation h3 {
  padding-bottom: 3%;
  font-size: clamp(10px, 2.2vw, 23px);
}

.winter-vacation h3::after {
  content: "";
  display: block;
  background: url(./img/hairsalon-img/Line\ 40.png) no-repeat center/cover;
  width: 65%;
  aspect-ratio: 50/1;
  margin: 0 auto;
}

.info-wintervc {
  margin: 5% auto;
  text-align: center;
}

.info-wintervc p{
  font-size: clamp(8px, 2vw, 20px);
}

/* アコーディオンメニュー */
.acd-check{
    display: none;
}
.acd-label{
    background: #f8f6f3;
    color: #333333;
    cursor: pointer;
    display: block;
    margin-top: 5%;
    padding: 10px 10px 10px 5%;
    position: relative;
    transition-duration: 0.2s;
/* 
    border-top: 2px solid #5D4037;
	border-left: 2px solid #5D4037;
	border-right: 2px solid #5D4037;
    border-bottom: 2px solid #5D4037 */
    ;
}

.acd-label:hover {
    background: #cbb79c;
    cursor: pointer;
	opacity: 0.8;
    transition-duration: 0.2s;
}

.acd-label:after{
    background: #cbb79c;
    box-sizing: border-box;
    content: '+';
    display: block;
    height: 100%;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 0px;
}

/* .acd-label:after:hover {
    background: #cbb79c;
} */

.acd-content{
    background-color: #fff;
    display: block;
    height: 0;
    opacity: 0;
    padding: 0 2%;
    transition: .5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label:after{
    content: '-';
}
.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}
.acd-content p{
    font-size: clamp(9px, 1.6vw, 16px);
  margin:3%;
}
/* ここまでアコーディオン */

.hamburger-info {
  max-width: 500px;
  width: 50%;
  margin: 10% auto;
}

.hamburger-info h4 {
  margin-bottom: 5%;
}


.hamburger-info time,
.hamburger-info label {
  font-size: clamp(8px, 1.8vw, 16px);
}

p.marker,
span.marker {
  font-size: clamp(10px, 1.9vw, 19px);
  background: linear-gradient(transparent 60%, #d8b7a073 30%);
  display: inline;
}

.kannkore2025 {
  background: url(./img/hairsalon-img/KANSAI\ COLECTION.png) no-repeat center/cover;
  width: 80%;
  aspect-ratio: 3/2;
  margin: 10% auto;
}

.kannkore2024 {
  background: url(./img/hairsalon-img/KANSAI\ COLECTION\ \(1\).png) no-repeat center/cover;
  width: 80%;
  aspect-ratio: 3/2;
  margin: 10% auto;
}

section.space_h2 {
  padding-bottom: 20%;
}

/* styleここから */
.style-top {
  background: url(./img/hairsalon-img/style-top.jpg) center/cover;
}

.style-img-3 h3 {
  text-align: left;
  padding-left: 10%;
  font-family: "Caveat", cursive;
}

.style-img-3 div {
  max-width: 400px;
  width: 30%;
  aspect-ratio: 3/4;
  margin: 0 0.5%;
}

.hair-style-img {
  display: flex;
  width: 230%;
}

.hair-style-img:hover{
  animation-play-state: paused;
}

.long-img1 {
  background: url(./img/long/001long.jpg) no-repeat center/cover;
}
.long-img2 {
  background: url(./img/long/002long.jpg) no-repeat center/cover;
}
.long-img3 {
  background: url(./img/long/003long.jpg) no-repeat center/cover;
}
.long-img4 {
  background: url(./img/long/004long.jpg) no-repeat center/cover;
}
.long-img5 {
  background: url(./img/long/005long.jpg) no-repeat center/cover;
}
.long-img6 {
  background: url(./img/long/006long.jpg) no-repeat center/cover;
}

.bob-img1 {
  background: url(./img/bob/001bob.jpg) no-repeat center/cover;
}
.bob-img2 {
  background: url(./img/bob/002bob.jpg) no-repeat center/cover;
}
.bob-img3 {
  background: url(./img/bob/003bob.jpg) no-repeat center/cover;
}
.bob-img4 {
  background: url(./img/bob/004bob.jpg) no-repeat center/cover;
}
.bob-img5 {
  background: url(./img/bob/005bob.jpg) no-repeat center/cover;
}
.bob-img6 {
  background: url(./img/bob/006bob.jpg) no-repeat center/cover;
}

.short-img1 {
  background: url(./img/short/001short.jpg) no-repeat center/cover;
}
.short-img2 {
  background: url(./img/short/002short.jpg) no-repeat center/cover;
}
.short-img3 {
  background: url(./img/short/003short.jpg) no-repeat center/cover;
}
.short-img4 {
  background: url(./img/short/004short.jpg) no-repeat center/cover;
}
.short-img5 {
  background: url(./img/short/005short.jpg) no-repeat center/cover;
}
.short-img6 {
  background: url(./img/short/006short.jpg) no-repeat center/cover;
}

.RtoL{
 animation: loop-slide-rtol 85s infinite linear 1s both;
}

@keyframes loop-slide-rtol {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.LtoR {
  animation: loop-slide-ltor 90s infinite linear 1s both;
}

@keyframes loop-slide-ltor {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.style-img-3 h3 {
  margin: 5% 0 2%;
  font-size: clamp(12px, 2.2vw, 28px);
}

.style-menu .white-bc {
  margin: 1% auto 5%;
  width: 70%;
  padding-bottom: 4%;
}

.style-menu h3 {
  font-size: clamp(14px, 2.6vw, 26px);
}

.white-bc table {
  border-spacing: 5px;
}

.white-bc td {
  vertical-align: top;
  font-size: clamp(10px, 1.8vw, 18px);
  padding-bottom: 3%;
}

.white-bc td small {
  font-size: clamp(7px, 1.4vw, 13px);
}

.price {
  padding-left: 3em;
}

/* .padding-plus {
  padding: 5% 3rem;
} */


/* contactここから */
.contact-top {
  background: url(./img/hairsalon-img/contact-top.jpg) center/cover;
}

.white-back {
  background-color: #fff;
  padding: 8% 18%;
}

.white-back h3 {
  text-align: left;
}

.white-back p {
  font-size: clamp(8px, 1.6vw, 16px);
}

.add-margin {
  margin-bottom: 3%;
}

.contact-text {
  margin-bottom: 10%;
  padding: 0 10%;
}

form label {
  font-size: clamp(10px, 1.8vw, 18px);
  display: inline-block;
  width: 30%;
  text-align: right;
}

form span {
  color: #920101;
  font-size: clamp(6px, 1.2vw, 12px);
}

form div {
  margin-bottom: 5%;
}

.naiyou {
  display: flex;
  flex-wrap: wrap;
}

.naiyou label {
  padding-right: 0.5%;
}

input,
textarea {
  padding: 1%;
  width: 60%;
}

textarea {
  width: 60.5%;
}

.submit-btn-contact{
  text-align: center;
}

.submit-btn-contact button {
  max-width: 200px;
  width: 30%;
  aspect-ratio: 10/1;
  background-color: #9BA17B;
  color: #fff;
  padding: 2%;
  font-family: "Zen Kurenaido", sans-serif;
  font-size: clamp(12px, 1.8vw, 18px);
  border: none;
  border-radius: 5%;
  transition : 0.3s;
}

.submit-btn-contact button:hover {
  background-color:#D8B7A0;
  transition : 0.3s;
}

section.contact-wht {
  padding-bottom: 0;
}

/* form button {
  display: inline-block;
} */


/* recruitここから */
.recruit-top {
  background: url(./img/hairsalon-img/recruit-topimg.jpg) center/cover;
  background-position:center bottom 30%;
}

.recruit-text {
  font-family: sans-serif;
}

.recruit-text .white-back-recruit {
  /* text-align: center; */
  margin-bottom: 10%;
  font-size: clamp(10px, 1.6vw, 16px);
}

.recruit-text h3 {
  text-align: center;
  padding-bottom: 6%;
}

.recruit-text h4 {
  font-weight: normal;
  padding-bottom: 4%;
  font-size: clamp(10px, 1.8vw, 18px);
}

.recruit-text .white-back section {
  text-align: center;
}

.shop-info-recruit {
  display: flex;
  align-items: stretch;
  margin: 20% auto;
}

.shop-info-recruit img {
  /* padding: 5%; */
  width: 79.5%;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin-left: 10%;
}

.shop-info-recruit h5, 
.shop-info-recruit p {
  font-weight: normal;
  text-align: center;
  margin-bottom: 0;
}

.shop-info-recruit h5 {
  font-size: clamp(10px, 1.8vw, 18px);
}

.img-shop-asiya img {
  width: 76.5%;
}

.img-shop-okamoto img {
  width: 84%;
}

.occupation {
  /* margin-top: 20%; */
  position: relative;
}

.occupation h3 {
  font-size: clamp(12px, 2vw, 20px);
}

.occupation h3::before {
  content: "Occupation";
  font-family: "Caveat", cursive;
  position: absolute;
  top: -3vh;
}

.lase-text {
  text-align: center;
  margin: 0 10%;
}

/* アコーディオンメニュー */
.cd-check{
  display: none;
}
.cd-label{
  font-size: clamp(12px, 2vw, 20px);
  background: #9ba17b;
  color: #fff;
  cursor: pointer;
  display: block;
  max-width: 1000px;
  width: 80%;
  margin: 0 auto;
  padding: 10px 10px 10px 5%;
  position: relative;
  transition-duration: 0.2s;
  /* border-top: 2px solid #5D4037;
border-left: 2px solid #5D4037;
border-right: 2px solid #5D4037; */
  border-bottom: 2px solid #f8f6f3;
}

.cd-label:hover {
  /* background: #cbb79c; */
  cursor: pointer;
  opacity: 0.8;
  transition-duration: 0.2s;
}

.cd-label:after{
  background: #9ba17b;
  color: #fff;
  box-sizing: border-box;
  content: '+';
  display: block;
  height: 20%;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 0px;
}

/* .acd-label:after:hover {
  background: #cbb79c;
} */

.cd-content {
  background-color: #fff;
  display: block;
  height: 0;
  opacity: 0;
  padding: 0 5%;
  transition: .5s;
  /* visibility: hidden; */
  display: none;
  max-width: 1000px;
  width: 80%;
  margin: 0 auto;
}
.cd-check:checked + .cd-label:after{
  content: '-';
}
.cd-check:checked + .cd-label + .cd-content{
  height: 100%;
  opacity: 1;
  padding: 10px;
  /* visibility: visible; */
  display: block;
}
.cd-content p{
  font-size: clamp(14px, 1.6vw, 22px);
  margin:0;
}
/* ここまでアコーディオン */

td.m-b1ema {
  padding-top: 0.7%;
}

.text-center {
  text-align: center;
  width: 20%;
}

.occupation .white-back-recruit span {
  font-size: clamp(10px, 1.8vw, 18px);
}

.recruit-text .white-back-recruit {
  margin-bottom: 2%;
}

.recruit-text .white-back-recruit span {
  font-size: clamp(10px, 1.6vw, 16px);
}

.white-back-recruit td {
  vertical-align: top;
  padding-bottom: 2%;
}

.white-back-recruit {
  padding: 3%;
}



/*スクロールリンクの設定*/
.scroll-top {
  position: fixed; /*表示位置*/
  right: 20px;
  bottom: 10px;
  z-index: 2;
  transition: opacity .5s, visibility .5s;
  -webkit-writing-mode: vertical-rl; /*縦書きの設定*/
  white-space: nowrap; /*改行しない*/
  animation: arrowmove 1s ease-in-out infinite; /*矢印の動き*/
}

@keyframes arrowmove { /*矢印のアニメーション*/
  0%{bottom:20px;}
  50%{bottom:25px;}
  100%{bottom:20px;}
}

.scroll-top a { /*aタグの形状*/
  text-decoration: none;
  color: #666;
  text-transform: uppercase;
  font-size:18px;
  display: block;
  background-color: #f8f6f3bb;
}


.js-pagetop a::after{  /*スクロールリンクの形状*/
content:"";
position: absolute;
top:0;
right:0;
width:1px;
height: 50px;
background:#666;
}

.js-pagetop a::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 1px;
  height: 20px;
  background: #666;
  transform: skewX(31deg);
}