@charset "UTF-8";
body{
    font-size: clamp(0.14rem, 3vw, 0.16rem);
    animation-name:fadeInAnime;
    animation-duration:4s;
    animation-fill-mode:forwards;
    opacity:0;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
	overflow-x: auto;
	text-align:justify;
	-webkit-overflow-scrolling: touch;
		min-width:1080px;
    }
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
html {
    font-size: 100px;
	font-weight: 400;
	font-style: normal;
  }
*{box-sizing: border-box}
.fot-b--01{
	font-weight: 500;
}
.fot-b--02{
	font-weight: 700;
}
a {
    transition: 0.5s;
}
a:hover {
    opacity: 0.5;
}

/* 共通
 ====================================================*/
:root {
	--red: #e8352d;
	--dark: #003c8a;
	--light: #00a6d9;
	--gray: #666666;
	--fot-b--01: 500;
	--fot-b--02: 700
}
.red{color: #e8352d}
.no-line{border:none !important;}
.reverse{flex-direction: row-reverse; /* 横並び逆順 */}
.mawaru{
  text-align: center;
  animation: rotate_anime 20s linear infinite;
}
.mawaru img{
  width: 100%
}
.back_gray{
	background-color: #f2f2f2;
	padding: 0.8rem 5%;
}
.back_gray--02{
	background-color: #f2f2f2;
	padding: 0.8rem 5% 0.8rem 0;
}
.back_gray--03{
	background-color: #f2f2f2;
	padding: 0 0 0.8rem 5%;
}
.back_light{
	background-color: var(--light);
	padding: 0.8rem 5%;
}
.ttl--01{
	font-size: clamp(0.3rem, 3vw, 0.46rem);
	font-weight: var(--fot-b--02);
}
.ttl--02 {
  font-size: clamp(0.3rem, 7vw, 0.7rem);
  font-weight: var(--fot-b--02);
	padding-bottom: 0.2rem;
}
.ttl--03 {
	font-size: clamp(0.3rem, 7vw, 0.4rem);
	font-weight: var(--fot-b--02);
	color: var(--gray);
	margin-bottom: 0.3rem;
	line-height: 1.2;
}
.ttl--04 {
	font-size: clamp(0.2rem, 3vw, 0.3rem);
	font-weight: var(--fot-b--02);
	color: var(--gray);
	margin-bottom: 0.3rem;
	line-height: 1.2;
}
.ttl--05 {
	font-size: clamp(0.18rem, 3vw, 0.25rem);
	font-weight: var(--fot-b--02);
	color: var(--gray);
	margin-bottom: 0.1rem;
	line-height: 1.7;
}
.wrap--01{
	padding: 0 5%;
}
@media screen and (min-width: 1920px){
.wrap--01{
	padding: 0 15%;
}
.back_gray{
	background-color: #f2f2f2;
	padding: 0.8rem 15%;
}
.back_gray--02{
	background-color: #f2f2f2;
	padding: 0.8rem 15% 0.8rem 0;
}
.back_gray--03{
	background-color: #f2f2f2;
	padding: 0 0 0.8rem 15%;
}
}
/*ぱんくず*/
.breadcrumb-wrap .pankuzu_arrow{
	color: var(--red);
	padding: 0 0.03rem;
}
.breadcrumb-inner{
	font-size: 0.13rem;
	padding: 0.3rem 0;
}
.comingsoon{
	text-align: center;
	border: 3px dashed #ccc;
	padding: 0.3rem;
	font-size: 0.20rem;
	display: table;
	margin: 0 auto;
}
.breadcrumb-wrap .pankuzu {
  background: url(../img/pankuzu.svg) no-repeat;
    background-size: auto;
  background-size: 0.18rem;
  display: inline-block;
  width: 0.18rem;
  height: 0.2rem;
  vertical-align: bottom;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.link a{border-bottom: 1px solid red}
/*-- 赤いバナー --*/
.btn{color: #fff;}
.btn a{
	background-color: var(--red);
	padding: 0.2rem;
	border-radius: 0.3rem;
	display: inline-block;
	transition: 0.5s;
}
.btn a:hover{
	background-color: var(--dark);
	/*padding: 0.2rem;*/
	opacity: 1;
}
.btn--big a{
    font-size: clamp(0.18rem, 3vw, 0.25rem);
	padding: 0.3rem 0.6rem 0.2rem;
	border-radius: 0.5rem;
	display: table;
	margin: 0.6rem auto;
}
.btn--big p:after{
	content:"";
	background: url(../img/arrow.svg) no-repeat;
	width: 0.5rem;
	height: 0.5rem;
	display: inline-block;
	background-size: contain;
	float: right;
	margin-left: 0.2rem;
}
.btn--small a{
    font-size: clamp(0.14rem, 3vw, 0.18rem);
	padding: 0.15rem 0.3rem 0.1rem;
	border-radius: 0.3rem;
	display: table;
}
.btn--small p{
    line-height: 1.2
}
.btn--small p:after {
  content: "";
  background: url(../img/arrow.svg) no-repeat;
    background-size: auto;
  width: 0.3rem;
  height: 0.3rem;
  display: inline-block;
  background-size: contain;
  float: right;
  margin-left: 0.1rem;
}
.btn--link p:after {
  content: "";
  background: url(../img/link.svg) no-repeat;
    background-size: auto;
  width: 0.2rem;
  height: 0.3rem;
  display: inline-block;
  background-size: contain;
  float: right;
  margin-left: 0.2rem;
}
/*-- 青いバナー --*/
.btn--blue--small a{
	background-color: var(--dark);
	padding: 0.05rem 0.2rem;
	border-radius: 0.3rem;
	display: inline-block;
	transition: 0.5s;
}
/* WP ログイン時の管理バー分の html margin-top を打ち消す
   (#header が fixed なので本文だけ下がってズレるのを防ぐ) */
html[lang] {
	margin-top: 0 !important;
}
/* グローバルメニュー
 ====================================================*/
#header{
  background-color: var(--dark);
	position: fixed;
  top: 0;
  left: 0;
  width: 100%;
/* スクロールしても他のコンテンツの下にならないようにする */
  z-index: 10;
/* アニメーションの変化時間 */
  transition: 0.5s;
	height: 1rem;
}
.home #header{
	background-color: transparent;
	height: auto;
}
#header nav.header_nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  /*gap: 0.4rem;*/
  align-items: center;
	width: calc(100% - 0.8rem);
	padding: 0.2rem 5%;
}
#header.scroll-nav nav {
	padding: 0.1rem 5%;
}
#header nav.header_nav h1.header_logo--01{display: block}
#header nav.header_nav h1.header_logo--02{display: none}
#header .nav_item a {
	color: #fff;
	display: block;
	text-align: center; /* 2 行の項目 (家づくり、つながる不動産) は中央揃え */
}
@media (min-width: 1200px) {
	#header .nav_item a { white-space: nowrap; } /* 改行は <br> を入れた箇所だけ。狭い幅では収まらないので従来どおり折り返す */
}
#header .nav_list {
    display: flex;
	align-items: center; /* 2 行の項目 (家づくり、つながる不動産) と 1 行の項目の縦位置を揃える */
	gap: 0.3rem;
	font-size: 15px;
	line-height: 1.4;
}
#header .nav_list .nav_item{
    position: relative;
}
#header .nav_item_sub {
    background: var(--light);
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0.25rem;
    transition: all 0.2s ease;
    visibility: hidden;
    width: 12em;
	border-radius: 0.1rem;
}
#header .nav_item_sub .inner {
    display: flex;
    margin: 0 auto;
    width: 100%;
	justify-content: center;
}
#header .nav_item_sub .inner a{
    color: #fff !important;
	display: block;
}
#header .nav_item_sub .inner ul {
    margin: 20px 20px 20px;
}
#header .nav_item_sub .inner ul li{
    border-bottom: 1px dashed #fff;
	padding: 0.03rem;
}
#header .global-nav .nav-list .nav-item_sub a {
    text-align: left;
}
#header .nav_item:hover .nav_item_sub {
    opacity: 1;
    visibility: visible;
}
#header .nav_list .nav_item.current:before{
	content: "●";
  color: var(--red);
	margin-left: 0.05rem;
}
/* スクロールするため高さを出すためのsection */
#header .section {
  height: 100vh;
}
#header .ection-a {
  /*background: #000;*/
}
.section-b {
  background: #fff;
}
/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
#header.scroll-nav {
/* 背景を白にする */
	background-color: #fff;
	height: auto;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
