@media screen and (min-width: 769px) {
	
	
	/*---------------------------------------
	 * 共通パーツ
	---------------------------------------*/ 
	
	.btn{
		display: block;
		width: 100%;
		text-align: center;
		padding: 22px 0;
		background-image: url(../../assets/img/deco_btn.png);
		background-position:  right 15px center;
		background-repeat: no-repeat;
		background-size: 10px;
		color: #FFFFFF;
		font-size: 1.3rem;
		letter-spacing: 1px;
		transition: background-color .2s;
		box-sizing: border-box;
	}
	.btn span{
		display: inline-block;
		margin-left: 0.1em;
	}
	.btn.nihongo{
		background-color: #1f9eb9;
		border: 1px solid #1f9eb9;
	}
	.btn.rekishi{
		background-color: #d397b6;
		border: 1px solid #d397b6;
	}
	.btn.request{
		background-color: #a11c20;
		border: 1px solid #a11c20;
		background-image: url(../../assets/img/deco_subtitle.png);
		background-image: url(../../assets/img/deco_subtitle.png);
		background-position: 93% 50%;
		background-repeat: no-repeat;
		background-size: 6px;
	}
	.btn.nihongo:hover{
		background-color: #FFFFFF;
		color: #1f9eb9 !important;
		background-image: url(../../assets/img/deco_btn_nihongo.png) !important;
	}
	.btn.rekishi:hover{
		background-color: #FFFFFF;
		color: #d397b6 !important;
		background-image: url(../../assets/img/deco_btn_rekishi.png) !important;
	}
	.btn.request:hover{
		background-color: #FFFFFF;
		color: #a11c20 !important;
		background-image: url(../../assets/img/deco_subtitle_on.png) !important;
	}
	
	
	
	/*---------------------------------------
	 * MainLayout
	---------------------------------------*/ 
    
	.main-wrapper{
		margin: 77px 0 0;
		overflow-x: hidden;
	}
	.main-wrapper .fix-zone{
		width: 100%;
		position: relative;
		z-index: -1;
	}
	.main-wrapper .fix-zone .logo{
		display: block;
		width: 272px;
		height: 187px;
		margin: 0 auto 50px;
		position: relative;
	}
	.main-wrapper .fix-zone .logo img{
	
	}
	.main-wrapper .fix-zone .logo::after{
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
		left: 0;
		z-index: 1;
		background: url(../img/logo_on_pc.png) 0 0 no-repeat;
		background-size: 100%;
		opacity: 0;
	}
	.main-wrapper .fix-zone .logo:hover img{
		opacity: 0;
	}
	.main-wrapper .fix-zone .logo:hover::after{
		opacity: 1;
	}
	.main-wrapper .scroll-zone{
		width: 100%;
		position: relative;
		z-index: 0;
	}
	
	
	/*---------------------------------------
	 * lowerMainLayout
	---------------------------------------*/ 
	
	.lower .main-wrapper{
		margin: 77px 0 0;
	}
	.lower .main-wrapper .fix-zone{
		width: 100%;
		background: none;
		
	}
	.lower .main-wrapper .fix-zone .logo{
		width: 272px;
		margin: 0 auto 50px;
	}
	.lower .main-wrapper .scroll-zone{
		width: 100%;
		z-index: 0;
	}

	
	
	/*---------------------------------------
	 * Header
	---------------------------------------*/ 
	
	header{
		width: 100%;
		/*
		position: fixed;
		top:0;
		left:0;
		z-index: 100;
		*/
	}
	
	/* MenuBtn
	---------------------------------------*/ 
	
	.menu-btn{
		width: 33px;
		height: 29px;
		position: fixed;
		top: 30px;
		left:calc(100% - 36.5px);
		margin-left: -16.5px;
		cursor: pointer;
		z-index: 600;
		cursor: pointer;	
	}
	.menu-btn p{
		font-size: 10px;
		line-height: 1;
		color: #000000;
		vertical-align: top;
		padding: 8px 0 0;
		text-align: center;
	}
	.menu-trigger{
	
	}
	.menu-trigger,
	.menu-trigger span {
	  display: block;
	  transition: all .4s;
	  box-sizing: border-box;
	  margin: 0 auto;
	}
	.menu-trigger {
	  position: relative;
	  width: 33px;
	  height: 11px;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 1px;
	  background-color: #282828;
	}
	.on .menu-trigger span{
	  background-color: #282828;	
	}
	.on .menu-trigger p{
		color: #000000;
	}
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  bottom: 0;
	}
	
	
	/* Animation*/
	
	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(5px) rotate(-30deg);
	  transform: translateY(5px) rotate(-30deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  -webkit-transform: translateY(-5px) rotate(30deg);
	  transform: translateY(-5px) rotate(30deg);
	}
	
	
	/* MenuContent
	---------------------------------------*/ 
	
	.menu-content{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0px;
		left:-100%;
		background: #FFFFFF;
		padding: 80px 0 60px;
		box-sizing: border-box;
		z-index: 1;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.menu-content .inner{
		width: calc(100% - 40px);
		max-width: 712px;
		margin: 0 auto;
	}
	.menu-content .topback{
		display: block;
		margin: 0 0 50px;
		background-image:url(../img/deco_arrow.png);
		background-position:2px 50% ;
		background-repeat:no-repeat;
		background-size:18px;
		padding-left: 24px;
		transition: background-position .2s;
	}
	.menu-content .topback:hover{
		background-position:0 50% ;
	}
	.menu-content .feature-contents{
		margin-bottom: 65px;
	}
	.menu-content ul{
		width: 100%;
		display: flex;
		justify-content: space-between;
		
		flex-wrap: wrap;
	}
	.menu-content ul li{
		width: 48%;
		color: #1f2f4a;
		margin: 0 0 20px;
	}
	.menu-content ul li figure{
		margin: 0 0 10px;
		background: #1f2f4a;
		overflow: hidden;
	}
	.menu-content ul li figure img{
		transform: scale(1.0,1.0);
		transform-origin: center;
		opacity: 1;
		transition: transform .6s,opacity .6s;	
	}
	.menu-content ul li a:hover figure img{
		transform: scale(1.1,1.1);
		opacity: 0.8;

	}
	.menu-content ul li .caption{
		font-size: 2rem;
		margin: 0 0 10px;
	}
	.menu-content ul li .en{
		font-size: 1.1rem;
	}
	.menu-content .btn-block{
		margin: 50px 0 0;
		padding: 50px 0 0;
		border-top: 1px solid #F0F0F0;
	}
	.menu-content .single{
		margin: 0 auto;
		width: 48%;
	}
	
	
	
	/*---------------------------------------
	 * lowerHeader
	---------------------------------------*/ 
	
	.lower header{
		width: 100%;
		background: #FFFFFF;
	}
	
	
	
	
	/* MenuContent
	---------------------------------------*/ 
	
	.lower .menu-content{
		background: #FFFFFF;
		width: 100%;
		z-index: 1;
	}
	
	
	
	/*---------------------------------------
	 * Footer
	---------------------------------------*/ 
	
	footer {
		width: 100%;
		border-top: 1px solid #F0F0F0;
	}
	footer .inner{
		padding: 15px 35px;
	}
	footer .flex-box{
		display: flex;
	}
	footer .flex-box > div{
		width: 50%;
	}
	footer .flex-box .credit .footer-logo{
		width: 150px;
		margin: 0 0 5px;
	}
	footer .flex-box .credit .zip{
		font-size: 10px;
		font-weight: 700;
		line-height: 1.3;
	}
	footer .flex-box .credit .zip span{
		display: inline-block;
	}
	footer .flex-box .copyright{
		color: #A6A6A6;
		font-size: 10px;
		text-align: right;
		margin: 16px 0 0;
		line-height: 1.3;
	}
	footer .flex-box .copyright span{
		display: inline-block;
	}
	
	
	
}

