@charset "UTF-8";
/*------------------------------------*\
  基本
\*------------------------------------*/
html {
	scroll-behavior: smooth;
	scroll-padding-top:80px;
  overflow-x: hidden;
}
body {
  font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
  font-weight: 900;
}
h2 {
  font-size: 38px;
  font-weight: 900;
	letter-spacing: 0.04em;
}
h3 {
  font-size: 14px;
  font-weight: 700;
	letter-spacing: 0.04em;
}
h4 {
  font-size: 16px;
}

/*--------------------------------
 色指定
--------------------------------*/
body{
	--color--main:#ad0a0a;
	--color--text:#000;
	--color--textg:#595A5A;
	--color--gray:#c0c0c0;

	--color--bglight:#f4f4f4;
	--color--dgray:#686868;
	
}
html{
	overflow-x:hidden;
}
img{
	max-width:100%;
}

/*--------------------------------
 common
--------------------------------*/
header,.element,.tab_box{
	margin-left:auto;
	margin-right:auto;
}

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

/*--------------------------------
 element
--------------------------------*/
.element {
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  
  box-shadow:0 4px 6px 0 rgb(0 0 0 / 14%);
}
.element .section_inner {
  margin:0 40px;
}
.element .text-wrapper {
  font-size: 36px;
}
.element .text-wrapper{
  	font-weight: 900;
	line-height:1;
}
.element .subt{
	margin-bottom:40px;
}
.element .content-title{
	font-size:22px;
	margin-bottom:20px;
}
.element p{
	line-height:1.5;
}

/*---------------------------
 * flex-wrapper
 * -------------------------*/
