@charset "utf-8";



@media(max-width:900px){
  .pc{
      display: none !important;
      
  }
}
@media(min-width:899px){
  .suma{
      display: none !important;
  }
}
/*=======全共通設定====*/
body{
  font-family: 'Kiwi Maru', serif;
color: rgb(80, 60, 62);
background-color: #eee;;
}
.sen2 h1 {
  position: relative;
  padding: 0.5rem 1.5rem;
  color: #fff;
  border-radius: 5px;
  background: rgb(52, 149, 89);
}

@media only screen and (max-width: 900px) {
  .sen2 h1 {
font-size: 1em;
  }
}
.sen h5 {
  position: relative;
  font-size: 1.5em;
  padding: 0.5rem 1rem;
  color:  rgb(31, 82, 50);
  border-radius: 5px;
  font-family: 'Kiwi Maru', serif;

}


.boxwaku {
	position: relative;
	background: rgb(92, 155, 116);
	padding-top: 1em;

	border: solid 2px rgb(26, 90, 50);
	}
.boxwaku::after {
	position: absolute;
	content: '';
	left: -1px;
	top: -1px;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: #fff #fff rgb(26, 90, 50);
	}
  .boxwaku h6{
    font-size: 1em;
    font-weight: lighter;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 2%;
    color: #ffffff;
    font-family: 'Kiwi Maru', serif;
  }

  
/*バナー文字*/
.moziue p{
  font-size: 3rem;
  position: absolute;
  font-family: 'Dela Gothic One', cursive;
  left:10%;
  top: 18%;
  color: rgba(255, 255, 255, 0.87);
  text-shadow: 1px 2px 4px #000000;
  }

  /*　横幅900px以下の設定　*/
@media only screen and (max-width: 900px) {
  .moziue p{
    font-size: 1.5rem;
    position: absolute;
    font-family: 'Dela Gothic One', cursive;
    left:2em;
    top:2.5em;
    color: rgba(255, 255, 255, 0.87);
    text-shadow: 1px 2px 4px #000000;
    }
  }
  @media only screen and (max-width: 540px) {
    .moziue p{
      font-size: 1rem;
      position: absolute;
      font-family: 'Dela Gothic One', cursive;
      left:1em;
      top:3em;
      color: rgba(255, 255, 255, 0.87);
      text-shadow: 1px 2px 4px #000000;
      }
    }

/*=======上部バナー========*/
/*デフォルトマージンを除去*/
#gaiyou{
  background-image: url(../img/banner/gaiyo.jpg);
  background-blend-mode:soft-light;
  height:270px;
  margin-bottom: 40px;
}
@media screen and (max-width:900px){
  #gaiyou{
    background-image: url(../img/banner/gaiyo.jpg);
    background-blend-mode:soft-light;
    height:70px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width:540px){
  #gaiyou{
    background-image: url(../img/banner/gaiyo.jpg);
    background-blend-mode:soft-light;
    height:40px;
    margin-bottom: 40px;
  }
}

#syakai{
  background-image: url(../img/banner/syakai.JPG);  
  background-blend-mode:soft-light;
  height:270px;
  margin-bottom: 40px;
}
@media screen and (max-width:900px){
  #syakai{
    background-image: url(../img/banner/syakai.JPG);
    background-blend-mode:soft-light;
    height:70px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width:540px){
  #syakai{
    background-image: url(../img/banner/syakai.JPG);
    background-blend-mode:soft-light;
    height:40px;
    margin-bottom: 40px;
  }
}

#news{
  background-image: url(../img/banner/NEWS.JPG);  
  background-blend-mode:soft-light;
  height:270px;
  margin-bottom: 40px;
}
@media screen and (max-width:900px){
  #news{
    background-image: url(../mg/banner/NEWS.JPG);
    background-blend-mode:soft-light;
    height:70px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width:540px){
  #news{
    background-image: url(../img/banner/NEWS.JPG);
    background-blend-mode:soft-light;
    height:40px;
    margin-bottom: 40px;
  }
}
#saiyou{
  background-image: url(../img/banner/recruit.jpg);  
  background-blend-mode:soft-light;
  height:270px;
  margin-bottom: 40px;
  position: relative;
}
@media screen and (max-width:900px){
  #saiyou{
    background-image: url(../img/banner/recruit.jpg);
    background-blend-mode:soft-light;
    height:70px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width:540px){
  #saiyou{
    background-image: url(../img/banner/recruit.jpg);
    background-blend-mode:soft-light;
    height:40px;
    margin-bottom: 40px;
  }
}
#toiawase{
  background-image: url(../img/banner/form.jpg);
  background-blend-mode:soft-light;
  height:270px;
  margin-bottom: 40px;
}
@media screen and (max-width:900px){
  #toiawase{
    background-image: url(../img/banner/form.jpg);
    background-blend-mode:soft-light;
    height:70px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width:540px){
  #toiawase{
    background-image: url(../img/banner/form.jpg);
    background-blend-mode:soft-light;
    height:40px;
    margin-bottom: 40px;
  }
}

#gigyou{
  background-image: url(../img/banner/gigyo.jpg);
  
  background-blend-mode:soft-light;
  height:270px;
  margin-bottom: 40px;
}

@media screen and (max-width:900px){
  #gigyou{
    background-image: url(../img/banner/gigyo.jpg);
    background-blend-mode:soft-light;
    height:70px;
    margin-bottom: 40px;
  }
}
@media screen and (max-width:540px){
  #gigyou{
    background-image: url(../img/banner/gigyo.jpg);
    background-blend-mode:soft-light;
    height:40px;
    margin-bottom: 40px;
  }
}
#tayori  .page-title{
  text-align:center;
}
.top-img{
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.logo{
  width: 200px;/* 横幅 */
}
@media only screen and (max-width: 900px) {
  .logo{
    width: 110px;/* 横幅 */
padding-top: -3em;
  }
  }
.btn01{
  width: 3.5rem;/* 横幅 */
  margin-right: 1rem;
  margin-left: 1rem;
}
.btn03{
  width: 150px;/* 横幅 */
}
/*安全スローガンボタン*/
.csr img {
  width: 30%;    /* 横幅 */
  height: auto;  /* 高さ */
}


/* 社会貢献画像*/
.csr2 {
text-align: center;
}
footer{
  background: rgb(52, 149, 89);
  text-align:center;
  padding:26px 0;
  color: #fff;
}
.wrapperfo{
  max-width: 1600px;
  margin: 0 auto;
  padding:0 2%;
}
/*工事写真の設定*/
.gallery{
  columns: 5;/*段組みの数*/
  padding:0 15px;/*ギャラリー左右に余白をつける*/
}
.gallery li {
  margin-bottom: 20px;/*各画像下に余白をつける*/
}  
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
  width:100%;
  height:auto;
   vertical-align: bottom;/*画像の下にできる余白を削除*/
}
/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
  .gallery{
  columns:3;
  } 
}  
@media only screen and (max-width: 768px) {
  .gallery{
    columns: 2;
  } 
  .gallery li {
    margin-bottom: 10px;/*各画像下に余白をつける*/
  }
}
  
  
  

  
/*画像を出現させるアニメーションCSS*/
.flipLeft{
  animation-name: flipLeft;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  perspective-origin: left center;
  opacity: 0;
}
@keyframes flipLeft{
  from {
     transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
     opacity: 0;
    }  
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}     
     
/*沿革全体の設定*/
.timeline{
	max-width: 900px;
	width:100%;
  height: auto;
	padding:0 30px;
  text-align: left;
}
.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
	list-style: none;
	padding:0 0 20px 0;
  text-align: left;
}
.timeline dl{
	margin:0 0 20px 3em;
  text-align: left;
}
/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
	position: absolute;
	left:0.2em;
	top:0;
	width:2px;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
	background: #ccc;
  text-align: left;
}
/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after{
	content:'';
	position: absolute;
	top:0;
	left:0;
	width:10px;
	height: 10px;
	background:rgb(52, 149, 89);
	border-radius: 50%;
  text-align: left;
}
/*========= 文字横線 ===============*/
.sen {
  display: flex;
  align-items: center;
  justify-content: center;
  color :rgb(30, 80, 49); 
  font-family: 'Kaisei Decol', serif;
}


.sen:before,
.sen:after {
  border-top: 5px double rgb(52, 149, 89); 
  content: "";
  width: 150px; 
}
.sen:before {
  margin-right: 10px; 
}
.sen:after {
  margin-left: 10px; 
}
@media screen and (max-width:900px){
  .sen {
    display: block;
    align-items: center;
    justify-content: center;
    color :rgb(30, 80, 49); 
    font-family: 'Kaisei Decol', serif;
  }
}
@media screen and (max-width:540px){
  .sen {
    display: block;
    align-items: center;
    justify-content: center;
    color :rgb(30, 80, 49); 
    font-family: 'Kaisei Decol', serif;
  }
}


