* {box-sizing: border-box;}

body {margin: 0; }

header {height: 60px;
        width: 100%;
        padding: 0px 15px;
        background-color:#fdffef ;
        position: fixed;
        top: 0;
        z-index: 10;
        display: flex;}

footer{  background-color:#fdffef; padding-top: 2px; padding-bottom: 3px;}

.logo img {position: relative; top:2px; left:-12px; max-width:48%;}

nav {margin: 0 0 0 auto;}

ul {display: flex;
    list-style: none;
    padding: 0;
    margin: 0;}

.pc a {font-size: 25px;
  color: #5b4622;
  text-decoration: none;
  display: block;
  line-height: 60px;
  padding: 0 20px;
  font-family: 'Abril Fatface', cursive;
   background:url(header/orange.jpg)  repeat-y -300px 0;}

.sm {display: none;}

#main .pc img{width:100%; height: 100%; margin-top: 20px;}
#main .sp img{display: none;}

#About {background:url(About/About-haikei.jpg);
        padding-top:12px; padding-bottom:2px; margin-top: -14px;}
#About h2{font-family: 'Abril Fatface', cursive; text-align: center;
          color:#5b4622; font-size: 60px; margin-top: 35px;}
#About h3 img{width:100px; position: relative; top:-55px;}
#About dl{display:flex; justify-content:center;}
#About dt img{max-width:100%; margin-left: 40px; margin-top:45px; }
#About dd img{margin-top:-70px;}

#Skill {background:url(Skill/Skill-haikei.png); background-size:cover;
        padding-top:15px; padding-bottom:40px; margin-top: -0.2px;}
#Skill h2{font-family: 'Abril Fatface', cursive; text-align: center;
          color:#5b4622; font-size: 60px; margin-top: 35px;}
#Skill h3 img{width:100px; position: relative; top:-55px;}
#Skill h4 img{position: relative; top:-50px; left:15px;}
#Skill dl{ display: flex; flex-wrap: wrap;  margin-top: -20px; margin-bottom: -20px;
          justify-content:space-around;}
#Skill dt{margin-left: 20px;}
#Skill p img{margin-bottom: 40px;}

#Works {background:url(Works/Works-haikei.png);  background-size:cover;
        padding-top:15px; padding-bottom:30px; margin-top: -1.5px;}
#Works h2{font-family: 'Abril Fatface', cursive; text-align: center;
          color:#5b4622; font-size: 60px; margin-top: 35px;}
#Works h3 img{width:100px; position: relative; top:-55px;}
#Works .item{display:flex; flex-wrap: wrap; justify-content: center;
            margin-top: -70px;}
#Works a{padding: 20px 20px;}
#Works a:hover{opacity: 0.5;}

#modal01 .canpu p img{margin-top:30px;}
#modal01 .setsumei p img{margin-top:30px; margin-bottom:20px;}

#modal02 .md-inner h1 img{width:200px; margin-top:-15px }
#modal02 .flower-site dd img{height:600px; margin-top: 15px; margin-left: 20px;}
#modal02 .site-button p{margin-top: -300px;}
#modal02 .site-button p img{width: 230px; margin-left:195px;}
#modal02 .flower-site h1{margin-left:10px; margin-top: -10px; padding-bottom:5px;}
#modal02 .flower-site h1 img{width:200px;}


#modal03 .site-button p img{width: 230px; margin-left:257px;}
#modal03 .nasu-site h1{margin-left:10px; margin-top: -10px;}

#modal04 .site-button p img{width: 230px; margin-left:215px;}
#modal04 .momo-site h1 {margin-left:10px; margin-top: 30px;}

#modal01 .md-contents,#modal02 .md-contents,#modal03 .md-contents,#modal04 .md-contents{width: 90%; height: 90%; overflow-y:scroll;}
#modal02 dl,#modal03 dl,#modal04 dl{display: flex; justify-content:center;}
#modal02 .design-canpu,#modal03 .design-canpu,#modal04 .design-canpu {display: flex; background:url(Works/canpu-haikei.png);  background-size:cover; margin-top:35px; padding-bottom: 1.4em;}
#modal02 .design-canpu p img,#modal03 .design-canpu p img,#modal04 .design-canpu p img{max-width: 400px; margin-top:-50px; margin-left: 20px; margin-bottom: 18px;}
#modal03 .md-inner h1 img,#modal04 .md-inner h1 img {width:240px; margin-top:-15px }
#modal03 .nasu-site h1 img,#modal04 .momo-site h1 img{max-width:140px;}
#modal03 .nasu-site dd img,#modal04 .momo-site dd img{height:450px; margin-top: 15px; margin-left: 20px;}
#modal03 .site-button p,#modal04 .site-button p{margin-top: -155px;}


