@charset "UTF-8";
/* CSS Document */
/**
 * ***************************************
 * ページ全体に関わるCSSの設定
 * ***************************************
 */
html *,
::before,
::after {
	box-sizing: border-box;
}
html {
	font-size: 16px;
	line-height: 1.85;
}
@media (min-width: 768px) {
	html {
		font-size: 16px;
		line-height: 1.85;
	}
}
body {
    font-family: source-han-sans-japanese, sans-serif;
    font-weight: 200; /* 源の角ゴシック JPのレギュラーウェイトを指定 */
    margin: 0;
}
@media (min-width: 768px) {
	body {
		margin: 10px 0 0 0;
    }
}
/* 不明な余白を隠す */
.overflow-hidden {
	overflow: hidden;
}
/* おもな太字タグのフォントウェイト設定 */
th, strong {
  font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
	font-family: fot-tsukuardgothic-std, sans-serif; /* 筑紫A丸ゴシックのボールドウェイトを指定 */
	font-weight: 400;
}
h1 {
	font-size: 26px;
}
@media (min-width: 768px) {
	h1 {
		font-size: 30px;
	}
}
h2 {
	display: block;
	margin-top: 48px;
	font-size: 24px;
	color: #f8b600;
}
@media (min-width: 768px) {
	h2 {
		font-size: 26px;
	}
}
h3 {
	display: block;
	margin-top: 48px;
	font-size: 20px;
	font-weight: bold;
}
@media (min-width: 768px) {
	h3 {
		font-size: 20px;
	}
}
h4 {
	display: block;
	margin-top: 48px;
	font-size: 16px;
	font-weight: bold;
}
h4::before {
	font-family: 'Font Awesome 5 Free';
	content: "\f054";
	font-size: 16px;
	color: #f8e58c;
	margin-right: .25rem;
}
h5 {
	display: block;
	margin: 48px 0 1.5rem 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
}
h5::before {
	display: inline-block;
	margin-right: .2rem;
	font-family: 'Font Awesome 5 Free';
	content: "\f111";
	font-weight: 700;
	font-size: 14px;
}
@media (min-width: 768px) {
	h4 {
		font-size: 18px;
	}
}
/* マーカー */
mark {
	background: linear-gradient(transparent 50%,#ffff7c 50%);
}
/* ベースのリンクカラー */
a {
  color: #3165F1;
}

/* レスポンシブイメージと画像下スペース防止 */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
/* ボタン装飾 */
.btn {
	background-color: #f8e58c;
	margin: 0 auto;
	padding: 15px 48px;
	width: 100%;
	height: auto;
}
.btn a {
	display: flex;
	color: #333;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.btn:hover {
	opacity: .8;
}
@media (min-width: 768px) {
	.btn {
		width: 250px;
		height: auto;
	}
	.action-container .btn {
		margin-top: 32px;
		text-align: center;
		vertical-align: center;
	}
}
/* small */
.small {
	font-size: 12px;
}
/* ul,ol */
ul,
ol {
	margin: 32px 0;
}
.header-nav ul,
.header-nav li,
.toc ul,
.toc-main ol,
.normal-text ul,
.check-list ul {
	margin: 0;
}
/* li */
li {
	margin-bottom: .75rem;
}
.toc li {
	margin-bottom: 0;
}
/**
 * ***************************************
 * ヘッダー
 * ***************************************
 * 
 * ヘッダーコンテナ
 */
.page-header {
	border-bottom: 1px solid #d8d8d8;
}
@media (min-width: 768px) {
	.header-container {
		margin: 0 auto;
		padding: 0 20px;
		max-width: 1040px;
	}
}
/**
 * ---------------------------------------
 * ヘッダーモジュール
 */

/* ヘッダーロゴとモバイルナビボタン */
.site-title {
	display: block;
	position: relative;
}
.site-title .header-logo {
	display: grid;
	place-items: center;
	margin: 0 1rem;
}
.site-title .navbtn {
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translatey(-22px);
}
@media (min-width: 768px){
	.site-title {
		display: block;
		padding: 30px 0 0 0; 
	}
	.header-nav.collapse {
		margin-top: 48px;
	}
}

/* ヘッダーロゴ */
.header-logo {
	display: grid;
	color: #333;
	place-items: center;
	margin: 0;/* h1のデフォルト設定オフ */
	padding-left: 15px;
	font-size: 0;/* 画像上下の余白を消すためh1の設定オフ */
	line-height: 0;/* 画像上下の余白を消すためh1のサイズオフ */
}
.header-logo img {
	width: 140px;
}
@media (min-width : 768px) {
	.header-logo {
		position: absolute;
		top: 0;
		left: 15px;
	}
	.header-logo img {
		width: 185px;
	}
}
/* モバイル向けボタン */
.navbtn {
	display: block;
	width: 44px;
	height: 44px;
	background-image: url("../images/nav-mobile-open.svg");
	background-repeat: no-repeat;
	background-position: center center;
}
.navbtn.close {
	background-image: url("../images/nav-mobile-close.svg");
}
@media (min-width: 768px) {
	.navbtn {
		display: none;
	}
}
/* コールトゥアクション */
.site-title {
	padding: .5rem 0;
}
.site-title .call-to-action {
	display: inline-block;
	width: auto;
	height: 100%;
	margin: 0;
	padding: .5rem 1rem;
	position: absolute;
	top: 0;
	right: 0;
	background: #f8b600;
	font-size: 10px;
}
.site-title .cta-pc {
	display: none;
}
@media (min-width: 768px) {
	.site-title .cta-pc {
		display: block;
	}
	.site-title .cta-sp {
		display: none;
	}
}
.site-title .call-to-action a {
	display: block;
	padding-top: .75rem;
	text-decoration: none;
	color: #fff;
}
.site-title .call-to-action:hover {
	opacity: .8;
}
@media (min-width: 768px) {
    .site-title .call-to-action {
		width: 180px;
		height: 50px;
	    display: inline-block;
		position: absolute;
		top: 15%;
		right: .75rem;
		background: #f8b600;
		border-radius: 5px;
		text-align: center;
    }
    .site-title .call-to-action a {
		display: inline-block;
		position: absolute;
		top: 30%;
		right: 15%;
		margin: 0 auto;
		padding: 0;
		color: #fff;
		text-decoration: none;
		font-size: 12px;
    }
    .site-title .call-to-action:hover {
		opacity: .8;
    }
}
/* ヘッダーナビゲーション */
.header-nav {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.header-nav small {
	font-size: 10px;
}
.header-nav.collapse {
	display: none;
}
.header-nav li a {
	display: block;
	margin-top: 0;
	padding: 20px 30px;
	border-bottom: 1px solid #d8d8d8;
	background: #fef4d9;
	color: #333333;
	text-decoration: none;
}
.header-nav li a:hover {
	opacity: .5;
}
@media (min-width: 768px){
	.header-nav {
		display: flex !important;
		flex-direction: row;
		justify-content: flex-end;
	}
.header-nav li a {
    padding: 6px 20px 2px 20px;
    border-top: none;
    border-bottom: 4px solid transparent;
    background: none;
	text-align: center;
  }
.header-nav li a:hover {
	border-bottom: 4px solid #f8b600;
	background: none;
	}
}
/**
* ****************************************
* パンくずリスト
* ****************************************
* パンくずリストコンテナ
*/
.breadcrumb {
		display: block;
	}
	.bc-container {
		margin: 0 auto;
		padding: 12px 20px;
		max-width: 1040px;
	}
@media (min-width: 768px) {
	.breadcrumb {
		background: #dcdcdc;
	}
}
/**
* ---------------------------------------
* パンくずリストモジュール
*/
	.bc-nav {
		display: flex;
		flex-direction: row;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.bc-nav li {
		font-size: .75rem;
		color: #9a9a9a;
	}
	.bc-nav li::after {
		padding: 0 5px;
		font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f054";
	}
	.bc-nav li a {
		color: #9a9a9a;
	}
	.bc-nav li a:hover {
		opacity: .8;
	}
/**
 * ***************************************
 * ページ下部
 * ***************************************
 *
 * ページ下部コンテナ
 */
.page-bottom {
	background-image: url(../images/bg-contact.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.bottom-container {
	display: flex;
	flex-direction: column;
	padding: 44px 4% 44px 4%;
	
}
@media (min-width: 768px) {
	.bottom-container {
	margin: 0 auto;
	padding: 60px 20px 60px 20px;
	max-width: 1040px;
  }
}

/*
* ----------------------------------------
* ページ下部モジュール
*/
.bottom-title {
	color: #f8b600;
	text-align: center;
	margin-bottom: 16px;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
}
.text-contact {
	margin: 0 auto;
}
.bottom-text {
	display: inline-block;
	color: #fff;
    text-align: left;
    margin-bottom: 64px;
}
.bottom-title .small-title {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 12px;
}
/**
 * ***************************************
 * フッター
 * ***************************************
 *
 * フッターコンテナ
 */
.page-footer {
	background-color: #000;
}
.footer-container {
	padding: 60px 4%;
}
@media (min-width: 768px) {
	.footer-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 60px 20px;
	}
}
/**
 * ---------------------------------------
 * フッターモジュール
 */
/* ロゴ */
.footer-logo {
	margin-bottom: 30px;
	text-align: center;
}
.footer-logo img {
	width: 250px;
}
/* フッターナビゲーション① */
.footer-nav1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 30px 0;
	padding: 0;
	list-style: none;
}
.footer-nav1 li {
	margin: 0 0 2rem 0;
	font-size: .875rem;
}
.footer-nav1 li a {
	color: #fff;
	text-decoration: none;
}
.footer-nav1 li a:hover {
	color: #9a9a9a9a;
	text-decoration: underline;
}
@media (min-width: 769px) {
	.footer-nav1 {
		flex-direction: row;
		justify-content: center;
	}
	.footer-nav1 li {
		margin: 0 1rem;
	}
}
/* ナビゲーション② その他のリンク */
.footer-nav2 {
	display: flex;
	justify-content: center;
	margin: 0 0 20px 0; /*ulのデフォルト設定オフ*/
	padding: 0; /*ulのデフォルト設定オフ*/
	list-style: none; /*ulのデフォルト設定オフ*/
}
.footer-nav2 li {
	margin: 0 .75rem 3px .75rem;
	font-size: .75rem;
}
.footer-nav2 li a {
	color: #fff;
	text-decoration: none;
}
.footer-nav2 li a:hover {
	color: #9a9a9a;
	text-decorationo: underline;
}
/* コピーライト */
copyright {
	display: block;
	margin: 0 20px;
	padding: 0;
	color: #fff;
	text-align: center;
	font-size: .75rem;
}
/**
 * ***************************************
 * メインコンテナ
 * ***************************************
 */
/**
 * ***************************************
 * ［index.html］ホームページ
 * ***************************************
 */
/* ホーム - ヒーローコンテナ */
.hero {
	width: 100%;
	height: 100vh;
	background-image: url(../images/bg-top.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-atachment: fixed;
	position: relative;
}
.hero-container {
	padding: 80px 4% 96px 4%;
}
@media (min-width: 768px) {
	.hero {
		width: 100%;
		margin: 0 auto;
		padding: 60px 20px;
	}
}
/* ホーム -コンセプトコンテナ */
.concept-container {
	padding: 80px 4% 96px 4%;
}
@media (min-width: 768px) {
	.concept-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 60px 20px;
	}
}
/* ホーム -アバウトコンテナ */
.about-container {
	padding: 80px 4% 96px 4%;
	background-color: #f4f4f4;
}
@media (min-width: 768px) {
	.about-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 60px 20px;
	}
}
/* ホーム -アクションコンテナ */
.action-container {
	padding: 80px 4% 96px 4%;
	background-image: url("../images/bg-top2.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
@media (min-width: 768px) {
	.action-container {
		max-width: 1040px;
		margin: 20px auto;
		padding: 56px 20px 96px 20px;
		background-position: right center;
	    background-size: 60% auto;
		position: relative;
	}
}
/* ホーム -ブログコンテナ */
.blog-container {
	padding: 80px 4% 96px 4%;
	text-align: center;
}
@media (min-width: 768px) {
	.blog-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 60px 20px;
	}
}
/**
 * ---------------------------------------
 * ［index.html］ホームページ - モジュール
 */
/* ヒーローイメージ */
.hero-container img {
	width: 100%;
	height: auto;
}
/* ヒーローテキスト */
.hero-text {
	display: inline-block;
	width: 450px;
	height: auto;
	position: absolute;
	top: 50%;
    left: 50%;
	transform: translate(-225px, -53px);
	fong-size: 28px;
	text-align: center;
	color: #fff;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
}
@media (min-width: 768px) {
	.hero-text {
		display: inline-block;
		max-width: 100%;
		margin: 0 auto;
		font-size: 30px;
	}
}
/* セクション見出し */
.title-items {
	display: block;
	text-align: center;
	margin-bottom: 0;
	padding-bottom: 48px;
}
/* セクションタイトル（h2）下マージンを0 */
.section-title {
	margin-bottom: 0;
	color: #f8b600;
}
/* 見出し下の小さいタイトル文字の装飾 */
.small-title {
	display: flex;
	font-size: 12px;
	justify-content: space-around;
	padding-bottom: 0;
}
.small-title:before,
.small-title:after {
	flex-grow: 1;
	height: 1px;
	content: '';
	background-color: #333333;
	position: relative;
	top: .75rem;
	left: 0;
	background-size: auto;
}
.small-title:before {
	width: 100px;
	margin: 0 50px;
}
.small-title:after {
	width: 100px;
	margin: 0 50px;
}
@media (min-width:768px) {
	.small-title {
		font-size: 18px;
	}
}
/* 共通テキストレイアウト */
.section-text {
	display: block;
	text-align: left;
	padding-bottom: 80px;
}
@media (min-width: 768px) {
	.section-text {
	display: block;
	width: 600px;
	margin: 0 auto;
	text-align: left;
    }
}
.concept-text {
	display: block;
	padding-bottom: 0;
}
@media (min-width: 768px) {
	.concept-text {
		width: 100%;
		text-align: left;
	}
}
/* コンセプト - イメージ - */
.concept-image {
	display: block;
	padding-bottom: 96px;
	width: 100% auto;
}
@media (min-width: 768px) {
	.concept-image {
		width: 50%;
	}
}
img {
	width: 100%;
	max-width: 100%;
	height: auto;
}
/* コンセプトセクションのテキストと画像を横並びにする */
@media (min-width: 768px) {
	.concept-container .content-items {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 0 1rem 4rem 1rem;
		position: relative;
	}
	.concept-container .section-text {
		display: block;
		align-items: left;
		margin: 0;/* テキストボックスに設定されていたマージン解除 */
	}
	.concept-container .concept-image {
		padding: 1rem;
		width: 40%;
	}
/* コンセプトPC -ボタン位置調整- */
	.concept-container .content-items .btn {
		position: absolute;
		top: 200px;
		left: 1rem;
	}
/* コンセプトPC -セクションタイトル左よせ- */
	.concept-container .section-title {
		display: block;
		text-align: left;
	}
/* コンセプトPC -スモールタイトル左よせ- */
	.concept-container .small-title {
		display: block;
		font-size: 12px;
		text-align: left;
	}
/* コンセプトPC -スモールタイトルボーダーカラーとサイズ- */
	.concept-container .small-title:after {
		display: inline-block;
		background-color: #333;
		width: 200px;
		margin: 0 50px 0 0;
	}
/* コンセプトPC -スモールタイトル前ボーダー削除- */
	.concept-container .small-title:before {
		display: none;
	}
	/* コンセプトPC -スモールタイトルボーダー位置設定- */
	.concept-container .title-items {
		position: relative;
	}
	.concept-container .small-title:after {
		position: absolute;
		top: 80px;
		left: 0;
	}
/* コンセプトPC -ボタン位置調整- */
	.concept-container .btn {
		position: absolute;
		top: 350px;
		left: 0;
	}
}
.about-text {
	display: block;
	text-align: left;
}
/* アクション -スモールタイトルカラー- */
.action-container .small-title {
	color: #fff;
}
.action-container .small-title:before,
.action-container .small-title:after {
	background-color: #fff;
}
/* アクション -テキスト- */
.action-container .section-text {
	color: #fff;
}
@media (min-width: 768px) {
	.action-container .section-text {
		display: block;
		align-items: left;
		margin: 0;  /* テキストボックスに設定されていたマージン解除 */
	}
	.action-text {
		display: block;
	    text-align: left;
		color: #333333;
	}
/* アクションPC -タイトルを左よせ- */
	.action-container .section-title {
		display: block;
		text-align: left;
	}
/* アクションPC -スモールタイトルカラーとサイズ- */
	.action-container .small-title {
		display: block;
		color: #333333;
		text-align: left;
		font-size: 12px;
	}
/* アクションPC -スモールタイトルボーダーカラーとサイズ- */
    .action-container .small-title:after {
		display: inline-block;
	    background-color: #333333;
		width: 200px;
		margin: 0 50px 0 0;
	}
/* アクションPC -スモールタイトル前ボーダーを削除- */
	.action-container .small-title:before {
		display: none;
	}
/* アクションPC -スモールタイトルボーダー位置設定- */
	.action-container .title-items {
		position: relative;
	}
	.action-container .small-title:after {
		position: absolute;
		top: 80px;
		left: 0;
	}
/* アクションPC -ボタン位置調整- */
	.action-container .btn {
		position: absolute;
		top: 350px;
		left: 1rem;
	}
	.action-container .section-text,
	.action-container .section-btn {
		background: rgba(255, 255, 255,.4);
	}
}
/* ブログテキスト */
.blog-text {
	padding-bottom: 88px;
}
.blog-container .section-text {
	padding-bottom: 0;
}
/**
* ***********************************************
* [concept.html] コンセプトページ - メインコンテナ
* ***********************************************
*/
.concept .main-container {
	padding: 0 4% 80px 4%;
}
@media (min-width: 768px) {
	.concept .main-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 80px 20px 80px 20px;
	}
}
/**
 * ---------------------------------------
 * ［concept.html］コンセプトページ - モジュール
 */
/**
 * ---------------------------------------
 * コンセプトページヘッダー
 */
.concept-header .title-items {
	margin-bottom: 20px;
}
.concept-header .section-title {
	color: #f8b600;
}
.concept-header .small-title {
	font-size: 12px;
}
.concept-header img {
	width: 100%;
	height: auto;
}
/* コンセプトページメインコンテンツ */
.concept-contents {
	margin: 0 0 80px 0;
}
@media (min-width: 768px) {
	.concept-contents {
		max-width: 700px;
		margin: 0 auto 0 auto;
	}
}
/* 黄色背景 */
.bg-yellow {
	background: #fef4d9;
	padding: 5px 4% 20px 4%;
	border-radius: 10px;
}
@media (min-width: 768px) {
	.bg-yellow {
		max-width: 1040px;
		margin: 0 auto;
	}
}
/* 白色背景 */
.bg-white1,
.bg-white2 {
	width: 100%;
	margin: 18px auto;
	padding: 20px 4% 10px 4%;
	background: #fff;
	border-radius: 10px;
	font-size: 14px;
	position: relative;
}
.bg-white1 span,
.bg-white2 span {
	font-size: 15px;
	font-weight: bold;
	display: block;
	padding-left: 1.85rem;
}
/* ショッピングアイコン */
	.fa-shopping-bag {
	display: inline-block;
	font-size: 20px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.4rem;
	left: 1.25rem;
}
/* パソコンアイコン */
	.fa-desktop {
	display: inline-block;
	font-size: 16px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.7rem;
	left: 1.25rem;
	}
@media (min-width: 768px) {
	.white-box {
		display: flex;
		justify-content: space-between;
		padding: 0;
	}
	.bg-white1 {
		max-width: 50%;
		height: auto;
		margin: 0 20px 0 0;
	}
	.bg-white2 {
		width: 50%;
		height: auto;
		margin: 0;
	}
	.bg-white1 span,
    .bg-white2 span {
	    font-size: 16px;
	    font-weight: bold;
	    display: block;
	    padding-left: 1.65rem;
    }
	.bg-yellow {
		margin-bottom: 60px;
	}
/* ショッピングアイコン */
	.fa-shopping-bag {
	display: inline-block;
	font-size: 20px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.4rem;
	left: 1.25rem;
    }
/* パソコンアイコン */
	.fa-desktop {
	display: inline-block;
	font-size: 18px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1.5rem;
	left: 1.25rem;
	}
}
/* ページディレクション */
.page-direction {
	display: flex;
	justify-content: space-between;
}
.pg-direction-front,
.pg-direction-next {
	display: block;
	padding: 0 .75rem;
	position: relative;
}
.pg-direction-front a,
.pg-direction-next a {
	text-decoration: none; /* テキスト装飾解除 */
	color: #333;
}
.pg-direction-front a:hover,
.pg-direction-next a:hover {
	color: #9a9a9a;
}
.pg-direction-front .text,
.pg-direction-next .text {
	margin-right: .5rem;
	margin-left: .5rem;
}
.fa-arrow-alt-circle-left {
	position: absolute;
	top: 1.3rem;
	left: 0;
}
.fa-arrow-alt-circle-right {
	position: absolute;
	top: 1.3rem;
	right: 0;
}
@media (min-width: 768px) {
	.fa-arrow-alt-circle-left {
	    position: absolute;
	    top: 1.4rem;
	    left: 0;
    }
    .fa-arrow-alt-circle-right {
	    position: absolute;
	    top: 1.4rem;
	    right: 0;
    }
}
/* h2 */
.concept-contents h2 {
	color: #333;
	font-weight: 700;
}
/* コンセプトリード文のスタイル */
.concept-lead {
	display: block;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
	padding-bottom: 64px;
}
/* h3 */
.concept h3 {
	display: block;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	border-bottom: 2px dotted #f8e58c;
	margin-bottom: 32px;
}
@media (min-width: 768px) {
	.concept h3 {
		font-size: 20px;
    }
.yellow-text {
	display: block;
	margin-bottom: 32px;
    }
}
/**
* ***********************************************
* [about.html] アバウトページ - メインコンテナ
* ***********************************************
*/
.about .main-container {
	padding: 0 4% 80px 4%;
}
@media (min-width: 768px) {
	.about .main-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 80px 20px 80px 20px;
	}
}
/**
* ---------------------------------------
* [about.html] アバウトページ- モジュール
*/
.about-header .title-items {
	margin-bottom: 20px;
}
.about-header .section-title {
	color: #f8b600;
}
.about-header .small-title {
	font-size: 12px;
}
.about-header img {
	width: 100%;
	height: auto;
}
/* アバウトページメインコンテンツ */
.about-contents {
	margin: 0 0 80px 0;
}
@media (min-width: 768px) {
	.about-contents {
		max-width: 700px;
		margin: 0 auto 0 auto;
	}
}
/* h2 */
.about-contents h2 {
	color: #333;
}
/* アバウトリード文のスタイル */
.about-lead {
	display: block;
	margin: 0 auto;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
	padding-bottom: 64px;
}
/* h3 */
.about h3 {
	display: block;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	border-bottom: 2px dotted #f8e58c;
	margin-bottom: 32px;
}
@media (min-width: 768px) {
	.about h3 {
		font-size: 20px;
    }
    .yellow-text {
	    display: block;
	    margin-bottom: 32px;
    }
}
/* p */
.about p {
	text-align: justify;
}
/* 黄色背景 */
.about .bg-yellow  {
	margin: 0 auto;
	padding: 10px 4% 32px 4%;
}
.about .yellow-image {
	margin: 0 auto;
	padding: 32px 0 48px 0;
	max-width: 328px;
	align-items: center;
}
.about .page-direction {
	padding: 0 .5rem 0 .5rem;
	margin-bottom: 0 auto;
}
@media (min-width: 768px) {
	.page-direction {
		margin-top: 60px;
	}
}
/**
* ***********************************************
* [about.html] アクションページ - メインコンテナ
* ***********************************************
*/
.action .main-container {
	padding: 0 4% 80px 4%;
}
@media (min-width: 768px) {
	.action .main-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 80px 20px 80px 20px;
	}
}
/**
* ---------------------------------------
* [about.html] アバウトページ- モジュール
*/
.action-header .title-items {
	margin-bottom: 20px;
}
.action-header .section-title {
	color: #f8b600;
}
.action-header .small-title {
	font-size: 12px;
}
.action-header img {
	width: 100%;
	height: auto;
}
/* アクションページメインコンテンツ */
.action-contents {
	margin: 0 0 80px 0;
}
@media (min-width: 768px) {
	.action-header {
		padding-bottom: 48px;
	}
	.action-contents {
		margin: 0 auto 0 auto;
	}
	.action-contents h2 {
		display: block;
		margin: 0 auto;
		max-width: 700px;
	}
	.action-contents .action-lead {
		margin: 0 auto;
		padding: 1rem auto;
		max-width: 700px;
	}
}
/* h2 */
.action-contents h2 {
	color: #333;
}
/* アバウトリード文のスタイル */
.action-lead {
	display: block;
	margin: 0 auto;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
	padding-bottom: 64px;
}
/* h3 */
.action h3 {
	display: block;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	border-bottom: 2px dotted #f8e58c;
	margin-bottom: 32px;
}
@media (min-width: 768px) {
	.action h3 {
		font-size: 20px;
    }
}
/* アクションボックス */
.action-box1,
.action-box2,
.action-box3,
.action-box4 {
	display: inline-block;
	border-radius: 10px;
	margin-bottom: 48px;
	padding: 1rem;
	font-size: 14px;
	background: #f4f4f4;
}
@media (min-width: 768px) {
	.action-box1,
    .action-box2,
    .action-box3,
    .action-box4 {
		font-size: 14px;/* PC表示 ボックスフォントサイズ15px */
    }
}
.action-list {
	display: block;
	margin: 0 auto;
	padding: 0 4% 60px 4%;
}
.action-box1,
.action-box2,
.action-box3,
.action-box4 {
	padding: 0 4% 1rem 4%;
}
.action-list .box-title{
	display: inlilne-block;
	margin-top: 2em;
}
.action-box1 {
	position: relative;
}
.number-1 {
	display: block;
	width: 50px;
	height: 50px;
	color: #fff;
	background: #f8b600;
	border-radius: 50%;　/* 正円 */
	/* リストナンバー中央揃え 始まり */
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: -.15rem;
	left: 45%;
	/* リストナンバー中央揃え 終わり */
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
}.action-box2 {
	position: relative;
}
.number-2 {
	display: inline-block;
	width: 50px;
	height: 50px;
	color: #fff;
	background: #f8b600;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: -.15rem;
	left: 45%;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
}.action-box3 {
	position: relative;
}
.number-3 {
	display: inline-block;
	width: 50px;
	height: 50px;
	color: #fff;
	background: #f8b600;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: -.15rem;
	left: 45%;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
}.action-box4 {
	position: relative;
}
.number-4 {
	display: inline-block;
	width: 50px;
	height: 50px;
	color: #fff;
	background: #f8b600;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: -.15rem;
	left: 45%;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
}
.action-box5 {
	position: relative;
}
.number-5 {
	display: inline-block;
	width: 50px;
	height: 50px;
	color: #fff;
	background: #f8b600;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: -.15rem;
	left: 45%;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
}

