@charset "UTF-8";
/*
Theme Name: GLUON
Author: 3rd-web
Description: This is my original theme.
Version: 1.0
*/

/* -------基本構造（全体）------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
	margin: 0;
	color: #274a78;
	font-family: "Noto Sans JP", Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	background-color: #bbe4fa;
	overflow-x: hidden;
	}

@media (max-width: 599px) {
	body {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll;
	}
}

img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	}

p {
	font-size: 1.2em;
}
@media (max-width: 768px) {
	p {
	font-size: 1em;
	}
}

span {
	display: inline-block;
	}

strong {
	font-weight: bold;
	}

a {
	outline: none;
	text-decoration: none;
	color: #444;
	}

a:focus {
	outline: none;
	}

/* -------インナーの左右の余白------- */
@media (max-width: 1024px) {
	.inner {
	margin: 0 auto;
	padding-right: 10px;
	padding-left: 10px;
	}
}

	.clearfix:after {
    content:"";
    display:block;
    clear:both;
	}

/* ------それぞれの各ブロックの上下間隔------ */
	.sub-header {
	padding-top: 5px;
	}

	.contents {
	margin-top: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
	}

@media (max-width: 599px) {
	.contents {
	padding-top: 10px;
	}
}

.sub {
	margin-top: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
	}

/*--コンテンツとサイドバーを横に並べる設定--*/
@media (min-width: 768px) {
	.contents {
	float: left;
	width: 70%;
	}

	.sub {
	float: left;
	width: 30%;
	}

	/* ---コンテンツとサイドバーの間隔--- */
	.contents {
	padding-right: 30px;
	}
}

@media (min-width: 1200px) {
	.inner {
    width: 1200px;
	margin: 0 auto;
	}
}

/* ---カテゴリーページのコンテンツとサイドバーの親ブロック--- */
	#main-contents {
	padding: 0 10px;
	}

/* ---固定ページのコンテンツとサイドバーの親ブロック--- */
.main-contents {
	padding: 0 10px;
	}

/* ---固定ページ（コンタクトぺージ）の1カラム--- */
.contents-1column {
	padding: 0 10px;
	}

/* -----------ヘッダー-------------- */
header {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 70px;
	left: 0;
	right: 0;
	}

	#header-inner {
	height: 70px;
	}

	#header-inner img {
	width: 50px;
	margin-top: 10px;
	}

@media (max-width: 960px) {
	#header-inner img {
	margin: 10px auto;
	}
}

	.logo h1 {
	float: left;
	padding-top: 0px;
	}

	.header-box {
	float: right;
	text-align: center;
	}

/* -----------ナビボタン-------------- */

@media (max-width: 767px){
	.mainmenu li {
	border-bottom: #fff 1px solid;
	color: #2090be;
	background-color: #fff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

	.mainmenu li:first-child {
	border-top: #fff 1px solid;
	}

	.mainmenu li:last-child {
	border-bottom: 0px;
	}

	.mainmenu {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 3;
	position: absolute;
	right: 20px;
	top: 65px;
	width: calc(100% - 40px);
	padding: 40px;
	margin: 0 auto;
	color: #2090be;
	background-color: #fff;
	display: none;
	}
}

	.mainmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	.mainmenu li a {
	display: block;
	padding: 20px 10px;
	text-align: center;
	text-decoration: none;
	color: #2090be;
	font-weight: bold;
	}

	.mainmenu a:hover {
	opacity: 0.5;
	}

/* ---- トグルボタン ---- */
	#sitenav {
	text-align: center;
	overflow: hidden;
	margin: 0;
	clear: both;
	width: 100%;
	}

	#navbtn {
	padding: 10px 5px;
	margin: 10px 0;
	border: none;
	cursor: pointer;
	z-index: 2;
	width: 50px;
	height: 50px;
	background: #2090be;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	}

	#navbtn:focus {
	outline: none;
	}

	#navbtn i {
	font-size: 24px;
	color: #fff;
	}

	#navbtn span {
	display: block;
	text-align: center;
	font-size: 12px;
	color: #fff;
	}

