@charset "UTF-8"; /* IEハック用mixin */ /* ////////////////////////////////////// - reset ////////////////////////////////////// */ abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video { margin: 0; padding: 0; border: 0; outline: 0; font-weight: 400; text-decoration: none; vertical-align: baseline; background: 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } ol, ul { list-style: none; list-style-position: inside; } blockquote, q { quotes: none; } blockquote:after, blockquote:before { content: ''; content: none; } q:after, q:before { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: 0 0; text-decoration: none; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: 700; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } body { font-family: "Helvetica Neue", "Helvetica", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", Meiryo, sans-serif; font-weight: 500; color: #333333; line-height: 1.5; } .main { background-color: #F2F2F2; min-width: 1170px; padding-bottom: 68px; } @media screen and (max-width: 768px) { .main { min-width: auto; padding-bottom: 50px; } } .main .pcNone { display: none; } @media screen and (max-width: 768px) { .main .pcNone { display: inline-block; } } @media screen and (max-width: 768px) { .main .spNone { display: none; } } picture { line-height: 0; } @media screen and (max-width: 768px) { picture { width: 100%; } } section { background-color: #ffffff; width: 1170px; margin: 0 auto 15px; } @media screen and (max-width: 768px) { section { width: 100%; } } .keyvisual { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; min-width: 1170px; width: 100%; height: 500px; } @media screen and (max-width: 768px) { .keyvisual { min-width: inherit; background: none; height: auto; } } .keyvisual div.title_area { position: absolute; top: 0; left: 0; background-color: #ffffff; border-radius: 0 0 95px 0; display: inline-block; margin: 116px 0 0 16px; padding: 50px 78px 50px 36px; z-index: 1; } @media screen and (max-width: 768px) { .keyvisual div.title_area { position: static; border-radius: 0; text-align: center; width: 100%; margin: 0; padding: 63% 0 26px; } } @media screen and (max-width: 480px) { .keyvisual div.title_area { padding: 65% 0 26px; } } .keyvisual div.slide_area { position: relative; width: 100%; height: 100%; } .keyvisual div.slide_area ul.slide { position: relative; width: 100%; height: 100%; } .keyvisual div.slide_area .slide_list li { position: absolute; background-position: 50% 50%; background-size: cover; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transition: 2s all; transition: 2s all; z-index: 0; } @media screen and (max-width: 768px) { .keyvisual div.slide_area .slide_list li { padding-top: 60%; z-index: 2; } } .keyvisual div.slide_area .slide_list li.slide01 { background-image: url(../img/kv_01.jpg); } @media screen and (max-width: 768px) { .keyvisual div.slide_area .slide_list li.slide01 { background-image: url(../img/kv_01_sp.jpg); } } .keyvisual div.slide_area .slide_list li.slide02 { background-image: url(../img/kv_02.jpg); } @media screen and (max-width: 768px) { .keyvisual div.slide_area .slide_list li.slide02 { background-image: url(../img/kv_02_sp.jpg); } } .keyvisual div.slide_area .slide_list li img { position: absolute; display: none; } @media screen and (max-width: 768px) { .keyvisual div.slide_area .slide_list li img { display: block; width: 100%; } } .keyvisual h1 { font-size: 32px; font-size: 2rem; font-weight: bold; line-height: 1.2; margin: 0 0 10px; } @media screen and (max-width: 768px) { .keyvisual h1 { font-size: 21px; font-size: 1.3125rem; } } .keyvisual p { font-size: 16px; font-size: 1rem; } @media screen and (max-width: 768px) { .keyvisual p { font-size: 14px; font-size: 0.875rem; } } .section_movie { background: -webkit-gradient(linear, left top, right top, from(#F8AF00), color-stop(33.3%, #F8AF00), color-stop(33.3%, #ffffff), to(#ffffff)); background: linear-gradient(90deg, #F8AF00 0%, #F8AF00 33.3%, #ffffff 33.3%, #ffffff 100%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding: 50px 30px 30px; } @media screen and (max-width: 768px) { .section_movie { background: -webkit-gradient(linear, left top, left bottom, from(#F8AF00), color-stop(33.3%, #F8AF00), color-stop(33.3%, #ffffff), to(#ffffff)); background: linear-gradient(180deg, #F8AF00 0%, #F8AF00 33.3%, #ffffff 33.3%, #ffffff 100%); -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .section_movie div { width: calc(100% / 2); } @media screen and (max-width: 768px) { .section_movie div { width: calc(100%); } } .section_movie .text_area_1 { padding: 100px 30px 0 30px; } @media screen and (max-width: 768px) { .section_movie .text_area_1 { text-align: center; padding: 24px 0 0; } } .section_movie .text_area_2 { padding: 0 30px 0 90px; } @media screen and (max-width: 768px) { .section_movie .text_area_2 { padding: 24px 0 0; } } .section_movie .movie_area_wrap { position: relative; width: 100%; padding-top: 56.25%; } .section_movie .movie_area_wrap iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .section_movie a { font-size: 18px; font-size: 1.125rem; color: #333333; } @media screen and (max-width: 768px) { .section_movie a { font-size: 14px; font-size: 0.875rem; } } .section_movie a::before { content: ""; background-image: url(../img/ico_arrow_left.png); background-repeat: no-repeat; background-size: auto; background-position: 0px 0px; display: inline-block; vertical-align: middle; margin-right: 13px; width: 9px; height: 15px; } @media screen and (max-width: 768px) { .section_movie a::before { background-size: 100% auto; -webkit-transform: rotate(90deg); transform: rotate(90deg); margin: -5px 13px 0 0; width: 6px; height: 10px; } } .section_movie h2 { font-size: 28px; font-size: 1.75rem; font-weight: bold; margin-bottom: 10px; } @media screen and (max-width: 768px) { .section_movie h2 { font-size: 21px; font-size: 1.3125rem; } } .section_movie h3 { font-size: 20px; font-size: 1.25rem; font-weight: bold; margin: 0 auto 24px; } @media screen and (max-width: 768px) { .section_movie h3 { text-align: center; } } .section_movie ul { font-size: 14px; font-size: 0.875rem; } .section_movie li { text-indent: -25px; margin: 0 0 12px 25px; } @media screen and (max-width: 768px) { .section_movie li { margin: 0 0 10px 25px; } } .section_movie li::before { content: ""; background-image: url(../img/ico_check.png); background-repeat: no-repeat; background-size: auto; background-position: 0px 0px; display: inline-block; vertical-align: middle; margin-right: 13px; width: 12px; height: 9px; } @media screen and (max-width: 768px) { .section_movie li::before { background-size: 100% auto; margin-right: 8px; width: 9px; height: 6px; } } .section_movie .notes { font-size: 12px; font-size: 0.75rem; margin-top: 8px; } .section_center { text-align: center; padding: 48px 35px 42px; } @media screen and (max-width: 768px) { .section_center { font-size: 20px; font-size: 1.25rem; padding: 24px; } } .section_center h3 { font-size: 22px; font-size: 1.375rem; font-weight: bold; border-top: 2px solid #1965E1; border-bottom: 2px solid #1965E1; display: inline-block; letter-spacing: 0.1em; margin: 0 auto 28px; padding: 5px 5px; } @media screen and (max-width: 768px) { .section_center h3 { font-size: 20px; font-size: 1.25rem; padding: 5px 25px; } } .section_center h4 { color: #1965E1; font-size: 18px; font-size: 1.125rem; font-weight: bold; margin: 16px auto; } @media screen and (max-width: 768px) { .section_center p { font-size: 14px; font-size: 0.875rem; } } .section_center ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-line-pack: start; align-content: flex-start; margin: 30px auto 0; } @media screen and (max-width: 768px) { .section_center ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; } } .section_center li { width: 324px; } @media screen and (max-width: 768px) { .section_center li { width: 100%; text-align: center; margin-bottom: 25px; } } .section_center li img { width: 178px; height: auto; } .section_center li p { font-size: 14px; font-size: 0.875rem; text-align: left; } @media screen and (max-width: 768px) { .section_center li p { text-align: center; } } .section_center sup { position: relative; top: -10px; } .section_center .notes { font-size: 12px; font-size: 0.75rem; margin-top: 40px; } @media screen and (max-width: 768px) { .section_center .notes { margin: 20px auto 0; } } .section_right div, .section_left div { padding: 34px 30px 0 30px; } @media screen and (max-width: 768px) { .section_right div, .section_left div { padding: 24px; } } .section_right h3, .section_left h3 { font-size: 20px; font-size: 1.25rem; font-weight: bold; margin: 0 auto 24px; } @media screen and (max-width: 768px) { .section_right h3, .section_left h3 { font-size: 18px; font-size: 1.125rem; text-align: center; } } .section_right p, .section_right ul, .section_left p, .section_left ul { font-size: 14px; font-size: 0.875rem; } @media screen and (max-width: 768px) { .section_right p, .section_left p { text-align: center; } } .section_right li, .section_left li { text-indent: -25px; margin: 0 0 12px 25px; } .section_right li::before, .section_left li::before { content: ""; background-image: url(../img/ico_check.png); background-repeat: no-repeat; background-size: auto; background-position: 0px 0px; display: inline-block; vertical-align: middle; margin-right: 13px; width: 12px; height: 9px; } @media screen and (max-width: 768px) { .section_right li::before, .section_left li::before { background-size: 100% auto; margin-right: 8px; width: 9px; height: 6px; } } .section_right img, .section_left img { width: calc(100%); } .section_right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media screen and (max-width: 768px) { .section_right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .section_right div { width: calc(100% / 2); } @media screen and (max-width: 768px) { .section_right div { width: calc(100%); } } .section_left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-line-pack: start; align-content: flex-start; } @media screen and (max-width: 768px) { .section_left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .section_left div { width: calc(100% / 3); } @media screen and (max-width: 768px) { .section_left div { width: calc(100%); } } .section_left.case1 div { padding: 34px 30px; } .section_left.case1 picture { max-width: 780px; height: 404px; overflow: hidden; } @media screen and (max-width: 768px) { .section_left.case1 picture { height: auto; } } .section_left.case1 img { width: auto; height: 100%; } @media screen and (max-width: 768px) { .section_left.case1 img { width: 100%; height: auto; } } .section_ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: stretch; align-content: stretch; text-align: center; width: 1170px; margin: 30px auto 15px; } @media screen and (max-width: 768px) { .section_ul { width: calc(100%); margin: 15px auto 0; } } .section_ul li { background-color: #ffffff; width: calc(380px); margin-bottom: 15px; min-height: 490px; padding: 0 0 30px; } @media screen and (max-width: 768px) { .section_ul li { width: calc(100%); min-height: inherit; } } .section_ul img { width: 100%; height: auto; } @media screen and (max-width: 768px) { .section_ul img { max-width: 750px; } } .section_ul h4 { font-size: 18px; font-size: 1.125rem; font-weight: bold; margin-bottom: 15px; } .section_ul p { font-size: 14px; font-size: 0.875rem; padding: 0 30px; } .section_dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: stretch; align-content: stretch; width: 1170px; margin: 0 auto 25px; } @media screen and (max-width: 768px) { .section_dl { width: calc(100%); } } .section_dl dt, .section_dl dd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 60px; margin-bottom: 5px; padding: 10px 23px; } @media screen and (max-width: 768px) { .section_dl dt, .section_dl dd { min-height: 45px; margin-bottom: 0; } } .section_dl dt { background-color: #333333; color: #ffffff; font-size: 18px; font-size: 1.125rem; font-weight: bold; width: 336px; } @media screen and (max-width: 768px) { .section_dl dt { font-size: 17px; font-size: 1.0625rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc(100%); } } .section_dl dd { background-color: #ffffff; font-size: 14px; font-size: 0.875rem; width: calc(100% - 336px); } @media screen and (max-width: 768px) { .section_dl dd { width: calc(100%); } } .link_block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: center; align-content: center; width: 1170px; margin: 0 auto 0; } @media screen and (max-width: 768px) { .link_block { margin: 40px 30px 0; width: calc(100% - 60px); } } .link_block li { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(50% - 20px); } @media screen and (max-width: 768px) { .link_block li { width: calc(100%); } } .link_block li:first-of-type { margin-right: 20px; } @media screen and (max-width: 768px) { .link_block li:first-of-type { margin-right: 0; margin-bottom: 20px; } } .link_block li:last-of-type { margin-left: 20px; } @media screen and (max-width: 768px) { .link_block li:last-of-type { margin-left: 0; } } .link_block a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ffffff; border: 1px solid #1965E1; color: #1965E1; font-size: 18px; font-size: 1.125rem; font-weight: bold; width: 100%; min-height: 60px; position: relative; } @media screen and (max-width: 768px) { .link_block a { min-height: 40px; } } .link_block a::after { content: ""; display: block; background-image: url(../img/ico_arrow_right.png); background-repeat: no-repeat; width: 9px; height: 15px; position: absolute; top: 0; bottom: 0; right: 50px; margin: auto; } @media screen and (max-width: 768px) { .link_block a::after { background-size: 100% auto; width: 6px; height: 10px; } } .keyvisual { position: relative; } .banner_area { background-color: #ffffff; max-width: 1200px; width: 100%; margin: 0 auto 15px; } @media screen and (max-width: 768px) { .banner_area { max-width: none; width: 100%; } } .banner_area a { display: block; } .banner_area picture { display: block; } .banner_area img { width: 100%; height: auto; } /* 追加 ここから */ #slider { position: relative; } .slider_view { position: relative; margin: 10px auto 30px; width: 1200px; height: 120px; overflow: hidden; } @media screen and (max-width: 768px) { .slider_view { max-width: 750px; width: 100%; height: 80vw; } } .slider_container { position: absolute; top: 0; left: 0; } .slider_container div { position: relative; float: left; width: 1200px; height: 120px; } .slider_container div picture { display: block; } .slider_container div img { width: 100%; height: auto; } @media screen and (max-width: 768px) { .slider_container div { max-width: 750px; width: 100vw; height: 80vw; } } .slider_pagination { position: absolute; top: 124px; left: 0; right: 0; margin: auto; width: 80px; } @media screen and (max-width: 768px) { .slider_pagination { top: calc(80vw + 4px); } } .slider_pagination a { float: left; margin: 5px 5px 0; border-radius: 5px; width: 10px; height: 10px; overflow: hidden; background: #ccc; text-indent: -9999px; vertical-align: middle; } .slider_pagination a:hover { background: #ccc; } .slider_pagination a.current { background-color: #1965E1; } /* 追加 ここまで */ /* ////////////////////////////////////// - IE対策 ////////////////////////////////////// */ @media all and (-ms-high-contrast: none) { picture { display: inline-block; height: 100%; } } /*# sourceMappingURL=maps/style.css.map */