/*========= ドロップダウンナビゲーションのためのCSS ===============*/
/*==上部ナビゲーション全体の設定*/
.sp nav{
   background: rgb(52, 149, 89);
  color:#fff;
  text-align: center;
  font-family: 'Mochiy Pop One', sans-serif;
}
/*ナビゲーションを横並びに*/
.sp nav ul{
    /*2階層目の基点にするためrelativeを指定*/
  position: relative;
  list-style: none;
  display: flex;
  justify-content: center;
}
/*2階層目以降は横並びにしない*/
.sp nav ul ul{
  display: block;
}
/*ナビゲーションのリンク設定*/
.sp nav ul li a{
    /*矢印の基点にするためrelativeを指定*/
  position: relative;
  display: block;
  text-decoration: none;
  color: rgb(80, 60, 62);
  padding:20px 30px;
  /*transition:all .3s;*/
}
.sp nav ul li li a{
  padding:20px;
}
.sp nav ul li a:hover{
  color:#fff; 
}
/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
.sp nav ul li.has-child > a::before{
  content:'';
  position: absolute;
  left:15px;
  top:25px;
  width:6px;
  height:6px;
  border-top: 2px solid #999;
    border-right:2px solid #999;
    transform: rotate(135deg);
}
/*==2階層目以降の画像設定*/
.sp nav ul li.has-child img{
  max-width: 90%;
  height: 100%;
  /*transition: all .5s;*/
  vertical-align: bottom;
}
/*hoverしたら画像拡大*/
.sp nav ul li.has-child img:hover{
  transform: scale(1.2); 
}
.sp nav ul li.has-child dt{ 
  overflow: hidden;
  height: 20vh;
  margin:0 0 20px 0; 
}
@media screen and (max-width:1200px){
  .sp nav ul li.has-child dt{
    height: 12vh;
  }  
}
/*== 2層目の設定 */
.sp nav li.has-child ul{
  /*絶対配置で位置を指定*/
  position: absolute;
  left:5%;
  top:58px;
  z-index: 4;
  /*子要素を横並びに*/    
  margin-left: auto;
    margin-right: auto;
  display: flex;
  position: center;
  flex-wrap: wrap;
    /*形状を指定*/
  background:rgb(231, 229, 222);
  width:90%;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
     /*アニメーション設定
  transition-duration : 2s*/
}

/*hoverしたら表示*/
.sp nav li.has-child:hover > ul{
  visibility: visible;
  opacity: 1;
transition:all 0.5s
}
/*各ナビゲーション横幅*/
.sp nav li.has-child ul li{
  width:20%;
}
/*ナビゲーションaタグの形状*/
.sp nav li.has-child ul li a{
  color:  rgb(52, 149, 89);
}
.sp nav li.has-child ul li a:hover,
.sp nav li.has-child ul li a:active{
  background:#ccd47f;
}
/*==768px以下の形状*/
@media screen and (max-width:1030px){
  .sp{
    display:none;
  }
} 
/*矢印の位置と向き*/ 
.sp nav ul li.has-child > a::before{
  top:17px;
  left:20px;
    transform: rotate(135deg);
}  
.sp nav ul li.has-child.active > a::before{
    transform: rotate(-45deg);
}






/*========= タブ内テキスト ===============*/

 .menu h1{
  font-size:5rem;
  text-transform: uppercase;
  padding: 20px;

}


 .menu h2{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 2rem 0;


}

 .menu p{
  margin:1rem 0;  
}
.menu h6{
  margin-top:20px;  
  text-align: center;
  color: rgb(52, 149, 89);
  font-size: 1.5rem;
}



.menu section:nth-child(2n){
  background:#ffffff; 
}

/*=======SDGs========*/
.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: stretch;
}

@media screen and (min-width: 1030px){
    .none {display:none}
}
@media only screen and(min-width:530px){
  .none2 {display:none}
}

/*=====ハンバーガーメニュー======*/
/*アクティブになったエリア*/
#g-nav.panelactive{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
top: 0;
width:100%;
  height: 100vh;
}
/*丸の拡大*/
.circle-bg{
  position: fixed;
z-index:3;
  /*丸の形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #2eae5fce;
  /*丸のスタート位置と形状*/
transform: scale(0);/*scaleをはじめは0に*/
right:-50px;
  top:-50px;
  transition: all .6s;/*0.6秒かけてアニメーション*/
}
.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}
/*ナビゲーションの縦スクロール*/
#g-nav-list{
  display: none;/*はじめは表示なし*/
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list{
   display: block; /*クラスが付与されたら出現*/
}
/*ナビゲーション*/
#g-nav ul {
opacity: 0;/*はじめは透過0*/
  /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
  opacity:1;
}
/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*リストのレイアウト設定*/
#g-nav li{
list-style: none;
}
#g-nav li a{
text-decoration: none;
display: block;
text-transform: uppercase;
font-weight: bold;
}
/*ハンバーガーメニューボタンデザイン*/
.openbtn1{
position:fixed;
top:10px;
right: 10px;
z-index: 9999;/*ボタンを最前面に*/
cursor: pointer;
  width: 50px;
  height:50px;
background-color: #2eae5f;
border-radius: 5px;
}
/*×に変化*/  
.openbtn1 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
background-color: #fff;
  width: 45%;
}
.openbtn1 span:nth-of-type(1) {
top:15px; 
}
.openbtn1 span:nth-of-type(2) {
top:23px;
}
.openbtn1 span:nth-of-type(3) {
top:31px;
}
.openbtn1.active{
background-color: #2eae5f00;
}
.openbtn1.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}
.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
#header{
width:100%;
background:#2eae5f;
color:#fff;
text-align: center;
padding: 20px;
}

@media only screen and (max-width: 900px) {
#header{
  width:100%;
  background:#2eae5f;
  color:#fff;
  text-align: center;
  padding: 20px;
  height: 2em;
}
}

#header h1{
  font-size:1.2rem;
}

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

#header h1{
  font-size:1.2rem;
  margin-top: -0.8em;
}
}

/*==================================================
アコーディオンのためのcss
===================================*/
/*アコーディオン全体*/
.accordion-area{
  display:block;
  list-style: none;
  max-width: 900px;
}
.accordion-area li{
  margin: 10px 0;
}
.accordion-area section {
border: 1px solid #0d723400;
}
/*アコーディオンタイトル*/
.title {
  position: relative;/*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size:1rem;
  font-weight: normal;
  padding: 10px 0;
  transition: all .5s ease;
  color: #fff;
}
/*アコーディオンで現れるエリア*/
.box {
  display: none;/*はじめは非表示*/
  background: #0d723400;
  padding-bottom: 3%;
  color:#333;
}
.box p{
padding:3px 0;
}
/*tabの形状*/
.tab{
display: flex;
flex-wrap: wrap;
}
.tab li a{
display: block;
background:#ddd;
margin:0 2px;
padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
background:#fff;
}
/*エリアの表示非表示と形状*/
.area {
display: none;/*はじめは非表示*/
opacity: 0;/*透過0*/
background: #fff;
padding:50px 20px;
}
/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
  display: block;/*表示*/
  animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@media only screen and (max-width: 900px) {
  .tab li a{
    display: block;
    background:#ddd;
    margin:0px;
    padding:1rem 0.8rem;
    font-size: 0.8em;
    }

    .menu h6{
      font-size: 1em;
    }

    .area li{
      font-size: 0.8em;
    }

    .area h1{
      font-size: 1em;
    }
  }
@keyframes displayAnime{
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}




/*========= レイアウトのためのCSS ===============*/
ul{
  list-style:none;
}
.wrapper a{
  color:#333;
  text-decoration: none;
}
.wrapper{
  width:100%;
  max-width: 960px;
  margin:30px auto;
    background:#fefefe;
}
.wrapper02{
  width:90%;
  max-width: 1255px;
  margin-left:10%;
    background:#fefefe00;
}
.wrapper3{
  width:100%;
  max-width: 1100px;
  margin:30px auto;
    background:#fefefe;
}
.area h2{
  font-size:1.3rem;
  margin:0 0 20px 10px;
  text-align: center;
  color: darkgreen;
}
.area h3{
  font-size:1rem;
  margin:0 0 20px 10px;
  text-align: center;
}
.area h1{
  font-size:1.3rem;
  margin:0 0 20px 10px;
  color: darkgreen;
}


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

    .area h1{
      font-size: 1em;
      margin:0;
    }

    .area h3{
      font-size:0.8rem;
      margin:0 0 20px 10px;
      text-align: center;
    }

    .area h2{
      font-size:1rem;
      margin:0 ;

  }
}
.area li{
  padding: 10px; 
  border-bottom: 1px solid #ddd;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(150px);
}
/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(150px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}
/*画像の切り替えと動き*/
#page-top a {
    /*aタグの形状*/
	display: block;
	width: 100px;
	height: 130px;
	color: rgb(69, 116, 81);
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
    /*背景画像の指定*/
	background: url("../img/btn04.png") no-repeat center;
	background-size: contain;
}
#page-top.floatAnime a{
	width: 100px;
	height: 130px;
    /*背景画像の指定*/
	background: url("../img/btn03.png") no-repeat center;
	background-size: contain;
    /*アニメーションの指定*/
	animation: floatAnime 2s linear infinite;
	opacity: 0;
}
@keyframes floatAnime {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-6px);opacity: 1; }
  50% { transform: translateX(0) }
  100% { transform: translateX(6px);opacity: 1; }
}


/*======小メニュー======*/
.gnavi{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:1rem 0 3rem 0;
    list-style: none;
    font-family: 'Kaisei Decol', serif;
}
.gnavi li a{
    display: block;
    padding:1rem 2rem;
    text-decoration: none;
}
/*下線ラインデザイン*/
.gnavi li a{
    /*円の基点とするためrelativeを指定*/
  position: relative;
}
.gnavi li.current a,
.gnavi li a:hover{
  color:rgb(52, 149, 89);
}
.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線になる丸の形状*/
    width: 100%;
    height: 5px;
    border-radius: 50%;
    background:rgb(52, 149, 89);
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0.04, 1);/*X方向0.04、Y方向1*/
    transform-origin:center bottom;/*中央下部基点*/
}
/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    height: 2px;/*縦幅を変化*/
    border-radius: 0;/*丸みをなくす*/    
    transform: scale(0.8, 1);/*X方向0.8、Y方向1にスケール拡大*/
}
@media only screen and (max-width:900px){
  .gnavi{
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width:540px){
  .gnavi li a{
    padding:1rem 0.8rem;
    font-size: 0.8rem;
  }
}


/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height:700px;;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
    background:url(../img/CSR/01.jpg);
}

.slider-item02 {
    background:url(../img/CSR/02.jpg);
}

.slider-item03 {
    background:url(../img/CSR/03.jpg);
}
.slider-item04 {
    background:url(../img/CSR/04.jpg);
}
.slider-item05 {
    background:url(../img/CSR/05.jpg);
}
.slider-item06 {
    background:url(../img/CSR/06.jpg);
}
.slider-item07 {
    background:url(../img/CSR/07.jpg);
}
.slider-item08 {
    background:url(../img/CSR/08.jpg);
}
.slider-item {
    width: 100%;;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:700px;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}








.slider2 {
    position:relative;
      z-index: 1;
      /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
      height:70vh;;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  }
  /*　背景画像設定　*/  
  .slider2-item01 {
      background:url(../img/1/49.jpg);
  }  
  .slider2-item02 {
      background:url(../img/1/50.jpg);
  }  
  .slider2-item03 {
      background:url(../img/1/51.jpg);
  }
  .slider2-item04 {
      background:url(../img/1/52.jpg);
  }
  .slider2-item05 {
      background:url(../img/1/53.jpg);
  }
  .slider2-item06 {
      background:url(../img/1/54.jpg);
  }
  .slider2-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:70vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}  
  /*矢印の設定*/  
  .slick-prev, 
  .slick-next {
      position: absolute;
      z-index: 3;
      top: 42%;
      cursor: pointer;/*マウスカーソルを指マークに*/
      outline: none;/*クリックをしたら出てくる枠線を消す*/
      border-top: 2px solid #fff;/*矢印の色*/
      border-right: 2px solid #fff;/*矢印の色*/
      height: 25px;
      width: 25px;
  }  
  .slick-prev {/*戻る矢印の位置と形状*/
      left:2.5%;
      transform: rotate(-135deg);
  }  
  .slick-next {/*次へ矢印の位置と形状*/
      right:2.5%;
      transform: rotate(45deg);
  }  
  /*ドットナビゲーションの設定*/  
  .slick-dots {
      position: relative;
      z-index: 3;
      text-align:center;
      margin:-50px 0 0 0;/*ドットの位置*/
  }  
  .slick-dots li {
      display:inline-block;
      margin:0 5px;
  }  
  .slick-dots button {
      color: transparent;
      outline: none;
      width:8px;/*ドットボタンのサイズ*/
      height:8px;/*ドットボタンのサイズ*/
      display:block;
      border-radius:50%;
      background:#fff;/*ドットボタンの色*/
  }  
  .slick-dots .slick-active button{
      background:rgb(22, 204, 61);/*ドットボタンの現在地表示の色*/
  }
  @media(max-width:900px){
    .slider2 {
        position:relative;
          z-index: 1;
          /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
          height:40vh;;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
      }
      /*　背景画像設定　*/      
      .slider2-item01 {
          background:url(../img/1/49.jpg);
      }      
      .slider2-item02 {
          background:url(../img/1/50.jpg);
      }
      .slider2-item03 {
          background:url(../img/1/51.jpg);
      }
      .slider2-item04 {
          background:url(../img/1/52.jpg);
      }
      .slider2-item05 {
          background:url(../img/1/53.jpg);
      }
      .slider2-item06 {
          background:url(../img/1/54.jpg);
      }
    .slider2-item {
        width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
        height:40vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
        background-repeat: no-repeat;/*背景画像をリピートしない*/
        background-position: center;/*背景画像の位置を中央に*/
        background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
    }    
      /*矢印の設定*/
      .slick-prev, 
      .slick-next {
          position: absolute;
          z-index: 3;
          top: 42%;
          cursor: pointer;/*マウスカーソルを指マークに*/
          outline: none;/*クリックをしたら出てくる枠線を消す*/
          border-top: 2px solid #fff;/*矢印の色*/
          border-right: 2px solid #fff;/*矢印の色*/
          height: 25px;
          width: 25px;
      }
            .slick-prev {/*戻る矢印の位置と形状*/
          left:2.5%;
          transform: rotate(-135deg);
      }
            .slick-next {/*次へ矢印の位置と形状*/
          right:2.5%;
          transform: rotate(45deg);
      }
            /*ドットナビゲーションの設定*/
            .slick-dots {
          position: relative;
          z-index: 3;
          text-align:center;
          margin:-50px 0 0 0;/*ドットの位置*/
      }
            .slick-dots li {
          display:inline-block;
          margin:0 5px;
      }
      .slick-dots button {
          color: transparent;
          outline: none;
          width:8px;/*ドットボタンのサイズ*/
          height:8px;/*ドットボタンのサイズ*/
          display:block;
          border-radius:50%;
          background:#fff;/*ドットボタンの色*/
      }    
      .slick-dots .slick-active button{
          background:rgb(22, 204, 61);/*ドットボタンの現在地表示の色*/
      }
    }    


/* ボタン開発用 */
.pdf{
  /*影の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
text-decoration: none;
display: inline-block;
  text-align: center;
  background: transparent;
border-radius: 25px;
  outline: none;
  /*アニメーションの指定*/
  transition: all 0.2s ease;
  margin: 0.5rem;
}
/*hoverをした後のボタンの形状*/
.pdf:hover{
border-color:transparent;	
}
/*ボタンの中のテキスト*/
.pdf span {
position: relative;
z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  /*テキストの形状*/
display:flex;
justify-content:space-between;
align-items: center;
position: relative;
padding: 15px 33px 15px 30px;
color: #333;
font-size: 18px;
font-weight: 700;
text-decoration: none;
background-color: #90be70;
border-radius: 40px;
  /*アニメーションの指定*/
  transition: all 0.3s ease;
}
.pdf span::before{
content:'';
position: absolute;
margin-left: 1em;
top: 27px;
right: 28px;
width: 18px;
height: 12px;
border-right: 2px solid #2b550e;
border-bottom: 2px solid #2b550e;
}
.pdf span::after{
content:'';
margin-left: 1em;
width: 18px;
height: 12px;
border: 2px solid #2b550e;
}
/*== 右下に押し込まれる（立体が平面に） */
/*影の設定*/
.pushright:before {
  content: "";
  /*絶対配置で影の位置を決める*/
  position: absolute;
z-index: 0;
  top: 4px;
  left: 4px;
  /*影の形状*/
  width: 100%;
  height: 100%;
border-radius: 25px;
  background-color: #6ca743;
}
/*hoverの際にX・Y軸に4pxずらす*/
.pushright:hover span {
background-color: #6ca743;
color: #333;
transform: translate(4px, 4px);
}
@media only screen and (max-width:540px){
  /*ボタンの中のテキスト*/
.pdf span {
  position: relative;
  z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    /*テキストの形状*/
  display:flex;
  padding: 1rem 1.1rem 1rem 1rem;
  }
  .pdf span::before{
  content:'';
  position: absolute;
  margin-left: 1em;
  top: 27px;
  right: 12px;
  width: 18px;
  height: 12px;
  border-right: 2px solid #2b550e;
  border-bottom: 2px solid #2b550e;
  }
  .pdf span::after{
  content:'';
  margin-left: 1em;
  width: 18px;
  height: 12px;
  border: 2px solid #2b550e;
  }
}



