@charset "utf-8"; body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,main,figure{margin:0;padding:0}table{font-size:100%;font-family:inherit}fieldset,img{border:0}img,svg{vertical-align:middle}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%}q:before,q:after{content:''}abbr,acronym{border:0}select,input,textarea{font-size:100%}header,footer,nav,main,section,article,figure,aside{display:block}.clearfix:after,.row:after{content:"";display:table;clear:both}.fl{float:left}.fr{float:right}@media screen and (min-width: 769px),print{.pc_fl{float:left}.pc_fr{float:right}}@media screen and (max-width: 768px){.sp_fl{float:left}.sp_fr{float:right}}.tal{text-align:left}.tac{text-align:center}.tar{text-align:right}@media screen and (min-width: 769px),print{.pc_tal{text-align:left}.pc_tac{text-align:center}.pc_tar{text-align:right}}@media screen and (max-width: 768px){.sp_tal{text-align:left}.sp_tac{text-align:center}.sp_tar{text-align:right}}.m00{margin:0!important}.mb00{margin-bottom:0!important}.mb05{margin-bottom:5px!important}.mb08{margin-bottom:8px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.mb20{margin-bottom:20px!important}.mb25{margin-bottom:25px!important}.mb30{margin-bottom:30px!important}.mb35{margin-bottom:35px!important}.mb40{margin-bottom:40px!important}.mb45{margin-bottom:45px!important}.mb50{margin-bottom:50px!important}.mb60{margin-bottom:60px!important}.mb70{margin-bottom:70px!important}.mt00{margin-top:0!important}.mt05{margin-top:5px!important}.mt08{margin-top:8px!important}.mt10{margin-top:10px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt25{margin-top:25px!important}.mt30{margin-top:30px!important}.mt35{margin-top:35px!important}.mt40{margin-top:40px!important}.mt45{margin-top:45px!important}.mt50{margin-top:50px!important}@media screen and (min-width: 769px),print{.pc_m00{margin:0!important}.pc_mb00{margin-bottom:0!important}.pc_mb05{margin-bottom:5px!important}.pc_mb08{margin-bottom:8px!important}.pc_mb10{margin-bottom:10px!important}.pc_mb15{margin-bottom:15px!important}.pc_mb20{margin-bottom:20px!important}.pc_mb25{margin-bottom:25px!important}.pc_mb30{margin-bottom:30px!important}.pc_mb35{margin-bottom:35px!important}.pc_mb40{margin-bottom:40px!important}.pc_mb45{margin-bottom:45px!important}.pc_mb50{margin-bottom:50px!important}.pc_mt00{margin-top:0!important}.pc_mt05{margin-top:5px!important}.pc_mt08{margin-top:8px!important}.pc_mt10{margin-top:10px!important}.pc_mt15{margin-top:15px!important}.pc_mt20{margin-top:20px!important}.pc_mt25{margin-top:25px!important}.pc_mt30{margin-top:30px!important}.pc_mt35{margin-top:35px!important}.pc_mt40{margin-top:40px!important}.pc_mt45{margin-top:45px!important}.pc_mt50{margin-top:50px!important}}@media screen and (max-width: 768px){.sp_m00{margin:0!important}.sp_mb00{margin-bottom:0!important}.sp_mb05{margin-bottom:5px!important}.sp_mb08{margin-bottom:8px!important}.sp_mb10{margin-bottom:10px!important}.sp_mb15{margin-bottom:15px!important}.sp_mb20{margin-bottom:20px!important}.sp_mb25{margin-bottom:25px!important}.sp_mb30{margin-bottom:30px!important}.sp_mb35{margin-bottom:35px!important}.sp_mb40{margin-bottom:40px!important}.sp_mb45{margin-bottom:45px!important}.sp_mb50{margin-bottom:50px!important}.sp_mt00{margin-top:0!important}.sp_mt05{margin-top:5px!important}.sp_mt08{margin-top:8px!important}.sp_mt10{margin-top:10px!important}.sp_mt15{margin-top:15px!important}.sp_mt20{margin-top:20px!important}.sp_mt25{margin-top:25px!important}.sp_mt30{margin-top:30px!important}.sp_mt35{margin-top:35px!important}.sp_mt40{margin-top:40px!important}.sp_mt45{margin-top:45px!important}.sp_mt50{margin-top:50px!important}}.p00{padding:0!important}.pb00{padding-bottom:0!important}.pb05{padding-bottom:5px!important}.pb08{padding-bottom:8px!important}.pb10{padding-bottom:10px!important}.pb15{padding-bottom:15px!important}.pb20{padding-bottom:20px!important}.pb25{padding-bottom:25px!important}.pb30{padding-bottom:30px!important}.pb35{padding-bottom:35px!important}.pb40{padding-bottom:40px!important}.pb45{padding-bottom:45px!important}.pb50{padding-bottom:50px!important}.pt00{padding-top:0!important}.pt05{padding-top:5px!important}.pt08{padding-top:8px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt20{padding-top:20px!important}.pt25{padding-top:25px!important}.pt30{padding-top:30px!important}.pt35{padding-top:35px!important}.pt40{padding-top:40px!important}.pt45{padding-top:45px!important}.pt50{padding-top:50px!important}@media screen and (min-width: 769px),print{.pc_p00{padding:0!important}.pc_pb00{padding-bottom:0!important}.pc_pb05{padding-bottom:5px!important}.pc_pb08{padding-bottom:8px!important}.pc_pb10{padding-bottom:10px!important}.pc_pb15{padding-bottom:15px!important}.pc_pb20{padding-bottom:20px!important}.pc_pb25{padding-bottom:25px!important}.pc_pb30{padding-bottom:30px!important}.pc_pb35{padding-bottom:35px!important}.pc_pb40{padding-bottom:40px!important}.pc_pb45{padding-bottom:45px!important}.pc_pb50{padding-bottom:50px!important}.pc_pt00{padding-top:0!important}.pc_pt05{padding-top:5px!important}.pc_pt08{padding-top:8px!important}.pc_pt10{padding-top:10px!important}.pc_pt15{padding-top:15px!important}.pc_pt20{padding-top:20px!important}.pc_pt25{padding-top:25px!important}.pc_pt30{padding-top:30px!important}.pc_pt35{padding-top:35px!important}.pc_pt40{padding-top:40px!important}.pc_pt45{padding-top:45px!important}.pc_pt50{padding-top:50px!important}.pc_pt150{padding-top:150px!important}}@media screen and (max-width: 768px){.sp_p00{padding:0!important}.sp_pb00{padding-bottom:0!important}.sp_pb05{padding-bottom:5px!important}.sp_pb08{padding-bottom:8px!important}.sp_pb10{padding-bottom:10px!important}.sp_pb15{padding-bottom:15px!important}.sp_pb20{padding-bottom:20px!important}.sp_pb25{padding-bottom:25px!important}.sp_pb30{padding-bottom:30px!important}.sp_pb35{padding-bottom:35px!important}.sp_pb40{padding-bottom:40px!important}.sp_pb45{padding-bottom:45px!important}.sp_pb50{padding-bottom:50px!important}.sp_pt00{padding-top:0!important}.sp_pt05{padding-top:5px!important}.sp_pt08{padding-top:8px!important}.sp_pt10{padding-top:10px!important}.sp_pt15{padding-top:15px!important}.sp_pt20{padding-top:20px!important}.sp_pt25{padding-top:25px!important}.sp_pt30{padding-top:30px!important}.sp_pt35{padding-top:35px!important}.sp_pt40{padding-top:40px!important}.sp_pt45{padding-top:45px!important}.sp_pt50{padding-top:50px!important}} /* ---------- font size */ .fs05 { font-size: 0.5em; } .fs06 { font-size: 0.6em; } .fs07 { font-size: 0.7em; } .fs08 { font-size: 0.8em; } .fs09 { font-size: 0.9em; } .fs10 { font-size: 1.0em; } .fs11 { font-size: 1.1em; } .fs12 { font-size: 1.2em; } .fs13 { font-size: 1.3em; } .fs14 { font-size: 1.4em; } .fs15 { font-size: 1.5em; } .fs16 { font-size: 1.6em; } .fs17 { font-size: 1.7em; } .fs18 { font-size: 1.8em; } .fs19 { font-size: 1.9em; } .fs20 { font-size: 2.0em; } .fs21 { font-size: 2.1em; } .fs22 { font-size: 2.2em; } .fs23 { font-size: 2.3em; } .fs24 { font-size: 2.4em; } .fs25 { font-size: 2.5em; } .fs30 { font-size: 3.0em; } /* ======================================================== template.css => テンプレート用CSS ======================================================== */ html { font-size: 62.5%; } /*html { visibility: hidden; } html.wf-active { visibility: visible; }*/ body { background-color: #fff; font-size: 10px; font-size: 1rem; line-height: 1.8; color: #2F2F2F; word-wrap: break-word; overflow-wrap: break-word; font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; font-weight: 300; letter-spacing:1px; font-style: normal; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } p { font-size:1.6rem; line-height:2; } table { border-collapse: collapse; border-spacing: 0; line-height: 1.8; } a { color: #004E92; text-decoration: none; outline: none; } a:hover { color: #78B3DD; text-decoration: none; transition:0.3s; } a.a_reverse, .a_reverse a{ text-decoration: none; } @media screen and (min-width: 769px) { a.a_reverse:hover, .a_reverse a:hover { text-decoration: underline; } } a[href^="http"], a[href^="mailto:"] { /*display: inline-block;*/ word-break: break-all; word-wrap : break-word; overflow-wrap : break-word; } label { cursor: pointer; } /*input, select, textarea, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; max-width: 100%; margin: 0; border-radius: 0; vertical-align: middle; font-family: inherit; outline: none; font-size: 100%; }*/ ::-webkit-input-placeholder { color: #ccc; } :-ms-input-placeholder { color: #ccc; } ::-moz-placeholder { color: #ccc; } select::-ms-expand { display: none; } button { cursor: pointer; } iframe { max-width: 100%; vertical-align: middle; } .hidden { display: none; } .slick-slider * { outline: none; } @media screen and (min-width: 769px), print { } @media screen and (max-width: 768px) { body { } img { max-width: 100%; height: auto; } p { font-size:1.6rem; line-height:2.2; } .copyright { font-size:1.2rem; } } h1,h2,h3,h4,h5 { font-weight:normal; line-height:1.4; } /* pc / sp ============================================================================================================ */ .sp, .sps { display: none !important; } @media screen and (min-width: 769px), print { .pc_break { position: relative; display: block; height: 0; overflow: hidden; } .pc_hidden { position: relative; overflow: hidden; display: block; height: 0; } } @media screen and (max-width: 768px) { .pc { display: none !important; } .sp { display: block !important; } img.sp, span.sp, br.sp, em.sp, strong.sp { display: inline !important; } td.sp, th.sp { display: table-cell !important; } .sp_break { position: relative; display: block; height: 0; overflow: hidden; } } @media screen and (max-width: 370px) { .sps { display: block !important; } img.sps, spsan.sps, br.sps, em.sps, strong.sps { display: inline !important; } .sps_non { display: none !important; } } /* transition ============================================================================================================ */ /*@media screen and (min-width: 769px) { body.init a[href], body.init a[href]::before, body.init a[href]::after, body.init button, body.init button::before, body.init button::after, body.init .basic_trs, body.init .basic_trs::before, body.init .basic_trs::after, body.init .basic_trs *, body.init .basic_trs *::before, body.init .basic_trs *::after { -webkit-transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border 0.2s ease-in-out, opacity 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border 0.2s ease-in-out, opacity 0.2s ease-in-out; } body.init a svg { -webkit-transition: fill 0.2s ease-in-out; -o-transition: fill 0.2s ease-in-out; transition: fill 0.2s ease-in-out; } } */ /* font family ============================================================================================================ */ .ff_min { font-family: YakuHanMP, "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", YuMincho, serif; font-weight: 200; } .ff_yugo { font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif; } /* color ============================================================================================================ */ .col-white { color: #fff; } .col-black { color: #2F2F2F; } .col-004E92 { color: #004E92; } .col-DB2129 { color: #DB2129; } /* font ============================================================================================================ */ .fwb { font-weight: bold; } .fwn { font-weight: normal; } /* bg-color ============================================================================================================ */ .bg-FFFFFF { background-color: #fff !important; } .bg-E5EDF4 { background-color: #E5EDF4 !important; } .bg-EDF6FD { background-color: #EDF6FD !important; } .bg-004E92 { background-color: #004E92 !important; } .bg-3D444A { background-color: #3D444A !important; } .bg-F5F5F5 { background-color: #F5F5F5 !important; } .bdrR20 { border-radius: 20px; overflow: hidden; } /* display ============================================================================================================ */ .db { display: block; } .dib { display: inline-block; } /* position ============================================================================================================ */ .pos-r { position: relative; } /* object-fit ============================================================================================================ */ img.of { object-fit: cover; } /* hover ============================================================================================================ */ @media screen and (min-width: 769px), print { a.hv_wh, button.hv_wh, a .hv_wh, .hv_wh a { position: relative; display: inline-block; vertical-align: middle; overflow: hidden; } a.hv_wh::after, button.hv_wh::after, a .hv_wh::after, .hv_wh a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255,255,255,0); z-index: 3; } body.init a.hv_wh::after, body.init button.hv_wh::after, body.init a .hv_wh::after, body.init .hv_wh a::after { -webkit-transition: background 0.2s; -o-transition: background 0.2s; transition: background 0.2s; } a[href].hv_wh:hover::after, button.hv_wh:hover::after, a[href]:hover .hv_wh::after, .hv_wh a[href]:hover::after { background-color: rgba(255,255,255,0.3); } a[href].hv_wh.a20:hover::after, button.hv_wh.a20:hover::after, a[href]:hover .hv_wh.a20::after, .hv_wh.a20 a[href]:hover::after { background-color: rgba(255,255,255,0.2); } a[href].hv_wh.a10:hover::after, button.hv_wh.a10:hover::after, a[href]:hover .hv_wh.a10::after, .hv_wh.a10 a[href]:hover::after { background-color: rgba(255,255,255,0.1); } body.init a[href] .hv_op { -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } a[href].hv_op:hover, a[href]:hover .hv_op, button.hv_op:hover, .hv_op a[href]:hover { opacity: 0.7; } a[href].hv_op.a20:hover, a[href]:hover .hv_op.a20, .hv_op.a20 a[href]:hover { opacity: 0.8; } a[href].hv_op.a10:hover, a[href]:hover .hv_op.a10, .hv_op.a10 a[href]:hover { opacity: 0.9; } a[href].hv_op.a50:hover, a[href]:hover .hv_op.a50, .hv_op.a50 a[href]:hover { opacity: 0.5; } } .hv_zoom { position: relative; display: block; overflow: hidden; } .hv_zoom > * { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat; background-position: 50%; -webkit-background-size: cover; background-size: cover; } @media screen and (min-width: 769px), print { body.init a[href].hv_zoom > *, body.init a[href] .hv_zoom > * { -webkit-transition: -webkit-transform 0.6s, opacity .3s; -o-transition: -o-transform 0.6s, opacity .3s; transition: transform 0.6s, opacity .3s; } a[href]:hover .hv_zoom.s > * { -webkit-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } a[href]:hover.hv_zoom > *, a[href]:hover .hv_zoom > * { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } } /* w ============================================================================================================ */ .w { position: relative; } .wm { position: relative; margin: 0 50px; } @media screen and (min-width: 1281px), print { .ww { max-width: 1360px; margin: 0 auto; } /* .mw { min-width: 1160px; }*/ } @media screen and (min-width: 769px), print { .w { max-width: 1180px; margin: 0 auto; } .wd780 { max-width: 780px; margin: 0 auto; } /* #container .mw { }*/ } @media screen and (max-width: 768px) { .wm { position: relative; margin: 0 ; } } .pd { padding: 0 max(20px, 5%); } @media screen and (max-width: 768px) { } @media screen and (min-width: 769px), print { .pd_pc { padding: 20px; } .pdL_pc { padding: 50px; } } /* spパディング ============================================================================================================ */ @media screen and (max-width: 768px) { .sp_pd { padding-left: 20px !important; padding-right: 20px !important; } .sp_pd10 { padding-left: 10px !important; padding-right: 10px !important; } .sp_full { margin-left: -20px !important; margin-right: -20px !important; } .sp_full_l { margin-left: -20px !important; } .sp_full_r { margin-right: -20px !important; } } @media screen and (max-width: 370px) { .sp_pd { padding-left: 10px !important; padding-right: 10px !important; } .sp_full { margin-left: -10px !important; margin-right: -10px !important; } .sp_full_l { padding-left: -10px !important; } .sp_full_r { padding-right: -10px !important; } } /* breadcrumbs ============================================================================================================ */ .breadcrumbs { font-size:1.0rem; display: flex; justify-content: flex-end; padding: 10px 30px; } /* header ============================================================================================================ */ #header { position: sticky; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; z-index: 1000; /*height: 50px;*/ padding: 10px; background-color: rgb(255 255 255 / 50%); backdrop-filter: blur(10px); } @media print { #header { position: absolute; } } @media screen and (max-width: 768px) { #header { position: fixed; } } #header img { max-width: 100%; } #header h1 { display: flex; align-items: center; column-gap: 10px; } #header { display: flex; justify-content: space-between; align-items: center; z-index: 1000; height: 50px; padding: 0; } #header h1 { justify-content: flex-start; padding: 10px; margin-right: auto; } #header h1 img { height: 36px; } #header .header_btn { display: flex; gap: 20px; justify-content: flex-end; align-items: center; } #header .nav_btn { position: relative; width: 50px; z-index: 9000; background: #94BAC6; } #header .nav_btn:after { content: 'MENU'; position: absolute; bottom: 15px; left: 0; display: block; width: 100%; font-size: 8px; text-align: center; color: #fff; font-weight: bold; } #header .nav_btn a { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 40px; margin: 0 25% 10px; } #header .nav_btn a .bar { display: block; width: 100%; height: 2px; border-radius: 2px; background: #fff; transition: .3s background ease-in-out; } #header .nav_btn a::before, #header .nav_btn a::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; border-radius: 2px; background: #fff; transition: .3s transform ease-in-out; } #header .nav_btn a::before { transform: translateY(calc(-8px - 3px));/*自分の高さ分も引く*/ } #header .nav_btn a::after { transform: translateY(8px); } #header .header_btn { display: flex; gap: 10px; justify-content: flex-end; align-items: center; } /* nav_btn open */ #header.open .nav_btn .bar { background-color: transparent; display:none; } #header.open .nav_btn a::before { transform: translateY(0) rotate(45deg); } #header.open .nav_btn a::after { transform: translateY(0) rotate(-45deg); } /* nav */ #header nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100dvh; padding-top: 80px; background-color: #E5EDF4; transform: scale(.8); pointer-events: none; opacity: 0; z-index: -1; } /* open */ #header.open nav { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); pointer-events: auto; opacity: 1; } #header nav .inner { padding: 0 20px; } #header nav .gnav { display: flex; flex-direction: column; gap: 10px; /*height: 100%;*/ overflow: auto; font-size: 16px; } #header nav .gnav > li { border-bottom: #707070 dashed 1px; padding-bottom:5px; } #header nav .gnav li a, #header nav .gnav li b { color: #363636; padding: 5px; } #header nav .gnav > li > a, #header nav .gnav > li > b { font-weight: bold; } #header nav .subnav { display: flex; flex-direction: column; gap: 5px; margin-left: 1em; } #header nav .subnav > li:before { content: '・'; display: inline-block; margin-right: .25em; } #header .header_sub_btn { } #header .header_sub_btn a { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20px; height: 50px; font-size: 1.5em; font-weight: bold; text-align: center; color: #fff; background: #013E5A; } @media screen and (max-width: 768px) { #header .inner { overflow-y: auto; max-height: 100%; } #header .nav_btn:after { content: 'MENU'; position: absolute; bottom: 5px; left: 0; display: block; width: 100%; font-size: 8px; text-align: center; color: #fff; font-weight: bold; } } @media screen and (min-width: 769px), print { #header, #header .nav_btn, #header .header_sub_btn a { height: 80px; } #header .nav_btn a { height: 60px; } #header h1 img { width: 300px; height: 50px; } #header .nav_btn { width: 80px; } } .list-head_btn { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .list-head_btn a { width: 100%; font-size: 1.8rem; padding: .5em; } /* footer ============================================================================================================ */ #footer { position: relative; font-size:1.6rem; color: #fff; background-color: #0A5065; padding:50px 20px 70px; } @media screen and (max-width: 768px) { #footer .block-footer { padding: 30px 0; text-align: center; } } @media screen and (min-width: 769px) { #footer .block-footer { padding: 30px 0; } } .footer-nav { font-size:1.4rem; } .footer-nav ul a { color: #fff; } .footer-nav ul .subnav { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; } .footer-nav ul .subnav li a:before { content: '-'; display: inline-block; margin-right: .25em; } .list-foot_btn { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .list-foot_btn a { width: 100%; } @media screen and (max-width: 768px) { #footer { } } @media screen and (min-width: 769px), print { .block-footer { display: flex; gap: 50px; flex-wrap: nowrap; justify-content: space-between; } .block-footer .footer-contact_us { width: 45%; } .block-footer .footer-nav { width: 45%; } .footer-nav ul { display: flex; flex-direction: column; gap: 20px; } } @media screen and (max-width: 768px) { .footer-contact_us p { margin: 10px 5px 2px; line-height: 1.4; } } .copyright { padding: 20px; } .copyright p { margin: 0; text-align: right; font-size: 12px; } /* ページトップ ------------------------------------------------------------- */ #pagetop { margin: 0; padding: 0; } #pagetop a { position: relative; display: block; width: 60px; height: 60px; background-color: #94BAC6; border: 1px solid #DBEFFF; } #pagetop a::before { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin-top: -5px; border-top: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #pagetop a::after { content: ""; position: absolute; top: 16px; left: 10px; width: 40px; border-top: 1px solid #fff; } @media print { #pagetop { display: none; } } @media screen and (min-width: 769px) { #pagetop { position: fixed; overflow: hidden; bottom: 20px; right: 0; width: 80px; height: 60px; z-index: 1000; } #pagetop a { -webkit-transform: translateX(80px); -ms-transform: translateX(80px); -o-transform: translateX(80px); transform: translateX(80px); -webkit-transition: -webkit-transform 0.3s ease-in-out, background .2s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out, background .2s ease-in-out; transition: transform 0.3s ease-in-out, background .2s ease-in-out; } #pagetop a:hover { background-color: #fff; } #pagetop a:hover::before, #pagetop a:hover::after { border-color: #d7b8aa; } #pagetop.abs { position: absolute; } #pagetop.show a { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media screen and (max-width: 768px) { #pagetop a { position: absolute; right: 0; bottom: 0; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } /* container ============================================================================================================ */ #container { position: relative; font-size: 1.6rem; line-height: 2; } @media screen and (max-width: 768px) { #container { font-size: 1.4rem; } } /* =================================================================================================================== パーツ =================================================================================================================== */ /* sp_column2 ============================================================================================================ */ .sp_column2 { } @media screen and (max-width: 768px) { .sp_column2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; } .sp_column2 > * { width: calc(50% - 5px); margin-top: 0; flex-grow: 1; } /*.sp_column2 > *:nth-child(2) ~ * { margin-top: 24px; }*/ } /* column2 ============================================================================================================ */ .column2 { } @media screen and (min-width: 769px), print { .column2 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .column2:after { /* 最終段が半端のときの対策 */ content: ''; display: block; order: 99; } .column2 > *, .column2:after { width: calc(45%); flex-grow: 1; } } @media screen and (max-width: 768px) { .column2:not(.sp_column2) > * + * { margin-top: 20px; } } /* column3 ============================================================================================================ */ .column3 { } @media screen and (min-width: 769px), print { .column3 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .column3:before, .column3:after { /* 最終段が半端のときの対策 */ content: ''; display: block; order: 99; } .column3 > *, .column3:before, .column3:after { width: 330px; width: calc(28%); flex-grow: 1; } } @media screen and (max-width: 768px) { .column3:not(.sp_column2) > * + * { margin-top: 20px; } } /* column4 ============================================================================================================ */ .column4 { } @media screen and (min-width: 769px), print { .column4 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; } .column4 .empty, .column4:before, .column4:after { /* 最終段が半端のときの対策 */ content: ''; display: block; order: 99; } .column4 > *, .column4 .empty, .column4:before, .column4:after { width: 250px; width: calc(23%); flex-grow: 1; } } @media screen and (max-width: 768px) { .column4:not(.sp_column2) > * + * { margin-top: 20px; } } /* para_section (paragraph section) ============================================================================================================ */ .para_section > * + * { margin-top: 1.5em; } /* box_btn ============================================================================================================ */ .wrap-btn { margin-top: 50px; } .btn-box { position: relative; display: inline-block; min-width: 240px; padding: 1em; color: #fff; text-align: center; font-weight: bold; background: #013E5A; } .btn-box.btn-2885A2 { background: #2885A2; } .btn-box:hover { color: #fff; filter: brightness(1.2) saturate(1.5); } .btn-box .tri_right { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-block; width: 0; height: 0; border: transparent solid 5px; border-left-color: #fff; } .btn-box.btn-white .tri_right { border-left-color: #004E92; } .btn-box .new_tab { display: inline-block; width: 1em; height: 1em; margin-left: 1em; background: url("../img/icon-newtab.svg") no-repeat center / contain; } /* ul / ol ============================================================================================================ */ .dot_li > li { position: relative; padding-left: 1em; } .dot_li > li::before { content: "・"; position: absolute; top: 0; left: 0; } .circle_li > li { position: relative; padding-left: 1.1em; } .circle_li > li::before { content: "●"; position: absolute; top: 0; left: 0; color: #005f8b; -webkit-transform-origin: 0; -moz-transform-origin: 0; -ms-transform-origin: 0; -o-transform-origin: 0; transform-origin: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .parentheses_li > li { position: relative; padding-left: 2.8em; } .parentheses_li > li > span:first-child { position: absolute; top: 0; left: 0; } .parentheses_li_h > li { position: relative; padding-left: 1.6em; } .parentheses_li_h > li > span:first-child { position: absolute; top: 0; left: 0; } .parentheses_li_hh > li { position: relative; padding-left: 2.2em; } .parentheses_li_hh > li > span:first-child { position: absolute; top: 0; left: 0; } .point_li > li { position: relative; padding-left: 1.2em; } .point_li > li > span:first-child { position: absolute; top: 0; left: 0; } .square_li > li { position: relative; padding-left: 0.8em; } .square_li > li::before { content: ""; position: absolute; left: 0; top: .8em; width: 5px; height: 5px; background-color: #14143c; } @media screen and (max-width: 768px) { .square_li > li::before { top: 0.6em; } } .num_li { margin-left: 1.8em; list-style: decimal; } .alphabet_li { margin-left: 1.8em; list-style: lower-latin; } .mt_li > li + li { margin-top: 0.8em; } @media screen and (max-width: 768px) { .sp_mt_li > li + li { margin-top: 0.8em; } } .inline_li > li { display: inline-block; margin-right: 0.3em; } .bar_li > li { position: relative; padding-left: 1.25em; } .bar_li > li::before { content: ""; position: absolute; left: 0.25rem; top: 1em; width: .5em; height: 2px; transform: translateY(-50%); background: #003B6E; } @media screen and (max-width: 768px) { .bar_li > li::before { } } /* .wp-pagenavi ============================================================================================================ */ .wp-pagenavi { position: relative; margin-top: 60px; text-align: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; flex-wrap: wrap; color: #1c1c1c; } .wp-pagenavi > * { position: relative; display: block; /*width: 40px;*/ min-width: 2.5em; height: 40px; margin: 3px; background-color: #fff; border: 1px solid #1c1c1c; color: #1c1c1c; line-height: 38px; text-decoration: none; } .wp-pagenavi a { color: #1c1c1c; text-decoration: none; } .wp-pagenavi .pages { order: 9999; border: none; width: 100%; } .wp-pagenavi .extend { width: auto; border-width: 0; } .wp-pagenavi .current { background-color: #0f1326; border-color: #0f1326; color: #fff; } .wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink { /* width: auto; padding: 0 20px;*/ width: 2.5em; text-align: center; } @media screen and (min-width: 769px), print { .wp-pagenavi a:hover { background-color: #0f1326; border-color: #0f1326; color: #fff; } } @media screen and (max-width: 768px) { .wp-pagenavi { margin-top: 40px; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .wp-pagenavi > * { width: 32px; height: 32px; margin: 2px; line-height: 30px; } .wp-pagenavi .extend { display: none; } .wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink { padding: 0 8px; } } /* font size ============================================================================================================ */ .fz20 { font-size: 2rem; line-height: 1.8; } @media screen and (max-width: 768px) { .fz20 { font-size: 1.5rem; } } /* box_block ============================================================================================================ */ .box_block { position: relative; padding: 30px; } @media screen and (min-width: 769px), print { .box_block.wide_padding { padding-left: 70px; padding-right: 70px; } } @media screen and (max-width: 768px) { .box_block { padding: 20px; } } /* border_block ============================================================================================================ */ .border_block { border: 1px solid #b1b1b1; } @media screen and (min-width: 769px), print { } @media screen and (max-width: 768px) { } /* ph_column ============================================================================================================ */ @media screen and (min-width: 769px), print { .ph_column::after{ content: ""; display: table; clear: both; } .ph_column .ph_right { float: right; } .ph_column .ph_left { float: left; } .ph_column .ph img { max-width: 100%; height: auto; } .ph_column .ph { width: 420px; } .ph_column .ph_right ~ * { margin-right: 460px; } .ph_column .ph_left ~ * { margin-left: 460px; } .ph_column .ph.ph300 { width: 300px; } .ph_column .ph_right.ph300 ~ * { margin-right: 340px; } .ph_column .ph_left.ph300 ~ * { margin-left: 340px; } .ph_column .ph.ph240 { width: 240px; } .ph_column .ph_right.ph240 ~ * { margin-right: 280px; } .ph_column .ph_left.ph240 ~ * { margin-left: 280px; } } @media screen and (max-width: 768px) { .ph_column .ph { margin-bottom: 12px; text-align: center; } } /* ph_column3 ============================================================================================================ */ .ph_column3 li { text-align: center; color: #001F33; font-size: 2.2rem; line-height: 1.7; } .ph_column3 li span { display: block; margin-top: 10px; } @media screen and (min-width: 769px), print { .ph_column3 { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; margin-left: -17px; } .ph_column3 li { width: 330px; margin-left: 17px; } .ph_column3 li:nth-child(3) ~ * { margin-top: 30px; } } @media screen and (max-width: 768px) { .ph_column3 { width: 270px; margin: 30px auto 0; } .ph_column3 li { margin-top: 20px; font-size: 1.4rem; } } /* details ============================================================================================================ */ details { } details summary { /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */ display: block; } details summary::-webkit-details-marker { /* Safariで表示されるデフォルトの三角形アイコンを消します */ display: none; } details .summary_inner{ cursor: pointer; display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 5px; padding: 0; font-weight: bold; } details .summary_inner .icon { display: block; position: relative; width: 24px; height: 24px; /* border: #707070 solid 1px; border-radius: 50%;*/ flex-shrink: 0; transition: transform 0.3s; } /* アイコンのバーのスタイル */ details .summary_inner .icon::before, details .summary_inner .icon::after { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 15px; height: 2px; background-color: #707070; transition: transform 0.3s; } details .summary_inner .icon::before { transform: translate(-50%,-50%) rotate(90deg); } details .summary_inner .icon::after { transform: translate(-50%,-50%); } /* 開いたときのスタイル */ details[open] .summary_inner .icon:before { transform: translate(-50%,-50%) rotate(180deg); } /* --------アコーディオンの中身のスタイル-------- */ .details_content { overflow: hidden; /*background-color: #f0f2ff;*/ /* details直下のタグにpaddingを設定すると挙動がおかしくなるので、ここには指定しない */ } details[open] .details_content { animation: details_fadeIn 0.3s ease; } .details_inner { padding: 10px; /*border-top: 1px dashed #707070;*/ } .details_inner > *:first-child { margin-top: 0; } @keyframes details_fadeIn { 0% { opacity: 0; transform: translateY(-10px) scaleY(0.8); transform-origin: top center; } 100% { opacity: 1; transform: translateY(0) scaleY(1); transform-origin: top center; } } /* =================================================================================================================== animations =================================================================================================================== */ /* https://coco-factory.jp/ugokuweb/move01/4-1-4/ */ /* ロゴローディング */ /* Loading背景画面設定　*/ #splash { /*fixedで全面に固定*/ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: #E5EDF4; text-align: center; color: #fff; } /* Loading画像中央配置　*/ #splash_logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Loading アイコンの大きさ設定　*/ #splash_logo img { width: 250px; animation: floating-y .5s ease-in-out infinite alternate-reverse; } @keyframes floating-y { 0% { transform: translateY(-10%); } 100% { transform: translateY(10%); } } /* fadeUpをするアイコンの動き */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /* https://coco-factory.jp/ugokuweb/move02/4-1/ */ /* 下からふわ */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } .fadeUpTrigger { opacity: 0; } @media screen and (max-width: 768px) { } @media screen and (min-width: 769px) { .column3 > *:nth-child(3n+2){ animation-delay: .3s; } .column3 > *:nth-child(3n+3){ animation-delay: .6s; } } /* https://coco-factory.jp/ugokuweb/move02/4-9/ */ /* 右からシャ */ /*========= レイアウトのためのCSS ===============*/ .bgextend{ /* width: 220px; padding: 20px; margin:0 20px 20px 0;*/ box-sizing:border-box; } /*========= 背景色の動きのCSS ===============*/ /*背景色が伸びて出現 共通*/ .bgextend { animation-name: bgextendAnimeBase; animation-duration: 0.5s; animation-fill-mode: forwards; position: relative; overflow: hidden; /*　はみ出た色要素を隠す　*/ opacity: 0; } @keyframes bgextendAnimeBase { from { opacity: 0; } to { opacity: 1; } } /*中の要素*/ .bgextend .bgappear{ animation-name:bgextendAnimeSecond; animation-duration:0.5s; animation-delay: 0.2s; animation-fill-mode:forwards; opacity: 0; } @keyframes bgextendAnimeSecond{ 0% { opacity: 0; } 100% { opacity: 1; } } /*--------- 右から --------*/ .bgRLextend::before { animation-name: bgRLextendAnime; animation-duration: 0.5s; animation-fill-mode: forwards; content: ""; position: absolute; width: 100%; height: 100%; background-color: #666; /*伸びる背景色の設定*/ } @keyframes bgRLextendAnime { 0% { transform-origin: right; transform: scaleX(0); } 50% { transform-origin: right; transform: scaleX(1); } 50.001% { transform-origin: left; } 100% { transform-origin: left; transform: scaleX(0); } } .bgRLextendTrigger { opacity: 0; } .grecaptcha-badge { visibility: hidden; } /* タブ切り替え --------*/ .tab_wrap { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 10px; padding-top:20px; } .tab_wrap .tab_check { display: none; } .tab_wrap .tab_labelwrap { width: 40%; margin: 0; padding: 0; border: 0; text-align: center; font-size: 1.5em; line-height: 1.3; font-weight: bold; background: #fff; order: 1; } .tab_wrap .tab_check:checked + .tab_labelwrap { background: #E1D0B0; } .tab_wrap .tab_labelwrap .tab_label { display: block; width: 100%; height: 100%; padding: .5em; font-size:0.8em; } .tab_wrap .tab_content { width: 100%; padding-top: 20px; border-top: #E1D0B0 solid 1px; order: 99; display: none; } .tab_wrap .tab_check:checked + .tab_labelwrap +.tab_content { display: block; } @media screen and (max-width: 768px) { .tab_wrap .tab_content { padding-top:0; } .tab_wrap .tab_labelwrap { width: 45%; font-size: 3.5vw; } .flex-menu { margin:0 -20px; } .tab_wrap .tab_labelwrap .tab_label { display: block; width: 100%; height: 100%; padding: .5em; font-size:1em; } } /* =================================================================================================================== 画面割 =================================================================================================================== */ #wrap_content #fix_img img { max-width: 100%; } @media screen and (max-width: 768px) { body:not(.home) #wrap_content #fix_img { display: none; } body:not(.home) #wrap_content #main_content { margin-top: 50px; } } @media screen and (min-width: 769px) { #wrap_content { display: flex; gap: 0; justify-content: space-between; flex-wrap: nowrap; position: relative; } #wrap_content #fix_img { max-width: 40%; height: 100dvh; aspect-ratio: 720 / 1020; position: sticky; top: 0; left: 0; } #wrap_content #fix_img img { width: 100%; height: 100%; object-fit: cover; } #wrap_content #main_content { width: 50%; flex-grow: 1; } } /* =================================================================================================================== トップページ =================================================================================================================== */ .wd_max { width: 100%; } .mv img, .index_section img { max-width: 100%; } @media screen and (max-width: 768px) { .index_section { padding: 50px 0; } } @media screen and (min-width: 769px) { .index_section { padding: 80px 0; } } .hd-index { display: flex; align-items: center; font-size: 20px; font-weight: bold; gap: 0 .5em; margin-bottom: 1em; } @media screen and (max-width: 768px) { .hd-index img { height: 80px; } } /* mv ----------------------------*/ #mv { position: relative; background-image: url("../img/index/mv-txt-takumi.svg"), url("../img/index/mv-bg.svg"); background-position: right top, left bottom; background-repeat: no-repeat; background-size: auto 100%, cover; } #mv figure { position: absolute; top: 50%; right: 10%; width: 70%; transform: translateY(-50%); } #mv figure img { width: 100%; } @media screen and (max-width: 768px) { #mv { height: 50vh; } } @media screen and (min-width: 769px) { #mv { height: calc(100dvh - 50px); } } /* about ----------------------------*/ #about.index_section { position: relative; } #about.index_section:before { content: ''; position: absolute; top: 5%; left: 0; display: block; width: 100%; height: 90%; background: #E9EFEF; clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); z-index: -1; } .block-index_about h3 { position: relative; font-size: 18px; text-align: center; font-weight: bold; transform: translateY(-50%); } .block-index_about h3 .txt { display: inline-block; padding: 5px 10px; background: #fff; letter-spacing: .15em; text-indent: .15em; } .block-index_about h3 .highlight { color: #2885A2; font-size: 1.2em; } .list-index_about { } .list-index_about li { border-bottom: #707070 dashed 1px; } .list-index_about li a { position: relative; display: flex; flex-wrap: nowrap; gap: .5em; align-items: center; padding: 5px; font-size: 18px; font-weight: bold; color: #2F2F2F; } .list-index_about li a:before { content: ''; display: block; width: 1em; height: 1em; margin-left: auto; background: url("../img/icon-arrow_r.svg") no-repeat center / contain; order: 99; } @media screen and (min-width: 769px) { #about.index_section { padding-bottom: 80px; } } /* human ----------------------------*/ #human.index_section { position: relative; padding-top: 0; } #human.index_section:before { content: ''; position: absolute; bottom: -100px; left: 0; display: block; width: 100%; height: 70%; background: url("../img/index/bg-human.svg") no-repeat left bottom / cover; } #human.index_section .hd-index { flex-direction: column; justify-content: center; } @media screen and (min-width: 769px) { #human.index_section .column3 > *:nth-child(2) { margin-top: calc(30px * 1); } #human.index_section .column3 > *:nth-child(3) { margin-top: calc(30px * 2); } } /* news ----------------------------*/ #news.index_section { position: relative; padding-top: 40px; color: #fff; z-index: 2; } #news.index_section:before { content: ''; position: absolute; top: 1px; left: 0; display: block; width: 100%; height: 100%; background: #2F2F2F; clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0 100%); z-index: -1; } #news.index_section a { color: #fff; } .list-news { } .list-news li { border-bottom: #8B8B8B dashed 1px; } @media screen and (max-width: 768px) { .list-news li dl { display: grid; grid-template-columns: max-content 1fr; align-items: baseline; gap: 5px 1em; } } @media screen and (min-width: 769px) { .list-news li dl { display: grid; /*grid-template-columns: max-content max-content 1fr;*/ grid-template-columns: max-content 1fr; align-items: baseline; gap: 1em; } } /* ContactForm7カスタマイズ----------------------------*/ table.CF7_table{ width:100%; margin:0 auto; border: 3px solid #e5e5e5; } table.CF7_table tr{ border-top: 1px solid #e5e5e5; } table.CF7_table th, table.CF7_table td { padding-left:15px; } .single .entry-content table.CF7_table, .page .entry-content table.CF7_table{ display:table; } /*入力欄*/ .CF7_table input, .CF7_table textarea { border: 1px solid #d8d8d8; padding:5px; opacity:0.5; } .CF7_table ::placeholder { color:#797979; } /*「必須」文字*/ .CF7_req{ font-size:.9em; padding: 5px; background: #013E5A;/*オレンジ*/ color: #fff; border-radius: 3px; margin-right:1em; } /*「任意」文字*/ .CF7_unreq{ font-size:.9em; padding: 5px; background: #bdbdbd;/*グレー*/ color: #fff; border-radius: 3px; margin-right:1em; } /* タイトル列 */ @media screen and (min-width: 768px){ .CF7_table th{ width:30%;/*横幅*/ background-color:#ebedf5;/*ブルーグレー*/ } } /* レスポンシブ */ @media screen and (max-width: 768px){ table.CF7_table{ width:95%; } .CF7_table tr, .CF7_table td, .CF7_table th{ display: block; width: 100%; line-height:2.5em; } .CF7_table th{ background-color:#ebedf5; } } /* 「送信する」ボタン */ .wpcf7 input.wpcf7-submit { background-color:#f79034;/* オレンジ*/ border:0; color:#fff; font-size:1.2em; font-weight:bold; margin:0 auto; width:60%; padding:12px 0; } .CF7_btn{ text-align:center; margin-top:20px; } .wpcf7-spinner { width:0!important; margin:0!important; } dl.summary { border-bottom:1px dotted #ccc; padding:13px 5px; } dl.summary dt { font-weight:bold; color:#013E5A;} dl.summary dd {} .list { list-style-type:circle; margin-left:30px; }