@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');

#wrap {
    font-family: "Sawarabi Gothic", "Yu Gothic Medium", YuGothic, "游ゴシック Medium", "游ゴシック体", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.font_bold {
    font-weight: normal;
}
/* font ------------------------------------------------------------------------------*/

/* color -----------------------------------------------------------------------------*/

:root{
    --color1:#164135 ;
    --color2:#bcc4d1 ;
    --color3:#164135 ;
    --color4:#bcc4d1 ;
    --color5:#bcc4d1 ;
    --white:#ffffff;
    --black:#1c201f;
    --gray:#333333;
    --gray2:#444444;
}

body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: var(--black);}
.txt_white,.hvr_txt_white:hover{color: var(--white);}
.txt_color1,.hvr_txt_color1:hover{color: var(--color1);} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: var(--color2);} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: var(--color3);} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: var(--color4);} /* アクセントカラー2 */
.txt_color5,.hvr_txt_color5:hover{color: var(--color5);} /* アクセントカラー2 */
/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: var(--white)} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: var(--black);} /* 黒背景 */
.bg_gray,.hvr_bg_gray:hover{background-color: var(--gray);} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color2);} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: var(--color3);} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: var(--color4);} /* アクセントカラー2 */
.bg_color5,.hvr_bg_color5:hover{background-color: var(--color5);} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}
/* border-color ※!important */
.border_white,.hvr_border_white:hover{border-color: var(--white);}
.hvr_border_black:hover{border-color: var(--black);}
.border_black{border-color: var(--gray);}
.border_color1,.hvr_border_color1:hover{border-color: var(--color1);}
.border_color2,.hvr_border_color2:hover{border-color: var(--color2);}
.border_color3,.hvr_border_color3:hover{border-color: var(--color3);}
.border_color4,.hvr_border_color4:hover{border-color: var(--color4);}
.border_color5,.hvr_border_color5:hover{border-color: var(--color5);}

.linkStyle{color: var(--color1);
          border-bottom:solid 1px;
          transition: 0.5s;
}
.linkStyle:hover{color: var(--color1);
          border-bottom:solid 1px;
          opacity: 0.7;
}

/* color -----------------------------------------------------------------------------*/

/* ev --------------------------------------------------------------------------------*/
body,html,#intro,section#cms,body#body{position:relative;}

body::before,body::after,html::before,#intro::before,section#cms::before,body#body::before,html::after{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events:none;
}


/* ev --------------------------------------------------------------------------------*/

/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.fv_box {
    /*background: url(dup/img/fv.jpg);*/
    /*background-size: 100% 1000px;*/
    /*background-position: top 0px left 0;*/
    /*background-repeat: repeat;*/
    /* animation: bgloop 50s linear infinite; */

}

@keyframes bgloop {
	0% {background-position: top 0 left 0;}
	100% {background-position: top 1000px left 0;}
}


.fv_box{
    position: relative;
    height: 100vh;
    width: 100%;
}

img.topimg01.object_fit_img {
    height: 100vh;
    object-fit: cover;
    width: 70%;
    right: 0;
    position: absolute;
    z-index: 0;
}

div#catch{
    display: none;
}

#main_contents.top_main_contents{
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: calc(100vh - 120px);
}

.catch_img {
    display: flex;
    flex-direction: column;
}

img.catch_jp {
    width: clamp(200px, 20vw, 800px);
    padding: 30px 0 50px;
}

img.KOSHIN {
    /*width: clamp(200px, 33vw, 1000px);*/
    width: clamp(200px, 64vw, 1180px);
}

#main_contents.top_main_contents::after {
    content: "";
    width: 1px;
    height: calc(100% - 40px);
}
/*fv---------------------------------------------------------*/

body{
    overflow: hidden;
}

html::before {
    background: url(dup/img/noise.jpg);
    background-size: 400px;
    background-position: top 0 left 0;
    background-repeat: repeat;
    z-index: 99;
    width: 100%;
    height: 100vh;
    opacity: 0.1;
    position: fixed;
    mix-blend-mode: screen;
}



/*body::after {*/
/*    top: -50%;*/
/*    left: -50%;*/
/*    will-change: transform;*/
/*    mix-blend-mode: darken;*/
/*    animation: noise 1s steps(4) infinite;*/
/*    background-image: url(dup/img/noise.jpg);*/
/*    background-repeat: repeat;*/
/*    background-size: 500px;*/
/*    width: 200%;*/
/*    height: 200%;*/
/*    display: block;*/
/*    opacity: 0.08;*/
/*    z-index: 99;*/
/*}*/

.noise-container {
    overflow: hidden;
    z-index: 99;
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: none;
}

