@charset "utf-8";
/* ################################################################################
   Object_Project_
   ################################################################################ */


/* ======================================================================
   Header_Parts（ヘッダー内の構成パーツ）
   ====================================================================== */


/* Site Title
   ================================================================= */


/* ------------------------------------------------------------
   Image Logo（画像ロゴ）
   ------------------------------------------------------------ */

.site-title {
	margin: 0;
  padding: 1.0em 0;
  font-size: inherit;
	font-weight: normal;
  line-height: 1.0;
}

.site-logo-link, 
.custom-logo-link {
	display: block;
}
.custom-logo-link:hover, 
.site-logo-link:hover {
  opacity: 0.7;
}

.site-logo, 
.custom-logo {
	width: auto;
  height: 2.0em;
  margin: 0;
}



/* ------------------------------------------------------------
   Web Font Logo（Webフォントロゴ）
   ------------------------------------------------------------ */

.site-title-text {
	margin: 0;
  padding: 0.5em 0;
	font-family: 'Noto Serif JP', serif;
	color: var(--keycolor-main);
  font-size: 2.0em;
	font-weight: normal;
  line-height: 1.0;
	letter-spacing: normal;
}

.site-title-text-link {
	display: block;
	color: var(--keycolor-main);
	text-decoration: none;
}
.site-title-text-link:hover {
	color: var(--keycolor-main);
	text-decoration: none;
  opacity: 0.7;
}





/* ======================================================================
   Footer_Parts（フッター内の構成パーツ）
   ====================================================================== */


/* Footer Infomation
   ================================================================= */


/* ------------------------------------------------------------
   Footer Infomation_Wapper
   ------------------------------------------------------------ */

.footer-infomation {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--layout-width-basic);
	margin: 0 auto;
	padding: 0.75em var(--layout-site-bothends-padding);
	font-size: 0.825em;
}



/* ------------------------------------------------------------
   Administrator Name（運営者名）
   ------------------------------------------------------------ */

.administrator-name {
	flex-basis: 50%;
	margin: 0;
	padding: 0.75em 0;
}

@media screen and (max-width:959px) {
.administrator-name {
	flex-basis: 50%;
}
}

@media screen and (max-width:559px) {
.administrator-name {
	flex-basis: 100%;
}
}



/* ------------------------------------------------------------
   Street Address（サイトの運営会社の住所）
   ------------------------------------------------------------ */

.street-address {
	flex-basis: 50%;
	margin: 0;
	padding: 0.75em 0;
	font-style: normal;
}

@media screen and (max-width:959px) {
.street-address {
	flex-basis: 50%;
}
}

@media screen and (max-width:559px) {
.street-address {
	flex-basis: 100%;
}
}



/* ------------------------------------------------------------
   Copyright
   ------------------------------------------------------------ */

.copyright {
	flex-basis: 100%;
	display: block;
	margin: 0;
	padding: 0.75em 0;
	font-size: inherit;
  text-align: center;
}

@media screen and (max-width:959px) {
.copyright {
	flex-basis: 100%;
}
}

@media screen and (max-width:559px) {
.copyright {
	flex-basis: 100%;
}
}





/* ======================================================================
   Site Visual（サイトのメインビジュアル）
   ====================================================================== */

/* サイトの印象を決定づける画像や動画を、使用する枠。 */
/* スライダー機能で、複数枚の画像を表示させたり、動画を設置するなどして、ユーザーの注目を集める。 */


