@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

@charset "utf-8";
/* CSS Document */

html,
html * {
  margin:0px;
  padding:0px;
  box-sizing: border-box;
  font-family:"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro, "メイリオ",Meiryo,Osaka, "ＭＳ Ｐゴシック",MS PGotic, "sans-serif";	
}



header {
	padding: 3px;
}

body{
	margin-left: auto;
	margin-right: auto;
	
}

main {
	margin-left: auto;
	margin-right: auto;
	
}


main > h1{
  display: flex;
  height: 10vh;
  justify-content: center;
  margin: 0;
  padding-top: 20px;
	
}

main > h2{
    display: flex;
    height: 10vh;
    justify-content: center;
    margin: 0;
    padding-top: 20px;
    padding-bottom: 5px;	
}







img{
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	margin-left: 0px;
	margin-top: 0px;		
}

footer {
	padding: 20px 30px;
	background-color: #A6EEF5;

}

  #footer01 .nav a:hover {
    color: orange;
  }




ul {
  list-style-type: none;
}



a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


table{
	border-collapse: collapse;
	width: 100%;
} 





/*メイン画像配置停止中*/




h1{
	font-size: 40px;
	font-weight: 200;
	margin-bottom: 10px;
	
}



h2{
    font-size: 24px;
    font-weight: 200;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}


h3{
	font-size: 22px;
    color: #1D3486;
    font-weight: bold;
	margin-bottom: 10px;
    text-align: center;
    
}

h4{
	font-size: 20px;
    font-weight: bold;
	margin-bottom: 10px;
	color: #1D3486;

}

h5{
	font-size: 18px;
	font-weight: 200;
	margin-bottom: 0px;
    
	
}

h6{
	font-size: 13px;
	font-weight: 200;
	margin-bottom: 20px;
	
}

h7{
	font-size: 12px;
	font-weight: 200;
	margin-bottom: 20px;
	
}



p{
    margin-bottom: 10px;
	align-items: stretch;

}



#logo {
  max-width:80%;
  display:block;
  margin:0 auto;

  
}


nav{
 width: 100%;
 height: 100px;
 position: relative;
 background: #ffffff;
 padding: 20px 20px 60px 20px;
 z-index: 20;/* 重なり順を指定*/
  
}

 #footer01 {
    text-align: center;
  }
 

  #footer01 .nav li a {
    padding: 12px 20px;
    text-align: left;
         color: #000000;


  }


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

#footer01 ul > li:first-child {
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
}
 
#footer01 ul > li + li {
    border-bottom:1px solid #000000;
}






#footer01 {
  position: relative;
  background: #ffffff;
}
 
#footer01 .nav a {
  display: block;
  padding: 0 10px;
  color: #000000;
}


figure.hover-parent {
　width: 250px;
　height: 175px;
　position: relative;
　margin-bottom: 30px;
　overflow: hidden;
}
figcaption.hover-mask {
　width: 250px;
　height: 175px;
　position: absolute;
　top: 0;
　bottom: 0;
　left: 0;
　right: 0;
　background: rgba(0,0,0,0.5);
　opacity: 1;
　color: #fff;
　display: flex;
　align-items: center;
　text-align: center;
　padding: 30px;
    　transition:all 0.6s ease;

    
}

#rightphoto-box {
  width: 32%;
  float: right;
  padding: 0.2em;
  font-size: 95%;
  font-weight: bold;
  line-height: 115%;
  text-align: center;
}



.small-r li {
    display: flex;
    font-size: 12px;
    text-align: center;
    
}



    .pic_frame {
      display: inline-block;
      text-align: center;
        
    }



.mt10 {
    margin-top: 10px;
    
}

.mb10 {
    margin-bottom: 10px;

}

.mb20 {
    margin-bottom: 20px;

}

.mb30 {
    margin-bottom: 30px;

}
.mlr10 {
	margin-right: 10px;
    margin-left: 10px;

}   



.img_line{
align-content: center;
    
}

 /* JQメイン画像 */
    .ph_ja_img {
      margin: 10px 0 10px 0;
      overflow: hidden;
      padding-top: 100%;
      position: relative;
    }
    
    .ph_ja_img img {
      -webkit-transform: translateY(-50%);
      -o-object-fit: cover;
      height: 100%;
      left: 0;
      object-fit: cover;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
    }
    
    /* サブ画像 */
    .ph_ja_imgWrapper ul {
      display: flex;
      justify-content: space-between;
      padding-left: 0;
      list-style: none;


    }
    
    .ph_ja_imgItem {
      cursor: pointer;
      aspect-ratio: 1 / 1;
      position: relative;
      width: 22.947%;
  
    }

   .ph_ja_imgItem2 {
      aspect-ratio: 3 / 1;
      width: 22.947%;
      text-align: left;
      display: flex;
      justify-content :space-around;
       
    }

  .ph_ja_imgItem3 {
      aspect-ratio: 1/ 1;
      width: 1px;
      text-align: left;
      display: flex;
      justify-content :space-around;
       
    }

 


    
    .ph_ja_imgItem  img {
      -webkit-transform: translateY(-50%);
      -o-object-fit: cover;
      border: 1px solid transparent;
      height: 100%;
      left: 0;
      object-fit: cover;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;

    }





 
    /* サブ画像にオレンジ */
    .ph_ja_imgItem.is_active  img {
      border: 1px solid #F79400;

    }




