*, *:after, *:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='bit-'] {
float: left;
padding: 10px;
}
[class*='bit-']:last-of-type {
padding-right: 10px;
float: right;
}
/* Clearfix */

.frame:after {
content: "";
display: table;
clear: both;
}
.frame {
margin: 0
}
/* Main Widths */

.bit-1 {
width: 100%;
}
/* .bit-2  {width: 50%;}*/

.bit-2 {
width: 49%;
}
.bit-3 {
width: 33.33%;
}
/* .bit-4  {width: 25%;}*/

.bit-4 {
width: 24.8%;
}
/* .bit-5  {width: 20%;}*/

.bit-5 {
width: 19.811%;
}
.bit-6 {
width: 16.6666666667%;
}
.bit-7 {
width: 14.2857142857%;
}
.bit-8 {
width: 12.5%;
}
.bit-9 {
width: 11.1111111111%;
}
.bit-10 {
width: 10%;
}
.bit-11 {
width: 9.09090909091%;
}
.bit-12 {
width: 8.33%;
}
input {
font-size: 16px;
}
html {
background-color: #fee5e5;
}
body {
background-image: url(../img/pc_bg.gif);
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif
}
img {
max-width: 100%
}
.name {
text-align: center
}
.air {
background: #ff6347;
color: #fff;
padding: 3px;
border-radius: 6px;
}
a {
text-decoration: none
}
a:hover {
color: #ff0000
}
p {
line-height: 2em
}
#head {
margin: -30px
}
.subtop {
margin-top: 60px;
padding: 20px;
font-size: 2em;
color: #000
}
.s01 {
background: #c291c0;
color: #fff;
padding: 5px;
border-radius: 6px;
text-align: center
}
.s02 {
background: #3b579d;
margin-top: 2px;
padding: 5px;
border-radius: 6px;
text-align: center
}
.s02 img {
vertical-align: middle;
}
.s02 a {
color: #fff
}
.s02 a:hover {
color: #faf0e6
}
h2 {
background-color: #e77ea6;
display: block;
padding: 10px;
margin-bottom: 5px;
border-radius: 6px;
color: #fff;
}
.shika {
background: url(../img/shika.png) no-repeat 0 1px;
padding-left: 60px;
}
.ic00 {
background: url(../img/ic00.png) no-repeat 6px 4px;
background-color: #c291c0;
padding-left: 60px;
}
.ic01 {
background: url(../img/ic01.png) no-repeat 6px 4px;
background-color: #c291c0;
padding-left: 60px;
}
.ic02 {
background: url(../img/ic02.png) no-repeat 6px 4px;
background-color: #62b2a3;
padding-left: 60px;
}
.ic03 {
background: url(../img/ic03.png) no-repeat 6px 4px;
background-color: #e77ea6;
padding-left: 100px;
}
.title_top {
display: block
}
.title_top_size {
font-size: 14px
}
h3 {
background-color: #e0ffff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 6px;
color: #444
}
.jako {
display: block;
background: url(../img/jako.png) no-repeat right 42px;
}
h3 small {
background-color: #fe4f8a;
padding: 6px;
border-radius: 4px;
color: #fff
}
h4 {
display: block;
margin-bottom: 5px;
padding: 5px;
font-size: 1.4em;
color: #2f4f4f
}
h4 span {
background: #fff;
margin-left: 5px;
padding: 2px;
border-radius: 4px;
color: #000
}
h5 {
display: inline-block;
background: #e0ee73;
padding: 5px;
margin-bottom: 5px;
border-radius: 4px;
font-size: 1.2em;
color: #2f4f4f
}
h5 span {
background: #fff;
margin-left: 5px;
padding: 2px;
border-radius: 4px;
color: #000
}
h6 {
font-size: 1.4em;
color: #2f4f4f
}
strong {
display: block;
margin:35px 0 15px;
color: #364e96;
border: solid 3px #c1d3f4;
padding: 5px 5px 5px 20px;
letter-spacing:.8em;
border-radius: 4px;
font-size:18px

}
.detail {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9', GradientType=0);
background-color: #f9f9f9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: block;
cursor: pointer;
color: #666666;
font-size: 15px;
padding: 6px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
.detail:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9', GradientType=0);
background-color: #e9e9e9;
}
.detail:active {
position: relative;
top: 1px;
}
.SSIdetail {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9', GradientType=0);
background-color: #f9f9f9;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: block;
cursor: pointer;
color: #666666;
font-size: 15px;
padding: 6px;
text-align: center;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
.SSIdetail:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
background: -moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9', GradientType=0);
background-color: #e9e9e9;
}
.SSIdetail:active {
position: relative;
top: 1px;
}
#content {
margin: 0 auto;
max-width: 1200px;
padding: 10px;
}
.area00 {
margin: 30px;
padding: 10px;
background: #fff;
border: solid #ffc0cb 1px;
border-radius: 4px
}
.area01 {
margin: 10px;
}
.area02 {
margin: 30px;
padding: 10px;
}
.area04 {
margin: 20px
}
.zone {
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
flex-wrap: wrap;
justify-content: space-between;
margin: 10px 0
}
.zone>div {
width: 47%;
height: 100%;
margin: 10px 5px
}
.txt-center {
text-align: center
}
.present {
padding: 10px;
background: #f5fffa;
color: #000;
border-radius: 4px
}
.photo {
display: inline;
border: 1px solid #ccc;
padding: 5px;
margin: 10px;
background: #fff;
box-shadow: 0px 0px 3px -2px rgba(0, 0, 0, 0.8);
}
.pagination {
text-align: center;
margin: 20px
}
.pagination a, .pagination strong {
background: #fff;
display: inline-block;
margin-right: 3px;
padding: 4px 12px;
text-decoration: none;
line-height: 1.5em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.pagination a:hover {
background-color: #BEBEBE;
color: #fff;
}
.pagination a:active {
background: rgba(190, 190, 190, 0.75);
}
.pagination strong {
color: #fff;
background-color: #BEBEBE;
}
.iframe-content {
position: relative;
width: 100%;
padding: 50% 0 0 0;
}
.iframe-content iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.top_block {
background-color: #f8f8ff;
border-radius: 6px;
margin: 1px;
}
.top_btn {
background-color: #e0ee73;
border-radius: 6px;
text-align: center;
margin: 1px;
}
.btn {
color: #222;
font-size: 1.3em;
padding: 5px;
text-align: center
}
.btn:hover {
color: #ff0000;
cursor: pointer
}
.btn01 {
background: #ff1493;
border-bottom: 5px solid #a20a8b;
color: #fff;
font-size: 1.3em;
padding: 5px;
border-radius: 6px;
text-align: center;
}
.btn01:hover {
background: #ff0000;
color: red;
cursor: pointer;
color: #fff;
}
.search {
background-color: #fff;
margin: 15px 5px 5px 5px;
padding: 6px;
}
.search span {
color: #666
}
.search select {
width: 100%;
}
/*  */

input[type=text], input[type=email], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
input[type=number] {
width: 40%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
.bor {
border: 1px solid #ccc;
border-radius: 4px
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
text-align: right;
font-weight: bold
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.col-75 h5 {
display: inline-block;
background: none;
font-size: 1.5em;
color: #2f4f4f
}
.col-75 h3 {
display: inline-block;
background: none;
font-size: 1.5em;
color: #444;
border: none
}
.row:after {
content: "";
display: table;
clear: both;
}
.check {
color: #ff0000
}
.send {
margin: 5px 0 5px
}
/*  */

.map {
margin: 5px
}
/* .map{ border:1px solid #ccc; width:362px; padding:5px; margin:10px 0 10px 0;background:#fff;box-shadow: 0px 0px 3px -2px rgba(0, 0, 0, 0.8);}*/

table td {
padding: 5px
}
table .t01 {
font-weight: bold
}
#footer {
text-align: center;
}
#footer_bg {
clear: both;
width: 100%;
height: 80px;
background: url(../img/pc_bg_head_race.png) repeat-x center top;
}
video::-webkit-media-controls-enclosure {
overflow: hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
.photos {
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
flex-wrap: wrap;
justify-content: space-between;
margin: 10px 0
}
.photos>img {
width: 47%;
height: 100%;
border-radius: 4px;
margin: 10px 5px
}
/*base tablet styles*/

@media (max-width: 800px) {
.bit-4, .bit-6, .bit-8, .bit-10, .bit-12 {
width: 50%;
}
.bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 {
width: 100%;
}
}
/*base mobile styles - everything 100%*/

@media (max-width: 640px) {
.bit-1, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6, .bit-7, .bit-8, .bit-9, .bit-10, .bit-11, .bit-12 {
width: 100%;
}
#content {
padding: 0
}
.title {
margin: 5px
}
.area00 {
margin: 2px;
padding: 10px;
font-size: 0.9em
}
.area01 {
margin: 2px;
}
h2 {
font-size: 14px;
font-weight: normal;
}
h3 {
background-image: none;
padding: 2px;
font-size: 12px;
font-weight: bolf;
text-align: center
}
h3 small {
display: block;
padding: 2px;
color: #fff;
font-size: 12px
}
.top_block {
background-color: #ffe4e1;
margin: 2px 0 2px 0
}
.top_btn {
margin: 2px 0 2px 0;
height: auto
}
.subtop {
margin-top: 0;
padding: 10px;
font-size: 16px;
}
.s01 {
display: block;
}
/*iframe{max-width:100%}*/
.photo {
display: block;
margin: 3px 0 3px 0;
border: 0
}
h4 span {
display: block
}
.col-25 {
text-align: left;
font-size: 16px
}
.col-25, .col-75, input[type=submit], input[type=text], input[type=email], input[type=number] {
width: 100%;
margin-top: 0;
padding: 5px
}
.photos {
flex-direction: row;
margin: 0;
}
.photos>img {
width: 100%;
height: 100%;
margin: 10px 0;
padding: 0;
font-size: .8em
}
.zone {
flex-direction: row;
margin: 0;
}
.zone>div {
width: 100%;
height: 100%;
margin: 10px 0;
padding: 0;
font-size: .8em
}
#footer {
font-size: 10px
}

}