/*--------------------------------

　このCSSは下記URLで使用しています
　https://www.ryowahouse.co.jp/

--------------------------------*/

/* フォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap'); 


/* root */
:root{
    --main-text-color: #252525;
    --background-color: #F5F5F5;
    --main-font: 'Noto Sans JP', sans-serif;
    --sub-font: 'Noto Serif JP', serif;
    
    --rgb-main: 0,131,255;
    --rgb-sub: 54,189,239;
    --rgb-dark: 0,84,164;
    --rgb-accent: 255,218,0;
    --rgb-kanri: 244,160,0;
    --rgb-chintai: 0,131,255;
    --rgb-fudosan: 0,119,44;
    --rgb-ryowa: 0,84,164;
    --rgb-line: 0,177,65;
    
    --color-main: rgb(var(--rgb-main));
    --color-sub: rgb(var(--rgb-sub)); 
    --color-dark: rgb(var(--rgb-dark));    
    --color-accent: rgb(var(--rgb-accent));
    
    --color-kanri: rgb(var(--rgb-kanri));
    --color-chintai: rgb(var(--rgb-chintai));
    --color-fudosan: rgb(var(--rgb-fudosan));
    
    --color-ryowa: rgb(var(--rgb-ryowa));
    --color-line: rgb(var(--rgb-line));
    
    --color-main-filter: invert(60%) sepia(98%) saturate(5623%) hue-rotate(194deg) brightness(100%) contrast(110%);
    --color-line-filter: invert(41%) sepia(95%) saturate(1681%) hue-rotate(115deg) brightness(95%) contrast(101%);
}


html {
  scroll-padding-top: calc(52px + 1rem);
}

.body{
    min-height: 100dvh;
    /*overflow: auto;*/
    font-size: 18px;
    line-height: 1.6em;
    font-family: var(--main-font);
    font-weight: 400;
    background-color: var(--background-color);}

.img{
    pointer-events: none;
    user-select: none;
    
    &.download{
        pointer-events: inherit;
        user-select: auto;
    }
    
    &.is-radius{
        border-radius: 30px;
        /*@media (width <= 768px){
            border-radius: 10px;
        }*/
    }
}

.wrapper{
    width: 100%;
    position: relative;
    color: var(--main-text-color);
    /*overflow: hidden;*/
}

#index .main{
    overflow: hidden;
}
/*swiper
----------------------------------*/

.swiper{
    width: 100%;
    height: auto;
}

/*youtube
----------------------------------*/

div[class="youtube"] .inner{ position: relative;  width: 100%;  padding-top: 56.25%; margin-bottom: 1rem;}
div[class="youtube"] .inner iframe{ position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

/*link
----------------------------------*/

.link,
.link:hover{
    color: inherit;
    text-decoration: inherit;
}

.link{
    &.is-text{
        position: relative;
        border-bottom: 1px solid var(--main-text-color);
        padding: 0 0.2em;
        z-index: 0;
        
        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: #E7E7E7;
            z-index: -1;
            transition: 0.2s;
        }
        &:hover&::before{
            width: 100%;
        }
    }
}

/*button
----------------------------------*/

.button{
    color: inherit;
    text-decoration: none;
    --buttoncolor: var(--color-dark);
    
    font-weight: 600;
    font-size: 1rem;
    background-color: inherit;
    
    &:hover{
        color: inherit;
        opacity: inherit;
    }
}

/*.button:hover{
    color: inherit;
    opacity: inherit;
}*/

/*is-default*/

