@charset "utf-8";

/* === 全ページ共通のCSS === */
html{
  font-size: 62.5%;
}

body{
  background: #fff;
  color: #242424;
  font: 1.6rem/1.8
  "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
  overflow-x: hidden;
}

h2{
  max-width: 1024px;
  width: 100%;
  margin: 10px auto; /* [上下][左右] */
  font-size: 4.6rem;
  font-family: 'MPLUSRounded1cMedium', sans-serif;
  color: #242424;
  word-break: auto-phrase; /* テキストを文節（自然なフレーズの境界）で折り返す */
}
h2.toph2, h3{
  width: auto;
  margin: 0;
  font-size: 3.6rem;
  font-family: 'MPLUSRounded1cMedium', sans-serif;
  color: #242424;
  padding-bottom: 60px;
  line-height: 1;
  word-break: auto-phrase; /* テキストを文節（自然なフレーズの境界）で折り返す */
}
h2.toph2 .h2span1, h3 .h2span1{
  background: linear-gradient(transparent 70%, #EFFFCC 70%);
}
h2.toph2 .h2span2, h3 .h2span2{
  font-size: 1.4rem;
  color: #557D26;
}
h4{
  font-size: 3.3rem;
  font-family: 'MPLUSRounded1cMedium', sans-serif;
  margin-bottom: 20px;
}
h4::before{
  content: "|";
  color: #65952B;
  margin-right: 10px;
}
h5{
  font-weight: bold;
}

/* ページ内リンクのずれを調整するcss 
  上のメニュー固定がなくなったため不要
a.anchor{
  display: block;
  padding-top: 139px;
  margin-top: -139px;
}*/

/* ダウンロードしたGoogleフォントを使用するためのcss */
@font-face {
  font-family: 'MPLUSRounded1cMedium';
  src: url('../fonts/MPLUSRounded1c-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'MPLUSRounded1cExtraBold';
  src: url('../fonts/MPLUSRounded1c-ExtraBold.ttf') format('truetype');
}



/* 背景色が灰色の部分と白背景で最大幅指定する必要あった場合のcss */
.sectiongraybox1024{
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
}
.sectiongraybox909{
  max-width: 909px;
  width: 100%;
  margin: 0 auto;
}

/* 灰色の背景色のsectionの設定 */
.sectiongray{
  width: 100%;
  background-color: #F7F7F7;
  margin: 0 auto; /* [上下][左右] */
  padding: 60px 0 120px; /* [上][左右][下] */
}
/* 白色の背景色のsectionの設定 */
.sectionwhite1024{
  max-width: 1024px;
  width: 100%;
  margin: 60px auto 120px; /* [上][左右][下] */
}
.sectionwhite909{
  max-width: 909px;
  width: 100%;
  margin: 60px auto 120px; /* [上][左右][下] */
}

/* リンクのある画像をマウスオーバーすると、画像の色が薄くなる */
.logo a img, #pastworks ul li a img, #pastworks #bottanbox2 a img{
  transition: .3s; /* 0.3秒かけて変化 */
}
/*.logo a:hover img, #pastworks ul li a:hover img, #pastworks #bottanbox2 a:hover img,
.logo a:active img, #pastworks ul li a:active img, #pastworks #bottanbox2 a:active img,
.logo a:focus img, #pastworks ul li a:focus img, #pastworks #bottanbox2 a:focus img{*/
.logo a:hover img, #pastworks ul li a:hover img,
.logo a:active img, #pastworks ul li a:active img,
.logo a:focus img, #pastworks ul li a:focus img,{
  opacity: .7;
}
/* 名刺バナー画像：マウスオーバーで画像が拡大される */
#pastworks #bottanbox2 .img-frame{
  max-width: 561px;
  width: 100%;
  height: 133px;
  overflow: hidden;
}
#pastworks #bottanbox2 a:hover img,
#pastworks #bottanbox2 a:active img,
#pastworks #bottanbox2 a:focus img{
  opacity: 1;
  transform: scale(1.055);
}