.noise-overlay {
    top: -50%;
    left: -50%;
    will-change: transform;
    mix-blend-mode: darken;
    animation: noise 1s steps(4) infinite;
    background-image: url(dup/img/noise.jpg);
    background-repeat: repeat;
    background-size: 500px;
    width: 200%;
    height: 200%;
    display: block;
    opacity: 0.08;
    position: absolute;
    z-index: -1; /* 背景としての位置を確保する */
    pointer-events: none;
}


@keyframes noise {
    0% {
        transform: translate(0)
    }

    10% {
        transform: translate(-2.5%,-2.5%)
    }

    20% {
        transform: translate(-5%,2.5%)
    }

    30% {
        transform: translate(2.5%,-5%)
    }

    40% {
        transform: translate(-2.5%,7.5%)
    }

    50% {
        transform: translate(-5%,2.5%)
    }

    60% {
        transform: translate(7.5%)
    }

    70% {
        transform: translateY(5%)
    }

    80% {
        transform: translate(-7.5%)
    }

    90% {
        transform: translate(5%,2.5%)
    }

    to {
        transform: translate(2.5%)
    }
}
/*上noise---------------------------------------------------------*/

h1 {
    max-width: 120px;
    width: 100% !important;
}
header {
    border-bottom: 1px solid #fff;
    z-index: 2;
    position: relative;
}

div#header {
    height: 70px;
    justify-content: flex-start;
}

.sns_links{
    width: auto !important;
    padding-left: 50px;
}

section#intro {
    padding-top: 120px;
}

#intro .more a img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.more img {
    width: 13px;
}

#intro .more a {
    border: 1px solid #fff;
    padding: 10px 35px 10px 10px;
}


#intro::before {
    background: url(dup/img/item01.png);
    width: 100%;
    height: 100%;
    background-size: 20%;
    background-repeat: no-repeat;
    z-index: 2;
    left: 0;
    top: 0;
    background-position: top 30% left;
}

.intro_txt {
    margin-left: 25%;
    width: 65% !important;
}

.more span {
    background: url(dup/img/noise_fv.jpg);
    background-size: 200%;
    background-position: top left;
}

section#contents .d_flex.flex_top {
    justify-content: space-around;
}

section#contents .con_box {
    width: 45% !important;
}

#contents h3 span {
    border-top: 1px solid #fff;
}

#contents p {
    transform: translateY(0);
    margin-top: 20px;
}

#contents h4 {
    transform: translateY(0px);
    background-image: url(dup/img/noise_fv.jpg) !important;
    width: 100% !important;
    font-size: 23px;
    text-align: center;
    padding: 5px 10px;
    color: var(--white);
    background-position: top 0% center;
    background-size: 100% !important;
}



#top_cms {
    background: url(dup/img/fv.jpg);
    background-size: 100% 1000px;
    background-position: top 0px left 0;
    background-repeat: repeat;
     /*animation: bgloop02 50s linear infinite; */

}

@keyframes bgloop02 {
	0% {background-position: top 0 left 0;}
	100% {background-position: top 1000px left 0;}
}


#top_cms .top_cms_title h3 span {
    display: inline-block;
    border-top: 1px solid #fff;
}

.top_cms_title h3 {
    font-size: clamp(20px, 5vw, 60px);
    padding: 10px 5px 0px 5px;
}

#top_cms .top_cms_title h4 span {
    border-bottom: 1px solid #fff;
    padding: 5px 5px 5px 5px;
}

#top_cms .more a {
    border: 1px solid #fff;
}
#top_cms .cms_wrap.grid_9 {
    background: rgb(232 238 247 / 50%);
    border: solid 1px var(--white);
    border-right: solid 0px var(--white);
}

.top_cms_box {
    margin-bottom: 0px;
    padding-bottom: 100px;
}

#contents_link a::after {
    background-color: rgb(28 32 31 / 60%);
    transition: all 0.3s;
}


#footer .grid_6 {
    background: url(dup/img/noise_fv.jpg);
}


/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



#loader::after{
    display: none;
}

/*loading*/


.loading-container {
    width: 300px;
    height: 50px;
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: var(--color1);
    transition: width 1s ease;
}

.loading-image {
    position: absolute;
    top: 0;
    left: -5px;
    transition: transform 1s ease;
}


div#loader {
    /*background: url(dup/img/fv.jpg);*/
    background-size: cover;
    background-position: center;
    z-index: 98;
}

