@charset "UTF-8"; @import "reset5.css"; /*@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);*/ /* noto-sans-jp-300 - japanese_latin */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 300; src: url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-300.eot'); /* IE9 Compat Modes */ src: local('Noto Sans Japanese Light'), local('NotoSansJapanese-Light'), url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-300.svg#NotoSansJP') format('svg'); /* Legacy iOS */ } /* noto-sans-jp-regular - japanese_latin */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; src: url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-regular.eot'); /* IE9 Compat Modes */ src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-regular.svg#NotoSansJP') format('svg'); /* Legacy iOS */ } /* noto-sans-jp-500 - japanese_latin */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; src: url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-500.eot'); /* IE9 Compat Modes */ src: local('Noto Sans Japanese Medium'), local('NotoSansJapanese-Medium'), url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-500.woff') format('woff'), /* Modern Browsers */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-500.svg#NotoSansJP') format('svg'); /* Legacy iOS */ } /* noto-sans-jp-700 - japanese_latin */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 700; src: url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-700.eot'); /* IE9 Compat Modes */ src: local('Noto Sans Japanese Bold'), local('NotoSansJapanese-Bold'), url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/noto-sans-jp/noto-sans-jp-v23-japanese_latin-700.svg#NotoSansJP') format('svg'); /* Legacy iOS */ } body { color:#3e5348; background-color: #fff; padding: 0; position: relative; min-height: 100%; text-align: center; overflow: hidden; font-family: Avenir, Univers, "Helvetica Neue", Helvetica, Arial , "Noto Sans JP", sans-serif !important; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizeLegibility; font-feature-settings: 'palt'; font-variant-numeric: proportional-nums; } html { min-height: 100%; } * {word-wrap: break-word; } img { -ms-interpolation-mode: bicubic; } /* !font-size 12px default setting */ body { font-size: 14px; line-height: 1; letter-spacing: 0.08em; font-weight: 300; color: #3e5348 } body p, ol li , ul li, th, td { font-family: Avenir, Univers, "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif !important; line-height: 2em; letter-spacing: 0.08em; font-weight: 300; } *:first-child+html body { font-size:77%; } * html body { font-size:77%; } svg, [src$=".svg"], [data$=".svg"] { display: block; height: auto; width: 100%; } *{ box-sizing: border-box; -webkit-box-sizing: border-box; } h2,h3,h4,h4,h5 { font-family: Avenir, Univers, "Helvetica Neue", Helvetica, Arial, 'Noto Sans JP', sans-serif !important; line-height: 1.6em; font-style: normal; font-weight: normal } iframe { overflow: hidden } /* !clearfix */ hr { display: none; } .cfix { /zoom : 1; } .cfix:after { content : ''; display : block; clear : both; } /* スクロールバーの有無によるズレ対策 */ html { overflow-y: scroll; } /* !Links */ a { font-weight: 400 } a:link { color: #3e5348; text-decoration: none } a:visited { color: #3e5348; text-decoration: none } a:hover { color: #a7a7a7; text-decoration: underline } a:active { color: #ff685d; text-decoration: overline } a.nb:link { border-bottom: none } html { margin: 0; padding: 0 } body { margin: 0; padding: 0 } .noscroll { position: fixed !important; overflow-y: scroll; } #wrapper { position: relative; } #header { width: 100%; height: 64px; background: #fff; position: fixed; left: 0; top: 0; z-index: 1000; } #header h1 { padding: 23px 60px; text-align: left; } #header h1 .corp-logo { width: 230px; display: inline-block } #header h1 .tagline { width: 106px; margin: 0 0 2px 30px; display: inline-block } #header #global-nav { position: absolute; right: 0; top: 0; } #header #global-nav ul { float: left } #header #global-nav ul li { float: left; position: relative } #header #global-nav #menu li a { font-size: 16px; line-height: 1; padding: 25px; display: block; position: relative; z-index: 10; } #header #global-nav #menu li span { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: #f4f4f4; z-index: 0 } #header #global-nav #menu li .bar { position: absolute; left: 23%; bottom: 17px; width: 0; height: 3px; background: #008842; z-index: 0 } #header #global-nav #menu li:nth-child(3) .bar { left: 16%; } #header #global-nav #menu li:nth-child(1) ol li:nth-child(2) { display: none } #header #global-nav #menu li a:link { color: #3e5348; text-decoration: none; } #header #global-nav #menu li a:visited { color: #3e5348; text-decoration: none } #header #global-nav #menu li a:hover { color: #a7a7a7; text-decoration: underline; } #header #global-nav #menu li ol { position: fixed; left: 0; top: 60px; width: 100%; background: #00a73c; text-align: center; font-size: 0; display: none } #header #global-nav #menu li ol li { display: inline-block; float: none; border: solid #008842; border-width: 0 1px 1px 0 } #header #global-nav #menu li ol.bsns li { width: 25%; float: left } #header #global-nav #menu li ol li span { background: #008842; } #header #global-nav #menu li ol li a { font-size: 14px; line-height: 1; padding: 30px; display: block; position: relative; z-index: 10 } #header #global-nav #menu li ol.bsns li a { padding: 20px; padding: 0 0 0 140px; display: block; line-height: 90px; min-height: 90px; position: relative; text-align: left } #header #global-nav #menu li ol.bsns li a img { position: absolute; left: 20px; top: 20px } #header #global-nav #menu li ol li a:link { color: #fff; text-decoration: none; } #header #global-nav #menu li ol li a:visited { color: #fff; text-decoration: none } #header #global-nav #menu li ol li a:hover { color: #a7a7a7; text-decoration: underline; } #header #global-nav #h-btns { padding: 0 0 0 25px; } #header #global-nav #h-btns li a { display: block; padding: 2px 0; line-height: 1; display: block } #header #global-nav #h-btns .h-btn01 { background-color: #bdce00 } #header #global-nav #h-btns .h-btn02 { background-color: #008842 } #btn_menu { display: none } #footer { width: 100%; position: relative } #footer .f-ill { padding: 0 5px 30px } #footer .foot-inner { padding: 60px 80px 20px; background-color: #008842; } #footer .sitemap { text-align: left; padding: 0; margin: 0; position: relative; z-index: 10 } #footer .sitemap a:link { color: #fff; text-decoration: none; } #footer .sitemap a:visited { color: #fff; text-decoration: none } #footer .sitemap a:hover { color: #c7c7c7; text-decoration: underline; } #footer .sitemap .sm-cont { width: 22%; float: left; } #footer .sitemap .sm-cont_ { width: 22%; float: left; } #footer .sitemap .sm-inner { padding: 0 40px; margin: 0; overflow: hidden; } #footer .sitemap .cate { margin: 0 0 30px; padding: 0; font-size: 14px; } #footer .sitemap .cate a { padding: 0 0 0 16px; position: relative } #footer .sitemap .cate a .arw { position: absolute; left: 0; top: 3px } #footer .sitemap .cate a:hover .arw { left: 1px; } #footer .sitemap li { font-size: 13px } #footer .sitemap li a { font-weight: 400; padding-left: 5px } #footer .foot { text-align: left; padding: 60px 0 0; position: relative; z-index: 0 } #footer .foot .f-logo { width: 240px; display: inline-block } #footer .foot .copyright { color: #fff; font-size: 12px; display: inline-block; padding: 0 0 10px 80px } #footer .ill { position: absolute; right: 20px; bottom: 20px; width: 36% } /*////TOP////*/ #top-main { margin-top: 64px; position: relative } #top-main img.slide { position: absolute; left: 0; top: 0; display: none } #top-main #bullets { position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center; z-index: 10 } #top-main #bullets li { display: inline-block; cursor: pointer } #top-main iframe { height: 56vw } #top-topics { padding: 80px; background: #f4f4f4; position: relative; overflow: hidden } .top-inner { min-width: 1024px; max-width: 1240px; margin: 0 auto; position: relative } .top-inner h2 { margin-bottom: 30px } .top-inner h2 span { line-height: 3em; letter-spacing: 0.4em } .topics { padding: 0 40px 70px } .topics ul { margin: 0 -5px } .topics li { float: left; width: 25%; opacity: 0 } .topics li .topic { padding: 5px } .topics li .topic .topic-inner { display: block; background: #fff; text-align: left; box-shadow: 2px 2px 25px #e3e3e3; position: relative; cursor: pointer } .topics li .topic .topic-inner .thumb { overflow: hidden; display: block } .topics li .topic .topic-inner .arw { position: absolute; right: 0; bottom: 0 } .topics li .topic .topic-inner .topic-cont { padding: 15px 20px } .topics li .topic .topic-inner .cate { display: inline-block; border-bottom: solid 2px #008842; line-height: 1.6em; margin-bottom: 10px; letter-spacing: 0 } .topics li .topic .topic-inner h3 { font-size: 18px; margin-bottom: 4px } .topics .loader { padding: 60px } #top-topics .btn_more { width: 33.33%; margin: 35px auto 0 } #top-topics .btn_more a { display: block; padding: 20px 0; font-size: 16px; color: #fff; background: #008842 } #top-topics .btn_more.disabled a { background: #e5e5e5 } #top-topics .top-inner .fig01 { position: absolute; left: 6.4%; top: -30px } #top-topics .top-inner .fig02 { position: absolute; right: 8.6%; top: -40px} #top-topics .top-inner .fig03 { position: absolute; right: 10%; top: 25px} #top-topics .fig04 { position: absolute; left: 2.8%; bottom: 120px} #top-topics .fig05 { position: absolute; left: 7.6%; bottom: 90px} #top-topics .fig06 { position: absolute; left: -65px; bottom: 30px} #top-topics .fig07 { position: absolute; right: -30px; bottom: -55px} #top-topics .fig08 { position: absolute; right: 22.2%; bottom: 80px} .btn_more a:link { color: #fff; text-decoration: none; } .btn_more a:visited { color: #fff; text-decoration: none } .btn_more a:hover { color: #fff; text-decoration: underline; } #top-news { position: relative; padding: 80px; border-bottom: solid 1px #e4e4e4; background: #f7f7f7; overflow: hidden } #top-news .news { padding: 0 40px 80px } #top-news .news .news-tabs li { float: left; width: 33.33%; background: #fff; border-bottom: solid 1px #d4d4d4; position: relative } #top-news .news .news-tabs li.active a:link { color: #fff; text-decoration: none; } #top-news .news .news-tabs li.active a:visited { color: #fff; text-decoration: none } #top-news .news .news-tabs li.active a:hover { color: #fff; text-decoration: none; } #top-news .news .news-tabs li a { border-right: solid 1px #d4d4d4; display: block; padding: 10px 0; position: relative; z-index: 10 } #top-news .news .news-tabs li span { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: #c1cd30; z-index: 0 } #top-news .news .news-inner { position: relative } #top-news .news .news-inner ul#xj-mainlist1 { position: relative } #top-news .news .news-inner ul#xj-mainlist2 { position: absolute; left: 0; top: 0; width: 100%; display: none } #top-news .news .news-inner ul#xj-mainlist3 { position: absolute; left: 0; top: 0; width: 100%; display: none } /*#top-news .news .news-inner li { padding: 20px 15px 20px 320px; position: relative; text-align: left; border-bottom: solid 1px #d4d4d4; background: #fff; } #top-news .news .news-inner li .cate { position: absolute; left: 15px; top: 20px; display: inline-block; width: 110px; font-size: 12px; text-align: center; background: #e5e5e5 } #top-news .news .news-inner li .date { position: absolute; left: 170px; top: 20px; font-size: 16px; color: #7c7c7c; font-weight: 700 } #top-news .news .news-inner li .size { font-size: 12px } #top-news li a:link { color: #3e5348; text-decoration: none; } #top-news li a:visited { color: #3e5348; text-decoration: none } #top-news li a:hover { color: #c7c7c7; text-decoration: underline; }*/ .btn_more { width: 33.33%; margin: 40px auto 0 } .btn_more a { display: block; padding: 20px 0; font-size: 16px; background: #bdce00; text-align: center } #top-news .top-inner .fig01 { position: absolute; left: 6.4%; top: -30px } #top-news .top-inner .fig02 { position: absolute; right: 8.6%; top: -40px} #top-news .top-inner .fig03 { position: absolute; right: 10%; top: 25px} #top-news .fig04 { position: absolute; left: 2.8%; bottom: 120px} #top-news .fig05 { position: absolute; left: 7.6%; bottom: 90px} #top-news .fig06 { position: absolute; left: -65px; bottom: 30px} #top-news .fig07 { position: absolute; right: -30px; bottom: -55px} #top-news .fig08 { position: absolute; right: 22.2%; bottom: 80px} #top-business { padding: 80px } /* #top-business .business .main-busi { float: left; width: 75%; position: relative } #top-business .business .main-busi h3 { position: absolute; left: 0; bottom: 0; width: 100%; padding: 3px 0; background: #f4f4f4 } #top-business .business .main-busi ul { margin: 0 -20px; padding-bottom: 40px; } #top-business .business .main-busi ul li { width: 25%; float: left } #top-business .business .main-busi ul li a { display: block; padding: 20px } #top-business .business .other-busi { float: left; width: 25%; } #top-business .business .other-busi ul { border-left: dotted 1px #d4d4d4; margin-left: 40px } #top-business .business .other-busi ul li { margin: 15px 0 } #top-business .business .other-busi ul li a { display: block; padding: 20px } */ #top-business .business .main-busi { width: 88%; position: relative; margin:0 auto; } #top-business .business .main-busi h3 { position: absolute; left: 0; bottom: 0; width: 100%; padding: 3px 0; background: #f4f4f4 } #top-business .business .main-busi ul { margin: 0 -20px; padding-bottom: 40px; } #top-business .business .main-busi ul li { width: 25%; float: left } #top-business .business .main-busi ul li a { display: block; padding: 20px 30px } #top-business .business .other-busi { width: 88%; margin:20px auto; /*border-top: dotted 1px #d4d4d4;*/ } #top-business .business .other-busi ul { width:88%; margin:0 auto; } #top-business .business .other-busi ul li { margin: 15px 0; width:33.333%; float:left; } #top-business .business .other-busi ul li a { display: block; padding: 20px; position: relative } #top-business .business .other-busi ul li:first-child a .ico { position: absolute; left: 50%; top: -10px; margin-left: -180px } #top-business .facilities { margin: 80px 0 0; position: relative } #top-business .facilities .facis-inner { min-width: 1024px; max-width: 1240px; margin: 0 auto; overflow: hidden } #top-business .facilities .facis-inner .facis-container { margin: 0 -5px; overflow: hidden; position: relative } #top-business .facilities .facis-inner ul { position: absolute; left: -300%; top: 0; width: 840% } #top-business .facilities .facis-inner ul li { float: left; width: 2.38%; position: relative } #top-business .facilities .facis-inner ul li a { display: block; overflow: hidden; padding: 0 5px; } #top-business .facilities .facis-inner ul li p { padding: 10px 5px; line-height: 1.6em; } #top-business .facilities .facis-inner ul li .ico { position: absolute; left: 15px; top: 10px } #top-business .facilities .prev-arw { position: absolute; left: -80px; top: 50%; margin-top: -72px; padding: 20px 20px 20px 0; cursor: pointer } #top-business .facilities .next-arw { position: absolute; right: -80px; top: 50%; margin-top: -72px; padding: 20px 0 20px 20px; cursor: pointer } .disabled { cursor: default; opacity: 0.25 } #sns { text-align: center; margin: 0 0 30px; } #sns a { display: block; margin: 0 auto } #yomiuri-group ul { font-size:0; margin:0 0 50px; } #yomiuri-group ul li { display:inline-block; padding:0 40px; } /*////LOWER pages////*/ #main { position: relative; margin-top: 64px; } #main h2 { position: absolute; left: 0; top: 50%; width: 100%; margin-top: -24px; z-index: 10 } #main h2 span { line-height: 3em; letter-spacing: 0.4em } #main .breadcrumbs { position: absolute; left: 0; bottom: 0; display: inline-block; padding: 12px; background: #f7f7f7; font-size: 12px; line-height: 1; z-index: 10 } #main .breadcrumbs a:link { color: #14a83b; text-decoration: underline; } #main .breadcrumbs a:visited { color: #14a83b; text-decoration: underline } #main .breadcrumbs a:hover { color: #a7a7a7; text-decoration: none; } #main .bg { position: relative; z-index: 0 } .contents { background: url(../img/grad.png) repeat-x top; padding: 60px 80px } .contents-inner { min-width: 1024px; max-width: 1240px; margin: 0 auto } h2.btit { border: solid 2px #9aaba2; background: #fff; padding: 16px; font-size: 20px; font-weight: 500; letter-spacing:0.4em; box-shadow: 2px 2px 25px #e3e3e3; margin:0 0 60px; } p.read { font-size: 16px } .sec { padding: 0 0 60px; margin: 0 0 60px; } .sec-inner { padding: 0 40px; text-align: left } .sec-inner h2 { font-size: 24px; color: #009848; letter-spacing: 0.24em; font-weight: 700 } .sec-inner h3 { font-size: 18px; margin-bottom: 1em; letter-spacing: 0.24em; font-weight: 500 } .sec-inner h4 { font-size: 15px; margin-bottom: 0.4em; font-weight: 400 } .sec-b { padding: 0 0 60px; margin: 0 0 60px; border-bottom: solid 1px #e7e7e7 } .column-one { padding: 40px 0 0; margin: 0 -25px } .column-one .column { width: 50%; } .column-one .column .clm-immner { padding: 0 25px } .column-two { padding: 40px 0 0; margin: 0 -25px } .column-two .column { width: 50%; float: left; } .column-two .column .clm-immner { padding: 0 25px } .block { margin: 0 -25px; } .block .ph { width: 50%; } .block .txt { width: 50%; padding:15px 0 0; } .block .inner { padding: 0 25px } .block h3 { font-size: 18px; margin-bottom: 1em; letter-spacing: 0.24em; font-weight:500; } .block h4 { font-size: 18px; margin-bottom: 1em; letter-spacing: 0.24em; font-weight:500; } .block-b { margin: 0 0 80px; text-align: left } .block-c { margin: 0 0 60px; text-align: left } .block-d { padding: 60px 0 0; text-align: left } .bnrs { text-align: center } .bnrs a { display: inline-block; width: 40%; padding: 0 10px } /*//COMPANY//*/ .company-table { margin: 0 auto 60px; } .company-table th { background: #f4f4f4; border: solid #dfdfdf; border-width: 1px 0; padding: 20px; font-weight:400; width:300px; } .company-table td { border: solid #dfdfdf; border-width: 1px 0; padding: 20px; } #company-idx .link-area { margin:0 0 0 -14px; } #company-idx .link-area li { width:33.333%; float:left; text-align:center; } #company-idx .link-area li .idx-inner { padding: 0; margin:0 0 14px 14px; box-shadow: 2px 2px 25px #e3e3e3; cursor: pointer } #company-idx .link-area li .thumb { overflow: hidden } #company-idx .link-area li h4 { font-size:20px; letter-spacing:0.4em; font-weight:500; margin: 20px 0; } #company-idx .link-area li .ar { background:#008842; text-align:right; padding:0 15px 0 0; height:24px; } #company-idx .link-area li .ar img { vertical-align:top; } #company-idx .link-area a { color:#3e5348; text-decoration:none; } /*企業スローガン*/ #company-slogan .slogan { padding: 80px 200px } #company-slogan p { font-size: 17px; font-weight:500; line-height:2.4em; } /*会社概要*/ #outline ul li { line-height: 1em; font-size:12px; } #outline ul li span { width:100px; display:inline-block; } #outline span { font-size:13px; } #outline span.tit { font-size:14px; font-weight:700; } #outline .tbl { font-size: 13px; } #outline .tbl th { background:none !important; border:none !important; padding:0 !important; font-weight:500 !important; width:130px !important; } #outline .tbl td { border:none !important; padding:0 !important; } #outline .tbl02 th { background:none !important; padding: 8px 20px 8px 0 !important; width: 160px; font-weight:500 !important; border: none } #outline .tbl02 td { border:none !important; padding: 8px 0 !important; } #outline .tbl02 .line { border: none } #outline .tbl02 .no-line { border-width:0 !important; } #outline .map iframe { width: 100%; height: 560px } /*メッセージ*/ #message {} #message .statement { padding: 0 0 0 320px; position: relative } #message .statement h3 { font-size: 22px; margin-bottom: 1.6em } #message .statement p { font-size: 15px } #message .pic { position: absolute; left: 0; top: 0; width: 240px } #message .pic p { margin-top: 1em } #message .pic p span { font-size: 20px } #message .bnr { margin: 50px 0 0 320px; } #message .bnr a img:hover { transform: scale(1.02); } #message .bnr a img { width: 330px; transition: 0.2s; } /*沿革*/ #history {} #history th { width:10%; } #history td.month { background:#f4f4f4; width:8%; text-align:right; padding:0 30px 0 0; } #history td.txt { width:82%; } /*グループ企業*/ #group ul li { margin:0 0 5px 0; } #group ul li:last-child { margin:0; } span.pdf { font-size:12px; } /*//IR//*/ .ir-table th { border:solid #c7c7c7; border-width: 1px 0; font-size:16px; color:#008842; font-weight:500; letter-spacing:0.2em; } .ir-table td { border:solid #c7c7c7; border-width: 1px 0; font-size:16px; letter-spacing:0.2em; } .sec-block { margin:0 0 80px 0; } .notes { font-size: 12px; line-height:2em; display:inline-block; } #ir-news h4 { font-weight: bold; padding: 20px 0 10px; } #ir-news p.txtL { margin:0 0 50px; } #stock-information p.txtL { margin:0 0 50px; } /*IRインデックス*/ #ir-idx h3 { font-size:24px; color:#bdce00; font-weight:500; letter-spacing:0.2em; } #ir-idx .link-area { margin:0 0 0 -14px; } #ir-idx .link-area li { width:33.333%; float:left; text-align:center; } #ir-idx .link-area li .inner { padding:60px 0 0; margin:0 0 14px 14px; box-shadow: 2px 2px 25px #e3e3e3; cursor: pointer } #ir-idx .link-area li h4 { font-size:20px; letter-spacing:0.4em; font-weight:500; margin:50px 0 20px; } #ir-idx .link-area li .ar { background:#008842; text-align:right; padding:0 15px 0 0; height:24px; } #ir-idx .link-area li .ar img { vertical-align:top; } #ir-idx .link-area a { color:#3e5348; text-decoration:none; } /*成長戦略*/ #strategy {} #strategy-main { position:relative; } #strategy-main h2 { position:absolute; top:90px; left:50%; margin:0 0 0 -350px; } #strategy .sec01 .intro { font-size:16px; letter-spacing:0.4em; line-height:3em !important; margin:0 0 80px; } #strategy .sec01 h3 { font-size:20px; letter-spacing:0.4em; font-weight:700; margin:0 0 30px; } #strategy .sec01 ul { margin:0 0 0 -20px; } #strategy .sec01 ul li { width:25%; float:left; } #strategy .sec01 ul li .inner { margin:0 0 0 20px; position:relative; } #strategy .sec01 ul li p { font-size:16px; color:#fff; position:absolute; top:90px; width:100%; } #strategy .sec01 ul li p.point01 { position:absolute; top:50%; width:100%; } #strategy .sec01 ul li p.point02 { position:absolute; top:45%; width:100%; } #strategy .sec01 ul li p.point03 { position:absolute; top:40%; width:100%; } #strategy .sec01 ul li p.point04 { position:absolute; top:35%; width:100%; } #strategy .sec02 h2 .inner { position:relative; margin:0 0 0 -80px; } #strategy .sec02 h2 .num { font-size:80px; color:#bdce00; font-weight:100; position:absolute; top:2px; left:50%; margin:0 0 0 130px; display:block; } #strategy .sec02 h3 { font-size:24px; color:#bdce00; letter-spacing:0.4em; margin:0 0 50px; text-align:center; } #strategy .sec02 .box { background:#f4f4f4; padding:30px; position:relative; } #strategy .sec02 .box .inner { width:50%; } #strategy .sec02 .box ol li { font-size:18px; letter-spacing:0.2em; font-weight: 500; text-align:left; position:relative; padding:0 0 0 45px; margin:0 0 20px; } #strategy .sec02 .box ol li .num { font-size:36px; color:#bdce00; font-weight: 700; position:absolute; top:0; left:0; } #strategy .sec02 .box ol li .line { border-bottom:1px solid #9baca3; } #strategy .sec02 .box .icon { position:absolute; bottom:-40px; right:50px; } #strategy .sec03 h2 .inner { position:relative; margin:0 0 0 -80px; } #strategy .sec03 h2 .num { font-size:82px; color:#41a02b; font-weight:100; position:absolute; top:2px; left:50%; margin:0 0 0 130px; display:block; } #strategy .sec03 h3 { font-size:24px; color:#41a02b; letter-spacing:0.4em; font-weight:700; margin:0 0 50px; text-align:center; } #strategy .sec03 h3 span { font-size:28px; } /**/ #strategy .graph { text-align: center; position: relative; margin-top: 100px; opacity: 0 } #strategy .graph .tit { position: absolute; right: 80%; top: 50%; margin-top: -10px; font-size: 20px; font-weight: bold; text-align: right } #strategy .graph .tit span { font-size: 14px; font-weight: 400 } #strategy .graph .res { position: absolute; left: 80%; top: 50%; margin-top: -10px; font-size: 20px; font-weight: bold; text-align: right } #strategy .graph .res span { font-size: 86px; color: #41a02b } #strategy .graph .res span.og { color: #eda93d } #strategy .graph .bars { position: absolute; left: 50%; bottom: 32px; width: 600px; height: 400px; margin-left: -300px; overflow: hidden; } #strategy .graph .bars .bar1 { position: absolute; left: 19%; bottom: -206px } #strategy .graph .bars .bar2 { position: absolute; left: 43%; bottom: -276px } #strategy .graph .bars .bar3 { position: absolute; left: 67%; bottom: -350px } #strategy .graph .bars .arw { position: absolute; right: 40%; top: 20px; opacity: 0 } #strategy .graph#graph02 .bars .arw { right: 50%; } #strategy .graph .nums { position: absolute; left: 50%; bottom: 45px; width: 435px; margin-left: -230px; font-size: 0; display: none } #strategy .graph .nums li { display: inline-block; font-size: 14px; width: 33.33%; } .download { background:#f4f4f4; padding:40px 0 60px; margin: 0 0 120px } .download p { font-size:18px; color:#3e5348; letter-spacing:0.4em; font-weight:500; } .download .btn a { font-size:18px; color:#fff; text-decoration:none; letter-spacing:0.4em; background:#008842; padding:25px 0; margin:30px auto 0; width:680px; display:block; position:relative; } .download .btn .ar { position:absolute; top:50%; right:30px; margin:-12px 0 0; } /*株式状況*/ #stock-information {} #stock-information .tbl01 {} #stock-information .tbl01 th { background:#eff3ca; padding:20px 0 20px 30px; width:40%; } #stock-information .tbl01 td { padding:20px 0 20px 80px; } #stock-information .tbl02 { border-top:none; } #stock-information .tbl02 th { padding: 20px 0 20px 30px; width:50%; } #stock-information .tbl02 td { width:25%; padding:20px 0; text-align:center; } #stock-information .tbl02 .item td { background:#eff3ca; font-size:12px !important; padding:10px 0 !important; border-width: 0; } #stock-information .graph { position:relative; } #stock-information .graph .img_graph { position:relative; z-index:100; } #stock-information .graph table {position:absolute; top:0; left:0; z-index:10; } #stock-information .graph th {border-bottom:1px solid #c7c7c7; padding:12px 0 12px 650px; font-size:16px; font-weight:500; } #stock-information .graph th img { margin:0 30px 0 0; border-radius:40px; box-shadow:0px 0px 4px 3px #eee;} #stock-information .graph td {border-bottom:1px solid #c7c7c7; font-size:16px; padding:12px 80px 12px 0; } #stock-information .date { font-size:12px; text-align:right; margin:0 0 10px; } #stock-information .notes { text-indent:-39px; margin:0 0 0 40px; } /*株主優待*/ #benefit {} #benefit h3 span { font-size:12px; text-decoration:underline; } #benefit h4 { color:#008842; font-weight: 500; margin:0 0 10px; } #benefit h5 { border-bottom:1px solid #000; font-weight:500; margin:0 0 10px; display:inline-block; } #benefit .list { margin:0 0 10px 20px; list-style-type: square; list-style-position:outside; } #benefit .tbl01 { margin:20px 0 0; } #benefit .tbl01 th { background:#eff3ca; padding:20px 0 20px 30px; width:50%; } #benefit .tbl01 td { padding:20px 0 20px 80px; } #benefit .tbl02 { margin:20px 0 0; } #benefit .tbl02 th { background:#eff3ca; padding: 10px 0 10px 20px; width:50%; } #benefit .tbl02 td { padding: 10px 0; text-align:center; } #benefit .column-two { padding: 20px 0 40px !important; } /*財務ハイライト*/ #highlight {} #highlight .column-two { padding:0 0 50px!important; } #highlight .box { background:#f4f4f4; padding: 30px; } #highlight .box img { border: solid 20px #fff } #highlight .tbl01 { float:left; } #highlight .tbl01 th { background:#eff3ca; padding: 15px 20px; line-height:1.6em; height:85px; } #highlight .tbl01 th span { font-size: 13px; color:#3e5348; font-weight:400; } #highlight .tbl01 td { padding: 15px 20px; text-align: center; height:85px;} #highlight .tbl01 .item th { background:#eff3ca; font-size:12px !important; padding:10px 0 !important; text-align: center; border-width:0; height:46px; } #highlight .xj_chart_table { width: 100% } #highlight .xj_chart_table th { background:#eff3ca; padding: 15px 20px; line-height:1.6em; border-width: 0 0 1px!important; } #highlight .xj_chart_table th.xj_chart_header, #highlight .xj_chart_table th.xj_chart_header_first { background:#eff3ca; font-size:12px !important; padding:10px 0 !important; text-align: center; border-width:0 0 1px!important; height:46px; } #highlight .xj_chart_table th span { font-size: 13px; color:#3e5348; font-weight:400; } #highlight .xj_chart_table td { padding: 15px 20px; text-align: center; height:85px; border-width: 0 0 1px!important; } .xj_chart_title { width: 20% } /*IRカレンダー*/ #calendar ul { margin: 100px 0 0; border-top: solid 1px #d4d4d4 } #calendar ul li { padding: 20px 15px 20px 280px; position: relative; text-align: left; border-bottom: solid 1px #d4d4d4 } #calendar ul li .date { position: absolute; left: 35px; top: 20px; font-size: 16px; color: #7c7c7c; font-weight: 700 } /*//BUSINESS//*/ #business-main { position: relative } #business-main h2 { position: absolute; left: 80px; bottom: 40px; z-index: 10 } #business-main .bg { position: relative; z-index: 0 } #business-main-b { padding: 60px 80px 0; background: #f7f7f7; text-align: left } /*BUSINESSインデックス*/ #business {} #business-idx .clm1 { text-align:left; margin:70px 0 45px; } #business-idx .clm1 li h3 { font-size:40px; font-weight:500; letter-spacing:0.4em; padding:15px 0 0 210px; } #business-idx .clm1 li h3 span { font-size:24px; letter-spacing:0.3em; } #business-idx .clm1 li.cate01 h3 { color:#009e3b; } #business-idx .clm1 li.cate02 h3 { color:#9dc815; } #business-idx .clm1 li.cate03 h3 { color:#935100; } #business-idx .clm1 li.cate04 h3 { color:#00b2c1; } #business-idx .clm1 li p { padding:0 480px 40px 210px; } #business-idx .clm1 li .inner { padding:25px 0 0 0; margin:0 0 25px; position:relative; box-shadow: 2px 2px 25px #e3e3e3; cursor: pointer } #business-idx .clm1 li .ico { position:absolute; top:15px; left:-15px; } #business-idx .clm1 li .cate { padding:0 0 0 210px; } #business-idx .clm1 li .ar { text-align:right; height:28px; padding:0 20px 0 0; } #business-idx .clm1 li .ar img { vertical-align:top; } #business-idx .clm1 li.cate01 .ar { background:#009e3b; } #business-idx .clm1 li.cate02 .ar { background:#9dc815; } #business-idx .clm1 li.cate03 .ar { background:#935100; } #business-idx .clm1 li.cate04 .ar { background:#00b2c1; } #business-idx .clm1 li.cate01 .ph { position:absolute; bottom:28px; right:-40px; } #business-idx .clm1 li.cate02 .ph { position:absolute; bottom:90px; right:-20px; } #business-idx .clm1 li.cate03 .ph { position:absolute; bottom:80px; right:20px; } #business-idx .clm1 li.cate04 .ph { position:absolute; bottom:60px; right:30px; } #business-idx .clm2 { text-align:left; margin:0 0 0 -12px; } #business-idx .clm2 li h3 { font-size:28px; font-weight:500; letter-spacing:0.1em; } #business-idx .clm2 li.cate05 h3 { color:#887546; padding: 10px 40px 0; } #business-idx .clm2 li.cate06 h3 { color:#6fba2c; padding: 10px 40px 0; } #business-idx .clm2 li.cate07 h3 { color:#6e7e76; padding: 10px 0 0 275px; } #business-idx .clm2 li.cate08 h3 { color:#ee7826; padding: 10px 40px 0; } #business-idx .clm2 li p { padding:10px 40px 30px; } #business-idx .clm2 li { width:33.333%; float:left; } #business-idx .clm2 li.cate07 { width: 100%; } #business-idx .clm2 li .inner { padding: 30px 0 20px; margin:0 0 0 12px; position:relative; box-shadow: 2px 2px 25px #e3e3e3; cursor: pointer } #business-idx .clm2 li.cate07 .inner { min-height: 178px; overflow: hidden } #business-idx .clm2 li.cate05 .ico { padding:0 0 5px 40px; } #business-idx .clm2 li.cate06 .ico { padding:0 0 5px 40px; } #business-idx .clm2 li.cate07 .ico { position:absolute; top:0; left:0; } #business-idx .clm2 li.cate08 .ico { padding:0 0 5px 40px; } #business-idx .clm2 li.cate08 .ill { position: relative } #business-idx .clm2 li.cate08 .ill .ico_new { position: absolute; left: 10px; top: -20px; } #business-idx .clm2 li.cate05 .cate { padding:0 0 0 40px; } #business-idx .clm2 li.cate06 .cate { padding:0 0 0 40px; } #business-idx .clm2 li.cate07 .cate { padding: 0 0 0 275px; } #business-idx .clm2 li.cate08 .cate { padding:0 0 0 40px; } #business-idx .clm2 li .ar { text-align:right; height:28px; padding:0 20px 0 0; } #business-idx .clm2 li.cate05 .ar, #business-idx .clm2 li.cate06 .ar, #business-idx .clm2 li.cate07 .ar, #business-idx .clm2 li.cate08 .ar { position: absolute; width: 100%; left: 0; bottom: 0 } #business-idx .clm2 li .ar img { vertical-align:top; } #business-idx .clm2 li.cate05 .ar { background:#887546; } #business-idx .clm2 li.cate06 .ar { background:#6fba2c; } #business-idx .clm2 li.cate07 .ar { background:#6e7e76; } #business-idx .clm2 li.cate08 .ar { background:#ee7826; } #business-idx ul li a { color:#fff; text-decoration:none; letter-spacing:0.4em; padding:0 30px 0 0; } .facility { background: #f4f4f4; padding: 60px 80px; margin: 0 0 120px } .facility .facility-inner { min-width: 1024px; max-width: 1240px; margin: 0 auto; padding: 0 40px } .facility .facility-inner h3 { font-size: 20px; color: #9dc815; line-height: 1; margin-bottom: 30px } .facility .facility-inner ul { margin: 0 -5px } .facility .facility-inner li { float: left; width: 50% } .facility .facility-inner li .faci { padding: 5px } .facility .facility-inner li .faci a { display: block; background: #fff; text-align: left; font-size: 16px; box-shadow: 2px 2px 25px #e3e3e3; position: relative } .facility .facility-inner li .faci a .thumb { float: left; overflow: hidden; } .facility .facility-inner li .faci a span { display: inline-block; padding: 40px 10px 0 30px; } .facility .facility-inner li .faci a .arw { position: absolute; right: 0; bottom: 0 } /*施設紹介*/ #facility-info {} #facility-info h3 { position:relative; padding: 0 0 0 100px; margin: 0 0 20px; font-size: 24px; line-height: 80px; min-height: 80px } #facility-info .ico { position:absolute; top:0; left:0; } #facility-info h4 { color:#008842; font-size:18px; font-weight:500; border-bottom:2px solid #008842; display:inline-block; margin:0 0 15px 0; } #facility-info .box { margin: 0 0 50px; padding-left: 450px; min-height: 270px; position: relative; } #facility-info .box img { position: absolute; left: 0; top: 0; } #facility-info .box p { margin:0 0 20px; } #facility-info dl { word-break:break-all; } #facility-info dt { font-weight:500; line-height:1.8em; padding:2px 0; float:left; display: table-cell; } #facility-info dd { line-height:1.8em; padding:2px 0; display:table-cell;} /*//INQUIRY//*/ #inquiry input { border: solid 1px #9aaba2 } #inquiry dt { padding: 20px 0 10px } #inquiry dd { padding: 0 0 20px } /*//PRIVACY POLICY//*/ #privacy ol { margin: 1em 0 1em 3em } #privacy ol li { list-style: decimal; list-style-position: outside; } #privacy .tbl { margin: 1em 0; } #privacy .tbl th { background:#f4f4f4; border:solid #c7c7c7; border-width: 1px 0; padding:10px 20px; width:50%; } #privacy .tbl td { border:solid #c7c7c7; border-width: 1px 0; padding: 10px 20px; } /*////XjStorageLoader////*/ #xj { text-align: center } #xj .btn_more { width: 33.33%; margin: 40px auto 0 } #xj .btn_more a { display: block; padding: 20px 0; font-size: 16px; background: #bdce00 } #xj-select-year { text-align: left } #xj-select-year li { display: inline-block; padding: 0 0 20px; } #xj-select-year li a { display: block; padding: 6px 20px; border-right: solid 1px #d4d4d4; } #xj-select-year li.active a { font-weight: bold } #xj-select-category { margin: 60px 0 0; text-align: center } #xj-select-category li { float: left; width: 33.33%; background: #f7f7f7; border-bottom: solid 1px #d4d4d4; position: relative } #xj-select-category li.on a:link { color: #fff; text-decoration: none; } #xj-select-category li.on a:visited { color: #fff; text-decoration: none } #xj-select-category li.on a:hover { color: #fff; text-decoration: none; } #xj-select-category li a { border-right: solid 1px #d4d4d4; display: block; padding: 10px 0; position: relative; z-index: 10 } #xj-select-category li span { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: #c1cd30; z-index: 0 } #xj-select-category li.active a:link { color: #fff; text-decoration: none; } #xj-select-category li.active a:visited { color: #fff; text-decoration: none } #xj-select-category li.active a:hover { color: #fff; text-decoration: none; } .xj-list { margin: 0; border-top: solid 1px #d4d4d4 } .xj-list li { padding: 20px 15px 20px 320px; position: relative; text-align: left; border-bottom: solid 1px #d4d4d4 } .xj-list li .cate { position: absolute; left: 15px; top: 20px; display: inline-block; width: 110px; font-size: 12px; line-height: 2em; text-align: center; background: #e5e5e5 } .xj-list li.nr .cate { top: 16px; line-height: 1.5em; } .xj-list li.nr .cate .sub { display: block; line-height: 1.5em; color: #fff; border-top: solid 1px #d4d4d4 } .xj-list li .date { position: absolute; left: 170px; top: 20px; font-size: 16px; color: #7c7c7c; font-weight: 700 } .xj-list li .size { font-size: 12px } .xj-list-b { margin: 0; border-top: solid 1px #d4d4d4 } .xj-list-b li { padding: 20px 15px 20px 180px; position: relative; text-align: left; border-bottom: solid 1px #d4d4d4 } .xj-list-b li .date { position: absolute; left: 15px; top: 20px; font-size: 16px; color: #7c7c7c; font-weight: 700 } .xj-list-b li .size { font-size: 12px } #xj .sub-category { padding: 2em 15px; } #xj .sub-category ul { margin: 0 -2px } #xj .sub-category li { float: left; width: 16.66% } #xj .sub-category li a { position: relative; display: block; margin: 0 2px; padding: 0.5em 0; background: #f7f7f7; box-shadow: 2px 2px 0 #dee48d; } #xj .sub-category li a i { position: relative; z-index: 10 } #xj .sub-category li a span { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: #dee48d; z-index: 0 } #xj .sub-category li:nth-child(2) a { box-shadow: 2px 2px 0 #bdddc4; } #xj .sub-category li:nth-child(3) a { box-shadow: 2px 2px 0 #f6d7e3; } #xj .sub-category li:nth-child(4) a { box-shadow: 2px 2px 0 #f7d7b4; } #xj .sub-category li:nth-child(5) a { box-shadow: 2px 2px 0 #e3d6c8; } #xj .sub-category li:nth-child(6) a { box-shadow: 2px 2px 0 #cae7eb; } #xj .sub-category li:nth-child(2) a span { background: #bdddc4; } #xj .sub-category li:nth-child(3) a span { background: #f6d7e3; } #xj .sub-category li:nth-child(4) a span { background: #f7d7b4; } #xj .sub-category li:nth-child(5) a span { background: #e3d6c8; } #xj .sub-category li:nth-child(6) a span { background: #cae7eb; } .icon01, span.legal-disclosure { background: #bcbcea !important; display: block } .icon02, span.results { background: #a2cbf8 !important; display: block } .icon03, span.timely-disclosure { background: #f5da6c !important; display: block } .icon04, span.ir-materials { background: #dced6a !important; display: block } .icon05, span.notice { background: #f0c2c2 !important; display: block } span.amusement-park { background: #51a661 } span.hana-biyori { background: #dc5e90 } span.ball-park { background: #efb069 } span.public-sports { background: #a17649 } span.others { background: #72c0cb } .lib-year { margin: 40px 0 } .btn-list { text-align: right; background: #f4f4f4 } .btn-list a { display: block; padding:8px 15px; line-height: 1; } .btn-list a:link { color: #3e5348; text-decoration: none; } .btn-list a:visited { color: #3e5348; text-decoration: none } .btn-list a:hover { color: #c7c7c7; text-decoration: underline; } /*////70th Anniversary////*/ #anniversary { margin-top: 76px } #anniversary .logo { padding: 60px 0 } #anniversary h3 { font-size: 22px } #anniversary p.msg { font-size: 17px; font-weight:500; line-height:2.4em; text-align: center } #anniversary .btn_more { width: 50%; margin: 30px auto 0; text-align: center } #anniversary .btn_more a { display: block; padding: 20px 0; font-size: 16px; line-height: 1.6em; background: #008842 } #anniversary .omoi { background: #f4f4f4; padding: 30px 40px; margin: 80px 0 0 } #anniversary .omoi h3 { text-align: center; font-size: 18px; margin-bottom: 30px } #anniversary .omoi .fltL { margin-right: 40px } /*//SUSTAINABILITY//*/ #sustainability { padding:0 0 100px; } #sustainability .intro { padding:0 5.7%; padding:60px 0 45px; background:#f9f9f9; } #sustainability .intro .inner { min-width: 1024px; max-width: 1240px; margin:0 auto; } #sustainability .intro h3 { color:#009848; font-size:32px; font-weight:500; letter-spacing:0.2em; margin:0 0 20px; } #sustainability .intro p { font-size:16px; line-height:2.6; } #sustainability .esg { background:#bdce00; text-align:left; padding:40px 5.7% 60px; margin:0 0 60px; } #sustainability .esg-inner { min-width: 1024px; max-width: 1240px; margin:0 auto; } #sustainability .esg .clm { float:left; } #sustainability .esg li.clm:nth-child(1) { width:32%; } #sustainability .esg li.clm:nth-child(2) { width:36%; } #sustainability .esg li.clm:nth-child(3) { width:32%; } #sustainability .esg .clm h4 { margin:0 0 25px 70px; } #sustainability .esg .clm ul { margin:0 0 0 70px; } #sustainability .esg .clm ul li { margin:0 0 15px; } #sustainability .esg .clm ul li:last-child { margin-bottom:0; } #sustainability .esg .clm ul li a { color:#3e5348; font-size:15px; font-weight:500; letter-spacing:0.2em; text-decoration:none; } #sustainability .esg .clm ul li a span { border-bottom:4px solid #41a02b; } #sustainability .sdgs { text-align:left; padding:0 5.7%; margin:0 auto 60px; } #sustainability .sdgs .sdgs-inner { position: relative; background:#f9f9f9; padding:40px 60px 30px; min-width: 1024px; max-width: 1240px; margin:0 auto; } #sustainability .sdgs h2 { font-size: 32px; letter-spacing: 0.2em; font-weight: bold; color: #3b8549; margin-bottom: 1em; text-align: center } #sustainability .sdgs h2 br { display: none } #sustainability .sdgs .txt { float:left; width:38%; } #sustainability .sdgs .txt h5 { font-size:15px; font-weight:500; letter-spacing:0.2em; margin:0 0 15px; padding:0 20px 0 0; } #sustainability .sdgs .txt p { padding:0 20px 0 0; } #sustainability .sdgs .figure { float:right; width:62%; } #sustainability .sdgs .figure .sdgs-logo { margin:0 0 20px; } #sustainability .sdgs .figure ul { margin:0 0 0 -10px; } #sustainability .sdgs .figure ul li { float:left; width:11.1%; margin:0 0 10px; } #sustainability .sdgs .figure ul li .inner { margin:0 0 0 10px; } #sustainability .sdgs .sdgs-inner .chara01 { position: absolute; left: 8%; top: -48px } #sustainability .sdgs .sdgs-inner .chara02 { position: absolute; right: 8%; top: -48px } #sustainability .block { text-align:left; padding:0 5.7%; margin:0 auto 60px; } #sustainability .block .block-inner { min-width: 1024px; max-width: 1240px; margin:0 auto; } #sustainability .block .flame { padding:30px 60px 60px; box-shadow: 2px 2px 25px #e3e3e3; position:relative; } #sustainability .block .cate-ico { font-size:0; margin:0 0 30px -10px; } #sustainability .block .cate-ico li { background:#f4f4f4; border-radius:40px; display:inline-block; margin:0 0 0 10px; } #sustainability .block .cate-ico .cur { background:#bdce00; } #sustainability .block .cate { position:absolute; top:50px; right:60px; } #sustainability .block h4 { color:#41a02b; font-size:28px; font-weight:500; line-height:1; letter-spacing:0.4em; margin:0 0 30px; } #sustainability .block .read { font-size:14px; margin:0 0 30px; } #sustainability .block .detail .case { margin:0 0 40px -10px; } #sustainability .block .detail .case li { float:left; } #sustainability .block .detail .case span { color:#fff; font-size:15px; font-weight:500; line-height:1; letter-spacing:0.2em; background:#bdce00; display:inline-block; border-radius:40px; padding:10px 20px; margin:0 0 0 10px; } #sustainability .block .detail li.box { border:2px solid #bdce00; padding:40px 35px 30px; margin:0 0 40px; position:relative; } #sustainability .block .detail li:last-child.box { margin-bottom:0; } #sustainability .block .detail li.box .parts { position:absolute; top:-12px; right:40px; } #sustainability .block .detail li.box h5 { color:#3e5348; font-size:24px; font-weight:500; line-height:1; letter-spacing:0.4em; margin:0 0 30px; } #sustainability .block .detail li.box p { width:47%; } #sustainability .block .detail li.box h6 { color:#3e5348; font-size:18px; font-weight:500; border-bottom:3px solid #3e5348; display:inline-block; margin:50px 0 0; } #sustainability .block .detail li.box h6 span { color:#41a02b; font-size:20px; } #sustainability .block .detail li.box .sdgs-ico { margin:20px 0 0 -10px; } #sustainability .block .detail li.box .sdgs-ico li { float:left; width:110px; } #sustainability .block .detail li.box .sdgs-ico li .sdgs-inner { margin:0 0 0 10px; } #sustainability .block .detail li.box .pic { width:480px; margin:0 0 0 -10px; position:absolute; top:160px; right:40px; } #sustainability .block .detail li.box .pic li { float:left; width:50%; margin:0 0 30px; } #sustainability .block .detail li.box .pic li .pic-inner { margin:0 0 0 10px; } #sustainability .block .detail li.box .pic .cap { font-size:11px; line-height:1.6; margin:8px 0 0; display:block; } #environment01 .first { padding:40px 35px 100px 35px !important; } #environment01 { padding-top: 100px; margin-top:-100px; } #social01, #social02, #social01, #social03 { margin:0 0 120px; padding-top: 100px; margin-top:-100px; } #social04 { padding-top: 100px; margin-top:-100px; } #governance01 { padding-top: 100px; margin-top:-100px; } #sustainability .block #governance01 .detail li.box .pic { top: inherit; bottom: 30px !important; } #governance01 .box p.wid { width: 100% !important } /*//TOPICS//*/ #topics {} #topics .content { min-width: 800px; max-width: 1024px; width: 66.66%; margin: 0 auto; padding: 0 0 80px; text-align: left } #topics .content .post-title { font-size: 24px; color: #009848; letter-spacing: 0.24em; font-weight: 700; padding: 40px 0 0 } #topics .content .post-meta { padding: 2em 0 } #topics .content .post-date { font-size: 16px; color: #7c7c7c; font-weight: 700 } #topics .content .post p, #topics .content .post img { margin: 2em 0 0 } #topics .content .post p.post-categories { font-size:16px; color:#008842; font-weight:500; letter-spacing:0.2em; padding-top: 1em; } #topics .btn { width: 100%; margin: 60px auto 0 } #topics .btn a { display: block; padding: 24px 0; font-size: 16px; color: #fff; background: #008842; text-align: center } #news .date { font-size: 16px; color: #7c7c7c; font-weight: 700; margin-bottom: 2em } #news .entry-content {} #news .entry-content p, #news .entry-content figure { margin-bottom: 2em } .pagination { position: relative; margin-top: 3em } .pagination h2 { display: none } .nav-links { position: relative; font-size: 18px } .nav-links a { padding: 0.5em } .prev { position: absolute; left: 0; top: -0.5em } .next { position: absolute; right: 0; top: -0.5em } .nav-prev-text, .nav-next-text { display: none } /*//BRAND//*/ #brand-wrapper { position: relative; } #brand .wd { max-width: 1240px; margin: 0 auto; position: relative; } #brand .inner { padding: 0 10%; } #brand a:hover { text-decoration: none; } /* youtube */ .mov { width: 100%; height: 0; position: relative; padding-top: 56.25%; overflow: hidden; } .mov iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } /* リストの高さ揃える */ .list-flex { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } #brand p, #brand h2, #brand h3, #brand h4, #brand h5　{ color: #231815; } #brand .breadcrumbs { color: #000; font-size: 10px; width: 100%; text-align: left; padding: 8px 4.4% 5px; margin-top: 76px; } #brand .breadcrumbs a { color: #000; font-weight: 200; } #brand .breadcrumbs a:hover { color: #009D3B; } #brand-main h2 { text-align: left; position: relative; } #brand-main h2 .main01 { width: 50%; float: left; } #brand-main h2 .main02 { width: calc(50% - 0.8vw); margin: 0 0 0.73vw 0.8vw; } #brand-main h2 .main03 { width: calc(50% - 0.8vw); margin: 0 0 0 0.8vw; } #brand-main h2 img { transition: all 0.2s; } #brand-main h2 a:hover img { opacity: 0.5; } #brand .btn-idx { padding: 100px 0 0; } #brand .btn-idx a { color: #fff; font-size: 18px; line-height: 1; border-radius: 60px; display: block; width: 340px; padding: 22px 0 20px; margin: 0 auto; background-image: linear-gradient(90deg, rgba(107, 185, 45, 1), rgba(0, 162, 63, 1)); transition: all 0.2s; } #brand .btn-idx a:hover { transform: scale(1.04); } #brand .top h3 { font-size: 42px; font-weight: 600; line-height: 1em; letter-spacing: 0.1em; margin: 0 0 80px; } #brand .top h3 span { font-size: 20px; letter-spacing: 0.08em; margin: 0 0 30px; display: block; } #brand .top .stories { margin: 64px 0 0; padding: 280px 0 200px; background: url("../../brand/img/top_kazari01.png"), url("../../brand/img/top_kazari02.png"), url("../../brand/img/bg01.jpg"); background-repeat: no-repeat, no-repeat, no-repeat; background-size: 3000px, 3000px, cover; background-position: top center, bottom center, top 102px center; } #brand .top .stories .list { position: relative; } #brand .top .stories .list .arw-l { position: absolute; top: 14vw; left: -5.4vw; } #brand .top .stories .list .arw-r { position: absolute; top: 14vw; right: -5.4vw; transform: rotateY(180deg); } #brand .top .stories .list ul { /*margin: 0 0 0 -4%;*/width: 100% } #brand .top .stories .list ul li { /*width: 29.333%; float: left;*/ text-align: left; padding: 0 40px 0 0; transition: all 0.2s; } #brand .top .stories .list ul li:hover { transform: scale(1.02); } #brand .top .stories .list ul li .thumb { position: relative; } #brand .top .stories .list ul li .thumb img { position: relative; z-index: 2; } #brand .top .stories .list ul li .thumb .bg { width: 100%; height: 100%; position: absolute; bottom: -10px; right: -10px; z-index: 1; background-image: linear-gradient(90deg, rgba(107, 185, 45, 1), rgba(0, 162, 63, 1)); } #brand .top .stories .list ul li .num { color: #6FBA2C; font-size: 13px; font-weight: 600; margin: 25px 0 10px; } #brand .top .stories .list ul li .num span { font-size: 18px; } #brand .top .stories .list ul li h4 { font-size: 17px; font-weight: 600; margin: 0 0 10px; } #brand .top .creators { padding: 200px 0 300px; margin: 0 0 80px; background: url("../../brand/img/top_kazari03.png"), url("../../brand/img/bg02.png"); background-repeat: no-repeat, repeat; background-size: 3000px, 64px; background-position: bottom center, top left; } #brand .top .creators h4 { font-size: 30px; font-weight: 600; margin: 0 0 30px; } #brand .top .creators .frame { background: #fff; max-width: 1020px; margin: 0 auto 150px; text-align: left; } #brand .top .creators .frame .pic { float: left; width: 43%; position: relative; } #brand .top .creators .frame .pic .num { color: #fff; font-size: 5.4vw; font-weight: 500; line-height: 1em; letter-spacing: 0; position: absolute; bottom: -1vw; right: -0.2vw; } #brand .top .creators .frame .txt { float: left; width: 57%; padding: 3% 3% 3% 5%; } #brand .top .creators .frame .txt h4 { font-size: 20px; margin: 0 0 10px; } #brand .top .creators .frame .txt .name { font-size: 16px; margin: 0 0 10px; } #brand .top .creators .frame .txt .btn-more { margin: 20px 0 0; } #brand .top .creators .frame .txt .btn-more a { color: #fff; font-size: 16px; font-weight: 500; text-align: center; line-height: 1em; width: 175px; padding: 17px 0 15px; display: block; background-image: linear-gradient(90deg, rgba(113, 199, 212, 1), rgba(0, 178, 188, 1)); position: relative; transition: all 0.2s; } #brand .top .creators .frame .txt .btn-more a:hover { transform: scale(1.04); } #brand .top .creators .frame .txt .btn-more a .arw { position: absolute; top: calc(50% - 7px); right: 15px; } #brand .top .creators .list { position: relative; } #brand .top .creators .list .arw-l { position: absolute; top: 50%; left: -5.4vw; } #brand .top .creators .list .arw-r { position: absolute; top: 50%; right: -5.4vw; transform: rotateY(180deg); } #brand .top .creators .list ul { /*margin: 0 0 0 -0.8%;*/width: 100% } #brand .top .creators .list ul li { /*width: 19.2%; float: left;*/ text-align: left; padding: 0 10px 0 0; } #brand .top .creators .list ul li a { display: block; padding-bottom: 10px; height: 100%; background: #fff; transition: all 0.2s; } #brand .top .creators .list ul li a:hover { transform: scale(1.02); } #brand .top .creators .list ul li .thumb { position: relative; } #brand .top .creators .list ul li .num { color: #fff; font-size: 3vw; font-weight: 500; line-height: 1em; letter-spacing: 0; position: absolute; bottom: -17px; right: -22px; } #brand .top .creators .list ul li h5 { color: #231815; font-size: 16px; font-weight: 600; padding: 15px 20px 5px; } #brand .creators .list ul li p { font-size: 13px; padding: 0 20px 10px; } #brand .slogan .breadcrumbs { border-top: 2px solid #009D3B; } #brand .slogan h2 { font-size: 46px; font-weight: 600; letter-spacing: 0.1em; } #brand .slogan h2 span { font-size: 28px; display: block; line-height: 1; letter-spacing: 0.08em; margin: 0 0 15px; } #brand .slogan h2 div { background: #231815; width: 100px; height: 4px; display: block; margin: 20px auto 0; } #brand .slogan .corporate-slogan h2 { padding: 70px 0 20px; } #brand .slogan .corporate-slogan .corporate-slogan-inner { padding: 0 0 400px; background-image: linear-gradient(rgba(235, 245, 233, 1), rgba(242, 248, 240, 1)); } #brand .slogan .corporate-slogan .corporate-slogan-inner .kazari { background: url("../../brand/img/slogan_kazari01.png"); background-repeat: no-repeat; background-size: 3000px; background-position: top center; padding: 290px 0 0 ; } #brand .slogan .corporate-slogan .corporate-slogan-inner .slogan-txt { max-width: 750px; margin: 0 auto; position: relative; z-index: 2; } #brand .slogan .corporate-slogan .corporate-slogan-inner p { font-size: 24px; font-weight: 500; padding: 80px 0; position: relative; z-index: 2; } #brand .slogan .corporate-slogan .corporate-slogan-inner .mov-box { max-width: 600px; margin: 0 auto; position: relative; z-index: 2; } #brand .slogan .corporate-slogan .parts01 { position: absolute; top: -120px; left: 10px; z-index: 1; } #brand .slogan .corporate-slogan .parts02 { position: absolute; top: -150px; right: 0; z-index: 1; } #brand .slogan .corporate-slogan .parts03 { position: absolute; bottom: 20px; left: 0; z-index: 1; } #brand .slogan .corporate-slogan .parts04 { position: absolute; bottom: 70px; right: 30px; z-index: 1; } #brand .slogan .corporate-slogan .parts05 { position: absolute; bottom: -150px; left: 40px; z-index: 1; } #brand .slogan .corporate-slogan .parts06 { position: absolute; bottom: -140px; right: -30px; z-index: 1; } #brand .slogan .corporate-slogan .parts07 { position: absolute; top: 120px; left: 60px; z-index: 1; } #brand .slogan .corporate-slogan .parts08 { position: absolute; top: 40px; right: 90px; z-index: 1; } #brand .slogan .corporate-slogan .parts09 { position: absolute; top: 290px; right: 40px; z-index: 1; } #brand .slogan .corporate-slogan .parts10 { position: absolute; bottom: 210px; left: 80px; z-index: 1; } #brand .slogan .corporate-slogan .parts11 { position: absolute; bottom: 210px; right: 100px; z-index: 1; } #brand .slogan .corporate-slogan .parts12 { position: absolute; bottom: -140px; left: 380px; z-index: 1; } #brand .slogan .corporate-slogan .parts13 { position: absolute; bottom: -220px; right: 380px; z-index: 1; } #brand .slogan .corporate-slogan .parts01_sp { display: none; } #brand .slogan .corporate-slogan .parts02_sp { display: none; } #brand .slogan .corporate-slogan .parts03_sp { display: none; } #brand .slogan .our-business { background: rgba(242, 248, 240, 1) } #brand .slogan .our-business .mov-box { width: 960px; margin: 0 auto 80px; } #brand .slogan .our-business h2 { padding: 0 0 20px; background-image: linear-gradient(rgba(242, 248, 240, 1), rgba(255, 255, 255, 1)); } #brand .slogan .our-business .our-business-inner { background-image: linear-gradient(rgba(254, 245, 241, 1), rgba(255, 255, 255, 1)); } #brand .slogan .our-business .our-business-inner .kazari { background: url("../../brand/img/slogan_kazari02.png"); background-repeat: no-repeat; background-size: 3000px; background-position: top 0px center; padding: 270px 0 0; } #brand .slogan .our-business-inner ul { text-align: left; padding: 0 0 200px; } #brand .slogan .our-business-inner ul li { margin: 0 0 150px; } #brand .slogan .our-business-inner ul li:last-child { margin: 0; } #brand .slogan .our-business-inner ul li h3 { font-size: 30px; font-weight: 600; margin: 0 0 15px; } #brand .slogan .our-business-inner ul li p { font-size: 18px; } #brand .slogan .our-business-inner ul li .btn-more { margin: 40px 0 0; } #brand .slogan .our-business-inner ul li .btn-more a { color: #fff; text-align: center; line-height: 1; width: 220px; padding: 18px 0 15px; display: block; position: relative; background-image: linear-gradient(90deg, rgba(107, 185, 45, 1), rgba(0, 162, 63, 1)); transition: all 0.2s; } #brand .slogan .our-business-inner ul li .btn-more a:hover { transform: scale(1.04); } #brand .slogan .our-business-inner ul li .btn-more a .arw { position: absolute; top: calc(50% - 7px); right: 15px; } #brand .slogan .our-business-inner ul li:nth-child(odd) .pic { float: right; } #brand .slogan .our-business-inner ul li:nth-child(odd) .txt { float: left; padding: 0 8% 0 0; } #brand .slogan .our-business-inner ul li:nth-child(even) .pic { float: left; } #brand .slogan .our-business-inner ul li:nth-child(even) .txt { float: left; padding: 0 0 0 8%; } #brand .slogan .our-business-inner ul li:nth-child(1) .pic { width: 50%; } #brand .slogan .our-business-inner ul li:nth-child(1) .txt { width: 50%; margin: 10% 0 0; } #brand .slogan .our-business-inner ul li:nth-child(4) .pic { width: 50%; } #brand .slogan .our-business-inner ul li:nth-child(4) .txt { width: 50%; margin: 10% 0 0; } #brand .slogan .our-business-inner ul li:nth-child(2) { padding: 0 10% 0 5%; } #brand .slogan .our-business-inner ul li:nth-child(2) .pic { width: 40%; } #brand .slogan .our-business-inner ul li:nth-child(2) .txt { width: 60%; } #brand .slogan .our-business-inner ul li:nth-child(3) { padding: 0 5% 0 10%; } #brand .slogan .our-business-inner ul li:nth-child(3) .pic { width: 40%; } #brand .slogan .our-business-inner ul li:nth-child(3) .txt { width: 60%; } /* 動画無しの場合：動画設定の際に要削除 */ #brand .slogan .corporate-slogan .parts05 { position: absolute; bottom: -270px; left: 250px; z-index: 1; } #brand .slogan .corporate-slogan .parts06 { position: absolute; bottom: -290px; right: 220px; z-index: 1; } #brand .slogan .corporate-slogan .parts10 { position: absolute; bottom: -150px; left: 60px; z-index: 1; } #brand .slogan .corporate-slogan .parts11 { position: absolute; bottom: -110px; right: 600px; z-index: 1; } #brand .slogan .corporate-slogan .parts12 { position: absolute; bottom: inherit; left: inherit; top: -120px; right: 480px; z-index: 1; } #brand .slogan .corporate-slogan .parts13 { position: absolute; bottom: -260px; right: 0; z-index: 1; } #brand .stories .breadcrumbs { border-top: 2px solid #009D3B; } #brand .stories .ttl { background: url("../../brand/img/top_kazari01.png"); background-repeat: no-repeat; background-size: 3000px; background-position: bottom center; } #brand .stories .ttl h2 { font-size: 42px; font-weight: 500; letter-spacing: 0.1em; padding: 80px 4% 130px; } #brand .stories .ttl h2 span { font-size: 20px; line-height: 1; letter-spacing: 0.08em; margin: 0 0 20px; display: block; } #brand .stories .ttl-bg { background: url("../../brand/img/bg03.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top -12px left; } #brand .stories .idx-list { padding: 100px 0 200px; } #brand .stories .idx-list ul { margin: 0 0 0 -4%; } #brand .stories .idx-list ul li { width: 29.333%; float: left; text-align: left; margin: 0 0 100px 4%; transition: all 0.2s; } #brand .stories .idx-list ul li:hover { transform: scale(1.02); } #brand .stories .idx-list ul li .thumb { position: relative; } #brand .stories .idx-list ul li .thumb img { position: relative; z-index: 2; } #brand .stories .idx-list ul li .thumb .bg { width: 100%; height: 100%; position: absolute; bottom: -10px; right: -10px; z-index: 1; background-image: linear-gradient(90deg, rgba(107, 185, 45, 1), rgba(0, 162, 63, 1)); } #brand .stories .idx-list ul li .txt { position: relative; } #brand .stories .idx-list ul li .txt .num { color: #6FBA2C; font-size: 13px; font-weight: 600; margin: 25px 0 10px; } #brand .stories .idx-list ul li .txt .num span { font-size: 18px; } #brand .stories .idx-list ul li .txt h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; } #brand .stories .idx-list ul li .txt .date { color: #6FBA2C; font-size: 13px; font-weight: 500; position: absolute; top: 0; right: 0; } #brand .stories .detail { padding: 80px 0 150px; } #brand .stories .detail .date { color: #009D3B; font-size: 26px; font-weight: 600; text-align: center; margin: 0 0 70px; } #brand .stories .detail .read { font-size: 20px; font-weight: 500; text-align: center; margin: 70px 0 80px; } #brand .stories .detail h3 { font-size: 30px; font-weight: 600; margin: 0 0 30px; } #brand .stories .detail p { font-size: 18px; text-align: left; margin: 30px 0 0; } #brand .stories .detail .article-wrap { margin: 80px 0 0; } #brand .stories .detail .article-wrap article { margin: 0 0 150px; } #brand .stories .detail .article-wrap article:last-child { margin: 0; } #brand .stories .detail .article-wrap article .pic { margin: 150px auto 0; max-width: 700px; } #brand .stories .detail .wd { max-width: 980px; margin: 0 auto; } #brand .stories .detail .mov-wrap { max-width: 700px; margin: 0 auto 80px; } #brand .stories .detail .mov-wrap .mov { width: 100%; aspect-ratio: 16 / 9; } #brand .stories .detail .mov-wrap .mov iframe { width: 100%; height: 100%; } #brand .creators .ttl-bg { padding: 0 0 50px; background: url("../../brand/img/bg02.png") repeat top left; background-size: 64px; } #brand .creators .ttl-bg h2 { color: #009D3B; font-size: 45px; line-height: 1em; font-weight: 600; margin: 80px 0 35px; } #brand .creators .ttl-bg ul { font-size: 0; } #brand .creators .ttl-bg ul li { display: inline-block; padding: 0 1.1vw; } #brand .creators .ttl-bg ul li img { max-width: 8vw; } #brand .creators .idx-list { padding: 100px 0 200px; } #brand .creators .idx-list ul { margin: 0 0 0 -4%; } #brand .creators .idx-list ul li { float: left; width: 21%; text-align: left; margin: 0 0 100px 4%; transition: all 0.2s; } #brand .creators .idx-list ul li:hover { transform: scale(1.02); } #brand .creators .idx-list ul li .txt { position: relative; } #brand .creators .idx-list ul li .num { font-size: 35px; font-weight: 500; line-height: 1em; letter-spacing: 0; margin: 15px 0 0; position: relative; } #brand .creators .idx-list ul li .ico { position: absolute; top: -5px; right: 0; } #brand .creators .idx-list ul li h3 { font-size: 16px; font-weight: 600; margin: 10px 0 5px; } #brand .creators .idx-list ul li p { font-size: 13px; } #brand .creators .profile { text-align: left; margin: 90px 0 110px; } #brand .creators .profile .cfix { max-width: 880px; margin: 0 auto; } #brand .creators .profile .pic { float: right; width: 52%; } #brand .creators .profile .txt { float: right; width: 48%; padding: 0 9% 0 0; } #brand .creators .profile .date { font-size: 14px; text-align: center; line-height: 1em; padding: 15px 0 12px; border: 1px solid #000; } #brand .creators .profile .name { font-size: 30px; font-weight: 500; line-height: 1em; margin: 0 0 20px; padding: 50px 0 10px; border-bottom: 2px solid #009D3B; } #brand .creators .profile span { font-size: 13px; font-weight: normal; line-height: 1.8em; margin: 20px 0 0; display: block; } #brand .creators .profile p { font-size: 13px; } #brand .creators .qa { text-align: left; padding: 130px 0; } #brand .creators .qa .article-wrap article { margin: 0 0 150px; } #brand .creators .qa .article-wrap article:last-child { margin: 0; } #brand .creators .qa .article-wrap article .q { font-size: 27px; font-weight: 500; text-align: center; background: #fff; border-radius: 12px; padding: 10px 0 8px; margin: 0 0 8%; position: relative; } #brand .creators .qa .article-wrap article .q .mrk { position: absolute; top: calc(50% - 25px); left: 70px; } #brand .creators .qa .article-wrap article .pic { float: left; width: 45%; } #brand .creators .qa .article-wrap article .txt { float: left; width: 55%; padding: 0 0 0 8%; } #brand .creators .qa .article-wrap article .txt .txt-b { font-size: 30px !important; font-weight: 500; line-height: 1.4em; margin: 0 0 40px; } #brand .creators .qa .article-wrap article .txt p { font-size: 16px; } #brand .bg-green { background: #eff7ed; } #brand .idx-list .pager ol { font-size: 0; } #brand .idx-list .pager ol li { border-right: 1px solid #009D3B; display: inline-block; } #brand .idx-list .pager ol li:last-child { border: none; } #brand .idx-list .pager ol li a { color: #009D3B; font-size: 30px; font-weight: 500; line-height: 1.4em; vertical-align: text-top; padding: 0 25px; display: block; } #brand .another-list { padding: 0 0 150px; } #brand .another-list h3 { font-size: 30px; font-weight: 600; margin: 0 0 40px; } #brand .another-list .list { position: relative; } #brand .another-list .list .arw-l { position: absolute; top: calc(50% - 14px); left: -3vw; } #brand .another-list .list .arw-r { position: absolute; top: calc(50% - 14px); right: -3vw; transform: rotateY(180deg); } #brand .another-list .list ul { width: 100% } #brand .another-list .list ul li { /*width: calc(20% - 0.8vw); float: left;*/ text-align: left; padding: 0 10px 0 0; transition: all 0.2s; } #brand .another-list .list ul li:hover { transform: scale(1.02); } #brand .another-list .list ul li .thumb { position: relative; } #brand .another-list .list ul li .num { color: #fff; font-size: 3vw; font-weight: 500; line-height: 1em; letter-spacing: 0; position: absolute; bottom: -0.5vw; right: -0.1vw; } /*////General classes////*/ .noted { font-size: 12px; margin-top: 1em } .nw { white-space: nowrap } .none { display:none; } .sp_none { display: block; } .pc_none { display: none; } @media screen and (max-width: 1300px){ #strategy .sec02 .box .icon { right: -5px; } #top-business .facilities .facis-inner ul li p { font-size: 13px } } @media screen and (max-width: 1240px){ #header h1 { padding: 25px 40px; } #header h1 .tagline { margin: 0 0 6px 20px; } } @media screen and (max-width: 1180px){ #wrapper, #header, #header #global-nav #menu li ol { min-width: 1160px } #header h1 { padding: 25px 20px; text-align: left; } #header h1 .tagline { margin: 0 0 6px 10px; } } @media screen and (max-width: 1220px) { #brand .inner { padding: 8.8vw; } #brand .slogan .corporate-slogan .parts01 { position: absolute; top: -120px; left: -90px; } #brand .slogan .corporate-slogan .parts02 { position: absolute; top: -150px; right: -100px; } #brand .slogan .corporate-slogan .parts03 { position: absolute; bottom: 20px; left: -100px; } #brand .slogan .corporate-slogan .parts04 { position: absolute; bottom: 70px; right: -70px; } #brand .slogan .corporate-slogan .parts05 { position: absolute; bottom: -150px; left: -60px; } #brand .slogan .corporate-slogan .parts06 { position: absolute; bottom: -140px; right: -130px; } #brand .slogan .corporate-slogan .parts07 { position: absolute; top: 120px; left: -40px; } #brand .slogan .corporate-slogan .parts08 { position: absolute; top: 40px; right: -10px; } #brand .slogan .corporate-slogan .parts09 { position: absolute; top: 290px; right: -80px; } #brand .slogan .corporate-slogan .parts10 { position: absolute; bottom: 210px; left: -20px; } #brand .slogan .corporate-slogan .parts11 { position: absolute; bottom: 210px; right: -10px; } #brand .slogan .corporate-slogan .parts12 { position: absolute; bottom: -140px; left: 280px; } #brand .slogan .corporate-slogan .parts13 { position: absolute; bottom: -220px; right: 280px; } /* 動画無しの場合：動画設定の際に要削除 */ #brand .slogan .corporate-slogan .parts05 { position: absolute; bottom: -270px; left: 120px; z-index: 1; } #brand .slogan .corporate-slogan .parts06 { position: absolute; bottom: -290px; right: 120px; z-index: 1; } #brand .slogan .corporate-slogan .parts10 { position: absolute; bottom: -150px; left: 0; z-index: 1; } #brand .slogan .corporate-slogan .parts11 { position: absolute; bottom: -110px; right: 400px; z-index: 1; } #brand .slogan .corporate-slogan .parts12 { position: absolute; bottom: inherit; left: inherit; top: -120px; right: 480px; z-index: 1; } #brand .slogan .corporate-slogan .parts13 { position: absolute; bottom: -260px; right: 0; z-index: 1; } } @media screen and (max-width: 820px) { #brand .slogan .corporate-slogan .parts01 { position: absolute; top: -120px; left: -140px; } #brand .slogan .corporate-slogan .parts02 { position: absolute; top: -150px; right: -150px; } #brand .slogan .corporate-slogan .parts03 { position: absolute; bottom: 20px; left: -150px; } #brand .slogan .corporate-slogan .parts04 { position: absolute; bottom: 70px; right: -120px; } #brand .slogan .corporate-slogan .parts05 { position: absolute; bottom: -150px; left: -110px; } #brand .slogan .corporate-slogan .parts06 { position: absolute; bottom: -140px; right: -180px; } #brand .slogan .corporate-slogan .parts07 { position: absolute; top: 120px; left: -90px; } #brand .slogan .corporate-slogan .parts08 { position: absolute; top: 40px; right: -60px; } #brand .slogan .corporate-slogan .parts09 { position: absolute; top: 290px; right: -100px; } #brand .slogan .corporate-slogan .parts10 { position: absolute; bottom: 210px; left: -70px; } #brand .slogan .corporate-slogan .parts11 { position: absolute; bottom: 210px; right: -60px; } #brand .slogan .corporate-slogan .parts12 { position: absolute; bottom: -140px; left: 230px; } #brand .slogan .corporate-slogan .parts13 { position: absolute; bottom: -220px; right: 230px; } #brand .slogan .our-business-inner ul { padding: 0 0 100px; } /* 動画無しの場合：動画設定の際に要削除 */ #brand .slogan .corporate-slogan .parts05 { position: absolute; bottom: -270px; left: 60px; z-index: 1; } #brand .slogan .corporate-slogan .parts06 { position: absolute; bottom: -290px; right: 60px; z-index: 1; } #brand .slogan .corporate-slogan .parts10 { position: absolute; bottom: -150px; left: -60px; z-index: 1; } #brand .slogan .corporate-slogan .parts11 { position: absolute; bottom: -70px; right: 360px; z-index: 1; } #brand .slogan .corporate-slogan .parts12 { position: absolute; bottom: inherit; left: inherit; top: -120px; right: 480px; z-index: 1; } #brand .slogan .corporate-slogan .parts13 { position: absolute; bottom: -260px; right: -80px; z-index: 1; } } @media screen and (max-width: 768px){ body { font-size: 13px; letter-spacing: 0.12em; } body p, ol li , ul li, th, td { font-size: 13px; line-height: 1.8em; letter-spacing: 0.12em; } h2,h3,h4,h4,h5 { line-height: 1.5em; } #wrapper, #header { min-width: inherit } #header { width: 100%; height: 42px; background: #fff; position: fixed; left: 0; top: 0; z-index: 1000; } #header h1 { padding: 15px 10px; text-align: left; } #header h1 .corp-logo { width: 165px; display: inline-block } #header h1 .tagline { width: 60px; margin: 0 0 3px 20px; display: inline-block } #header #global-nav { position: fixed; left: 100%; top: 42px; width: 50%; display: block; background: #fff } #header #global-nav ul { float: none } #header #global-nav ul li { float: none; width: 100%; position: relative; } #header #global-nav #menu li { border-top: solid 1px #e4e4e4 } #header #global-nav #menu li .bar { left: 0; bottom: 0; width: 0; height: 3px; display: none } #header #global-nav #menu li a { font-size: 14px; line-height: 1; vertical-align: middle; padding: 40px 0 !important; height: 100% !important; } #header #global-nav #menu li ol { display: none } #header #global-nav #h-btns { padding: 0 !important; } #header #global-nav #h-btns li a { line-height: 1; padding: 20px 0 25px !important; display: block; height: 100px !important; } #btn_menu { display: block; width: 42px; height: 42px; position: absolute; right: 0; top: 0; cursor: pointer } #btn_menu span.l1 { width: 24px; height: 2px; background: #008842; position: absolute; left: 50%; top: 50%; margin: -3px 0 0 -12px; transition: all 0.2s } #btn_menu span.l2 { width: 24px; height: 2px; background: #008842; position: absolute; left: 50%; top: 50%; margin: 3px 0 0 -12px; transition: all 0.2s } #btn_menu.active span.l1 { transform: rotate(22.5deg)translateY(3px)} #btn_menu.active span.l2 { transform: rotate(-22.5deg)translateY(-3px) } #footer { } #footer .f-ill { padding: 0 0 20px; margin: 0 -50% } #footer .foot-inner { padding: 30px 5px 15px; } #footer .sitemap .sm-cont { width: 50%; float: left; } #footer .sitemap .sm-cont_ { width: 50%; float: left; } #footer .sitemap .sm-inner { padding: 0 10px; } #footer .sitemap .cate { margin: 0 0 15px; padding: 0; font-size: 12px; line-height: 1.5 } #footer .sitemap .cate a { padding: 0 0 0 16px; position: relative } #footer .sitemap .cate a .arw { position: absolute; left: 0; top: 3px } #footer .sitemap .cate a:hover .arw { left: 1px; } #footer .sitemap ul { margin: 0 0 20px } #footer .sitemap li { font-size: 11px } #footer .foot { text-align: center; padding: 0; text-align: center } #footer .foot .f-logo { width: 180px; display: inline-block; margin-top: 20px } #footer .foot img { margin: 0 auto } #footer .foot .copyright { color: #fff; font-size: 9px; display: inline-block; padding: 20px 0 0 } #footer .ill { position: relative; right: inherit; bottom: inherit; width: 80%; } #footer .sp-flt { width:100% !important; } #footer .sp-l { float:left; width:50%; } #footer .sp-r { float:left; width:50%; } #footer .sp-r a { margin:0 0 0 10px; } /*////TOP////*/ #top-main { margin-top: 42px; } #top-main img.slide { } #top-main #bullets { bottom: 0; } #top-main #bullets li { display: inline-block; cursor: pointer } #top-topics { padding: 30px 0 40px } .top-inner { min-width: inherit; max-width: inherit; } .top-inner h2 { margin-bottom: 10px } .top-inner h2 img { height: 15px } .top-inner h2 span { font-size: 10px; line-height: 3em; letter-spacing: 0.4em } .topics { padding: 0 15px 40px } .topics ul { margin: 0 -5px } .topics li { float: left; width: 50%; opacity: 0 } .topics li .topic { padding: 5px } .topics li .topic .topic-inner { display: block; background: #fff; text-align: left; box-shadow: 2px 2px 25px #e3e3e3; position: relative } .topics li .topic .topic-inner .thumb { overflow: hidden; display: block } .topics li .topic .topic-inner .arw { height: 20px } .topics li .topic .topic-inner .topic-cont { padding: 10px } .topics li .topic .topic-inner .cate { font-size: 8.5px; line-height: 1.6em; margin-bottom: 5px } .topics li .topic .topic-inner h3 { font-size: 13px; margin-bottom: 4px } .topics li .topic .topic-inner p { font-size: 11px; } /*#top-topics .topics { padding: 0 15px 40px } #top-topics .topics ul { margin: 0 } #top-topics .topics li { float: none; width: 100%; } #top-topics .topics li .topic { padding: 2px 0 } #top-topics .topics li .topic .topic-inner .thumb { width: 50%; display: block } #top-topics .topics li .topic .topic-inner .arw { height: 20px } #top-topics .topics li .topic .topic-inner .topic-cont { position: absolute; left: 0; top: 0; padding: 8px 8px 8px 53% } #top-topics .topics li .topic .topic-inner .cate { font-size: 8.5px; line-height: 1.6em; margin-bottom: 5px } #top-topics .topics li .topic .topic-inner h3 { font-size: 13px; margin-bottom: 4px } #top-topics .topics li .topic .topic-inner p { font-size: 11px; }*/ #top-topics .btn_more { width: 50%; margin: 20px auto 0 } #top-topics .btn_more a { display: block; padding: 10px 0; font-size: 14px; color: #fff; background: #008842 } #top-topics .top-inner .fig01 { position: absolute; left: 25px; top: 4px; width: 60px } #top-topics .top-inner .fig02 { position: absolute; right: -5px; top: 0; width: 40px } #top-topics .top-inner .fig03 { position: absolute; right: 5px; top: 25px; width: 72px } #top-topics .fig04 { display: none } #top-topics .fig05 { position: absolute; left: -20px; bottom: 24px; width: 120px } #top-topics .fig06 { display: none } #top-topics .fig07 { position: absolute; right: -75px; bottom: -30px; width: 150px } #top-topics .fig08 { position: absolute; right: 80px; bottom: 20px; width: 70px } #top-news { padding: 30px 0 40px; } #top-news .news { padding: 0 0 40px } #top-news .news .news-tabs li { } #top-news .news .news-tabs li a { font-size: 10px } /*#top-news .news .news-inner li { padding: 10px 15px; /zoom : 1; } #top-news .news .news-inner li:after { content : ''; display : block; clear : both; } #top-news .news .news-inner li .cate { position: relative; left: inherit; top: inherit; display: inline-block; width: 80px; font-size: 8.5px; line-height: 1.6; margin-bottom: 5px } #top-news .news .news-inner li .date { position: relative; left: inherit; top: inherit; display: inline-block; font-size: 12px; margin-left: 20px } #top-news .news .news-inner li a { display: block; } #top-news .news .news-inner li .size { font-size: 10px; }*/ .btn_more { width: 50%; margin: 30px auto 0 } .btn_more a { display: block; padding: 10px 0; font-size: 14px; color: #fff; background: #bdce00; text-align: center } #top-news .top-inner .fig01 { position: absolute; left: 25px; top: 4px; width: 60px } #top-news .top-inner .fig02 { position: absolute; right: -5px; top: 0; width: 40px } #top-news .top-inner .fig03 { position: absolute; right: 5px; top: 25px; width: 72px } #top-news .fig04 { display: none } #top-news .fig05 { position: absolute; left: -20px; bottom: 24px; width: 120px } #top-news .fig06 { display: none } #top-news .fig07 { position: absolute; right: -75px; bottom: -30px; width: 150px } #top-news .fig08 { position: absolute; right: 80px; bottom: 20px; width: 70px } #top-business { padding: 30px 15px } #top-business .business .main-busi { float: none; width: 100%; } #top-business .business .main-busi ul { margin: 0 -15px } #top-business .business .main-busi ul li { width: 50%; float: left } #top-business .business .main-busi ul li a { display: block; padding: 15px } #top-business .business .other-busi { float: none; width: 100%; margin-top: 40px } #top-business .business .other-busi ul { width:100%; border-left: none; } #top-business .business .other-busi ul li { width: 100%; float: none } #top-business .business .other-busi ul li a { display: block; padding: 5px 15px } #top-business .business .other-busi ul li a img { height: 60px } #top-business .business .other-busi ul li:first-child a .ico { position: absolute; left: 50%; top: -15px; height: 60px; margin-left: -140px } #top-business .facilities { margin: 40px 0 0; position: relative } #top-business .facilities .facis-inner { min-width: inherit; max-width: inherit; margin: 0 auto; overflow: hidden } #top-business .facilities .facis-inner ul { position: absolute; left: -750%; top: 0; margin-left: 25%; width: 2100% } #top-business .facilities .facis-inner ul li { float: left; width: 2.38% } #top-business .facilities .facis-inner ul li a { display: block; padding: 0 5px; } #top-business .facilities .facis-inner ul li p { line-height: 1.5em; font-size: 12px } #top-business .facilities .prev-arw { position: absolute; left: -15px; top: 50%; margin-top: -72px; padding: 20px 20px 20px 0 } #top-business .facilities .next-arw { position: absolute; right: -15px; top: 50%; margin-top: -72px; padding: 20px 0 20px 20px } #sns { margin: 20px 0 30px; } #yomiuri-group ul { font-size:0; margin:0 0 50px; } #yomiuri-group ul li { display:inline-block; padding:0 20px; } #yomiuri-group ul li img { height:25px; } /*////LOWER pages////*/ #main { position: relative; margin-top: 42px; padding-bottom: 20px } #main h2 { position: absolute; left: 0; top: 50%; width: 100%; margin-top: -30px; z-index: 10 } #main h2 img { height: 14px } #main h2 span { line-height: 2.6em; letter-spacing: 0.4em; font-size: 12px } #main .breadcrumbs { position: absolute; left: 0; bottom: 0; display: block; width: 100%; text-align: left; padding: 5px 10px; background: #f7f7f7; font-size: 10px; line-height: 1; z-index: 10 } #main .bg { position: relative; z-index: 0; margin: 0 -25%; width: 150% } .contents { padding: 30px 15px } .contents-inner { min-width: auto; max-width: auto; } h2.btit { padding: 10px; font-size: 18px; letter-spacing:0.2em; margin: 0 0 30px; } p.read { font-size: 15px; } .sec { padding: 0 0 30px; margin: 0 0 30px; } .sec-inner { padding: 0; } .sec-inner h2 { font-size: 20px; } .sec-inner h3 { font-size: 16px; } .sec-inner h4 { font-size: 14px; } .sec-b { padding: 0 0 30px; margin: 0 0 30px; } .column-one { padding: 20px 0 0; margin: 0; } .column-one .column { width: 100%; } .column-one .column .clm-immner { padding: 0; } .column-two { padding: 20px 0 0; margin: 0; } .column-two .column { width: 100%; float: none; margin:0 0 20px 0; } .column-two .column .clm-immner { padding: 0; } .block { margin: 0; } .block .ph { width: auto; } .block .txt { width: auto; padding:15px 0 0; } .block .inner { padding: 0; } .block h3 { font-size: 14px; } .block h4 { font-size: 14px; } .block-b { margin: 0 0 40px; text-align: left } .block-d { padding: 30px 0 0; text-align: left } .bnrs a { display: inline-block; width: 100%; padding: 5px 0 } /*//COMPANY//*/ .company-table { margin: 0 auto 60px; border: solid #dfdfdf; border-width: 1px 0 2px; } .company-table th { padding: 10px; width:auto; display:block; } .company-table td { border-width: 0; padding: 10px; display:block; } #company-idx .link-area { margin:0 -5px; } #company-idx .link-area li { width: 50%; float:left; text-align:center; } #company-idx .link-area li .idx-inner { padding: 0; margin: 5px; } #company-idx .link-area li h4 { font-size:14px; letter-spacing:0.2em; margin:20px 0 10px; } #company-idx .link-area li .ar { padding:0 5px 0 0; height:18px; } #company-idx .link-area li .ar img { height:18px; } /*企業スローガン*/ #company-slogan .slogan { padding: 0 0 40px } #company-slogan p { font-size: 14px; text-align: left; padding: 0 1em; } /*会社概要*/ #outline {} #outline ul li span { width:auto; display:inline-block; } #outline .tbl { margin:10px 0 0; } #outline .tbl02 th { display: table-cell !important; padding:5px 20px 5px 0 !important; } #outline .tbl02 td { display:table-cell !important; padding:5px 0 !important; } /*メッセージ*/ #message {} #message .statement { padding: 0; position: relative } #message .statement h3 { font-size: 20px; margin-bottom: 1em; text-align: center } #message .statement p { font-size: 14px } #message .pic { position: relative; left: inherit; top: inherit; width: 180px; margin: 20px auto 0 } #message .pic p { margin-top: 1em; text-align: center } #message .pic p span { font-size: 18px } #message .bnr a img:hover { transform: scale(1.0); } #message .bnr img { width: 100%; } #message .bnr { margin: 40px 0 0 0; padding: 0 20px; } #message .bnr a img:hover { transform: scale(1.0); } #message .bnr a img { width: 100%; } /*沿革*/ #history th { width:100%; } #history td { padding:10px; float:left; } #history td.month { background:none; width:15%; padding:8px; } #history td.txt { width:85%; padding:8px; } /*グループ企業*/ #group {} #group td span.b { font-weight: 500; font-size: 14px } #group ul li { margin:0 0 5px 0; } #group ul li:last-child { margin:0; } span.pdf { font-size:10px; } /*//IR//*/ .ir-table th { border:solid #c7c7c7; border-width: 1px 0; font-size:13px; color:#008842; font-weight:500; letter-spacing:0.2em; } .ir-table td { border:solid #c7c7c7; border-width: 1px 0; font-size:13px; letter-spacing:0.2em; } .sec-block { margin:0 0 40px 0; } .notes { font-size: 11px; line-height:1.8em; display:inline-block; } #ir-news p.txtL { margin:0 0 30px; } #stock-information p.txtL { margin:0 0 30px; } /*IRインデックス*/ #ir-idx h3 { font-size:20px; } #ir-idx .link-area { margin:0 0 0 -10px; } #ir-idx .link-area li { width:50%; } #ir-idx .link-area li .inner { padding:20px 0 0; margin:0 0 10px 10px; } #ir-idx .link-area li h4 { font-size:14px; letter-spacing:0.2em; margin:20px 0 10px; } #ir-idx .link-area li .ar { padding:0 5px 0 0; height:18px; } #ir-idx .link-area li .ar img { height:18px; } #ir-idx .link-area li .icon { height:50px; } /*成長戦略*/ #strategy {} #strategy-main h2 { position:absolute; top: 15px; left:50%; margin:0 0 0 -150px; } #strategy-main h2 img { height:44px; } #strategy .sec01 {} #strategy .sec01 .intro { font-size:15px; letter-spacing:0.2em; line-height:1.8em !important; margin:0 0 30px; } #strategy .sec01 h3 { font-size:14px; letter-spacing:0.2em; margin:0; } #strategy .sec01 ul { margin:0 0 0 -5px; } #strategy .sec01 ul li { width:50%; float:left; } #strategy .sec01 ul li .inner { margin:0 0 0 5px; } #strategy .sec01 ul li p { font-size:11px; letter-spacing:0; } #strategy .sec02 h2 .inner { margin:0 0 0 -25px; } #strategy .sec02 h2 .num { font-size:60px; margin:0 0 0 100px; } #strategy .sec02 h3 { font-size:16px; letter-spacing:0.2em; margin:0 0 20px; } #strategy .sec02 .box { padding:20px; } #strategy .sec02 .box .inner { width:auto; } #strategy .sec02 .box ol li { font-size:14px; padding:0 0 0 35px; margin:0 0 15px; } #strategy .sec02 .box ol li .num { font-size:26px; top:2px; } #strategy .sec02 .box .icon { bottom:-40px; right:-10px; height:80px; } #strategy .sec02 .mb60 { margin-bottom:30px !important; } #strategy .sec03 h2 .inner { position:relative; margin:0 0 0 -25px; } #strategy .sec03 h2 .num { font-size:60px; margin:0 0 0 100px; } #strategy .sec03 h3 { font-size:16px; letter-spacing:0.2em; margin:0 0 20px; } /**/ #strategy .graph { text-align: center; position: relative; margin-top: 80px; opacity: 0 } #strategy .graph .bg { width: 300px } #strategy .graph .tit { position: relative; display: inline-block; right: inherit; top: inherit; margin: 10px 0; font-size: 16px; text-align: left } #strategy .graph .tit br { display: none } #strategy .graph .tit span { font-size: 11px } #strategy .graph .res { position: relative; display: inline-block; left: inherit; top: inherit; margin: 10px 0; font-size: 16px; text-align: left } #strategy .graph .res span { font-size: 42px; } #strategy .graph .res span.og { color: #eda93d } #strategy .graph .bars { position: absolute; left: 50%; bottom: 16px; width: 300px; height: 200px; margin-left: -150px; overflow: hidden; } #strategy .graph .bars .bar1 { position: absolute; left: 19%; bottom: -103px } #strategy .graph .bars .bar2 { position: absolute; left: 43%; bottom: -140px } #strategy .graph .bars .bar3 { position: absolute; left: 67%; bottom: -175px } #strategy .graph .bars .bar1, #strategy .graph .bars .bar2, #strategy .graph .bars .bar3 { width:39px } #strategy .graph .bars .arw { position: absolute; right: 40%; top: 20px; opacity: 0; width: 142px } #strategy .graph#graph02 .bars .arw { right: 50%; } #strategy .graph .nums { position: absolute; left: 50%; bottom: 24px; width: 217px; margin-left: -115px; font-size: 0; display: none } #strategy .graph .nums li { font-size: 11px; } .download { padding:20px 20px 30px; margin: 0 0 60px } .download p { font-size:13px; letter-spacing:0.2em; } .download .btn a { font-size:15px; letter-spacing:0.4em; padding:20px 0; margin:15px auto 0; width:100%; } .download .btn .ar { right:15px; margin:-11px 0 0; height:22px; } .adjust { margin:-12px 0 0 0} /*株式状況*/ #stock-information {} #stock-information .tbl01 {} #stock-information .tbl01 th { padding:10px 0 10px 10px; width:30%; } #stock-information .tbl01 td { padding:10px 0 10px 10px; } #stock-information .tbl02 th { padding:10px 0 10px 10px; width:46%; } #stock-information .tbl02 td { width:27%; padding:10px 0; } #stock-information .tbl02 .item td { border-width: 0; } #stock-information .graph { position:relative; } #stock-information .graph .img_graph { position:relative; z-index:100; width:100%; height:auto; } #stock-information .graph table { position:static; margin:20px 0 0; } #stock-information .graph th { padding:14px 0 12px 20px; font-size:14px; } #stock-information .graph th img { margin:0 20px 0 0; height:24px; } #stock-information .graph td { font-size:14px; padding:14px 0 12px 0; } #stock-information .date { font-size:11px; margin:0 0 5px; } #stock-information .notes { margin:10px 0 0 35px !important; text-indent:-37px; } /*株主優待*/ #benefit {} #benefit .list { margin:0 0 10px 20px; list-style-type:disc; list-style-position:outside; } #benefit .tbl01 { margin:20px 0 0; } #benefit .tbl01 th { padding:10px 0 10px 10px; width:40%; text-align:center; } #benefit .tbl01 td { padding:10px 0 10px 10px; text-align:center; } #benefit .tbl02 { margin:0; } #benefit .tbl02 th { padding: 10px 0 10px 10px; width:40%; } #benefit .tbl02 td { padding:10px 0; width:60%; } #benefit .column-two { padding:0 0 10px !important; } /*財務ハイライト*/ #highlight {} #highlight .column-two { padding:0 !important; } #highlight .column-two h3 { margin:0 0 5px; } #highlight .column { margin:0 0 30px; } #highlight .box { padding: 20px; } #highlight .box img { border: solid 10px #fff } #highlight .tbl01 { float:none; width:100%; margin:0 0 20px 0; border:solid #c7c7c7; border-width:0 0 1px; } #highlight .tbl01 th { padding: 15px 10px; height:auto; border-width: 1px 0 0; } #highlight .tbl01 th span { font-size: 11px; } #highlight .tbl01 td { padding: 15px 10px; height:auto; } #highlight .tbl01 .item th { height:auto; border-width: 0 0 0; } #highlight .xj_chart_table { width: 100% } #highlight .xj_chart_table th { padding: 10px; } #highlight .xj_chart_table th.xj_chart_header, #highlight .xj_chart_table th.xj_chart_header_first { font-size:12px !important; padding: 5px 10px!important; } #highlight .xj_chart_table th span { font-size: 11px; } #highlight .xj_chart_table td { padding: 10px; height: auto; background: #fff } #highlight .xj_chart_title { width: auto; white-space: nowrap; } #highlight .xj_chart_value_last { } #highlight .h-table { overflow: hidden; overflow-x: scroll } /*.xj_chart_table { margin-top: -20px }*/ /*IRカレンダー*/ #calendar ul { margin: 40px 0 0; } #calendar ul li { padding: 10px 15px; } #calendar ul li .date { position: static; font-size:13px !important; display:block } #calendar .mt15 { margin-top:5px !important;} /*//BUSINESS//*/ #business-main h2 { left:10px; bottom: 10px; } #business-main h2 img { height:50px; width:auto; } #business-main .bg { position: relative; z-index: 0 } #business-main-b { padding: 30px 10px 0; background: #f7f7f7; text-align: left } #business-main-b h2 img { width: 100%; height: auto } /*BUSINESSインデックス*/ #business {} #business-idx .clm1 { margin:70px 0 0; } #business-idx .clm1 li h3 { font-size:30px; letter-spacing:0.3em; padding:8px 0 20px 85px; } #business-idx .clm1 li h3 span { font-size:20px; letter-spacing:0.3em; } #business-idx .clm1 li p { padding:0 20px 20px 20px; } #business-idx .clm1 li .inner { padding:15px 0 0 0; margin:0 0 25px; box-shadow: 2px 2px 25px #e3e3e3; } #business-idx .clm1 li .ico { top:10px; left:-10px; height:80px; } #business-idx .clm1 li .cate { padding:0 0 0 85px; height:15px; } #business-idx .clm1 li .ar { height:22px; padding:0 10px 0 0; } #business-idx .clm1 li .ar img { height:22px; } #business-idx .clm1 li.cate01 .ph { position:static; bottom:28px; right:-40px; width:90%; height:auto; } #business-idx .clm1 li.cate02 .ph { position:static; bottom:90px; right:-20px; width:90%; height:auto; margin:0 0 20px; } #business-idx .clm1 li.cate03 .ph { position:static; bottom:80px; right:20px; width:90%; height:auto; margin:0 0 20px; } #business-idx .clm1 li.cate04 .ph { position:static; bottom:60px; right:30px; width:90%; height:auto; margin:0 0 20px; } #business-idx .clm1 li.cate05 .ph { position:static; bottom:60px; right:30px; width:90%; height:auto; margin:0 0 20px; } .ph-box { text-align:center; margin:0 auto; } #business-idx .clm2 { margin:0; } #business-idx .clm2 li h3 { font-size:20px; letter-spacing:0.1em; } #business-idx .clm2 li.cate05 h3 { padding:8px 0 0 20px; } #business-idx .clm2 li.cate06 h3 { padding:8px 0 0 20px; } #business-idx .clm2 li.cate07 h3 { padding:8px 0 0 175px; } #business-idx .clm2 li.cate08 h3 { padding:8px 0 0 20px; } #business-idx .clm2 li p { padding:10px 20px 20px; } #business-idx .clm2 li { width:100%; float:none; } #business-idx .clm2 li .inner { padding: 20px 0 15px; margin:0 0 25px; } #business-idx .clm2 li.cate07 .inner { padding: 0; margin:0 0 25px; min-height: 122px } #business-idx .clm2 li.cate05 .ico { padding:0 0 0 20px; } #business-idx .clm2 li.cate06 .ico { padding:0 0 0 20px; } #business-idx .clm2 li.cate08 .ico { padding:0 0 0 68px; } #business-idx .clm2 li.cate07 .ico { top:0; left:0; width: 150px } #business-idx .clm2 li.cate05 .cate { padding:0 0 0 20px; height:15px; } #business-idx .clm2 li.cate06 .cate { padding:0 0 0 20px; height:15px; } #business-idx .clm2 li.cate08 .cate { padding:0 0 0 20px; height:15px; } #business-idx .clm2 li.cate07 .cate { padding: 20px 0 0 175px; height: 35px; } #business-idx .clm2 li .ar { height:22px; padding:0 10px 0 0; } #business-idx .clm2 li.cate07 .ar { position: absolute; width: 100%; left: 0; bottom: 0 } #business-idx .clm2 li .ar img { height:22px; } #business-idx ul li a { font-size:13px; letter-spacing:0.3em; padding:0 10px 0 0; } .facility { background: #f4f4f4; padding: 30px 10px; margin: 0 0 60px } .facility .facility-inner { min-width: inherit; max-width: inherit; margin: 0 auto; padding: 0 } .facility .facility-inner h3 { font-size: 18px; color: #9dc815; line-height: 1; margin-bottom: 15px } .facility .facility-inner li .faci a { font-size: 14px; } .facility .facility-inner li .faci a .thumb { float: none; overflow: hidden; } .facility .facility-inner li .faci a .thumb img { width: 100% } .facility .facility-inner li .faci a span { display: inline-block; padding: 15px; } .facility .facility-inner li .faci a .arw { position: absolute; right: 0; bottom: 0; width: 20px; } /*施設紹介*/ #facility-info {} #facility-info h3 { margin:0 0 10px; padding: 0 0 0 65px; font-size: 20px; line-height: 50px; min-height: 50px } #facility-info .ico { height:50px; } #facility-info h4 { font-size:16px; margin:15px 0 10px 0; } #facility-info .box { margin:0 0 30px; padding-left: 0; min-height: inherit; } #facility-info .box p { margin:0 0 20px; } #facility-info .box img { position: relative; left: inherit; top: inherit; width: 100%; } /*////XjStorageLoader////*/ #xj { margin: 0 } #xj .btn_more { width: 50%; margin: 30px auto 0 } #xj .btn_more a { display: block; padding: 10px 0; font-size: 14px; background: #bdce00 } #xj-select-year { padding: 0 } #xj-select-year li { padding: 0 0 10px; width: 25% } #xj-select-year li a { display: block; padding: 4px 12px; text-align: center } #xj-select-category { margin: 30px 0 0; text-align: center } #xj-select-category li { width: 33.33%; } .xj-list { margin: 0; border-top: solid 1px #d4d4d4; } .xj-list li { padding: 10px; /zoom : 1; } .xj-list li:after { content : ''; display : block; clear : both; } .xj-list li .cate { position: relative; left: inherit; top: inherit; display: inline-block; width: 80px; font-size: 8.5px; line-height: 1.6; margin-bottom: 5px } .xj-list li.nr .cate { top: inherit; line-height: 1.6; } .xj-list li .date { position: relative; left: inherit; top: inherit; display: inline-block; font-size: 12px; margin-left: 20px } .xj-list li a { display: block; /*margin-top: -1em*/ } #xj .xj-list li a { margin-top: -1em } .xj-list li .size { font-size: 10px } .xj-list-b li { padding: 10px; /zoom : 1; } .xj-list-b li:after { content : ''; display : block; clear : both; } .xj-list-b li .date { position: relative; left: inherit; top: inherit; display: inline-block; font-size: 12px; margin-left: 0 } .xj-list-b li a { display: block; } .xj-list-b li .size { font-size: 10px } #xj .sub-category { padding: 1.5em 0; } #xj .sub-category ul { margin: -2px } #xj .sub-category li { float: left; width: 33.33% } #xj .sub-category li a { margin: 2px } .lib-year { margin: 15px 0 } /*////70th Anniversary////*/ #anniversary { margin-top: 42px } #anniversary .logo { padding: 20px 0 40px } #anniversary .logo img { width: 80% } #anniversary h3 { font-size: 17px } #anniversary p.msg { font-size: 14px; text-align: left } #anniversary .btn_more { width: 80%; margin: 20px auto 0; } #anniversary .btn_more a { padding: 15px 0; font-size: 14px; } #anniversary .omoi { padding: 20px; margin: 40px 0 0 } #anniversary .omoi h3 { font-size: 16px; margin-bottom: 20px } #anniversary .omoi .fltL { margin-right: 20px; margin-bottom: 20px; width: 40% } /*////TOPICS////*/ #topics .content { min-width: inherit; max-width: inherit; width: 100%; margin: 0 auto; padding: 0 0 40px; text-align: left } #topics .content .featured-media img { width: 100%; height: auto } #topics .content .post-title { font-size: 20px; color: #009848; letter-spacing: 0.24em; padding: 30px 0 0 } #topics .content .post-meta { padding: 2em 0 } #topics .content .post-date { font-size: 14px; } #topics .content .post p, #topics .content .post img { margin: 1.5em 0 0 } #topics .content .post p.post-categories { font-size: 14px; } #topics .btn { width: 100%; margin: 30px auto 0 } #topics .btn a { display: block; padding: 20px 0; font-size: 15px; color: #fff; background: #008842; text-align: center } /*//SUSTAINABILITY//*/ #sustainability { padding:0 0 50px; } #sustainability .intro { padding:30px 20px 25px; } #sustainability .intro .inner { min-width: inherit; max-width: inherit; } #sustainability .intro h3 { font-size:20px; letter-spacing:0.2em; margin:0 0 15px; } #sustainability .intro p { font-size:14px; line-height:2; text-align:left; } #sustainability .esg { padding:30px 20px; margin:0 0 40px; } #sustainability .esg-inner { min-width: inherit; max-width: inherit; } #sustainability .esg .clm { float:none; margin:0 0 30px; } #sustainability .esg li.clm:last-child { margin-bottom:0; } #sustainability .esg li.clm:nth-child(1) { width:100%; } #sustainability .esg li.clm:nth-child(2) { width:100%; } #sustainability .esg li.clm:nth-child(3) { width:100%; } #sustainability .esg .clm h4 { margin:0 0 15px; } #sustainability .esg .clm h4 img { height:30px; } #sustainability .esg .clm ul { margin:0; } #sustainability .esg .clm ul li { margin:0 0 15px; } #sustainability .esg .clm ul li a { font-size:13px; } #sustainability .esg .clm ul li a span { border-bottom:3px solid #41a02b; } #sustainability .sdgs { padding:0 20px; margin:0 auto 40px; } #sustainability .sdgs .sdgs-inner { padding:20px; min-width: inherit; max-width: inherit; } #sustainability .sdgs h2 { font-size: 20px } #sustainability .sdgs .txt { float:none; width:100%; } #sustainability .sdgs .txt h5 { font-size:15px; margin:0 0 10px; padding:00; } #sustainability .sdgs .txt p { padding:0; } #sustainability .sdgs .figure { float:none; width:100%; } #sustainability .sdgs .figure .sdgs-logo { margin:20px 0 10px; } #sustainability .sdgs .figure .sdgs-logo img { width:200px; } #sustainability .sdgs .figure ul { margin:0 0 0 -2px; } #sustainability .sdgs .figure ul li { width:16.6%; margin:0 0 2px; } #sustainability .sdgs .figure ul li .inner { margin:0 0 0 2px; } #sustainability .sdgs .sdgs-inner .chara01 { left: -8%; top: -24px; width: 80px } #sustainability .sdgs .sdgs-inner .chara02 { right: -8%; top: -24px; width: 80px } #sustainability .block { padding:0; margin:0 auto 30px; } #sustainability .block .block-inner { min-width: inherit; max-width: inherit; } #sustainability .block .flame { padding:20px; } #sustainability .block .cate-ico { font-size:0; margin:0 0 20px -5px; } #sustainability .block .cate-ico li { margin:0 0 0 5px; } #sustainability .block .cate-ico li img { width:40px; } #sustainability .block .cate { position:absolute; top:25px; right:20px; } #sustainability .block .cate img { height:13px; } #sustainability .block h4 { font-size:20px; letter-spacing:0.2em; line-height:1.6; margin:0 0 10px; } #sustainability .block .read { font-size:14px; margin:0 0 30px; } #sustainability .block .detail .case { margin:0 0 20px -5px; } #sustainability .block .detail .case li { float:none; margin:0 0 5px; } #sustainability .block .detail .case span { font-size:11px; padding:8px 15px; margin:0 0 0 5px; } #sustainability .block .detail li.box { padding:30px 20px 15px; margin:0 0 20px; border:1px solid #bdce00; } #sustainability .block .detail li.box .parts { position:absolute; top:-10px; right:10px; } #sustainability .block .detail li.box .parts img { height: 32px; } #sustainability .block .detail li.box h5 { font-size:18px; letter-spacing:0.2em; line-height:1.4; margin:0 0 15px; } #sustainability .block .detail li.box p { width:100%; } #sustainability .block .detail li.box h6 { font-size:15px; margin:20px 0 0; } #sustainability .block .detail li.box h6 span { font-size:18px; } #sustainability .block .detail li.box .sdgs-ico { margin:15px 0 0 -5px; } #sustainability .block .detail li.box .sdgs-ico li { width:20%; margin:0 0 5px; } #sustainability .block .detail li.box .sdgs-ico li .sdgs-inner { margin:0 0 0 5px; } #sustainability .block .detail li.box .sdgs-ico li img { width:100%; } #sustainability .block .detail li.box .pic { width:100%; margin:0 0 0 -5px; position:static; } #sustainability .block .detail li.box .pic li { float:left; width:50%; margin:0 0 20px; } #sustainability .block .detail li.box .pic li .pic-inner { margin:0 0 0 5px; } #sustainability .block .detail li.box .pic .cap { font-size:9px; line-height:1.3; letter-spacing:0.1em; margin:5px 0 0; padding:0 3px; } #environment01 .first { padding:30px 20px 15px !important; } #environment01 { padding-top: 50px; margin-top:-50px; } #social01, #social02, #social01, #social03 { margin:0 0 60px; padding-top: 50px; margin-top:-50px; } #social04 { padding-top: 50px; margin-top:-50px; } #sustainability .block #governance01 .detail li.box .pic { top: inherit; bottom: inherit !important } #governance01 { padding-top: 50px; margin-top:-50px; } #governance01 .mb60 { margin-bottom:40px !important; } .nav-links { font-size: 16px } /*//BRAND//*/ #brand .wd { max-width: inherit; } #brand .inner { padding: 0; } #brand-main { margin-top: 46px; } #brand-main h2 .main01 { width: 100%; } #brand-main h2 .main02 { width: calc(50% - 0.7vw); margin: 1.4vw 0.7vw 0 0; float: left; } #brand-main h2 .main03 { width: calc(50% - 0.7vw); margin: 1.4vw 0 0 0.7vw; float: right; } #brand .btn-idx { padding: 50px 12vw 0; } #brand .btn-idx a { font-size: 18px; width: 100%; padding: 22px 0 20px; } #brand .btn-idx a:hover { transform: scale(1.0); } #brand .top h3 { font-size: 23px; margin: 0 0 40px; } #brand .top h3 span { font-size: 14px; margin: 0 0 15px; } #brand .top .stories { margin: 50px 0 0; padding: 140px 0 120px; background: url("../../brand/img/top_kazari01_sp.png"), url("../../brand/img/top_kazari02_sp.png"), url("../../brand/img/bg01.jpg"); background-repeat: no-repeat, no-repeat, no-repeat; background-size: 880px, 880px, cover; background-position: top center, bottom center, top 60px center; } #brand .top .stories .list { overflow: hidden; } #brand .top .stories .list .arw-l { position: absolute; top: 44%; left: 4.4vw; z-index: 3; padding: 5px 8px; border-radius: 40px; background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5); } #brand .top .stories .list .arw-r { position: absolute; top: 44%; right: 4.4vw; z-index: 3; padding: 5px 8px; border-radius: 40px; background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5); } #brand .top .stories .list ul { width: 150%; margin-left: 4.4vw } #brand .top .stories .list ul li { padding: 0 30px 0 0;} #brand .top .stories .list ul li:hover { transform: scale(1.0); } #brand .top .stories .list ul li .thumb .bg { position: absolute; bottom: -5px; right: -5px; } #brand .top .stories .list ul li .num { font-size: 12px; margin: 20px 0 5px; } #brand .top .stories .list ul li .num span { font-size: 16px; } #brand .top .stories .list ul li h4 { font-size: 15px; margin: 0 0 5px; } #brand .top .creators { padding: 80px 0 120px; margin: 0 0 40px; background: url("../../brand/img/top_kazari03_sp.png"), url("../../brand/img/bg02.png"); background-repeat: no-repeat, repeat; background-size: 840px, 25px; background-position: bottom center, top left; } #brand .top .creators h4 { font-size: 18px; font-weight: 600; margin: 0 0 15px; } #brand .top .creators .frame { max-width: inherit; margin: 0 8vw 50px; } #brand .top .creators .frame .pic { width: 100%; } #brand .top .creators .frame .pic .num { font-size: 16vw; position: absolute; bottom: -2.6vw; right: -0.2vw; } #brand .top .creators .frame .txt { width: 100%; padding: 6vw; } #brand .top .creators .frame .txt h4 { font-size: 17px !important; margin: 0 0 5px; } #brand .top .creators .frame .txt .name { font-size: 15px; margin: 0 0 5px; } #brand .top .creators .frame .txt .btn-more a { font-size: 14px; width: 100%; } #brand .top .creators .frame .txt .btn-more a:hover { transform: scale(1.0); } #brand .top .creators .list { overflow: hidden; } #brand .top .creators .list .arw-l { position: absolute; top: 54%; left: 4.4vw; z-index: 3; padding: 5px 8px; border-radius: 40px; background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5); } #brand .top .creators .list .arw-r { position: absolute; top: 54%; right: 4.4vw; z-index: 3; padding: 5px 8px; border-radius: 40px; background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5); } #brand .top .creators .list ul { width: 150%; margin-left: 10px } #brand .top .creators .list ul li:hover { transform: scale(1.0); } #brand .top .creators .list ul li .num { font-size: 10vw; position: absolute; bottom: -4.4vw; right: -5vw; } #brand .top .creators .list ul li h5 { font-size: 15px; } #brand .breadcrumbs { padding: 8px 2% 5px; margin-top: 46px; background: #E7F2E1; } #brand .slogan h2 { font-size: 32px; } #brand .slogan h2 span { font-size: 18px; } #brand .slogan h2 div { width: 70px; height: 3px; margin: 10px auto 0; } #brand .slogan .corporate-slogan h2 { padding: 50px 0 30px; } #brand .slogan .corporate-slogan .corporate-slogan-inner { padding: 0 0 40px; } #brand .slogan .corporate-slogan .corporate-slogan-inner .kazari { background: url("../../brand/img/slogan_kazari01_sp.png"); background-repeat: no-repeat; background-size: 880px; background-position: top center; padding: 80px 0 0 ; } #brand .slogan .corporate-slogan .corporate-slogan-inner .slogan-txt { max-width: inherit; padding: 0 8.8vw; } #brand .slogan .corporate-slogan .corporate-slogan-inner p { font-size: 18px; padding: 40px 4.4vw 0; } #brand .slogan .corporate-slogan .corporate-slogan-inner .mov-box { max-width:inherit; padding: 0 4.4vw; } #brand .slogan .corporate-slogan .parts01 { display: none; } #brand .slogan .corporate-slogan .parts02 { display: none; } #brand .slogan .corporate-slogan .parts03 { display: none; } #brand .slogan .corporate-slogan .parts04 { display: none; } #brand .slogan .corporate-slogan .parts05 { display: none; } #brand .slogan .corporate-slogan .parts06 { display: none; } #brand .slogan .corporate-slogan .parts07 { display: none; } #brand .slogan .corporate-slogan .parts08 { display: none; } #brand .slogan .corporate-slogan .parts09 { display: none; } #brand .slogan .corporate-slogan .parts10 { display: none; } #brand .slogan .corporate-slogan .parts11 { display: none; } #brand .slogan .corporate-slogan .parts12 { display: none; } #brand .slogan .corporate-slogan .parts13 { display: none; } #brand .slogan .corporate-slogan .parts01_sp { padding: 0 6vw 20px 7.5vw; display: block; } #brand .slogan .corporate-slogan .parts02_sp { padding: 20px 8.8vw 25px 8.8vw; display: block; } #brand .slogan .corporate-slogan .parts03_sp { padding: 40px 6vw 0 7.5vw; display: block; } #brand .slogan .our-business .mov-box { width: 100%; margin: 0 auto 40px; } #brand .slogan .our-business h2 { padding: 0 0 30px; } #brand .slogan .our-business .our-business-inner .kazari { background: url("../../brand/img/slogan_kazari02_sp.png"); background-repeat: no-repeat; background-size: 880px; background-position: top 0px center; padding: 80px 0 0; } #brand .slogan .our-business-inner ul { padding: 0 4.4vw 100px; } #brand .slogan .our-business-inner ul li { margin: 0 0 70px; } #brand .slogan .our-business-inner ul li h3 { font-size: 18px; margin: 0 0 8px; } #brand .slogan .our-business-inner ul li p { font-size: 14px; } #brand .slogan .our-business-inner ul li .btn-more { margin: 20px 10vw 0; } #brand .slogan .our-business-inner ul li .btn-more a { width: 100%; } #brand .slogan .our-business-inner ul li .btn-more a:hover { transform: scale(1.04); } #brand .slogan .our-business-inner ul li .pic { margin: 0 0 20px; } #brand .slogan .our-business-inner ul li:nth-child(odd) .txt { padding: 0; } #brand .slogan .our-business-inner ul li:nth-child(even) .txt { padding: 0; } #brand .slogan .our-business-inner ul li:nth-child(1) .pic { width: 100%; } #brand .slogan .our-business-inner ul li:nth-child(1) .txt { width: 100%; margin: 0; } #brand .slogan .our-business-inner ul li:nth-child(4) .pic { width: 100%; } #brand .slogan .our-business-inner ul li:nth-child(4) .txt { width: 100%; margin: 0; } #brand .slogan .our-business-inner ul li:nth-child(2) { padding: 0; } #brand .slogan .our-business-inner ul li:nth-child(2) .pic { width: 100%; } #brand .slogan .our-business-inner ul li:nth-child(2) .txt { width: 100%; } #brand .slogan .our-business-inner ul li:nth-child(3) { padding: 0; } #brand .slogan .our-business-inner ul li:nth-child(3) .pic { width: 100%; } #brand .slogan .our-business-inner ul li:nth-child(3) .txt { width: 100%; } #brand .stories .ttl { background: url("../../brand/img/top_kazari01_sp.png"); background-repeat: no-repeat; background-size: 880px; background-position: bottom center; } #brand .stories .ttl h2 { font-size: 18px; padding: 50px 4.4vw 80px; } #brand .stories .ttl h2 span { font-size: 15px; margin: 0 0 10px; } #brand .stories .ttl-bg { background: url("../../brand/img/bg03.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top -7px left; } #brand .stories .ttl-bg h2 { font-size: 24px; } #brand .stories .idx-list { padding: 80px 4.4vw; } #brand .stories .idx-list ul { margin: 0 0 0 -15px; padding: 0 0 30px; } #brand .stories .idx-list ul li { width: calc(50% - 15px); margin: 0 0 40px 15px; } #brand .stories .idx-list ul li:hover { transform: scale(1.0); } #brand .stories .idx-list ul li .thumb .bg { position: absolute; bottom: -5px; right: -5px; } #brand .stories .idx-list ul li .txt { margin: 25px 0 0; } #brand .stories .idx-list ul li .txt .num { font-size: 13px; margin: 5px 0; } #brand .stories .idx-list ul li .txt .num span { font-size: 16px; } #brand .stories .idx-list ul li .txt h3 { font-size: 14px; } #brand .stories .idx-list ul li .txt .date { font-size: 10px; position: static; } #brand .stories .detail { padding: 30px 0 70px; } #brand .stories .detail .date { font-size: 18px; margin: 0 0 20px; } #brand .stories .detail .read { font-size: 16px; margin: 30px 0; padding: 0 4.4vw; } #brand .stories .detail h3 { font-size: 20px; margin: 0 0 15px; padding: 0 4.4vw; } #brand .stories .detail p { font-size: 13px; margin: 15px 0 0; padding: 0 4.4vw; } #brand .stories .detail .article-wrap { margin: 30px 0 0; } #brand .stories .detail .article-wrap article { margin: 0 0 60px; } #brand .stories .detail .article-wrap article .pic { margin: 30px auto 0; padding: 0 8.8vw; } #brand .stories .detail .wd { max-width: inherit; } #brand .stories .detail .parts { width: 90px; } #brand .stories .detail .article-wrap article .parts { width: 70px; } #brand .stories .detail .mov-wrap { max-width: calc(700px - 17.6vw); margin: 0 auto 40px; padding: 0 8.8vw; } #brand .creators .ttl-bg { background: url("../../brand/img/bg02.png") repeat top left; background-size: 25px; padding: 0 0 30px; } #brand .creators .ttl-bg h2 { font-size: 24px; margin: 0 0 20px; padding: 50px 0 0; } #brand .creators .ttl-bg ul li img { max-width: 9vw; } #brand .creators .idx-list { padding: 80px 4.4vw; } #brand .creators .idx-list ul { margin: 0 0 0 -15px; padding: 0 0 30px; } #brand .creators .idx-list ul li { width: calc(50% - 15px); margin: 0 0 40px 15px; } #brand .creators .idx-list ul li:hover { transform: scale(1.0); } #brand .creators .idx-list ul li .num { font-size: 30px; } #brand .creators .idx-list ul li .ico { width: 35px; } #brand .creators .idx-list ul li h3 { font-size: 14px; margin: 5px 0; } #brand .creators .idx-list ul li p { font-size: 11px; } #brand .creators .profile { margin: 60px 0 50px; padding: 0 8.8vw; } #brand .creators .profile .cfix { max-width: inherit; } #brand .creators .profile .pic { width: 100%; } #brand .creators .profile .txt { width: 100%; padding: 40px 0 0; } #brand .creators .profile .date { font-size: 13px; } #brand .creators .profile .name { font-size: 24px; margin: 0 0 10px; padding: 25px 0 10px; } #brand .creators .profile span { font-size: 13px; margin: 10px 0 0; } #brand .creators .qa { padding: 60px 4.4vw; } #brand .creators .qa .article-wrap article { margin: 0 0 60px; } #brand .creators .qa .article-wrap article .q { font-size: 18px; text-align: left; padding: 12px 0 8px 50px; margin: 0 0 35px; } #brand .creators .qa .article-wrap article .q .mrk { position: absolute; top: calc(50% - 15px); left: 10px; height: 30px; } #brand .creators .qa .article-wrap article .pic { width: 100%; } #brand .creators .qa .article-wrap article .txt { width: 100%; padding: 0; } #brand .creators .qa .article-wrap article .txt .txt-b { font-size: 20px !important; margin: 25px 0 10px; } #brand .creators .qa .article-wrap article .txt p { font-size: 13px; } #brand .idx-list .pager ol li { margin: 0 0 10px; } #brand .idx-list .pager ol li a { font-size: 15px; padding: 0 15px; } #brand .another-list { padding: 0 0 70px; } #brand .another-list h3 { font-size: 22px; margin: 0 0 15px; } #brand .another-list .list { overflow: hidden; } #brand .another-list .list .arw-l { position: absolute; top: calc(50% - 12px); left: 4.4vw; z-index: 3; padding: 5px 8px; border-radius: 40px; background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5); } #brand .another-list .list .arw-r { position: absolute; top: calc(50% - 12px); right: 4.4vw; z-index: 3; padding: 5px 8px; border-radius: 40px; background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);} #brand .another-list .list ul { width: 150%; } #brand .another-list .list ul li:hover { transform: scale(1.0); } #brand .another-list .list ul li .thumb { position: relative; } #brand .another-list .list ul li .num { font-size: 10vw; position: absolute; bottom: -2vw; right: -0.2vw; } /*////General classes////*/ .sp_none { display: none; } .pc_none { display: block; } } @media screen and (max-width: 320px){ #sustainability .sdgs .sdgs-inner .chara01 { width: 60px } #sustainability .sdgs .sdgs-inner .chara02 { width: 60px } } /* margin-bottom =========================================*/ .mb0 { margin-bottom:0 !important; } .mb3 { margin-bottom:3px !important; } .mb4 { margin-bottom:4px !important; } .mb5 { margin-bottom:5px !important; } .mb7 { margin-bottom:7px !important; } .mb10 { margin-bottom:10px !important; } .mb12 { margin-bottom:12px !important; } .mb15 { margin-bottom:15px !important; } .mb20 { margin-bottom:20px !important; } .mb25 { margin-bottom:25px !important; } .mb30 { margin-bottom:30px !important; } .mb40 { margin-bottom:40px !important; } .mb50 { margin-bottom:50px !important; } .mb60 { margin-bottom:60px !important; } .mb80 { margin-bottom:80px !important; } /* margin-top =========================================*/ .mt0 { margin-top:0 !important; } .mt3 { margin-top:3px !important; } .mt4 { margin-top:4px !important; } .mt5 { margin-top:5px !important; } .mt7 { margin-top:7px !important; } .mt10 { margin-top:10px !important; } .mt12 { margin-top:12px !important; } .mt15 { margin-top:15px !important; } .mt20 { margin-top:20px !important; } .mt25 { margin-top:25px !important; } .mt30 { margin-top:30px !important; } .mt40 { margin-top:40px !important; } .mt50 { margin-top:50px !important; } .mt60 { margin-top:60px !important; } .mt80 { margin-top:80px !important; } .tx9 { font-size: 9px !important; } .tx10 { font-size: 10px !important; } .tx11 { font-size: 11px !important; } .tx12 { font-size: 12px !important; } .tx13 { font-size: 13px !important; } .tx14 { font-size: 14px !important; } .tx15 { font-size: 15px !important; } .tx16 { font-size: 16px !important; } .tx18 { font-size: 18px !important; } .tx20 { font-size: 20px !important; } .tx24 { font-size: 24px !important; } .tx28 { font-size: 28px !important; } .tx32 { font-size: 32px !important; } .tx36 { font-size: 36px !important; } .tx40 { font-size: 40px !important; } .fltR { float: right; } .fltL { float: left; } .txtR { text-align: right; } .txtL { text-align: left; } .txtC { text-align: center; }