@charset "UTF-8";
/*
	Theme Name: FFXIV ARMOURY COLLECTION
	Author: Navarre Sadler
*/

/* Google Fonts */
@font-face {
  font-family: 'Oranienbaum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/oranienbaum/v15/OZpHg_txtzZKMuXLIVrx-0zg5E3VdYHd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ルート */
:root {

	/* ヘッダー高さ */
	--header-height: 48px;

	/* ウィジット高さ */
	--widget-height: 48px;

	/* ナビゲーション高さ */
	--navigation-height: 90px;

	/* 著作権表記高さ */
	--copyrights-height: 90px;

	/* タイトル高さ */
	--title-height: 48px;

	/* サイドバー幅 */
	--aside-width: 320px;

	/* 画像サイズ */
	--attire-image-size: 100%;

	/* ジョブアイコンサイズ */
	--attire-job-icon-size: 24px;
	
	/* タイトル */
	--title-color: white;
	
	/* テキスト */
	--text-color: #a1a1a6;
	
	/* ウィジットタイトルテキスト */
	--widget-title-color: rgb(134,134,139);

	/* 背景 */
	--background-color: #101010;
	
	/* タイトル背景 */
	--title-background-color: black;

	/* フッター背景 */
	--footer-color: rgb(29, 29, 31);
	
	/* ボーダー */
	--border-color: rgb(66,66,69);

	/* 画像マスク */
	--article-mask: rgba(0,0,0,0.33);

	/* 強調色 */
	--highlight-color: rgb(0,113,227);

	/* 透過色（白１） */
	--white-alpha-color-1: rgba(255,255,255,0.25);
	
	/* 透過色（白２） */
	--white-alpha-color-2: rgba(255,255,255,0.5);

	/* 開閉アニメーション */
	--animation: 0.2s linear;
}

a, article, aside, body, div, footer, header, hr, h1, h2, h3, img, input, li, main, nav, p, ul {
	margin: 0px;
	padding: 0px;
}

/* レイアウト */
body {
	background-color: var(--background-color);
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	font-family: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
}

header {
	background-color: var(--title-background-color);
	height: var(--header-height);
	width: 100%;
	z-index: 4;
}

#single-title {
	border-bottom: 1px solid var(--border-color);
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 3;

	transform: translateY(-60px);
    transition: transform .23s ease;
}
#single-title.open {
	transform: translateY(0px);
}
#single-title h2 {
	color: var(--title-color);
	font-size: 14px;
	line-height: var(--header-height);
	margin-left: 14px;
}

#single-title .fa-solid {
    font-size: 16px;
    color: white;
    position: absolute;
    top: 12px;
    right: 14px;
    background-color: var(--highlight-color);
    height: 24px;
    line-height: 24px;
    width: 48px;
    text-align: center;
    border-radius: 14px;
}

#contents {
	background-color: var(--background-color);
	margin-left: auto;
	margin-right: auto;
	
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(var(--attire-image-size), 100%), 1fr));
	row-gap: 45px;
	padding-top: 30px;
	padding-bottom: 30px;
}

article {
	position: relative;

    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 0.5s, visibility 0.5s, transform 0.5s;
}
article.load {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

section#attire article {
	font-size: 16px;
	margin-top: 30px;
}

section#attire img {
	display: block;
	width: 100%;
	height: 100%;
}

section#job-class article {
	display: grid;
	font-size: 16px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	margin-top: 30px;
	margin-left: 23px;
	margin-right: 23px;
}

section#job-class article p {
	display: table-cell;
	height: 30px;
}

section#spec article {
	display: grid;
	font-size: 16px;
	grid-template-columns: 1fr 1fr;
	row-gap: 30px;
	margin-top: 30px;
	margin-left: 23px;
	margin-right: 23px;
}

section#spec article div p {
	height: 30px;
	line-height: 30px;
}

section#spec article div p:first-child {
	color: var(--title-color);
	font-weight: bold;
	width: 150px;
}

section#item .wrap {
	display: flex;
	flex-flow: column;
	row-gap: 30px;
}

