@charset "utf-8";

/* Basic Structure ============================================================= */
html,body{ min-height: 100%; height:100%; }
img{max-width: 100%; height: auto; width: auto\9; /* ie8 */}
p{ margin: 0 0 1em 0; }
body{ color: #2E3241; }
a,
a:active,
a:visited{ color: #4363D8; }
a:hover{ color: #F0005C; }
.color1{ color:#F0005C;}/*pink*/
.color2{ color:#313B82;}/*navy*/
.color3{}
/* Font ======================================================== */
/* rem based fontsize <Firefox3.6+, Chrome, Safari5, IE9+ >*/
/* IE7/8対策のために最初にpx指定してからrem指定する  */
html{ font-size: 62.5%; }
body { font-size: 14px; /* font-size: 1.4rem;*/ }
h1{ font-size: 48px; font-size: 4.8rem; font-weight: bold; margin: 0; padding: 0; }
h2{ font-size: 20px; font-size: 2.0rem; font-weight: bold; margin: 0; padding: 0; }
h3{ font-size: 18px; font-size: 1.8rem; font-weight: bold; margin: 0; padding: 0; }
h4{ font-size: 16px; font-size: 1.6rem; font-weight: bold; margin: 0; padding: 0; }
h5{ font-size: 14px; font-size: 1.4rem; font-weight: bold; margin: 0; padding: 0; }
h6{ font-size: 12px; font-size: 1.2rem; font-weight: bold; margin: 0; padding: 0; }
.xsmall { font-size: 10px; font-size: 1.0rem; }
.small { font-size: 11px; font-size: 1.1rem; }
.medium { font-size: 12px; font-size: 1.2rem; }
.regular { font-size: 14px; font-size: 1.4rem; }
.large { font-size: 16px; font-size: 1.6rem; }
.xlarge { font-size: 18px; font-size: 1.8rem; }
.xxlarge { font-size: 24px; font-size: 2.4rem; }
.bold{ font-weight: bold; }
.italic{ font-style: italic; }
.oblique{ font-style: oblique; }
.clearsize{}
/* font-face */
body, textarea { font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; }
input, select { font-family: Arial, "ＭＳ Ｐゴシック", sans-serif; }
/* font-color */
.red{ color: #D1312C; }
.pink{ color: #F3455E; }
.orange{ color: #F29600; }
.lorange{ color: #FFA64D; }
.blue{ color: #5CBDD1; }
.lblue{ color: #AFDAC3; }
.brown{ color: #AFDAC3; }
.lbrown{ color: #DBC7A8; }


/* Reusable classes ========================================================= */
/* frame */
/* frame */
.frame1{ border: #F9F5EA solid 4px; padding: 2%; }
.frame2{ border: #7278bd solid 4px; padding: 2%;  background: #FFF;}
.frame_dotted1{ border: #F0005C dotted 1px; }
.frame_dotted2{ border: #313B82 dotted 1px; }
/* table */
.table1{ border-collapse: collapse; border: #666 solid 1px;}
.table1 tr{}
.table1 th,
.table1 td{ padding: 5px;}
.table1 th{ font-weight: bold; border-bottom: #666 solid 1px; text-align: left; white-space: nowrap;}
.table1 td{ border-left: #666 dotted 1px;border-bottom: #666 solid 1px;}

.table2{border: #DBC7A8 dotted 1px; margin-bottom: 1em;}
.table2 th{ padding: 0.5em 0.4em; border-bottom: #DBC7A8 dotted 1px;  border-right: #DBC7A8 dotted 1px; white-space: nowrap; }
.table2 td{ padding: 0.5em 0.4em; border-bottom: #DBC7A8 dotted 1px; }

/* list */
.list1{ list-style-type: none; display: block; margin: 0 auto; padding: 2% 0 0 0; border-top: #714F45 dotted 1px; }
.list1 li{ display: block;  margin: 0 0 2% 0; padding: 0 0 2% 0; line-height: 1.2; border-bottom: #714F45 dotted 1px; }
.list2{ list-style-type: none; display: block; margin: 0 auto; padding: 2% 0 0 0; border-top: #666 dotted 1px; }
.list2 li{ display: block;  margin: 0 0 2% 0; padding: 0 0 2% 0; line-height: 1.2; border-bottom: #666 dotted 1px; }

/* IE hack < http://www.positioniseverything.net/articles/cc-plus.html > */
#ltie8{}/*IE8未満*/
#ltie7{}/*IE7未満*/
/**** .clm inline blockによる横並びカラム構成のテンプレート。 ****/
ul.clm{ letter-spacing:-1em;}
ul.clm li{ width:100px; display:inline-block; display:-moz-inline-box; /display:inline; /zoom:1; letter-spacing:normal;}
ul.clm li > div{ width:100px; display:block;}

/* Utility classes ============================================================ */
/* Left & Right alignment */
.left{ float: left; }
.right{ float: right; }
.pcLeft{ float: left; }
.pcRight{ float: right; }
/* padding */
.inside { padding: 3%; }
.inside_thin { padding: 1%; }
/* margin */
.l10{margin-left:10px;}
.r10{margin-right:10px;}
.t10{margin-top:10px;}
.b10{margin-bottom:10px;}
/* button */
.cssbutton{ margin-bottom: 0.4em; padding: 0.5em 0.8em; font-size: 0.8em; background-color: #FBA0C1; color: #FFF; font-weight: bold; text-decoration: none; display:inline-block; /display:inline; /zoom:1; letter-spacing:normal; -moz-border-radius: 0.5em; border-radius: 0.5em; behavior: url(/lib/PIE.htc);/*for IE*/}
.cssbutton:hover{  color: #FFF; background-color: #FD74B8;}
/* The fraction classes are useful for column lists */
.half, .third, .quarter, .fifth, .sixth, .seventh{ width: 100%; display: block; list-style-type: none; margin: 0; padding: 0; /zoom:1; }
.half:after, .third:after, .quarter:after, .fifth:after, .sixth:after, .seventh:after{content: ""; display: block; clear: both;}
.half > li, .third > li, .quarter > li, .fifth > li, .sixth > li, .seventh > li{ float: left; }
.half > li{ padding: 1%; width: 48% }
.third > li{ padding: 1%; width: 31% }
.quarter > li{ padding: 1%; width: 23% }
.fifth > li{ padding: 1%; width: 18% }
.sixth > li{ padding: 0.7%; width: 15% }
.seventh > li{ padding: 0.3%; width: 13.5% }

.pcHalf{ display: block; list-style-type: none; margin: 0; padding: 0; /zoom:1;}
.pcHalf:after{content: ""; display: block; clear: both;}
.pcHalf > li { width:48%; margin: 0; padding: 1%; display:block; float: left; }
.pcThird{ display: block; list-style-type: none; margin: 0; padding: 0; /zoom:1;}
.pcThird:after{content: ""; display: block; clear: both;}
.pcThird > li { width:31%; margin: 0 ; padding: 1%; display:block; float: left; }

.pcFullblock{ width:98%; margin: 0; padding: 1%; display:inline-block; /display:inline; /zoom:1; letter-spacing:normal;}
.pcHalfblock{ width:47%; margin: 0; padding: 1%; display:inline-block; vertical-align: top; /display:inline; /zoom:1; letter-spacing:normal;}
.pcThirdblock{ width:30%; margin: 0; padding: 1%; display:inline-block; vertical-align: top; /display:inline; /zoom:1; letter-spacing:normal;}
.pcThirdOfTwoblock{ width:64%; margin: 0; padding: 1%; display:inline-block; vertical-align: top; /display:inline; /zoom:1; letter-spacing:normal;}
/* For when a <br /> just ain't enough */
.separator{clear: both;float: left;height: 1px;width: 100%; }
/*.clearFix (NN,IE6未満非対応) */
.clearfix {/zoom:1;}
.clearfix:after{content: ""; display: block; clear: both;}
.clearb{ clear:both; }

/* Smartphone(Landscape) ============================================================== */
@media screen and (max-width: 480px) {
.pcLeft{ float: none; }
.pcRight{ float: none; }
.pcHalf > li { width:98%; float: none; }
.pcThird > li { width:98%; float: none; }
.pcHalfblock{ width:98%; }
.pcThirdblock{ width:98%; }
}