@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');

  
  
:root{--font_: 'M PLUS 2', "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", "sans-serif"}
:root{--font_MPLUS: 'M PLUS 2', "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", "sans-serif";}
:root{--font_RocknRoll: 'RocknRoll One','M PLUS 2', "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", "sans-serif";}

.con1_title,.intro_title, #contents .con_title,h3,h2,h4,h5,h6{font-family:var(--font_RocknRoll) !important;}
body, .font_sans-serif{font-family:var(--font_MPLUS) !important;}
.cms_title p,p.con_no{font-family:var(--font_) !important;}

body {line-height: 2;}

:root{
    --color1:#2aad71;
    --color2:#e03b3b;
    --color3:#0a8e5c;
    --color4:#fff9ed;
    --color5:#fcce38;    
    --white:#fffefc;
    --black:#0d0d0d;
    --pink:#ff356f;
}

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_color1,.hvr_bg_color1:hover{background-color: var(--color1);} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: var(--color5);} /* サブカラー */
.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(--color3);
          border-bottom:solid 1px;
}

/*装飾に便利なposi_rel*/
#contents_box,#contents1,#contents2,#contents3 {position: relative;}
.con1_outer, .con2_outer, .con3_outer {position: relative;}
.img5, .img6, .img7,.txt4,div#contents1 .con_no,div#contents1 p,div#contents1 h2,#attach,.blog_box,.event_box,.top_cms_box1,#page_title .title_img{position: relative;}
/*装飾に便利なposi_rel*/

/*装飾に便利な疑似クラス設定*/
#main_img::before, #main_img::after, #contents_box::before, .con1_outer::after, #attach::before,#attach::after, .con2_outer::before,.con2_outer::after,.con3_outer::before,.con3_outer::after,#page_title .title_img::after,article .width_1280-max::before,div#contents1::before,div#contents1::after,div#contents3::before,#contents2::before,div#contents2::after,#page_title .title_img::after,div#contents1 .con_no::before,div#contents1 p::before,div#contents1 h2::before,.blog_box::before,.event_box::before,.top_cms_box1::before,.top_cms_box1::after,#page_title .title_img::after{
    content: '';
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    z-index: 1;
}

/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*main_img ---------------------------------------------------------------------------------------------*/
.topimg01 {
    max-height: calc(100vh - 100px) !important;
    min-height: calc(100vh - 100px) !important;
    object-fit: cover;
    width: calc(100% - 100px);
    height: calc(100vh - 100px);
    box-sizing: border-box;
    border: solid 7px var(--black);
    top: calc(50% - 19px);
    position: absolute !important;
    left: calc(50% - 13px);
    transform: translate(-50%, -50%);
}


#main_img::before {
    background: var(--color2);
    width: calc(100% - 100px);
    height: calc(100vh - 100px);
    z-index: 0;
    bottom: 25px;
    right: 25px;
}

span.catch img {
    max-width: 500px;
    width: 50%;
    transform: translate(-53%,-70%) !important;}

span.item01 img {
    max-width: 600px;
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%,70%);}
    
span.item02 img {
    max-width: 122px;
    position: absolute;
    bottom: 14%;
    left: 5px;}
span.item03 img {
    max-width: 130px;
    position: absolute;
    top: 40%;
    right: 10px;
}
span.item04 img {
    max-width: 180px;
    position: absolute;
    top: 10%;
    left: 10px;}

/*anime-------------------------------------------*/
span.item04 img,span.item03 img{animation: swing 2s steps(2, start) infinite;}
span.item02 img{animation: swing2 2s steps(2, start) infinite;}

@keyframes swing{
    0%{
        transform:rotate(5deg);
    }
    100%{
        transform:rotate(-5deg);
    }
}
@keyframes swing2{
    0%{
        transform:rotate(-5deg);
    }
    100%{
        transform:rotate(5deg);
    }
}
/*anime-------------------------------------------*/
/*main_img ---------------------------------------------------------------------------------------------*/

/*contents1 ---------------------------------------------------------------------------------------------*/
div#contents1 {
    background-image: url(dup/img/bg_item.png);
    background-size: 280px;
    padding: 200px 10% 230px;
    position: relative;
    background-position: top 0 right 0;
    background-repeat: repeat;
    animation: bgloop 20s linear infinite;
}
@keyframes bgloop {
	0% {background-position: top 0 right 0;}
	100% {background-position: top 280px right -280px;}
}


div#contents1 p, div#contents1 h2 {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    line-height: 2;
    color: var(--white);
    z-index: 1 !important;
    position: relative;
    display: block;
}
div#contents1 h2 {display:inherit !important;}

