@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap");
*{font-family: "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
"BIZ UDPGothic",
Meiryo,
sans-serif;line-height: 1.7; color:#595757;}
h1,h2,h3,h4,h5,h6{font-family:"Zen Kaku Gothic New", sans-serif!important;}
body, .wp-site-blocks{background-color: #fff;}
.h4, .h5, .h6, h4, h5, h6, h3, .h3{font-weight:700!important;}
.h1, .h2, h1, h2{font-weight:900!important;}
.top-sub{font-size:13px; padding: 0; margin: 0;}
.has-global-padding{padding: 0;}
.font-automatic-kerning {
font-feature-settings: "palt";
}
small{font-size: .8rem!important;}
.text-orange{color:#ec9a29!important;}
.text-olive{color:#9ab87a!important;}
.text-blue{color:#1985a1!important;}
.text-gray{color:#86aba2!important;}
.text-brown{color:#bb641c!important;}
.text-navy{color:#1f2c62!important;}
.text-beige{color:#b28457!important;}
.wp-block-post-title a{color: #444; font-size:18px ;}
.taxonomy-category a{color: #B28457; border: solid #B28457 1px; padding: 2px 5px;}
.line-yellow{background-color: #fff291;}
.point-bg{background-color: #EC9A29; font-size:12px; padding: 2px 10px; color:#fff ;}
.bg-orange{background-color: #FCF8EB!important;}
.bg-olive{background-color: #f1f7ea!important;}
.bg-blue{background-color: #EEF8FB!important;}
.bg-brown{background-color: #eae3d8!important;}
.bg-orange2{background-color: #F9F8F4!important;}
.bg-white{background-color: #fff!important;}
.bg-yellow{background-color: #f7f4ea!important;}
.top-tel{color:#B28457; font-size: 1.5rem; font-weight:bold ;}
.sawarabi {
font-family: "Sawarabi Gothic", sans-serif!important;
font-weight: 400;
font-style: normal;
}
.lead-text{font-size: 1.2rem; line-height: 1.8;}
.news-list{ margin: 0; padding: 0;}
.news-list li{list-style: none; border-bottom: dotted 1px #999; padding-bottom: 15px; margin-bottom: 14px;}
.news-list .news_title{text-decoration: none; font-size: 14px;}
.news-list .news-cat{border: solid 1px #555; padding: 1px 2px; font-size: 0.7rem;}
.border-brown{border: #b1846f 1px solid!important;}
.wave-t, .wave-b{position: relative;}
.wave-b::before {
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 95px;
background: url(https://fujita-dent.com/wp-content/uploads/2024/05/mv_wave_top.png);
background-size: cover;
background-position: center;
z-index: 1;
content: "";
}
.ico_treatment{max-width: 100px!important; }
.ico_treatment2{max-width: 160px!important; }
.treatment-card {text-decoration: none; position: relative!important; }
.treatment-card::after{
position: absolute!important;
content: ""!important;
background: #333;
height: calc(tan(60deg) * 10px / 2);
width: 10px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
bottom:10px;
right: 0!important;
left: 0!important;
margin: 0 auto!important;
z-index: 99;
}
.scrolldown4-t{position: relative;} .scrolldown4{ position:absolute;
bottom:1%;
right:50%; animation: arrowmove 1s ease-in-out infinite;
} @keyframes arrowmove{
0%{
height:0;
top:-50px;
opacity: 0;
}
30%{
height:30px;
opacity: 1;
}
100%{
height:0;
top:0px;
opacity: 0;
}
} .scrolldown4 span{ position: absolute;
left:-20px;
bottom:10px; color: #B28457;
font-size: 0.7rem;
letter-spacing: 0.05em; -ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
} .scrolldown4:before {
content: ""; position: absolute;
bottom: 0;
right: -6px; width: 1px;
height: 20px;
background: #B28457;
transform: skewX(-31deg);
}
.scrolldown4:after{
content:""; position: absolute;
bottom:0;
right:0; width:1px;
height: 50px;
background:#B28457;
}
.max-640{max-width: 640px;}
.bg-sea{
background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/blue_bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
color: #fff!important;
}
.bg-sea h2, .bg-sea h3, .bg-sea p{color: #fff!important;}
.sea-border{border: solid 1px #fff; padding: .3rem 1rem; color: #fff!important;}
.fo-reqp{margin-bottom: 10px; font-weight: 700;}
.fo-req:after {
content: '必須';
font-size: 12px;
color: #fff;
background-color: #F18F10;
padding: 0 4px 1px;
border-radius: 4px;
margin-left: 8px;
}
.contact-form input:not([type='submit']):not([type='radio']), .contact-form select, .contact-form textarea{
width: 100%;
border: 1px solid #84919E;
border-radius: 4px;
font-size: 14px;
padding: 12px 29px 12px 15px;
box-sizing: border-box;
background-color: #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
}
.contact-form input{margin-bottom: 25px;}
.input-xlarge {
width: 240px;
margin: 0 auto;
background: #03AF7A;
color: #fff;
text-align: center;
border: none;
border-radius: 10px;
padding: .7rem 1rem;
}
.footer-list li{
list-style: none;
border-bottom: solid 1px #B28457;
padding: 10px 0;
}
.footer-list li a{text-decoration: none; color: #555;} 
.card2{background:#fff!important;}
.c-btn01{width: 100%;margin: 0 auto;}
.btn06{
position: relative;
text-decoration: none;
display: inline-block;
background:#333;
color:#fff;
padding: 20px 40px 20px 30px;
text-align: center;
outline: none;
transition: ease .2s;
border-radius: 1000px;
width: 100%;
background: #9ab87a;
color: #fff;
font-weight: 700;
font-size: 1.4rem;
}
.btn06:hover{
background:#555;
}
.btn06-2{
font-weight: 500;
font-size: 1rem;
padding: 15px 10px;
border-radius: 10px;
}
.btnarrow1::after{
content: '';
position: absolute;
top:43%;
right: 13px;
width: 10px;
height: 10px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
transition: all .3s;
}
.btnarrow1:hover::after{
right: 18px;
}
.fixed_web_tel_btn {
position: fixed;
right: 17px;
top: 0;
z-index: 9;
width: 60px;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}
.fixed_web_tel_btn a {
position: relative;
display: flex;
gap: 14px;
background: #1985a1;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
color: #fff;
width: 100%;
height: 200px;
padding: 15px 10px;
letter-spacing: 4px;
font-size: 1.2em;
font-weight: 600;
margin-bottom: 10px;
line-height: 1;
align-items: center;
justify-content: center;
text-shadow: none;
font-family: dnp-shuei-mgothic-std, sans-serif;
font-weight: 600;
font-style: normal;
border-radius: 30px;
text-decoration: none;
}
.fixed_web_tel_btn a.bt2 {
background: #ec9a29;}
.is-layout-constrained > .container {max-width: auto;}
.has-base-background-color {
background-color:#fff!important;
}
.wp-block-navigation.items-justified-right {
--navigation-layout-justification-setting: flex;
--navigation-layout-justify: flex;
}
.wp-block-navigation-link{display: block; text-align: center;}
.top-image{position: relative; margin: 0; padding: 0; background: #fff;}
.top-image::before {
position: absolute;
bottom: -1px;
width: 100%;
aspect-ratio: 1400 / 316;
background: url(https://fujita-dent.com/wp-content/uploads/2024/07/slider_bg1.png);
background-size: cover;
background-position: center;
z-index: 1;
content: "";
}
.siide-erea{ position: absolute; z-index: 1; bottom: 2rem;}
.slider-8{position: relative;}
.slider-8 .slick-slide {
width: 600px;
height: 600px;
position: relative;
overflow: hidden;
}
.slider-8 .slick-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-8{margin: 0; padding: 0;}
.siide-erea-box{background: #fff; color: #514940; padding: 5px;font-weight:800!important; font-family:"Zen Kaku Gothic New", sans-serif!important;}
.siide-erea h2{line-height: 1.6; font-size: 3rem;font-weight:800!important; font-family:"Zen Kaku Gothic New", sans-serif!important;}
.slider-9{position: relative;}
.slider-9 .slick-slide {
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
.slider-9 .slick-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-9{margin: 0; padding: 0;}
.info-erea-time-bg{ background-color: #FCF8EB; padding: 1.5rem; border-radius: 15px;}
.info-erea-time{width: 100%; table-layout: fixed; margin-bottom: 1rem;}
.info-erea-time th{font-weight: normal;}
.info-erea-time thead,.info-erea-time thead th {font-weight: bold;}
.info-erea-time th, .info-erea-time td{box-sizing: border-box; text-align: center; padding: .8rem 0;}
.info-erea-time th:first-of-type{ width: 30%; }
.info-erea-time tbody tr:first-of-type { border-top:solid 1px #efddb8!important;}
.info-erea-time tbody tr:last-of-type { border-bottom:solid 1px #efddb8!important;}
.card2, .card{
overflow: hidden;
outline: none;  
transition: ease .2s;
}
.card2, .card{
position: relative;
z-index: 3; color:#333;
}
.card2:hover, .card:hover{
color:#333;
}
.bgbottom{transition: transform 0.5s;}
.bgbottom:hover {
transform: translateY(-10px);
}
.contact-footer{
text-align: center;
}
.contact-tel{
padding: 6rem 0;
background-image: url(https://fujita-dent.com/wp-content/uploads/2024/07/footer-bg1.jpg);
background-size:cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
position: relative;
color:#fff!important;
}
.contact-tel h2, .contact-tel p{
color:#fff!important;
}
.postlist_ul{list-style: none; padding: 0; margin: 0;}
.info a{text-decoration: none;}
.info a:hover{opacity: .7;}
.postlist_cat{font-size: .7rem; border: solid 1px #595757; background:#fff; padding: 1px 6px;}
.postlist_li{padding-bottom: 1rem;}
.footer-tel, .info-erea-tel, .footer-tel a{font-size: 2.4rem; line-height: 1; font-weight: bold; color:#fff!important; }
.footer-contact-btn{background: #fff; border: solid 1px #aaa; padding: 1rem 2.5rem; text-decoration: none; color:#333; margin-top: 1rem; display: block; }
.info-erea-tel::before{ content: ""; display: inline-block; background-image:url(https://fujita-dent.com/wp-content/uploads/2024/05/phone_in_talk_40dp_FILL0_wght400_GRAD0_opsz40.png); width: 40px; height: 35px; background-repeat: no-repeat; background-clip: border-box; background-size: cover;}
.about-bg1{position: relative;}
.about-bg1 .about-bg1-icon {
position: absolute;
bottom: -20px;
left:0;
z-index: 1;
content: "";
width: 160px;
}
.star{position: relative;}
.star img{
position: absolute;
top: -20px;
right:0;
z-index: 1;
}
.points{position: relative;}
.points img{
position: absolute;
top: -60px;
right:0;
z-index: 1;
}
.footer-menu{border-top: solid 1px #B28457; padding-top: 3rem; padding-bottom: 1rem;}
footer.wp-block-template-part{display: none;}
.p-title{
height: 280px;
background-color:#F7F4EA ;
position: relative;
margin-bottom: 50px;
}
.p-title-p{
position: absolute;
bottom: -20px;
z-index: 1;
display: block;
}
.h3-title{position: relative; padding-left: 32px; border-bottom: 1px solid #b28457; padding-bottom: 10px; margin-bottom: 1rem;}
.h3-title::before {
content: "";
position: absolute;
top: 10px;
left: 0;
width: 14px;
height: 14px;
border: 4px solid #b28457;
border-radius: 50%;
box-sizing: border-box;
}
.h4-title{position: relative; padding-left: 32px;}
.h4-title::before {
content: "";
position: absolute;
top: 6px;
left: 0;
width: 14px;
height: 14px;
border: 4px solid #b28457;
border-radius: 50%;
box-sizing: border-box;
}
.h2-title{position: relative; text-align: center; padding-bottom: 20px;}
.h2-title::before {
content: ''; position: absolute;
bottom: 0;
left: 45%; width: 10%;
height: 4px;
background:#b28457; transition: all .3s;
transform: scale(1, 1); transform-origin: center top; }
.title-gray::before {border: 4px solid #87ABA3;}
.title-navy::before {border: 4px solid #202C62;}
.title-blue::before {border: 4px solid #1785A1;}
.title-olive::before {border: 4px solid #99B87A;} .title-about{ background-image: url(https://fujita-dent.com/wp-content/uploads/2024/07/about_bg.jpg); background-position: center center; background-size: cover; }
.title-base1{background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/base_bg1.jpg); background-position: center center; background-size: cover;}
.title-base2{background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/base_bg2.jpg); background-position: center center; background-size: cover;}
.title-base3{background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/base_bg3.jpg); background-position: center center; background-size: cover;}
.title-base4{background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/base_bg4.jpg); background-position: center center; background-size: cover;}
.title-base5{background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/base_bg5.jpg); background-position: center center; background-size: cover;}
.title-base6{background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/base_bg6.jpg); background-position: center center; background-size: cover;}
.title-base7{background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/base_bg7.jpg); background-position: center center; background-size: cover;}
.title-base8{background-image: url(https://fujita-dent.com/wp-content/uploads/2024/08/base_bg8.jpg); background-position: center center; background-size: cover;}
.p-contents{padding-bottom: 5rem;}
.p-contents-w{padding-bottom: 7rem; padding-top: 7rem;}
.breadcrumb li{ font-size: 12px; padding-right: 8px; }
.breadcrumb li:not(:first-child)::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin: 0 9px 1px 2px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
}
.breadcrumb li a{color: #514940;}
.treatment-border{ border: #a38d70 solid 1px; border-radius: 20px; padding: 3rem; background-color: #fff; position: relative;}
.treatment-border img{  position: absolute;top:-50px; right:0; width: 80px; z-index: 1;}
.treatment-border2{ border: #a38d70 solid 1px; border-radius: 20px; padding: 3rem; background-color: #fff; position: relative;}
.correct-merit__item-num {
position: absolute;
top: -8px;
left: 0px;
display: grid;
place-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
border: 1px dashed #B28457;
font-size: 1.6rem;
z-index: 1;
}
.br-pc{display: none;}
.upclick{cursor:pointer; margin: 2.5rem 0;}
.upclick img {
height: auto;
transition: transform .6s ease;
margin-bottom: 10px;
}
.upclick:hover img {transform: scale(1.1);}
.upclick-text{position: relative; padding-right: 20px; font-weight: 700;}
.upclick-text::before {
content: '';
width: 18px;
height: 18px;
background: #86ABA2;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.upclick-text::after {
content: '';
width: 6px;
height: 6px;
border: 0;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 6px;
bottom: 0;
margin: auto;
}
.p-5p {
padding: 3rem !important;
}
.c-list-check01{padding: 0; margin: 0;}
.c-list-check01__item {
position: relative;
padding: 12px;
border-bottom: 1px solid #d1cbbc;
display: flex;
align-items: center;
list-style: none;
}
.c-list-check01__item::before {
content: "";
display: inline-block;
min-width: 25px;
height: 25px;
background: url(https://fujita-dent.com/wp-content/uploads/2024/08/checkbox1.png) no-repeat center / contain;
margin-right: 15px;
}
.faq-list{border-bottom: solid 1px  #d1cbbc; padding: 28px 0 20px 0;} 
.faqq, .faqa{position: relative; padding-left: 45px;}
.faqq{font-weight: 700;}
.faqq:before{
content: "Q.";
position: absolute;
top: 0.3em;
left: calc(20px - 0.5em);
color: #a3a3a3;
font-size: 1.125em;
text-align: center;
font-weight: 500;
line-height: 1;
}
.faqa:before{
content: "A.";
position: absolute;
top: 0.3em;
left: calc(20px - 0.5em);
color: #a3a3a3;
font-size: 1.125em;
text-align: center;
font-weight: 500;
line-height: 1;
}
@media (min-width: 768px) {
.correct-merit__item-num {
top: -18px;
left: -20px;
width: 76px;
height: 76px;
font-size: 2rem;
}
.treatment-border{padding-left: 180px;}
.treatment-border img{
position: absolute;
top:auto;
bottom: 0px;
left:10px;
width: 140px;}
} #open-chatbot{
position: fixed;
bottom: .8rem;
right: .8rem;
z-index: 9999;
border: none!important;
background: none;
}
#open-chatbot img{width: 140px;}
@media (max-width: 768px) {
.points img{top:-80px;}
.p-5p {
padding: 3rem 1.5rem!important;
}
#open-chatbot{bottom: 80px;}
#open-chatbot img{width: 100px;}
.siide-erea {bottom: 4rem;}
}
@media (min-width: 576px){
header.wp-block-template-part, footer.wp-block-template-part  {
max-width: 540px;}
}
@media (min-width: 768px){
header.wp-block-template-part, footer.wp-block-template-part  {
max-width: 720px;}
}
@media (min-width: 992px){
header.wp-block-template-part, footer.wp-block-template-part  {
max-width: 960px;}
}
@media (min-width: 1200px){
header.wp-block-template-part, footer.wp-block-template-part  {
max-width: 1140px;}
}
@media (min-width: 1400px){
header.wp-block-template-part, footer.wp-block-template-part {
max-width: 1320px;}
}
header.wp-block-template-part, footer.wp-block-template-part {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x)* .5);
padding-left: calc(var(--bs-gutter-x)* .5);
margin-right: auto;
margin-left: auto;}
@media (min-width: 768px) {
.c-btn01 {
max-width: 400px;
}
}
@media screen and (max-width:576px) {
.siide-erea h2{line-height: 1.8; font-size: 2.4rem;}
.top-image::before {
aspect-ratio: 844 / 316;
background: url(https://fujita-dent.com/wp-content/uploads/2024/07/slider_bg2.png);
background-size: cover;
background-position: center;
}
.br-sp{display: none;}
.br-pc{display: block;}
.lead-text{font-size: 1rem; line-height: 1.6;}
.fixed_web_tel_btn{bottom:10px; width: 100%;right:auto; height: auto; display: flex; top:auto; text-align: center;}
.fixed_web_tel_btn a{writing-mode: horizontal-tb;-webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; height: auto; display: inline; width: 45%;}
.wp-block-navigation-link a{ border-bottom: solid 1px #555; padding-bottom: 10px!important;}
}  .fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeInAnime{
from {
opacity: 0;
}
to {
opacity: 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);
}
} .fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
} .fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
} .fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
opacity: 0;
}  .flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes flipDownAnime{
from {
transform: perspective(2500px) rotateX(100deg);
opacity: 0;
}
to {
transform: perspective(2500px) rotateX(0);
opacity: 1;
}
} .flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}
@keyframes flipLeftAnime{
from {
transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
opacity: 0;
}
to {
transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
opacity: 1;
}
} .flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes flipLeftTopAnime{
from {
transform: translate(-20px,80px) rotate(-15deg);
opacity: 0;
}
to {
transform: translate(0,0) rotate(0deg);
opacity: 1;
}
} .flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}
@keyframes flipRightAnime{
from {
transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
opacity: 0;
}
to {
transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
opacity: 1;
}
} .flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes flipRightTopAnime{
from {
transform: translate(-20px,80px) rotate(25deg);
opacity: 0;
}
to {
transform: translate(0,1) rotate(0deg);
opacity: 1;
}
} .flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
opacity: 0;
}  .rotateX{
animation-name:rotateXAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes rotateXAnime{
from{
transform: rotateX(0);
opacity: 0;
}
to{
transform: rotateX(-360deg);
opacity: 1;
}
} .rotateY{
animation-name:rotateYAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes rotateYAnime{
from{
transform: rotateY(0);
opacity: 0;
}
to{
transform: rotateY(-360deg);
opacity: 1;
}
} .rotateLeftZ{
animation-name:rotateLeftZAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes rotateLeftZAnime{
from{
transform: rotateZ(0);
opacity: 0;
}
to{
transform: rotateZ(-360deg);
opacity: 1;
}
} .rotateRightZ{
animation-name:rotateRightZAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes rotateRightZAnime{
from{
transform: rotateZ(0);
opacity: 0;
}
to{
transform: rotateZ(360deg);
opacity: 1;
}
} .rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
opacity: 0;
}  .zoomIn{
animation-name:zoomInAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}
@keyframes zoomInAnime{
from {
transform: scale(0.6);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
} .zoomOut{
animation-name:zoomOutAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}
@keyframes zoomOutAnime{
from {
transform: scale(1.2);
opacity: 0;
}
to {
transform:scale(1);
opacity: 1;
}
} .zoomInTrigger,
.zoomOutTrigger{
opacity: 0;
}  .blur{
animation-name:blurAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes blurAnime{
from {
filter: blur(10px);
transform: scale(1.02);
opacity: 0;
}
to {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
} .blurTrigger{
opacity: 0;
}  .smooth{
animation-name:smoothAnime;
animation-duration:1s;
animation-fill-mode:forwards;
　transform-origin: left;
opacity:0;
}
@keyframes smoothAnime{
from {
transform: translate3d(0, 100%, 0) skewY(12deg);
opacity:0;
}
to {
transform: translate3d(0, 0, 0) skewY(0);
opacity:1;
}
} .smoothTrigger{
opacity: 0;
}  .lineTrigger{
position: relative; opacity:0;
}
.lineTrigger.lineanime{
animation-name:lineAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes lineAnimeBase{
from {
opacity:0;
}
to {
opacity:1;  
}
} .lineTrigger::before,
.lineTrigger::after{
position: absolute;
content:"";
width:0;
height:1px;
background:#333; } .line2::before,
.line2::after{
position: absolute;
content:"";
width: 1px;
height:0;
background:#333; } .lineTrigger::before {
top:0;
left:0;
}
.lineTrigger.lineanime::before {
animation: lineAnime .5s linear 0s forwards; } .line2::before{ 
top:0;
right:0;
}
.lineTrigger.lineanime .line2::before {
animation: lineAnime2 .5s linear .5s forwards; } .lineTrigger::after { 
bottom:0;
right:0;
}
.lineTrigger.lineanime::after {
animation: lineAnime .5s linear 1s forwards; } .line2::after{ 
bottom:0;
left:0;
}
.lineTrigger.lineanime .line2::after {
animation: lineAnime2 .5s linear 1.5s forwards; }
@keyframes lineAnime {
0% {width:0%;}
100%{width:100%;}
}
@keyframes lineAnime2 {
0% {height:0%;}
100%{height:100%;}
} .lineTrigger.lineanime .lineinappear{
animation: lineInnerAnime .5s linear 1.5s forwards; opacity: 0; }
@keyframes lineInnerAnime{
0% {opacity:0;}
100% {opacity:1;}
}  .bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden; opacity:0;
}
@keyframes bgextendAnimeBase{
from {
opacity:0;
}
to {
opacity:1;  
}
} .bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} .bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666; }
@keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
} .bgRLextend::before{
animation-name:bgRLextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666; }
@keyframes bgRLextendAnime{
0% {
transform-origin:right;
transform:scaleX(0);
}
50% {
transform-origin:right;
transform:scaleX(1);
}
50.001% {
transform-origin:left;
}
100% {
transform-origin:left;
transform:scaleX(0);
}
} .bgDUextend::before{
animation-name:bgDUextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666; }
@keyframes bgDUextendAnime{
0% {
transform-origin:bottom;
transform:scaleY(0);
}
50% {
transform-origin:bottom;
transform:scaleY(1);
}
50.001% {
transform-origin:top;
}
100% {
transform-origin:top;
transform:scaleY(0);
}
} .bgUDextend::before{
animation-name:bgUDextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #666; }
@keyframes bgUDextendAnime{
0% {
transform-origin:top;
transform:scaleY(0);
}
50% {
transform-origin:top;
transform:scaleY(1);
}
50.001% {
transform-origin:bottom;
}
100% {
transform-origin:bottom;
transform:scaleY(0);
}
} .bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
opacity: 0;
}  .count2{  
animation-iteration-count: 2; }
.countinfinite{  
animation-iteration-count: infinite; } .delay-time05{  
animation-delay: 0.5s;
}
.delay-time1{  
animation-delay: 1s;
}
.delay-time15{  
animation-delay: 1.5s;
}
.delay-time2{  
animation-delay: 2s;
}
.delay-time25{  
animation-delay: 2.5s;
} .change-time05{  
animation-duration: 0.5s;
}
.change-time1{  
animation-duration: 1s;
}
.change-time15{  
animation-duration: 1.5s;
}
.change-time2{  
animation-duration: 2s;
}
.change-time25{  
animation-duration: 2.5s;
}