@charset "utf-8";
body#main{

    #check{
        position: relative;
        width:70px;
        
    }
    #message{
        color: rgb(255, 213, 0);
    }
    #back6{
        position: relative;
        top:450px;
        left:-600px;
        width: 200px;
    }

    #link5{
       width:200px;
       height:200px;
       position: relative;
       top:-225px;
       left:500px;
       text-decoration: none;
       color:#124d10;
        
       
    }
    #naw{
        position: relative;
        right:1230px;
    }
    
    margin: 0 auto;
    background-color: #926c4d;
    text-align: center;
    

    header{
        width:100%;
        text-align: center;
    }

    #hed{
        background-color: #526935;
        width:100%;
    
    }
    #title{
        opacity: 0;
    }

    #top{
        opacity: 0;
        position: relative;  
        display: flex;
        width: 80%;
        height: 600px;
        margin: 50px auto;
    }

    #img2,#img3,#img1{
        display: none;
    }
    .slide {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: solid 10px #181717;
    }

    /*main領域　main*/
    #main {
        margin: 0 auto;
        width:75%;
        background-color: #deb887;
        border: 3px solid #8b5a2b;
        border-radius: 6px;
        padding: 16px;
        color: #2e2e2e;
    }

    #main h2 {
        color: #3e7320;
        margin-bottom: 10px;
    }

    #main a {
        display: block;
        line-height: 1.6;
    }


    /*main領域　rink1*/
    #rink1{
        position: relative;
        width: 50%;
        text-align: center;
        margin-top: 200px;
        left:-800px;
        
    }
    #rink1 h2{
        position: relative;
        width:70%;
        font-family:  "Rock Salt", cursive;
        margin: 0;
        color:#ffffff;
        font-size:70px;
        opacity: 0;
        font-weight: bold;
        z-index: 10;
        top:20px;

    }
    #rink1 a{
        left:20%;
        width:400px;
        display: flex;
        position: relative; 
        
    }

    #rink1 a #back1{
        position: absolute;
        display: flex;
        top: -200px;
        z-index: 1;
    
    }

    #rink1 a #rink1_1{
        position: absolute;
        display: flex;
        width: 100%;
        height: 400px;
    
        border-radius: 100px;
        z-index: 3;
    
    }
    #rink1 a #rink1_2{
        
        position: absolute;
        display: flex;
        top: -200px;
        left:300px;
        height: 500px;
        z-index: 4;
    }

    /*バックイメージ*/
    #back2{
        position: absolute;
        right:5%;
        top:680px;
        margin-bottom: 30px;
    }

    #back3{
        position: absolute;
        right:10%;
        width: 600px;
        top:1300px;
        transform: rotate(15deg);
    }

    /*main領域　rink2*/
    #rink2{
        position: absolute;
        width: 50%;
        margin: 0 auto;
        margin-right: 10%;
        margin-top: 100px;
        right:-60px;
        display: none;
    }

    #rink2 h2{
        width:100%;
        font-family:  "Rock Salt", cursive;
        margin: 0 auto;
        text-align: right;
        color:#f6f6f6;
        font-size:70px;
        opacity: 0;
    }
    #rink2 a{
        width:100%;
        display: flex;
        position: relative; 
    }

    #rink2 a #rink2_1{
        display: flex;
        width: 100%;
        height: 400px;
        border-radius: 100px;
    
    }
    #rink3{
        position: relative;
        right:400px;
        top:-100px;
    }
    #rink3 h2{
        position: relative;
        top: 1000px;
        left:700px;
        z-index: 3;
        font-size: 40px;
        width:300px;
        color: #3BA3A9;
    }
    #rink3 a{
         text-decoration: none;
    }
    
    #rink3_1{
        position: relative;
        top:570px;
        z-index: 1;
    }

    #rink4{
        width:40%;
        border: solid 10px #3A2A1D;
        background-color: #bca988;
        position: relative;
        left:700px;
        top:200px;
        padding: 0 10px 10px 10px;
    }

    #form{
        text-align: center;
    }

    form{
        position: relative;
        width:50%;
        border:inset 10px #6b4c2a;
        background-color: #a87549;
        color: #3a2a1a;
        margin: 0 auto;
        

        dl {
            margin: 10px 0;
        }

        dt {
            margin-bottom: 5px;
        }

       textarea {
            border: 1px solid #3a2a1a; 
            padding: 5px;
            width:70%;
            background-color:#bca988;
        }
        input{
            border: 1px solid #3a2a1a; 
            padding: 5px;
            width:70%;
            background-color:#bca988;
        }

        button {
            border: 1px solid#6b4c2a;
            background: #3a2a1a;
            padding: 5px 10px;
            color: #fff;
        }

    }

    #back4{
        position: relative;
        top:-600px;
        right:400px;
    }
    #back5{
        position: relative;
        top:-400px;
        left:400px;
    }

    #naw{
        position: relative;
        
    }
    
}

