@charset "UTF-8";
/* 固定ページ「お客様の声」用のスタイルシート */

* {
	box-sizing: border-box;
}

.event_all{
	width:100%;
}

/* 親要素のclassを変更 */
.one-column #content .wrap {
	padding: 40px 0 24px !important;
	background:none;
	background-position: 0% 0%;
	background-size: auto auto;
	background-repeat: repeat;
	background-origin: padding-box;
	background-clip: border-box;
	background-attachment: scroll;
	background-color: transparent;
}

article.page {
	padding: 0 ;
}

/* PC スマホ 表示非表示切替 */
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}

@media only screen and (max-width: 767px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
}

.br-sp{
	display:none;
}
.br-pc{
	display:block;
}
.br-sp1{
	display:none;
}
.br-none{
	display:block;
}
/* 見出し */
h1,
h2,
h3,
h4,
h5 {
	margin: 0 ;
	padding: 0;
	border-top: none;
	border-bottom: none;
	background: none;
}

h3::before {
	display: none;
	background: none;
}

h3::after {
	border-bottom: none;
}



/* テキスト */
p {
	/* 	margin: 0 0 1.6rem !important; */
	margin:0;
}

.indent {
	margin: 0 0 0.4rem 1rem;
	text-indent: 0 0 0 -1rem;
}

.text-bold {
	font-weight: bold;
}

.icon-indent {
	position: relative;
	padding-left: 25px;   /* アイコン幅分だけ余白 */
	text-indent: -25px;   /* 1行目のアイコンを左に出す */
	line-height: 1.5;
}
.icon-indent i {
	display: inline-block;
	width: 20px;   /* アイコン幅に合わせる */
	text-align: center;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	all: unset;
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: inherit;
}
.disp_blc {
	display: block;
}
.disp_non {
	display: none;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.text-center {
	text-align: center !important;
}

.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

.font-bold {
	font-weight: bold;
}

.font-justyfy {
	text-align: justify;
}

/* margin, padding */
.margin-bottom-zero {
	margin-bottom: 0 !important;
}

.margin-bottom-ss {
	margin-bottom: 10px !important;
}

.margin-bottom-s {
	margin-bottom: 20px !important;
}

.margin-bottom-m {
	margin-bottom: 60px !important;
}

.margin-bottom-l {
	margin-bottom: 100px !important;
}
.margin-top-m {
	margin-top: 60px !important;
}
.margin-top-l {
	margin-top: 100px !important;
}

.padding_zero {
	padding: 0 !important;
}

.padding-bottom-zero {
	padding-bottom: 0 !important;
}

.padding-s {
	padding: 20px !important;
}

.padding-m {
	padding: 60px !important;
}

.padding-l {
	padding: 100px !important;
}

.padding-bottom-s {
	padding-bottom: 20px !important;
}

.padding-bottom-m {
	padding-bottom: 60px !important;
}

.padding-bottom-l {
	padding-bottom: 100px !important;
}
.p-larger{
	font-size:larger;
}
.p-smaller{
	font-size:smaller;
}
.p-xlarge{
	font-size:x-large;
}
.p-xxlarge{
	font-size: xx-large;
}
.p-xxxlarge{
	font-size: xxx-large;
}

.p-color{
	/*　blue */
	/* 	color:#253C7A; */
	/*　green */
	color:#70B70B;

}
.p-white{
	color: #fff;
}

.bg-white{
	background-color:#fff;
}
.center{
	display:grid;
	place-items:center;
	/* 	text-align:center; */
}
.p-bold{
	font-weight:bold;
}

.mark-title{
	background: linear-gradient(transparent 50%, #ebf5dc 50%);/*きみどり*/
}
.mark-title2{
	background: linear-gradient(transparent 50%, #d4eab5 30%);/*少し濃いきみどり*/
}
.mark-title2-blue{
	background: linear-gradient(transparent 50%, #b7ebf2 30%);/*あお*/
}
.courgette-regular {
	font-family: "Courgette", cursive;
	font-weight: 400;
	font-style: normal;
	font-size:40px;
}
.notosans-regular {
	font-family:"Noto Sans JP", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size:40px;
}
/************* 共通ヘッダーを非表示 *************/
#content {
	padding: 0;
}


/* ------------------------------------
共通のところ、色を変更し指定する
------------------------------------ */
.bg-haikei{	
	background:repeat url("https://www.j-union.net/wp-content/uploads/haikei_green.png");/*green*/
}
.bg-haikei-blue{	
	background:repeat url("https://www.j-union.net/wp-content/uploads/haikei_blue.png"); /*blue*/
}
.bg-color{
	background-color:#70B70B; /*green*/
}
.bg-color-lightgreen{
	background-color:#ebf5dc; /*うすいgreen*/
}
.bg-color-lightblue{
	background-color:#E6F8FB; /*うすいblue*/
}
.bg-color-blue{	
	background-color:#4DCFE0; /*blue*/
}
.bo-color{
	border: 2px solid #70B70B; /*green*/
}
.bo-color-blue{
	border: 2px solid #4DCFE0; /*blue*/
}
.bo-bm-color{
	border-bottom: 1px solid #70B70B; /*green*/
}
.bo-bm-color-blue{
	border-bottom: 2px solid #4DCFE0; /*blue*/
}
.bo-bt-color{
	border-top: 2px solid #70B70B; /*green*/
}
.bo-bt-color-blue{
	border-top: 2px solid #4DCFE0; /*blue*/
}
.p-color{
	color:#70B70B; /*green*/
}
.p-color-blue{
	color:#4DCFE0; /*blue*/
}
.a-color{
	color:#37512e;
}
.a-color::before{
	background-color: #37512e;
}
.a-color-blue{
	color:#2E4051; 
}
.a-color-blue::before{
	background-color: #2E4051;
}
.pipe-blue{
	border-right: solid 2.5px #4DCFE0;/*blue*/
}
.pipe-green{
	border-right: solid 2.5px #70B70B;/*green*/
}
.hr3-blue {
	width:100%;
	border-top: 15px solid #4DCFE0;/*blue*/
}
#union-success a:hover{
	opacity:0.5;
}
#union-success .width-adjust{
	/* 	padding: 0 5%; */
	width:100%;
	padding: 0 2%;
	/* 	padding:0 3%; */
	gap:80px;
}
/************* ここから　*************/
#union-success{
	font-family: "Noto Sans JP", sans-serif;
	/* 	background-size: 300px 300px; */
	background-size: 25%;
	display:grid;
	place-items:center;
	/* 	color:#37512e;  */
	word-break: auto-phrase;
}@media (max-width: 768px) {
  #union-success{
    word-break: normal; 
  }
}
#union-success #union-success-header {
	width:100%;
	background:#fff;
	position: relative;	
	margin:0 auto;
}

