@charset "utf-8";

/* saito bungo styleseet */

/*　Base Link 
------------------------------------------------------------ */

a:link{
	color:#000000;
	text-decoration:none;
}
	
a:visited{
	color:#000000;
	text-decoration:none;
}

a:hover,a:active{
	color:#999999;
}
.topics a:link{
	color:#666666;
	text-decoration:underline;
}
	
.topics a:visited{
	color:#666666;
	text-decoration:none;
}
/* Base Layout
------------------------------------------------------------ */

html{
	overflow: auto;
	height: 100%;
	overflow: scroll;
	-webkit-overflow-scrolling: touch
}
* html { /* for IE6 */
	overflow: hidden;
	overflow-x: auto;
	height: 100%;
}
body{
	color:#000000;
	/*line-height:1.5;*/
	overflow-x: hidden;
    position: static;
	/*position: relative;*/
	background-color:#FFFFFF;
	min-width: 1080px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 200;
}
* html body { /* for IE6 */
	overflow-y: auto;
	height: 100%;
}
*{
	margin:0;
	padding:0;
	border:0;
    box-sizing: border-box;
}
#bg {
	z-index: -1;
	position:fixed;
}
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.mincho{font-family: "游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝" ;}
.gothic	{font-family:"游ゴシック", "ヒラギノ角ゴ Pro","ＭＳ Ｐゴシック",sans-serif;}
.sans{font-family: 'Noto Sans JP', sans-serif;}
.serif{font-family: 'Noto Serif JP', serif;}
.flex{
    display: flex;
    flex-wrap: wrap;
}

hr{
	border-width: 1px 0 0 0;/* 線の太さを指定 */
	border-style: solid;/* 線の種類を指定 */
	border-color: #666666;/*線の色を指定 */
}
.right_pf a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.right_pf{
position: relative;
}
li{list-style: none;}
/*　top
---------------------------------*/
.wrapper {
/*	
	padding-left: 80px;
*/
	padding-right: 40px;
	padding-bottom: 5px;
	height: auto;
	width: auto;
	padding-top: 0px;
	display:flex;
}
.wrapper #leftside #left {
	float: left;
}

.wrapper h1 {
	margin-top: 10px;
	margin-bottom: 0px;
}
.wrapper #leftrogo {
	width: auto;
	margin-top: 140px;
	float: left;
}
.wrapper h2 {
	margin-top: 0px;
	font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
	color: #000000;
	text-transform: none;
	font-size: 10px;
	font-weight: lighter;
	letter-spacing:0.2em;
	line-height: normal;
	width: 600px;
}
.wrapper .text {
	float: left;
	width: 90%;
	color: #666666;
	margin-bottom: 8%;
	padding-left: 8%;
	line-height: 2.5em;
	letter-spacing: 2px;
}
.wrapper .text_respon{
	display:none;
}
.wrapper #rightside {
	float: right;
	padding-top: 30px;
}
.wrapper #footer {
	float: left;
	color: #000000;
	margin-top: 32px;
	font-size: 12px;
	clear: both;
	margin-bottom: 5px;
}
header {
	width: 100%;
	display:flex;
	margin-top:40px;
	margin-bottom: 2%;
	margin-left: 2%;
	height: 124px;
	clear: both;
/*	background-color: #0000ff;
*/
}
.portforio_box header {
	width: 100%;
    margin: 0;
    height: 0;
}
.header_left img{
	max-width: 34%;
}
.wrapper #container {
	margin-top: 5px;
}
.wrapper #leftside {
	float: left;
	width: 850px;
	padding-top: 30px;
}
.header_left {
	width: 55%;
	float: left;
}
.header_left02 {
	display:none;
}
.header_right01 {
	display:flex;
	width: 20%;
	margin-right: 4%;
	font-weight: 300;
	font-size: 20px;
}
.header_right01 ul {
	width: 100%;
	display:flex;
	list-style-type: none;
	/*	margin-top: 40px;*/
/*	background-color: #5801F8;*/
	justify-content:space-between;/*横の等間隔*/
	align-items:flex-end;
}
.header_right01 li {
/*	margin-right:30px;*/
/*	float: left;*/
}
.header_right02 {
	display:flex;
	width: 30%;
	/*	background-color: #00ffff;
*/
}
.header_right02 img {
	max-width: 60%;
}
.header_right02 ul {
	width: 70%;
	display:flex;
/*	background-color: #78191B;*/
/*	list-style: none;
/*	justify-content:space-between;/*横の等間隔*/
	align-items:flex-end;
	/*	margin-top: 40px;*/
	list-style: none;
}
/*newtop＿2015
---------------------------------*/
/*#top .wrapper header {
	width: 100%;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	margin-right: -500px;
	margin-left: -500px;
	padding-right: 500px;
	padding-left: 500px;
}
#top .wrapper header{
	margin-right: 20px;
	margin-left: 30px;
}
#top {
	background-color: #ffffff;
}
#top .wrapper .headbar {
	width: 100%;
	float: left;
	background-repeat: repeat-x;
	margin-right: -500px;
	margin-left: -500px;	
	padding-right: 500px;
	padding-left: 500px;
}
#top .wrapper #footer {
	width: 100%;
	margin-right: -500%;
	margin-left: -500%;
	padding-right: 500%;
	padding-left: 500%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #8D7553;
	padding-bottom: 0.5em;
}*/
#top .wrapper .copyright {
	text-align: center;
	clear: both;
	color: #000000;
	padding-top: 3em;
}
.pf_item a{
	display: inline;
	text-align: center;
}
/*top2023
---------------------------------*/
#main{
	width: 100%;
}
#mainbottom{
	width: 90%;
	padding-left: 10%;
	display: flex;
}
.main_left{
	width:80%;
	padding-top:3%;
/*	background-color: aquamarine;*/
}
.main_left_bt{
	width:70%;
	padding-left: 10%;
	/*	background-color: aquamarine;*/
}
#top .main_left_bt{
    margin-right: 10%;
}
.main_left .text{
	padding-left: 10%;
	font-size: 19px;
}
.main_left_bt .text{
	margin-top: 14%;
	margin-bottom: 14%;
	font-size: 20px;
}
.main_right{
	width:20%;
/*	background-color: #E1090D;*/
	padding-left: 3%;
	/*	float:right;*/
}
#mainphoto{
	width: 100%;
	margin-bottom: 6%;
}
#mainphoto img{
	max-width: 100%;	
}
.mainphoto_res{
	display:none;
}
#subphoto{
	width: 100%;
	text-align: right;
	margin-bottom: 7%;
}
#subphoto img{
	max-width: 100%;
}
#news{
	width:92%;
	color: #666666;
	margin-bottom: 10%;
	padding-left: 8%;
}
#newstitle{
	font-size: 24px;
	margin-bottom: 1%;
}
.newsdetails{
	width: 100%;
	display: flex;
	justify-content:flex-start;
    flex-wrap: wrap;
	align-items: center;
	line-height: 4em;
	margin-bottom: 4%;
}
.date{
	width:100px;
	/*font-size: 18px;*/
	font-weight: 400;
    margin-right: 20px;
}
.topics{
	font-size: 18px;
	font-weight: 200;
    min-width: 0;/*文字数による幅の可変を固定*/
}
#view{
	width:40%;
	float:right;
	margin-bottom:6%;
	text-align: center;
	font-weight: 100;
	font-size: 18px;
	align-items: center;
}
.portforio{
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	/*	line-height: 2em;*/
}
.portforio img{
	max-width: 50%;
	margin-bottom:4%;
}
.pf_item{
	width:calc(100% / 3); /* 3の部分に横並びに配置したい子要素の個数を入れる */
	margin-bottom: 6%;
	display: grid;
	place-items: center;
}
.top_pf_title{
	font-size: 18px!important;
	line-height: 1.6em;
	margin-bottom: 4%;
	text-align: center;
}
.top_pf_text{
	width:50%;
	font-size: 14px!important;
	line-height: 1.5em;
	text-align: left;
}
/*
.portforio_btm{
	width:100%;
	display: flex;
/*	justify-content: space-between;
	flex-wrap: wrap;
	/*	line-height: 2em;*/
