/*--------------------ハンバーガーメニューボタン装飾(スマホ用)--------------------*/
@media screen and (max-width: 767px) {
     
    .top-link{
      height:60px;
      margin-left:  0;
      color:#000;
      text-decoration:none;
      letter-spacing: 0.5em;
    }
         
    .menu-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #b15555;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }
    
    #menu-btn-check:checked ~ .menu-btn span {
        background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
    }
    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
    #menu-btn-check {
        display: none;
    }
    #menu-btn-check:checked ~ .menu-content {
        left: 0;/*メニューを画面内へ*/
    }
    
    /*--------------------ハンバーガーメニュー装飾(スマホ用)--------------------*/
    .menu-content {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 100%;
        z-index: 80;
        background-color: #b15555;
        transition: all 0.5s;/*アニメーション設定*/
    }
    .menu-content ul {
        padding: 70px 10px 0;
    }
    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }
    .menu-content ul li a {
        display: block;
        width: 100%;
        font-size: 12px;
        box-sizing: border-box;
        color:#ffffff;
        text-decoration: none;
        padding: 5px 0 10px 0;
        position: relative;
    }

    .menu-content ul li p {
      display: block;
      width: 100%;
      font-size: 15px;
      box-sizing: border-box;
      color:#ffffff;
      text-decoration: none;
      position: relative;
      letter-spacing: 0.4em;
      font-weight: bold;
      margin: 10px 0 0 10px;
  }

  .medical li a {
    font-size: 10px;
  }

    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px #ffffff;
        border-right: solid 2px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 20px;
        top: 11px;
    }
    
    .pc-area { 
        display: none !important
    } /*スマホ表示の時はグローバルメニュー表示*/
    
    .phone-area {
        display: block !important
    } /*スマホ表示の時はハンバーガーメニューを表示*/
    }
    
    /* ベースCSS
       ========================================================================== */
    .phone-area { 
        display: none
    } /*PC表示の時はハンバーガーメニューを消す*/
    
    .pc-area {
        display: block
    } /*PC表示の時はグローバルメニュー表示*/
    
    
    body {
       margin: 0;
       padding: 0;
       font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
    header {
       /*padding: 30px 4% 10px;*/
       top: 0;
       width: 100%;
       background-color: #fff;
       display: flex;
       align-items: center;
    }
    
      
    a{
      color:#000;
      text-decoration:none;
      letter-spacing: 0.4em;
      font-size: 12px;
    }
      
    .logo{
      width:13%;
      margin-right:auto;
      margin-left:0;
    }
    
     .logo img{
      width:100%;
      height:auto;
    }
    
    img{
       width: 100%;
       margin: 0 auto;
    }

        /* ベース(スマホ用)
       ========================================================================== */
    @media screen and (min-width: 481px) {
        img {
          max-width: 900px;
          display: block;
        }
      }

    .icon-container{
        display: flex;

      }

      .logo{
        width:25%;
        margin-right:auto;
        margin-left:0;
      }
      
       .logo img{
        width:100%;
        height:auto;
        padding: 0 10px 0 10px;
      }

    
   /* グローバルナビ (アコーディオンメニュー(PC用))
       ========================================================================== */
       .pc-nav{
        display:flex;
        justify-content:center;
        height:100px;
        width:900px;
        margin:0 auto;
        padding-top: 20px;
        z-index: 10;
      }        

       .menu {
        display: flex;
        }
        .menu > li {
        width: 35%;
        }
        
        .menu li {
        position: relative;
        list-style: none;
        }
        
        .menu li a {
        width: 200px;
        height: 20px;
        padding: 1em 1.5em;
        text-decoration: none;
        background: #fff;
        text-align: center;
        display: block;
        color: #000;
        border: 5px solid;
        border-color: #fff;
        font-family: "system-ui";
        font-weight: 500;
        }
        .menu a:hover{
        background: rgb(243, 243, 243);
        }
        
        .menu__child li {
        height: 0;
        overflow: hidden;
        transition: 0.3s;
        }
        .menu ul {
        padding: 0;
        }
        
        .menu li:hover > ul > li {
        height: 3.2rem;
        overflow: visible;
        }


/* 各事業内容ページ
========================================================================== */
/*-WEB・グラフィックデザイン-----------------------*/

/*-デザインについての説明---*/
.design-info {
  display: flex;
  justify-content: center;
  list-style: none;
  padding-top: 20px;
  margin: 20px;
  text-align: center;
}

h4 {
  width: 75%;
  margin: 0 auto;
  padding-top: 10px;
  border-bottom: dotted 4px #666666;
}

#graphic-info {
  font-size: 12px;
}