.p-site-visual {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.p-site-visual__inner {
	max-width: var(--layout-width-basic);
	margin: 0 auto;
	padding: 0;
}



/* ------------------------------------------------------------
   カスタムヘッダーを使用する場合
   ------------------------------------------------------------ */

.wp-custom-header {
	position: relative;
}

.wp-custom-header img, 
.wp-custom-header video {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.wp-custom-header-video-button {
	display: none;
}



/* ------------------------------------------------------------
   カスタムヘッダーを使用しない場合
   ------------------------------------------------------------ */

.p-site-visual__image, 
.p-site-visual img {
	width: 100%;
	margin: 0;
	padding: 0;
}

.p-site-visual__movie {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* 画像のアスペクト保持 */
.p-site-visual--aspect {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: auto;
	padding: 0;
}

.p-site-visual--aspect:before {
	content: "";
	display: block;
	padding-top: 42.7%;
}

.p-site-visual__inner--aspect {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: url("../img/site-visual/visual_03.png")no-repeat 0 0 #fff;
	background-size: contain;
	text-align: right;
}

/* ボタンの位置調整 */
.p-site-visual__button--aspect {
	width: 36%;
  margin-top: 32%;
  margin-right: 4%;
}





/* [WP Plugin]Smart Slider 3
   ================================================================= */

.n2-section-smartslider .nextend-bar div.n2-ow {
	padding: calc(var(--fontsize-article-text) * 0.75) !important;
}

.n2-section-smartslider .nextend-bar span.n2-ow {
  color: #fff !important;
  font-family: var(--fontfamily-article-text) !important;
  font-size: calc(var(--fontsize-article-text) * 1) !important;
  line-height: var(--lineheight-article-text) !important;
  letter-spacing: var(--letterspacing-article-text) !important;
  font-weight: bold !important;
}





/* ======================================================================
   Recommended Articles（オススメ記事）
   ====================================================================== */

/* ユーザーにオススメしたい記事を紹介する枠です。 */
/* スライダー機能で、複数のオススメ記事をローテーションし、ユーザーの注目を集めます。 */


.p-recommended-articles {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.p-recommended-articles__inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}





/* ======================================================================
   Recommended Articles（オススメ記事）
   ====================================================================== */

.p-page-export {
	max-width: 100%;
}






/* ################################################################################
   Object_Project_Form（フォーム）
   ################################################################################ */


/* ======================================================================
   Form
   ====================================================================== */


/* [Foundation]
   ================================================================= */

.p-form {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.p-form__header {
	display: flex;
	align-items: center;
	margin: 0;
}

.p-form__contetns {
  margin: 0;
}

.p-form__title {
	margin: 0;
  padding: 0;
}

.p-form__list {
	display: flex;
	flex-direction:column;
  margin: 0;
  padding: 0;
	list-style: none;
}

.p-form__item {
	flex-basis: 100%;
  margin: 0;
  padding: 0;
}

.p-form__item label {
	display: block;
	position: relative;
	margin: 0;
  padding-left: 2.8rem;
	color: #313131;
	font-size: 1.8rem;
  line-height: 1.5;
	font-weight: normal;
  cursor: pointer;
}

.p-form__item label::before {
  content: '';
  width: 1.8rem;
  height: 1.8rem;
  display: inline-block;
  position: absolute;
  top: 0.4rem;
  left: 0;
  background-color: #fff;
  box-shadow: none;
  border-radius: 50%;
  border: solid 0.2rem #cdcdcd;
  vertical-align: middle;
}

.p-form__item input[type=radio], 
.p-form__item input[type=checkbox] {
  display: none;
}

.p-form__item input[type=radio]:checked + label::before,  
.p-form__item input[type=checkbox]:checked + label::before {
  content: '\25CF';
  font-size: 1.4rem;
  color: #fb5f71;
  background-color: #fff;
  line-height: 1.8rem;
  text-align: center;
}

@media screen and (max-width:959px) {
.p-form__item label {
  padding-left: 3.6rem;
	font-size: 2.4rem;
}

.p-form__item label::before {
  width: 2.4rem;
  height: 2.4rem;
  top: 0.6rem;
  border: solid 0.2rem #cdcdcd;
}

.p-form__item input[type=radio], 
.p-form__item input[type=checkbox] {
}

.p-form__item input[type=radio]:checked + label::before,  
.p-form__item input[type=checkbox]:checked + label::before {
  font-size: 2.0rem;
  color: #fb5f71;
  line-height: 2.4rem;
}
}

@media screen and (max-width:559px) {
.p-form__item label {
  padding-left: 2.8rem;
	font-size: 1.8rem;
}

.p-form__item label::before {
  width: 1.8rem;
  height: 1.8rem;
  top: 0.4rem;
  border: solid 0.2rem #cdcdcd;
}

.p-form__item input[type=radio], 
.p-form__item input[type=checkbox] {
}

.p-form__item input[type=radio]:checked + label::before,  
.p-form__item input[type=checkbox]:checked + label::before {
  font-size: 1.4rem;
  color: #fb5f71;
  line-height: 1.8rem;
}
}




/* [Decoration]CheckBox
   ================================================================= */

.p-form--checkbox {
}

.p-form__item--checkbox label::before {
  border: solid 0.2rem #cdcdcd;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
}

.p-form__item--checkbox input[type=checkbox]:checked + label::before {
  content: url("../img/form/icon_check_01.png");
}

@media screen and (max-width:959px) {
.p-form--checkbox {
}

.p-form__item--checkbox label::before {
  border: solid 0.2rem #cdcdcd;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
}

.p-form__item--checkbox input[type=checkbox]:checked + label::before {
  content: url("../img/form/icon_check_01_tab.png");
}
}

@media screen and (max-width:559px) {
.p-form--checkbox {
}

.p-form__item--checkbox label::before {
  border: solid 0.2rem #cdcdcd;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
}

.p-form__item--checkbox input[type=checkbox]:checked + label::before {
  content: url("../img/form/icon_check_01_sp.png");
}
}




/* [Decoration]Radio
   ================================================================= */

.p-form__item--radio label {
	display: block;
	position: relative;
	margin: 0;
	padding-left: 1.5em;
	font-size: inherit;
	line-height: inherit;
	font-weight: normal;
	cursor: pointer;
}

.p-form__item--radio label::before {
	content: '\25CF';
	width: 1.0em;
	height: 1.0em;
	display: inline-block;
	position: absolute;
	top: 0.2em;
	left: 0;
	background-color: #fff;
	box-shadow: none;
	border-radius: 50%;
	border: solid 0.1em #cdcdcd;
	vertical-align: middle;
	color: #fff;
	font-size: 1.0em;
	line-height: 1.0em;
	text-align: center;
}

.p-form__item--radio input[type=radio]:checked + label::before {
	color: #fb5f71;
	font-size: inherit;
	line-height: 0.9em;
}

@media screen and (max-width:959px) {
}

@media screen and (max-width:559px) {
}





/* ======================================================================
   お問い合わせフォーム（WPプラグイン：Contact Form 7）
   ====================================================================== */

.p-contact-form {
  max-width: 80%;
  margin: 0 auto;
  padding: 0;
}

.p-contact-form__header {
	display: flex;
	align-items: center;
	margin: 0;
}

.p-contact-form__contetns {
  margin: 0;
}

.p-contact-form__title {
	margin: 0;
  padding: 0;
}

.p-contact-form__list {
	display: flex;
	flex-direction: row;
  margin: 0;
  padding: 0;
	list-style: none;
}

.p-contact-form__list--column-2 {
	justify-content: space-between;
}

.p-contact-form__item {
	flex-basis: 100%;
  margin: 0;
  padding: 0;
}

.p-contact-form__item--column-2 {
	flex-basis: 48%;
}

.p-contact-form__item-name {
}

.p-contact-form__item-name label {
	display: block;
	margin: 0;
  padding: 0.5em 0;
  font-size: 1.0em;
  font-weight: normal;
}

.p-contact-form__item-input {
	width: 100%;
	padding: 0.25em 0.5em;
	border: solid 0.1rem #ccc;
	border-radius: 0.2em;
}

.p-contact-form__item-textarea {
	width: 100%;
	padding: 0.25em 0.5em;
	border: solid 0.1rem #ccc;
	border-radius: 0.2em;
}

.p-contact-form__button {
	display: block;
  width: 100%;
  margin: 0.5em auto 0;
}

.p-contact-form__button input {
  display: block;
	width: 100%;
  margin: 0 auto;
	padding: 0.6em;
  background-color: var(--keycolor-main);
  border: none;
	border-radius: 0.2em;
  cursor: pointer;
	color: #fff;
  font-size: 1.0em;
  font-weight: bold;
  text-align: center;
	transition: 0.3s;
}

.p-contact-form__button input:hover,
.p-contact-form__button input:active,
.p-contact-form__button input:focus {
	outline: none;
  opacity: 0.8;
	transition: 0.3s;
}

@media screen and (max-width:959px) {
.p-contact-form {
  max-width: 80%;
}

.p-contact-form__list {
	flex-direction: row;
}

.p-contact-form__list--column-2 {
	justify-content: space-between;
}

.p-contact-form__item {
	flex-basis: 100%;
}

.p-contact-form__item--column-2 {
	flex-basis: 48%;
}
}

@media screen and (max-width:559px) {
.p-contact-form {
  max-width: 90%;
}

.p-contact-form__list {
	flex-direction: column;
}

.p-contact-form__list--column-2 {
	justify-content: flex-start;
}

.p-contact-form__item {
	flex-basis: 100%;
}

.p-contact-form__item--column-2 {
	flex-basis: 100%;
}
}





/* ======================================================================
   詳細検索フォーム（WPプラグイン：Contact Form 7）
   ====================================================================== */

.l-section--detailed-search form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0;
	padding: 0.5em;
	font-size: 0.825em;
}

.fe-advanced-search__search-item {
	position:relative;
	flex-basis: 25%;
	padding: 0.25em;
}

.fe-advanced-search__search-item::after {
	position: absolute;
	top: 50%;
	right: 0.75em;
	margin-top: -0.75em;
	color: #333;
	font-family: "Font Awesome 5 Free";
  content: '\f078';
	font-weight: 900;
	pointer-events: none;
}

.fe-advanced-search__search-item select {
	width: 100%;
	margin: 0;
	padding: 0.75em 0.5em;
	background: var(--keycolor-sub);
	border: none;
	border-radius: 0.25em;
	line-height: 1.25;
}

.fe-advanced-search__search-button {
	display: flex;
	position:relative;
	flex-basis: 25%;
	padding: 0.25em;
}

.fe-advanced-search__search-button::before {
	display: flex;
	position: absolute;
	top: 50%;
	left: 0.75em;
	margin-top: -0.75em;
	color: #fff;
	font-family: "Font Awesome 5 Free";
  content: '\f192';
	font-weight: 900;
	pointer-events: none;
}

.fe-advanced-search__search-button input {
	flex-basis: 100%;
	padding: 0.35em;
	background: var(--keycolor-main);
	border: solid 0.125em var(--keycolor-main);
	border-radius: 0.25em;
	color: #fff;
	line-height: 1;
	font-weight: bold;
}

@media screen and (max-width:959px) {
.l-section--detailed-search form {
	font-size: 0.8em;
}

.fe-advanced-search__search-item {
	flex-basis: 25%;
}

.fe-advanced-search__search-button {
	flex-basis: 25%;
}
}

@media screen and (max-width:559px) {
.l-section--detailed-search form {
	font-size: 0.75em;
}

.fe-advanced-search__search-item {
	flex-basis: 33.33%;
}

.fe-advanced-search__search-button {
	flex-basis: 33.33%;
}
}






/* ################################################################################
   Object_Project_Widget（ウィジェット）
   ################################################################################ */


/* ======================================================================
   Widget_Sidebar（サイドバーのウィジェット）
   ====================================================================== */


/* [Foundation]汎用
   ================================================================= */

.p-widget {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--layout-site-bothends-padding);
	background: var(--bgcolor-content);
  font-size: 0.875em;
}

.p-widget__list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
	margin: 0;
  padding: 0;
}

.p-widget__item {
	flex-basis: 48%;
	margin: 0 0 var(--layout-content-margin-bottom);
	padding: 0;
	background: var(--link-bgcolor);
}
.p-widget__item:last-child {
	margin-bottom: 0;
}

/* サイドバーへのウィジェット登録時のレイアウト微調整 */
.l-main-contents__secondary--article-ad .p-widget__item {
	flex-basis: 48%;
}

.p-widget__item ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.p-widget__item ul li {
	margin: 0;
	padding: 0;
	background: var(--link-bgcolor);
}

.p-widget__item ul li a {
	display: block;
	padding: 0.75em;
	background: var(--link-bgcolor);
	color: inherit;
}
.p-widget__item ul li a:hover {
	background: var(--link-bgcolor-hover);
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width:959px) {
.p-widget {
	font-size: 0.75em;
}
	
.p-widget__item {
	flex-basis: 48%;
}
}

@media screen and (max-width:559px) {
.p-widget {
  font-size: 0.875em;
}
	
.p-widget__item {
	flex-basis: 100%;
}
}





/* ======================================================================
   Widget_Widget Main（記事紹介枠のウィジェット）
   ====================================================================== */


/* [ウィジェット]汎用
   ================================================================= */

.p-widget-main {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  font-size: 0.875em;
}

.p-widget-main__list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
	margin: 0;
  padding: 0;
}