/*========タイトル========*/
.heading {
  margin: 1rem 0;
}
.heading span {
  align-items: center;
  margin-bottom: 10px;
  color: #e5c046;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}


.heading span::before {
  content: '';
  display: inline-block;
  margin-right: 1rem;
  width: 4rem;
  height: 1px;
  background-color: #e5c046;
}
/* 見出し設定 文字大きさ設定１*/
.heading h1{
  text-align: center;
  font-size: 1rem;
  line-height: 250%;
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-weight: lighter;
}
/* 見出し設定 文字大きさ設定２*/
.heading h2{
    text-align: center;
    font-size: 2rem;
    font-family: 'Dela Gothic One', cursive;
    padding-top: 1rem;
}


@media only screen and (max-width: 540px) {
  .heading h2{
    font-size: 1.2rem;
    padding-top: 1rem;
  }

  .heading span {
    font-size: 0.8rem;
}
.heading span::before {
  content: '';
  display: inline-block;
  margin-right: 1rem;
  width: 2rem;
  height: 1px;
  background-color: #e5c046;
}
}


/* 見出し設定 文字大きさ設定３*/
.heading p{
  width: 80%;
  margin:2rem auto;
  font-size: 1rem;
  line-height: 250%;
}
.heading3 p{
  width: 50%;
  margin:2rem auto;
  font-size: 1rem;
  line-height: 250%;
}
/* 見出し設定 文字大きさ設定４*/
.heading h4{
  text-align: center;
  font-size: 2rem;
margin-top: 15%;
  font-weight: lighter;
  color: #ffffff;

}
/* 見出し設定 文字大きさ設定５*/
.heading h3{
    margin-top: -30px;
    text-align: center;
    font-size: 2rem;
    font-family: 'Dela Gothic One', cursive;
}

@media only screen and (max-width: 540px) {
  .heading h3{
    font-size: 1.2rem;
  }
}


/* 見出し設定 文字大きさ設定６*/
.heading h5{
    text-align: right;
    font-size: 1.5rem;
    font-family: 'Dela Gothic One', cursive;
    margin-right: 20px;
}
/* CSRページ　見出し設定 文字設定*/
.headingcsr h2{
  text-align: center;
  font-size: 1rem;
  font-family: 'Dela Gothic One', cursive;
  margin-top: 400px;
  color: #e5c046; 
}
.headingcsr h3{
  margin-top: -10px;
  text-align: center;
  font-size: 3rem;
  font-family: 'Dela Gothic One', cursive;
}

/* CSRページ　見出し設定 文字設定*/
.headingcsr h2{
  text-align: center;
  font-size: 1rem;
  font-family: 'Dela Gothic One', cursive;
  margin-top: 400px;
  color: #e5c046;
  
}
.headingcsr h3{
  margin-top: -10px;
  text-align: center;
  font-size: 3rem;
  font-family: 'Dela Gothic One', cursive;
}




/* 見出し設定２ */
.heading2 {
  display: flex;
  margin-top: 30px;
  justify-content: center;
  align-items: center;
  color: rgb(56, 47, 45);
}
.heading2::before,
.heading2::after {
  content: '';
  width: 40px;
  height: 40px;
}
.heading2::before {
  margin: -80px 30px 0 0;
  border-top: 15px solid rgb(52, 149, 89);
  border-left: 15px solid  #acc96b;
}
.heading2::after {
  margin: 0 0 -80px 30px;
  border-right: 15px solid rgb(52, 149, 89);
  border-bottom: 15px solid #acc96b;
}
.heading4 {
  font-size: 26px;
  margin-top: 20px;
}
.heading4 span {
  align-items: center;
  margin-bottom: 10px;
  color: #e5c046;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
.heading4 span::before {
  content: '';
  display: inline-block;
  margin-right: 20px;
  width: 40px;
  height: 1px;
  background-color: #e5c046;
}
/* 見出し設定 文字大きさ設定１*/
.heading4 h1{
  text-align: center;
  font-size: 1rem;
  line-height: 250%;
  margin-top: 30px;
  margin-bottom: 50px;
  font-weight: lighter;
}
/* 見出し設定 文字大きさ設定２*/
.heading4 h2{
    text-align: center;
    font-size: 2rem;
    font-family: 'Dela Gothic One', cursive;
    padding-top: 20px;
}
/* 見出し設定 文字大きさ設定３*/
.heading4 p{
  margin: 5px;
  margin-top: 30px;
  margin-left: 150px;
  margin-right: 150px;
  margin-bottom: 50px;
    font-size: 1.2rem;
    line-height: 250%;
}
/* 見出し設定 文字大きさ設定４*/
.heading4 h4{
  text-align: center;
  font-size: 2rem;
margin-top: 15%;
  font-weight: lighter;
  color: #ffffff;
}
/* 見出し設定 文字大きさ設定５*/
.heading4 h3{
    text-align: center;
    font-size: 2rem;
    font-family: 'Dela Gothic One', cursive;
}
/* 見出し設定 文字大きさ設定６*/
.heading4 h5{
    text-align: right;
    font-size: 1.5rem;
    font-family: 'Dela Gothic One', cursive;
    margin-right: 20px;
}
@media only screen and (max-width:540px){
  .heading2::before{
    margin:-6rem 1rem 0 1rem;
  }
  .heading2::after{
    margin:0 1rem -6rem 1rem;
  }
}






  /*　横幅900px以下の設定　*/
  @media only screen and (max-width: 900px) {


    .heading4 {
      font-size: 26px;
      margin-top: 20px;
    }
    
    .heading4 span {
    
     
      align-items: center;
      margin-bottom: 10px;
      color: #e5c046;
      font-size: 1rem;
      font-family: 'Montserrat', sans-serif;
      text-transform: uppercase;
    }
    
    .heading4 span::before {
      content: '';
      display: inline-block;
      margin-right: 20px;
      width: 40px;
      height: 1px;
      background-color: #e5c046;
    
    }

    /* 見出し設定 文字大きさ設定５*/
.heading4 h3{

  text-align: center;
  font-size: 2rem;
  font-family: 'Dela Gothic One', cursive;
}
/* 見出し設定 文字大きさ設定２*/
.heading4 h2{
    text-align: center;
    font-size: 2rem;
    font-family: 'Dela Gothic One', cursive;
    padding-top: 20px;
}

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



      
      .heading4 span {
      
       
        align-items: center;
        margin-bottom: 10px;
        color: #e5c046;
        font-size: 1rem;
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
      }
      
      .heading4 span::before {
        content: '';
        display: inline-block;
        margin-right: 20px;
        width: 40px;
        height: 1px;
        background-color: #e5c046;
      
      }

      
      /* 見出し設定 文字大きさ設定５*/
.heading4 h3{

  text-align: center;
  font-size: 1.5rem;
  font-family: 'Dela Gothic One', cursive;
}
/* 見出し設定 文字大きさ設定２*/
.heading4 h2{
  margin-top: -2em;
  text-align: center;
  font-size: 1rem;
  font-family: 'Dela Gothic One', cursive;
}

      }






      
/* CSRページ　見出し設定 文字設定*/
.headingcsr4 h2{
  text-align: center;
  font-size: 1rem;
  font-family: 'Dela Gothic One', cursive;
  margin-top: 400px;
  color: #e5c046;
  
}
.headingcsr4 h3{
  margin-top: -10px;
  text-align: center;
  font-size: 3rem;
  font-family: 'Dela Gothic One', cursive;
}


.headingkaihatu::before {
  content: attr(data-number);
  margin-right: 10px;
  top: 0;
  left: 0;
  padding-bottom: 5px;
  color: #e5c046;
  font-size: 2rem;
  font-weight: 800;
  border-bottom: 1px solid #e5c046;
}

.toplogo{
  display: flex;
  align-items: center;
}



/*保有船舶（事業紹介）*/
.internwrap2{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 20px;
  width:100%;
}
.internwrap2:nth-child(even){/*偶数番目のみ反転*/
  flex-direction: row-reverse;
}
.internimage2{
  text-align: center;
}
.internitem2{
  margin:30px;
  padding: 30px;
  width:40%;
  height: auto;
  background-color:rgb(255, 255, 255);
  border-radius: 10px;
}
.interntext2{
  padding: 0 40px;
}
.intern2 img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
@media only screen and (max-width:900px){
  .internwrap2{
    display: flex;
    flex-direction: column;
  }
  .internwrap2:nth-child(even){
    flex-direction: column;
  }
  .internimage2 img{
    width: 95%;
  }
  .internitem2{
    width:100%;
  }
  .intext2{
    padding:0;
  }
  .intext2 h2{
    padding:0;
  }
}

/*全体設定(SDGs)*/
/*PC版*/
/*画像+説明設定*/
.swrap{
  display:flex;
  align-items:center;
  width:90%;
  margin: auto;
}
.simage{
  width:50%;
  display: block;
}
.stext{
  padding:0 3rem;
  width:40%;
}
.simage p{
  margin:0;
  text-align: right;
}
.simage img{
  width:100%;
  max-width: 600px;
  height:auto;
  display: inline;
}
/*スマホ版*/
@media only screen and (max-width:900px){
  .swrap{
    display:flex;
    flex-direction: column;
    width: 100%;
    margin:0 auto;
  }
  .simage{
    width: 100%;
  }
  .stext{
    margin:1rem 0;
    padding:1.5rem;
    width: 100%;
  }
  .simage img{
    display: block;
    width: 100%;
    padding:0;
    margin:0 auto;
  }
}
.sdgsp{
  max-width: 960px;
  margin:0 auto;
  padding-top: 2rem;
}
/*モーダルウインドウ全体（SDGs）*/
.box-sdgs{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  max-width:960px;
  margin:10px auto;
}
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}
/*モーダルウィンドウ画像設定（SDGs）*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}
/*モーダルウィンドウ内レイアウト（SDGs）*/
.info-list dl,
.item-sdgs,
.itemrogo-sdgs{
  display: flex;

}
/*モーダルウィンドウ個別設定（SDGs）*/
.info-list dt{
  margin:0 10px 0 0;
}
.item-sdgs li{
  margin:0 10px 0 0;
}
.item-sdgs{
  cursor: pointer;
  overflow: hidden;
  position: relative;
  width: 32%;
  background-color: #fff;
  border-radius: 10px;
}
.item-sdgs:not(:nth-child(3n+3)){/*1列3ウインドウ*/
  margin-right:2%;
}
.item-sdgs:nth-child(n+4){
  margin-top:30px;
}
.item-sdgs img {
  max-width: 100%;
  height: auto;
  transition: transform .6s ease;/* ゆっくり変化させる */
}
.item-sdgs:hover img {
  transform: scale(1.1);/* 拡大 */
  opacity:0.5;
  transition:0.3s;
}
/*ロゴのみ設定（SDGs）*/
.itemrogo-sdgs{
  cursor: pointer;
  overflow: hidden;
  position: relative;
  width: 32%;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 30px;
  align-items: center;
}
.itemrogo-sdgs img{
  max-width: 100%;
  transition: transform .6s ease;
  transition: .3s ease-in-out;
}
.itemrogo-sdgs:hover img{
  transform:scale(1.1);
}
/*モーダルウィンドウ内レイアウト（SDGs）*/
.smoda h1{
  color: rgb(255, 255, 255);
  text-align: center;
  margin-bottom: 1rem;
}
.sdgsmoda{
  max-width:100px;
  margin:1%;
}
.modawrap{
  display:flex;
  align-items:center;
}
.modaimage{
  padding:1rem;
  width:20%;
}
.modatext{
  padding:0 30px;
  width:70%;
}
.modawrap img{
  display:block;
  width:100%;
  height:auto;
}
.sdgswrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.sdgsitem{
  padding:30px;
  width:40%;
  border-radius:5px;
}
.smoda h2{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 30px 0;
}
.smoda h3{
  text-align: center;
}
.box-sdgs h3{
  text-align:center;
  padding:15px;
  text-decoration:none !important;
  font-size: 1rem;
}
.sdgsitem img{
  max-width: 100%;
  height:auto;
}
@media only screen and (max-width:900px){
  .box-sdgs{
    padding:0 1rem;
    width: 100%;
  }
  .sdgsp{
    margin-left: 1rem;
  }
}
@media only screen and (max-width:540px){
  .item-sdgs{
    cursor: pointer;
    overflow: hidden;
    position: relative;
    margin: 1rem auto;
    width: 45%;
    background-color: #fff;
    border-radius: 10px;
  }
  .item-sdgs:nth-child(n+4){
    margin-top:1rem;
  }
  .item-sdgs:not(:nth-child(even)){/*1列3ウインドウ*/
    margin-right:2%;
  }
  .box-sdgs:after{
    content:"";
    display: block;
    width:50%;
    height: 0;
  }
  .itemrogo-sdgs{
    cursor: pointer;
    overflow: hidden;
    position: relative;
    margin: 1rem auto;
    width: 45%;
    background-color: #fff;
    border-radius: 10px;
    align-items: center;
  }
  .sdgsp{
    max-width: 100%;
    margin-top:1.5rem;
    padding-left: 1rem;
  }
  /*モーダルウィンドウ内レイアウト（SDGs）*/
.smoda h1{
  font-size: 1.2rem;
}
.sdgsmoda{
  max-width:100px;
  margin:1%;
}
.modawrap{
  display:flex;
  align-items:center;
  flex-direction: column;
}
.modaimage{
  width: 100%;
  margin:1rem auto;
  padding:0;
}
.modatext{
  padding:0;
  width:100%;
}
.modawrap img{
  display:block;
  width:50%;
  height:auto;
  margin:0 auto;
}
.sdgswrap{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
}
.sdgsitem{
  padding:0;
  width:100%;
  border-radius:5px;
  margin-top: 3rem;
  text-align: center;
}
.smoda h2{
  margin: 0;
}
.smoda h3{
  font-size: 1rem;
  margin: 1rem 0;
}
.box-sdgs h3{
  text-align:center;
  text-decoration:none !important;
}
.sdgsitem img{
  max-width: 100%;
  height:auto;
}
}
ul{
  list-style: none;
}
a{
  color:#333;
  text-decoration:none;
}






/*モーダルウインドウ全体（営業所）*/
.box-eigyo{
  display: flex;
  flex-wrap: wrap;
  width:100%;
  max-width:800px;
  margin: auto;
}
/*モーダルウィンドウ内レイアウト（営業所）*/
.item-eigyo li{
  margin:0 10px 0 0;
}
.item-eigyo{
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 32%;
  height: 30%;
  z-index: 0;
  background-color: #fff;
  border-radius: 10px;
  padding: 0 1rem 0.5rem 0;
}
.item-eigyo:not(:nth-child(3n+3)){/*1列3ウインドウ*/
  margin-right:2%;
}
.item-eigyo:nth-child(n+4){
  margin-top:30px;
}
.item-eigyo img {
  max-width: 100%;
  height: auto;
  transition: transform .6s ease;/* ゆっくり変化させる */
  border-radius: 10px;
}
.item-eigyo:hover img {
  transition:0.3s;
}
/* ボタン共通設定 */
.btnei{
  /*影の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
text-decoration: none;
display: inline-block;

  text-align: center;
  background: transparent;
border-radius: 25px;
  outline: none;
  height: 100%;
  /*アニメーションの指定*/
  transition: all 0.2s ease;
}
/*hoverをした後のボタンの形状*/
.btnei:hover{
border-color:transparent; 
transition:0.3s;
}
.btnei img{
  border-radius: 25px;
  width: 100%;
}
/*ボタンの中のテキスト*/
.btnei span {
position: relative;
z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  /*テキストの形状*/
display: block;
border-radius: 25px;
width: 100%;
  /*アニメーションの指定*/
  transition: all 0.3s ease;
}
/*== 右下に押し込まれる（立体が平面に） */
/*影の設定*/
.pusheigyo:before {
  content: "";
  /*絶対配置で影の位置を決める*/
  position: absolute;
z-index: -1;
  top: 4px;
  left: 4px;
  /*影の形状*/
  width: 100%;
  height: 99%;
border-radius: 25px;
  background-color: #333;
}
/*hoverの際にX・Y軸に4pxずらす*/
.pusheigyo:hover span {
background-color: #fff;
color: #fff;
transform: translate(4px, 4px);
}
@media only screen and (max-width:900px){
  .box-eigyo{
    padding:0 1rem;
  }
}
@media only screen and (max-width:540px){
  .item-eigyo{
    margin: .5rem auto;
    width: 45%;
  }
  .item-eigyo:nth-child(n+4){
    margin-top:0.5rem;
  }
  .box-eigyo:after{
    content:"";
    display: block;
    width:50%;
    height: 0;
  }
}




/*テーブル設定（0カーボン）*/
.stable table{
  margin:0 auto;
  width: 80%;
  max-width: 1300px;
  border-collapse: collapse;
}
.stable tr{
  border: solid 1px #8f9e95;
}
.stable tr:last-child{
  border-bottom: solid 1px #8f9e95;
}
.stable th{
  position: relative;
  text-align: center;  background-color: rgb(52, 149, 89);
  color: white;
  padding: 10px 0;
  font-family: 'Kiwi Maru', serif;
  font-weight: lighter;
  width: 10rem;
}
.stable th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #349559;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.stable td{
  background-color: #fff;
  padding: 10px 30px;
  text-align: center;
}
.stable td:nth-child(2n+1){
  width:15%;
}
/*テーブル内ロゴ*/
.item-zch{
  cursor: pointer;
  text-align: center;
}
.item-zch:hover img {
  transform:scale(1.1) ;/* 拡大 */
  transform: transform .6s ease;
}
/*リンク設定（0カーボン）*/
.zchemphasis a{
  color:#3f7fea;
  position:relative;
}
.zchemphasis a:hover{
  color:#3f7fea;
}
.zchemphasis a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:#3f7fea;
  transition:all .3s;
  transform:scale(0,1);
  transform-origin:left top;
}
.zchemphasis a:hover::after{
  transform:scale(1,1);
}
@media only screen and (max-width:540px){
  .stable{
    width:90%;
    margin:auto;
  }
  .stable th:after{
    display: none;
  }
  .stable table{
    border-collapse: collapse;
    width: 100%;
  }
  .stable th,
  .stable td{
    padding: 10px;
    border: none;
    background-color: #fff;
    text-align:center;
    box-sizing:border-box;
    display: block;
    width: 100%;
  }
  .stable th {
    background: rgb(52, 149, 89);
    color: #fff;
    
  }
  .stable tr:last-child{
    border-bottom: solid 1px #8f9e95;
  }
  .stable td:nth-child(2n+1){
    width:100%;
    display: flex;
    justify-content: center;
    padding:0;

  }
  .stable img{
    margin:1rem;
  }
}
.btnichi{
  padding-left: 10%;
}
@media only screen and (min-width:1700px){
  .btnichi{
    padding-left:15%;
  }
}