.flex-wrapper.half,
.flex-wrapper.one-third,
 .flex-wrapper.quarter{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.flex-wrapper.four:after{
	display:block;

	width:24%;
}
.flex-wrapper .flex-one{
	width:100%;
}
.flex-wrapper.half .flex-one{
	width:48%;
}
.flex-wrapper.one-third .flex-one{
	width:32%;
}
.flex-wrapper.quarter .flex-one{
	width:48%;
}
.flex-wrapper.quarter .flex-three{
	width:48%;
}
@media(min-width:40em){
.flex-wrapper{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.flex-wrapper.two .flex-one{
	width:48%;
}
.flex-wrapper.three .flex-one{
	width:32%;
}
.flex-wrapper.three .flex-two{
	width:64%;
}
.flex-wrapper.four .flex-two{
	width:48%;
}
.flex-wrapper.four .flex-one{
	width:24%;
}
.flex-wrapper.four .flex-three{
	width:72%;
}
.flex-wrapper.five .flex-one{
	width:18%;
}
.flex-wrapper.six .flex-one{
	width:15%;
}
.flex-wrapper.quarter .flex-one{
	width:24%;
}
.flex-wrapper.quarter .flex-three{
	width:72%;
}
}

/*--------------------------------
 leftArea/rightArea (PC only)
--------------------------------*/
.leftArea{
	display:none;
}

.rightArea{
	display:none;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}

/*--------------------------------
 logoArea(header)
--------------------------------*/
.logoArea .element{
	border-radius:16px 16px 0 0;
}

@media (max-width: 450px) {
  .logoArea .element {
    border-radius: 0px;
  }
}


.logoArea .flex-wrapper { 
    display: flex; 
    align-items: center; 
    margin: 0 16px; /* 必要に応じて調整 */
}





.logoArea .flex-wrapper img{	
	max-height:30px;
	line-height:1;
	margin:10px 0 10px 0;
}
.logoArea ul{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	justify-content:flex-end;
}
.logoArea ul li {
	line-height:1;
}

.logoArea ul li a{
display:block;
	background:var(--color--gray);
	color:var(--wp--preset--color--white);
	border-radius:20px;
	padding:10px 16px;
	text-align:center;
	font-size:10px;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
	font-weight:700;
	height:30px;
}
.logoArea ul li:last-child a{
	background:var(--color--main);
}

@media(max-width:767px){
	.logoArea{
	height:50px;
}
	.logoArea .flex-wrapper{
		margin-top:0;
	}
}

/*--------------------------------
 button
--------------------------------*/
.button{
	display:block;
	background:var(--color--main);
	
	
	color:var(--wp--preset--color--white);
	text-align:center;
	
	font-weight: 700;
	font-size: 16px;
	padding:14px 10px;
	border-radius:60px;
	margin:40px auto;
	max-width:310px;
	position: relative;
	overflow: hidden;
	transition: 300ms;
	font-family:'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}

.button::before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #b5e7ff;
	
	transition: 300ms;
	animation: shinyshiny 2.5s ease-in-out infinite;
}

.button:hover {
    text-decoration: none;
    color: var(--wp--preset--color--white);
    box-shadow: none;
    -webkit-transform: translateY(3px);
    transform: translateY(3px); /* 標準のtransformも追加 */
}

@-webkit-keyframes shinyshiny {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@keyframes shinyshiny {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}


.button_reverse{
	display:block;
	background:#ffffff;	
	color:#ad0a0a;
	text-align:center;
	border: 2px solid #ad0a0a;
	font-weight: 700;
	font-size: 16px;
	padding:14px 10px;
	border-radius:60px;
	margin:40px auto;
	max-width:310px;
	position: relative;
	overflow: hidden;
	transition: 300ms;
	font-family:'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}

.button_reverse:before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	
	transition: 300ms;

}

.button_reverse:hover {
    box-shadow: none;
    -webkit-transform: translateY(3px);
    transform: translateY(3px); /* 標準のtransformも追加 */
}



/*--------------------------------
slide-fade-section
--------------------------------*/
.slide-fade-section {
  opacity: 0;
  transform: translateY(90px); /* 下に50px移動した状態から開始 */
  transition: opacity 0.5s 0.5s ease-in-out, transform 1s 0.2s ease-in-out;
}

.slide-fade-section.visible {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻る */
}

/*--------------------------------
 hero
--------------------------------*/
.hero {
  position: relative;
  height: auto;
  overflow: hidden;
	background:var(--color--text);
	
}

.image-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	aspect-ratio: 3 / 4;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.background-image.active {
  opacity: 1;
}
.tab_box{
	position:sticky;
	top:0;
	left:0;
	width:100%;
	z-index:100;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}
.tab_box .btn_area {
	display: -webkit-box;
	display: flex;
}

.tab_box .tab_btn {
	width:50%;
	padding: 12px 8px;
	color: var(--wp--preset--color--white);
	background: var(--color--main);
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease 0s;
	
	font-weight:700;
	font-size:16px;
	height:46px;
}
.tab_box .tab_btn a{
	color:inherit;
	display:block;
}


.tab_box .tab_btn:hover {
	background:var(--wp--preset--color--white);
    color:var(--color--main);
}

.tab_box .tab_btn.active {
    background:var(--wp--preset--color--white);
    color:#333;
	font-weight:600;
}

.tab_box .panel_area {
	background:var(--wp--preset--color--white);

}

.tab_box .panel_area ul{
	display:flex;
}
.tab_box .panel_area ul li{
	flex: 1;
	text-align:center;
	
	font-weight:600;
	margin:10px 0 0;
	padding:0 0 10px 0;
	border-bottom:6px solid var(--wp--preset--color--white);
	transition: all 0.2s ease 0s;
}
.tab_box .panel_area ul li a{
	display:block;
	padding:2px 5px;
	font-size:14px;
	text-align:center;
	color:#333;
	border-right:1px solid var(--color--gray);
	transition: all 0.2s ease 0s;
}
.tab_box .panel_area ul li:last-child a{
	border-right:none;
}
.tab_box .panel_area ul li:hover{
	border-color: var(--color--main);
}
.tab_box .panel_area ul a:hover{
	color:var(--color--main);
}

.tab_box .tab_panel.active ul li.active{
    border-color:var(--color--main);
}
.tab_box .tab_panel.active ul li.active a{
	color:var(--color--main);
}
/*--------------------------------
 about
--------------------------------*/
.element .about {
  position: relative;
  background-color:#ffffff; 
	color:#595a5a;
	padding:40px 0 50px;
}

.element .about .text-wrapper{
	color: var(--color--main);
	line-height:1;
}
.element .about .subt{
	color: var(--color--main);
	margin-bottom: 30px;
}

.element .about .content h2{
	display:inline-block;
	margin-bottom:20px;
	font-size:22px;
	background:var(--color--main);
	color:var(--wp--preset--color--white);
	padding:0 10px;
}


/*--------------------------------
 feature
--------------------------------*/
.element .feature {
  background-color:#f3f3f3;
  padding: 40px 0 50px;
}

.element .feature .text-wrapper{
	text-align:center;
	line-height:1;
	color:#595a5a;
}

.element .feature .subt{
	text-align:center;
	color:#595a5a;
}

.element .feature .rectangle {
  position: relative;
  width: 354px;
  height: 354px;
	margin:30px 0;
  background-color: #000000;
  border-radius: 0px 16px 16px 0px;
}

.element .feature article:nth-of-type(2n) .rectangle{
   border-radius: 16px 0px 0px 16px;
	margin-left: auto;
}

.element .feature .section_inner {
	margin:30px auto 0;
}
.element .feature .frame {
	width: 300px;
	margin:0 auto;
}
.element .feature .content {
	width: 300px;
	margin:0 auto;
	color: #595a5a;
}
.element h3.heading {
  position: relative;
  color:#595a5a;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
	border-bottom:1px dashed #595a5a;
	margin-bottom:1em;
	padding-bottom:10px;
}

.element .heading-wrapper {
  width: 300px;
	margin:0 auto;
}

/*--------------------------------
 menu
--------------------------------*/
.element .menu {
  position: relative;
  background-color: #ad0a0a;
  color:var(--wp--preset--color--white);
  padding:40px 0 50px;
  background-size: 14px 14px;
}
.element .menu .section_inner{
  max-width: 324px;
}

.element .menu .text-wrapper{
	color: #ffffff;
	text-align:center;
    line-height: 1;
}
.element .menu .subt{
	color: #ffffff;
	text-align:center;
	margin-bottom:30px;
}

.element .menu article {
  background:var(--wp--preset--color--white);
	border-radius:16px 0 16px 0;
	margin:40px auto;
}
.element .menu article figure{
  height:200px;
	border-radius:16px 0 0 0;
}
.element .menu article  .content{
  padding:20px;
	line-height:1.7;
	color:#595a5a;
}
.element .menu article  .content h3{
  text-align:left;
	text-align: center;
}
.element .menu article  .content p{
  font-size:1em;
}

.element .menu .buttonArea {
  text-align:center;
}

.element .menu .buttonArea a {
  display:block;
	width: 310px;
	margin: 40px auto;
	
    font-weight: 700;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  padding:14px 10px;
  white-space: nowrap;
	border-radius:40px;
	background:#000000;
	transition:all ease 0.3s;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}

.element .menu .buttonArea a:hover {
  background: #ffffff;
	color:#000000;
}

/*--------------------------------
 recommended-for
--------------------------------*/
.element .recommended-for {
  position: relative;
  background-color: var(--wp--preset--color--white);
	color:var(--color--text);
	padding:40px 0 50px;
}
.element .recommended-for .section_inner{
  max-width: 324px;
color: #595a5a;
}

.element .recommended-for .text-wrapper{
	text-align:center;
	font-size:27px;
	line-height: 1;

}

.element .recommended-for ul{
	margin:40px 0;
}


.recommended-for ul li::before {
    content: '✔'; /* レ点のシンボル */
    margin-right: 8px; /* テキストとの余白 */
    color: #000; /* チェックマークの色 */
}


/*--------------------------------
 staff-massage
--------------------------------*/
.element .staff-massage {
 	position: relative;
 	background-color:#f3f3f3;
	color:#595a5a;
	padding:40px 0 50px;
}
.element .menu .section_inner{
	max-width: 324px;
}
.element .staff-massage .text-wrapper{
	text-align:center;
	line-height: 1;
	color:#595a5a;
}
.element .staff-massage .subt{
	text-align:center;
	color:#595a5a;
}
.element .staff-massage .content-title{
	text-align: center;
	line-height: 1.5;
	color: #595a5a;
}
.element .staff-massage figure{
	text-align:center;
}
.element .staff-massage figure img{
	max-height:200px;
	vertical-align:bottom;
}

.element .staff-massage .frame {
	margin:0 auto;
  padding: 22px;
  background-color: var(--wp--preset--color--white);
  border-radius: 16px;
  font-family:'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}

.element .staff-massage .item {
  display:flex;
  font-size: 14px;
}

.element .staff-massage .item .title {
  color: var(--color--main);
	margin-right:0;
	width:3em;
	font-weight:700;
}

.element .staff-massage .item .text {
  color: #595a5a;
	flex:1;
}

/*--------------------------------
 pickup
--------------------------------*/
.element .pickup {
  position: relative;
  background-color:#ad0a0a;
	color:var(--wp--preset--color--white);
	padding:40px 0 50px;
	
	  background-image:
    radial-gradient(#ffffff36 21%, transparent 21%);
  background-size: 14px 14px;
	
}
.element .pickup .section_inner{
  max-width: 324px;
}
.element .pickup .text-wrapper{
	text-align:center;
	line-height: 1;
}
.element .pickup .subt{
	text-align:center;
}
.element .pickup .textArea h3{
	text-align:center;
	border-bottom:1px dashed #595a5a;
}
.element .pickup .textArea p{
	line-height:1.5;
	color:#595a5a;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}
.element .pickup .frame{
	background:var(--wp--preset--color--white);
	padding:20px;
	border-radius:16px 0 16px 0;
	color:var(--color--text);
}
.element .pickup .frame figure{
	margin-bottom:15px;
}
.element .pickup .frame h3{
	font-size:18px;
	margin-bottom:15px;
	color:#595a5a;
}
.element .pickup .desc {
	margin:40px 0;
	font-size:0.9em;
  color:var(--wp--preset--color--white);
}
.slick-prev, .slick-next {
    top: 25%;
}
.slick-next {
    right: 25px;
}
.slick-prev {
    left: 25px;
	z-index:5;
}
/*--------------------------------
 photo
--------------------------------*/
.element .photo {
  position: relative;
	padding:40px 0 50px;
	background:#f3f3f3;
}
.element .photo .section_inner{
  max-width: 324px;
}
.element .photo .text-wrapper{
	text-align:center;
	line-height: 1;
	color:#595a5a;
}
.element .photo .subt{
	text-align:center;
	color:#595a5a;
}
.element .photo h4{
	border-bottom:1px solid #595a5a;
	margin-bottom:20px;
	color:#595a5a;
}
.element .photo .gallery{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	margin-bottom:40px;
	padding-bottom:40px;
	position:relative;
}

.element .photo .gallery .rectangle{
	position:relative;
	width:100%;
	padding-top: 100%;
	height:auto;
	overflow:hidden;
	background:var(--color--bg);
}
.element .photo .gallery .rectangle:nth-child(even){
	background:var(--color--dgray);
}

.element .photo .rectangle > a > img{
	position:absolute;
	top:0;
	left:0;
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.element .photo .gallery .rectangle.d-none{
	display:none;
}
.load-more{
	position:absolute;
	bottom:0;
	right:10px;
	width:100%;
	text-align:right;
	cursor:pointer;
	color:#595a5a;
}

/*--------------------------------
 review
--------------------------------*/
.element .review {
  position: relative;
	padding:40px 0;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}

.element .review .grw-review{
	background:#efefef!important;
	margin-bottom:10px!important;
}
.wp-gr .grw-review-inner {
    position: relative !important;
    margin: 0 10px !important;
   padding: 10px !important; 
    width: 100% !important;
}
.element .review .grw-reviews .wp-google-text{
	color:var(--color--text)!important;
}
.element .review .text-wrapper{
	text-align:center;
	line-height: 1;
	color:#595a5a;
}
.element .review .subt{
	text-align:center;
	color:#595a5a;
}

/*--------------------------------
 shop
--------------------------------*/
.element .shop {
  position: relative;
	padding:0 0 50px;
}
.element .shop .section_inner{
  max-width: 324px;
}
.element .shop .text-wrapper{
	line-height: 1;
	color:#595a5a;
}
.element .shop .subt{
	margin-bottom:30px;
	color:#595a5a;
}
.element .shop h4{
	color:var(--color--main);
	margin-top:6px;

}
.element .shop h2.name{
	font-size:20px;
	margin-bottom:15px;
	color:#595a5a;
}

/*--------------------------------
 contact
--------------------------------*/
.element .contact {
  position: relative;
	padding:40px 0;
	background-color:#f3f3f3;
	color:#595a5a;
}
.element .contact .section_inner{
  max-width: 324px;
}
.element .contact .text-wrapper{
	text-align:center;
	color:#595a5a;
}
.element .contact .subt{
	text-align:center;
	color:#595a5a;
}
.element .contact input{
	padding:10px;
	margin-top:4px;
	margin-bottom:15px;
	font-size:15px;
	width:100%;
}
.element .contact textarea{
	padding:10px;
	margin-top:4px;
	margin-bottom:15px;
	font-size:15px;
	width:100%;
}
.element span.require{
	color:red;
	font-weight:700;
}
.element .contact .alert{
	font-size:12px;
	margin-bottom:15px;
}
.element .contact .alert a{ 
	color:var(--wp--preset--color--white);
	text-decoration:underline;
}
.element .contact input[type=submit]{
	background:var(--color--main);
	color:var(--wp--preset--color--white);
	border-radius:10px;
	padding:20px;;
	border:none;
}

.wpcf7-form-control-wrap {
    position: relative;
}
.wpcf7-list-item {
    margin-bottom: 24px;
    margin-left: 0px;
}
.wpcf7-list-item label {
    display: flex;
    align-items: center;
    justify-content: left;
    white-space: nowrap;
}
.wpcf7-list-item input[type="checkbox"] {
    margin-right: 4px;
    margin-top: 0;
    margin-bottom: 0px;
    vertical-align: middle;
    width: auto;
}
.wpcf7-list-item-label {
    font-size: 14px;
    color: var(--color--text);
}



/*--------------------------------
 CourseList
--------------------------------*/
.element .courselist {
  position: relative;
	padding:40px 0 50px;
}
.element .courselist .section_inner{
	max-width: 324px;
	color:#595a5a;
}
.element .courselist .text-wrapper{
	text-align:center;
	line-height: 1;
	color:#595a5a;
	font-size:22px;
}
.element .courselist .subt{
	text-align:center;
	line-height: 1;
}
.element .courselist article{
	padding:30px 0;
	border-top:1px dashed var(--color--text);
	font-size: 14px;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}


.element .courselist .name{
	font-size:16px;
}
.element .courselist .flex{
	display:flex;
	justify-content:space-between;
	gap:20px;
}
.element .courselist .flex figure{
	width:120px;
	height:120px;
	overflow:hidden;
}
.element .courselist .flex figure img{
	object-fit:cover;
	width:120px;
	height:120px;
}
.element .courselist .flex div{
	font-size: 14px;
	flex:1;
}

/*--------------------------------
 MenuList
--------------------------------*/
.element .menulist {
  position: relative;
	padding-bottom:40px;
	color: #595a5a;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}
.element .menulist .section_inner{
  max-width: 324px;
}
.element .menulist .text-wrapper{
	text-align:center;
	line-height: 1;
	font-size:22px;
}
.element .menulist .subt{
	text-align:center;
	line-height: 1;
}
.element .menulist article{
	padding:30px 0;
	border-bottom:1px dashed var(--color--text);
	margin-bottom:20px;
	font-size: 14px;
}

.element .menulist .cat{
	font-size:20px;
	background:#F4F4F4;
	padding:20px 10px 20px 40px;
}
.element .menulist .name{
	font-size:16px;
}
.element .menulist .flex{
	display:flex;
	justify-content:space-between;
	gap:20px;
}
.element .menulist .flex figure{
	width:120px;
	height:120px;
	overflow:hidden;
}
.element .menulist .flex figure img{
	object-fit:cover;
	width:120px;
	height:120px;
}
.element .menulist .flex div{
	flex:1;
	font-size: 14px;
}

/*--------------------------------
 MenuList
--------------------------------*/
.element .couponlist {
  position: relative;
	padding-bottom:40px;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}
.element .couponlist .section_inner{
	max-width: 324px;
	color: #595a5a;
}
.element .couponlist .text-wrapper{
	text-align:center;
	line-height: 1;
	font-size:22px;
}
.element .couponlist .subt{
	text-align:center;
}
.element .couponlist article{
	padding:30px 0;
	border-top: 1px dashed var(--color--text);
	margin-bottom:30px;
	font-size:14px;
}
.element .couponlist .name{
	font-size:14px;
	margin-bottom:10px;
	
}
.element .couponlist span{
	
	font-weight: 900;
}
.element .couponlist .label{
	display:inline-block;
	background:var(--color--main);
	color:var(--wp--preset--color--white);
	padding:2px 7px;
	margin-right:10px;
	margin-bottom:10px;
	font-size:16px;
	
	font-weight: 900;
}
.element .couponlist .flex{
	display:flex;
	justify-content:space-between;
	gap:20px;
}
.element .couponlist .flex figure{
	width:120px;
	height:120px;
	overflow:hidden;
}
.element .couponlist .flex figure img{
	object-fit:cover;
	width:120px;
	height:120px;
}
.element .couponlist .flex div{
	font-size:14px;
	flex:1;
}

/*--------------------------------
 Careers
--------------------------------*/
.element .careers{
  position: relative;
	padding:40px 0;	
}

.element .careers .section_inner{
  max-width: 324px;
}
.element .careers .text-wrapper{
	text-align:center;
	font-size:20px;
	line-height: 1;
}
.element .careers .subt{
	font-style:normal;
	margin:40px 0 0 0;
}
.element .careers .item{
	display:flex;
	border-bottom:1px dashed var(--color--text);
	padding:12px 0;
	flex-wrap:wrap;
	font-size:14px;
}
.element .careers h4{
	width:6em;
	color:var(--color--main);
	
	font-size:14px;
}
.element .careers .item div{
	flex:1;
}

/*--------------------------------
 About
--------------------------------*/
.element .company{
  position: relative;
	padding:40px 0;	
}

.element .company .section_inner{
  max-width: 324px;
}
.element .company .text-wrapper{
	text-align:center;
	font-size:20px;
	line-height: 1;
	margin-bottom:40px;
}

.element .company .item{
	display:flex;
	border-bottom:1px dashed var(--color--text);
	padding:12px 0;
	flex-wrap:wrap;
	font-size:14px;
}
.element .company h4{
	width:8em;
	color:var(--color--main);
	
	font-size:14px;
}
.element .company .item div{
	flex:1;
}

/*--------------------------------
 law
--------------------------------*/
.element .law{
  position: relative;
	padding:40px 0;	
}

.element .law .section_inner{
  max-width: 324px;
}
.element .law .text-wrapper{
	text-align:center;
	font-size:20px;
	line-height: 1;
	margin-bottom:40px;
}

.element .law .item{
	display:flex;
	border-bottom:1px dashed var(--color--text);
	padding:12px 0;
	flex-wrap:wrap;
	font-size:14px;
}
.element .law h4{
	width:8em;
	margin-right:15px;
	color:var(--color--main);
	
	font-size:14px;
}
.element .law .item div{
	flex:1;
}

/*--------------------------------
 error
--------------------------------*/
.element .error{
  position: relative;
	padding:40px 10px;
	min-height:400px;
}
.element .error h1{
  font-size:34px;
	text-align:center;
}
.element .error p{
  font-size:14px;
	text-align:center;
}

/*--------------------------------
 questionnaire
--------------------------------*/
body#questionnaire .element{
	border-radius:16px;
}
.element .questionnaire{
  position: relative;
	padding:24px 10px 50px;
}
.element .questionnaire .section_inner{
  max-width: 324px;
	margin: 0 30px;
}

.element .questionnaire h2{
  font-size:20px;
	text-align:center;	
	margin-bottom:16px;
	line-height: 1.3;
}

.survey-description{
	font-size:14px;
	margin-bottom: 40px;
}

.element .questionnaire .survey{
  display:block;
	border-radius:60px;
	padding:13px ;
	line-height:1.3;
	text-align:center;
	color:var(--color--text);
	border:1px solid var(--color--gray);
	margin:26px auto;
	background:url(../img/arrow-right.png) no-repeat center right 20px;
	background-size:25px;
}
.element .questionnaire .survey span{
  font-size:10px;
	color:#FBBC04;
	letter-spacing:5px;
}


/*--------------------------------
 アンケートモーダル
--------------------------------*/
#questionnaire h1{
	font-size:18px;
	font-weight:bold;	
}

#question-form h3{
	font-size:16px;
	font-weight:bold;
	margin-bottom: 8px;
}

#question-form label{
	line-height:1.5;
	margin-left: 8px;
}

#review_text_1,
#review_text_2,
#review_text_3,
#review_text_4,
#review_text_5,
#review_text_6,
#review_text_7,
#review_text_8,
#review_text_9,
#review_text_10 {
    width: 100%;
    padding: 10px 12px;
    margin: 8px 0px 8px 0px;
	border:none;
	background-color:rgb(232 233 233);
	border-radius: 6px;
}

.modaal-inner-wrapper{
	padding: 80px 12px !important;
}

.coupon-btn{
	text-align:center;
}

.copy-btn{
	text-align:center;
}
#copy-and-redirect-btn{
	background: rgb(26,115,232);
    color: white;
    border: none;
    padding: 16px 48px;
    border-radius: 50px;
    margin-top: 24px;
	font-size:16px;
}


#submit-answers{
	background: rgb(26,115,232);
    color: white;
    border: none;
    padding: 16px 48px;
    border-radius: 50px;
    margin-top: 24px;
	font-size:16px;
}

.loading-animation {
    position: relative; /* 位置を相対的に設定 */
    background-color: white; /* background-colorを指定 */
	text-align:center;
}

.loading-animation h1 {
    display: inline-block; /* h1の横にローディングアイコンを表示させるためにインライン表示 */
    vertical-align: middle; /* テキストとローディングアイコンの高さを揃える */
}

.loading-animation::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 4px solid rgba(0, 0, 0, 0.1); /* 薄いボーダー */
    border-top-color: #0095f6; /* 濃いボーダー（回転部分） */
    border-radius: 50%;
    animation: spin 1s linear infinite; /* 1秒で360度回転し続ける */
    margin-left: 10px; /* テキストとローディングアイコンの間にスペース */
    vertical-align: middle; /* テキストと高さを揃える */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.kuchikomi-boost-logo-area{
	text-align:center;
}

.kuchikomi-boost-coupon{
	width:50%;
}


/* 背景のオーバーレイ */
#dark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 背景を暗くする */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999; /* 前面に表示 */
}

