@charset "UTF-8";
/*■01.RESET HTML*/
html {
  background-color: #fff;
  font-family: "Meiryo", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
  position: relative;
  margin: 0 auto;
  color: #242424;
  word-wrap: break-word;
  font-family: YuGothic, '游ゴシック', sans-serif;
}

p, li, pre, td, th, dt, dd {
  line-height: 1.5;
}

#wrapper {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background-color: #FFF;
  overflow: hidden;
  position: relative;
  word-wrap: break-word;
}

/*■02.CLEAR FLOAT*/
.clearfix:after {
  clear: both;
  display: block;
  content: " ";
  height: 0px;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

/* Hide these rules from IE-mac \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

.hidden {
  display: none;
}

/*■03.USE MEDIA*/
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.media, .media-body {
  overflow: hidden;
}

.media-text:after {
  clear: both;
  display: block;
  content: "";
  height: 0px;
  visibility: hidden;
}

/*■04.LAYOUT*/
.hidden {
  display: none;
}

.container {
  padding: 0 2%;
  position: relative;
}

.font14pc {
  font-size: 100%;
}

.font15pc {
  font-size: 107%;
}

.font16pc {
  font-size: 114%;
}

.font17pc {
  font-size: 121%;
}

.font18pc {
  font-size: 129%;
}

.font19pc {
  font-size: 136%;
}

.font20pc {
  font-size: 143%;
}

.font21pc {
  font-size: 150%;
}

.font22pc {
  font-size: 157%;
}

.font23pc {
  font-size: 164%;
}

.font24pc {
  font-size: 171%;
}

.font25pc {
  font-size: 179%;
}

.font26pc {
  font-size: 186%;
}

.font27pc {
  font-size: 193%;
}

.font28pc {
  font-size: 200%;
}

.font29pc {
  font-size: 207%;
}

.font30pc {
  font-size: 214%;
}

.font31pc {
  font-size: 221%;
}

.font32pc {
  font-size: 229%;
}

.flex_bg {
  width: 100%;
  margin-right: -100%;
}

.flex_content {
  width: 100%;
  position: relative;
}

/*■05.FLEX*/
.dis_flex {
  display: flex;
  display: -webkit-flex;
  /* Safari */
  display: -moz-flex;
  /* Firefox */
  display: -ms-flex;
  /* IE */
}

/*justify-content*/
.flex_jus_start {
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
}

.flex_jus_end {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
}

.flex_jus_center {
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
}

.flex_jus_between {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
}

.flex_jus_around {
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
}

.flex_jus_ini {
  justify-content: initial;
  -webkit-justify-content: initial;
  -moz-justify-content: initial;
  -ms-justify-content: initial;
}

/*align-items*/
.flex_align_item_start {
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
}

.flex_align_item_end {
  align-items: flex-end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  -ms-align-items: flex-end;
}

.flex_align_item_stretch {
  align-items: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
}

.flex_align_item_baseline {
  align-items: baseline;
  -webkit-align-items: baseline;
  -moz-align-items: baseline;
  -ms-align-items: baseline;
}

.flex_align_item_center {
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
}

.flex_align_item_ini {
  align-items: initial;
  -webkit-align-items: initial;
  -moz-align-items: initial;
  -ms-align-items: initial;
}

.flex-container {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/*■06.LAYOUT*/
header {
  padding-top: 3%;
  padding-bottom: 3%;
}

header .header__h .h_logo {
  width: 40%;
}

header .header__h .h_menu {
  width: 39.5%;
}

header .header__h .h_menu li {
  width: 28%;
}

header .h_nav {
  position: absolute;
  width: 100%;
  z-index: 9;
  margin-top: 2%;
  display: none;
  background: #f0f0f0;
  padding: 6%;
  padding-top: 4%;
  padding-bottom: 2%;
  padding-right: 12%;
}

header .h_nav > ul {
  /* padding: 0.1% 2%; */
}

header .h_nav > ul > li {
  border-bottom: dashed 1px #aeaeae;
}

header .h_nav > ul > li a {
  text-decoration: none;
  color: #000;
  line-height: 50px;
  display: block;
}

header .h_nav > ul li:last-child {
  border-bottom: none;
}

header .h_nav .h_close {
  text-align: right;
  margin-right: -8%;
}

header .h_nav .h_close img {
  width: 4.5%;
}

footer {
  margin-top: 6%;
  padding-top: 5%;
  background-color: #f0f0f0;
    position: relative;
}

footer figure.f_logo {
  text-align: center;
}

footer figure.f_logo img {
  width: 48%;
}

footer nav.f_nav {
  margin-top: 6%;
  margin-left: 5%;
  margin-right: 5%;
}

footer nav.f_nav ul li {
  width: 50%;
  margin-top: 6%;
  text-align: center;
}

footer nav.f_nav ul li:nth-child(1), footer nav.f_nav ul li:nth-child(2) {
  margin-top: 0;
}

footer nav.f_nav ul li:before {
  content: "|";
  float: left;
}

footer nav.f_nav ul li a {
  text-decoration: none;
  color: #000;
}

footer .PC {
  margin-top: 6%;
}

footer .page_up{
    position: fixed;
    width: 50px;
    right: 10px;
    bottom: 34%;
    display: none;
}

/*■07.FIX RESPONSIVE*/