@charset "utf-8";
/*==========================
 main image
==========================*/
#mainImg{ height:360px; position:relative; z-index:1;} 
#basic #mainImg{ background:url("../img/basicplan/basic.jpg") top center repeat-x; } 
#premium #mainImg{ background:url("../img/premiumplan/premium.jpg") top center repeat-x;} 
.plan ul li a .info, .plan ul li a .text, #Include ul li a{-webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out;}
a:hover, a:hover img { opacity: 0.9; filter: alpha(opacity=90);}
/* NAV
------------------*/
#planMenu{ margin:10px 0 0;}
#planMenu ul li{ width:40%; float:left; display:inline; margin:0 4.5%; text-align:center; border:solid 1px #88C4F0; letter-spacing:3px;}
#planMenu ul li br { display:none;}
#planMenu ul li.now{ position:relative;}
#planMenu ul li.now img{ position:absolute; z-index:3; width:16px; height:auto; left:50%; bottom:-19px; margin-left:-8px;}
#planMenu ul li a{ display:block; background:#efefef; padding:7px 0 5px; color:#1A9DFF;}
#planMenu ul li a:hover{ box-shadow:0 0 0 3px #88C4F0 inset; background:#fff;}
#planMenu ul li.now a{ display:block; background:#88C4F0; color:#fff;}
#planMenu ul li a span{ display:block; font-size:10px; line-height:1.4em; color:#999;}
#planMenu ul li.now a span{ color:#fff;}
@media screen and (max-width: 960px) {
#planMenu{ margin:10px 0;}
#planMenu ul li{ width:45%; margin:0 1.5%;}
}
@media screen and (max-width: 600px) {
#mainImg{height:220px; background-size:auto 100%;}
#premium #mainImg{ background-size:auto 100%;} 
#basic #mainImg{ background-size:auto 100%;} 
 
#planMenu {margin:0px 0 20px;}
#planMenu ul {background:#88C4F0; }
#planMenu ul li{margin:0 -1px; width:49.9%;}
#planMenu ul li a{ padding-bottom:10px; line-height:1.5em; background:#FFF; font-size:11px;}
#planMenu ul li a span{ line-height:2em; letter-spacing:0;}
#planMenu ul li br { display:block;}
}
/* PAGE TITLE
------------------*/
.PageTitle{ padding-top:60px; *padding-top:100px; padding-top:100px\9; margin:60px auto 40px; *margin:0 auto; margin:0 auto\9; background:url("../img/icon/plan.png") top center no-repeat; background-size:40px 40px; font-size:12px; color:#222222; text-align:center; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height:2.4em;}
.PageTitle em{ color:#222222; font-size:24px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background:url("../img/index/plan_bk.gif") bottom center no-repeat; display:block; padding-bottom:20px;}
.PageTitle em span{ display:none;}
@media screen and (max-width: 960px) {
.PageTitle{ letter-spacing:4px;}
.PageTitle em{ font-size:20px;}
}
@media screen and (max-width: 680px) {
.PageTitle{ margin:40px 0 20px; letter-spacing:2px; font-size:11px;}
.PageTitle em{ font-size:22px;  background-size:84px auto; padding-bottom:10px;}
.PageTitle em span{ display:block; font-size:12px;  color:#B3A58D;}
}
@media screen and (max-width: 520px) {
.PageTitle{ margin:20px 0;}
.PageTitle em{ font-size:18px;}
.PageTitle em span{font-size:11px;}
}
/* PLAN
------------------*/
.plan{}
.plan h3{ margin-bottom: 20px; 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;}
.plan h3 span{ display:block; line-height:18px; text-align:center; background:url("../img/common/line.png") 50% 50% no-repeat; color:#666;}
.plan > .text{ text-align:center; padding:10px 0 25px; color:#666; letter-spacing:2px; line-height:1.6em;}
.plan > .text br{ display:none;}
.plan p { width:100%; text-align:center; color:#222222; font-size:15px; line-height:1.7em; margin-bottom:50px;}


.plan dl{ padding-bottom:80px; *padding-top:30px; padding-top:30px\9; background:url("../img/common/title_end.gif") center bottom no-repeat; }
.plan dl dt{ width:100%; float:left; text-align:center; color:#B3A58D; font-size:20px; line-height:1.7em; margin-bottom:50px;}
.plan dl dd { display:inline; color:#444;}
.plan dl dd.text{ width:55%; padding:0 4%; float:left; font-size:13.5px;}
.plan dl dd.price{ width:30%; padding:25px 0 0; float:right; font-size:48px; line-height:1.2em; vertical-align:text-bottom; font-family:"Times New Roman", Times, serif;}
.plan dl dd.price span{ font-size:48px; vertical-align:baseline; line-height:1.4em; font-family:"Times New Roman", Times, serif;}
.plan dl dd.price .JPY{ display:inline; font-size:18px; color:#444;  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

.plan .SPtitle{ display:none;}
@media screen and (max-width: 1250px) {
.plan{ width:94%; padding:0px 3% 10px; float:left;}
.plan > .text br{ display:block;}
.plan > .text br.br_no{ display:none;}
}
@media screen and (max-width: 960px) {
.plan h3 span{ color:#222;}
.plan dl { background-size:100% auto;}
.plan dl dt{font-size:16px; line-height:1.6em; margin-bottom:40px;}
.plan dl dd.text{ width:55%; padding:0; float:left; font-size:13px;}
.plan dl dd.price{ width:40%; font-size:40px; padding:50px 0 0;}
}
@media screen and (max-width: 680px) {
.plan { width:90%; padding:0px 5% 10px;}
.plan h3{font-size:15px; padding:10px 0 10px;}
#Include.plan h3{ padding:2
]0px 0 10px;}
.plan h3 span{ font-size:11px; color:#888;}
.plan > .text{ font-size:11px; letter-spacing:0; padding-bottom:20px; line-height:1.8em;}
.plan > .text br{ display:block;}
.plan > .text .br_no{ display:none;}
.plan dl { width:95%; margin:0px 2.5% 30px; padding-bottom:30px;}
.plan dl dt{ font-size:14px; margin-bottom:20px;}
.plan dl dd.text, 
.plan dl dd.price { width:100%; float:left; padding:0; margin-top:15px; text-align:center;}
.plan dl dd.price span{ font-size:40px;}
.plan dl dd.text { font-size:11.5px; line-height:1.5em;}
}
@media screen and (max-width: 570px) {
.plan dl dt{ text-align:left; letter-spacing:0;}
.plan dl dd.price span{ font-size:30px;}
.plan dl dd.price .JPY{ font-size:12px;}
}
@media screen and (max-width: 520px) {
.plan > .text{ text-align:left;}
.plan > .text br{ display:none;}
.plan .SPtitle{ display:block; text-align:center;}
.plan .SPtitle span { display:block; text-align:center; background:#A79476; color:#fff; font-size:10px; line-height:20px;}
}
/* SHOOTING [basic]
------------------*/
.shoot {}
.shoot li{ width:31%; display:inline; float:left; margin:0 1%;}
.shoot li a{ display:block; max-width:300px; margin:0 auto; position:relative; overflow:hidden;}
.shoot li a .image{ display:block; margin-bottom:20px;}
.shoot li a .image img{ max-width:100%; height:auto; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;}
.shoot li a:hover .image img{border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;}
.shoot li a .info{ min-width:50%; display: inline-block; *display:block; display:block\9; margin-bottom:20px; padding:0 20px 0 0; height:30px; background:#33A1FA; color:#fff; line-height:30px; font-size:12px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;}
.shoot li a .info img{ height:28px; width:auto; display:inline; padding:0px 5px 2px 1px;}
.shoot li a:hover .info{ *background:#A79476; background:#A79476\9;}
.shoot li a .info br{ display:none;}
.shoot li a .text{ width:260px; height:100px; position:absolute; left:-320px; top:0; z-index:1; padding:20px; line-height:20px; background:rgba(167,148,118,0.9); color:#fff; opacity: 0; filter: alpha(opacity=0); *display:none; display:none\9;}
.shoot li a:hover .text{ opacity: 1; filter: alpha(opacity=100); top:0; left:0; *display:block; display:block\9; *background:#01D3FF; background:#01D3FF\9;}
.shoot li a .text em{ background:#fff; color:#0098E1; padding:2px 10px; display:inline-block; margin-top:10px;  display: inline-block; *display:block; display:block\9; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;}
@media screen and (min-width: 961px) {
.shoot li a:hover .info{ width:90%; background:#01D3FF;}
}
@media screen and (max-width: 960px) {
.shoot li{ overflow:hidden;}
.shoot li a .image{margin-bottom:10px;}
.shoot li a .image img{ border-radius:14px; -webkit-border-radius:14px; -moz-border-radius:14px;}
.shoot li a .info{ width:92%; height:auto; padding:0 0 0 8%; text-align:center; color:#33A1FA; background:none; line-height:32px; position:relative; font-size:11.5px; margin-bottom:10px;}
.shoot li:nth-child(3) a .info{ line-height:16px; margin-bottom:5px;}
.shoot li a .info br {display:block;}
.shoot li a .info img{ position:absolute; left:0; top:2px; z-index:3;}
.shoot li a .text{ width:100%; height:auto; position:static; float:left; padding:0px; opacity: 1; filter: alpha(opacity=100); color:#666; line-height:1.6em; background:none; font-size:11px;}
.shoot li a .text em{ color:#fff; background:#999;}
}
@media screen and (max-width: 680px) {
.shoot li a .info{ letter-spacing:0;}
.shoot li a{max-width:100%;}
}
@media screen and (max-width: 550px) {
.shoot { border-top:dashed 1px #eee; margin-bottom:20px;}
.shoot li{ width:100%; min-height:120px; margin:10px 0 0; border-bottom:dashed 1px #eee; padding-bottom:0px;}
.shoot li:nth-child(3) { border-bottom:none;}
.shoot li a{ min-height:110px;}
.shoot li a .image{ width:110px; height:110px; float:left; display:inline; overflow:hidden; position:absolute; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%;}
.shoot li a .image img{ height:110px; width:auto; max-width:none; position:absolute; right:-5%; top:0; z-index:3; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;}
.shoot li a .image.left img{right:-108%;}
.shoot li a .image.left2 img{right:-70%;}
.shoot li a .image.center img{right:-45%;}
.shoot li a .info{ width:48%;  float:right; padding:0 0 0 7%; text-align:left; margin-bottom:0px; font-size:13px;}
.shoot li a .text{ width:55%; float:right;}
.shoot li a .info img{ height:15px; width:auto; top:50%; margin-top:-7px;}
.shoot li a .info{ }
.shoot li a .text{ font-size:10px; line-height:1.3em;}
.shoot li a .text em{ color:#fff; background:#A79476; margin-top:5px;}
}
/* Include
------------------*/
#Include {
background:#FCFCFC;
background: #fcfcfc;
background: -moz-linear-gradient(top,  #fcfcfc 60%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,#fcfcfc), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top,  #fcfcfc 60%,#ffffff 100%);
background: -o-linear-gradient(top,  #fcfcfc 60%,#ffffff 100%);
background: -ms-linear-gradient(top,  #fcfcfc 60%,#ffffff 100%);
background: linear-gradient(to bottom,  #fcfcfc 60%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ffffff',GradientType=0 );
margin-top:50px;
padding-top:20px;
padding-bottom:20px;
}
#Include .item{ width:100%; float:left; margin:30px 0;}
#Include .item li{ width:14.2%; min-height:100px; display:inline; float:left; padding:70px 0 40px; padding:90px 0 40px\9; *padding:0 0 60px; position:relative; margin-left:-1px; border-right: solid #ccc 1px; color:#777; line-height:18px; *line-height:14px; *font-size:11px; text-align:center;}
#basic #Include .item li{ width:14.2%;}
#premium #Include .item li{ width:12.5%; *font-size:11px; font-size:11px\9; *letter-spacing:0; letter-spacing:0\9;}
#basic #Include .item li.item7{ border-right:none;}
#premium #Include .item li.item8{ border-right:none;}
#Include .item li span{ width:60px; height:62px; *display:none !important; width:90px\9; height:88px\9; display:block; position:absolute; left:50%; top:0; z-index:3; margin-left:-30px; background:url("../img/icon/plan_basic.gif") no-repeat; background-size:60px auto;}
#Include .item li.item1 span{ background-position:0 0;}
#Include .item li.item2 span{ background-position:0 -65px;}
#Include .item li.item3 span{ background-position:0 -130px;}
#Include .item li.item4 span{ background-position:0 -195px;}
#Include .item li.item5 span{ background-position:0 -261px;}
#Include .item li.item6 span{ background-position:0 -329px;}
#Include .item li.item7 span{ background-position:0 -394px;}
#Include .item li.item8 span{ background-position:0 -460px;}
/*IE*/
#Include .item li.item1 span{}
#Include .item li.item2 span{ background-position:0 -88px\9;}
#Include .item li.item3 span{ background-position:0 -176px\9;}
#Include .item li.item4 span{ background-position:0 -264px\9;}
#Include .item li.item5 span{ background-position:0 -352px\9;}
#Include .item li.item6 span{ background-position:0 -440px\9;}
#Include .item li.item7 span{ background-position:0 -528px\9;}
#Include .item li.item8 span{ background-position:0 -616px\9;}
#Include .item li h4{ width:100%; float:left; display:block; letter-spacing:1px; font-size:13px; *font-size:12px; font-size:12px\9; font-weight:bold; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#Include .item li a{ display:block; position:absolute; left:50%; bottom:10px; width:30px; height:30px; font-size:22px; margin-left:-15px; background:#4AACFA; color:#fff; text-align:center; line-height:30px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;}
#Include .item li a em{ display:none; font-size:12px;}
#Include .item li a em br { display:none;}
#Include .item li a:hover{ width:70%; margin-left:-40%; padding:0 5%;}
#Include .item li a:hover em { display:inline; width:90%; text-align:center; float:right;}
/*__option__*/
#Include .option{ width:100%; float:left; padding:1% 0; margin:0 -1px; border: dotted 1px #aaa; background:#fff;}
#Include .option li { width:46%; margin:5px 2%; display:inline; float:left; text-align:left; background:url("../img/common/dot.gif") 50% 50% repeat-x; color:#555;}
#Include .option li.title { display:none;}
#Include .option li.info{ width:96%; background:#fff; font-size:11px;}
#Include .option li span{ display:inline; color:#555;}
#Include .option li .left{background:#fff;}
#Include .option li .right{ padding-left:10px; background:#fff;}
#Include .option li .right2{ float:right; padding:0 82px 0 10px; background:#fff;}
#Include .option li .right a{ display:inline; padding:2px 10px; background:#4AACFA; margin-left:15px; color:#fff;}
#Include .option li .right a:hover { box-shadow:0 0 0 2px #23BEFF inset; color:#23BEFF; background:#fff;}
@media screen and (max-width: 1200px) {
#Include .item li { font-size:11px; letter-spacing:0;}
#premium #Include .item li{ width:20%; margin-bottom:30px;}
}
@media screen and (max-width: 1000px) {
#Include .item li h4 { font-size:11px; letter-spacing:0px;}
/*__option__*/
#Include .option li { width:48%; margin:5px 1%;}
#Include .option li span {letter-spacing:0;}
}
@media screen and (max-width: 900px) {
#Include .item li{ width:19%; min-height:80px; padding:70px 3% 30px; line-height:1.5em; text-align:left; margin-bottom:20px;}
#basic #Include .item li, 
#premium #Include .item li {width:19%;}
#Include .item li.item4 { font-size:12px; border-right:none;}
#Include .item li br{ display:none;}
#Include .item li br.block{ display:block;}
#Include .item li a, 
#Include .item li a:hover{ width:80%; height:24px; left:0%; font-size:11px; margin:0 10%; line-height:24px;}
#Include .item li a:hover{ padding:0; background:#2B71FF;}
#Include .item li a:hover em { display:inline; width:auto; text-align:center; float:none;}
#Include .item li a em{ display:inline; font-size:10px;}
/*__option__*/
#Include .option li span { font-size:11px;}
}
@media screen and (max-width: 720px) {
/*__option__*/
#Include .option li { width:94%; margin:5px 3%;}
}
@media screen and (max-width: 680px) {
#Include { padding:0 3%; border-top: solid 1px #eee;}
#Include .item{ margin:0 0 30px;} 
#Include .item li{ width:28%; min-height:60px; padding:10px 10% 10px 12%; margin-bottom:0; border-bottom: dotted 1px #eee; border-right:dotted 1px #eee;}
#basic #Include .item li, 
#premium #Include .item li {width:28%; margin-bottom:0;}
#Include .item li.item2,
#Include .item li.item4,
#Include .item li.item6,
#Include .item li.item8{ border-right:none;}
#Include .item li.item7{ border-right:dotted 1px #f6f6f6; border-bottom:none;}
#Include .item li.item8 { border-bottom:none;}
#Include .item li span{ width:40px; height:42px; left:4%; top:10px; margin-left:0; background-size:40px auto;}
#Include .item li.item1 span{ background-position:0 1px;}
#Include .item li.item2 span{ background-position:0 -43px;}
#Include .item li.item3 span{ background-position:0 -87px;}
#Include .item li.item4 span{ background-position:0 -131px;}
#Include .item li.item5 span{ background-position:0 -175px;}
#Include .item li.item6 span{ background-position:0 -219px;}
#Include .item li.item7 span{ background-position:0 -263px;}
#Include .item li.item8 span{ background-position:0 -307px;}
#Include .item li a,
#Include .item li a:hover { width:40px; height:28px; padding:6px 0; font-size:11px; margin:0 0 -20px; left:auto; right:5px; bottom:50%;}
#Include .item li a em, 
#Include .item li a:hover em{ font-size:10px; line-height:14px; padding:0; display:inline-block;}
#Include .item li a em br { display:block;}
}
@media screen and (max-width: 520px) {
#Include { margin-top:0;}
#Include .item li{ width:64%; min-height:40px; padding:5px 16% 5px 20%; border-right:none;}
#basic #Include .item li, 
#premium #Include .item li {width:64%;}
#Include .item li.item8, 
#Include .item li.item7, 
#Include .item li.item8 { border-bottom: dotted 1px #eee;}
#Include .item li.item7{ border-right:none;}
#Include .item li span{left:2%; top:5px;}
#Include .item li a,
#Include .item li a:hover { right:0;}
#Include .item li a em, 
#Include .item li a:hover em{ font-size:9px;}
#Include .item li h4 { color:#33A1FA;}
/*__option__*/
#Include .option { padding:0;}
#Include .option li { background: none;}
#Include .option li.title { display: block; width:90%; float:left; margin:0; padding:0 5%; line-height:20px; font-size:10px; background:#f6f6f6; color:#33A1FA;}
#Include .option li .right2{ padding: 0 0 0 10px;}
#Include .option li .right a{ display:none;}
}
/* Other Plans
------------------*/
#OtherPlans { margin:30px 0 150px;}
#OtherPlans ul{ width:100%; float:left; margin-top:20px;}
#OtherPlans ul li{ width:40%; height:160px; 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:160px; 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:120px; 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;}
}