/*箇条書き設定（about）　*/
.kaihatu p{
  text-align: center;
margin: 15px;
padding-bottom: 20px;
margin: auto;
}
.headingkaihatu {
  position: relative;
  font-size: 26px !important;
}

.headingkaihatu::before {
  content: attr(data-number);
  margin-right: 10px;
  top: 0;
  left: 0;
  padding-bottom: 5px;
  color: #e5c046;
  font-size: 2rem;
  font-weight: 800;
  border-bottom: 1px solid #e5c046;
}

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

  .headingkaihatu {
    padding-left: 0;
  }

.headingkaihatu::before {
  font-size: 1.5rem;
}
}

@media only screen and (max-width: 900px) {
  .headingkaihatu::before {
    font-size: 1.5rem;
  }
}
.kaihatu ul{
  margin: auto;
  max-width: 1100px;
  width: 90%;
  border-radius :8px;
  box-shadow :0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
}
.kaihatu ul li {
  padding: 0.5em 0;
}
.kaihatu ul li:before {
  margin: auto;
  color: #e5c046;
}
.kaihatu li{
  font-size: 1rem;
}
.kaihatu li:before {
	content:'●';
}
.kaihatu img{
  max-width: 1240px;
  width: 100%;
}
@media only screen and (max-width: 540px) {

  .kaihatu li{
    margin-left: -5%;
    font-size: 0.5rem;
  }
}

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

    .kaihatu li{
      margin-left: -2%;
      font-size: 0.8rem;
    }

  
}
/*箇条書き設定２（研究開発）　*/
.kaihatu2 ul{
  background-color: white;
  margin: auto;
  max-width: 1100px;
  width: 90%;
  border-radius :8px;
  box-shadow :0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
}
.kaihatu2 ul li {
  line-height: 1.5;
  padding: 0.5em 0;
}
.kaihatu2 ul li:before {
  margin: auto;
  color: #e5c046;
}
.kaihatu2 li{
  margin-left: 7%;
  font-size: 1.2rem;
}
.kaihatu2 li:before {
	content:'●';
}
.kaihatu2 h4{
  margin-left:5%;
}
.kaihatu2 iframe{
  display:block;
  margin: 50px auto;
  max-width: 100%;
  max-height: 100%;
}
@media only screen and (max-width: 540px) {

  .kaihatu2 li{
    margin-left: -5%;
    font-size: 0.5rem;
  }
}

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

    .kaihatu2 li{
      margin-left: -2%;
      font-size: 0.8rem;
    }

  
}



