@charset "utf-8";
/*Reset*/
html,body,h1,h2,h3,p,ul,ol,li,dl,dt,dd{
margin: 0;              
padding: 0;
line-height: 1.0;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, YuGothic, "游ゴシック体", "Yu Gothic";
}
ul {
list-style: none; 
}
a {
text-decoration: none; 
color: inherit;
}
img {
border: none;
vertical-align: bottom;
/*Fluid Image*/
max-width: 100%;
height: auto;
}
/*-----共通CSS-----*/
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 10px;

}

/*Header*/


    header{
        background: url(../img/title_back.jpg) no-repeat center/cover;
        padding: 70px 0;/*上下の余白*/
        text-align: center;
        color: #fff;
        font-weight: bold;
        line-height: 1.4;
        margin-bottom:20px;
        height:100px;    
        letter-spacing: 0.5em;
        }
    
    .title h1{
        font-size: 45px;
        text-shadow:2px 2px 10px #969696 ,
        -2px 2px 10px #969696 ,
        2px -2px 10px #969696 ,
        -2px -2px 10px #969696;
        margin-bottom: 50px;
    }
    .title p{
        padding-top: 30px;
        font-size: 20px;
        text-shadow:0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(167, 65, 7),0 0 3px rgb(167, 65, 7),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6),0 0 3px rgb(114, 45, 6);
    }
    
    .title p span{
        color:rgb(250, 182, 36);
       
    }
    
    /* nav */
    .g-nav {
        width: 100%;
        text-align: center;
        margin-bottom:20px;
       }
    
    .pcnav{
        display: flex;
        justify-content: space-between;
        margin:0 auto;
        }
    
    .pcnav li{
        width:20%;
        margin: 0 auto;
        line-height: 40px;
        background:rgb(231, 133, 76);
        /* border-radius:70px 0; */
        /* box-shadow: 2px 2px 4px;
        box-shadow: 4px 4px 9px 0px rgba(255,255,255,0.45) inset, -4px -4px 9px 0px rgba(0, 0, 0, 0.06) inset;ボタンに立体感を出す */
        border-radius: 10px; /* 角丸 */
    }
    
    .pcnav li a{
        color: #fff;
        line-height: 40px;
        display: block;
        border-bottom: 4px solid transparent;
      }
    
    .pcnav li > a:hover {
        border-bottom: 4px solid #f3e306;
      }

      /* Keyvisual */
.KeyVis h2{
    
    position: absolute;/*絶対配置*/
    color: white;/*文字は白に*/
    top: 43%;
    left: 40%;
    font-size: 36px;
    color: #fff;
    font-weight: bold;
    /* text-shadow: 2px 2px 2px #000; */
    text-shadow:2px 2px 10px #000 ,
    -2px 2px 10px #000,
    2px -2px 10px #000 ,
    -2px -2px 10px #000;
    letter-spacing: 0.5em;

}   


.KeyVis{
    position: relative;
  margin: 0 auto 50px;
  text-align: center;
 
}

.KeyVis img{
    width:calc(100% * (940 / 960));
    border: solid 5px #fff;
    height:auto;
}

/* main */
main {
    margin-bottom: 50px;
    /* border-radius: 2%; */ 
        }
        
main p{
            letter-spacing:0.2em;
            line-height: 1.6;
            text-indent: 0.5em;
            
        }

/* description         */
.description{
        padding:15px;
        /* border: 3px solid rgb(245, 152, 111); */
    }

.description h3{
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    background-color:rgba(188, 188, 192, 0.459);
    padding:10px 0;
    }

.description ol li{
        list-style: none;
        padding-left: 1.3em;
        line-height: 2.0;
        color: rgb(9, 7, 122);
        font-weight: bold;
      }

.description p{
    padding:10px;
    line-height: 1.8;
}

/* iframe */
.g-form{
    margin:50px auto;
    text-align: center;    
    background-color:rgba(250, 250, 202, 0.459);
}

.form{
    width:100%;
    height:1102px;
    margin:40px 0;

}

