@charset "utf-8";
/* CSS Document */

@keyframes fadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes fadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
html {
}
body {
padding: 0;
margin: 0;
}
.topwall01 {
}
.mainimg {
width: 100%;
height: auto
}
img {
vertical-align: middle;
}
.headlogo {
max-width: 800px;
width: 90%;
height: auto;
display: block;
margin: 0px auto;
}
.headlogo {
animation: fadeIn2 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal;
}
.headlogo img {
height: auto
}
.headlogobottom {
max-width: 300px;
height: auto;
display: block;
margin: 0 0 30px 10px
}
h2.head01 {
font-size: 5em;
font-weight: 100;
font-family: Arial, Helvetica, "sans-serif";
text-align: center;
line-height: 0.75em;
}
.colorbox01 {
display: block;
padding: 4em 0;
background-image: url( ../../img/colorwall01.jpg);
background-size: 50%
}

.colorbox02 {
display: block;
padding: 3em 0.5em;
background: #F5F5F5
}

.colorbox03 {
display: block;
padding: 3em 0.5em;
background: #efbaaf
}


.colorbox04 {
padding-top: 20px;
}
.container01 {
width: 98%;
max-width: 1000px;
margin: auto;
text-align: left;
font-size: 62.5%;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.container01 p {
font-size: 1.6em;
line-height: 1.8em;
margin: 0 0 1em
}
.container02 {
width: 98%;
max-width: 1000px;
margin: auto;
text-align: center;
font-weight: 500;
font-size: 62.5%;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
padding: 0 0 100px
}
.container02 p {
font-size: 1.6em
}
.container02 p strong {
font-size: 1.5em;
font-weight: bold
}
.container02 p u {
text-decoration: underline
}
.container02 {
animation: fadeIn 4s ease 0s 1 normal;
-webkit-animation: fadeIn 4s ease 0s 1 normal;
}
.container01 h1 {
font-size: 2.4em
}
.container01 h2 {
font-size: 5em;
font-family: "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
text-align: center;
line-height: 0.75em;
margin: 0 auto 1em;
color: #CB0001;
font-weight: 500;
letter-spacing: 0.5em
}

.colorbox03 .container01 h2{ }

.container01 h3 {
font-size: 2em;
font-weight: 900;
font-family: Arial, Helvetica, "sans-serif";
text-align: center;
line-height: 1.5em;
margin: 0 auto 2em;
color: #000;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.container01 h2 span {
font-size: 0.4em;
font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-align: center
}
.container01 h4 {
font-size: 2em;
border-left: 10px solid #CE0203;
padding: 10px;
background: #FFFFFF
}
.container01 h5 {
font-size: 1.6em;
font-weight: bold;
border: 1px solid #E9E9E9;
padding: 10px;
background-color: #fff;
border-radius: 3px;
color: #484848
}
.cover01 {
display: table;
margin: 0px;
padding: 0px;
width: 100%;
}
.cover01 div.box1 {
display: table-cell;
width: 33%;
padding: 0 2em
}
.cover01 div.box2 {
display: table-cell;
padding: 0 0 2em 0;
vertical-align: top;
}
.cover01 div.box3 {
display: table-cell;
padding: 0 0 2em 0;
vertical-align: top;
}
.table01 {
border-collapse: collapse;
width: 100%;
font-size: 1.6em;
margin-bottom: 2em
}
.table01 th {
border: 1px solid #E9E9E9;
padding: 15px;
width: 20%;
background-color: #F9F9F9;
color: #CB0001;
}
.table01 td {
border: 1px solid #E9E9E9;
padding: 15px;
text-align: left;
background-color: #fff
}
.table02 {
border-collapse: collapse;
width: 100%;
font-size: 1.6em;
margin-bottom: 2em
}
.table02 th {
border: 2px solid #fff;
padding: 15px;
width: 20%;
background-color: #d5333b;
color: #fff;
}
.table02 td {
border: 2px solid #fff;
padding: 15px;
text-align: left;
background-color: #FDEFEC;
}
.table03 {
border-collapse: collapse;
width: 100%;
font-size: 1.6em;
margin-bottom: 2em
}
.table03 th {
border: 1px solid #fff;
padding: 15px;
background-color: #d5333b;
color: #fff;
text-align: center
}
.table03 td {
border: 1px solid #fff;
padding: 15px;
background-color: #FDEFEC;
}

.container01 .table01 td p, .container01 .table02 td p {
font-size: 1em;
}
.center01 {
text-align: center
}
.att01 {
padding-left: 1em;
text-indent: -1em;
}
.clb:after {
clear: both;
display: block;
content: ""
}
.fh5co-grid-work {
margin-bottom: 10px;
width: 50%;
box-sizing: border-box;
padding: 0 10px;
float: left;
}

.fh5co-grid-work h5 {
font-size: 1.6em;
font-weight: bold;
padding: 10px;
background-color: #CE0203 ;
border-radius: 3px;
color: #fff;
margin: 0 0 0.5em 0;
border: none
}

.fh5co-grid-work img {
max-width: 100%;
height: auto;
border-radius: 3px;
box-sizing: border-box;
border: 8px solid #FFFFFF
}
.fh5co-grid-work a {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.fh5co-grid-work .work-holder {
position: relative;
}
.fh5co-grid-work .work-holder img {
max-width: 100%;
height: auto;
border-radius: 3px;
}
.fh5co-grid-work .work-holder .inner-overlay {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: hsla(190,100%,50%,0.80);
opacity: 0;
width: 100%;
height: 100%;
line-height: 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.fh5co-grid-work .work-holder .inner-overlay i {
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
color: #fff;
font-size: 3em;
}
.fh5co-grid-work .work-holder .inner-overlay.inner-overlay-2 {
background-color: rgba(248,209,9,0.90);
}
.fh5co-grid-work .work-holder .inner-overlay.inner-overlay-3 {
background: rgba(23, 231, 164, 0.9);
}
.fh5co-grid-work .work-holder .inner-overlay.inner-overlay-4 {
background: rgba(249, 197, 53, 0.9);
}
.fh5co-grid-work .work-holder .inner-overlay.inner-overlay-4 {
background: rgba(81, 218, 207, 0.9);
}
.fh5co-grid-work .work-holder .inner-overlay.inner-overlay-5 {
background: rgba(255, 118, 118, 0.9);
}
.fh5co-grid-work .desc {
font-size: 1.2em;
margin: 0 0 10px 0;
text-align: left;
border: none;
padding: 10px;
line-height: 16px;
background: #FFFFFF;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-box-shadow: 0px 1px #E4E4E4;
box-shadow: 0px 1px #E4E4E4;
}
.desc h4 {
font-size: 1.3em;
padding: 0;
margin: 0 0 10px;
0;
border: none;
font-weight: bold;
color: #485F9C
}
.desc p {
font-size: 1em;
margin: 0;
font-weight: normal
}
.desc.line1 {
height: 50px
}
.desc.line2 {
height: 65px
}
.desc.line3 {
height: 80px
}
.desc.top {
font-weight: bold
}
.fh5co-grid-work .desc a {
color: #000;
text-decoration: none
}
.fh5co-grid-work .desc i {
color: #485F9C;
text-decoration: none;
margin-right: 0.2em
}
.fh5co-grid-work .desc span {
color: rgba(114, 114, 114, 0.5);
font-size: 16px;
}
.fh5co-grid-work:hover .inner-overlay, .fh5co-grid-work:focus .inner-overlay {
opacity: 1;
}
footer {
padding: 20px;
background: #CE0203;
text-align: center;
color: #FFFFFF;
font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 62.5%;
}
.mgn_b3em {
margin: 0 0 3em 0
}
p.indent-1 {
padding-left: 1em;
text-indent: -1em;
display: block;
margin: 0;
font-size: 1.3em;
}
.hajimeni01 {
font-size: 1.6em !important;
font-weight: 500;
line-height: 2em !important;
margin: 0 auto 2em;
color: #000;
font-family: "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

@media (min-width: 770px) {
.container01 {
width: 1000px;
}
}

@media (max-width: 500px) {
body {
}
.fh5co-grid-work {
width: 100%;
box-sizing: border-box;
padding: 5px;
float: none;
}
.container01 {
font-size: 48%;
}
.headlogobottom {
max-width: 200px;
height: auto;
display: block;
margin: 0 0 50px 10px
}
.cover01 {
display: block;
margin: 0px;
padding: 0px;
width: 100%;
}
.cover01 div.box1 {
display: block;
width: 100%;
padding: 0 0 2em
}
.cover01 div.box2 {
display: block;
width: 100%;
padding: 0 0 2em
}
.cover01 div.box3 {
display: block;
width: 100%;
padding: 0 0 2em
}
table, tbody, tr, th, td {
max-width: 100%; /*スマホ画面ほぼ一杯に広がる感じ*/
}
.table01, .table02 {
display: block;
box-sizing: border-box;
width: 100%;
}
.table01 tbody, .table02 tbody {
display: block;
box-sizing: border-box;
width: 100%;
}

.table01 tr, .table02 tr {
display: block;
width: 100%;
}
.table01 th, .table02 th {
display: block;
width: 100%;
box-sizing: border-box;
margin-bottom: 2px;
}
.table01 td, .table02 td {
display: block;
box-sizing: border-box;
margin-bottom: 4px;
width: 100%;
}
}