/*	text-align: center;
}
.pf_item_btm{
	width:100%;
	margin-bottom: 6%;
}
.pf_item_btm img{
	max-width: 50%;
	margin-bottom:4%;
}*/
.pf_item_btm{
	width:66.66%;
	margin-bottom: 6%;
	display: grid;
	place-items: center;
}
.pf_item_btm img{
	max-width: 77%;
	margin-bottom:3%;
}
.top_pf_title_btm{
	font-size: 14px!important;
	line-height: 1.6em;
	margin-bottom: 2%;
	text-align: center;
}
#mailform{
	width:100%;
	margin-bottom: 20%;
}
#mailform img{
	max-width: 100%;
}
#mailform_respon{
	display:none;
}
#insta{
	width:100%;
	display: flex;
	margin-bottom: 20%;
}
#insta img{
	max-width:40%;
	flex: 1;
}
#insta_a{
	font-size:28px;
	font-weight: 200;
	flex: 2;
	color: #666666;
	padding-top: 5%;
	line-height: 1.5em;
	padding-right: 2%;
}
#insta_a hr{
	width: 100%;
}
#ecotone{
	width:100%;
	margin-bottom:10%;
}
#ecotone img{
	max-width: 100%;
}
/*TOP右側*/
.square{
	width:100%;
	background-color: #E6E6E5;
	margin-bottom: 10%;
}
.main_right .sans{
	text-align: right;
}
.main_right #main_right_title{
	font-weight: 600;
	font-size: 30px;
	margin-bottom: 8%;
	letter-spacing: 6px;
}
.right_pf{
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	line-height: 2.5em;
	letter-spacing: 5px;
	float: right;
	text-align: right;
}
.right_pf_item1{
	flex:3;
	width:30%;
	font-size: 18px;
}
.right_pf_item2{
	flex:1;
	width:30%;
	font-size: 18px;
}
.right_pf_item3{
	flex:2;
	width:30%;
	font-size: 18px;
}
.left{
	flex:2;	
}
.middle{
	flex:1;

}
.right{
	flex:1;
}
.main_right #main_right_title_bt{
	font-weight: 600;
	font-size: 30px;
	margin-top: 10%;
	margin-bottom: 8%;
	letter-spacing: 6px;
}
.main_right .archive{
	width:100%;
	font-size:16px;
	margin-bottom: 15%;
}
.right_pf2{
	width: 90%;
	line-height: 2.5em;
	letter-spacing: 3px;
	float: right;
	text-align: right;
}
.right_pf3{
	border-top: 1px solid #666666;
	border-bottom: 1px solid #666666;
}
#main_right_title_bt2{
	font-weight: 500;
	font-size: 26px;
	margin-top: 30%;
	margin-bottom: 8%;
	letter-spacing: 6px;
}
#main_right_title_bt3{
	margin-bottom: 30%;
}
#main_right_title_bt4{
	font-weight: 500;
	font-size: 26px;
	margin-top: 10%;
	margin-bottom: 8%;
	letter-spacing: 6px;
	line-height: 2.5em;
}
/*footer*/
#foot_icon{
	width: 100%;
	margin-bottom:8%;
}
.footer_icon{
	width: 20%;
	float: right;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 2%;
}
.footer_icon img{
	max-width: 50%;
}
#ft_text{
	width: 30%;
	float: right;
	text-align: center;	
}
.copylight{
	width: 100%;
	text-align: center;
	font-size: 13px;
	margin-bottom: 6%;
}
.copylight img{
	max-width: 4%;
	text-align: center;
	margin-bottom: 1%;
}
.portforio_box footer{
    margin-top: 50px;
}
.portforio_box #foot_icon{
    display: none;
}
.portforio_box .copylight{
    margin-top: 50px;
}

