@charset "utf-8";
/*==========================
 concept
==========================*/
#concept{}
#concept #image{ margin:40px auto;}
#concept #image img{ width:100%; height:auto;}
/*TITLE
------------*/
#concept .Title{ text-align:center; background:url("../img/index/plan_bk.gif") bottom center no-repeat; padding-bottom:20px;}
#concept .Title span{ color:#B3A58D; font-size:20px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#concept .Title span .sp{ display:none;}
#concept .MainText{ padding:30px 0 80px; background:url("../img/common/back.jpg") bottom center no-repeat;}
#concept .MainText span{ display:block; font-size:14px; line-height:2.5em; text-align:center; color:#666;}
@media screen and (max-width: 1100px) {
#concept #image{ margin:0 0 40px;}
#concept #image { margin:0 0 40px;}
}
@media screen and (max-width: 960px) {
#concept .Title{ margin:0 0 30px; letter-spacing:4px;}
#concept .Title span{}
#concept .MainText{ padding:30px 0 80px;}
#concept .MainText span{ font-size:13px; line-height:2.8em;}
}
@media screen and (max-width: 760px) {
#concept .MainText{ padding:0px 0 50px; width:84%; margin:0 7%; background-size:80% auto;}
#concept .MainText span{ text-align:left; display:inline !important;}
}
@media screen and (max-width: 680px) {
#concept #image { margin:0 0 20px;}
#concept .Title{ letter-spacing:2px; font-size:11px; margin-bottom:20px; background-size:auto 4px;}
#concept .Title span{ font-size:16px;  background-size:84px auto; padding-bottom:10px; line-height:1.8em;}
#concept .Title span .sp{ display:block;}
#concept .MainText span{ line-height:1.8em; }
.fade{ opacity: 1 !important; filter: alpha(opacity=100) !important;}
}
/*TITLE2
------------*/
.Title2{ padding:30px 0 10px; text-align:center; color:#222; font-size:18px; letter-spacing:3px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.Title2 span{ display:block; line-height:18px; text-align:center; background:url("../img/common/line.png") 50% 50% no-repeat; color:#666;}
@media screen and (max-width: 960px) {
.Title2 span{ color:#222;}
}
@media screen and (max-width: 680px) {
.Title2 {font-size:15px; padding:20px 0 10px;}
.Title2 span{ font-size:11px; color:#888;}
}

/*==========================
 concept2
==========================*/
#concept2{ padding:50px 0;}
#concept2 .Title2 br{ display:none;}
#concept2 .box { width:25%; float:left; display:inline; margin:50px 4%; *width:27%; width:27%\9; *margin:50px 2%; margin:50px 2%\9;}
#concept2 .box > *{ width:100%; float:left; margin:10px 0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; letter-spacing:2px;}
#concept2 .box h3{ font-size:16px; color:#555; letter-spacing:4px; text-align:center; line-height:24px; padding-bottom:60px; position:relative; z-index:1; *letter-spacing:1px; letter-spacing:1px\9;}
#concept2 .box h3 .icon{ width:40px; height:40px; position:absolute; z-index:3; bottom:10px; left:50%; margin-left:-20px;}
#concept2 .box h4{ font-size:15px; text-align:center; color:#B3A58D; letter-spacing:4px;}
#concept2 .box p{ font-size:13px; line-height:2em; color:#666;}
#concept2 .box .link{}
#concept2 .box .link a{ padding:2px 15px; display:inline-block; display:inline; background:#777;}
#concept2 .box .link a span{ display:block; color:#fff; font-size:12px; display:inline-block;}
#concept2 .box .link a:hover { padding:2px 20px;}
@media screen and (max-width: 1100px) {
#concept2 .box { width:29%; float:left; display:inline; margin:50px 2%;}
}
@media screen and (max-width: 960px) {
#concept2 .box h3{ font-size:15px; letter-spacing:0px;}
#concept2 .box h4{ font-size:12px; letter-spacing:1px;}
#concept2 .box p{ font-size:11.5px; height:240px;}
#concept2 .box .link { height:40px;}
#concept2 .box .link a{ line-height:40px; padding:0; display:block; text-align:center; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:px;}
#concept2 .box .link a:hover { padding:0;}
}
@media screen and (max-width: 680px) {
#concept2{ padding:50px 0 0;}
#concept2 .Title2 { font-size:16px;}
#concept2 .Title2 br{ display:block;}
#concept2 .box { width:90%; float:left; display:inline; margin:0 5% 20px; padding-bottom:20px; border-bottom: dotted 1px #ccc;}
#concept2 .box h3{ padding-bottom:50px;}
#concept2 .box h3 .icon{ width:30px; height:30px; margin-left:-15px;}
#concept2 .box h4{ font-size:14px; letter-spacing:2px;}
#concept2 .box p{ width:90%; height:auto; margin:10px 5%;}
#concept2 .box .link { height:34px;}
#concept2 .box .link a{ line-height:34px;}
}
/* Other Plans
------------------*/
#OtherPlans { margin:30px 0 150px;}
#OtherPlans ul{ width:100%; float:left; margin-top:20px;}
#OtherPlans ul li{ width:40%; height:180px; float:left; display:inline; margin:0 5%; position:relative; text-align:center; overflow:hidden;}
#OtherPlans ul li.plan1 { margin-right:0;}
#OtherPlans ul li a { display:block;}
#OtherPlans ul li a .image{ width:100%; height:180px; float:left; border-radius:8px; background-size:cover; -webkit-border-radius:8px; -moz-border-radius:8px;}
#OtherPlans ul li.plan1 a .image{ background:url("../img/index/plan1l.jpg") 50% 50% no-repeat;}
#OtherPlans ul li.plan2 a .image{ background:url("../img/index/plan2l.jpg") 50% 50% no-repeat;}
#OtherPlans ul li.plan3 a .image{ background-position:0 -320px;}
/*text*/
#OtherPlans ul li a .text{
width:95%;
height:40px;
position:absolute;
left:0;
bottom:0px;
z-index:5;
padding:5px 3%;
border-bottom-left-radius: 8px;  
border-bottom-right-radius: 8px;  
-webkit-border-bottom-left-radius: 8px;  
-webkit-border-bottom-right-radius: 8px;  
-moz-border-radius-bottomleft: 8px;  
-moz-border-radius-bottomright: 8px;  
}
#OtherPlans ul li a .text { background:rgba(255,255,255,0.8); *background:#1EAEFF; background:#1EAEFF\9;}
#OtherPlans ul li a:hover .text{ height:140px; padding:20px 3%; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; background:rgba(34,182,255,0.9);}
#OtherPlans ul li a .text > *{ width:100%; float:left; text-align:center; display:block; line-height:1.8em; *line-height:1.6em; line-height:1.6em\9; letter-spacing:1px;}
#OtherPlans ul li a:hover .text > * { color:#fff; text-align:left; margin-bottom:10px;}
#OtherPlans ul li a .text h4{ font-size:13px; color:#1796D2; color:#fff\9; *color:#fff; padding:0 10px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#OtherPlans ul li a:hover .text h4{ font-size:15px; letter-spacing:0;}
#OtherPlans ul li a .text h4 br { display:none;}
#OtherPlans ul li a .text p span{ font-size:10px; text-align:center; color:#1796D2; color:#fff\9; *color:#fff;}
#OtherPlans ul li a:hover .text p span{ font-size:11px; letter-spacing:0; color:#fff;}
#OtherPlans ul li a .text p em{ display:none; opacity: 0; filter: alpha(opacity=0);}
#OtherPlans ul li a:hover .text p em{ font-size:13px; *font-size:11.5px; font-size:11.5px\9; display:block; opacity: 1; filter: alpha(opacity=100); padding-bottom:5px;}
/*now*/
#OtherPlans ul li img.nowIMG{ width:38px; height:38px; position:absolute; left:0; top:0; z-index:120;}
#OtherPlans ul li.now a .text{ background:rgba(150,150,150,0.8); *background:#888; background:#888\9;}
#OtherPlans ul li.now a:hover .text{ background:rgba(100,100,100,0.8); *background:#888; background:#888\9;}
#OtherPlans ul li.now a .text p span, 
#OtherPlans ul li.now a .text h4 { color:#fff;}
/*-SPECIAL PLAN-*/
#OtherPlans ul li.plan3 a .text h4, 
#OtherPlans ul li.plan3 a .text p span { color:#B28500; color:#fff\9; *color:#fff;}
#OtherPlans ul li.plan3 a:hover .text { background:rgba(205,173,39,0.9);}
#OtherPlans ul li.plan3 a:hover .text h4, 
#OtherPlans ul li.plan3 a:hover .text p span { color:#fff;}
@media screen and (max-width: 960px) {
#OtherPlans {
 width:94%;
padding: 0px 3% 30px;
margin:0 0 20px;
background:#f9f9f9;
background: -moz-linear-gradient(top, #f4f4f4 0%, #ffffff 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(80%,#ffffff));
background: -webkit-linear-gradient(top, #f4f4f4 0%,#ffffff 80%);
background: -o-linear-gradient(top, #f4f4f4 0%,#ffffff 80%);
background: -ms-linear-gradient(top, #f4f4f4 0%,#ffffff 80%);
background: linear-gradient(to bottom, #f4f4f4 0%,#ffffff 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 );
}
#OtherPlans ul li{ height:auto;}
#OtherPlans ul li a { float:left;}
#OtherPlans ul li a .image{ height:120px;}

#OtherPlans ul li a .text, 
#OtherPlans ul li a:hover .text{ height:auto; padding:0; background:none;}
#OtherPlans ul li a .text{ width:100%; height:auto; position:static; padding:0; float:left; display:block;}
#OtherPlans ul li a:hover .text > * { margin-bottom:0px;}
#OtherPlans ul li a .text p, 
#OtherPlans ul li a:hover .text p{ text-align:left; color:#555;}
#OtherPlans ul li a .text h4 br { display:block;}
#OtherPlans ul li a .text h4, 
#OtherPlans ul li a:hover .text h4{ font-size:13px; letter-spacing:2px; text-align:center; line-height:1.2em; padding:8px 0;}
#OtherPlans ul li a .text p em, 
#OtherPlans ul li a:hover .text p em{ font-size:11px; line-height:1.5em; display:block; opacity: 1; filter: alpha(opacity=100); padding-bottom:0; margin-bottom:0;}
#OtherPlans ul li a .text p span{ display:none;}
#OtherPlans ul li a:hover{opacity: 0.7; filter: alpha(opacity=70);}
/*now*/
#OtherPlans ul li.now a .text, 
#OtherPlans ul li.now a:hover .text{ background:none;}
#OtherPlans ul li a .text p span, 
#OtherPlans ul li a .text h4, 
#OtherPlans ul li a:hover .text h4, 
#OtherPlans ul li.now a .text p span, 
#OtherPlans ul li.now a .text h4 { color:#1796D2;}
/*-SPECIAL PLAN-*/
#OtherPlans ul li.plan3 a:hover .text { background:none;}
#OtherPlans ul li.plan3 a:hover .text h4, 
#OtherPlans ul li.plan3 a:hover .text p span { color:#B28500;}
}
@media screen and (max-width: 680px) {
#OtherPlans { background:#fefefe; padding: 20px 3% ; margin:30px 0 20px;}
#OtherPlans h3{ background:#88C4F0; font-size:12px; color:#fff; padding:0; line-height:24px;}
#OtherPlans h3 span{ display:none;}
#OtherPlans ul {margin:0px -1px; border: solid 1px #eee; background:#fff;}
#OtherPlans ul li{ width:100%; border-bottom: dashed 1px #eee; margin:0;}
#OtherPlans ul li.now{ background:#efefef;}
#OtherPlans ul li:last-child{border-bottom:none;}
#OtherPlans ul li a .image{ width:25%; max-height:60px; height:60px; display:inline; background-image:url("../img/common/plan/plan_sp.jpg") !important; background-repeat:no-repeat; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;}
#OtherPlans ul li.plan1 a .image{ background-position:0 0; background-size: 100px auto;}
#OtherPlans ul li.plan2 a .image{ background-position:0 -60px; background-size: 100px auto;}
#OtherPlans ul li.plan3 a .image{ background-position:0 -120px; background-size: 100px auto;}
#OtherPlans ul li a .text, 
#OtherPlans ul li a:hover .text { width:55%; float:right; padding:0 2% 0 0;}
#OtherPlans ul li a .text h4, 
#OtherPlans ul li a:hover .text h4{ font-size:11px; text-align:left; padding:10px 0 5px;}
#OtherPlans ul li a .text p em, 
#OtherPlans ul li a:hover .text p em{ display:none;}
#OtherPlans ul li a .text p span, 
#OtherPlans ul li a:hover .text p span{ display:block; font-size:9px; letter-spacing:0; text-align:left;}
#OtherPlans ul li a .text p span{color:#666 !important;}
#OtherPlans ul li a .text, 
#OtherPlans ul li a:hover .text{ width:70%; height:60px; display:inline;}
#OtherPlans ul li img.nowIMG{ width:19px; height:19px;}
}