div#progress::before {
    font-family:"Fjalla One", "Yu Gothic Medium", YuGothic, "游ゴシック Medium", "游ゴシック体","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif ;
    content: 'LOADING...';
    width:100%;
    height: 100%;
    position: absolute;
    top:0%;
    color:var(--color2);
    font-size: 20px;
    line-height: 1.5;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    z-index: 0;
}

img#loadingImage {
    width: auto !important;
    height: 118% !important;
    top: -9%;
}
#con_bnr {
    right: 54px;
    height: 54px;
    max-width: 347px;
    width: auto;
    transform: translateY(0px);
    z-index: 6;
    transition: 0.5s;
}
#con_bnr:hover{
    opacity: 0.7;
}

footer .d_flex.flex_space-between{
    justify-content: flex-start !important;
}

#copyright{
    padding-left: 20px;
}

div#wrap {
    overflow: hidden;
}

/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#body{
    background: transparent;
}
.anim_grad-container {
    overflow: hidden;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: none;
}

.anim_grad {
    /*background: url(dup/img/fv.jpg);*/
    /*background-size: 100% 1000px;*/
    /*background-position: top 0px left 0;*/
    /*background-repeat: repeat;*/
    height: 100%;
    width: 100%;
    /*animation: bgloop 50s linear infinite;*/
    z-index: 1;
    top: 0;
    left: 0;
    position: fixed;
    pointer-events: none;
}

body::before{
    display: none !important;
}

section#cms {
    background: rgb(232 238 247 / 70%);
    border-top: solid 1px var(--white);
}


div#page_title {
    margin-top: 0;
}

#page_title h2 span {
    border-top: 1px solid #fff;
    padding: 10px 5px 0px 5px;
}

#page_title h3 span {
    border-bottom: 1px solid #fff;
}

.cate_list li {
    border: solid 1px var(--color1);
}

.cate_list li::after {
    background-color: #e3e8f1;
}

#cms_6-b .cate_title,#cms_6-b .cate_box .box_txt1{
    background-color: var(--gray2);
}

#page07, #page08, #page09, #page10 {
    background: rgb(232 238 247 / 70%);
}

#page08 .width_1000-max {
    color: var(--black);
}

p#contact_tel a {
    color: var(--color1);
}

#page07 .grid_4 h3::after{
    display: none;
}

#page07 h3 span{
    background:transparent;
}

section#page07 h3, section#page07 p {
    color: var(--black);
    font-family: "Sawarabi Gothic", "Yu Gothic Medium", YuGothic, "游ゴシック Medium", "游ゴシック体", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#page07 .box {
    border-bottom: 1px solid var(--color2);
}


section#page09 h3 ,section#page09 p {
    color: var(--black);
}

#page09 h3 span {
    background-color: var(--color1);
    display: inline-block;
    border: 1px solid #fff;
    color: var(--white);
}

section#page10 .grid_4 {
    background: transparent;
}

section#page10 .grid_4 a {
    background: url(dup/img/noise_fv.jpg);
    background-size: 200%;
    background-position: center;
}

section#page10 .grid_4 p,section#page10 .grid_4 h3{
    color: var(--black);
}
    
#page10 .grid_4 a .no {
    box-shadow: none;
}

/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*1536*/
@media screen and (max-width: 1536px){

}

/*1530 × 735*/
@media screen and (max-width: 1530px){

}

/*1366*/
@media screen and (max-width: 1366px){

}

/*タブレット*/
@media screen and (max-width: 768px){

.catch_img {
    margin-left: 5%;
    position: absolute;
    /*top: 45%;*/
    /*transform: translateY(-50%);*/
    bottom:8%;
}

img.topimg01.object_fit_img {
    height: 60vh;
    object-fit: cover;
    width: 78%;
    right: 0;
    position: absolute;
    z-index: 0;
}

.fv_box {
    position: relative;
    height: 60vh;
    width: 100%;
}

#main_contents.top_main_contents {
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: calc(60vh - 160px);
}

img.KOSHIN {
    width: clamp(200px, 44vw, 1000px);
    order: 1;
}
img.catch_jp {
    width: clamp(200px, 35vw, 800px);
    padding: 20px 0 20px;
}


#main_nav #menu_bg span {
    position: absolute;
    width: 100%;
    height: 100%;
}

#main_nav #menu_bg::after {
    background-color: rgb(22 65 53 / 90%);
}

#main_nav .sns_links{
    border:none;
    background:transparent;
}


#main_nav > div > ul li::before {
    border: 2px solid #fff;
}

#intro::before {
    background: url(dup/img/item01.png);
    width: 100%;
    height: 100%;
    background-size: 25%;
    background-repeat: no-repeat;
    z-index: 2;
    left: 0;
    top: 0;
    background-position: top 10% left;
}

