@charset "utf-8";

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}

/* pcレイアウト */

/* 共通調整 */
.for-pc { display:block; }
.for-sp { display:none; }

@media only screen and (max-width : 520px){
  .for-pc { display:none; }
  .for-sp { display:block; }
}
.wrapper {
    max-width: 1080px;
    margin: 0 auto 130px auto;
    font-size: 0.9rem;
    padding: 0 4%;
  }
h1.site-title a{
  width: 200px;
  height:150px;

}
  .site-title a {
    display: block;
  }
  .sec-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 65px;
  }
  h2.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.75rem;
    margin-bottom: 60px;
    text-align: center;
    font-family: 'BIZ UDPMincho', serif;
  }
  h2.section-title::before,
  h2.section-title::after {
    border-top: 1px solid;
    content: "";
    width: 28%;
  }
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
	opacity: 0;
}
/* PCレイアウトのみ適応 */
@media screen and (min-width: 1020px) {
article.box{
/* ここから外枠レイアウト仕様 */
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
margin: 50px auto;
padding: 20px;
}
article.box:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 15px 15px rgba(0, 0, 0, 0.15);
}
}
/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;

}


@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
  /*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
  /*fixedで全面に固定*/
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background:#ccc;
text-align:center;
color:#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
position: absolute;
top: 50%;
left: 50%;
  z-index: 999;
width: 100%;
transform: translate(-50%, -50%);
color: #fff;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
  height: 2px;
}

/* ここからヘッダー部分 */
#header {
    max-width: 1920px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    margin: 0 auto;
    padding: 120px;
    position: relative;

  }
  h1.site-title{
      position: absolute;
      top: 70px;
  }
  #header ul {
    display: flex;
    padding: 20px ;
    position: absolute;
    right: 110px;
    bottom: 10px;

  }


  #header li {
    font-size: 16px;
    margin: 15px;
  }
  #header li a {
    color: #24292e;
    font-family: 'BIZ UDPGothic', sans-serif;
  }
  #header li a,.sns-nav img.icon:hover {
    opacity: 0.7;
  }
  .sns-nav{
      position: absolute;
      top: 100px;
      right: 145px;
  }
  .sns-nav img.icon {
    width: 25px;
  }
  /* ナビゲーション部分 */
  .header-nav {
    height: 20px;
    padding: 0;
  }
  .header-nav ul {
    /* flexboxでナビゲーションバーを横並び配置する */
    display: flex;
    /* 縦幅中央に配置する指定 */
    align-items: center;
    /* 横幅中央に配置する指定 */
    justify-content: center;
    width: 100%;
    /* リストスタイルを削除 */
    list-style: none;
  }
  .header-nav ul li {
    /* ナビゲーションメニュー同士の間隔を指定 */
    margin-left: 5%;
    margin-right: 5%;
  }
  .nav-item a {
    color: #000;
    font-size: 1.4rem;
    font-weight: 400;
    text-decoration: none;
    /* アニメーション速度を指定 */
    transition: 0.2s ease-out;
  }
  .nav-item a:hover {
    /* hover後に下線が現れる指定 */
    border-bottom: 2px solid #333333;
  }
  @media (max-width:520px) {
     li.nav-item {
      text-align: center;
    }
  }
  
  /* SPのみハンガーガーメニュー */
  @media (max-width:520px){
  /*
  ハンバーガ―メニュー
  初期状態は「display: none;」で非表示にしておく
  所定のスクロール位置にきたらjQueryのfadeInで表示する
  ※main.jsの「ロゴ、ハンバーガーメニューの表示」を参照
  */
  .hamburger {
    width: 42px;
    height: 42px;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 25px;
    /* 一番上にくるように設定 */
    z-index: 400;
    display: none;
  }
  .hamburger span {
    width: 30px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    left: 6px;
    transition: 0.5s ease-in-out;
  }
  .hamburger span:nth-child(1) {
    top: 11px;
  }
  .hamburger span:nth-child(2) {
    top: 21px;
  }
  .hamburger span:nth-child(3) {
    top: 31px;
  }
  .hamburger.active span:nth-child(1) {
    top: 21px;
    left: 6px;
    transform: rotate(-45deg);
  }
  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 21px;
    transform: rotate(45deg);
  }

  #navi {
    width: 100%;
    background-color: #fff;
    color: #050507;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    transform: translateY(-100%);
    transition: 0.6s;
    /* ロゴ、ハンバーガーより下でAccessページの背景画像よりも上にくるよう設定 */
    z-index: 30;
  }
  #navi ul {
    width: 100%;
    background-color: #050507;
    padding: 80px 0 30px 0;
  }
  #navi ul li {
    padding: 10px 0;
  }
  #navi ul li a {
    display: block;
  }
  /*
  メニュー表示
  ハンバーガーメニューがクリックされた際に、jQueryで#naviにactiveクラスを追加して、
  メニューを上から下にスライドさせて表示する
  */
  #navi.active {
    transform: translateY(0%);
  }

  }
  /* ヘッダーのナビ部分 */
  @media (max-width:520px){
.for-sp {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #000;
  transition: ease .4s;
  
}
.for-sp{
}
  }

