/* style.css */

main {
  background-color: #ffffff;
  padding-top: 110px;
  text-align: center;
}
@media screen and (min-width: 520px) {
main {
  background-color: #ffffff;
  padding-top: 40px;
  text-align: center;
}
}
@media screen and (min-width: 850px) {
main {
  background-color: #ffffff;
  padding-top: 70px;
  text-align: center;
}
}

iframe {
  border:none;
  width: 320px;
  height: 5000px;
}
@media screen and (min-width: 520px) {
iframe {
  border:none;
  width: 520px;
  height: 5000px;
}
}
@media screen and (min-width: 850px) {
iframe {
  border:none;
  width: 850px;
  height: 5000px;
}
}
main.page-about iframe {
  height: 640px; /* スマホ */
}
@media screen and (min-width: 520px) {
  main.page-about iframe {
    height: 450px; /* タブレット */
  }
}
@media screen and (min-width: 850px) {
  main.page-about iframe {
    height: 350px; /* PC */
  }
}
body{
   background:#ffffff;
   color: #a9a9a9;
   font-weight:normal;
   text-decoration: none;
   font-family: '游ゴシック', YuGothic, 'Yu Gothic', 'Meiryo', 'ヒラギノ角ゴ', sans-serif;
  }
.after-main-image {
  text-align: center;  
}

img.face {
  width: 60%;
  height: auto;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 520px) {
img.face {
  width: 40%;
  height: auto;
  margin-top: 35px;
  margin-bottom: 25px;
  margin-right: auto;
  margin-left: auto;
}
}
@media screen and (min-width: 850px) {
img.face {
  width: 25%;
  height: auto;
  margin-top: 50px;
  margin-bottom: 25px;
  margin-right: auto;
  margin-left: auto;
}
}


nav{
    background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    height:110px;
    width:100%;
    margin:0 auto;
    position:fixed;
  }
@media screen and (min-width: 520px) {
nav{
    background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
    display:flex;
    justify-content:center;
    align-items:center;
    height:60px;
    width:100%;
    margin:0 auto;
}
}
@media screen and (min-width: 850px) {
nav{
    background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0));
    display:flex;
    justify-content:center;
    align-items:center;
    height:80px;
    width:100%;
    margin:0 auto;
}
}

.menu{
font-size:18px
}
@media screen and (min-width: 520px) {
.menu{
font-size:19px
}
}
@media screen and (min-width: 850px) {
.menu{
font-size:16px
}
}

.menu {
   padding:1em 1px;
   margin:0 5px;
   text-decoration:none;
   letter-spacing:.1em;
   color: #a9a9a9;
   font-weight:normal;
   text-decoration: none;
   font-family: '游ゴシック', YuGothic, 'Yu Gothic', 'Meiryo', 'ヒラギノ角ゴ', sans-serif;
}
@media screen and (min-width: 520px) {
.menu {
   height:60px;
   margin-right: 20px;
   margin-top: 1px;
   text-decoration:none;
   letter-spacing:.1em;  
   color: #a9a9a9;
   font-weight:normal;
   font-family: '游ゴシック', YuGothic, 'Yu Gothic', 'Meiryo', 'ヒラギノ角ゴ', sans-serif;
}
}
@media screen and (min-width: 850px) {
.menu {
   height:70px;
   margin-right: 30px;
   margin-top: 12px;
   text-decoration:none;
   letter-spacing:.1em;  
   color: #a9a9a9;
   font-weight:normal;
   font-family: '游ゴシック', YuGothic, 'Yu Gothic', 'Meiryo', 'ヒラギノ角ゴ', sans-serif;
}
}
 .logo{
    width: 100%;
    height:20px;
    margin-top: 0;
    text-align:center;
  }
@media screen and (min-width: 520px) {
.logo{
    width:180px;
    height:auto;
    margin-top: 0;
    margin-right:auto;
    margin-left:30px;
}
}
@media screen and (min-width: 850px) {
.logo{
    width:200px;
    height:auto;
    margin-top: 0;
    margin-right:auto;
    margin-left:30px;
}
}
 .logo img{
    width:200px;
    height:auto;
  }
@media screen and (min-width: 520px) {
 .logo img{
    width:150px;
    height:auto;
  }
}
@media screen and (min-width: 850px) {
 .logo img{
    width:200px;
    height:auto;
  }
}
.sns {
width: 35px;
height: 27px;
margin-bottom: 4000px;
margin-left: 0px;
margin-right: 0px;
}
@media screen and (min-width: 520px) {
.sns {
width: 35px;
height: 27px;
margin-bottom: 4000px;
margin-left: 0px;
margin-right: 0px;
}
}
@media screen and (min-width: 850px) {
.sns {
width: 35px;
height: 27px;
margin-bottom: 4000px;
margin-left: 0px;
margin-right: 0px;
}
}

h3 {
  font-size: 16px;
  font-weight: normal;
  color: #a9a9a9;
  flex-wrap:wrap;
}
img.mail {
width: 18px;
height: 18px;
}