#union-success #union-success-header .header-area {
	/* 	max-width:940px; */
	/* 	max-width:1280px;	 */
	max-width:1123px;	

	display:flex;
	justify-content:space-around;
	align-items:center;
}@media (max-width: 939px) {
	#union-success #union-success-header .header-area {
		max-width:none;
		flex-direction:column;
		margin-top: 50px;
	}
	#union-success #union-success-header .header-area .disp_blc{
		display:none;
	}
	#union-success #union-success-header .header-area .disp_non{
		display:grid;
		place-items:center;
	}
}@media (max-width: 767px) {
	#union-success #union-success-header .header-area {
		margin-top: 70px;
	}
}

#union-success #union-success-header .header-area .image-box {
	display:flex;
	justify-content:space-around;
}
#union-success #union-success-header .header-area img{
	width:57%;
	height:auto;
	display:block;
}@media screen and (max-width: 939px) {
	#union-success #union-success-header .header-area img{
		width:90%;
	}
}

#union-success #union-success-header .padding-space{
	padding-left:4%;
}

#union-success #union-success-header .header-title{
	background-color:#fff;
	text-align:center;
	font-size:x-large;
	font-weight:bold;
	padding:30px 3%;	
}
@media screen and (max-width:767px) {	
	#union-success #union-success-header .header-title .br-sp{
		display:block;
		word-break: auto-phrase;
	}
}

#union-success #union-success-header .header-area .left{
	display:grid;
	place-items:center;
}
#union-success #union-success-header .header-area .left img{
	padding:0 0 0 20%;
	width:90%;
}@media screen and (max-width: 939px) {
	#union-success #union-success-header .header-area .left img{
		padding:0;
	}
}

/* ----------------------------------------- */
/* case */
#union-success .shadow{
	filter: drop-shadow(5px 5px 5px #aaa);
}

#union-success h3{
	display:inline-block;
	padding: 0 0 10px 0;	
	font-size:larger;
}@media screen and (max-width:453px) {
	#union-success h3{
		font-size:large;	
	}
	#union-success h3 .br-sp,#union-success .union-success-case .grid-layout .flex-layout .case-box .br-sp{
		display:block;
	}

}

