@media (min-width: 992px) {
    .pc {
        display: inline;
    }
    .sp {
        display: none !important;
    }
}
@media (max-width: 991px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: inline !important;
    }
}
@media (max-width: 1024px) {
    br {
        display: block;
    }
}
.fs24 {
	font-size: 24px
}
.fs32 {
	font-size: 32px
}

img {
  height: auto;
}

@media (max-width:767px) {
	.home__secHeading1 .row h1 {
		font-size: 26px;
		text-align: center;
	}
}

article h4.d-md-inline {
  display: block !important;
  margin-top: 5px;
}
.newsTag {
  margin-left: 10px;
}
ul.news_list {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
}

@media (max-width:767px) {
	#feature .inner {
	  padding-top: 40px;
	}
}
#feature a:hover {
  opacity: .7;
}
#feature .feature-item {
	position: relative;
}
/*#feature .feature-item:first-child::before {
	content: '';
	background-color: rgba(0,0,0,.6);
	display: block;
	width: calc(100% - 30px);
	height: 100%;
	position: absolute;
	z-index: 1;
}
#feature .feature-item:first-child::after {
	content: 'Coming Soon';
	color: #fff;
	font-size: 2rem;
	font-style: italic;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}*/
@media (max-width:767px) {
	#feature .feature-item {
	  margin-top: 20px;
	  padding-top: 50px;
	}
	/*#feature .feature-item:first-child::before {
		height: 80%;
	}
	#feature .feature-item:first-child::after {
		font-size: 1.6rem;
	}*/
}
#feature .feature-item span {
	background-color: #000;
	border-radius: 50%;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	position: absolute;
	top: -40px;
	left: 40px;
	width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width:767px) {
	#feature .feature-item span {
	  top: 10px;
	}
}
#feature .feature-item div {
	background-color: rgba(0,0,0,.5);
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 15px;
	position: absolute;
	bottom: 0;
	left: 15px;
	width: calc(100% - 30px);
}

.wf-active .btn.btn__works {
 visibility:visible
}
.home__works .icon-overlay a .icn-more,
.home__works .items li .text-overlay,
.home__works .owl-carousel .item .text-overlay,
.home__works .thumbs .thumb .text-overlay {
 background-color:#34426a
}
.home__works .filter li a,
.home__works .format-filter li a,
.home__works .items li .text-overlay .info p {
 font-family:'Josefin Sans',sans-serif;
 visibility:hidden
}
.home__works .filter li a {
 margin:0 15px;
 padding:0;
 display:inline-block
}
@media (max-width:767px) {
 .home__works .filter li a {
  font-size:14px
 }
}
.home__works .filter li a:focus,
.home__works .filter li a:hover {
 color:#333;
 background-color:transparent;
 border-color:transparent;
 border-bottom:2px solid #333;
 -webkit-transition:.4s;
 transition:.4s;
 padding-bottom:3px!important
}
@media (max-width:767px) {
 .home__works .filter li {
  display:inline-block
 }
}
.home__works .item .works_num {
 position:absolute;
 z-index:101;
 color:#fff;
 font-size:55px;
 top:20px;
 left:5px;
 font-family:Diplomata,cursive;
 visibility:hidden
}
@media (max-width:991px) {
 .home__works .item .works_num {
  font-size:35px;
  top:10px
 }
}
.home__works .item:focus .works_num,
.home__works .item:hover .works_num {
 color:rgba(156,169,206,.3)
}
.wf-active .home__works .filter li a,
.wf-active .home__works .format-filter li a,
.wf-active .home__works .items li .text-overlay .info p {
 visibility:visible
}
.wf-active .home__works .item .works_num {
 visibility:visible
}
.items.fullscreen li {
 width:33.333333333333%
}
.home__works.items.fullscreen li {
 width:25%
}
@media (max-width:991px) {
 .home__works.items.fullscreen li a,
 .home__works.items.fullscreen li h4,
 .home__works.items.fullscreen li p {
  font-size:10px
 }
 .home__works.items.fullscreen li a {
  margin-top:5px;
  padding:4px 4px;
  line-height:0
 }
}
@media (max-width:767px) {
 .home__works.items.fullscreen li {
  width:50%!important
 }
 .home__works.items.fullscreen li a,
 .home__works.items.fullscreen li h4,
 .home__works.items.fullscreen li p {
  font-size:10px
 }
 .home__works.items.fullscreen li a {
  margin-top:5px;
  padding:4px 4px;
  line-height:0
 }
}

 #loghouse .works-items {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
 }
 #loghouse .works-items li {
  width: 25%;
  height: 325px;
 }
 #loghouse .works-items li:nth-child(-n+3) {
  width: calc(100% / 3);
  height: 435px;
}
 #loghouse .works-items li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
 }