.action-box6 {
	position: relative;
}
.number-6 {
	display: inline-block;
	width: 50px;
	height: 50px;
	color: #fff;
	background: #f8b600;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: -.15rem;
	left: 45%;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
}
.action-box7 {
	position: relative;
}
.number-7 {
	display: inline-block;
	width: 50px;
	height: 50px;
	color: #fff;
	background: #f8b600;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	line-height: 50px;
	text-align: center;
	position: absolute;
	top: -.15rem;
	left: 45%;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
}
/* PC表示 グリッドレイアウト */
@media (min-width: 768px) {
	.action-list {
		margin: 0;
		padding: 0 0 60px 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: minmax(100px, auto);
		column-gap: 30px;
		row-gap: 30px;
	}
    .action-box1,
    .action-box2,
    .action-box3,
    .action-box4 {
		display: block;
	    max-width: 100%;
		height: auto;
    }
}
/* アフィリエイト5ステップ メディアオブジェクト */
.affiliate-step .list-title { /* h2 */
	display: block;
	margin: 0 auto;
	padding-bottom: 32px;
	text-align: center;
}
.action-affiliate {
    display: block;
	margin: 0 0 60px 0;
	max-width: 100%;
	height: auto;
	border-top: 1px solid #d8d8d8;
}
.action-affiliate a {
	display: block;
	color: #333;
	text-decoration: none;
}
.action-affiliate a:hover {
	opacity: .5;
}
.article-list {
	display: flex;
	align-items: center;
	padding: 5px 0;
	border-bottom: 1px solid #d8d8d8;
}
.eye-catch {
	flex: 0 0 30%;
	margin-right: 15px;
	position: relative;
}
.article-title {
	flex: 1 1 auto;
}
.article-list h3 {
	margin: 0 0 10px 0;
	font-size: 1rem;
	line-height: 1.5;
	border: none;
}
@media (min-width: 768px) {
	.article-list h3 {
		font-size: 1.25rem;
	}
}
.article-list p {
	margin: 0 0 10px 0;
	display: none;
}
@media (min-width: 768px) {
	.article-list p {
		display: block;
		font-size: .875rem;
		line-height: 1.5;
	}
}
/* アクションメイン */
.action-main {
	margin-bottom: 32px;
	padding: 10px 4% 32px 4%;
	background: #fef4d9;
	background-size: cover;
	border-radius: 10px;
}
.action-main .main-title {
	text-align: center;
}
@media (min-width: 768px) {
	.action-text {
	max-width: 700px;
	margin: 0 auto;
    }
}
.action-main .text {
	padding-bottom: 32px;
}
.action-main .sub-title {
	position: relative;
}
.action-main .sub-title h3 {
	display: block;
	margin-left: 45px;
}
.action-main .number-1,
.action-main .number-2,
.action-main .number-3,
.action-main .number-4 {
	width: 40px;
	height: 40px;
	line-height: 40px;
	position: absolute;
	top: 1rem;
	left: 0;
}
figure img {
	width: 600px;
}
figcaption {
	text-align: center;
	font-size: 12px;
}
figcaption a {
	text-decoration: none;
	color: #333;
}
/* アフィリステップ数字追加 */
.affiliate-step .list-title {
	display: block;
	margin: 0;
	padding: 1rem;
}
.affiliate-step .list-lead {
	display: block;
	max-width: 700px;
	margin: 0 auto;
	padding-bottom: 32px;
	font-family: fot-tsukuardgothic-std, sans-serif;
}
.eye-catch {
	position: relative;
}
.article-list .list-number {
	display: inline-block;
	width: 28px;
	height: 28px;
	color: #fff;
	background: #f8b600;
	opacity: .95;
	line-height: 28px;
	text-align: center;
	position: absolute;
	top: -.5px;
	left: 0;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-size: 11px;
}
@media (min-width: 768px) {
	.article-list .list-number {
	    width: 44px;
	    height: 44px;
		line-height: 44px;
		font-size: 14px;
	}
}
/**
* ***************************************
* [blog.html] ブログホーム - コンテナ
* ***************************************
*/
/* ヒーローコンテナ */
.blog-home .hero {
	width: 100%;
	height: 100vh;
	background-image: url("../images/hero-blog.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
.blog-home .main-container {
	padding: 60px 4% 60px 4%;
}
@media (min-width: 768px) {
	.blog-home .main-container {
		margin: 0 auto;
	}
}


/**
* ---------------------------------------
* [blog-home.html] ブログホーム - モジュール
*/
/* パンくずリスト */
.blog-home .breadcrumb {
	background: #fff;
}
/* ヒーロー画像 */
.blog-home .hero-logo {
	width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-250px, -180px);
}
@media (min-width: 768px) {
	.blog-home .hero-logo {
		width: 600px;
		transform: translate(-300px, -250px);
	}
}
/* キャッチフレーズ */
.blog-home .home-lead {
	text-align: center;
	margin: 0 auto 48px 0;
}
.blog-home .home-lead p {
	display: inline-block;
	margin: 0;
	line-heigt: 2;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
}
@media (min-width: 768px) {
	.blog-home .home-lead {
	    max-width: 700px;
	    margin: 0 auto 60px auto;
		text-align: center;
   }
}
/* メイン */
.blog-home .main-container h2 { /* テキストと背景を組み合わせる */
	display: grid;
	place-items: center;
	margin: 0 auto 30px auto;
	width: 150px;
	height: 150px;
	background: url(../images/home-titleshape.svg) no-repeat;
	background-size: 150px 150px;
	color: #fff;
	font-family: 'Croissant One', cursive;
	font-weight: 400;
	font-size: 20px;
}
/* カード型レイアウト */
.home-recommend {
	margin: 0 0 60px 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(100px, auto);
	column-gap: 10px;
	row-gap: 30px;
}
.recommend-item {
	border: 1px solid #d8d8d8;
}
@media (min-width: 768px) {
	.home-recommend {
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 20px;
	}
}
/* それぞれのカードの中身 */
.recommend-item {
	border: 1px solid #d8d8d8;
	background: #fff;
}
@media (min-width: 768px) {
	.recommend-item {
		border: none;
		background: none;
	}
}
.recommend-image img {
	margin: 0 0 10px 0;
}
.recommend-image img:hover {
	opacity: .5;
}
.recommend-text {
	margin-bottom: 10px;
	padding: 0 10px;
}
@media (min-width: 768px) {
	.recommend-text {
		padding: 0;
	}
}
.recommend-text h3 {
	margin: 0 0 10px 0;
	font-size: 1rem;
	line-height: 1.5;
	font-family: source-han-sans-japanese, sans-serif;
}
.recommend-text h3 a {
	color: #333;
	text-decoration: none;
}
.recommend-text h3 a:hover {
	opacity: .5;
}
/* ホーム 共通のタグ */
.home-tag {
	display: inline-block;
	margin-bottom: 1rem;
}
.home-tag span {
	display: inline-block;
	margin: 0 3px 3px 0;
	padding: 2px 10px;
	border: 1px solid #f8e58c;
	border-radius: 100px;
	font-size: .75rem;
}
.home-tag span a {
	color: #f8e58c;
	text-decoration: none;
}
/* メディアオブジェクト */
.home-latest {
	margin: 0 0 30px 0;
	border-top: 1px solid #d8d8d8;
}
@media (min-width: 768px) {
	.home-latest {
		margin: 0 0 60px 0;
	}
}
.home-latest a {
	display: inline-block;
	color: #333;
	text-decoration: none;
}
.home-latest a:hover {
	opacity: .5;
}
.latest-item {
	display: flex;
	align-items: center;
	padding: 5px 0;
	border-bottom: 1px solid #d8d8d8;
}
.latest-image {
	flex: 0 0 30%;
	margin-right: 15px;
	position: relative;
}
.latest-text {
	flex: 1 1 auto;
}
.latest-text h3 {
	margin: 0 0 10px 0;
	font-size: 1rem;
	line-height: 1.5;
	font-family: source-han-sans-japanese, sans-serif;
}
@media (min-width: 768px) {
	.latest-text h3 {
		font-size: 1.25rem;
	}
}
.latest-text p {
	margin: 0 0 10px 0;
	display: none;
}
@media (min-width: 768px) {
	.latest-text p {
		display: block;
		font-size: 0.875rem;
		line-height: 1.5;
	}
}
/**
* ***************************************
* [sidebar-post.html] サイドバーあり記事ページ - メインコンテナ
* ***************************************
*/
.sidebar-post .main-container {
	padding: 80px 4% 0 4%;
}
@media (min-width: 768px) {
	.sidebar-post .main-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 80px 20px 0 20px;
	}
}
/* 2カラムレイアウトのコントロール */
@media (min-width: 768px) {
	.columns {
		display: grid;
		grid-template-columns: 1fr 290px;
		grid-gap: 40px;
	}
}
/* h2 */
.sidebar-post .post-contents h2 {
	display: block;
	margin-top: 48px;
}
/* h3 */
.sidebar-post .post-contents h3 {
	display: block;
	margin-top: 32px;
}
/* h4 */
.sidebar-post h4 {
	display: block;
	margin-top: 2.5rem;
}
/**
* ***************************************
* [sidebar-post.html] ブログホーム - モジュール
* ***************************************
*/
/**
* ---------------------------------------
*ポストヘッダー
*/
.post-header {
	margin-bottom: 30px
}
.post-header h1{
	margin: 0 0 20px 0;
	font-size: 1.875rem;
	line-height: 1.5;
}
.post-header img {
	margin: 0 auto;
	max-width: 100%;
	vertical-align: bottom;
}
/* 太文字 */
.strong {
	font-weight: 700;
}
.red {
	color: #FF1115;
}
/**
* ---------------------------------------
*ポストコンテンツ
*/
.post-contents {
	padding: 0 0 96px 0;
}
@media (min-width: 768px) {
	.post-contents {
		max-width: 670px;
		margin: 0 auto 60px auto;
	}
}
/* post-contentsの１つめの要素の上マージンを0にする */
.post-contents > *:first-child {
	margin: 0;
}
/* h2 */
.post-contents h2 {
	margin: 60px 0 30px 0;
	padding: 1rem 0;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	font-size: 1.25rem;
	font-weight: 700;
	color: #333;
}
/* h3 */
.post-contents h3 {
	display: block;
	border-bottom: 2px dotted #f8e58c;
}
/* p */
.post-contents p {
	line-height: 1.9;
	text-align: justify;
}
/* 画像 */
.page-image {
	margin: 0;
	padding: 0;
	width: 100%;
}
.domain-img {
	margin-top: 1rem;
}
.sidebar-post .page-img {
	margin: 60px auto;
}
/* 記事内リストの基本形 */
.sidebar-post .list {
	padding: .5rem .5rem 1rem .5rem;
	background: #f8e58c;
	border-radius: 10px;
}
.sidebar-post .list-item {
	margin: 1rem;
	padding: 1rem;
}
.sidebar-post .list li {
	background: #fff;
	border-radius: 10px;
	list-style: none;
}
.sidebar-post .list-item h3 {
	display: block;
	margin: 0 0 1rem 0;
	padding: 0;
	border-bottom: 1px dashed #333;
}
.list .list-content {
	display: block;
	margin: 0;
	padding: 0 0 1rem 0;
}
/* Notesボックス */
.box-notes {
	dispaly: block;
	margin: 32px 0 48px 0;
}
.box-notes .title-box {
	display: inline-block;
	padding: .5rem 0 0 1rem;
	width: 120px;
	height: 40px;
	background: #4c524c;
	border-radius: 10px 10px 0 0;
	color: #fff;
}
.box-notes .box-title {
	display: block;
	margin: 0 0 .5rem .5rem;
	padding: 0;
	font-family: fot-tsukuardgothic-std, sans-serif; 
	font-weight: 700;
}
.box-notes .box-title::before {
	display: inline-block;
	text-align: center;
	margin-right: .3rem;
	font-family: 'Font Awesome 5 Free';
	content: '\f304';
	font-weight: 700;
}
.box-notes .box-title p {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.box-notes .text-box {
	display: block;
	padding: 1rem;
	border: 3px solid #4c524c;
	color: #4c524c;
}
.box-notes .text-title {
	display: block;
	border-bottom: 2px dashed #4c524c;
	margin-bottom: .75rem;
	font-weight: 700;
}
.box-notes .text-title p {
	display: block;
	margin: 0 auto;
	padding-bottom: .1rem;
}
.box-notes .text-content {
	display: block;
	margin-top: 1rem;
	font-size: 14px;
	color: #4c524c;
}
.box-notes .text-content p {
	display: block;
	margin: 0;
	padding-bottom: 0.2rem;
}
/* チェックリスト */
.check-list {
	display: block;
	margin: 3rem auto;
	padding: 2rem 1rem 1rem .5rem;
	border: 4px solid #f8e58c;
	border-radius: 10px;
	position: relative;
}
.check-list li {
	display: block;
	margin: 0 0 .5rem 1.5rem;
	list-syle: none;
	font-weight: bold;
}
.check-list li::before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	content: '\f058';
	color: #f8e58c;
	font-size: 22px;
	margin-right: .5rem;
}
.check-list .check-title {
	display: inline-block;
	position: absolute;
	top: -1.35rem;
	left: .5rem;
	margin: 0 0 0 1rem;
	padding: 0 .5rem;
	font-size: 18px;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: bold;
	color: #f8e58c;
	background: #fff;
}
.check-list .check-title::before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	content: '\f02e';
	font-size: 20px;
	color: #f8e58c;
	margin-right: .5rem;
}
.plan-for-writing .check-list a,
.how-to-write .check-content a {
	color: #333;
}
.plan-for-writing .list-content,
.how-to-write .list-content {
	display: block;
	padding: .5rem;
}
.plan-for-writing .check-list .check-content:hover {
	opacity: .8;
}
.plan-for-writing .check-content a::after,
.how-to-write .check-content a::after {
	display: inline-block;
	margin-left: .2rem;
	width: 30px;
	height: 30px;
	font-family: 'Font Awesome 5 Free';
	content: '\f35d';
	font-weight: 700;
	font-size: .85rem;
}
/* オーダーリスト */
.order-list {
	position: relative;
	margin: 48px 0;
	padding: 1.5rem 1rem 1rem 1rem;
	background: #fef4d9;
}
.order-list li {
	list-style: none;
}
.order-items {
	position: relative;
}
.order-items .number-1,
.order-items .number-2,
.order-items .number-3,
.order-items .number-4,
.order-items .number-5,
.order-items .number-6,
.order-items .number-7 {
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	background: #f8b600;
	position: absolute;
	top: .75rem;
	left: 0;
}
.order-content {
	display: block;
	margin: 0 0 1rem 2.75rem;
}
/* オーダーリストフレックス */
.plan-for-writing .list-flex {
	display: flex;
	position: relative;
}
.plan-for-writing .order-example {
	display: inline-block;
	margin-left: 1rem;
	position: absolute;
	top: .2rem;
	left: 8rem;
	font-size: 12px;
}
/* ノーマルボックス */
.normal-box {
	display: block;
	margin: 3rem auto;
	padding: 1.5rem 1.5rem 1rem 1.5rem;
	line-height: 1.9;
	border: 3px solid #4c524c; 
	border-radius: 5px;
	position: relative;
}

