/*
Theme Name: kawaruka0303.com
Author: chihiro hamano
Author URI: https://kir-design.site
Description: A custom WordPress theme based on an Adobe XD design.
Version: 1.0
*/

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ W6", "Hiragino Sans GB", "Microsoft YaHei UI", "Hiragino Sans GB",'Noto Sans JP', sans-serif;
	color: #333;
	background-color: #fff;
	line-height: 1.8;
	margin: 0px;
	padding: 0px;
	position: relative;
	background: #FAFAFA;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
}
.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 60px 20px;
	position: relative;
}

.font-60 { font-size: 4em; }
.font-42 { font-size: 3.5em; }
.font-30 { font-size: 2.5em; }
.font-20 { font-size: 1.6667em; }
.font-16 { font-size: 1.3333em; }
.font-14 { font-size: 1.1667em; }

@media(min-width:751px){
	.font-60 { font-size: 5em; }
}

.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}

.margin-100 { margin-bottom: 8.3em; }
.margin-60 { margin-bottom: 5em; }
.margin-40 { margin-bottom: 2.5em; }
.margin-20 { margin-bottom: 1.6667em; }

.blur {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(25px);
}

:root {
	--pink: #FD72C5;
}

/* Header */
header {
	top: 0;
	left: 0;
	justify-content: space-between;
	width: 100%;
	height: 66px;
	justify-content: flex-start;
	background: white;
	z-index: 1;
}

.logo {
	padding: 1em 20px;
	z-index: 1;
}

.logo a {
	max-height: 66px;
	width: auto;
	font-weight: bold;
	color: #000;
	display: block;
	text-align: left;
}

.logo img {
	width: auto;
	height: calc(66px - 2em);
}

.main-menu {
  list-style: none;
  display: flex;
  gap: 30px;
}

.main-menu li a {
  color: #000;
  font-weight: 500;
  transition: color 0.3s;
}

.main-menu li a:hover {
  color: #007BFF;
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background: url(/img/main_bg.png) center;
    background-size: cover;
	z-index: -10;
}

@keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
#overlay-button {
	position: fixed;
	width: 66px;
	height: 66px;
	right: 0;
	top: 0;
	z-index: 5;
	cursor: pointer;
	user-select: none;
	background: var(--pink);
}

#overlay-button span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	height: 2px;
	width: 25px;
	border-radius: 2px;
	background-color: white;
	position: relative;
	display: block;
	transition: all .2s ease-in-out;
}

#overlay-button span:before {
  top: -10px;
  visibility: visible;
}
#overlay-button span:after {
  top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
  height: 2px;
  width: 25px;
  border-radius: 2px;
  background-color: white;
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
  background: #fff;
}

input[type=checkbox] {
  display: none; 
  
}

input[type=checkbox]:checked ~ #overlay {
  visibility: visible; 
}

input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
  background: transparent;
  
  
}
input[type=checkbox]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);

}
input[type=checkbox]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);


}

#overlay {
	height: 100vh;
	width: 100vw;
	background: #373737;
	z-index: 2;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
}
#overlay.active {

}
#overlay ul {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	height: calc(100vh - (66px + 53px));
	padding-left: 0;
	list-style-type: none;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.33em;
}
#overlay ul li a:hover {
  color: var(--pink) !important;
}


/* Hero Section */
.hero {
	width: 100%;
    height: calc(100vh - 66px);
	position: relative;
	background: url(/img/partyPAUI1797.jpg) center;
	background-size: cover;
}

.hero h1 {
  font-weight: bold;
  margin-bottom: 20px;
}

.hero h2 {
  font-weight: bold;
  margin-bottom: 20px;
}

.hero p {
  color: #666;
}

.hero_container {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translatey(-50%);
	width: 100%;
	color: white;
}

.hero_container .container {
	max-width: 1200px;
}

.hero_copyright {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 60px;
	line-height: 60px;
	background: #29D0F2;
	width: 100%;
	text-align: center;
	z-index: 10;
	font-weight: 700;
}

