/*//////////ウィンドウ幅が最大800pxまでの場合に適用//////////*/
@media screen and (max-width: 800px) {

/* grobalmenu */
.g-btn {
    background:transparent url(../img/btn.png) no-repeat 0 0;
    display: block;
    width:35px;
    height: 35px;
    position: fixed;
    top:20px;
    right:20px;
    cursor: pointer;
    z-index: 200;
}
.peke {
    background-position: -35px 0;
}
.drawr {
    display: none;
    background-color:rgba(51,51,51,0.8);
    position: fixed;
    top: 0px;
    right:0;
    width:200px;
    height:400px !important;
    padding:60px 0 20px 0;
    z-index: 100;
}

ul#menu {
    list-style: none;
    text-decoration: none;
    padding: 0;
}
#menu li {
    width:200px;
}
#menu li a {
    color:#fff;
    display: block;
    padding: 15px 15px 15px 40px;
    text-decoration: none ;
}

/* grobalmenu */
.g-btn {
    background:transparent url(../img/btn.png) no-repeat 0 0;
    display: block;
    width:35px;
    height: 35px;
    position: fixed;
    top:20px;
    right:20px;
    cursor: pointer;
    z-index: 200;
}
.peke {
    background-position: -35px 0;
}
.drawr {
    display: none;
    background-color:rgba(51,51,51,0.8);
    position: fixed;
    top: 0px;
    right:0;
    width:200px;
    height:400px !important;
    padding:60px 0 20px 0;
    z-index: 100;
}

ul#menu {
    list-style: none;
    text-decoration: none;
    padding: 0;
    text-align: center;
}
#menu li {
    width:200px;
}
#menu li a {
    color:#fff;
    display: block;
    padding: 15px 15px 15px 40px;
    text-decoration: none ;
}

/*販売促進ページ*/
.salespromotion p.explanation {
  width: 90%;
  margin: 20px auto 0px;
}

.salespromotion .flex {
  width: 100%;
  flex-direction: column;
}

.spcontents img {
width: 100%;
height: auto;
margin: 20px 0 0 0;
}

/*編集のページ*/
.editorial p.explanation {
  width: 90%;
  margin: 20px auto 0px;
}

.editorial .flex {
  width: 100%;
  flex-direction: column;
}

.editcontents img {
width: 100%;
height: auto;
margin: 20px 0 0 0;
}

/* お問い合わせページ */
.contact p.explanation {
  width: 90%;
  margin: 20px auto 0px;
}

.contact .mailform_contents {
  width: 90%;
    margin: 20px auto 0px;
}

/*広告媒体ページ*/
/* advertisement */
.advertisement p.explanation {
  width: 90%;
  margin: 20px auto 0px;
}

.a-nav {
  margin: 0 0 40px 0;
}

ul.a-menu {
  display: flex;
  flex-direction: column;
  margin: 5px 0 0 0;
}

.a-menu li {
  width: 100%;
  margin: 15px 0 0 0;
}

.a-menu a {
  width: 100% !important;
}

.localinfo .h3title {
  margin: 0 0 20px 0;
}

.localinfo-shoyomi .flex, .webinfo-shoyomi .flex, {
  display: flex;
  flex-direction: column;
}

.webinfo h3.anchor {
  display: block;

}

.localinfo-contents1, .webinfo-contents1 {
  width: 100%;
  text-align: justify;
}

.localinfo-contents1 table, .webinfo-contents1 table,  {
  text-align: left;
}

.localinfo-contents1 table th {
  width: 25%;
}

.webinfo-contents1 table th {
  width: 28%;
}

.localinfo-contents2 img {
  margin: 0 auto 10px;
  width: 100%;
  height: auto;
}

.webinfo-contents2 img {
  margin: 0 auto 10px;
  width: 100%;
  height: auto;
}

.localinfo-contents3, .webinfo-contents3 {
  width: 100%;
}

.localinfo-contents3 table th, .localinfo-contents3 table td {
  padding: 10px 10px;
}

