@charset "utf-8";
*{
	box-sizing:border-box;
}

body, html {
	margin : 0;
	border : 0;
	outline : 0;
	vertical-align : baseline;
	background : 0 0;
}
html {
	overflow-y : scroll;
	overflow-x: hidden;
}
abbr, address, article, aside, audio, b, blockquote, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
	margin : 0;
	padding : 0;
	border : 0;
	outline : 0;
	vertical-align : baseline;
	background : 0 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display : block;
}
ul {
	list-style : none;
}
blockquote, q {
	quotes : none;
}
blockquote:after, blockquote:before, q:after, q:before {
	content : none;
}
a, body, hr, html {
	padding : 0;
}
a {
	vertical-align : baseline;
	text-decoration: none;
	background : 0 0;
	margin : 0;
}
mark {
	font-style : italic;
}
abbr[title], dfn[title] {
	border-bottom : 1px dotted;
	cursor : help;
}
table {
	border-collapse : collapse;
	border-spacing : 0;
	font : 100%;
}
hr {
	display : block;
	height : 1px;
	border : 0;
	margin : 1em 0;
	border-top : 1px solid #DCD8D8;
}
input, select {
	vertical-align : middle;
}
a[href^="tel:"] {
	text-decoration : none;
}
/* 選択した文字、背景変化
----------------------------*/
::selection {
	color: #222;
	background: #d7a065;
}
body {
	width: 100%;
	height: 100%;
	background : #fff;
	color : #333;
	font-family: YakuHanJP, "Noto Sans JP", sans-serif;
	font-size : 1.6rem;
	line-height : 1;
	overflow-x: hidden;
}
@media screen and (max-width: 767px) {
body{
    min-width: 100%;
}
}

/* フォント設定
----------------------------*/
h2 {
	font-family: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
  	font-style: normal;
　　letter-spacing : 0.1em;
}
h3 {
	font-family: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;	
	font-weight : 400;
	letter-spacing : 0.1em;	
}
.en {
	display: block;
	font-family : YakuHanJP, 'Montserrat', sans-serif;
	font-weight : 400;
	letter-spacing : 0.1em;
}
.jp {
	font-family: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
  	font-style: normal;
　　letter-spacing : 0.1em;
}
.text{
	font-size : 1rem;
	letter-spacing : 0.1em;
	line-height : 2.2rem;
	font-weight: 400;
	font-feature-settings : "palt";
}
@media screen and (max-width: 767px) {
.text{
	font-size : 0.9rem;
	line-height: 1.8rem;
}
}
a {
	color: #d7a065;
}
/* 改行設定
----------------------------*/
br.show_sp {
    display: none;
  }
@media screen and (max-width: 767px) {
br.show_sp {
    display: block;
  }
}

/* ローディング
----------------------------*/
.loadingBar {
	width : 100%;
	height : 100%;
	top : 0;
	left : 0;
	position : fixed;
	transition : all 2s ease;
	z-index : 100;
	background-color: #eeebe5;
}
.loading-area {
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	width : 100px;
	height : 100px;
}
.loading-area img {
    animation: bow 2s ease-in-out infinite;
}

@keyframes bow {
    90%,
    100% {
        transform: rotate(360deg);
    }
}

/* ブロック
----------------------------*/
.contents0 {
	width: 100%;
	background: #eeebe5;
	position: relative;
}
@media only screen and (max-width: 767px) {
.contents0 {
	padding: 0 20px;
}
}
.contents1 {
	width: 100%;
	background: #fff;
}

.contents2 {
	position: relative;
}
.contents2:before {
	width: 100%;
	background-image: url( "../images/bg.jpg");
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover
}

.contents2:after,
.contents2:before {
    position: absolute;
    content: "";
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
}  
.contents2:after {
    background-color: #eeebe5;
    opacity: 0.6;
}
@media only screen and (max-width: 767px) {
.contents2:after,
.contents2:before {
    top: -40px;
}  		
}
.contents3 {
	width: 60%;
	margin: 100px auto;
	background: #fff;
}
@media only screen and (max-width: 960px) {
.contents3 {
	width: 90%;
}
}
@media only screen and (max-width: 767px) {
.contents3 {
	margin: 30px auto;
}
}
/* 見出し
----------------------------*/
.title01 {
	margin-bottom : 40px;
}
.title01-c {
	margin-bottom : 40px;
	text-align: center;
}
.title01 .en, .title01-c .en {
	color: #d7a065;
	font-size : 1.4rem;
	font-weight : 800;
	display : inline-block;
	line-height : 1;
}
.title01 h2.toptitle, .title01-c h2.toptitle {
	font-weight: 500;
	font-size: 2rem;
	line-height: 3rem;
}
@media only screen and (max-width: 767px) {
.title01, .title01-c {
	margin-bottom : 20px;
}
.title01 .en, .title01-c .en {
	font-size : 1.2rem;
}
.title01 h2.toptitle, .title01-c h2.toptitle {
	font-size: 1.4rem;
	line-height: 2.4rem;
}
}


/* 切り替え
----------------------------*/
@media screen and (max-width: 767px) {
.pc {
    display : none;
}
}
@media screen and (min-width: 768px) {
.sp {
    display : none;
}
}

/* リンクボタン
----------------------------*/
.btn01 {
	width : 280px;
	display : flex;
	 align-items: center;
	justify-content : space-between;
	position : relative;
	z-index : 9;
	background-color: #CE8A00;
	padding : 15px 20px;
	border-radius: 30px;
	transition : all 0.5s ease;
}

.btn01 .arrow01:before {
	background-color : #CE8A00;
}
.bt-txt{
	font-size : 1rem;
	font-weight: 600;
	letter-spacing : 0.1em;
	text-align : center;
	color : #fff;
	transition : all 0.5s ease;
}

.btn01 .arrow01:after {
	background-color : #d7a065;
}

@media only screen and (max-width: 767px) {
.btn01 {
	width : 100%;
	padding : 20px;
}
.bt-txt{
	font-size : 0.9rem;
}
}

/* リンク矢印
----------------------------*/
.arrow {
	width : 1em;
	height : 1em;
}
.icon {
	display : inline-flex;
	align-items : center;
	justify-content : center;
}
.icon img {
	width : 0.6em;
	height : 0.6em;
}
@media screen and (max-width: 767px) {
.icon img {
	width : 0.4em;
	height : 0.4em;
}
}
/* リンクアイコン
----------------------------*/
.arrow01 {
	width : 40px;
	height : 40px;
	display : flex;
	justify-content : center;
	align-items : center;
	position : relative;
	z-index : 9;
}
@media screen and (max-width: 767px) {
.arrow01 {
	width : 25px;
	height : 25px;
}	
}
.arrow01:before, .arrow01:after {
	content : "";
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	border: 1px solid #d7a065;
	border-radius: 50%;
}
.arrow01:before {
	width : 100%;
	height : 100%;
	background-color : #eeebe5;
	z-index : -1;
}
.arrow01:after {
	content : "";
	width : 10%;
	height : 10%;
	background-color : #d7a065;
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
	z-index : 10;
	transition : all 0.6s ease;
}
@media (hover: hover) {
a:hover .arrow01:after {
	width : 120%;
	height : 120%;
}
}
@media (hover: none) {
.arrow01:after {
	width : 100%;
	height : 100%;
}
}
.arrow01 .icon svg, .arrow01 .icon img {
	position : relative;
	opacity : 0;
	z-index : 100;
}
@media (hover: hover) {
a:hover .arrow01 .icon svg, a:hover .arrow01 .icon img {
	opacity : 1;
}
}
@media (hover: none) {
.arrow01 .icon svg, .arrow01 .icon img {
	opacity : 1;
}
}


/* header
----------------------------*/
.header {
	width : 100%;
	padding : 30px 0;
	position : fixed;
	z-index : 99;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
	transition : all 0.8s ease;
	background-color: #fff;
	border-radius: 20px;
}
.header-inner {
	width : 100%;
	display : flex;
	align-items : center;
	justify-content : space-between;
	padding : 20px 40px 0;
}
@media screen and (max-width: 980px) {
.header {
	padding : 40px 0 20px;
}
.header-inner {
	padding : 0 20px;
}
}
/* ロゴ
----------------------------*/
.header-logo a {
	display : block;
}
.header-logo a .logo-top {
	width: 260px;
	z-index: 9999;
}
@media only screen and (max-width: 980px) {
.header-logo a .logo-top {
	width: 208px;
}
}
@media only screen and (max-width: 767px) {
.header-logo a .logo-top {
	width: 182px;

}
}

/* ナビ
----------------------------*/
.header-nav{
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 500;
	position:  absolute;
	right: 40px;
}
.header-logo a, .header-nav {
	display : flex;
	align-items : center;
}
.header-nav-item, .header-nav-item a {
	position : relative;
	display : block;
	font-size : 1rem;
	letter-spacing : 0.1em;
	padding : 0 12px;
	color : #333;
	transition : all 0.8s ease;
}
@media (hover: hover) {
.header-nav-item :hover, .header-nav-item a:hover {
	color : #d7a065;
}
}
/* お問合わせ
-------------------*/
.header-nav-btn a {
	display : block;
	color : #222;
	font-size : 1rem;
	padding : 15px 20px;
	margin-left: 15px;
	background-color: #CE8A00;
	border-radius: 30px;
}
@media only screen and (max-width: 767px) {
.header-nav-btn a {
	border-radius: 50px;
}		
}
.header-nav-btn a {
	transition : all 0.8s ease;
}
@media (hover: hover) {
.header-nav-btn a:hover {
	background-color : #d7a065;
}
}

