/* ---------------------------------------------------------- #topImg ---------------------------------------------------------- */ #topImg { min-height: 100%; min-height: 100vh;position: relative; z-index: 1; overflow: hidden;} /* .img */ #topImg .bg-slider { position: absolute; top:80px; right: 0; bottom: 0; left: 0; background: url(../images/topimg-0209-2.jpg) center center no-repeat; background-size: cover; z-index: 0;} #topImg .bg-slider:before {position: absolute; top: 0; right: 0; left: 0; bottom: 0; content: ""; background: rgba(0,0,0,0.3); z-index: 1;} @media only screen and (max-width: 738px) { #topImg .bg-slider { top:60px;} } /* .catchArea */ #topImg .catchArea { width: 1000px; max-width: 80%; 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: 3; text-align: center; margin-top: 20px;} #topImg .catchArea h2.copy { color: #fefefe; font-size: 40px;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500; letter-spacing: 0.15em; line-height: 1.4; text-align: center; font-feature-settings: "palt";} #topImg .catchArea h2.copy br {display: none;} #topImg .catchArea h1.company { margin-top: 40px; color: #fefefe; font-size: 18px; font-weight: 700;line-height: 1;font-feature-settings: "palt";letter-spacing: 3px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif;} @media only screen and (max-width: 900px) { #topImg .img { top:60px;} #topImg .catchArea { max-width: 90%;} #topImg .catchArea h2.copy { font-size: 35px;line-height: 1.5;} #topImg .catchArea h1.company { margin-top: 35px; font-size: 16px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif;} } @media only screen and (max-width: 738px) { #topImg { min-height: 95%; min-height: 95vh;} #topImg .catchArea h2.copy { font-size: 27px;line-height: 1.6; letter-spacing: 0.25em;} #topImg .catchArea h2.copy br {display: block;} #topImg .catchArea h1.company { margin-top: 25px; font-size: 13px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif;} } /* .btn_area */ #topImg .btn_area { position: absolute; bottom: 25px; left: 50%; margin-left: -35px; width: 70px; height: 70px; font-size: 0; z-index: 2;} #topImg .btn_area:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: #9c0f0f; font-family:'FontAwesome';content:"\f107"; font-size: 35px; line-height:70px; text-align: center;z-index: 1;} #topImg .btn_area:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0;content:""; background: #fefefe; border: #9c0f0f 2px solid; z-index: -1;-webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%;} #topImg .btn_area:hover { -webkit-transform: translate(0px, 10px); -moz-transform: translate(0px, 10px); -o-transform: translate(0px, 10px); -ms-transform: translate(0px, 10px); transform: translate(0px, 10px); } @media only screen and (max-width: 900px) { #topImg .btn_area { bottom: 25px; margin-left: -30px; width: 60px; height: 60px; } #topImg .btn_area:before { font-size: 30px; line-height:60px; } #topImg .btn_area:hover { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px,0px); transform: translate(0px, 0px); } } @media only screen and (max-width: 738px) { #topImg .btn_area { bottom: 15px; margin-left: -25px; width: 50px; height: 50px; } #topImg .btn_area:before { font-size: 25px; line-height:50px; } } /* ---------------------------------------------------------- #home_catch ---------------------------------------------------------- */ #home_catch { padding: 20px 5% 80px; } @media only screen and (max-width: 900px) { #home_catch { padding: 20px 5% 70px; } } /* .catchArea */ #home_catch .catchArea { text-align: center;} #home_catch h2 { color: #a60d0b; font-size: 65px; font-family: 'alluraregular'; font-weight: normal; line-height: 1; position: relative; z-index: 1;-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);-ms-transform: rotate(-10deg);transform: rotate(-10deg); margin-top: 40px} /* .txtArea */ #home_catch .txtArea { margin-top: 25px;} #home_catch .txtArea p { font-size: 16px; line-height: 2.2; font-weight: 700; letter-spacing: 2px;} @media only screen and (max-width: 900px) { #home_catch h2 { font-size: 50px;} #home_catch .txtArea p { font-size: 14px; letter-spacing: 1px;} } @media only screen and (max-width: 738px) { #home_catch .logoArea { max-width: 140px;} #home_catch h2 { font-size: 40px; margin-top: 20px} #home_catch .txtArea { margin: 20px 5% 0;} #home_catch .txtArea p { font-size: 13px; line-height: 2; text-align: left;} #home_catch .txtArea p br { display: none;} } /* .category_area */ #home_catch .categoryArea { width: 90%; text-align: center; margin: 0 auto;} #home_catch .categoryArea .category_thum {float: left; width: 18%; margin-left: 2%; margin-top: 20px} #home_catch .categoryArea .category_thum:first-child {margin-left:0;} #home_catch .categoryArea .category_thum .category_img { margin: 0;} #home_catch .categoryArea .category_thum .category_title { background-color:#a60d0b; color: #ffffff; font-size: 14px; font: 'Open Sans',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; font-weight:900; line-height: 1.4em; margin: 10px 0 0 0;} @media only screen and (max-width: 738px) { #home_catch .categoryArea {display: none;} } /* .movie_area */ #home_catch .movie_area { margin:50px auto 0; max-width: 600px;} #home_catch .movie_area .thumb_area {position: relative; z-index: 1;} #home_catch .movie_area .thumb_area:before{position: absolute; top: 0;right: 0;left: 0;bottom: 0; content: ""; background: url(../images/common/noise.png) repeat rgba(0,0,0,0.6); z-index: 2;} @media only screen and (max-width: 900px) { #home_catch .movie_area { margin:45px auto 0;} } @media only screen and (max-width: 738px) { #home_catch .movie_area { margin:40px auto 0; } } /* --- a.btnYoutube --- */ #home_catch a.link_youtube { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;} /* span.btnYoutube */ #home_catch span.btnYoutube { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; display:block; width:80px; height:80px; line-height:80px; color:#fefefe; background:#a60d0b; text-align:center; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; font-size:0; z-index:4; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} #home_catch .movie_area .thumb_area:hover span.btnYoutube { width: 90px; height: 90px; line-height: 90px;} #home_catch span.btnYoutube:before { position:absolute; top: 0; right: 0;bottom: 0;left: 3px; font-size: 28px; font-family:'FontAwesome';content:"\f04b"; z-index: 1;} @media only screen and (max-width: 900px) { #home_catch span.btnYoutube { width:70px; height:70px; line-height:70px;} #home_catch .movie_area .thumb_area:hover span.btnYoutube { width: 70px; height: 70px; line-height: 70px;} #home_catch span.btnYoutube:before { font-size: 25px;} } @media only screen and (max-width: 738px) { #home_catch span.btnYoutube { width:60px; height:60px; line-height:60px;} #home_catch .movie_area .thumb_area:hover span.btnYoutube { width: 60px; height: 60px; line-height: 60px;} #home_catch span.btnYoutube:before { font-size: 20px;} } /* .txt_play */ #home_catch .txt_play { position: absolute; right: 0; top: 100px; left: 0; z-index: 4;} #home_catch .txt_play p {display: inline-block;color: #fefefe;font-size: 18px; font-family: 'Oswald', sans-serif; font-weight: 400; letter-spacing: 1px;line-height: 1; text-transform: uppercase;position: relative;z-index: 1;} #home_catch .txt_play p:before { position: absolute; top: -3px; left: -15px; bottom: -8px; width: 0; content: ""; border-left: #fefefe 1px solid; z-index: 0;-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-o-transform: rotate(-35deg);-ms-transform: rotate(-35deg);transform: rotate(-35deg);} #home_catch .txt_play p:after { position: absolute; top: -3px; right: -15px; bottom: -8px; width: 0; content: ""; border-right: #fefefe 1px solid; z-index: 0;-webkit-transform: rotate(35deg);-moz-transform: rotate(35deg);-o-transform: rotate(35deg);-ms-transform: rotate(35deg);transform: rotate(35zdeg);} @media only screen and (max-width: 900px) { #home_catch .txt_play { top: 70px;} } @media only screen and (max-width: 738px) { #home_catch .txt_play { top: 40px;} #home_catch .txt_play p {font-size: 15px;} } /* .txt_play2 */ #home_catch .txt_play2 { position: absolute; right: 0; top: 280px; left: 0; z-index: 4;} #home_catch .txt_play2 p {display: inline-block;color: #fefefe;font-size: 16px; font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 1px;line-height: 1; text-transform: uppercase;position: relative;z-index: 1;} @media only screen and (max-width: 900px) { #home_catch .txt_play2 { top: 300px;} } @media only screen and (max-width: 738px) { #home_catch .txt_play2 { top: 170px;} #home_catch .txt_play2 p {font-size: 13px;} } /* --- span.btnYoutubeBorder --- */ #home_catch span.btnYoutubeBorder {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; display:block; width:100px; height:100px; line-height:75px; z-index:3; border-top:1px solid #fefefe;border-right:1px solid #a60d0b; border-bottom:1px solid #fefefe; border-left:1px solid #a60d0b; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:spin-right 3s linear infinite;-moz-animation:spin-right 3s linear infinite;-ms-animation:spin-right 3s linear infinite;-o-animation:spin-right 3s linear infinite;animation:spin-right 3s linear infinite} @media only screen and (max-width: 900px) { #home_catch span.btnYoutubeBorder {width:90px; height:90px;} } @media only screen and (max-width: 738px) { #home_catch span.btnYoutubeBorder {width:70px; height:70px;} } /* ----- spin-right ----- */ @-webkit-keyframes spin-right{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin-right{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-ms-keyframes spin-right{0%{-ms-transform:rotate(0)}100%{-ms-transform:rotate(360deg)}}@-o-keyframes spin-right{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes spin-right{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} /* ---------------------------------------------------------- #home_product ---------------------------------------------------------- */ #home_product {padding: 80px 5% 40px;background: #faecec} @media only screen and (max-width: 900px) { #home_product { padding: 70px 5%;} } /* .product_area */ #home_product .product_area {} #home_product .product_box { background: #fefefe; margin: 10px 0 10px 0; padding: 50px 5% 20px; overflow: hidden; } #home_product .product_box:first-child{margin-top: 0;} @media only screen and (max-width: 900px) { #home_product .product_box { padding: 40px 5%;} } @media only screen and (max-width: 738px) { #home_product .product_box { margin-top: 25px;} } /* .service_area */ #home_product .service_area { float: left; width: 61.666%;position: relative; z-index: 1; text-align: center;} @media only screen and (max-width: 738px) { #home_product .service_area { float: none; width: 100%;} } /* .mark_area */ #home_product .product_box .mark_area { position: absolute; top: 0; left: 0; width: 100px; height: 100px; z-index: 1; } #home_product .product_box .mark_area:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: "";background:#a60d0b; z-index: -1;} #home_product .product_box .mark_area:after { position: absolute; top: -25px; left: -25px; width: 100px; height: 100px; content: ""; z-index: -2;} #home_product .product_box .mark_area_bread:after { background: url(../images/01615000065.jpg) center center no-repeat; background-size: cover;} #home_product .product_box .mark_area_sweets:after { background: url(../images/10724002928.jpg) center center no-repeat; background-size: cover;} #home_product .product_box .mark_area_food_industry:after { background: url(../images/main_food-machinery.jpg) center center no-repeat; background-size: cover;} #home_product .product_box .mark_area_wine:after { background: url(../images/main_wine.jpg) center center no-repeat; background-size: cover;} #home_product .product_box .mark_area_goods:after { background: url(../images/global-thum-life_design.jpg) center center no-repeat; background-size: cover;} /* h2 */ #home_product .product_box .mark_area h2 { 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: 20px; font-family: 'Oswald', sans-serif; font-weight: 300; line-height: 1.2;text-align: center;} @media only screen and (max-width: 900px) { #home_product .product_box .mark_area { width: 90px; height: 90px; } #home_product .product_box .mark_area:after { position: absolute; top: -15px; left: -15px; width: 90px; height: 90px; } #home_product .product_box .mark_area h2 { font-size: 16px;} } @media only screen and (max-width: 738px) { #home_product .product_box .mark_area { position: relative; width: 70px; height: 70px; margin: 0 auto; z-index: 1; } #home_product .product_box .mark_area:after { top: -10px; left: -10px; width: 70px; height: 70px;} #home_product .product_box .mark_area h2 { font-size: 14px;} } /* .title_area */ #home_product .product_box .title_area { height: 100px; position: relative; z-index: 0;} #home_product .product_box .title_area:after { position: absolute; bottom: 0; left: 110px; right: 10px; content: "";border-bottom: #a60d0b 1px dotted; z-index: -1;} #home_product .product_box .title_area h2 { 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;font-size: 20px; font-weight: 700; line-height: 1.5;} @media only screen and (max-width: 900px) { #home_product .product_box .title_area { height: 90px;} #home_product .product_box .title_area:after { left: 100px; right: 10px; } #home_product .product_box .title_area h2 { font-size: 16px; line-height: 1.5;} } @media only screen and (max-width: 738px) { #home_product .product_box .title_area { height:auto; margin:15px 0 0; padding-bottom: 15px;} #home_product .product_box .title_area:after { left: 0; right: 0;} #home_product .product_box .title_area h2 { 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); font-size: 16px; line-height: 1.5;} } /* .catch_area */ #home_product .service_area .catch_area { margin-top: 20px;} #home_product .service_area .catch_area h2.copy {font-size: 24px; 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;} /* .txt_area */ #home_product .service_area .txt_area { display: inline-block; width: 70%; margin: 15px auto 0; line-height: 1.0;} #home_product .service_area .txt_area p { font-size: 18px; font: normal 1em/2em '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";} /* .link_area */ #home_product .service_area .link_area { margin-top: 25px;} @media only screen and (max-width: 900px) { #home_product .service_area .catch_area h2.copy {font-size: 18px; letter-spacing: 0.1em; line-height: 1.6;margin-top: 20px;} #home_product .service_area .txt_area { display: block; width: 90%; margin: 15px auto 0; } } @media only screen and (max-width: 738px) { #home_product .service_area .catch_area h2.copy {font-size: 16px;line-height: 1.8; margin-top: 25px;} #home_product .service_area .txt_area { margin: 10px auto 0; text-align: left;} #home_product .service_area .txt_area p br { display: none;} } #home_product .topic_area { float: right; width: 33.333%; position: relative; z-index: 0; } #home_product .topic_area:after{ position: absolute; top: -60px; right: -50%; bottom: -200px; left: -15%; content: ""; background: url(../images/common/noise.png) repeat #fefefe; z-index: 2;} /* .topic_box */ #home_product .topic_box { position: relative; z-index: 3; } #home_product .topic_box .txt_area { margin: 20px 5%;} #home_product .topic_box .txt_area h3 { margin-bottom: 10px; color: #a60d0b;font-size: 12px; font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1; letter-spacing: 2px; text-align: center;} #home_product .topic_box .txt_area h4 { font-size: 13px; font-weight: 700; letter-spacing: 1px; line-height: 1.9; text-align: center;} #home_product .topic_area .link_area { margin-top: 10px;} @media only screen and (max-width: 738px) { #home_product .topic_area { float:none; width: 100%; margin-top: 35px; } #home_product .topic_area:after{ position: absolute; top: 0; right: 0; bottom: auto; left: 0; height: 0; background: none; border-top:#a60d0b 1px dotted; z-index: 1; display: none; } #home_product .topic_box .txt_area h3 { letter-spacing: 1px; } #home_product .topic_box .txt_area h4 { font-size: 12px; font-weight: 500;} #home_product .topic_area .link_area { margin-top: 20px;} } /* ---------------------------------------------------------- #home_news ---------------------------------------------------------- */ #home_news { padding: 40px 5%; background: url(../images/home/bg_news.jpg) center center no-repeat; background-size: cover;position: relative; z-index: 1;} @media only screen and (max-width: 900px) { #home_news { padding: 40px 5%;} } /*@media only screen and (max-width: 738px) { #home_news { padding: 50px 5%;} }*/ /* .inner */ #home_news .inner { max-width: 1000px; margin: 0 auto; padding: 40px 5% 20px; background:rgba(255,255,255,0.9); position: relative; z-index: 1;} /* .news_area */ #home_news .news_area { font-size: 0; margin: -15px; text-align: left;} #home_news .news_box { display: inline-block; width: 50%; border:transparent 15px solid;} #home_news .news_box a { display: block;} #home_news .news_box a:hover { opacity: 0.7;} #home_news .news_box .img_area { float: left; width: 30%;} #home_news .news_box .txt_area {float: right; width: 65%;} #home_news .news_box p.date { font-size: 14px; font-family: 'Oswald', sans-serif; font-weight: 400; line-height: 1.2;} #home_news .news_box h3 { margin-top: 5px; font-size: 13px; line-height: 1.8; letter-spacing: 0.5px;} @media only screen and (max-width: 900px) { #home_news .inner { padding: 40px 5% 20px;} #home_news .news_box p.date { font-size: 13px;} #home_news .news_box h3 { font-size: 12px;} } @media only screen and (max-width: 738px) { #home_news .inner { padding: 20px 7.5%;} #home_news .news_area { margin: 0; } #home_news .news_box { display: block; margin-top: 15px; width: 100%; border:none;} #home_news .news_box a:hover { opacity: 1;} #home_news .news_box:first-child { margin-top: 0;} #home_news .news_box p.date { font-size: 13px;} #home_news .news_box h3 { font-size: 12px;} } /* ---------------------------------------------------------- #product_banner *product.cssにも重複して記述あり ---------------------------------------------------------- */ #product_banner { padding: 70px 5%; position: relative; z-index: 1;background: url(../images/common/noise.png) repeat #eeeeee;} #product_banner:before { top: 0; left: 0; right: 0; bottom: 0; content: ""; position: relative; z-index: -1;} @media only screen and (max-width: 900px) { #product_banner { padding: 20px 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; margin-bottom: 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; } #product_banner .banner_box_ig .img_area:before { background: url(../images/banner-img_ig.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;} #product_banner .banner_box_ig h3.logo { margin: 0 auto; width: 200px; height: 85px; background: url(../images/logo_ig.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-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500;line-height: 1.7; font-feature-settings: "palt"; letter-spacing: 0.1em;} #product_banner .banner_box_ig ol { list-style: none; font-size: 0; margin: 10px 0 0 3px;} #product_banner .banner_box_ig ol li { display: inline-block; padding: 0; font-size: 14px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, 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_ig h3.logo { width: 130px; height: 55px;} #product_banner .banner_box_ig ol { margin: 10px 0 0 3px;} #product_banner .banner_box_ig 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; } }