@charset "utf-8";

  body {
    margin: 0;
    padding: 0;
    background-color: #cccccc;
    color: #333333;
    font-size: 15px;
    line-height: 2;
  }

  p,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
  }



  img {
    vertical-align: bottom;
  }


  ui {
    margin: 0;
    padding: 0;
     }

   a {
         color: #006400;
        text-decoration: none;
     }

    a:visited {
        color: #788d98;
     }

   a:hover {
        text-decoration: underline;
     }

    header {
      width: 960px;
     height: 100px;
    matgin: 0 auto;
    }
   
    .logo {
       float: left;
    margin-top: 50px; 
     }

 footer {
     text-align: center ;
     color: #ffffff;
     padding: 20px 0;
     background-color: #767671;
    }

   footre smoll {
    font-size: 12px;
    }
  

  .global-nav {     
       float: right;
     margin-top: 60px;
      background-color: #ee82ee;
    color: #ffffff;
    font-size: 20px;
     font-family:  'Bitter', serif;
    width: 185px;
   display: block;
   text-align: center;
    margin-top: 20px;
     }

    .global-nav li {     
       float: left;
     margin: 0 20px;
     font-size: 20px;
     list-style: none;
     font-family: 'Bitter', serif;
    
     }

    .content {
      width: 960px;
      margin: 0 auto;
     }

 

 
   #index h1 {
    font-size: 100px;
    line-height: 1;
    color: #000080;
    font-family:  'Bitter', serif;
    margin-bottom: 50px;
    border: none;
    }

   #index .content {
    margin-top: 150px;
    }

   #index p {
     font-size: 16px;
      color: #ffffff;
     }

  
   #index footer {
    width: 960px;
    margin: 150px auto 0 auto;
    text-align: left;
    background-color: transparent;
     }

   #index {
    background-image:url(../images/haikei01.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;

      }

   .btn a {
    background-color: #009cd3;
    color: #ffffff;
    font-size: 20px;
     font-family:  'Bitter', serif;
    width: 185px;
   display: block;
   text-align: center;
   line-height: 50px;
    margin-top: 20px;
   border-radius: 5px;
  border:3px solid #009cd3; 
  }

   .btn a:hover {
     text-decolation: none;
      background-color: #ffffff;
      color: #009cd3;
        }

   #about {
    background-image:url(../images/haikei01.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
      } 

    #wrap {
      clear: both;
      background-color: #ffffff;
      margin-top: 220px;
      padding: 35px 0;
       }

    .main-center {
      width: 940px;
      margin: 0 auto;
     }

    h1 {
     font-family: 'Bitter', serif;
     font-size: 36px;
     border-bottom: 1px solid #cccccc; 
       }

     h2 {
     font-family: 'Bitter', serif;
     font-size: 24px;
       }

    .icon:before {
      content: "";
      padding-right: 10px;
      border-left: 7px solid #9cb4a4;
       }

    #about .profile-txt span {
      font-weight: bold;
      }
   
    #about .profile-image {
      float: right;
      }

    .clearfix:after {
      content:"";
      display: block;
      clear: both;
     }

    section {
       margin-bottom: 35px;
     }

   #about .career th {
      width: 240px;
      background-color: #f0f0f0;  
      padding:12px 0; 
      border: 1px solid #cccccc;  
      }

   #about .career td {
      width: 660px;
      padding:12px 40px; 
      border: 1px solid #cccccc;  
      }

    table {
      border-spacing: 0;
      border-collapse: collapse;
       }
     
   #index #wrap {
      background-color: transparent;
      margin-top: 0;
      padding: 0;
       }

    #portfolio {
    background-image: url(../images/haikei01.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
      } 

    .main {
      width: 700px ;
      padding-bottom: 10px;
      margin: 0 10px;
       float: left;
     }    
       
     #portfolio p{
    font-size: 16px;
        }

      a img:hover {
        opacity: 0.8;
       }

     .sidebar {
      width: 200px;
      margin: 0 10px 0 30px;   
      float: right;
      font-family: 'Bitter', serif;
      }

    .sidebar h2 {
       margin-bottom: 10px;
       }

    .sidebar ul {
       font-size: 16px;
       margin-left: 20px;
        }

    .sidebar ul a {
       color: #333333;
       }

      
   #photograph {
    background-image:url(../images/haikei.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
      }  

   #photograph .photograph-list li {
       float: left;
       list-style: none;
        margin: 0 20px 15px 0;
       }
 
   #contact {
    background-image:url(../images/haikei01.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
      } 

   #contact .access table {
     float: left;
     }

   #contact .access th,
   #contact .access td, {
     text-align:left;
     vertical-align:top;
     line-height: 2.5;
     }

   #contact .access td, {
     padding-left: 30px;
     }

   #contact .access iframe {
     width: 460px;
     froat: right;
     }

   #contact .form {   
      background-color: #eaeaea;  
     padding: 30px 50px;
     }

   #contact .form dl dt{   
     width: 165px;
     padding: 10px 0;
     float: left;
     clear: both;     
     }

   #contact .form dl dd{   
     padding: 10px 0;
     }

   #contact .form .email{   
      width: 300px;
     height: 30px;
     }

   #contact .form .tel{   
      width: 240px;
     height: 30px;
      }

   #contact .form .message{   
      width: 660px;
     height: 150px;
      }


   #contact .form button {
      background-color: #009cd3;  
     color: #ffffff;
     font-size: 20px;
     width: 185px;
   display: block;
   text-align: center;
   line-height: 50px;
   border-radius: 5px;
  border:3px solid #009cd3; 
       margin-left: 165px;
  }

   #contact .form button:hover {
      background-color: #ffffff;
      color: #009cd3;
      cursor: pointer;
        }


   #contact .form .required:after{
     content:" * ";
     color: #ff0000;
　　　　｝

   #contact .form .attention {
       margin: 20px 0 0 165px;
  }   


     #links {
    background-image:url(../images/haikei01.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% auto;
    }



    @media screen and (max-width:600px){
      /* 画面サイズが600px以下の場合に適用 */ 
           
       
  body { 
       font-size: 3.5vw;
       }

    h1 { 
       font-size: 7.2vw;
       }     

    h2 {
       font-size: 6vw;
       }     


    header {
      width: auto;
      margin: 0 5%;
    }

    .logo {
       float: none;
       margin-top: 60px;
       text-align: center:
     }

    .global-nav {     
       float: none;
       margin-top: 40px;
       text-align: center;
     }


    .global-nav li {     
     display: inline;
     float: none;
     margin: 0 8px;    
     }

    #wrap {
      margin-top: 40px;
      padding: 35px 0 0;
       }

  .content {
      width: 100% ;
     }

  .main {
      float: none;
      width: auto ;
      margin: 0 5%;
    }

   h2 img {
     max-width: 100%;
    }

    .sidebar {
      width: auto;
      float: none;
      margin: 0;
      padding: 30px 10% 10px;
      background-color: #f7f6f4;
      }

    }