.-x-richtext ul, .-x-richtext ol {
	list-style-position: inside;
}
[data-legal]{
	position:relative;
	--legal-offset-h:attr(data-legal-offset-h px);
	--legal-offset-v:attr(data-legal-offset-v px);
}
[data-legal][data-legal-safe="1"]::after{
	position: absolute;
	opacity: 0.5;
	color: black;
	content: "墨";
	font-size: 16px;
	display: block;
	height: 24px;
	padding-top: 0px;
	background-image: url(/_lib/lc.png);
	background-size: auto 20px;
	background-repeat: no-repeat;
	padding-left: 50px;
	background-position: left top;
}
[data-legal][data-legal-safe="1"]:hover::after {
    position: absolute;
    opacity: 0.5;
    color: black;
    content: attr(data-legal-check-at);
    white-space:nowrap;
    font-size: 11px;
    display: block;
    height: 24px;
    background-image: url(/_lib/lc.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-left: 0px;
    background-position: left top;
}

[data-legal-position="left-top"]::after{
	left:var(--legal-offset-h);
	top:var(--legal-offset-v);
}
[data-legal-position="left-bottom"]::after{
	left:var(--legal-offset-h);
	bottom:var(--legal-offset-v);
}
[data-legal-position="right-top"]::after{
	right:var(--legal-offset-h);
	top:var(--legal-offset-v);
}
[data-legal-position="right-bottom"]::after{
	right:var(--legal-offset-h);
	bottom:var(--legal-offset-v);
}
/*common_css*/
@charset "utf-8";
/* CSS Document */
/* -------------------------------------
Browser：Edge over
-------------------------------------
01: リセットの追加
02: 変数
03: ベース
-------------------------------------*/

/** ================================================================================
01.リセットの追加
================================================================================ **/
h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	clear: none;
}
/*
mark{
	color: inherit;
}
*/
*{
	color: inherit;
	font-weight: inherit;
	font-style: normal;
}
b,strong{
	font-weight: inherit;
}


/** ================================================================================
02.変数
================================================================================ **/
:root {
	--def-bg-color:#fff;
	--base-width:980px;
	--ovf-half:calc((100vw - var(--base-width)) / 2);
	--ovf-half-mns:min(calc((100vw - var(--base-width)) / -2), -5vw);
	--color:#284669;
	--color_l:#8294a8;
	--main-color:#0083cf;
	--main-color_l:#8cc7e9;
	--main-color_ll:#dceef9;
	--bg-lc:#f1fafe;
	--gray:#787878;
	--ylw:#fde668;
	--webf:'Josefin Sans', sans-serif;
	--fw-b:700;
	--opacity:.8;
	--transition: .3s all;
	--border:1px solid var(--color);
	--radius:50px;
	--radius_s:20px;
	--shadow-color:#aaa;
	--shadow:0 0 6px #81a8c9;
	--hr:2px solid var(--bg-gray);

	/* --header-height:80px; */
}

@media screen and (max-width: 980px) {
	:root{
		--ovf-half:calc((100% - var(--base-width)) / -2);
		--ovf-half-mns:calc((100% - var(--base-width)) / 2);
	}
}

@media screen and (max-width: 520px) {
	:root{
		--ovf-half:6vw;
		--ovf-half-mns:-6vw;
		--radius:26px;
		--radius_s:20px;
	}
}

