.clearfix:after,.clearfix:before{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0} .clearfix:after{clear:both} .clearfix{zoom:1} body,h1,h2,h3,h4,h5,p{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;-webkit-text-size-adjust:100%}ul{list-style:none}body,html{position:relative}a,b{text-decoration:none;font-weight:400} img{border:0} .content{max-width:1150px;margin:auto;padding:0 5px;position:relative} {font-size:1.6em;padding:15px 0;background:#E8588E;color:#fff;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;margin:40px auto;display:block;max-width:490px;text-align:center;-webkit-box-shadow:4px 4px 4px #555;-moz-box-shadow:4px 4px 4px #555;box-shadow:4px 4px 4px #555} a.btn{font-size:1.6em;padding:15px 0;background:#E8588E;color:#fff;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;margin:40px auto;display:block;max-width:490px;text-align:center;-webkit-box-shadow:4px 4px 4px #555;-moz-box-shadow:4px 4px 4px #555;box-shadow:4px 4px 4px #555} a.btn:hover{background:#e61096} h1{font-size:1pc;color:#fff;padding:10px 45px 45px;} h2{font-size:2.3em;color:#fff;position:static;left:0;bottom:50px;margin-bottom:30px;text-shadow:2px 2px 2px #3e3e3e} h3,h4,h5{color:#E8588E;text-align:center;font-weight:700} h3{font-size:2.6em}h4{font-size:2em}h5{font-size:1.4em} .box .content{overflow:hidden;padding:5pc 20px} .box .content p{font-size:18px;color:#4c4c4c;line-height:30px} #mainBox{overflow:hidden} #header{background:#3c3c3ceb;border-bottom:1px solid #848384;position:fixed;top:0;left:0;width:100%;z-index:1} #header .content{min-height:86px;padding:0 5px;overflow:visible} #header #top{background:url(../img/common/bg_header.png);height:20px} #header #logo{ padding:4px 0; float:left; margin-left:50px; margin-top:5px; } #header #logo img{ width:150px } #header #sm_btn_menu{ float:right; width:2pc; padding:30px 15px 0 0; display:none } #header #sm_btn_menu img{ width:100%; margin-bottom:5px } #header p#menu{ position:absolute; right:0;bottom:-1px; overflow:hidden } #header p#menu a{ font-size:15px; color:#dedede; padding:20px; border-bottom:1px solid #848384; float:left } #header p#menu a.active,#header p#menu a:hover{ border-color:#E8588E; color:#E8588E } #keyvisual{background-image:url(../img/mainpage/bg_key.jpg);background-position:center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}#keyvisual .content{min-height:260px;overflow:visible}#keyvisual img{position:absolute;bottom:0;left:50%;margin-left:-760px;width:57%}.rsp_image{max-width:100%;height:auto}.center-content{padding:70px 0;margin:85px 0 225px}.center-content.gray-bg{background-color:#f8f8f8}#mobileFootNav{display:none}.menuButton{display:inline-block;cursor:pointer;color:#fff;font-size:14px;line-height:20px;width:100%;height:100%;text-align:center;vertical-align:middle}.menuButton:active{position:relative;top:1px} .w50{float:left;width:45%} .box-col{float:left} #keyvisual .content{min-height:735px} .production{position:absolute;bottom:170px;right:90px;color:#fff;max-width:516px} #keyvisual i{margin-right:10px;color:#E8588E} #keyvisual p{ font-size:1.2em; line-height:20px; margin-bottom:20px; color:#FFF } #divisions { background-image: url(../img/mainpage/concept.png); background-size: cover; } #divisions h3{ line-height:50px; /* margin-left: -20px; */ } #divisions h3 b{font-size:1.6em;font-weight:400} #divisions #age p{ color: #E8588E; padding: 25px 126px 25px; font-size: 19px; font-weight: 500; line-height: 3em; font-family: "游ゴシック体", "Yu Gothic", YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #divisions .w50{padding-top:40px} .cnt-image{display:inline-block;margin:0 10px 0 20%;width:20%} .cnt-image img{max-width:100%} #divisions p{font-size:.9em;color:#9a9a9a;display:inline-block;vertical-align:bottom} #divisions p b{display:block;font-size:2em;margin-bottom:25px;color:#5e5e5e} #recruit{background-image:url(../img/mainpage/bosyu.png);background-size:cover} #recruit h3{color:#fff} #recruit ul{width:50%;margin:50px auto;font-size:21px;font-weight:700;background:#ffffffdb;padding:40px;border-radius:8px} #recruit li{margin:20px 0} #recruit i{color:#E8588E;} #down_arrow {float: none; text-align: center; font-size: 60px; display: block; margin-bottom: 30px; } #recruit h3, #recruit h4 { color: #fff; letter-spacing: 0.1em; } #product {background: #f9fbe7;} #product h3{} #product .box p{font-size:1pc;line-height:20px;padding:15px 12px;min-height:40px;position:relative} #product i{color:#ee78a6;font-size:40px;margin-bottom:20px} #privilege{background:#fffbeb} #box2 .content li { float: left; background: #fff; width: 29%; height: 525px; -webkit-box-shadow: 4px 4px 4px #9c9c9c; -moz-box-shadow: 4px 4px 4px #9c9c9c; box-shadow: 4px 4px 4px #9c9c9c; margin: 2%; position: relative; } #box2 .content li h3 { font-size: 1.3em; padding: 10px 15px; background: #E8588E; color: #fff; text-align: center; } #box2 img { display: block; width: 100%; } /* 基本のスタイル */ .productbox.delighter li { opacity: 0; transform: translatey(400%); transition: all .75s ease-out; } .productbox.delighter.started li{ transform: none; opacity: 1; } .productbox.delighter.started li:nth-child(1) { transition: all .75s ease-out .1s; } .productbox.delighter.started li:nth-child(2) { transition: all .75s ease-out .3s; } .productbox.delighter.started li:nth-child(3) { transition: all .75s ease-out .5s; } #flow {} #flow ul{margin-top:5pc;padding:0} #flow li{margin:0 0 50px 2%;float:left;width:23%;text-align:center} #flow li:first-child{margin-left:0} #flow .box{position:relative;border:1px solid #dedede;padding:30px 2% 0;margin-top:30px;} #flow .box:after{content:'';background:url(../img/mainpage/arrow_box_top.png)no-repeat;width:26px;height:13px;position:absolute;top:-13px;left:50%;margin-left:-13px} #flow .box h3{font-size:1.7em;line-height:24px;text-shadow: none;} #flow .box p{font-size:1pc;line-height:20px;padding:15px 12px;min-height:40px;position:relative} #flow .step{display:inline-block;background:url(../img/mainpage/sp_steps_top.png)no-repeat;width:55px;height:55px} #flow .b1 .step{background-position:0 0} #flow .b2 .step{background-position:0 -56px} #flow .b3 .step{background-position:0 -7pc} #flow .b4 .step{background-position:0 -168px} #flow .ico{display:inline-block;background:url(../img/mainpage/sp_icons_top.png)no-repeat} #flow i{color:#ee78a6;font-size:40px;margin-bottom:20px}#privilege{background:#fffbeb} /* 基本のスタイル */ .flowbox.delighter li{ transition: all .7s ease-out; transform: translate(0%, -70%); opacity: 0; } .flowbox.delighter.started li { opacity: 1; transform: none; } .flowbox.delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; } .flowbox.delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; } .flowbox.delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; } .flowbox.delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; } /* スタート時のスタイル */ .flowbox.delighter .started li{ transform: none; opacity: 1; } #privilege h4{text-align:left;line-height:40px;margin:50px 0 35px}#privilege p{padding-right:10%} #voice{background: #f9fbe7;padding-bottom: 80px;} #voice .box-message{float: left; padding: 2%; background: #f6f5f1; height: 350px; width: 42%; border-top: 3px solid #565755; margin: 2%; box-shadow: 0 4px 4px rgba(0,0,0,0.2)} #voice h3{margin:40px 0;} #voice h4{font-size:18px;color:#5f5e5d;text-align:left} #voice h4 i{margin-right: 5px;} #voice .content img{float:left;padding-right:20px;width:20%;max-width:134px} #voice .name{color:#5f5e5d;font-weight:700;display:inline-block;border-left:3px solid #E8588E;padding-left:10px;font-size: 17px!important;} .box-message1 i{font-size: 80px; color: #E8588E; margin-right: 15px; margin-top: 15px;} .box-message p{margin-bottom:30px; font-size:15px !important;line-height: 27px !important;} #voice .content a{color:#E8588E;background:url(../img/common/pencil.png)left center no-repeat;padding-left:25px;position:absolute;right:10px;bottom:10px} #voice .content a:hover{text-decoration:underline} .overlay{background-color:rgba(0,0,0,.75);width:100%;height:100%;top:0;left:0;z-index:1} .overlay,.popup{position:fixed;display:none} .popup{top:30%;left:50%;background-color:hsla(0,0,100%,.5);z-index:2;padding:5px;max-width:500px;width:88%} .popup .popup-content{background-color:#fff;padding:20px 3%} .popup .popup-content strong{border-left:3px solid #E8588E;padding-left:10px;display:block;margin-bottom:10px} .popup img.close_button{margin:0 -40px -10px 5px} .popup a:hover{-ms-filter:"alpha(opacity=75)";filter:alpha(opacity=75);opacity:.75} .popup a.close{position:absolute;top:-40px;right:40px;color:#fff} #about_us .logo{float: left; width: 29%; padding: 3%; margin-right: 20px; background: #fff; -webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 0 4px 4px rgba(0,0,0,0.2); box-shadow: 0 4px 4px rgba(0,0,0,0.2);} #about_us .text{float:left;width: 55%; background: #ffffffdb; padding: 30px; border-radius: 5px;} #about_us{background:#f8f8f8;background-image: url(../img/mainpage/bg_about.png);background-size: cover;} #about_us img{margin:0px 0 30px} #about_us h4{font-size:1.0em;} #about_us h5{margin:20px 20px 0;text-align:left;font-size:initial;color:#E8588E;background:url(../img/mainpage/kirakira.png)no-repeat;-webkit-background-size:2pc 2pc;-moz-background-size:2pc;-o-background-size:2pc;background-size:2pc;padding:7px 0 0 50px} #about_us h6{font-size:1pc;font-weight:700} #about_us p{line-height:24px;padding-top:15px} #questions .content div{position:relative;background-repeat:no-repeat} #questions .content h4{text-align: left; background: #f8f8f8 url(../img/common/q.png)left top no-repeat; min-height: 65px; margin-top: 55px; -webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 0 4px 4px rgba(0,0,0,0.2); box-shadow: 0 4px 4px rgba(0,0,0,0.2);} #questions .content h4 span{font-size: .7em; padding: 15px 10px 15px 90px; display: inline-block;} #questions .content p{font-size: 1pc; color: #313131; padding: 15px 15px 15px 90px; border: 1px solid #e0e0e0; margin-top: 10px; background: url(../img/common/icon3.png)left top no-repeat; -webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 0 4px 4px rgba(0,0,0,0.2); box-shadow: 0 4px 4px rgba(0,0,0,0.2);} a.more_product01{padding:15px 0;border:1px solid;border-color:#E8588E;color:#E8588E;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;margin:0 auto 30px;display:block;max-width:330px;text-align:center;font-weight:700;font-size: 20px;} a.more_product01:hover{background:#E8588E;color:#fff;} a.more_product02{padding:15px 0;border:1px solid;border-color:#E8588E;color:#E8588E;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;margin:0 auto 80px;display:block;max-width:330px;text-align:center;font-weight:700;font-size: 20px;} a.more_product02:hover{background:#E8588E;color:#fff} a.more_voice{padding:15px 0;border:1px solid;border-color:#E8588E;color:#E8588E;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;margin:0 auto 0px;display:block;max-width:330px;text-align:center;font-weight:700;font-size: 20px;} a.more_voice:hover{background:#E8588E;color:#fff} a.more_fb { padding: 15px 0; border: 1px solid; border-color: #305097; color: #305097; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; margin: 0 auto 0px; display: block; max-width: 330px; text-align: center; font-weight: 700; font-size: 20px; } a.more_fb:hover { background: #305097; color: #fff; } a.more_create{padding:15px 0;border:1px solid;border-color:#E8588E;color:#E8588E;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;margin:200px auto 0px;display:block;max-width:330px;text-align:center;font-weight:700;font-size: 20px;} a.more_create:hover { background: #E8588E; color: #fff; } #office{background:#f8f8f8} #office .box-col{margin-top:5pc}#office .content .b1{width:48%} #office .content .b2{width:52%}#office p{padding:0 0 10px;line-height:24px} #office img:first-child{margin-right:3.4%} #office img{width:47%} #local-sns{background:#fffbeb} #local-sns i,#events i{z-index:0} #local-sns .box-col{text-align:center;width:36%;padding:0 7%} .icon{font-size:30px;color:#E8588E;margin-top: 40px;margin-bottom: 30px;} #local-sns .box-col h4{margin:20px 0;line-height:30px} #local-sns a{font-size:1pc;font-weight:700;color:#4c4c4c;line-height:30px;margin-left:10px} #local-sns a:hover{text-decoration:underline}#local-sns ul{text-align:left;overflow:hidden} #local-sns ul li{margin:2em 25%}#local{margin:20px 0} #local img{width:153px;float:left;margin:0 20px 0 33px} #local ul{padding:0;font-size:9pt}#local ul li{margin:1px 0}.graph{position:relative;border:1px solid #ff9800;padding:1px 3px} .graph span{float:right} #events{text-align:center;background:#fffbeb;padding-bottom: 30px;} #events h3 { margin: 40px 0; } #events .content{padding-top:0} #events h4{margin:20px 0;letter-spacing: 2.0px;} #events p{padding-bottom:40px;margin:auto} #events ul{padding:0} #events li{display:inline-block;padding-left:2.1%} #events li:first-child{padding-left:0} #events li:nth-child(1),#events li:nth-child(2){margin-bottom:20px} #events li img{max-width:100%;height:auto;box-shadow: 0 4px 4px rgba(0,0,0,0.2);} .sp-img{width:62px;margin-bottom: 30px;} #footer .footer-logo{width:20.7%;float:left;padding:25px 2% 0 0} #footer h4 { font-size: 0.7em; margin-top: 10px; width: 224px; } #footer ul{float:left;border-left:1px solid #e9e2c8;width:23%;height:205px;padding:20px 0 0 2%;margin:0} #footer ul li{margin-bottom:10px} #footer .social{float:left;width:14%;border-left:1px solid #e9e2c8;height:205px;padding:10px 0 0 2%} #footer .social>div{padding:0 0 10px} #footer div.twitter{float:left;width:24.2%} #footer ul a{color:#525251;font-size:0.9em} #footer ul a:hover{text-decoration:underline} #footer .content{margin-top: 35px;margin-bottom:40px} #copyright{padding:15px 0;background:#3c3c3c;clear:both;text-align:center;color:#fff} .insta_btn2{/*ボタンの下地*/ color: #FFF;/*文字・アイコン色*/ border-radius: 7px;/*角丸に*/ position: relative; display: inline-block; height: 20px;/*高さ*/ width: 75px;/*幅*/ text-align: center;/*中身を中央寄せ*/ font-size: 10px;/*文字のサイズ*/ line-height: 21px;/*高さと合わせる*/ vertical-align: middle;/*垂直中央寄せ*/ background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/ overflow: hidden;/*はみ出た部分を隠す*/ text-decoration:none;/*下線は消す*/ } .insta_btn2:before{/*グラデーション②*/ content: ''; position: absolute; top: 0; left: 0; width: 100%;/*全体を覆う*/ height: 100%;/*全体を覆う*/ background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat; background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat; } .insta_btn2 .fa-instagram{/*アイコン*/ position: relative; top: 0px;/*アイコン位置の微調整*/ } .insta_btn2 span {/*テキスト*/ display:inline-block; position: relative; transition: .5s } .insta_btn2:hover span{/*ホバーで一周回転*/ -webkit-transform: rotateX(360deg); -ms-transform: rotateX(360deg); transform: rotateX(360deg); } .sc_block.show { transition: transform 0.8s cubic-bezier(0.13, 0.38, 0.12, 1) 0.2s,opacity 0.8s cubic-bezier(0.13, 0.38, 0.12, 1) 0.2s; -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.13, 0.38, 0.12, 1) 0.2s,opacity 0.8s cubic-bezier(0.13, 0.38, 0.12, 1) 0.2s; transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1; } .sc_block { opacity: 0; transform: translateY(50px); -webkit-transform: translateY(50px); transition: transform 0.3s ease-out,opacity 0.3s ease-out; -webkit-transition: -webkit-transform 0.3s ease-out,opacity 0.3s ease-out; } .sp_only { display: none !important; } .content h3 { text-align: center; } .content h3 .en { font-size: 20px; font-weight: bold; display: block; margin-bottom: 10px; letter-spacing: 0.3em; } .content h3 .jp { font-size: 42px; display: block; position: relative; font-family: 'Roboto'; font-weight: 700; letter-spacing: 0.12em; margin: 0 auto; height: 55px; white-space: nowrap; } .content .h2_p { display: block; text-align: center; font-size: 20px; line-height: 36px; letter-spacing: 0.07em; } /* 基本のスタイル */ .box.delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; } /* スタート時のスタイル */ .box.delighter.started li { opacity: 1; transform: none; } .box.delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; } .box.delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; } .box.delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; } .box.delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; } /* エンド時のスタイル */ .box.delighter.started.ended li{ transform: none; opacity: 1; } /*パソコン・スマホ共通のCSS*/ #PageTopBtn { position: fixed; /*ボタンの配置場所を固定*/ bottom: -10px; /*下からのボタンの配置場所を指定*/ right: 10px; /*右からのボタンの配置場所を指定*/ z-index: 999; /* 前面 */ } #PageTopBtn a { display: block; /*配置の調整*/ text-decoration: none; /*文字の下線を消す*/ color: #fff; /*文字の色*/ background: #E8588E; /*ボタンの背景色*/ text-align: center; /*文字を中央に配置*/ border-radius: 50%; /*ボタンの角を少し丸くする*/ outline: none; /*クリックしたときの黒い枠を消す*/ line-height: 2.1; margin-bottom: 10px; } #PageTopBtn a:hover { text-decoration: none; background: #e8588e38; /*マウスオーバー時の背景色*/ } /*パソコンで表示する場合のCSS*/ @media (min-width: 768px) { #PageTopBtn { font-size: 25px; /*文字のサイズ*/ } #PageTopBtn a { width: 50px; /*ボタンの幅*/ height: 50px; /*ボタンの高さ*/ bottom: 10px; /*下からのボタンの配置場所を指定*/ /*padding: 5px 0; 文字の配置場所の調整*/ } } /*スマホで表示する場合のCSS*/ @media (max-width: 767px) { #PageTopBtn { font-size: 20px; bottom: 53px !important; /*下からのボタンの配置場所を指定*/ } #PageTopBtn a { width: 40px; height: 40px; /*padding: 8px 0;*/ } } @media(max-width:1024px){ h1 { font-size: 0.9em; color: #ccc; padding: 10px 0px 45px; } #keyvisual p { font-size: 1.0em; line-height: 17px; margin-bottom: 10px; color: #FFF; } #header .content{text-align:center} #header #logo{float:none;margin-top:10px;display:inline-block} #header p#menu{position:relative;width:100%;text-align:center} #header p#menu a{display:inline-block;float:none;padding:9pt} #header #logo img{width:131px;height:60px} #flow li{margin-left:0;width:48%;padding:0 1%} #voice .box-message{ height: auto; width: 92%;min-height:300px} #local-sns .box-col{float:none;width:100%;padding:0} #local-sns .box-col:first-child{margin-bottom:93pt}#local{margin:20px 24%}} @media(max-width:965px){ #keyvisual .content{min-height:595px} #keyvisual img{margin-left:-40pc} .production{right:30px;bottom:55px} #divisions .cnt-image{margin:0 20px 0 5%;width:25%} #privilege h4{margin-top:0} #privilege .w50:first-child{float:none;width:auto} #privilege .w50:nth-child(2){width:50%} #privilege p{float:left;width:45%;padding-right:0} #footer .footer-logo{width:30%;margin-bottom:30px;margin-left:4%} #footer .list-1{margin-left:4%} #footer ul{width:26%} #footer .social{width:15%} #footer div.twitter{width:27%}} #divisions h3 b { font-size: 1.2em; font-weight: 400; } @media(max-width:768px){ h5{text-align:left;font-size:1.2em} #header #logo{float:left;margin-left:10px} #header p#menu{height:294px} #header p#menu,#header p#menu2{width:220px;position:absolute;right:-5px;top:85px;background:url(../img/common/bg_menu.png);display:none;line-height:24px} #header p#menu2{height:330px} #header p#menu a{float:left;width:200px;text-align:left;border-bottom:1px solid #fff;line-height:24px} #header #top{display:none} #header #sm_btn_menu{display:block;color:#fff;border:solid 1px;border-radius:5px;padding:10px 10px 3px;margin:11px;font-size:10px} a.btn{display:none} #mainBox .box .content{font-size:.8em} #mainBox #keyvisual .content{min-height:0;padding-top:85px;padding-bottom:20px} #keyvisual img{display:none} .production{position:static;margin:0 auto;width:490px} #divisions p b{margin-bottom:15px} #about_us .logo{width:initial;padding-right:2%} #about_us {background-image: url(../img/mainpage/bg_about_sp.png); background-size: cover; } #divisions{background-image:url(../img/mainpage/concept_sp.png);} #recruit{background-image:url(../img/mainpage/bosyu_sp.png);background-size:cover} #recruit ul{width:90%;font-size:16px;padding:20px} #flow .box p{padding:15px 47px} #about_us img{margin:0 0 24px;width:191px} #about_us h4{line-height:initial} #about_us .text{float:left;width:initial} #questions .content h4,#questions .content p{-webkit-background-size:35px 35px;-moz-background-size:35px;-o-background-size:35px;background-size:35px} #questions .content h4 span,#questions .content p{padding:7px 7px 7px 42px} #office .content .box-col{float:none;margin-top:40px;width:100%} #office .content .b1{padding-right:0}#office .content .b2{padding:4.4%} #office img{width:43%}#local img{width:9pc;margin:6px 0} #flow ul { margin-top: 1pc; padding: 0; } #events p{text-align:center} #footer .social{border-left:0;height:auto;margin: 7.3pc 0 0 -28%} #footer div.twitter{width:30%} #mobileFootNav{background:#E8588Eeb;display:block;z-index:2;width:100%;height:55px;position:fixed;bottom:0} #mobileFootNav .ftNavBtn{float:left;width:50%;padding-top:5px} #copyright{padding-bottom:54pt} .box .content { overflow: hidden; padding: 20px 20px; } .content h3 .en { font-size: 0.5em; font-weight: bold; display: block; letter-spacing: 0.3em; margin-bottom: 0px; } .content h3 .jp { font-size: 0.70em; letter-spacing: 0.12em; line-height: 1.39em; } #divisions #age p { padding: 0px 15px 15px; font-size: 18px; line-height: 1.8em; } a.more_create { margin: 60px auto 30px; } #recruit h3, #recruit h4 { font-size: 1.70em; } #recruit ul { width: 90%; padding: 20px; line-height: 9px; margin: 30px auto; padding: 1px 20px; } #down_arrow { margin-bottom: 1px; } #page_top{ height: 108px; } #page_top a{ } #events h3 { margin: 40px 20px 0; } #flow h3 { margin: 40px 20px 0; } } @media only screen and (max-width: 768px){ #PageTopBtn { bottom: 53px !important; }} @media(max-width:640px){ #keyvisual{background-image:url(../img/mainpage/bg_key_sm.jpg)} .br_sp{display:block} #header p#menu{width:220px;position:absolute;right:-5px;top:85px;background:url(../img/common/bg_menu.png);display:none;height:294px;line-height:24px} #divisions h3 span{display:block;text-align:center} #divisions h3 b { font-size: 1.1em; font-weight: 400; } #divisions #age p{text-align:left;margin:20px 2% 0} #divisions .w50{padding-top:50px} #divisions .w50.b1{width:45%} #divisions .cnt-image{width:60px;margin-left:0} #voice .content b{margin-bottom:40px} #voice .box-message{width:95%;margin:2% auto} #flow li{width:100%;padding:0 1%} #privilege p{width:auto} #privilege .w50:nth-child(2){width:95%;margin:15px auto 0} #about_us p{line-height:30px} #office h4{text-align:left}#local&sns ul li{margin:2em 0} #local ul li{margin:1px 0} #events p{font-size: 15px;width:90%} #events li{width:45%;padding:0 2% !important} #footer .footer-logo{display:none} #footer ul{border-left:0;padding-left:0;width:48%} #footer .social{float:none;width:98%;text-align:center;margin:0;padding-top:30px;border-top:1px solid #e9e2c8;overflow:hidden} #footer .social div{display:inherit}#footer .social div:first-child{margin-left:0} #footer div.twitter{width:96%;margin-top:45px;padding:0 2%;text-align:center} #footer div.twitter iframe{display:inline-block} #box2 .content li { width: 94%; min-height: 0; padding-bottom: 40px; } .content h3 .jp { height: 90px; } #recruit ul { font-size: 11px; } #divisions #age p { text-align: left; margin: 20px 2% 0; font-size: 13px; } .box-message p { margin-bottom: 25px; font-size: 13px !important; padding: 0px 10px; line-height: 22px !important; } a.more_product01 { padding: 10px 0; max-width: 270px; font-size: 14px; } a.more_product02 { padding: 10px 0; max-width: 270px; font-size: 14px; } a.more_voice { padding: 10px 0; max-width: 270px; font-size: 14px; } a.more_fb { padding: 10px 0; max-width: 270px; font-size: 14px; } #events li img { max-width: 200%; margin-left: -74px; margin-top: -30px; } } @media(max-width:600px){ #divisions .content .w50{width:auto;float:none} #local{margin:20px 7%}} @media(max-width:520px){ .production{width:auto} #recruit ul{width:88%}} @media(max-height:425px){ .main-page #mainBox #keyvisual .content{padding-top:95px} #header p#menu{height:282px;top:63px} #header p#menu a{padding:8px 9pt} #header .content{min-height:62px} #header #logo{padding:0} #header #logo img{width:10pc}} @media(max-width:320px){ #local{margin:20px 0} #recruit ul{width:86%} #flow .box p{padding:15px} a.more{width:95%} a.more01{width:95%}}