@charset "UTF-8"; @import "reset5.css"; @import "../font/greycliff/greycliff-cf-extra-bold/webfonts/greycliff-cf-extra-bold.css"; @import "../font/greycliff/greycliff-cf-extra-bold-oblique/webfonts/greycliff-cf-extra-bold-oblique.css"; @import "../font/greycliff/greycliff-cf-bold/webfonts/greycliff-cf-bold.css"; @import "../font/greycliff/greycliff-cf-bold-oblique/webfonts/greycliff-cf-bold-oblique.css"; @import "../font/greycliff/greycliff-cf-demi-bold/webfonts/greycliff-cf-demi-bold.css"; @import "../font/greycliff/greycliff-cf-demi-bold-oblique/webfonts/greycliff-cf-demi-bold-oblique.css"; @import "../font/greycliff/greycliff-cf-medium/webfonts/greycliff-cf-medium.css"; @import "../font/greycliff/greycliff-cf-medium-oblique/webfonts/greycliff-cf-medium-oblique.css"; @import "../font/greycliff/greycliff-cf-regular/webfonts/greycliff-cf-regular.css"; @import "../font/greycliff/greycliff-cf-regular-oblique/webfonts/greycliff-cf-regular-oblique.css"; @import "../font/greycliff/greycliff-cf-light/webfonts/greycliff-cf-light.css"; @import "../font/greycliff/greycliff-cf-light-oblique/webfonts/greycliff-cf-light-oblique.css"; body { color:#42425d; line-height:1; padding: 0; position: relative; min-height: 100%; overflow-x:hidden; background: #fff; } html { min-height: 100%; } * html body { font-family: 'GreycliffCF-Regular',"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", Helvetica, Arial, Sans-Serif; } *:first-child+html body { font-family: 'GreycliffCF-Regular',"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "Osaka", "MS Pゴシック", "MS PGothic", Helvetica, Arial, Sans-Serif; } html:not(:target) body { font-family: 'GreycliffCF-Regular', Helvetica, Arial, Sans-Serif;} * {word-wrap: break-word; } img { -ms-interpolation-mode: bicubic; } /* !font-size 12px default setting */ body { font-size:14px; line-height: 2.0; letter-spacing: 0.08em } *:first-child+html body { font-size:77%;} * html body { font-size:77%;} h1,h2,h3,h4,h5 { color:#25426b; } /* !clearfix */ hr { display: none; } .cfix { zoom:1; } .cfix:after{ content:""; clear:both; display:block; height:0; font-style:italic } /* スクロールバーの有無によるズレ対策 */ html { overflow-y: scroll; } img { vertical-align:bottom; } /* 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; } .mb35 { margin-bottom:35px !important; } .mb40 { margin-bottom:40px !important; } .mb50 { margin-bottom:50px !important; } .mb60 { margin-bottom:60px !important; } .mb80 { margin-bottom:80px !important; } .mb1em { margin-bottom: 1em !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; } .mt35 { margin-top:35px !important; } .mt40 { margin-top:40px !important; } .mt50 { margin-top:50px !important; } .mt60 { margin-top:60px !important; } .ml30 { margin-left:30px !important; } .mr5 { margin-right:5px !important; } .mr10 { margin-right:10px !important; } .mr20 { margin-right:20px !important; } .mr40 { margin-right:40px !important; } .mr80 { margin-right:80px !important; } /* padding-top =========================================*/ .pt0 { padding-top:0 !important; } .pt3 { padding-top:3px !important; } .pt4 { padding-top:4px !important; } .pt5 { padding-top:5px !important; } .pt7 { padding-top:7px !important; } .pt10 { padding-top:10px !important; } .pt12 { padding-top:12px !important; } .pt15 { padding-top:15px !important; } .pt20 { padding-top:20px !important; } .pt25 { padding-top:25px !important; } .pt30 { padding-top:30px !important; } .pt35 { padding-top:35px !important; } .pt40 { padding-top:40px !important; } .pt50 { padding-top:50px !important; } .pt60 { padding-top:60px !important; } .tx9 { font-size: 9px } .tx10 { font-size: 10px } .tx11 { font-size: 11px } .tx12 { font-size: 12px } .tx13 { font-size: 13px } .tx14 { font-size: 14px } .tx15 { font-size: 15px } .tx16 { font-size: 16px } .tx18 { font-size: 18px } .tx20 { font-size: 20px } .tx24 { font-size: 24px } .fltR { float: right; } .fltL { float: left; } .txtR { text-align: right; } .txtL { text-align: left; } .txtC { text-align: center; } .pc_none { display: none } .sp_none { display: block } /* !Links */ a { cursor: pointer } a:link { color: #25426b; text-decoration: none } a:visited { color: #25426b; text-decoration: none } a:hover { color: #25426b; text-decoration: underline } a:active { color: #25426b; text-decoration: none } .btn-contact-form { text-align: center } .btn-contact-form a { padding: 1.5em 0; width: 400px; display: block; margin: 2em auto; background: #d4d8df; border-radius: 5px } .btn-contact-form a:hover { color: #fff; background: #25426b } @media screen and (max-width: 780px) { .contact p { padding: 0 20px } .btn-contact-form a { width: 80%; } } html { } #wrapper { width: 100%; text-align: center; min-height: 100% } /* header */ #header { background-color: #f7f6f3; width: 100%; height: 40px; padding: 20px 0; text-align: left; position: fixed; left: 0; top: 0; z-index: 99; position: fixed; left: 0; top: 0 } #header h1 { margin: 1px 40px; } #header h1 img { height: 38px } #header #globalNav { position: absolute; left: 220px; top: 0; width: 866px } #header #globalNav li { float: left } #header #globalNav li a { padding: 24px 20px; display: block } /* #header #h_sns_btn { position: absolute; right: 154px; top: 26px } #header #h_sns_btn li { float: left; margin: 0 5px } */ #header #h_sns_btn { position: absolute; right: 165px; top: 8px; width:80px; display: none } #header #h_sns_btn li { float: left; margin: 0px; } #header #h_sns_btn li a { width:40px; display:inline-block; text-align:center; } #header .h_en { position: absolute; right: 100px; top: 21px } #globalNav li a { position: relative } #globalNav li a img { position: relative; z-index: 1; } #globalNav li a span { position: absolute; top: -6px; left: 0; width: 100%; height: 6px; z-index: 0 } /*#globalNav li.cur a span { top: 0 }*/ #globalNav li.gnav01 a span { background-color: #c8e2d6; } #globalNav li.gnav02 a span { background-color: #eedcc1; } #globalNav li.gnav03 a span { background-color: #e7cdd0; } #globalNav li.gnav04 a span { background-color: #cce0e4; } #globalNav li.gnav05 a span { background-color: #e4e1c1; } #globalNav li.gnav06 a span { background-color: #d8cce5; } #globalNav li.gnav07 a span { background-color: #c8d8e8; } #globalNav li.gnav08 a span { background-color: #e6d0e0; } /* main */ #main { position:relative; margin: 80px 0 0; overflow: hidden } #main .vis { position: absolute; left: 0; top: 0; width: 100%; display: none; overflow: hidden } #main .vis .credit { position: absolute; left: 40px; bottom: 30px; color: #4b3812; line-height: 1; font-size: 10px } #main .vis .viewmore { position: absolute; right: 40px; bottom: 30px; cursor: pointer } #main .vis .ln { position: absolute; right: 200px; bottom: 30px; } #main .vis .pos { position: absolute; left: 0; bottom: 0 } #main .vis01 .copy { position: absolute; width: 647px; left: 50%; top: 54%; margin: -70px 0 0 -323px; } #main .vis01 .copy .t01 { margin: 0 0 6px; opacity: 0; margin-top: 15px; } #main .vis01 .copy .line { margin: 0 0 20px; opacity: 0 } #main .vis01 .copy .t02 { opacity: 0; margin-top: 10px; } #main .vis02 .copy { position: absolute; width: 307px; left: 76.7%; top: 71.5%; margin: -140px 0 0 -153px; } #main .vis02 .copy .t01 { margin: 0 0 16px; opacity: 0; margin-top: 20px; } #main .vis02 .copy .t02 { opacity: 0; margin-top: 10px; color: #fff; font-size: 16px; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em } #main .vis03 .copy { position: absolute; width: auto; left: 7.2%; top: 10%; margin: 0; } #main .vis03 .copy .t01 { margin: 0 0 16px; opacity: 0; margin-top: 20px; float: left } #main .vis03 .copy .t02 { opacity: 0; margin-top: 10px; margin-left: 40px; padding-top: 38px; color: #25426b; font-size: 16px; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em; float: left } #main .vis04 .copy { position: absolute; width: 307px; right: 5%; top: 18%; margin: 0; } #main .vis04 .copy .t01 { margin: 0 0 16px; opacity: 0; margin-top: 20px; } #main .vis04 .copy .t02 { opacity: 0; margin-top: 10px; color: #fff; font-size: 16px; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em } #main .vis05 .copy { position: absolute; width: 321px; left: 81.9%; top: 50%; margin: -62px 0 0 -160px; } #main .vis05 .copy .t01 { margin: 0 0 16px; opacity: 0; margin-top: 20px; } #main .vis05 .copy .t02 { opacity: 0; margin-top: 10px; color: #4b3812; font-size: 16px; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em } #main .vis02 .credit { left: inherit; right: 40px; bottom: 30px; color: #ccc; } /*#main .vis03 .credit { color: #25426b } #main .vis05 .credit { color: #4b3812 }*/ #main #bullets { position: absolute; left: 50%; bottom: 10px; z-index: 10; margin-left: -108px } #main #bullets li { float: left; padding: 10px; cursor: pointer } /* What'S New */ #whatsnew { padding: 18px 0; background: url(../img/dotline01.png) repeat-x bottom transparent; background-color: #e3ece9; } #whatsnew li { float: left; text-align: left; } #whatsnew li .news_inner { position: relative; padding: 0 20px 0 130px; cursor: pointer; min-height: 80px } #whatsnew li .news_thumb { position: absolute; left: 30px; top: 0; /* border-radius */ border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; /* box-shadow */ box-shadow:1px 1px 0px 0px #c4c0bc; -moz-box-shadow:1px 1px 0px 0px #c4c0bc; -webkit-box-shadow:1px 1px 0px 0px #c4c0bc; } #whatsnew li .date { color: #2bad96; font-family: 'GreycliffCF-Bold'; } #whatsnew .link_more { text-align: right; color: #2bad96; font-family: 'GreycliffCF-Bold'; padding: 5px 20px 0 } /* Feature */ #feature { padding: 50px; background: #fff } /* Brand-New */ #brandnew { padding: 60px 0 10px; background: url(../img/brandnew_bg.jpg) no-repeat bottom; background-size: cover; border-top: solid 1px #f1eee7 } #brandnew h3 { margin: 0 0 40px } #brandnew ul { min-width: 1180px; margin: 0 auto } #brandnew li { /*float: left;*/ display: inline-block; } #brandnew li a { display: block } /*#brandnew ul { width: 940px; margin: 0 auto } #brandnew li { float: left; } #brandnew li.new02 { margin-right: 80px } #brandnew li a { display: block }*/ /* top_pickup */ #top_pickup { padding-bottom: 60px } #top_pickup .idx li h3 { font-weight: normal; font-size: 18px; font-family: 'GreycliffCF-Medium'; letter-spacing: 0.16em } #top_pickup .idx li.idx00 h3 { background-color: #cacac9 } #top_pickup .idx li.idx01 h3 { background-color: #e7cdd0 } #top_pickup .idx li.idx02 h3 { background-color: #e2ddd1 } #top_pickup .idx li.idx03 h3 { background-color: #ddd6dd } #top_pickup .idx li.idx04 h3 { background-color: #d3dfd4 } #top_pickup .idx li.idx05 h3 { background-color: #cee1e5 } #top_pickup .idx li.idx06 h3 { background-color: #ebd7b9 } /* PADICO BLOG */ #padicoblog { padding: 40px 0 30px; background: url(../img/dotline01.png) repeat-x top transparent; background-color: #e0ebee; } #padicoblog li { float: left; text-align: left; } #padicoblog li .news_inner { position: relative; padding: 0 20px 0 130px; cursor: pointer; min-height: 80px } #padicoblog li .news_thumb { position: absolute; left: 30px; top: 0; /* border-radius */ border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; /* box-shadow */ box-shadow:1px 1px 0px 0px #c4c0bc; -moz-box-shadow:1px 1px 0px 0px #c4c0bc; -webkit-box-shadow:1px 1px 0px 0px #c4c0bc; } #padicoblog li .date { color: #065098; font-family: 'GreycliffCF-Bold'; } #padicoblog .link_more { text-align: right; color: #2bad96; font-family: 'GreycliffCF-Bold'; padding: 5px 20px 0 } /* top_products */ #top_products { padding: 60px 20px 80px; background: url(../img/products_bg.jpg) no-repeat top; background-size: cover; /* box-shadow */ box-shadow:1px 1px 5px 0px #e0dcd7; -moz-box-shadow:1px 1px 5px 0px #e0dcd7; -webkit-box-shadow:1px 1px 5px 0px #e0dcd7; } #top_products h3 { margin: 0 0 30px } #top_products li { float: left; text-align: center; margin: 0 0 30px } #top_products li a { display: block } .btn_more { width: 240px; margin: 0 auto; text-align: center } .btn_more a { padding: 6px 0; border: solid 2px #25426b; display: block; font-size: 13px; letter-spacing: 0.16em; font-family: 'GreycliffCF-DemiBold'; } .btn_more a:hover { background-color: #25426b; color: #fff } /* extra */ #extra { padding: 30px 10px; margin: 0 auto } #extra li { float: left; margin: 0 10px; overflow: hidden } #extra li a { padding: 30px 0; display: block } #extra li.ex01 a { background-color: #ebe8d2 } #extra li.ex02 a { background-color: #ddd6dd } /* follow_us #follow_us { padding: 80px 0; background: url(../img/dotline01.png) repeat-x bottom transparent; } #follow_us h3 { margin: 0 0 16px } #follow_us #f_sns_btn { width: 228px; margin: 0 auto } #follow_us #f_sns_btn li { float: left; margin: 0 6px } */ /* follow_us */ #follow_us { padding: 80px 0; background: url(../img/dotline01.png) repeat-x bottom transparent; } #follow_us h3 { margin: 0 0 16px } #follow_us #f_sns_btn { margin: 0 auto; font-size:0; } #follow_us #f_sns_btn li { display:inline-block; margin: 0 6px } /* projects */ #projects { margin: 0 0 15px; background: #fff } #projects li { float: left; background: url(../img/dotline01.png) repeat-x bottom transparent; } #projects li a { padding: 20px 0; background: url(../img/dotline02.png) repeat-y right transparent; display: block } #projects li.prj03 a, #projects li.prj06 a { background: none; } #projects li a:hover { background-color: #f0ede7 } /* footer */ #footer { padding: 40px; background-color: #cedbe4; text-align: left } #footer .sitemap {} #footer .sitemap ul.clm { float: left; width: 16%; } #footer .sitemap ul.clm2 { float: left; width: 25%; } #footer .sitemap ul.home { float: left; width: 11%; } #footer .sitemap ul.clm li { margin-bottom: 24px } #footer .sitemap ul.clm li li, #footer .sitemap ul.clm2 li li { margin-bottom: 0; font-size: 12px } #footer .sitemap ul ul { margin-top: 1em } #footer .sitemap ul li.cat { font-family: 'GreycliffCF-Bold'; } #footer .sitemap ul li.cat li { font-family: 'GreycliffCF-Regular'; } #footer .sitemap #sm_sns_btn {} #footer .sitemap #sm_sns_btn li { float: left; margin-right: 20px} #footer p { margin-top: 40px; font-family: 'GreycliffCF-Medium'; } #footer p span { margin-left: 2em } /* sns */ #sns ul { background:#f7f6f4; border-radius:10px 0 0 10px; position:fixed; top:95px; right:0; z-index: 99; -moz-box-shadow: -2px 0px 10px 2px rgba(176, 176, 176, 0.3); -webkit-box-shadow: -2px 0px 10px 2px rgba(176, 176, 176, 0.3); -ms-box-shadow: -2px 0px 10px 2px rgba(176, 176, 176, 0.3); box-shadow: -2px 0px 10px 2px rgba(176, 176, 176, 0.3); } #sns ul li a img { padding:3px 10px; } #sns ul li:first-child a img { padding:10px 10px 3px; } #sns ul li:last-child a img { padding:3px 10px 10px; } /* pagetop */ #pagetop { position: fixed; right:20px; bottom: -60px; z-index: 9000; } #sp_menu { position: fixed; right: 50px; top: 0; z-index: 9000; display: none } #loader { position: fixed; top: 50%; left: 50%; margin: -40px 0 0 -40px } #tab_request { position: fixed; top: 0; right: 0; z-index: 9000; } span.nw { font-weight: normal } .wid { width: 100% } .wid_2 { width: 50% } .wid_3 { width: 33.3% } .wid_4 { width: 25% } .wid_5 { width: 20% } .wid_6 { width: 16.6% } .wid_7 { width: 14.2857% } .wid_8 { width: 12.5% } /* Arigato Cellebraiton 2019.04.08 */ #arigato { padding: 0 0 80px; background: url(../img/dotline01.png) repeat-x bottom transparent; background-color: #eff2f4 } #arigato .arigato-inner { padding: 120px 0 100px; background: url("../../arigato/img/arigato_bg.jpg") no-repeat bottom; background-size: cover; position: relative; overflow: hidden; border-top:30px solid #c2b070; } #arigato .arigato-inner h2 { margin-bottom: 40px; margin-top: 80px; opacity: 0 } #arigato .arigato-inner p { font-size: 18px; color: #452a19; letter-spacing: 0.2em; margin-bottom: 40px; margin-top: 80px; opacity: 0 } #arigato .arigato-inner .tag { position: absolute; left: 8%; top: -500px } #arigato .campaigns {} #arigato .campaigns h2 { margin: -40px 0 20px; position: relative; z-index: 10 } #arigato .campaigns ul { padding: 0 25px } #arigato .campaigns ul li { float: left; width: 50% } #arigato .campaigns ul li .cam { padding: 25px; position: relative } #arigato .campaigns ul li .cam .fu { position: absolute; left: 0; top: 0 } #arigato .campaigns ul li a { display: block; overflow: hidden } #arigato .campaigns ul li h3 { font-size: 22px; color: #b63232; line-height: 1.6em; padding: 20px 0 0 } #arigato .campaigns ul li h3 span { font-size: 18px; color: #6f5a4c } #arigato-top { padding: 0; background: url(../img/dotline01.png) repeat-x bottom transparent; background-color: #eff2f4 } #arigato-top .arigato-inner { padding: 60px 0 20px; background: url("../img/arigato_bg.jpg") no-repeat bottom; background-size: cover; position: relative; overflow: hidden } #arigato-top .arigato-inner h2 { margin-bottom: 40px; margin-top: 80px; opacity: 0 } #arigato-top .arigato-inner p { font-size: 18px; color: #452a19; letter-spacing: 0.2em; margin-bottom: 40px; margin-top: 80px; opacity: 0 } #arigato-top .arigato-inner .tag { position: absolute; left: 1%; top: -500px; z-index: 10 } #arigato-top .campaigns { position: relative } #arigato-top .campaigns ul { padding: 0 25px } #arigato-top .campaigns ul li { float: left; width: 50% } #arigato-top .campaigns ul li .cam { padding: 25px; position: relative } #arigato-top .campaigns ul li .cam .fu { position: absolute; left: 0; top: 0 } #arigato-top .campaigns ul li a { display: block; overflow: hidden } #arigato-top .campaigns ul li h3 { font-size: 22px; color: #b63232; line-height: 1.6em; padding: 20px 0 0 } #arigato-top .campaigns ul li h3 span { font-size: 18px; color: #6f5a4c } /* AF banner 2019.05.23 */ #top_pickup .af_bnrs li h3 { font-size: 16px !important } /* Smile project 2020.04.01 */ #smile { padding: 0 0 80px; background: url(../img/dotline01.png) repeat-x bottom transparent; background-color: #f2ece3 } #smile .smile-inner { padding: 70px 0 130px; position: relative; } #smile .smile-inner h2 { margin-bottom: 50px; } #smile .smile-inner p { font-size: 18px; color: #452a19; font-weight:600; letter-spacing: 0.2em; line-height:1.8em; margin-bottom: 40px; } #smile .smile-box { position:relative; width:1084px; margin:0 auto; padding:100px 0 60px; } #smile .smile-bg { position:absolute; top:0; left:50%; margin:0 0 0 -542px; z-index:1 } #smile .smile-tx { position:relative; z-index:2; } #smile .pic { position:absolute; bottom:-100px; right:-90px; z-index:3; } #smile .kazari01 { position:absolute; top:25px; left:-70px; z-index:3; } #smile .kazari02 { position:absolute; bottom:-40px; left:-65px; z-index:3; } #smile .kazari03 { position:absolute; top:35px; right:-45px; z-index:3; } #smile .campaigns {} #smile .campaigns ul { padding: 0 25px } #smile .campaigns ul li { float: left; width: 50% } #smile .campaigns ul li .cam { padding: 25px; position: relative } #smile .campaigns ul li .cam .fu { position: absolute; left: 0; top: 0 } #smile .campaigns ul li a { display: block; overflow: hidden } #smile .campaigns ul li h3 { font-size: 22px; color: #485a97; line-height: 1.6em; padding: 20px 0 0 } #smile .campaigns ul li h3 span { font-size: 18px; color: #211815 } #smile .campaigns ul li:nth-child(2) h3 { color: #bc3d3a } #smile .campaigns ul li:nth-child(3) h3 { color: #e79a20 } #smile .campaigns ul li:nth-child(4) h3 { color: #cbb60d } /* 下層コンテンツ */ #main .credit { position: absolute; left: 40px; bottom: 15px; color: #d7d7d7; line-height: 1; font-size: 11px } #contents { padding-bottom: 80px; background: url(../img/dotline01.png) repeat-x bottom transparent; background-color: #f1eee7; } #top #contents { padding-bottom: 0 } #contents .categories { background-color: #ebdddb; text-align:center } #contents .categories ul { margin: 0 auto; } #contents .categories li { float: left } #contents .categories li.cur { font-weight: bold } #contents .categories li a { display: block; padding: 20px 30px; position: relative; font-size: 12px } #contents .categories li a div { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 0; background-color: #f0ede7; opacity: 0 } #contents .categories li.cur a div { position: absolute; top: 5px; left: 0; width: 100%; height: 4px; z-index: 0; background-color: #e7cdd0; opacity: 1; } #contents .categories li a span { z-index: 10; position: relative } #contents .contents_inner { margin: 40px auto 0; opacity: 0 } #contents .contents_inner .idx { padding: 0 10px; margin: 0 auto } #contents .contents_inner .idx li { float: left; margin: 0 10px 20px; overflow: hidden } #contents .contents_inner .idx li a { position: relative; display: block } #contents .contents_inner .idx li h3 { padding: 18px 0; position: relative } #contents .contents_inner .idx li a span.logo { position: absolute; left: 15px; top: 15px; display: block } #contents .contents_inner .idx li a span.en { position: absolute; left: 30px; top: 20px; font-size: 18px; line-height: 1; font-family: 'GreycliffCF-Bold'; letter-spacing: 0.1em; display: block; z-index: 10 } .idx01 h3, .idx02 h3, .idx03 h3, .idx04 h3 { background-color: #e7cdd0 } .idx05 h3, .idx06 h3, .idx07 h3, .idx08 h3, .idx09 h3, .idx10 h3 { background-color: #d4d8df } /*#contents .contents_inner .idx li.idx01 h3 { background-color: #e7cdd0 } #contents .contents_inner .idx li.idx02 h3 { background-color: #f5d2bf } #contents .contents_inner .idx li.idx03 h3 { background-color: #cddee4 } #contents .contents_inner .idx li.idx04 h3 { background-color: #d9e9c7 } #contents .contents_inner .idx li.idx05 h3 { background-color: #e8eac7 } #contents .contents_inner .idx li.idx06 h3 { background-color: #cae8da } #contents .contents_inner .idx li.idx07 h3 { background-color: #d7cde3 } #contents .contents_inner .idx li.idx08 h3 { background-color: #f1c1c4 } #contents .contents_inner .idx li.idx09 h3 { background-color: #cbe6e7 } #contents .contents_inner .idx li.idx10 h3 { background-color: #d4d8df }*/ #contents .contents_inner .category_tit {} #contents .contents_inner .category_tit h2 { margin-bottom: 20px; font-size: 24px; letter-spacing: 0.6em; } #contents .contents_inner .category_tit h2 img { margin-bottom: 10px } #contents .contents_inner .category_tit h2 span { font-size: 13px; letter-spacing: 0.2em; } #contents .contents_inner .goto_brand_site { border: solid 4px #fff; margin-bottom: 10px; line-height: 1 } #contents .contents_inner .goto_brand_site a { display: block; padding: 12px 0; font-family: 'GreycliffCF-Bold'; } #contents .contents_inner .goto_brand_site a:hover { background-color: #fff } #contents .contents_inner .sub_category { background-color: #fff; padding: 6px; margin-bottom: 30px; /* box-shadow */ box-shadow:1px 1px 0px 0px #c4c0bc; -moz-box-shadow:1px 1px 0px 0px #c4c0bc; -webkit-box-shadow:1px 1px 0px 0px #c4c0bc; } #contents .contents_inner .sub_category li { float: left } #contents .contents_inner .sub_category li a { display: block; padding: 10px 0; position: relative } #contents .contents_inner .sub_category li a div { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 0; background-color: #ccc; } #contents .contents_inner .sub_category li.cur a div { height: 100%; } #contents #cat01 .sub_category li a div { background-color: #e7cdd0 } #contents .contents_inner .sub_category li a span { z-index: 1; position: relative } #contents .contents_inner .thumbs { padding: 0 0 40px } #contents .contents_inner .thumbs li { float: left; width: 20%; opacity: 0; position: relative } #contents .contents_inner .thumbs li a { padding: 1px; display: block; overflow: hidden; position: relative } #contents .contents_inner .thumbs li a img { /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } #contents .contents_inner .thumbs li a .ico_new { position: absolute; right: 10px; top: 10px; } #contents .contents_inner .detail { width: 900px; margin: 0 auto 80px; background-color: #fff; padding: 10px } #contents .contents_inner .detail .head { margin: 0 } #contents .contents_inner .detail .head .l { float: left; width:49.8%; border-top: solid 2px #e7cdd0; margin: 0 0 20px } #contents .contents_inner .detail .head .r { float: right; width:49.8%; border-top: solid 2px #dadada; text-align: left; margin: 0 0 40px } #contents .contents_inner .detail .head .l .det_img { width: 440px; height: 550px; position: relative; overflow: hidden } #contents .contents_inner .detail .head .l .det_img img { position: absolute; left: 0; top: 0; display: none } #gal a img{border:2px solid white;} #gal a.active img{border:2px solid #e7cdd0 !important;} #contents .contents_inner .detail .head .l .det_thumbs { padding-left: 40px; text-align: left } #contents .contents_inner .detail .head .l .det_thumbs li { float: left; margin-right: 6px; border: solid 1px #dadada; padding: 1px; cursor: pointer } #contents .contents_inner .detail .head .l .det_thumbs li.cur { border: solid 2px #e7cdd0; padding: 0 } #contents .contents_inner .detail .head .r h2 { padding: 25px 25px 32px; font-size:18px; letter-spacing: 0.2em; background: url(../img/products_line.png) bottom no-repeat; background-size: contain } #contents .contents_inner .detail .head .r h2 span { font-size: 13px; font-weight: normal; letter-spacing: 0.1em } #contents .contents_inner .detail .head .r h3.copy { padding: 25px 25px 0; font-weight: normal; font-size: 14px } #contents .contents_inner .detail .head .r .icon { padding: 25px 25px 0; } #contents .contents_inner .detail .head .r p.spec { padding: 25px; font-size: 13px } #contents .contents_inner .detail .head .r p.price { padding: 0 25px 15px; font-size: 22px; color:#25426b; letter-spacing: 0.1em } #contents .contents_inner .detail .head .r .btn_buy { margin-left: 25px } #contents .contents_inner .detail .head .r .btn_buy a { display: block; width: 250px; padding: 10px; background-color: #e7cdd0; text-align: center; font-weight: bold; /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } #contents .contents_inner .detail .head .r .btn_buy .cap { font-size: 12px; margin-top: 5px } #contents .contents_inner .detail .body { padding: 0 40px 40px; text-align: left } #contents .contents_inner .detail .body .sec { padding: 0 0 30px; margin: 0 0 30px; background: url(../img/dotline03.png) repeat-x left bottom } #contents .contents_inner .detail .body .sec h3 { margin-bottom: 25px } #contents .contents_inner .detail .body .feature li { float: left; width: 170px; margin: 0 40px 20px 0; position: relative } #contents .contents_inner .detail .body .feature li .arw { position: absolute; left: 187px; top: 86px; width: 8px; height: 13px; border:none; } #contents .contents_inner .detail .body .feature li img { border: solid 2px #dadada; margin-bottom: 10px } #contents .contents_inner .detail .body .feature h3 { font-size: 16px; } #contents .contents_inner .detail .body .feature h4 { font-size: 14px; margin: 0 0 10px } #contents .contents_inner .detail .body .howto li { float: left; width: 170px; margin: 0 40px 20px 0; position: relative } #contents .contents_inner .detail .body .howto li img { border: solid 2px #dadada; margin-bottom: 10px } #contents .contents_inner .detail .body .howto li .arw { position: absolute; left: 187px; top: 86px; width: 8px; height: 13px; background: url(../img/arw03.png) no-repeat; background-size: contain } #contents .contents_inner .detail .body .howto h4 { font-size: 14px; margin: 0 0 10px } #contents .contents_inner .detail .body .gallery li { float: left; width: 25%; overflow: hidden } #contents .contents_inner .detail .btn_backto { line-height: 1 } #contents .contents_inner .detail .btn_backto a { display: block; padding: 15px 0; border: solid 3px #e7cdd0; text-align: center } #contents .contents_inner .detail .btn_backto a:hover { background-color: #e7cdd0 } #contents .contents_inner .detail .head_1c { margin: 0 0 40px; text-align: left } #contents .contents_inner .detail .head_1c .l { float: left; width:49.8%; border-top: solid 2px #e7cdd0; height: 2px } #contents .contents_inner .detail .head_1c .r { float: right; width:49.8%; border-top: solid 2px #dadada; height: 2px } #contents .contents_inner .detail .head_1c .tit { padding: 0 40px; background: url(../img/products_line.png) bottom repeat-x; background-size: 50% } #contents .contents_inner .detail .head_1c .tit h2 { padding: 25px 0 32px; font-size:18px; letter-spacing: 0.2em; } #contents .contents_inner .detail .head_1c .tit h2 span { font-size: 13px; font-weight: normal; letter-spacing: 0.1em } #contents .contents_inner .detail .head_1c p.read { padding: 25px 40px 0 } #contents .contents_inner .container { padding: 0 10px; margin: 0 auto } #contents .pager { padding: 40px 0; text-align: center; position: relative } #contents .pager p a { padding: 10px 15px; margin: 0 5px } #contents .pager p a.cur { background-color: #fff; font-family: 'GreycliffCF-Bold'; /* border-radius */ border-radius:18px; -moz-border-radius:18px; -webkit-border-radius:18px; } #contents .pager .pager_next { position: absolute; right: 0; top: 30px; line-height: 41px; font-size: 16px; font-family: 'GreycliffCF-BoldOblique'; } #contents .pager .pager_prev { position: absolute; left: 0; top: 30px; line-height: 41px; font-size: 16px; font-family: 'GreycliffCF-BoldOblique'; } #lay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/gal_bg.png); text-align: center; z-index: 9001; display: none } #lay .photo { opacity: 0; margin-top: 0; } #lay .next { position: absolute; right: 30px; top: 50%; margin-top: -30px; cursor: pointer } #lay .prev { position: absolute; left: 30px; top: 50%; margin-top: -30px; cursor: pointer } #lay .close { position: absolute; right: 30px; top: 30px; cursor: pointer } /*　新着情報　*/ #news .bigtit { background-color: #c8e2d6; padding: 16px 0; } #news #contents .categories { background-color: #dce8de; text-align:center } #news #contents .categories li a { display: block; padding: 20px 50px; position: relative; font-size: 14px } #news #contents .categories li.cur a div { background-color: #c8e2d6; } #news .news_idx { width: 920px; margin: 40px auto; text-align: left } #news .news_idx li { padding: 0 0 2px; background: url(../img/news_line02.png) repeat-x bottom; position: relative } #news .news_idx li .news_inner { position: relative; padding: 30px 150px 30px 120px; cursor: pointer } #news .news_idx li .news_thumb { position: absolute; left: 10px; top: 50%; margin-top: -40px; /* border-radius */ border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; /* box-shadow */ box-shadow:1px 1px 0px 0px #c4c0bc; -moz-box-shadow:1px 1px 0px 0px #c4c0bc; -webkit-box-shadow:1px 1px 0px 0px #c4c0bc; } #news .news_idx li .date { color: #2bad96; font-family: 'GreycliffCF-Bold'; } #news .news_idx li .cat { position: absolute; right: 10px; top: 50%; line-height: 1; margin-top: -7px; font-family: 'GreycliffCF-RegularOblique'; } #news .news_idx li .cat a:link { color: #2bad96; text-decoration: underline } #news .news_idx li .cat a:visited { color: #2bad96; text-decoration: none } #news .news_idx li .cat a:hover { color: #2bad96; text-decoration: none } #news .news_idx li .cat a:active { color: #2bad96; text-decoration: none } #news .detail { text-align: left; margin-bottom: 0 !important } #news #contents .contents_inner .detail .body { padding: 0 40px 80px; text-align: left } #news .detail .news_tit { position: relative } #news .detail .news_tit h2 { padding: 30px; font-size: 18px } #news .detail .news_tit span.line { display: block; width: 100%; height: 5px; background: url(../img/news_line01.png) no-repeat; background-size: contain } #news .detail .news_tit .news_thumb { position: absolute; right: 10px; top: 10px; /* border-radius */ border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; /* box-shadow */ box-shadow:1px 1px 0px 0px #c4c0bc; -moz-box-shadow:1px 1px 0px 0px #c4c0bc; -webkit-box-shadow:1px 1px 0px 0px #c4c0bc;} #news .detail .date { color: #2bad96; font-family: 'GreycliffCF-Bold'; margin: 30px 0 } #news .detail .btn_news {} #news .detail .btn_news a { display: block; padding: 10px 0; border: solid 3px #c8e2d6; text-align: center } #news .detail .btn_news a:hover { background-color: #c8e2d6 } #news #contents .pager { width: 920px; margin: 0 auto 80px } /*　Pick up・特集　*/ #pickup .bigtit { background-color: #ead7b9; padding: 16px 0; margin-top: 80px; } #pickup .contents_inner { padding:0 60px; } #pickup .categories { background:#efe3cf; } #pickup .categories li.cur a div { background-color:#ead7b9; } #pickup .ico_new { position:absolute; top:10px; right:10px; } #pickup .pickup_idx { padding-bottom:80px; } #pickup .pickup_idx .box_2clm { margin:0 0 100px 0; } #pickup .pickup_idx .box_2clm ul li { width:50%; float:left; overflow: hidden; } #pickup .pickup_idx .box_2clm ul li a { position: relative; display: block } #pickup .pickup_idx .box_2clm ul li h3 { background:#f1eee7; position:relative; padding:20px 0 0 0; font-size:16px; letter-spacing:0.4em; } #pickup .pickup_idx .contents_inner { padding: 0 } #pickup .pickup_idx .contents_inner .idx01 h3 { background:#ead7b9; font-size:18px; letter-spacing:0.4em; } #pickup .pickup_idx .contents_inner .idx02 h3 { background:#d5d8de; font-size:18px; letter-spacing:0.4em; } #pickup .pickup_idx .contents_inner h4 { margin:0 0 30px 0; } #pickup .interview_idx { margin: 0 auto; padding: 10px 0 0 } #pickup .interview_idx ul { } #pickup .interview_idx li { width: 33.3%; float: left; } #pickup .interview_idx li .idx_inner { padding: 0 25px 80px } #pickup .interview_idx li .idx_inner a { overflow: hidden; display: block } #pickup .interview_idx li .idx_inner h3 { text-align: left; font-size: 17px; font-weight: 200; margin: 20px 0 0 } #pickup .interview_idx li .idx_inner h3 span { font-size: 14px; font-weight: bold; line-height: 3 } #pickup .interview .contents_inner .sec { padding:0 !important; margin:0 0 50px !important; } #pickup .detail .head { margin: -10px -10px 0 !important } #pickup .interview .contents_inner h2 { padding: 30px 0; } #pickup .interview .contents_inner h3 { font-size:20px; } #pickup .interview .contents_inner .main p { padding:0 0 30px 0; } #pickup .interview .contents_inner .main .ph { padding:5px 0 0 0; } #pickup .interview .contents_inner .main h2 { font-size: 24px; font-weight: 200; text-align: center; letter-spacing: 0.2em; padding: 60px 0 } #pickup .interview .contents_inner .main h2 span { font-size: 15px; font-weight: bold; line-height: 3 } #pickup .interview .contents_inner .txt { padding:0 0 50px 0; } #pickup .interview .contents_inner .q { font-weight:bold; padding:0 0 10px 0; } #pickup .interview .contents_inner .member { padding:0 0 50px 0} #pickup .interview .contents_inner .wd540 { width:540px; } #pickup .interview .contents_inner .ph { padding:5px 0 50px 0; line-height:1.4; } #pickup .interview .contents_inner .wd228 { width:235px; } #pickup .interview .contents_inner .cap { font-size:11px; padding:5px 5px 0 5px ; text-align:left; } #pickup .interview .contents_inner .profile h4 { color:#ead7b9; font-size:18px; letter-spacing:3; border-bottom:2px solid #ead7b9; padding:0 0 5px 0; margin:0 0 15px 0; line-height:1; display: inline-block; } #pickup .interview .contents_inner .profile .ph { float:left; width:236px; } #pickup .interview .contents_inner .profile .name { font-weight:bold; padding:0 0 5px 0 !important; font-size:18px; } #pickup .interview .contents_inner .profile .box { padding:20px 0 0 0; } #pickup .interview .contents_inner .profile .box p { background:#eeeeee; padding:10px; } #pickup .interview .contents_inner .btn_page {position: relative; overflow: hidden; margin:-20px 0 0 0} #pickup .interview .contents_inner .btn_page ul {float:left; left:50%; position:relative;} #pickup .interview .contents_inner .btn_page li { float:left; left:-50%; position:relative;} #pickup .interview .contents_inner .btn_page a { display:block; width:50px; height:50px; text-align:center; margin:0 5px; font-size:18px; line-height:2.8; background:#eeeeee; /* box-shadow */ box-shadow:-1px -1px 0px 0px #c4c0bc inset; -moz-box-shadow:-1px -1px 0px 0px #c4c0bcinset; -webkit-box-shadow:-1px -1px 0px 0px #c4c0bc inset; /* border-radius */ border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; } #pickup .interview .contents_inner .btn_page a:hover { background:#ead7b9; } #pickup .interview .contents_inner .btn_page .current { background:#ead7b9; } #pickup .contents_inner .nobg { background: none !important; margin: 0 !important } #pickup .contents_inner { position: relative } #pickup .contents_inner .next_product { position: absolute; right: 0; top: 320px } #pickup .contents_inner .next_product a { position: relative; z-index: 1 } #pickup .contents_inner .next_product .next_thumb { position: absolute; left: 0; top: 0; width: 120px; z-index: 0 } #pickup .contents_inner .next_product .next_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #pickup .contents_inner .prev_product { position: absolute; left: 0; top: 320px } #pickup .contents_inner .prev_product a { position: relative; z-index: 1 } #pickup .contents_inner .prev_product .prev_thumb { position: absolute; left: -80px; top: 0; width: 120px } #pickup .contents_inner .prev_product .prev_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #pickup .interview .contents_inner .prev_product .prev_thumb { overflow: hidden } #pickup .interview .contents_inner .prev_product .prev_thumb img { margin-left: -30px } #pickup .interview .contents_inner .next_product .next_thumb { overflow: hidden } #pickup .interview .contents_inner .next_product .next_thumb img { margin-left: -30px } #pickup .recipe_idx { margin:0 auto; padding:10px 0 0 } #pickup .recipe_idx ul {} #pickup .recipe_idx li { width:25%; float: left; } #pickup .recipe_idx li .idx_inner { margin: 0 20px 60px; position:relative; } #pickup .recipe_idx li .idx_inner a { overflow: hidden; display: block } #pickup .recipe_idx li .idx_inner h3 { text-align: left; font-size: 14px; font-weight: 200; margin: 20px 0 0 } #pickup .btn_sort { margin:40px 5px 0;font-family: 'GreycliffCF-ExtraBold' } #pickup .btn_sort ul { text-align:center; font-size:0; } #pickup .btn_sort li { display:inline-block; font-size:12px; font-weight:600; padding:0 10px; } #pickup .btn_sort li a { background:#fff; width:250px; padding:10px 0; display:block; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; box-shadow:0px 0px 2px 2px #ebebeb; } #pickup .btn_sort li a:hover { text-decoration:none; } #pickup .btn_sort li a.cur { background:#ead7b9; } #recipes .recipe { width: 980px; margin: 0 auto 100px; text-align: left; background-color: #fff; padding: 40px 50px; } #recipes .recipe .title { margin-bottom: 40px; position: relative } #recipes .recipe .title h2 { font-size: 24px; letter-spacing: 0.2em; font-weight: normal; text-align: left } #recipes .recipe .l { float: left; width: 460px; margin: 0 30px 0 0; } #recipes .recipe .r { float: right; width: 460px; margin: 0 0 0 30px; } #recipes .recipe .l .main { background-color: #fff; padding: 15px; margin: 0 0 60px; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .l .materials {} #recipes .recipe .l .materials img { width: 210px; margin:0 0 5px; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .l .materials .img_box { float:left; width:210px; } #recipes .recipe .l .materials .img_box p { font-size:11px; } #recipes .recipe .l .materials .txt { width: 210px; float: right; display: block } #recipes .recipe .l .point { margin:30px 0 0 0; } #recipes .recipe .l .point img { width: 210px; float: left; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .l .point .tit { font-size:18px; color:#710d2f; font-weight:600; border-bottom:solid 2px #710d2f; line-height:1.0; margin:0 0 15px 0; display:inline-block; } #recipes .recipe .l .point .txt { width: 210px; float: right; display: block } #recipes .recipe .r .step { margin: 0 0 60px; position: relative } #recipes .recipe .r .step .num { } #recipes .recipe .r .step .pic { width: 210px; float: left; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .r .step .txt { width: 210px; float: right; display: block; font-size: 14px } #recipes .recipe .btns { padding: 15px; } #recipes .recipe .btn_det { background: #edd8b7; margin: 10px 0 0 ; border-radius: 4px; /* CSS3草案 */ -webkit-border-radius: 4px; /* Safari,Google Chrome用 */ -moz-border-radius: 4px; /* Firefox用 */ } #recipes .recipe .btn_det a { display: block; padding: 15px 0; position: relative; font-size:16px; text-align: center; text-decoration:none; } #recipes .recipe .btn_det a .ico { position: absolute; right: 20px; top: 50%; margin-top: -12px } #recipes .recipe .num_alt { font-size:40px; font-weight:600; font-family: 'GreycliffCF-mediumOblique'; position:absolute; top:-40px; left:10px; } #recipes .recipe .num_tx { font-size:40px; font-weight:600; font-family: 'GreycliffCF-mediumOblique'; position:absolute; top:-40px; left:10px; } /*　製品情報　*/ #products .bigtit { background-color: #e7cdd0; padding: 16px 0; } #products #contents .categories li a { padding: 20px 26px } #products .contents_inner { position: relative } #products .contents_inner .next_product { position: absolute; right: 0; top: 320px } #products .contents_inner .next_product a { position: relative; z-index: 1 } #products .contents_inner .next_product .next_thumb { position: absolute; left: 0; top: 0; width: 120px; z-index: 0 } #products .contents_inner .next_product .next_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #products .contents_inner .prev_product { position: absolute; left: 0; top: 320px } #products .contents_inner .prev_product a { position: relative; z-index: 1 } #products .contents_inner .prev_product .prev_thumb { position: absolute; left: -80px; top: 0; width: 120px } #products .contents_inner .prev_product .prev_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #cat06 .box01 { margin:0 0 80px 0; } #cat06 .box01 .l { float: left; width:49.8%; margin: 0 } #cat06 .box01 .r { float: right; width:49.8%; text-align: left; margin: 0 } #cat06 .box02 { margin:0 0 80px; } #cat06 .box02 ul { padding: 50px 0 0; } #cat06 .box02 ul li { float:left; text-align:left; } #cat06 .spec02 { line-height:1.6; padding: 25px 0 0 25px; } #cat06 .price02 { font-size: 20px; color:#25426b; letter-spacing: 0.1em; line-height:1.6; padding:0 25px; } #cat07 .box { margin:0 0 80px;} #cat07 .box ul { padding:0 0 50px 0; } #cat07 .box ul li { float:left; text-align:left; margin: 20px 0 0; } #cat07 .box ul li img { padding:0 10px 0 0; } #cat07 .box ul li p { padding: 0 !important } #cat07 .box .txt { float:left; } #cat07 .spec02 { line-height:1.6; padding: 25px 25px 0 25px; } #cat07 .spec03 { text-align:left; } #cat07 .price02 { font-size: 22px; color:#25426b; letter-spacing: 0.1em; line-height:1.6; text-align:left; } #cat07 .price03 { font-size: 20px; color:#25426b; letter-spacing: 0.1em; line-height:1.6; text-align:left; } #cat07 .box .cap { font-size:11px; text-align:right; padding:30px 0 0 0; } #cat07 .chart { text-align:left; padding:50px 0 0 0; } .img_a { zoom:1; } .img_a:after{ content:""; clear:both; display:block; height:0; font-style:italic } .img_a img { margin: 0 20px 0 0 } .img_a .fltL { width: 280px; margin: 0 20px 0 0 } .img_l .fltL { float: left; margin: 0 20px 0 0 } .free_clm2 ul li { width:50%; float:left; margin:0 0 30px; } .free_clm2 ul { margin:0 0 0 -30px; } .free_clm2 ul li .inner { margin:0 0 0 30px; } .free_clm2 ul li .box { border:1px solid #ddd; box-sizing:border-box; } .free_clm2 ul li p { margin:10px 0 0; } .free_clm3 ul li { width:33.333%; float:left; margin:0 0 30px; } .free_clm3 ul { margin:0 0 0 -30px; } .free_clm3 ul li .inner { margin:0 0 0 30px; } .free_clm3 ul li .box { border:1px solid #ddd; box-sizing:border-box; } .btn_backto_idx a { display: block; padding: 20px 0; border: solid 4px #fff; text-align: center; font-family: 'GreycliffCF-Bold'; font-size: 18px; line-height: 1 } .btn_backto_idx a:hover { background-color: #fff } #contents .contents_inner .detail .btn_buy a { display: block; width: 250px; padding: 10px; background-color: #e7cdd0; text-align: center; font-weight: bold; /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } #products .box_clm2 ul { margin:0 0 0 -40px; } #products .box_clm2 ul li { width:50%; float:left; } #products .box_clm2 ul li .inner { margin:0 0 0 40px; } #products .box_clm2 h3 { font-size:16px; margin:0 0 10px 0 !important; } #products .box_clm2 h3 .num { font-size:22px; } #products .box_clm2 .red { color:#F00; } #products .box_clm3 ul { margin:0 0 0 -40px; } #products .box_clm3 ul li { width:33.333%; float:left; } #products .box_clm3 ul li .inner { margin:0 0 0 40px; } #products .box_clm3 h3 { font-size:16px; margin:0 0 10px 0 !important; } #products .box_clm3 h3 .num { font-size:22px; } #products .box_clm3 .red { color:#F00; } .btn_miniature_sheet a { font-size:16px; font-weight:600; letter-spacing:0.2em; background:#d9dce6; padding:15px 0; text-decoration:none; color:#25426b; letter-spacing:0.2em; display:block; text-align:center; /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;} .btn_miniature_sheet p { font-size:12px; text-align:left; margin:10px 0 0; } .resin-transfer-paper-sec-howto h4 { font-size:20px !important; margin:0 0 10px; } .resin-transfer-paper-sec-howto .clm3 { margin:20px 0 0 -20px !important; } .resin-transfer-paper-sec-howto .clm3 li { margin:0 0 30px !important; width:33.333% !important; float:left } .resin-transfer-paper-sec-howto .clm3 li .inner { margin:0 0 0 20px !important; } .resin-transfer-paper-sec-howto .clm3 li .pic { margin:0 0 10px; } .resin-transfer-paper-sec-howto .howto01 h5 { margin:0 0 5px !important; } .resin-transfer-paper-sec-howto p { font-size:13px; line-height:1.6;} .resin-transfer-paper-sec-howto .howto01 { padding:0 0 30px; } .resin-transfer-paper-sec-howto .u_line { text-decoration:underline; } /*　教育　*/ #education .bigtit { background-color: #cce0e4; padding: 16px 0; } #education .education { width: 1044px; margin: 0 auto; text-align: center } #education .education .note { margin: 0 0 80px } #education .education h2 { font-size: 24px; margin: 0 0 40px } #education .education h3 { width: 920px; margin: 0 auto 10px } #education .education .bnr { margin: 0 0 20px } #education .rec { margin:80px 0 0; padding:80px 0 40px; background:url(../../education/img/line.png) repeat-x left top; } #education .rec h3 { padding:0 0 30px 0; } #education .rec h4 { font-size:23px; letter-spacing:0.2em; background:url(../../education/img/dots.png) repeat-x left bottom; display:inline-block; padding:0 0 10px; margin:0 0 15px; } #education .rec p { margin:0 0 30px; } #education .rec .btn-link { margin:60px 100px 0; position:relative; } #education .rec .btn-link a { background:#b6c900; color:#624849; font-size:16px; font-weight:600; text-decoration:none; line-height:1; letter-spacing:0.1em; padding:30px 0; border-radius:40px; display:block; position:relative; } #education .rec .btn-link .kazari01 { position:absolute; bottom:30px; left:20px; } #education .rec .btn-link .kazari02 { position:absolute; bottom:30px; right:40px; } /*　販売店情報　*/ #stores .bigtit { background-color: #e4e1c1; padding: 16px 0; margin-top: 80px; } #stores .contents_inner .sub_category { background-color: #fff; padding: 6px; margin-bottom: 30px; /* box-shadow */ box-shadow:1px 1px 0px 0px #c4c0bc; -moz-box-shadow:1px 1px 0px 0px #c4c0bc; -webkit-box-shadow:1px 1px 0px 0px #c4c0bc; } #stores .contents_inner .sub_category li { float: left; width:12.5%; } #stores .contents_inner .sub_category li a { display: block; padding: 10px 0; position: relative } #stores .contents_inner .sub_category li a div { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 0; background-color: #e4e1c1; } #stores .contents_inner .sub_category li.cur a div { height: 100%; } #stores .contents_inner .sub_category li a span { z-index: 1; position: relative } #stores .contents_inner h3 { font-size: 20px; margin: 60px 0 20px; } #stores .store_idx { width: 1044px; margin: 0 auto } #stores .store { margin: 0 0 40px; background-color: #fff; padding: 20px 40px 40px } #stores .store h4 { font-size: 16px; margin: 0 0 20px } #stores .store table { background: url(../img/news_line02.png) repeat-x top; } #stores .store tr { background: url(../img/news_line02.png) repeat-x bottom; } #stores .store th { width: 25%; padding: 20px; font-size: 14px; line-height: 1.8; font-weight: bold } #stores .store td { padding: 20px; font-size: 13px; line-height: 1.8 } #stores .store td.u { width: 200px } #stores .store .btn_store a { display: block; width: 200px; padding: 10px; background-color: #e4e1c1; text-align: center; font-weight: bold; /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } /*　FAQ　*/ #faq .bigtit { background-color: #d8cce5; padding: 16px 0; } #faq .detail { text-align: left; margin-bottom: 40px !important } #faq .detail .faq_tit { position: relative } #faq .detail .faq_tit h2 { padding: 30px; font-size: 18px } #faq .detail .faq_tit span.line { display: block; width: 100%; height: 5px; background: url(../img/faq_line.png) no-repeat; background-size: contain } #faq .faq { margin: 40px 0 0 } #faq .faq h3.q { position: relative; padding: 0 0 0 65px; min-height: 33px; margin: 0 0 20px; font-size: 16px } #faq .faq h3.q .ico { position: absolute; left: 0; top: 0 } #faq .faq p { position: relative; padding: 0 0 40px 65px; min-height: 33px; display: block } #faq .faq p .ico { position: absolute; left: 0; top: 0 } #faq .faq p.dot span { background: url(../img/dotline01.png) top repeat-x; padding-top: 40px; display: block } #faq .btn a { font-size:16px; font-weight:600; letter-spacing:0.2em; background:#d9dce6; padding:15px 0; text-decoration:none; color:#25426b; letter-spacing:0.2em; display:block; text-align:center; /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } /*　会社情報　*/ #comapny .bigtit { background-color: #c8d8e8; padding: 16px 0; } #comapny #contents .categories { background-color: #dce2e8; text-align:center; } #comapny #contents .categories li a { display: block; padding: 20px 50px; position: relative; font-size: 14px } #comapny #contents .categories li.cur a div { background-color: #c8d8e8; } #comapny .corp_logo { padding: 60px 0 80px} #comapny .detail { text-align: left; margin-bottom: 40px !important } #comapny .detail .news_tit { position: relative } #comapny .detail .news_tit h2 { padding: 30px; font-size: 18px } #comapny .detail .news_tit span.line { display: block; width: 100%; height: 5px; background: url(../../img/company_line.png) no-repeat; background-size: contain } #comapny h2 { font-size: 24px; font-family: 'GreycliffCF-Bold'; font-weight: normal; letter-spacing: 0.2em } #comapny h2 span { font-size: 14px } #comapny .comapny { width: 920px; margin: 0 auto; text-align: center; padding: 0 0 40px } #comapny .outline { width: 920px; margin: 40px auto 0; text-align: center; padding: 0 0 40px } #comapny .outline span.line { display: block; width: 100%; height: 5px; background: url(../img/faq_line.png) no-repeat; background-size: contain } #comapny .outline tr { padding: 0 0 2px; background: url(../img/news_line02.png) repeat-x bottom; position: relative } #comapny .outline th { padding: 20px; font-size: 14px; line-height: 2; font-weight: bold } #comapny .outline td { padding: 20px; font-size: 13px; line-height: 2 } #comapny .detail { text-align: left; margin-bottom: 40px !important } #comapny .detail .com_tit { position: relative } #comapny .detail .com_tit h2 { padding: 30px; font-size: 18px } #comapny .detail .com_tit span.line { display: block; width: 100%; height: 5px; background: url(../../img/company_line.png) no-repeat; background-size: contain } #comapny .detail .body { padding-top: 30px !important } #comapny .safety .fltL { width: 270px; } #comapny .safety .fltR { width: 540px; } #comapny .safety .pbox { padding: 20px; border: dotted 1px #c7c7c7; background: #f7f7f7 } #comapny .safety h4.atn { font-size: 15px; color: #990000 } #comapny .safety h4.txtC { text-decoration:underline; } #comapny .business h4 { text-decoration:underline; } #comapny .history {} #comapny .history h3 { font-size:20px; letter-spacing:0.2em; margin: 60px 0 30px; } #comapny .history h3 span { font-size:24px; padding:0 0 0 30px; color:#cbd8e6; } #comapny .history h4 { font-size:15px; margin:0 0 10px; } #comapny .history .history_list { background: url(../img/dotline03.png) repeat-x left top !important; margin: 40px 0 !important; } #comapny .history .history_list li { background: url(../img/dotline03.png) repeat-x left bottom; padding:20px 25px; } #comapny .history .history_list li span { display:inline-block; } #comapny .history .history_list li .year { font-size:16px; letter-spacing:0.2em; color:#566685; float:left; width:140px; } #comapny .history .history_list li .txt { width:630px; } #comapny .history .btn { text-align:center; margin: 60px 0 120px; } #comapny .history .btn a { display:inline-block; margin:0 auto; font-size:17px; letter-spacing:0.2em; font-weight:600; border-bottom:5px solid #cbd8e6; text-decoration:none; padding:0 10px; } #comapny .history .term { position:relative; } #comapny .history .term01 { position:relative; z-index:4; } #comapny .history .term02 { position:absolute; top:0; left:200px; z-index:3; } #comapny .history .term03 { position:absolute; top:0; left:400px; z-index:2; } #comapny .history .term04 { position:absolute; top:0; right:0; z-index:1; } #comapny .history .pic_box { margin:0 0 0 -20px; } #comapny .history .pic_box li { float:left; } #comapny .history .pic_box li .inner { margin:0 0 0 20px; } #comapny .history .pic_box li .inner span { font-size:12px; line-height:1.8em; display:block; margin:5px 0 0; } #comapny .history .mov { margin: 40px 0 0 } .history01 .pic01 { width:510px; } .history01 .pic02 { width:290px; } .history04 .pic01 { width:510px; } .history04 .pic02 { width:290px; } /*　Contact　*/ #contact .bigtit { background-color: #d4d8df; padding: 16px 0; margin: 80px 0 0 } #contact #contents .categories { background-color: #e2e2e3; text-align:center } #contact #contents .categories li a { display: block; padding: 20px 50px; position: relative; font-size: 14px } #contact #contents .categories li.cur a div { background-color: #d4d8df; } #contact .contact { width: 920px; margin: 80px auto 0; text-align: center; padding: 0 0 40px } #contact .contact span.line { display: block; width: 100%; height: 5px; background: url(../img/contact_line.png) no-repeat; background-size: contain } #contact .contact tr { padding: 0 0 2px; background: url(../img/news_line02.png) repeat-x bottom; position: relative } #contact .contact th { padding: 20px; font-size: 14px; line-height: 2; font-weight: bold } #contact .contact td { padding: 20px; font-size: 13px; line-height: 2 } #contact .contact dl { padding: 0 0 2px; background: url(../img/news_line02.png) repeat-x bottom; position: relative } #contact .contact dt { padding: 20px; font-size: 14px; line-height: 2; font-weight: bold; clear: both; float: left; width: 20%; text-align: left } #contact .contact dd { padding: 20px; font-size: 13px; line-height: 2; float: left; width: 70%; text-align: left } input#form_submit_button { margin-left: 35% } #contact .form-box01 { border:0; font-size:16px; color:#aaa; border:solid 1px #ccc; margin:0; padding: 0 10px border:1px solid #cdcac8; width:490px; height:50px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } #contact textarea { border:0; font-size:16px; color:#aaa; border:solid 1px #ccc; margin:0; border:1px solid #cdcac8; width:620px; height:80px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:10px 0 } #contact .form-btn { background:#4e453b; border:none; color:#fff; font-size:16px; letter-spacing:4px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:15px 0; cursor:pointer; width:280px; margin:20px 0 40px; } /* mailform */ .text-success { padding: 40px; font-size: 16px; font-weight: bold } .text-success span { padding: 40px; font-size: 13px; font-weight: normal } .text-danger { padding: 40px; font-size: 16px; color: #C00; font-weight: bold } #button_default, .MyMailForm_btn { background:#4e453b; border:none; color:#fff; font-size:16px; letter-spacing:4px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:15px 0; cursor:pointer; width:280px; margin:20px 0 40px; } /* request */ .request .read { margin-bottom: 4em } .request .two-column { margin: 0 -5px; } .request .two-column li { width: 50%; float: left } .request .two-column li .doc { padding: 5px } .request .two-column li .doc .doc-inner { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 20px; background: #f8f6f3 } .request .two-column li .doc .doc-inner .cover { text-align: center; padding: 0 0 20px } .request .two-column li .doc .doc-inner h4 { padding: 0 0 0.5em; margin-bottom: 0.5em; border-bottom: solid 1px #d5d8de; } .request .two-column li .doc .doc-inner label { font-size: 15px; line-height: 1.6; } .request .two-column li .doc .doc-inner label span { font-size: 12px; font-weight: normal } /*　Privacy Policy　*/ #privacy .bigtit { background-color: #d4d8df; padding: 16px 0; margin: 80px 0 0 } #privacy .privacy { width: 920px; margin: 0 auto; text-align: left } #privacy .privacy h3 { font-size: 18px; margin: 0 0 20px } #privacy .privacy .read { padding: 20px 40px 60px } #privacy .privacy .sec { padding: 0 40px 40px; margin: 0 0 40px; background: url(../img/dotline01.png) repeat-x bottom transparent; } .mov iframe { } .btn_blank a { display: block; padding: 24px 0; border: solid 4px #25426b; background-color: #fff; color: #25426b; text-align: center; font-family: 'GreycliffCF-Bold'; font-size: 18px; line-height: 1; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .btn_blank a:hover { background-color: #25426b; color: #fff } .list li { float:left; margin:0 0 10px 0; } .list .inner { background:#fff; margin:0 10px; padding:20px 25px; position:relative; /* border-radius */ border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; /* box-shadow */ box-shadow:1px 1px 0px 0px #c4c0bc; -moz-box-shadow:1px 1px 0px 0px #c4c0bc; -webkit-box-shadow:1px 1px 0px 0px #c4c0bc; } .list li img { float:left; padding:0 30px 0 0; } .list .pdf { position:absolute; bottom:20px; right:0; } .list li a { display:block; color:#244c68; } .list li p { padding: 20px 0 0 0; text-align:left; font-size:18px; font-weight:600; line-height:1.7; letter-spacing:0.3em; } /*　Recipes　*/ #recipes .bigtit { background-color: #e6d0e0; padding: 16px 0; } #recipes .contents_inner { padding:0 60px; } #recipes .categories { background:#ebdfe3; } #recipes .categories li.cur a div { background-color:#e6d0e0; } #recipes .ico_new { position:absolute; top:10px; right:10px; } #recipes .detail .head { margin: -10px -10px 0 !important } #recipes .contents_inner .nobg { background: none !important; margin: 0 !important } #recipes .recipe_detail { position: relative } #recipes .recipe_detail .next_product { position: absolute; right: 0; top: 320px } #recipes .recipe_detail .next_product a { position: relative; z-index: 1 } #recipes .recipe_detail .next_product .next_thumb { position: absolute; left: 0; top: 0; width: 120px; z-index: 0 } #recipes .recipe_detail .next_product .next_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #recipes .recipe_detail .prev_product { position: absolute; left: 0; top: 320px } #recipes .recipe_detail .prev_product a { position: relative; z-index: 1 } #recipes .recipe_detail .prev_product .prev_thumb { position: absolute; left: -80px; top: 0; width: 120px } #recipes .recipe_detail .prev_product .prev_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #recipes .movie_detail { position: relative } #recipes .movie_detail .next_product { position: absolute; right: 0; top: 320px } #recipes .movie_detail .next_product a { position: relative; z-index: 1 } #recipes .movie_detail .next_product .next_thumb { position: absolute; left: 0; top: 0; width: 120px; height:120px; z-index: 0; background:#ebdfe3; } #recipes .movie_detail .next_product .next_thumb img { margin:27px 0; } #recipes .movie_detail .next_product .next_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #recipes .movie_detail .prev_product { position: absolute; left: 0; top: 320px } #recipes .movie_detail .prev_product a { position: relative; z-index: 1 } #recipes .movie_detail .prev_product .prev_thumb { position: absolute; left: -80px; top: 0; width: 120px; height:120px; background:#ebdfe3; } #recipes .movie_detail .prev_product .prev_thumb img { margin:27px 0; } #recipes .movie_detail .prev_product .prev_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #recipes .recipe_idx { margin:0 auto; padding:10px 0 0 } #recipes .recipe_idx h2 { font-size: 24px; font-family: 'GreycliffCF-Bold'; font-weight: normal; letter-spacing: 0.2em; margin:0 0 40px; } #recipes .recipe_idx h2 span { font-size: 14px } #recipes .recipe_idx .recipe_list li { width:25%; float: left; } #recipes .recipe_idx .movie_list li { width:33.333%; float: left; } #recipes .recipe_idx .idx_inner { margin: 0 20px 60px; position:relative; } #recipes .recipe_idx li .idx_inner a { overflow: hidden; display: block } #recipes .recipe_idx li .idx_inner h3 { text-align: left; font-size: 14px; font-weight: 200; margin: 20px 0 0 } #recipes .recipe_idx .btn a { text-decoration:none; display: block; padding: 28px 0; margin:0 20px 90px; background:#e6d0e0; text-align: center; font-size: 16px; font-weight:600; letter-spacing:0.2em; line-height: 1 } #recipes .btn_sort { margin:40px 5px 0;font-family: 'GreycliffCF-ExtraBold' } #recipes .btn_sort ul { text-align:center; font-size:0; } #recipes .btn_sort li { display:inline-block; font-size:12px; font-weight:600; padding:0 10px; } #recipes .btn_sort li a { background:#fff; width:250px; padding:10px 0; display:block; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; box-shadow:0px 0px 2px 2px #ebebeb; } #recipes .btn_sort li a:hover { text-decoration:none; } #recipes .btn_sort li a.cur { background:#e6d0e0; } #recipes .recipe { width: 980px; margin: 0 auto 100px; text-align: left; background-color: #fff; padding: 40px 50px; } #recipes .recipe .title { margin-bottom: 40px; position: relative } #recipes .recipe .title h2 { font-size: 24px; letter-spacing: 0.2em; font-weight: normal; text-align: left } #recipes .recipe .l { float: left; width: 460px; margin: 0 30px 0 0; } #recipes .recipe .r { float: right; width: 460px; margin: 0 0 0 30px; } #recipes .recipe .l .main { background-color: #fff; padding: 15px; margin: 0 0 60px; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .l .materials {} #recipes .recipe .l .materials img { width: 210px; margin:0 0 5px; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .l .materials .img_box { float:left; width:210px; } #recipes .recipe .l .materials .img_box p { font-size:11px; } #recipes .recipe .l .materials .txt { width: 210px; float: right; display: block } #recipes .recipe .l .point { margin:30px 0 0 0; } #recipes .recipe .l .point img { width: 210px; float: left; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .l .point .tit { font-size:18px; color:#710d2f; font-weight:600; border-bottom:solid 2px #710d2f; line-height:1.0; margin:0 0 15px 0; display:inline-block; } #recipes .recipe .l .point .txt { width: 210px; float: right; display: block } #recipes .recipe .r .step { margin: 0 0 60px; position: relative } #recipes .recipe .r .step .num { } #recipes .recipe .r .step .pic { width: 210px; float: left; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .r .step .txt { width: 210px; float: right; display: block; font-size: 14px } #recipes .recipe .btns { padding: 15px; } #recipes .recipe .btn_det { background: #e6d0e0; margin: 10px 0 0 ; border-radius: 4px; /* CSS3草案 */ -webkit-border-radius: 4px; /* Safari,Google Chrome用 */ -moz-border-radius: 4px; /* Firefox用 */ } #recipes .recipe .btn_det a { display: block; padding: 15px 0; position: relative; font-size:16px; text-align: center; text-decoration:none; } #recipes .recipe .btn_det a .ico { position: absolute; right: 20px; top: 50%; margin-top: -12px } #recipes .recipe .num_alt { font-size:40px; font-weight:600; font-family: 'GreycliffCF-mediumOblique'; position:absolute; top:-40px; left:10px; } #recipes .recipe .num_tx { font-size:40px; font-weight:600; font-family: 'GreycliffCF-mediumOblique'; position:absolute; top:-40px; left:10px; } #recipes .recipe .btn_backto { line-height: 1; margin:50px 0 0; padding: 30px 0 0; background: url(../img/dotline03.png) repeat-x left top; } #recipes .recipe .btn_backto a { display: block; padding: 15px 0; border: solid 3px #e6d0e0; text-align: center; } #recipes .recipe .btn_backto a:hover { background-color: #e6d0e0; } #recipes .recipe .mov { margin:0 0 30px; } @media screen and (max-width: 1200px) { #globalNav li.gnav07 { display: none } } @media screen and (max-width: 1170px) { #header #h_sns_btn { display: none } } @media screen and (max-width: 1024px) { #header .h_en { display: none } } @media screen and (max-width: 780px) { body { font-size:13px; line-height: 1.8; -webkit-text-size-adjust: none; } a {color:#fff; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; } .pc_none { display: block } .sp_none { display: none } /* header */ #header { height: 22px; padding: 15px 0; text-align: left; position: fixed; z-index: 100 } #header h1 { margin: 0 20px; } #header h1 img { height: 22px } /* #header #h_sns_btn { position: absolute; right: 100px; top: 10px; display: block } #header #h_sns_btn li { float: left; margin: 0 2px } */ #header #h_sns_btn { position: absolute; right: 100px; top:0; display: block; width:auto; font-size:0; } #header #h_sns_btn li { float: none; display:inline-block; } #header #h_sns_btn li a { width:32px; padding:13px 0; } #header #h_sns_btn li a img { height: 26px } #header .h_en { display: none } #header #globalNav { position: fixed; left: 0; top: 52px; width: 100%; background-color: #fff; border-bottom: solid 1px #d7d7d7; display: none } #header #globalNav li { float: none; overflow: hidden } #header #globalNav li a { padding: 22px 0 18px ; display: block; text-align: center } #globalNav li a { position: relative } #globalNav li a img { position: relative; z-index: 1; } #globalNav li a span { position: absolute; top: 0; left: 0; width: 100%; height: 4px; z-index: 0; } #globalNav li.gnav07 { display: block } /* main */ #main { position:relative; margin: 52px 0 0 } #main .vis { position: absolute; left: 0; top: 0; width: 100%; display: none; overflow: hidden } #main .vis .credit { position: absolute; left: 10px; bottom: 10px; color: #d7d7d7; line-height: 1; font-size: 8px } #main .vis .viewmore { position: absolute; right: 10px; bottom: 10px; cursor: pointer; height: 9px } #main .vis .ln { display: none } #main .vis .pos { position: absolute; left: 0; bottom: 0 } #main .vis01 .copy { position: absolute; width: 80%; left: 50%; top: 52%; margin: -24px 0 0 -40%; } #main .vis01 .copy .t01 { margin: 0 0 6px; opacity: 0; margin-top: 15px; } #main .vis01 .copy .line { margin: 0 0 10px; opacity: 0 } #main .vis01 .copy .t02 { opacity: 0; margin-top: 10px; width: 240px } #main .vis02 .copy { position: absolute; width: 120px; left: 76.7%; top: 71.5%; margin: -55px 0 0 -60px; } #main .vis02 .copy .t01 { margin: 20px 0 6px; opacity: 0; } #main .vis02 .copy .t02 { opacity: 0; margin-top: 10px; color: #fff; font-size: 9px; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.11em; line-height: 1.6 } #main .vis03 .copy { position: absolute; width: auto; left: 7.2%; top: 8%; margin: 0; } #main .vis03 .copy .t01 { opacity: 0; margin-top: 20px; float: left; width: 150px } #main .vis03 .copy .t02 { opacity: 0; margin-top: 10px; margin-left: 20px; padding-top: 17px; color: #25426b; font-size: 9px; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em; float: left } #main .vis04 .copy { position: absolute; width: 140px; right: 5%; top: 16%; margin: 0; } #main .vis04 .copy .t01 { margin: 0 0 10px; opacity: 0; margin-top: 20px; } #main .vis04 .copy .t02 { opacity: 0; margin-top: 10px; color: #fff; font-size: 9px; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em; line-height: 1.6 } #main .vis05 .copy { position: absolute; width: 140px; left: 78%; top: 51.6%; margin: -30px 0 0 -70px; } #main .vis05 .copy .t01 { margin: 0 0 10px; opacity: 0; margin-top: 20px; } #main .vis05 .copy .t02 { opacity: 0; margin-top: 10px; color: #4b3812; font-size: 9px; font-family: 'GreycliffCF-DemiBold'; letter-spacing: 0.16em; line-height: 1.6 } #main .vis02 .credit { left: inherit; right: 10px; bottom: 10px; color: #ccc; } #main #bullets { bottom: 0; margin-left: -78px } #main #bullets li { padding: 5px; } /* What's New */ #whatsnew h3 img { height: 32px } #whatsnew li { margin: 0 0 30px } #whatsnew li .news_inner { position: relative; padding: 0 15px 0 110px; cursor: pointer; min-height: 65px; } #whatsnew li .news_thumb { position: absolute; left: 15px; top: 0; } /* Feature */ #feature { padding: 0; } /* Brand-New */ #brandnew { padding: 30px 0 10px; background: url(../img/brandnew_bg.jpg) no-repeat bottom; background-size: cover } #brandnew h3 { margin: 0 0 20px } #brandnew h3 img { height: 36px } #brandnew ul { width: auto; min-width: inherit; margin: 0 auto } #brandnew li { } #brandnew li img { height: 86px } /*#brandnew ul { width: auto; margin: 0 auto } #brandnew li.new01 { display: none } #brandnew li.new02 { width: 30%; margin-right: 0 } #brandnew li.new03 { width: 70%; margin-right: 0 } #brandnew li { float: left; } #brandnew li a { display: block } #brandnew li.new02 img { height: 118px } #brandnew li.new03 img { height: 118px }*/ /* top_pickup */ #top_pickup { padding-bottom: 30px } #top_pickup .idx li h3 { font-weight: normal; font-size: 14px; font-family: 'GreycliffCF-DemiBold'; } #top_pickup .idx li.wid2 span { overflow: hidden; display: block } /*#top_pickup .idx li.idx02 a, #top_pickup .idx li.idx03 a { height: 160px; overflow: hidden; display: block }*/ /* PADICO Blog */ #padicoblog h3 img { height: 32px } #padicoblog li { margin: 0 0 30px } #padicoblog li .news_inner { position: relative; padding: 0 15px 0 110px; cursor: pointer; min-height: 65px; } #padicoblog li .news_thumb { position: absolute; left: 15px; top: 0; } /* top_products */ #top_products { padding: 30px 10px 40px; background: url(../img/products_bg.jpg) repeat-y top; background-size: 120%; } #top_products h3 { margin: 0 0 20px } #top_products h3 img { height: 36px } #top_products li { float: left; text-align: center; margin: 0 } #top_products li img { width: 100%; } #top_products li a { display: block } .btn_more { width: 240px; margin: 0 auto; text-align: center } .btn_more a { padding: 5px 0; border: solid 2px #25426b; display: block; font-size: 14px; letter-spacing: 0.16em } .btn_more a:hover { background-color: #25426b; color: #fff } /* extra */ #extra { padding: 20px 10px; margin: 0 auto } #extra li { float: none; margin: 0; overflow: hidden } #extra li a { padding: 20px 0; display: block } #extra li a img { height: 40px } /* follow_us #follow_us { padding: 60px 0 } #follow_us h3 img { width: 100px } #follow_us #f_sns_btn { width: 186px; margin: 0 auto } #follow_us #f_sns_btn li img { height: 50px } */ /* follow_us */ #follow_us { padding: 60px 0 } #follow_us h3 img { width: 100px } #follow_us #f_sns_btn li img { height:50px; } /* footer */ #footer { padding: 20px; background-color: #cedbe4; text-align: left } #footer .sitemap {} #footer .sitemap ul.clm { float: left; width: 50%; } #footer .sitemap ul.clm2 { float: left; width: 50%; } #footer .sitemap ul.home { float: left; width: 100%; } #footer .sitemap ul.ml30 { margin-left: 0 !important } /* #footer .sitemap #sm_sns_btn {} #footer .sitemap #sm_sns_btn li { float: left; margin-right: 20px} */ #footer .sitemap #sm_sns_btn { font-size:0; margin:10px 0 0 -10px; } #footer .sitemap #sm_sns_btn li { float: left; margin-right: 0} #footer .sitemap #sm_sns_btn li a { width:40px; display: inline-block; text-align:center; padding:10px 0; } #footer p img { display: block; margin-bottom: 10px; height: 24px } #footer p span { margin-left: 0 } /* sns */ #sns ul { position: fixed; top:60px; display: none; -moz-box-shadow: -1px 0px 5px 1px rgba(176, 176, 176, 0.3); -webkit-box-shadow: -1px 0px 5px 1px rgba(176, 176, 176, 0.3); -ms-box-shadow: -1px 0px 5px 1px rgba(176, 176, 176, 0.3); box-shadow: -1px 0px 5px 1px rgba(176, 176, 176, 0.3); } #sns ul li a img { padding:3px 6px; height:25px; } #sns ul li:first-child a img { padding:8px 6px 3px; } #sns ul li:last-child a img { padding:3px 6px 8px; } /* pagetop */ #pagetop { position: fixed; right:10px; bottom: -60px; z-index: 9000; } #sp_menu { display: block; cursor: pointer } #loader { position: fixed; top: 50%; left: 50%; margin: -40px 0 0 -40px } #tab_request { top: 0 } #tab_request img { width: 50px } .wid { width: 100% } .wid_2 { width: 100% } .wid_3 { width: 100% } .wid_4 { width: 50% } .wid_5 { width: 50% } .wid_6 { width: 33.3% } .wid_7 { width: 33.3% } .wid_8 { width: 25% } /* Arigato Cellebraiton 2019.04.08 */ #arigato { padding: 0 0 40px; } #arigato .arigato-inner { padding: 50px 0; border-top:12px solid #c2b070; } #arigato .arigato-inner h2 { margin-bottom: 20px; margin-top: 40px; opacity: 0 } #arigato .arigato-inner h2 img { width: 90%; height: auto } #arigato .arigato-inner p { font-size: 14px; margin-bottom: 20px; margin-top: 40px; padding: 0 10px } #arigato .arigato-inner .tag { display: none } #arigato .arigato-inner .btn img { width: 100%; height: auto } #arigato .campaigns {} #arigato .campaigns h2 { margin: -20px 0 20px; position: relative; z-index: 10 } #arigato .campaigns h2 img { height: 40px } #arigato .campaigns ul { padding: 0 20px } #arigato .campaigns ul li { float: none; width: 100% } #arigato .campaigns ul li .cam { padding: 20px 0; } #arigato .campaigns ul li .cam .fu { height: 60px } #arigato .campaigns ul li a { display: block; overflow: hidden } #arigato .campaigns ul li h3 { font-size: 16px; padding: 10px 0 0 } #arigato .campaigns ul li h3 span { font-size: 14px; } #arigato-top { padding: 0; } #arigato-top .arigato-inner { padding: 0; } #arigato-top .arigato-inner h2 { margin-bottom: 20px; margin-top: 40px; opacity: 0 } #arigato-top .arigato-inner h2 img { width: 90%; height: auto } #arigato-top .arigato-inner p { font-size: 14px; margin-bottom: 20px; margin-top: 40px; padding: 0 10px } #arigato-top .arigato-inner .tag { display: none } #arigato-top .arigato-inner .btn img { width: 100%; height: auto } #arigato-top .campaigns {} #arigato-top .campaigns ul { padding: 0 20px } #arigato-top .campaigns ul li { float: none; width: 100% } #arigato-top .campaigns ul li .cam { padding: 20px 0; } #arigato-top .campaigns ul li .cam .fu { height: 60px } #arigato-top .campaigns ul li:first-child .cam { margin: -40px 0 } #arigato-top .campaigns ul li a { display: block; overflow: hidden } #arigato-top .campaigns ul li h3 { font-size: 16px; padding: 10px 0 0 } #arigato-top .campaigns ul li h3 span { font-size: 14px; } /* Smile project 2020.04.01 */ #smile { padding: 0 20px; } #smile .smile-inner { padding: 20px 0 40px; } #smile .smile-inner h2 { margin-bottom: 30px; } #smile .smile-inner h2 img { width:90%; height:auto; } #smile .smile-inner p { font-size: 14px; text-align:left; } #smile .smile-box { position:relative; width:auto; margin:0 auto; padding:30px 10px; background:#fff; border-radius:10px; } #smile .smile-bg { position:absolute; top:0; left:50%; margin:0 0 0 -542px; z-index:1 } #smile .smile-tx { position:relative; z-index:2; } #smile .pic { position:absolute; bottom:-50px; right:-10px; z-index:3; } #smile .kazari01 { position:absolute; top:10px; left:-10px; z-index:3; } #smile .kazari02 { position:absolute; bottom:-40px; left:-10px; z-index:3; } #smile .kazari03 { position:absolute; top:25px; right:-10px; z-index:3; } #smile .smile-bg { display:none; } #smile .pic img { width:140px;} #smile .kazari01 img { width:60px; } #smile .kazari02 img { width:110px; } #smile .kazari03 img { width:70px; } #smile .campaigns {} #smile .campaigns ul { padding: 0 20px } #smile .campaigns ul li { float: none; width: 100% } #smile .campaigns ul li .cam { padding: 20px 0; } #smile .campaigns ul li .cam .fu { height: 60px } #smile .campaigns ul li a { display: block; overflow: hidden } #smile .campaigns ul li h3 { font-size: 16px; padding: 10px 0 0 } #smile .campaigns ul li h3 span { font-size: 14px; } /* AF banner 2019.05.23 */ #top_pickup .af_bnrs li h3 { font-size: 14px !important } /*下層コンテンツ*/ #contents { padding-bottom: 60px; } #contents .categories ul { margin: 0 auto; } #contents .categories li { float: left; width: 33.33%; border-bottom: 1px solid #f1eee7 } #contents .categories li.cur { font-weight: bold } #contents .categories li a { display: block; padding: 12px 0 !important; position: relative; font-size: 11px; letter-spacing: 0 } #contents .categories li.cur a div { top: 3px; } #contents .contents_inner { margin: 20px auto 0; opacity: 0; padding: 0; } #contents .contents_inner .idx { padding: 0 10px; margin: 0 auto } #contents .contents_inner .idx li { float: left; margin: 0 0 10px; overflow: hidden } #contents .contents_inner .idx li a { position: relative; display: block } #contents .contents_inner .idx li h3 { font-size: 14px; padding: 10px; position: relative } #contents .contents_inner .idx li a span.logo { position: absolute; left: 10px; top: 10px; display: block } #contents .contents_inner .idx li a span.en { position: absolute; left: 15px; top: 15px; font-size: 16px; line-height: 1; font-family: 'GreycliffCF-Bold'; letter-spacing: 0.1em; display: block; z-index: 10 } #contents .contents_inner .idx li.wid1 { margin-bottom: 20px } #contents .contents_inner .container { padding: 0; margin: 0 auto } #products .bigtit { background-color: #e7cdd0; padding: 12px 0; } #products .bigtit img { height: 60px } #cat01 h2 img { width: 160px } #contents .contents_inner .sub_category { margin-bottom: 20px } #contents .contents_inner .sub_category .wid_4 { width: 50% } #contents .contents_inner .sub_category .wid_5 { width: 50% } #contents .contents_inner .sub_category .wid_6 { width: 50% } #contents .contents_inner .thumbs { padding: 0 0 40px } #contents .contents_inner .thumbs li { float: left; width: 100%; opacity: 0; position: relative; background-color: #fff; margin-bottom: 2px; /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } #contents .contents_inner .thumbs li a { padding: 0; width: 33.3% } #contents .contents_inner .thumbs li .sp_tit { position: absolute; left: 33.3%; top: 0; width: 66.6%; text-align: left } #contents .contents_inner .thumbs li .sp_tit h3 { padding: 20px } #contents .contents_inner .thumbs li a .ico_new { width: 30px; height: auto } #contents .contents_inner .detail { width: auto; margin: 0 auto 160px; background-color: #fff; padding: 10px } #contents .contents_inner .detail .head .l { float: none; width:100%; border-top: solid 2px #e7cdd0; margin: 0 0 20px } #contents .contents_inner .detail .head .r { float: none; width:100%; border-top: solid 2px #dadada; text-align: left; margin: 0 0 40px } #contents .contents_inner .detail .head .l .det_img_wrap { padding: 0 10px } #contents .contents_inner .detail .head .l .det_img { width: 100%; height: auto; position: relative; overflow: hidden; } #contents .contents_inner .detail .head .l .det_img .cvr { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 100 } #contents .contents_inner .detail .head .l .det_thumbs { padding-left: 10px; text-align: left } #contents .contents_inner .detail .head .r h2 { padding: 15px 10px 15px; font-size:18px; letter-spacing: 0.2em; background: url(../img/products_line.png) bottom no-repeat; background-size: contain } #contents .contents_inner .detail .head .r h2 span { font-size: 12px; font-weight: normal; letter-spacing: 0.1em } #contents .contents_inner .detail .head .r h3.copy { padding: 15px 10px 0; font-weight: normal; font-size: 14px } #contents .contents_inner .detail .head .r p.spec { padding: 15px 10px; font-size: 12px } #contents .contents_inner .detail .head .r p.price { padding: 0 10px 15px; font-size: 18px; color:#25426b; letter-spacing: 0.05em } #contents .contents_inner .detail .head .r p.price .tx18 { font-size: 16px !important} #contents .contents_inner .detail .head .r .btn_buy { margin-left: 10px } #contents .contents_inner .detail .head .r .btn_buy a { display: block; width: 250px; padding: 10px; background-color: #e7cdd0; text-align: center; font-weight: bold; /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } #contents .contents_inner .detail .body { padding: 0 0 20px; text-align: left } #contents .contents_inner .detail .body .sec { padding: 0 10px 20px; margin: 0 0 20px; background: url(../img/dotline03.png) repeat-x left bottom } #contents .contents_inner .detail .body .sec h3 { margin-bottom: 25px } #contents .contents_inner .detail .body .feature li { float: left; width: 120px; margin: 0 40px 20px 0; position: relative } #contents .contents_inner .detail .body .feature li img { border-top: solid 2px #dadada; margin-bottom: 10px;} #contents .contents_inner .detail .body .howto li { float: left; width: 120px; margin: 0 40px 20px 0; position: relative } #contents .contents_inner .detail .body .howto li img { border-top: solid 2px #dadada; margin-bottom: 10px; } #contents .contents_inner .detail .body .howto li .arw { position: absolute; left: auto; right: -25px; top: 54px; width: 8px; height: 13px; background: url(../img/arw03.png) no-repeat; background-size: contain } #contents .contents_inner .detail .body .feature li .arw { display:none; } #contents .contents_inner .detail .body .gallery li { float: left; width: 50%; } #contents .contents_inner .detail .btn_backto { line-height: 1 } #contents .contents_inner .detail .btn_backto a { display: block; padding: 15px 0; border: solid 3px #e7cdd0; text-align: center } #contents .contents_inner .detail .btn_backto a:hover { background-color: #e7cdd0 } #products .contents_inner .next_product { position: absolute; right: 0; top: auto; bottom: 170px } #products .contents_inner .next_product a { position: relative; z-index: 1 } #products .contents_inner .next_product .next_thumb { position: absolute; left: -120px; top: 0; width: 120px; z-index: 0 } #products .contents_inner .next_product .next_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #products .contents_inner .prev_product { position: absolute; left: 0; top: auto; bottom: 170px } #products .contents_inner .prev_product a { position: relative; z-index: 1 } #products .contents_inner .prev_product .prev_thumb { position: absolute; left: 40px; top: 0; width: 120px } #products .contents_inner .prev_product .prev_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #contents .contents_inner .container { padding: 0 10px; margin: 0 auto } #contents .pager { padding: 20px 0; text-align: center; position: relative } #contents .pager p a { padding: 10px 15px; margin: 0 5px } #contents .pager p a.cur { background-color: #fff; font-family: 'GreycliffCF-Bold';} #contents .pager .pager_next { position: absolute; right: 10px; top: 10px; line-height: 41px; font-size: 16px; font-family: 'GreycliffCF-BoldOblique'; } #contents .pager .pager_prev { position: absolute; left: 10px; top: 10px; line-height: 41px; font-size: 16px; font-family: 'GreycliffCF-BoldOblique'; } #lay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/gal_bg.png); text-align: center; z-index: 9001; display: none } #lay .photo { opacity: 0; margin-top: 0; width: 100%; height: auto } #lay .next { position: absolute; right: 10px; top: auto; bottom: 20px; margin-top: 0; cursor: pointer } #lay .next img { width: 50px; height: 50px } #lay .prev { position: absolute; left: 10px; top: auto; bottom: 20px; margin-top: 0; cursor: pointer } #lay .prev img { width: 50px; height: 50px } #lay .close { position: absolute; right: 0; top: 0; cursor: pointer } /*　新着情報　*/ #news .news_idx { width: auto; margin: 0 auto; text-align: left } #news .news_idx li { padding: 0 0 2px; background: url(../img/news_line02.png) repeat-x bottom; position: relative } #news .news_idx li .news_inner { position: relative; padding: 15px 15px 15px 110px; cursor: pointer; min-height: 65px; } #news .news_idx li .news_thumb { position: absolute; left: 15px; top: 50%; margin-top: -40px; } #news .news_idx li .date { color: #2bad96; font-family: 'GreycliffCF-Bold'; } #news .news_idx li .cat { display: none } #news .news_idx li .cat a:link { color: #2bad96; text-decoration: underline } #news .news_idx li .cat a:visited { color: #2bad96; text-decoration: none } #news .news_idx li .cat a:hover { color: #2bad96; text-decoration: none } #news .news_idx li .cat a:active { color: #2bad96; text-decoration: none } #news #contents .pager { width: auto; margin: 0 auto 40px } #news .detail .news_tit span.line { background-size: cover } #news .detail .news_tit h2 { padding: 10px; font-size: 16px } #news .detail .news_tit .news_thumb { position: absolute; width: 80px; right: 10px; top: auto; bottom: -68px } #news .detail .news_tit span.line { background-size: cover } #news #contents .contents_inner .detail .body { padding: 0 10px 40px; text-align: left } /*　Pick up・特集　*/ #pickup .bigtit { margin-top: 52px; } #pickup .contents_inner { padding:0; } #pickup .pickup_idx { padding-bottom:0; } #pickup .pickup_idx .box_2clm { margin:0 0 40px 0; } #pickup .pickup_idx .box_2clm ul li { width:100%; float:none; margin:0 0 20px 0; } #pickup .pickup_idx .box_2clm ul li h3 { padding:5px 0 0 0; font-size:13px; } #pickup .pickup_idx .contents_inner .idx01 h3 { font-size:13px; } #pickup .pickup_idx .contents_inner .idx02 h3 { font-size:13px; } #pickup .pickup_idx .contents_inner h4 { margin:0 0 20px 0; } #pickup .interview_idx { margin: 0 10px auto; padding: 10px 0 0 } #pickup .interview_idx li { width: 100%; float:none; } #pickup .interview_idx li .idx_inner { padding: 0 0 40px } #pickup .interview_idx li .idx_inner h3 { font-size: 16px; margin:10px 0 0 } #pickup .interview_idx li .idx_inner h3 span { font-size: 13px; } #pickup .interview .contents_inner { width:auto; padding:0; } #pickup .interview .contents_inner .sec { padding:0!important; margin:0 0 50px 0!important; width:auto } #pickup .interview .contents_inner h2 img { width:100%; height:auto; } #pickup .interview .contents_inner h2 { padding:0 0 20px 0; } #pickup .interview .contents_inner h3 { font-size:18px; line-height:1.6; } #pickup .interview .contents_inner .main p { padding:0 0 30px 0; } #pickup .interview .contents_inner .main .ph { padding:5px 0 0 0; } #pickup .interview .contents_inner .main h2 { font-size: 20px; font-weight: 200; text-align: center; letter-spacing: 0.2em; padding: 60px 0 } #pickup .interview .contents_inner .main h2 span { font-size: 14px; font-weight: bold; line-height: 3 } #pickup .interview .contents_inner .txt { padding:0 0 50px 0; } #pickup .interview .contents_inner .q { font-weight:bold; padding:0 0 10px 0; } #pickup .interview .contents_inner .member { padding:0 0 50px 0} #pickup .interview .contents_inner .wd540 { width:auto; } #pickup .interview .contents_inner .ph { padding:5px 0 50px 0; line-height:1.4; margin:0 auto } #pickup .interview .contents_inner .wd228 { width:228px; } #pickup .interview .contents_inner .profile .ph { float:none; width:200px; margin:0 auto; padding:0 0 30px 0; } #pickup .interview .contents_inner .profile .ph img { width:200px; } #pickup .interview .contents_inner .profile .box { padding:20px 0 0 0; } #pickup .interview .contents_inner .profile .box p { background:#eeeeee; padding:10px; } #pickup .contents_inner .next_product { position: absolute; right: 0; top: auto; bottom: 85px } #pickup .contents_inner .next_product a { position: relative; z-index: 1 } #pickup .contents_inner .next_product .next_thumb { position: absolute; left: -120px; top: 0; width: 120px; z-index: 0 } #pickup .contents_inner .next_product .next_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #pickup .contents_inner .prev_product { position: absolute; left: 0; top: auto; bottom: 85px } #pickup .contents_inner .prev_product a { position: relative; z-index: 1 } #pickup .contents_inner .prev_product .prev_thumb { position: absolute; left: 40px; top: 0; width: 120px } #pickup .contents_inner .prev_product .prev_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #pickup .btn_sort { margin:20px 0 0; } #pickup .btn_sort li { float:left; display:block; padding:0; width:50%; margin:0 0 10px; } #pickup .btn_sort li a { width:100%; } #pickup .btn_sort span { padding:0 5px; display:block; } #pickup .recipe_idx { padding:0 } #pickup .recipe_idx li { width:50%; } #pickup .recipe_idx li .idx_inner { margin:0 10px 30px; } #pickup .recipe_idx li .idx_inner h3 { font-size: 12px; margin:10px 0 0 } #pickup .ico_new { position:absolute; top:10px; right:10px; height:30px; } #recipes .recipe { width: auto; margin: 0 auto 160px; padding: 30px 20px 20px; } #recipes .recipe .title { margin-bottom: 20px; } #recipes .recipe .title h2 { font-size: 20px; } #recipes .recipe .l { float: none; width: auto; margin: 0 0 20px } #recipes .recipe .r { float: none; width: auto; margin: 0 0 20px } #recipes .recipe .l .main { background-color: #fff; padding: 10px; margin: 0 0 30px; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .l .materials {} #recipes .recipe .l .materials img { width: 100%; } #recipes .recipe .l .materials .img_box { float:left; width:47%; } #recipes .recipe .l .materials .img_box p { font-size:11px; } #recipes .recipe .l .materials .txt { width: 47%; float: right; display: block } #recipes .recipe .l .point { margin:30px 0 0 0; } #recipes .recipe .l .point img { width: 47%; float: left; } #recipes .recipe .l .point .txt { width: 47%; float: right; display: block } #recipes .recipe .r .step { margin: 0 0 30px; position: relative } #recipes .recipe .r .step .num { position: absolute; left: 15px; top: -14px } #recipes .recipe .r .step .pic { width: 47%; float: left;} #recipes .recipe .r .step .txt { width: 47%; float: right; display: block; font-size: 14px } #recipes .recipe .num_alt { font-size:30px; top:-30px; left:8px; } #recipes .recipe .num_tx { font-size:30px; top:-30px; left:8px; } /*　製品情報　*/ #products .idx .mb40 { margin-bottom: 20px !important; } #cat06 .box01 .l { float: none; width:100%; } #cat06 .box01 .r { float: none; width:100%; margin:30px 0 0 0; } #cat06 .box02 ul { padding: 30px 0 0; } #cat06 .box02 ul li { float:none; } .head_1c .tit { padding:0 10px!important; } .head_1c .read { padding:25px 10px 0!important; } .img_a { text-align: center } .img_a img { margin: 0 auto 20px } .img_a .fltL { width: 280px; margin: 0 auto 20px; float: none !important; text-align: left } .img_l .fltL { float: none; margin: 0 0 20px 0 } img.ex { width: 100%; height: auto } .free_clm2 ul li { margin:0 0 10px; } .free_clm2 ul { margin:0 0 0 -10px; } .free_clm2 ul li .inner { margin:0 0 0 10px; } .free_clm2 ul li p { margin:5px 0 0; } .free_clm3 ul li { width:50%; float:left; margin:0 0 10px; } .free_clm3 ul { margin:0 0 0 -10px; } .free_clm3 ul li .inner { margin:0 0 0 10px; } #products .box_clm2 ul { margin:0; } #products .box_clm2 ul li { width:100%; float:none; } #products .box_clm2 ul li .inner { margin:0 0 20px 0; } #products .box_clm2 h3 { font-size:16px !important; margin:0 !important; } #products .box_clm2 h3 .num { font-size:22px !important; } #products .box_clm3 ul { margin:0; } #products .box_clm3 ul li { width:100%; float:none; } #products .box_clm3 ul li .inner { margin:0 0 20px 0; } #products .box_clm3 h3 { font-size:16px !important; margin:0 !important; } #products .box_clm3 h3 .num { font-size:22px !important; } .btn_miniature_sheet a { font-size:14px; padding:15px 0; } .btn_miniature_sheet p { font-size:11px; margin:5px 0 0; } .resin-transfer-paper-sec-howto h4 { font-size:16px !important; } .resin-transfer-paper-sec-howto .clm3 { margin:20px 0 0 0 !important; padding:0 30px; } .resin-transfer-paper-sec-howto .clm3 li { margin:0 0 20px !important; width:100% !important; } .resin-transfer-paper-sec-howto .clm3 li .inner { margin:0 !important; } .resin-transfer-paper-sec-howto p { font-size:12px; } .resin-transfer-paper-sec-howto .howto01 { padding:0; } /*　教育　*/ #education .education { width: auto; margin: 0 auto; text-align: center; padding: 0 15px } #education .education h2 { font-size: 24px; margin: 0 0 30px } #education .education .note { margin: 0 0 40px } #education .education h3 { width: auto } #education .education .bnr img { width: 100%; height: auto } #education .education .bnr01 { margin: 0 -20px 20px } #education .rec { margin:50px 0 0; padding:50px 0 0; } #education .rec h3 { padding:0 0 30px 0; } #education .rec h3 img { width:80%; } #education .rec h4 { font-size:16px; letter-spacing:0.1em; margin:0 0 10px; } #education .rec p { margin:0 0 20px; } #education .rec .btn-link { margin:60px 0 0; } #education .rec .btn-link a { font-size:12px; padding:25px 0; } #education .rec .btn-link .kazari01 { position:absolute; bottom:inherit; left:10px; top:-50px; } #education .rec .btn-link .kazari02 { position:absolute; bottom:inherit; right:20px; top:-50px; } #education .rec .btn-link .kazari01 { height:70px; } #education .rec .btn-link .kazari02 { height:70px; } /*　販売店情報　*/ #stores .bigtit { margin-top: 52px; } #stores .contents_inner .sub_category li { width:50%; } #stores .contents_inner h3 { font-size:18px; margin:40px 0 10px; } #stores .store_idx { width: auto; padding: 0 10px; margin: 0 auto } #stores .store { margin: 0 0 40px; padding: 10px 10px 20px } #stores .store h4 { font-size: 14px; margin: 0 0 10px } #stores .store table { background: url(../img/news_line02.png) repeat-x top } #stores .store tr { background: url(../img/news_line02.png) repeat-x bottom; display: block } #stores .store th { width: auto; padding: 10px; font-size: 13px; line-height: 1.8; font-weight: bold; display: block } #stores .store td { width: auto; padding: 0 10px 10px; font-size: 12px; line-height: 1.8; display: block } #stores .store td.u { width: auto; display: block; } #stores .store .btn_store a { display: block; width: 80px; padding: 10px; background-color: #e4e1c1; text-align: center; font-weight: bold; /* border-radius */ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } /*　FAQ　*/ #faq .bigtit { background-color: #d8cce5; padding: 16px 0; } #faq .detail { text-align: left; margin-bottom: 20px !important } #faq .detail .faq_tit { position: relative } #faq .detail .faq_tit h2 { padding: 20px; font-size: 18px } #faq .detail .faq_tit span.line { display: block; width: 100%; height: 5px; background: url(../img/faq_line.png) no-repeat; background-size: contain } #faq .faq { margin: 20px 0 0 } #faq .faq h3.q { position: relative; padding: 0 5px 0 65px; min-height: 33px; margin: 0 0 20px; font-size: 16px } #faq .faq h3.q .ico { position: absolute; left: 0; top: 0 } #faq .faq p { position: relative; padding: 0 5px 20px 65px; min-height: 33px; display: block } #faq .faq p .ico { position: absolute; left: 0; top: 0 } #faq .faq p.dot span { background: url(../img/dotline01.png) top repeat-x; padding-top: 20px; display: block } #faq .btn a { font-size:14px; padding:15px 0; } /*　会社情報　*/ #comapny #contents .categories { background-color: #dce2e8; text-align:center; } #comapny #contents .categories li a { display: block; padding: 20px 50px; position: relative; font-size: 14px } #comapny #contents .categories li.cur a div { background-color: #c8d8e8; } #comapny .corp_logo { padding: 30px 0 60px} #comapny .corp_logo img { height: 60px } #comapny h2 { font-size: 20px; font-family: 'GreycliffCF-Bold'; font-weight: normal; letter-spacing: 0.2em } #comapny h2 span { font-size: 13px } #comapny .comapny { width: auto; margin: 0 auto; text-align: center; padding: 0 0 40px } #comapny .message { padding: 0 15px } #comapny .message .pic { width: 100% } #comapny .message p.mes { text-align: left } #comapny .outline { width: auto; margin: 40px auto 0; text-align: center; padding: 0 0 40px } #comapny .outline span.line { display: block; width: 100%; height: 5px; background: url(../img/faq_line.png) no-repeat; background-size: cover } #comapny .outline tr { padding: 0 0 2px; background: url(../img/news_line02.png) repeat-x bottom; position: relative } #comapny .outline th { padding: 15px; font-size: 14px; line-height: 2; font-weight: bold; white-space: nowrap } #comapny .outline td { padding: 15px; font-size: 13px; line-height: 2 } #comapny .detail { text-align: left; margin-bottom: 20px !important } #comapny .detail .com_tit { position: relative } #comapny .detail .com_tit h2 { padding: 20px; font-size: 18px } #comapny .detail .com_tit span.line { background-size: cover } #comapny .detail .body { padding-top: 20px !important } #comapny .detail .body p { padding: 0 5px } #comapny .detail .body img.mr40 { width: 180px; margin-right: 15px !important } #comapny .safety .fltL { width: 100%; text-align:center; margin:0 0 10px 0; } #comapny .safety .fltR { width: auto; } #comapny .history {} #comapny .history h3 { font-size:18px; letter-spacing:0.2em; margin: 30px 0 15px; } #comapny .history h3 span { padding:0 0 0 15px; font-size:20px; } #comapny .history h4 { margin:0 0 8px; } #comapny .history .history_list { margin:40px 0 40px !important; } #comapny .history .history_list li { padding:15px 10px; } #comapny .history .history_list li span { display: inherit; } #comapny .history .history_list li .year { font-size:15px; float:none; width:auto; } #comapny .history .history_list li .txt { width:auto; } #comapny .history .btn { margin:40px 0 70px; } #comapny .history .btn a { font-size:15px; } #comapny .history .term { position:relative; } #comapny .history .term01 { position:relative; z-index:400; } #comapny .history .term02 { position:absolute; top:0; left:24.4%; z-index:300; } #comapny .history .term03 { position:absolute; top:0; left:48.8%; z-index:200; } #comapny .history .term04 { position:absolute; top:0; right:0; z-index:100; } #comapny .history .term img { width:28%; height:auto; } #comapny .history .history01 .pic_box { margin:0; } #comapny .history .history01 .pic_box li { float:none; text-align:center; } #comapny .history .history01 .pic_box li .inner { margin:0 auto 30px; } #comapny .history .history01 .pic_box li .inner span { font-size:11px; line-height:1.6em; text-align:left; } .history01 .pic01 { width:100%; margin:0 auto; } .history01 .pic02 { width:60%; } #comapny .history .history02 .pic_box { margin:0; } #comapny .history .history02 .pic_box li { float:none; } #comapny .history .history02 .pic_box li .inner { margin:0; } #comapny .history .history03 .pic_box { margin:0 0 0 -10px; } #comapny .history .history03 .pic_box li { width:33.333%} #comapny .history .history03 .pic_box li .inner { margin:0 0 0 10px; } #comapny .history .history03 .pic_box li .inner span { font-size:11px; line-height:1.6em; text-align:left; } .history03 .mb60 { margin-bottom:40px !important; } #comapny .history .history04 .pic_box { margin:0; } #comapny .history .history04 .pic_box li { float:none; text-align:center; } #comapny .history .history04 .pic_box li .inner { margin:0 auto 30px; } #comapny .history .history04 .pic_box li .inner span { font-size:11px; line-height:1.6em; text-align:left; } .history04 .pic01 { width:100%; margin:0 auto; } .history04 .pic02 { width:60%; } /*　Contact　*/ #contact .bigtit { background-color: #d4d8df; padding: 16px 0; margin: 52px 0 0 } #contact #contents .categories { background-color: #e2e2e3; text-align:center } #contact #contents .categories li a { display: block; padding: 20px 50px; position: relative; font-size: 14px } #contact #contents .categories li.cur a div { background-color: #d4d8df; } #contact .contact { width: auto; margin: 40px auto 0; text-align: center; padding: 0 0 40px } #contact .contact span.line { display: block; width: 100%; height: 5px; background: url(../img/contact_line.png) no-repeat; background-size: contain } #contact .contact tr { padding: 0 0 2px; background: url(../img/news_line02.png) repeat-x bottom; position: relative } #contact .contact th { padding: 10px; font-size: 14px; line-height: 2; font-weight: bold } #contact .contact td { padding: 10px; font-size: 13px; line-height: 2 } #contact .contact dt { width: 90% } #contact .contact dd { width: 90%; padding-top: 0 !important } #contact .form-box01 { border:0; font-size:16px; color:#aaa; border:solid 1px #ccc; margin:0; padding: 0 10px border:1px solid #cdcac8; width:240px; height:50px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } #contact textarea { border:0; font-size:16px; color:#aaa; border:solid 1px #ccc; margin:0; border:1px solid #cdcac8; width:240px; height:110px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:10px 0 } #contact .form-btn { background:#4e453b; border:none; color:#fff; font-size:16px; letter-spacing:4px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:15px 0; cursor:pointer; width:280px; margin:20px 0 40px; } /* mailform */ .text-success { padding: 40px; font-size: 16px; font-weight: bold } .text-success span { padding: 40px; font-size: 13px; font-weight: normal } .text-danger { padding: 40px; font-size: 16px; color: #C00; font-weight: bold } #button_default, .MyMailForm_btn { background:#4e453b; border:none; color:#fff; font-size:16px; letter-spacing:4px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; padding:15px 0; cursor:pointer; width:280px; margin:20px 0 40px; } #form_submit { text-align: center !important } /* request */ .request .read { padding: 0 20px } .request .docs { width: 95% !important } .request .two-column { margin: 0; } .request .two-column li { width: 100%; float: none } .request .two-column li .doc { padding: 0 } .request .two-column li .doc .doc-inner { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 15px; margin: 5px 0; background: #f8f6f3 } .request .two-column li .doc .doc-inner .cover { text-align: center; padding: 0 0 20px } .request .two-column li .doc .doc-inner h4 { padding: 0 0 0.5em; margin-bottom: 0.5em; border-bottom: solid 1px #d5d8de; } .request .two-column li .doc .doc-inner label { font-size: 15px; line-height: 1.6; } .request .two-column li .doc .doc-inner label span { font-size: 12px; font-weight: normal } /*　Privacy Policy　*/ #privacy .bigtit { background-color: #d4d8df; padding: 16px 0; margin: 52px 0 0 } #privacy .privacy { width: auto; margin: 0 auto; text-align: left } #privacy .privacy h3 { font-size: 18px; margin: 0 0 20px } #privacy .privacy .read { padding: 10px 20px 30px } #privacy .privacy .sec { padding: 0 20px 20px; margin: 0 0 20px; background: url(../img/dotline01.png) repeat-x bottom transparent; } .mov iframe { width: 100% !important; height: 190px !important; } .list li { float:none; } .list .inner { padding:10px 15px; /* border-radius */ border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; } .list li img { padding:0 10px 0 0; width:70px } .list li img.pdf { position:absolute; bottom:10px; right:0; width: auto; height:20px; } .list li p { padding:10px 0 0 0; font-size:14px; letter-spacing:0.2em; } /*　Recipes　*/ #recipes .contents_inner { padding:0; } #recipes .contents_inner .next_product { position: absolute; right: 0; top: auto; bottom: 85px } #recipes .contents_inner .next_product a { position: relative; z-index: 1 } #recipes .contents_inner .next_product .next_thumb { position: absolute; left: -120px; top: 0; width: 120px; z-index: 0 } #recipes .contents_inner .next_product .next_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #recipes .contents_inner .prev_product { position: absolute; left: 0; top: auto; bottom: 85px } #recipes .contents_inner .prev_product a { position: relative; z-index: 1 } #recipes .contents_inner .prev_product .prev_thumb { position: absolute; left: 40px; top: 0; width: 120px } #recipes .contents_inner .prev_product .prev_thumb span { text-align: center; font-size: 14px; font-family: 'GreycliffCF-BoldOblique'; color: #25426b; margin-top: 5px; display: none } #recipes .btn_sort { margin:20px 0 0; } #recipes .btn_sort li { float:left; display:block; padding:0; width:50%; margin:0 0 10px; } #recipes .btn_sort li a { width:100%; } #recipes .btn_sort span { padding:0 5px; display:block; } #recipes .recipe_idx { padding:0 } #recipes .recipe_idx h2 { font-size: 20px; margin:0 0 20px; } #recipes .recipe_idx h2 span { font-size: 13px } #recipes .recipe_idx .recipe_list li { width:50%; float: left; } #recipes .recipe_idx .movie_list li { width:50%; float: left; } #recipes .recipe_idx li .idx_inner { margin:0 10px 20px; } #recipes .recipe_idx li .idx_inner h3 { font-size: 12px; margin:10px 0 0 } #recipes .ico_new { position:absolute; top:10px; right:10px; height:30px; } #recipes .recipe_idx .btn a { padding:20px 0; margin:0 10px 45px; font-size: 13px; } #recipes .recipe { width: auto; margin: 0 auto 160px; padding: 30px 20px 20px; } #recipes .recipe .title { margin-bottom: 20px; } #recipes .recipe .title h2 { font-size: 20px; } #recipes .recipe .l { float: none; width: auto; margin: 0 0 20px } #recipes .recipe .r { float: none; width: auto; margin: 0 0 20px } #recipes .recipe .l .main { background-color: #fff; padding: 10px; margin: 0 0 30px; /* box-shadow */ box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -moz-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7; -webkit-box-shadow:0px 0px 6px 3px #eeeae7,0px 0px 8px 0 #eeeae7;} #recipes .recipe .l .materials {} #recipes .recipe .l .materials img { width: 100%; } #recipes .recipe .l .materials .img_box { float:left; width:47%; } #recipes .recipe .l .materials .img_box p { font-size:11px; } #recipes .recipe .l .materials .txt { width: 47%; float: right; display: block } #recipes .recipe .l .point { margin:30px 0 0 0; } #recipes .recipe .l .point img { width: 47%; float: left; } #recipes .recipe .l .point .txt { width: 47%; float: right; display: block } #recipes .recipe .r .step { margin: 0 0 30px; position: relative } #recipes .recipe .r .step .num { position: absolute; left: 15px; top: -14px } #recipes .recipe .r .step .pic { width: 47%; float: left;} #recipes .recipe .r .step .txt { width: 47%; float: right; display: block; font-size: 14px } #recipes .recipe .num_alt { font-size:30px; top:-30px; left:8px; } #recipes .recipe .num_tx { font-size:30px; top:-30px; left:8px; } #recipes .recipe .btn_backto { margin:30px 0 0; padding: 30px 0 0; } #recipes .recipe .mov { margin:0 0 10px; } } @media screen and (max-width: 320px) { #header h1 { margin: 0 15px; } #header h1 img { height: 22px } /* #header #h_sns_btn { position: absolute; right: 100px; top: 14px; display: block } #header #h_sns_btn li { float: left; margin: 0 } #header #h_sns_btn li img { height: 26px } */ #header #h_sns_btn { position: absolute; right: 90px; top:0; } #header #h_sns_btn li a { width:30px; padding:13px 0; } #header #h_sns_btn li img { height: 26px } #header #globalNav li a { padding: 16px 0 13px ; display: block; text-align: center } #globalNav li a span { position: absolute; top: 0px; left: 0; width: 100%; height: 3px; z-index: 0 } #footer .sitemap #sm_sns_btn { margin:10px 0 0 -8px; } #footer .sitemap #sm_sns_btn li a { width:36px; } #footer .sitemap #sm_sns_btn li img { height: 24px } }