.hero_copyright p {
	color: white !important;
}

#overlay .hero_copyright {
	color: white;
}

.gradation {
    position: relative;
}

.gradation::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.5), transparent);
}

.mission {
	background: #fff;
	border-radius: 20px 20px 0 0;
}

.about {
	position: relative;
	background: url(/img/kamihubuki.png);
	background-size: auto 100%;
	background-position: top center;
}

.about span {
	position: absolute;
	bottom: -25px;
	right: 0;
	display: block;
    width: 150px;
}

.about_comment {
	width: 90%;
	max-width: 500px;
	background: #fff;
	border-radius: 6px;
	padding: 1em;
	font-weight: bold;
}

.right {
    margin: 0 0 1em auto;
	text-align: right;
}

.mission_img {
	position: relative;
    transform: translateY(20px);
    z-index: -1;
	display: block;
    max-height: 400px;
    width: 100%;
    object-fit: cover;
	margin: -20px 0 0;
}

/* Service Section */

.bg_white {
	background: white;
}

.service-list {
	display: grid;
}

.service-card-img {
	border-radius: 0.5em;
	overflow: hidden;
	max-height: 200px; 
}

.service-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media(min-width:751px){
	.service-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	.service-card-img {
		max-height: 240px;
	}
}

.side_line {
	padding-left: .5em;
	border-left: 4px solid var(--pink);
	font-size: 1.66em;
}

.support .container {
	padding: 60px 20px 0;
}

.support_li {
	margin: 0 0 1.6667em 20px;
	padding: 1em 1.23em 1.23em 2em;
	background: #fff;
	border-radius: 10px;
	position: relative;
	font-size: 1.333em;
}

.support_li span {
	position: absolute;
	top: 50%;
	left: -20px;
	transform: translatey(-50%);
	font-size: 1.66em;
	font-weight: bold;
	color: #F57F7F;
}

.support ul {
	padding-left: 2em;
}

.support li {
	padding: 4px 0;
}

/* Contact Section */
.contact {
}

.contact_box {
	padding: 2.5em;
	border-radius: 6px;
	display: grid;
	gap: 20px;
}

.contact_btn {
	text-align: right;
}

.contact a.btn {
  display: inline-block;
  background: var(--pink);
	color: #fff;
	height: 40px;
	line-height: 40px;
  padding: 0 30px;
  border-radius: 20px;
  font-weight: bold;
  transition: background 0.3s;
	width: auto;
}

.button01 {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	line-height: 40px;
}

.btn {
	width: 40px;
	height: 40px;
	background: black;
	border-radius: 50%;
	position: relative;
	transition-duration: 1s;
}

.button01:hover .btn {
	transform: translatex(6px);
}

.button01 img {
	width: 8px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/* Footer */
footer {
  text-align: center;
	color: #fff;
	background: #333;
	margin-bottom: 60px;
}

.footer-content {
	background: #333;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
}

.footer-content-logo {
	width: 70%;
	max-width: 200px;
	margin: 0 auto;
	padding: 40px 0;
}


.footer-content ul {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0;
	margin: 0;
	gap: 1px;
	background: rgba(255,255,255,0.5);
	padding-bottom: 1px;
}

.footer-content ul li {
	background: #333;
	transition: all 0.5s 0s ease;
}

.footer-content ul li a {
	display: block;
	padding: 1.5em 0;
	height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.copyright {
	background: #373737;
	height: 40px;
	line-height: 40px;
}

.icon-inst {
	position: relative;
	min-height: 100px;
}

.icon-inst a {
	display: block;
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
}

@media(min-width:751px){
	.footer-content {
		grid-template-columns: 3fr 1fr 2fr;
	}
	.footer-content ul {
		grid-template-columns: 1fr 1fr 1fr;
		background: none;
	}
	.footer-content ul li:hover {
		background: #666;
	}
}


/* CONTENTS */

.circular_heading {
	font-size: 1.8em;
	font-weight: bold;
	position: relative;
	color: var(--pink);
	text-align: center;
}

.overlapping-pink {
	font-size: 6em;
	color: var(--pink);
	opacity: .3;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
    white-space: nowrap;
    z-index: -1;
}

#post {
	background: #FAFAFA;
}

hr {
    border-top: 2px dotted #555;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

.content {
	padding: 20px;
	background: #fff;
	border-radius: 6px;
}

@media (min-width: 751px) {
	.content {
		padding: 60px;
	}
}

#post h2,#post h3,#post h4,#post p {
	margin-bottom: 20px;
}

#post h2 {
	font-size: 1em;
	font-weight: normal;
	padding-left: 20px;
	position: relative;
}