/** ================================================================================
03.ベース
================================================================================ **/
html{
	overflow: auto;
}
body{
	min-width: var(--base-width);
	margin: 0 auto;
	background: var(--def-bg-color);
	color: var(--color);
	font-size:16px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	line-height: 1.8;
	overflow: hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media screen and (max-width: 520px) {
	body{
		min-width: 100%;
	}
}


/* -------------------------------------
セクション
-------------------------------------*/
body main{
	padding-top: 132px;
	position: relative;
}
body section,
body aside{
	/* padding: 1px 0; */
	position: relative;
	/* background: #fff; */
}
body section>*,
body aside>*{
	position: relative;
}
.sec-in{
	padding-left: max(calc((100vw - var(--base-width)) / 2), 5vw);
	padding-right: max(calc((100vw - var(--base-width)) / 2), 5vw);
}
@media screen and (max-width: 979px) {
	body main{
		padding-top: 70px;
	}
	.sec-in{
		padding-left: 6vw;
		padding-right: 6vw;
	}
}
@media screen and (max-width: 520px) {
	.sec-in{
	}
}


/* -------------------------------------
レイアウト
-------------------------------------*/
.w1500{
	margin-left: calc( ( 100vw - 100% ) / -2 );
	margin-right: calc( ( 100vw - 100% ) / -2 );
}
.block{
	display: block;
}
.flx{
	display: flex;
}
.relative{
	position: relative;
}
.max100{
	max-width: 100%;
}

@media screen and (min-width: 1501px) {
	.w1500{
		width: 1500px;
		margin-left: -260px;
		margin-right: -260px;
	}
}

@media screen and (max-width: 980px) {
	.w1500{
		margin-left: calc( (980px - 100% ) / -2 );
		margin-right: calc( (980px - 100% ) / -2 );
	}
}

@media screen and (max-width: 520px) {
	.w1500{
		margin-left: 0;
		margin-right: 0;
	}
}


/* -------------------------------------
ベーススタイル設定
2.font
3.float
4.align
5.margin
6.padding
-------------------------------------*/
/*2. font 必要なら追加　優先順位：高*/
body .fw-b {
	font-weight: var(--fw-b);
}
body .fz12{
	font-size: 0.75rem;
}
body .fz14{
	font-size: 0.87rem;
}
body .fz15{
	font-size: 0.94rem;
}
body .fz16{
	font-size: 16px;
}
body .fz17{
	font-size: 17px;
}
body .fz18{
	font-size: 18px;
}
body .fz20{
	font-size: 20px;
}
body .fz22{
	font-size: 22px;
}
body .fz24{
	font-size: 24px;
}
body .fz26{
	font-size: 26px;
}
body .fz28{
	font-size: 28px;
}
body .fz30{
	font-size: 30px;
}
body .fz32{
	font-size: 32px;
}
body .fz35{
	font-size: 35px;
}
body .fz40{
	font-size: 40px;
}
body .fz44{
	font-size: 44px;
}
body .fz46{
	font-size: 46px;
}
body .fz54{
	font-size: 54px;
}
body .fz50{
	font-size: 50px;
}
body .fz60{
	font-size: 60px;
}
body .fz70{
	font-size: 70px;
}

@media screen and (max-width: 520px) {
	body .fz16{
		font-size: 15px;
	}
	body .fz17{
		font-size: 15px;
	}
	body .fz18{
		font-size: 16px;
	}
	body .fz20{
		font-size: 16px;
	}
	body .fz22{
		font-size: 16px;
	}
	body .fz24{
		font-size: 18px;
	}
	body .fz26{
		font-size: min(5vw, 22px);
	}
	body .fz28{
		font-size: min(5vw, 24px);
	}
	body .fz30{
		font-size: min(5vw, 26px);
	}
	body .fz32{
		font-size: min(5.6vw, 28px);
	}
	body .fz35{
		font-size: min(6.4vw, 30px);
	}
	body .fz40{
		font-size: min(6.4vw, 36px);
	}
	body .fz44{
		font-size: min(6.4vw, 36px);
	}
	body .fz46{
		font-size: min(6.4vw, 40px);
	}
	body .fz50{
		font-size: min(6.4vw, 42px);
	}
	body .fz54{
		font-size: min(6.4vw, 42px);
	}
	body .fz60{
		font-size: min(8vw, 40px);
	}
	body .fz70{
		font-size: min(8vw, 48px);
	}
}

/*4. align 優先順位：高 */
body .t_R {
	text-align: right;
}
body .t_L {
	text-align: left;
}
body .t_C {
	text-align: center;
}
body .jc_c{
	justify-content: center;
}
body .jc_fe{
	justify-content: flex-end;
}
body .jc_fs{
	justify-content: flex-start;
}
body .jc_sb{
	justify-content: space-between;
}
body .ai_c{
	align-items: center;
}
body .ai_fe{
	align-items: flex-end;
}
body .ai_fs{
	align-items: flex-start;
}


/*5. margin 必要なら追加　優先順位：高 */
/*5. margin 30以上は1/2 */
body .m0 {
	margin: 0;
}
body .mb0{
	margin-bottom: 0;
}
body .mb5 {
	margin-bottom: 5px;
}
body .mb10 {
	margin-bottom: 10px;
}
body .mb15 {
	margin-bottom: 15px;
}
body .mb20 {
	margin-bottom: 20px;
}
body .mb30 {
	margin-bottom: 30px;
}
body .mb40 {
	margin-bottom: 40px;
}
body .mb50 {
	margin-bottom: 50px;
}
body .mb70 {
	margin-bottom: 70px;
}
body .mb80 {
	margin-bottom: 80px;
}
body .mb100 {
	margin-bottom: 100px;
}
body .mb150 {
	margin-bottom: 150px;
}
body .mb200 {
	margin-bottom: 200px;
}
body .mb250 {
	margin-bottom: 250px;
}
body .mt0{
	margin-top: 0px;
}
body .mt5 {
	margin-top:5px;
}
body .mt10 {
	margin-top:10px;
}
body .mt15 {
	margin-top:15px;
}
body .mt20 {
	margin-top:20px;
}
body .mt30 {
	margin-top:30px;
}
body .mt40 {
	margin-top:40px;
}
body .mt50 {
	margin-top:50px;
}
body .mt70 {
	margin-top:70px;
}
body .mt80 {
	margin-top:80px;
}
body .mt100 {
	margin-top:100px;
}
body .mt150 {
	margin-top:150px;
}
body .mt200 {
	margin-top:200px;
}
body .mt250 {
	margin-top:250px;
}
body .ml0{
	margin-left: 0;
}
body .ml5 {
	margin-left: 5px;
}
body .ml10 {
	margin-left: 10px;
}
body .ml15 {
	margin-left: 15px;
}
body .ml20 {
	margin-left: 20px;
}
body .ml30 {
	margin-left: 30px;
}
body .mr0{
	margin-right: 0;
}
body .mr5 {
	margin-right: 5px;
}
body .mr10 {
	margin-right: 10px;
}
body .mr15 {
	margin-right: 15px;
}
body .mr20 {
	margin-right: 20px;
}
body .mr30 {
	margin-right: 30px;
}

@media screen and (max-width: 520px) {
	/*5. margin 30以上は1/2 */
    body .mb20 {
        margin-bottom: 15px;
    }
    body .mb30 {
        margin-bottom: 20px;
    }
	body .mb40 {
		margin-bottom: 20px;
	}
	body .mb50 {
		margin-bottom: 30px;
	}
	body .mb70 {
		margin-bottom: 50px;
	}
	body .mb80 {
		margin-bottom: 60px;
	}
	body .mb100 {
		margin-bottom: 80px;
	}
	body .mb150 {
		margin-bottom: 100px;
	}
	body .mb200 {
		margin-bottom: 140px;
	}
	body .mb250 {
		margin-bottom: 170px;
	}
    body .mt20 {
        margin-top:15px;
    }
    body .mt30 {
        margin-top:20px;
    }
	body .mt40 {
		margin-top:20px;
	}
	body .mt50 {
		margin-top:30px;
	}
	body .mt70 {
		margin-top:50px;
	}
	body .mt80 {
		margin-top:60px;
	}
	body .mt100 {
		margin-top:80px;
	}
	body .mt150 {
		margin-top:100px;
	}
	body .mt200 {
		margin-top:140px;
	}
	body .mt250 {
		margin-top:170px;
	}
}

/*6. padding 優先順位:高*/
body .p0 {
	padding: 0;
}
body .pb0{
	padding-bottom: 0;
}
body .pb5 {
	padding-bottom: 5px;
}
body .pb10 {
	padding-bottom: 10px;
}
body .pb15 {
	padding-bottom: 15px;
}
body .pb20 {
	padding-bottom: 20px;
}
body .pb30 {
	padding-bottom: 30px;
}
body .pb40 {
	padding-bottom: 40px;
}
body .pb50 {
	padding-bottom: 50px;
}
body .pb70 {
	padding-bottom: 70px;
}
body .pb80 {
	padding-bottom: 80px;
}
body .pb100 {
	padding-bottom: 100px;
}
body .pb150 {
	padding-bottom: 150px;
}
body .pb200 {
	padding-bottom: 200px;
}
body .pb250 {
	padding-bottom: 250px;
}
body .pt0{
	padding-top: 0px;
}
body .pt5 {
	padding-top:5px;
}
body .pt10 {
	padding-top:10px;
}
body .pt15 {
	padding-top:15px;
}
body .pt20 {
	padding-top:20px;
}
body .pt30 {
	padding-top:30px;
}
body .pt40 {
	padding-top:40px;
}
body .pt50 {
	padding-top:50px;
}
body .pt70 {
	padding-top:70px;
}
body .pt80 {
	padding-top:80px;
}
body .pt100 {
	padding-top:100px;
}
body .pt150 {
	padding-top:150px;
}
body .pt200 {
	padding-top:200px;
}
body .pt250 {
	padding-top:250px;
}
body .pl0{
	padding-left: 0;
}
body .pl5 {
	padding-left: 5px;
}
body .pl10 {
	padding-left: 10px;
}
body .pl15 {
	padding-left: 15px;
}
body .pl20 {
	padding-left: 20px;
}
body .pl30 {
	padding-left: 30px;
}
body .pr0{
	padding-right: 0;
}
body .pr5 {
	padding-right: 5px;
}
body .pr10 {
	padding-right: 10px;
}
body .pr15 {
	padding-right: 15px;
}
body .pr20 {
	padding-right: 20px;
}
body .pr30 {
	padding-right: 30px;
}

@media screen and (max-width: 520px) {
    body .pb20 {
        padding-bottom: 15px;
    }
    body .pb30 {
        padding-bottom: 20px;
    }
	body .pb40 {
		padding-bottom: 20px;
	}
	body .pb50 {
		padding-bottom: 30px;
	}
	body .pb70 {
		padding-bottom: 50px;
	}
	body .pb80 {
		padding-bottom: 60px;
	}
	body .pb100 {
		padding-bottom: 80px;
	}
	body .pb150 {
		padding-bottom: 100px;
	}
	body .pb200 {
		padding-bottom: 140px;
	}
	body .pb250 {
		padding-bottom: 170px;
	}
	body .pt20 {
		padding-top:15px;
	}
	body .pt30 {
		padding-top:20px;
	}
	body .pt40 {
		padding-top:20px;
	}
	body .pt50 {
		padding-top:30px;
	}
	body .pt70 {
		padding-top:50px;
	}
	body .pt80 {
		padding-top:60px;
	}
	body .pt100 {
		padding-top:80px;
	}
	body .pt150 {
		padding-top:100px;
	}
	body .pt200 {
		padding-top:140px;
	}
	body .pt250 {
		padding-top:170px
	}
}


/* -------------------------------------
幅
-------------------------------------*/
body .w100p,
body .w1100,
body .w1000,
body .w980,
body .w900,
body .w850,
body .w800,
body .w700,
body .w650,
body .w600{
	width: 100%;
	margin-right: auto;
	margin-left : auto;
}
body .w100p{
	width: 100%;
}
body .w1100{
	max-width: 1100px;
}
body .w1000{
	max-width: 1000px;
}
body .w980{
	max-width: var(--base-width);
}
body .w900{
	max-width: 900px;
}
body .w850{
	max-width: 850px;
}
body .w800{
	max-width: 800px;
}
body .w700{
	max-width: 700px;
}
body .w650{
	max-width: 650px;
}
body .w600{
	max-width: 600px;
}

@media screen and (max-width: 520px) {
	body .sp-w90{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	body .sp-w80{
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	body .sp-w70{
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	body .sp-w60{
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}
	body .sp-w50{
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}
}

body .calc-bw{
	padding-right: max(calc( ( 100% - var(--base-width) ) / 2 ), 2%);
	padding-left: max(calc( ( 100% - var(--base-width) ) / 2 ), 2%);
}

@media screen and (max-width: 520px){
	body .calc-bw > *{
		width: 90%;
		margin-right: auto;
		margin-left: auto;
	}
	body .calc-bw > .max{
		width: 100%;
	}
}


/* -------------------------------------
横並びボックスの数
-------------------------------------*/
/**２つ並び**/
.box2C{
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
}
.box2C > *,
.box2C > .h-text-img{
	width: 47%;
	margin-left: 0;
	margin-right: 0;
}
.box2C::after{
	display: block;
	width: 47%;
	content: "";
}

.box2C.w50p > *,
.box2C.w50p::after{
	width: 49%;
}

/**3つ並び**/
.box3C{
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
}
.box3C > *,
.box3C > .h-text-img{
	width: 32%;
	margin-left: 0;
	margin-right: 0;
}
.box3C:after{
	display: block;
	width: 32%;
	content: "";
}

/**4つ並び**/
.box4C{
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: wrap;
}
.box4C > *,
.box4C > .h-text-img{
	width: 24.5%;
	margin-left: 0;
	margin-right: 0;
}
.box4C:after,
.box4C:before{
	display: block;
	width: 24.5%;
	content: "";
}
.box4C:before{
	order:1;
}

@media screen and (max-width: 520px) {
/* -------------------------------------
横並びボックスの数
-------------------------------------*/
	.sp1c{
	flex-flow: column !important;
	}
	.sp1c>*,
	.sp1c::after{
	width: 100% !important;
	margin-left: auto;
	margin-right: auto;
	}
	.sp2c>*,
	.sp2c::after{
	width: 47% !important;
	}
	.sp2c.w50p>*,
	.sp2c.w50p::after{
	width: 49% !important;
	}
}


/* -------------------------------------
配置･･･画像の位置が基準
-------------------------------------*/
.h-text-img{
	--hti-margin-LR:clamp(20px, 4vw, 60px);
	--hti-margin-TB:clamp(20px, 2vw, 30px);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left:auto;
	margin-right: auto;
	width: 100%;
}

/*配置*/
.h-text-img.right{
	flex-flow: row;
}
.h-text-img.left{
	flex-flow: row-reverse;
}
.h-text-img.center_t{
	flex-flow: column-reverse;
}
.h-text-img.center_b{
	flex-flow: column;
}

/*画像*/
.h-text-img figure{
	flex:none;
}
.h-text-img.right figure{
	margin-left: var(--hti-margin-LR);
}
.h-text-img.left figure{
	margin-right: var(--hti-margin-LR);
}
.h-text-img.center_t figure{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--hti-margin-TB);
}
.h-text-img.center_b figure{
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--hti-margin-TB);
}
.h-text-img figure.w50p{
	width: 50%;
}
.h-text-img figure.w40p{
	width: 40%;
}
.h-text-img figure.w30p{
	width: 30%;
}

/*テキスト領域*/
.h-text-img .text{
	flex:1;
}
.pdf{
	width: 100%;
	margin:30px auto;
	text-align: center;
}

@media screen and (max-width: 520px) {
	/*配置*/
	.h-text-img.right,
	.h-text-img.left{
		flex-flow: column-reverse;
		align-items: center;
	}

	/*画像*/
	.h-text-img.right figure,
	.h-text-img.left figure{
		margin:0 auto 20px;
	}
	.h-text-img figure.w50p,
	.h-text-img figure.w40p,
	.h-text-img figure.w30p{
		width: 100%;
	}
	.h-text-img figure.w50p.sp-w90,
	.h-text-img figure.w40p.sp-w90,
	.h-text-img figure.w30p.sp-w90{
		width: 90%;
	}
	.h-text-img figure.w50p.sp-w80,
	.h-text-img figure.w40p.sp-w80,
	.h-text-img figure.w30p.sp-w70{
		width: 80%;
	}
	.h-text-img figure.w50p.sp-w70,
	.h-text-img figure.w40p.sp-w70,
	.h-text-img figure.w30p.sp-w70{
		width: 70%;
	}
	.h-text-img figure.w50p.sp-w60,
	.h-text-img figure.w40p.sp-w60,
	.h-text-img figure.w30p.sp-w60{
		width: 60%;
	}
	.h-text-img figure.w50p.sp-w50,
	.h-text-img figure.w40p.sp-w50,
	.h-text-img figure.w30p.sp-w50{
		width: 50%;
	}

	/*テキスト領域*/
	.h-text-img .text{
		width: 100%;
	}
}


/* -------------------------------------
リンク
-------------------------------------*/
a{
	color:inherit;
	text-decoration:none;
	cursor: pointer;
	transition: .3s;
}
.richtext p a:not[href^="tel:"]{
	text-decoration:underline;
}.richtext p a:hover{
	text-decoration:none;
}

/**PC電話ボタン無効**/
a[href^="tel"]{
	pointer-events: none;
}
@media screen and (max-width: 520px) {
	a[href^="tel"]{
		pointer-events: auto;
	}
}


/* -------------------------------------
改行
-------------------------------------*/
.sp{
	display:none;
}
.ib{
	display: inline-block;
}

@media screen and (max-width: 520px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	.sp-ib{
		display: inline-block;
	}
}

/* -------------------------------------
画像
-------------------------------------*/
img{
	vertical-align: top;
}
figure{
	overflow: hidden;
}
figure img,
i img{
	max-width: 100%;
}

/**角丸：画像に直接かけれる**/
.radius{
	border-radius: var(--radius);
}


/**hover：透過**/
a:hover img.hv{
	opacity: var(--opacity);
}

/**hover：拡大**/
.scale {
	overflow: hidden;
}
.scale img {
	transition: transform 0.3s linear;
}
a:hover .scale img {
	transform: scale(1.1);
}

/* objedt-fit*/
.ojf img {
	width: 100%; /*サイズ指定必須*/
	height: 100%; /*サイズ指定必須*/
	object-fit: cover;
}


/* -------------------------------------
文字
-------------------------------------*/
h1,h2,h3,h4,h5{
	line-height: 1.4;
}
.webf{
	font-family: var(--webf);
	font-weight: 600;
}
.lh1{
	line-height: 1.0;
}
.lh13{
	line-height: 1.3;
}
.lh15{
	line-height: 1.5;
}
.lh2{
	line-height: 2.0;
}

.richtext p strong{
	font-weight: var(--fw-b);
	color: var(--main-color);
}
.richtext p em{
	display: block;
	margin-top: 0.4em;
	font-size: 0.8em;
	font-weight: var(--fw-b);
	font-style: normal;
}


@media screen and (max-width: 520px) {
	lh2{
		line-height: 1.7;
	}
}

/**黄色マーカー**/
mark{
	background: linear-gradient(transparent 70%, #ffff77 0%);
}

/*縁くくり*/
.edge{
	--edge-color:#fff;
	text-shadow:
	1px 1px 0 var(--edge-color),
	-1px 1px 0 var(--edge-color),
	1px -1px 0 var(--edge-color),
	-1px -1px 0 var(--edge-color);
}
/*縁 2px以上*/
.edge2{
	--edge2-color:#ff0;
	text-shadow:
	2px  2px 1px var(--edge2-color),
	-2px  2px 1px var(--edge2-color),
	2px -2px 1px var(--edge2-color),
	-2px -2px 1px var(--edge2-color),
	2px  0px 1px var(--edge2-color),
	0px  2px 1px var(--edge2-color),
	-2px  0px 1px var(--edge2-color),
	0px -2px 1px var(--edge2-color);
}


/**-------------------------------------
地図 動画 iframe
-------------------------------------**/
iframe{
	width: 100%;
}
.youtube{
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe{
	width: 100%;
	height: 100%;
}


/* -------------------------------------
gmap
-------------------------------------*/
/**地図**/
.gmap iframe{
	height: 380px;
}
@media screen and (max-width: 480px) {
	.gmap iframe{
		height: 45vh;
	}
}

/* -------------------------------------
table
-------------------------------------*/
table{
	line-height: 1.5;
}

/* -------------------------------------
フォーム table･･･スマホで th＝w:100%;
-------------------------------------*/
.table-form table,
table.table-form{
	width: 100%;
	margin: 30px auto;
	--table-form-border: 1px solid var(--gray);
}
.table-form tr{
	display: block;
}
.table-form th,
.table-form td{
	display: block;
	width: 100%;
	padding: 0 0 10px;
	vertical-align: top;
	text-align: left;
}
.table-form td{
	padding-bottom: 30px;
}

@media screen and (max-width: 520px) {
}

/* -------------------------------------
tableA･･･スマホもth＝w:25%
-------------------------------------*/
.tableA table,
table.tableA{
	--tableA-border: 1px dotted var(--gray);
	width: 100%;
	border-top: var(--tableA-border);
}
.tableA tr{
	border-bottom: var(--tableA-border);
}
.tableA th,
.tableA td{
	padding:28px 10px;
	vertical-align: top;
	text-align: left;
}
.tableA th{
	width: 25%;
	color: var(--main-color);
	font-weight: var(--fw-b);
}

@media screen and (max-width: 520px) {
	.tableA th,
	.tableA td{
		padding: 14px 10px;
	}
	.tableA th{
		width: 25%;
		min-width: 6em;
		font-size: 0.9em;
	}
}


/* -------------------------------------
tableB･･･スマホ th=w:100%
-------------------------------------*/
.tableB table,
table.tableB{
	--tableB-border: 1px dotted var(--gray);
	width: 100%;
	background: #fff;
	border-top: var(--tableB-border);
}
.tableB tr{
	border-bottom: var(--tableB-border);
}
.tableB th,
.tableB td{
	padding:24px 20px;
	vertical-align: middle;
	text-align: left;
}
.tableB th{
	width: 25%;
	color: #fff;
	background: var(--main-color);
}

@media screen and (max-width: 520px) {
	.tableB table,
	table.tableB{
		border-top: none;
	}
	.tableB tr{
		border-bottom: none;
	}
	.tableB th,
	.tableB td{
		display: block;
		width: 100%;
		font-size: 15px;
	}
	.tableB th{
		padding: 14px 10px;
	}
	.tableB td{
		padding: 16px 14px 28px;
	}
}

/* -------------------------------------
tableC･･･スマホもth＝w:25% / てれこで背景カラー
-------------------------------------*/
.tableC table,
table.tableC{
	width: 100%;
	--radius:10px;
	--tableC-border: 1px dotted red;
	/* border-top: var(--tableC-border); */
}
.tableC tr{
	/* border-bottom: var(--tableC-border); */
}
.tableC tr:nth-of-type(odd){
	background: var(--main-color_ll);
}
.tableC tr:nth-of-type(even){
	background: #fff;
}
.tableC th,
.tableC td{
	padding: 28px 16px;
	vertical-align: top;
	text-align: left;
}
.tableC th{
	width: 25%;
	font-weight: var(--fw-b);
	border-radius: var(--radius) 0 0 var(--radius);
}
.tableC td{
	border-radius: 0 var(--radius) var(--radius) 0;
}

@media screen and (max-width: 520px) {
	.tableC th,
	.tableC td{
		padding: 8px 10px;
		font-size: 14px;
	}
	.tableC th{
		min-width: 6em;
		font-size: 0.9rem;
		font-size: 13px;
	}
}

/* -------------------------------------
tableD･･･th W:100%
-------------------------------------*/
.tableD table,
table.tableD{
	width: 100%;
}
.tableD th,
.tableD td{
	display: block;
	width: 100%;
}
.tableD th{
	margin-bottom: 10px;
	padding: 14px;
	font-size: 1.1rem;
	font-weight: var(--fw-b);
	text-align: left;
	background: yellow;
}
.tableD td{
	margin-bottom: 40px;
}

@media screen and (max-width: 520px) {
	.tableD th{
		margin-bottom: 4px;
		font-size: 0.9rem;
	}
	.tableD td{
		margin-bottom: 20px;
	}
}


/* -------------------------------------
背景
-------------------------------------*/
.bg-white{
	background: #fff;
}
.bg-mc{
	background: var(--main-color);
}
.bg-lc{
	background: var(--bg-lc);
}
.bg-gray{
	background: var(--bg-gray);
}

.bg-ptn{
	background: url(/common/images/bg-ptn.png);
}

/* bg-photo */
.bg-photo{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	background-image: url(/common/images/bg-contact.jpg);
}
.bg-photo::before{
	content: "";
	display: block;
	width:100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.5);
	mix-blend-mode:multiply;
}
.bg-photo>*{
	position: relative;
}
.bg-photo.no-bf::before{
	display: none;
}

/* -------------------------------------
色
-------------------------------------*/
body .white{
	color: #fff;
}
body .gray{
	color: var(--gray);
}
body .main-color{
	color: var(--main-color);
}
body .ylw{
	color: var(--ylw);
}


/* -------------------------------------
タイトル
-------------------------------------*/
/*ページタイトル*/
.titZ{
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	height: 150px;
	color: #fff;
	font-weight: var(--fw-b);
	text-align: center;
	line-height: 1.4;
	letter-spacing: 1px;
	background: var(--main-color);
}

@media screen and (max-width: 520px) {
	/*ページタイトル*/
	.titZ{
		height: 90px;
	}
}

/* tit */
.tit{
	font-weight: var(--fw-b);
}

/* titA */
.titA{
	display: flex;
	flex-flow: column;
	font-weight: var(--fw-b);
	text-align: center;
}
.titA span{
	font-family: var(--webf);
	color: var(--main-color_l);
	font-weight: normal;
	font-size: 1.5rem;
}
.titA.t_L{
	text-align-last: left;
}

/* titB */
.titB{
	width: fit-content;
	margin-right: auto;
	padding: 10px 1em;
	font-weight: var(--fw-b);
	text-align: center;
	border-top: 2px dotted var(--main-color);
	border-bottom: 2px dotted var(--main-color);
}
.titB em{
	color: var(--main-color);
}




@media screen and (max-width: 520px) {
	/* titA */
	.titA span{
		font-size: 1.2rem;
	}

}


/* -------------------------------------
btn
-------------------------------------*/
.btn{
	width: 460px;
	max-width: 80%;
	min-height: 76px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
    padding: 10px 2.2em 10px 1em;
	color: #fff;
	font-weight: var(--fw-b);
	text-align: center;
	line-height: 1.3;
	background: var(--main-color);
	border-radius: 40px;
	position: relative;
	transition: var(--transition);
}.btn:hover{
	background: var(--color);
}
.btn::after{
	content:"→";
	font-size: 1em;
	transition: var(--transition);
	position: absolute;
	right: 0.8em;
	top: 50%;
	transform: translate(0, -50%);
}.btn:hover::after{
	right: 0.5em;
}

@media screen and (max-width: 520px) {
	.btn{
		min-height: 60px;
	}
	.btn::after{
		font-size: 0.9em;
	}
}


/* btn-toi */
.btn-toi{
	width: 340px;
	height: 60px;
	display: flex;
	justify-content: center;
	color: var(--color);
	font-weight: var(--fw-b);
	align-items: center;
	text-align: center;
	line-height: 1.3;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 40px;
	transition: var(--transition);
}.btn-toi:hover{
	color: #fff;
	background: var(--main-color);
}
.btn-toi i{
	margin-right: 6px;
	font-size: 1.1em;
	transform: translateY(1px);
}


/* -------------------------------------
more
-------------------------------------*/
.more >*{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 0.9rem;
	color: var(--color);
	font-weight: var(--fw-b);
	line-height: 1.0;
}
.more >*::after{
	--size:50px;
	content:"→";
	display: grid;
	place-items: center;
	width: var(--size);
	height: var(--size);
	margin-left: 1em;
	color: #fff;
	background: var(--main-color);
	border-radius: 50%;
	transition: var(--transition);
}
.more >*:hover::after,
a:hover .more >*::after{
	color: #fff;
	background: var(--main-color_l);
}
.more span em{
	border-bottom: var(--border);
}.more:hover span em{
	border-bottom-color: transparent;
}

@media screen and (max-width: 520px) {
	.more >*::after{
		--size:40px;
	}
	.more >*{
		font-size: 0.8rem;
	}
}


/* -------------------------------------
ブロック
-------------------------------------*/
.content-box{
	padding: 50px;
	background: var(--main-color_ll);
	border-radius: var(--radius);
}

@media screen and (max-width: 520px) {
	.content-box{
		margin-left: -2%;
		margin-right: -2%;
		padding: 30px;
	}
}


/**-------------------------------------
lead
-------------------------------------**/
.lead {
	width: min(95%, 800px);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

@media screen and (max-width: 520px) {
	.lead {
		width: 90%;
	}
}


/**-------------------------------------
count  自動連番
-------------------------------------**/
.count li{
	counter-increment: num 1;
}
.count li::before{
	content: "0" counter(num) ".";
}


/**-------------------------------------
hr
-------------------------------------**/
.hr{
	border: var(--hr);
}

/*widget:bb9c0390-45da-4909-9110-cdc95d75b7c6*/
/*widget:1d6fad24-38ad-4257-9d84-00b70055389c*/
/*widget:e0c55e7b-5fee-4700-9fad-ca12ba6b4e55*/
/*widget:a8d6ed3c-ce1d-4d71-aa12-7fa9b43784de*/
/*widget:0ad7d7ca-a62d-4b8a-85ed-8477141280d1*/
/*widget:f86b085c-6778-4a88-92fa-d9a415d7f754*/
/*widget:bf5c1fab-50aa-4a98-851f-b514fbe6312e*/
/*widget:b323a7a0-c3fa-4f07-b6d3-93b78f8ed051*/
/*widget:5d8c031b-72ec-4797-b11e-c3954e87ae81*/
/*widget:254d5154-faa1-4a5e-bd4d-f0538ce5ad8f*/
/*instance:105*//*widget:349d55f0-44bc-47c1-a298-6beec6681e2c*/
/*widget:0b57ec4f-5ea2-4cdf-bf9c-bfa72bc8f5bf*/
/*widget:82c02fe0-50cb-4314-9cf4-2a2c35ae4f4e*/
/*instance:334*//*widget:571a5039-4994-4b84-8137-a4e779b2e6aa*/
/*widget:caa34da1-b569-4f0e-b81f-10745f1b2c6d*/
/*widget:d4b4347d-5e22-4197-bb01-9ea0d6bf9ba5*/
/*instance:167*//*widget:1e617158-77e1-4d72-82ab-70f80713da98*/
/*widget:e505dcdb-e321-4cd9-91df-b3be3fe0793e*/
/*instance:175*//*instance:186*//*widget:a85a76a0-ed95-4fff-b925-5a394b630b86*/
/*widget:434dbeb2-57dc-441b-bac8-19bae9aa1ec8*/
/*widget:ad763301-1ac1-4323-90c6-ae684617ee32*/
/*widget:896a78e4-42b8-4335-8b60-2dd2c5c8abcf*/
/*layout:1*/@charset "utf-8";
/* CSS Document */
/* -------------------------------------
Browser：Edge over
-------------------------------------
01: 共通
02: テンプレート
03: ヘッダー＆フッター
04: ページ
-------------------------------------*/

/** ==============================================
01.共通
============================================== **/
/* -------------------------------------
アニメーション
-------------------------------------*/
.fade {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 300ms ease, transform 800ms ease;
}
.fade {
	opacity: 0;
	transform: translateY(80px);
	transition: opacity 900ms ease, transform 700ms ease;
}
.fade.fade-in {
	opacity: 1;
	transform: translateY(0);
}
@media screen and (max-width: 520px) {
	.fade {
		transition: opacity 500ms ease, transform 500ms ease;
	}
}

/* -------------------------------------
tel
-------------------------------------*/
a[href^="tel:"]{
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--webf);
	font-weight: bold;
	line-height: 1.0;
}
a[href^="tel:"] i{
	margin: 0 6px 0 0;
	font-size: 0.8em;
}
a[href^="tel:"] i img{
	vertical-align: middle;
}
div[class^="deco"] img{
	max-width: 100%;
}

/* -------------------------------------
figEdgeL-content
figEdgeR-content
-------------------------------------*/
.figEdge-wrapper{
	display: flex;
	flex-flow: column;
	gap: 180px;
}
.figEdgeL-content,
.figEdgeR-content{
	display: flex;
	align-items: center;
	gap: 60px;
}
.figEdgeL-content figure,
.figEdgeR-content figure{
	width: 48%;
	border-radius: 0 var(--radius) var(--radius) 0;
}
.figEdgeL-content .text,
.figEdgeR-content .text{
	width: 480px;
}
/* 画像右 */
.figEdgeR-content{
	flex-flow: row-reverse;
}
.figEdgeR-content figure{
	border-radius: var(--radius) 0 0 var(--radius);
}

@media screen and (max-width: 979px) {
	.figEdge-wrapper{
		gap: 80px;
	}
	.figEdgeL-content,
	.figEdgeR-content{
		gap: 0;
	}
	.figEdgeL-content .text,
	.figEdgeR-content .text{
		width: 40%;
		margin-left: 5%;
		margin-right: 5%;
	}
}

@media screen and (max-width: 520px) {
	.figEdgeL-content,
	.figEdgeR-content{
		flex-flow: column;
		gap: 30px;
	}
	.figEdgeL-content figure,
	.figEdgeR-content figure{
		width: 95%;
		margin-left: -5%;
	}
	.figEdgeL-content .text,
	.figEdgeR-content .text{
		width: 88%;
	}

	/* 画像右 */
	.figEdgeR-content figure{
		margin: 0 0 0 5%;
	}
}

/* -------------------------------------
flx-content
-------------------------------------*/
.flx-content{
	display: flex;
	align-items: flex-start;
	gap: 80px;
}
.flx-content .flx-main{
	flex:1;
}

@media screen and (max-width: 520px) {
	.flx-content{
		flex-flow: column;
		gap: 30px;
	}
}


/* -------------------------------------
sv-tag
-------------------------------------*/
.sv-tag{
	width: fit-content;
	min-width: 8em;
	padding: 8px 0;
	color: #fff;
	font-weight: var(--fw-b);
	text-align: center;
	line-height: 1;
	background: var(--color);
}
.sv-tag[data-tag="不動産"]{
	background: var(--color_l);
}
@media screen and (max-width: 520px) {
	.sv-tag{
		font-size: 0.8em;
	}
}

/* -------------------------------------
hr
-------------------------------------*/
.hr{
	width: 100%;
	height: 1px;
	border-top: 2px solid var(--main-color_l);
}

/* -------------------------------------
time
-------------------------------------*/
time{
	font-size: 0.8em;
	color: var(--color_l);
}


/* -------------------------------------
スライド パーツ
-------------------------------------*/
.slide-parts {
	--slide-parts-height:40px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin:24px ;
}
.slide-parts .swiper-button-next,
.slide-parts .swiper-button-prev{
	width: var(--slide-parts-height);
	height: var(--slide-parts-height);
	margin: 0 0 0 10px;
	position: static;
	transition: var(--transition);
}
.slide-parts .swiper-button-next::after,
.slide-parts .swiper-button-prev::after{
	display: none;
}
.slide-parts .swiper-button-next::before,
.slide-parts .swiper-button-prev::before{
	content:"\e5e1";
	font-family:'Material Icons';
	display: grid;
	place-items: center;
	width: var(--slide-parts-height);
	height: var(--slide-parts-height);
	color: #3c3c3c;
	border-radius: 50%;
	border: 1px solid #3c3c3c;
}
.slide-parts .swiper-button-prev::before{
	transform: scale(-1, 1);
}
.slide-parts .swiper-button-next:hover::before,
.slide-parts .swiper-button-prev:hover::before{
	opacity: .6;
}
.slide-parts .swiper-pagination{
	width:auto;
	margin-right: 20px;
	font-size: 1.5rem;
	color: #9c9c9c;
	line-height: 1.0;
	position: static;
}
.slide-parts .swiper-pagination .swiper-pagination-current{
	color: var(--main-color);
}

@media screen and (max-width: 520px) {
	/* スライドパーツ */
	.slide-parts {
		--slide-parts-height:30px;
	}
	.slide-parts .swiper-pagination{
		font-size: 1.0rem;
	}
}


/* -------------------------------------
bdr
-------------------------------------*/
/* .bdr{
	border: 6px solid var(--orange);
}

@media screen and (max-width: 520px) {
	.bdr{
		border-width: 4px;
	}
} */


/* -------------------------------------
maru-bf
-------------------------------------*/
/* .maru-bf>*{
	margin: 0 1.5em 10px 1.2em;
	line-height: 1.5;
}
.maru-bf>*::before{
	content: "●";
	margin-right: 0.2em;
	margin-left: -1.2em;
}

.maru-bf>div p{
	display: inline;
} */

/* -------------------------------------
check-list
-------------------------------------*/
/* .check-list li{
	display: flex;
	align-items: flex-start;
	margin-bottom: 1em;
	font-size: 1.1em;
	font-weight: var(--fw-b);
}
.check-list li::before{
	content:"task_alt";
	font-family:'Material Icons';
	font-size: 1.8em;
	font-weight: normal;
	line-height: 1;
	color: var(--main-color);
	margin-right: 0.5em;
	flex-shrink: 0;
}
.check-list li span{
	color: var(--main-color);
}

@media screen and (max-width: 520px) {
	.check-list li{
		margin-bottom: 0.5em;
		font-size: 1.0em;
		border-bottom-width: 2px;
	}
	.check-list li::before{
		font-size: 1.4em;
		line-height: 1.7;
	}
} */


/** ==============================================
02.テンプレート
============================================== **/

/* -------------------------------------
news-list
-------------------------------------*/
.news-list{
	--gap:20px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
.news-list li{
	width: calc((100% - var(--gap)*2)/3);
}
.news-list li a{
	display: flex;
	flex-flow: column;
	gap: 8px;
}
.news-list li a figure{
	margin-bottom: 10px;
	border-radius: var(--radius_s);
	position: relative;
}

/* news-tag */
.news-tag{
	min-width: 7em;
	padding: 6px 0.5em;
	color: #fff;
	font-size: 0.8em;
	font-weight: var(--fw-b);
	text-align: center;
}
.news-tag[data-tag="お知らせ"]{
	background: var(--main-color);
}
.news-tag[data-tag="ブログ"]{
	background: var(--color);
}
.news-list li a .news-tag{
	border-top-left-radius: var(--radius_s);
	position: absolute;
	bottom: 0;
	right: 0;
}

@media screen and (max-width: 520px) {
	.news-list{
		--gap:30px;
		flex-flow: column;
		margin: 0 8%;
	}
	.news-list li{
		width: 100%;
		font-size: 0.9em;
	}
}


/**==============================================
03: ヘッダー
==============================================**/
header {
	width: 100%;
	z-index: 1000;
	position: fixed;
	transition: .3s all;
	background: #fff;
}
header .logo{
	width: 450px;
	margin: 10px 0 0 2vw;
	transition: var(--transition);
}
header .logo a {
	display: block;
	width: fit-content;
}
header .logo a img{
	max-width: 100%;
	width: 244px;
	height: auto;
	transition: var(--transition);
}
header nav {
	margin-top: 4px;
}
header nav .h-logo_sp{
	display: none;
}
header nav .menu1{
	width: 70vw;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: absolute;
	right: 2vw;
	top: 10px;
}
header nav .menu1 p {
	margin-right: 20px;
	color: var(--main-color);
}
header nav .menu1 p a{
	justify-content: flex-end;
	font-weight: var(--fw-b);
	margin-bottom: 2px;
}
header nav .menu1 p span{
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.5;
}
header nav .menu1 .h-btn-wrapper{
	display: flex;
	align-items: center;
	gap: 6px;
}
header nav .menu1 .h-btn-wrapper a{
	width: max(14vw,9em);
	padding: 16px 0;
	color: #fff;
	font-size: 1.1em;
	font-weight: var(--fw-b);
	text-align: center;
	line-height: 1.4;
	background: var(--main-color);
	border: 1px solid var(--main-color);
	border-radius: 60px;
	transition: var(--transition);
}header nav .menu1 .h-btn-wrapper a:hover{
	color: var(--main-color);
	background: #fff;
}
header nav .menu1 .h-btn-wrapper a i{
    margin-right: 6px;
    font-size: 1.1em;
	transform: translateY(1px);
}
header nav .menu1 .h-btn-wrapper a.h-rec{
	background: var(--color);
	border-color: var(--color);
}header nav .menu1 .h-btn-wrapper a.h-rec:hover{
	color: var(--color);
	background: #fff;
}

header nav ul.menu2{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap:10px;
}
header nav ul.menu2 li {
	position: relative;
	white-space: nowrap;
}
header nav ul.menu2 li a{
	flex: 1;
	display: block;
	padding: 12px 1.5em;
	font-weight: var(--fw-b);
	line-height: 1.0;
	text-align: center;
	transition: var(--transition);
}
header nav ul.menu2 li a:hover{
	color: var(--main-color);
}
header nav ul.menu2 li.has_child p {
	padding: 10px;
	font-weight: var(--fw-b);
}
header nav ul.menu2 li.has_child p::after {
	content: '\e5cf';
	margin-left: 5px;
	padding: 10px;
	font-family: 'Material Icons';
	line-height: 1;
}
header nav ul.menu2 li.has_child ul {
	flex-flow: column;
	position: absolute;
	top: 100%;
	left: -30px;
	padding: 0 30px;
	background: #fff;
	visibility: hidden;
	opacity: 0;
	z-index: 2;
	transform:scale(1,0.7);
	transform-origin: center top;
	transition: var(--transition);
}
header nav ul.menu2 li.has_child:hover ul,
header nav ul.menu2 li.has_child:active ul {
	transform:scale(1,1);
	visibility: visible;
	opacity: 1;
}
header nav ul.menu2 li.has_child li {
	border-bottom: solid 1px var(--bg-gray);
}
header nav ul.menu2 li.has_child li:last-child {
	border-bottom: none;
}
header nav ul.menu2 li.has_child li a {
	text-align: left;
}

/* スクロール後 */
header.scroll .logo{
	width: 14%;
	padding-top: 4px;
}
header.scroll .logo h1{
	display: none;
}
header.scroll .logo a img{
	width: 150px;
	height: auto;
}
header.scroll nav .menu1{
	width: 80%;
}
header.scroll nav .menu1 p {
	display: flex;
	flex-flow: row;
	margin-top: 6px;
}
header.scroll nav .menu1 p span{
	margin: 0 0 0 1.5em;
}
header.scroll nav .menu1 .h-btn-wrapper a{
	width: 16vw;
	padding: 10px 0;
	font-size: 0.9em;
}
header.scroll nav ul.menu2 li a{
	padding-bottom: 18px;
	font-size: 0.9em;
}
.h-sp-fix{
	display: none;
}

@media screen and (max-width: 979px){
	header .logo{
		width: min(calc(100% - 180px),50%);
		height: 50px;
		margin-bottom: 10px;
	}
	header .logo a img{
		width: auto;
		height: 50px;
	}

	/* hamburger */
	header .hamburger {
		--size:50px;
		display: block;
		position: fixed;
		top: 9px;
		right: 5px;
		z-index: 1500;
		box-sizing: border-box;
		width: var(--size);
		height: var(--size);
		cursor: pointer;
		transition: all 400ms;
		color:#fff;
		background: var(--main-color);
		border-radius: 50%;
	}
	header .hamburger span {
		position: absolute;
		width: 24px;
		height: 2px;
		background:#fff;
		transition: all 400ms;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	header .hamburger span:nth-child(1) {
		top: 34%;
	}
	header .hamburger span:nth-child(2) {
		top: 50%;
	}
	header .hamburger span:nth-child(3) {
		top: 66%;
	}
	header.nav-open .hamburger {
		background: none;
	}
	header.nav-open .hamburger span {
		background: var(--main-color);
	}
	header.nav-open .hamburger span:nth-child(1) {
		top: 20px;
		transform: rotate(45deg);
	}
	header.nav-open .hamburger span:nth-child(2) {
		display: none;
	}
	header.nav-open .hamburger span:nth-child(3) {
		top: 20px;
		transform: rotate(-45deg);
	}
	/* nav */
	header nav{
		height: 100vh;
		overflow-y: scroll;
		position: fixed;
		top: 0px;
		right: -320px;
		width: 320px !important;
		transition: var(--transition);
		z-index: 1499;
		height: 100%;
		margin: 0;
		padding: 0 0 40px;
		background: #fff;
	}
	header.nav-open nav{
		box-shadow: 0px 0 10px -4px #333;
	}
	header nav .h-logo_sp{
		display: block;
		width: 180px;
		padding: 15px 5% 26px;
	}
    header nav .menu1{
		width: 100%;
        position: static;
		flex-flow: column-reverse;
        text-align: center;
    }
	header nav .menu1 p {
		margin: 30px auto 0;
	}
	header nav .menu1 p a{
		justify-content: center;
		margin-bottom: 10px;
		font-size: min(6vw, 26px);
	}
	header nav .menu1 .h-btn-wrapper {
		width: 100%;
		flex-flow: column;
		gap:16px;
		margin-top: 40px;
	}
	header nav .menu1 .h-btn-wrapper a{
		width: 80%;
		padding: 12px 0;
	}
	header nav ul.menu2{
		display: flex;
		flex-wrap: wrap;
		font-size: 15px;
		gap: 2px;
		border-top: 1px dotted var(--main-color_l);
	}
	header nav ul.menu2 li {
		width:100%;
	}
	header nav ul.menu2 li a{
		height: 100%;
		padding: 18px 14%;
		line-height: 1.4;
		text-align-last: left;
		border-bottom: 1px dotted var(--main-color_l);
		background: var(--bg-gray);
	}

	/* h-sp-fix */
	.h-sp-fix{
		--size:50px;
		position: fixed;
		right: 63px;
		top: 9px;
		display: flex;
		justify-content: flex-end;
		gap: 6px;
	}
	.h-sp-fix a{
		width: var(--size);
		height: var(--size);
		display: grid;
		place-items: center;
		border: 2px solid var(--main-color);
		border-radius: 50%;
	}
	.h-sp-fix a i{
		margin-right: 0;
		font-size: 1.3em;
		color: var(--main-color);
	}
}


/**==============================================
asd-contact
==============================================**/
.asd-contact{
    color: #fff;
	margin-top: 100px;
}
.asd-contact::before{
	content: "";
	display: block;
	width: 60%;
	height: 80%;
	background: var(--bg-lc);
	border-radius: 0 300px 300px 0;
	position: absolute;
	left: 0;
	top: -90px;
}
.asd-contact::after{
	content: "";
	display: block;
	width: 50%;
	height: 100%;
	background: var(--main-color);
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}
.asd-cntct-content{
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 80px;
	padding: 50px 5% 70px 10%;
	background: var(--main-color);
	border-radius: 300px 0 0 300px;
	position: relative;
}
.asd-cntct-content .asd-cntct-head .deco-tit{
	margin-bottom: 10px;
	font-family: var(--webf);
	font-size: 100px;
	color: var(--main-color);
	line-height: 1;
	-webkit-text-stroke: 1px #fff;
}
.asd-cntct-content .asd-cntct-main p{
	text-align: center;
	line-height: 1.3;
}
.asd-cntct-content .deco{
	position: absolute;
	right: 0;
	bottom: 80%;
}

@media screen and (max-width: 520px) {
	.asd-contact{
		margin: 0;
		padding-bottom: 100px;
	}
	.asd-contact::before{
		width: 80%;
		height: 114%;
		border-radius: 0 100px 100px 0;
		top: auto;
		bottom: 0;
	}
	.asd-contact::after{
		display: none;
	}
	.asd-cntct-head{
		text-align: center;
	}
	.asd-cntct-content{
		width: 98%;
		margin-left: 2%;
		align-items: center;
		flex-flow: column;
		gap: 20px;
		padding: 50px 4%;
		border-radius: 70px 0 0 70px;
	}
	.asd-cntct-content .asd-cntct-main p a[href^="tel:"]{
		font-size: 8vw;
	}
	.asd-cntct-content .asd-cntct-head .deco-tit{
		font-size: 21vw;
		margin-top: -1em;
		text-align: right;
		letter-spacing: -2px;
		transform: translateX(5%);
	}
	.asd-cntct-content .deco{
		width: 34%;
		right: 4%;
		bottom: -120px;
	}
	.asd-cntct-content .deco img{
		width: 100%;
	}
}



/**==============================================
お問い合わせ aside2
・・・枚方紫峰霊園　https://hirakatashihoureien.296.works/tomb/
==============================================**/
.asd-contact2{
	text-align: center;
}
.asd-contact2::before{
	background: #fff;
	mix-blend-mode: screen;
	opacity: .2;
}
.asd-contact2>div{
	padding: 20px;
	background: rgba(255,255,255,.8);
}
.asd-contact2 .mail-btn a{
	border-color: var(--main-color);
}

@media screen and (max-width: 520px) {
	.asd-contact2>div{
		width: 90%;
	}
	.asd-contact2 a[href^="tel:"]{
		margin-bottom: 6px;
		font-size: 30px;
	}
	.asd-contact2 .mail-btn{
		margin-top: 20px;
	}
}

/**==============================================
03: フッター
==============================================**/
footer .sec-in{
	display: flex;
	justify-content: space-between;
	position: relative;
}
footer address{
	flex:1;
	display: flex;
	flex-flow: column;
}
footer .sec-in address .f-logo{
	display: inline-block;
	margin-bottom: 10px;
}
footer .sec-in address .f-logo img{
    width: 270px;
}
footer .sec-in address a{
	display: block;
}
footer .sec-in address a:not([href^="tel:"]):hover{
	color: var(--main-color);
}
footer .sec-in address a[href^="tel:"]{
	display: inline-block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;
}

/*nav*/
footer nav ul {
	column-count: 2;
	column-gap: 50px;
}
footer nav ul li{
	break-inside: avoid;/*ブロックの途中で改行させない*/
}
footer nav ul li a {
	display: block;
	padding: 0 10px 6px;
}footer nav ul li a:hover{
    color: var(--main-color);
}
footer nav ul li .sub-nav a{
	margin-left: 0.5em;
}
footer nav ul li .sub-nav a::before{
	content: "-";
	margin-right: 0.2em;
}

/** コピーライト **/
.copyright{
	margin-top: auto;
}
.copyright small{
    display: block;
    width:100%;
    font-size:12px;
    line-height: 1.0;
}


@media screen and (max-width: 520px){
	footer .sec-in{
		flex-flow: column;
	}
	footer .sec-in address{
		display: contents;
	}
	footer .sec-in address .f-logo img{
		width: 200px;
	}

	/*nav*/
	footer nav ul {
		column-gap: 20px;
		margin-top: 50px;
	}
	footer nav ul li{
		margin-bottom: 10px;
		font-size: 14px;
	}

	/** コピーライト **/
	.copyright{
		order: 3;
	}
	.copyright small{
		margin-top: 40px;
		text-align: center;
	}
}


/**==============================================
TOPページ
==============================================**/
#top{
	--hero-height:max(48vw, 780px);
}

@media screen and (max-width: 520px) {
	#top{
		--hero-height:min(90vh, 640px);
	}
}


/**================================================================================
HERO
================================================================================**/
.hero{
	--height:700px;
	/* aspect-ratio: 2 / 1; */
	height: var(--height);
	overflow: hidden;
	position: relative;
}
.hero .swiper-slide{
	height: var(--height);
	position: relative;
	overflow: hidden;
	mix-blend-mode: plus-lighter; /* ←クロスフェード */

	display: flex;
	flex-flow: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
}
.hero .swiper-slide figure{
	width: 76%;
	margin-left: -9%;
	border-radius: 400px 0 0 400px;
	overflow: hidden;
	z-index: 1;
}
.hero .swiper-slide img{
	width: 100%;
	height: var(--height);
	object-fit: cover;
}
.hero .catch{
	width: max(38%,460px);
	min-height: 300px;
	margin-top: 70px;
	padding: 4% 50px 4% 5%;
	color: #fff;
	background: var(--main-color);
	border-radius: 0 300px 300px 0;
	z-index: 2;
}
.hero .catch strong{
	margin-bottom: 30px;
	display: block;
	font-size: clamp(4.2rem, 2.5vw + 4rem, 7rem);
	font-size: clamp(2rem, 2vw + 1rem, 3.2rem);
	font-weight: var(--fw-b);
	line-height: 1.3;
}
.hero-deco{
	position: absolute;
	left: 10%;
	bottom: 20px;
	z-index: 3;
}

/* アニメーション */
.hero .swiper-slide-active img,
.hero .swiper-slide-duplicate-active img,
.hero .swiper-slide-prev img{
	animation: zoomUp 10s linear 0s 1 normal both;
}
@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.1);
	}
}