#header.scroll-nav nav h1.header_logo--01{display: none}
#header.scroll-nav nav h1.header_logo--02{display: block}

/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
#header.scroll-nav .logo,
#header.scroll-nav ul li a {
  color: #000 !important;
}
.header_contact{
	background-color: var(--light);
	color: #fff;
	position: fixed;
	top: 1rem;
	right: 0;
	z-index: 2;
	width: 1rem;
	height: 1rem;
	display: flex;
	flex-flow: column;
	justify-content: center;
	text-align: center;
	font-size: 0.19rem;
	font-weight: var(--fot-b--02);
}
.header_contact img{
	width: 0.4rem;
	margin: 0 auto;
}

/* トップページ
 ====================================================*/
.slider_wrap{
	position: relative;
	width: 100%;
}
.slider_wrap .top_copy{
	position: absolute;
	top: 50%;
	left: 0.3rem;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	z-index: 1;
}
.slider_wrap .top_mawaru--01{
	position: absolute;
	left: calc(50% - 1.6rem);
	bottom: -1.3rem;
	z-index: 1;
}
.slider_wrap .top_scroll{
	position: absolute;
	left: 50%;
	bottom: 0.1rem;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	z-index: 1;
}
.slider_wrap .top_info_kotei{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	background-color: #fff;
	width: 4rem;
	padding: 0.2rem;
}
.slider_wrap .top_info_kotei ul{
	display: flex;
	gap: 0.2rem;
}
.home .top_head{
	line-height: 1.2;
}
.home .works_list{
	display: flex;
	gap: 0.2rem;
}
.home .works_list li img{
	width: 100%;
	border-radius: 0.2rem;
}
.home .works_list li figure{
	position: relative;
}
.home .works_list li figcaption{
	position: absolute;
	bottom: 0.1rem;
	left: 0.1rem;
	background-color: #fff;
	padding: 0.05rem 0.1rem;
	border-radius: 0.1rem;
	font-size: 0.14rem;
}
.home .ttl--01{
	padding-bottom: 0.2rem;
}
.home .information{
	background-color: var(--light);
	padding: 0.5rem 0;
}
.home .information_wrap{
	background-color: #fff;
	border-radius: 0.2rem;
	display: flex;
	padding: 0.5rem;
	gap: 0.5rem;
}
.home .information_content{
	width: 80%;
}
.home .information_list{
	border-bottom: 1px dashed #666;
	padding: 0.15rem 0;
	line-height: 1;
}
.home .information_list .information_item{
	display: flex;
	gap: 0.1rem;
	align-items: center;
}
.home .information_list .information_item span{
	color: #fff;
	padding: 0.05rem 0.1rem;
	font-size: 0.13rem;
	border-radius: 0.1rem;
}
.home .information_list .information_item .staff{
	background-color: var(--red);
}
.home .information_list .information_item .info{
	background-color: var(--dark);
}
.home .top_content_wrap{
	background: #fff;
}
.home .top_content_wrap--01{
	border-radius: 0 0.2rem 0.2rem 0;
}
.home .top_content_wrap--02{
	border-radius: 0.2rem 0 0 0.2rem;
}
.home .top_content_list{
	display: flex;
	padding: 0.6rem 5%;
	gap: 0.5rem;
	justify-content: space-between;
}
.home .top_content_list p{
	line-height: 2;
}
.home .top_content_item{
	width: 54.16%;
    min-width: 6.5rem;
}
.home .top_content_item img.top_content_ph{
	width: 100%;
	border-radius: 0.2rem;
	object-fit: cover;
height: 4rem;
}
.home .top_content_btn{
	margin-top: 0.3rem
}
.home .top_content_btn p{
	line-height: 1.2
}