.p-widget-main__item {
	flex-basis: 48%;
	margin: 0 0 var(--layout-content-margin-bottom);
	padding: 0;
  background: var(--link-bgcolor);
}
.p-widget-main__item:last-child {
	margin-bottom: 0;
}

.p-widget-main__item ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.p-widget-main__item ul li {
	margin: 0;
	padding: 0;
	background: var(--link-bgcolor);
}

.p-widget-main__item ul li a {
	display: block;
	padding: 0.75em;
	background: var(--link-bgcolor);
	color: inherit;
}
.p-widget-main__item ul li a:hover {
	background: var(--link-bgcolor-hover);
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width:959px) {
.p-widget-main {
  font-size: 0.75em;
}
	
.p-widget-main__item {
	flex-basis: 48%;
}
}

@media screen and (max-width:559px) {
.p-widget-main {
  font-size: 0.875em;
}
	
.p-widget-main__item {
	flex-basis: 100%;
}
}





/* ======================================================================
   Widget_Functions（ウィジェットの機能各種）
   ====================================================================== */


/* [ウィジェット]テキスト
   ================================================================= */

/*  WordPressの「ウィジェットの基本機能」として利用できます。 */
/*  「利用できるウィジェット」から、「テキスト」を選び、登録してください。 */


.textwidget {
}

