@media (max-width: 1100px){ body { padding-top: 50px; } } body { padding-top: 56px; background: url(/assets/images/bg-body-min.png) no-repeat center top; background-attachment: fixed; } @media (max-width: 1100px){ body { padding-top: 0; } } /* ------------------------------------------ LAYOUTS ------------------------------------------ */ a:link { color: #00a78b; text-decoration: none; } a:hover { color: #ddd; text-decoration: underline; } a:visited { color: #00a78b; text-decoration: none; } a:active { color: #02B290; text-decoration: none; } header { position: fixed; font: 15px 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; line-height: 150%; top: 0; left: 0; width: 100%; height: 50px; letter-spacing: 0; background: rgba(255,255,255,0.95); border-bottom: solid 1px #e9e9e9; z-index: 1000; } header .btn { display: inline-block; background: #02B290; background: -webkit-linear-gradient(top, #02B290, #00A784); background-image: -webkit-linear-gradient(#02B290 0px, #00A784 100%); background-image: linear-gradient(#02B290 0px, #00A784 100%); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-radius: 0.2rem; border-style: solid; border-width: 1px; color: #fff !important; cursor: pointer; margin: 0; padding: 0.3rem 1.5rem; text-align: center; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; font-size: 100%; } header .inner { width: 100%; max-width: 980px; margin: 0 auto; } header h1 { width: 225px; float: left; padding: 8px 0; margin: 0px; } header h1 img { width: 225px; height: 34px; } header .login-btn { float: right; display: inline-block; margin-left: 0.7em; padding-top: 8px; } header nav { display: inline-block; float: right; line-height: 48px; } header nav ul li { position: relative; display: inline-block; } header nav ul li a { display: inline-block; padding: 0 0.7em; } header nav.global-navi-201506 ul li a { padding: 0 0.7em; font-size: 86%; } header nav ul li a:hover { text-decoration: none; background: #f1f1f1; color: #00a78b; } header nav ul li.active:after { border: 5px solid transparent; border-top-color: #00a78b; border-bottom-width: 0; content: ""; display: block; left: 50%; top: 0; position: absolute; width: 0; margin-left: -4px; } /* ------------------------------------------ for tablet ------------------------------------------ */ @media (max-width: 768px) { header { position: static; height: auto; } header h1 { width: 100%; float: none; text-align: center; } header .login-btn { display: block; width: 50%; float: none; margin: 0 auto; padding-top: 0; text-align: center; } header .login-btn a { width: 100%; } header nav { display: block; padding: 0.5em; float: none; line-height: 200%; text-align: center; } } /* ------------------------------------------ for sp ------------------------------------------ */ @media (max-width: 480px) { html body { padding-top: 0px; } header * { box-sizing: border-box; } header .inner { padding-bottom: 12px; } header .global-navi { display: none; } } /* ------------------------------------------ snsbutton ------------------------------------------ */ .social-button__wrap { margin: 8px 0px 20px 0px; } .social-button__wrap ul { display: flex; gap: 8px; } .social-button__wrap ul li { position: relative; } .social-button__wrap ul .entry-social-hatena { top: 4px; } .social-button__wrap ul .entry-social-x-twitter { top: 4px; } .intro .social-button__wrap ul .entry-social-hatena, .intro .social-button__wrap ul .entry-social-x-twitter { top: 8px; } @media screen and (max-width: 600px) { .social-button__wrap ul .entry-social-hatena, .social-button__wrap ul .entry-social-x-twitter { top: 0px; } } .bannerArea .social-button__wrap { margin: 8px 0px 0px 0px; } /* ------------------------------------------ Font ------------------------------------------ */ .tk-chibi { font-family: "FOT-筑紫A丸ゴシック Std D" !important; } /* ------------------------------------------ WISYSIG ------------------------------------------ */ .know-main .column__right a:link, .know-main .column__right a:visited { -webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s; transition: all 0.5s; color: #4BC0E0; text-decoration: underline; } .know-main .column__right a:hover { color: #ABEFED; } .prac-main .column__right a:link, .prac-main .column__right a:visited { width: fit-content; -webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s; transition: all 0.5s; display: inline-block; color: #FF7892; text-decoration: underline; } .prac-main .column__right a:hover { color: #FFCFDE; } .know-main h2, .prac-main h2 { width: 287px; height: 30px; font-size: 10px; margin-left: -12px; margin-bottom: 8px; position: relative; color: #666666; display: block; font-weight: bold; padding-top: 16px; padding-left: 28px; background-size: 315px 45px; background-repeat: no-repeat; } @media screen and (min-width: 768px) { .know-main h2, .prac-main h2 { font-size: 18px; width: 415px; height: 50px; padding-left: 32px; margin-bottom: 20px; line-height: 50px; } } .know-main h2 em, .prac-main h2 em { display: block; font-weight: bold; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; transform: rotate(-1deg); -moz-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); } .know-main h2 { background-image: url(//developer.movabletype.io/themeguide/images/know_h2Bg.svg); overflow: hidden; } @media screen and (min-width: 768px) { .know-main h2 { background-size: 455px 72px; transform: rotate(-1.2deg); -moz-transform: rotate(-1.2deg); -webkit-transform: rotate(-1.2deg); } } .prac-main h2 { background-image: url(//developer.movabletype.io/themeguide/images/prac_h2Bg.svg); overflow: hidden; } @media screen and (min-width: 768px) { .prac-main h2 { background-size: 455px 72px; transform: rotate(-1.2deg); -moz-transform: rotate(-1.2deg); -webkit-transform: rotate(-1.2deg); } } .know-main .maincolumn h3, .prac-main .maincolumn h3 { display: inline-block; font-size: 16px; padding: 0 12px 0 8px; margin-bottom: 16px; background-image: url(//developer.movabletype.io/themeguide/images/kp_h3Bg.png); background-repeat: repeat-x; background-position: 0 20px; background-size: 16px 10px; font-family: "FOT-筑紫A丸ゴシック Std D"; font-style: normal; font-weight: 400; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; letter-spacing: 0.15em; } @media screen and (min-width: 768px) { .know-main .maincolumn h3, .prac-main .maincolumn h3 { font-size: 24px; background-position: 0 20px; background-size: 26px 16px; } } @media screen and (min-width: 1100px) { .know-main .maincolumn h3, .prac-main .maincolumn h3 { font-size: 26px; background-position: 0 20px; background-size: 32px 20px; } } .know-main .maincolumn h3 { color: #4BC0E0; } .prac-main .maincolumn h3 { color: #FF7892; } .know-main .maincolumn p, .prac-main .maincolumn p { margin: 0px 0 32px; } .know-main .maincolumn .click, .prac-main .maincolumn .click { position:relative; } .know-main .maincolumn .click:before , .prac-main .maincolumn .click:before { content: ""; width: 28px; height: 28px; background: url(//developer.movabletype.io/themeguide/images/bigicon.png) no-repeat; background-size: 16px 16px; background-position: 6px 6px; position: absolute; top: 8px; left: 8px; text-align: center; display: block; background-color: #666666; z-index: 99; border-radius: 4px; } .know-main .maincolumn .click:hover:before , .prac-main .maincolumn .click:hover:before { background-color: #cccccc; } .know-main .maincolumn img.arrow, .prac-main .maincolumn img.arrow { margin: -20px auto; } @media screen and (min-width: 768px) { .know-main .maincolumn img.arrow, .prac-main .maincolumn img.arrow { width: 45px; height: 26px; margin: 0 auto; } } .know-main .maincolumn img, .prac-main .maincolumn img { max-width: 100%; height: auto; display: block; margin: 0px 0 24px; } .know-main .maincolumn h4, .prac-main .maincolumn h4 { font-size: 135%; line-height: 1.35; margin-bottom: 24px; font-weight: bold; padding-bottom: 6px; border-bottom: 2px dotted #cccccc; } .know-main .maincolumn .dlBtn, .prac-main .maincolumn .dlBtn { display: inline-block; border-radius: 4px; text-decoration: none; box-shadow: 1px 1px 1px 0.5px #666666; -webkit-transition: box-shadow 0.1s, -webkit-transform 0.1s, opacity 0.3s; -webkit-transition: box-shadow 0.1s, opacity 0.3s, -webkit-transform 0.1s; transition: box-shadow 0.1s, opacity 0.3s, -webkit-transform 0.1s; transition: box-shadow 0.1s, transform 0.1s, opacity 0.3s; transition: box-shadow 0.1s, transform 0.1s, opacity 0.3s, -webkit-transform 0.1s; padding: 4px 8px 4px 12px; background-color: #ffffff; border: 4px solid #cccccc; position: relative; } @media screen and (min-width: 1100px) { .know-main .maincolumn .dlBtn, .prac-main .maincolumn .dlBtn { box-shadow: 0.5px 0.5px 2px 1px #666666; } } .know-main .maincolumn .dlBtn:active, .prac-main .maincolumn .dlBtn:active { opacity: 0.8; -webkit-transform: translate(1px, 1px); transform: translate(1px, 1px); } .know-main .maincolumn .dlBtn i, .prac-main .maincolumn .dlBtn i { margin-right: 4px; } .know-main .maincolumn .tophArea, .prac-main .maincolumn .tophArea { position: relative; height: 82px; margin-bottom: 24px; } @media screen and (min-width: 1100px) { .know-main .maincolumn .tophArea, .prac-main .maincolumn .tophArea { height: 117px; margin-bottom: 12px; } } .know-main .maincolumn .tophArea .tophBalloon, .prac-main .maincolumn .tophArea .tophBalloon { font-size: 10px; line-height: 1.25; font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif; width: 60%; padding: 12px; background-position: top center, bottom center, top center; background-repeat: no-repeat, no-repeat, repeat-y; background-size: 100% 6px, 100% 6px, 100% 6px; position: relative; color: #ffffff; } @media screen and (min-width: 768px) { .know-main .maincolumn .tophArea .tophBalloon, .prac-main .maincolumn .tophArea .tophBalloon { font-size: 12px; width: 216px; line-height: 1.5; padding: 12px; margin-top: 12px; margin-left: 12px; background-size: 240px 12px, 240px 12px, 240px 12px; } } @media screen and (min-width: 1100px) { .know-main .maincolumn .tophArea .tophBalloon, .prac-main .maincolumn .tophArea .tophBalloon { width: 380px; padding: 12px 20px; margin-top: 24px; margin-left: 24px; background-size: 420px 12px, 420px 12px, 420px 12px; } } .know-main .maincolumn .tophArea .tophBalloon:before, .prac-main .maincolumn .tophArea .tophBalloon:before { content: ""; position: absolute; right: -10px; top: 12px; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px; } .know-main .maincolumn .tophBalloon { background-image: url(//developer.movabletype.io/themeguide/images/knowledge_tophBaloon_top.png), url(//developer.movabletype.io/themeguide/images/knowledge_tophBaloon_bottom.png), url(//developer.movabletype.io/themeguide/images/knowledge_tophBaloon_roop.png); } .know-main .maincolumn .tophBalloon:before { border-color: transparent transparent transparent #4BC0E0; } .prac-main .maincolumn .tophBalloon { background-image: url(//developer.movabletype.io/themeguide/images/practice_tophBaloon_top.png), url(//developer.movabletype.io/themeguide/images/practice_tophBaloon_bottom.png), url(//developer.movabletype.io/themeguide/images/practice_tophBaloon_roop.png); } .prac-main .maincolumn .tophBalloon:before { border-color: transparent transparent transparent #FF7892; } .prac-main .maincolumn .tophBalloon a, .know-main .maincolumn .tophBalloon a { color:#ffffff; text-decoration: underline; } .maincolumn .tophArea .tophArea__img { position: absolute; top: -15px; right: 0px; width: auto; height: 75px; } @media screen and (min-width: 1100px) { .maincolumn .tophArea .tophArea__img { width: auto; height: 115px; top: -28px; right: 0px; } } .know-main .maincolumn strong { background-color: #E7FBFA; font-weight: bold;} .prac-main .maincolumn strong { background-color: #FFF1F5; font-weight: bold;} .prac-main .maincolumn .asset-image, .know-main .maincolumn .asset-image{ border: 1px solid #cccccc; } .prac-main .maincolumn .caption , .know-main .maincolumn .caption { margin-top: -20px; font-size: 82%; } .know-main .maincolumn .dataTable { width: auto; height: auto; padding: 8px; border: 2px dotted #eeeeee; background-color: #E7FBFA; margin-bottom: 40px; position: relative; } @media screen and (min-width: 768px) { .know-main .maincolumn .dataTable { padding: 16px; } } .know-main .maincolumn .dataTable dt { padding-left: 1em; font-weight: bold; position: relative; display: inline-block; margin-bottom: 4px; z-index: 1;} .know-main .maincolumn .dataTable dt:before { content: "★"; color: #4BC0E0; position: absolute; left: 0px;} @media screen and (min-width: 768px) { .know-main .maincolumn .dataTable dt:before { font-size: 0.5em; top: 0.2em; } } .prac-main .maincolumn .dataTable, .prac-main .maincolumn .textTable { width: auto; height: auto; padding: 8px; border: 2px dotted #eeeeee; background-color: #fff9fc; margin-bottom: 40px; position: relative; } @media screen and (min-width: 768px) { .prac-main .maincolumn .dataTable, .prac-main .maincolumn .textTable { padding: 16px; } } .maincolumn .dataTable code, .maincolumn .textTable code, .maincolumn .dataTable .path, .maincolumn .textTable .path { background-color: #ffffff; } .prac-main .maincolumn .dataTable dt { padding-left: 1em; font-weight: bold; position: relative; display: inline-block; margin-top: 20px; margin-bottom: 4px; z-index: 1;} .prac-main .maincolumn .dataTable dt:before { content: "★"; color: #FF7892; position: absolute; left: 0px; } @media screen and (min-width: 768px) { .prac-main .maincolumn .dataTable dt:before { font-size: 0.5em; top: 0.2em;} } .know-main .maincolumn .dataTable dd, .prac-main .maincolumn .dataTable dd { margin-bottom: 4px; margin-left: 1.2em; } .know-main .maincolumn .dataTable *:last-child, .prac-main .maincolumn .dataTable *:last-child { margin-bottom:0px;} .know-main .maincolumn .dataTable dt:first-child, .prac-main .maincolumn .dataTable dt:first-child { margin-top:0px;} .know-main .maincolumn a img, .prac-main .maincolumn a img { -webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s; transition: all 0.5s; } .know-main .maincolumn a img:hover, .prac-main .maincolumn a img:hover { opacity: 0.8; } .know-main .maincolumn .fileName { border:2px dotted #ABEFED; padding: 0px 4px; margin:0 2px; border-radius: 2px; } .prac-main .maincolumn .fileName { width: fit-content; border:2px dotted #FFCFDE; padding: 0.25rem 0.5rem; margin: 0.5rem 0.5rem; border-radius: 2px; display: inline-block; } .maincolumn pre { max-width: 594px; min-width: 320px; display:inline-block; background-color: #F2F2F2; border-radius: 4px; padding:12px; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 24px; } .maincolumn pre code { display:block; } .maincolumn code, .maincolumn .path { display: inline-block; padding: 0px 4px; margin:0 2px; background-color: #F2F2F2; color: #666666; font-size: 92%; border-radius: 2px; font-family: Helvetica, sans-serif; } /*next.prev*/ .know-main .nextprev_area, .prac-main .nextprev_area { width: 100%; font-size: 118%; display: flex; flex-direction: row-reverse; justify-content: space-between; } .know-main .next_area, .prac-main .next_area { float: right; position: relative; height: 24px; line-height: 24px; background-size: 32px 24px; background-repeat: no-repeat; background-position: right; padding-right: 35px; right: 0px; z-index: 100; } @media screen and (min-width: 768px) { .know-main .next_area, .prac-main .next_area { height: 48px; line-height: 48px; background-size: 64px 48px; padding-right: 70px; -webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transition: all 0.15s; transition: all 0.15s; } .know-main .next_area:hover, .prac-main .next_area:hover { right: -4px; } .know-main .next_area:hover:after, .prac-main .next_area:hover:after { content: ""; position: absolute; bottom: 8px; display: block; height: 4px; width: 80px; background-color: #FEF78B; } } .know-main .prev_area, .prac-main .prev_area { float: left; position: relative; height: 24px; line-height: 24px; background-size: 32px 24px; background-repeat: no-repeat; background-position: left; padding-left: 35px; left: 0px; z-index: 2; } @media screen and (min-width: 768px) { .know-main .prev_area, .prac-main .prev_area { height: 48px; line-height: 48px; background-size: 64px 48px; padding-left: 70px; -webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transition: all 0.15s; transition: all 0.15s; } .know-main .prev_area:hover, .prac-main .prev_area:hover { left: -4px; } .know-main .prev_area:hover:after, .prac-main .prev_area:hover:after { content: ""; position: absolute; bottom: 8px; display: block; height: 4px; width: 80px; background-color: #FEF78B; } } .know-main .next_area { background-image: url(//developer.movabletype.io/themeguide/images/tophicon/know_next.png); } .know-main .prev_area { background-image: url(//developer.movabletype.io/themeguide/images/tophicon/know_prev.png); } .prac-main .next_area { background-image: url(//developer.movabletype.io/themeguide/images/tophicon/prac_next.png); } .prac-main .prev_area { background-image: url(//developer.movabletype.io/themeguide/images/tophicon/prac_prev.png); } /*dict*/ .dict-main .columnWrap { font-size: 0.88em; } .dict-main h2 { width: 300px; height: 60px; text-indent: -9999px; background-image: url("//developer.movabletype.io/themeguide/images/dict_title.svg"); background-size: 300px 60px; background-repeat: no-repeat; display: block; margin: 0 auto; margin-bottom: 4px; } @media screen and (min-width: 768px) { .dict-main h2 { width: 480px; height: 96px; text-indent: -9999px; background-image: url("//developer.movabletype.io/themeguide/images/dict_title.svg"); background-size: 480px 96px; background-repeat: no-repeat; } } @media screen and (min-width: 1100px) { .dict-main h2 { width: 600px; height: 115px; text-indent: -9999px; background-image: url("//developer.movabletype.io/themeguide/images/dict_title.svg"); background-size: 600px 115px; background-repeat: no-repeat; display: block; margin: 0 auto; margin-top: 12px; margin-bottom: 24px; } } .dict-main h3 { width: 287px; height: 30px; font-size: 10px; margin-left: -12px; margin-bottom: 8px; position: relative; color: #666666; display: block; font-weight: bold; padding-top: 16px; padding-left: 38px; background-image: url(//developer.movabletype.io/themeguide/images/dict_h2Bg.svg); overflow: hidden; background-size: 315px 45px; background-repeat: no-repeat; } @media screen and (min-width: 768px) { .dict-main h3 { font-size: 18px; width: 415px; height: 50px; padding-left: 38px; margin-bottom: 20px; line-height: 50px; } } .dict-main h3 em { display: block; font-weight: bold; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; transform: rotate(-1deg); -moz-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); } @media screen and (min-width: 768px) { .dict-main h3 { background-size: 455px 72px; transform: rotate(-1.2deg); -moz-transform: rotate(-1.2deg); -webkit-transform: rotate(-1.2deg); } } @media screen and (min-width: 768px) { .dict-main h3 { background-size: 455px 72px; transform: rotate(-1.2deg); -moz-transform: rotate(-1.2deg); -webkit-transform: rotate(-1.2deg); } } .dict-main .columnWrap ul { width: auto; } @media screen and (min-width: 768px) { .dict-main .columnWrap ul { width: 436px; } } .dict-main .columnWrap ul li { margin-bottom: 8px; margin-left: 1.5em; position: relative; } @media screen and (min-width: 768px) { .dict-main .columnWrap ul li { font-size: 1em; } } .dict-main .columnWrap ul li:first-child { margin-left: 0px; } .dict-main .columnWrap ul li:first-child:before { content: ""; } .dict-main .columnWrap ul li:before { content: "▶︎"; color: #CCCCCC; font-size: 0.5em; margin-left: -1.5em; position: absolute; top: 0.4em; } /* gotosample */ .prac-gotoSample { position: fixed; z-index: 700; width: 120px; height: 50px; bottom: 80px; right: -20px; background-size: 120px auto; background-image: url(//developer.movabletype.io/themeguide/images/prac_sample.png); background-repeat: no-repeat; display: block; -webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s; transition: all 0.5s; text-indent: -9999px; } .prac-gotoSample:hover { opacity: 0.5; } @media screen and (min-width: 768px) { .prac-gotoSample { width: 140px; height: 55px; bottom: 160px; background-size: 140px auto; } } @media screen and (min-width: 1100px) { .prac-gotoSample { width: 180px; height: 80px; bottom: 160px; right: -30px; background-size: 180px auto; } } /*-------*/ .dict-social { width: 100%; } .dict-social .social-button__wrap { margin:0px; } .dict-social .social-button__wrap ul li { margin: 0px 8px 0px 0px; } .dict-social .social-button__wrap ul li:before { display: none; } /* ------------------------------------------ 改行 ------------------------------------------ */ .dataTable { word-wrap: break-word; overflow-wrap: break-word; } /* ------------------------------------------ 文字サイズ ------------------------------------------ */ body { -webkit-text-size-adjust: 100%; } /* ------------------------------------------ ClearFix ------------------------------------------ */ .group, .col-group { zoom: 1; } .group:after, .col-group:after { content: ""; display: block; clear: both; } /* ------------------------------------------ 180525 ------------------------------------------ */ .intro .intro-180525 .intro__catch { color: #ffffff; text-shadow: none; margin-bottom: 32px; } .intro .intro-180525 .intro__button { background: #FE92A9; background: #fe92a9; background: -moz-linear-gradient(top, #fe92a9 0%, #fe92a9 50%, #ff7892 51%, #ff7892 100%); background: -webkit-linear-gradient(top, #fe92a9 0%,#fe92a9 50%,#ff7892 51%,#ff7892 100%); background: linear-gradient(to bottom, #fe92a9 0%,#fe92a9 50%,#ff7892 51%,#ff7892 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe92a9', endColorstr='#ff7892',GradientType=0 ); border-radius: 6px; -webkit-box-shadow: 3px 5px 10px #666666; -moz-box-shadow: 3px 5px 10px #666666; box-shadow: 3px 5px 10px #666666; color: #ffffff; font-size: 18px; margin-left: 0px 0.5rem 0.5rem 0; padding: 8px 20px; border: solid #ffffff 4px; display: inline-block; transition: box-shadow 0.1s, transform 0.1s, opacity 0.3s, -webkit-transform 0.1s; } .intro .intro-180525 .intro__button--muryo { color: #FEF78B; } .intro .intro-180525 .intro__button--mini { font-size: 18px; } @media screen and (min-width: 768px) { .intro .intro-180525 .intro__catch { color: #ffffff; text-shadow: none; letter-spacing: 8px; } .intro .intro-180525 .intro__button { font-size: 32px; border: solid #ffffff 6px; letter-spacing: 6px; padding: 16px 32px 16px 32px } .intro .intro-180525 .intro__button:active { opacity: 0.8; box-shadow: 0.5px 0.5px 2px 1px #666666; transform: translate(1px, 3px); } .intro .intro-180525 .intro__button--mini { font-size: 20px; } } /* ------------------------------------------ 180306 ------------------------------------------ */ .intro__news { background-color: rgba(255,255,255,1); z-index: 300; position: relative; padding: 0.25rem 0.5rem; width: fit-content; color: #ff7892; border-radius: 4px; margin-bottom: 8px; } .intro .intro__news a:link, .intro .intro__news a:visited { color: #4d4d4d; } .bannerArea__textBox--icon { margin-bottom: -0.5rem; } /* ------------------------------------------ Add 201907 ------------------------------------------ */ .intro .intro__bigToph { top: 90px !important } /* ------------------------------------------ Add 201801 ------------------------------------------ */ body.bg-body-ver2 { padding-top: 56px; background-attachment: fixed; } header.globalheader { height: 56px; border-bottom: none; overflow: hidden; } header.globalheader .inner { max-width: 1440px; margin: 0 auto; padding: 0 0 0 15px; } header.globalheader h1 { width: 400px; padding: 11px 0; } header.globalheader h1 a { display: inline-block; vertical-align: top; } header.globalheader h1 span { display: inline-block; margin: 5px 0 0 10px; padding-left: 10px; font-size: 10px; font-weight: normal; color: #b1b1b1; line-height: 1.3; letter-spacing: 0.1em; border-left: solid 1px #e1e1e1; vertical-align: top; } header.globalheader .login-btn { display: block; height: 56px; margin-left: 0; padding-top: 0; } header.globalheader .login-btn .btn { display: block; height: 56px; padding-top: 22px; border-radius: 0; border: none; font-size: 86%; line-height: 1; background: #fc8e00; } header.globalheader .login-btn .btn:hover { background: #fe9d1f; } header.globalheader .login-btn i { margin-right: 7px; } header.globalheader nav { display: inline-block; float: right; } header.globalheader nav.global-navi-201506 ul { font-size: 0; } header.globalheader nav.global-navi-201506 ul li { font-size: 15px; } header.globalheader nav.global-navi-201506 ul li a { display: block; line-height: 56px; padding: 0 15px; } header.globalheader nav.global-navi-201506 ul li.is-active a { background: #f1f1f1; } header.globalheader .header-modal-navi { display: none; } .global-sub-navi { background: #f1f1f1; } .global-sub-navi ul { font-size: 0; text-align: center; } .global-sub-navi ul li { display: inline-block; font-size: 13px; } .global-sub-navi ul li a { display: inline-block; padding: 12px 20px; } .global-sub-navi ul li a:hover { background: #e1e1e1; text-decoration: none; } .global-sub-navi ul li.is-active a { background: #005043; color: #fff; } .top-keyvisual-buttons, .section-buttons { max-width: 1000px; margin: 0 auto; } .top-keyvisual-buttons ul li, .section-buttons ul li { width: 50%; float: left; list-style: none; text-align: center; } .top-keyvisual-buttons ul li .btn-n, .section-buttons ul li .btn-n { width: 100%; } .top-keyvisual-buttons ul li:first-of-type .btn-n, .section-buttons ul li:first-of-type .btn-n { border-right: none; } .content-ver2 p { line-height: 2; letter-spacing: 0.1em; } .content-ver2 img { max-width: 100%; } .content-section { position: relative; padding: 70px 0; z-index: 0; } .content-section-padding-no { padding: 0; } .content-section-nopadding { padding-top: 0px; padding-bottom: 0px; margin-bottom: 70px; } .section-green-small { position: relative; padding: 50px 30px; background: #005043; color: #fff; } .section-green { position: relative; padding: 70px; background: #005043; color: #fff; } .section-green-decoration:before, .section-green-small-decoration:before { position: absolute; top: -50px; left: 6px; content: ""; display: block; width: 22px; height: 50px; background: url(/assets/images/section-green-before.png) no-repeat; background-size: 22px 50px; z-index: 10; } .section-green-decoration:after, .section-green-small-decoration:after { position: absolute; bottom: 0px; right: 6px; content: ""; display: block; width: 22px; height: 50px; background: url(/assets/images/section-green-after.png) no-repeat; background-size: 22px 50px; z-index: 10; } .section-pronet { background: #2B3039 url(/assets/images/bg-pronet.png) no-repeat 10px 10px; background-size: 63px 62px; color: #fff; } .section-split { background-image: url(/assets/images/bg-split.png); background-repeat: no-repeat; background-position: center; } .section-watercolor { padding: 100px; background: url(/assets/images/bg-main-ver3_low.jpg) no-repeat top center; text-align: center; } .section-color01 { padding: 100px 0 0 0; background: url(/assets/images/bg-color01-min.png) no-repeat top center; background-size: cover; background-attachment: fixed; text-align: center; } .section-image01 { position: relative; padding: 120px 0 100px 0; background: linear-gradient(45deg, rgba(0,0,0,0.4), rgba(0,0,0,0.9)), url(/assets/images/bg-top-feature.png) no-repeat top center; background-size: cover; text-align: center; color: #fff; } .section-image01 .image-dummy { background: rgba(255,255,255,0.2); border: solid 1px #fff; color: #fff; } .inner-narrow { max-width: 1210px; margin: 0 auto; padding: 0 15px; } .inner-wide { max-width: 1440px; margin: 0 auto; padding: 0 30px; } .content-section .entrylist { margin-bottom: 0; } .content-ver2 .entrylist { margin-bottom: 0; letter-spacing: 0.1em; } .content-ver2 .entrylist li { margin-bottom: 20px; padding-bottom: 20px; border-bottom: solid 2px rgba(255,255,255,0.15); list-style: none; } .content-ver2 #top-news-pickup .entrylist li:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .entrylist-meta { width: 210px; float: left; } .entrylist-title { margin-left: 230px; } .entrylist-meta-deta { width: 80px; float: left; padding-top: 3px; font-size: 10px; } .entrylist-meta-category { width: 120px; float: right; } .entrylist-meta-category .btn-n-label { width: 100%; text-align: center; } .entrylist-title { padding-top: 3px ; } .entrylist-title a { color: #fff; font-weight: normal; } .content-ver2 h2.content-title { margin-bottom: 40px; letter-spacing: 0.1em; line-height: 1.3; text-align: center; font-size: 28px; font-family: "Noto Sans Japanese"; font-weight: 500; } .content-ver2 h2.content-title .label { display: inline-block; padding: 6px 15px; margin-bottom: 10px; background: #fc8e00; color: #fff; font-size: 17px; font-weight: normal; } .content-ver2 .content-subtitle { margin-bottom: 20px; letter-spacing: 0.1em; line-height: 1.5; text-align: center; font-size: 18px; font-family: "Noto Sans Japanese"; font-weight: 500; color: #00a78b; } .content-title-small { margin-bottom: 20px; letter-spacing: 0.2em; line-height: 1.3; text-align: center; font-size: 23px; font-family: "Noto Sans Japanese"; font-weight: 700; } .aboutlist li { position: relative; width: 31%; padding: 30px; float: left; margin: 0 3.5% 50px 0; background: rgba(255,255,255,0.9); list-style: none; border: solid 2px #005043; } .aboutlist li.nomarginbottom { margin-bottom: 0; } .aboutlist li:before { position: absolute; top: -15px; left: 50%; content: ""; display: block; width: 2px; height: 30px; margin-left: -1px; background: #005043; } .aboutlist li:nth-child(3n) { margin-right: 0; } .aboutlist li.offset { margin-left: 17%; } .aboutlist-col2 li { width: 46.5%; } .aboutlist-col2 li.offset { margin-left: 26.75%; } .aboutlist-col2 li:nth-child(2n) { margin-right: 3.5%; } .aboutlist-col2 li:nth-child(2n) { margin-right: 0; } .aboutlist-image img { border: solid 1px #e1e1e1; } .aboutlist li.aboutlist-large { width: 100%; margin-right: 0; } .aboutlist li.aboutlist-middle { width: 48%; margin-right: 4%; } .aboutlist li.aboutlist-large .aboutlist-image { width: 400px; float: right; } .aboutlist li.aboutlist-middle .aboutlist-image { margin-bottom: 20px; } .aboutlist-detail { margin-right: 430px; } .aboutlist li.aboutlist-nomarginright { margin-right: 0; } .aboutlist .content-subtitle { font-weight: bold; } .image-dummy { padding: 100px; background: #fff; color: #111; text-align: center; } .content-ver2 .has-margin-bottom { margin-bottom: 2em; } .content-ver2 .has-margin-bottom-s { margin-bottom: 1em; } .content-ver2 .has-margin-bottom-l { margin-bottom: 3em; } .content-ver2 .has-margin-bottom-no { margin-bottom: 0; } .align-right { text-align: right; } .align-center { text-align: center; } .text-small { font-size: 79%; } .imagelist li { position: relative; width: 48%; float: left; padding: 30px; margin: 0 4% 50px 0; background: rgba(255,255,255,0.9); border: solid 2px #005043; list-style: none; } .imagelist li:before { position: absolute; top: -15px; left: 50%; content: ""; display: block; width: 2px; height: 30px; margin-left: -1px; background: #005043; } .imagelist li:nth-child(2n) { margin-right: 0; } .imagelist-image { margin-bottom: 15px; } .imagelist-image img { border: solid 1px #e1e1e1; } .imagelist-detail { } .imagelist-detail .btn-n { width: 100%; } .content-section .section-content-col6 { width: 50%; float: left; padding: 70px 40px; } .content-section .section-content-col6:first-of-type { border-right: solid 2px rgba(255,255,255,0.15); } #footer-top-ver2 { background: #111; } .footer-top-ver2 { padding: 50px 0 30px 0 !important; } .footer-top-ver2 .footer-navi { max-width: none; padding: 0 30px; margin: 0 auto 20px auto; } .footer-top-ver2 .footer-bottom { max-width: none; padding: 0 30px; margin: 0 auto; } .footer-top-ver2 .footer-navi .footer-navi-col { width: 23%; padding-right: 0; margin-right: 2%; border-right: solid 1px rgba(255,255,255,0.15); box-sizing: border-box; } .footer-top-ver2 .footer-navi ul:last-of-type { margin-right: 0; border-right: none; } .top-feature-text { margin-bottom: 40px; font-size: 86%; } .top-feature-text h2.content-title { margin-bottom: 20px; font-size: 25px; } .top-feature-text .col p { text-align: left; } .top-feature-main-title { margin-bottom: 20px; letter-spacing: 0.1em; line-height: 1.5; font-size: 28px; font-family: "Noto Sans Japanese"; font-weight: 700; color: #005043; } .top-feature-main-text { margin-top: -20px; letter-spacing: 0.1em; line-height: 1.8; font-size: 22px; font-family: "Noto Sans Japanese"; font-weight: 500; color: #005043; } .top-feature-main-text span { position: relative; display: inline-block; } .top-feature-main-text span:before { position: absolute; bottom: 5px; left: -2%; content: ""; display: block; width: 104%; height: 10px; background: #fc8e00; opacity: 0.7; z-index: -1; } .top-feature-main-text small { font-size: 15px; } .keyvisual-lower { position: relative; padding: 100px 30px; background: #005043; color: #fff; text-align: center; letter-spacing: 0.1em; } .keyvisual-lower-title { margin-bottom: 40px; font-size: 45px; letter-spacing: 0.1em; } .keyvisual-lower-title-nomargin { margin-bottom: 0; } .keyvisual-lower-lead { } .keyvisual-lower-button .btn-n { padding: 7px 35px; font-size: 12px; } .keyvisual-lower-button { position: absolute; top: 30px; right: 30px; } .content-ver2 .local-navi { text-align: center; letter-spacing: 0.1em; } .content-ver2 .local-navi { display: table; width: 100%; margin-bottom: 70px; border-top: solid 2px #fff; } .content-ver2 .local-navi a { position: relative; display: table-cell; padding: 25px 20px; border-right: solid 2px #fff; border-bottom: solid 2px #fff; background: #005043; vertical-align: middle; color: #fff; font-size: 15px; } .content-ver2 .local-navi a:last-of-type { border-right: none; } .content-ver2 .local-navi a:hover { background: #266a5f; text-decoration: none; } .content-ver2 .local-navi a:before { position: absolute; top: -15px; left: 50%; content: ""; display: block; width: 2px; height: 30px; margin-left: -1px; background: #fff; } .content-ver2 .local-navi a .label { display: inline-block; margin-bottom: 7px; padding: 3px 10px; background: #fff; color: #fff; font-size: 12px; font-weight: normal; background: #fc8e00; } .content-ver2 .local-navi-col4 a { width: 25%; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.97); z-index: 2000; } .modal-content { position: fixed; display: none; z-index: 9999; width: 100%; height: 100%; margin: 0 auto; padding: 0 30px; text-align: center; z-index: 3000; background: rgba(255,255,255,0.95); } .modal-close { position: absolute; top: 10px; left: 12px; width: 40px; height: 40px; z-index: 3000; } .modal-close:before { position: absolute; top: 15px; left: 0; display: block; content: ""; width: 35px; height: 1px; background: #005043; transform: rotate(45deg); } .modal-close:after { position: absolute; top: 15px; left: 0; display: block; content: ""; width: 35px; height: 1px; background: #005043; transform: rotate(-45deg); } .modal-content-spmenu { padding: 0; } .modal-content-spmenu-title { padding: 11px 20px; border-bottom: solid 1px rgba(0,80,67,0.15); } .modal-content-spmenu-title img { width: 200px; height: auto; } /* ------------------------------------------ for small pc ------------------------------------------ */ @media(max-width:1200px){ header nav.global-navi-201506 ul li a { font-size: 79%; padding: 0 0.3em; } header.globalheader nav.global-navi-201506 ul li a { font-size: 79%; padding: 0 10px; } } /* ------------------------------------------ for tablet ------------------------------------------ */ @media(max-width:1100px){ header { position: static; height: auto; } header h1 { width: 100%; float: none; text-align: center; } header .login-btn { display: block; width: 98%; float: none; margin: 0 auto; padding-top: 0; text-align: center; } header .login-btn a { width: 100%; } header nav { display: block; padding: 0.5em; float: none; line-height: 200%; text-align: center; } header nav.global-navi-201506 ul li a { font-size: 86%; padding: 0 0.7em; } footer .col { float: none; } footer .col-3 { margin-left: 0; width: 100%; padding-left: 1em; padding-right: 1em; margin-bottom: 1em; text-align: center; } footer .col-3 ul li { display: inline-block; margin-right: 1em; } header.globalheader { position: fixed; height: 50px; } header.globalheader .inner { padding: 0 15px; } header.globalheader h1 { width: 200px; margin: 0 auto; } header.globalheader h1 img { width: 200px; height: auto; } header.globalheader h1 span { display: none; } header.globalheader .login-btn { position: absolute; top: 0; right: 0; display: inline-block; width: auto; height: 50px; font-size: 12px; } header.globalheader .login-btn .btn { height: 50px; padding: 0 15px; line-height: 50px; } header.globalheader .login-btn .btn i { position: relative; top: 2px; font-size: 15px; } header.globalheader .global-navi { display: none; } header.globalheader .header-modal-navi { position: absolute; top: 10px; left: 15px; display: block; width: 30px; height: 30px; } header.globalheader .header-modal-navi .header-modal-navi-icon { position: absolute; top: 50%; left: 0; display: block; width: 30px; height: 1px; background: #005043; } header.globalheader .header-modal-navi .header-modal-navi-icon:before { position: absolute; top: -10px; left: 0; content: ""; display: block; width: 30px; height: 1px; background: #005043; } header.globalheader .header-modal-navi .header-modal-navi-icon:after { position: absolute; bottom: -10px; left: 0; content: ""; display: block; width: 30px; height: 1px; background: #005043; } .footer-top-ver2 .footer-navi { display: none; } .modal-content a:hover { text-decoration: none; } .modal-content-spmenu-navi-title { border-bottom: solid 1px #fff; } .modal-content-spmenu-navi-title a { display: block; padding: 10px; background: #005043; color: #fff; } .modal-content-spmenu-navi li { width: 50%; float: left; border-right: solid 1px #005043; border-bottom: solid 1px #005043; } .modal-content-spmenu-navi li a { display: block; padding: 10px; font-size: 12px; background: #fff } .top-feature-main-text { margin-top: 10px; } .aboutlist li.nomarginbottom { margin-bottom: 30px; } body.bg-body-ver2 { padding-top: 50px; } } /* ------------------------------------------ for sp ------------------------------------------ */ @media(max-width:600px){ .intro { padding-top: 66px !important; } header nav { padding: 0; margin-top: 0.5em; } header nav ul { border-top: solid 1px #e1e1e1; } header nav ul li { display: block; width: 50%; float: left; border-right: solid 1px #e1e1e1; border-bottom: solid 1px #e1e1e1; } header nav ul li:nth-child(even) { border-right: 0; } header nav ul li a { display: block; } header nav.global-navi-201506 ul li a { padding: 0.3em 0.6em; font-size: 65%; background: #f1f1f1; } header nav.global-navi-201506 ul li a:hover { background: #fff; } .ul-header { margin-top: 46px; } .know-main .menu__menuTab, .prac-main .menu__menuTab, .dict-main .menu__menuTab{ margin-bottom: 23px; } .footer-navi { display:-webkit-box; display: -webkit-flex; display:-ms-flexbox; display: flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; margin-bottom: 0; } .footer-navi ul { width: 50%; margin-bottom: 30px; float: none; } .footer-bottom .copyright { width: 100%; float: none; margin-bottom: 15px; padding-top: 0; text-align: center; } .footer-bottom .logo { width: 100%; float: none; text-align: center; } header.globalheader { height: 46px; } header.globalheader h1 { width: 160px; margin: 0 auto; } header.globalheader h1 img { width: 160px; height: auto; } header.globalheader .login-btn { height: 46px; font-size: 12px; } header.globalheader .login-btn .btn { height: 46px; padding: 0 12px; line-height: 46px; } header.globalheader .header-modal-navi { top: 7px; } .column__left, .column__left.is-open { top: 46px !important; } .dict-main .menuTub__dictionary:before{ left: -16px !important; top: 0px !important; } /*reset*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ outline: 0; } .modal-content * {box-sizing: border-box; }