/* ページ
 * 代表メッセージ
 * 抗酸化工法とは
 * 飛栄建設について
 * 長期優良住宅
 * プライバシーポリシー
 ====================================================*/
.page_wrap{
	margin-top: 1.5rem;
}
.page_wrap .page_head{
	line-height: 1;
}
.page_wrap .page_content_wrap{
	border-top: 1px solid #000;
	margin: 0 auto;
}
.page_wrap .page_content{
	border-left: 1px solid #000;
	width: min(8rem, 100%);
	margin-left: auto;
	padding: 0.3rem;
}
.page_wrap .page_content_head{
	line-height: 1;
}
.page_wrap .page_content_head h3{
	font-size: clamp(0.3rem, 7vw, 0.65rem);
	font-weight: var(--fot-b--02);
	color: var(--gray);
	padding-bottom: 0.3rem;
}
.page_wrap .googlemap{
	margin: 0.2rem auto;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 50%; /* 比率を4:3に固定 */
}
.page_wrap .googlemap iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.page_content_2column{
	width: 90%;
	margin: 0.8rem auto;
}
.page_content_2column .page_content_2column_list{
	display :flex;
	gap: 0.8rem;
	justify-content: center;
}
.page_content_2column .page_content_2column_item{
	width: calc(100% / 2);
}
.page_content_2column .page_content_2column_item img{
	width: 100%;
}
/*-- 代表メッセージ --*/
.message .message_ph{
	width: min(3.3rem, 100%);
}
.message .message_ph img{
	width: 100%;
	margin: 0.2rem 0;
}
.message .message_name li{
    font-size: clamp(0.12rem, 3vw, 0.14rem);
	line-height: 1.4;
}
.message .message_name li:nth-child(2){
    font-size: clamp(0.18rem, 3vw, 0.28rem);
}

