:root {
  --main-text-color: #000000;
  --sub-text-color: rgba(0,0,0,0.16);
  --main-bg-color: #ffffff;
  --sub-bg-color: rgba(0,0,0,0.03); 
  --main-accent-color: #EAB914;
}

body {
  font-family: 'Montserrat', a-otf-futo-go-b101-pr6n, 'Noto Sans JP', Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 16px;
  color: var(--main-text-color);
  background-color: var(--main-bg-color);
  line-height: 1.8 !important;
  font-weight: 500;
  position: relative;
}
li {
  list-style-type: none;
}
img {
  width: 100%;
}
.midashi {
  font-family: a-otf-midashi-go-mb31-pr6n,'Noto Sans JP', Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 600;
}
p {
  -webkit-tap-highlight-color: initial;
  -webkit-user-select: initial;
  -webkit-touch-callout: initial;
}
a, a:hover {
  transition: .5s;
}

.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}
.en_sub {
  font-family: 'Barlow Condensed','Noto Sans JP', Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, sans-serif;
  letter-spacing: 3px;
}
/****************
TOP
****************/
#nav_area {
  position: relative;
  z-index: 2;
}
nav {
  position: fixed;
  left: 0;
  top: 33%;
}
nav ul {
  margin-left: 16px;
}
nav ul li {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--sub-text-color);
  margin-bottom: 24px;
}
nav ul li a:hover {
  color: var(--main-text-color);
}
.current::before {
  content: '';
  width: 24px;
  height: 6px;
  background-color: var(--main-text-color);
  margin-right: 10px;
  display: inline-block;
  margin-bottom: 1px;
}
.current {
  color: var(--main-text-color);
}
header {
  margin: 135px auto;
  text-align: center;
}

header h1 {
  width: 320px;
  margin: 0 auto;
  margin-bottom: 30px;
}

header h2 {
  font-size: 44px;
  line-height: 1.5;
}

/* add_1_start */

header h3 {
  font-size: 24px;
  padding: 0.5em;
}

/* add_1_end */

/****************
back to top
****************/
.down {
  position: fixed;
  right: -44px;
  top: 50%;
  display: flex;
  transform: rotate(90deg);
}
.down .circle_area {
  margin-right: 16px;
}
.down .line {
  width: 56px;
  height: 0.5px;
  background-color: var(--main-text-color);
  margin-top: 14px;
}
.down .circle {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--main-text-color);
  margin-top: -3px;
}
/* 「TopToDown」の動作内容 */
@keyframes TopToDown {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  100% {
    opacity: 1;
    transform: translateX(56px);
  }
}

/* 「TopToDown」を適用する箇所 */
.down .circle {
  animation-duration: 3s;/* アニメーション時間 */
  animation-name: TopToDown;/* アニメーション名 */
  animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}

/****************
back to top
****************/
.backtotop_area {
  display: none;
}
.backtotop {
  position: fixed;
  right: -40px;
  top: 50%;
  display: flex;
  transform: rotate(90deg);
}
.backtotop .circle_area {
  margin-right: 16px;
}
.backtotop .line {
  width: 56px;
  height: 0.5px;
  background-color: var(--main-text-color);
  margin-top: 14px;
}
.backtotop .circle {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--main-text-color);
  margin-top: -3px;
}
/* 「RightToLeft」の動作内容 */
@keyframes DownToTop {
  0% {
    opacity: 0;
    transform: translateX(56px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 「DownToTop」を適用する箇所 */
.circle {
  animation-duration: 3s;/* アニメーション時間 */
  animation-name: DownToTop;/* アニメーション名 */
  animation-iteration-count: infinite;/* アニメーションの繰り返し（無限）*/
}


/****************
共通
****************/
#vision, #service, #company, #contact {
  padding-bottom: 130px !important;

}
#vision h2, #service h2, #company h2, #contact h2 {
  font-size: 40px;
  letter-spacing: 8px;
  margin: 0 auto;
  margin-bottom: 45px;
  padding-top: 100px;
  text-align: center;
}

#vision, #company {
  width: 960px;
  margin: 0 auto;
}

.news_contents, .contact_contents {
  width: 760px;
  margin: 0 auto;
}

/****************
vision
****************/
#vision {
  background-color: var(--main-text-color);
  color: var(--main-bg-color);
  text-align: center;
  padding:0 120px;
  position: relative;
}

.line_top, .line_bottom {
  position: absolute;
  left: 47%;
  width: 40px;
  height: 16px;
  background-color: var(--main-accent-color);
}
.line_top {
  top: 0;
}
.line_bottom {
  bottom: 0;
}

/****************
service
****************/
#service {
  margin: 0 auto;
  text-align: center;
}
.service_logo {
  background-image: url("../images/frame_top.svg"), url("../images/frame_bottom.svg");
  background-position: top left, bottom right;
  padding: 80px 120px;
  width: 720px;
  margin: 0 auto;
  margin-bottom: 56px;
}
#service h3 {
  font-size: 24px;
  margin-bottom: 16px;
}
#service p {
  margin-bottom: 70px;
}

