/*
   Theme Name: Hammer Child Theme Theme URI: https://www.constructionthemes.com/
   Description: Child theme for the Hammer
   Author: ProteusThemes
   Template: hammer-ct
   Version: v5.4
 */

 @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
 body * {
    word-break: break-word !important;
 }
 body {
    background-color: #ffffff;
    font-family: 'Open Sans', Meiryo, Arial, Helvetice Neue, sans-serif;
    font-size: 12px;
    font-weight: 300;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
     text-align: unset !important;
     margin: 0 !important;
     line-height: 1.67;
}
/*body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}*/
/* Start Header Section */
.home .site-header { margin-bottom: 0; }
.container {
     max-width: 1200px !important;
     padding-left: 0;
     padding-right: 0;
}
header{
    background: #fff;
    padding:13px 0;
    border-bottom: 2px solid #cccccc;
    margin-bottom: 20px;
}
.header-logo{
    width: 25%;
    float: left;
    margin: 12px 0;
}
.header-logo .logo-sp{
    display: none;
}
.header-right{
    width: 75%;
    float: left;
    text-align: right;
}

.header-right .top-menu{
    margin: 0;
    padding: 0;
    display: inline-block;
    margin-top: 40px;
}
.header-right .top-menu li{
    display: inline-block;
    margin-left: -4px;
}
.header-right .top-menu li:first-child{
    margin-right: 4px;
}
.header-right .top-menu li:last-child{
    margin-right: 0;
}
.header-right .top-menu li a {
    color: #777777;
    padding: 10px 20px;
    line-height: 20px;
    font-size 12px;
}
.header-right .top-menu > .active > a, .header-right .top-menu > .active > a:hover, .header-right .top-menu > .active > a:focus {
    background-color: #e94a77;
    color: #fff;
    text-decoration: none;
}
.header-right .top-menu > li > a:hover, .header-right .top-menu > li > a:focus {
    background-color: #f68712;
    color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-decoration: none;
}

header .top-menu  {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }
  
  /* menu icon */
  
header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 22px 15px;
    position: relative;
    user-select: none;
    background-color: #dddddd;
    color: #ccc;
  }
  
header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
    background: #909090;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
header .menu-icon .navicon:before {
    top: 5px;
  }
  
header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
header .menu-btn {
    display: none;
  }
  
header .menu-btn:checked ~ .top-menu  {
    max-height: 240px;
  }
  
  
  

footer{
    border-top: 2px solid #cccccc;
    margin-top: 20px;
    background: #fff;
    text-align: center;
    color:#fff;
}
footer {
    margin-top: auto;
    color: #333333;
}
footer .footer-links{   margin-top: 20px;
    margin-bottom: 20px;
}
footer .footer-links ul{
    margin: 0;
    padding: 0;
}
footer .footer-links li{
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
footer .footer-links li:first-child{
    padding-left: 0;
}
footer .footer-links li:last-child{
    padding-right: 0;
}
footer .footer-links li a{
    color: #428bca;
    font-size: 12px;
    font-weight: 300;
    line-height 17.1429px;
}
footer .copyright{
    color: #333333;
    font-size: 14px;
    margin-bottom: 30px;
}
.sp{
    display: none;
}

@media (max-width:780px){
    .container{
        padding: 0 10px;
    }
    .sp, .header-logo .logo-sp{
        display: block;
    }
    .pc, .logo-pc{
        display: none;
    }
    .header-right .social{
        display: none;
    }
    .menu-icon{
        position: absolute !important;
        right: 10px;
        top: 20px;
    }
    .header-logo{
        margin: 0;
    }
    .header-logo,.header-right{
        width: 100%;
    }
    .header-right .top-menu{
        margin-top: 0px;
        overflow: hidden;
        width: 100%;
    }
    .top-menu li, .top-menu li a{
        width: 100%;
        display: block;
        text-align: left;
    }
}
@media (max-width:602px){
    footer .footer-links li{
        margin-bottom: 18px;
    }
}
@media (max-width:1200px){
    .container{
        padding: 0 10px;
    }
}

@media (min-width: 820px) {
    header li {
      float: left;
    }
    header li a {
      padding: 20px 30px;
    }
    header .top-menu  {
      clear: none;
      float: right;
      max-height: none;
    }
    header .menu-icon {
      display: none;
    }
  }
  div#container {
    max-width: 1200px;
}
 


  table {
    border: 1px solid #ccc;
    width: 100%;
    margin:10px 0px;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
  }

  table tr {
    border: 1px solid #ddd;
    padding: 5px;
  }
  
  tr:hover {
	background-color:#eff9fe;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
  }
  
  
  
   table th, table td {
    padding: 10px;
    text-align: left;
    border:1px solid #ccc
  }

  table th {
    background-color:#e94a77;
    color:#fff;
    font-size: 12px;
    letter-spacing: 1px;
  }

  @media screen and (max-width: 600px) {

.howto_image{
	width: 100%;
	margin:auto;
}

.step_h2{
	padding:5px 0px;
	margin:10px 0px;
	text-align: left;
	}


    table {
      border: 0;
    }

    table thead {

    }

    table tr {
      margin-bottom: 10px;

      border-bottom: 2px solid #ddd;
    }



    table td {
      text-align: left;
      font-size: 13px;
      border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
      border-bottom: 0;
    }
  }

.myButton {
	background-color:#e94a77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:12px;
	padding:3px 3px;
	text-decoration:none;
}

.myButton:hover {
	background-color:#eb675e;
	text-decoration:none;
}
.myButton:active {
	position:relative;
	top:1px;
	text-decoration:none;
}