/*-- 抗酸化工法とは --*/
.antioxidant .antioxidant_content{
	margin: 0.3rem auto;
	display: table;
}
/*-- 保証 ・ アフターサービス --*/
.reason_wrap{
	background-color: #fbe1e0;
	border-radius: 0.2rem;
	padding: 0.5rem;
	width: 95%;
	margin: 0.5rem auto 1rem;
}
.reason_wrap .reason_list{
	display: flex;
	margin: 0.5rem auto 0;
	width: 90%;
}
.reason_wrap .reason_list li{
	width: calc(100% / 2);
}
.reason_wrap .reason_list li img{
	width: 50%;
	margin: 0 auto;
	display: block;
}
.reason_wrap .reason_list--02 li img{
	width: 40%;
	margin: 0 auto;
	display: block;
}
.reason_wrap .reason_list--03{
	display: flex;
	margin: 0.5rem auto 0;
	gap: 0.5rem;
	width: 90%;
}
.reason_wrap .reason_list--03 li img{
	width: 100%;
	margin: 0 auto;
	display: block;
}

/*-- 飛栄建設 --*/
.about .company dl{
	display: flex;
	border-bottom: 1px solid #666;
	padding: 0.1rem 0;
}
.about .company dt{
	font-weight: var(--fot-b--01);
	width: 13em;
	margin-right: 1em;
	white-space: nowrap;
}
.about .company_outher_list{
	display: flex;
	margin: 0.3rem auto;
	width: 90%;
	gap: 1rem;
}
.about .company_outher_list li{
	width: calc(100% / 2);
}
.about .company_outher_list img{
	width: 100%;
}

/*-- 長期優良住宅 --*/
.long-term-excellent .long-term{
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 0.4rem 0.4rem;
	margin: 0.4rem auto;
}
.long-term-excellent .long-term_list{
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}
.long-term-excellent .long-term_list ol{
	margin: 0.2rem 0 0.3rem;
}
.long-term-excellent .long-term_list ol > li{
	margin: 0.1rem 0;
	text-indent: -0.3rem;
	margin-left: 0.3rem;
}
.long-term-excellent .long-term_list .long-term_link dd{
	font-size: 0.14rem;
}