.intro_txt {
    margin-left: 25%;
    width: 75% !important;
}

#contents h3 span img {
    width: 90% !important;
}

section#contents .con_box {
    width: 48% !important;
}

#contents h4 {
    transform: translateY(0px);
    background-image: url(dup/img/noise_fv.jpg) !important;
    width: 100% !important;
    font-size: 23px;
    text-align: center;
    line-height: 1.3;
    padding: 10px;
    word-break: keep-all;
}

#top_cms .cms_wrap.grid_9 {
    border-right: solid 0px var(--white);
    border-left: solid 0px var(--white);
}
#main_nav{
    z-index: 90 !important;
}
#menu_bt{
    z-index: 91 !important;
}

div#loader {
    background: url(dup/img/fv.jpg);
    background-size: 200%;
    background-position:top center;
}
}

/*スマホ*/
@media screen and (max-width: 667px){

#con_bnr {
    right: 50px;
    height: 50px;
}

#copyright {
    text-align: center;
    padding: 0px 0 51px;
    font-size: 14px;
}

div#header {
    height: auto;
    justify-content: flex-start;
    padding:10px;
}

h1 {
    max-width: 70px;
}    

.loading-container {
    width: 250px;
}

#cms_2-g .cate_title {
    font-size: 1.3em;
}




img.topimg01.object_fit_img {
    height: 100svh;
    object-fit: cover;
    width: auto;
    right: auto;
    position: absolute;
    z-index: 0;
    left: 80%;
    transform: translateX(-50%);
}
.fv_box {
    position: relative;
    height: 100svh;
    width: 100%;
}

#main_contents.top_main_contents {
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: calc(100svh - 100px);
}

img.KOSHIN {
    width: 100%;
    order: 1;
}

img.catch_jp {
    width: 70%;
    padding: 0px 0 20px;
}

.catch_img {
    position: absolute;
    /* top: 45%; */
    /* transform: translateY(-50%); */
    bottom: 6%;
    margin: 0 5%;
}

.intro_txt {
    width: 100% !important;
    margin: 0 auto;
}

#intro::before {
    background: url(dup/img/item01.png);
    width: 100%;
    height: 100%;
    background-size: 101%;
    background-repeat: no-repeat;
    z-index: 1;
    left: 0;
    top: 0;
    background-position: top -2% left;
    mix-blend-mode: exclusion;
}

section#intro {
    padding-top: 50px;
}

.intro_txt h2 {
    line-height: 1.5;
    word-break: keep-all;
    text-align: center;
    font-size: 23px;
}

#contents h3 span {
    border-top: 1px solid #fff;
    width: 70%;
}

#contents h3 span img {
    width: 100% !important;
}

section#contents .con_box {
    width: 100% !important;
}

#top_cms .top_cms_title h3 span {
    display: inline-block;
    border-top: 1px solid #fff;
    font-size: 40px;
    padding: 10px 5px 0px 5px;
}

}

/*20240424*/

.anim_grad {
    background: HSLA(167,14%,39%,1);
}
#top_cms,.fv_box{
    position: relative; /* 要素の位置を設定 */

    
    background: radial-gradient(at 73% 76%, hsla(167, 14%, 39%, 1) 0px, transparent 50%), 
                radial-gradient(at 99% 1%, hsla(26, 100%, 76%, 1) 0px, transparent 50%), 
                radial-gradient(at 99% 98%, hsla(158, 0%, 88%, 1) 0px, transparent 50%), 
                radial-gradient(at 0% 100%, hsla(26, 100%, 76%, 1) 0px, transparent 50%);
    
    animation: gradientAnimation 10s linear infinite; /* アニメーション */
}


div#loader::before,.anim_grad::before{
    content: "";
    width:100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 0;
    background: radial-gradient(at 73% 76%, hsla(167, 14%, 39%, 1) 0px, transparent 50%), 
                radial-gradient(at 99% 1%, hsla(26, 100%, 76%, 1) 0px, transparent 50%), 
                radial-gradient(at 99% 98%, hsla(158, 0%, 88%, 1) 0px, transparent 50%), 
                radial-gradient(at 0% 100%, hsla(26, 100%, 76%, 1) 0px, transparent 50%);
    
    animation: gradientAnimation 10s linear infinite; /* アニメーション */
}


