@charset "UTF-8";

/* setting word */

	.maincolor {  
		color: #2d4b9b;
	}

	.oring {  
        color: #FF8327;
	}

	.seafood-blue {  
		color: #29abe2;
	}

	.prok-pink {  
		color: #e68993;
	}

	.chicken-red {  
		color: #be272d;
	}

	.chicken-gold {  
		color: #cc9966;
	}

	.beef-bluegreen {  
		color: #00a69a;
	}

	.cus-color {  
		color: #e1af6c;
	}

	.odem-blue {  
		color: #50a0e6;
	}

	.grayb3 {  
		color: #B3B3B3;
	}

	.gray4d {  
		color: #4d4d4d;
	}

	.white {  
		color: #FFFFFF;
	}

	.deepblue {  
		color: #003063;
	}

/*--- title ---*/

	.bannertxt {  
		font-size: 3em;
        font-weight: bold;
		line-height: 145%;
        text-align: center;
        background: linear-gradient(to right, #000, #22b2cc);
        background: -webkit-linear-gradient(to right, #000000, #22b2cc);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        /*-webkit-text-stroke: 1px #FFFFFF; */
	}

	.bannersubtxt {  
		font-size: 2.4em;
        font-weight: bold;
		line-height: 145%;
        text-shadow: 2px 2px 4px #000;
	}

	.title1 {  
        letter-spacing: 1px;
		font-size: 2em;	
        line-height: 135%;
	}

	.title1-b {  
        letter-spacing: 1px;
		font-size: 2em;		
		font-weight: bold;
        line-height: 135%;
	}

	.title1-1 {  
        letter-spacing: 1px;
		font-size: 2em;	
        line-height: 135%;
	}

	.title1-1-b {  
        letter-spacing: 1px;
		font-size: 2em;		
		font-weight: bold;
        line-height: 135%;
	}



	.title2 {  
		font-size: 1.7em;	
	}

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

	.title3 {  
		font-size: 1.4em;	
	}

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

	.title4 {  
		font-size: 1.3em;	
	}

	.title4-b {  
        text-align: left;
		font-size: 1.3em;		
		font-weight: bold;
	}

	.title5 {  
		font-size: 1.8em;	
        line-height: 135%;
	}

	.title5-b {  
		font-size: 1.8em;		
		font-weight: bold;
        line-height: 135%;
	}


    /*--- 內文 ---*/
    
    /*--- 宋體字 ---*/
	.dodofont {
        font-family: 'MyCustomFont';
        letter-spacing: 0;
	}

	.dodofont1 {
        font-family: 'MyCustomFont';
        letter-spacing: 0;
	}

	.txtba1 {  
		font-size: 1.3em;	
	}

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



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

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

	.txt2 {  
		font-size: 1em;	
	}

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

	.txt3 {  
		font-size: 1.3em;	
	}

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

	.txt4 {  
		font-size: 1.2em;	
	}

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


	.txtkind {  
		font-size: 1.05em;	
        line-height: 125%;
	}

	.txtkind-b {  
		font-weight: bold;
		font-size: 1.05em;
        line-height: 125%;
	}



    /*-- more設定 --*/

	.morebt1 {  
		display: inline-flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 1em 0;
		width: auto;
		padding: 0.35em 1.5em;
		color: #FFF;
        background: #BBB;
        border-radius: 50px;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border: solid 1px #FFFFFF;
   		    border-radius: 50px;
  		}
        z-index: 100;
	}

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

	.morebt1:hover .morebt1aaw {  
		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;
	}


	.morebt2 {  
		display: inline-flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 1em 0;
		width: auto;
		padding: 0.35em 1.5em;
		color: #e68993;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border: solid 1px #e68993;
   		    border-radius: 50px;
  		}
        z-index: 100;
	}

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

	.morebt2:hover .morebt2aaw {  
		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;
	}


	.morebt3 {  
		display: inline-flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 1em 0;
		width: auto;
		padding: 0.35em 1.5em;
		color: #2d4b9b;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border: solid 1px #2d4b9b;
   		    border-radius: 50px;
  		}
        z-index: 100;
	}

		.morebt3aaw {  
			display: inline-block;
			position: relative;
			margin-left: 5px;
			margin-top: 5px;
		    width: 30px; 
			height: 1px;
			background: #2d4b9b;
			&::after {
    	        content: "";
   		        position: absolute;
   		        display: block;
       		    height: 10px;
       		    width: 1px;
       		    background: #2d4b9b;
                left: 25px;
				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-flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 1em 0;
		width: auto;
		padding: 0.35em 1.5em;
		color: #be272d;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border: solid 1px #be272d;
   		    border-radius: 50px;
  		}
        z-index: 100;
	}

		.morebt4aaw {  
			display: inline-block;
			position: relative;
			margin-left: 5px;
			margin-top: 5px;
		    width: 30px; 
			height: 1px;
			background: #be272d;
			&::after {
    	        content: "";
   		        position: absolute;
   		        display: block;
       		    height: 10px;
       		    width: 1px;
       		    background: #be272d;
                left: 25px;
				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; 
		&::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;
	}



	.morebt5 {  
		display: inline-flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 1em 0;
		width: auto;
		padding: 0.35em 1.5em;
		color: #00a69a;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border: solid 1px #00a69a;
   		    border-radius: 50px;
  		}
        z-index: 100;
	}

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

	.morebt5:hover .morebt5aaw {  
		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;
	}


	.morebt6 {  
		display: inline-flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 1em 0;
		width: auto;
		padding: 0.35em 1.5em;
		color: #f8ad3b;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border: solid 1px #f8ad3b;
   		    border-radius: 50px;
  		}
        z-index: 100;
	}

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

	.morebt6:hover .morebt6aaw {  
		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;
	}


	.morebt7 {  
		display: inline-flex;
		position: relative;
		justify-content: flex-start;
		align-items: center;
		margin: 1em 0;
		width: auto;
		padding: 0.35em 1.5em;
		color: #50a0e6;
		cursor: pointer;
		&::before {
    	    content: "";
   		    position: absolute;
   		    inset: 0;
  		    border: solid 1px #50a0e6;
   		    border-radius: 50px;
  		}
        z-index: 100;
	}

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

	.morebt7:hover .morebt7aaw {  
		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;
	}




    .more1 {  
	    display: inline-block;
        position: relative;
        margin: 0.5em auto;
        padding: 0.35em 2em;
        color: #FFF;
        border: solid 1px #71afc3;
        border-radius: 100px;
        background: #71afc3;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

        .more1:hover {  
            color: #71afc3;
            background: #FFF;
        }


    .more2 {  
	    display: inline-block;
        position: relative;
        margin: 2em auto;
        padding: 0.35em 2em;
        color: #FF8327;
        border: solid 1px #FF8327;
        border-radius: 100px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

        .more2:hover {  
            color: #FFF;
            background: #FF8327;
        }







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


	
}

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

	.bannersubtxt {  
		font-size: 2em;
	}
    
	.title5 {  
		font-size: 1.6em;	
        line-height: 135%;
	}

	.title5-b {  
		font-size: 1.6em;		
		font-weight: bold;
        line-height: 135%;
	}
    
	.txtba1 {  
		font-size: 1.2em;	
	}

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

}

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

	.bannersubtxt {  
		font-size: 1.8em;
	}

	.title1 {  
		font-size: 1.7em;	
        line-height: 125%;
	}

	.title1-b {  
		font-size: 1.7em;		
		font-weight: bold;
        line-height: 125%;
	}
    
	.title5 {  
		font-size: 1.4em;	
        line-height: 125%;
	}

	.title5-b {  
		font-size: 1.4em;		
		font-weight: bold;
        line-height: 125%;
	}
    
	.txtba1 {  
		font-size: 1.1em;	
	}

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

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

