@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@600&display=swap');
/* for PC */
@media screen and (min-width:641px )
{

/*ƒgƒbƒv*/
.pc { display: block !important; }
.sp { display: none !important; }
    
      
    @media screen and (min-width:641px) and ( max-width:1920px) {    
        #top-d {
            margin:2vw auto 0 auto; 
            max-width:1920px;
            text-align: center;
    /*      border:1px solid #000;
            box-sizing: border-box;  */ 
        }
        #top-d .r-box{
            width:20vw;
            height:20vw;
            background: #e72d29;
            margin:0 2vw 2vw 2vw;
            position: relative;
            float:left;
        }
        #top-d .r-box .number{
            background: url("../img/n3.svg")no-repeat;
            background-position: center center;
            background-size:contain;
            padding-top:18vw;
            width:18vw;
            margin:1vw;
            position: absolute;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            font-size:0;
        }
        #top-d .sub-copy-t{
            width:72vw;
            height:20vw;
            text-align: left;
            float:left;
            display: table;
        }
        #top-d .inner{
            vertical-align: top;
            display: table-cell;
        }
        #top-d .p-index{
            width:40%;
            height:3vw;
            background:#000;
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:1.5vw;
            text-align: center;
            color:#fff;
            padding:0;
            margin:0;
        }
        #top-d .sub-copy-t .text1{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:3.5vw;
            line-height: 4vw;
            padding:0;
            margin: 4vw 0 0 0;
        }
        #top-d .sub-copy-t .text2{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:2vw;
            line-height: 0;
            margin-top: 2vw;
            text-align: right;
            padding:0;
        }
        #top-d .main-pic{
            width:75%;
            margin: 0 12.5%;
        }
        #top-d .w-bk{
            background:#e72d29;
            width:60%;
            height:auto;
            margin: -2.5vw auto 0 auto;
            padding:1vw 2vw;
            font-size:1.75vw;
            color:#fff;
            line-height: 2.75vw;
            position: relative;
            z-index: 999;
            text-align: left;
        }
        #topic{
            max-width:1920px;
            margin: 2vw auto;
            padding: 0;
            position: relative;
        }
        #topic .wrap{
            margin:2vw 2vw 0 2vw;
            padding: 0;
            display: flex;
            align-items: center;
            border-top:0.1vw dotted #000;
        }
        #topic img{
            width:60%;
            margin:2vw 0 0 2%;
            float: left;
        }
        #topic .text-area{
            margin:0;
            padding:0;
            float: left;
        }
        #topic .text1{
            font-size:1.4vw;
            line-height: 2.5vw;
            color:#666;
            margin: 0 0 0 2vw;
            padding:0;
            text-align: left;
        }
        #topic .bl{
            margin:2vw 2vw 0 2vw;
            padding: 0;
            border-top:0.1vw dotted #000;
        }
        #index-link{
            width:30%;
            height:5vw;
            background: #e72d29;
            color:#fff;
            transition-duration: 0.3s;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
             margin: 0 auto;
       }
        #index-link .text{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:1.75vw;
            line-height: 2vw;
            text-align: center;
            color:#fff;
            margin-left: 10%;
            width:90%;
        }
        #index-link .arrow{
            color:#fff;
            width:10%;    
            padding:0 1vw 0 0;
        }      
        #index-link .arrow::after{
            content: '\e5e1';
            font-family: 'Material Icons';
            font-weight: 200;
            font-size:2vw;
        }
        #index-link:hover{
            background: #000;
        }
        #index-link .text:hover{
            transform: scale(1.1);
        }
        #index-link:hover .arrow{
            padding:0 0.5vw 0 0.5vw;
        } 
    }
    
    @media screen and (min-width:1921px)  {
        #top-d{
            margin:40px auto 0 auto; 
            width:1920px;
            text-align: center;
    /*      border:1px solid #000;
            box-sizing: border-box;  */   
        }
        #top-d .r-box{
            width:384px;
            height:384px;
            background: #e72d29;
            margin:0 40px 40px 40px;
            position: relative;
            float:left;
        }
        #top-d .r-box .number{
            background: url("../img/n2.svg")no-repeat;
            background-position: center center;
            background-size:contain;
            padding-top:352px;
            width:352px;
            margin:16px;
            position: absolute;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            font-size:0;
        }
        #top-d .sub-copy-t{
            height:384px;
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            text-align: left;
            float:left;
            display: table;
        }
       #top-d .inner{
            vertical-align: top;
            display: table-cell;
        }
        #top-d .p-index{
            width:582px;
            height:58px;
            background:#000;
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:28px;
            text-align: center;
            color:#fff;
            padding:0;
            margin:0;
        }
        #top-d .sub-copy-t .text1{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:68px;
            line-height: 78px;
            padding:0;
            margin: 78px 0 0 0;
        }
        #top-d .sub-copy-t .text2{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:40px;
            line-height: 0;
            margin-top: 40px;
            text-align: right;
            padding:0;
        }
        #top-d .main-pic{
            width:1440px;
            margin:0 240px;
        }
        #top-d .w-bk{
            background:#e72d29;
            width:1152px;
            margin: -48px auto 0 auto;
            padding:20px 40px;
            font-size:34px;
            color:#fff;
            line-height: 52px;
            position: relative;
            z-index: 999;
            text-align: left;
        }
       #topic{
            max-width:1920px;
            margin: 40px auto;
            padding: 0;
            position: relative;
        }
        #topic .wrap{
            margin:40px 40px 0 40px;
            padding: 0;
            display: flex;
            align-items: center;
            border-top:2px dotted #000;
        }
        #topic img{
            width:1152px;
            margin:40px 0 0 40px;
            float: left;
        }
        #topic .text-area{
            margin:0;
            padding:0;
            float: left;
        }
       #topic .text1{
            font-size:24px;
            line-height: 48px;
            color:#666;
            margin: 0 0 0 40px;
            padding:0;
            text-align: left;
        }
         #topic .bl{
            margin:40px 40px 0 40px;
            padding: 0;
            border-top:2px dotted #000;
        }
         #index-link{
            width:576px;
            height:96px;
            background: #e72d29;
            color:#fff;
            transition-duration: 0.3s;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
             margin: 0 auto;
       }

        #index-link .text{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:34px;
            line-height: 40px;
            text-align: center;
            color:#fff;
            margin-left: 10%;
            width:90%;
        }

        #index-link .arrow{
            color:#fff;
            width:10%;    
            padding:0 20px 0 0;
        }      
        #index-link .arrow::after{
            content: '\e5e1';
            font-family: 'Material Icons';
            font-weight: 200;
            font-size:40px;
        }
        #index-link:hover{
            background: #000;
        }
        #index-link .text:hover{
            transform: scale(1.1);
        }
        #index-link:hover .arrow{
            padding:0 10px;
        } 
    
    }


}