section#item article {
	display: grid;
	font-size: 16px;
	grid-template-columns: 124px 1fr;
	row-gap: 30px;
	margin-top: 30px;
	margin-left: 23px;
	margin-right: 23px;
}

section#item article .item-image {
	grid-row: 1;
	grid-column: 1;
	position: relative;
	height: 124px;
}

section#item article .item-image img {
	position: absolute;
}

section#item article .item-image img.item {
	width: 124px;
	height: 124px;
}

section#item article .item-image img.cover {
	width: 148px;
	height: 148px;
	top: -6px;
	left: -12px;
}

section#item article .item-name {
	grid-row: 2;
	grid-column: 1 / 3;
}

section#item article .item-name p {
	line-height: 30px;
}

section#item article .item-name p.region-name {
	color: var(--title-color);
	font-weight: bold;
}

section#item article .item-link {
	grid-row: 3;
	grid-column: 1 / 3;
	display: flex;
	column-gap: 10px;
	padding-top: 10px;
	height: 40px;
}

section#item article .item-link a {
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
}

section#item article .item-link-1 {
	background-color: black;
}

section#item article .item-link-2 {
	background-color: #F77;
}

section#item article .item-link img {
	height: auto;
	vertical-align: bottom;
	width: 100%;
}

section#relation article, section#similar article {
	position: relative;
	margin-top: 0px;
}

section#relation .wrap, section#similar .wrap {
	margin-top: 30px;
}

section#relation .attire-image, section#similar .attire-image {
	display: block;
	width: 100%;
	height: 100%;
}

footer {
	background-color: var(--footer-color);
	color: var(--title-color);
	display: block;
	text-align: center;
	
	position: sticky;
	top: 100vh;
}

/* タグ */
a {
	color: var(--title-color);
	cursor: pointer;
	text-decoration: none;
}

h1 {
	font-family: 'Oranienbaum', serif;
	font-size: 19px;
	letter-spacing: 1px;
	line-height: var(--header-height);
	margin-left: 16px;
}

/* ID */
#copyright {
	font-size: 12px;
	font-weight: bold;
	line-height: var(--copyrights-height);
}

#navigation {
	display: flex;
	width: 100%;
}

#navigation .left, #navigation .center, #navigation .right {
	flex: 1;
	padding-left: 0px;
}

#navigation a {
	display: block;
	font-size: 16px;
	line-height: 45px;
	text-align: center;
}

#navigation i {
	margin-right: 10px;
}

#navigation .center {
	display: none;
}

#link {
	padding-top: 20px;
	text-align: left;
}

#link .left, #link .center, #link .right {
	padding-left: 20px;
}

#link a {
	display: block;
	font-size: 16px;
	line-height: 45px;
}

/* クラス */
.title {
	color: var(--title-color);
	font-size: 16px;
	font-weight: bold;
	position: sticky;
	top: var(--title-height);
	z-index: 2;
}
.title div {
	border-bottom: 1px solid #424245;
	margin-left: 23px;
	margin-right: 23px;
	padding-top: 15px;
	padding-bottom: 15px;
	position: relative;
	top: 0px;
}
.title.no-sticky {
	position: relative;
	top: 0px;
}

#attire .title {
	font-size: 16px;
	margin-left: 20px;
	margin-right: 20px;
}

.model-name {
	color: var(--title-color);
	font-size: 18px;
	position: absolute;
	bottom: 5px;
	right: 10px;
}

.attire-information {
	background-color: var(--article-mask);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 100%;
}
.attire-information h2 {
	font-size: 1em;
	margin: 10px;
}
.attire-information p {
	margin: 10px;
}
.attire-information hr {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}
.attire-job-icon {
	height: 25px;
	margin: 10px;
	display: flex;
	justify-content: center;
	column-gap: 5px;
}

/* 最新パッチ */
.attire-latest {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 16px;
	height: 16px;
}

