@media screen and (min-width: 768px) { /* PC・タブレット */

 #about {
  position:relative;
  width:100%;
  min-width:1100px;
  padding-bottom:30px;
  background:white;
 }
 #about .vision_container {
  position:relative;
  margin:0 auto;
  width:100%;height:calc(100vw * 0.352);
  min-width:1100px;
  min-height:390px;
 }
 #about .vision {
  position:relative;
  width:100%;
  min-width:1100px;
 }
 #about .message {
  position:absolute;
  top:40px;left:50px;
  line-height:clamp(56px,5vw,200px);
  font-size:clamp(34px,3vw,100px);
  font-weight:bold;
  text-align:left;
  color:white;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;
 }
 #about .container {
  width:1060px;
  min-width:1060px;
  padding:0 20px;
  margin:0 auto;
  text-align:left;
  font-size:16px;
 }
 #about .header {
  margin:50px 0 0 0;
  font-size:60px;
  font-weight:bold;
 }
 #about .contents  {
  display:flex;
  width:50%;
  margin:40px 0 60px 0;
 }
 #about .contents li { flex:1; }
 #about .contents li a {
  text-decoration:underline;
  color:royalblue;
 }
 #about .icon {
  position:relative;
  display:inline-block;
  margin-right:5px;
  vertical-align:middle;
 }
 #about .icon.room { top:-5px;width:30px; }
 #about .icon.nyanko { top:-2px;width:40px; }
 #about .header.name {
  margin:30px 0 10px 0;
  font-size:30px;
 }
 #about .header.sub {
  margin:0px 0 10px 0;
  font-size:22px;
 }
 #about .text {
  margin-bottom:30px;
  padding-left:20px;
  line-height:30px;
  font-size:14px;
  font-weight:bold;
 }
 #about .text ul {
  padding-left:0px;
 }
 #about .chart {
  height:700px;
  margin-top:-20px;
 }
 #about .scene {
  display:inline-block;
  width:30.5%;
  margin:0 0 20px 20px;
  vertical-align:top;
  text-align:center;
  font-weight:bold;
 }
 #about .scene span {
  display:inline-block;
 }
 #about .scene.boss {
  width:22%;
  margin:0 20px 10px 0;
 }
 #about .scene.boss { line-height:20px; }
 #about .scene span {
  display:inline;
 }
 #about .visual {
  width:100%;
  border-radius:20px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
 }
 #about .visual.boss {
  width:200px;
 }
 #about .illust {
  width:400px;
 }

} @media screen and (max-width: 767px) {  /* スマホ */

 #about {
  position:relative;
  width:100%;
  padding-bottom:30px;
  background:white;
 }
 #about .vision_container {
  position:relative;
  width:100%;
  height:calc(100vw * 0.352);
  margin:0 auto;
 }
 #about .vision {
  position:relative;
  width:100%;
 }
 #about .message {
  position:absolute;
  top:15px;left:20px;
  line-height:clamp(14px,6vw,300px);
  font-size:clamp(12px,4vw,100px);
  font-weight:bold;
  color:white;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;
 }
 #about .container {
  width:calc(100% - 20px);
  padding:0 10px;
  margin:0 auto;
  text-align:left;
 }
 #about .header {
  margin:20px 0 0 0;
  font-size:30px;
  font-weight:bold;
 }
 #about .contents  {
  display:flex;
  width:90%;
  margin:20px 0 10px 0;
 }
 #about .contents li { flex:1; }
 #about .contents li a {
  text-decoration:underline;
  color:royalblue;
 }
 #about .icon {
  position:relative;
  top:-5px;
  display:inline-block;
  width:30px;
  margin-right:5px;
  vertical-align:middle;
 }
 #about .header.name {
  margin:0 0 10px 0;
  padding-top:60px;
  font-size:24px;
 }
 #about .header.sub {
  margin:10px 0 10px 0;
  font-size:18px;
 }
 #about .header.sub span { display:inline-block; }
 #about .text {
  margin-bottom:30px;
  padding:0 10px;
  line-height:24px;
  font-size:14px;
  font-weight:bold;
 }
 #about .text ul {
  padding-left:10px;
 }
 #about .chart {
  width:100%;
  margin-top:-20px;
 }
 #about .scene {
  display:inline-block;
  width:45%;
  margin:0 0 10px 10px;
  vertical-align:top;
  text-align:left;
  font-size:14px;
  font-weight:bold;
  line-height:18px;
 }
 #about .scene img { margin-bottom:5px; }
 #about .scene span { margin:0; }
 #about .scene.boss {
  width:30%;
  margin:0 5px 5px 0;
  text-align:center;
 }
 #about .scene.boss span { display:inline-block; }
 #about .visual {
  width:100%;
  border-radius:10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
 }
 #about .visual.boss {
  width:200px;
 }
 #about .illust {
  width:100%;
 }

}