*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
li{
    list-style:none;
}

@media screen and (min-width: 1450px){
body{
    width: 100%;
    height:100vh;
    display:flex;
    background-color:white;
}
.theme{
	margin-top: 100px;
	width: 87.5%;
	height: 300px;
	background-image:url("../img/theme2.png");
	transform: translateX(240px);
}
.tltle{
		height: 300px;
}
.theme h1{
	margin:0 auto;
	line-height: 300px;
	color: white;
	text-align: center;
    font-size:32px;
	font-weight:600;
}
.intro1{
	margin: 100px 20px 80px 20px;
	font-size: 2vw;
	text-align:center;
	color: #306912;
}
.intro2{
	width: 100%;
	height: 550px;
	display: flex;
	background-color:#FEFFE6;
	margin-bottom: 0;
}
.intro3{
	margin-top: 0;
	width: 100%;
	height: 500px;
	display: flex;
	background-color:#FEFFE6;
}
.syokai{
	width: 880px;
	margin-top: 100px;
}

.syokai p{
	text-align: center;
	margin-bottom: 20px;
	font-size: 1.1vw;
	color: #D69D16;
}
.staff_syokai{
	width: 100%;
}

.staff_syokai p{
	text-align: center;
	margin: 35px 100px 0 100px;
	font-size: 1.1vw;
	color: #D69D16;
}

.intro2_img{
	max-width: 100%;
		
}
.intro2 img{
	width: 100%;
	height: auto;
}

.menu{
    position:fixed;
    width:240px;
    display:flex; 
    flex-direction:column;
    background-color:#F0FFD5;
    padding:10px 14px;
    transition:width .3s ease-in;
	height: 100vh;
}
.menu-author{
    display:flex;
    align-items:center;
    /* max-height:40px; */
    cursor:pointer;
}

.author-img{
    margin: 0 auto;
    display:flex;
    justify-content:center;
    min-width:60px;
    margin-bottom: 40px;;
}
.menu-author img{
    width:200px;
    height: 240px;
    border-radius:5px;
}

.menu-bar{
    margin: 0 auto;
    flex:1;
    display:flex;
    flex-direction:column;
}

.menu-bar li{
    border-radius:4px;
    height:50px;
    display:flex;
    align-items:center;
    font-size:14px;
    font-weight:600;
    margin-bottom:10px;
}
.menu-bar li:hover{
    background-color:#695cfe;
}
.menu-bar li:hover ion-icon{
    color:#fff;
}
.menu-bar li:hover span{
    color:#fff;
}
.menu-bar li span{
    color:#275211;
    cursor:pointer;
    transition:all .3s;
}

ion-icon{
    min-width:60px;
    font-size:24px;
    color:#275211;
}
.fa-x-twitter{
    color: #275211;
    font-size: 24px;
    padding: 24px;
}
.menu-btn{
        position:absolute;
        top:20px;
        right:-12.5px;
        width:25px;
        height:25px;
        background-color:#695cfe;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
}
.reserve{
    margin: 0 auto;
    
    height: 50px;
    border-radius: 50px;
    background-color: white;
}

.contact{
    margin-top: 40px;
}
.sns_logo{
    margin: 0 auto;
}
.sns_logo ul{
    display: flex;  
}

.menu-btn span{
    font-size:20px;
    color:#fff;
    transition:all .3s;
}

.active-rotate{
    transform:rotate(180deg);
}
.menu.shrink{
    width:88px;
}
}