#contents1::before {
    background: var(--color1);
    max-width: 1000px;
    width: 100%;
    height: calc(100% - 250px);
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(2deg);
    z-index: 0;
    border-radius: 25% 18% 18% 18%/ 34% 34% 30% 29%;
}
#contents1::after {
    background: transparent;
    border: solid 5px var(--color1);
    max-width: 950px;
    width: 100%;
    height: calc(100% - 250px);
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(354deg);
    z-index: 0 !important;
    border-radius: 38% 27% 26% 28%/ 44% 34% 30% 29%;
}
div#contents1 .con_no {padding-right: 0px !important;}
div#contents1 .con_no::before{display:none;}

div#contents1 h2 {text-shadow: 3px 3px 0px var(--color3);}

span.item09 img {
    max-width: 200px;
    position: absolute;
    top: 120px;
    right: calc(50% - 510px);
    transform: translate(50%, 0%);
    z-index: 1;
}

span.item10 img {
    max-width: 230px;
    position: absolute;
    bottom: 90px;
    left: calc(50% - 540px);
    transform: translate(-50%, 0%);
    z-index: 1;
}

span.item05 img {
    max-width: 200px;
    position: absolute;
    top: 70px;
    left: calc(50% - 600px);
    transform: translate(0%, 0%);
    z-index: 1;}
    
span.item06 img {
    max-width: 100px;
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0%, -70%);
    z-index: 1;
}
    
span.item07 img {
    bottom: 13%;
    max-width: 120px;
    position: absolute;
    right: calc(50% - 506px);
    transform: translate(50%, 0%);
    z-index: 1;
}
    
span.item08 img {
    max-width: 90px;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translate(0%, -10%);
    z-index: 1;
}

.con_no::before{display:none;}

/*contents1 ---------------------------------------------------------------------------------------------*/

/*contents2 ---------------------------------------------------------------------------------------------*/

#contents2 {padding: 140px 10% 150px;}

span.item12 img {
    max-width: 150px;
    position: absolute;
    transform: translate(-115px, -110px);
    z-index: 1;
}

figure.img5 img {
    border: solid 7px var(--color2);
    border-radius: 10px;
    box-sizing: border-box;
}

span.item13 img {
    max-width: 150px;
    position: absolute;
    top: 155px;
    transform: translate(-70px, -45px);
    z-index: 1;
}

span.item11 img {
    max-width: 179px;
    right: 0%;
    position: absolute;
    transform: translate(-82px, -90px);
    z-index: 1;
}
/*anime-------------------------------------------*/
span.item11 img{animation: swing3 2s steps(2, start) infinite;}
@keyframes swing3{
    0%{
        transform:translate(-82px, -90px) rotate(5deg);
    }
    100%{
        transform:translate(-82px, -90px) rotate(-5deg);
    }
}


span.item12 img {
	animation: purupuru_anim 3s infinite;
}

@keyframes purupuru_anim {
	0% {	transform: translate(-115px,-110px)}
	5% {	transform: translate(-115px,-115px)}
	10% {	transform: translate(-115px,-105px)}
	15% {	transform: translate(-115px,-115px)}
	20% {	transform: translate(-115px,-105px)}
	25% {	transform: translate(-115px,-115px)}
	30% {	transform: translate(-115px,-110px)}
	100% {	transform: translate(-115px,-110px)}
}

/*anime-------------------------------------------*/
/*contents2 ---------------------------------------------------------------------------------------------*/

/*contents3 ---------------------------------------------------------------------------------------------*/
.svg_box svg {
    display: block;
    fill: currentColor;}

.svg_box.txt_color5 {
    background: var(--white);
    color: var(--color1);}
    
.svg02 {transform: translateY(-1px)rotate(180deg);}

figure.img6,figure.img7{
    border: solid 7px var(--white);
    border-radius: 10px;
    box-sizing: border-box;
}

#contents3::before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 26px;
    /*background: var(--black);*/
    height: 100%;
    background-image: url(../dup/img/loop_txt02.png);
    background-size: 26px auto;
    background-position-y: 0;
    background-position-x: 0;
    background-repeat: repeat-y !important;
    animation: loop02 30s linear infinite;
}

#contents3::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 26px;
    /*background: var(--black);*/
    height: 100%;
    background-image: url(../dup/img/loop_txt02.png);
    background-size: 26px auto;
    background-position-y: 0;
    background-position-x: 0;
    background-repeat: repeat-y !important;
    animation: loop02 30s linear infinite;
    transform: rotate(180deg);      
}

@keyframes loop02 {
	0% {background-position-y: 0;}
	100% {background-position-y: -1040px;}
}


