@charset "UTF-8";
/*次階層専用*/


/*========/ 共通 /========*/
main{ padding:80px 0 100px; }
body > main{ width:calc( 100% - 120px ); margin:0 60px; }

.column{ width:calc( 100% - 120px ); margin:0 60px; display:flex; justify-content: space-around; }
.column main{ min-width:calc( 100% - 340px ); }
.column aside{ min-width:259px; max-width:259px; margin-left:50px; padding-left:30px; border-left:1px rgba( 0,0,0,.1 ) solid; }
.column aside section{ padding:80px 0; position: sticky; top: 0; }

.column aside h2{ padding:3px 20px 5px; color:#fff; font-size:16px; font-size:1.6rem; font-weight:400; background:#5aa3b8; }
.column aside ul{ list-style:none; }
.column aside ul li{ margin-top:25px; }
.column aside ul li a{ padding-left:1.5em; display:block; color:#000; font-weight:500; position: relative; }
.column aside ul li a::before{
	content:"";
	width:8px;
	height:8px;
	display:inline-block;
	border-radius:50%;
	text-align:center;;
	background:#5aa3b8;
	transition: all .3s ease;
	position: absolute;
	top:8.5px;
	left:0;
}
aside ul li a:hover::before{ background:#e5e647; }

@media screen and (max-width: 1170px) {
	main{ padding:40px 0 60px; }
	body > main{ width:calc( 100% - 40px ); margin:0 20px; }
	.column{ width:calc( 100% - 40px ); margin:0 20px; display:flex; justify-content: space-around; }
	.column{ flex-direction: column-reverse; }
	.column aside{ min-width:100%; max-width:100%; margin-left:0; padding-left:0; border-left:none; border-bottom:1px rgba( 0,0,0,.1 ) solid; }
	.column aside section{ padding:20px 0; position: relative; }
	.column aside ul li{ margin: 10px 1.5em 0 0; display:inline-block; }
}



/*==/ ページタイトル /==*/
.mainTitle {
	width: 100%;
	height: 330px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
}
.mainTitle h1{
	color:#fff;
	font-size:40px;
	font-size:4.0rem;
	font-weight:400;
	position: absolute;
	left:80px;
	bottom:70px;
}

.aboutus .mainTitle { background-image: url(../../aboutus/img/main.png) }/* キャビネット工業会について */
.private .mainTitle { background-image: url(../../private/img/main.png) }/* 会員専用サイト */
.faq .mainTitle { background: #ecedef url(../../qa/img/main.png) no-repeat; background-position: right 10% bottom; }/* よくある質問 */
.faq .mainTitle h1{ color:#19244a; }
.contact .mainTitle,/* お問い合わせ */
.use .mainTitle,/* サイトポリシー */
.sitemap .mainTitle,/* サイトマップ */
.member .mainTitle { background-image: url(../../member/img/main.png) }/* 入会のご案内 */
.Topics .mainTitle,/* トピックス */
.technical .mainTitle { background-image: url(../../technical/img/main.png) }/* 公開技術資料 */

main h2:not(.cmsText) {
	margin-bottom:60px;
	color:#19244a;
	font-size:18px;
	font-size:1.8rem;
}
main h2 span{
	display:block;
	color:#5aa3b8;
	font-size:26px;
	font-size:2.6rem;
	letter-spacing: 0.1em;
	font-family: Oswald, sans-serif;
}
main h2 span::after{
	content:"";
	width:66px;
	height:2px;
	display:inline-block;
	background:#5aa3b8;
	position: relative;
	left:1em;
	top:-.3em;
}


@media screen and (max-width: 760px) {
	main h2{ margin-bottom:30px; }
}
@media screen and (max-width: 660px) {
	.mainTitle h1{ font-size:34px; font-size:3.4rem; left:50px; }
}
@media screen and (max-width: 520px) {
	.mainTitle h1{ font-size:30px; font-size:3.0rem; left:30px; }
}
@media screen and (max-width: 500px) {
	.mainTitle { height: 220px; }
	.mainTitle h1{ font-size:24px; font-size:2.4rem; left:20px; bottom:35px; }
}


/*========/ キャビネット工業会について /========*/
.aboutus{  }

/* 事業紹介 */
.aboutus #business{ margin-bottom:80px; }
.aboutus #business > div{ display:flex; justify-content: space-between; }
.aboutus #business > div p{ font-size:18px; font-size:1.8rem; font-weight:300; }
.aboutus #business > div ul{ max-width:580px; list-style:none; }
.aboutus #business > div ul li{ padding-left:30px; border-left:2px #5aa3b8 solid; }
.aboutus #business > div ul li + li{ margin-top:30px; }
.aboutus #business > div ul li span{
	margin-bottom:15px;
	display:block;
	color:rgba( 0,0,0,.3 );
	font-size:14px;
	font-size:1.4rem;
	font-weight:700;
	font-family: Oswald, sans-serif;
}
.aboutus #business > div ul li strong{ display:block; }

@media screen and (max-width: 760px) {
	.aboutus #business > div{ display:block; }
	.aboutus #business > div p{ margin-bottom:20px; }
	.aboutus #business > div p br{ display:none; }
}


/* 組織図 */
.aboutus #organization{ margin-bottom:80px; }
.aboutus #organization p{ margin-left:90px; position: relative; }
.aboutus #organization p span{ display:block; font-size:14px; font-size:1.4rem; position: absolute; top:0; right:0; }

@media screen and (max-width: 770px) {
	.aboutus #organization p{ margin-left:0; }
}

/* 沿革 */
.aboutus #history{ margin-bottom:80px; }
.aboutus #history ol{ list-style:none; }
.aboutus #history > ol > li{
	display:flex;
	border-bottom:1px rgba( 0,0,0,.1 ) solid;
}
.aboutus #history li span{
	min-width:7em;
	padding:15px 0;
	display:block;
	text-align:center;
	color:#fff;
	font-size:14px;
	font-size:1.4rem;
	background:#5aa3b8;
}
.aboutus #history li ol{ padding:10px 0; }
.aboutus #history li dl{ padding:0 15px; display:flex; }
.aboutus #history li dt{
	min-width:3em;
	padding:5px 20px 5px 0;
	color:#5aa3b8;
	text-align:right;
	font-size:14px;
	font-size:1.4rem;
	font-weight:700;
}
.aboutus #history li dd{ padding:5px 0; }

@media screen and (max-width: 550px) {
	.aboutus #history > ol > li{ display:block; }
	.aboutus #history li span{ padding:8px 0; }
	.aboutus #history li dt{ min-width:2.5em; }
}


/* 定款 */
.aboutus #aoi{ margin-bottom:80px; }
.aboutus #aoi > div{ display:flex; justify-content: space-between; }
.aboutus #aoi p span{
	margin-top:8px;
	display:block;
	color:rgba( 0,0,0,.4 );
	font-size:14px;
	font-size:1.4rem;
	font-weight:700;
}
.aboutus #aoi .btn a{
	min-width:280px;
	padding:15px 0;
	display:block;
	border-radius:30px;
	box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.6);
	text-align:center;
	color:#fff;
	font-weight:600;
	background:#19244a;
	position: relative;
}
.aboutus #aoi .btn a::after{
	content:"\e907";
	font-size:13px;
	font-family: "icomoon";
	position:absolute;
	right:60px;
	top:18px;
}
.aboutus #aoi .btn a:hover{ color:#fff; background:#5aa3b8; }

