@charset "utf-8"; /*--------------------------------------------- Reset Style ---------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, /*table,*/ caption, /*tbody,*/ tfoot, thead, /*tr, th, td,*/ article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } * { box-sizing: border-box; margin: 0; padding: 0; font-size: 100%; } html { color: #000; background-color: #fff; font-size: 62.5%; overflow: auto; } body { width: 100%; height: 100%; font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; font-size: 1rem; line-height: 1.5; text-align: left; } hr, legend { display: none; } img { border: none; vertical-align: bottom; } article, aside, details, figure, figcaption, header, footer, hgroup, menu, nav, section, main { display: block; } div, dl, dt, dd, form, input, ul, ol, li, p, select, textarea, span, th, td, figure, figcaption { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, address, th, caption, em, strong, dfn { font-style: normal; font-weight: normal; } input, select { vertical-align: middle; } input, select, textarea { font-size: 100%; font-family: inherit; font-weight: inherit; } sup { vertical-align: top; font-size: 72%; } sub { vertical-align: bottom; font-size: 72%; } del { text-decoration: line-through; } ol, ul { list-style: none; } table { margin: 0; padding: 0; outline: 0; border-collapse: collapse; border-spacing: 0; font-size: 100%; font-size: inherit; vertical-align: baseline; background: transparent; } tbody, tr, th, td { margin: 0; padding: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } caption { text-align: left; } fieldset{ border: 0; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content: none; } a { color: #000; outline: none; text-decoration: none; transition: all .3s; } a:hover { /*text-decoration: underline;*/ opacity: 0.6; } /*--------------------------------------------- Common Style ---------------------------------------------*/ .m0 { margin: 0 !important; } .mat0 { margin-top: 0 !important; } .mat1 { margin-top: 1em !important; } .mat5 { margin-top: 5px !important; } .mat10 { margin-top: 10px !important; } .mat15 { margin-top: 15px !important; } .mat20 { margin-top: 20px !important; } .mat25 { margin-top: 25px !important; } .mat30 { margin-top: 30px !important; } .mat40 { margin-top: 40px !important; } .mat50 { margin-top: 50px !important; } .mat80 { margin-top: 80px !important; } .mab0 { margin-bottom: 0 !important; } .mab1 { margin-bottom: 1em !important; } .mab5 { margin-bottom: 5px !important; } .mab10 { margin-bottom: 10px !important; } .mab15 { margin-bottom: 15px !important; } .mab20 { margin-bottom: 20px !important; } .mab25 { margin-bottom: 25px !important; } .mab30 { margin-bottom: 30px !important; } .mab40 { margin-bottom: 40px !important; } .mab50 { margin-bottom: 50px !important; } .mar0 { margin-right: 0 !important; } .mar1 { margin-right: 1em !important; } .mar5 { margin-right: 5px !important; } .mar10 { margin-right: 10px !important; } .mar15 { margin-right: 15px !important; } .mar20 { margin-right: 20px !important; } .mar30 { margin-right: 30px !important; } .mal0 { margin-left: 0 !important; } .mal1 { margin-left: 1em !important; } .mal5 { margin-left: 5px !important; } .mal10 { margin-left: 10px !important; } .mal15 { margin-left: 15px !important; } .mal20 { margin-left: 20px !important; } .mal30 { margin-left: 30px !important; } .p0 { padding: 0 !important; } .pat0 { padding-top: 0 !important; } .pat1 { padding-top: 1em !important; } .pat5 { padding-top: 5px !important; } .pat10 { padding-top: 10px !important; } .pat15 { padding-top: 15px !important; } .pat20 { padding-top: 20px !important; } .pat25 { padding-top: 25px !important; } .pat30 { padding-top: 30px !important; } .pat40 { padding-top: 40px !important; } .pat50 { padding-top: 50px !important; } .pab0 { padding-bottom: 0 !important; } .pab1 { padding-bottom: 1em !important; } .pab5 { padding-bottom: 5px !important; } .pab10 { padding-bottom: 10px !important; } .pab15 { padding-bottom: 15px !important; } .pab20 { padding-bottom: 20px !important; } .pab25 { padding-bottom: 25px !important; } .pab30 { padding-bottom: 30px !important; } .pab40 { padding-bottom: 40px !important; } .pab50 { padding-bottom: 50px !important; } .par0 { padding-right: 0 !important; } .par1 { padding-right: 1em !important; } .par5 { padding-right: 5px !important; } .par10 { padding-right: 10px !important; } .par15 { padding-right: 15px !important; } .par20 { padding-right: 20px !important; } .par30 { padding-right: 30px !important; } .pal0 { padding-left: 0 !important; } .pal1 { padding-left: 1em !important; } .pal5 { padding-left: 5px !important; } .pal10 { padding-left: 10px !important; } .pal15 { padding-left: 15px !important; } .pal20 { padding-left: 20px !important; } .pal30 { padding-left: 30px !important; } .whAuto { width: auto !important; height: auto !important; } .wh100 { width: 100% !important; height: auto !important; } @media (max-width: 767px) { .mb-whAuto { width: auto !important; height: auto !important; } .mb-wh100 { width: 100% !important; height: auto !important; } } .disN { display: none !important; } .posA { position: absolute !important; } .posR { position: relative !important; } .fl { float: left !important; } .fr { float: right !important; } .b0 { border: 0 !important; } .tal { text-align: left !important; } .tac { text-align: center !important; } .tar { text-align: right !important; } .fw { font-weight: bold !important; } .fwn { font-weight: normal !important; } .red { color: #d84e2d !important; } .crim { color: #f00 !important; } .blue { color: #1400c7 !important; } .hand { cursor: pointer !important; } .ti { margin-left: 1em !important; text-indent: -1em !important; } .ti1-1 { margin-left: 1.1em !important; text-indent: -1.1em !important; } .ti1-2 { margin-left: 1.2em !important; text-indent: -1.2em !important; } .ti1-3 { margin-left: 1.3em !important; text-indent: -1.3em !important; } .ti1-4 { margin-left: 1.4em !important; text-indent: -1.4em !important; } .ti1-5 { margin-left: 1.5em !important; text-indent: -1.5em !important; } .ti1-6 { margin-left: 1.6em !important; text-indent: -1.6em !important; } .ti1-7 { margin-left: 1.7em !important; text-indent: -1.7em !important; } .ti1-8 { margin-left: 1.8em !important; text-indent: -1.8em !important; } .ti1-9 { margin-left: 1.9em !important; text-indent: -1.9em !important; } .ti2 { margin-left: 2em !important; text-indent: -2em !important; } /*--------------------------------------------- Original Style master ----------------------------------------------- Suggested propaty order: { box-sizing, content, display, position, top, right, bottom, left, z-index, float, clear, min-width, min-height, max-width, max-height, width, height, margin, padding, border, background, color, font-family, font-size, font-weight, text-align, text-decoration, text-indent, line-height, letter-spacing, vertical-align, visibility, white-space, cursor, opacity, transform, transition, overflow, and other propaty } ----------------------------------------------- 01. layout 02. header 03. footer 04. footer menu 05. clearfix 06. pattern common 07. patternA 08. patternB 09. patternC 10. patternD 11. patternE 12. patternF 13. patternG ---------------------------------------------*/ @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } /*--------------------------------------------- 01. layout ---------------------------------------------*/ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; position: relative; } html:after{ content: ""; position: absolute; bottom: -1px; width: 100%; height: 1px; background: #3d3d45;/*フッター背景色 IE,Edge隙間対応*/ } body { min-width: 1200px; font-size: 1.6rem; } .inner { width: 1170px; margin: 0 auto; } .pc:not(.specific) { display: block !important; } .sp:not(.specific) { display: none !important; } img.pc:not(.specific), .ibpc { display: inline-block !important; } img.sp:not(.specific), .ibsp { display: none !important; } .col-2:after, .col-3:after, .col-4:after{ content: ""; display: block; clear: both; height: 0; } .col-2 > li{ float: left; width: 50%; } .col-3 > li{ float: left; width: 33.33%; } .col-4 > li{ float: left; width: 25%; } .bread-list { padding: 15px 0; color: #666; font-size: 1.2rem; } .bread-list li { position: relative; display: inline-block; } .bread-list li:not(:last-child){ margin-right: 8px; padding-right: 15px; } .bread-list li:not(:last-child):after{ content: ""; position: absolute; top: 5px; right: 0; width: 6px; height: 6px; border-top: 1px solid #666; border-right: 1px solid #666; transform: rotate(45deg); } .bread-list li a{ color: #666; } body:not(.top) main { padding-bottom: 100px; } body:not(.top) .page-title { display: table; width: 100%; margin-bottom: 80px; background: url("/assets/images/bg_h1.png") no-repeat; background-size: cover; color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 3.4rem; font-weight: 500; text-align: center; } .mv { position: relative; margin-bottom: 400px !important; } body:not(.top) .page-title h1 { display: table-cell; width: 100%; height: 130px; padding: 0 20px; line-height: 1.25; vertical-align: middle; } body:not(.top) .page-title.long-title-30 h1 { text-align: left; } body:not(.top) .page-title.text-align-left h1 { text-align: left; } body:not(.top) .page-title.text-align-center h1 { text-align: center; } body:not(.top) .page-title h1 span { font-size: 2.3rem; display: block; margin-top: 5px; } body:not(.top) h2 { position: relative; margin: 75px 0 40px; padding-bottom: 15px; font-family: 'Noto Sans JP', sans-serif; font-size: 2.6rem; font-weight: 500; line-height: 1.25; } body:not(.top) h2:first-child { margin-top: 0; } body:not(.top) h2:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(to right, #5cce52 0%, #2abe88 100%); } body:not(.top) h3 { margin: 60px 0 40px; padding: 6px 20px 10px; background: rgb(109,218,99); background: linear-gradient(135deg, rgba(109,218,99,1) 30%, rgba(42,190,136,1) 55%); color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 1.25; } .btn a { display: inline-block; position: relative; min-width: 250px; max-width: 310px; min-height: 50px; max-height: 70px; padding: 13px 30px 13px 15px; border-radius: 50px; background: linear-gradient(to right, #5cce52 0%, #17ba60 100%); color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 500; text-align: center; line-height: 1.25; box-shadow: 5px 5px 10px rgba(35, 24, 21, .2); } .btn a:after { content: ""; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; margin-top: -5px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); } .btn.fixed-height a { max-height: 50px; padding: 7px 0; line-height: 1; } .btn.orange a { background: linear-gradient(to right, #e98900 0%, #e16a1b 100%); } .btn.large a { min-width: 430px; } table:not(.edittable):not(.table-default), tbody:not(.edittbody), tr:not(.edittr), th:not(.editth), td:not(.edittd){ border: 0; } @media (max-width: 767px) { body { min-width: initial; min-width: auto; font-size: 1.4rem; overflow-x: hidden; } main { padding-top: 60px; } .inner { width: auto; padding: 0 20px; } .pc:not(.specific) { display: none !important; } .sp:not(.specific) { display: block !important; } img.pc:not(.specific), .ibpc { display: none !important; } img.sp:not(.specific), .ibsp { display: inline-block !important; } .col-2 > li, .col-3 > li, .col-4 > li{ float: none; width: auto; } body:not(.top) main { padding-bottom: 50px; } body:not(.top) .page-title { margin-bottom: 40px; background: url("/assets/images/bg_h1_sp.png") no-repeat; background-size: cover; font-size: 2.4rem; } body:not(.top) h1 { height: 100px; } body:not(.top) .page-title.long-title-20 h1 { text-align: left; } body:not(.top) .page-title.text-align-left h1 { text-align: left; } body:not(.top) .page-title.text-align-center h1 { text-align: center; } body:not(.top) .page-title h1 span { font-size: 1.5rem; } body:not(.top) h2 { margin: 40px 0 30px; font-size: 2rem; } body:not(.top) h2:after { height: 2px; } body:not(.top) h3 { margin: 30px 0 20px; padding: 6px 15px 10px; font-size: 1.6rem; } .btn.large a { min-width: 100%; } /*スマホ時メニューを開いたときに背景コンテンツ固定*/ .scroll-prevent { position: fixed; z-index: -1; width: 100%; height: 100%; } } /*--------------------------------------------- Common Layout Style ---------------------------------------------*/ /*--------------------------------------------- Common Layout Style ---------------------------------------------*/ /* --------- メインビジュアル ------------ */ section.bg-visual { position: relative; } .bg-visual .page-title { position: relative; } .bg-visual .page-title h1 { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; } .bg-visual .page-title h1 span { width: 100%; } .bg-visual .mv:after { content: ""; position: absolute; width: 100%; top: 130px; left: 0; min-height: 370px; background: #3eb134; background-size: cover; background-repeat: no-repeat; } .bg-visual .page-title .inner { position: relative; } .bg-visual .side-area { position: absolute; top: 155px; left: 0; right: 0; margin: auto; } .bg-visual .side-menu { float: right; width: 270px; padding: 20px; margin-right: 99px; background: rgba(1, 133, 97, .7); } .bg-visual .side-area .ib { padding: 15px; background: #fff; } .bg-visual .side-area .ib + .ib { margin-top: 15px; padding: 10px 15px 15px; } .bg-visual .side-area .ib dt { position: relative; margin-bottom: 8px; padding-bottom: 5px; color: #54a50a; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 500; text-align: center; } .bg-visual .side-area .ib dd { text-align: center; } .bg-visual .side-area .ib .login { margin-top: 10px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.5rem; font-weight: 500; text-align: left; } .bg-visual .side-area .ib .login:after { content: ""; display: block; clear: both; height: 0; } .bg-visual .side-area .ib .login li { width: 75%; margin: auto; } .bg-visual .side-area .ib .login li:only-child { float: none; width: auto; margin-right: 0; } .bg-visual .side-area .ib .login li + li { margin-top: 10px; } .bg-visual .side-area .ib .login li a { display: block; height: 40px; padding: 9px 0; border-radius: 20px; background: #e0791d; color: #fff; text-align: center; line-height: 1.25; } .bg-visual .side-area .ib .login li a i { display: inline-block; margin-right: 5px; /*vertical-align: middle;*/ } .bg-visual .side-area .ib .login li:last-child a i img { width: 9px; height: 15px; } .bg-visual .side-area .ib .login li:first-child a i img{ width: 13px; height: 17px; } .bg-visual .side-area .ib .beginner { margin-top: 10px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 300; text-align: left; } .bg-visual .side-area .ib .beginner:after { content: ""; display: block; clear: both; height: 0; } .bg-visual .side-area .ib .beginner li:not(:last-child){ margin-bottom: 3px; } .bg-visual .side-area .ib .beginner li a { display: block; position: relative; padding-left: 15px; } .bg-visual .side-area .ib .beginner li a:before { content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin-top: -3px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } .bg-visual .side-area .verification { margin-top: 15px; } .bg-visual .side-area .verification a { display: block; position: relative; padding: 6px 0 8px; background: #f4ffe8; color: #3eb134; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 500; text-align: center; line-height: 1.25; } .bg-visual .side-area .verification a:hover { opacity: 0.8; } .bg-visual .side-area .verification a:after{ content: ""; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; margin-top: -5px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } .bg-visual .side-area .verification span { display: block; color: #333; font-size: 1.2rem; } @media (max-width: 767px) { .bg-visual .mv { margin-bottom: 230px !important; } .bg-visual .mv:after { content: ""; position: absolute; width: 100%; top: 130px; left: 0; min-height: 200px; background: #3eb134; background-image: url(/assets/images/personal/okdirect/p_mainvisual_sp.jpg); background-size: cover; background-repeat: no-repeat; } .bg-visual .side-area { position: relative; top: 0; margin-bottom: 30px; } .bg-visual .side-menu { float: none; width: auto; margin-right: 0; } .bg-visual .side-area .ib .login li { width: auto; } } /* --------- 見出し　h4 ------------ */ .fourth-title { margin-bottom: 40px ; padding-left: 20px !important; border-left: 5px solid #3eb134; font-family: 'Noto Sans JP', sans-serif !important; font-size: 2.0rem !important; font-weight: 600 !important; color: #000 !important; background: transparent !important;} @media (max-width: 767px) { .fourth-title { margin-bottom: 20px; font-size: 1.6rem; } } /* --------- 下に飾りがあるコピー ------------ */ .title-copy { position: relative; margin-bottom: 50px; padding-bottom: 15px; font-family: "Noto Sans JP", sans-serif; font-size: 3.2rem !important; font-weight: 500; text-align: center; line-height: 1.2; } .title-copy:before { content: ""; position: absolute; left: 50%; bottom: 0; width: 220px; margin-left: -110px;height: 1px; background: linear-gradient(to right, rgba(107, 218, 97, 1) 0%, rgba(74, 204, 116, 1) 99px, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0) 122px, rgba(51, 195, 128, 1) 123px, rgba(40, 191, 134, 1) 220px); } .title-copy:after { content: ""; position: absolute; left: 50% !important; bottom: -11px !important; width: 30px !important; height: 1px !important; margin-left: -15px; background: #3eb134; transform: rotate(45deg); } .title-copy span { display: block; margin-top: 5px; font-size: 1.6rem; font-weight: 400; } .title-copy.c-white,.title-copy-sub.c-white { color: #fff; } .title-copy-sub { text-align: center; line-height: 2; } .title-copy.c-white:before { background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 99px, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 0) 122px, rgba(255, 255, 255, 1) 123px, rgba(255, 255, 255, 1) 220px); } .title-copy.c-white:after { background: #fff; } @media (max-width: 767px) { .title-copy { font-size: 2.2rem !important; } } /* --------- 電話番号のタイトル ------------ */ .exp-title { padding: 0 0 15px; font-family: 'Noto Sans JP', sans-serif; font-size: 2.2rem; font-weight: 500;} .unit07-exp + .exp-title { padding: 30px 0 15px;} .unit07-exp .exp-title { display: table-cell; min-width: 340px; max-width: 340px; width: 340px; padding: 30px 20px; text-align: center; vertical-align: middle; } .square { background: #000; padding: 4px 0 3px; line-height: 1; display: inline-block; width: 20px; text-align: center; margin-right: 2px; color: #fff;} .square:first-of-type { margin: 0 2px;} @media (max-width: 767px) { .exp-title { padding: 0 0 10px; font-size: 1.6rem; } .unit07-exp + .exp-title { padding: 20px 0 10px;} .unit07-exp .exp-title { display: block; min-width: 100%; max-width: 100%; width: 100%; padding: 20px; } } /* --------- テーブル ------------ */ .table-default { width: 100%; border-top: 1px solid #ccc; table-layout: fixed; border-collapse:separate } .table-default th, .table-default td { padding: 20px; border-bottom: 1px solid #ccc; vertical-align: middle; } .table-default th { background: #f5f5f5; border-right: 1px solid #ccc; } .table-default .head th:last-of-type { border-right: 0 } .table-default th:first-of-type { border-right: 1px solid #ccc; width: 350px; text-align: left;} .table-default td { border-right: 1px solid #ccc; } .table-default td:last-of-type { border-right: 0 } .table-default .head th { text-align: center; } .table-default + p { margin-top: 30px; } .table-default .title { padding: 40px 0 15px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 500; } .table-default th.border-right-none, .table-default td.border-right-none {border-right: none;} .table-default td.border-top { border-top: 1px solid #ccc; } .table-default td.border-right { border-right: 1px solid #ccc; } .table-default td.border-bottom { border-bottom: 1px solid #ccc; } .table-default td.border-left { border-left: 1px solid #ccc; } @media (max-width: 767px) { .table-default th:first-of-type { width: 30%; } .table-default th, .table-default td { padding: 10px; } .table-default.table-style02 th, .table-default.table-style02 td { width: 100%; display: block; } .table-default.table-style02 th:first-of-type { border-right: 0; } .table-default .title { padding: 20px 0 10px; font-size: 1.6rem; } } /* --------- リスト ------------ */ ul.basic { margin-top: 30px; } ul.basic > li { padding-left: 1.2em; text-indent: 0em; position: relative; } ul.basic > li + li { margin-top: 5px; } ul.basic > li:before { content: ""; position: absolute; top: 7px; left: 0; margin-right: 5px; background: #3eb134; width: 8px; height: 8px; border-radius: 50%; } .tablet ul.basic > li:before { top: 10px; } p + ul.basic { margin-top: 15px; } ol.side-number { margin-top: 30px; counter-reset: number; } ol.side-number .title { margin-bottom: 10px; font-family: "Noto Sans JP", sans-serif; font-size: 2.0rem; font-weight: 500; color: #3eb134; } ol.side-number > li { display: flex; } ol.side-number > li + li { margin-top: 40px; } ol.side-number > li::before { counter-increment: number; content: counter(number); display: inline-block; padding: 0 20px; margin-right: 25px; font-family: "Noto Sans JP", sans-serif; color: #3eb134; font-size: 4rem; font-weight: 400; line-height: 1; border-right: 1px solid #3eb134; } ol.side-number > li dl { display: inline-block; } @media (max-width: 767px) { ol.side-number .title { font-size: 1.6rem; } ol.side-number > li::before { padding: 0 15px 0 0; margin-right: 20px; font-size: 3rem; } } /* --------- ボックス ------------ */ .unit-box { display: flex; } .unit-box:after { content: ""; display: block; clear: both; height: 0; } .box-border { border: 1px solid #ccc; } .box-border-top { border-top: 1px solid #ccc; } .box-title { margin-bottom: 15px; font-family: "Noto Sans JP", sans-serif; font-size: 2.2rem; font-weight: 500; line-height: 1.2; } .unit-box img { width: 100%; height: auto; } .unit-box .col-2 ,.unit-box .col-3 ,.unit-box .col-4 ,.unit-box .col-5 ,.unit-box .col-6 ,.unit-box .col-7 ,.unit-box .col-8 ,.unit-box .col-9 ,.unit-box .col-10 ,.unit-box .col-12 { width: 100%; margin-bottom: 40px; position: relative; float: left; } .unit-box .box-border { padding: 20px; } .unit-box .box-border-top { width: 100%; padding: 30px 0 60px; } .unit-box .box-border-top > ul li { padding-bottom: 6px; } .unit-box .col-2 { width: 170px; margin-right: 30px; } .unit-box .col-3 { width: 270px; margin-right: 30px; } .unit-box .col-4 { width: 370px; margin-right: 30px; } .unit-box .col-5 { width: 470px; margin-right: 30px; } .unit-box .col-6 { width: 570px; margin-right: 30px; } .unit-box .col-7 { width: 670px; margin-right: 30px; } .unit-box .col-8 { width: 770px; margin-right: 30px; } .unit-box .col-9 { width: 870px; margin-right: 30px; } .unit-box .col-10 { width: 970px; margin-right: 30px; } .unit-box .col-12 { width: 100%; } .unit-box .col-2:nth-child(2n) ,.unit-box .col-3:nth-child(4n) ,.unit-box .col-4:nth-child(3n) ,.unit-box .col-6:nth-child(2n) ,.unit-box [class^="col"]:last-child { margin-right: 0; } @media (max-width: 767px) { .unit-box { display: block; } .box-title { font-size: 1.8rem; } .unit-box .box-border-top { padding: 20px 0 30px; } .unit-box .col-2 ,.unit-box .col-3 ,.unit-box .col-4 ,.unit-box .col-5 ,.unit-box .col-6 ,.unit-box .col-7 ,.unit-box .col-8 ,.unit-box .col-9 ,.unit-box .col-10 ,.unit-box .col-12 { width: 100%; margin-bottom: 20px; } } .box-border.border-green { border: 1px solid #3eb134; } .unit-box.link-list .border-green ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .unit-box.link-list .border-green li { flex: 0 0 33.333333%; max-width: 33.333333%; padding-right: 50px; } .unit-box.link-list .border-green li:nth-child(3n) { padding-right: 30px; } @media (max-width: 767px) { .unit-box.link-list .border-green ul { display: block; } .unit-box.link-list .border-green li, .unit-box.link-list .border-green li:nth-child(3n) { max-width: 100%; padding-right: 0; } } .card { flex: 1 1 auto; width: 100%; padding: 15px 20px; font-size: 2.2rem; line-height: 1.4; background: #edf6ec; box-sizing: border-box; } .card > * { display: block; width: 100%; } .card .title { padding: 5px 0 10px; margin-bottom: 10px; color: #3eb134; font-size: 1.6rem; font-weight: bold; border-bottom: 1px solid #3eb134; } .card .title.no-line { padding: 5px 0; margin-bottom: 0; color: #3eb134; font-size: 1.6rem; border-bottom: none; } .card em { font-weight: 600; } .card span { font-size: 1.6rem; } .card .basic li { font-size: 1.6rem; } .card + .card { margin-left: 30px; } .box-content { display: flex; } @media (max-width: 767px) { .card { font-size: 1.8rem; } .card .title { font-size: 1.6rem; } .card + .card { margin-top: 15px; margin-left: 0; } .box-content { display: block; } .card span { font-size: 1.4rem; word-wrap:break-word; } } /* --------- 注釈 ------------ */ .notes { font-size: 1.4rem; } .notes em { font-size: 1.6rem; font-weight: 600; } @media (max-width: 767px) { .notes em { font-size: 1.4rem;} } /* --------- 背景色 ------------ */ .bg-gray { background:#f5f5f5; padding: 25px; } .bg-darkgreen { background : #00a37f !important; } .bg-light-green {background: #edf6ec !important;} .bg-light-orange { background: #fff4e8 !important; } .bg-light-gray { background: #f5f5f5 !important; } .bg-white { background: #ffffff !important; } /* --------- テキスト色 ------------ */ .t-orange { color: #e47611 !important; } .t-blue { color: #004990 !important; } .t-light-green { color: #3eb134 !important;} /* --------- 重要なお知らせ ------------ */ .impinfo { margin-bottom: 40px;} .impinfo .box-border { border: 1px solid #e47611; } .impinfo .card { background: #fff4e8; font-size: 1.6rem; line-height: 1.8; } .impinfo .card a { position: relative; text-decoration: underline; } .impinfo .card a:hover { text-decoration: none; } .impinfo .card a[target="_blank"]:after{ content: "\f360"; display: inline-block; margin: 0 5px; color: #333; font-family: "Font Awesome 5 Pro"; transform: none; } .impinfo .card a[href$=".pdf"]:after { content: "\f1c1"; display: inline-block; margin: 0 5px; color: #333; font-family: "Font Awesome 5 Pro"; transform: none; } @media (max-width: 767px) { .impinfo { margin-bottom: 20px;} .impinfo .card { font-size: 1.4rem; } } /* --------- ポイント ------------ */ .point-list { position: relative; display: -ms-flexbox; display: flex; padding: 0 25px; margin-bottom: 160px; counter-reset: number; list-style-type: none; } .point-list:after { box-sizing: border-box; content: ""; position: absolute; bottom: -80px; left: 0; z-index: -1; width: 100%; height: 100%; background: rgb(109,218,99); background: linear-gradient(135deg, rgba(92,206,82,1) 45%, rgba(23,186,96,1) 80%) } .point-list li { flex: 1 1 auto; width: 100%; margin: 0 15px; background: #fff; } .point-list li .number { position: relative; display: block; padding-bottom: 70px; color: #3eb134; font-family: "Noto Sans JP", sans-serif; font-weight: 500; text-align: center; line-height: 1.6; } .point-list li .number:after { position: absolute; counter-increment: number; content: counter(number); display: inline-block; font-size: 6rem; font-weight: 400; right: 50%; margin-right: -18px; } .point-list li dl { padding: 0 30px 30px; } .point-list .title { position: relative; padding: 5px 0 10px; margin-bottom: 25px; color: #3eb134; font-size: 2.2rem; font-weight: bold; text-align: center; } .point-list .title:before { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; margin-left: -50%; height: 1px; background: linear-gradient( to right, rgba(107, 218, 97, 1) 0%, rgba(74, 204, 116, 1) 45%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0) 50%, rgba(51, 195, 128, 1) 52%, rgba(40, 191, 134, 1) 100%); } .point-list .title:after { content: ""; position: absolute; left: 50% !important; bottom: -6px !important; width: 15px !important; height: 1px !important; margin-left: -12px; background: #3eb134; transform: rotate(45deg); } .point-list.bg-light-gray { padding: 80px 25px 50px; margin-bottom: 55px; } .point-list.bg-light-gray:after { content: none; } .point-list.bg-light-gray li { position: relative; margin: 0 20px; } .point-list.bg-light-gray li:after { content: ""; position: absolute; top: 50%; right: -25px; width: 16px; height: 16px; margin-top: -5px; border-top: 2px solid #00a37f; border-right: 2px solid #00a37f; transform: rotate(45deg); } .point-list.bg-light-gray li:last-child:after { content: none; } .point-list.bg-light-gray .title { padding: 45px 0 10px; color: #00a37f; font-size: 1.8rem; } .point-list.bg-light-gray li .number { position: absolute; top: -40px; left: 50%; margin-left: -25px; color: #00a37f; font-weight: 400; } .point-list.bg-light-gray li figure { width: 100px; height: 100px; margin: 0 auto 20px; } .point-list.bg-light-gray li figure img { width: 100%; } .point-list.bg-light-gray li dl { padding: 0 20px 30px; line-height: 1.6; } .point-list.col-3 { flex-wrap: wrap; justify-content: center; padding: 0; margin-bottom: 0; } .point-list.col-3:after { content: none; } .point-list.col-3 .title { padding: 5px 0 15px; font-size: 1.7rem; display: flex; justify-content: center; align-items: center; } .point-list.col-3 li { flex: 0 0 calc((100% - 60px) / 3); max-width: calc((100% - 60px) / 3); position: relative; padding: 45px 0 0; margin-top: 50px; } .point-list.col-3 li:first-child { margin-left: 0; } .point-list.col-3 li:nth-child(3n) { margin-right: 0; } .point-list.col-3 li:last-child { margin-bottom: 20px; } .point-list.col-3 li .number { position: absolute; top: -50px; left: 50%; margin-left: -30px; } .unit05 .point-list.col-3 li a { padding: 0; } .unit05 .point-list.col-3 li a:before { content: none; } @media (max-width: 767px) { .point-list { display: block; padding: 25px; margin-bottom: 40px; } .point-list:after { bottom: 0; } .point-list li { margin: 0 0 30px; } .point-list li .number { padding-top: 30px; padding-bottom: 50px; line-height: 1.8;} .point-list li .number:after { font-size: 5rem; margin-right: -14px; } .point-list .title { font-size: 2rem; } .point-list.bg-light-gray { padding: 30px 15px 30px; margin-bottom: 30px; } .point-list.bg-light-gray li { margin: 0 0 40px; } .point-list.bg-light-gray li:last-child { margin-bottom: 0; } .point-list.bg-light-gray li:after { top: auto; bottom: 0; right: 50%; margin-top: 0; margin-bottom: -23px; margin-right: -8px; transform: rotate(135deg); } .point-list.bg-light-gray .title { padding: 5px 0 10px; font-size: 1.6rem; } .point-list.bg-light-gray li .number{ position: relative; top: 0; left: 0; padding-top: 20px; margin-left: 0; } .point-list.bg-light-gray li dl { padding: 0 30px 30px; line-height: 1.6; } .point-list.col-3 { flex-wrap: inherit; } .point-list.col-3 .title { font-size: 1.6rem; } .point-list.col-3 li { flex: 100%; max-width: 100%; padding: 30px 0 0; } .point-list.col-3 li .number { top: -70px; } } /* --------- arrow付きテキストリンク ------------ */ .txt-link a { display: inline-block; position: relative; padding-left: 20px; text-decoration: none !important; } .txt-link a:before { content: ""; position: absolute; top: 6px; left: 0; width: 8px; height: 8px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } .txt-link a:hover { opacity: 0.6 !important; } /*--------------------------------------------- 02. header ---------------------------------------------*/ header { width: 100%; min-width: 1200px; background: #fff; } header .upper-menu { height: 90px; } header .upper-menu:after { content: ""; display: block; clear: both; height: 0; } header .upper-menu .logo { float: left; width: 376px; margin-top: 23px; font-size: 1.2rem; } header .upper-menu .logo img { width: 264px; } header .upper-menu .logo dfn { display: block; margin-top: 7px; } header .upper-menu nav { float: right; font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 400; } header .upper-menu nav ul:after { content: ""; display: block; clear: both; height: 0; } header .upper-menu nav ul li { float: left; margin-right: 15px; } header .upper-menu nav ul li:last-child { margin-right: 0; } header .upper-menu nav ul li a { display: block; padding: 20px 0 19px; text-align: center; } header .upper-menu nav ul li i { display: block; margin-bottom: 3px; text-align: center; } header .upper-menu nav ul li:nth-of-type(1) i img { width: 30px; height: 27px; } header .upper-menu nav ul li:nth-of-type(2) i img { width: 27px; height: 27px; } header .upper-menu nav ul li:nth-of-type(3) { margin-right: 20px; } header .upper-menu nav ul li:nth-of-type(3), header .upper-menu nav ul li:nth-of-type(4) { margin-top: 20px; } header .upper-menu nav ul li:nth-of-type(3) a, header .upper-menu nav ul li:nth-of-type(4) a { width: 130px; height: 47px; padding: 8px 0; background: #231815; color: #fff; font-size: 1.8rem; box-shadow: 5px 5px 10px rgba(35, 24, 21, .2); } header #menu-cb { display: none; } header .gNavi { position: relative; background: linear-gradient(to right, #5cce52 0%, #17ba60 100%); color: #fff; } header .gNavi #ham-menu > ul:after { content: ""; display: block; clear: both; height: 0; } header .gNavi #ham-menu > ul > li { display: table; float: left; width: calc(100% / 5); font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 1.25; } header .gNavi #ham-menu > ul > li.contact, header .gNavi #ham-menu > ul > li.voice { display: none; } header .gNavi #ham-menu > ul > li > a { display: table-cell; position: relative; height: 70px; color: #fff; text-align: center; vertical-align: middle; } header .gNavi #ham-menu > ul > li > a:before { content: ""; position: absolute; bottom: 0; left: 7px; width: calc(100% - 14px); height: 63px; background: #ececec; opacity: 0; transition: .3s; } header .gNavi #ham-menu > ul > li > a.current, header .gNavi #ham-menu > ul > li:hover > a { color: #3eb134; opacity: 1; } header .gNavi #ham-menu > ul > li > a.current:before { opacity: 1 !important; } header .gNavi #ham-menu > ul > li:hover > a:before { opacity: 0.8; } header .gNavi #ham-menu > ul > li > a em { display: block; position: relative; z-index: 2; font-weight: 500; } header .gNavi #ham-menu > ul > li > a em:before, header .gNavi #ham-menu > ul > li:nth-last-of-type(2) > a em:after { content: ""; position: absolute; top: 50%; width: 1px; height: 40px; margin-top: -20px; background: rgba(255, 255, 255, .4); } header .gNavi #ham-menu > ul > li > a em:before { left: 0; } header .gNavi #ham-menu > ul > li:nth-last-of-type(2) > a em:after { right: 0; } header .gNavi #ham-menu > ul > li > .inner-menu { position: absolute; top: 70px; left: 0; z-index: 1; width: 100%; max-height: calc(100vh - 160px); padding: 40px; background: #ececec; visibility: hidden; opacity: 0; overflow-y: auto; transition: .3s; } header .gNavi #ham-menu > ul > li:hover > .inner-menu { visibility: visible; opacity: 1; } #head-search { position: relative; width: 100px; } #menu-search { display: none; } #menu-search-icon { display: block; position: relative; height: 90px; padding-top: 20px; cursor: pointer; transition: all .3s; } #menu-search-icon:hover { opacity: 0.6; } #menu-search-icon dfn { display: block; text-align: center; } #menu-search-icon dfn:after { content: "検索"; } #menu-search:checked ~ #ham-menu { display: none; } #menu-search:checked ~ #search-menu { display: block; opacity: 1; } #menu-search:checked ~ #menu-search-icon dfn:after{ content: "閉じる"; } #menu-search-icon i { visibility: visible; } #menu-search:checked ~ #menu-search-icon { background: #f2f4f5; } #menu-search:checked ~ #menu-search-icon i { visibility: hidden; } #menu-search:checked ~ #menu-search-icon span { display: block; position: absolute; top: 23px; left: 35px; width: 25px; height: 2px; background: #000; } #menu-search:checked ~ #menu-search-icon span:nth-of-type(1){ transform: translateY(9px) rotate(-315deg); } #menu-search:checked ~ #menu-search-icon span:nth-of-type(2){ transform: translateY(9px) rotate(315deg); } #search-menu { display: none; position: absolute; top: 99px; left: -235px; z-index: 11; width: 480px; height: 54px; padding: 7px; background: #ececec; opacity: 0; transition: .3s; } #search-menu:before { content: ""; position: absolute; top: -8px; left: 276px; width: 0; height: 0; border-style: solid; border-width: 0 7px 8px 7px; border-color: transparent transparent #ececec transparent; } #search-menu #searchFormHead { letter-spacing: -.4em; } #search-menu input[name="kw"] { -webkit-appearance: none; width: 385px; height: 40px; padding: 0 15px; border: 0; border-radius: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; vertical-align: middle; outline: 0; } #search-menu input[name="kw"]::placeholder { color: #000; } #search-menu input[name="kw"]:-ms-input-placeholder { color: #000; }/* IE */ #search-menu input[name="kw"]::-ms-input-placeholder{ color: #000; }/* Edge */ #search-menu .submit { -webkit-appearance: button; width: 80px; height: 40px; border: 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px; background: linear-gradient(to right, #e98900 0%, #e16a1b 100%); letter-spacing: normal; vertical-align: middle; cursor: pointer; } #search-menu .submit i img { width: 23px; height: 23px; } header .impinfo { display: none; position: relative; width: 1170px; margin: 0 auto 20px; border: 1px solid #bc001f; letter-spacing: -.4em; } header .impinfo dt { display: inline-block; width: 200px; padding: 7px; background: #bc001f; color: #fff; font-weight: bold; text-align: center; letter-spacing: normal; vertical-align: middle; } header .impinfo dt i { margin-right: 10px; } header .impinfo dt i img{ width: 27px; height: auto; } header .impinfo dd { display: inline-block; width: calc(100% - 200px); letter-spacing: normal; vertical-align: middle; } header .impinfo dd a { display: table-cell; vertical-align: middle; } header .impinfo .swiper-slide{ display: inline-block; padding: 0 70px 0 20px; vertical-align: middle; } header .impinfo .swiper-button-prev-impinfo, header .impinfo .swiper-button-next-impinfo{ position: absolute; top: 0; z-index: 10; width: 24px; height: 100%; border-left: 1px solid #ccc; background: #fff; cursor: pointer; transition: .3s; } header .impinfo .swiper-button-prev-impinfo{ right: 24px; } header .impinfo .swiper-button-next-impinfo{ right: 0; } header .impinfo .swiper-button-prev-impinfo:after, header .impinfo .swiper-button-next-impinfo:after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 1px solid #000; border-right: 1px solid #000; } header .impinfo .swiper-button-prev-impinfo:after { transform: rotate(-135deg); margin-left: -3px; } header .impinfo .swiper-button-next-impinfo:after { transform: rotate(45deg); margin-left: -6px; } header .impinfo .swiper-button-prev-impinfo:hover:after, header .impinfo .swiper-button-next-impinfo:hover:after { opacity: .6; } .inner-menu .idx { margin-bottom: 40px; padding: 10px 0 10px 20px; border-left: 5px solid #3eb134; font-family: 'Noto Sans JP', sans-serif; font-size: 2.2rem; font-weight: 600; } .inner-menu .idx a { position: relative; padding-right: 20px; } .inner-menu .idx a:after { content: ""; position: absolute; top: 50%; right: 0; width: 8px; height: 8px; margin-top: -4px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } .inner-menu ul > li { padding-right: 30px; } .inner-menu ul > li:last-child { padding-right: 0; } .inner-menu dl { font-family: 'Noto Sans JP', sans-serif; } .inner-menu dl:not(:first-child) { margin-top: 50px; } .inner-menu dt { position: relative; margin-bottom: 25px; padding-bottom: 10px; font-size: 1.6rem; font-weight: 600; color: #000; } .inner-menu dt:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, #5cce52 0%, #17ba60 100%); } .inner-menu dt a { display: block; position: relative; } .inner-menu dt a:after { content: ""; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; margin-top: -6px; border-top: 1px solid #24b751; border-right: 1px solid #24b751; transform: rotate(45deg); } .inner-menu dt i { display: inline-block; margin-right: 7px; vertical-align: middle; } .inner-menu dd { font-size: 1.4rem; font-weight: 400; } .inner-menu dd li:not(:last-child){ margin-bottom: 20px; } .inner-menu dd li a { display: block; position: relative; padding-left: 18px; } .inner-menu dd li a[href$=".pdf"]:after { content: "\f1c1"; position: relative; top: 0; margin-left: 5px; display: inline-block; font-family: "Font Awesome 5 Pro"; width: 14px; height: 18px; } .inner-menu dd li a[href^="http"]:after { content: "\f360"; position: relative; top: 0; margin-left: 5px; display: inline-block; font-family: "Font Awesome 5 Pro"; width: 14px; height: 18px; } .inner-menu dd li a:before { content: ""; position: absolute; top: 4px; left: 0; width: 8px; height: 8px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } .inner-menu dd li ul { margin-top: 20px; } .inner-menu dd li li { margin-left: 1em; } @media (max-width: 767px) { header { min-width: initial; min-width: auto; /*min-height: 60px;*/ } header .upper-menu { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 60px; padding: 0 0 0 15px; border-bottom: 1px solid #2bbf89; background: #fff; } header .upper-menu .logo { width: 145px; margin-top: 18px; } header .upper-menu .logo img { width: 100%; } header .upper-menu .logo dfn { display: none; } header .upper-menu nav { font-size: 1rem; padding-right: 60px; } header .upper-menu nav ul li { margin-right: 0; } header .upper-menu nav ul li a { padding: 10px 0 9px; } header .upper-menu nav ul li:nth-of-type(1) i img { width: 25px; height: 23px; } header .upper-menu nav ul li:nth-of-type(2) i img { width: 21px; height: 21px; } header .upper-menu nav ul li:nth-of-type(2) { margin-right: 0; } header .upper-menu nav ul li:nth-of-type(3), header .upper-menu nav ul li:nth-of-type(4) { display: none; } header #ham-menu { position: fixed; top: 60px; left: 0; z-index: -1; width: 100%; height: calc(100% - 60px); padding: 30px; border-top: 1px solid #2bbf89; background-color: #fff; overflow-y: auto; opacity: 0; transition: .3s; pointer-events: none; } header #ham-menu .inner { padding: 0; } header #menu-icon { display: block; position: fixed; top: 0; right: 0; z-index: 1000; width: 60px; height: 60px; line-height: 60px; background: linear-gradient(to right, #5cce52 0%, #17ba60 100%); cursor: pointer; } header #menu-cb:checked ~ #ham-menu { z-index: 1000; opacity: 1; pointer-events: auto; } header #menu-cb:checked ~ #menu-background{ opacity: 0.5; z-index: 999; } header #menu-icon span { display: inline-block; position: absolute; left: 18px; width: 25px; height: 2px; background-color: #fff; transition: all .4s; } header #menu-icon span:nth-of-type(1) { top: 18px; } header #menu-icon span:nth-of-type(2) { top: 29px; } header #menu-icon span:nth-of-type(3) { top: 40px; } header #menu-cb:checked ~ #menu-icon span:nth-of-type(1) { transform: translateY(11px) rotate(-315deg); } header #menu-cb:checked ~ #menu-icon span:nth-of-type(2) { opacity: 0; } header #menu-cb:checked ~ #menu-icon span:nth-of-type(3) { transform: translateY(-11px) rotate(315deg); } header .gNavi { background: none; color: #000; } header .gNavi a { color: #000; } header .gNavi #ham-menu > ul > li { display: block !important; float: none; width: 100%; margin-bottom: 40px; border-left: 3px solid #3eb134; } header .gNavi #ham-menu > ul > li:last-child { margin-bottom: 0; } header .gNavi #ham-menu > ul > li > a { display: block; height: auto; padding: 5px 15px; color: #000; text-align: left; } header .gNavi #ham-menu > ul > li > a:before { content: none; } header .gNavi #ham-menu > ul > li > a:after { content: ""; position: absolute; top: 12px; right: 0; width: 8px; height: 8px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } header .gNavi #ham-menu > ul > li:hover > a { color: #000; } header .gNavi #ham-menu > ul > li > a em { font-weight: 400; } header .gNavi #ham-menu > ul > li:last-child > a em:after, header .gNavi #ham-menu > ul > li > a em:before { content: none; } header .gNavi #ham-menu > ul > li.contact, header .gNavi #ham-menu > ul > li.voice { border-left: 0; } header .gNavi #ham-menu > ul > li.contact a, header .gNavi #ham-menu > ul > li.voice a { padding: 13px 0 15px; background: #231815; color: #fff; font-weight: 300; text-align: center; box-shadow: 5px 5px 10px rgba(35, 24, 21, .2); } header .gNavi #ham-menu > ul > li.contact a:after, header .gNavi #ham-menu > ul > li.voice a:after { content: none; } #head-search { width: 60px; margin-left: 5px; } #menu-search-icon { height: 60px; padding-top: 10px; } #menu-search-icon i { margin-bottom: 5px; } #menu-search-icon:hover { opacity: 1; } #menu-search:checked ~ #menu-search-icon span { top: 11px; left: 20px; width: 20px; height: 1px; } #search-menu { top: 65px; left: calc(-100vw + 125px); width: calc(100vw - 10px); height: 60px; padding: 10px; } #search-menu:before { top: -5px; right: 78px; left: auto; border-style: solid; border-width: 0 7px 8px 7px; } #search-menu input[name="kw"] { width: calc(100% - 50px); padding: 0 15px; font-size: 1.6rem; } #search-menu .submit { width: 50px; } #search-menu .submit i img { width: 18px; height: 18px; } header .impinfo { width: calc(100vw - 10px); margin: 65px auto -55px; } header .impinfo dt { width: 90px; padding: 6px; font-size: 1.1rem; } header .impinfo dt i { display: block; margin: 0 0 3px; } header .impinfo dt i img{ width: 20px; } header .impinfo dd { width: calc(100% - 90px); } header .impinfo .swiper-slide{ padding: 0 10px; } header .impinfo .swiper-button-prev-impinfo, header .impinfo .swiper-button-next-impinfo{ display: none; } .inner-menu .entrance { position: relative; margin-left: 20px; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; } .inner-menu .entrance:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, #5cce52 0%, #17ba60 100%); } .inner-menu .entrance a { display: block; position: relative; padding: 15px 0 15px 21px; } .inner-menu .entrance a:before { content: ""; position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -5px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } .inner-menu .idx { margin-bottom: 0; padding: 7px 0 7px 15px; border-width: 3px; font-size: 1.9rem; font-weight: 400; } .inner-menu .idx a { display: block; position: relative; pointer-events: none; } .inner-menu .idx a:before, .inner-menu .idx a:after { content: ""; display: block; position: absolute; top: 50%; right: 4px; width: 20px; height: 2px; margin-top: 0; border: 0; background-color: #3eb134; transition: .3s; } .inner-menu .idx a:before { transform: rotate(-90deg); } .inner-menu .idx a:after { transform: rotate(0); } .inner-menu .idxopen a:before { transform: rotate(0deg); } .inner-menu .idxopen a:after { background-color: transparent; } .inner-menu .menu-list { display: none; } .inner-menu ul > li { padding-right: 0; padding-left: 20px; } .inner-menu ul > li .child { padding-right: 0; padding-left: 0; } .inner-menu ul > li .child li { padding-right: 0; padding-left: 0; } .inner-menu dl { position: relative; } .inner-menu dl:not(:first-child){ margin-top: 0; } .inner-menu dl:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, #5cce52 0%, #17ba60 100%); } #ir_content .inner-menu dl:after, #about_content .inner-menu dl:after, #recruit_content .inner-menu dl:after{ content: none; } #ir_content .inner-menu dd, #about_content .inner-menu dd, #recruit_content .inner-menu dd{ display: block; } #ir_content .inner-menu .entrance, #about_content .inner-menu .entrance, #recruit_content .inner-menu .entrance{ margin-bottom: 20px;} .inner-menu dt { margin-bottom: 0; padding: 12px 0; font-weight: 400; position: relative; } .inner-menu dt:after { content: none; } .inner-menu dt a:after { content: none; } .inner-menu dt a { pointer-events: none; } .inner-menu dt:before, .inner-menu dt:after { content: ""; display: block; position: absolute; top: 50%; left: auto; right: 4px; width: 20px; height: 2px; margin-top: -3px; border: 0; background-color: #3eb134; transition: .3s; } .inner-menu dt:before { transform: rotate(-90deg); } .inner-menu dt:after { transform: rotate(0); } /*.inner-menu dt.open:after { content: none; }*/ .inner-menu dt.open:before{ transform: rotate(0deg); } .inner-menu dt.open:after { background-color: transparent; } .inner-menu dt i { width: 30px; margin: 5px 5px 0 0; text-align: center; } .inner-menu dt i img { transform: scale(0.65, 0.65); transform-origin: top left; } .inner-menu dd { display: none; padding: 0 0 20px 35px; } .inner-menu dd li:not(:last-child){ margin-bottom: 20px; } .inner-menu dd li a { display: block; position: relative; padding-left: 18px; } .inner-menu dd li a:before { content: ""; position: absolute; top: 4px; left: 0; width: 8px; height: 8px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } .inner-menu dd li li { margin-left: 1em; } } /*--------------------------------------------- 03. footer ---------------------------------------------*/ footer { padding: 40px 0; background: #3d3d45; color: #fff; } footer a { color: #fff; } footer .info:after { content: ""; display: block; clear: both; height: 0; } footer .info-l { float: left; width: 660px; border-right: 1px solid #999; } footer .info-l dl { margin-bottom: 25px; } footer .info-l dt { margin-bottom: 10px; font-family: 'Noto Sans JP', sans-serif; font-size: 2.8rem; font-weight: 500; } footer .info-l dt a { opacity: 1; } footer .info-l dt dfn { display: none; } footer .info-l dd { font-size: 1.2rem; } footer .sns-area ul { letter-spacing: -.4em; } footer .sns-area li { display: inline-block; margin-right: 45px; letter-spacing: normal; vertical-align: middle; } footer .sns-area li:nth-child(3) img { height: 38px; } footer .sns-area li:last-child { margin-right: 0; } footer .info-r { float: right; width: 510px; padding: 20px 0 20px 70px; font-size: 1.4rem; } footer .info-r li { float: left; width: 200px; margin: 0 30px 10px 0; } footer .info-r li:nth-child(2n) { margin-right: 0; } footer .info-r li a { display: block; position: relative; padding-left: 16px; } footer .info-r li a:after { content: ""; position: absolute; top: 7px; left: 0; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); } footer small { display: block; margin-top: 20px; color: #ccc; font-size: 1.1rem; } footer #pagetop { position: fixed; right: 25px; bottom: 30px; z-index: 10; cursor: pointer; } footer #pagetop:hover { opacity: .9; } @media (max-width: 767px) { footer { padding: 25px 0 20px; } footer .info-l { float: none; width: auto; padding-bottom: 25px; border-bottom: 1px solid #999; border-right: 0; } footer .info-l dl { margin-bottom: 15px; } footer .info-l dt { margin-bottom: 10px; font-size: 2.6rem; } footer .info-l dt dfn { display: block; font-size: 1.1rem; vertical-align: middle; } footer .info-l dd { font-size: 1.1rem; line-height: 1.75; } footer .sns-area li { margin-right: 30px; } footer .sns-area li img { height: 40px; } footer .sns-area li:nth-child(3) img { height: 36px; } footer .info-r { float: none; width: auto; padding: 20px 0; font-size: 1.2rem; } footer .info-r li { width: 50%; margin: 0 0 10px; } footer .info-r li:nth-child(2n) { margin-right: 0; } footer .info-r li a { display: block; position: relative; padding-left: 16px; } footer .info-r li a:after { content: ""; position: absolute; top: 7px; left: 0; width: 6px; height: 6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); } footer small { margin-top: 10px; } footer #pagetop { right: 20px; bottom: 20px; } footer #pagetop img { width: 45px; height: auto; } } /*--------------------------------------------- 04. footer menu ---------------------------------------------*/ #footer-menu { position: relative; background: #ececec; } #footer-menu:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 70px; background: linear-gradient(to right, #5cce52 0%, #17ba60 100%); } #footer-menu .tabs { position: relative; z-index: 2; width: 1170px; margin: 0 auto; color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 1.25; } #footer-menu .tabs:after { content: ""; display: block; clear: both; height: 0; } #footer-menu .tab_item { display: table; position: relative; float: left; width: calc(100% / 5); text-align: center; transition: .2s; cursor: pointer; } #footer-menu .tab_item:before, #footer-menu .tab_item:last-of-type:after { content: ""; position: absolute; top: 50%; width: 1px; height: 40px; margin-top: -20px; background: rgba(255, 255, 255, .4); } #footer-menu .tab_item:before { left: 0; } #footer-menu .tab_item:last-of-type:after { right: 0; } #footer-menu .tab_item span { display: table-cell; position: relative; height: 70px; vertical-align: middle; } #footer-menu .tab_item span:before, #footer-menu .tab_item:hover span:before { content: ""; position: absolute; bottom: 0; left: 7px; z-index: -1; width: calc(100% - 14px); height: 63px; background: #ececec; opacity: 0; transition: .3s; } #footer-menu .tabs input:checked + .tab_item span, #footer-menu .tab_item:hover span { color: #3eb134; } #footer-menu .tabs input:checked + .tab_item span:before{ opacity: 1; } #footer-menu .tab_item:hover span:before { opacity: 0.8; } #footer-menu input[name="tab_item"] { display: none; } #footer-menu #tab-kojin:checked ~ #kojin_content, #footer-menu #tab-hojin:checked ~ #hojin_content, #footer-menu #tab-about:checked ~ #about_content, #footer-menu #tab-recruit:checked ~ #recruit_content, #footer-menu #tab-ir:checked ~ #ir_content { display: block; } #footer-menu .tab_content { display: none; clear: both; padding: 40px 0; overflow: hidden; } @media (max-width: 767px) { #footer-menu { padding: 20px 20px 30px; } #footer-menu:before { height: 20px; } #footer-menu .inner { padding: 0; } #footer-menu .tabs { width: auto; } #footer-menu .tab_item { display: none; /*display: block;*/ float: none; width: 100%; text-align: left; } #footer-menu .tab_item:before, #footer-menu .tab_item:last-of-type:after { content: none; } #footer-menu .tab_item span { display: block; height: auto; } #footer-menu .tab_content { display: block; padding: 30px 0 0; } } /*--------------------------------------------- 05. clearfix ---------------------------------------------*/ .clearfix:after, header:after, footer:after { content: ""; display: block; clear: both; height: 0; } /*--------------------------------------------- 06. pattern common ---------------------------------------------*/ .edit { line-height: 1.75; } .edit a { position: relative; text-decoration: underline; word-break: break-all; } .edit a:hover { text-decoration: none; opacity: 1; } .edit a[target="_blank"]:after, .blank a:after { content: "\f360"; display: inline-block; margin: 0 5px; color: #333; font-family: "Font Awesome 5 Pro"; transform: none; } .edit a[href$=".pdf"]:after, .pdf a:after { content: "\f1c1"; display: inline-block; margin: 0 5px; color: #333; font-family: "Font Awesome 5 Pro"; transform: none; } .edit .btn a { text-decoration: none; } .edit .btn a:hover { opacity: 0.6; } .edit .btn a[target="_blank"]:after { /*content: ""; margin-left: 0;*/ margin-top: -12px; border: 0; color: #fff; } .edit .btn a[href$=".pdf"]:after { margin-top: -12px; border: 0; color: #fff; } .edit strong { font-weight: bold; } .edit .freedialtel { display: inline-block; } .edit a[href^="mailto:"]:after { content: none; } /*--------------------------------------------- 07. patternA ---------------------------------------------*/ .unit01, .form .unitA01 { margin-bottom: 70px; } .unit02 { margin-bottom: 50px; } .unit03, .form .unitA03, .unit04 { margin-bottom: 40px; } .unit04:nth-last-of-type(1), .unit04:nth-last-of-type(2) { margin-bottom: 0; } .unit04v { margin-top: 40px; } .unit04v:nth-of-type(-n+3) { margin-top: 0; } .unit03:last-child, .form .unitA03:last-child, .unit04-wrap, .unit04v-wrap { margin-bottom: 70px; } .unit04-wrap + .unit03, .unit04v-wrap + .unit03 { margin: -30px 0 40px; } .unit04-wrap + .unit06, .unit04v-wrap + .unit06, .unit03 + .unit06 { margin: -30px 0 70px; } .unit05, .unit06, .unit07, .unit09 { clear: both; margin-bottom: 70px; } .unit02 { text-align: center; } .unit02 figure img { max-width: 100%; } .unit03, .form .unitA03, .unit04, .unit04v { padding: 40px; border: 1px solid #ccc; } .unit04 { float: left; width: calc((100% - 30px) / 2); margin-right: 30px; } .unit04v { float: left; width: calc((100% - 60px) / 3); margin-right: 30px; } .unit04:nth-of-type(2n) { margin-right: 0; } .unit04v:nth-of-type(3n){ margin-right: 0; } .unit03 .title, .unit04 .title, .unit04v .title { padding-bottom: 25px; color: #3eb134; font-size: 1.8rem; font-weight: bold; } .unit04 .title:empty, .unit04v .title:empty { padding-bottom: 0; } .unit03 figure, .unit04 figure, .unit04v figure { float: left; margin: 0 25px 20px 0; } .unit03 figure.reverse, .unit04 figure.reverse, .unit04v figure.reverse { float: right; margin: 0 0 20px 25px; } .unit03 figure img { max-width: 1093px; } .unit04 figure img { max-width: 493px; } .unit04v figure img { max-width: 150px; } .unit03 .btn, .unit04 .btn { margin-top: 30px; text-align: right; } .unit04v .btn { margin-top: 30px; text-align: center; } .unit03 .btn a, .unit04 .btn a, .unit04v .btn a { text-decoration: none; } .unit03 .btn a:hover, .unit04 .btn a:hover, .unit04v .btn a:hover { opacity: .6; } .unit05 { padding: 40px; background: #edf6ec; } .unit05 h3 { margin: 0 0 30px !important; } .unit05 li:not(:last-child){ margin-bottom: 20px; } .unit05 li a { display: inline-block; position: relative; padding-left: 20px; text-decoration: none; } .unit05 li a:before { content: ""; position: absolute; top: 9px; left: 0; width: 8px; height: 8px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(45deg); } .unit05 li a:hover { text-decoration: underline; } .unit05 .btn { margin-top: 30px; text-align: center; } .unit05 .btn a { text-decoration: none; } .unit05 .btn a:hover { opacity: .6; } .unit06 a { display: block; position: relative; padding: 40px 70px 40px 40px; border: 1px solid #ccc; text-decoration: none; } .unit06 a:after { content: ""; position: absolute; top: 50%; right: 24px; width: 16px; height: 16px; margin-top: -8px; border-top: 2px solid #3eb134; border-right: 2px solid #3eb134; transform: rotate(45deg); } .unit06 a[target="_blank"]:after { width: auto; height: auto; border: 0; } .unit06 a:hover { opacity: .6; } .unit06 .title { padding-bottom: 25px; color: #3eb134; font-size: 1.8rem; font-weight: bold; } .unit06 figure { float: left; margin: 0 30px 30px 0; } .unit06 figure.reverse { float: right; margin: 0 0 30px 30px; } .unit06 figure img { max-width: calc(100% + 30px); } .unit07 .lead { margin-bottom: 15px; } .unit07-exp { display: table; width: 100%; padding: 40px; border: 1px solid #ccc; } .unit07-exp figure { display: table-cell; vertical-align: middle; } .unit07-exp .exp { display: table-cell; padding-left: 30px; vertical-align: middle; width: 100%; } .unit07-exp address { margin-top: -20px; font-family: 'Noto Sans JP', sans-serif; font-size: 4rem; font-weight: 700; } .unit07-exp address i { position: relative; top: -13px; } .unit07-exp + .unit07-exp { margin-top: 30px; } .unit08 dl { float: left; width: calc((100% - 30px) / 2); margin: 40px 30px 0 0; } .unit08 dl:nth-of-type(1), .unit08 dl:nth-of-type(2) { margin-top: 0; } .unit08 dl:nth-of-type(2n){ margin-right: 0; } .unit08 dt { margin-bottom: 20px; font-family: 'Noto Sans JP', sans-serif; font-size: 2.2rem; font-weight: 500; line-height: 1.25; } .unit01 ul:not(.nostyle), .unit02 ul:not(.nostyle), .unit03 ul:not(.nostyle), .unit04 ul:not(.nostyle), .unit04v ul:not(.nostyle), .unit07 ul:not(.nostyle) { list-style: none; } .unit01 ul:not(.nostyle) > li, .unit02 ul:not(.nostyle) > li, .unit03 ul:not(.nostyle) > li, .unit04 ul:not(.nostyle) > li, .unit04v ul:not(.nostyle) > li, .unit07 ul:not(.nostyle) > li { /*display: flex; flex-direction: column;*/ display: table; position: relative; padding-left: 14px; } .unit01 ul:not(.nostyle) > li:before, .unit02 ul:not(.nostyle) > li:before, .unit03 ul:not(.nostyle) > li:before, .unit04 ul:not(.nostyle) > li:before, .unit04v ul:not(.nostyle) > li:before, .unit07 ul:not(.nostyle) > li:before{ content: ""; position: absolute; top: 7px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #3eb134; } .unit01 ul:not(.nostyle) > li span, .unit02 ul:not(.nostyle) > li span, .unit03 ul:not(.nostyle) > li span, .unit04 ul:not(.nostyle) > li span, .unit04v ul:not(.nostyle) > li span, .unit07 ul:not(.nostyle) > li span { display: contents; display: ruby-base; } .unit01 ol:not(.nostyle), .unit02 ol:not(.nostyle), .unit03 ol:not(.nostyle), .unit04 ol:not(.nostyle), .unit04v ol:not(.nostyle), .unit07 ol:not(.nostyle) { display: flex; flex-direction: column; list-style: decimal; padding-left: 20px; } .acd-menu { margin-bottom: 40px; } .acd-check { display: none; } .acd-label { display: block; position: relative; padding: 25px 70px 25px 25px; border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(to right, #5cce52, #2abe88) 1; background: #edf6ec; color: #3eb134; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; cursor: pointer; } .acd-label:before, .acd-label:after { content: ''; position: absolute; top: 50%; right: 30px; width: 20px; height: 2px; background: #3eb134; transition: .3s; } .acd-label:before { margin-top: -1px; } .acd-label:after { transform: translateY(-50%) rotate(-90deg); } .acd-content { height: 0; opacity: 0; padding: 0 25px; transition: .3s; visibility: hidden; overflow: hidden; } .acd-check:checked + .acd-label:after { transform: translateY(-50%); } .acd-check:checked + .acd-label + .acd-content { height: auto; opacity: 1; padding: 15px 25px; visibility: visible; } @media (max-width: 767px) { .unit01 { margin-bottom: 35px; } .unit02 { margin-bottom: 25px; } .unit03, .unit04, .unit04:nth-last-of-type(2), .unit04v, .unit04v:nth-of-type(-n+3) { margin-top: 20px; } .unit04v:first-of-type { margin-top: 0; } .unit03:last-child, .unit04-wrap, .unit04v-wrap { margin-bottom: 35px; } .unit04-wrap + .unit03, .unit04v-wrap + .unit03 { margin: -15px 0 20px; } .unit04-wrap + .unit06, .unit04v-wrap + .unit06, .unit03 + .unit06 { margin: -15px 0 35px; } .unit05, .unit06, .unit07, .unit09 { margin-bottom: 35px; } .unit03, .unit04, .unit04v { padding: 20px; } .unit04, .unit04v { float: none; width: auto; margin-right: 0; padding: 20px; } .unit03 .title, .unit04 .title, .unit04v .title { padding-bottom: 15px; font-size: 1.6rem; } .unit03 figure, .unit04 figure, .unit04v figure, .unit03 figure.reverse, .unit04 figure.reverse, .unit04v figure.reverse { float: none; margin: 0 0 15px; text-align: center; } .unit03 figure img, .unit04 figure img, .unit04v figure img { max-width: 100%; } .unit03 .btn, .unit04 .btn, .unit04v .btn { margin-top: 15px; text-align: center; } .unit05 { padding: 20px; } .unit05 h3 { margin: 0 0 15px !important; } .unit05 li:not(:last-child){ margin-bottom: 10px; } .unit05 li a:before { top: 7px; } .unit05 .btn { margin-top: 15px; } .unit06 a { padding: 20px 35px 20px 20px; } .unit06 a:after { right: 15px; } .unit06 .title { padding-bottom: 15px; font-size: 1.6rem; } .unit06 figure, .unit06 figure.reverse { float: none; margin: 0 0 15px; } .unit06 figure img { max-width: 100%; } .unit07-exp { padding: 20px; } .unit07-exp figure { display: block; text-align: center; } .unit07-exp .exp { display: block; padding-left: 0; } .unit07-exp figure img { max-width: 100%; } .unit07-exp address { display: block; margin: 10px 0; font-size: 3rem; line-height: 1.25; } .unit07-exp address i { top: -2px; } .unit08 dl { float: none; width: 100%; margin: 40px 0 0; } .unit08 dl:nth-of-type(2){ margin-top: 40px; } .unit08 dt { margin-bottom: 20px; font-size: 1.8rem; } .unit08 dd iframe { width: 100%; height: 50vw; } .acd-label { font-size: 1.6rem; padding: 15px 60px 15px 15px; } .acd-label:before, .acd-label:after { right: 25px; width: 15px; } .acd-content { padding: 0 15px; } .acd-check:checked + .acd-label + .acd-content { padding: 15px; } } /*--------------------------------------------- 08. patternB ---------------------------------------------*/ .mainimg { margin-bottom: 75px; text-align: center; } .mainimg img { max-width: 100%; height: auto; } .anclist { margin-bottom: 1em; padding: 40px; background: #edf6ec; } .anclist:after { content: ""; display: block; clear: both; height: 0; } .anclist li { display: table; position: relative; float: left; width: calc((100% - 60px) / 3); min-height: 70px; margin: 20px 30px 0 0; box-shadow: 5px 5px 10px rgba(35, 24, 21, .2); } .anclist li:nth-child(1), .anclist li:nth-child(2), .anclist li:nth-child(3) { margin-top: 0; } .anclist li:nth-child(3n){ margin-right: 0; } .anclist li:after { content: ""; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; margin-top: -8px; border-top: 1px solid #3eb134; border-right: 1px solid #3eb134; transform: rotate(135deg); } .anclist li a { display: table-cell; min-height: 70px; padding: 10px 20px; background: #fff; line-height: 1.25; vertical-align: middle; text-decoration: none; } .anclist li a:hover { opacity: 0.6; } .catlist { margin-bottom: 60px; } .catlist:after { content: ""; display: block; clear: both; height: 0; } .catlist li { position: relative; float: left; width: 350px; margin: 30px 50px 30px 0; background: #fff; } .catlist li:nth-of-type(1), .catlist li:nth-of-type(2), .catlist li:nth-of-type(3) { margin-top: 0; } .catlist li:nth-of-type(3n){ margin-right: 0; } .catlist li:after { box-sizing: border-box; content: ""; position: absolute; right: -20px; bottom: -20px; z-index: -1; width: 350px; height: 100%; border-top: 120px solid #fff; background: rgb(109,218,99); background: linear-gradient(135deg, rgba(109,218,99,1) 55%, rgba(42,190,136,1) 80%); } .catlist li a { display: block; text-decoration: none; } .catlist li a:hover { opacity: 0.6; } .catlist li a:after { content: none !important; } .catlist li figure { margin-bottom: 20px; text-align: center; } .catlist li figure img { max-width: 100%; height: auto; } .catlist li dl { position: relative; padding: 0 36px 20px 20px; } .catlist li dl:after { content: ""; position: absolute; top: 50%; right: 15px; width: 20px; height: 20px; margin-top: -10px; border-top: 2px solid #3eb134; border-right: 2px solid #3eb134; transform: rotate(45deg); } .catlist li dt { margin-bottom: 20px; color: #3eb134; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; font-weight: 500; line-height: 1.3; } .catlist li dd p:not(:last-of-type){ margin-bottom: .5em; } .catlist.last{ margin-top: 80px; padding-top: 80px; border-top: 1px solid #ccc; } .notes { font-size: 1.4rem; /*text-indent: -1em; padding-left: 1em;*/ } .notes > p { text-indent: -1em; padding-left: 1em; } .notes + p { margin-top: 80px; } @media (max-width: 767px) { .mainimg { margin-bottom: 35px; } .anclist { margin-bottom: 1em; padding: 20px; } .anclist li { display: block; float: none; width: auto; min-height: initial; min-height: auto; margin: 15px 0 0; } .anclist li:nth-child(2), .anclist li:nth-child(3) { margin-top: 15px; } .anclist li a { display: block; min-height: initial; min-height: auto; padding: 20px; } .anclist li a:after { right: 15px; width: 6px; height: 6px; margin-top: -3px; } .catlist { margin-bottom: 30px; } .catlist li { float: none; width: calc(100% - 15px); margin: 45px 0; } .catlist li:nth-of-type(2), .catlist li:nth-of-type(3) { margin-top: 45px; } .catlist li:after { right: -15px; bottom: -15px; width: calc(100% - 15px); border-top-width: 60px; } .catlist li dt { font-size: 1.6rem; } .catlist.last { margin-top: 40px; padding-top: 40px; } .catlist.last li:last-of-type{ margin-bottom: 0; } .notes + p { margin-top: 40px; } .notes { font-size: 1.2rem; } } /*--------------------------------------------- 09. patternC ---------------------------------------------*/ .related-box { margin: 60px 0; padding: 40px; border: 1px solid #3eb134; line-height: 1.75; background: transparent; } .btn.prev a { padding: 13px 30px 13px 30px; text-decoration: none;} .btn.prev a:after{ transform: rotate(-135deg); right: auto; left: 20px; } .btn.prev a:hover{ opacity: 0.8; } @media (max-width: 767px) { .related-box { padding: 20px; } } /*--------------------------------------------- 10. patternD ---------------------------------------------*/ .editor-area { margin-bottom: 80px; } .editor-area img, .unit02 img { max-width: 100%; } .notes.pattern-d{ margin-top: -30px; } @media (max-width: 767px) { .editor-area { margin-bottom: 40px; } .notes.pattern-d{ margin-top: -5px; } } /*--------------------------------------------- 11. patternE ---------------------------------------------*/ .archive-list { margin-bottom: 40px; } .archive-list ul { width: 410px; display: flex; justify-content: center; margin: auto; } .archive-list li { float: left; width: calc(100% / 5); border-right: 1px solid #ccc; } .archive-list li:first-of-type{ border-left: 1px solid #ccc; } .archive-list li a { text-decoration: none; padding: 5px 0; transition: 0.3s; display: block; text-align: center; } .archive-list li a:hover, .archive-list li a.active { font-weight: bold; } .accordion dt { position: relative; padding: 25px; background:#edf6ec; font-family: 'Noto Sans JP', sans-serif; font-size: 1.8rem; cursor: pointer; } .accordion dt:before, .accordion dt:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, #5cce52 0%, #2abe88 100%); } .accordion dt:before { top: auto; bottom: 0; } .accordion dt a { display: block; text-decoration: none; color: #3eb134; } .accordion dt a:before, .accordion dt a:after { content: ""; display: block; position: absolute; top: 50%; right: 30px; width: 20px; height: 2px; margin-top: 0; border: 0; background-color: #3eb134; transition: .3s; } .accordion dt a:before { transform: rotate(-90deg); } .accordion dt a:after { transform: rotate(0); } .accordion dt.open a:before { transform: rotate(0deg); } .accordion dt.open a:after { background-color: transparent; } .accordion dd { display: none; } .accordion dd + dt { margin-top: 60px; } .accordion dd em { display: block; padding: 15px 70px 15px 0; } ul.news-list { padding: 0 40px; } ul.news-list > li { border-bottom: 1px solid #ccc; } ul.news-list > li:last-of-type{ border-bottom: 1px solid #ccc; } ul.news-list > li a { display: block; position: relative; padding: 15px 70px 15px 0; text-decoration: none; } ul.news-list > li a:hover { opacity: 0.6; } ul.news-list > li a:after { content: ""; position: absolute; top: 50%; right: 35px; width: 10px; height: 10px; margin-top: -6px; border-top: 1px solid #24b751; border-right: 1px solid #24b751; transform: rotate(45deg); } ul.news-list > li a[target="_blank"]:after { content: ""; transform: rotate(45deg); } ul.news-list > li a[href^="http"]:after { content: "\f360"; border: 0; top: 50%; right: 30px; margin-top: -12px; transform: none; } ul.news-list > li a[href$=".pdf"] span:after{ content: "\f1c1"; position: relative; top: 0; margin-left: 5px; display: inline-block; font-family: "Font Awesome 5 Pro"; width: 14px; height: 18px; } ul > li time { display: block; margin-bottom: 5px; color: #666; font-size: 1.4rem; } @media (max-width: 767px) { .archive-list ul { width: auto; } .archive-list li { width: calc(100% / 5); } .archive-list li a{ display: block; padding: 5px 0; text-align: center; width: 100%; } .accordion dt { font-size: 1.6rem; padding: 15px; } .accordion dt a { padding: 0 50px 0 0; } .accordion dt a:before, .accordion dt a:after { width: 15px; right: 10px; } .accordion dd + dt { margin-top: 30px; } ul.news-list { padding: 0 10px; } ul.news-list > li a { padding: 15px 50px 15px 0; } ul.news-list > li a:after { right: 15px; width: 6px; height: 6px; margin-top: -3px; } ul.news-list > li a[href^="http"]:after{ right: 5px; } } /*--------------------------------------------- 12. patternF ---------------------------------------------*/ .history-wrap { margin: 120px 0 60px; position: relative; } .history-wrap:before{ content: ""; border-left: dashed 2px #3eb134; height: 60px; position: absolute; left: 205px; top: -65px; } .history-wrap:after { content: ""; border-left: dashed 2px #3eb134; height: 60px; position: absolute; left: 205px; bottom: -65px; } .history-area { display: flex; align-items: stretch; flex-wrap: wrap; } .history-area .year { font-size: 4.0rem; color: #3eb134; margin-right: 45px; padding-right: 10px; margin-top: 60px; border-bottom: 1px solid #ccc; width: 160px; } .history-area .year:first-of-type{ margin-top: 60px } .history-area:last-of-type .year { border-bottom: 0; } .history-area:last-of-type .detail .box-wrap{ border-bottom: 0; padding-bottom: 20px; } .history-area .detail { display: flex; align-items: center; border-left: 2px solid #3eb134; padding: 70px 0 0; width: calc(100% - 160px - 45px); flex-wrap: wrap; position: relative; } .history-area .detail .box { display: flex; position: relative; } .history-area .detail .box-wrap { margin-left: 45px; border-bottom: 1px solid #ccc; padding-bottom: 80px; width: 100%; } .history-area .detail .box + .box { margin-top: 60px;} .history-area .detail .box:before { content: ""; background: #fff; border: 3px solid #3eb134; border-radius: 50%; width: 13px; height: 13px; position: absolute; top: 4px; left: -56px; } .history-area .detail .box time { text-align: right; font-size: 1.8rem; color: #3eb134; margin-right: 30px; width: 50px; } .history-area .detail .box .content { width: calc(100% - 50px);} .history-area .detail .box .content p + img { max-width: 100%; margin-top: 30px; } @media (max-width: 767px) { .history-wrap { margin: 90px 0 60px; } .history-wrap:before { left: calc(29% + 20px); height: 55px; top: -50px; } .history-wrap:after { left: calc(29% + 20px); height: 55px; bottom: -50px; } .history-area .year { font-size: 2.3rem; margin-right: 20px; margin-top: 25px; width: 29%;} .history-area .year:first-of-type { margin-top: 38px; } .history-area .detail { width: calc(100% - 29% - 20px); padding: 40px 0 0; } .history-area .detail .box { display: block; } .history-area .detail .box + .box { margin-top: 30px; } .history-area .detail .box:before { left: -36px; top: 6px; } .history-area .detail .box-wrap { margin-left: 25px; padding-bottom: 45px; } .history-area .detail .box .content { width: 100%; } .history-area .detail .box .content img { width: 100%; } .history-area .detail .box .content p + img{ margin-top: 15px; } } /*--------------------------------------------- 13. patternG ---------------------------------------------*/ body:not(.top) .archive-area h2 { pointer-events: none; } body:not(.top) .archive-area h2:after { content: none; } .pager-list { float: right; width: calc(100% - 200px); } .pager-list ul { display: flex; justify-content: center; width: 410px; margin: 0 0 0 200px; } .pager-list ul li { display: flex; align-items: center; justify-content: center; width: calc((100% / 3) - 10px); text-align: center; } .pager-list ul li.active { font-weight: bold; } .pager-list ul li a { display: block; position: relative; text-decoration: none; } .pager-list ul li:first-child a { padding: 5px 20px 5px 0; border-right: 1px solid #ccc; } .pager-list ul li:last-child a { padding: 5px 0 5px 20px; border-left: 1px solid #ccc; } .pager-list ul li a:after { content: ""; position: absolute; top: 50%; right: -25px; width: 10px; height: 10px; margin-top: -6px; border-top: 1px solid #24b751; border-right: 1px solid #24b751; transform: rotate(45deg); } .pager-list ul li:first-child a:after { right: auto; left: -25px; transform: rotate(-135deg); } .pager-list ul li a:hover { opacity: .6; } .settingbox { background: #edf6ec; padding: 40px; } .settingbox p { font-size: 2.2rem; font-weight: bold;} .settingbox .anclist { padding: 0; margin-top: 15px; } .settingbox .anclist li { width: calc((100% - 40px) / 2); } .settingbox .anclist li.active a { font-weight: bold; color: #3eb134; pointer-events: none; } .settingbox .anclist li.active a:hover{ opacity: 1.0;} .settingbox .anclist li:after { margin-top: -4px; transform: rotate(45deg); } .settingbox .anclist li.active:after { content: none;} .settingbox .anclist li:nth-child(2n) { margin-right: 0; } .settingbox .anclist li:nth-child(3n) { margin-right: 30px; } .settingbox .anclist li:nth-child(1), .settingbox .anclist li:nth-child(2), .settingbox .anclist li:nth-child(3) { margin-top: 20px; } .schedule .unit04 { padding: 20px; } .schedule .titlewrap { margin-bottom: 20px; } .schedule .title { padding: 10px 20px; background: linear-gradient(135deg, rgba(109,218,99,1) 30%, rgba(42,190,136,1) 55%); color: #fff; font-family: 'Noto Sans JP', sans-serif; } @media (max-width: 767px) { .pager { margin-bottom: 20px; } .pager-list { float: none; width: 100%; } .pager-list ul { width: auto; margin: 0 auto; } .pager-list ul li:first-child a { padding: 5px 20px 5px 0; } .pager-list ul li:last-child a { padding: 5px 0 5px 20px; } .pager-list ul li a:after { right: -15px; } .pager-list ul li:first-child a:after{ left: -15px; } .settingbox { padding: 20px; } .settingbox p { font-size: 1.8rem; } .settingbox .anclist li { width: auto; } .settingbox .anclist li:nth-child(3n){ margin-right: 0; } }