Server : Apache/2.4.43 (Win64) OpenSSL/1.1.1g PHP/7.4.6 System : Windows NT USER-PC 6.1 build 7601 (Windows 7 Professional Edition Service Pack 1) AMD64 User : User ( 0) PHP Version : 7.4.6 Disable Function : NONE Directory : C:/Users/User/AppData/Local/Google/Chrome/User Data/Default/Cache/Cache_Data/ |
@charset "UTF-8"; /* ----------------------------------------------------------- Reset ----------------------------------------------------------- */ html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, code, del, dfn, em, figure, img, ins, small, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:0; outline:0; font-size:100%; vertical-align:baseline; margin:0; padding:0; } html { overflow-x:hidden; } body { line-height:1em; } ol, ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } table, table th, table td { border-collapse:collapse; border-spacing:0; border:none; } a { text-decoration:none; outline:none; } img { vertical-align:bottom; } hr { display:none; } address { font-style:normal; } /* ----------------------------------------------------------- Default ----------------------------------------------------------- */ body { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; font-style: normal; color: #261E19; /*line-height: 1.75em;*/ line-height: 1.75; _display: inline; _zoom: 1; -webkit-text-size-adjust: 100%; position:relative; } .fot-tsukub { font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 400; } .fot-tsukub-bold { font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; } /* ----------------------------------------------------------- Style ----------------------------------------------------------- */ .bg { background: #F7F7F7; } .bg-nona { background: #F8F2CC; } .bg-sdgs { background: #EAF4F8; } .row { display: flex; flex-wrap: wrap; } .inner { display: inline-block; } .post-grids > li, .post-sliders > li { flex-direction: column; margin-top: 5em; } .post-grids > li a, .post-sliders > li a { display: flex; flex-direction: column; } .post-grids > li a:hover, .post-sliders > li a:hover { text-decoration: none; } .mt-0 { margin-top: 0; } .mt-1em { margin-top: 1em; } .mt-2em { margin-top: 2em; } .mt-3em { margin-top: 3em; } .mt-5em { margin-top: 5em; } .mt-6em { margin-top: 6em; } .mt-30 { margin-top: 1.875em; } .mt-40 { margin-top: 2.5em; } .mt-50 { margin-top: 3.125em; } .mt-60 { margin-top: 3.75em; } .mt-80 { margin-top: 5em; } .mt-100 { margin-top: 6.25em; } .mb-1em { margin-bottom: 1em; } .mb-2em { margin-bottom: 2em; } .mb-3em { margin-bottom: 3em; } .mb-5em { margin-bottom: 5em; } .mb-40 { margin-bottom: 2.5em; } .mb-50 { margin-bottom: 3.125em; } .mb-60 { margin-bottom: 3.75em; } .btn-container { display: flex; align-items: flex-start; flex-direction: column; } ul.btn-container li { margin-top: 1.25em; } ul.btn-container li:nth-child(1) { margin-top: 0; } .btn { border-radius: 10px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: auto; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #fff; line-height: 1.5em; padding-top: 0.375em; padding-bottom: 0.375em; -webkit-transition:all 0.25s ease; transition:all 0.25s ease; } .btn-center { margin: auto; } .btn:hover { opacity: 0.85; text-decoration: none; } .btn-cv { background: #81AF79; padding-right: 1.625em; padding-left: 1.625em; } .btn-border { border: 2px solid #3F4667; color: #3F4667; padding-right: 1.375em; padding-left: 1.375em; } .btn-border:hover { background: #3F4667; color: #fff; opacity: 1; } .btn-border-gray { border: 2px solid #636363; color: #636363; padding-right: 1.375em; padding-left: 1.375em; } .btn-border-gray:hover { background: #636363; color: #fff; opacity: 1; } .btn-nona { background: #CBB578; padding-right: 2.5em; padding-left: 2.5em; } .btn-sdgs { background: #0089D2; padding-right: 1.5em; padding-left: 1.5em; } #headline { font-size: 250%; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #3F4667; text-align: center; line-height: 1.75em; margin-bottom: 1.25em; } .heading01 { font-size: 250%; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #3F4667; text-align: center; line-height: 1.75em; margin-bottom: 1.75em; } .heading02 { font-size: 200%; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #3F4667; letter-spacing: 0.0625em; line-height: 1.75em; margin-top: 3.25em; margin-bottom: 1.875em; } .heading02 .sub { display: block; font-size: 68.75%; letter-spacing: normal; line-height: 1.75em; margin-bottom: 0.5em; } .heading02 .sub.en { border-bottom: 2px solid #3F4667; display: inline-block; } .heading02 .text-main { display: block; } .heading02:nth-child(1) { margin-top: 0; } .heading02.num { counter-increment: cnt; display: flex; flex-wrap: wrap; align-items: center; width: 100%; position: relative; } .heading02.num::before { background: #3F4667; border-radius: 0.7em; content: ""counter(cnt, decimal)""; width: 1.4em; height: 1.4em; font-size: 140%; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #fff; text-align: center; line-height: 1.4em; position: relative; z-index: 5; } .heading02.num .inner { width: calc(100% - 0.78125em - 1.96875em); margin-left: 0.78125em; } .heading03 { font-size: 175%; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; line-height: 1.75em; margin-bottom: 1.8125em; position: relative; } .heading04 { font-size: 150%; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; line-height: 1.75em; margin-bottom: 2.125em; } .heading05 { font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #3F4667; margin-bottom: 1.875em; } .heading05 span.text-sub { display: block; line-height: 1em; margin-bottom: 0.5625em; } .heading05 span.text-main { display: block; font-size: 150%; line-height: 1em; } .balloon { font-weight: 400; font-size: 60%; line-height: 1em; padding: 0 1em 0.75em; position: absolute; top: 0; } .balloon::before, .balloon::after { background: #3F4667; content:""; width:1px; height:100%; position:absolute; top:0; } .balloon::before { transform:rotate(-40deg); left:0; } .balloon::after { transform:rotate(40deg); right:0; } .balloon-left { transform:rotate(-10deg); left: 0; } .balloon-right { transform:rotate(10deg); right: 0; } .title-grids { font-size: 112.5%; } .subheading01 { font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #3F4667; text-align: center; line-height: 1.625em; margin-bottom: 3.75em; } .subheading01 span { border-right: 1px solid #777D9D; border-left: 1px solid #777D9D; display: inline-block; padding: 0 1.5em; } .subheading02 { background: #777D9D; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #fff; text-align: center; line-height: 1.75em; margin: 5em 0 2em; padding: 0.3em 1em; } .subheading02:nth-child(1) { margin-top: 0; } .subheading03 { border-bottom: 1px solid #3F4667; font-weight: 700; margin-top: 6.25em; margin-bottom: 1.25em; padding-bottom: 0.5625em; } .marker { background:#F8F2CC; -webkit-box-decoration-break:clone; box-decoration-break:clone; font-size: 125%; font-style: normal; line-height: 1.75em; padding:0.125em 0.25em; } .text-28 { font-size: 175%; } .text-24 { font-size: 150%; } .text-22 { font-size: 137.5%; } .text-20 { font-size: 125%; } .text-18 { font-size: 112.5%; } .text-15 { font-size: 93.75%; } .text-14 { font-size: 87.5%; } .text-13 { font-size: 81.25%; } .text-12 { font-size: 75%; } .text-base { color: #261E19; } .text-brand { color: #3F4667; } .text-gray { color: #636363; } .text-nona { color: #CBB578; } .text-bold { font-weight: 700; } .text-center { text-align: center; } .text-right { text-align: right; } .line-height-nor { line-height: 1.75em; } .line-height-2 { line-height: 2em; } .text-underline { text-decoration: underline; } .text-marker { display: inline-block; font-style: normal; position: relative; } .text-marker::after { background: #777D9D; content: ""; width: 100%; height: 3px; position: absolute; right: 0; bottom: 0; left: 0; } p { margin-top: 1em; } .line-height-2 p { margin-top: 2em; } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, p:nth-child(1) { margin-top: 0; } a { color: #261E19; text-decoration: none; } a:hover { text-decoration: underline; } a:hover span { text-decoration: inherit; } img { width: 100%; height: auto; } .img-round img { border-radius: 50%; } img.aligncenter { display: block; margin: 5em auto; } img.aligncenter p { margin-top: 0; } hr { background: #C5C7D1; border: none; display: block; width: 100%; height: 1px; outline: none; } .br { display: block; } .br-inline { display: inline-block; } #header .menu-global-nav li { font-family: "fot-tsukubrdgothic-std"; font-weight: 700; } #header .menu-global-nav li.menu-hr { border-top: 1px solid #C5C7D1; } .menu-global-nav li a, .menu-sub-nav li a { display: block; color: #3F4667; } .menu-global-nav li a:hover { color: #777D9D; text-decoration: none; } .menu-sub-nav li { font-size: 93.75%; } /* ----------------------------------------------------------- Layout ----------------------------------------------------------- */ #header { -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; display: flex; flex-direction: column; padding: 1.25em; position: relative; } #header-brand { width: 25%; min-width: 222px; max-width: 330px; text-align: center; line-height: 1; position: relative; z-index: 1; } #header-brand a { display: flex; align-items: center; flex-direction: column; } .logomark { display: block; width: 22.5%; max-width: 74px; margin: 0 auto; } .logo { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1.875em; } .logo-sub { display: flex; width: 84%; line-height: 1em; max-width: 277px; } .logo-main { display: flex; width: 100%; max-width: 330px; line-height: 1em; margin-top: 1.875em; } html.fixed, html.fixed body { overflow: hidden; } .sec { padding: 5em 0; } .sec-lg { padding: 6.25em 0; } .sec-xlg { padding: 7.5em 0; } .container, .container-md { width: 80.6%; max-width: 1100px; margin: 0 auto; } .container-sm { width: 58.6%; min-width: 800px; max-width: 800px; margin: 0 auto; } .container-xs { width: 54.6%; min-width: 600px; max-width: 600px; margin: 0 auto; } .post-cat { background: #777D9D; display: flex; align-items: center; justify-content: center; width: fit-content; font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; color: #fff; margin-bottom: 0.5625em; padding: 0 0.5em; } .icon-cat { line-height: 1.625em; } .icon-cat-sm { font-size: 81.25%; line-height: 1.85em; } .post-thumb { display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 1.25em; } .post-thumb img { aspect-ratio: 3 / 2; border-radius: 0.625em; object-fit: cover; object-position: center center; } .post-excerpt { display: block; line-height: 1.75em; margin-top: auto; } .row-4 .post-excerpt { font-size: 93.75%; } .post-cap { line-height: 1.5em; } .post-date { display: block; font-size: 87.5%; margin-top: 1.75em; } .post-index dd a { display: block; } .gallery { display: flex; flex-wrap: wrap; } .gallery li { display: flex; flex-direction: column; width: 29.8%; margin-top: 5em; margin-left: 5.3%; max-width: 280px; } .gallery .item { display: block; } .gallery .item img { aspect-ratio: 7/5.75; object-fit: contain; } .gallery .item-box .tit { display: block; line-height: 1.5em; margin-top: 1.875em; margin-bottom: 1em; } .gallery .cap { font-size: 87.5%; line-height: 1.75em; } #sdgs .row { align-items: center; width: 72%; max-width: 792px; margin: 0 auto; } #sdgs .row-2 .figure { width:32.4%; max-width: 256px; } #sdgs .row-2 .text-group { width:59.6%; max-width: 472px; line-height: 2em; } .logo-sdgs-sm { width: 100%; max-width: 318px; } #sns .row { align-items: center; justify-content: center; margin: 0 auto; } #sns .text-14 { line-height: 1.75em; margin-bottom: 1.75em; } .icon-group { display: flex; flex-wrap: wrap; justify-content: center; width: 18.8%; min-width: 206px; max-width: 206px; } .icon-group li { display: flex; flex-direction: column; align-items: center; width: 5.25em; text-align: center; margin-top: 3.125em; margin-left: 2.375em; } .icon-group li:nth-child(-n+2) { margin-top: 0; } .icon-group li:nth-child(odd) { margin-left: 0; } .icon-group li a { display: block; width: 3em; height: 3em; } .icon-group li a svg { vertical-align: bottom; } .icon-group li path { aspect-ratio: 1/1; object-fit: contain; } .icon-group li div { font-family: "fot-tsukubrdgothic-std", sans-serif; font-weight: 700; font-size: 75%; color: #636363; line-height: 1; margin-top: 0.8em; } .icon-group li div span.br { margin-top: 0.5em; } .sns-mm { border-left: 1px solid #D3D3D3; box-sizing: border-box; width: 48%; max-width: 530px; margin-left: 7%; padding-top: 1.875em; padding-bottom: 1.875em; padding-left: 7%; } .parts-mm { margin: 1.875em 0; } .sns-mm dt { background: url("../img/icon_feather-mail.svg") no-repeat left center / 2.25em auto; font-family: "fot-tsukubrdgothic-std", sans-serif; font-size: 125%; font-weight: 700; line-height: 1em; margin-bottom: 1em; padding: 0.5em 0 0.5em 3em; } .parts-mm .form-item { margin-top: 1.25em; } .sns-mm .form-item form, .parts-mm .form-item form { display: flex; align-items: center; } .sns-mm .form-item input[type="email"], .parts-mm .form-item input[type="email"], .sns-mm .form-item input[type="text"], .parts-mm .form-item input[type="text"] { -webkit-appearance:none; appearance: none; border: 1px solid #636363; box-sizing: border-box; border-radius: 0; width: 19.875em; height: 3em; font-size: 100%; vertical-align: top; /*margin-top: 1.25em;*/ margin-right: 1.875em; outline: none; padding: 0.5em; } .sns-mm .form-item input[type="submit"], .parts-mm .form-item input[type="submit"] { -webkit-appearance:none; appearance: none; background: none; border: 2px solid #636363; box-sizing: border-box; border-radius: 0.5em; cursor: pointer; width: 5em; font-family: "fot-tsukubrdgothic-std", sans-serif; font-size: 125%; font-weight: 700; color: #636363; vertical-align: top; outline: none; /*margin-top: calc(1.25em - 3px);*/ padding: 0.0125em 0.5em; -webkit-transition:all 0.25s ease; transition:all 0.25s ease; } .sns-mm .form-item input[type="submit"]:hover, .parts-mm .form-item input[type="submit"]:hover { background: #636363; color: #fff; } #footer { padding: 3.125em 0; } #footer-brand { width: 18%; min-width: 194px; max-width: 194px; margin: 0 auto 5em; } #footer-brand a { display: block; } #footer-brand .logo { margin-top: 1.0625em; } #footer-brand .logo-main { margin-top: 1.0625em; } #location { margin-bottom: 7.5em; } #location dt { margin-top: 1.75em; } #location dt:nth-of-type(1) { margin-top: 0; } .footer-menu { margin-bottom: 5.625em; } .footer-menu > ul { display: flex; flex-wrap: wrap; } .footer-menu .menu-global-nav > li > a { font-size: 93.75%; font-weight: 700; color: #3F4667; margin-bottom: 1.5em; } .footer-menu .menu-global-nav > li > a:hover { color: #3F4667; text-decoration: underline; } .footer-menu .sub-menu li { font-size: 93.75%; margin-top: 0.25em; } .footer-menu .sub-menu li a:hover { color: #3F4667; text-decoration: underline; } #copyright { font-size: 93.75%; text-align: center; margin-top: 0; } #copyright small.caution { display: block; font-size: 80%; line-height: 2em; margin-top: 4em; } /** pageTop */ p#pageTop { position: fixed; bottom: 1.25em; right: 1.25em; z-index: 999; } p#pageTop a { display: block; width: 48px; text-align: center; } /* ----------------------------------------------------------- MediaQueries(PC) ----------------------------------------------------------- */ @media only screen and (min-width: 1025px) { #header.stickey { background: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: 0 auto; padding: 1.25em 1.25em 0; position: fixed; top: 0; left: 0; z-index: 999; transition: .25s; transform: translateY(-100%); } #header.stickey.is-show { transform: translateY(0); } .bottom #header.stickey { background: #fff; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; margin: 0 auto; padding: 1.25em 1.25em 0; position: relative; z-index: 999; transform: translateY(0); } .bottom #header.stickey.fixed { position: fixed; transform: translateY(-100%); } /*.bottom #header.stickey.fixed { transform: translateY(-100%); }*/ .bottom #header.stickey.fixed.is-show { position: fixed; transform: translateY(0); } .lp #header.stickey { align-items: flex-end; justify-content: flex-start; padding: 1.9375em 1.25em; position: fixed; transform: translateY(0); } #header-brand { margin: 0 auto 8.5em; order: 2; } #header.stickey #header-brand { width: 20.9%; max-width: 276px; margin: 0.75em 0 1.25em; order: 1; } .lp #header.stickey #header-brand { display: flex; align-items: flex-end; width: 19%; max-width: 238px; margin: 0; } #header.stickey #header-brand a { flex-direction: row; align-items: flex-end; justify-content: space-between; /*width: auto;*/ width: 100%; height: 54px; } .lp #header.stickey #header-brand a { width: 100%; height: 48px; } #header-corp { width: 29.9%; min-width: 304px; max-width: 396px; margin-left: 3vw; order: 2; } #header.stickey .logomark { width: 18.9%; max-width: 52px; margin-left: 0; } .header-sub-inner { display: flex; justify-content: flex-end; margin-bottom: 3.0625em; order: 1; } #header.stickey .header-sub-inner { margin-bottom: 0; order: 2; } .header-main-inner { order: 3; } #header.stickey .header-main-inner { position:absolute; right: calc(1.25em + 2.375em + 1.875em - 3.25em); bottom: 0; } #header.stickey .logo { width: 71.5%; max-width: 197px; align-items: flex-start; margin: 0 0 0; } .lp #header.stickey .logo { max-width: 170px; } #header.stickey .logo-main { margin-top: 0.875em; } .header-main-menu > ul { display: flex; justify-content: center; } .header-main-menu > ul li { position: relative; } .header-main-menu > ul li a { display:block; } .header-main-menu > ul > li > a { font-size: clamp(100%, 1.3vw, 112.5%); line-height: 1.5em; padding: 0 2.5em calc(0.5em + 2px); position: relative; z-index: 11; } .header-main-menu > ul > li.menu-reading { cursor: pointer; } .header-main-menu > ul > li.menu-reading > a { padding: 0 3.5em calc(0.5em + 2px); pointer-events: none; } #header.stickey .header-main-menu > ul > li > a { font-size: 100%; padding: 0 2.25em 1.25em; line-height: 1em; position: relative; z-index: 11; } #header.stickey .header-main-menu > ul > li.menu-reading > a { padding: 0 3.25em 1.25em; } /*#header.stickey .header-main-menu > ul > li:nth-last-child(1) > a { padding-right: 0; }*/ .header-main-menu > ul > li:not(:nth-last-child(1)) > a:after { background: rgba(63, 70, 103, 0.5); content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; } #header.stickey .header-main-menu > ul > li:not(:nth-last-child(1)) > a:after { content: none; } #header ul.sub-menu { background: #fff; box-sizing: border-box; width: 100%; margin: 0; text-align: center; padding: 0 0 0.75em; -webkit-transition: all .25s ease; transition: all .25s ease; visibility: hidden; opacity: 0; position: absolute; top: 2em; z-index: 10; } #header.stickey ul.sub-menu { padding: 1em 0 0.5em; top: 0.875em; } #header ul.sub-menu::before { background: rgba(63, 70, 103, 0.5); content: ""; width: calc(100% - 1px); height: 1px; position: absolute; top: 2px; left: 0; } #header.stickey ul.sub-menu::before { width: calc(100% - 2px); margin-right: auto; margin-left: auto; top: 1.25em; right: 0; } #header ul.sub-menu li a { font-size: clamp(87.5%, 1.2vw, 100%); } #header ul.sub-menu li a { padding: 1em 0.5em; } #header ul.sub-menu li:nth-child(1) a { padding-top: 1.75em; } #header.stickey ul.sub-menu li a { font-size: 87.5%; line-height: 1.75em; } #header.stickey ul.sub-menu li:nth-child(1) a { padding-top: 1.5em; } #header .header-main-menu > ul li:hover ul.sub-menu { top: calc(2.25em + 2px); visibility: visible; opacity: 1; } #header.stickey .header-main-menu > ul li:hover ul.sub-menu { top: 1em; } .header-mobile-menu-container { display: none; } .header-sub-menu { display: flex; justify-content: flex-end; } .header-sub-menu li { line-height: 1; margin-left: 2.5em; } .header-sub-menu li:nth-child(1) { margin-left: 0; } .site-search { margin-left: 1.875em; } .site-search input[type="text"] { -webkit-appearance:none; appearance: none; background:#fff url("../img/icon_feather-search.svg") no-repeat left 0.625em center; background-size: 1em auto; border: 1px solid #3F4667; box-sizing: border-box; border-radius: 0.3125em; cursor: pointer; width: 2.375em; height: 2.375em; font-size: 100%; padding: 0.6875em; transition: all 0.5s; outline: none; } .site-search input[type="text"]:focus, .site-search input[type="text"]:active { width: 12em; padding: 0.6875em 0 0.6875em 2.375em; } #menu-sub-menu { display: flex; } #location dt { font-size: 112.5%; font-weight: 700; margin-bottom: 0.25em; } #location dd { font-size: 93.75%; } .footer-menu > ul > li { box-sizing: border-box; width: 20%; margin-top: 5.625em; padding-right: 1em; } .footer-menu > ul > li:nth-child(-n+5) { margin-top: 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .top #header.stickey, .bottom #header.stickey { padding-bottom: 2.6875em; } #header.stickey #header-brand { width: 22.2%; /*min-width: 220px;*/ max-width: 220px; margin: 0 0 0; order: 1; } #header.stickey #header-brand a { flex-direction: row; align-items: flex-end; height: 43px; } #header.stickey .logomark { width: 18.7%; max-width: 41px; margin-right: 1.25em; margin-left: 0; } #header.stickey .logo { width: 71.4%; align-items: flex-start; margin: 0 0 0; } #header.stickey .logo-main { margin-top: 0.8em; } #header.stickey .header-main-menu > ul > li > a { padding-right: 1em; padding-left: 1em; } #header.stickey ul.sub-menu { width: 137.5%; left: -18.75%; } } /* ----------------------------------------------------------- MediaQueries(PC and TB) ----------------------------------------------------------- */ @media only screen and (max-width: 1024px) { .none { display: none; } img.aligncenter { margin: 7.8125vw auto; } .container-md { width: 84.8%; } .container-sm { width: 84.8%; min-width: inherit; max-width: inherit; } .container-xs { width: 84.8%; min-width: inherit; max-width: inherit; } .sec { padding: 4.375em 0; } .sec-lg { padding: 5.625em 0; } .heading01 { font-size: clamp(150%, 3.515625vw, 225%); } #header { padding: 0.9375em; } .header-main-inner, .header-sub-inner, .top #header.stickey, .bottom #header.stickey.fixed { display: none; } #header-brand { margin: 1.5625em auto 2.1875em; } #header.stickey #header-brand { width: 22.2%; min-width: 220px; max-width: 276px; margin: 0 0 0; order: 1; } #header.stickey #header-brand a { flex-direction: row; align-items: flex-end; width: auto; height: 43px; } #header.stickey .logomark { width: 18.7%; max-width: 41px; margin-right: 1.25em; margin-left: 0; } #header-brand .logo, #header-brand .logo-main { margin-top: 1.25em; } #header.stickey .logo { width: 71.4%; align-items: flex-start; margin: 0 0 0; } #header.stickey .logo-main { margin-top: 0.8em; } .header-mobile-menu-inner { background: #fff; width: 100%; transition: all 0.5s; opacity: 0; position: fixed; top: 0; left: 0; z-index: -1; } .header-mobile-menu-inner.panelactive { height: 100%; opacity: 1; z-index: 999; } .header-mobile-menu-inner .header-mobile-menu { box-sizing: border-box; width: 100%; min-height: 100%; padding: 0 5% 4.5em; } .header-mobile-menu-inner.panelactive .header-mobile-menu { margin: auto; overflow: auto; -webkit-overflow-scrolling: touch; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; } .mobile-brand { display: block; } #header .menu-global-nav { margin: 0; padding: 0; list-style: none; } #header .menu-global-nav > li.separate-item { border-bottom: 1px solid #3F4667; margin-bottom: 0.625em; padding-bottom: 0.625em; } #header .menu-global-nav > li > a, #header .menu-sub-nav > li > a { display: block; line-height: 1.5em; padding: 1.125em 1em; position: relative; } #header .menu-global-nav > li.mobile-menu-dropdown > a::after { background: url("../img/icon_feather-plus.svg") no-repeat center center / cover; content: ""; width: 1.125em; height: 1.125em; margin-top: auto; margin-bottom: auto; transition: all .25s; position: absolute; top: 0; right: 1em; bottom: 0; } #header .menu-global-nav > li.mobile-menu-dropdown > a.close::after { transform: rotate(45deg); } .hamburger-menu { background-color: transparent; border: 0; box-sizing: content-box; cursor: pointer; display: block; width: 2rem; height: 2rem; outline: 0; padding: 0.875rem; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: fixed; top: 0; right: 0; z-index: 1000; } .hamburger-menu:hover { cursor: pointer; background-color: transparent; } .hamburger-menu-icon { position: relative; display: block; } .hamburger-menu-icon, .hamburger-menu-icon:before, .hamburger-menu-icon:after { background-color: #3F4667; border-radius: 1px; width: 100%; height: 2px; -webkit-transition: all .5s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .5s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .hamburger-menu-icon:before, .hamburger-menu-icon:after { content: ""; position: absolute; top: -10px; left: 0; } .hamburger-menu-icon:after { top: 10px; } .hamburger-menu.active .hamburger-menu-icon { background-color: transparent; } .hamburger-menu.active .hamburger-menu-icon:before, .hamburger-menu.active .hamburger-menu-icon:after { top: 0; } .hamburger-menu.active .hamburger-menu-icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hamburger-menu.active .hamburger-menu-icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .header-mobile-menu-container .mobile-brand { box-sizing: border-box; display: inline-block; width: auto; height: 3.75em; padding: 0.75em 0; } .header-mobile-menu-container .mobile-brand img { width: auto; height: 100%; } .header-mobile-menu-container .mobile-brand:hover { background-color: transparent; } .mobile-menu .sub-menu { background: #fff; display: none; box-sizing: border-box; width: 100%; margin: 0; padding: 0 0 0.75em calc(1em + 0.9375em); } .mobile-menu .sub-menu > li { width: 100%; font-size: 81.25%; line-height: 1em; } #header .mobile-menu .sub-menu > li { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; } .mobile-menu .sub-menu > li a { display: block; padding: 1em 0; } .mobile-menu .sub-menu > li:nth-child(1) a { padding-top: 0.75em; } .menu-sub-nav li { font-family: "fot-tsukubrdgothic-std"; font-weight: 700; } #sdgs .row { width: 100%; } .sns-icon { display: flex; align-items: center; justify-content: center; margin-top: 2.5em; } .sns-icon li { width: 2em; height: 2em; margin: 0 2.1875em; } .site-search { width: 52.8vw; min-width: 198px; position: absolute; top: calc(0.75em + 3px); left: 50%; transform: translateX(-50%); } .site-search input[type="text"] { -webkit-appearance:none; appearance: none; background:#fff url("../img/icon_feather-search.svg") no-repeat left 0.625em center; background-size: 1em auto; border: 1px solid #3F4667; box-sizing: border-box; border-radius: 0.3125em; cursor: pointer; width: 100%; height: 1.875em; font-size: 100%; padding: 0.375em 0.375em 0.375em 2.25em; outline: none; } .footer-menu > ul > li { box-sizing: border-box; width: 25%; margin-top: 5em; padding-right: 1em; } .footer-menu > ul > li:nth-child(-n+4) { margin-top: 0; } } @media only screen and (min-width: 835px) { .row-3 > article { display: flex; width: 31%; max-width: 340px; margin-left: 3.5%; } .row-3 > article { margin-top: 5em; } .row-3 > article:nth-child(-n+3) { margin-top: 0; } .row-3 > article:nth-child(3n+1) { margin-left: 0; } .row-4 > li { display: flex; width: 22.9%; margin-left: 2.8%; } .row-4 > li:nth-child(-n+4) { margin-top: 0; } .row-4 > li:nth-child(4n+1) { margin-left: 0; } .gallery li:nth-child(3n+1) { margin-left: 0; } .gallery li:nth-child(-n+3) { margin-top: 0; } .pc-none { display: none; } } @media only screen and (min-width: 481px) { .row-2 { justify-content: space-between; } .row-3 > li { display: flex; width: 31%; max-width: 340px; margin-left: 3.5%; } .row-3 > .coming-soon { width: 100%; max-width: inherit; text-align: center; } .row-3 > li:nth-child(-n+3) { margin-top: 0; } .row-3 > li:nth-child(3n+1) { margin-left: 0; } .post-index { display: inline-block; vertical-align: bottom; } .post-index li { text-align: justify; margin-top: 0.75em; } .post-index li:nth-child(1) { margin-top: 0; } .post-index dt { display: table-cell; width: 7.5em; vertical-align: top; max-width: 120px; } .post-index dd { display: table-cell; width: auto; vertical-align: top; } } /* ----------------------------------------------------------- MediaQueries(TB and SP) ----------------------------------------------------------- */ @media only screen and (max-width: 834px) { .container-md { width: 90%; min-width: inherit; max-width: inherit; } .container { width: 84.8%; min-width: inherit; max-width: inherit; } .sec { padding: 3.75em 0; } .sec-lg { padding: 5em 0; } .row-2 { flex-direction: column; } .row-4 > li { display: flex; width: 31%; max-width: 340px; margin-top: 5em; margin-left: 3.5%; } .row-4 > li:nth-child(-n+3) { margin-top: 0; } .row-4 > li:nth-child(3n+1) { margin-left: 0; } ul.btn-container { align-items: center; } #headline { font-size: clamp(187.5%, 4.8vw, 250%); } .heading01 { font-size: clamp(150%, 4.8vw, 250%); } .heading02 { font-size: clamp(150%, 3.8vw, 200%); } .heading02.num::before { border-radius: 0.72em; width: 1.44em; height: 1.44em; font-size: 125%; line-height: 1.44em; margin-right: 0; } .heading02.num .inner { width: calc(100% - 0.75em - 1.8em); margin-left: 0.75em; } .heading03 { font-size: clamp(125%, 3.4vw, 175%); } .heading04 { font-size: clamp(125%, 2.9vw, 150%); } .heading05 { font-size: clamp(81.25%, 1.9vw, 100%); } .text-20 { font-size: clamp(100%, 2.4vw, 125%); } .btn-container .text-20 { font-size: clamp(112.5%, 2.4vw, 125%); } .text-13 { font-size: clamp(75%, 1.6vw, 81.25%); } .text-15 { font-size: clamp(87.5%, 1.8vw, 93.75%); line-height: 1.75em; } .text-16 { font-size: clamp(87.5%, 1.9vw, 100%); line-height: 1.75em; } .text-22 { font-size: clamp(118.75%, 2.7vw, 137.5%); } .text-24 { font-size: clamp(125%, 2.9vw, 150%); } .text-28 { font-size: clamp(125%, 3.4vw, 175%); } .br-sp { display: block; } .tb-none { display: none; } .title-grids { font-size: clamp(100%, 2.2vw, 112.5%); } .post-excerpt { font-size: clamp(87.5%, 1.9vw, 100%); } .row-4 .post-excerpt { font-size: clamp(81.25%, 1.8vw, 93.75%); } .post-date { font-size: clamp(81.25%, 1.7vw, 87.5%); line-height: 1.75em; margin-top: 0; } .icon-cat, .icon-cat-sm { font-size: clamp(75%, 1.6vw, 81.25%); line-height: 1.85em; } .post-index li { font-size: clamp(87.5%, 1.9vw, 100%); } .gallery li { width: 47.5%; max-width: inherit; margin-top: 10vw; margin-left: 5%; } .gallery li:nth-child(-n+2) { margin-top: 0; } .gallery li:nth-child(odd) { margin-left: 0; } .gallery .item-box .tit { font-size: clamp(87.5%, 1.9vw, 100%); } .gallery .cap { font-size: clamp(81.25%, 1.7vw, 87.5%); } .text-group .br { display: inline; } .text-group .heading01 .br, .text-group .heading02 .br { display: block; } #school-logo { display: block; margin-bottom: 1.25em; } #school-logo img { max-width: 255px; } #sdgs .row, #sdgs .row-2 .text-group { width: 100%; max-width: inherit; } #sdgs .row-2 .figure { width: auto; margin-bottom: 3.125em; } .logo-sdgs-sm { margin-right: auto; margin-left: auto; } .sns-mm { border-top: 1px solid #D3D3D3; border-left: none; width: 100%; max-width: inherit; text-align: center; margin-top: 3.75em; margin-left: 0; padding-top: 2.5em; padding-left: 0; } .sns-mm dt { display: inline-block; } .sns-mm .text-14 { text-align: justify; } .sns-mm .form-item form, .parts-mm .form-item form { flex-direction: column; align-items: center; } .sns-mm .form-item input[type="email"], .parts-mm .form-item input[type="email"], .sns-mm .form-item input[type="text"], .parts-mm .form-item input[type="text"] { width: 100%; margin-right: 0; } .sns-mm .form-item input[type="submit"], .parts-mm .form-item input[type="submit"] { margin-top: calc(1.875em - 5.5px); margin-right: 0.75em; margin-left: 0.75em; } #footer-brand { margin-bottom: 3.125em; } #location { margin-bottom: 5em; } #location dt { font-size: clamp(87.5%, 1.9vw, 100%); font-weight: 700; } #location dd { font-size: clamp(87.5%, 1.9vw, 100%); } .footer-menu { margin-bottom: 5em; } .footer-menu > ul > li { width: 31%; margin-top: 3.125em; margin-left: 3.5%; } .footer-menu > ul > li:nth-child(4) { margin-top: 3.125em; } .footer-menu > ul > li:nth-child(-n+3) { margin-top: 0; } .footer-menu > ul > li:nth-child(3n+1) { margin-left: 0; } .footer-menu .menu-global-nav > li > a { font-size: clamp(87.5%, 1.8vw, 93.75%); margin-bottom: 0.75em; } .footer-menu .sub-menu li { font-size: clamp(81.25%, 1.8vw, 93.75%); } #copyright { font-size: clamp(75%, 1.8vw, 93.75%); } #copyright small.caution { font-size: 100%; text-align: justify; line-height: 2em; margin-top: 1.625em; } p#pageTop a { width: 45px; } } @media only screen and (min-width: 481px) and (max-width: 834px) { .row-3 > article { display: flex; width: 47.5%; max-width: 340px; margin-left: 5%; } .row-3 > article { margin-top: 5em; } .row-3 > article:nth-child(-n+2) { margin-top: 0; } .row-3 > article:nth-child(odd) { margin-left: 0; } } /* ----------------------------------------------------------- MediaQueries(SP) ----------------------------------------------------------- */ @media only screen and (max-width: 480px) { img.aligncenter { margin: 2.5em auto; } .sec { padding: 3.125em 0; } .sec-lg { padding: 3.75em 0; } .sec-xlg { padding: 5em 0; } .post-sliders { flex-wrap: nowrap; } .post-grids { flex-wrap: wrap; } .post-sliders > li { width: auto; max-width: inherit; flex: 0 0 74%; margin-top: 0; margin-left: 6%; } .post-grids > li { width: 47.5%; flex: inherit; margin-top: 2.5em; margin-left: 5%; } .post-grids > .coming-soon { width: 100%; text-align: center; } .post-grids > article { width: 100%; flex: inherit; margin-top: 6.25em; margin-left: 0; } .post-sliders > li:nth-child(1), .post-grids > li:nth-child(odd) { margin-left: 0; } .post-grids.row-4 > li:nth-child(3) { margin-top: 2.5em; } .post-grids.row-4 > li:nth-child(4) { margin-left: 5%; } .post-grids > li:nth-child(-n+2), .post-grids > article:nth-child(1) { margin-top: 0; } .post-sliders { -webkit-overflow-scrolling: touch; overflow-x: auto; padding-bottom: 1.25em; } .post-index li { text-align: justify; line-height: 1.75em; margin-top: 1.75em; } .post-index li:nth-child(1) { margin-top: 0; } .sp-none { display: none; } .btn { flex-direction: column; } ul.btn-container li { min-width: 300px; } .br-inline { display: inline-block; } .sns-mm .form-item input[type="email"], .sns-mm .form-item input[type="text"] { width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; } .footer-menu > ul > li { box-sizing: border-box; width: 50%; padding-right: 1em; } .footer-menu > ul > li:nth-child(3) { margin-top: 3.125em; } .footer-menu > ul > li:not(:nth-child(3n+1)) { margin-left: 0; } .footer-menu > ul > li:nth-child(-n+2) { margin-top: 0; } }