@charset "utf-8";

/* conponent.css
汎用性が高く、再利用できるパターンとして、小さな単位のコンポーネントを定義
 */
 
/*------------------------------------------------------------------------------------------------------------------------*/
/* デスクトップレイアウト : 701 px ～ 最大*/
/* モバイルレイアウト　　 : 700px以下。           デスクトップレイアウトからスタイルを継承。*/
@media only screen and (max-width: 700px) {
}
/*------------------------------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------------------------------*/
/* PC/SP */
/*------------------------------------------------------------------------------------------------------------------------*/
.sp  { display:none}
.pc  { display:inherit;}
@media only screen and (max-width: 700px) {
	.sp  { display:inherit}
	.pc  { display:none;}
}

/*------------------------------------------------------------------------------------------------------------------------*/
/* ローディング */
/*------------------------------------------------------------------------------------------------------------------------*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background:#F3F3F3;
  z-index: 10001;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 10002;
}
#loader img{
	width: 50px;
}




/*------------------------------------------------------------------------------------------------------------------------*/
/* 幅・高さ 調整用  */
/*------------------------------------------------------------------------------------------------------------------------*/
.w1p{ width:1%!important;}
.w2p{ width:2%!important;}
.w3p{ width:3%!important;}
.w4p{ width:4%!important;}
.w5p{ width:5%!important;}
.w6p{ width:6%!important;}
.w7p{ width:7%!important;}
.w8p{ width:8%!important;}
.w9p{ width:9%!important;}
.w10p{ width:10%!important;}
.w11p{ width:11%!important;}
.w12p{ width:12%!important;}
.w13p{ width:13%!important;}
.w14p{ width:14%!important;}
.w15p{ width:15%!important;}
.w16p{ width:16%!important;}
.w17p{ width:17%!important;}
.w18p{ width:18%!important;}
.w19p{ width:19%!important;}
.w20p{ width:20%!important;}
.w21p{ width:21%!important;}
.w22p{ width:22%!important;}
.w23p{ width:23%!important;}
.w24p{ width:24%!important;}
.w25p{ width:25%!important;}
.w26p{ width:26%!important;}
.w27p{ width:27%!important;}
.w28p{ width:28%!important;}
.w29p{ width:29%!important;}
.w30p{ width:30%!important;}
.w31p{ width:31%!important;}
.w32p{ width:32%!important;}
.w33p{ width:33%!important;}
.w34p{ width:34%!important;}
.w35p{ width:35%!important;}
.w36p{ width:36%!important;}
.w37p{ width:37%!important;}
.w38p{ width:38%!important;}
.w39p{ width:39%!important;}
.w40p{ width:40%!important;}
.w51p{ width:51%!important;}
.w52p{ width:52%!important;}
.w53p{ width:53%!important;}
.w54p{ width:54%!important;}
.w55p{ width:55%!important;}
.w56p{ width:56%!important;}
.w57p{ width:57%!important;}
.w58p{ width:58%!important;}
.w59p{ width:59%!important;}
.w60p{ width:60%!important;}
.w61p{ width:61%!important;}
.w62p{ width:62%!important;}
.w63p{ width:63%!important;}
.w64p{ width:64%!important;}
.w65p{ width:65%!important;}
.w66p{ width:66%!important;}
.w67p{ width:67%!important;}
.w68p{ width:68%!important;}
.w69p{ width:69%!important;}
.w70p{ width:70%!important;}
.w71p{ width:71%!important;}
.w72p{ width:72%!important;}
.w73p{ width:73%!important;}
.w74p{ width:74%!important;}
.w75p{ width:75%!important;}
.w76p{ width:76%!important;}
.w77p{ width:77%!important;}
.w78p{ width:78%!important;}
.w79p{ width:79%!important;}
.w80p{ width:80%!important;}
.w81p{ width:81%!important;}
.w82p{ width:82%!important;}
.w83p{ width:83%!important;}
.w84p{ width:84%!important;}
.w85p{ width:85%!important;}
.w86p{ width:86%!important;}
.w87p{ width:87%!important;}
.w88p{ width:88%!important;}
.w89p{ width:89%!important;}
.w90p{ width:90%!important;}
.w91p{ width:91%!important;}
.w92p{ width:92%!important;}
.w93p{ width:93%!important;}
.w94p{ width:94%!important;}
.w95p{ width:95%!important;}
.w96p{ width:96%!important;}
.w97p{ width:97%!important;}
.w98p{ width:98%!important;}
.w99p{ width:99%!important;}
.w100p{ width:100%!important;}

.w10{ width:10px!important;}
.w20{ width:20px!important;}
.w30{ width:30px!important;}
.w40{ width:40px!important;}
.w50{ width:50px!important;}
.w60{ width:60px!important;}
.w70{ width:70px!important;}
.w80{ width:80px!important;}
.w90{ width:90px!important;}
.w100{ width:100px!important;}
.w110{ width:110px!important;}
.w120{ width:120px!important;}
.w130{ width:130px!important;}
.w140{ width:140px!important;}
.w150{ width:150px!important;}
.w160{ width:160px!important;}
.w170{ width:170px!important;}
.w180{ width:180px!important;}
.w190{ width:190px!important;}
.w200{ width:200px!important;}
.w250{ width:250px!important;}
.w300{ width:300px!important;}
.w350{ width:350px!important;}
.w400{ width:400px!important;}
.w450{ width:450px!important;}
.w500{ width:500px!important;}
.w550{ width:550px!important;}
.w600{ width:600px!important;}
.w650{ width:650px!important;}
.w700{ width:700px!important;}
.w750{ width:750px!important;}
.w800{ width:800px!important;}
.w850{ width:850px!important;}
.w900{ width:900px!important;}

/* ボタン用＿PC：テキストに合わせる　SP：100％ */
.wauto_100p{
	width: auto!important;
}
@media only screen and (max-width: 700px) {
	.wauto_100p{
		width: 100%!important;
		padding-left:0;
		padding-right:0;
	}
}
/* ボタン用＿PC：テキストに合わせる　SP：100％ */
.w100p_100p{
	width: 100%!important;
	padding-left: 0!important;
	padding-right:0!important;
}
@media only screen and (max-width: 700px) {
	.w100p_100p{
		width: 100%!important;
		padding-left:0;
		padding-right:0;
	}
}

.h10{ height:10px!important;}
.h50{ height:0px!important;}
.h100{ height:100px!important;}
.h150{ height:150px!important;}
.h200{ height:200px!important;}


/*------------------------------------------------------------------------------------------------------------------------*/
/* マージン調整用  */
/*------------------------------------------------------------------------------------------------------------------------*/
/* margin-top */
.mt5{ margin-top:5px!important;}
.mt10{ margin-top:10px!important;}
.mt20{ margin-top:20px!important;}
.mt30{ margin-top:30px!important;}
.mt40{ margin-top:40px!important;}
.mt50{ margin-top:50px!important;}
.mt60{ margin-top:60px!important;}
.mt70{ margin-top:70px!important;}
.mt80{ margin-top:80px!important;}
.mt90{ margin-top:90px!important;}
.mt100{ margin-top:100px!important;}

/* margin-left */
.ml5{ margin-left:5px!important;}
.ml10{ margin-left:10px!important;}
.ml20{ margin-left:20px!important;}
.ml30{ margin-left:30px!important;}
.ml40{ margin-left:40px!important;}
.ml50{ margin-left:50px!important;}
.ml60{ margin-left:60px!important;}
.ml70{ margin-left:70px!important;}
.ml80{ margin-left:80px!important;}
.ml90{ margin-left:90px!important;}
.ml100{ margin-left:100px!important;}

/* margin-right */
.mr5{ margin-right:5px!important;}
.mr10{ margin-right:10px!important;}
.mr20{ margin-right:20px!important;}
.mr30{ margin-right:30px!important;}
.mr40{ margin-right:40px!important;}
.mr50{ margin-right:50px!important;}
.mr60{ margin-right:60px!important;}
.mr70{ margin-right:70px!important;}
.mr80{ margin-right:80px!important;}
.mr90{ margin-right:90px!important;}
.mr100{ margin-right:100px!important;}

/* margin-bottom*/
.mb5{ margin-bottom:5px!important;}
.mb10{ margin-bottom:10px!important;}
.mb20{ margin-bottom:20px!important;}
.mb30{ margin-bottom:30px!important;}
.mb40{ margin-bottom:40px!important;}
.mb50{ margin-bottom:50px!important;}
.mb60{ margin-bottom:60px!important;}
.mb70{ margin-bottom:70px!important;}
.mb80{ margin-bottom:80px!important;}
.mb90{ margin-bottom:90px!important;}
.mb100{ margin-bottom:100px!important;}


/*------------------------------------------------------------------------------------------------------------------------*/
/* カラーに関するスタイル */
/*------------------------------------------------------------------------------------------------------------------------*/
/* color */
.red01{ color:#D23E3E;}
.red02{ color:#FF2626;}
.green01{ color:#398726;}
.blue01{ color:#4294B8;}



/*------------------------------------------------------------------------------------------------------------------------*/
/* テキストに関するスタイル */
/*------------------------------------------------------------------------------------------------------------------------*/
/* font-size */
.font12{ font-size:12px;}
.font14{ font-size:14px;}
.font16{ font-size:16px;}
.font18{ font-size:18px;}
.font20{ font-size:20px;}
.font22{ font-size:22px;}

/* font-weight */
.strong{ font-weight: bold;}

/* font-family */
.mincho{ font-family: Ryumin Medium KL,"リュウミン M-KL",HiraMinProN-W3,HiraMinPro-W3,"ヒラギノ明朝 ProN W3","ヒラギノ明朝 Pro W3","ＭＳ 明朝",serif;}

/* writing */
.wrv{
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode:vertical-rl;
}

/* text-align */
.tal{ text-align:left;}
.tac{ text-align:center;}
.tar{ text-align:right;}

/* letter-spacing */
.ls-01{ letter-spacing: -0.1em;}
.ls-02{ letter-spacing: -0.2em;}
.ls1{ letter-spacing: 1em;}