@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;
}
.fnt09 {
  font-size: 0.9em;
}
.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;
}
#insta .pc_none {
  display: none;
}
.mt2{
    margin-top: 2rem;
}
.fnt11{
    font-size: 1.1em;
}
.ml1{
    margin-left: 1em;
}
.txt_right{
    text-align: right;
    display: block;
}
/*　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;
}
/*--------------------------------------archive_page--タイトルなし　ここから*/
.archive_page header {
  margin-top: 50px !important;
}
/*--------------------------------------archive_page--タイトルなし　ここまで*/
.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: flex-start;
  /*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; /*文字数による幅の可変を固定*/
    width: 80%;
}
#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: 100%;
}
/*#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;
}
/*-----------------------------------top_head追加202402*/
  #top .head_img_sp {
    display: none;
  }
  #top .head_img_pc {
    width: 100%;
  }
  #top .head_img_pc img {
    width: 100%;
  }

/*--------------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;
      width: 80%;
  }
  #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%;
    padding: 10px 20px;
  }
  #mailform_respon, #insta, #ecotone {
    padding-left: 10%;
  }
  #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%;
  }
    /*-----------------------------------top_head追加202402*/
#top .head_img_sp {
  width: 100%;
  margin-top: -60px;
  margin-bottom: 10px;
    display: block;
}
#top .head_img_sp img {
  width: 100%;
}
#top .head_img_pc {
  display: none;
}

  /*--------------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;
  }
  #insta .sp_none {
    display: none;
  }
  #insta .pc_none {
    display: block;
  }
  /*.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;
  }
        /*-----------------------------------top_head追加202402*/
#top .head_img_sp {
  width: 100%;
  margin-top: -60px;
  margin-bottom: 10px;
    display: block;
}
#top .head_img_sp img {
  width: 100%;
}
#top .head_img_pc {
  display: none;
}

  #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%;
	}*/
  #mailform_respon p {
    /*text-align: center;
		font-size: 16px;
		line-height: 2.5em;*/
    color: #fff;
    background-color: #000;
    margin-bottom: 14%;
    padding: 10px 20px;
  }
  #mailform_respon, #insta, #ecotone {
    padding-left: 10%;
  }
  #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: 10%;
}
/*＝＝＝並び替えボタンの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;
}