/*
Theme Name: custom-design
Theme URI: 
Template: lightning
Description: 
Author: te.to.te
Tags: 
Version: 1.0.0
*/

/* =====================

サイト共通基本設定

===================== */

/* フォント */
body, html {
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight: 400;
}
.mincho {
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

/* リンクカラー */
a:hover {
	color: var(--vk-color-text-body);
}

.vk_button-color-custom a:hover {
    -webkit-box-shadow: initial;
    box-shadow: initial;
}

/* コンテンツエリア */
@media (min-width: 1200px) {
	.container {
		max-width: 960px;
	}
}

/* ヘッダー */
#header-bar {
	height: 1rem;
	    background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://from-tetote.com/wordpress/wp-content/uploads/2023/02/color-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
}

/* ヘッダー・ロゴ・メニュー（プルダウン設定もあり） */
.shoulder {
	position: relative;
	z-index: 99999;
	font-size: 0.7rem;
	margin-bottom: 0.5rem;
}

h1.site-header-logo {
    width: 200px !important;
}

.site-header-logo img {
	max-height: 30px;
	display: initial;
}

@media (max-width: 991.98px) {
	.site-header-logo {
		padding-top: 1rem;
		margin-bottom: 0.7rem;
		white-space: normal;
	}
	.global-nav {
		display: none !important;
	}
}

.site-header--layout--nav-float .site-header-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (min-width: 992px) {
	.site-header--layout--nav-float .site-header-logo {
		margin-right: 0;
	}
	
	.site-header-logo {
		text-align: center;
		margin-bottom: 0.2em;
	}
}

body:not(.header_scrolled) .global-nav--layout--float-right {
	display: flex;
	align-items: center;
	justify-content: center;
}

.global-nav-list li {
	line-height: 0;
}

.global-nav--layout--float-right {
	width: auto;
	margin-left: 0;
}

.device-pc .global-nav-list>li>a {
	padding: 24px 1.5em;
}

.global-nav-list .sub-menu li a {
	padding: 24px 1.2em;
	border-bottom: 1px solid rgba(255,255,255,.15);
	display: block;
}


.device-pc .global-nav-list>li>a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.device-pc .global-nav-list>li>a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: var(--vk-color-primary-vivid);
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
.device-pc .global-nav-list>li>a:hover::after {
  transform: scale(1, 1);
}
.global-nav-list .sub-menu {
	text-align: center;
}

.header_scrolled .site-header {
    background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://from-tetote.com/wordpress/wp-content/uploads/2023/02/color-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
}

.site-body {/* 編集エリアのみ色を変える場合使用 */}

.site-footer {
	    background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://from-tetote.com/wordpress/wp-content/uploads/2023/02/color-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
}

.footer-nav {
    padding: 1em 0;
    line-height: 1;
    text-align: center;
}

/* フッターメニュー */
.footer-nav {
    background-color: #fff;
}

.footer-nav li {
    padding: 0.5em 1em;
}

.footer-nav-list li a {
	padding-top: 0;
	padding-bottom: 0;
}

/* フッターコピーライト */
.site-footer-copyright p:nth-child(2) {
    display:none;
}

/* 上に戻るボタン */
.page_top_btn {
	right: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--vk-color-primary);
	box-shadow: none;
	z-index: 10;
}

/* =====================

トップページ設定

===================== */
p.greetings-lead {
    max-width: 960px;
    margin: 0 auto;
}

.is-background { /* ディスプレイ横いっぱいに背景を入れるパターン */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 2rem 0;
}

.is-blog-bg {
	background-color: var(--vk-color-accent-bg);
	border-radius: var(--vk-size-radius-lg);
}

.is-style-vk-heading-brackets_black::before { /* 黒囲みの幅 */
    left: 20%;
}

.is-style-vk-heading-brackets_black::after {
    right: 20%;
}


