-.c-media {
- margin: 31px auto;
- border: 1px solid $color-light-gray;
-}
-
-.c-media__actions {
- display: flex;
- padding: 30px;
- border-bottom: 1px solid $color-light-gray;
-}
-
-.c-media__btn {
- width: 100%;
- text-align: center;
-
- &:first-child {
- padding-right: 35px;
- }
-
- &:nth-child(2) {
- padding: 0 35px;
- border-left: 1px solid #ccc;
- border-right: 1px solid #ccc;
- }
-
- &:last-child {
- padding-left: 35px;
- }
-
- .l-button {}
-
- ul {
- @include font-size(16px);
- line-height: 19px;
- text-align: center;
- letter-spacing: 0.01em;
- padding: 0;
- list-style: none;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: $bold;
- margin: 0;
-
- li {
- margin-right: 6px;
- &:not(:last-child):after { content: "|"; margin-left: 6px; }
- }
- }
-}
-
-.c-media__player {
- padding: 25px 30px;
-
- h2 {
- font-weight: $bold;
- @include font-size(16px);
- line-height: 19px;
- text-align: center;
- letter-spacing: 0.01em;
- color: $color-gray;
- margin: 0;
- }
-}
-
-.c-media__popup {
- position: fixed;
- z-index: 10;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- align-items: center;
- justify-content: center;
- background-color: rgba($color-white, 0.75);
- display: none;
-
- &.is-open {
- display: flex;
- }
-}
-
-.c-media__popup__box {
- background-color: white;
- border: 1px solid #CCCCCC;
- padding: 40px;
- min-width: 640px;
- position: relative;
-}
-
-.c-media__popup__box__lead {
- padding-bottom: 30px;
- border-bottom: 2px solid #666666;
-
- h2 {
- font-weight: bold;
- font-size: 24px;
- line-height: 125%;
- letter-spacing: -0.01em;
- color: #666666;
- margin-top: 0;
- }
-
- p {
- font-weight: normal;
- font-size: 16px;
- line-height: 19px;
- letter-spacing: 0.01em;
- color: #666666;
- margin-top: 0;
- }
-}
-
-.c-media__popup__box__item {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- padding: 20px 0;
-
- &:not(:last-child) {
- border-bottom: 1px solid #666666;
- }
-
- h3 {
- font-weight: bold;
- font-size: 16px;
- line-height: 19px;
- letter-spacing: 0.01em;
- color: #666666;
- margin-top: 0;
- }
-
- p {
- font-weight: normal;
- font-size: 16px;
- line-height: 19px;
- letter-spacing: 0.01em;
- color: #666666;
- margin-top: 10px;
- max-width: 390px;
- }
-
- ul {
- list-style: none;
- padding: 0;
- margin: 10px 0 0;
-
- li {
- line-height: 1;
-
- &:not(:last-child) {
- margin-bottom: 15px;
- }
-
- a {
- font-weight: normal;
- font-size: 14px;
- line-height: 16px;
- letter-spacing: 0.01em;
- text-decoration: underline;
- color: #666666;
-
- &:hover {
- text-decoration: none;
- }
- }
- }
- }
-
- .l-button {
- padding: 6px 10px;
- min-width: 120px;
- display: block;
- text-align: center;
- }
-}
-
-.c-media__popup__close {
- position: absolute;
- padding: 0;
- border: 0;
- outline: 0;
- cursor: pointer;
- font-size: 0;
- background-color: transparent;
- top: 35px;
- right: 40px;
- transition: all $ease-dynamic 350ms;
- opacity: 0.75;
-
- &:hover {
- opacity: 1;
- }
-}