@charset "UTF-8";
/*--------------------------------------------
TOPICS
---------------------------------------------*/
#topics .box{
    background-color: #fff;
    position: relative;
  }
#topics .box:after{
      content:"";
      display: block;
      background: url("../images/ui/parts/wavy01.svg") var(--bgContain);
      position: absolute;
    }
#topics h2{
    color:var(--siteOrange);
    font-weight: 700;
    font-family: var(--fontFamilyMal);
  }
#topics .topicsContent a{
      -webkit-text-decoration: underline;
      text-decoration: underline;
      transition: opacity var(--transitionBase);
    }
#topics .topicsContent a:hover{
		opacity: .8;
	}
@media screen and (max-width: 750px){
#topics{
    padding-top: calc( 16 var(--remBase) );
    padding-bottom: calc( 60 var(--remBase) )
}
    #topics .box{
      box-shadow: calc( 3.6 var(--remBase) ) calc( 3.6 var(--remBase) ) calc( 5 var(--remBase) ) 0 rgba( 0,0,0,.65 );
      padding-inline: calc( 20 var(--percentBase) );
      padding-top: calc( ( 32 - 6 ) var(--remBase) );
      padding-bottom: calc( ( 40 - 7 ) var(--remBase) );
    }
      #topics .box:after{
        width:calc( 357 * 100% / 690 );
        height: calc( 51 var(--remBase) );
        top: calc( 7 var(--remBase) );
        left:calc( 360 * 100% / 690 );
      }
    #topics h2{
      font-size: calc( 28 var(--remBase) );;
      line-height: calc( 40 / 28 );;
    }
    #topics .topicsContent{
      margin-top: calc( ( 24 - 6 - 7 ) var(--remBase) );
    }
      #topics .topicsContent *{
        font-size: calc( 26 var(--remBase) );;
        line-height: calc( 40 / 26 );;
      }
  }
@media print,screen and (min-width: 751px){
#topics{
}
    #topics .box{
      z-index: 2;
      width:calc( 700 * 100% / 1200 );
      box-shadow: calc( 3.6 var(--remBase) ) calc( 3.6 var(--remBase) ) calc( 5 var(--remBase) ) 0 rgba( 0,0,0,.65 );
      margin-top: calc( -24 var(--remBase) );
      margin-left: calc( 20 var(--percentBase) );
      padding-inline: calc( 26 var(--percentBase) );
      padding-top: calc( ( 25 - 8 ) var(--remBase) );
      padding-bottom: calc( ( 40 - 7 ) var(--remBase) );
    }
      #topics .box:after{
        width:calc( 357 * 100% / 700 );
        height: calc( 51 var(--remBase) );
        top: calc( 92 var(--remBase) );
        left:calc( 684 * 100% / 700 );
      }
    #topics h2{
      font-size: calc( 24 var(--remBase) );;
      line-height: calc( 40 / 24 );;
    }
    #topics .topicsContent{
      margin-top: calc( ( 29 - 8 - 7 ) var(--remBase) );
    }
      #topics .topicsContent > *{
        font-size: calc( 18 var(--remBase) );;
        line-height: calc( 32 / 18 );;
      }
  }
/*--------------------------------------------
FEATURES
--------------------------------------------*/
#features{
  overflow: hidden;
  display: grid;
  grid-auto-flow: row;
}
#features ul:nth-of-type(1){
    grid-row: 1;
    grid-column: 1;
  }
#features ul:nth-of-type(1) h3{
      font-weight: 700;
      color:#5c5754
    }
#features ul:nth-of-type(1) p{
      font-weight: 500;
    }
#features h2{
    grid-row: 2;
    grid-column: 1;
    color:#5c5754;
    text-align: center;
    position: relative;
    font-family: var(--fontFamilyMal);
  }

#features h2:before, #features h2:after{
      content:"";
      display: block;
      background: url("../images/ui/parts/border01.svg") var(--bgContain);
      font-size: 0;
      position: absolute;
    }
