@charset "utf-8"; a, abbr, acronym, address, applet, article, aside, audio,b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video{font-size:100%; vertical-align:baseline; white-space:normal; margin:0; padding:0; border:0; outline:0; background:transparent; text-decoration: none;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;} ol, ul{list-style:none;} blockquote, q{quotes:none;}table{border-collapse:collapse; border-spacing:0;} *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-text-size-adjust:100%;} img{vertical-align:top; max-width:100%;} h1, h2, h3, h4, h5, h6{font-weight:normal;} /*--------------------------- Font1 ---------------------------*/ body{font-family:"ryo-gothic-plusn", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #3e3a39;word-wrap:break-word;letter-spacing: 0.05em;background: #fff;animation: fadeIn 2s ease 0s 1 normal;-webkit-animation: fadeIn 2s ease 0s 1 normal;font-style: normal;} /*--------------------------- 共通 ---------------------------*/ .cf:before, .cf:after {content: " ";display: table;} .cf:after {clear: both;} .cf{*zoom: 1;} .pc{display:inline-block!important;} .sp{display:none !important;} .indent{text-indent: -1em;padding-left:1em;} .container{ background:#f8faf9; width: 100%; position: relative;} .container .lineL{ width:4px; height: 98%; background: url(../images/common/line_long.gif) no-repeat; background-size: cover; position: absolute; top:2%; left: 0; right: 0; margin: auto; z-index: 0;} .container02{background:#f8faf9;margin-top: 70px;} .content{position: relative; z-index: 1;} img{ width: 100%;} a[href^="tel"]{ color:inherit; text-decoration:none; } @media only screen and (max-width:768px){ .pc{display:none !important;} .sp{display:block !important;} .container .lineL{ top:30px; height: 28%; } .container02{background:#f8faf9;margin-top: 50px;} } /*--------------------------- header ---------------------------*/ header.fixed { position: fixed; top: 0; } header{position:fixed;top: 0; width: 100%; background:#fff; z-index: 10; } header .inner{ max-width:1310px; width: 90%; margin: 0 auto;height: 70px; display: flex;align-items: center; } header .logo{ width: 110px; display: inline-block;} header .logo:hover{opacity: 0.8;} /* header ul{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; text-align: right; width: 100%;} header li{ display: inline-block; margin-left:20px; } header li a{font-size: 15px; color:#3e3a39; height: 70px; display: flex;align-items: center; border-bottom: 4px solid #fff;box-sizing: border-box;} header li a:hover{ border-bottom: 4px solid #0047ba; box-sizing: border-box; color: #0047ba; position: relative;} header li a:hover ul{ display: block; width:200px; background:#fff; position: absolute;bottom: -136px;} */ #gnav {font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-left: auto;} #gnav > ul {display: table;font-size: 15px; } #gnav > ul > li {display: table-cell;} #gnav > ul > li:hover {color: #3e3a39;} #gnav > ul > li:hover > a {color: #3e3a39;border-bottom: 4px solid #0047ba;box-sizing: border-box;} #gnav > ul > li:hover .menu {max-height: 9999px;opacity: 1;} #gnav > ul > li > a {font-size: 15px; color:#3e3a39; height: 70px; display: flex;align-items: center; padding: 0 20px; border-bottom: 4px solid #fff;box-sizing: border-box;transition: all .2s ease-in;} #gnav > ul .menu {transition: all .2s ease-in;max-height: 0;opacity: 0;overflow: hidden;width: 100%;left: 0;text-align: right;position: absolute;background: rgba(0,71,186,0.7);} #gnav > ul .menu .menu_inner {padding: 1em 0;max-width:1310px; width: 100%; margin: 0 auto;} #gnav > ul .menu .menu_inner li {display: inline-block;margin: 0 20px;} #gnav > ul .menu a {color: #fff;} #gnav > ul .menu a:hover {color: #fff;border-bottom: 1px solid #fff;} .btn{ display: none !important;} @media only screen and (max-width:768px){ #gnav{ display: none;} header .inner{ height: 50px;} header .logo{ width: 90px;} } /*--------------------------- SP Menu ---------------------------*/ .open .btn{display:block !important;} @media only screen and (max-width:768px){ .btn{ display: block !important;} .overlay{position:fixed; width:100%; height:110%; top:0; right:0; background:rgba(0,71,186,0.95); z-index:7777; overflow:auto;} .overlay nav{position:relative; top:5%; height:60%; width: 100%;} .overlay .left{ width:100%; float: left; } .overlay .right{ width:100%; float: left; } .overlay .left .logo{ width: 110px;} .overlay .left .sns{ width: 110px; margin-top: 30px;} .overlay .left .sns li{ width: 50px; margin-right: 10px; float: left;} .overlay .left .sns li:last-child{margin-right: 0;} .overlay .rights{font-size: 22px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-top:100px} .overlay .rights_s{font-size: 14px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-top: 10px; } .overlay .right .box{ float: left; margin-left:5%; width: 95%;} .overlay .right .tit{ color: #fff; font-size: 18px;} .overlay .right .mb{ margin-bottom: 8px;} .overlay .right .tit::before{ content: url(../images/common/line_mini2.gif); display: inline-block; margin-right: 5px;} .overlay .right ul{ border-left:2px solid #d8d8d8;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size: 16px;} .overlay .right ul li{ padding-left:15px; line-height: 100%; margin-bottom: 13px;} .overlay .right ul li:first-child{padding-top: 13px;} .overlay .right ul li::before{ content: url(../images/common/line_mini2.gif); display: inline-block; margin-right: 5px;} .overlay a{ color: #fff;} .overlay a:hover{ opacity: 0.8;} .overlay-door{visibility:hidden; width:0; right:0; -webkit-transition:width 0.5s 0.3s, visibility 0s 0.8s; transition:width 0.5s 0.3s, visibility 0s 0.8s;} .open .overlay-door{visibility:visible; width:100%; height:100%; -webkit-transition:width 0.5s; transition:width 0.5s;} .overlay-door nav{width:100%;} .overlay-door nav, .overlay-door .overlay-close{opacity:0; -webkit-transition:opacity 0.3s 0.5s; transition:opacity 0.3s 0.5s;} .open .overlay-door nav, .open .overlay-door .overlay-close{opacity:1; -webkit-transition-delay:0.5s; transition-delay:0.5s;} .overlay-door.close nav, .overlay-door.close .overlay-close{-webkit-transition-delay:0s; transition-delay:0s;} .btn{display:block; width:50px; height:50px; position:fixed; z-index:8888; right:0!important; top:0!important;background:#0047ba;} .btn button{border:none; outline:none; background:none; text-indent:-9999px; position:absolute; top:18px; right:15px; width:18px; height:15px; cursor:pointer; z-index:10000; overflow:hidden; border-top:2px solid #fff;} .btn button::before, .btn button::after{position:absolute; left:0; content:""; width:22px; height:0; border-top:2px solid #fff;} .btn button::before{top:3px; -webkit-transition:all .2s ease; transition:all .2s ease;} .btn button::after{bottom:3px; -webkit-transition:all .2s ease; transition:all .2s ease;} .open button{border-top:none; top:10px !important; width:20px; height:20px;} .open button::before, .open button::after{top:12px; width:20px;} .open button::before{-webkit-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-transition:all .2s ease; transition:all .2s ease;} .open button::after{-webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-transition:all .2s ease; transition:all .2s ease;} #trigger-overlay{ display:block;} } /*--------------------------- footer ---------------------------*/ footer{ width: 100%;} footer .inner{ width:100%; max-width: 1136px; margin: 0 auto; padding: 50px 0;} footer .left{ width:30%; float: left; } footer .right{ width:70%; float: left; } footer .left .logo{ width: 110px;} footer .left .sns{ width: auto; margin-top: 30px;} footer .left .sns li{ width: 50px; margin-right: 10px; float: left;} footer .left .sns li:last-child{margin-right: 0;} footer .rights{font-size: 22px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-top:100px} footer .rights_s{font-size: 14px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-top: 10px; } footer .right .box{ float: left; margin-left:4.2%;} footer .right .tit{} footer .right .tit::before{ content: url(../images/common/line_mini.gif); display: inline-block; margin-right: 5px;} footer .right ul{ border-left:2px solid #0047ba;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size: 14px;} footer .right ul li{ padding-left:15px; line-height: 100%; margin-bottom: 13px;} footer .right ul li:first-child{padding-top: 13px;} footer .right ul li::before{ content: url(../images/common/line_mini.gif); display: inline-block; margin-right: 5px;} footer a{ color: #3e3a39;} footer a:hover{ opacity: 0.8;} .pagetop{position: fixed; bottom: 100px; right: 2%; width: 100px; z-index: 10;} @media only screen and (max-width:768px){ footer{ position: relative;} footer .inner{ width:90%; padding: 40px 0;} footer .left{ width:100%; margin-top: 30px;} footer .right{ width:100%; margin-top: 0px;} footer .left .logo{float: left; margin-right: 20px; padding-top: 8px;} footer .left .sns{ margin-top: 0; float: left;} footer .rights{font-size: 18px;margin-top:20px; width: 100%; clear: both; margin-top: 20px;} footer .rights_s{font-size: 10px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-top: 10px; } footer .right .box{margin-left:0; float: none; margin-top: 20px;} footer .right .mt{margin-top: 32px;} footer .right .tit{font-size: 18px;} footer .right ul{ font-size: 16px;} footer .right ul li{margin-bottom: 12px;} footer .left .sns{ width: auto;} footer .left .sns li{ width: 40px;} .pagetop{position: absolute; bottom: 0; top: 55px; right: 1%; width: 80px; z-index: 10;} } /*--------------------------- top-hero ---------------------------*/ #top-hero{ width:100%;margin:70px auto 0 auto; position:relative;} #top-hero .slider{ width:100%;} #top-hero img{ width:100%; height: auto;} #sp-hero{ display: none;} @media only screen and (max-width:768px){ #top-hero{ display: none;} #sp-hero{margin:50px auto 0 auto; display: block;} #sp-hero img{ width:100%; height: auto;} } #top-product{} #top-product h2{ max-width: 418px; width: 90%; padding: 200px 0 80px 0; margin: 0 auto;} #top-product h2 .msubtit{ font-size: 22px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; text-align: center; margin-top: 25px; display: block;} #top-product .group{ width:100%; max-width: 1136px; margin: 0 auto;} #top-product li{width: 32.666666%; margin-right: 1%; float: left;background: #fff; position: relative; padding-bottom: 50px;} #top-product li:last-child{ margin-right: 0;} #top-product li .line{ width: 4px; height: 36px; background:#ff0000; position: absolute; top:0; left: 0; right: 0; margin:auto;} #top-product li h3{font-size: 38px; text-align: center; line-height: 35px; padding-top: 50px;font-family: "runda",sans-serif; font-weight: 300;} #top-product li h3 span{ font-size:24px; } #top-product li a h3 { color:#3e3a39; } #top-product li a:hover{opacity:0.8; } #top-product li .product{ width: 100%; margin-top: 30px;} #top-product li .model{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; text-align: center; color: #9fa0a0;} #top-product .info{ width:100%; max-width: 1136px;margin: 200px auto 0;} #top-product .rbox{ max-width: 995px; float: right;width: 100%; margin-bottom:145px; } #top-product .llox{ max-width: 995px; float: left;width: 100%; margin-bottom:145px;} #top-product .pict{ width:48%; display: inline-block; vertical-align: top;} #top-product .cbox{ width:51%; display: inline-block; position: relative; vertical-align: top;} #top-product .bg01{ width:174px; position: absolute; top: 0;right: 0; z-index: 0;} #top-product .bg02{ width:209px; position: absolute; top: 0;left: 0; z-index: 0;} #top-product .bg03{ width:239px; position: absolute; top: 0;right: 0; z-index: 0;} #top-product .bg04{ width:190px; position: absolute; top: 0;left: 0; z-index: 0;} #top-product .cinner{ padding:0 10%; position: relative; z-index: 1;} #top-product .cinner h3{font-size:44px; line-height: 50px; font-family: "runda",sans-serif; font-weight: 300;} #top-product .cinner h3 span{ font-size:24px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; } #top-product .cinner .copy{ font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-top: 40px; line-height: 200%;} #top-product .llox h3, #top-product .llox .copy{ text-align: right;} #top-product .llox .btn-1{ float: right;} @media only screen and (max-width:768px){ #top-product{ width: 90%; margin: 0 auto;} #top-product h2{padding: 100px 0 30px 0;} #top-product h2 .msubtit{ margin-top: 10px;} #top-product li{width: 100%; margin-right:0; float: none;padding-bottom: 50px; margin-bottom: 20px;} #top-product li h3{font-size: 38px;line-height: 35px; padding-top: 50px;} #top-product li .product{margin-top: 10px;} #top-product #service{ padding-top: 100px; margin-top: -100px;} #top-product .info{margin: 50px auto 0;} #top-product .rbox{margin-bottom:30px; } #top-product .llox{ margin-bottom:30px;} #top-product .pict{width: 100%;} #top-product .cbox{ width:100%;} #top-product .cinner{padding: 15px;} #top-product .cinner h3{ font-size:33px; line-height: 36px;} #top-product .cinner .copy{ margin-top: 10px; line-height: 180%;} #top-product .llox h3, #top-product .llox .copy{ text-align:left;} #top-product .llox .btn-1{ float: none;} } /*--------------------------- top-news ---------------------------*/ #top-news{ width:100%;margin:20px auto 0 auto; background:url(../images/top/news/bg.jpg) no-repeat; background-size: cover; padding:95px 0; } #top-news .inner{ width:100%; max-width: 1136px; margin: 0 auto;display: flex;align-items: center;} #top-news .left{ float: left; width: 30%; } #top-news .left h2{width: 218px; height: 218px;line-height: 80%;font-size: 48px;text-decoration: none;display: block;text-align: center;background: #fff;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;font-family: "runda",sans-serif; font-weight: 300; display: flex;flex-direction: column; justify-content: center;align-items: center;} #top-news .left span{text-align: center; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size: 18px;} #top-news .right{ float: right; width: 70%; } #top-news .right .box{} #top-news .right dl{ padding:25px 0; border-bottom: 1px solid #9fa0a0;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size: 14px;} #top-news .right dt{ width: 20%; display: inline-block;vertical-align:top;line-height: 200%; } #top-news .right dd{ width: 79%; display: inline-block; vertical-align:top; line-height: 200%;} #top-news .right dd a{ color: #0047ba;} #top-news .right dd a:hover{ opacity: 0.8;} #top-news .btneria{ width:100%; max-width: 1136px; margin: 0 auto;} @media only screen and (max-width:768px){ #top-news{ padding:50px 0; } #top-news .inner{ width:90%; margin: 0 auto;display: block;align-items: center;} #top-news .left{ float: left; width: 100%; } #top-news .right{ float: right; width: 100%; } #top-news .left h2{width: 150px; height: 150px;font-size: 30px; margin: 0 auto 20px auto; padding-top: 0;display: flex;flex-direction: column; justify-content: center;align-items: center;} #top-news .right dl{ padding:15px 0;} #top-news .right dt{ width: 100%; display: inline-block;vertical-align:top;line-height: 180%;} #top-news .right dd{ width: 100%; display: inline-block; vertical-align:top; line-height: 180%;} #top-news .btneria{ width:90%;} } /*--------------------------- top-contact ---------------------------*/ #top-contact{ width:100%;margin:0 auto; background:url(../images/top/contact/bg.jpg) no-repeat; background-size: cover; padding:95px 0; color: #fff; } #top-contact h2{ font-size:36px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; text-align: center; margin-bottom: 75px;} #top-contact .box{ max-width: 1136px; margin: 0 auto 55px;display: flex;justify-content: center;align-items: center;} #top-contact .left{ width: 40%; text-align: left; margin-right: 3%;} #top-contact .right{ width: 40%; text-align: left; margin-left: 3%;} #top-contact .cent{ width: 14%; height:1px; border-bottom: 1px solid #fff;} #top-contact .left h3{ font-size:24px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;} #top-contact .left .copy{ font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; line-height: 200%; margin-top: 20px;} #top-contact .right .tel{font-size:40px;font-family: "runda",sans-serif; font-weight: 700; padding-left: 5%; } #top-contact .right .copy{ font-size:20px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;padding-left: 5%;line-height: 200%; margin-top: 10px;} #top-contact .left .copy a{ color: #fff; text-decoration: underline;} #top-contact .left .copy a:hover{opacity: 0.8;} @media only screen and (max-width:768px){ #top-contact{ background:url(../images/top/contact/bg.jpg) no-repeat center; padding:50px 0; } #top-contact h2{ font-size:28px; margin-bottom: 40px;} #top-contact .box{ width: 90%; margin: 0 auto 55px;display: block;justify-content: center;align-items: center;} #top-contact .left{ width: 100%;margin-right: 0%;} #top-contact .right{ width: 100%;margin-left: 0%;} #top-contact .cent{display: none;} #top-contact .left h3{ font-size:21px;} #top-contact .left .copy{ line-height: 180%; margin-top: 20px;} #top-contact .right .tel{font-size:26px; padding-left:0; margin-top: 10px;} #top-contact .right .copy{ padding-left: 0;line-height: 180%; margin-top: 0;font-size:16px;} } /*--------------------------- products ---------------------------*/ #products{} #products .hero{ width: 100%; height: 400px; background:url(../images/products/hero.jpg)no-repeat; background-size: cover;display: flex;flex-direction: column; justify-content: center;align-items: center;} #products .hero .inner{width:90%; max-width: 1136px; margin: 0 auto;} #products .hero .tit{max-width: 418px; width: 100%;} #products .hero .tit span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; color: #fff; display: block; margin-top: 20px;} #products .hero .copy{font-size: 14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;color: #fff; line-height: 200%; margin-top: 30px;} #products .series{} #products .series .inner{width:100%; max-width: 1136px; margin:100px auto 0;} #products .series ul{} #products .series li{max-width: 400px; width: 30%; margin-right: 5%; position: relative; float: left;} #products .series li:last-child{ margin-right: 0;} #products .series li .outer{ position: relative; z-index: 1;} #products .series li .line{ width: 4px; height: 80%; background: url(../images/common/line_mid.gif) no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; margin: auto;z-index: 0;} #products .series li .pict{ width: 100%; position: relative;z-index: 2;} #products .series li .tit{ font-size: 38px;font-family: "runda",sans-serif; font-weight: 300; text-align: center; padding: 83px 0 30px 0;} #products .series li .box{ background: #fff; width: 100%; margin-top: -80px; padding: 100px 25px 80px 25px; position: relative; z-index: 1;} #products .series li .subtit{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; text-align: center;} #products .series li .subtit::after{ content:url(../images/common/line_mini_red.gif);display:block; width: 4px; margin: 0 auto;} #products .series li .txt{ font-size: 13px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; line-height: 200%; margin-top: 10px;} #products .series02{} #products .series02 .inner{width:100%; max-width: 1136px; margin:160px auto 0; padding-bottom: 100px; border-bottom: 1px solid #3e3a39;} #products .series02 .titline{width: 4px; height: 94px; background: url(../images/common/line_series.gif) no-repeat; background-size: cover; margin: 0 auto;} #products .series02 .midashi{font-size:48px;font-family: "runda",sans-serif; font-weight: 300;text-align: center;margin-top: 20px; border-bottom: 1px solid #3e3a39;} #products .series02 .midashi span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; display: block; margin-top: 10px; padding-bottom: 30px;} #products .series02 ul{} #products .series02 li{width:31.33333%; margin-right: 3%; position: relative; float: left; margin-top: 100px;} #products .series02 li:nth-child(3n) { margin-right: 0;} #products .series02 li .pict{ width: 100%; } #products .series02 li .pict img{ height: auto;} #products .series02 li .pict img:hover{ opacity: 0.8;} #products .series02 li .tit{font-size: 32px;font-family: 'Anton', sans-serif;text-align: center; color:#000; margin-bottom: 20px;height:100px;} #products .series02 li .tit .roma{font-family: "ＭＳ Ｐゴシック", "MS PGothic";font-weight: bold;font-size: 43px; display: inline-block;} #products .series02 li .tit .red{ color: #ff0000;} #products .series02 li .tit::before{ content:url(../images/common/line_mini_red.gif);display:block; width: 4px; margin: 0 auto;} #products .series02 dl{ width: 100%; height: 52px;display: flex; justify-content: center;} #products .series02 dl .bt{border-bottom:1px solid #b5b5b6;} #products .series02 dt{ width: 22%; margin-right: 2%; border-top:1px solid #b5b5b6;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;font-size:12px;display: flex;align-items: center;} #products .series02 dd{ width: 76%; border-top:1px solid #b5b5b6;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300; font-size:14px;display: flex;align-items: center; } #products .series02 .btn_box{ margin-top:50px; clear: both; } #products .special{} #products .special .line{ position: relative; z-index: 1; background: url(../images/common/line_special.gif) no-repeat; width: 4px; height:332px; margin: 0 auto; background-position: bottom;} #products .special .inner{ background: url(../images/products/bg_special.gif) no-repeat; background-size: cover; position: relative; z-index: 0; margin-top:-18px; padding: 70px 0;} #products .special .midashi{font-size:48px;font-family: "runda",sans-serif; font-weight: 300;text-align: center;} #products .special .midashi span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; display: block; margin-top: 10px; } #products .special .box{ max-width: 964px; margin: 120px auto 0;} #products .special .disply{ display: flex;align-items: center;} #products .special .box .pict{max-width: 444px; width:45%; float: left; } #products .special .box .txt_box{max-width: 520px; width:55%; float: left; } #products .special .box dl{ padding-left: 12%;} #products .special .box .nml{ padding-left:0;} #products .special .box dt{ background:url(../images/common/line_w.gif) no-repeat; width: 144px; height: 4px;} #products .special .box .tit{ font-size: 26px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; margin-top:25px;} #products .special .box .tit span{font-size: 21px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; } #products .special .box .txt{font-size: 14px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; line-height: 200%; margin-top:40px; } #products .option{background:url(../images/products/bg_option.gif) no-repeat; background-size: cover; padding-bottom: 154px; position: relative;} #products .midashi_box{ height: 250px; max-width: 1136px; margin: 0 auto; position: relative;} #products .midashi_box .line{ height:250px; width: 4px; background: url(../images/common/line_option.gif) no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; margin: auto;z-index: 0;} #products .option .midashi{font-size:48px;font-family: "runda",sans-serif; font-weight: 300;text-align: center; color: #fff; position: relative; z-index: 1; padding-top:100px;border-bottom: 1px solid #727171; } #products .option .midashi span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; display: block; margin-top: 10px; padding-bottom: 50px;} #products .option ul{max-width: 944px; margin: 90px auto 0; width: 100%;} #products .option li{max-width: 174px; margin-right:82px; float: left; margin-bottom: 82px;} #products .option .big{max-width: 431px;} #products .option .nmr{ margin-right: 0;} #products .option .spec{max-width: 1136px; width: 100%; margin:44px auto 0; padding-bottom: 88px;border-bottom: 1px solid #727171;} #products .option .bline{height:154px; width: 4px; background: url(../images/common/line_option2.gif) no-repeat; background-size: cover; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;z-index: 0;} @media only screen and (max-width:768px){ #products .hero{ background:url(../images/products/hero.jpg)no-repeat center; } #products .hero .tit span{ margin-top: 10px;} #products .hero .copy{ line-height: 180%;} #products .series .inner{width: 90%; margin: 50px auto 0 auto;} #products .series li{ width: 100%; max-width:100%; margin-top: 100px; margin-right: 0;} #products .series li:first-child{ margin-top: 0;} #products .series li .tit{ padding: 53px 0 20px 0;} #products .series li .box{padding: 85px 25px 70px 25px;} #products .series02 .inner{margin:50px auto 0; padding-bottom: 50px; border-bottom: 1px solid #3e3a39;} #products .series02 .midashi{ font-size: 38px; margin-top: 10px;} #products .series02 .midashi span{ margin-top: 0; padding-bottom: 10px;} #products .series02 ul{width: 90%; margin: 0 auto;} #products .series02 li{margin-top: 50px; width: 100%; margin-right: 0;} #products .series02 li .tit{ margin-bottom: 20px; height: auto;} #products .series02 dt{ width: 24%;} #products .series02 dd{ font-size: 12px; width: 74%;} #products .series02 .btn_box{ margin-top: 30px;} #products .special .line{ height:130px; } #products .special .midashi{font-size:38px;} #products .special .midashi span{ margin-top: 0; } #products .special .box{ width: 90%; margin: 50px auto 0 auto;} #products .special .box .pict{ width: 100%; max-width:100%;} #products .special .box .txt_box{ width: 100%;max-width:100%;} #products .special .box dl{ padding-left: 0;} #products .special .box dl.mt{ margin-top: 20px;} #products .special .box .tit{font-size: 23px; margin-top: 10px;} #products .special .box .txt{ margin-top: 20px; line-height: 180%;} #products .special .disply{ display: block;} #products .option{ padding-bottom: 0;} #products .option .midashi{ font-size: 38px;} #products .option ul{margin: 50px auto 0 auto; width: 90%;} #products .option li{ width: 48%; max-width:48%; margin: 0 4% 50px 0;} #products .option .big{ width: 100%;max-width:100%; } #products .option .nmr2{ margin-right: 0;} #products .option .spec{ margin-top: 0; padding-bottom: 50px;} #products .option .bline{ display: none;} } /*--------------------------- products_detail ---------------------------*/ .sticky_logo {top:190px;} .sticky_box {top: 360px;} .bottom {bottom:0} #products_detail{} #products_detail .hero{ width: 100%; height: 400px; background:url(../images/products/detail/hero_bg.jpg) no-repeat; background-size: cover; position: relative;} #products_detail .hero .inner{max-width: 944px; width: 100%; margin: 0 auto; position: relative;} #products_detail .hero .main{ width: 360px; position: absolute; top:60px; right: 0; z-index: 1; } #products_detail .hero .main img{ height: auto;} #products_detail .area{width:100%;height: 1600px; max-width: 944px; margin: 0 auto; position: relative; margin-top: -340px; padding-bottom: 100px;} #products_detail .area .logo{ width:100%; height: 94px; padding-bottom: 580px; font-size: 75px;font-family: 'Anton', sans-serif; color: #000; letter-spacing: 0.05em; line-height: 80%;} #products_detail .area .logo p{ font-size: 28px;font-family: "runda",sans-serif; font-weight: 700; letter-spacing: 0;} #products_detail .area .logo span{ color: #ff0000;letter-spacing: 0;} #products_detail .area .logo .roma{font-family: "ＭＳ Ｐゴシック", "MS PGothic"; font-size: 90px; margin-left: -15px; font-weight: bold;} #products_detail .area .box{max-width: 525px; width: 60%; background: url(../images/common/line_red.gif) no-repeat; background-size:contain; background-position: top left; margin-top: 0;} #products_detail .area .txt_box{ padding-left:40px; } #products_detail .area .txt{font-size: 16px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; line-height: 200%; } #products_detail .area .read{font-size: 22px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;line-height: 230%; margin-top: 30px;} #products_detail .area .pict_box{max-width: 419px; width: 40%; float: right; margin-top:-400px; position: relative; } #products_detail .area .pict_box li{ width: 100%; margin-bottom: 65px;} #products_detail .spec{ background: #fff; width: 100%; padding-top: 120px; padding-bottom:85px; } #products_detail .spec .inner{max-width: 944px; width: 100%; margin: 0 auto; } #products_detail .spec .tit{font-size: 24px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; position: relative;} #products_detail .spec .tit span{font-size: 18px; font-family: "runda",sans-serif; font-weight: 300; position: absolute; right: 0; top: 10px;} #products_detail .spec .tit_line{ background: url(../images/common/line_w_b.gif) no-repeat; background-size: cover; width: 100%; height: 1px; margin-top: 5px;} #products_detail .spec .spec_box{ margin-top: 50px;} #products_detail .spec dl{ width: 100%;display: flex; justify-content: center;} #products_detail .spec dl .bt{border-bottom:1px solid #b5b5b6;} #products_detail .spec dt{ width: 30%;border-top:1px solid #b5b5b6;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;font-size:12px;background: #0047ba; color: #fff; padding: 2% 0 2% 4%;} #products_detail .spec dd{ width: 70%; border-top:1px solid #b5b5b6;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; font-size:12px; padding: 2% 0 2% 4%; } #products_detail .spec dd a{ color:#0047ba; display: block; } #products_detail .spec dd a:hover{opacity: 0.8; } #products_detail .spec .note{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;font-size:12px; margin-top: 20px; line-height: 200%;} #products_detail .spec .size{ width: 100%; margin-top: 50px;} #products_detail .spec .size img{ margin-top: 50px; } #products_detail .contact{background: url(../images/products/detail/contact_bg.jpg) no-repeat; background-size: cover; width: 100%; height: 300px;display: flex;align-items: center; border-bottom: 1px solid #0047ba; border-top: 1px solid #0047ba;} @media only screen and (max-width:768px){ #products_detail .hero{ height: 420px;} #products_detail .hero .main{ width: 35%; position: relative; z-index: 1; margin: 0 auto; right: 0; top: 30px;} #products_detail .area{width:100%;height: auto; max-width: 944px; margin: 0 auto; position: relative; margin-top: -110px; padding-bottom: 30px;} #products_detail .area .logo{ width: 90%; height: auto; position: -webkit-relative; /* Safariに対応する */position: relative; /* 要素を固定/解除する */ top: 0; padding-bottom: 18%; margin: 0 auto; font-size: 35px;line-height: 110%;} #products_detail .area .logo p{ font-size: 28px;font-family: "runda",sans-serif; font-weight: 700; letter-spacing: 0;} #products_detail .area .logo span{ color: #ff0000;letter-spacing: 0;} #products_detail .area .logo .roma{font-family: "ＭＳ Ｐゴシック", "MS PGothic"; font-size: 43px; margin-left: -7px; font-weight: bold;} #products_detail .area .box{max-width:100% ; width: 100%; background:none; background-size:contain; background-position: top left;position: -webkit-relative; /* Safariに対応する */position: relative; /* 要素を固定/解除する */ top: 0; margin-top: 0;} #products_detail .area .txt_box{ padding-left:0; width: 90%; margin: 0 auto;} #products_detail .area .txt{font-size: 14px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; line-height: 180%;} #products_detail .area .read{font-size: 18px; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;line-height: 180%; margin-top: 20px;} #products_detail .area .pict_box{max-width: 90%; width: 90%; float: none; margin:30px auto 0; position: relative; } #products_detail .area .pict_box li{ width: 100%; margin-bottom: 30px;} #products_detail .spec{ padding-top: 50px; padding-bottom: 50px;} #products_detail .spec .inner{ width: 90%;} #products_detail .spec .spec_box{ margin-top: 30px;} #products_detail .spec .size{ margin-top: 30px;} #products_detail .spec .size img{ margin-top: 30px; } #products_detail .contact{ height: 200px;} } @media only screen and (max-width:480px){ #products_detail .hero .main{ width: 50%;} } @media only screen and (max-width:375px){ #products_detail .hero .main{ width: 55%;} } @media only screen and (max-width:320px){ #products_detail .hero .main{ width: 60%;} } /*--------------------------- plan ---------------------------*/ #plan{} #plan .hero{ width: 100%; height: 400px; background:url(../images/plan/hero.jpg)no-repeat; background-size: cover;display: flex;flex-direction: column; justify-content: center;align-items: center;} #plan .hero .inner{width:100%; max-width: 1136px; margin: 0 auto;} #plan .hero .tit{font-size: 48px;font-family: "runda",sans-serif; font-weight: 300;color: #fff; } #plan .hero .tit span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; color: #fff; display: block; margin-top: 20px;} #plan .hero .copy{font-size: 14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;color: #fff; line-height: 200%; margin-top: 30px;} #plan #introduction{margin:100px auto 0;} #plan #introduction .titline{width: 4px; height: 94px; background: url(../images/common/line_series.gif) no-repeat; background-size: cover; margin: 0 auto;} #plan #introduction .inner{width:100%; max-width: 1136px; margin: 0 auto;padding-bottom: 90px; border-bottom: 1px solid #3e3a39;} #plan #introduction .titline{width: 4px; height: 94px; background: url(../images/common/line_series.gif) no-repeat; background-size: cover; margin: 0 auto;} #plan #introduction .midashi{font-size:48px;font-family: "runda",sans-serif; font-weight: 300;text-align: center;margin-top: 20px; border-bottom: 1px solid #3e3a39;} #plan #introduction .midashi span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; display: block; margin-top: 10px; padding-bottom: 30px;} #plan #introduction .plan{ width: 90%; margin: 85px auto;} #plan #introduction .sub_tit{width: 126px; height: 126px;line-height: 126px;font-size: 21px;text-decoration: none;display: block;text-align: center;background: #edf1ea;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; margin: 0 auto; color: #666666;} #plan #introduction ul{width:90%; max-width: 1136px; margin: 50px auto 0 auto;} #plan #introduction li{max-width: 32%; margin-right: 2%; float: left;} #plan #introduction li:last-child{ margin-right: 0;} #plan #example{} #plan #example .line{ position: relative; z-index: 2; background: url(../images/common/line_special.gif) no-repeat; width: 4px; height:200px; margin: 0 auto; background-position: bottom;} #plan #example .outer{position: relative; z-index: 0; margin-top:-18px; position: relative;z-index: 1;} #plan #example .bg{ background: url(../images/plan/example_bg.png) no-repeat; background-size: cover; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;} #plan #example .midashi{font-size:48px;font-family: "runda",sans-serif; font-weight: 300;text-align: center; padding: 0 0 70px 0;position: relative; z-index: 3;} #plan #example .midashi span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; display: block; margin-top: 10px; position: } #plan #example .section01{ background: #dcdcdc;padding: 70px 0;} #plan #example .section02{ background: #f8faf9;padding: 70px 0;} #plan #example .inner{width:100%; max-width: 1136px; margin: 0 auto;} #plan #example .section01 .box{width:100%; max-width: 1136px; float: right; position: relative;z-index: 3;} #plan #example .section02 .box{width:100%; max-width: 1136px; float: left;position: relative;z-index: 3;} #plan #example .section01 .box .no_box{ float: left; width: 20%;} #plan #example .section02 .box .no_box{ float: left; width: 20%; text-align: right;} #plan #example .box .no_box .no{font-size:130px;font-family: "runda",sans-serif; font-weight: 700; color: rgba(0,71,186,0.2);} #plan #example .box .detail{ float: left;width: 80%; padding:8% 6% ; background:#fff;} #plan #example .box .hero_box{} #plan #example .box .hero_box .txt_box{ width:47%; float: left; position: relative; color: #666666;} #plan #example .box .hero_box .txt_box .icon{ position: absolute; width:100px; height: 131px; top: 20px; right: 0; background:url(../images/plan/icon.png)no-repeat; background-size: cover; z-index: 0;} #plan #example .box .hero_box .txt_box .tit{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300; margin-top: 30px; position: relative;z-index: 1; line-height: 120%;} #plan #example .box .hero_box .txt_box .tit span{font-size: 14px;font-weight: 400; display: block; margin-top: 10px;} #plan #example .box .hero_box .pict{width:47%; float: right; } #plan #example .box .hero_box .txt_box .min_line{ background:url(../images/common/line_w.gif) no-repeat; height: 4px; width: 125px; background-size: contain;} #plan #example .box .hero_box .txt_box .sub_tit{font-size: 14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; color: #0047ba; margin-top: 40px;} #plan #example .box .hero_box .txt_box .table01{ width: 100%;margin-top: 5px;} #plan #example .box .hero_box .txt_box .table01 .bt{border-bottom:1px solid #b5b5b6;} #plan #example .box .hero_box .txt_box .table01 dt{ width: 35%; margin-right: 2%; border-top:1px solid #b5b5b6;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;font-size:12px; float: left;display: flex;align-items: center;height: 50px;} #plan #example .box .hero_box .txt_box .table01 dd{ width: 63%; border-top:1px solid #b5b5b6;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300; font-size:14px;float: left; display: flex;align-items: center; height: 50px;} #plan #example .box .hero_box .txt_box .table02{ width: 100%; margin-top: 5px;} #plan #example .box .hero_box .txt_box .table02 dt{ width: 100%;border-top:1px solid #b5b5b6;border-bottom:1px solid #b5b5b6;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300;font-size:14px; display: flex;align-items: center; padding:10px 0; line-height: 160%;} #plan #example .box .clum2{ margin-top: 30px;} #plan #example .box .clum2 .sub_tit02{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300; color:#0047ba; } #plan #example .box .clum2 .sub_tit02 span{ font-size: 14px; display: block; margin-top: 5px;} #plan #example .box .clum2 .pink{color:#b442ab; } #plan #example .box .clum2 .left{ width: 47%; float: left;} #plan #example .box .clum2 .right{ width: 47%; float: right;} #plan #example .box .clum2 .table03{ width: 100%; margin-top: 5px;} #plan #example .box .clum2 .table03 dt{ width: 100%;border-top:1px solid #b5b5b6;border-bottom:1px solid #b5b5b6;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300;font-size:14px; display: flex;align-items: center; padding:20px 0; line-height: 200%;} #plan #example .box .pict_box{ margin-top: 50px; padding: 20px 0;border-top:1px solid #b5b5b6;border-bottom:1px solid #b5b5b6;} #plan #example .box .pict_box .left{ width: 47%; float: left;} #plan #example .box .pict_box .right{ width: 47%; float: right;} #plan .contact{background: url(../images/products/detail/contact_bg.jpg) no-repeat; background-size: cover; width: 100%; height: 300px;display: flex;align-items: center; border-bottom: 1px solid #0047ba; border-top: 1px solid #0047ba;} @media only screen and (max-width:768px){ #plan .hero{background:url(../images/plan/hero.jpg)no-repeat center;} #plan .hero .inner{width: 90%;} #plan .hero .tit{ font-size: 38px;} #plan .hero .copy{ line-height: 180%;} #plan #introduction{margin: 50px auto 0;} #plan #introduction .inner{ padding-bottom: 30px;} #plan #introduction .midashi{ font-size: 38px; margin-top: 10px;} #plan #introduction .midashi span{ margin-top: 0; padding-bottom: 20px;} #plan #introduction .plan{ margin: 40px auto; width: 90%;} #plan #introduction ul{ width: 90%; margin: 30px auto 0;} #plan #introduction li{max-width: 100%; margin-right: 0; margin-bottom: 20px;} #plan #example .line{ height: 100px;} #plan #example .section01, #plan #example .section02{ padding: 50px 0} #plan #example .midashi{font-size:38px; padding-bottom: 30px;} #plan #example .midashi span{ margin-top: 0;} #plan #example .section01 .box, #plan #example .section02 .box{ width: 90%; margin: 0 auto; float: none;} #plan #example .section01 .box .no_box, #plan #example .section02 .box .no_box{ display: none;} #plan #example .box .detail{ width: 100%;} #plan #example .box .hero_box .txt_box .icon{ display: none;} #plan #example .box .hero_box .txt_box{width: 100%; margin-bottom: 30px;} #plan #example .box .hero_box .txt_box .sub_tit{ margin-top: 20px;} #plan #example .box .hero_box .pict{ width: 100%;} #plan #example .box .clum2 .left{width: 100%; margin-bottom: 20px;} #plan #example .box .clum2 .right{width: 100%;} #plan #example .box .clum2 .table03 dt{ line-height: 180%;} #plan #example .box .pict_box{ margin-top: 20px;} #plan #example .box .pict_box .left{ width: 100%; margin-bottom: 20px;} #plan #example .box .pict_box .right{ width: 100%;} #plan .contact{ height: 200px;} } /*--------------------------- subsidies ---------------------------*/ #subsidies{} #subsidies .hero{ width: 100%; height: 400px; background:url(../images/subsidies/hero.jpg)no-repeat; background-size: cover;display: flex;flex-direction: column; justify-content: center;align-items: center;} #subsidies .hero .inner{width:100%; max-width: 1136px; margin: 0 auto;} #subsidies .hero .tit{font-size: 48px;font-family: "runda",sans-serif; font-weight: 300;color: #fff; } #subsidies .hero .tit span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; color: #fff; display: block; margin-top: 20px;} #subsidies .hero .copy{font-size: 14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;color: #fff; line-height: 200%; margin-top: 30px;} #subsidies .titline{width: 4px; height: 94px; background: url(../images/common/line_series.gif) no-repeat; background-size: cover; margin: 0 auto;} #subsidies .contents{ margin-top:100px; } #subsidies .contents .inner{width:100%; max-width: 1136px; margin: 0 auto;} #subsidies .contents .titline{width: 4px; height: 94px; background: url(../images/common/line_series.gif) no-repeat; background-size: cover; margin: 0 auto;} #subsidies .contents .midashi{font-size:26px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; text-align: center;margin-top: 20px; border-bottom: 1px solid #3e3a39;padding-bottom: 30px;} #subsidies .contents .figure{ width: 90%; margin: 80px auto;} #subsidies .contents .system{max-width: 944px; width: 100%; margin: 0 auto; color: #fff; background: url(../images/subsidies/bg.jpg) no-repeat; background-size: cover; padding-bottom: 40px;} #subsidies .contents .system .tit{font-size:26px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; text-align: center; padding:40px 0; border-bottom: 1px solid #fff;} #subsidies .contents .system .box{ padding: 50px 110px; position: relative; border-bottom: 1px solid #fff;} #subsidies .contents .system .bmt{ margin-top: 40px;} #subsidies .contents .system .tit_box{} #subsidies .contents .system .tit_box .subtit{font-size:21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; position: relative;} #subsidies .contents .system .tit_box .subtit::before{ content:url(../images/common/line_white.gif); position: absolute; left: -110px; top: -8px;} #subsidies .contents .system .tit_box .subtit span{font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; display: block; margin-top: 10px; } #subsidies .contents .system .w_area{ padding: 20px 0 20px 80px; background: #fff; margin: 40px 0;} #subsidies .contents .system .w_area p{font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; color: #00477c; position: relative; padding: 5px 0; line-height: 200%;} #subsidies .contents .system .w_area p::before{content:url(../images/common/line_w2.gif); position: absolute; left: -47px; top: 1px;} #subsidies .contents .system dl{display: flex;align-items: center; margin-bottom: 20px;} #subsidies .contents .system dt{width: 104px; height: 104px;line-height: 104px;font-size: 16px;text-decoration: none;display: block;text-align: center;background: #fff;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; color: #00477c;} #subsidies .contents .system dd{font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;line-height: 200%; margin-left: 30px;} #subsidies .contents .system .bnr{ max-width: 718px;width: 100%; padding: 15px 0; margin:40px auto 0;text-align: center; font-size:14px;font-family:"ryo-gothic-plusn",sans-serif;font-weight: 400; background: #fff; color: #00477c; } #subsidies .contact{width: 100%; height: 300px;display: flex;align-items: center;} #subsidies .note{ text-align: center;font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; color: #fff; margin-top: 40px;} @media only screen and (max-width:768px){ #subsidies .hero{ background:url(../images/subsidies/hero.jpg)no-repeat center; } #subsidies .hero .inner{ width: 90%;} #subsidies .hero .tit{ font-size:38px; } #subsidies .hero .copy{ line-height: 180%;} #subsidies .contents{ margin-top: 50px;} #subsidies .contents .midashi{ padding-bottom: 20px;} #subsidies .contents .figure{ margin: 40px auto; width: 90%;} #subsidies .contents .system .box{ padding: 30px 20px;} #subsidies .contents .system .tit_box .subtit::before{ left:-95px;} #subsidies .contents .system .w_area{ padding: 20px 10px 20px 40px;} #subsidies .contents .system .w_area p{ line-height: 180%;} #subsidies .contents .system .w_area p::before{left:-28px;} #subsidies .contents .system dl{display: block;align-items: center; margin-bottom: 20px;} #subsidies .contents .system dt{ height: 72px; width: 72px;line-height: 72px; display: inline-block;vertical-align: middle; font-size: 13px; } #subsidies .contents .system dd{ display: inline-block; width: 65%; margin-left: 5%; font-size: 13px; line-height: 140%; vertical-align: middle;} #subsidies .contents .system .bnr{width: 90%; padding: 15px 10px; } #subsidies .contact{ height: 200px;} #subsidies .note{font-size:13px;margin-top: 30px;} } /*--------------------------- support ---------------------------*/ #support{} #support .hero{ width: 100%; height: 400px; background:url(../images/support/hero.jpg)no-repeat; background-size: cover;display: flex;flex-direction: column; justify-content: center;align-items: center;} #support .hero .inner{width:100%; max-width: 1136px; margin: 0 auto;} #support .hero .tit{font-size: 48px;font-family: "runda",sans-serif; font-weight: 300;color: #fff; } #support .hero .tit span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; color: #fff; display: block; margin-top: 20px;} #support .hero .copy{font-size: 14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;color: #fff; line-height: 200%; margin-top: 30px;} #support .contents {position: relative;} #support .contents .lineL{ width:4px; height: 93%; background: url(../images/common/line_long.gif) no-repeat; background-size: cover; position: absolute; top:7%; left: 0; right: 0; margin: auto; z-index: 0;} #support .info{ width:90%; max-width: 1136px;margin: 0 auto; padding-top: 200px; position: relative; z-index: 1;} #support .rbox{ max-width: 995px; float: right;width: 100%; margin-bottom:100px; } #support .llox{ max-width: 995px; float: left;width: 100%; margin-bottom:100px;} #support .pict{ width:48%; display: inline-block; vertical-align: top;} #support .cbox{ width:51%; display: inline-block; position: relative; vertical-align: top;} #support .hline01{ width: 4px; height:110px; position: absolute; top: 0; right: 0; background: url(../images/common/line_support.gif) no-repeat; background-size: cover;} #support .hline02{ width: 4px; height:110px; position: absolute; top: 0; left: 0; background: url(../images/common/line_support.gif) no-repeat; background-size: cover;} #support .cinner{ padding:0 8%; position: relative; z-index: 1;} #support .cinner h3{font-size:26px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;} #support .cinner .sponsor{font-size:14px; margin-top: 5px;} #support .cinner .copy{ font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-top: 40px; line-height: 200%;} #support .cinner .copy span{font-weight: 700;} #support .cinner .copy a{ color: #0047ba;} #support .cinner .copy a:hover{opacity: 0.8;} #support .cinner .bnr_box{ margin-top: 40px;} #support .cinner .bnr_box li{width: 100%; border: 1px solid #ccc; box-sizing: border-box; margin-bottom: 20px;} #support .cinner .bnr_box li:last-child{margin-right: 0; margin-bottom: 0;} #support .cinner .bnr_box li img{ vertical-align: bottom;} #support .cinner .bnr_box li a:hover{ opacity: 0.8;} #support .llox h3, #support .llox .copy{ text-align: right;} #support .cinner .mt{ margin-top: 50px; font-size: 25px!important; } #support .supportbox{ background: #fff; padding: 100px 0;} #support .supportbox .inner{width:100%; max-width: 888px; margin: 0 auto;} #support .supportbox .left{ max-width:434px; margin-right: 20px; float: left;} #support .supportbox .right{ max-width:434px;float: left;} #support .supportbox .cent{ width: 100%; margin-top:70px; float: left; } #support .contact{width: 100%; height: 300px;display: flex;align-items: center; } @media only screen and (max-width:768px){ #support .hero{background:url(../images/support/hero.jpg)no-repeat center; } #support .hero .inner{width:90%; } #support .hero .tit{font-size: 38px;} #support .hero .copy{ line-height: 180%;} #support .contents .lineL{ display: none;} #support .info{width: 100%; padding-top: 50px;} #support .rbox{ float: none;width: 90%; margin:0 auto 50px auto; } #support .llox{ float: none;width: 90%; margin:0 auto 50px auto; } #support .pict{ width: 100%;} #support .cbox{width: 100%;} #support .cinner{ padding: 0; margin-top: 10px;} #support .cinner .copy{ margin-top: 20px; line-height: 180%;} #support .cinner h3{ font-size: 23px;} #support .cinner .mt{ margin-top: 30px; font-size: 23px!important; } #support .llox h3, #support .llox .copy{ text-align: left; padding-left: 10px;} #support .cinner .bnr_box{ margin-top: 20px;} #support .supportbox{ padding: 50px 0;} #support .supportbox .inner{width: 90%;} #support .supportbox .left{ width: 100%; max-width: 100%; margin-right: 0; margin-bottom: 20px;} #support .supportbox .right{width: 100%; max-width: 100%;} #support .supportbox .cent{ margin-top: 20px;} #support .contact{ height: 200px;} } /*--------------------------- company ---------------------------*/ #company{} #company .midashi01{} #company .midashi01 .tit{font-size:18px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;} #company .midashi01 .line{ height: 1px; width: 100%; background:url(../images/common/line_compny01.gif) no-repeat; background-size: cover; margin-top: 5px;} #company .midashi02 .tit{font-size:18px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; color: #fff;} #company .midashi02 .line{ height: 1px; width: 100%; background:url(../images/common/line_compny02.gif) no-repeat; background-size: cover; margin-top: 5px;} #company .sec01{} #company .sec02{ background: #fff;} #company .sec03{ background: #0047ba;} #company .sec04{ background: #0047ba; background: url(../images/company/bg.jpg) no-repeat; background-size: cover;} #company .inner{ max-width:944px; width: 90%; margin: 0 auto;} #company #gaiyo{ padding-top:100px; } #company #gaiyo .box{ width: 100%; margin-top: 30px; padding-bottom:35px; border-bottom: 1px solid #c9caca;} #company #gaiyo dl{ clear: both; line-height: 200%;} #company #gaiyo dt{ width: 25%; margin-right: 2%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;font-size:14px; float: left; padding: 5px 0;} #company #gaiyo dd{ width: 73%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300; font-size:14px;float: left; padding: 5px 0;} #company #gaiyo dl a{ color: #0047ba;} #company #gaiyo dl a:hover{ opacity: 0.8;} #company #gaiyo .copy{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;font-size:14px; line-height: 200%; margin-top: 20px;} #company #map{padding-top:85px; } #company #map .left{ width: 48%; float: left; margin-right: 4%;} #company #map .right{ width: 48%;float: left;} #company #map .tit{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;font-size:18px; background: #0047ba; padding: 10px 0; color: #fff; text-align: center; width: 100%;} #company #map .txt{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300;font-size:14px; line-height: 200%; text-align: center; padding:25px 0;height: 250px; text-align: center; width: 100%;} #company #map .txt a{ color: #0047ba;} #company #map .txt a:hover{ opacity: 0.8;} #company #map .txt span{ color: #0047ba; text-decoration: underline;} #company #map #map1{ width: 100%; height: 464px;} #company #map #map2{ width: 100%; height: 464px;} .gmnoprint{ display: none !important;} #company #enkaku{padding:85px 0; } #company #enkaku .box{ width: 684px; margin: 30px auto 0; padding-bottom:35px;} #company #enkaku dl{ clear: both; border-bottom: 1px solid #c9caca;display: flex; justify-content: center;align-items: center; line-height: 14px;} #company #enkaku dl:first-child{border-top: 1px solid #c9caca;} #company #enkaku dt{ width: 25%; margin-right: 2%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;font-size:14px; margin: 12px 0;} #company #enkaku dd{ width: 73%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300; font-size:14px; margin: 12px 0; border-left: 1px solid #c9caca; padding-left: 15px;} #company #greeting{padding:85px 0; } #company #greeting .box{padding-bottom:70px;border-bottom: 1px solid #c9caca;} #company #greeting .sub_tit{ font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;font-size:26px; text-align: center; color:#0047ba; padding: 50px 0;} #company #greeting .txt{ font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;font-size:14px; text-align: center; color:#0047ba; line-height: 200%; } #company #greeting .copy{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;font-size:12px; color:#898989; text-align: center; padding: 70px 0 30px 0;} #company #greeting .sign{ max-width: 210px; margin: 0 auto;} #company #relation{padding:85px 0; } #company #relation .box{ margin-top: 50px;} #company #relation dl{ clear: both;display: flex; justify-content: center;align-items: center; line-height: 200%; background: #fff; margin-bottom: 20px; color: #0047ba; height: 166px;} #company #relation dl a{color: #0047ba;} #company #relation .txt a:hover{ opacity: 0.8;} #company #relation dt{ width: 30%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;font-size:13px; padding:0 15px;} #company #relation dd{ width: 70%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300; font-size:13px; border-left: 1px solid #0047ba; padding-left: 15px;} #company #contribution{padding:85px 0; } #company #contribution .sub_tit{ font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;font-size:26px; color:#0047ba; padding: 50px 0;} #company #contribution dl{ width: 48%; max-width: 464px; margin-right: 16px; display: inline-block; margin-bottom: 20px; text-align: left;} #company #contribution dl:nth-child(2n){margin-right: 0;} #company #contribution dt{width: 50px; height: 50px;line-height: 50px;font-size: 24px;text-decoration: none;display: block;text-align: center;background: #0047ba;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;font-family: "runda",sans-serif; font-weight: 300;color: #fff; display: inline-block;vertical-align: middle;} #company #contribution dd{ width: 87%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size:18px; padding-left: 10px;color: #0047ba;display: inline-block; vertical-align: middle;} #company #contribution dd span{font-weight: 300; color: #3e3a39; font-size: 14px; display: block;} #company #contribution .case{ width: 100%; margin-top: 40px;} #company #contribution .case .left{ max-width: 464px; width: 48%; float: left; margin-right: 16px;} #company #contribution .case .right{ max-width: 464px; width: 48%;float: left;} #company #contribution .character{ width: 210px; margin: 50px auto 0;} #company #contribution .character .name{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 300; font-size:12px; text-align: center; margin-top: 20px; } #company #link{padding:85px 0 45px 0; } #company #link .box{ margin-top: 50px;} #company #link dl{max-width: 302px; width: 32%; margin-right: 18px; float: left; padding:0 10px; background: #00adad; color: #fff; margin-bottom: 40px;} #company #link dl:nth-child(3n){margin-right: 0;} #company #link dl a{ color: #fff;} #company #link dl a:hover{opacity: 0.8;} #company #link dt{display: flex; justify-content: center;align-items: center; height:100px; border-bottom: 1px solid #fff; text-align: center;} #company #link h3{ font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; font-size:16px; } #company #link h3 span{font-weight: 300; font-size:13px; display: block; margin-top: 10px;} #company #link dd{ padding: 20px 0;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size:13px; text-align: center; } @media only screen and (max-width:768px){ #company #gaiyo{ padding-top: 50px;} #company .inner{ width: 90%;} #company #gaiyo dl{ line-height: 160%;} #company #gaiyo dt{ font-size: 13px;width: 24%; margin-right: 6%;} #company #gaiyo dd{ font-size: 13px;width: 70%; } #company #gaiyo .copy{ font-size: 13px;} #company #map{ padding-top: 50px;} #company #map .left{ width: 100%; max-width: 100%;} #company #map .right{ width: 100%; max-width: 100%; margin-top: 30px;} #company #map .txt{ text-align: left; line-height: 180%;font-size: 13px; height: auto;} #company #map #map1{ width: 100%; height: 250px;} #company #map #map2{ width: 100%; height: 250px;} #company #enkaku{ padding: 50px 0 20px 0;} #company #enkaku .box{ width: 100%; max-width: 100%;} #company #enkaku dt, #company #enkaku dd{ font-size: 13px;line-height: 180%;} #company #greeting{ padding: 50px 0;} #company #greeting .sub_tit{ padding: 30px 0;} #company #greeting .txt{ font-size: 13px;} #company #greeting .copy{ padding: 50px 0 0px 0;} #company #relation{ padding: 50px 0 30px 0;} #company #relation dl{ height: auto; line-height: 140%; padding: 10px 0; display: block;} #company #relation dt{ width: 100%; padding: 10px; border-bottom: 1px solid #0047ba;} #company #relation dd{ border: none; padding-top: 10px;width: 100%; } #company #contribution{ padding: 50px 0;} #company #contribution .sub_tit{ padding: 30px 0; font-size: 21px;} #company #contribution dl{ width: 100%;} #company #contribution dd{ width: 80%; font-size: 15px;} #company #contribution .case { margin-top: 20px;} #company #contribution .case .left{ width: 100%; margin-right: 0;} #company #contribution .case .right{ width: 100%; margin-top: 20px;} #company #link{ padding: 50px 0;} #company #link .box{ margin-top: 20px;} #company #link dl{ width: 100%; margin-right: 0; margin-bottom: 20px; max-width: none;} #company #link h3 span{ font-size: 12px;} } /*--------------------------- machine ---------------------------*/ #machine{} /* #machine .hero{ width: 100%; height: 400px; background:url(../images/machine/hero.jpg)no-repeat; background-size: cover;display: flex;flex-direction: column; justify-content: center;align-items: center;} #machine .hero .inner{width:100%; max-width: 1136px; margin: 0 auto;} #machine .hero .tit{font-size: 38px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;color: #fff; } #machine .hero .copy{font-size: 14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;color: #fff; line-height: 200%; margin-top: 30px;} */ #machine .contents {position: relative;} #machine .contents .lineL{ width:4px; height: 96%; background: url(../images/common/line_long.gif) no-repeat; background-size: cover; position: absolute; top:4%; left: 0; right: 0; margin: auto; z-index: 0;} #machine .info{ width:100%; max-width: 1136px;margin: 0 auto; padding-top: 200px; position: relative; z-index: 1;} #machine .info2{ width:100%; background:url(../images/machine/bg.png) no-repeat top center; background-size:contain;position: relative; z-index: 1; margin-top: -7%;} #machine .info2 .inner{ max-width: 1136px;margin: 0 auto;} #machine .rbox{ max-width: 995px; float: right;width: 100%; margin-bottom:100px; } #machine .llox{ max-width: 995px; float: left;width: 100%; margin-bottom:100px;} #machine .pict{ width:48%; display: inline-block; vertical-align: top;} #machine .cbox{ width:51%; display: inline-block; position: relative; vertical-align: top;} #machine .hline01{ width: 4px; height:110px; position: absolute; top: 0; right: 0; background: url(../images/common/line_support.gif) no-repeat; background-size: cover;} #machine .hline02{ width: 4px; height:110px; position: absolute; top: 0; left: 0; background: url(../images/common/line_support.gif) no-repeat; background-size: cover;} #machine .cinner{ padding:0 8%; position: relative; z-index: 1;} #machine .cinner h3{font-size:26px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;} #machine .cinner h3.en{ font-size: 40px; font-family: "runda",sans-serif; font-weight: 300;} #machine .cinner h3 span{font-size:18px;;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; display: block; margin-top: 10px;} #machine .cinner .copy{ font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; margin-top: 40px; line-height: 200%;} #machine .cinner .copy span{font-weight: 700;} #machine .cinner .copy a{ color: #0047ba;} #machine .cinner .copy a:hover{opacity: 0.8;} #machine .llox h3, #machine .llox .copy{ text-align: right;} #machine .cbox2{ width:100%; display: inline-block; position: relative; vertical-align: top; text-align: right;} #machine .cbox3{ width:100%; display: inline-block; position: relative; vertical-align: top; text-align: left; color: #fff;} #machine .llox .cbox3 h3, #machine .llox .cbox3 .copy{ text-align: left;} #machine .cbox2 .cinner, #machine .cbox3 .cinner{ padding:0 5%; position: relative; z-index: 1;} #machine .outer{ margin-top: 15%;} #machine .white{ color: #fff;} @media only screen and (max-width:1440px){ #machine .info2{ width:100%; background:url(../images/machine/bg.png) no-repeat top center; background-size:cover;position: relative; z-index: 1; margin-top: -7%;} } @media only screen and (max-width:768px){ /* #machine .hero{background:url(../images/machine/hero.jpg)no-repeat center; } #machine .hero .inner{ width: 90%;} #machine .hero .tit{ font-size:26px; } #machine .hero .copy{ line-height: 180%;} */ #machine .contents .lineL{ display: none;} #machine .info{ padding-top: 50px; width: 90%;} #machine .info2{ padding-top: 0; width: 90%; margin: 0 auto; background: none;} #machine .pict{ width:100%; } #machine .cbox{ width:100%;} #machine .cinner{ padding: 0;} #machine .cinner h3{ margin-top: 10px; font-size: 23px; padding-left: 10px;} #machine .cinner .copy{ margin-top: 20px; line-height: 180%;} #machine .rbox, #machine .llox{ margin-bottom:50px; } #machine .cinner .copy{ padding: 0 10px;} #machine .llox h3, #machine .llox .copy{ text-align: left;} #machine .cbox2{ text-align: left;} #machine .cbox2 .cinner, #machine .cbox3 .cinner{padding: 0;} #machine .outer{ margin-top: 0;} #machine .cbox3{ color: #3e3a39;} #machine .white{ color: #3e3a39;} } /*--------------------------- recruit ---------------------------*/ #recruit{} #recruit .midashi01{} #recruit .midashi01 .line{ height: 38px; width: 4px; background:url(../images/common/line_recruit.gif) no-repeat; background-size: cover; margin: 0 auto;} #recruit .midashi01 .tit{font-size:28px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; text-align: center; margin-top: 20px; padding-bottom: 10px; border-bottom: 1px solid #c9caca;} #recruit .midashi02 .tit{font-size:18px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; } #recruit .midashi02 .line{ height: 1px; width: 100%; background:url(../images/common/line_compny01.gif) no-repeat; background-size: cover ;margin-top: 5px;} #recruit .sec01{ background: url(../images/recruit/bg.jpg) no-repeat; background-size: cover; padding: 50px 0 150px 0; background-position: bottom center;} #recruit .sec02{ background: url(../images/recruit/bg02.png) no-repeat #ebecec; background-size: cover;padding: 100px 0 150px 0; background-position: bottom center;} #recruit .sec03{ background: #ebecec;padding: 50px 0 100px 0;} #recruit .sec04{ background: #0047ba; background: url(../images/company/bg.jpg) no-repeat; background-size: cover;} #recruit .inner{ max-width:944px; width: 100%; margin: 0 auto;} #recruit #hero{ padding: 45px 0;text-align: center; border-bottom: 1px solid #c9caca;} #recruit #hero .tit{font-size:18px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; color:#0047ba; padding-bottom: 30px; } #recruit #hero .txt{font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; line-height: 200%;} #recruit #type{ padding-top: 110px;} #recruit #type article{ margin-top: 80px; } #recruit #type article .left{ width:210px; float: left;} #recruit #type article .right{width: 73%; float: right; } #recruit #type article .left .icon{width: 210px; height: 210px;line-height: 210px;font-size: 28px;text-decoration: none;display: block;text-align: center;background: #0047ba;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;font-family: "ryo-gothic-plusn",sans-serif; font-weight: 500;color: #fff; margin-bottom: 30px;} #recruit #type article .left .mark_box{font-family: "ryo-gothic-plusn",sans-serif; font-weight: 500; font-size: 14px; margin-bottom: 10px;} #recruit #type article .left .mark_box dt{ width: 50%; float: left;border: 1px solid #0047ba; box-sizing: border-box; color: #0047ba; text-align: center; padding: 5px 0;} #recruit #type article .left .mark_box dd{ width: 50%; float: left; background:#0047ba; border: 1px solid #0047ba; box-sizing: border-box; color: #fff;text-align: center;padding: 5px 0;} #recruit #type article .left .mark_box2{font-family: "ryo-gothic-plusn",sans-serif; font-weight: 500; font-size: 14px; margin-bottom: 10px;} #recruit #type article .left .mark_box2 dt{ width: 50%; float: left;border: 1px solid #9fa0a0; box-sizing: border-box; color: #9fa0a0; text-align: center; padding: 5px 0;} #recruit #type article .left .mark_box2 dd{ width: 50%; float: left; background:#9fa0a0; border: 1px solid #9fa0a0; box-sizing: border-box; color: #fff;text-align: center;padding: 5px 0;} #recruit #type article .right dl{ clear: both; border-top: 1px solid #c9caca;display: flex; justify-content: center;align-items: center; line-height: 14px;} #recruit #type article .right dt{ width: 25%; margin-right: 2%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;font-size:14px; margin: 12px 0; line-height: 200%;} #recruit #type article .right dd{ width: 73%; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size:14px; margin: 12px 0; border-left: 1px solid #c9caca; padding-left: 15px; line-height: 200%;} #recruit #type article .right .txtarea{ padding: 25px 0;border-bottom: 1px solid #c9caca;border-top: 1px solid #c9caca;} #recruit #type article .right .txtarea .read{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; font-size:16px; color:#0047ba; } #recruit #type article .right .txtarea .copy{font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size:14px;line-height: 200%; margin-top: 10px;} #recruit #type article .right .txtarea .mt0{ margin-top: 0;} #recruit #type article .right .nmtb{border-top: none; } #recruit #join{} #recruit #join .box{font-family: "ryo-gothic-plusn",sans-serif; font-size: 14px; margin-top: 70px;} #recruit #join .box table, #recruit #join .box td, #recruit #join .box th{border-collapse: collapse;border:1px solid #c9caca; line-height: 180%;} #recruit #join .box td, #recruit #join .box th{padding: 10px;} #recruit #join .box .mid{width: 25%; position: relative;} #recruit #join .box .mini{ width: 15%; margin-top: 10px;} #recruit #join .box .big{ width: 60%;} #recruit #join .box .tit{position: absolute; top: 20px; left: 30px; font-weight: 500;font-size:31px;line-height: 160%;} #recruit #join .txt_box{font-family: "ryo-gothic-plusn",sans-serif; margin-top: 50px;} #recruit #join .sub_tit{ font-weight: 500;font-size:16px; text-align: center;} #recruit #join .txt{ font-weight: 400;font-size:14px; line-height: 200%; text-align: center; margin-top: 20px;} #recruit #join .txt a{ color:#0047ba; } #recruit #join .txt a:hover{ opacity: 0.8;} #recruit #privacy .txt_box{font-family: "ryo-gothic-plusn",sans-serif; margin-top: 50px;} #recruit #privacy .sub_tit{ font-weight: 500;font-size:18px; text-align: center;} #recruit #privacy .txt{ font-weight: 400;font-size:14px; line-height: 200%; text-align: center; margin-top: 20px;} #recruit #news, #recruit #career{ margin-top: -100px; padding-top: 100px;} @media only screen and (max-width:768px){ #recruit #hero{ width: 90%; margin: 0 auto; padding: 30px 0;} #recruit #hero .tit{ padding-bottom: 20px;} #recruit #hero .txt{ font-size: 13px; line-height: 180%; text-align: left;} #recruit #type{ padding-top: 50px; margin: 0 auto;} #recruit #type article{ margin-top:40px; } #recruit #type article .left{ margin: 0 auto; float: none;} #recruit #type article .left .icon{ margin-bottom: 20px;} #recruit #type article .right{ width: 100%; margin-top: 10px;} #recruit #type article .right dt, #recruit #type article .right dd{ line-height: 180%;font-size: 13px;} #recruit .sec02{ padding: 50px 0 100px 0;} #recruit .inner{ width: 90%; margin: 0 auto;} #recruit #join .box{ margin-top: 30px;} #recruit #join .box .mid{ display:none;} #recruit #join .txt{ line-height: 180%; text-align: left;} #recruit #privacy .txt_box{ margin-top: 0; margin-bottom: 50px;} #recruit #privacy .txt{ line-height: 180%; text-align: left;} #recruit .sec03{ padding: 50px 0 20px 0; } } /*--------------------------- map-page ---------------------------*/ #map-page{} #map-page .map{ max-width:944px; width: 90%; margin: 0 auto; padding: 100px 0;} @media only screen and (max-width:768px){ #map-page .map{padding: 50px 0;} } /*--------------------------- contact ---------------------------*/ #contact{} #contact .midashi{ font-size: 28px; text-align: center;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; color: #0047ba; padding:100px 0 60px 0; } #contact #fome-page{ background: #fff; max-width: 752px; width: 100%; margin: 0 auto;} #contact #fome-page .inner{ padding: 50px 30px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;} #contact #info { padding: 150px 0 100px 0;} #contact #info .box{ max-width: 1136px; margin: 0 auto 55px;display: flex;justify-content: center;align-items: center; color: #0047ba;} #contact #info .left{ width: 40%; text-align: left; margin-right: 3%;} #contact #info .right{ width: 40%; text-align: left; margin-left: 3%;} #contact #info .cent{ width: 14%; height:1px; border-bottom: 1px solid #0047ba;} #contact #info .left h3{ font-size:24px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;} #contact #info .left .copy{ font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; line-height: 200%; margin-top: 20px;} #contact #info .right .tel{font-size:40px;font-family: "runda",sans-serif; font-weight: 700; padding-left: 5%; } #contact #info .right .copy{ font-size:14px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400;padding-left: 5%;line-height: 200%; margin-top: 20px;} #contact #info .left .copy a{ color: #0047ba; text-decoration: underline;} #contact #info .left .copy a:hover{opacity: 0.8;} #contact #privacy {max-width:752px; width: 100%; background: url(../images/contact/bg.jpg) no-repeat; background-size: cover; margin: 0 auto;} #contact #privacy .line { width: 4px; height:48px; background: #fff; margin: 0 auto;} #contact #privacy .inner{ padding: 0 0 70px 0;} #contact #privacy .txt_box{font-family: "ryo-gothic-plusn",sans-serif; margin: 35px 0;} #contact #privacy .sub_tit{ font-weight: 500;font-size:18px; text-align: center;} #contact #privacy .txt{ font-weight: 400;font-size:14px; line-height: 200%; text-align: center; margin-top: 20px;} #contact #privacy .linew{ width: 138px; height: 2px; background: #fff; margin: 0 auto;} @media only screen and (max-width:768px){ #contact .midashi{ font-size: 28px; padding:50px 0 50px 0; } #contact #fome-page .inner{ padding: 50px 20px;} #contact #info{ padding: 50px 0 0 0;} #contact #info .box{ width: 90%; margin: 0 auto 55px;display: block;justify-content: center;align-items: center;} #contact #info .left{ width: 100%;margin-right: 0%;} #contact #info .right{ width: 100%;margin-left: 0%;} #contact #info .cent{display: none;} #contact #info .left h3{ font-size:21px;} #contact #info .left .copy{ line-height: 180%; margin-top: 20px;} #contact #info .right .tel{font-size:26px; padding-left:0; margin-top: 10px;} #contact #info .right .copy{ padding-left: 0;line-height: 180%; margin-top: 0;font-size:16px;} #contact #privacy .inner{ width: 90%; margin: 0 auto;} #contact #privacy .txt{ text-align: left;} } /*--------------------------- news ---------------------------*/ #news{} #news .titline{width: 4px; height: 94px; background: url(../images/common/line_series.gif) no-repeat; background-size: cover; margin: 0 auto;} #news .contents{ padding-top:100px; } #news .contents .inner{width:100%; max-width: 1136px; margin: 0 auto;} #news .contents .titline{width: 4px; height: 94px; background: url(../images/common/line_series.gif) no-repeat; background-size: cover; margin: 0 auto;} #news .contents .midashi{font-size:48px;font-family: "runda",sans-serif; font-weight: 300; text-align: center;margin-top: 20px;padding: 0 0 70px 0;} #news .contents .midashi span{font-size: 21px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500; display: block; margin-top: 10px; } #news .box{ max-width: 944px; width: 100%; margin: 0 auto 100px;} #news dl{ padding:25px 0; border-bottom: 1px solid #9fa0a0;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 400; font-size: 14px;} #news dt{ width: 20%; display: inline-block;vertical-align:top;line-height: 200%; } #news dd{ width: 79%; display: inline-block; vertical-align:top; line-height: 200%;} #news dd a{ color: #0047ba;} #news dd a:hover{ opacity: 0.8;} @media only screen and (max-width:768px){ #news .contents{ padding-top:50px; } #news .contents .inner{width:100%; max-width: 1136px; margin: 0 auto;} #news .contents .titline{width: 4px; height: 50px; background: url(../images/common/line_series.gif) no-repeat; background-size: cover; margin: 0 auto;} #news .contents .midashi{font-size:38px;margin-top: 20px;padding: 0 0 30px 0;} #news .contents .midashi span{font-size: 21px;margin-top: 0; } #news .box{ max-width: 100%; width: 90%; margin: 0 auto 50px;} #news dl{ font-size: 13px;} #news dt{ width: 100%; display: inline-block;vertical-align:top;line-height: 180%; } #news dd{ width: 100%; display: inline-block; vertical-align:top; line-height: 180%; margin-top: 10px;} } /*--------------------------- btn ---------------------------*/ .btn-1{width:186px;height:52px;background:url(../images/common/btn01_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; margin-top: 50px; } .btn-1 a{width: 186px;height:52px;font-size:14px;color:#fff;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:52px;transition:all .5s ease;z-index:2;position:relative; display: block;padding-left: 35px;} .eff-1{width:186px;height:52px;left:0;background:url(../images/common/btn01.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-1:hover .eff-1{left:186px;} .btn-1:hover a{color:#0047ba;} .btn-2{width:186px;height:52px;background:url(../images/common/btn02_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; margin-top: 50px; float: right;} .btn-2 a{width: 186px;height:52px;font-size:14px;color:#fff;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:52px;transition:all .5s ease;z-index:2;position:relative; display: block;padding-left: 24px; } .eff-2{width:186px;height:52px;left:0;background:url(../images/common/btn02.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-2:hover .eff-2{left:186px;} .btn-2:hover a{color:#00adad;} .btn-3{width:366px;height:70px; margin: 0 auto;background:url(../images/common/btn03_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden;} .btn-3 a{width: 366px;height:70px; font-size:16px;color:#0047ba;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:70px;transition:all .5s ease;z-index:2;position:relative; display: block; padding-left: 50px;} .eff-3{width:366px;height:70px;left:0;background:url(../images/common/btn03.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-3:hover .eff-3{left:366px;} .btn-3:hover a{color:#fff;} .btn-4{width:138px;height:102px;background:url(../images/common/btn04_on.png) no-repeat; background-size: cover;cursor:pointer;position:absolute;box-sizing:border-box;overflow:hidden; text-align: center; bottom: -50px; left: 0; right: 0; margin: auto;} .btn-4 a{width: 138px;height:102px;font-size:14px;color:#fff;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:68px;transition:all .5s ease;z-index:2;position:relative; display: block;} .eff-4{width:138px;height:102px;left:0;background:url(../images/common/btn04.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-4:hover .eff-4{left:138px;} .btn-4:hover a{color:#0047ba;} .btn-5{width:138px;height:102px;background:url(../images/common/btn04_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; text-align: center; margin:150px auto 0 auto;} .btn-5 a{width: 138px;height:102px;font-size:14px;color:#fff;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:68px;transition:all .5s ease;z-index:2;position:relative; display: block;} .eff-5{width:138px;height:102px;left:0;background:url(../images/common/btn04.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-5:hover .eff-5{left:138px;} .btn-5:hover a{color:#0047ba;} .btn-6{width:600px;height:92px;background:url(../images/common/btn06_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; margin:100px auto 0 auto; } .btn-6 a{width: 600px;height:92px;font-size:21px;color:#0047ba;font-family:"ryo-gothic-plusn",sans-serif;font-weight: 500;text-decoration:none;line-height:95px;transition:all .5s ease;z-index:2;position:relative; display: block;padding-left: 90px;} .eff-6{width:600px;height:92px;left:0;background:url(../images/common/btn06.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-6:hover .eff-6{left:600px;} .btn-6:hover a{color:#0047ba;} .btn-7{width:244px;height:52px;background:url(../images/common/btn07_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; margin: 0 auto; } .btn-7 a{width: 244px;height:52px;font-size:14px;color:#fff;font-family:"ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:52px;transition:all .5s ease;z-index:2;position:relative; display: block;padding-left: 70px;} .eff-7{width:244px;height:52px;left:0;background:url(../images/common/btn07.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-7:hover .eff-7{left:244px;} .btn-7:hover a{color:#0047ba;} .btn-8{width:244px;height:52px;background:url(../images/common/btn08_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; margin:20px auto 0; } .btn-8 a{width: 244px;height:52px;font-size:14px;color:#0047ba;font-family:"ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:52px;transition:all .5s ease;z-index:2;position:relative; display: block;padding-left: 40px;} .eff-8{width:244px;height:52px;left:0;background:url(../images/common/btn08.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-8:hover .eff-8{left:244px;} .btn-8:hover a{color:#fff;} .btn-9{width:244px;height:52px;background:url(../images/common/btn09_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; margin-top: 50px; } .btn-9 a{width: 244px;height:52px;font-size:14px;color:#0047ba;font-family:"ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:52px;transition:all .5s ease;z-index:2;position:relative; display: block;padding-left: 40px;} .eff-9{width:244px;height:52px;left:0;background:url(../images/common/btn09.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-9:hover .eff-9{left:244px;} .btn-9:hover a{color:#fff;} .btn-10{ width: 650px; margin: 94px auto 0;padding: 20px 0; display: block; text-align: center; font-size:18px;font-family:"ryo-gothic-plusn",sans-serif;font-weight: 500; background: #00adad; color: #fff; } .btn-11{width:366px;height:70px; margin: 0 auto;background:url(../images/common/btn11_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden;} .btn-11 a{width: 366px;height:70px; font-size:16px;color:#0047ba;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:70px;transition:all .5s ease;z-index:2;position:relative; display: block; padding-left: 50px;} .eff-11{width:366px;height:70px;left:0;background:url(../images/common/btn11.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-11:hover .eff-11{left:366px;} .btn-11:hover a{color:#fff;} .btn-12{width:175px;height:53px;background:url(../images/common/btn12_on.png) no-repeat; background-size: cover;cursor:pointer;position:absolute;box-sizing:border-box;overflow:hidden;bottom: 50px; right: 113px;} .btn-12 a{width: 175px;height:53px; font-size:14px;color:#fff;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:53px;transition:all .5s ease;z-index:2;position:relative; display: block; padding-left: 30px; } .eff-12{width:175px;height:53px;left:0;background:url(../images/common/btn12.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-12:hover .eff-12{left:175px;} .btn-12:hover a{color:#9e9e9e;} .btn-13{width:366px;height:70px; margin-top: 70px;float: right;background:url(../images/common/btn11_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; } .btn-13 a{width: 366px;height:70px; font-size:16px;color:#0047ba;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:70px;transition:all .5s ease;z-index:2;position:relative; display: block;padding-left: 50px; } .eff-13{width:366px;height:70px;left:0;background:url(../images/common/btn11.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-13:hover .eff-13{left:366px;} .btn-13:hover a{color:#fff;} .btn-14{width:244px;height:52px;background:url(../images/common/btn14_on.png) no-repeat; background-size: cover;cursor:pointer;position:relative;box-sizing:border-box;overflow:hidden; margin: 30px auto 0;} .btn-14 a{width: 244px;height:52px;font-size:14px;color:#fff;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-decoration:none;line-height:52px;transition:all .5s ease;z-index:2;position:relative; display: block;padding-left: 70px; } .eff-14{width:244px;height:52px;left:0;background:url(../images/common/btn14.png) no-repeat; background-size: cover; position:absolute;transition:all .5s ease;z-index:1;} .btn-14:hover .eff-14{left:244px;} .btn-14:hover a{color:#00adad;} @media only screen and (max-width:768px){ .btn-1{margin-top: 20px; } .btn-2{margin-top: 20px;} .btn-3{width:300px;height:58px; } .btn-3 a{width: 300px;height:58px; padding-left: 15px;line-height:58px;} .eff-3{width:300px;height:58px;} .btn-3:hover .eff-3{left:300px;} .btn-5{margin:100px auto 0 auto;} .btn-6{width:300px;height:46px;margin:50px auto 0 auto; } .btn-6 a{width: 300px;height:46px;font-size:13px;padding-left: 15px;line-height:46px;} .eff-6{width:300px;height:46px;} .btn-6:hover .eff-6{left:300px;} .btn-9{margin: 30px auto 0;} .btn-10{ width: 300px; margin: 0 auto 0;padding: 20px 0; display: block; text-align: center; font-size:15px;} .btn-11{width:300px;height:57px; margin: 0 auto;} .btn-11 a{width: 300px;height:57px; font-size:13px;line-height:57px;padding-left: 40px;} .eff-11{width:300px;height:57px;} .btn-11:hover .eff-11{left:300px;} .btn-11:hover a{color:#fff;} .btn-13{width:300px;height:57px; margin-top: 50px;float: none; } .btn-13 a{width: 300px;height:57px; font-size:13px;padding-left: 40px;line-height:57px; } .eff-13{width:300px;height:57px;} .btn-13:hover .eff-13{left:300px;} } @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } /*--------------------------- bx-wrapper ---------------------------*/ .bx-wrapper {position: relative;padding: 0;*zoom: 1;} .bx-wrapper img {max-width: 100%;display: block;} .bx-wrapper iframe {max-width: 100%; max-height:678px;display: block;} .bx-wrapper .bx-viewport {-webkit-transform: translatez(0);-moz-transform: translatez(0);-ms-transform: translatez(0);-o-transform: translatez(0);transform: translatez(0);} .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {position: absolute;width: 100%;} /* LOADER */ .bx-wrapper .bx-loading {min-height: 50px;background: url(../images/common/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;} /* PAGER */ .bx-wrapper .bx-pager {text-align: center;font-size: .85em;font-family: Arial;font-weight: bold;color: #666;margin-top:-30px!important;position:absolute;} .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;} .bx-wrapper .bx-pager.bx-default-pager a {border: 1px solid #fff;text-indent: -9999px;display: block;width: 10px;height: 10px;margin: 0 5px;outline: 0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;} .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {background: #f8f8f8;} /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev {left: 10px;background: url(../images/common/prev.png) no-repeat;} .bx-wrapper .bx-next {right: 10px;background: url(../images/common/next.png) no-repeat;} .bx-wrapper .bx-prev:hover {opacity:0.7;filter: alpha(opacity=70);-ms-filter:alpha( opacity=70 );} .bx-wrapper .bx-next:hover {opacity:0.7;filter: alpha(opacity=70);-ms-filter:alpha( opacity=70 );} .bx-wrapper .bx-controls-direction a {position: absolute;top: 50%;margin-top: -16px;outline: 0;width: 12px;height: 30px;text-indent: -9999px;z-index: 0; background-size: cover;} .bx-wrapper .bx-controls-direction a.disabled {display: none;} /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto {text-align: center;} .bx-wrapper .bx-controls-auto .bx-start {display: block;text-indent: -9999px;width: 10px;height: 11px;outline: 0;background: url(../images/common/controls.png) -86px -11px no-repeat;*/margin: 0 3px;} .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {background-position: -86px 0;} .bx-wrapper .bx-controls-auto .bx-stop {display: block;text-indent: -9999px;width: 9px;height: 11px;outline: 0;background: url(../images/common/controls.png) -86px -44px no-repeat;margin: 0 3px;} .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {background-position: -86px -33px;} /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {text-align: left;width: 80%;} .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {right: 0;width: 35px;} /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption {position: absolute;bottom: 0;left: 0;background: #666\9;background: rgba(80, 80, 80, 0.75);width: 100%;} .bx-wrapper .bx-caption span {color: #fff;font-family: Arial;display: block;font-size: .85em;padding: 10px;} /*-------------------------------------- テキストエリア ---------------------------------------*/ .msr_text_05 {width:49%; display: inline-block; margin: 0 2% 30px 0;border-bottom: 1px solid #dcdddd; box-sizing: border-box;float: left;} .msr_text_05.nmr{margin-right: 0;} .msr_text_05 label {display: inline-block;font-size: 14px;width: 100%; } .msr_text_05 input[type=text], .msr_text_05 input[type=email], .msr_text_05 input[type=tel]{border: none;font-size: 14px;padding: 10px;height: 40px;display: inline-block;width: 100%; } /*-------------------------------------- プルダウン ---------------------------------------*/ .msr_pulldown_05 {position: relative;width: 100%; margin: 0 auto 30px auto;box-sizing: border-box;} .msr_pulldown_05 p {font-size: 14px;padding-bottom: 5px;display: inline-block;width: 25%;} .msr_pulldown_05 select {appearance: none;-moz-appearance: none;-ms-appearance: none;-webkit-appearance: none;background:#FFFFFF;border: none;border-radius: 0;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;cursor: pointer;padding: 10px;position:relative;display: inline-block;height: 40px;width: 50%;font-size: 14px;border-bottom: 1px solid #dcdddd;} .msr_pulldown_05 label{position:relative; font-size: 14px;} .msr_pulldown_05 label::after {content:"";border-bottom: 1px solid #dcdddd;border-left: 1px solid #dcdddd;right: 16px;height: 8px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);position:absolute;top:65%;width: 8px;} /*-------------------------------------- テキストエリア 複数 ---------------------------------------*/ .msr_textarea_05 {padding-bottom: 10px;width: 100%;} .msr_textarea_05 label {display: block;font-size: 14px;padding-bottom: 5px;} .msr_textarea_05 textarea {border-bottom: 1px solid #dcdddd;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;font-size: 13px;padding: 10px;height: 210px;width: 100%;} /*-------------------------------------- 送信ボタン ---------------------------------------*/ .msr_sendbtn_05{margin:0 0 10px;} .msr_sendbtn_05 input[type=submit] {background-color: #0047ba;border: none;color: #FFF;cursor:pointer;display: block;font-size: 14px;padding: 14px;margin-top: 30px;text-align: center;text-decoration: none;transition: 0.2s ease-in-out;-o-transition: 0.2s ease-in-out;-moz-transition: 0.2s ease-in-out;-webkit-transition: 0.2s ease-in-out;width: 180px;letter-spacing: 0.5em;float: right;} .msr_sendbtn_05 input[type=submit]:hover {background-color: #999999;color: #FFFFFF;} .msr_sendbtn_05 input[disabled=disabled] {cursor:default;opacity: 0.5;} .msr_sendbtn_05 input[disabled=disabled]:hover {background-color: #FFFFFF;color: #333333;} div.wpcf7-mail-sent-ok, div.wpcf7-validation-errors, div.wpcf7-acceptance-missing{ text-align: center;} @media only screen and (max-width:768px){ .msr_text_05{ width: 100%; margin: 0 0 30px 0} .msr_text_05 label{ width: 100%;} .msr_pulldown_05 p{ width: 100%;} .msr_pulldown_05 select{width: 100%; padding: 10px 10px 10px 0;} .msr_textarea_05 textarea{ padding: 0; height: 150px;} .msr_sendbtn_05 input[type=submit]{ float: none; margin: 20px auto 0;} .msr_pulldown_05 label::after {top:70%;} } .sticky { position: -webkit-sticky; position: sticky; } .sticky.sticky-fixed.is-sticky { margin-top: 0; margin-bottom: 0; position: fixed; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .sticky.sticky-fixed.is-sticky:not([style*="margin-top"]) { margin-top: 0 !important; } .sticky.sticky-fixed.is-sticky:not([style*="margin-bottom"]) { margin-bottom: 0 !important; } .sticky.sticky-fixed.is-absolute{ position: absolute; } /*-------------------------------------- 2022.4.14追記 ---------------------------------------*/ .bnr-area{background: #f8faf9; padding: 50px 0 0;} .bnr-area .bnr-sdgs{max-width: 1100px; width: 90%; margin: 0 auto;} .bnr-area .bnr-sdgs:hover{opacity: 0.8;} @media only screen and (max-width:768px){ .bnr-area{ padding: 20px 0 0;} } #sdgs {padding-bottom: 150px;} #sdgs .hero{width: 100%; background: #fff;} #sdgs .hero .inner{max-width: 1100px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding:50px 0; } #sdgs .hero h2{font-size: 44px; color: #0047ba; font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700; padding: 50px 30px; border-left: 5px solid #0047ba; margin-bottom: 0;} #sdgs .hero .bnr-box{width: 50%;} #sdgs .sec01{max-width: 1100px; width: 90%; margin: 0 auto; padding-top: 180px; position: relative;} #sdgs .line{position: absolute; top: 50px; left: 0; right: 0; margin: auto;width: 4px; height:110px; background: url(../images/sdgs/line.png) no-repeat; background-size: cover;} #sdgs h2{font-size: 36px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;text-align: center; margin-bottom: 30px;} #sdgs .sec01 .inner{background: #e2ecf6; padding-bottom: 100px; border: 5px solid #0047ba; box-sizing: border-box;} #sdgs .sec01 .body-copy{font-size: 24px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 500;text-align: center; padding:30px 20px; border-bottom: 1px solid #0047ba;} #sdgs .sec01 .gr{padding: 50px 80px 0 80px;} #sdgs .sec01 h3{font-size: 24px;font-family: "ryo-gothic-plusn",sans-serif;font-weight: 700;color: #0047ba; position: relative;} #sdgs .sec01 h3::before{content: ''; position: absolute; left: -80px;top: 0.6em; height: 4px; width: 65px; background: #0047ba;} #sdgs .sec01 .box{background: #fff; margin-top: 10px; padding: 30px;} #sdgs .sec01 .icons{display: flex; justify-content: flex-start;} #sdgs .sec01 .icons li{max-width: 150px; margin-right: 10px;} #sdgs .sec01 .icons li:last-child{margin-right: 0;} #sdgs .sec01 .explanation{margin-top: 20px; margin-left: 10px; margin-bottom: 20px;} #sdgs .sec01 .explanation li{margin-bottom: 15px;font-size: 16px; line-height: 1.8; padding-left: 1em;font-weight: 400;position: relative; } #sdgs .sec01 .explanation li:last-child{margin-bottom:0;} #sdgs .sec01 .explanation li:before {border-radius: 50%; width: 5px; height: 5px; display: block;position: absolute; left: 0;top: 0.6em; content: "";background: #0047ba;} #sdgs .sec02{max-width: 1100px; width: 90%; margin: 0 auto; padding-top: 180px; position: relative;} #sdgs .sec02 .inner{display: flex; justify-content: space-between; align-items: center; margin: 0 auto; background: #fff; padding: 50px;border: 5px solid #0047ba; box-sizing: border-box;} #sdgs .sec02 .inner .left{width: 40%; margin-right: 3%;} #sdgs .sec02 .inner .right{width: 60%; font-size: 16px; line-height: 1.8;font-weight: 400;} @media only screen and (max-width:768px){ #sdgs {padding-bottom: 80px;} #sdgs .hero .inner{ padding:50px 20px;} #sdgs .hero h2{font-size: 15px; padding: 20px 10px; border-left: 3px solid #0047ba;} #sdgs .hero .bnr-box{width: 50%;} #sdgs .line{height:60px; top: 30px;} #sdgs .sec01{padding-top: 100px;} #sdgs h2{font-size:20px; margin-bottom: 15px;} #sdgs .sec01 .inner{padding-bottom: 5px; border: 3px solid #0047ba;} #sdgs .sec01 .body-copy{font-size:15px;padding:20px 20px;} #sdgs .sec01 .gr{padding: 30px 20px 0 20px} #sdgs .sec01 h3{font-size:18px;} #sdgs .sec01 h3::before{left: -20px;height: 3px; width:15px; background: #0047ba;} #sdgs .sec01 .box{margin-top:5px; padding: 20px;} #sdgs .sec01 .icons{flex-wrap: wrap;} #sdgs .sec01 .icons li{max-width: none; width: 48%; margin-right:4%; margin-bottom: 10px;} #sdgs .sec01 .icons li:nth-child(even){margin-right: 0;} #sdgs .sec01 .explanation{margin-top: 0; margin-left: 0px;} #sdgs .sec01 .explanation li{margin-bottom: 10px;font-size: 13px;} #sdgs .sec02{padding-top: 100px;} #sdgs .sec02 .inner{display: block; padding: 20px;border: 3px solid #0047ba;} #sdgs .sec02 .inner .left{width: 100%; margin-right:0;} #sdgs .sec02 .inner .right{width: 100%; font-size: 13px;} } /* ================ 230904 追加 css ================== */ /* common */ .inner{ max-width: 1136px; margin: auto; } .heading1{ text-align: center; color: #ffffff; font-size: 46px; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; } .desc{ font-size: 15px; font-weight: 300; line-height: 1.75; text-align: center; font-family: 'Noto Sans JP', sans-serif; } .section-heading__subtitle + .desc{ margin-top: 1.6666em; } .under-hero{ height: 450px; background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container02__content{ padding: 55px 0 150px; } .container02__content .inner{ width: 90%; } .container02__body{ margin-top: 85px; padding-top: 130px; position: relative; z-index: 0; } .line{ display: inline-block; width: 4px; height: 113.5px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1; } .line01{ background-image: linear-gradient(to bottom, #e10012 0%, #e10012 calc((28 / 113.5) * 100%), #b0b0b1 calc((28 / 113.5) * 100%), #b0b0b1 100%); } .line02{ height: 171.7px; background-color: #b0b0b1; } #products .hero{ height: 200px; } /* top */ .mainvisual-video{ width: 100%; display: block; } .section-header{ text-align: center; font-size: 46px; display: flex; flex-direction: column; } .section-header .heading2{ font-size: 1em; font-weight: 700; line-height: 1.43; padding: 0 !important; width: 100% !important; max-width: none !important; font-family: 'Noto Sans JP', sans-serif; } .section-heading__subtitle{ font-size: 0.5217em; font-weight: 700; margin-top: 1.0416em; font-family: 'Noto Sans JP', sans-serif; } .top-business{ padding-top: 190px; } .top-business__content{ display: flex; justify-content: space-between; margin-top: 85px; } .top-business__box{ width: calc((100% - 7px * 2) / 3); max-width: 371.6px; position: relative; z-index: 0; } .top-business__box-inner{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .top-business__box-number{ text-align: center; font-size: 30px; font-weight: 300; line-height: 1.533; color: #ffffff; font-family: 'Noto Sans JP', sans-serif; } .top-business__box-title{ text-align: center; font-size: 40px; font-weight: 700; color: #ffffff; line-height: 1.25; margin-top: calc((30 / 1600) * 100vw); font-family: 'Noto Sans JP', sans-serif; } .top-business__box-btn{ margin: calc((40 / 1600) * 100vw) auto 0; background-color: #ffffff; } .top-introduce{ margin-top: 130px; } .top-introduce__content{ max-width: 899.9px; margin: 70px auto 0; } .top-introduce__movie-wrap{ position: relative; width: 100%; height: 0; padding-top: calc((506.2 / 899.9) * 100%); } .top-introduce__movie{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 製品ページ */ #products .series ul{ margin-top: 60px; } .takmill-series{ margin-top: 125px; } .takmill-series .cf{ display: flex; justify-content: center; } .takmill-series li{ float: none; } /* machineページ */ .machine-header{ padding-top: 95px; } .machine-header .inner{ width: 90%; margin: auto; } .machine-header .section-heading__subtitle{ font-weight: 300; font-size: 0.8043em; margin-top: 0; } /* ピネイト事業ページ */ .page-pinnate .under-hero{ background-image: url('../images/pinnate/mainvisual.jpg'); } .container02__body .inner{ width: 90%; } .page-pinnate__box-container + .page-pinnate__box-container{ margin-top: 215px; } .page-pinnate__box, .page-3dsandr__box{ display: flex; justify-content: space-between; } .page-pinnate__box-img{ width: calc((524.1 / 1136) * 100%); } .page-pinnate__box-container:nth-child(odd) .page-pinnate__box-img, .page-3dsandr__box:nth-child(odd) .page-3dsandr__box-img{ order: 2; } .page-pinnate__box-container:nth-child(2) .page-pinnate__box-img{ max-width: 434.49px; } .page-pinnate__box-container:nth-child(4) .page-pinnate__box-img{ max-width: 519.5px; } .page-pinnate__box-body{ width: calc(100% - ((524.1 / 1136) * 100%)); } .page-pinnate__box-body-inner{ padding: 0 min(38px, calc((38 / 611.9) * 100%)); position: relative; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-body-inner{ margin-left: auto; max-width: 507px; } .page-pinnate__box-body-inner::before, .page-3dsandr__box-body-inner::before{ content: ""; display: inline-block; width: 4px; height: 94px; background-image: linear-gradient(to bottom, #e10012 0%, #e10012 calc((28 / 113.5) * 100%), #b0b0b1 calc((28 / 113.5) * 100%), #b0b0b1 100%); position: absolute; top: 0; } .page-pinnate__box-container:nth-child(odd) .page-pinnate__box-body-inner::before, .page-3dsandr__box:nth-child(odd) .page-3dsandr__box-body-inner::before{ left: 0; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-body-inner::before, .page-3dsandr__box:nth-child(even) .page-3dsandr__box-body-inner::before{ right: 0; } .page-pinnate__box-container:nth-child(odd) .page-pinnate__box-body{ order: 1; } .page-pinnate__box-title, .page-3dsandr__box-title{ font-size: 25px; line-height: 1.74; } .page-pinnate__box-text, .page-3dsandr__box-text{ font-size: 15px; line-height: 2.066; margin-top: min(35px, calc((35 / 535.9) * 100%)); font-family: 'BIZ UDPGothic', sans-serif; } .page-pinnate__box-example{ display: flex; align-content: center; font-size: 18px; line-height: 1; color: #171c61; margin-top: 40px; font-family: 'BIZ UDPGothic', sans-serif; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-example{ justify-content: flex-end; } .page-pinnate__box-container:nth-child(4) .page-pinnate__box-example{ margin: calc((-80 / 1136) * 100%) 0 0 auto; width: 75%; } .page-pinnate__box-example span{ background-color: #1b4499; } .page-pinnate__box-container:nth-child(odd) .page-pinnate__box-example span{ width: calc((244.5 / 1136) * 100%); margin-right: 15px; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-example span{ order: 2; width: calc((327.7 / 1136) * 100%); margin-left: 15px; } .page-pinnate__box-container:nth-child(3) .page-pinnate__box-img02{ max-width: 982.7px; margin: 30px auto 0; } .page-pinnate__contact{ padding-top: 220px; position: relative; } .page-pinnate__contact-text{ text-align: center; font-size: 22px; line-height: 1.7; color: #171c61; } .page-pinnate__contact-text .text--emphasize{ font-weight: 500; } .page-pinnate__contact .btn-6{ margin-top: 50px; } /* 3DS&Rページ */ .page-3dsandr .under-hero{ background-image: url('../images/3dsandr/mainvisual.jpg'); } .page-3dsandr .container02__content{ padding-bottom: 0; } .page-3dsandr__btn{ margin-top: 75px; } .page-3dsandr__box{ align-items: center; margin-top: 65px; } .page-3dsandr__box:first-child{ margin-top: 0; } .page-3dsandr__box-body{ width: calc(100% - (561.8 / 1136) * 100%); } .page-3dsandr__box-body-inner{ padding: 0 min(40px, calc((40 / 574.2) * 100%)); position: relative; } .page-3dsandr__box-img{ width: calc((561.8 / 1136) * 100%); } .page-3dsandr__content02{ position: relative; z-index: 0; margin-top: 85px; padding: 150px 0 225px; } .page-3dsandr__content02::before{ content: ""; display: block; width: 100vw; height: 100%; background: url('../images/3dsandr/bg.png'); background-position: top left; position: absolute; top: 0; left: 50%; transform: translateX(-50vw); z-index: -1; } .page-3dsandr__content02 .line02{ height: 133px; background-color: #e10012; } .page-3dsandr__content02 .heading2{ text-align: center; font-size: 37px; font-family: 'BIZ UDPGothic', sans-serif; } .page-3dsandr__content02-container{ margin-top: 125px; border-bottom: 1.7px solid #231815; padding-bottom: 85px; } .page-3dsandr__content02-container .heading3{ text-align: center; font-size: 37px; line-height: 1.322; padding: 0.54em 0; border-bottom: 1.7px solid #231815; font-family: 'BIZ UDPGothic', sans-serif; } .page-3dsandr__content02-list-title{ font-size: 37px; line-height: 1.322; font-weight: 700; text-align: center; margin-top: 1.48em; font-family: 'BIZ UDPGothic', sans-serif; } .page-3dsandr__content02-list-text{ text-align: center; font-size: 25px; font-weight: 300; line-height: 1.98; margin-top: 1.4em; } .page-3dsandr__content02-list-text .text-wrap{ display: inline-block; width: 100%; margin-top: 2.4em; font-feature-settings: 'palt'; } .page-3dsandr__content02-list-text .text-wrap:first-child{ margin-top: 0; } .page-3dsandr__content02-product-container{ display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-end; } .page-3dsandr__content02-product{ width: calc((100% - ((118 / 1136) * 100%) * 2) / 3); max-width: 254.8px; margin-left: calc((118 / 1136) * 100%); margin-top: 75px; flex-grow: 1; } .page-3dsandr__content02-product:nth-child(3n + 1){ margin-left: 0; } .page-3dsandr__content02-container01 .page-3dsandr__content02-product:last-child{ max-width: 763.7px; flex-grow: 1; } .page-3dsandr__content02-container02 .page-3dsandr__content02-product{ max-width: 258.1px; } .page-3dsandr__content02-container03 .page-3dsandr__content02-product{ max-width: 455.2px; } .page-3dsandr__content02-product-caption{ text-align: center; font-size: 23px; font-weight: 700; font-family: 'BIZ UDPGothic', sans-serif; } .page-3dsandr__content02-product-caption::before{ content: ""; display: block; width: 4px; height: 1.45em; background-color: #182983; margin: 10px auto; } /* TAKMillページ */ .page-takmill .container02__content{ padding: 20px 0 300px; } .page-takmill .under-hero{ background-image: url('../images/takmill/mainvisual_2.jpg'); height: 567.8px; } .page-takmill .under-hero .inner{ width: 90%; } .page-takmill .hero__wrap{ position: relative; } .page-takmill .hero__text{ width: calc((555.8 / 1136) * 100%); } .page-takmill .hero__img{ position: absolute; top: 0; right: calc((-64 / 1136) * 100%); width: calc((589.2 / 1136) * 100%); } .takmill-introduce{ padding-bottom: 55px; } .takmill-introduce__info{ padding-right: min(45px, calc((45 / 1600) * 100vw)); width: calc((637 / 1136) * 100%); overflow: hidden; } .takmill-introduce__info-list-title{ width: calc((278 / 582) * 100%); } .takmill-introduce__info-list-text{ font-size: 15.5px; line-height: 1.3; margin-top: 0.838em; font-feature-settings: 'palt'; } .takmill-introduce__info-text{ font-size: 32px; line-height: 1.3; margin-top: 1.4em; position: relative; } .takmill-introduce__info-text::after{ content: ""; display: block; width: 100vw; height: 1.6px; background-color: #f7b52c; } .takmill-introduce__info-text .text--emphasize{ font-weight: 700; } .takmill-introduce__info-text img{ width: 4.234em; vertical-align: baseline; margin-right: 8px; font-feature-settings: 'palt'; } .takmill-introduce__info-notice{ font-size: 13px; line-height: 1.41; padding-left: 1em; position: relative; margin-top: 1em; } .takmill-introduce__info-notice::before{ content: "※"; display: inline-block; font-size: 1em; position: absolute; top: 0; left: 0; } .takmill-introduce__problem{ margin-top: 215px; position: relative; z-index: 0; } .takmill-introduce__problem::before{ content: ""; display: block; width: calc((413.7 / 1136) * 100%); height: 0; padding-top: calc((413.7 / 1136) * 100%); border-radius: 50%; background-color: #edf1ea; position: absolute; top: -18%; left: -1.5vw; z-index: -1; } .takmill-introduce__problem-list-wrap{ max-width: 720px; margin: auto; position: relative; } .takmill-introduce__problem-list-wrap::before{ content: ""; display: block; width: 2.7px; height: 149.6px; background-image: linear-gradient(to bottom, #e30012 0, #e30012 calc((39.1 / 149.6) * 100%), #b2b2b3 calc((39.1 / 149.6) * 100%), #b2b2b3 100%); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); } .takmill-introduce__problem-list-text{ max-width: max-content; font-size: 31.5px; line-height: 1.417; position: absolute; top: 0; left: 0; transform: translate(-20%, -79%); } .takmill-introduce__problem-list{ padding: 40px min(85px, calc((85 / 720) * 100%)) 65px min(75px, calc((75 / 720) * 100%)); border-right: 2.7px solid #b2b2b3; border-bottom: 2.7px solid #b2b2b3; } .takmill-introduce__problem-list::before, .takmill-introduce__problem-list::after{ content: ""; display: block; background-color: #b2b2b3; position: absolute; } .takmill-introduce__problem-list::before{ width: calc((536 / 720) * 100%); height: 2.7px; top: 0; right: 0; } .takmill-introduce__problem-list::after{ width: 2.7px; height: calc((568.7 / 587.4) * 100%); bottom: 0; left: 0; } .takmill-introduce__problem-item{ font-size: 22px; line-height: 1.749; padding: 0.909em 0 0.909em min(78px, calc((78 / 555) * 100%)); font-feature-settings: 'palt'; border-bottom: 1px dashed #211613; position: relative; margin-top: 0.909em; } .takmill-introduce__problem-item::before{ content: ""; display: block; width: min(66.1px, calc((66.1 / 555) * 100%)); height: 47.2px; background: url('../images/takmill/check.svg') no-repeat; background-size: 100%; position: absolute; top: 1.59em; left: 0; } .takmill-introduce__problem-item:first-child{ margin-top: 0; } .takmill-introduce__problem-item .text--emphasize{ font-weight: 900; font-size: 1.332em; line-height: 1; } .takmill-introduce__problem-text{ text-align: center; font-size: 35px; margin-top: 1.714em; } .takmill-introduce__problem-text .text--emphasize{ display: inline-block; font-size: 1.32em; font-weight: 500; margin-right: 0.532em; line-height: 1; vertical-align: middle; } .takmill-feature{ background-color: #dbdbdb; position: relative; padding: 175px 0 125px; } .takmill-feature::before{ content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 84px 78.5px 0 78.5px; border-color: #f8faf9 transparent transparent transparent; position: absolute; top: 0; left: 50%; transform: translate(-50%, -1px); } .takmill-feature__wrap{ display: flex; justify-content: space-between; align-items: flex-start; margin-top: 190px; } .takmill-feature__wrap:first-child{ margin-top: 0; } .takmill-feature__wrap-img{ width: calc((615.9 / 1136) * 100%); } .takmill-feature__wrap:nth-child(even) .takmill-feature__wrap-img{ order: 2; } .takmill-feature__wrap:nth-child(1) .takmill-feature__wrap-img{ margin-top: calc((43 / 1136) * 100%); } .takmill-feature__wrap:nth-child(2) .takmill-feature__wrap-img{ margin-top: calc((-109 / 1136) * 100%); } .takmill-feature__wrap-body{ width: calc((498.8 / 1136) * 100%); } .takmill-feature__wrap:nth-child(even) .takmill-feature__wrap-body{ order: 1; } .takmill-feature__wrap-list{ background-color: #ffffff; position: relative; padding: 35px calc((25 / 498.8) * 100%); } .takmill-feature__wrap-list::before{ content: ""; display: block; width: 2.7px; height: 176.85px; background-image: linear-gradient(to bottom, #e30012 0, #e30012 calc((30 / 176.85) * 100%), #b2b2b3 calc((30 / 176.85) * 100%), #b2b2b3 100%); position: absolute; top: 0; } .takmill-feature__wrap:nth-child(odd) .takmill-feature__wrap-list::before{ right: 0; } .takmill-feature__wrap:nth-child(even) .takmill-feature__wrap-list::before{ left: 0; } .takmill-feature__wrap-list-title{ font-size: 25.6px; line-height: 1.749; font-feature-settings: 'palt'; } .takmill-feature__wrap-list-text{ font-size: 15.5px; line-height: 1.75; font-feature-settings: 'palt'; margin-top: 1em; } .takmill-feature__wrap-img02{ margin-top: 25px; } .takmill-feature__wrap:nth-child(1) .takmill-feature__wrap-img02{ max-width: 360px; margin-left: calc((30 / 498.8) * 100%); } .takmill-products{ padding-top: 105px; position: relative; } .takmill-products::before{ content: ""; display: block; width: 2.7px; height: 105.5px; background-image: linear-gradient(to bottom, #e30012 0, #e30012 calc((21.5 / 105.5) * 100%), #b2b2b3 calc((21.5 / 105.5) * 100%), #b2b2b3 100%); position: absolute; top: 0; left: 50%; transform: translate(-50%, calc((-21.5 / 105.5) * 100%)); } .takmill-products__software-title{ text-align: center; font-size: 34px; line-height: 1.32; font-family: 'BIZ UDPGothic', sans-serif; } .takmill-products__software-inner{ display: flex; } .takmill-products__software-box{ width: calc(100% / 2); border-left: 4.7px solid; } .takmill-products__software-box:first-child{ border-color: #4c98c9; } .takmill-products__software-box:last-child{ border-color: #1a2d78; } .takmill-products__software-box-header{ text-align: center; font-size: 18px; color: #ffffff; line-height: 1; padding: 0.833em 5px; } .takmill-products__software-box:first-child .takmill-products__software-box-header{ background-color: #4c98c9; } .takmill-products__software-box:last-child .takmill-products__software-box-header{ background-color: #1a2d78; } .takmill-products__software-box-body{ padding: 19px calc((25 / 568) * 100%) 0; } .takmill-products__software-box-title{ display: flex; justify-content: space-between; align-items: flex-start; } .takmill-products__software-box-info{ font-size: 16px; line-height: 1.19; padding: 0.84em 1.68em; background-color: #edf1ea; flex-shrink: 0; font-family: 'BIZ UDPGothic', sans-serif; } .takmill-products__software-box-title .text-wrap{ display: flex; flex-direction: column; font-size: 40px; font-weight: 500; line-height: 1.3; } .takmill-products__software-box-title .text-wrap .size--sm{ font-size: 0.49em; } .takmill-products__software-box-text{ font-size: 16px; line-height: 1.78; margin-top: 0.81em; font-family: 'BIZ UDPGothic', sans-serif; } .takmill-products__software-box-notice{ max-width: max-content; margin-left: auto; font-size: 13px; line-height: 1.75; margin-top: 1.38em; font-family: 'BIZ UDPGothic', sans-serif; } .takmill-products__software-box-img{ margin-top: 10px; } .takmill-products__mini{ margin-top: 230px; background-color: #dbdbdb; display: flex; align-items: flex-start; padding: 60px calc((40 / 1136) * 100%) 50px; position: relative; } .takmill-products__mini::before, .takmill-products__mini::after{ content: ""; display: block; width: 2.7px; height: 175.5px; background-image: linear-gradient(to bottom, #e30012 0, #e30012 calc((65 / 175.5) * 100%), #b2b2b3 calc((65 / 175.5) * 100%), #b2b2b3 100%); position: absolute; left: 50%; } .takmill-products__mini::before{ bottom: 100%; transform: translate(-50%, 15px); } .takmill-products__mini::after{ top: 100%; transform: translate(-50%, -30px); } .takmill-products__mini-img{ width: calc((504 / 1056) * 100%); max-width: 504px; margin-left: 15px; } .takmill-products__mini-inner{ max-width: max-content; margin-top: calc((30 / 1056) * 100%); flex-shrink: 0; } .takmill-products__mini-title{ font-size: min(81px, calc((81 / 1136) * 100vw)); font-weight: 500; line-height: 1; } .takmill-products__mini-title img{ width: 3.432em; vertical-align: baseline; margin-right: 0.358em; display: inline-block; } .takmill-products__mini-text{ font-size: 15.5px; line-height: 1.75; margin-top: calc((80 / 474.77) * 100%); } .takmill-products__details{ margin-top: 175px; } .takmill-products__details-title{ text-align: center; font-size: 25.6px; font-weight: 500; line-height: 1; } .takmill-products__details-title .size--lg{ font-size: 1.57em; display: inline-block; margin-right: 0.375em; } .takmill-products__details-wrap:nth-child(2){ margin-top: 65px; } .takmill-products__details-wrap:nth-child(3){ margin-top: 125px; } .takmill-products__details-wrap:first-child{ margin-top: 50px; } .takmill-products__details__wrap-title{ display: flex; justify-content: space-between; align-items: baseline; line-height: 1; font-size: 20px; position: relative; } .takmill-products__details__wrap-title::after{ content: ""; display: block; width: 100%; height: 2.73px; background-image: linear-gradient(to right, #e10012 0%, #e10012 30px, #b0b0b1 30px, #b0b0b1 100%); position: absolute; bottom: 0; left: 0; } .takmill-products__details__wrap-title .text-wrap{ font-size: 40px; font-weight: 500; } .takmill-products__details__wrap-title .text-wrap .size--sm{ font-size: 0.953em; margin-left: 0.56em; display: inline-block; } .takmill-products__details-table{ margin-top: 65px; width: 100%; table-layout: fixed; border: 1.5px solid #cccccc; } .takmill-products__details-table tr{ border-top: 1.5px solid #cccccc; } .takmill-products__details-table tr:first-child{ border-top: none; } .takmill-products__details-table th, .takmill-products__details-table td{ font-size: 14px; vertical-align: middle; text-align: center; line-height: 1.75; height: 52px; padding: 5px; font-feature-settings: "palt"; font-family: 'BIZ UDPGothic', sans-serif; } .takmill-products__details-table th{ font-weight: 400; color: #ffffff; background-color: #034a9b; width: 177.8px; } .takmill-products__details-chart{ margin-top: 120px; } .takmill-products__details-chart-wrap{ display: flex; align-items: flex-start; } .takmill-products__details-chart-title{ display: flex; flex-direction: column; font-size: 34px; line-height: 1; padding-left: 0.882em; position: relative; flex-shrink: 0; font-weight: 800; } .takmill-products__details-chart-title::before{ content: ""; display: block; width: 0.6em; height: 1.447em; background-color: #034a9b; position: absolute; top: -0.205em; left: 0; } .takmill-products__details-chart-title .size--sm{ font-size: 0.7351em; font-weight: 500; font-family: 'BIZ UDPGothic', sans-serif; } .takmill-products__details-chart-inner{ display: flex; margin: calc((30 / 1136) * 100%) 0 0 calc((60 / 1136)* 100%); flex-grow: 1; } .takmill-products__details-chart-notice{ max-width: max-content; margin-left: auto; font-size: 13px; margin-top: 3.076em; font-family: 'BIZ UDPGothic', sans-serif; } .takmill-products__details-chart-img{ margin-left: calc((100 / 906.81) * 100%); } .takmill-products__details-chart-img:first-child{ margin-left: 0; } .takmill-products__details-wrap01 .takmill-products__details-chart-img:first-child{ max-width: 269px; } .takmill-products__details-wrap01 .takmill-products__details-chart-img:last-child{ max-width: 280px; } .takmill-products__details-wrap02 .takmill-products__details-chart-img:first-child{ max-width: 363px; } .takmill-products__details-wrap02 .takmill-products__details-chart-img:last-child{ max-width: 383px; } /* D3テクスチャー */ .page-d3texture .under-hero{ height: auto; } .page-d3texture .container02__content{ background-color: #000000; padding-top: 10px; } .d3texture__notice{ max-width: max-content; margin-left: auto; color: #ffffff; font-size: 15px; letter-spacing: -0.015em; line-height: 1.749; } .d3texture__text{ max-width: 815.3px; margin: calc((100 / 1136) * 100%) auto 0; color: #ffffff; font-size: 19px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.7; } .d3texture__text .text-wrap{ display: inline-block; width: 100%; margin-top: 2.105em; } .d3texture__text .text-wrap:first-child{ margin-top: 0; } .d3texture-flow{ margin-top: 105px; } .d3texture-flow__title{ font-size: 25px; font-weight: 500; letter-spacing: -0.015em; color: #ffffff; line-height: 1; background: url('../images/d3texture/deco01.svg') no-repeat; background-size: auto 100%; padding: calc((40 / 1136) * 100%) 5px calc((19.5 / 1136) * 100%) calc((204 / 1136) * 100%); } .d3texture-flow__content{ display: flex; justify-content: center; margin-top: 26px; } .d3texture-flow__item{ width: calc((100% - calc((55 / 1136) * 100%) * 3) / 4); max-width: 194.3px; margin-left: calc((55 / 1136) * 100%); border-radius: 50%; background-color: #ffffff; font-size: 21px; line-height: 1.749; letter-spacing: -0.015em; position: relative; z-index: 0; } .d3texture-flow__item::before{ content: ""; display: block; width: 100%; height: 2.8px; background-color: #ffffff; position: absolute; top: 50%; right: 100%; transform: translateY(-50%); z-index: -1; } .d3texture-flow__item:first-child{ margin-left: 0; } .d3texture-flow__item:first-child::before{ display: none; } .d3texture-flow__item > div{ padding-top: 100%; position: relative; } .d3texture-flow__item span{ position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; display: inline-block; text-align: center; } .d3texture-feature{ margin-top: 175px; padding: calc((195 / 1136) * 100%) 15px calc((215 / 1136) * 100%); background-color: #ffffff; position: relative; } .d3texture-feature::before, .d3texture-feature::after{ content: ""; display: block; width: 0; height: 0; border-style: solid; position: absolute; left: 0; } .d3texture-feature::before{ top: 0; transform: translate(-0.5px, -0.5px); border-width: min(137.9px, calc((137.9 / 1136) * 100vw)) min(1136px, 90vw) 0 0; border-color: #000000 transparent transparent transparent; } .d3texture-feature::after{ bottom: 0; transform: translate(-0.5px, 0.5px); border-width: 131.9px 0 0 1136px; border-width: min(131.9px, calc((137.9 / 1136) * 100vw)) 0 0 min(1136px, 90vw); border-color: transparent transparent transparent #000000; } .d3texture-feature__title, .d3texture-library__title{ text-align: center; line-height: 1; font-size: 34px; font-weight: 500; letter-spacing: -0.015em } .d3texture-library__title{ color: #ffffff; } .d3texture-feature__title span, .d3texture-library__title span{ display: inline-block; position: relative; } .d3texture-feature__title span::after, .d3texture-library__title span::after{ content: ""; display: block; width: calc((139.6 / 435.3) * 100%); height: 1px; background-color: #231815; margin: 20px auto 0; } .d3texture-library__title span::after{ background-color: #ffffff; } .d3texture-feature__list{ max-width: 710px; margin: 50px auto 0; } .d3texture-feature__list li{ font-size: 23px; line-height: 1.2; padding-left: 0.863em; position: relative; margin-top: 0.782em; font-feature-settings: 'palt'; } .d3texture-feature__list li:first-child{ margin-top: 0; } .d3texture-feature__list li::before{ content: ""; display: block; width: 0.576em; height: 2.8px; background-color: #231815; position: absolute; top: 0.537em; left: 0; } .d3texture-feature__list li .size--sm{ font-size: 0.75em; } .d3texture-container01{ margin-top: 135px; } .d3texture-container01--top{ display: flex; justify-content: center; align-items: center; background-color: #595757; padding: 0 15px; } .d3texture-container01--top > *{ flex-grow: 1; } .d3texture-container01--top__img{ margin-left: 15px; } .d3texture-container01--top__img:nth-of-type(1){ width: calc((471.5 / 1136) * 100%); width: 471.5px; position: relative; } .d3texture-container01--top__img:nth-of-type(1) .d3texture-container01--top__caption{ position: absolute; top: calc((157.5 / 471.5) * 100%); left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: calc((13 / 471.5) * 100%) calc((15 / 471.5) * 100%); } .d3texture-container01--top__img:nth-of-type(1) .d3texture-container01--top__caption img{ width: 60%; max-width: 187.2px; } .d3texture-container01--top__img:nth-of-type(2){ width: calc((222.8 / 1136) * 100%); max-width: 222.8px; } .d3texture-container01--top__info{ margin-left: 15px; max-width: 340.8px; padding: 10px 0; } .d3texture-container01--top__info > div{ padding: 13px 5px; border-bottom: 1px solid #ffffff; color: #ffffff; } .d3texture-container01--top__info > div:first-child{ border-top: 1px solid #ffffff; } .d3texture-container01--top__info > div:first-child{ text-align: center; font-size: 18px; line-height: 1.2; } .d3texture-container01--top__info > div:nth-child(2) img{ max-width: 266.5px; margin: auto; display: block; } .d3texture-container01--top__info > div:nth-child(3){ text-align: center; font-size: 18px; line-height: 1.2; font-weight: 500; } .d3texture-container01--top__info > div:nth-child(4){ display: flex; justify-content: center; font-size: 12px; line-height: 1.77; } .d3texture-container01--top__info-list{ max-width: 250px; margin: auto; } .d3texture-container01--top__info-list > div{ display: flex; align-items: flex-start; margin-top: 7px; } .d3texture-container01--top__info-list > div:first-child{ margin-top: 0; } .d3texture-container01--top__info-list dt, .d3texture-container01--top__info-list dd{ font-size: 12px; line-height: 1.199; font-weight: 400; font-feature-settings: 'palt'; } .d3texture-container01--top__info-list dt{ display: flex; justify-content: space-between; width: 37px; padding-right: 1.25em; margin-right: 1.25em; box-sizing: content-box; border-right: 1px solid #ffffff; } .d3texture-container01--bottom{ max-width: 999.9px; margin: 30px auto 0; } .d3texture-container01--bottom__img-outer{ display: flex; } .d3texture-container01--bottom__caption{ color: #ffffff; font-size: 15px; line-height: 1.199; margin-top: 1em; } .d3texture-algorithm{ margin-top: 230px; display: flex; justify-content: center; } .d3texture-algorithm__img{ order: 2; width: calc((590 / 1136) * 100%); margin-left: calc((70 / 1136) * 100%); } .d3texture-algorithm__body{ order: 1; width: calc(100% - ((590 / 1136) * 100%)); max-width: 350.2px; } .d3texture-algorithm__body-lead{ font-size: 34px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; color: #ffffff; } .d3texture-algorithm__body-lead .text--emphasize{ font-weight: 700; display: inline-block; margin-right: 0.294em; } .d3texture-algorithm__body-text{ font-size: 19px; line-height: 1.7; color: #ffffff; font-feature-settings: 'palt'; margin-top: 2.368em; } .d3texture-library{ margin-top: 215px; } .d3texture-library__content{ margin: 60px auto 0; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; max-width: 1042.5px; } .d3texture-library__wrap{ width: calc((100% - 40px) / 2); max-width: 501.2px; color: #ffffff; margin-top: 85px; } .d3texture-library__wrap:nth-child(-n + 2){ margin-top: 0; } .d3texture-library__wrap-text{ max-width: 431px; margin: 0 auto; font-size: 19px; line-height: 1.7; padding: calc((55 / 501.2) * 100%) 0; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } .d3texture-library__wrap-list dt{ font-size: 29px; font-weight: 700; line-height: 1.75; } .d3texture-library__wrap-list dd{ font-size: 15px; line-height: 1.199; } .d3texture-library__wrap img{ margin-top: 10px; } .d3texture-library__notice{ max-width: 525px; margin: 2.333em auto 0; font-size: 15px; border: 1px solid #ffffff; color: #ffffff; padding: 1em 5px; text-align: center; } .d3texture-container02{ margin-top: 225px; display: flex; justify-content: center; } .d3texture-container01__img{ width: calc((501.1 / 1136) * 100%); } .d3texture-container02__text{ color: #ffffff; font-size: 19px; line-height: 1.7; width: calc(100% - (501.1 / 1136) * 100%); max-width: 447px; margin-left: calc((45 / 1136) * 100%); font-feature-settings: "palt"; letter-spacing: 0.05em; } .page-d3texture__btn{ margin-top: 172px; background-color: #f8faf9; } @media screen and (max-width: 1024px){ .section-header, .heading1{ font-size: 36px; } .top-business__box-number{ font-size: 25px; } .top-business__box-title{ font-size: 32px; } .page-pinnate__box-title, .page-3dsandr__box-title{ font-size: 22px; } .page-pinnate__box-example{ font-size: 17px; } .page-pinnate__box-example span{ height: 10px; } .page-pinnate__box-container:nth-child(odd) .page-pinnate__box-example span{ margin-right: 10px; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-example span{ margin-left: 10px; } .page-pinnate__contact-text{ font-size: 20px; } .page-3dsandr__content02 .heading2, .page-3dsandr__content02-container .heading3, .page-3dsandr__content02-list-title{ font-size: 30px; } .page-3dsandr__content02-list-text{ font-size: 21px; } .page-3dsandr__content02-product-caption{ font-size: 20px; } .takmill-introduce__info-text, .takmill-introduce__problem-list-text{ font-size: 27px; } .takmill-introduce__problem-list-text{ transform: translate(-7%, -69%); } .takmill-introduce__problem-item{ font-size: 20px; } .takmill-introduce__problem-text{ font-size: 29px; } .takmill-introduce__info{ padding-right: calc((20 / 1024) * 100vw); } .takmill-feature__wrap-list-title{ font-size: 22px; } .takmill-products__software-title{ font-size: 28px; } .takmill-products__software-box-title .text-wrap{ font-size: 32px; } .takmill-products__software-box-info, .takmill-products__software-box-text{ font-size: 15px; } .takmill-products__software-box-header{ font-size: 17px; } .takmill-products__details-title{ font-size: 22px; } .takmill-products__details__wrap-title{ font-size: 19px; } .takmill-products__details__wrap-title .text-wrap{ font-size: 32px; } .takmill-products__details-table th{ width: 160px; } .takmill-products__details-chart-title{ font-size: 28px; } .d3texture__notice{ font-size: 14px; } .d3texture__text{ font-size: 18px; } .d3texture-flow__title{ font-size: 22px; } .d3texture-flow__item{ font-size: 19px; width: calc((100% - calc((20 / 908.09) * 100%) * 3) / 4); margin-left: calc((20 / 908.09) * 100%); } .d3texture-feature__title, .d3texture-library__title, .d3texture-algorithm__body-lead{ font-size: 27px; } .d3texture-feature__list li{ font-size: 20px; } .d3texture-container01--top__info > div:first-child, .d3texture-container01--top__info > div:nth-child(3), .d3texture-library__wrap-text{ font-size: 17px; } .d3texture-algorithm__body-text, .d3texture-container02__text{ font-size: 18px; } .d3texture-library__wrap-list dt{ font-size: 25px; } } @media screen and (max-width: 768px){ .section-header, .heading1{ font-size: 26px; } .top-business { padding-top: 100px; } .top-business__content { display: block; width: 77%; margin: 40px auto 0; } .top-business__box{ width: 100%; margin: 10px auto 0; } .top-business__box:first-child{ margin-top: 0; } .top-business__box-number{ font-size: 20px; } .top-business__box-title{ font-size: 22px; margin-top: 15px; } .top-business__box-btn { margin-top: 30px; } .top-introduce{ margin-top: 90px; } .top-introduce__content{ margin-top: 40px; } .takmill-series{ margin-top: 80px; } #products .series ul { margin-top: 30px; } #products .btn-6{ margin-top: 100px; } .under-hero, #products .hero { height: 135px; /* margin-top: -46px; */ } .desc{ font-size: 14px; font-feature-settings: 'palt'; } .machine-header { padding-top: 65px; } .page-pinnate__box-title, .page-3dsandr__box-title{ font-size: 19px; line-height: 1.5; } .page-pinnate__box-text, .page-3dsandr__box-text{ font-size: 14px; margin-top: 5px; } .page-pinnate__box-example{ font-size: 16px; flex-direction: column; margin-top: 20px; line-height: 1.3; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-example{ flex-direction: column-reverse; } .page-pinnate__box-container:nth-child(4) .page-pinnate__box-example { margin-top: 20px; width: 100%; } .page-pinnate__box-example span{ margin-bottom: 5px; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-example span{ order: 1; margin-left: 0; } .page-pinnate__contact-text{ font-size: 18px; } .line { height: 65.5px; } .line02 { height: 100.7px; } .container02__body { margin-top: 40px; padding-top: 75px; } .page-pinnate__box, .page-3dsandr__box{ display: block; } .page-3dsandr__box{ margin-top: 40px; } .page-pinnate__box-img, .page-pinnate__box-body, .page-3dsandr__box-img, .page-3dsandr__box-body{ width: 100%; margin-bottom: 15px; } .page-pinnate__box-container + .page-pinnate__box-container{ margin-top: 70px; } .page-3dsandr__box:nth-child(odd) .page-3dsandr__box-body-inner{ padding: 3px 7px 3px 20px; } .page-3dsandr__box:nth-child(even) .page-3dsandr__box-body-inner{ padding: 3px 20px 3px 7px; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-body-inner, .page-pinnate__box-container:nth-child(2) .page-pinnate__box-img, .page-pinnate__box-container:nth-child(4) .page-pinnate__box-img{ max-width: none; } .page-pinnate__box-container:nth-child(odd) .page-pinnate__box-body-inner{ padding: 3px 7px 3px 20px; } .page-pinnate__box-container:nth-child(even) .page-pinnate__box-body-inner{ padding: 3px 20px 3px 7px; } .page-pinnate__contact { padding-top: 120px; margin-top: 10px; } .container02__content{ padding-bottom: 100px; } .page-3dsandr__content02 .heading2, .page-3dsandr__content02-container .heading3, .page-3dsandr__content02-list-title{ font-size: 23px; } .page-3dsandr__content02-list-text{ font-size: 17px; } .page-3dsandr__content02-product-caption{ font-size: 17px; } .page-3dsandr__content02 .line02 { height: 93px; } .page-3dsandr__content02 { margin-top: 60px; padding: 105px 0 150px; } .page-3dsandr__content02-container{ margin-top: 40px; padding-bottom: 60px; } .page-3dsandr__content02-product-container{ display: block; } .page-3dsandr__content02-product{ width: 58%; margin: 35px auto 0; } .page-3dsandr__content02-container01 .page-3dsandr__content02-product:last-child{ width: 90%; } .page-3dsandr__content02-container03 .page-3dsandr__content02-product{ width: 75%; } .page-3dsandr__content02-product:nth-child(3n + 1){ margin-left: auto; } .page-3dsandr__btn{ margin-top: 50px; } .page-3dsandr__content02-list-text .text-wrap{ margin-top: 25px; } .page-takmill .under-hero{ height: calc((335 / 768) * 100vw); } .takmill-introduce__info-list-text{ font-size: 14px; } .takmill-introduce__info-text, .takmill-introduce__problem-list-text{ font-size: 22px; } .takmill-introduce__problem-item{ font-size: 18px; line-height: 1.5; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; } .takmill-introduce__problem-item .text--emphasize{ font-size: 20px; } .takmill-introduce__problem-text{ font-size: 23px; font-feature-settings: 'palt'; } .page-takmill .container02__content{ padding: calc((80 / 768) * 100%) 0 100px; } .takmill-introduce__info{ width: 100%; } .takmill-introduce__info-text img { width: 60px; margin-right: 3px; } .page-takmill .hero__img{ width: calc((270 / 677.7) * 100%); right: 0; } .takmill-introduce__problem-list::before{ width: calc(100% - 159.6px); min-width: 165px; } .takmill-introduce__problem-list { padding: 25px calc((55 / 677.7) * 100%) 50px calc((45 / 677.7) * 100%); } .takmill-introduce__problem-list-wrap::before{ height: 100px; } .takmill-introduce__problem{ margin-top: 155px; } .takmill-introduce__problem::before { width: 200px; padding-top: 200px; } .takmill-feature::before { border-width: 64px 68.5px 0 68.5px; } .takmill-feature__wrap-list-title{ font-size: 19px; line-height: 1.5; } .takmill-feature__wrap-list-text{ font-size: 14px; } .takmill-feature__wrap{ display: block; margin-top: 80px; } .takmill-feature__wrap-img{ width: 100%; } .takmill-feature__wrap:nth-child(1) .takmill-feature__wrap-img{ margin-top: 0; } .takmill-feature__wrap-body{ width: 100%; margin-top: 20px; } .takmill-feature__wrap:nth-child(1) .takmill-feature__wrap-img02{ width: 100%; margin-left: auto; margin-right: auto; } .takmill-feature { padding: 125px 0 100px; } .takmill-products::before{ height: 80px; } .takmill-products__software-title{ font-size: 22px; } .takmill-products__software-box-title .text-wrap{ font-size: 24px; } .takmill-products__software-box-info, .takmill-products__software-box-text{ font-size: 14px; } .takmill-products__software-box-info{ margin-left: auto; } .takmill-products__software-box-header{ font-size: 16px; } .takmill-products__software-box-title{ flex-direction: column; } .takmill-products__software-inner{ display: block; } .takmill-products__software-box{ width: 100%; } .takmill-products__software-box-body{ padding-bottom: 15px; } .takmill-products__mini::before, .takmill-products__mini::after{ height: 100px; } .takmill-products__mini{ margin-top: 110px; padding: 40px calc((40 / 1136) * 100%) 30px; } .takmill-products__mini-inner{ margin-top: 0; } .takmill-products__mini-text{ font-size: 14px; margin-top: 15px; } .takmill-products__mini{ display: block; } .takmill-products__mini-img{ width: 80%; margin: 20px auto 0; } .takmill-products__mini-title{ font-size: 40px; } .takmill-products__details-title{ font-size: 19px; } .takmill-products__details__wrap-title{ font-size: 18px; padding-bottom: 5px; } .takmill-products__details__wrap-title .text-wrap{ font-size: 24px; } .takmill-products__details-table{ margin-top: 40px; } .takmill-products__details-table th, .takmill-products__details-table td{ width: 100%; display: flex; justify-content: center; align-items: center; padding: 10px 5px; height: auto; font-feature-settings: 'palt'; } .takmill-products__details-chart{ margin-top: 50px; } .takmill-products__details-chart-title{ font-size: 22px; } .takmill-products__details-chart-wrap{ display: block; } .takmill-products__details-chart-inner { justify-content: center; margin: 20px 0 0; } .takmill-products__details-chart-img{ margin-left: calc((50 / 677.7) * 100%); } .takmill-products__details-wrap { margin-top: 40px; } .takmill-products__details { margin-top: 120px; } .d3texture__notice{ font-size: 13px; } .d3texture__text{ font-size: 17px; line-height: 1.5; } .d3texture-flow__title{ background-position-x: -20px; font-size: 19px; padding-left: calc((110 / 677.7) * 100%); } .d3texture-flow__content{ display: block; } .d3texture-flow__item{ font-size: 17px; margin: 20px auto 0; width: 50%; } .d3texture-flow__item:first-child{ margin-left: auto; } .d3texture-flow__item::before { top: 0; right: 50%; transform: translate(50%, -100%) rotate(90deg); } .d3texture-flow { margin-top: 60px; } .d3texture-feature{ margin-top: 85px; } .d3texture-feature__title, .d3texture-library__title, .d3texture-algorithm__body-lead{ font-size: 20px; } .d3texture-feature__list{ margin-top: 30px; } .d3texture-feature__list li{ font-size: 17px; } .d3texture-container01 { margin-top: 70px; } .d3texture-container01--top__info > div:first-child, .d3texture-container01--top__info > div:nth-child(3), .d3texture-library__wrap-text{ font-size: 16px; } .d3texture-container01--top{ display: block; padding: 15px; } .d3texture-container01--top__img:nth-of-type(1), .d3texture-container01--top__img:nth-of-type(2){ width: 100%; margin: auto; } .d3texture-container01--top__img:nth-of-type(2){ margin-top: 20px; } .d3texture-container01--top__info{ width: 100%; margin: 20px auto 0; padding: 0; } .d3texture-container01--bottom__img-outer{ display: block; } .d3texture-container01--bottom__caption{ font-size: 14px; } .d3texture-algorithm { margin-top: 100px; display: block; } .d3texture-algorithm__body { width: 100%; max-width: none;; margin-top: 20px; } .d3texture-algorithm__body-text{ font-size: 17px; margin-top: 15px; } .d3texture-algorithm__img { width: 100%; margin: 0; } .d3texture-feature__title span::after, .d3texture-library__title span::after{ margin-top: 10px; } .d3texture-library { margin-top: 90px; } .d3texture-library__wrap-text{ line-height: 1.5; } .d3texture-library__wrap-list dt{ font-size: 21px; } .d3texture-library__wrap-list dd{ font-size: 14px; } .d3texture-library__content{ margin-top: 40px; display: block; } .d3texture-library__wrap{ width: 100%; margin: 30px auto 0; } .d3texture-library__wrap:nth-child(2){ margin-top: 30px; } .d3texture-library__notice{ font-size: 14px; padding: 13px 5px; } .d3texture-container02__text{ font-size: 17px; line-height: 1.5; width: 100%; max-width: none; margin: 20px auto 0; } .d3texture-container02 { margin-top: 90px; display: block; } .d3texture-container01__img{ width: 100%; } .page-d3texture__btn { margin-top: 90px; } } /* 20250925 */ .cmn-f-menu.right { display: flex; } .cmn-f-menu.right .tit { position: relative; line-height: 1.2; } .cmn-f-menu.right .tit::before { position: absolute; } .cmn-f-menu.right .tit a { display: inline-block; padding-left: 10px; } .cmn-f-menu.right .box { float: none; } .cmn-f-menu.right .box ul li { line-height: 1.2; position: relative; } .cmn-f-menu.right .box ul li:before { position: absolute; } .cmn-f-menu.right .box ul li a { padding-left: 10px; display: inline-block; } .cmn-f-menu.right .box ul li a .cmn-br {} @media(max-width:768px) { .cmn-f-menu.right { display: block; } .cmn-f-menu.right .box ul li a .cmn-br { display: none; } } .cmn-takmill-title { font-size: 32px; font-weight: 700; line-height: 1.3; margin-top: 1.4em; } @media(max-width:1024px) { .cmn-takmill-title { font-size: 27px; } } @media(max-width:1024px) { .cmn-takmill-title { font-size: 22px; } } /* 20260120 */ .scn-about-machining-center { text-align: center; margin-bottom: 80px; } .section-header .heading2.scn-section-header { font-size: 34px; } .scn-about-machining-center__text { font-size: 16px; font-family: "ryo-gothic-plusn", sans-serif; font-weight: 400; line-height: 200%; margin-top: 40px; } @media screen and (max-width: 768px) { .section-header .heading2.scn-section-header { font-size: 26px; } .scn-about-machining-center__text { font-size: 14px; text-align: center; } } .scn-feature { padding-block: 60px; } .scn-feature h2 { text-align: center; font-weight: 700; font-size: 24px; margin-bottom: 60px; } .scn-feature__grid { display: grid; grid-template-columns: repeat(2, 2fr); gap: 60px 180px; } .scn-feature__inner { max-width: 944px; margin-inline: auto; } .scn-feature__item h3 { text-align: center; font-weight: 700; font-size: 18px; margin-bottom: 16px; } .scn-feature__item p, .scn-feature__item li { font-size: 14px; } .scn-feature__item p { line-height: 1.7; } .scn-feature__item ul { margin-top: 8px; } .scn-feature__item li { margin-left: 1em; list-style: disc; margin-bottom: 10px; } @media screen and (max-width: 768px) { .scn-feature__inner { margin: 50px auto 0 auto; width: 90%; } .scn-feature__grid { display: grid; grid-template-columns: 1fr; gap: 60px; } }