@media screen and (min-width: 961px) {
	
	/*---------------------------------------
	 * MainRayout
	---------------------------------------*/ 
	
	.main-wrapper .fix-zone{
		width: 33.6%;
		height: 100%;
		position: fixed;
		top:0;
		left:0;
		background: url(../img/bg_line_pc.png) 0 0 repeat-y #FFFFFF;
		background-size:13.5px;
		border-right: 1px solid #F0F0F0;
		box-sizing: border-box;
		z-index: 500;
	}
	.main-wrapper .fix-zone .logo{
		width: 60%;
		max-width: 288px;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		margin: 0;
	}
	.main-wrapper .scroll-zone{
		width: 66.4%;
		margin-left: 33.6%;
	}
	
	
	/*---------------------------------------
	 * lowerMainLayout
	---------------------------------------*/ 
	
	.lower .main-wrapper{
		margin: 0;
	}
	.lower .main-wrapper .fix-zone{
		width: 92px;
		background: #FFFFFF;
		z-index: 5;
	}
	.lower .main-wrapper .fix-zone .logo{
		width: 46px;
		height: 82px;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	.lower .main-wrapper .fix-zone .logo{
		display: block;
	}
	.lower .main-wrapper .fix-zone .logo::after{
		content:"";
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background-image: url(../img/logo_lowyer_on.png);
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100%; 
		z-index: 0;
	}
	.lower .main-wrapper .fix-zone .logo:hover img{
		opacity: 0;
	}
	.lower .main-wrapper .fix-zone .logo:hover::after{
		opacity: 1;
	}
	.lower .main-wrapper .scroll-zone{
		width: calc(100% - 92px);
		margin-left: 92px;
	}
	
	
	
	/*---------------------------------------
	 * Header
	---------------------------------------*/ 
	
	header{
		width: 33.6%;
	} 
	
	
	
	
	/* MenuBtn
	---------------------------------------*/ 
	
	.menu-btn{
		left:calc(33.6% / 2);
		position: fixed;
	}
	
	
	/* MenuContent
	---------------------------------------*/ 
	
	.menu-content{
		width: 66.4%;
		margin-left:33.6%;
		z-index: 500;
	}
	
	
	/*---------------------------------------
	 * lowerHeader
	---------------------------------------*/ 
	
	.lower header{
		width: 92px;
	}
	
	
	/* MenuBtn
	---------------------------------------*/ 
	
	.lower .menu-btn{
		left:calc(92px / 2);
	}
	
	
	/* MenuContent
	---------------------------------------*/ 
	
	.lower .menu-content{
		width: calc(100% - 92px);
		margin-left: 92px;
	}
	
	
	
}

@media screen and (min-width: 1025px) {
	
	
	
}


@media screen and (max-width: 768px) {
	
	.obi{
		width: 100%;
		height: 2.667vw;
		background-image: url(../img/bg_line_sp.png);
		background-position:0 0 ;
		background-repeat:repeat-x;
		background-color: transparent;
		background-size: 200vw;
		position: absolute;
		top:6.4vw;
		left: 0;
	}
	
	
	
	/*---------------------------------------
	 * 共通パーツ
	---------------------------------------*/ 
	
	.btn{
		display: block;
		width: 100%;
		text-align: center;
		padding: 8px 0;
		background-image: url(../../assets/img/deco_btn.png);
		background-position:  right 15px center;
		background-repeat: no-repeat;
		background-size: 10px;
		color: #FFFFFF;
		font-size: 3.2vw;
		line-height: 1.3;
		letter-spacing: 0.267vw;
		transition: background-color .2s;
		box-sizing: border-box;
	}
	.btn span{
		display: block;
		margin-left: 0.1em;
	}
	.btn.nihongo{
		background-color: #1f9eb9;
		border: 0.267vw solid #1f9eb9;
	}
	.btn.rekishi{
		background-color: #d397b6;
		border: 0.267vw solid #d397b6;
	}
	.btn.request{
		background-color: #a11c20;
		border: 0.267vw solid #a11c20;
		background-image: url(../../assets/img/deco_subtitle.png);
		background-image: url(../../assets/img/deco_subtitle.png);
		background-position: 93% 50%;
		background-repeat: no-repeat;
		background-size: 1.6vw;
	}
	.btn.nihongo:hover{
		background-color: #FFFFFF;
		color: #1f9eb9 !important;
		background-image: url(../../assets/img/deco_btn_nihongo.png) !important;
	}
	.btn.rekishi:hover{
		background-color: #FFFFFF;
		color: #d397b6 !important;
		background-image: url(../../assets/img/deco_btn_rekishi.png) !important;
	}
	.btn.request:hover{
		background-color: #FFFFFF;
		color: #a11c20 !important;
		background-image: url(../../assets/img/deco_subtitle_on.png) !important;
	}	
	
	
	
	/*---------------------------------------
	 * MainRayout
	---------------------------------------*/ 
    
	.main-wrapper{
		margin: 10.533vw 0 0;
	}
	.main-wrapper .fix-zone{
		width: 100%;
		margin: 0 0 5.333vw;
	}
	.main-wrapper .fix-zone .logo{
		display: block;
		width: 72.533vw;
		margin: 0 auto;
	}
	.main-wrapper .scroll-zone{
		width: 100%;
	}
	
	
	/*---------------------------------------
	 * lowerMainRayout
	---------------------------------------*/ 
	
	.lower .main-wrapper .fix-zone{
		width: 100%;
		margin: 0 0 6.667vw;
	}
	
	
	
	/*---------------------------------------
	 * Header
	---------------------------------------*/ 
	
	header{
		width: 100%;
		height: 16vw;
		z-index: 100;
		background-image: url(../img/bg_line_sp.png);
		background-position:0 0 ;
		background-repeat:repeat-x;
		background-color: transparent;
		background-size: 200vw;
	}

	header::before{
		content:"";
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		/*
		background: rgb(255,255,255);
		background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,0) 60%);
		*/
		z-index: -1;
	}
	
	/* MenuBtn
	---------------------------------------*/ 
	
	.menu-btn{
		width: 8.8vw;
		height: 2.933vw;
		position: fixed;
		top: 8vw;
		right:5.333vw;
		margin-left: -4.4vw;
		cursor: pointer;
		z-index: 600;
		cursor: pointer;	
	}
	.menu-btn p{
		font-size: 2.667vw;
		line-height: 1;
		color: #000000;
		vertical-align: top;
		padding: 2.133vw 0 0;
		text-align: center;
	}
	.menu-trigger{
	
	}
	.menu-trigger,
	.menu-trigger span {
	  display: block;
	  transition: all .4s;
	  box-sizing: border-box;
	  margin: 0 auto;
	}
	.menu-trigger {
	  position: relative;
	  width: 8.8vw;
	  height: 2.933vw;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 0.267vw;
	  background-color: #282828;
	}
	.on .menu-trigger span{
	  background-color: #282828;	
	}
	.on .menu-trigger p{
		color: #000000;
	}
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  bottom: 0;
	}
	
	
	/* Animation*/
	
	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translate3d(0,500%,0) rotate(-30deg);
	  transform: translate3d(0,500%,0) rotate(-30deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  -webkit-transform: translate3d(0,-500%,0) rotate(30deg);
	  transform: translate3d(0,-500%,0) rotate(30deg);
	}
	
	
	/* MenuContent
	---------------------------------------*/ 
	
	.menu-content{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0px;
		left:-100%;
		background: #FFFFFF;
		padding: 21.333vw 0 16vw;
		box-sizing: border-box;
		z-index: 500;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.menu-content .inner{
		width: calc(100% - 10.667vw);
		margin: 0 auto;
	}
	.menu-content .topback{
		display: block;
		margin: 0 0 25px;
		background-image:url(../img/deco_arrow.png);
		background-position:2px 50% ;
		background-repeat:no-repeat;
		background-size:18px;
		padding-left: 24px;
		transition: background-position .2s;
	}
	.menu-content .feature-contents{
		margin: 0 0 10.667vw;
	}
	.menu-content ul li{
		width: 100%;
		color: #1f2f4a;
		margin: 0 0 5.333vw;
	}
	.menu-content ul li figure{
		margin: 0 0 2.667vw;
	}
	.menu-content ul li .caption{
		font-size: 5.333vw;
		margin: 0 0 2.667vw;
	}
	.menu-content ul li .en{
		font-size: 2.933vw;
	}
	.menu-content .btn-block{
		margin: 25px 0 0;
		padding: 25px 0 0;
		border-top:1px solid #F0F0F0;
	}
	.menu-content .btn-block ul{
		display: flex;
		justify-content: space-between;
	}
	.menu-content .btn-block ul li{
		width: 49%;
	}
	.menu-content .btn-block .single{
		width: 80%;
		margin: 0 auto;
	}
	.menu-content .btn-block .single a{
		padding: 16px 0;
	}
	
	
	/*---------------------------------------
	 * Footer
	---------------------------------------*/ 
	
	footer {
		width: 100%;
		border-top: 0.267vw solid #F0F0F0;
	}
	footer .inner{
		padding: 2.667vw 5.333vw;
	}
	footer .flex-box{
		
	}
	footer .flex-box > div{
		width: 100%;
	}
	footer .flex-box .credit .footer-logo{
		width: 41.333vw;
		margin: 0 auto 1.333vw;
	}
	footer .flex-box .credit .zip{
		font-size: 2.667vw;
		text-align: center;
	}
	footer .flex-box .credit .zip span{
		
	}
	footer .flex-box .copyright{
		color: #A6A6A6;
		font-size: 2.667vw;
		text-align: right;
		margin: 4.267vw 0 0;
		line-height: 1.3;
		text-align: center;
	}
	footer .flex-box .copyright span{
		display: inline-block;
	}
	
		
}