/* ---------- font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

.font_15 {
    font-size: 16px;
}
body, .font_bold {
  /*font-family: 'Zen Maru Gothic', sans-serif;*/
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
 overflow: hidden;
}
/* 
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@500&family=Zen+Kaku+Gothic+New:wght@500;900&display=swap');

:root{
    --font-jp: 'Zen Kaku Gothic New', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    --font-en: 'Jost', 'Zen Kaku Gothic New', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
body, .font_sans-serif, .font_serif{
    font-family: var(--font-jp);
}
.font_en, a[href^="tel:"]{
    font-family: var(--font-en);
}
 */
/* ---------- color ---------- */



/* ---------- all ---------- */
#pagetop{z-index: 1;}
.logo1{
    max-width: 159px;
}
#fakeloader:before{
    display: none;
}
#fakeloader, .pagetitle, .f_contact_img {
    background-image: url(../img/load_bg.png) !important;
    background-size: 800px;
    background-position: top 0 left 0;
    background-repeat: repeat;
    animation: bgloop 50s 
linear infinite;
}
@keyframes bgloop {
	0% {background-position: top 0 left 0;}
	100% {background-position: top -863px left 863px;}
}
#fakeloader .fl{
    max-width: 326px;
}
#page1{
    min-width: 1100px;
}
.title {
    font-weight: 500;
}
#top_link a:hover, .moreBtn_wrap:hover, #con3 .linkBtn:hover, #con3 .yoyaku_btn:hover,#fix_bnr a:hover{
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-animation: easeOutBounce .6s;
    animation: easeOutBounce .6s;
}

/* ---------- cursor ---------- */

.cursor{
width: 8px;
height: 8px;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999;
transition: 0.3s;
transition-property: opacity,background,width,height,transform;
}
.cursor::before{
content: " ";
display: block;
width: 60px;
height: 60px;
position: relative;
top: -22px;
left: -18px;
opacity: 1;
transition: 0.3s;
background-image: url("../img/cursor.png");
background-size: contain;
background-repeat: no-repeat;
}
.cursor.is-active,.cursor.is-active2,.cursor.is-active3,.cursor.is-active4,.cursor.is-active5{
opacity: 1;
background-color: transparent;
transform: scale(1.4);
}
.cursor::after{
content: " ";
display: block;
background-size: cover;
width: 100px;
height: 100px;
opacity: 0;
transition: 0.3s;
position: relative;
top: -100px;
left: -37px;
}
.cursor.is-active::after{
background-image: url("../img/cursor_hover.png");
opacity: 1;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
.cursor.is-active2::after{
background-image: url("../img/cursor_hover2.png");
opacity: 1;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
.cursor.is-active3:after{
background-image: url("../img/cursor_hover3.png");
opacity: 1;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
.cursor.is-active4:after{
background-image: url("../img/cursor_hover4.png");
opacity: 1;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
.cursor.is-active5:after{
background-image: url("../img/cursor_hover5.png");
opacity: 1;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/* ---------- anim ---------- */
.catchAnim {
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
.catchAnim.start {
    -webkit-animation-name: catchAnim;
    animation-name: catchAnim;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes catchAnim {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
.fadeinUp {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}
.fadeinUp.start {
    opacity: 1;
    -webkit-transition: opacity 1s,-webkit-transform .8s;
    transition: opacity 1s,-webkit-transform .8s;
    transition: transform .8s,opacity 1s;
    transition: transform .8s,opacity 1s,-webkit-transform .8s;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
/* kaku */
.kaku {
    animation: kaku 1s infinite steps(2);
}
 @keyframes kaku {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-10deg); }
  }


/* ---------- top ---------- */
#main_img {
    max-height: 100vh;
    height: 67vw;
    background-color: #fff;
    background-image: url(../img/main_visual_bg1.png), url(../img/main_visual_bg2.png), url(../img/main_visual_bg3.png), url(../img/main_visual_bg4.png), url(../img/main_visual_bg.jpg);
    background-position: top left, top right, bottom left, bottom right, center;
    background-repeat: no-repeat;
    background-size: 22%, 15%, 14%, 21%, cover;
    z-index: 1;
}
.fv_item1, .fv_item2{
    width: 52%;
    top: 52%;
    left: 47.1%;
}
.fv_item3{
    width: 76%;
    top: 53.5%;
    left: 49.5%;
}

#top_link {
    margin-top: -20px;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}
.top_link_box li {
    padding: 5px 7px;
    width: 22%;
    max-width: 300px;
}
.top_link_box a {
    align-items: center;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5;
    color: #333;
    font-weight: bold;
    letter-spacing: 0.1em;
    box-shadow: 0 5px 0px rgb(205 233 177);
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
    display: block;
    padding: 25px 10px 20px;
    height: 200px;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.top_link_box ul li {
    width: 33.3333333%!important;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 0 7px;
}
.top_link_box .icon {
    height: 68px;
    width: 100%;
    margin-bottom:-17px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .5s;
}
.top_link_box li:nth-of-type(1) .icon {
    background-image: url(../img/icon1.png);
}
.top_link_box li:nth-of-type(2) .icon {
    background-image: url(../img/icon2.png);
}
.top_link_box li:nth-of-type(3) .icon {
    background-image: url(../img/icon3.png);
}
.top_link_box li:nth-of-type(4) .icon {
    background-image: url(../img/icon4.png);
}
.top_link_box .con_txt {
    margin-bottom: 0;
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
    
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 53px;
    padding: 0;
    line-height: 1.5;
}

.sl {
    display: none;
}
#con1 {
    padding-top: 0;
}
.con1_inner{
    padding: 3% 5% 4%;
    position: relative;
}
.con1_inner::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    background-color: #fff;
    border-radius: 50px;
}
.con1_inner > div:not(.neko1):not(.neko2) {
    position: relative;
    z-index: 1;
}
.topTxt1_wrap {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}
.neko1{
    left: -7%;
    top: 0%;
    width: min(20%, 230px);
}
.neko2{
    right: -4%;
    bottom: -12%;
    width: min(18%, 180px);
    transform: rotate(26deg);
}
.con1_inner > .font_18 {
    width: 83%;
    margin: auto;
    text-align: left;
}

#con3{
    padding-top: 0;
    padding-bottom: 18%;
}
#con3 .box .img {
    border: 4px solid #fff;
}
#con3 .title {
    line-height: 1.5;
    font-size: clamp(19px, 1.8vw, 24px);
    padding-bottom: 15px;
}
#topCms {
    border-radius: 100px 100px 0 0;
    margin-top: -10%;
    background-color: #fff;
}