@media screen and (max-width: 520px) {
	.hero{
		--height:48vh;
		height: auto;
		padding-bottom: 12vw;
	}
	.hero .swiper-slide{
		flex-flow: column;
		justify-content: flex-start;
		align-items:center;
		height: auto;
	}

	.hero .swiper-slide figure{
		width: 98%;
		height: var(--height);
		margin-left: 2%;
	}
	.hero .catch{
		width: 86%;
		min-height: 190px;
		margin: -30px 14% 0 0;
		padding: 6% 30px 4% 5%;
		font-size: 0.82em;
	}
	.hero .catch strong{
		margin-bottom: 10px;
		font-size: min(3vw + 1rem, 3rem);
	}
	.hero-deco{
		left: auto;
		right: 2%;
		bottom: 0;
	}
	.hero-deco img{
		width: 30vw;
	}
}

/* -------------------------------------
TOP-イントロ
-------------------------------------*/
.sec-top-intro .sec-in{
	z-index: 2;
}
.sec-top-intro .deco-wrapper{
	position: static;
}
.sec-top-intro figure{
	border-radius: 50%;
	width: var(--size);
	height: var(--size);
	position: absolute;
}
.sec-top-intro figure.deco1{
	--size:280px;
	left: -2%;
	bottom: 25%;
}
.sec-top-intro figure.deco2{
	--size:230px;
	right: -1%;
	top: 5%;
}