.textwidget p {
}




/* [ウィジェット]画像
   ================================================================= */

/*  WordPressの「ウィジェットの基本機能」として利用できます。 */
/*  「利用できるウィジェット」から、「画像」を選び、登録してください。 */


.image {
	width: 100%;
  height: auto;
  padding: 0;
}
.image:hover {
  opacity: 0.7;
}




/* [ウィジェット]カテゴリー別記事一覧のメニュー
   ================================================================= */

/* ウィジェット「カスタムHTML」に登録可能。 */
/* ショートコード"navigetion-category-menu"を記載する事で、表示されます。 */
/* [originalphp file='navigetion-category-menu'] */


.p-category-menu {
	max-width: 100%;
}

.p-category-menu .p-category-menu__list {
  list-style-type: none;
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
	background: var(--link-bgcolor);
}

.p-category-menu .cat-item {
  flex-basis: 50%;
  margin: 0;
  padding: 0;
}

.p-category-menu .cat-item a {
  display: block;
  margin: 0;
  padding: 0.75em;
	background: var(--link-bgcolor);
	color: inherit;
}
.p-category-menu .cat-item a:hover {
	background: var(--link-bgcolor-hover);
	color: inherit;
  text-decoration: none;
}




/* [ウィジェット]タグクラウド（現在未調整）
   ================================================================= */

