/*-------------------
フォントの装飾
--------------------*/
body{
font-family: "segoe UI", 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, sans-serif !important;
}
.td-line-through {
text-decoration: line-through;
}
/*-------------------
テキスト装飾
--------------------*/
.underline_yellow {
background:linear-gradient(transparent 70%, #FFFF00 0%);
}
.note {
color: gray;
font-size: 12px;
}
/*-------------------
見出しの装飾
--------------------*/
h2 {
padding: 0.75rem 1.5rem;
color: #fff;
background: #400082;
-webkit-box-shadow: 5px 5px 0 #000000;
box-shadow: 5px 5px 0 #000000;
}
h3 {
padding: 0.75rem 1.5rem;
border-left: 8px solid #400082;
background: #f7f4eb;
}
h4 {
padding: 0.5rem 1rem;
border-left: 6px double #400082;
background: #f7f4eb;
}
h5 {
padding: 0.25rem 0.5rem;
border-bottom: 2px solid #000;
}
/*-------------------
リンクの装飾
--------------------*/
.entry-content a {
color: #0d64b5!important;
font-weight: bold;
}
/*-------------------
ボタンの装飾 共通部分
--------------------*/
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;/*rem算出をしやすくするために*/
}
.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
/*-------------------
共通ボタン
--------------------*/
.btn--common,
a.btn--common {
color: #fff !important;
background-color: #eb6100;
}
a.btn--common.btn--cubic {
border-bottom: 5px solid #9f000c;
}
a.btn--common.btn--cubic:hover {
margin-top: 3px;
border-bottom: 2px solid #9f000c;
}
a.btn--radius {
border-radius: 100vh;
}
/*-------------------
マイクロコピー
--------------------*/
p.closing-text {
display: flex;
justify-content: center;
align-items: center;
margin: 30px 0 10px 0;
}
.closing-text:before {
content: "";
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
display: inline-block;
border-style: solid;
border-width: 25px 4px 0 4px;
border-color: #f39335 transparent transparent transparent;
margin: 0 0.5em 0 0;
}
.closing-text .text {
font-size: 16px;
font-weight: bold;
text-align: center;
}
.closing-text:after {
content: "";
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
display: inline-block;
border-style: solid;
border-width: 25px 4px 0 4px;
border-color: #f39335 transparent transparent transparent;
margin: 0 0 0 0.5em;
}
.closing-text .point {
font-size: 18px;
color: #f39335;
}
/*-------------------
シンプルボックス
--------------------*/
.box-simple-purple {
border: 3px solid #400082;
padding: 1.2em 1em;
padding-top: 1.2em;
padding-right: 1em;
padding-bottom: 1.2em;
padding-left: 1em;
margin: 1em 2%;
border-radius: 4px;
}
.box-simple-orange {
border: 3px solid #eb6100;
padding: 1.2em 1em;
padding-top: 1.2em;
padding-right: 1em;
padding-bottom: 1.2em;
padding-left: 1em;
margin: 1em 2%;
border-radius: 4px;
}
/*-------------------
ポイント付きボックス
--------------------*/
.box-point {
background: #faf8ed;
border-radius: 0 15px 15px 15px;
position: relative;
margin: 50px 0 30px;
padding: 15px 20px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box-point:after {
background: #87EF08;
position: absolute;
content: '▼Point';
color: #fff;
font-weight: 700;
left: 0;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 8px 15px;
font-size: 12px;
line-height: 1;
letter-spacing: .05em;
}
/*-------------------
浮き出し風ボックス
--------------------*/
.box-ukidashi{
padding: 0.5em 1em;
margin: 1em 0;
background: #f4f4f4;
border-left: solid 6px #87EF08;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box-ukidashi p {
margin: 0;
padding: 0;
}
/*見出しボックス*/
.box-midashi{
padding:1.5em 0.25em 0.25em; /* ボックス内側余白 */
position:relative; /* 配置(ここを基準に)*/
border: 1px solid #400082; /* ボックスの線 (太さ・種類・色)*/
background-color:#f8edfc; /* ボックス背景色*/
}
.box-midashi .box-title {
background-color:#400082; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff ; /* タイトル文字色 */
padding: 7px 12px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/* 配置(ここを動かす) */
top: 0; /*上からの距離*/
left: 0; /*左からの距離*/
}
/*---------------------
引用ボックス
--------------------*/
blockquote {
position: relative;
padding: 10px 10px 10px 32px;
box-sizing: border-box;
font-style: italic;
color: #464646;
background: #e0e0e0;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -6px;
left: -15px;
content: "“";
font-family: sans-serif;
color: #e0e0e0;
font-size: 70px;
line-height: 1;
z-index: 2;
}
blockquote:after{
position: absolute;
content: '';
left: 0;
top: 0;
border-width: 0 0 40px 40px;
border-style: solid;
border-color: transparent #ffffff;
}
blockquote p {
position: relative;
padding: 0;
margin: 10px 0;
z-index: 3;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
/*-------------------
斜めボックス
--------------------*/
.box-naname {
position: relative;
padding: 3rem 1rem 1rem 1.5rem;
background:
linear-gradient(179deg, transparent 2rem, #f4f22e 0 100%);
}
.box-naname::before {
position: absolute;
top: 0;
left: 0;
padding: 0.7rem 1rem;
border-style: solid;
border-width: 0 3px 3px 0;
background-color: #333;
color: white;
content: "POINT";
}
.box-naname p {
line-height: 1.5;
}
/*---------------
シンプル背景ボックス
------------------*/
.dot-box {
color: #000000;
background: #f4f4f4;/*背景色*/
}
.dot-box p {
margin: 0 !important;
padding: 0 !important;
}
/*---------------
この記事を書いた人
------------------*/
.author-name {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 10px;
}
.author-box .author-name a {
text-decoration: none;
color: #333;
}
.author-box p {
margin-top: 0.3em;
line-height: 1.6;
}
.author-box p a {
text-decoration: none;
color: #008cee;
}
.author-box p a:hover {
text-decoration: underline;
color: #008cee;
}
.author-box .sns-follow-buttons a.follow-button {
font-size: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
margin-bottom: 4px;
margin-right: 8px;
background: none;
color: #fff;
}
.author-box a.follow-button span {
line-height: 40px;
}
.author-box a.follow-button span::before {
font-size: 22px;
}
.author-box .icon-twitter-logo::before {
font-family: FontAwesome;
content: "f099"
}
.author-box .icon-facebook-logo::before {
font-family: FontAwesome;
content: "f09a";
}
.author-box .icon-instagram-new::before {
font-family: FontAwesome;
content: "f16d";
}
.author-box .icon-hatebu-logo::before {
font-family: Verdana;
content: 'B!';
font-weight: bold;
}
.author-box .icon-google-plus-logo::before {
font-family: FontAwesome;
content: "f0d5";
}
.author-box .icon-youtube-logo::before {
font-family: FontAwesome;
content: "f167";
}
.author-box .icon-pinterest-logo::before {
font-family: FontAwesome;
content: "f231";
}
.author-box .icon-amazon-logo::before {
font-family: FontAwesome;
content: "f270";
}
.author-box .icon-github-logo::before {
font-family: FontAwesome;
content: "f09b";
}
.author-box .website-button { background-color: #47555c !important; }
.author-box .twitter-button { background-color: #1da1f2 !important; }
.author-box .facebook-button { background-color: #3b5998 !important; }
.author-box .hatebu-button { background-color: #2c6ebd !important; }
.author-box .google-plus-button { background-color: #dd4b39 !important; }
.author-box .instagram-button { background: #e1306c !important; }
.author-box .youtube-button { background-color: #ef1515 !important; }
.author-box .flickr-button { background-color: #0063dc !important; }
.author-box .pinterest-button { background-color: #bd081c !important; }
.author-box .line-button { background-color: #00c300 !important; }
.author-box .amazon-button { background-color: #ff9900 !important; }
.author-box .rakuten-room-button { background-color: #c42e7f !important; }
.author-box .github-button { background-color: #333 !important; }
.author-box .feedly-button { background-color: #2bb24c !important; }
.author-box .rss-button { background-color: #f26522 !important; }
.author-box .soundcloud-button { background-color: #ff7700 !important; }
#main .author-box {
border: none;
border-radius: 3px;
margin: 1.5em 0;
line-height: 1.4;
position: relative;
padding: 1.4% 2% 1.8% 0;
box-shadow: 0 5px 20px -5px rgba(105,115,131,.35);
}
#main .author-widget-name {
display: inline-block;
position: relative;
margin: 10px 0 0 -170px;
padding: 6px 12px;
border-radius: 20px;
background: #eaedf2;
color: #555;
font-size: 14px;
font-weight: 700;
z-index: 1;
}
#main .author-widget-name::before {
position: absolute;
content: '';
z-index: -1;
bottom: -30px;
left: 60px;
border: 15px solid transparent;
border-top: solid 30px #eaedf2;
transform: rotate(-40deg);
}
#main .author-thumb {
float: left;
margin: 0;
padding-top: 70px;
width: 200px;
text-align: center;
}
#main .author-thumb img {
border: solid 5px #eee;
width: 100px;
}
#main .author-content {
margin: -30px 0 0 200px;
padding-left: 30px;
border-left: 2px #eaedf2 dashed;
}
#main .author-box .author-name {
line-height: 1;
}
#main .author-box p {
font-size: .95em;
}
@media screen and (max-width: 480px){
#main .author-box {
margin: 1em 10px;
padding: 16px;
text-align: center;
border-radius: 10px;
}
#main .author-widget-name {
margin: 0;
}
#main .author-widget-name::before {
left: 50px;
}
#main .author-thumb {
float: none;
margin: 0;
padding-top: 20px;
width: 100%;
}
#main .author-box .author-name {
font-size: 14px;
}
#main .author-content {
margin: 10px 0 0 0;
padding-left: 0;
border: none;
}
#main .author-box p {
font-size: 14px;
text-align: center;
}
#main .author-box .sns-follow-buttons {
justify-content: center;
}
#main .author-box {
border-radius: 10px;
}
.author-box p {
margin-bottom: 5px;/* この記事を書いた人>文字下の長さ */
}
.author-description {
margin-bottom: 5px;/* この記事を書いた人の下の長さ */
}
}
/*---------------------
一般テーブルのスタイル
--------------------*/
.basic-table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
}
.basic-table th {
padding: 10px;
background: #3d1480;
border: solid 1px #969696 !important;
color: #ffffff;
}
.basic-table td {
padding: 10px;
border: solid 1px #969696 !important;
}
.basic-table td:first-child {
background: #8363db;
color: #ffffff;
}
/*---------------------
スクロールテーブルのスタイル
--------------------*/
.scrollable-table {
overflow: initial!important;
}
.scroll-table {
overflow: auto;
}
table {
font-size: 15px;
}
table caption {
font-size:15px!important;
}
div.fixed-box-yoko-tate {
height: 550px;
overflow: auto;
}
table.post-table {
border-collapse:collapse;
white-space: nowrap;
border-top: 0px;
border-bottom: 0px;
}
table.post-table .fixed01,
table.post-table .fixed02 {
position: sticky;
top: 0;
left: 0;
}
table.post-table .fixed01:before, table.post-table .fixed02:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
}
table.post-table .fixed01 {
z-index: 2;
}
table.post-table .fixed02 {
z-index: 1;
}
.post-table th, .post-table td {
border:1px solid #aaa!important;
width: 20%;
min-width: 200px;
padding: 10px;
height: 60px;
}
.post-table th {
vertical-align: middle;
}
.table-l-headline th {
background: #6800B3;
color: #fff;
}
.table-l-headline th a {
color: #fff!important;
}
/* tab */
@media only screen and (max-width: 768px) {
.post-table th, .post-table td {
min-width: 20px;
}
}
/************************************
吹き出し2
************************************/
/* 吹き出し 全体*/
.talking {
margin-bottom:2em;
position:relative;
}
.talking:before , .talking:after {
clear:both;
content:"";
display:block;
}
/*アイコン*/
.talking figure {
width:60px; /*アイコンの横幅*/
height:60px; /*アイコンの縦幅*/
}
.talking-left_icon {
float:left;
margin-right:20px; /*アイコンの右の余白(左の吹き出し)*/
}
.talking-right_icon {
float:right;
margin-left:20px; /*アイコンの左の余白(右の吹き出し)*/
}
.talking figure img {
width:100%;
height:100%;
margin:0;
border:2px solid #aaa;
border-radius:50%; /*アイコンの角丸*/
}
/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
padding:2px 0 0;
font-size:12px;
text-align:center;
}
/*吹き出しのセリフ部分*/
.talking-left , .talking-right {
position:relative;
padding:10px;
border-style:solid; /*枠線の線種*/
border-radius:10px; /*セリフを入れる部分の角丸*/
max-width: calc(100% - 80px);
}
.talking p {
margin:0;
}
.talking p :last-child {
margin:0;
}
/*---左の吹き出し---*/
.talking-left {
float:left;
border-width:2px; /*枠線の太さ*/
border-color:lightpink; /*枠線の色*/
background:lightpink; /*背景色*/
}
/*左の吹き出し 三角*/
.talking-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid lightpink; /*三角の線になる部分*/
top: 15px;
left: -22px;
}
.talking-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid lightpink;
top: 15px;
left: -19px;
}
/*---右の吹き出し---*/
.talking-right {
float:right;
border-width:2px; /*枠線の太さ*/
border-color:khaki; /*枠線の色*/
background:khaki; /*背景色*/
}
/*右の吹き出し 三角*/
.talking-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid khaki; /*三角の線になる部分*/
top: 15px;
right: -22px;
}
.talking-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid khaki;
top: 15px;
right: -19px;
}
/************************************
吹き出し1
************************************/
/*=========
共通CSS
=========*/
:root {
--chat-width-max: 500px;/* 吹き出しの横幅最大値, 不要ならこの一行削除 */
--chat-margin: 20px;/* 前後要素との距離 */
--chat-icon-size: 80px;/* アイコン画像のサイズ */
--chat-text-padding: 10px 15px;/* テキスト内余白 (上下10px 左右15px) */
--chat-text-font-size: 14px;/* テキスト文字大きさ */
}
.chat {
display: flex;
align-items: flex-start;
width: 100%;
margin: var(--chat-margin) auto;
}
.chat__r {
justify-content: flex-end;
}
.chat__r .chat__icon {
order: 1;
}
.chat__icon {
flex-shrink: 0;
width: var(--chat-icon-size);
height: var(--chat-icon-size);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.chat__text {
position: relative;
max-width: var(--chat-width-max, initial);
padding: var(--chat-text-padding);
font-size: var(--chat-text-font-size);
}
/* コーナー型吹き出し */
:root {
--corner-chat-icon-bgcolor: rgb(240,240,240);/* アイコン背景色(透過PNGへの配慮) */
--corner-chat-icon-bgimage-left: url(画像URL);/* 左画像 */
--corner-chat-icon-bgimage-right: url(画像URL);/* 右画像 */
--corner-chat-text-radius: 12px;
--corner-chat-text-bgcolor: #FFEAF4;/* テキスト背景色 */
--corner-chat-text-color: rgb(51,51,51);/* テキスト文字色 */
}
.corner__chat {
align-items: flex-end;
gap: 0 10px;
position: relative;
}
.corner__chat .chat__icon {
width: 80px;
height: 80px;
margin-bottom: 6px;
border-radius: 50%;
background-color: var(--corner-chat-icon-bgcolor);
background-image: var(--corner-chat-icon-bgimage-left);
}
.corner__chat.chat__r .chat__icon {
background-image: var(--corner-chat-icon-bgimage-right);
}
.corner__chat .chat__text {
min-height: 60px;
border-radius: var(--corner-chat-text-radius);
border-bottom-left-radius: 0;
background: var(--corner-chat-text-bgcolor);
color: var(--corner-chat-text-color);
}
.corner__chat.chat__r .chat__text {
border-radius: var(--corner-chat-text-radius);
border-bottom-right-radius: 0;
}
.corner__tail {
display: flex;
align-items: flex-end;
position: absolute;
bottom: 0px;
left: 54px;
width: 38px;
height: 38px;
color: var(--corner-chat-text-bgcolor);
overflow: hidden;
}
.corner__tail svg {
width: 100%;
height: auto;
margin-bottom: -1px;
}
.chat__r .corner__tail {
left: auto;
right: 54px;
}
.chat__r .corner__tail svg {
transform: scale(-1,1);
}
/************************************
吹き出し3
************************************/
/*================
左アイコン
================*/
.f-container {
width: 100%;
margin-bottom: 30px;
display: flex;
padding: 1.25em .25em 0.25em;
}
.f-icon img {
max-height: 120px;
margin: 0 auto;
border-radius: 50%;
border: 3px solid #000000;
box-shadow: 3px 3px 3px #C6C6C6;
}
.f-icon {
width: 25%;
padding : 0 20px 0 0;
text-align: center;
margin-top: -5px;
}
.f-text-box {
width: 70%;
padding: 10px;
border: 2px solid #000000;
box-shadow: 3px 3px 3px #C6C6C6;
position: relative;
background: #fff;
}
.f-text-box p {
margin: 0;
padding: 0;
line-height: 28px;
}
.f-text-box::before {
content: '';
position: absolute;
left: -31px;
top: 20%;
border-top: 15px solid transparent;
border-right: 15px solid #000000;
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
@media only screen and (max-width: 769px) {
.f-text-box p {
line-height: 23px;
letter-spacing: 1px;
font-size: 13px;
}
.f-text-box {
width: 73%;
}
.f-icon {
width: 27%;
}
}
/*================
右アイコン
================*/
.f-container-r {
width: 100%;
margin-bottom: 30px;
display: flex;
}
.f-icon-r img {
max-height: 120px;
margin: 0 auto;
border-radius: 50%;
border: 3px solid #000000;
box-shadow: 3px 3px 3px #C6C6C6;
}
.f-icon-r {
width: 25%;
padding : 0 0 0 20px;
text-align: center;
margin-top: -5px;
}
.f-text-box-r {
width: 70%;
padding: 10px;
border: 2px solid #000000;
box-shadow: 3px 3px 3px #C6C6C6;
position: relative;
background: #fff;
}
.f-text-box-r p {
margin: 0;
padding: 0;
line-height: 28px;
}
.f-text-box-r::before {
content: '';
position: absolute;
right: -31px;
top: 20%;
border-top: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #000000;
}
@media only screen and (max-width: 769px) {
.f-text-box-r p {
line-height: 23px;
letter-spacing: 1px;
font-size: 13px;
}
.f-text-box-r {
width: 73%;
}
.f-icon-r {
width: 27%;
}
}
/************************************
レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
/*必要ならばここにコードを書く*/
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
}
/*480px以下*/
@media screen and (max-width: 480px){
h2 {
font-size: 20px;
}
h3,h4,h5 {
font-size: 18px;
}
table {
font-size:13px!important;
}