/* リストの横に灰色の丸を入れる */
#support ul li::before, #meishi dl dt::before{
  content: "●";
  color: #A0A0A0;
  margin-right: 10px;
}

/* 全(半)空白文字を使ってスペースをあけないようにするCSS
 例：×「名刺印刷　注文」、〇「名刺印刷注文」でホームページ上では空白はあくようにする
 html：名刺印<span class="spacing18">刷</span>注文
 */
.spacing05{
  letter-spacing: 0.5em;
}
.spacing1{
  letter-spacing: 1em;
}
.spacing2{
  letter-spacing: 2em;
}

/* === 全ページ共通のCSSここまで === */






/* トップページヒーローイメージ */
#heroimg{
  width: 100%;
  min-height: 480px;
  margin: 0 auto; /* [上下][左右] */
  background-image: url(../img/hero.png);
  background-position: center; /* 左上から右に-270px, 下に中央 */
  background-repeat: no-repeat;
  color: #242424;
  background-color: #E6E6E6;
}
#herobox{
  max-width: 1024px;
  width: 100%;
  min-height: 480px;
  display: flex;
  gap: 4.8rem;
  flex-flow: column;
  justify-content: center;
  margin: 0 auto; /* [上下][左右] */
}
#heroimg .p1{
  font-size: 5.2rem;
  font-family: 'MPLUSRounded1cMedium', sans-serif;
  max-width: 600px;
  width: 100%;
  line-height: 1.5;
  display: block;
  filter: drop-shadow(0px 0px 3px #fff);
}
#heroimg .p1 span{
  color: #0077D9;
}
#heroimg .p2{
  font-size: 2.0rem;
  max-width: 600px;
  width: 100%;
  display: block;
}



/* ぶうしすてむの理念 */
#vision{
  display: flex;
  gap: 70px;
  align-items: center;
  justify-content: space-between;
}
#vision1{
  max-width: 600px;
  width: 100%;
}
#vision2{
  max-width: 400px;
  width:100%;
  height: 266px;
  padding-top: 120px;
  font-size: 2.0rem;
  background-image: url(../img/bu_symbol.webp);
  background-size: 250px 250px; /* 画像のサイズを指定 */
  background-position: right 18px; /* 右寄せ, 下に18px */
  background-repeat: no-repeat;
}
#vision2 span{
  font-weight: bold;
}
#vision2 span span{
  color: #0077D9;
}



/* 事業案内(index.html)・事業案内(service.html)の「業務内容」のcss */
#service ul, #work ul{
  max-width: 1024px;
  width: 100%;
  margin: 60px auto 90px; /* [上][左右][下] */
  display: grid;
  gap: 30px 20px; /* [行のgap][列のgap] */
  /* グリッドアイテムの最小幅は300pxで幅に合わせて拡大されるようにする。カラムの数は幅に合わせて自動で折り返す。 */
  grid-template-columns: repeat( auto-fill, minmax(300px,1fr) ) ;
}
#service ul li img, #work ul li img{
  width: 100%;
  border-radius: 10px;
}
/*#service ul li div, #work ul li div{*/
#service ul li h3, #work ul li h3{
  font-size: 2.0rem;
  font-weight: bold;
  color: #242424;
  margin: 15px 0 10px; /* [上][左右][下] */

  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  padding-bottom: 0;
  line-height: 1.8;
}



