@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@300;400;500;700;800;900&family=Noto+Sans+JP:wght@100&display=swap');


body{
  font-size: .16rem;
}

.mincho{
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.sp-only{
  display: none;
}

.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0px);
  transition: opacity 1s,visibility 1s, transform 1s;
}

.inview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


/* ヘッダー下イメージ画像 */
.page-header{
  width: 2000px;
  max-width: 100%;
  height: 470px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-header img{
  width: 275px;
}

/* <main> */

.w1200-main{
  width: 100%;
  max-width: 1240px;
  margin: 20px auto 30px auto;
  padding: 0 20px;
}

/* パンくずリスト */

.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:active
{
  color: #000;
}

/* ----------
見出し
---------- */

/* 上下にボーダーがある　緑 */
.midashi-1{
  margin: 100px 0 60px;
  padding:8px;
  border-top: 1px solid #323232;
  border-bottom: 1px solid #323232;
  text-align: center;
  color: #005D33;
  font-size: .22rem;
  font-weight: bold;
}

/* 上下にボーダーがある　青 */
.midashi-1-2{
  color: #007ca1;
}

/* 上下にボーダーがある　薄い緑 */
.midashi-1-3{
  margin-bottom: 40px;
  color : #61b071;
}

/* 上下にボーダーがある　オレンジ */
.midashi-1-4{
  margin-bottom: 40px;
  color : #ff5840;
}


/* ----------
ボタン
---------- */

/* TOPページに出てくる*/
.button-1-green{
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 8px 10px;
  background: #004f27;
  font-size: .16rem;
  font-weight: 400;
  color: #FFF;
  line-height: 1;
}
.button-1-green:after {
  content: "";
  display: block;
  background: url(../images/common/link-arrow-white.svg) ;
  width:9px;
  height:16px;  
}

.button-1-white{
  display: flex;
  justify-content: space-between;
  max-width: 226px;
  margin: 0 auto;
  padding: 8px 10px;
  justify-content: center;
  position: relative;
  background: #fff;
  font-size: .16rem;
  font-weight: 400;
  color: #000;
  line-height: 1;
}
.button-1-white:after {
  content: "";
  display: block;
  position: absolute;
  right: 10px;
  background: url(../images/common/link-arrow-black.svg) ;
  width:9px;
  height:16px;  
}

.button-1-orange{
  background: #ed8244;
}

.button-1-lightgreen{
  background: #1d7638;
}

.button-1-lightgreen2{
  background: #06903b;
}

.button-1-orange2{
  background: #ff5840;
}

/* 右側に灰色の矢印があるリンクボタン */

.button-2-gray{
  display: inline-block;
  border: 1px solid #323232;
  margin: 10px auto 0;
  padding: 5px 10px;
}

a .button-2-gray,
a:link .button-2-gray,
a:visited .button-2-gray,
a:hover .button-2-gray,
a:active .button-2-gray,
.button-2-gray,
.button-2-gray,
.button-2-gray,
.button-2-gray,
.button-2-gray
{
  color: #000;
}

.button-2-gray .arrow{
	display: inline-block;
	vertical-align: middle;
	margin-left: 15px;
	width: 20px;
	height: 1px;
	background-color: #323232;
	position: relative;
}
.button-2-gray .arrow:before,
.button-2-gray .arrow:after{
	content: "";
	display: block;
	width: 14px;
	height: 1px;
	background-color: #323232;
	position: absolute;
	right: -4px;
}
.button-2-gray .arrow:before{
	top: -5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.button-2-gray .arrow:after{
	bottom: -5px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* end of 右側に灰色の矢印があるリンクボタン */


/* .js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
} */



@media screen and (max-width: 1040px){
  .header-nav-container nav {
    display: none;
  }
  .header-nav-container {
    margin: 0 auto;
    padding: 0;
    height: 64px;
  }
}


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

}


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

  html {
    font-size: 525%;
  }  

  .sp-only{
    display: block;
  }
  .pc-only{
    display: none;
  }

  h1 {
    font-size: .25rem;
    margin-bottom: 30px;
    font-weight: bold;
  }

  h2 {
    font-size: .22rem;
    margin-bottom: 15px;
  }

  .page-header{
    height: 200px;
  }

  .page-header h1 {
    height: 130px;
    margin: 0 auto;
  }

  .midashi-1 {
    margin: 2em 0 1em;
}


  .w1200-main{

    width: 100%;
    padding: 0 20px;
  }

  .breadcrumb{
    font-size: .13rem;
  }

}