@charset "UTF-8";
html {font-size: 100%;}
body{background: black;}
a{text-decoration: none;}

header{width:100%;height:50px;background:darkgreen;
       display:flex;justify-content: space-between;
      position: fixed;}
h3{height: 50px;width:100%;background: darkgreen;}
h3{font-size:20px;padding: 10px 0 0 50px; color:tan;}
.date{height: 50px;width:350px;background: #F370F2;}
.modoru{height: 50px;width:100px;background: black;}
.date h4{font-size:15px;padding-top: 13px; color:white;}
.modoru h4{font-size:15px;padding-top: 13px;color: tan;}
.date,.modoru{text-align: center;}
aside h4{color: white;}
section h4{color: yellow;}

img{width: 100%;object-position: top; position: absolute;object-fit: cover; z-index: -1}

/* ---------main-------------------------------------------------- */
main{width:100%;heiget:auto;position: relative;top:50px;
	   margin:0 auto;z-index: -1;}

.px2000A,.px1800A,.px1600A,.px1200A,.px1000A,.px800A,
.px600A,.px450A,.px400A,.px360A,.px320A
{display: none;}

.a,.b,.c{display: flex;justify-content: center;}
.a_l,.a_c,.a_r{opacity: 80%;text-align: center;color: white; padding-top: 10px;}
.b_l,.b_r{opacity: 80%;text-align: center;color: white; padding-top: 10px;}
.c_l,.c_c,.c_r{opacity: 80%;text-align: center;color: white; padding-top: 10px;}

.a_l,.a_c,.a_r{width: 30%;height: 100px;margin-top: 20px;}
.a_l{border-top-left-radius: 50px;background:#494CC2;}
.a_c{border-top-left-radius: 0px;background:#EA6F71;}
.a_r{border-top-right-radius: 50px;background:#20DD4C;}

.b_l,.b_c,.b_r{width: 30%;height: 100px;margin-top: 0px;}
.b_l{background:#3527A8;}
.b_r{background:#4F9A08;}

.c_l,.c_c,.c_r{width: 30%;height: 100px;margin-bottom: 20px;}
.c_l{border-bottom-left-radius: 50px;background:#040960;}
.c_c{border-bottom-left-radius: 0px;background:#B31517;}
.c_r{border-bottom-right-radius: 50px;background:#1F5014;}


/* ---------aside-------------------------------------------------- */
aside{display: flex;justify-content: center;margin-top: 150px;padding: 0;}
aside h4{text-align: center; padding: 16px; font-size:12px;}
.aside_a,.aside_b{display: flex;justify-content: center;margin-top: 150px;padding: 0;}

.pc{text-align: center;height: 80px;width: 100px;border: solid 1px white;background: black;}
.px2000{height: 80px;width: 100px;border: solid 1px white;background: green;opacity: 20%;}/* ------2000px--緑--------------- */
.px1800{height: 80px;width: 100px;border: solid 1px white;background: orange;opacity: 20%;}/* ------1800px--オレンジ---------- */
.px1600{height: 80px;width: 100px;border: solid 1px white;background: darkblue;opacity: 20%;}/* ------1600px--青--------------- */
.px1200{height: 80px;width: 100px;border: solid 1px white;background: #4D1213;opacity: 20%;}/* ------1200px--茶色------------- */
.px1000{height: 80px;width: 100px;border: solid 1px white;background: #C41E21;opacity: 20%;}/* ------1000px--赤--------------- */
.px800{height: 80px;width: 100px;border: solid 1px white;background: #432FA6;opacity: 20%;}/* --------800px--紫--------------- */
.px600{height: 80px;width: 100px;border: solid 1px white;background: #D321E0;opacity: 20%;}/* ------600px--ピンク--------------- */
.px450{height: 80px;width: 100px;border: solid 1px white;background: #054013;opacity: 20%;}/* ------450px--濃い緑--------------- */
.px400{height: 80px;width: 100px;border: solid 1px white;background: #0AD0F6;opacity: 20%;}/* ------400px--水色--------------- */
.px360{height: 80px;width: 100px;border: solid 1px white;background: #797272;opacity: 20%;}/* ------360px--灰色--------------- */
.px320{height: 80px;width: 100px;border: solid 1px white;background: #B0A440;opacity: 20%;}/* ------320px--金色--------------- */

/* ---------SECTION-------------------------------------------------- */
section{display: flex;justify-content: center; margin: 50px auto; }
section h4{font-size:40px; text-align: center ;padding-top: 30px;}

.pcA{height: 150px;width: 300px;}

/* ---------footer-------------------------------------------------- */
footer{width: 100%;height: 30px;display: flex;justify-content: center;
	     position: fixed; bottom: 0; background: tan;}

/* ---------レスポンシブ-------------------------------------------------- */
@media screen and ( max-width :2000px )/* ------2000px--緑--------------- */{
	    body{background:green;}
	    .pcA{display: none;}.px2000{opacity: 100%;}.pc{opacity: 20%;}
	    .px2000A{display: flex; height: 150px;width: 300px;}
        }
@media screen and ( max-width :1800px )/* ------1800px--オレンジ---------- */{
	    body{background:orange;}
      .px2000A{display: none;}.px1800{opacity: 100%;}.px2000{opacity: 20%;}
	    .px1800A{display: block; height: 150px;width: 300px;}
       }
@media screen and ( max-width :1600px )/* ------1600px--青--------------- */{
	    body{background:darkblue;}
      .px1800A{display: none;}.px1600{opacity: 100%;}.px1800{opacity: 20%;}
	    .px1600A{display: block; height: 150px;width: 300px;}
       }
@media screen and ( max-width :1200px )/* ------1200px--茶色------------- */{
	    body{background:#4D1213;}
	    aside{flex-direction: column}
	    .aside_A{margin: 10px 30px 0 30px;padding: 0;}
      .aside_B{margin: 10px 30px 0 30px;padding: 0;}
	    h3{height: 50px;width:100%;background: darkgreen;}
      .px1600A{display: none;}.px1200{opacity: 100%;}.px1600{opacity: 20%;}
	    .px1200A{display: block; height: 150px;width: 300px;;}/* ------1200px--茶色------------- */
       }
@media screen and ( max-width :1000px )/* ------1000px--赤--------------- */{
	    body{background:#C41E21;}
      .px1200A{display: none;}.px1000{opacity: 100%;}.px1200{opacity: 20%;}
	    .px1000A{display: block; height: 150px;width: 300px;}/* ------1000px--赤--------------- */
       }
@media screen and ( max-width :800px )/* --------800px--紫--------------- */{
	    body{background:#432FA6;}
      .px1000A{display: none;}.px800{opacity: 100%;}.px1000{opacity: 20%;}
	    .px800A{display: block; height: 150px;width: 300px;}/* --------800px--紫--------------- */
	     h3{font-size:18px;padding: 10px 0 0 20px; color:tan;}
	    .html{height: 50px;width:32%;background: #F370F2;}
      .css{height: 50px;width:32%;background: #38B9F0;}
      .html,.css{text-align: center;}
      section{margin-top: 30px;}
       }
@media screen and ( max-width :600px )/* ------600px--ピンク--------------- */{
	    body{background:#D321E0;}
	    .px800A{display: none;}.px600{opacity: 100%;}.px800{opacity: 20%;}
	    .px600A{display: block; height: 150px;width: 300px;}/* ------600px--ピンク--------------- */
       header{flex-direction: column;background: darkred;}
       h3{height: 50px;width:100%;text-align: center;;}
       h3{font-size:20px;padding-top: 10px; color:tan;}
       .date{height:80px;width:100%;background: darkred;}
       .modoru{height: 80px;width:100%;background:black;}
       h4{font-size:15px;padding: 10px 0; color:white;}
       main{width:100%;height:360px;top:120px;margin:0 auto;}
       }

/* ------こっからスマホ--------------------------------------------------------------------------- */

@media screen and ( max-width :450px )/* ------450px--濃い緑--------------- */{
	body{background:#054013;}
	.pc,.px2000,.px1800,.px1600,.px1200,.px1000,.px800,.px600,.px400,.px360,.px320{display: none;}
	.px600A{display: none;}.px450{opacity: 100%;}
	.px450A{display: block; height: 150px;width: 300px;}/* ------450px--濃い緑--------------- */
	main{width:100%;height:auto;position: relative;top:120px;margin:0 auto;}
  h3{font-size:15px;padding: 15px 0 10px 0; color:tan;}
  .date{height: 80px;width:100%;background: darkred;}
  .modoru{height: 80px;width:100%;background: black;}
  .date h4{font-size:15px;padding-top: 10px;}
  .modoru h4{font-size:15px;padding-top: 10px;}

	.a_l,.a_c,.a_r{width: 30%;height: 60px;margin-top: 20px;}
	.b_l,.b_c,.b_r{width: 30%;height: 60px;margin-top: 0px;}
	.c_l,.c_c,.c_r{width: 30%;height: 60px;margin-bottom: 20px;}
	aside{margin-top: 190px;padding: 0;}
  aside h4{text-align: center; padding: 22px; font-size:12px;}
  .aside_a,.aside_b{margin-top: 10px;padding: 0;}
	section{display: flex;justify-content: center; margin: 20px auto; }
  section h4{font-size:20px; text-align: center ;padding-top: 40px;}
       }
@media screen and ( max-width :400px )/* ------400px--水色--------------- */{
	body{background:#0AD0F6;}
	.px400{display: block;}
	.px450A{display: none;}
  .px400{opacity: 100%;}
  .px450{opacity: 20%;}
	.px400A{display: block; height: 150px;width: 300px;}/* ------400px--水色--------------- */
	aside{margin-top: 160px;padding: 0;}
	section{margin: 10px auto; }
  section h4{margin: -30px auto; }
       }
@media screen and ( max-width :361px )/* ------360px--灰色--------------- */{
	body{background:#797272;}
	.px400A{display: none;}
  .px360{opacity: 100%;}
  .px400{opacity: 20%;}
	.px360A{display: block; height: 150px;width: 300px;}/* ------360px--灰色--------------- */
	.px360{display: block;}
       }
@media screen and ( max-width :320px )/* ------320px--金色--------------- */{
	body{background:#B0A440;}
	aside{margin-top: 100px;padding: 0;}
  section{margin: 1px auto;}

  .px400 h4{text-align: center; padding: 15px; font-size:12px;}
  .px360 h4{text-align: center; padding: 15px; font-size:12px;}
  .px320 h4{text-align: center; padding: 15px; font-size:12px;}

	.px360A{display: none;}
  .px320{opacity: 100%;height: 60px;}
  .px360{opacity: 20%;height: 60px;}
	.px320A{display: block; height: 150px;width: 300px;}/* ------320px--金色--------------- */
  .px400{opacity: 20%;height: 60px;}
	.px450{display: none;}
	.px320{display: block;}
  footer{width: 100%;height: 0px;bottom: 0;}
       }