/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ 装飾 ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/ /******************* 装飾1 *******************/ .jet-deco-1 { display: block; padding: 0.31vw 2.5vw; border-top: 0.625vw solid rgb(221,51,51); background:rgb(247,247,247); } /******************* 装飾2 *******************/ .jet-deco-2 { display: block; padding: 0.47vw 2.5vw; border-bottom: 0.625vw solid rgb(221,51,51); } /******************* 装飾3 *******************/ .jet-deco-3 { display: block; padding: 1.25vw 3.75vw; background:rgb(247,247,247); } /******************* 装飾4 *******************/ .jet-deco-4 { display: block; padding: 0.47vw 2.5vw 0.47vw 1.25vw; margin-bottom: 10px; border-left: 0.625vw solid rgb(221,51,51); } /******************* 装飾5 *******************/ .jet-deco-5 { display: block; padding: 1.25vw 3.75vw; border: 1px solid rgb(221,51,51); } /******************* 装飾6 *******************/ .jet-deco-6 { display: block; position: relative; padding: 8px 8px 8px 32px; background:rgb(247,247,247); } .jet-deco-6::after { position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ""; width: 20px; height: 4px; background-color: rgb(221,51,51); } /******************* 装飾7 *******************/ .jet-deco-7 { position: relative; } .jet-deco-7::before { content: ''; display: block; position: absolute; left: 1.25vw; top: calc(100% + 0px); width: calc(50% - 2.5vw); height: 2.5vw; border-top: 1px solid #000; border-right: 1px solid #000; transform: skew(40deg, 0deg); z-index: 1; } .jet-deco-7::after { content: ''; display: block; position: absolute; top: calc(100% + 0px); right: 1.25vw; border-top: 1px solid #000; border-left: 1px solid #000; width: calc(50% - 2.5vw); height: 2.5vw; transform: skew(-40deg, 0deg); } /*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ 蛍光ペン ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/ /* 蛍光ペン1 */ span.jet-marker-1 { background: linear-gradient(transparent 60%, rgba(238,238,34,0.8) 60%); } /* 蛍光ペン2 */ span.jet-marker-2 { background: linear-gradient(transparent 60%, rgba(66,182,214,0.8) 60%); } /* 蛍光ペン3 */ span.jet-marker-3 { background: linear-gradient(transparent 60%, rgba(221,51,51,0.8) 60%); } /*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ アイコンズ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/ /******************* 時計 *******************/ .jet-clock{ position:relative; } .jet-clock::before { margin-right: 0.2em; font-family: "dashicons"; font-size:1.2em; content: "\f469"; vertical-align: sub; color: rgb(51,51,51)} /******************* 吹き出しアイコン *******************/ .jet-comments{ position:relative; } .jet-comments::before { margin-right: 0.2em; font-family: "dashicons"; font-size:1.2em; content: "\f130"; vertical-align: sub; color: rgb(51,51,51)} /******************* 注意! *******************/ .jet-warning{ position:relative; } .jet-warning::before { margin-right: 0.2em; font-family: "Material Icons"; font-size:1em; content: "\e002"; vertical-align: bottom; color: rgb(51,51,51)} /******************* ラベル *******************/ .jet-label{ position:relative; } .jet-label::before { margin-right: 0.2em; font-family: "Material Icons"; font-size:1.2em; content: "\e937"; vertical-align: sub; color: rgb(51,51,51)} /******************* はてなアイコン *******************/ .jet-question{ position:relative; } .jet-question::before { margin-right: 0.2em; font-family: "dashicons"; font-size:1.2em; content: "\f223"; vertical-align: sub; color: rgb(51,51,51)} /******************* タグ *******************/ .jet-tag{ position:relative; } .jet-tag::before { margin-right: 0.2em; font-family: "dashicons"; font-size:1.1em; content: "\f323"; vertical-align: sub; color: rgb(51,51,51)} /******************* チェックボックス *******************/ .jet-checkbox{ position:relative; } .jet-checkbox::before { margin-right: 0.2em; font-family: "Material Icons"; font-size:1.1em; content: "\e834"; vertical-align: sub; color: rgb(51,51,51)} /*///////////////////////////// /////////////////////////////// /////////////////////////////// WTT /////////////////////////////// /////////////////////////////// /////////////////////////////*/ @media screen and (min-width: 641px) and (max-width: 959px) { /******************* 装飾7 *******************/ .jet-deco-7::before { top: calc(100% + 0px); left: 8px; width: calc(50% - 15px); height: 16px; } .jet-deco-7::after { top: calc(100% + 0px); right: 8px; width: calc(50% - 16px); height: 16px; } /* WTTここまで */ } /*///////////////////////////// /////////////////////////////// /////////////////////////////// WT /////////////////////////////// /////////////////////////////// /////////////////////////////*/ @media screen and (min-width: 960px) and (max-width: 1279px) { /******************* 装飾1 *******************/ .jet-deco-1 { padding: 2px 16px; border-top-width: 4px; } /******************* 装飾2 *******************/ .jet-deco-2 { padding: 3px 16px; border-bottom-width: 4px; } /******************* 装飾3 *******************/ .jet-deco-3 { padding: 8px 24px; } /******************* 装飾4 *******************/ .jet-deco-4 { padding: 3px 16px 3px 8px; border-left-width:4px; } /******************* 装飾5 *******************/ .jet-deco-5{ padding: 8px 24px; } /******************* 装飾6 *******************/ .jet-deco-6 { padding: 8px 8px 8px 32px; } .jet-deco-6::after { width: 20px; height: 4px; } /******************* 装飾7 *******************/ .jet-deco-7::before { top: calc(100% + 0px); left: 8px; width: calc(50% - 15px); height: 16px; } .jet-deco-7::after { top: calc(100% + 0px); right: 8px; width: calc(50% - 16px); height: 16px; } /* WTここまで */ } /*///////////////////////////// /////////////////////////////// /////////////////////////////// PC /////////////////////////////// /////////////////////////////// /////////////////////////////*/ @media only screen and (min-width: 1280px) { /******************* 装飾1 *******************/ .jet-deco-1 { padding: 2px 16px; border-top-width: 4px; } /******************* 装飾2 *******************/ .jet-deco-2 { padding: 3px 16px; border-bottom-width: 4px; } /******************* 装飾3 *******************/ .jet-deco-3 { padding: 8px 24px; } /******************* 装飾4 *******************/ .jet-deco-4 { padding: 3px 16px 3px 8px; border-left-width:4px; } /******************* 装飾5 *******************/ .jet-deco-5{ padding: 8px 24px; } /******************* 装飾6 *******************/ .jet-deco-6 { padding: 8px 8px 8px 32px; } .jet-deco-6::after { width: 20px; height: 4px; } /******************* 装飾7 *******************/ .jet-deco-7::before { top: calc(100% + 0px); left: 8px; width: calc(50% - 15px); height: 16px; } .jet-deco-7::after { top: calc(100% + 0px); right: 8px; width: calc(50% - 16px); height: 16px; } /* PCここまで */ }