@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* Fomts------------------------ */

.m_plus1p {
	font-family: 'M PLUS 1p', sans-serif;
}
.notoserif {
	font-family: 'Noto Serif JP', serif;
	transform: rotate(0.03deg);/* シャギーを防ぐ指定 */	
}
.montserrat {
	font-family: 'Montserrat', sans-serif;
}

.main-copy-coating {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	transform: rotate(0.03deg);/* シャギーを防ぐ指定 */
	color: #00688C;
	line-height: 1.4;
	border-bottom: solid 1px #888;
	padding-bottom: 1em;
}



/* グローバルナビ--------------------------- */
.mega-menu-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.25em;
	font-weight: 700;
}

/* 見出し---------------------------------- */
h3 {
	display: table;
	font-size: 24px!important;
	line-height: 1;
	text-align: center;
	color: #333;
	padding: 1px 1em 0;
	border-left: solid 3px #DC143C;
	border-right: solid 3px #DC143C;
	margin: 80px auto 50px!important;
}
h4 {
  position: relative;
  display: inline-block;
  padding: 0 1em;
  text-align: center;
}
h4:before{
  font-family: 'Font Awesome 5 Free';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #eb6100;
}
h4:before {
  left: 0;
  content: '\f107';
}
h4.mega-block-title {
	padding-left:1em!important;
}
h4.mega-block-title:before{
  color: #fff;	
}


/* fixed banner------------------------ */
.fixed_banner {
	padding:0;
position: fixed; /* 追従させる為にfixedの値を記述 */
z-index: 99999; /* 他の要素の下に隠れないように全面配置 */
top: 150px;
right: 0px;
background: rgba(255,255,255,0);
border: none;
}
.fixed_banner_flex {
	display:flex;
	flex-direction:column;
}
.fixed_banner_pc {
width: 40px; /* バナーの横幅*/
}

.floating-banner:hover {
opacity: .8; /* マウスが重なった時に少し透過させます */
}

.fixed_banner_sp {
display: none; /* PCではスマホ用のバナーは非表示にします */
}

/* 透過背景 ------------------------ */
.white-back{
    background:rgba(255,255,255,0.8);
	padding:1em 0;
}
.black-back{
    background:rgba(0,0,0,0.7);
	padding:1em 0;
}


@media screen and (max-width: 480px) { /* メディアクエリを使ってスマホ用のブレイクポイントを指定 */
.fixed_banner_pc {
display: none; /* pc版を消す*/
}
.fixed_banner_sp {
display: inline-block; 
width: 100vw; /* スマホの画面幅いっぱいにバナーを表示させます */
}

}


/* HOME------------------------ */

#main_visual {
	margin-bottom: -68px;
}


div.l-title {
	line-height:1.4;
	border-bottom: solid 1px #999;
	margin: 0 auto 50px;
}
.coating-read-l {
	background:linear-gradient(90deg,#fdfdfd 0%,#fdfdfd 30%,#E1E1D9 30%,#E1E1D9 100%)!important;
}
.coating-read-r {
	background:linear-gradient(90deg,#E1E1D9 0%,#E1E1D9 70%,#fdfdfd 70%,#fdfdfd 100%);
}

.coating-read-l h4,
.coating-read-r h4 {
	display: block;
	margin: 0 auto 1em;
}


/*夢ガレージをもっと見るボタン*/
.button-yume-more {
	margin-top: -15px!important;
	z-index: 999;
}

/*.wp-container-4 {
	margin-top: -32px!important;
}*/

/* CTA*/
.footer-rich-cta {
z-index: 0;
}


/* ハウスコーティング --------- */

/* STEPのナンバー */
.car-film_flow div.swell-block-step__number:after {
	font-size: 4em!important;
}
.car-film_flow div.swell-block-step__item:before {
	border-top-color: #00688C!important;
}

/* メリットの見出し */
.merit {
	position: relative;
	padding-top: 24px!important;
	border-bottom: 6px solid rgba(234, 234, 234, 0.4)!important;
	font-size:24px!important;
	min-width: 240px;
}
.merit strong {
	position: relative!important;
	z-index: 2;
}
.merit::before {
	content: attr(data-en)!important;
	position: absolute!important;
	top: 0px!important;
	left: 0!important;
	color: rgba(231, 224, 234, 0.5)!important;
	font-size: 40px;
	text-transform: uppercase;
	z-index: 1!important;
}


h3.fukidashi {
	display: inline-block!important;
	text-align: left!important;
	color: #fff!important;
	position: relative!important;
	padding: 0.4em!important;
	background: #04384c!important;
	margin-bottom: 0.5em!important;
}
h3.fukidashi:after {
  position: absolute!important;
  content: ''!important;
  top: 100%!important;
  left: 30px!important;
  border: 15px solid transparent!important;
  border-top: 15px solid #04384c!important;
  width: 0!important;
  height: 0!important;
}
#overview {
	background-color:#EAF3E0;
	max-width:800px;
	border: solid 1px #408080;
	padding: 1em;
	margin:auto;
}
#overview div {
	position: relative;
	width: 50%;
	margin-bottom: 30px;
}
#overview div dt {

	font-weight:300;
	color:#408080;
	width:80px;
}
#overview div.naiyou-col {
	width: 100%;
}
#overview dd {
	border-left: solid 2px #FF6666;
	padding-left: 1em;
}


/* お問い合わせフォーム */
table.formtable {
	width: 100%;
}