@media screen and (max-width: 700px) {
	.aboutus #aoi > div{ display:block; }
	.aboutus #aoi .btn a{ margin-top:20px; }
}


/* 関連団体 */
.aboutus #related{ margin-bottom:80px; }
.aboutus #related ul{ border-top:1px rgba( 0,0,0,.1 ) solid; list-style:none; }
.aboutus #related ul li{ padding:15px 0; border-bottom:1px rgba( 0,0,0,.1 ) solid; }
.aboutus #related ul li a{
	color:#000;
	font-size:18px;
	font-size:1.8rem;
	display:block;
	position: relative;
}
.aboutus #related ul li a::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-left:1em;
	display: inline-block;
	border-top: solid 1px #bfbfbf;
	border-right: solid 1px #bfbfbf;
	transition: all 0.2s ease-in-out;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	right:10px;
	top:45%;
}
.aboutus #related ul li a:hover{ color:#5aa3b8; }
.aboutus #related ul li a:hover::after { border-color:#5aa3b8; }
.aboutus #related ul li span{
	display:block;
	color:rgba( 0,0,0,.5 );
	font-size:14px;
	font-size:1.4rem;
	font-weight:700;
	transition: all 0.3s;
}
.aboutus #related ul li a:hover span{ color:#5aa3b8; }

