/* ---------------------------------------------------------------------------------------------- PRODUCT 一覧ページ ---------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------- #product_list ----------------------------------------------------------- */ #product_list { padding: 90px 5%;position: relative; z-index: 1; } @media only screen and (max-width: 960px) { #product_list { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #product_list { padding: 70px 5%; } } /* ----------------------------------------------------------- .scroll_position ----------------------------------------------------------- */ .scroll_position {padding: 130px 0 0 ; margin: -130px 0 0;} @media only screen and (max-width: 960px) { .scroll_position {padding: 120px 0 0 ; margin: -120px 0 0;} } @media only screen and (max-width: 738px) { .scroll_position {padding: 100px 0 0 ; margin: -100px 0 0;} } /* ----------------------------------------------------------- .nav_product_archive ----------------------------------------------------------- */ #product_list .nav_product_archive { list-style: none; font-size: 0; display: flex; flex-wrap: wrap; justify-content: center; gap:0 10px;} #product_list .nav_product_archive li { width: 32.333%; border: #111 1px solid; text-align: center;} #product_list .nav_product_archive li a {display: block; padding: 0 1em 0 0; font-size: 15px;font-weight: 400; line-height: 70px; letter-spacing: .05em; text-align: center; position: relative; z-index: 0;} #product_list .nav_product_archive li a.en {font-size: 18px;font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0;} #product_list .nav_product_archive li a:before { position:absolute; top:50%; right:15px; font-size:13px; font-family:themify;content:"\e64b";font-weight:normal; z-index:0; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); } @media (min-width: 961px) and (hover: hover) { #product_list .nav_product_archive li a:hover { color: #fefefe; background: #111;} } @media only screen and (max-width: 960px) { #product_list .nav_product_archive li a { line-height: 60px; } #product_list .nav_product_archive li a.en {font-size: 17px;} } @media only screen and (max-width: 738px) { #product_list .nav_product_archive { display:block;margin-right: -1px; } #product_list .nav_product_archive li { display: inline-block; width: 50%; margin: -1px 0 0 -1px;} #product_list .nav_product_archive li a { padding:0; } #product_list .nav_product_archive li a.en {font-size: 16px;} #product_list .nav_product_archive li a:before { right:15px;} } @media only screen and (max-width: 640px) { #product_list .nav_product_archive { margin: 1px -1px 0 1px; } #product_list .nav_product_archive li { width: 100%; margin: -1px 0 0; } #product_list .nav_product_archive li a { font-size: 15px; line-height: 50px;} #product_list .nav_product_archive li a.en {font-size: 17px;} } /* ----------------------------------------------------------- .product_archive_area ----------------------------------------------------------- */ #product_list .product_archive_area { margin: 90px 0 0; } #product_list .product_archive_item { padding: 80px 5%; border: #111 1px solid; position: relative; z-index: 0;} #product_list .product_archive_item+.product_archive_item {margin: 80px 0 0;} #product_list .line_item { position: relative; z-index: 0;} #product_list .line_item .description_area { margin: -5px 0 0; padding: 0 12.5% 70px; border-bottom: #111 1px dotted;} @media only screen and (max-width: 960px) { #product_list .product_archive_area { margin: 80px 0 0; } #product_list .line_item .description_area { margin: -5px 0 0; padding: 0 2.5% 65px; } } @media only screen and (max-width: 738px) { #product_list .product_archive_area { margin: 70px 0 0; } #product_list .product_archive_item { padding: 70px 0 0; border:none; border-top: #111 1px solid;} #product_list .product_archive_item+.product_archive_item {margin: 70px 0 0;} #product_list .line_item .description_area { margin: -10px 0 0; padding: 0 2.5% 50px;} } /* ----------------------------------------------------------- .series_area ----------------------------------------------------------- */ #product_list .series_area { position: relative; z-index: 0; font-size: 0;} #product_list .series_item { margin: 80px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; z-index: 0;} /* .img_area */ #product_list .series_item .img_area { width: 46.5%; position: relative; z-index: 0; background: transparent; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;} #product_list .series_item .img_area img { border: #ddd 1px solid;-webkit-transition: all 0.7s ease; transition: all 0.7s ease;} #product_list .series_item .img_area .line_top_left { position: absolute; top: 0; left: 0; height: 25px; width: 25px; border-top: #111 1px solid; border-left: #111 1px solid; z-index: 0;} #product_list .series_item .img_area .line_top_right { position: absolute; top: 0; right: 0; height: 25px; width: 25px; border-top: #111 1px solid; border-right: #111 1px solid; z-index: 0;} #product_list .series_item .img_area .line_bottom_left { position: absolute; bottom: 0; left: 0; height: 25px; width: 25px; border-bottom: #111 1px solid; border-left: #111 1px solid; z-index: 0;} #product_list .series_item .img_area .line_bottom_right { position: absolute; bottom: 0; right: 0; height: 25px; width: 25px; border-bottom: #111 1px solid; border-right: #111 1px solid; z-index: 0;} /* .imgArea a */ #product_list .series_item .img_area a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; z-index: 4;} /* .txt_area */ #product_list .series_item .txt_area { width: 45.5%; position: relative; z-index: 0;} #product_list .series_item .txt_area p {font-size: 14px; line-height: 1.85;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } #product_list .series_item .txt_area .ttl_area { margin: 0 0 15px;} #product_list .series_item .txt_area .t_ttl_series_sub {font-size: 13px;font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: .05em; line-height: 1.6;} #product_list .series_item .txt_area .t_ttl_series_en{ font-size: 23px; font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: .05em; line-height: 1.6; } #product_list .series_item .txt_area .t_ttl_series_jp {font-size: 14px; font-family: 'Shippori Mincho B1', 'Libre Baskerville', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 500; letter-spacing: .05em; line-height: 1.5;} #product_list .series_item .txt_area h3 span { display: block; font-size: 14px;} /* .linkArea */ #product_list .series_item .txt_area .linkArea { margin: 20px 0 0; text-align: left;} @media (min-width: 961px) and (hover: hover) { #product_list .series_item .img_area:hover { background: #111; } #product_list .series_item .img_area:hover img {opacity: 0.3;opacity: 0.5;} } @media only screen and (max-width: 1200px) { #product_list .series_item .txt_area .t_ttl_series_en{ font-size: 22px;} } @media only screen and (max-width: 1100px) { #product_list .series_item .txt_area p { font-size: 14px; -webkit-line-clamp: 5;} } @media only screen and (max-width: 1024px) { #product_list .series_item .txt_area p {-webkit-line-clamp: 4;} } @media only screen and (max-width: 960px) { #product_list .series_item {flex-direction: column;} #product_list .series_item .img_area { width: 70%; display: block; margin: 0 auto;} #product_list .series_item .txt_area {display: block; width: 100%; margin: 30px 0 0; padding: 0 7.5%; } #product_list .series_item .txt_area p {font-size: 15px;line-height: 1.9;-webkit-line-clamp: 7;} #product_list .series_item .txt_area .ttl_area { margin: 0 0 20px; text-align: center;} #product_list .series_item .txt_area .t_ttl_series_sub {font-size: 12px;} #product_list .series_item .txt_area .t_ttl_series_en{ font-size: 23px; line-height: 1.7; } #product_list .series_item .txt_area .linkArea { margin-top: 25px; text-align: center;} } @media only screen and (max-width: 738px) { #product_list .series_item { margin: 60px 0 0; } #product_list .series_item .img_area { width: 75%;} #product_list .series_item .txt_area { margin: 20px 0 0; padding: 0 2.5%; } #product_list .series_item .txt_area p {line-height: 1.9; letter-spacing: .075em;} #product_list .series_item .txt_area .ttl_area { margin: 0 0 15px; text-align: center;} #product_list .series_item .txt_area .t_ttl_series_sub {font-size: 11px; line-height: 1.6;} #product_list .series_item .txt_area .t_ttl_series_en{ font-size: 17px; line-height: 1.6; } #product_list .series_item .txt_area .t_ttl_series_jp {font-size: 13px;} #product_list .series_item .txt_area .linkArea { margin-top: 20px; text-align: center;} } @media only screen and (max-width: 640px) { #product_list .series_item .img_area { width: 82.5%;} } /* ---------------------------------------------------------------------------------------------- PRODUCT シリーズ別ページ 　タクソミー ---------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------- #product_lineup ----------------------------------------------------------- */ #product_lineup { padding: 90px 5%; position: relative; z-index: 1;} @media only screen and (max-width: 960px) { #product_lineup { padding: 80px 5%;} } @media only screen and (max-width: 738px) { #product_lineup { padding: 70px 5%;} } /* .series_concept_area */ .series_concept_area { margin: -5px 0 80px; padding: 0 10% 75px; border-bottom: #111 1px dotted;} .series_concept_area .txt_area { margin: 0 auto; max-width: 800px;} .series_concept_area .txt_area p+p {margin-top: 1em;} @media only screen and (max-width: 960px) { .series_concept_area { margin: -10px 0 70px; padding: 0 2.5% 60px; } .series_concept_area:before { margin: 0 auto 35px;} } @media only screen and (max-width:738px) { .series_concept_area { margin: -15px 0 50px; padding: 0 2.5% 50px; } .series_concept_area:before { margin: 0 auto 30px;} } /* ----------------------------------------------------------- #product_about_model not use ----------------------------------------------------------- */ #product_about_model {padding: 90px 5%; position: relative; z-index: 1;} #product_about_model:after { position: absolute; top: 0; left: 5%; right: 5%; bottom: 0; content: ""; border: #111 1px solid; border-bottom: none; z-index: -1;} @media only screen and (max-width: 960px) { #product_about_model { padding: 80px 5%;} } @media only screen and (max-width: 738px) { #product_about_model { padding: 70px 5%;} } /* .aboutArea */ #product_about_model .aboutArea { padding: 0 5%;} /* .nameArea */ #product_about_model .nameArea {float: left; width: 40%;} #product_about_model .nameArea .stitle { margin: 12px 0 -5px; font-size: 12px;font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: .05em; line-height: 1.6;} #product_about_model .nameArea h4{ margin-top: -25px; color: #999; font-size: 14px; font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 400; line-height: 20px; letter-spacing: 1px; text-indent: 5px;} #product_about_model .nameArea h3.en{ font-size: 24px; font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: 0.025em; line-height: 1.8; position: relative; z-index: 1; margin-top: 5px;} #product_about_model .nameArea h3.jp {font-size: 14px; font-family: 'Shippori Mincho B1', serif; font-weight: 500; letter-spacing: 0.05em; line-height: 1.8;} /* .txtArea */ #product_about_model .txtArea { float: right; width: 55%;} @media only screen and (max-width: 960px) { #product_about_model .aboutArea { padding: 0 7.5%;} #product_about_model .nameArea {float: none; width: 100%; text-align: center;} #product_about_model .nameArea:after { display: block; width: 50px; height: 0; content: ""; border-top: #111 1px solid; margin: 20px auto 0;} #product_about_model .nameArea h4{ margin-top: 0; line-height: 1; text-indent: 0;} #product_about_model .nameArea .stitle { margin: 15px 0 -10px; font-size: 11px;} #product_about_model .nameArea h3.en{ font-size: 18px; margin-top: 10px;line-height: 1.6;} #product_about_model .nameArea h3.jp {font-size: 13px; line-height: 1.8;} #product_about_model .txtArea { float: none; width: 100%; margin-top: 30px;} } @media only screen and (max-width: 738px) { #product_detail { padding: 70px 5%;} #product_about_model .nameArea:after { width: 35px;} #product_about_model .nameArea h4{ font-size: 12px;} #product_about_model .nameArea .stitle { font-size: 11px;} #product_about_model .nameArea h3.en{ font-size: 16px; margin-top: 10px;line-height: 1.6;} #product_about_model .nameArea h3.jp {font-size: 12px; line-height: 1.8;} } /* ----------------------------------------------------------- 　2020.10追加 for Movie of WORKFLOW ----------------------------------------------------------- */ /* .thumb_area */ #product_about_model .movie_area { margin: 35px 0 0; width: 70%;} #product_about_model .movie_area .time_area {position: absolute; bottom: 15px; left: 15px; z-index: 1; color: #fefefe; font-size: 13px;font-family: 'courier_prime_sansregular'; font-weight: normal;line-height:1;letter-spacing: 1px;} /* .thumb_area a */ #product_about_model .movie_area a { display: block; position: relative; z-index: 0;} @media only screen and (max-width: 960px) { #product_about_model .movie_area { margin: 25px 0 0; width: 100%;} } @media only screen and (max-width: 738px) { #product_about_model .movie_area { margin: 25px 0 0;} } /* .popup_youtube */ #product_about_model .popup_youtube:before { width: 60px; height: 60px; font-size: 22px;line-height: 61px;} @media only screen and (max-width: 738px) { #product_about_model .popup_youtube:before {width: 60px; height: 60px; font-size: 22px;line-height: 61px; } } /* ----------------------------------------------------------- #product_other_model OTHER MODELS欄 ----------------------------------------------------------- */ #product_other_model { padding: 90px 5%; position: relative; z-index: 1;} #product_other_model:after { position: absolute; top: 0; left: 5%; right: 5%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} @media only screen and (max-width: 960px) { #product_other_model { padding: 80px 5%; } } @media only screen and (max-width: 738px) { #product_other_model { padding: 70px 5%; } } /* .modelArea */ #product_other_model .modelArea { font-size: 0; margin: 70px 0 0; display: flex; flex-wrap: wrap; gap:50px 3.5%; } #product_other_model .modelBox {width: calc((100% - 3 * 3.5%) / 4); position: relative; z-index: 1;} @media only screen and (max-width: 960px) { #product_other_model .modelArea { margin: 60px 0 0;gap:50px 3.5%; } #product_other_model .modelBox {width: calc((100% - 2 * 3.5%) / 3); } } @media only screen and (max-width: 738px) { #product_other_model .modelArea { margin: 50px 0 0;gap:40px 5%; } #product_other_model .modelBox {width: calc((100% - 1 * 5%) / 2); } } /* .imgArea */ #product_other_model .modelBox .imgArea { position: relative; z-index: 1; background: transparent;-webkit-transition: all 0.5s ease; transition: all 0.5s ease;} #product_other_model .modelBox .imgArea img { border: #ddd 1px solid;-webkit-transition: all 0.7s ease; transition: all 0.7s ease;} #product_other_model .modelArea .active .imgArea img { border: #111 1px solid;} /* line */ #product_other_model .modelBox .imgArea .line_top_left { position: absolute; top: 0; left: 0; height: 15px; width: 15px; border-top: #111 1px solid; border-left: #111 1px solid; z-index: 2;} #product_other_model .modelBox .imgArea .line_top_right { position: absolute; top: 0; right: 0; height: 15px; width: 15px; border-top: #111 1px solid; border-right: #111 1px solid; z-index: 2;} #product_other_model .modelBox .imgArea .line_bottom_left { position: absolute; bottom: 0; left: 0; height: 15px; width: 15px; border-bottom: #111 1px solid; border-left: #111 1px solid; z-index: 2;} #product_other_model .modelBox .imgArea .line_bottom_right { position: absolute; bottom: 0; right: 0; height: 15px; width: 15px; border-bottom: #111 1px solid; border-right: #111 1px solid; z-index: 2;} /* .imgArea a */ #product_other_model .modelBox .imgArea a { display: block; position: relative;z-index: 0;} @media (min-width: 961px) and (hover: hover) { #product_other_model .modelBox a:hover .imgArea {background: #111;} #product_other_model .modelBox a:hover .imgArea img {opacity: 0.5;} } /* .txtArea */ #product_other_model .modelBox .txtArea { margin-top: 15px; text-align: center;} #product_other_model .modelBox .stitle { margin-bottom: 1px; font-size: 10px;font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: .05em; line-height: 1.5;} #product_other_model .modelBox .txtArea .en{ font-size: 14px; font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: 0.025em; line-height: 1.5; } #product_other_model .modelBox .txtArea .jp {font-size: 12px; font-family: 'Shippori Mincho B1',serif; font-weight: 500; letter-spacing: 0.025em; line-height: 1.4; margin-top: 3px;} @media only screen and (max-width: 738px) { #product_other_model .modelBox .txtArea { margin-top: 10px; text-align: center;} #product_other_model .modelBox .txtArea .en{ font-size: 13px;} #product_other_model .modelBox .txtArea .jp {font-size: 11px; margin-top: 0;} } /* ---------------------------------------------------------------------------------------------- PRODUCT 詳細ページ ---------------------------------------------------------------------------------------------- */ /* ----------------------------------------------------------- #product_detail ----------------------------------------------------------- */ #product_detail { padding: 90px 5%; position: relative; z-index: 1;} @media only screen and (max-width: 960px) { #product_detail { padding: 80px 5%;} } @media only screen and (max-width: 738px) { #product_detail { padding: 70px 5%;} } /* h3.no */ .headline .no { margin-top: 10px; font-size: 27px; font-family: 'courier_prime_sansregular'; font-weight: normal; line-height: 1.7; letter-spacing:0.05em; z-index: 1; } @media only screen and (max-width: 960px) { .headline .no { font-size: 20px;} } @media only screen and (max-width: 738px) { .headline .no { font-size: 16px;} } /* .sub_no */ .headline .sub_no { font-size: 22px; font-family: 'courier_prime_sansregular'; font-weight: normal; line-height: 1.55; letter-spacing:0.02em; z-index: 1; } .headline .sub_no .t_jp{ font-size: .8em; vertical-align: 0;} @media only screen and (max-width: 960px) { .headline .sub_no { font-size: 18px;} } @media only screen and (max-width: 738px) { .headline .sub_no { font-size: 16px;} } /* .description_area */ #product_detail .description_area { margin: 0 auto; padding: 0 5%; max-width: 800px; position: relative; z-index: 1; } @media only screen and (max-width: 960px) { #product_detail .description_area { margin: -25px auto 50px; } #product_detail .description_area:before { margin: 0 auto 35px; } } @media only screen and (max-width: 738px) { #product_detail .description_area { margin: -20px auto 50px;} #product_detail .description_area:before { margin: 0 auto 30px; } } @media only screen and (max-width: 640px) { #product_detail .description_area {padding: 0 1.5%;} } /* ----------------------------------------------------------- 詳細ページ「バナーエリア」 ----------------------------------------------------------- */ ul.list_product_banner { margin: 70px auto 0; padding: 0 5%; max-width: 800px; list-style: none;} ul.list_product_banner li { display: block; width: 100%; margin: 0 auto;} ul.list_product_banner li+li { margin-top:20px; } ul.list_product_banner li a {display: block; position: relative; z-index: 1;} ul.list_product_banner li a:after {position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background-color: transparent; opacity: 0.6; z-index: 0;-webkit-transition: all 0.7s ease;transition: all 0.7s ease;} @media (min-width: 961px) and (hover: hover) { ul.list_product_banner li a:hover:after { background: #111; } } @media only screen and (max-width: 738px) { ul.list_product_banner { margin: -10px auto 50px;} ul.list_product_banner li+li { margin-top:15px; } } @media only screen and (max-width: 640px) { ul.list_product_banner { margin: -10px 0 50px;padding: 0 1.5%; } } /* .detailArea */ #product_detail .detailArea { margin-top: 90px; border: #111 1px solid; } /* .productArea */ #product_detail .productArea { padding: 45px 5% 90px; position: relative; z-index: 1; } #product_detail .productArea .productBox { margin-top: 65px;text-align: center; position: relative; z-index: 1;} #product_detail .productArea .productBox:first-child { margin-top: 0;} @media only screen and (max-width: 960px) { #product_detail .detailArea { margin-top: 70px;} #product_detail .productArea { padding: 35px 5% 80px;} #product_detail .productArea .productBox { margin-top: 60px;} } @media only screen and (max-width: 738px) { #product_detail .detailArea { margin-top: 50px;} #product_detail .productArea { padding: 30px 5% 70px;} #product_detail .productArea .productBox { margin-top: 50px;} } /* dl */ #product_detail .productArea .productBox dl { display: block; margin: 0; font-size: 13px; font-family: 'Libre Baskerville', 'Shippori Mincho B1', serif; font-weight: 500; line-height: 1.75; letter-spacing: .025em; position: relative; z-index: 1; } #product_detail .productArea .productBox dl:before { position: absolute; top: -30px; left: 50%; width: 0; height: 20px; content: ""; border-right: #111 1px dotted; } #product_detail .productArea .productBox dl dt { display: block;margin: 0; color: #999; font-style: italic; } #product_detail .productArea .productBox dl dd { display: block; margin-top: 3px; } @media only screen and (max-width: 738px) { #product_detail .productArea .productBox dl:before { top: -15px; height: 10px; } #product_detail .productArea .productBox dl dt { font-size: 11px; } } /* .slick-dots */ .slick-slider{touch-action: pan-y;} .slick-slider {-ms-touch-action: auto;touch-action: auto;} .productSlider .slick-dots{position:absolute; position: static;bottom:0;list-style:none;display:block;text-align:center;margin: 20px 0 0; padding:0;width:100%;height:25px;z-index:100} .productSlider .slick-dots li{position:relative;display:inline-block;height:25px;width:70px;margin:0 3px;padding:0;cursor:pointer;} .productSlider .slick-dots li button{background:0;border:1px solid #111;display:block;height:25px;width:70px;overflow:hidden;line-height:0;font-size:0;color:transparent;cursor:pointer;padding:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out} .productSlider .slick-dots li:before {position:absolute;top:0;right:0;bottom:0;left:0;content:"FRONT"; font-size: 13px; font-family: 'courier_prime_sansregular'; font-weight: normal;line-height: 25px;-webkit-transition:all .3s ease;transition:all .3s ease;} .productSlider .slick-dots li:nth-child(2):before { content: "SIDE"} .productSlider .slick-dots li.slick-active:before {color: #fefefe;} .productSlider .slick-dots li.slick-active button{outline:0; background:#111;-webkit-transition:all .3s ease;transition:all .3s ease;} @media only screen and (max-width: 960px) { .productSlider .slick-dots { margin: 12px 0 0;} } /* .materialArea */ #product_detail .materialArea {font-size: 0; border-bottom: #111 1px solid; display: flex; flex-wrap: wrap;} #product_detail .materialBox { width: 33.333%; margin: 0; padding: 35px 5%;position: relative; z-index: 1;} #product_detail .materialBox:before { position: absolute; bottom: 0; right: 10px; left: 10px; height: 0; content: ""; border-bottom: #111 1px dotted; z-index: -1;} #product_detail .materialBox:nth-child(4):before, #product_detail .materialBox:nth-child(5):before, #product_detail .materialBox:nth-child(6):before{ display: none;} #product_detail .materialBox:after { position: absolute; top: 10px; right: 0; bottom: 10px; width: 0; content: ""; border-right: #111 1px dotted; z-index: -1;} #product_detail .materialBox:nth-child(3):after, #product_detail .materialBox:nth-child(6):after{ display: none;} /* h4 */ #product_detail .materialBox h4 {color: #999; font-size: 12px; font-family: 'Libre Baskerville',serif; font-weight: 500; font-style: italic;line-height: 1.8; letter-spacing: 0.05em; text-align: left; position: relative; z-index: 1;} /* .detail */ #product_detail .materialBox .detail{ margin-top: 5px; font-size: 15px; font-weight: 370; line-height: 1.8; letter-spacing: 0.05em;} /* div */ #product_detail .materialBox .detail div+div{ margin-top: 5px;} /* dl */ #product_detail .materialBox dl { margin-top: 7px; letter-spacing: 0.05em; } #product_detail .materialBox dt { display: block; padding-left: 15px; font-size: 11px; font-weight: 600; position: relative; z-index: 0;} #product_detail .materialBox dt:before { position: absolute; top: 50%; left: 0; width: 10px; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} #product_detail .materialBox dd { font-size: 15px; display: block;word-break: break-all;} #product_detail .materialBox:nth-child(6) h4, #product_detail .materialBox:nth-child(6) .detail {font-size: 0;display: none;} @media only screen and (max-width: 960px) { #product_detail .materialBox { width: 50%; padding: 25px 5%;} #product_detail .materialBox:nth-child(4):before { display: block;} #product_detail .materialBox:nth-child(3):after { display: block;} #product_detail .materialBox:nth-child(even):after { display: none;} } @media only screen and (max-width: 738px) { #product_detail .materialBox { padding: 20px 5%;} #product_detail .materialBox:before { right: 5px; left: 5px; } #product_detail .materialBox:after { top:5px; bottom:5px; } #product_detail .materialBox .detail{ font-size: 15.5px; } #product_detail .materialBox dd { font-size: 15.5px; } } @media only screen and (max-width: 640px) { #product_detail .materialBox { display: block; width: 100%; padding: 20px 5%;} #product_detail .materialBox:before { right: 10px; left: 10px; } #product_detail .materialBox:after, #product_detail .materialBox:nth-child(3):after { display: none;} #product_detail .materialBox:nth-child(5):before { display: none;} #product_detail .materialBox:nth-child(6) {display: none;} } /* .buynow_area */ #product_detail .productArea .buynow_area { margin: 25px 0 0; font-size: 0; text-align: center;} /* .btn_lpd */ #product_detail .productArea .buynow_area .btn_buynow_product { display: inline-block; margin:0 1.5%; width:47%; max-width: 200px; color: #111; border:#111 2px solid; text-decoration: none; line-height: 45px;text-align: center; position: relative; z-index:1; overflow: hidden; font-size: 15px;font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0;} #product_detail .productArea .buynow_area .btn_buynow_product:before { position:absolute; top:0; right:10px; bottom:0; font-size:1em; font-family:themify;content:"\e649";font-weight:normal; z-index:1; } #product_detail .productArea .buynow_area .btn_buynow_product:after { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: block; background: #111; content: ""; z-index: -1; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease} @media (min-width: 961px) and (hover: hover) { #product_detail .productArea .buynow_area .btn_buynow_product:hover { color: #fefefe;} #product_detail .productArea .buynow_area .btn_buynow_product:hover:after { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)} } @media only screen and (max-width: 960px) { #product_detail .productArea .buynow_area { margin: 25px -1.5% 0;} } @media only screen and (max-width: 738px) { #product_detail .productArea .buynow_area { margin: 20px -1.5% 0;} #product_detail .productArea .buynow_area .btn_buynow_product { margin:0 1.5%; width:47%; overflow: hidden; font-size: 14px; line-height: 36px;} #product_detail .productArea .buynow_area .btn_buynow_product:before { right: 8px; font-size: .8em;} } @media only screen and (max-width: 640px) { #product_detail .productArea .buynow_area { margin: 15px -1.5% 0;padding: 0 2.5%;} #product_detail .productArea .buynow_area .btn_buynow_product { padding: 0 .5em 0 0; max-width: 170px; font-size: 14px; line-height: 34px;} } /* ----------------------------------------------------------- 詳細ページ「OTHER NUMBERS」 　　.product_other_numbers:after ----------------------------------------------------------- */ .product_other_numbers:after { position: absolute; top: 0; left: 5%; right: 5%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;}