/*--------------contact page-------------------*/
.contact_text{
	width: 80%;
	padding-left: 20%;
}
#contact_tx_01{
	width:100%;
	font-size: 22px;
	font-weight: 300;
	line-height: 2.2em;
	margin-top:7%;
}
#contact_tx_02{
	font-size: 26px;
	font-weight: 300;
	letter-spacing: 0.3em;
	margin-top: 2%;
}
.contact_form{
	width: 100%;
	font-size: 18px;
	line-height: 2em;
	margin-top:5%;
	margin-bottom:12%;
}
/*input[type="text"] {
  display: block;
  border: none;
  padding: 0;
  margin: 0;
  width: 96%;
  padding: 2%;
  height: 18px;
  line-height: 18px;
}
.contact_form input{
	outline: solid 1px #666666;	
	width: 60%;
	hight:36px;
	padding: 2%;
	line-height: 20px;
}*/
.contact_form_input{
	outline: solid 1px #666666;	
	width: 60%;
	hight:36px;
	padding: 2%;
	line-height: 20px;
}
.contact_form textarea{
	outline: solid 1px #666666;	
	width: 60%;
	hight:36px;
	padding: 2%;
	line-height: 20px;
}
#send_it{
	background-color: #231815;
	color:#FFFFFF;
	margin-left:2%;
}
.contact_tx_03{
	width:100%;
	text-align: center;
	font-size: 20px;
	font-weight: 400;
	line-height: 2.2em;
	margin-top:4%;
	margin-bottom:3%;
}
.contact_tx_04{
	width:100%;
	text-align: center;
	font-size: 20px;
	font-weight: 300;
	line-height: 2.2em;
	margin-bottom:4%;
}
.contact_tx_05{
	width:50%;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	line-height: 2em;
}
.contact_tx_06{
	width:50%;
	text-align: center;
	font-size: 20px;
	font-weight: 200;
	line-height: 2em;
	word-break: break-all;
}
.contact_form table{
	width: 50%;
	margin-left:20%;
	margin-top:5%;
	margin-bottom:10%;
}
.flex_btn{
	width: 30%;
	padding-left: 34%;
}
.btn_dsn{
	width: 26%;
	height: 52px;
	font-family: sans-serif;
	font-size: 16px;
	color: #fff;
	text-align: center;
	background-color: #000;
	margin-top: 5%;
}
.btn_dsn:hover{
	color: #fff;
	background-color: #484646;
}
.btn_dsn02{
	width: 30%;
	height: 52px;
	font-family: sans-serif;
	font-size: 16px;
	text-align: center;
	color: #fff;
	background-color: #000;
	margin-left: 17%;
	letter-spacing: 6px;
}
.btn_dsn02 :hover{
	color: #fff;
	background-color: #484646;
}
.btn_dsn03{
	width: 100%;
	height: 64px;
	font-family: sans-serif;
	font-size: 16px;
	text-align: center;
	color: #000;
	background-color: #fff;
	margin-left: 18%;
	margin-bottom: 10%;
	outline: solid 2px;	
}
.btn_dsn03 :hover{
	color: #fff;
	background-color: #484646;
}
.btn_dsn04{
	width: 30%;
	height: 46px;
	font-family: sans-serif;
	font-size: 16px;
	text-align: center;
	letter-spacing: 6px;
	color: #fff;
	background-color: #000;
	margin-left: 36%;
	margin-top: 6%;
	margin-bottom:6%;
}
.btn_dsn04 :hover{
	color: #fff;
	background-color: #484646;
}
.btn_dsn05{
	width: 100%;
	height: 64px;
	font-family: sans-serif;
	font-size: 16px;
	text-align: center;
	color: #fff;
	background-color: #000;
	margin-left: 18%;
	margin-bottom: 10%;
}
.btn_dsn05 :hover{
	color: #fff;
	background-color: #484646;
}
.formTable{
	width: 80%;
	margin: auto;
	margin-bottom: 8%;
}
.form_item{
	width: 100%;
	display: flex;
	align-items: center;
	line-height: 4em;
	/*flex-wrap: wrap;*/   /*改行させる為*/
	margin-bottom: 3%;
	vertical-align: middle;/*高さを合わせる*/
}
/*--------------about page-------------------*/
.about_text{
	width: 80%;
	padding-left: 20%;
	padding-top:2%;
	padding-bottom: 8%;
}
#about_tx_01{
	font-size: 40px;
	font-weight: 200;
	color:#727171;
}
.ab_flex{
	width: 80%;
	padding-left: 20%;
	margin-top: 1%;
	margin-bottom: 2%;
	line-height: 2.6em;
	display: flex;
	justify-content: left;
}
.ab_flex_respon{
	display: none;
}
.ab_date_item1{
	flex-basis: 30%;
	font-size:16px;
}
.ab_date_item2{
	flex-basis: 60%;
	font-size:16px; 
}
/*--------------profile page-------------------*/
.pro_tx_01{
	font-size: 40px;
	font-weight: 300;
	color:#727171;
	margin-bottom: 2%;
}
.pro_tx_02{
	font-size: 18px;
	font-weight: 200;
	color:#727171;
	line-height: 2em;
}
#prof_pic {
	margin-top: 4%;
}
#prof_pic img{
	max-width: 40%;
	float: right;
}
/*--------------canon page-------------------*/
.canon_page01,
.canon_map{
	width: 80%;
	padding-left:20%;
}
.canon_page02{
	width: 75%;
	padding-left:25%;
}
.canon_page01 img{
	max-width: 100%;
	margin-bottom: 6%;
}
.canon_page02 img{
	max-width: 50%;
	margin-bottom: 1%;
}
#canon_map{
	width: 100%;
	height:456px;
	margin-bottom: 2%;
}
#canon_tx01{
	font-size: 18px;	
}
#canon_tx02{
	font-size: 12px;
	margin-bottom: 15%;
}
#canon_tx03{
	text-align: center;
	margin-bottom: 6%;
}
/*--------------ポートフォリオ page-------------------------------------------------------------------------------------------------------*/
.portfolio_header01 {
	width: 20%;
	float: left;
}
.portfolio_header01 img{
	max-width: 100%;
}
.portfolio_header02 {
	width: 40%;
	text-align: center;
}
.portfolio_header02 img{
	max-width: 100%;
}
.pf_ttl{
    width: 50%;
    margin: 0 auto 2em;;
}
.pf_ttl img{
    width: 100%;
}

.grid-item {
	width: 20%;
	padding: 3px;
}
.grid-item img {
	display: block;
	width: 100%
}

/*--------------右mが改行するのを阻止-------------------------------------------------------------------------------------------------------*/
@media (min-width: 1481px) and (max-width: 1600px) {

}
/*--------------レスポンシブ page-------------------------------------------------------------------------------------------------------*/
@media (min-width: 1081px) and (max-width: 1480px) {
	/*　top
	---------------------------------*/
	.wrapper {
		padding-right: 0px;
		padding-bottom: 5px;
		height: auto;
		width: auto;
		padding-top: 0px;
		display:flex;
	}
	.wrapper #leftside #left {
		float: left;
	}

	.wrapper h1 {
		margin-top: 10px;
		margin-bottom: 0px;
	}
	.wrapper #leftrogo {
		width: auto;
		margin-top: 140px;
		float: left;
	}
	.wrapper h2 {
		margin-top: 0px;
		font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
		color: #000000;
		text-transform: none;
		font-size: 10px;
		font-weight: lighter;
		letter-spacing:0.2em;
		line-height: normal;
		width: 600px;
	}
	.wrapper .text {
		float: left;
		width: 100%;
		color: #666666;
		margin-bottom: 8%;
		padding-left: 8%;
		line-height: 2.5em;
		letter-spacing: 2px;
		font-size: 14px;
	}
	.wrapper #rightside {
		float: right;
		padding-top: 30px;
	}
/*	.wrapper #footer {
		float: left;
		color: #000000;
		margin-top: 32px;
		font-size: 12px;
		clear: both;
		margin-bottom: 5px;
	}*/
	header {
		width: 100%;
		display:flex;
		margin-top:40px;
		margin-bottom: 2%;
		margin-left: 2%;
		height: 80px;
		clear: both;
	}
	.wrapper #container {
		margin-top: 5px;
	}
	.wrapper #leftside {
		float: left;
		width: 850px;
		padding-top: 30px;
	}
	.header_left{
	width: 55%;
	float: left;
	}
	#header_left img{
	max-width: 40%;
	}
	.header_left02 {
		display:none;
	}
	.header_right01 {
		display:flex;
		width: 20%;
		margin-right: 4%;
		font-weight: 300;
		font-size: 16px;
	}
	.header_right01 ul {
		width: 100%;
		display:flex;
		list-style-type: none;
		justify-content:space-between;/*横の等間隔*/
		align-items:flex-end;
	}
	.header_right02 {
		display:flex;
		width: 30%;
	}
	.header_right02 img {
		max-width: 50%;
	}
	.header_right02 ul {
		width: 88%;
		display:flex;
		align-items:flex-end;
		/*	margin-top: 40px;*/
	}
	/*#top .wrapper header {
		width: 100%;
		padding-bottom: 10px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #FFFFFF;
		margin-right: -500px;
		margin-left: -500px;
		padding-right: 500px;
		padding-left: 500px;
	}
	#top .wrapper header{
		margin-right: 20px;
		margin-left: 30px;
	}
	#top {
		background-color: #ffffff;
	}
	#top .wrapper .headbar {
		width: 100%;
		float: left;
		background-repeat: repeat-x;
		margin-right: -500px;
		margin-left: -500px;	
		padding-right: 500px;
		padding-left: 500px;
	}
	#top .wrapper #footer {
		width: 100%;
		margin-right: -500%;
		margin-left: -500%;
		padding-right: 500%;
		padding-left: 500%;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #8D7553;
		padding-bottom: 0.5em;
	}*/
	#top .wrapper .copyright {
		text-align: center;
		clear: both;
		color: #000000;
		padding-top: 3em;
	}
	#main{
		width: 100%;
	}