@media only screen and (max-width: 1220px) {
.header-nav{
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	display : none;
	flex-direction : column;
	align-items : flex-start;
	justify-content : center;
	padding : 0 20px;
	z-index : 999;
}
.header-nav.active {
	display : flex !important ;
}
.header-nav-item {
	width : 100%;
	border-bottom : 1px solid #fff;
}
.header-nav-item, .header-nav-item a {
	padding : 5px 0;
	font-size : 1rem;
}
.header-nav-btn {
	width : 100%;
	margin-top: 1rem;
}
.header-nav-btn a {
	margin-top : 20px;
	text-align : center;
	font-size : 1.2rem;
	padding : 30px 10px;
	margin-left: 0;
}
@media (hover: hover) {
.header-nav-item :hover, .header-nav-item a:hover {
	color : #d7a065;
}
}
.header-nav-btn a:hover {
	background-color : #E5CC9B;
}
.header-nav .navi-bg {
	 width: 100%;
 	 height: 110vh;
	 background-color: #eeebe5; 
 	 position: fixed;
     top: 0;
     left: 0;
     z-index: -1;
     opacity: 0;
     transition: opacity 0.8s;
}
.header-nav .navi-bg.active {
    opacity: 1;
}

/* navライン
----------------------------*/
.header .trigger {
	position : relative;
	top: 0;
	right: 10px;
	width : 50px;
	height : 50px;
	z-index : 999;
}
.header .trigger::before {
	content : '';
	top : 28%;
	transition : transform 0.5s ease;
}
.header .trigger .line, .header .trigger::after, .header .trigger::before {
	position : absolute;
	display : block;
	width : 100%;
	height : 2px;
	background-color : #333;
	left : calc(50% - 30%);
}
.header .trigger::after {
	content : '';
	bottom : 24%;
	transition : transform 0.5s ease;
	transform-origin : center;
}
.header .trigger .line {
	top : 50%;
	transition : all 0.3s ease;
}
.header .trigger .line.hidden {
	transform : scaleX(0);
}
.header .trigger.active::before {
	top : 49%;
	transform : rotate(-135deg);
}
.header .trigger.active::after {
	bottom : 49%;
	transform : rotate(135deg);

}	
}

/* toggle menu
----------------------------*/
.header-nav-item, .header-nav-item.tg-menu {
	position : relative;
}
.tg-menu .menu-arrow::after, .tg-menu .menu-arrow-sp::after  {
	content : '';
	width : 15px;
	height : 15px;
	position : absolute;
	bottom : -28px;
	left : 50%;
	transform : translateX(-50%);
	background-image: url("../images/menu-arrow.svg");
	background-repeat: no-repeat;
	transition : all 0.7s ease;
	opacity : 0;
}
.tg-menu.active .menu-arrow::after {
	transform : translateX(-50%);
	opacity : 1;
}

/* 下層ページ
------------------*/
.tg-menu .menu-arrow-under::after {
	content : '';
	width : 15px;
	height : 15px;
	position : absolute;
	bottom : -28px;
	left : 50%;
	transform : translateX(-50%);
	background-image: url("../images/menu-arrow-under.svg");
	background-repeat: no-repeat;
	transition : all 0.7s ease;
	opacity : 0;
}
.tg-menu.active .menu-arrow-under::after {
	transform : translateX(-50%);
	opacity : 1;
}

.tg-bg, .tg-bg-inner {
	display : none;
}
.tg-bg-inner {
	background-color : #eeebe5;
	border: #eeebe5;
	padding : 30px;
	display : flex;
	border-radius: 20px;
}
.tg-bg {
	position : absolute;
	top : 70px;
	left : -250px;
}
.tg-item ul {
	width : 580px;
	display : flex;
	align-items: center;
	justify-content : center;
    flex-wrap: wrap;	
}
.tg-item a {
	width : 230px;
	display : block;
	color : #333;
	margin : 0 10px;
}
.tg-item li.tg-text a {
	display : flex;
	align-items: center;
	justify-content : space-between;
	font-size : 1rem;
	letter-spacing : 0.1em;
	font-weight: 500;
	padding: 10px 0;
}
.tg-item li .arrow01 {
	width : 20px;
	height : 20px;;
	position : relative;
	margin-right: 1rem;
}
.visible-sp{
	display : none;
}

@media only screen and (max-width: 1220px) {
.visible-sp{
	display : block !important ;
}
.hidden-pc {
	display : none;
}
.tg-menu .menu-arrow-sp::after {
	opacity : 1;
	right : 20px;
	left : auto;
	bottom : auto;
}
.menu-sp {
	color : #333;
}
.menu-sp, .header-nav-item > a {
	padding : 20px;
}
.tg-bg {
	position : static;
}
.tg-bg-inner {
	background-color: #eeebe5; 
	padding : 0 0 20px;
	border-radius: 0;
}
.tg-item ul {
	width : 100%;
}
.tg-item a {
	width : 100%;
}
.tg-item li.tg-text{
	width : 100%;
}
.tg-item li.tg-text{
	width : 100%;
}
.tg-item li.tg-text a {
	width : 100%;	
 	color: #333;
	font-weight: 500;
	padding: 20px;
}
@media (hover: hover) {
.tg-item li.tg-text a:hover {
	color : #d7a065;
}
}
}

/* トップメイン
----------------------------*/
.main-imgarea {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.top-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: all 1s linear;
}
.top-slider .slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  transform: scale(1.1);
  transition: all 5s linear
}

.top-slider .slide.sl01::before {
  background-image: url("../../images/top/slide01.jpg")
}
.top-slider .slide.sl02::before {
  background-image: url("../../images/top/slide02.jpg")
}
.top-slider .slide.sl03::before {
  background-image: url("../../images/top/slide03.jpg")
}
.top-slider .slide.sl04::before {
  background-image: url("../../images/top/slide04.jpg")
}
.top-slider .slide.is-act {
  opacity: 1;
  z-index: 7;
}

.top-slider .slide.is-act::before {
  transform: scale(1)
}
.img-num {
  position: absolute;
  color: #fff;
  z-index: 10;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-size: 1.2rem;
  font-weight: 500;
}
@media only screen and (max-width: 1024px) {
.top-slider .slide::before  {
  background-position: center;
}
.img-num {
  bottom: 0;
  right: 0;
  font-size: 1rem;
}
}

.img-num .bar {
  width: 40px;
  margin: 0 20px;
  position: relative;
  overflow: hidden;
}
.img-num .bar-bg {
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, .5)
}
.img-num .bar-act {
  display: block;
  background-color: #412206;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 0;
  left: 100%;
  animation: imgnum-bar 5s ease-in infinite;
}
@keyframes imgnum-bar {
  0% {
    left: 0;
    transform-origin: 0 0;
    transform: scaleX(0)
  }

  95% {
    transform-origin: 0 0;
    transform: scaleX(1);
    left: 0
  }

  to {
    left: 150%
  }
}


/* メインキャッチ
----------------------------*/
.main-catch {
	position : absolute;
	left : 40px;
	bottom : 40px;
	color : #fff;
	z-index : 9;
}
.main-catch .en {
	display : block;
	font-size : 3.4rem;
	font-weight: 600;
	line-height : 1.2;
	letter-spacing : 0.04em;
	opacity : 0;
	filter : blur(50px);
	transition : all 1.6s ease;
	margin-bottom : 2rem;
}
.main-catch .en.active {
	opacity : 1;
	filter : blur(0);
}
.main-catch .main-txt {
	font-family: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;
	font-size : 2rem;
	font-weight : 600;
	letter-spacing : 0.1em;
	line-height : 1.5;
}
.main-catch .main-txt  {
	display : inline-block;
	filter : blur(50px);
	opacity : 0;
	transition : all 1.6s ease;
}
.main-catch .main-txt.active  {
	filter : blur(0);
	opacity : 1;
}
@media only screen and (max-width: 1400px) {
.main-catch {
	left : 40px;
}
.main-catch .en {
	font-size : 3rem;
	margin-bottom : 2rem;
}
.main-catch .main-txt {
	font-size : 1.6rem;
}	
}
@media only screen and (max-width: 1200px) {
.main-catch .en {
	font-size : 2.6rem;
	line-height : 1.4;
}
}
@media only screen and (max-width: 1000px) {
.main-catch .en {
	font-size : 2.2rem;
}
}
@media only screen and (max-width: 860px) {
.main-catch .en {
	font-size : 1.8rem;
}
}
@media only screen and (max-width: 767px) {
.main-catch {
	left : 20px;
	bottom : 60px;
}
.main-catch .en {
	font-size : 1rem;
	margin-bottom : 1rem;
	line-height : 1.6;
}	
.main-catch .main-txt {
	white-space : nowrap;
	font-size : 1.2rem;
}
}
@media only screen and (max-width: 380px) {
.main-catch .en {
	font-size : 0.8rem;
}
.main-catch .main-txt {
	font-size : 1rem;
}
}
/* メインポリシー
----------------------------*/
.p-top-poricy.active, .p-top-poricy .title01.active, .p-top-poricy-pic.active, .p-top-poricy-txt.active .text, .p-top-poricy-txt .btn01.active {
	transform : translateY(0);
	opacity : 1;
}
.p-top-poricy {
	padding : 100px 0 0;
	transition : all 1s ease;
	opacity : 0;
}
.p-top-poricy .title01 {
	transform : translateY(15px);
	opacity : 0;
	transition : all 2s ease;
}
.p-top-poricy-inner {
	display : flex;
	flex-direction: row-reverse;
	align-items : center;
	padding : 0 0 100px 120px;
	position : relative;
}
.p-top-poricy-pic {
	min-width : 50vw;
	height : 784px;
	overflow : hidden;
	aspect-ratio : 1/1; /* アスペクト比 */
	background-image : url("../../images/top/policy-img.jpg");
	background-repeat : no-repeat;
	background-size : cover;
	background-position : right center;
	transform : scale(1.2);
	transition : all 1s ease;
	opacity : 0;
	z-index: 10;
}
.p-top-poricy-txt{
	width : 45vw;
	padding-right :	2vw;
	z-index: 12;
}
.p-top-poricy-txt .text {
	margin : 0 0 60px;
	transform : translateY(15px);
	opacity : 0;
	transition : all 1s ease;
	transition-delay : 0.7s;
}
.p-top-poricy-txt .btn01 {
	transform : translateY(15px);
	opacity : 0;
	transition : all 1s ease;
}
@media screen and (max-width: 1024px) {
.p-top-poricy-inner {
	padding-left : 20px;
}
}
@media screen and (max-width: 767px) {
.p-top-poricy {
	padding : 20px 0 60px;
}
.p-top-poricy-txt .title01 h2.toptitle {
	font-size: 1.4rem;
	line-height: 2rem;
	margin-top: 8px;
}
.p-top-poricy-inner {
	display : block;
	padding : 0;
}
.p-top-poricy-txt {
	width : 100%;
	min-width : 100%;
	padding-right :	0;
	margin-top: 20px;
}

.p-top-poricy-txt .text {
	margin: 20px 0;
}
.p-top-poricy-pic {
	width : 100%;
	min-width : 100%;
	height : 330px;
	background-position: cover;
}
}

