@charset "utf-8";

.submenu ul li a.reform_top:link { background:#FED631; }


.div_top { width:100vw; height:100vw; background-repeat:no-repeat ; position:relative; background:url(../img/reform_top_sp.jpg); background-size:cover; overflow:hidden;}
@media screen and (min-width: 960px) {
    .div_top { width:100vw; height:43vw; background:url(../img/reform_top.jpg);background-size:cover; overflow:hidden; }
}
.div_top h1 { width:100%; text-align:center; position:absolute; top:8vw; margin:0 auto; display:block; z-index:1; font-size:18px; font-weight:bold; }
.div_top h1 span { width:100%; display:inline-block; margin-top:30px; }
.div_top h1 .img_title { width:90%; display:block; margin:0 auto;}
.div_top .oneder_all { width:100%; display:block; margin:0 auto; position:absolute; bottom:0; }



@media screen and (min-width: 960px) {
    .div_top h1 span { margin-top:10px; }
    .div_top h1 .img_title { width:45%; margin:0 auto;}
    .div_top .oneder_all { width:40%; margin:0 auto; left:30%; }
}

.div_top .img_hikari {width:100%; margin:0; position:absolute; animation:rotateAnimation 7s linear infinite; top:0; opacity:0.5; }
@media screen and (min-width: 960px) {
.div_top .img_hikari {width:50%; margin:0 25%; top:-100px; opacity:0.5; }
}
@keyframes rotateAnimation {
    from {
        transform: rotate(0deg); /* 初期角度 */
    }
    to {
        transform: rotate(360deg); /* 最終角度 */
    }
}


.contents.top { margin-top:25px; margin-bottom:0; }
@media screen and (min-width: 960px) {
    .contents.top { margin-top:50px; margin-bottom:0; }
}


.btnshine { color:#000; }


.wrap_yellow_gradation { width:100%; background: linear-gradient(to top, #FCCB00, rgb(255, 255, 255, 5)); padding-bottom:100px; }
.wrap_yellow {width: 100%;background: url(../img/bg_yellow.png) repeat-x;background-size:1000px;height:6vw; margin-top:-50px; }
@media screen and (min-width:1000px) {
    .wrap_yellow { height:10vw;}
}
@media screen and (min-width:1200px) {
    .wrap_yellow { height:9vw;}
}
@media screen and (min-width:1320px) {
    .wrap_yellow { height:8vw;}
}
@media screen and (min-width:1500px) {
    .wrap_yellow { height:6.5vw;}
}
@media screen and (min-width:1800px) {
    .wrap_yellow { height:6vw;}
}
@media screen and (min-width:2000px) {
    .wrap_yellow { height:4.5vw;}
}
.site_link { width:100%; text-align:center; margin:50px auto; position:relative; }
@media screen and (min-width: 960px) {
    .site_link { width:590px; text-align:center; margin: 130px auto 150px auto; }

}
.site_link .img_linkbase { width:80vw; }
@media screen and (min-width:320px) {
    .site_link a span { width:100%; text-align:center; font-size:10px; line-height:1.2em; margin-top:15px; margin-bottom:5px; }
}
@media screen and (min-width:375px) {
    .site_link a span {font-size:12px; }
}
@media screen and (min-width:960px) {
    .site_link a span {font-size:15px; }
}

.site_link a { width:26vw; height:26vw; background: radial-gradient(circle, #0C2F54, black); display:flex; align-items:center; border-radius:50%;color:#fff; }
.site_link a span img { margin-top:5px; }
.a_shinchiku { position:absolute; top:20vw; left:-3.5vw; }
.a_design { position:absolute; bottom:-5vw; left:10vw; }
.a_reform { position:absolute; bottom:-5.5vw; right:10vw; }
.a_sos { position:absolute; top:20vw; right:-3.5vw; }
.a_service { position:absolute; top:-10vw; left:31.5vw;  }
@media screen and (min-width: 960px) {
.site_link .img_linkbase { width:500px; }
.site_link a { width:140px; height:140px;}

.site_link a.a_shinchiku:hover { background:#ea6300;}
.site_link a.a_design:hover { background: #006400;}
.site_link a.a_reform:hover { background:#FF00FF;}
.site_link a.a_sos:hover { background: #0084cd;}
.site_link a.a_service:hover {background:#FF0000;}

.site_link a span {  width:100%;text-align:center; }
.a_shinchiku { top:125px; left:0; }
.a_design { top:360px; left:100px; }
.a_reform {top:360px; right:100px; }
.a_sos {top:125px; right:0; }
.a_service { top:-50px; left:222px;  }


/*ワンディちゃんをマウスオーバーで動かす*/
.a_service::before {
    content: url('../img/oneder_red.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    scale:0.35;
    position:absolute; left:-140px; 

  }
  .a_service:hover::before {
    content: url('../img/oneder_red_hover.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    scale:0.35;
    position:absolute; left:-140px; 
  }




  .a_shinchiku::before {
    content: url('../img/oneder_orange.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    scale:0.7;
    position:absolute; left:-150px; 
    bottom:-100px;

  }
  .a_shinchiku:hover::before {
    content: url('../img/oneder_orange_hover.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    margin-right: 5px; /* 画像とリンクテキストの間隔 */
    scale:0.7;
    bottom:-100px;
  }




  .a_design::before {
    content: url('../img/oneder_green.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    scale:0.7;
    position:absolute; left:-150px; 
    top:100px;

  }
  .a_design:hover::before {
    content: url('../img/oneder_green_hover.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    margin-right: 5px; /* 画像とリンクテキストの間隔 */
    scale:0.7;
    top:100px;
  }



  .a_reform::before {
    content: url('../img/oneder_pink.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    scale:0.4;
    position:absolute; 
    right:0; 
    top:0px;

  }
  .a_reform:hover::before {
    content: url('../img/oneder_pink_hover.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    scale:0.4;
    top:0px;
    right:0; 
  }



  .a_sos::before {
    content: url('../img/oneder_blue.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    scale:0.4;
    position:absolute; 
    right:-50px; 
    top:-100px;

  }
  .a_sos:hover::before {
    content: url('../img/oneder_blue_hover.png');
    display: inline-block; /* 画像の表示を有効にするため */
    width: 50px; /* 画像の幅 */
    scale:0.4;
    top:-100px;
    right:-50px; 
  }

}

/*デザインリノベーション*/
.bg_yellow { background:#FDF035; margin-top:-65px; margin-bottom:50px; }
.ul_column3.midori {position: relative; margin-top:20px; }
.contents.design { margin-bottom:0; }
@media screen and (min-width: 960px) {
    .bg_yellow { margin-bottom:100px; }
    .ul_column3.midori::before {
        content: ""; /* 擬似要素の内容は空にする */
        position: absolute;
        top:-150px;
        right: 0;
        width:126px; /* 画像の幅 */
        height:137px; /* 画像の高さ */
        background-image: url('../img/oneder_green.png'); /* 画像のパス */
        background-size: cover; /* 画像を要素に合わせて拡大縮小 */
        /* 他の必要なスタイルを追加 */
        z-index:10;
        animation: tiltAnimation 1s linear infinite alternate;
    }
    
    @keyframes tiltAnimation {
        0% {
            transform: rotate(0deg); /* 初期状態（傾きなし） */
        }
        50% {
            transform: rotate(20deg); /* 50%の時の傾き */
        }
        100% {
            transform: rotate(0deg); /* 最終状態（傾きなし） */
        }
    }
    .contents.design { margin-bottom:50px; }

}

@media screen and (min-width: 960px) {
    .contSect.red { position:relative; }
    .contSect.red::before {
        content: ""; /* 擬似要素の内容は空にする */
        position: absolute;
        top:0px;
        right: 0;
        width: 150px; /* 画像の幅 */
        height: 167px; /* 画像の高さ */
        background-image: url('../img/oneder_red.png'); /* 画像のパス */
        background-size: cover; /* 画像を要素に合わせて拡大縮小 */
        /* 他の必要なスタイルを追加 */
        z-index:10;
        animation: jumpAnimation 1s ease infinite alternate; /* アニメーションを適用 */
    }
    @keyframes jumpAnimation {
        0%, 100% {
            transform: translateY(0); /* 開始と終了位置 */
        }
        50% {
            transform: translateY(-20px); /* 最高点での位置 */
        }
      }
      
    .contents.design { margin-bottom:50px; }

}

.contSect_wrap { width:90%; margin:0 auto;}


.slider .cate_link:hover { opacity:0.7; }