#union-success .union-success-case
{
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:30px;

}@media screen and (max-width: 767px) {
	#union-success .union-success-case{
		padding: 0 0 50px 0;
	}
}
#union-success .union-success-case h2{
	display:inline-block;
	padding:0 30px;
	border-radius:30px;
	color:#fff;
	text-align:center;
	margin:0 40%;
	font-weight:bold;
	font-family: "Noto Sans JP", sans-serif;

}
#union-success .union-success-case .grid-layout{
	width:100%;
	padding:0 5%;
	display:grid;
	grid-template-columns:0.8fr 1fr;
	gap:30px;
	align-items:center;
	overflow:hidden;
}
#union-success .grid-layout-padding{
	padding:0 5%;
}
#union-success .union-success-case .grid-layout .grid-layout-box{
	width:100%;
	display:flex;
	flex-direction:column;
	justify-items:center;
	align-items:center;
	gap:10px;
}
@media screen and (max-width: 767px) {
	#union-success .union-success-case .grid-layout{
		grid-template-columns:1fr;
		justify-content:center;
	}
}
@media screen and (max-width: 458px) {

	#union-success .union-success-case .grid-layout img{
		width:90%;
	}

}

#union-success .union-success-case .grid-layout .flex-name{
	display:flex;
	justify-content:space-around;
	gap:1rem;
}
#union-success .union-success-case .grid-layout .flex{
	display:flex;
	flex-direction:column;
	gap:10px;
}
#union-success .flex-layout{
	width:100%;
}
#union-success-gaiyo .flex-layout{
	padding:30px 3%;
	margin-top:10px;

}
#union-success .flex-layout .case-box{
	width:100%;
	display:grid;
	/* 	grid-template-columns: 93px auto; */
	grid-template-columns: auto auto;
	text-align:left;	
}
#union-success .flex-layout .case-box dt{	
	padding-left:1rem;
}
#union-success .flex-layout .case-box .bo-bm-color{
	border-bottom:solid 2px #70B70B; 
}
#union-success .flex-layout .case-box .bo-bm-color-blue{
	border-bottom:solid 2px #4DCFE0;
}

#union-success .flex-layout .case-box .bo-bm-color:first-child{
	border-top:solid 2px #70B70B; /* green */  
}
#union-success .flex-layout .case-box .bo-bm-color-blue:first-child{
	border-top:solid 2px #4DCFE0; /* blue */
}

#union-success .flex-layout .case-box dd{
	border-bottom:solid 2px #B0B0B0;
	padding-left:1rem;
}@media screen and (max-width: 458px) {
	#union-success .flex-layout .case-box dd {
		padding-left:rem;
	}
}
/* .union-success-case .grid-layout  */
#union-success .flex-layout .case-box dd:first-of-type{
	border-top:solid 2px #B0B0B0;
}


/* ----------------------------------------- */
/* 概要*/
#union-success-gaiyo{
	width:100%;
	display:grid;
	place-items:center;
}
#union-success-gaiyo .gaiyo-list{
	width:100%;
	display:flex;
	flex-direction:row;
	align-items:center;
	margin-bottom:10px;
	background-color:#fff;
	border-radius:5px;
	border:#B0B0B0 1px solid;
	padding:1rem 3%;
}@media screen and (max-width:767px) {
	#union-success-gaiyo .gaiyo-list{
		flex-direction:column;
		gap:10px;
	}
}
#union-success-gaiyo .gaiyo-list img{
	width:70%;
}
#union-success-gaiyo .before-flame{
	background-color:#f1f1f1;

}
#union-success-gaiyo .after-flame{
	background-color:#fdf5e0;

}
#union-success-gaiyo .gaiyo-list .gaiyo-list-item{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:0 0 20px 0;
	position:relative;
}@media screen and (max-width:767px) {
	#union-success-gaiyo .gaiyo-list .gaiyo-list-item{

	}
}
#union-success-gaiyo .gaiyo-list .gaiyo-list-item-tag{
	position:absolute;
	content:"";
	top:0;
	left:0;
	background-color:rgba(255, 255, 153, 0.8);
	padding:3px 10px;
	display:inline-block;
}

#union-success-gaiyo .anime-size{
	width:80px; 
	height:65px;
}@media screen and (max-width:767px) {
	#union-success-gaiyo .anime-size{
		transform:rotate(90deg);
	}
}
/* #union-success-gaiyo .gaiyo-title{
display:flex;
flex-direction:space-around;
}
*/

/* ----------------------------------------- */
/* この記事でわかること */

/* 共通 */
#union-success .waku{
	width:100%;
	max-width:940px;
	display:grid;
	gap:30px;
	padding:30px 0;
}
#union-success .line{
	display:block;
	width:100%;
	height:50px;
}