table.formtable th {
	white-space: nowrap;
}
table.formtable td,
table.formtable tr {

}
.required {
	display: inline-block;
	background-color: #db698d;
	color: #FFF;
	font-size: 11px;
	font-weight: bold;
	padding:1px 3px;
	margin: 0 0 1em 2px;
	border: solid 1px #C33;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	-o-border-radius:2px;
	-ms-border-radius:2px;
	border-radius:2px;
}
input[type="text"],
input[type="email"],
select {
	width:100%;
	font-size:16px;
	height:30px;
	line-height:30px;
	background-color:#fff;
	padding: 3px 5px;
	margin-bottom: 1.5em;
	border:1px solid #aaa;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-o-border-radius:6px;
	-ms-border-radius:6px;
	border-radius:6px;
}

textarea {
	width:100%;
	font-size: 16px;
	height: auto;
	line-height:24px;
	background-color:#fff;
	padding: 3px 5px;
	margin-bottom: 1.5em;
	border:1px solid #aaa;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-o-border-radius:6px;
	-ms-border-radius:6px;
	border-radius:6px;
}
input.submit_button,
input.submit_backbutton {
	color: #fff;
	font-size:16px;
	width: 260px;
	height:42px;
	border:1px solid #aaa;
	-webkit-border-radius:12px;
	-moz-border-radius:12px;
	-o-border-radius:12px;
	-ms-border-radius:12px;
	border-radius:12px;
	margin: 12px 0;
}
input.submit_button {
	background-color: #dc143c;
}
input.submit_button:hover {
	background-color: #000;
}
input.submit_backbutton {
	background-color: #dc143c;	
}
input.submit_backbutton:hover {
	background-color: #000;	
}

/*Google MAP */
iframe {
  width: 100%;
  aspect-ratio: 4/3; //アスペクト比（縦横比）を指定
}


/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {

/* HOME------------------------ */
/* 店長は私です */
.tencho {
}
.tencho-pict {
}
.tencho-txt{
	background-color: #fff;
	border: solid 1px #333;
	padding:0 1em 1em;
  	top: 18%;

}
.tencho-txt-inner {
}
.tencho-txt-inner p {
	width:90%;
	line-height:2;
	margin: auto;
	padding-bottom: 1.5em;
	font-size:1.2em;
}
.tencho p.has-text-align-center {
	top: -28px;
	width:200px;
	padding-bottom: 0.5em;
}


	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {

/*トップページ社長挨拶*/
.prologue {
	padding: 30px 35px!important;
	position: relative;
	top: 20px;
}
.prologue::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3B424D;
    transform: skewY(-3deg);
    z-index: -1;
}
.prologue .swell-block-fullWide__inner {
	max-width: 1050px;
	margin: auto;
}
.prologue p {
	text-align: left;
	padding-top:4em;
	position: relative;
	left: 3%;
	z-index: 1;
}
.prologue img {
	display: block;
	position: absolute;
	top: -20%;
	right: 0%;
}



	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {

#main_content {
	margin-top:-4em!important;
}


	
/* ホームコーティング　概要 --------- */
#overview {
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */

}
#overview div {
	width: 50%;
}
dl.flex-col,
div.naiyou-col dl {
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
}

	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {

/* グローバルナビ--------------------------- */
.mega-description-group {
	text-align: center;
	padding-bottom:1em;
}
	
/* HOME------------------------ */
/*トップページ社長挨拶*/
.prologue {
	padding: 30px 35px!important;
	position: relative;
	top: 20px;
}
.prologue::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3B424D;
    transform: skewY(-3deg);
    z-index: -1;
}
.prologue .swell-block-fullWide__inner {
	max-width: 1050px;
	margin: auto;
}
.prologue p {
	text-align: left;
	padding-top:1.5em;
	position: relative;
	left: 22%;
	z-index: 1;
}
.prologue img {
	display: block;
	position: absolute;
	top: -40%;
	right: 7%;
}

/* 店長は私です */
.tencho {
	position: relative;
	height: 360px;
}
.tencho-pict {
	position: absolute;
  	top: -20px;
  	left: 8%;
}
.tencho-txt{
	background-color: #fff;
	border: solid 1px #333;
	padding:0 1em 1em;
	position: absolute;
  	top: 16%;
	right: 10%;
	z-index; 100;
}
.tencho-txt-inner {
	position: relative;
}
.tencho-txt-inner p {
	width:280px;
	line-height:2;
}
.tencho p.has-text-align-center {
	top: -28px;
	width:200px
}
.swell-block-fullWide__SVG {
	z-index:0;	
}

	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

.pc-tab_only {
	display: none;
}

/*global nav*/
#mega-menu-wrap-header_menu #mega-menu-header_menu > li.mega-menu-item > a.mega-menu-link {
	margin: 8px 0;
}
.mega-sub-menu {
	padding-bottom: 2.5em!important;
}

/* HOME------------------------ */
/*トップページ社長挨拶*/
.prologue {
	padding: 30px 35px!important;
	position: relative;
	top: 20px;
}
.prologue::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #3B424D;
    transform: skewY(-3deg);
    z-index: -1;
}
.prologue .swell-block-fullWide__inner {
	max-width: 1050px;
	margin: auto;
}
.prologue p {
	text-align: left;
	padding-top:8.5em;
	font-size:0.9em;
	z-index: 1;
}
.prologue img {
	display: block;
	position: absolute;
	top: -32%;
}

/*ハウスコーティング　コピー*/
.main-copy-coating {
	font-size: 2.5em!important;	
}

	/*-- ここまで --*/
}