@charset "UTF-8";

/********************
mdr-runrun-diary-RWD 
 2021.1.4    rel 1.2
 2021.1.28   rel 1.3
 2021.5.6    rel 1.4
 2021.7.29   rel 1.5
*********************/


 img {
     max-width: 80%;
     height: auto;
     }

 video {
     width: 90%;
     }


/*******************************/
/**  560px未満  portrait   *****/
/*******************************/

@media screen and (max-width: 559px 
   orientation: portrait ) {


 body {
     font-size:  15px;
     max-width:  100%;
     height:     50px;
     box-sizing: border-box;
     text-align: center;
     background-color: #FFFFFF; 
     }

 img {
     max-width: 80%;
     height: auto;
     }

/***
 img {
     max-width: 80%;
     height: auto;
     }

 .image_rwd{ 
     width: 50%;
     max-width: 100%;
     height: auto;
     }
***/


#wrap{
   width: 310px;  
   margin-left:  1em;
   margin-right: 1em; 
   text-align: left;
   }

#wrap-note{
   width: 310px;  
   margin-left:  1em;
   margin-right: 1em; 
   text-align: left;
   }



  P::first-line{
   color:       ;
   font-size:   130%;
   font-weight: bold;
   font-family:  "Times New Roman" ,times, century,;
   background-color : ;
   }

   .youtube {
   position: relative;
   width:    100%;
   padding-top: 56.25%;
   }


   .youtube iframe {
   position: absolute;
   top:   0;
   right: 0;
   width:    100%;
   height:   100%;
   }


}



/*******************************/
/**  560px未満  landscape  *****/
/*******************************/

@media screen and (max-width: 559px 
   orientation: landscape ) {


 body {
     font-size:  13px;
     max-width:  100%;
     height:     50px;
     box-sizing: border-box;
     text-align: center;
     background-color: #FFFFFF; 

     }


 img {
     max-width: 80%;
     height: auto;
     }

/**
 img {
     max-width: 80%;
     height: auto;
     }

 .image_rwd{ 
     width: 60%;
     max-width: 100%;
     height: auto;
     }
***/

#wrap{
   width: 536px;  
   margin-left:  1em;
   margin-right: 1em; 
   text-align: left;
   }

#wrap-note{
   width: 360px;  
   margin-left:  1em;
   margin-right: 1em; 
   text-align: left;
   }

  P::first-line{
   color:       ;
   font-size:   130%;
   font-weight: bold;
   font-family:  "Times New Roman" ,times, century,;
   background-color : ;
   }

   .youtube {
   position: relative;
   width:    100%;
   padding-top: 56.25%;
   }



   .youtube iframe {
   position: absolute;
   top:   0;
   right: 0;
   width:    100%;
   height:   100%;
   }

}



/*******************************/
/******* 560px ～　959px *******/
/*******************************/
@media screen and (min-width: 560px) and (max-width: 959px)  {

html {
    background-color: #F0FFFF;    /**　周囲の背景色　**/
    }

 body {

   margin: 0  auto;
   width: 100%;
   width: 560px;
   text-align: center;

   font-family:  "Times New Roman" ,times, century;
   font-size: medium;
   line-height: 1.8em;
   background-color: #FFFFFF;

     }


 img {
     max-width: 80%;
     height: auto;
     }

/**
 img {
     max-width: 80%;
     height: auto;
     }

 .image_rwd{ 
     width: 60%;
     max-width: 100%;
     height: auto;
     }
***/


#wrap{
   width: 536px;  
   margin-left:  1em;
   margin-right: 1em; 
   text-align: left;
   }

#wrap-note{
   width: 360px;  
   margin-left:  1em;
   margin-right: 1em; 
   text-align: left;
   }

  h2{
   font-family:  "Times New Roman" ,times, century;
   font-weight: bold;
   color:       ;
   }

  h3{
   font-family:  "Times New Roman" ,times, century;
   font-weight: bold;
   color:       ;
   }

  h4{
   font-family: times new roman,times, century;
   font-weight: bold;
   text-align: right;
   }


  P::first-line{
   color:       ;
   font-size:   110%;
   font-weight: bold;
   font-family:  "Times New Roman" ,times, century,;
   background-color : ;
   }

  .whitespace{
   white-space: pre-wrap;
   }

 
  table.column{
   border:       solid 0px;
   margin-left : 1em;
   margin :      1em 1em 1em;
   font-size :   100%;
   width:        94%;
   }

  table.indent{
   border:       solid 0px;
   margin-left:  0px;
   margin:       1em 1em;
   font-size:    100%;
   width:        94%;
   }


   .youtube {
   position: relative;
   width:    100%;
   padding-top: 56.25%;
   }



   .youtube iframe {
   position: absolute;
   top:   0;
   right: 0;
   width:    100%;
   height:   100%;
   }


}


/*******************************/
/********** 960px以上 **********/
/*******************************/
@media screen and (min-width: 960px ) {

html {
    background-color: #C0C0C0;    /**　周囲の背景色　**/
    }

 BODY{
   margin: 0  auto;
   width: 100%;
   width: 750px;
   text-align: center;

   font-family:  "Times New Roman" ,times, century;
   font-size: medium;
   line-height: 1.8em;
   background-color: #FFFFFF;

   }


 img {
     max-width: 80%;
     height: auto;
     }

/**
 img {
     max-width: 80%;
     height: auto;
     }


 .image_rwd{ 
     width: 70%;
     max-width: 100%;
     height: auto;
     }
***/

#wrap{
   width: 720px;  
   margin-left:  1em;
   margin-right: 1em; 

   text-align: left;
   }

#wrap-note{
   width: 360px;  
   margin-left:  1em;
   margin-right: 1em; 
   text-align: left;
   }


  h2{
   font-family:  "Times New Roman" ,times, century;
   font-weight: bold;
   color:       ;
   }

  h3{
   font-family:  "Times New Roman" ,times, century;
   font-weight: bold;
   color:       ;
   }

  h4{
   font-family: times new roman,times, century;
   font-weight: bold;
   text-align: right;
   }


  P::first-line{
   color:       ;
   font-size:   110%;
   font-weight: bold;
   font-family:  "Times New Roman" ,times, century,;
   background-color : ;
   }

  .whitespace{
   white-space: pre-wrap;
   }

 
  table.column{
   border:       solid 0px;
   margin-left : 1em;
   margin :      1em 1em 1em;
   font-size :   100%;
   width:        94%;
   }

  table.indent{
   border:       solid 0px;
   margin-left:  0px;
   margin:       1em 1em;
   font-size:    100%;
   width:        94%;
   }


   .youtube {
   position: relative;
   width:    100%;
   padding-top: 56.25%;
   }



   .youtube iframe {
   position: absolute;
   top:   50;
   right: 70;
   width:    80%;
   height:   80%;
   }


}