#union-success .hr-line{
	display:block;
	width:100%;
}

#union-success #union-success-article{
	width:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	/* 	margin:30px 0; */
	margin:15px 0 30px;

}
#union-success #union-success-article article{
	width:100%;
	display:grid;
	gap:80px;
}@media screen and (max-width:767px) {
	#union-success #union-success-article article{
		gap:50px;
	}
}
#union-success .point{
	/* 	max-width:94%; */
	width:100%;
	display:block;
	background-color:#fff;
	position:relative;
	/* 	padding:10px 30px; */
	padding:30px;
	text-align:left;
	margin: 0 3%;
}@media screen and (max-width:767px) {
	#union-success .point{
		padding:10px;
	}
}
#union-success .point .title{
	background-color:#fff;
	padding:0 5px;
	position:absolute;
	content:'';
	top:-15px;
	left:30px;
	display: inline-block;
}
#union-success .point ul{
	padding:10px 0 0 0;
	display:block;
	gap:5px;
}
#union-success .point ul li {
	display: block; /* コンテンツサイズに合わせる */
	width: auto;           /* 100% を解除 */
	margin-bottom: 5px; /* li 間の余白 */
}
/* ----------------------------------------- */
/* 目次 */
#union-success #union-success-article #mokuji{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:30px;
	font-weight:bold;
	z-index:1;
	margin: 0 3%;
}@media screen and (max-width:768px) {
	#union-success #union-success-article #mokuji{
		width:100%;
	}
}

#union-success #union-success-article #mokuji ul{
	display:flex;
	flex-direction:column;
	gap:10px;
}
#union-success #union-success-article #mokuji ul li{
	display:inline;
}

#union-success #union-success-article #mokuji .item{
	display:inline-block;
	align-items: center;
	gap:5px;
}
#union-success #union-success-article #mokuji ul li ul{
	width:100%;
	padding-left:2rem;
	gap:0;
}@media screen and (max-width:767px) {
	#union-success #union-success-article #mokuji ul li ul{
		padding-left:1rem;
	}
}
#union-success #union-success-article #mokuji ul li ul li .label{
	font-size:smaller;
}
#union-success #union-success-article #mokuji .arrow {
	font-size: 0.9em;
	margin-left: auto;
}

#union-success .pipe {
	display: inline-block;
	/*	border-right: solid 2.5px #4DCFE0;/*blue*/
	/* 	border-right: solid 2.5px #70B70B; */

	width: 2px;
	height: 1em;
	margin: 0 0.5em;
	vertical-align: middle;
}
#union-success #union-success-article #mokuji .label {
	display: inline;
}


/* ----------------------------------------- */
/* 記事 */


/* カウンターの初期化 */
#union-success section {
	counter-reset: heading-counter;
}

/* 見出し本体の装飾 */
#union-success section h4 {
	position: relative;
	font-size: x-large;
	text-align: left;
	padding-left: 40px;
}@media (max-width: 768px) {
	#union-success section h4 {
		font-size: large;
	}
}

#union-success section h4::before {
	/* 	content: "";
	width: 30px;
	height: 2px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%); */
	content: "";
	display: block;  
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 30px;   /* 画像と同じサイズ */
	height: 2px;   /* 画像と同じサイズ */
	background: url('https://www.j-union.net/wp-content/uploads/line-30.png') no-repeat center;
	background-size: contain;
}

/* #union-success #title-02-2 h4::before,#union-success #title-03-2 h4::before,#union-success #title-04 h4::before {
height: 3px;
} */


#union-success section .text-indentation{	
	/* 	padding-left: 70px; */
	padding-left: 0px;
}
#union-success section .text-indentation::before{
	width: 0px;
}

#union-success h4.p-medium{
	font-size:larger;
}

#union-success .h4-article{
	display:flex;
	flex-direction:column;
	/* 	align-items:center; */
	gap:50px;
}
#union-success .h4-article-indent{
	/* 	gap:20px; */
}

#union-success .h4-field{
	display:grid;
	/* 	place-items:center; */
	align-items:center;
	gap:15px;
}@media (max-width: 768px) {
	#union-success .h4-field .p-medium{
		/* 		font-size:smaller; */
	}
}
#union-success .aspect-ratio-box{
	width: 70%;           
	position: relative;
	padding-top:42.85%;
	margin:0 auto;
}

#union-success .sentence-text{
	letter-spacing:0.05em;
}@media screen and (max-width:768px) {
	#union-success .sentence-text{
		/* 		padding:0 3%; */
	}
}

#union-success .img-width{
	width: 100%;   
	padding-top: 56.25%;  /* 高さを幅の56.25%にする(9/16) */
}