/* 見出し */

.ttl_line {
    font-weight: bold;
    padding-right: 0.5em;
	padding-left: 0.5em;
    padding-top: 0.3em;
	padding-bottom: 0.3em;
    margin-bottom: 10px;

	border-left: 10px double #4c9ac0;
	color: #494949;/*文字色*/
	background: #f4f4f4;/*背景色*/
	border-bottom: solid 3px #d7d7d7;/*下線*/    
    
}




.ttl_1 {
  font-weight: bold;
  padding: 0.3em 0.5em;
  border-left: 10px double #4c9ac0;
    
  color: #494949;/*文字色*/
       
}


.title {
  overflow: hidden;
  margin-bottom: 20px;
  padding-bottom: 50px;  
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  color: #aa8f7b;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.title.-visible,
.title.-visible span {
  transform: translate(0, 0);
}

/* 見出し終わり */




.ttl_background1 {
  font-weight: bold;
  background-color: #4c9ac0;
  color: #fff;
  padding: 0.5em 1em calc(0.5em - 6px);
  position: relative;
}

.ttl_background1::after {
  content: '';
  background-color: #4c9ac0;
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -6px;
  left: 0;
}

.ttl_background2 {
  font-weight: bold;
  background-color: #FF7D00;
  color: #fff;
  padding: 0.5em 1em calc(0.5em - 6px);
  position: relative;
}

.ttl_background2::after {
  content: '';
  background-color: #FF7D00;
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -6px;
  left: 0;
}

.ttl_background3 {
  font-weight: bold;
  background-color: #229111;
  color: #fff;
  padding: 0.5em 1em calc(0.5em - 6px);
  position: relative;
}

.ttl_background3::after {
  content: '';
  background-color: #229111;
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -6px;
  left: 0;
}


.background-green {
	position: relative;
	width: 300px;
	height: 300px;
	background: #56C500;
}
.background-orange {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 150px;
	background: #FF6701;
}

.pro-container { 
    margin:0 auto；
        
}



.pad10{
	padding: 10px 10px;
	
}

.pad10_10{
	padding:
    10px 10px 3px 10px;
	
}

.pad10_10_20{
	padding:
    10px 10px 20px 10px;
	
}



.pad0_10{
	padding:
    0px 10px 0px 10px;
    text-align: center;

}



.pad20{
	padding: 10px 20px;
	
}

.footer-text{
	font-size: 11px;
	margin-bottom: 20px;
    color: #000000;
    
}





.body{
	font-size: 16px;
	font-weight: 100;


}


.bread{
	font-size: 14px;
	font-weight: 10;


}

	

.button{
	border: 2px #ffffff solid;
	padding: 6px 20px;
    border-radius:30px;
	color: #ffffff;
	text-decoration: none;
	margin-top: auto;

}


.obox{
	color: #ffffff;
	padding: 30px 0px;
	width: 100%;
	text-align: center;
	background-color: #CC5517;
}



.nbox{
	color: #ffffff;
	padding: 30px 0px;
	width: 100%;
	text-align: center;
	background-color: #1D3486;

}


.bbox{
	color: #3B3535;
	padding: 5px 0px 5px 0px;
	width: 100%;
	text-align: center;
	background-color: #F5EFCA;


}



.whbox{
	color: #000000;
	padding: 0px 3px;
	width: 100%;
	text-align: left;
	margin: 3px;
	background-color: #ffffff;
    align-items: stretch;	

}



.img1 {
width: 48px;
	height: 48px;

}

.img2 {
width: 29px;
	height: 29px;

}

.img3 {
width: 158px;
	height: 39px;

}


/* --- カタログ埋め込みセクション --- */
.iframe-container {
    max-width: 1200px;
    margin: 0 auto 90px;
    padding: 0 4%;
    height: 550px;
}
.iframe-container iframe {
    border: 2px solid var(--navy-dark) !important;
}
		





/*スライド停止中*/
.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
    

}

/*ナビゲーション内稼働*/
.menu ul li a {
display:block;
  font-weight:bold;
padding: 1.5em;
border-bottom: 1px ;
  color:#333;
  text-decoration:none;

	
}


