@charset "UTF-8";
/*
Theme Name: gingun
Theme URI: https://gingun.co.jp/
Description: gingun用テーマ
Version: 1.0
Author: hiro
Author URI: https://gingun.co.jp/
*/
html {
	font-size: 10px; /* 1rem = 10pxにするため */
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	color: #666;
	font-family: "Helvetica Neue",
	Arial,
	"Hiragino Kaku Gothic ProN",
	"Hiragino Sans",
	Meiryo,
	sans-serif;
	font-size: 1.6rem;
}

main {
	max-width: 940px;
	margin: auto;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

h1 {
	color: #fff;
	font-size: 4.0rem;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
}

h2 {
	margin-top: 8rem;
	font-size: 3.2rem;
}

h3 {
	margin-top: 8rem;
	font-size: 2.4rem;
}

h4 {
	margin-top: 8rem;
	font-size: 2.0rem;
}

p {
	margin-top: 3rem;
	font-size: 1.6rem;
}

li {
	list-style: none;
}

a {
	color: #666;
	text-decoration: none;
}

a:hover {
	color: #1b94e0;
	transition: 0.4s;
}

/*Googleマテリアルアイコンが上にずれるのを修正*/
.material-icons{
	display: inline-flex;
	vertical-align: -5px;
	padding-left: 0.2rem;
}

/*Googleマテリアルアイコン Mailのフォントサイズ*/
.pc-map-data .material-icons.mail {
	font-size: 1.4rem;
}

/*表示したくないコンテンツはWPで追加CSSクラス「content-hidden」を設定する*/
.content-hidden {
	display: none;
}

/* heder トップページ用 */
header.toppage {
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 100%;
	height: 80vh;
	background-image: url("images/gingun_header.jpg");
	background-position: bottom center;
	background-size: cover;
}

/* 流れ星 */
header.toppage .star-box {
	position: absolute;
	top: -6%;
	right: 75%;
	width: 100px;
	height: 100px;
	transform: rotateZ(290deg);
}

header.toppage .star {
	width: 2px;
	height: 0;
	background: linear-gradient(transparent, rgb(255, 255, 255));
	animation: shooting 8s linear infinite;
}

@keyframes shooting {
	0% {
		height: 0;
		opacity: 50%;
	}
	10% {
		height: 200px;
		opacity: 100%;
	}
	20% {
		height: 300px;
		opacity: 0;
	}
	20.01%, 100% {
		height: 0;
		opacity: 0;
	}
}

/* scroll */
header.toppage .scroll {
	position: absolute;
	bottom: 6rem;
	left: 48.6%;
}

header.toppage .scroll img {
	height: 4.2rem;
	margin: 0;
	animation: fluffy 2s ease-in-out 0.8s infinite;
}

/* ふわふわ動くアニメーション */
@keyframes fluffy {
	0% {transform: translate(0, 0);}
	50% {transform: translate(0, -7%);}
	100% {transform: translate(0, 0);}
}

header.toppage .scroll p {
	margin: 0;
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
}

header.toppage .scroll p::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -60px;
	display: inline-block;
	width: 2px;
	height: 50px;
	margin: auto;
	background-color: #fff;
}

/* Main */
#top-main h2 {
	text-align: center;
}

/*見出しの下線*/
#top-main h2:after {
	display: block;
	content: "";
	width: 8%;
	height: 2px;
	margin: 2rem auto 6rem auto;
	background: #cccccc;
}

/* Service */
#service h3 {
	margin: 0;
	padding: 20px;
	border: 2px solid #fff;
	font-size: 2.4rem;
}

#service a.service-title {
	color: #fff;
}

.service {
	row-gap: 2rem;
}

.wrap {
	display: flex;
	justify-content: center;
	position: relative;
	overflow: hidden;
	width: 48%;
	height: 32rem;
}

.box-bg {
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: transform .6s ease;
}

.wrap:hover .box-bg {
	transform: scale(1.1);
}

.consulting {
	background-image: url(images/consulting.png);
}

.marketing {
	background-image: url(images/marketing.png);
}

.promotion {
	background-image: url(images/promotion.png);
}

.webdevelopment {
	background-image: url(images/webdevelopment.png);
}

