/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
:root {
    --white:#ffffff;
    --black:#191919;
    --l_black:#333333;
    --ll_black:#c2bfaf;
    --ll_black_a:#ccc;
    --gray:#d9d9d9;
    --bd_gray:#dddbdb;
    --bg_gray:#f0f0f0;
    --bg_d_gray:#f6f6f6;
    --l_gray:#eeeeee;
    --d_gray:#8a8a8a;
    --dd_gray:#464646;
    --red:#ff0000;
    --d_red:#a53a3a;
    --yellow:#ffff99;
    --d_yellow:#bb8210;
    --blue:#428bca;
    --d_blue:#163b84;
    --l_green:#eff5e8;
    --green:#74b52a;
    --d_green:#008000;
    --violet:#8243c4;
    --d_violet:#58278c;
    --sky:#5ec2d2;
    --brown:#f8f7f2;
}

/*------------------------------------------------*/
/*-------------------- common --------------------*/
/*------------------------------------------------*/
html, body{
	width:100%;
	height:100%;
	margin:0 auto;
	padding:0;
    font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0;
	color:var(--l_black);
	box-sizing:border-box;
	/* scroll-behavior:smooth; */
}
h1, h2, h3, h4, h5, h6, p{
	margin:0;
}
a:link, a:visited {
	color: var(--blue);
	text-decoration: underline;
	cursor: pointer;
}
a:hover, a:active {
	color: var(--ll_black_a);
	text-decoration: none;
	cursor: pointer;
}
img{
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
ul{
	margin:0;
	padding:0;
	
	li{
		list-style:none
	}
}
.error{
	background-color:#ffcdcd;
}

/*---------- デフォルトスタイルのリセット ----------*/
input, textarea{
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}
select, button{
	border:none;
	border-radius:0;
	cursor:pointer;
	outline:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

/*---------- disabled ----------*/
input:disabled, textarea:disabled, select:disabled{
	background-color:var(--gray);
}

/*---------- responsive ----------*/
@media(max-width:768px){
	.pc{
		display:none !important;
	}
}
@media(min-width:769px){
	.sp{
		display:none !important;
	}	
}

/*---------- customer css ----------*/
.t_green {
	color: var(--green) !important;
}
.t_bold {
	font-weight: bold !important;
}
.f24 {
	font-size: 24px !important;
}
.mt_20 {
	margin-top: 20px !important;
}
.t_red {
	color: var(--red) !important;
}
.t_underline {
	text-decoration: underline !important;
}
.t_d_green {
	color: var(--d_green) !important;
}
.f18 {
	font-size: 18px !important;
}
.bg_color_yellow {
	background-color: var(--yellow) !important;
}
.mb_55 {
	margin-bottom: 55px !important;
}

/*---------- loading ----------*/
.loading{
	display:none;
}	
.loading.active{
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.5);
	z-index:9999;
	
	span{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		width:100%;
		text-align:center;

		i{
			font-size:50px;
			color:var(--white);
		}
	}
}


/*--------------------------------------------------*/
/*-------------------- paginate --------------------*/
/*--------------------------------------------------*/
.pagination{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:10px;
	margin:30px 0 0;
	font-size:0;
	text-align:center;
	
	li{
		span{
			display:block;
			padding:5px 15px;
			font-size:14px;
			color:var(--black);
			border:1px solid var(--gray);
		}
		a{
			display:block;
			padding:5px 15px;
			font-size:14px;
			text-decoration:none;
			color:var(--black);
			border:1px solid var(--gray);
		}
		a:hover{
			background-color:var(--l_gray);
		}
	}
	li.disabled{
		/* background-color:@gray; */
	}
	li.active{
		span{
			color:var(--white) !important;
			background-color:var(--green) !important;
			border:1px solid var(--gray) !important;
		}
	}
	li:last-child{
		margin:0;
	}
}


/*------------------------------------------------------*/
/*---------------------- alertify ----------------------*/
/*------------------------------------------------------*/
.alertify-logs{
	top:50px;
	right:10px !important;
	bottom:auto !important;
	width:auto !important;
	/* min-width:200px !important; */
	
	article{
		padding:20px !important;
		font-size:16px !important;
		font-weight:bold;
		border-radius:5px !important;
		text-shadow:none !important;
		line-height:1.3 !important;
		box-shadow:3px 3px 6px 1px rgba(0, 0, 0, 0.5);
	}
	.alertify-log-success{
		background-color:var(--d_green) !important;
	}
	.alertify-log-error{
		background-color:var(--d_red) !important;
	}
}

/*---------- modal-window ----------*/
.alertify{
	top:10% !important;
	border:5px solid var(--l_black) !important;
	border-radius:0 !important;
}
.alertify-dialog{
	padding:20px !important;
}
.alertify-inner{
	p{
		display:flex;
		justify-content:center;
		margin:0 0 15px !important;
		text-align:left;
	}
	hr{
		border-top:1px solid var(--dd_gray);
	}
}
/*---------- modal-back ----------*/
.alertify-cover{
	background-color:var(--black) !important;
	opacity:0.5 !important;
}

/*---------- confirm-btn ----------*/
.alertify-button{
	background-image:none !important;
	border:none !important;
	border-radius:0 !important;
	text-shadow:none !important;
	box-shadow:none !important;
}
.alertify-button-cancel, .alertify-button-cancel:hover, .alertify-button-cancel:focus{
	background-color:var(--red) !important;
}
.alertify-button-ok, .alertify-button-ok:hover, .alertify-button-ok:focus{
	background-color:var(--green) !important;
}


/*------------------------------------------------*/
/*-------------------- header --------------------*/
/*------------------------------------------------*/
.site_title {
    padding: 5px 0;
    background: var(--dd_gray);
    color: var(--white);
    width: 100%;
    font-size: 12px;

	.global_inner {
		display: block;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 1%;
	}
}
.global_header_main {
    max-width: 1048px;
    margin: 0 auto;
    margin-top: 11px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.logo {
		margin: 20px 0;

		img {
			max-width: 100%;
			height: auto;
			vertical-align: top;
		}
	}

	.header_contact_buttun_tel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
		gap: 20px;

		.header_tel_contact {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 20px;

		}

		.header_tel_contact_tel {
			display: flex;
		}

		.header_tel_contact_time {
			width: 200px;
		}
		.global_nav {

			ul {
				margin: 0;
				padding: 0;
				display: flex;
				gap: 20px;

				a {
					display: block;
					padding: 20px 13px 25px 13px;
					text-decoration: none;
					color: var(--l_black);
				}

				a:hover {
					color: var(--ll_black_a);
				}
			}
		}
	}
}

