@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Montserrat:wght@400;500;700;900&display=swap'); */

html[lang="ja"]{
	margin-top: 0 !important;
}
body{
	font-family:Montserrat,"Noto Sans JP","游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	letter-spacing: 0.02rem;
}
:root {
--my-orange: #F96503;	
--my-blue:#01C1C0;
--my-small:.875rem;/*14*/  
--my-Xsmall:.812rem;/*13*/  
--my-XXsmall:.8rem; /*12*/
--my-Large:.1.25em; /*20*/
--my-darkgray:#313131;
--my-gray: #727272;
--my-lightgray:#B2B2B2;
--my-light: #F4F4F4;
}
/*------------------
 * defaultsetting
 *------------------*/
* {
	margin: 0;
	padding: 0;
	list-style:none;
	outline:0;
	vertical-align: baseline;
	background:transparent;
	text-decoration: none;
	box-sizing: border-box;
}
ol, ul {
	padding-left: 0;
	margin-bottom: 0;
  }
img{
	max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering:auto;
}
img[height]{
	height: auto;
}
img[src*="mytheme/assets/images/cmn/thumbnail.png"]{
	object-fit: contain !important;
	background-color: #f0f0f1;
}
object {
    pointer-events: none;
}
a{
	transition : .5s;
}
a:hover{
    color:color-mix(in srgb, var(--bs-link-color) 50%, white);
	transition : .5s;
}
a object{
	pointer-events: none;
	transition: 0.5s;
	vertical-align:bottom;
}
a:hover object{
	opacity: 0.7;
	transition: 0.5s;
}
/*material symbols*/
.material-symbols-rounded {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 24
}
/*txt*/
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
	font-weight: 700!important;
	letter-spacing: 0.05rem;
}
.small{
    font-size:var(--my-small);
}
.Xsmall{
    font-size:var(--my-Xsmall);
}
.XXsmall{
    font-size:var(--my-XXsmall);
}

.Large{
	font-size:var(--my-Large);
}
/*colors*/
.my-orange{
	color:var(--my-orange);
} 
.my-blue{
	color:var(--my-blue);
}
.my-gray{
	color:var(--my-gray);
} 
.bg-orange{
	background-color:var(--my-orange)!important;
}
.bg-blue{
	background-color:var(--my-blue)!important;
}
.bg-body-tertiary{
	background-color:var(--my-light)!important;
}
/*border*/
.border-dotted{
	border-bottom:1px dotted var(--my-gray);
}
.border-dotted-t{
	border-top:1px dotted var(--my-gray);
}
.border-dotted-s{
	border-left:1px dotted var(--my-gray);
}
.border-dotted-e{
	border-right:1px dotted var(--my-gray);
}
/*--------------------------------
layout
--------------------------------*/
.wrapper{
	/* padding-left: 20px;
	padding-right: 20px; */
	width: 100%;
	margin: 0 auto;
	max-width:1300px;
	position: relative;
	overflow: hidden;
}
section{
	padding:4.5em 0;
}
/*--------------------------------
cmn parts
--------------------------------*/
/* --- text ---*/
h1.section-title{
	margin-bottom:1.5em;
}
.section-title span{
	display: block;
	line-height: 1.8;
	font-size:1rem;
}
#post-side .section-title span{
    font-size:0.8rem;
}
.section-title.orange::first-letter {
	color: var(--my-orange);
}
.section-title.blue::first-letter  {
	color: var(--my-blue);
}
.section-title.white{
	color: var(--bs-white);
}
.section-subtitle{
	font-weight:500!important;
	position: relative;
	padding-bottom:1em;
	margin-bottom:.8em;
 	&:after{
		position:absolute;
		content:"";
		width:26px;
		height:3px;
		left:0;
		bottom:0;
		background-color:var(--bs-black);
	}
}
.section-subtitle2{
	font-weight:500!important;
	position: relative;
	padding-bottom:.8em;
	margin-bottom:1em;
	border-bottom:2px solid var(--my-light);
 	&:after{
		position:absolute;
		content:"";
		width:80px;
		height:2px;
		left:0;
		bottom:-2px;
		background-color:var(--bs-black);
	}
}
.section-subtitle3{
	font-weight:500!important;
	position: relative;
	padding:.5em;
	margin-bottom:1em;
	color:var(--bs-white);
	background:var(--my-blue);
 	&:before{
		position: absolute;
		content: '';
		top: 100%;
		left: 0;
		border: none;
		border-bottom: solid 15px transparent;
		border-right: solid 20px color-mix(in srgb, var(--my-blue) 70%, black);;
	}
}
.section-subtitle.blue:after,
.section-subtitle2.blue:after{
	background-color:var(--my-blue);
}
.section-subtitle.orange:after,
.section-subtitle2.orange:after{
	background-color:var(--my-orange);
}

