@charset "UTF-8"; @font-face{font-family:"YuGothic M"; src:local(Yu Gothic Medium);} // LESS @white:#fff; @black:#000; @gray:#ccc; @grayD:#777; @grayDD:#333; @grayL:#e6e6e6; @grayLL:#f7f7f7; @red:#903; @green:#399c4a; @greenL:#80a91f; @yellow:#ffff00; @ncc:no-repeat center center; // MIXIN .trans{-webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; transition:0.3s;} .notrans{-webkit-transition:0s; -moz-transition:0s; -o-transition:0s; -ms-transition:0s; transition:0s;} .fb{font-weight:bold;} .tac{text-align:center;} .tdn{text-decoration:none;} .tdu{text-decoration:underline;} .bgsc{background-size:cover;} .inline{display:-moz-inline-box; display:inline-block;} /*BASE*/ html{width:100%; height:100%;} body{width:100%; height:100%; line-height:1; color:@black; -webkit-text-size-adjust:100%; font-family:Roboto,"Helvetica Neue",Helvetica,"Droid Sans",Arial,Avenir,Verdana,"游ゴシック Medium","YuGothic M","游ゴシック体","YuGothic","Hiragino Sans","ヒラギノ角ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,sans-serif;} img{max-width:100%; height:auto; vertical-align:middle;} select{font-size:16px!important;} /*CF*/ .cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;} /*LINK*/ a:link{color:@green; .tdu; .trans;} a:visited{color:@green; .tdu;} a:hover{color:@gray; .tdu;} a:active{color:@green; .tdn;} a img{border:none; .tdn;} a img:hover{border:none; opacity:0.6; .tdn;} /*NAV*/ button#menubtn{position:fixed; right:2%; top:2%; z-index:9999; line-height:50px; height:50px; width:50px; cursor:pointer; outline:none;} button.btn{background-color:@green; color:@white; border:none;} button.btn:after{content:'\f0c9'; font-family:'fontello'; line-height:50px; height:50px; width:50px; font-size:154%;} button.active{background-color:@white; color:@green;} button.active:after{content:'\e800'; font-family:'fontello'; line-height:50px; height:50px; width:50px; font-size:154%;} button#menubtn.active{position:fixed;} nav#spmenu{display:none; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9998; ul{padding:30px 0 0; font-size:116%; .fb; .tac; li{width:50%; margin:0 auto; a{display:block; line-height:1.7; height:36px;} a:link{color:@white; .tdn;} a:visited{color:@white; .tdn;} a:hover{color:@green; .tdn;} a:active{color:@white; .tdn;} } } } /*HEADER*/ header{position:absolute; width:100%; h1{position:relative; z-index:3; width:120px; margin:20px;} } /*SLIDER*/ div#sliderbox{position:fixed; overflow:hidden; top:0; left:0; width:100%; height:80vh; z-index:1; .bgsc;} div#slider{position:relative; width:100%; height:80vh; margin:0 auto;} div.people{position:absolute; bottom:3%; left:3%; width:40%; max-width:300px; z-index:2;} /*MAIN*/ main{z-index:4; position:relative;} .home{ main{margin-top:80vh; background:@white;} } /*WRAPPER*/ div#wrapper{position:relative; overflow:hidden; width:100%; z-index:5; background:@white;} /*TOP INTRO*/ div.topintro{ div.topintrotxt{ section{padding:6% 0; background:@yellow; .tac; .fb; h2{font-size:182%; letter-spacing:3px; margin:0 0 3%;} h3{font-size:80%;} } p{line-height:1.6; padding:6% 6% 3%;} p:last-child{font-size:120%; padding:0% 6% 6%; .fb; .tac;} } } /*topbox*/ div.topbox{padding:8% 6% 4%; background:url("../img/bg/topbg.gif") repeat center center; background-size:1250px 447.5px; article{background:@white; padding:0 0 2%; margin:0 auto 6%; h2{padding:4% 0; margin:0 0 4%; letter-spacing:2px; font-size:154%; background:@green; color:@white; .fb; .tac;} p{line-height:1.6; margin:0 0 4%;} section{padding:0 6%; margin:0 0 4%; img{max-width:200px; margin:0 auto; display:block;} } } ul.topbtn{margin:0 auto 6%; li{font-size:124%; .tac; .fb; letter-spacing:2px; margin:0 auto 6%; a{display:block; background:@green; border-radius:6px; padding:20px 0;} a:link{color:@white; .tdn;} a:visited{color:@white; .tdn;} a:hover{color:@white; .tdn; background:@gray;} a:active{color:@white; .tdn;} } } } /*READMORE BTN*/ div.readmore{width:100%; text-align:right; font-size:124%; letter-spacing:2px; .fb; a:link{color:@green; .tdn;} a:visited{color:@green; .tdn;} a:hover{color:@gray; .tdn;} a:active{color:@green; .tdn;} } section.titlebox{.tac; .fb; margin:0 0 6%; overflow:hidden; h2{font-size:182%; letter-spacing:2px; margin:0 0 6%;} h3{font-size:124%;} span{display:inline-block; padding:0 15px; position:relative;} span:before,span:after{border-top:2px solid @black; content:""; position:absolute; top:50%; width:50em;} span:before{right:100%;} span:after{left:100%;} } /*MESSAGE SLIDER*/ div.msgslider{padding:40px 0 20px; margin:0; background:@yellow; div.carousel{margin:0 0 30px; ul{ li.memthum{ a{display:block; padding:0 60px; img{border-radius:100%; border:4px solid @white; display:block;} /*div.hovercap{overflow:hidden; position:relative; div.imgmask{position:absolute; width:100%; height:100%; top:0; left:0; opacity:0; -webkit-transform: rotateY(-180deg); transform:rotateY(-180deg); -webkit-transition:all 0.5s ease; transition:all 0.5s ease;} .imgcaption{.tac;} } div.hovercap:hover{ div.imgmask{-webkit-transform:rotateY(0deg); transform:rotateY(0deg); opacity:1;} }*/ } p{background:@white; border:2px solid @black; border-radius:6px; padding:10px; margin:10px auto 0; width:220px; .tac; .fb;} } } } } div.topnews{padding:6% 4% 4%; section{margin:0 0 4%;} h2{font-size:200%; letter-spacing:2px; margin:0 0 4%; color:@green; .fb;} div.morebtn{.tdn; .fb; h3{float:left; font-size:116%; letter-spacing:2px;} a{float:right; display:block; letter-spacing:1px;} a:link{color:@black; .tdn;} a:visited{color:@black; .tdn;} a:hover{color:@green; .tdn;} a:active{color:@black; .tdn;} } } ul.newslist{margin:0 0 6%; li{line-height:1.7; a{display:block; padding:2%; cursor:pointer; .tdn;} a:link{color:@black; .tdn;} a:visited{color:@black; .tdn;} a:hover{color:@green; .tdn;} a:active{color:@black; .tdn;} } li:nth-child(odd){background:@grayL;} } div.topyellow{padding:6% 6% 4%; background:@yellow; article{background:@white; padding:6%; margin:0 auto 6%; img{max-width:150px; margin:0 auto 4%; display:block;} h2{margin:0 0 4%; letter-spacing:2px; font-size:154%; color:@green; .fb;} h3{margin:0 0 4%; font-size:124%; .fb;} p{line-height:1.6; margin:0 0 4%;} } ul.topbn{ li{background:@white; margin:0 auto 6%; font-size:116%; letter-spacing:2px; border-radius:6px; .fb; .tac; a{display:block; padding:20px 0; i{color:@green; .trans;} } a:link{color:@black; .tdn;} a:visited{color:@black; .tdn;} a:hover{color:@green; .tdn; i{color:@black;} } a:active{color:@black; .tdn;} } } } /*FOOTER*/ footer{z-index:4; position:relative; background:@white; div.footmain{padding:6% 0; h1{width:200px; margin:0 auto 4%;} p{font-size:93%; line-height:1.7; .tac;} } div.copyright{font-size:85%; padding:2% 0; line-height:1.7; background:@green; color:@white; .tac; } } div.footbn{background:@grayL; ul{ li{border-bottom:1px solid @gray; a{display:block; .fb; .tac; padding:15px 0; i{color:@green; .trans;} } a:link{color:@black; .tdn; .trans;} a:visited{color:@black; .tdn;} a:hover{color:@green; .tdn; i{color:@grayD;} } a:active{color:@black; .tdn;} } li:last-child{border-bottom:none;} } } /*********************** PAGES ***********************/ .page-about div.pageheader{background:url("../img/bg/page/about.jpg") @ncc; .bgsc;} .page-career div.pageheader{background:url("../img/bg/page/career.jpg") @ncc; .bgsc;} .page-welfare div.pageheader{background:url("../img/bg/page/welfare.jpg") @ncc; .bgsc;} .page-education div.pageheader{background:url("../img/bg/page/education.jpg") @ncc; .bgsc;} .page-inside div.pageheader{background:url("../img/bg/page/inside.jpg") @ncc; .bgsc;} .page-recruit div.pageheader{background:url("../img/bg/page/recruit.jpg") @ncc; .bgsc;} .page-contact div.pageheader{background:url("../img/bg/page/contact.jpg") @ncc; .bgsc;} .page-entry div.pageheader{background:url("../img/bg/page/entry.jpg") @ncc; .bgsc;} .page-form div.pageheader{background:url("../img/bg/page/form.jpg") @ncc; .bgsc;} .category-news div.pageheader{background:url("../img/bg/page/news.jpg") @ncc; .bgsc;} .category-blog div.pageheader{background:url("../img/bg/page/blog.jpg") @ncc; .bgsc;} .category-message div.pageheader{background:url("../img/bg/page/message.jpg") @ncc; .bgsc;} div.pageheader.newssg{background:url("../img/bg/page/news.jpg") @ncc; .bgsc;} div.pageheader.blogsg{background:url("../img/bg/page/blog.jpg") @ncc; .bgsc;} div.pageheader.messagesg{background:url("../img/bg/page/message.jpg") @ncc; .bgsc;} div.pageheader{width:100%; height:250px;} div.pagetitle.mb{margin:0 0 6%;} div.pagetitle{padding:20px; background:@yellow; .fb; .tac; h1{font-size:182%; letter-spacing:2px; margin:0 0 15px;} h2{letter-spacing:2px;} } div.pageintro{padding:8% 4% 8%; margin:0 0 6%; background:url("../img/bg/topbg.gif") repeat center center; background-size:1250px 447.5px; article{background:@white; border-radius:10px; padding:0 0 20px; margin:0 auto 6%; h2{font-size:124%; letter-spacing:1px; padding:20px 0; margin:0 0 20px; background:@green; border-bottom:4px solid @grayL; color:@white; .fb; .tac;} h3{font-size:116%; padding:0 20px; .tac; .fb;} img{max-width:160px; display:block; margin:0 auto 20px;} p{padding:0 20px; line-height:1.6;} } article:last-child{margin:0;} } div.pageyellow{padding:6% 2% 6%; margin:0 0 6%; background:@yellow; div.pagebody{ article{margin:0;} } } /*********************** PAGES ***********************/ div.pagebody{padding:0 2%; section.titlebox{ h2{color:@green;} h3{color:@green;} span:before,span:after{border-top:2px solid @green;} } article{margin:0 0 12%; span.postdate{font-size:93%; display:block; margin:0 0 10px; color:@green;} h2{font-size:154%; margin:0 0 15px; color:@green; .fb;} h3{font-size:124%; margin:0 0 15px; padding:0 0 0 15px; border-left:5px solid @green; color:@green; .fb;} section.subtitle{margin:0 0 20px; h2{margin:0;} p{font-size:108%; color:@black; .fb;} } p{line-height:1.7; margin:0 0 10px;} div.postbody{line-height:1.7; word-wrap:break-word; img{margin:0 0 15px;} img.notmargin{margin:0!important;} p{margin-bottom:15px;} p:last-child{margin-bottom:0;} div.graybox{background:@grayL; padding:2%; margin:0 0 15px; h3{padding:0; border-left:none;} } } div.timetable{border-bottom:1px solid @grayL; padding:0 0 15px; h3{color:@white; background:@green; padding:15px; border-left:none;} } } } /*********************** ABOUT ***********************/ .page-about div.pageintro{margin:0;} ul.pointlist{ li{padding:0 0 10px; margin:0 0 10px; border-bottom:1px solid @gray;} } /*********************** CAREER ***********************/ div.futurebox{padding:0 0 2%;} ul.iconlist{ li{border:1px solid @greenL; border-radius:10px; padding:15px; margin:0 auto 20px; img{max-width:125px; display:block; margin:0 auto 10px!important;} h4{font-size:116%; margin:0 auto 15px; line-height:1.6; color:@greenL; .fb; .tac;} p{line-height:1.6;} } } /*********************** EDUCATION ***********************/ /*********************** TAB ***********************/ .tabhide{display:none;} ul.tabbox{font-size:116%; margin:0 0 8%; .tac; .fb; width:100%; a{background:@gray; display:block; padding:15px 0; border-radius:6px; cursor:pointer; width:100%; margin:0 0 10px;} a:link{color:@white; .tdn; .trans;} a:visited{color:@white; .tdn;} a:hover{color:@white; .tdn; background:@greenL;} a:active{color:@white; .tdn;} a.tabselect{background:@green;} } /*********************** INSIDE ***********************/ div.balloon{position:relative; .inline;} div.balloon:before{content:""; position:absolute; top:-30px; left:50%; margin-left:-15px; border:15px solid transparent; border-bottom:15px solid @grayL;} .single{ div.pagebody{ article{ div.postbody{ section{margin:0 0 4%;} } } } } div.mapbtn{font-size:124%; .fb; .tac; margin:4% 0 0; a{background:@green; display:block; padding:10px 0;} a:link{color:@white; .tdn;} a:visited{color:@white; .tdn;} a:hover{color:@white; .tdn; background:@green;} a:active{color:@white; .tdn;} } /*********************** MESSAGE ***********************/ .category-message div.pageintro{margin:0;} div.msglist{padding:6% 6% 4%; background:@yellow; ul{ li.memthum{margin:0 auto 8%; a{display:block; padding:0 60px; img{border-radius:100%; border:4px solid @white; display:block;} /*div.hovercap{overflow:hidden; position:relative; div.imgmask{position:absolute; width:100%; height:100%; top:0; left:0; opacity:0; -webkit-transform: rotateY(-180deg); transform:rotateY(-180deg); -webkit-transition:all 0.5s ease; transition:all 0.5s ease;} .imgcaption{.tac;} } div.hovercap:hover{ div.imgmask{-webkit-transform:rotateY(0deg); transform:rotateY(0deg); opacity:1;} }*/ } p{background:@white; border:2px solid @black; border-radius:6px; padding:10px; margin:10px auto 0; width:220px; .tac; .fb;} } } } div.pagebody{ article{ section.msgtitle{ img{z-index:1; position:relative;} h2{z-index:2; position:relative; background:@green; color:@white; padding:15px;} } } } /*CONTACT*/ table{width:100%; margin:0 0 10px; background:@white; tr{width:100%; border-top:1px solid @grayL; border-bottom:1px solid @grayL; th{padding:18px 0 0 0; width:100%; display:block; text-align:left; .fb;} td{padding:15px 0; width:100%; display:block; textarea{width:100%; padding:10px; font-size:16px; resize:vertical; background:@white; border:1px solid @grayD;} input{width:100%; padding:10px; font-size:16px;} input[type="radio"]{width:auto;} } } } table.thbg{margin:0 0 4%; tr{border:1px solid @gray; th{padding:8px; background:@green; color:@white;} td{padding:8px;} } } span.required{background:@green; color:@white; font-size:85%; padding:5px 10px; border-radius:5px; .fb;} span.notrequired{background:@gray; color:@white; font-size:85%; padding:5px 10px; border-radius:5px; .fb;} div.btnsubmit{width:60%; margin:0 auto;} input[type="submit"],button{-webkit-appearance:button; cursor:pointer; outline:none;} input.soushin{width:100%; height:46px; line-height:46px; position:relative; .inline; .fb; font-size:108%; .tac; .tdn; border:none; color:@white; border-radius:10px; background-color:@gray; box-shadow:0 4px 0 @grayD; -webkit-transition:none; transition:none; cursor:pointer;} input.soushin:hover{background-color:@grayD; box-shadow:0 4px 0 @black;} input.soushin:active{background-color:@gray; top:4px; box-shadow:none;} /*PAGE TABLE*/ table.tablepress{width:100%; margin:0 0 4%; line-height:1.7; border-bottom:1px solid @grayL; border-top:1px solid @grayL; tr{width:100%; th{padding:8px; font-size:77%; width:auto; text-align:left; background:@grayL; .fb; border:1px solid @grayL; border-bottom:none;} td.column-1{padding:8px; font-size:77%; width:auto; text-align:left; background:@grayL; .fb; border:1px solid @grayL; border-bottom:none; white-space:nowrap;} td{padding:8px; font-size:77%; width:auto; border:1px solid @grayL; border-bottom:none; table{border-bottom:1px solid @grayL; margin:0!important;} } } } table.tablenormal{width:100%; margin:0 0 4%; line-height:1.7; tr{width:100%; th{padding:8px; width:100%; display:block; text-align:left; background:@grayLL; .fb; border:1px solid @grayL; border-bottom:none; span{font-size:85%;} } td.column-1{padding:8px; width:100%; display:block; text-align:left; background:@grayLL; .fb; border:1px solid @grayL; border-bottom:none;} td{padding:8px; width:100%; display:block; border:1px solid @grayL; border-bottom:none;} } } /*NEWS BLOG*/ div.bloglists{margin:0 auto 8%; ul{ li{margin:0 auto 4%; padding:0; a span.postdate{color:@green; display:inline-block; margin:0 10px 10px 0; font-size:93%;} a:link{color:@black; .tdn;} a:visited{color:@black; .tdn;} a:hover{color:@green; .tdn;} a:active{color:@black; .tdn;} article{ display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; section:first-child{width:40%;} section:last-child{width:56%;} } h3{line-height:1.6;} } } } /*wp-pagenavi base*/ .wp-pagenavi{clear:both; text-align:center; padding:0 0 20px;} .wp-pagenavi a, .wp-pagenavi span{color:@grayD; background:@white; border:solid 1px @gray; padding:8px 15px; margin:0 2px 5px; border-radius:3px; .tac; .tdn; .inline;} .wp-pagenavi a:hover{color:@white; background:@green; border-color:@green;} .wp-pagenavi span.current{color:@white; background:@green; background-color: @green; border-color: @green; .fb;} /*PAGENATION*/ div.pagenation{font-size:77%; letter-spacing:1px; margin:6% 0 0; a:link{color:@white; .tdn;} a:visited{color:@white; .tdn;} a:hover{color:@white; .tdn;} a:active{color:@white; .tdn;} a div{background:@green; display:block; padding:15px; border-radius:6px; .fb; .trans;} a div:hover{background:@greenL;} div.back{.tac; margin:0 0 4%;} } /*BACK*/ div#back{position:fixed; right:20px; bottom:88px; opacity:0.6; z-index:1000; .trans; a{display:block; color:@white; font-size:150%; border-radius:100%; padding:15px 10px; background:@black; .tdn;} } div#back:hover{opacity:1;} /************************ MAP ************************/ .ggmap{position:relative; height:0; overflow:hidden; padding-top:0px; padding-bottom:75%;} .ggmap iframe, .ggmap object, .ggmap embed{position:absolute; top:0; left:0; width:100%!important; height:100%!important;} /********************************************************************************************************/ /************************ PC ****************************************************************************/ /********************************************************************************************************/ @media(min-width:769px){ html,body{min-width:1240px;} .sp{display:none;} .leftbox{padding-right:20px;} .rightbox{padding-left:20px;} /*NAV*/ button#menubtn{right:20px; top:20px; line-height:80px; height:80px; width:80px;} button.btn:after{line-height:80px; height:80px; width:80px; font-size:220%;} button.active:after{line-height:80px; height:80px; width:80px; font-size:220%;} nav#spmenu{ ul{padding:60px 0 0; font-size:139%; li{ a{height:40px;} } } } /*HEADER*/ header{ h1{width:240px; margin:40px;} } /*TOP INTRO*/ div.topintro{position:relative; div.topintrotxt{ section{padding:40px 40px 40px 50%; text-align:left; h2{font-size:400%; letter-spacing:14px; margin:0 0 3%;} h3{font-size:154%; letter-spacing:2px;} } p{padding:60px 40px 40px 50%; font-size:116%; line-height:1.8; .fb;} p:last-child{font-size:139%; padding:0px 40px 60px 50%; text-align:left;} } div.people{position:absolute; bottom:60px; right:54%; left:auto; width:460px; max-width:460px;} } /*topbox*/ @keyframes moveBg{ 0%{background-position:0 0;} 100%{background-position:-2500px -895px;} } div.topbox{background-size:2500px 895px; animation:moveBg 30s infinite linear; article{padding:4% 6% 0 0; margin:0 auto 4%; border-radius:10px; h2{padding:24px 0; margin:0 0 4% -4%; letter-spacing:4px; font-size:168%; width:60%;} section{padding:0; margin:0; img{max-width:100%;} } section.txtbox{padding:4% 0 0 6%;} section.imgboxalt{padding:0 0 6% 0;} p{font-size:116%; line-height:1.8;} } ul.topbtn{ display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; li{width:48%; letter-spacing:4px; font-size:168%; margin:0; a{border-radius:10px; padding:40px 0;} } } } /*READMORE BTN*/ div.readmore{text-align:left;} section.titlebox{ h2{font-size:250%; letter-spacing:5px;} h3{font-size:139%; letter-spacing:2px;} span{padding:0 30px;} } /*MESSAGE SLIDER*/ div.msgslider{padding:60px 0 40px; div.carousel{margin:0 0 30px; ul{ li.memthum{ a{padding:0 30px;} } } } } div.topnews{padding:6% 0 4%; h2{font-size:250%; letter-spacing:4px;} } div.topyellow{padding:6% 0; article{border-radius:10px; padding:8%; margin:0 auto; img{max-width:100%; margin:0;} h2{font-size:220%; letter-spacing:4px;} h3{font-size:139%; margin:0 auto 12%;} p{line-height:1.8; margin:0;} } ul.topbn{ li{margin:0 auto 8%; font-size:160%; letter-spacing:5px; border-radius:10px; a{padding:62px 0;} } li:last-child{margin:0 auto;} } } /*FOOTER*/ footer{ div.footmain{padding:6% 0; h1{width:300px;} p{font-size:100%;} } div.copyright{font-size:100%;} } div.footbn{ ul{ li{float:left; width:33.333%; border-right:1px solid @gray; border-bottom:none; a{font-size:124%; padding:30px 0;} } li:last-child{border-right:none;} } } nav.footnav{ ul{font-size:116%; li{.inline; width:30%; a{display:block; padding:10px;} a:link{color:@black; .tdn;} a:visited{color:@black; .tdn;} a:hover{color:@green; .tdn;} a:active{color:@black; .tdn;} } } } /*****************************************************/ /*********************** PAGES ***********************/ /*****************************************************/ div.pageheader{height:400px;} div.pagetitle{padding:40px; h1{font-size:250%; letter-spacing:4px; margin:0 0 20px;} h2{font-size:169%; letter-spacing:3px;} } div.pageintro{padding:80px 0; background-size:2500px 895px; animation:moveBg 30s infinite linear; article{position:relative; padding:0 0 40px; h2{font-size:182%; letter-spacing:4px; padding:30px 0; margin:0 0 40px; border-bottom:6px solid @grayL;} h3{font-size:169%; letter-spacing:4px; padding:0 20px; .tac; .fb;} img{max-width:200px; position:absolute; bottom:-40px; right:60px;} img.career{bottom:-20px;} img.education{max-width:300px; bottom:-26px;} img.inside{max-width:300px; bottom:-20px;} img.msg{max-width:240px; bottom:-20px;} img.welfare{max-width:240px; bottom:-20px;} p{width:70%; font-size:116%; padding:0 60px; line-height:2;} p.notimg{width:100%; .tac;} } } div.pageyellow{padding:80px 0 60px; margin:0 0 80px;} div.pagebody{padding:0; article{margin:0 0 80px; .tabhide{display:none;} h2{font-size:220%; letter-spacing:4px; margin:0 0 20px;} h2.simpletitle{margin:0 0 40px;} h3{font-size:150%; letter-spacing:1px;} p{margin:0 0 20px;} div.postbody{ section{margin:0 0 30px;} img{margin:0 0 20px;} .size-thumbnail{width:320px; height:auto;} .size-medium{width:320px; height:auto;} .size-large{width:640px; height:auto;} .aligncenter{clear:both; display:block; overflow:hidden; margin: 0 auto 20px;} .alignleft{float:left; margin:0 20px 20px 0; .inline;} .alignright{float:right; margin:0 0 20px 20px; .inline;} img.alignleft + br{display:none;} img.alignright + br{display:none;} p:last-child{margin-bottom:0;} p{font-size:116%;} table{font-size:116%;} } } } /*********************** ABOUT ***********************/ ul.pointlist{font-size:116%; li{padding:0 0 15px; margin:0 0 15px;} } /*********************** CAREER ***********************/ div.futurebox{padding:0 0 6%;} ul.iconlist{ display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; li{width:31%; padding:25px; margin:0; h4{font-size:124%; letter-spacing:1px ;margin:0 auto 20px;} p{font-size:116%;} } } /*********************** EDUCATION ***********************/ /*********************** TAB ***********************/ ul.tabbox{font-size:139%; margin:0 0 80px; display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap; -webkit-justify-content:space-between; justify-content:space-between; -webkit-align-items:center; align-items:center; a{width:48%; margin:0; padding:30px 0;} } /*********************** INSIDE ***********************/ .page-inside{ ul.tabbox{ a{width:31%; margin:0; padding:30px 0;} } } div.balloon:before{top:50%; left:-30px; margin-top:-15px; margin-left:0; border-bottom:none; border:15px solid transparent; border-right:15px solid @grayL;} .reverse{ div.balloon:before{top:50%; left:auto; right:-30px; border-bottom:none; border-right:none; border:15px solid transparent; border-left:15px solid @grayL;} } .single{ div.pagebody{padding:0 100px 100px; article{ div.postbody{ section{margin:0 0 60px;} } } } } /*********************** MESSAGE ***********************/ div.msglist{padding:60px 0 60px; ul{clear:both; display:block; overflow:hidden; margin:0 0 40px; li.memthum{width:22%; margin:0 4% 4% 0; float:left; a{padding:0 10px; img{width:100%;} } p{margin:15px auto 0; width:220px;} } li.memthum:nth-child(4n){margin:0 0 4%;} } } div.pagebody{ article{ section.msgtitle{ h2{width:50%; margin:-30px 0 60px; padding:25px;} } } } /*CONTACT*/ table{margin:0 0 20px; border-bottom:1px solid @grayL; tr{border-top:1px solid @grayL; border-bottom:none; th{vertical-align:middle; padding:20px; width:auto; display:table-cell; white-space:nowrap;} td{vertical-align:middle; padding:20px; width:auto; display:table-cell; textarea{border:1px solid #ddd;} } } } table.thbg{margin:0 0 4%; tr{border:1px solid @gray; th{padding:15px;} td{padding:15px;} } } div.btnsubmit{width:60%; margin:0 auto;} input.soushin{height:54px; line-height:54px;} /*PAGE TABLE*/ table.tablepress{width:100%; margin-bottom:20px; border-bottom:none; tr{width:100%; border-top:1px solid @gray; th{font-size:100%; vertical-align:middle; padding:20px; width:auto; display:table-cell; white-space:nowrap; background:@grayLL; border:1px solid @gray;} td{font-size:100%; vertical-align:middle; padding:20px; width:auto; display:table-cell; border:1px solid @gray;} td.column-1{font-size:100%; vertical-align:middle; padding:20px; width:auto; display:table-cell; border:1px solid @gray;} } } table.tablenormal{width:100%; margin-bottom:20px; border-bottom:none; tr{width:100%; th{vertical-align:middle; padding:20px; width:auto; display:table-cell; white-space:nowrap; background:@grayL; border:1px solid @gray;} td{vertical-align:middle; padding:20px; width:auto; display:table-cell; border:1px solid @gray;} td.column-1{vertical-align:middle; padding:20px; width:auto; display:table-cell; border:1px solid @gray;} } } /*NEWS BLOG*/ div.bloglists{ ul{ display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; -webkit-justify-content:flex-start; justify-content:flex-start; li{width:30%; border:none; margin:0 auto 4%; article{display:block; section:first-child{width:100%; margin:0 0 15px;} section:last-child{width:100%;} } } } } /*PAGENATION*/ div.pagenation{font-size:124%; margin:0; a div{padding:30px 0; border-radius:10px;} div.back{width:50%; margin:0 auto;} } /*BACK*/ div#back{right:36px; bottom:36px;} /* MAP */ .ggmap{padding-bottom:40%;} .single{ table{width:100%!important; tr{width:100%!important; th{width:auto!important; display:table-cell!important;} td{width:auto!important; display:table-cell!important;} } } } } /************************ SP ************************/ @media (max-width:768px) { .pc{display:none;} .spmb{margin-bottom:6%;} img.width50{width:50%; margin:0 auto 15px!important; display:block;} .single{ table{font-size:77%; width:100%!important; tr{width:100%!important; th{width:auto!important; display:table-cell!important; padding:8px!important;} td{width:auto!important; display:table-cell!important; padding:8px!important;} } } } } /* SLICK ARROW */ .slick-prev,.slick-next{z-index:1000;position:absolute;top:50%;display:block;padding:0;-webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);cursor:pointer; color:transparent; border:none; outline:none; background:transparent;} .slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{opacity:0.7;} .slick-prev.slick-disabled:before,.slick-next.slick-disabled:before{opacity:0.2;} .slick-prev:before,.slick-next:before{font-family:'fontello';font-size:20px;width:30px;height:30px;line-height:30px;opacity:1;display:block;color:@black;} .slick-prev{left:0;} .slick-prev:before{content:'\e80c';} .slick-next{right:0;} .slick-next:before{content:'\e80e';} /*LETTER*/ strong{.fb;} em{color:@green;} .wf{font-family:Montserrat!important;} .attention{color:@red!important;} .greenletter{color:@green!important;} .fontsmall{font-size:77%!important;} .fontlarge{font-size:139%!important;} ::selection{background:@green; color:@white;} ::-moz-selection{background:@green; color:@white;} /*----------------------------------------------------- 10px = 77% 11px = 85% 12px = 93% 13px = 100% 14px = 108% 15px = 116% 16px = 123.1% 17px = 131% 18px = 138.5% 19px = 146.5% 20px = 153.9% 21px = 161.6% 22px = 167% 23px = 174% 24px = 182% 25px = 189% 26px = 197% ------------------------------------------------------*/