@charset "utf-8";
html
head
  body{
  margin: 0 auto;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",'Times New Roman', sans-serif;
  font-family: 'Times New Roman','游ゴシック', '游明朝','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  background-color:#FFFFFF;
  line-height:130%;
}

p{
  padding: 5px 0;
}
.text-brown {
    color: #993300;
}

.siteidea {
background-color:#fff;
        border-bottom: solid 4px #009900;
		margin-bottom: 16px;	
	 font-size:32px; 
	font-weight:bold;
		color:#060;
/*		width: 80%;*/
	margin:0 auto;
	text-align: left;
	padding-bottom: 16px;
	padding-top: 10px;
		}

.siteidea  a{
	text-decoration:none;
     }
.siteidea  a:link{
	color:#006600;
     }
.siteidea  a:visited{
	color:#006600;
     }	 
	 
.siteidea  a:hover{
	color:#00FF00;
     }


/*パンくずリスト*/
.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.5em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #52b5ee;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
	color:#00FF00;	}
/*パンくずリスト*/
.ideatop{
/*	max-width:800px;*/
	margin: 0 auto; 
	text-align:left; 
}

.title {margin-bottom: 5px;
		padding:6px;
		width:82%;
}




.index-container{
	display: flex;
	flex-flow: column;
	  align-items: center;
	justify-content: center;
	border: 2px ridge #caca00;
		background-color:#B2FCBE;
		max-width: 800px;
			margin: 0 auto;
}

.index-title{
     flex: 1 1 auto;
	padding: 5px 5px 5px 5px;
	/*background-color:#AEFBCC; */
	/*border: 2px solid #caca00;*/
	margin: 0 auto; 
}


.idea_container {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
/*	border: 2px ridge #caca00;*/
		background-color: #ffffff;
		max-width: 800px;
		margin: 0 auto;
		margin-top: 5px;
}



.img-responsive
        {
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 4%;
			max-width: 80%;
			height: auto;
			width: auto;
			}

			
			.img-responsive4
        {
			display: inline-block;
			margin-left: auto;
			margin-right: auto;
			padding-top: 3%;
			max-width:90%;
			height: auto;

			}


.headNavi {
	clear: both;
	display: flex;
	flex-flow: row wrap;
	margin: 0;
	padding: 0 0 0 0;
	justify-content: center;
    font-size: 16px;
/*	list-style-type: none;*/
}
/* index-tab */


.headNavi li {
	width: 180px;
	height: 36px;	
	margin:10px;
    line-height: 36px;
	border: 2px solid #66FF33;
    list-style-type: none;
	text-align: center;
	vertical-align: middle;

}

.headNavi li a{
	display: block;
	height: 36px;	
/*	position: relative;*/
	color: #fff;
    background-color:#009900;
	width:180px;
	text-decoration: none;
	vertical-align: middle;
}

.headNavi li a:hover{
	color: #000;
	background-color: #99FF66;
}

.idea_container3 {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	border: 2px ridge #caca00;
		background-color:#87F99C;
		max-width: 800px;
			margin: 0 auto;
		}
.idea_container3 img{
	flex: 1 1 auto;
	vertical-align: middle;
/*    padding-right: 5px;*/}

.idea_container-basic {
	display: flex;
	flex-flow:column;
	justify-content: center;
	border: 2px ridge #caca00;
		background-color: #ffffff;
		max-width: 900px;
		margin: 0 auto;
		}

/* index-tab */

.top {position:relative;
	text-align:center;
	max-width: 800px;
	margin: 0 auto;
	padding-top: 10px; 
}

.container-basic1 {
	  	color:#001100;
		background-color:#FFFFFF;
	    max-width: 800px;
		margin: 0 auto;
}


.idea_container-yoko {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	border-top: 2px ridge #caca00;/*#060*/
	padding: 0; 
	background-color: #FFFFFF;

}

.d-box-s {
    background-color:#DDFFFF;
    border: 2px solid #060;
    font-weight: bold;
    font-size:16px;
    color:#090;

    padding:6px;
    text-align: left;
    max-width:500px;

    display: flex;
    align-items: center;   /* ← 上下中央 */

}

.ideatop{
/*	max-width:800px;*/
	margin: 0 auto; 
	text-align:left; 
}
#wrapdet1{
	width:700px;
	margin-left:auto; 
	margin-right:auto; 
	text-align:left; 
}