@media screen and (max-width: 520px) {
	.sec-top-intro.pt150{
		padding-top: 10px;
	}
	.sec-top-intro .t_C{
		text-align-last: left;
	}
	.sec-top-intro .deco-wrapper{
		display: flex;
		justify-content: center;
	}
	.sec-top-intro figure{
		position: static;
	}
	.sec-top-intro figure.deco1{
		--size:40%;
		margin: 40px 10% 0 0;
	}
	.sec-top-intro figure.deco2{
		--size:30%;
		margin: 10px 0 0;
	}
}

/* 文字スライド */
.yokoscroll {
	display: flex;
	flex: 0 0 auto;
	white-space: nowrap;
	width: 100%;
	font-family: var(--webf);
	color: var(--main-color_ll);
	font-size: 130px;
	line-height: 1;
	margin-top: 60px;
}
.yokoscroll span {
	padding: 0 0.2em;
}
.yokoscroll span:nth-child(odd) {
	animation: yokoyoko 50s -25s linear infinite;
}
.yokoscroll span:nth-child(even) {
	animation: yokoyoko2 50s linear infinite;
}
@keyframes yokoyoko {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes yokoyoko2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}

@media screen and (max-width: 768px) {
	.yokoscroll {
		font-size: 150px;
	}
}
@media screen and (max-width: 520px) {
	.yokoscroll {
		margin-top: -24px;
		font-size: 100px;
	}
}