/*--- 最初の文字---*/
.font-feature-settings:first-letter{
	font-feature-settings: "palt";
}
.font-capitalize{
	text-transform:capitalize;
}
/* --- viewall ---*/
.viewall{
	font-size:var(--my-XXsmall);
	font-weight: 700;
	gap: 1rem;
	& svg{
		width:22px;
		height:22px;
		cursor: pointer;
	}
}
a.viewall:hover svg{
	opacity: 0.7;
	transition : .5s;
}
.viewall-right{
	position:relative;
	& .viewall{
		position:absolute;
		top:50%;
		right:0;
		text-align: right;
	}
}
/* --- ボタン ---*/
.my-btn{
	text-align: center;
}
.my-btn a{
	display: inline-block;
	text-align: center;
    border:1px solid var(--bs-black);
	border-radius: 5em;
	padding: .8em 3em;
	min-width: 180px;
	letter-spacing: 0.1rem;
	transition: 0.2s;
    cursor: pointer;
	position: relative;
	z-index: 4;
	font-size:.9em;
}
.small.my-btn a{
	padding: .5em 1em;
}
.my-btn a:hover{
	transition: 0.3s ease-in-out;
}
.my-btn a:before{
	position: absolute;
	content:"";
	right: -10px;
	top:calc(50% - .5px);
	width:30px;
	height: 1px;
	background: var(--bs-black);
	transition: 0.3s ease-in-out;
}
.my-btn a:after{
	position: absolute;
	content:"";
	right: -22px;
	top:calc(50% - .5px);
	transform: translateY(-50%); 
    border: 4px solid transparent;
    border-left: 8px solid var(--bs-black);
	transition: 0.3s ease-in-out;
}
.my-btn.btn-back a:before{
	left: -10px;
	right:auto;
}
.my-btn.btn-back a:after{
	left: -18px;
	right:auto;
	transform: translateY(-50%); 
	border-right: 8px solid var(--bs-black);
	border-left:none;
}
.my-btn a:hover:before{
	right: -15px;
	transition: 0.3s ease-in-out;
}
.my-btn a:hover:after{
	right: -27px;
	transition: 0.3s ease-in-out;
}
.my-btn.btn-back a:hover:before{
	left: -15px;
}
.my-btn.btn-back a:hover:after{
	left: -23px;
	right:auto;
}
.my-btn2 {
	& a{
		display: inline-block;
		text-align: center;
		border:none;
		border-radius: .375rem;
		padding: .8em 2em;
		min-width: 180px;
		letter-spacing: 0.1rem;
		transition: 0.2s;
		cursor: pointer;
		position: relative;
		z-index: 4;
		color:var(--bs-white);
		background:var(--my-orange);
		line-height: 1!important;
		border-bottom:3px solid color-mix(in srgb, var(--my-orange) 80%, black);
	}
	& a:hover{
		opacity: .8;
	}
}
/*--- アイコン---*/
.icon-small{
    font-size:20px;
}
.icon-Xsmall{
    font-size:12px!important;
}
.icon-large{
    font-size:48px;
}
.material-symbols-rounded-light {
    font-variation-settings:
    'FILL' 1,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24
}
.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 600,
  'GRAD' 0,
  'opsz' 24
}
.material-symbols-rounded-fill {
	font-variation-settings:
	'FILL' 1,
	'wght' 600,
	'GRAD' 0,
	'opsz' 24
  }