#modal05 .md-contents,#modal06 .md-contents,#modal07 .md-contents,#modal08 .md-contents{height: 90%; overflow-y:scroll;}
#modal05 .md-inner h1,#modal06 .md-inner h1,#modal07 .md-inner h1,#modal08 .md-inner h1{margin-top:-20px; }
#modal05 .item5-text p img, #modal06 .item6-text p img,#modal07 .item7-text p img{width: 75%;  margin-top:20px; margin-bottom: 40px; margin-left: 155px;}
#modal08 .item8-text p img{width: 75%; margin-top:22px; margin-left: 155px; margin-bottom:5px;}

#modal09 .md-contents{width: 55%; height: 90%; overflow-y:scroll;}
#modal09 .md-inner iframe{ margin-top: 70px; margin-bottom:-10px}

#Contact {background:url(Contact/haikei-contact.png); background-size:cover;
        padding-top:15px; padding-bottom:20px; margin-top: -0.2px;}
#Contact h2{font-family: 'Abril Fatface', cursive; text-align: center;
          color:#5b4622; font-size: 60px; margin-top: 35px;}
#Contact h3 img{width:100px; position: relative; top:-55px;}
#Contact h4 img{position: relative; top:-50px; left:15px;}
#Contact h5 {text-align: center;}
#Contact h5 img{width:250px; position: relative; margin-top:-40px; margin-bottom: 30px;}