@media screen and (max-width: 1449px) and (min-width: 1025px){
body{
    width: 100%;
    height:100vh;
    display:flex;
    background-color:white;
}
.theme{
	margin-top: 100px;
	width: 87.5%;
	height: 300px;
	background-image:url("../img/theme2.png");
	transform: translateX(240px);
}
	.tltle{
		height: 300px;
	}
.theme h1{
	margin:0 auto;
	line-height: 300px;
	color: white;
	text-align: center;
    font-size:32px;
	font-weight:600;
}
.intro1{
	font-size: 2vw;
	text-align:center;
	color: #306912;
}
.intro2{
	width: 100%;
	display: flex;
	background-color:#FEFFE6;
}
.intro3{
	margin-top: 0;
	width: 100%;
	display: flex;
	background-color:#FEFFE6;
}
.syokai{
	width: 55%;
	margin-top:10%;
}

.syokai p{
	padding-right: 10%;
	text-align: center;
	margin-bottom: 10px;
	font-size: 1.2vw;
	color: #D69D16;
	align-items: center;
}

.staff_syokai{
	width: 60%;
	padding-top: 100px;
}

.staff_syokai p{
	margin-bottom: 10px;
	text-align: center;
	font-size: 1.2vw;
	color: #D69D16;
}
.staff_img img{
		width: 100%;
	height: auto;
}
.staff_img{
		max-width: 100%;
		height: auto;
	}
.intro2_img{
	max-width: 100%;
	height: auto;	
}
.intro2 img{
	width: 100%;
	height: auto;
}
.menu{
    position:fixed;
    width:240px;
    display:flex; 
    flex-direction:column;
    background-color:#F0FFD5;
    padding:10px 14px;
    transition:width .3s ease-in;
	height: 100vh;
}
.menu-author{
    display:flex;
    align-items:center;
    cursor:pointer;
}

.author-img{
    margin: 0 auto;
    display:flex;
    justify-content:center;
    min-width:60px;
    margin-bottom: 40px;;
}
.menu-author img{
    width:200px;
    height: 240px;
    border-radius:5px;
}

.menu-bar{
    margin: 0 auto;
    flex:1;
    display:flex;
    flex-direction:column;
}

.menu-bar li{
    border-radius:4px;
    height:50px;
    display:flex;
    align-items:center;
    font-size:14px;
    font-weight:600;
    margin-bottom:10px;
}
.menu-bar li:hover{
    background-color:#695cfe;
}
.menu-bar li:hover ion-icon{
    color:#fff;
}
.menu-bar li:hover span{
    color:#fff;
}
.menu-bar li span{
    color:#275211;
    cursor:pointer;
    transition:all .3s;
}

ion-icon{
    min-width:60px;
    font-size:24px;
    color:#275211;
}
.fa-x-twitter{
    color: #275211;
    font-size: 24px;
    padding: 24px;
}
.menu-btn{
        position:absolute;
        top:20px;
        right:-12.5px;
        width:25px;
        height:25px;
        background-color:#695cfe;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
}
.reserve{
    margin: 0 auto;
    
    height: 50px;
    border-radius: 50px;
    background-color: white;
}

.contact{
    margin-top: 40px;
}
.sns_logo{
    margin: 0 auto;
}
.sns_logo ul{
    display: flex;  
}

.menu-btn span{
    font-size:20px;
    color:#fff;
    transition:all .3s;
}

.active-rotate{
    transform:rotate(180deg);
}
.menu.shrink{
    width:88px;
}
.hide{
    display:none;
}

.intro1{
	margin: 80px 20px 80px 20px;
	font-size: 2vw;
	text-align:center;
	color: #306912;
}
.intro2{
	width: 100%;
	display: flex;
	background-color:#FEFFE6;
	padding-bottom: 70px;
}


}
@media screen and (max-width: 1024px) and (min-width: 768px){
body{
    width: 100%;
    display:flex;
    background-color:white;
}
.menu{
		display: none;
}
.theme{
	margin-top: 50px;
	max-width: 1024px;
	height: 300px;
	background-image:url("../img/theme.png");
}

.theme h1{
	margin:0 auto;
	line-height: 300px;
	color: white;
	text-align: center;
    font-size:32px;
	font-weight:600;
}

.intro1{
	width: 90%;
	margin: 50px 20px 50px 20px;
	font-size: 2.6vw;
	text-align:center;
	color: #306912;
}
.intro2{
	width: 100%;
	height: auto;
	display: flex;
	background-color:#FEFFE6;
}
.intro3{
	width: 100%;
	height: auto;
	display: flex;
	background-color:#FEFFE6;
	justify-content: space-between;
}
.staff_img img{
		width: 80%;
}
.intro2_img{
	max-width: 100%;
		
}
.intro2 img{
		width: 100%;
}
.syokai{
	
	width: 80%;
	margin-top: 100px;
}

.syokai p{
	text-align: center;
	font-size: 1.6vw;
	color: #D69D16;
	margin-bottom: 2%;
}
.staff_syokai{
	margin-left: 5%;
	margin-right: 10%;
	width: 60%;
	margin-top: 100px;
}

.staff_syokai p{
	text-align: center;
	font-size: 1.6vw;;
	color: #D69D16;
	margin-bottom: 2%;
}
}

@media screen and (max-width: 767px){
	body{
    width: 100%;
    display:flex;
    background-color:white;
}
.menu{
		display: none;
}
.theme{
	margin-top: 50px;
	max-width: 1024px;
	height: 300px;
	background-image:url("../img/theme.png");
}

.theme h1{
	margin:0 auto;
	line-height: 300px;
	color: white;
	text-align: center;
    font-size:32px;
	font-weight:600;
}

.intro1{
	width: 90%;
	margin: 50px 20px 50px 20px;
	font-size: 2.6vw;
	text-align:center;
	color: #306912;
}
.intro2{
	background-color:#FEFFE6;
}

.staff_img img{
		width: 100%;
}
.staff_img{
		max-width: 100%;
	}
.intro2_img{
	max-width: 100%;
		
}
.intro2 img{
	width: 100%;
}


.syokai{
	padding-bottom: 100px;
	margin-top: 100px;
	width: 100%;
}

.syokai p{
	text-align: center;
	font-size: 4vw;
	color: #D69D16;
	margin-bottom: 10px;
}
.staff_syokai{
	padding-bottom: 100px;
	margin-top: 100px;
	width: 100%;
}

.staff_syokai p{
	text-align: center;
	font-size: 4vw;
	color: #D69D16;
	margin-bottom: 10px;
	padding: 0 5%;
}
}