/* 制作実績(index.html)・企業の方へ(business.html)の制作実績 */
#pastworks ul{
  margin-top: 60px;
  margin-bottom: 90px;
  display: grid;
  gap: 30px 20px; /* [行のgap][列のgap] */
  /* グリッドアイテムの最小幅は300pxで幅に合わせて拡大されるようにする。カラムの数は幅に合わせて自動で折り返す。 */
  grid-template-columns: repeat( auto-fill, minmax(300px,1fr) ) ;
}
#pastworks ul li a:hover p, #pastworks ul li a:active p, #pastworks ul li a:focus p{
  text-decoration:underline;
}
#pastworks ul li div{
  border: solid 3px #D8D8D8;
  border-radius: 15px;
  padding-bottom: 10px;
  height: 100%;
}
#pastworks ul li p{
  font-weight: bold;
  color: #242424;
  margin: 15px 5px 0px;/* [上][左右][下] */
}
#pastworks ul li small{
  font-size: 1.4rem;
  color: #242424;
  margin: 0px 5px 0px;/* [上][左右][下] */
}
#pastworks ul li img{
  width: 100%;
  border-radius: 10px 10px 0 0;
}
#pastworks #bottanbox2{
  max-width: 1024px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
#pastworks #bottanbox2 .bottanbox{
  margin: 0 0; /* [上下][左右] */
}
#pastworks #bottanbox2 a img{
  max-width: 561px;
  width: 100%;
  height: 133px;
}



/* お知らせ(index.html)・とお知らせ一覧(news.html) */
#news{
  text-align: center;
}
#newsbox{
  max-width: 800px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  margin: 0px auto; /* [上下][左右] */
  padding: 10px 35px 10px; /* [上][左右][下] */
}
#newsbox ul{
  text-align: left;
}
#newsbox ul li{
  border-bottom: solid 1px #D3D8C2;
  position: relative; /* 「＞」を右端に表示する設定 */
}
#newsbox ul li a:hover p::after, #newsbox ul li a:active p::after, #newsbox ul li a:focus p::after{
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  margin: 1rem 0; /* [上下][左右] */
  font-weight: 900; /* fasのアイコンを使用するために必要 */
  /* 「＞」を右端に表示する設定 */
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -12px;
}
#newsbox ul li div{
  display: flex;
  align-items: center;
  padding: 30px 0; /* [上下][左右] */
}
#newsbox ul li a:hover div, #newsbox ul li a:active div, #newsbox ul li a:focus div{
  background: #F9FFE5;
}
#newsbox ul li div time{
  color: #557D26;
  padding-right: 25px;
  font-weight: bold;
}
#news #newsbox ul li p{
  padding-right: 25px; /* 「＞」が文章と重ならないようにする余白 */
}
#news .bottan{
  width: 430px;
  margin: 0px auto; /* [上下][左右] */
}



/* お問い合わせ先と地図(index.html) */
#admap{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 90px;
}
#admap #ad{
  display: flex;
  flex-flow: column;
  gap: 10px;
}
#admap #ad dl{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
#admap #ad dt{
  /*width: 12%;*/
  font-weight: normal;
  flex-basis: 4rem;
}
#admap #ad dd{
  /*width: 88%;*/
  flex-basis: calc(100% - 4rem);
}
#admap #ad ul{
  display: inline;
}
#admap #ad ul li{
  padding-bottom: 10px;
}
#admap #ad ul li a{
  display: flex;
  align-items: center;
}
#admap #ad ul li .mapikon{
  font-size: 2.4rem;
  padding-right: 16px;
  padding-left: 6px;
}
#admap #ad ul li .dougaikon{
  width: auto;
  height: 20px;
  padding-right: 10px;
}
#admap #ad a{
  font-weight: bold;
}
#admap #ad a:hover .aunderline, #admap #ad a:active .aunderline, #admap #ad a:focus .aunderline{
  text-decoration: underline;
}
#admap #ad a i{
  padding-left: 5px;
}
#admap #map{
  max-width: 600px;
  width: 100%;
}
#admap #ad img{
  max-width: 300px;
}
#admap #map img{
  width: 550px;
}
#admap #map2 img{
  display: none;
}
#admapcont ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
#admapcont ul li div{
  border: solid 4px #E9E9E9;
  border-radius: 10px;
  width: 450px;
  min-height: 150px;
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
#admapcont ul li div p{
  font-weight: bold;
  font-size: 1.8rem;
}
#admapcont ul li div p i{
  margin-right: 5px;
}
#admapcont ul li div .telfont{
  font-size: 2.4rem;
  color: #0077D9;
}
#admapcont ul li div .telfont a:hover, #admapcont ul li div .telfont a:active, #admapcont ul li div .telfont a:focus{
  text-decoration: underline;
}
#admapcont ul li div small{
  font-size: 1.4rem;
  color: #242424;
  margin: 0px 5px 0px;/* [上][左右][下] */
}
#admapcont ul li div span{
  margin: 0 auto; /* [上下][左右] */
}
#admapcont ul li div .bottan a{
  width: auto;
  margin-top: 5px;
  border-radius: 10px;
}
#admapcont ul li div .bottan a span.topbottan{
  border: none;
  width: auto;
  height: auto;
  min-height: 0;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
}
#admapcont ul li div .bottan a span.topbottan span{
  margin: 0 4px;
}
#admapcont ul li div i.isize{
  font-size: 1.5rem;
  padding-bottom: 2px;
}