/* トップイラスト
----------------------------*/
.topp-illust.active {
	transform : translateY(0);
	opacity : 1;
}
.topp-illust {
	transition : all 2s ease;
	opacity : 0;
}
.topp-illust {
	position: relative;
	margin: 60px 0;
}
@media screen and (max-width: 767px) {
.topp-illust {
	margin: 0;
}	
}
.topp-illust-text {
	display: flex;
	overflow: hidden;
}
.topp-illust-text > div {
	animation: text-loop 80s infinite linear 0.5s both;
}
.topp-illust-text > div span {
	color: #CE8A00;
	font-family : 'Montserrat', sans-serif;
	font-weight : 300;
	letter-spacing: 0.1em;
	line-height: 1;
	display: block;
	font-size: clamp(10rem, 24vw, 24rem);
	white-space: nowrap;
	padding-right: 120px;
}
@media screen and (max-width: 1200px) {
.topp-illust-text > div span {
	padding-right: 40px;
}	
}
@media screen and (max-width: 767px) {
.topp-illust-text > div span {
	letter-spacing: 0.08em;
	padding-right: 20px;
}	
}
.topp-illust .topp-illust-img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
}
.topp-illust .topp-illust-img img {
	width: 70%;
	max-width: 400px;
}
@media screen and (max-width: 1200px) {
.topp-illust .topp-illust-img img {
	width: 65%;
	max-width: 300px;	
}
}
@media screen and (max-width: 960px) {
.topp-illust .topp-illust-img img {
	width: 60%;
}
}
@media screen and (max-width: 767px) {
.topp-illust .topp-illust-img img {
	width: 40%;
	max-width: 200px;
}
}
@keyframes text-loop {
  from {
    translate: 0;
  }
  to {
    translate: -100%;
  }
}

/* トップ施工事例
----------------------------*/
.p-top-works.active, .p-top-works .title01.active, .p-top-works-item.active, .p-top-works .btn01.active {
	transform : translateY(0);
	opacity : 1;
}
.p-top-works {
	position: relative;
	padding : 60px 0 40px 120px;
	transition : all 1s ease;
	opacity : 0;
}
.p-top-works .title01 {
	transform : translateY(30px);
	opacity : 0;
	transition : all 2s ease;	
}
@media screen and (max-width: 1024px) {
.p-top-works {
	padding : 30px 0 40px 20px;
}		
}
@media screen and (max-width: 767px) {
.p-top-works {
	padding : 30px 20px 0;
}		
}
/* 一覧ボタン */
.p-top-works .btn01{
	transform : translateY(30px);
	opacity : 0;
	transition : all 2s ease;	
}
.p-top-works .btn01{
	position: absolute;
	top: 90px;
	right: 120px;
}
@media screen and (max-width:1200px) {
.p-top-works .btn01{
	right: 20px;
}	
}
@media screen and (max-width:767px) {
.p-top-works .btn01{
	position: static;
}	
}
/* スライド全体 */
.swiper-box {
    width: 100%;
    margin: 0 auto 0 0;
    position: relative;
}
@media screen and (max-width:767px) {
  .swiper-box {
    width: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
  }
}
.swiper-container{
    position: relative;
    overflow: hidden;
}
@media screen and (max-width:767px) {
.swiper-container {
    overflow: visible;
  }
}
.swiper-wrapper {
    width: 100%;
    margin-bottom: 60px;
}
@media screen and (max-width:767px) {
  .swiper-wrapper {
    margin-bottom: 0;
  }
}
/* 各スライド */
.swiper-slide {
	width: 100%;
  	padding: 30px 0 0 26px;
	background: #FFF;
}
@media screen and (max-width:767px) {
  .swiper-slide {
	padding: 0;
    height: 319px;
  }
}

/* スライド画像 */
.p-top-works-item {
  width: 100% !important;
  margin-right: 20px;
	transform : scale(1.2);
	transition : all 1s ease;
	opacity : 0;
}
.p-top-works-item-in {
  display: block;
}
.p-top-works-item-img {
  position: relative;
  height: 0;
  padding-top: 68%;
  overflow: hidden;
}
.p-top-works-item-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  object-fit: cover;
}

@media all and (min-width: 768px) {
.p-top-works-item {
    display: block;
    width: 500px !important;
    margin-right: 40px;
  }
.p-top-works-item-in:hover .p-top-works-item-txt::before {
    left: 0;
    width: 100%;
  }
 .p-top-works-item-txt {
    margin-top: 25px;
    padding-bottom: 30px;
    margin-bottom: 10px;
    position: relative;
  }
.p-top-works-item-txt::before {
    position: absolute;
    content: " ";
    transition: all 0.3s ease;
    border-bottom: 2px solid #eeebe5;
    bottom: -1px;
    left: 0;
    right: auto;
    width: 500px;
  }
}

/* 画像ズーム */
a.zoom {
  display: block;
  text-decoration: none;
}
a.zoom .zoom-img {
  display: block;
 }
a.zoom .zoom-img-wrap {
  display: block;
  overflow: hidden;
}

@media all and (min-width: 768px) {
a.zoom .zoom-img {
    transition: all 0.3s ease;
}
a.zoom:hover .zoom-img {
    transform: scale(1.1);
 }
}

