@charset "utf-8";


:root {
	--color-line: #ccc;
	--color-link: #0088CC;
	--color-link-bg:#F5FCFF;
	--color-cautiion:#ff3300;
	--color-corp:#195CA8;
	--color-park:#00954A;
	--color-bg-lightgray: #f5f5f5;
	--media-tb: 834px;
	--media-sp: 500px;
	--line-height: 1.7;

}

/*.top{
	.side-enable{
		h1,h2,h3,h4,h5,h6 {
			font-family: "Noto Sans JP"!important;
		}
	}
} */

.top{
	h1,h2,h3,h4,h5,h6,
	.heading-tree,
	.heading-subsection,
	.heading-border,
	.heading-bar,
	.heading-item{
		font-family: "Noto sans JP", sans-serif;
	}
}
.page-guide{
	h1,h2,h3,h4,h5,h6,
	.heading-tree,
	.heading-subsection,
	.heading-border,
	.heading-bar,
	.heading-item{
		font-family: "Zen Maru Gothic", sans-serif;
  }
}

.side-enable{

	.main{
		.layout-subsection{
			&:first-child{
				margin:0;
			}
		}
	}

	/*===========================================*/
	p{
		line-height: var(--line-height);
		margin-top: 1.2em;
	}
	
	
	strong{
		color:var(--color-cautiion);
	}
	
	em{
		font-weight: bold;
		font-style: normal;
	}
	
	dl{
		margin-top: 30px;
		&:first-of-type{
			margin-top:0;
		}
		> dt{
			font-weight: bold;
		}
		> dd{
			
		}
	}
	
	hr{
		margin:40px 0;
		height:2px;
		background-color: orange;
		border: none;
		clear:both;
	}
	
	input,textarea,select{
		outline: none;
	}

	a:hover {
		opacity: .6;
	}


	/* over ride  */
	.side-enable > div .main{
		width:100%;
	}

	.samplecode{
		display: block;
		width:100%;
		height:200px;
		background-color: #f9f9f9;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) inset;
		border:none;
		margin:40px 0 0 0;
		line-height: 1.6;
		border-radius: 8px;
		padding:10px;
		tab-size: 1;
		&:focus{
			
		}
		+ .copy{
			display: inline-block;
			background-color: #6666ff;
			color: white;
			border-radius: 5px;;
			padding:4px 8px 4px 8px;
			line-height: 1.5;
			margin:10px 0 0 0;
			position: relative;
			font-size: 12px;
			cursor: pointer;
			&:hover{
				background-color: #aaa;
			}
		}
	}


	/* ========== layout ========= */

	.layout-section{
		margin-top:60px;
		line-height: var(--line-height);
		&:first-child{
			margin-top:0;
		}
		@media (max-width: 768px) {
			padding-bottom: 60px;
		}
	}
	.layout-subsection{
		margin-top:30px;
		line-height: var(--line-height);
		& > *:first-child{
			margin-top:0;
		}
	}


	/* ========== heading ========= */
	.heading-tree{
		font-size:24px;
		position: relative;
		padding-left:54px;
		margin:1em 0 0 0;
		&:after{
			content:'';
			width:39px;
			height:39px;
			background: url(/assets/img/common/wood.png) no-repeat;
			background-size: contain;
			display: block;
			position: absolute;
			left:0;
			top:0px;
		}
		@media (max-width: 500px) {
			font-size:20px;
		}
	}
	.heading-subsection{
		font-size:24px;
		position: relative;
		padding-left:34px;
		margin:1em 0 0 0;
		&:after{
			content:'';
			width:20px;
			height:20px;
			background:var(--color-corp);
			border-radius: 50%;
			display: block;
			position: absolute;
			left:0;
			top:12px;
		}
		@media (max-width: 500px) {
			font-size:20px;
			padding-left:28px;
			&:after{
				content:'';
				width:16px;
				height:16px;
				top:10px;
			}
		}
	}
	.heading-border{
		font-size:20px;
		position: relative;
		margin:1em 0 0 0;
		padding:0 0 8px 0;
		border-bottom:1px solid #333;
		@media (max-width: 500px) {
			font-size: 18px;
		}
	}
	.heading-bar{
		font-size:16px;
		position: relative;
		margin:1em 0 0 0;
		padding: 4px 10px;
		background-color: #eee;
		+ p{
			margin-top:0.4em;
		}
		@media (max-width: 500px) {
			font-size: 15px;
		}
	}
	.heading-item{
		font-size:18px;
		position: relative;
		margin:1em 0 0 0;
		+ p{
			margin-top:0.4em;
		}
	}

	/* ========== container ========= */
	.container-column{
		display: flex;
		gap:40px;
		margin:1.2em 0 0 0;
		@media (max-width: 500px) {
			flex-direction: column;
			gap:20px;
		}
		> *{
			flex:1;
			&.image{
				flex:0.45
			}
			&.detail{
				flex:0.55;
				> *:first-child{
					margin-top:0;
				}
			}
		}
	}

 	.container-faq{
 		margin: 20px 0 0 0;
 		line-height:1.8;
		&:first-child{
			margin-top:0;
		}
 		dt{
 			font-weight: bold;
			margin-top:6px;
 			font-size:110%;
 			padding:0 0 0 26px;
 			position:relative;
			cursor:pointer;
			&:first-child{
				margin-top:0;
			}
			&:before,
			&:after{
				transition: all .3s;
			}
 			&:before{
 				content:'';
				display: block;
				height:2px;
				width:12px;
				background-color: #000;
 				position: absolute;
 				left:0;
				top: 15px;
			}
			&:after{
				content:'';
				display: block;
				height:2px;
				width:12px;
				background-color: #000;
				position: absolute;
				left:0;
				top: 15px;
				transform: rotate(90deg);
 			}
 			&:hover{
				color:var(--color-park);
				&:before,
				&:after{
					background-color: var(--color-park);
				}
 			}
 			&.-active{
				color: var(--color-park);
				&:before{
					left:0;
					top: 15px;
					background-color: var(--color-park);
				}
				&:after{
					transform: rotate(0deg);
					background-color: var(--color-park);
				}
 			}
 		}
 		dd{
			margin: 10px 0 30px 5px;
 			border-left: 1px solid #999;
			padding: 0 0 0 20px;
 			display:none;
 			&.-active{
 			}
 		}

 	}


	.container-image{
		margin:1.2em 0 0 0;
		img{
			display: block;
			max-width:100%;
			width:70%;
			border:1px solid var(--color-line);
		}
		&.-center{
			img{
				margin:0 auto;
			}
		}
		&.-full{
			img{
				width:100%;
			}
		}
		figcaption {
			margin-top: 0.8em;
		}
	}
	img.no-border {
		border: none!important;
	}

	.container-scroll{
		overflow-x:auto;
		@media (max-width: 500px) {
			table{
				td,th{
					min-width:240px;
				}
			}
		}
	}

	.container-thumbnail{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		gap:10px;
		> *{
			figure{
				display: block;
				img{
					display: block;
					width:100%;
					max-width:150px;
					margin:0 0 0 0;
				}
				figcaption{
					display: block;
					font-size:80%;
					margin:5px 0 0 0;
				}
			}
		}
		&::after {
			content: '';
			flex: auto; /* ダミー要素を追加 */
		}
		
	}



	/* ========== list ========= */
	ul {
		li{
			margin-bottom:6px;
		}
		ul{
			margin-top:0 !important;
			margin-left:1.5em;
		}
		ol{
			margin-top:0 !important;
			margin-left:1.5em;
		}
	}
	ol{
		li{
			margin-bottom:6px;
		}
		ul{
			margin-top:0 !important;
			margin-left:1.5em;
		}
		ol{
			margin-top:0 !important;
			margin-left:1.5em;
		}
	}

	.list-link{
		line-height: var(--line-height);
		margin:1.2em 0 0 0;
		> li{
			&.pdf,
			&.xls,
			&.doc{
				a{
					&:after{
						content:'';
						display: inline-block;
						width:24px;
						height:24px;
						vertical-align: middle;
						background-repeat: no-repeat;
						background-size: contain;
						margin-left: 10px;
					}
				}
			}
			&.pdf{
				a{
					&:after{
						background-image: url(/assets/img/common/pdf-icon.png);
					}
				}
			}
			&.xls{
				a{
					&:after{
						background-image: url(/assets/img/common/xls-icon.png);
					}
				}
			}
			&.doc{
				a{
					&:after{
						background-image: url(/assets/img/common/doc-icon.png);
					}
				}
			}
		}
	}
	.list-disc{
		line-height:  var(--line-height);
		list-style-type: disc;
		margin:1.2em 0 0 1.2em;
		> li{
			list-style-type: disc;
			> ul > li{
				list-style-type: circle;
			}
		}
	}
	.list-decimal{
		line-height:  var(--line-height);
		list-style-type: decimal;
		margin:1.2em 0 0 1.2em;
		> li{
			list-style-type: decimal;
		}
	}

	.list-lower-alpha{
		line-height:  var(--line-height);
		list-style-type: lower-alpha;
		margin:1.2em 0 0 1.2em;
		> li{
			list-style-type: lower-alpha;
		}
	}


	.list-tag{
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin:1.2em 0 0 0;
		> *{
			a{
				display: inline-block;
				padding: 6px 12px 2px 12px;
				border-radius: 8px;
				background-color: var(--color-link-bg);
				color:var(--color-link);
				border:1px solid var(--color-link);
				line-height: 1.4;
				&:hover{
					opacity: 0.6;
				}
			}
		}
	}
	.list-caution{
		line-height:  var(--line-height);
		list-style-type: disc;
		margin:1.2em 0 0 0;
		font-size:90%;
		> li{
			position:relative;
			padding-left:1.4em;
			&:after{
				content:'※';
				display: inline-block;
				position: absolute;
				left:0;
				top:0;
			}
		}
	}
	.list-step{
		counter-reset: step-counter; 
		> li{
			position: relative;
			padding:0 0 0 ;
			counter-increment: step-counter;
			display:flex;
			justify-content:flex-start;
			align-items:flex-start;
			column-gap:20px;
			border-radius: 10px;
			background-color: #F8F7EF;
			border:1px solid #ECEADD;
			padding:20px;
			margin:0 0 60px 0;
			@media (max-width: 500px) {
				flex-direction: column;
				align-items: center;
			}
			&:after{
				content:'';
				background-color: #666;
				display: grid;
				width:18px;
				aspect-ratio: 2 / 0.8;
				margin: 0;
				padding: 8px;
				place-items: center;
				position: absolute;
				bottom: -42px;
				left:50%;
				clip-path: polygon(0 0, 50% 100%, 100% 0);
				transform: translate(-50%);
			}
			&:last-child{
				margin-bottom:0;
				&:after{
					content:none;
				}
			}
			.step{
				aspect-ratio:  1 / 1;
				width:58px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				left: 0;
				top: 0;
				background-color: var(--color-corp);
				z-index:4;
				line-height:1.1;
				font-style: normal;
				@media (max-width: 500px) {
					margin:0 0 20px 0;
				}
				&::after {
					content: counter(step-counter) ;
					font-weight: bold;
					color:white;
					font-size:20px;
					font-weight:bold;
				}
				&:before{
					content:'STEP';
					font-size:12px;
					text-align: center;
					color:white;
				}
			}
			.inner{
				flex:1;
				@media (max-width: 500px) {
					max-width: 100%;
				}
				dl{
					dt{
							font-size:120%;
							font-weight: bold;
						}
					}
					dd{

					}
				}
			}
		}
	}


	/* ========== link ========= */

	.link-window{
		&:after{
			content:'';
			display: inline-block;
			vertical-align: 0px;
			background: url(/assets/img/common/window.svg) no-repeat;
			background-size: contain;
			width:16px;
			height:16px;
			margin-left:10px;
		}
	}

	/* ========== btn ========= */
	.btn-basic{
		border-radius: 5px;
		border:1px solid var(--color-link);
		padding: 4px 12px;
		color: var(--color-link);
		transition: all .2s;
		&:hover{
			//opacity: 0.5;
			background-color: var(--color-link-bg);;
		}
		&.-window{
			&:before{
				content:'';
				display: inline-block;
				vertical-align: 0px;
				background: url(/assets/img/common/window_w.svg) no-repeat;
				background-size: contain;
				width:14px;
				height:14px;
				margin-right:10px;
				@media (max-width: 500px) {
					vertical-align: -2px;
				}
			}
		}
		&.-icon{
			padding: 4px 4px;
		}
	}

	/* ========== table ========= */
	table{
		margin:1.5em 0 10px 0;
		line-height: var(--line-height);
		font-size:90%;
		border-collapse: collapse;
		&.-auto{
			width:auto;
		}
		&.-full{
			width:100%;
		}
		&.-left{
			tr{
				td,th{
					text-align: left;
				}
			}
		}
		&.-middle{
			tr{
				ul {
					margin-top: 0!important;
				}
				td,th{
					vertical-align: middle;
				}
			}
		}
		tr{
			&.-left{
				td,th{
					text-align: left;
				}
			}
			&.-center{
				td,th{
					text-align: center;
				}
			}
			&.-right{
				td,th{
					text-align: right;
				}
			}
			&.-middle{
				td,th{
					vertical-align: middle;
				}
			}
			&.-bold{
				th,td{
					font-weight: bold;
				}
			}
			&.-nowrap{
				td,th{
					white-space:nowrap;
				}
			}
		}
		td,th{
			padding: 2px 8px;
			background-color: transparent;
			text-align: left;
			vertical-align: top;
			&.w-10 { width: 10%; }
			&.w-20 { width: 20%; }
			&.w-30 { width: 30%; }
			&.w-40 { width: 40%; }
			&.w-50 { width: 50%; }
			&.w-60 { width: 60%; }
			&.w-70 { width: 70%; }
			&.w-80 { width: 80%; }
			&.w-90 { width: 90%; }
			&.-left{
				text-align: left;
			}
			&.-bold{
				font-weight: bold;
			}
			&.-center{
				text-align: center !important;
			}
			&.-right{
				text-align: right;
			}
			&.-middle{
				vertical-align: middle;
			}
			> *:first-of-type{
				margin-top:0 !important;
			}
		}

	}
	.table-grid{
		border-collapse: collapse;
		border:1px solid var(--color-line);
		tr{
			td,th{
				padding: 8px;
				border-right:1px solid var(--color-line);
				border-bottom:1px solid var(--color-line);
				text-align: left;
			}
			th{
				background-color: var(--color-bg-lightgray);
			}
		}
	}
	.table-line{
		border-collapse: collapse;
		border-top:1px solid var(--color-line);
		tr{
			td,th{
				padding: 8px;
				border-bottom:1px solid var(--color-line);
				background-color: transparent;
				text-align: left;
			}
			th{
			}
		}
	}



	/* ========== grid ========= */

	.grid-block{
		display: grid;
		gap:24px;
		margin: 40px 0 10px 0;
		@media (max-width: 834px) {
			gap:20px;
		}
		@media (max-width: 500px) {
			gap:18px;
		}
		> *{
			img{
				display: block;
				width:100%;
			}
		}
		&.-cols2{
			grid-template-columns: repeat(2, 1fr);
			gap:40px;
		}
		&.-cols3{
			grid-template-columns: repeat(3, 1fr);
		}
		&.-cols4{
			gap:18px;
			grid-template-columns: repeat(4, 1fr);
		}
		&.-cols5{
			gap:18px;
			grid-template-columns: repeat(5, 1fr);
		}
		&.-colsTb3{
			@media (max-width: 834px) {
				grid-template-columns: repeat(3, 1fr);
			}
		}	
		&.-colsTb2{
		@media (max-width: 834px) {
			grid-template-columns: repeat(2, 1fr);
		}
		}
		&.-colsTb1{
		@media (max-width: 834px) {
			grid-template-columns: 1fr;
		}
		}
		&.-colsSp2{
		@media (max-width: 500px) {
			grid-template-columns: repeat(2, 1fr);
			gap:20px;
		}
		}
		&.-colsSp1{
		@media (max-width: 500px) {
			grid-template-columns: 1fr;
			gap:20px;
		}
		}
		&.-nopad{
		gap:0;
		}
	}

	/* ========== card ========= */
	.card-box{
		display: block;
		> .thumb{
			margin:0 0 14px 0;
			img{
				display: block;
				width:100%;
			}
		}
		> .detail{
			line-height:  var(--line-height);
			display: block;
			font-size:90%;
			&.-center{
				text-align: center;
			}
		}
		&.-center{
			text-align: center;
		}
	}

	/* ========== iframe ========= */
	iframe{
		max-width: 100%;
		@media (max-width: 786px) {
			max-height: 350px;
		}
	}

	.mb-0{
		margin-bottom:0px;
	}
	.mb-10{
		margin-bottom:10px;
	}
	.mb-20{
		margin-bottom:20px;
	}
	.mb-30{
		margin-bottom:30px;
	}
	.mb-40{
		margin-bottom:40px;
	}

	.mt-0{
		margin-top:0px;
	}
	.mt-10{
		margin-top:10px;
	}
	.mt-20{
		margin-top:20px;
	}
	.mt-30{
		margin-top:30px;
	}
	.mt-40{
		margin-top:40px;
	}


	/* ========== helper ========= */
	._nowrap{
		white-space: nowrap;
	}
	._caption{
		font-size:85%;
	}
	._round{
		border-radius: 10px;
		overflow: hidden;
	}
	.t-center{
		text-align: center;
	}
	.t-right{
		text-align: right;
	}
	._pc{
		display: none;
		@media (min-width: 834px) {
      display: block;
    }
	}
	._tb{
		display: none;
		@media (max-width: 834px) {
      display: block;
    }
    @media (max-width: 500px) {
      display: none;
    }
	}
	._sp{
		display: none;
		@media (max-width: 834px) {
      display: none;
    }
    @media (max-width: 500px) {
      display: block;
    }
	}
}