/*共通設定*/

body {
  font-family: 'Noto Sans JP', sans-serif;
}


.container {
  /*左右に余白を作るために表示幅を90％*/
  width: 90%;
  max-width: 1120px;
  /*中央揃えにする*/
  margin: 0 auto;
}

.flex {
  /*横並びにする*/
  display: flex;
  /*間にスペースを空けて右端・左端に*/
  justify-content: space-between;
  /*横並びにならないくらいの幅になったら改行*/
  flex-wrap: wrap;
  /*上下中央揃えにする*/
  align-items: center;
}

/*リンクに下線*/
.link{
  text-decoration: underline;
}

/*ヘッダー*/
header {
  /*ヘッダーの上下にスペース*/
  padding: 27px 0;
}
.header_menu li {
  /*メニューの項目の間隔*/
  margin-left: 40px;
}

/*マウスカーソルあてた時*/
.header_menu li a {
  transition: .3s;
}
.header_menu li a:hover {
  color: #80BA4A;
  /*ふわっと変わる*/
  transition: .3s;
}

.logo{
  /*ロゴサイズ指定*/
  width: 300px;
}

/*768px以下の場合*/
@media only screen and (max-width: 768px) {
  header .container{
    /*ロゴが左寄りなのを中央に*/
    justify-content: center;
  }

  .header_menu li{
    /*メニューの上下左右の余白を調整*/
    margin: 20px 16px 0;
  }  
}




/*メイン*/
#hero{
  /*背景画像設定*/
  background-image: url(img/parts_bg2.png);
  /*上下中央に画像をそろえる*/
  background-position: center;
  /*画像を全体に表示*/
  background-size: cover;
  /*高さ*/
  height: 540px;
  /*画像の角を丸める*/
  border-radius: 30px;
  /*上下中央に寄せる*/
  display: flex;
  align-items: center;
  /*画像の下にスペース*/
  margin-bottom: 90px;
}

/*メインビジュアルのボタン*/
.hero_button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    margin: 0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    background-color: #ffa500;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.hero_button:hover {
    background-color: #ef9500;
}

.hero_button::after {
    width: 1.25em;
    height: 1.25em;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12.0606 11.6829L5.64722 6.2377L4.35278 7.7623L12.0731 14.3171L19.6544 7.75616L18.3456 6.24384L12.0606 11.6829Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    content: '';
}

.hero_inner{
  color: white;
  width: 100%;
  text-align: center;
  padding-left: 650px;
}

.hero_inner p {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}

.hero_inner h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}

/*1024px以下の場合*/
@media (max-width: 1024px) {

  .hero_inner{
  padding-left: 380px;
 }

 .hero_inner p {
  font-size: 18px;
}

.hero_inner h1 {
  font-size: 24px;
}

 #hero{
  /*背景画像設定*/
  background-image: url(img/parts_bg2\ -tab.png);
  /*上下中央に画像をそろえる*/
  background-position: center;
  /*画像を全体に表示*/
  background-size: cover;
  /*高さ*/
  height: 540px;
  /*画像の角を丸める*/
  border-radius: 30px;
  /*上下中央に寄せる*/
  display: flex;
  align-items: center;
}

}



/*768px以下の場合*/
@media only screen and (max-width: 767px) {
  #hero{
    background-image: url(img/parts_sp_tbg1.png);
    /*画像の高さ調整*/
    height: 460px;
    opacity: 5;
  }

  /*黒背景*/
  .darkbox{
  position: absolute;
  height:460px;
  width: 90%;
  background: rgba(0, 0, 0, 0.5);
  /*上下中央に画像をそろえる*/
  background-position: center;
  /*画像を全体に表示*/
  background-size: cover;
  /*画像の角を丸める*/
  border-radius: 30px;
  /*上下中央に寄せる*/
  display: flex;
  align-items: center;
  }

  .hero_inner{
  width: 100%;
  /*文字中央ぞろえ*/
  text-align: center;
  /*右寄せ解除*/
  padding-left: 0;
}

  .hero_inner p {
  font-size: 18px;
}

.hero_inner h1 {
  font-size: 24px;
}
}



/*アバウト*/

.about{
  margin-bottom: 120px;
}

.about h3 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
}

.column-2 {
  width: 48%;
}

.text {
  /*テキストの行間*/
  line-height: 2;
}


/*768px以下の場合*/
@media only screen and (max-width: 768px) {

  .about h3{
    /*文字と間隔を修正*/
    font-size: 24px;
    line-height: 1.5;
  }

  .column-2{
    /*横並びを解除*/
    width: 100%;
  }

  .text{
    /*文字と間隔を修正*/
    font-size: 15px;
    line-height: 1.7;
  }

  .about-img {
    /*画像の上に余白*/
    margin-top: 30px;
  }
}











/*コンセプト*/

#concept{
  margin-bottom: 120px;
}

.title{
  font-size: 20px;
  font-weight: 500;
  color: #80BA4A;
  margin-bottom: 40px;
}

#concept h3 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
}

.column-2 {
  width: 48%;
}

.text {
  /*テキストの行間*/
  line-height: 2;
}