.menu ul li a:hover
{background-color:rgba(0,0,0,0.5);
color:orange;
list-style-type: none;

}



.menu{
  text-align:center;
  background-color:rgba(255,255,255,0.9);
  transition: .3s ease;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-115%);/*左に隠しておく*/
  z-index: 20;/* 重なり順を指定*/
	 width: 200px;
	 position: fixed;    /* bodyに対しての絶対位置指定 */


}


/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*中身を表示（右へスライド）*/
 position: fixed;    /* bodyに対しての絶対位置指定 */
 width: 200px;
 z-index: 30;/* 重なり順を指定*/

}

.scroll_lists {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 80vh;
}







/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 54px;
    height: 44px;
    cursor: pointer;
    right:15px;
	/* 囲み？ */
	 border: solid 2px #000; 
    background-color: rgba(255, 255, 255, 0.5);
    top: 30px;

}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 45px;
	right:3px;
    border-bottom: solid 4px #333;
    -webkit-transition: .35s ease-in-out;/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;/*変化の速度を指定*/
    transition: .35s ease-in-out;/*変化の速度を指定*/

}
 
.Toggle span:nth-child(1) {
    top:8px;

}
 
.Toggle span:nth-child(2) {
    top: 18px;

}
 
.Toggle span:nth-child(3) {
    top: 29px;


}
 


.Toggle.active span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);


}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);

}  

/* テーブル指定 */

.tb00 th,
.tb00 td{
  padding: 10px;
  border: solid 1px #ccc;
  text-align:center;
  box-sizing:border-box;
	
}
.tb00 th {

}




.tb01 th,
.tb01 td{
  padding: 10px;
  border: solid 1px #ccc;
  text-align:center;
  box-sizing:border-box;
}
.tb01 th {
  background: #000000;
  color: #fff;
}

.tb02 th,
.tb02 td{
  padding: 10px;
  border: solid 1px #ccc;
  text-align:center;
  box-sizing:border-box;
}
.tb02 th {
  background: #1A299C;
  color: #fff;
}


	

.style-item{	
	list-style-type: none;
	text-decoration: none;

}

.style-item ul li a {	
	text-decoration: none;
	color: #F41010;
	text-align: center;
	display: block;
	padding: 5px;	
	
}


.style-logo{
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 200px;
	float: left;
	margin-top: 0px;
}

.style-nav ul{
	list-style-type: none;
	
}

.style-nav ul li a {
	
	text-decoration: none;
	color: #548731;
	text-align: center;
	display: block;
	padding: 5px;	
	
}



.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}


.col{
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
}


.col_main{
    width: 83%;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}


.col_cata{
    width: 65%;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}


.col-md-half2{
	width: 50%;
	float: left;
	padding: 0px 20px 30px 10px;
}

.col-md-half3{
	width: 50%;
	float: left;
	padding: 0px 20px 30px 10px;
	align-content: stretch;	

}
	


.wrap{
 display: column;
	width: 100%;
}	

.wrap2{
 display: column;
	width: 100%;
}	




/* dt dl 変更 */


	


		.pagination-container{
			margin-top: 15px;
			padding-top: 40px;
			border-top: 1px dashed #ccc;
		}
		.pagination-container ul{
			width: 100%;
			display: flex;
			justify-content: center;
		}
		.pagination-container li + li{ margin-left: -1px; }
		.pagination-container a{
			padding: 10px 20px;
			display: block;
			color: #0076BF;
			border: 1px solid #ccc;
			text-decoration: none;
			background: #fff;
		}
		.pagination-container .navi-active a{
			font-weight: bold;
			background: #fafafa;
		}
		.pagination-container a:hover{
			color: #fff;
			background: #0076bf;
		}





.style-text2 {
 display: flex;
    align-content: stretch;	
}



.card-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0;
    gap: 20px;
    margin-right: 10px;
    margin-left: 10px;
		
}


.card {
  display: flex;
  flex-direction: column;
  width:  47%;
    margin: 0 auto;

}

.card-content {
  display: flex;
  flex-direction: column;

}

.card-text {
    flex-grow: 1;
    vertical-align: top;	
}



.table_info tr {
  border-bottom: 1px solid #b5b1b1;

}

.table_info th,
.table_info td {
  padding: 20px 0px;
  border: none;

}

.table_info th {
  width: 30%;
}



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

		
  .table_info th,
  .table_info td {
    width: 100%;
    display: block;
  }

  .table_info th {
    width: 80%;
  }

  .table_info td {
    padding-top: 0;
  }
	
	
}

	
/*タブレット用MAX*/

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

	
	.tb00 {
    width: 100%;
  }
  table.tb00 th,
  table.tb00 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
	
	  .tb00 tr:last-child{
    border-bottom: solid 1px #ccc;
  }
	
	
 
