@charset "UTF-8";

/* setting word */

	.maincolor {  
		color: #5BBC2B;
	}

	.blue {  
		color: #0071BC;
	}

    .blue2 {
	    color: #3c5da5;
    }

	.gray66 {  
		color: #666666;
	}




	.txt1 {  
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt1-b {  
		font-weight: bold;
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt2 {  
		font-size: 1em;	
	}

	.txt2-b {  
		font-weight: bold;
		font-size: 1em;
	}

	.txt3 {  
		font-size: 1.2em;	
	}

	.txt3-b {  
		font-weight: bold;
		font-size: 1.2em;
	}




	.title1 {  
		font-size: 2em;	
	}

	.title1-b {  
		font-size: 2em;		
		font-weight: bold;
	}

	.title2 {  
		font-size: 1.4em;	
	}

	.title2-b {  
		font-size: 1.4em;		
		font-weight: bold;
	}

	.title3 {  
		font-size: 1.3em;	
	}

	.title3-b {  
		font-size: 1.3em;		
		font-weight: bold;
	}

	.title4 {  
		font-size: 1.2em;	
	}

	.title4-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}

	.title5 {  
		font-size: 1.2em;	
	}

	.title5-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}






	.peektitle {  
		font-size: 3em;	
	}

	.peektitle-b {  
		font-size: 3em;		
		font-weight: bold;
	}


	.morebt1 {  
		display: block;
		margin: 1em auto;
		width: auto;
		text-align: center;
	}

	    .morebt1::before {  
		    content: "▸";
			margin-right: 5px;
	    }

	    .morebt1:hover {  
		    color: #3BA200;
	    }


	.morebt3 {  
		display: flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 1em 0;
		width: auto;
		padding: 0.15em 1em;
		color: #636363;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border-width: 1px;
  		    border-style: solid;
  		    border-color: transparent;
   		    border-radius: 50px;
   		    background-image: linear-gradient(to right, #3c5d90, #4253eb, #5ba72b);
  		    background-origin: border-box;
  		    mask-image: linear-gradient(white, white), linear-gradient(white, white);
  		    mask-clip: padding-box, border-box;
   		    mask-composite: exclude, add;
  		}
	}

		.morebt3aaw {  
			display: inline-block;
			position: relative;
			margin-left: 5px;
			margin-top: 5px;
		    width: 50px; 
			height: 1px;
			background: #636363;
			&::after {
    	        content: "";
   		        position: absolute;
   		        display: block;
       		    height: 10px;
       		    width: 1px;
       		    background: #636363;
                left: 45px;
				top: -8px;
			    -moz-transform:rotate(-45deg);
			    -webkit-transform:rotate(-45deg);
			    -o-transform:rotate(-45deg);
			    -ms-transform:rotate(-45deg);
			    transform:rotate(-45deg);
  			}
			
		}

	.morebt3:hover .morebt3aaw {  
		width: 90px; 
		&::after {
    	    content: "";
       	    height: 10px;
            left: 85px;
		    top: -8px;
		    -webkit-transition:all 0.3s ease-in-out;
	        transition:all 0.3s ease-in-out;
  		}
	    -webkit-transition:all 0.3s ease-in-out;
	    transition:all 0.3s ease-in-out;
	}



	.morebt4 {  
		display: inline-block;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 0.2em 0;
		width: auto;
		padding: 0.15em 1em;
		color: #636363;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border-width: 1px;
  		    border-style: solid;
  		    border-color: transparent;
   		    border-radius: 50px;
   		    background-image: linear-gradient(to right, #3c5d90, #4253eb, #5ba72b);
  		    background-origin: border-box;
  		    mask-image: linear-gradient(white, white), linear-gradient(white, white);
  		    mask-clip: padding-box, border-box;
   		    mask-composite: exclude, add;
  		}
	}

		.morebt4aaw {  
			display: inline-block;
			position: relative;
			margin-left: 5px;
			margin-top: 5px;
		    width: 50px; 
			height: 1px;
			background: #636363;
			&::after {
    	        content: "";
   		        position: absolute;
   		        display: block;
       		    height: 10px;
       		    width: 1px;
       		    background: #636363;
                left: 45px;
				top: -8px;
			    -moz-transform:rotate(-45deg);
			    -webkit-transform:rotate(-45deg);
			    -o-transform:rotate(-45deg);
			    -ms-transform:rotate(-45deg);
			    transform:rotate(-45deg);
  			}
			
		}

	.morebt4:hover .morebt4aaw {  
		width: 90px;
		height: 1px;
		background: #FFFFFF;
		&::after {
    	    content: "";
       	    height: 10px;
            left: 85px;
		    top: -8px;
			background: #FFFFFF;
		    -webkit-transition:all 0.3s ease-in-out;
	        transition:all 0.3s ease-in-out;
  		}
	    -webkit-transition:all 0.3s ease-in-out;
	    transition:all 0.3s ease-in-out;
	}


	.morebt4:hover {  
		color: #FFFFFF;
		&::after {
    	    content: "";
       	    height: 10px;
            left: 85px;
		    top: -8px;
			background: #FFFFFF;
		    -webkit-transition:all 0.3s ease-in-out;
	        transition:all 0.3s ease-in-out;
  		}
	    -webkit-transition:all 0.3s ease-in-out;
	    transition:all 0.3s ease-in-out;
	}





