ファンサイト制作のためのアトリエ

/* ★文字コードをutf-8とする */
@charset "UTF-8";

/* ★bodyを綺麗に整える */
body {
 font-family: 'Lato', 'Noto Sans JP', sans-serif;
 font-size: 15px;
 font-weight: 400;
 font-style: normal;
 overflow: auto;
 margin: 10px;
 padding: 0;
 border-radius: 20px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
 background-color: white;
}

/* ★レスポンシブデザイン */
.feincontainer {
 width: 90%;
 margin: 0 auto;
 box-sizing: border-box;
}

@media (max-width: 600px) {
 .feincontainer {
  font-size: 0.875em;
  padding: 10px 0;
 }

 .responsive-iframe {
  width: 100%;
  height: calc(100vh - 20px);
 }
}

@media (min-width: 601px) {
 .feincontainer {
  width: 100%;
  max-width: 1200px;
  padding: 20px 150px;
 }

 .responsive-iframe {
  width: 80%;
  height: 80vh;
 }
}

/* ★箇条書きの余分な余白を削除する */
ul,
ol {
 margin-left: 0;
 padding-left: 25px;
}

/* ★手軽に余白を設定する */
div.spacer {
 height: 20px;
}

/* ★太字にして定義リストを読みやすくする */
dt {
 font-weight: bold;
}

dd {
 margin-left: 10px;
}

/* ★立体的な付箋を描く */
p.feintag {
 display: inline-block;
 position: relative;
 padding: .5em 1.4em .5em 1em;
 background-color: rgba(255, 204, 204, 0.8);
 color: #333333;
 font-weight: bold;
 text-align: left;
}

.right-align-container {
 text-align: right;
}

.feintag::before {
 position: absolute;
 bottom: -1px;
 right: 9px;
 z-index: -1;
 transform: rotate(5deg);
 width: 70%;
 height: 50%;
 background-color: rgba(208, 208, 208, 0.6);
 content: "";
 filter: blur(4px);
}

/* ★統一感を持たせた見出しを作る */
h1.background-waveimage-heading {
 background-image: url('../image/hone.png');
 background-size: contain;
 background-repeat: no-repeat;
 background-position: left;
 padding: 20px;
 font-size: 1.7em;
}

h1.background-waveimage-heading span {
 opacity: 0.7;
}

h2 {
 display: block;
 width: fit-content;
 background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0));
 padding: 10px;
 border-radius: 15px;
 margin-top: 30px;
 margin-bottom: 5px;
}

h2.sitemap_heading {
 display: block;
 width: fit-content;
 background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0));
 padding: 10px;
 border-radius: 15px;
 margin-top: 10px;
 margin-bottom: 5px;
}

h3 {
 display: block;
 width: fit-content;
 background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0));
 padding: 10px;
 border-radius: 15px;
 margin-top: 30px;
 margin-bottom: 5px;
 position: relative;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h3::after {
 content: '';
 position: absolute;
 bottom: -5px;
 left: 0;
 width: 100%;
 height: 3px;
 background: linear-gradient(to right, rgba(255, 0, 51, 0.5), rgba(255, 255, 255, 0.5));
 transform: scaleX(0);
 transform-origin: bottom right;
 transition: transform 0.5s ease-out;
}

h3.visible::after {
 transform: scaleX(1);
 transform-origin: bottom left;
}

.grastah3 {
 margin-top: 0;
}

h4 {
 display: block;
 width: fit-content;
 background: linear-gradient(to right, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0));
 padding: 10px;
 border-radius: 15px;
 margin-top: 30px;
 margin-bottom: 0;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ★h5見出しにオレンジ線を引く */
h5 {
 font-size: 110%;
 margin-top: 25px;
 margin-bottom: 0;
 padding-bottom: 5px;
 line-height: 1.2;
 color: rgba(0, 0, 0, 0.7);
 position: relative;
 display: inline-block;
}

h5::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 5px;
 background: linear-gradient(90deg, #ff6f61, #ffc107);
 border-radius: 2px;
}

/* ★見出しのように使う文字装飾を描く */
p.gra {
 display: block;
 width: fit-content;
 background: linear-gradient(to bottom, rgba(255, 153, 153, 0.3), rgba(255, 255, 255, 0.3));
 font-weight: bold;
 padding: 10px;
 border-radius: 15px;
 margin-top: 30px;
}

p.codegra {
 display: block;
 width: fit-content;
 background: linear-gradient(to bottom, rgba(153, 255, 153, 0.3), rgba(255, 255, 255, 0.3));
 font-weight: bold;
 padding: 10px;
 border-radius: 15px;
 margin-top: 30px;
}

/* ★フォントサイズやカラーを指定する */
span.small-orange-text {
 font-size: 0.9em;
 color: #cc3300;
}

span.small-text {
 font-size: 0.8em;
}

/* ★浮かび上がる表を作る */
table {
 width: 100%;
 border-collapse: collapse;
}

th,
td {
 border: 1px solid black;
 width: 50%;
 box-sizing: border-box;
 border-left: none;
 border-right: none;
}

tr.grasta_blue {
 background-color: #e0f7fa;
}

tr.grasta_green {
 background-color: #E0FFE0;
}

.boss-table th:nth-child(1),
.boss-table td:nth-child(1) {
 width: 30%;
}

.boss-table th:nth-child(2),
.boss-table td:nth-child(2) {
 width: 20%;
}