#wrapdet3{
	width:800px;
	margin-left:auto; 
	margin-right:auto; 
	text-align:left; 
	
}

#wrapdet4{
	width:750px;
	margin-left:auto; 
	margin-right:auto; 
	text-align:left; 
}



#wrapdet2{
	width:100%;
	margin-left:auto; 
	margin-right:auto; 
	text-align:left; 
}


#wrapdetwide1{
	width:1000px;
	margin-left:auto; 
	margin-right:auto; 
	text-align:left; 
}

ul {
	margin: 1px 1px;
	padding: 2px 1px;
}


.headerfont1 { color: black; font-size: 16px; font-family:'Times New Roman','游ゴシック', '游明朝','ヒラギノ角ゴ pro W3', 'Hiragino Kaku Gothic pro', 'メイリオ', 'Meiryo',
 'Osaka', 'ＭＳ Ｐゴシック', 'MS pGothic';line-height: 140%; }


.d-box-s{
/*disply:block;	*/
background-color:#DDFFFF;
border: 1px solid #060;
/*font-weight: bold;*/
font-size:16px;	
	color:#077703;
	padding:6px 6px 6px 6px;
	text-align: left;
	max-width:400px;
}

.d-box-thin{
/*disply:block;	*/
background-color:#FFFFFF;
border: 1px solid #00F;
border-radius:5px;
line-height: 150%;	
	
/*font-weight: bold;*/
	text-align: left;
}


.infotitle-boxs{
	clear:both;
	position:relative; 
	border: 2px solid #060;
	text-align:left;
    max-width: 500px;
	background-color: #F7FCB6;
	font-weight: bold;
	color: #090;
	vertical-align: middle;
	text-decoration:none;
    padding: 8px;
}

.infotitle-boxs a {
display: block;
position: absolute;
height:100%;
width: 100%;
	margin: auto;
	text-align:center;
	text-decoration:none;
}

.infotitle-boxs a:hover{
	clear:both;
	background:#FFFFFF;
	color:#000;
 filter: alpha(opacity=40);
 -moz-opacity:0.4;
 opacity:0.4;
}




/* underbar */

.go_subindex {
	clear:both;
        border: solid 2px #009900;
		margin-bottom: 8px;
	/*	box-sizing:border-box;*/
        border-radius:5px;

	    font-size:16px;
		font-weight:bold; 
		color:#060;
		padding:6px 12px 6px 12px;
		margin-left:auto;
		margin-right:auto;

		}



.go_subindex a{
	text-decoration:none;
     }
	 
.go_subindex a:link{
	color:#006600;
     }
	 
.go_subindex a:visited{
	color:#006600;
     }	 
	 
.go_subindex a:hover{
	color:#00FF00;
     }




.hoverimg a:hover img{
 filter: alpha(opacity=70);
 -moz-opacity:0.7;
 opacity:0.7;	
}

.tophover {
    flex: 1 1 auto;
	/*margin: 4px;*/
	padding: 5px 5px 5px 5px;
	/*border: 2px solid #caca00;*/
	margin: 0 auto; 
}


.tophover a:hover img{
 filter: alpha(opacity=70);
 -moz-opacity:0.7;
 opacity:0.7;

 	
}
.adjustimg{
			display: block;
			margin-left: auto;
			margin-right: auto;
			max-width: 80%;
			height: auto;
			width: auto;
			margin: 0 auto; /* 左右のマージンを自動で設定して中央に揃える */
}

.iconline {
	font-size: 16px;
	font-weight:bold;
    display: flex;
    align-items: center;
    gap: 6px;  /* アイコンと文字の間隔 */

}

.infotitle_nl{
	clear:both;
	padding:8px;

	text-align:left;
	overflow:hidden;
	margin: 0 auto;
	line-height: 150%;
}

.infotitle-img{
	display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */
    position: relative;
    padding: 0;
    max-width: 900px;
	    margin: 0 auto;
    overflow: hidden;
    background-color: #FFFFFF;
}

.infotitle-img2{
	display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;     /* 上下中央 */

    position: relative;
    max-width: 900px;
	    margin: 0 auto;
	padding: 8px 2px;
    overflow: hidden;
    background-color: #FFFFFF;
}
/* content */

div#content {

	width: 710px;

}