@media screen and (max-width: 1680px) {


	
}

@media screen and (max-width: 1440px) {


	
}


@media screen and (max-width: 1280px) {

/* font */

	.txt1 {  
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt1-b {  
		font-weight: bold;
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt2 {  
		font-size: 1em;	
	}

	.txt2-b {  
		font-weight: bold;
		font-size: 1em;
	}

	.txt3 {  
		font-size: 1.1em;	
	}

	.txt3-b {  
		font-weight: bold;
		font-size: 1.1em;
	}
	

	
	
	
	.title1 {  
		font-size: 1.8em;	
	}

	.title1-b {  
		font-size: 1.8em;		
		font-weight: bold;
	}

	.title2 {  
		font-size: 1.3em;	
	}

	.title2-b {  
		font-size: 1.3em;		
		font-weight: bold;
	}
	

	.title4 {  
		font-size: 1.2em;	
	}

	.title4-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}

	.title5 {  
		font-size: 1.1em;	
	}

	.title5-b {  
		font-size: 1.1em;		
		font-weight: bold;
	}
	
	
	
	
}


@media screen and (max-width: 1024px) {

/* font */

	.txt1 {  
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt1-b {  
		font-weight: bold;
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt2 {  
		font-size: 1em;	
	}

	.txt2-b {  
		font-weight: bold;
		font-size: 1em;
	}

	.txt3 {  
		font-size: 1em;	
	}

	.txt3-b {  
		font-weight: bold;
		font-size: 1em;
	}

	
	
	
	
	.title1 {  
		font-size: 1.7em;	
	}

	.title1-b {  
		font-size: 1.7em;		
		font-weight: bold;
	}

	.title2 {  
		font-size: 1.2em;	
	}

	.title2-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}	
	
	.title4 {  
		font-size: 1.2em;	
	}

	.title4-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}

	.title5 {  
		font-size: 1.1em;	
	}

	.title5-b {  
		font-size: 1.1em;		
		font-weight: bold;
	}
	
	
	
	
}

@media screen and (max-width: 840px) {    /* 736 */

/* font */

	.txt1 {  
		font-size: 1em;
		line-height: 155%;
	}

	.txt1-b {  
		font-weight: bold;
		font-size: 1em;
		line-height: 155%;
	}

	.txt2 {  
		font-size: 0.9em;	
	}

	.txt2-b {  
		font-weight: bold;
		font-size: 0.9em;
	}

	.title1 {  
		font-size: 1.5em;	
	}

	.title1-b {  
		font-size: 1.5em;		
		font-weight: bold;
	}

	.title2 {  
		font-size: 1.25em;	
	}

	.title2-b {  
		font-size: 1.25em;		
		font-weight: bold;
	}	
	
	.title3 {  
		font-size: 1.25em;	
	}

	.title3-b {  
		font-size: 1.25em;		
		font-weight: bold;
	}
	
	
}

@media screen and (max-width: 839px) {    /* 736 */


	
}


@media screen and (max-width: 736px) {   
	


}


@media screen and (max-width: 600px) {
	


}


@media screen and (max-width: 500px) {

	.title1 {  
		font-size: 1.2em;	
	}

	.title1-b {  
		font-size: 1.2em;
		font-weight: bold;
	}
	
	
	.title5 {  
		font-size: 0.9rem;	
		line-height: 150%;
	}

	.title5-b {  
		font-size: 0.9rem;	
		line-height: 150%;
		font-weight: bold;
	}
	
	

}

@media screen and (max-width: 400px) {

	.title5 {  
		font-size: 0.8rem;	
		line-height: 150%;
	}

	.title5-b {  
		font-size: 0.8rem;	
		line-height: 150%;
		font-weight: bold;
	}
	

}