#features ul:nth-of-type(2){
    grid-row: 3;
    grid-column: 1;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: start;
  }
#features ul h3{
    font-family: var(--fontFamilyMal);
  }
#features ul:nth-of-type(2) picture{
      width: 100%;
    }
#features ul:nth-of-type(2) picture img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
#features ul:nth-of-type(2) p{
      text-align: center;
      font-weight: 700;
      color:#5c5754;
    }
@media screen and (max-width: 750px){
#features{
    padding-bottom: calc( ( 73 - 2.8 ) var(--remBase) )
}
      #features ul:nth-of-type(1) li{
        display: grid;
        align-items: center;
        justify-content: start;
        grid-template-columns: calc( 275 var(--percentBase) );
        column-gap: calc( 8 var(--percentBase) );
        grid-auto-flow: column;
      }
      #features ul:nth-of-type(1) h3{
        display: grid;
        place-items:center;
        position: relative;
        height: calc( 136 var(--remBase) );
        font-size: calc( 45 var(--remBase) );
      }
        #features ul:nth-of-type(1) h3:before{
          content:"";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url("../images/ui/bg/rhombus.svg") var(--bgContain);
          z-index: -1;
        }
          #features ul:nth-of-type(1) li:nth-child(1) h3:before{
            filter:invert(78%) sepia(12%) saturate(599%) hue-rotate(308deg) brightness(105%) contrast(91%);
          }
          #features ul:nth-of-type(1) li:nth-child(2) h3:before{
            filter :invert(95%) sepia(7%) saturate(440%) hue-rotate(112deg) brightness(90%) contrast(94%);
          }
          #features ul:nth-of-type(1) li:nth-child(3) h3:before{
            filter: invert(86%) sepia(18%) saturate(342%) hue-rotate(338deg) brightness(99%) contrast(93%);
          }
      #features ul:nth-of-type(1) p{
        font-size: calc( 26 var(--remBase) );
        line-height: 1.2;
      }
    #features h2{
      font-size: calc( 60 var(--remBase) );
      margin-top: calc( 49 var(--remBase) );
    }
      #features h2:before, #features h2:after{
        width:calc( 631 var(--percentBase) );
        height: calc( 25 var(--remBase) );
        top: calc( 17.5 var(--remBase) );
      }
      #features h2:before{
        left:calc( -426 var(--percentBase) );
      }
      #features h2:after{
        right:calc( -426 var(--percentBase) );
      }
    #features ul:nth-of-type(2){
      margin-top: calc( 59 var(--remBase) );
      grid-template-columns: repeat( 3 , calc( 226 var(--percentBase) ) );
      column-gap: calc( 6 var(--percentBase) );
    }
      #features ul:nth-of-type(2) picture{
        height: calc( 226 var(--remBase) );
      }
      #features ul:nth-of-type(2) p{
        font-size: calc( 28 var(--remBase) );
        line-height: 1.2;
        margin-top: calc( ( 22 - 2.8 ) var(--remBase) );
      }
  }
