@charset "utf-8";
/* CSS Document */

*{
margin: 0px;
padding: 0px;
}

body{
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
background:#fff;
line-height: 2.0em;
color:#444;
font-size:14px;
font-size-adjust: none;
-webkit-font-size-adjust: none;
font-family: "Noto Sans Japanese";
position: relative;
}

img{
border:0;
outline:none;
}

a:hover img.hover-alp{
filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;
}

a:hover img.hover-alp100{
filter: alpha(opacity=100); -moz-opacity:1.00; opacity:1.00;
}

.alp50{
filter: alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;
}

a:link{color:#019dd6; text-decoration: none;}
a:visited{color:#019dd6; text-decoration: none;}
a:hover{color:#fb6060; text-decoration:underline;}

.clearfix:after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

* html .clearfix{
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}

p{margin:0 0 15px;}

.cb{clear:both;}

#page-top{position:fixed; bottom:20px; right:20px; z-index: 50;}
#page-top a{font-size: 40px; color: #333;  }
@media (max-width: 767px) {
#page-top{text-align: right; right: 12px; border: 15px;}
#page-top img{width: 60%;}
}


img{
border:0;
outline:none;
}


.sp-only{display: none !important ;}
@media (max-width: 767px) {
.sp-only{display: block !important;}
.pc-only{display: none !important ;}
}

@media screen and (min-width: 768px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 767px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}

/*==================================================
全体コンテンツエリア
================================================== */

.contents-area{width: 1000px; margin-left: auto; margin-right: auto; position: relative;}
.page-contents{padding:50px 0;}

.contents-bgcolor{background: #f5f5f5;}

.page-wrapper{padding-top: 45px;}


@media (max-width: 767px) {
.contents-area{width: 90%; }
.page-contents{padding:50px 0 30px;} 
.page-wrapper{padding-top: 0;}    
}

@media (max-width: 320px) {
.page-contents{padding:30px 0 20px;}  
.page-wrapper{padding-top: 0;}    
}


/*==================================================
タイトル
================================================== */

.title-contents{display: block; letter-spacing: 0.06em; margin: 0 auto 50px ; font-size: 26px; position: relative;}
.page-contents .title-contents{margin-bottom: 70px;}


.title-contents-basic{display: block; text-align: center; font-size: 32px; margin-bottom: 50px;}
.title-contents-basic span{border-bottom: 1px solid #333; padding-bottom: 5px;}

.title-border {
display: flex;
align-items: center;
}
.title-border:before,
.title-border:after {
border-top: 1px solid #444;
content: "";
flex-grow: 1; 
}
.title-border:before {
margin-right: 1rem;
}
.title-border:after {
margin-left: 1rem;
}

/*下層コンテンツページメインタイトル*/
.page-title{display: flex;  align-items: center;  justify-content: center; height: 218px; background: url(../images/bg_pagetitle.jpg) no-repeat center center; background-size:cover;}
.page-title h2{width: 90%; margin: -12px auto 0; text-align: center; font-size: 24px; color: #fff;}
.page-title h2 span{border-bottom: 1px solid #fff; padding:0 3px 3px;}

@media (max-width: 767px) {
.title-contents{margin: 0 auto 30px ; font-size: 22px; text-align: center; line-height: 1.4em;}
.page-contents .title-contents{margin-bottom: 50px;} 
    
/*下層コンテンツページメインタイトル*/
.page-title{height: 90px;}
.page-title h2{font-size: 18px;}  
}

@media (max-width: 320px) {
.title-contents{font-size: 18px;}    
}

/*==================================================
メインコンテンツエリア
================================================== */

#mainContents{width:780px; float:right;}

/*==================================================
サイドカラム
================================================== */

#side{width:240px; float:left;}

/*==================================================
パンクズリスト
================================================== */

.breadcrumbs{font-size: 12px; padding: 5px; background: #f5f5f5;}
.breadcrumbs ul{list-style: none;}
.breadcrumbs ul li{display: inline-block; padding-right: 5px;}
.breadcrumbs ul li:after{content: ">"; padding-left: 10px;}
.breadcrumbs ul li.active-page:after{content: none;}

@media (max-width: 767px) {
.breadcrumbs{font-size: 11px; padding: 3px; }    
}

/*==================================================
header
================================================== */

#header-top{background: #019dd6;}
#header-top h1{display: block; padding: 3px 0; font-size: 12px; color: #fff;}
.header-btn{position: absolute; top: 0; width: 210px; }
.header-btn img{width: 100%;}
.btn-email{right: 0;}
.btn-tel{right: 210px;}

#header-main{width: 1000px; margin: 13px auto 15px; position: relative;}
.site-logo{display: inline-block; width: 140px; margin:5px 25px 0 0; vertical-align: top;}
.site-logo img{width: 100%;}
.header-catch{display: inline-block; height: 64px; vertical-align: top; border:1px solid #fb6060; border-radius: 6px;}
.header-catch h3{display: block; background:#fb6060; text-align: center; padding: 2px 0; font-size: 18px; color: #fdfc87; border-top-left-radius: 4px; border-top-right-radius: 4px;}
.header-catch p{text-align: center; padding: 2px 7px ; margin: 0 auto; font-size: 11px;}
.header-info{display: inline-block; width: 420px; text-align: center; position: absolute; top:30px; right: 0;}
.header-info span{display: inline-block; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; text-align: center; border:1px solid #444; }
.header-info p{display: inline-block; margin-left: 15px; text-align: left;}

.page-header{height: 218px; margin: 60px 0 0;}

a.header-blogbtn{display: inline-block; height: 64px; line-height: 64px; border:1px solid #711a3c; background: #711a3c; border-radius: 6px; margin: 0 0 0 5px; vertical-align: middle; color: #fff !important; text-align: center; padding: 0 12px; font-size: 13px; text-decoration: none;}
a.header-blogbtn:hover{background: #fff; color:#711a3c !important; }
a.header-blogbtn i{padding-right: 4px; font-size: 16px;}
a.header-blogbtn p{display: inline-block; margin: 0;}

@media (max-width: 767px) {
#header-top{text-align: center; height: 75px; }    
#header-top h1{padding: 0 5px; font-size: 12px; }
.header-btn{position: relative; top: inherit; width: 90%; }
.header-btn img{width: 49%; vertical-align: top;}
.btn-email{right: inherit;}
.btn-tel{right: inherit;}

#header-main{display: none;}
.site-logo{display: inline-block; width: 21%; margin:0 0 0 12px; }
.site-logo img{width: 100%;}
.header-catch, .header-info{display: none; } 
}

@media (max-width: 320px) {
#header-top{height: 70px;}
.site-logo{width: 23%; }    
}


/*==================================================
footer
================================================== */

#g-map iframe{width: 100%; height: 300px; vertical-align: bottom}
#footer-navi{background: #019dd6; padding:10px 0;}
#footer-navi ul{width: 1000px; margin: 0 auto; list-style: none; text-align: center;}
#footer-navi ul li{display: inline-block; }
#footer-navi ul li a{display: block; line-height: 1.0em;  padding:0 11px 0 14px; color: #fff; border-left: 1px solid #fff; font-size: 13px;}
#footer-navi ul li:last-child a{border-right: 1px solid #fff;}

#footer-info{background: #f5f5f5; padding:25px 0; text-align: center;}
.footer-info-l{display: inline-block; vertical-align: top; width: 48%;}
.footer-info-l h3{display: block; margin-bottom: 15px; font-size: 18px;}
.footer-info-l a{display: inline-block; width: 200px; margin: 0 15px; border-radius: 6px; background: url(../images/bg_btn.png) center center no-repeat; background-size:100%; padding:10px 0; color: #fff;}
.footer-info-l a i{padding-right: 6px;}
.footer-info-r{display: inline-block; vertical-align: middle; width: 40%; text-align: none; border-left: 1px solid #444; padding-left: 40px; margin-left: auto;}

.copyright{text-align: center; background: #f5f5f5; border-top: 1px solid #444; padding: 10px 0; font-size: 12px;}

@media (max-width: 767px) {
#g-map iframe{height: 220px; }
#footer-navi{padding:15px 0 8px;}    
#footer-navi ul{width: 90%; }
#footer-navi ul li{display: block; width: 46.8%; float: left; margin: 0 5px 10px;}
#footer-navi ul li a{padding:10px 0; border: 1px solid #fff; border-radius: 4px; font-size: 12px;}

#footer-info{padding:20px 0;}
.footer-info-l{display: block; vertical-align: top; width: 100%;}
.footer-info-l h3{font-size: 22px; margin-bottom: 16px;}
.footer-info-l a{display: block; width: 100%; margin: 0 auto 15px; padding:15px 0;  font-size: 18px;}
.footer-info-l a i{padding-right: 6px;}
.footer-info-r{display: block; vertical-align: top; width: 100%; text-align: none; border-left:none; padding-left: 0; margin-left: auto; border-top: 1px solid #444; margin-top: 20px; padding-top: 20px; font-size: 12px;} 
.footer-info-r th{vertical-align: top; padding-right: 10px;}
}

@media (max-width: 320px) {
#footer-navi ul li{width: 46.2%; } 
.footer-info-l h3{font-size: 18px; } 
.footer-info-l a{padding:10px 0;  font-size: 16px; margin-bottom: 10px;}    
}

.footerfar{
	text-align: left;
	margin-left: 20px;
	margin-top: 10px;
}

/*==================================================
トップページ
================================================== */

#top-mainimg{height: 880px; background: url("../images/mainimg_top.jpg") top center no-repeat; background-size:cover; position: relative; }
.top-mainimg-catch{display: block; width: 100%; position: absolute; text-align: center; bottom:170px; color: #fff; font-size: 300%; line-height: 1.8em; }
.top-mainimg-catch span{display: block; }
.top-mainimg-catch strong{width: 88%; margin: 20px auto 0; font-size: 130%; color:#fdfc87; }
.top-mainimg-catch .title-border:before, .top-mainimg-catch .title-border:after{border-color: #fdfc87 !important;}

@media (max-width: 767px) {
#top-mainimg{background: url("../images/mainimg_sptop.jpg") top center no-repeat; background-size:100%; height: 520px;}    
.top-mainimg-catch{bottom:120px; font-size: 22px; line-height: 1.6em; }
.top-mainimg-catch strong{width: 94%; margin: 15px auto 0; font-size: 28px; }  
}

@media (max-width: 320px) {
#top-mainimg{height: 460px;}
.top-mainimg-catch{font-size: 18px; }
.top-mainimg-catch strong{margin: 10px auto 0; font-size: 24px; }  
}

#top-contents01{background: url("../images/bg_top_contents.png") top center no-repeat; min-height: 600px; margin-top: -290px; position: relative; margin-bottom: 80px;}
.illust-01{width: 140px; position: absolute; top: 150px; left: 0;}
.illust-02{width: 120px; position: absolute; bottom: 50px; right: 0;}
.conversation{width: 660px; margin: 0 auto 0; padding-top: 440px; font-weight: bold; font-size: 16px;}
.conversation dt{text-align: right; position: relative; margin: 25px 0; padding-right: 15px;}
.conversation dt span{display: inline-block; width: 560px; border-radius: 8px; padding: 14px 15px; text-align: left; color: #fff; background: #019dd6;}
.conversation dt i{position: absolute; top: 6px; right: 0;}
.conversation dt i img{width: 17px;}
.conversation dd{position: relative; padding-left: 17px;}
.conversation dd span{display: inline-block; width: 560px; border-radius: 8px; border:2px solid #444; padding: 10px 15px; text-align: left; color: #444; background: #fff;}
.conversation dd i{position: absolute; top: 4px; left:0;}
.conversation dd i img{width: 20px;}

@media (max-width: 767px) {
#top-contents01{background: url("../images/bg_sptop_contents.png") top center no-repeat; min-height: auto; background-size: contain; margin-top: -110px; margin-bottom: 80px;}
#top-contents01 .contents-area{width: 100%;}
.illust-01{width: 100px; top: -10px; left: -20px;}
.illust-02{width: 80px; bottom: -80px; right: 0; z-index: 10;}
.conversation{width: 80%; padding-top: 100px; font-size: 13px; line-height: 1.6em;}
.conversation dt{margin: 15px 0; padding-right: 15px;}
.conversation dt span{width: 100%; padding: 8px 10px; box-sizing: border-box;}
.conversation dt i{position: absolute; top: 6px; right: 0;}
.conversation dt i img{width: 15px;}
.conversation dd{position: relative; padding-left: 17px;}
.conversation dd span{width: 100%; box-sizing: border-box; padding: 8px 10px;}
.conversation dd i{top: 10px;}	
}

@media (max-width: 320px) {    
.illust-01{width: 90px; top:0; left: -20px;}
.illust-02{width: 70px; bottom: -70px; right: -10px; z-index: 10;}
.conversation{font-size: 12px;} 
}

#top-contents02{background: url("../images/bg_top_contents02.png") top center no-repeat #f2f2f2; min-height: 800px; padding-bottom: 70px;}
#top-contents02 .title-contents{width: 50%; }
#top-contents02 article{border:4px solid #ccc; background: #fff; width:792px; height: 242px; clear: left; position: absolute;}
.top-point01{ margin-left: 150px; top: 70px; z-index: 5; }
.top-point02{margin-left:250px; top: 300px; z-index: 9;}
.top-point03{margin-left:50px; width: 892px !important; top: 530px; z-index: 5; }
.top-point-pic {height: 242px; margin-right: 40px; float: left;}
.top-point02 .top-point-pic{float: right; margin-right: 0; margin-left: 30px;}
.top-point-pic img{height: 242px;}
.top-point-txt{padding:20px 25px;}
.top-point03 .top-point-txt{padding-top: 40px;}
.top-point-txt h4{display: block; color: #019dd6; font-size: 18px; margin-bottom: 15px;}
.txt-point{width: 900px; margin: 800px auto 0;}

@media (max-width: 767px) {
#top-contents02{padding-bottom: 50px; min-height: inherit;}
#top-contents02 .title-contents{width: 100%; }
#top-contents02 article{width:100%; position: relative; margin: 0 auto 20px; height: auto; box-sizing: border-box;}
.top-point01{ margin-left: inherit; top: inherit; z-index: 5; }
.top-point02{margin-left:inherit; top: inherit; z-index: 9;}
.top-point03{margin-left:inherit; width: 100% !important; box-sizing: border-box; top: inherit; z-index: 5;}
.top-point-pic {height: auto; margin-right: 0; float: none;}
.top-point02 .top-point-pic{float: none; margin-right: 0; margin-left: 0;}
.top-point-pic img{height: auto; width: 100%;}
.top-point-txt{padding:20px;}
.top-point03 .top-point-txt{padding-top: 20px;}    
.top-point-txt h4{font-size: 16px; margin-bottom: 20px;} 
.txt-point{width: 96%; margin: 30px auto 0;}    
}

@media (max-width: 320px) {
.top-point-txt{padding:15px;}
.top-point03 .top-point-txt{padding-top: 15px;}    
.top-point-txt h4{font-size: 14px; margin-bottom: 10px;} 
}

#top-camp{text-align: center;  padding:40px 0; background: url(../images/bg_campaign.jpg) center center no-repeat; background-size: cover;}
#top-camp h3{display: block; width: 100%; color: #fdfc87; font-size: 28px; margin-bottom: 40px;}
#top-camp img{width: 480px; margin: 0 20px;}

@media (max-width: 767px) {
#top-camp{padding:30px 0; }
#top-camp h3{font-size: 22px; margin-bottom: 20px;}
#top-camp img{width: 90%; margin: 0 auto 10px;}    
}

@media (max-width: 320px) {
#top-camp h3{font-size: 18px; margin-bottom: 20px;} 
}

#top-faq{padding: 70px 0;}
#top-faq .title-contents{width: 40%;}

@media (max-width: 767px) {
#top-faq{padding: 30px 0;}
#top-faq .title-contents{width: 100%;}   
}

dl.accordion dt{display: block;}
dl.accordion {margin: 0;}
dl.accordion dt{background-color:#fff; cursor:pointer; height: 70px; position: relative; margin-bottom: 20px;}
dl.accordion dt i{display: inline-block; width: 68px; height: 68px; border-radius: 50%; border:1px solid #019dd6; color: #019dd6; text-align: center; line-height: 68px; font-size: 24px; font-style: normal; position: absolute; top: 0; left: 0; z-index: 10; background: #fff;}
dl.accordion dt span{display: block; width: 95%; box-sizing: border-box; padding-left: 50px; background: url(../images/y_close.png) no-repeat #fff ; background-position: 98% 50%; background-size: 14px; height: 55px; line-height: 55px; position: absolute; top:10px; color: #019dd6; border-radius: 8px; left: 35px; border:1px solid #019dd6;}
dl.accordion dt.open span{display: block; width: 95%; box-sizing: border-box; padding-left: 50px; background: url("../images/y_open.png") no-repeat #019dd6 ; background-position: 98% 50%; background-size: 14px; height: 55px; line-height: 55px; position: absolute; top:10px; color: #fff; border-radius: 8px; left: 35px; border:1px solid #019dd6;}   
dl.accordion dd {display:none; width: 92%; margin: 20px 0 30px 50px; background: #f5f5f5; border-radius: 8px; padding:30px; box-sizing: border-box;}
dl.accordion dd span{display: inline-block; width: 70px; vertical-align: middle; margin: 0 20px 0 0;}
dl.accordion dd span i{display: inline-block; width: 58px; height: 58px; border-radius: 50%; border:1px solid #444; color: #444; text-align: center; line-height: 58px; font-size: 20px; font-style: normal; background: #fff;}
dl.accordion dd p{display: inline-block; width: 750px; vertical-align: top;}

@media (max-width: 767px) {
    dl.accordion{line-height: 1.7em;}    
dl.accordion dt{height: auto; margin-bottom: 30px; }
dl.accordion dt i{width: 48px; height: 48px; line-height: 48px; font-size: 20px; top: 0; left: 0; }
dl.accordion dt span{width: 95%; background-position: 98% 80%; background-size: 10px; height: auto; line-height: inherit; position: relative; top:15px; left: 10px; padding: 10px 10px 10px 47px; box-sizing: border-box;}
dl.accordion dt.open span{width: 95%; background-position: 98% 80%; box-sizing: border-box; background-size: 10px; height: auto; line-height: inherit; position: relative; top:15px; left: 10px; }   
dl.accordion dd {display:none; width: 95%; margin: 30px 0 20px 10px; padding:20px; }
dl.accordion dd span{display: block; width: 40px; vertical-align: middle; margin: 0 0 15px 0;}
dl.accordion dd span i{width: 38px; height: 38px; line-height: 38px; font-size: 16px;}
dl.accordion dd p{display: block; width: 100%; vertical-align: top;}  
}

/*==================================================
404 page
================================================== */

#contents404{margin-top: 150px; padding: 50px 0; text-align: center;}
#contents404 h3{display: block; font-size: 200%; margin: 0 0 50px; font-weight: normal; line-height: 1.8em;}
#contents404 h4{display: block; font-size: 120%; margin: 0 0 50px; font-weight: normal; line-height: 1.5em;}
#contents404 a.btn{width: 320px; margin: 0 auto 25px; border-radius: 30px;}

@media (max-width: 767px) {
#contents404{margin-top: 100px; padding: 20px 0; }
#contents404 h3{display: block; font-size: 160%; margin: 0 0 30px; font-weight: normal; line-height: 1.6em;}
#contents404 h4{display: block; font-size: 100%; margin: 0 0 30px; font-weight: normal; line-height: 1.5em;}
#contents404 a.btn{width: 90%; margin: 0 auto 15px; border-radius: 30px;}
}


/*==================================================
テーブル
================================================== */

.table{border-collapse:collapse; border:1px solid #ccc; box-sizing:border-box; margin: 0 auto 50px; width: 100%;}
.table th{border:1px solid #ccc; background: #f5f5f5; font-weight:normal; text-align:center; padding:15px;}
.table thead th{vertical-align: top;}
.table td{border:1px solid #ccc; font-weight:normal; padding:15px;}
.table tbody th{background: #fff; color: #019dd6; vertical-align: middle; text-align: left; padding: 15px 10px;}
.table tbody td{text-align: center; vertical-align: middle;}
.table tr{background:#fff;}
.table-striped tr:nth-child(odd) { background:#f9f9f9;}
.table-hover > tbody > tr{cursor:pointer;}
.table-hover > tbody > tr:hover{background:#004896; color:#fff;}
.table caption{text-align:left; margin-bottom:5px;}

.table-basic{width: 100%; box-sizing: border-box; margin: 0 auto;}
.table-basic th{text-align: left; padding: 7px 10px; box-sizing: border-box; border-bottom: 1px dashed #ccc; vertical-align: top; font-weight: normal;}
.table-basic td{text-align: left; padding: 7px 10px; box-sizing: border-box; border-bottom: 1px dashed #ccc; vertical-align: top;}

@media (max-width: 767px) {
.table-basic th{display: block; width: 100%; padding: 0; border-bottom: none; }
.table-basic td{display: block; width: 100%;  padding: 5px 0 15px ; margin-bottom: 10px; }
}



/*==================================================
ボタン
================================================== */

/*デフォルトのボタン*/

.btn{display: block; padding: 7px 0; text-align: center; border:1px solid #019dd6; border-radius: 24px; text-decoration: none; color: #fff !important; background:#019dd6; font-size: 15px; }
.btn:hover{background:#fff; color: #019dd6 !important; text-decoration: none;}
.btn i{display: inline-block; padding-right: 5px;}

.btn-basic{display: block; padding: 15px 0; border-radius: 6px; border: 1px solid #444; color: #444 !important; text-decoration: none !important; text-align: center;}
.btn-basic:hover{background: #444; color: #fff !important;}
.btn-basic i{padding-left: 6px;}

.btn-red{border-color: #f13630 !important; background: #f13630 !important;}
.btn-red:hover{color: #f13630 !important; background:#fff !important;}

/*==================================================
リスト
================================================== */

.event-info{margin: 0 0 40px 0;}
.event-info li{display: inline-block; vertical-align: middle; border:1px solid #00a0e9; background: #fff; padding:10px 30px; margin-right: 20px;}
.event-info li i{padding-right: 6px;}

.ul-basic{list-style: none;}
.ul-basic li i{padding-right: 6px;}

.ul-type01{margin: 0 0 30px; list-style: none;}
.ul-type01 li{display: inline-block; vertical-align: top;}
.ul-type01 li:after{content: "／"; padding: 0 3px;}
.ul-type01 li:last-child:after{content: none;}

.ul-type02{margin: 50px 0 0; list-style: none;}
.ul-type02 li{display: inline-block; width: 380px; vertical-align: top; text-align: center; margin:0 40px 40px;}

ol.ol-type01{counter-reset:number; list-style-type: none!important; padding:0; margin: 0 0 30px;}
ol.ol-type01 > li{border:1px solid #a81b4b; border-radius: 6px; padding: 15px 20px; margin-bottom: 30px;}
ol.ol-type01 > li > ul{margin: 15px 0 0;}
ol.ol-type01 > li:before{
  /* 以下数字をつける */
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #a81b4b;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
    margin-right: 10px;
}

@media (max-width: 767px) {
ol.ol-type01 > li{margin-bottom: 15px; padding:10px 15px;}

.event-info li{display:block; border: none; border-left:4px solid #00a0e9; background-color: transparent; padding:2px 10px; margin-right: 0; margin-bottom: 5px;}
 
}

@media (max-width: 767px) {
.ul-type02{margin: 30px 0 0;}
.ul-type02 li{display: block;  border-radius: 6px; border:1px solid #f5f5f5; padding:25px 20px 10px ; box-sizing: border-box; width: 100%; margin:0 auto 30px;}	
}

/*==================================================
ラベル
================================================== */
.label{display: inline-block; border:1px solid #ccc; font-size: 13px; background:#fff; padding: 6px 10px; border-radius: 4px; margin: 0 5px; line-height: 1.0em;}

@media (max-width: 767px) {
.label{font-size: 12px; padding: 6px 7px; }
}

@media (max-width: 320px) {
.label{font-size: 11px; padding: 5px; }
}


/*==================================================
Padding Valiation
================================================== */

.p0{padding:0 !important;}
.p5{padding:5px !important;}
.p10{padding:10px !important;}
.p15{padding:15px !important;}
.p20{padding:20px !important;}
.p25{padding:25px !important;}
.p30{padding:30px !important;}
.p40{padding:40px !important;}
.p50{padding:50px !important;}

.p1per{padding:1% !important;}
.p2per{padding:2% !important;}
.p3per{padding:3% !important;}
.p4per{padding:4% !important;}
.p5per{padding:5% !important;}

.pr0{padding-right:0px !important;}
.pr5{padding-right:5px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}
.pr25{padding-right:25px !important;}
.pr30{padding-right:30px !important;}
.pr40{padding-right:40px !important;}
.pr50{padding-right:50px !important;}

.pr1per{padding-right:1% !important;}
.pr2per{padding-right:2% !important;}
.pr3per{padding-right:3% !important;}
.pr4per{padding-right:4% !important;}
.pr5per{padding-right:5% !important;}

.pt0{padding-top:0px !important;}
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pt40{padding-top:40px !important;}
.pt50{padding-top:50px !important;}

.pb0{padding-bottom:0px !important;}
.pb5{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.pb40{padding-bottom:40px !important;}
.pb50{padding-bottom:50px !important;}

.pl0{padding-left:0px !important;}
.pl5{padding-left:5px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl25{padding-left:25px !important;}
.pl30{padding-left:30px !important;}
.pl40{padding-left:40px !important;}
.pl50{padding-left:50px !important;}

.pl1per{padding-left:1% !important;}
.pl2per{padding-left:2% !important;}
.pl3per{padding-left:3% !important;}
.pl4per{padding-left:4% !important;}
.pl5per{padding-left:5% !important;}

.p0a{padding-right:auto; padding-left:auto !important;}
.plr10{padding-left:10px; padding-right:10px !important;}
.plr15{padding-left:15px; padding-right:15px !important;}
.plr20{padding-left:20px; padding-right:20px !important;}
.plr25{padding-left:25px; padding-right:25px !important;}
.plr30{padding-left:30px; padding-right:30px !important;}
.plr40{padding-left:40px; padding-right:40px !important;}
.plr50{padding-left:50px; padding-right:50px !important;}

.plr1per{padding-left:1%; padding-right:1% !important;}
.plr2per{padding-left:2%; padding-right:2% !important;}
.plr3per{padding-left:3%; padding-right:3% !important;}
.plr4per{padding-left:4%; padding-right:4% !important;}
.plr5per{padding-left:5%; padding-right:5% !important;}



/*==================================================
Margin Valiation
================================================== */

.m0{margin:0 !important;}
.m5{margin:5px !important;}
.m10{margin:10px !important;}
.m15{margin:15px !important;}
.m20{margin:20px !important;}
.m25{margin:25px !important;}
.m30{margin:30px !important;}
.m40{margin:40px !important;}
.m50{margin:50px !important;}

.m1per{margin:1% !important;}
.m2per{margin:2% !important;}
.m3per{margin:3% !important;}
.m4per{margin:4% !important;}
.m5per{margin:5% !important;}

.mr0{margin-right:0px !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr40{margin-right:40px !important;}
.mr50{margin-right:50px !important;}

.mr1per{margin-right:1% !important;}
.mr2per{margin-right:2% !important;}
.mr3per{margin-right:3% !important;}
.mr4per{margin-right:4% !important;}
.mr5per{margin-right:5% !important;}

.mt0{margin-top:0px !important;}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}

.mb0{margin-bottom:0px !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb40{margin-bottom:40px !important;}
.mb50{margin-bottom:50px !important;}
.mb100{margin-bottom:100px !important;}

.ml0{margin-left:0px !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}
.ml30{margin-left:30px !important;}
.ml40{margin-left:40px !important;}
.ml50{margin-left:50px !important;}

.ml1per{margin-left:1% !important;}
.ml2per{margin-left:2% !important;}
.ml3per{margin-left:3% !important;}
.ml4per{margin-left:4% !important;}
.ml5per{margin-left:5% !important;}

.m0a{margin-right:auto; margin-left:auto !important;}
.mlr10{margin-left:10px; margin-right:10px !important;}
.mlr15{margin-left:15px; margin-right:15px !important;}
.mlr20{margin-left:20px; margin-right:20px !important;}
.mlr25{margin-left:25px; margin-right:25px !important;}
.mlr30{margin-left:30px; margin-right:30px !important;}
.mlr40{margin-left:40px; margin-right:40px !important;}
.mlr50{margin-left:50px; margin-right:50px !important;}

.mlr1per{margin-left:1%; margin-right:1% !important;}
.mlr2per{margin-left:2%; margin-right:2% !important;}
.mlr3per{margin-left:3%; margin-right:3% !important;}
.mlr4per{margin-left:4%; margin-right:4% !important;}
.mlr5per{margin-left:5%; margin-right:5% !important;}

/*==================================================
Align Valiation
================================================== */

.ta-c{text-align:center !important;}
.ta-r{text-align:right !important;}
.ta-l{text-align:left !important;}

.va-t{vertical-align:top !important;}
.va-m{vertical-align:middle !important;}
.va-b{vertical-align:bottom !important;}

/*==================================================
FontSize Valiation
================================================== */

.fs-10{font-size:10px !important;}
.fs-12{font-size:12px !important;}
.fs-14{font-size:14px !important;}
.fs-80per{font-size:80% !important;}
.fs-90per{font-size:90% !important;}
.fs-100per{font-size:100% !important;}
.fs-110per{font-size:110% !important;}
.fs-120per{font-size:120% !important;}
.fs-130per{font-size:130% !important;}
.fs-140per{font-size:140% !important;}
.fs-150per{font-size:150% !important;}

.fs-xsmall{font-size:80% !important;}
.fs-small{font-size:90% !important;}
.fs-normal{font-size:100% !important;}
.fs-large{font-size:110% !important;}
.fs-xlarge{font-size:120% !important;}

/*==================================================
FontStyle Valiation
================================================== */

.fwb{font-weight:bold !important;}
.fwn{font-weight:normal !important;}
.td-n{text-decoration:none !important;}
.td-ul{text-decoration:underline !important;}

/*==================================================
Letter Spacing
================================================== */

.ls-0{letter-spacing:0em !important;}
.ls-01{letter-spacing:0.1em !important;}
.ls-015{letter-spacing:0.15em !important;}
.ls-02{letter-spacing:0.2em !important;}
.ls-025{letter-spacing:0.25em !important;}
.ls-03{letter-spacing:0.3em !important;}
.ls-035{letter-spacing:0.35em !important;}
.ls-04{letter-spacing:0.4em !important;}
.ls-06{letter-spacing:0.6em !important;}
.ls-08{letter-spacing:0.8em !important;}
.ls-1{letter-spacing:1.0em !important;}

/*==================================================
FontColor Valiation
================================================== */

.fc-w{color:#fff !important;}
.fc-black{color:#000 !important;}
.fc-blue{color:#0033ff !important;}
.fc-orange{color:#ff6600 !important;}
.fc-green{color:#006600 !important;}
.fc-red{color:#a81b4b !important;}


/*==================================================
Width Valiation
================================================== */

.w5per{width:5% !important;}
.w10per{width:10% !important;}
.w15per{width:15% !important;}
.w20per{width:20% !important;}
.w25per{width:25% !important;}
.w30per{width:30% !important;}
.w35per{width:35% !important;}
.w40per{width:40% !important;}
.w45per{width:45% !important;}
.w50per{width:50% !important;}
.w55per{width:55% !important;}
.w60per{width:60% !important;}
.w65per{width:65% !important;}
.w70per{width:70% !important;}
.w75per{width:75% !important;}
.w80per{width:80% !important;}
.w85per{width:85% !important;}
.w90per{width:90% !important;}
.w95per{width:95% !important;}
.w100per{width:100% !important;}
.w110per{width:110% !important;}
.w120per{width:120% !important;}
.w130per{width:130% !important;}
.w140per{width:140% !important;}
.w150per{width:150% !important;}
.w160per{width:160% !important;}
.w170per{width:170% !important;}
.w180per{width:180% !important;}
.w190per{width:190% !important;}
.w200per{width:200% !important;}

/*==================================================
Float Valiation
================================================== */

.fl-l,.left{float:left !important;}
.fl-r,.right{float:right !important;}
.fl-n{float:none !important;}

/*==================================================
Display Valiation
================================================== */

.dis-n{display:none !important;}
.dis-b{display:block !important;}
.dis-ib{display:inline-block !important;}
.dis-i{display:inline !important;}
.dis-t{display:table !important;}
.dis-tc{display:table-cell !important;}


/*==================================================
BackgrondColor-Type Valiation
================================================== */

.bgc-red{background:#ed4548 !important;}
.bgc-green{background:#9db801 !important;}
.bgc-orange{background:#f67c05 !important;}
.bgc-pink{background:#fe96c0 !important;}
.bgc-grey{background:#c6bfae !important;}
.bgc-blue{background:#2bbdf9 !important;}
.bgc-yellow{background:#fefc47 !important;}
.bgc-grey02{background:#e7e7e6 !important;}
.bgc-w{background:#fff !important;}
.bgc-black{background:#000 !important;}
.bgc-pinkgrey{background:#f7e3e3 !important;}


/*==================================================
Line-Height Valiation
================================================== */

.lh-10{line-height:1.0em !important;}
.lh-12{line-height:1.2em !important;}
.lh-14{line-height:1.4em !important;}
.lh-16{line-height:1.6em !important;}
.lh-18{line-height:1.8em !important;}
.lh-20{line-height:2.0em !important;}


/*==================================================
Border-Radius Style Valiation
================================================== */

.br2{border-radius: 2px !important;}
.br4{border-radius: 4px !important;}
.br6{border-radius: 6px !important;}
.br8{border-radius: 8px !important;}

/*==================================================
Border Style Valiation
================================================== */

.bn{border:none !important;}


/*==================================================
ページリスト(.PageList)
================================================== */

.PageList {text-align: center; clear: both; margin:20px auto 100px; }
.PageList ul {}
.PageList ul li {display: inline-block; margin: 0 6px;}
.PageList ul li.now { /* 現在のページ */}
.PageList ul li a {padding: 8px 15px; border-width: 1px; border-style:  solid; text-decoration: none; background: #fff;}
.PageList ul li a, .PageList ul li a:link, .PageList ul li a:visited {border-color: #231815; color: #231815;}
.PageList ul li a:focus, .PageList ul li a:hover, .PageList ul li a:active {border-color: #231815; background-color:#fff; color: #231815;}
.PageList ul li.now a { /* 現在のページ */ border-color: #231815; background-color:#231815; color: #fff;}

@media (max-width: 767px) {

.PageList {text-align: left; clear: both; margin:30px auto 10px; }
.PageList ul {}
.PageList ul li {display: inline-block; margin: 0 6px 35px;}
.PageList ul li.now { /* 現在のページ */}
.PageList ul li a {padding: 12px 15px; border-width: 1px; border-style:  solid; text-decoration: none; background: #fff;}
.PageList ul li a, .PageList ul li a:link, .PageList ul li a:visited {border-color: #231815; color: #231815;}
.PageList ul li a:focus, .PageList ul li a:hover, .PageList ul li a:active {border-color: #231815; background-color:#fff; color: #231815;}
.PageList ul li.now a { /* 現在のページ */ border-color: #231815; background-color:#231815; color: #fff;}

}