/*箇条書き設定３（研究開発）　*/

.kaihatu3 ul{
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  margin: auto;
  width: 90%;
  border-radius :8px;
  box-shadow :0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
  
  

}

.kaihatu3 p{
  margin: 0;
}
.kaihatu3 ul li {
  line-height: 1.5;
  padding: 0.5em 0;
}

.kaihatu3 ul li:before {
  margin: auto;
  color: #e5c046;
}
.kaihatu3 li{
  font-size: 1rem;
  margin: auto;
} 
  
.kaihatu3:not(:nth-child(2n+2)) {
    margin-right: 2%;
  }




.kaihatu3 li:before {
	content:'●';
}


.kaihatu3 img{
 
  width: calc(50% - 10px);
}

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

  .kaihatu3 li{
    font-size: 0.7rem;
    margin: 0;
  } 
}

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

    .kaihatu3 li{
      font-size: 0.8rem;
      margin: 0;
    } 

  
}



/*箇条書き設定4（会社概要）　*/

.kaihatu4 ul{
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  margin: auto;
  width: 90%;
  border-radius :8px;
  box-shadow :0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
  text-align: center;

}
.kaihatu4 ul li {
  line-height: 1.5;
  padding: 0.5em 0;
}

.kaihatu4 ul li:before {
  margin: auto;
  color: #e5c046;
}
.kaihatu4 li{
  font-size: 1rem;
  margin: auto;
} 
  
.kaihatu4:not(:nth-child(2n+2)) {
    margin-right: 2%;
  }




.kaihatu4 li:before {
	content:'●';
}


.kaihatu4 img{
 
  width: calc(50% - 10px);
}


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

  .kaihatu3 li{
    font-size: 0.7rem;
    margin: 0;
  } 
}

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

    .kaihatu4 li{
      font-size: 0.8rem;
      margin: 0;
    } 

  
}
/*モーダル設定（職種紹介）*/
.recmoda{
  width: 40%;
  margin: 5%;
}
.rmoda h1{
  color: darkgreen;
  margin-bottom: 1rem;
}
.rmoda h2{
  text-align: center;
  margin-top: 20px;
}
.rmoda img{
  margin:0 5px;
}
.rmoda h3{
  text-align: left;
  margin:0 5% 10% 5%;
  padding:0;
}
.intext p{
  margin:6px 0 0 0;
  font-size: 16px;
  line-height: 110%;
  width: 100%;
  line-height: normal;
}
.intext img{
  max-width: 50%;
  display: block;
  margin: auto;
}
.inright{
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 1rem;
}
.inrightimage{
  text-align: left;
}
.inrightimage img{
  max-width: 150px;
}
.inrighttext{
  text-align: right;
}
.intext h2{
  font-family: 'Kiwi Maru', serif;
  margin:1rem 0;
  padding:0;
}
@media only screen and (max-width:940px){
  .rmoda{
    display: flex;
    flex-direction: column;
  }
  .rmoda img{
    width: 100%;
  }
}



/*出身校タイトル（採用データ）*/
.school{
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-size: 20px;
  margin: 30px 0;
}
.school::before,
.school::after{
  content: '';
  width: 70px;
  height: 3px;
  background-color: #e5c046;
}
.school::before{
  margin-right:30px;
}
.school::after{
  margin-left:30px;
}



/*マーカー設定（募集要項）*/
.reemphasis{
  background-image:linear-gradient(
    rgba(0 0 0 / 0) 70%,
    #e5c046 70%
  );
}
/*太字設定（募集要項*/
.rebold{
  font-weight:bold;
}
/*文字色設定（採用データ）*/
em{
  color:#c51515;
  font-style:normal;
  font-weight: bold;
}