@media print,screen and (min-width: 751px){
#features{
    padding-bottom: 50px;
    padding-top: 50px;
}
    #features ul:nth-of-type(1){
      display: grid;
      align-items: center;
      justify-content: center;
      grid-auto-flow: column;
      grid-template-columns: calc( 330 var(--percentBase) ) calc( 13 var(--percentBase) ) calc( 317 var(--percentBase) ) calc( 13 var(--percentBase) ) calc( 330 var(--percentBase) );
    }
      #features ul:nth-of-type(1) li{
        grid-row: 1;
        padding-top: calc( 20 var(--remBase) );
        height: calc( 170 var(--remBase) );
        text-align: center;
        position: relative;
      }
        #features ul:nth-of-type(1) li:before{
          content:"";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url("../images/ui/bg/rhombus.svg") var(--bgContain);
          z-index: -1;
        }
        #features ul:nth-of-type(1) li:nth-child(1){
          grid-column: 1/3;
        }
          #features ul:nth-of-type(1) li:nth-child(1):before{
            filter:invert(78%) sepia(12%) saturate(599%) hue-rotate(308deg) brightness(105%) contrast(91%);
          }
        #features ul:nth-of-type(1) li:nth-child(2){
          grid-column: 2/5;
        }
          #features ul:nth-of-type(1) li:nth-child(2):before{
            filter :invert(95%) sepia(7%) saturate(440%) hue-rotate(112deg) brightness(90%) contrast(94%);
          }
        #features ul:nth-of-type(1) li:nth-child(3){
          grid-column: 4/6;
        }
          #features ul:nth-of-type(1) li:nth-child(3):before{
            filter: invert(86%) sepia(18%) saturate(342%) hue-rotate(338deg) brightness(99%) contrast(93%);
          }
      #features ul:nth-of-type(1) h3{
        font-size: calc( 45 var(--remBase) );
      }
      #features ul:nth-of-type(1) p{
        margin-top: calc( ( 25 - 5 ) var(--remBase) );
        font-size: calc( 20 var(--remBase) );;
        line-height: 1.5;
      }
    #features h2{
      font-size: calc( 45 var(--remBase) );
      margin-top: 80px;
    }
      #features h2:before, #features h2:after{
        width:calc( 631 var(--percentBase) );
        height: calc( 25 var(--remBase) );
        top: calc( 10 var(--remBase) );
      }
      #features h2:before{
        left:calc( -140 var(--percentBase) );
      }
      #features h2:after{
        right:calc( -140 var(--percentBase) );
      }
    #features ul:nth-of-type(2){
      margin-top: 30px;
      grid-template-columns: repeat( 3 , calc( 280 var(--percentBase) ) );
      column-gap: calc( 20 var(--percentBase) );
    }
      #features ul:nth-of-type(2) picture{
        height: calc( 280 var(--remBase) );
      }
      #features ul:nth-of-type(2) p{
        font-size: calc( 24 var(--remBase) );;
        line-height: calc( 40 / 24 );;
        margin-top: calc( ( 18 - 7 ) var(--remBase) );
      }
  }
/*--------------------------------------------
ADMISSION
---------------------------------------------*/
#admission{
  background-repeat: repeat;
  background-position: center 0;
}
#admission h2{
    margin-inline: auto;
    position: relative;
    z-index: 1;
    display: grid;
    place-items:center;
    color:#5c5754;
    font-weight: 700;
  }
#admission h2:before{
      content:"";
      display: block;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: contain;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter:invert(68%) sepia(29%) saturate(411%) hue-rotate(148deg) brightness(104%) contrast(89%);
      z-index: -1;
      font-size: 0;
    }
#admission ul{
    display: flex;
  }
#admission a{
    display: grid;
    place-items:center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    color:#44403d;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition:filter var(--transitionBase);
  }
#admission a:hover{
		filter:brightness(1.1);
	color: #5c5754;
	}
#admission li:nth-child(4n+1) a{
      background-image: url("../images/ui/bg/ring01.webp");
    }
#admission li:nth-child(4n+2) a{
      background-image: url("../images/ui/bg/ring02.webp");
    }
#admission li:nth-child(4n+3) a{
      background-image: url("../images/ui/bg/ring03.webp");
    }
#admission li:nth-child(4n+4) a{
      background-image: url("../images/ui/bg/ring04.webp");
    }
