/* 全体 ----------------------------------------------- */ @charset "utf-8"; @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); /* HTML Reset Stylesheet */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, fieldset, form, label, legend,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } ol, ul { list-style: none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; vertical-align:baseline; background:transparent; } ins { background-color:#ff9; color:#000; text-decoration:none; } mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } img { 　　　vertical-align: top; 　　　font-size:0; 　　　line-height: 0; } @font-face { font-family: 'font1'; src: url('../fonts/A-OTF-KyokaICAPro-Regular.otf'); } /* HTML Reset Stylesheet */ /******　共通　********/ /* IE7でpadding指定 */ *:first-child+html body { padding-left: 1px; } /* IE6以下でpadding指定 */ *html body { padding-left: 1px; } .clear-both { clear: both; float: none; } .float-left { float: left; } .float-right { float: right; } .cnt_icon{vertical-align:middle; padding-right:5px;} .com_table{ border: 1px solid #069; border-collapse:collapse; text-align:left; margin:0 0 20px 0px; background:#FFF; } .com_table th{ border: 1px solid #069; border-collapse:collapse; background-color: #09C; font-weight:bold; text-align:center; vertical-align:middle; color:#FFFFFF; padding:10px; } .com_table td{ border: 1px solid #069; border-collapse:collapse; padding:10px; vertical-align:middle; } /***************･マージン**************/ .mgt5 { margin-top: 5px; } .mgt10 { margin-top: 10px; } .mgt15 { margin-top: 15px; } .mgt20 { margin-top: 20px; } .mgt30{ margin-top: 30px; } .mgt50{ margin-top: 50px; } .mgt70{ margin-top: 70px; } .mgt80{ margin-top: 80px; } .mgt100{ margin-top: 1000px; } .mgb5 { margin-bottom: 5px; } .mgb10 { margin-bottom: 10px; } .mgb20 { margin-bottom: 20px; } .mgb30 { margin-bottom: 30px; } .mgb60 { margin-bottom: 60px; } .mgb100 { margin-bottom: 100px; } .mgb120 { margin-bottom: 120px; } .mgb300 { margin-bottom: 300px; } .mgr5 { margin-right: 5px; } .mgr10 { margin-right: 10px; } .mgr20 { margin-right: 20px; } .mgr30 { margin-right: 30px; } .mgr40 { margin-right: 40px; } .mgl5 { margin-left: 5px; } .mgl10 { margin-left: 10px; } .mgl15 { margin-left: 15px; } .mgl20 { margin-left: 20px; } .mgl30 { margin-left: 30px; } .mgl40 { margin-left: 40px; } .mgl50 { margin-left: 50px; } .mgl100 { margin-left: 100px; } .mgl130 { margin-left: 130px; } .mgtr5 { margin-top: 5px; margin-right: 5px; } .mglr20{ margin-left: 20px; margin-right: 20px; } .mgtb10 { margin-top: 10px; margin-bottom: 10px; } /*************** テキスト **************/ .center{text-align:center;} .strong{font-weight:bold;} .strong800{font-weight:800;} .line_hi3{line-height:3;} .line_hi25{line-height:2.5;} .line_hi15{line-height:1.5;} .tx_13{font-size:34px;} .tx_12{font-size:32px;} .tx_11{font-size:30px;} .tx_10{font-size:28px;} .tx_9{font-size:26px;} .tx_8{font-size:24px;} .tx_7{font-size:22px;} .tx_6{font-size:20px;} .tx_5{font-size:18px;} .tx_4{font-size:16px;} .tx_3{font-size:15px;} .tx_2{font-size:14px;} .tx_1{font-size:12px;} .tx_0{font-size:10px;} .red{color:#FF0000;} .green{ color:#006600;} .purple{ color:#90C;} .blue{ color:#0066ff} .black{ color:#000000} .pink{color:#FF0066;} .white{ color:#FFF;} .tx_pink_0{font-size:10px; font-weight:bold; color:#FF0066;} .tx_pink_1{font-size:12px; font-weight:bold; color:#FF0066;} .tx_pink_2{font-size:14px; font-weight:bold; color:#FF0066;} .tx_pink_3{font-size:15px; font-weight:bold; color:#FF0066;} .tx_pink_4{font-size:16px; font-weight:bold; color:#FF0066;} .tx_pink_5{font-size:18px; font-weight:bold; color:#FF0066;} .tx_pink_6{font-size:20px; font-weight:bold; color:#FF0066;} .tx_pink_7{font-size:22px; font-weight:bold; color:#FF0066;} .tx_pink_8{font-size:24px; font-weight:bold; color:#FF0066;} .tx_pink_9{font-size:26px; font-weight:bold; color:#FF0066;} .tx_pink_10{font-size:28px; font-weight:bold; color:#FF0066;} .tx_pink_11{font-size:30px; font-weight:bold; color:#FF0066;} .tx_pink_12{font-size:32px; font-weight:bold; color:#FF0066;} .tx_blue_0{font-size:10px; font-weight:bold; color:#0066ff;} .tx_blue_1{font-size:12px; font-weight:bold; color:#0066ff;} .tx_blue_2{font-size:14px; font-weight:bold; color:#0066ff;} .tx_blue_3{font-size:15px; font-weight:bold; color:#0066ff;} .tx_blue_4{font-size:16px; font-weight:bold; color:#0066ff;} .tx_blue_5{font-size:18px; font-weight:bold; color:#0066ff;} .tx_blue_6{font-size:20px; font-weight:bold; color:#0066ff;} .tx_blue_7{font-size:22px; font-weight:bold; color:#0066ff;} .tx_blue_8{font-size:24px; font-weight:bold; color:#0066ff;} .tx_blue_9{font-size:26px; font-weight:bold; color:#0066ff;} .tx_blue_10{font-size:28px; font-weight:bold; color:#0066ff;} .tx_blue_11{font-size:30px; font-weight:bold; color:#0066ff;} .tx_blue_12{font-size:32px; font-weight:bold; color:#0066ff;} .tx_yellow_0{font-size:10px; font-weight:bold; color:#8b7417; } .tx_yellow_1{font-size:12px; font-weight:bold; color:#8b7417; } .tx_yellow_2{font-size:14px; font-weight:bold; color:#8b7417; } .tx_yellow_3{font-size:15px; font-weight:bold; color:#8b7417; } .tx_yellow_4{font-size:16px; font-weight:bold; color:#8b7417; } .tx_yellow_5{font-size:18px; font-weight:bold; color:#8b7417; } .tx_yellow_6{font-size:20px; font-weight:bold; color:#8b7417; } .tx_yellow_7{font-size:22px; font-weight:bold; color:#8b7417; } .tx_yellow_8{font-size:24px; font-weight:bold; color:#8b7417; } .tx_yellow_9{font-size:26px; font-weight:bold; color:#8b7417; } .tx_yellow_10{font-size:28px; font-weight:bold; color:#8b7417; } .tx_yellow_11{font-size:30px; font-weight:bold; color:#8b7417; } .tx_yellow_12{font-size:32px; font-weight:bold; color:#8b7417; } .tx_pink_line_1{ font-size:12px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_2{ font-size:14px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_3{ font-size:16px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_4{ font-size:18px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_5{ font-size:20px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_6{ font-size:22px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_7{ font-size:24px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_8{ font-size:26px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_9{ font-size:28px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_10{ font-size:30px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_11{ font-size:32px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_pink_line_12{ font-size:34px; font-weight:bold; color:#FF0066; border-bottom:1px solid #FF0066;} .tx_blue_line_1{ font-size:12px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_2{ font-size:14px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_3{ font-size:16px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_4{ font-size:18px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_5{ font-size:20px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_6{ font-size:22px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_7{ font-size:24px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_8{ font-size:26px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_9{ font-size:28px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_10{ font-size:30px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .tx_blue_line_11{ font-size:32px; font-weight:bold; color:#0066ff; border-bottom:1px solid #0066ff;} .txle_yellow_1{font-size:12px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_2{font-size:14px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_3{font-size:16px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_4{font-size:18px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_5{font-size:20px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_6{font-size:22px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_7{font-size:24px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_8{font-size:26px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_9{font-size:28px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_10{font-size:30px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .txle_yellow_11{font-size:32px; font-weight:bold; color:#8b7417; border-bottom: 1px solid #8b7417;} .green_line{ color:#006600;font-weight:bold; border-bottom:2px solid #006600;} .gray_line{ border-bottom:1px dotted #666666;} .black_line{border-bottom:1px solid #000000;} .yellow_line{border-bottom:1px solid #8b7417;} .blue_line{border-bottom:1px solid #0066ff;} .red_line{border-bottom:1px solid #FF0000;} .pink_line{ border-bottom:1px solid #FF0066;} .txbg_pink{font-weight:bold; background-color:#FFCCFF; } .txbg_blue{font-weight:bold; background-color:#ccffff; } .txbg_yellow{font-weight:bold; background-color:#fcfe7c; } .micho{font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;} .wf-sawarabimincho { font-family: 'Sawarabi Mincho', sans-serif; } /******　共通ここまで　********/ body { color:#000; font-size : 1.2em; line-height: 2; font-family:'Century Gothic','Futura','Noto Sans Japanese','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif; background-color:#fff; /*background:url(../img/h_bg.jpg) repeat-x center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-attachment:fixed;*/ } a img { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } a:hover img { opacity: 0.6; filter: alpha(opacity=60); } a { color:#ff1d97; } a:hover { color: #ff0000; } h1 { font-size : 1.8em; line-height: 1.6em; font-weight:bold; } h2 { font-size : 2em; line-height: 1.8; } h3 { font-size : 1.7em; line-height: 1.8; } hr { border:none; border-bottom:2px dashed #e0a640; height:1px; margin: 20px 0 20px 0; } .clearfix { zoom: 1; } .clearfix:after { content: ""; display: block; clear: both; } /* 画像 ----------------------------------------------- */ img.top { width: 45%; height: auto; position: relative; padding: 0px 0 0px 0; margin: 0 auto 0; top: 0px; display: block; overflow: hidden; transition: 1.2s; background-image: url(img/title-pc_1.png); } img.top2 { display:none; } img.alignleft { float: left; margin: 0; width:50%; height:auto; transition: 1.2s; } img.alignright { display: inline; float: right; margin: 0 0 1em 1em; max-width:400px; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px; transition: 1.2s; } img.full { width:100%; height:auto; transition: 1.2s; } img.full2 { transition: 2s; } img.full3 { width:88%; height:auto; min-width:600px; transition: 1.2s; } img.full5 { display: inline; height:auto; margin:0 auto 0 20px; width:40%; transition: 1.2s; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px; } /* ヘッダー ----------------------------------------------- */ header { display: block; margin: 0; padding-bottom:30px; background:url(../img/bg_1.jpg) repeat top center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } header .count-bg { background:url(../img/bg_green80.png) repeat; height:95px; width: 100%; margin:0; } header .obi_tx{ padding:10px 0 0 ; text-align:center; color:#FFF; font-size:1.4em; line-height:1.5; font-weight:bold; } /* タイマー ----------------------------------------------- */ #CDT .day{ font-size: 40px; color:#f25787; font-weight:bold; padding:0; margin:0; } #CDT .hour,#CDT .min{ font-size: 40px; color:#f25787; padding:0; font-weight:bold; margin:0; } #CDT .sec,#CDT .milli{ font-size: 20px; color:#f25787; font-weight:bold; padding:0; margin:0; } #CDT{ font-size: 20px; color:#f25787; font-weight:bold; padding:10px 0 0 0; } /* トップページ ----------------------------------------------- */ #container { display: block; position: relative; } #primary { width:1000px; margin:0 auto; padding:0 50px 50px; } .content { width: 100%; margin:0; padding:0; background: url(../img/bg1.jpg) no-repeat center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-attachment:fixed; z-index:1000; } .entry { clear:both; margin: 0 auto; width: 750px; padding:0 75px 30px 75px; border: 1px solid #CCC; background:#FFF url(../img/entry-bg.jpg) no-repeat top; -webkit-background-size:100%; -moz-background-size:100%; -o-background-size:100%; background-size:100%; } .entry img { width:100%; transition: 1.2s; } .entry img.title2 { width:900px; margin-left:-150px; margin-top:-50px; transition: 1.2s; } .entry p { line-height:1.6; margin-bottom:0; } form { margin: auto; margin-top:10px; text-align:center: } label { display:none; } input.touroku_mail { width:90%; max-width:600px; height:50px; padding:10px; font-size:30px; border:6px solid #ff1f6a; text-align:center; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; border-radius:10px; } #confirm { background: url(../img/botan_1.png) no-repeat top; width:95%; max-width:678px; margin:20px 0 20px 0; height:auto; } #confirm:hover {background: url(../img/botan_1.png) no-repeat top;} #confirm, #confirm:hover { transition-property:background; transition-duration:0.5s; transition-timing-function:ease; -webkit-background-size:100% auto; -moz-background-size:100% auto; -o-background-size:100% auto; background-size:100% auto; } .updown { -webkit-animation-name:updown; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; /*-webkit-animation-direction:alternate;*/ -webkit-animation-timing-function:ease; -moz-animation-name:updown; -moz-animation-duration:2s; -moz-animation-iteration-count:infinite; /*-moz-animation-direction:alternate;*/ -moz-animation-timing-function:ease; } @-webkit-keyframes updown { 0% {-webkit-transform:translate(0, 0);} 50% {-webkit-transform:translate(0, -10px);} 100% {-webkit-transform:translate(0, 0);} } @-moz-keyframes updown { 0% {-moz-transform:translate(0, 0);} 50% {-moz-transform:translate(0, -10px);} 100% {-moz-transform:translate(0, 0);} } .sec-title { margin: auto; margin-top:0px; margin-bottom:30px; max-width:1050px; padding:30px 25px 20px 25px; border: 8px solid #ff64a0; border-color: #99ceff #73c7f2 #59a8e0 #73bbf2; background: url(../img/bg-logo.png) no-repeat bottom left; color:#FFF; } h2.t-title { display:inline-block; margin:auto; font-family: 'Times New Roman','ヒラギノ明朝 ProN W6', 'HiraMinProN-W6', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif; font-size:2em; line-height: 1.3; font-weight:bold; color:#FFF; -webkit-text-shadow:0 0 0 rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.5); -moz-text-shadow:0 0 0 rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.5); -o-text-shadow:0 0 0 rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.5); text-shadow:0 0 0 rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.5); } h3.subhead2 { display:block; border-bottom:2px dotted #ff3e82; padding:5px 0 10px 47px; margin-bottom:15px; background: url(../img/ya.png) no-repeat 0 12px; font-size: 2.4em; line-height: 1.2; color:#ff3e82; font-weight:bold; } h3.subhead3 { display:block; border-bottom:2px dotted #bbab21; padding:5px 0 10px ; margin:0 0 50px; font-size: 2em; line-height: 1.2; color:#bbab21; font-weight:bold; } h2.s_tx_orange{ font-size: 34px; color: #705B00; font-weight:bold; line-height:1.6em; text-align: center; background:url(../img/bar.png) center bottom no-repeat; } .white-cover,.sky-cover,.shadow-cover,.info-cover { width: 100%; margin:0; } .white-cover { background:#FFF; } .sky-cover { background:#effeff; -webkit-background-size:100%; -moz-background-size:100%; -o-background-size:100%; background-size:100%; } .love-cover { background:#fef5f5; -webkit-background-size:100%; -moz-background-size:100%; -o-background-size:100%; background-size:100%; } .white-cover { background:#fff; } .yl-cover { background:#ffffed; } .ylbg-cover { background:#FFF url(../img/bg-ptn-yl.png) repeat; } .ylbgdt-cover { background:#FFF url(../img/bg_area02.png) repeat; } .shadow-cover { background:#FFF url(../img/bg-ptn-gizagiza.png) repeat; } .tokuten-cover { background:#FFF url(../img/bg_tokuten.gif) repeat; } .info-cover { background:#ffffef url("../img/midashi_bg_1.jpg") repeat top center; } .infoyl-cover { background:#74b404; padding:20px 0; } .infoyl-cover p{ color:#fff;} .info-cover h1{ padding:40px 0 ; color:#524b14;} .info-honbun { margin: auto; width: 800px; padding: 50px 50px 35px 50px; background:url(../img/bg-white.png) repeat; } .info-honbun2 { margin: auto; width: 800px; padding: 0px 50px ; } .honbun, .honbun2 { margin: auto; width: 1000px; } .honbun { padding: 10px 50px 0 50px;} .honbun2 { padding: 40px 50px 50px 50px; background:url(../img/bg-white.png) repeat; } li.b_check{ background: url(../../img/sub_blue_accept.png) no-repeat 0 7px; padding: 0 0 0 32px; list-style: none; color:#128dc7; margin-bottom: 20px;} li.p_check{ background: url(../../img/sub_pink_accept.png) no-repeat 0 10px; padding: 0 0 0 32px; list-style: none; margin-bottom: 20px;} li.check { background: url(../img/ch_02.png) no-repeat 0 5px; padding: 0 0 0 25px; list-style: none; font-size: 1.2em; line-height: 1.2; color:#1fb1d0; font-weight:bold; margin-bottom: 20px; } li.ya2 { background: url(../img/ya4.png) no-repeat 0 8px; padding: 0 0 0 25px; list-style: none; font-size: 1.4em; line-height: 1.5; color:#33cc00; font-weight:bold; margin-bottom: 15px; } .waku { width: 100%; height: auto; margin:0 0 50px ; background:url(../img/tokuten_bg.png) repeat; padding:10px 40px 40px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border:1px solid #c4b82d; } .waku2 { padding:20px 5% 15px 5%; border: 1px solid #bbab21; /*-webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px;*/ background:url(../img/bg-white.png) repeat; margin: 0 ; } .waku3 { padding:20px 5% ; border: 2px solid #2d9ce2; background-color:#FFF } .waku3 p{ font-size:22px;} #voice1 {background: url(../img/voice1.png) no-repeat top left;} #voice2 {background: url(../img/voice2.png) no-repeat top left;} #voice3 {background: url(../img/voice3.png) no-repeat top left;} #voice4 {background: url(../img/voice4.png) no-repeat top left;} #voice5 {background: url(../img/voice5.png) no-repeat top left;} #voice6 {background: url(../img/voice6.png) no-repeat top left;} #voice7 {background: url(../img/voice7.png) no-repeat top left;} #voice1,#voice2,#voice3,#voice4,#voice5,#voice6,#voice7 { display:block; margin-bottom: 35px; padding: 33px 0 10px 10px; -webkit-background-size:100% auto; -moz-background-size:100% auto; -o-background-size:100% auto; background-size:100% auto; font-size: 1.1em; } #voice1 p,#voice2 p,#voice3 p,#voice4 p,#voice5 p,#voice6 p,#voice7 p {margin-bottom:1em;} #voice1 h3,#voice2 h3,#voice3 h3,#voice4 h3,#voice5 h3,#voice6 h3,#voice7 h3 { padding: 25px 0 20px 0; margin-bottom: 10px; font-size: 2.4em; line-height:1.3; font-weight:bold; color:#444; } #voice1 img,#voice2 img,#voice3 img,#voice4 img,#voice5 img,#voice6 img,#voice7 img { float:right; width:320px; height:auto; margin-left:15px; } .qa-q { border-top: 1px solid #c69c00; background: url(../img/q-min.png) no-repeat 0 6px; padding: 15px 10px 20px 55px; color:#c69c00; font-weight: bold; } .qa-a { background: url(../img/a-min.png) no-repeat top left; padding: 15px 10px 30px 55px; margin-bottom: 25px; color:#333; font-size: 1.1em; line-height:1.5; } .qa-a > .pink {font-weight:bold;} #profile h3 { display:block; font-size : 2.4em; line-height: 1.4; color:#c4b407; text-align:center; padding-bottom:10px; margin-bottom:30px; border-bottom:1px solid #c4b407; } #profile h4 { font-size : 1.8em; line-height: 1.4; color:#ff3e82; } #profile dl dt { float:right; width:40%; padding:0 0 0 3%; } #profile dl dt img { width:100%; } #profile dl dd { line-height: 1.8; } table.info { width:100%; } table.info td,table.info th { border-bottom:1px solid #CCC; padding:15px; } table.info th { width:25%; text-align:center; } #box_cnt_1{ width:90%; height:100%; background:#fff; border:2px solid #909090; border-radius:0px; margin:0 auto 30px; padding:10px; } #box_cnt_1 .inbox{padding:0px; background:#FFF; border:2px solid #23b9d9; text-align:left;} #box_cnt_1 h2{ background-color:#0b78b7; color:#FFF; font-size:28px; text-align:center; padding:10px; margin:0 0 50px;} #box_cnt_1 li{ list-style:none; margin:0 20px 30px 30px; background:url(../img/ch_02.png) no-repeat ; padding:0 10px 20px ; border-bottom:1px dotted #7c7c7c;} #box_cnt_1 p{ margin:0 0 0 40px; color:#0b78b7; font-size:20px;} #box_cnt_2{ width:95%; height:100%; background-color: #FFF6DC; border:1px solid #dabb10; border-radius:0px; margin:0 auto 30px; padding:20px; } #box_cnt_2 h2{ background-color:#a19001; color:#FFF; font-size:26px; text-align:center; padding:10px; margin:0 0 20px;} #box_cnt_2 .inbox{padding:20px; background:#f9f3d4; text-align:left;} #box_cnt_3{ width:100%; height:100%; background-color: rgba(255,255,255,.7); opacity: 8; border:2px solid #1B3E7D; border-radius:0px; margin:0 auto 30px; } #box_cnt_3 h1{ background-color:#1B3E7D; color:#FFF; font-size:26px; text-align:left; padding:0.3em 0.3em 0.3em 0.8em;} #box_cnt_3 .inbox{padding:20px; background:#fff; opacity: 8; text-align:left;} #box_cnt_3 p{ margin-left: 1em; margin-right: 1em; margin-top: 0.8em; text-align: left; font-size:1.2em; } #box_cnt_4{ width:100%; height:100%; background-color: rgba(255,255,255,.7); opacity: 8; border:1px solid #ff3a97; border-radius:0px; margin:0 auto 30px; } #box_cnt_3 h1{ background-color:#ff3a97; color:#FFF; font-size:26px; text-align:left; padding:0.3em 0.3em 0.3em 0.8em;} #box_cnt_3 .inbox{padding:2em; background:#fff; opacity: 8; text-align:left;} #box_cnt_3 p{ margin-left: 1em; margin-right: 1em; margin-top: 0.8em; text-align: left; font-size:1.2em; } .coin li{background:url(../img/icon_d.png) no-repeat left center #fff6ee;list-style:none; border:#ab9503 1px solid; margin:0 0 30px 0px;padding:20px 0 ;} .coin p{ font-weight:bold; padding:2px 0 0 80px; font-size:22px;} /****** 横並びBOX ******/ *, *:before, *:after { box-sizing: border-box; } .col_2{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_2 > div{ width: 46%; padding: 10px; margin:0 0 30px 20px; } .b_box{ background-color:#e7f7ff; border:1px solid #0b76a7; } .r_box{ background-color:#ffeef8; border:1px solid #e80e89; } @media screen and (max-width: 960px) { .col_2 > div{ width: 100%; margin:0 0 30px 0px; } } .col_3{ width: 100%; display: flex; display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -ms-flex-wrap: wrap; /* IE10 */ } .col_3 > div{ width: 30%; background-color:#FFF; padding: 10px; margin:0 0 20px 20px; border:#37b34a 2px solid; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; border-radius:10px; text-align:center; } @media screen and (max-width: 960px) { .col_3 > div{ width: 50%; margin:0 0 20px 0px; } } @media screen and (max-width: 480px) { .col_3 > div{ width: 100%; margin:0 0 20px 0px; } } /****** プログラム体験談 ******/ .lp-block { position: relative; margin: 0 auto; width: 1000px; height:3150px; text-align: left; } #box1{ position:absolute; left:300px; background: #fff; width: 600px; margin-bottom: 20px; border: 1px solid #e6248d; padding:20px; } #box1:before { content: ''; top: 10px; position: absolute; left: -11px; border-top: 5px solid transparent; border-right: 10px solid #e6248d; border-bottom: 5px solid transparent; } .photo1{ position:absolute; left:100px; } #box2{ position:absolute; left:70px; top:450px; background: #fff; width: 600px; margin-bottom: 20px; border: 1px solid #0e9ec8; padding:20px; } #box2:before { content: ''; top: 10px; position: absolute; right: -11px; border-top: 5px solid transparent; border-left: 10px solid #0e9ec8; border-bottom: 5px solid transparent; } .photo2{ position:absolute; left:700px; top:450px;} #box3{ position:absolute; left:300px; top:850px; background: #fff; width: 600px; margin-bottom: 20px; border: 1px solid #ccbf1f; padding:20px; } #box3:before { content: ''; top: 10px; position: absolute; left: -11px; border-top: 5px solid transparent; border-right: 10px solid #ccbf1f; border-bottom: 5px solid transparent; } .photo3{ position:absolute; left:100px; top:850px;} #box4{ position:absolute; left:70px; top:1280px; background: #fff; width: 600px; margin-bottom: 20px; border: 1px solid #7e55bf; padding:20px; } #box4:before { content: ''; top: 10px; position: absolute; right: -11px; border-top: 5px solid transparent; border-left: 10px solid #7e55bf; border-bottom: 5px solid transparent; } .photo4{ position:absolute; left:700px; top:1280px;} #box5{ position:absolute; left:300px; top:1900px; background: #fff; width: 600px; margin-bottom: 20px; border: 1px solid #e6248d; padding:20px; } #box5:before { content: ''; top: 10px; position: absolute; left: -11px; border-top: 5px solid transparent; border-right: 10px solid #e6248d; border-bottom: 5px solid transparent; } .photo5{ position:absolute; left:100px; top:1900px;} #box6{ position:absolute; left:70px; top:2200px; background: #fff; width: 600px; margin-bottom: 20px; border: 1px solid #27A096; padding:20px; } #box6:before { content: ''; top: 10px; position: absolute; right: -11px; border-top: 5px solid transparent; border-left: 10px solid #27A096; border-bottom: 5px solid transparent; } .photo6{ position:absolute; left:700px; top:2200px;} #box7{ position:absolute; left:300px; top:2620px; background: #fff; width: 600px; margin-bottom: 20px; border: 1px solid #ED9A00; padding:20px; } #box7:before { content: ''; top: 10px; position: absolute; left: -11px; border-top: 5px solid transparent; border-right: 10px solid #ED9A00; border-bottom: 5px solid transparent; } .photo7{ position:absolute; left:100px; top:2620px;} /* フォント ----------------------------------------------- */ .mincho { font-family: 'Times New Roman','ヒラギノ明朝 ProN W6', 'HiraMinProN-W6', 'HG明朝E', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif; -webkit-text-shadow:0 0 15px #FFF, 0 0 15px #FFF; -moz-text-shadow:0 0 15px #FFF, 0 0 15px #FFF; -o-text-shadow:0 0 15px #FFF, 0 0 15px #FFF; text-shadow:0 0 15px #FFF, 0 0 15px #FFF; } .p12,.p14,.p16,.p20,.b12,.b14,.b16,.b20 {line-height: 1.6;} .p24,.p30,.b24,.b30 {line-height: 1.4;} .p32,.p36,.b32,.b36 {line-height: 1.3;} .p12{font-size: 1.2em;} .p14{font-size: 1.4em;} .p16{font-size: 1.6em;} .p20{font-size: 2.0em;} .p24{font-size: 2.4em;} .p30{font-size: 3.0em;} .p32{font-size: 3.2em;} .p36{font-size: 3.6em;} .b12{font-size: 1.2em;font-weight:bold;} .b14{font-size: 1.4em;font-weight:bold;} .b16{font-size: 1.6em;font-weight:bold;} .b20{font-size: 2.0em;font-weight:bold;} .b24{font-size: 2.4em;font-weight:bold;} .b30{font-size: 3.0em;font-weight:bold;} .b32{font-size: 3.2em;font-weight:bold;} .b36{font-size: 3.6em;font-weight:bold;} .yellow {color:#f7d946;} .pink {color:#ff3e82;} .pink2 {color:#ff64a0;} .orange {color:#F473C9;} .blue {color:#1fb1d0;} .green {color:#349a00;} .purple {color:#a13cb7;} .mkr { display:inline; background: url(../img/marker.png)repeat-x bottom; } .m-10 {margin-bottom:-12px;} .m-20 {margin-bottom:-20px;} .m0 {margin-bottom:0px;} .m10 {margin-bottom:10px;} .m20 {margin-bottom:20px;} .m30 {margin-bottom:30px;} .m40 {margin-bottom:40px;} .m50 {margin-bottom:50px;} .m60 {margin-bottom:60px;} .m70 {margin-bottom:70px;} .m80 {margin-bottom:80px;} .m100 {margin-bottom:100px;} .t-30 {margin-top:-50px;} .t10 {margin-top:10px;} .t20 {margin-top:20px;} .t30 {margin-top:30px;} .t40 {margin-top:40px;} .t50 {margin-top:50px;} .t60 {margin-top:60px;} .t70 {margin-top:70px;} .t80 {margin-top:80px;} .t100 {margin-top:100px;} br.pc {display:inline;} img.pc {display:block;} img.sp, img.full4 {display:none;} /* フッター ----------------------------------------------- */ footer { clear:both; font-size: 12px; color:#FFF; padding: 10px 0; text-align: center; background: #838321; border-top: 2px solid #AB0B61; } footer a { color:#FFF; } .mv1{ opacity: 0; transform: translate(0,60px); -webkit-transform: translate(0,60px); } .mv2{ opacity: 1.0; transform: translate(0,0); -webkit-transform: translate(0,0); } /*media Queries ----------------------------------------------------*/ @media only screen and (max-width: 640px) { body { font-size: 0.9em; line-height:1.8; background-color:#fff; /*background: url(../img/bg4sp2.jpg) repeat-y top; -webkit-background-size:100%; -moz-background-size:100%; -o-background-size:100%; background-size:100%; background-attachment:fixed;*/ } .sp_center{ text-align:center;} h1 { font-size : 1.6em; line-height: 1.4em; padding:0 15px; } h2 { font-size : 1.6em; } h3 { font-size : 1.4em; } img.top { width: 100%; padding: 0 ; margin:0 auto; top:0px; } img.full { padding-top:0px; } img.full2 { width:100%; height:auto; margin:auto; } img.full4 { display: block; width:90%; transition: 1.2s; } img.full5 { display: block; height:auto; margin:0 auto 40px; width:75%; min-width:100%; transition: 1.2s; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; border-radius:10px; } img.sp_small{ width:4%;} img.alignleft { float: none; margin: 0; width:100%; height:auto; } img.alignright { display:block; float:none; width:100%; height:auto; margin: 0 auto 0.5em ; -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; border-radius:10px; } header { display: block; margin: 0; background: url(../img/bg4sp2_1.jpg) no-repeat top; -webkit-background-size:100%; -moz-background-size:100%; -o-background-size:100%; background-size:100%; } header .count-bg{ height:53px;} header .obi_tx{ padding:10px 0 0; font-size:0.9em; line-height:1.5; letter-spacing: -0.1em; } header .p12{font-size: 16px;} /* タイマー ----------------------------------------------- */ #CDT .day{ font-size: 18px; color:#f25787; font-weight:bold; padding:0; margin:0; } #CDT .hour,#CDT .min{ font-size: 18px; color:#f25787; padding:0; font-weight:bold; margin:0; } #CDT .sec,#CDT .milli{ font-size: 14px; color:#f25787; font-weight:bold; padding:0; margin:0; } #CDT{ font-size: 18px; color:#f25787; font-weight:bold; padding:10px 0 0 0; } .content { background:#fff; -webkit-background-size:100%; -moz-background-size:100%; -o-background-size:100%; background-size:100%; background-attachment:fixed; } h3.subhead3 { display:block; border-bottom:2px dotted #bbab21; padding:5px 0 10px ; margin-bottom:15px; font-size: 1.3em; line-height: 1.5; color:#bbab21; font-weight:bold; } .entry { width: 92%; padding:10px 3% 20px 3%; } .entry p { font-size:0.8em } .entry p.b14 br { display:none; } .entry img { width:108%; margin-left:-4%; } .entry img.full4 { display: block; width:90%; } .entry img.title2 { display:none; } input.touroku_mail { width:95%; height:40px; padding:2px; font-size:20px; border:3px solid #ff1f6a; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px; } .white-cover,.sky-cover { padding-bottom:0px; } .shadow-cover { padding:10px 0 20px 0; } .info-cover { padding: 0 0; background-color:#fffde3; } .honbun, .honbun2,.info-honbun .info-honbun2{ font-size:13px; } .honbun { width: 94%; padding: 5px 2% 0 2%;} .honbun2 { width: 88%; padding: 20px 4% 20px 4%; } .info-honbun { width: 88%; padding: 20px 4% 15px 4%; } .info-honbun2 { width: 88%; padding: 0px 4% 0px 4%; } .sec-title { width:88%; margin-top:0px; margin-bottom:10px; padding:12px 10px 8px 10px; border-color: #99ceff #73c7f2 #59a8e0 #73bbf2; } .sec-title > .p16, .sec-title > .p20 { line-height:1.3; } h2.t-title { font-size:1.6em; } h2.t-title br { display: none; } h3.subhead2 { padding:3px 0 5px 36px; margin-bottom:10px; background-position:0 0; -webkit-background-size:28px auto; -moz-background-size:28px auto; -o-background-size:28px auto; background-size:28px auto; font-size: 1.4em; line-height: 1.3; } li.ya,li.ya2 { padding: 5px 0 0 16px; -webkit-background-size:10px auto; -moz-background-size:10px auto; -o-background-size:10px auto; background-size:10px auto; background-position:0 9px; font-size: 1.2em; line-height: 1.2; margin-bottom: 10px; } .waku { padding:15px 4% 5px 4%; width:100%; } .waku3 p{ font-size:20px;} #box_cnt_1{ width:100%; padding:10px; } #box_cnt_1 h2{ font-size:1.3em; padding:10px; margin:0 0 30px;} #box_cnt_1 li{ list-style:none; margin:0 0px 30px 0px; background:url(../img/ch_02s.png) no-repeat ; padding:0 20px 15px; border-bottom:1px dotted #7c7c7c;} #box_cnt_1 p{ margin:0 0 0 20px; font-size:0.9em; line-height:1.7;} #box_cnt_2 { width:100%; padding:10px;} #box_cnt_2 h2{ font-size:1.3em; padding:10px; margin:0 0 15px;} .coin li{ margin:0 20px 30px 0px; padding:20px 0 ; width:100%;} .coin p{ padding:2px 10px 0 70px; font-size:1em; } #box_cnt_3{ width:100%; padding:10px; } #box_cnt_3 h1{ font-size:1.3em; padding:10px; margin:0 0 30px;} #box_cnt_3 p{ font-size:0.9em; line-height:1.7;} #voice1,#voice2,#voice3,#voice4,#voice5,#voice6,#voice7 { margin-bottom: 20px; padding: 20px 0 10px 0; font-size: 1em; -webkit-background-size:150% auto; -moz-background-size:150% auto; -o-background-size:150% auto; background-size:150% auto; } #voice1 h3,#voice2 h3,#voice3 h3,#voice4 h3,#voice5 h3,#voice6 h3,#voice7 h3 { padding: 5px 0 10px 0; margin-bottom: 0px; font-size: 1.5em; line-height:1.3; } #voice1 img,#voice2 img,#voice3 img,#voice4 img,#voice5 img,#voice6 img,#voice7 img { width:36%; height:auto; margin-left:10px; } /** テーブル **/ .com_table{ border: 1px solid #2d9ce2; width: 100%; } .com_table th { display: block; border-top: none; border-bottom: none; border:none; font-weight:bold; text-align:center; font-size:1.4em; vertical-align:middle; color:#FFFFFF; padding:13px 0; width: 100%; } .com_table td{ display: block; text-align: left; line-height:1.8; padding:10px; width: 100%; border:none; } /****** お客様の声 ******/ .koe2 div{background: no-repeat left center #fff; opacity: 0.8; list-style:none; border:#DA9C4A 1px solid; margin:0 0 30px 0px; padding:1em; font-size: 1em; color: #6A3500; line-height: 1.4em; } /****** プログラム体験談 ******/ .lp-block { position: static; margin: 0 auto; width:100%; height:auto; text-align: left; } #box1{ background: #fff; width: 100%; border: 1px solid #e6248d; padding:20px; margin:0 auto 50px; position:static; } #box1:before { content: ''; top: 0px; position: static; left: 0px; margin:0 auto; border-top:0px solid transparent; border-right: 0px solid #e6248d; border-bottom: 0px solid transparent; } .photo1{ position: static; left:0px; margin:0 auto; text-align:center; } #box2{ position:static; left:0px; top:0px; background: #fff; width: 100%; margin:0 auto 50px; border: 1px solid #0e9ec8; padding:20px; } #box2:before { content: ''; top: 0px; position: static; right: 0; border-top: 0px solid transparent; border-left: 0px solid #0e9ec8; border-bottom: 0px solid transparent; } .photo2{ position: static; left:0px; margin:0 auto; text-align:center;} #box3{ position:static; left:0px; top:0px; background: #fff; width: 100%; margin:0 auto 50px; border: 1px solid #ccbf1f; padding:20px; } #box3:before { content: ''; top: 0px; position: static; left: 0px; border-top: 0px solid transparent; border-right: 0px solid #ccbf1f; border-bottom: 0px solid transparent; } .photo3{ position: static; left:0px; margin:0 auto; text-align:center;} #box4{ position:static; left:0px; top:0px; background: #fff; width: 100%; margin:0 auto 50px; border: 1px solid #7e55bf; padding:20px; } #box4:before { content: ''; top: 0px; position: static; right: 0px; border-top: 0px solid transparent; border-left: 0px solid #7e55bf; border-bottom: 0px solid transparent; } .photo4{ position: static; left:0px; margin:0 auto; text-align:center;} #box5{ position:static; left:0px; top:0px; background: #fff; width: 100%; margin:0 auto 50px; border: 1px solid #e6248d; padding:20px; } #box5:before { content: ''; top: 0px; position: static; left: 0px; border-top: 0px solid transparent; border-right: 0px solid #e6248d; border-bottom: 0px solid transparent; } .photo5{ position: static; left:0px; margin:0 auto; text-align:center;} #box6{ position:static; left:0px; top:0px; background: #fff; width: 100%; margin:0 auto 50px; border: 1px solid #27A096; padding:20px; } #box6:before { content: ''; top: 0px; position: static; right: 0px; border-top: 0px solid transparent; border-left: 0px solid #27A096; border-bottom: 0px solid transparent; } .photo6{ position: static; left:0px; margin:0 auto; text-align:center;} #box7{ position:static; left:0px; top:0px; background: #fff; width: 100%; margin:0 auto 0px; border: 1px solid #ED9A00; padding:20px; } #box7:before { content: ''; top: 10px; position: static; left: 0px; border-top: 0px solid transparent; border-right: 0px solid #ED9A00; border-bottom: 0px solid transparent; } .photo7{ position: static; left:0px; margin:0 auto; text-align:center;} /****** スケジュール box ******/ .qa-q { background: url(../img/q-min.png) no-repeat 0 6px; padding: 10px 0px 15px 35px; font-size: 1em; } .qa-a { padding: 8px 0px 20px 35px; margin-bottom: 15px; font-size: 1em; } .qa-q, .qa-a { -webkit-background-size:25px auto; -moz-background-size:25px auto; -o-background-size:25px auto; background-size:25px auto; } #profile p { font-size:0.9em; } #profile h3 { font-size:1.6em; margin-bottom:0px;} #profile h4 { font-size : 1.4em; } #profile dl dt { float:none; margin:auto; width:70%; padding:10px 0 0 0; } #profile dl dd { float:none; width:100%; padding:0; font-size:14px; } .line_hi3{line-height:3;} .line_hi25{line-height:2.5;} .line_hi18{line-height:1.8;} .tx_pink_10{font-size: 1.3em;} .tx_blue_line_7{font-size: 1.1em;} .tx_pink_line_7{font-size: 1.1em;} .tx_10{font-size: 1.3em;} .tx_8{font-size: 1.2em;} .p12,.p14,.p16,.p20,.b12,.b14,.b16,.b20 {line-height: 1.5;} .p24,.p30,.b24,.b30 {line-height: 1.3;} .p32,.p36,.b32,.b36 {line-height: 1.2;} .p12,.b12{font-size: 1.1em;} .p14,.b14{font-size: 1.2em;} .p16,.b16{font-size: 1.3em;} .p20,.b20{font-size: 1.5em;} .p24,.b24{font-size: 1.7em;} .p30,.b30{font-size: 2.0em;} .p32,.b32{font-size: 2.2em;} .p36,.b36{font-size: 2.4em;} .m-10 {margin-bottom:-12px;} .m-20 {margin-bottom:-10px;} .m0 {margin-bottom:0px;} .m10 {margin-bottom:5px;} .m20 {margin-bottom:10px;} .m30 {margin-bottom:15px;} .m40 {margin-bottom:20px;} .m50 {margin-bottom:20px;} .m60 {margin-bottom:30px;} .m70 {margin-bottom:35px;} .m80 {margin-bottom:40px;} .m100 {margin-bottom:50px;} .t-30 {margin-top:-15px;} .t10 {margin-top:5px;} .t20 {margin-top:10px;} .t30 {margin-top:15px;} .t40 {margin-top:20px;} .t50 {margin-top:25px;} .t60 {margin-top:30px;} .t70 {margin-top:35px;} .t80 {margin-top:40px;} .t100 {margin-top:50px;} br.pc {display:none;} br.sp {display:inline;} img.pc,img.full3 {display:none;} img.sp {display:block;} img.w20 { width:20px; height:auto; } img.w30 { width:30px; height:auto; } .b30 br, .b32 br {display:none;} } @media only screen and (max-width: 480px) { header .obi_tx{ padding:10px 0 0; font-size:0.8em; line-height:1.5; } } @media only screen and (max-width: 380px) { img.top { top:0; padding: 0 0 0; } h2.t-title { font-size:1.3em; } header .p12{font-size: 0.6em;} .p14,.b14{font-size: 1.15em;} .p16,.b16{font-size: 1.2em;} .p20,.b20{font-size: 1.3em;} .p24,.b24{font-size: 1.4em;} .p30,.b30{font-size: 1.5em;} .p32,.b32{font-size: 1.6em;} .p36,.b36{font-size: 1.8em;} .waku3 p{ font-size:1.1em;} } .movie { width:100%; padding:22px 0 22px 0; } .movie iframe { margin:0 auto; padding: 0; width:900px; height:506px; } @media only screen and (max-width: 640px) { .movie {padding: 0 0 30px 0;} .movie-sp { position: relative; width: 100%; } .movie-sp:before { content:""; display: block; padding-top: 56.25%; /* iframe高さと幅の比を16:9に固定。9/16*100=56.25 */ } .movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } @media only screen and (max-width: 400px) { .movie_box { width:100%; margin: 0 auto; padding-top: 15px; } .movie_box2 { width:100%; height:230px; margin: 0 auto ; margin-bottom: 30px; padding-bottom: 30px; background: url(../img/tv.png) no-repeat top center; -webkit-background-size:110% auto; -moz-background-size:110% auto; -o-background-size:110% auto; background-size:110% auto; } .movie_box iframe { width:280px; height:160px; } } @media screen and (min-width: 401px) { .movie_box { width:100%; margin: 0 auto; padding-top: 20px; } .movie_box2 { width:100%; height:320px; margin: 0 auto ; margin-bottom: 30px; background: url(../img/tv.png) no-repeat top center; -webkit-background-size:110% auto; -moz-background-size:110% auto; -o-background-size:110% auto; background-size:110% auto; } .movie_box iframe { width:350px; height:190px; } } @media screen and (min-width: 460px) { .movie_box2 { height:360px; } .movie_box iframe { width:400px; height:220px; } } @media screen and (min-width: 520px) { .movie_box2 { height:400px; } .movie_box iframe { width:450px; height:250px; } } @media screen and (min-width: 594px) { .movie_box2 { height:480px; margin-bottom: 40px; } .movie_box iframe { width:500px; height:280px; } } @media screen and (min-width: 673px) { .movie_box { width:700px; margin: 0 auto; padding-top: 25px; } .movie_box2 { width:700px; height:490px; margin: 0 auto ; margin-bottom: 60px; background: url(../img/tv.png) no-repeat top; } .movie_box iframe { width:560px; height:315px; } } .video{ position:relative; width:100%; padding-top:56.25%; } .video iframe{ position:absolute; top:0; right:0; width:100%; height:100%; } .youtube { position: relative; width: 100%; padding-top: 56.25%; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } .main section { display: table; } .main section .container { display: table-cell; vertical-align: middle; text-align: center; color: #CCC; width: 100%; } .main section .container .left { float: left; } .main section .container .right { float: right; } .main section .container .col { width: 50%; } .main section:nth-child(1) { background-image: url(../img/bg-sample001.jpg); background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } .main section { opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.6s; transition: opacity 0.6s; } .complete .main section { opacity: 1; filter: alpha(opacity=100); } .active .slideInUp { opacity: 0; filter: alpha(opacity=0); -webkit-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; filter: alpha(opacity=100); } } /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxuby1zb3VyY2U+Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsK0JBQXVCO1VBQXZCLHVCQUF1QixFQUFFOztBQUUzQjtFQUNFLFVBQVU7RUFDVixXQUFXO0VBQ1gsYUFBYSxFQUFFOztBQUVqQjtFQUNFLFVBQVUsRUFBRTs7QUFFZCx3QkFBd0I7QUFDeEI7RUFDRSxxRUFBcUU7RUFDckUsdUJBQXVCLEVBQUU7RUFDekI7SUFDRSw4REFBZ0UsRUFBRTs7QUFFdEU7RUFDRSxlQUFlLEVBQUU7O0FBRW5CO0VBQ0UsaUJBQWlCLEVBQUU7O0FBRXJCO0VBQ0UsZUFBZSxFQUFFOztBQUVuQjtFQUNFLGVBQWUsRUFBRTtFQUNqQjtJQUNFLG9CQUFvQjtJQUNwQix1QkFBdUI7SUFDdkIsbUJBQW1CO0lBQ25CLFlBQVk7SUFDWixZQUFZLEVBQUU7SUFDZDtNQUNFLFlBQVksRUFBRTtJQUNoQjtNQUNFLGFBQWEsRUFBRTtJQUNqQjtNQUNFLFdBQVcsRUFBRTtFQUNqQjtJQUNFLHdDQUEwQztJQUMxQyxtQ0FBbUM7SUFDbkMsNkJBQTZCO0lBQzdCLCtCQUF1QjtZQUF2Qix1QkFBdUIsRUFBRTs7QUFFN0I7RUFDRSxXQUFXOztFQUNYLGlDQUF5QjtVQUF6Qix5QkFBeUIsRUFBRTtFQUMzQjtJQUNFLFdBQVc7aUNBQUU7O0FBRWpCO0VBQ0UsV0FBVzs7RUFDWCxrQ0FBMEI7VUFBMUIsMEJBQTBCO0VBQzFCLCtCQUF1QjtVQUF2Qix1QkFBdUI7RUFDdkIsNEJBQW9CO1VBQXBCLG9CQUFvQjtFQUNwQixrQ0FBMEI7VUFBMUIsMEJBQTBCLEVBQUU7O0FBRTlCO0VBQ0U7SUFDRSwyQ0FBbUM7WUFBbkMsbUNBQW1DO0lBQ25DLG9CQUFvQixFQUFFO0VBQ3hCO0lBQ0Usd0NBQWdDO1lBQWhDLGdDQUFnQztJQUNoQyxXQUFXO2lDQUFFLEVBQUU7O0FBTm5CO0VBQ0U7SUFDRSwyQ0FBbUM7WUFBbkMsbUNBQW1DO0lBQ25DLG9CQUFvQixFQUFFO0VBQ3hCO0lBQ0Usd0NBQWdDO1lBQWhDLGdDQUFnQztJQUNoQyxXQUFXO2lDQUFFLEVBQUUiLCJmaWxlIjoiPG5vLW91dHB1dD4iLCJzb3VyY2VzQ29udGVudCI6WyIqLCAqOmJlZm9yZSwgKjphZnRlciB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7IH1cblxuaHRtbCwgYm9keSB7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbiAgaGVpZ2h0OiAxMDAlOyB9XG5cbmltZyB7XG4gIGJvcmRlcjogMDsgfVxuXG4vKiBHZW5lcmFsIERlbW8gU3R5bGUgKi9cbmJvZHkge1xuICBmb250LWZhbWlseTogQXJpYWwsIFZlcmRhbmEsICdIZWx2ZXRpY2EgTmV1ZScsIEhlbHZldGljYSwgc2Fucy1zZXJpZjtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzAwMDsgfVxuICBib2R5LmxvYWRpbmcge1xuICAgIGJhY2tncm91bmQ6ICNGRkYgdXJsKC4vaW1nLWxvYWRpbmcuZ2lmKSBjZW50ZXIgY2VudGVyIG5vLXJlcGVhdDsgfVxuXG5oMSB7XG4gIGZvbnQtc2l6ZTogM2VtOyB9XG5cbmgyIHtcbiAgZm9udC1zaXplOiAyLjRlbTsgfVxuXG5wIHtcbiAgZm9udC1zaXplOiAxZW07IH1cblxuLm1haW4gc2VjdGlvbiB7XG4gIGRpc3BsYXk6IHRhYmxlOyB9XG4gIC5tYWluIHNlY3Rpb24gLmNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogdGFibGUtY2VsbDtcbiAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBjb2xvcjogI0NDQztcbiAgICB3aWR0aDogMTAwJTsgfVxuICAgIC5tYWluIHNlY3Rpb24gLmNvbnRhaW5lciAubGVmdCB7XG4gICAgICBmbG9hdDogbGVmdDsgfVxuICAgIC5tYWluIHNlY3Rpb24gLmNvbnRhaW5lciAucmlnaHQge1xuICAgICAgZmxvYXQ6IHJpZ2h0OyB9XG4gICAgLm1haW4gc2VjdGlvbiAuY29udGFpbmVyIC5jb2wge1xuICAgICAgd2lkdGg6IDUwJTsgfVxuICAubWFpbiBzZWN0aW9uOm50aC1jaGlsZCgxKSB7XG4gICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKC4vYmctc2FtcGxlMDAxLmpwZyk7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyIGNlbnRlcjtcbiAgICBiYWNrZ3JvdW5kLXJlcGVhdDogbm8tcmVwZWF0O1xuICAgIGJhY2tncm91bmQtc2l6ZTogY292ZXI7IH1cblxuLm1haW4gc2VjdGlvbiB7XG4gIG9wYWNpdHk6IDA7XG4gIHRyYW5zaXRpb246IG9wYWNpdHkgMC42czsgfVxuICAuY29tcGxldGUgLm1haW4gc2VjdGlvbiB7XG4gICAgb3BhY2l0eTogMTsgfVxuXG4uYWN0aXZlIC5zbGlkZUluVXAge1xuICBvcGFjaXR5OiAwO1xuICBhbmltYXRpb24tbmFtZTogc2xpZGVJblVwO1xuICBhbmltYXRpb24tZHVyYXRpb246IDFzO1xuICBhbmltYXRpb24tZGVsYXk6IDFzO1xuICBhbmltYXRpb24tZmlsbC1tb2RlOiBib3RoOyB9XG5cbkBrZXlmcmFtZXMgc2xpZGVJblVwIHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMTAwJSwgMCk7XG4gICAgdmlzaWJpbGl0eTogdmlzaWJsZTsgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuICAgIG9wYWNpdHk6IDE7IH0gfVxuIl19 */