.long-term-excellent .long-term_pdf{
	display: flex;
	gap: 0.3rem;
	width: 100%;
}
.long-term-excellent .long-term_pdf img{
	width: 100%;
}

/* お問い合わせ
 ====================================================*/
/*.contact-wrap{
	margin: auto;
	display: table;
}*/
.contact_wrap{
	padding: 0 10%;
}
.contact_inner-membership {
  border: 3px solid #ccc;
  padding: 0.1rem 0.6rem;
  box-sizing: border-box;
}
.contact_inner input {
  border: 1px solid #ccc;
  border-radius: 0.08rem;
  padding: 0.15rem 0.2rem;
  background-color: #faf9f7;
}
.select select {
  text-transform: none;
  padding: 0.1rem 0.1rem;
  border: 1px solid #ccc;
  border-radius: 0.05rem;
}
.select option{
	font-size: 0.14rem;
}
.form_btn button {
  background-color: #0086d1;
  padding: 0.15rem 0.2rem;
  font-size: 0.18rem;
  color: #fff;
  border-radius: 0.1rem;
  border: none;
}
.form_btn_center{
	display: table;
	margin: 0 auto;
}
.mw_wp_form .error {
  font-size: 93%;
  color: red;
  display: block;
}
textarea {
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 0.08rem;
  padding: 0.1rem 0.2rem;
  background-color: #faf9f7;
}
.contact_inner p {
  margin-bottom: 0.1rem !important;
}
.contact_inner p > span.hissu {
  background-color: var(--light);
  color: #fff;
  border-radius: 0.05rem;
  font-size: 0.14rem;
  padding: 0.05rem;
  margin-right: 0.05rem;
}
.contact_inner p > span.nini {
  background-color: #666;
  color: #fff;
  border-radius: 0.05rem;
  font-size: 0.14rem;
  padding: 0.05rem;
  margin-right: 0.05rem;
}
.contact_inner li {
  margin: 0.3rem auto;
}
.contact_send{
	display: flex;
	gap: 0.1rem;
	justify-content: center;
}
.privacy_agree_hide{
	display: table;
	margin: 0 auto;
}
.contact-confirmation .privacy_agree_hide{
	display: none;
}

/*-- プライバシーポリシー --*/
.privacy_wrap{
	width: min(90%, 100%);
	margin: 0 auto;
}
.privacy_wrap dl{
	margin: 0.1rem 0;
}
.privacy_wrap dt{
	margin: 0.3rem 0 0.1rem;
	font-weight: 700;
	color: var(--dark);
	font-size: 0.18rem;
}