/*------------------------------------------------*/
/*-------------------- footer --------------------*/
/*------------------------------------------------*/
.global_footer {

	.global_footer_buttun_area {
		padding-bottom: 50px;
		position: relative;

		.footer_buttun_area_text {
			padding: 50px 0;
			text-align: center;
			z-index: 20;
            position: relative;
		}

		strong {
			font-size: 24px;
			display: block;
			margin-bottom: 30px;
			z-index: 20;
            position: relative;
		}

		.footer_buttun_area_buttun {
			max-width: 1010px;
			margin: 0 auto;
			z-index: 20;
            position: relative;
			display: flex;
			justify-content: space-between;

			img {
				width: 100%;
			}
		}
	}

	.global_footer_buttun_area::before {
		content: "";
        background: url("/images/hp/0-footer-back.webp") no-repeat;
        background-position: center;
        background-size: cover;
        position: absolute;
        height: 100%;
        top: 0;
		left: 0px;
        width: 100%;
        z-index: 10;
	}

	.global_footer_nav {
		max-width: 1100px;
		margin: 50px auto;

		.menu_list {
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
			justify-content: flex-start;
		}
	}

	.copyright {
		padding: 55px 0px;
		background-color: var(--brown);
		position: relative;

		.logo_address {
			max-width: 800px;
			margin: 0 auto;
			display: flex;
			align-items: center;

			.copyright_box {
				width: 50%;
			}

			.copyright_box.address {
				padding-left: 50px;
				border-left: 1px solid var(--gray);
			}
		}

		.take_btn {
			position: absolute;
			bottom: 20px;
			right: 20px;

			img {
				width: 70px;
			}
		}
	}
}

