/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 26 2025 | 07:36:34 */
.mv-pc {
  display: block;
}
.mv-sp {
  display: none;
}

.mvBox{
	padding-top:50px;
}

/* --- ベースのスタイル --- */
.mvBox .main-visual {
  position: relative;
  width: 1240px; /* 実際のデザインに合わせて調整 */
  height: 700px; /* 実際のデザインに合わせて調整 */
  margin: 0 auto;
  background-color: #FFF; /* 背景色 */
  overflow: hidden; /* はみ出し防止 */
	padding-top:50px;
}

/* 絶対配置の共通設定 */
.mvBox .main-visual img {
  position: absolute;
	pointer-events: none;
  /* 実際の位置に合わせて top, left, width を調整してください */
}
.mvBox .main-visual img.cta3 {
	pointer-events: auto;
}
.mvBox .main-visual a img:hover {
  opacity: 0.6;
}

/* 各要素の配置（仮の値です。実際の位置に合わせて調整してください） */
.copy    { top: 50px; right: 20px; width: 500px; }
.light   { top: 50px; left: 0px; width: 678px; z-index: 1; }
.bubbles { top: 0px; left: 40px; width: 614px; z-index: 2; }
.rabbit  { top: 220px; left: 130px; width: 472px; z-index: 3; }
.hamster { top: 450px; left: 0px; width: 308px; z-index: 4; }
.cta3 { top: 450px; right: 0px; width: 482px; z-index: 100; }


/* --- アニメーションの設定 --- */

/* 共通のアニメーションクラス */
.fade-in-up {
  opacity: 0; /* 初期状態は非表示 */
  /* アニメーション名、時間、イージング、終了状態を維持 */
  animation: fadeInUp 2s ease-out forwards;
}

/* 下からふわっと浮き上がるキーフレーム */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(0px); /* 開始時は少し下に配置 */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻る */
  }
}

/* 1. うさぎの画像要素を指定（クラス名は仮に .rabbit-image としています） */
.fade-in-up2 {
  opacity: 0; /* 最初は非表示 */
  display: block;
  margin: 0 auto;
  /* 出現アニメーション(appear)を1秒かけて行い、
     その1秒後（delay）からふわふわアニメーション(floating)を無限に繰り返します
  */
  animation: 
    appear 1.5s ease-out forwards, 
    floating 3.0s ease-in-out infinite alternate 1.0s;
}

/* 順番を指定する遅延時間の設定 */
.delay-5 { animation-delay: 0.2s; } /* 5. ハムスター (+0.4s) */
.delay-3 { animation-delay: 0.4s; } /* 3. 吹き出し (+0.4s) */
.delay-1 { animation-delay: 0.6s; } /* 1. キャッチコピー */
.delay-4 { animation-delay: 1.0s; } /* 4. うさぎ (+0.4s) */
.delay-2 { animation-delay: 1.4s; } /* 2. 背景の光 (+0.4s) */

/* 2. 最初に出てくるアニメーション（下からふわっと浮き上がる） */
@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(0px); /* 30px下から開始 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. その後の「ふわふわ」した動き（上下にゆっくり動く） */
@keyframes floating {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px); /* 15px分、上に浮く */
  }
}




#Home .about{
	position:relative;
	padding-top:80px;
	padding-bottom:150px;
	z-index: 0;         /* 重なり順の基準を作る */
}
#Home .about::before{
	content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background-image: url(http://tanomate.com/wp-content/uploads/2025/12/bg_home1-2.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
	    background-size: contain;
	
	/* コンテンツ（文字）より後ろに配置 */
  z-index: -1;
	
/* アニメーションの設定 */
  /* zoomAnimationという名前のアニメーションを20秒かけて無限に繰り返す */
  animation: zoomAnimation 5s linear infinite;
}

/* アニメーションの動きを定義（キーフレーム） */
@keyframes zoomAnimation {
  0% {
    transform: scale(0.9); /* 開始時は等倍 */
  }
  50% {
    transform: scale(1); /* 途中1.1倍まで拡大 */
  }
  100% {
    transform: scale(0.9); /* 終了時は等倍に戻る */
  }
}