#union-success .aspect-ratio-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;             /* 親幅いっぱい */
	height: 100%;            /* 親高さいっぱい */
	object-fit: cover;       /* アスペクト比を保ちつつ全体をカバー */
}


#union-success .mokujitext {
	line-height:2rem;
	text-align:left;
}


/* #union-success .step-bar{
display:grid;
grid-template-columns:1fr 1fr 1fr;
}

#union-success .step-bar-item{
display:grid;
gap:5px;
}
#union-success .step-bar-item .step-bar-num{
background-color:#70B70B;
color:#fff;
}
*/
#union-success .steps {	
	display: flex;
	justify-content: center;
	align-items:center;
	flex-wrap: wrap;
	gap: 30px;
	text-align: center;
}
@media screen and (max-width:881px) {
	#union-success .steps {	
		gap: 10px;
	}
}@media screen and (max-width:873px) {
	#union-success .steps {	
		/* 		justify-content:space-around; */
		gap:30px;
	}
}
#union-success .steps .item{
	display:grid;
	gap:10px;
}
#union-success .steps .item p{
	padding-right:20px;
}

#union-success .step {
	/* 	color: #fff; */
	width: 240px;
	height:120px;
	padding: 20px;
	position: relative;
	clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0% 100%);
}

#union-success .step3{
	/* 	clip-path:none; */
}

/* #union-success .step1 {background-color: rgba(112,183,11,0.5);}
#union-success .step2 {background-color: rgba(164,234,76,0.5);}
#union-success .step3 {background-color: rgba(216,255,126,0.5);} */

#union-success .step1 {background-color: rgba(112,183,11,0.5);}
#union-success .step2 {background-color: rgba(164,234,76,0.5);}
#union-success .step3 {background-color: rgba(216,255,126,0.5);}

#union-success .step-header {
	font-weight: bold;
	font-size: 1.2em;
	/* 	color: #fff; */
}
#union-success .step-content{
	position:absolute;
	content:"";
	left:5px;
	display: block;
	/* 	color:#fff; */
}
#union-success .step1 .step-content{ 
	top: 10px;
	left: 25px;
}
#union-success .step2 .step-content{
	top: 13px;
	left: 45px;
}
#union-success .step3 .step-content{ 
	top: 13px;
	left: 35px;
}

#union-success .step-content i {
	font-size: 2em;
	margin-bottom: 10px;
	display: block;
	animation
	gap:20px;
}


/* 問い合わせ */
/*その他と主な共通部分は省略*/
#union-success a.btn--ora.btn--cubic {
	width:100%;
	color:#fff;
	background-color:#FFA500;
	border-bottom: 7px solid #D8D5D0;
	padding:10px; 
	font-weight: bold;
	font-size: larger;
	text-align:center;
}

#union-success a.btn--ora.btn--cubic:hover {
	margin-top: 3px;
	border-bottom: 2px solid #C5B393;
}

#union-success a.btn--radius {
	border-radius: 100vh;
}

#union-success .fa-position-right {
	position: absolute;
	top: calc(50% - .5em);
	right: 1rem;
}

#union-success .custom-pages {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
}@media screen and (max-width: 767px) {
	/* @media screen and (max-width:811px) { */
	#union-success .custom-pages {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}
#union-success .custom-posts .post-item {
	/* 	height: 310px; */
	overflow: hidden; /* はみ出た部分を隠す */
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap:20px;
	position:relative;
}

#union-success .custom-posts .post-excerpt{
	font-size:small;
}
#union-success .custom-posts .post-item{
	word-break: break-all;
}
#union-success .custom-posts .post-item img {
	width: 100%;
	height: 200px; /* 画像部分の高さ */
	object-fit: cover; /* ボックスいっぱいに収めつつ切り抜き */
	display: block;
}@media screen and (max-width:767px) {
	#union-success .custom-posts .post-item img {
		/* 		width: 90%;
		height:220px; */
	}
}
#union-success .custom-posts .post-item .tag-distribute{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap:10px;
	position:relative;
}
#union-success .custom-posts .post-item .tag-distribute .post-tags{
	position:absolute;
	content:"";
	bottom:0 px;
	left:0;	
}

#union-success .custom-posts img {
	width: 100%; /* ボックス幅に合わせる */
	display: block; /* 下の隙間をなくす */
}

#union-success .custom-pages .page-item {
	width: 45%;
	text-align: center;
}

#union-success .custom-pages .custom-thumbnail {
	max-width: 100%;
	height: auto;
}

#union-success .blank{
	gap:30px;
}