/* オーナーズクラブ */
.owners-club .login{
	display: inline-block;
	border-top: 1px solid #000;
	padding: 0.1rem 0 0 0;
  	margin: 0.2rem 0 0 0;
}
.owners-club .owner-content_wrap{
	border-radius: 30px;
	background-color: #fff;
	margin: 30px auto;
	padding: 30px 5% 80px;
}
.owners-club .owner-content_wrap h3{
	text-align: center;
	font-size: 0.31rem;
	font-weight: var(--fot-b--02);
	margin-bottom: 0.7rem;
}
.owners-club .owner-content_wrap h3:before{
	content: "";
	display: block;
  	width: 334px;
  	height: 100px;
 	background-image: url(../img/owner-decoration.svg);
 	background-size: contain;
  	background-repeat: no-repeat;
 	margin: 0 auto;
}
.owners-club .owner-content_wrap h3 span{
	font-size: 0.38rem;
	color: #06b8de;
}
.owners-club .owner-info_wrap .btn{
	display: table;
	background-color: #ea5d7f;
	font-size: clamp(0.14rem, 3vw, 0.22rem);
	border-radius: 9999px;
	padding: 0.1rem 0.3rem;
	margin: 0 auto 0.3rem;
}
.owners-club .owner-illu{
	width: 90%;
	margin: 30px auto;
}
.owners-club .owner-info_list{
	display: table;
	margin: 0 auto;
}
.owners-club .owner-info_list li:before{
	content: "●";
	color: #06b8de;
}
.owners-club .amba_wrap{
	background-color: #fffde1;
	border: 2px dashed #ea5d7f;
	border-radius: 30px;
	margin: 40px auto;
	padding: 0px 5%;
	width: 90%
}
.owners-club .amba_wrap h4{
	display: table;
	margin: 70px auto 15px;
	padding: 5px 25px;
	background-color: #fff;
	color: #ea5d7f;
	border: 2px dashed #ea5d7f;
	border-radius: 20px;
	font-size: 33px;
	font-weight: var(--fot-b--01)
}
.owners-club .amba-point{
	background-color: #fff;
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 30px;
}
.owners-club .amba-point div{
	display: flex;
	justify-content: center;
	gap: 40px;
}
.owners-club .amba-point_list dt{
	color: #ea5d7f;
}
.owners-club .amba-point_list dd{
	margin-bottom: 30px;
}
.owners-club .amba-hukidashi{
	margin-bottom: 0 !important;
	width: 200px;
}
.owners-club .amba-hukidashi img{
	width: 100%;
}
.owners-club .amba-sns{
	display: flex;	
	align-items: end;
  	gap: 30px;
	margin-top: -100px;
}
.owner-banner p{
	color: #ea5d7f;
font-size: 33px;
	font-weight: 700;
	text-align:center;
}
.owner-banner--small p{
	margin: 10px 0 0 0;
font-size: 20px;
}
.owner-banner--small img{
width:70% !important;
}
.owner-banner{
	width: 500px;
	margin: 0 auto;
}
.owner-banner img{
	border: 1px solid var(--dark)
}

/* スタッフ紹介 */
.staff-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px 20px;
	margin-bottom: 60px;
}
.staff-img{
	width: 220px;
	height: 280px;
}
.staff-img img{
	width: 100%;
	height: 100%;
	object-fit: cover
}
.staff-list ul{
	display: flex;
}
.staff-job{
	font-size: 14px;
}
.staff_modal{
	width: 240px;
}
/* ブログ
 ====================================================*/
.information{
	padding: 0.3rem 10% 0.8rem;
}
.information a{
	color: var(--red);
}
.information .blog_head{
	display: flex;
	gap: 0.3rem;
	font-size: 0.13rem;
}
.information h1{
	font-size: clamp(0.2rem, 3vw, 0.3rem);
	font-weight: var(--fot-b--02);
	color: var(--gray);
	margin-bottom: 0.3rem;
	line-height: 1.2;
	border-bottom: 4px solid var(--red);
	padding: 0.1rem 0 0.3rem;
}
.information .archive_wrap{
	border-bottom: 3px solid var(--red);
	padding-bottom: 0.3rem;
}
.information .archive_list{
	display: flex;
	gap: 0.3rem;
	font-size: 0.13rem;
	margin-top: 0.5rem;
}
.information .archive_ttl{
	font-weight: var(--fot-b--02);
	font-size: 0.18rem;
}
.information .archive_ttl_link{
	color: var(--gray);
}
.information p{
	margin-bottom: 1em;
}
.information img{
	display: table;
	margin:0 auto;
}

/* 施工事例
 * 詳細
 ====================================================*/