.box-text {
	position: absolute;
	bottom: 2.5rem;
	text-align: center;
}

/* Information */
#information li {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 0.4rem solid #eee;
	font-size: 1.8rem;
}

#information span {
	margin-right: 2rem;
}

/* Works */
.works {
	row-gap: 3.2rem; /*画像間の行の余白*/
}

.works-image {
	position: relative;
	width: 30%;
	height: 280px;	/*safariのスタイル崩れ防止*/
	border: 1px solid #eee;
	border-radius: 0.8rem;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.works-image img {
	height: 100%;
	object-fit: cover;
}

.works-image:hover .mask {
	bottom: 0; /*下から上がってくるように見せる*/
}

.mask {
	position: absolute;
	bottom: -102%;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.4);
	transition: all 0.6s ease;
}

.caption {
	position: absolute;
	bottom: 0;
	padding: 10px;
	background-color: #666;
	color: #fff;
}

.caption h3 {
	margin: 0;
}

/* Footer */
/* Footer */
footer {
	margin-top: 80px;
	background: #000;
}

footer h4,
footer a,
footer p,
footer li {
	margin-top: 0;
	color: #ddd;
	font-size: 1.7rem;
	line-height: 2.5rem;
}

/* フッター左 会社情報 */
.footer-logo {
	width: fit-content;
	height: 4.2rem;
}

footer h4 {
	margin-top: 2.4rem;
	font-size: 1.8rem;
}

.footerinner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 4rem;
}

.br-tag {
	display: none; /*住所の折返しなし 767以下ではあり*/
}

/* フッター中央メニュー */
footer ul {
	display: flex;
	flex-flow: column wrap;
	height: 150px;
}

.footermenu {
	width: 28%;
}

.footermenu li > a {
	font-weight: bold;
}

.footermenu .sub-menu li > a {
	font-size: 1.2rem;
}

/* フッター右 お問い合わせボタン */
.footerright a {
	display: block;
	width: 250px;
	padding: 20px 0;
}

.footerright a:hover {
	color: #666;
}

/*フッターお問い合わせボタンのアニメーション*/
.link_btn {
	position: relative;
	display: block;
	padding: 15px 15px;
	border: 4px solid #BF9B46;
	background-color: #d3ba7f;
	color: #333;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
}