/* sns */
aside{
    text-align: center;
    margin-bottom: 50px;
    }

.sns{
    display:flex;
    justify-content: space-between;
    width:400px;
    margin: 0 auto 50px;
}


.note{
    margin-right:50px;
}

.qr i{
    color: rgb(248, 81, 3);
    margin:0 5px;
    margin-bottom: 20px;
}
.qr span{
    border:1px dotted rgb(248, 81, 3);
}
.qr span:hover{
    background: rgb(248, 81, 3);
    color:#fff;
    }
footer{
    
            background: url(../img/title_back.jpg) no-repeat center top/cover;
            text-align: center;
            color: #fff;
            font-weight: bold;
            line-height: 1.4;
            padding:50px 0;
            letter-spacing: 0.5em;
            
         } 

footer p{
            font-size: 16px;
            text-shadow:2px 2px 10px #414040 ,
            -2px 2px 10px #414040 ,
            2px -2px 10px #414040 ,
            -2px -2px 10px #414040;
        
        }
        
            
         
        .spnav,.btn{
                display: none;
            }
             
        /*Topへ戻るボタン*/
            
        .toTop{
            /* display: none; */
            position: fixed;
            right:15px;
            bottom:-100px;
            width: 50px;
            height: 50px;
            background-color: rgba(82, 74, 74, 0.4);
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
            line-height: 50px; 
            /* 1行の場合だけline-heightをheightと同じにすると縦方向は真ん中になる。 */
            color:#fff;
            /* display: none; */
            transform: scale(0.3);
            transition: 0.9s;
        }
        
        .toTop_show{
            bottom: 50px;
            transform: scale(1.2);
        }
        
        
        footer br{
            display: none;
            
        }
        
@media (max-width:767px){
        
            /* container */
        .container {
            display: block;
            }
    
/* main */

        .title h1{
            font-size: 30px;
            line-height: 1.2;
            margin-bottom: 30px;
        }
        
        .title p{
            font-size: 14px;
            line-height: 1.8;
            padding:0 10px;
        }

        .pcnav{
            display: none;
        }
         /* sp用nav */
        body{
            position: relative;
            }
        
        /* sp btn */
        .btn{
            display: block;
            position: absolute;
            top:5px;
            right: 5px;
            width: 50px;
            height: 50px;
            border: 2px solid #fff;
            border-radius: 5px;
            overflow: hidden;
            }
            
        .btn i{
            display: block;
            line-height: 50px;
            font-size: 35px;
            color: #fff;
            text-align: center; 
            }
            
        .open i:first-child{
            display: none;
        }
        
            /* sp nav */
        .spnav{
            display: block;
            position: fixed;
            top:59px;
            width:100%;
            background: rgba(209, 120, 5, 0.74);
            left:100%;
            transition:300ms;  
            z-index: 10000; 
            overflow: hidden; 
            text-align: center;
            }
            
        .slide{
            left:0;
        }
        
        
        .spnav li{
            height: 70px;
            line-height: 70px;
            font-size: 26px;
            color: #fff;
            }
            
        .spnav li a{
            display: block;
            border-top: 1px solid rgba(255, 255, 255, 0.8);
        }
            
          
        
        .spnav li:first-child a{
            border-top:none;
            }

            /* Keyvisual */
.KeyVis h2{

    font-size: 30px;
   
}   



.KeyVis{
  position: relative;
  margin-bottom: 50px;
}

/* main */

        main {
                width: 100%;
                }
      
        
        main br{
                display: none;
            }
            /* description         */
        
            

/* sns  */
.sns{
    display: block;
    width:60%
}

.sns .note,
.sns .fb{
width:100%;
margin-bottom:40px;
}


.note{
    margin-right:50px;
}

        .qr{
            text-align: center;
            line-height: 1.4;
        }
        
         footer br{
            display: block;
            
        }
        
        footer p{
            line-height: 1.4;
        }
        /* TOPボタン */
        /* .toTop{
            display: block;
        } */
        
    }

        @media (max-width:550px){
.KeyVis h2{
    top: 41%;
    left: 26%;  
            }
        }