@charset "UTF-8";

html{
  font-size: 62.5%;
}
body{
  margin: 0;
  padding: 0;
  color: #333333;
  font-size: 1.4rem;
  font-family: sans-serif;
}
.hidden{
  visibility: hidden;
}
img{
  width: 100%;
  vertical-align: bottom;
}
.siteDescriptionInner,
.headerInner,
nav ul,
.mainVisual,
main,
.footerInner{
  max-width: 960px;
  margin: 0 auto;
}
header{
  height: auto;
}
.siteDescription{
  background-color: #f5f5f5;
  line-height: 2em;
}
.siteDescriptionInner{
  padding-right: 10px;
  box-sizing: border-box;
  color: #666666;
  text-align: right;
}
.headerInner{
  display: flex;
}
.headerLeft,
.headerRight{
  width: 50%;
  padding: 15px 0;
}
.headerLeft{
  padding-left: 10px;
  align-items: center;
  /* imgタグの width: 100%; を回避 */
  display: flex;
}
.headerRight{
  padding-right: 10px;
  text-align: right;
}
.telNumber{
  font-size: 3rem;
  font-weight: bold;
}
nav{
  height: auto;
  background-color: #f8f8f8;
  border-bottom: solid 5px #1884ef;
}
nav ul{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.slicknav_menu{
  display: none;
}
nav ul li{
  width: 16.6666%;
  list-style-type: none;
}
nav ul li a{
  text-align: center;
  text-decoration: none;
  color: #333333;
  line-height: 4em;
  display: block;
}
nav ul li a:hover,
nav ul li a.current{
  background-color: #1884ef;
  color: #ffffff;
}
.mainVisual{
  position: relative;
  margin-bottom: 20px;
}
h1{
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 3rem;
  font-weight: normal;
  top: 20%;
  position: absolute;
}
main{
  height: auto;
  display: flex;
}
.content{
  width: 73%;
  margin-right: 2%;
}
section{
  margin-bottom: 20px;
}
.heading{
  margin-bottom: 20px;
  padding-left: 10px;
  border-bottom: solid 1px #1884ef;
  border-left: solid 5px #1884ef;
  box-sizing: border-box;
}
h2{
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.5em;
}
.topProductInner{
  display: flex;
  flex-wrap: wrap;
}
.topProductImage{
  width: 49%;
  margin: 0 2% 15px 0;
  position: relative;
}
.topProductImage:nth-child(2n){
  margin-right: 0;
}
.topProductImage:nth-last-child(-n+2){
  margin-bottom: 0;
}
.topProductImage a{
  text-decoration: none;
}
.topProductImage a:hover{
  opacity: 0.6;
}
.topProductText{
  width: 100%;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 1.6rem;
  line-height: 3em;
  bottom: 0;
  color: #ffffff;
  position: absolute;
}
.news .heading{
  margin-bottom: 0;
}
.news ul{
  margin: 0 0 20px 0;
  padding: 0;
}
.news ul li{
  padding: 15px 0;
  border-bottom: dotted 1px #cccccc;
  list-style-type: none;
  display: flex;
}
.news ul li .newsDate{
  width: 20%;
  padding-left: 2%;
  box-sizing: border-box;
}
.news ul li .newsTitle{
  width: 80%;
  padding-right: 2%;
  box-sizing: border-box;
}
.news ul li .newsTitle a{
  color: #1884ef;
}
.news ul li .newsTitle a:hover{
  text-decoration: none;
}
.newsListButton,
.contactButton{
  width: 40%;
  margin: 0 auto;
  line-height: 3em;
  text-align: center;
  text-decoration: none;
  background-color: #ffffff;
  color: #1884ef;
  border: solid 1px #1884ef;
  box-sizing: border-box;
  display: block;
}
.newsListButton:hover{
  background-color: #1884ef;
  color: #ffffff;
}
.sidebar{
  width: 25%;
}
.banner{
  margin-bottom: 20px;
}
.banner:last-child{
  margin-bottom: 0;
}
.banner a:hover{
  opacity: 0.6;
}
footer{
  padding: 50px 0;
  background-color: #f5f5f5;
}
.footerNav{
  margin-bottom: 40px;
}
.footerNav ul{
  margin: 0 auto;
  padding: 0;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.footerNav ul li{
  width: 12.5%;
  text-align: center;
  border-right: solid 1px #cccccc;
  box-sizing: border-box;
  list-style-type: none;
}
.footerNav ul li:last-child{
  border-right: 0;
}
.footerNav ul li a{
  font-size: 1.2rem;
  color: #666666;
}
.footerNav ul li a:hover{
  text-decoration: none;
}
.copyright{
  text-align: center;
  color: #666666;
  display: block;
}

/* ----------- 下層ページ --------- */

.textWhite{
  color: #ffffff;
}
.establishmentInner,
.csrInner,
.pcInner,
.tabletInner,
.spInner,
.peripheralInner{
  display: flex;
}
.csrInner,
.tabletInner,
.peripheralInner{
  flex-direction: row-reverse;
}
.establishmentImage,
.csrImage,
.pcImage,
.tabletImage,
.spImage,
.peripheralImage{
  width: 35%;
}
.establishmentText,
.csrText,
.pcText,
.tabletText,
.spText,
.peripheralText{
  width: 65%;
  /* 均等割り付け */
  text-align: justify;
  /* 均等割り付け（IE 対応） */
  text-justify: inter-ideograph;
}
.establishmentText p,
pcText p,
.spText p{
  margin: 0 0 20px 0;
  padding: 0 2% 0 4%;
}
.csrText p,
.tabletText p,
.peripheralText p{
  margin: 0 0 20px 0;
  padding: 0 4% 0 2%;
}
.establishmentText p:last-child,
.csrText p:last-child,
.pcText p:last-child,
.tabletText p:last-child,
.spText p:last-child,
.peripheralText p:last-child{
  margin: 0;
}
table{
  width: 100%;
  border-collapse: collapse;
}
th,
td{
  margin: 0;
  padding: 15px;
  box-sizing: border-box;
  text-align: left;
  border: solid 1px #cccccc;
}
.tableTitle{
  width: 25%;
  background-color: #f8f8f8;
}
.tableContent{
  width: 75%;
}
.faqInner dl{
  margin: 0;
  padding-left: 2%;
  text-align: justify;
  text-justify: inter-ideograph;
}
.faqInner dl dt{
  margin: 0 2% 10px 2em;
  text-indent: -2em;
}
.faqInner dl dt::first-letter{
  color: #ff2626;
  font-weight: bold;
}
.faqInner dl dd{
  margin: 0 2% 20px 4em;
  text-indent: -2em;
}
.faqInner dl dd::first-letter{
  color: #1884ef;
  font-weight: bold;
}
.contactButton:hover{
  background-color: #1884ef;
  color: #ffffff;
}
.attentionInner ul{
  margin: 0;
  padding: 0;
  text-align: justify;
  text-justify: inter-ideograph;
}
.attentionInner ul li{
  margin: 0 2% 10px 6%;
  list-style: disc;
}
.attentionInner ul li:last-child{
  margin-bottom: 0;
}
input{
  line-height: 1.5em;
}
input,
textarea{
  width: 100%;
  box-sizing: border-box;
  border: solid 1px #cccccc;
}
textarea{
  /* テキストエリアの拡⼤・縮⼩を禁⽌する */
  resize: none;
  /* textarea の謎の下余⽩を消す */
  display: block;
}
:focus{
  /* フォーム⼊⼒時の⻘枠を消す */
  outline: none;
}
input[type="submit"]{
  /*
  iOS にデザインを反映させるため
  iOS の CSS をリセット（下記 2 ⾏）
  */
  -webkit-appearance: none;
  border-radius: 0;
}
.submitButtonBox{
  margin-top: 20px;
  text-align: center;
}
.submitButton{
  width: 40%;
  font-size: 1.4rem;
  line-height: 3em;
  background-color: #ffffff;
  color: #1884ef;
  border: solid 1px #1884ef;
}
.submitButton:hover{
  background-color: #1884ef;
  color: #ffffff;
}
.postInner{
  padding: 0 2%;
}
.postDate{
  text-align: right;
}
h3{
  margin: 20px 0 0 0;
  padding-bottom: 20px;
  border-bottom: dotted 1px #cccccc;
  font-size: 1.8rem;
}
.postContent{
  padding-top: 20px;
}
.postContent p{
  margin: 0 0 20px 0;
}

/* --- ウィンドウ幅が 959px 以下の時 --- */
@media (max-width:959px) {
  main{
    padding: 0 2%;
  }
}
/* --- ウィンドウ幅が 767px 以下の時 --- */
@media (max-width:767px) {
  .siteDescriptionInner{
    text-align: center;
    padding-right: 0;
  }
  .headerLeft{
    width: 100%;
    padding-left: 0;
    justify-content: center;
  }
  .headerRight{
    display: none;
  }
  nav ul li{
    width: 33.3333%;
  }
  main{
    display: block;
  }
  .content{
    width: 100%;
  }
  .sidebar{
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
  }
  .banner{
    width: 33.3333%;
    margin-bottom: 0;
    text-align: center;
  }
  .banner img{
    width: 90%;
  }
  .footerNav ul{
    width: 75%;
  }
  .footerNav ul li{
    width: 33.3333%;
    margin-bottom: 10px;
  }
  .footerNav ul li:nth-child(3n){
    border-right: 0;
  }
}
/* --- ウィンドウ幅が 599px 以下の時 --- */
@media (max-width:599px) {
  .siteDescription{
    background-color: #ffffff;
  }
  .headerLeft{
    padding-top: 5px;
  }
  nav ul{
    display: none;
  }
  .slicknav_menu{
    display: block;
  }
  h1{
    font-size: 2rem;
    font-weight: bold;
  }
  .topProductText{
    font-size: 1.4rem;
  }
  .news ul li{
    display: block;
  }
  .news ul li .newsDate{
    width: 100%;
    margin-bottom: 5px;
    display: block;
  }
  .news ul li .newsTitle{
    width: 100%;
    padding-left: 2%;
    box-sizing: border-box;
    display: block;
  }
  .banner{
    width: 50%;
  }
  /* ウィンドウ幅が 599px 以下の時の下層ページ */
  .establishmentInner,
  .csrInner,
  .pcInner,
  .tabletInner,
  .spInner,
  .peripheralInner{
    display: block;
    padding: 0 2%;
  }
  .establishmentImage,
  .csrImage,
  .pcImage,
  .tabletImage,
  .spImage,
  .peripheralImage{
    width: 50%;
    margin: 0 auto 20px;
  }
  .establishmentText,
  .csrText,
  .pcText,
  .tabletText,
  .spText,
  .peripheralText{
    width: 100%;
  }
  .establishmentText p,
  .csrText p,
  .pcText p,
  .tabletText p,
  .spText p,
  .peripheralText p{
    margin: 0 0 20px 0;
    padding: 0;
  }
  table{
    border-bottom: solid 1px #cccccc;
  }
  th,
  td{
    width: 100%;
    display: block;
    border-bottom: none; 
  }
  .tableTitle,
  .tableContent{
    width: 100%;
 }
}