.button.is-default{
    position: relative;
    color: var(--buttoncolor);
    border-color: var(--buttoncolor);
    border-radius: 0;
    --padding-y: 1.6em;
    --padding-w: calc(1em * 3);
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);
    padding-left: var(--padding-w);
    padding-right: calc(var(--padding-w) + 1em);
    word-break: break-all;
    
    @media (width <= 768px){
        --padding-w: calc(1em * 1.4);
    }
    
    &.is-light{
        color: white;
        border-color: white;
        background-color: inherit;
    }

    z-index: 0;
    overflow: hidden;
    
    &::after{
        content: "\f30b";
        font-family: "Font Awesome 5 Free";

        position: absolute;
        top: calc(50% + 0.1em);
        transform: translateY(-50%);
        right: 1em;
    }
    &::before{
        content: "";
        width: 0;
        height: 100%;

        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--buttoncolor);
        transition: 0.2s;
        z-index: -1;
    }
    &:hover::before{
        width: 102%;
    }
    &:hover{
        color: white;
        border-color: var(--buttoncolor);
    }
    
    &.is-block{
        --bgcolor: var(--color-main);
        --textcolor: white;
        display: block;
        height: auto;
        color: var(--textcolor);
        word-break: break-all;
        padding: 1em;

        background-color: var(--bgcolor);
        border: 1px solid var(--bgcolor);
        border-radius: 0;
        word-break: break-all;
    }
    
    
    &.is-maincolor{
        color: white;
        border-color: var(--color-main);
        background-color: var(--color-main);
    }
}

br + .button.is-default{
    margin-top: 0.6rem;
}


/*is-download*/

.button.is-download{
    position: relative;
    width: 100%;
    color: var(--buttoncolor);
    border-color: var(--buttoncolor);
    border-radius: 0;
    --padding-y: 2.4em;
    --padding-w: calc(1em * 3);
    padding-top: var(--padding-y);
    padding-bottom: var(--padding-y);
    padding-left: var(--padding-w);
    padding-right: calc(var(--padding-w) + 1em);
    z-index: 0;
    
    &::before{
        content: "";
        width: 100%;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--color-dark);
        transition: 0.2s;
        z-index: -1;
    }
    
    & span{
        &::after{
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 1rem;

            width: 1rem;
            height: 1.2rem;
            background-image: url(/inc/img/www/icon/icon_download.svg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            filter: invert(17%) sepia(53%) saturate(2979%) hue-rotate(208deg) brightness(92%) contrast(98%);
        }
    }
    
    &:hover{
        color: white;
        &::before{
            height: 100%;
        }
        & span{
            &::after{
                filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(51deg) brightness(103%) contrast(102%);
            }
        }
    }
    & small{
        display: block;
        font-size: 0.6em;
    }
}

/*is-qrcode*/

.button.is-qrcode{
    position: relative;
    color: var(--color-dark);
    font-size: 0.6rem;
    font-weight: 400;
    line-height: 1.1em;
    padding: 0.1em 1.6em;
    padding-left: 2.4em;
    border: none;
    background-color: #F5F5F5;
    border-radius: 20px;
    
    &::before{
        content: "\f029";
        font-family: "Font Awesome 5 Free";
        font-weight: bold;
        
        position: absolute;
        top: 49%;
        left: 0.8em;
	    transform: translateY(-50%);
    }
}


/*is-text*/

.button.is-text{
    position: relative;
    text-decoration: none;
    
    color: var(--buttoncolor);
    
    &:hover{
        color: var(--buttoncolor);
    }
    &::before{
        content: "";
        width: 100%;
        height: 2px;

        position: absolute;
        bottom: 0;
        left: 0;

        background-color: var(--buttoncolor);
    }
    &::after{
        content: "\f30b";
        font-family: "Font Awesome 5 Free";

        margin-left: 0.8em;
    }
    
    &.is-light{
        color: white;
        background-color: inherit;
        &::before{
            background-color: white;
        }
    }
}

/*bulmaの細かい変更
----------------------------------*/

.box.is-line{
    box-shadow: none;
    border: 1px solid #707070;
    background-color: inherit;
}

.notification{
    .table{
        background-color: transparent;
    }
    & hr{
        background-color: #D3D3D3;
    }
}

/*headnav
----------------------------------*/
.headnav{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    transition: all 0.2s ease-out;

    @media (width >= 800px){
      &.fixed-hide{
          top: -2.1rem;
      }
    }
}

