@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 .title{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:3vw;
            line-height: 4vw;
            text-align: center;
            color:#000;
            padding:0;
            margin:5vw 0 4vw 0;
        }
        
        #pp-d{
            max-width:1920px;
            margin: 2vw auto 6vw auto;
            padding: 0 auto;
            position: relative;
        }
        #pp-d .wrap{
            margin:0 5vw;
            padding:0;
            /*border-top: 0.1vw dotted#000;*/
        }
        #pp-d .df-1{
            background:#999;
            font-size:1.25vw;
            line-height: 2vw;
            text-align: left;
            color:#fff;
            padding:0.5vw 1vw;
            margin:0;
        }
        #pp-d .index{
            font-weight: bold;
            font-size:1.7vw;
            line-height: 2.75vw;
            text-align: left;
            color:#444;
            padding:0;
            margin:1.75vw 0 0 0;
        }
        #pp-d .text{
            font-size:1.2vw;
            line-height: 1.75vw;
            text-align: left;
            color:#444;
            padding:0;
            margin:0.5vw 0 0 0;
        }
        #pp-d ul{
            font-size:1.2vw;
            line-height: 2.25vw;
            text-align: left;
            color:#444;
            margin: 1vw 0 0 1em;
            padding: 0;

        }
        #pp-d .date{
            font-size:1.2vw;
            line-height: 1.75vw;
            text-align: right;
            color:#444;
            padding:0;
            margin:2vw 0 0 0;
        }
     }
    
    @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 .title{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:58px;
            line-height: 77px;
            text-align: center;
            color:#000;
            padding:0;
            margin:96px 0 77px 0;
        }
        #pp-d{
            width:1920px;
            margin: 38.5px auto 115px auto;
            padding: 0 auto;
            position: relative;
        }
        #pp-d .wrap{
            margin:0 96px;
            padding:0;
            /*border-top: 0.1vw dotted#000;*/
        }
        #pp-d .df-1{
            background:#999;
            font-size:24px;
            line-height: 38.5px;
            text-align: left;
            color:#fff;
            padding:10px 20px;
            margin:0;
        }
        #pp-d .index{
            font-weight: bold;
            font-size:32.5px;
            line-height: 53px;
            text-align: left;
            color:#444;
            padding:0;
            margin:33.5px 0 0 0;
        }
        #pp-d .text{
            font-size:24px;
            line-height: 34px;
            text-align: left;
            color:#444;
            padding:0;
            margin:10px 0 0 0;
        }
        #pp-d ul{
            font-size:24px;
            line-height: 43px;
            text-align: left;
            color:#444;
            margin: 20px 0 0 1em;
            padding: 0;

        }
        #pp-d .date{
            font-size:24px;
            line-height: 43px;
            text-align: right;
            color:#444;
            padding:0;
            margin:40px 0 0 0;
        } 
    
    }

}

/* 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 .title{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:5vw;
            line-height: 7vw;
            text-align: center;
            color:#000;
            padding:0;
            margin:5vw 0 4vw 0;
        }
        
        #pp-d{
            min-width:320px;
            margin: 2vw auto 6vw auto;
            padding: 0 auto;
            position: relative;
        }
        #pp-d .wrap{
            margin:0 5vw;
            padding:0;
            /*border-top: 0.1vw dotted#000;*/
        }
        #pp-d .df-1{
            background:#999;
            font-size:3vw;
            line-height: 4.25vw;
            text-align: left;
            color:#fff;
            padding:1vw 1.5vw;
            margin:0;
        }
        #pp-d .index{
            font-weight: bold;
            font-size:4vw;
            line-height: 5vw;
            text-align: left;
            color:#444;
            padding:0;
            margin:4vw 0 0 0;
        }
        #pp-d .text{
            font-size:3vw;
            line-height: 4.25vw;
            text-align: left;
            color:#444;
            padding:0;
            margin:2vw 0 0 0;
        }
        #pp-d ul{
            font-size:3vw;
            line-height: 4vw;
            text-align: left;
            color:#444;
            margin: 2vw 0 0 1em;
            padding: 0;
        }
        #pp-d li{
            margin: 1.5vw 0;
            padding: 0;
        }

        #pp-d .date{
            font-size:2.5vw;
            line-height: 3vw;
            text-align: right;
            color:#444;
            padding:0;
            margin:4vw 0 0 0;
        }
    }
    @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{
            width:320px;
            margin:50px auto 0 auto; 
            text-align: center;
            border-top:3.25px solid #000;
        }
        #top-d .title{
            font-family: fot-klee-pro, sans-serif;
            font-weight: 600;
            font-style: normal;
            font-size:16px;
            line-height: 22px;
            text-align: center;
            color:#000;
            padding:0;
            margin:16px 0 13px 0;
        }
        
        #pp-d{
            width:320px;
            margin: 6px auto 20px auto;
            padding: 0 auto;
            position: relative;
        }
        #pp-d .wrap{
            margin:0 16px;
            padding:0;
            /*border-top: 0.1vw dotted#000;*/
        }
        #pp-d .df-1{
            background:#999;
            font-size:10px;
            line-height: 14.5px;
            text-align: left;
            color:#fff;
            padding:4px 5px;
            margin:0;
        }
        #pp-d .index{
            font-weight: bold;
            font-size:13px;
            line-height: 16px;
            text-align: left;
            color:#444;
            padding:0;
            margin:13px 0 0 0;
        }
        #pp-d .text{
            font-size:10px;
            line-height: 14px;
            text-align: left;
            color:#444;
            padding:0;
            margin:6.5px 0 0 0;
        }
        #pp-d ul{
            font-size:10px;
            line-height: 13px;
            text-align: left;
            color:#444;
            margin: 6.5px 0 0 1em;
            padding: 0;
        }
        #pp-d li{
            margin: 5px 0;
            padding: 0;
        }

        #pp-d .date{
            font-size:8px;
            line-height: 10px;
            text-align: right;
            color:#444;
            padding:0;
            margin:13px 0 0 0;
        }
    }
	
}