/*--- pagetop ---*/
#pagetop {
    position: fixed;
    bottom: 20px;
    right: 20px;
	z-index: 5;
}
#pagetop a:link,
#pagetop a:visited{
	text-decoration: none;
	color: var(--my-orange);
	opacity: .8;
}
#pagetop a:hover{
	opacity: .5;
}
/*--- 行で省略 ---*/
.omission{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.omission2{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; 
	overflow: hidden;
}
.omission3{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; 
	overflow: hidden;
}
.omission4{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4; 
	overflow: hidden;
}


/*----------------------------
コンテンツ 共通
----------------------------*/
/*--- 記事一覧共通---*/
.article-list{
	position:relative;
	& .article-list-link {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 2;
	}
	& figure img{
		transition: 0.5s;
	}
	& figure{
		overflow: hidden;
	}
	& .article-meta a{
		z-index: 3;
		position: relative;
	}
	& .article-body a{
		z-index: 3;
		position: relative;
	}
}
.article-list:hover figure img{
	transform: scale(1.05);
	transition: 0.5s;
}
.tag{
	font-size:var(--my-Xsmall);
	& a{
		color:var(--my-lightgray);
		z-index: 4;
		width: 100%;
		position: relative;
	}
	& a:hover{
		color:var(--my-gray);
	}
}
.tag-list{
    & span{
        display: inline-block;
    }
	& a{
		color:var(--my-gray);
		z-index: 4;
		width: 100%;
		position: relative;
	}
	& a:hover{
		color:var(--my-body);
	}
}
#post-side{
	& .icon-link{
		gap:0;
		& span{
			color:var(--my-orange);
		}
	}
	
}
#post{
	article p{
		line-height: 2;
	}
	.section-subtitle2{
		margin-top:1.5em;
	}
}
/*--- 建築用語タグ ---*/
.glossary-words span{
	display: inline-block;
	border-radius: 50rem;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	line-height: 1;
	border:1px solid var(--bs-black);
	padding:8px 20px;
	margin-top:15px;
	margin-right:10px;
}
.glossary-words span.ac{
	background: #000;
	a{
		color: #fff;
	}
}
.glossary-words span:last-child{
	margin-right: 0;
}