/*  WordPressの「ウィジェットの基本機能」として利用できます。 */
/*  「利用できるウィジェット」から、「タグクラウド」を選び、登録してください。 */


.tagcloud {
	display: flex;
	flex-wrap: wrap;
	background: var(--link-bgcolor);
}

.tag-cloud-link {
  display: block;
  margin: 0;
  padding: 0.75em;
	background: var(--link-bgcolor);
	color: inherit;
	font-size: inherit !important;
}
.tag-cloud-link:hover {
	background: var(--link-bgcolor-hover);
	color: inherit;
  text-decoration: none;
}






/* ################################################################################
   Site Appearance Change（サイト外観の変更）
   ################################################################################ */


/* ======================================================================
   Site Layout Pattern（サイトレイアウトのパターン別一括指定）
   ====================================================================== */

/* 「div.l-container」のClassセレクタに、反映させたいセレクタ名を記載してください。 */


/* サイトレイアウト_パターン01
   ================================================================= */


/* ------------------------------------------------------------
   CSS変数
   ------------------------------------------------------------ */

.site-layout-01 {
	/* [レイアウト]コンテンツ領域の横幅 */
	--layout-width-basic: 102.4rem;
	/* [レイアウト]コンテンツ領域の横幅_メイン */
	--layout-width-main-primary: 72.4rem;
	/* [レイアウト]コンテンツ領域の横幅_サブ */
	--layout-width-main-secondary: 30.0rem;
}

@media screen and (max-width:959px) {
.site-layout-01 {
/* [ページ全体]コンテンツ領域の横幅 */
--layout-width-basic: 100%;
/* [Main]コンテンツ領域の横幅_メイン */
--layout-width-main-primary: 100%;
/* [Main]コンテンツ領域の横幅_サブ */
--layout-width-main-secondary: 100%;
}
}

@media screen and (max-width:559px) {
.site-layout-01 {
/* [ページ全体]コンテンツ領域の横幅 */
--layout-width-basic: 100%;
/* [Main]コンテンツ領域の横幅_メイン */
--layout-width-main-primary: 100%;
/* [Main]コンテンツ領域の横幅_サブ */
--layout-width-main-secondary: 100%;
}
}



/* ------------------------------------------------------------
   サイト全体のスタイル調整
   ------------------------------------------------------------ */

.site-layout-01 .l-main-contents {
	flex-wrap: nowrap;
  padding-top: var(--space-150-basic);
}

.site-layout-01 .l-main-contents--article-ad {
	flex-wrap: wrap;
	padding-top: 0;
}

.site-layout-01 .l-main-contents__primary {
	margin-top: 0;
}

.site-layout-01 .l-main-contents__secondary {
	padding-left: var(--space-150-basic);
}

.site-layout-01 .l-main-contents__secondary--article-ad {
  flex-basis: var(--layout-width-main-primary);
	min-width: var(--layout-width-main-primary);
	padding-left: 0;
}

.site-layout-01 .l-section--site-visual {
	margin-bottom: 0;
}

.site-layout-01 .p-widget {
	padding: calc(var(--layout-site-bothends-padding) * 0.73);
	font-size: 0.75em;
}

.site-layout-01 .p-widget__item {
	flex-basis: 100%;
}

@media screen and (max-width:959px) {
.site-layout-01 .l-main-contents {
	flex-wrap: wrap;
}

.site-layout-01 .l-main-contents__secondary {
	padding-left: 0;
}

.site-layout-01 .p-widget {
	padding: var(--layout-site-bothends-padding);
	font-size: 0.75em;
}

.site-layout-01 .p-widget__item {
	flex-basis: 48%;
}
}

@media screen and (max-width:559px) {
.site-layout-01 .l-main-contents {
	flex-wrap: wrap;
}

.site-layout-01 .l-main-contents__secondary {
	padding-left: 0;
}
	
.site-layout-01 .p-widget {
	padding: var(--layout-site-bothends-padding);
	font-size: 0.875em;
}
	
.site-layout-01 .p-widget__item {
	flex-basis: 100%;
}
}





/* ======================================================================
   Site Design Pattern（サイトデザインのパターン別一括指定）
   ====================================================================== */

/* 「div.l-container」のClassセレクタに、反映させたいセレクタ名を記載してください。 */


/* サイトデザイン_パターン01
   ================================================================= */