@keyframes gradientAnimation {
    0% {
        background-image: radial-gradient(at 73% 76%, hsla(167, 14%, 39%, 1) 0px, transparent 50%), 
                         radial-gradient(at 99% 1%, hsla(26, 100%, 76%, 1) 0px, transparent 50%), 
                         radial-gradient(at 99% 98%, hsla(158, 0%, 88%, 1) 0px, transparent 50%), 
                         radial-gradient(at 0% 100%, hsla(26, 100%, 76%, 1) 0px, transparent 50%);
    }

    100% {
        background-image: radial-gradient(at 73% 76%, hsla(167, 14%, 39%, 1) 0px, transparent 50%), 
                         radial-gradient(at 99% 1%, hsla(26, 100%, 76%, 1) 0px, transparent 50%), 
                         radial-gradient(at 99% 98%, hsla(158, 0%, 88%, 1) 0px, transparent 50%), 
                         radial-gradient(at 0% 100%, hsla(26, 100%, 76%, 1) 0px, transparent 50%);
    }
}


#main_contents #main_menu li.active::before, #main_contents #main_menu li:hover::before{
    display: none;
}

#main_contents #main_menu li a {
    padding-left: 0;
}

#main_contents #main_menu li.active, #main_contents #main_menu li:hover {
    margin-left: 0px;
    transform: translateX(0px);
}

#main_contents #main_menu li.active::after, #main_contents #main_menu li:hover::after {
    right: 0;
    transform: translateX(00px);
}


#main_menu .sns_links {
    width: auto !important;
    padding-left: 0px;
    padding-top: 10px;
}

img.catch_jp{
    display: none;
}


div#main_menu {
    padding-top: 80px;
}


section#main_contents a span {
    /*display: none;*/
    padding-left: 20px;
    transition: 0.5s;    
}

#main_menu a {
    text-decoration: none; /* リンクの下線を除去 */
    color: white; /* テキストの色 */
    transition: color 0.3s; /* テキスト色のトランジション */
}

/* 初期状態では span を非表示に */
#main_menu span {
    opacity: 0; /* 透明度 */
    transition: opacity 0.5s, transform 0.5s; /* 透明度と位置のトランジション */

}

/* ホバー時のスタイリング */
#main_menu li:hover span {
    opacity: 1; /* 透明度を完全に表示 */
}

#contents h4 {
    background: transparent;
    background-image: none !important;
    padding: 20px 0px 0;
}
#contents p {
    transform: translateY(0);
    margin-top: 0px;
}

#footer .grid_6 {
    background: rgba(255, 255, 255, 0.20);
}

#footer .grid_6:nth-of-type(2) {
    background: rgba(255, 255, 255, 0.10);
}

/*#footer .grid_6 {*/
/*    background: var(--color1);*/
/*}*/
section#main_contents .offset-1 {
    margin-left: 8.33333%;
}


/*長崎さんへ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*下記コードをコメントアウトするとFVに線が現れます。*/

header {
    border-bottom: 0px solid #fff;
    z-index: 2;
    position: relative;
}

#main_contents.top_main_contents::after {
    content: "";
    width: 0px;
    height: calc(100% - 40px);
}

.fv_box section#main_contents .offset-1 {
    margin-left: 4%;
}

#main_contents::after {
    content: "";
    width: 0px;
}

/*下記コードをコメントアウトすると下層にSNSリンクが現れます。*/
.sns_links{
    display: none;
}


/*長崎さんへ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


.fv_box .sns_links{
    display: block !important;
}


/*タブレット*/
@media screen and (max-width: 768px){

    #main_nav > div > ul li.active::before,#main_nav > div > ul li::before{
        display: none;
    }

    #main_nav > div > ul li a {
        padding-left: 0;
        display: block;
    }

}


/*スマホ*/
@media screen and (max-width: 667px){
    
    .fv_box {
        position: relative;
        height: 60svh;
    }
    
    #main_contents.top_main_contents {
        position: relative;
        z-index: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        height: calc(60svh - 100px);
    }

    .catch_img {
        position: absolute;
        /* top: 45%; */
        /* transform: translateY(-50%); */
        bottom: 10%;
    }
    
    .map_txt {
        font-size: 15px;
        color: var(--white);
        background: var(--color1);
        padding: 10px 15px;
        line-height: 1.3;
    }
    .cate_list li a {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/*20240507*/

.map_txt {
    background:var(--gray) !important;
    text-align: center;
}



#footer .grid_6,#footer .grid_6 > span.bg_color3 {
    background: var(--gray2);
}
#footer .grid_6:hover > span.bg_color3 {
    background: var(--gray2) !important;
    filter: brightness(0.8);
}
#footer .grid_6:nth-of-type(2),#footer .grid_6:nth-of-type(2) > span.bg_color3  {
    background: var(--gray);
}
#footer .grid_6:nth-of-type(2):hover > span.bg_color3{
    background: var(--gray)!important;
    filter: brightness(0.8);
}


