/* --------------------------------------------------------------------------------------------------- header for White --------------------------------------------------------------------------------------------------- */ /*#header {background: transparent; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;} #header.fixed { background: #fefefe;} #header h1.logo a {background: url("../images/common/logo2020_hover.png") center center no-repeat; background-size:115px 29px;} #header h1.logo a:before {background: url("../images/common/logo2020.png") center center no-repeat; background-size:115px 29px;} #header h1.logo a:after {background: #fefefe;} #header.fixed h1.logo a {background: url("../images/common/logo2020.png") center center no-repeat; background-size:115px 29px;} #header.fixed h1.logo a:before {background: url("../images/common/logo2020_hover.png") center center no-repeat; background-size:115px 29px;} #header.fixed h1.logo a:after {background: #111;} #header .sf-menu { color: #fefefe;} #header.fixed .sf-menu { color: #111;} #header .sf-mega {color: #111;} .sf-menu li a:before { border-color: #fefefe; } #header.fixed .sf-menu li a:before { border-color: #111; } #header .navArea ul.list_series li{ color: #111;} #header .navSubArea .sf-inset li{ color: #111;} #header .langArea .sf-menu li ul li{ color: #111;} @media only screen and (max-width: 960px) { #header { background: #fefefe; } #header h1.logo a { background: url("../images/common/logo2020.png") center center no-repeat;background-size:115px 29px;} #header h1.logo a:before { background: url("../images/common/logo2020_hover.png") center center no-repeat;background-size:115px 29px; } #header h1.logo a:hover:before { opacity: 1; } #header h1.logo a:after { background: #111;} }*/ /* --------------------------------------------------------------------------------------------------- .panel --------------------------------------------------------------------------------------------------- */ .panel { position: fixed; bottom:16px; right: 16px; padding:12px; z-index: 4;} .panel:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: rgba(254,254,254,1); border: #111 1px solid;z-index: -1} .panel .close_btn_panel { position: absolute;top:0;right: 0;width: 40px;height: 40px;font-size: 0;text-align: center;z-index: 5;cursor: pointer;} .panel .close_btn_panel:before {position: absolute;top: 0;right: 0;bottom: 0;left: 0;font-family: 'themify'; content: "\e646";font-size: 12px;z-index: 0;line-height: 40px;} .panel a { display: inline-block; font-size: 13px;font-weight: 500; line-height: 1.7; letter-spacing: 0.05em;} .panel a:hover { cursor: pointer;} .panel .panel_inner { display: block; width: 390px; position: relative; z-index: 0;} .panel .thumb_area {float: left; width: 23.5%;} /*.panel .txt_area { position: absolute; top: 49%; right: 0; width: 72%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 0;}*/ .panel .panel_inner { display: block; width: 420px; position: relative; z-index: 0;} .panel .txt_area { position: absolute; top: 49%; right: 0; width: 70%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 0;} .panel a .t_cat_panel, .panel a .t_name_product, .panel a .t_name_small{display: block; font-size: 13px;} .panel a .t_cat_panel { color: #FE831F; font-size: 13px; /*text-indent: .15em; */} .panel a .t_name_product { margin: 4px 0 0; font-family: 'Libre Baskerville', serif; font-weight: 400; text-indent: -.4em; } .panel a .t_name_small { font-size: 13px; letter-spacing: 0;} .panel a .t_name_small_en { margin: 0 1px;letter-spacing: .05em; vertical-align: 0;} .panel a .t_ttl_store {font-size: 14px;vertical-align: 0;border-bottom: #111 1px solid;} .panel a .t_jp { margin: 0 0 0 3px; font-size: 12px;vertical-align: 0} .panel a .link_dummy { display: inline-block; margin: 8px 0 0; padding:0 25px 0 12px;background: #111; border: #111 1px solid;color: #fefefe; font-size: 12px; letter-spacing: .05em; position: relative;z-index: 0; font-weight: 500; line-height: 26px;-webkit-transition: all 0.3s ease;transition: all 0.3s ease; overflow: hidden; } .panel a .link_dummy:before { position: absolute; top: 0; right: 6px; font-size: .85em; font-family:themify;content:"\e649"; font-weight: normal; z-index: 0;} .panel a .link_dummy:after { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: block; background: #fefefe; 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} /* superiorroom */ .panel a .t_cat_panel_en, .panel a .t_ttl_superiorroom, .panel a .t_copy_superiorroom{display: block; font-size: 13px;line-height: 1.6; } .panel a .t_cat_panel_en { color: #FE831F; font-size: 14px; font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0;} .panel a .t_ttl_superiorroom {margin: 1px 0 0;font-size: 14px; font-family: 'Libre Baskerville', serif; font-weight: 400;} .panel a .t_ttl_superiorroom .t_jp { margin: 0 0 0 .075em; font-size: .85em; letter-spacing: .025em; vertical-align: 0;} .panel a .t_copy_superiorroom { margin: 0 0 1px; font-size: 14px;} .panel a .t_copy_superiorroom_new { display: block; margin: 0 0 1px; font-size: 14px;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝"; font-weight: 400;line-height: 1.5;letter-spacing: 0.035em;font-feature-settings: "palt";} /* panel_box */ .panel .panel_box { display: flex;flex-wrap: wrap; justify-content: space-between; align-items: center; padding-right: 15px; gap:0 15px; position: relative; z-index: 0;} .panel .thumb_item {width: 80px; position: relative; z-index: 0; } .panel .thumb_item:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; z-index: -1;-webkit-transition: all 0.3s ease; transition: all 0.3s ease;} .panel .thumb_item img {-webkit-transition: all 0.3s ease; transition: all 0.3s ease;} .panel .panel_box .t_ttl_panel_en .panel .panel_box .t_ttl_panel_jp{ font-size: 13px; line-height: 1.2;} .panel .panel_box .t_ttl_panel_en {font-size: 11px;font-family: 'Libre Baskerville', serif; font-weight: 400;line-height: 1.3;} .panel .panel_box .t_ttl_panel_jp{ margin-top: 3px; font-size: 13px; line-height: 1.65; letter-spacing: 0;} .panel .panel_box .t_cat_panel { color: #FE831F; font-size: 13px; line-height: 1.3; } @media (min-width: 961px) and (hover: hover) { .panel a:hover .link_dummy { color: #111; } .panel a:hover .link_dummy:after { -webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)} .panel a:hover .thumb_item:after { background: #111;} .panel a:hover .thumb_item img{opacity: 0.7;} } @media only screen and (max-width: 960px) { .panel .close_btn_panel { width: 40px;height: 40px; } .panel .close_btn_panel:before { font-size: 12px;z-index: 0;line-height: 40px;} } @media only screen and (max-width: 640px) { .panel { position: fixed; bottom:0; right: 0; left: 0; padding:13px; } .panel:after { background: rgba(254,254,254,1); border: none;border-top: #111 1px solid;} .panel a { display: inline-block; font-size: 13px;font-weight: 500; line-height: 1.6; letter-spacing: 0.05em;} .panel .panel_inner { width:100%; } .panel .thumb_area { width:20%;} .panel .txt_area { top:49%; right:0; width:75%;} .panel a .t_cat_panel, .panel a .t_name_product, .panel a .t_name_small{font-size: 2.85vw;} .panel a .t_cat_panel {font-size: 2.85vw; /*text-indent: .15em; */} .panel a .t_name_small {font-size: 2.85vw; letter-spacing: 0;} .panel a .t_name_small_en { margin: 0 1px;letter-spacing: .05em; vertical-align: 0;} /* superiorroom */ .panel a .t_cat_panel_en {font-size: 13px;} .panel a .t_ttl_superiorroom { margin: 0;font-size: 3.15vw; font-size: 14px;} .panel a .t_ttl_superiorroom .t_jp {} .panel a .t_copy_superiorroom { margin: 0; font-size: 14px;} .panel a .t_copy_superiorroom_new{ margin: 0;} /* panel_box */ .panel .panel_box { padding-right: 20px; gap:0; } .panel .thumb_item {width: 65px;} .panel .txt_item {width: calc(100% - 85px);} .panel .txt_item br {display: none; } .panel .panel_box .t_ttl_panel_jp{ line-height: 1.55;} } @media only screen and (max-width: 414px) { .panel .thumb_area {width: 20%;} .panel .txt_area { top: 49%; right: 0; width: 75%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 0;} .panel a .t_cat_panel, .panel a .t_name_product, .panel a .t_name_small{ font-size: 3.3vw;} .panel a .t_cat_panel { font-size: 3.3vw; /*text-indent: .15em;*/ } .panel a .t_name_small {font-size: 3.3vw; letter-spacing: 0;} /* superiorroom */ .panel .thumb_area {width: 21.5%;} .panel .txt_area { top: 49%; right: 0; width: 73.5%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 0;} .panel a .t_cat_panel_en {font-size: 3.1vw;/*text-indent: .05em; */} .panel a .t_ttl_superiorroom { margin: .025em 0 0;font-size: 3.3vw;} .panel a .t_ttl_superiorroom .t_jp {} .panel a .t_copy_superiorroom { font-size: 3.1vw;} .panel a .t_copy_superiorroom_new{ margin: .025em 0 0;font-size: 3.2vw;} } /* --------------------------------------------------------------------------------------------------- .block_mv --------------------------------------------------------------------------------------------------- */ .block_mv { padding: 0; min-height: 100%; position: relative; z-index: 0;} /* .mv_area */ .block_mv .mv_area { position: absolute;top: 60px; right: 0; bottom: 0; left: 0;content: ""; z-index: 0;} /* .cover */ .block_mv .cover { position: absolute; top: 0; right: 0; bottom: 0;left: 0; z-index: 1; background: rgba(0,0,0,.1);background: rgb(0,0,0);background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%); } .block_mv .cover_half { right: 50%; } /* .img */ .block_mv .img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .block_mv .img:before {position: absolute; top: 0; left: 0; bottom: 0; right: 0;content: ""; z-index: -1;} .block_mv .img:after {position: absolute; top: 0; left: 0; bottom: 0; right: 0;content: ""; z-index: -1;} /* .img_half */ .block_mv .img_half { top: 60px; bottom: 0; left: 0; right: 0; z-index: 0;} .block_mv .img_half:before { position: absolute; top: 0; left: 1%; left: 0; width: 50%; bottom: 0;content: ""; -webkit-backface-visibility: hidden; backface-visibility:hidden;overflow:hidden;z-index: -1; } .block_mv .img_half:after { position: absolute; top: 0; width:50%; right: 0; bottom: 0;content: ""; -webkit-backface-visibility: hidden; backface-visibility:hidden;overflow:hidden;z-index: -1; } /* image */ .slider_mv_2023 .img_bj_2022aw_1:before { background: url("../images/home/topImg/2022aw_1.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2022aw_2:before { background: url("../images/home/topImg/2022aw_2.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2022aw_3:before { background: url("../images/home/topImg/2022aw_3.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_sunshift_ishidakazuho:before { background: url("../images/home/topImg/sunshift_ishidakazuho_0.jpg") top 50% center no-repeat; background-size: cover;} .slider_mv_2023 .img_sunshift_ishidakazuho:after { background: url("../images/home/topImg/sunshift_ishidakazuho_1.jpg") center left no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023ss_1:before { background: url("../images/home/topImg/2023ss_1.jpg") top 29.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023ss_2:before { background: url("../images/home/topImg/2023ss_2.jpg") top 14% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_1:after { background: url("../images/home/topImg/2023aw_1.jpg") top 27.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_2:after { background: url("../images/home/topImg/2023aw_2_.jpg") top 22.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_3:after { background: url("../images/home/topImg/2023aw_3_.jpg") top 20% center no-repeat; background-size: cover;} .slider_mv_2023 .img_heavyedition:after {background: url("../images/home/topImg/heavyedition_1_.jpg") top 11% center no-repeat; background-size: cover;} .slider_mv_2023 .img_heavyedition .cover { top: 66.666%; background: linear-gradient(180deg, rgba(30,30,30,0) 0%, rgba(0,0,0,0.35) 100%); } .slider_mv_2023 .img_bj_2024aw_1:after { background: url("../images/home/topImg/cut03_2650__.jpg") top 12.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2024aw_2:after { background: url("../images/home/topImg/cut03_2549__.jpg") top 22.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2024aw_3:after { background: url("../images/home/topImg/cut03_2644__.jpg") top 23.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2025ss_1:after { background: url("../images/home/topImg/25ss_cut03_2268.jpg") top 10% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2025ss_2:after { background: url("../images/home/topImg/25ss_cut03_2156.jpg") top 17.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2025ss_3:after { background: url("../images/home/topImg/25ss_cut03_2395.jpg") top 7.5% center no-repeat; background-size: cover;} /* .copy_area */ .block_mv .copy_area { position: absolute; bottom: 17.5vh; bottom: 10vh; left: 5%; z-index: 3; color: #fefefe;} .block_mv .copy_area .t_ttl_en { font-size: 15px;font-size: 18px; font-family: 'Libre Baskerville', serif; font-weight: 400;line-height: 1.7;letter-spacing: 0.1em;} .block_mv .copy_area .t_copy { font-size: 16px; font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0.05em;line-height: 2;} .block_mv .copy_area .t_copy_jp { margin: 7px 0 0;font-size: 16px;letter-spacing: 0.05em;line-height: 1.85;font-family:'Shippori Mincho B1'; font-weight: 500;letter-spacing: 0.1em;font-feature-settings: "palt";} /* .btn_mv */ .btn_mv { margin: 15px 0 0; display: inline-block;;position: relative; z-index: 0; border: none; border-bottom: #fefefe 1px solid; font-size: 15px; font-family: 'courier_prime_sansregular'; font-weight: normal; line-height: 1.7; } .btn_mv:after {display: inline-block; background: url()} @media (min-width: 961px) and (hover: hover) { .btn_mv:hover { border-bottom: #fefefe 1px solid;color: #111; background: #fefefe;} } .btn__ { position: relative; z-index: 0; border: none;border-bottom: #fefefe 1px solid;} .btn__:after {display: inline-block; background: url()} @media (min-width: 961px) and (hover: hover) { .btn__:hover { border-bottom: #fefefe 1px solid;color: #111; background: #fefefe;} } @media only screen and (max-width: 960px) { .slider_mv_2023 .img_bj_2022aw_1:before { background: url("../images/home/topImg/2022aw_1_sp.jpg") top center no-repeat; background-size: cover; } .slider_mv_2023 .img_bj_2022aw_2:before { background: url("../images/home/topImg/2022aw_2_sp.jpg") top center no-repeat; background-size: cover; } .slider_mv_2023 .img_bj_2022aw_3:before { background: url("../images/home/topImg/2022aw_3_sp.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023ss_1:before { background: url("../images/home/topImg/2023ss_1_900.jpg") top 17.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023ss_2:before { background: url("../images/home/topImg/2023ss_2_900.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_1:after { background: url("../images/home/topImg/2023aw_1_900.jpg") top 27.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_2:after { background: url("../images/home/topImg/2023aw_2_900.jpg") top 12.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_3:after { background: url("../images/home/topImg/2023aw_3_900.jpg") top 14.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_heavyedition:after {background: url("../images/home/topImg/heavyedition_1_900.jpg") top 10% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2024aw_1:after { background: url("../images/home/topImg/cut03_2650__tl.jpg") top 5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2024aw_2:after { background: url("../images/home/topImg/cut03_2549__tl.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2024aw_3:after { background: url("../images/home/topImg/cut03_2644__tl.jpg") top center no-repeat; background-size: cover;} .block_mv .img_half:before { top: 0; left: 0; width: 100%; bottom: 0; display: none} .block_mv .img_half:after { top: 0%;width:100%; right: 0; bottom: 0; } .block_mv .cover_half { right: 0;} .block_mv .copy_area .t_ttl_en { font-size: 17px;} } @media only screen and (max-width: 738px) { .block_mv .mv_area { position: absolute;top: 60px; right: 0; bottom: 0; left: 0;content: ""; z-index: 0;} .slider_mv_2023 .img_bj_2023aw_3:after { background: url("../images/home/topImg/2023aw_3_900.jpg") top 16.5% center no-repeat; background-size: cover;} } @media only screen and (max-width: 640px) { .slider_mv_2023 .img_bj_2022aw_1:before { background: url("../images/home/topImg/2022aw_1_sp_.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2022aw_2:before { background: url("../images/home/topImg/2022aw_2_sp_.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2022aw_3:before { background: url("../images/home/topImg/2022aw_3_sp_.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023ss_1:before { background: url("../images/home/topImg/2023ss_1_sp.jpg") top 10% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023ss_2:before { background: url("../images/home/topImg/2023ss_2_sp.jpg") top center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_1:after { background: url("../images/home/topImg/2023aw_1_900.jpg") top 27.5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_2:after { background: url("../images/home/topImg/2023aw_2_640.jpg") top 28% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2023aw_3:after { background: url("../images/home/topImg/2023aw_3_640.jpg") top 25% center no-repeat; background-size: cover;} .slider_mv_2023 .img_heavyedition:after {background: url("../images/home/topImg/heavyedition_1_sp.jpg") top 10% center no-repeat; background-size: cover;} .slider_mv_2023 .img_heavyedition .cover { top: 50%; background: linear-gradient(180deg, rgba(30,30,30,0) 0%, rgba(0,0,0,0.5) 100%); } .slider_mv_2023 .img_bj_2024aw_1:after { background: url("../images/home/topImg/cut03_2650__sp.jpg") top 5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2025ss_1:after { background: url("../images/home/topImg/25ss_cut03_2268_sp.jpg") top 10% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2025ss_2:after { background: url("../images/home/topImg/25ss_cut03_2156_sp.jpg") top 5% center no-repeat; background-size: cover;} .slider_mv_2023 .img_bj_2025ss_3:after { background: url("../images/home/topImg/25ss_cut03_2395_sp.jpg") top 10% center no-repeat; background-size: cover;} .block_mv .copy_area { bottom: 12.5vw; left: 5%; right: 5%;} .block_mv .copy_area .t_ttl_en { font-size: 16px;} .block_mv .copy_area .t_copy_jp {margin: 7px 0 0; font-size: 13px; fontfont-weight: 500; letter-spacing: .1em; line-height: 1.85;} .btn_mv { margin: 15px 0 0; font-size: 13px; line-height: 1.5; } } @media only screen and (max-width: 320px) { .block_mv .copy_area .t_copy_jp { font-size: 12px;} } /* ----- .mainSlider ----- */ .slider_mv_2023 .slick-list, .slider_mv_2023 .slick-track { height: 100%; } /* --- slick-counter --- */ .slider_mv_2023 .slick-counter { position: absolute; bottom: 35px; left: 5%; height: 30px; width: 110px;color: #fafafa; background: #111; font-size: 14px; font-family:'Libre Baskerville', serif; font-weight:400; text-align: center; line-height: 30px; z-index: 1; -webkit-border-radius: 1px;border-radius: 1px;} .slider_mv_2023 .slick-counter .current, .slider_mv_2023 .slick-counter .total{ display: inline-block;width: 16px; vertical-align: 0;} .slider_mv_2023 .slick-counter .counter_line { font-size: 17px; vertical-align: 0; font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0} /* --- Arrows --- */ .slider_mv_2023 .slick-prev, .slider_mv_2023 .slick-next { font-size: 0; display: block; position: absolute; bottom:35px;left: 5%; width: 30px; height: 30px; padding: 0;cursor: pointer; color: #111; color: #fefefe; background: none; line-height: 29px;border: none; z-index: 2; } .slider_mv_2023 .slick-prev:before, .slider_mv_2023 .slick-next:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-family: 'themify'; font-size: 11px;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slider_mv_2023 .slick-prev { padding:0; margin: 0; } .slider_mv_2023 .slick-prev:before { content: "\e64a"; } .slider_mv_2023 .slick-next { margin-left: 80px; } .slider_mv_2023 .slick-next:before { content: "\e649"; } @media only screen and (max-width: 640px) { .slider_mv_2023 .slick-counter { bottom: 25px; left: 5%; height: 30px; width: 100px; font-size: 13px; } .slider_mv_2023 .slick-counter .current, .slider_mv_2023 .slick-counter .total{ display: inline-block;width: 16px; vertical-align: 0;} .slider_mv_2023 .slick-counter .counter_line { font-size: 16px; } .slider_mv_2023 .slick-prev, .slider_mv_2023 .slick-next { bottom:25px;left: 5%;} .slider_mv_2023 .slick-prev:before, .slider_mv_2023 .slick-next:before { font-size: 11px; } .slider_mv_2023 .slick-next { margin-left: 70px;} } /* ----- .mainvisual ----- */ .mainvisual{height: calc(var(--vh, 1vh) * 100);} @media only screen and (max-width: 738px) { .mainvisual{height: calc(var(--vh, 1vh) * 100); min-height: 100vw; } } @media only screen and (max-width: 640px) { .mainvisual{height: calc(var(--vh, 1vh) * 100);} } /* ----- .img_cover ----- */ .img_cover { position: absolute; top: 60px; left: 5%; bottom: 0; right: 5%; background-color: transparent; opacity: 0; z-index: 1;display: none;} @media only screen and (max-width: 960px) { .img_cover { left: 0; right: 0; } } @media only screen and (max-width: 738px) { .img_cover { top:50px; } } /* --------------------------------------------------------------------------------------------------- 　.block_home_product --------------------------------------------------------------------------------------------------- */ .block_home_product { padding: 90px 5%; position: relative; z-index: 1;} @media only screen and (max-width: 960px) { .block_home_product { padding: 80px 5%;} } @media only screen and (max-width: 738px) { .block_home_product { padding: 70px 5%;} } .block_home_product .title_arrival { font-size: 25px;font-family: 'Libre Baskerville', serif; font-weight: 400;line-height: 1.2; letter-spacing: 0.05em; margin-top: 10px; } @media only screen and (max-width: 960px) { .block_home_product .title_arrival { font-size: 20px;} } @media only screen and (max-width: 738px) { .block_home_product .title_arrival { font-size: 16px; margin-top: 8px;} } /* --------------------------------------------------------------------------------------------------- 　.block_home_news --------------------------------------------------------------------------------------------------- */ .block_home_news { padding: 90px 5%; position: relative; z-index: 1;} .block_home_news: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) { .block_home_news { padding: 80px 5%;} } @media only screen and (max-width: 738px) { .block_home_news { padding: 70px 5%;} } /* .news_archive */ .news_archive { display: flex; flex-wrap: wrap; gap:0 5%;} .news_archive .news_item { width: calc((100% - 2 * 5%) / 3); } @media only screen and (max-width: 1024px) { .news_archive { gap:0 5%;} .news_archive .news_item { width: calc((100% - 2 * 5%) / 3);} } @media only screen and (max-width: 960px) { .news_archive { flex-direction: column; gap:50px 0;} .news_archive .news_item { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} } @media only screen and (max-width: 738px) { .news_archive { gap:35px 0;} } @media only screen and (max-width: 640px) { .news_archive { gap:30px 0;} } /* .imgArea */ .news_archive .news_item .img_area { position: relative; z-index: 1; overflow: hidden; background: #111; border: #eee 1px solid;} .news_archive .news_item .img_area img { aspect-ratio: 4 / 3;object-fit: cover; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;} @media (min-width: 961px) and (hover: hover) { .news_archive .news_item .img_area:hover img { opacity: 0.3;} } @media only screen and (max-width: 960px) { .news_archive .news_item .img_area { width: 47.5%;} } @media only screen and (max-width: 738px) { .news_archive .news_item .img_area { width: 40%;} } /* .txtArea */ .news_archive .news_item .txt_area { margin-top: 20px; padding: 0 2.5% 0 0;} .news_archive .news_item .t_date { font-size: 14px; font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0; line-height: 1;} .news_archive .news_item .t_date span.new { margin-left: 10px; color: #fe831f;} .news_archive .news_item .t_ttl_news { font-size: 17px;font-family: 'Shippori Mincho B1','Droid Serif', serif; letter-spacing: 0.05em; line-height: 1.8; margin: 10px 0;} .news_archive .news_item .t_ttl_news a { border-bottom: #111 1px solid; position: relative; z-index: 0;} .news_archive .news_item .t_txt { font-size: 13px;line-height: 1.9;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; /*font-feature-settings: "palt";*/} @media (min-width: 961px) and (hover: hover) { .news_archive .news_item .t_ttl_news a:hover { color: #fefefe; background: #111;} } @media only screen and (max-width: 960px) { .news_archive .news_item .txt_area { width: 46.5%; margin: 0; padding: 0;} .news_archive .news_item .t_ttl_news { font-size: 17px; margin: 15px 0;} } @media only screen and (max-width: 738px) { .news_archive .news_item .txt_area { width: 52.5%; margin-right: 1.5%; } .news_archive .news_item .t_date { font-size: 13px; } .news_archive .news_item .t_ttl_news { font-size: 16px; margin: 10px 0 0; line-height: 1.75;} .news_archive .news_item .t_txt {display: none; font-size: 0;} } @media only screen and (max-width: 640px) { .news_archive .news_item .txt_area { width: 53.5%; margin-right: 0; } .news_archive .news_item .t_ttl_news { margin: 5px 0 0;font-size: 14.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden;} } /* --------------------------------------------------------------------------------------------------- 　.block_home_feature --------------------------------------------------------------------------------------------------- */ .block_home_feature { padding: 110px 5%; position: relative; z-index: 1;} .block_home_feature: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) { .block_home_feature { padding: 80px 5%;} } @media only screen and (max-width: 738px) { .block_home_feature { padding: 70px 0;} } /* .headline */ .block_home_feature .headline { position: absolute; top: 25px; left: 0; margin: 0; padding: 0; width: 200px; height: 200px; border: #111 1px dotted;z-index: 0} .block_home_feature .headline .headline_inner { position: absolute; top: 50%; left: 0; right: 0; text-align: center; z-index: 0;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);} .block_home_feature .headline .t_ttl_en {font-size: 18px;font-family: 'Libre Baskerville', serif;font-weight: 400; line-height: 1; letter-spacing: .075em; text-indent: .1em} .block_home_feature .headline .t_ttl_jp { margin: 15px 0 0; font-size: 24px; font-family: 'Droid Serif','Shippori Mincho B1', serif; font-weight: 600; letter-spacing: .1em; line-height: 1;} /* .feature_area */ .block_home_feature .feature_area { margin: 0; padding: 0 0 0 280px; display: flex; flex-wrap: wrap;gap:60px 9%;} .block_home_feature .feature_area .feature_box { width: calc((100% - 1 * 9%) / 2);} @media only screen and (max-width: 1024px) { .block_home_feature .headline { width: 180px; height: 180px;} .block_home_feature .headline .t_ttl_en {font-size: 16px;text-indent: .15em} .block_home_feature .headline .t_ttl_jp { margin: 15px 0 0; font-size: 27px;} .block_home_feature .feature_area {padding: 0 0 0 240px;} } @media only screen and (max-width: 960px) { .block_home_feature .headline { position: static; border: none; width: 100%; height: auto; margin-bottom: 60px;} .block_home_feature .headline .headline_inner { position: static; -webkit-transform: translate(0,0);transform: translate(0,0);} .block_home_feature .headline .t_ttl_en {font-size: 20px;letter-spacing: .1em; text-indent: 0} .block_home_feature .headline .t_ttl_jp { margin: 15px 0 0; font-size: 30px;} .block_home_feature .feature_area { padding: 0; gap:60px 5%;} .block_home_feature .feature_area .feature_box {width: calc((100% - 1 * 5%) / 2); } } @media only screen and (max-width: 738px) { .block_home_feature .headline .t_ttl_en {font-size: 15px;} .block_home_feature .headline .t_ttl_jp { margin: 12px 0 0; font-size: 25px;} .block_home_feature .feature_area { display: block; padding-bottom:25px;margin-bottom:-25px;overflow: auto;-webkit-overflow-scrolling: touch;white-space: nowrap;} .block_home_feature .feature_area .feature_box {display: inline-block;width:60%;margin:0 0 0 7.5%; border: none; white-space: initial;} .block_home_feature .feature_area .feature_box:first-child{margin: 0 0 0 5% } .block_home_feature .feature_area .feature_box:nth-child(2){margin: 0 0 0 5% } .block_home_feature .feature_area .feature_box:last-child {margin: 0 5% 0 5% } } @media only screen and (max-width: 640px) { .block_home_feature .feature_area { padding-bottom:25px;margin-bottom:-25px; } .block_home_feature .feature_area .feature_box { width:65%;} } .block_home_feature .feature_area .feature_box .txt_area .t_ttl_feature { font-size: 15px;} @media only screen and (max-width: 738px) { .block_home_feature .feature_area .feature_box .txt_area .t_ttl_feature { font-size: 15px; line-height: 1.7} } /* ----------------------------------------------------------- #home_lookbook ----------------------------------------------------------- */ #home_lookbook { padding: clamp(150px, 12vw, 250px) 5%;position: relative; z-index: 1;} #home_lookbook .imgArea { position: absolute; top: 0; left: 5%; right: 5%; left: 0; right: 0; bottom: 0; background: url(../images/lookbook/5/thumb.jpg) top right no-repeat; background-size: cover; z-index: -1;} /* .imgArea a */ #home_lookbook .imgArea a { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;} @media only screen and (max-width: 960px) { #home_lookbook { padding: 150px 5% 70px; } #home_lookbook .imgArea { left: 0; right: 0;} } @media only screen and (max-width: 738px) { #home_lookbook { padding: 0 0 70px; overflow: hidden;} #home_lookbook .imgArea { position: static; margin: 0; height: 75vw;} #home_lookbook .imgArea a { display: block;} } @media only screen and (max-width: 640px) { #home_lookbook .imgArea { height: 85vw;} } /* imgArea 設定*/ #home_lookbook .imgArea_6 { background: url(../images/lookbook/6/thumb.jpg) center center no-repeat; background-size: cover;} #home_lookbook .imgArea_7 {background: url(../images/lookbook/7/thumb.jpg) center center no-repeat; background-size: cover;} #home_lookbook .imgArea_8 {background: url(../images/lookbook/8/thumb_new2.jpg) top center no-repeat; background-size: cover;} #home_lookbook .imgArea_9 {background: url("../images/lookbook/9/thumb_Lsize.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_10 {background: url("../images/lookbook/10/thumb.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_11 {background: url("../images/lookbook/11/thumb.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_12 {background: url("../images/lookbook/12/thumb.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_13 {background: url("../images/lookbook/13/_thumb2.jpg") top 22.5% center no-repeat; background-size: cover;} #home_lookbook .imgArea_14 {background: url("../images/lookbook/14/230922_bj_3415.jpg") top left no-repeat; background-size: cover;} #home_lookbook .imgArea_15 {background: url("../images/lookbook/15/img_head.jpg") center center no-repeat; background-size: cover;} #home_lookbook .imgArea_16 {background: url("../images/lookbook/16/img_head.jpg") top 20% center no-repeat; background-size: cover;} #home_lookbook .imgArea_17 {background: url("../images/lookbook/17/thumb.jpg") top right no-repeat; background-size: cover;} @media only screen and (max-width: 960px) { #home_lookbook .imgArea_12 {background: url("../images/lookbook/12/thumb_sp.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_11 {background: url("../images/lookbook/11/thumb_900.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_14 {background: url("../images/lookbook/14/thumb_900.jpg") top center no-repeat; background-size: cover;} } @media only screen and (max-width: 738px) { #home_lookbook .imgArea_6 {background: url(../images/lookbook/6/thumb_sp.jpg) center center no-repeat; background-size: cover;} #home_lookbook .imgArea_7 {background: url(../images/lookbook/7/thumb_sp.jpg) center center no-repeat; background-size: cover;} #home_lookbook .imgArea_8 {background: url(../images/lookbook/8/thumb_sp_.jpg) center center no-repeat; background-size: cover;} #home_lookbook .imgArea_9 {background: url("../images/lookbook/9/thumb_Ssize.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_10 {background: url("../images/lookbook/10/thumb_sp.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_11 {background: url("../images/lookbook/11/thumb_738.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_13 {background: url("../images/lookbook/13/_thumb2_sp.jpg") top 10% center no-repeat; background-size: cover;} #home_lookbook .imgArea_14 {background: url("../images/lookbook/14/thumb_sp.jpg") top center no-repeat; background-size: cover;} #home_lookbook .imgArea_16 {background: url("../images/lookbook/16/img_head_sp.jpg") top 10% center no-repeat; background-size: cover;} #home_lookbook .imgArea_17{background: url("../images/lookbook/17/thumb_sp.jpg") top center no-repeat; background-size: cover;} } /* .lookbookArea */ #home_lookbook .lookbookArea { position: relative; z-index: 1;} /* .txtArea */ #home_lookbook .lookbookArea .txtArea { width: 90%; margin-left: 0;} #home_lookbook .lookbookArea .txtArea_white { color: #fefefe;} /* .titleArea */ #home_lookbook .lookbookArea .txtArea h2 { position: relative; font-size: 55px; font-family: 'Libre Baskerville', serif;font-weight: 400;letter-spacing: 1.5px; line-height:1.3; z-index:1; } #home_lookbook .lookbookArea .txtArea h2 span.small { display: block; font-size: 16px; letter-spacing: 1px; margin-bottom: 15px;font-family: 'Libre Baskerville', serif; font-weight: 400; } #home_lookbook .lookbookArea .txtArea h2 span.shape { font-size: 0.75em;font-family: 'Libre Baskerville', serif; vertical-align: 0;} #home_lookbook .lookbookArea .txtArea h2 span.italic {font-style: italic;} @media only screen and (max-width: 1024px) { #home_lookbook .lookbookArea .txtArea h2 { font-size: 40px;letter-spacing: 1.5px; line-height:1.3; } #home_lookbook .lookbookArea .txtArea h2 span.small { display: block; font-size: 15px;} } @media only screen and (max-width: 960px) { #home_lookbook .lookbookArea .txtArea h2 span.small { display: block; font-size: 14px;} } @media only screen and (max-width: 738px) { #home_lookbook .lookbookArea { margin: 45px 5% 0;} #home_lookbook .lookbookArea .txtArea { float: none; width: 100%; margin-left: 0; text-align: center;} #home_lookbook .lookbookArea .txtArea_white { color: #111;} #home_lookbook .lookbookArea .titleArea {} #home_lookbook .lookbookArea .titleArea_white:after { border-color: #111;} #home_lookbook .lookbookArea .titleArea:after { width: 35px; margin: 20px auto;} #home_lookbook .lookbookArea .txtArea h2 { font-size: 25px; line-height:1.4; } #home_lookbook .lookbookArea .txtArea h2 span.small { font-size: 12px;letter-spacing: 1.5px; margin-bottom: 10px;} #home_lookbook .lookbookArea .txtArea h2 span.shape { font-size: 0.75em;vertical-align: 0;} } @media only screen and (max-width: 640px) { #home_lookbook .lookbookArea { margin: 35px 5% 0;} } /* .infoArea */ #home_lookbook .lookbookArea .infoArea { margin: 25px 0 0; } #home_lookbook .lookbookArea .infoArea dl { display: block;margin-right: 10px;font-size: 14px;font-family: 'courier_prime_sansbold'; font-weight: normal;letter-spacing: 0;line-height: 1.5;} #home_lookbook .lookbookArea .infoArea dl:first-child { display: block;} #home_lookbook .lookbookArea .infoArea dl dt { display: inline-block; margin: 0; font-size: 0.85em; font-family: 'courier_prime_sansregular'; font-weight: normal;vertical-align: 0;} #home_lookbook .lookbookArea .infoArea dl dd { display: inline-block; font-family: 'Libre Baskerville', serif;font-size: 11px;font-weight:700; letter-spacing: .02em; vertical-align: 0;} #home_lookbook .lookbookArea .infoArea dl dd span { font-size: 0.85em; vertical-align: 0;} /* .linkArea */ #home_lookbook .lookbookArea .linkArea { margin-top:35px; text-align:left; } @media only screen and (max-width: 960px) { #home_lookbook .lookbookArea .infoArea dl { display: block;font-size: 12px; margin: 0;} #home_lookbook .lookbookArea .linkArea a.btnBorder:after { background: none; } } @media only screen and (max-width: 738px) { #home_lookbook .lookbookArea .infoArea { display: none; } #home_lookbook .lookbookArea .infoArea dl { margin-top: 5px; font-size: 13px; letter-spacing: 1px; line-height: 1.8;} #home_lookbook .lookbookArea .infoArea dl:first-child { display: block; margin-top: 0;} #home_lookbook .lookbookArea .infoArea dl dt { display: block; margin: 0; font-size: 0.85em; } #home_lookbook .lookbookArea .infoArea dl dd { display: block; } #home_lookbook .lookbookArea .infoArea dl dd span { font-size: 0.85em; vertical-align: 0;} #home_lookbook .lookbookArea .linkArea { margin-top:35px; text-align:center; } #home_lookbook .lookbookArea .linkArea a.btn { margin:0; width:100%; max-width:280px; text-align: center;} #home_lookbook .lookbookArea .linkArea a.btnBorder { color: #111; border-color: #111; background: none;} #home_lookbook .lookbookArea .linkArea a.btnBorder:hover { color: #111;} } /* --- White --- */ #home_lookbook .color_white { color: #fefefe; } #home_lookbook .lookbookArea .titleArea_border_white:after, #home_lookbook .linkArea a.btn_white { color: #fefefe; border-color: #fefefe; background: none;} #home_lookbook .linkArea a.btn_white:after { background: #fefefe; } @media (min-width: 961px) and (hover: hover) { #home_lookbook .linkArea a.btn_white:hover { color: #111;} } @media only screen and (max-width: 738px) { #home_lookbook .color_white { color: #111; } #home_lookbook .lookbookArea .titleArea_border_white:after, #home_lookbook .linkArea a.btn_white { color: #111; border-color: #111; background: none;} #home_lookbook .linkArea a.btn_white:after { display: none; } } /* --------------------------------------------------------------------------------------------------- 　.block_home_workflow --------------------------------------------------------------------------------------------------- */ .block_home_workflow {padding: 90px 5%;position: relative; z-index: 1;} @media only screen and (max-width: 960px) { .block_home_workflow { padding: 80px 5%;} } @media only screen and (max-width: 738px) { .block_home_workflow { padding: 70px 5%;} .block_home_workflow:before { position: absolute; top: 0; left: 5%; right: 5%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} } /* --------------------------------------------------------------------------------------------------- 　.block_home_essay --------------------------------------------------------------------------------------------------- */ .block_home_essay { padding: 90px 5%; position: relative; z-index: 1;} .block_home_essay:after { position: absolute; top: 0; left: 5%; right: 5%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;} .block_home_essay h2.name { font-size: 25px; font-family: 'Libre Baskerville', serif; font-weight: 400;line-height: 1; letter-spacing: 1.5px; margin-top: 10px; } .block_home_essay h2.name span { font-style: italic;} @media only screen and (max-width: 960px) { .block_home_essay { padding: 80px 5%;} .block_home_essay h2.name { font-size: 20px; } } @media only screen and (max-width: 738px) { .block_home_essay { padding: 70px 5%;} .block_home_essay h2.name { font-size: 16px; margin-top: 8px; } } /* .news_archive */ .essay_archive { display: flex; flex-wrap: wrap; gap:0 5%;} .essay_archive .essay_item { width: calc((100% - 2 * 5%) / 3); } @media only screen and (max-width: 1024px) { .essay_archive { gap:0 5%;} .essay_archive .essay_item { width: calc((100% - 2 * 5%) / 3);} } @media only screen and (max-width: 960px) { .essay_archive { flex-direction: column; gap:50px 0;} .essay_archive .essay_item { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} } @media only screen and (max-width: 738px) { .essay_archive { gap:35px 0;} } @media only screen and (max-width: 640px) { .essay_archive { gap:30px 0;} } /* .img_area */ .essay_archive .essay_item .img_area { position: relative; z-index: 1; overflow: hidden; background: #111; border: #eee 1px solid;} .essay_archive .essay_item .img_area img { aspect-ratio: 4 / 3;object-fit: cover; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;} @media (min-width: 961px) and (hover: hover) { .essay_archive .essay_item .img_area:hover img { opacity: 0.3;} } @media only screen and (max-width: 960px) { .essay_archive .essay_item .img_area { width: 47.5%;} } @media only screen and (max-width: 738px) { .essay_archive .essay_item .img_area { width: 40%;} } /* .txt_area */ .essay_archive .essay_item .txt_area { margin-top: 20px; padding: 0 2.5% 0 0;} .essay_archive .essay_item .t_date { font-size: 14px; font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0; line-height: 1;} .essay_archive .essay_item .t_date span.new { margin-left: 10px; color: #fe831f;} .essay_archive .essay_item .t_ttl_essay { font-size: 15px; font-family: 'Droid Serif','Shippori Mincho B1', serif;font-weight: 500; letter-spacing: 0.035em; line-height: 1.8; margin: 10px 0;} .essay_archive .essay_item .t_ttl_essay a { border-bottom: #111 1px solid; position: relative; z-index: 0;} .essay_archive .essay_item .t_txt { font-size: 13px;line-height: 1.9;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; /*font-feature-settings: "palt";*/} @media (min-width: 961px) and (hover: hover) { .essay_archive .essay_item .t_ttl_essay a:hover { color: #fefefe; background: #111;} } @media only screen and (max-width: 960px) { .essay_archive .essay_item .txt_area { width: 46.5%; margin: 0; padding: 0;} .essay_archive .essay_item .t_ttl_essay { font-size: 15px; margin: 15px 0;} } @media only screen and (max-width: 738px) { .essay_archive .essay_item .txt_area { width: 52.5%; margin-right: 1.5%; } .essay_archive .essay_item .t_date { font-size: 13px; } .essay_archive .essay_item .t_ttl_essay { font-size: 15px; margin: 10px 0 0; line-height: 1.65;} .essay_archive .essay_item .t_txt {display: none; font-size: 0;} } @media only screen and (max-width: 640px) { .essay_archive .essay_item .txt_area { width: 53.5%; margin-right: 0; } .essay_archive .essay_item .t_ttl_essay { margin: 5px 0 0;font-size: 14.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden;} } /* --------------------------------------------------------------------------------------------------- 　#home_follow --------------------------------------------------------------------------------------------------- */ #home_follow {padding: 90px 5%;position: relative; z-index: 1;} #home_follow: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: 900px) { #home_follow { padding: 80px 5%;} } @media only screen and (max-width: 738px) { #home_follow { padding: 70px 5%;} } /* .followArea */ #home_follow .followArea { margin: -35px 0 0; position: relative; z-index: 0;} /* .imgArea */ #home_follow .followArea .imgArea { margin-top: 50px; position: relative; z-index: 1; } /* .txtArea */ #home_follow .followArea .txtArea { text-align: center;} #home_follow .followArea .txtArea:after { display: block; width: 50px; height: 0; content: ""; border-top: #111 1px solid; margin: 20px auto;} #home_follow .followArea .txtArea h3 { position: relative; font-size: 25px; line-height:1; z-index:3; font-family: 'Libre Baskerville', serif; font-weight: 400; font-style: italic; letter-spacing: 1px;} #home_follow .followArea .linkArea a.btn {width:100%; max-width:300px;} #home_follow .followArea .linkArea a.btn:before { right:auto; left: 10px;font-size:22px; font-family:'FontAwesome';content:"\f16d";} @media only screen and (max-width: 900px) { #home_follow .followArea .imgArea { margin-top: 45px; } #home_follow .followArea .txtArea h3 { font-size: 20px;} #home_follow .followArea .linkArea a.btn { max-width:300px;} #home_follow .followArea .linkArea a.btn:before { font-size:20px;} } @media only screen and (max-width: 738px) { #home_follow .followArea .imgArea { margin-top: 40px; } #home_follow .followArea .txtArea { margin-top: -15px;} #home_follow .followArea .txtArea h3 { font-size: 20px;} #home_follow .followArea .linkArea a.btn { max-width:300px;} #home_follow .followArea .linkArea a.btn:before { font-size:20px;} } /* ul.imageInstagram */ ul.imageInstagram { margin: -15px; margin-top: 45px; padding: 0; font-size: 0; } ul.imageInstagram li { list-style: none; margin: 0; padding: 0; display: inline-block; width: 25%; border: transparent 15px solid; padding-bottom: 30px; position:relative; z-index: 0; } ul.imageInstagram li .imgBox { background: #111; } ul.imageInstagram li img { display: block; width: 100%; height: auto; border: #111 1px solid;-webkit-transition: all 0.7s ease; transition: all 0.7s ease; } ul.imageInstagram li:hover img {opacity: 0.3;} ul.imageInstagram li .imgBox a {position: relative; z-index: 1; display: block;} ul.imageInstagram li .imgBox a:after { position: absolute; top: 0; right:0; bottom: 0; left: 0; margin: auto; width: 50px; height: 50px; color: #fefefe; font-size:35px; font-family:'FontAwesome';content:"\f16d"; text-align: center; line-height: 50px; z-index: 0;-webkit-transition: all 0.5s ease; transition: all 0.5s ease; opacity: 0;-webkit-transform: rotate(-90deg);transform: rotate(-90deg);} ul.imageInstagram li .imgBox a:hover:after { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } /* .il-photo__likes */ .il-photo__likes { background: #fefefe; display: block; padding-left: 18px; font-size: 14px; font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0;line-height: 1; position: absolute; z-index: 1; bottom: -30px; left: 0; } .il-photo__likes:before { position: absolute; top: 0 ; left: 0; width: 18px; font-size: 0.9em; font-family:themify; content:"\e634";} @media only screen and (max-width: 960px) { ul.imageInstagram { margin-top: 40px;} ul.imageInstagram li { width: 50%;} ul.imageInstagram li:hover img {opacity: 1;} ul.imageInstagram li .imgBox a:after { display: none;} /* .il-photo__likes */ .il-photo__likes { background: #fefefe; display: block; padding-left: 18px; font-size: 14px; font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0;line-height: 1; position: absolute; z-index: 1; bottom: -30px; left: 0; } .il-photo__likes:before { position: absolute; top: 0 ; left: 0; width: 18px; font-size: 0.9em; font-family:themify; content:"\e634";} } @media only screen and (max-width: 738px) { ul.imageInstagram { margin: -15px -5px; margin-top: 30px; } ul.imageInstagram li { border-right-width:5px; border-left-width:5px; padding-bottom: 25px; } .il-photo__likes { font-size: 13px; bottom: -25px; } }