.link_btn:hover:after {
	content: '';
	position: absolute;
	top: -10%;
	left: -20%;
	width: 40px;
	height: 100%;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
	transform: scale(2) rotate(20deg);
	animation-name: shiny;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes shiny {
	0% { left: -20%; }
	10% { left: 120%; }
	100% { left: 120%; }
}


/* コピーライト */
.footer-bottom {
	width: 100%;
	background: #222;
	padding: 10px;
}

.footer-bottom p {
	color: #aaa;
	text-align: center;
}

/*------------------------------
 パンくずリスト
 ------------------------------*/
ul.breadcrumb {
	padding: 10px;
	background-color: #222;
	color: #fff;
	font-size: 1.2rem;
	list-style: none;
}

ul.breadcrumb > li {
	display: inline;
}

ul.breadcrumb > li a {
	color: inherit;
	text-decoration: none;
}

ul.breadcrumb > li + li:before {
	content: ">";
	margin: 0 0.8rem;
}


/*------------------------------
 固定ページ
 ------------------------------*/
/* Web制作のトップ画像を親要素を超えて最大表示（追加クラス使用） */
main.page .header_visual {
	width: 100vw;
	overflow: hidden;
	margin: 0 calc(50% - 50vw);
}

main.page > section {
	width: 100%;
	margin: 64px auto;
}

/* 見出し１*/
/*画面横幅いっぱいに背景色を設定*/
.title_container {
	margin: 0 calc(50% - 50vw);
	background-color: #333;
}

main.page h1 {
	position: relative;
	overflow: hidden;
	width: 60%;
	margin: auto;
	padding: 16px 5px;
	background-color: #333;
	color: #fff;
	font-size: 5rem;
	font-weight: normal;
	font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
	text-align: center;
	line-height: 5.6rem;
	letter-spacing: 5px;
}

/*文字入力待機っぽい点滅*/
main.page h1::after {
	content: '';
	position: absolute;
	width: 3rem;
	bottom: 2rem;
	border-bottom: solid 3px #fff;
	animation: flash 1s linear infinite;
}

@keyframes flash {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

/* 固定ページの見出し２の装飾 */
main.page h2 {
	position: relative;
	min-height: 50px;
	padding-left: 40px;
	font-size: 3.3rem;
}

main.page h2::before {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 4px;
	height: calc(100% - 10px);
	background-color: #666;
}

/* 固定ページの見出し３の装飾 */
main.page h3.service_name {
	position: relative;
	margin: 0 0 0 -33px;
	padding: 5px 5px 5px 42px;
	background: #77c3df;
	line-height: 1.3;
	z-index: 2;
}

main.page h3.service_name:before {
	position: absolute;
	content: '';
	left: -2px;
	top: -2px;
	border: none;
	border-left: solid 40px white;
	border-bottom: solid 79px transparent;
	z-index: 1;
}

main.page h3.service_name a {
	color: #fff;
	z-index: 10;
}

/*開業医コンサルとWebシステムのh3のマージン削除*/
.consulting_medical-practitioners_h3,
.websystem_h3 {
	margin: 0;
}

/*メディアとテキストブロック上寄せ*/
main.page .wp-block-media-text__content {
	vertical-align: top;
}

/* リンク部分をマウスオーバーすると色を変える */
main.page h3 a:hover {
	color: #1b94e0;
}

/* 主な制作実績に囲い */
main.page .works-column {
	border: 1px solid #888;
	padding: 20px 30px;
}

/* 固定ページの見出し３の下に破線 */
main.page .works-column h3 {
	border-bottom: 1px dotted #888;
	padding: 10px 10px;
}

main.page .works-column p {
	padding: 0 10px;
}

/*固定ページ内のアイコンのサイズを固定にする*/
.wp-block-column .page-icon img {
	width: 64px;
	height: 64px;
}

/* check-listの装飾 */
main ul.check-list {
	list-style: none;
	border: 4px solid #C2DEFF;
	border-radius: 7px;
	padding: 35px 40px;
}

main .check-list li {
	margin: 15px 0;
	padding: 0 0 0 40px;
	font-size: 1.8rem;
	font-weight: bold;
	background: url("images/check-list.png") no-repeat left 1px;
	background-size: 30px;
}

/*エディタのボタンブロック*/
main .page .wp-block-button {
	margin-top: 24px;
}

/* 本文お問い合わせボタンのアニメーション */
.main_link_btn {
	background-color: #fff;
	position: relative;
	border: 2px solid #666;
	border-radius: 5px;
	opacity: 1;
	transition: all 0.3s ease-out;
	padding: 30px 15px;
	font-size: 1.2rem;
	text-align: center;
}

.main_link_btn:hover {
	background-color: #eee;
	opacity: 0.7;
}

.main_link_btn a {
	width: 100%;
	height: 100%;
	padding: 12px;
	font-size: 1.8rem;
}

.main_link_btn:hover a {
	color: #666;
}

.main_link_btn:active {
	color: #666;
	background-color: #000;
}

/* ３カラム使用時の枠線 */
main .mycolumn {
	border: 1px solid #888;
	border-radius: 3px;
	padding: 10px;
}

/* お客様の声 セリフふきだし */
/* ふきだしのトンガリ部分は768px以上だけ表示する */
main .serif {
	border: 2px solid #000;
	border-radius: 10px;
	margin-top: 64px;
	padding: 25px 40px 20px;
	position: relative;
}

/*------------------------------
worksページ
------------------------------*/
main.works {
	max-width: 1200px;
}

.inner {

	width: 100%;
	margin: auto;
}

main .items {
	display: flex;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
	margin: 0 auto 64px;
}

main .item {
	width: 400px;
	margin-top: 40px;
	padding: 0 25px;
}

main .item > div {
	position: relative;
	background: #f4f4f4;
	border: 1px solid #888;
}

main .item .works-content {
	display: flex;
	justify-content: center;
	height: 250px;
	border-radius: 8px 8px 0 0;
}

main .item img {
	width: 100%;
	height: 350px;
	object-fit: cover;
	object-position: top center;
	border-radius: 8px 8px 0 0;
}

main .content {
	box-sizing: border-box;
	padding: 10px 15px;
	border-radius: 0 0 8px 8px;
	word-wrap: break-word;
}

main .content h4 {
	margin: 0 0 10px 0;
}

/*------------------------------
works詳細ページ
------------------------------*/
/*works詳細の画像サイズを400*400px*/
.shingle-works-section img {
	width: 400px;
	margin-top: 40px
}

/* 実績一覧へ戻るボタン */
.works_back {
	padding-bottom: 64px;
}

.works_back a {
	display: flex; /* テキストと矢印を横並びにして、高さを作るため */
	justify-content: center; /* flexボックス中央寄せ */
	align-items: center; /* flexボックスの高さ中央寄せ */
	margin: 0 auto; /* aaaaaa要素自体の中央寄せ */
	width: 240px; /* ボタンの横幅 */
	height: 80px; /* ボタンの高さ */
	background-color: #cccccc; /* ボタン背景色 */
	border: 3px solid #aaaaaa; /* ボタンの枠線 太さ 種類 色 */
	border-radius: 50vh; /* ボタン両端の丸み */
	transition: 0.3s; /* マウスオーバー時の変化の速度 */
}

.works_back a::after {
	content: ''; /* 疑似要素で線を書く場合に必要 */
	width: 10px; /* 線の長さ */
	height: 10px; /* 線の高さ */
	border-top: 3px solid #666; /* 上辺の線 太さ 種類 色 */
	border-left: 3px solid #666; /* 左辺の線 太さ 種類  色 */
	transform: rotate(45deg); /* 疑似要素を45°傾ける これで「 が ∧ になる*/
	transition: 0.3s; /* マウスオーバー時の変化の速度 */
	margin-left: 20px; /* テキストとの間に空白を作る */
}

.works_back a:hover {
	background-color: #333333; /* マウスオーバー時の背景色 */
	color: #cccccc;
}

.works_back a:hover::after {
	border-top: 3px solid #f2f2f2; /* マウスオーバー時に線の色を変える */
	border-left: 3px solid #f2f2f2; /* マウスオーバー時に線の色を変える */
	transform: translateY(-5px) rotate(45deg); /* マウスオーバーで矢印の位置を上にずらす */
}


/* 会社概要 */
main.page dl.company {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	margin-bottom: 5rem;
}

main.page .company dt {
	width: 23%;
	margin: 0;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	line-height: 1.2rem;
	padding: 1.2em 1em 1em 0;
	vertical-align: middle;
	align-items: center;
}

main.page .company dd {
	width: 77%;
	margin: 0;
	padding: 1em 1em 1em 0;
	border-bottom: 1px solid #ccc;
	vertical-align: middle;
	line-height: 1.8;
}

main.page .company dd p {
	margin-top: 0;
}

/*------------------------------
 お問い合わせページ
 ------------------------------*/
.contact-page {
	line-height: 2;
	box-sizing: border-box;
}

/* お問い合わせフォーム */
.wpcf7 {
	margin: 64px auto; /*フォーム上下の余白*/
}

dl.contact7 {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
}

dl.contact7 p {
	margin: 0;
}

.contact7 dt {
	width: 30%;
	margin-bottom: 24px;
}

.contact7 dd {
	width: 70%;
	margin-bottom: 24px;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #888;
}

/* 人間ですか？の確認 */
.cf7-cf-turnstile {
	display: flex;
	justify-content: center;
}

.wpcf7-form input.has-spinner {
	display: block;
    max-width: 360px;
    margin: auto;
    padding: 16px;
	background-color: #005513;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid #005513;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
}

.wpcf7-form input.has-spinner:hover {
	background-color: #FFF;
	color: #005513;
}

/* 必須マーク */
.contact7 .must {
	background: #FF1A00;
}

/* 任意マーク */
.contact7 .optional {
	background: #999;
}

.contact7 .must,
.contact7 .optional {
	color: #FFF;
	border-radius: 3px;
	font-size: 10px;
	margin-left: 10px;
	padding: 5px 10px;
	letter-spacing: 2px;
}

.btn_contact7 {
	text-align: center;
}

.wpcf7 input { /* 名前入力欄、メール入力欄、タイトル入力欄 */
	width: 100%;
}

.wpcf7 textarea[name="your-message"] { /* 本文入力欄 */
	width: 100%;
}

/*------------------------------
PC用表示
------------------------------*/
@media screen and (min-width: 768px) {
	/*------------------------------
	header
	------------------------------*/
	/* ハンバーガーメニューを表示しない */
	header .hamburger-menu {
		display: none;
	}

	/*	トップページ以外にはヘッダー画像（background-image）を表示しない
		ヘッダーの幅を調整して背景色を黒色にする	*/
	header {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 10px 10px 28px 10px;
		background-color: #000;
	}

	header .header-logo {
		height: 4.2rem;
		margin: 20px 0 0 20px;
	}

	header .nav-ul {
		display: flex;
		justify-content: flex-end;
		column-gap: 20px;
		margin-top: 20px;
	}

	header li {
		position: relative;
		margin: 0;
		padding-right: 6.0rem;
		font-size: 1.8rem;
	}

	header li span {
		font-size: 1.4rem;
	}

	header li a {
		color: #fff;
	}

	/*ナビゲーションメニューのホバー時に文字に影*/
	header li a:hover {
		text-shadow: 1px 1px 2px #fff;
	}

	/*ドロップダウンサブメニュー */
	.nav-ul li .sub-menu {
		display: block;
		position: absolute;
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		transition: all .3s;
	}

	.page .nav-ul li .sub-menu,
	.single .nav-ul li .sub-menu,
	.archive .nav-ul li .sub-menu {
		background-color: #aaaaaa;
	}

	.nav-ul li .sub-menu li {
		display: block;
		width: 15rem;
		padding: 0;
	}

	li:hover .sub-menu {
		display: block;
		visibility: visible;
		opacity: 1;
	}

	.nav-ul li .sub-menu li a {
		display: block;
		font-size: 1.5rem;
		font-weight: normal;
		padding: 5px 10px;
		text-align: left;
	}

	/*トップページ以外は流れ星とスクロールを非表示*/
	body.page header .scroll,
	body.single header .scroll,
	body.page .star-box,
	body.single .star-box,
	body.archive .scroll,
	body.archive .star-box {
		display: none;
	}

	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	/*------------------------------
	Access Map
	------------------------------*/
	/*マップ左上のネームカード非表示*/
	.google-map {
		height: 500px;
		overflow: hidden;
	}

	.google-map iframe {
		height: 860px;
		margin-top: -170px;
	}

	/*会社情報をマップ上に配置*/
	#top-main section:last-child {
		position: relative;
	}

	.pc-map-data {
		position: absolute;
		top: 36%;
		right: -18vw;
		width: 400px;
		margin: auto;
		padding: 40px 50px;
		border: double 5px #eeeeee;
		background: #ffffff;
		font-size: 1.4rem;
		line-height: 2;
		z-index: 999999;
	}

	.pc-map-data-title {
		position: relative;
		margin: 0 0 3rem 0;
	}

	.pc-map-data .pc-map-data-title:after {
		content: "";
		position: absolute;
		bottom: -16px;
		display: block;
		width: 20px;
		height: 1px;
		background: #666666;
	}

	.pc-map-data dl {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.pc-map-data dl dt {
		width: 20%;
		margin-right: 20px;
	}

	.pc-map-data dl dd {
		width: 70%;
	}


	/*------------------------------
	固定ページ
	------------------------------*/
	footer .praivacy-policy {
		display: none;
	}

	/* お客様の声セリフのふきだしトンガリ部分 */
	main .serif::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: -21px;
		width: 21px;
		height: 64px;
		background: url(images/voice_serif_balloon_arrow.png) left center no-repeat;
	}

	/*------------------------------
	お問い合わせ
	------------------------------*/
	/*PCのときのボタン幅*/
	.btn_contact7 input {
		width: 30%;
	}
}

/*------------------------------
スマホ表示
------------------------------*/
@media screen and (max-width: 767px) {
	/*両脇に余白*/
	main {
		margin: 0 8px
	}

	/*下層ページのh1の表示幅*/
	main.page h1 {
		width: 96%;
		font-size: 4rem;
	}

	/*------------------------------
	SP-header
	------------------------------*/
	img.header-logo {
		height: 42px;
		margin: 20px;
	}

	/* メインビジュアルの大きさを調整 */
	header.toppage {
		height: 40vh;
		background-image: url("images/gingun_header_767.jpg");
	}

	/* 通常グローバルメニュー表示しない */
	header #nav-menu {
		display: none;
	}

	header {
		background-color: #000;
	}

	/*スクロールを非表示*/
	.scroll {
		display: none;
	}

	/*------------------------------
	SP-ハンバーガーボタンの実装
	------------------------------*/
	.menu-btn {
		position: fixed;
		top: 10px;
		right: 20px;
		display: flex;
		height: 54px;
		width: 54px;
		justify-content: center;
		align-items: center;
		z-index: 90;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.menu-btn:hover {
		cursor: pointer;
	}

	/* 三本線の実装 */
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: "";
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #fff;
		position: absolute;
	}

	.menu-btn span:before {
		bottom: 8px;
	}

	.menu-btn span:after {
		top: 8px;
	}

	/* チェックボックスを非表示にする */
	#menu-btn-check {
		display: none;
	}

	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);
		/*メニューオープン時は真ん中の線を透明にする*/
	}

	/* メニューを開いている時はハンバーガーボタンが×になる */
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}

	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/*------------------------------
	SP-メニュー部分の実装
	------------------------------*/
	.menu-content {
		height: 100%;
		position: fixed;
		top: 0;
		/* メニューを外に出しておく */
		right: -100%;

		z-index: 80;
		background-color: rgba(51, 51, 51, 0.9);
		transition: all 0.5s; /*アニメーションを滑らかにする*/
	}

	.menu-content #nav {
		padding: 70px 10px 0;
	}

	.menu-content ul.sub-menu {
		padding: 0 0 0 10px;
	}

	.menu-content ul > li {
		list-style: none;
	}

	.menu-content ul.main-menu > li {
		border-bottom: solid 1px #ffffff;
	}

	.menu-content ul.sub-menu > li:not(:last-child) {
		border-bottom: solid 1px #ffffff;
	}

	.menu-content ul li a {
		display: block;
		width: 100%;
		font-size: 15px;
		box-sizing: border-box;
		color: #ffffff;
		text-decoration: none;
		padding: 9px 15px 10px 0;
		position: relative;
	}

	#menu-btn-check:checked ~ .menu-content {
		right: 0; /*メニューを画面内へ動かす*/
	}

	header ul {
		display: flex;
		flex-direction: column;
	}

	/*------------------------------
 	SP-Service
 	------------------------------*/
	/*Serviceのコンテンツ幅を最大にして間の余白を調整*/
	.wrap {
		width: 100%;
		margin-bottom: 16px;
	}

	/*------------------------------
 	SP-Works
 	------------------------------*/
	.works-image {
		width: 80%;
		margin: 0 auto 16px;
	}

	/*------------------------------
	 SP-footer
	 ------------------------------*/
	footer .footerinner {
		font-size: 1.3rem;
	}

	footer .footerleft .br-tag { /* 住所の改行を有効にする */
		display: block;
	}

	footer .footerinner > div {
		margin-bottom: 32px;
	}

	footer .footermenu {
		display: none;
	}

	footer .footermenu > ul > li {
		padding-right: 0;
	}

	footer .footerright {
		margin: 0 auto 10px;
	}

	footer .praivacy-policy {
		padding: 10px;
	}

	footer .praivacy-policy a {
		color: #aaa;
		text-align: center;
	}

	/*------------------------------
 	SP-Service詳細 画像とテキスト間の余白調整
 	------------------------------*/
	.wp-block-media-text__content {
		margin-top: 12px;
	}

	/*------------------------------
	 SP-お問い合わせ
	 ------------------------------*/
	dl.contact7 {
		display: block;
	}

	.contact7 dt,
	.contact7 dd {
		width: 100%;
		margin-bottom: 12px;
	}

	/*------------------------------
	Access Map
	------------------------------*/
	/*地図上の会社情報を表示しない*/
	.pc-map-data {
		display: none;
	}

	/*マップ左上のネームカード非表示*/
	.google-map {
		width: 100%;
		height: 350px;
		overflow: hidden;
	}

	.google-map iframe {
		width: 100%;
		height: 600px;
		margin-top: -150px;
	}
}