/* -------------------------------------
top-about
-------------------------------------*/
/* top-about-content */
.top-about-content figure {
	height: 650px;
}
.top-about-content figure img{
	object-position: top center;
}

.top-about-content.hatena .tit{
	padding-left: 1em;
}
.top-about-content.hatena .text{
	position: relative;
}
.top-about-content.hatena .text::before{
	content: "";
	display: block;
	width: 100%;
	height: 270px;
	position: absolute;
	left: -60px;
	top: -100px;
	background: url(/common/images/deco-question.svg) no-repeat left / contain;
	z-index: -1;
}

@media screen and (max-width: 520px) {
	.sec-top-about.pt100{
		padding-top: 0;
	}
	.top-about-wrapper.figEdge-wrapper{
		gap: 80px;
	}
	.top-about-content.figEdgeL-content,
	.top-about-content.figEdgeR-content{
		flex-flow: column;
	}
	.top-about-content figure {
		height: 80vw;
	}
	.top-about-content.hatena .tit{
		padding-left: 0;
	}
	.top-about-content.hatena .text::before{
		height: 200px;
		left: 52%;
		top: -10px;
		opacity: .7;
	}
}

/* -------------------------------------
TOP-S・K測量設計が選ばれる3つの理由
-------------------------------------*/
/* top-reason-list */
.top-reason-list{
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: flex-start;
}
.top-reason-list li{
	width: calc(100% /3);
	border-radius: var(--radius_s);
	overflow: hidden;
}
.top-reason-list li:nth-child(2){
	margin-top: 50px;
}
.top-reason-list li:nth-child(3){
	margin-top: 100px;
}
.top-reason-list li .text{
	padding: 20px;
	color: #fff;
	background: var(--main-color);
}
.top-reason-list li:nth-child(even) .text{
	background: var(--color);
}
.top-reason-list li .text >*{
	margin-bottom: 20px;
}

