/* Portfolio Filter Stylesheet */

/*****Reset*****/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

/*****Basic Definitions*****/
body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
h1 { font-size: 1.667em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.333em; }
h4 { font-size: 1.167em; }
h5, h6 { font-size: 1em; }

a { color: #333; }
a:visited { }
a:hover { text-decoration: none; }
ul, ol, dl{ margin-bottom: 18px; }
ul, ol, dd { margin-left: 36px; }
p { padding:10px; font-size: 10pt; }

.left { text-align: start; margin-left: 40px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.right { text-align: start; margin-right: 40px; }

/*****Custom Classes*****/
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/*****Basic Layout*****/
div#container { margin: 20px auto 0; overflow: hidden;  }

ul#filter { float: left; font-size: 12px; list-style: none; margin: 0; width: 100%;height:100%; }
ul#filter li { 
    /*border-right: 1px solid #dedede;*/
    float: left;
    text-align: right;
    line-height: 200%;
    margin-right: 10px;
    padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

ul#portfolio { float: left; list-style: none; margin: 20px 0; width: 100%; border-collapse: collapse; }
ul#portfolio li { 
    border: 1px dashed #cccccc; 
    border-collapse: collapse;
    float: left;
    padding: 15px;
    margin:0;
    width: 188px;
    text-align:center;
    font-size:12px;
    height:340px;
    line-height: 150%;
}
ul#portfolio a { display: inline-block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: inline-block; text-align:center; margin:0 auto;}
ul#portfolio p { padding:3px; margin:0; text-align:center;}

.clearfix:after, .clearfix:before {
    content: "";
    display: block;
    clear: both;
}

#portfolio span{
	font-size:10px;
	display:block;
	line-height:11px;
	margin:3px;
}
#portfolio h5{
	border-bottom:1px dotted #999999;margin:5px 0 ;
}
#mark{
	width:30px;
}
#main_thum{
	display: block;
	width:150px;
}

/* cssボタン　矢印つき */
.background_btn02 {
  display: inline-block;
  color: #9FADFF; /* 文字色 */
  font-weight: bold; /* 文字の太さ */
  width: 100%;
  max-width: 120px; /* ボタン幅 */
  text-decoration: none;
  border: 2px solid #9FADFF; /* 線の色 */
  padding: 0.3em 1em;
  text-align: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  background-image: linear-gradient(to right, #fff 0%, #fff 50%, #9FADFF 50%, #9FADFF 100%); /* 背景色(マウスオーバー後→前) */
  transition: background-position .8s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transition: background-position .8s cubic-bezier(0.19, 1, 0.22, 1);
}

.background_btn02_arrow {
  display: inline-block;
  padding-left: 1em;
}

/* マウスオーバーした際のデザイン */
.background_btn02:hover {
  background-position: 0 0;
  color: #000; /* 文字色 */
}

.background_btn02:hover .background_btn02-line path ,
.background_btn02:hover .background_btn02-line line {
  stroke: #000; /* 矢印の色 */
}
/* cssボタン　矢印つきここまで */
/* 001 オプションなし*/
.button001 a {
    background: #7CDBFF;
    border-radius: 50px;
    position: relative;
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    margin: 10px 5px; 
    width: 130px; 
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	font-size: 8pt; /* 文字の大きさ */
	line-height: 1; /* 行間を詰める */
    flex: 1; /* ボタンの幅を均等にする */
    text-align: center; /* テキストを中央に揃える */
    text-decoration: none;
}

.button001 a:hover {
    background: #355E6D;
    color: #FFF;
}

.button001 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.button001 a:hover:after {
    border-color: #FFF;
}

/* 004 オプションあり*/
.button004 a {
    background: #E3E1B2;
    border-radius: 50px;
    position: relative;
    display: flex; 
    justify-content: space-around; 
    align-items: center;
    margin: 10px 5px; 
    width: 130px; 
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
	font-size: 8pt; /* 文字の大きさ */
	line-height: 1; /* 行間を詰める */
    flex: 1; /* ボタンの幅を均等にする */
    text-align: center; /* テキストを中央に揃える */
    text-decoration: none;
}

.button004 a:hover {
    background: #6E6B28;
    color: #FFF;
}

.button004 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

.button004 a:hover:after {
    border-color: #FFF;
}

#midashi_black{
  background: #000000;
  box-shadow: 0px 0px 0px 5px #000000;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#000;
  font-size:12pt;
  line-height:30px;
}

#midashi_kogecya{
  background: #2b231c;
  box-shadow: 0px 0px 0px 5px #2b231c;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#000;
  font-size:12pt;
  line-height:30px;
}