.webinfo-contents3 table th, .webinfo-contents3 table td {
  padding: 10px 10px;
}

.web-ad-size {
  width: 45%;
}

.web-price {
  width: 25%;
}

.web-bikou {
  width: 30%;
}

.web-bikou2 {
  width: 20%;
}

.asobii-ad-size1 {
 width: 20%;
}

.asobii-ad-size2 {
 width: 20%;
}

.web-price2 {
 width: 20%;
 text-align: right;
}



caption {
  text-align: left;
  margin: 0 0 5px 0;
  font-size: 14px !important;
}

.localinfo-contents5, .localinfo-yokoyomi-contents5 {
  width:100%;
}

.localinfo-contents5 .scroll-table {
  overflow: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: auto;
  font-size: 14px;
}

.localinfo-yokoyomi-contents5 .scroll-table {
  overflow: scroll;
  white-space: nowrap;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.localinfo-second-contents5 .scroll-table {
  overflow: scroll;
  white-space: nowrap;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.scroll::-webkit-scrollbar{  /*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{  /*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {v/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}

.localinfo-contents5 table, .localinfo-yokoyomi-contents5 table, .localinfo-second-contents5 table  {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 10px 0 10px;
  display: block;
}

/* 湘よみ問い合わせ */

.shoyomi-a-contact .flex {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.shoyomi-a-contact {
  margin: 40px 0;
  padding: 10px 20px;
  width: 90%;
  height: auto;
}

.shoyomi-a-contact .contact-text {
  width: 90%;
  line-height: 1.5;
  margin: 20px auto 0;
}

.shoyomi-a-contact1 {
  margin: 0;
  padding: 0;
}

.shoyomi-a-contact .shoyomi-a-contact2 p {
  line-height: 1;
  margin: 40px 0 0 0;
}

.shoyomi-a-contact .shoyomi-a-contact2 {
  font-size: 30px;
}

.shoyomi-a-contact .shoyomi-a-contact3 {
  font-size: 16px;
  width: 100%;
  display: block;
  margin: 10px 0;
  padding: 5px 0 5px 0;
}

.installation-location .flex {
  display: flex;
  flex-direction: column;
}

.installation-location1 {
    width: 100%;
    margin: 40px 0 0 0;
}

.installation-location2 {
    width: 100%;
    margin: 40px 0 0 0;
}

.installation-location3 {
    width: 100%;
    margin: 10px 0 40px 0;
}

.installation-location3 h4 {
    margin: 10px 0 10px 0;
}

.installation-location3 .list-left {
  width: 100%;
  margin:0 0 0 17px;
}

.installation-location3 .list-center {
  width: 100%;
  margin:0 0 0 17px;
}

.installation-location3 .list-right {
  width: 100%;
  margin:0 0 0 17px;
}

.localinfo-yokoyomi {
  margin: 40px 0 40px 0;
}

.localinfo-secondlife {
  margin: 40px 0 40px 0;
}


/* Works */
.workscontentsbox {
margin: 20px auto 20px !important;
padding: 0;
height: auto;
}

.workscontentsbox:not(:last-child) {
margin: 0 0 20px 0;
}

figure.workscontents img {
max-width: 100%;
height: auto;
}

figure.workscontents {
max-width: 100%;
max-height: 290px;
margin: 0;
}

main .flex {
flex-wrap: wrap;
justify-content: center;
}

.workscontentsbox h4 {
  margin: 5px 0 0 0;
}

/* 制作実績の詳細 */
.main_worksdetails h3.h3title:not(:first-child) {
  margin: 40px 0 20px 0;
}

.flex-works .anchor {
  display: block;
  padding-top: 70px;
  margin-top: -70px;
}

/*
.main_worksdetails h3.anchor {
  display: block;
  padding-top: 40px;
  margin-top: -40px;
}
*/

.client-nav {
  margin: 0 0 40px 0;
}

ul.client-menu {
  display: flex;
  flex-direction: column;
  margin: 5px 0 0 0;
}

.client-menu li {
  background-color: #f3fafd;
  width: 100%;
  margin: 10px 0 0 0;
  font-size: 16px;
}

.client-menu a {
  width: 100% !important;
}

}


/*//////////ウィンドウ幅が最大480pxまでの場合に適用//////////*/
@media screen and (max-width: 480px) {

/* common */
img {
max-width: 100%;
}

.container {
width: 90%;
margin: 0 auto;
}

/* h2 */
h2.section-title {
font-size: 20px;
margin-bottom: 10px;
color: #555;
letter-spacing: 2px;
}

.section-title::after {
font-size: 70%;
font-weight: bold;
color: #aaa;
}

/* footer */
footer {
margin: 20px 0 0;
padding: 5px 0;
}

footer > p {
  font-size: 70%;
}

/* 電話の発信スマホのみ */
a[href^="tel:"] {
    pointer-events: none;
}

.mainstrengths .strengths, .mainservice .servicedescription {
width: 90%;
text-align: justify;
font-size : 85% ;
}

header .flex, .mainservice .flex, .mainworks .flex, .maincompany .flex {
display: block !important;
}

/* header */
header {
  margin: 0px 0 20px 0;
}

h1.shoyomilogo {
margin: 20px auto 10px;
}

ul#contact {
text-align: center;
margin: 0 auto 10px;
}

.contactus li {
padding: 0 auto 10px;
}

.contact2 {
margin: 0 auto;
}

/* main */
.mainph {
background-size:100%;
background: no repeat;
height:200px;
}

.mainph p {
font-size: 20px;
letter-spacing: 2px;
}

.mainstrengths, .mainworks {
margin: 20px 0 20px 0;
}

.mainservice {
background: none;
height: auto;
padding: 20px 0 20px 0;
border-top: 1px dotted #555;
}

/* Service */
.servicedescription > p {
margin: 0px 0 20px 0;
}

.service {
width: 80%;
margin: 0 auto 20px;
padding: 0;
text-align: center;
background: #eaf6fd;
}

.service p {
line-height: 20px;
}

.service > h2.section-title {
font-size: 20px;
letter-spacing: 2px;
}

/* Works */
.mainworks {
margin: 0;
padding: 20px 0 20px 0;
border-top: 1px dotted #555;
}

.mainworks .container {
  margin: 0 auto 80px;
}

.mainworks .workscontents img {
width: 95%;
margin: 0 0 20px 0;
}

.mainworks .readmorebtn {
margin: 20px auto;
}

.mainworks .readmorebtn02 p, .maincompany .readmorebtn02 p {
  margin: 10px auto 40px;
}

.mainworks .flex {
flex-wrap: wrap;
justify-content: center;
}

figure.workscontents img {
max-width: 100%;
height: auto;
}

figure.workscontents {
max-width: 100%;
max-height: 290px;
margin: 0;
}

/* Company */
#companyprofile {
  display: block;
  padding-top:50px;
  margin-top:-50px;
}

.maincompany {
margin: 0;
padding: 20px 0 20px 0;
border-top: 1px dotted #555;
}

.company1, .company2 {
width: 100%;
text-align: left;
}

.company1 table th, .company2 table th {
width: 100%;
display: block;
padding: 10px 2px;
}

.company1 table td, .company2 table td {
width: 100%;
display: block;
padding: 10px 2px;
}

.maincompany .companybtn {
margin: 20px auto;
}

.map {
width: 100%;
height: 250px;
}

iframe {
width : 100%;
}


/* 制作実績のカラム */
.flex-works-item01 {
  width: 100%;
  margin: 0 auto;
}
.flex-works-item02 {
  width: 100%;
  margin: 10px auto;
}

.flex-works {
  display: flex;
  flex-direction: column;
  margin: 50px 0 0 0;
}

.flex-works:not(:last-child) {
}

.flex-works-item02 h3.h3title {
  margin: 0 !important;
  padding: 0px;
  text-align: center;
}

.works-spec {
  position:static;
	bottom: 0;
  width: 100%;
  margin: 0 auto;
}


}