/*--- 注目のタグ（建築用語） ---*/
.glossary-words-list >div:first-of-type{
	border-right:1px dotted var(--my-gray);
}
/*--- 建築用語頭文字 ---*/
.glossary-words-initials a{
	display: inline-block;
	border-radius: 50rem;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	line-height: 1;
	background:var(--my-light);
	padding:15px 0;
	width:100%;
}
/*--- 投稿系 ---*/
/*エディターフォーマット*/
.editor-body{
    & h3{
    font-size:1.25rem;
    font-weight:500!important;
    position: relative;
    padding-bottom:.8em;
    margin-bottom:1em;
    border-bottom:2px solid var(--my-light);
    margin-top:2em;
        &:after{
        position:absolute;
        content:"";
        width:80px;
        height:2px;
        left:0;
        bottom:-2px;
        background-color:var(--my-blue);
        }
    }
    & h4,
    & h5{
        
        font-size:1.06rem;
        margin-top:1.5rem;
    }
    & h6{
        font-weight:500!important;
    }
    & ol,
    & ul{
        margin-bottom: 1rem;
        padding-left: 1rem;
    }
    & li {
        list-style-type:disc;
        margin-bottom: 6px;
    }
    & li>p{
        margin-top:1rem;
      }
    & li+li{
        margin-top:.5em
    }
    & blockquote {
    padding: 0 1em;
    padding-left: 1em;
    color: var(--my-darkgray);
    border-left: .25em solid var(--my-lightgray);
    font-size: 1rem;
  	font-style: normal;
    }
}
/*目次*/
#toc_container_wrap{
	text-align: center;
}
#toc_container{
    background:var(--my-light);
    padding: 1.5rem 1.5rem 2rem;
    margin-bottom: 3rem;
	text-align: left;
	display: inline-block;
	.toc_title{
		position:relative;
		font-size:1.25rem;
		font-weight:500!important;
		&:after{
			position:absolute;
			content:"";
			width:40px;
			height:2px;
			left:0;
			bottom:-2px;
			background-color:var(--my-blue);
		}
	}
	.toc_title{
		margin-bottom: 0;
	}
	ul.toc_list{
		padding-top: 1rem;
		padding-left: 0rem!important;
	}
	ul.toc_list li:not(:last-of-type) {
	   margin-bottom:.8rem;
	}
	ul.toc_list >li:last-of-type {
		margin-bottom:0;
	}
	ul.toc_list >li{
		position:relative;
		list-style-position: outside;
		padding-left:1rem;
		list-style: none!important;
		&:after{
			position:absolute;
			content:"";
			width:.5rem;
			height:.5rem;
			left:0;
			top:.5rem;
			border-top: 2px solid var(--my-orange);
			border-right: 2px solid var(--my-orange);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	}
	ul.toc_list ul{
		list-style: none!important;
		margin-top:.8rem;
		padding-left: 0rem!important;
	}
	ul.toc_list ul li{
		list-style: none!important;
		position:relative;
		list-style-position: outside;
		padding-left:1rem;
		&:after{
			position:absolute;
			content:"";
			width:2px;
			height:2px;
			left:0;
			top:.5rem;
			border: 3px solid var(--my-orange);
		}
	}
}
#toc_container.oc{
	position: relative;
	label.toggle{
		position: absolute;
		top: 2.2rem;
		right: 1.4rem;
		cursor: pointer;
		&:after{
			content: "［+開く］";
			color: #01c1c0;
		}
		input{
			display: none;
		}
	}
	ul.toc_list{
		padding-top: 0;
		height: 0;
		overflow: hidden;
	}
	label.toggle:has(input:checked){
		&:after{
			content: "［-閉じる］";
		}
	}
	label.toggle:has(input:checked)+ul.toc_list{
		padding-top: 1rem;
		height: auto;
	}
}
/*pager*/
.page-link.disabled, .disabled > .page-link {
  color: var(--bs-border-color);
  pointer-events: none;
  background-color: transparent;
  border-color: var(--bs-pagination-disabled-border-color);
}
p.pager-btn{
	margin-bottom:0;
}
a .pager-btn {
	display: inline-block;
	text-align: center;
    border:1px solid var(--bs-black);
	border-radius: 50%;
	width:30px;
	height:30px;
	transition: 0.2s;
    cursor: pointer;
	position: relative;
	z-index: 4;
	font-size:.9em;
}
a:hover .pager-btn {
	transition: 0.3s ease-in-out;
}
a .pager-btn:before{
	position: absolute;
	content:"";
	right: 15px;
	top:calc(50% - .5px);
	width:25px;
	height: 1px;
	background: var(--bs-black);
	transition: 0.3s ease-in-out;
}
a .pager-btn:after{
	position: absolute;
	content:"";
	right: 10px;
	top:calc(50% - .5px);
	transform: translateY(-50%); 
    border: 3px solid transparent;
    border-left: 5px solid var(--bs-black);
	transition: 0.3s ease-in-out;
}
a .pager-btn.btn-back:before{
	right: auto;
	left: 15px;
	transition: 0.3s ease-in-out;
}
a .pager-btn.btn-back:after{
	right: auto;
	left: 10px;
	top:calc(50% - .5px);
	border-left:none;
    border-right: 5px solid var(--bs-black);
	transition: 0.3s ease-in-out;
}
a:hover .pager-btn:before{
	right: 10px;
	transition: 0.3s ease-in-out;
}
a:hover .pager-btn:after{
	right: 5px;
	transition: 0.3s ease-in-out;
}
a:hover .pager-btn.btn-back:before{
	right: auto;
	left:10px;
	transition: 0.3s ease-in-out;
}
a:hover .pager-btn.btn-back:after{
	right: auto;
	left:5px;
	transition: 0.3s ease-in-out;
}
.Singlepager .disabled h4{
	display: none;
}
.Singlepager .post_thumbnail img{
	height:100%;
	object-fit: cover;
}
 /*Archivepagination*/
 .pagination{
	& .page-link{
		border:none;
	}
	& .active > .page-link, .page-link.active {
		z-index: 3;
		color: var(--my-blue);
		background-color:transparent;
		border-color:transparent;
	}
 }