/* コピーしましたメッセージを中央に表示する */
#copy-message {
  background-color: white; /* 背景を白くする */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 影を追加 */
  color: rgb(26, 115, 232);
  font-size: 18px;
  display: flex;
  align-items: center;
  z-index: 1000; /* オーバーレイの上に表示 */
}

/* レ点のスタイルはそのまま */
#copy-message::before {
  content: '✔';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: rgb(26, 115, 232); /* 背景色 */
  border-radius: 50%;
  text-align: center;
  line-height: 18px; /* 中央に配置 */
  margin-right: 5px;
  font-size: 14px;
  color: white; /* レ点の色 */
}






#coupon-card{
	margin: 6px 0px 8px 0px;
	border-radius: 6px;
	background-color: rgb(232, 240, 254);
    padding-top: 24px;
}



#coupon-content{
margin: 0px 16px 10px 16px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
	color: rgb(26, 115, 232);
}

#coupon-conditions{
margin: 0px 16px 4px;
}

#coupon-expiry-days{
padding: 12px 0px;
    border-top: 1px solid;
    margin: 0px 16px;
    text-align: center;
    font-size: 12px;
}

.coupon-explanation{
	text-align:center;
}

#review-and-coupon{
	margin-top: 36px;
}


#review-and-coupon h2{
	background-color: #d8141c;
    color: #ffffff;
    padding: 8px;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
}