/* === index.html以外のページの設定 === */

/* --- index以外のページの共通のcss --- */
/* パンくずリストのcss */
.pankuzu{
  width: 100%;
  background-color: #F7F7F7;
  margin: 0 auto; /* [上下][左右] */
  border-top: solid 1px #D9D9D9;
  border-bottom: solid 1px #D9D9D9;
}
.pankuzu ol{
  max-width: 1024px;
  width: 100%;
  margin: 0 auto; /* [上下][左右] */
  padding: 10px 0; /* [上下][左右] */
  display: flex;
}
/* パンくずリスト、最初以外は「＞」を前に入れる */
.pankuzu ol li:not(:first-child):before{
  content: "　＞　";
}
.pankuzu ol li a:hover, .pankuzu ol li a:active, .pankuzu ol li a:focus{
  text-decoration: underline;
}
/* パンくずリスト下のタイトル */
.toptitle{
  width: 100%;
  border-bottom: solid 5px #9cd226;
  margin: 0 auto;
}

/* aタグの下線等の共通CSS */
#company dl dd a, #support ul li a, #example p .textunderline,
#flow ul li dl dd p a, #gmeeting ul li a, #ascore ul li a{
  font-weight: bold;
  text-decoration: underline;
  transition: .3s; /* 0.3秒かけて変化 */
}
#company dl dd a:hover, #support ul li a:hover, #example p .textunderline:hover, #flow ul li dl dd p a:hover,
#company dl dd a:hover, #company dl dd a:active, #company dl dd a:focus,
#support ul li a:hover, #support ul li a:active, #support ul li a:focus,
#example p .textunderline:hover, #example p .textunderline:active, #example p .textunderline:focus,
#flow ul li dl dd p a:hover, #flow ul li dl dd p a:active, #flow ul li dl dd p a:focus,
#gmeeting ul li a:hover, #gmeeting ul li a:active, #gmeeting ul li a:focus,
#ascore ul li a:hover, #ascore ul li a:active, #ascore ul li a:focus{
  opacity: .7;
}

/* h4のmargin共通CSS */
.margintop{
  margin-top: 30px;
}
/* pの共通CSS */
#company p, #employment p, #privacy p, #overview p{
  margin-bottom: 1.6rem;
}
/* dl・dt・ddの共通CSS */
#company dl, #employment dl, #privacy dl{
  display: flex;
  flex-wrap: wrap;
}
#company dl dt, #employment dl dt, #privacy dl dt{
  width: 20%;
  padding: 10px 25px; /* [上下][左右] */
  font-weight: bold;
}
#company dl dd, #employment dl dd, #privacy dl dd{
  width: 80%;
  padding: 10px 25px; /* [上下][左右] */
}
#company dl dt:nth-of-type(odd), #company dl dd:nth-of-type(odd),
#employment dl dt:nth-of-type(odd), #employment dl dd:nth-of-type(odd),
#privacy dl dt:nth-of-type(odd), #privacy dl dd:nth-of-type(odd){
  background-color: #F7F7F7;
}