@media (min-width: 767px) {
	/*ナビゲーションボタンを横並びに配置*/
	#mainmenu {
	display: block !important;
	}

	.mainmenu {
	margin-top: 10px;
	height: 50px;
	}

	.mainmenu ul:after {
	content: "";
	display: block;
	clear: both;
	}

	.mainmenu li {
	float: left;
	text-decoration: none;
	list-style: none;
	width: auto;
	}

	.mainmenu li a {
	padding: 10px;
	color: #2090be;
	font-weight: bold;
	text-shadow: 1px 1px white;
	font-size: 1.2em;
	}

	.mainmenu a:hover {
	transition: all .5s;
	opacity: 0.5;
	}
	
	.mainmenu li:last-child a {
	padding: 10px 15px;
	margin: 0 4px;
	background-color: #2090be;
	border: solid 1px #2090be;
	color: #fff;
	font-weight: bold;
	box-sizing: border-box;
	opacity: 1;
	text-shadow: none;
	}
	
	.mainmenu li:last-child a:hover {
	background-color: #fff;
	border: solid 1px #2090be;
	color: #2090be;
	}

	/*トグルボタン*/
	#navbtn {
	display: none;
	}
}

/* -----------ページトップに戻るボタン-------------- */
	#pageTop {
	position: fixed;
	bottom: 10px;
	right: 10px;
	}
 
	#pageTop a {
  	display: block;
  	z-index: 9999;
  	padding: 3px;
  	width: 50px;
  	height: 50px;
  	background-color: #2090be;
  	color: #fff;
	font-size: 12px;
  	text-decoration: none;
  	text-align: center;
  	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	}
 
	#pageTop a:hover {
	text-decoration: none;
  	opacity: 0.8;
  	cursor: pointer;
	}

/* -----------全体の背景を固定風に-------------- */
.wrapper {
  position: relative;
  min-height: 100vh;
}
.wrapper-bg {
  top: 0;
  position: sticky;
  height: 100vh;
  background-image: url(img/bg_img_light.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.wrapper-bg::after {
  top: 0;
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--night-opacity, 0);
  transition: opacity 0.1s linear;
  background-image: url(img/bg_img_dark.jpg);
  background-size: cover;
  background-position: center var(--bg-pos-y, top);
  background-repeat: no-repeat;
}
/* PCだけスクロールで下が見えるようにする */
@media (min-width: 1024px) {
  .wrapper-bg {
    background-attachment: scroll;
  }
  .wrapper-bg::after {
    background-attachment: scroll;
  }
}
.wrapper-contents {
  position: relative;
  z-index: 3;
  padding-top: 0px;
  margin-top: -100vh;
}

/* -----------コンテンツ-------------- */
/* -----------ロゴマークの隣のテキスト-------------- */
.logo-text {
	max-width: 1200px;
	margin: 0 auto;
}

.logo-text img {
	width: 30%;
	margin-top: 10px;
	margin-left: 90px;
}

@media (max-width: 768px) {
	.logo-text img {
	width: 50%;
	margin-top: 32px;
	margin-left: 90px;
}
}
/* -----------経営理念セクション-------------- */
	#vision {
	padding: 60px 0 0 0;
	max-width: 1200px;
	margin: 0 auto;
	}
/* ------------経営理念セクション内のコンテンツ------------- */
.message h2 {
	color: #274a78;
	font-size: 3.5em;
	}

	.message img {
	max-width: 100%;
	margin: 0 auto;
	padding: 40px 0;
	}

	.message video {
	margin: 0 auto;
	padding: 40px 0;
	text-align: center;
	display: block;
	width: 100%;
	max-width: 800px;
	}

	.message p {
	padding: 0 28px 60px 28px;
	text-align: left;
	line-height: 2;
	color: #274a78;
	font-size: 1.5em;
	}
	
	.main-business {
	padding-bottom: 60px;
	}

@media (max-width: 599px) {
	.message h2 {
	font-size: 2em;
	}

	.message p {
	font-size: 1em;
	}
}

	.business {
	display: flex;
	flex: 1;
	gap: 20px;
	}

	.colmun2 {
	width: 50%;
	min-width: 0;
	}

	.business .colmun2:hover {
	opacity: 0.8;
	transition: all 0.5s;
}

	.colmun2 h2 {
	font-size: 2em;
	}

@media (max-width: 599px) {
	.business {
	flex-direction: column;
	}
	.colmun2 h2 {
	font-size: 1.2em;
	}
	.colmun2 {
	width: 100%;
	}
}

/* ----------経営方針のセクション-------------- */
#concept {
	padding: 60px 0px;
	color: #fff;
	}

#concept h2 {
	color: #274a78;
	font-size: 3.5em;
	margin-left: 20px;
	}

.column3 {
	display: flex;
	align-items: center;
}

.column3-1 {
	flex: 1;
}
.column3-2 {
	flex: 2;
}

/* タブレット（例: 1023px以下） */
@media (max-width: 1023px) {
#concept h2 {
	font-size: 2em;
	}
}