#review-text-area{
	border: solid 2px #d8141c;
    margin-bottom: 8px;
    border-radius: 6px;
}

/*--------------------------------
 thanks
--------------------------------*/
body#thanks .element {
    border-radius: 16px 16px 0px 0px;
}

.element .thanks{
  position: relative;
	padding:8px 0px 60px;
}
.element .thanks .section_inner{
   max-width: 540px;
   font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}
.element .thanks h1{
	color:#202124;
	
	padding:15px;
	text-align:center;

	font-size:18px;
}

#thank-you-message{
	margin:40px 0px 6px 0px;
}

.element .thanks p{
	font-size:12px;
}

.element .thanks .lead{
	padding-bottom:20px;
	margin-bottom:20px;
	border-bottom:1px dashed #AAA;
}
.element .thanks .textArea{
	padding:30px 0;
}
.element .thanks textarea{
	padding:16px;
	border-color:#CCCCCC;
	width:100%;
	border-radius:6px;
}
.element .thanks input[type=submit]{
	background:#4285f4;
	color:var(--wp--preset--color--white);
	border:none;
	width:300px;
	text-align:center;
	font-size:14px;
	padding:20px;
	margin-top:30px;
	border-radius: 100px;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}

.element .thanks .limited{
	margin:20px auto;
	font-size:16;
	text-align:center;
}