.article 
{
	clear:both;
	color:#000000;
	
	background-color:#FFFFFF;
/*width:100%;*/
margin-left:auto;
margin-right:auto;
margin:10px 0px 0px 0px;
border:solid 1px #0033FF;
padding:15px;
box-sizing:border-box;
margin-bottom: 10px;
border-radius:5px;
overflow:hidden

}


@media screen and (max-width: 600px)
     {
	.idea_container-basic {
		flex-flow: column;}
	.block-na {
		flex-flow: column;} 
	.idea_container3 {
		flex-flow: column;}	 
	.header2 {
		flex: 1 1 auto;}
	.tophover{
		flex:1 1 auto;}

.title::after,
.title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 97%;
}
		 
    .infotitle-img2 img {
        width: 100%;   /* 画面幅いっぱいに縮小 */
        height: auto;  /* アスペクト比を維持 */
    }
		 
}

@media screen and (max-width: 500px)
{
	.idea_container {
		flex-flow: column;}
	.ideaname {
		flex: 1 1 auto;}
	.hoverimg{
		flex:1 1 auto;}

		 .img-responsive4{
		display:none;}
	
	.infotitle-img{
		display:none;
	}
		
.title::after,
.title::before {
    content: ""; /* 空のコンテンツ */
    position: absolute;
    top: 50%;
    left: 96%;
 }
	
}


/*下線に関する設定　span　styleタグ*/
.under1 {
  border-bottom: solid 1.5px #0044CC;
  font-color:#0044CC;
}


/*アコーディオンメニュー*/
.accordion {
    margin: 1em auto;
    max-width: 800px;
    font-size: 18px;
    color: #000;
}
.toggle {
    opacity: 0; /* 透明にする */
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: -1; /* ネガティブの z-index を使用してスクリーン上で要素を非表示にする */
    cursor: pointer; /* マウスオーバー時にポインターを表示する */
}

.option {
    position: relative;
    margin-bottom: 1em;
}

.option a:hover {
    background: #CCFFCC;
    text-decoration: none;
}


.title,
.content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s ease; /* 全体のトランジション時間とイージング関数*/
}

.title {
    border: solid 2px #060;
    padding: 1em;
    display: flex;
    align-items: center;      /* 画像とテキストの上下中央揃え */
    gap: 6px;                 /* 画像と文字の間の余白 */
    color: #333;
    font-weight: bold;
}


.title:hover {
    background: #CCFFCC;
}

.title::after,
.title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s ease;
}

.title::after {
    transform: rotate(90deg);
}

.content {
    max-height: 0;
    overflow: hidden;
    color: #333;
    transition: max-height 0.5s ease; /* アニメーション時間とイージング関数 */
}

.content p {
    /*margin: 0;*/
    padding: 0.2em;
	margin: 0.5rem auto;
    font-size: 0.9em;
    line-height: 1.5;
}

.content a {
    color: #0044CC;
    text-decoration: none;
	}
	
		/* 訪問後の通常リンクのカラー */
.content a:visited {
  color: #551a8b;
}
.content a.underline {
  text-decoration: underline; /* アンダーライン */
}
.content a.underline:visited {
    color: #551a8b; /* 訪問後の強調したリンクのカラー */
    text-decoration: underline;
}
.content a:hover {
    text-decoration: none;
}
.content img {
  max-width: 100%;
  height: auto;
}
.toggle:checked + .title + .content {
    max-height:1800px;
    transition: max-height 0.5s ease; /* オープン時のアニメーション時間とイージング関数 */
}
.toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}



/* フローチャートスタイル */

.flowchart {
  list-style: none;
  margin: 1em 0;
  padding: 0;
  counter-reset: flownum; /* 追加：各工程のナンバリングをリセット */
}

.flowchart li {
  position: relative;
  padding: 0 0 2em 36px; /* 30px + 6px */
}

.flowchart li::before {
  content: counter(flownum);
  counter-increment: flownum;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -5px;
  left: 0;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(44, 182, 150);
  color: white;
}

.flowchart li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(30px / 2 - calc(5px / 2));
  z-index: 1;
  width: 5px;
  height: 100%;
  background: rgb(200, 200, 200);
}

.flowchart-title {
  margin: 0 0 .6em;
  font-weight: bold;
  font-size: 1.04em;
  line-height: 1.4;
}
.flowchart li:last-child::after {
    content: none;
}

.img-border2
        {
			display: block;
			margin-left: auto;
			margin-right: auto;
			height: auto;
			width: auto;
			border: 2px solid #009900;
			}