body#suv{
    background-color: #bdbdbd;
    height:4000px;

    #back6{
        position: relative;
        top:-2900px;
        left: 800px;
    }
    #back7{
        position: relative;
        top:-800px;
        left: 800px;
    }
    #back8{
        position: relative;
        top:-1900px;
    }
    #back9{
        position: relative;
        top:-3750px;
        right: 100px;
        z-index: 20;
    }

    #naw{
        position: relative;
        right:850px;
    }

    div#hed{
        position: relative; 
        transform: rotate(-18deg);
        font-size: 60px;
        width:30%;
        font-family:  "Rock Salt", cursive;
        z-index: 11;
        
    }

    #div1{
        position: relative; 
        top:-1280px;
        left:500px;
        width:40%;
        background-color: #ffb224;
        padding: 40px;
        font-size: 23px;
        transform: rotate(5deg);
        z-index: 7;
    }
    #div1_1{
        width:60%;
    }
     
    #mob1{
        left:65%;
        position: relative;
        width:30%;
        top:-200px;
        z-index: 10;
    }
    #video1{
        position: relative; 
        width:50%;
        left:-350px;
        top:-350px;
        border: inset 20px #3A2A1D;
        opacity: 0.8;
        z-index: 8;

    }
    #ishi1{
        position: relative;
        top:-600px;
        left:42%;
        width:320px;
        z-index: 9;
    }

    #main1{
        position: relative; 
        top:-700px;
    }

    #title2{
        text-align: center;
        background-color: #6A8F48;
        font-size: 80px;
        width: 40%;
        font-family:  "Rock Salt", cursive;
        color: #FFB400;
        border: groove #808080 10px;
        transform: rotate(5deg);
        z-index: 10;

    }

    #but1{
        position: relative;
        width:1200px;
        height:710px;
        display: flex;
        margin: 0;
        background-image: url(../images/Image51.jpg);
        transform: rotate(-7deg);
        border: inset 10px #8b5a2b;
    }

    #but1_3{
        position: relative; 
        top:440px;
        left:190px;
        width: 600px;
        transform: rotate(20deg);
        border: inset 10px #792b8b;
    }

    #but1_moji1{
        width: 600px;
        text-align: left;
        padding: 0;
        position: relative; 
        color: #fff;
        font-size: 30px;
        left:-100px;
        top:-300px;

       
    }
    #but1_1{
        position: relative;
        width: 180px;
        top:-120px;
        left:1070px;
        transform: rotate(-90deg);
    }
    #but1_4{
        position: relative;
        width: 400px;
        top:300px;
        
    }

    #but1_2{
        position: relative;
        font-family:  "Rock Salt", cursive;
        color: #a76c07;
        font-size: 120px;
        top:-700px;
        left:100px;
    }

    


    #but2{
        position: relative;
        width:1200px;
        height:710px;
        display: flex;
        left: 160px;
        margin: 0;
        background-image: url(../images/Image32.jpg);
        border: inset 10px #8b5a2b;
    }

    #but2_1{
        position: relative;
        left: -200px;
    }

    #but2_2{
        position: relative;
        width:300px;
        left: 400px;
    }

    #but2_3{
        position: relative;
        font-family:  "Rock Salt", cursive;
        color: #ff06b8;
        font-size: 120px;
        top:-940px;
        left:100px;
    }

    #but2_4{
        position: relative;
        left:150px;
        top: -100px;
    }

    #but2_moji1{
        width: 600px;
        text-align: left;
        padding: 0;
        position: relative; 
        color: #fff;
        font-size: 30px;
        left:150px;
        top:-550px;  
    }
   

    #but3{
        position: relative;
        width:1200px;
        height:710px;
        margin: 0;
        top:150px;
        transform: rotate(7deg);
        border: inset 10px #ffe600;
        background-image: url(../images/Image22.jpg);
    }

    #but3_1{
        position: relative;
        width:500px;
        top:500px;
    }
    #but3_2{
        position: relative;
        left:400px;
        top:300px;
    }
    #but3_3{
        position: relative;
        right:360px;
        top:300px;
    }
    #but3_4{
        position: relative;
        font-family:  "Rock Salt", cursive;
        color: #ff2306;
        font-size: 120px;
        top:-600px;
        left:300px;
    }

    #but3_moji1{
        width: 600px;
        text-align: left;
        padding: 0;
        position: relative; 
        color: #fff;
        font-size: 30px; 
        top:-580px;
        left:70px;
        transform: rotate(-7deg);

    }

    #but3_moji2{
        width: 200px;
        text-align: left;
        padding: 0;
        position: relative; 
        color: #000000;
        top:-200px;
        left:1200px;
        font-size: 25px; 
        background-color: #e297e6;
        border-left: solid 20px #792b8b;
    }

    #video2{
        border:inset 10px #97d8e6;
        transform: rotate(-7deg);

    }
    #but4_3{
        position: relative;
        left:200px;
        font-family:  "Rock Salt", cursive;
        color: #a8ff06;
        font-size: 160px;
    }
    #but4{
        background-color: #93873a;
        position: relative;
        height:600px;
        top:100px;
    }
    #but4_div1{
        position: relative;
        top:-550px;
    }
    #but4_div1_1{
        display: flex;
    }
    #but4_moji1{
        padding-left: 20px;
        color: #ffffff;
        font-size: 30px;
        z-index: 2;
    }
    #but4_1{
        position: relative;
        left:1000px;
        top:200px;
    }
    #but4_2{
        position: relative;
        top:800px;
        left:700px;
        z-index:1;
    }
}

