@charset "utf-8";
/* CSS Document */
/*====================================
 全体
======================================*/
html {
    font-size: 62.5%;
}
body{
	color: #666464;
	margin: 0;
	padding: 0;
	font-family: "Zen Maru Gothic", serif;
	font-size: 18px;
    font-weight: 500;
	overflow-x: hidden;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

ul{
	list-style: none;
}
a{
	text-decoration: none;
}
h3{
	display: inline-block;
	border-bottom: 1px dotted #666464;
	padding-bottom: 10px;
	margin-bottom: 10px;
	line-height: 1.5;
	font-family: "Zen Old Mincho", serif;
  　font-weight: 600;
	font-size: 2em;
}
.flex{
	display: flex;
}
.kaku_go{
	font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
}
.p_large{
	font-size: 1.2em;
}
.p_small{
	font-size: 0.8em;
}
@media screen and (min-width: 769px){
	.sp{
		display: none;
	}
}
@media screen and (max-width: 768px){
	.pc{
		display: none;
	}
	body{
		font-size: 16px;
	}
	h3{
		font-size: 1.5em;
	}
}
/*====================================
  header
======================================*/
header{
	color: #54217a;
	text-align: center;
	width: 100vw;
}
.fv_img{
	width: 40%;
}
h1{
	width: 60%;
	text-align: center;
	font-weight: 500;
}
h1 img.logo{
	width: 60%;
	margin: 30px auto;
}
h2{
	justify-content: center;
	margin: -20px auto;
	font-weight: 500;
}
h2 img{
	width: 3%;
	margin: 10px;
}
.header_p{
	margin-top: 50px;
}
@media screen and (max-width: 768px){
	#fv_top{
		display: block;
	}
	.fv_img,
	h1,
	h1 img,
	h2{
		width: 100%;
	}
	h1 img.logo{
		width: 80%;
	}
	h1 p{
		font-size: 24px;
	}
	h2{
		font-size: 20px;
		line-height: 1.5;
		margin-top: 30px;
	}
	h2 img{
		width: 10%;
		height: 3.82%;
	}
}
/*====================================
  button animation
======================================*/
.cv_button{
	justify-content: center;
	flex-direction: row-reverse;
	margin-top: 50px;
}
.btn_animation .btn {
  display: block;
  animation       : btn_animation 4s ease-in-out alternate infinite;
  background      : linear-gradient(90deg,#fe447c, #54217a);
  background-size : 500% 500%;
  border-radius   : 39px;
  color: #fbfbfb;
  width: 500px;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  text-align: right;
  padding-right: 30px;
  text-decoration: none;
  font-size: 24px;
  font-weight: 600;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.2);
}
.cv_button img{
	width: 10%;
	margin-right: -50px;
	z-index: 9999;
}
@keyframes btn_animation {
  0% { background-position:   0% 50% }
  100% { background-position: 100% 50% }
}
@media screen and (max-width: 768px){
	.cv_button{
		padding: 10px;
		display: block;
	}
	.cv_button,
	.btn_animation .btn{
		width: 100%;
	}
	.btn_animation .btn{
		font-size: 18px;
		text-align: center;
		padding: 0;
	}
	.cv_button img{
		width: 25%;
		margin: -10px auto;
	}
}
/*====================================
  nav
======================================*/
nav{
	width: 100%;
	background: #f7f3ee;
	border-top: 1px solid #a89379;
	border-bottom: 1px solid #a89379;
	padding: 0;
	margin: 40px 0;
	color: #54217a;
}
nav ul{
	justify-content: center;
	align-items: center;
}
nav ul li{
	width: 20%;
	padding: 0 20px;
	text-align: center;
}
nav ul li img{
	width: 15%;
	margin: 0 auto;
}
nav ul li p{
	font-weight: 600;
}
@media screen and (max-width: 768px){
	nav{
		margin-top: 40px;
	}
	nav ul{
		flex-wrap: wrap;
		padding: 0;
	}
	nav ul li{
		width: 50%;
		padding: 20px;
	}
	nav ul li img{
		width: 30%;
	}
}

/*====================================
  what
======================================*/
#what{
	width: 90%;
	margin: 30px auto;
	padding: 50px;
}
#what_inner{
	flex-direction: column;
	justify-content: center;
	padding: 30px;
	background: rgba(255, 255, 255, 0.7);
	text-align: center;
	width: 45%;
	min-height: 400px;
}
#what_inner p{
	text-align: left;
	font-weight: 600;
	margin-top: 30px;
}
@media screen and (min-width: 769px){
	#what{
		background-image: url("../img/what_bg.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		min-height: 500px;
	}
}
@media screen and (max-width: 768px){
	#what{
		background: none;
		padding: 10px;
	}
	#what_inner{
		padding: 10px;
	}
	#what,
	#what img,
	#what_inner{
		width: 100%;
	}
	#what_inner p{
		text-align: center;
		padding: 0;
	}
}

