@charset "UTF-8";

/* setting word */

	.maincolor {  
		color: #2855A5;
	}

	.logored {  
		color: #E71f19;
	}

	.gray48 {  
		color: #484848;
	}

	.gray66 {  
		color: #666666;
	}

	.gray80 {  
		color: #C5C5C5;
	}

	.gray99 {  
		color: #999999;
	}

	.graylight {  
		color: #C1C1C1;
	}

	.grayAA {  
		color: #AAAAAA;
	}


	.white {  
		color: #FFFFFF;
	}

	.green {  
        color: #41b263;
	}



/*--- title ---*/

	.bannertxt {  
		font-size: 1.7rem;
        font-weight: bold;
		line-height: 145%;
        text-align: justify;
        text-shadow: 2px 2px 5px #000;
	}

	.bannertxt1 {  
		font-size: 1.2rem;
        font-weight: bold;
		line-height: 145%;
        text-align: justify;
        text-shadow: 2px 2px 5px #000;
	}


	.bannersubtxt {  
		font-size: 2.6em;
        font-weight: bold;
		line-height: 145%;
        text-align: center;
        text-shadow: 2px 2px 4px #333;
	}


	.title1 {  
		font-size: 2em;	
        line-height: 260%;
        line-height: 135%;
	}

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

	.title2 {  
		font-size: 1.4em;	
	}

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

	.title3 {  
		font-size: 1.7em;	
	}

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

	.title4 {  
		font-size: 1.2em;	
	}

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

	.title5 {  
		font-size: 2em;	
	}

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

	.title6 {  
		font-size: 4em;	
	}

	.title6-b {  
		font-size: 4em;		
		font-weight: bold;
	}

	.title7 {  
		font-size: 3em;	
	}

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

	.year-title {  
		font-size: 60px;		
		font-weight: bold;
	}



/*--- 內文 ---*/

	.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.3em;	
	}

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

	.txt4 {  
		font-size: 1.2em;	
	}

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

	.txt5 {  
		font-size: 1.1em;
	}

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

	.txt5 {  
		font-size: 0.9em;
	}

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


/*-- more設定 --*/

	.more1-g {
	    display: inline-flex;
        position: relative;
        justify-content: center;
        align-items: center;
        padding: 0.5em;
        width: auto;
	}

	    .more1-g-bt {
            display: block;
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50px;
            border: solid 1px #999999;
            margin-right: 0.5em;
	    }

	    .more1-g-bt::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 1px;
            background: #999999;
	    }

	    .more1-g-bt::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1px;
            height: 20px;
            background: #999999;
	    }

	    .more1-g-bt-in {
            display: block;
            position: absolute;
            width: 5px;
            height: 5px;
            top: 50%;
            left: 50%;
            background: #EDEDED;
            transform: translate(-50%, -50%);
            z-index: 10;
	    }

	    .more1-g:hover {
            color: #E71f19;
	    }

	    .more1-g:hover .more1-g-bt {
            border: solid 1px #E71f19;
	    }

	    .more1-g:hover .more1-g-bt::before {
            background: #E71f19;
	    }

	    .more1-g:hover .more1-g-bt::after {
            background: #E71f19;
	    }




	.more2-g {
	    display: inline-flex;
        position: relative;
        justify-content: center;
        align-items: center;
        padding: 0.5em;
        width: auto;
	}

	    .more2-g-bt {
            display: block;
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50px;
            border: solid 1px #999999;
            margin-right: 0.5em;
	    }

	    .more2-g-bt::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 1px;
            background: #999999;
	    }

	    .more2-g-bt::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1px;
            height: 20px;
            background: #999999;
	    }

	    .more2-g-bt-in {
            display: block;
            position: absolute;
            width: 5px;
            height: 5px;
            top: 50%;
            left: 50%;
            background: #000;
            transform: translate(-50%, -50%);
            z-index: 10;
	    }

	    .more2-g:hover {
            color: #E71f19;
	    }

	    .more2-g:hover .more2-g-bt {
            border: solid 1px #E71f19;
	    }

	    .more2-g:hover .more2-g-bt::before {
            background: #E71f19;
	    }

	    .more2-g:hover .more2-g-bt::after {
            background: #E71f19;
	    }


	.more3-g {
	    display: inline-flex;
        position: relative;
        justify-content: center;
        align-items: center;
        padding: 0.5em;
        width: auto;
	}

	    .more3-g-bt {
            display: block;
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50px;
            border: solid 1px #FFFFFF;
            margin-right: 0.5em;
	    }

	    .more3-g-bt::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 1px;
            background: #FFFFFF;
	    }

	    .more3-g-bt::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1px;
            height: 20px;
            background: #FFFFFF;
	    }

	    .more3-g-bt-in {
            display: block;
            position: absolute;
            width: 5px;
            height: 5px;
            top: 50%;
            left: 50%;
            background: #000;
            transform: translate(-50%, -50%);
            z-index: 10;
	    }

	    .more3-g:hover {
            color: #E71f19;
	    }

	    .more3-g:hover .more3-g-bt {
            border: solid 1px #E71f19;
	    }

	    .more3-g:hover .more3-g-bt::before {
            background: #E71f19;
	    }

	    .more3-g:hover .more3-g-bt::after {
            background: #E71f19;
	    }




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


	
}

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

	.bannertxt {  
		font-size: 1.3rem;
		line-height: 145%;
	}

	.bannertxt1 {  
		font-size: 1.3rem;
		line-height: 145%;
	}
    
    
	.title1 {  
		font-size: 1.8em;	
        line-height: 260%;
        line-height: 135%;
	}

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

	.title3-b {  
		font-size: 1.6em;		
		font-weight: bold;
	}
    
    
    