.title1{
    width: min(90%, 635px);
    margin: 34px auto 32px;
}
.title2{
width: min(90%, 729px);
    margin: auto;
}


/* ---------- under ---------- */
.pagetitle_img{
    background-image: none!important;
}
.cate_list li a {
    border-color: var(--color6);
}
#cms_2-b .cate_box {
    border-radius: 30px;
    border: 1px solid var(--color1);
}
.line_bnr {
    width: min(95%, 405px);
}


@media screen and (max-width: 1000px){
.pc_nav{display: none;}
.header-in {
    height: 94px;
    background: none;
    box-shadow: none;
    padding: 0px;
}
.logo1 {
    margin-right: auto;
}
}

/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
.fv_item3 {
    width: 95%;
    top: 53.5%;
    left: 50.5%;
}
.fv_item1, .fv_item2 {
    width: 66%;
    top: 52%;
    left: 47.1%;
}
.top_link_box a{
    height: 174px;
}
.cursor, .follower {
    display: none;
}
.logo1 {
    max-width: 220px;
}
#sp_nav .sp_nav_inner .menu__header .logo3 img {
    max-width: 220px;
}
#page1{
    min-width: 100%;
}
.neko1 {
    top: -5%;
}
.title2 {
    width: 80%;
}
}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
#main_img{
    height: 177vw;
    background-size: 38%, 35%, 38%, 45%, cover;
}
.fv_item1 {
    width: 163%;
    top: 50%;
    left: 47.1%;
}
.fv_item2{
    width: 100%;
    top: 32%;
    left: 50.1%;
}
.fv_item3{
    width: 100%;
    top: 50.5%;
}
.logo1 {
max-width: 187px;
padding-left: 0;
}
#sp_nav .sp_nav_inner .menu__header .logo3 img{max-width: 187px;}
.top_link_box li {
width: 42%;
}
.top_link_box .icon {
    height: 43px;
    margin-bottom: -13px;
}
.top_link_box li a{
    padding: 21px 10px 5px;
    height: 135px;
    font-size: 15px!important;
    letter-spacing: 0px!important;
}
.topTxt1_wrap{
    width: 100%;
}
#top_link {
    margin-bottom: 40%;
}
#con1 {
    padding-top: 0;
    padding-bottom: 38%;
}
.neko1 {
    top: -17%;
    width: 43%;
    z-index: 23;
}
.neko2 {
right: -4%;
    bottom: -20%;
    width: 36%;
}
.con1_inner::before{
    border-radius: 10px;
}
#con3 {
    padding-bottom: 28%;
}
#con3 .title {
    font-size: 22px;
}
#topCms {
    margin-top: -10%;
    border-radius: 35px 35px 0 0;
}
#fakeloader, .pagetitle, .f_contact_img {
    background-size: 450px;
}
}


/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom: 9px;
    right: 0;
    left: -10%;
    margin: auto;
    z-index: 10;
    width: 70%;
    max-width: 530px;
    transition: 0.5s;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
#fix_bnr.scroll{
    opacity: 1;
pointer-events: auto;
}
#fix_bnr.close{
    opacity: 0;
    z-index: -1;
}
@media screen and (max-width: 768px){
#fix_bnr.close{
    transform: translateX(200px);
}
}
@media screen and (max-width: 667px){
#fix_bnr {
    width: 90%!important;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 10px;
}
}
/* fix_bnr end ---------------------------------------------------------------------------------------------*/