@charset "utf-8";
video {width:100%; height:auto;}
img {width:100%; vertical-align:top;}


/*contents左側*/
#mainLeft #h3-01, #mainLeft #h3-02, #mainLeft #h3-03, #mainLeft #h3-04, #mainLeft #h3-05 { margin-top:1em;}

#newstopics{margin-bottom:2em;}
#newstopics ul {height:10em; overflow-y:scroll; }

/* 3件以上の告知がある時
#newstopics dl {height:16em; overflow-y:scroll;}
*/

#about-title {margin-bottom:30px;}
#about-title h2 img {max-width:100%;}


#about-1 {display:flex; align-items: top; justify-content: space-between; flex-wrap: wrap;margin-bottom:2em;}
#about-1 p {padding:3px;box-sizing: border-box;}
#about-1 .about-img { width:32%; max-width:270px;}
#about-1 .about-img img {width:100%;}
#about-1 .about-txt { width:100%; }
@media only screen and (max-width: 640px) {
#about-1 .about-img { width:48%;}
#about-1 .about-txt { width:100%;  margin-top:.5em;}
}


#about-2 {margin-bottom:3em;}
#about-2 h3 {width:100%;margin-bottom:.5em;}
#about-2 p {box-sizing: border-box;}
#about-2 .about-img { width:32%; max-width:270px;margin-bottom:.5em;}
#about-2 .about-img img { width:100%;}
#about-2 .about-txt { width:100%; margin-bottom:1em;}
#about-2 #btn p {width:48%;display:block; position:relative;padding-top: 6%;}
#about-2 #btn a {display:block; position:absolute; width:100%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .1s ease-out;}
#about-2 #btn a:hover {width:110%;}
@media only screen and (max-width: 640px) {
#about-2 .about-img { margin-bottom:1em;}
#about-2 #btn p {width:100%; margin-bottom:1em;padding-top: 13vw;}
}

#about-3 { margin-bottom:3em;}
#about-3 h3 { width:85%; margin-bottom:.5em;}
#about-3 .flexwrap p{ width:48%; margin-bottom:.5em;}
@media only screen and (max-width: 640px) {
#about-3 .flexwrap p{ margin-bottom:1em;}
}

#Goods  { margin-bottom:2em;}
#Goods .flexwrap { margin-bottom:.5em; align-items:end;}
#Goods .flexwrap > h3 { width:48%;}
#toGoods {display:block; position:relative;padding-top: 6%;width:48%;}
#toGoods a {display:block; position:absolute; width:100%; top: 35%; left: 50%; transform: translate(-50%, -50%); transition: all .1s ease-out;}
#toGoods a:hover {width:110%;}
#toGoods img {width:100%;}
@media only screen and (max-width: 640px) {
#Goods .flexwrap {  margin-bottom:1em;}
#Goods .flexwrap > h3 { width:100%; margin-bottom:1em;}
#Goods .flexwrap > p { width:100%;padding-top: 13vw;}
}

/*見逃すな！*/
#announce{color:#347;}
h4 {width:100%; text-align:center; font-size:5vw; margin-bottom:30px;}
h4 img {width: 100%; }
h4#bottom-catchcopy {width:70%; margin: 0 auto;}
@media only screen and (max-width: 640px) {
h4#bottom-catchcopy {width:92%; margin: 1.5em auto 1em;}
}


/*social*/
#social { border:1px #ccc solid; margin-top:15px;}
#social div img {vertical-align:top;}
#social table {border-spacing:1px; margin:7px;}
#social td {width:50%; height:auto; vertical-align:middle; border:1px #ccc solid; empty-cells: hide; overflow:hidden;}
#social iframe {background-color: transparent; border:none; overflow:hidden; width:100%; height:20px; margin:3px 3px 0;}

/*footer*/
#footer { }

/* PC(960-) */
@media only screen and (min-width: 960px) {
#about-1,#about-2,#about-3,#Riders,#Goods {font:120%/1.6 sans-serif;}
}

/* タブレット＆PC(481-960) */
@media only screen and (min-width: 641px) and (max-width: 959px) {
body {
background: #000;
background-image:none;
}
#about-1,#about-2,#about-3,#Riders,#Goods {font:100%/1.3 sans-serif;}
.about-img-2 img {width:100%;}
}

@media only screen and (max-width: 640px) {
body {
background: #000;
background-image:none;
}
#gnavi { margin-top:0%;}
h3 {width:100%; float:none;}
#about-1,#about-2,#about-3,#Riders,#Goods {font:100%/1.3 sans-serif;}
#about-1 h3,#about-2 h3,#about-3 h3 {float:none; width:100%; }
.about-img-1,.about-img-2,.about-img-3{float:none; width:100%; margin-top:0;
 max-width:none;}
#about-1 .about-img { width:49%; }
#about-2 .about-img { width:32.5%; }
#about-2,#about-3 {margin-bottom:1em;}
.about-img-4 {width:40%; margin-right:1.5em;}
.about-img-4 img{width:100%;}
.about-txt-1,.about-txt-2,.about-txt-3{float:none; width:100%;}
#Goods {margin-bottom:1.5em;}
}