#midashi_yellow{
  background: #FFE920;
  box-shadow: 0px 0px 0px 5px #FFE920;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#000;
  font-size:12pt;
  line-height:30px;
}

#midashi_red{
  background: #DC143C;
  box-shadow: 0px 0px 0px 5px #DC143C;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}

#midashi_orange{
  background: #FF5A21;
  box-shadow: 0px 0px 0px 5px #FF5A21;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}
#midashi_pink{
  background: #FF0076;
  box-shadow: 0px 0px 0px 5px #FF0076;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}
#midashi_secred{
  background: #FF2657;
  box-shadow: 0px 0px 0px 5px #FF2657;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}

#midashi_blue{
  background: #20149D;
  box-shadow: 0px 0px 0px 5px #20149D;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}

#midashi_mizu{
  background: #009A8A;
  box-shadow: 0px 0px 0px 5px #009A8A;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}

#midashi_maroon{
  background: #B56440;
  box-shadow: 0px 0px 0px 5px #B56440;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}


#midashi_green{
  background: #009C00;
  box-shadow: 0px 0px 0px 5px #009C00;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}

#midashi_aqua{
  background: #86C5FF;
  box-shadow: 0px 0px 0px 5px #86C5FF;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  margin:15px 20px;
  color:#fff;
  font-size:12pt;
  line-height:30px;
}

.ttl_black{
  position: relative;
  padding: 15px 20px;
  color: #000;
  font-size:20px;
  border-radius: 10px;
  background: #000000;
  width:650px;
  margin-bottom:-20px;

}

.ttl_black::after{
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}

.ttl_kogecya{
  position: relative;
  padding: 15px 20px;
  color: #000;
  font-size:20px;
  border-radius: 10px;
  background: #2b231c;
  width:650px;
  margin-bottom:-20px;

}

.ttl_kogecya::after{
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #2b231c transparent transparent transparent;
}

.ttl_yellow{
  position: relative;
  padding: 15px 20px;
  color: #000;
  font-size:20px;
  border-radius: 10px;
  background: #FFE920;
  width:650px;
  margin-bottom:-20px;

}

.ttl_yellow::after{
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #FFE920 transparent transparent transparent;
}
.ttl_red{
  position: relative;
  padding: 15px 20px;
  color: #fff;
  font-size:20px;
  border-radius: 10px;
  background: #DC143C;
  width:650px;
  margin-bottom:-20px;

}

.ttl_red::after{
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #DC143C transparent transparent transparent;
}

.ttl_mizu{
  position: relative;
  padding: 15px 20px;
  color: #fff;
  font-size:20px;
  border-radius: 10px;
  background: #009A8A;
  width:650px;
  margin-bottom:-20px;

}

.ttl_mizu::after{
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #009A8A transparent transparent transparent;
}

.ttl_maroon{
  position: relative;
  padding: 15px 20px;
  color: #fff;
  font-size:20px;
  border-radius: 10px;
  background: #B56440;
  width:650px;
  margin-bottom:-20px;

}

.ttl_maroon::after{
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #B56440 transparent transparent transparent;
}

.ttl_pink{
  position: relative;
  padding: 15px 20px;
  color: #000;
  font-size:20px;
  border-radius: 10px;
  background: #FF0076;
  width:650px;
  margin-bottom:-20px;

}

.ttl_pink::after{
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #FF0076 transparent transparent transparent;
}
.ttl_secred{
  position: relative;
  padding: 15px 20px;
  color: #fff;
  font-size:20px;
  border-radius: 10px;
  background: #FF2657;
  width:650px;
  margin-bottom:-20px;

}

.ttl_secred::after{
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #FF2657 transparent transparent transparent;
}
/* Animation */
.wrapper {
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
.target {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

/* 直書きしてあった辻川さん作成のcss */
#list{
  background-color:#ffffff;
    border-collapse: collapse;
    border-top:1px solid #333;
  border-bottom:1px solid #333;
margin: 5% auto;
}
#list tr:nth-child(odd) td{
  
  background-color: #EAF6FD; 
    border-collapse: collapse;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
  padding:5px;
}
#list tr:nth-child(even) td{
  background-color: #ffffff; 
    border-collapse: collapse;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
  padding:5px;
}  


p{
	margin-bottom:20px;
}


/* 直書きしてあった辻川さん作成のcss　ここまで */
/* 内容に使用しているテーブルのマージン */
#table1 td {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 点線の枠線スタイル */
#dotted-table {
  padding: 1em;
  border: 1px dashed #000; /* table要素にのみ適用 */
}

#0214{
	margin: 5% auto;
    text-align: center;
}