#container{ font-size: 14px; font-family:"Noto Sans Japanese", "Josefin Sans","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; line-height: 44px; letter-spacing: .12em; /* min-width: 1092px; */ } body, html{ color: #000000; -webkit-text-size-adjust: none; /* min-width: 1092px; */ } #container div, #container ul, #container li, #container h1, #container h2, #container h3, #container h4, #container p{ font-weight:normal; padding: 0; margin: 0; } #container ul{ list-style: none; width: 100%; height: 100%; } .clearfix:after{ content: ""; display: block; clear: both; } * html .clearfix{ zoom: 1; } /* IE6 */ *:first-child+html .clearfix{ zoom: 1; } /* IE7 */ #container .section{ max-width: 1052px; padding: 0 20px; margin: 0 auto; } #container a{ color: #000000; text-decoration: none; border-bottom: 1px solid #000000; outline: none; } #container .btn{ display: block; position: relative; color: #ffffff; font-size: 16px; text-align: center; text-decoration: none; line-height: 64px; width: 300px; background: #000000; box-sizing: border-box; padding-right: 25px; } #container .btn:before{ content: ""; position: absolute; top: 0; bottom: 0; right: 30px; width: 28px; height: 12px; background: url(/-/media/cojp/product/hsm/special/parie/img/icon_btn_arrow.png) no-repeat center; margin: auto; } #container .btn_dashed{ color: #000000; font-size: 14px; line-height: 56px; background: none; box-sizing: border-box; border: 1px dashed #000000; } #container .btn_dashed:before{ background: url(/-/media/cojp/product/hsm/special/parie/img/icon_btn_arrow_black.png) no-repeat center; } /*---------------------------- mv ----------------------------*/ #container .mv{ width: 100%; } #container .mv_pc{ position: relative; min-height: 640px; /* min-width: 1092px; */ } #container .mv a{ border-bottom: 0; } #container .mv_pc .menu{ position: absolute; top: 0; left: 0; text-align: center; width: 40%; max-width: 400px; height: 100%; } #container .mv_pc .menu .menu_inner{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 560px; margin: auto; } #container .mv_pc .menu h1{ margin-bottom: 45px; } #container .mv_pc .pagination_pc span{ display: block; width: 54px; margin: 0 auto 6px; } #container .mv_pc .pagination_pc span:hover{ opacity: 1; } /* pagination_pc */ #container .mv_pc .pagination_pc span{ width: 54px; border-radius: 0; -webkit-transform: scale(.6, .6); transform: scale(.6, .6); opacity: .5; } #container .mv_pc .pagination_pc span:hover, #container .mv_pc .pagination_pc span.swiper-pagination-bullet-active{ -webkit-animation: pagination .4s both ease; animation: pagination .4s both ease; } @-webkit-keyframes pagination { 0%{ -webkit-transform: scale(.6, .6); opacity: .5; } 100%{ -webkit-transform: scale(1, 1); opacity: 1; } } @keyframes pagination { 0%{ transform: scale(.6, .6); opacity: .5; } 100%{ transform: scale(1, 1); opacity: 1; } } #container .mv_pc .pagination_pc span:nth-child(1){ height: 35px; background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_1.jpg) no-repeat center; background-size: 54px 35px; } #container .mv_pc .pagination_pc span:nth-child(2){ height: 44px; background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_2.jpg) no-repeat center; background-size: 54px 44px; } #container .mv_pc .pagination_pc span:nth-child(3){ height: 58px; background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_3.jpg) no-repeat center; background-size: 54px 58px; } #container .mv_pc .pagination_pc span:nth-child(4){ height: 57px; background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_4.jpg) no-repeat center; background-size: 54px 57px; } #container .mv_pc .pagination_pc span:nth-child(5){ height: 55px; background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_5.jpg) no-repeat center; background-size: 54px 55px; } #container .mv_pc .pagination_pc span:nth-child(6){ height: 53px; background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_6.jpg) no-repeat center; background-size: 54px 53px; } #container .mv_pc .pagination_pc span:nth-child(7){ height: 46px; background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_7.jpg) no-repeat center; background-size: 54px 46px; } #container .mv_pc .mv_pic_wrap{ position: relative; float: right; width: 100%; height: 100%; } #container .mv .mv_pic_wrap li{ color: transparent; width: 100%; height: 100%; box-sizing: border-box; } /* mv_pic_wrap */ #container .mv_pc .mv_pic_wrap .mv_1{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_1.jpg) no-repeat center; background-size: cover; } #container .mv_pc .mv_pic_wrap .mv_2{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_2.jpg) no-repeat center; background-size: cover; } #container .mv_pc .mv_pic_wrap .mv_3{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_3.jpg) no-repeat center; background-size: cover; } #container .mv_pc .mv_pic_wrap .mv_4{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_4.jpg) no-repeat center; background-size: cover; } #container .mv_pc .mv_pic_wrap .mv_5{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_5.jpg) no-repeat center; background-size: cover; } #container .mv_pc .mv_pic_wrap .mv_6{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_6.jpg) no-repeat center; background-size: cover; } #container .mv_pc .mv_pic_wrap .mv_7{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_7.jpg) no-repeat center; background-size: cover; } /*---------------------------- about ----------------------------*/ #container .about .section{ margin: 120px auto 121px; } #container .about .product_wrap{ position: relative; } #container .about h2{ text-align: center; margin-bottom: 65px; } /* product_wrap */ #container .about .product_wrap p{ font-size: 16px; line-height: 50px; width: 80%; } #container .about .product_pic{ display: block; padding-right: 20px; margin: 0 auto 82px; } #container .about .product_name{ margin-bottom: 27px; } #container .about .product_wrap .btn_wrap{ margin-top: 46px; } #container .about .product_wrap .btn_wrap .btn{ width: 313px; float: left; } #container .about .product_wrap .btn_wrap .btn_dashed{ width: 284px; margin: 7px 0 0 40px; } #container .about .about_txt{ position: absolute; top: 619px; right: 1px; width: 20%; max-width: 186px; } /* profile_wrap */ #container .about .profile_wrap{ position: relative; width: 100%; height: 503px; background: url(/-/media/cojp/product/hsm/special/parie/img/about_profile_bg.png) no-repeat center; box-sizing: border-box; padding: 53px 62px 0 70px; margin: 120px auto 0; } #container .about .profile_wrap .pic_wrap{ position: relative; text-align: center; width: 231px; float: left; } #container .about .profile_wrap .pic_wrap .profile_txt{ position: absolute; top: 16px; left: 10px; } #container .about .profile_wrap .pic_wrap .name{ font-size: 32px; font-weight: bold; margin: 37px auto 20px; } #container .about .profile_wrap .pic_wrap .name span{ color: #f0857d; } #container .about .profile_wrap .txt{ width: 625px; float: right; } #container .about .profile_wrap .btn{ position: absolute; bottom: 63px; right: 64px; font-size: 14px; font-weight: normal; line-height: 56px; width: 256px; background: #f0857d; padding-right: 35px; border-bottom: 0; } #container .about .profile_wrap .btn:before{ right: 20px; width: 22px; height: 9px; background: url(/-/media/cojp/product/hsm/special/parie/img/about_profile_arrow.png) no-repeat center; } /*---------------------------- data ----------------------------*/ #container .data{ text-align: center; background: url(/-/media/cojp/product/hsm/special/parie/img/data_bg.jpg) repeat center; padding: 118px 0 120px; } #container .data h3{ position: relative; font-size: 26px; font-weight: 500; line-height: 50px; } #container .data p{ font-size: 20px; font-weight: 500; line-height: 50px; } #container .data .data_img{ text-align: center; } #container .data .data_inner{ position: relative; } /* atsumi */ #container .data .atsumi .data_try_flag{ position: absolute; top: -85px; left: 71px; } #container .data .atsumi h3{ font-size: 30px; font-weight: bold; line-height: 45px; letter-spacing: .08em; margin-bottom: 56px; } #container .data .atsumi h3 img{ position: relative; top: 3px; margin: 0 5px; } #container .data .atsumi .data_img{ margin-top: 66px; } /* craft */ #container .data .craft{ margin-top: 87px; } #container .data .craft .data_craft_fukidashi{ position: absolute; top: -43px; left: 203px; } #container .data .craft .data_craft_txt{ padding-left: 15px; } #container .data .craft .type_80{ position: absolute; top: 72px; right: 120px; width: 106px; height: 106px; background: #f0857d; border-radius: 50%; } #container .data .craft .type_80 p{ color: #ffffff; font-size: 20px; font-weight: 500; line-height: 30px; padding-top: 23px; } #container .data .craft .type_80 p span{ font-size: 34px; } #container .data .craft h3{ padding-left: 25px; margin: 50px auto 52px; } #container .data .craft h3 .data_icon_craft{ position: absolute; top: -29px; left: 380px; } /* font */ #container .data .font{ margin-top: 50px; } #container .data .font h3{ padding-left: 25px; } #container .data .font h3 .data_icon_font{ position: absolute; top: 1px; left: 428px; } #container .data .font .data_img{ margin-top: 53px; } /* btn */ #container .data .btn{ width: 368px; margin: 64px auto 0; } /*---------------------------- project ----------------------------*/ #container .project{ background: url(/-/media/cojp/product/hsm/special/parie/img/project_bg.jpg) repeat center; padding: 120px 0; } /* ttl_wrap */ #container .project .ttl_wrap{ text-align: center; } #container .project .ttl_wrap h3 img{ margin: 0 auto; } #container .project .ttl_wrap p{ font-size: 20px; font-weight: 500; line-height: 50px; margin: 49px auto 104px; } /* creator */ #container .project .creator h4{ font-size: 16px; line-height: 30px; text-align: center; margin-bottom: 71px; } #container .project .creator h4 img{ display: block; margin: 0 auto 30px; } #container .project .creator h4 span{ display: block; font-size: 12px; } #container .project .creator_wrap li{ margin-top: 114px; } #container .project .creator_wrap li:first-child{ margin-top: 0; } #container .project .creator_wrap .pic{ width: 526px; } #container .project .creator_wrap .profile{ position: relative; width: 446px; } #container .project .creator_wrap .creator_1 .pic, #container .project .creator_wrap .creator_3 .pic, #container .project .creator_wrap .creator_2 .profile, #container .project .creator_wrap .creator_4 .profile{ float: right; } #container .project .creator_wrap .creator_2 .pic, #container .project .creator_wrap .creator_4 .pic, #container .project .creator_wrap .creator_1 .profile, #container .project .creator_wrap .creator_3 .profile{ float: left; } #container .project .creator_wrap .profile .name{ font-size: 20px; font-style: italic; font-weight: 500; line-height: 50px; margin-bottom: 45px; } #container .project .creator_wrap .profile .name span{ display: inline-block; font-size: 14px; font-weight: normal; text-align: center; width: 50px; box-sizing: border-box; border: 1px solid #000203; margin-right: 25px; } #container .project .creator_wrap .profile .facephoto{ position: absolute; top: 0; right: 0; } /* download */ #container .project .download{ position: relative; text-align: center; padding-top: 96px; } #container .project .download p{ font-size: 16px; font-weight: 500; line-height: 50px; } #container .project .download .btn{ width: 424px; margin: 23px auto 0; } #container .project .download .dl_dec_1{ position: absolute; top: 76px; left: 794px; } #container .project .download .dl_dec_2{ position: absolute; top: 149px; left: 237px; } /*---------------------------- spec ----------------------------*/ #container .spec{ padding: 103px 0 80px; } #container .spec .product_wrap{ text-align: center; margin-bottom: 80px; } #container .spec .product_wrap .product_pic{ margin: 0 auto; } #container .spec .product_wrap h3{ position: relative; font-size: 20px; font-weight: 500; line-height: 50px; margin-bottom: 62px; } #container .spec .product_wrap h3 img{ position: absolute; top: -47px; left: 187px; } #container .spec .detail{ margin-bottom: 80px; } #container .spec .spec_list h4{ color: #ffffff; font-size: 16px; font-weight: 500; text-align: center; line-height: 56px; background: #f0857d; margin-bottom: 40px; } #container .spec .spec_list li{ position: relative; text-align: center; width: 50%; box-sizing: border-box; float: left; padding: 36px 0 40px; } #container .spec .spec_list li.row_1{ padding-top: 19px } #container .spec .spec_list li:nth-child(odd){ padding-right: 32px; } #container .spec .spec_list li:nth-child(even){ padding-left: 32px; } #container .spec .spec_list li p{ text-align: left; } #container .spec .spec_list li .ttl{ color: #f0857d; font-size: 16px; font-weight: 500; line-height: 24px; margin-bottom: 12px; } #container .spec .spec_list li .ttl .new{ position: relative; } #container .spec .spec_list li .ttl .new:before{ content: ""; position: absolute; top: -4px; right: -70px; width: 54px; height: 29px; background: url(/-/media/cojp/product/hsm/special/parie/img/spec_icon_new.png) no-repeat center; } #container .spec .spec_list li .pic{ margin: 17px auto 0; } #container .spec .spec_list li.pic_fukidashi .pic{ margin-top: 2px; } /*---------------------------- bnr ----------------------------*/ #container .bnr{ margin-bottom: 120px; } #container .bnr ul li{ float: left; margin-left: 46px; } #container .bnr ul li:first-child{ margin-left: 0; } #container .bnr ul li a{ display: block; margin: 0 auto; border-bottom: none; } #container .bnr .btn_dashed{ margin: 64px auto 0; } /*---------------------------- footer ----------------------------*/ #container #footer{ position: relative; background: url(/-/media/cojp/product/hsm/special/parie/img/footer_bg.jpg) repeat center; } #container #footer a{ border-bottom: none; } #container #footer #pagetop{ position: absolute; bottom: 409px; right: 50px; padding: 10px; } #container #footer .footerbox{ padding-top: 50px; } #container #footer .ttl{ font-size: 14px; line-height: 42px; margin-bottom: 12px; } #container #footer .ttl span{ font-size: 16px; font-weight: bold; margin-right: 18px; } #container #footer .support_link li{ line-height: 42px; box-sizing: border-box; padding-left: 50px; float: left; } #container #footer .support_link .col_1{ width: 254px; padding-left: 0; } #container #footer .support_link .col_2{ width: 211px; } #container #footer .support_link .col_3{ width: 242px; } #container #footer .btn{ color: #000000; font-size: 14px; line-height: 56px; width: 256px; background: #ffffff; border-bottom: none; margin: 28px 0 40px; } #container #footer .btn:before{ right: 30px; width: 22px; height: 9px; background: url(/-/media/cojp/product/hsm/special/parie/img/icon_btn_arrow_black.png) no-repeat center; } #container #footer #footer_menu{ background: url(/-/media/cojp/product/hsm/special/parie/img/footer_menu_bg.jpg) repeat center; padding: 22px 0 26px; } #container #footer #footer_menu ul li{ margin-left: 30px; float: left; } #container #footer #footer_menu ul li:first-child{ margin-left: 0; } /* copy */ #container #footer .copy{ color: #ffffff; text-align: center; line-height: 58px; width: 100%; background: #000000; } /*---------------------------- pc ----------------------------*/ @media screen and (min-width: 641px) { #container a:hover{ opacity: .8; } #container .spec .spec_list li:before{ content: ""; position: absolute; top: 0; left: 0; right: 0; width: 495px; height: 1px; box-sizing: border-box; border-bottom: 1px dashed #9a9a9a; margin: 0 auto; } #container .spec .spec_list li:nth-child(even):after{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; height: -webkit-calc(100% - 80px); height: calc(100% - 80px); box-sizing: border-box; border-left: 1px dashed #9a9a9a; margin: auto; } #container .spec .spec_list li.row_1:before{ display: none; } #container #footer a:hover{ border-bottom: 1px solid #000000; opacity: 1; } #container #footer #pagetop:hover{ border-bottom: none; opacity: .8; } #container #footer .support_link li{ border-right: 1px dashed #ffffff; } #container #footer .support_link li.col_4{ border-right: none; } #container #footer .btn:hover{ border-bottom: none; opacity: .8; } } /*---------------------------- tablet ----------------------------*/ @media screen and (min-width: 721px) and (max-width: 1092px) { #container .about .profile_wrap { padding: 3vw; } #container .about .profile_wrap .txt { width: 60%; } #container .about .profile_wrap .txt p { line-height: 35px; } #container .about .profile_wrap .btn { bottom: 28px; } #container .data .atsumi .data_try_flag { top: -85px; left: 25px; width: 140px; } #container .data .atsumi .data_img img{ width: 100%; } #container .data .craft .data_craft_fukidashi { left: 30px; } #container .data .craft .type_80 { position: static; float: right; margin: 50px auto 52px; } #container .data .craft h3 .data_icon_craft { position: static; } #container .data .craft h3 { margin: 50px auto 52px; line-height: 108px; } #container .data .data_img img{ width: 100%; } #container .data .font h3 .data_icon_font { position: static; } #container .project .creator_wrap img.pic{ width: 45%; } #container .project .creator_wrap .profile { width: 50%; } #container .project .creator_wrap .profile .facephoto { right: -10px; width: 100px; } #container .project .download .dl_dec_1 { left: inherit; right: 8vw; } #container .project .download .dl_dec_2 { left: 10vw; } #container .spec .product_wrap h3 img { left: 30px; } #container .spec .spec_list li { min-height: 450px; } #container .spec .spec_list li:before { width: auto; } #container .spec .spec_list li .pic { width: 100%; } #container .bnr ul li{ width: 30%; } #container .bnr ul li img{ width: 100%; } } /*---------------------------- sp ----------------------------*/ @media screen and (max-width: 720px) { #container{ font-size: 10px; line-height: 25px; } #container, body, html{ min-width: 100%; } #container .section{ width: 100%; box-sizing: border-box; padding: 0 17px; } #container .btn{ font-size: 10px; line-height: 40px; width: 195px; padding-right: 15px; } #container .btn:before{ right: 20px; width: 17px; height: 7px; background: url(/-/media/cojp/product/hsm/special/parie/img/icon_btn_arrow.png) no-repeat center; background-size: 17px 7px; } #container .btn_dashed{ font-size: 9px; line-height: 36px; } #container .btn_dashed:before{ background: url(/-/media/cojp/product/hsm/special/parie/img/icon_btn_arrow_black.png) no-repeat center; background-size: 15px 6px; } /*---------------------------- mv ----------------------------*/ #container .mv_sp{ min-height: 423px; width: 100%; } #container .mv_sp .menu{ text-align: center; width: 100%; height: 42px; box-sizing: border-box; padding-top: 10px; } #container .mv_sp h1{ width: 100%; text-align: center; padding: 23px 0 20px; } #container .mv_sp p{ width: 100%; text-align: center; padding: 23px 0 20px; } #container .mv_sp .menu li{ display: inline-block; margin-left: 5px; } #container .mv_sp .menu li:first-child{ margin-left: 0; } #container .mv_sp .mv_pic_wrap{ position: relative; height: -webkit-calc(100% - 163px); height: calc(100% - 163px); } #container .mv_sp .mv_pic_wrap .mv_1{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_1_sp.jpg) no-repeat center; background-size: cover; } #container .mv_sp .mv_pic_wrap .mv_2{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_2_sp.jpg) no-repeat center; background-size: cover; } #container .mv_sp .mv_pic_wrap .mv_3{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_3_sp.jpg) no-repeat center; background-size: cover; } #container .mv_sp .mv_pic_wrap .mv_4{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_4_sp.jpg) no-repeat center; background-size: cover; } #container .mv_sp .mv_pic_wrap .mv_5{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_5_sp.jpg) no-repeat center; background-size: cover; } #container .mv_sp .mv_pic_wrap .mv_6{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_6_sp.jpg) no-repeat center; background-size: cover; } #container .mv_sp .mv_pic_wrap .mv_7{ background: url(/-/media/cojp/product/hsm/special/parie/img/mv_7_sp.jpg) no-repeat center 0px; background-size: cover; } /* pagination_sp */ #container .mv_sp .pagination_sp span{ height: 25px; width: 24px; border-radius: 0; margin-left: 5px; -webkit-transform: scale(.6, .6); transform: scale(.6, .6); opacity: .5; } #container .mv_sp .pagination_sp span:first-child{ margin-left: 0; } #container .mv_sp .pagination_sp span.swiper-pagination-bullet-active{ -webkit-animation: pagination .4s both ease; animation: pagination .4s both ease; } #container .mv_sp .pagination_sp span:nth-child(1){ background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_1_sp.jpg) no-repeat center; background-size: 24px 25px; } #container .mv_sp .pagination_sp span:nth-child(2){ background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_2_sp.jpg) no-repeat center; background-size: 24px 25px; } #container .mv_sp .pagination_sp span:nth-child(3){ background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_3_sp.jpg) no-repeat center; background-size: 24px 25px; } #container .mv_sp .pagination_sp span:nth-child(4){ background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_4_sp.jpg) no-repeat center; background-size: 24px 25px; } #container .mv_sp .pagination_sp span:nth-child(5){ background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_5_sp.jpg) no-repeat center; background-size: 24px 25px; } #container .mv_sp .pagination_sp span:nth-child(6){ background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_6_sp.jpg) no-repeat center; background-size: 24px 25px; } #container .mv_sp .pagination_sp span:nth-child(7){ background: url(/-/media/cojp/product/hsm/special/parie/img/menu_icon_7_sp.jpg) no-repeat center; background-size: 24px 25px; } /*---------------------------- about ----------------------------*/ #container .about .section{ margin: 26px auto 40px; } #container .about h2{ margin-bottom: 9%; } #container .about h2 img{ width: 230px; } /* product_wrap */ #container .about .product_wrap p{ font-size: 10px; line-height: 25px; } #container .about .product_pic{ width: 87.94%; padding-right: 0; margin-bottom: 12.4%; } #container .about .product_name{ margin-bottom: 16px; } #container .about .product_name img{ width: 84px; } #container .about .product_wrap .btn_wrap{ margin-top: 32px; } #container .about .product_wrap .btn_wrap .btn{ width: 195px; margin: 0 auto; float: none; } #container .about .product_wrap .btn_wrap .btn.btn_dashed{ width: 184px; margin: 19px auto 0; float: none; } #container .about .about_txt{ top: auto; bottom: 152px; right: -1px; } /* profile_wrap */ #container .about .profile_wrap{ height: auto; background: url(/-/media/cojp/product/hsm/special/parie/img/about_profile_bg_sp.png) no-repeat center top; background-size: 100% 100%; padding: 34px 18px 81px; margin: 40px auto 0; } #container .about .profile_wrap .pic_wrap{ text-align: left; width: 100%; margin-bottom: 17px; float: none; } #container .about .profile_wrap .pic_wrap .profile_txt{ top: auto; bottom: 26px; left: auto; right: 55px; width: 38px; } #container .about .profile_wrap .pic_wrap .name{ font-size: 20px; margin: 0 auto 6px; position: absolute; bottom: 0; right: 0; } #container .about .profile_wrap .profile_pic{ width: 56%; } #container .about .profile_wrap .txt{ font-size: 9px; line-height: 24px; width: 100%; float: none; } #container .about .profile_wrap .btn{ bottom: 28px; left: 0; right: 0; font-size: 9px; line-height: 36px; width: 165px; padding-right: 15px; margin: 0 auto; } #container .about .profile_wrap .btn:before{ right: 11px; width: 15px; height: 6px; background-size: 15px 6px; } /*---------------------------- data ----------------------------*/ #container .data{ background-size: 40px 40px; padding: 37px 0; } #container .data h3{ font-size: 14px; line-height: 26px; } #container .data p{ font-size: 11px; line-height: 26px; } #container .data .data_img{ position: relative; } #container .data .data_img img{ width: 100%; } #container .data .data_img .popup_btn_open{ position: absolute; bottom: -20px; right: -5px; width: 18px; padding: 10px; border-bottom: none; } /* atsumi */ #container .data .atsumi .data_try_flag{ position: absolute; top: -42px; left: 50%; width: 105px; margin-left: -137px; } #container .data .atsumi h3{ font-size: 18px; line-height: 35px; letter-spacing: .08em; margin-bottom: 16px; } #container .data .atsumi h3 img{ top: 2px; margin: 0 2px; width: 72px; } #container .data .atsumi .data_img{ margin-top: 25px; } /* craft */ #container .data .craft{ margin-top: 47px; } #container .data .craft .data_craft_fukidashi{ top: -35px; left: 50%; width: 67px; margin-left: -144px; } #container .data .craft .data_craft_txt{ padding-left: 5px; } #container .data .craft .type_80{ top: 30px; right: 0px; width: 53px; height: 53px; } #container .data .craft .type_80 p{ font-size: 10px; line-height: 15px; padding-top: 10px; } #container .data .craft .type_80 p span{ font-size: 17px; } #container .data .craft h3{ padding-left: 0; margin: 24px auto 16px; } #container .data .craft h3 .data_icon_craft{ top: -17px; left: 50%; width: 39px; margin-left: -80px; } /* font */ #container .data .font{ margin-top: 24px; } #container .data .font h3{ padding-left: 0; } #container .data .font h3 .data_icon_font{ top: 0; left: 50%; width: 26px; margin-left: -55px; } #container .data .font .data_img{ margin-top: 15px; } /* popup */ #container .data .data_img .popup_bg, #container .data .data_img .popup_img, #container .data .data_img .popup_btn_close{ display: none; } #container .data .data_img.select .popup_bg, #container .data .data_img.select .popup_img, #container .data .data_img.select .popup_btn_close{ display: block; position: fixed; top: 0; } #container .data .data_img.select .popup_bg{ left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 10; } #container .data .data_img.select .popup_img{ bottom: 0; left: 0; width: 100%; margin: auto; z-index: 15; } #container .data .data_img.select .popup_btn_close{ right: 0; width: 50px; border-bottom: none; z-index: 20; } /* btn */ #container .data .btn{ width: 228px; margin: 25px auto 0; } /*---------------------------- project ----------------------------*/ #container .project{ background-size: 40px 40px; padding: 43px 0 40px; } /* ttl_wrap */ #container .project .ttl_wrap p{ font-size: 11px; line-height: 26px; margin: 23px auto 32px; } /* creator */ #container .project .creator h4{ font-size: 11px; line-height: 26px; margin-bottom: 25px; } #container .project .creator h4 span{ font-size: 9px; } #container .project .creator h4 img{ width: 195px; margin-bottom: 12px } #container .project .creator_wrap li{ margin-top: 45px; } #container .project .creator_wrap .pic, #container .project .creator_wrap .profile{ width: 100%; } #container .project .creator_wrap .pic img{ width: 100%; } #container .project .creator_wrap .creator_1 .pic, #container .project .creator_wrap .creator_2 .pic, #container .project .creator_wrap .creator_3 .pic, #container .project .creator_wrap .creator_4 .pic, #container .project .creator_wrap .creator_1 .profile, #container .project .creator_wrap .creator_2 .profile, #container .project .creator_wrap .creator_3 .profile, #container .project .creator_wrap .creator_4 .profile{ float: none; } #container .project .creator_wrap .profile{ margin-top: 24px; } #container .project .creator_wrap .profile .name{ font-size: 12px; line-height: 32px; margin-bottom: 20px; } #container .project .creator_wrap .creator_2 .profile .name, #container .project .creator_wrap .creator_4 .profile .name{ text-align: right; } #container .project .creator_wrap .profile .name span{ font-size: 9px; width: 32px; margin-right: 15px; } #container .project .creator_wrap .profile .facephoto{ position: static; width: 27.975%; } #container .project .creator_wrap .creator_1 .profile .facephoto, #container .project .creator_wrap .creator_3 .profile .facephoto{ margin: -54px 0 5px 10px; float: right; } #container .project .creator_wrap .creator_2 .profile .facephoto, #container .project .creator_wrap .creator_4 .profile .facephoto{ margin: -54px 10px 5px 0; float: left; } /* download */ #container .project .download{ padding-top: 37px; } #container .project .download p{ font-size: 10px; line-height: 25px; } #container .project .download .btn{ width: 256px; margin: 13px auto 0; } #container .project .download .dl_dec_1{ top: 35px; left: 50%; width: 25px; margin-left: 89px; } #container .project .download .dl_dec_2{ top: 30px; left: 50%; width: 22px; margin-left: -102px; } /*---------------------------- spec ----------------------------*/ #container .spec{ padding: 75px 0 28px; } #container .spec .product_wrap{ margin-bottom: 11%; } #container .spec .product_wrap h3{ font-size: 11px; line-height: 26px; margin-bottom: 5%; } #container .spec .product_wrap h3 img{ top: -44px; left: 50%; width: 68px; margin-left: -144px; } #container .spec .product_wrap .product_pic{ } #container .spec .detail{ margin-bottom: 27px; } #container .spec .spec_list h4{ font-size: 10px; line-height: 30px; margin-bottom: 0; } #container .spec .spec_list li{ width: 100%; float: none; padding: 25px 0; border-top: 1px dashed #9a9a9a; } #container .spec .spec_list li:first-child{ border-top: none; } #container .spec .spec_list li.row_1{ padding-top: 25px; } #container .spec .spec_list li:nth-child(odd){ padding-right: 0; } #container .spec .spec_list li:nth-child(even){ padding-left: 0; } #container .spec .spec_list li .ttl{ font-size: 11px; line-height: 26px; margin-bottom: 3px; } #container .spec .spec_list li .ttl .new:before{ top: 0px; right: -40px; width: 34px; height: 18px; background: url(/-/media/cojp/product/hsm/special/parie/img/spec_icon_new.png) no-repeat center; background-size: 34px 18px; } #container .spec .spec_list li .pic{ width: 88.115%; margin: 12px auto 0; } #container .spec .spec_list li.pic_fukidashi .pic{ margin-top: 20px; } /*---------------------------- bnr ----------------------------*/ #container .bnr{ margin-bottom: 73px; } #container .bnr ul li{ float: none; margin-left: 0; margin-top: 15px; } #container .bnr ul li:first-child{ margin-top: 0; } #container .bnr ul li a{ margin: 0 auto; } #container .bnr .btn_dashed{ margin-top: 32px; } /*---------------------------- footer ----------------------------*/ #container #footer{ background-size: 40px 40px; } #container #footer #pagetop{ bottom: 100%; right: 10px; margin-bottom: -32px; } #container #footer #pagetop img{ width: 23px; } #container #footer .footerbox{ padding-top: 33px; } #container #footer .ttl{ font-size: 9px; line-height: 25px; margin-bottom: 10px; } #container #footer .ttl span{ font-size: 11px; margin-right: 0; } #container #footer .support_link{ border-top: 1px dashed #ffffff; } #container #footer .support_link li{ font-size: 9px; line-height: 30px; width: 100%; padding: 5px 0; border-bottom: 1px dashed #ffffff; float: none; } #container #footer .support_link li a{ display: block; line-height: 30px; } #container #footer .btn{ font-size: 9px; line-height: 36px; width: 177px; margin: 20px 0 30px; } #container #footer .btn:before{ right: 20px; width: 15px; height: 6px; background-size: 15px 6px; } #container #footer #footer_menu{ padding: 40px 0 32px; background-size: 40px 40px; } #container #footer #footer_menu ul li{ margin-left: 0; margin-right: 16px; float: left; } #container #footer #footer_menu ul li:first-child{ margin-left: 0; } #container #footer #footer_menu ul li:last-child{ margin-right: 0; } /* copy */ #container #footer .copy{ font-size: 8px; line-height: 40px; width: 100%; } }