@media (max-width:1370px) {
 #loghouse .works-items li {
  height: 235px;
 }
 #loghouse .works-items li:nth-child(-n+3) {
  height: 310px;
 }
}
@media (max-width:1121px) {
 #loghouse .works-items li {
  height: 175px;
 }
 #loghouse .works-items li:nth-child(-n+3) {
  height: 235px;
 }
}
@media (max-width:991px) {
 #loghouse .works-items li {
  height: 140px;
 }
 #loghouse .works-items li:nth-child(-n+3) {
  height: 185px;
 }
}
@media (max-width:767px) {
 #loghouse .works-items li {
  width: 50%;
  height: 130px;
 }
 #loghouse .works-items li:nth-child(-n+3) {
  width: 100%;
  height: 255px;
 }
}


.parallax {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom center;
    position: relative;
    padding: 30vh 0;
}
#parallax1 {
    background-image: url(../img/parallax01.jpg);
}
#loghouse #parallax1 {
    background-image: url(../img/loghouse/parallax01.jpg);
	margin-top: 300px;
}
#parallax1 div {
    position: absolute;
	bottom: 10px;
	right: 10px;
	color: #fff;
}
#parallax2 {
    background-image: url(../img/parallax02.jpg);
	margin-top: 100px;
}
#loghouse #parallax2 {
    background-image: url(../img/loghouse/works_img05.jpg);
	margin-top: 100px;
}
@media screen and (max-width: 1024px) {
    .parallax {
        background-attachment: scroll;
        background-position: center;
        padding: 20vh 0;
    }
}
@media screen and (max-width: 767px) {
	#loghouse #parallax1,#parallax2 {
		margin-top: 50px;
	}
}

#column .column-termList {
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
}
#column .column-termList li a {
	background-color: #aaa;
	border-radius: 50px;
	color: #fff;
	display: inline-block;
	margin: 0 15px;
	padding: 5px 30px;
}
#column .column-termList li a:hover {
	opacity: .7;
}
@media screen and (max-width: 767px) {
	#column .column-termList {
		flex-wrap: wrap;
		margin-bottom: 30px;
	}
	#column .column-termList li a {
		margin: 0 5px 10px;
		padding: 5px 20px;
	}
	#column article.row {
		margin: 0 auto;
	}
}

#qa-wrap .card {
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#qa-wrap .card-header {
	background-color: transparent;
	border: none;
}
#qa-wrap .btn {
	background-color: transparent;
	box-shadow: none;
	color: #333 !important;
	font-size: inherit;
	padding: 10px;
	margin: 0;
	white-space: normal;
	text-indent: -12px;
  padding-left: 22px;
}
#qa-wrap .card-body {
	color: #666;
	font-size: 16px;
	padding-left: 60px;
}

#contact {
    background: url(../img/onyoku_contact.jpg) no-repeat center center / cover;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 200px 0;
	line-height: 1.4;
	text-shadow: 1px 1px 5px #000;
	text-align: center;
}
#loghouse #contact {
    background: url(../img/loghouse/works_img07.jpg) no-repeat center center / cover;
}
#contact .btn {
    background-color: #fff;
	color: #34426a !important;
	font-style: italic;
	font-weight: bold;
	font-size: 1.4rem;
	padding: 20px 50px;
	margin-top: 30px;
}
#contact .btn:hover {
    background-color: #34426a;
	color: #fff !important;
}
@media screen and (max-width: 767px) {
	#contact {
		font-size: 1.3rem;
		padding: 100px 0;
	}
	#contact div {
		padding: 0 15px;
	}
	#contact .btn {
		font-size: 1rem;
	}
}

/* interview
------------------------------------------ */
#interview {
    padding: 50px 0;
}
#interview img {
    margin-bottom: 20px;
}

.mv-area p:first-of-type {
    padding-top: 50px;
}

.interview-area01,
.interview-area02 {
    padding: 80px 0 40px;
}
.interview-area01 h2,
.interview-area02 h2 {
	border-bottom: 1px solid #34426a;
    border-left: 5px solid #34426a;
	padding: 10px 15px;
	width: 100%;
}
.interview-area01 .img-karumaru {
    position: relative;
	padding-bottom: 100px;
}
.interview-area01 .img-copyright {
    position: absolute;
	bottom: 150px;
	right: 5px;
	color: #fff;
}
.interview-area01 .img-saunage {
    position: relative;
}
.interview-area01 .img-saunage::after {
	content: '';
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(../img/interview04_img06.png) no-repeat center / contain;
	display: block;
	width: 50%;
	height: 20%;
}