/* スマホ（例: 768px以下）で縦並びにする */
@media (max-width: 768px) {
 .column3 {
    flex-direction: column;
  }
  .column3-1,
  .column3-2 {
    width: 100%;
  }
}

.concept-2colmun {
	vertical-align: top;
	display: inline-block;
	width: calc(50% - 10px);
	}

.concept-2colmun video {
	margin: 10px auto 0;
	top: 40%;	
}

.concept-2colmun img {
	width: 100%;
	margin: 0 auto;
	}

.concept-2colmun a img {
	transition: opacity 0.5s ease-out;
	margin: 0 auto;
	}

.concept-2colmun a:hover img {
	opacity: 0.5;
	}

.concept-2colmun h3 {
	font-size: 1.5em;
	font-weight: bold;
	color: #fff;
	padding: 0 20px;
	text-align: center;
	}

.concept-2colmun p {
	font-size: 1em;
	line-height: 2;
	color: #fff;
	text-align: left;
	padding: 40px;
	}

@media (max-width: 599px) {
	.concept-2colmun {
	width: 100%;
	}

	#concept h2 {
	font-size: 2em;
	margin-left: 0;
	}

	.concept-2colmun h3 {
	font-size: 1.2em;
	}
}

/* ----------二つの事業概要のセクション-------------- */
.image-cover {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 主な二つの事業の画像 */
.image-cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* 画像の上の黒の50%オーバーレイ */
.image-cover .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
  to bottom,
  rgba(0,0,0,0.1) 0%,
  rgba(0,0,0,0.5) 40%,
  rgba(0,0,0,0.5) 60%,
  rgba(0,0,0,0.1) 100%
);
  z-index: 1;
}

/* 文字エリア */
.image-cover .cover-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
	align-content: center;
	flex-wrap: wrap;
  color: #fff;
  text-align: center;
  padding: 1rem;
}

/* 見た目調整（任意） */
.image-cover h2 {
  font-size: 2rem;
	font-weight: bold;
  margin-bottom: 0.5em;
	padding: 0 20px;
}

.image-cover p {
  font-size: 1rem;
	font-weight: bold;
}


/* ビデオ動画のコンテナ */

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
/* ビデオ動画 */
video {
	width: 100%;
	margin: 0px;
}

/* ----------施工実績セクション-------------- */
	#work {
	margin: 60px 0 120px;
	}

#work h2 {
	color: #274a78;
	font-size: 3.5em;
	}

@media (max-width: 599px) {
	#work h2 {
	font-size: 2em;
}
}

/* カード風の施工実績ブログ */
.blog-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.blog-card:nth-child(1) {
  --offset: 0px;
}

.blog-card:nth-child(2) {
  --offset: 40px;
}

.blog-card:nth-child(3) {
  --offset: 80px;
}

.blog-card {
  background: #fff;
  color: #333;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
	width: calc(33.3% - 20px);
	transform: translateY(var(--offset));
}

.blog-card:hover {
	opacity: 0.8;
	transition: all 0.5s;
}

.blog-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
	flex-direction: column;
}

.blog-thumb img {
  width: 100%;
  height: 250px;
  display: block;
	object-fit: cover;
}

.blog-content {
  padding: 15px;
  text-align: left;
	flex: 1;
}

.blog-category {
  display: inline-block;
  background: #2090be;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  margin-bottom: 5px;
}

.blog-date {
  display: inline-block;
  font-size: 12px;
  color: #777;
  margin-left: 10px;
}

.blog-content h3 {
  font-size: 1.2em;
  margin: 8px 0;
}

.blog-content p {
  font-size: 1em;
  line-height: 1.6;
}

@media (max-width: 599px) {
	.blog-cards {
	flex-direction: column;
	align-content: center;
	width: calc(100%);
	gap: 0px;
	}
	.blog-card {
	width: calc(100% - 54px);
	}
	.blog-thumb img {
	height: 180px;
	}
}

/* -----------代表挨拶のセクション----------- */
#greeting h2 {
	color: #274a78;
	font-size: 3.5em;
}

#greeting .right{
	text-align: right;
	margin-bottom: 0;
	padding-bottom: 0;
}

#greeting {
	margin: 60px 0;
	padding-top: 120px;
}

@media (max-width: 599px) {
	#greeting h2 {
	font-size: 2em;
}
}

/* -----------イメージ動画セクション-------------- */
.mv-column {
	display: flex;
	align-items: flex-start;
	max-width: 1200px;
	margin: 90px auto 0;
	position: relative;
}