.element .thanks .limited strong{
	font-size:1.3em;
	font-weight:700;
}


.wpcf7 form .wpcf7-response-output{
	margin:0px !important;
}


/*--------------------------------
 modal
--------------------------------*/





.modaal-content-container {
  overflow: auto; /* モーダルウィンドウ内でスクロールできるように */
}
.modaal-container{
	width:100%;
	padding:0;
	border-radius: 16px;
}
.modaal-content-container{
	padding:0;
	overflow:hidden;
}
.modaal-content-container h1{
	color:#202124;	
	padding:15px 15px 15px 15px;
	text-align:center;
	margin-top:40px;
	font-size:18px;
	line-height:1.7;
}
.modaal-content-container .textArea{
	padding:25px 20px 56px 20px;
}
.modaal-content-container h2{	
	color:#202124;
	text-align:center;
	margin-bottom:25px;
	font-size:16px;
	line-height:1.7;
	font-weight:500;
}
.modaal-content-container .lead{
	padding:20px 0 20px;
	margin-bottom:10px;
	color:#1a73e8;
	line-height:1.7;
	font-weight:700;
	border-top:1px dashed #AAA;
	border-bottom:1px dashed #AAA;
	text-align:center;
}
.modaal-content-container p{
	line-height:1.5;
	font-size:12px;
	color:var(--color--textg);
	margin-bottom:20px;
}
.modaal-content-container figure{
	text-align:center;
	padding:30px 0 10px;
}
.modaal-content-container a{
	display:block;
	width:260px;
	padding:20px;
	background: #1a73e8;
	border-radius:100px;
	color:var(--wp--preset--color--white);
	font-weight:500;
	text-align:center;
	cursor:pointer;
	margin:0 auto;
}
.limited{
text-align: center;
}
/*--------------------------------
 pages
--------------------------------*/
.element .pages{
  position: relative;
	padding:40px 0;	
}