@media (min-width: 600px) {
	.wp-block-post-template.is-flex-container.is-flex-container.columns-4>li {
		width: calc(50% - 0.9375em);
	}
}

@media (min-width: 992px) {
	.wp-block-post-template.is-flex-container.is-flex-container.columns-4>li {
		width: calc(25% - 0.9375em);
	}
}

.latest-day {
	font-size: 0.8rem;
}

.latest-title {
	font-size: 1rem;
}

section.info {
	padding: 1rem 1rem 0.5rem 1rem;
	background-color: var(--vk-color-accent-bg);
	border-radius: var(--vk-size-radius-lg);
}

section.info li {
    border-bottom: 1px dashed #bcbcbc;
    margin-bottom: 1rem !important;
}


/* =====================

サブページ設定

===================== */

.about-bg,
.works-bg,
.blog-bg,
.info-bg,
.contact-bg,
.privacy-bg {
	background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://from-tetote.com/wordpress/wp-content/uploads/2023/02/color-bg.jpg) no-repeat;
}

.about-bg,
.works-bg,
.blog-bg,
.info-bg,
.contact-bg,
.privacy-bg {
	background-size: cover;
	background-position: center center;
}

h1.page-header-title,
.page-header-title {
	letter-spacing: 5px;
}

.breadcrumb {
	padding: 1rem;
}

.vk_post .vk_post_btn {
    border: none;
}

.lead {
	border-radius: 0.5rem;
}

.vk_block-margin-md--margin-bottom {
	margin-bottom: 0 !important;
}

section.note {
    padding: 1rem 1rem 0.5rem 1rem;
    background-color: var(--vk-color-accent-bg);
    border-radius: var(--vk-size-radius-lg);
}

p:has(img.alignleft) {
	text-align: left;
}

p:has(img.aligncenter) {
	text-align: center;
}

p:has(img.alignright) {
	text-align: right;
}

/* カレンダー・投稿者非表示 */
.entry-meta {
	display: none;
}

/* 記事下カテゴリ名非表示 */
.entry-footer {
    margin-bottom: 0;
    display: none;
}

/* 前後記事非表示 */
.vk_posts.next-prev {
	display:none;
}

/* 一覧ページ */
@media (max-width: 767px) {
	.vk_post.media {
		flex-direction: column;
		gap: 1rem;
	}
	
	.main-section>.vk_posts>.media.vk_post-col-sm-12 .media-img {
		margin-right: 0;
	}
	
	.vk_post .media-img, .vk_post .media-body {
		width: 100%;
	}
}

/* メールフォーム */
label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: bold;
}

.required {
    background-color: #db2929;
    color: #fff;
    font-size: 0.5rem;
    line-height: 1;
    padding: 0.2rem;
}

a:has(#privacy-policy) {
	text-decoration: none;
}

input[type=submit] {
    border: none;
}

/* =====================

モバイルメニュー

===================== */

div#vk-mobile-nav {
    background: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), url(https://from-tetote.com/wordpress/wp-content/uploads/2023/02/color-bg-sp.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
}

.vk-mobile-nav .vk-mobile-nav-menu-outer {
    margin-bottom: 0;
}

.m-tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	background-color: #fff;
	border-radius: 0.5em;
	height: 100px;
}

.m-tel p {
	margin: 0;
	color: #991d44;
}

.m-tel p:first-child {
	font-size: 1.8em;
}

.m-tel p:last-child {
	width: 100%;
	text-align: center;
	font-size: 0.8em;
	padding: 0.4em 0;
	background-color: #ffdcdc;
}

.m-contact a {
	display: flex;
	font-size: 1em;
	justify-content: center;
	align-items: center;
	margin: 0 0 1em 0;
	padding: 0.9em 2em;
	color: #fff;
	border-radius: 5px;
	background-color: #991d44;
	height: 50px;
	font-size: 1.2em;
}

.m-contact a:hover {
    background-color: var(--vk-color-primary-vivid);
}