div#contents3 .con_no {
    color: var(--color1);
    text-shadow: var(--white) 1px 1px 0, var(--white) -1px -1px 0,/*右下、左上*/ var(--white) -1px 1px 0, var(--white) 1px -1px 0,/*右上、左下*/ var(--white) 0px 1px 0, var(--white) 0-1px 0,/*右、左*/ var(--white) -1px 0 0, var(--white) 1px 0 0;
}
div#contents3 h3 {
    text-shadow: 2px 2px 0px var(--color3);
    color: var(--white);
}
/*contents3 ---------------------------------------------------------------------------------------------*/
.button:hover {
    text-shadow: 0px 0px 39px var(--color1);
    color: #51ffaf;
    animation: flicker 2s infinite alternate;        
}

.button:hover::after {
    box-shadow: inset 0 0 0 15em var(--black);
    text-shadow: 1px 1px 1px 1px var(--color1);
}
.button {background-color: var(--color3); }

/* Animate neon flicker */
@keyframes flicker {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 1rem var(--color1),
            0.2rem 0.2rem 1rem var(--color1),
            0 0 2rem var(--color1),
            0 0 4rem var(--color1),
            0 0 6rem var(--color1),
            0 0 8rem var(--color1),
            0 0 10rem var(--color1);
        
     
    }
    
    20%,24%, 55% {        
         text-shadow:none
            /*-0.2rem -0.2rem 1rem #ffffff3d,*/
            /*0.2rem 0.2rem 1rem #ffffff3d,*/
    }    
}

/*blog event------------------------------------------*/

.top_cms_box1 {
    background: var(--color1);
    padding: 100px 10%;
}
.event_box, .blog_box {
    padding: 50px;
    background: var(--white);
    border-radius: 50px;
    margin-bottom: 50px;
    border: solid 5px var(--black);
}

.event_box::before {
    background-image: url(dup/img/item15.png);
    max-width: 150px;
    width: 50%;
    height: 33%;
    background-size: contain;
    top: -60px;
    left: -70px;
}

.blog_box::before {
    background-image: url(dup/img/item14.png);
    max-width: 225px;
    width: 50%;
    height: 20%;
    background-size: contain;
    bottom: -49px;
    right: -50px;
}

.blog_box::before {
	animation: purupuru_blog_box 3s infinite;
}

@keyframes purupuru_blog_box {
	0% {	transform: translate(0px,0px)}
	5% {	transform: translate(0px,-5px)}
	10% {	transform: translate(0px,5px)}
	15% {	transform: translate(0px,-5px)}
	20% {	transform: translate(0px,5px)}
	25% {	transform: translate(0px,-5px)}
	30% {	transform: translate(0px,0px)}
	100% {	transform: translate(0px,0px)}
}


.event_box::before{animation: swing_event 2s steps(2, start) infinite;}

@keyframes swing_event{
    0%{
        transform:rotate(5deg);
    }
    100%{
        transform:rotate(-5deg);
    }
}

.top_cms_box1::before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 26px;
    /*background: var(--black);*/
    height: 100%;
    background-image: url(../dup/img/loop_txt02.png);
    background-size: 26px auto;
    background-position-y: 0;
    background-position-x: 0;
    background-repeat: repeat-y !important;
    animation: loop02 30s linear infinite;
}