@media screen and (max-width: 520px) {
  .header__nav ,.for-sp {
    position: static;
    transform: initial;
    background-color: inherit;
    height: inherit;
    display: flex;
    justify-content: end;
    width: 50%;
  }
}


@media screen and (max-width: 520px) {
  .nav__items {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
  }
}

.nav-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}



@media screen and (max-width: 520px) {
  .nav-items {
    position: inherit;
    top: 0;
    left: 0;
    transform: translate(0, 0);

  }
}
/* メイン画像レイアウト */
#mainvisual {
    margin-bottom: 80px;
    position: relative;
  }
  #mainvisual img {
    width: 100%;
    max-width: 100%;
    height: 420px;
    object-fit: cover;
  }
  #mainvisual p{
    position: absolute;
    font-size: 50px;
    left: 50%;
    top: 48%;
    color: #333;
    line-height: 1.4;
    -webkit-box-reflect: below -10px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0, 0, 0, 0.6));
    font-family: 'BIZ UDPMincho', serif;
    animation-name: fade;
    animation-duration: 9s;
    animation-iteration-count: 1;
  }

  @keyframes fade{
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  /* タブレット全体レイアウト調整 */
@media screen and (min-width:800px) {
  #header ul{
    right: -6px;
  }
  #mainvisual p {
    left: 50%;
    font-size: 40px;
  }
  p.copy-right{
   margin: 40px 70px;
  }
}
@media (max-width:520px) {
  p.copy-right{
  margin: 40px 200px;
  }
}


  /*-------------------------------------------
  ここからAbout
  -------------------------------------------*/
  #about .content {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
  }
  #about img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 30px;
  }
  #about .text>h3,h4,p{
    text-align: left;
    margin-left: 40px;
  }

  #about p.text {
    text-align: left;
    width: 60%;
    margin: 40px;
    margin-top: 15px;
  }
  #about .text>h4{
  margin-bottom: 1px;
}
  #about .text>h3{
  margin-bottom: 5px;
  font-size: 25px;
}
#about .text>p{
  font-size: 12px;
}

/* skillレイアウト */
    .pickup {
        display: flex;
        justify-content: space-between;
        margin-bottom: 60px;
      }
      .pickup article {
        width: 32%;
      }
      .pickup h3.skill-title {
        text-align: center;
        margin: 10px;
        font-size: 20px;
        font-family: 'BIZ UDPGothic', sans-serif;
      }
      .pickup p.title{
        text-align: center;
        font-family: 'BIZ UDPMincho', serif;
      margin-left: 0px;
      }
      .pickup p.icon{
          margin: 20px;
          text-align: center;
      }
      .pickup p.icon>img{
          width: 80px;

      }
      .pickup p.txt{
      font-size: 14px;
      margin: 0 auto;
      height: 180px;
      text-align: justify;
      padding: 35px;
      }
      .pickup  .detail{
          text-align: center;
          /* padding: 1px; */
          height: 24%;
      }
      .detail>a{
        color: #24292e;
      }
      @media screen and (max-width:480px) {
article{
  width: 100%;
}
h3{
  max-width: 100%;
}
.pickup.wrapper{
  width: 100%;
}
p.txt{
  width: 80%;
}
      }

/* ボタンデザイン */
.buttons-coll {
  width: 90%;
  margin: 2px auto;
  text-align: center;
}