.design-info img {
  width: 85%;
}

.design-info p {
  width: 400px;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 14px;
}

.info-box {
  padding: 5px;
  display: inline-block;
  color: rgb(75, 75, 75);
  background-color: #e6e6e6;
 }

 .info-box img {
   width: 85%;
 }

/*-デザイン制作の流れ---*/
.flow {
  list-style: none;
  padding-top: 20px;
  margin: 20px;
}

#flow-title{
  width: 900px;
  margin: 0 auto;
  padding-top: 100px;
  border-bottom: 2px solid;
  font-size: 30px;
}

.flow img {
  padding-top: 15px;
  padding-bottom: 25px;
}

.flow-box {
  padding: 10px;
  width: 900px;
  margin: 0 auto;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: #a85555;
 }

 /*-過去の制作物---*/
 .design-ex {
  display: flex;
  justify-content: center;
  list-style: none;
  padding-top: 20px;
  margin: 20px;
  text-align: center;
}

.design-ex img {
  width: 85%;
  padding: 8px;
  border: 2px solid #e6e6e6;
}

 .design-ex p {
  width: 400px;
  margin: 0 auto;
  padding-top: 7px;
}

.ex-box {
  padding: 5px;
  width: 350px;
  display: inline-block;
  color: rgb(75, 75, 75);
  background-color: #e6e6e6;
 }

#ex-info {
  font-size: 10px;
  text-align: center;
  width: 300px;
  margin: 0 auto;
  padding: 5px;
}

 /*-コピーライト---*/
.copy-right {
  margin: o auto;
  text-align: center;
  font-size: 8px;
  padding-top: 50px;
  color: #666;
}
/*スムーススクロール装飾*/
#pagetop{
    position: fixed;
    right: 10%;
    bottom: 10%;
    opacity: 0;
    -ms-filter: "alpha( opacity=0 )";
    filter:alpha(opacity:0);
    zoom:1;
    z-index: 9999;
}
#pagetop a{
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 10px;
	background: #b15555;
	color: #fff;
	font-size: 24px;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
}

/*-----------------------Web・デザイン制作(スマホ用)-----------------------*/
@media screen and (max-width: 767px) {

.design-info {
   display: block;
   padding-top: 0;
   margin: 10px;
}
  
h4 {
    width: 90%;
    padding-top: 0;
}
  
.design-info img {
    width: 70%;
}
  
.design-info p {
    width: 90%;
    font-size: 12px;
}
  
#graphic-info {
    font-size: 10px;
}
  
.info-box {
    width: 90%;
}
  
     /*-デザイン制作の流れ/スマホ用---*/
  
#flow-title{
    width: 90%;
    padding-top: 20px;
    font-size: 20px;
}
.flow img {
    padding-top: 15px;
    width: 100%;
    display: block;
    margin: 0 auto;
}
  
.flow-box {
    font-size: 10px;
    width: 90%;
}
  
      /*-過去の制作物/スマホ用---*/
.design-ex {
    display: block;
    padding-top: 0;
    margin: 10px;
}
  
.design-ex img {
    width: 300px;
    border: 1px solid #e6e6e6;
    padding: 0;
}
  
.design-ex p {
    width: 90%;
    font-size: 12px;
    margin-bottom: 30px;
    padding-top: 2px;
}
    
.ex-box {
    width: 302px;
    padding: 2px 0 2px 0;
}
#ex-info {
    width: auto;
}
/*スムーススクロール装飾*/
#pagetop{
    right: 10px;
   
}

  }