.element .pages .section_inner{
  max-width: 324px;
}
.element .pages .section_inner p{
  margin-bottom:1.5em;
	font-family: 'Zen Kaku Gothic New', Arial, Helvetica, Verdana, sans-serif;
}
.element .pages .section_inner p strong{
  margin-bottom:1.5em;
}
.element .pages .section_inner p strong{
	font-size:1.1em;
}

.element .pages .section_inner h2{
	text-align:center;
  font-size:20px;
	line-height:1.4;
	margin-bottom:7px;
}

.element .pages .text-wrapper{

	margin-bottom:30px;
	font-size:16px;
	line-height: 1.4;
}

.element .pages ul.list{
	list-style:disc;
	padding-left:1.5em;
	margin-bottom:1.5em;
	font-size:14px;
}
.element .pages ol.list{
	list-style:numbers;
	padding-left:1.5em;
	margin-bottom:1.5em;
	font-size:14px;
}

.element .pages ol ol li{
	list-style:lower-latin;
}

/*--------------------------------
 footer
--------------------------------*/
.element footer {
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #0a1f40;
color:var(--wp--preset--color--white);
padding:40px 10px;

background-size: 14px 14px;
}

.element footer a{
  color:var(--wp--preset--color--white);
}
.element footer .footer_logo{
  text-align:center;
	}