/*------------------------------------------------*/
/*--------------------- home ---------------------*/
/*------------------------------------------------*/
.top_mv {
	position: relative;

	img {
		width: 100%;
		position: relative;
		z-index: 20;
	}

	.top_title {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
}

.main_container_contents {
	max-width: 960px;
	margin: 0 auto;
    margin-top: 33px;
    padding-bottom: 95px;

	.top_title {
		margin-bottom: 90px;
    	text-align: center;

		img {
			max-width: 715px;
		}

		p {
			text-align: center;
			margin-top: 23px;
		}
	}

	.top_service_link {
		margin-bottom: 100px;

		.service_link_list{

			ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				li {
					width: 31%;
					margin: 0 1% 20px;

					img {
						max-width: 100%;
						height: auto;
						vertical-align: top;
					}
				}
			}
		}

		.service_link_list_02 ul li {
			width: 48%;
			margin: 0 1%;
		}
	}

	.top_about_service {
		display: flex;
		gap: 20px;

		.about_service {
			width: 33%;

			img {
				max-width: 100%;
				height: auto;
				vertical-align: top;
				margin-bottom: 30px;
			}

			h4 {
				font-weight: bold;
				font-size: 18px;
				text-align: center;
				margin-bottom: 30px;
			}

			a {
				text-decoration: none;

				.top_about_service_buttun {
					color: var(--green);
					padding: 14px 15px;
					border: 1px solid var(--green);
					border-radius: 5px;
					margin-top: 20px;
					text-align: center;
					
					span {
						position: relative;
						padding-left: 15px;
						font-weight: bold;
						text-align: center;
					}

					span:before {
						content: "";
						position: absolute;
						left: 0;
						bottom: 0;
						top: 0;
						margin: auto 0;
						width: 0;
						height: 0;
						border-top: 6px solid transparent;
						border-bottom: 6px solid transparent;
						border-left: 7px solid var(--green);
						
					}
				}
			}
		}
	}

	.top_feelsafe {
		margin-top: 100px;
		padding: 40px 80px;
		background-color: var(--l_green);

		h2 {
			margin-bottom: 30px;
			text-align: center;
			font-weight: bold;
			font-size: 30px;
		}

		.top_feelsafe_box {
			display: flex;
			justify-content: space-between;

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

	.top_blog_area {
		margin-top: 100px;
		width: 100%;

		.blog_area_title {
			margin-bottom:20px;
			border-bottom: 1px solid var(--gray);
			display: flex;
			justify-content: space-between;
			align-items: baseline;

			.box_left {
				display: flex;
				gap: 10px;
				align-items: baseline;

				h2 {
					color: var(--ll_black);
					font-size: 42px;
					font-family: serif;
					display: inline-block;
					font-weight: normal;
				}
			}

			a {
				font-weight: bold;
				text-decoration: none;
			}
		}
	}
}

/*------------------------------------------------*/
/*--------------------- about --------------------*/
/*------------------------------------------------*/
.page_title_container {
    background-color: var(--bg_gray);

	.page_title_mv {
		max-width: 960px;
		margin: 0 auto;
		background-color: var(--white);
		display: flex;
		justify-content: space-between;
		height: 243px;

		.page_title {
			float: left;
			width: 39%;
			padding-left: 40px;
			padding-top: 40px;
			box-sizing: border-box;

			h1 {
				font-size: 30px;
				font-weight: bold;
				border-bottom: 3px solid var(--green);
				display: inline-block;
			}

			p {
				margin-top: 34px;
			}
		}

		.page_mv {
			width: 54%;
			position: relative;
		}

		.page_mv::after {
			content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to left, transparent 75%, white 100%);
            pointer-events: none;
		}
	}
}

.main_contents_container {
    max-width: 740px;
    margin: 0 auto;
    margin-top: 33px;
    padding-bottom: 95px;

	h2.style_title {
		margin: 100px 0 25px 0;
		padding: 12px 20px;
		background: var(--bg_d_gray);
		font-size: 24px;
		font-weight: bold;
		clear: both;
		color: #333;
		border-left: 5px solid var(--green);
	}

	h3.style_title {
		margin: 50px 0 10px;
		padding-bottom: 15px;
		font-size: 22px;
		font-weight: bold;
		clear: both;
		color: var(--green);
		border-bottom: 1px solid var(--green);
	}

	.main_content:first-child {
		
		.style_title {
			margin: 0 0 25px 0;
		}
	}

	.text_img_block {

		.text_box_right {
			float: right;
			width: 40%;
			margin: 0 0 20px 20px;
		}
	}

	p {
		margin-bottom: 30px;
	}

	.img_block {
		margin-bottom: 30px;
	}

	.name_avata_block {
		display: flex;
		align-items: center;

		.avata {
			width: 40%;
			margin: 0 20px 20px 0;
		}

		.name {
			margin: 100px 0 0 0;
		}
	}
}

/*------------------------------------------------*/
/*------------------- business -------------------*/
/*------------------------------------------------*/

.main_contents_container {

    .list_block {
        border-top: 1px solid var(--green);
		border-bottom: 1px solid var(--green);
		padding: 30px 20px;
		margin-bottom: 34px;

		li {
			position: relative;
			margin-bottom: 20px;
			padding-left: 20px;
			font-size: 12pt;
			font-weight: bold;
		}

		li:before {
			content: " ";
			display: block;
			position: absolute;
			top: 8px;
			left: 3px;
			width: 8px;
			height: 8px;
			background: var(--green);
			border-radius: 100%;
		}
    }

	.check_block {
		padding: 30px 20px;
		border: 1px solid var(--bd_gray);
		margin-bottom: 100px;

		li {
			background: url("/images/hp/check.webp") no-repeat left 4px;
			padding: 0 0 0 30px;
			margin: 0 0 20px;
		}
	}
}

/*------------------------------------------------*/
/*----------------- about-office -----------------*/
/*------------------------------------------------*/
.about_office_boxs {

	.about_office_box {
		display: flex;
		border-bottom: 1px solid;
		padding: 34px 0;
		border-bottom: 1px solid var(--bd_gray);
		font-size: 16px;

		h5 {
			font-weight: bold;
			color: var(--green);
			width: 35%;
			font-size: 100%;
		}

		p {
			font-weight: normal;
			font-size: 100%;
			margin-bottom: 0;
		}
	}
}

/*------------------------------------------------*/
/*-------------------- access --------------------*/
/*------------------------------------------------*/
.address_access_boxs {
    display: flex;
    gap: 30px;

	.address_access_box {
		width: 50%;

		h6 {
			font-size: 100%;
			color: var(--green);
			padding-bottom: 15px;
			border-bottom: 1px solid var(--bd_gray);
		}

		p {
			margin-top: 20px;
		}
	}
}
.access_map_box {
	margin-bottom: 80px;

	iframe {
		width: 100%;
		height: 600px;
		border: none;
	}
}
.access_detail {
    display: flex;
	flex-wrap: wrap;
	align-items: flex-start;

	.access_detail_boxs {
		display: flex;
		align-items: center;
		width: 50%;

		.access_detail_box {

			img {
				margin-bottom: 20px;
			}
		}

		.access_yajirusi {
			min-width: 24px;
            margin: -30px 20px 0;

			img {
				width: 100%;
			}
		}
	}
}

/*------------------------------------------------*/
/*------------------- support --------------------*/
/*------------------------------------------------*/
.main_contents_container {

    .main_content {

		.text_block {

			ol, ul {
				list-style: none;
			}

			.style_ol_1 {
				padding: 0;
				margin: 0;

				li {
					position: relative;
					counter-increment: number;
					margin-bottom: 20px;
					padding-left: 25px;
				}

				li:before {
					content: counter(number);
					display: block;
					position: absolute;
					top: 3px;
					left: 0;
					width: 15px;
					height: 15px;
					text-align: center;
					font-size: 15px;
					font-weight: bold;
					color: var(--green);
					line-height: 1.5em;
				}

				li:last-child {
					margin-bottom: 0;
				}
			} 

			.style_ol_2 {
				padding: 0;
				margin: 0;

				li {
					position: relative;
					counter-increment: number;
					margin-bottom: 20px;
					padding-left: 25px;
				}

				li:before {
					content: counter(number)". ";
					display: block;
					position: absolute;
					top: 3px;
					left: 0;
					width: 15px;
					height: 15px;
					text-align: center;
					font-size: 15px;
					font-weight: bold;
					color: var(--green);
					line-height: 1.5em;
				}
			}
		}
	}
}
.siteLink_post{
	a{
		word-break:break-all;
	}
}

/*------------------------------------------------*/
/*-------------------- office --------------------*/
/*------------------------------------------------*/
.text_img_flexs {

	.text_img_flex {
		display: flex;
		gap: 20px;
		margin-bottom: 20px;

		.left {
			max-width: 300px;
		}
	}
}

/*------------------------------------------------*/
/*------------------ blog lists ------------------*/
/*------------------------------------------------*/
.blogLists_main {
    max-width: 960px;
    margin: 0 auto;
    margin-top: 33px;
    padding-bottom: 95px;
	/* display: flex;
	gap: 10px; */

	.blogLists {
		/* width: 77%; */

		.title {
			margin-bottom: 30px;

			h1{
				display: inline-block;
				font-size:30px;
				border-bottom:3px solid var(--green)
			}
		}
	}

	.blogLists_side {
		width: 200px;

		.widget_categories {
			background-color: var(--bg_d_gray);
			padding: 30px 20px;
			margin-bottom: 20px;
			clear: both;

			.widget_area_title {
				border-left: 8px solid var(--green);
				padding-left: 20px;
				margin: 5px;
				font-size: 18px;
				font-weight: bold;
			}

			ul {
				border-top: 1px solid var(--green);
			}
		}
	}
}

.news_tag{
	display:flex;
	align-items:center;
	gap:20px;
	margin-bottom:20px;

	h2{
		font-size:18px;
	}
	ul{
		display:flex;
		gap:5px 15px;
		flex-wrap:wrap;

		li{
			a{
				font-size:14px;
				color:var(--d_gray);

				&:hover{
					color:var(--green);
				}
			}
		}
	}
}
.top_blog_lists {
	display: grid;
	gap: 20px;

	.box {
		display: grid;
		grid-template-columns: 150px 1fr;
		align-items: center;
		gap: 0 10px;
		position: relative;
		border: 1px solid var(--bd_gray);
		border-radius: 5px;
		overflow: hidden;
		transition: 0.3s;

		.img {
			height: 100px;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: 0.3s;
			}
		}

		.text {
			padding:10px;

			time {
				font-size: 12px;
				color: var(--d_gray);
			}

			h3 {
				font-size: 16px;
				word-break:break-all;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				/* ブラウザがサポートしていない場合のフェールセーフ */
				max-height: 54px;
			}
		}

		a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
	}
}