.top_cms_box1::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 26px;
    /*background: var(--black);*/
    height: 100%;
    background-image: url(../dup/img/loop_txt02.png);
    background-size: 26px auto;
    background-position-y: 0;
    background-position-x: 0;
    background-repeat: repeat-y !important;
    animation: loop02 30s linear infinite;
    transform: rotate(180deg);    
}
/*top■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
header {
    background-color: var(--white) !important;
    border-right: solid 3px var(--color3);
}

footer {
    border-top: dashed 3px var(--color3) !important;
    background: var(--color4);
}
.tel_bt a {color: var(--white);}
.head_banner a {background: var(--color2) !important;}
.head_banner a:hover {background: var(--color1) !important;}

#main_menu ul li a{color:var(--color3);}
#main_menu ul li a::before {
    background-color: var(--color2);
    transition: .3s;
    height: 2px;}

body#body {overflow: hidden;}
/*all■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*sub■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
ul.pager a {
    background: var(--color2);
    color: var(--white);
}

#page_title .title_img::after {
    background-image: url(dup/img/item09.png);
    max-width: 300px;
    max-height: 240px;
    width: 16%;
    height: 79%;
    z-index: 3;
    left: 50%;
    top: 50%;
    background-size: contain;
    transform: translate(-44%, -50%);}

ul.cate_list a {
    background: var(--color2);
    color: var(--white);}

section#page8 .border_color4 {border-color: var(--color1);}

section#page10 a.bg_color2 {
    background: var(--color1);
    color: var(--white);}

section#page10 a.bg_color2:hover {
    background: var(--color3);
    color: var(--white);}

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

@media screen and (max-width: 1350px){
    #contents1::before {max-width: 900px;}
    #contents1::after {max-width: 850px;}
    span.item08 img,span.item06 img {display:none;}
    span.item09 img {
        max-width: 190px;
        position: absolute;
        top: 95px;
        right: calc(50% - 430px);
        transform: translate(50%, 0%);
        z-index: 1;}
    span.item07 img {
        bottom: 19%;
        max-width: 90px;
        position: absolute;
        right: calc(50% - 455px);
        transform: translate(50%, 0%);
        z-index: 1;}
    span.item05 img {
        max-width: 135px;
        position: absolute;
        top: 160px;
        left: calc(50% - 480px);
        transform: translate(0%, 0%);
        z-index: 1;}
    span.item10 img {
        max-width: 180px;
        position: absolute;
        bottom: 81px;
        left: calc(50% - 400px);
        transform: translate(-50%, 0%);
        z-index: 1;} 
    span.item11 img {
        max-width: 179px;
        right: 0%;
        position: absolute;
        transform: translate(-35px, -70px);
        z-index: 1;}
    span.item11 img{animation: swing3 2s steps(2, start) infinite;}        
    @keyframes swing3{
        0%{
            transform:translate(-35px, -70px) rotate(5deg);
        }
        100%{
            transform:translate(-35px, -70px) rotate(-5deg);
        }
    }        
    span.item12 img {
        max-width: 130px;
        position: absolute;
        transform: translate(-100px, -90px);
        z-index: 1;
}
    span.item12 img {animation: purupuru_anim 3s infinite;}
    @keyframes purupuru_anim {
    	0% {	transform: translate(-100px,-90px)}
    	5% {	transform: translate(-100px,-95px)}
    	10% {	transform: translate(-100px,-85px)}
    	15% {	transform: translate(-100px,-95px)}
    	20% {	transform: translate(-100px,-85px)}
    	25% {	transform: translate(-100px,-95px)}
    	30% {	transform: translate(-100px,-90px)}
    	100% {	transform: translate(-100px,-90px)}}    
    span.item13 img {
        max-width: 150px;
        position: absolute;
        top: 50%;
        transform: translate(-70px, -160%);
        z-index: 1;}
    #cms_3-g .box_title1, .cms_3-g .box_title1 {
        display: flex;
        align-items: center;
        white-space: normal;
        width: 80%!important;}
    #cms_3-g .box_txt1, .cms_3-g .box_txt1 {
        margin-left: auto;
        width: 20% !important;}
    
}



@media screen and (max-width: 768px){
    #main_img {
        z-index: 1;
        overflow: hidden;
        position: relative;
        max-height: 70vh !important;
        min-height: 70vh !important;}
        
    .topimg01 {
        max-height: calc(70vh - 50px) !important;
        min-height: calc(70vh - 50px) !important;
        object-fit: cover;
        width: calc(100% - 45px);
        height: calc(70vh - 50px);
        box-sizing: border-box;
        border: solid 7px var(--black);
        top: calc(50% - 5px);
        position: absolute !important;
        left: calc(50% - 0px);
        transform: translate(-50%, -50%);}
        
    header {
        background-color: var(--white) !important;
        border-bottom: solid 3px var(--color3);
        border-right: solid 0px;}
        
    .main_box {
        width: 100%;
        margin-left: 0;
        min-width: inherit;
        padding-top: 90px;}
        
    #main_img::before {
        background: var(--color2);
        width: calc(100% - 50px);
        height: calc(70vh - 50px);
        z-index: 0;
        bottom: 15px;
        right: 10px;}
        
    span.catch img {
        max-width: 500px;
        width: 50%;
        transform: translate(-50%,-65%) !important;}
        
    span.item01 img {
        max-width: 450px;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%,125%);}
        
    span.item03 img {
        max-width: 120px;
        position: absolute;
        top: 38%;
        right: 4px;}
        
    span.item04 img {
        max-width: 155px;
        position: absolute;
        top: 10%;
        left: 3px;}
        
    span.item02 img {
        max-width: 95px;
        position: absolute;
        bottom: 12%;
        left: 2px;
    }
        
    /*ヘッダーロゴ中央寄せ----------------------------------------------*/
    #logo img {
        width: 60%!important;
        display: block;
        margin: 0 auto;}
    /*ヘッダーロゴ中央寄せ----------------------------------------------*/    
    
    .button::after {
        box-shadow: inset 0 0 0 15em var(--black);
        text-shadow: 1px 1px 1px 1px var(--color1);}
        
    .button {
        text-shadow: 0px 0px 39px var(--color1);
        color: #51ffaf;
        animation: flicker 2s infinite alternate;}
    .button:hover{opacity:0.9;}
    
    .top_cms_box1::before,.top_cms_box1::after,#contents3::after,#contents3::before {
        width: 20px;
        background-size: 20px auto;}   
        
     .event_box::before {
        background-image: url(dup/img/item15.png);
        max-width: 120px;
        width: 50%;
        height: 30%;
        background-size: contain;
        top: -60px;
        left: -50px;}
        
    .blog_box::before {
        background-image: url(dup/img/item14.png);
        max-width: 180px;
        width: 50%;
        height: 20%;
        background-size: contain;
        bottom: -49px;
        right: -58px;}
        
    div#contents1 p, div#contents1 h2 {max-width: 650px;}
    #contents1::before {
        height: calc(100% - 230px);
        max-width: 700px;}
    div#contents1 {padding: 180px 10% 200px;}
    
    #contents1::after {
        max-width: 670px;
        height: calc(100% - 220px);
        transform: translate(-50%, -50%) rotate(357deg);}
        
    div#contents1 p.txt3 {
        text-align: left;
        max-width: 580px;
        padding-top: 10px;}
        
    span.item09 img {
        max-width: 160px;
        position: absolute;
        top: 88px;
        right: calc(50% - 327px);
        transform: translate(50%, 0%);
        z-index: 1;}
    span.item07 img {
        bottom: 17%;
        max-width: 75px;
        position: absolute;
        right: calc(50% - 330px);
        transform: translate(50%, 0%);
        z-index: 1;}
    span.item05 img {
        max-width: 115px;
        position: absolute;
        top: 150px;
        left: calc(50% - 385px);
        transform: translate(0%, 0%);
        z-index: 1;}
    span.item10 img {
        max-width: 190px;
        position: absolute;
        bottom: 50px;
        left: calc(50% - 300px);
        transform: translate(-50%, 0%);
        z-index: 1;}
        
    span.item12 img {animation: purupuru_anim 3s infinite;}
    @keyframes purupuru_anim {
    	0% {	transform: translate(-74px,-70px)}
    	5% {	transform: translate(-74px,-75px)}
    	10% {	transform: translate(-74px,-65px)}
    	15% {	transform: translate(-74px,-75px)}
    	20% {	transform: translate(-74px,-65px)}
    	25% {	transform: translate(-74px,-75px)}
    	30% {	transform: translate(-74px,-70px)}
    	100% {	transform: translate(-74px,-70px)}} 
        
    span.item12 img {
        max-width: 100px;
        position: absolute;
        transform: translate(-74px, -70px);
        z-index: 1;}
        
    span.item13 img {
        max-width: 100px;
        position: absolute;
        top: 50%;
        transform: translate(-50px, -5%);
        z-index: 1;}
        
    span.item11 img {max-width: 160px;}
    div#contents3 h3 {font-size: 22px;}
    
    .cms_title h2 {font-size: 25px;}
    
    #page_title .title_img::after {
        background-image: url(dup/img/item09.png);
        max-width: 300px;
        max-height: 240px;
        width: 19%;
        height: 90%;
        transform: translate(-47%, -50%);} 
        
    .svg_box {width: 250%;}        
}