.plan-for-writing .normal-box {
	margin: 3rem auto;
	padding: 1.5rem 1.5rem 1.5rem 1.5rem;
	border: 3px solid #4c524c; 
	border-radius: 5px;
	position: relative;
}
.how-to-write .normal-box {
	padding: 2rem 1.5rem 2.5rem 1.5rem;
	font-size: 14px;
	line-height: 1.7;
}
@media (min-width: 768px) {
	.how-to-write .normal-box {
		font-size: 16px;
		line-height: 1.7;
	}
}

.normal-icon::after {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	content: '\f007';
	color: #4c524c;
	font-size: 35px;
	font-weight: 700;
	position: absolute;
	bottom: -.7rem;
	right: 1.3rem;
}
.normal-icon::after {
	display: none;/* 人型アイコン非表示 */
}
.person-icon::after {
	display: inline-block;/* 人型アイコン再表示 */
	font-family: 'Font Awesome 5 Free';
	content: '\f007';
	color: #4c524c;
	font-size: 35px;
	font-weight: 700;
	position: absolute;
	bottom: -.5rem;
	right: 1.3rem;
}
.inspiration-icon::after {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	content: '\f0eb';
	color: #4c524c;
	font-size: 35px;
	font-weight: 700;
	position: absolute;
	bottom: -.7rem;
	right: 2rem;
}
.search-icon::after {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	content: '\f002';
	color: #4c524c;
	font-size: 35px;
	font-weight: 700;
	position: absolute;
	bottom: -.7rem;
	right: 2rem;
}
.normal-title {
	display: inline-block;
	background: #fff;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-size: 18px;
	position: absolute;
	top: -1.2rem;
	left: 1.5rem;
}
.normal-title p {
	margin: 0;
	padding: 0 .2rem;
}
.normal-text p {
	display: block;
	margin: 0;
	font-size: 14px;
}
@media (min-width: 768px) {
	.normal-text p {
		display: block;
		margin: 0 auto;
		font-size: 16px;
	}
}
/* 引用 */
blockquote {
	margin: 3rem auto;
	padding: 3rem 1rem 1rem 1rem;
	background: #f4f4f4;
	border-left: 5px solid #4c524c;
	position: relative;
}
blockquote::before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	content: '\f10d';
	color: #4c524c;
	font-weight: 700;
	font-size: 30px;
	position: absolute;
	top: 10px;
	left: 15px;
}
blockquote p {
	line-height: 1.5;
}
/* 時系列ボックス */
.timeline-container {
	display: block;
	margin: 60px auto;
	padding: 2rem;
	background: #fffacd;
}
.timeline-container li {
	display: block;
	color: #4c524c;
	list-style: none;
	padding: 0 0 2rem 3rem;
	border-left: 2px solid #f8e58c;
}
.timeline-container li:last-child {
	padding-bottom: 0;
}
.timeline-container li::before {
	display: inline-block;
	margin-right: 2rem;
	font-family: 'Font Awesome 5 Free';
	content: '\f111';
	font-weight: 700;
	color: #4c524c;
	position: relative;
	left: -3.57rem;
}
.timeline-container .timeline-list {
	font-weight: 700;
}
.wrap-listitem {
	display: block;
	padding-bottom: 1rem;
	position: relative;
	top: -3.35rem;
	left: 0;
}
.wrap-listitem .timeline-list {
	font-size: 20px;
}
.wrap-listitem .timeline-text {
	font-size: 16px;
}
.wrap-listitem .timeline-example {
	font-size: 14px;
}
/* 注意ボックス */
.caution {
	margin: 2.5rem 0 4rem 0;
	background: #F7AAAC;
	padding: 1rem;
}
.caution-title {
	display: block;
	margin-bottom: .5rem;
	padding: 0;
	position: relative;
}
.caution-title .title-text::before {
	display: inline-block;
	margin: 0;
	padding: 0;
	width: .1rem;
	height: auto;
	font-family: 'Font Awesome 5 Free';
	content: "\f06a";
	font-weight: 700;
	font-size: 22px;
	color: #F73437;
	position: absolute;
	top: -.05rem;
	left: 0;
}
.caution-title .title-text {
	display: block;
	color: #F85557;
	font-size: 20px;
	margin-left: 25px;
}
.caution .caution-text {
	color: #333;
	font-size: 14px;
}
@media (min-width: 768px) {
	.caution .caution-text {
		color: #333;
		font-size: 16px;
	}
}
/* 関連記事ボックス */
.box-related {
	display: block;
	margin: 48px 0;
	border: 2px solid #73cbd6;
}
@media (min-width: 768px) {
	.box-related{
		display: block;
		margin: 64px 0;
	}
}
.box-related .box-title {
	display: block;
	margin: 0;
	text-align: center;
	background: #73cbd6;
	color: #fff;
}
.box-related p {
	display: inline-block;
	margin: 0;
	paddinng: 0;
	font-size: 14px;
	font-weight: 700;
}
@media (min-width: 768px) {
	.box-related p {
		display: inline-block;
		margin: 0;
		padding: 0;
		font-size: 16px;
	}
}
.box-related .related-content {
	display: flex;
	margin: 0;
	padding: 0;
}
.box-related .related-img {
	flex: 1 1 280px;
	margin: .2rem;
}
.box-related .related-text {
	display: inline-block;
	padding: .1rem;
	font-size: 12px;
}
.box-related .related-text a {
	color: #333;
}
/* 動画 */
iframe {
	width: 100%;
	margin: 1.5rem 0 1.5rem 0;
}
/* 記事内画像 - [image-post] */
.image-post {
	margin: 2.25rem 0;
}
/* 見出し下画像 - [image-header]*/
.image-header {
	margin-bottom: 24px;
}
/* 記事内ボックス */
.box-about {
	background: #fffacd;
	margin: 3rem auto;
	padding: 1rem;
}
.box-list {
	margin-left: 3rem;
}
.box-about .box-title {
	display: block;
	margin-bottom: 10px;
	padiding: 0;
	position: relative;
}
.how-to-write .box-about .box-title {
	display: block;
	padding-bottom: 1.5rem;
}
.box-about .title-icon {
	display: inline-block;
	margin-right: 2rem;
	content: '';
}
.box-about .title-text {
	display: block;
	margin-left: .5rem;
	color: #4c524c;
	position: absolute;
	top: 0;
	left: -1rem;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-size: 18px;
}
.sidebar-post .box-about .box-title::before {/* 通常スタイル */
	display: inline-block;
	position: absolute;
	top: -.8rem;
	left: -1.8rem;
	color: #4c524c;
	font-family: 'Font Awesome 5 Free';
	content: '\f46d';
	font-size: 28px;
	font-weight: 700;
} 
.opening-site .box-about .xserver::before { /* エックスサーバー開設動画用スタイル */
	display: inline-block;
	position: absolute;
	top: -.8rem;
	left: -1.8rem;
	color: #4c524c;
	font-family: 'Font Awesome 5 Free';
	content: '\f1c8';
	font-size: 28px;
	font-weight: 700;
}
.box-about .box-list {
	margin: 0;
	padding: 0 0 0 10px;
}
.box-about .box-list li {
	display: block;
	margin-bottom: .5rem;
	color: #4c524c;
}
.box-about .main-list {
	position: relative;
}
.how-to-write .box-about .main-list {
	padding-bottom: 1rem;
}
.box-about .box-list .main-list::before {
	display: block;
	position: absolute;
	top: -.2rem;
	left: -1.2rem;
	color: #4c524c;
	font-family: 'Font Awesome 5 Free';
	content: '\f101';
	font-size: 18px;
	font-weight: 700;
}
.box-about .sub-list {
	display: block;
	margin-bottom: 16px;
	padding-left: 1.2rem;
	color: #4c524c;
}
.box-about .sub-list li{
	display: block;
	padding-bottom: 0.1rem;
}
.box-about .sub-list li::before {
	display: inline-block;
	margin-right: .2rem;
	color: #4c524c;
	font-family: 'Font Awesome 5 Free';
	content: '\f138';
	font-weight: 700;
}
/* まとめボックス */
.box-conclusion {
	margin: 32px 0 48px 0;
	border: 3px solid #73cbd6;
	border-radius: 5px;
	margin-bottom: 96px;
}
.box-conclusion .conclusion-content {
	display: block;
	padding: 1rem 1rem .5rem 1rem;
	font-size: 14px;
	font-weight: 400;
	color: #73cbd6;
}
@media(min-width: 768px) {
	.box-conclusion .conclusion-content {
		display: block;
		padding: 1rem 1.5rem;
		font-size: 16px;
	}
}
.box-conclusion .conclusion-title {
	display: block;
	border-bottom: 2px dashed #73cbd6;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-size: 18px;
}
@media (min-width: 768px) {
	.box-conclusion .conclusion-title {
		font-size: 20px;
	}
}
.box-conclusion .title-text::before {
	display: inline-block;
	margin-right: 1rem;
	width: 10px;
	font-family: 'Font Awesome 5 Free';
	content: '\f058';
	font-weight: 700;
}
.box-conclusion .text {
	display: block;
	margin: 1rem auto;
	padding: 0;
}
/* 記事内太文字 */
.post-contents .text-strong {
	font-weight: bold;
}
/* タグ */
.post-tag {
	margin-bottom: 5px;
	font-size: .75rem;
	line-height: 2;
}
.post-tag span {
	margin: 0 3px 0 0;
	padding: 2px 10px;
	background: #73cbd6;
	border-radius: 100px;
}
.post-tag span a {
	color: #fff;
	text-decoration: none;
}
/* テキストの先頭にアイコン */
.post-info {
	margin-bottom: 3px;
	padding-bottom: 15px;
	font-size: .75rem;
	text-align: right;
	background: url("../images/post-line.svg") bottom repeat-x;
}
.post-info span {
	margin: 0 10px 0 0;
}
.post-info i {
	padding-right: 5px;
	color: #73cbd6;
}
/* a */
.sidebar-post a {
	text-decoration: none;
}
.sidebar-post a:hover {
	opacity: .5;
}
/*外部リンク時にアイコン表示*/
.sidebar-post .external-link::after {
	display: inline-block;
	margin: 0 0 0 .1rem;
	padding: 0;
	width: 18px;
	height: 18px;
	font-family: 'Font Awesome 5 Free';
	content: '\f35d';
	font-weight: 700;
	font-size: .85rem;
}
button {
	display: block;
	padding: 1rem 0;
	width: 100%;
	border: none;
	color: #fff;
	background: #4c524c;
	font-size: 16px;
}
button .btn-item {
	display: block;
	position: relative;
}
button .btn-text::after {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	line-height: 30px;
	font-family: 'Font Awesome 5 Free';
	content: '\f35d';
	font-weight: 700;
    color: #fff; 
}
.sidebar-post button:hover {
	opacity: .8;
}
.external-link i {
	display: inline-block;
	margin-left: .2rem;
	font-size: .85rem;
}
@media (min-width: 768px) {
	button {
		display: block;
		margin: 10px auto;
		max-width: 280px;
	}
}
/* エックスサーバー用ボタン */
.opening-site button {
	margin-top: 64px;
}
/**
* ---------------------------------------
*ポストフッター
*/
.post-footer {
	margin: 0 0 60px 0;
}
@media (min-width: 768px) {
	.post-footer {
		max-width: 600px;
		margin: 0 auto 60px auto;
	}
}