#interview .nohara,
#interview .sasano {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 50px;
	min-height: 60px;
	padding-left: 80px;
    position: relative;
	width: 100%;
}
#interview .nohara::before,
#interview .sasano::before {
	content: '';
    position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 60px;
	height: 60px;
}
#interview .nohara::before {
	background-color: #34426a;
}
#interview .sasano::before {
	background-color: #ffbda3;
}
#interview .nohara::after,
#interview .sasano::after {
	color: #fff;
    position: absolute;
	top: 30px;
	left: 0;
	line-height: 0;
	text-align: center;
	width: 60px;
}
#interview .nohara::after {
	content: '野原';
}
#interview .sasano::after {
	content: '笹野';
}
#interview .nohara .text,
#interview .sasano .text {
	width: 100%;
}

@media (max-width: 576px) {
	#interview {
		padding: 0 0 50px;
	}
	.mv-area p:first-of-type {
		padding-top: 0;
	}
	.interview-area01,
	.interview-area02 {
		padding: 50px 0 0;
	}
	.interview-area01 h2,
	.interview-area02 h2 {
		font-size: 22px;
	}
	.interview-area01 .img-karumaru {
		padding-bottom: 60px;
	}
	.interview-area01 .img-copyright {
		bottom: 130px;
		font-size: 12px;
	}
	#interview .nohara,
	#interview .sasano {
		display: block;
		padding-left: 0;
	}
	#interview .nohara::before,
	#interview .sasano::before {
		position: relative;
		height: 30px;
	}
	#interview .nohara::after,
	#interview .sasano::after {
		top: 15px;
		font-size: 14px;
	}
	#interview .nohara .text,
	#interview .sasano .text {
		padding-top: 10px;
	}
}

/* ページナビ */
.interview-pagenav {
    border: 1px solid #34426a;
	position: relative;
    padding: 1rem 3rem;
    margin: 3em 0 2em;
	text-align: center;
}
.interview-pagenav:after {
    content: '>';
	position: absolute;
    top: 50%;
	right: 20px;
	transform: translateY(-50%);
	font-size: 24px;
	color: #34426a;
}
.interview-pagenav a:hover {
    text-decoration: underline;
}
.interview-pagenav-num {
    display: flex;
	justify-content: center;
    padding: 0;
    margin: 0 auto;
	text-align: center;
}
.interview04 .interview-pagenav-num {
    margin: 100px auto 50px;
}
@media (max-width: 576px) {
	.interview04 .interview-pagenav-num {
		margin: 50px auto 20px;
	}
}
.interview-pagenav-num li {
    border: 1px solid #34426a;
	color: #34426a;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
    width: 40px;
	height: 40px;
	transition: all .5s ease;
}
.interview-pagenav-num li.active {
    background-color: #34426a;
}
.interview-pagenav-num li.prev,
.interview-pagenav-num li.next {
    border: none;
}
.interview-pagenav-num li:hover {
    background-color: #34426a;
}
.interview-pagenav-num li.active:hover {
    background-color: #fff;
}
.interview-pagenav-num li a {
	display: block;
    width: 100%;
}
.interview-pagenav-num li a:hover {
	color: #fff;
}
.interview-pagenav-num li.active a {
	color: #fff;
}
.interview-pagenav-num li.active a:hover {
	color: #34426a;
}

/* 著者情報 */
.author_c {
    background: #f8f8f8;
    padding: 3rem 3rem;
    margin: 3em 0 2em;
}
.author_c .ttl {
    display: inline-block;
    border-bottom: 1px solid #7a4fae;
}
.author_c .flex {
  display: flex;
  flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.author_c .thumb {
    width: 30%;
}
.author_c .text {
    width: 65%;
}
.author_c .name {
    font-size: 20px;
    line-height: 1.5;
    display: block;
}
.author_c .thumb img {
    width: 100%;
}
.author_c .msg .fb,
.at_page .fb {
    color: #3b5998;
}
.author_c .msg .tw,
.at_page .tw {
    color: #00acee;
}
.author_c .msg .sns,
.at_page .sns {
    margin-top: 1em;
}
.author_c .msg .sns a,
.at_page .sns a {
    font-size: 1.8em;
}
.author_c .msg .sns .mr-1,
.at_page .sns .mr-1 {
    margin-right: .5em;
}
.at_page li {
    list-style: disc;
}
.at_page li p {
    margin-bottom: 0;
}
.at_page h4 {
    border-radius: 0;
    background-color: transparent;
    font-weight: bold;
    border-left: 3px solid #171c60;
    padding: 0 15px;
}
.prof-table tr p {
    margin: 0;
}
@media (max-width: 767px) {
    .author_c .name {
        font-size: 18px;
    }
    .author_c .thumb, .author_c .text {
        width: 100%;
    }
}