/* ボタン部分以外の、i(アイコン)に左右に余白追加の共通CSS */
#company dl dd a i, #support ul li a i{
  padding: 0 3px; /* [上下][左右] */
}
/* ボタン部分以外の、i(アイコン)の右に余白追加の共通CSS */
#flow ul li dl dd p i{
  padding-right: 3px;
}

/* 利用を考えている方への「利用例」と企業の方への「ご依頼の流れ」css */
#flow ul li{
  border: solid 2px #D8D8D8;
  border-radius: 10px;
  margin-bottom: 40px;
  position:relative;
  background-color: #fff;
}
#flow ul li:not(:last-child)::after {
  border-top: 23px solid #D8D8D8;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content: "";
  position: absolute;
  bottom: -33px;
  left: 48%;
}
#flow ul li dl{
  display: flex;
  align-items: center;
  max-width: 1024px;
  width: 100%;
  min-height: 140px;
}
#flow ul li dl dt{
  width: 20%;
  text-align: center;
  line-height: 1.8rem;
}
#flow ul li dl dt .flowspan1{
  color: #0077D9;
  display: block;
  margin-bottom: 10px;
  font-family: 'MPLUSRounded1cExtraBold', sans-serif;
  font-size: 1.5rem;
}
#flow ul li dl dt .flowspan2{
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.8rem;
}
#flow ul li dl dd{
  width: 80%;
}
#flow ul li dl dd div{
  display: flex;
}
#flow ul li dl dd div p:first-child{
  margin-right: 20px;
}
.brnone{
  display: inline;
}
#flow ul li dl dd div i.isize2{
  font-size: 1.4rem;
  padding-left: 3px;
}
/* ぶうしすてむについてとプライバシーポリシーと企業の方へのリストのcss */
#company ul li::before, #privacy ul li::before, #itservice ul li::before, #gmeeting ul li::before, #ascore ul li::before{
  content: "●";
  color: #A0A0A0;
  margin-right: 10px;
}

/* --- index以外のページの共通のcssここまで --- */



/* ぶうしすてむについて(company.html)のcss */
/* 「法人概要」のcss */
#company dl{
  margin-top: 3.2rem;
}
#company ul li::before{
  content: "";
  margin-right: 0;
}
/*#company div{*/
#company ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
/*#company div .bottan a{*/
#company ul .bottan a{
  width: 290px;
  padding-left: 40px;
  padding-right: 40px;
}
/*#company div p{*/
#company ul li{
  margin-bottom: 0;
}
/* 「役員一覧」のcss */
#company .dldl{
  margin-top: 0;
}
#company .dldl dt, #company .dldl dd{
  padding: 0;
}
#company .dldl dt:nth-of-type(odd), #company .dldl dd:nth-of-type(odd){
  background-color: #FFF;
}
#company .dldl dt{
  width:15%;
}
#company .dldl dd{
  width:85%;
}

/*#company .dldl dt::before{
  content: "●";
  color: #A0A0A0;
  margin-right: 10px;
}*/
/* 「沿革」のcss */
#historybox{
  max-width: 1024px;
  width: 100%;
  background: #fff;
}
#historybox dl{
  display: flex;
  flex-wrap: wrap;
}
#historybox dl dt{
  width: 13%;
  padding: 10px 30px; /* [上下][左右] */
  border-right: solid 3px #E3E3E3;
  position: relative;
  color: #0077D9;
}
#historybox dl dt:first-child{
  margin-top: 5px;
}
#historybox dl dt:last-of-type{
  margin-bottom: 5px;
  padding-bottom: 5px;
}
#historybox dl dt::after{
  content: "●";
  color: #A0A0A0;
  font-size: 3.5rem;
  position: absolute;
  /*right: -12px;*/
  right: -1.2rem;
  top: -10px;
}
#historybox dl dd{
  width: 87%;
  padding: 10px 25px 10px 50px; /* [上][右][下][左] */
}
#historybox dl dd:first-of-type{
  padding-top: 15px;
}
#history .bottan a{
  width: 500px;
}
/* 「クレド（信条）」のcss */
#credo dl dt{
  font-size: 2.2rem;
  margin-bottom: 20px;
}
#credo dl dt span{
  color: #0077D9;
}
#credo dl dd{
  margin-bottom: 40px;
}
#credo p{
  font-size: 2.0rem;
  font-weight: bold;
}
/* 「運営方針」のcss */
#policy ol li{
  background: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
