﻿/*===========================================================*/
/* 個別 */
/*===========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP:wght@500&display=swap');
body{font-family: 'Montserrat',"Noto Sans JP","Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "YuGothic M", meiryo, sans-serif;}
.f_contact_btn{display: none;}
.footer_contact .f_contact_box h4{line-height: 1.5;}
.cms_6-a .cate_box:first-of-type{flex-direction: row-reverse;background-color: #f7cc38;}
#con3 .box:nth-of-type(1) .con_no{
   text-shadow: 2px 2px 0 #d94352, -2px 2px 0 #d94352, 2px -2px 0 #d94352, -2px -2px 0 #d94352, 2px 0px 0 #d94352, 0px 2px 0 #d94352, -2px 0px 0 #d94352, 0px -2px 0 #d94352, 0 5px 0 #d94352, -2px 7px 0 #d94352, 2px 7px 0 #d94352;
}
#con3 .box:nth-of-type(2) .con_no{
    text-shadow: 2px 2px 0 #F7CC38, -2px 2px 0 #F7CC38, 2px -2px 0 #F7CC38, -2px -2px 0 #F7CC38, 2px 0px 0 #F7CC38, 0px 2px 0 #F7CC38, -2px 0px 0 #F7CC38, 0px -2px 0 #F7CC38, 0 5px 0 #F7CC38, -2px 7px 0 #F7CC38, 2px 7px 0 #F7CC38;
}
#con3 .box:nth-of-type(3) .con_no{
    text-shadow: 2px 2px 0 #43D9C5, -2px 2px 0 #43D9C5, 2px -2px 0 #43D9C5, -2px -2px 0 #43D9C5, 2px 0px 0 #43D9C5, 0px 2px 0 #43D9C5, -2px 0px 0 #43D9C5, 0px -2px 0 #43D9C5, 0 5px 0 #43D9C5, -2px 7px 0 #43D9C5, 2px 7px 0 #43D9C5;
}
#main_img{
    padding-top: 0;
    position: relative;
    background-image: url(Dup/img/main_img.jpg);
}
.topTxt1 {
    padding: 21px 25px 21px;
    display: block;
    width: 50%;
    margin: 0 auto;
}
#con1 h2,#con2 .con2_title,#con3 h3.con3_title,#topCms .cmstitle h3{
    text-shadow: 4px 4px 0 #333333, 2px -2px 0 #333333, 1px -2px 0 #333333, -2px -2px 0 #333333, 2px 2px 0 #333333, 0px 2px 0 #333333, -2px 2px 0 #333333, 3px 6px 0 #333333, 4px 4px 0 #333333, 5px 2px 0 #333333, 4px 5px 0 #333333;
    letter-spacing: 5px;
    position: relative;
    display: inline-block;
}


#con3 .box{
    position: relative;
        border: 2px solid;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
}
.cms_6-a .cate_box:last-of-type{background-color: #43d9c5;}
.cms_6-a .more_btn a{
    border-radius: 50px;
    background-color: rgb(255 255 255);
    color: #000;
    box-shadow: 0 5px 0 #343434;
    transition: 0.3s;
}
.cms_6-a .more_btn a:hover{
    box-shadow: 0 0 0 #343434;
    transform: translateY(5px);
}
.f_contact_box{border: 2px solid;}
.f_contact_box .tel a{color: #D94352;}

.c-btn{
    background-color: #d94352;
    color: #fff;
    box-shadow: 0 5px 0 #343434;
    transition: 0.3s;
}
.c-btn i{color: #fff;}
.c-btn:hover{box-shadow: 0 0 0 #343434;transform: translateY(5px);}
.sankaku{
    transform: translate(-50%,-50%);
    width: 50px;
}
.sankaku01{left: -50px;top: 10px;}
.sankaku02{right: -80px;top:10px;}
.sikaku{
    width: 150px;
    height: 150px;
    border-radius: 10px;
    left: 10%;
    top: 15%;
}
.zigzag::after{
content: "";
    position: absolute;
    background: linear-gradient(
45deg, #f7f7f7 50%, transparent 52%), linear-gradient(
315deg, #f7f7f7 50%, transparent 52%);
    background-size: 30px 30px;
    height: 14px;
    width: 100%;
    bottom: 0;
}
.zigzag.zigzag2{
    bottom: inherit;
    top: 0;
    transform: scaleY(-1);
}
.menu_btn.stick_trans span:last-child{margin-top: -3px;}
/*===========================================================*/
/* catch */
/*===========================================================*/
.catch{
    max-width: 1000px;
    height: 30vw;
    width: 60%;
    z-index: 2;
    left: 30%;
    top: 45%;
}
.catch .txt1{
    position: absolute;
    top: 10%;
    left: 31%;
    z-index: 1;
    max-width: 300px;
    width: 35%;
}
.catch .txt2{
    top: 32%;
    left: 7%;
    z-index: 1;
    max-width: 400px;
    width: 40%;
    position: absolute;
}
.catch .txt3{
    top: 32%;
    left: 51%;
    z-index: 1;
    max-width: 400px;
    width: 40%;
    position: absolute;
}
.catch .txt4{
    top: 60%;
    left: 22%;
    z-index: 1;
    max-width: 550px;
    width: 60%;
    position: absolute;
}

.delay-time02 {
    animation-delay: 0.2s;
}
.delay-time03 {
    animation-delay: 0.3s;
}
.delay-time04 {
    animation-delay: 0.4s;
}
.delay-time05 {
    animation-delay: 0.5s;
}
.delay-time06 {
    animation-delay: 0.6s;
}
.delay-time09 {
    animation-delay: 0.9s;
}
@keyframes bounceOut{
    20% {
    -webkit-transform: scale3d(.9,.9,.9)translate(-50%,-50%);
    transform: scale3d(.9,.9,.9)translate(-50%,-50%);
}
50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1,1.1,1.1)translate(-50%,-50%);
    transform: scale3d(1.1,1.1,1.1)translate(-50%,-50%);
}
100% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3)translate(-50%,-50%);
    transform: scale3d(.3,.3,.3)translate(-50%,-50%);
}
}
.bounceInTrigger, .fadeInUpTrigger {
    opacity: 0;
}