#post h2:before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translatey(-50%);
	left: 0;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border: 3px solid var(--pink);
	border-radius: 50%;
}

#post h3 {
	font-size: 2em;
	font-weight: bold;
}

#post h4 {
	font-size: 1.3em; 
	font-weight: bold;
}

#post img {
	overflow: hidden;
    border-radius: 6px;
	margin-bottom: 20px;
}

.gray {
	background: #FAFAFA;
}

.white {
	background: white;
}

.form-row {
  margin-bottom: 1.5em;
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-weight: bold;
  margin-bottom: 0.5em;
	color: var(--pink);
}

.form-control {
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
	width: 100%;
	margin-top: 20px;
}

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

.submit-button {
	background: var(--pink);
	color: #fff;
	border: none;
	padding: 0 2em;
	border-radius: 20px;
	cursor: pointer;
	height: 40px;
	width: 200px;
	line-height: 40px;
	text-align: center;
	margin: 0 auto:
}

.wpcf7-spinner {
	display: none !important;
}

.wpcf7 form .wpcf7-response-output {
	border: none !important;
}

.wpcf7-response-output {
  margin-top: 1.2em !important;
  padding: 1em !important;
  border: none !important;
  background-color: #fff0f0;
  color: #b71c1c;
  font-size: 1.2em;
  line-height: 1.5;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  display: block;
}

.wpcf7-list-item {
	display: block;
}

table {
	font-size: 1.2em;
}

tr {
	display: grid;
	gap: 20px;
	text-align: left;
	padding: 1em;
	border-bottom: 1px solid #707070;
}

tr:last-child {
	border-bottom: none;
}

th {
	color: var(--pink);
}

@media (min-width: 751px) {
	tr {
		padding: 2em;
	}
}

.area01{
	background-color: #fff;
	border-radius: 10px;
}
.inner {
width:750px;
margin: 20px auto;
}
.qa_box{
	margin-bottom: 20px;
	
}
.qa_box .qa_q {
	padding: 20px 60px;
	position: relative;
	cursor: pointer;
	font-weight: bold;
	font-size: 1.3333em;
}

.qa_q:before {
	content: "Q";
	position: absolute;
	top: 50%;
	left: 20px;
	font-size: 20px;
	color: #F57F7F;
	transform: translatey(-50%);
}

.toggle_icon {
position: absolute;
top: 50%;
right: 20px;
width: 20px;
height: 20px;
margin-top: -15px;
}
.toggle_icon:before{
position: absolute;
content: "＋";
margin: auto;
box-sizing: border-box;
vertical-align: middle;
}
.qa_q.open .toggle_icon:before{
position: absolute;
content: "ー";
margin: auto;
box-sizing: border-box;
vertical-align: middle;
}
.qa_box .qa_a {
	display: none;
	padding: 25px 30px;
	box-sizing: border-box;
}
.q_txt{
display: block;
padding-left: 35px;
position: relative;
line-height: 1.5;
font-size: 20px;
}
.q_txt::before {
position: absolute;
left: 0;
content: "Q．";
color: #fff;
font-size: 20px;
font-weight: bold;
}
.a_txt {
display: block;
padding-left: 35px;
position: relative;
line-height: 1.5;
}
.a_txt::before {
position: absolute;
left: 0;
content: "A．";
color: #de0000;
font-size: 20px;
font-weight: bold;
}
@media screen and (max-width: 750px) { 
.inner{
width: auto;
}
.toggle_icon {
right: 20px;
}
.toggle_icon:before {
width: 15px;
}
.toggle_icon:after {
height: 15px;
right: 7px;
}
}
@media screen and (max-width: 480px) { 
.toggle_icon {
right: 20px;
}
}