/*スマホ--------------------------------------------------*/
@media screen and (max-width: 667px){
    .main_box{padding-top: 70px;}
    #page_title .title_img::after {
        max-width: 300px;
        max-height: 120px;
        width: 30%;
        height: 90%;}
    /*ロゴ中央・テキスト左寄せ----------------------------------------------*/
    footer .logo{
            text-align: center;
            display: block;}
    footer .grid_5 {text-align: center;}
    p.footer_cms {
        text-align: left;
        display: inline-block;}
    /*ロゴ中央・テキスト左寄せ----------------------------------------------*/
    
    .page_box h2 {font-size: 25px !important;}
    .font_2dw_tb {
        font-size: -webkit-calc(1rem - 2px) !important;
        font-size: calc(1rem - 2px) !important;}
    #cms_3-g .box_txt1, .cms_3-g .box_txt1 {width: 100% !important;}
    #cms_3-g .box_title1, .cms_3-g .box_title1 {width: 100%!important;}    
    #cms_3-g .box_title1 .title_item, .cms_3-g .box_title1 .title_item {max-width: 100%;}    
    
    .topimg01 {
        max-height: calc(60vh - 50px) !important;
        min-height: calc(60vh - 50px) !important;
        width: calc(100% - 50px);
        height: calc(60vh - 50px);
        box-sizing: border-box;
        border: solid 5px var(--black);
        top: calc(50% - 5px);
        position: absolute !important;
        left: calc(50% - 0px);
        transform: translate(-50%, -50%);}
        
    #main_img {
        max-height: 60vh !important;
        min-height: 60vh !important;}
    #main_img::before {
        width: calc(100% - 50px);
        height: calc(60vh - 50px);
        bottom: 15px;
        right: 10px;}
        
    span.item04 img {
        max-width: 75px;
        top: 10%;
        left: 0px;}
    span.item03 img {
        max-width: 65px;
        top: 38%;
        right: 4px;} 
    span.catch img {
        max-width: 300px;
        width: 60%;
        transform: translate(-50%,-59%) !important;}       
    span.item02 img {
        max-width: 55px;
        bottom: 11%;
        left: -1px;}
    span.item01 img {
        max-width: 300px;
        width: 70%;
        transform: translate(-50%,168%);        }
        
    .top_cms_box1::before, .top_cms_box1::after, #contents3::after, #contents3::before {
        width: 13px;
        background-size: 13px auto;
        z-index: 0;} 
        
    .event_box, .blog_box {
        padding: 40px 20px;
        background: var(--white);
        border-radius: 20px;
        margin-bottom: 50px;
        border: solid 4px var(--black);}        
     .top_cms_box1 {padding: 100px 7%;}
     .top_cms_box1 .more a {width: 90% !important;}
     
    .topcms_news_type2 .cate_box .grid_3 {width: 35% !important;} 
    .topcms_news_type2 .cate_box .grid_9 {width: 65% !important;}     
    .blog_box .more {margin-top: 20px;}      
    .event_box .more {margin-top: 50px;}
    .link_type_slick .box_title1 {font-size: 15px !important;}    
    .event_box::before {
        max-width: 80px;
        width: 50%;
        height: 30%;
        top: -43px;
        left: -28px;}    
        
    .blog_box::before {
        background-image: url(dup/img/item14.png);
        max-width: 110px;
        width: 50%;
        height: 15%;
        background-size: contain;
        bottom: -74px;
        right: -24px;}    
        
    #contents1::before {
        background: var(--color1);
        max-width: 300px;
        width: 100%;
        height: calc(100% - 100px);
        margin: 0 auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        z-index: 0;
        border-radius: 10px;}   
    #contents1::after{display:none !important;}     
    div#contents1 {
        background-size: 200px;
        padding: 100px 10% 100px;
        animation: bgloop 20s linear infinite;}
    @keyframes bgloop {
    	0% {background-position: top 0 right 0;}
    	100% {background-position: top 200px right -200px;}
    }    
    
    #contents1::before {
        background: var(--color1);
        max-width: inherit;
        width: 90%;
        height: calc(100% - 150px);
        margin: 0 auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        z-index: 0;
        border-radius: 10px;}        
    span.item10 img {
        max-width: 100px;
        top: 30px;
        left: -1%;
        transform: translate(0%, 0%);
        z-index: 1;}
    span.item09 img {
        max-width: 80px;
        top: auto;
        left: auto;
        right: 0%;
        transform: translate(0%, 0%);
        z-index: 1;
        bottom: 40px;}
     span.item07 img,span.item05 img {display:none;}
     #contents2 {padding: 100px 10% 150px;}
     
    span.item12 img {
        max-width: 80px;
        position: absolute;
        transform: translate(-30px, -74px) rotate(11deg);
        z-index: 1;}
    span.item12 img {animation: purupuru_anim 3s infinite;}
    @keyframes purupuru_anim {
    	0% {	transform: translate(-30px,-74px)}
    	5% {	transform: translate(-30px,-76px)}
    	10% {	transform: translate(-30px,-72px)}
    	15% {	transform: translate(-30px,-76px)}
    	20% {	transform: translate(-30px,-72px)}
    	25% {	transform: translate(-30px,-76px)}
    	30% {	transform: translate(-30px,-74px)}
    	100% {	transform: translate(-30px,-74px)}
        
    } 
    	
    span.item13 img{display: none;}  
    
    span.item11 img {max-width: 130px;
                    transform: translate(-12px, -55px);}

    span.item11 img{animation: swing3 2s steps(2, start) infinite;}        
    @keyframes swing3{
        0%{
            transform:translate(-12px, -55px) rotate(5deg);
        }
        100%{
            transform:translate(-12px, -55px) rotate(-5deg);
        }
    }
}