/*------------------------------------------------*/
/*------------------ blog detail -----------------*/
/*------------------------------------------------*/
.blog_lists_section{
	padding-top:50px;
}
.blog_lists_container{
	max-width: 740px;
    margin: 0 auto;
    margin-top: 33px;
    padding-bottom: 95px;
}
.blog_lists_headline{
	margin-bottom:50px;
	padding-bottom:20px;
	border-bottom:1px solid var(--gray);

	time{
		display:flex;
		align-items:center;
		gap:5px;
		margin-bottom:5px;
		font-size:14px;

		i{
			font-size:16px;
			color:var(--d_green);
		}
	}
	h1{
		font-size:30px;
		line-height:1.5;
		word-break:break-all;
	}
	ul{
		display:flex;
		flex-wrap:wrap;
		gap:10px;
		margin-top:20px;

		li{
			a{
				display: block;
				font-size:14px;
				color:var(--d_gray);
				line-height:1;
				text-decoration: none;
				word-break:break-all;
			}
		}
	}
}
/* .blog_lists_contents{
	display:grid;
	
	p{
		font-size:16px;
		line-height:2;

		a{
			color:@blue;
			text-decoration:underline;
			word-break:break-all;
		}
	}
	img{
		width:100%;
		max-width:800px;
	}
	iframe{
		width:100%;
		height:400px;
	}
	.img, .video{
		margin:30px 0;
	}
} */

