@charset "utf-8";
*{margin:0; padding:0;}
/*-- clearfix setting 
------------------------------------*/
.clearfix:after {content: " "; display: block; height: 0; clear:both; line-height: 0; visibility: hidden;}

html {
  -webkit-text-size-adjust: 100%;
}
body {
  color: #666;
  margin: 0;
}

/*---共通指定-------------------------------*/
main {
  padding: 1em;
}
h2.subtittle {
  margin-top: 2em;
  text-align: center;
  font-size: 48px;
  color: #3574dd;
}
/*br1は768px以下で改行
br2は481px以下で改行*/
.br1, .br2 {
  display: none;
}
/*---ヘッダー--------------------------------*/
header {
  box-sizing: border-box;
  width: 100%;
}
.top {
  padding: 1em;
  background: #b9ddec;
  font-size: 16px;
}
div.topbox {
  margin-left: auto;
  margin-right: auto;
}
header h2 {
  margin: 0.3em 0;
  font-size: 40px;
}
.top:after {
  content: "";
  display: block;
  clear: both;
}
div.top p.topcoment {
  margin-bottom: 0;
}
div.top .top_left, div.top .top_right {
  text-align: left;
  box-sizing: border-box;
}

/*--- headercontent setting ---*/
div.headercontent h1{font-size:16px; font-size:1rem; font-weight:normal;}
div.headercontent h1 strong{display:block; font-size:2em;}

/*--- topaddress setting ---*/
dl.topaddress{}
dl.topaddress dt , 
dl.topaddress dd{float:left;}
dl.topaddress dt{clear:left; width:3em;}
dl.topaddress dd{clear:right; width:calc(100% - 3em);}


/*---四角枠エリア---------------*/
div#maincontent {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
div#maincontent article.announce {
  padding:1em;
  margin-top: 3em;
  text-align: center;
  border: solid #666 2px;
  display: block;
}
div#maincontent article.announce h1.companyname {
  font-size: 48px;
}
div#maincontent article.announce h2.news {
  color: #ff2424;
  font-size: 48px;
}
div#maincontent article.announce p {
  font-size: 32px;
}
/*---丸二刺繍について---------------*/
div.boxleft h2 {
  font-size: 32px;
}
.boxright img {
  padding-left: 1em;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
div.map iframe {
  width: 100%;
}
/*---アクセスマップエリア----------*/
div.contact {
  padding-left: 1em;
}

/*--- accessinfo setting ---*/
dl.accessinfo{}
dl.accessinfo dt , 
dl.accessinfo dd{float:left;}
dl.accessinfo dt{clear:left; width:6em;}
dl.accessinfo dd{clear:right; width:calc(100% - 6em);}

/*--copylight--------*/
div.copylight {
  text-align: center;
  margin-top: 2em;
  padding: 2em;
  background-color: #b9ddec;
}
/*＝＝＝＝ここからメディアクエリ＝＝＝＝＝＝＝＝＝＝＝*/
/* 320px-480px(mobile)*/
@media screen and (max-width:480px) {
  /*改行させる*/
  .br1, br2 {
    display: block;
  }
  /*---h2共通指定-------------------------------*/
  h2.subtittle {
    font-size: 35px;
  }
  /*---ヘッダー--------------------------------*/
  header h2 {
    font-size: 23px;
  }
  /*---四角枠エリア---------------*/
  div#maincontent article.announce {
    margin-top: 1em;
  }
  div#maincontent article.announce h1.companyname {
    font-size: 30px;
  }
  div#maincontent article.announce h2.news {
    font-size: 25px;
  }
  div#maincontent article.announce p {
    font-size: 16px;
  }
  /*---丸二刺繍について---------------*/
  h2.subtittle {
    margin-top: 1em;
  }
  div.boxleft h2 {
    font-size: 20px;
  }
  .boxright img {
    padding: 0;
    box-sizing: border-box;
  }
  /*---アクセスマップエリア----------*/
  div.contact {
    padding: 0 0.5em;
  }
  /*--copylight--------*/
  div.copylight {
    margin-top: 0.5em;
  }
}
/* 481px-767px(mobile/tabletsite) */
@media screen and (min-width:481px) and (max-width:767px) {
  /*--改行させる(共通指定----）*/
  .br1 {
    display: block;
  }
  /*---h2共通指定-------------------------------*/
  h2.subtittle {
    font-size: 40px;
  }
  /*---ヘッダー--------------------------------*/
  header h2 {
    font-size: 30px;
  }
  /*---四角枠エリア---------------*/
  div#maincontent article.announce h1.companyname {
    font-size: 40px;
  }
  div#maincontent article.announce h2.news {
    font-size: 36px;
  }
  div#maincontent article.announce p {
    font-size: 20px;
  }
  /*---丸二刺繍について---------------*/
  div.boxleft h2 {
    font-size: 24px;
  }
  .boxright img {
    width: 50%;
    height: 50%;
  }
}
/* 768px-1023px(tabletsite) */
@media screen and (min-width:768px) and (max-width:1023px) {
  /*---ヘッダー--------------------------------*/
  header h2 {
    font-size: 30px;
  }
  /*---四角枠エリア---------------*/
  div#maincontent article.announce h2.news {
    font-size: 36px;
  }
  div#maincontent article.announce p {
    font-size: 28px;
  }
}
/* 768px-over */
@media screen and (min-width:768px) {
  /*---ヘッダー--------------------------------*/
  div.top .top_left, div.top .top_right {
    float: left;
  }
  div.top .top_right {
    width: 35%;
    padding-left: 1em;
  }
  div.top .top_left {
    width: 65%;
  }
  /*---丸二刺繍について---------------*/
  div.boxleft {
    width: 55%;
    float: left;
    box-sizing: border-box;
  }
  div.boxright {
    padding: 2em;
    width: 45%;
    float: right;
    box-sizing: border-box;
  }
  section.overview:after {
    content: "";
    display: block;
    clear: both;
  }
}
/* 1024px-over */
@media screen and (min-width: 1024px) {
  /*---ヘッダー--------------------------------*/
  .center {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
  div.topbox {
    width: 1000px;
  }
  /*---四角枠エリア---------------*/
  div#maincontent {
    width: 1000px;
  }
  /*---アクセスマップエリア----------*/
  div.map {
    width: 62%;
    padding-top: 1.5em;
    float: left;
  }
  div.contact {
    padding-left: 1.5em;
  }
  div.contact {
    width: 38%;
    box-sizing: border-box;
    float: right;
  }
  div.accessbox:after {
    content: "";
    display: block;
    clear: both;
  }
}