@charset "UTF-8";

body { margin: 0;
       font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif}

/*-----header.html-----*/

/*サイト名*/
.site h1 a   {color: #000000;
              text-decoration: none}

.site h1     {margin: 0;
              font-size: 14px}

.site img    {border: none}

/*ヘッダー画像*/
.topimg { max-width: 100%;
          height: auto;
          vertical-align: bottom}

/*キャッチコピー*/
.catch {margin: 0;
        padding: 15px;
        background-color: rgba(255,255,255,0.7);
        font-size: 10px}
        
/*.top p { margin: 0;
         padding:10px 20px;
         font-size: 14px}*/

.text { text-align: center; 
        margin: 0;
        padding:0px 10px 0px 10px;
        font-size: 12px}

/*ヘッダーカテゴリー*/
.contents a  {display: block;
  background-color: #ffffff;
  color: #222222;
  text-align: center;
  text-decoration: none;
  border:thin solid #222222}

.contents a:hover {opacity: 0.8}

.contents i  {display: block;
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: 38px}

.contents h2 {margin-top: 0;
  margin-bottom: 0;
  padding-top: 5px;
  padding-bottom: 0px;
  font-size: 12px;
  font-weight: normal}

.contents p  {margin-top: 0;
  margin-bottom: 0;
  padding-top: 0px;
  padding-bottom: 5px;
  background-color: #ffffff;
  font-size: 12px}

.contents img { max-width: 100%;
    height: auto;
    vertical-align: bottom
  }
  

/*-----ここまでheader.html-----*/

/*-----index.html-----*/

/*newitemバナー*/
.newitem img { max-width: 100%;
              height: auto;
              vertical-align: bottom
            }


/* カテゴリーバナー */
.category-title .h2 {
  display: block;
  text-align: left;
  color: #3c3c3c;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  line-height: 1.2;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px
}

.p-title {
  border-bottom: 1px solid currentColor;
  margin-bottom: 28px;
  font-size: 1.3rem;
  padding-bottom: 13px;
  font-weight: 200
}

.fs-sm {
  font-size: 0.8rem;
  font-weight: 500;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
  line-height: 1.2;
  color: #3c3c3c;
  box-sizing: border-box;
  margin-left: 10px;
}

.u-pc__hide {
  display: none;
  box-sizing: border-box;
}

/*過去製作実績へ*/
.more-btn a { color: #000;
    text-decoration: none;
    background-color: transparent;
          }

/*-----example過去実績ボタン-----*/          
.more-btn i {
  vertical-align: middle;
}

.more-btn {
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  border: 0 solid #111111;
  background: #F0F0F0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: normal;
  border-radius: 2px;
  color: #111111;
  text-decoration: none;
}

.more-btn i {
  vertical-align: middle;
}

.more-btn:hover,
.btn:hover {
  color: #111111;
  background: #CCCCCC;
  transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -ms-transition-duration: 0.2s;
}

.btn.active {
  color: #FFFFFF;
  background: #111111;
}

#page-top .material-icons {
  font-size: 3.2rem;
}

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*-----ここまでexample過去実績ボタン-----*/  