#policy ol li .policyno{
  margin: 0 30px; /* [上下][左右] */
  color: #0077D9;
  font-weight: bold;
}
#policy ol li p{
  padding: 15px 0; /* [上下][左右] */
}
#policy ol li p strong{
  font-weight: bold;
}
/* 「支援のご案内」のcss */
#support p{
  margin-bottom: 1.6rem;
}

/* 事業案内(service.html)のcss */
/* 「業務内容」のcss */
#work ul{
  margin: 0 auto; /* [上下][左右] */
}
/* 「多機能型事業所」のcss */
#employment dl{
  padding-bottom: 20px;
}

/* 利用を考えている方へ(use.html)のcss */
/* 「利用例」のcss */
#example img{
  max-width: 1024px;
  width: 100%;
  margin: 20px 0; /* [上下][左右] */
  border-radius: 10px;
}
#example ul{
  margin: 8px 0;/* [上下][左右] */
}
#example ul li{
  /* 利用例のリストの２行目を１文字下げるcss */
  margin-left: 2rem;
  text-indent: -1.9rem;
}
#example ul li::before{
  content: "●";
  color: #A0A0A0;
  margin-right: 10px;
}

/* 企業の方へ(business.html)のcss */
#itservice ul{
  margin: 15px 0; /* [上下][左右] */
}
#itservice ul li{
  line-height: 2.2;
}

/* 愛媛県職員さん向け名刺(ehime_meishi.html)のcss */
#meishi p.maisuu{
  font-size: 4.6rem;
  text-align: center;
  font-family: 'MPLUSRounded1cMedium', sans-serif;
  margin-top: 10px;
}
#meishi #meishijyouho{
  display: flex;
  justify-content: space-between;
  max-width: 909px;
  width: 100%;
  margin: 20px auto 40px; /* [上][左右][下] */
}
#meishijyouho .div1{
  width: 50%;
}
#meishijyouho .div2{
  width: 45%;
}
#meishi #meishijyouho div{
  padding: 10px 0; /* [上下][左右] */
}
#meishi #meishijyouho div h3{
  font-size: 2.6rem;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
  border-bottom: solid 3px #65952B;
  padding-bottom: 0;
  margin-bottom: 10px;
}
#meishi #meishijyouho div p span{
  font-size: 2.0rem;
  font-weight: bold;
}
#meishi dl{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
#meishi dt{
  width: 30%;
  font-weight: normal;
}
#meishi dd{
  width: 70%;
}
#meishi p.bottan a{
  margin: 0 auto;
  border-radius: 10px;
  max-width: 500px;
  width: 100%;
}

/* 総会資料（決算）(gmeeting.html)のcss */
#gmeeting ul{
  margin: 20px 0;/* [上下][左右] */
}


/* A型スコア表(ascore.html)のcss */
#ascore h4{
  margin-top: 20px;
  margin-bottom: 0;
}
#ascore ul{
  margin-bottom: 35px;
}