/*	#mainbottom{
		width: 90%;
		padding-left: 10%;
		display: flex;
	}
*/
	.main_left{
		width:80%;
		padding-top:3%;
	/*	background-color: aquamarine;*/
	}
	.main_left .text{
		padding-left: 6%;
		font-size: 15px;
	}
	.main_left_bt{
		width:70%;
		padding-left: 4%;
		/*	background-color: aquamarine;*/
	}
	.main_left_bt .text{
		margin-bottom: 12%;
		font-size: 16px;
	}
	#mainphoto{
		width: 100%;
		margin-bottom: 6%;
	}
	#mainphoto img{
		max-width: 100%;	
	}
	#subphoto{
		width: 100%;
		text-align: right;
		margin-bottom: 7%;
	}
	#subphoto img{
		max-width: 100%;
	}
	#news{
		width:92%;
		color: #666666;
		margin-bottom: 10%;
		padding-left: 8%;
	}
	#newstitle{
		font-size: 18px;
		margin-bottom: 1%;
	}
/*	.newsdetails{
		width: 100%;
		display: flex;
		justify-content:flex-start;
		align-items: center;
		line-height: 4em;
		margin-bottom: 4%;
	}
*//*	.date{
		width:10%;
		font-size: 10px;
		font-weight: 400;
	}
*/	
#top .main_left_bt{
    margin-right: 0;
}
    .topics{
		font-size: 14px;
	}
	#view{
		width:40%;
		float:right;
		margin-bottom:6%;
		text-align: center;
		font-weight: 100;
		align-items: center;
	}
	.portforio{
		width:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		/*	line-height: 2em;*/
		margin-bottom: 8%;
	}
	.portforio img{
		max-width: 50%;
		margin-bottom:4%;
	}
	.pf_item{
		width:calc(100% / 3); /* 3の部分に横並びに配置したい子要素の個数を入れる */
		margin-bottom: 6%;
		display: grid;
		place-items: center;
	}
	.top_pf_title{
		font-size: 16px!important;
		line-height: 1.6em;
		margin-bottom: 4%;
		text-align: center;
	}
	.top_pf_text{
		width:50%;
		font-size: 12px!important;
		line-height: 1.5em;
		text-align: left;
	}
	.pf_item_btm{
		width:66.66%;
		margin-bottom: 6%;
		display: grid;
		place-items: center;
	}
	.pf_item_btm img{
		max-width: 77%;
		margin-bottom:3%;
	}
	.top_pf_title_btm{
		font-size: 14px!important;
		line-height: 1.6em;
		margin-bottom: 2%;
		text-align: center;
	}
	#mailform{
		width:100%;
		margin-bottom: 20%;
	}
	#mailform img{
		max-width: 100%;
	}
	#mailform_respon{
		display: none;
	}
	#insta{
		width:100%;
		display: flex;
		margin-bottom: 20%;
	}
	#insta img{
		max-width:40%;
		flex: 1;
	}
	#insta_a{
		font-size:28px;
		font-weight: 200;
		flex: 2;
		color: #666666;
		padding-top: 5%;
		line-height: 1.5em;
		padding-right: 2%;
	}
	#insta_a hr{
		width: 100%;
	}
	#ecotone{
		width:100%;
		margin-bottom:10%;
	}
	#ecotone img{
		max-width: 100%;
	}
	/*TOP右側*/
	.main_right{
		width:20%;
		padding-left: 6%;
		padding-right: 1%;
		/*	float:right;*/
	}
	.square{
		width:100%;
		background-color: #E6E6E5;
		margin-bottom: 10%;
	}
	.main_right .sans{
		text-align: right;
	}
	.main_right #main_right_title{
		font-weight: 600;
		font-size: 20px;
		margin-bottom: 8%;
		letter-spacing: 6px;
	}
	.right_pf{
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		line-height: 2em;
		letter-spacing: 4px;
		float: right;
		text-align: right;
	}
	.right_pf_item1{
		flex:3;
		width:30%;
		font-size: 13px;
	}
	.right_pf_item2{
		flex:1;
		width:30%;
		font-size: 14px;
	}
	.right_pf_item3{
		flex:2;
		width:30%;
		font-size: 14px;
	}
	.left{
		flex:2;	
	}
	.middle{
		flex:1;

	}
	.right{
		flex:1;
	}
	.main_right #main_right_title_bt{
		font-weight: 600;
		font-size: 20px;
		margin-top: 10%;
		margin-bottom: 8%;
		letter-spacing: 6px;
	}
	.main_right .archive{
		width:100%;
		font-size:13px;
		margin-bottom: 15%;
	}
	.right_pf2{
		width: 90%;
		line-height: 2.5em;
		letter-spacing: 1px;
		text-align: right;
	}
	.right_pf3{
		border-top: 1px solid #666666;
		border-bottom: 1px solid #666666;
	}
	#main_right_title_bt2{
		font-weight: 500;
		font-size: 20px;
		margin-top: 30%;
		margin-bottom: 8%;
		letter-spacing: 6px;
	}
	#main_right_title_bt3{
		margin-bottom: 30%;
	}
	#main_right_title_bt4{
		font-weight: 500;
		font-size: 20px;
		margin-top: 10%;
		margin-bottom: 8%;
		letter-spacing: 6px;
		line-height: 2.5em;
	}
	/*footer*/
	#foot_icon{
		width: 100%;
		margin-bottom:8%;
	}
	.footer_icon{
		width: 20%;
		float: right;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 2%;
	}
	.footer_icon img{
		max-width: 50%;
	}
	#ft_text{
		width: 30%;
		float: right;
		text-align: center;	
	}
	.copylight{
		width: 100%;
		text-align: center;
		font-size: 13px;
		margin-bottom: 6%;
	}
	.copylight img{
		max-width: 4%;
		text-align: center;
		margin-bottom: 1%;
	}
	/*--------------contact page-------------------*/
	.contact_text{
		width: 80%;
		padding-left: 20%;
	}
	#contact_tx_01{
		width:100%;
		font-size: 22px;
		font-weight: 300;
		line-height: 2.2em;
		margin-top:7%;
	}
	#contact_tx_02{
		font-size: 26px;
		font-weight: 300;
		letter-spacing: 0.3em;
		margin-top: 2%;
	}
	.contact_form{
		width: 100%;
		font-size: 18px;
		line-height: 2em;
		margin-top:5%;
		margin-bottom:12%;
	}
	.contact_form_input{
		outline: solid 1px #666666;	
		width: 60%;
		hight:36px;
		padding: 2%;
		line-height: 20px;
	}
	.contact_form textarea{
		outline: solid 1px #666666;	
		width: 60%;
		hight:36px;
		padding: 2%;
		line-height: 20px;
	}
	#send_it{
		background-color: #231815;
		color:#FFFFFF;
		margin-left:2%;
	}
	.contact_tx_03{
		width:100%;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
		line-height: 2.2em;
		margin-top:4%;
		margin-bottom:3%;
	}
	.contact_tx_04{
		width:100%;
		text-align: center;
		font-size: 20px;
		font-weight: 300;
		line-height: 2.2em;
		margin-bottom:4%;
	}
	.contact_tx_05{
		width:50%;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
		line-height: 2em;
	}
	.contact_tx_06{
		width:50%;
		text-align: center;
		font-size: 20px;
		font-weight: 200;
		line-height: 2em;
		word-break: break-all;
	}
	.contact_form table{
		width: 50%;
		margin-left:20%;
		margin-top:5%;
		margin-bottom:10%;
	}
	.flex_btn{
		width: 30%;
		padding-left: 30%;
	}
	.btn_dsn{
		width: 26%;
		height: 52px;
		font-family: sans-serif;
		font-size: 16px;
		color: #fff;
		text-align: center;
		background-color: #000;
		margin-top: 5%;
	}
	.btn_dsn:hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn02{
		width: 30%;
		height: 52px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #fff;
		background-color: #000;
		margin-left: 17%;
		letter-spacing: 6px;
	}
	.btn_dsn02 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn03{
		width: 100%;
		height: 64px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #000;
		background-color: #fff;
		margin-left: 18%;
		margin-bottom: 10%;
		outline: solid 2px;	
	}
	.btn_dsn03 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn04{
		width: 30%;
		height: 46px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		letter-spacing: 6px;
		color: #fff;
		background-color: #000;
		margin-left: 36%;
		margin-top: 6%;
		margin-bottom:6%;
	}
	.btn_dsn04 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn05{
		width: 100%;
		height: 64px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #fff;
		background-color: #000;
		margin-left: 18%;
		margin-bottom: 10%;
	}
	.btn_dsn05 :hover{
		color: #fff;
		background-color: #484646;
	}
	.formTable{
		width: 80%;
		margin: auto;
		margin-bottom: 8%;
	}
	.form_item{
		width: 100%;
		display: flex;
		align-items: center;
		line-height: 4em;
		/*flex-wrap: wrap;*/   /*改行させる為*/
		margin-bottom: 3%;
		vertical-align: middle;/*高さを合わせる*/
	}
	/*--------------about page-------------------*/
	.about_text{
		width: 80%;
		padding-left: 20%;
		padding-top:2%;
		padding-bottom: 8%;
	}
	#about_tx_01{
		font-size: 36px;
		font-weight: 200;
		color:#727171;
	}
	.ab_flex{
		width: 80%;
		padding-left: 20%;
		margin-top: 1%;
		margin-bottom: 1%;
		line-height: 2.6em;
		display: flex;
		justify-content: left;
	}
	.ab_flex_respon{
		display: none;
	}
	.ab_date_item1{
		flex-basis: 30%;
		font-size:18px; 
	}
	.ab_date_item2{
		flex-basis: 60%;
		font-size:18px; 
	}
	/*--------------profile page-------------------*/
	.pro_tx_01{
		font-size: 32px;
		font-weight: 300;
		color:#4D4D4D;
		margin-bottom: 2%;
	}
	.pro_tx_02{
		font-size: 16px;
		font-weight: 200;
		color:#4D4D4D;
		line-height: 2em;
	}
	#prof_pic {
		margin-top: 4%;
	}
	#prof_pic img{
		max-width: 40%;
		float: right;
	}
	/*--------------canon page-------------------*/
	.canon_page01{
		width: 80%;
		padding-left:20%;
	}
	.canon_page02{
		width: 75%;
		padding-left:25%;
	}
	.canon_page01 img{
		max-width: 100%;
		margin-bottom: 6%;
	}
	.canon_page02 img{
		max-width: 50%;
		margin-bottom: 1%;
	}
	#canon_map{
		width: 100%;
		height:456px;
		margin-bottom: 2%;
	}
	#canon_tx01{
		font-size: 18px;	
	}
	#canon_tx02{
		font-size: 12px;
		margin-bottom: 15%;
	}
	#canon_tx03{
		text-align: center;
		margin-bottom: 6%;
	}
}
@media (min-width: 601px) and (max-width: 1080px) {
	/* 1000px以下に適用されるCSS（iPad用） -----------------------------------------------------------------------------------------------------*/
	/*　top	---------------------------------*/
	body{
		/*初期化*/
		min-width: initial;		
	}
	.wrapper {
		padding-right: 0%;
		padding-bottom: 5px;
		height: auto;
		width: 100%;
		padding-top: 0px;
		display:flex;
	}
	.wrapper .text {
		display:none;
	}
	.wrapper .text_respon{
		display:block;
		float: left;
		width: 90%;
		color: #666666;
		margin-bottom: 14%;
		margin-top: 14%;
		padding-left: 10%;
		line-height: 2em;
		letter-spacing: 4px;
		font-size: 24px;

	}
	/*.wrapper #footer {
		float: left;
		color: #000000;
		margin-top: 32px;
		font-size: 12px;
		clear: both;
		margin-bottom: 5px;
	}*/
	header {
		width: 100%;
		display:flex;
		margin-top:40px;
		margin-bottom: 2%;
		margin-left: 2%;
		height: 80px;
		clear: both;
	}
	.header_left{
		display: none;
	}
	.header_left02 {
		display:block;
	}
	.header_left02{
		width: 80%;
		padding-left: 10%;
	}
	.header_left02 img{
		max-width: 70%;
	}
	#line_top{
		display:none;
	}
	.wrapper #container {
		margin-top: 5px;
	}
	.wrapper #leftside {
		float: left;
		width: 850px;
		padding-top: 30px;
	}
	.header_right01 {
		display:none;
	}
	.header_right02 {
		display:none;
	}
	#top .wrapper header {
		width: 100%;
		padding-bottom: 10px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #FFFFFF;
		margin-right: -500px;
		margin-left: -500px;
		padding-right: 500px;
		padding-left: 500px;
	}
	#top .wrapper header{
		margin-right: 20px;
		margin-left: 30px;
	}
	#top {
		background-color: #ffffff;
	}
	/*#top .wrapper .headbar {
		width: 100%;
		float: left;
		background-repeat: repeat-x;
		margin-right: -500px;
		margin-left: -500px;	
		padding-right: 500px;
		padding-left: 500px;
	}
	#top .wrapper #footer {
		width: 100%;
		margin-right: -500%;
		margin-left: -500%;
		padding-right: 500%;
		padding-left: 500%;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #8D7553;
		padding-bottom: 0.5em;
	}*/
	#top .wrapper .copyright {
		text-align: center;
		clear: both;
		color: #000000;
		padding-top: 3em;
	}
	#main{
		width: 100%;
	}
	.main_left{
		width:100%;
		margin-top:3%;
	}
	.main_left_bt{
		width:100%;
		padding-left: 0%;
		/*	background-color: aquamarine;*/
	}
	.main_left_bt .text{
		display:none;
	}
	#mainphoto{
		display:none;
	}
	#subphoto{
		display:none;
	}
	.mainphoto_res{
		display:block;
		margin-bottom: 10%;
	}
	.mainphoto_res img{
		max-width: 100%;
	}
	#news{
		width:90%;
        margin:auto;;
		/*color: #666666;
		margin-bottom: 10%;
		padding-left: 2%;*/
	}
	#newstitle{
		font-size: 18px;
		margin-bottom: 1%;
	}
	.newsdetails{
		width: 100%;
		display: flex;
		justify-content:flex-start;
		align-items: center;
		line-height: 2.54em;
		margin-bottom: 4%;
	}
	.date{
		width:100%;
		/*font-size: 20px;*/
		font-weight: 300;
	}
	.topics{
		width:100%;
		font-size: 20px;
		font-weight: 300;
		min-width: 0;/*文字数による幅の可変を固定*/

	}
	#view{
		width:60%;
		float:right;
		margin-bottom:6%;
		text-align: center;
		font-weight: 100;
		align-items: center;
		font-size: 22px;
	}
	.portforio{
		width:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		/*	line-height: 2em;*/
	}
	.portforio img{
		max-width: 60%;
		margin-bottom:4%;
	}
	.pf_item{
		width:calc(100% / 2); /* 2の部分に横並びに配置したい子要素の個数を入れる */
		margin-bottom: 6%;
		display: grid;
		place-items: center;
	}
	.top_pf_title{
		font-size: 20px!important;
		line-height: 1.6em;
		margin-bottom: 4%;
		text-align: center;
	}
	.top_pf_text{
		width:70%;
		font-size: 16px!important;
		line-height: 1.5em;
		text-align: left;
	}
	.pf_item_btm{
		width:66.66%;
		margin-bottom: 10%;
		display: grid;
		place-items: center;
	}
	.pf_item_btm img{
		max-width: 80%;
		margin-bottom:3%;
	}
	.top_pf_title_btm{
		font-size: 20px!important;
		line-height: 1.6em;
		margin-bottom: 2%;
		text-align: center;
	}
	#mailform{
		display: none;
	}
	#mailform_respon{
		display: block;
	}
	#mailform_respon img{
		max-width: 100%;
	}
	#mailform_respon p{
		text-align: center;
		font-size: 16px;
		line-height: 2.5em;
		color: #fff;
		background-color: #000;
		margin-bottom:14%;
	}
	#insta{
		display: none;
	}
	#ecotone{
		width:100%;
		margin-bottom:10%;
	}
	#ecotone img{
		max-width: 100%;
	}
	/*TOP右側*/
	.main_right{
		display: none;
		}
	/*footer*/
	#foot_icon{
		width: 100%;
		margin-bottom:8%;
	}
	.footer_icon{
		display: none;
	}
	#ft_text{
		width: 30%;
		float: right;
		text-align: center;	
	}
	.copylight{
		width: 100%;
		text-align: center;
		font-size: 13px;
		margin-bottom: 6%;
	}
	.copylight img{
		max-width: 10%;
		text-align: center;
		margin-bottom: 1%;
	}
	/*--------------contact page-------------------*/
	.contact_text{
		width: 80%;
		padding-left: 20%;
	}
	#contact_tx_01{
		width:100%;
		font-size: 16px;
		font-weight: 300;
		line-height: 2.2em;
		margin-top:7%;
	}
	#contact_tx_02{
		font-size: 18px;
		font-weight: 300;
		letter-spacing: 0.3em;
		margin-top: 2%;
	}
	.contact_form{
		width: 100%;
		font-size: 18px;
		line-height: 2em;
		margin-top:5%;
		margin-bottom:12%;
	}
	.contact_form_input{
		outline: solid 1px #666666;	
		width: 60%;
		hight:36px;
		padding: 2%;
		line-height: 20px;
	}
	.contact_form textarea{
		outline: solid 1px #666666;	
		width: 60%;
		hight:36px;
		padding: 2%;
		line-height: 20px;
	}
	#send_it{
		background-color: #231815;
		color:#FFFFFF;
		margin-left:2%;
	}
	.contact_tx_03{
		width:100%;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
		line-height: 2.2em;
		margin-top:4%;
		margin-bottom:3%;
	}
	.contact_tx_04{
		width:100%;
		text-align: center;
		font-size: 18px;
		font-weight: 300;
		line-height: 2.2em;
		margin-bottom:4%;
	}
	.contact_tx_05{
		width:50%;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
		line-height: 2em;
	}
	.contact_tx_06{
		width:50%;
		text-align: center;
		font-size: 20px;
		font-weight: 200;
		line-height: 2em;
		word-break: break-all;
	}
	.contact_form table{
		width: 50%;
		margin-left:20%;
		margin-top:5%;
		margin-bottom:10%;
	}
	.flex_btn{
		width: 30%;
		padding-left: 28%;
	}
	.btn_dsn{
		width: 40%;
		height: 52px;
		font-family: sans-serif;
		font-size: 16px;
		color: #fff;
		text-align: center;
		background-color: #000;
		margin-top: 5%;
		margin-bottom: 5%;
	}
	.btn_dsn:hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn02{
		width: 30%;
		height: 52px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #fff;
		background-color: #000;
		margin-left: 17%;
		letter-spacing: 6px;
	}
	.btn_dsn02 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn03{
		width: 100%;
		height: 64px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #000;
		background-color: #fff;
		margin-left: 18%;
		margin-bottom: 10%;
		outline: solid 2px;	
	}
	.btn_dsn03 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn04{
		width: 60%;
		height: 40px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		letter-spacing: 4px;
		color: #fff;
		background-color: #000;
		margin-left: 20%;
		margin-top: 6%;
		margin-bottom:10%;
	}
	.btn_dsn04 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn05{
		width: 100%;
		height: 64px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #fff;
		background-color: #000;
		margin-left: 18%;
		margin-bottom: 10%;
	}
	.btn_dsn05 :hover{
		color: #fff;
		background-color: #484646;
	}
	.formTable{
		width: 80%;
		margin: auto;
		margin-bottom: 8%;
	}
	.form_item{
		width: 100%;
		display: flex;
		align-items: center;
		line-height: 4em;
		/*flex-wrap: wrap;*/   /*改行させる為*/
		margin-bottom: 3%;
		vertical-align: middle;/*高さを合わせる*/
	}
	/*--------------about page-------------------*/
	.about_text{
		width: 80%;
		padding-left: 10%;
		padding-top:2%;
		padding-bottom: 8%;
	}
	#about_tx_01{
		font-size: 26px;
		font-weight: 200;
		color:#727171;
	}
	.ab_flex{
		display: none;
	}
	.ab_flex_respon{
		display: block;
		width: 80%;
		padding-left: 10%;
		margin-top: 1%;
		margin-bottom: 2%;
		line-height: 1.6em;
	}
	.ab_date_item1{
		flex-basis: 30%;
		font-size:16px; 
	}
	.ab_date_item2{
		flex-basis: 70%;
		font-size:16px; 
	}
	/*--------------profile page-------------------*/
		.pro_tx_01{
			font-size: 32px;
			font-weight: 300;
			color:#4D4D4D;
			margin-bottom: 2%;
		}
		.pro_tx_02{
			font-size: 16px;
			font-weight: 200;
			color:#4D4D4D;
			line-height: 2em;
		}
		#prof_pic {
			margin-top: 4%;
			margin-left: 10%;
		}
		#prof_pic img{
			max-width: 60%;
			float: left;
		}
	/*--------------canon page-------------------*/
	.canon_page01{
		width: 100%;
		padding-left:0;
	}
	.canon_page02{
		width: 80%;
		padding-left:10%;
	}
	.canon_page01 img{
		max-width: 100%;
		margin-bottom: 6%;
	}
	.canon_page02 img{
		max-width: 50%;
		margin-bottom: 1%;
	}
	#canon_map{
		width: 100%;
		height:456px;
		margin-bottom: 2%;
	}
	#canon_tx01{
		font-size: 18px;	
	}
	#canon_tx02{
		font-size: 12px;
		margin-bottom: 15%;
	}
	#canon_tx03{
		text-align: center;
		margin-bottom: 6%;
	}