@media screen and (max-width: 1024px) {
    
	.bannersubtxt {  
		font-size: 1.7em;
	}
    
	.title1 {  
		font-size: 1.5em;	
        line-height: 135%;
	}

	.title1-b {  
		ffont-size: 1.5em;	
        line-height: 135%;
	} 
    
    
	.title1-1 {  
		font-size: 1.8em;	
        line-height: 135%;
	}

	.title1-1-b {  
		font-size: 1.8em;		
        line-height: 135%;
	}
    

	.title2 {  
		font-size: 1.6em;	
	}

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

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

	.title5 {  
		font-size: 1.5em;	
	}

	.title5-b {  
		font-size: 1.5em;		
		font-weight: bold;
	}
    
    
	.txt1 {  
		font-size: 1em;
	}

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

	.txt3 {  
		font-size: 1.15em;
	}

	.txt3-b {  
		font-size: 1.15em;
	}

	.txt4 {  
		font-size: 1em;	
	}

	.txt4-b {  
		font-size: 1em;
	}

    
}

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




}

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




}

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

	.bannersubtxt {  
		font-size: 1.4em;
	}

	.txtba1 {  
		font-size: 1em;	
	}

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

}


@media screen and (max-width: 600px) {
    
	.title1 {  
		font-size: 1.6em;	
        line-height: 135%;
	}

	.title1-b {  
		ffont-size: 1.6em;	
        line-height: 135%;
	}
    
	.title1-1 {  
		font-size: 1.6em;	
        line-height: 135%;
	}

	.title1-1-b {  
		font-size: 1.6em;		
        line-height: 135%;
	}
    

	.title2 {  
		font-size: 1.4em;	
	}

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

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

    
    
    /*-- more設定 --*/
    
	.morebt3 {  
		margin: 1em 0;
		width: auto;
		padding: 0.15em 1.25em 0.1em 1.25em;
	}
 

    .more1 {  
        margin: 0.5em auto;
        padding: 0.15em 1.25em 0.1em 1.25em;
    }

    .more2 {  
        margin: 2em auto;
        padding: 0.15em 1.25em 0.1em 1.25em;
    }


}


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

	.bannersubtxt {  
		font-size: 1.3em;
	}

}

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

	.bannersubtxt {  
		font-size: 1.2em;
	}
    
	.title1 {  
		font-size: 1.5em;	
        line-height: 135%;
	}

	.title1-b {  
		font-size: 1.5em;	
        line-height: 135%;
	}
    
	.title1-1 {  
		font-size: 1.5em;	
        line-height: 135%;
	}

	.title1-1-b {  
		font-size: 1.5em;		
        line-height: 135%;
	}
    


}