@media screen and (max-width: 750px){
#admission{
    padding-bottom: calc( 77 var(--remBase) );
    background-image: url("../images/ui/bg/stripe01_sp.webp");
    margin-top: calc( 39 var(--remBase) )
}
    #admission h2{
      position: relative;
      top: calc( -39 var(--remBase) );
      width: calc( 686 * 100% / 750 );
      height: calc( 97 var(--remBase) );
      font-size: calc( 60 var(--remBase) );
    }
      #admission h2:before{
        background-image: url("../images/ui/bg/ribbon01_sp.svg");
      }
    #admission ul{
      margin-top: calc( ( 35 - 39 ) var(--remBase) );
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
    }
    #admission a{
      font-size: calc( 32 var(--remBase) );
      text-shadow: calc( -4 var(--remBase) ) calc( -4 var(--remBase) ) 0 #fff , 0 calc( -4 var(--remBase) ) 0 #fff , calc( 4 var(--remBase) ) calc( -4 var(--remBase) ) 0 #fff , calc( 4 var(--remBase) ) 0 0 #fff , calc( 4 var(--remBase) ) calc( 4 var(--remBase) ) 0 #fff , 0 calc( 4 var(--remBase) ) 0 #fff , calc( -4 var(--remBase) ) calc( 4 var(--remBase) ) 0 #fff , calc( -4 var(--remBase) ) 0 0 #fff;
    }
    #admission li:nth-child(4n+1){
      width:calc( 240 * 100% / 750 );
    }
      #admission li:nth-child(4n+1) a{
        height: calc( 211 var(--remBase) );
      }
    #admission li:nth-child(4n+2){
      width:calc( 225 * 100% / 750 );
    }
      #admission li:nth-child(4n+2) a{
        height: calc( 207 var(--remBase) );
      }
    #admission li:nth-child(4n+3){
      width:calc( 231 * 100% / 750 );
    }
      #admission li:nth-child(4n+3) a{
        height: calc( 204 var(--remBase) );
      }
    #admission li:nth-child(4n+4){
      margin-top: calc( 4 var(--remBase) );
      width:calc( 216 * 100% / 750 );
    }
      #admission li:nth-child(4n+4) a{
        height: calc( 201 var(--remBase) );
      }
    #admission li:nth-child(1){
      margin-left: calc( 17 * 100% / 750 );
    }
    #admission li:nth-child(2){
      margin-top: calc( 2 var(--remBase) );
      margin-left: calc( 4 * 100% / 750 );
    }
    #admission li:nth-child(3){
      margin-top: calc( 3 var(--remBase) );
      margin-left: calc( 4 * 100% / 750 );
    }
    #admission li:nth-child(4){
      margin-top: calc( 8 var(--remBase) );
      margin-left: calc( 29 * 100% / 750 );
    }
    #admission li:nth-child(5){
      margin-top: calc( 3 var(--remBase) );
      margin-left: calc( 8 * 100% / 750 );
    }
    #admission li:nth-child(6){
      margin-top: calc( 5 var(--remBase) );
    }
    #admission li:nth-child(1){
		margin-left: calc( 120 * 100% / 750 );
    }
    #admission li:nth-child(2){
		margin-right: calc( 120 * 100% / 750 );
    }
  }