.fadeUpTrigger,.scaleUpTrigger{
opacity: 0;
}
.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);
}
}
.scaleUp {
    animation-name: scaleAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes scaleAnime{
from {
    opacity: 0;
    transform: scale(0);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
 /*===========================================================*/
/* ページタイトルアニメーション */
/*===========================================================*/
.cmstitle h3 > span{
     display: inline-block;
     -webkit-transform: translateY(20px);
     transform: translateY(20px);
     -webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     opacity: 0;
}
.cmstitle h3 > span:nth-child(1){
-webkit-transition-delay: 200ms;transition-delay: 200ms;
-webkit-animation-delay: 200ms;animation-delay: 200ms;
}
.cmstitle h3 > span:nth-child(2){
-webkit-transition-delay: 250ms;transition-delay: 250ms;
-webkit-animation-delay: 250ms;animation-delay: 250ms;
}
.cmstitle h3 > span:nth-child(3){
-webkit-transition-delay: 300ms;transition-delay: 300ms;
-webkit-animation-delay: 300ms;animation-delay: 300ms;
}
.cmstitle h3 > span:nth-child(4){
-webkit-transition-delay: 350ms;transition-delay: 350ms;
-webkit-animation-delay: 350ms;animation-delay: 350ms;
}
.cmstitle h3 > span:nth-child(5){
-webkit-transition-delay: 400ms;transition-delay: 400ms;
-webkit-animation-delay: 400ms;animation-delay: 400ms;
}
.cmstitle h3 > span:nth-child(6){
-webkit-transition-delay: 450ms;transition-delay: 450ms;
-webkit-animation-delay: 450ms;animation-delay: 450ms;
}
.cmstitle h3 > span:nth-child(7){
-webkit-transition-delay: 500ms;transition-delay: 500ms;
-webkit-animation-delay: 500ms;animation-delay: 500ms;
}
.cmstitle h3 > span:nth-child(8){
-webkit-transition-delay: 550ms;transition-delay: 550ms;
-webkit-animation-delay: 550ms;animation-delay: 550ms;
}
.cmstitle h3 > span:nth-child(9){
-webkit-transition-delay: 600ms;transition-delay: 600ms;
-webkit-animation-delay: 600ms;animation-delay: 600ms;
}
.cmstitle h3 > span:nth-child(10){
-webkit-transition-delay: 650ms;transition-delay: 650ms;
-webkit-animation-delay: 650ms;animation-delay: 650ms;
}
.cmstitle h3 > span:nth-child(11){
-webkit-transition-delay: 700ms;transition-delay: 700ms;
-webkit-animation-delay: 700ms;animation-delay: 700ms;
}
.cmstitle h3 > span:nth-child(12){
-webkit-transition-delay: 750ms;transition-delay: 750ms;
-webkit-animation-delay: 750ms;animation-delay: 750ms;
}
.cmstitle h3 > span:nth-child(13){
-webkit-transition-delay: 800ms;transition-delay: 800ms;
-webkit-animation-delay: 800ms;animation-delay: 800ms;
}
.cmstitle h3 > span:nth-child(14){
-webkit-transition-delay: 850ms;transition-delay: 850ms;
-webkit-animation-delay: 850ms;animation-delay: 850ms;
}
.cmstitle h3 > span:nth-child(15){
-webkit-transition-delay: 900ms;transition-delay: 900ms;
-webkit-animation-delay: 900ms;animation-delay: 900ms;
}

.cmstitle h3.is-show > span
{
     -webkit-animation-name: slide-bs;
     animation-name: slide-bs;
     opacity: 1;
}
@keyframes slide-bs{
     0%{-webkit-transform: translateY(20px);transform: translateY(20px);}
     100%{-webkit-transform: translateY(0);transform: translateY(0);}
}











/*===========================================================*/
/* 下層 */
/*===========================================================*/
.pagetitle_img{mix-blend-mode: inherit;}
.cate_list li a{
    background-color: #d94352;
    color: #fff;
}
.cate_list li a:hover{
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    transition: 0.6s;
}


/*===========================================================*/
/* タブレット */
/*===========================================================*/
@media screen and (max-width: 768px){
#con1 .fadeUpTrigger, #con1 .scaleUpTrigger{opacity: 1;}

}



/*===========================================================*/
/* スマホ */
/*===========================================================*/
@media screen and (max-width: 667px){
.topTxt1 {
    padding: 21px 21px 21px;
    width: 100%;
    box-sizing: border-box;
}
.sankaku01 {
    left: -30px;
    top: -10px;
    width: 40px;
}
.sankaku02 {
    right: -60px;
    top: -10px;
    width: 40px;
}
#con1 h2{font-size: 24px;}
.footer_contact .f_contact_box h4{font-size: 40px;}
.f_contact_box {
    padding: 60px 15px;
}
.catch{top: 50%;}



}


/*===========================================================*/
/* IE */
/*===========================================================*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){
#body{overflow: hidden!important;}
#con3 h3 .sl{
    position: relative;
    top: 15px;
    padding-right: 0;
    padding-left: 0;
}
#con3 h3 .sl img{width: 80px;}
.cms_6-a .cate_box{
    align-items: center;
  }


}


/*===========================================================*/
/* Firefox */
/*===========================================================*/
@-moz-document url-prefix(){

}