#service a {
  display: block;
  margin: 0 auto;
  background-color: var(--main-text-color);
  width: 300px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  color: var(--main-bg-color);
}
/****************
 news
****************/
#news {
  height: 540px;
  background-color: var(--sub-bg-color);
}
.news_contents {
  height: 100%;;
  position: relative;
  display: flex;
  align-items: center;  
}
.news_contents h2 {
  height: 0px;
  width: 0px;
  position: absolute;
  top: 80px;
  right: 0;
  font-size: 110px;
  line-height: 110px;
  letter-spacing: 10px;
  transform: rotate(90deg);
}
.news_contents .news_list {
  width: 87%;
}

.news_contents dl {
  padding-right: 40px;
}
.news_contents dl dt {
  background-color: var(--main-text-color);
  color:  var(--main-bg-color);
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  padding: 6px 18px;
  display: inline-block;
  margin-bottom: 10px;
}
.news_contents dl dd {
  margin-bottom: 24px;
}
.news_contents dl dd:last-child {
  margin-bottom: 0;
}
/****************
company
****************/
.company_contents {
  display: flex;
}
.company_contents dl {
  width: 58%;
  /* padding-left: 40px; */
  display: flex;
  flex-wrap: wrap;
}
.company_contents dt {
  font-weight: 600;
  width: 20%;
}
.company_contents dd {
  width: 80%;
}
.map_area{
  width: 402px;
  /* height: 402px; */
  background-image: url("../images/map_bg.svg"), url("../images/map_bg.svg");
  background-position: top right, bottom left;
  background-size: 160px 160px;
  padding: 16px;
}
.map {
  height: 0;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
}
.map iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.map iframe:hover {
  transition: filter 0.8s ease;
  -webkit-filter: grayscale(0) saturate(2);
  filter: grayscale(0) saturate(2);
}

/****************
contact
****************/
#contact {
  background-color: var(--sub-bg-color);
}
.form_list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.lavel_area {
  width: 30%;
  text-align: right;
  padding-right: 24px;
  padding-top: 14px;
}
.input_area {
  width: 70%;
}
/****************
footer
****************/
footer {
  background-color: var(--main-text-color);
  padding: 30px 0;
  font-size: 14px;
  text-align: center;
  color: var(--main-bg-color);
  letter-spacing: 3px;
}
/********************************
ナビゲーション非表示
********************************/
@media only screen and (max-width: 960px) {
  #nav_area {
    display: none;
  }
/****************
共通
****************/
#vision, #company {
  width: 100%;
}
#vision, #service, #company, #contact {
  padding: 0 5% 130px;
}

.news_contents, .contact_contents {
  width: 90%;
}

}
/********************************
タブレット対応
********************************/
@media only screen and (max-width: 768px) {
/****************
vision
****************/
#vision {
  padding:0 10%;
}
/****************
service
****************/
.service_logo {
  padding: 30px 15%;
  width: 80%;
}
/****************
 news
****************/
#news {
  height: auto;
}
.news_contents {
  display: flex;
  flex-direction: column;
}
.news_contents h2 {
  height: auto;
  width: auto;
  position: relative;
  top: auto;
  right: auto;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 8px;
  transform: rotate(0deg);
  margin: 0 auto;
  margin-bottom: 45px;
  padding-top: 100px;
  text-align: center;
}
.news_contents .news_list {
  width: 100%;
  margin-bottom: 120px;
}

.news_contents dl {
  padding-right: 0px;
}
/****************
company
****************/
.company_contents {
  display: flex;
  flex-direction: column;
}
.company_contents dl {
  width: 80%;
  padding-left: 0px;
  margin: 0 auto;
  margin-bottom: 56px;
}
.company_contents dl dt, .company_contents dl dd{
  margin-bottom: 24px;
}
.map_area{
  width: 70%;
  height: 70%;
  margin: 0 auto;
}
/****************
contact
****************/
.form_list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 auto;
  width: 80%;
}
.lavel_area {
  width: 100%;
  text-align: left;
  padding-right: 0;
  padding-bottom: 8px;
}
.input_area {
  width: 100%;
  margin-bottom: 40px;
}

}
/********************************
SP対応
********************************/
@media only screen and (max-width: 375px) {
/****************
TOP
****************/
header {
  width: 90%;
}
header h1 {
  width: 60%;
}

header h2 {
  font-size: 28px;
}
/****************
共通
****************/
.news_contents, .contact_contents {
  width: 90%;
}
#vision h2, #service h2, #company h2, #contact h2, .news_contents h2 {
  font-size: 32px;
  padding-top: 80px;
  margin-bottom: 32px;
}
/****************
service
****************/
.service_logo {
    background-size: 30px;
    width: 100%;
    padding: 30px 40px;
    margin-bottom: 32px;
}
#service h3 {
  font-size: 24px;
}
/****************
company
****************/  
.company_contents dl, .map_area {
  width: 100%;
}
/****************
contact
****************/
.form_list {
  width: 100%;
}
.input_area {
  margin-bottom: 24px;
}
/****************
footer
****************/
footer {
  padding: 20px 0;
  font-size: 10px;
  letter-spacing: 2px;
}


}