@charset "utf-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; height: auto; vertical-align: bottom; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* base */ :root { --root-font-size: 16; } body { background: #F5F5F5; color: #45577E; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", sans-serif; font-optical-sizing: auto; font-size: calc( 14 / var(--root-font-size) * 1rem ); font-style: normal; font-weight: 500; letter-spacing: 0; line-height: 1; overscroll-behavior-y: none; } html,body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { animation-name: fadeIn; animation-duration: 1s; } body.active { overflow: hidden; height:100%; } a {color: #45577E; text-decoration: none;} a:hover {color: #FF7EB9; text-decoration: none;} a:hover img { filter: alpha(opacity=70); -khtml-opacity: 0.7; -moz-opacity: 0.7; opacity: 0.7; } a, a:hover, a img, a:hover img { transition: 0.5s 0s; } .clear {clear: both;} .clearfix:after { content: ""; display: block; clear: both; } ::selection { background: #FFF; color: #FF7EB9; } ::-moz-selection { background: #FFF; color: #FF7EB9; } /* layout */ #wrap { width: 100%; margin: 0 auto; } .pc { display: block; } .sp { display: none; } @media screen and (max-width: 960px) { .pc { display: none; } .sp { display: block; } } /*----- common -----*/ main { display: block; /* IE */ } .subTtl { position: relative; font-size: calc( 30 / var(--root-font-size) * 1rem ); font-weight: 600; line-height: 1.5; text-align: center; padding: 0 0 25px; margin: 0 0 75px; } .subTtl.white { color: #FFF; } .subTtl::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 30px; height: 2px; background: #45577E; margin: 0 auto; } .subTtl.white::before { background: #FFF; } .subTtl span.round { position: relative; } .subTtl span.round::before { content: ""; position: absolute; top: 0; bottom: 0; right: -40px; width: 60px; height: 60px; background: rgba(49, 114, 191, 0.15); border-radius: 50%; margin: auto 0; } .subTtl.white span.round::before { background: rgba(255, 255, 255, 0.15); } .subTtl span.round.gray::before { background: #F5F5F5; } .subTtl span.round.white::before { background: #FFF; } .subTtl span.round span { position: relative; z-index: 9; } div.flexWrap { display: flex; } div.flexWrap.content { justify-content: space-between; width: 90%; max-width: 900px; margin: 0 auto; } div.flexWrap.content div.imgBlock { width: 45%; } div.flexWrap.content div.imgBlock img { border-radius: 10px; } div.flexWrap.content div.txtBlock { width: 50%; } div.flexWrap.content div.txtBlock .ttl { width: 100%; font-size: calc( 34 / var(--root-font-size) * 1rem ); font-weight: 600; text-align: left; padding: 0 0 25px; } div.flexWrap.content div.txtBlock .txt { width: 100%; line-height: 1.75; text-align: left; } .btn { position: relative; display: flex; align-items: center; justify-content: center; width: 240px; height: 66px; background: #3172BE; border-radius: 33px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); transition: 0.5s 0s; } .btn.white { background: #FFF; } .btn.border { background: #FFF; border: #3172BE solid 2px; } .btn.center { margin: 0 auto; } header .btn.entry { width: 15vw; max-width: 180px; } header .btn.contact { width: 8.75vw; max-width: 105px; } .btn:hover { background: #FF7EB9; } div.recruitWrap .btn:hover, div.contactWrap .btn:hover { background: #45577E; } .btn.border:hover { background: #3172BE; } .btn.arrow::before { content: ""; position: absolute; top: 0; bottom: 0; right: 17px; width: 32px; height: 32px; background: url("../images/arrow1.png") no-repeat center center; background-size: cover; transform: rotate(270deg); margin: auto 0; transition: 0.5s 0s; } .btn.arrow.white::before { background: url("../images/arrow2.png") no-repeat center center; background-size: cover; } .btn.arrow:hover::before { background: url("../images/arrow1.png") no-repeat center center; background-size: cover; } .btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .btn p, .btn input { color: #FFF!important; font-size: calc( 16 / var(--root-font-size) * 1rem )!important; text-align: center!important; transition: 0.5s 0s; } .btn.white p, .btn.border p, .btn.border input { color: #3172BE!important; } .btn.arrow p { width: 180px!important; text-align: left!important; padding: 0 32px 0 0!important; } .btn:hover p, .btn:hover input { color: #FFF!important; } .btn p.entry, .btn p.contact { position: relative; padding: 0 25px 0 50px; } .btn.entry p.entry { position: relative; padding: 0 15px 0 45px; } .btn p.entry, .btn.contact p.contact { font-size: calc( 10 / var(--root-font-size) * 1rem )!important; line-height: 1.5; } header .btn p.entry, header .btn.contact p.contact { font-size: min(0.7vw, calc( 10.5 / var(--root-font-size) * 1rem ))!important; } .btn p.entry span { font-size: calc( 18 / var(--root-font-size) * 1rem )!important; } header .btn p.entry span { font-size: min(1.2vw, calc( 18 / var(--root-font-size) * 1rem ))!important; } .btn.contact p.contact { padding: 30px 0 0; } .btn p.entry::before, .btn p.contact::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30px; height: 30px; margin: auto 0; transition: 0.5s 0s; } .btn.contact p.contact::before { top: 0; bottom: inherit; left: 0; right: 0; width: 30px; height: 30px; margin: 0 auto; } .btn p.entry::before { background: url("../images/icon_entry_w.png") no-repeat center center; background-size: cover; } .btn p.contact::before { background: url("../images/icon_contact_b.png") no-repeat center center; background-size: cover; } .btn:hover p.contact::before { background: url("../images/icon_contact_w.png") no-repeat center center; background-size: cover; } .btnWrap { display: flex; justify-content: center; } .btnWrap .btn { margin: 0 30px; } div#slider_horizontal { position: relative; width: 100%; } div#slider_horizontal ul.slider img { width: 100%;/*スライダー内の画像を横幅100%に*/ height: auto; border-radius: 10px; } /*slickのJSで書かれるタグ内、スライド左右の余白調整*/ div#slider_horizontal ul.slider .slick-slide { margin: 0 min(1vw, 15px);/*スライド左右の余白調整*/ } @media screen and (max-width: 960px) { .subTtl { position: relative; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 600; line-height: 1.5; text-align: center; padding: 0 0 25px; margin: 0 0 50px; } .subTtl.white { color: #FFF; } .subTtl::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 30px; height: 2px; background: #45577E; margin: 0 auto; } .subTtl.white::before { background: #FFF; } .subTtl span.round { position: relative; } .subTtl span.round::before { content: ""; position: absolute; top: 0; bottom: 0; right: -40px; width: 60px; height: 60px; background: rgba(49, 114, 191, 0.15); border-radius: 50%; margin: auto 0; } .subTtl.white span.round::before { background: rgba(255, 255, 255, 0.15); } .subTtl span.round.gray::before { background: #F5F5F5; } .subTtl span.round.white::before { background: #FFF; } .subTtl span.round span { position: relative; z-index: 9; } div.flexWrap { display: flex; } div.flexWrap.content { flex-wrap: wrap; justify-content: center; width: 90%; max-width: 900px; margin: 0 auto; } div.flexWrap.content div.imgBlock { width: 100%; margin: 0 0 25px; } div.flexWrap.content div.imgBlock img { border-radius: 10px; } div.flexWrap.content div.txtBlock { width: 100%; margin: 0 0 25px; } div.flexWrap.content div.txtBlock .ttl { width: 100%; font-size: calc( 24 / var(--root-font-size) * 1rem ); font-weight: 600; text-align: left; padding: 0 0 25px; } div.flexWrap.content div.txtBlock .txt { width: 100%; line-height: 1.75; text-align: left; } .btn { position: relative; display: flex; align-items: center; justify-content: center; width: 240px; height: 66px; background: #3172BE; border-radius: 33px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); transition: 0.5s 0s; } .btn.white { background: #FFF; } .btn.pink { background: #FF7EB9; } .btn.border { background: #FFF; border: #3172BE solid 2px; } .btn.center { margin: 0 auto; } header .btn.entry { width: 15vw; max-width: 180px; } header .btn.contact { width: 8.75vw; max-width: 105px; } .btn:hover { background: #FF7EB9; } div.recruitWrap .btn:hover, div.contactWrap .btn:hover { background: #45577E; } .btn.border:hover { background: #3172BE; } .btn.arrow::before { content: ""; position: absolute; top: 0; bottom: 0; right: 17px; width: 32px; height: 32px; background: url("../images/arrow1.png") no-repeat center center; background-size: cover; transform: rotate(270deg); margin: auto 0; transition: 0.5s 0s; } .btn.arrow.white::before { background: url("../images/arrow2.png") no-repeat center center; background-size: cover; } .btn.arrow:hover::before { background: url("../images/arrow1.png") no-repeat center center; background-size: cover; } .btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .btn p, .btn input { color: #FFF!important; font-size: calc( 16 / var(--root-font-size) * 1rem )!important; text-align: center!important; transition: 0.5s 0s; } .btn.white p, .btn.border p, .btn.border input { color: #3172BE!important; } .btn.arrow p { width: 180px!important; text-align: left!important; padding: 0 32px 0 0!important; } .btn:hover p, .btn:hover input { color: #FFF!important; } .btn p.entry, .btn p.contact { position: relative; padding: 0 25px 0 50px; } .btn.entry p.entry { position: relative; padding: 0 15px 0 45px; } .btn p.entry, .btn.contact p.contact { font-size: calc( 10 / var(--root-font-size) * 1rem )!important; line-height: 1.5; } header .btn p.entry, header .btn.contact p.contact { font-size: min(0.7vw, calc( 10.5 / var(--root-font-size) * 1rem ))!important; } .btn p.entry span { font-size: calc( 18 / var(--root-font-size) * 1rem )!important; } header .btn p.entry span { font-size: min(1.2vw, calc( 18 / var(--root-font-size) * 1rem ))!important; } .btn.contact p.contact { padding: 30px 0 0; } .btn p.entry::before, .btn p.contact::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30px; height: 30px; margin: auto 0; transition: 0.5s 0s; } .btn.contact p.contact::before { top: 0; bottom: inherit; left: 0; right: 0; width: 30px; height: 30px; margin: 0 auto; } .btn p.entry::before { background: url("../images/icon_entry_w.png") no-repeat center center; background-size: cover; } .btn p.contact::before { background: url("../images/icon_contact_b.png") no-repeat center center; background-size: cover; } .btn:hover p.contact::before { background: url("../images/icon_contact_w.png") no-repeat center center; background-size: cover; } .btnWrap { display: flex; flex-wrap: wrap; justify-content: center; } .btnWrap .btn { margin: 10px 15px; } div#slider_horizontal { position: relative; width: 100%; } div#slider_horizontal ul.slider img { width: 100%;/*スライダー内の画像を横幅100%に*/ height: auto; border-radius: 10px; } /*slickのJSで書かれるタグ内、スライド左右の余白調整*/ div#slider_horizontal ul.slider .slick-slide { margin: 0 min(1vw, 15px);/*スライド左右の余白調整*/ } } /*----- header -----*/ header { position: fixed; top: 0; left: 0; z-index: 9999; height: 90px; } header ul li { line-height: 1.5; } header .site-header { box-sizing: content-box; position: fixed; top: 0; left: 0; width: 100%; } header .site-header div.inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1500px; height: 130px; padding: 0 2.5%; margin: 0 auto; transition: 0.5s 0s; } header .site-header.fixed-header div.inner { height: 90px; } header .site-header .logo { width: 20vw; max-width: 240px; transition: 0.5s 0s; } header .site-header.fixed-header .logo { width: 210px; } header nav, header nav ul { display: flex; align-items: center; justify-content: flex-end; } header nav { width: calc(100% - min(21.5vw, 262.5px)); padding: 0 calc(66px + min(1.5vw, 22.5px)) 0 0; } header nav ul li { align-content: center; height: 54px; border-right: #45577E dashed 2px; } header nav ul li:last-child { border-right: none; } header nav ul li p { font-size: min(0.7vw, calc( 10.5 / var(--root-font-size) * 1rem )); padding: 0 min(1.5vw, 22.5px); } header nav ul li p.en { font-size: min(1.4vw, calc( 21 / var(--root-font-size) * 1rem )); } header nav div.btn { margin: 0 0 0 min(1.5vw, 22.5px); } @media screen and (max-width: 960px) { header { position: fixed; top: 0; left: 0; z-index: 9999; padding: 15px 0; height: 93px; } header .logo { width: 180px; max-width: 180px; margin: 0 5vw; } } /*----- main -----*/ /*----- recruit -----*/ div.recruitWrap { position: relative; width: 100%; background: #3172BF; color: #FFF; padding: 0 0 130px; margin: 300px auto 0; } div.recruitWrap::before { content: ""; position: absolute; top: -375px; left: 0; right: 0; z-index: -1; width: 100%; height: 375px; background: url("../images/bg_ribbon_footer.png") no-repeat center top; background-size: 1920px 630px; margin: 0 auto; } div.recruitWrap div.inner { position: relative; width: 90%; max-width: 750px; margin: 0 auto; } div.recruitWrap div.inner::before { content: ""; position: absolute; top: max(-16vw, -240px); left: max(-16vw, -240px); width: 24vw; max-width: 360px; height: 24vw; max-height: 360px; background: url("../images/recruitWrap_img.png") no-repeat center top; background-size: cover; } div.recruitWrap div.flexWrap { position: relative; z-index: 9; justify-content: space-between; width: 100%; background: #FF7EB9; border-radius: 20px; padding: 25px 75px; } div.recruitWrap div.flexWrap div.flexL, div.recruitWrap div.flexWrap div.flexR { display: flex; align-items: center; } div.recruitWrap div.flexWrap div.flexL { width: calc(100% - 315px); } div.recruitWrap div.flexWrap div.flexL p.txt { line-height: 1.75; padding: 0 0 15px; } div.recruitWrap div.flexWrap div.flexL p.ttl { font-size: calc( 34 / var(--root-font-size) * 1rem ); line-height: 1.25; } div.recruitWrap div.flexWrap div.flexR { width: 240px; } div.recruitWrap div.flexWrap div.flexR div.btn { margin: 20px 0; } @media screen and (max-width: 960px) { div.recruitWrap { position: relative; width: 100%; background: #3172BF; color: #FFF; padding: 25px 0 95px; margin: 237.5px auto 0; } div.recruitWrap::before { content: ""; position: absolute; top: -187.5px; left: 0; right: 0; z-index: -1; width: 100%; height: 187.5px; background: url("../images/bg_ribbon_footer.png") no-repeat center top; background-size: 960px 315px; margin: 0 auto; } div.recruitWrap .subTtl { margin: 0 0 min(36vw, 135px); } div.recruitWrap div.inner { position: relative; width: 80%; max-width: 750px; margin: 0 auto; } div.recruitWrap div.inner::before { content: ""; position: absolute; top: max(-36vw, -135px); left: max(-8vw, -30px); width: 48vw; max-width: 180px; height: 48vw; max-height: 180px; background: url("../images/recruitWrap_img.png") no-repeat center top; background-size: cover; } div.recruitWrap div.flexWrap { position: relative; z-index: 9; flex-wrap: wrap; justify-content: center; width: 100%; background: #FF7EB9; border-radius: 20px; padding: 25px 7.5vw; } div.recruitWrap div.flexWrap div.flexL, div.recruitWrap div.flexWrap div.flexR { display: flex; align-items: center; justify-content: center; } div.recruitWrap div.flexWrap div.flexL { width: 240px; } div.recruitWrap div.flexWrap div.flexL p.txt { line-height: 1.75; padding: 0 0 15px; } div.recruitWrap div.flexWrap div.flexL p.ttl { font-size: calc( 24 / var(--root-font-size) * 1rem ); line-height: 1.5; } div.recruitWrap div.flexWrap div.flexR { width: 240px; } div.recruitWrap div.flexWrap div.flexR div.btn { margin: 20px 0; } } /*----- contact -----*/ div.contactWrap { position: relative; width: 100%; background: #FF7EB9; border-top-left-radius: 30px; border-top-right-radius: 30px; color: #FFF; padding: 75px 0; margin: -30px 0 0; } div.contactWrap div.flexWrap { width: 90%; max-width: 750px; margin: 0 auto; } div.contactWrap div.flexWrap div.flexL, div.contactWrap div.flexWrap div.flexR { width: 50%; padding: 20px 2.5%; } div.contactWrap div.flexWrap div.flexL { border-right: #FFF dashed 2px; } div.contactWrap div.flexWrap p.ttl { line-height: 1.5; font-weight: 700; text-align: center; padding: 0 0 25px; } div.contactWrap div.flexWrap p.ttl span { position: relative; padding: 0 30px 0 0; } div.contactWrap div.flexWrap p.ttl span::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 23px; height: 23px; background: url("../images/arrow3.png") no-repeat center center; background-size: contain; margin: auto 0; } @media screen and (max-width: 960px) { div.contactWrap { position: relative; width: 100%; background: #FF7EB9; border-top-left-radius: 20px; border-top-right-radius: 20px; color: #FFF; padding: 50px 0 75px; margin: -20px 0 0; } div.contactWrap div.flexWrap { flex-wrap: wrap; width: 80%; max-width: 750px; margin: 0 auto; } #g-nav div.flexWrap { flex-wrap: wrap; width: 100%; } div.contactWrap div.flexWrap div.flexL, div.contactWrap div.flexWrap div.flexR, #g-nav div.flexWrap div.flexL, #g-nav div.flexWrap div.flexR { width: 100%; padding: 0; } div.contactWrap div.flexWrap div.flexL { border-right: none; border-bottom: #FFF dashed 2px; padding: 0 0 50px; margin: 0 0 50px; } #g-nav div.flexWrap div.flexL { margin: 0 0 20px; } div.contactWrap div.flexWrap p.ttl, #g-nav div.flexWrap p.ttl { line-height: 1.5; font-weight: 700; text-align: center; padding: 0 0 25px; } #g-nav div.flexWrap p.ttl { padding: 0 0 10px; } div.contactWrap div.flexWrap p.ttl span, #g-nav div.flexWrap p.ttl span { position: relative; padding: 0 30px 0 0; } div.contactWrap div.flexWrap p.ttl span::after, #g-nav div.flexWrap p.ttl span::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 23px; height: 23px; background: url("../images/arrow3.png") no-repeat center center; background-size: contain; margin: auto 0; } #g-nav div.flexWrap p.ttl span::after { background: url("../images/arrow1.png") no-repeat center center; background-size: contain; } } /*----- news -----*/ section#news { padding: 100px 0 180px; } main#news { } main#news div.single { width: 90%; max-width: 900px; padding: 0 0 180px; margin: 0 auto; } main#news div.single article { width: 100%; background: #FFF; border-radius: 20px; padding: 50px 7.5% 100px; } main#news div.single article div.content { } main#news div.single article div.content p { line-height: 2; margin: 0 0 25px; } main#news div.single article div.content img { max-width: 100%; height: auto; margin: 0 0 25px; } main#news div.single article div.content .youtube { width: 100%; position: relative; padding-top: 56.25%; margin: 0 0 25px; } main#news div.single article div.content .youtube iframe { width: 100% !important; height: 100% !important; position: absolute; top: 0; right: 0; } main#news div.single article div.content .wp-caption { max-width: 100%; } main#news div.container { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; width: 90%; max-width: 1200px; padding: 0 0 225px; margin: 0 auto; } main#news div.container aside { overflow: hidden; width: 22.5%; background: #FFF; border-radius: 20px; } main#news div.container aside p.ttl { background: #3172BE; color: #FFF; padding: 15px 25px; } main#news div.container aside p.ttl span { position: relative; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 0 0 25px; } main#news div.container aside p.ttl span::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14px; height: 14px; background: #FF7EB9; border-radius: 50%; margin: auto 0; } main#news div.container aside ul { padding: 15px 25px; } main#news div.container aside ul li a { position: relative; display: inline-block; font-size: calc( 16 / var(--root-font-size) * 1rem ); line-height: 32px; padding: 0 0 0 50px; margin: 10px 0; } main#news div.container aside ul li a::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 32px; background: #A1AABD; border-radius: 50%; } main#news div.container aside ul li a.is-active::before { background: url("../images/check.png") no-repeat center center; background-size: cover; } section#news div.archive, main#news div.container div.archive { width: 70%; } section#news div.archive { margin: 0 auto; } section#news div.archive article, main#news div.container div.archive article { position: relative; background: #FFF; border-radius: 20px; padding: 30px calc(15% + 32px) 30px 7.5%; margin: 0 0 30px; } section#news div.archive article:last-of-type { margin: 0 0 75px; } main#news div.container div.archive article:last-of-type { margin: 0; } section#news div.archive article::after, main#news div.container div.archive article::after { content: ""; position: absolute; top: 0; bottom: 0; right: 7.5%; width: 32px; height: 32px; background: url("../images/arrow2.png") no-repeat center center; background-size: cover; margin: auto 0; transform: rotate(-90deg); transition: 0.5s 0s; } section#news div.archive article:hover::after, main#news div.container div.archive article:hover::after { right: calc(7.5% - 5px); } section#news div.archive article a, main#news div.container div.archive article a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } section#news div.archive article .ttl, section#news div.archive article p, main#news div.container div.archive article .ttl, main#news div.container div.archive article p { transition: 0.5s 0s; } section#news div.archive article:hover .ttl, section#news div.archive article:hover p, main#news div.container div.archive article:hover .ttl, main#news div.container div.archive article:hover p { color: #FF7EB9; } section#news div.archive article .ttl, main#news div.container div.archive article .ttl, main#news div.single article .ttl { font-size: calc( 24 / var(--root-font-size) * 1rem ); line-height: 1.5; padding: 15px 0; } main#news div.single article .ttl { border-bottom: #45577E solid 2px; padding: 25px 0; margin: 0 0 50px; } section#news div.archive article div.flexWrap, main#news div.container div.archive article div.flexWrap, main#news div.single article div.flexWrap { align-items: center; } section#news div.archive article div.flexWrap ul, main#news div.container div.archive article div.flexWrap ul, main#news div.single article div.flexWrap ul { display: flex; margin: 0 0 0 10px; } section#news div.archive article div.flexWrap ul li, main#news div.container div.archive article div.flexWrap ul li, main#news div.single article div.flexWrap ul li { position: relative; background: #45577E; border-radius: 12px; color: #FFF; line-height: 24px; text-align: center; padding: 0 20px; margin: 0 10px; transition: 0.5s 0s; } main#news div.single article div.flexWrap ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } section#news div.archive article:hover div.flexWrap ul li, main#news div.container div.archive article:hover div.flexWrap ul li { background: #FF7EB9; } #pagenation, .pagenation { width: 100%; } #pagenation { margin: 100px 0 0; } #pagenation ul { display: flex; justify-content: center; } #pagenation ul li { font-size: calc( 24 / var(--root-font-size) * 1rem ); margin: 0 1em!important; } #pagenation ul li span.current { color: #FF7EB9 } .pagenation { display: flex; justify-content: center; border-top: #45577E dashed 2px; padding: 75px 0 0; margin: 75px 0 0; } .pagenation div.prev, .pagenation div.back, .pagenation div.next { margin: 0 30px; } .pagenation div.back { width: 240px; padding: 5px 0 0; } @media screen and (max-width: 960px) { section#news { padding: 50px 0 130px; } main#news { } main#news div.single { width: 90%; max-width: 900px; padding: 0 0 180px; margin: 0 auto; } main#news div.single article { width: 100%; background: #FFF; border-radius: 20px; padding: 25px 5vw 50px; } main#news div.single article div.content { } main#news div.single article div.content p { line-height: 2; margin: 0 0 25px; } main#news div.single article div.content img { max-width: 100%; height: auto; margin: 0 0 25px; } main#news div.container { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; width: 90%; max-width: 1200px; padding: 0 0 225px; margin: 0 auto; } main#news div.container aside { overflow: hidden; order: 3; width: 100%; background: #FFF; border-radius: 20px; } main#news div.container aside p.ttl { background: #3172BE; color: #FFF; padding: 15px 5vw; } main#news div.container aside p.ttl span { position: relative; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 0 0 25px; } main#news div.container aside p.ttl span::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14px; height: 14px; background: #FF7EB9; border-radius: 50%; margin: auto 0; } main#news div.container aside ul { padding: 15px 5vw; } main#news div.container aside ul li a { position: relative; display: inline-block; font-size: calc( 16 / var(--root-font-size) * 1rem ); line-height: 32px; padding: 0 0 0 50px; margin: 10px 0; } main#news div.container aside ul li a::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 32px; background: #A1AABD; border-radius: 50%; } main#news div.container aside ul li a.is-active::before { background: url("../images/check.png") no-repeat center center; background-size: cover; } section#news div.archive, main#news div.container div.archive { width: 100%; } section#news div.archive { width: 90%; margin: 0 auto; } section#news div.archive article, main#news div.container div.archive article { position: relative; background: #FFF; border-radius: 20px; padding: 25px calc(7.5vw + 32px) 25px 5vw; margin: 0 0 30px; } section#news div.archive article:last-of-type { margin: 0 0 50px; } main#news div.container div.archive article:last-of-type { margin: 0; } section#news div.archive article::after, main#news div.container div.archive article::after { content: ""; position: absolute; top: 0; bottom: 0; right: 5vw; width: 32px; height: 32px; background: url("../images/arrow2.png") no-repeat center center; background-size: cover; margin: auto 0; transform: rotate(-90deg); transition: 0.5s 0s; } section#news div.archive article:hover::after, main#news div.container div.archive article:hover::after { right: calc(7.5% - 5px); } section#news div.archive article a, main#news div.container div.archive article a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } section#news div.archive article .ttl, section#news div.archive article p, main#news div.container div.archive article .ttl, main#news div.container div.archive article p { transition: 0.5s 0s; } section#news div.archive article:hover .ttl, section#news div.archive article:hover p, main#news div.container div.archive article:hover .ttl, main#news div.container div.archive article:hover p { color: #FF7EB9; } section#news div.archive article .ttl, main#news div.container div.archive article .ttl, main#news div.single article .ttl { font-size: calc( 18 / var(--root-font-size) * 1rem ); line-height: 1.5; padding: 15px 0; } main#news div.single article .ttl { border-bottom: #45577E solid 2px; padding: 15px 0; margin: 0 0 25px; } section#news div.archive article div.flexWrap, main#news div.container div.archive article div.flexWrap, main#news div.single article div.flexWrap { align-items: center; } section#news div.archive article div.flexWrap ul, main#news div.container div.archive article div.flexWrap ul, main#news div.single article div.flexWrap ul { display: flex; margin: 0; } section#news div.archive article div.flexWrap ul li, main#news div.container div.archive article div.flexWrap ul li, main#news div.single article div.flexWrap ul li { position: relative; background: #45577E; border-radius: 12px; color: #FFF; line-height: 24px; text-align: center; padding: 0 10px; margin: 0 10px; transition: 0.5s 0s; } main#news div.single article div.flexWrap ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } section#news div.archive article:hover div.flexWrap ul li, main#news div.container div.archive article:hover div.flexWrap ul li { background: #FF7EB9; } #pagenation, .pagenation { width: 100%; } #pagenation { margin: 25px 0 75px; } #pagenation ul { display: flex; justify-content: center; } #pagenation ul li { font-size: calc( 18 / var(--root-font-size) * 1rem ); margin: 0 1em!important; } #pagenation ul li span.current { color: #FF7EB9 } .pagenation { display: flex; justify-content: center; border-top: #45577E dashed 2px; padding: 25px 0 0; margin: 50px 0 0; } .pagenation div.prev, .pagenation div.back, .pagenation div.next { margin: 0 30px; } .pagenation div.back { width: 240px; padding: 5px 0 0; } } /*----- footer -----*/ footer { width: 80%; max-width: 1200px; padding: 50px 0 25px; margin: 0 auto; } footer p, footer ul li { line-height: 1.5; } footer .logo { width: 240px; } footer nav { display: flex; flex-wrap: wrap; padding: 50px 0 0; } footer ul { margin: 0 min(2vw, 30px) min(2vw, 30px) 0; } footer ul li { } footer ul li p { font-size: calc( 12 / var(--root-font-size) * 1rem ); padding: 0 0 0 20px; margin: 0 0 25px; } footer ul li p.en { position: relative; font-size: calc( 24 / var(--root-font-size) * 1rem ); margin: 0; } footer ul li p.en::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 12px; height: 12px; background: #FF7EB9; border-radius: 50%; margin: auto 0; } footer ul li ul li { position: relative; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 0 0 20px; margin: 0 0 10px; } footer ul li ul li:last-child { margin: 0; } footer ul li ul li::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 7px; height: 7px; border: 0; border-top: #45577E solid 1px; border-right: #45577E solid 1px; transform: rotate(45deg); margin: auto 0; } footer .copyright { font-size: calc( 10 / var(--root-font-size) * 1rem ); font-weight: 600; line-height: 25px; text-align: center; } @media screen and (max-width: 960px) { footer { width: 80%; max-width: 1200px; padding: 25px 0; margin: 0 auto; } footer p, footer ul li, #g-nav ul li { line-height: 1.5; } footer .logo { width: 210px; margin: 0 auto; } footer nav { display: flex; flex-wrap: wrap; padding: 25px 0 50px; } footer ul { width: 100%; margin: 0; } footer ul.short { display: flex; } footer ul li { } footer ul.short li { margin: 0 50px 0 0; } footer ul.short li:last-child { margin: 0; } footer ul li a.ttl, #g-nav ul li a.ttl { display: flex; align-items: baseline; margin: 0 0 10px; } #g-nav ul li a.ttl { margin: 0; } footer ul li p, #g-nav ul li p { font-size: calc( 12 / var(--root-font-size) * 1rem ); padding: 0 0 0 20px; margin: 0; } footer ul li p.en, #g-nav ul li p.en { position: relative; font-size: calc( 24 / var(--root-font-size) * 1rem ); margin: 0; } footer ul li p.en::before, #g-nav ul li p.en::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 12px; height: 12px; background: #FF7EB9; border-radius: 50%; margin: auto 0; } footer ul li ul { margin: 0 0 40px; } footer ul li ul li { position: relative; font-size: calc( 14 / var(--root-font-size) * 1rem ); padding: 0 0 0 20px; margin: 0 0 10px 20px; } footer ul li ul li:last-child { margin: 0 0 0 20px; } footer ul li ul li::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 7px; height: 7px; border: 0; border-top: #45577E solid 1px; border-right: #45577E solid 1px; transform: rotate(45deg); margin: auto 0; } footer .copyright { font-size: calc( 10 / var(--root-font-size) * 1rem ); font-weight: 600; line-height: 25px; text-align: center; } } .grecaptcha-badge {visibility: hidden;} /*----- sp nav -----*/ /*アクティブになったエリア*/ #g-nav { /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/ position: fixed; z-index: -1; /*ナビのスタート位置と形状*/ top: -125%; right: 0; width: 100%; height: 100vh;/*ナビの高さ*/ max-height: inherit; background: #3172BE; color: #FFF; transition: all 0.5s; } /*アクティブクラスがついたら透過なしにして最前面へ*/ #g-nav.panelactive { top: 0; z-index: 99999; } /*ナビゲーションの縦スクロール*/ #g-nav.panelactive #g-nav-list { /*ナビの数が増えた場合縦スクロール*/ position: fixed; z-index: 99999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } /*ナビゲーション*/ #g-nav div.inner { width: 80%; margin: min(20vw, 75px) auto; opacity: 0;/*はじめは透過0*/ } /*背景が出現後にナビゲーションを表示*/ #g-nav.panelactive div.inner { opacity: 1; } #g-nav a { color: #FFF; } #g-nav ul { max-width: 900px; margin: 0 auto 30px; } #g-nav ul li { padding: 0 0 10px; } /*ボタンの設定*/ .openbtn { position: fixed; z-index: 100000;/*ボタンを最前面に*/ top: 30px; right: 30px; display: inline-block; width: 50px; height: 50px; background: #FF7EB9; border-radius: 50%; cursor: pointer; appearance: none; transition: all 0.5s; } .openbtn.active { } .openbtn span { display: inline-block; box-sizing: border-box; position: absolute; left: 0; right: 0; width: 20px; height: 2px; background: #FFF; border-radius: 1px; margin: 0 auto; transition: all 0.5s; } .openbtn.active span { } .openbtn span:nth-of-type(1) { top: 0; bottom: 8px; margin: auto; animation: menu-bar1 0.5s forwards; } .openbtn span:nth-of-type(2) { top: 8px; bottom: 0; margin: auto; animation: menu-bar2 0.5s forwards; } .openbtn.active span:nth-of-type(1) { animation: menu-active-bar1 0.5s forwards; } .openbtn.active span:nth-of-type(2) { animation: menu-active-bar2 0.5s forwards; } #scrollNav { position: fixed; left: 0; bottom: -50px; z-index: 9999; display: flex; justify-content: space-between; width: 100%; height: 50px; background: #FFF; } #scrollNav div { position: relative; width: 100%; background: #000; padding: 0 5vw; } #scrollNav div p { color: #EFE3DA; font-size: calc( 12 / var(--root-font-size) * 1rem ); text-align: center; text-indent: 0.1em; } #scrollNav div p:first-of-type { font-size: calc( 15 / var(--root-font-size) * 1rem ); padding: 0 5px 0 0; } #scrollNav div a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @keyframes menu-bar1 { 0% { transform: translateY(4px) rotate(45deg); } 50% { transform: translateY(4px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } @keyframes menu-bar2 { 0% { transform: translateY(-4px) rotate(-45deg); } 50% { transform: translateY(-4px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } @keyframes menu-active-bar1 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(4px) rotate(0); } 100% { transform: translateY(4px) rotate(45deg); } } @keyframes menu-active-bar2 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(0); } 100% { transform: translateY(-4px) rotate(-45deg); } } /* fadeUp */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 1.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(75px); } to { opacity: 1; transform: translateY(0); } } /* スクロールをしたら出現する要素にはじめに透過0を指定　*/ .fadeUpTrigger { opacity: 0; } @keyframes scroll_bar { 0% {top: 30px;} 100% {top: 130px;} } @keyframes scroll_barhide { 0% {opacity: 0;} 10% {opacity: 1;} 50% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }