@charset "utf-8";
/*css document */

/* reset.css */
/* theme */

/***************************
 よく使う要素のリセット 
****************************/

html, body {
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6em;
}

html, body, h1, h2, h3, h4, h5, p,
ul, ol, dl, li, dt, dd, em, strong, sup,
div, id, span, img, a, table, tr, th, td, figure {
  margin: 0;
  padding: 0;
  border: none;
  font-weight: normal;
  font-style: normal;
  background: transparent;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/*    font-family: YakuHanJPs, 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;*/
/*    font-family: YakuHanJPs, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
    font-family:  YakuHanJPs, 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-decoration: none;
    outline: none;
}

/* 未対応のブラウザに対してブロック要素にする */
header, nav, main, article, aside, section, footer {
  display: block;
}

/* 画像の下にできる隙間をなくす */
img {
	vertical-align: bottom;
}

/* 画像のリンクのボーダーの非表示 */
img {
	border: 0;
}

/* テキストを左寄せ */
body {
	text-align: left;
}

/* 行の高さを揃える */
body {
	line-height: 1;
}

/* 文字間隔を揃える */
h1, h2, h3, h4, p, a, span, table, tr, 
th, td, span{
	letter-spacing: 1px;
}

table {
  border-collapse: collapse;
}


/* floatを解除する */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

/* 回り込みを解除 */  
.clearboth {
	clear: both !important;
}

/* リストスタイルなし */  
nav, ul {
  list-style-type: none;
}


/* 背景に使うgrayのストライプ　*/
.stripe01 {
  -webkit-background-size: 4px 4px;
  -moz-background-size: 4px 4px;
  background-size: 4px 4px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
              color-stop(.25, #eee), color-stop(.25, transparent),
              color-stop(.5, transparent), color-stop(.5, #eee),
              color-stop(.75, #eee), color-stop(.75, transparent),
              to(transparent));
  background-image: -webkit-linear-gradient(-45deg, #eee 25%, transparent 25%,
            transparent 50%, #eee 50%, #eee 75%,
            transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, #eee 25%, transparent 25%,
            transparent 50%, #eee 50%, #eee 75%,
            transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, #eee 25%, transparent 25%,
            transparent 50%, #eee 50%, #eee 75%,
            transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, #eee 25%, transparent 25%,
            transparent 50%, #eee 50%, #eee 75%,
            transparent 75%, transparent);
  background-image: linear-gradient(-45deg, #eee 25%, transparent 25%,
            transparent 50%, #eee 50%, #eee 75%,
            transparent 75%, transparent);
}

/* 背景に使うpinkのストライプ　*/
.stripe02 {
  -webkit-background-size: 4px 4px;
  -moz-background-size: 4px 4px;
  background-size: 4px 4px;
  background-color: #fff;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
              color-stop(.25, #ffdddd), color-stop(.25, transparent),
              color-stop(.5, transparent), color-stop(.5, #ffdddd),
              color-stop(.75, #ffdddd), color-stop(.75, transparent),
              to(transparent));
  background-image: -webkit-linear-gradient(-45deg, #ffdddd 25%, transparent 25%,
            transparent 50%, #ffdddd 50%, #ffdddd 75%,
            transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, #ffdddd 25%, transparent 25%,
            transparent 50%, #ffdddd 50%, #ffdddd 75%,
            transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, #ffdddd 25%, transparent 25%,
            transparent 50%, #ffdddd 50%, #ffdddd 75%,
            transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, #ffdddd 25%, transparent 25%,
            transparent 50%, #ffdddd 50%, #ffdddd 75%,
            transparent 75%, transparent);
  background-image: linear-gradient(-45deg, #ffdddd 25%, transparent 25%,
            transparent 50%, #ffdddd 50%, #ffdddd 75%,
            transparent 75%, transparent);
}

/* 背景に使う飾り枠　*/
.frame01 {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 1px #888888;
  border-bottom: solid 1px #888888;
}

.frame01:before, .frame01:after {
  content: '';
  position: absolute;
  top: -30px;
  width: 1px;
  height: -webkit-calc(100% + 60px);
  height: calc(100% + 60px);
  background-color: #888888;
}

.frame01:before {
  left: 50px;
}

.frame01:after {
  right: 50px;
}


/* 線のパターン*/

hr.style1 {
  background-color: #fff;
  border-top: 2px dotted #8c8b8b;
}

hr.style2 {
  margin-top: 5px;
  border-top: 3px double #8c8b8b;
}

hr.style3 {
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #cecdcd;
}

.f10 {
  font-size: 10px;
}

.f12 {
  font-size: 12px;
}

.f14 {
  font-size: 14px;
}

.f16 {
  font-size: 16px;
}

.f18 {
  font-size: 18px;
}

.f20 {
  font-size: 20px;
}

.f22 {
  font-size: 22px;
}

/* テキストの折り返しをinline-blockできれいにする */
.wb01 {
  display: inline-block;
}

/* 折り返し用のbrタグを消去する */
/* br {
  display: none;
} */

/* スマホとPCサイトの文字サイズを固定する
viewportのinitial-scaleかmaximum-scaleの指定が必要 */
body {
-webkit-text-size-adjust: 100%;
}

/***************************
 よく使うclassセレクタのパターン 
****************************/

/* パソコンで見たときは"pc"のclassがついた方が表示される */

/* スマホ画面は非表示 */
.sp {
  display: none !important;
}

/*　パソコン画面は表示　*/
.pc {
  display: block !important;
}

/* スマートフォンで見たときは"sp"のclassがついた方が表示される */

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

/* スマホ画面非表示 */
.sp {
  display: block !important;
}

/*　パソコン画面表示　*/
.pc {
  display: none !important;
}

}