/*importantnews
----------------------------------*/

.importantnews{
    width: 100%;
    
    .message{
        border-radius: 0;
        &.is-warning{
            background-color: var(--color-accent);
            
            .message-header{
                padding: 1.25em 1.5em 0;
                background-color: inherit;
            }
        }
        .newscontents{
            font-size: 0.8rem;
            
            @media (768px <= width){
                display: flex;
                align-items: center;
                gap: 1rem;
            }
            & time{
                font-weight: 800;
            }
        }
        & a:not(.button):not(.tag):not(.dropdown-item){
            text-decoration: none;
        }
    }
}

/*globalsitenav
----------------------------------*/

.globalsitenav{
    display: none;
    color: lightgray;
    font-size: 0.6rem;
    padding: 0 1rem;
    flex-flow: wrap;
    /*justify-content: flex-end;*/
    background-color: var(--color-dark);
    
    @media (800px <= width){        
        display: flex;
    }
    
    .link{
        color: lightgray;
        padding: 0 1em;
        
        + .link{
            border-left: 1px solid rgba(200,200,200,0.2);
        }
    }
    
    
}

/*globalnavigation
----------------------------------*/
.globalnavigation{
    position: relative;
    width: 100%;
    z-index: 0;
    background-color: rgba(255,255,255,0.00);
    
    .navbar-burger{
        color: white;
    }
    
    .navbar-brand{
        
        & .navbar-item{
            padding: 0.4em 1.4em;
            background-color: var(--color-ryowa);
            border-bottom-right-radius: 10px;
            transition: 0.2s;
            
            &:hover{
                background-color: rgba(100,100,100,0.8);
            }
        }
    }
    
    .navbar-menu{
        .navbar-item{
            @media (width <= 1023px){
                &:not(:last-child){
                    border-bottom: 1px solid #ddd;
                }
            }            
            &.has-dropdown{
                @media (1023px <= width){
                    padding: inherit;
                    align-items: center;                   
                }
            }
            .button{ 
                color: white;   
                font-size: 0.8em;
                font-family: var(--main-font);
                font-weight: 500;
                background-color: rgba(255,255,255,0);
                border: none;
                @media (1023px <= width){
                    &:not(.navbar-item-menutoggle.is-open){
                        filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
                    }
                }

                @media (width <= 1023px){
                    color: inherit;
                    background-color: inherit;
                }
                &.navbar-item-menutoggle{
                    &.is-open{
                        @media (1023px <= width){
                            color: inherit;
                            background-color: #B9E3F9;
                            border-bottom-right-radius: 0;
                            border-bottom-left-radius: 0;                           
                        }
                    }
                }
            }
        }
    }
}


/*header
----------------------------------*/

.header{
    position: relative;
    margin-bottom: 4rem;
}



/*button-chintai
----------------------------------*/

.header .button-chintai{
    color: white;
    text-align: center;
    font-size: 0.7em;
    line-height: 2em;
    position: absolute;
    bottom: 3rem;
    right: 1em;
    display: flex;
    flex-flow: column;
    z-index: 80;
    

    .link{
        padding: 1em;
        transition: 0.3s;

        &:hover{
            background-color: rgba(var(--rgb-main),0.8);
        }
        .text-tate{
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
            text-align: left;
            line-height: 1.4em;
        }
        .icon{
            filter: invert(92%) sepia(100%) saturate(0%) hue-rotate(344deg) brightness(102%) contrast(102%);
        }
    }
}

@media screen and (max-width: 1023px){
    .header .button-chintai{
        display: none;
    }
}



/*newsitem
----------------------------------*/

.newsitem {
    
    .newscontents{
        display: flex;
        flex-flow: column;
        gap: 0.6rem;
        color: inherit;
        font-size: 0.9rem;
        line-height: 1.4rem;
        
        .ogpimage{
            border-radius: 30px;
            overflow: hidden;
            transition: 0.2s;
            
            .img{
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: 0.3s;
            }
        }
        &:hover .ogpimage{
            border-radius: 8px;
        }
    }
}