/* Newマーク */
.attire-new {
	color: red;
	display: flex;
	flex-direction: column;
	font-size: 16px;
	height: 50%;
	position: absolute;
	top: 50%;
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* ぼかし */
.blur {
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

/* 固定ページ用 */
.page h3 {
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 40px;
}

.page h4 {
	color: white;
	font-size: 16px;
	margin-top: 0px;
	margin-bottom: 10px;
}

.page section {
	overflow-wrap: break-word;
	padding-left: 20px;
	padding-right: 20px;
}

.page article {
	margin-bottom: 40px;
}

.page p {
	font-size: 16px;
	line-height: 30px;
}

.page ul {
	font-size: 16px;
	line-height: 30px;
	margin-left: 20px;
}

.page table {
	border-spacing: 0px;
	border-collapse: collapse;
	color: white;
	font-size: 16px;
	margin-bottom: 20px;
	width: 100%;
}

.page table td {
	line-height: 40px;
	border: 2px solid var(--background-color);
	padding-left: 10px;
}

.page table .num {
	width: 20%;
	text-align: center;
	padding-left: 0px;
}

.tank {
	background-color: #2d3a80;
}
.healer {
	background-color: #346624;
}
.dps {
	background-color: #732828;
}
.hand {
	background-color: #4e328f;
}
.land {
	background-color: #8f7832;
}


/* Contact Form 7 */
.wpcf7 p {
	margin-bottom: 20px;
}

.wpcf7 .wpcf7-text {
	line-height: 40px;
	width: 100%;
}

.wpcf7 .wpcf7-textarea {
	height: 400px;
	line-height: 20px;
	width: 100%;
}

.wpcf7 .wpcf7-submit {
	display: block;
	width: 100px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
}

.wpcf7 .wpcf7-spinner {
	display: none;
}

.wpcf7 .wpcf7-response-output {
	font-size: 16px;
}

/* アドセンス */
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

.ads-post-display, .ads_post_article {
	margin-top: 30px;
	width: 100%;
}

.ads-footer {
	padding-top: 20px;
	width: 100%;
}

@media screen and (min-width: 872px) {

.ads-post-display, .ads_post_article {
	margin-top: 0px;
	width: 100%;
}

.ads-footer {
	padding-top: 30px;
	width: 100%;
}

section#ads1 h3, section#ads2 h3, section#ads3 h3 {
	display: none;
}

/* 各種変数 */
:root {

	/* タイトル高さ */
	--header-height: 60px;

	/* 画像サイズ */
	--attire-image-size: 872px;
}

/* レイアウト */
header {
	text-align: center;
}

#single-title h2 {
	font-size: 20px;
    margin: 0 auto;
    max-width: 980px;
    padding: 0 22px;
    position: relative;

	max-width: var(--attire-image-size);
}

#single-title .fa-solid {
    top: 18px;
    right: 22px;
}

#contents {
	max-width: var(--attire-image-size);
}

section#job-class, section#spec, section#item, section#relation, section#similar {
	border-top: 1px solid #424245;
	padding-top: 50px;
	display: grid;
	grid-template-columns: 215px 1fr;
}

section#ads1, section#ads2, section#ads3 {
	border-top: 1px solid #424245;
	padding-top: 50px;
}

section#job-class h3, section#spec h3, section#item h3, section#relation h3, section#similar h3 {
	border: none;
}

section#job-class article, section#spec article, section#item article, section#relation article, section#similar article {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

section#job-class article {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

section#item article {
	margin-bottom: 30px;
}

section#relation .wrap, section#similar .wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 0px;
}

/* タグ */
h1 {
	font-size: 24px;
	letter-spacing: 4px;
	margin: 0px;
}

/* ID */
#navigation a {
	font-size: 18px;
}

#navigation a {
}

#navigation .center {
	display: block;
}

/* クラス */

.title, #attire .title {
	font-size: 20px;
	margin-left: 0px;
	margin-right: 0px;
}
.title div {
	border: none;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	position: sticky;
	top: calc(var(--header-height) + 20px);
}


/* 固定ページ用 */
.page h4 {
	font-size: 20px;
}

.page section {
	font-size: 16px;
	padding-left: 0px;
	padding-right: 0px;
}

}

@media screen and (min-width: 1024px) {

/* 各種変数 */
:root {

}

#link {
	display: flex;
	max-width: var(--attire-image-size);
	margin-left: auto;
	margin-right: auto;
}

#link .left, #link .center, #link .right {
	flex: 1;
	padding-left: 0px;
}

}