.custom-btn {
  padding: 10px 20px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
.btn-5 {
  width: 120px;
  height:40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-5 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
}
@media (max-width:750px) {
  .custom-btn{
    margin-bottom: 50px;
  }
}
.btn-5:before,
.btn-5:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #ccc;
  transition: all 0.3s ease;
}
.btn-5:before {
  height: 50%;
  width: 2px;
}
.btn-5:after {
  width: 20%;
  height: 2px;
}
.btn-5:hover:before {
  height: 100%;
}
.btn-5:hover:after {
  width: 100%;
}
.btn-5 span:before,
.btn-5 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #ccc;
  transition: all 0.3s ease;
}
.btn-5 span:before {
  width: 2px;
  height: 50%;
}
.btn-5 span:after {
  width: 20%;
  height: 2px;
}
.btn-5 span:hover:before {
  height: 100%;
}
.btn-5 span:hover:after {
  width: 100%;
}


    /* workレイアウト */
    #works ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 50px;
      }
      #works li {
        width: 31%;
        margin-bottom: 23px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      }

      /* フィードインさせるクラス */
  .fadein {
    opacity : 1;
    transform: translateY(10px);
    transition: all 1.5s;
  }
  /* 画像ホバーした際文字列を表示 */
  .sample7 {
    width:			280px;
    height:			160px;
    overflow:		hidden;
    position:		relative;
  }
  .sample7 .caption {
    font-size:		16px;
    color:			#fff;
    text-align: 		center;
    padding-top:		70px;
  }
  .sample7 .mask {
    width:			100%;
    height:			100%;
    position:		absolute;
    top:			0;
    left:			0;
    opacity:		0;	/* 表示させない */
    background-color:	rgba(0,0,0,0.4);
    -webkit-transform:	rotateX(-180deg);
    transform:		rotateX(-180deg);
    -webkit-transition:	all 0.9s ease;
    transition:		all 0.9s ease;
  }
  .sample7:hover .mask {
    -webkit-transform:	rotateX(0deg);
    transform:		rotateX(0deg);
    opacity:		1;	/* ホバーで表示する */
  }
    /* ここからコンテント */
    .Form {
      margin-top: 80px;
      margin-left: auto;
      margin-right: auto;
      max-width: 720px;
      }

      @media screen and (max-width: 480px) {
      .Form {
      margin-top: 40px;
      }
      }
      .Form-Item {
      border-top: 1px solid #ddd;
      padding-top: 24px;
      padding-bottom: 24px;
      width: 100%;
      display: flex;
      align-items: center;
      }
      @media screen and (max-width: 480px) {
      .Form-Item {
      padding-left: 14px;
      padding-right: 14px;
      padding-top: 16px;
      padding-bottom: 16px;
      flex-wrap: wrap;
      }
      }
      .Form-Item:nth-child(5) {
      border-bottom: 1px solid #ddd;
      }
      .Form-Item-Label {
      width: 100%;
      max-width: 248px;
      letter-spacing: 0.05em;
      font-weight: bold;
      font-size: 18px;

      }
      @media screen and (max-width: 480px) {
      .Form-Item-Label {
      max-width: inherit;
      display: flex;
      align-items: center;
      font-size: 15px;
      }
      }
      .Form-Item-Label.isMsg {
      margin-top: 8px;
      margin-bottom: auto;
      }
      @media screen and (max-width: 480px) {
      .Form-Item-Label.isMsg {
      margin-top: 0;
      }
      }
      .Form-Item-Label-Required {
      border-radius: 6px;
      margin-right: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 48px;
      display: inline-block;
      text-align: center;
      background: #ccc;
      color: #fff;
      font-size: 14px;
      }
      @media screen and (max-width: 480px) {
      .Form-Item-Label-Required {
      border-radius: 4px;
      padding-top: 4px;
      padding-bottom: 4px;
      width: 32px;
      font-size: 10px;
      }
      }
      .Form-Item-Input {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 48px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
      }
      @media screen and (max-width: 480px) {
      .Form-Item-Input {
      margin-left: 0;
      margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
      }
      }
      .Form-Item-Textarea {
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-left: 40px;
      padding-left: 1em;
      padding-right: 1em;
      height: 216px;
      flex: 1;
      width: 100%;
      max-width: 410px;
      background: #eaedf2;
      font-size: 18px;
      }
      @media screen and (max-width: 480px) {
      .Form-Item-Textarea {
      margin-top: 18px;
      margin-left: 0;
      height: 200px;
      flex: inherit;
      font-size: 15px;
      }
      }
      .Form-Btn {
      border-radius: 6px;
      margin-top: 32px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 20px;
      padding-bottom: 20px;
      width: 280px;
      display: block;
      letter-spacing: 0.05em;
      background: #333;
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      }
      @media screen and (max-width: 480px) {
      .Form-Btn {
      margin-top: 24px;
      padding-top: 8px;
      padding-bottom: 8px;
      width: 160px;
      font-size: 16px;
      }
      }
      html{
        scroll-behavior: smooth;

    }
    .gotop{
        display: block;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        background: #FFF;
        border: 1px solid #999;
        padding-top: 30px;
        text-align: center;
        letter-spacing: -1px;
        font-size: 85%;
        text-decoration: none;
        color: #333;
        opacity: 0.5;
        position: fixed;
        bottom: 100px;
        right: 20px;
        z-index: 10000;
    }
    .gotop::before{
        content: "";
        display: block;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        width: 25%;
        height: 25%;
        top: 25%;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
        transform: rotate(-45deg);
    }
    .gotop:hover{
        opacity: 1;
    }
    @media(max-width:750px){
        .gotop{
            width: 40px;
            height: 40px;
            text-indent: -9999px;
            opacity: 1;
            border: none;
            background: none;
            bottom: 10px;
            right: 10px;
        }
        .gotop::before{
            bottom: 0;
        }
    }
    /* ここからフッターレイアウト */
    #footer {
        height: 200px;
        position: relative;

      }

      #footer .logo {
        text-align: center;
        padding: 20px 0;
        border-top: 1px solid #111;
      }
      #footer .logo a {
        display: inline-block;
      }

      #footer .logo img {
        width: 80px;
      }
      #footer .footer-nav{
      display: flex;
      position: absolute;
      left: 38%;
      top: 66%;
      }
      #footer li{
        padding-left: 6px;
      }
      @media (max-width:1000px) {
        #footer .footer-nav{
          display: flex;
      position: absolute;
      left: 15%;
      top: 56%;
        }
      }
    @media (max-width:520px) {
      #footer .footer-nav{
        left: 170px;
      }
    }
      #footer .footer-nav a {
        display: block;
        padding: 0 10px;
        color: #111;
        font-family: 'BIZ UDPGothic', sans-serif;
        font-size: 16px;
      }
      @media  (max-width:520px) {
        #footer .footer-nav a{
          font-size: 12px;
        }
      }
      p.copy-right{
        color: #111;
        font-family: 'BIZ UDPGothic', sans-serif;
        position: absolute;
        right: 40px;
        top: 130px;
    }


