that wraps the table */ position: relative; z-index: 1; /* container inner z-index's because s can't do it */ } .fc .fc-daygrid-day.fc-day-today { background-color: rgba(255, 220, 40, 0.15);/* 閲覧日背景カラー */ background-color: #FC9; } .fc .fc-daygrid-day-frame { position: relative; min-height: 100%; /* seems to work better than `height` because sets height after rows/cells naturally do it */ } .fc { /* cell top */ } .fc .fc-daygrid-day-top { display: flex; flex-direction: row-reverse; } .fc .fc-day-other .fc-daygrid-day-top { opacity: 0.3; } .fc { /* day number (within cell top) */ } .fc .fc-daygrid-day-number { position: relative; z-index: 4; padding: 4px; } .fc { /* event container */ } .fc .fc-daygrid-day-events { margin-top: 1px; /* needs to be margin, not padding, so that available cell height can be computed */ } .fc { /* positioning for balanced vs natural */ } .fc .fc-daygrid-body-balanced .fc-daygrid-day-events { position: absolute; left: 0; right: 0; } .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events { position: relative; /* for containing abs positioned event harnesses */ min-height: 2em; /* in addition to being a min-height during natural height, equalizes the heights a little bit */ } .fc .fc-daygrid-body-natural { /* can coexist with -unbalanced */ } .fc .fc-daygrid-body-natural .fc-daygrid-day-events { margin-bottom: 1em; } .fc { /* event harness */ } .fc .fc-daygrid-event-harness { position: relative; } .fc .fc-daygrid-event-harness-abs { position: absolute; top: 0; /* fallback coords for when cannot yet be computed */ left: 0; /* */ right: 0; /* */ } .fc .fc-daygrid-bg-harness { position: absolute; top: 0; bottom: 0; } .fc { /* bg content */ } .fc .fc-daygrid-day-bg .fc-non-business { z-index: 1 } .fc .fc-daygrid-day-bg .fc-bg-event { z-index: 2 } .fc .fc-daygrid-day-bg .fc-highlight { z-index: 3 } .fc { /* events */ } .fc .fc-daygrid-event { z-index: 6; margin-top: 1px; } .fc .fc-daygrid-event.fc-event-mirror { z-index: 7; } .fc { /* cell bottom (within day-events) */ } .fc .fc-daygrid-day-bottom { font-size: .85em; padding: 2px 3px 0 } .fc .fc-daygrid-day-bottom:before { content: ""; clear: both; display: table; } .fc .fc-daygrid-more-link { position: relative; z-index: 4; cursor: pointer; } .fc { /* week number (within frame) */ } .fc .fc-daygrid-week-number { position: absolute; z-index: 5; top: 0; padding: 2px; min-width: 1.5em; text-align: center; background-color: rgba(208, 208, 208, 0.3); background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3)); color: #808080; color: var(--fc-neutral-text-color, #808080); } .fc { /* popover */ } .fc .fc-more-popover .fc-popover-body { min-width: 220px; padding: 10px; } .fc-direction-ltr .fc-daygrid-event.fc-event-start, .fc-direction-rtl .fc-daygrid-event.fc-event-end { margin-left: 2px; } .fc-direction-ltr .fc-daygrid-event.fc-event-end, .fc-direction-rtl .fc-daygrid-event.fc-event-start { margin-right: 2px; } .fc-direction-ltr .fc-daygrid-week-number { left: 0; border-radius: 0 0 3px 0; } .fc-direction-rtl .fc-daygrid-week-number { right: 0; border-radius: 0 0 0 3px; } .fc-liquid-hack .fc-daygrid-day-frame { position: static; /* will cause inner absolute stuff to expand to */ } .fc-daygrid-event { /* make root-level, because will be dragged-and-dropped outside of a component root */ position: relative; /* for z-indexes assigned later */ white-space: normal; border-radius: 3px; /* dot event needs this to when selected */ font-size: .75em; font-size: var(--fc-small-font-size, .75em);/* イベントフォントサイズ */ } /* --- the rectangle ("block") style of event --- */ .fc-daygrid-block-event .fc-event-time { font-weight: bold; } .fc-daygrid-block-event .fc-event-time, .fc-daygrid-block-event .fc-event-title { padding: 1px; } /* --- イベント縦並び指定 --- */ .fc-daygrid-dot-event { display: block; align-items: center; padding: 2px 0 } .fc-daygrid-dot-event .fc-event-title { flex-grow: 1; flex-shrink: 1; min-width: 0; /* important for allowing to shrink all the way */ overflow: hidden; font-weight: bold; } .fc-daygrid-dot-event:hover, .fc-daygrid-dot-event.fc-event-mirror { background: rgba(0, 0, 0, 0.1); } .fc-daygrid-dot-event.fc-event-selected:before { /* expand hit area */ top: -10px; bottom: -10px; } .fc-daygrid-event-dot { /* the actual dot */ margin: 0 4px; box-sizing: content-box; width: 0; height: 0; border: 4px solid #3788d8; border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid var(--fc-event-border-color, #3788d8); border-radius: 4px; border-radius: calc(var(--fc-daygrid-event-dot-width, 8px) / 2); } /* --- spacing between time and title --- */ .fc-direction-ltr .fc-daygrid-event .fc-event-time { margin-right: 3px; } .fc-direction-rtl .fc-daygrid-event .fc-event-time { margin-left: 3px; } /* A VERTICAL event */ .fc-v-event { /* allowed to be top-level */ display: block; border: 1px solid #3788d8; border: 1px solid var(--fc-event-border-color, #3788d8); background-color: #3788d8; background-color: var(--fc-event-bg-color, #3788d8) } .fc-v-event .fc-event-main { color: #fff; color: var(--fc-event-text-color, #fff); height: 100%; } .fc-event-title { /* 折り返し */ white-space: normal; } .fc-v-event .fc-event-time { flex-grow: 0; flex-shrink: 0; max-height: 100%; overflow: hidden; } .fc-v-event .fc-event-title-container { /* a container for the sticky cushion */ flex-grow: 1; flex-shrink: 1; min-height: 0; /* important for allowing to shrink all the way */ } .fc-v-event .fc-event-title { /* will have fc-sticky on it */ top: 0; bottom: 0; max-height: 100%; /* clip overflow */ overflow: hidden; } .fc-v-event:not(.fc-event-start) { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .fc-v-event:not(.fc-event-end) { border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .fc-v-event.fc-event-selected:before { /* expand hit area */ left: -10px; right: -10px; } .fc-v-event { /* resizer (mouse AND touch) */ } .fc-v-event .fc-event-resizer-start { cursor: n-resize; } .fc-v-event .fc-event-resizer-end { cursor: s-resize; } .fc-v-event { /* resizer for MOUSE */ } .fc-v-event:not(.fc-event-selected) .fc-event-resizer { height: 8px; height: var(--fc-event-resizer-thickness, 8px); left: 0; right: 0; } .fc-v-event:not(.fc-event-selected) .fc-event-resizer-start { top: -4px; top: calc(var(--fc-event-resizer-thickness, 8px) / -2); } .fc-v-event:not(.fc-event-selected) .fc-event-resizer-end { bottom: -4px; bottom: calc(var(--fc-event-resizer-thickness, 8px) / -2); } .fc-v-event { /* resizer for TOUCH (when event is "selected") */ } .fc-v-event.fc-event-selected .fc-event-resizer { left: 50%; margin-left: -4px; margin-left: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2); } .fc-v-event.fc-event-selected .fc-event-resizer-start { top: -4px; top: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2); } .fc-v-event.fc-event-selected .fc-event-resizer-end { bottom: -4px; bottom: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2); } .fc .fc-timegrid .fc-daygrid-body { /* the all-day daygrid within the timegrid view */ z-index: 2; /* put above the timegrid-body so that more-popover is above everything. TODO: better solution */ } .fc .fc-timegrid-divider { padding: 0 0 2px; /* browsers get confused when you set height. use padding instead */ } .fc .fc-timegrid-body { position: relative; z-index: 1; /* scope the z-indexes of slots and cols */ min-height: 100%; /* fill height always, even when slat table doesn't grow */ } .fc .fc-timegrid-axis-chunk { /* for advanced ScrollGrid */ position: relative /* offset parent for now-indicator-container */ } .fc .fc-timegrid-axis-chunk > table { position: relative; z-index: 1; /* above the now-indicator-container */ } .fc .fc-timegrid-slots { position: relative; z-index: 1; } .fc .fc-timegrid-slot { /* a */ height: 1.5em; border-bottom: 0 /* each cell owns its top border */ } .fc .fc-timegrid-slot:empty:before { content: '\00a0'; /* make sure there's at least an empty space to create height for height syncing */ } .fc .fc-timegrid-slot-minor { border-top-style: dotted; } .fc .fc-timegrid-slot-label-cushion { display: inline-block; white-space: nowrap; } .fc .fc-timegrid-slot-label { vertical-align: middle; /* vertical align the slots */ } .fc { /* slots AND axis cells (top-left corner of view including the "all-day" text) */ } .fc .fc-timegrid-axis-cushion, .fc .fc-timegrid-slot-label-cushion { padding: 0 4px; } .fc { /* axis cells (top-left corner of view including the "all-day" text) */ /* vertical align is more complicated, uses flexbox */ } .fc .fc-timegrid-axis-frame-liquid { height: 100%; /* will need liquid-hack in FF */ } .fc .fc-timegrid-axis-frame { overflow: hidden; display: flex; align-items: center; /* vertical align */ justify-content: flex-end; /* horizontal align. matches text-align below */ } .fc .fc-timegrid-axis-cushion { max-width: 60px; /* limits the width of the "all-day" text */ flex-shrink: 0; /* allows text to expand how it normally would, regardless of constrained width */ } .fc-direction-ltr .fc-timegrid-slot-label-frame { text-align: right; } .fc-direction-rtl .fc-timegrid-slot-label-frame { text-align: left; } .fc-liquid-hack .fc-timegrid-axis-frame-liquid { height: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .fc .fc-timegrid-col.fc-day-today { background-color: rgba(255, 220, 40, 0.15); background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15)); } .fc .fc-timegrid-col-frame { min-height: 100%; /* liquid-hack is below */ position: relative; } .fc-media-screen.fc-liquid-hack .fc-timegrid-col-frame { height: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .fc-media-screen .fc-timegrid-cols { position: absolute; /* no z-index. children will decide and go above slots */ top: 0; left: 0; right: 0; bottom: 0 } .fc-media-screen .fc-timegrid-cols > table { height: 100%; } .fc-media-screen .fc-timegrid-col-bg, .fc-media-screen .fc-timegrid-col-events, .fc-media-screen .fc-timegrid-now-indicator-container { position: absolute; top: 0; left: 0; right: 0; } .fc { /* bg */ } .fc .fc-timegrid-col-bg { z-index: 2; /* TODO: kill */ } .fc .fc-timegrid-col-bg .fc-non-business { z-index: 1 } .fc .fc-timegrid-col-bg .fc-bg-event { z-index: 2 } .fc .fc-timegrid-col-bg .fc-highlight { z-index: 3 } .fc .fc-timegrid-bg-harness { position: absolute; /* top/bottom will be set by JS */ left: 0; right: 0; } .fc { /* fg events */ /* (the mirror segs are put into a separate container with same classname, */ /* and they must be after the normal seg container to appear at a higher z-index) */ } .fc .fc-timegrid-col-events { z-index: 3; /* child event segs have z-indexes that are scoped within this div */ } .fc { /* now indicator */ } .fc .fc-timegrid-now-indicator-container { bottom: 0; overflow: hidden; /* don't let overflow of lines/arrows cause unnecessary scrolling */ /* z-index is set on the individual elements */ } .fc-direction-ltr .fc-timegrid-col-events { margin: 0 2.5% 0 2px; } .fc-direction-rtl .fc-timegrid-col-events { margin: 0 2px 0 2.5%; } .fc-timegrid-event-harness { position: absolute /* top/left/right/bottom will all be set by JS */ } .fc-timegrid-event-harness > .fc-timegrid-event { position: absolute; /* absolute WITHIN the harness */ top: 0; /* for when not yet positioned */ bottom: 0; /* " */ left: 0; right: 0; } .fc-timegrid-event-harness-inset .fc-timegrid-event, .fc-timegrid-event.fc-event-mirror, .fc-timegrid-more-link { box-shadow: 0px 0px 0px 1px #fff; box-shadow: 0px 0px 0px 1px var(--fc-page-bg-color, #fff); } .fc-timegrid-event, .fc-timegrid-more-link { /* events need to be root */ font-size: .85em; font-size: var(--fc-small-font-size, .85em); border-radius: 3px; } .fc-timegrid-event { /* events need to be root */ margin-bottom: 1px /* give some space from bottom */ } .fc-timegrid-event .fc-event-main { padding: 1px 1px 0; } .fc-timegrid-event .fc-event-time { white-space: nowrap; font-size: .85em; font-size: var(--fc-small-font-size, .85em); margin-bottom: 1px; } .fc-timegrid-event-short .fc-event-main-frame { flex-direction: row; overflow: hidden; } .fc-timegrid-event-short .fc-event-time:after { content: '\00a0-\00a0'; /* dash surrounded by non-breaking spaces */ } .fc-timegrid-event-short .fc-event-title { font-size: .85em; font-size: var(--fc-small-font-size, .85em) } .fc-timegrid-more-link { /* does NOT inherit from fc-timegrid-event */ position: absolute; z-index: 9999; /* hack */ color: inherit; color: var(--fc-more-link-text-color, inherit); background: #d0d0d0; background: var(--fc-more-link-bg-color, #d0d0d0); cursor: pointer; margin-bottom: 1px; /* match space below fc-timegrid-event */ } .fc-timegrid-more-link-inner { /* has fc-sticky */ padding: 3px 2px; top: 0; } .fc-direction-ltr .fc-timegrid-more-link { right: 0; } .fc-direction-rtl .fc-timegrid-more-link { left: 0; } .fc { /* line */ } .fc .fc-timegrid-now-indicator-line { position: absolute; z-index: 4; left: 0; right: 0; border-style: solid; border-color: red; border-color: var(--fc-now-indicator-color, red); border-width: 1px 0 0; } .fc { /* arrow */ } .fc .fc-timegrid-now-indicator-arrow { position: absolute; z-index: 4; margin-top: -5px; /* vertically center on top coordinate */ border-style: solid; border-color: red; border-color: var(--fc-now-indicator-color, red); } .fc-direction-ltr .fc-timegrid-now-indicator-arrow { left: 0; /* triangle pointing right. TODO: mixin */ border-width: 5px 0 5px 6px; border-top-color: transparent; border-bottom-color: transparent; } .fc-direction-rtl .fc-timegrid-now-indicator-arrow { right: 0; /* triangle pointing left. TODO: mixin */ border-width: 5px 6px 5px 0; border-top-color: transparent; border-bottom-color: transparent; } :root { --fc-list-event-dot-width: 10px; --fc-list-event-hover-bg-color: #f5f5f5; } .fc-theme-standard .fc-list { border: 1px solid #ddd; border: 1px solid var(--fc-border-color, #ddd); } .fc { /* message when no events */ } .fc .fc-list-empty {/* イベントがないときの背景色 */ background-color: rgba(208, 208, 208, 0.3); background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3)); height: 100%; display: flex; justify-content: center; align-items: center; /* vertically aligns fc-list-empty-inner */ } .fc .fc-list-empty-cushion { margin: 5em 0; } .fc { /* table within the scroller */ /* ---------------------------------------------------------------------------------------------------- */ } .fc .fc-list-table { width: 100%; border-style: hidden; /* kill outer border on theme */ } .fc .fc-list-table tr > * { border-left: 0; border-right: 0; } .fc .fc-list-sticky .fc-list-day > * { /* the cells */ position: sticky; top: 0; background: #fff; background: var(--fc-page-bg-color, #fff); /* for when headers are styled to be transparent and sticky */ } .fc { /* only exists for aria reasons, hide for non-screen-readers */ } .fc .fc-list-table thead { position: absolute; left: -10000px; } .fc { /* the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell */ } .fc .fc-list-table tbody > tr:first-child th { border-top: 0; } .fc .fc-list-table th { padding: 0; /* uses an inner-wrapper instead... */ } .fc .fc-list-table td, .fc .fc-list-day-cushion { padding: 8px 14px; } .fc { /* date heading rows */ /* ---------------------------------------------------------------------------------------------------- */ } .fc .fc-list-day-cushion:after { content: ""; clear: both; display: table; /* clear floating */ } .fc-theme-standard .fc-list-day-cushion {/* リスト表示表題カラー */ background-color: rgba(208, 208, 208, 0.3); background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3)); } .fc-direction-ltr .fc-list-day-text, .fc-direction-rtl .fc-list-day-side-text { float: left; } .fc-direction-ltr .fc-list-day-side-text, .fc-direction-rtl .fc-list-day-text { float: right; } /* make the dot closer to the event title */ .fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right: 0 } .fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left: 0 } .fc .fc-list-event.fc-event-forced-url { cursor: pointer; /* whole row will seem clickable */ } .fc .fc-list-event:hover td { background-color: #f5f5f5; background-color: var(--fc-list-event-hover-bg-color, #f5f5f5);/* リストカレンダーマウスオンカラー */ } .fc { /* shrink certain cols */ } .fc .fc-list-event-graphic, .fc .fc-list-event-time { white-space: nowrap; width: 1px; } .fc .fc-list-event-dot { display: inline-block; box-sizing: content-box; width: 0; height: 0; border: 5px solid #3788d8; border: calc(var(--fc-list-event-dot-width, 10px) / 2) solid var(--fc-event-border-color, #3788d8); border-radius: 5px; border-radius: calc(var(--fc-list-event-dot-width, 10px) / 2); } .fc { /* reset styling */ } .fc .fc-list-event-title a { color: inherit; text-decoration: none; } .fc { /* underline link when hovering over any part of row */ } .fc .fc-list-event.fc-event-forced-url:hover a { text-decoration: underline; } .fc-theme-bootstrap a:not([href]) { color: inherit; /* natural color for navlinks */ } .fc-theme-bootstrap5 a:not([href]) { color: inherit; text-decoration: inherit; } .fc-theme-bootstrap5 .fc-list, .fc-theme-bootstrap5 .fc-scrollgrid, .fc-theme-bootstrap5 td, .fc-theme-bootstrap5 th { border: 1px solid var(--bs-gray-400); } .fc-theme-bootstrap5 { /* HACK: reapply core styles after highe-precedence border statement above */ } .fc-theme-bootstrap5 .fc-scrollgrid { border-right-width: 0; border-bottom-width: 0; } .fc-theme-bootstrap5-shaded { background-color: var(--bs-gray-200); } /* 日曜日 */ .fc-sun { color: red; background-color: #fff0f0; } /* 土曜日 */ .fc-sat { color: blue; background-color: #f0f0ff; } .box1{ border-radius:30px; border: 1px solid #666; width: 300px; text-align: center; } .h1.major, h2.major, h3.major, h4.major, h5.major, h6.major { border-bottom: solid 1px #ffffff; width: -moz-max-content; width: -webkit-max-content; width: -ms-max-content; width: max-content; padding-bottom: 0.5rem; margin: 0 0 2rem 0; } /* Form */ form { margin: 0 0 2rem 0; } form > :last-child { margin-bottom: 0; } form > .fields { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 3rem); margin: -1.5rem 0 2rem -1.5rem; } form > .fields > .field { -moz-flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0; -moz-flex-shrink: 0; -webkit-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; padding: 1.5rem 0 0 1.5rem; width: calc(100% - 1.5rem); } form > .fields > .field.half { width: calc(50% - 0.75rem); } form > .fields > .field.third { width: calc(100%/3 - 0.5rem); } form > .fields > .field.quarter { width: calc(25% - 0.375rem); } @media screen and (max-width: 480px) { form > .fields { width: calc(100% + 3rem); margin: -1.5rem 0 2rem -1.5rem; } form > .fields > .field { padding: 1.5rem 0 0 1.5rem; width: calc(100% - 1.5rem); } form > .fields > .field.half { width: calc(100% - 1.5rem); } form > .fields > .field.third { width: calc(100% - 1.5rem); } form > .fields > .field.quarter { width: calc(100% - 1.5rem); } } label { color: #ffffff; display: block; font-size: 0.8rem; font-weight: 300; letter-spacing: 0.2rem; line-height: 1.5; margin: 0 0 1rem 0; text-transform: uppercase; } input[type="text"], input[type="date"], input[type="email"], input[type="tel"], select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; background-color: transparent; border-radius: 4px; border: solid 1px #ffffff; color: inherit; display: block; outline: 0; padding: 0 1rem; text-decoration: none; width: 100%; } input[type="text"]:invalid, input[type="date"]:invalid, input[type="email"]:invalid, input[type="tel"]:invalid, select:invalid, textarea:invalid { box-shadow: none; } input[type="text"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus { background: rgba(255, 255, 255, 0.075); border-color: #ffffff; box-shadow: 0 0 0 1px #ffffff; } select { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23ffffff' /%3E%3C/svg%3E"); background-size: 1.25rem; background-repeat: no-repeat; background-position: calc(100% - 1rem) center; height: 2.75rem; padding-right: 2.75rem; text-overflow: ellipsis; } select option { color: #ffffff; background: #1b1f22; } select:focus::-ms-value { background-color: transparent; } select::-ms-expand { display: none; } input[type="text"], input[type="date"], input[type="email"], select { height: 2.75rem; } textarea { padding: 0.75rem 1rem; } input[type="checkbox"], input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; display: block; float: left; margin-right: -2rem; opacity: 0; width: 1rem; z-index: -1; } input[type="checkbox"] + label, input[type="radio"] + label { text-decoration: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; color: #FF0000; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 300; margin: 0 0 0.5rem 0; padding-left: 2.65rem; padding-right: 0.75rem; position: relative; } input[type="checkbox"] + label:before, input[type="radio"] + label:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; text-transform: none !important; font-family: 'Font Awesome 5 Free'; font-weight: 900; } input[type="checkbox"] + label:before, input[type="radio"] + label:before { -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; border-radius: 4px; border: 1px solid #FF0000; content: ''; display: inline-block; height: 1.65rem; left: 0; line-height: 1.65rem; position: absolute; text-align: center; top: -0.15rem; width: 1.65rem; } input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before { background: #ffffff !important; color: #FF0000; content: '\f00c'; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; } input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before { background: rgba(255, 255, 255, 0.075); box-shadow: 0 0 0 1px #ffffff; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; } input[type="checkbox"] + label:before { border-radius: 4px; } input[type="radio"] + label:before { border-radius: 100%; } ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } :-moz-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } ::-moz-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } :-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } .formerize-placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1.0; } /* Actions */ ul.actions { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; cursor: default; list-style: none; margin-left: -1rem; padding-left: 0; } ul.actions li { padding: 0 0 0 1rem; vertical-align: middle; } ul.actions.special { -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; width: 100%; margin-left: 0; } ul.actions.special li:first-child { padding-left: 0; } ul.actions.stacked { -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-left: 0; } ul.actions.stacked li { padding: 1.3rem 0 0 0; } ul.actions.stacked li:first-child { padding-top: 0; } ul.actions.fit { width: calc(100% + 1rem); } ul.actions.fit li { -moz-flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; -ms-flex-shrink: 1; flex-shrink: 1; width: 100%; } ul.actions.fit li > * { width: 100%; } ul.actions.fit.stacked { width: 100%; } @media screen and (max-width: 480px) { ul.actions:not(.fixed) { -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-left: 0; width: 100% !important; } ul.actions:not(.fixed) li { -moz-flex-grow: 1; -webkit-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; -ms-flex-shrink: 1; flex-shrink: 1; padding: 1rem 0 0 0; text-align: center; width: 100%; } ul.actions:not(.fixed) li > * { width: 100%; } ul.actions:not(.fixed) li:first-child { padding-top: 0; } ul.actions:not(.fixed) li input[type="submit"], ul.actions:not(.fixed) li input[type="reset"], ul.actions:not(.fixed) li input[type="button"], ul.actions:not(.fixed) li button, ul.actions:not(.fixed) li .button { width: 100%; } ul.actions:not(.fixed) li input[type="submit"].icon:before, ul.actions:not(.fixed) li input[type="reset"].icon:before, ul.actions:not(.fixed) li input[type="button"].icon:before, ul.actions:not(.fixed) li button.icon:before, ul.actions:not(.fixed) li .button.icon:before { margin-left: -0.5em; } } /* Button */ input[type="submit"], input[type="reset"], input[type="button"], button, .button { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; background-color: #000; border-radius: 4px; border: 0; box-shadow: inset 0 0 0 1px #ffffff; color: #ffffff !important; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 300; height: 2.75rem; letter-spacing: 0.2rem; line-height: 2.75rem; outline: 0; padding: 0 1.25rem 0 1.35rem; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover { background-color: rgba(255, 255, 255, 0.075); } input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, button:active, .button:active { background-color: rgba(153,153,153,0.2); } input[type="submit"].icon:before, input[type="reset"].icon:before, input[type="button"].icon:before, button.icon:before, .button.icon:before { margin-right: 0.5em; } input[type="submit"].fit, input[type="reset"].fit, input[type="button"].fit, button.fit, .button.fit { width: 100%; } input[type="submit"].small, input[type="reset"].small, input[type="button"].small, button.small, .button.small { font-size: 0.6rem; height: 2.0625rem; line-height: 2.0625rem; } input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, button.primary, .button.primary { background-color: #ffffff; color: #1b1f22 !important; font-weight: 600; } input[type="submit"].disabled, input[type="submit"]:disabled, input[type="reset"].disabled, input[type="reset"]:disabled, input[type="button"].disabled, input[type="button"]:disabled, button.disabled, button:disabled, .button.disabled, .button:disabled { pointer-events: none; cursor: default; opacity: 0.25; } input[type="submit"], input[type="reset"], input[type="button"], button { line-height: calc(2.75rem - 2px); } select { background-color: #1b1f22; color: white; border: solid 1px white; padding: 0.5rem; font-size: 1rem; border-radius: 4px; width: 100%; } select:focus { outline: none; border-color: #ffffff; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } input[type="checkbox"] { position: relative; width: 16px; height: 16px; border: 1px solid #000; vertical-align: -5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="checkbox"]:checked:before { position: absolute; top: 1px; left: 4px; transform: rotate(50deg); width: 4px; height: 8px; border-right: 2px solid #000; border-bottom: 2px solid #000; content: ''; } input[type="checkbox"] { border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="checkbox"] { position: relative; width: 16px; height: 16px; border: 1px solid #000; vertical-align: -5px; } input[type="checkbox"]:checked:before { position: absolute; top: 1px; left: 4px; transform: rotate(50deg); width: 4px; height: 8px; border-right: 2px solid #000; border-bottom: 2px solid #000; content: ''; } /* Wrapper */ .wrapper { position: relative; } @media screen and (max-width: 1680px) { .wrapper > .inner { padding: 4em 4em 2em 4em ; } } @media screen and (max-width: 1280px) { .wrapper > .inner { width: 100%; } } @media screen and (max-width: 736px) { .wrapper > .inner { padding: 3em 2em 1em 2em ; } } .wrapper.alt { background-color: #261c3e; } .wrapper.style1 {/* ブロック画面 */ background-color: #FFFFFF; } .wrapper.style1-alt { background-color: #493382; } .wrapper.style2 { background-color: #5052b5; } .wrapper.style2-alt { background-color: #3e4094; } /* 背景 */ .wrapper.style3 { background-color: #FFFFFF; } .wrapper.style3-alt { background-color: #953d75; } .wrapper.fullscreen { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; min-height: 100vh; } body.is-ie .wrapper.fullscreen { height: 100vh; } @media screen and (max-width: 1280px) { .wrapper.fullscreen { min-height: calc(100vh - 2.5em); } body.is-ie .wrapper.fullscreen { height: calc(100vh - 2.5em); } } @media screen and (max-width: 736px) { .wrapper.fullscreen { padding: 2em 0; min-height: 0; } body.is-ie .wrapper.fullscreen { height: auto; } } .wrapper.fade-up > .inner { -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -moz-transition: opacity 1s ease, -moz-transform 1s ease; -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; -ms-transition: opacity 1s ease, -ms-transform 1s ease; transition: opacity 1s ease, transform 1s ease; opacity: 1.0; } .wrapper.fade-up.inactive > .inner, body.is-preload .wrapper.fade-up > .inner { opacity: 0; -moz-transform: translateY(1em); -webkit-transform: translateY(1em); -ms-transform: translateY(1em); transform: translateY(1em); } .wrapper.fade-down > .inner { -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -moz-transition: opacity 1s ease, -moz-transform 1s ease; -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; -ms-transition: opacity 1s ease, -ms-transform 1s ease; transition: opacity 1s ease, transform 1s ease; opacity: 1.0; } .wrapper.fade-down.inactive > .inner, body.is-preload .wrapper.fade-down > .inner { opacity: 0; -moz-transform: translateY(-1em); -webkit-transform: translateY(-1em); -ms-transform: translateY(-1em); transform: translateY(-1em); } .wrapper.fade > .inner { -moz-transition: opacity 1s ease; -webkit-transition: opacity 1s ease; -ms-transition: opacity 1s ease; transition: opacity 1s ease; opacity: 1.0; } .wrapper.fade.inactive > .inner, body.is-preload .wrapper.fade > .inner { opacity: 0; } /* Icon */ .icon { text-decoration: none; border-bottom: none; position: relative; } .icon:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; text-transform: none !important; font-family: 'Font Awesome 5 Free'; font-weight: 400; } .icon > .label { display: none; } .icon:before { line-height: inherit; } .icon.solid:before { font-weight: 900; } .icon.brands:before { font-family: 'Font Awesome 5 Brands'; } .icon.major { width: 2.5em; height: 2.5em; display: block; background: #ffffff; border-radius: 100%; color: #312450; text-align: center; line-height: 2.5em; margin: 0 0 1.3em 0; } .icon.major:before { font-size: 1.25em; } .wrapper.style1 .icon.major:before { color: #999999; } .wrapper.style1-alt .icon.major:before { color: #493382; } .wrapper.style2 .icon.major:before { color: #5052b5; } .wrapper.style2-alt .icon.major:before { color: #3e4094; } .wrapper.style3 .icon.major:before { color: #b74e91; } .wrapper.style3-alt .icon.major:before { color: #953d75; } /* 枠線 */ .features { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; border-radius: 0.25em; border: 1px solid rgba(0,0,0,0.1); margin: 0 0 2em 0; background-color: rgba(255,255,255,0.1); } .features section { padding: 3.5em 3em 1em 7em; width: 50%; position: relative; border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0,0,0,0.1); } .features section:nth-child(-n + 2) { border-top-width: 0; } .features section:nth-child(2n) { border-left-width: 1px; border-left-style: solid; border-left-color: rgba(0,0,0,0.1); } .features section .icon { -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease; -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease; -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease; -moz-transition-delay: 1s; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s; -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); position: absolute; left: 3em; top: 3em; opacity: 1; } .features section:nth-child(1) .icon { -moz-transition-delay: 0.15s; -webkit-transition-delay: 0.15s; -ms-transition-delay: 0.15s; transition-delay: 0.15s; } .features section:nth-child(2) .icon { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; } .features section:nth-child(3) .icon { -moz-transition-delay: 0.45s; -webkit-transition-delay: 0.45s; -ms-transition-delay: 0.45s; transition-delay: 0.45s; } .features section:nth-child(4) .icon { -moz-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s; } .features section:nth-child(5) .icon { -moz-transition-delay: 0.75s; -webkit-transition-delay: 0.75s; -ms-transition-delay: 0.75s; transition-delay: 0.75s; } .features section:nth-child(6) .icon { -moz-transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s; } .features section:nth-child(7) .icon { -moz-transition-delay: 1.05s; -webkit-transition-delay: 1.05s; -ms-transition-delay: 1.05s; transition-delay: 1.05s; } .features section:nth-child(8) .icon { -moz-transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; transition-delay: 1.2s; } .features section:nth-child(9) .icon { -moz-transition-delay: 1.35s; -webkit-transition-delay: 1.35s; -ms-transition-delay: 1.35s; transition-delay: 1.35s; } .features section:nth-child(10) .icon { -moz-transition-delay: 1.5s; -webkit-transition-delay: 1.5s; -ms-transition-delay: 1.5s; transition-delay: 1.5s; } .features section:nth-child(11) .icon { -moz-transition-delay: 1.65s; -webkit-transition-delay: 1.65s; -ms-transition-delay: 1.65s; transition-delay: 1.65s; } .features section:nth-child(12) .icon { -moz-transition-delay: 1.8s; -webkit-transition-delay: 1.8s; -ms-transition-delay: 1.8s; transition-delay: 1.8s; } .features section:nth-child(13) .icon { -moz-transition-delay: 1.95s; -webkit-transition-delay: 1.95s; -ms-transition-delay: 1.95s; transition-delay: 1.95s; } .features section:nth-child(14) .icon { -moz-transition-delay: 2.1s; -webkit-transition-delay: 2.1s; -ms-transition-delay: 2.1s; transition-delay: 2.1s; } .features section:nth-child(15) .icon { -moz-transition-delay: 2.25s; -webkit-transition-delay: 2.25s; -ms-transition-delay: 2.25s; transition-delay: 2.25s; } .features section:nth-child(16) .icon { -moz-transition-delay: 2.4s; -webkit-transition-delay: 2.4s; -ms-transition-delay: 2.4s; transition-delay: 2.4s; } .features section:nth-child(17) .icon { -moz-transition-delay: 2.55s; -webkit-transition-delay: 2.55s; -ms-transition-delay: 2.55s; transition-delay: 2.55s; } .features section:nth-child(18) .icon { -moz-transition-delay: 2.7s; -webkit-transition-delay: 2.7s; -ms-transition-delay: 2.7s; transition-delay: 2.7s; } .features section:nth-child(19) .icon { -moz-transition-delay: 2.85s; -webkit-transition-delay: 2.85s; -ms-transition-delay: 2.85s; transition-delay: 2.85s; } .features section:nth-child(20) .icon { -moz-transition-delay: 3s; -webkit-transition-delay: 3s; -ms-transition-delay: 3s; transition-delay: 3s; } .features.inactive section .icon { -moz-transform: scale(0.5); -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); opacity: 0; } @media screen and (max-width: 980px) { .features { display: block; } .features section { border-top-width: 1px !important; border-left-width: 0 !important; width: 100%; } .features section:first-child { border-top-width: 0 !important; } } @media screen and (max-width: 736px) { .features section { padding: 2.5em 1.5em 0.1em 5.5em ; } .features section .icon { left: 1.5em; top: 2em; } } @media screen and (max-width: 480px) { .features section { padding: 2em 1.5em 0.1em 1.5em ; } .features section .icon { left: 0; position: relative; top: 0; } }