@charset "UTF-8";
/* Body */
body {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	background-color: #FFFFFF;
	margin: 0;
}

.breadcrumb-box p{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	text-align: left;
}

.breadcrumb-box p a:hover {
    text-decoration: none;
}
.breadcrumb-box p a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color: #1b5cb5;
}

/* Container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	text-align: center;
}

/* project Section */

.project-info{
  width: 100%;
  background-color: #D5F2D6;
  padding-top: 20px;
  padding-bottom: 30px;
}

.project {
	clear: both;
	display: inline-block;
	width: 100%;
	padding-bottom: 0;
	padding-top: 0px;
	margin: -5px auto 0;
}

.project:last-child{
	padding-bottom: 35px;
	}

.project-inner{
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;

	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	justify-content: space-between;

}
/*
.thumbnail_warap{
	width: 32%;
}

.thumbnail {
	text-align: center;
    margin: 35px auto 0;
    background-color: #FCFCFC;
    padding-bottom: 0;
    border-radius: 10px;
    padding-top: 0;
}

.thumbnail:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

.thumbnail h4.title01,.title02,.title03,.title04,.title05,.title06,.title07,.title08,.title09,.title10,.title11,.title12,.title13,.title14{
	margin-top: 5px;
	margin-bottom: 5px;
	color: #05870D;
	text-align: left;
	position: relative;
    padding: 0 0 0 90px;
	font-size: 1.2em;
	height: 65px;
}

.thumbnail a {
    text-decoration: none;
}

.thumbnail h4.title01::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon01.png);
}
.thumbnail h4.title02::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon02.png);
}
.thumbnail h4.title03::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon03.png);
}
.thumbnail h4.title04::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon04.png);
}
.thumbnail h4.title05::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon05.png);
}
.thumbnail h4.title06::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon06.png);
}
.thumbnail h4.title07::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon07.png);
}
.thumbnail h4.title08::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon08.png);
}
.thumbnail h4.title09::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon09.png);
}
.thumbnail h4.title10::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon10.png);
}
.thumbnail h4.title11::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon11.png);
}

.thumbnail h4.title12::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon12.png);
}

.thumbnail h4.title13::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon13.png);
}

.thumbnail h4.title14::before {
  position: absolute;
  top: -30px;
  left: 5px;
  content: url(../img/icon14.png);
}



.thumbnail img{
	border-radius: 10px 10px 0 0;
}
*/
.column_inquiry{
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	margin-bottom: 30px;
	display: flex;
    justify-content: space-between;
}

.column_inquiry_left {
	text-align: center;
	padding: 0;
    display: inline-block;
	position: relative;
}

.column_inquiry_right {
	text-align: center;
	padding: 0;
	display: inline-block;
	position: relative;
}

.column_inquiry_left::before,
.column_inquiry_right::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 94%;
  background: rgba(0,0,0, 0.4);
}

.column_inquiry_left:hover,
.column_inquiry_right:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.inquiry_p {
  position: absolute;
  top: 10px;
  left: 40px;
  font-size: 1.5em;
  font-weight: 600;
  color: #ffffff;
  text-shadow:0 2px 0 #666,
        0 3px 0 #666,
        0 4px 5px #333;
}

.inquiry_p::before{
   content:"";
   display:inline-block;
   width:4px;
   height:25px;
   background-color:#ffffff;
   position:absolute;
   top: 2px;
   left:-10px;
}

.column_inquiry_img{
  	height: auto;
	max-width: 480px;
	max-height: 180px;
  }




/* intro */
.intro {
	background-color: #FFFFFF;
	width: 100%;
	margin: 0 auto 3%;
	padding: 0 0 20px;
	max-width: 1200px;
	display: flex;
    justify-content: center;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
}
.column_int_left {
	width: 80%;
	text-align: center;
	height: 75vh;
}
.column_int_right {
	width: 20%;
	text-align: center;
	background: #d5f2d6;
	height: 75vh;
}


.column_int_right img{
	display: inline-block;
	width: 100% !important;
	height:  auto !important;
}

.column_int_right img:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

.information {
	display: inline-block;
	background-color: #FFFFFF;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 30px;
	padding: 0 0 15px;
}
.column_info_left {
	width: 55%;
	text-align: center;
	padding: 0 0 0 0;
	float: left;
}

.column_info_right {
	width: 45%;
	text-align: left;
	padding: 0 15px;
	float: right;
}

.column_info_left .youtube {
    text-align: center;
    margin: 0 0 0;
    width: 100%;
    max-width: 625px;
}

.column_info_left .youtube iframe{
    width: 100%;
    height: auto;
    min-height: 315px;
    max-height: 380px;
}

.column_info_right h3{
	color: #05870D;
    font-size: 1.5em;
}
.column_info_right p{
	color: #000000;
    font-size: 1.1em;
	text-align: left;
	line-height: 1.4em;
}

.cards {
	width: 100%;
	height: auto;
	max-width: 500px;
	max-height: 180px;
	object-fit: cover;
	object-position: center center;
	font-family: 'object-fit: cover;';
}


.intro .column p {
	padding-left: 30px;
	padding-right: 30px;
	text-align: justify;
	line-height: 25px;
	font-weight: lighter;
	margin-left: 20px;
	margin-right: 20px;
	width: 80%;
	margin-top: 4%;
}



