@charset "utf-8";

/*=================================

plan

=================================*/
.title { background-color:#fff; }
.title:before { content:none; }
.title h2 { padding:45px 0 75px; }
.title h2:after,
.title h2:before { bottom:50px; }

#container #main { margin-top:-100px; }

#second_main_visual { position:relative; }
#second_main_visual img { object-position:right 35%; }
#second_main_visual:before { background-image:url(../img/plan/t_plan.png); background-size:210px 92px; background-position:top center;  content:" "; height:92px; position:absolute; top:42%; margin-top:-46px; left:10%; width:210px; z-index:10; }

#plan { display:flex; flex:0 0 100%; flex-wrap:wrap; justify-content:center; padding:0; position:relative; }

#plan .title { flex:0 0 100%; padding:0; position:relative; }

#plan #plan_cont { background-color:#fff; display:flex; flex:0 0 100%; flex-wrap:wrap; justify-content:center; margin:0; padding:0 0 40px 0; position:relative; z-index:2; }
#plan #plan_cont h3 { flex:0 1 auto; padding:0 0 30px; text-align:left; }
#plan #plan_cont h3 span { font-size:200%; line-height:1.6; font-weight:600; }
#plan #plan_cont > ul { display:flex; flex:0 0 100%; flex-wrap:wrap; overflow:hidden; }
#plan #plan_cont > ul > li { display:flex; flex:0 1 100%; justify-content:center; margin-top:40px; padding:50px 30px 30px; position:relative; }
#plan #plan_cont > ul > li:after { background-color:#d9e4f0; /*background:linear-gradient(90deg, rgba(107,239,213,0.1) 0%, rgba(39,127,175,0.1) 50%, rgba(4,69,155,0.1) 100%);*/ content:" "; top:0; right:0; height:50%; position:absolute; width:100%; z-index:1; }

#plan #plan_cont > ul > li:first-child { margin-top:0; }
#plan #plan_cont > ul > li .cont { display:flex; flex:0 1 1180px; justify-content:space-between; position:relative; }

#plan #plan_cont > ul > li .cont .detail { background:#fff; flex:0 0 80%; padding:40px 250px 30px 50px; position:relative; }
#plan #plan_cont > ul > li .cont .detail:before { background:#fff; content:" ";  height:100%; position:absolute; width:100%; right:0; bottom:0; z-index:2; }
#plan #plan_cont > ul > li .cont .detail:after { background:linear-gradient(90deg, rgba(107,239,213,0.1) 0%, rgba(39,127,175,0.1) 50%, rgba(4,69,155,0.1) 100%); content:" ";  height:100%; position:absolute; width:100%; right:-20px; bottom:-20px; z-index:-2; }
#plan #plan_cont > ul > li .cont .detail .caption { position:absolute; top:-18px; left:50px; z-index:2; }
#plan #plan_cont > ul > li .cont .detail .caption span { color:rgba(0,71,156,0.15); font-size:300%; font-weight:600; font-family:'Roboto','sans-serif'; line-height:1; }
#plan #plan_cont > ul > li .cont .detail h4 { align-items:center; display:flex; justify-content:space-between; position:relative; z-index:2; }
#plan #plan_cont > ul > li .cont .detail h4 span:first-child { font-size:232%; font-weight:600; line-height:1.6; }
#plan #plan_cont > ul > li .cont .detail h4 span:nth-child(2) { font-size:93%; display:block; padding:8px 10px; }
#plan #plan_cont > ul > li .cont .detail p { margin-top:20px; position:relative; z-index:2; }
#plan #plan_cont > ul > li .cont .detail p span { font-size:116%; line-height:1.8; }

#plan #plan_cont > ul > li .cont .detail ul.date { display:flex; flex:1; flex-wrap:wrap; position:relative; z-index:2; margin-top:30px; }
#plan #plan_cont > ul > li .cont .detail ul.date > li { display:flex; flex:0 0 100%;  justify-content:start; margin-top:25px; padding-top:25px; }
#plan #plan_cont > ul > li .cont .detail ul.date > li:first-child { margin-top:0; padding-top:0; }
#plan #plan_cont > ul > li .cont .detail ul.date > li.at { border-top:1px dotted #ccc; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl { align-items:start; display:flex; flex:1; justify-content:space-between; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dt { align-items:flex-end; display:flex; flex-wrap:wrap; justify-content:center; flex:0 0 25%; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dt span { display:inline-block; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dt span:first-child { border:1px solid #ccc; flex:0 0 100%; margin-bottom:15px; padding:5px 5px; text-align:center; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dt i:nth-child(2) { font-size:185%; line-height:1; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dt span:nth-child(3) { font-size:200%; font-weight:600; line-height:1; padding:0 0.5vw; }

#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd { align-items:center; display:flex; flex-wrap:wrap; justify-content:center; flex:1; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd span { display:inline-block; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd div:first-child { flex:0 0 35%; margin-bottom:0; text-align:center; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd div:first-child span:first-child { background-color:#eee; font-size:108%; flex:0 1 auto; font-weight:600; padding:5px 10px; text-align:center; }

#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd div:nth-child(2) { align-items:flex-end; display:flex; margin-left:10px; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd div:nth-child(2) > span:first-child { font-family:'Roboto','sans-serif'; font-size:300%; font-weight:900; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd div:nth-child(2) > span:nth-child(2) { font-size:124%; line-height:1.8; padding-left:5px; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd p:nth-child(3) { display:flex; flex: 0 0 100%; justify-content:flex-end; margin-top:10px; text-align:right; }
#plan #plan_cont > ul > li .cont .detail ul.date > li dl dd p:nth-child(3) span { font-size:85%; } 

#plan #plan_cont > ul > li .cont .detail ul.date > li.at dl dt i { color:#D93434; }
#plan #plan_cont > ul > li .cont .detail ul.date > li.at dl dt span:nth-child(3) { color:#D93434; }
#plan #plan_cont > ul > li .cont .detail ul.date > li.at dl dd span:nth-child(2) { color:#D93434; }
#plan #plan_cont > ul > li .cont .detail ul.date > li.mt dl dt i { color:#04459B; }
#plan #plan_cont > ul > li .cont .detail ul.date > li.mt dl dt span:nth-child(3) { color:#04459B; }
#plan #plan_cont > ul > li .cont .detail ul.date > li.mt dl dd span:nth-child(2) { color:#04459B; }

#plan #plan_cont > ul > li .cont .detail .target_lisence { margin-top:30px; position:relative; z-index:2; }
#plan #plan_cont > ul > li .cont .detail .target_lisence dl dt span { font-size:116%; font-weight:600; }
#plan #plan_cont > ul > li .cont .detail .target_lisence dl dd { margin-top:20px; }
#plan #plan_cont > ul > li .cont .detail .target_lisence dl dd > ul { align-items:flex-end; display:flex; justify-content:space-between; }
#plan #plan_cont > ul > li .cont .detail .target_lisence dl dd > ul li { flex:0 0 8%; }
#plan #plan_cont > ul > li .cont .detail .target_lisence dl dd > ul li img { height:auto; width:100%; }
#plan #plan_cont > ul > li .cont .detail .target_lisence dl dd .limit { align-items:center; display:flex; flex: 0 0 100%; justify-content:center }
#plan #plan_cont > ul > li .cont .detail .target_lisence dl dd .limit img { height:auto; width:50px; }
#plan #plan_cont > ul > li .cont .detail .target_lisence dl dd .limit span { flex:0 1 auto; font-size:116%; font-weight:600; padding-left:25px; }

#plan #plan_cont > ul > li .cont .detail .additional_price { margin-top:25px; position:relative; z-index:2; }
#plan #plan_cont > ul > li .cont .detail .additional_price dl { border-right:1px solid #eee; border-bottom:1px solid #eee; border-left:1px solid #eee; display:flex; justify-content:space-between; }
#plan #plan_cont > ul > li .cont .detail .additional_price dl:first-child { border-top:1px solid #eee; }

#plan #plan_cont > ul > li .cont .detail .additional_price dl dt { flex:0 0 50%; padding:15px 30px; text-align:center; }
#plan #plan_cont > ul > li .cont .detail .additional_price dl dt span { font-size:108%; line-height:1.6; }
#plan #plan_cont > ul > li .cont .detail .additional_price dl dd { align-items:center; border-left:1px solid #eee; flex:1; display:flex; justify-content:center; padding:15px 30px; text-align:center; }
#plan #plan_cont > ul > li .cont .detail .additional_price dl dd > span { font-size:116%; }


#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price {}
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl {}
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl dt { align-items:center; display:flex; flex:0 0 30%; justify-content:center; padding:20px 30px; }
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl dd { display:flex; flex-direction:column; flex:0 0 70%; padding:20px 30px; }
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl dd > div { display:flex; justify-content:start; margin-top:10px; }
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl dd > div:first-child { margin-top:0; }
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl dd .month { padding-right:15px; text-align:left; }
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl dd .month span { font-size:108%; }
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl dd .price {}
#plan #plan_cont > ul > li#schedule_plan .cont .detail .additional_price dl dd .price span { font-size:108%; }

#plan #plan_cont > ul > li .cont .detail .notice { flex:0 0 100%; margin-top:15px; position:relative; z-index:2; }
#plan #plan_cont > ul > li .cont .detail .notice span { color:#cc0000; font-size:100%; line-height:1.6;  }

#plan #plan_cont > ul > li .pic { flex:0 1 420px; margin-left:-200px; position:relative; top:30px; z-index:3; }
#plan #plan_cont > ul > li .pic > img { height:360px; object-fit:cover; position:absolute; width:420px; opacity:0; -webkit-transition:opacity 3s; transition: opacity 3s; }
#plan #plan_cont > ul > li .pic > img.lazyloaded { opacity:1; }
#plan #plan_cont > ul > li .pic span { position:absolute; right:0; top:320px; z-index:2; }
#plan #plan_cont > ul > li .pic span img { height:80px; width:auto; }

#plan #plan_cont > ul > li#speed_plan ul.date { display:flex; justify-content:space-between; }
#plan #plan_cont > ul > li#speed_plan ul.date li { flex:0 0 50%; }