.blog_container{
	display:grid;
	gap:50px;
}
.blog_row{
	display:grid;
	gap:50px;

	&.col2{
		grid-template-columns:repeat(2, 1fr);
	}
	/* &.col3{
		grid-template-columns:repeat(3, 1fr);
	}
	&.col4{
		grid-template-columns:repeat(4, 1fr);
	} */
}
.blog_column{
	h2{
		padding:5px 0 5px 15px;
		font-size:30px;
		border-bottom:1px solid var(--green);
		border-left:5px solid var(--green);
	}
	h3{
		padding:3px 0 3px 15px;
		font-size:22px;
		border-left:3px solid var(--green);
	}
	p, div{
		font-size:16px;
		line-height:2;
		word-break:break-all;
	}
	a{
		text-decoration:underline;
	}
	.syntaxhighlighter{
		margin:0 !important;
		padding:10px 0 !important;
		border:1px solid var(--l_gray);
	}
	img{
		display:block;
		width:100%;
	}
	iframe{
		display:block;
		width:100%;
		height:300px;
	}
	hr{
		/* margin:50px 0; */
		border:none;
		border-top:2px dotted var(--d_gray);
	}
	pre{
		margin:20px 0;
		padding:10px;
		background-color:var(--l_gray);
		border:1px solid var(--green);
		border-radius:5px;
	}
	blockquote{
		margin:20px 0;
		padding:2px 0 2px 10px;
		border-left:5px solid var(--green);
	}
}