#Home .about h1{
font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
	font-size: 50px;
	line-height: 1.3;
	margin-top:220px;
	margin-bottom:15px;
	color:#55A8F3;
}
#Home .about pre{
font-family: "Roboto", sans-serif;
  font-weight: 400;
	font-size: 20px;
	color:#FF6369;
}
#Home .about p{
font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
	font-size: 24px;
	line-height: 1.5;
	margin-top:60px;

}

#Home .howto .inner{
	padding:80px 70px;
	background-color:#F3F3F3;
	border-radius:30px;
}
#Home .howto h2{
font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
	font-size: 50px;
	color:#55A8F3;
	text-align:center;
}
#Home .howto pre{
font-family: "Roboto", sans-serif;
  font-weight: 400;
	font-size: 20px;
	color:#FF6369;
	text-align:center;
	margin-bottom:50px;
}
#Home .howto .column{
	background-color:#FFF;
	padding:0px 70px 0px 40px;
	border-radius:20px;
	margin-bottom:20px;
}
#Home .howto .column img{
	width:80%;
}
#Home .howto h3{
font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 28px;
    background-size: 31px 41px;
    background-repeat: no-repeat;
    background-image: url(http://tanomate.com/wp-content/uploads/2025/12/step1-1.svg);
    padding-left: 35px;
    background-position: left top;
    padding-bottom: 12px;
    border-bottom: 1px solid #D6D6D6;
    margin-bottom: 20px;
    line-height: 2;
}
#Home .howto h3.s2{
    background-image: url(http://tanomate.com/wp-content/uploads/2025/12/step2-1.svg);
}
#Home .howto h3.s3{
    background-image: url(http://tanomate.com/wp-content/uploads/2025/12/step3-1.svg);
}
#Home .howto h3.s4{
    background-image: url(http://tanomate.com/wp-content/uploads/2025/12/step4-1.svg);
}
#Home .howto p{
    font-size: 20px;
	font-weight:500;
	line-height:1.6;
}

#Home .section3{
	padding-top:60px;
	padding-bottom:100px;
}
#Home .section3 h2{
	font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
	font-size: 34px;
	color:#FF6369;
	text-align:center;
	margin-top:30px;
	margin-bottom:60px;
}
#Home .section3 h2 strong{
	background-color:#FF6369;
	color:#FFF;
	font-weight: 500;
	padding:0px 5px;
}

#Home .faq{
	padding-top:0px;
	padding-bottom:100px;
}
#Home .faq h2{
font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
	font-size: 50px;
	color:#55A8F3;
	text-align:center;
}
#Home .faq pre{
font-family: "Roboto", sans-serif;
  font-weight: 400;
	font-size: 20px;
	color:#FF6369;
	text-align:center;
	margin-bottom:50px;
}
#Home .faq .qa{
	padding:15px 30px;
	 box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	border-radius:20px;
}
#Home .faq .smb-accordion__item__title {
	font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 600;
      font-size:16px;
	color:#333;
	    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-image: url(http://tanomate.com/wp-content/uploads/2025/12/ico_q.svg);
    padding-left: 55px;
    background-position: left center;
	background-color: #FFF;
	
}
#Home .faq .qa p {
	font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
     font-size:16px;
	color:#333;
	background-size: 40px 40px;
    background-repeat: no-repeat;
    background-image: url(http://tanomate.com/wp-content/uploads/2025/12/ico_a.svg);
    padding-left: 55px;
    background-position: left 15px;
    background-color: #FFF;
    padding-top: 15px;
    border-top: 1px solid #D6D6D6;
    margin-top: 10px;
}
.smb-accordion__item__body{
	padding:0px 0px;
}
svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
    color: #000000;
}
.svg-inline--fa {
    height: 1.3em;
}

