@charset "utf-8";
/* 20240817 */
body#sitemap{
	will-change: animation; /* 下層アニメーションのチラツキ防止 */
	background-color: #222;
	background-image: url(../../img/top_grade_02.jpg);
	background-size: cover;
	background-position: center;
	background-blend-mode:Multiply;/*Multiply Darken Color-burn Overlay Color Saturation Screen Exclusion*/
	}

a:link, a:visited{color:#fff;}
a:hover, a:active, a:focus{color:#fff;}

body#sitemap main{
	color: #fff;
	text-shadow: none;
	display: flex;
	flex-direction: column;
	}

body#sitemap main article .inner_width{
	width: 80vw;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	}
	body#sitemap main article:first-of-type .inner_width{
			margin-top: calc(20vw + 2em);
		}

body#sitemap main article div.inner_width ul{list-style: none; line-height: 1.6em; border-top:1px solid #333;}
body#sitemap main article div.inner_width ul li a{display: block;}

body#sitemap main article#main_content div.inner_width ul{font-size: 1.2em;}
body#sitemap main article#sub_conttent div.inner_width ul{font-size: .9em;}
body#sitemap main article div.inner_width ul,
body#sitemap main article div.inner_width div#my_office{margin-bottom: 2em;}

body#sitemap main article div#my_office h1{
	font-family: 'Klee One', 'Noto Sans JP', sans-serif,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size: .8em;
	font-weight: normal;
	}
body#sitemap main article div#my_office h2{
	font-family: 'Klee One', 'Noto Sans JP', sans-serif,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-size: .6em;
	font-weight: normal;
	margin-bottom: 0;
	padding-bottom: 0;
	}
body#sitemap main article div#my_office div.link{
	width: 9em;
	display: flex;
	justify-content: center;
	margin: .4em auto .3em;
	}
	body#sitemap main article div#my_office div.link img{
		width: .9em;
		margin: auto .5em;
		}
	body#sitemap main article div#my_office small{
		font-size: .5em;
		color: var(--color_d01);
		margin-top: 0;
		padding-top: 0;
		}


/*==================================================
 下線が伸びて背景に変わる
===================================*/
.btnlinestretches3{
    /*線の基点とするためrelativeを指定*/
	position:relative;
    /*ボタンの形状*/  
	color:#333;
    padding: 10px 30px;
	display:inline-block;
    text-decoration: none;
    outline: none;
}
/*テキストの設定*/
.btnlinestretches3 span{
    /*テキストを前面に出すためz-indexの値を高く設定*/
	position:relative;
	z-index: 2;
}
.btnlinestretches3:hover span{
	color: #fff;
}
/*線の設定*/
.btnlinestretches3::after {
	content:'';
    /*絶対配置で線の位置を決める*/
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
    /*線の形状*/
	background-color: #333;
	width:100%;
	height:1px;
    /*アニメーションの指定*/
	transition:all 0.3s ease-in-out;
}
/*線が伸びて背景に*/
.btnlinestretches3:hover::after {
	height:100%;
}


/* 横長 */
@media (orientation: landscape){
body#sitemap main div#cc{
	display: flex;
	flex-direction: row;
	margin-top: calc(4vw + 4em);
	}
body#sitemap main div#cc article:first-of-type .inner_width{
	margin-top: 0;
	margin-right: 2em;
	margin-left: 2em;
	}
	body#sitemap main div#cc article div.inner_width{width:auto;}
}