/* 会員紹介 */
.aboutus #member{ margin-bottom:80px; }
.aboutus #member dl{ padding:15px 0; display:flex; border-bottom:1px rgba( 0,0,0,.1 ) solid; }
.aboutus #member dl:first-of-type{ border-top:1px rgba( 0,0,0,.1 ) solid; }
.aboutus #member dl dt{ min-width:300px; font-size:18px; font-size:1.8rem; }
.aboutus #member dl dd{ font-size:14px; font-size:1.4rem; }
.aboutus #member dl dd span{ color:rgba( 0,0,0,.5 ); font-weight:700; }
.aboutus #member dl dd span a{ color:rgba( 0,0,0,.5 ); }
.aboutus #member dl dd span a:hover{ color:#5aa3b8; }

@media screen and (max-width: 660px) {
	.aboutus #member dl{ display:block; }
}


/* 団体概要 */
#outline{  }
#outline dl{ padding:15px 0; display:flex; border-bottom:1px rgba( 0,0,0,.1 ) solid; }
#outline dl:first-of-type{ border-top:1px rgba( 0,0,0,.1 ) solid; }
#outline dl dt{ min-width:170px; color:#5aa3b8; font-size:15px; font-size:1.5rem; font-weight:700; }

@media screen and (max-width: 660px) {
	#outline dl{ display:block; }
}


/*========/ トピックス /========*/
.Topics{  }

/*20230720misa*/
.Topics .cmsText img[src$=".pdf"] { display:none; }