/* ここからSP */

@media screen and (max-width: 600px) {
  .wrapper {
    margin-bottom: 70px;
  }
  .site-title {
    margin-top: 1px;
  }
  .section-title {
    margin-bottom: 40px;
  }

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    max-width: 100%;
    height: auto;
    flex-direction: column;
    position: relative;
  }

  #header ul{
  margin-right: -109px;
  }
  #header li {
    font-size: 2px;
    margin-right: -1px;
  }
  #header a{
    font-size: .8rem;
  }
  #header li:first-child {
    margin-left: 0;
  }
  .sns-nav{
  position: absolute;
  top: 100px;
  right: 20px;
  }
/* main-visual */
  #mainvisual img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}
#mainvisual p{
  font-size: 23px;
  left: 16%;
  top: 55%;
}
/* about */
#about>.content{
  display: block;
  flex-direction: column;
}
#about .photo-box{
  margin: 7px 70px 1px;
}
#about .text{
  margin: 0 auto;
}
#about .text>h3,h4,p{
  text-align: center;
  margin-right: 40px;
}
#about .text>p.text{
  margin: 0 auto;
}
/* skill */
.pickup{
  display: block;
  flex-direction: column;

}
.pickup.wrapper{
  max-width: 100%;
}
.pickup p.txt{
  width: 300px;
  margin-left: -100px;
  margin-bottom: 20px;
height: 130px;
}

section#skill {
display: block;
flex-direction: column;
}
article{
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.pickup h3.skill-title{
  /* width: 100%;
   */
  font-size: 15px;
  font-weight: bold;
}
.pickup p.title{
  font-size: 12px;
}
p.title{
  width: 100%;
margin-left: 0.5px;
}
.icon-box{
  width: 100%;
}
p.txt{
  padding: 6px;
  text-align: left;
  width: 31%;
  margin: 1%;
}

.detail>a{
  font-size: 12px;
}
.box-wrapper{
  width: 100%;
}

  /*-------------------------------------------
  Works
  -------------------------------------------*/

  #works ul {
    display: block;
    flex-direction: column;
  }
  #works li {
    width: 100%;
    display: block;
    flex-direction: column;
  }

  /* ここからspフッター */
#footer{
  height: 200px;

}
ul.footer-nav{
  display: block;
  margin-left: -160px;

}
ul.footer-nav a{
  font-size: 10px;
  text-align: center;
}
p.copy-right{
  margin: 40px 55px;
  text-align: center;
}
}

/* ここからサンキューページ */
#thanks h1,p{
text-align: center;
}

.thanks-btn{
  text-align: center;
  margin-top: 5%;
}
.thanks-btn>a{
  padding: 10px;
}
/*その他と主な共通部分は省略*/

a.btn-radius-solid {
  font-size: 1rem;
  color: #000;
  border: 1px solid #ccc;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(top, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);
  -webkit-box-shadow: inset 1px 1px 1px #fff;
  box-shadow: inset 1px 1px 1px #fff;
}

a.btn-radius-solid:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#fdfbfb), to(#ebedee));
  background: -webkit-linear-gradient(bottom, #fdfbfb 0%, #ebedee 100%);
  background: linear-gradient(to top, #fdfbfb 0%, #ebedee 100%);
}