/*-- 施工事例一覧 --*/
.works_archive_list{
	display: flex;
	gap: 0.2rem;
}
.works_archive_list img{
	width: 100%;
	height: auto;
	border-radius: 0.1rem;
}
.works_archive_list figure{
	margin: 0 0 0.1rem;
	width: calc(100% / 3)
}
.works_archive_select{
	display: flex;
	justify-content: center;
	gap: 0.2rem;
	margin-bottom: 0.3rem;
	margin-top: -0.2rem;
}
.works_archive_select li{
	border: 1px solid #000;
	width: 2.5rem;
	text-align: center;
	font-size: 0.18rem;
}
.works_archive_select li a{
	background-color: var(--gray);
	display: block;
	color: #fff;
	padding: 0.1rem 0 0.3rem;
}
.works_archive_select li.works_active{
	position:relative;
	background-color: #fff;
	padding: 0.1rem 0 0.3rem;
}
.works_archive_select li.works_active:after{
	content: "";
margin: auto;
position: absolute;
top: 0.2rem;
bottom: 0;
left: 46%;
width: 13px;
height: 13px;
border-bottom: 3px solid var(--red);
border-right: 3px solid var(--red);
transform: rotate(45deg);
}
.ngg-galleryoverview.default-view .ngg-gallery-thumbnail img {
  width: 300px !important;
	border-radius: 0.1rem; !important
}
/*-- 詳細ページ --*/
.works_detail .works_data{
	display: flex;
	gap: 0.3rem;
	margin-bottom: 1rem;
}
.works_detail .works_data .works_data_txt{
	width: 40%;
	line-height: 2;
	margin-right: 0.3rem;
}
.works_detail .works_data .works_data_txt dl{
	display: flex;
}
.works_detail .works_data .works_data_txt dl dt{
	width: 6em;
	border-right: 1px solid #000;
	margin-right: 0.2rem;
}
.works_detail .works_data .works_data_txt dl dd{
	width: 18em;
}
.works_detail .works_data .works_data_txt_list{
	background-color: #fff;
	padding: 0.2rem;
	margin: 0 0 0 0;
}
.works_detail .works_data .works_data_img{
	width: 60%;
}
.works_detail .works_data .works_data_img img{
	width: 100%;
	border-radius: 0.2rem;
}
.works_detail .works_data_detail figure{
	display: flex;
	margin-bottom: 0.5rem;
}
.works_detail .works_data_detail figure:nth-child(even){
	display: flex;
	flex-direction: row-reverse;
}
.works_detail .works_data_detail figcaption{
	width: 50%;
}
.works_detail .works_data_detail figure img{
	width: 80%;
	height: auto;
	border-radius: 0.1rem;
}
.works_cate .ttl{
	text-align: center;
	margin: 1rem auto 0.1rem;
	font-size: 0.20rem;
	font-weight: var(--fot-b--02);
}
.works_cate .works_cate_list{
	display: flex;
	gap: 0.1rem;
	flex-wrap: wrap;
	width: auto;
	margin: 0 auto;
	text-align: center;
	justify-content: center;
}
.works_cate .works_cate_list li{
	display :flex;
	flex-wrap: wrap;
	width: calc(100% / 7 - 0.1rem);
}
.works_cate .works_cate_list li a{
	color: #fff;
	margin: 0 auto;
	padding: 0.1rem 0;
	width: 100%;
	text-align: center;
	background-color: #7DA1C0;
	border-radius: 0.05rem;
	font-size: 0.14rem;
}

/*-- リフォーム --*/
.works_reform{
	text-align: center;
}
.works_reform .reform_ttl{
	font-size: 0.20rem;
	font-weight: var(--fot-b--02);
	margin-bottom: 0.5rem;
}
.works_before,
.works_after{
	display: flex;
	justify-content: center;
	gap: 0.1rem;
	align-items: center;
	margin-bottom:0.8rem;
}
.works_before p{
	font-size: clamp(0.18rem, 3vw, 0.25rem);
	font-weight: var(--fot-b--02)
}
.works_after p{
	font-size: clamp(0.25rem, 3vw, 0.50rem);
	font-weight: var(--fot-b--02)
}
.works_before figure{
	width: min(6rem, 100%);
}
.works_after figure{
	width: min(8rem, 100%);
}
.works_before figure img,
.works_after figure img{
	width: 100%;
	border-radius: 0.2rem;
}

/* フッター
 ====================================================*/