/* for SP */
@media screen and (max-width:640px )
{
	.pc { display: none !important; }
	.sp { display: block !important; }
 
    @media screen and (min-width:320px) and ( max-width:640px) {
        header .logo{
            background: url("../img/logo.svg")no-repeat;
            background-position: center center;
            background-size: contain;
            padding-top:12%;
            left:2vw;
            top:2vw;
            width:23.5%;
            position: absolute;
        }
        header .ajust{
            top:3.5vw;
        }

       #top-d{
            margin:16vw auto 0 auto;
            min-width:320px;
            text-align: center;
            border-top:1vw solid #000;
        }
       #top-d .r-box{
            width:30vw;
            height:30vw;
            background: #e72d29;
            margin:4vw auto 0 auto;
            position: relative;
        }
       #top-d .r-box .number{
            background: url("../img/n3.svg")no-repeat;
            background-position: center center;
            background-size:contain;
            padding-top:28vw;
            width:28vw;
            margin:1vw;
            position: absolute;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            font-size:0;           
        }
       #top-d .sub-copy-t{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            text-align: center;
            margin:3vw auto 0 auto;
        }
        #top-d .inner{
            text-align: center;
        }
        #top-d .p-index{
            width:90%;
            height:6.75vw;
            background:#000;
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:3.75vw;
            line-height: 7vw;
            text-align: center;
            color:#fff;
            padding:0;
            margin:1vw auto 0 auto;
        }
        #top-d .sub-copy-t .text1{
            width: 90%;
            font-size:4.5vw;
            line-height:6vw;
            margin:2vw 5% 0 5%;
            text-align:left;
        }
        #top-d .sub-copy-t .text2{
            width: 90%;
            font-size:3vw;
            line-height: 0;
            margin:3vw 5%;
            text-align:right;
        }
        #top-d .main-pic{
            width:90%;
            margin: 1vw auto 0 auto;
        }
        #top-d .w-bk{
            background:#e72d29;
            width:82%;
            margin: -5vw auto 0 auto;
            padding:1vw 2vw;
            font-size:3.25vw;
            color:#fff;
            line-height: 4.75vw;
            position: relative;
            z-index:999;
            text-align: left;
        }
       #topic{
            margin: 2vw 0;
            padding: 0;
            position: relative;
        }
        #topic .wrap{
            margin:2vw ;
            padding: 0;
            display: flex;
            align-items: center;
            border-top:0.1vw dotted #000;
        }
        #topic img{
            width:60%;
            margin:2vw 2vw 0 2vw;
            float: left;
        }
        #topic .text-area{
            margin:0;
            padding:0;
            float: left;
        }
       #topic .text1{
            font-size:2.5vw;
            line-height: 4vw;
            color:#666;
            margin: 0 0 0 2vw;
            padding:0;
            text-align: left;
        }
        #topic .bl{
            margin:2vw 2vw 0 2vw;
            padding: 0;
            border-top:0.1vw dotted #000;
        }
       #index-link{
            width:50%;
            height:8vw;
            background: #e72d29;
            color:#fff;
            transition-duration: 0.3s;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            margin: 4vw auto 0 auto;
        }
        #index-link .text{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:3.25vw;
            line-height: 4vw;
            text-align: center;
            color:#fff;
            margin-left: 10%;
            width:90%;
        }
        #index-link .arrow{
            color:#fff;
            width:10%;    
            padding:0 1vw 0 0;
        }      
        #index-link .arrow::after{
            content: '\e5e1';
            font-family: 'Material Icons';
            font-weight: 200;
            font-size:3vw;
        }
        #index-link:hover{
            background: #000;
        }
        #index-link .text:hover{
            transform: scale(1.1);
        }
        #index-link:hover .arrow{
            padding:0 0.5vw 0 0.5vw;
        }
    }
    @media screen and (max-width:319px) { 
        header .logo{
            background: url("../img/logo.svg")no-repeat;
            background-position: center center;
            background-size: contain;
            padding-top:38px;
            left:6.5px;
            top:6.5px;
            width:73px;
            position: absolute;
        }
        header .ajust{
            top:11.2px;
        }

       #top-d{
            margin:50px auto 0 auto; 
            text-align: center;
            border-top:3.25px solid #000;
        }
       #top-d .r-box{
            width:96px;
            height:96px;
            background: #e72d29;
            margin:12px auto 0 auto;
            position: relative;
        }
       #top-d .r-box .number{
            background: url("../img/n3.svg")no-repeat;
            background-position: center center;
            background-size:contain;
            padding-top:90px;
            width:90px;
            margin:3px;
            position: absolute;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            font-size:0;           
        }
       #top-d .sub-copy-t{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            text-align: center;
            margin:10px auto 12px auto;
        }
         #top-d .inner{
            text-align: center;
        }
        #top-d .p-index{
            width:288px;
            height:22px;
            background:#000;
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:12px;
            line-height: 22.5px;
            text-align: center;
            color:#fff;
            padding:0;
            margin:0 auto;
        }
        #top-d .sub-copy-t .text1{
            width:288px;
            font-size:14.5px;
            line-height:21px;
            margin: 7px 16px 0 16px;
            text-align: left;
        }
        #top-d .sub-copy-t .text2{
            width:288px;
            font-size:10px;
            line-height: 0;
            margin:10px 16px;
            text-align:right;
        }
        #top-d .main-pic{
            width:288px;
            margin:4px 16px 0 16px;
        }
        #top-d .w-bk{
            background:#e72d29;
            width:260px;
            margin: -20px auto 0 auto;
            padding:4px 6px;
            font-size:11px;
            color:#fff;
            line-height: 16px;
            z-index:999;
            position: relative;
            text-align: left;
        }
        #topic{
            width: 320px;
            margin: 7px auto;
            padding: 0;
            position: relative;
        }
        #topic .wrap{
            margin:7px 7px 0 7px ;
            padding: 0;
            display: flex;
            align-items: center;
            border-top:0.75px dotted #000;
        }
        #topic img{
            width:192px;
            margin:7px 7px 0 7px;
            float: left;
        }
        #topic .text-area{
            margin:0;
            padding:0;
            float: left;
        }
       #topic .text1{
            font-size:8px;
            line-height: 13px;
            color:#666;
            margin: 0 0 0 7px;
            padding:0;
            text-align: left;
        }
        #topic .bl{
            margin:7px 7px 0 7px;
            padding: 0;
            border-top:0.75px dotted #000;
        }
       #index-link{
            width:160px;
            height:25.5px;
            background: #e72d29;
            color:#fff;
            transition-duration: 0.3s;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            margin: 13px auto 0 auto;
        }
        #index-link .text{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:10px;
            line-height: 13px;
            text-align: center;
            color:#fff;
            margin-left: 10%;
            width:90%;
        }
        #index-link .arrow{
            color:#fff;
            width:10%;    
            padding:0 4px 0 0;
        }      
        #index-link .arrow::after{
            content: '\e5e1';
            font-family: 'Material Icons';
            font-weight: 200;
            font-size:10px;
        }
        #index-link:hover{
            background: #000;
        }
        #index-link .text:hover{
            transform: scale(1.1);
        }
        #index-link:hover .arrow{
            padding:0 2px 0 2px;
        }
    }
	
}