@charset "UTF-8";
/*
 * index.css
 *
 */


/*==================================
          Font Style
===================================*/
.page_ttl {
	margin:0 auto 50px;
	padding:60px 0 37px;
	background-image:url(../img/til-w.jpg);
	background-position:50% 10%;
	background-repeat:no-repeat;
	background-size:100% auto;
}
.page_ttl::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0,0,0,0) 0%,rgba(0,55,127,0.6) 100%);
}
.sectionLv01 {
    margin-top:84px;
    position: relative;
    width:100%;
}
.sectionLv01 h2 {
	position:relative;
	font-size:1.7vw;
	font-weight:bold;
	color:#fff;
	line-height:3em;
}
.ttl_en {
	margin:0 0 20px;
    font-size: 3vw;
    color: #FFFFFF;
    letter-spacing: 15px;
    vertical-align: middle;
    font-weight: bolder;
	border-bottom:#fff solid 2px;
}

@media screen and (max-width: 600px) {

.page_ttl {
	padding:5vw 0 20px;
	
	
}
.sectionLv01 h2 {
padding:0px;
}
.ttl_en {
    letter-spacing: 2vw;
	font-size: 5vw;

}
.sectionLv01 h2 {
	font-size:3vw;
}
}


.f-p{
	border:1rem solid aliceblue;

}
/*==================================
          Font Style End
===================================*/
/*==================================
              Buttom
==================================*/
.view_more_link h6{
	width:200px;
	margin:20px auto;
	background-color:#003366;
	
}
.view_more_link a {
	display:block;
	padding: 5px 20px 5px 6px;
	color:#fff;
	text-decoration:none;
	text-align:center;
	font-size:16px;
}
.view_more_link a::after {
    font-family: 'Font Awesome 5 Free';
    content: '\f105';
    color: #fff;
    font-weight: 900;
	float:right;
}
/*==================================
          top_contents01
==================================*/
.effect-fade-left{
	padding:30px;
}
.effect-fade-right{
	padding:30px;
}

#top_contents01 {
	margin-top: 120px;
    width: 1100px;
}

#top_contents01 h2 {
    margin: 30px auto 50px;
    font-weight: bold;
	text-align:center;
	color:#000000;
}
.f-p p {
	font-size: 23px;
    font-weight: 900;
    background: aliceblue;
    width: auto;
	
}
#top_contents01 h2 span {
	font-family: 'Noto Serif JP', serif;
    font-size: 16px;
}
#top_contents01 h2 span:after {
	content: "\A" ;
	white-space: pre ;
}
#top_contents01 li h3 {
	margin:0 auto;
	font-size:30px;
	font-weight:bold;
	text-align:left;
}
#top_contents01 li:nth-of-type(1) h3 {
	color:#498E37;
	border-bottom:#498E37 solid 1px;
}
#top_contents01 li:nth-of-type(2) h3 {
	color: #a48575;
    border-bottom: #a48575 solid 1px;
}
#top_contents01 li:nth-of-type(3) h3 {
	color: #afaf11;
    border-bottom: #febd11 solid 1px;
}
#top_contents01 li:nth-of-type(4) h3 {
	color: #0165bb;
    border-bottom: #0075cd solid 1px;
}
#top_contents01 li:nth-of-type(5) h3 {
	color: #0165bb;
    border-bottom: #0075cd solid 1px;
}
#top_contents01 li:nth-of-type(6) h3 {
	color:#6C5132;
	border-bottom:#6C5132 solid 1px;
}
#top_contents01 li h4 {
	font-family: 'Noto Serif JP', serif;
	margin:0 auto;
	font-size:24px;
	font-weight:bold;
	text-align:left;
}
#top_contents01 li:nth-of-type(1) h4 {
	color:#0C3774;
}
#top_contents01 li:nth-of-type(2) h4 {
	color:#498E37;
}
#top_contents01 li:nth-of-type(3) h4 {
	color:#6C5132;
}
#top_contents01 li {
	margin:70px auto;
	padding:100px 0 100px 0px;
	background-repeat:no-repeat;
	background-size:700px auto;
}
#top_contents01 li:nth-of-type(1) {
	background-image:url(../img/06.jpg);
	background-position:left;
}
#top_contents01 li:nth-of-type(2) {
	background-image:url(../img/03.jpg);
	background-position:right;
}
#top_contents01 li:nth-of-type(3) {
	background-image:url(../img/04.jpg);
	background-position:left;
}
#top_contents01 li:nth-of-type(4) {
	background-image:url(../img/works_18.jpg);
	background-position:right;
}

