/** Response width size : - PC - max-width:1200 - max-width:1024 - max-width:767 - max-width:560 - max-width:400 **/ /********************************************************************** max-width: 1400px **********************************************************************/ @media screen and (max-width:1400px) { #header .header-in { padding: 0 20px; } #header #gnb .menu > ul .link1 { font-size: 1.1rem; padding:0 1.3rem; } #header #gnb .menu2 ul li a { font-size:0.9rem; letter-spacing: -0.09em; } #header #gnb .menu2 ul li.small-1 a { font-size: .8rem; letter-spacing: -0.1em; } #header #gnb .menu2 ul li.small-2 a { font-size: .7rem; letter-spacing: -0.2em; } #header #member .inner .more a { margin-right: 0rem; } #business .in { padding-left: 20px; padding-right: 20px; } } /********************************************************************** max-width: 1200px **********************************************************************/ @media screen and (max-width:1200px) { #header { max-width: 100vw; } #header .header-in { padding: 0 10px; /* width: 100%; */ max-width: 100vw; } #header #global .inner { margin-top:1.3rem; } #footer .inner { width: 100%; padding-left: 20px; padding-right: 20px; } #sub-visual { /* height: 310px; */ /* display:flex; */ /* align-items:center; */ } #sub-visual .inner { width:100%; } /* main page */ .index-news .in { padding: 4rem 0; padding-left: 40px; padding-right: 40px; } .index-news .part-wrap { width: 100%; } .index-bbs .in { width: 100%; padding-left: 40px; padding-right: 40px; } .index-bbs.count--2 .in { width: 100%; } #business .in { padding: 4rem 0; padding-left: 40px; padding-right: 40px; } #business .bizz .list { width:100%; margin:0 auto 0; } #cs-wrap .in { padding: 4rem 0; padding-left: 40px; padding-right: 40px; } #cs-wrap .list { width: 100%; } #relation #ul_relation.static.static--3 .slide-item { width: calc((100% - 3rem) / 4); } #relation #ul_relation.static.static--4 .slide-item { width: calc((100% - 3rem) / 4); } #relation #ul_relation.static.static--5 .slide-item { width: calc((100% - 4rem) / 5); } } /********************************************************************** max-width: 1024px **********************************************************************/ @media screen and (max-width:1024px) { #header { background:#fff; } #header #gnb { position:fixed; top:0px; left:100vw; width:40vw; height:100vh; display: block; background:#fff; overflow-y:scroll; transition:left .3s ease-out; margin-top:0; padding-top:70px; padding-bottom: 2rem; border-left:1px solid #bba28e; z-index:3; } #header #gnb .menu { padding-top: 0; padding-bottom: 1rem; } #header #gnb .menu > ul { display: block; } #header #gnb .menu > ul > li { margin: 0; } #header #gnb .menu > ul .link1 { color:#222; } #header #gnb .menu > ul > li .link1::after { display: none; } #header #gnb .menu > ul > li:hover .link1::after { display: none; } #header #gnb .menu > ul > li > a:hover { } #header #gnb .menu > ul > li > a > span { position:absolute; display:block; width:24px; height:24px; right:10px; top:10px; background:none; border:1px solid #ccc; border-radius:100%; } #header #gnb .menu > ul > li > a > span > span { position:absolute; display:block; width:6px; height:6px; top:50%; left:50%; background:none; border-left:1px solid #555; border-bottom:1px solid #555; transform: translate(-50%, -50%) rotate(-45deg); } #header #gnb .menu > ul .sub li { } #header #gnb .menu > ul .sub a { line-height:1.6; } #header #gnb .menu2 { position: relative; display:block; padding-left:20px; padding-top: 0; left:auto; top:auto; transition:none; visibility: visible; opacity: 1; } #header #gnb .menu2 ul li { text-align:left; } #header #gnb .menu2 ul li a { display: inline-block; line-height:1.6; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; } #header #member-mobile { display: block; margin-bottom: 1rem; } #header #member-mobile .more { display: flex; padding-left: 1rem; } #header #member-mobile a { display: block; font-size: 1rem; color: #444; margin-right: 1rem; padding: .25rem 1rem; border: 1px solid #444; border-radius: 1rem; } #header #member-mobile a.admin { position: absolute; left: 1rem; top: 1rem; } #header #member { display: none; } #header #btn-mobile { display:flex; align-items:center; } #header.open #gnb { left:60vw; } #header.open #btn-mobile-open span:nth-child(1) { top:15px; left:-2px; transform:rotate(135deg); width:110%; } #header.open #btn-mobile-open span:nth-child(2) { left:-100px; opacity:0; } #header.open #btn-mobile-open span:nth-child(3) { top:15px; left:-2px; transform:rotate(-135deg); width:110%; } /* #left { display:none; } */ #left .left-list ul.d1 li.d1 { display:none; } #left .left-list ul.d1 li.d1.on { display:block; } body.index #wrapper { padding-top:70px; } #content { padding-top: 50px; } body.index #content { padding-top: 50px; } /* main page */ #visual.has-3 { padding-bottom:52%; } #visual .text .t1 { font-size: 3.0rem; } .index-news .in { padding: 4rem 0; padding-left: 20px; padding-right: 20px; } .index-news .sc-title { margin-bottom: 2rem; } .index-news .news li { font-size: 1.0rem; font-weight: 400; border-bottom:1px solid #ccc; display:flex; } .index-news .news .subject { width:calc(100% - 130px); line-height:2.5rem; padding: 0 1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .index-news .news .date { width:130px; line-height:2.5rem; padding: 0 1rem 0 0; } .index-news .gallery li { width: calc((100% - 3rem) / 4); margin-right: 1rem; margin-bottom: 1rem; } .index-bbs .in { width: 100%; padding-left: 20px; padding-right: 20px; } .index-bbs.count--2 .in-box { width: calc((100% - 1rem) / 2); margin-right: 1rem; } #business .in { padding: 4rem 0; padding-left: 20px; padding-right: 20px; } #business .sc-title { margin-bottom: 2rem; } #business .bizz .list li .icon { margin-bottom: 0.5rem; } #business .bizz .list li .subject { font-size: 1.0rem; line-height: 1.6; } #relation .in { width: 100%; padding-left: 20px; padding-right: 20px; } #relation .bx-wrapper { margin-bottom: 30px; } #cs-wrap .in { padding: 4rem 0; padding-left:20px; padding-right:20px; } #cs-wrap .sc-title { margin-bottom: 2rem; } #cs-wrap .list li { width: 48.8%; } } /********************************************************************** max-width: 767px **********************************************************************/ @media screen and (max-width:767px) { html { font-size: 15px; } #header #gnb { width:50vw; } #header.open #gnb { left:50vw; } #header #member-mobile .more { display: block; padding-left: 1rem; } #header #member-mobile a { display: inline-block; font-size: 1rem; color: #444; margin-right: .5rem; padding: .25rem 1rem; border: 1px solid #444; border-radius: 1rem; } #header #member-mobile a:first-child { margin-bottom: .5rem; } body.index #content { padding-top: 0px; } /* main page */ #visual.has-3 { padding-bottom:60%; } #visual .text { padding-top:7.5%; } #visual .text .t1 { font-size: 2.5rem; } #news .part-wrap { display:block; } #news .part { width: 100%; } #news .part h3 { font-size: 1.6rem; } .index-news .gallery li { width: calc((100% - 1rem) / 2); margin-right: 1rem; margin-bottom: 1rem; } .index-news .gallery li:nth-child(2n) { margin-right: 0; } .index-bbs.count--2 .in { display: block; } .index-bbs.count--2 .in-box { width: 100%; margin-right: 0rem; } .index-bbs.count--2 .in-box:last-child { margin-top: 1rem; } #business .bizz { height:auto; padding-bottom: 0; } #business .bizz .text-box { position: relative; width: 100%; height:auto; } #business .bizz .list { display:flex; flex-wrap:wrap; } #business .bizz .list.list--4 { flex-wrap : wrap; } #business .bizz .list li { width:40%; margin-right:0; } #business .bizz .list.list--2 li { width: calc((100% - 1rem) / 2); margin-right: 1rem; } #business .bizz .list.list--3 li { width: calc((100% - 2rem) / 3); margin-right: 1rem; } #business .bizz .list.list--4 li { width: calc((100% - 1rem) / 2); margin-right: 1rem; margin-bottom: 1rem; } #business .bizz .list.list--4 li:nth-child(2n) { margin-right: 0; } #business .bizz .list.list--4 li:nth-child(n + 3) { margin-bottom: 0; } #business .bizz .list.list--5 li { width: calc((100% - 2rem) / 3); margin-right: 1rem; margin-bottom: 1rem; } #business .bizz .list.list--6 li { width: calc((100% - 2rem) / 3); margin-right: 1rem; margin-bottom: 1rem; } #business .bizz .list li .icon { margin-bottom: 0.8rem; } #business .bizz .list li .subject { font-size: 1.2rem; line-height: 1.6; } #relation #ul_relation.static { justify-content: flex-start; } #relation #ul_relation.static.static--1 { justify-content: center; } #relation #ul_relation.static.static--2 { justify-content: center; } #relation #ul_relation.static.static--1 .slide-item { width: calc((100% - 2rem) / 2); } #relation #ul_relation.static.static--2 .slide-item { width: calc((100% - 2rem) / 2); } #relation #ul_relation.static.static--3 .slide-item { width: calc((100% - 2rem) / 3); } #relation #ul_relation.static.static--4 .slide-item { width: calc((100% - 2rem) / 3); margin-bottom: 1rem; } #relation #ul_relation.static.static--5 .slide-item { width: calc((100% - 2rem) / 3); margin-bottom: 1rem; } #relation #ul_relation.static.static--2 .slide-item:nth-child(2n) { margin-right: 0; } #relation #ul_relation.static.static--3 .slide-item:nth-child(3n) { margin-right: 0; } #relation #ul_relation.static.static--4 .slide-item:nth-child(3n) { margin-right: 0; } #relation #ul_relation.static.static--5 .slide-item:nth-child(3n) { margin-right: 0; } #cs-wrap .list { display:block; } #cs-wrap .list li { width: 100%; } #cs-wrap .list li:first-child { margin-bottom: 2rem; } /********** Popup Zone **********/ #popup { padding:40px 10px 0; } #popup .popup-inner { width: 540px; margin-left: auto; margin-right: auto; } } /********************************************************************** max-width: 560px **********************************************************************/ @media screen and (max-width:560px) { html { font-size: 14px; } body { font-weight: 350; } #header #logo { width: 240px; height:50px; } #header #logo.ratio--1 { width: 70px; } #header #logo.ratio--2 { width: 110px; } #header #logo.ratio--3 { width: 150px; } #header #logo.ratio--4 { width: 190px; } #header #gnb { width:60vw; } #header.open #gnb { left:40vw; } body.index #wrapper { padding-top: 50px; } /* main page */ #visual.has-3 { padding-bottom:65%; } #visual .text .t1 { font-size: 2.0rem; } #visual .visuals .visual-dots { height:20px; bottom:1.5%; } #visual .visuals .visual-dots li button { width: 12px; height: 12px; border-radius:12px; } #visual .visuals .visual-dots li.slick-active button { width:36px; } .index-news .in { padding-left:10px; padding-right:10px; } .index-news .sc-title { margin-bottom: 1rem; } .index-news .sc-title .title { font-size: 2rem; } .index-bbs .in { padding-left:10px; padding-right:10px; } .index-bbs .sc-title { margin-bottom: 2rem; } .index-bbs .sc-title .title { font-size: 2rem; } .index-bbs .in-box { padding: 1.0rem 1.5rem; } #business .in { padding-left:10px; padding-right:10px; } #business .sc-title .title { font-size:2rem; } #business .bizz .list.list--3 { flex-wrap : wrap; } #business .bizz .list.list--3 li { width: calc((100% - 1rem) / 2); margin-right: 1rem; margin-bottom: 1rem; } #business .bizz .list.list--3 li:nth-child(3n) { margin-right: 1rem; } #business .bizz .list.list--3 li:nth-child(n + 4) { margin-bottom: 1rem; } #business .bizz .list.list--3 li:nth-child(2n) { margin-right: 0; } #business .bizz .list.list--3 li:nth-child(n + 5) { margin-bottom: 0; } #business .bizz .list.list--5 li { width: calc((100% - 1rem) / 2); margin-right: 1rem; margin-bottom: 1rem; } #business .bizz .list.list--5 li:nth-child(3n) { margin-right: 1rem; } #business .bizz .list.list--5 li:nth-child(n + 4) { margin-bottom: 1rem; } #business .bizz .list.list--5 li:nth-child(2n) { margin-right: 0; } #business .bizz .list.list--5 li:nth-child(n + 5) { margin-bottom: 0; } #business .bizz .list.list--6 li { width: calc((100% - 1rem) / 2); margin-right: 1rem; margin-bottom: 1rem; } #business .bizz .list.list--6 li:nth-child(3n) { margin-right: 1rem; } #business .bizz .list.list--6 li:nth-child(n + 4) { margin-bottom: 1rem; } #business .bizz .list.list--6 li:nth-child(2n) { margin-right: 0; } #business .bizz .list.list--6 li:nth-child(n + 5) { margin-bottom: 0; } #relation .in { padding-left:10px; padding-right:10px; } #relation .sc-title .title { font-size:2rem; } #relation #ul_relation.static.static--1 .slide-item { width: 66%; } #relation #ul_relation.static.static--2 .slide-item { width: calc((100% - 1rem) / 2); } #relation #ul_relation.static.static--3 .slide-item { width: calc((100% - 1rem) / 2); margin-bottom: 1rem; } #relation #ul_relation.static.static--4 .slide-item { width: calc((100% - 1rem) / 2); margin-bottom: 1rem; } #relation #ul_relation.static.static--5 .slide-item { width: calc((100% - 1rem) / 2); margin-bottom: 1rem; } #relation #ul_relation.static.static--3 .slide-item:nth-child(3n) { margin-right: 1rem; } #relation #ul_relation.static.static--4 .slide-item:nth-child(3n) { margin-right: 1rem; } #relation #ul_relation.static.static--5 .slide-item:nth-child(3n) { margin-right: 1rem; } #relation #ul_relation.static.static--3 .slide-item:nth-child(2n) { margin-right: 0rem; } #relation #ul_relation.static.static--4 .slide-item:nth-child(2n) { margin-right: 0rem; } #relation #ul_relation.static.static--5 .slide-item:nth-child(2n) { margin-right: 0rem; } #cs-wrap .in { padding-left:10px; padding-right:10px; } #cs-wrap .sc-title .title { font-size:2rem; } #cs-wrap .list li .box.box-address dl { font-size: 1.1rem; } #sub-visual { height: 240px; } /********** Popup Zone **********/ #popup { padding:20px 10px 0; } #popup .popup-inner { width: 100%; margin-left: auto; margin-right: auto; } /********** Paignation (bootstrap) **********/ .pagination>li>a, .pagination>li>span { padding: 4px 8px; } } /********************************************************************** max-width: 400px **********************************************************************/ @media screen and (max-width:400px) { html { font-size: 13px; } #header #logo { width: 200px; height:50px; } /* main page */ #visual.has-3 { padding-bottom:70%; } #visual .text ul { padding-left:0px; padding-right:0px; } #visual .text ul .item { font-size: 1.3rem; letter-spacing: -0.075em; } #business .bizz .list.list li { width: calc((100% - .6rem) / 2); margin-right: .6rem; margin-bottom: .6rem; } #business .bizz .list.list li:nth-child(3n) { margin-right: .6rem; } #business .bizz .list.list li:nth-child(n + 4) { margin-bottom: .6rem; } #business .bizz .list.list li:nth-child(2n) { margin-right: 0rem; } #business .bizz .list.list li:nth-child(n + 5) { margin-bottom: 0rem; } /********** Paignation (bootstrap) **********/ .pagination>li>a, .pagination>li>span { padding: 3px 6px; } }