#Home .faq .btn {
  color: #FFF;
	margin-top:50px;
}
#Home .faq .btn a {
  position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
  text-decoration: none;
  color: #FFF;
  background-color: #55A8F3;
   font-size: 18px;
  font-weight: 500;
	font-family: "Zen Kaku Gothic New", sans-serif;
	border-radius:10px;
	width: 380px;
}
#Home .faq .btn a:hover {
  background-color: #55A8F3;
  opacity: 0.7;
}
#Home .faq .btn a:before {
  background: url(http://tanomate.com/wp-content/uploads/2025/12/ico_arrow_white.svg);
  content: "";
  width: 11px;
  height: 19px;
  right: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#Home .newsArea {
	background-color:#F3F3F3;
	padding-top:80px;
	padding-bottom:80px;
}
#Home .newsArea .inner {
	background-color:#FFF;
	padding:70px 70px;
	border-radius:20px;
}
#Home .newsArea h2{
font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
	font-size: 50px;
	color:#55A8F3;
	text-align:center;
}
#Home .newsArea pre{
font-family: "Roboto", sans-serif;
  font-weight: 400;
	font-size: 20px;
	color:#FF6369;
	text-align:center;
	margin-bottom:50px;
}

#Home .newsArea .eyecatch {
	margin-bottom:20px;
}

#Home .newsArea .tag {
	margin-right: 10px;
}
#Home .newsArea .tag a {
	padding:2px 10px;
  text-decoration: none;
  color: #55A8F3;
  background-color: #FFF;
   font-size: 14px;
  font-weight: 500;
	font-family: "Zen Kaku Gothic New", sans-serif;
	border:1px solid #55A8F3;
	border-radius:8px;
	margin-right: 5px;
}
#Home .newsArea .tag a:first-child {
  display: none;
}
#Home .newsArea .date a {
    font-size: 14px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
}
#Home .newsArea h3 {
    font-size: 16px;
   font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
	margin-top:10px;
}
#Home .newsArea .btn {
  color: #FFF;
	margin-top:50px;
}
#Home .newsArea .btn a {
  position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
  text-decoration: none;
  color: #FFF;
  background-color: #55A8F3;
   font-size: 18px;
  font-weight: 500;
	font-family: "Zen Kaku Gothic New", sans-serif;
	border-radius:10px;
	width: 380px;
}
#Home .newsArea .btn a:hover {
  background-color: #55A8F3;
  opacity: 0.7;
}
#Home .newsArea .btn a:before {
  background: url(http://tanomate.com/wp-content/uploads/2025/12/ico_arrow_white.svg);
  content: "";
  width: 11px;
  height: 19px;
  right: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#Home .ctaBn {
	margin-top:100px;
	margin-bottom:120px;
}


@media (max-width: 1024px) {
	  .mv-pc {
    display: none;
  }
  .mv-sp {
    display: block;
  }

	
	.mvBox{
	padding-top:10px;
		padding-left:15px;
		padding-right:15px;
}

/* --- ベースのスタイル --- */
.mvBox .main-visual {
  position: relative;
  width: 100%; /* 実際のデザインに合わせて調整 */
  height: 750px; /* 実際のデザインに合わせて調整 */
  margin: 0 auto;
  background-color: #FFF; /* 背景色 */
  overflow: hidden; /* はみ出し防止 */
}

/* 絶対配置の共通設定 */
.mvBox .main-visual img {
  position: absolute;
	pointer-events: none;
  /* 実際の位置に合わせて top, left, width を調整してください */
}
.mvBox .main-visual img.cta3 {
	pointer-events: auto;
}
.mvBox .main-visual a img:hover {
  opacity: 0.6;
}

/* 各要素の配置（仮の値です。実際の位置に合わせて調整してください） */
.copy    { top: 0px; left: 20px; width: 266px; }
.light   { top: 180px; left: 0px; width: 100%; z-index: 1; }
.bubbles { top: 180px; left: 0px; width: 100%; z-index: 2; }
.rabbit  { top: 320px; left: 15%; width: 75%; z-index: 3; }
.hamster { top: 445px; left: 10px; width: 150px; z-index: 4; }
.cta3 { top: 600px; right: 0px; width: 100%; z-index: 100; }
	
	
#Home .about{
		padding-top:0px;
	padding-bottom:70px;
		padding-left:20px;
		padding-right:20px;
}	
	
	#Home .about::before{
	background-image: url(http://tanomate.com/wp-content/uploads/2025/12/bg_home1_sp.jpg);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}
#Home .about h1{
	font-size: 30px;
	margin-top:40px;
	margin-bottom:10px;
}
#Home .about pre{
	font-size: 16px;
}
#Home .about p{
	font-size: 16px;
	line-height: 1.5;
	margin-top:20px;
}
	