/*-- 六角型div設定 --*/

    
    
}


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

	.bannertxt {  
		font-size: 1.5rem;
		line-height: 145%;
	}

	.bannertxt1 {  
		font-size: 1.2rem;
		line-height: 145%;
	}
    
	.bannersubtxt {  
		font-size: 2.2em;
		line-height: 145%;
	}
    
    
    
	.title1 {  
		font-size: 1.6em;	
	}

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

	.title2 {  
		font-size: 1.3em;	
	}

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

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

	.title4 {  
		font-size: 1.2em;	
	}

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

	.title5 {  
		font-size: 1.7em;	
	}

	.title5-b {  
		font-size: 1.7em;	
		font-weight: bold;
	}
    
	.title6 {  
		font-size: 3.5em;	
	}

	.title6-b {  
		font-size: 3.5em;		
		font-weight: bold;
	}  
	
    
    

	.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;
	}
    
	.txt5 {  
		font-size: 1.1em;
	}

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

	

	
/*-- 六角型div設定 --*/


    
    
    

	
}


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

/* font */
    
	.bannertxt {  
		font-size: 1.4rem;
		line-height: 145%;
	}

	.bannertxt1 {  
		font-size: 1.1rem;
		line-height: 145%;
	}
    
    
	.title1 {  
		font-size: 1.5em;	
	}

	.title1-b {  
		font-size: 1.5em;		
		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.8em;	
	}

	.title5-b {  
		font-size: 1.8em;		
		font-weight: bold;
	}
	
	.title6 {  
		font-size: 3em;	
	}

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

	.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;
	}

	.txt5 {  
		font-size: 1.1em;
	}

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

    
	
	
/*-- 六角型div設定 --*/

.title-bor-drw {
    clip-path: polygon(86% 0, 100% 50%, 86% 100%, 55% 100%, 36% 86%, 0 86%, 0 0);
    z-index: 1;
}

    .title-bor-drw::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 80%;
        transform: rotate(55deg);
    }

    .title-bor-drw::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 80%;
        transform: rotate(-55deg);
    }


.title-bor-drw-wh {
    clip-path: polygon(86% 0, 100% 50%, 86% 100%, 55% 100%, 36% 86%, 0 86%, 0 0);
    z-index: 1;
}

    .title-bor-drw-wh::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        top: 25%;
        left: 80%;
        transform: rotate(55deg);
    }

    .title-bor-drw-wh::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        bottom: 25%;
        left: 80%;
        transform: rotate(-55deg);
    }
    
}


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

.title-bor-subblue1 {
    padding: 0.5em 2em 0.5em 1em;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(91.2% 0, 99.5% 50%, 91.2% 100%, 90% 100%, 36% 91.2%, 0 91.2%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue1::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 65px;
        top: 17%;
        left: 85%;
        transform: rotate(55deg);
    }

    .title-bor-subblue1::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 65px;
        bottom: 17%;
        left: 85%;
        transform: rotate(-55deg);
    }

	.year-title {  
		font-size: 46px;		
		font-weight: bold;
	}
    
}

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

/* font */
    
	.bannersubtxt {  
		font-size: 2em;
		line-height: 145%;
	}
    

	.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;
	} 
	
	.title5 {  
		font-size: 1.3em;	
	}

	.title5-b {  
		font-size: 1.3em;	
		font-weight: bold;
	}
    
    
    
    
	.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;
	}

	.txt5 {  
		font-size: 1em;
	}

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

    
    
    
    
    
    
	
}

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

	.bannersubtxt {  
		font-size: 1.8em;
		line-height: 145%;
	}
	
	
	.title6 {  
		font-size: 3em;
	}

	.title6-b {  
		font-size: 3em;	
		font-weight: bold;
	}
    
	.title7 {  
		font-size: 2.5em;	
	}

	.title7-b {  
		font-size: 2.5em;		
		font-weight: bold;
	}
    
    
}



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

	
	.title6 {  
		font-size: 2.8em;
	}

	.title6-b {  
		font-size: 2.8em;	
		font-weight: bold;
	}

	.title7 {  
		font-size: 2.2em;	
	}

	.title7-b {  
		font-size: 2.2em;		
		font-weight: bold;
	}
    
    
}


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

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

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

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

	

}

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

	.bannertxt {  
		font-size: 1.3rem;
		line-height: 145%;
	}

	.bannertxt1 {  
		font-size: 1rem;
		line-height: 145%;
	}
    
	.title7 {  
		font-size: 2em;
        line-height: 125%;
	}

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

}