/* 記事一覧リスト(最新記事) */
.side-latest,
.side-category {
	margin-bottom: 60px;
}
.side-latest h2,
.side-category h2 {
	margin: 0 0 10px 0;
	font-family: 'Croissant One', cursive;
	font-weight: 400;
	font-size: 1.25rem;
}
.side-latest ul,
.side-category ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.side-latest li {
	display: grid;
	grid-template-columns: 80px 1fr;
	column-gap: 10px;
	align-items: center;
	margin-bottom: 1rem;
	border-bottom: 1px solid #d8d8d8;
	padding-bottom: 1rem;
}
.side-category li {
	margin-bottom: 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid #d8d8d8;
}
.side-latest img {
	border-radius: 50%;
}
.side-latest p {
	margin: 0;
	font-size: .75rem;
	line-height: 1.5;
}
.side-latest li a,
.side-category li a {
	color: #333;
	text-decoration: none;
}
.side-latest li a:hover,
.side-category li a:hover {
	opacity: .5;
}
/* ポスト下部プロファイル */
.post-footer h2 {
	display: inline-block;
	margin: 0;
	padding: 10px 30px;
	background: #333;
	border-radius: 10px 10px 0 0;
	font-family: 'Croissant One', cursive;
	font-weight: 400;
	font-size: 1.25rem;
	color: #fff;
}
.profile {
	display: flex;
	padding: 1rem;
	border: 1px solid #333;
}
.pr-photo {
	flex: 0 0 100px;
	margin-right: 1rem;
}
.pr-photo img {
	border-radius: 50%;
}
.pr-text {
	flex: 1 1 auto;
}
.pr-text p {
	margin: 0;
	line-height: 1.9;
}
.pr-text .name {
	font-weight: bold;
}
.sidebar-post .list .list-content {
	font-size: 12px;
}