#top_contents01 li div {
	float: right;
	width: 500px;
	
	}
#top_contents01 li:nth-of-type(2) div {
	float: left;
}
#top_contents01 li:nth-of-type(4) div {
	float: left;
}
#top_contents01 li:nth-of-type(6) div {
	float: left;
}
#top_contents01 li p {
	padding:30px 20px 10px;
	text-align: inherit;
	font-family: "Sawarabi Gothic";
}
.effect-fade {
	opacity : 0;
	-moz-opacity: 0;
	-webkit-opacity: 0;
	-o-opacity: 0;
	-ms-opacity: 0;
	transform : translate(0, 145px);
	-moz-transform : translate(0, 145px);
	-webkit-transform : translate(0, 145px);
	-o-transform : translate(0, 145px);
	-ms-transform : translate(0, 145px);
	transition : all 1000ms;
	-moz-transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-o-transition : all 1000ms;
	-ms-transition : all 1000ms;
}
.effect-fade-right {
	opacity : 0;
	-moz-opacity: 0;
	-webkit-opacity: 0;
	-o-opacity: 0;
	-ms-opacity: 0;
	transform : translate(200px, 0px);
	-moz-transform : translate(200px, 0px);
	-webkit-transform : translate(200px, 0px);
	-o-transform : translate(200px, 0px);
	-ms-transform : translate(200px, 0px);
	transition : all 1000ms;
	-moz-transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-o-transition : all 1000ms;
	-ms-transition : all 1000ms;
}
.effect-fade-left {
	opacity : 0;
	-moz-opacity: 0;
	-webkit-opacity: 0;
	-o-opacity: 0;
	-ms-opacity: 0;
	transform : translate(-200px, 0px);
	-moz-transform : translate(-200px, 0px);
	-webkit-transform : translate(-200px, 0px);
	-o-transform : translate(-200px, 0px);
	-ms-transform : translate(-200px, 0px);
	transition : all 1000ms;
	-moz-transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-o-transition : all 1000ms;
	-ms-transition : all 1000ms;
}

.effect-fade.effect-scroll, .effect-fade-right.effect-scroll, .effect-fade-left.effect-scroll {
	opacity : 1;
	-moz-opacity: 1;
	-webkit-opacity: 1;
	-o-opacity: 1;
	-ms-opacity: 1;
	transform : translate(0, 0);
	-moz-transform : translate(0, 0);
	-webkit-transform : translate(0, 0);
	-o-transform : translate(0, 0);
	-ms-transform : translate(0, 0);
	background-color: rgba(255,255,255,0.9);
}
.twork{
	width:1100px;
	margin-bottom:80px;
	padding:20px 25px;

}
.twork h2{
	color:#000000;
	position: relative;
    margin-bottom: 40px;
    padding-bottom: 25px;
    letter-spacing: .05em;
    line-height: 1.7142857143;
    text-align: center;
}
.twork h2::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    background: -webkit-gradient(linear,left top,right top,from(#fbd431),to(#a0cf89));
    background: -webkit-linear-gradient(left,#0066ff 0,#a0cf89 100%);
    background: linear-gradient(
90deg
,#0066ff 0,#000000 100%);
}
div.gallery {
  display:inline-table;
  margin: 5px;
  border: 1px solid #ccc;
  width: 180px;
  height: 132px;
  width: calc((100% - 64px)/ 2);
  margin-top: 60px;
}
.nn{
	display:inline-table;
	border: 1px solid #ccc;
	overflow:hidden;	
}


.gallery img {
  width: 100%;
  height: auto;
  transition: all 0.5s;
}
.gallery img:hover{
	opacity: 1.0;
	transform: scale(1.1);
}


div.desc {
  padding: 15px;
  height:50px;
}
.c-article__category {
    display: inline-block;
    height: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 16px;
    font-size: 13px;
    background-color: #1c412c;
    line-height: 30px;
    letter-spacing: .05em;
    color: white;
    font-weight: bold;
}
.view_more_link {
    background-color: rgb(255 255 255 / 0.1);
}
@media screen and (max-width:800px){
	div.gallery {
	
	width: calc((100% - 64px)/ 2);
	}
}
@media screen and (max-width:400px){
	div.gallery {
	
	width: calc((100% - 52px)/ 1);
	}
}



/*==================================
          Work End
===================================*/