.blog_lists_link{
	margin-top:50px;

	a{
		display:block;
		padding:15px 20px;
		font-size:16px;
		text-align:center;
		color:var(--white);
		background-color:var(--green);
		border-radius:50px;
		transition:0.3s;
		text-decoration: none;

		&:hover{
			background-color:var(--d_green);
		}
	}
}
.blog_lists_tag{
	display:flex;
	align-items:center;
	gap:20px;
	margin-bottom:20px;

	h2{
		font-size:18px;
	}
	ul{
		display:flex;
		gap:5px 15px;
		flex-wrap:wrap;

		li{
			a{
				font-size:14px;
				color:var(d_gray);
				text-decoration: none;

				&:hover{
					color:var(--green);
				}
			}
		}
	}
}

/*------------------------------------------------*/
/*--------------------- format -------------------*/
/*------------------------------------------------*/
.format_contents_container {
	.page_title {
		margin-bottom: 30px;
		/* margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%); */
		padding: 30px 0;
		text-align: center;
		background: #a9cb6b;
		color: #fff;
		font-size: 34px;
		font-weight: bold;

		h1 {
			font-weight: normal;
			font-size: 100%;
		}
	}

	#main_contents {
		width: 740px;
		margin: 0 auto;
		margin-top: 33px;
		padding-bottom: 95px;

		p {
			margin-bottom: 30px;
			font-weight: normal;
			font-size: 100%;

			input {
				appearance: revert-layer;
			}
		}
	}
}
.sub_section {
    width: 740px;
    margin: 0 auto;
    margin-top: 33px;
    padding-bottom: 95px;

	.sub_contents {
		margin-bottom: 100px;

		.sub_header {
			display: flex;
			justify-content: left;
			align-items: center;
			margin-bottom: 30px;
			padding: 15px 0 15px 10px;
			border-bottom: 1px solid var(--gray);
			border-left: 10px solid;
			border-left-color: var(--green);
	
			h2 {
				margin-right: 15px;
				font-size: 40px;
				line-height: 1;
				color: var(--green);
			}
		}
		.sub_date_lists {
			dl {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 10px;
				margin: 0;
				padding: 15px 0;
				border-top: 1px solid var(--gray);

				&:last-child{
					border-bottom:1px solid var(--gray);
				}
				dt {
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
				}
				dd {
					margin: 0;

					a{
						display:block;
						padding:5px 10px;
						font-size:14px;
						text-decoration:none;
						white-space:nowrap;
						color:var(--white);
						background-color: var(--d_green);
						border-radius:5px;
						transition:0.3s;

						&:hover{
							opacity:0.7;
						}
					}
				}
			}
		}

		.title{
			display:flex;
			justify-content:center;
			/* align-items:center; */
			flex-direction:column;
			gap:5px;
			margin-bottom:20px;
			font-size:24px;
	
			span{
				font-size:16px;
			}
		}
		.link{
			display:grid;
			grid-template-columns:repeat(2, 1fr);
			align-items:center;
			gap:10px;
	
			a{
				display:block;
				padding:15px;
				font-size:20px;
				text-align:center;
				color:var(--white);
				background-color:var(--green);
				transition:0.3s;
			}
			a:hover{
				opacity:0.7;
			}
		}
	}

	.sub_contents:last-child {
		margin-bottom: 0;
	}
}
/*---------- fadein-animation ----------*/
.sub_fadein{
	animation-duration:1.2s;
	animation-iteration-count:1;
	animation-timing-function:ease-out;
	animation-name:sub_fadein;
}
@keyframes sub_fadein{
	0%{
		transform:translateY(0);
		opacity:0;
	}
	50%{
		transform:translateY(50px);
		opacity:0;
	}
	100%{
		transform:translateY(0);
		opacity:1;
	}
}
.pass_area{
	max-width:600px;
	margin:0 auto;
	text-align:center;

	p{
		margin-bottom:10px;
		font-size:16px;
	}
	.form{
		display:grid;
		grid-template-columns:1fr 100px;
		align-items:center;

		input{
			width:100%;
			padding:20px;
			font-size:16px;
			border:1px solid var(--gray);
			border-radius:0;
			box-sizing:border-box;
			outline:none;
		}
		button{
			height:100%;
			color: var(--white);
			background-color: var(--green);
		}
	}

	/*member_detail用passwordページ*/
	.form---member_pass{
		grid-template-columns:repeat(2, 1fr);
		gap:20px;

		dl{
			display:flex;
			flex-direction:column;
			gap:5px;

			dt{
				text-align:left;
			}
		}

		dl:last-child {
			grid-column: 1 / 3;
		}
	}

	.member_pass{
		color: var(--white);
		background-color:var(--green);
		padding:20px;
		width:100%;
		margin-top:20px;
	}
}


