/* common */ html, body, main { width: 100%; height: 100%; } .st-backToTopFixed { z-index: 2; } main, main textarea, main input { font-size: 14px; } .pc_only { display: block; } .pc_only.inline { display: inline; } .sp_only, .sp_only.inline { display: none; } .sc_tab .list_tab_status [data-radio] .check_box:checked + .name_check:before, .sc_tab .list_tab_status [data-radio] .check_box + .name_check:before { content: "\f10c"; } .sc_tab .list_tab_status .has_i.active[data-radio] .check_box:checked + .name_check:before, .sc_tab .list_tab_status .has_i.active[data-radio] .check_box + .name_check:before { content: "\f192"; } a:focus { opacity: 1; } .js_swiper img { user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select: none; /* Safari、Chromeなど */ -ms-user-select: none; /* IE10 */ } @media screen and (max-width: 1052px) { .sp_only { display: block; } .sp_only.inline { display: inline; } .pc_only, .pc_only.inline { display: none; } /* スマホ表示でのホバーを打ち消す */ a:hover, a:focus { opacity: 1!important; } .st-wrapper { min-height: 100%; overflow: hidden; } } @media screen and (max-width: 640px) { main, main textarea, main input { font-size: 12px; } } /* g_nav */ .g_nav { background: #282a2f; min-width: 1052px; width: 100%; position: relative; z-index: 10; } .g_nav .inner { /*width: 1052px;*/ margin: 0px auto; } .g_nav .inner ul { width: 80%; /*width: 100%;*/ display: table; } .g_nav .inner ul li { display: table-cell; vertical-align: middle; } .g_nav .inner ul li.border { width: 1px; vertical-align: middle; } .g_nav .inner ul li.border:before { content: ""; display: block; border-right: 1px solid #ffffff; width: 0px; height:16px; } .g_nav .inner ul li.sub_list { padding-left:15px; background: rgba(42,40,47,1); border-bottom: 1px solid rgb(255, 255, 255); } .g_nav .inner ul.class_1 li.sub_list a { border-bottom: none; } .g_nav .inner ul li a { display: table; color: #ffffff; text-align: center; width: 100%; height: 40px; font-size: 14px; line-height: 18px; padding: 20px 15px; box-sizing: border-box; } .g_nav .inner ul li a .box { display: table-cell; text-align: center; vertical-align: middle; height: 40px; } .g_nav .inner ul li a .box .inbox { display: inline-block; position: relative; white-space: nowrap; } .g_nav .inner ul li a[target="_blank"] .box .inbox { padding-right: 1.2em; position: relative; } .g_nav .inner ul li a[target="_blank"] .box .inbox:after { content: "\f08e"; font-family: FontAwesome; position: absolute; top: 50%; right: 0; display: block; margin-top: -8%; } .g_nav .inner ul li.current a .box .inbox:before { content: ""; display: block; position: absolute; width: 100%; bottom: 0; left: 0; border-top: 1px solid #ffffff; } .g_nav .inner ul li:not(.current) a .box .inbox:before { content: ""; display: block; position: absolute; width: 0%; bottom: 0; left: 0%; border-top: 1px solid #ffffff; -webkit-transition: all 0.4s; transition: all 0.4s; } .g_nav .inner ul li:not(.current) a:hover .box .inbox:before { width: 100%; } .inline { display: inline; font-weight: inherit; } .block { display: block; font-weight: inherit; } @media screen and (max-width: 1052px) { body.g_nav_open { overflow: hidden; } .g_nav { min-width: 320px; width: 100%; } .g_nav .inner { min-width: 320px; max-width: 100%; position: relative; } .g_nav .inner ul { width: 100%; display: table; } .g_nav .inner > a { display: block; color: #ffffff; font-size: 12px; line-height: 40px; font-weight: bold; box-sizing: border-box; padding: 0 15px; position: relative; z-index: 1; /*background: #282a2f;*/ } /*.g_nav .inner > a:before { content: ""; display: block; position: absolute; top: 20px; right: 15px; width: 20px; height: 1px; background: #ffffff; } .g_nav .inner > a:after { content: ""; display: block; position: absolute; top: 10px; right: 25px; height: 20px; width: 1px; background: #ffffff; }*/ .g_nav .inner ul { display: block; } .g_nav .inner ul.class_1, .g_nav .inner ul.class_2 { display: none; } .g_nav .inner ul li { display: block; } .g_nav .inner > ul > li > a { background: rgba(42,40,47,1); } .g_nav .inner > ul > li > ul { background: transparent; } .g_nav .inner ul li a { display: block; text-align: left; height: auto; padding: 0; width: 100%; color: #ffffff; } .g_nav .inner ul li a .box .inbox { white-space: normal; } .g_nav .class_0_btn img { vertical-align: sub; } /* class_1 */ .g_nav .inner_spmenu.class_1_open > a span:before, .g_nav .inner_spmenu.class_1_open > a span:after { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .g_nav .inner ul.class_1 { border-top: 1px solid #ffffff; position: absolute; top: 40px; left: 0px; /*height: calc(100vh - 85px);*/ background: rgba(42,40,47,0.9); overflow: auto; box-sizing: border-box; -webkit-overflow-scrolling:touch; } .g_nav .inner ul.class_1 li a { border-bottom: 1px solid #ffffff; display: block; color: #ffffff; font-size: 12px; line-height: 40px; font-weight: bold; box-sizing: border-box; padding: 0 25px; position: relative; } .g_nav .inner ul.class_1 li.nav_nolink { border-bottom: 1px solid #ffffff; display: block; color: #ffffff; font-size: 12px; line-height: 40px; font-weight: bold; box-sizing: border-box; padding: 0 25px; position: relative; background: rgba(42,40,47,1); } .g_nav .inner ul.class_1 li a:before { content: "\f105"; font-family: FontAwesome; display: block; position: absolute; top: 0px; right: 20px; } .g_nav .inner ul.class_1 li a.class_1_btn:before { transform: rotate(90deg); -webkit-transform: rotate(90deg); } .g_nav .inner ul.class_1 li a[target="_blank"]:before { content: "\f08e"; font-family: FontAwesome; transform: rotate(0deg); -webkit-transform: rotate(0deg); top: 0; right: 15px; } /* class_2 */ .g_nav .inner ul.class_1 li.class_2_open a.class_1_btn:before { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } .g_nav .inner ul.class_2 li a { padding: 0 40px; position: relative; } } /* bsitemap */ .bsitemap { background: #00276d; } .bsitemap_inner { color: #ffffff; max-width: 1052px; margin: auto; padding: 60px 10px; } .bsitemap a { color: #ffffff; } .bsitemap_parent { vertical-align: top; display: inline-block; margin-right: 55px; margin-top: 30px; } .bsitemap_parent:last-child { margin-right: 0; } .bsitemap_ttl { font-size: 18px; font-weight: bold; } .bsitemap_parent_ttl { font-size: 14px; font-weight: bold; margin-bottom: 30px; } .bsitemap_child { font-size: 12px; } .bsitemap_child li { padding-left: 1em; line-height: 1.83; position: relative; } .bsitemap_child li:before { content: '-'; display: block; position: absolute; top: 0; left: 0; } .bsitemap a[target="_blank"]:after { content: "\f08e"; font-family: FontAwesome; margin-left: 4px; } /* PC表示の場合は、子要素を常に表示させるための指定 */ @media screen and (min-width: 1053px) { .bsitemap_child { display: block!important; } } @media screen and (max-width: 1052px) { .bsitemap_inner { padding: 0; } .bsitemap a { display: block; } .bsitemap_parent { display: block; margin-right: 0; margin-top: 0; } .bsitemap_ttl { font-size: 14px; } .bsitemap_ttl a { padding: 14px 15px; position: relative; } .bsitemap_ttl a::after { content: "\f105"; position: absolute; top: 0; bottom: 0; margin: auto; right: 15px; height: 16px; font-family: FontAwesome; transform: rotate(0deg); -webkit-transform: rotate(0deg); } .bsitemap_parent_ttl { font-size: 12px; margin-bottom: 0; border-bottom: 1px solid #ffffff; } .bsitemap_parent:first-child { border-top: 1px solid #ffffff; } .bsitemap_parent_ttl a { padding: 14px 15px; position: relative; } .bsitemap_parent_ttl a:after { content: "\f105"; position: absolute; top: 0; bottom: 0; margin: auto; right: 15px; height: 16px; font-family: FontAwesome; transform: rotate(90deg); -webkit-transform: rotate(90deg); } .bsitemap_parent.is_open .bsitemap_parent_ttl a:after { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); right: 13px; } .bsitemap a[target="_blank"]:after { content: "\f105"; margin-left: 0; } .bsitemap_child a[target="_blank"]:after { content: "\f08e"; margin-left: 4px; } .bsitemap_parent_ttl.bsitemap_parent_link a:after { transform: rotate(0deg); -webkit-transform: rotate(0deg); } .bsitemap_child { padding: 10px 0; border-bottom: 1px solid #ffffff; display: none; } .bsitemap_child li { padding-left: 0; } .bsitemap_child li a { padding: 5px 15px 5px 25px; } .bsitemap_child li:before { top: 5px; left: 15px; } .bsitemap_child li.sp_only a { padding-left: 15px; } .bsitemap_child li.sp_only:before { content: ''; } } /* left_nav */ .wrap { position: relative; } .left_nav { position: absolute; width: 212px; height: 100%; left: 0; top: 0; background: #ffffff; z-index: 1; -webkit-box-shadow: 0px 2px 51px 0px rgba(40, 42, 47, 0.2); -moz-box-shadow: 0px 2px 51px 0px rgba(40, 42, 47, 0.2); box-shadow: 0px 2px 51px 0px rgba(40, 42, 47, 0.2); } .left_nav .float_area { overflow: hidden; background: #ffffff; } .left_nav .left_nav_ttl { position: relative; width: 212px; height: 150px; text-align: center; } .left_nav .left_nav_ttl img { margin-top: 30px; } .left_nav .left_nav_ttl p { margin-top: 15px; font-size: 16px; font-weight: bold; line-height: 150%; } .left_nav ul li { border-bottom: 1px solid #ffffff; } .left_nav ul li a { display: block; background: #ffffff; padding: 12px 30px; color: #282a2f; font-weight: bold; } .left_nav ul li a.current, .left_nav ul li a.top { background: #8daed6; color: #ffffff; } .hover_on .left_nav ul li a:hover { background: #8daed6; color: #ffffff; opacity: 1; } .left_nav .left_nav_btn_wrapper { text-align: center; margin-top: 15px; margin-bottom: 30px; } .left_nav .left_nav_btn_wrapper a { display: inline-block; width: 152px; height: 34px; line-height: 34px; font-weight: bold; background: #da5e13; color: #ffffff; border-radius: 3px; } .hover_on .left_nav .left_nav_btn_wrapper a:hover { color: #da5e13; background: #edeff1; opacity: 1; } .main_content { position: relative; } /* leftnavない場合 */ .content_inner { max-width: 1052px; } .main_content { padding-left: 0; } /* leftnavある場合 */ .left_nav + .main_content .content_inner { width: 830px; } .left_nav + .main_content { padding-left: 212px; } @media screen and (max-width: 1052px) { .left_nav { display: none; } .main_content { padding-left: 0; } /* leftnavない場合 */ body .content_inner { width: auto; } /* leftnavある場合 */ .left_nav + .main_content .content_inner { width: auto; } .left_nav + .main_content { padding-left: 0; } } /* ボタン */ .btn { -webkit-appearance: none; appearance: none; display: inline-block; box-sizing: border-box; margin: 0; padding: 13px 30px; text-align: center; text-decoration: none; color: inherit; cursor: pointer; border-radius: 3px; line-height: 1.5; } .btn .btn_icon { margin-right: 9px; } .btn_basic { color: #27292f; background: #ffffff; } .btn_basic .btn_icon { color: #51595f; } .btn_basic_gray { color: #27292f; background: #edeff1; } .btn_basic_gray .btn_icon { color: #51595f; } .btn_point { color: #ffffff; background: #0b2669; } .btn_point .btn_icon { color: #ffffff; } .btn_large { padding: 12px 60px; line-height: 1.83; } .btn_unique { color: #ffffff; background: #8dadd5; } .btn_unique .btn_icon { color: #ffffff; } .btn_contact { color: #ffffff; background: #da5d12; } .btn_contact .btn_icon { color: #ffffff; } /* テキストリンク */ .btn_txt { position: relative; padding: 0; padding-left: 3px; } .btn_txt .btn_icon { display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -.25em; margin-right: 11px; margin-left: 0; } .btn_txt_1 {color: #27292f;} .btn_txt_2 {color: #0b2669;} .btn_txt_3 {color: #ffffff;} .btn_txt_1 .btn_icon { border-top: 2px solid #51595f; border-right: 2px solid #51595f; } .btn_txt_2 .btn_icon { border-top: 2px solid #0b2669; border-right: 2px solid #0b2669; } .btn_txt_3 .btn_icon { border-top: 2px solid #fff; border-right: 2px solid #fff; } @media screen and (max-width: 640px) { .btn { padding: 13px 15px; } .btn .btn_icon { margin-right: 4px; } .btn.btn_txt { padding: 0; padding-left: 3px; } } /* 画像付きボタン */ .btnimg_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-left: -10px; margin-bottom: -10px; } .btnimg_listitem { position: relative; background: #ffffff; width: calc((100% - 10px * 3) / 3); margin-left: 10px; margin-bottom: 10px; box-sizing: border-box; text-align: center; } .btnimg_listitem > a { opacity: 1; display: block; padding-bottom: 50px; } .btnimg_list_img { margin-bottom: 16px; } .btnimg_listitem > a > .btn_icon { position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; color: #51595f; font-size: 16px; } .hover_on .btnimg_listitem:hover > a > .btn_icon { color: #fff; } @media screen and (max-width: 1052px) { .btnimg_listitem { width: calc((100% - 10px * 2) / 2); margin-left: 10px; } } @media screen and (max-width: 640px) { .btnimg_list { margin-left: -5px; margin-bottom: -5px; } .btnimg_listitem { width: calc((100% - 5px * 2) / 2); margin-left: 5px; margin-bottom: 5px; } .btnimg_listitem > a { padding-bottom: 20px; } .btnimg_list_img { margin-bottom: 8px; } .btnimg_listitem > a > .btn_icon { font-size: 12px; bottom: 10px; } .hover_on .btnimg_listitem:hover > a > .btn_icon { color: #51595f; } } /* btnimg_list_function */ .btnimg_list_function .btnimg_listitem { width: calc((100% - 10px * 3) / 3); } .btnimg_list_function .btnimg_listitem > a { padding-top: 20px; padding-left: 20px; padding-right: 20px; } .btnimg_list_function .btnimg_list_ttl { margin-bottom: 9px; } .hover_on .btnimg_list_function .btnimg_listitem:hover { background: #8daed6; } .hover_on .btnimg_list_function .btnimg_listitem:hover > a { color: #fff; } @media screen and (max-width: 640px) { .btnimg_list_function .btnimg_listitem { width: calc((100% - 5px * 2) / 2); } .btnimg_list_function .btnimg_listitem > a { padding-top: 14px; padding-left: 14px; padding-right: 14px; padding-bottom: 30px; } .btnimg_list_function .btnimg_list_ttl { margin-bottom: 4px; } .hover_on .btnimg_list_function .btnimg_listitem:hover { background: #fff; } .hover_on .btnimg_list_function .btnimg_listitem:hover > a { color: #333333; } } /* btnimg_list_hover */ .btnimg_list_hover .btnimg_listitem { width: calc((100% - 10px * 4) / 4); } .btnimg_list_hover_mask { position: absolute; top: 0; left: 0; background: rgba(81,89,95,0.8); width: 100%; height: 100%; transition:opacity .3s; -webkit-transition:opacity .3s; opacity: 0; } .btnimg_list_hover .btnimg_list_ttl { padding: 0 20px; } .btnimg_list_hover_txt { height: 100%; box-sizing: border-box; padding: 20px; } .btnimg_list_hover_txt > p { text-align: left; box-sizing: border-box; height: 160px; height: calc(100% - 50px); overflow-y: auto; color: #fff; line-height: 1.71; } .btnimg_list_hover .btn{ padding: 5px 0; width: 80%; width: calc(100% - 40px); position: absolute; bottom: 20px; left: 20px; } .hover_on .btnimg_list_hover .btnimg_listitem:hover .btnimg_list_hover_mask { opacity: 1; } @media screen and (max-width: 640px) { .btnimg_list_hover .btnimg_list { margin-left: -3px; margin-bottom: -3px; } .btnimg_list_hover .btnimg_listitem { margin-left: 3px; margin-bottom: 3px; width: calc((100% - 3px * 3) / 3); cursor: pointer; } .btnimg_list_hover .btnimg_list_ttl { margin-bottom: 4px; padding: 0 5px; } .btnimg_list_hover_txt { padding: 7px; } .btnimg_list_hover_txt > p { height: 110px; height: calc(100% - 30px); font-size: 9px; line-height: 1.33; } .btnimg_list_hover .btn{ padding: 1px 0; width: calc(100% - 15px); bottom: 7px; left: 7px; } .btnimg_list_hover .btn_basic .btn_icon { margin-right: 3px; } .hover_on .btnimg_list_hover .btnimg_listitem:hover .btnimg_list_hover_mask { opacity: 0; } .hover_on .btnimg_list_hover .btnimg_listitem.active:hover .btnimg_list_hover_mask { opacity: 1; } } /* btnimg_indexlist */ .btnimg_indexlist { font-size: 0; margin-bottom: 29px; } .btnimg_indexlist > li { font-size: 14px; margin-left: 20px; display: inline-block; vertical-align: top; text-align: center; } .btnimg_indexlist > li > a{ background: #ffffff; display: block; } .hover_on .btnimg_indexlist > li > a:hover{ background: #8daed6; opacity: 1; color: #ffffff; } .hover_on .btnimg_indexlist > li > a:focus{ opacity: 1; } .btnimg_indexlist > li.is_active > a { background: #8daed6; color: #ffffff; } .btnimg_indexlist > li:first-child { margin-left: 0; } .btnimg_indexlist_img { padding: 12px; } .btnimg_indexlist_txt { padding: 0 12px 12px; font-weight: 600; display: table; width: 100%; box-sizing: border-box; } .btnimg_indexlist_txt > span { display: table-cell; vertical-align: middle; height: 42px; } .btnimg_indexlist_txt i { font-size: 16px; margin-right: 4px; } @media screen and (max-width: 640px) { .btnimg_indexlist { margin-bottom: 13px; margin-left: -5px; } .btnimg_indexlist > li { font-size: 12px; margin-left: 5px; margin-bottom: 5px; width: 49%; width: calc(50% - 5px); } .hover_on .btnimg_indexlist > li > a:hover{ background: #ffffff; color: #8daed6; } .hover_on .btnimg_indexlist > li.is_active > a:hover{ background: #8daed6; color: #ffffff; } .btnimg_indexlist > li:first-child { margin-left: 5px; } .btnimg_indexlist_img { display: none; } .btnimg_indexlist_txt { padding: 0; } .btnimg_indexlist_txt > span { height: 40px; } .btnimg_indexlist_txt i { font-size: 12px; margin-right: 2px; } } @media screen and (max-width: 640px) { .chach_2.gyosyu_ttl { font-size: 15px; margin-bottom: 10px; } .ttl.gyosyu_txt { font-size: 12px; line-height: 1.75; margin-bottom: 15px; } } /* animation .js_fadeup { opacity: 0; } .js_fadeup.animated_waypoint { -webkit-animation: fadeup 0.8s forwards; animation: fadeup 0.8s forwards; } .js_fadeup.js_fadeup_2.animated_waypoint { -webkit-animation-delay: .15s; animation-delay: .15s; } .js_fadeup.js_fadeup_3.animated_waypoint { -webkit-animation-delay: .3s; animation-delay: .3s; } .js_fadeup.js_fadeup_4.animated_waypoint { -webkit-animation-delay: .45s; animation-delay: .45s; } .js_fadeup.js_fadeup_5.animated_waypoint { -webkit-animation-delay: .6s; animation-delay: .6s; } .js_fadeup.js_fadeup_6.animated_waypoint { -webkit-animation-delay: .75s; animation-delay: .75s; } .js_fadeup.js_fadeup_7.animated_waypoint { -webkit-animation-delay: .9s; animation-delay: .9s; } .js_fadeup.js_fadeup_8.animated_waypoint { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; } @keyframes fadeup { from{ transform: translateY(30px); opacity:0; } 100%{ transform: translateY(0); opacity:1; } } @-webkit-keyframes fadeup { from{ -webkit-transform: translateY(30px); transform:translateY(30px); opacity:0; } 100%{ -webkit-transform: translateY(0); transform: translateY(0); opacity:1; } } @media screen and (max-width: 640px) { @keyframes fadeup { from{ transform: translateY(15px); opacity:0; } 100%{ transform: translateY(0); opacity:1; } } @-webkit-keyframes fadeup { from{ -webkit-transform: translateY(15px); transform:translateY(30px); opacity:0; } 100%{ -webkit-transform: translateY(0); transform: translateY(0); opacity:1; } } } */ /* プリントボタン */ .print_btn_wrap { position: fixed; top: 195px; right: 0; width: 60px; height: 60px; overflow: hidden; /*z-index: 15;*/ z-index: 3; -webkit-transition: width 0.4s; transition: width 0.4s; } .print_btn_wrap:hover { width: 120px; } .print_btn_wrap a:hover { opacity: 1; } .print_btn_wrap img { position: absolute; top: 0px; left: 0; } @media screen and (max-width: 1052px) { .print_btn_wrap { display: none; } } @media print { .print_btn_wrap { display: none; } * { -webkit-print-color-adjust: exact; } } /* 2018.01.18追記 */ body .basic_h2_wrap { position: relative; text-align: center; } body .basic_h2_wrap:before { content: ''; position: absolute; display: block; /*z-index: 1;*/ top: 50%; width: 100%; height: 2px; background-color: #0b2669; -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } body .basic_h2_wrap .basic_h2 { z-index: 1; font-size: 20px; line-height: 1.5; color: #fff; background-color: #0b2669; padding: 10px 30px; display: inline-block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; text-align: center; } body .basic_h3 { line-height: 1.6; font-size: 40px; text-align: center; font-weight: 500; } body .lineup_h3 { background: #8daed6; color: #ffffff; font-size: 20px; padding: 17px 27px; margin-bottom: 30px; } body .detail_h1 { font-weight: 500; font-size: 30px; margin-top: -4px; } body .detail_h2 { color: #282a2f; font-size: 40px; font-weight: 500; line-height: 1.5; text-align: center; margin-bottom: 50px; margin-top: -10px; } body .colum_h1 { font-size: 40px; line-height: 1.5; font-weight: 500; display: block; } body .colum_h3 { color: #8daed6; font-size: 30px; margin-bottom: 50px; line-height: 1.6; font-weight: 700; } @media screen and (max-width: 640px) { body .basic_h2_wrap .basic_h2 { font-size: 12px; padding: 5px 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } body .basic_h3 { font-size: 17px; line-height: 1.6; text-align: center; font-weight: 500; } body .lineup_h3 { font-size: 12px; padding: 8px 12px; margin-bottom: 20px; } body .detail_h1 { font-weight: 600; font-size: 15px; margin-top: 2px; } body .detail_h2 { font-size: 17px; margin-bottom: 18px; margin-top: -4px; } body .colum_h1 { font-size: 17px; } body .colum_h3 { margin-bottom: 30px; font-size: 15px; } } /* bisiness-navi g_nav 2018.03.13追記*/ .g_nav ul li a.active#nav-about { position: relative; } .g_nav #nav-sub { display:none; position: absolute; background-color:#fff; right:0; left:0; z-index: 20; border-bottom: 1px solid #ccc; } .g_nav #nav-sub .nav-sub_backdrop{ width:1072px; padding: 28px 0 40px; margin:0 auto; } .g_nav #nav-sub ul { width: 1072px; } .g_nav #nav-sub ul li { display: inline-block; box-sizing: border-box; padding-left: 30px; vertical-align: top; font-size: 14px; } .g_nav #nav-sub ul li a { display: block; } .g_nav #nav-sub ul li a img { display: block; width: 233px; height: 100px; margin-bottom:10px; } .g_nav #nav-sub ul li span:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #000; border-right: 2px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -.25em; margin-right: 11px; } @media screen and (max-width: 1052px) { .g_nav #megamenu { display:none; } } #megamenu { position: relative; } /* bisiness-navi g_nav 2018.03.23追記*/ @media screen and (max-width: 1052px) { .sp_only.inner { height: 100%; display: -webkit-flex; display: flex; /*-webkit-align-items: center; align-items: center; margin: 0 auto;*/ padding:0 15px; /*position:relative;*/ justify-content: space-between; max-width: none; min-width: 0; } .inner_splogo { margin: 0 auto 0 -10px; -webkit-flex: 0 0 auto; flex: 0 0 auto; } .inner_splogo a { display: block; padding: 12px 10px; } .inner_splogo a:hover, .inner_splogo a:focus { opacity: 1; } .inner_splogo img { width: 78px; height: 11px; } .inner_spmenu { margin: 0; padding: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; color: #fff; } .inner_spmenu button { width: 60px; height: 38px; margin-right:-10px; border: none; background: transparent; outline: none; } .inner_spmenu span:before { content: ""; display: block; position: absolute; top: 20px; right: 15px; width: 20px; height: 1px; background: #ffffff; } .inner_spmenu span:after { content: ""; display: block; position: absolute; top: 10px; right: 25px; height: 20px; width: 1px; background: #ffffff; } }