/*====================================
  about
======================================*/
#about{
	padding: 50px;
	background-image: url("../img/about_bg.png");
	background-size: cover;
	margin: 0;
}
#about_upper{
	justify-content: center;
	flex-direction: row-reverse;
	gap: 80px;
	align-items: center;
	margin: 20px;
}
#about_bottom{
	justify-content: space-around;
	align-items: center;
	margin: 20px;
}
#about_upper section{
	text-align: center;
	width: 50%;
	flex-direction: column;
	justify-content: center;
}
#about_upper section h4{
	font-size: 1.3em;
	line-height: 1.4;
	color: #54217a;	
	align-items: center;
	justify-content: center;
}
h4::before,
h4::after {
  background-color: #54217a; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  content: "";
  height: 3px; /* 線の高さ */
  width: 40px; /* 線の長さ */
}
h4::before {
  margin-right: 10px; /* 文字との余白 */
  transform: rotate(60deg); /* 傾ける */
}
h4::after {
  margin-left: 10px; /* 文字との余白 */
  transform: rotate(-60deg); /* 傾ける */
}
#about_upper img{
	width: 18%;
}
#about_bottom img{
	width: 40%;
}
@media screen and (max-width: 768px){
	#about{
		padding: 0;
	}
	#about_upper,
	#about_upper section,
	#about_bottom img{
		width: 100%;
		margin: 0 auto;
	}
	#about_upper,
	#about_upper section,
	#about_bottom{
		display: block;
	}
	#about_upper{
		padding: 15px;
	}
	#about_upper img{
		width: 30%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 480px){
	#about_upper img{
		width: 70%;
	}
}
/*====================================
  how
======================================*/
#how{
	text-align: center;
	padding: 30px 80px;
}
#how h4{
	color: #54217a;
	font-size: 1.2em;
	line-height: 1.5;
}
#how h4 span{
	color: #666464;
}
#how_inner{
	width: 80%;
	margin: 80px auto;
}
#how section{
	text-align: left;
}
img.table{
	float: right;
	width: 30%;
	margin: 0 0 0 20px;
}
.caption{
	margin: 0 0 50px;
	color: #54217a;
	font-weight: 600;
}
#how ul{
	justify-content: space-around;
	width: 90%;
	padding-left: 0;
	margin: 50px auto;
}
#how ul li{
	width: 30%;
}
img.step{
	width: 60%;
	margin: 0 auto;
}
.clear{
	float: none;
}
@media screen and (min-width: 769px){
	/*======================矢印*/
.triangle {
  position: relative;
  display: inline-block;
  padding-left: 12px;
}
.triangle:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 0 16px 18px;
  border-color: transparent transparent transparent #a89379;
  position: absolute;
  top: 0;
  right: -30px;
  bottom: 0;
  margin: auto;
}
}
@media screen and (max-width: 768px){
	#how{
		margin-top: 30px;
		text-align: center;
	}
	#how_inner{
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		margin: 0 50px 0;
	}
	img.table{
		float: none;
	}
	#how ul{
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.arrow img{
		width: 5%;
		margin: 0 auto;
		transform: rotate(90deg);
	}
	img.table{
		width: 80%;
		margin: 20px auto;
	}
	img.step{
		width: 60%;
		margin: 0 auto;
	}
	#how_inner,
	#how_inner section,
	#how ul,
	#how ul li{
		width: 100%;
		margin: 0 auto;
	}
	p.caption{
		margin-bottom: 0;
	}
	#how ul li{
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 480px){
	#how{
		padding: 20px;
	}
}
/*====================================
  message
======================================*/
#message{
	padding: 30px 80px;
}
#message ul{
	justify-content: center;
	align-items: center;
}
.figure{
	margin-top: -50px;
	margin-right: -30px;
	width: 30%;
	min-width: 155px;
	text-align: center;
	z-index: 999;
}
.figure img{
	width: 100%;
}
.sentence{
	padding: 30px 30px 30px 60px;
	background: #f7f3ee;
	line-height: 1.8;
}
@media screen and (max-width: 768px){
	#message{
		padding: 20px;
		text-align: center;
	}
	.sentence{
		width: 100%;
		margin: 0 auto;
		background: none;
		padding: 0;
	}
	.figure{
		width: 50%;
		margin: 0 auto;
	}
	.figure img{
		box-shadow: 15px -15px 0px 0px rgba(247, 243, 238, 1);
	}
	#message ul{
		display: block;
		padding: 0;
	}
}
/*====================================
  instagram
======================================*/
#instagram img{
	width: 80%;
	margin: 0 auto;
}
@media screen and (max-width: 768px){
	#instagram img{
		width: 100%;
	}
}
/*====================================
  sponsor
======================================*/
#sponsor{
	margin: 50px 0;
	padding: 30px;
	text-align: center;
	background-image: url("../img/sponsor_bg_left.png"), url("../img/sponsor_bg_right.png");
	background-position: left center, right center;
	backgkround-size: cover;
	background-repeat: no-repeat;
}
.sponsor-inner{
	width: 100%;
	max-width: 1200px;
	margin: 30px auto 50px;
	display: flex;
	justify-content: center;
	gap: 50px;
	align-items: center;
	flex-wrap: wrap;
	padding: 0;
}
.sponsor-inner li{
	width: 30%;
}
.s_logo{
	width: 100%;
}
.s_button{
	width: 30%;
	margin: 30px auto;
}
.hover{
	transition-property: opacity;
    transition-duration: 0.5s;
}
.hover:hover{
	opacity: 0.7; 
}
@media screen and (max-width: 768px){
	#sponsor{
		background-size: 50%;
		background-position: left bottom, right top;
	}
	.sponsor-inner li{
		width: 90%;
	}
	.sponsor-inner li a,
	.sponsor-inner li a img{
		width: 100%;
	}
	.s_button{
		width: 50%;
	}
}
@media screen and (max-width: 480px){
	.s_button{
		width: 85%;
	}
}
/*====================================
  footer
======================================*/
footer{
	text-align: center;
	color: #54217a;
	background-image: url("../img/footer_bg.jpg");
	background-size: cover;
	padding: 50px;
}
#footer_inner{
	justify-content: center;
	gap: 60px;
	margin-top: 30px;
}
footer section{
	text-align: left;
}
img.footer_logo{
	width: 20%;
	height: 20.06%;
}
h5{
	font-size: 2.5rem;
	margin: 0;
}
h5 span{
	font-size: 2rem;
}
.phone span{
	font-size: 2rem;
}
.phone,
footer section p span{
	font-size: 0.9em;
}
.footer_button{
	background: #54217a;
	padding: 5px 10px;
	text-align: center;
	color: #fff;
	display: inline-block;
	margin-top: 30px;
}
@media screen and (max-width: 768px){
	footer{
		padding: 30px 0 90px;
	}
	#footer_inner{
		display: block;
	}
	footer section{
		text-align: center;
	}
	img.footer_logo{
		width: 50%;
		margin: 0 auto 30px;
	}
	.phone span{
		font-size: 2.5rem;
	}
	.footer_button{
		font-size: 1.2rem;
	}
}
/*====================================
  floating banner
======================================*/
.floating{
	position: fixed;
	  bottom: 10px;
	  right: 10px;
	width: 15%;
}
@media screen and (max-width: 768px){
	.floating{
		width: 35%;
	}
}
/*==================================================
動きのcss
===================================*/
/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
  }

  to {
      transform: scale(1);
  }
}
/* 下から */