/*.newsitem .newscontents:hover .ogpimage .img{
    transform: scale(1.2);
}*/


.newsitem{
    
    .newstitle,
    .newstagtime{
        padding: 0 0.5em;
    }
    
    .newstagtime{
        font-size: 0.8em;
        
         .tag{
            --tag-color: var(--color-main);
            color: var(--tag-color);
            border: 1px solid var(--tag-color);
            margin-right: 1em;
        }
    }
    .newstitle{
        max-height: 4.5em;
        font-weight: 800;

        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;    
    }
    
    &.off{
        display: none !important;
    }
}





/*linkbanner
----------------------------------*/

.linkbanner{
    padding: 8rem 1rem 5rem;
    
    .linkbanner-inner{
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
        background-color: #252525;
        border-radius: 30px;
        overflow: hidden;
        z-index: 0;
        
        &::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: -1;
        }
        
        .linkbanner-link{
            display: grid;
            grid-template-columns: 3fr 1fr;
            grid-template-rows: 2fr;
            gap: 0;
            color: inherit;
            @media (width <= 1023px){
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: 2fr 1fr;
                gap: 1rem;
            }
            
            .linkbanner-griditem{
                width: 100%;
                display: flex;
                flex-flow: column;
                &:nth-child(1){grid-area: 1 / 1 / 2 / 2;}
                &:nth-child(2){
                    grid-area: 1 / 2 / 2 / 3;               
                    justify-content: center;
                    align-items: center;}
                @media (width <= 1023px){
                    &:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
                    &:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
                }
                .button.is-default span{
                    @media (width <= 768px){
                        font-size: 0.8em;
                    }
                }
            }
        }
        .linkbanner-background{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
            
            opacity: 0.8;
            transition: 0.2s;
        }
        &:hover .linkbanner-background{
            opacity: 1;
        }
    }
}

.linkbanner-text{
    .title{
        color: white;
        line-height: 1.6em;
        @media (width <= 768px){
            font-size: calc(100vmax / 46);
        }
    }
    & p{
        color: lightgray;
        @media (width <= 768px){
            font-size: 0.8em;
        }
    }
}