@media screen and (max-width: 767.98px){
	.viewall{
		& svg{
			width:16px;
			height:16px;
		}
	}
	.viewall-right .viewall{
		top:100%;
	}
}
@media screen and (max-width: 575.98px){
	.Singlepager p,
	.Singlepager .post_thumbnail{
		display: none;
	}
	p.pager-btn{
		margin-bottom:0;
	}
}
/*投稿系サイドの「コンテンツ」エリア*/
#contents_side{
	& a{
		display: block;
		opacity: 1;
		transition : .5s;
	}
	& a:hover{
		opacity: 0.7;
		transition : .5s;
	}
	& a.column{
		background:url(../images/column/visual-bg.png);
		background-size: auto 100%;
		background-position: 50% 0;
	}
	& a.interview{
		background:url(../images/interview/visual-bg.png);
		background-size: auto 100%;
		background-position: 50% 0;
	}
	& a.manga{
		background:url(../images/manga/visual-bg.png);
		background-size: auto 100%;
		background-position: 50% 0;
	}
	& a.recommended{
		background:url(../images/recommended/visual-bg.png);
		background-size: auto 100%;
		background-position: 50% 0;
	}
}

/*関連記事*/
#connections .article-list:not(:last-of-type){
	border-bottom:1px dotted var(--my-gray);
}

/*---スライド---*/
.general-slider1{
	position: relative;
    cursor: pointer;
    &  .slick-list{
        position: relative;
        display: block;
        overflow: hidden;
        }
    &  .slick-track{
        position: relative;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        }
    &  .slick-arrow{
        display: block;
        text-indent: -10000px;
        outline:none;
        line-height:1px;
        font-size:1px;
        height: 40px;
        width: 30px;
        cursor: pointer;
        position: absolute;
        top: calc(50% - 20px);
        left: -50px;
        z-index: 1;
        border: none;
        }
    & .slick-next{
        left: auto;
        right: -50px;
        }
    & .slick-arrow:before{
        content: "";
        display: block;
        width:10px;
        height: 10px;
        position: absolute;
        top: calc(50% - 5px);
        border-top: 2px solid var(--my-orange);
        border-left: 2px solid var(--my-orange);
        opacity: .8;
        }
    & .slick-prev:before{
        transform: rotate(-45deg);
        left: calc(50% - 0px);
        }
    & .slick-next:before{
        transform: rotate(135deg);
        left: calc(50% - 20px);
        }
    & .pointer{
        display: table;
        margin: 20px auto 0;
        }
    & .pointer li{
        display: table-cell;
        padding: 0 3px;
        }
    & .pointer li button{
        display: block;
        text-indent: -10000px;
        outline:none;
        line-height:1px;
        font-size:1px;
        background-color: var(--my-light);
        width: 10px;
        height: 10px;
        border-radius: 100%;
        border: none;
        cursor: pointer;
        }
    & .pointer .slick-active button{
        background-color: var(--my-orange);
        }
}