/**
* ***************************************
* [contact.html] コンタクトページ
* ***************************************
*/
/**
/* コンタクトフォーム - メインコンテナ */
.contact .main-container {
	margin: 0 auto;
	padding: 60px 4%;
	max-width: 1040px;
}
@media (min-width: 768px) {
	.contact .main-container {
		padding: 60px 20px;
	}
}
/* コンタクトフォーム - フォームコンテナ */
.contact .form-container {
	margin: 0 auto;
	padding: 0 4% 30px 4%;
	max-width: 640px;
}
@media (min-width: 768px) {
	.contact .form-container {
		padding: 0 20px 30px 20px;
	}
}
/**
* ***************************************
* [contact.html] コンタクトページ - モジュール
* ***************************************
*/
/* 見出しとテキスト */
.contact-title {
	margin: 0 0 60px 0;
	text-align: center;
	font-size: 1.25rem;
	color: #333;
}
.contact-title span {
	font-size: 1.875rem;
	font-family: 'Croissant One', cursive;
	font-weight: 400;
}
.contact-text {
	margin: 0;
	line-height: 1.9;
}
/* 入力フォームのフォントサイズを大きくする */
input, textarea, label {
	font-size: 16px;
}
/* テキストフィールドとメールアドレスフィールド */
.form p {
	margin: 0 0 30px 0;
	line-height: 1.9;
}
.required {
	margin-left: 10px;
	font-size: .875rem;
	color: #73cbd6;
}
input[type="text"],
input[type="email"] {
	width: 100%;
	padding: 10px;
	background: #d8d8d8;
	border: none;
}
/* メニューリスト */
select {
	-webkit-appearance: none;
	border: 1px solid #747474;
	padding: 4px 2rem 4px 2rem;
	border-radius: 4px;
	background: url("../images/caret-down.svg") no-repeat;
	background-position: right 6px center;
	background-size: 12px 12px;
	font-size: 16px;
}
/* メッセージ（テキストエリア） */
textarea {
	width: 100%;
	height: 12rem;
	padding: 10px;
	background: #d8d8d8;
	border: none;
	line-height: 1.5;
}
/* 送信ボタン */
.form-button {
	margin-bottom: 0;
	text-align: center;
}
input[type="submit"] {
	padding: 20px 30px;
	background-color: #333;
	border: none;
	border-raidus: 40px;
	color: #fff;
}
input[type="submit"]:hover {
	opacity: .7;
}
/**
* ***************************************
* コンタクトページ - コンテナ
* ***************************************
*/
/* ページメイン */
.category .main-container {
	padding: 80px 4% 0 4%;
}
@media (min-width: 768px) {
	.category .main-container {
		max-width: 1040px;
		margin: 0 auto;
		padding: 80px 20px 0 20px;
	}
}
.category-list {
	margin: 0 0 60px 0;
}
/**
* ***************************************
* [contact.html] コンタクトページ - モジュール
* ***************************************
*/
/* リード */
.category .category-lead {
	text-align: center;
	margin: 0 auto 48px auto;
}
.category .category-lead p {
	display: inline-block;
	margin: 0;
	line-heigt: 2;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 700;
	font-size: 18px;
}
@media (min-width: 768px) {
	.category .category-lead p {
	    margin: 0 auto;
		font-size: 20px;
   }
}
/* メイン */
.category .main-container h2 { /* テキストと背景を組み合わせる */
	display: grid;
	place-items: center;
	margin: 0 auto 30px auto;
	width: 150px;
	height: 150px;
	background: url(../images/home-titleshape.svg) no-repeat;
	background-size: 150px 150px;
	color: #fff;
	font-family: 'Croissant One', cursive;
	font-weight: 400;
	font-size: 20px;
}
/* メディアオブジェクト型レイアウト（SP） */
.category-list {
	margin: 0 0 60px 0;
	border-top: 1px solid #d8d8d8;
}
.category-items {
	display: flex;
	padding: 10px 0;
	align-items: center;
	border-bottom: 1px solid #d8d8d8;
}
.category-image {
	flex: 0 0 30%;
}
.category-text a {
	display: inline-block;
	color: #333;
	text-decoration: none;
}
.category-text a:hover {
	opacity: .5;
}
.category-image {
	flex: 0 0 30%;
	margin-right: 15px;
	position: relative;
}
.category-text h3 {
	display: inline-block;
	margin: 0 0 10px 0;
	font-size: .75rem;
	line-height: 1.5;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
}
@media (min-width: 768px) {
	.category-text h3 {
		font-size: 1rem;
	}
}
/* カード型レイアウト(pc) */
@media (min-width: 768px) {
	.category-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
	    grid-auto-rows: minmax(100px, auto);
	    column-gap: 30px;
	    row-gap: 30px;
		border: none;
	}
	.category-items {
		display: flex;
		flex-direction: column;
		border: 1px solid #d8d8d8;
	}
	/* それぞれのカードの中身 */
	.category-image {
		margin: 0;
	}
	.category-image img {
		margin: 0 0 10px 0;
	}
	.category-image img:hover {
		opacity: .5;
	}
	.category-text h3 {
		margin-bottom: 10px;
		padding: .5rem;
	}
	.category .side-latest h2,
	.category .side-category h2 {
		margin: 0 0 60px 0;
		paddign: 0;
		width: 0;
		height: 0;
		background: none;
		color: #f8b600;
		font-size: 1.25rem;
	}
}
/* 目次 */
.toc-container {
	margin: 60px 0;
	padding: 1rem 1rem 2rem 1rem;
	border: 8px solid #d8d8d8;
	border-radius: 10px;
}
@media (min-width: 768px) {
	.toc-container {
		display: block;
		max-width: 550px;
		margin: 60px auto;
		padding: 1.5rem;
	}
}
.toc-container p{ /* 目次見出し */
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #d8d8d8;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
	font-size: 1.25rem;
}
@media (min-width: 768px) {
	.toc p {
		font-size: 1.5rem;
	}
}
.toc-container a {
	color: #333;
}
.toc-container a:hover {
	opacity: .5;
	border-bottom: 1px solid #333;
}
.toc .toc-title::before {
	display: inline-block;
	margin-right: .1rem;
	font-family: 'Font Awesome 5 Free';
	content: '\f0ca';
	font-weight: 700;
}
.toc-main .main-list {
	font-size: 1rem;
}
.toc-sub {
	padding: .5rem 0 .8rem 0;
}
.toc-sub li {
	padding: 0;
	list-style: none;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 200;
	font-size: .875rem;
}
.toc-sub li::before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free';
	content: '\f111';
	font-weight: 700;
	font-size: .5rem;
	margin-right: .5rem;
	padding-bottom: .5rem;
	position: relative;
	top: -.1rem;
}
/* 記事一覧h2 */
.contents-archive .main-container h2 {/* テキストと背景を組み合わせる */
	display: grid;
	place-items: center;
	margin: 60px auto 30px auto;
	width: 150px;
	height: 150px;
	background: url("../images/home-titleshape.svg") no-repeat;
	background-size: 150px 150px;
	color: #fff;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
	font-size: 20px;
}
/* ページネーション */
.pagination {
	display: flex;
	justify-content: center;
	padding-bottom: 60px;
	font-size: 1.25rem;
	text-align: center;
}
.pagination a:hover {
	background: #333;
	color: #fff;
}
.pagination ul {
	margin: 0;
	padding: 0;
}
.pagination li {
	display: inline-block;
	text-align: center;
	text-decoration: none;
}
.pagination li span {
	display: inline-block;
	width: 36px;
	height: 36px;
	background: #000;
	color: #fff;
}
/* カード型レイアウト(記事一覧) */
.archives {
	margin: 60px 0;
	padding: 0; 
	border-top: 1px solid #d8d8d8;
}
@media (min-width: 768px) {
	.archives {
	margin: 60px 0;
	padding: 0 20px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-autorows: minmax(100px, auto);
	column-gap: 20px;
	row-gap: 30px;
	border: none;
    }
}
.archives a {
	display: inline-block;
	text-decoration: none;
	color: #333;
}
.archives a:hover {
	opacity: .5;
}
.archive-items {
	display: flex;
	align-items: center;
	padding: 5px 0;
	border-bottom: 1px solid #d8d8d8;
}
@media (min-width: 768px) {
	.archive-items {
		display: inline-block;
		border: none;
	}
}
.archive-image {
	flex: 0 0 30%;
	margin-right: 15px;
	positioin: relative;
}
@media (min-width: 768px) {
	.archive-image {
		margin: 0 0 10px 0;
	}
}
.archive-text {
	flex: 1 1 auto;
}
@media (min-width: 768px) {
	.archive-text {
		padding: 0;
	}
}
.archive-text h3 {
	margin: 0 0 10px 0;
	font-size: 1rem;
	line-height: 1.5;
	font-family: source-han-sans-japanese, sans-serif;
}
.to-archives {
	display: block;
	margin: 0 0 60px 0;
}
@media (min-width: 768px) {
	.to-archives {
		margin-bottom: 60px;
	}
}
.to-archives a{
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	padding: .5rem 1rem;
	border-bottom: 1px solid #333;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	text-decoration: none;
	color: #333;
	font-size: 1.25rem;
}
.to-archives a:hover {
	opacity: .5;
}
/* キャプション付きの画像 */
.photo-caption {
	margin: 30px;
}
.photo-caption figcaption {
	margin-top: 5px;
	font-size: .75rem;
	color: #747474;
}
/**
* ***************************************
* [profile.html] 運営者情報ページ - モジュール
* ***************************************
*/
/* main-container */
.main-container {
	margin: 0;
	padding: 0 4%;
}
@media(min-width: 768px) {
	.main-container {
		max-width: 100%;
		margin: 0 auto;
	}
}
/* プロフィール画像 */
.profile-pic {
	display: inline-block;
	margin: 12px auto 32px auto;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	position: relative;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
/* 運営者情報リスト */
.operator .information-container table {
	display: block;
	padding: 80px 4%;
	max-width: 100%;
}
@media(min-width: 768px) {
	.operator .information-container table {
	display: block;
	margin: 0;
	padding: 0 1rem 3rem 1rem;
	position: relative;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width-max: 720px;
	height: auto;
	}
}
.information-container table th,
.information-container table td {
	padding: .5rem 1rem;
	border-bottom: 1px dotted #9a9a9a;
}
/* h2 */
.operator .operator-title {
	display: inline-block;
	padding: .75rem 10rem;
	color: #333;
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	position: relative;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}