#page09 h3 span {
    background-color: var(--gray);
}




@media screen and (max-width: 768px) {
    img.KOSHIN {
        width: clamp(200px, 90vw, 1000px);
        order: 1;
    }
}


/*スマホ*/
@media screen and (max-width: 667px){
img.KOSHIN {
    width: 100%;
    order: 1;
}
}


/*長崎さんへ　カラーパターン■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*パターン1左上緑・左下オレンジ・右上オレンジ・右下黒*/
/*#top_cms,.fv_box,div#loader::before,.anim_grad::before{*/
/*    background: */
/*        radial-gradient(at 29% 1%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*        radial-gradient(at 50% 0%, hsla(0,0%,88%,0.31) 0px, transparent 50%),*/
/*        radial-gradient(at 0% 99%, hsla(25,100%,76%,1) 0px, transparent 50%),*/
/*        radial-gradient(at 99% 100%, hsla(0,0%,10%,0.79) 0px, transparent 50%),*/
/*        radial-gradient(at 90% 87%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*        radial-gradient(at 80% 100%, hsla(24,100%,76%,1) 0px, transparent 50%),*/
/*        radial-gradient(at 99% 4%, hsla(25,100%,76%,1) 0px, transparent 50%);*/
/*    animation: gradientAnimation 10s linear infinite; */
/*}*/


/*@keyframes gradientAnimation {*/
/*    0% {*/
/*        background-image: */
/*            radial-gradient(at 29% 1%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*            radial-gradient(at 50% 0%, hsla(0,0%,88%,0.31) 0px, transparent 50%),*/
/*            radial-gradient(at 0% 99%, hsla(25,100%,76%,1) 0px, transparent 50%),*/
/*            radial-gradient(at 99% 100%, hsla(0,0%,10%,0.79) 0px, transparent 50%),*/
/*            radial-gradient(at 90% 87%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*            radial-gradient(at 80% 100%, hsla(24,100%,76%,1) 0px, transparent 50%),*/
/*            radial-gradient(at 99% 4%, hsla(25,100%,76%,1) 0px, transparent 50%);*/
/*    }*/

/*    100% {*/
/*        background-image: */
/*            radial-gradient(at 29% 1%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*            radial-gradient(at 50% 0%, hsla(0,0%,88%,0.31) 0px, transparent 50%),*/
/*            radial-gradient(at 0% 99%, hsla(25,100%,76%,1) 0px, transparent 50%),*/
/*            radial-gradient(at 99% 100%, hsla(0,0%,10%,0.79) 0px, transparent 50%),*/
/*            radial-gradient(at 90% 87%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*            radial-gradient(at 80% 100%, hsla(24,100%,76%,1) 0px, transparent 50%),*/
/*            radial-gradient(at 99% 4%, hsla(25,100%,76%,1) 0px, transparent 50%);*/
/*    }*/
/*}*/
/*パターン1左上緑・左下オレンジ・右上オレンジ・右下黒*/

/*パターン2左上くすみオレンジ・左下黒・右緑*/
#top_cms,.fv_box,div#loader::before,.anim_grad::before{
    background: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%) 0px, transparent 50%);
    animation: gradientAnimation 10s linear infinite; 
}

@keyframes gradientAnimation {
    0% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%) 0px, transparent 50%);
    }
    100% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%)0px, transparent 50%);
    }
}
/*パターン2左上くすみオレンジ・左下黒・右緑*/




/*パターン3左上くすみオレンジ・左下黒・右上緑・右下オレンジ*/
/*#top_cms,.fv_box,div#loader::before,.anim_grad::before{*/
/*    background: */
/*radial-gradient(at 38% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 97% 2%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 36%, hsla(120,7%,9%,0.3) 0px, transparent 50%),*/
/*radial-gradient(at 99% 98%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 58% 75%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 100%, hsla(120,7%,9%,0.84) 0px, transparent 50%);*/
/*    animation: gradientAnimation 10s linear infinite; */
/*}*/

/*@keyframes gradientAnimation {*/
/*    0% {*/
/*        background-image: */
/*radial-gradient(at 38% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 97% 2%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 36%, hsla(120,7%,9%,0.3) 0px, transparent 50%),*/
/*radial-gradient(at 99% 98%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 58% 75%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 100%, hsla(120,7%,9%,0.84) 0px, transparent 50%);*/
/*    }*/
/*    100% {*/
/*        background-image: */
/*radial-gradient(at 38% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 97% 2%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 36%, hsla(120,7%,9%,0.3) 0px, transparent 50%),*/
/*radial-gradient(at 99% 98%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 58% 75%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 100%, hsla(120,7%,9%,0.84) 0px, transparent 50%);*/
/*    }*/
/*}*/
/*パターン3左上くすみオレンジ・左下黒・右上緑・右下オレンジ*/