/* 「ページ全体の背景色」と「コンテンツの背景色」、それぞれに異なる色を指定し、二重に重ねたサイトデザインです。 */


/* ------------------------------------------------------------
   CSS変数
   ------------------------------------------------------------ */

.site-design-01 {
	/* [レイアウト]各コンテンツの下端の余白（Margin） */
	--layout-site-bothends-padding: var(--space-150-basic);
	/* [レイアウト]各コンテンツの左右両端の隙間（Padding）※片側のみの指定 */
	--layout-content-margin-bottom: var(--space-150-basic);
}

@media screen and (max-width:959px) {
.site-design-01 {
  /* [ページ全体]Padding_レイアウト各要素の左右両端（片側のみの数値） */
  --layout-site-bothends-padding: var(--space-125-basic);
	/* [レイアウト]margin_レイアウト各要素の下端の余白 */
	--layout-content-margin-bottom: var(--space-125-basic);
}
}

@media screen and (max-width:559px) {
.site-design-01 {
  /* [ページ全体]Padding_レイアウト各要素の左右両端（片側のみの数値） */
  --layout-site-bothends-padding: var(--space-075-basic);
	/* [レイアウト]margin_レイアウト各要素の下端の余白 */
	--layout-content-margin-bottom: var(--space-075-basic);
}
}



/* ------------------------------------------------------------
   サイト全体のスタイル調整
   ------------------------------------------------------------ */

.site-design-01 .l-header-contents {
	padding: 0;
}

.site-design-01 .l-header-contents--title-wide {
	padding-left: 0;
	padding-right: 0;
}

.site-design-01 .l-main-contents {
	padding-top: var(--layout-site-bothends-padding);
}

.site-design-01 .l-main-contents__primary {
	margin-top: 0;
	margin-bottom: var(--layout-content-margin-bottom);
}

.site-design-01 .l-main-contents__secondary {
	margin-bottom: var(--layout-content-margin-bottom);
}