/*----------------------------
コンテンツ その他それぞれ
----------------------------*/
/*--- 企業検索 ---*/
.companysearch-inner{
	position:relative;
	& ul{
		display: flex;
		gap: 2rem;
		& li{
			width:100%;
		}
		& li a{
			border-radius: 2rem;
			background-color: var(--my-blue);
			width:100%;
			display: block;
			text-align: center;
			aspect-ratio: 1/1;
			position: relative;
			color:var(--bs-white);
			z-index: 1;
		}
		& li a:hover{
				opacity: .6;
			}
		& li a div{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			width:100%;
		}
		& object{
			width:75px;
			height:75px;
			margin-bottom: 15px;
		}
	}
	& .corporate{
		& li a{
			background-color: var(--my-orange);
		}
	}
}
.companysearch-inner:after{
	border-right:1px dotted var(--my-lightgray);
	position:absolute;
	top:0;
	left:0;
	content:"";
	width:50%;
	height:100%;
	z-index: 0;
}
.companysearch-content {
	display: none;
	position:relative;
}
.companysearch-content:before {
  content:"";
  position:absolute;
  top:0;
  left:calc(50% - 15px);
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid var(--my-light);
}
/*--- 工事内容タグ ---*/
.company-words{
	& span{
		display: inline-block;
		border-radius: 50rem;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		line-height: 1;
		background:var(--my-light);
		padding:8px 20px;
		margin-right:10px;
		margin-top:10px;
	}
	& span.ac{
		background: #000;
		a{
			color: #fff;
		}
	}
}
@media screen and (max-width: 991.98px){
	.companysearch-inner{
		& ul{
			& li a{
				border-radius:1rem;
			}
			& object{
				width:35px!important;
				height:35px!important;
			}
		}
		& span{
			font-size: 1.3vw;
		}
	}
}
@media screen and (max-width: 767.98px){
	.companysearch-inner{
		& ul{
			& object{
				width:12vw!important;
				height:12vw!important;
			}
		}
		& span{
			font-size: 2.5vw;
		}
		& h5 object{
			width:5vw!important;
			height:5vw!important;
		}
	}
	.companysearch-inner:after{
		border-right:none;
	}
}

/*---プロフェッショナル --- */
#professionals{
	& .article-card {
		border-bottom:1px dotted var(--my-lightgray);
	}
	& .article-list:nth-child(-n+2) .article-card{
		border-top:1px dotted var(--my-lightgray);
	}
}
.article-thumb.professionals{
	& figure.ratio {
		border-radius:50%;
	}
}
@media screen and (max-width: 767.98px){
	#professionals{
		& .article-list:nth-child(2) .article-card{
			border-top:none;
		}
	}
}

/*--- 新着情報 --- */
.newstopics-inner{
	& .article-card{
		max-width:960px;
		margin: 0 auto;
	}
	& .article-list:first-of-type .article-card{
		border-top:1px dotted var(--my-gray);
	}
}

/*--- よくある質問　---*/
#part-faq{
	& article.article-list:last-of-type{
		border-bottom:none;
	}
    & .faq-q{
        font-weight: 500;
		position: relative;
		padding-left:4rem;
    }
	& .faq-q:before{
		content:"Q";
		position: absolute;
		left:0;
		top:-1rem;
		display: inline-block;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		background: var(--my-blue);
		text-align:center;
		line-height:3rem;
		color:var(--bs-white);
		font-size:1.5rem;
	}
	& .faq-a{
		position: relative;
		padding-left:4rem;
	}
	& .faq-a:before{
		content:"A";
		position: absolute;
		left:0;
		top:0;
		display: inline-block;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		background: var(--my-orange);
		text-align:center;
		line-height:3rem;
		color:var(--bs-white);
		font-size:1.5rem;
	}
}