/*--------------ポートフォリオ page-------------------------------------------------------------------------------------------------------*/
.portforio_box header {
	width: 100%;
    margin: 0;
    height: 0;
}
.pf_ttl{
    width: 80%;
    margin: auto;
}
}
@media (min-width: 0px) and (max-width: 600px) /*--------------------------------スマホ対応------------------------------------*/
{
	body{
		/*初期化*/
		min-width: initial;		
	}
	.wrapper {
		padding-right: 0%;
		padding-bottom: 5px;
		height: auto;
		width: 100%;
		padding-top: 0px;
		display:flex;
	}
	.wrapper .text {
		display:none;
	}
	.wrapper .text_respon{
		display:block;
		float: left;
		width: 90%;
		color: #666666;
		margin-bottom: 14%;
		margin-top: 14%;
		padding-left: 10%;
		line-height: 2em;
		letter-spacing: 4px;
		font-size: 14px;

	}
	/*.wrapper #footer {
		float: left;
		color: #000000;
		margin-top: 32px;
		font-size: 12px;
		clear: both;
		margin-bottom: 5px;
	}*/
	header {
		width: 100%;
		display:flex;
		margin-top:40px;
		margin-bottom: 2%;
		margin-left: 2%;
		height: 80px;
		clear: both;
	}
    .header_left{
		display: none;
	}
	.header_left02 {
		display:block;
	}
	.header_left02{
		width: 80%;
		padding-left: 10%;
	}
	.header_left02 img{
		max-width: 70%;
	}
	#line_top{
		display:none;
	}
	.wrapper #container {
		margin-top: 5px;
	}
	.wrapper #leftside {
		float: left;
		width: 850px;
		padding-top: 30px;
	}
	.header_right01 {
		display:none;
	}
	.header_right02 {
		display:none;
	}
	#top .wrapper header {
		width: 100%;
		padding-bottom: 10px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #FFFFFF;
		margin-right: -500px;
		margin-left: -500px;
		padding-right: 500px;
		padding-left: 500px;
	}
	#top .wrapper header{
		margin-right: 20px;
		margin-left: 30px;
	}
	#top {
		background-color: #ffffff;
	}