body#cre{
    background-color: #97d8e6;

    #naw{
        position: relative;
        right:500px;
    }

    #title{
        font-family:  "Rock Salt", cursive;
        font-size: 100px;
        width: 500px;
        padding: 0;
        margin: 0;
        color: #fff;
    }

    #hed_moji1{
        background-color: #00ff91;
        width:80%;
        margin: 0 auto;
        font-size: 20px;
        border: solid 1px #01700c;
        border-left: groove 30px #01700c;
        padding: 10px;
    }
    #hed_moji1 a{
        width:75%;
    }

    #hed_img1{
        position: relative;
        left:1100px;
        top:-100px;
    }
    #hed_img2{
        position: relative;
        left:240px;
        top:-460px;
    }  
    #name1{
        position: absolute;
        top:300px;
        left:750px;
        background-color: #fff;
        border: inset 10px #e0e0e0;
        font-size: 40px;
        padding: 20px;
        width:300px;
        z-index: 20;
        opacity: 0;

    } 
    #name2{
        position: absolute;
        top:10px;
        left:700px;
        background-color: #fff;
        border: inset 10px #e0e0e0;
        font-size: 40px;
        padding: 20px;
        width:300px;
        z-index: 20;
        opacity: 0;
    }
    #div1{
        width:80%;
    }
    #but1{
        position: relative;
        left: 20%;
    } 

    #but1_1{
        position: absolute;
        font-family:  "Rock Salt", cursive;
        font-size: 70px;
        top:-200px;

    }
    #but1_moji1{
        position: absolute;
        top:-100px;
        width:700px;
        font-size: 20px;
    }

    #but1_2{
         position: relative;
        right:120px;
        top:50px;
    }
    #but1_3{
         position: relative;
        right:160px;
        top:-300px;
        opacity: 0;
    }
    #but1_4{
         position: relative;
        right:140px;
        top:-200px;
        opacity: 0;
    }
    #but1_5{
         position: relative;
        right:300px;
        top:-100px;
        opacity: 0;
    }

    #but1_moji2{
        position: relative;
        left: 800px;
        width: 200px;
        border-left: solid 5px #1c6bff;
        padding: 5px;
        background-color: #99bdff;
    }

    

    #video3{
        width: 700px;
        border:inset 10px #ffffff
    }

    #div2{
        width:80%;
        
    }
    #but2{
        margin-left:20%;
    }

    

    #but2_1{
       
        font-family:  "Rock Salt", cursive;
        font-size: 70px;            
    }

    #but2_2{
       width:95%;
       border: inset 10px #fff;            
    }
    #but2_3{
        position: relative;
        left:700px;
        top:-150px;
       width:500px;  
       border: inset 10px #ab4d1d;           
    }

    #but2_moji1{
        font-size: 20px;
    }
}