/*--- 記事内署名---*/
#part-signature{
	border: 5px solid var(--my-light);
	padding: 2rem;
}
@media screen and (max-width: 767.98px){
	#part-signature{
		padding: 1rem;
		& img{
			max-width:70%;
		}
	}
}

 
/*----------------------------
header
----------------------------*/
#header{
	margin: 0 auto;
	width:100%;
	position: fixed;
	z-index: 9999;
	background:var(--bs-white);
	& a{
		display: inline-block
	}
	& object{
		pointer-events: none;
	}
	& #header-nav{
		position: relative;
		background:var(--bs-white);
		overflow: hidden;
		& .header-logo{
			width: 350px;
			margin-bottom: 0;
		}
		& .header-inner{
			width: calc(100% - 350px);
			max-width: 650px;
			padding-right:70px;
			& nav ul li{
				width: 20%;
			}
			& nav ul span{
				display: block;
				font-size: var(--my-small);
				font-weight: 500;
			}
		}
	}
}
#bm{
	display: flex;
	position: absolute;
	top: 20px;
	right: 30px;
	height: 24px;
	width: 24px;
	z-index: 14;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.2s ease-in-out;
	& i{
		display: block;
		width: 24px;
		height: 3px;
		background: var(--bs-black);
		position: relative;
		transition: 0.3s ease-in-out;
	}
	& i:before,
	& i:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: var(--bs-black);
	position: absolute;
	top: -10px;
	left: 0;
	transition: 0.3s ease-in-out;
	}
	& i:after{
		top: 10px;
	}
}
.open #bm{
	& i{
	background: rgba(255,255,255,0);
	}
	& i:before,
	& i:after{
	top: 0;
	transform: rotate(225deg);
	background: var(--bs-black);
	}
	& i:after{
		transform: rotate(-225deg);
	}
}
#shade{
	width: 100%;
	height: 100vh;
	background: var(--bs-white);
	background-size:cover,cover;
	position: fixed;
	top:0;
	left:0;
	opacity: 0;
	z-index: 9;
	pointer-events: none;
	transition: 0.4s ease-in-out;
}
.open #shade{
	opacity: 1;
	pointer-events: auto;
	top:0;
	left:0;
}
#shade-menu{
	transition: 0.4s ease-in-out;
	position: fixed;
	visibility: hidden;
	opacity: 0;
	z-index: 10;
	pointer-events: none;
	width: 100%;
	height: 100vh;
  	overflow: auto;
	top:110px;
	.footer-menu{
		& h4{
			color:var(--my-darkgray);
			border-top:1px dotted var(--my-gray);
		}
		& nav li{
			font-size:var(--my-Large);
			font-weight: 700;
			& span{
				font-size:var(--my-XXsmall);
				display: block;
			}
		}
		
		& nav li:not(:last-of-type){
			margin-bottom:1.5rem;
		}

		& .footer-menu-tag > div{
			font-size:var(--my-Xsmall);
		}
	}
	.footer-foot{
		& nav ul{
			font-size:var(--my-small);
		}
	}
}
.open #shade-menu{
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	padding-left: 10px;
	padding-right: 10px;
}
/*　上に上がる動き　*/
#header.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}
/*　下に下がる動き　*/
#header.DownMove{
	animation: DownAnime 0.5s forwards;
	box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

