@charset "UTF-8";
@import url('https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css');
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP|Poppins');


/* -----------------------------------------------
* reset
* ----------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, tr, th, td {
margin: 0;padding: 0;
border: 0;outline: 0;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
}

ol, ul {list-style: none;}

img{vertical-align:bottom;max-width: 100%;height: auto;}

.pc_only{display:block;}
.sp_only{display:none;}

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

input, select, textarea{
width:100%;
box-sizing: border-box;
border: 1px solid #ccc;
padding: 5px;
border-radius: 4px;
}

input[type="submit"],
input[type="text"]{
-webkit-apperance: none;
 -moz-apperance: none;
    apperance: none;
    font-size:15px;
}


/*
* Global styles
// ================================= */

.text-center{
  text-align: center;
}

hr {
  height: 1px;
  width: 100%;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 20px;
  background: #000;
}



/* -----------------------------------------------
* font_size
* ----------------------------------------------- */

body {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	line-height: 1.7;
	color:#222;
	font-size:15px;
	letter-spacing: 0.1em;
}

/* tables*/

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.bg_blue{background-color:#00BAFF;}
.bg_grey{background-color:#F5F5F5;}

.text_navy{color:#344354;}
.text_blue{color:#00BAFF;}

/*form*/



input:-webkit-input-placeholder {color:#CCC;}
input:-ms-input-placeholder {color:#CCC;}
input:-ms-input-placeholder {color:#CCC;}
input::placeholder{color:#CCC;}

.dropdown::-webkit-input-placeholder {color: #CCC;}
.dropdown:-ms-input-placeholder {color: #CCC;}
.dropdown::-ms-input-placeholder {color: #CCC;}
.dropdown::placeholder {color: #CCC;}

/* -----------------------------------------------
* font_size
* ----------------------------------------------- */

.bold{font-weight:bold;}
.mincho{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hirgino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;}

/* ==================
align
================== */

.text_left{text-align:left;}
.text_right{text-align:right;}
.text_center{text-align:center;}

.text_white{color:#FFF;}

/* ==================
flot
================== */

.flot_left {float:left;}
.flot_right{float:right;}

.flexbox {
	display:-webkit-box;/*--- ndroidブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- sfri（PC）用 ---*/
	display:flex;
	-webkit-box-align:stretch;/*--- ndroidブラウザ用 ---*/
	-ms-flex-align:stretch;/*--- IE10 ---*/
	-webkit-align-items:stretch;/*--- sfri（PC）用 ---*/
	align-items:stretch;
	justify-content: space-between;
}

.clear {clear:both;}




.container{
	width:1200px;
	margin:0 auto;
}

/* footer */

footer{
background: #fff;
font-size: 13px;
text-align: center;
padding-top: 50px;
padding-bottom:20px;
border-top:#F3f3f3 1px solid;
}

footer .container{
	display:flex;
	    justify-content: space-between;
        padding:0 20px;
        width:1120px;
}


footer .container:before,
footer .container:after{
content:none;
}

footer .container h1{
	align-items:flex-start;
}



footer .container .footer_logo{
text-align:left;
margin-bottom:30px;
width:500px;
}

footer .container .footer_logo h1{
margin-bottom:20px;
}

footer .container .img_mincari {
    height: 30px;
}

footer .container .img_bitwork {
    height: 30px;
}


footer nav{
    width:500px;
}

footer nav .flexbox{
justify-content: flex-end;
}

footer .nav_column ul{
	text-align:left;
	width:31%;
    margin-left:2%;
}

footer .nav_column ul ul{
	width:100%;
}

footer .nav_column h3{
	border-bottom:1px solid #333;
	margin-bottom:30px;
	padding-bottom:20px;
    font-size:13px;
    font-weight:bold;
}

footer .nav_column li{
	margin-bottom: 5px;
    line-height: 21px;
}

footer .nav_column li a{
font-size:12px;
}



footer .nav_column form{
	width:300px;
}

footer .nav_column .menu{
	display:flex;
   flex-direction: column;
}

footer #menu-column-1{
justify-content:center;
display:flex;
flex-direction:column;
}

.copyright{
	margin: 0;
	font-size: 11px;
}


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


/*
 * ヘッダーのスタイル
 */
.header {
  position: fixed;
  z-index: 99;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

#inner-header {
  max-width: 96%;
}


/*ドロワーがあるときは、左右メニュー用のスペースを確保*/
#drawer + #inner-header {
  max-width: calc(100% - 76px);
}


.drawer__title {
  position: relative;
  padding: 7px 15px;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
}
.drawer__title .close {
  display: inline-block;
  padding: 10px 3px;
}
.drawer__title .close span {
  height: 30px;
  margin: 0 20px 0 7px;
}
.drawer__title .close span:before {
  right: -13px;
  width: 30px;
}

/*ハンバーガーボタン・検索*/
.drawer--unshown {
  display: none; /*はじめ非表示に*/
}
#drawer__open,
.header-search {
  position: absolute;
  top: 0;
  width: 48px;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 23px;
  text-align: center;
  vertical-align: middle;
  line-height: 47px;
}
#drawer__open {
  right: 0;
}
.header-search {
  right: 0;
}

/*
 * ヘッダーナビのスタイル
 */
/*PCナビ：念のためスマホで非表示設定*/
.desktop-nav {
  display: none;
}

/*モバイル専用ヘッダーナビ*/
.mobile-nav {
  overflow: hidden;
}
.mobile-nav,
.mobile-nav li,
.mobile-nav li a {
  height: 40px;
}
.mobile-nav ul {
  overflow-x: auto;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  animation: RightToLeft 2s cubic-bezier(0.24, 0.56, 0.47, 0.91) 0s 1 normal;
  -webkit-overflow-scrolling: touch;
}

@keyframes RightToLeft {
  0% {
    transform: translateX(15px);
  }
}

.mobile-nav li {
  display: inline-block;
  opacity: 0.8;
}
.mobile-nav li.current-menu-item {
  border-bottom-width: 3px;
  border-bottom-style: solid;
  opacity: 1;
}
.mobile-nav li a {
  display: inline-block;
  padding: 0 9px;
  font-size: 14px;
  font-weight: bold;
  vertical-align: middle;
  line-height: 40px;
}
.mobile-nav li a:hover {
  opacity: 1;
  text-decoration: none;
}
/*ナビドロワー（ハンバーガーメニュー）*/
#drawer__content {
  overflow: auto;
  position: fixed;
  z-index: 9999;
  width: 90%;
  max-width: 330px;
  height: 100%;
  padding-bottom: 50px;
  background: #fff;
  transition: 0.3s ease-in-out;
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
  -webkit-overflow-scrolling: touch;
	right:0;
	top:0;
}

#drawer ion-icon {
    opacity: 1;
    z-index: 10000;
    position: relative;
    color: #fff;
    font-size: 40px;
}

#drawer__content .widget {
  margin: 0 0 15px;
}
#drawer__content .widget_search {
  margin: 1em;
}

#drawer__content .widget ul li a{
	 padding: 10px 20px;
    display: block;
}

#drawer__content input#s {
  background: #efefef;
  box-shadow: none;
}


#drawer__close-cover {
  display: none;
  position: fixed;
  z-index: 900;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: 0.3s ease-in-out;
}
#drawer__input:checked ~ #drawer__content {
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
#drawer__input:checked ~ #drawer__close-cover {
  display: block;
  opacity: 0.5;
}

#drawer__input:checked ~ #drawer__close-cover i{
	 font-size: 30px;
    z-index: 3000;
    color: #fff;
    left: 10px;
    position: absolute;
    top: 10px;
}

footer nav{
width:100%;
}

footer .container{
width:auto;
    padding: 0;
}

.nav_column .flexbox{
height:auto;
}

.nav_column .flexbox ul {
    width: 48%;
    margin-bottom: 30px;
}

.nav_column .flexbox ul:nth-child(3){
	width:100%;
}

/* ToTop
// ====================*/
.toTopButton {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  color: #FFF;
  background: #344354;
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  visibility: hidden;
  z-index: 1200;
  transition: 0.4s all ease;
  transform: scale(1.5);
  opacity: 0;
}

.toTopButton:before {
  font-family:"Font Awesome 5 Free";
  content: '\f106';
  font-weight: 900;
}

.toTopButton:hover, .toTopButton:focus {
  color: #FFF;
  background: #344354;
  text-decoration: none;
}

.toTopButton--active {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}


  .toTopButton {
    right: 10px;
    bottom: 10px;
}



}