/* top =============================================== */ /* mainvisual -------------------------------- */ #mainvisual h1 { position:relative; width:100%; height:0; padding-top:calc(800% / 2000 * 100 * 0.8); } #mainvisual h1 span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/top/mainvisual.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { #mainvisual h1 { padding-top:calc(800% / 750 * 100); } #mainvisual h1 span { background-image:url(../img/top/mainvisual_smp.jpg?); } } /* top-news -------------------------------- */ #top-news { margin-bottom:2.0em; padding:1.2em; box-sizing:border-box; border:var(--cl-lightgray2) 0.7em solid; border-radius:1.0em; } #top-news .ttl { margin-bottom:0.8em; font-size:160%; } #top-news-list ul { margin-bottom:15px; } #top-news-list ul li { margin-bottom:0.7em; border-bottom:var(--cl-lightgray) 1px solid; } #top-news-list ul li dl { padding:0 1.0em 0.7em 0.2em; line-height:140%; } #top-news-list ul li dl dt { float:left; color:#9DA5B7; font-weight:700; } #top-news-list ul li dl dd { position:relative; padding-left:9.0em; } #top-news-list ul li dl dd .new { position:absolute; display:block; left:7.25em; top:0.4em; padding:0.2em 0.4em; background-color:#FF3C1E; font-weight:700; letter-spacing:0.1em; color:#fff; font-size:75%; line-height:100%; } #top-news-list ul li dl dd a { color:#333; /* hover */ transition:opacity 0.2s ease-out; } @media (hover: hover) { #top-news-list ul li dl dd a:hover { opacity:0.5; text-decoration:none; } } #top-news .btn, #top-news .btn p { padding:0; } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { #top-news { border:var(--cl-lightgray2) 0.5em solid; } #top-news .ttl { font-size:140%; } #top-news-list ul li dl { line-height:160%; } #top-news-list ul li dl dt { width:5.25em; } #top-news-list ul li dl dd { position:relative; padding-left:0; } #top-news-list ul li dl dd .new { position:static; left:0; top:0; display:inline-block; vertical-align:middle; margin:0 0.8em 0.2em 0; } } /* top-message -------------------------------- */ #top-message { margin-bottom:2.0em; } #top-msg-box { display:flex; margin-bottom:2.0em; } #top-msg-box-l { flex:1; margin-right:1.5em; } #top-msg-pic { width:150px; padding-top:0.4em; } #top-msg-pic p { position:relative; width:100%; height:0; padding-top:125%; } #top-msg-pic p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/top/message_pic2.jpg) center center no-repeat; background-size:cover; text-indent:-9999px; } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { #top-msg-box-l .btn { text-align:center; } } @media all and (max-width: 600px) { #top-msg-box { flex-direction:column-reverse; } #top-msg-pic { width:40%; margin:0 30% 1.0em 30%; } #top-msg-box-l { flex:none; margin-right:0; } } /* top-link -------------------------------- */ #top-link { margin-bottom:2.0em; } #top-link ul { display:flex; flex-wrap:wrap; background-color:var(--cl-lightgray2); padding:1.0em; border-radius:2.0em; } #top-link ul li:nth-child(1) { width:100%; margin:0 0 1.0em 0; } #top-link ul li:nth-child(2), #top-link ul li:nth-child(3), #top-link ul li:nth-child(4) { width:calc(33.3% - 0.66em); height:11.0em; } #top-link ul li:nth-child(2) { margin:0 1.0em 1.0em 0; } #top-link ul li:nth-child(3) { margin:0 1.0em 1.0em 0; } #top-link ul li:nth-child(4) { margin:0 0 1.0em 0; } #top-link ul li:nth-child(5), #top-link ul li:nth-child(6) { width:calc(50% - 0.5em); height:6.0em; } #top-link ul li:nth-child(5) { margin:0 1.0em 0 0; } #top-link ul li:nth-child(6) { margin:0; } #top-link ul li a { display:flex; flex-flow:column; width:100%; height:100%; padding:1.0em; box-sizing:border-box; background-color:#fff; border-radius:1.5em; box-shadow:0px 2px 6px rgba(0,0,0,0.1); text-decoration:none; color:#3B3F4A; background-repeat:no-repeat; } #top-link ul li:nth-child(1) a { padding-right:12.0em; background-image:url(../img/top/icon_link1.png); background-position:right 1.0em center; background-size:auto 7.0em; } #top-link ul li:nth-child(2) a { background-image:url(../img/top/icon_link2.png); background-position:right 1.0em bottom 0.5em; background-size:auto 8.0em; } #top-link ul li:nth-child(3) a { background-image:url(../img/top/icon_link3.png); background-position:right 1.0em bottom 1.0em; background-size:auto 8.0em; } #top-link ul li:nth-child(4) a { background-image:url(../img/top/icon_link4.png); background-position:right 1.0em bottom 0.5em; background-size:auto 8.0em; } #top-link ul li:nth-child(5) a { background-image:url(../img/top/icon_link5.png); background-position:right 1.0em bottom 1.0em; background-size:auto 4.0em; } #top-link ul li:nth-child(6) a { background-image:url(../img/top/icon_link6.png); background-position:right 1.0em bottom 0.5em; background-size:auto 4.0em; } #top-link ul li .name { font-weight:700; font-size:130%; line-height:140%; } #top-link ul li:nth-child(1) .name { margin-bottom:0.5em; font-size:150%; } #top-link ul li:nth-child(1) .txt { line-height:130%; } /* ---- Media Queries ---- */ @media all and (max-width: 1349px) { #top-link ul li:nth-child(5), #top-link ul li:nth-child(6) { height:8.0em; } #top-link ul li:nth-child(1) a { background-position:right 1.0em bottom 1.0em; background-size:auto 6.0em; } #top-link ul li:nth-child(2) a, #top-link ul li:nth-child(3) a, #top-link ul li:nth-child(4) a { background-size:auto 6.0em; } #top-link ul li:nth-child(5) a, #top-link ul li:nth-child(6) a { background-size:auto 4.0em; } } @media all and (max-width: 979px) { #top-link ul li { width:100%!important; height:auto!important; margin:0 0 1.0em 0!important; } #top-link ul li:last-child { margin:0!important; } #top-link ul li:nth-child(1) a { padding-right:1.0em; background-size:auto 4.0em; } #top-link ul li:nth-child(1) .name { font-size:130%; } #top-link ul li:nth-child(2) a { padding-right:8.0em; background-position:right 1.0em center; background-size:auto 4.5em; } #top-link ul li:nth-child(3) a { padding-right:8.0em; background-position:right 1.0em center; background-size:auto 3.5em; } #top-link ul li:nth-child(4) a { padding-right:8.0em; background-position:right 1.0em center; background-size:auto 3.5em; } #top-link ul li:nth-child(5) a { padding-right:8.0em; background-position:right 0.3em center; background-size:auto 2.5em; } #top-link ul li:nth-child(6) a { padding-right:6.0em; background-position:right 0.5em center; background-size:auto 2.5em; } } /* top-inquiry -------------------------------- */ #top-inquiry { margin-bottom:2.0em; padding:1.2em; box-sizing:border-box; border:var(--cl-lightgray2) 0.7em solid; border-radius:1.0em; background-image:url(../img/top/icon_link8.png); background-position:right 1.0em center; background-repeat:no-repeat; background-size:auto 8.0em; } #top-inquiry .ttl { margin-bottom:0.8em; font-size:160%; } #top-inquiry-add { display:inline-block; padding:0.7em 1.7em; border:#999 2px dotted; border-radius:0.5em; font-style:normal; font-weight:700; } /* ---- Media Queries ---- */ @media all and (max-width: 979px) { #top-inquiry { border:var(--cl-lightgray2) 0.5em solid; background-position:right 1.0em bottom 1.0em; background-size:auto 4.0em; } #top-inquiry .ttl { font-size:140%; } #top-inquiry-add { max-width:100%; } } /*eof*/