#footer p{ height: 5px; margin-top:-15px; padding-bottom:15px;}


  /**********************************　
  以下、モーダルウインドウの設定　
  ************************************/



  .md-overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7;
    z-index: 9999;
  }

  .md-contents{
    display:none;
    position: fixed;
    top: 40px;
    left: 50%;
    width: 80%;

    transform: translateZ(0);
    transform: translateX(-50%);
    z-index: 10000;
  }


  .md-inner{
    padding: 24px 40px;
    background-image:url(About/About-haikei.jpg);}

  .md-inner .site-button p img
  {background-color: #f4becd; padding: 15px 75px 12px 75px; border-radius: 10px; box-shadow: 1px 1px 5px 1px #595757;}

  .md-xmark{
    position: absolute;
    top: 34px;
    right: 20px;
    width: 25px;
    height: 22px;
    z-index: 9999;
    cursor: pointer;
  }



  .md-xmark span {
    height: auto;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
    border-radius: 4px;
  }


  .md-xmark span:nth-of-type(1) {
    top: 0;
    transform: translateY(23px) rotate(-45deg);
  }


  .md-xmark span:nth-of-type(2) {
    bottom: 0;
    transform: translateY(-14px) rotate(45deg);
  }

  #modal09 .md-xmark span:nth-of-type(1) {
    top: 0;
    transform: translateY(20px) rotate(-45deg);
  }


  #modal09 .md-xmark span:nth-of-type(2) {
    bottom: 0;
    transform: translateY(0px) rotate(45deg);
  }

  /**********************************　
  以下、ハンバーガーメニューの設定　
  ************************************/

  @media (max-width:747px) {
   .pc {display: none;}

    #hamburger {
      background-color: transparent;
      position: relative;
      cursor: pointer;
      margin: 0 0 0 auto;
      height: 60px;
      width: 60px;}

    .icon span {
      position: absolute;
      left: 15px;
      width: 30px;
      height: 4px;
      background-color: #5b4622;
      border-radius: 8px;
      transition: ease 0.75s;}

    .icon span:nth-of-type(1) {top: 16px;}
    .icon span:nth-of-type(2) {top: 28px;}
    .icon span:nth-of-type(3) {bottom: 16px;}

    .close span:nth-of-type(1) {transform: rotate(45deg); top: 28px;}
    .close span:nth-of-type(2) {opacity: 0;}
    .close span:nth-of-type(3) {transform: rotate(-45deg); top: 28px;}

    .sm {padding-bottom:30px;
        top: 60px;
        left:0px;
        text-align: center;
        position: absolute;
        z-index: 10;
        width: 100%;
        background-color:#fdffef;}

    ul {flex-direction: column;}

     .sm a {font-size: 25px;
       text-align: center;
    color: #5b4622;
     text-decoration: none;
     display: block;
     line-height: 60px;
     padding: 0 20px;
     font-family: 'Abril Fatface', cursive;
     background:url(header/orange2.png)  repeat-y -400px 0;}




    #main .pc img{display: none;}
    #main .sp img{display: block; width: 100%;
      height:260px; margin-top: 55px;}



    #About {margin-top:-1px;}
    #About h2{ font-size: 35px; margin-top:25px;}
    #About h3 img{width:70px; margin-top:20px;}
    #About dl{display:block;}
    #About dt img{width:75%; margin-top:-60px;  margin-left: 50px;}
    #About dd img{margin-top:8px; margin-left:-18px; width:100%;}

    #Skill h2{ font-size: 35px; margin-top:25px;}
    #Skill h3 img{width:70px; margin-top:20px;}
    #Skill h4 img{width:280px; margin-top:-20px; margin-left: -15px;}
    #Skill dl{display: block; margin-top: -60px;}

    #Skill dt img{max-width:83%; margin-left:30px;}
    #Skill dd img{max-width:90%; margin-left:10px;}
    #Works h2{ font-size: 35px; margin-top:25px;}
    #Works h3 img{width:70px; margin-top:20px;}

    #Works .item{flex-direction:column; flex-wrap: wrap;  margin-top: -85px;
                 text-align: center;}
    #Works .item img{width:95%; }

    #modal01 .md-inner h1 img{width:70%;}
    #modal01 .image p img{margin-top:-5px; width:100%;}
    #modal01 .canpu p img{margin-top:5px; width:95%;}
    #modal01 .setsumei p img{margin-top:5px; width:95%;}


    #modal02 .md-inner h1 img{width:40%;}
    #modal02 .flower-site h1 img{width:150px;}
    #modal02 .site-button p img{width: 50vw;  margin-left:10px; margin-top:14.5em;}
    #modal02 .design-canpu img{width:95%;  padding-right: 25px; padding-top: 15px;}

    #modal03 .site-button p img{width: 50vw;  margin-left:10px; margin-top:5.5em;}

    #modal04 .site-button p img{width:50vw; margin-left:10px; margin-top:125px;}

    #modal02 dl,#modal03 dl,#modal04 dl{display:block; text-align: center;}
    #modal02 .flower-site dt img,#modal03 .nasu-site dt img,#modal04 .momo-site dt img{width: 95%; margin-top: -25px;}
    #modal02 .flower-site dd img,#modal03 .nasu-site dd img,#modal04 .momo-site dd img{width:80vw; height:30%; margin-left:-60px; margin-top: -5px;}
    #modal02 .flower-site h1,#modal03 .nasu-site h1,#modal04 .momo-site h1{text-align: left; margin-top: -10px;}
    #modal02 .design-canpu,#modal03 .design-canpu,#modal04 .design-canpu {width:100%;  display:block; margin-bottom:5px; }
    #modal03 .design-canpu img,#modal04 .design-canpu img{ width:95%;  padding-right: 25px; padding-top: 25px;}
    #modal03 .md-inner h1 img,#modal04 .md-inner h1 img{width:80%;}
    #modal03 .nasu-site h1 img,#modal04 .momo-site h1 img{max-width:100px; }


    #modal05 .md-contents,#modal06 .md-contents,#modal07 .md-contents,#modal08 .md-contents{width: 90%; top:50px; height: 78%;}
    #modal05 .md-inner h1 img,#modal06 .md-inner h1 img{  text-align:center;}
    #modal07 .md-inner h1 img,#modal08 .md-inner h1 img{text-align:center; margin-top: -3em; width: 70%;}
    #modal05 .md-inner p,#modal06 .md-inner p,#modal07 .md-inner p,#modal08 .md-inner p{margin-top: -20px;}
    #modal05 .item5-text p img,#modal06 .item6-text p img,#modal07 .item7-text p img{width: 100%;   margin-top:7px; margin-left: 5px; margin-bottom: 25px}
    #modal08 .item8-text p img{width: 100%;   margin-top:7px; margin-left: 5px; margin-bottom: 3px}

    #modal09 .md-contents{width: 90%;}
    #modal09 .md-inner iframe{width:120%; height: 830px; margin-left:-30px; margin-top:50px;}


    #Contact h2{ font-size: 35px; margin-top:25px;}
    #Contact h3 img{width:70px; margin-top:20px;}
    #Contact h4 img{width:280px; margin-top:-20px; margin-left: -15px;}
    #Contact h5 img{width:180px; margin-top:-50px}

      #footer p img{width: 95%; margin-top:5px;}}