body#mob{
    
    color: #381901;
    background-color: #379d59;
    width:100%;
    text-align: center;
    position: relative;

    #naw{
        position: relative;
        right:130px;
    }
    
    header{
        font-family:  "Rock Salt", cursive;
        font-size: 40px;
    }
    /*エンドラ*/
    #div1{
        
        background-color: #d5c98c;
        width:50%;
         border-radius: 400px;
         width:800px;
         height:800px;

        #but1_main1{
            position: relative;
            left:200px;
        }
        #but1_main2{
            position: relative;
            top:-100px;
            width:600px;
        }

        #but1_name1{
            position: absolute;
            color: #792b8b;
            width:400px;
            font-size: 30px;
            top:300px;
        }
        #main_moji1{
            position: absolute;
            top:400px;
            left:100px;
            width:20%;
        }


        
        #but1_1 {
            border: solid 1px #8b5a2b;
            position: absolute;
            display: none;
            z-index: 30;
            background-color: #f991f9;
            padding: 20px;
            max-width: 1000px;
            margin: auto;
            box-sizing: border-box;
            left:55%;
            top:120px;
        }

        #but1_name1 {
            font-size: 32px;
            font-weight: bold;
            display: block;
            margin-bottom: 15px;
            text-align: center;
        }

        #main_moji1 {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            text-align: left;
        }

        #but1_mob1,#but1_mob2 {
            display:flex; 
        }

        .mob1 {
            border: inset 3px #e0ef0e;
            border-radius: 6px;
            width:300px;
            height:400px;
            padding: 12px;
            display: flex;
            flex-direction: column; 
            align-items: center;
            box-sizing: border-box;
            background-color: #fdfdfd;
        }

        #title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 8px;
            text-align: center;
        }

        #moji1 {
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 10px;
            text-align: left;
        }

        .mob1 img {
            width: 100%;
            max-width: 200px;
            height: auto;
            border-radius: 4px;
        }


    }
    /*ウィザー*/
    #div2{
        position: relative;
        background-color: #5a412c;
        width:50%;
         border-radius: 400px;
         width:800px;
         height:800px;
         left:550px;

        #but1_main1{
            position: relative;
            left:200px;
        }
        #but1_main2{
            position: relative;
            top:-100px;
            width:400px;
        }

        #title_moji{
            color:white;
        }

        #but1_name1{
            position: absolute;
            color: #ff0000;
            width:400px;
            font-size: 30px;
            top:200px;
        }
        #main_moji1{
            position: absolute;
            top:300px;
            left:100px;
            width:20%;
            color: #fff;
        }


        
        #but1_1 {
            border: solid 1px #000000;
            position: absolute;
            display: none;
            z-index: 30;
            background-color: #a82b2b;
            padding: 20px;
            max-width: 1000px;
            margin: auto;
            box-sizing: border-box;
            right:700px;
            top:0px;
        }

        #but1_name1 {
            font-size: 32px;
            font-weight: bold;
            display: block;
            margin-bottom: 15px;
            text-align: center;
        }

        #main_moji1 {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            text-align: left;
        }

        #but1_mob1,#but1_mob2 {
            display:flex; 
        }

        .mob1 {
            border: inset 3px #e0ef0e;
            border-radius: 6px;
            width:300px;
            height:400px;
            padding: 12px;
            display: flex;
            flex-direction: column; 
            align-items: center;
            box-sizing: border-box;
            background-color: #fdfdfd;
        }

        #title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 8px;
            text-align: center;
        }

        #moji1 {
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 10px;
            text-align: left;
        }

        .mob1 img {
            width: 100%;
            max-width: 200px;
            height: auto;
            border-radius: 4px;
        }

    }
    /*ウォーデン*/
    #div5{
        
        position: relative;
        background-color: #2C2C2C;
        width:50%;
         border-radius: 400px;
         width:800px;
         height:800px;

        #title_moji{
            color:white;
        }

        #but1_main1{
            position: relative;
            left:200px;
            width:800px;
        }
        #but1_main2{
            position: relative;
            top:-200px;
            width:500px;
        }

        #but1_name1{
            position: absolute;
            color: #0046b8;
            width:400px;
            font-size: 30px;
            top:200px;
        }
        #main_moji1{
            position: absolute;
            top:400px;
            left:100px;
            width:20%;
            color: #fff;
            font-size: 20px;
            width:300px;
        }

        #but1_main{
            height:700px;
        }
        
        #but1_1 {
            border: solid 1px #000000;
            position: absolute;
            display: none;
            z-index: 30;
            background-color: #003d64;
            padding: 20px;
            max-width: 1000px;
            margin: auto;
            box-sizing: border-box;
            left:800px;
            top:0px;
        }

        #but1_name1 {
            font-size: 32px;
            font-weight: bold;
            display: block;
            margin-bottom: 15px;
            text-align: center;
        }

        #main_moji1 {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            text-align: left;
        }

        #but1_mob1,#but1_mob2 {
            display:flex; 
        }

        .mob1 {
            border: inset 3px #e0ef0e;
            border-radius: 6px;
            width:300px;
            height:400px;
            padding: 12px;
            display: flex;
            flex-direction: column; 
            align-items: center;
            box-sizing: border-box;
            background-color: #fdfdfd;
        }

        #title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 8px;
            text-align: center;
        }

        #moji1 {
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 10px;
            text-align: left;
        }

        .mob1 img {
            width: 100%;
            max-width: 200px;
            height: auto;
            border-radius: 4px;
        }
    }
    /*エルダーガーディアン*/
    #div4{
        
        position: relative;
        background-color: #4ef0ff;
        width:50%;
         border-radius: 400px;
         width:800px;
         height:800px;
         left:550px;

        #but1_main1{
            position: relative;
            left:200px;
        }
        #but1_main2{
            position: relative;
            top:0px;
            width:400px;
        }

        #but1_name1{
            position: absolute;
            color: #ffff00;
            width:400px;
            font-size: 30px;
            top:200px;
        }
        #main_moji1{
            position: absolute;
            top:300px;
            left:100px;
            width:20%;
            color: #000000;
        }


        
        #but1_1 {
            border: solid 1px #000000;
            position: absolute;
            display: none;
            z-index: 30;
            background-color: #00d7c2;
            padding: 20px;
            max-width: 1000px;
            margin: auto;
            box-sizing: border-box;
            right:700px;
            top:0px;
        }

        #but1_name1 {
            font-size: 32px;
            font-weight: bold;
            display: block;
            margin-bottom: 15px;
            text-align: center;
        }

        #main_moji1 {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            text-align: left;
        }

        #but1_mob1,#but1_mob2 {
            display:flex; 
        }

        .mob1 {
            border: inset 3px #e0ef0e;
            border-radius: 6px;
            width:300px;
            height:400px;
            padding: 12px;
            display: flex;
            flex-direction: column; 
            align-items: center;
            box-sizing: border-box;
            background-color: #fdfdfd;
        }

        #title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 8px;
            text-align: center;
        }

        #moji1 {
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 10px;
            text-align: left;
        }

        .mob1 img {
            width: 100%;
            max-width: 200px;
            height: auto;
            border-radius: 4px;
        }
    }
    /*ブルート*/
    #div3{
        position: relative;
        background-color: #8E3B3B;
        width:50%;
         border-radius: 400px;
         width:800px;
         height:800px;

        #but1_main1{
            position: relative;
            left:200px;
            width:500px;
        }
        #but1_main2{
            position: relative;
            top:180px;
            right:300px;
            width:200px;
        }

        #but1_name1{
            position: absolute;
            color: #858585;
            width:400px;
            font-size: 30px;
            top:200px;
        }
        #main_moji1{
            position: absolute;
            top:300px;
            left:100px;
            width:20%;
            color: #fff700;
        }

        #title_moji{
            color: #a31212;
        }
        
        #but1_1 {
            border: solid 1px #a31212;
            position: absolute;
            display: none;
            z-index: 30;
            background-color: #000000;
            padding: 20px;
            max-width: 1000px;
            margin: auto;
            box-sizing: border-box;
            left:800px;
            top:0px;
        }

        #but1_name1 {
            font-size: 32px;
            font-weight: bold;
            display: block;
            margin-bottom: 15px;
            text-align: center;
        }

        #main_moji1 {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            text-align: left;
        }

        #but1_mob1,#but1_mob2 {
            display:flex; 
        }

        .mob1 {
            border: inset 3px #e0ef0e;
            border-radius: 6px;
            width:300px;
            height:400px;
            padding: 12px;
            display: flex;
            flex-direction: column; 
            align-items: center;
            box-sizing: border-box;
            background-color: #fdfdfd;
        }

        #title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 8px;
            text-align: center;
        }

        #moji1 {
            font-size: 13px;
            line-height: 1.4;
            margin-bottom: 10px;
            text-align: left;
        }

        .mob1 img {
            width: 100%;
            max-width: 200px;
            height: auto;
            border-radius: 4px;
        }
    }
}

footer{
     position: relative;
     font-family:  "Rock Salt", cursive;
    display: flex;
    height:500px;
    align-items: flex-end;
    top:130px; 
    a{
        width:25%;
    }
    button{
        position: relative;
        top:20px;
        width:20px;
        height:150px;
    }
    
}
#fot_back{
    height:150px;
    background-color: #08c01a;
}
#footer{
    text-align: center;
    z-index: 100;
    position: fixed;
  bottom: 0;
  left: 0;  
  width:100%;
  display: none;
  
}

footer a{
    text-decoration: none;
    color:#ffe100
}

#menu button{
    width:60px;
    height:60px;
    position: fixed;
    bottom: 10px;
    left: 10px; 
    background: #a0522d;
    color: #fff;
    border: 3px solid #3a2a1a;
    font-weight: bold; 
    cursor: pointer; 
}
footer button{
    background-color: #526935;
    color:#fff700
}