.mv-column-left {
	flex: 2.5;
	position: relative;
	overflow: hidden;
}

.mv-column-left video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mv-column-right {
	flex: 1;
	text-align: center;
}

.mv-column-right img {
	width: 60%;
	margin: 0 auto;
}
/* 動画フィルター */
.grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* 細かいドット */
	background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
	background-size: 2px 2px;
	mix-blend-mode: overlay;
	bottom: 5px;
}

/* スマホ（例: 768px以下）で縦並びにする */
@media (max-width: 768px) {
	.mv-column-left {
	flex: 3;
	}
	.mv-column-right {
	flex: 1;
	margin-left: -10px;
	z-index: 2;
	}
	.mv-column-right img {
	width: 100%;
	}
}

/* -----------ニュース＆イベント情報----------- */
/*新着ニュースのタイトル*/
	.newstitle h2 {
	margin: 40px 0 20px 0;
	font-size: 1.2em;
	border-left: solid 10px #2d2d2d;
	padding: 10px 10px 10px 20px;
	letter-spacing: 0.05em;
	color: white;
	}

/*新着ニュース*/
	#topic {
	/*background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/work_6.jpg) center/cover no-repeat;*/
	padding: 60px 0 840px;
	margin: 0px auto;
	}

	#topic h2 {
	font-size: 2em;
    font-weight: 900;
	padding: 0 0 40px 0;
	color: #fff;
	}

@media (max-width: 599px) {
	#topic {
	padding: 60px 10px 640px;
	}
	#topic h2 {
	font-size: 1.5em;
	}
	.topic li span {
	display: block;
	}
}

	.topic {
	max-width: 1000px;
	padding: 20px;
	margin: 0 auto;
	}

	.topic a:hover {
	opacity: 0.8;
	transition: all 0.5s;
	}

	.topic li {
	list-style: none;
	text-align: left;
	color: #333;
	margin-bottom: 1em;
	background-color: #fff;
	padding: 20px;
	}

	.topic ul a li:hover {
	opacity: 0.8;
	transition: all 0.5s;
	}

	.topic li span {
	color: #fff;
	background-color: #2090be;
	font-size: 12px;
	padding: 0 10px;
	display: inline-block;
	margin-bottom: 8px;
	}

	.topic li .news_text {
    margin-left: 7em;
	font-size: 1em;
	display: inline-block;
	}

/* ------見出しのあしらい-------- */
.title h2 {
	font-weight: 900;
	position: relative;
	padding: 0 0 0 28px;
	display: inline-block;
	margin: 0 auto;
	}

/* 後ろの四角 */
	.title h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 14px;
	height: 14px;
	background: #fff;
	transform: translateY(-50%) rotate(0deg);
	}

/* 前の四角 */
	.title h2::after {
	content: "";
	position: absolute;
	left: 4px;
	top: calc(50% + 4px);
	width: 14px;
	height: 14px;
	background: #73b2d1;
	transform: translateY(-50%) rotate(0deg);
	}

	.title .en {
	display: block;
	color: #73b2d1;
	font-size: 3em;
	text-align: left;
	font-weight: bold;
	padding: 0 0 20px 28px;
	}

@media (max-width: 599px) {
	.title .en {
	font-size: 2em;
	}
}

/* ------ヘッダーグローバルナビの幅分のスペース-------- */
.space {
	padding-top: 70px;
	}

/* -----------過去記事-------------- */

/*記事の概要*/
.gaiyou a {
	display: block;
	padding: 20px 0;
	border-bottom: solid 1px #ccc;
	color: #000;
	text-decoration: none;
	}

.gaiyou a:hover {
	background-color: #ddd;
	}

.gaiyou a:hover img {
	opacity: 0.5;
	}

.gaiyou a img {
	transition: opacity 0.5s ease-out;
	}

.gaiyou h2 {
	font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 8px;
    color: #444;
	font-weight: 500;
	}

.gaiyou p {
	font-size: 1.2em;
    margin: 0;
    color: #444;
	}

.gaiyou img {
	float: left;
	width: 200px;
	height: 200px;
	object-fit: cover;
	}

.gaiyou .text {
	float: none;
	width: auto;
	margin-left: 230px;
	}

@media (max-width: 599px) {
	.gaiyou img {
	width: 100px;
	height: 100px;
	}

	.gaiyou .text {
	margin-left: 110px;
	}

	.gaiyou h2 {
	font-size: 1em;
	}

	.gaiyou p {
	visibility: hidden;
	height: 0;
	}
}