@media print,screen and (min-width: 751px){
#admission{
    padding-bottom: calc( 91 var(--remBase) );
    background-image: url("../images/ui/bg/stripe01_pc.webp");
    margin-top: calc( 22 var(--remBase) )
}
    #admission h2{
      position: relative;
      top: calc( -22 var(--remBase) );
      width: calc( 1000 var(--percentBase) );
      height: calc( 80 var(--remBase) );
      font-size: calc( 45 var(--remBase) );
    }
      #admission h2:before{
        background-image: url("../images/ui/bg/ribbon01_pc.svg");
      }
    #admission ul{
      margin-top: calc( ( 48 - 22 ) var(--remBase) );
    }
    #admission a{
      font-size: calc( 24 var(--remBase) );
      text-shadow: calc( -4 var(--remBase) ) calc( -4 var(--remBase) ) 0 #fff , 0 calc( -4 var(--remBase) ) 0 #fff , calc( 4 var(--remBase) ) calc( -4 var(--remBase) ) 0 #fff , calc( 4 var(--remBase) ) 0 0 #fff , calc( 4 var(--remBase) ) calc( 4 var(--remBase) ) 0 #fff , 0 calc( 4 var(--remBase) ) 0 #fff , calc( -4 var(--remBase) ) calc( 4 var(--remBase) ) 0 #fff , calc( -4 var(--remBase) ) 0 0 #fff;
    }
    #admission li:nth-child(4n+1){
      width:calc( 180 var(--percentBase) );
    }
      #admission li:nth-child(4n+1) a{
        height: calc( 158 var(--remBase) );
      }
    #admission li:nth-child(4n+2){
      margin-top: calc( 2 var(--remBase) );
      width:calc( 168 var(--percentBase) );
    }
      #admission li:nth-child(4n+2) a{
        height: calc( 155 var(--remBase) );
      }
    #admission li:nth-child(4n+3){
      margin-top: calc( 3 var(--remBase) );
      width:calc( 179 var(--percentBase) );
    }
      #admission li:nth-child(4n+3) a{
        height: calc( 153 var(--remBase) );
      }
    #admission li:nth-child(4n+4){
      margin-top: calc( 4 var(--remBase) );
      width:calc( 157 var(--percentBase) );
    }
      #admission li:nth-child(4n+4) a{
        height: calc( 151 var(--remBase) );
      }
    #admission li:{
      margin-left: calc( 5 var(--percentBase) );
    }
    #admission li:nth-child(1){
      margin-left: calc( 0 var(--percentBase) );
    }
    #admission li:nth-child(2){
      margin-left: calc( 0 var(--percentBase) );
    }
    #admission li:nth-child(3){
      margin-left: calc( 0 var(--percentBase) );
    }
    #admission li:nth-child(4){
      margin-left: calc( 0 var(--percentBase) );
    }
    #admission li:nth-child(5){
      margin-left: calc( 0 var(--percentBase) );
    }
    #admission li:nth-child(6){
      margin-left: calc( 0 var(--percentBase) );
    }
  }
/*--------------------------------------------
SECTIONS
---------------------------------------------*/
@media screen and (max-width: 750px){
.sections{
    padding-top: calc( 73 var(--remBase) );
    padding-bottom: calc( 79 var(--remBase) )
}
  }
@media print,screen and (min-width: 751px){
.sections{
    padding-top: calc( 94 var(--remBase) );
    padding-bottom: calc( 61 var(--remBase) );
    display: grid;
    grid-template-columns: calc( 10 var(--percentBase) ) calc( 540 var(--percentBase) ) calc( 60 var(--percentBase) ) calc( 580 var(--percentBase) ) calc( 10 var(--percentBase) )
}
  }
/*--------------------------------------------
NEWS
---------------------------------------------*/
#news h2{
    font-weight: 700;
    color:#5c5754;
    position: relative;
  }
#news h2:after{
      content:"";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("../images/ui/bg/comment.svg") var(--bgContain);
      filter:invert(84%) sepia(27%) saturate(551%) hue-rotate(327deg) brightness(103%) contrast(92%);
      z-index: -1;
    }
#news > ul > li:after{
        display: block;
        content:"";
        width: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 0 0;
        filter:invert(84%) sepia(27%) saturate(551%) hue-rotate(327deg) brightness(103%) contrast(92%);
      }
#news > ul > li > a{
        display: grid;
        transition:filter var(--transitionBase);
      }
#news > ul > li > a:hover{
		filter:brightness(1.1);
	}
#news :where(time,h3){
    grid-row: 1;
    font-weight: 400;
  }
#news time{
    grid-column: 1;
  }
#news h3{
    grid-column: 2;
    -webkit-text-decoration: underline;
  }
#news ul ul{
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
  }
#news li li{
    border-radius: 100dvh;
    color:#fff;
    text-align: center;
    background-color: var(--bgLabel);
    display: grid;
    place-items:center;
  }
#news a:hover{
    opacity: .8;
  }
#news .link-archive01{
    margin-left: auto;
  }
