diff --git a/activities/activities.css b/activities/activities.css index b8b5d60..415c288 100644 --- a/activities/activities.css +++ b/activities/activities.css @@ -28,7 +28,9 @@ margin-bottom: 60px; } main { - width: 65%; + width: 70%; + background-color: white; + border-radius: 20px; } main article { margin-bottom: 30px; @@ -48,12 +50,21 @@ } main .active-text-box { padding: 10px 40px 30px 40px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 500; + color: #333; } main .active-text-box .text{ text-indent: 1em; + font-family: Arial, Helvetica, sans-serif; + font-weight: 500; + color: #333; } main .active-text-box ul li{ list-style: disc; + font-family: Arial, Helvetica, sans-serif; + font-weight: 500; + color: #333; } #sidebar { width: 33%; @@ -86,11 +97,12 @@ padding-top: 70px; } .article-title-area:nth-child(1){ - padding-top: 0; + padding-top: 40px; } .article-title-area figure{ width: 80px; margin-right: 30px; + margin-left: 30px; } .article-title-area figure img{ width: 100%; @@ -127,7 +139,7 @@ flex-direction: column; } main { - width: 100%; + width: 100%; } #sidebar { width: 100%; diff --git a/testpage/test.css b/testpage/test.css index f76e87b..503cca9 100644 --- a/testpage/test.css +++ b/testpage/test.css @@ -1,720 +1,1370 @@ -@charset "UTF-8"; - -* { - margin: 0px; - padding: 0px; -} - - html { - font-size: 100%; - } - body{ - margin: 0; - height: 100%; - font-family: 'Noto Sans JP', sans-serif; - color: rgb(45, 45, 45); - line-height: 1.7; -} -body:after{ - margin: 0; - position: fixed; - top: 0; left: 0; - width: 100%; height: 100%; - content: ""; - background: #afeeee; - /* background: -moz-linear-gradient(top, #afeeee 0%,#FFF 100%); */ - /* background: -webkit-linear-gradient(top, #afeeee 0%,#FFF 100%); */ - background: linear-gradient(to bottom, #afeeee 0%, #fff 100%); - z-index: -1; -} - -body.vmenuspace {margin-top: 2em; border-top: 3px solid;} -div.scrollbox { - height: 6em; overflow: auto; background: #eff; -} - -img { - max-width: 100%; - } -/*--------------------------------------common---------------------------------*/ -.section-title { - font-size: 2.1rem; - text-align: center; - position: relative; - width: 100%; - margin-top: 30px; - margin-bottom: 20px; - text-shadow: 0 4px 6px rgb(194, 194, 194); - } -.section-title::before{ - content: ''; - display: inline-block; - width: 170px; - height: 170px; - background-image: url(../testpage/yellow-green.png); - background-size: contain; - vertical-align: middle; -} -.section-title::after{ - content: ''; - display: inline-block; - width: 170px; - height: 170px; - background-image: url(../testpage/green.png); - background-size: contain; - vertical-align: middle; -} -.section-text{ - text-align: center; - font-size: 1.3rem; - padding-top: 10px; - padding-bottom: 30px; - max-width: 800px; - margin: 0 auto; - line-height: 1.7; -} -.wrapper { - max-width: 1150px; - margin: 0 auto; - padding: 0 5%; - padding-top: 30px; - margin-bottom: 80px; - } -/* --------------------------------------ヘッダー ------------------------------------------------------------*/ -.header{ - width: 100vw; - height: auto; - z-index: 99; - position: fixed; - transition: all .5s; - top:0; - padding-top: 10px; - padding-bottom: 10px; -} -#hamburger-menu{ - opacity: 0; - position: fixed; -} -.header.change-color { - background-color: #ffffff; - } - -.header-nav { - height: auto; - max-width: 1200px; - margin: 0 auto; - padding: 0 5%; - } - .header-nav .sp-logo{ - display: none; - } +/* + * CSS for Junior-Doctor Chokai Academy + */ + @charset "UTF-8"; - .header-nav nav ul { - display: flex; - justify-content: space-between; - align-items: center; + * { + margin: 0px; + padding: 0px; } + + html { + font-size: 100%; + } + body{ + margin: 0; + height: 100%; + font-family: 'Noto Sans JP', sans-serif; + color: rgb(45, 45, 45); + line-height: 1.7; + } + body:after{ + margin: 0; + position: fixed; + top: 0; left: 0; + width: 100%; height: 100%; + content: ""; + background: #afeeee; + /* background: -moz-linear-gradient(top, #afeeee 0%,#FFF 100%); */ + /* background: -webkit-linear-gradient(top, #afeeee 0%,#FFF 100%); */ + background: linear-gradient(to bottom, #afeeee 0%, #fff 100%); + z-index: -1; + } + + body.vmenuspace {margin-top: 2em; border-top: 3px solid;} + div.scrollbox { + height: 6em; overflow: auto; background: #eff; + } + + img { + max-width: 100%; + } + dt {font-weight: bold;} + dd {margin-left: 1.5em;} - .header-nav nav ul li { - margin-right: 50px; - list-style: none; - font-size: 1.05em; - padding-left: 9px; - padding-right: 9px; - border-left: grey 2px dotted; - border-right: grey 2px dotted; + .erase-line { + text-decoration: line-through; + } + /* --------------------------------------ヘッダー ------------------------------------------------------------*/ + .header{ + width: 100vw; + height: auto; + z-index: 99; + position: fixed; + transition: all .5s; + top:0; + padding-top: 10px; + padding-bottom: 10px; + } + #hamburger-menu{ + opacity: 0; + position: fixed; + } + + .header-nav { + height: auto; + max-width: 1400px; + margin: 0 auto; + padding: 0 5%; + } + .header-nav .sp-logo{ + display: none; + } + + .header-nav nav ul { + display: flex; + justify-content: space-around; + align-items: center; + font-size: 1rem; + } + + + .header-nav nav ul li { + /* margin-right: 50px; */ + list-style: none; + /* font-size: 1.05em; */ + /* padding-left: 9px; */ + /* padding-right: 9px; */ + border-left: grey 2px dotted; + border-right: grey 2px dotted; + } + .header-nav nav ul li:last-child{ + margin-right: 50px; } .header-nav nav ul .bd-no{ border: none; } - + .header-nav nav ul li a{ - text-decoration: none; - color: black; - transition: .3s; - display: block; + text-decoration: none; + color: black; + transition: .3s; + display: block; + } + .header-nav nav ul li a:hover{ + border-bottom: grey 3px dotted; + } + .header-nav nav ul li .bd-none:hover{ + border-bottom: none; + } + + .top-logo{ + width: 65px; + height: 65px; + object-fit: cover; + } + header.scroll-nav{ + background: rgba(255, 255, 255, 0.87); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); + padding-top: 0; + padding-bottom: 0; + } + label .buns .patty-name{ + display: none; } - .header-nav nav ul li a:hover{ - border-bottom: grey 3px dotted; + /*--------------------------------------common---------------------------------*/ + .wrapper { + max-width: 1150px; + margin: 0 auto; + padding: 0 5%; + padding-top: 30px; + padding-bottom: 80px; + } + .section-title { + font-size: 2.1rem; + text-align: center; + position: relative; + width: 100%; + margin-top: 30px; + margin-bottom: 20px; + text-shadow: 0 4px 6px rgb(194, 194, 194); + } + .section-title::before{ + content: ''; + display: inline-block; + width: 170px; + height: 170px; + background-image: url(../jd/img/yellow-green.png); + background-size: contain; + vertical-align: middle; } - .header-nav nav ul li .bd-none:hover{ - border-bottom: none; + .section-title::after{ + content: ''; + display: inline-block; + width: 170px; + height: 170px; + background-image: url(../jd/img/green.png); + background-size: contain; + vertical-align: middle; } - - .top-logo{ - width: 65px; - height: 65px; - object-fit: cover; + .section-text{ + text-align: center; + font-size: 1.3rem; + padding-top: 10px; + padding-bottom: 30px; + max-width: 800px; + margin: 0 auto; + line-height: 1.7; } - header.scroll-nav{ - background: white; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); - padding-top: 0; - padding-bottom: 0; - } + /*--------------------------------------//common----------------------------------*/ /* -----------------------------------------------------メインビジュアル */ - #mainvisual { - height: 660px; - position: relative; - margin-bottom: 120px; - width: 100%; - margin:0; - padding:0; + #mainvisual { + height: 660px; + position: relative; + margin-bottom: 120px; + width: 100%; + margin:0; + padding:0; + } + .mainvisual-inner{ + margin-top: 110px; + max-width: 100%; + } + #mainvisual .top-text{ + position: absolute; + z-index: 10; + top: 85px; + left: 6%; + overflow: hidden; + } + #mainvisual .top-text .text{ + font-size: 1.8rem; + font-weight: bold; + margin-bottom: 10px; + color: white; + line-height: 4rem; + -ms-writing-mode: tb-rl; + writing-mode: vertical-rl; + text-shadow: 0 4px 6px #000; + } + .top-text-color{ + color: rgb(79, 255, 255); + } + #mainvisual .top-title{ + position: absolute; + z-index: 10; + /* top: 350px; */ + bottom: 30%; + right:30%; + overflow: hidden; + } + #mainvisual .top-title .site-title{ + font-size: 3.1rem; + font-weight: bold; + color: white; + text-shadow: 0 4px 6px #000; + text-align: center; + } + #mainvisual .top-title .site-title .small{ + font-size: 1.6rem; + color: rgb(40, 255, 255); + text-shadow: 0 4px 6px #000; + font-weight: bold; + text-align: center; + } + .mainvisual-img{ + position: relative; + max-width: 100%; + } + .mainvisual-img .top-title{ + position: absolute; + top: 270px; + right: 30%; + z-index: 10; + font-size: 2.8rem; + } + #mainvisual .fade li { + max-width: 100%; + position: absolute; + top: 0; + right: 0; + opacity: 0; + animation: fade 25s infinite; + list-style: none; + } + #mainvisual .fade li:nth-child(1) { + animation-delay: 0s; + } + #mainvisual .fade li:nth-child(2) { + animation-delay: 5s; + } + #mainvisual .fade li:nth-child(3) { + animation-delay: 10s; + } + #mainvisual .fade li:nth-child(4) { + animation-delay: 15s; + } + #mainvisual .fade li:nth-child(5) { + animation-delay: 20s; + } + #mainvisual .fade li img { + width: 1500px; + height: 610px; + object-fit: cover; + border-radius:1% 1% 1% 1%; + } + #mainvisual .fade li::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + box-shadow: inset 0px 0px 10px 10px #fff; + /* border-radius:1% 1% 1% 1%; */ + } + @keyframes fade { + 0% { + opacity: 0; + } + 15% { + opacity: 1; + } + 25% { + opacity: 1; + } + 35% { + opacity: 0; + } + 100% { + opacity: 0; + } + } + + @media screen and (max-width: 746px){ + #mainvisual .top-text .text{ + font-size: 1.4rem; + line-height: 2.5rem; + text-shadow: 0 3px 5px #000; + } + } + /* ---------------------------------------------------------//mainvisual */ + + /* -------------------------------------- home ---------------------------------------*/ + /* ------------------------------------------------------------home-about */ + /* scroll animation */ + #home-about .scroll{ + opacity: 0; + } + #home-about .show{ + opacity: 1; + transition: 1s; + transform: translateY(-50px); + } + .home-items .show{ + opacity: 1; + transition: 1s; + transform: translateY(-50px); + } + /* scroll animation */ + .home-items{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content:space-evenly; + align-items: center; + margin-top: 30px; + opacity: 0; + } + + .home-items img{ + width: 300px; + height: 216px; + } + #home-about .home-items h3{ + font-size: 1.4rem; + } + #home-about .home-items p{ + font-size: 1.2rem; + line-height: 2.0; + } + .what_study{ + width:730px; + margin-bottom: 10px; + } + .what_study h3{ + padding-bottom: 2px; + font-size: 1.3rem; + margin-bottom: 5px; + } + .what_study p{ + font-size: 1.2rem; + line-height: 2.0; + } + .aiming_top{ + width:730px; + margin-top: 50px; + } + .aiming_top h3{ + padding-bottom: 2px; + + font-size: 1.3rem; + margin-bottom: 5px; + } + .aiming_top p{ + font-size: 1.2rem; + line-height: 2.0; + } + em.see { + font-style: normal; font-weight: bold; + background: linear-gradient(to top, yellow, transparent); + } + .text-bg{ + background: linear-gradient(transparent 50%, rgb(253, 214, 140) 50%); + } + + /*----- //home-about ------------------------------------------*/ + /*------------- home-notice ----------------------------------*/ + .notice li{ + border-bottom:1px dotted #000; + list-style:none; + padding:10px; + width:800px; + margin: 0 auto; + } + .notice li a{ + color:#000; + text-decoration:none; + } + .notice li a .news-title{ + background-color:#2388b8; + border-radius:3px; + color:#fff; + display:inline-block; + margin-right:20px; + padding:5px; + } + .notice li a time{ + display: inline-block; + font-weight: bold; + margin-right:40px; + } + .notice li a p{ + color:#1c448d; + display: inline-block; + text-decoration:underline; + } + .notice li a .erase-line{ + text-decoration: line-through; + } + .notice li a .erase-line-comment{ + margin-left: 10px; + } + .new::after{ + content:"NEW"; + color: #d10606; + font-size: 1.1rem; + border: 1px solid #d10606; + padding: 4px 8px; + margin: 0 0 0 20px; + display: inline-block; + line-height: 1; + } + @media screen and (max-width: 746px){ + .notice li{ + padding:5px; + width: auto; + } + .notice li a span{ + margin-right:20px; + padding:4px; + font-size: 0.8rem; + } + .notice li a time{ + display:block; + font-size: 0.8rem; + } + .notice li a p{ + display:block; + font-size: 0.8rem; + } + .new::after{ + color: #d10606; + font-size: 0.8rem; + padding: 3px 7px; + } + } + /*------------- //home-notice ----------------------------------*/ + /* ----------home-class_content -------------*/ + #home-class_content{ + padding: 50px 16px 50px 16px; + margin: -50px auto 10px auto; + } + /* scroll animation */ + #home-class_content .scroll{ + opacity: 0; + } + #home-class_content .show{ + opacity: 1; + transition: 1s; + transform: translateY(-50px); + } + #home-class_content .grid .show { + opacity: 1; + transition: 1s; + transform: translateY(-50px); + } + /* scroll animation */ + #home-class_content .grid { + display: grid; + gap: 26px; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + } + #home-class_content .grid .class_content-item{ + text-decoration: none; + color: #000; + } + #home-class_content .grid .item { + transition: all 0.3s ease; + box-shadow: 0 0 8px 4px #ccc; + border-radius: 40px; + } + .class_content-item > .item:hover{ + opacity: 0.7; + } + #home-class_content .grid img { + vertical-align: top; + height: 300px; + width: 100%; + object-fit: cover; + border-radius: 40px 40px 0 0; + } + #home-class_content .grid .item-content { + padding: 30px; + } + #home-class_content .grid .item-cat { + font-size: 1.0rem; + margin-bottom: 20px; + } + #home-class_content .grid .item-text { + font-weight: bold; + margin-bottom: 20px; + font-size: 1.1rem; + } + #home-class_content .grid .item-date { + font-size: 0.85rem; + text-align: right; + } + .home-class_content-btn{ + text-align: center; + margin-top: 30px; + } + .home-class_content-btn a{ + border-bottom: 5px solid #007a9f; + text-decoration: none; + color: #fff; + border-radius: 100vh; + background-color: rgb(3, 202, 228); + padding: 10px 30px; + transition: .3s; + font-size: 1.4rem; + } + .home-class_content-btn a:hover{ + margin-top: 3px; + border-bottom: 2px solid #007a9f; + } + .fa-position-right { + position: absolute; + top: calc(50% - .5em); + right: 1rem; + } + /* ---------------------------------//home-class_content ---------------------*/ + + /* ---------------------------------home-QA -------------------------------*/ + @keyframes slidein { + 0% { + opacity: 0; + transform: translateY(-5px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } + } + #home-qa{ + margin: 0 auto; + padding-bottom: 40px; + } + .qa_list{ + position: relative; + margin: 20px 20px 30px 20px; + border: dashed black; + border-width: 0 0 2px 0; + color: black; + } + .qa_list:hover{ + color: rgb(255, 60, 0); + } + .qa_list .plus{ + position: relative; + display: inline-flex; + font-size: 25px; + padding: 5px; + transition: .3s; + } + .qa_list input[type="checkbox"]:checked ~ .plus{ + transform: rotate(45deg); + } + .qa_list label{ + position: absolute; + top: 3px; + left: 30px; + padding: 5px; + font-size: 23px; + cursor: pointer; + } + .qa_list .ans{ + position: relative; + max-height: 0; + overflow: hidden; + color: black; + margin: 5px; + transition: max-height .4s ease; + } + .qa_list .ans span{ + font-size: 25px; + } + .qa_list input[type="checkbox"]:checked ~ div.ans{ + max-height: 300px; + animation: slidein 0.5s; + transition: max-height .6s ease; + } + .qa_list input{ + display: none; + } + /* scroll animation */ + #home-qa .scroll{ + opacity: 0; + } + #home-qa .show{ + opacity: 1; + transition: 1s; + transform: translateY(-50px); + } + /* scroll animation */ + + + /* ---------------------------------//home-QA -------------------------------*/ + /* ----------------------------------home-info---------------------------------- */ + #home-info{ + background-color:white; + padding: 60px; + margin-bottom: 60px; + margin-top: 60px; + } + /* scroll animation */ + #home-info .scroll{ + opacity: 0; + } + #home-info .show{ + opacity: 1; + transition: 1s; + transform: translateY(-50px); + } + figure .scroll{ + opacity: 0; + } + figure .show{ + opacity: 1; + transition: 1s; + transform: translateY(-50px); + } + /* scroll animation */ + #home-info img{ + object-fit: cover; + width: 100%; + height: 450px; + } + .home-info-items{ + display: flex; + justify-content: space-evenly; + align-items: center; + } + .home-info-address_title{ + font-size: 1.8rem; + color:#e02f3b; + } + .info-item { + display: flex; + justify-content: space-evenly; + align-items: center; + padding-top: 70px; + } + .info-text .info-small{ + font-size: 0.9rem; + } + .info-address{ + font-size: 15px; + text-align: justify; + box-sizing: border-box; + letter-spacing: 0.15em; + white-space: nowrap; + line-height: 1.9; + display: inline-block; + padding-bottom: 10px; + } + .line-dl div{ + display: flex; + border-bottom: solid 1px #f5cbcd; + padding: 11px 5px 14px; + align-items: flex-start; + } + .line-dl div:nth-child(1){ + border-top: solid 1px #f5cbcd; + } + .line-dl div .font-mg{ + width: 110px; + text-align: justify; + box-sizing: border-box; + letter-spacing: 0.15em; + white-space: nowrap; + color: #e02f3b; + font-size: 15px; + line-height: 1.9; + } + .line-dl div dd{ + width: calc(100% - 110px); + font-size: 14px; + letter-spacing: 0.04em; + color: #000; + line-height: 1.9; + display: inline-block; + transform: translateY(3px); + } + .line-dl div dd a{ + width: calc(100% - 10px); + font-size: 14px; + letter-spacing: 0.04em; + color: #000; + line-height: 1.9; + display: inline-block; + transform: translateY(3px); + } + .line-dl div dd a:hover{ + opacity: 0.6; + } + .line-dl div dd .info-small{ + font-size: 13px; + } + iframe{ + width: 450px; + height: 600px;} + .info-bottom-text{ + margin-top: 40px; + } + /* ----------------------------------// home-info---------------------------------- */ + /* footer */ + footer { /* XXX: Change ME! */ + border-top: 1px dashed #888; + font-size: 70%; + text-align: center; + } + /* //footer */ + /* media */ + @media screen and (max-width : 1024px){ + .section-title { + font-size: 1.75rem; + } + header.scroll-nav{ + background: rgba(255, 255, 255, 0.87); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); + align-items: center; } -.mainvisual-inner{ - margin-top: 110px; - max-width: 100%; -} - #mainvisual .top-text{ - position: absolute; - z-index: 10; - top: 85px; - left: 6%; - overflow: hidden; - } - #mainvisual .top-text .text{ - font-size: 1.8rem; - font-weight: bold; - margin-bottom: 10px; - color: white; - line-height: 4rem; - -ms-writing-mode: tb-rl; - writing-mode: vertical-rl; - text-shadow: 0 4px 6px #000; - } - .top-text-color{ - color: rgb(1, 204, 255); - } - #mainvisual .top-title{ - position: absolute; - z-index: 10; - top: 280px; - right:30%; - overflow: hidden; - } - #mainvisual .top-title .site-title{ - font-size: 3.1rem; - font-weight: bold; - color: white; - text-shadow: 0 4px 6px #000; - text-align: center; - } - #mainvisual .top-title .site-title .small{ - font-size: 1.6rem; - color: indianred; - text-shadow: 0 4px 6px #000; - font-weight: bold; - text-align: center; - } - .mainvisual-img{ - position: relative; - max-width: 100%; - } - .mainvisual-img .top-title{ - position: absolute; - top: 270px; - right: 30%; - z-index: 10; - font-size: 2.8rem; - } - #mainvisual .fade li { - max-width: 100%; - position: absolute; - top: 0; - right: 0; - opacity: 0; - animation: fade 15s infinite; - list-style: none; - } - #mainvisual .fade li:nth-child(1) { - animation-delay: 0s; - } - #mainvisual .fade li:nth-child(2) { - animation-delay: 5s; - } - #mainvisual .fade li:nth-child(3) { - animation-delay: 10s; - } - #mainvisual .fade li img { - width: 1500px; - height: 610px; - object-fit: cover; - border-radius:1% 1% 1% 1%; - } - #mainvisual .fade li::after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - box-shadow: inset 0px 0px 10px 10px #fff; - /* border-radius:1% 1% 1% 1%; */ - } - @keyframes fade { - 0% { - opacity: 0; - } - 15% { - opacity: 1; - } - 30% { - opacity: 1; - } - 45% { - opacity: 0; - } - 100% { - opacity: 0; - } - } -/* ---------------------------------------------------------//mainvisual */ -/* ------------------------------------------------------------home-about */ -/* scroll animation */ -#home-about .scroll{ - opacity: 0; -} -#home-about .show{ - opacity: 1; - transition: 1s; - transform: translateY(-50px); -} -.home-items .show{ - opacity: 1; - transition: 1s; - transform: translateY(-50px); -} -/* scroll animation */ -.home-items{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content:space-evenly; - align-items: center; - margin-top: 30px; - opacity: 0; -} -.home-items img{ - width: 300px; - height: 216px; -} -#home-about .home-items h3{ - font-size: 1.4rem; -} -#home-about .home-items p{ - font-size: 1.2rem; - line-height: 2.0; -} -.what_study{ - width:730px; - margin-bottom: 10px; -} -.what_study h3{ - padding-bottom: 2px; - - font-size: 1.3rem; - margin-bottom: 5px; -} -.what_study p{ - font-size: 1.2rem; - line-height: 2.0; -} -main {margin: 1ex;} /* PLEASE Remove this if this is too much effective */ -.aiming_top{ - width:730px; - margin-top: 50px; -} -.aiming_top h3{ - padding-bottom: 2px; - - font-size: 1.3rem; - margin-bottom: 5px; -} -.aiming_top p{ - font-size: 1.2rem; - line-height: 2.0; -} -em.see { - font-style: normal; font-weight: bold; - background: linear-gradient(to top, yellow, transparent); -} -.text-bg{ - background: linear-gradient(transparent 50%, rgb(253, 214, 140) 50%); -} -/* ----------home-class_content -------------*/ -#home-class_content{ - padding: 50px 16px 50px 16px; - margin: -50px auto 10px auto; -} -/* scroll animation */ -#home-class_content .scroll{ - opacity: 0; -} -#home-class_content .show{ - opacity: 1; - transition: 1s; - transform: translateY(-50px); -} -#home-class_content .grid .show { - opacity: 1; - transition: 1s; - transform: translateY(-50px); -} -/* scroll animation */ -#home-class_content .grid { - display: grid; - gap: 26px; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); -} -#home-class_content .grid .class_content-item{ - text-decoration: none; - color: #000; -} -#home-class_content .grid .item { - transition: all 0.3s ease; - box-shadow: 0 0 8px 4px #ccc; - border-radius: 40px; -} -.class_content-item > .item:hover{ - opacity: 0.7; -} -#home-class_content .grid img { - vertical-align: top; - height: 300px; - width: 100%; - object-fit: cover; - border-radius: 40px 40px 0 0; -} -#home-class_content .grid .item-content { - padding: 30px; -} -#home-class_content .grid .item-cat { - font-size: 1.0rem; - margin-bottom: 20px; -} -#home-class_content .grid .item-text { - font-weight: bold; - margin-bottom: 20px; - font-size: 1.1rem; -} -#home-class_content .grid .item-date { - font-size: 0.85rem; - text-align: right; -} -.home-class_content-btn{ - text-align: center; - margin-top: 70px; -} -.home-class_content-btn a{ - border-bottom: 5px solid #007a9f; - text-decoration: none; - color: #fff; - border-radius: 100vh; - background-color: rgb(3, 202, 228); - padding: 10px 30px; - transition: .3s; - font-size: 1.4rem; -} -.home-class_content-btn a:hover{ - margin-top: 3px; - border-bottom: 2px solid #007a9f; -} -.fa-position-right { - position: absolute; - top: calc(50% - .5em); - right: 1rem; -} -/* ---------------------------------//home-class_content ---------------------*/ - -/* ---------------------------------home-QA -------------------------------*/ -@keyframes slidein { - 0% { - opacity: 0; - transform: translateY(-5px); - } - 100% { - opacity: 1; - transform: translateY(0px); - } -} -#home-qa{ - margin: 0 auto; - padding-bottom: 40px; -} -/* scroll animation */ -#home-qa .scroll{ - opacity: 0; -} -#home-qa .show{ - opacity: 1; - transition: 1s; - transform: translateY(-50px); -} -/* scroll animation */ -.qa_list{ - position: relative; - margin: 20px 20px 30px 20px; - border: dashed rgb(0, 0, 0); - border-width: 0 0 2px 0; - color: black; - transition: .2s; - transition: all 0.3s ease; -} -.qa_list:hover{ - color: rgb(255, 153, 0); - } -.qa_list .plus{ - position: relative; - display: inline-flex; - font-size: 28px; - padding: 5px; - transition: .3s; -} -.qa_list input[type="checkbox"]:checked ~ .plus{ - transform: rotate(45deg); -} -.qa_list label{ - display: block; - position: absolute; - top: 3px; - left: 30px; - padding: 5px; - font-size: 23px; - cursor: pointer; - transition: .3s; -} -.qa_list .ans{ - position: relative; - display: none; - color: black; - margin: 5px; - padding: 10px 10px 20px 10px; -} -.qa_list input[type="checkbox"]:checked ~ div.ans{ + .header-nav .sp-logo{ display: block; - animation: slidein 0.5s; -} -.qa_list input{ - display: none; -} - -/* ---------------------------------//home-QA -------------------------------*/ -/* ----------------------------------home-info---------------------------------- */ -#home-info{ - background-color:white; - padding: 60px; - margin-bottom: 60px; - margin-top: 60px; -} -/* scroll animation */ -#home-info .scroll{ - opacity: 0; -} -#home-info .show{ - opacity: 1; - transition: 1s; - transform: translateY(-50px); -} -figure .scroll{ - opacity: 0; -} -figure .show{ - opacity: 1; - transition: 1s; - transform: translateY(-50px); -} -/* scroll animation */ -#home-info img{ - object-fit: cover; - width: 100%; - height: 450px; -} -.home-info-items{ - display: flex; - justify-content: space-evenly; - align-items: center; -} -.home-info-address_title{ - font-size: 1.8rem; - color:#e02f3b; -} -.info-item { - display: flex; - justify-content: space-evenly; - align-items: center; - padding-top: 70px; -} -.info-text .info-small{ - font-size: 0.9rem; -} -.info-address{ - font-size: 15px; - text-align: justify; - box-sizing: border-box; - letter-spacing: 0.15em; - white-space: nowrap; - line-height: 1.9; - display: inline-block; - padding-bottom: 10px; -} -.line-dl div{ - display: flex; - border-bottom: solid 1px #f5cbcd; - padding: 11px 5px 14px; - align-items: flex-start; -} -.line-dl div:nth-child(1){ - border-top: solid 1px #f5cbcd; -} -.line-dl div .font-mg{ - width: 110px; - text-align: justify; - box-sizing: border-box; - letter-spacing: 0.15em; - white-space: nowrap; - color: #e02f3b; - font-size: 15px; - line-height: 1.9; -} -.line-dl div dd{ - width: calc(100% - 110px); - font-size: 14px; - letter-spacing: 0.04em; - color: #000; - line-height: 1.9; - display: inline-block; - transform: translateY(3px); -} -.line-dl div dd a{ - width: calc(100% - 110px); - font-size: 14px; - letter-spacing: 0.04em; - color: #000; - line-height: 1.9; - display: inline-block; - transform: translateY(3px); -} -.line-dl div dd a:hover{ - opacity: 0.6; -} -.line-dl div dd .info-small{ - font-size: 13px; -} -/* ----------------------------------// home-info---------------------------------- */ -/* footer */ -footer { /* XXX: Change ME! */ - border-top: 1px dashed #888; - font-size: 70%; - text-align: center; -} -/* //footer */ -/* media */ -@media screen and (max-width : 1024px){ - .section-title { - font-size: 1.75rem; } - header.scroll-nav{ - background: white; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); - align-items: center; + .header-nav nav ul{ + display: none; + } + #mainvisual .top-title .site-title{ + display: none; + } + .info-item{ + flex-direction: column; + margin: 0 auto; + } + .iframe-wrap{ + padding-top: 50px; + width: 100%; + } } - .header-nav .sp-logo{ - display: block; + + /* -------------------------------------- //ホーム ---------------------------------------*/ + + /* -------------------------------------- about ---------------------------------------*/ + #about{ + margin-bottom: 60px; + margin-top:60px; } - .header-nav nav ul{ - display: none; - } - #mainvisual .top-title .site-title{ - display: none; - } - .info-item{ - flex-direction: column; - margin: 0 auto; - } - .iframe-wrap{ - padding-top: 50px; - width: 100%; - } -} - -@media screen and (max-width: 746px){ -.section-title { - font-size: 1.75rem; - position: relative; - display: inline-block; - margin-bottom: 50px; -} -.section-title::before{ - background-image: none; - vertical-align: baseline; - content: ''; - position: absolute; - bottom: -20px; - display: inline-block; - width: 60px; - height: 5px; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - background-color: rgb(255, 153, 0); -} -.section-title::after{ - display: none; -} - header.scroll-nav{ - background: white; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); - align-items: center; + .about-text{ + font-size: 1.2rem; } - .header-nav .sp-logo{ - display: block; + + /* -------------------------------------- //about ---------------------------------------*/ + + + + + /* --------------------------------------- Q&A ----------------------------------------------*/ + @keyframes slidein { + 0% { + opacity: 0; + transform: translateY(-5px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } } - .header-nav nav ul{ - display: none; + .qa_list{ + position: relative; + margin: 20px 20px 30px 20px; + border: dashed black; + border-width: 0 0 2px 0; + color: black; + } + .qa_list:hover{ + color: rgb(255, 60, 0); + } + .qa_list .plus{ + position: relative; + display: inline-flex; + font-size: 25px; + padding: 5px; + transition: .3s; + } + .qa_list input[type="checkbox"]:checked ~ .plus{ + transform: rotate(45deg); + } + .qa_list label{ + position: absolute; + top: 3px; + left: 30px; + padding: 5px; + font-size: 23px; + cursor: pointer; + } + .qa_list .ans{ + position: relative; + max-height: 0; + overflow: hidden; + color: black; + margin: 5px; + transition: max-height .4s ease; + } + .qa_list .ans span{ + font-size: 25px; + } + .qa_list input[type="checkbox"]:checked ~ div.ans{ + max-height: 300px; + animation: slidein 0.5s; + transition: max-height .6s ease; + } + .qa_list input{ + display: none; + } + + + /* --------------------------------------- //Q&A ----------------------------------------------*/ + + /* ---------------------------------------- class-content -----------------------------------------*/ + .class-content-items{ + background-color: powderblue; + box-shadow: 0 0 8px 4px #ccc; + padding: 60px; + margin-bottom: 60px; + margin-top: 60px; + font-size: 1.1rem; + } + .class-content-items-text{ + text-align: left; + } + #class-content .class-content-items { + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: row; + flex-wrap: wrap; + } + .class-content-text{ + padding-top: 30px; + } + .class-content-items-left{ + width: 60%; + padding-right: 35px; + border-right: solid 2px #446; + } + .class-content-dl-left{ + margin-right: 35px; + } + .class-content-dl > dt{ + background-color: rgb(87, 87, 87); + color: white; + padding: 3px 4px; + display: inline-block; + margin-bottom: 4px; + } + .class-content-dl > dd{ + margin-left: 60px; + margin-bottom: 5px; + } + .bottom{ + margin-left: 25px; + } + .class-content-dl dt { + margin: 0 1ex; padding: 0 1ex; width: 6em; + border:rgb(80, 224, 243) solid; border-width: 0 0 1px 1.2em; + } + + .page-btn-ul{ + display: flex; + justify-content: center; + } + .page-btn-ul li{ + list-style: none; + margin-right: 30px; + margin-left: 30px; + font-size: 1.6rem; + + } + .page-btn-ul li a{ + color: #000; + text-decoration: none; + } + .page-btn-ul li:hover{ + border-bottom: black double 7px; + } + @media screen and (min-width: 1100px){ + .framebox { + border: double 5px gold; + display: block; + position: absolute; + left: 60% ; + bottom: 10px; + } + .clear {clear: both;} + } + @media screen and (max-width: 1099px){ + .framebox { + border: double 5px gold; + display: block; + margin-left: 40px; + } + } + + /* ----------------------------------------//class_content -----------------------------------------*/ + + /*------------------------------------------ infoのcss -------------------------------------------------*/ + table.LectureSchedule{ + text-align: center; + border-collapse: collapse; + border: 1px solid black; + margin: 0 auto; + } + table.LectureSchedule td.num{ + text-align: center; + } + + table.LectureSchedule td.date{ + text-align: left; + padding-left: 0.7em; + } + + table.LectureSchedule td.room{ + text-align: left; + padding-left: 0.7em; + padding-right: 0.7em; + } + table.LectureSchedule td.lesson{ + text-align: left; + padding-left: 0.5em; + } + .guide a{ + color: rgb(0, 132, 255); + display: block; + border: rgb(0, 132, 255) solid 2px; + border-radius: 5px; + background-color: white; + margin-left: 4px; + margin-bottom: 4px; + } + ul.guide{ + display: flex; + flex-wrap: wrap; + margin-bottom: 1rem; + } + ul.guide li{ + position: relative; + list-style: none; + } + ul.guide a:hover{ + color: white; + transition: 0.7; + background-color: rgb(0, 132, 255); + } + + ul.guide li a{ + text-decoration: none; + padding:0 12px ; + } + + .zoom-h1 {text-align:center; + color: #364e96; + border: solid 3px #364e96; + padding: 0.5em; + border-radius: 0.5em;} + .zoom-p{font-size:150%; + text-indent:1em; + } + .zoom-h3:before { text-indent:1em; + content: counter(number) "-" counter(section); + } + .zoom-h3 { text-indent:1em; + counter-increment: section; + } + .zoom-h2:before { + content: counter(number) "."; + } + .zoom-h2 { + counter-increment: number; + } + .zoom-title { + margin-top: 100px; + } + + + /*------------------------------------------//infoのcss -------------------------------------------------*/ + + /*------------------------------------------FAQ -------------------------------------------------*/ + h2.faq-section{ + text-align: center; + margin: 3rem 0; + width: 100%; + } + div.faq-list{width: 100%;} + + div.faq-list dl{ + position: relative; + left: 50%; + transform: translateX(-50%); + width: 70%; + padding: 15px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + background-color: white; + margin-bottom: 2rem; + border-radius: 10px; + transition: .3s; + } + div.faq-list dl:hover{ + box-shadow: 0 0 8px gray; + cursor: pointer; + } + div.faq-list dl.act{ + border-radius: 10px; + background-color: #8fcfb5; + transition: .3s; + } + div.faq-list dl dt{ + width: 100%; + font-size: 1rem; + padding: 15px; + } + div.faq-list dl dt::before{ + padding:0 1rem 1rem; + font-size: 1.5rem; + color: #e02f3b; + content: "Q"; + } + div.faq-list dl dt::after{ + font-size: 1.5rem; + float: right; + transition: .3s; + content: "+"; + } + div.faq-list dl dt.question::after{ + transform: rotate(-45deg); + } + div.faq-list dl dt.question{ + color: white; + } + div.faq-list dl dd{ + width: 100%; + max-height: 0px; + overflow: hidden; + transition:max-height .4s ease; + } + div.faq-list dl dd::before{ + padding:0 1rem 1rem; + font-size: 1.5rem; + color: #007a9f; + content: "A"; + } + div.faq-list dl dd.faq-show{ + max-height: 300px; + transition:max-height .8s ease; + } + + /*------------------------------------------//FAQ -------------------------------------------------*/ + + + /*------------------------------------------ footer -------------------------------------------------*/ + footer { /* XXX: Change ME! */ + border-top: 1px dashed #888; + text-align: right; font-size: 70%; + } + table.school tr {visibility: collapse;} + table.school tr.match {visibility: visible;} + table.border, table.border td, table.border th { + border: 1px solid #446; border-collapse: collapse; padding: 0.2ex 0.4ex; + } + table.border th {text-align: left; padding: 0.2ex 0.8ex;} + table.form th:first-child {min-width: 10em;} + + + /*------------------------------------------ //footer -------------------------------------------------*/ + + /*------------------------------------------ media -------------------------------------------------*/ + @media screen and (max-width: 746px){ + #home h3{ + font-size: 1.2rem; + } + #home p{ + font-size: 0.8rem; + line-height: 1.85; + } + .aiming_top{ + max-width: 500px; + } + + .section-title { + font-size: 1.3rem; + position: relative; + display: inline-block; + margin-bottom: 50px; + margin-top: 50px; + } + .section-text{ + font-size: 0.8rem; + } + .section-title::before{ + background-image: none; + vertical-align: baseline; + content: ''; + position: absolute; + bottom: -20px; + display: inline-block; + width: 60px; + height: 5px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background-color: rgb(255, 153, 0); + } + .section-title::after{ + display: none; + } + header.scroll-nav{ + background: rgba(255, 255, 255, 0.87); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); + align-items: center; + } + .header-nav .sp-logo{ + display: block; + } + .header-nav nav ul{ + display: none; + } + + #mainvisual .top-title .site-title{ + display: none; + } + #home-about h2{ + font-size: 1.3rem; + } + #home-about .home-items img{ + width: 200px; + height: 150px; + } + #home-about .home-items h3{ + font-size: 1rem; + } + #home-about .home-items p{ + font-size: .8rem; + line-height: 1.85; + } + .aiming_top{max-width: 600px;} + .qa_list label{ + font-size: 17.5px; + z-index: 1; + } + .qa_list .ans{ + margin-top:10px; + font-size: 17.5px; + } + .qa_list .ans span{font-size: 19px;} + .info-item{ + flex-direction: column; + margin: 0 auto; + } + .iframe-wrap{ + padding-top: 50px; + width: 100%; + } + .class-content-items{ + font-size:1rem; + } + #home-info{padding: 0 20px 20px 20px;} + #home-info img{height: 200px;} + .home-info-address_title {font-size: 1em;} + iframe{ + width: 100%; + height: 300px;} + + .wrapper { + padding-top: 0; + padding-bottom: 30px; + } + .about-text{ + font-size: 0.9rem; + } + } + @media screen and (max-width: 1024px){ + #hamburger-menu{ + opacity: 0; + position: fixed; + } + label .buns{ + position: fixed; + top: 0.8em; + right: 1em; + z-index:3; + height: 2em; + width: 2em; + } + label .buns::before, + label .buns::after, + label .buns .patty { + position: absolute; + left: 0; + width: 100%; + height: 3.5px; + border-radius: 5px; + background: #333; + content: ""; + transition:all .3s; + } + label .buns .patty-name{ + display: block; + position: absolute; + left: 0; + width: 100%; + transition:all .3s; + top: 115%; + font-size: 0.7rem; + } + label .buns::before{ + top: 0; + transform-origin: top left; + } + label .buns .patty{top: 45%;} + label .buns::after{ + bottom: 0; + transform-origin: bottom left; + } + .header-nav nav ul{ + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 2; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: flex-start; + transform: translateX(-120%); + } + .bd-no{display: none;} + .header-nav nav ul::before{ + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: -1; + width: 25em; + background: rgb(172, 255, 234); + transform: skewX(-20deg) translateX(-200%); + transform-origin: bottom left; + transition: transform.3s; + content: ""; + } + + .header-nav nav ul li{ + margin: 1em 1em; + padding: 0.2em 1em; + transform: translateX(-120%); + transition: all .3s, transfrom .5s; + transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + } + + #hamburger-menu:checked + label .buns::before, + #hamburger-menu:checked + label .buns::after{width: 130%;} + #hamburger-menu:checked + label .buns .patty{transform: scale(0);} + #hamburger-menu:checked + label .buns::before {transform: rotate(45deg);} + #hamburger-menu:checked + label .buns::after {transform: rotate(-45deg);} + #hamburger-menu:checked ~ nav ul{transform:translateX(0%);} + #hamburger-menu:checked ~ nav ul::before {transform: skewX(-20deg) translateX(-60%);} + #hamburger-menu:checked ~ nav ul li{transform: translateX(0);} + #hamburger-menu:checked ~ .light-dark{ + background: #000; + opacity: .5; + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + } + .home-items .what_study{ + order: 1; + } + + /* ------------fag--------- */ + div.faq-list dl{width: 85%;} + div.faq-list dl dd,div.faq-list dl dt{ + width: 100%; + font-size: 1rem; + } + div.faq-list dl dt::after, + div.faq-list dl dd::before, + div.faq-list dl dt::before{font-size: 1.2rem;} + /* ------------fag-end--------- */ + } + @media screen and (max-width : 499px){ + #mainvisual{height: 460px;} + #mainvisual .fade li img { + width: 100%; + height: 450px; + } + ul.guide li a{ + font-size: 17px; + } + table.LectureSchedule{ + font-size: 13px; + } + table.LectureSchedule td.num{ + padding: 0; + } + #class-content .class-content-items { + display: flex; + justify-content: start; + } + .class-content-items{ + padding: 10px; + } + .class-content-dl > dd { + margin-left: 25px; + } + .class-content-items-text{ + display: block; + width: 100%; + text-align: center; + padding-bottom:15px; + } + } + @media screen and (max-width: 746px){ + .home-about-title{ + margin-top: 90px; + } + .what_study{ + margin-bottom: 0; + } + .umi-img{ + margin-top: 35px; + margin-bottom: 35px; + } + .header-nav { + line-height: 1.0; + padding: 0 2%; } - #mainvisual .top-title .site-title{ - display: none; - } - #home-about h2{ - font-size: 1.6rem; - } - .home-items img{ - width: 250px; - height: 178px; - } - #home-about .home-items h3{ - font-size: 1.2rem; - } - #home-about .home-items p{ - font-size: 1.1rem; - line-height: 1.85; - } - .aiming_top{ - max-width: 600px; - } - .qa_list label{ - font-size: 17.5px; - } - .info-item{ - flex-direction: column; - margin: 0 auto; - } - .iframe-wrap{ - padding-top: 50px; - width: 100%; - } -} -/* メモ -!わかりやすく、探しやすく、再利用しやすく、拡張しやすくする -1 h2タグにはsection-titleというclass名をつけて全てのページを共通化させる -2 h2のsection-titleがつくものはsectionタグで囲む。sectionタグには -.wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 5%; - margin-bottom: 80px; - } -というクラス名とcssをつけて画面幅いっぱいより少し小さめの幅で全て収めるように共通化させる。 -sectionごとの余白はmargin-top:50px; margin-bottom:80px;で共通化。 -margin-topだけはつけるとことつけないとこがあるから.wrapperに入れない。 -3 */ \ No newline at end of file + } + .home-notice-title{ + margin-top: 0; + } + /* メモ + !わかりやすく、探しやすく、再利用しやすく、拡張しやすくする + 1 h2タグにはsection-titleというclass名をつけて全てのページを共通化させる + 2 h2のsection-titleがつくものはsectionタグで囲む。sectionタグには + .wrapper { + max-width: 1200px; + margin: 0 auto; + padding: 0 5%; + margin-bottom: 80px; + } + というクラス名とcssをつけて画面幅いっぱいより少し小さめの幅で全て収めるように共通化させる。 + sectionごとの余白はmargin-top:50px; margin-bottom:80px;で共通化。 + margin-topだけはつけるとことつけないとこがあるから.wrapperに入れない。 + 3 */ + /*------------------------------------------ //media -------------------------------------------------*/ + \ No newline at end of file diff --git a/testpage/test.html b/testpage/test.html index 5c67470..348eda0 100644 --- a/testpage/test.html +++ b/testpage/test.html @@ -8,7 +8,7 @@ - + Document @@ -28,7 +28,7 @@