/*device*/ .pc_only { display: inline-block; } .sp_only { display: none; } @media screen and (max-width: 900px) { .pc_only { display: none; } .sp_only { display: inline-block; } } /*loading*/ #loading{ width: 100%; height: 100vh; position: fixed; background:#fff; ; top: 0; left: 0; z-index: 10000; } #loadingInner{ width: 100%; max-width: 800px;height: 500px;display: block;position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);-webkit- transform: translateX(-50%) translateY(-50%);} /*header*/ header > div.wrapper { display: block; width: 100%; height: 87px; box-sizing: border-box; position: fixed; z-index: 9999; margin: 0px auto; -webkit-transition: all 0.2s;transition: all 0.2s;} header.fixed > div.wrapper { background: #fff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); } .home header { background-size: cover; position: relative;} .header_logo a { display: block;width: 290px; height: 35px; position: absolute; box-sizing: border-box; z-index: 4; left: 30px; top: 25px; line-height: 0;} .st0{fill:#000;} .home .st0{fill:#fff;} .fixed .st0{fill:#000;} @media screen and (max-width: 1250px) { .header_logo a {width: 168px; height: 20px; top: 33px } } @media screen and (max-width: 900px) { .header_logo a { display: block; left: 5vw; top: 15px; } } /*nav*/ .btn_humberger { display: none;} ul.global_nav { position: absolute;right: 250px; top: 25px;} ul.global_nav li { color: #000;display: inline-block; padding: 0 1em; position: relative;} ul.global_nav li span {padding: 0 1em 0 0; } ul.global_nav li#gnavi03:after { content: ""; display: block; border: 4px solid transparent; border-top: 4px solid #000; position: absolute; right: 1em; top: 15px;} .home ul.global_nav li#gnavi03:after { border-top: 4px solid #fff;} .fixed ul.global_nav li#gnavi03:after { border-top: 4px solid #000;} .home ul.global_nav li, .home ul.global_nav li span { color: #fff; } .fixed ul.global_nav li, .fixed ul.global_nav li span { color: #000; } ul.global_nav li li { padding: 5px 1em;} div.recruit_btn { width: 212px; height: 87px; background: #fff;position: absolute; right: 0px; top: 0px;} div.recruit_btn a { display: block; font-size: 0.8rem; width: 212px; height: 87px; padding: 20px; color: #fff; background: #de3f40; z-index: 4; text-align: center; line-height: 180%; box-sizing: border-box;} div.recruit_btn span { font-size: 1.5rem; font-family: 'Asap', sans-serif; color: #fff;} ul.child { width: 200px; opacity: 0; position: absolute; top: 40px; margin-left: -40px; -webkit-transition: all 0.5s;transition: all 0.5s; background: #fff; padding: 10px; z-index: -1; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.1);} ul.child:after { content: ""; display: block; border: 10px solid transparent; border-bottom: 10px solid #fff; position: absolute; left: 50%; top: -20px; margin-left: -5px; z-index: 0;} .active ul.child{ opacity: 1; position: absolute; top: 45px; z-index: 2; } ul.child li { font-size: 0.9rem; color: #000!important;} ul.child li a { padding: 2px 0 2px 30px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 18px 18px;} @media screen and (max-width: 1250px) { ul.global_nav li { font-size: 0.8rem; padding: 0 0.3em;} ul.global_nav li span { padding: 0 1em 0 0.3em; } ul.global_nav li#gnavi03:after { right: 5px;} ul.child { margin-left: -50px;} } @media screen and (max-width: 900px) { header > div.wrapper { height: 50px;} ul.global_nav li { font-size: 1rem; padding: 0;} ul.global_nav li span { color: #fff!important; } ul.global_nav li#gnavi03:after { display: none;} div.recruit_btn { width: 81px; height: 50px; background: #fff;position: absolute; right: 50px; top: 0px;} div.recruit_btn a { width: 81px; height: 50px; font-size: 0.6rem; padding: 10px 0; line-height: 150%; } div.recruit_btn span { font-size: 1.0rem; } .btn_humberger {display: block;width: 30px;height: 30px; padding: 0; background: none;position: fixed;right: 0;top: 0;border: none; -ms-transition: all 0.5s;-webkit-transition: all 0.5s;transition: all 0.5s;} .btn_humberger{ display: block; z-index:1000; width: 50px; height: 50px; padding: 15px 17px; position: absolute; right: 0; top: 0; background: #000; box-sizing: border-box;} .btn_humberger span{ width: 16px; height: 2px; position: relative; display: block;background: #fff;} .btn_humberger span::before{content: "";width: 100%;height: 2px;background: #fff;position: absolute;left:0;top: 9px; -ms-transition: all 0.5s;-webkit-transition: all 0.5s;transition: all 0.5s;} .btn_humberger span::after{content: "";width: 100%;height: 2px;background: #fff;position: absolute;left:0;bottom: 9px; -ms-transition: all 0.5s;-webkit-transition: all 0.5s;transition: all 0.5s;} ul.global_nav { opacity: 0; display: none;} body.open #header .header-inner{ display: block;width: 100%; height: 100vh; visibility: visible; position: absolute; z-index: 10001; } body.open #header::after{ background: #ffe000; box-shadow: 0px -1px 5px rgba(0,0,0, 0);} body.open .btn_humberger{z-index: 10001; padding: 14px 13px;} body.open .btn_humberger span { height: 0;} body.open .btn_humberger span::before{ width: 24px; transform:rotate(-45deg);top: 50%;} body.open .btn_humberger span::after{ width: 24px; transform:rotate(45deg);top: 50%;} ul.child { display: block!important; width: auto; opacity: 1; position: relative; top: auto; margin-left: 0px; -webkit-transition: all 0.5s;transition: all 0.5s; background: none; padding: 0px; z-index: 0;} ul.child a { margin-left: 0; padding: 0;} ul.global_nav ul.child li { padding: 0; border-bottom: none;} ul.global_nav ul.child li a { padding: 5px 0 5px 25px; } ul.child:after { display: none;} } /*ハンバーガーオープン*/ @media screen and (max-width: 900px) { body.open{ overflow-y: hidden!important;} body.open #header {width: 100%;height: 100vh;display: block;position: fixed!important;left: 0;padding: 0;overflow-y: auto;-webkit-overflow-scrolling: touch; z-index: 9999;} #header .headBord{width: 100%;height: 100%;display: none;background: rgba(255, 255, 255, 1 );left: 0;top: 0;position: fixed!important;} body.open #header .headBord{ opacity: 1; display: block;z-index: 10000;} nav#globalNavi ul.global_nav { width: 100%;z-index: 10001; position: absolute; left: 0; border: none; padding: 5%; box-sizing: border-box;} nav#globalNavi div#function_sd { height: 50vh; width: 100%;z-index: 10001; position: absolute; top: 50%; left: 0; background: #26b7bc;} nav#globalNavi div#function_sd div.wrapper { width: 90%; padding: 5%;} body.open ul.global_nav{ display: block; height: calc(100vh - 50px); position: absolute; top: 50px; background: #000;} ul.global_nav li { display: block; border-bottom: 1px solid #666;} ul.global_nav li a { color: #fff; display: block; padding: 15px 0 15px 25px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; fill: #fff; background-size: 13px 13px;} ul.global_nav li span { color: #fff; font-size: 0.8rem; display: block; padding: 15px 0 5px;} ul.global_nav li#gnavi03 { padding-bottom: 10px; border-bottom: 1px solid #666; } } /*common*/ body { background: url(../img/common_body_bg.png) repeat; } div.parallax { background-position: auto right; background-repeat: no-repeat; background-image: url(../img/common_contents_bg.png); background-size: cover; width: 100vw; height: 100vh; position: fixed;} @media all and (-ms-high-contrast: none){ div.parallax {background-position-y: 0!important} } main {display: block;position: relative; z-index: 1;} aside {display: block;position: relative; z-index: 1;} footer {display: block; background: url(../img/common_footer_bg-100.jpg) no-repeat center; background-size: cover; position: relative; z-index: 1;} ul.footer_link { padding: 200px 0; text-align: center;} ul.footer_link li { color: #fff; display: inline; margin-left: 50px;} ul.footer_link li:first-child { margin-left: 0; } ul.footer_link li a { padding: 2px 0 2px 30px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; fill: #fff; background-size: 23px 23px;} div.copyright { font-family: 'Open Sans', sans-serif; font-size: 0.7rem; font-weight: 400; font-style: italic; text-align: center; color: #fff; padding: 80px 0;} @media screen and (max-width: 900px) { div.parallax { background-image: url(../img/common_contents_bg-sp.png); background-position: top right; background-size: cover; background-repeat: no-repeat; width: 100vw; height: 100vh; position: fixed;} ul.footer_link { display: inline-block;padding: 50px 0; text-align: left; position: relative; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);} ul.footer_link li { display: block; margin-left: 0;} ul.footer_link li a { font-size: 0.8rem; padding: 2px 0 2px 20px; background-size: 13px 13px; } } /*top*/ .home footer { margin-top: 200px;} div.top_main { height: 100vh; position: relative;} div.top_main_ph { width: 100%; overflow: hidden; position: relative; z-index: -1;} div.movie{ bottom: 0; left: 0; overflow: hidden; position: absolute; /* fixed の場合。absolute でも同じ */ right: 0; top: 0; z-index: -2; } div.movie iframe, div#ytplayer{ box-sizing: border-box; height: 56.25vw; /* 16:9 の高さなので 56.25% (= 9 ÷ 16) */ left: 0; min-height: 100%; min-width: 100%; position: absolute; bottom: 0; width: 177.77777778vh; /* 16:9 の幅なので 177.77% (= 16 ÷ 9) */ z-index: -1; } div.top_main_ph01 { height: 100vh; position: absolute; left: 0; top: 0; background: url(../img/top_main_img01.jpg) no-repeat center; background-size: cover;} div.top_main_ph02 { height: 100vh; position: absolute; left: 0; top: 0; background: url(../img/top_main_img03.jpg) no-repeat center; background-size: cover;} div.top_main_ph03 { height: 100vh; position: absolute; left: 0; top: 0; background: url(../img/top_main_img02.jpg) no-repeat center; background-size: cover;} div.top_main_ph04 { height: 100vh; position: absolute; left: 0; top: 0; background: url(../img/top_main_img04.jpg) no-repeat center; background-size: cover;} div.top_main_read { width: 45%; height: 22%; position: absolute; right: 5%; top: 60%; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 3;} div.top_main_anime { max-width: 393px; width: 50%; height: 393px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); z-index: 2;} @media screen and (max-width: 900px) { div.movie{ display: none; } } @media screen and (min-width: 901px) { div.top_main_ph{ display: none; } } div.top_interview { position: relative;} div.top_interview div.top_hd { width: 320px; height: 36px; line-height: 0;} div.top_news div.top_hd { width: 422px; height: 36px; line-height: 0;} .home h2 {color: #00a82d; margin-top: 40px; line-height: 100%;} .home main > div > div { margin-top: 200px;} .home main > div > div.top_environment { margin-top: 0px;} .home main > div > div > div.wrapper { width: 80%; margin: 0px auto;} .home main > div > div.top_interview > div.wrapper { width: 100%; margin: 0px auto;} div.top_common_hd { width: 95%; margin: 0px auto 40px; position: relative; z-index: 2;} div.top_interview_ph { width: 60vw; height: 750px; position: absolute; top: 0; margin-left: 40vw;} div.top_interview_ph img { width: 100%;} div.top_interview_ph01 { background: url(../img/top_int_item01ph-100.jpg) no-repeat center top; background-size: cover;} div.top_interview_ph02 { background: url(../img/top_int_item02ph-100.jpg) no-repeat center top; background-size: cover;} div.top_interview_ph03 { background: url(../img/top_int_item03ph-100.jpg) no-repeat center top; background-size: cover;} div.top_interview_ph04 { background: url(../img/top_int_item04ph-100.jpg) no-repeat center top; background-size: cover;} div.top_interview_ph05 { background: url(../img/top_int_item05ph-100.jpg) no-repeat center top; background-size: cover;} div.top_interview_txt { width: 35vw; margin: 220px 0 0 10vw; position: relative; z-index: 2;} div.top_interview_txt p { font-size: 1.5rem; line-height: 200%; font-weight: bold;} div.top_interview_ini { font-size: 1.8rem; line-height: 0; margin: 40px 0 30px; font-family: 'Open Sans', sans-serif;} div.top_interview_detail { font-size: 1.1rem; color: #de3f40; margin-top: 40px;font-family: 'Asap', sans-serif;} div.top_interview_dep { line-height: 100%;} div.top_interview_itemlist { margin-top: -140px;} div.top_interview_itemlist > div { height: 750px;} div.top_interview_thlist { width: 1100px; background: #fff; padding: 40px 2.5vw; margin: 0 0 0 10vw; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); display: flex; position: relative; top: -160px; z-index: 2;} div.top_interview_thlist div.slick-track { width: 960px!important; transform: translate3d(0px, 0px, 0px)!important;} div.top_interview_thlist2 { display: flex; width: 960px; } div.top_interview_thlist2 div.slick-slide { width: 120px!important; height: 120px; margin-left: 20px; overflow: hidden; cursor: pointer; border: 2px solid #fff; box-sizing: border-box;-webkit-transition: all 0.5s;transition: all 0.5s;} div.top_interview_thlist2 div.slick-slide.slick-current {border: 2px solid #de3f40; } div.top_interview_thlist2 div.slick-slide:first-child { margin-left: 0;} div.top_interview_more a { display: block; width: 120px; height: 120px;background: #de3f40; margin-left: 1.5vw; padding:45px 0; color: #fff; box-sizing: border-box; text-align: center; border-radius: 60px;} div.top_interview_thlist2 img { width: 100%;} div.top_interview_detail a { padding: 3px 0 3px 30px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 23px 23px;} div.top_environment { position: relative;} div.top_environment div.top_hd { width: 422px; height: 37px; line-height: 0;} div.top_environment_bg { width: 60vw; height: 600px; position: absolute; right: 0; top: -40px; background: url( ../img/top_env_bg-100.jpg) no-repeat center; background-size: cover;} div.top_environment_bg img { width: 100%;} div.top_environment_item { background: #fff; margin-top: 200px; padding: 70px 5%;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); position: relative; z-index: 2; display: flex;} div.top_environment_item img { width: 100%;} div.top_environment_img {overflow: hidden;} div.top_environment_item a { display: block; margin-left: 2.5vw; flex-grow: 1;} div.top_environment_item a:first-child { margin-left: 0;} div.top_environment_txt { text-align: center; margin-top: 2.5vw; padding: 2px 0; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 5px center; background-size: 23px 23px;} div.top_about { position: relative;} div.top_about div.top_hd { width: 290px; height: 37px; line-height: 0;} div.top_about_bg { width: 60vw; height: 600px; position: absolute; right: 0; top: -40px; background: url(../img/top_about_bg-100.jpg) no-repeat center; background-size: cover;} div.top_about_bg img { width: 100%;} div.top_about_img { overflow: hidden;} div.top_about_item { margin-top: 200px; position: relative; z-index: 2; display: flex;} div.top_about_item img { width: 100%;} div.top_about_item a { display: block; margin-left: 5vw; background: #fff; padding: 50px 2.5vw 40px;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); flex-grow: 1;} div.top_about_item a:first-child { margin-left: 0;} div.top_about_txt { text-align: center; margin-top: 2.5vw; padding: 2px 0; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat 20px center; background-size: 23px 23px;} div.top_information div.top_hd { width: 388px; height: 37px; line-height: 0;} ul.top_information_item { margin-top: 40px;} ul.top_information_item a { display: block; background: #fff; margin-bottom: 20px; padding: 20px 1.25vw;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);} div.top_information_cat { font-size: 0.8rem; color: #fff; width: 15%; float: left; text-align: center; line-height: 240%;} div.cat_type01 {background: #00a82d;} div.cat_type02 {background: #de3f40;} div.top_information_date { font-size: 0.8rem;font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: italic; color: #999; width: 10%; float: right; text-align: right;} div.top_information_title {width: 55%; float: left; margin: 0 3%; padding: 0 0 0 35px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 23px 23px;} div.top_information_more a { display: block; width: 120px; height: 120px;background: #de3f40; margin: 40px auto 0; padding:45px 0; color: #fff; box-sizing: border-box; text-align: center; border-radius: 60px;} @media screen and (max-width: 1300px) { div.top_interview_thlist { width: 670px;} div.top_interview_thlist div.slick-track { width: 540px!important;} div.top_interview_thlist2 { width: 540px; } div.top_interview_thlist2 div.slick-slide:nth-child(5) { margin-left: 0;} } @media screen and (max-width: 900px) { .home footer { margin-top: 50px;} div.top_main { height: 100vh;} div.top_main_read { width: 70%; height: auto; position: absolute; right: 5%; bottom: 20%; transform: translateY(0); -webkit-transform: translateY(0); z-index: 3;} div.top_main_anime { width: 70%; height: auto; position: absolute; left: -20%; top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); z-index: 2;} div.top_main_ph01 { background: url(../img/top_main_img01-sp.jpg) no-repeat center; background-size: cover;} div.top_main_ph02 { background: url(../img/top_main_img03-sp.jpg) no-repeat center; background-size: cover;} div.top_main_ph03 { background: url(../img/top_main_img02-sp.jpg) no-repeat center; background-size: cover;} div.top_main_ph04 { background: url(../img/top_main_img04-sp.jpg) no-repeat center; background-size: cover;} div.top_interview div.top_hd { width: 192px; height: 22px; line-height: 0;} .home h2 {color: #00a82d; margin-top: 10px; line-height: 100%;} .home main > div > div { margin-top: 50px;} .home main > div > div > div.wrapper { width: 90%; margin: 0px auto;} .home main > div > div.top_environment { margin-top: 50px;} div.top_common_hd { width: 90%; margin: 0px auto; position: relative; z-index: 2;} div.top_interview_ph { width: 95vw; margin-left: 5vw; position: relative; right: 0; top: 0;} div.top_interview_ph img { width: 100%;} div.top_interview_txt { width: 70vw; margin: 20px 0 0 5vw; position: relative; z-index: 2;} div.top_interview_txt p { font-size: 1.0rem; line-height: 200%; font-weight: bold;} div.top_interview_ini { font-size: 1.8rem; line-height: 0; margin: 30px 0 20px; font-family: 'Open Sans', sans-serif;} div.top_interview_detail { font-size: 0.9rem; color: #de3f40; margin-top: 20px;font-family: 'Asap', sans-serif;} div.top_interview_dep { line-height: 100%;} div.top_news div.top_hd { width: 253px; height: 22px;} div.top_interview_itemlist > div { height: auto;} div.top_interview_itemlist { margin-top: 20px;} div.top_interview_thlist { width: 20vw; padding: 20px 3.5vw; margin-top: 0px; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); display: inline-block; position: absolute; right: 0; bottom: 0; top: auto;z-index: 2; box-sizing: border-box;} div.top_interview_thlist div.slick-track { width: auto!important;} div.top_interview_thlist2 { width: 100%; display: block; } div.top_interview_thlist2 div.slick-slide { width: calc(108vw / 900* 100) !important; height: auto; margin: 10px 0 0 0; overflow: hidden;} div.top_interview_thlist2 img { width: 100%;} div.top_interview_thlist2 div:first-child { margin-top: 0;} div.top_interview_more a { font-size: 0.8rem; display: block; width: 100%; height: 100%;background: #de3f40; margin: 10px 0 0 ; padding:27% 0; color: #fff; box-sizing: border-box; text-align: center; border-radius: 50%;} div.top_interview_detail a { background-size: 13px 13px; padding: 0 0 0 25px;} div.top_environment div.top_hd { width: 253px; height: 22px; line-height: 0;} div.top_environment_bg { width: 95vw; height: 230px; margin-top: 20px; position: relative; right: 0; top: 0;} div.top_environment_item { background: #fff; margin: -20px 0 0 -5vw; padding: 20px 0 1px 10vw;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); position: relative; z-index: 2; display: block;} div.top_environment_item a { display: flex; margin: 0 0 20px;} div.top_environment_img { width: 112px; margin-right: 20px;} div.top_environment_txt { flex-grow: 1; text-align: left; align-self:center; margin-top: 0; padding-left: 25px;background-size: 13px 13px;} div.top_about div.top_hd { width: 174px; height: 22px; line-height: 0;} div.top_about_bg { width: 95vw; height: 230px; margin-top: 20px; position: relative; right: 0; top: 0;} div.top_about_item { background: #fff; margin: -20px 0 0 -5vw; padding: 20px 0 1px 10vw;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); position: relative; z-index: 2; display: block;} div.top_about_item a { display: flex; margin: 0 0 20px; padding: 0; box-shadow: none;} div.top_about_img { width: 112px; margin-right: 20px;} div.top_about_txt { flex-grow: 1; text-align: left; align-self:center; margin-top: 0; padding-left: 25px; background-position: left; background-size: 13px 13px;} div.top_information div.top_hd { width: 227px; height: 22px; line-height: 0;} ul.top_information_item { margin-top: 20px;} ul.top_information_item a { display: block; background: #fff; margin-bottom: 10px; padding: 38px 2.5vw 12px;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); position: relative;} div.top_information_cat { font-size: 0.8rem; color: #fff; width: 96px; float: none; position: absolute; top: 12px; line-height: 180%;} div.top_information_date { font-size: 0.8rem; width: 100px; float: none; position: absolute; top: 12px; right: 2.5vw; text-align: right; line-height: 180%;} div.top_information_title {width: 100%; float: none; margin: 0; padding: 0 0 0 25px; background-size: 13px 13px; line-height: 180%;} div.top_information_more a { font-size: 0.8rem; display: block; width: 80px; height: 80px; margin: 20px auto 0; padding:27px 0; border-radius: 40px;} } /*2nd*/ div.common_hd { padding-top: 200px; width: 90%; margin: 0px auto 80px; position: relative; z-index: 2;} div.common_hd h1, div.common_hd div.page_title {color: #00a82d; margin-top: 40px; line-height: 100%;} /*information top*/ div.information_wrapper { padding-bottom: 200px;} div.information_hd { width: 388px; height: 36px; line-height: 0;} div.information_wrapper { display: flex; max-width: 1355px; width: 80%; margin: 0px auto;} div.information_wrapper main { max-width: 1061px; flex-grow: 2;} div.information_wrapper aside { flex:1; margin-left: 5%;} a.information_post{ display: block; background: #fff; margin-bottom: 20px; padding: 20px;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);} div.information_ph { width: 310px; float: left; overflow: hidden; display: block; aspect-ratio: 310 / 206;} div.information_ph img { width: 100%;} div.information_txt { padding-left: 330px; display: block;} a.information_post p { line-height: 180%;} div.information_meta { position: relative;} div.information_cat { width: 175px; display: inline-block; font-size: 0.8rem; color: #fff; text-align: center; line-height: 240%;} div.information_date { position: absolute; right: 0;top: 0; font-size: 0.8rem;font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: italic; color: #999; text-align: right; letter-spacing: 0.3em;} div.information_title { display: block;font-size: 1.25rem; margin: 15px 0; padding: 0 0 0 35px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 23px 23px;} div.sidebar_item { margin-bottom: 50px;} div.sidebar_hd { line-height: 0; margin-bottom: 30px;} div.hd_category { width: 81px;} div.hd_archive { width: 67px;} div.sidebar_item li { margin: 25px 0;} div.sidebar_item li a { display: block; position: relative; padding-left: 24px; line-height: 100%;} div.sidebar_item li a:after { content: ""; display: block; width: 12px; height: 1px; position: absolute; left: 0px; top: 8px; background: #000;} div.sidebar_item li.link_recruit a {color: #de3f40; } div.sidebar_item li.link_recruit a:after { background: #de3f40;} div.paginetion { min-height: 30px; margin-top: 80px; position: relative; font-size: 1.1rem; font-family: 'Asap', sans-serif;} div.paginetion_prev { position: absolute; left: 0px;} div.paginetion_next { position: absolute; right: 0px;} ul.paginetion_num { text-align: center;} ul.paginetion_num li { display: inline-block;} ul.paginetion_num li a { color: #de3f40; display: inline-block; padding: 2px 1em; } ul.paginetion_num li span { display: inline-block; padding: 2px 1em; } div.paginetion_prev a, div.paginetion_next a, ul.paginetion_num li a { color: #de3f40; } div.paginetion_prev a { padding: 2px 0 2px 35px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cpolygon%20class%3D%22st0%22%20points%3D%225.9%2C11.8%2015.9%2C13.3%2015.9%2C10.2%20%22%2F%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 23px 23px;transform: scale(1, -1);} div.paginetion_next a { padding: 2px 35px 2px 0; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat right center; background-size: 23px 23px;transform: scale(1, -1);} @media screen and (max-width: 900px) { div.common_hd { padding-top: 125px; width: 90%; margin: 0 5% 50px ; position: relative; z-index: 2;} div.common_hd h1, div.common_hd div.page_title { margin-top: 20px; font-size: 0.8rem;} div.information_wrapper { padding-bottom: 50px;} div.information_hd { width: 227px; height: 11px; line-height: 0;} div.information_top_wrapper { display: block; width: 95%; margin: auto;} a.information_post { box-sizing: border-box;} div.information_ph { width: 100%; float: none; overflow: hidden; display: block;} div.information_txt { padding-left: 0px; display: block;} div.information_meta { margin-top: 15px;} div.information_cat { width: 120px; display: inline-block; font-size: 0.8rem; color: #fff; text-align: center; line-height: 200%;} div.information_date { font-size: 0.6rem; } div.information_title { font-size: 1.0rem; margin: 10px 0; padding-left: 25px; background-size: 18px 18px;} div.information_txt p { font-size: 0.8rem; line-height: 200%;} div.information_top_wrapper div.paginetion { width: 90vw;} div.paginetion { margin-top: 20px;} ul.paginetion_num { font-size: 1rem; padding-top: 30px; } div.paginetion_prev a { font-size: 1rem; padding: 2px 0 2px 20px; background-size: 13px 13px; } div.paginetion_next a { font-size: 1rem; padding: 2px 20px 2px 0; background-size: 13px 13px; } div.sidebar_item { margin-bottom: 0px;} div.information_wrapper aside { width: 100%; margin: 50px 0 0;} div.sidebar_item { width: 50%; float: left;} div.sidebar_hd { margin-bottom: 25px;} div.hd_category { width: 68px; height: 8px;} div.hd_archive { width: 56px; height: 8px;} div.sidebar_item li { font-size: 0.8rem; margin: 20px 0;} div.sidebar_item li a { padding-left: 16px;} div.sidebar_item li a:after { width: 8px; top: 5px; } div.top_interview_ini { font-size: 1.5rem;} div.top_interview_dep { font-size: 0.8rem;} } /*information single*/ h1.information_title { font-size: 1.25rem; margin-top: 15px;} div.single_body { margin-top: 50px;} div.single_body img { max-width: 100%; height: auto!important;} div.single_body h2 { font-size: 1.12rem; margin-bottom: 15px;} div.single_body p { margin-bottom: 2em;} @media screen and (max-width: 900px) { div.information_single_wrapper { display: block; width: 90%; margin: 0 5% 0 ;} } /*interview top*/ div.interview_top_wrapper div.wrapper {width: 80%; margin: 0px auto; padding-bottom: 120px; display: flex;flex-wrap: wrap; } a.list_interview_item { display: block; width: 47%; margin-bottom: 80px; position: relative;} a.list_interview_item:nth-child(2n) { margin-left: 6%;} div.list_interview_ph { overflow: hidden; } div.list_interview_ph img { width: 100%;} div.list_interview_txt { margin-top: 20px;} div.list_interview_meta { display: flex;} div.list_interview_meta > div:first-child { flex-grow: 2;} div.list_interview_detail { color: #de3f40; margin-top: 40px; padding: 3px 0 3px 30px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 23px 23px;} @media screen and (max-width: 900px) { div.interview_top_wrapper div.wrapper {width: 90%; margin: 0px auto; padding-bottom: 10px; display: block; } a.list_interview_item { display: block; width: 100%; margin-bottom: 40px;} a.list_interview_item:nth-child(2n) { margin-left: 0;} } /*interview single*/ div.interview_wrapper main { padding-bottom: 200px;} div.interview_head { width: 95%; margin-left: 5%;} div.interview_hd { width: 320px; height: 37px;} div.interview_ph { max-width: 1325px; width: 78vw; height: 787px; position: absolute; right: 0; top: -250px;} div.interview_ph img { display: none;} div.interview01_ph { background: url( ../img/interview_item01_main.jpg) no-repeat center; background-size: cover; } div.interview02_ph { background: url( ../img/interview_item02_main.jpg) no-repeat center; background-size: cover; } div.interview03_ph { background: url( ../img/interview_item03_main.jpg) no-repeat center; background-size: cover; } div.interview04_ph { background: url( ../img/interview_item04_main.jpg) no-repeat center; background-size: cover; } div.interview05_ph { background: url( ../img/interview_item05_main.jpg) no-repeat center; background-size: cover; } div.interview_txt { width: 550px; height: 537px; margin-top: 80px; position: relative; z-index: 2;} div.interview_txt p { font-size: 1.5rem; line-height: 200%; font-weight: bold;} div.interview_body { width: 80%; margin: 0px auto;} div.interview_section_hd { font-size: 1.25rem; font-weight: bold; line-height: 130%; margin: 40px 0 30px;} div.interview_section_hd span { width: 32px; height: 15px; padding-right: 10px; display: inline-block;} div.interview_section { display: flex; margin-top: 80px; flex-direction: row-reverse; } div.interview_section_txt { width: 47%;} div.interview_section_ph { width: 47%; margin-left: 6%;} div.interview_section_ph img { width: 100%;} aside.recommond_list { padding: 80px 0; background: #00a82d;} aside.recommond_list div.wrapper { width: 80%; margin: 0px auto; display: flex; } /* aside.recommond_list a.recommond_post { display: block; width: 31%; margin-left: 3.5%;} aside.recommond_list a.recommond_post:first-child { margin-left: 0%;} aside.recommond_list a.recommond_post div.recommond_interview_ph { width: 100%; position: relative; top: 0; overflow: hidden; } aside.recommond_list a.recommond_post div.recommond_interview_ph img { width: 100%;} */ @media screen and (max-width: 900px) { div.interview_wrapper main { padding-bottom: 50px;} div.interview_hd { width: 192px; height: 22px;} div.interview_ph { width: 100%; height: auto; padding-bottom: 66%; position: relative; right: auto; top: auto;} div.interview_body { width: 90%; margin: 0px auto;} div.interview_section { display: block; margin-top: 50px; } div.interview_txt { width: 90vw; height: auto; margin-top: 20px; position: relative; z-index: 2;} div.interview_txt p { font-size: 1.0rem; line-height: 200%; font-weight: bold;} div.interview_section_txt { width: 100%;} div.interview_section_ph { width: 100%; margin-left: 0;} div.interview_section_hd { margin: 20px 0 10px;} aside.recommond_list { padding: 50px 0; background: #00a82d;} aside.recommond_list div.wrapper { width: 90%; display: block; } /* aside.recommond_list a.recommond_post { width: 100%; margin: 20px 0 0; display: flex;align-items: center;} aside.recommond_list a.recommond_post:first-child { margin: 0;} aside.recommond_list a.recommond_post div.recommond_interview_ph { width: 50%;}*/ aside.recommond_list a.recommond_post div.top_interview_ini { margin: 0 0 0 20px; line-height: 100%;} aside.recommond_list a.recommond_post div.top_interview_dep { margin: 0 0 0 30px; line-height: 100%;} } /*company*/ div.company_wrapper { margin: 0 auto; padding-bottom: 200px;} div.company_wrapper h2 { font-size: 1.8rem; color: #00a82d; margin: 0 0 80px; line-height: 100%;} div.company_hd { width: 291px; height: 37px;} div.company_read { width: 95%; height: 765px; margin-left: 5%; position: relative; } div.company_read_txt { width: 506px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); background-color: rgba(0,0,0,0.9); text-align: center; padding: 100px 50px 50px; box-sizing: border-box; z-index: 3; } div.company_read_wa { width: 230px; height: 200px; margin: 0px auto 50px;} div.company_read_txt p { color: #fff; line-height: 250%; text-align: left;} div.company_read_ph { width: 77%; height: 765px; background: url(../img/company_sec01_hdimg.jpg) no-repeat left center; background-size: cover; position: absolute; top: 0px; right: 0;} div.company_read_ico { width: 435px; height: 435px; position: absolute; bottom: -120px; left: 25%; z-index: 2;} div.company_item { width: 80%; padding: 120px 0 0; margin: 0 auto;} div#products.company_item { padding: 120px 0 0; margin: 80px auto 0;} div.company_rinen { width: 80%; padding: 120px 0;} div.company_rinen_copy { max-width: 544px; height: 133px; margin: 80px auto;} div.company_rinen p { text-align: center;} div.company_hdimg { width: 100%; height: 600px;} div.company_hdimg01 { background: url(../img/company_sec02_hdimg.jpg) no-repeat center; background-size: cover;} div.company_hdimg02 { background: url(../img/company_sec03_hdimg.jpg) no-repeat center; background-size: cover; margin-top: 80px;} table.company_tb01 { width: 100%; border-top: 1px solid #000;} table.company_tb01 th, table.company_tb01 td { border-bottom: 1px solid #000; padding: 20px 30px;} table.company_tb01 th { width: 4em; font-weight: normal;} table.company_tb01 dl { display: flex;} table.company_tb01 dt { width: 11em;} ul.dl_list { display: flex;justify-content: center; margin-top: 40px; gap: 20px; flex-wrap: wrap;} ul.dl_list li a { color: #de3f40; width: 230px; display: block; padding: 10px; background: #fff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); line-height: 200%;} ul.dl_list li a:before { content: "PDF"; display: inline-block; font-size: 0.6rem; color: #fff; width: 30px; height: 30px; margin-right: 10px; background: #de3f40; text-align: center;} div.company_soshiki { width: 90%; margin: 0 0 0 10%;} div.company_soshiki div.wrapper { display: flex;} table.company_tb02 th, table.company_tb02 td { padding: 0 0 20px 0; font-weight: normal;} table.company_tb02 td { padding-left: 50px;} div.company_soshiki_img { padding: 40px 10% 40px 40px; background: #fff; flex-grow: 2; margin-left: 10%;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);} div.company_soshiki_img img { max-width: 847px;} div.company_item img { width: 100%;} div.company_enkaku_img-w {position: relative; margin: 0 0 80px;} div.company_enkaku_img-w02 { margin-top: 80px;} div.company_enkaku_img-w span { display: inline-block; background: #fff; width: 250px; padding: 2px; text-align: center; position: absolute; right: 0; bottom: 0px; transform: translateY(50%); -webkit-transform: translateY(50%);} div.company_enkaku {display: flex;flex-direction: row-reverse;} table.company_tb03 { border-top: 1px solid #000;} table.company_tb03 th, table.company_tb03 td { border-bottom: 1px solid #000; padding: 30px 30px 15px;} table.company_tb03 tr.joint th, table.company_tb03 tr.joint td { border-bottom: none; padding: 30px 30px 0px;} table.company_tb03 th {background-color: rgba(0,0,0,0.05);} table.company_tb03 th { width: 150px;} table.company_tb03 td h3 { font-size: 1.25rem; margin-bottom: 15px; position: relative;} table.company_tb03 td h3 + h3 { margin-top: 20px;} table.company_tb03 td h3:before { content: ""; display: block; width: 12px; height: 1px; position: absolute; left: -18px; top: 15px; background: #000;} table.company_tb03 td p { margin-bottom: 20px;} div.company_enkaku_imglist { width: 425px; margin-left: 2.5vw;} div.company_enkaku_imglist div {position: relative; margin-bottom: 80px;} div.company_enkaku_imglist div span { display: inline-block; background: #fff; width: 250px; padding: 2px; text-align: center; position: absolute; right: 0; bottom: 0px; transform: translateY(50%); -webkit-transform: translateY(50%);} div.item_parts01 { width: 90%;} div.item_parts01 > h2 { padding-left: 5%;} div.item_parts_head { position: relative; padding: 80px 5vw; background: #fff;} div.item_parts_head h3 { max-width: 1364px; margin: 0px auto; font-size: 1.5rem; color: #00a82d;} div.item_parts_img { max-width: 1364px; margin: 0px auto;} div.item_parts_img img { width: 100%;} div.item_parts_body { display: flex;flex-wrap: wrap; margin-top: -80px; padding: 0px 5vw;} div.item_parts_list { width: 22%; margin: 0 0 80px 4%; } div.item_parts_list:first-child, div.item_parts_list:nth-child(5) { margin-left: 0; } div.item_parts_ph { position: relative;} div.item_parts_ph span { width: 40px; position: absolute; left: -20px; bottom: -15px;} div.item_parts_list h4 { font-size: 1.25rem; margin: 20px 0 15px; line-height: 100%;} div.item_parts02 { width: 90%; padding-top: 0; display: flex;flex-direction:row-reverse;} div.item_parts02_txt { width: 28%; padding-top: 80px; } div.item_parts02_ph { width: 72%; height: 462px; background: url(../img/company_sec03_img08.jpg) no-repeat center; background-size: cover; } div.item_parts02_txt h3 { padding: 40px 0 40px 5vw; background: #fff; font-size: 1.5rem; color: #00a82d; line-height: 100%;} div.item_parts02_txt h4 { padding: 20px 0 20px 5vw; font-size: 1.25rem; line-height: 100%;} div.item_parts02_txt ul { padding-left: 5vw; } @media screen and (max-width: 1200px) { ul.dl_list { margin-top: 60px; flex-wrap: wrap; } ul.dl_list li a { width: 300px; margin-top: 20px; } } @media screen and (max-width: 900px) { div.company_hd { width: 171px; height: 22px;} div.company_wrapper { padding-bottom: 50px; } div.company_wrapper h2 { font-size: 1.0rem; color: #00a82d; margin: 0 0 20px; line-height: 100%;} div.company_read { width: 95%; height: auto; margin-left: 5%; position: relative; } div.company_read_txt { width: 80vw; position: relative; text-align: center; margin: -30px 0 0 5vw; padding: 20px 5vw 25px; box-sizing: border-box; z-index: 3; transform: translateY(0%); -webkit-transform: translateY(0%); } div.company_read_ph { width: 100%; height: 230px; background: url(../img/company_sec01_hdimg.jpg) no-repeat left center; background-size: cover; position: relative;} div.company_read_wa { width: 80px; height: 70px; margin: 0px auto 20px;} div.company_read_txt p { font-size: 0.7rem; color: #fff; line-height: 200%; text-align: left;} div.company_read_ico { width: 163px; height: 163px; position: absolute; bottom: auto; top: 120px; left: -60px; z-index: 2;} div.company_item { width: 90%; margin: 0 auto; padding: 50px 0 0;} div#products.company_item { margin: 0px auto; padding: 50px 0 0;} div.company_rinen { width: 90%; margin: 0 auto; padding: 50px 0 0;} div.company_rinen_copy { height: auto; margin: 40px auto 20px; padding: 0 5vw;} div.company_rinen p { font-size: 0.8rem; line-height: 180%;} div.company_hdimg { height: 135px; margin-top: 50px;} table.company_tb01 th, table.company_tb01 td { font-size: 0.8rem; border-bottom: 1px solid #000; padding: 10px 20px; line-height: 180%;} table.company_tb01 th { padding-right: 0;} table.company_tb01 dl { display: block;} ul.dl_list { display: block; margin-top: 20px;} ul.dl_list li a { font-size: 0.8rem; color: #de3f40; width: 280px; display: block; margin: 10px auto; padding: 10px; background: #fff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); line-height: 200%; box-sizing: border-box;} ul.dl_list li a:before { content: "PDF"; display: inline-block; font-size: 0.6rem; color: #fff; width: 24px; height: 24px; margin-right: 10px; background: #de3f40; text-align: center;} div.company_soshiki div.wrapper { display: block;} table.company_tb02 { width: 100%; border-top: 1px solid #000; border-bottom: 1px solid #000;} table.company_tb02 th, table.company_tb02 td { font-size: 0.8rem; padding: 10px 20px 0; line-height: 180%;} table.company_tb02 tr:last-child th, table.company_tb02 tr:last-child td { padding-bottom: 10px;} table.company_tb02 th { width: 4em; padding-right: 0; } div.company_soshiki_img { padding: 20px 5%; margin: 20px 0 0;} div.company_enkaku_img-w {position: relative; margin: 0 0 40px;} div.company_enkaku_img-w02 { margin-top: 40px;} div.company_enkaku:first-child { margin-bottom: 40px;} div.company_enkaku_img-w span { font-size: 0.8rem; display: inline-block; background: #fff; width: 150px; padding: 0px; text-align: center; position: absolute; right: 0; bottom: 0px; transform: translateY(50%); -webkit-transform: translateY(50%);} div.company_enkaku { display: block;} div.company_enkaku_imglist { width: 100%; margin-left: 0; display: flex;} div.company_enkaku_imglist div { width: 33%; margin-bottom: 40px;} div.company_enkaku_imglist div span { font-size: 0.7rem; display: inline-block; background: #fff; width: 100%; padding: 2px 0; text-align: center; position: relative; transform: translateY(0); -webkit-transform: translateY(0);} table.company_tb03 { display: block; } table.company_tb03 th, table.company_tb03 td { font-size: 0.8rem; display: block; padding: 10px 30px; line-height: 180%;} table.company_tb03 tr.joint th, table.company_tb03 tr.joint td { padding: 10px 30px;} table.company_tb03 th { width: auto; border-bottom: none;} table.company_tb03 td { padding-bottom: 0;} table.company_tb03 td h3 { font-size: 0.8rem; margin-bottom: 10px; position: relative;} table.company_tb03 td h3:before { content: ""; display: block; width: 12px; height: 1px; position: absolute; left: -18px; top: 10px; background: #000;} table.company_tb03 td h3 + h3 { margin-top: 15px;} table.company_tb03 td p { margin-bottom: 15px;} div.item_parts01 { width: 90%; margin: 50px 0;} div.item_parts01 > h2 { padding-left: 0;} div.item_parts_head { width: 85vw; margin-left: -5vw; position: relative; padding: 40px 5vw; background: #fff;} div.item_parts_head h3 { font-size: 1.0rem; } div.item_parts_body { width: 90vw; display: block;flex-wrap: wrap; margin: 0px; padding: 0px;} div.item_parts_list { width: 100%; margin: 20px 0 ; } div.item_parts_ph span { width: 40px; position: absolute; left: 0px; bottom: -40px;} div.item_parts_list h4 { font-size: 0.8rem; margin: 20px 0 15px; padding-left: 50px;} div.item_parts_list p { font-size: 0.8rem; padding-left: 50px; line-height: 180%;} div.item_parts02 { width: 100vw; margin: 50px 0 0; padding-top: 80px; position: relative; display: block;} div.item_parts02_ph { width: 95vw; margin-left: 5vw; height: 149px; position: relative;z-index: 2;} div.item_parts02_txt { width: 100%; padding-top: 20px; } div.item_parts02_txt h3 { width: 95vw; padding: 40px 0 80px 5vw; background: #fff; font-size: 0.8rem; color: #00a82d; line-height: 100%; position: absolute; top: 0; box-sizing: border-box;} div.item_parts02_txt h4 { padding: 0 0 0 5vw; font-size: 0.8rem; line-height: 200%;} div.item_parts02_txt ul { font-size: 0.8rem; padding-left: 5vw; line-height: 200%; } } /*strength*/ div.common_hd > div.wrapper { display: flex; } div.facility_hd { width: 422px; height: 37px;} ul.local_navi { margin-left: 50px;} ul.local_navi li { display: inline-block;} ul.local_navi li a { display: inline-block; margin-right: 30px; padding: 0 0 0 35px; color: #de3f40; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 23px 23px;} ul.local_navi li.active a { border-bottom: 2px solid #de3f40;} div.strength_wrapper { padding-bottom: 200px;} div.strength_wrapper > main > div.wrapper { height: 1134px; position: relative;} div.strength_ph { width: 70%; height: 1134px;} div.strength_ph div.slick-slide { width: 100%; height: 1134px; } div.strength_ph01 { background: url(../img/strength_img01.jpg) no-repeat center; background-size: cover;} div.strength_ph02 { background: url(../img/strength_img02.jpg) no-repeat center; background-size: cover;} div.strength_ph03 { background: url(../img/strength_img03.jpg) no-repeat center; background-size: cover;} div.strength_ph04 { background: url(../img/strength_img04.jpg) no-repeat center; background-size: cover;} div.strength_ph05 { background: url(../img/strength_img05.jpg) no-repeat center; background-size: cover;} div.strength_ph06 { background: url(../img/strength_img06.jpg) no-repeat center; background-size: cover;} div.strength_ph07 { background: url(../img/strength_img07.jpg) no-repeat center; background-size: cover;} div.strength_ph08 { background: url(../img/strength_img08.jpg) no-repeat center; background-size: cover;} div.strength_copy { width: 553px; padding: 80px 0 80px 80px; position: absolute;right: 50px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 2; background: #fff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);} div.strength_copy p { line-height: 300%; margin-bottom: 2em;} div.strength_copy p:last-child { margin-bottom: 0;} @media screen and (max-width: 900px) { div.common_hd > div.wrapper { display: block; } div.facility_hd { width: 253px; height: 22px; margin-right: 50px;} ul.local_navi { display: flex; margin: 20px 0 0 0;flex-wrap: wrap; } ul.local_navi li a { font-size: 80%; margin-right: 15px; padding: 0 0 0 20px; background-size: 13px 13px;} ul.local_navi li:last-child a { margin-right: 0px;} div.strength_wrapper { padding-bottom: 50px;} div.strength_wrapper > main > div.wrapper { height: auto; } div.strength_ph { width: 90%; height: auto; margin: 0px auto; } div.strength_ph div.slick-slide { width: 100%; height: 350px;} div.strength_copy { font-size: 0.8rem; width: 80vw; margin: -40px auto 0; padding: 20px 20px; position: relative;right: auto; top: auto; transform: translateY(0); -webkit-transform: translateY(0); z-index: 2; background: #fff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); box-sizing: border-box;} .slick-dots { display: none!important;} } /*facility*/ div.facility_wrapper { width: 80%; margin: 0 auto; padding-bottom: 200px;} div.facility_item { display: flex; margin-bottom: 80px;flex-direction: row-reverse;} div.facility_item_txt { width: 47%;} div.facility_item_txt h2 { font-size: 1.8rem; font-weight: bold; color: #00a82d; margin-bottom: 40px; line-height: 100%;} div.facility_item_ph { width: 47%; margin-left: 6%;} ul.facility_item_phlist { display: flex; margin-top: 40px;} ul.facility_item_phlist li { width: 47%;} ul.facility_item_phlist li:first-child { margin-right: 6%;} div.facility_item img { width: 100%;} @media screen and (max-width: 900px) { div.facility_wrapper { width: 90%; margin: 0 auto; padding-bottom: 50px;} div.facility_item { display: block; margin-bottom: 40px;} div.facility_item_txt { width: 100%;} div.facility_item_txt h2 { font-size: 1.0rem; margin-bottom: 20px; } div.facility_item_txt p { font-size: 0.8rem; line-height: 175%; } div.facility_item_ph { width: 100%; margin-left: 0%; margin-bottom: 20px;} ul.facility_item_phlist { margin-top: 20px;} } /*recruit*/ div.recruit_wrapper { width: 80%; margin: 0 auto; padding-bottom: 200px;} div.recruit_wrapper h2 { font-size: 1.8rem; color: #00a82d;} div.recruit_hd { width: 258px; height: 37px; } div.recruit_item { border-top: 1px solid #000; border-bottom: 1px solid #000; margin: 40px 0 80px; display: flex; } div.recruit_item:last-child { margin-bottom: 0;} div.recruit_item_title { width: 230px; padding: 20px 30px; background: #f2f2f2; box-sizing: border-box; } div.recruit_item_title h3 { font-size: 1.25rem; line-height: 150%; margin-bottom: 20px;} div.recruit_item_body { width: 100%; padding: 0 0 0 40px; box-sizing: border-box;} div#newgrad { padding-top: 120px;} dl.data { width: 100%; border-bottom: 1px solid #000; display: flex;} dl.data:last-child { border-bottom: none;} dl.data dt, dl.data dd { padding: 20px 0; line-height: 180%; font-weight: normal;} dl.data dd { width: 100%;} dl.data dt { width: 200px;} dl.data:last-child dt, dl.data:last-child dd { border-bottom: none;} div.data_item { border-bottom: 1px solid #000; padding: 20px 0px; width: 100%;} div.data_item:first-child { padding: 0 0px 20px;} div.data_item:last-child { border-bottom: none; padding: 20px 0px 0;} @media screen and (max-width: 900px) { div.recruit_wrapper { width: 90%; margin: 0 auto; padding-bottom: 50px;} div.recruit_wrapper h2 { font-size: 1.2rem; } div.recruit_hd { width: 155px; height: 22px; } div.recruit_item { margin: 20px 0 40px; display: block; } div.recruit_item_title { width: 100%; display: flex;} div.recruit_item_body { width: 100%; padding: 0; } div.recruit_item_title h3 { font-size: 1.0rem; flex-grow: 2; margin-bottom: 0; } div#newgrad { padding-top: 40px;} dl.data { width: 100%; border-bottom: 1px solid #000; display: block;} dl.data dt, dl.data dd { font-size: 80%; padding: 20px; box-sizing: border-box; } dl.data dt { width: 100%; padding-bottom: 0;} dl.data dd { padding-top: 10px;} div.data_item { border-bottom: none; padding: 10px 0 0px!important;} } /*access*/ div.access_wrapper { width: 80%; margin: 0 auto; padding-bottom: 200px;} div.access_wrapper h2 { font-size: 1.8rem; color: #00a82d; margin-bottom: 40px;} div.access_hd { width: 232px; height: 37px; } div.access_item { position: relative; margin-top: 120px;} div.access_item:first-child { margin-top: 0;} div.access_address { width: 50%; background: #fff; position: absolute; bottom: 0px; right: 0px; padding: 30px; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); text-align: right; transform: translateY(40%); -webkit-transform: translateY(40%); } div.access_address a { margin-left: 20px; padding: 0 0 0 35px; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 23px 23px;} @media screen and (max-width: 900px) { div.access_wrapper { width: 90%; margin: 0 auto; padding-bottom: 100px;} div.access_wrapper h2 { font-size: 1.2rem; margin-bottom: 20px; } div.access_hd { width: 139px; height: 22px; } div.access_address { width: 80%; padding: 20px; } div.access_address a { display: inline-block; padding: 0 0 0 25px; background-size: 13px 13px; } div.access_item { font-size: 0.8rem;} } /*site*/ div.site_wrapper { width: 80%; margin: 0 auto; padding-bottom: 200px;} div.site_hd { width: 273px; height: 37px; } div.site_item { margin-top: 80px;} div.site_item:first-child { margin-top: 0;} div.site_item p { margin-top: 20px;} div.site_item h2 { font-size: 1.25rem; font-weight: bold;} div.site_item h3 { margin-top: 20px; font-weight: bold;} div.site_item h3 + p { margin-top: 0px;} @media screen and (max-width: 900px) { div.site_wrapper { width: 90%; margin: 0 auto; padding-bottom: 50px;} div.site_hd { width: 164px; height: 22px; } div.site_item { margin-top: 40px;} div.site_item p { margin-top: 10px;} div.site_item h2 { font-size: 1.0rem; } div.site_item h3, div.site_item p { font-size: 0.8rem; line-height: 180%; } } /*privacy*/ div.privacy_wrapper { width: 80%; margin: 0 auto; padding-bottom: 200px;} div.privacy_hd { width: 477px; height: 37px; } div.privacy_item { margin-top: 80px;} div.privacy_item:first-child { margin-top: 0;} div.privacy_item p { margin-top: 20px;} div.privacy_item h2 { font-size: 1.25rem; font-weight: bold;} div.privacy_date { text-align: right; margin-top: 80px;} @media screen and (max-width: 900px) { div.privacy_wrapper { width: 90%; margin: 0 auto; padding-bottom: 50px;} div.privacy_hd { width: 286px; height: 22px; } div.privacy_item { margin-top: 40px;} div.privacy_item p { margin-top: 10px; font-size: 0.8rem; line-height: 180%;} div.privacy_item h2 { font-size: 1.0rem; } div.privacy_date { margin-top: 40px;} div.privacy_date span { display: block; font-size: 0.8rem; line-height: 180%;} } /* security_action */ .security_action_wrapper {max-width: min(910px, 80%);} div.security_action_item { margin-top: 80px;} div.security_action_item:first-child { margin-top: 0;} div.security_action_item p + p { margin-top: 32px;} a.security_action_textlink{ color: #de3f40; transition: opacity .3s;} a.security_action_textlink:hover{ opacity: .5; } img.security_action_logo { float: right; margin-left: 20px; } @media screen and (max-width: 900px) { .security_action_wrapper { width: 95%; max-width: none;} div.security_action_item { margin-top: 40px;} div.security_action_item p { margin-top: 10px; font-size: 0.8rem; line-height: 180%;} div.security_action_item p + p { margin-top: 20px;} img.security_action_logo { margin-right: 33px; margin-left: 12px;} } /*dx*/ div.dx_wrapper { width: 80%; margin: 0 auto; padding-bottom: 200px;} div.dx_hd { width: 477px; height: 37px; } div.dx_hd img { height: 100%; } div.dx_item { margin-top: 80px;} div.dx_item:first-child { margin-top: 0;} div.dx_item .text_marginTop {margin-top: 25px;} div.dx_item p {text-shadow: 0 0 5px #fff;} div.dx_item h2 { font-size: 1.25rem; font-weight: bold; text-shadow: 0 0 8px #fff;} .dx_title { background-color: #ebf5ed; padding: 10px; border-bottom: 1px solid #00a82d;} div.dx_item h3 { font-size: 1.2rem; font-weight: bold; margin-top: 25px; text-shadow: 0 0 8px #fff;} div.dx_item h4 { font-size: 1.1rem; font-weight: bold; margin-top: 40px; text-shadow: 0 0 8px #fff;} div.dx_date { text-align: right; margin-top: 80px; text-shadow: 0 0 8px #fff; margin-right: 15%;} #information_security { scroll-margin-top: 120px;} .img-content {width: 100%; margin-top: 30px;} .img-content img {max-width: 100%;} @media screen and (max-width: 900px) { div.dx_wrapper { width: 90%; margin: 0 auto; padding-bottom: 50px;} div.dx_hd { width: 286px; height: 22px; } div.dx_item { margin-top: 40px;} div.dx_item p { margin-top: 10px; font-size: 0.8rem; line-height: 180%;} div.dx_item h2 { font-size: 1.0rem; } div.dx_date { margin-top: 40px;} div.dx_date span { display: block; font-size: 0.8rem; line-height: 180%;} .img-content {width: 100%;} } /*link*/ ul.global_nav li a:hover, div.top_interview_detail a:hover, div.top_interview_more a:hover, a:hover div.top_information_title, ul.footer_link a:hover, /*a.information_post:hover div.information_title,*/ div.sidebar_item li a:hover, div.paginetion a:hover, ul.local_navi a:hover { opacity: 0.5;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;} div.top_interview_thlist li.top_interview_more a:hover, div.top_information_more a:hover, div.recruit_btn a:hover, ul.dl_list a:hover{ opacity: 0.7;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;} div.top_interview_thlist2 div.slick-slide img, div.top_environment_item a img, a div.top_about_img img, a.information_post img, a.list_interview_item img, a.recommond_post img{ transform: scale(1); transition-duration: 4s; -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1); transition-timing-function: cubic-bezier(.075,.82,.165,1); transition-property: transform, -webkit-transform; } div.top_interview_thlist2 div.slick-slide:hover img, div.top_environment_item a:hover img, a:hover div.top_about_img img, a.information_post:hover img, a.list_interview_item:hover img, a.recommond_post:hover img{ transform: scale(1.1); } /* TOP バナー追加 23.04.03 */ .top_banners { display: flex; padding: 0 20px; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 20px; row-gap: 20px; } .home main > div > .top_banners { margin-top: 60px; } .home main > div > .top_banners + div { margin-top: 110px; } .top_banners_link { transition: opacity .3s; } .top_banners_link:hover { opacity: 0.5; } .top_banners img { max-width: 100%; } @media screen and (max-width: 900px) { .home main > div > .top_banners + div { margin-top: 60px; } } /* (終)TOP バナー追加 23.04.03 */ /* DX推進の取り組みバナー追加 26.06.17 */ .dx_banners { display: flex; padding: 0 20px; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 20px; row-gap: 20px; margin-top: 60px; } .home main > div > .dx_banners { margin-top: 60px; } .home main > div > .dx_banners + div { margin-top: 110px; } .dx_banners_link { transition: opacity .3s; } .dx_banners_link:hover { opacity: 0.5; } .dx_banners img { max-width: 100%; } @media screen and (max-width: 900px) { .home main > div > .dx_banners + div { margin-top: 60px; } } /* (終)DX推進の取り組みバナー追加 26.06.17 */ .recruit_lead{ margin-top: -40px; margin-bottom: 64px; } .recruit_vision{ background-color: #fff; box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.16); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; margin: auto; max-width: 960px; padding: 32px 20px; width: 100%; } .recruit_vision_heading.recruit_vision_heading{ color: #000000; font-size: 30px; font-weight: 700; margin-bottom: 40px; } .recruit_vision_img{ margin-bottom: 12px; text-align: center; width: 380px; } .recruit_vision_img img { width: 100%; height: auto; } .recruit_vision_link{ background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2023.6%2023.6%22%20style%3D%22enable-background%3Anew%200%200%2023.6%2023.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23D2413F%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M11.8%2C1c5.9%2C0%2C10.8%2C4.8%2C10.8%2C10.8s-4.8%2C10.8-10.8%2C10.8S1%2C17.7%2C1%2C11.8S5.8%2C1%2C11.8%2C1%20M11.8%2C0%20C5.3%2C0%2C0%2C5.3%2C0%2C11.8s5.3%2C11.8%2C11.8%2C11.8s11.8-5.3%2C11.8-11.8S18.3%2C0%2C11.8%2C0L11.8%2C0z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2217.7%2C11.8%207.7%2C13.3%207.7%2C10.2%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat left center; background-size: 19px; color: #de3f40 !important; display: inline-block; margin-left: 10px; padding-left: 24px; transition: opacity .3s; } .recruit_vision_link:hover{ opacity: 0.5; } @media screen and (max-width: 900px) { .recruit_lead{ margin-top: -20px; margin-bottom: 32px; } .recruit_vision{ padding-top: 24px; padding-bottom: 24px; } .recruit_vision_heading.recruit_vision_heading{ font-size: 22px; margin-bottom: 24px; } .recruit_vision_img{ width: clamp(240px, 50vw, 340px); } .recruit_vision_link{ font-size: 14px; } } /* TOP info追加 24.03.12 */ .top_news .top_common_hd_inner{ position: relative; display: inline-block; } a.top_news_more_btn{ position: absolute; top: 0; right: -227px; width: 192px; height: 49px; line-height: 49px; text-align: center; background-color: #DF3F41; font-family: 'Asap', sans-serif; background-image: url(../img/common/icon-bton-dec.svg); background-repeat: no-repeat; background-position: 31px center; background-size: 23px 23px; transition: 0.3s; } a.top_news_more_btn:hover{ background-color: #c32e30; } .top_news_more_btn span{ margin-left: 31px; color: #fff; } .top_news_container{ width: 80%; max-width: 1536px; margin: auto; background-color: #fff; box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1); } .top_news_item_wrap{ display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(3, 1fr); gap: 47px; padding: 70px 78px; } .top_news_item:hover .top_news_img img{ transform: scale(1.1); } .top_news_img{ max-width: 429px; margin-bottom: 16px; aspect-ratio: 429 / 281; overflow: hidden; } .top_news_item img{ width: 100%; transform: scale(1); transition-duration: 4s; -webkit-transition-timing-function: cubic-bezier(.075,.82,.165,1); transition-timing-function: cubic-bezier(.075,.82,.165,1); transition-property: transform, -webkit-transform; } .top_news_item .information_cat{ width: 120px; } .top_news_item .information_date{ /* font-family: 'Noto Sans JP '; */ font-style: normal; letter-spacing: 0; } .top_news_item .information_title{ font-size: 16px; } @media screen and (max-width: 1250px) { .top_news_item_wrap{ padding: 30px 38px; } .top_news_item .information_date{ position: static; text-align: left; } div.information_title{ margin: 0; } } @media screen and (max-width: 1024px) { .top_news_item_wrap{ grid-template-columns: repeat(2, 1fr); gap: 30px 30px; } } @media screen and (max-width: 900px) { .top_news_container{ margin: 60px auto 0; } .top_news{ margin-bottom: calc(200vw / 900* 100); } a.top_news_more_btn{ left: 0; top: 55px; width: 150px; height: 30px; line-height: 30px; background-position: 12px center; background-size: 17px 17px; } .top_news_more_btn span{ margin-left: 12px } } @media screen and (max-width: 600px) { .top_news_item_wrap{ grid-template-columns: repeat(1, 1fr); gap: 15px 30px; } .top_news{ margin-bottom: 0; } } /* 最新情報一覧追加 24.03.12 */ .sidebar_item li a{ white-space: nowrap; } @media screen and (max-width: 1100px) { .information_list .information_date{ position: static; text-align: left; } } @media screen and (max-width: 900px) { .information_list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media screen and (max-width: 500px) { .information_list{ display: block; } } /* ニュース詳細ページ 24.03.21 */ .information_single .information_title{ font-size: 2rem; } div.information_single h2{ position: relative; font-size: 1.625rem; font-weight: 500; padding-left: 8px; margin-bottom: 2.5rem; } div.information_single h2::before{ content: ""; position: absolute; left: 0; top: 5px; width: 4px; height: 23px; background-color: #00A82D; } div.information_single h3{ font-size: 1.4375rem; margin-bottom: 2.5rem; } div.information_single h4{ font-size: 1.25rem; margin-bottom: 2.5rem; } div.information_single h5{ font-size: 1.125rem; margin-bottom: 2.5rem; } div.information_single p a{ color: #DF3F41; transition: 0.3s; } div.information_single p a:hover{ opacity: 0.7; } .information_meta__article{ display: flex; gap: 20px; } .information_meta__article .information_date{ position: static; } .information_top_wrapper .top_btn{ display: flex; align-items: center; justify-content: center; min-width: 350px; width: calc(400vw / 1920 * 100); background-color: #DC8080; color: #fff; height: 80px; font-size: 1.25rem; font-family: 'Noto Sans JP', 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; } .information__paginetion{ display: flex; justify-content: center; } div.paginetion_prev{ top: 50%; transform: translateY(-50%); } div.paginetion_next{ top: 50%; transform: translateY(-50%); } @media screen and (max-width: 900px) { .information_top_wrapper .top_btn{ min-width: 145px; height: 40px; font-size: 0.875rem; } } /* TOP先輩インタビュー読み込み 24.04.02 */ div.top_interview_thlist2 div.slick-slide img{ width: 120px; height: 120px; object-fit: cover; } @media screen and (max-width: 900px) { div.top_interview_thlist2 div.slick-slide img{ width: calc(108vw / 900* 100); height: calc(108vw / 900* 100); } } @media screen and (max-width: 900px) { div.top_interview_thlist{ bottom: calc(10vw / 480* 100 + 225px); } } /* 会社情報 24.04.08 */ .company div.company_wrapper{ padding-bottom: 0; } /* 製品情報 24.5.020 */ div.item_parts_img__products{ max-width: 1535px; margin-bottom: clamp(30px, calc(60vw / 1920* 100), 60px); } div.item_parts_body__products{ position: relative; max-width: 1535px; margin: auto; } div.item_parts_body__products img{ width: 100%; } div.products_item__container .item_parts_head{ padding-top: clamp(30px, calc(80vw / 1920* 100), 80px); padding-bottom: clamp(30px, calc(80vw / 1920* 100), 80px); } @media screen and (max-width: 1400px) { .item_parts_img__products .pc_only{ display: none; } .item_parts_img__products .sp_only{ display: block; } } @media screen and (max-width: 900px) { div.products_item__container{ margin: 50px auto; } div.item_parts_body__products{ display: flex; gap: 20px; } div.item_parts_body__products .item_parts_list { width: calc((100% - 20px) / 2); } } @media screen and (max-width: 480px) { div.item_parts_body__products .item_parts_list { width: 100%; } div.products_hd img{ width: 100%; } } /* 最新情報 24.05.24 */ .single_body iframe{ width: 100%; height: 100%; aspect-ratio: 16/9; } /* 充実した施設・福利厚生 24.06.25 */ .p-facility{ margin-bottom: clamp(35px, calc(142vw / 1920 * 100), 142px); } .p-facility__lead{ display: flex; align-items: center; gap: calc(100vw / 1920 * 100); margin-bottom: clamp(60px, calc(80vw / 1920 * 100), 80px); } @media screen and (max-width: 900px) { .p-facility__lead{ flex-direction: column; } } div .p-facility__lead .facility_item_txt{ width: min(565px,100%); padding: 3px; margin-top: clamp(23px, calc(47vw / 1920 * 100), 47px); } .p-facility__title{ margin-bottom: 16px; font-size: 1.25rem; font-weight: 600; } @media screen and (max-width: 900px) { .p-facility__title{ font-size: 1.0rem; } } .p-facility__gridWrap{ flex: 1; min-width: 400px; margin-top: clamp(15px, calc(30vw / 1920 * 100), 30px); } @media screen and (max-width: 600px) { .p-facility__gridWrap{ min-width: auto; } } .p-facility__grid{ display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 6px; } .p-facility__grid img{ width: 100%; height: auto; vertical-align: middle; } .c-cards{ display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap:34px 56px; } @media screen and (max-width: 1024px) { .c-cards{ gap: 30px; } } @media screen and (max-width: 600px) { .c-cards{ grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr); } } .p-welfare .c-cards{ gap: 55px 56px; } @media screen and (max-width: 1024px) { .p-welfare .c-cards{ gap: 30px; } } .c-card img{ width: 100%; height: auto; vertical-align: middle; } .c-card__title{ margin-bottom: clamp(5px, calc(21vw / 1920 * 100), 21px); font-size: 1.25rem; } @media screen and (max-width: 900px) { .c-card__title{ font-size: 1.0rem; } } .c-card__text img{ display: none; } @media screen and (max-width: 900px) { .c-card__text{ font-size: 0.8rem; line-height: 175%; } } .c-card__wbg{ padding: 20px 30px 30px; background-color: #fff; } @media screen and (max-width: 600px) { .c-card__wbg{ padding: 20px 15px 30px; background-color: #fff; } } .c-small-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(63vw / 1920 * 100); margin-bottom: clamp(24px, calc(48vw / 1920 * 100), 48px); } @media screen and (max-width: 1200px) { .c-small-cards{ grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 600px) { .c-small-cards{ grid-template-columns: repeat(1, 1fr); } } .c-small-card__imgWrap{ position: relative; } .c-small-card__imgWrap img{ width: 100%; height: auto; vertical-align: middle; } .c-small-cards__title{ position: absolute; right: 0; bottom: 0; padding: 2px 20px; background-color: #fff; font-size: 1.25rem; } @media screen and (max-width: 900px) { .c-small-cards__title{ font-size: 1.0rem; } } @media screen and (max-width: 900px) { .c-small-cards__text{ font-size: 0.8rem; line-height: 175%; } } div .p-welfare__lead .facility_item_txt{ width: min(565px,100%); padding: 3px; margin-top: clamp(8px, calc(17vw / 1920 * 100), 17px); } .p-welfare__img img{ width: 100%; height: auto; vertical-align: middle; } .p-welfare__lead{ display: flex; align-items: center; gap: calc(105vw / 1920 * 100); margin-bottom: clamp(20px, calc(67vw / 1920 * 100), 67px); } @media screen and (max-width: 900px) { .p-welfare__lead{ flex-direction: column; } } /* 202609 先輩インタビュー　スケジュール追加・フッター改修 */ .interview_section.schedule { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 150px 0 80px 0; padding: 100px 0; } @media screen and (max-width: 900px) { .interview_section.schedule{ margin: 100px 0 40px 0; padding: 20px 0; } } @media screen and (max-width: 480px) { .interview_section.schedule{ margin: 50px 0 0 0; padding: 20px 0; } } .interview_section.schedule .schedule_txt { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 80px; } @media screen and (max-width: 900px) { .interview_section.schedule .schedule_txt{ margin-bottom: 60px; } } @media screen and (max-width: 750px) { .interview_section.schedule .schedule_txt{ margin-bottom: 40px; } } @media screen and (max-width: 480px) { .interview_section.schedule .schedule_txt{ margin-bottom: 15px; } } .interview_section.schedule .schedule_txt .hd_img { margin: -10px; max-width: 736px; width: 100%; display: flex; } .interview_section.schedule .schedule_txt .hd_img img { width: 100%; height: auto; margin: 0 auto; } @media screen and (max-width: 900px) { .interview_section.schedule .schedule_txt .hd_img img{ width: 70%; } } .interview_section.schedule .schedule_txt .hd { color: #00A82D; font-size: 2rem; font-weight: 700; } @media screen and (max-width: 900px) { .interview_section.schedule .schedule_txt .hd{ font-size: 1.5rem; } } @media screen and (max-width: 480px) { .interview_section.schedule .schedule_txt .hd{ font-size: 1rem; } } .interview_section.schedule .interview_schedule_ph { max-width: 860px; width: 100%; } .interview_section.schedule .interview_schedule_ph img { max-width: 860px; width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); } /* @media screen and (max-width: 900px) { .interview_section.schedule .schedule_txt .hd{ font-size: 1.5rem; } } */ .recommond_carousel { position: relative; width: 100%; min-width: 0; margin: -50px 0; } @media screen and (max-width: 900px) { .recommond_carousel { margin: -100px 0; } } /* .recommond_track_outer は使わなくなるので削除してOKです */ .recommond_track { list-style: none; margin: 0; padding: 0; } /* ここからSlickの余白調整（旧: calc(25% - 20px) 相当） */ .recommond_track .slick-list { margin: 0 -10px; } .recommond_track .slick-slide { margin: 0 10px; } @media screen and (max-width: 900px) { .recommond_track .slick-list { margin: 0 -14px; } .recommond_track .slick-slide { margin: 0 14px; } } @media screen and (max-width: 750px) { .recommond_track .slick-list { margin: 0 -16px; } .recommond_track .slick-slide { margin: 0 16px; } } @media screen and (max-width: 480px) { .recommond_track .slick-list { margin: 0 -11px; } .recommond_track .slick-slide { margin: 0 11px; } } .recommond_item { width: 100%; /* 幅はSlickが管理するので、枠いっぱいに広げるだけでOK */ box-sizing: border-box; } .recommond_item .recommond_post.clearfix { width: 100%; } @media screen and (max-width: 900px) { .recommond_item .recommond_post.clearfix { flex-direction: column; width: 100%; } } .recommond_interview_ph { width: 100%; overflow: hidden; position: relative; } div.top_interview_ini.slider { margin: 0; } .recommond_interview_ph img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 矢印まわりは変更なしでそのまま使えます */ .recommond_arrow { width: 30px; height: 62px; background: none; border: none; padding: 0; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; } @media screen and (max-width: 900px) { .recommond_arrow { width: 20px; height: 40px; } } @media screen and (max-width: 480px) { .recommond_arrow { width: 15px; height: 30px; } } .recommond_arrow img { width: 100%; height: 100%; display: block; } .recommond_arrow_prev { left: -10px; } .recommond_arrow_next { right: -10px; } .recommond_arrow[disabled], .recommond_arrow.slick-disabled { opacity: 0.3; cursor: default; } aside.recommond_list div.wrapper { display: block; } /* 202609　上松町の魅力 */ :root { --charm-title-color: #00A82D; --charm-text-color: #000000; --charm-box-bg: #FFFFFF; } .charm_wrapper { margin-bottom: 200px; overflow-x: hidden; } /* ---------- ヘッダー ---------- */ .p-charm__header { overflow: hidden; } .p-charm__header img { width: 100%; min-width: 1200px; margin-left: 50%; transform: translateX(-50%); } /* ---------- セクション共通 ---------- */ .p-charm__section { position: relative; margin-top: 240px; } .p-charm__mainImg { display: block; width: 100vw; max-width: 100vw; /* height: auto; */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .p-charm__textBox { position: relative; z-index: 1; width: 100%; max-width: 919px; min-height: 287px; margin: -96px auto 0; padding: 55px 69px 70px; background: var(--charm-box-bg); box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .p-charm__title { color: var(--charm-title-color); font-size: 32px; font-weight: 700; margin-bottom: 40px; } .p-charm__text { color: var(--charm-text-color); font-size: 16px; font-weight: 500; line-height: 1.8; } .p-charm__thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin: 32px auto 0; } .p-charm__thumbs img { display: block; flex: 0 0 auto; width: 548px; height: 339px; object-fit: cover; } .p-charm__sightseeing { padding-top: 40px; } .p-charm__label-img { width: 80%; height: auto; margin-left: calc(50% - 50vw); margin-bottom: -20px; position: relative; z-index: 2; } @media screen and (min-width: 901px) { .p-charm__label-img { width: calc(0.8 * (100% - 597px)); } } .p-charm__sightseeingRow { display: flex; align-items: center; margin: 0 auto; } .p-charm__sightseeingRow .charm_slider { flex: 1 1 auto; min-width: 0; } /* スライド1枚分のコンテナ。キャプションをこの中で絶対配置するための基準にします */ .charm_slider__item { position: relative; } .charm_slider__item img { display: block; width: 100%; height: auto; object-fit: cover; } /* キャプション：PCでは右下に表示。色・サイズは仮の値です */ .charm_slider__caption { position: absolute; right: 0px; bottom: 0px; left: auto; top: auto; margin: 0; padding: 6px 14px; background: #FFF; color: var(--charm-text-color); font-size: 16px; font-weight: 500; z-index: 2; } .charm_slider .slick-dots li button:before { font-size: 10px; color: #FFFFFF; opacity: 0.7; } .charm_slider .slick-dots li.slick-active button:before { color: #FFFFFF; opacity: 1; } @media screen and (min-width: 901px) { .p-charm__sightseeing .p-charm__textBox { flex: none; width: 100%; max-width: 597px; height: 100%; min-height: 323px; position: relative; left: -35px; z-index: 2; } } /* ---------- レスポンシブ ---------- */ /* SIGHTSEEINGだけ900px基準で切り替え（他セクションと同じく縦積みに） */ @media screen and (max-width: 900px) { .p-charm__header img { min-width: 900px; } .charm_wrapper { margin-bottom: 130px; } .p-charm__section { margin-top: 150px; } .p-charm__sightseeingRow { flex-direction: column; align-items: stretch; } /* 左右20pxのマージンはここでまとめて指定します（767px側では上書きしません） */ .p-charm__textBox { width: auto; max-width: none; margin: -35px 20px 0; /* 上-35px／左右20px */ padding: 35px 30px 40px; } /* サムネイルを縦一列に固定。左右20pxのマージンを確保しつつ画面幅に応じて縮小 */ .p-charm__thumbs { flex-direction: column; align-items: center; } .p-charm__thumbs img { width: calc(100% - 40px); /* 左右20pxずつ確保 */ max-width: 548px; /* 元のサイズより大きくはしない */ height: auto; aspect-ratio: 548 / 339; } /* SP（スマホ幅）ではキャプションを右上に切り替え */ .charm_slider__caption { top: 0px; right: 0px; bottom: auto; left: auto; font-size: 12px; padding: 4px 10px; } } /* スマホ幅：全セクション共通のテキストボックス調整 （SIGHTSEEINGもここでは同じルールが適用されます） */ @media screen and (max-width: 767px) { .charm_wrapper { margin-bottom: 80px; } .p-charm__header img { min-width: 650px; } .p-charm__section { margin-top: 80px; } /* 左右20pxは900px側の指定を維持したまま、上の重なりとpaddingだけ上書き */ .p-charm__textBox { margin-top: -20px; margin-left: 20px; margin-right: 20px; padding: 25px; } .p-charm__title { font-size: 22px; margin-bottom: 20px; } .p-charm__text { font-size: 14px; } .charm_slider__item img { height: 260px; } }