@charset "utf-8";


/* -------------------------- Animation CSS -------------------------- */

/* animation:fadeup */
.fdup_trigger {opacity: 0;}
.fdup_active {
  animation: fadeup 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* animation:fadein */
.fdin_trigger {opacity: 0;}
.fdin_active {
  animation: fadeIn 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* animation:txtsmooth */
.ttsm_trigger {
  clip-path: inset(0 100% 0 0);
  transition: 1.5s cubic-bezier(0.45, 0, 0.55, 1);
  transition-property: clip-path;
}
.ttsm_trigger.ttsm_active {
  clip-path: inset(0);
}

/* animation:merker_yellow */
.mkey_trigger {
  background:linear-gradient(transparent 50%, rgb(255, 228, 155) 40%);
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:background-size 2s;
}
.mkey_active {
  background-size: 100% 100%;
}

/* animation:merker_blue */
.mkeb_trigger {
  background:linear-gradient(transparent 50%, rgb(190, 201, 248) 40%);
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:background-size 2s;
}
.mkeb_active {
  background-size: 100% 100%;
}

/* animation:merker_red */
.mker_trigger {
  background:linear-gradient(transparent 50%, rgb(249, 179, 255) 40%);
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:background-size 2s;
}
.mker_active {
  background-size: 100% 100%;
}

/* animation:UnderLine Red */
.ulnr_trigger {
  display: inline-block;
  padding-bottom: 4px;
  position: relative;
}
.ulnr_trigger::after {
  background-color: tomato;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  transition: 0.5s all;
  width: 0;
}
.ulnr_active::after {
  width: 100%;
  left: 0;
}

/* animation:UnderLine Blue */
.ulnb_trigger {
  display: inline-block;
  padding-bottom: 4px !important;
  position: relative;
}
.ulnb_trigger::after {
  background-color: #097211;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  transition: 1s all;
  width: 0;
}
.ulnb_active::after {
  width: 100%;
  /* left: 0; */
  /* right: 0; */
  left: 50%;
  transform: translateX(-50%);
}

/* animation:Text Link */
.link_trigger {
    padding: 5px;
	color: #4D98BF !important;
    background-image: linear-gradient(#4D98BF, #4D98BF);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 100%;
    transition: color 0.5s, background-size 0.5s;
}
.link_trigger:hover {
    color: #FFF !important;
	text-decoration: none !important;
    background-position: bottom left;
    background-size: 100% 100%;
}

/* animation:Square Symbol */
.blck_trigger {
  /* background: linear-gradient(to right, #097211 0%,#0077b6 100%); */
  background-image: linear-gradient(90deg, rgba(9, 114, 17, 1), rgba(247, 252, 132, 1));
  width: 40px;
  height: 40px;
  opacity: 0;
  display: inline-block;
  position: absolute;
}
.blck_active {
  animation: kurukuru 1.4s ease-out;
  opacity: 1;
}
@keyframes kurukuru {
  0%{
    transform: rotateY(0) translateY(40px);
    opacity: 0;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}

/* animation:Button */
@keyframes tlpr_btn {
0%{transform:scale(.95); opacity:1}
90%{opacity:.1}to{transform:scale(1.2,1.5); opacity:0}
}
.tlpr_btn {
  position: relative;
  width: 80%;
  margin: 0 auto 4em;
  transition: .2s;
}
.tlpr_btn:before,
.tlpr_btn:after {
  content: "";
  position: absolute;
  z-index: -10;
  width: 100%;
  height: 100%;
  top: 3px;
  left: 0;
  border-radius: 32px;
  background: #ffaaae;
  border: 1px solid #ff999e;
  transform: translate3d(0,0,0);
}
.tlpr_btn:before { animation: tlpr_btn 2s ease-out infinite; }
.tlpr_btn:after { animation: tlpr_btn 2s ease-out 1s infinite; }
.tlpr_btn a {
  display: block;
  position: relative;
  top: 3px;
  padding: 20px 0;
  border-radius: 32px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #80120d;
  font-size: 1.5em;
}
.tlpr_btn a:after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #c81c14;
  border-radius: 32px;
  transition: .2s;
  transform: translate3d(0,0,0);
}
.tlpr_btn span {
  display: block;
  position: relative;
  top: -3px;
  z-index: 2;
  font-family: sans-serif;
  transition: .2s;
}
.tlpr_btn span:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  width: 8px;
  height: 8px;  
  margin: -4px 0 0 0;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: translateX(5px) rotate(45deg);
  transition: .3s .1s;
}
.tlpr_btn a:hover {
  top: 3px;
  color: #fff !important;
  text-decoration: none !important;
}
.tlpr_btn a:hover:after {
  top: 0;
  background: #e00e18;
}
.tlpr_btn a:hover span { top: 0; }
.tlpr_btn a:hover span:after { right: 27px; }








































/* -------------------------- TownLife Pr Page Origin CSS -------------------------- */
.float_r {
  float: right;
}
.float_l {
  float: left;
}
.tlpr_pagehd {
  margin-bottom: 2em;
}
.pr_townlife_cont {
	/* font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; */
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	margin: 0;
	color: #333;
}
.cta-btn {
	display: inline-block;
	margin-top: 30px;
	padding: 15px 40px;
	background: #ff6b6b;
	color: white;
	font-size: 1.2rem;
	border-radius: 50px;
	text-decoration: none;
	transition: 0.3s;
}
.cta-btn:hover {
	background: #ff4757;
	transform: scale(1.05);
}
.pr_tl_div {
	max-width: 900px;
	margin: 1.5em 1em 2em;
	padding: 1.5em;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.pr_tl_img {
  max-width: 50% !important;
  margin: 0.4em 0.8em !important;
}
.pr_tl_sec h3 {
	font-size: 1.8rem;
	margin: 0 0 0 1em;
	color: #097211;
	font-family: "Shippori Mincho B1", serif;
	font-weight: 700;
	font-style: normal;
}
.pr_cont_title {
	position: relative;
	margin-left: 1em;
}
.pr_cont_title .pr_cn_ttl_txt {
	padding-left: 1.6em;
}
.tlpr_page_card {
  color: #333333;
  border-radius: 3px;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
  margin-bottom: 1.5em;
}
.tlpr_bnr_link {
  text-align: center;
  margin-bottom: 2em;
}

@media (max-width: 768px) {
  .ulnr_trigger { color: tomato; }
  .ulnr_trigger::after {
    background-color:transparent;
    display: none;
  }
  .ulnr_active::after {
    position:static;
  }
  .blck_trigger {
    width: 23px;
    height: 23px;
  }
  .tlpr_btn { width: 90%; }
  .tlpr_btn a { font-size: 1.1em; };
  .pr_tl_div {
    font-size: 0.9em;
    line-height: 0.9em;
  }
  .pr_tl_div .cardlink_thumbnail { display: none; }
  .pr_tl_img {
    width: 100% !important;
    max-width: 100% !important;
  }
  .pr_tl_sec h3 {
    font-size: 1.2em !important;
    line-height: 1.2em;
  }
  .pr_cont_title .pr_cn_ttl_txt {
	  padding-left: 1.4em;
  }
  .pr_tl_div {
    margin: 1.5em 0.1em 2em;
    padding: 0.8em;
  }





}