/* スライドテキスト */
 .p-top-works-item-txt {
    margin-top: 25px;
    padding-bottom: 30px;
    margin-bottom: 10px;
    position: relative;
}
.p-top-works-item-date {
  font-family : YakuHanJP, 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #5A5858;
  margin: 0 10px 0 0;
  padding: 5px 0;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.p-top-works-item-cat {
  font-size: 1.6rem;
  max-height: 1.6em;
  line-height: 1.8;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 .p-top-works-item-pl {
    margin-top: 10px;
    font-size: 1rem;
	color: #5A5858;
}
.p-top-works-item-pl::before {
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    display: inline-block;
    width: 9px;
    height: 13px;
    vertical-align: top;
    content: '\f3c5';
    margin: 1px 7px 0 0;
}

@media screen and (max-width: 767px) {
.p-top-works-item-cat {
  font-size: 1.2rem;
}
  .p-top-works-item-pl {
    margin-top: 10px;
    font-size: 1rem;
 }
.p-top-works-item-txt {
  margin-top: 15px;
  margin-bottom: 5px;
  padding-bottom: 20px;
}
.p-top-works-item-pl {
  font-size: 1rem;
}	
}

/* swiper矢印 */
.works-arrow {
	position: absolute;
	bottom: 80px;
	right: 40px;
}
.swiper-container .swiper-button-next, .swiper-container .swiper-button-prev {
	position: absolute;
    width: 70px;
    height: 70px;
	border: solid 2px #CE8A00;
    background-color: #FFF;
    border-radius: 50%;
}
.swiper-container .swiper-button-next {
	right: 80px;
}
.swiper-container .swiper-button-prev {
	right: 200px;
}
.swiper-container .swiper-button-next::after, .swiper-container .swiper-button-prev::after {
    font-family: 'Font Awesome 7 Free';
    font-weight: 900;
    color: #CE8A00;
    font-size: 1.5rem;
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate(-50%,-50%);
}
@media screen and (max-width:1200px) {
.swiper-container .swiper-button-next {
	right: 0;
}
.swiper-container .swiper-button-prev {
	right: 120px;
}
}
@media screen and (max-width: 767px) {
.works-arrow {
	bottom: 100px;
	right: 0;
}
.swiper-container .swiper-button-next, .swiper-container .swiper-button-prev {
    width: 40px;
    height: 40px;
}
.swiper-container .swiper-button-next {
	right: 0;
}
.swiper-container .swiper-button-prev {
	right: 60px;
}
.swiper-container .swiper-button-next::after, .swiper-container .swiper-button-prev::after {
    font-size: 1rem;
}
}

.swiper-container .swiper-button-next::after {
    content: '\f0da';
}
.swiper-container .swiper-button-prev::after {
    content: '\f0d9';
}
/* スクロール */
.swiper-scrollbar {
    width: 60%;
    height: 10px;
    background: #eeebe5;
    border-radius: 0;
	margin-bottom: 60px;
}
@media screen and (max-width:767px) {
  .swiper-scrollbar {
    width: 100%;
	margin-bottom: 40px;
  }
}
.swiper-scrollbar-drag {
  background: #CE8A00;
  border-radius: 0;
}


/* トップ強み
----------------------------*/
.p-top-stren-bg-inner.active, .p-top-stren-head.active, .col-list.active {
	transform : translateY(0);
	opacity : 1;
}
.p-top-stren {
    position: relative;
	padding: 0 0 100px;
	margin-top: 100px;
    z-index: 3;
}
.p-top-stren-bg {
    position: relative;
    padding-top: 40%;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
.p-top-stren {
	padding: 20px 0;
}
}
@media screen and (max-width: 767px) {
.p-top-stren-bg {
    padding-top: 300px
  }
}
.p-top-stren-bg-inner {
	opacity : 0;
	transition : all 2s ease;
}
.p-top-stren-bg-inner {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url("../../images/top/strengths-img.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
@media screen and (max-width: 767px) {
.p-top-stren-bg-inner {
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.s-container {
  	width: 1300px;
    padding: 0 20px;
    margin: 0 auto;
}
/* 強みタイトル */
.p-top-stren-head {
	transform : translateY(15px);
	opacity : 0;
	transition : all 1s ease;
}
.p-top-stren-head {
    width: 450px;
    position: absolute;
    left: 0;
    bottom: 360px;
    z-index: 5;
}
@media screen and (max-width: 1500px) {
.p-top-stren-head {
    bottom: 400px;
  }
}
@media screen and (max-width: 1200px) {
.p-top-stren-head {
    width: 320px;
    bottom: 290px;
  }
}
@media screen and (max-width: 1050px) {
.p-top-stren-head {
    bottom: 300px;
  }
}
@media screen and (max-width: 1000px) {
.p-top-stren-head {
    bottom: 340px;
  }
}
@media screen and (max-width: 767px) {
.p-top-stren-head {
    width: 280px;
    top: 290px;
  }
}
.p-top-stren-head:before {
   position: absolute;
   content: "";
   top: -40px;
   right: 0;
   width: 150%;
   height: 160px;
   border-radius: 30px;
   background-color: #CE8A00;
}
@media screen and (max-width: 767px) {
.p-top-stren-head:before {
   top: -30px;
   width: 150%;
   height: 120px;
}	
}
.p-top-stren-ttl-wrap {
    position: relative
}
.p-top-stren-ttl {
 	color: #fff;
    margin: 0 0 80px 0;
    padding: 0 0 0 40px;
}
.ttl-en {
	display: block;
	font-size : 1.4rem;
	font-weight : 700;
	line-height: 1.4;
	text-indent: 0.2em;
	letter-spacing : 0.1em;
	font-family : YakuHanJP, 'Montserrat', sans-serif;
}
.ttl-jp {
    display: block;
    position: relative;
	font-size: 2rem;
	font-weight: 500;
	line-height: 2.5rem;
}
@media screen and (max-width: 1200px) {
.ttl-en {
	font-size : 1.2rem;
}
.ttl-jp {
	font-size: 1.8rem;
}
}
@media screen and (max-width: 767px) {
.p-top-stren-ttl {
    padding-left: 20px;
}
.ttl-en {
    font-size: 1rem
 }
.ttl-jp {
	font-size: 1.4rem;
	line-height: 2rem;
}
}

.flex-m {
  	display: flex;
	flex-wrap: wrap;
	margin: 0 -20px;
}
@media screen and (max-width: 767px) {
.flex-m {
  	display: block;
}	
}
/* 強みリスト */
.p-top-stren-txt {
   　justify-content: flex-end;
}
.clum-area {
    position: relative;
    width: 100%;
    padding: 0 20px;
}
.p-top-stren-txt-box {
    position: relative;
    padding: 80px 0 60px 360px;
    z-index: 1;
}
@media screen and (max-width: 1500px) {
.p-top-stren-txt-box {
    padding: 120px 0 60px 360px;
}		
}
@media screen and (max-width: 1200px) {
.p-top-stren-txt-box {
    padding: 80px 0 60px 360px;
}	
}
@media screen and (max-width: 1100px) {
.p-top-stren-txt-box {
    padding: 80px 0 60px 330px;
}	
}
@media screen and (max-width: 1024px) {
.p-top-stren-txt-box {
    padding: 120px 0 60px 60px;
}	
}
@media screen and (max-width: 767px) {
.p-top-stren-txt-box {
    padding: 80px 0 40px 20px;
}	
}
.p-top-stren-txt-box:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    border-radius: 0 0 0 30px;
    background-color: #fff;
}
@media screen and (max-width: 767px) {
.p-top-stren-txt-box:before {
    top: 0;
    left: -20px;
    width: 100%;
}	
}
.p-top-stren-list-item {
    position: relative;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 30px 0 30px 65px;
}
@media screen and (max-width: 1200px) {
.p-top-stren-list-item {
    font-size: 1.2rem;
    padding: 20px 0 20px 60px;
  }
}
@media screen and (max-width: 430px) {
.p-top-stren-list-item {
    font-size: 0.6rem;
    padding: 15px 0 15px 50px;
  }
}
.p-top-stren-list-item:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
	background-image: url("../../images/top/list-paint.svg");
	background-repeat: no-repeat;
	background-size: 50px 50px;
    width: 50px;
    height: 50px;
    margin-top: -20px;
}
@media screen and (max-width: 1200px) {
.p-top-stren-list-item:before {
	background-size: 44px 44px;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    line-height: 44px
  }
}
@media screen and (max-width: 767px) {
.p-top-stren-list-item:before {
	background-size: 38px 38px;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    line-height: 38px
  }
}
.col-list {
	transform : translateY(15px);
	opacity : 0;
	transition : all 1s ease;
}
.col-list {
    flex: 0 0 50%;
    max-width: 50%
  }
@media screen and (max-width: 1200px) {
.col-list {
    flex: 0 0 36%;
  }	
}
@media screen and (max-width: 960px) {
.col-list {
    flex: 0 0 30%;
  }	
}

/* サービス内容
----------------------------*/
.p-top-service.active, .p-top-service .title01.active, .p-top-service-box.active {
	transform : translateY(0);
	opacity : 1;
}
.p-top-service {
	position: relative;
	margin: 0 auto;
	padding : 0 0 100px;
	transition : all 1s ease;
	opacity : 0;
    z-index: 1;
}
@media screen and (max-width: 1024px) {
.p-top-service {
	padding : 0 0 60px 0;
}		
}
@media screen and (max-width: 767px) {
.p-top-service {
	padding : 20px 0 0;
}		
}
.p-top-service .title01 {
	margin-left: 120px;
	transform : translateY(30px);
	opacity : 0;
	transition : all 2s ease;	
}
.p-top-service-area {
	width: 80%;
	margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@media screen and (max-width: 1430px) {
.p-top-service .title01 {
	margin-left: 40px;	
}
.p-top-service-area {
	width: 100%;
}
}
@media screen and (max-width: 1024px) {
.p-top-service .title01 {
	margin-left: 20px;	
}
}
@media screen and (max-width: 767px) {
.p-top-service-area {
	flex-direction : column;
    justify-content: center;
}
}
.p-top-service-area a {
    max-width: 640px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 10px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #fff;
    overflow:hidden;
}
@media screen and (max-width: 767px) {
.p-top-service-area a {
	width: 100%;
    max-width: 100%;
}		
}
.p-top-service-area a:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 500%;
    content: "";
    transition: all 0.5s ease-in-out;
    transform: translateX(-120%) translateY(-10%) rotate(45deg);
    background: #CE8A00;
    opacity: 1;
}
.p-top-service-area a:hover:before {
    transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
@media screen and (max-width: 1024px) {
.p-top-service-area a:before {
    width: 260%;
}	
}
@media screen and (max-width: 767px) {
.p-top-service-area a:before {
    width: 220%;
}	
}
@media screen and (max-width: 375px) {
.p-top-service-area a:before {
    width: 250%;
}	
}
@media screen and (max-width: 320px) {
.p-top-service-area a:before {
    width: 270%;
}	
}
.p-top-service-box {
    position: relative;
    width: 50%;
    padding: 0 15px;
    margin-bottom: 30px;
}
.p-top-service-box {
	transform : translateY(15px);
	transition : all 1s ease;
	opacity : 0;
}
@media screen and (max-width: 767px) {
.p-top-service-box {
    width: 100%;
	flex-direction : column;
}
.p-top-service-box:last-child {
    margin-bottom: 0;
}
}

.p-top-service-col {
  display: block;
  padding: 40px 30px;
	height: 200px;
  overflow: hidden;
  border-radius: 30px;
  background-color: #fff;
  color: #333;
	margin: 0 20px;
  transition: all 0.4s cubic-bezier(.37, 0, .63, 1);
  transition-timing-function: cubic-bezier(.37, 0, .63, 1)；
}

@media (max-width:1199px) {
.p-top-service-col {
    padding: 35px 20px
  }
}

@media (max-width:767px) {
.p-top-service-col {
    padding: 30px 25px
  }
}

@media (max-width:575px) {
.p-top-service-col {
    padding: 25px 20px
  }
}
.p-top-service-col-inner {
  display: flex;
  position: relative;
  align-items: center
}

.p-top-service-col-title {
   position: relative;
	font-size: 1.6rem;
   font-weight: 500;
   white-space: nowrap;
   z-index: 2;
}

@media (max-width:1199px) {
.p-top-service-col-title {
    font-size: 1.1rem
  }
}

@media (max-width:767px) {
.p-top-service-col-title {
    font-size: 1.2rem
  }
}

.p-top-service-col-inner .arrow01 {
	margin-left: 14vw;
}
.p-top-service-col-inner .arrow01.yane {
	margin-left: 13vw;
}


.p-top-service-col:hover {
  color: #fff;
  text-decoration: none
}
.p-top-service-col-icon {
	margin-right: 20px;
}
.p-top-service-col-icon.gaiheki-i, .p-top-service-col-icon.bousui-i {
	width: 60px;
	height: 60px;	
}
.p-top-service-col-icon.naibu-i {
	width: 55px;
	height: 55px;	
	margin-top: -20px;
}
.p-top-service-col-icon.yane-i {
	width: 80px;
	height: 80px;	
}

/* ニュース
----------------------------*/
.p-top-news-inner .title01.active, .p-top-news-text.active {
	transform : translateY(0);
	opacity : 1;
}
.p-top-news {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction : column;
    justify-content: center;
}
.p-top-news-inner {
	position: relative;
	display: flex;
    justify-content: center;
}
.p-top-news-inner .title01{
	transform : translateY(15px);
	opacity : 0;
	transition : all 1s ease
}
@media screen and (max-width: 767px) {
.p-top-news {
	padding: 80px 0 30px;
}
.p-top-news-inner {
	width: 100%;
	flex-direction : column;
}	
}
.p-top-news-inner .title01 {
	margin-right: 5vw;
}
.p-top-news-inner .title01 h2.toptitle {
	white-space : nowrap;
}
.p-top-news-text {
	position: relative;
	width: 100%;
	transform : translateY(15px);
	opacity : 0;
	transition : all 1s ease;
}
ul.p-top-news-text li, ul.p-top-news-text a li {
	position : relative;
	width: 100%;
	display : flex;
	align-items : flex-start;
	padding: 30px 0;
	color: #333;
	border-bottom: 1px solid #c9c4bc;
}
ul.p-top-news-text a li {
	position: relative;
}
@media screen and (max-width: 767px) {
.p-top-news-inner .title02 {
	margin-right: 0;
}
ul.p-top-news-text li, ul.p-top-news-text a li {
	width: 100%;
	flex-direction : column;
	padding: 15px 0;
}
ul.p-top-news-text li:first-child, ul.p-top-news-text a li:first-child {
	padding-top: 0;
}
}
@media (hover: hover) {
ul.p-top-news-text a li:hover {
	color : #d7a065;
	transition : all 1s ease;
}
}
.p-top-news-text .arrow01 {
	position : absolute;
	top : 50%;
	right : 0;
	transform : translateY(-50%);
}
@media screen and (max-width: 767px) {
.p-top-news-text .arrow01 {
	top : 70%;
	transform : translateY(-70%);
}
}
.p-top-news-text data {
	font-size: 0.9rem;
	font-family : YakuHanJP, 'Montserrat', sans-serif;
	font-weight : 600;
	letter-spacing : 0.1em;
	margin-right: 1.5em;
	line-height: 2.4;
	color: #5A5858;
}
.p-top-news-text  p {
	font-size: 1rem;
	letter-spacing : 0.1em;
	line-height: 2;
	text-align: left;
 	flex-wrap:wrap;
}
@media screen and (max-width: 767px) {
.p-top-news-text data {
	font-size: 0.8rem;
}
.p-top-news-text  p {
	font-size: 0.9rem;
}	
}
@media screen and (max-width: 375px) {
.p-top-news-text  p {
	font-size: 0.8rem;
}	
}

/* イメージスライダー
----------------------------*/
.loopSlider.active {
	transform : translateY(0);
	opacity : 1;
}
.slider {
	padding: 100px 0;

}
@media screen and (max-width: 767px) {
.slider {
	padding: 60px 0;

}		
}
.loopSlider{
	height: 500px;
	overflow: hidden;
	position: relative;
	transition : all 2s ease;
	opacity : 0;
}
.loopSlider .loopslider-wrap {
	height: 500px;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
}
@media screen and (max-width: 767px) {
.loopSlider{
	height: 200px;
}
.loopSlider .loopslider-wrap{
	height: 200px;
}	
}
.loopSlider .loopslider-wrap ul{
	display: flex;
    justify-content: center;
    align-items: center;
}
.loopSlider .loopslider-wrap ul li{
	margin-left: 3vw;
}
.loopSlider .loopslider-wrap ul li:nth-child(odd){
	width: 500px;	
	height: 377px;
}
.loopSlider .loopslider-wrap ul li:nth-child(even){
	width: 390px;	
	height: 500px;
}
@media screen and (max-width: 680px) {
.loopSlider .loopslider-wrap ul li:nth-child(odd){
	width: 200px;	
	height: 151px;
}
.loopSlider .loopslider-wrap ul li:nth-child(even){
	width: 156px;	
	height: 200px;
}
.loopSlider .loopslider-wrap ul li:nth-child(odd) img {
	width: 200px;	
	height: 151px;
}
.loopSlider .loopslider-wrap ul li:nth-child(even) img {
	width: 156px;	
	height: 200px;
}
}
.loopSlider .topp-illust-text > div {
	animation: text-loop 58s infinite linear 0.5s both;
}
.loopSlider .topp-illust-text > div span {
	font-weight : 400;
	color: #DCD1BA;
	margin-top: 400px;
}


/* エリア
----------------------------*/
.p-top-area.active, .p-top-area-inner.active {
	transform : translateY(0);
	opacity : 1;
}
.p-top-area {
    position: relative;
    width: 100%;
    margin: 0 auto 100px;
    padding: 80px 60px;
	background-image: url("../../images/top/area-bg.jpg");
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
	z-index: 1;
}
.p-top-area {
	transform : translateY(15px);
	opacity : 0;
	transition : all 2s ease;
}
@media screen and (max-width: 767px) {
.p-top-area {
    padding: 40px 20px;
    margin-bottom: 30px;
}
}
.p-top-area-inner {
	width: 80%;
	margin: 0 auto;
    background-color: #eeebe5;
    border-radius: 30px;
    padding: 80px 50px 60px;
	z-index: 99;
}
.p-top-area-inner {
	transform : translateY(15px);
	opacity : 0;
	transition : all 2s ease;
}
@media screen and (max-width: 1300px) {
.p-top-area-inner {
	width: 100%;
    padding: 80px 30px 60px;

}
}
@media screen and (max-width: 960px) {
.p-top-area-inner {
    padding: 40px 0 0;
}
}
.p-top-area-ttl {
    color: #CE8A00;
    font-size: 2.4rem;
    font-weight: 800;
    padding: 15px 0;
    text-align: center;
}
.p-top-area-ttl .en {
    display: block;
    margin-bottom: 15px;
    font-size: 1.4rem;
	font-weight: 800;
    color: #CE8A00;
}

@media screen and (max-width: 767px) {
.p-top-area-ttl {
    font-size: 1.6rem;
}
.p-top-area-ttl .en {
    margin-bottom: 10px;
    font-size: 1.2rem;
}
}

.p-top-area-list {
    display: flex;
    align-items: center;
	justify-content : center;
}

@media screen and (max-width: 960px) {
.p-top-area-list {
	width: 100%;
    padding: 20px;
    flex-direction: column;
}
}
.p-top-area-list-ttl {
    font-size: 1.4rem;
	line-height: 1.5;
    font-weight: 600;
	padding-left: 1.4rem;
	text-indent: -1.4rem;
    color: #CE8A00;
    margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
.p-top-area-list-ttl {
    font-size: 1.2rem;
	padding-left: 1.2rem;
	text-indent: -1.2rem;
    margin-bottom: 0;
}
}

.p-top-area-list-ttl .fa-solid  {
    font-size: 20px;
    color: #CE8A00;
    display: inline-block;
	padding-left: 1.4rem;
}

@media screen and (max-width: 767px) {
.p-top-area-list-ttl .fa-solid {
    font-size: 18px;
	padding-left: 1.2rem;
}
}
.p-top-area-list-con {
    font-size: 1rem;
    line-height: 2.0;
    margin-bottom: 35px;
    margin-top: 30px;
    display: flex;
}
.p-top-area-list-con-txt{
    width: 100%;
	letter-spacing: 0.1rem;
    text-align: justify;
}
.p-top-area-img img {
    width: 450px;
}

@media screen and (max-width: 767px) {
.p-top-area-list-con {
    margin-bottom: 10px;
}
.p-top-area-img img {
    width: 300px;
    margin: auto;
}
.p-top-area-list-con-txt{
    width: 90%;
}
}
.p-top-area-list-con:nth-last-of-type(1) {
    margin-bottom: 0;
}


/* お問合せバナー
----------------------------*/
.contact-bn-area {
    padding: 100px 0;
    background: url("../images/contact-bnn.jpg") no-repeat center/cover;
}
@media screen and (max-width:767px) {
.contact-bn-area {
    background: url("../images/contact-bnn-sp.jpg") no-repeat center/cover;
    padding: 40px 0;
}
}
.contact-bn-inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
@media screen and (max-width:749px) {
.contact-bn-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
	padding: 0 20px;
}
}
.contact-bn-head {
    text-align: center;
    margin-bottom: 2rem;
}
@media screen and (max-width:767px) {
.contact-bn-head {
    margin-bottom: 1rem;
  }
}
.contact-bn-ttl {
    font-size: 2.4rem;
	font-weight: 600;
    color: #fff;
}
@media screen and (max-width:767px) {
.contact-bn-ttl {
    font-size: 1.6rem;
	line-height: 1.4;
}
}
.contact-bn-ttl .ja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
	padding: 0 2rem;
}
.contact-bn-ttl .ja::before {
	content: "";
	display: block;
	width: 2px;
	height: 1em;
	transform: rotate(-45deg) translateY(-50%);
	position: absolute;
	top: 50%;
}
.contact-bn-ttl .ja::after {
	content: "";
	display: block;
	width: 2px;
	height: 1em;
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: 50%;
}

.contact-bn-ttl .ja::before,
.contact-bn-ttl .ja::after {
	background: #fff
}
.contact-bn-ttl .ja::before {
	left: 0;
}
.contact-bn-ttl .ja::after {
	right: 0.3em;
}
.contact-bn-ttl .en {
    display: block;
    margin-bottom: 15px;
    font-size: 1.4rem;
	font-weight: 800;
    color: #fff;
}
@media screen and (max-width:767px) {
.contact-bn-ttl .en {
    margin-bottom: 5px;
    font-size: 1.2rem;
}	
}
.contact-bn-con {
    display: flex;
    justify-content: space-between;
}
@media screen and (max-width:960px) {
.contact-bn-con {
	flex-direction : column;
	align-items : center;
	justify-content : center;
    width: 100%;
}
}
.contact-bn-item {
    width: 50%;
    color: #fff;
    padding: 0 2rem;
    text-align: center;
}
@media screen and (max-width:960px) {
.contact-bn-item {
	width: 30rem;
    position: relative;
	margin: 2rem auto;
}
}
@media screen and (max-width:767px) {
.contact-bn-item {
	width: 22rem;
}
}
@media screen and (max-width:485px) {
.contact-bn-item {
	width: 100%;
	margin: 1rem 0;
}
}
@media screen and (min-width:960px) {
.contact-bn-item+.contact-bn-item {
    border-left: 1px solid #dedede
  }
}
.contact-bn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    width: 1.8em;
    height: 1.8em;
    margin: 0 auto;
    font-size: 3em;
}
@media screen and (max-width:960px) {
.contact-bn-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 7rem;
    height: 7rem;
    font-size: 3em;
}
}
@media screen and (max-width:767px) {
.contact-bn-icon {
    width: 5rem;
    height: 5rem;
    font-size: 2.4em;
}
}
.contact-bn-icon i {
	font-size: 3rem;
}
.contact-bn-con-head {
	width: 100%;
    text-align: center;
    margin: 2rem 0;
}
@media screen and (max-width:960px) {
.contact-bn-con-head {
	text-align: left;
    margin: 0 0 2rem 6rem;
}		
}
@media screen and (max-width:767px) {
.contact-bn-con-head {
    margin: 0 0 2rem 4rem;
}		
}
@media screen and (max-width:392px) {
.contact-bn-con-head {
    margin: 0 0 2rem 3.5rem;
}		
}
.contact-bn-con-foot {
	width: 100%;
    align-items: center;
}
@media screen and (max-width:960px) {
.contact-bn-con-foot.bt {
	margin-top: -1rem;
}		
}
.contact-bn-con-foot .btn01 {
	margin: 0 auto;
    width: 21rem;
	background-color: #fff;
}
.contact-bn-con-foot .bt-txt{
	color : #333;
}
@media screen and (max-width:960px) {
.contact-bn-con-foot {
    align-items: left;
	text-align: left;
	margin: -1rem 0 0 6rem;
}
.contact-bn-con-foot .btn01 {
	margin: 2.5rem 0 0 0;
    width: 20.5rem;
}
}
@media screen and (max-width:767px) {
.contact-bn-con-foot {
	margin: -1rem 0 0 4rem;
}
.contact-bn-con-foot .btn01 {
    width: 15rem;
	margin: 0;
}	
}
@media screen and (max-width:392px) {
.contact-bn-con-foot {
	margin: -1rem 0 0 3.5rem;
}
.contact-bn-con-foot .btn01 {
    width: 13rem;
}
.contact-bn-con-foot.tel {
	margin-top: -1.5rem;
}
}
@media screen and (max-width:320px) {
.contact-bn-con-foot .btn01 {
    width: 12rem;
}
.contact-bn-con-foot.tel {
	margin-top: -2rem;
}
}
.contact-bn-con-tlt {
    font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0.02rem;
}
@media screen and (max-width:767px) {
.contact-bn-con-tlt {
    font-size: 1rem;
	font-weight: 500;
}	
}
@media screen and (max-width:392px) {
.contact-bn-con-tlt {
    font-size: 0.9rem;
}	
}
@media screen and (max-width:358px) {
.contact-bn-con-tlt {
    font-size: 0.8rem;
}	
}
@media screen and (max-width:320px) {
.contact-bn-con-tlt {
    font-size: 0.75rem;
}	
}
.contact-bn-tel {
    color: #fff;
	font-family : 'Montserrat', sans-serif;
	font-weight: 600;
	letter-spacing: 0.1rem;
	font-size: 2rem;
}
.contact-bn-tel .sm {
    font-size: 0.8rem;
}
@media screen and (max-width:767px) {
.contact-bn-tel {
	font-size: 1.8rem;
}		
}
@media screen and (max-width:392px) {
.contact-bn-tel {
	font-size: 1.6rem;
}		
}
@media screen and (max-width:358px) {
.contact-bn-tel {
	font-size: 1.4rem;
}		
}
@media screen and (max-width:320px) {
.contact-bn-tel {
	font-size: 1.25rem;
}		
}
.contact-bn-note {
    color: #fff;
    font-size: 0.9rem;
	letter-spacing: 0.06rem;
    text-align: center;
    margin-top: 1.6em;
	white-space: nowrap;
}
@media screen and (max-width:960px) {
.contact-bn-note {
    margin: 1em 0 0 6rem;
    text-align: left
}
}
@media screen and (max-width:767px) {
.contact-bn-note {
    margin: 1em 0 0 4rem;
}
}
@media screen and (max-width:392px) {
.contact-bn-note {
    font-size: 0.7rem;	
    margin: 1em 0 0 3.5rem;
}
}
@media screen and (max-width:320px) {
.contact-bn-note {
    font-size: 0.65rem;	
}
}

/* フッター
----------------------------*/
.ft {
    background: #eeebe5;
    padding: 100px 0 40px;
}
.ft a {
	color: #333;
}
@media screen and (max-width:767px) {
.ft {
    padding: 60px 0 20px;
}
}
.ft-inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
@media screen and (max-width:1100px) {
.ft-inner {
	padding: 0 40px;
}
}
@media screen and (max-width:767px) {
.ft-inner {
	padding: 0 0 20px 0;
}
}
.ft-logo {
  width: 16rem;
  margin: 0 auto 40px;
}
.sitemap {
  margin-bottom: 40px;
  border-bottom: 1px solid #dedede
}

@media screen and (min-width:767px) {
.sitemap {
    display: flex;
    justify-content: space-between;
    padding-bottom: 60px;
}
}

@media screen and (min-width:767px) and (max-width:960px) {
.sitemap {
    width: 100%;
    margin: 0 auto 40px;
	text-align: center;
}
}
@media screen and (max-width:767px) {
.sitemap {
	flex-direction : column;
	text-align: center;
    margin: 0 auto 20px;
}
}
@media screen and (max-width:767px) {
.sitemap-item {
    border-top: 1px solid #dedede;
}
}
.sitemap-link {
    position: relative;
    font-size: 1rem;
	line-height: 2.5;
    font-weight: 600;
    transition : all 1s ease;
}
@media screen and (max-width:767px) {
.sitemap-link {
    display: block;
    padding: 10px 0;
}
}

@media (hover: hover) {
.sitemap-link:hover, .sitemap-ch-anc:hover {
	color : #d7a065;
}
}
@media screen and (max-width:767px) {
.sitemap-ch {
    padding: 0 1em .5em;
  }
}
.ft-pra {
	text-align: center;
	padding-bottom: 40px;
}
@media screen and (max-width:767px) {
.ft-pra {
	padding-bottom: 20px;
}		
}
.ft-pra a {
	font-size: 0.8rem;
	font-weight: 400;
	color: #A29F9F;
}
@media screen and (min-width:767px) {
.sitemap-ch-item {
    margin-top: .5em;
}
.sitemap-ch-item::before {
    content: "-";
    color: #333;
}
}
@media screen and (max-width:767px) {
.sitemap-ch-item {
    padding: .5em 0;
}
}
.sitemap-ch-anc {
    font-size: 1rem;
	font-weight: 400;
    transition : all 1s ease;
}
@media screen and (max-width:767px) {
.sitemap-ch-anc {
    display: block;
}
.sitemap-ch-anc::before {
    content: "-"
}
}
.copyright {
    font-size: 0.8rem;
	font-family : 'Montserrat', sans-serif;
	font-weight: 500;
	letter-spacing : 0.06em;
    text-align: center;
    color: #BBB4A6;
}
@media screen and (max-width:767px) {
.copyright {
    font-size: 0.7rem;
}
}


/* 下層ページ
----------------------------*/

/* ぱんくず
----------------------------*/
.breadcrumb {
	width : 1190px;
    margin : 0 auto;
}
.breadcrumb-list {
    display : flex;
    justify-content : flex-start;
    align-items : flex-start;
    flex-wrap : wrap;
}
.breadcrumb-item {
    font-size : 0.8rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
    display : inline-block;
	color: #A29F9F;
}
.breadcrumb-item:not(:last-child)::after {
    content : " - ";
    display : inline-block;
    margin : 0 10px;
	color: #A29F9F;
}
.breadcrumb-item a {
    transition : 0.5s ease;
    display : inline-block;
	color: #CE8A00;
}

@media only screen and (max-width: 1190px) {
.breadcrumb {
	width : 100%;
    margin : 0 20px;
	display: none;
}
}

/* 下層メインビジュアルタイトル
----------------------------*/
.pagettl-box {
    position: relative;
	width : 1190px;
	margin: 100px auto 0;
	padding: 80px 0;
}
@media screen and (max-width:1190px) {
.pagettl-box {
	width : 100%;
	padding: 40px 20px 60px;
}
}
@media screen and (max-width:767px) {
.pagettl-box {
	width : 100%;
	padding: 30px 20px 0;
}
}
.page-ttl.en{
	font-size : 4rem;
	font-weight: 600;
	text-align : left;
	margin: 0 auto;		
}
@media screen and (max-width:767px) {
.page-ttl.en{
	font-size : 2.4rem;	
	line-height: 0.7;
}
.visual-wall .page-ttl.en, .visual-roof .page-ttl.en, .visual-internal .page-ttl.en {
	line-height: 1.2;
}
.visual-waterproof .page-ttl.en {
	font-size : 1.6rem;
	line-height: 1.2;
}
.visual-privacy .page-ttl.en {
	font-size : 1.7rem;
	line-height: 1;
}
}
.page-ttl.jp {
    display : block;
    font-size : 1rem;
	font-weight: 500;
	margin-top: 1rem;
    text-indent: 0.2rem;
	padding-left: 14px;
	background-image: url("../images/mark.svg");
	background-repeat: no-repeat;
	background-size: 12px 12px;
	background-position: left 3px;
}
/* 下層メイン会社案内画像
----------------------------*/
.visual-about .image-visual {
	width: 100%;
	height: 430px;
	margin-bottom: 30px;
	background-image: url("../../images/about/about-img.jpg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position: cover;
	resize: both;
}
@media screen and (max-width:1024px) {
.visual-about .image-visual {
	margin-bottom: 60px;
}
}
@media screen and (max-width:767px) {
.visual-about .image-visual {
	margin-bottom: 30px;
	height: 160px;
	background-image: url("../../images/about/about-img-sp.jpg");
}
.visual-about .pagettl-box {
	width : 100%;
	padding: 30px 20px;
}
}

/* 下層メインFAQ画像
----------------------------*/
.visual-faq .image-visual {
	width: 100%;
	height: 430px;
	margin-bottom: 30px;
	background-image: url("../../images/faq/faq-img.jpg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	resize: both;
}
@media screen and (max-width:1024px) {
.visual-faq .image-visual {
	margin-bottom: 60px;
}
}
@media screen and (max-width:767px) {
.visual-faq .image-visual {
	margin-bottom: 30px;
	height: 160px;
	background-image: url("../../images/faq/faq-img-sp.jpg");
	background-position: center top -40px;
}
.visual-faq .pagettl-box {
	width : 100%;
	padding: 30px 20px;
}
}

/* 下層メイン塗装価格画像
----------------------------*/
.visual-price .image-visual {
	width: 100%;
	height: 430px;
	margin-bottom: 30px;
	background-image: url("../../images/price/price-img.jpg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	resize: both;
}
@media screen and (max-width:1024px) {
.visual-price .image-visual {
	margin-bottom: 60px;
}
}
@media screen and (max-width:767px) {
.visual-price .image-visual {
	margin-bottom: 30px;
	height: 160px;
	background-image: url("../../images/price/price-img-sp.jpg");
	background-size: 100% 100%;
}
.visual-price .pagettl-box {
	width : 100%;
	padding: 30px 20px;
}
}

/* 施工事例
----------------------------*/
.works-wrap {
    position: relative;
	width : 100%;
}
.works-box {
	width: 1190px;
	margin: 100px auto 120px;
}
@media screen and (max-width:1190px) {
.works-box {
	width: 100%;
	margin: 60px auto 30px;
	padding: 0 20px;
}		
}
@media screen and (max-width:767px) {
.works-box {
	padding: 0 20px;
	margin: 60px auto 100px;
}		
}
.works-box h2 {
	font-size: 1.2rem;
	margin: 0 0 20px;
	padding: 0 0 20px 0;
	border-bottom: solid 1px #BBB4A6;
}
.works-box h3 {
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	margin: 0 10px 20px 0;
	padding: 10px;
	background-color: #d7a065;
}
.works-box .works-img {
	width: 1190px;
	margin-top: 30px;
	position: relative;
    display: flex;
	align-items: center;
	justify-content : space-between;
}
.works-box .w-table {
	width : 1190px;
	margin : 10px auto 0;
	text-align: left;
}
@media screen and (max-width:1190px) {
.works-box .works-img {
	width: 100%;
}
.works-box .works-img .befor {
	margin-right: 4%;
}
.works-box .works-img img {
	width: 100%;
}
.works-box .w-table {
	width : 100%;
}	
}
@media screen and (max-width:767px) {
.works-box .works-img {
	flex-direction : column;
	align-items : center;
	justify-content : center;
}	
.works-box .works-img .befor {
	margin: 0 0 20px 0;
}
}
.works-box .w-table th, .works-box .w-table td {
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 500;
	padding : 40px 10px;
	border-bottom : 1px solid #BBB4A6;
}
@media screen and (max-width:767px) {
.works-box .w-table th, .works-box .w-table td {
	padding : 30px 0;
}		
}
.w-table th {
    width : 24%;
}
.w-table td {
    width : 76%;
}
@media screen and (max-width:320px) {
.w-table th {
    width : 30%;
}
.w-table td {
    width : 70%;
}
}

.works-year-wrap {
	width: 1190px;
	margin: 0 auto 80px;
}
@media screen and (max-width:1190px) {
.works-year-wrap {
	width: 100%;
	margin: 60px auto;
	padding: 0 20px;
}		
}
@media screen and (max-width:767px) {
.works-year-wrap {
	padding: 0 20px;
	margin: 30px auto 60px;
}		
}
li.works-year {
	display: inline-block;
	font-size: 1rem;
	padding: 10px 30px;
	border: solid 1px #d7a065;
	margin: 0 10px 20px 0;
	border-radius: 20px;
}
@media (hover: hover) {
.works-year:hover {
	background-color: #E5CC9B;
	transition : all 2s ease;
}
}

/* サービス内容
----------------------------*/
.service-wrap-inner {
	width: 1190px;
	margin: 100px auto 120px;
}
@media screen and (max-width:1190px) {
.service-wrap-inner {
	width: 100%;
	margin: 60px auto 100px;
	padding: 0 20px;
}
}
@media screen and (max-width:767px) {
.service-wrap-inner {
	margin: 60px auto;
}
}
.service-box-wrap  {
	width: 1190px;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media screen and (max-width:1190px) {
.service-box-wrap {
	width: 100%;
}
}
@media screen and (max-width:767px) {
.service-box-wrap {
	width: 100%;
	flex-direction : column;
	align-items : flex-start;
	justify-content : center;
}
}
.service-box {
	width: 48%;
}
@media screen and (max-width:767px) {
.service-box {
	width: 100%;
	margin-bottom: 30px;
}		
}
.service-box:first-child, .service-box:nth-child(2){
	margin-bottom: 60px;
}
@media screen and (max-width:767px) {
.service-box:first-child, .service-box:nth-child(2){
	margin-bottom: 30px;
}	
}
.service-box p {
	color: #333;
}
.corners {
	display: block;
	border-radius: 10px;
	overflow: hidden;
}
@media screen and (min-width:768px) {
  .corners {
	border-radius: 20px
}
}

.s-btn-hover-wrap {
	overflow: hidden;
}
.s-btn-hover-wrap img {
	width: 100%;
	max-width: none;
	transition: transform 2s cubic-bezier(0.01, 0.67, 0.58, 1)
}
.s-btn-hover:hover .s-btn-hover-wrap img {
	transform: scale(1.1)
}
h2.s-heading {
	width: 100%;
    position: relative;
	color: #333;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: .02em;
	margin-top: 10px;
	display: block;
}
.s-heading .arrow01 {
	width : 22px;
	height : 22px;
	margin: 0.1rem 0 0 10px;

}
.s-heading-inner {
	position: relative;
	width: 100%;
	padding: 10px 0;
	display: inline-flex;
	overflow: hidden;
}

/* 外壁塗装・屋根・防水・内装
----------------------------*/
.ser-wall {
	width: 1190px;
	margin: 100px auto 120px;
}
@media screen and (max-width:1190px) {
.ser-wall {
	width: 100%;
	margin: 50px auto 100px;
	padding: 0 20px;
}
}
@media screen and (max-width:767px) {
.ser-wall {
	margin: 60px auto;
}
}
.ser-wrap-inner {
	margin: 100px auto 120px;
}
@media screen and (max-width:1190px) {
.ser-wrap-inner {
	margin: 60px auto 30px;
}
}
.ser-box-wrap  {
	width: 1190px;
	display: flex;
    flex-wrap: wrap;
	gap: 20px;
}
@media screen and (max-width:1190px) {
.ser-box-wrap {
	width: 100%;
}
}
@media screen and (max-width:767px) {
.ser-box-wrap {
	width: 100%;
	flex-direction : column;
	align-items : flex-start;
	justify-content : center;
}
}
.ser-box {
	width: 23%;
}
@media screen and (max-width:767px) {
.ser-box {
	width: 100%;
	margin-bottom: 30px;
}		
}
.ser-box p {
	color: #333;
}
.corners {
	display: block;
	border-radius: 10px;
	overflow: hidden;
}
@media screen and (min-width:768px) {
  .corners {
	border-radius: 20px
}
}
h2.ser-heading {
	width: 100%;
    position: relative;
	color: #333;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin-top: 10px;
	display: block;
}
.ser-heading-inner {
	position: relative;
	width: 100%;
	padding: 10px 0;
	display: inline-flex;
	overflow: hidden;
}


/* table共通
-----------------*/
.about-wrap {
	width: 1190px;
	margin: 100px auto 120px;
}
@media screen and (max-width:1190px) {
.about-wrap {
	width: 100%;
	margin: 0 auto 80px;
	padding: 0 20px;
}
}
@media screen and (max-width:767px) {
.about-wrap {
	margin: 0 auto 60px;
}
}
.about-wrap .title01 {
	margin-bottom: 10px;
}
@media screen and (max-width:767px) {
.about-wrap .title01 .en {
	font-size: 0.9rem;
}
}

.p-low-tb-table-list {
	align-items : flex-start;
	display : flex;
	width : 100%;
}
.p-low-tb-table {
	display : flex;
	flex-wrap : wrap;
	border : 1px solid #E2DFD9;
}
.p-low-tb-table-list {
	display : flex;
	align-items : flex-start;
	width : 100%;
	border-top : 1px solid #E2DFD9;
}
.p-low-tb-table-list:first-child {
	border-top : none;
}
.p-low-tb-table-list .title {
	height : 100%;
	max-width : 220px;
	min-width : 220px;
	padding : 40px;
	background : #eeebe5;
	font-size: 0.9rem;
	line-height: 1.6rem;
	font-weight: 600;
}
.p-low-tb-table-list .text {
	padding : 30px;
	height : 100%;
}
.p-low-tb-table-list .text p {
	margin-top: 20px;
}
.p-low-tb-table-list .text p:first-child {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
.p-low-tb-table, .p-low-tb-table-list {
	display : block;
	border: none;
}
.p-low-tb-table-list .title {
	max-width : 100%;
	min-width : 100%;
}
.p-low-tb-table-list .text, .p-low-tb-table-list .title {
	padding : 20px;
}
}

/* 塗装工程
----------------------------*/
.flow-wrap {
    position: relative;
	width: 1190px;
	margin: 100px auto 0;
}
@media screen and (max-width:1190px) {
.flow-wrap {
	width: 100%;
	margin: 60px auto 30px;
	padding: 0 20px;
}	
}
.flowttl-box{
	display: flex;
	margin-bottom: 10px;
}
@media screen and (max-width:767px) {
.flowttl-box{
	margin-bottom: 0;
}		
}
.flowttl-box .num-box{
	background: url("../../images/flow/step.svg")center center no-repeat;
	background-size: contain;
	width: 60px;
	height: 60px;
	text-align: center;
	color: #fff;
	margin: 0 10px 10px 0;
}
@media screen and (max-width:767px) {
.flowttl-box .num-box{
	width: 40px;
	height: 40px;
	margin: 0 5px 10px 0;
}
}
.flowttl-box .num-box .num {
	font-family : YakuHanJP, 'Montserrat', sans-serif;
	font-weight : 500;
	letter-spacing : 0.1em;
	font-size: 1.4rem;
	margin-top: 24px;
}
.flowttl-box h2.flow-ttl{
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.1rem;
	margin-bottom: 10px;
	padding-top: 12px;
}
@media screen and (max-width:767px) {
.flowttl-box .num-box .num {
	font-size: 1rem;
	margin-top: 15px;
}
.flowttl-box h2.flow-ttl{
	font-size: 1.2rem;
	padding-top: 5px;
}
}
.flow-list{
	display: flex;
	justify-content: space-between;
	margin-bottom: 70px;
}
@media screen and (max-width:767px){
.flow-list{
	display: block;
	margin-bottom: 40px;
}
}
.flow-block:last-of-type{
	margin-bottom: 100px;
}
@media screen and (max-width:767px){
.flow-block:last-of-type{
	margin-bottom: 60px;
}		
}
.flow-list .flow-imgbox{
	width: 44%;
}
.flow-list .flow-imgbox img{
	width: 100%;
}
@media screen and (max-width:767px){
.flow-list .flow-imgbox{
	width: 100%;
	margin-bottom: 10px;
}
}
.flow-list .note-box{
	width: 50%;
}
@media screen and (max-width:767px){
.flow-list .note-box{
	width: 100%;
}
}

/* よくあるご質問
----------------------------*/
.faq-wrap {
    position: relative;
	width: 1190px;
	margin: 100px auto;
	padding: 100px 0;
}
@media screen and (max-width:1190px) {
.faq-wrap {
	width: 100%;
	margin: 60px auto 80px;
	padding: 60px 20px;
}	
}
@media screen and (max-width:767px) {
.faq-wrap {
	margin: 60px auto;
	padding: 60px 0;
}	
}
.faq-box  {
    border-radius: 20px;
	background-color: #fff;
}
@media screen and (min-width: 1025px) {
.faq-box  {
    padding: 50px 90px;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
.faq-box  {
    padding: 40px 30px;
  }
}
@media screen and (max-width: 767px) {
.faq-box  {
    padding: 30px 20px;
}
}
.faq-box:not(:last-child) {
	margin-bottom: 30px;
}

.faq-hed {
	display: flex;
	position: relative;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	padding: 0 0 30px 50px;
	margin-bottom: 30px;
	border-bottom: 1px solid #eeebe5;
}
.faq-hed::before {
	position: absolute;
	left: 0;
	flex: 0 0 auto;
	content: "";
	display: block;
	width: 28px;
	height: 30px;
	background-image: url("../../images/faq/q.svg");
	background-repeat: no-repeat;
	background-size: contain;
}
@media screen and (max-width: 767px) {
.faq-hed {
    font-size: 0.9rem;
    padding-left: 35px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
}

.faq-drec {
	font-size: 1rem;
	line-height: 2.2;
	display: block;
	padding-left: 50px;
	position: relative;
}
.faq-drec::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0.3rem;
	flex: 0 0 auto;
	display: block;
	margin-right: 0;
	width: 24px;
	height: 27px;
	background-image: url("../../images/faq/a.svg");
	background-repeat: no-repeat;
	background-size: contain;
}
@media screen and (max-width: 767px) {
  .faq-drec {
    font-size: 0.9rem;
    padding-left: 35px;
}
}

/* 塗装価格
----------------------------*/
.price-wrap {
    position: relative;
	width: 1190px;
	margin: 100px auto;
	padding: 100px 0;
}
@media screen and (max-width:1190px) {
.price-wrap {
	width: 100%;
	margin: 60px auto 80px;
	padding: 60px 20px;
}	
}
@media screen and (max-width:767px) {
.price-wrap {
	margin: 60px auto;
	padding: 50px 0 60px;
}	
}
.price-wrap .text {
	padding-bottom: 20px;
}
@media screen and (max-width: 767px) {
.price-wrap .text  {
	padding-bottom: 0;
}
}
.price-box  {
    border-radius: 20px;
	background-color: #fff;
	margin-top: 30px;
}
@media screen and (min-width: 1025px) {
.price-box  {
    padding: 70px 40px;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
.price-box  {
    padding: 60px 30px;
  }
}
@media screen and (max-width: 767px) {
.price-box  {
    padding: 40px 20px 20px;
}
}
.price-box:not(:last-child) {
	margin-bottom: 30px;
}

.price-hed {
	display: flex;
	position: relative;
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: 600;
	color: #d7a065;
	padding: 0 0 30px 65px;
	border-bottom: 1px solid #eeebe5;
}
@media screen and (max-width: 767px) {
.price-hed {
    padding-bottom: 20px;
    margin-bottom: 20px;
}
}
.price-hed::before {
	position: absolute;
	left: 5px;
	bottom: 25px;
	flex: 0 0 auto;
	content: "";
	display: block;
	width: 50px;
	height: 55px;
	background-image: url("../../images/price/plan-i.svg");
	background-repeat: no-repeat;
	background-size: contain;
}
.price-hed .show_sp {
	margin-right: 20px;
}
@media screen and (max-width: 767px) {
.price-hed {
	font-size: 1.4rem;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.price-hed::before {
	bottom: 25px;
}
}

.price-drec {
	font-size: 1rem;
	line-height: 2.6;
	display: block;
	position: relative;
	padding: 25px 0;
	border-bottom: 1px solid #eeebe5;
}
.price-drec span.drec-hed {
	margin-right: 10px;
	font-weight: 600;
	padding: 10px 20px;
	background-color: #eeebe5;
	border-radius: 10px;
}
@media screen and (max-width: 767px) {
.price-drec {
	font-size: 0.9rem;
	line-height: 2.2;
	padding: 0 0 25px;
	border-bottom: none;
}
.price-drec span.drec-hed {
	margin-bottom: 10px;
}
.price-drec span.drec-cloum{
	padding: 0 5px;
}
 .price-drec span {
	 display: block;
}
}

/*　お問合せフォーム
----------------------------*/
.contact-wrap {
	width: 1190px;
	margin: 100px auto 120px;
}
@media screen and (max-width:1190px) {
.contact-wrap {
	width: 100%;
	margin: 60px auto 100px;
	padding: 0 20px;
}
}
@media screen and (max-width:767px) {
.contact-wrap {
	margin: 30px auto 80px;
}
}
form.mail-form {
	width : 960px;
	margin : 0 auto;
	font-size: 1rem;

}
@media screen and (max-width: 960px){
form.mail-form {
	width : 100%;
}	
}
form.mail-form dl{
	width : 100%;
	display: flex;
  	flex-wrap: wrap;
	align-items : flex-start;
}
form.mail-form dl dt{
	width : 40%;
	padding : 40px 20px 30px 0;
	text-align : left;
	font-weight: 600;
	border-top : 1px solid #c9c4bc;
}
form.mail-form dl dd{
	width : 60%;
	padding : 40px 0 30px 0;
	text-align : left;
	border-top : 1px solid #c9c4bc;
}
@media screen and (max-width: 767px){
form.mail-form dl{
	flex-direction : column;
	border-bottom : none;
}
form.mail-form dl dt{
	width : 100%;
	padding : 20px 20px 10px 0;
	border-top : none;
}
form.mail-form dl dd{
	width : 100%;
	padding : 0;
	border-top : none;
}
}


form.mail-form input, form.mail-form select{
	height : 3em;
	padding : 3px 2%;
	border-radius : 0;
	background : #eeebe5;
	border : 1px solid #c9c4bc;
}
form.mail-form dd input[type="tel"],
form.mail-form dd input[type="email"]{
	font-size: 1rem;
}
form.mail-form input:focus,
form.mail-form textarea:focus{
	border : 1px solid #c9c4bc;
    outline: 1px solid #c9c4bc;
	background : #fff;
}
/* 郵便番号
-----------------------------------*/
form.mail-form dd .post-number {
	font-size: 0.9rem;
	padding-left: 10px;
}
@media screen and (max-width: 767px) {
form.mail-form dd input[type="text"],
form.mail-form dd input[type="tel"],
form.mail-form dd input[type="email"]{
	width : 100%;	
}
form.mail-form input#name_1,
form.mail-form input#name_2,
form.mail-form input#kana_1,
form.mail-form input#kana_2 {
	width : 49%;
}
form.mail-form dd #address_1 {
	width : 100%;
}
form.mail-form .select-wrap:before {
	left: 90%;
	position: absolute;
	top: 10%;
	line-height: 30px;
}
form.mail-form select{
	width : 100%;
}
}

/* 入力エリア設定・幅
-----------------------------------*/
form.mail-form dd input[type="text"] {
	width : 49%;
	padding: 3px 0;
	font-size: inherit;
}
form.mail-form dd input[type="email"],
form.mail-form dd input[type="tel"] {
	width : 40%;
}
form.mail-form dd #company{
	width : 50%;
}
@media screen and (max-width: 767px) {
form.mail-form dd input[type="email"],
form.mail-form dd input[type="tel"] ,

form.mail-form dd #address_1, form.mail-form dd #company{
	width : 100%;
}		
}
form.mail-form dd textarea {
	width : 100%;
	height : 200px;
	padding : 5px 2%;
	resize : vertical;
	border : 1px solid #c9c4bc;
	border-radius : 0;
	font-size: inherit;
	background-color: #eeebe5;
}
.form-privacy-text {
	font-weight: 600;
}

/* 入力エラー設定
-----------------------------------*/
form.mail-form dd input[type="text"].inp_error,
form.mail-form dd input[type="email"].inp_error,
form.mail-form dd input[type="tel"].inp_error,
form.mail-form dd select.inp_error,
form.mail-form dd textarea.inp_error {
	border: 1px solid #A41022;
	background: #F4D4D4;
}
span.error_m {
	font-size: 0.9rem;
	font-weight: normal;
	color: #A41022;
	display: block;
	margin: 0;
	padding-top: 5px;
}
/* 注意書き
-----------------------------------*/
form.mail-form span.ex {
	font-weight: 600;
	display: block;
	margin-top: 5px;
	font-size: 0.9rem;
}
/* 個人情報チェック
-----------------------------------*/
.checkbox-field {
	display: block;
	text-align: center;
}
/* プライバシー注意書き
-----------------------------------*/
p.agree {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 2;
	text-align: center;
	margin: 60px 0;
}

/* 必須項目
-----------------------------------*/
form.mail-form i.need {
	background: #CE8A00;
	padding: 2px 5px;
	margin-right: 10px;
	font-size: 0.6rem;
	color: #FFF;
	font-style: normal;
}
/* セレクトメニュー編集
-----------------------------------*/
form.mail-form .select-wrap {
	position:relative;
}
form.mail-form select#adoptionway, form.mail-form select#gender {
	appearance : none;
}
form.mail-form .select-wrap select {
	outline:none;
	text-overflow: '';
	vertical-align: middle;
	font-size: inherit;
	color: inherit;
	appearance: none;
	width: 50%;
}

form.mail-form select option{
  background-color: #fff;
}
@media screen and (max-width: 767px) {
form.mail-form select, form.mail-form .select-wrap select {
	width: 100%;
}
}

/* 送信/戻るボタン
-----------------------------------*/
form.mail-form .btn01 {
	width: 320px;
	margin : 20px auto 0;
	text-align: center;
	cursor : pointer;
	border: none;
	justify-content : space-between;
	align-items : center;
}
.form-bt-area {
	width: 740px;
	margin: 60px auto 0;
	display: flex;
	align-items : center;
}
.form-bt-area .btn01 .bt-txt {
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
.form-bt-area {
	width: 100%;
	flex-direction : column;
}		
}
@media (hover: hover) {
button:hover .arrow01:after {
	width : 100%;
	height : 100%;
}
}
@media (hover: none) {
button .arrow01:after {
	width : 100%;
	height : 100%;
}
}
button .arrow01 .icon svg, button .arrow01 .icon img {
	position : relative;
	opacity : 0;
	z-index : 100;
}
@media (hover: hover) {
button:hover .arrow01 .icon svg, button:hover .arrow01 .icon img {
	opacity : 1;
}
}
@media (hover: none) {
button .arrow01 .icon svg, button .arrow01 .icon img {
	opacity : 1;
}
}
/* 確認ページ
--------------------------*/
.review-inner {
    padding-left : 100px;
    border-left : 1px solid #c9c4bc;
	text-align: left;
}
@media screen and (max-width: 767px) {
.review-inner {
    padding-left : 0;
    border-left : none;
}
form.mail-form dl dd .review-inner{
	padding : 20px;
	background : #eeebe5;
}
}

/* 送信完了ページ
--------------------------*/
.complete > p.note {
	width: 1190px;
	margin: 0 auto;
	padding: 60px 0 120px;
	font-size: 1rem;
	line-height: 2;
	text-align: left;
}
@media screen and (max-width:1190px) {
.complete > p.note {
	width : 100%;
	padding: 30px 20px 100px;
}
}
@media screen and (max-width: 767px) {
.complete > p.note {
	padding: 40px 20px 60px;
}
}

/*　個人情報
--------------------*/
.privacy {
	width: 1190px;
	margin: 0 auto;
	padding: 80px 40px 100px;
}
@media screen and (max-width: 1190px) {
.privacy {
	width : 100%;
	padding: 40px 20px 60px;
}		
}
@media screen and (max-width: 767px) {
.privacy {
	padding: 60px 20px 40px;
}		
}
.privacy h3 {
	font-size : 1rem;
	font-weight: 600;
	line-height : 2rem;

}
@media screen and (max-width: 767px) {
.privacy h3 {
	font-size : 1rem;
	line-height : 1.8rem;
}
}
.privacy .text {
	margin-bottom: 30px;
}

/*　404.403エラー
--------------------*/
.notfound {
	margin: 200px auto;
	width : 780px;
	padding: 0 40px;
}
@media screen and (max-width: 780px) {
.notfound {
	width : 100%;
	padding: 0 20px;
}		
}
@media screen and (max-width: 680px) {
.notfound {
	margin: 160px auto 80px;
}		
}
.notfound p {
	font-family : 'Montserrat', sans-serif;
	font-weight : 400;
	letter-spacing : 0.1em;
	font-size: 3rem;
}
@media screen and (max-width: 680px) {
.notfound p {
	font-size: 2rem;
}		
}
.notfound p span {
	font-family : YakuHanJP, "Noto Sans JP", sans-serif;
	font-size : 0.9rem;
	line-height : 1;	
	letter-spacing : 0.08em;	
}
.notfound .btn01 {
	margin-top: 60px;
}
@media screen and (max-width: 780px) {
.notfound .btn01 {
	margin-top: 30px;
}	
}