#Home .howto{
	padding-left:15px;
	padding-right:15px;
}
	#Home .howto .inner{
	padding:30px 15px;
	background-color:#F3F3F3;
	border-radius:30px;
}
#Home .howto h2{
	font-size: 30px;
}
#Home .howto pre{
	font-size: 16px;
	margin-bottom:25px;
}
#Home .howto .column{
	background-color:#FFF;
	padding:20px 15px 0px 15px;
	border-radius:20px;
	margin-bottom:20px;
}
#Home .howto .column img{
	width:80%;
}
#Home .howto h3{
    font-size: 20px;
    background-size: 28px 32px;
    background-image: url(http://tanomate.com/wp-content/uploads/2025/12/step1-1.svg);
    padding-left: 32px;
    background-position: left top;
    padding-bottom: 5px;
    margin-bottom: 10px;
    line-height: 2;
}
#Home .howto p{
    font-size: 16px;
	font-weight:500;
	line-height:1.6;
}
	
	#Home .section3{
	padding-top:30px;
	padding-bottom:50px;
}
#Home .section3 h2{
	font-size: 23px;
	margin-top:30px;
	margin-bottom:20px;
	line-height:1.6;
}
#Home .section3 h2 strong{
	padding:0px 5px;
}
		#Home .section3 .cta{
			padding-left:15px;
			padding-right:15px;
}
	
	#Home .faq{
	padding-top:0px;
	padding-bottom:50px;
		padding-left:15px;
	padding-right:15px;
}
#Home .faq h2{
	font-size: 30px;
}
#Home .faq pre{
	font-size: 16px;
	margin-bottom:25px;
}
#Home .faq .qa{
	padding:5px 15px;
}
#Home .faq .smb-accordion__item__title {
	    background-size: 30px 30px;
    padding-left: 40px;
            background-position: left 7px;
}
#Home .faq .qa p {
	background-size: 30px 30px;
    padding-left: 40px;
    background-position: left 15px;
    padding-top: 15px;
    border-top: 1px solid #D6D6D6;
    margin-top: 10px;
}
.smb-accordion__item__body{
	padding:0px 0px;
}
svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
    color: #000000;
}
.svg-inline--fa {
    height: 1.3em;
}
	#Home .faq .btn {
	margin-top:40px;
}
	#Home .faq .btn a {
		 font-size: 16px;
	width: 290px;
}
	
	#Home .newsArea {
	padding-top:40px;
	padding-bottom:40px;
		padding-right:15px;
		padding-left:15px;
}
#Home .newsArea .inner {
	background-color:#FFF;
	padding:20px 15px;
	border-radius:20px;
}
#Home .newsArea h2{
	font-size: 30px;
}
#Home .newsArea pre{
	font-size: 16px;
	margin-bottom:25px;
}
#Home .newsArea .eyecatch {
	margin-bottom:10px;
}
		#Home .newsArea .btn {
	margin-top:40px;
}
	#Home .newsArea .btn a {
		 font-size: 16px;
	width: 290px;
}

#Home .ctaBn {
	margin-top:50px;
	margin-bottom:60px;
	padding-right:15px;
		padding-left:15px;
}
	
	
}