/* ---------------------------------------------------------- #home_catch ---------------------------------------------------------- */ #product_catch { padding: 60px 5%; } @media only screen and (max-width: 900px) { #product_catch { padding: 50px 5%; } } /* .catchArea */ #product_catch .catchArea { text-align: center;} /* .mark_area */ #product_catch .mark_area { margin: 0 auto; width: 100px; height: 100px; background:#a60d0b; position: relative; z-index: 1;} #product_catch .mark_area h2.mark { width: 1000px; max-width: 90%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; color: #fefefe;font-size: 22px; font-family: 'Oswald', sans-serif; font-weight: 300; line-height: 1.2;text-align: center;} #product_catch h2.copy { font-size: 32px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500; letter-spacing: 0.1em; line-height: 1.6; text-align: center; font-feature-settings: "palt";margin-top: 25px;} /* .txtArea */ #product_catch .txtArea { margin-top: 25px;} #product_catch .txtArea p { font-size: 16px; line-height: 2.2; font-weight: 700; font-feature-settings: "palt";} @media only screen and (max-width: 900px) { #product_catch .mark_area {width: 90px; height: 90px;} #product_catch .mark_area h2.mark { font-size: 16px;} #product_catch h2.copy { font-size: 27px;} #product_catch .txtArea { margin-top: 20px;} #product_catch .txtArea p { font-size: 14px; line-height: 2.2;letter-spacing: 0.1em;} } @media only screen and (max-width: 738px) { #product_catch .mark_area {width: 70px; height: 70px;} #product_catch .mark_area h2.mark { font-size: 14px;} #product_catch h2.copy { font-size: 18px;} #product_catch .txtArea { padding: 0 5%;} #product_catch .txtArea p { font-size: 13px; line-height: 2; text-align: left;} #product_catch .txtArea p br { display: none;} } /* ---------------------------------------------------------- #service_pickup ---------------------------------------------------------- */ #product_pickup { padding: 80px 5% 40px; background: #faecec;position: relative; z-index: 0; overflow: hidden; } @media only screen and (max-width: 900px) { #product_pickup { padding: 70px 5% 30px; } } /* .pickup_slider */ .pickup_slider { margin: 0 -15px; padding-bottom: 50px;position: relative; z-index: 0;} .pickup_slider .slider { background: #fefefe; margin: 3px 15px 0; position: relative;z-index: 1;} @media only screen and (max-width: 738px) { .pickup_slider { margin: 0 -5px; padding-bottom: 35px; } .pickup_slider .slider { margin: 3px 5px 0; } } .pickup_slider .slider .img_area { position: relative; z-index: -1;background: #111; overflow: hidden;} .pickup_slider .slider .img_area img { -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } .pickup_slider .slider a:hover .img_area img { opacity:0.5; -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1); -ms-transform: scale(1.1);transform: scale(1.1);} .pickup_slider .slider .new { position: absolute; top: -3px; right:10px; width:40px; height:40px; background: #a60d0b; z-index: 3;} .pickup_slider .slider .new:before { position: absolute; top: 0; right: 0;left: 0; color: #fefefe; font-size: 13px; content: "New"; font-family: 'Oswald', sans-serif; font-weight: 400;line-height: 40px; text-align: center; letter-spacing: 0.5px; z-index: 1;} .pickup_slider .slider .new:after { position: absolute; top:20px; right:0; width:0; height:0; content:""; border: 20px solid; border-color: transparent #a60d0b; z-index: 0;} /* .txt_area */ .pickup_slider .slider .txt_area { padding: 20px 25px 15px; position: relative;z-index: 2; } .pickup_slider .slider .txt_area h4 { font-size: 13px; font-weight: 700; letter-spacing: 1px; line-height: 1.6; text-align: center;} @media only screen and (max-width: 900px) { .pickup_slider .slider a:hover .img_area img { opacity:1; -webkit-transform: scale(1,1);-moz-transform: scale(1,1);-o-transform: scale(1,1); -ms-transform: scale(1,1);transform: scale(1,1); } } /* Arrows */ .pickup_slider .slick-prev, .pickup_slider .slick-next { position: absolute; display: block; height: 20px; width: 100px; line-height: 0; font-size: 0; cursor: pointer; top: auto; bottom: 0; padding: 0; border: none; outline: none; z-index: 3; background: none; color: #111; z-index: 5} .pickup_slider .slick-prev:hover, .pickup_slider .slick-next:hover { outline: none; background: none; } .pickup_slider .slick-prev:hover:before, .pickup_slider .slick-prev:focus:before, .pickup_slider .slick-next:hover:before, .pickup_slider .slick-next:focus:before { opacity: 1; } .pickup_slider .slick-prev.slick-disabled:before, .pickup_slider .slick-next.slick-disabled:before { opacity: 1; } .pickup_slider .slick-prev { left: 15px; right: auto; text-align: center; } [dir="rtl"] .pickup_slider .slick-prev { left: auto; right: 0; } .pickup_slider .slick-next { right: 15px; text-align: center; } [dir="rtl"] .pickup_slider .slick-next { left: 0; right: auto; } .pickup_slider .slick-prev:before, .pickup_slider .slick-next:before { position: absolute; top: 0; bottom: 0; font-family:'FontAwesome'; font-weight: normal; font-size: 20px; line-height: 20px; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pickup_slider .slick-prev:before { left: 0;content: "\f104"; } .pickup_slider .slick-next:before { right: 0; content: "\f105"; } .pickup_slider .slick-prev:after, .pickup_slider .slick-next:after { position: absolute; top: 0; bottom: 0; font-size: 15px;font-family: 'Oswald', sans-serif; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; z-index: 0;} .pickup_slider .slick-prev:after{ left: 20px; content: "PREV";} .pickup_slider .slick-next:after { right: 20px; content: "NEXT"} /* Dot */ .pickup_slider .slick-dots { position: absolute; bottom: 0; list-style: none; display: block; text-align: center;padding: 0px; width: 100%; height: 12px; z-index: 4; } .pickup_slider .slick-dots li { position: relative; display: inline-block; height: 12px; width: 12px; margin: 0px 7px; padding: 0; cursor: pointer; } .pickup_slider .slick-dots li button { border: 0; background:#fefefe; display: block; height: 12px; width: 12px; overflow: hidden; line-height: 0; font-size: 0; color: transparent; cursor: pointer; padding: 5px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} .pickup_slider .slick-dots li.slick-active button { outline: none; background: #a60d0b; } @media only screen and (max-width: 738px) { .pickup_slider .slick-dots { height: 10px; } .pickup_slider .slick-dots li { height: 10px; width: 10px; margin: 0px 6px; } .pickup_slider .slick-dots li button { height: 10px; width: 10px; } } /* .goods_area */ #product_pickup .goods_area { margin: 0 auto; max-width: 1000px; } #product_pickup .goods_box { display: block; margin-top: 10px; padding: 60px 5%; background: #fefefe; position: relative; z-index: 0; } #product_pickup .goods_box:first-child {margin-top: 0;} /* .img_area */ #product_pickup .goods_box .img_area { float: left; width: 47.5%; } /* .txt_area */ #product_pickup .goods_box .txt_area { width: 1000px; max-width: 42.5%; display: inline-block; position: absolute; top: 50%; right: 5%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%);} #product_pickup .goods_box .title_area { margin-bottom: 20px; padding-bottom: 15px; text-align: center; border-bottom: #a60d0b 1px dotted;} #product_pickup .goods_box .title_area .icon { display: block; margin: 0 auto 10px; width: 35px; height: 35px; text-align: center; color: #fefefe; background: #a60d0b; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: relative; z-index: 0;} #product_pickup .goods_box .title_area .icon:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 16px; font-family:'FontAwesome'; content:"\f219"; line-height: 35px;z-index: 1; } #product_pickup .goods_box .title_area h3 { padding: 0 55px; font-size: 18px; font-weight: 700; letter-spacing: 1px; line-height: 1.6; position: relative; z-index: 1; } /* .link_area */ #product_pickup .goods_box .txt_area .link_area { margin-top: 20px;} @media only screen and (max-width: 900px) { #product_pickup .goods_box { display: block; padding: 50px 5%; } #product_pickup .goods_box .img_area { float: none; width: 100%; } #product_pickup .goods_box .txt_area { padding: 30px 2.5% 0; width: 100%; max-width: 100%; display: block; position: static; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);} } #product_pickup .goods_box .txt_area .center {text-align: center;} @media only screen and (max-width: 738px) { #product_pickup .goods_box .title_area h3 { padding: 0; font-size: 16px;} } #product_pickup .brands_area { position: relative; margin: 0 auto; padding: 20px 10px 20px; width:80%; overflow:hidden; background: #fefefe; z-index: 10;} #product_pickup .brand_set { display: block; margin: 10px 1.5% 20px 1.5%; width: 22%; position: relative; float: left; } #product_pickup .brand_set_thum {width: 100%;} #product_pickup .brand_set_text p {font-size:12px; line-height: 1.6em; margin-top: 10px;} #product_pickup .brand_set_wine { display: block; margin: 10px 1.5% 20px 1.5%; width: 17%; position: relative; float: left; } .clear {clear:both;} #product_pickup .brand_toiawase {width: 80%; margin: 0 auto;} #product_pickup .brand_toiawase p.main { font-size: 18px; line-height: 2.2; font-weight: 700; font-feature-settings: "palt"; text-align: center; margin-top: 40px;} #product_pickup .brand_toiawase p.sub { font-size: 14px; line-height: 2.2; font-weight: 400; font-feature-settings: "palt"; text-align: center;} #product_pickup .brand_toiawase .btn_box{width: 75%; margin: 0 auto;} #product_pickup .brand_toiawase .mail_btn { margin-top: 15px; list-style: none; display: block;} #product_pickup .brand_toiawase .mail_btn a { display: block; color:#a60d0b; background: #fefefe; border: #fefefe 1px solid;font-size: 16px; font-weight: 700; height: 57px; line-height: 55px; text-align: center; position: relative; z-index: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} #product_pickup .brand_toiawase .mail_btn a:before { position: absolute; top: 0; left: 15px; bottom: 0;font-family:'FontAwesome';content:"\f003"; font-size: 20px; font-weight: normal;z-index: 0; } #product_pickup .brand_toiawase .tel_btn { margin-top: 15px; list-style: none; display: block;} #product_pickup .brand_toiawase .tel_btn span { display: block; color:#a60d0b; background: #fefefe; border: #fefefe 1px solid;font-size: 20px; font-family: 'Oswald', sans-serif; font-weight: 400; height: 57px; line-height: 55px; text-align: center; position: relative; z-index: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} #product_pickup .brand_toiawase .tel_btn span:before { position: absolute; top: 0; left: 18px; bottom: 0;font-family:'FontAwesome';content:"\f095"; font-size: 23px; font-weight: normal;z-index: 0; } @media only screen and (max-width: 738px) { #product_pickup .brands_area { position: relative; padding: 10px; width:100%; overflow:hidden; background: #fefefe; z-index: 10;} #product_pickup .brand_set { display: block; margin: 10px 2% 10px 2%; width: 45%; position: relative; float: left; overflow: hidden;} #product_pickup .brand_set_thum {width: 100%;} #product_pickup .brand_set_text p {font-size:10px; line-height: 1.4em; margin-top: 5px;} #product_pickup .brand_toiawase {width: 100%;} #product_pickup .brand_toiawase p.main { font-size: 18px; line-height: 1.6; font-weight: 700; font-feature-settings: "palt";letter-spacing: 0em; text-align: center; margin-top: 40px;} #product_pickup .brand_toiawase p.sub { font-size: 14px; line-height: 1.6; font-weight: 400; font-feature-settings: "palt";letter-spacing: 0em; text-align: center; margin-top: 10px;} } /* ---------------------------------------------------------- #product_philosophy ---------------------------------------------------------- */ #product_philosophy { padding: 30px 15% 45px; background: #faecec;} .product_philosophy_w { background: #fafafa;} .product_philosophy_border {border-top: #a60d0b 1px dotted;} #product_philosophy p{line-height: 1.6;} @media only screen and (max-width: 900px) { #product_philosophy { padding: 30px 5% 45px; } } /* .copy_area */ #product_philosophy .copy_area { text-align: center;} #product_philosophy .copy_area h3 {font-size: 27px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500; letter-spacing: 0.1em; line-height: 1.6; text-align: center; font-feature-settings: "palt";} #product_philosophy .copy_area h3 br.sp_block { display: none;} @media only screen and (max-width: 900px) { #product_philosophy .copy_area h3 {font-size: 20px;} } @media only screen and (max-width: 738px) { #product_philosophy .copy_area h3 {font-size: 20px;} } @media only screen and (max-width: 414px) { #product_philosophy .copy_area h3 {letter-spacing: 0.1em;} #product_philosophy .copy_area h3 br.sp_block { display: block;} } /* .philosophy_area */ #product_philosophy .philosophy_area { margin-top: 50px; } #product_philosophy .philosophy_box { margin-top: 30px; position: relative; z-index: 1; background: #faecec;background: url(../images/common/noise.png) repeat #fafafa;} #product_philosophy .philosophy_box:first-child { margin-top: 0;} /* .img_area */ #product_philosophy .philosophy_box .img_area { float: left; width: 47.5%; } #product_philosophy .philosophy_box:nth-child(2n) .img_area { float: right;} /* .txt_area */ #product_philosophy .philosophy_box .txt_area { width: 1000px; max-width: 42.5%; display: inline-block; position: absolute; top: 50%; right: 5%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%);} #product_philosophy .philosophy_box:nth-child(2n) .txt_area { right:auto; left: 5%;} @media only screen and (max-width: 900px) { #product_philosophy .philosophy_box .img_area { float: none; width: 100%; } #product_philosophy .philosophy_box:nth-child(2n) .img_area { float: none;} #product_philosophy .philosophy_box .txt_area { width: auto; max-width: 100%; display: block; padding: 35px 7.5% 30px; position: static; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);} } /* .title_area */ #product_philosophy .philosophy_box .title_area { text-align: center; } #product_philosophy .philosophy_box .no { margin: 0 auto; width: 50px; height: 50px; text-align: center; color: #fefefe; background: #a60d0b; font-size: 25px; font-family: 'Oswald', sans-serif; font-weight: 400;letter-spacing: 0; line-height: 50px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} #product_philosophy .philosophy_box h2 { margin-top: 20px; color: #a60d0b; font-size: 38px; font-family: 'alluraregular'; font-weight: normal; line-height: 1; position: relative; z-index: 1;} #product_philosophy .philosophy_box h3 { margin: 15px 0 20px; font-size: 24px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500; line-height: 1.7; letter-spacing: 0.1em; font-feature-settings: "palt"; text-align: center;} #product_philosophy .philosophy_box h3.brand_name {font-size: 24px; font-family: 'Oswald', sans-serif; font-weight: 400;letter-spacing: 1px; margin-top: 0;} #product_philosophy .philosophy_box p { font-size: 16px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:500; line-height: 1.6; text-align: center; font-feature-settings: "palt";} @media only screen and (max-width: 900px) { #product_philosophy .philosophy_box .no { width: 40px; height: 40px; font-size: 18px; line-height: 40px; } #product_philosophy .philosophy_box h2 { font-size: 25px;} #product_philosophy .philosophy_box h3 { font-size: 18px; } #product_philosophy .philosophy_box h3.brand_name {font-size: 22px; } #product_philosophy .philosophy_box p { font-size: 12px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:500; line-height: 1.6; text-align: center; font-feature-settings: "palt";} } @media only screen and (max-width: 738px) { #product_philosophy .philosophy_box h2 { font-size: 22px;} #product_philosophy .philosophy_box h3 { font-size: 16px; } #product_philosophy .philosophy_box h3.brand_name {font-size: 20px; } #product_philosophy .philosophy_box p { font-size: 12px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:500; line-height: 1.6; text-align: center; font-feature-settings: "palt";} } #product_philosophy .please h3 { margin: 40px 0 15px; font-size: 24px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500; line-height: 1.7; font-feature-settings: "palt"; text-align: center;} @media only screen and (max-width: 738px) { #product_philosophy .please h3 {margin: 30px 0 0; font-size: 16px;} } /* ---------------------------------------------------------- #product_catalog ---------------------------------------------------------- */ #product_catalog { padding: 80px 5%;position: relative; z-index: 1; } @media only screen and (max-width: 900px) { #product_catalog { padding: 70px 5%; } } #product_catalog:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: url(../images/common/noise.png) repeat rgba(0,0,0,0.6); z-index: -1} #product_catalog:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; z-index: -2} .bg_catalog_bread:after {background:url(../images/product/bread/bg_catalog.jpg) bottom center no-repeat; background-size: cover;} .bg_catalog_sweets:after {background:url(../images/product/sweets/bg_catalog.jpg) center center no-repeat; background-size: cover;} .bg_catalog_wine:after {background:url(../images/product/wine/bg_catalog.jpg) center center no-repeat; background-size: cover;} /* h2.title */ #product_catalog .headline h2.title { color: #fefefe;} /* .catalog_area */ #product_catalog .catalog_area { font-size: 0; margin: -20px; text-align: center;} #product_catalog .catalog_box { display: inline-block; margin:0; width: 50%; border:transparent 20px solid;position: relative; z-index: 1;} #product_catalog .catalog_box .inner { padding: 50px 5%; background:rgba(255,255,255,0.9); position: relative; z-index: 0; } #product_catalog .catalog_box .inner:after { position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; content: ""; border:#a60d0b 2px solid; z-index: 1; opacity: 0.8;} /* .img_area */ #product_catalog .catalog_box .img_area { margin: 0 auto 20px;} #product_catalog .catalog_box h3 { font-size: 18px; font-weight: 700; line-height: 1.5; font-feature-settings: "palt"; letter-spacing: 0.1em;} #product_catalog .catalog_box h4 { margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 1;} /* .link_area */ #product_catalog .catalog_box .link_area { margin-top:20px; text-align:center; z-index: 2; position: relative } @media only screen and (max-width: 900px) { #product_catalog .catalog_area { margin: 0; } #product_catalog .catalog_box { margin-top: 30px; width: 66.666%; border:none; } #product_catalog .catalog_box:first-child { margin-top: 0; } #product_catalog .catalog_box .inner { padding: 45px 5%; } #product_catalog .catalog_box h3 { font-size: 16px; } #product_catalog .catalog_box h4 { margin-top: 10px; font-size: 13px;} } @media only screen and (max-width: 738px) { #product_catalog .catalog_box { width: 100%; } #product_catalog .catalog_box .inner { padding: 40px 5%; } #product_catalog .catalog_box .img_area { margin: 0 auto 20px;} #product_catalog .catalog_box h3 { font-size: 14px; } #product_catalog .catalog_box h4 { margin-top: 5px;font-size: 12px;} } /* ---------------------------------------------------------- #product_banner　※home.cssと重複 ---------------------------------------------------------- */ #product_banner { padding: 40px 5%; position: relative; z-index: 1;background: url(../images/common/noise.png) repeat #eeeeee;} #product_banner:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; position: relative; z-index: -1;} @media only screen and (max-width: 900px) { #product_banner { padding: 30px 5%; } } /* .inner_banner */ #product_banner .inner_banner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1;} /* .banner_area */ #product_banner .banner_area { text-align: center;} #product_banner .banner_box { margin-top: 10px; background: #fefefe; height: 250px; border: #eee 1px solid; position: relative; z-index: 1;} #product_banner .banner_box:first-child {margin-top: 0;} /* a */ #product_banner .banner_box a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; z-index: 3;} /* .img_area */ #product_banner .banner_box .img_area { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 40%; z-index: 1; background: #111; overflow: hidden;} #product_banner .banner_box .img_area:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; z-index: 2;-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease;} #product_banner .banner_box:hover .img_area:before {opacity:0.5; -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);} /* バナー画像　*/ #product_banner .banner_box_ss .img_area:before { background: url(../images/banner-img_ss.jpg) center center no-repeat; background-size: cover; } #product_banner .banner_box_fds .img_area:before { background: url(../images/banner-img_fds.jpg) center center no-repeat; background-size: cover; } /* .txt_area */ #product_banner .banner_box .txt_area { width: 1000px; max-width: 40%; display: inline-block; position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%);} /* h3.logo */ #product_banner .banner_box_ss h3.logo { margin: 0 auto; width: 200px; height: 32px; background: url(../images/logo_signifiant_signifie.png) center center no-repeat; background-size: cover; font-size: 0;} #product_banner .banner_box_fds h3.logo { margin: 0 auto; width: 200px; height: 85px; background: url(../images/logo_fds.png) center center no-repeat; background-size: cover; font-size: 0;} /* ol */ #product_banner .banner_box_ss ol { list-style: none; font-size: 0; margin: 10px 0 0 3px;} #product_banner .banner_box_ss ol li { display: inline-block; padding: 0; font-size: 12px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500;line-height: 1.2; font-feature-settings: "palt"; letter-spacing: 0.1em;} #product_banner .banner_box_ss ol li:first-child {font-size: 14px;} #product_banner .banner_box_fds ol { list-style: none; font-size: 0; margin: 10px 0 0 3px;} #product_banner .banner_box_fds ol li { display: inline-block; padding: 0; font-size: 14px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500;line-height: 1.7; font-feature-settings: "palt"; letter-spacing: 0.1em;} /* span.btn_circle */ #product_banner .banner_box span.btn_circle { position: absolute; top: 50%; right: 25px; margin-top: -25px; width: 50px; height: 50px; z-index: 1;} #product_banner .banner_box span.btn_circle:before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; color:#fefefe; font-size: 25px; font-family:'FontAwesome';content:"\f105";font-weight:normal;text-align: center; line-height: 50px; z-index: 0; } #product_banner .banner_box span.btn_circle:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background:#a60d0b; z-index: -1;-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} @media only screen and (max-width: 900px) { #product_banner .banner_box .img_area { left: 50%;} #product_banner .banner_box:hover .img_area:before {opacity:1; -webkit-transform: scale(1,1);-moz-transform: scale(1,1);-o-transform: scale(1,1);-ms-transform: scale(1,1);transform: scale(1,1);} #product_banner .banner_box .txt_area { max-width: 50%; } #product_banner .banner_box_ss h3.logo { width: 170px; height: 27px;} #product_banner .banner_box_ss ol { margin: 10px 0 0 3px;} #product_banner .banner_box_ss ol li { font-size: 11px; } #product_banner .banner_box_fds h3.logo { width: 130px; height: 55px;} #product_banner .banner_box_fds ol { margin: 10px 0 0 3px;} #product_banner .banner_box_fds ol li { font-size: 11px; } #product_banner .banner_box span.btn_circle { right: 20px; margin-top: -20px; width: 40px; height: 40px; } #product_banner .banner_box span.btn_circle:before { font-size: 20px; line-height: 40px;} } @media only screen and (max-width: 738px) { #product_banner .banner_box { height: auto;} #product_banner .banner_box .img_area { position: relative; top: 0; left: 0; width: 100%; height: 150px;} #product_banner .banner_box .txt_area { width: 100%; max-width: 100%; padding: 30px 5%; display: block; position: static; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);} #product_banner .banner_box span.btn_circle { display: none; } } /* ---------------------------------------------------------- 詳細ページ ---------------------------------------------------------- */ /* ---------------------------------------------------------- #product_image ---------------------------------------------------------- */ #product_image { position: relative; z-index: 1; } /* .img_area */ #product_image .img_area { padding: 80px 5%;position: relative; z-index: 1;} #product_image .img_area .inner { margin: 0 auto; max-width: 600px;} /* .title_area */ #product_image .title_area { margin-top: -130px; padding: 0 5% 40px; text-align: center;} /* .mark_area */ #product_image .mark_area { margin: 0 auto 25px; width: 100px; height: 100px; background:#a60d0b; position: relative; z-index: 1;} #product_image .mark_area h2.mark { width: 1000px; max-width: 90%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-5deg); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; color: #fefefe;font-size: 22px; font-family: 'Oswald', sans-serif; font-weight: 300; line-height: 1.2;text-align: center;} /* h3,h2 */ #product_image h3 { color: #a60d0b; font-size: 16px; font-family: 'Oswald', sans-serif; font-weight: 400; line-height: 1.2; letter-spacing: 0.5px; text-align: center;} #product_image h2.name { font-size: 30px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500; letter-spacing: 0.15em; line-height: 1.6; text-align: center; font-feature-settings: "palt";margin-top: 15px;} #product_image h2.name span { display: block; font-size: 0.5em; letter-spacing: 0.1em;} /* .txt_area */ #product_image .txt_area { margin-top: 25px;} #product_image .txt_area p { font-size: 15px; line-height: 2.2; font-weight: 700; font-feature-settings: "palt";letter-spacing: 0.2em;} @media only screen and (max-width: 900px) { #product_image .img_area { padding: 70px 5% 0; } #product_image .title_area { margin-top: 0; padding: 35px 5% 20px; } #product_image .mark_area { margin: 0 auto 25px; width: 90px; height: 90px;} #product_image .mark_area h2.mark { font-size: 16px; } #product_image h3 { font-size: 15px; } #product_image h2.name { font-size: 27px; } #product_image .txt_area { margin-top: 20px; } #product_image .txt_area p { font-size: 14px; line-height: 2.2; letter-spacing: 0.1em;} } @media only screen and (max-width: 738px) { #product_image .mark_area { margin: 0 auto 25px; width: 70px; height: 70px;} #product_image .mark_area h2.mark { font-size: 14px; } #product_image h3 { font-size: 14px; } #product_image h2.name { font-size: 18px; } #product_image .txt_area { padding: 0 5%; } #product_image .txt_area p { font-size: 13px; line-height: 2; text-align: left; } #product_image .txt_area p br { display: none;} } /* ---------------------------------------------------------- #product_content ---------------------------------------------------------- */ #product_content { padding: 80px 5%; position: relative; z-index: 0;background: #faecec;} #product_content:before { position: absolute; top: -50px; left: 50%; width: 0; height: 100px; content: ""; border-right: #a60d0b 0px solid; z-index: 0;} @media only screen and (max-width: 900px) { #product_content { padding: 70px 5%; } #product_content:before { position: absolute; top: -40px; height: 80px; } } @media only screen and (max-width: 738px) { #product_content:before { position: absolute; top: -25px; height: 50px; } } /* .content_area */ #product_content .content_area {} /* .content_box */ #product_content .content_box { margin-top: 10px; overflow: hidden;position: relative; z-index: 1; background: #fefefe;} #product_content .content_box:first-child { margin-top: 0;} /* .title_area */ #product_content .title_area { float: left; width: 25%; padding: 60px 5%; position: relative; z-index: 0; } #product_content .title_area:after{ position: absolute; top: 10px; right: 0; bottom: 10px; width: 0; content: ""; border-right:#a60d0b 1px dotted;z-index: 1;} /* h3 */ #product_content .title_area .inner h3 {margin-top: 5px; color: #a60d0b; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: 1px; text-align: center;} @media only screen and (max-width: 1024px) { #product_content .title_area { width: 30%; } #product_content .title_area .inner h3 {font-size: 18px;} } @media only screen and (max-width: 900px) { #product_content .title_area { padding: 50px 2.5%; } #product_content .title_area .inner h3 {font-size: 16px; margin-top: 0;} } @media only screen and (max-width: 738px) { #product_content .title_area { float: none; width: 100%;padding: 20px 5%; } #product_content .title_area:after{ position: absolute; top: auto; right: 10px; bottom: 0; width: auto; left: 10px;border-right:none;border-bottom:#a60d0b 1px dotted;} #product_content .title_area .inner h3 {font-size: 14px;} } /* .txt_area */ #product_content .txt_area { float: right; width: 75%;padding: 60px 5%; } #product_content .txt_area h3 { margin-bottom: 10px; font-size: 20px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500; letter-spacing: 0.15em; line-height: 1.8; font-feature-settings: "palt";} @media only screen and (max-width: 1024px) { #product_content .txt_area { width: 70%; } #product_content .txt_area h3 { font-size: 18px; } } @media only screen and (max-width: 900px) { #product_content .txt_area { padding: 50px 5%; } #product_content .txt_area h3 { font-size: 16px; } } @media only screen and (max-width: 738px) { #product_content .txt_area { float: none; width: 100%;padding: 25px 5% 35px; } #product_content .txt_area h3 { padding: 0 2.5%; font-size: 14px; } } /* ul.circle */ ul.circle { list-style: circle; padding-left: 1.25em;} ul.circle li { font-size: 14px; font-weight: 500; line-height: 2; letter-spacing: 1px;} ul.circle li ul { list-style: none; } ul.circle li ul li { position: relative; z-index: 0; padding-left: 1.25em;} ul.circle li ul li:before { position: absolute; top: 0; left: 0; content: "・";} /* ul.no */ ul.no { list-style-type: decimal;padding-left: 1.25em;} ul.no li { font-size: 14px; font-weight: 500; line-height: 2; letter-spacing: 1px; position: relative; z-index: 1;} @media only screen and (max-width: 900px) { ul.circle li, ul.no li{ font-size: 13px;letter-spacing: 0.5px;} } @media only screen and (max-width: 768px) { ul.circle li, ul.no li{ font-size: 12px;} } /* .product_area*/ #product_content .product_area {} #product_content .product_box { padding: 35px 0; border-top: #a60d0b 1px dotted;} #product_content .product_box:last-child { padding: 35px 0 0; } #product_content .product_box:first-child { padding: 0 0 35px; border:none;} /* .product_box_one */ #product_content .product_box_one { padding: 0; border:none;} #product_content .product_box_one:last-child { padding: 0; } #product_content .product_box_one:first-child { padding: 0; border:none;} /* .img_area*/ #product_content .product_box .img_area { float: left; width: 35%;} /* .detail_area*/ #product_content .product_box .detail_area { float: right; width: 60%;} /* .product_box_only_txt （画像なし）*/ #product_content .product_box_only_txt .detail_area { float: none; width: 100%;} #product_content .product_box .detail_area h4 { margin-bottom: 15px; padding: 15px 20px;background:#a60d0b; color: #fefefe; font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: 1px;} #product_content .product_box .detail_area h5 {margin-bottom: 10px; font-size: 16px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 700; letter-spacing: 0.15em; line-height: 1.7; font-feature-settings: "palt";} #product_content .product_box .detail_area p { font-size: 13px; line-height: 1.9;} /* dl */ #product_content .product_box .detail_area dl { display: block; overflow: hidden; margin-top: 10px; font-size: 13px;font-weight: 500;line-height: 1.9; letter-spacing: 1px;} #product_content .product_box .detail_area dl dt{ float: left; clear: both; width: 50px;background: #faecec; text-align: center;} #product_content .product_box .detail_area dl dd{ padding-left: 60px; } @media only screen and (max-width: 900px) { #product_content .product_box .img_area { float: none; width: 100%;} #product_content .product_box .detail_area { float: none; width: 100%; margin-top: 20px;} #product_content .product_box .detail_area h4 { padding: 10px 15px;font-size: 15px; letter-spacing: 0.5px; } } @media only screen and (max-width: 738px) { #product_content .product_box { padding: 25px 0; } #product_content .product_box:last-child { padding: 25px 0 0; } #product_content .product_box:first-child { padding: 0 0 25px;} #product_content .product_box .detail_area h4 { font-size: 14px; } #product_content .product_box .detail_area dl { margin-top: 5px; font-size: 12px; line-height: 1.8;} } /* ---------------------------------------------------------- #product_others ---------------------------------------------------------- */ #product_others { padding: 80px 5%; background: url(../images/common/noise.png) repeat #fafafa; overflow: hidden;} @media only screen and (max-width: 900px) { #product_others { padding: 70px 5%; } } /* .others_area */ #product_others .others_area { margin: -25px; font-size: 0; } #product_others .others_box { display: inline-block; width: 33.333%; margin: 0; border: transparent 25px solid; } #product_others .others_box .inner { background: #fefefe; } #product_others .others_box .img_area { position: relative; z-index: 0; background: #111; overflow: hidden; } #product_others .others_box .img_area img { -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } #product_others .others_box a:hover .img_area img { opacity:0.5; -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1); } #product_others .others_box .txt_area { padding: 20px 25px 30px; position: relative;z-index: 2; } #product_others .others_box .txt_area h4 { font-size: 13px; font-weight: 700; letter-spacing: 1px; line-height: 1.9; } @media only screen and (max-width: 900px) { #product_others .others_area { margin: -15px; } #product_others .others_box { width: 50%; border: transparent 15px solid; } #product_others .others_box a:hover .img_area img { opacity:1; -webkit-transform: scale(1,1);-moz-transform: scale(1,1);-o-transform: scale(1,1);-ms-transform: scale(1,1);transform: scale(1,1); } #product_others .others_box .txt_area { padding: 20px 7.5% 30px; } } @media only screen and (max-width: 738px) { #product_others .others_area { margin: -5px; } #product_others .others_box { border: transparent 5px solid; } #product_others .others_box .txt_area { padding: 20px 7.5%; } #product_others .others_box .txt_area h4 { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.7; } } /* ---------------------------------------------------------- #pickup_content ---------------------------------------------------------- */ #pickup_content { padding: 40px 5% 80px; position: relative; z-index: 0;background: #faecec;} #pickup_content:before { position: absolute; top: -50px; left: 50%; width: 0; height: 100px; content: ""; z-index: 0;} @media only screen and (max-width: 900px) { #pickup_content { padding: 20px 5%; } #pickup_content:before { position: absolute; top: -40px; height: 80px; } } @media only screen and (max-width: 738px) { #pickup_content:before { position: absolute; top: -25px; height: 50px; } } #pickup_content .content_area {} #pickup_content .content_bg {width: 80%; margin: 10px auto 0; padding: 60px 10px 60px; background-color: #FBF6F6;} @media only screen and (max-width: 738px) { #pickup_content .content_bg {width: 95%; margin: 10px auto 0; padding: 20px 15px 30px; background-color: #FBF6F6;} } /* ---------------------------------------------------------- #pickup_content -bread1802001- ---------------------------------------------------------- */ #pickup_content .bread1802001 .txt { text-align: center; font-size: 16px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 300; letter-spacing: 0.15em; line-height: 1.6; font-feature-settings: "palt"; margin-bottom: 10px;} #pickup_content .bread1802001 .txt-s { text-align: center; font-size: 12px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 300; letter-spacing: 0.15em; line-height: 1.6; font-feature-settings: "palt"; margin-bottom: 10px;} #pickup_content .bread1802001 .heading { text-align: center; font-size: 34px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500; letter-spacing: 0.15em; line-height: 1.8; font-feature-settings: "palt"; margin-bottom: 10px;} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .txt { text-align: left; font-size: 12px; } #pickup_content .bread1802001 .txt-s { text-align: left; font-size: 10px; } #pickup_content .bread1802001 .heading { font-size: 22px; line-height: 1.4; } } #pickup_content .bread1802001 .heading-goth-s { margin: 0; font-size: 26px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:600; letter-spacing: 0.15em; line-height: 1.0; text-align: center; font-feature-settings: "palt";} #pickup_content .bread1802001 .heading-goth { margin: 0; font-size: 40px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:600; letter-spacing: 0.15em; line-height: 1.6; text-align: center; font-feature-settings: "palt";} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .heading-goth-s { font-size: 18px;} #pickup_content .bread1802001 .heading-goth { font-size: 24px;} } #pickup_content .bread1802001 .hr-bread {width: 20%; margin: 30px auto;} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .hr-bread {width: 40%; margin: 20px auto;} } #pickup_content .bread1802001 .img01 {width: 40%; margin: 60px auto 20px;} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .img01 {width: 90%; margin: 60px auto 20px;} } #pickup_content .bread1802001 .hr-line-top {width: 80%; margin: 60px auto 20px;} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .hr-line-top {width: 80%; margin: 40px auto 0;} } #pickup_content .bread1802001 .hr-line-bottom {width: 80%; margin: 60px auto 80px;} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .hr-line-bottom {width: 80%; margin: 20px auto 20px;} } #pickup_content .bread1802001 ul {list-style:none;} #pickup_content .bread1802001 .pdf-btn:first-child {width: 30%; margin: 20px auto 5px;} #pickup_content .bread1802001 .pdf-btn {width: 30%; margin: 5px auto;} #pickup_content .bread1802001 .pdf-btn:last-child {width: 30%; margin: 5px auto 20px;} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .pdf-btn:first-child {width: 80%; margin: 20px auto 5px;} #pickup_content .bread1802001 .pdf-btn {width: 80%; margin: 5px auto;} #pickup_content .bread1802001 .pdf-btn:last-child {width: 80%; margin: 5px auto 10px;} } #pickup_content .bread1802001 .img02 {width: 80%; margin: 60px auto 20px;} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .img02 {width: 90%; margin: 30px auto 10px;} } #pickup_content .bread1802001 .pdf-btn-2 {width: 65%; margin: 10px auto;} @media only screen and (max-width: 738px) { #pickup_content .bread1802001 .pdf-btn-2 {width: 100%; margin: 10px auto;} } #pickup_content .bottom_info {width: 70%; margin: 40px auto 0; padding: 20px; border: 1px solid #8e2712;} #pickup_content .bottom_info .img {width: 40%; float: left; margin: 0; padding: 0;} #pickup_content .bottom_info .txt {width: 60%; float: left; margin: 0; padding: 0 0 0 10px;} #pickup_content .bottom_info .txt .txt1 { text-align: center; font-size: 20px; color:#8e2712; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 600; letter-spacing: 0.15em; line-height: 1.2; font-feature-settings: "palt"; margin-bottom: 10px;} #pickup_content .bottom_info .txt .txt2 { text-align: center; font-size: 32px; color:#8e2712; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 600; letter-spacing: 0.15em; line-height: 1.2; font-feature-settings: "palt"; margin-bottom: 10px;} #pickup_content .bottom_info .txt .txt3 { text-align: center; font-size: 14px; color:#8e2712; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 300; letter-spacing: 0.15em; line-height: 1.6; font-feature-settings: "palt";} #pickup_content .bottom_info .txt .btn {width: 50%; margin: 20px auto 0;} @media only screen and (max-width: 738px) { #pickup_content .bottom_info {width: 90%; margin: 30px auto 0; padding: 10px;} #pickup_content .bottom_info .img {width: 90%; float: none; margin: 0 auto;} #pickup_content .bottom_info .txt {width: 100%; float: none; padding: 10px;} #pickup_content .bottom_info .txt .txt1 { font-size: 14px; line-height: 1.2; margin-bottom: 5px;} #pickup_content .bottom_info .txt .txt2 { font-size: 20px; line-height: 1.2; margin-bottom: 5px;} #pickup_content .bottom_info .txt .txt3 { font-size: 12px; line-height: 1.4; } #pickup_content .bottom_info .txt .btn {width: 75%; margin: 20px auto 0;} } /* ---------------------------------------------------------- #pickup_content -food_machinery1802001- ---------------------------------------------------------- */ #pickup_content .food_machinery1802001 .txt { text-align: center; font-size: 16px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 300; letter-spacing: 0.15em; line-height: 1.6; font-feature-settings: "palt"; margin-bottom: 10px;} #pickup_content .food_machinery1802001 .txt-s { text-align: center; font-size: 12px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 300; letter-spacing: 0.15em; line-height: 1.6; font-feature-settings: "palt"; margin-bottom: 10px;} #pickup_content .food_machinery1802001 .heading { text-align: center; font-size: 34px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500; letter-spacing: 0.15em; line-height: 1.8; font-feature-settings: "palt"; margin-bottom: 10px;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1802001 .txt { text-align: left; font-size: 12px; } #pickup_content .food_machinery1802001 .txt-s { text-align: left; font-size: 10px; } #pickup_content .food_machinery1802001 .heading { font-size: 22px; line-height: 1.4; } } #pickup_content .food_machinery1802001 .heading-goth-s { margin: 0; font-size: 26px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:600; letter-spacing: 0.15em; line-height: 1.0; text-align: center; font-feature-settings: "palt";} #pickup_content .food_machinery1802001 .heading-goth { margin: 0; font-size: 40px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:600; letter-spacing: 0.15em; line-height: 1.6; text-align: center; font-feature-settings: "palt";} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1802001 .heading-goth-s { font-size: 18px;} #pickup_content .food_machinery1802001 .heading-goth { font-size: 24px;} } #pickup_content .food_machinery1802001 .hr-bread {width: 20%; margin: 30px auto;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1802001 .hr-bread {width: 40%; margin: 20px auto;} } #pickup_content .food_machinery1802001 .hr-line-top {width: 80%; margin: 60px auto 20px;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1802001 .hr-line-top {width: 80%; margin: 40px auto 0;} } #pickup_content .food_machinery1802001 .hr-line-bottom {width: 80%; margin: 60px auto 80px;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1802001 .hr-line-bottom {width: 80%; margin: 20px auto 20px;} } #pickup_content .food_machinery1802001 ul {list-style:none;} #pickup_content .food_machinery1802001 .pdf-btn {width: 20%; margin: 20px auto;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1802001 .pdf-btn {width: 60%; margin: 20px auto 10px;} } #pickup_content .food_machinery1802001 .toiawase-btn {width: 25%; margin: 20px auto;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1802001 .hr-bread {width: 50%; margin: 10px auto;} } /* ---------------------------------------------------------- #pickup_content -food_machinery1803001- ---------------------------------------------------------- */ #pickup_content .food_machinery1803001 .txt { text-align: center; font-size: 16px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 300; letter-spacing: 0.15em; line-height: 1.6; font-feature-settings: "palt"; margin-bottom: 10px;} #pickup_content .food_machinery1803001 .txt-s { text-align: center; font-size: 12px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 300; letter-spacing: 0.15em; line-height: 1.6; font-feature-settings: "palt"; margin-bottom: 10px;} #pickup_content .food_machinery1803001 .heading { text-align: center; font-size: 34px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500; letter-spacing: 0.15em; line-height: 1.8; font-feature-settings: "palt"; margin-bottom: 10px;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1803001 .txt { text-align: left; font-size: 12px; } #pickup_content .food_machinery1803001 .txt-s { text-align: left; font-size: 10px; } #pickup_content .food_machinery1803001 .heading { font-size: 22px; line-height: 1.4; } } /* ---------------------------------------------------------- FOOD MACHINERY - BRAND ---------------------------------------------------------- */ #pickup_content .food_machinery1803001 .content_bg { position: relative; margin: 0 auto; padding: 20px 10px 0; width:80%; overflow:hidden; background: #fefefe; z-index: 10;} #pickup_content .food_machinery1803001 .brand_country {font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 800; font-size:28px; color:#a60d0b; line-height: 1.2em; text-align: center; margin: 30px 0 10px;} #pickup_content .food_machinery1803001 .brand_set { display: block; margin: 20px 1% 20px 1%; width: 31%; position: relative; float: left; } #pickup_content .food_machinery1803001 .brand_set_thum {width: 100%;} #pickup_content .food_machinery1803001 .brand_set_name p {font-family: 'Oswald', sans-serif; font-weight: 400; font-size:22px; color:#a60d0b; line-height: 1.2em; text-align: center; margin-bottom: 10px;} #pickup_content .food_machinery1803001 .brand_set_product p {font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 800; font-size:16px; color:#a60d0b; line-height: 1.2em; text-align: center; margin-bottom: 5px;} #pickup_content .food_machinery1803001 .brand_set_text p {font-size:13px; line-height: 1.5em; margin-top: 10px;} #pickup_content .food_machinery1803001 .toiawase_btn {width: 25%; margin: 60px auto 0;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1803001 .content_bg {padding: 10px; width:100%;} #pickup_content .food_machinery1803001 .brand_country {font-size:20px; margin: 20px 0 10px;} #pickup_content .food_machinery1803001 .brand_set {margin: 10px 2% 10px 2%; width: 45%;} #pickup_content .food_machinery1803001 .brand_set_thum {width: 100%;} #pickup_content .food_machinery1803001 .brand_set_name p {font-size:16px; margin-bottom: 5px;} #pickup_content .food_machinery1803001 .brand_set_product p {font-size:10px; margin-bottom: 5px;} #pickup_content .food_machinery1803001 .brand_set_text p {font-size:10px; line-height: 1.4em; margin-top: 5px;} #pickup_content .food_machinery1803001 .toiawase_btn {width: 50%; margin: 40px auto 20px;} } .brand_main_logo {width: 20%; margin: 30px auto 0;} .brand_txt h2 { font-size: 28px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500; letter-spacing: 0.15em; line-height: 1.6; text-align: center; font-feature-settings: "palt";margin-top: 25px;} .brand_txt p {font-size:16px; line-height: 1.4em; text-align: center; margin: 0; padding: 40px 0;} @media only screen and (max-width: 738px) { .brand_main_logo {width: 50%; margin: 30px auto 0;} .brand_txt p {font-size:12px; line-height: 1.4em; padding: 20px 20px;} } #brand_content { padding: 40px 5% 80px; position: relative; z-index: 0;background: #faecec;} #brand_content .youtube_bg {width: 50%; margin: 10px auto 0; padding: 30px; background-color: #FBF6F6;} @media only screen and (max-width: 738px) { #brand_content { padding: 20px 5%; } #brand_content .youtube_bg {width: 95%; padding: 10px;} } #brand_content .youtube_bg .youtube_embed { position: relative; width: 100%; padding-top: 56.25%; } #brand_content .youtube_bg .youtube_embed iframe { position: absolute; top: -1px; right: -1px; width: 100% !important; height: 100% !important; } #brand_content .text_area {width: 70%; margin: 20px auto 70px;} #brand_content .text_area .txt1 {font-size:18px; line-height: 1.4em; text-align: center; font-weight: 800; margin-bottom: 10px} #brand_content .text_area .txt2 {font-size:16px; line-height: 1.4em; text-align: center; font-weight: 400;} #brand_content .pdf_btn {width: 40%; margin: 0 auto 30px; padding: 0;} #brand_content .toiawase_btn {width: 40%; margin: 10px auto; padding: 0;} @media only screen and (max-width: 738px) { #brand_content .text_area {width: 100%; margin: 10px auto 40px;} #brand_content .text_area .txt1 {font-size:16px;} #brand_content .text_area .txt2 {font-size:12px;} #brand_content .pdf_btn {width: 50%; margin: 10px auto 20px;} #brand_content .toiawase_btn {width: 70%; margin: 10px auto;} } /* ---------------------------------------------------------- FOOD MACHINERY -bread1803003- ---------------------------------------------------------- */ #pickup_content .food_machinery1803003 .content_bg { position: relative; max-width:1400px; width:60%; margin: 0 auto; padding: 0; overflow:hidden; background: #ddbeb7; z-index: 10;} #pickup_content .food_machinery1803003 .content_bg img[usemap] {max-width: 100%; height: auto;} @media only screen and (max-width: 738px) { #pickup_content .food_machinery1803003 .content_bg { width: 100%;} } /* ---------------------------------------------------------- FOOD MACHINERY -pickup1804001- ---------------------------------------------------------- */ .food_machinery1804001 { padding: 0 15% 80px;} @media only screen and (max-width: 738px) { .food_machinery1804001 { padding: 0 5% 40px;} } /* .philosophy_area */ .food_machinery1804001 .philosophy_area { margin: 0; } .food_machinery1804001 .philosophy_box { margin: 0 0 40px 0; position: relative; z-index: 1; background: #faecec;background: url(../images/common/noise.png) repeat #fafafa;} .food_machinery1804001 .philosophy_box .img_area { float: left; width: 37.5%; } .food_machinery1804001 .philosophy_box .txt_area { width: 1000px; max-width: 58%; display: inline-block; position: absolute; top: 50%; right: 1%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%);} @media only screen and (max-width: 900px) { .food_machinery1804001 .philosophy_box .img_area { float: none; width: 100%; } .food_machinery1804001 .philosophy_box .txt_area { width: auto; max-width: 100%; display: block; padding: 35px 7.5% 30px; position: static; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);} } .food_machinery1804001 .philosophy_box .title_area { text-align: center; } .food_machinery1804001 .philosophy_box h2 { margin: 10px 0 20px; color: #a60d0b; font-size: 22px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 700; line-height: 1.2em; letter-spacing: 0.15em; position: relative; z-index: 1;} .food_machinery1804001 .philosophy_box p { font-size: 13px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:500; letter-spacing: 0.15em; line-height: 1.2em; text-align: center; font-feature-settings: "palt";} @media only screen and (max-width: 1280px) { .food_machinery1804001 .philosophy_box h2 { font-size: 17px; letter-spacing: 0.1em;} .food_machinery1804001 .philosophy_box p { font-size: 13px; line-height: 1.4em;} } @media only screen and (max-width: 900px) { .food_machinery1804001 .philosophy_box h2 { font-size: 14px;} .food_machinery1804001 .philosophy_box p { font-size: 12px; line-height: 1.2em;} } .food_machinery1804001 .support-btn {float: left; width: 32%; margin: 0 1% 0 0;} .food_machinery1804001 .support-btn:last-child {margin: 0;} .food_machinery1804001 img[usemap] {max-width: 100%; height: auto;} /* ---------------------------------------------------------- facebook ボタン ---------------------------------------------------------- */ .btn_fb {width: 100%;} .btn_fb .btn_box{width: 35%; margin: 0 auto 50px;} .btn_fb .facebook_btn { margin-top: 15px; list-style: none; display: block;} .btn_fb .facebook_btn a { display: block; color:#a60d0b; background: #e8d4d0; border: #e8d4d0 1px solid;font-size: 16px; font-weight: 700; height: 57px; line-height: 55px; text-align: center; position: relative; z-index: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} .btn_fb .facebook_btn a:before { position: absolute; top: 0; left: 15px; bottom: 0;font-family:'FontAwesome';content:"\f230"; font-size: 20px; font-weight: normal;z-index: 0; } @media only screen and (max-width: 738px) { .btn_fb {width: 100%;} .btn_fb .btn_box{width: 85%; margin: 0 auto 50px;} } /* ---------------------------------------------------------- facebook 埋め込み ---------------------------------------------------------- */ .fb_box-pc {width: 500px; margin: 0 auto 20px; display:block;} .fb_box-sp {width: 320px; margin: 0 auto 20px; display:none;} @media screen and (max-width: 738px){ .fb_box-pc { display:none; } .fb_box-sp { display:block; } } /* ---------------------------------------------------------- FDS ---------------------------------------------------------- */ #fds_philosophy { padding: 0 15% 80px;} @media only screen and (max-width: 738px) { #fds_philosophy { padding: 0 5% 40px;} } /* .philosophy_area */ #fds_philosophy .philosophy_area { margin: 0; } #fds_philosophy .philosophy_box { margin: 0; position: relative; z-index: 1; background: #faecec;background: url(../images/common/noise.png) repeat #fafafa;} #fds_philosophy .philosophy_box:first-child { margin-top: 0;} /* .img_area */ #fds_philosophy .philosophy_box .img_area { float: left; width: 47.5%; } #fds_philosophy .philosophy_box:nth-child(2n) .img_area { float: right;} /* .txt_area */ #fds_philosophy .philosophy_box .txt_area { width: 1000px; max-width: 48%; display: inline-block; position: absolute; top: 50%; right: 1%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%);} #fds_philosophy .philosophy_box:nth-child(2n) .txt_area { right:auto; left: 5%;} @media only screen and (max-width: 900px) { #fds_philosophy .philosophy_box .img_area { float: none; width: 100%; } #fds_philosophy .philosophy_box:nth-child(2n) .img_area { float: none;} #fds_philosophy .philosophy_box .txt_area { width: auto; max-width: 100%; display: block; padding: 35px 7.5% 30px; position: static; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0);} } /* .title_area */ #fds_philosophy .philosophy_box .title_area { text-align: center; } #fds_philosophy .philosophy_box h2 { margin: 10px 0 20px; color: #a60d0b; font-size: 24px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight: 500; line-height: 1.2em; letter-spacing: 0.15em; position: relative; z-index: 1;} #fds_philosophy .philosophy_box p { font-size: 14px; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:500; letter-spacing: 0.15em; line-height: 1.4; text-align: center; font-feature-settings: "palt";} @media only screen and (max-width: 738px) { #fds_philosophy .philosophy_box h2 { font-size: 16px;} #fds_philosophy .philosophy_box p { font-size: 12px;} } #fds_philosophy .title {width: 30%; margin: 40px auto 20px;} @media only screen and (max-width: 738px) { #fds_philosophy .title {width: 50%; margin: 40px auto 20px;} } #fds_philosophy .object_wrap { padding: 0;} #fds_philosophy .object_wrap .object_box {float: left; width: 47%; margin: 0 1% 20px 1%;} fds_philosophy .object_wrap .object_box .img {margin: 0;} #fds_philosophy .object_wrap .object_box .text-a {margin: 0; padding: 20px; background-color: #c1887d;} #fds_philosophy .object_wrap .object_box .text-b {margin: 0; padding: 20px; background-color: #aa5d4d;} #fds_philosophy .object_wrap .object_box .text-a p { font-size: 14px; color: #fff; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:700; letter-spacing: 0.15em; line-height: 1.4; text-align: center; font-feature-settings: "palt";} #fds_philosophy .object_wrap .object_box .text-b p { font-size: 14px; color: #fff; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:700; letter-spacing: 0.15em; line-height: 1.4; text-align: center; font-feature-settings: "palt";} #fds_philosophy .object_wrap .object_box .staff {margin: 0; padding:10px 20px 20px 20px; background-color: #f8f2f1;} #fds_philosophy .object_wrap .object_box .staff p { font-size: 14px; color: #000; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:500; letter-spacing: 0em; line-height: 1.4; text-align: left; font-feature-settings: "palt"; margin-top: 10px;} #fds_philosophy .object_wrap .object_box .staff .namebox-a {width:180px; margin: 0 auto;} #fds_philosophy .object_wrap .object_box .staff .namebox-b {width:230px; margin: 0 auto;} #fds_philosophy .object_wrap .object_box .staff .position { float: left; vertical-align:middle; font-size: 10px; color: #000; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:500; letter-spacing: 0.15em; line-height: 2.4; text-align: center; font-feature-settings: "palt";} #fds_philosophy .object_wrap .object_box .staff .name { float: left; font-size: 16px; color: #000; font:'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:700; letter-spacing: 0.15em; line-height: 1.4; text-align: center; font-feature-settings: "palt";} @media only screen and (max-width: 738px) { #fds_philosophy .object_wrap .object_box .text-a {padding: 10px;} #fds_philosophy .object_wrap .object_box .text-b {padding: 10px;} #fds_philosophy .object_wrap .object_box .text-a p { font-size: 11px; text-align: left; font-weight:400;} #fds_philosophy .object_wrap .object_box .text-b p { font-size: 11px; text-align: left; font-weight:400;} #fds_philosophy .object_wrap .object_box .staff {padding: 10px;} #fds_philosophy .object_wrap .object_box .staff p { font-size: 11px; line-height: 1.2; letter-spacing: 0.15em;} #fds_philosophy .object_wrap .object_box .staff .name { font-size: 10px; float: none;} } #fds_philosophy .support-btn {float: left; width: 32%; margin: 0 1% 0 0;} #fds_philosophy .support-btn:last-child {margin: 0;} .bg_pink {width: 100%; margin: 0; background-color: #f6edec;} .bg_halfwhite {width: 100%; margin: 0; background-color: #fbf6f6;} #fds_philosophy img[usemap] {max-width: 100%; height: auto;} /* ---------------------------------------------------------- brやsp非表示など ---------------------------------------------------------- */ @media screen and (min-width: 738px){ .br-pc { display:block; } .br-sp { display:none; } } @media screen and (max-width: 738px){ .br-pc { display:none; } .br-sp { display:block; } } /* パソコンで見たときは"pc"のclassがついた画像が表示される */ .visible-pc { display: block !important; } .visible-sp { display: none !important; } /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */ @media only screen and (max-width: 738px) { .visible-pc { display: none !important; } .visible-sp { display: block !important; } }