@charset "utf-8"; @import "common.less"; @import "mypage.less"; /* 暫定CSS後で調整 */ ol.num { text-align:left; padding: 0 0 0 2rem; li {list-style: decimal;} } ul.linklist2 { text-align:left; padding: 0 0 2rem 2rem; margin: 0 0 0 2rem; li {list-style: disc; a {color:@linkColor3;} } } #contentsArea h2.st { font-size: 2rem; margin: 4rem 0 3.2rem; padding-bottom: 0.5rem; text-align: left; border-bottom: solid 2px #000; } .collapsible .scrBoxY { position: relative; max-height: 25rem; overflow-y: auto; width: 95%; margin: 0 auto; padding: 2rem; border: 1px solid #ddd; } /* Scrollbar ============================ */ /* width */ .collapsible .scrBoxY::-webkit-scrollbar { width: 10px; } /* Track */ .collapsible .scrBoxY::-webkit-scrollbar-track { background: #ebebeb; } /* Handle */ .collapsible .scrBoxY::-webkit-scrollbar-thumb { background: #c4c4c4; } /* Handle on hover */ .collapsible .scrBoxY::-webkit-scrollbar-thumb:hover { background: #555; } #contentsArea h2 .pageNum, #contentsArea h3 .pageNum { display: inline-block; float: right; font-size: @font14; margin-top: 12px; color:@font-color; } h3 .moreLnk { display: inline-block; float: right; font-size: @font14; margin-top: 12px; } /* innerWrap */ .innerWrap { margin:0 auto; width:~"calc(100% - 1rem )"; } /* 同窓会 */ .alumniWrap { margin:0 auto; width:~"calc(100% - 4rem )"; } @media print, screen and (min-width: 768px) { .alumniWrap { margin:0 auto; width:~"calc(100% - 10rem )"; } } /* accrodion */ .collapsible.acc li{ display:block; } .collapsible.acc .collapsible-header { position: relative; padding: 1rem 2rem 1rem 4rem; .transition; } .collapsible.acc .collapsible-header:before { content: ''; position: absolute; top: 50%; right: 1.9rem; display: block; width: 3px; height: 13px; background: @color-key-dark; z-index: 1; transform: translate(0,-50%) rotate(90deg); } .collapsible.acc .collapsible-header:after { content: ''; position: absolute; top: 50%; right: 1.9rem; display: block; width: 3px; height: 13px; background: @color-key-dark; transform: translate(0,-50%) rotate(0); .transition; } .collapsible.acc .active .collapsible-header:after { opacity:0; transform: translate(0,-50%) rotate(90deg); } .collapsible.acc .collapsible-header i { position: absolute; top: 50%; transition: tra; transform: translate(0, -50%); left: 1rem; } /* tableList */ .tableWrap { width:100%; } .tableWrap.noborder { border:none; } .tableWrap .copy { padding:2rem; } .tableWrap .lineB { border-bottom:1px solid #ddd; } .tableWrap .tableList { display:table; width: 100%; text-align: left; } .tableWrap .tableList.agreeBox { border-top:@border; } @media print, screen and (min-width: 768px) { .tableWrap .tableList.agreeBox { border-top:none; border-left:none; border-right:none; } } .tableWrap li { display:table-row; } .tableWrap li.hide { display:none; } .table-item-flag { display:none; } .tableWrap li .unread { color:@color-atten; } .tableWrap li .already { color:#ababab; } .tableWrap li .table-item-body { display:block; padding:1rem 0 0; } .tableWrap li .table-item-body a { padding:0 0 0 5.5rem; position:relative; display: block; line-height:1.6; } .tableWrap li .table-item-body a.unread::before, .tableWrap li .table-item-body a.already::before { content:"\e876"; width:1.6rem; height:1.6rem; position: absolute; top: 6px; left: 2rem; } .tableWrap li .table-item-body a.already::before { content:"\e877"; } .tableWrap li .table-item-body a.unread::after, .tableWrap li .table-item-body a.already::after { font-family:@fontFamily; content:"\672A\8AAD"; font-size:@font12; color:#333; position: absolute; left:1.5rem; top:2.5rem; } .tableWrap li .table-item-body a.already::after { content:"\65E2\8AAD"; } .tableWrap li .table-item-body .mailbody { padding:0 0 0 5.5rem; position:relative; display: block; overflow: hidden; height: 8rem; } .tableWrap li .table-item-body .mailbody::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%); background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%); } .tableWrap li .table-item-days { padding:0 0.5rem 1rem 5.5rem; margin: 0; position:relative; display: block; font-size:@font14; border-bottom:@border; } .tableWrap .table-item-hedding { padding: 2rem 0.5rem 0 2rem; font-weight: bold; position: relative; display: block; line-height: 1.6; } .tableWrap .table-item-hedding::before { content:""; position: absolute; left: 0.2rem; top: 3rem; width: 1rem; height: 4px; background:@color-key; } .tableWrap .table-item-bodyL { margin: 0; padding: 1.2rem 0 2rem 2rem; border-bottom:@border; width:100%; .clipItem { line-height:1.8; word-break: break-all; a { display:block; width:100%; // padding:1rem; i { font-size:@font16; color:@font-color; vertical-align: middle; // border:@border; background:@color-key-dark-light; padding:0.5rem; margin: 0 1rem 0 0; // .z-depth-1; } } } } .tableWrap .table-item-bodyM { border-bottom:@border; padding:1rem 0 2rem; } .tableWrap + .btnWrap { margin:3rem 0 0; text-align: center; i {margin:0 1rem 1rem;} } .tableWrap .table-item-clip { width:100%; word-break: break-all; .clipItem { line-height:1.8; padding:2rem 0 0; a { display:block; width:100%; // padding:1rem; i { font-size:@font16; color:@font-color; vertical-align: middle; // border:@border; background:@color-key-dark-light; padding:0.5rem; margin: 0 1rem 0 0; // .z-depth-1; } } } } #contentsArea .tableWrap li .caption { line-height: 1.8; border-top:none; padding: 0.5rem 3.5rem 0.5rem 2rem; } #contentsArea .tableWrap .caption.ico_acc { position: relative; .transition; } #contentsArea .tableWrap .caption.ico_acc::before { content: ''; position: absolute; top: 50%; right: 22px; display: block; width: 2px; height: 12px; background: #fff; margin-top: -6px; .transition; } #contentsArea .tableWrap .caption.ico_acc::after { content: ''; position: absolute; top: 50%; right: 22px; display: block; width: 2px; height: 12px; background: #fff; margin-top: -6px; .rotate90; } #contentsArea .tableWrap .active .caption.ico_acc::before { .rotate90; opacity: 0; } #systemArea .tableWrap .table-item-bodyL .tableBlock li .tableTd .listtype1 li { display: inline-block; width: auto; padding: 0; line-height: 1.6; vertical-align: middle; min-width: 44px; } @media print, screen and (max-width: 320px) { /* iPhoneSe */ .tableWrap li .table-item-body .mailbody { height: 7rem; } .tableWrap .table-item-hedding::before { // top: 1.4rem; } .tableWrap .table-item-bodyL { //width:290px; } } @media print, screen and (min-width: 768px) { /*Tablet*/ .tableWrap { border-top:@border; border-left:@border; border-right:@border; } .tableWrap.noboder { border-top:none; border-left:none; border-right:none; } .tableWrap li.hide { display:table-row; background:@item-color; } .tableWrap .table-item-flag, .tableWrap li .table-item-body, .tableWrap li .table-item-days { display:table-cell; border-bottom:@border; } .tableWrap .table-item-flag { width:50px; text-align: center; padding: 0.5rem 0; border-right:@border; span { font-size: @font14; display:block; line-height: 1; } } .tableWrap li .table-item-body { border-right:@border; padding: 0; span { padding: 0; } } .tableWrap li .table-item-body a { padding: 0.8rem 2rem; } .tableWrap li .table-item-body a.unread::before, .tableWrap li .table-item-body a.already::before, .tableWrap li .table-item-body a.unread::after, .tableWrap li .table-item-body a.already::after { content:""; } .tableWrap li .table-item-body .mailbody { padding: 0.8rem 2rem; } .tableWrap li .table-item-days { width:200px; padding:0.8rem 2rem; display: table-cell; span { padding: 0; } } .tableWrap .table-item-hedding { display: table-cell; width:240px; padding:2rem; border-bottom:@border; background:@cell-color; border-right:@border; vertical-align: top; &::before {content:"none";background: transparent;} label {width:199px;display:block;} } .tableWrap .table-item-bodyL { display: table-cell; padding:2rem; width: ~"calc(100% - 240px)"; } .tableWrap .table-item-clip { display: table-cell; padding:2rem; border-right:@border; border-bottom:@border; width:300px; vertical-align: top; .clipItem { line-height: 1.8; padding:0; } } .tableWrap .table-item-bodyM { display: table-cell; padding:2rem; width: ~"calc(100% - 300px)"; } } @media print, screen and (min-width: 1024px) { /*PC*/ .tableWrap .table-item-bodyL { // width:758px; padding:2rem; } .tableWrap li .table-item-body { padding: 0.8rem 2rem; } .tableWrap .table-item-bodyM { padding:2rem; // width:660px; } .tableWrap li .table-item-body a, .tableWrap li .table-item-body .mailbody { padding:0; } .tableWrap + .btnWrap { margin:5rem 0 0; } } @media print, screen and (min-width: 1366px) { /*PC*/ .tableWrap .table-item-bodyL { width:1000px; } .tableWrap .table-item-bodyM { // width:900px; } } /* 追加・削除 */ .mypage .add, .mypage .del { width: 100%; text-align: right; padding: 14px 0; box-sizing: border-box; } .mypage .add { text-align: left; } .mypage button[name*="delbox_"], .mypage button[name*="addbox_"] { display: inline-block; border: 1px solid #000; background: #000; color: #fff; padding: 0 2rem; height: 3rem; font-size: @font14; line-height: 2.8rem; text-align: center; position:relative; cursor: pointer; } .mypage button span { padding:0 0 0 1rem; } .mypage button[name*="delbox_"] span::before, .mypage button[name*="addbox_"] span::before { content:''; position:absolute; top:50%; left:19px; display:block; width:2px; height:11px; background:#fff; margin-top:-5px; z-index:1; } .mypage button[name*="delbox_"] span::after, .mypage button[name*="addbox_"] span::after { content:''; position:absolute; top:50%; left:19px; display:block; width:2px; height:11px; background:#fff; margin-top:-5px; .rotate90; } .mypage button[name*="delbox_"] span::before { .rotate45; } .mypage button[name*="delbox_"] span::after, .mypage button[name*="closeBtn"] span::after { .rotate-45; } .mypage button[name*="delbox_"], .mypage button[name*="addbox_"] { /* width:150px;*/ } @media screen and (min-width:1025px) { .mypage .add { padding: 0; } .mypage .del { padding: 0; } .mypage button[name*="delbox_"]:hover, .mypage button[name*="addbox_"]:hover { background: #fff; color: #000; border: 1px solid #000; opacity:1; } .mypage button[name*="delbox_"]:hover span::before, .mypage button[name*="addbox_"]:hover span::before, .mypage button[name*="delbox_"]:hover span::after, .mypage button[name*="addbox_"]:hover span::after { background:#000; } } /* categoryLink */ #systemArea .categoryLink { font-size:@font14; line-height:1.6; li { display: inline-block; vertical-align: middle; position: relative; padding:0.5rem 1rem; &::before { content:"\e5cf"; position: absolute; font-size:2rem; left: 0; top: 5px; } a { display:block; padding:0.5rem 1.0rem 0.5rem 1.2rem; font-size:@font14; color:@font-color; } } } /* Entry Parts */ #systemArea input.required, #systemArea select.required, #systemArea textarea.required { background:@bg-required-color; } #systemArea .error { padding:2rem; text-align:left; } #systemArea .must { font-size:@font12; color:@font-colorW; display: inline-block; font-weight: normal; line-height:1.8; margin: 0 0.5rem; padding: 0 0.8rem; background:@icon-required-color; .radius; } #systemArea input[type="text"], #systemArea input[type="password"] { border:@border; margin: 0 0.5rem 0 0; padding: 0.5rem; display: inline-block; cursor: auto; } #systemArea input[type="text"]::-webkit-input-placeholder, #systemArea input[type="password"]::-webkit-input-placeholder, #systemArea select::-webkit-input-placeholder, #systemArea input[type="text"]::placeholder , #systemArea input[type="password"]::placeholder , #systemArea select::placeholder { font-size:@font13; } #systemArea .listtype1, #systemArea .listtype2 { margin:0; } #systemArea .listtype1 li { display:inline-block; width: auto; padding:0; margin:0 2rem 0 0; line-height: 1.6; vertical-align: middle; &.block { display:block; margin:0 0 1rem; } &:last-child {margin:0} label { display:inline-block; position: relative; margin:0 1.6rem 0 2rem; line-height:1.6; } } #systemArea ul + ul { margin:1rem 0 0 !important; } #systemArea .listtype2 { width:100%; padding:0; line-height: 1.6; vertical-align: middle; li { display:block; margin:0.3rem 0 0.4rem; label { display:inline-block; position: relative; margin:0 1.6rem 0 2rem; line-height:1.6; } } } /* input */ .entry input[size="6"] { width: 80px; } .entry input[size="8"] { width: 80px; } .entry input[size="10"] { width: 80px; } .entry input[size="16"] { width: 90px; } .entry input[size="20"] { width: 200px; } .entry input[size="30"] { width:200px; } .entry input[size="40"] { width: 100%; } .entry input[size="50"] { width:100%; } /* ファイル添付 */ .entry .file-field { position: relative; &.input-field { margin: 1rem 0; .btn { .button; font-size:@font16; padding:0 2rem; height:3rem; line-height:3rem; } span {cursor: pointer;} .file-path-wrapper { overflow: hidden; } input.file-path { width: 100%; } } input[type=file] { width:100%; text-align:center; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; //height:3.6rem; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); &::-webkit-file-upload-button { display: none; } } } /* チェックボックス・ラジオボタン */ .entry input[type="radio"], .entry input[type="checkbox"] { font-size: 1rem; width: 1em; margin: 0; padding: 0; opacity: 0; } .entry input[type="radio"]+label:before { content: ""; position: absolute; width: 1.6rem; height: 1.6rem; background: #fff; border: 1px solid #ccc; border-radius: 50px; top:0.6rem; left:-2rem; } .entry input[type="checkbox"]+label:before{ content: ""; position: absolute; background: #fff; border:1px solid #ccc; width: 1em; height: 1em; top:4px; left:-1.3em; } .entry input.required[type="checkbox"]+label:before{ background:@bg-required-color; } .entry input.required[type="radio"]+label:before{ background:@bg-required-color; } .entry input[type="checkbox"]+label:before{ border-radius: 2px; } /* checked */ .entry input[type="radio"]:checked+label::after { content: ''; position: absolute; width: 1rem; height: 1rem; border-radius: 50px; left: -1.7rem; top: 50%; margin-top:-0.35rem; background-color: @color-key; z-index: 1; } .entry input[type="checkbox"]:checked+label:after { content: ""; position: absolute; top: 7px; left: -1.5rem; display: block; width: 5px; height: 8px; border-right: 2px solid @color-key; border-bottom: 2px solid @color-key; .rotate45; z-index: 1; } /* select */ .entry select { font-size:@font16; border:@border; padding: 0.4em; margin:0.5rem 0; background:rgba(255,255,255,1); max-width:100%; } #systemArea .tableWrap .table-item-bodyL .flexTable { display: table; margin:0.5rem 0; } #systemArea .tableWrap .table-item-bodyL .flexTable dt {display: table-cell;padding:0 0.5rem;} #systemArea .tableWrap .table-item-bodyL .flexTable dd {display: table-cell;padding:0} #systemArea .tableWrap .table-item-bodyL .tableBlock { padding: 0; li { display: table; margin: 0 0 1rem; border-collapse: collapse; table-layout: fixed; width: 100%; .chk { display: inline-block; position: relative; margin: 1rem 0 0 2rem; } .tableTh {font-size:@font16;} .tableTd {display: table-row;} .tableCell {display:table-cell;} .listtype1{ display:block; li { display: inline-block;width: auto;margin:0; } } &.line3 {line-height:3;} &:last-child {margin:0;} } } #systemArea .tableWrap .table-item-bodyL .tableBlock div::after { content: ''; display:block; width: 100%; margin:0 0 0.5rem; } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 { border-collapse: collapse; display: table; table-layout: fixed; font-size: 1.4rem; width: 100%; li { &:first-of-type { display: none; // height: 68px; } } } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 .tableTh{ background:#eee; display:table-caption; padding:0.5rem; } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 .tableTd.null{ // display:table-caption; display:none; } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 .cell1 { display:table-cell; padding:0.5rem 0.5rem 0.5rem 3rem; label { display:block; position:relative; } } @media print, screen and (min-width: 768px) { #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 { border:@border; } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 li { display: table-row; border-bottom:@border; &:last-child { border-bottom:none; } } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 li .tableTh { display:table-cell; padding:1rem; background:@item-color; border-right:@border; // background:transparent; } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 li:first-of-type { display: table-row; background:@color-key-light; color:#fff; .tableTh {background:transparent;} } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 .tableTd.null{ // display:table-cell; // padding:1rem; } #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 li .tableTd.cell1 { padding:1rem; // width:80px; // border-left:@border; text-align: center; label { display:block; position:relative; cursor:pointer; &:before { left:50%; transform: translate(-50%,0); } span { display:block; padding-top:2.6rem; color:@font-color; } } input[type="radio"]:checked + label:after { top:9px; left:50%; transform: translate(-50%,0); margin-top:0; } li { background:none; } } } @media print, screen and (min-width: 1024px) { #systemArea .tableWrap .table-item-bodyL .tableBlock li.line3 {line-height:1.8;} #systemArea .tableWrap .table-item-bodyL .tableBlock.col4 li .tableTd.cell1 label { width: 50%; margin: 0 auto; } #systemArea .tableWrap .table-item-bodyL .tableBlock li{ .chk { margin: 0 0 0 4rem; } } } /* textarea */ #systemArea textarea { border:@border; width:100%; padding:1.6rem; } @media print, screen and (max-width: 320px) { /* iPhoneSe */ .entry input[size="6"]{ width:60px; } .entry input[size="8"], .entry input[size="10"], .entry input[size="16"] { width: 80px; } .entry input[type="radio"]:checked+label::after { left:-1.65rem; margin-top:-0.3rem; } .entry input[type="checkbox"]:checked+label:after { top: 6px; // left: -1.6rem; } } @media print, screen and (min-width: 768px) { .entry .file-field::after { content:""; width:100%; display:block; } .entry .file-field.input-field .btn { float:left; &:hover {opacity:0.7;} } #systemArea .listtype1 li { margin-bottom:0; } .entry .file-field.input-field .file-path-wrapper { padding:0 0 0 1rem; // .file-path input:hover {opacity:0.7;} } #contentsArea .entry .file-field.input-field + p {margin:1.5rem 0 0;} #systemArea .tableWrap .table-item-bodyL .flexTable { display:flex; flex-wrap: wrap; } #systemArea .tableWrap .table-item-bodyL .tableBlock li .tableTh, #systemArea .tableWrap .table-item-bodyL .tableBlock li .tableTd { display:table-cell; } #systemArea .tableWrap .table-item-bodyL .tableBlock li .tableTd { width:~"calc(100% - 190px)"; vertical-align: middle; // width: 728px; } _::-webkit-full-page-media, _:future, :root #systemArea .tableWrap .table-item-bodyL .tableBlock li .tableTd { width:auto } #systemArea .tableWrap .table-item-bodyL .tableBlock li .tableTh {width:190px;vertical-align: middle;} #systemArea .tableWrap .table-item-bodyL .tableBlock li .listtype1 {display:inline-block;} #systemArea .tableWrap .table-item-bodyL .tableBlock li .listtype1.flexBox {display:flex;flex-wrap: wrap;align-items: center;} #systemArea .tableWrap .table-item-bodyL .tableBlock li .listtype1.flexBox li { min-width:160px; margin-bottom: 0.5rem; } #systemArea .tableWrap .table-item-bodyL .tableBlock li .listtype1.flexBox li:nth-child(2n){ flex-basis: ~"calc(100% - 160px)"; max-width:~"calc(100% - 160px)"; padding:0 1.5rem 0 0; max-width:100%; } .entry input[size="6"] { width: 80px; } .entry input[size="8"] { width: 100px; } .entry input[size="10"] { width: 100px; } .entry input[size="16"] { width: 100%; } .entry input[size="20"] { width: 200px; } .entry input[size="30"] { width:230px; } } @media print, screen and (min-width: 1024px) { /*PC*/ #systemArea .tableWrap .table-item-bodyL .tableBlock li .listtype1.flexBox li:nth-child(2n){flex-basis: auto;} .entry input[size="16"] { width: 160px; } .entry input[size="40"] { width:70%; } .entry input[size="50"] { width:85%; } } /* 微調整 */ #systemArea.entry input[name="tel1_2"], #systemArea.entry input[name="tel1_3"], #systemArea.entry input[name="tel2_2"], #systemArea.entry input[name="tel2_3"] { margin:0 0.5rem; } #systemArea.entry label[for="graduate_flag1_1"] { margin:1rem 1.6rem 1rem 2rem; } /* Modal ========================*/ .modal { display: none; position: fixed; left: 0; right: 0; background-color: #fafafa; padding: 0; max-height: 70%; width: 70%; margin: auto; overflow-y: auto; will-change: top, opacity; .radius; } .modal:focus { outline: none; } .modal .modal-content { padding: 2.4rem; } .modal .modal-close { cursor: pointer; } .modal .modal-footer { .radius; background-color: #fafafa; padding: 0.5rem 2.4rem; height: 50px; width: 100%; text-align: right; } .modal .modal-footer .btn, .modal .modal-footer .btn-flat { margin: 6px 0; } .modal-overlay { position: fixed; z-index: 999; top: -25%; left: 0; bottom: 0; right: 0; height: 125%; width: 100%; background: #000; display: none; will-change: opacity; } .modal.modal-fixed-footer { padding: 0; height: 70%; } .modal.modal-fixed-footer .modal-content { position: absolute; height: ~"calc(100% - 50px)"; max-height: 100%; width: 100%; overflow-y: auto; } .modal.modal-fixed-footer .modal-footer { border-top: 1px solid rgba(0, 0, 0, 0.1); position: absolute; bottom: 0; } .modal.bottom-sheet { top: auto; bottom: -100%; margin: 0; width: 100%; max-height: 45%; border-radius: 0; will-change: bottom, opacity; } @media print, screen and (min-width: 768px) { .modal { width: 80%; } }