/* ---------個別ページ------------ */
/*.page-image {　個別ページのサブヘッダー画像のCSS
	background-size: cover;
	background-image: url(img/image.jpg);
	height: 4em;
	color: #fff;
	font-size: 36px;
}
*/

.blogtitle h2 {
	font-size: 2em;
	margin-bottom: 20px;
	padding: 0 0 0 28px;
	color: #274a78;
	font-weight: bold;
	}

@media (max-width: 599px) {
	.blogtitle h2 {
	font-size: 1.5em;
	}
}

.kiji h2 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 2em;
	font-weight: bold;
	padding: 0 0 0 28px;
	letter-spacing: 0.05em;
	color: #274a78;
	}

@media (max-width: 599px) {
	.kiji h2 {
	font-size: 1.5em;
	line-height: 1.5;
	}
}

.kiji h3 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1.5em;
	font-weight: bold;
	padding: 0 0 0 16px;
	letter-spacing: 0.05em;
	color: #274a78;
	border-left: solid 10px #274a78;
	}

.kiji h4 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1.5em;
	border-bottom: solid 2px #274a78;
	padding: 10px 0;
	letter-spacing: 0.05em;
	color: #274a78;
	font-weight: bold;
	}

.kiji h5 {
	font-size: 1.3em;
	font-weight: bold;
	padding: 10px;
	color: #274a78;
	}

.kiji p {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 1.2em;
	color: #444;
	line-height: 1.7;
	}

@media (max-width: 768px) {
	.kiji p {
	font-size: 1em;
	}
}

.kiji:after {
	content: "";
	display: block;
	clear: both;
	}

.kiji-date {
	color: #444;
	font-size: 0.8em;
	margin-bottom: 8px;
	}

.kiji-date span {
	display: inline-block;
	background-color: lightblue;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	padding-left: 4px;
	padding-right: 4px;
	}

.datetime {
	display: inline-block;
	}

/*タグ*/
.kiji-tag {
	margin-bottom: 18px;
	}

.kiji-tag ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

.kiji-tag li a {
	display: block;
	padding: 3px 5px;
	color: #fff;
	background-color: #274a78;
	margin-right: 5px;
	margin-bottom: 2px;
	border-radius: 2px;
	font-size: 12px;
	text-decoration: none;
	}

.kiji-tag li a:hover {
	background-color: #2090be;
	}

.kiji-tag ul:after {
	content:"";
    display:block;
    clear:both;
	}

.kiji-tag li {
	float: left;
	width: auto;
	}

/*パンくずリスト*/
.bread ol {
	margin: 0;
	padding: 0;
	}

.bread li a {
	display: inline-block;
	padding: 5px 5px;
	color: #888;
	font-size: 12px;
	text-decoration: none;
	}

.bread li a[href]:hover {
	background-color: #eee;
	}

.bread li {
	float: left;
	width: auto;
	}

.bread li:after {
	content: '\003e';
	margin-left: 2px;
	margin-right: 2px;
	color: #888;
	}

.bread li:last-child:after {
	content: none;
	}

/*ページネーション*/
.pagination {
	margin: 40px 0 30px;
	text-align: center;
	}

.pagination ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	}

.pagination li a,
.pagination li > span {
	display: block;
	margin :0 5px;
	padding: 6px 8px;
	color: #000;
	font-size: 1em;
	border :solid 1px #eee;
	text-decoration: none;
	}

.pagination li > span{
	background-color: #efefef;
	}

.pagination li a:hover {
	background-color: #eee;
	}

.pagination ul:after{
	content: "";
	display: block;
	clear: both;
	}

.pagination li {
	float: left;
	width: auto;
	}

/* -----------テーブルデザイン-------------- */
table.type10 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	width: 100%;
	color: #333;
	font-size: 1.2em;
	}
	
table.type10 thead th {
	width: 20%;
	padding: 20px;
	vertical-align: middle;
	background-color: #eee;
	border-left: 1px solid #ccc;
	}

table.type10 thead td {
	width: 80%;
	background-color: #fff;
	padding: 20px;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	}

table.type10 tbody th {
	vertical-align: middle;
	width: 20%;
	padding-left: 20px;
	background-color: #eee;
	border-left: 1px solid #ccc;
	}

table.type10 tr {
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
	}

table.type10 tbody td {
	width: 80%;
	padding: 20px;
	vertical-align: middle;
	border-right: 1px solid #ccc;
	background-color: #fff;
	}