.site-design-01 .l-section--site-visual, 
.site-design-01 .l-section--recommended-articles {
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.site-design-01 .l-section--article-list, 
.site-design-01 .l-section--article-comments, 
.site-design-01 .l-section--article-attachment, 
.site-design-01 .l-section--widget-main, 
.site-design-01 .l-section--page-export {
  padding: var(--layout-site-bothends-padding);
}

.site-design-01 .p-widget {
	margin: 0;
  padding: var(--layout-site-bothends-padding);
}

.site-design-01 .p-article {
	margin-bottom: var(--layout-content-margin-bottom);
}

.site-design-01 .p-article-header {
	margin: 0;
}

.site-design-01 .p-breadcrumb__list {
	padding: 1.0em 0;
}

.site-design-01 .p-navi__list--site-navi {
	padding-left: 0;
	padding-right: 0;
}

.site-design-01 .footer-infomation {
	padding-left: 0;
	padding-right: 0;
}

@media screen and (max-width:959px) {
.site-design-01 .l-header-contents {
	padding: 0 var(--layout-site-bothends-padding);
}

.site-design-01 .l-header-contents--title-wide {
	padding-left: 0;
	padding-right: 0;
}

.site-design-01 .l-section--recommended-articles, 
.site-design-01 .l-section--article-list, 
.site-design-01 .l-section--article-comments, 
.site-design-01 .l-section--article-attachment, 
.site-design-01 .l-section--widget-main, 
.site-design-01 .l-section--page-export {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-widget {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-article-header {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-article-contents {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-breadcrumb__list {
	padding-left: var(--layout-site-bothends-padding);
  padding-right: var(--layout-site-bothends-padding);
}
	
.site-design-01 .p-navi__list--site-navi {
	padding-left: var(--layout-site-bothends-padding);
	padding-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-browse-in-order {
	padding: 0;
}

.site-design-01 .footer-infomation {
	padding-left: var(--layout-site-bothends-padding);
	padding-right: var(--layout-site-bothends-padding);
}
}

@media screen and (max-width:559px) {
.site-design-01 .l-header-contents {
	padding: 0 var(--layout-site-bothends-padding);
}

.site-design-01 .l-header-contents--title-wide {
	padding-left: 0;
	padding-right: 0;
}

.site-design-01 .l-section--recommended-articles, 
.site-design-01 .l-section--article-list, 
.site-design-01 .l-section--article-comments, 
.site-design-01 .l-section--article-attachment, 
.site-design-01 .l-section--widget-main, 
.site-design-01 .l-section--page-export {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-widget {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-article-header {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-article-contents {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-breadcrumb__list {
	padding-left: var(--layout-site-bothends-padding);
  padding-right: var(--layout-site-bothends-padding);
}

.site-design-01 .p-navi__list--site-navi {
	padding-left: 0;
	padding-right: 0;
}

.site-design-01 .p-browse-in-order {
	padding: 0;
}

.site-design-01 .footer-infomation {
	padding-left: var(--layout-site-bothends-padding);
	padding-right: var(--layout-site-bothends-padding);
}
}




/* サイトデザイン_パターン02
   ================================================================= */

/* 「ページ全体の背景色」と「コンテンツの背景色（半透明）」、それぞれに異なる色を指定し、二重に重ねたサイトデザインです。 */
/* サイト背景に、写真画像を用いると、デザインが映えるようになります。 */


/* ------------------------------------------------------------
   CSS変数
   ------------------------------------------------------------ */

.site-design-02 {
	/* [レイアウト]コンテンツ領域の横幅 */
  --layout-width-basic: 102.4rem;
  /* [レイアウト]コンテンツ領域の横幅_メイン */
  --layout-width-main-primary: 72.4rem;
  /* [レイアウト]コンテンツ領域の横幅_サブ */
  --layout-width-main-secondary: 72.4rem;
	
	/* [レイアウト]各コンテンツの下端の余白（Margin） */
	--layout-site-bothends-padding: var(--space-150-basic);
	/* [レイアウト]各コンテンツの左右両端の隙間（Padding）※片側のみの指定 */
	--layout-content-margin-bottom: var(--space-150-basic);
	
	/* [ページ全体]背景カラー_content */
	--bgcolor-content: rgba(255, 255, 255, 0.8);
	
	/* [メニュー]リストの背景色 */
  --link-bgcolor: none;
  /* [メニュー]リストの背景色_マウスオン */
  --link-bgcolor-hover: rgba(255, 255, 255, 1.0);
}

@media screen and (max-width:959px) {
.site-design-02 {
	/* [レイアウト]コンテンツ領域の横幅 */
  --layout-width-basic: 100%;
  /* [レイアウト]コンテンツ領域の横幅_メイン */
  --layout-width-main-primary: 100%;
  /* [レイアウト]コンテンツ領域の横幅_サブ */
  --layout-width-main-secondary: 100%;
	
  /* [ページ全体]Padding_レイアウト各要素の左右両端（片側のみの数値） */
  --layout-site-bothends-padding: var(--space-125-basic);
	/* [レイアウト]margin_レイアウト各要素の下端の余白 */
	--layout-content-margin-bottom: var(--space-125-basic);
}
}

@media screen and (max-width:559px) {
.site-design-02 {
	/* [レイアウト]コンテンツ領域の横幅 */
  --layout-width-basic: 100%;
  /* [レイアウト]コンテンツ領域の横幅_メイン */
  --layout-width-main-primary: 100%;
  /* [レイアウト]コンテンツ領域の横幅_サブ */
  --layout-width-main-secondary: 100%;
	
  /* [ページ全体]Padding_レイアウト各要素の左右両端（片側のみの数値） */
  --layout-site-bothends-padding: var(--space-075-basic);
	/* [レイアウト]margin_レイアウト各要素の下端の余白 */
	--layout-content-margin-bottom: var(--space-075-basic);
}
}



/* ------------------------------------------------------------
   サイト全体のスタイル調整
   ------------------------------------------------------------ */

.site-design-02 .l-header-contents {
	padding: 0;
}

.site-design-02 .l-header-contents--title-wide {
	padding-left: 0;
	padding-right: 0;
}

.site-design-02 .l-header-contents--article-ad {
	max-width: var(--layout-width-basic);
}

.site-design-02 .l-main-contents--article-ad {
	max-width: var(--layout-width-basic);
}

.site-design-02 .l-main-contents__primary {
	margin-top: var(--layout-content-margin-bottom);
}

.site-design-02 .l-main-contents__primary--single, 
.site-design-02 .l-main-contents__primary--article-ad {
	flex-basis: var(--layout-width-basic);
	max-width: var(--layout-width-basic);
	margin-top: var(--layout-content-margin-bottom);
}

.site-design-02 .l-main-contents__secondary {
	margin-bottom: var(--layout-content-margin-bottom);
}

.site-design-02 .l-section--site-visual, 
.site-design-02 .l-section--recommended-articles {
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.site-design-02 .l-section--article-list, 
.site-design-01 .l-section--article-comments, 
.site-design-02 .l-section--article-attachment, 
.site-design-02 .l-section--widget-main, 
.site-design-02 .l-section--page-export {
	max-width: var(--layout-width-main-primary);
  padding: var(--layout-site-bothends-padding);
}

.site-design-02 .p-widget {
	margin: 0;
  padding: var(--layout-site-bothends-padding);
}

.site-design-02 .p-widget__item {
	flex-basis: 48%;
}

.site-design-02 .p-article-header {
	margin: 0;
}

.site-design-02 .p-article-contents {
	max-width: var(--layout-width-main-primary);
	margin: var(--layout-content-margin-bottom) auto 0;
  padding-top: var(--layout-site-bothends-padding);
	padding-bottom: var(--layout-site-bothends-padding);
}

.site-design-02 .l-main-contents__primary--page .p-article-header {
	margin-top: 0;
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
	padding-top: 0;
}

.site-design-02 .l-main-contents__primary--page .p-article-contents {
	margin-top: 0;
	padding-top: 0;
}

.site-design-02 .p-article-title {
	font-size: 1.2em;
}

.site-design-02 .p-article-meta-infomation {
	font-size: 0.8em;
}

.site-design-02 .p-breadcrumb__list {
	padding: 1.0em 0;
}

.l-footer-contents--article-ad {
	max-width: var(--layout-width-basic);
}

.site-design-02 .p-navi__list--site-navi {
	padding-left: 0;
	padding-right: 0;
}

.site-design-02 .footer-infomation {
	padding-left: 0;
	padding-right: 0;
}

.site-design-02 blockquote {
	background: #fff;
}

.site-design-02 .wp-caption {
	background: #fff;
}

@media screen and (max-width:959px) {
.site-design-02 .l-header-contents {
	padding: 0 var(--layout-site-bothends-padding);
}

.site-design-02 .l-header-contents--title-wide {
	padding-left: 0;
	padding-right: 0;
}

.site-design-02 .l-section--recommended-articles, 
.site-design-02 .l-section--article-list, 
.site-design-01 .l-section--article-comments, 
.site-design-02 .l-section--article-attachment, 
.site-design-02 .l-section--widget-main, 
.site-design-02 .l-section--page-export {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-02 .p-widget {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-02 .p-widget__item {
	flex-basis: 48%;
}

.site-design-02 .p-article-header {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-02 .p-article-contents {
	margin-top: var(--layout-content-margin-bottom);
	margin-left: var(--layout-site-bothends-padding);
	margin-right: var(--layout-site-bothends-padding);
}

.site-design-02 .p-breadcrumb__list {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}
	
.site-design-02 .p-navi__list--site-navi {
	padding-left: var(--layout-site-bothends-padding);
	padding-right: var(--layout-site-bothends-padding);
}

.site-design-02 .footer-infomation {
	padding-left: var(--layout-site-bothends-padding);
	padding-right: var(--layout-site-bothends-padding);
}
}

@media screen and (max-width:559px) {
.site-design-02 .l-header-contents {
	padding: 0 var(--layout-site-bothends-padding);
}

.site-design-02 .l-header-contents--title-wide {
	padding-left: 0;
	padding-right: 0;
}

.site-design-02 .l-section--recommended-articles, 
.site-design-02 .l-section--article-list, 
.site-design-01 .l-section--article-comments, 
.site-design-02 .l-section--article-attachment, 
.site-design-02 .l-section--widget-main, 
.site-design-02 .l-section--page-export {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-02 .p-widget {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-02 .p-widget__item {
	flex-basis: 100%;
}

.site-design-02 .p-article-header {
	margin-left: 0;
  margin-right: 0;
}

.site-design-02 .p-article-contents {
	margin-top: var(--layout-content-margin-bottom);
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-02 .p-breadcrumb__list {
	margin-left: var(--layout-site-bothends-padding);
  margin-right: var(--layout-site-bothends-padding);
}

.site-design-02 .p-navi__list--site-navi {
	padding-left: 0;
	padding-right: 0;
}

.site-design-02 .footer-infomation {
	padding-left: var(--layout-site-bothends-padding);
	padding-right: var(--layout-site-bothends-padding);
}
}





/* ======================================================================
   Site Design Pattern & Site Layout Pattern（サイトレイアウトとサイトデザインの複合指定）
   ====================================================================== */


/* ------------------------------------------------------------
   site-layout-01 & site-design-01
   ------------------------------------------------------------ */

.site-layout-01.site-design-01 .p-widget {
	padding: calc(var(--layout-site-bothends-padding) * 0.73);
}

.site-layout-01.site-design-01 .l-main-contents--article-ad .p-widget {
	font-size: 0.875em;
}

.site-layout-01.site-design-01 .l-main-contents--article-ad .p-widget__item {
	flex-basis: 48%;
}

@media screen and (max-width:959px) {
.site-layout-01.site-design-01 .p-widget {
	padding: var(--layout-site-bothends-padding);
}

.site-layout-01.site-design-01 .l-main-contents--article-ad .p-widget {
}

.site-layout-01.site-design-01 .l-main-contents--article-ad .p-widget__item {
	flex-basis: 48%;
}
}

@media screen and (max-width:559px) {
.site-layout-01.site-design-01 .p-widget {
	padding: var(--layout-site-bothends-padding);
}

.site-layout-01.site-design-01 .l-main-contents--article-ad .p-widget {
}

.site-layout-01.site-design-01 .l-main-contents--article-ad .p-widget__item {
	flex-basis: 100%;
}
}