.element .SNS {
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 24px 0px 0px;
  position: relative;
  flex: 0 0 auto;
}

.element .img-2 {
  position: relative;
  width: 58px;
  height: 58px;
  object-fit: cover;
}

.element .footer_menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 40px 0px;
  position: relative;
  flex: 0 0 auto;
	font-size:13px;
}

.element .copyright {
	margin:0 auto;
  padding: 20px 10px 50px;
  position: relative;
	text-align:center;
	font-size: 14px;
}


.element .footer_nav {
	position:fixed;
	bottom:0;
	left:50%;
		z-index:101;
	transform:translateX(-50%);
  display: flex;
  height: 60px;
	width:100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 0px;
  background-color: #ffffff;
	box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
}

.element .frame-45 {
  display: flex;
  flex-direction: column;
  width: 118px;
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  position: relative;
}

.element .group-10 {
  position: relative;
  width: 57px;
  height: 39.5px;
}

.element .text-wrapper-28 {
  position: absolute;
  width: 55px;
  top: 26px;
  left: 0;
  
  font-weight: 500;
  color: #000000;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: 13px;
}

.element .icons {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  left: 15px;
  object-fit: cover;
}

.element .frame-46 {
  display: flex;
  flex-direction: column;
  width: 118px;
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0px 10px;
  position: relative;
}