.tb01 {
    width: 100%;
  }
  table.tb01 th,
  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .tb01 tr:last-child{
    border-bottom: solid 1px #ccc;
  }
	
	.tb02 {
    width: 100%;
  }
  table.tb02 th,
  table.tb02 td {
    display: block;
    width: 100%;
    border-bottom:none;
  }
  .tb02 tr:last-child{
    border-bottom: solid 1px #ccc;
  }
	
	

	
	
 }
	
/*タブレット用*/
	
@media (min-width: 768px){
	
	
	
header:after{
    
    display:none;
  } 
  
		
	

	
body{
		max-width: 778px;
	}
	
	
	
  
nav{
 display: flex;

}
    
h3{
    text-align: left;
    
}
	
	
	
 .scroll_lists {
  scroll-snap-type: y mandatory;
  height: 80px;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}
/*スクロールバー非表示（Chrome・Safari）*/
.scroll_lists::-webkit-scrollbar{
  display:none;
}
	
	
	
	
	
    
    
	

.Toggle{
 display: none;

}
.menu{
 width: 100%;
  background-color: transparent;
  margin-top:0;
 -webkit-transform: translateX(0);
 transform: translateX(0);
 position: relative;



}
.menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
 list-style-type: none;


}
.menu ul li a{
 padding: 0 1em;
 border-bottom: none;



}
  
  .menu ul li a:hover
{
  background-color:transparent;


}
	
	
    
 .title {
padding-bottom: 50px;
margin-bottom: 20px;
     

}
    
    
	
.wrap{
  display: flex;
  justify-content: space-between;
	}
	


	.style-nav ul li {
		display: inline-block;
	}
	
	.style-nav ul {
		text-align: center;
	}
	
	.obox{
	color: #ffffff;
	padding: 30px 30px;
	width: 100%;
	text-align: center;
	margin: 1%;
	background-color: #CC5517;
	display: flex;
	flex-direction: column;
    align-items:center;
}



.nbox{
	color: #ffffff;
	padding: 30px 30px;
	width: 100%;
	text-align: center;
	margin: 1%;
	background-color: #1D3486;
	display: flex;
	flex-direction: column;
    align-items:center;


}
    
    
    .bbox{
	color: #3B3535;
	padding: 30px 30px;
	width: 100%;
	text-align: center;
	margin: 1%;
	background-color: #F5EFCA;
	display: flex;
	flex-direction: column;
    align-items:center;
    border-radius:30px;



}
    
	.button{
	border: 2px #ffffff solid;
	padding: 8px;
    border-radius:30px;
	color: #ffffff;
	text-decoration: none;
	margin-top: auto;
	width: 80px;
		
	}
    
    .pad0_10{
	padding:
    0px 10px 3px 10px;
    text-align: left;

}
	
	
	
h1{
	font-size: 30px;
	margin-bottom: 100px;
	
}
	
h2{
	font-size: 30px;
	margin-bottom: 20px;
	
	}
	
		
		
h3{
	font-size: 25px;
	margin-bottom: 10px;

	
}
h4{
	font-size: 20px;
	font-weight: 200;
	margin-bottom: 0px;
	
}
	


.col-md-half{
	width: 50%;
	float: left;
	padding: 0px 10px 30px 10px;
}
	

	
  .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
	
	


.ttl_line {
	font-weight: bold;
	padding-right: 0.5em;
	padding-left: 0.5em;
    padding-top: 0.2em;
	padding-bottom: 0.2em;
	border-left: 10px double #4c9ac0;
	color: #494949;/*文字色*/
	background: #f4f4f4;/*背景色*/
	border-bottom: solid 3px #d7d7d7;/*下線*/    
    
}
	
	

/*デスクトップ用*/
@media (min-width:1024px){

	body{
		/*max1800*/
		max-width: 1000px;
		 margin: 0 auto;
       position: relative;
	}
	
	
		ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
	

    
#footer01 {
 position: relative;
}
    
    #footer01 ul > li {
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
}
 
 
#footer01 .nav a {
  display: block;
  padding: 0 10px;
  color: #000000;
}

	 #footer01 .nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 0;

  }


    
    
	.col-md-45{
	width: 45%;
	float: left;
	padding: 0px 20px 10px 10px;
}
	
	
	
	
	.style-logo {
		float: left;
	}
	
	.style-nav {
		float: right;
	}
	
	.col-lg-qtr{
		width: 25%;


	}	
	  .card {
    width:23%;
          
  }


   .footer-text{
	font-size: 13px;
	margin-bottom: 20px;
    color: #000000;

}
    
    .pad10_m{
	padding: 10px 10px;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        
	
}
}