@media screen and (max-width: 520px) {
	.top-reason-list{
		flex-flow: column;
	}
	.top-reason-list li{
		width: 90%;
		margin: 0 auto;
	}
	.top-reason-list li:nth-child(2),
	.top-reason-list li:nth-child(3){
		margin-top: 20px;
	}
	.top-reason-list li figure img{
		aspect-ratio: 5/4;
		object-fit: cover;
		object-position: center top;
	}
	.top-reason-list li .text >*{
		margin-bottom: 14px;
	}
}

/* -------------------------------------
TOP-事業内容
-------------------------------------*/
/* top-service-list */
.top-service-list{
	display: flex;
	flex-flow: column;
	gap: 30px;
}
.top-service-list li{
	display: flex;
	gap: 50px;
}
.top-service-list li figure{
	width: 40%;
	border-radius: var(--radius_s);
}
.top-service-list li .text{
	flex:1;
}
.top-service-list li .text >*{
	margin-bottom: 20px;
}

@media screen and (max-width: 520px) {
	.top-service-list{
		gap: 60px;
	}
	.top-service-list li{
		flex-flow: column;
		gap: 20px;
	}
	.top-service-list li figure{
		width: 100%;
	}
	.top-service-list li .text >*{
		margin-bottom: 14px;
	}
}