/* === タブレット版：幅が1024pxより狭い時に適用 === */
@media screen and (max-width:1024px){
  /* --- タブレット版(幅1024px)：indexの共通のcss --- */
  /* タブレット版(幅1024px)：左右のpadding10pxにする共通CSS */
  #vision2{
    padding-left:10px;
    padding-right:10px;
  }
  #heroimg, #vision1, #service, #servicesection .bottanbox,
  #pastworks, #pastworks #bottanbox2 a img, #news, #admapcont{
    padding: 0 10px; /* [上下][左右] */
  }


  /* タブレット版(幅1024px)：ぶうしすてむの理念 */
  #vision{
    gap: 10px;
  }

  /* タブレット版(幅1024px)：制作実績 */
  #pastworks #bottanbox2{
    gap: 30px;
  }
  #pastworks #bottanbox2 a img{
    max-width: 500px;
    width: 100%;
    height: 118px;
  }

  /* タブレット版(幅1024px)：お問い合わせ先と地図 */
  #admap #map img{
    width: 100%;
  }

  /* --- タブレット版(幅1024px)：index以外のページの共通のcss --- */
  /* タブレット版(幅1024px)：パンくずリストのcss */
  .pankuzu, .toptitle{
    padding: 0 10px; /* [上下][左右] */
  }

  /* タブレット版(幅1024px)：左右のpadding10pxにする共通CSS */
  #company, #history, #credo, #policy, #support,
  #overview, #work, #employment,
  #features, #example, #flow,
  #itservice, #privacy, #meishi{
    padding: 0 10px; /* [上下][左右] */
  }

  /* タブレット版(幅1024px)：ぶうしすてむについて 沿革 */
  #historybox dl dt{
    width: 20%;
    text-align: center;
  }
  #historybox dl dd{
    width: 80%;
  }

}






@media screen and (max-width:800px){
  /* index.htmlのぶうしすてむの理念のボタンの幅が430pxだと、
   右側だけ幅が狭くなるので、幅と余白を調整*/
  #vision1 .bottan a{
    width: auto;
    padding: 10px 5%;
  }
}




  /* 改行を非表示にする */
@media(max-width: 704px){
  .brhiddn2{
    display: none;
  }
}
@media(max-width: 674px){
  .brhiddn3{
    display: none;
  }
}
@media(max-width: 620px){
  .brhiddn{
    display: none;
  }
}