@media (max-width: 991.98px) {
	#header {
		position:static;
		padding: 15px 0 10px !important;
		& h1 object{
		}
		& nav object{
			width:30px;
		}
		& #header-nav{
			display: block;
			width:100vw;
			& .header-logo{
				width: 100vw;
				margin-bottom: 10px;
				a{
					width: 300px;
					object{
						width: 100%;
						height: auto;
					}
				}
			}
			& .header-inner{
				width:100vw;
				max-width: none;
				padding-right: calc(var(--bs-gutter-x) * .5);
        		padding-left: calc(var(--bs-gutter-x) * .5);
				& nav ul span{
					font-size: var(--my-Xsmall);
					font-weight: 500;
				}
			}
		}
	}
	.open .header-inner nav ul,
	.open .header-logo{
	}
	
	#bm{
		top: 2.1rem;
		right: 1.5rem;
		position: fixed;
	}
	#shade-menu{
		top:0;
		padding-top: 45px;
	}
}
@media (max-width: 500px) {
	#header {
		& nav object{
			width:25px;
		}
		& #header-nav{
			& .header-logo{
				a{
					width: 200px;
					position: relative;
					z-index: 100;
				}
			}
			& .header-inner{
				padding: 0 2px;
				& nav ul span{
					letter-spacing: -0.1em;
					line-height: 1;
				}
			}
		}
		#bm{
			top: 1.4rem;
			right: 1.2rem;
		}
	}
}
/*---lv---*/
.visual-bg{
	background:var(--my-orange);
	position: relative;
}
.visual-bg:before{
		content:"";
		position: absolute;
		height:100%;
		width: 100%;
		clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
    	background-color: var(--my-blue);
		z-index: 0;
		top:0;
		left:0;
}
#lv{
	padding-top:110px;
	& section{
		padding-top:4.5em;
		padding-bottom:4.5em;
        text-transform:capitalize;
	}
}
@media (max-width: 991.98px) {
	#lv{
		padding-top:0;
	}
}
/*----------------------------
footer
----------------------------*/
body > footer{
	background:var(--my-darkgray);
	position:relative;
	z-index: 3;
    color:var(--bs-white);
    & a{
	    color: var(--bs-white);
    }
    & a:hover{
        color:var(--my-lightgray);
    }
    & .wrapper{
        max-width:1600px;
    }
	.footer-top{
		& a{
			display: inline-block
		}
		& object{
			pointer-events: none;
		}
	}
	.footer-menu{
		& h4{
			color:var(--my-lightgray);
			border-top:1px dotted var(--my-gray);
		}
		& nav li{
			font-size:var(--my-Large);
			font-weight: 700;
			& span{
				font-size:var(--my-XXsmall);
				display: block;
			}
		}
		
		& nav li:not(:last-of-type){
			margin-bottom:1.5rem;
		}

		& .footer-menu-tag > div{
			font-size:var(--my-Xsmall);
		}
	}
	.footer-foot{
		& nav ul{
			font-size:var(--my-small);
		}
	}
}
/*----------------------------
aside
----------------------------*/
#ranking{
	.wrapper{
		overflow: visible;
	}
	counter-reset: number 0;
	& h1.section-title {
		margin-bottom: 1em;
	}
	/* & .ranking-slider-wrap{
		width: 120vw;
		margin-right: calc(100% - 50vw); 
		overflow: scroll;
		scrollbar-width: none;
	}
	& .ranking-slider-wrap::-webkit-scrollbar{
		display: none;
	} */
	& .article-list{
		position: relative;
		padding-top:20px;
	}
	& .article-list:not(:last-child) {
		margin-right:2vw;
	}
	& .article-list:before {
		counter-increment: number 1; 
		content: counter(number) " "; 
		position: absolute;
		left: calc(100% - 20px);
		width: 40px;
		height: 40px;
		text-align: center;
		color: var(--bs-white);
		line-height:40px;
		background: var(--my-orange);
		border-radius: 50%;
		top: 2px;
		font-size:1.25rem;
		font-weight: 700;
		z-index: 2;
	}
	& .article-card{
		background:var(--bs-white);
		padding:20px;
		flex-grow:1
	}
}
.ranking-slider{
	position: relative;
    cursor: pointer;
    &  .slick-list{
        position: relative;
        display: block;
        overflow: hidden;
        }
    &  .slick-track{
        position: relative;
        top: 0;
        left: -5px;
        display: flex;
        justify-content: center;
        align-items: stretch;
        }
    &  .slick-arrow{
        display: block;
        text-indent: -10000px;
        outline:none;
        line-height:1px;
        font-size:1px;
        height: 40px;
        width: 30px;
        cursor: pointer;
        position: absolute;
        top: calc(50% - 20px);
        left: -50px;
        z-index: 1;
        border: none;
        }
    & .slick-next{
        left: auto;
        right: -50px;
        }
    & .slick-arrow:before{
        content: "";
        display: block;
        width:10px;
        height: 10px;
        position: absolute;
        top: calc(50% - 5px);
        border-top: 2px solid var(--my-orange);
        border-left: 2px solid var(--my-orange);
        opacity: .8;
        }
    & .slick-prev:before{
        transform: rotate(-45deg);
        left: calc(50% - 0px);
        }
    & .slick-next:before{
        transform: rotate(135deg);
        left: calc(50% - 20px);
        }
    & .pointer{
        display: table;
        margin: 20px auto 0;
        }
    & .pointer li{
        display: table-cell;
        padding: 0 3px;
        }
    & .pointer li button{
        display: block;
        text-indent: -10000px;
        outline:none;
        line-height:1px;
        font-size:1px;
        background-color: var(--my-light);
        width: 10px;
        height: 10px;
        border-radius: 100%;
        border: none;
        cursor: pointer;
        }
    & .pointer .slick-active button{
        background-color: var(--my-orange);
        }
}
@media screen and (max-width: 767.98px){
	#ranking{
		.wrapper{
			overflow: hidden;
		}
		& .ranking-slider-wrap{
			width: 100%;
			margin-right: 0; 
			/* overflow:hidden; */
		}
		& .article-list:not(:last-child) {
			margin-right:25px;
		}
		& .article-card{
			padding:10px;
		}
		& .article-list:before {
			left: calc(100% - 35px);
			top: 5px;
			font-size:1rem;
		}
	}
}