/* -------------------------------------
TOP-実績
-------------------------------------*/
.top-works-content{
	align-items: flex-start;
}
.top-works-content .text{
	margin-top: 100px;
	position: relative;
}
.top-works-content>figure{
	height: 690px;
}
.sec-top-works .deco-wrapper{
	display: flex;
	align-items: flex-start;
	margin-top: 100px;
}
.sec-top-works .deco-wrapper figure{
	flex-shrink: 0;
	width:260px;
	border-radius: var(--radius_s);
}
.sec-top-works .deco-wrapper figure.deco1{
}
.sec-top-works .deco-wrapper figure.deco2{
	margin-top: 100px;
	transform: translateX(30px);
}

@media screen and (max-width: 520px) {
	.top-works-content .text{
		margin-top: 0;
	}
	.top-works-content>figure{
		height: 80vw;
	}
	.sec-top-works .deco-wrapper{
		margin-top: 40px;
	}
	.sec-top-works .deco-wrapper figure{
		flex-shrink: 0;
		width:50%;
		border: 4px solid #fff;
	}
	.sec-top-works .deco-wrapper figure.deco1{
	}
	.sec-top-works .deco-wrapper figure.deco2{
		margin-top: 60px;
		transform: translateX(-30px);
	}
}

/* -------------------------------------
TOP-お知らせ
-------------------------------------*/
.sec-top-news .more{
	position: absolute;
	right: var(--ovf-half);
	top: 60px;
}

@media screen and (max-width: 520px) {
	.sec-top-news .more{
		position: static;
		display: block;
		margin-top: 30px;
	}
}

/* -------------------------------------
TOP-ごあいさつ
-------------------------------------*/
/* top-greeting-content */
.top-greeting-content{
	display: flex;
	align-items: flex-start;
	flex-flow: row-reverse;
	gap: 50px;
}
.top-greeting-content .top-greeting-main{
	flex: 1;
}
.top-greeting-content .top-greeting-fig{
	--gap:20px;
	width: 50%;
	display: flex;
	flex-wrap:wrap;
	gap: 40px var(--gap);
}
.top-greeting-content .top-greeting-fig figure{
	width: calc((100% - var(--gap)*1)/2);
}
.top-greeting-content .top-greeting-fig figure:last-child{
	width: 100%;
}
.top-greeting-content .top-greeting-fig figure img{
	border-radius: var(--radius_s);
}
.top-greeting-content .top-greeting-fig figcaption{
	margin-top: 10px;
	text-align: center;
	line-height: 1.4;
}

/* top-message-content */
.top-message-content{
	display: flex;
	gap: 50px;
	color: #fff;
	background: var(--color);
	border-radius: var(--radius_s);
}
.top-message-content figure{
	width: 180px;
	text-align: center;
	line-height: 1.5;
}
.top-message-content figure img{
	border-radius: var(--radius_s);
	margin-bottom: 10px;
}
.top-message-content .top-message-main{
	flex: 1;
}

@media screen and (max-width: 520px) {
	/* top-greeting-content */
	.top-greeting-content{
		flex-flow: column;
		gap: 30px;
	}
	.top-greeting-content .top-greeting-fig{
		width: 100%;
		gap: 30px var(--gap);
	}
	.top-greeting-content .top-greeting-fig figcaption{
		font-size: 0.9em;
	}

	/* top-message-content */
	.top-message-content{
		flex-flow: column-reverse;
		gap: 20px;
	}
	.top-message-content figure{
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		gap: 20px;
	}
	.top-message-content figure img{
		width: 50%;
		aspect-ratio: 5/4;
		object-fit: cover;
		object-position: center top;
		margin-bottom: 0;
	}
	.top-message-content figure figcaption{
		font-size: 0.9em;
	}
}

/* -------------------------------------
TOP-採用情報
-------------------------------------*/
.top-recruit-content figure{
	height: 450px;
}

@media screen and (max-width: 520px) {
	.top-recruit-content figure{
		height: 90vw;
	}
}


/**==============================================
会社概要
==============================================**/
/* -------------------------------------
対応エリア
-------------------------------------*/
.area-content{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
	padding: 20px 50px;
}
.area-content .tit strong{
	display: block;
	font-size: 2.2em;
}
.sec-area .deco{
	position: absolute;
	right: 15%;
	bottom: -40px;
}

@media screen and (max-width: 520px) {
	.area-content{
		flex-flow: column;
		align-items: flex-start;
		gap: 30px;
		padding: 30px;
	}
	.area-content .area-main{
		z-index: 2;
	}
	.area-content .titA{
		margin-bottom: 6px;
	}
	.area-content .tit strong{
		font-size: 1.9em;
	}
	.area-content figure{
		width: 110%;
		margin-left: -20px;
		margin: -120px -60px 0 auto;
	}
	.sec-area .deco{
		right: auto;
		left: 10%;
		bottom:40px;
		width: 42vw;
	}
}

/* -------------------------------------
アクセス
-------------------------------------*/
.access-content{
	display: flex;
	gap:40px;
}
.access-content >*{
	width: 100%;
	border-radius: var(--radius_s);
	overflow: hidden;
}