table.type10 .even {
	background-color: #f3f6f7;
	}

@media (max-width: 599px) {
	table.type10 {
	font-size: 14px;
	}
	table.type10 thead th {
	width: 30%;
	padding: 10px;
	}
table.type10 thead td {
	width: 70%;
	padding: 10px;
	}
table.type10 tbody th {
	width: 30%;
	padding-left: 10px;
	}
table.type10 tbody td {
	width: 70%;
	padding: 10px;
	}
}
/* -----------テーブルデザイン枠なし-------------- */
table.type11 {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	width: 100%;
	color: #274a78;
	background-color: #fff;
	font-size: 1.2em;
	}
	
table.type11 thead th {
	width: 20%;
	padding-left: 20px;
	vertical-align: middle;
	border-bottom: 1px solid #fff;
	}

table.type11 thead td {
	width: 80%;
	padding: 20px;
	vertical-align: middle;
	border-bottom: 1px solid #fff;
	}


table.type11 tbody th {
	vertical-align: middle;
	width: 20%;
	padding-left: 20px;
	border-bottom: 1px solid #fff;
	}

table.type11 tr {
	vertical-align: middle;
	border-bottom: 1px solid #fff;
	}

table.type11 tbody td {
	width: 80%;
	padding: 20px;
	vertical-align: middle;
	border-bottom: 1px solid #fff;
	}

table.type11 .even {
	background-color: #f3f6f7;
	}

table.type11 a {
	color: #274a78;
}

@media (max-width: 599px) {
	table.type11 {
	font-size: 14px;
	}
	table.type11 thead th {
	width: 25%;
	padding-left: 10px;
	}

table.type11 thead td {
	width: 75%;
	padding: 10px;
	}
	
table.type11 tbody th {
	width: 25%;
	padding-left: 10px;
	}

table.type11 tbody td {
	width: 75%;
	padding: 10px;
	}
}

.profile {
	width: 90%;
	margin: 50px auto;
	}

.policy-text {
	width: 100%;
	margin: 0 0 0 -50px;
}

@media (max-width: 599px) {
	.profile {
	width: 70%;
	}
	
	.policy-text {
	width: 60%;
	margin: -40px 0 50px auto;
}
}

/* ----------リストデザイン-------------- */

ul.list li {
	list-style-type: square;
	list-style-position: inside;
	padding-left: 0px;
	font-size: 1em; 
	margin-bottom: 10px;
	}

ul.list li a {
	text-decoration: none;
	color: #444;
}

/* -----------サイド-------------- */
/*
.mymenu {
	margin-bottom: 20px;
	}

.mymenu h2 {
	font-size: 1em;
    padding: 4px;
    text-align: center;
    color: #444;
    font-weight: normal;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
    border: solid 1px #444;
	}

.mymenu ul {
	padding: 0;
    margin: 0;
    list-style: none;
	}

.mymenu li a {
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	color: #444;
	text-decoration: none;
	}

.mymenu li a:before {
  	font-family: FontAwesome;
 	content: '\f138';
  	color: #444;
  	padding-right: 10px;
	}

.mymenu li a:hover {
	background-color: #ddd;
	transition: all .5s;
	}
*/
.mymenu {
	margin-bottom: 20px;
	}

.mymenu h2 {
	font-size: 1.2em;
    padding: 10px;
    color: #fff;
    font-weight: normal;
    letter-spacing: 0.05em;
    background-color: #274a78;
    border-left: solid 1px #274a78;
    border-right: solid 1px #274a78;
    border-bottom: solid 1px #274a78;
	}

.mymenu ul {
	padding: 0;
    margin: 10px 0 0 0;
    list-style: none;
	}

.mymenu li {
	position: relative;
	}

.mymenu li a {
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 25px;
	color: #444;
	text-decoration: none;
	}

.mymenu li a:hover {
	color: #999;
	transition: all .5s;
	}

@media (max-width: 768px) {
	.mymenu h2 {
	font-size: 1em;
	}
}

/* 四角 */
.mymenu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 18px;
  height: 18px;
	margin: 6px 0;
  background: #2090BE; /* 四角の色 */
}

/* 三角（▶） */
.mymenu li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.75em;
  width: 0;
  height: 0;
margin: 6px 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #fff; /* ▶の色 */
}

/*サムネイルをつけたサイドメニューのデザイン*/
.mymenu-thumb li a {
	padding: 5px 0;
	border-bottom: dotted 1px #ddd;
	color: #333;
	}

.mymenu-thumb li a:after {
	content: "";
	display: block;
	clear: both;
	}