/*テーブル設定2列（募集要項）*/
.bosyu{
  margin:80px 0;
}
.bosyu table{
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 80%;
table-layout: fixed;
}
.bosyu tr {
background-color: #fff;
padding: .35em;
border-bottom: 1px solid #8f9e95;
text-align: center;
}
.bosyu th,
.bosyu td {
padding: 1em 10px 1em 1em;
}
.bosyu td{
  border-right: 1px solid #8f9e95;
}
.bosyu th {
  position: relative;
width: 15%;
}
.bosyu table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top: calc(50% - 10px);
  right: -10px;
  border-left: 10px solid #349559;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.bosyu thead tr{
background-color: #349559;
color:#fff;
}
.bosyu tbody th {
  background: #349559;
  color: #fff;
}
.bosyu thead th{
  background-color: #eee;
}
.bosyu thead th:after{
  display: none;
}
@media only screen and (max-width:540px){
  .bosyu{
    display: none;
  }
}
@media(min-width:541px){
  .suma2{
      display: none !important;
  }
}

/*テーブル設定1列（募集要項）*/
.bosyu2 table{
  border-collapse: collapse;
  margin:0 auto;
  padding: 0;
  width: 100%
}
.bosyu2 tr {
background-color: #fff;
padding: .35em;
border-bottom: 1px solid #8f9e95;
}
.bosyu2 th,
.bosyu2 td {
padding: 1em 10px 1em 1em;

}
.bosyu2 td{
  border-right: 1px solid #8f9e95;
}
.bosyu2 th {
width: 15%;
}
.bosyu2 thead tr{
background-color: #349559;
color:#fff;
}
.bosyu2 tbody th {
background: #349559;
color: #fff;
}
.bosyu_1 td{ /*中央調整*/
padding-right:13%;
padding-left:5%;
}



/*モデル年収テーブル（採用データ）*/
.model{
  margin: 30px 0;
}
.model dl{
  display: flex;
  justify-content:space-between;
  width:450px;
  margin:auto;
}
.model dt{
  width:30%;
  text-align: right;
}
.model dd{
  width:70%;
  text-align:right;
}
.model p{
  text-align: right;
}
@media only screen and (max-width:540px){
  .model dl{
    width:100%;
  }
  
}










/*参加者の声（インターンシップ）*/
.internwrap{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 20px;
  width:100%;
}
.internwrap:nth-child(even){/*偶数番目のみ反転*/
  flex-direction: row-reverse;
}
.internimage{
  text-align: center;
}
.internitem{
  margin:30px;
  padding: 30px;
  width:40%;
  height: auto;
  background-color:#eee;
  border-radius: 10px;
}
.interntext{
  padding: 0 40px;
}
.intern img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/*画像装飾（インターンシップ）*/
.inpic{
  position:relative;
}
.inpic::before,
.inpic::after{
  content:'';
  position:absolute;
  transform: rotate(-35deg);/*35°回転*/
  width: 70px;
  height: 25px;
  background-color:#e5c046;
}
.inpic::before{
  top:-10px;
  left:-25px;
  border-bottom:1px solid #e5c046;
}
.inpic::after{
  bottom:-10px;
  right:-25px;
  border-top:1px solid #e5c046;
}@media only screen and (max-width:900px){
  .internwrap{
    display: flex;
    flex-direction: column;

  }
  .internwrap:nth-child(even){
    flex-direction: column;
  }
  .internimage img{
    width: 95%;
  }
  .inpic::before{
    left:-10px;
  }
  .inpic::after{
    bottom:-5px;
    right: -15px;
  }
  .internitem{
    width:100%;
    max-width: 600px;
  }
  .intext h2{
    padding:0;
  }
  .interntext{
    padding:0;
  }
}





/*モーダルウインドウ全体（社会貢献）*/
/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}
/*モーダルウィンドウ画像設定（社会貢献）*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}
/*モーダルウィンドウ内レイアウト（社会貢献）*/
.info-list dl{
  display: flex;
}
/*モーダルウィンドウ個別設定（社会貢献）*/
.info-list dt{
  margin:0 10px 0 0;
}
/*モーダルウィンドウ内レイアウト（社会貢献）*/
.syamoda{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin:1%;
  max-width: 960px;
}
.syamoda iframe{
  width: 49%;
  height: 300px;
}
.syamoda:not(:nth-child(2n+2)){
  margin-right:2%;
}
.syamoda2{/*1枚1日用*/
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin:1%;
  max-width: 960px;
}
.syamodaflex{
  display: none;
}
.box-sya h3{
  text-align: center;
  padding: 15px;
  text-decoration:none !important;
}
@media only screen and (max-width:900px){
  /*モーダルウィンドウ内レイアウト（社会貢献）*/
  .syamoda{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin:1%;
  max-width: 100%;
  }
  .syamoda img{
    max-width: 100%;
    margin:.5rem 0;
  }
  .syamoda iframe{
    width: 100%;
    height: 300px;
  }
  .syamoda{
    flex-direction: column;
  }
  .syamoda2{
    display: none;
  }
  .syamodaflex{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .syamodaflex img{
    max-width: 100%;
    margin:.5rem 0;
  }
}











/*==================================================
スライダーのためのcss(認定)
===================================*/
.sr {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:70%;
  margin:5rem auto;
}
.sr img {
  width:20vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
}
.sr .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}
.sr .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}
.sr a:hover{
  opacity:0.5;
  transition:0.3s;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.sl-prev, 
.sl-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #1b1414;/*矢印の色*/
  border-right: 2px solid #181313;/*矢印の色*/
  height: 15px;
  width: 15px;
}
.sl-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.sl-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.sl-dots {
  text-align:center;
margin:20px 0 0 0;
}
.sl-dots li {
  display:inline-block;
margin:0 5px;
}
.sl-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:rgb(12, 12, 12);/*ドットボタンの色*/
}
.sl-dots .sl-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}
@media only screen and (max-width:900px){
  .sr{
    width: 80%;
    margin-bottom: 16rem;
  }
  .sr img{
    width:40vw;
  }
}
@media only screen and (max-width:540px){
  .sr {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:80%;
  }
  .sr img{
    width: 60vw;
  }
}






/*お問い合わせ*/
.form{
	text-align:center;
  margin:2rem 0;
}
.form p{
  margin:0.5rem 0 1rem 0;
}
.form h1{
  font-size: 2rem;
  margin-bottom: 2rem;
}
.form h3{
	color:rgb(80, 60, 62);
	padding:5px;
}
.form h3,h4 span{
  color:crimson;
  font-size:.8rem;
  margin-bottom:0;
}
.form h4{
	color:rgb(80, 60, 62);
  margin-top: 2rem;
}
.form h5{
	margin-bottom: 2rem;
}
.form2{
  text-align:center;
  margin:1rem 0 2rem 0;
}
.form2 span{
  display: none;
}
.form2 h4{
  color: rgb(80, 60, 62);
  text-align: right;
  margin: 1rem;
  width: 50%;
  font-weight: normal;
}
.form2 p{
  width: 50%;
  text-align: left;
  font-weight: bold;
}
.formflex li{
  display: flex;
  justify-content: center;
}
.formflex h5{
  text-align: center;
  font-size: 1.5rem;
  margin-top: 4rem;
  font-weight: normal;
}
.backbutton{
  margin: 2.8rem 3rem 1rem 3rem;
  color: #3f7fea;
}
.background-color{
	background-color: #fff;
}
/*フォームのスタイル*/
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 35%;
	outline: none;
	padding: 0.5em 1em;
	margin: 0;
	background: #fff;
	border: none;
	border-radius: 10px;
}
textarea{
	height: 200px;
}
input[type="text"]:focus,
textarea:focus {
	background: #f6ffff;/*フォーカスしたときの背景色*/
}
/*送信ボタンのスタイル*/
.button{
  margin-top: 2rem;
}
.button input {
	padding: 1em 3em;
	color: #fff;
	cursor: pointer;
	background: #33675D;
	border-radius: 40px;
	border: none;
}
.button input:hover{
	opacity: 0.8;/*ボタンのロールオーバー*/
}
.nput[type="submit"] {
	padding: 1em 3em;
	color: #fff;
	cursor: pointer;
	background: #33675D;
	border-radius: 40px;
	border: none;
}
.input[type="submit"]:hover{
	opacity: 0.8;/*ボタンのロールオーバー*/
}
/*ラジオボタン*/
.radio-style {
	position: absolute;
  	opacity: 0;
  	z-index: -1;
  } 
  .radio-style + label {
	position: relative;
	cursor: pointer;
	padding: 0 2em;
  margin:1rem;
  }
  .radio-style + label::before,
  .radio-style + label::after {
	content: "";
	position: absolute;
	border-radius: 100%;
	transition: all 0.5s ease-out;
  }
  .radio-style + label::before {
	top: 4px;
	left: 2px;
	width: 1em;
	height: 1em;
	background-color: #000000;
	box-shadow: inset 0 0 0 1em #eee;
  } 
  .radio-style:checked + label::before {
	box-shadow: inset 0 0 0 0.2em #eee;
  }