.contact_header{
	margin:100px 0 50px;
}
.contact_header h2{
	display:inline-block;
	font-size: 24px;
	font-weight: bold;
	border-bottom: 3px solid var(--green);
}
.contact_form dl{
	display: grid;
	grid-template-columns:200px 1fr;
	align-items:center;
	margin:0 0 20px;
}
.contact_form dl dt{
	font-size:16px;
	font-weight:bold;
	word-break:break-all;
}
.contact_form dl dt span{
	margin-left:5px;
	color:#cc1100;
}
.contact_form dl dd{
	margin:0;
	font-size:16px;
}
.contact_form dl dd input[type="text"],
.contact_form dl dd input[type="email"]{
	padding:15px;
	width:100%;
	font-size:16px;
	border:1px solid #b9b9b9;
}
.contact_form dl dd textarea{
	padding:15px;
	width:100%;
	font-size:16px;
	border:1px solid #b9b9b9;
	resize:vertical;
}
.contact_form dl dd input[type="radio"]{
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
}
.contact_form dl dd .radio{
	display:flex;
	gap:20px;
}
.contact_form dl dd .flex{
	display:flex;
	align-items:center;
	gap:5px;
}
.contact_form .policy p{
	text-align:center;
}
.contact_form .policy label{
	display:flex;
	justify-content:center;
	font-weight:bold;
}
.contact_form .policy label input{
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
}
.contact_btn{
	display:flex;
	justify-content:center;
	gap:10px;
	margin-top:50px;
	text-align:center;
}
.contact_btn button{
	width:100%;
	max-width:50%;
	margin: 0 auto;
	padding: 20px 0;
	font-size: 20px;
	border:1px solid #b9b9b9;
}

/*---------- modal ----------*/
.modal_area{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding:20px;
	background-color:rgba(0, 0, 0, 0.7);
	opacity:0;
	visibility:hidden;
	box-sizing:border-box;
	transition:0.3s;
	z-index:2000;

	&.active{
		opacity:1;
		visibility:visible;
	}
}
.modal_window{
	height:100%;
	margin:0 auto;
	backface-visibility:hidden;

	&.lg{
		max-width:1200px;
	}
	&.md{
		max-width:900px;
	}
	&.sm{
		max-width:500px;
	}
}
.modal_container{
	height:100%;
	overflow:auto;
}
.modal_body{
	padding:20px 20px 40px;
	background-color:var(--white);
}
.modal_format{
	.title{
		display:flex;
		align-items:center;
		gap:10px;
		margin-bottom:20px;
		padding-bottom:10px;
		border-bottom:1px solid var(--gray);

		h2{
			font-size:20px;
			color:var(--d_green);
		}
		time{
			font-size:14px;
			color:var(--d_gray);
		}
	}
	ul{
		display:grid;
		gap:20px;

		li{
			p{
				margin-bottom:5px;
				font-size:16px;
			}
			.memo{
				margin-bottom:20px;
				font-size:14px;
			}
			.link{
				display:flex;
				justify-content:center;
				gap:10px;

				a{
					width:100%;
					padding:10px;
					font-size:16px;
					text-align:center;
					text-decoration:none;
					color:var(--white);
					background-color:var(--d_green);
					border-radius:5px;
					box-sizing:border-box;
				}
			}
		}
	}
}
.modal_footer{
	display:flex;
	justify-content:center;
	background-color:var(--white);
}
.modal_close{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:5px;
	width:100%;
	height:40px;
	font-size:16px;
	color:var(--white);
	background-color:var(--d_gray);
	text-align:center;
	cursor:pointer;
	transition:0.3s;

	i{
		font-size:18px;
	}
}