.mymenu-thumb li .thumb {
	float: left;
	width: 60px;
	height: 60px;
	background-size: cover;
	background-position: 50% 50%;
	}

.mymenu-thumb li .text {
	float: none;
	width: auto;
	margin-left: 75px;
	}


/* サイドバーの画像の配置 */
.fb {
	text-align: center;
	padding: 20px 0;
	}

.fb a img {
	text-align: center;
	display: inline-block;
	}

/* イラストマップの位置 */
.map {
	text-align: center;
	}

/* グーグルマップの配置 */
.ggmap {
	position: relative;
	padding-bottom: 25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

/* ユーチューブ */
.youtube {
	position: relative;
	padding-top: 56.25%;
	max-width: 100%;
	overflow: hidden;
	}
 
.youtube iframe,
.youtube object,
.youtube embed {
position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

/* -----------予約ボタン-------------- */
.reserve {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-grow: 1;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	}

@media (max-width: 599px) {
	.reserve {
	flex-direction: column;
	}
}

.mail-cta {
	flex-grow: 1;
}

.mail-cta a {
	text-decoration: none;
	background-color: #2090be;
	border: 1px solid #2090be;
	padding: 30px;
	color: #fff;
	font-weight: bold;
	display: block;
	cursor: pointer; 
	margin: 0 auto;
	text-align: center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.4);
	}

.mail-cta a:hover {
	color: #2090be;
	background-color: #fff;
	border: 1px solid #2090be;
	transition: all .5s;
	}

.line-cta {
	flex-grow: 1;
}

.line-cta a {
	text-decoration: none;
	background-color: #06C755;
	border: 1px solid #06C755;
	padding: 30px;
	color: #fff;
	font-weight: bold;
	display: block;
	cursor: pointer; 
	margin: 0 auto;
	text-align: center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.4);
	}

.line-cta a:hover {
	color: #06C755;
	background-color: #fff;
	border: 1px solid #06C755;
	transition: all .5s;
	}

/* -----------コンタクトフォーム送信ボタン-------------- */

.wpcf7 input[type="submit"] {
	font-size: 100%;
 	padding: 10px 60px;
 	background-color: #274a78;
 	color: #fff;
 	cursor: pointer;
 	border: 1px solid #274a78;
 	box-shadow: 0 2px 5px rgba(0,0,0,0.4);
 	margin: 20px auto;
	}

.wpcf7 input[type="submit"]:hover {
 	text-decoration: none;
	color: #274a78;
	background-color: #fff;
	border: 1px solid #274a78;
	transition: all .5s;
	}

/* ---------コンタクトフォームデザイン----------- */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.span .wpcf7-list-item,
.wpcf7 input[type="date"],
.wpcf7 textarea {
	background-color: #fff;
	color: #333;
	width: 95%;
	border: 1px solid #ddd;
	font-size: 100%;
	padding: 0.5em;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;
	}

@media (max-width: 599px) {
	.wpcf7 .form {
	max-width: 280px;
	}
}

/* -----------画像-------------- */

/* 画像のキャプション */
.wp-caption-text {
	margin: 0px;
	color: #666;
	font-size: 10px;
	text-align: center;
	}

@media (max-width: 599px){
	.wp-caption-text {
	font-size: 8px;
	}
}

.wp-caption-text a {
	color: #666;
	}

/* 画像の配置 */
.aligncenter {
	display: block;
	margin: 0px auto;
	}

@media (max-width: 599px) {
	.alignleft, .alignright{
	display: block;
	margin: 0px auto;
	}
}

@media (min-width: 600px) {
	.alignleft {
	float: left;
	margin-top: 10px;
	margin-bottom: 20px;
	margin-right: 30px;
	}

	.alignright {
	float: right;
	margin-top: 10px;
	margin-bottom: 20px;
	margin-left: 30px;
	}
}

/* 大きい画像用の設定 */
.wp-caption {
	max-width: 100%;
	height: auto;
	}

/* アイキャッチ画像 */
.catch {
	margin: 30px 0px;
	}

/* -----------フッター-------------- */
.foot {
	background-color: #efefef;
	color: #333;
	font-size: 12px;
	text-align: center;
	padding: 10px;
}

#foot .text h2 {
	font-weight: bold;
	font-size: 1.2em;
	}

#foot .inner {
	background-color: #fff;
	clear: both;
	padding-top: 15px;
	padding-bottom: 15px;
	padding: 4em 10px;
	}

#foot img {
	text-align: center;
	}