/*-----TOPへ戻るボタン-----*/  
.pagetop {
  display: none;
  position: fixed;
  z-index:1;
  bottom: 0px;
  right: 0px;
}
.pagetop a {
  display: block;
  background-color: #000;
  text-align: center;
  color: #ccc;
  font-size: 36px;
  text-decoration: none;
  padding: 5px 10px;
filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

.pagetop a:hover {
  display: block;
  background-color: #666666;
  text-align: center;
  color: #fff;
  font-size: 36px;
  text-decoration: none;
  padding:5px 10px;
filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}



/*商品*/
.shouhin a  {display: block;
            background-color: #ffffff;
            color: #dddddd;
            text-align: center;
            text-decoration: none}

.shouhin a:hover {opacity: 0.8}

.shouhin img { max-width: 100%;
               height: auto;
               vertical-align: bottom}

/*カテゴリー*/
.category a  {display: block;
            background-color: #ffffff;
            color: #222222;
            text-align: center;
            text-decoration: none}

.category a:hover {opacity: 0.8}

.title-label {
  font-size: 22px;
  letter-spacing: 0.8px;
  border-bottom: 1px solid #111111;
  margin-bottom: 24px;
  padding-left: 4px;
  padding-bottom: 4px; }

.title-label .en {
  font-family: 'Lato', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }

.title-label .label-text {
  font-size: 1.4rem;
  padding-left: 1.4rem;
  letter-spacing: 0.1rem; }

.title-label .label-text:before,
.title-label .label-text:after {
  content: "-"; }

.category h1 {
    font-family: 'Lato', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: 22px;
    letter-spacing: 0.8px;
    border-bottom: 1px solid #111111;
    margin-bottom: 24px;
    padding-left: 0px;
    padding-bottom: 4px;
    text-align: left;
    padding-top: 5px;
    font-weight: bold
    }
    
.category h2 {
    font-family: 'Lato', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    font-size: 18px;
    letter-spacing: 0.8px;
    margin-bottom: 0px;
    padding-left: 4px;
    padding-bottom: 4px;
    text-align: center;
    padding-top: 5px;
    font-weight: normal
    }

.category p  {margin-top: 0;
            margin-bottom: 0;
            padding-top: 5px;
            padding-bottom: 10px;
            background-color: #ffffff;
                text-align: center;
            font-size: 12px
          }

.category img { max-width: 100%;
                height: auto;
                vertical-align: bottom;
          }

.title-label {
    font-size: 22px;
    letter-spacing: 0.8px;
    border-bottom: 1px solid #111111;
    margin-bottom: 24px;
    padding-left: 4px;
    padding-bottom: 4px
          }

/*カテゴリー小*/
.category-s a  {display: block;
            background-color: #ffffff;
            color: #dddddd;
            text-align: center;
            text-decoration: none
          }

.category-s a:hover {opacity: 0.8}

.category-s img { max-width: 100%;
              height: auto;
              vertical-align: bottom}

/*twitter*/
.twitter {padding:5px;
          border: solid 1px #dddddd;
          font-size:10px !important}

.twitter p {margin-top: 0;
            margin-bottom: 5px;
            font-size: 11px;
            color: #666666}

/*instagram*/
.instagram {padding:5px;
            border: solid 1px #dddddd;
            font-size:10px !important}

.instagram p {margin-top: 0;
              margin-bottom: 5px;
              font-size: 11px;
              color: #666666}

/*お知らせ*/
.news {padding: 20px;
       border: solid 5px #dddddd}

.news h1 {margin-top: 0;
          margin-bottom: 5px;
          font-size: 18px;
          color: #666666}

.news ul       {margin: 0;
                padding: 0;
                list-style: none}
                
.news li a     {display: block;
                padding: 5px;
                border-bottom: dotted 2px #dddddd;
                color: #000000;
                font-size: 14px;
                text-decoration: none}

.news li a:hover  {background-color: #eeeeee}

.news time {color: #888888;
            font-weight: bold}

.news a:after {content: "";
               display: block;
               clear: both}

.news time    {float: left;
               width: 60px}

.news .text   {float: none;
               width: auto;
               margin-left: 60px}

/*-----ここまでindex.html-----*/

/*-----toriatsukai.html-----*/

/*店舗情報*/
.shop ul {margin: 0;
          padding: 10px;
          list-style: none;
          border:thin solid #222222
        }

.shop li a {display: block;
            font-size: 14px;
            text-decoration: none
          }

.shop li a:hover {opacity:0.8
}

.shop-b {color: #ffffff;
         background-color: #666666;
         border-radius: 4px;
         border:thin solid
        }

.shop-s {color: #333333;
         background-color: #ffffff
         }

.shop- {background-color: #f65d4a
         }


/*補足説明*/
.shop-info {margin-top: 0;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #dddddd;
            font-size: 14px;
            text-align: center
          }

.shop-info {
	position: relative;
	background: #dddddd
          }

.shop-info:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(221, 221, 221, 0);
	border-top-color: #dddddd;
	border-width: 15px;
	margin-left: -15px
}

/*-----ここまでtoriatsukai.html-----*/

/*-----sidenavi.html-----*/

/*サイドナビメニュー*/
.sidenavi ul {margin: 0;
            padding: 0;
            list-style: none}

.sidenavi li a {display: block;
              margin-bottom: 10px;
              padding: 10px;
              font-size: 14px;
              text-decoration: none}

.sidenavi li a:hover {opacity:0.8}
.sidenavi-b {color: #ffffff;
             background-color: #666666;
             border-radius: 4px;
             border:thin solid}
.sidenavi-s {color: #333333;
             background-color: #ffffff;
             border-bottom:thin solid}
.sidenavi- {background-color: #f65d4a}

.sidenavi i {margin-right: 10px;
           font-size: 24px;
           vertical-align: middle}

/*補足説明*/
.sidenavi-info {margin-top: 0;
              margin-bottom: 20px;
              padding: 10px;
              background-color: #dddddd;
              font-size: 14px;
              text-align: center}

.sidenavi-info {
	position: relative;
	background: #dddddd;
}
.sidenavi-info:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(221, 221, 221, 0);
	border-top-color: #dddddd;
	border-width: 15px;
	margin-left: -15px;
}

/*-----faq.html-----*/

/*FAQメニュー*/
.faq li{
    display: inline-block;
    height: 20px;
    width: 130px;
 }
 
 .faq li a {
  display: inline-block;
  height: 20px;
	width: 130px;
	position: relative;
	margin: 5px 5px 10px 0;
	padding: 0.8em;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
	background: #c50018;
	transition: .4s;
	border-radius: 4px
}

/*-----ここまでfaq.html-----*/

/*-----event.html-----*/

/*eventメニュー*/
.event li{
    display: inline-block;
    height: 20px;
    width: 130px;
 }
 
 .event li a {
  display: inline-block;
  height: 20px;
	width: 130px;
	position: relative;
	margin: 5px 5px 10px 0;
	padding: 0.8em;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
	background: #c50018;
	transition: .4s;
	border-radius: 4px
}

/*-----ここまでevent.html-----*/

/*オンラインショップメニュー*/
.online ul {margin: 0;
            padding: 0;
            list-style: none
          }

.online li a {display: block;
              margin-bottom: 5px;
              padding: 5px;
              border-radius: 4px;
              color: #ffffff;
              font-size: 14px;
              text-decoration: none
            }

.online li a:hover {opacity:0.8
                   }

.online i {margin-right: 10px;
           font-size: 24px;
           vertical-align: middle
          }

/*補足説明*/
.online-info {margin-top: 0;
              margin-bottom: 20px;
              padding: 10px;
              background-color: #dddddd;
              font-size: 14px;
              text-align: center
            }

.online-info {
  position: relative;
	background: #dddddd
}

.online-info:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(221, 221, 221, 0);
	border-top-color: #dddddd;
	border-width: 15px;
	margin-left: -15px
}

/*SNSメニュー*/
.follow ul {margin: 0;
            padding: 0;
            list-style: none
          }

.follow li a {display: block;
              margin-bottom: 10px;
              padding: 10px;
              border-radius: 4px;
              color: #ffffff;
              font-size: 14px;
              text-decoration: none
            }

.follow li a:hover {opacity:0.8}
.follow-tw {background-color: #63bafb}
.follow-fb {background-color: #5288f7}
.follow-ig {background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000)}

.follow-ya {background-color: #FF0040}
.follow-ra {background-color: #FF0000}
.follow-am {background-color: #FF8000}

.follow i {margin-right: 10px;
           font-size: 24px;
           vertical-align: middle
          }

/*補足説明*/
.follow-info {margin-top: 0;
              margin-bottom: 20px;
              padding: 10px;
              background-color: #dddddd;
              font-size: 14px;
              text-align: center
            }

.follow-info {position: relative;
              background: #dddddd
            }

.follow-info:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(221, 221, 221, 0);
	border-top-color: #dddddd;
	border-width: 15px;
	margin-left: -15px
}

/*フッター*/
.box5-inner ul {margin: 0;
                padding: 0;
                list-style: none}

.box5-inner li a {display: block;
                  margin-bottom: 5px;
                  padding: 5px;
                  font-size: 12px;
                  text-decoration: none;
                  color: #333333}

.box5-inner li a:hover {opacity:0.8
                       }

.box5-inner- {background-color: #dddddd
             }

/*コピーライト*/
.copyright p {margin: 0;
              color: #333333;
              font-size: 14px
            }

/*boxをバーの形にする*/
.box5         {padding-top: 15px;
               padding-bottom: 15px;
               background-color: #dddddd
              }

/*ボックスの左右*/
.boxA,.box5,.box6,.box8{
               padding-left: 80px;
               padding-right: 80px
              }

/*ボックスの左右*/
.box9
              {padding-left: 5px;
               padding-right: 5px
              }

/*ボックスの左右*/
.box10
              {padding-left: 5px;
               padding-right: 5px
              }

/*ボックスの上下*/
.boxA    {padding-top: 20px;
          padding-bottom: 10px
         }

.box3    {padding-top: 10px;
          padding-bottom: 0px
         }

.box4    {margin:0;
          padding-top: 10px;
          padding-bottom: 20px
         }

.box4-1  {padding-bottom: 20px
         }

.box4-3  {padding-top: 10px
         }

.box6    {padding-top: 5px
         }

.box6-1, .box6-2, .box6-3, .box6-4, .box6-5, .box6-6
         {padding-bottom: 0px
         }

.box7    {padding-bottom: 5px;
          padding-top: 5px
         }

.box7a    {padding-bottom: 5px;
           padding-top: 5px
          }

.box8    {padding-bottom: 5px;
          padding-top: 10px
         }

.box8-1,.box8-2,.box8-3,.box8-4,.box8-5,.box8-6,.box8-7,.box8-8,.box8-9,.box8-10,.box8-11,.box8-12,.box8-13,.box8-14
         {padding-bottom: 10px
         }

.box9  
         {padding-bottom: 5px;
          padding-top: 5px
         }

.box10  
         {padding-bottom: 5px;
          padding-top: 5px
         }

/* ############ 359px以下 ############## */
@media (max-width: 359px){
/*サイト名*/
.site img   {width: 255px;
             height: auto}
}

/* ############ 599px以下 ############## */
@media (max-width: 599px){

/*ナビゲーション*/
.menu li a {padding: 10px 7px;
            font-size: 11px}

/*キャッチコピー*/
.catch {padding: 5px 10px;
        font-size: 12px}

}
/* ############ 767px以下 ############## */
@media (max-width: 767px){

.fontawesome_submit{
    font-family: FontAwesome;
}

/*キャッチコピー改行*/
.banner  {display: none}

/*キャッチコピー改行*/
.text br {
   display: none;
  }
  
.text { text-align: center; }


/*ナビゲーションメニュー（縦並び）*/
#menu {display: none}

.menu ul  {margin: 0;
           padding: 0;
           list-style:none}

.menu li a {display: block;
            padding: 5px;
            color: #000000;
            font-size: 14px;
            text-decoration: none}

.menu li a:hover{background-color: #eeeeee}

.menu img{ width:65px}

#gaiyou {display: none}

#menu2 {display: none}

/*SP非表示設定*/
#menu3 {display: none}

/*バーガーボタン基本スタイル*/

/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}

nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}

nav .inner ul li .last {
  border-bottom:none;
}

nav .inner li .title {
  position: relative;
  margin: 0;
  color:#FFFFFF;
  background-color:#333;
  border-bottom: 1px solid #333;
}

@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}

/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}

/*バーガーボタンここまで*/

/*バーガーボタンの階層設定ここから*/


#menu {
  height: 0;
  overflow: hidden;
}
.is-menuOpen #menu {
  height: auto;
}

.subNavBtn {
  display: inline-block;
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
.subNavBtn:after {
  content: "▼";
}
.subNavBtn.is-active:after {
  content: "▲";
}

.subNav {
  height: 0;
  overflow: hidden;
  margin: 0;
}
.subNavBtn.is-active + .subNav {
  height: auto;
}

/*バーガーボタン階層ここまで*/

/*inner-box1,inner-box2,inner-box3,inner-box4を4列に並べる設定*/

.inner-box:after {content: "";
                  display: block;
                  clear: both}
.inner-box1  {float: left;
              width: 48.5%;
              margin-right: 1.5px;
             }
.inner-box2  {float: left;
              width: 48.5%;
              margin-right: 1.5px;
              }
              
.inner-box3  {float: left;
              width: 48.5%;
              margin-right: 1.5px;
             }
.inner-box4  {float: left;
              width: 48.5%;
              margin-right: 1.5px;
              }

/*box7-1,box7-2,box7-3を2列に並べる設定*/

.box7:after {content: "";
             display: block;
             clear: both}

.box7-1     {float: left;
             width: 47.9%;
             margin-right: 1.5%;
             margin-bottom:1.5%
            }
.box7-2     {float: left;
             width: 47.9%;
             margin-right: 1.5%;
             margin-bottom:1.5%
            }
.box7-3     {float: left;
             width: 47.9%;
             margin-right: 1.5%;
             margin-bottom:1.5%
            }

.box4-3      {float: left;
             width: 100%}

.box4-3-1    {float: left;
             width: 100%}

.box4-3-2    {float: left;
             width: 100%}

/*box9-1,box9-2,box9-3を横に並べる設定*/
.box9:after {content: "";
            display: block;
            clear: both}
.box9-1     {float: left;
            width: 32.5%;
            margin-right: 1.25%}
.box9-2     {float: left;
            width: 32.5%;
            margin-right: 1.25%}
.box9-3     {float: left;
            width: 32.5%;
            margin-right}
             
/*box10-1,box10-2を横に並べる設定*/
.box10:after {content: "";
             display: block;
             clear: both}
.box10-1     {float: left;
             width: 49%;
             margin-right: 2%}
.box10-2     {float: left;
             width: 49%;
             margin-right: }

.box8-1,.box8-2,.box8-3,.box8-4,.box8-5,.box8-6,.box8-7,.box8-8,.box8-9,.box8-10,.box8-11,.box8-12,.box8-13,.box8-14
           { 
              width: 96%;
              margin:0 auto;
            }

            /*ボックスの左右*/
.boxA,.box4,.box5,.box6,.box7,.box7a,.box8,.box9,.box10
              {padding-left: 2%;
               padding-right: 2%}

}

/* ############ 768px以上 ############## */
@media (min-width: 768px){

/*案内バナー*/
.bannersp  {display: none}

/*バーガーボタン*/
#burger  {display: none}

/*ナビゲーション*/
#menu        {display: block !important}

.menu ul     {margin: 0;
              padding: 0;
              list-style: none}

.menu li a   {display: block;
              padding: 10px 15px;
              color: #000000;
              font-size: 14px;
              text-decoration: none}

.menu li a:hover {background-color: #eeeeee}

.menu ul:after {content: "";
                 display: block;
                 clear: both}

.menu li { float: left;
           width: auto}

.menu img{ width:30px;}

/*box1とbox2を横に並べる設定*/
.boxA:after   {content: "";
               display: block;
               clear: both}

.box1         {float: left;
               width: auto}

.box2         {float: right;
               width: auto}

/*box4-1とbox4-2を横に並べる設定*/
.box4:after {content: "";
             display: block;
             clear: both}
.box4-1     {float: left;
             width: 25%;
             padding-right: 35px;
             -moz-box-sizing: border-box;
             -webkit-box-sizing: border-box;
             box-sizing:border-box }
.box4-2      {float: left;
              width: 75%}

/*box6-1,box6-2,box6-3,box6-4,box6-5を横に並べる設定*/
.box6:after {content: "";
             display: block;
             clear: both}
.box6-1     {float: left;
             width: 15.8%;
             margin-right: 1%}
.box6-2     {float: left;
             width: 15.8%;
             margin-right: 1%}
.box6-3     {float: left;
             width: 15.8%;
             margin-right: 1%}
.box6-4     {float: left;
             width: 15.8%;
             margin-right: 1%}
.box6-5     {float: left;
             width: 15.8%;
             margin-right: 1%}
.box6-6     {float: left;
              width: 16%}

/*box7-1,box7-2,box7-3を横に並べる設定*/
.box7:after {content: "";
             display: block;
             clear: both}
.box7-1     {float: left;
             width: 32.5%;
             margin-right: 1.25%}
.box7-2     {float: left;
             width: 32.5%;
             margin-right: 1.25%}
.box7-3     {float: left;
             width: 32.5%}

/*box7-4,box7-5,box7-6を横に並べる設定*/
.box7a:after {content: "";
             display: block;
             clear: both}
.box7-4     {float: left;
             width: 32.5%;
             margin-right: 1.25%}
.box7-5     {float: left;
             width: 32.5%;
             margin-right: 1.25%}
.box7-6     {float: left;
             width: 32.5%}

/*box4-3-1,box4-3-2を横に並べる設定*/
.box4-3:after {content: "";
             display: block;
             clear: both}
.box4-3-1     {float: left;
             width: 49.5%;
             margin-right: 1%}
.box4-3-2    {float: left;
             width: 49.5%}

/*box5-1,box5-2,bos5-3,box5-4,box5-5を横に並べる設定*/
.box5-inner     {content: "";
             display: block;
             clear: both}
.box5-1     {float: left;
             width: 19.2%;
             margin-right: 1%}
.box5-2     {float: left;
             width: 19.2%;
             margin-right: 1%}
.box5-3     {float: left;
             width: 19.2%;
             margin-right: 1%}
.box5-4     {float: left;
             width: 19.2%;
             margin-right: 1%}
.box5-5    {float: left;
             width: 19.2%}

/*box9-1,box9-2,box9-3を横に並べる設定*/
.box9:after {content: "";
             display: block;
             clear: both}
.box9-1     {float: left;
             width: 32.5%;
             margin-right: 1.25%}
.box9-2     {float: left;
             width: 32.5%;
             margin-right: 1.25%}
.box9-3     {float: left;
             width: 32.5%;
             margin-right:}

/*box10-1,box10-2,を横に並べる設定*/
.box10:after {content: "";
             display: block;
             clear: both}
.box10-1     {float: left;
             width: 49%;
             margin-right: 2%}
.box10-2     {float: left;
             width: 49%;
             margin-right}

}

/* ############ 1190px以上 ############## */
@media (min-width: 1190px){

/*全体の横幅を固定*/
.box3,.box4,.boxA-inner,.box5-inner,.box6
            {width: 1040px;
             margin-left: auto;
             margin-right: auto}

/*BOX A の下に罫線を挿入*/
.boxA {margin-bottom: 20px;
       border-bottom: solid 1px #050d4c}

}