@charset "utf-8";
@media screen and (max-width: 799px){
    *{
        -webkit-tap-highlight-color:rgba(0,0,0,0);
    }
    #fade{
        background: #edeee7 !important;
    }
    .loading_bar{
        position: absolute;
        width:50%;
        top:47%;
        left:25%;
        padding-top:1.5%;
        border:solid 1px #8a6623;
        background: #ae7f0e;
        border-radius: 10px;
    }
    .comp_bar{
        position: absolute;
        width:0;
        height: 100%;
        left:0;
        top:0;
        transition:0.3s ease-out;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ecaf00+0,ffde2b+100 */
        background: rgb(236,175,0); /* Old browsers */
        background: -moz-linear-gradient(top,  rgba(236,175,0,1) 0%, rgba(255,222,43,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(236,175,0,1) 0%,rgba(255,222,43,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(236,175,0,1) 0%,rgba(255,222,43,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecaf00', endColorstr='#ffde2b',GradientType=0 ); /* IE6-9 */
        border-radius: 10px;
    }
    .load_icon{
        position: absolute;
        right: 5%;
        bottom: 0;
        background: url(../img/load_icon.png) no-repeat center top;
        background-size: 100% auto;
        width: 25%;
        padding-top: 23%;
        height: 0;
    }
    .nowload{
        position:absolute;
        width:100%;
        text-align: center;
        font-size:2.8vw;
        top:0;
        left:0;
        color:#8a6623;
        margin-top:6%;
        font-weight: bold;
    }
    
    
    .sp_view{
		display: block;
	} 
	#container{
		position:relative;
		widt:100%;
		overflow:hidden;
	}
    #container::before{
        content: "";
        position:fixed;
        width:100%;
        height: 100%;
        left:0;
        top:0;
		background: url("../img/news/visual_sp.jpg") no-repeat;
		background-size: 100% auto !important;
		background-position: center top;
    }
    
	#backtohome{
		display: none;
	}
    #news_head{
        position: relative;
        content:"";
        width:100%;
        height:0;
        padding-top:9.8%;
        background-image:url("../img/news/news_head_sp.png");
        background-size:100% auto;
        background-position:left top;
        background-repeat:no-repeat;
    }
	#news_load{
		position: relative;
		z-index: 1;
		margin-bottom:0;
        background-image:url("../img/news/news_bottom_sp.png"),url("../img/news/news_repeat_sp.png");
        background-size:100% auto,100% auto;
        background-position:left bottom,left top;
        background-repeat:no-repeat,repeat-y;
        padding:4% 0 9%;
	}
    h1{
        position: relative;
		background: url(../img/news/logo_sp.png) no-repeat center 52%;
		background-size: 100% auto;
		width: 100%;
		padding-top: 42.9%;
		padding-top: 38.6%;
		text-indent: -9999px;
    }
    
	.text_skip{
		text-indent: 100%;
		overflow: hidden;
		height: 0;		
	}
	.load_disp{
		display: block;
	}
	.load_none{
		display: none;
	}
	.load_base{
        margin: 0 3%;
	}
	.single_box{
		position: relative;
		cursor: pointer;
		display: flex;
		padding: 0 0 3%;
		margin: 3% 4.6% 3%;
		/*border-top: solid 1px #ffe1ef;*/
        border-bottom:solid 1px #b69817;
	}
	
	
	
	/*.single_day{
		position: absolute;
		left:27.4%;
		top:10%;
		font-size: 2.8vw;
		line-height: 4.68vw;
		color: #fff;
		display: inline-block;
		font-weight: bold;
	}*/
	.single_day{
		color: #7e561e;
		font-size: 2.8vw;
		line-height: 4.68vw;
		font-weight: bold;
	}
	.single_thumb{
		position: relative;
		width: 36%;
    	padding-top: 22%;
		background: none;
		overflow: hidden;
        border: solid 1px #b69817;
	}
	.single_thumb_bk{
		position: absolute;
		left: 0;
		top:0;
		background-size:cover;
		background-position:center center;
		transform-origin: center center;
		width:100%;
		height: 100%;
		transition:0.3s ease-in-out;
	}
	/*.single_title{
		font-size: 2.8vw;
		line-height: 4.68vw;
		color: #fff;
		display: inline-block;
		margin: 6% 0 0 4.6%;
		width:64.23%;
	}*/
	.single_title{
		color: #7e561e;
		font-size: 2.8vw;
		line-height: 4.68vw;
	}
	
	.single_bg{
		width: 63%;
		padding-left: 4.6%;
		padding-top: 3%;
	}
	#news_detail{
		position: relative;
		display: none;
		z-index: 1;
        background-image:url("../img/news/news_bottom_sp.png"),url("../img/news/news_repeat_sp.png");
        background-size:100% auto,100% auto;
        background-position:left bottom,left top;
        background-repeat:no-repeat,repeat-y;
	}
	#news_title{
		font-size: 3.75vw;
		color: #7e561e;
		padding-bottom: 3%;
		margin: 0 auto;
		text-align: left;
		display: inline-block;
		display: flex;
		justify-content: center;
		line-height: 5.31vw;
		font-size: 4vw;
		line-height: 7.5vw;
		font-weight: bold;
        margin: -10% 10% 0;
        z-index: 2;
        position: relative;
    }
    #news_day{
		font-size:2.8vw;
		line-height: 4.68vw;
		color: #d48d1e;
		padding-bottom: 3%;
		text-align: center;
		margin: 0 auto;
		font-weight: bold;
	}
    #news_body p img{
        width:100%;
    }
	#news_body{
		font-size:3.12vw;
		line-height: 4.68vw;
		line-height: 5.3vw;
		padding-bottom: 8%;
		font-size: 3.6vw;
		line-height: 7.2vw;
        margin: 0 10%;
    }
    .news_sp_space{
        position: relative;
        margin: 0 10%;
        padding-top: 7%;
        height: 0;
        background: #fbf9eb;
        transform: translateY(-50%);
    }
    #news_close{
        position: relative;
        background: url(../img/news/close_sp.jpg) no-repeat center top;
        background-size:100% auto;
        width:9.8%;
        padding-top:8.9%;
        margin: 0 auto;
        padding-bottom:14%;
    }
	
	figure{
		margin: 10px 0;
		width:100%;
	}
	figure img{
		width:100%;
		height: auto;
	}
	/*
	.newsopen{
		right:0 !important;
	}
	*/
	#more_btn{
		position:relative;
		width:46.8%;
		padding-top: 9.4%;
		overflow: hidden;
		background: url("../img/news/sp/more_btn.png") no-repeat left top;
		background-size:contain;
		margin: 6.25% auto 0;
		cursor: pointer;
	}
	/*#newstop{
		position:relative;
		width:46.8%;
		padding-top: 0;
		overflow: hidden;
		background: url("../img/news/sp/news_top.png") no-repeat left top;
		background-size:contain;
		margin: 6.25% auto 0;
		cursor: pointer;
		opacity: 0;
	}*/
	#newstop{
		position: relative;
		width: 46.8%;
		padding-top: 0;
		overflow: hidden;
		background: url(../img/news/sp/news_top.png) no-repeat left top;
		background-size: contain;
		margin: 0 auto 18%;
		cursor: pointer;
		opacity: 0;
	}
	.newsopen{
		padding-top: 9.4% !important;
		transition:0.01s !important;
		transition-delay:0.5s !important;
		opacity: 1 !important;
	}

	footer{
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-top:4%;
        background: #f5e8b2;
        border-top:solid 1px #b69817;
	}
    .home_btn_sp{
        position: relative;
        width:100%;
        background: url(../img/news/home_sp.gif) no-repeat center top;
        padding-top:10.9%;
        background-size:100% auto;
        margin-top:4%;
    }
	#footer_bg {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}
	address{
		text-decoration: none;
		font-style: normal;
		font-size: 2.1vw;
        letter-spacing: -0.1vw;
        color: #7e561e;
		text-align: center;
		position: absolute;
		position: relative;
		width: 100%;
		/*bottom: 9%;*/
		left: 0;
	    margin: 6% 0 8%;
	}
	#footer_copy{
		font-size: 2.1vw;
		color: #FFF;
		position: absolute;
		position: relative;
		width: 100%;
		/*bottom: 27%;*/
		text-align: center;
		margin-top: 8%;
	}
	#footer_copy a{
		color:#7e561e;
		text-decoration:none;
	}
	#wb_icon{
		transform:translateY(3px);
	}
	/*#sp_home{
		position:relative;
		width:46.8%;
		padding-top: 9.4%;
		overflow: hidden;
		background: url("../img/news/sp/back_to_home.png") no-repeat left top;
		background-size:contain;
		margin: 22.25% auto 0;
		cursor: pointer;
	}*/
	/*#sp_home{
		position: relative;
		width: 100%;
		padding-top: 14.4%;
		overflow: hidden;
		background: url(../img/news/sp/back_to_home.jpg) no-repeat left top;
		background-size: 100% auto;
		cursor: pointer;
	}*/
	#footer_copy img{
		width:5%;
		height: auto;
	}
	
	
	#news_share{
		padding-top:10%!important;
	}
	
	
    /*------------
    intro
    -------------*/
    #introduction{
        position:absolute;
        width:100%;
        z-index: 999;
        display: none;
        background: #f8e286;
    }
    .intro_text{
        position:relative;
        left: 0;
        top:0;
        width: auto;
        font-size:3.18vw;
        line-height: 6.3vw;
        color: #000;
        margin-left:0;
        opacity: 0;
        overflow: auto;
        -webkit-overflow-scrolling:touch;
        background-repeat: no-repeat,no-repeat;
        background-size:100% auto,100% auto;
        background-color:#FFF;
        background-position:left top,left 103%;
    }

    .bold{
        font-weight: bold;
    }

    .intro1{
        position: relative;
        width:100%;
        height: auto;
        background: url(../img/sp/about_sp1.jpg) no-repeat left top;
        background-size:100% auto;
        padding-top:105%;
    }
    .intro2{
        position: relative;
        width:100%;
        height: auto;
        padding-top:64%;
        background: url(../img/sp/about_sp2.jpg) no-repeat left top;
        background-size:100% auto;
        font-size: 3.75vw;
        line-height: 6.7vw;
    }
    .intro2 p{
        position: absolute;
        left:0;
        top:2%;
        margin: 0 4%;
        letter-spacing: -0.3vw;
        text-align:justify;
        text-justify:distribute;    
    }
    .intro3{
        position: relative;
        width:100%;
        height: auto;
        padding-top:74%;
        background: url(../img/sp/about_sp3.jpg) no-repeat left top;
        background-size:100% auto;
    }
    .intro4{
        position: relative;
        width:100%;
        height: auto;
        background: url(../img/sp/about_sp4.jpg) no-repeat left top;
        background-size:100% auto;
        font-size: 3.75vw;
        line-height: 6.7vw;
        padding-top:84.6%;
    }
    .intro4 p{
        position: absolute;
        left: 0;
        top:1%;
        margin: 0 4%;
        letter-spacing: -0.3vw;
        text-align:justify;
        text-justify:distribute;    
    }

    .intro5{
        position: relative;
        width:100%;
        height: auto;
        background: url(../img/sp/about_sp5.jpg) no-repeat left top;
        background-size:100% auto;
        padding-top:245%;
    }    

    .intro6{
        position: relative;
        width:100%;
        height: auto;
        background: url(../img/sp/about_more.jpg) no-repeat left top;
        background-size:100% auto;
        padding-top:20%;
    }    

    .intro_cn{
        margin-top:0;
    }
    .intro_bold{
        font-size:4vw;
        font-weight: bold;
    }	
    .intro_head{
        font-size:4.8vw;
        line-height:8vw;
        margin-bottom:5%;
        font-weight: bold;
        display: block;
    }
    .intro_head span{
        display: block;
    }
    .sp_close{
        position: relative;
        margin: 8% 0;
    }
    #close_btn{
        position: fixed;
        width: 13.6%;
        padding-top: 8.9%;
        text-align: center;
        right: 0;
        top: 0;
        text-indent: -9999px;
        overflow: hidden;
        background: url(../img/sp/close.gif) no-repeat left top;
        background-size: 100% auto;
        background-color: #7e561e;
    }
    #close_btn:hover{
        opacity: 0.8;
    }
    .intro_head_text{
        text-indent:-9999px;
        width:100%;
        padding-top:28.9%;
        background: url("../img/intro/sp_intro_head.png") no-repeat left top;
        background-size:100% auto;
        margin: 0 auto;
    }	
    .intro_inner_text{
        margin:0 7.81%;
    }	
    .sp_br{
        display: block;
    }
	
}