#foot p {
	text-align: left;
	color: #333;
	}

#foot a {
	text-decoration: none;
	color: #333;
	}

@media (min-width: 768px) {
	#foot .inner {
	max-width: 800px;
	}
}

.box1 img, .box2 img, .box3 img {
	width: 100%;
	margin: 0 auto;
	}

.box1 a img, .box2 a img, .box3 a img {
	transition: all .5s ease-out;
	}

/*.box1 a:hover img, .box2 a:hover img, .box3 a:hover img {
	transform:scale(0.9,0.9);
	transition: all .5s;
}*/

.box1 a, .box2 a, .box3 a {
	display: inline-block;
	color: #333;
	text-decoration: none;
	}

.box1 a:hover, .box2 a:hover, .box3 a:hover {
	opacity: 0.8;
	transition: all .5s;
	}

	.box1 p, .box2 p, .box3 p {
    color: #fff;
    width: calc(100% - 10px);
    margin: 0 auto;
	}

.box1 h3, .box2 h3, .box3 h3 {
	font-size: 1.5em;
    text-align: center;
    color: #274a78;
    font-weight: bold;
    padding: 20px;
    width: calc(100% - 10px);
    margin: 0 auto;
	}

@media (min-width: 600px) {
	.box1, .box2, .box3 {
    width: calc(100% / 3);
	float: left;
	padding: 20px;
	}

	.box1 img, .box2 img, .box3 img {
	width: calc(100% - 10px);
	margin: 0 auto;
	}
}

@media (max-width: 599px) {
	.box1 h3, .box2 h3, .box3 h3 {
	font-size: 1.2em;
	}	

	.box1, .box2, .box3 {
	width: 90%;
	margin: 0 auto;
	padding: 20px;
	}
}

/* SNSアイコン */
#icon {
	display: block !important;
	}

footer .inner .icon {
	margin: 0 0 30px 0;
	}

@media (min-width: 768px) {
	footer .inner .icon {
	width: 300px;
	margin: 0 0 30px 0;
	}
}

.icon ul:after {
	content: "";
	display: block;
	clear: both;
	}

.icon li {
	float: left;
	text-decoration: none;
	list-style: none;
	font-size: 2em;
	}

.icon li a {
	padding: 0px 15px;
	color: #fff;
	}

.icon a:hover {
	color: #666;
	transition: all .5s;
	}

/* コピーライト */
.copyright p {
	color: #fff;	
	line-height: 2em;
	}

.copyright img {
	margin: 0 auto;
	}

.copyright a {
	text-decoration: none;
	color: #fff;
	}

.copyright {
	clear: both;
	padding: 50px 0;
	background-color: #2090BE;
	}

@media (min-width: 768px) {
	.copyright {
	padding: 50px 0;
	}
}

/* 引用（ブロッククォート） */
blockquote {
    position: relative;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #9dd4ff;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/* -----------ページ読み込み後ふわっと表示させる-------------- */

.fuwat2 {
    position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    animation: fadeIn 4s ease 2s 1 normal backwards;
    -webkit-animation: fadeIn 4s ease 2s 1 normal backwards;
    padding: 0 20px;
    font-size: 3em;
    font-weight: bold;
    text-align: center;
	}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
	}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
	}

/* -----------スクロールしてからふわっと表示させる-------------- */

.fuwatAnime {
	-webkit-animation-fill-mode:both;
 	-ms-animation-fill-mode:both;
 	animation-fill-mode:both;
 	-webkit-animation-duration:1s;
 	-ms-animation-duration:1s;
 	animation-duration:1s;
 	-webkit-animation-name: fuwatAnime;
 	-ms-animation-name: fuwatAnime;
 	animation-name: fuwatAnime;
 	visibility: visible !important;
	}

@-webkit-keyframes fuwatAnime {
 	0% { opacity: 0; -webkit-transform: translateY(-40px); }
 	100% { opacity: 1; -webkit-transform: translateY(0); }
	}

@keyframes fuwatAnime {
 	0% { opacity: 0; -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); }
 	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	}

/* -----------要素の枠線とpaddingを内側にする------------- */
#denki, #kenchiku {
  scroll-margin-top: 80px;
}

/* -----------PCとスマホで差し替え-------------- */
/* デフォルト（PC） */
.pc { display: block; }
.sp { display: none; }

/* スマホ */
@media screen and (max-width: 599px) {
  .pc { display: none; }
  .sp { display: block; }
}

/* フッターのインスタ */
.inst a img{
	padding: 0;
	width: 100%;
}