/*ローディング
----------------------------------*/
/* HTML: <div class="loader"></div> */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    transition: all 1s;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    
	&.loaded {
		opacity: 0;
		visibility: hidden;
	}
    
    .loaderwave {
      width: 80px;
      height: 40px;
      background:
        radial-gradient(circle 11px at top,#0000 94%,#b0e5f3) 0 20px,
        radial-gradient(circle 11px at top,#0000 94%,#5dc1e4) 0 10px,
        radial-gradient(circle 11px at top,#0000 94%,#008cd9) 0 0   ;
      background-size: 20px 100%;
      background-repeat: repeat-x;
      animation: l7 1s infinite linear;
    }
    
}

@keyframes l7 {
  50%  {background-position: 10px 15px,-10px 12px,15px 8px}
  100% {background-position: 20px 20px,-20px 10px,20px 0px}
}


/*backcloud
----------------------------------*/

.backcloud{
    position: relative;
    padding-bottom: 0;
    z-index: 0;
    
    .backcloud-img{
        position: absolute;
        display: block;
        width: 50%;
        z-index: -1;
        
        @media (width <= 768px){
            width: 90%;            
        }

        &.upward{
            top: 0;
            right: -2em;
        }
        &.downward{
            bottom: 0;
            left: -2rem;
        }
    }
}

/*Campaign
----------------------------------*/

.campaign{
    width: 100%;
    padding: 5rem 0;
    margin: 6rem 0 4rem;
    
    .inner{
        position: relative;
        max-width: 1400px;
        margin: auto;
        padding: 0 1rem;
        
        .swiper-campaign{
            padding-bottom: 3rem;
        }
    }
}



.campaign-card{
    width: 100%;
    height: 100%;
    
    .link{
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 10px;
        overflow: hidden;
        z-index: 0;
        
        .text{
            height: 100%;
            display: flex;
            /*justify-content: center;*/
            align-items: center;
            padding: 0 1rem;
            
            color: white;
            font-size: 2rem;
            line-height: 1.4em;
            font-weight: 800;
            filter:drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
            z-index: 1;
        }
        .background{
            position: absolute;
            top: 0;
            left: 50%;
	        transform: translateX(-50%);
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -100;
        }
        &::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            
            width: 0;
            height: 100%;
            margin: auto;
            background-color: rgba(var(--rgb-main),0.5);
            border-radius: 10px;
            transition: 0.2s;
            z-index: -1;
        }
        &:hover::after{
            width: 100%;
        }
    }
    &.off{
        display: none !important;
    }
}



/*linklist
----------------------------------*/

.linklist{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    @media (width <= 768px){
        gap: 1rem;
    }
    
    .list-item{
        width: calc(100% / 4 - 2rem);
        @media (width <= 1023px){
            width: calc(100% / 3 - 2rem);
        }
        @media (width <= 768px){
            width: calc(50% - 2rem);
        }
        
        .link{
            display: block;
            padding: 0.6rem 1rem;
            text-align: center;
            background-color: white;
            border: 1px solid #B7B7B7;
            border-radius: 4px;
            
            .img{
                display: block;
                width: 100%;
                height: auto;
            }
        }
    }
}


/*etclink
----------------------------------*/

.etclink{
    padding: 5rem 1rem;
}






/*grouplink
----------------------------------*/

.grouplink{
    margin-top: 5rem;
    padding: 4rem 1rem;
    background-color: white;
}


/*childslider
----------------------------------*/

.childslider{
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    z-index: 0;
    
    --wave-filter: invert(100%) sepia(26%) saturate(0%) hue-rotate(205deg) brightness(110%) contrast(92%);
    
    .upward,
    .downward{
        position: absolute;
        left: 0;
        right: 0;
        
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        
        z-index: 3;
        
        .img{
            width: 100%;
        }        
        .wave{
            display: block;
            filter: var(--wave-filter);
            &.blue{
                filter: invert(88%) sepia(3%) saturate(3501%) hue-rotate(172deg) brightness(101%) contrast(95%);               
            }
        }
    }
    .upward{
        top: 0;
    }
    .downward{
        bottom: 0;
    }
}


.childslider-item{
    width: 100%;
    min-width: calc(100% / 4);
    height: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;
    
    .link{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/*footer
----------------------------------*/

/*footer-wave*/
.footer-wave{
    box-sizing: border-box;
    border-bottom: 1rem solid var(--color-dark);
    
    .wave{
        width: 100%;
        margin-bottom: -0.5rem;        
    }
    .img{
        filter: invert(18%) sepia(100%) saturate(2481%) hue-rotate(195deg) brightness(90%) contrast(103%);
    }
}


/*footer*/

.footer{
    width: 100%;
    padding: 0;
    padding-top: 2.6rem;
    color: white;
    text-align: center;
    font-size: 0.8rem;
    background-color: var(--color-ryowa);
    
    & [class^="footer-"]{
        padding: 1rem;
    }
    
    .address{
        font-style: normal;
    }
    
    .copyright{
        padding: 0.5em 1rem;
        background-color: var(--color-main);
    }
}

.footer-corporate{
    .logo{
        display: block;
        width: 100%;
        max-width: 50vmax;
        margin: 0 auto 2rem;
        padding: 0 1rem;
    }
}

.footer-sns{
    .link{
        padding: 0.5rem;
        font-size: 2rem;
    }
}

.footer-menu{
    .link{
        position: relative;
        display: inline-block;
        padding: 0.2em 0.8em;
        transition: 0.2s;
        
        &::before{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--color-main);
            
            transition: 0.2s;
        }
        
        &:hover::before{
            width: 100%;
        }
    }
}

/*20241126 add p-mark*/
.pmark a{
  display: inline-block;
  vertical-align: top;
}