/* * CSS for Junior-Doctor Chokai Academy */ @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%; } dt {font-weight: bold;} dd {margin-left: 1.5em;} /* --------------------------------------ヘッダー ------------------------------------------------------------*/ .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; } .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; } /*--------------------------------------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; } .section-title::after{ content: ''; display: inline-block; width: 170px; height: 170px; background-image: url(../jd/img/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; } /*--------------------------------------//common----------------------------------*/ /* -----------------------------------------------------メインビジュアル */ #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 span{ 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; } .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; } .header-nav .sp-logo{ display: block; } .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%; } } /* -------------------------------------- //ホーム ---------------------------------------*/ /* -------------------------------------- about ---------------------------------------*/ #about{ margin-bottom: 60px; margin-top:60px; } .about-text{ font-size: 1.2rem; } /* -------------------------------------- //about ---------------------------------------*/ /* --------------------------------------- Q&A ----------------------------------------------*/ @keyframes slidein { 0% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0px); } } .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{ } .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: 4px; border-radius: 5px; background: #333; content: ""; transition:all .3s; } 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%; } } .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 -------------------------------------------------*/