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

/*==================================
          title Font Style
===================================*/

.page_ttl {
	margin:0 auto 50px;
	padding:60px 0 37px;
	background-image:url(../img/til-st.jpg);
	background-position:50% 55%;
	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%);
}
.sectionLv0 {
    margin-top:84px;
    position: relative;
    width:100%;
}
.sectionLv0 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;
	
	
}
.sectionLv0 h2 {
padding:0px;
}
.ttl_en {
    letter-spacing: 2vw;
	font-size: 5vw;

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


/*==================================
          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: 100px;
    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:#374a8e;
	border-bottom:#498E37 solid 1px;
}
#top_contents01 li:nth-of-type(2) h3 {
	color: #498E37;
    border-bottom: #a48575 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 {
	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/02.jpg);
	background-position:right;
}


#top_contents01 li div {
	float: right;
	width: 500px;
	
	background-color:rgba(255,255,255,0.9);
}
#top_contents01 li:nth-of-type(2) div {
	float: left;
}
#top_contents01 li p {
	padding:30px 20px 10px;
	text-align: inherit;
	
}
.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);
}
.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)/ 3);
  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: 12px;
    padding-right: 12px;
    font-size: 13px;
    background-color: #eee;
    line-height: 30px;
    border-radius: 15px;
    letter-spacing: .05em;
	color:#0000FF;
}
@media screen and (max-width:800px){
	div.gallery {
	
	width: calc((100% - 82px)/ 2);
	}
}
@media screen and (max-width:400px){
	div.gallery {
	
	width: calc((100% - 58px)/ 1);
	}
}


/*==================================
          Work End
===================================*/
.arrow-container{
    position: relative;
    z-index: 1;
    right: 0px;
    bottom: 53px;
}

.arrow-1{
  width: 50px;
  height: 50px;
  background: #00BCD4;
  opacity: 0.5;
  border-radius: 50%;
  position: absolute;
}

.arrow-2{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: table;
}

.arrow-2:before{
  width: 20px;
  height: 20px;
  z-index: 1;
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
}

.arrow-2 i.fa{
  font-size: 15px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
}


/* Custom Animate.css */

.animated.hinge {
  -webkit-animation-duration: 1s;
   animation-duration: 1s;
   animation-iteration-count: infinite;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.4, .4, .4);
            transform: scale3d(.4, .4, .4);
  }

  50% {
    opacity: 0.5;
  }
  
  100% {
    opacity: 0;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.4, .4, .4);
            transform: scale3d(.4, .4, .4);
  }

  50% {
    opacity: 0.5;
  }
  
  100% {
    opacity: 0;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}