/*	#top .wrapper .headbar {
		width: 100%;
		float: left;
		background-repeat: repeat-x;
		margin-right: -500px;
		margin-left: -500px;	
		padding-right: 500px;
		padding-left: 500px;
	}
	#top .wrapper #footer {
		width: 100%;
		margin-right: -500%;
		margin-left: -500%;
		padding-right: 500%;
		padding-left: 500%;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #8D7553;
		padding-bottom: 0.5em;
	}
	#top .wrapper .copyright {
		text-align: center;
		clear: both;
		color: #000000;
		padding-top: 3em;
	}*/
	#main{
		width: 100%;
	}
	.main_left{
		width:100%;
		margin-top:3%;
	}
	.main_left_bt{
		width:100%;
		padding-left: 0%;
		/*	background-color: aquamarine;*/
	}
	.main_left_bt .text{
		display:none;
	}
	#mainphoto{
		display:none;
	}
	#subphoto{
		display:none;
	}
	.mainphoto_res{
		display:block;
		margin-bottom: 10%;
	}
	.mainphoto_res img{
		max-width: 100%;
	}
	#news{
		width:90%;
		color: #666666;
        margin: 0 auto 10%;
	}
	#newstitle{
		font-size: 18px;
		margin-bottom: 1%;
	}
	.newsdetails{
		margin-bottom: 1em;
	}
	.date{
		/*width:20%;*/
		font-size: 14px;
		font-weight: 300;
        line-height: 2em;
	}
	.topics{
		/*width:74%;*/
		font-size: 14px;
		font-weight: 300;
        line-height: 1.5em;
}
	#view{
		width:60%;
		float:right;
		margin-bottom:6%;
		text-align: center;
		font-weight: 100;
		align-items: center;
		font-size: 18px;
	}
	.portforio{
		width:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		/*	line-height: 2em;*/
	}
	.portforio img{
		max-width: 60%;
		margin-bottom:4%;
	}
	.pf_item{
		width:calc(100% / 1); /* 1の部分に横並びに配置したい子要素の個数を入れる */
		margin-bottom: 6%;
		display: grid;
		place-items: center;
	}
	.top_pf_title{
		font-size: 20px!important;
		line-height: 1.6em;
		margin-bottom: 4%;
		text-align: center;
	}
	.top_pf_text{
		width:70%;
		font-size: 16px!important;
		line-height: 1.5em;
		text-align: left;
	}
	.pf_item_btm{
		width:90%;
		margin-bottom: 10%;
		display: grid;
		place-items: center;
	}
	.pf_item_btm img{
		max-width: 100%;
		margin-bottom:3%;
	}
	.top_pf_title_btm{
		font-size: 20px!important;
		line-height: 1.6em;
		margin-bottom: 2%;
		text-align: center;
	}
	#mailform{
		display: none;
	}
	#mailform_respon{
		display: block;
	}
	#mailform_respon img{
		max-width: 100%;
	}
	#mailform_respon p{
		text-align: center;
		font-size: 16px;
		line-height: 2.5em;
		color: #fff;
		background-color: #000;
		margin-bottom:14%;
	}
	#insta{
		display: none;
	}
	#ecotone{
		width:100%;
		margin-bottom:10%;
	}
	#ecotone img{
		max-width: 100%;
	}
	/*TOP右側*/
	.main_right{
		display: none;
		}
	/*footer*/
	#foot_icon{
		width: 100%;
		margin-bottom:8%;
	}
	.footer_icon{
		display: none;
	}
	#ft_text{
		width: 30%;
		float: right;
		text-align: center;	
	}
	.copylight{
		width: 100%;
		text-align: center;
		font-size: 13px;
		margin-bottom: 6%;
	}
	.copylight img{
		max-width: 10%;
		text-align: center;
		margin-bottom: 1%;
	}
	/*--------------contact page-------------------*/
	.contact_text{
		width: 96%;
		padding-left: 4%;
	}
	#contact_tx_01{
		width:100%;
		font-size: 14px;
		font-weight: 300;
		line-height: 2em;
		margin-top:7%;

	}
	#contact_tx_02{
		font-size: 18px;
		font-weight: 400;
		letter-spacing: 0.3em;
		margin-top: 2%;
	}
	.contact_tx_03{
		width:100%;
		text-align: center;
		font-size: 12px;
		font-weight: 400;
		line-height: 2.2em;
		margin-top:4%;
		margin-bottom:3%;
	}
	#contact_form{
		width: 100%;
		font-size: 18px;
		line-height: 2em;
		margin-top:12%;
		margin-bottom:12%;
	}
	#contact_form input{
		outline: solid 1px #666666;	
		width: 86%;
		hight:36px;
		padding: 2%;
		line-height: 20px;
	}
	#contact_form textarea{
		outline: solid 1px #666666;	
		width: 86%;
		hight:36px;
		padding: 2%;
		line-height: 20px;
	}
	#send_it{
		background-color: #231815;
		color:#FFFFFF;
		margin-left:2%;
	}
	.flex_btn{
		width: 40%;
		padding-left: 20%;
	}
	.btn_dsn{
		width: 40%;
		height: 52px;
		font-family: sans-serif;
		font-size: 16px;
		color: #fff;
		text-align: center;
		background-color: #000;
		margin-top: 5%;
		margin-bottom: 5%;
	}
	.btn_dsn:hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn02{
		width: 30%;
		height: 52px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #fff;
		background-color: #000;
		margin-left: 17%;
		letter-spacing: 6px;
	}
	.btn_dsn02 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn03{
		width: 100%;
		height: 50px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #000;
		background-color: #fff;
		margin-left: 18%;
		margin-bottom: 10%;
		outline: solid 2px;	
	}
	.btn_dsn03 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn04{
		width: 60%;
		height: 46px;
		font-family: sans-serif;
		font-size: 10px;
		text-align: center;
		letter-spacing: 4px;
		color: #fff;
		background-color: #000;
		margin-left: 20%;
		margin-top: 6%;
		margin-bottom:10%;
	}
	.btn_dsn04 :hover{
		color: #fff;
		background-color: #484646;
	}
	.btn_dsn05{
		width: 100%;
		height: 64px;
		font-family: sans-serif;
		font-size: 16px;
		text-align: center;
		color: #fff;
		background-color: #000;
		margin-left: 18%;
		margin-bottom: 10%;
	}
	.btn_dsn05 :hover{
		color: #fff;
		background-color: #484646;
	}
	.formTable{
		width: 80%;
		margin: auto;
		margin-bottom: 8%;
	}
	.form_item{
		width: 100%;
		display: flex;
		align-items: center;
		line-height: 4em;
		/*flex-wrap: wrap;*/   /*改行させる為*/
		margin-bottom: 3%;
		vertical-align: middle;/*高さを合わせる*/
	}
	/*--------------about page-------------------*/
	.about_text{
		width: 80%;
		padding-left: 10%;
		padding-top:2%;
		padding-bottom: 8%;
	}
	#about_tx_01{
		font-size: 26px;
		font-weight: 200;
		color:#727171;
	}
	.ab_flex{
		display: none;
	}
	.ab_flex_respon{
		display: block;
		width: 80%;
		padding-left: 10%;
		margin-top: 1%;
		margin-bottom: 4%;
		line-height: 1.6em;
	}
	.ab_date_item1{
		flex-basis: 30%;
		font-size:16px; 
	}
	.ab_date_item2{
		flex-basis: 70%;
		font-size:16px; 
	}
	/*--------------profile page-------------------*/
	.pro_tx_01{
		font-size: 32px;
		font-weight: 300;
		color:#4D4D4D;
		margin-bottom: 5%;
	}
	.pro_tx_02{
		font-size: 16px;
		font-weight: 200;
		color:#4D4D4D;
		line-height: 1.4em;
	}
	#prof_pic {
		margin-top: 4%;
		margin-left: 10%;
	}
	#prof_pic img{
		max-width: 60%;
		float: left;
	}
	/*--------------canon page-------------------*/
	.canon_page01{
		width: 100%;
		padding-left:0;
	}
	.canon_page02{
		width: 80%;
		padding-left:10%;
	}
	.canon_page01 img{
		max-width: 100%;
		margin-bottom: 6%;
	}
	.canon_page02 img{
		max-width: 50%;
		margin-bottom: 1%;
	}
	#canon_map{
		width: 100%;
		height:456px;
		margin-bottom: 2%;
	}
	#canon_tx01{
		font-size: 18px;	
	}
	#canon_tx02{
		font-size: 12px;
		margin-bottom: 15%;
	}
	#canon_tx03{
		text-align: center;
		margin-bottom: 6%;
	}
/*--------------ポートフォリオ page-------------------------------------------------------------------------------------------------------*/
.portforio_box header {
	width: 100%;
    margin: 0;
    height: 0;
}
.pf_ttl{
    width: 100%;
    margin: auto;
}
.grid-item {
	width: 25%;
	padding: 3px;
}
}
/*==================================================
ギャラリーのためのcss
====================================================*/

.pf_main{
	width:100%;
	padding-top:3%;
}
/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
}

.sort-btn li{
	background:#eee;
list-style:none;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
}
.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background:#ccc;	
}
/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
	position: relative;
}
/*各画像の横幅などの設定*/
.item {
	position: absolute;
	width: 32%;/*横並びで3つ表示*/
	z-index: 1;
}
/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}
/*画像の横幅を100%にしてレスポンシブ化*/
/*.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;
}*/

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width : 925px ){
.sort-btn{
	justify-content: space-between;
}

.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}
/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 30%;/*横並びで3つ表示*/
  z-index: 1;
list-style:none;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}