.element .group-11 {
  position: relative;
  width: 57px;
  height: 39px;
}

.element .group-12 {
  position: relative;
  width: 52px;
  height: 39px;
}

.element .text-wrapper-29 {
  position: absolute;
  top: 26px;
  left: 0;
  
  font-weight: 500;
  color: #000000;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0;
  line-height: 13px;
  white-space: nowrap;
}

.element .icons-2 {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  left: 13px;
  object-fit: cover;
}
@media(min-width:451px){

	.overlay{
		position:fixed;
		top:0;
		left:0;
		width:100vw;
		height:100vh;
		background: rgb(0 0 0);
	}
	.logoArea{
		margin-top:50px;
	}
	.element{
		max-width:390px;
	}
}
@media(min-width:1000px){

/*--------------------------------
 leftArea/rightArea (PC only)
--------------------------------*/
.leftArea{
	display:block;
	position:fixed;
	top:50px;
	left:50px;
	color:var(--wp--preset--color--white);
	font-size:30px;
}
.leftArea a{
	color:var(--wp--preset--color--white);
}
.leftArea img{
	height:50px;
}
.rightArea{
	display:block;
	position:fixed;
	top:50px;
	right:50px;
	color:var(--wp--preset--color--white);
	font-size:30px;
}
 .contact_sp {
  display: flex;
  width: 250px;
  align-items: center;
  justify-content: center;
  gap:5px;
  padding: 15px 20px;
  position: relative;
  flex: 0 0 auto;
  background-color:var(--wp--preset--color--white);
  border-radius: 16px;
	 font-size:15px;
	 line-height:1.6;
	 color:var(--color--text);
	 font-weight:700;
	 margin-bottom:20px;
}
 .contact_sp .text{
  flex:1;
}
 .contact_sp figure{
  width: 70px;
	 height:70px;
	 background:var(--color--text);
}
 .contact_line {
  display: flex;
  width: 250px;
  align-items: center;
  justify-content: center;
  gap:5px;
  padding: 15px 20px;
  position: relative;
  flex: 0 0 auto;
  background-color:#00b900;
  border-radius: 16px;
	 font-size:15px;
	 line-height:1.6;
	 color:var(--color--wh);
	 font-weight:700;
	 margin-bottom:20px;
}
 .contact_line .text{
  flex:1;
}
 .contact_line figure{
  width: 70px;
	 height:70px;
	 background:var(--color--text);
}
	.contact_phone{
		position: relative;
	display: flex;
  	width: 250px;
  align-items: center;
  justify-content: center;
  gap:5px;
  padding: 15px 20px;
  position: relative;
  flex: 0 0 auto;
		background-color:var(--wp--preset--color--white);
		border-radius: 30px;
	 font-size:15px;
	 line-height:1.6;
	 color:var(--color--text);
	 font-weight:700;
	 margin-bottom:20px;
	}
	.contact_phone a{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}	
.contact_phone .icons{
	width: 24px;
	 height:24px;
	}	
.contact_reserve{
	position:relative;
	display: block;
  	width: 250px;
	height:60px;
	text-align:center;
  position: relative;
		background-color:var(--color--main);
		border-radius: 30px;
	 font-size:15px;
	 line-height:60px;
	 color:var(--color--text);
	 font-weight:700;
	 margin-bottom:20px;
		padding: 15px 20px;
	}
	.contact_reserve a{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	color:var(--wp--preset--color--white);
	}
}







/*--------------------------------
 questionnaire' ページ専用のフッタースタイル
--------------------------------*/
.page-template-page-questionnaire .element footer {
    position: relative !important;
    background-color: #0a1f40 !important;
    color: var(--wp--preset--color--white) !important;
    padding: 40px 10px 10px 10px !important;
    background-size: 14px 14px !important;
}



.page-template-page-questionnaire .footer_logo {
    background-image: url('https://kuchikomi-boost.com/') !important;
}











/*--------------------------------
 coupon-message
--------------------------------*/
#coupon-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* z-indexを下げる */
  background-color:white;
  padding: 20px;
  border-radius: 10px;
	width:70%;
}

#coupon-message h1 {
  font-size: 20px;
  text-align: center;
  margin: 0;
}






/*--------------------------------
 review-questions-form1
--------------------------------*/
#review-questions-form1 {
    display: none; /* 最初は非表示 */
}