/*パターン4左上黒・左下ミドリ・右上オレンジ・右下黒*/
/*#top_cms,.fv_box,div#loader::before,.anim_grad::before{*/
/*    background: */
/*radial-gradient(at 28% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 30% 54%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(120,7%,9%,0.95) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 2%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 97% 100%, hsla(120,7%,9%,0.95) 0px, transparent 50%);*/
/*    animation: gradientAnimation 10s linear infinite; */
/*}*/

/*@keyframes gradientAnimation {*/
/*    0% {*/
/*        background-image: */
/*radial-gradient(at 28% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 30% 54%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(120,7%,9%,0.95) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 2%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 97% 100%, hsla(120,7%,9%,0.95) 0px, transparent 50%);*/
/*    }*/
/*    100% {*/
/*        background-image: */
/*radial-gradient(at 28% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 30% 54%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(120,7%,9%,0.95) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 2%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 97% 100%, hsla(120,7%,9%,0.95) 0px, transparent 50%);*/
/*    }*/
/*}*/
/*パターン4左上黒・左下ミドリ・右上オレンジ・右下黒*/


/*パターン5左上黒～オレンジ・左下緑・右上オレンジ・右下緑*/
/*#top_cms,.fv_box,div#loader::before,.anim_grad::before{*/
/*    background: */
/*radial-gradient(at 28% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 97%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(120,7%,9%,0.95) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 99% 0%, hsla(20,41%,60%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 74%, hsla(20,41%,60%,1) 0px, transparent 50%);*/
/*    animation: gradientAnimation 10s linear infinite; */
/*}*/

/*@keyframes gradientAnimation {*/
/*    0% {*/
/*        background-image: */
/*radial-gradient(at 28% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 97%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(120,7%,9%,0.95) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 99% 0%, hsla(20,41%,60%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 74%, hsla(20,41%,60%,1) 0px, transparent 50%);*/
/*    }*/
/*    100% {*/
/*        background-image: */
/*radial-gradient(at 28% 0%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 100% 97%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 0%, hsla(120,7%,9%,0.95) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 99% 0%, hsla(20,41%,60%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 74%, hsla(20,41%,60%,1) 0px, transparent 50%);*/
/*    }*/
/*}*/
/*パターン5左上黒～オレンジ・左下緑・右上オレンジ・右下緑*/



/*20240516*/
/*★右に黒を足す・右上の黒の方が濃いver：パターン2左上くすみオレンジ・左下黒・右緑*/
#top_cms,.fv_box,div#loader::before,.anim_grad::before{
    background: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    animation: gradientAnimation 10s linear infinite; 
}

@keyframes gradientAnimation {
    0% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
    100% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%)0px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
}
/*★右に黒を足す・右上の黒の方が濃いver：パターン2左上くすみオレンジ・左下黒・右緑*/


/*★右に黒を足す・右下の黒の方が濃いver：パターン2左上くすみオレンジ・左下黒・右緑*/
/*#top_cms,.fv_box,div#loader::before,.anim_grad::before{*/
/*    background: */
/*radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%) 0px, transparent 50%),*/
/*radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 20%)0px, transparent 50%),*/
/*radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 40%)0px, transparent 50%);*/
/*    animation: gradientAnimation 10s linear infinite; */
/*}*/

/*@keyframes gradientAnimation {*/
/*    0% {*/
/*        background-image: */
/*radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%) 0px, transparent 50%),*/
/*radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 20%)0px, transparent 50%),*/
/*radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 40%)0px, transparent 50%);*/
/*    }*/
/*    100% {*/
/*        background-image: */
/*radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%)0px, transparent 50%),*/
/*radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 20%)0px, transparent 50%),*/
/*radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 40%)0px, transparent 50%);*/
/*    }*/
/*}*/
/*★右に黒を足す・右下の黒の方が濃いver：パターン2左上くすみオレンジ・左下黒・右緑*/

/*★右に黒を足す・全体的にうっすらver：パターン2左上くすみオレンジ・左下黒・右緑*/
/*#top_cms,.fv_box,div#loader::before,.anim_grad::before{*/
/*    background: */
/*radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%) 0px, transparent 50%),*/
/*radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 20%)0px, transparent 50%),*/
/*radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);*/
/*    animation: gradientAnimation 10s linear infinite; */
/*}*/