/*768px以下の場合*/
@media only screen and (max-width: 768px) {

  #concept h3{
    /*文字と間隔を修正*/
    font-size: 24px;
    line-height: 1.5;
  }
  .column-2{
    /*横並びを解除*/
    width: 100%;
  }

  .text{
    /*文字と間隔を修正*/
    font-size: 15px;
    line-height: 1.7;
  }

  .concept-img {
    /*画像の上に余白*/
    margin-top: 30px;
  }
}











/*サービス*/

#service{
  margin-bottom: 120px;
}

.space-down {
  margin-bottom: 40px;
}

.space-up {
  margin-top: 40px;
}
.border{
  width: 80%;
  border: solid #0e294e 1px;
  padding: 30px 10px;
  margin: 0 auto;
}

#service h3 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
}

#service h4 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}

.border p {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 16px;
}

/*矢印*/
.arrow {
  display: inline-block;
  width: 63.6px;
  height: 55px;
  background: #0e294e;
  clip-path: polygon(0 42.1%, 30.4% 42.1%, 30.4% 0, 69.6% 0, 69.6% 42.1%, 100% 42.1%, 50% 100%);
  /*以下中央揃えにする指定*/
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 16px;
}

.time{
  margin-top: 40px;
}


/*吹き出し*/
.balloon {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 300px;
    margin-right: 15px;
    padding: .8em 1.2em;
    border: 3px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #333333;
}

.balloon::before,
.balloon::after {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

.balloon::before {
    background-color: #2589d0;
}

.balloon::after {
    right: -11px;
    background-color: #fff;
}

.left-column{
  padding-left: 200px;
}



/*768px以下の場合*/
@media only screen and (max-width: 768px) {

  #service h3{
    /*文字と間隔を修正*/
    font-size: 24px;
    line-height: 1.5;
  }

  #service h4{
    /*文字と間隔を修正*/
    font-size: 20px;
    line-height: 1.5;
  }
  .border p {
    /*文字と間隔を修正*/
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
 }

 .left-column{
  padding-left: 0;
}

  .column-2{
    /*横並びを解除*/
    width: 100%;
  }

  .dr-img{
    margin-top: 40px;
    text-align: center;
  }

  .balloon{
    margin-left: 10px;
  }
}


/*Crasikaについて*/

.crasika{
  margin-top: 120px;
  margin-bottom: 120px;
}

.crasika{ 
  text-align: center;
}

/*768px以下の場合*/
@media only screen and (max-width: 1200px) {

  .crasika-img
  {
    width: 90%;
  }
}







 /*問い合わせ*/

 #contact h3{
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
 }
  
  .Form-Item-category{
		  border: 1px solid #ddd;
		  border-radius: 6px;
		  padding-left: 1em;
		  padding-right: 1em;
		  flex: 1;
		  width: 100%;
		  background: #eaedf2;
		  font-size: 18px;
  
	  
	   background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.4) 50%),  linear-gradient(135deg, rgba(0,0,0,0.4) 50%, transparent 50%);
	   background-size: 5px 5px, 5px 5px;
	   background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
	   background-repeat: no-repeat;
  }
  
  .Form-Btn {
	  border-radius: 6px;
	  margin-top: 32px;
	  margin-left: auto;
	  margin-right: auto;
	  padding-top: 20px;
	  padding-bottom: 20px;
	  width: 280px;
	  display: block;
	  letter-spacing: 0.05em;
	  background: #ff8c00;
	  color: #fff;
	  font-weight: bold;
	  font-size: 20px;
	text-align: center;
	}
	@media screen and (max-width: 480px) {
	  .Form-Btn {
		margin-top: 24px;
		padding-top: 8px;
		padding-bottom: 8px;
		width: 160px;
		font-size: 16px;
	  }
	}

  /*以下PHPの問い合わせ*/

  #formWrap {
	/*width:700px;*/
	margin:0 auto;
	line-height:120%;
	font-size:90%;
}

table.formTable{
	width:80%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:50%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}


.formbtn{
	margin-top: 30px;
	margin-bottom: 50px;
}


.contactbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    margin:0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.contactbtn::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.contactbtn:hover {
    background-color: #1579c0;
}


/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
form input[type="text"], form textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}


@media only screen and (max-width: 768px) {

  #contact h3{
    /*文字と間隔を修正*/
    font-size: 24px;
    line-height: 1.5;
  }

}



/*フッター*/


footer {
  font-family: sans-serif;
}


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

footer a {
  color: #999;
  text-decoration: none;
}

footer a:hover {
  color: #000;
}

.footer-flex {
  display: flex;
}

footer hr {
  height: 1px;
  border: 0;
  border-top: 1px solid #e5e7eb;
}

.footer {
  padding: 2rem;
  font-size: 15px;
  color: #999;
  background: #fff;
}

.footer__navi {
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.footer__navi li {
  display: inline-block;
}

.footer__navi li:not(:last-child) {
  margin-right: 16px;
}

.footer__logo {
  display: inline-block;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .md-flex {
    display: flex;
  }

  .md-justify-between {
    justify-content: space-between;
  }

  .copyright {
    text-align: left;
  }
}