@media screen and (max-width: 750px){
    #news h2{
      width: calc( 686 var(--percentBase) );
      height: calc( 125 var(--remBase) );
      padding-top: calc( 21 var(--remBase) );
      font-size: calc( 60 var(--remBase) );
      text-align: center;
    }
        #news > ul > li:after{
          background-image: url("../images/ui/parts/border02_sp.svg");
          height: calc( 8 var(--remBase) );
        }
        #news > ul > li > a{
          padding-top: calc( ( 36 - 2.6 ) var(--remBase) );
          padding-bottom: calc( 32 var(--remBase) );
          grid-template-columns: calc( 170 var(--percentBase) ) 1fr;
          row-gap: calc( ( 18 - 2.6 ) var(--remBase) );
        }
    #news :where(time,h3){
      font-size: calc( 26 var(--remBase) );
      line-height: 1.2;
    }
    #news ul ul{
      column-gap: calc( 10 * 100% / 520 );
      row-gap: calc( 10 var(--remBase) );
    }
    #news li li{
      font-size: calc( 20 var(--remBase) );
      height: calc( 30 var(--remBase) );
      padding-inline:calc( 19 var(--remBase) );
    }
    #news .link-archive01{
      margin-top: calc( 48 var(--remBase) );
      margin-inline: auto;
    }
  }
@media print,screen and (min-width: 751px){
#news{
    grid-column: 2;
    grid-row: 1
}
    #news h2{
      width: 100%;
      height: calc( 98 var(--remBase) );
      padding-top: calc( 17 var(--remBase) );
      padding-left: calc( 42 * 100% / 540 );
      font-size: calc( 45 var(--remBase) );
    }
        #news > ul > li:after{
          background-image: url("../images/ui/parts/border02_pc.svg");
          height: calc( 4 var(--remBase) );
        }
        #news > ul > li > a{
          padding-top: calc( ( 20 - 7 ) var(--remBase) );
          padding-bottom: calc( 20 var(--remBase) );
          padding-inline: calc( 10 * 100% / 540 );
          grid-template-columns: calc( 138 * 100% / 520 ) 1fr;
          row-gap: calc( ( 16 - 7 ) var(--remBase) );
        }
    #news :where(time,h3){
      font-size: calc( 18 var(--remBase) );;
      line-height: calc( 32 / 18 );;
    }
    #news ul ul{
      column-gap: calc( 13 * 100% / 382 );
      row-gap: calc( 13 var(--remBase) );
    }
    #news li li{
      font-size: calc( 14 var(--remBase) );
      height: calc( 20 var(--remBase) );
      padding-inline:calc( 12 var(--remBase) );
    }
    #news .link-archive01{
      margin-top: calc( 20 var(--remBase) );
      margin-right: calc( 10 * 100% / 540 );
    }
  }
#blog h2{
    position: relative;
    display: grid;
    align-items: center;
    justify-content: start;
    grid-auto-flow: column;
  }
#blog h2 span:nth-of-type(2){
      font-weight: 700;
      color:#5c5754;
    }
#blog h2:after{
      content:"";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: url("../images/ui/bg/ribbon01_sp.svg") var(--bgContain);
      filter:invert(85%) sepia(3%) saturate(1681%) hue-rotate(316deg) brightness(105%) contrast(94%);
    }
#blog ul{
    display: grid;
    align-items: start;
  }
#blog li{
    position: relative;
  }
#blog li a{
      transition:filter var(--transitionBase);
    }
#blog li a:hover{
		filter:brightness(1.1);
	}
#blog li a{
      display: block;
}
#blog picture{
    width: 100%;
    position: relative;
  }
#blog picture img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
#blog picture:before{
      content:"";
      display: block;
      position: absolute;
      background-color: #fff;
      background-color: var(--sitePink);
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;
    }
#blog p{
    position: absolute;
    pointer-events: none;
    z-index: 2;
  }
#blog :where( time , h3 ){
    line-height: 1.2;
  }