/*========= モーダル表示のためのCSS ===============*/
/*認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 20px 0;
}

@media only screen and (max-width:900px){
  /*フォームのスタイル*/
  input[type="text"],
  input[type="email"],
  textarea {
    width: 80%;
  }
}

@media only screen and (max-width:540px){
  /*フォームのスタイル*/
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
}
.form2 h5{
  font-size: 1.2rem;
}
}

/*全体設定(TOP)*/
/*PC版*/
/*画像+説明設定*/
.swrap2{
  display:flex;
  align-items:center;
  width:100%;
}
.simage2{
  width:50%;
}
.stext2{
  padding:0 3rem;
  width:50%;
}
.simage2 img{
  display:block;
  width:70%;
  padding-left:3rem;
  height:auto;
}

.swrap2 h5{
  font-size: 1em;
  text-align: right;
}
/*スマホ版*/
@media only screen and (max-width:900px){
  .swrap2{
    display:flex;
    flex-direction: column;
    width: 90%;
    margin:0 auto;
  }
  .simage2{
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: -2em;
  }
  .stext2{
    margin:1rem 0;
    padding:1.5rem;
    width: 100%;
  }
  .simage2 img{
    display: block;
    width: 100%;
    padding:0;
    margin:0 auto;
  }
  .swrap2 p{
    font-size: 1em;
    line-height: 2em;
  }

  .swrap2 h5{
    font-size: 1em;
    text-align: right;
  }

}

/*スマホ版*/
@media only screen and (max-width:540px){
  .swrap2{
    display:flex;
    flex-direction: column;
    width: 90%;
    margin:0 auto;
    font-size: 0.9em;
    line-height: 2em;
  }
  .simage2{
    width: 90%;
    margin-top: 1.5em;
    margin-bottom: -2em;
  }
  .stext2{
    margin:1rem 0;
    padding:1.5rem;
    width: 100%;
  }
  .simage2 img{
    display: block;
    width: 100%;
    padding:0;
    margin:0 auto;
  }
  .swrap2 p{
    font-size: 1em;

  }

  .swrap2 h5{
    font-size: 1em;
    text-align: right;
  }
}


/*NEWS*/
.news-all{
  display: flex;
  justify-content: center;
  margin:0;
}
.title-news{
  background-color: #fff;
  margin: 1.5rem;
  width: 55%;
}
.title-news h1{
  font-size: 1.5rem;
  padding: 0;
  margin:1rem;
  padding-left: 2.5rem;
  font-family: 'Mochiy Pop One';
  font-weight: lighter;
}
.title-news h3{
  margin:0 1rem 1rem 3.5rem;
  border-bottom: solid 3px #e5c046;
}
.title-news p{
  margin: 0 0 0 4rem;
  line-height: 2rem;
  font-size: 1rem;
  margin-right: 2em;
}
.title-news img{
  margin: 1rem auto;
  padding: 0.5rem;
}
.title-news a{
  color:#3f7fea;
  font-size: 1rem;
  font-family: 'Mochiy Pop One';
}
.title-news pre{
  font-family: 'Kiwi Maru' , serif;
  padding: 1rem;
}

.prev-news{
  display: flex;
  justify-content: space-between;
  margin: 1.5rem 4rem 2rem 4rem;
  font-size: 1.5rem;
}
.news-page{
  text-align: center;
  margin: 2rem;
}
.page-numbers{
  border: 1px solid #ccc;
  border-radius: 5px;
  padding:0.6rem;
  color: #3f7fea;
  font-size: 1.5rem;
}
.current{
  color: #333;
}

.news-sab{
  background-color: #fff;
  margin:1.5rem;
  width: 15%;
  height: 400px;
}
.news-cale table{
  margin: 2rem auto;
  text-align: center;
}
.news-cale caption{
  font-size: 1.5rem;
  border-bottom: solid 3px #e5c046;
}
.news-cale a{
  color:#3f7fea;
  position:relative;
}
.wp-calendar-nav a{
  color:#3f7fea;
  position:relative;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0.3rem;
}
.news-cale nav{
  display: flex;
  justify-content: space-around;
}
.news-cale thead{
  font-size: 1.5rem;
}
.news-cale td{
  font-size: 1.5rem;
}
.news-cale span{
  font-size: 1.5rem;
  margin:0;
}
.pad{
  display: none;
}

.news-wrap{
  display: flex;
  flex-wrap:wrap;
  margin:2rem 5rem;
  justify-content:flex-start;
}
.news-wrap h1{
  font-size: 1.5rem;
}
.news-wrap h3{
  margin-top:1rem;
  padding:0;
  text-align: left;
}
.news-indexall{
  background-color: #fff;
  margin:1rem;
  width:55%;
}
.news-indexall h1{
  font-size: 1.3rem;
  padding:0.5rem;
  text-align: left;
}
.news-indexallimg{
  height: 200px;
  position: relative;
}
.news-indexall img{
  width: 100%;
  max-width: 300px;
  height: auto;
  padding: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.news-indexallh1{
  height: 150px;
}
.news-item{
  width:29%;
  margin: 2%;
  text-align: center;
  background-color: #ededed;
  border-radius: 10px;
  padding: 1%;
}
.news-item:hover{
  background-color: #ccc;
}
.news-item:not(:nth-child(3n+3)){
  margin:2%;
}
.news-item:nth-child(n+4){
  margin-top:30px;
}
@media only screen and (max-width: 1090px){
  .news-all{
    display: flex;
    flex-direction: column;
    margin:0;
  }
  .news-indexall{
    background-color: #fff;
    margin:1rem auto;
    width:85%;
  }
  .news-indexall h1{
    font-size:1rem;
    height: 5rem;
  }
  .news-indexall img{
    max-width: 180px;
  }
  .news-indexallimg {
    height: 150px;
  }
  .news-indexallh1{
    height: 100px;
  }
  .news-wrap{
    display: flex;
    flex-wrap:wrap;
    margin:1rem;
    justify-content:flex-start;
  }
  .news-sab{
    background-color: #fff;
    margin:1rem auto;
    width: 85%;
    height: 400px;
  }
  .news-cale table{
    width:50%;
    margin: 2rem auto;
    text-align: center;
  }
  .news-cale nav{
    margin:0;
  }
  .news-cale span{
    font-size: 1.5rem;
    margin-bottom:1rem;
  }
  .title-news{
    background-color: #fff;
    margin: 1rem;
    width: 95%;
  }
  .title-news h1{
    font-size: 1.5rem;
    padding:0;
    font-family: 'Mochiy Pop One';
    font-weight: lighter;
  }
  .title-news h3{
    margin:0 1rem 1rem 1rem;
  }

  .prev-news{
    margin: 0 4rem 2rem 4rem;
    font-size: 1rem;
  }
}
@media only screen and (max-width: 707px){
  .news-all{
    display: flex;
    flex-direction: column;
    margin:0;
  }
  .news-indexall h1{
    font-size:1rem;
    padding: 0 1rem;
    height: auto;
  }
  .news-indexall img{
    max-width:230px;
    padding: 1rem;
    height: auto;
  }
  .news-indexallimg{
    height: 210px;
  }
  .news-wrap{
    display: flex;
    flex-wrap:wrap;
    margin:1rem;
    justify-content:flex-start;
  }
  .news-wrap h3{
    font-size: 1rem;
    margin-top:0;
    margin-bottom:1rem;
    padding: 0.5rem 1rem;
    }
  .news-item{
    width:100%;
  }
  .news-item:nth-child(n+4){
    margin-top:30px;
  }
  .news-item:not(:nth-child(even)){
    margin:2%;
  }
  .page-numbers{
    font-size: 1rem;
  }
  .news-cale table{
    width:85%;
    margin: 2rem auto;
    text-align: center;
  }
  .news-cale nav{
    margin:0;
  }
  .news-cale span{
    font-size: 1.5rem;
    margin:0 0 1rem 0;
  }
  .title-news{
    background-color: #fff;
    margin: 1rem;
    width: 95%;
  }
  .title-news h1{
    font-size: 1rem;
    padding:0;
    font-family: 'Mochiy Pop One';
    font-weight: lighter;
  }
  .title-news h3{
    margin:0 1rem 1rem 1rem;
    font-size: 1rem;
  }
  .title-news p{
    margin:0 1rem 0 1rem;
    font-size: 1rem;
  }
  .title-news img{
    max-width:100%;
    width: 100%;
    margin:0;
  }
  .prev-news{
    margin: 0 1rem 2rem 1rem;
    font-size: 1rem;
  }
}