.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);
  }
}
.purple-text {
  color: #54217A;
}

.voice-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 20px;
    font-family: "Zen Maru Gothic", serif;
}

.voice-title {
    text-align: center;
    font-size: 32px;
    color: #555;
    margin-bottom: 40px;
}

.voice-box {
    background: #fce4ec;
    padding: 5px 30px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.voice-box p {
    font-size: 18px;
    line-height: 1.8;
    color: #666;
    width: 75%;
}

.voice-box img {
    width: 200px;
    height: auto;
}


  /* ====================================
   スマホ最適化（768px以下）
==================================== */
@media screen and (max-width: 768px) {

	/* 全体の文字サイズ調整 */
	body {
	  font-size: 15px;
	  line-height: 1.7;
	}
  

  
	/* カードのレイアウト調整 */
	.card {
	  width: 90%;
	  max-width: 100%;
	  padding: 10px 10px;
	  margin: 0 auto 20px;
	  box-sizing: border-box;
	}
  
	/* カードを縦並びに統一 */
	.wrapper {
	  display: flex;
	  flex-direction: column;
	  gap: 20px;
	  width: 100%;
	}
  
	/* 不要な横スクロールを防ぐ */
	html, body {
	  overflow-x: hidden;
	}
  
	/* 画像が画面からはみ出ない */
	img {
	  max-width: 100%;
	  height: auto;
	}
  }

  @media screen and (max-width: 768px) {
	.card .text  {
	  font-size: 14px !important;
	  line-height: 1.6;
	}
  }

  @media screen and (max-width: 768px) {
	.card .title {
	  font-size: 21px;
	  line-height: 1.4;
	}
  }

  .sp-only {
	display: none;
  }
  
  @media screen and (max-width: 768px) {
	.sp-only {
	  display: inline;
	}
  }

  @media screen and (max-width: 768px) {
	.voice-img img {
	  width: 140px;      /* 横幅を統一 */
	  height: auto;
	  object-fit: contain;
	}
  }