.checkbox-cl01 input {
  display: none;
}

.checkbox-cl01 input + span {
  padding-left: 28px;
  display: inline-block;
  position: relative;
	margin: 1em 0;
}

.checkbox-cl01 input + span::after,
.checkbox-cl01 input + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
}

.checkbox-cl01 input + span::before {
  border: 1px solid #aaaaaa;
  background-color: #ffffff;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.checkbox-cl01 input + span::after {
  border: none;
  background-color: var(--pink);
  border-radius: 50%;
  height: 12px;
  width: 12px;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.checkbox-cl01 input:checked + span::after {
  display: block;
}

#livers {
	overflow-x: hidden;
}

.liver-slider-wrapper {
	flex-grow: 1;
	margin-right: calc(50% - 50vw);
	position: relative;
	width: 100%;
}

.swiper-container {
  padding-bottom: 10px;
}

.liver-slider {
  margin: 40px 0 0;
}

.liver-card {
  display: grid;
  flex-direction: column;
  align-items: center;
  text-align: left;
  text-decoration: none;
  color: inherit;
  width: 160px;
}

.liver-thumb img {
  width: 160px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.liver-name {
	margin-top: 10px;
	color: var(--pink);
	font-size: 1.3333em !important;
	font-weight: bold;
}

.liver-platform {
  font-size: 0.85rem;
  color: #777;
  margin-top: 4px;
}

.swiper-slide {
  width: auto;
  padding: 10px;
}

.swiper-slide, swiper-slide {
    width: 160px !important;
}

._flow_ltn33_25 {
	text-align: center;
	margin: 0 0 60px;
}

._heading_ltn33_74 {
	display: grid;
	text-align: center;
	padding: 0.5em;
	background: #FFEEF8;
	font-size: 1.5em !important;
}

._step_ltn33_92 {
	font-size: 0.7em;
	color: var(--pink);
}

._imgArea_ltn33_103 {
	height: 150px;
	text-align: center;
}

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

._allow_ltn33_183 {
	width: 12px;
	height: 12px;
	display: block;
	background: none;
	border-left: 3px solid var(--pink);
	border-bottom: 3px solid var(--pink);
	transform: rotate(-45deg);
	margin: 0 auto 2em;
}

._container_1lmqm_2 {
    display:grid;
    flex-direction: column;
    align-items: center;
}

._microcopy_1lmqm_33 {
	font-size: 1.3333em;
	font-weight: bold;
	margin: 0 auto 1em;
	position: relative;
    padding: 0 .5em;
}

._microcopy_1lmqm_33:before {
	content: "";
	position: absolute;
	height: 20px;
	width: 1px;
	background: #ccc;
	transform: rotate(-15deg);
	display: inline-block;
	left: -10px;
	bottom: 5px;
}

._microcopy_1lmqm_33:after {
	content: "";
	position: absolute;
	height: 20px;
	width: 1px;
	background: #ccc;
	transform: rotate(15deg);
	display: inline-block;
	right: -10px;
	bottom: 5px;
}

._container_1lmqm_2 ._button_1lmqm_71 {
	max-width: 300px;
	width: 300px;
	min-width: 250px;
	height: 60px;
	font-size: 18px;
	line-height: 60px;
	background: var(--pink);
	text-align: center;
	font-weight: bold;
	color: #fff;
	border-radius: 30px;
	position: relative;
	margin: 0 auto 60px;
}

._button_1lmqm_71:before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	top: calc(50% - 3px);
	right: 24px;
	transform: rotate(-45deg);
}