/*@keyframes gradientAnimation {*/
/*    0% {*/
/*        background-image: */
/*radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%) 0px, transparent 50%),*/
/*radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 20%)0px, transparent 50%),*/
/*radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);*/
/*    }*/
/*    100% {*/
/*        background-image: */
/*radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 4% 1%, hsla(22,81%,72%,1) 0px, transparent 50%),*/
/*radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),*/
/*radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 60%)0px, transparent 50%),*/
/*radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 20%)0px, transparent 50%),*/
/*radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);*/
/*    }*/
/*}*/
/*★右に黒を足す・全体的にうっすらver：パターン2左上くすみオレンジ・左下黒・右緑*/


/*追加修正*/
.cate_list a span {
    background: var(--gray);
}
.cate_list li {
    border: solid 1px var(--gray);
    background: var(--gray);    
}


/*★右に黒を足す・右上の黒の方が濃いver：パターン2左上くすみオレンジ・左下黒・右緑*/
#top_cms,.fv_box,div#loader::before,.anim_grad::before,.image-cell:nth-child(3)::before{
    background: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 100%) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    animation: gradientAnimation 10s linear infinite; 
}

@keyframes gradientAnimation {
    0% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 100%) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
    100% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 0% 98%, hsl(120deg 7% 9% / 100%)0px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
}

.image-cell:nth-child(3)::before{
    opacity: 0.7 !important;
}
/*★右に黒を足す・右上の黒の方が濃いver：パターン2左上くすみオレンジ・左下黒・右緑*/


/*2024517　カラー微調整*/
#top_cms,.fv_box,div#loader::before,.anim_grad::before{
    background: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 98%, hsl(120deg 7% 9% / 100%) 50px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    animation: gradientAnimation 10s linear infinite; 
}

@keyframes gradientAnimation {
    0% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 98%, hsl(120deg 7% 9% / 100%) 50px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
    100% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 98%, hsl(120deg 7% 9% / 100%)50px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
}


.cate_list a {
    color: var(--gray);
}

#page-top{
    background: var(--gray);
}


/*タブレット*/
@media screen and (max-width: 768px){
div#main_menu {
    display: block !important;
}

div#main_menu {
    width: 100% !important;
    position: absolute;
    bottom: 28%;
}
div#main_menu ul.font_en{
    display: none;
}

#main_menu .sns_links li {
    width: 6% !important;
}

 #main_contents #main_menu li:hover::after{
     display: none;
 }

}


/*スマホ*/
@media screen and (max-width: 667px){
    
    #main_menu .sns_links li {
        width: 8% !important;
    }
    
    div#main_menu {
        width: 100% !important;
        position: absolute;
        bottom: 22%;
    }    
}


@media (orientation: landscape) and (max-height: 667px) {
    .fv_box {
        position: relative;
        height: 100svh;
    }
    
div#main_menu {
    display: block !important;
}

div#main_menu {
    width: 100% !important;
    position: absolute;
    bottom: 28%;
}
div#main_menu ul.font_en{
    display: none;
}

#main_menu .sns_links li {
    width: 5% !important;
}

 #main_contents #main_menu li:hover::after{
     display: none;
 }    
    
}

/*20240527*/
.image-cell:nth-child(3)::before{
    background: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 98%, hsl(120deg 7% 9% / 100%) 50px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    animation: gradientAnimation01 10s linear infinite; 
}

@keyframes gradientAnimation01 {
    0% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 98%, hsl(120deg 7% 9% / 100%) 50px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
    100% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 98%, hsl(120deg 7% 9% / 100%)50px, transparent 50%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
}


/*タブレット*/
@media screen and (max-width: 768px){
    
    
#top_cms,.fv_box,div#loader::before,.anim_grad::before{
    background: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 90%, hsl(120deg 7% 9% / 100%) 100px, transparent 80%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    animation: gradientAnimation 10s linear infinite; 
}

@keyframes gradientAnimation {
    0% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 90%, hsl(120deg 7% 9% / 100%) 100px, transparent 80%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
    100% {
        background-image: 
radial-gradient(at 40% 20%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 4% 1%, hsl(38.77deg 35.72% 70.24%) 0px, transparent 50%),
radial-gradient(at 12% 21%, hsla(167,14%,39%,1) 0px, transparent 50%),
radial-gradient(at 20% 90%, hsl(120deg 7% 9% / 100%)100px, transparent 80%),
radial-gradient(at 100% 0%, hsl(100deg 7% 9% / 40%)0px, transparent 50%),
radial-gradient(at 100% 100%, hsl(100deg 7% 9% / 20%)0px, transparent 50%);
    }
}
    
}