/*一覧*/
.Topics .list ul{
	max-width:1220px;
	margin:30px auto;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
}
.Topics .list ul li{
	width:295px;
	margin:0 10px 10px 0;
	border:1px #bfbfbf solid;
	border-radius:3px;
	box-shadow: 0px 0px 8px -5px rgba(0,0,0,0.4);
	box-sizing: border-box;
	background:#fff;
	overflow:hidden;
}
.Topics .list ul li a{ color:#19244a; }
.Topics .list ul li a:hover{ color:#5aa3b8; }
.Topics .list ul li figure > span{ width:100%; max-height:218px; display:block; text-align:center; overflow:hidden; }
.Topics .list ul li figure > span img{ width:100%; max-height:auto; }
.Topics .list ul li figcaption{ padding:10px; }
.Topics .list ul li figcaption span{ display:block; font-size:14px; font-size:1.4rem; font-weight:600; }

/*詳細*/
.Topics article > h3{
	margin:50px 0 25px;
	padding:5px 30px 8px;
	border-radius:5px;
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	font-weight:400;
	background:#5aa3b8;
}
.Topics article > h3 + p{
	text-align:right;
	color:rgba( 0,0,0,.3 );
	font-weight:700;
	font-family: Oswald, sans-serif;
}
.Topics article > section{
	min-height:200px;
	margin:30px 0 15px;
	padding:30px 0;
	border-top: 1px rgba( 0,0,0,.1 ) solid;
	border-bottom: 1px rgba( 0,0,0,.1 ) solid;
}
.Topics article .btn{
	text-align:center;
}

@media screen and (max-width: 660px) {
	.Topics article > h3{ padding:2px 15px 5px; }
}

/*cmsText*/
.cmsText h1{ margin:10px 0; font-size:36px; }
.cmsText h2{ margin:10px 0; font-size:30px; }
.cmsText h3{ margin:10px 0; font-size:24px; }



/*========/ 公開技術資料 /========*/
.technical{  }
.technical section dl{
	margin-bottom:25px;
	padding-bottom:25px;
	border-bottom:1px rgba( 0,0,0,.1 ) solid;
}
.technical section dt{
	margin-bottom:.5em;
	color:#02444f;
	font-size:18px;
	font-size:1.8rem;
	font-weight:600;
	cursor: pointer;
}
.technical section dt{ padding-left:1.25em; text-indent:-1.25em; }
.technical section dt a:before{
	content: "\f1c1";
	margin-right:.5em;
	color:#19244a;
	font-weight:700;
	font-family: "Font Awesome 5 Free";
}
.technical section dt.new a:after{
	content: "【NEW】";
	margin-left:.5em;
	color:#ff001e;
	font-size:15px;
	font-size:1.5rem;
	font-weight:700;
	font-family: Oswald, sans-serif;
}
.technical section dd{ margin-left:1.45em; }
.technical section .size{
	color:rgba( 0,0,0,.3 );
	font-weight:700;
	font-family: Oswald, sans-serif;
}


/*========/ よくある質問 /========*/
.faq{  }
.faq main h3{
	margin:50px 0 25px;
	padding:5px 30px 8px;
	border-radius:5px;
	color:#fff;
	font-size:18px;
	font-size:1.8rem;
	font-weight:400;
	background:#5aa3b8;
	transition: all .3s ease;
}
.faq main .faqTitle.active{
	width:calc( 100% - 520px );
	position:fixed;
	top:26px;
	z-index:100;
}
.faq main .faq-title span{
	margin-left:.5em;
	color:#ff001e;
	font-weight:700;
	font-family: Oswald, sans-serif;
}
.faq main section dl{
	margin-bottom:25px;
	padding-bottom:25px;
	border-bottom:1px rgba( 0,0,0,.1 ) solid;
	cursor: pointer
}
.faq main section dt{
	color:#02444f;
	font-size:18px;
	font-size:1.8rem;
	font-weight:600;
	cursor: pointer;
}
.faq main section dt::after {
	content: "";
	width: 5px;
	height: 5px;
	margin-left:1em;
	display: inline-block;
	border-top: solid 2px #02444f;
	border-right: solid 2px #02444f;
	transition: all 0.2s ease-in-out;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: relative;
	top:-2px;
}

.faq main section dt.open::after {
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.faq-content {
	padding-top:35px;
	display: none;
}
.faq main section dd p + p{ margin-top:1em; }

@media screen and (max-width: 1170px) {
	.faq main .faqTitle.active{ width:calc( 100% - 100px ); }
}
@media screen and (max-width: 660px) {
	.faq main h3{ padding:2px 15px 5px; }
	.faq main .faqTitle.active{ width:calc( 100% - 70px ); }
}

/*========/ 入会のご案内 /========*/
.member{  }

/* 入会案内 */
.member #rule{ margin-top:70px; display:flex; justify-content: space-between; }
.member #rule p{ min-width:25%; max-width:25%; font-size:18px; font-size:1.8rem; font-weight:300; }
.member #rule > ul{ min-width:75%; max-width:75%; list-style:none; }
.member #rule > ul > li{ padding-left:30px; border-left:2px #5aa3b8 solid; }
.member #rule > ul > li + li{ margin-top:30px; }
.member #rule > ul li > span{
	margin-bottom:15px;
	display:block;
	color:rgba( 0,0,0,.3 );
	font-size:14px;
	font-size:1.4rem;
	font-weight:700;
}
.member #rule > ul li > span span{ margin-right:1em; font-family: Oswald, sans-serif; }
.member #rule ul li strong{ display:block; }
.member #rule ul li ol{ margin-left:1.0em; }
.member #rule ul li ol li + li{ margin-top:.5em; }
.member #rule h3{ margin:30px 0 1em; font-size:16px; font-size:1.6rem; font-weight:400; }

.member #rule table{ width:100%; }
.member #rule table th{ color:#fff; font-weight:500; background:#5aa3b8; }
.member #rule table,
.member #rule table tbody,
.member #rule table th,
.member #rule table td{
	margin:0;
	padding:5px 20px;
	border: 1px #ddd solid;
	outline:0;
	text-align:center;
	vertical-align: middle;
}

@media screen and (max-width: 760px) {
	.member #rule{ margin-top:30px; display:block; }
	.member #rule p{ width:auto; margin-bottom:20px; }
	.member #rule p br{ display:none; }
	.member #rule > ul{ min-width:100%; max-width:100%; }
	.member #rule table{ font-size:1.4rem; }
	.member #rule table,
	.member #rule table th,
	.member #rule table td{ padding:5px 10px; }
}

/* 入会申込書 */
.member .pdf{
	max-width:1200px;
	margin:70px auto 0;
	padding:30px 40px;
	display:flex;
	justify-content: space-between;
	color:#fff;
	background:#5aa3b8;
}
.member .pdf p{ font-size:18px; font-size:1.8rem; font-weight:300; }
.member .pdf p span{
	margin-top:8px;
	display:block;
	font-size:14px;
	font-size:1.4rem;
	font-weight:700;
}
.member .pdf .btn a{
	min-width:280px;
	padding:15px 0;
	display:block;
	border-radius:30px;
	box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.6);
	text-align:center;
	color:#fff;
	font-size:16px;
	font-size:1.6rem;
	font-weight:600;
	background:#19244a;
	position: relative;
}
.member .pdf .btn a::after{
	content:"\e907";
	font-size:13px;
	font-family: "icomoon";
	position:absolute;
	right:60px;
	top:18px;
}
.member .pdf .btn a:hover{ color:#19244a; background:#fff; }

@media screen and (max-width: 700px) {
	.member .pdf{ padding:20px; display:block; }
	.member .pdf .btn a{ min-width:100%; margin-top:20px; }
	.member .pdf .btn a::after{ right:30px; }
}


/*========/ お問い合わせ /========*/
.contact #mail{ margin-bottom:80px; }
.contact #mail p + p{ margin-top:2em; }


/*========/ サイトポリシー /========*/
.use .wrap{ margin-bottom:40px; padding-bottom:40px; border-bottom:1px rgba( 0,0,0,.1 ) solid; }
.use #browser ul{ margin:1em 0 1em 1.5em; }
.use #browser p + p{ margin-top:1em; }
.use #contact p + p{ margin-top:2em; }
.use ol{ margin:1em 0 1em 1.5em; }


/*========/ サイトマップ /========*/
.sitemap{  }
.sitemap ul{ list-style:none; }
.sitemap section > ul > li{
	padding:20px 0;
	border-bottom: 1px rgba( 0,0,0,.1 ) solid;
}
.sitemap section > ul > li::before {
	content: "";
	width: 5px;
	height: 5px;
	margin-right:1em;
	display: inline-block;
	border-top: solid 2px rgba( 0,0,0,.2 );
	border-right: solid 2px rgba( 0,0,0,.2 );
	transition: all 0.2s ease-in-out;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: relative;
	top:-2px;
}

.sitemap section > ul > li ul{ margin-left:1.5em; }
.sitemap section > ul > li li{ display:inline-block; }
.sitemap section > ul > li li + li::before{ content:"/ "; }