@charset "UTF-8"; /* CSS Document */ //ブレイクポイントを指定------ここから $xl: 1399px; $lg: 1199px; $md: 991px; $sm: 767px; $xs: 575px; @mixin xl { @media screen and (max-width: ($xl)) { @content; } } @mixin lg { @media screen and (max-width: ($lg)) { @content; } } @mixin md { @media screen and (max-width: ($md)) { @content; } } @mixin sm { @media screen and (max-width: ($sm)) { @content; } } @mixin xs { @media screen and (max-width: ($xs)) { @content; } } //ブレイクポイントを指定------ここまで //メインカラー指定 $color-pink: #ed848b; $color-blue: #007ac5; $color-yellow: #fff2cb; $color-orange: #f8ad4e; //共通---------------------------------- .frame { background-color: #FFFFFF; border: solid 1px $color-pink; margin: 1.5rem 2rem 3rem 2rem; display: flex; justify-content: center; align-items: center; } .inner { margin-top: 4rem; width: 87%; @include lg { width: 90%; } @include sm { margin-top: 2rem; } } .subheading { color: #ed848b; font-size: 23px; font-size: 2.3rem; font-weight: 500; padding-left: 1rem; border-left: 5px solid #ffe6a1; margin-bottom: 1.5rem; @include xs { font-size: 17px; font-size: 1.7rem; margin-bottom: 0.5rem; } } //データのリンク一覧---------------------------------- .pdf-link { color: #333333; border-bottom: solid 1px; line-height: 3.5rem; @include sm { line-height: 2rem; } &:hover { color: $color-pink; } &::before { font-family: "Font Awesome 5 Free"; content: "\f1c1"; font-weight: 600; padding-right: 3px; color: #bf272d; } } .word-link { color: #333333; border-bottom: solid 1px; line-height: 3.5rem; @include sm { line-height: 2rem; } &:hover { color: $color-pink; } &::before { font-family: "Font Awesome 5 Free"; content: "\f1c2"; font-weight: 600; padding-right: 3px; color: #007ac5; } } .excel-link { color: #333333; border-bottom: solid 1px; line-height: 3.5rem; @include sm { line-height: 2rem; } &:hover { color: $color-pink; } &::before { font-family: "Font Awesome 5 Free"; content: "\f1c3"; font-weight: 600; padding-right: 3px; color: #13891f; } } //---------------------------------- #download { font-size: 15px; font-size: 1.5rem; @include sm { font-size: 14px; font-size: 1.4rem; @include xs { font-size: 13px; font-size: 1.3rem; } } ul { margin-bottom: 5rem; margin-left: 2.5em; @include md { margin-bottom: 3rem; } @include sm { margin-left: 0em; margin-bottom: 2.5rem; } } .list-yoko { li { display: inline-block; margin-right: 1.5em; @include xs { margin-right: 0.9em; } } &:last-child ul { margin-bottom: 0rem; } } }