@charset "utf-8";
/*Reset*/
html,body,h1,h2,h3,p,ul,li,dl,dt,dd{
margin: 0;              
padding: 0;
line-height: 1.0;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
ul {
list-style: none; 
}
a {
text-decoration: none; 
color: inherit;
}
img {
border: none;
vertical-align: bottom;
/*Fluid Image*/
max-width: 100%;
height: auto;
}

body{
    background: linear-gradient(to bottom, #fff, rgb(255, 253, 253), rgb(250, 247, 245)), rgb(253, 246, 241), #fff;
    
}
/*-----共通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 */
h2{
    position: absolute;/*絶対配置*/
    color: white;/*文字は白に*/
    top: 42%;
    left: 35%;
    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 h2{
            margin-left: 5px;
           }
    
main p{
            letter-spacing:0.3em;
            line-height: 1.8;
           
            margin:10px;
        }

main p:first-child{
    margin: 10px;
    text-indent: 0.5em;
}

main p:nth-child(3){
margin-bottom: 30px;
}

main p span{
    border:1px dotted rgb(248, 81, 3);
}
main p span:hover{
    background: rgb(248, 81, 3);
    color:#fff;
    }
  
/* discription    */
.description{
        color: rgb(9, 7, 122);
        font-weight: bold;
        margin:10px 0;
    }
.register{
      line-height: 1.6;
}  

.register i{
    color:rgb(248, 81, 3);
    font-size: 16px;
}

.fa-arrow-right:before{
    font-size: 16px;
}
/* iframe */
.g-form{
    margin:50px auto;
    text-align: center;
    background-color:rgba(252, 224, 240, 0.534);
}

.form{
    width:100%;
    height:840px;
    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;
}
   
/* footer */
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 screen and (max-width:767px){
        
            /* コンテナ */
        .container {
            display: block;
            }
        
        .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 */
h2{

    font-size: 22px;
    letter-spacing: 0.3em;
   
}   

/* KeyVis */

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

/* main */
        main {
                width: 100%;
                }
      
        
        main br{
                display: none;
            }
            .discription{
             padding:0 10px;
            }

/* iframe */

        .g-form{
            width:80%;
            height:80%;
    
        }

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

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

    .note{
        margin-right:0;
    }
     
/* footer */
         footer br{
            display: block;
            
        }
        
        footer p{
            line-height: 1.4;
        }
        /* TOPボタン */
        /* .toTop{
            display: block;
        } */
        
        }

    main p{
        text-indent: 0.5em;
    }
        @media (max-width:550px){
/* header */
h2{
    top: 41%;
    left: 26%;  
            }
        }