/* 1600px以上 */
@media (min-width: 1600px) {

	.column_int_left {
		width: 70%;
		height: 60vh;
	}	
	
	.column_int_right {
		width: 30%;
    	height: 60vh;
	}

	.column_int_right img{
		width: auto;
		width: 80% !important;
		display: inline-block;
	}	
	
	/* Loading背景画面設定　*/
	
	#splash {
    max-height: 830px;
}
	
	
}


/* Mobile */
@media (max-width: 320px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.text_column {
	width: 100%;
	text-align: justify;
	padding: 0;
}
.intro .column p {
	width: 80%;
	margin-left: 0px;
}
.text_column {
	padding-left: 20px;
}
.project-inner {
    width: 90%;
    max-width: 320px;
}
.thumbnail {
	width: 100%;
}
.column {
	width: 100%;
	margin-top: 0px;
}
.hero_header {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
	
.column_inquiry_img {
    height: auto;
    max-width: 320px;
    max-height: 180px;
}	


}

@media (max-width: 390px) {

	.inquiry_p {
    top: 0px;
    left: 30px;
    font-size: 1.3em;
	}		

	#sumaito-f div.menu-right {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}	
	
}


@media (max-width: 420px) {

	#sumaito-f div.menu-right {
    	width: 53%;
		font-size: 0.8em;
		display: inline-grid;
		justify-content: flex-end;
		text-align: right;
	}

	#sumaito-f div.menu-right ul li {
		margin-left: 10px;
		display: flex;
	}	
	
}


@media (max-width: 480px) {

.column_inquiry_img {
    height: auto;
    max-width: 480px;
    max-height: 180px;
    width: 98%;
}

}


/* Small Tablets */
@media (max-width: 800px) {

	.intro {
		display: inline-block;
		background-color: #FFFFFF;
		width: 100%;
		margin: -10% auto 0;
		padding: 0 0 20px;
	}

	.column_int_left {
		width: 100%;
		height: 60vh;
		text-align: center;
	}
	

	.column_int_right {
		width: 100%;
		height: auto;
		padding-bottom: 20px;
	}	

	.column_int_right img {
		width: 30%;
		height: auto;
		flex-direction: row;
		justify-content: center;
	}	

	
	.column_int_right .column_menu{
		display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
		-ms-flex-wrap: wrap;
  		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	
	.column_int_right .column_menu a{
		width: calc(90%/3);
		margin: 0 4px;
	}
	
	
	

	.information {
		display: inline-block;
		background-color: #FFFFFF;
		width: 100%;
		max-width: 800px;
		margin: 0 auto 30px;
		padding: 0 0 15px;
	}	
	
	.column_info_left {
		width: 96%;
		text-align: center;
		padding: 0 0 0 0;
		float: none;
		margin: 0 auto 50px;
	}

	.column_info_left .youtube {
		text-align: center;
		margin: 0 0 0;
		width: 100%;
		max-width: 780px;
	}	
	
	.column_info_right {
		width: 98%;
		text-align: left;
		padding: 0 15px;
		float: none;
		margin: 0 auto;
	}	
	

	.column_inquiry {
		width: 100%;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40px;
		margin-bottom: 30px;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}
	
	.column_inquiry_left,
	.column_inquiry_right{
		margin: 10px auto;
	}
	
	
}


/* Small Tablets */
@media (max-width: 767px) {

.intro {
	display: inline-block;
	background-color: #FFFFFF;
	width: 100%;
	margin: -72px auto 5%;
	padding: 0 0 20px;
}
	
	
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.text_column {
	width: 100%;
	text-align: left;
	padding: 0;
}
.project-inner {
    width: 90%;
    max-width: 768px;
}
.thumbnail {
	width: 100%;
}
.cards {
    max-width: 700px;
}
.column {
	width: 100%;
	margin-top: 0px;
}
.text_column {
	padding-left: 20px;
	padding-right: 20px;
	width: 90%;
}
.column {
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
}
.profile {
	width: 100%;
}
.intro .column p {
	width: 90%;
	text-align: center;
	padding-left: 0px;
}
	
	.project-inner {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		margin: 0 auto;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: column;
		align-content: space-around;
	}	

	.thumbnail_warap {
		width: 80%;
	}	
	
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {

	.thumbnail_warap{
		width: 48%;
	}	
	
	.project-inner::after{
	  content:"";
	  display: block;
	  width:48%;
	}	
	
	.thumbnail {
		width: auto;
	}
	
	.text_column {
		width: 90%;
		margin: 0;
		padding: 20px;
	}
	.intro .column p {
		width: 80%;
	}
}
/* Small Desktops */
@media (min-width: 1201px) and (max-width: 1599px) {

	/* Loading背景画面設定　*/
	
	.p10{
		width: 100%;	
		padding: 20px;
		box-sizing: border-box;
		margin: 0;
	}
	
	.column_int_left {
		width: 70%;
		height: 60vh;
	}	
	
	.column_int_right {
		width: 30%;
    	height: 60vh;
	}
	
	.column_int_right img{
		width: 80% !important;
	}
	
	#splash {
    max-height: 830px;
}
}


@media (min-width: 801px) and (max-width: 1200px) {

	.column_int_right, .column_int_left {
    	height: 100%;
	}

	#splash {
    max-height: 700px;
		width: 800px;
		margin: 0 auto;
}
}