/*.foot_pagelink{
	background: linear-gradient(180deg, #00a6d9 0%, #00a6d9 45%, #fff 45%, #fff 100%);
	padding: 0.8rem 0 0 0;
}*/
.foot_pagelink{
	background-color: var(--light);
	padding: 0.5rem 0;
}
.foot_pagelink .foot_pagelink_wrap{
	position: relative;
	height: 1.7rem;
}
.foot_pagelink .foot_pagelink_list{
		position: absolute;
	display: flex;
	justify-content: space-evenly;
	align-items: flex-end;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 12rem;
	z-index: 2;
}
.foot_pagelink .foot_pagelink_list a{
	height: auto;
	display: block;
}
.foot_pagelink .foot_pagelink_list a:hover{
	background-color: var(--dark);
	opacity: 1;
	transform: scale(1.05, 1.05);
	border-radius: 0.05rem;
}
.foot_pagelink .foot_pagelink_list img{
}
.foot_pagelink .foot_pagelink_tensen{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
}
.foot_link_banner{
	display: grid;
	grid-template-columns: repeat(2, 3.8rem);
	gap: 0.2rem;
	justify-content: center;
}
.foot_link_banner img{
	width: 100%;
	border: 0.5px solid var(--dark);
}
.foot_link_banner{
	display: flex;
flex-wrap:wrap;
	gap: 0.2rem;
	justify-content: center;
}
.foot_link_banner li{
	width: 25%;
}
.foot_link_banner img{
	width: 100%;
}
#footer{
	background-color: var(--dark);
	color: #fff;
	font-size: 0.14rem;
	display: flex;
	justify-content: space-evenly;
	padding: 0.4rem 0 0.3rem;
}
#footer .footer_list p{
	margin-top: 0.3rem;
	font-size: 0.12rem;
}
#footer .footer_nav{
	display: flex;
	gap: 0.5rem;
}
#footer .footer_nav li{
	padding-bottom: 0.05rem;
}



/*-- デモ用 --*/
.top{
	width: min(10rem, 90%);
	margin: auto;
	text-align: center;
}
.top .top-item{
	border: solid 3px #ccc;
	padding: 100px 0;
	margin-bottom: 0.5rem
}
.top .top-item_02{
	display: flex;
	justify-content: space-around;
}
.top .top-item_02 li{
	border: 2px solid #ccc;
}
.top .top-item_02 li a{
	display: block;
	padding: 0.3rem 0.5rem;
}
footer .nav_list {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem auto;
}

@keyframes rotate_anime {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.test img{
	width: 100px;
}

/* モーダルウィンドウ
 ====================================================*/
.staff_modal{
	_width: 250px;
}
.staff_modal img{
	width: 100%;
}
.staff_modal dd span{
	font-size: 18px;
	font-weight: bold;
}



/* モーダルを開くボタン */
.inner{
	display: flex;
	gap: 30px;
}
.modal__trigger {
  cursor: pointer;
}

/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.modal__layer {
  height: 100%;
  background: rgba(94, 94, 94, 0.85);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 1000px);
  _height: calc(100% - 40px);
  padding: 20px;
  background: #fff;
}

.modal__inner {
  position: relative;
  height: 100%;
  padding: 80px 20px 20px;
}

/* モーダルを閉じるボタン */
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: var(--light);
  cursor: pointer;
  transition: opacity .6s;
}

.modal__close:hover {
  opacity: .6;
}

.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル内のコンテンツ */
.modal__content{
	display: flex;
	justify-content: center;
	gap: 30px;
	
}
.modal__content .modal__detail{ 
	width: calc(980px - 300px - 30px);
}
.modal__content .modal__body{ 
	margin-bottom: 30px;
	line-height: 2;
}
.modal__content .modal__body p + p{ 
	margin-top: 1em;
}
.modal__content .modal__body h2,
.modal__content .modal__body h3,
.modal__content .modal__body h4,
.modal__content .modal__body h5{ 
	line-height: 1.5;
	margin-bottom: 0.8em;
}
.modal__content .profile-list{ 
	border-top: 1px solid var(--dark);
}
.modal__content .profile-list .profile-item{ 
	display: flex;
	border-bottom: 1px solid var(--dark);
  	padding: 10px 0 10px 0;
}
.modal__content .profile-list .profile-item dt{ 
	font-weight: var(--fot-b--01);
	width: 25%;
	padding-right: 1em;
}
.modal__content .profile-list .profile-item dd{ 
	width: 65%;
}
.modal__text {
  margin-top: 30px;
  line-height: 2.875;
}