.boss-table th:nth-child(3),
.boss-table td:nth-child(3) {
 width: 50%;
}

tr.header-blue {
 background-color: #e0f7fa;
}

.weapon-table th:nth-child(1),
.weapon-table td:nth-child(1) {
 width: 20%;
}

.weapon-table th:nth-child(2),
.weapon-table td:nth-child(2) {
 width: 40%;
}

.weapon-table th:nth-child(3),
.weapon-table td:nth-child(3) {
 width: 40%;
}

caption {
 visibility: hidden;
 height: 0;
 overflow: hidden;
}

.custom-table-container {
 display: block;
 padding: 10px;
 border-radius: 15px;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
 margin: 10px 0;
}

/* ★画像によって大きさを使い分ける */
img.biggraphic {
 margin: 10px;
 display: block;
 width: 80%;
 height: auto;
 border-radius: 10px;
}

img.graphic {
 margin: 10px;
 display: block;
 width: 50%;
 height: auto;
 border-radius: 10px;
}

img.graphicmini {
 margin: 10px;
 display: block;
 width: 30%;
 height: auto;
 border-radius: 10px;
}

img.graphicsaki {
 margin: 10px;
 display: block;
 width: 50%;
 height: auto;
 border-radius: 10px;
}

img.right-image {
 float: right;
}

img.wallpaper {
 margin: 10px;
 display: block;
 width: 40%;
 height: auto;
 border-radius: 10px;
}

div.content {
 overflow: hidden;
}

/* ★フェードインとフェードアウトの画像アニメーション */
img.fade-in-out {
 opacity: 0;
 transition: opacity 1s ease-in-out;
}

img.fade-in-out.visible {
 opacity: 1;
}

/* ★グラスタ表の火力20倍の話に添える画像 */
.grastaimage {
 display: flex;
 justify-content: space-between;
 gap: 5px;
 border-radius: 10px;
}

.grastaimage img {
 max-width: 45%;
 height: auto;
 border-radius: 10px;
}

/* ★敢えて表の中に画像を入れる */
div.gtable {
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 border-radius: 10px;
}

.toptext {
 margin-bottom: 10px;
}

.bottomimage {
 display: block;
 max-width: 80%;
 height: auto;
 margin: auto;
}

/* ★画像を左右に並べる */
.horizontally-container {
 display: flex;
 border-radius: 10px;
}

img.horizontally {
 margin: 10px;
 width: 30%;
 height: auto;
}

/* ★サイトマップ用の目立つリンク */
.custom-link {
 color: #1A73E8;
 font-weight: bold;
 transition: color 0.3s ease;
}

.custom-link:hover {
 color: #00A2ED;
 text-decoration: underline;
}

/* ★デフォルトの青に少し手を入れたリンク */
a {
 color: #1A73E8;
}

a:hover {
 color: #00A2ED;
}

/* ★タブを作る */
.tabs-fein {
 display: flex;
 border-bottom: 1px solid #ccc;
}

.tab-fein {
 border: 1px solid #ccc;
 padding: 10px 20px;
 border-radius: 10px 10px 0 0;
 background-color: rgba(173, 216, 230, 0.3);
 cursor: pointer;
}

.tab-fein:not(:last-child) {
 margin-right: 5px;
}

.tab-fein:hover {
 background-color: rgba(173, 216, 230, 0.5);
}

.tab-fein.active {
 background-color: rgba(173, 216, 230, 0.7);
 font-weight: bold;
 border-bottom: 3px solid #007BFF;
}

.tab-pane-fein {
 position: absolute;
 width: 95%;
 opacity: 0;
 border: 1px solid #ccc;
 padding: 10px;
 border-radius: 5px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 transform: translateX(-100%);
 transition: transform 0.5s ease, opacity 0.5s ease;
}

.tab-pane-fein.active {
 position: static;
 opacity: 1;
 transform: translateX(0);
}

/* ★PythonのタブUIを装飾する */
.atelier-tab {
 display: inline-block;
 margin: 0 5px;
 padding: 10px 20px;
 border: 1px solid #ccc;
 cursor: pointer;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 background-color: rgba(144, 238, 144, 0.5);
}

.atelier-tab-content {
 display: none;
 padding: 20px;
 border-top: none;
 border: 1px solid #ccc;
 border-radius: 10px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 background-color: #fff;
}

.atelier-active-tab {
 background-color: rgba(144, 238, 144, 1);
}

.atelier-active-content {
 display: block;
}

/* ★隅に行くほど細く消えかかる罫線を作る */
hr.atelierflower {
 border: none;
 height: 10px;
 background: linear-gradient(to right,
   rgba(107, 142, 35, 0) 0%,
   rgba(107, 142, 35, 1) 20%,
   rgba(34, 139, 34, 0.5) 50%,
   rgba(107, 142, 35, 1) 80%,
   rgba(107, 142, 35, 0) 100%);
 position: relative;
 background-size: 100% 100%;
 border-radius: 50%;
 margin: 20px 0;
}

hr.atelierflower::before {
 content: "";
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 40px;
 background: radial-gradient(circle,
   rgba(34, 139, 34, 0.5) 20%,
   rgba(255, 255, 255, 0) 70%);
 border-radius: 50%;
}

/* ★タップするとチェックが変化する */
.inline-button {
 display: inline;
 font-size: 1rem;
 padding: 5px 10px;
 cursor: pointer;
 border: none;
 background-color: transparent;
}