@media screen and (max-width: 520px) {
	.access-content{
		flex-flow: column;
		gap:30px;
	}
}


/**==============================================
代表・スタッフ紹介
==============================================**/
/* -------------------------------------
代表者メッセージ
-------------------------------------*/
.message-fig{
	--gap:20px;
	display: flex;
	justify-content: center;
	gap: var(--gap);
}
.message-fig figure{
	width: 100%;
}
.message-fig figure img{
	border-radius: var(--radius_s);
}
.message-fig figcaption{
	margin-top: 10px;
	text-align: center;
	line-height: 1.4;
}

@media screen and (max-width: 520px) {
	.message-fig{
		--gap:14px;
	}
}

/* -------------------------------------
スタッフ紹介
-------------------------------------*/
.staff-list li{
	display: flex;
	gap: 60px;
	padding: 50px 50px;
	border-radius: var(--radius);
}
.staff-list li:nth-child(odd){
	background: var(--bg-lc);
}
.staff-list li figure{
	width: 280px;
	display: flex;
	flex-flow: column;
	align-items: center;
}
.staff-list li figure img{
	border-radius: var(--radius_s);
}
.staff-list li figure img.no-img{
	width: 50%;
}
.staff-list li figure figcaption{
	margin-top: 14px;
	text-align: center;
	line-height: 1.4;
}
.staff-list li .text{
	flex: 1;
}

@media screen and (max-width: 520px) {
	.staff-list li{
		flex-flow: column;
		align-items: center;
		gap: 30px;
		padding: 40px 26px;
	}
	.staff-list li figure{
		width: 80%;
	}
}


/**==============================================
お知らせ・ブログ
==============================================**/
/* -------------------------------------
関連記事
-------------------------------------*/
.sec-kanren .content-box{
	background: var(--bg-lc);
}


/**==============================================
お問合せ
==============================================**/
/* -------------------------------------
お電話から
-------------------------------------*/
.sec-tel-contact{
	text-align: center;
}


/**==============================================
採用一覧
==============================================**/
/* -------------------------------------
関連記事
-------------------------------------*/

/* -------------------------------------
rec-top-list
-------------------------------------*/
.rec-top-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 40px 0 60px;
}
.rec-top-list li.wrapper {
	width: 48%;
	margin-bottom: 30px;
	background: var(--main-color_ll);
	position: relative;
}
.rec-top-list li.wrapper a {
}
.rec-top-list li dl {
	padding: 24px 30px 20px;
}
.rec-top-list li dl dt {
	margin-bottom: 6px;
	font-weight: bold;
}
.rec-top-list li dl dd {
	font-size: 0.9em;
	font-weight: normal;
}
.rec-top-list li dl dd time{
	display: block;
	margin-top: 5px;
	color: var(--gray);
	font-size: 0.9em;
	text-align: right;
}
.rec-top-list li .pic {
	position: relative;
}
.rec-top-list li .pic figure {
	height: 300px;
}
.rec-top-list li .pic ol {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(40%);
}
.rec-top-list li .pic ol li {
	margin: 5px;
	padding: 5px 16px;
	color: #fff;
	font-size: 0.9em;
	text-align: center;
	font-weight: bold;
	background: var(--main-color);
	border: none;
}

@media screen and (max-width: 520px) {
	.rec-top-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px 0 30px;
	}
	.rec-top-list li.wrapper {
		width: 100%;
		margin: 10px 0px;
	}
	.rec-top-list li .pic figure {
		height: 54vw;
	}
	.rec-top-list li .pic img {
		width: 100%;
	}
	.rec-top-list li dl dt {
		margin-bottom: 10px;
		font-size: 18px;
	}
	.rec-top-list li .pic ol {
		left: 10px;
	}
	.rec-top-list li .pic ol li {
		padding: 5px 10px;
	}
}


/* -------------------------------------
rec-list
-------------------------------------*/
.rec-list{
	display: flex;
	flex-flow: column;
	gap: 30px;
}
.rec-list li{
}
.rec-list li a{
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding: 20px;
	background: var(--main-color_ll);
	/* border: 3px solid var(--main-color_ll); */
	border-radius: var(--radius_s);
}
.rec-list li figure{
	width: 40%;
	border-radius: var(--radius_s);
}
.rec-list li .text{
	flex: 1;
}
.rec-list li .ctgr{
	margin: 0 5px 10px 0;
}

@media screen and (max-width: 520px) {
	.rec-list{
		gap: 20px;
	}
	.rec-list li a{
		flex-flow: column;
		gap: 22px;
	}
	.rec-list li figure{
		width: 100%;
	}
	.rec-list li a p{
		font-size: 0.9em;
	}
}



/**==============================================
事業内容
==============================================**/
/* service-anc */
.service-anc-wrapper{
	display: flex;
	flex-flow: column;
	gap: 20px;
	padding: 30px 50px;
	border:4px solid var(--main-color_ll);
	border-radius: var(--radius_s);
}
.service-anc{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.service-anc dt{
	width: 15%;
	padding: 6px;
	color: #fff;
	text-align: center;
	background: var(--color);
}
.service-anc dd{
	width: 85%
}
.service-anc dd a{
	display: inline-block;
	margin-left: 2em;
	border-bottom: 1px dotted var(--color);
}
.service-anc dd a:hover{
	color: var(--main-color);
	border-bottom-color:#fff ;
}

/* 色分け */
.service-anc dt[ data-tag="不動産"]{
	background: var(--color_l);
}

@media screen and (max-width: 520px) {
	.service-anc-wrapper{
		gap: 20px;
		padding: 20px 30px;
	}
	.service-anc{
		align-items: flex-start;
		align-items: stretch;
	}
	.service-anc dt{
		width: 28%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.service-anc dd{
		width: 72%;
	}
	.service-anc dd a{
		margin: 0 0.5em 10px 1em ;
	}
}


/* -------------------------------------
測量
-------------------------------------*/
/* .service-list */
.service-list{
	display: flex;
	flex-flow: column;
	gap: 50px;
}
.service-list li{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px 50px;
	padding-top: 10px;
}
.service-list li h3{
	width: 100%;
}
.service-list li figure{
	width: 40%;
	border-radius: var(--radius_s);
}
.service-list li .text{
	flex:1;
}
.service-list li .text >*{
	margin-bottom: 20px;
}

@media screen and (max-width: 520px) {
	/* .service-list */
	.service-list{
		gap: 30px;
	}
	.service-list li{
		flex-flow: column;
		gap: 20px;
	}
	.service-list li h3{
		text-align: center;
	}
	.service-list li figure{
		width: 100%;
	}
	.service-list li .text >*{
		margin-bottom: 14px;
	}
}


/**==============================================
測量の仕事内容
==============================================**/
/* -------------------------------------
機器案内
-------------------------------------*/
/* machine-content */
.machine-content{
	display: flex;
	align-items: center;
	gap: 70px;
}
.machine-content .machine-main{
	flex: 1;
}
.machine-content .machine-fig{
	--gap:20px;
	width: 50%;
	display: flex;
	flex-wrap:wrap;
	gap: var(--gap);
}
.machine-content .machine-fig figure{
	width: calc((100% - var(--gap)*1)/2);
}
.machine-content .machine-fig figure:first-child{
	width: 100%;
}
.machine-content .machine-fig figure img{
	border-radius: var(--radius_s);
}

@media screen and (max-width: 520px) {
	/* machine-content */
	.machine-content{
		flex-flow: column;
		gap: 30px;
	}
	.machine-content .machine-fig{
		width: 100%;
	}
}

/* -------------------------------------
仕事の流れ
-------------------------------------*/
/* flow-list */
.flow-list-wrapper{
	display: flex;
	gap: 50px;
}
.flow-list {
	flex: 1;
}
.flow-list li{
	counter-increment: num 1;
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 50px;
	position: relative;
}
.flow-list li::before{
	content: counter(num) ".";
	font-family: var(--webf);
	font-size: 1.8em;
}
.flow-list li:not(:last-child):after{
	content: "↓";
	color: var(--main-color_l);
	font-size: 1.4em;
	position: absolute;
	left: 50px;
	top: 100%;
}
.flow-list-wrapper .flow-fig{
	width: 200px;
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	gap: 10px;
}
.flow-list-wrapper .flow-fig img{
	border-radius: var(--radius_s);
}

@media screen and (max-width: 520px) {
	/* flow-list */
	.flow-list-wrapper{
		gap: 20px;
	}
	.flow-list {
	}
	.flow-list li{
		align-items: flex-start;
		margin-bottom: 40px;
	}
	.flow-list li::before{
		font-size: 1.8em;
	}
	.flow-list li:not(:last-child):after{
		font-size: 1.4em;
		left: 50px;
		top: 100%;
	}
	.flow-list-wrapper .flow-fig{
		width: 32%;
		gap: 24px;
	}
	.flow-list-wrapper .flow-fig img{
		border-radius: 10px;
	}
}


/* -------------------------------------
お仕事体験受付中
-------------------------------------*/
/* job-content */
.job-content{
	display: flex;
	flex-flow: row-reverse;
	align-items: flex-start;
	gap: 50px;
}
.job-content .job-main{
	flex: 1;
}
.job-content .job-fig{
	--gap:20px;
	width: 50%;
	display: flex;
	flex-wrap:wrap;
	gap: 40px var(--gap);
}
.job-content .job-fig figure{
	width: calc((100% - var(--gap)*1)/2);
}
.job-content .job-fig figure:first-child{
	width: 100%;
}
.job-content .job-fig figure img{
	border-radius: var(--radius_s);
}

@media screen and (max-width: 520px) {
	/* job-content */
	.job-content{
		flex-flow: column-reverse;
		gap: 30px;
	}
	.job-content .job-fig{
		width: 100%;
		gap: 30px var(--gap);
	}
}
/*layout:2*/