@charset "utf-8";

.fixed-size {
  width: 100%;
  height: auto;
object-fit: contain;
   max-width: 474px; /* 最大幅 */
   min-width: 240px; /* 最小幅 */
   max-height: 496px; /* 最大幅 */
}

body {
 background: linear-gradient(lavenderblush, darksalmon); 

 width:auto; /*ページ全体の幅*/
 overflow-x: hidden; /*スクロールバー下部の消去*/
}

a:link{color:chocolate; /*未訪問リンクの色*/}
a:visited{color:saddlebrown; /*訪問済みリンクの色*/}
a:active{color:maroon; /*クリックしたときの色*/}
a:hover{color:firebrick; /*マウスが乗ったときの色*/}
a{text-decoration: none;}

ul {
list-style-type: none; /*リストの先頭（noneは点を消している）*/
margin: 0 auto;
padding-left: 5px; /*左側の空白サイズ*/
font-size:80%; /*リストのフォントサイズ*/
}

span.menu {font-family:'Calibri','Courier New','Yu Gothic','Yu Gothic Medium','游ゴシック Medium',sans-serif; font-size: 200%;}

#wrap{
border-radius: 20px;
width: 500px; /*内容部分の幅*/ 
margin: 0 auto; /*マージンの指定。ブラウザ対策*/
padding: 15px; /*内容部分の周りの余白サイズ*/
text-align:left;   /*文章など内容部分を左揃えにしている*/
background-color:white; /*背景の色*/
}

#wrap2{
border-radius: 100px;
width: 300px; /*内容部分の幅*/ 
margin: 0 auto; /*マージンの指定。ブラウザ対策*/
padding: 15px; /*内容部分の周りの余白サイズ*/
text-align:center;   /*文章など内容部分を中央揃えにしている*/
background-color:white; /*背景の色*/
}

.flex {
  display: flex; /*横並び*/
}
.flex .image {
  width: 77px; /*画像サイズ指定*/
  margin: 0;
  padding: 5px;
  overflow: hidden;
  position: relative;
}
.flex .right {
  margin: 0 0 0 0px;
  padding: 0;
}
.flex .title {
  margin: 0;
  padding-left: 5px;
  font-weight: bold;
  font-size: 120%;
}
.flex .text {
  margin: 0px 0 0;
  padding: 5px;
  font-size: 90%;
}


<!-- ↓以下念のためのスマホ最適化用 -->

@media screen and (max-width: 768px) {
#wrap{
width: 100%; /*全体の幅*/ 
margin: 0 auto; /*マージンの指定をする。ブラウザ対策*/
padding: 15px;
  text-align:left;   /*全体を左揃えにする。*/
}
 }
 
 @media screen and (max-width: 480px) {

    p{
width:auto; /*全体の幅を指定する*/ 
margin: 0 auto; /*マージンの指定をする、ブラウザ対策*/
padding: 5px;
  text-align:left;   /*全体を左揃えにする。*/
     }

#wrap3{
width:auto; /*内容部分の幅*/ 
text-align:center;   /*文章など内容部分を左揃えにしている*/
}

#wrap2{
border-radius: 50px;
width:70%; /*内容部分の幅*/ 
padding: 15px; /*内容部分の周りの余白サイズ*/
text-align:center;   /*文章など内容部分を左揃えにしている*/
background-color:white; /*背景の色*/
}

#wrap{
border-radius: 10px;
width:90%; /*内容部分の幅*/ 
padding: 15px; /*内容部分の周りの余白サイズ*/
text-align:left;   /*文章など内容部分を左揃えにしている*/
background-color:white; /*背景の色*/
}

.flex {
  display: flex; /*横並び*/
}
.flex .image {
  width:auto; /*画像サイズ指定*/
  margin: auto;
  padding-right: 30px;
  overflow: hidden;
  position: relative;
}

.flex .right {
  margin: 0 0 0 0px;
  padding: 0;
}

.flex .title {
  margin:auto;
  font-weight: bold;
  font-size: 100%;
}
.flex .text {
  margin:auto;
  font-size: 90%;
}

 }