@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/n4.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{
            height:20vw;
            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: middle;
            display: table-cell;
        }
        #top-d .sub-copy-t .text1{
            font-size:3vw;
            line-height: 0;
        }
        #top-d .main-pic{
            background: url("../img/top_business_pic.jpg")no-repeat;
            background-position: center center;
            background-size:contain;
            padding-top:33.275vw;
            width:70%;
            margin: 0 auto;
        }
        #top-d .w-bk{
            background:#fff;
            width:60%;
            height:8vw;
            margin: -2.5vw auto 0 auto;
            font-size:2.5vw;
            letter-spacing: 0.25vw;
            color:#000;
            line-height: 8vw;
            font-weight: bold;
            position: relative;
            z-index: 999;
        }
        #info-d{
            max-width:1920px;
            height:auto;
            margin: 2vw auto 6vw auto;
            padding: 0 auto 20vw auto;
            position: relative;
        }
        #info-d .wrap{
            margin:0 2vw;
            padding:1.5vw 0;
            border-top: 0.1vw dotted#000;
        }
        #info-d .date{
            background:#000;
            font-size:1.5vw;
            letter-spacing: 0.1em;
            text-align: center;
            color:#fff;
            padding:0.5vw 0.75vw;
            margin:0;
        }
        #info-d .index{
            font-weight: bold;
            font-size:2vw;
            line-height: 2.75vw;
            text-align: left;
            color:#000;
            padding:0;
            margin:1.75vw 0 0 0;
        }
        #info-d .text{
            font-size:1.3vw;
            line-height: 2.25vw;
            text-align: left;
            color:#666;
            padding:0;
            margin:1vw 0 0 0;
        }
        #info-d .bl{
            margin:0 2vw;
            padding:1.5vw 0;
            border-top: 0.1vw dotted #000;
        }
        #info-d img{
            width:60%;
            margin:2vw 20% 0 20%;
        }

    }
    
    @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/n4.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: middle;
            display: table-cell;
        }
        #top-d .sub-copy-t .text1{
            font-size:58px;
            line-height: 0;
        }
        
        #info-d{
            width:1920px;
            height:auto;
            margin: 38px auto 115px auto;
            padding: 0 auto 100px auto;
            position: relative;
        }
        #info-d .wrap{
            margin:0 40px;
            padding:29px 0;
            border-top: 2px dotted#000;
        }
        #info-d .date{
            background:#000;
            font-size:29px;
            letter-spacing: 0.1em;
            text-align: center;
            color:#fff;
            padding:10px 15px;
            margin:0;
        }
        #info-d .index{
            font-weight: bold;
            font-size:38px;
            line-height: 48px;
            text-align: left;
            color:#000;
            padding:0;
            margin:30px 0 0 0;
        }
        #info-d .text{
            font-size:25px;
            line-height: 43pxs;
            text-align: left;
            color:#666;
            padding:0;
            margin:20px 0 0 0;
        }
        #info-d .bl{
            margin:0 40px;
            padding:29px 0;
            border-top: 2px dotted #000;
        }
        #info-d img{
            width:60%;
            margin:38px 20% 0 20%;
        } 
    
    }

}

/* 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/n4.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:6vw auto 0 auto;
        }
        #top-d .inner{
            display:none;
        }
        #top-d .sub-copy-t .text1{
            display:none;
        }
        #top-d .sub-copy-t .text2{
            display:none;
        }        
        #info-d{
            min-width:320px;
            margin: 2vw auto 6vw auto;
            padding: 0 auto;
            position: relative;
        }
        #info-d .wrap{
            margin:0 4vw;
            padding:3vw 0;
            border-top: 0.2vw dotted #000;
        }
        #info-d .date{
            background:#000;
            font-size:3vw;
            letter-spacing: 0.1em;
            text-align: center;
            color:#fff;
            padding:0.75vw 1vw;
            margin:0;
        }
        #info-d .index{
            font-weight: bold;
            font-size:4vw;
            line-height: 5vw;
            text-align: left;
            color:#000;
            padding:0;
            margin:3vw 0 0 0;
        }
        #info-d .text{
            font-size:3.5vw;
            line-height: 4.75vw;
            text-align: left;
            color:#666;
            padding:0;
            margin:2.75vw 0 0 0;
        }
        #info-d .bl{
            margin:0 5vw;
            padding:1.5vw 0;
            border-top: 0.2vw dotted #000;
        }
        #info-d img{
            width:100%;
            margin:3vw auto 0vw auto;
        }
    }
    @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/n4.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:20px auto 12px auto;
        }
        #top-d .inner{
            display:none;
        }
        #top-d .sub-copy-t .text1{
            display:none;
        }
        #top-d .sub-copy-t .text2{
            display:none;
        }        
        
        #info-d{
            width:320px;
            margin: 7px auto 19px auto;
            padding: 0 auto;
            position: relative;
        }
        #info-d .wrap{
            margin:0 12px;
            padding:10px 0;
            border-top: 0.7px dotted #000;
        }
        #info-d .date{
            background:#000;
            font-size:10px;
            letter-spacing: 0.1em;
            text-align: center;
            color:#fff;
            padding:3px 4px;
            margin:0;
        }
        #info-d .index{
            font-weight: bold;
            font-size:13px;
            line-height: 16px;
            text-align: left;
            color:#000;
            padding:0;
            margin:10px 0 0 0;
        }
        #info-d .text{
            font-size:11px;
            line-height: 16px;
            text-align: left;
            color:#666;
            padding:0;
            margin:9px 0 0 0;
        }
        #info-d .bl{
            margin:0 16px;
            padding:5px 0;
            border-top: 0.7px dotted #000;
        }
        #info-d img{
            width:100%;
            margin:10px auto 0 auto;
        }
    }
	
}