﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body, h1, h2, h3, h4, h5, h6, .catch, #topCms .cmstitle p, .pagetitle .title_box p, .pc_nav li .page_title, #sp_nav .sp_nav_inner .l-menu .l-menu_cms {
    font-family: "Noto Sans JP", sans-serif;
}

#fakeloader .fl {
    width: 60% !important;
}

/*■■ header ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.logo1 {
    max-width: 400px;
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ 全体 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* タブレット */
@media screen and (max-width: 768px){
    #main_img {
        height: 95vh !important;
        padding-top: 90px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){}

/*■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.catch_copy_wrap {
    width: 100%;
    right: 6%;
    top: 10%;
}

.catch_copy {
    width: 40%;
    min-width: 600px;
    margin: 0 0 0 auto;
}
.catch.slide_ver {
    padding-right: 0;
}

.fv_unic {
    z-index: 2;
    width: 57%;
    left: -16%;
    bottom: -3%;
}

#main_img::before{
    top: 93%;
}

#main_img:after {
    height: 100%;
    background-image: linear-gradient(125deg, rgba(228, 248, 255, 1), rgba(207, 226, 255, 1) 29%, rgba(228, 248, 255, 1) 58%, rgba(250, 254, 255, 1));
    opacity: 0.7;
    position: fixed;
    background-color:transparent;
}

.swiper-container {
    top: 40%;
}

.swiper-slide.wide {
    width: 600px!important;
}

#intro .title h2 {
    line-height: 1.7;
}


.topCms {
    border-color: var(--color2);
}


.con_img1 {
    z-index: 2;
    width: 12%;
    height: auto;
    right: 14%;
    bottom: -1%;
    pointer-events: none;
}

.con_img2 {
    z-index: 2;
    width: 12%;
    height: auto;
    left: 22%;
    bottom: -2%;
    pointer-events: none;
}

/* タブレット */
@media screen and (max-width: 768px){
    #main_img {
        height: 90vh !important;
    }
    
    .catch_copy_wrap {
        width: 100%;
        right: 50%;
        top: 12%;
        transform: translateX(50%);
    }
    
    .catch_copy {
        width: 88%;
        min-width: 610px;
        margin: 0 auto;
    }
    
    .catch.slide_ver {
        padding-right: 0;
        text-align: center;
    }
    
    .fv_unic {
        width: 100%;
        left: -48%;
        bottom: -2%;
    }
    
    #content .swiper-button-next, #content .swiper-button-prev {
        top: 370px;
    }
    
    #topCms .cmstitle p {
        bottom: 15px;
    }
    
    .con_img1 {
        width: 26%;
        right: 3%;
    }
    
    .con_img2 {
        width: 26%;
        left: 5%;
        bottom: -2%;
    }
    
    
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img {
        height: 95vh !important;
    }
    
    #main_img::before {
        top: 94%;
        height: 94px;
    }
    
    .catch_copy_wrap {
        top: 15%;
    }
    
    .catch_copy {
        width: 90%;
        min-width: 330px;
    }
    
    .catch {
        text-align: center;
    }
    
    .catch.slide_ver {
        padding-right: 0;
        text-align: center;
        padding-top: 10px;
    }
    
    .swiper-slide.wide {
        width: 410px !important;
    }
    
    .fv_unic {
        width: 134%;
        left: -78%;
        bottom: -2%;
    }
    
    .catch:after {
        display: none;
    }
    
    #intro .title h2 {
        line-height: 1.6;
    }
    
    
    #content {
        padding-bottom: 100px;
        padding-top: 100px;
    }
    
    #content .cate_item {
        padding: 45px 15px 40px 35px;
    }
    
    #content .swiper-button-next, #content .swiper-button-prev {
        top: 315px;
    }
    
    .topCms {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .cmstitle {
        margin-bottom: 50px;
    }
    
    .con_img1 {
        width: 30%;
        right: 1%;
        bottom: -1%
    }
    
    .con_img2 {
        width: 34%;
        left: auto;
        right: 1%;
        bottom: -1%;
    }
}

/* スマホ 320px以下 */
@media screen and (max-width: 320px){
    #main_img::before {
        height: 68px;
    }
    
    .catch_copy {
        width: 87%;
        min-width: 260px;
    }
    
    .catch {
        letter-spacing: 3px;
    }
    
    .swiper-slide.wide {
        width: 360px !important;
    }
    
    .fv_unic {
        width: 134%;
        left: -78%;
        bottom: -2%;
    }
    
    
    #content .box_title {
        font-size: -webkit-calc(1rem + 4px);
        font-size: calc(1rem + 2px);
    }
    
    #content .swiper-button-next, #content .swiper-button-prev {
        top: 310px;
    }
}

/*■■ cms ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.v_type3 .cate_box{border: 1px solid var(--color1);}
.v_type3 .box_title1{color: var(--color1);}

.pagetitle {
    background-image: linear-gradient(138deg, rgba(228, 248, 255, 1), rgba(227, 238, 255, 1));
    background-color:transparent;
}

.pagetitle .title_box p {
    bottom: 20px;
}


/* タブレット */
@media screen and (max-width: 768px){
    #page2 .blogListDate {
        width: 35% !important;
    }
    
    #page2 .blogListTitle {
        width: 65% !important;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #page2 .blogListDate {
        width: 100% !important;
    }
    
    #page2 .blogListTitle {
        width: 100% !important;
    }
    
    #cms_2-c .box_item {
        padding: 20px 5px;
    }
    
    #cms_2-g .cate_txt2, #cms_2-g .box_txt1 {
        line-height: 1.5;
    }
    
    #cms_6-b .box_txt2 {
        line-height: 1.5;
    }
}


/*■■ footer ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.footer .logo2 a {
    max-width: 360px;
}

.footer_txt {
    font-size: 24px;
}
/* タブレット */
@media screen and (max-width: 768px){}
/* スマホ */
@media screen and (max-width: 667px){
    .footer .logo2 a {
        max-width: 260px;
    }
    
    .footer_txt {
        font-size: 20px;
    }
}