/*コード集1 ---------------------------------------------------------------------------------------------*/

.link_type_slick .slick-box .next {right: -130px !important;}
.link_type_slick .slick-box .prev {left: -130px !important;}
.slick-box img{width:80px;}

.link_type_slick .box_title1 {
    display: block;
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link_type_slick .box_txt1 {
    height: 6em;
	line-height: 1.7;
}
.link_type_slick .date {
    padding: 9px 22px 7px;
    border-radius: 45px;
}
.slick-slide img {
    box-shadow: 0 2px 4px rgb(0 0 0 / 0%);
}
/*--- slick ------------------------------------*/
.link_type_slick .slick-box{
    opacity: 0;
    transition: 3s;
}
.link_type_slick .slick-initialized{
    opacity: 1
}
.link_type_slick .slick-box .prev,.slick-box .next {
    display: block;
	cursor: pointer;
	position: absolute;
	top: 40%;
	z-index: 1;
	padding: 15px;
}
.link_type_slick .slick-container{
    padding-left: 30px;
    padding-right: 30px;
}
/*.link_type_slick .slick-box .prev {*/
/*	left: -54px;*/
/*}*/
/*.link_type_slick .slick-box .next {*/
/*	right: -54px;*/
/*}*/
/* Dots */
.link_type_slick .slick-dots{
    position: absolute;
    bottom: -35px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.link_type_slick .slick-dots li{
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}
.link_type_slick .slick-dots li button{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.link_type_slick .slick-dots li button:hover,
.link_type_slick .slick-dots li button:focus{
    outline: none;
}
.link_type_slick .slick-dots li button:hover:before,
.link_type_slick .slick-dots li button:focus:before{
    opacity: 1;
}
.link_type_slick .slick-dots li button:before{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '●';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.link_type_slick .slick-dots li.slick-active button:before{
    opacity: .75;
    color: black;
}
/* 最後まで行ったら、矢印透過する */
.link_type_slick .slick-disabled{
	opacity: 0.3;
}
/* 要素の高さを合わせる */
.link_type_slick .slick-slide {
	height: auto !important;
}
.link_type_slick .slick-track {
	display: flex;
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.link_type_slick .slick-container{
    padding-left: 0;
    padding-right: 0;
}
/*.link_type_slick .slick-box .prev {*/
/*	left: -8px;*/
/*}*/
/*.link_type_slick .slick-box .next {*/
/*	right: -8px;*/
/*}*/
/* 両サイドの画像を透過 */
.link_type_slick .slick-initialized .slick-slide{
	opacity: 0.1; 
}
/* センター画像を非透過 */
.link_type_slick .slick-initialized .slick-slide.slick-center{
	opacity: 1; 
}

    .slick-arrow img {width: 40px !important;}
    .link_type_slick .slick-box .next {right: -50px !important;}
    .link_type_slick .slick-box .prev {left: -50px !important;}  
    .slick-container .txt_box {padding-top: 0px;}
    .link_type_slick .slick-box .prev, .slick-box .next {top: 30%;}    
}
/*コード集1 ---------------------------------------------------------------------------------------------*/

/*コード集2 ---------------------------------------------------------------------------------------------*/
.txt_anim6 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;
}
.txt_anim6 span.start{
	-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);}
}
/*コード集2 ---------------------------------------------------------------------------------------------*/

/*コード集3 ---------------------------------------------------------------------------------------------*/
.topcms_news_type2 .cate_box {
	width: 100%!important;
	margin-right: 1.5%;
	margin-left: 1.5%;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	margin-bottom: 30px;
	box-shadow: 0 6px 12px rgb(0 0 0 / 0);
	/* padding: 20px; */
	/* border-radius: 20px; */
	/* background-color: #f5f5f5; */
}
.topcms_news_type2 .cate_box:hover {
	transform: translateY(-5px);
}
.topcms_news_type2 .cate_box .box_item {
	cursor: pointer;
}
.topcms_news_type2 .txt_height {
	height: 5em
}
.topcms_news_type2 .box_img1 {
	border-radius: 10px;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.topcms_news_type2 .cate_box {width: 100%!important;}
.topcms_news_type2 .txt_height {height: 3em}
}
/*コード集3 ---------------------------------------------------------------------------------------------*/


p.con_no {font-size: 25px;}
html, body {
    font-size: 16px;
}
/* フォントサイズ */
.font_10{font-size: 13px;}.font_11{font-size: 14px;}.font_12{font-size: 15px;}.font_13{font-size: 16px;}
.font_14{font-size: 18px;}.font_15{font-size: 18px;}.font_16{font-size: 19px;}.font_17{font-size: 20px;}
.font_18{font-size: 21px;}.font_19{font-size: 22px;}.font_20{font-size: 23px;}.font_21{font-size: 24px;}
.font_22{font-size: 25px;}.font_23{font-size: 26px;}.font_24{font-size: 27px;}.font_25{font-size: 28px;}
.font_26{font-size: 29px;}.font_27{font-size: 30px;}.font_28{font-size: 31px;}.font_29{font-size: 32px;}
.font_50{font-size: 53px;}

/* フォントサイズ 基準値から+- */
.font_100per{font-size:-webkit-calc(1rem + 2px);font-size : calc(1rem + 2px);}
.font_200per{font-size:-webkit-calc(2rem + 2px);font-size : calc(2rem + 2px);}
.font_2up{font-size:-webkit-calc(1rem + 4px);font-size : calc(1rem + 4px);}
.font_4up{font-size:-webkit-calc(1rem + 6px);font-size : calc(1rem + 6px);}
.font_6up{font-size:-webkit-calc(1rem + 8px);font-size : calc(1rem + 8px);}
.font_8up{font-size:-webkit-calc(1rem + 10px);font-size : calc(1rem + 10px);}
.font_2dw{font-size:-webkit-calc(1rem - 0px);font-size : calc(1rem - 0px);}
.font_4dw{font-size:-webkit-calc(1rem - 2px);font-size : calc(1rem - 2px);}
.font_6dw{font-size:-webkit-calc(1rem - 4px);font-size : calc(1rem - 4px);}
.font_8dw{font-size:-webkit-calc(1rem - 6px);font-size : calc(1rem - 6px);}

/*タブレット*/
@media screen and (max-width: 768px){
/* フォントサイズ　タブレット */
.font_10_tb{font-size: 13px;}.font_11_tb{font-size: 14px;}.font_12_tb{font-size: 15px;}.font_13_tb{font-size: 16px;}
.font_14_tb{font-size: 18px;}.font_15_tb{font-size: 18px;}.font_16_tb{font-size: 18px;}.font_17_tb{font-size: 20px;}
.font_18_tb{font-size: 21px;}.font_19_tb{font-size: 22px;}.font_20_tb{font-size: 23px;}.font_21_tb{font-size: 24px;}
.font_22_tb{font-size: 25px;}.font_23_tb{font-size: 26px;}.font_24_tb{font-size: 27px;}.font_25_tb{font-size: 28px;}
.font_26_tb{font-size: 29px;}.font_27_tb{font-size: 30px;}.font_28_tb{font-size: 31px;}.font_29_tb{font-size: 32px;}
.font_50_tb{font-size: 53px;}

/* フォントサイズ 基準値から+- */
.font_100per_tb{font-size:-webkit-calc(1rem + 2px);font-size : calc(1rem + 2px);}
.font_200per_tb{font-size:-webkit-calc(2rem + 2px);font-size : calc(2rem + 2px);}
.font_2up_tb{font-size:-webkit-calc(1rem + 4px);font-size : calc(1rem + 4px);}
.font_4up_tb{font-size:-webkit-calc(1rem + 6px);font-size : calc(1rem + 6px);}
.font_6up_tb{font-size:-webkit-calc(1rem + 8px);font-size : calc(1rem + 8px);}
.font_8up_tb{font-size:-webkit-calc(1rem + 10px);font-size : calc(1rem + 10px);}
.font_2dw_tb{font-size:-webkit-calc(1rem - 0px);font-size : calc(1rem - 0px);}
.fat-nav li {font-size: 19px;}
html, body {font-size: 17px;}
.font_14 {font-size: 17px;}

}


/*スマホ*/
@media screen and (max-width: 667px){
/* フォントサイズ　スマホ */
.font_14 {font-size: 16px;}
.font_10_sp{font-size: 13px;}.font_11_sp{font-size: 14px;}.font_12_sp{font-size: 15px;}.font_13_sp{font-size: 16px;}
.font_14_sp{font-size: 16px;}.font_15_sp{font-size: 17px;}.font_16_sp{font-size: 18px;}.font_17_sp{font-size: 20px;}
.font_18_sp{font-size: 21px;}.font_19_sp{font-size: 22px;}.font_20_sp{font-size: 23px;}.font_21_sp{font-size: 24px;}
.font_22_sp{font-size: 25px;}.font_23_sp{font-size: 26px;}.font_24_sp{font-size: 27px;}.font_25_sp{font-size: 28px;}
.font_26_sp{font-size: 29px;}.font_27_sp{font-size: 30px;}.font_28_sp{font-size: 31px;}.font_29_sp{font-size: 32px;}


/* フォントサイズ 基準値から+- */
.font_100per_sp{font-size:-webkit-calc(1rem + 2px);font-size : calc(1rem + 2px);}
.font_200per_sp{font-size:-webkit-calc(2rem + 2px);font-size : calc(2rem + 2px);}
.font_2up_sp{font-size:-webkit-calc(1rem + 4px);font-size : calc(1rem + 4px);}
.font_4up_sp{font-size:-webkit-calc(1rem + 6px);font-size : calc(1rem + 6px);}
.font_6up_sp{font-size:-webkit-calc(1rem + 8px);font-size : calc(1rem + 8px);}
.font_8up_sp{font-size:-webkit-calc(1rem + 10px);font-size : calc(1rem + 10px);}
.font_2dw_sp{font-size:-webkit-calc(1rem - 0px);font-size : calc(1rem - 0px);}
.font_14 {font-size: 16px;}
.fat-nav li {font-size: 16px;}
}



/*20230307*/
#page_title .title_img {background-position: center bottom 28%;}