#blog time{
    display: block;
  }
#blog h3{
    -webkit-text-decoration: underline;
    font-weight: 400;
  }
#blog a:hover{
    opacity: .8;
  }
#blog .link-archive01{
    margin-left: auto;
  }
@media screen and (max-width: 750px){
#blog{
    margin-top: calc( 118 var(--remBase) )
}
    #blog h2{
      height: calc( 97 var(--remBase) );
      column-gap: calc( 10 var(--percentBase) );
      justify-content: center;
    }
      #blog h2 span:nth-of-type(1){
        font-size: calc( 28 var(--remBase) );
      }
      #blog h2 span:nth-of-type(2){
        font-size: calc( 60 var(--remBase) );
      }
    #blog ul{
      margin-top: calc( 35 var(--remBase) );
      grid-template-columns: repeat( 2 , calc( 326 var(--percentBase) ) );
      justify-content: space-between;
      row-gap: calc( ( 42 - 2.6 ) var(--remBase) );
    }
    #blog picture{
      height: calc( 290 var(--remBase) );
    }
      #blog picture img{
        border-radius: calc( 6 var(--remBase) );
      }
      #blog picture:before{
        top: calc( 4 var(--remBase) );
        left:calc( 4 * 100% / 326 );
        border-radius: calc( 6 var(--remBase) );
      }
    #blog p{
      width:calc( 101 * 100% / 326 );
      height: calc( 54 var(--remBase) );
      top: calc( 274 var(--remBase) );
      left:calc( 243 * 100% / 326 );
    }
    #blog :where( time , h3 ){
      font-size: calc( 26 var(--remBase) );
    }
    #blog time{
      margin-top: calc( ( 14 - 2.6 ) var(--remBase) );
    }
    #blog h3{
      margin-top: calc( ( 9 - 2.6 - 2.6 ) var(--remBase) );
    }
    #blog .link-archive01{
      margin-top: calc( ( 80 - 2.6 ) var(--remBase) );
      margin-inline: auto;
    }
  }
@media print,screen and (min-width: 751px){
#blog{
    grid-row: 1;
    grid-column: 4
}
    #blog h2{
      width:calc( 568 * 100% / 580 );
      height: calc( 80 var(--remBase) );
      column-gap: calc( 5 * 100% / 490 );
      padding-left: calc( 78 * 100% / 580 );
    }
      #blog h2 span:nth-of-type(1){
        font-size: calc( 18 var(--remBase) );
      }
      #blog h2 span:nth-of-type(2){
        font-size: calc( 45 var(--remBase) );
      }
    #blog ul{
      margin-top: calc( 12 var(--remBase) );
      grid-template-columns: repeat( 3 , calc( 180 * 100% / 580 ) );
      column-gap: calc( 20 * 100% / 580 );
      row-gap: calc( ( 31 - 1.8 ) var(--remBase) );
    }
    #blog picture{
      height: calc( 160 var(--remBase) );
    }
      #blog picture img{
        border-radius: calc( 6 var(--remBase) );
      }
      #blog picture:before{
        top: calc( 4 var(--remBase) );
        left:calc( 4 * 100% / 180 );
        border-radius: calc( 6 var(--remBase) );
      }
    #blog p{
      width:calc( 61 * 100% / 180 );
      height: calc( 36 var(--remBase) );
      top: calc( 134 var(--remBase) );
      left:calc( 139 * 100% / 180 );
    }
    #blog :where( time , h3 ){
      font-size: calc( 18 var(--remBase) );
    }
    #blog time{
      margin-top: calc( ( 14 - 1.8 ) var(--remBase) );
    }
    #blog h3{
      margin-top: calc( ( 11 - 1.8 - 1.8 ) var(--remBase) );
    }
    #blog .link-archive01{
      margin-top: calc( ( 49 - 1.8 ) var(--remBase) );
      margin-right:calc( 10 * 100% / 580 );
    }
  }