/* === スマホ版：幅が599pxより狭い時に適用 === */
@media(max-width: 599px){
  /* === スマホ版(幅599px)：全ページ共通のCSS === */
  h2{
    font-size: 3.5rem;
    line-height: 4.5rem;
  }
  h3{
    font-size: 3rem;
  }
  h4{
    font-size: 2.6rem;
  }

  /* ページ内リンクのずれを調整するcss 
  上のメニュー固定がなくなったため不要
  a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
  }*/

  .spacing23{
    letter-spacing: 1.6rem;
  }
  /* === スマホ版(幅599px)：全ページ共通のCSSここまで === */



  /* スマホ版(幅599px)：トップページヒーローイメージ */
  #heroimg{
    background-image: url(../img/hero_phon.png);
    background-size: cover;
    height: auto;
  }
  #heroimg .p1{
    max-width: 100%;
    font-size: 3rem;
  }
  #heroimg .p2{
    max-width: 100%;
    font-size: 1.6rem;
  }
  #herobox{
    height: 400px;
    width: auto;
    gap: 1.5rem;
  }
  /* スマホ版(幅599px)：「ぶうしすてむの理念」 */
  #vision{
    flex-wrap: wrap;
    gap: 30px;
  }
  #vision1{
    width: 100%;
  }
  #vision2{
    width: auto;
    height: auto;
    margin: 0 auto;
    background-size: 100px 100px; /* 画像のサイズを指定 */
    background-position: center center;
    padding-top: 0;
  }
  /* スマホ版(幅599px)：事業案内 */
  #service ul, #work ul{
    grid-template-columns: none;
    grid-auto-flow: row;
  }
  #service ul li div, #work ul li div{
    margin-top: 5px;
  }
  /* スマホ版(幅599px)：制作実績 */
  #pastworks ul{
    grid-template-columns: none;
    grid-auto-flow: row;
  }
  #pastworks #bottanbox2{
    justify-content: center;
  }
  #pastworks #bottanbox2 .bottanbox{
    width: 100%;
  }
  #pastworks #bottanbox2 a img{
    width: 100%;
    height: auto;
  }
  #pastworks #bottanbox2 .img-frame {
    width: auto;
  }
  /* スマホ版(幅599px)：お知らせ */
  #news .bottan{
    width: 100%;
  }
  #newsbox ul li div{
    flex-flow: column;
    align-items: normal;
  }
  /* スマホ版(幅599px)：お問い合わせ先と地図 */
  #admap{
    justify-content: center;
    flex-wrap: wrap;
    /*gap: 30px;*/
    margin-bottom: 30px;
  }
  #admap #ad{
    /*max-width: 300px;*/
    max-width: 589px;
    width: 100%;
  }
  #admap #ad img{
    margin: 0 auto;
    width: 100%;
  }
  address{
    max-width: 300px;
    margin: 0 auto;
  }
  #admapcont #admap #ad ul{
    max-width: 300px;
    margin: 0 auto;
  }
  #admap #ad ul li a img{
    margin: 0;
  }
  #admap #map img{
    display: none;
  }
  #admap #map2 img{
    display: block;
    max-width: 425px;
    width: 100%;
    padding: 20px 0; /* [上下][左右] */
  }

  #admapcont ul li{
    max-width: 599px;
    width: 100%;
  }
  #admapcont ul li div{
    width: 100%;
  }
  #admapcont ul li div .bottan a{
    width: 90vw;
  }
  #admapcont ul li div .bottan a span.topbottan{
    margin: 0 auto;
  }



  /* --- スマホ版(幅599px)：index以外のページの共通のcss --- */
  /* スマホ版(幅599px)：dl・dt・ddの共通CSS */
  #company dl, #employment dl, #privacy dl{
    flex-direction:column;
  }
  #company dl dt, #employment dl dt, #privacy dl dt{
    width: 100%;
    display: inline-block;
    border-bottom: none;
    padding-bottom: 5px;
  }
  #company dl dd, #employment dl dd, #privacy dl dd{
    width: 100%;
    padding-top: 0;
  }

  /* スマホ版(幅599px)：利用を考えている方への「利用例」と企業の方への「ご依頼の流れ」css */
  #flow ul li:not(:last-child)::after {
    left: 46%;
  }
  #flow ul li dl{
    flex-direction:column;
    padding: 10px 10px; /* [上下][左右] */
    min-height: 100px;
  }
  #flow ul li dl dt{
    width: 100%;
  }
  #flow ul li dl dt .flowspan1{
    margin-bottom: 0;
  }
  #flow ul li dl dt .flowspan2{
    font-size: 2.0rem;
    margin-bottom: 10px;
  }
  #flow ul li dl dd{
    width: 100%;
  }
  #flow ul li dl .textcenter{
    text-align: center;
  }
  #flow ul li dl dd div{
    justify-content: center;
    flex-wrap: wrap;
  }
  .brnone{
    display: none;
  }
  /* --- スマホ版(幅599px)：index以外のページの共通のcssここまで --- */


  /* スマホ版(幅599px)：ぶうしすてむについて */
  /*#company div .bottan{*/
  #company ul .bottan{
    max-width: 599px;
    width: 100%;
  }
  /*#company div .bottan a{*/
  #company ul .bottan a{
    max-width: 599px;
    width: 100%;
  }
  #company .dldl{
    flex-direction:row;
  }
  #company .dldl dt{
    width:30%;
  }
  #company .dldl dd{
    width:70%;
  }
  #historybox dl dt{
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
  }
  #historybox dl dd{
    width: 75%;
    padding-left: 20px;
    padding-right: 10px;
  }
  #history .bottan a{
    width: auto;
  }
  #policy ol li .policyno{
    margin: 0 20px; /* [上下][左右] */
  }

  /* スマホ版(幅599px)：愛媛県職員さん向け名刺 */
  #meishi #meishijyouho{
    flex-flow: column;
  }
  #meishijyouho .div1{
    width: 100%;
    margin-bottom: 20px;
  }
  #meishijyouho .div2{
    width: 100%;
  }
  #meishi p.maisuu{
    font-size: 3.5rem;
  }
  #meishi p.bottan a {
    justify-content: center;
    gap: 20px;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
  }

}