@import url(//use.fontawesome.com/releases/v5.7.2/css/all.css);

body {
  font-family: 'Noto Sans JP',"Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-family: 'Karla', sans-serif;
  line-height: 1.5;
  background: #fff;
  color: #000;
  font-weight: 300;
  overflow-x: hidden;
  margin: 0;
}

p {
  margin: 0.2em 0.5em 1.2em;
  font-size: 20px;
  color: #000;
  font-weight: 300;
  font-family: YuGothic, 'Noto Sans JP',"Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
  display: block;
  line-height: 32px;
}

h1, h2, h3, h4, h5, h6 {
  color: #5a5a5a;	
  font-family: YuGothic, 'Noto Sans JP',"Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
  font-weight: bold;
  margin: 5px 0 30px 0;
}
h2 {
  border-bottom: solid 4px #cce4ff;
  position: relative;
  margin-top: 15px;
  color: #000080;
}

h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 4px #5472cd;
  bottom: -3px;
  width: 20%;
}
h3 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
	padding-top: 10px;
	background-color: #F8F8FF;
	border-bottom: 3px solid #A0A0A0;
}

h3::before,h3::after {
	content: '';
	width: 50px;
	height: 3px;
	background-color: #6699FF;
}

h3::before {
	margin-right: 15px;
}
h3::after {
	margin-left: 15px;
}
h4 {
	font-size: 20px;
	font-weight: bold;
	background: linear-gradient(transparent 60%, #c8f1ff 60%);
	padding-left: 10px;
}
iframe {
    max-width: 100%;
}
@media screen and (max-width:770px){
h3 {
	font-size: 20px;
  }
h4 {
	font-size: 18px;
  }	
}
@media screen and (max-width:450px){
h3 {
	font-size: 15px;
  }
h4 {
	font-size: 13px;
  }
}
@media screen and (max-width:770px){
p {
  font-size: 18px;
  font-weight: 250;	
 }
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;	
 }
}
@media screen and (max-width:420px){
p {
  font-size: 15px;
  font-weight: 200;	
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;	
}
}

/*---------------------------------------------------------------------------
/*ヘッダーブロック（ロゴやメニューが入った最上段ブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: fixed;	/*ヘッダーを上部に固定する指定*/
	z-index: 90;
	left: 0px;			/*左からの配置場所の指定*/
	top: 0px;			/*上からの配置場所の指定*/
	width: 100%;		/*幅*/
	background: #fff;	/*背景色*/
	font-size: 13px;	/*文字サイズ*/
	height: 70px;		/*ヘッダーの高さ*/
	padding-top: 5px;
	border-bottom: 1.2px solid #999;
}
/*ロゴ画像*/
header #logo img {
	height: 50px;	/*高さ。上のheaderのheightと合わせる。*/
	margin: 0px 20px;
	float: left;	/*左に回り込み*/
	background: #ffff;	/*背景色*/
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar {
	float: left;
	background: #fff;
	position:relative;
	top: -20px;
	left: 0px;
	z-index: 10;
	display: block;
/*	
	padding: 0;
    margin: 0;
	box-sizing: inherit;
	-webkit-text-size-adjust: 100%;
	text-decoration: inherit;
    vertical-align: inherit;
*/	
}
/*メニュー１個あたりの指定*/
#menubar li {
	list-style: none;
	float: left;
	letter-spacing: 0.1em;
	border-left: 1px solid #c0c0c0;
}
#menubar li a, .ddmenu-title {
	display: block;
	text-decoration: none;
	color: #000;	/*文字色*/
	padding: 0px 15px;	/*上下、左右へのメニュー内の余白*/
	line-height: 50px;	/*行間。headerのheightと数字を合わせる。*/
}
/*マウスオン時の背景色*/
#menubar li a:hover {
	background: #0074ea !important;
	color:#fff;
}
/*ドロップダウンのマウスオン事*/
#menubar ul li.ddmenu-title:hover ul.ddmenu{
	animation-name: opa1;	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 0.4S;	/*アニメーションの実行時間。0.4秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/	
	visibility: visible;
}

/*ドロップダウンメニューの親メニューへの追加指定。基本指定は上の.ddmenu-titleにあります。*/
.ddmenu-title {
	padding-left: 40px;	/*アイコン分の余白を確保*/
	background: url(../images/arrow1.png) no-repeat 10px center / auto 25px;	/*アイコン画像の読み込み。最後の25pxは高さ指定。*/
}

/*小さい端末用メニューを非表示にする*/
#menubar-s,#menubar-s2,#menubar-s3 {
	display: none;
}
/*３本バーアイコンを表示させない*/
#menubar_hdr {
	display: none;
}

/*ドロップダウンメニュー（ddmenu）
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar ul.ddmenu {
	position: absolute;
	visibility: hidden;	
	z-index: 10;
	width: auto;
	margin-left: -60px;	/*.ddmenu-titleのpadding-leftと数字を合わせてマイナス記号をつける。*/
}

/*メニュー１個あたりの指定*/
#menubar ul.ddmenu li {
	float: none;
}
#menubar ul.ddmenu li a {
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.8は色が80%出た状態。*/
	border: 1px solid rgba(255,255,255,0.4);	/*線の幅、線種、色。255,255,255は白の事で0.4は色が40%出た状態。*/
	border-top: none;	/*上の線だけ消す*/
	color: #fff;	
}
/*１つ目のメニューへの追加指定*/
#menubar ul.ddmenu li:first-child a {
	border-top: 1px solid rgba(255,255,255,0.4);	/*上の線の指定*/
}

/*facebookやtwitterなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {
	float: right;	/*アイコンブロックを右に回り込み*/
	margin-right: 10px;	/*右側に空けるスペース*/
	position:relative;
	top: -15px;
}
/*アイコン１個あたりの設定*/
ul.icon li {
	display: inline-block;	/*横並びにさせる指定*/
	padding-top: 0px;		/*上に空ける余白。header内の上下の配置バランスをここでとって下さい。*/
}
/*アイコン画像の設定*/
ul.icon img {
	height: 55px;		/*画像の高さ*/
	margin-right: 10px;	/*画像同士の余白*/
}

/*画面幅1600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1600px){
header {	
    font-size:75%;
	}
.ddmenu-title li img{
	width:50%;
	}
}


/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューブロック全体*/
@media screen and (max-width:770px){
#menubar-s {
	display: block;
	overflow: auto;
	height: 100%;
	text-align: left;
	position: fixed;
	z-index: 100;
	top: 5px;
	width: 100%;
	background: rgba(0,0,0,0.8);	/*背景色*/
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	animation-name: opa1;		/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 0.5s;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
	font-size: 25px;	/*文字サイズ*/
	margin-top: 10px;
	display: none;	
}
	
/*メニュー１個あたりの設定と、子メニューの見出し。*/
#menubar-s ul li a,#menubar_hdr2,#menubar_hdr3 {
	display: block;
	text-decoration: none;
	list-style: none;
	padding-top: 10px;	/*上下、左右へのメニュー内の余白*/
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	color: #fff;		/*文字色*/
	margin-left: 10px;
}

/*PC用メニューを非表示にする*/
#menubar {
	display: none;
}

/*子メニュー
---------------------------------------------------------------------------*/
/*子メニューの見出しの追加。基本は上のブロックで設定しています。*/
#menubar_hdr2, #menubar_hdr3 {
	padding-left: 24px;	
}
/*子メニューメニューブロック全体*/
#menubar-s2, #menubar-s3 {
	display: block;
	margin-top: 10px;
	background: rgba(0,0,0,0.5);	/*背景色*/
	border: 1px solid #666;		/*上の線の幅、線種、色*/
	border-bottom: none;		/*下の線のみ消す*/
}

/*「＞」アイコン設定*/
#menubar_hdr2.close, #menubar_hdr3.close {
	background: url('../images/arrow2.png') no-repeat 0px 18px /auto 18px;
}
/*「＾」アイコン設定*/
#menubar_hdr2.open, #menubar_hdr3.open {
	background: url('../images/arrow3.png') no-repeat 0px 18px / auto 18px;
}

/*子メニュー１個あたりの設定*/
#menubar-s2 li a, #menubar-s3 li a  {
	color: #fff !important;	/*文字色*/
	padding: 5px;	/*余白*/
	border-bottom: 1px solid #666 !important;		/*下の線の幅、線種、色*/
}	
	
/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;
	z-index: 100;
	top: -3px;		/*上からの配置場所*/
	right: 3px;	/*右からの配置場所*/
	margin: 5px;
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: url(../images/icon_menu.png) no-repeat center top/50px;	/*背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: url(../images/icon_menu.png) no-repeat center bottom/50px;	/*背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

/*facebookやtwitterなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {
	margin-top: 1px;
	margin-right: 75px;	/*右側(メニューバー分)に空けるスペース*/
}

}



/*画面幅1440px以下の設定

@media screen and (max-width:1350px){
header {
	height: 120px;		/*ヘッダーの高さ*/
}
}
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*画面幅1010px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1010px){


/*ヘッダーブロック（ロゴやメニューが入った最上段ブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	background: #fff;	/*背景色*/
	text-align: center;
	top: -10px;
}
/*ロゴ画像*/
header #logo img {
	float: none;	/*左に回り込み*/
	margin-left: -7%;
}
#menubar{
	top: 0px;		
	}	
	
/*facebookやtwitterなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {
	float: none;
	margin-top: 20px;
	margin-left: 75px;
}
/*アイコン１個あたりの設定*/
ul.icon li {
	padding-top: 0px;
}
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.icon .pc { 
	display: block!important;
	width: 100%;
	border-radius: 5px;
	}
.icon .sp { 
	display: none!important;
	}
 
/* PC以外で見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 1010px) {
.icon .pc {
	display: none!important;
	}
.icon .sp { 
	display: block!important;
	height: 35px;
    margin-top: -15px;
	margin-left: 10px;
	}
	
	
}

/*---------------------------------------------------------------------------
スライダー部分
---------------------------------------------------------------------------*/
#slider {
    width: 100%;
    height: 70vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

#slider h1{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 93%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 4.2vw;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
/*	text-shadow: 2px 0 0 black,0 2px 0 black,-2px 0 0 black,0 -2px 0 black;*/
	text-shadow:  2px  2px 10px #777 ,-2px  2px 10px #777 ,2px -2px 10px #777 ,-2px -2px 10px #777;
}
@media only screen and (max-width: 770px) {
#slider h1{
	font-size: 5.0vw;
	}
}
@media only screen and (max-width: 420px) {
#slider h1{
	top: 60%;
	font-size: 6.7vw;
	}	
}
@media screen and (min-width: 481px) {
#s1,#s2,#s3 {
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}
#s1 {
 animation:s1 10s infinite;
}
#s2 {
animation:s2 10s infinite;
}
#s3 {
animation:s3 10s infinite;
}
@keyframes s1 {
      from { width:0%; }
      40% { width: 100%; }
      to { width:100%; }
}
/*
@keyframes s2 {
      0% { width:0em; }
      33% { width:0%; }
      50% { width:100%; }
      to { width:100%; }
}
*/
@keyframes s3 {
      0% { width:0%; }
      45% { width:0%; }
      85% { width:100%; }	
      to { width:100%; }
}
}

/*===================================
 パンくずリスト
===================================*/
.no-color-change{
	color: #fff!important;
}
.list{
	color: #fff!important;
}
.breadcrumb{
	margin: 0px;
	padding-left: 15px;
	background-color: #A4A4A4;
	overflow: hidden;
}
.breadcrumb li {
    display: inline;/*横に並ぶように*/
    list-style: none;
    font-weight: bold;/*太字*/
	color: #FFF!important;	
}

/*===================================
 全体
===================================*/
.explan_body{
  margin-top: 20px;
  width: 100%;
/*	background-image: url("../images/bg.jpg");
	background-repeat: repeat;
*/

}
.title-section{
	margin-left: 7.5%;
	margin-right: 7.5%;
}

/*===================================
 業務一覧リスト
===================================*/
.column_table {
  border-collapse: collapse;
  text-align: center;
  width: 85%;
/*  position: absolute;*/
  margin-left: 7.5%;
  margin-right: 7.5%;
}
.column_table td {
  background: #356bb3;
  color: #fff;
  font-size: 150%;
  padding: 10px;
  width: 30%;
  box-sizing:border-box;
  border: 1px solid #fff;
}
.column_table td img{
 width: 100%;
}

.column_table td a{
	color: #fff; 
	width:100%; 
	height:100%;
	display:block;
	border: 1px solid #FFF;
	font-size: 90%;
	text-decoration: none;
 }
 .column_table .select{
   background: #c0c0c0;
   color: #356bb3;
 }
 .column_table td :hover{
   background: #c0c0c0;
   color: #fff;
 }

@media only screen and (max-width: 1010px) {
.column_table td {
   display:block;
   width: 90%;
/*   margin: 5px 50px;*/
	}
}
@media only screen and (max-width: 770px) {
.column_table {
  width: 95%;
  margin-left: 5%;
  margin-right: 5%;
	}
}
@media only screen and (max-width: 420px) {
.title-section{
	margin-left: 3%;
	margin-right: 3%;
}
.column_table {
  margin-left: 3%;
  margin-right: 3%;
}	
.column_table td {
  font-size: 110%;
  margin: 8px 15px;	
	}
}

/* 4つ横並び */
.column_table2 {
  border-collapse: collapse;
  text-align: center;
  width: 85%;
/*  position: absolute;*/
  margin-left: 7.5%;
  margin-right: 7.5%;
}
.column_table2 td {
  background: #808080;
  color: #fff;
  font-size: 120%;
  padding: 10px;
  width: 25%;
  box-sizing:border-box;
  border: 1px solid #fff;
}
.column_table2 td img{
 width: 100%;
}
/*
.column_table2 td a{
   color: #fff; 
   width:100%; 
   height:100%;
   display:block;
}

.column_table2 .select{
  background: #c0c0c0;
  color: #356bb3;
}
.column_table2 td :hover{
  background: #c0c0c0;
  color: #fff;
}
*/
@media only screen and (max-width: 1010px) {
.column_table2 td {
   display:block;
   width: 85%;
   margin: 5px 50px;
	}
}

@media only screen and (max-width: 420px) {
.column_table2 td {
  font-size: 110%;
  margin: 8px 15px;	
	}
}

@media only screen and (max-width: 1010px) {
.explan_body{
	margin-top: 20px;
  }
}

/*カテゴリ部分*/

.containerframe {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.containerframe p{
	font-weight: bold;
	color: #364e96;
	font-size: 110%;
}
.containerframe div{
	margin-bottom: 10px;
	font-size: 110%;
}
.itemframe {
    border: 5px solid #364e96;
    padding: 10px;
    text-align: center;
	
	background-image: url("../images/bg-gray.png");
	background-size: cover;

}
.itemframe2 {
    padding: 10px;
    text-align: center;
	background-image: url("../images/bg-gray.png");
	background-size: cover;
}

.itemframe img {
    width: 100%;
    height: auto;
/*    max-height: 200px;*/
    object-fit: cover;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
 .containerframe {
    grid-template-columns: 1fr;
    width: 100%;
   }
}

.accordion-001 {
    max-width: 100%;
/*    background-color: #f2f2f2;*/
	border: none;
}

.accordion-001:not([open]) {
/*    margin-bottom: 7px;*/
}

.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
/*    padding: 1em 2em;*/
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.accordion-001 summary::-webkit-details-marker {
    display: none;
}

.accordion-001 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-001[open] summary::after {
    transform: rotate(225deg);
}

.accordion-001 itemframe3 {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-001[open] itemframe3 {
    transform: none;
    opacity: 1;
}

/* 説明部分 */
.section_item{
	clear: left;
	width:75%;
	margin-left: 10%;
	margin-right: 10%;
	padding: 10px;
	background-color: #fff;
	display: inline-block;
}
.section_item img{
	width: 95%;
	height: auto;
}
.section_item2{
	clear: left;
	width:100%;
	text-align: center;
	padding: 5px;
	background-color: #3366CC;
	display: inline-block;
}

@media only screen and (max-width: 450px) {
.section_item{
	width:95%;
	margin-left: 2.5%;
	margin-right: 2.5%;	
	}
.section_item2{
	width:95%;
	margin-left: 2.5%;
	margin-right: 2.5%;	
	}	
}

.caption{
    width: 100%; 
	font-size: 2.8vw; 
	font-style: italic; 
	font-weight: bold; 
	letter-spacing: .1em; 
	color: #fff; 
	text-align: center; 
	text-shadow: 3px 2px 0 #000; 
	background-color: #003399;
	padding: 10px;
}
.caption2{
    position: relative;
    overflow: hidden;
    padding: 0.5rem 1rem 0.5rem 120px;
    border: 2px solid #000;
    font-size: 2.2vw; 
	font-weight: bold;
    position: -webkit-sticky;
    position: sticky;
    top: 2em;
}
.caption2:before{
  position: absolute;
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  content: '';
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  background: #000;
}
.caption2 span {
  font-size: 2rem;
  position: absolute;
  z-index: 1;
    top: 50%;
    left: 3%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  display: block;
  padding-left: 16px;
  color: #fff;
}
.e-word{
  display:inline-block;	
  color: #888; 
  text-align: right; 
  font-size: 70%;
}
.box{
/*	
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #EAEAEA calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #EAEAEA calc(100% - 1px));
*/	
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;

  /* 以下任意のスタイル */
  padding: 20px;	
}

@media only screen and (max-width: 768px) {
.caption{
	font-size: 3.5vw;
	}
.caption2{
	font-size: 3.5vw;
	}	
}

.ph_area{
	object-fit: contain;
	width: 40%;
	float: left;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	overflow: hidden;
	transition-duration: 0.5s;
}
.ph_area img{
	object-fit: contain;	
	width: 90%;
	height: auto;
    display: block;
    margin:auto;
}
.ph_area:hover img{
  transform: scale(1.05);
  transition-duration: 0.5s;
  filter: drop-shadow(5px 5px 5px rgba(160, 160, 160, 0.9));
}
.photo_note{
    display:inline-block;	
}
.te_area{
	float: left;
	width: 58%;	
	padding-left: 15px;
	padding-top: 15px;
	padding-bottom: 15px;	
}
/*
.te_area p span{
	font-size: 115%;
	font-weight: bold;
}
*/
.ph_area_only img{
	object-fit: contain;	
	width: 85%;
	height: auto;
    display: block;
    margin: auto;
}
.two-piece{
	width: 48%;
	margin: 3px;
	padding: 3px;
	float: left;
/*	text-align: center;*/
	text-align: left;
	box-sizing: border-box;
}
.title-section a:hover{
    opacity: 0.8;
	border: 3px solid #c0c0c0;
}
.two-piece img{
    display:inline-block;
	width: 90%;	
	height: auto;
}
@media only screen and (max-width: 1200px) {
.two-piece img{
    width:85%;
	height: auto;
 }	
}

@media only screen and (max-width: 770px) {
.two-piece{
	width: 95%;
	clear: both;
  }
}

.three-piece{
	width: 31%;
	margin: 5px;
	padding: 5px;
	float: left;
	text-align: center;
}
.three-piece img{
    display:inline-block;
	width: 90%;	
}
@media only screen and (max-width: 1200px) {
.three-piece img{
    width:90%;
 }	
}

@media only screen and (max-width: 770px) {
.three-piece{
	width: 100%;
	clear: both;
  }
}

/*== 親要素からのはみ出し解除用 ==*/
.clear{
	clear: both;
}

 .tbl-r02 {
	box-sizing:border-box;
    width: 100%;
  }
.tbl-r02 th {
  background: #f0f0f0;
/*  border: solid 1px #ccc;*/
  color: #000;
  padding: 10px;
  width: 200px;	
}
.tbl-r02 td {
  background: #FAFAFA;	
　border: solid 1px #ccc;
  padding: 10px;
}
.tbl-r02 td img{
  width: 70%;
  margin: 0 10%;
}
@media screen and (max-width: 780px) {
  .last td:last-child {
/*    border-bottom: solid 1px #ccc;*/
    width: 100%;
  }
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
.tbl-r02 td img{
  width: 95%;
  margin: 0 2%;
}	
}

/*
dl {
    border-top: 1px solid #000;
	text-align: center;	
}
.dl_last{
	border-bottom: 1px solid #000;
}
dt {
	padding-top: 15px;
	float: left;
	clear: left;
	width: 20%; 
	height: 3.6em;
	font-weight: bold;
	display: table-cell;
	background-color: #DCDCDC;
}
dd {
	padding: 2px 5px;	
	text-align: left;
	height: 3.6em;	
	display: table-cell;
}
*/
.btn_style{
	padding-top: 30px;
	padding-bottom: 30px;	
	margin-left: 45%;
	clear: both; 	
	width: 100%;
}
a.btn{
	overflow: auto;
	border-radius: 5px;
	padding: 15px;
	color: #fff;
	background-color: #1E90FF;
	text-decoration: none;
}
a.btn:hover{
	color: #fff;
	background-color: #708090;
	text-decoration: none;
}

.btn_entry{
	text-align: center;
    height: auto;
	margin: 0 auto;
}
.btn_entry_child{
    background: #0080eb;
	font-size: 1.8em;
    color: #fff!important;
	display: inline-block;
    padding: 10px 80px 10px 80px;
}
a.btn_entry_child{
    color: #fff!important;
    text-decoration: none;
}
a.btn_entry_child:hover{
    color: #fff!important;
	background-color: #708090;
}

@media only screen and (max-width: 770px) {
.ph_area{
	width: 100%;
	margin: 0px;
	padding: 0px;	
 }
.te_area{
	width: 100%;
	margin: 0px;
	padding: 0px;
 }
.ph_area_only{
	width: 100%;
	margin: 0px;
	padding: 0px;	
 }	
.te_area dt,.te_area dd{
	font-size: 80%;
}	
.btn_style{
	margin-left: 25%;
 }
}
/*
@media screen and (max-width: 420px) {
.te_area dt {
	clear: left;
	float: left;
	width: 100%;
	height: auto;
	padding: 5px;
}
.te_area dd {
	margin-left: 10%;
　}
}
*/
/* 写真無しコンテンツ */
.te_area_only{
	text-align: left;
	width: 100%;
	margin-left: 0px;	
}

/* 表のヘッダーを固定 */
#table01,#table02{
  border-collapse: collapse;	
  width: 95%;
  margin: 5px;
  word-break: break-all;
  word-wrap: break-all;
  table-layout: auto;
}
#table01 th, #table01 td {
  border: 1px solid #000;
/*
	font-family:'Noto Sans CJK JP','游ゴシック','Osaka','Noto Sans CJK JP';
  width: 20%;
*/
  text-align: center;

  background-color: #fff;
  min-width: 130px;
  padding: 10px;
  height: 60px;
  word-break: break-all;
  word-wrap: break-all;
}
#table02 th {
  border: 1px solid #fff;	
/*  font-family:'Noto Sans CJK JP','游ゴシック','Osaka','Noto Sans CJK JP';	*/
  text-align: center;
  width: 15%;
  min-width: 130px;
  padding: 10px;
  height: 60px;
}
#table02 td {
  border: 1px solid #000;	
/*  font-family:'Noto Sans CJK JP','游ゴシック','Osaka','Noto Sans CJK JP';	*/
  text-align: left;
  width: 40%;
  min-width: 130px;
  padding: 10px;
  height: 60px;
}
#table01 th,#table02 th {
  background-color: #f0f0f0;
}

#table01 .head,#table02 .head {
  background-color: #f0f0f0;
}

/* tab */
@media only screen and (max-width: 768px) {
  #table01,#table02 {
	font-size: 80%;  
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }
#table02 th{	
  padding: 3px;	
}	
#table02 td{
  padding: 3px;	
}	
 #table01 .fixed,#table02 .fixed  {
    position: sticky;
    left: 0;
	z-index: 1;
 }
  #table01 .fixed:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 100%;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
  }
#table01:after,#table02:after {
content: " 表は横へスライドしてください";
}
	
}
/*===============
   Googleマップ部分
===============*/
.GMap iframe{
	width: 80%;    
	height: 350px;
	border: 0;
	margin-left: 7.5%;
	margin-right: 7.5%;	
}


/*===============
   フッター部分
===============*/
#footer {
  clear: both; 	
  position: relative;
  margin-top: 0px;
  color: #fff;
}
#footer a {
  text-decoration: none;
  color: #3366CC;
}
#footer a:hover {
  text-decoration: underline;
}
#footer .primary {
  padding: 40px 20px;
  background: #D3D3D3;
  color: #3366CC;	
}
#footer .primary .flex {
  display: flex;
}
#footer .primary .flex .left{
  width: 40%;
}
#footer .primary .flex .right{
  display: flex;
  width: 60%;
  justify-content: flex-end;
}
#footer .secondary {
  display: flex;
  padding: 40px 20px;
  background: #3366CC;
}
.sitenavi a{
  color: #fff!important;
}
@media screen and (max-width: 767px) {
  #footer .primary {
    padding: 20px 20px;
/*    background: #333;*/
    background: #D3D3D3;
  }
  #footer .primary .flex {
    display: block;
  }
  #footer .primary .flex .left{
    width: 100%;
  }
  #footer .primary .flex .right{
    width: 100%;
    display: block;
  }
  #footer .secondary {
    display: block;
    padding: 20px 20px;
  }
}

/* logo */

#footer .logo {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 26px;
  font-weight: bold;
}
@media screen and (max-width: 800px) {
  #footer .logo img{
    width: 90%;  
  }	
}
@media screen and (max-width: 767px) {
  #footer .logo {
    font-size: 16px;  
  }
}

/* address */

.address {
  margin: 10px 0 0;
  padding: 0;
  color: #3366CC;
}

@media screen and (max-width: 767px) {
  .address {
    font-size: 14px;
  }
}

/* navi */

.navi-section {
  display: flex;
  flex-direction: column;
  width: 25%;
  margin-left: 20px;
}
#footer .parent {
  margin: 0 0 16px 0;
  padding: 0;
  font-weight: bold;
}
#footer .navi {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .navi li {
  margin: 8px 0 0 0;
  padding: 0;
}
#footer .navi li:first-child {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .navi-section {
  display: block;
  width: 100%;
  margin: 20px 0 0;
}
#footer .parent {
  font-size: 18px;
  margin: 25px 0 10px;
}
  #footer .navi {
    font-size: 13px;
    padding-bottom: 5px;
/*    border-bottom: 1px solid #444;*/
    border-bottom: 1px solid #3366CC;	  
  }
  #footer .navi li {
    border-top: 1px solid #3366CC;	  
    padding: 15px 0 5px;
    margin-top: 10px;
    font-size: 15px;
  }
}

/* sns-navi */

#footer .sns-navi {
  margin: 15px 0 0;
  padding: 0;
}
#footer .sns-navi li {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0;
  font-size: 20px;
}
#footer .sns-navi li:last-child {
  margin-right: 0;
}
/*
.fab fa-twitter{
  background-image:url("../../images/twitter.png"); 
}
.fab fa-youtube{
  background-image:url("../../images/youtube.png"); 
}
*/
@media screen and (max-width: 767px) {
  #footer .sns-navi {
    margin: 20px 0 0;
    padding: 0;
  }
  #footer .sns-navi li {
    margin: 0 20px 0 0;
    padding: 0;
    font-size: 18px;
  }
}

/* sitenavi */

#footer .sitenavi {
  width: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .sitenavi li {
  display: inline-block;
  margin: 0 0 10px 20px;
  padding: 0;
}
#footer .sitenavi li:first-child {
  margin-left: 0;
}

@media screen and (max-width: 767px) {
  #footer .sitenavi {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }
}

/* copyright */

#footer .copyright {
  width: 50%;
  margin: 0;
  padding: 0;
  text-align: right;
  color: #fff;
}
@media screen and (max-width: 767px) {
  #footer .copyright {
    width: 100%;
    margin: 20px 0 0;
    text-align: center;
    font-size: 12px;
  }
}


/*========================
ページトップアイコン css
========================*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#0080eb;	
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}
@media screen and (max-width:770px) {
#page-top a{
	font-size:0.9rem;
	}
}
#page-top a:hover{
	background: #777;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:80px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/

#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/

#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}


/*== その他部分 ==*/
.container{
    display: -webkit-flex; /*safari*/
    display flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
	text-align: center;
	width: 100%;
/*	
	margin-left: auto;
	margin-right: auto;
*/	
	margin-left: 70px;
}
.row{
	width: 31%;	
	margin: 5px;
    background-color: #F5F5F5;
	border: 1px solid #c0c0c0;
}
.row .coating_title{
    background-color: #3366FF;
	color: #fff;
	width: 100%;
	font-size: 1.5em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.row p{
	margin: 10px;
}
@media screen and (max-width:1000px) {
.row{
	width: 45%;		
	}
.row p{
	font-size: 100%;
  }	
}

@media screen and (max-width:650px) {
.container{
 margin-left: 5px;
 }
.row{
	width: 95%;	
	margin: 5px;	
 }
}

/*=== 横スライド部分 ===*/
.animate-box{
  opacity: 0;
  transition: opacity 1s,transform 0.8s;	
}
.animate-box_fadein{
  opacity: 1;
  animation: anim 1s;	
/*  transform: translateX(0);*/
}
.animate-box2{
  opacity: 0;
  transition: opacity 1s,transform 0.8s;	
}
.animate-box2_fadein{
  opacity: 1;
  transform: translateX(0);
  animation: anim 1.5s;
}
.animate-box3{
  opacity: 0;
  transform: translateX(0);
  transition: opacity 1s,transform 0.8s;	
}
.animate-box3_fadein{
  opacity: 1;
  animation: anim 2s;
}
.animate-box_fadeinleft{
  opacity: 1;
  animation: anim 1s;
}
.animate-box4{
  opacity: 0;
  transition: opacity 1s,transform 0.8s;	
}
.animate-box4_fadein{
  opacity: 1;
  animation: anim2 1s;	
/*  transform: translateX(0);*/
}
@keyframes anim {
  0% {
  transform: translateX(-200px);
  }

  100% {
  transform: translateX(0px);
  }
}
@keyframes anim2 {
  0% {
  transform: translateY(100px);
  }

  100% {
  transform: translateY(0px);
  }
}
/*=== 以下、下階層ページのCSS ===*/
.title-section ul{
	list-style-position: inside;
	font-size: 120%;
	list-style-type: disc;
	list-style-position: outside;
	padding: 20px 20px 10px 40px;
}
.title-section ul li {
   list-style:none;
   text-indent: -1em;
   padding-left: 1em;
}
/*
.section_item ul {
   padding-left:0;
}
*/
.section_item ul li {
   list-style:none;
   text-indent: -1em;
   padding-left: 1em;
}
/*
.title-section img{
	width: 70%;
}
*/
.topimage img{
	width:100%; 
	height:200px ;
	object-fit: cover;	
}
.topimage{
   position: relative;	
}
/*=========== 第３階層以下TOPの文面 ===========*/
.topword{
	color: #fff;
/*	font-size: 250%;*/
	font-size: 3vw;	
	text-shadow:  2px  2px 10px #777 ,-2px  2px 10px #777 ,2px -2px 10px #777 ,-2px -2px 10px #777;
	z-index: 2;
	position: absolute;
	top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -10%) ;
}
@media screen and (max-width:770px) {
.topword{
	font-size: 5.5vw;	
	}
}
@media screen and (max-width:450px) {
.topword{
	font-size: 7vw;
	top: 60%;
	}
}


.service_explan_body{
    margin: 10px 0px;
    width: 100%;	
}
.service_te_area_only{
	clear: left
	text-align: left;
	width: 100%;
	margin-left: 0px;	
}
#service_1 ,#service_2 ,#service_3 ,#service_4 ,#service_5 ,#service_6 ,#service_7 ,#service_8,#service_9{
	background-image: url('../images/bg2.jpg'); 
	background-size: cover; 
	width: 100%;
	height: 100px;
	text-align: center; 
	overflow: hidden;
}
#service_1 h2,#service_2 h2,#service_3 h2,#service_4 h2,#service_5 h2,#service_6 h2,#service_7 h2,#service_8 h2,#service_9 h2{	
	color: #fff; 
	text-shadow: 2px 0 8px black; 
	padding-top: 35px;
	font-size: 150%;
}
.service_menu{
	background-color: aliceblue;
	clear: left;
	padding: 50px 0px;
}
/*
.service_menu .column_table{
	width: 70%;
	margin-left: 11%;
}
*/
/*== 動画再生部分 ==*/
.movie{
	/*background-color: #FFFFF0;*/
	border: double #C0C0C0;
	width: 100%;
	padding: 25px 0px;
	text-align: center;
}
.movie p{
    width: 85%;
    margin-left: 7.3%;
    margin-right: 7.5%;
    font-size: 150%;
    font-weight: 400;
    padding: 1rem 2rem;
    color: #fff;
    background: #356bb3;
    -webkit-box-shadow: 5px 5px 0 #0552b3;
    box-shadow: 5px 5px 0 #0552b3;

}
.movie video{
    width: 85%;	
}
@media screen and (max-width:770px) {
.movie{
	padding: 40px 0px;
 }
.movie p{
    width: 95%;	
    font-size: 120%;
    margin-left: 2.1%;
    margin-right: 2.6%;
 }
.movie video{
    width: 95%;
	margin: 0;
 }	
}
/*================
金型メンテナンスcss
================*/

.step{
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    color: #000;/*文字色*/
	font-size: 150%;
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #7db4e6;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/	
}
/***ステップバーデザイン4***/
.step-wrap {
	width: 100%;
	margin-left: 7.5%;
	margin-right: 7.5%;
	counter-reset: count;
	margin: 2em 0;
	position: relative;
	clear: both;
   }
 .step-content {
	margin-left: 7.5%;
	margin-right: 7.5%;	
	padding: 1em 0 1.3em 2.5em;
	position: relative;
	clear: both;
   }
 .step-content::before {
	content: "";
	display: block;
	width: 65px;
	height: 65px;
	background: #4682B4;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: -2px;
   }
 .step-content::after {
	content: "";
	display: block;
	height: calc(100% - 65px);
	border-left: solid 2px #ddd;
	position: absolute;
	top: 65px;
	left: 10px;
   }
 .step-label {
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	position: absolute;
	top: 9px;
	left: 14px;
	clear: both;
   }
 .step-label::after {
	counter-increment: count;
	content: counter(count);
	position: absolute;
	font-size: 30px;
	top: 8px;
	left: 6px;
   }
 .step-title {
	font-weight: bold;
	font-size: 120%;
	margin-left: 1.5em;
	/*background-color: #ADD8E6;*/
	background: linear-gradient(90deg, rgba(173,216,230,1), rgba(255,255,255,1) 85%);
   }
 .step-body {
	margin-top: 2em;
	padding: 0 1em 1em;
	border-bottom: dotted 2px #ddd;
	overflow: auto;
   }
/*
 .step-body img{
	width: 90%;
 }
*/
 .step-wrap > :last-of-type::after {
	display: none;
 }
 .okng{
	width: 90%;
 }
 .ng_word{
	background-color: #FF6666; 
	padding: 10px 60px;
	text-align: center;
 }
 .ok_word{
	background-color: #87CEFA; 
	padding: 10px 60px;
	text-align: center;	
 }
 .arrow{
	display: block;
	width: 30px;
	height: 30px;
	border-top: solid 3px #697b91;
	border-right: solid 3px #697b91;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);		
 }
   
/***ステップバーデザイン４***/

/***事業内容部分***/

.business {
	background-image: url('../images/bg_city.jpg');
  /*  background-attachment: fixed;*/
	position: -webkit-sticky;
	position: sticky;		
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;	
	width: 100%; 		
	opacity: 0.9;"	
  }
  
  /* --------------------------------------------------------
	  container2
  -------------------------------------------------------- */
  /* --------------------------------------------------------
	  conts
  -------------------------------------------------------- */
  
  .contsAreaL,.contsAreaR {
	  position: relative;
	  width: 1150px;
	  margin: 0 auto;
	  padding-left: 10px;
  }
  
  .textAreaL {
	  position: absolute;
	  top: 15px;
	  left: 10px;
	  text-align: left;
  }
  
  .textAreaR {
	  position: absolute;
	  bottom: 80px;
	  right: 10px;
	  text-align: right;
  }
  
  .numTextL,.numTextR {
	  font-family: 'Courgette', cursive;
	  font-size:50px;
	  color: #2B7EFF;
	  position: relative;
	  margin: 0 0 20px 30px;
	  display: block;
	  line-height: 1;
	  text-shadow:  2px  2px 5px #fff ,-2px  2px 5px #fff ,2px -2px 5px #fff ,-2px -2px 5px #fff;
  }
  
  .numTextR{
	  margin-right: 20px;
  }
  
  .numTextL:after {
	  content: '';
	  width: 100px;
	  height: 10px;
  /*	
	  background: url(../img/num_line.png) no-repeat top center;
  */
	  position: absolute;
	  bottom: -5px;
	  left: 0;
  }
  
  .numTextR:after {
	  content: '';
	  width: 100px;
	  height: 10px;
  /*	
	  background: url(../img/num_line.png) no-repeat top center;
  */
	  position: absolute;
	  bottom: -5px;
	  right: 0;
  }
  
  .textArea_inner {
	   padding: 30px;
	   -moz-box-sizing: border-box;
	   -webkit-box-sizing: border-box;
	   -o-box-sizing: border-box;
	   -ms-box-sizing:border-box;
	   box-sizing: border-box;
	  /* background-color: #FFF */
	   background-color: rgba(0,0,0,0.25);
  }
  
  .textArea_inner h2 {
	  font-size: 24px;
	  color: #e4007f;
	  margin-bottom: 20px;
  }
  
  .textArea_inner p {
	  color: #fff;
  }
  
  .contsAreaL img {
	  width:600px;
	  float: right;
	  padding-bottom: 100px;
  }
  
  .contsAreaR img {
	  width: 600px;
  }
  
  .space {
	  clear: both;
	  padding: 40px 0px 20px;
  }
  
  hr.heartLine {
	  border-top: 4px double #ffd5d5;
	  text-align: center;
  }
  hr.heartLine:after {
	  content: '\002665';
	  display: inline-block;
	  position: relative;
	  top: -15px;
	  padding: 0 10px;
	  background: #fff;
	  color: #ffd5d5;
	  font-size: 18px;
  }
  
  /* --------------------------------------------------------
	  ipad pro
  -------------------------------------------------------- */
  
  @media screen and (max-width: 1200px) {
	  .contsAreaL,.contsAreaR {
		  width: 95%;
	  }
  }
  /* --------------------------------------------------------
	  ipad
  -------------------------------------------------------- */
  
  @media screen and (max-width: 768px) {
	  .contsAreaL,.contsAreaR {
		  width: 90%;
	  }
	  .textAreaL,.textAreaR {
		  position: static;
		  text-align: left;
	  }
	  .numTextL,.numTextR {
		  font-size:30px;
		  margin: 0 0 20px 0px;
	  }
	  .numTextL:after,.numTextR:after {
		  left: 0;
	  }
	  .textArea_inner {
		   padding: 10px 0;
		   background-color:rgba(0,0,0,0) ;
		   color:#000;		
	   }
	  .textArea_inner p {
		   color: #000;
	   }
	  .contsAreaL img,.contsAreaR img {
		  width: 100%;
	  }
  }
  /* --------------------------------------------------------
	  mobile
  -------------------------------------------------------- */
  
  @media screen and (max-width: 480px) {
	  .contsAreaL,.contsAreaR {
		  width: 100%;
	  }
	  .textAreaL,.textAreaR {
		  position: static;
		  text-align: left;
	  }
  /*	
	  .textAreaL,.textAreaL textArea_inner {
		  background: #E6E6FA;
	  }	
	  .textAreaR,.textAreaR textArea_inner{
		  background: #F0FFF0;		
	  }
  */	
	  .numTextL,.numTextR {
		  font-size:20px;
		  margin: 0 0 20px 0px;
	  }
	  .numTextL:after,.numTextR:after {
		  left: 0;
	  }
	  .textArea_inner {
		   padding: 10px 0;
	   }
	  .contsAreaL img,.contsAreaR img {
		  width: 90%;
	  }
  }
  .container2 {
	  width: 100%;
	  margin: 5px auto;
  }
  
  /* info */
  
  .info{
	  position: relative;
	  padding: 50px 0 50px 0;
	  /*margin: 0 0 100px 0;*/	
	  width:85%;
	  opacity: 0.93;	
	  margin-left: auto;
  }
  
  @media screen and (max-width:840px) {
  .info{
	  margin:0;
	  padding: 50px 0;
	  }
  }
  
  .info:after{
	  position: absolute;
	  z-index: -1;
	  content:'';
	  top:10px;
	  left:-10%;
	  width:120%;
	  height: 400px;
  /*	background: #F0FFF0;*/
	  background: linear-gradient(-90deg,#E6E6FA, #ffffff);	
	  transform: rotate(-1deg);
  }
  
  .info2{
	  position: relative;
	  padding: 50px 0 50px 0;
	  /*margin: 0 0 100px 0;*/ 
	  width:85%;
	  opacity: 0.93;	
  }
  
  @media screen and (max-width:840px) {
  .info2{
	  margin:0;
	  padding: 50px 0;
	  }
  }
  
  .info2:after{
	  position: absolute;
	  z-index: -1;
	  content:'';
	  top:10px;
	  left:-10%;
	  width:120%;
	  height: 400px;
  /*	background: #E6E6FA;	*/
	  background: linear-gradient(90deg,#87CEFA, #ffffff);	
	  transform: rotate(1deg);
  }


/*===================================
項目選択のためのcss
===================================*/
.mold_list {
	text-align: center;
    width: 85%;	
	left:7.5%;
	right:7.5%;	
}
/*
.service_explan_body li{
	float: left;
	list-style: none;
    position: relative;
    padding: 1.5rem 2rem;
	background-color: #fff;
    border-bottom: 3px solid #000;
    background: #fff;	
}
.service_explan_body li:before{
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}
.service_explan_body li:after{
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
*/
.service_explan_body .section_item{
	clear: left;
}

/*=== アコーディオンメニュー(活用事例) ===*/
details {
  box-sizing: border-box;
  clear: both;
  border: 1px solid #ccc;
  width: 95%;
  display: block;
  margin: auto;	
}
details:not(:last-child) {
  margin-bottom: 20px;
}
/**
 * list-style: none; ←デフォルト三角削除（Chrome非対応）
 * cursor: pointer; ←カーソルをポインターに
**/
details summary {
  list-style: none;
  cursor: pointer;
  padding: 20px;
  background: #003f77;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}
/**
 * Chrome用のデフォルト三角削除
**/
details summary::-webkit-details-marker {
  display: none;
}
/**
 * Font Awesomeのプラスアイコン使用
**/
details summary::before {
/*  font-family: FontAwesome;
  content: '\f067';*/
  font-family: "Font Awesome 5 Free";
  content: '\f067';
  margin-right: 20px;
}
/**
 * アコーディオンがオープン時はマイナスアイコンに変更
**/
details[open] summary::before {
  content: '\f068';
}

details p {
  margin: 0;
  padding: 20px;
  padding-left: 2.5em;
  text-indent: -0.6em;
}

.faq-red{
  color: red;
}

/*== 研究開発　特許部分 ==*/
.PlatBtn{
  text-align: center;
}
.PlatBtn img{
  width: 300px;	
  height: auto;
  border: 1px solid #000;
  padding: 5px;
}

/*== 研究開発 ブルーレーザー　吹き出し部分 ==*/
.arrow_box{
    position:relative;
    width:80%;
    background:#1E90FF;
    padding:10px;
    text-align:center;
    color:#FFFFFF;
    font-size:1.6vw;
    font-weight:bold;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
.arrow_box:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(30,144,255, 0);
    border-top-width:40px;
    border-bottom-width:34px;
    border-left-width:25px;
    border-right-width:25px;
    margin-left: 40px;
    border-top-color:#1E90FF;
    top:100%;
    left:50%;
}
  @media screen and (max-width:770px) {
.arrow_box{
    font-size:2.5vw;	
 }
.arrow_box:after{
    border-left-width:20px;
    border-right-width:20px;
    margin-left: 50px;	
 }
}

/*新着情報
=============================================================*/
.news_top{
  display:flex;
}
.news_top .date{
  font-weight: bold;
}
.news_top .orange{
  padding: 1px 15px;
  color: #fff;
  background: #FF9900;
}
.news_top .blue{
  padding: 1px 15px;
  color: #fff;
  background: #87CEFA;	
}
.news_top .green{
  padding: 1px 15px;
  color: #fff;
  background: #094;	
}
.news_title{
　color: #000;
  font-size: 125%;
  padding-bottom: 0px;
  border-bottom: 3px solid #4169E1;
}
.news_title p{
  font-weight: bold;
  padding-bottom: 0px;
  margin-bottom: -2px;
}
.news_contents{
  padding-top: 5px;
  margin-bottom: 5px;
  border-bottom: 1px dotted #000; 	
}
.news_contents p{
  padding-top: 8px;	
}

/*問い合わせボタン*/
.inquiry{
  position: relative;
  margin: 40px auto 70px;
  text-align: center;
  z-index: 1;
}
.btn-style{
  all: initial;
  width: 80%;
}
a.btn-radius-solid {
  color: #000;
  font-weight: bold;
  font-size: 130%;
  text-decoration: none;
  margin: 0 auto;
  padding: 25px 80px;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%);
  border-radius: 45px;
  border-bottom: 4px solid #708090;
  border-right: 3px solid #708090;
}

a.btn-radius-solid:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(bottom, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to top, #f1e767 0%, #feb645 100%);
  color: #808080;
  border-bottom: 2px solid #708090;
  border-right: 1px solid #708090;
}

a.btn-radius-solid2 {
  color: #000;
  font-weight: bold;
  font-size: 100%;
  text-decoration: none;
  margin: 0 auto;
  padding: 10px 50px;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to bottom, #f1e767 0%, #feb645 100%);
  border-radius: 45px;
  border-bottom: 4px solid #708090;
  border-right: 3px solid #708090;
}

a.btn-radius-solid2:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#f1e767), to(#feb645));
  background: -webkit-linear-gradient(bottom, #f1e767 0%, #feb645 100%);
  background: linear-gradient(to top, #f1e767 0%, #feb645 100%);
  color: #808080;
  border-bottom: 2px solid #708090;
  border-right: 1px solid #708090;
}

 @media screen and (max-width:770px) {
.btn{
  width: 80%;
  text-align: center;
	 }
a.btn-radius-solid {
  font-size: 95%;
  padding: 15px 35px;
  border-radius: 35px;
     }
}

.skill{
/*
 background:linear-gradient(to right,#FFFFE0, #F5F5F5,0.8);
 background:linear-gradient(to right,rgb(255,255,224,0.8), rgb(255,255,255,0.8));
*/
 transform: skewY(-1deg);
 line-height: 165%;
 font-size: 110%;
}

.skill2{
/*	
 background:linear-gradient(to right,rgb(176,224,230,0.6), rgb(255,255,255,0.6));	
*/ 
 transform: skewY(1deg);
 line-height: 165%;
 font-size: 110%;
}
.slanting{
 transform: skewY(1deg);
}
.slanting2{
 transform: skewY(-1deg);
}

.consult_box{
  width: 80%;
  font-size: 120%;
  margin: 0 auto;
}
.consult {
  font-weight: bold;
  position: relative; 
  background: #FFFF00;
  box-shadow: 0px 0px 0px 5px #FFFF00;
  border: dashed 2px #000;
  padding: 1.2em 1.5em;
  color: #454545;
}

.consult:after {
  position: absolute;
  content: '';
  left: -10px;
  top: -10px;
  border-width: 0 0 30px 30px;
  border-style: solid;
  border-color: #FFF #FFF #000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 770px) {
.consult_box{
  width: 95%;
  font-size: 105%;	
}
}



.arrow_box {
  width: 80%;
  font-size: 110%;
  margin: 0 auto;
  position: relative;
  background: #0080cc;
  border: 4px solid #99CCFF;
  padding: 10px;
  text-align: left;
}

.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #0080cc;
border-width: 30px;
margin-left: -30px;
}

.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #99CCFF;
border-width: 36px;
margin-left: -36px;
}
@media screen and (max-width: 770px) {
.arrow_box{
  width: 95%;
  font-size: 105%;	
}
}

.heading {
	position: relative;
	padding-top: 30px;
	font-size: 40px;
	text-align: center;
	font-weight: bold;
	padding-bottom: 0px;
}
.heading2 {
	text-align: center;
	color: rgba(5,62,98,0.5);
	font-size: 30px;
	font-weight: bold;
	top:-20px;
	z-index: 1;
	border-bottom: 7px solid rgba(5,62,98,1);
	padding-top: 0px;
	margin-bottom: 40px;
	transform: translateY(-20px);
}

.reflection,.reflection2 {
/*
  width: 300px;
  height: 150px;
  background-color: #666;
*/
  position: relative;
  overflow: hidden;
}
.reflection::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
	
  animation: reflect 10s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 10s ease-in-out infinite;
}
.reflection2::after {
  content: "";
  display: block;
  width: 30px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
	
  animation: reflect2 10s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect2 10s ease-in-out infinite;
}
@keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  40% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  60% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  40% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  60% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@keyframes reflect2 {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect2 {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
/*--- 枠線アニメーション ---*/
.skill,.skill2{
  position: relative;
  transition: all 0.5s;
  overflow: hidden;	
  z-index: 0;
  padding: 7px;
}
.skill:before,
.skill:after {
  content: "";
  display: block;
  position: absolute;
  width: 110%;
  height: 0;
/*  background-color: #65A04D;*/
  border: 2px solid #FFCC00;
  pointer-events: none;
}
.skill2:before,
.skill2:after {
  content: "";
  display: block;
  position: absolute;
  width: 110%;
  height: 0;
/*  background-color: #65A04D;*/
  border: 2px solid #1E90FF;
  pointer-events: none;
}
.skill:before, .skill2:before{
  bottom: -5px;
  left: 0px;
}
.skill:after,.skill2:after {
  top: -5px;
  right: 0px;
}

.skill:hover:before,
.skill:hover:after,
.skill2:hover:before,
.skill2:hover:after{
  height: 108%;
}
.skill:hover:before,
.skill:hover:after,
.skill2:hover:before,
.skill2:hover:after{
  transition: height 0.2s linear;
}

.list_test-wrap {
    list-style: none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}
.list_test:before {
    content:  "";                 /* 空の要素作成 */
    width: 40px;                            /* 幅指定 */
    height: 40px;                           /* 高さ指定 */
    display: inline-block;                 /* インラインブロックにする */
    position: relative;                    /* アイコンの位置を調整 */
    top: -5px;                             /* アイコンの位置を調整 */
    margin-right: 5px;                      /* 余白指定 */
    background-image: url("../images/icon.png");  /* アイコン指定 */
    background-size: contain;              /* アイコンの大きさ指定 */
    background-repeat: no-repeat;          /* アイコンをリピートしないようにする */
    vertical-align: top;                    /* アイコンの位置を調整 */
}
.list_test {
    padding: 8px 5px 2px;                           /* 余白指定 */
    margin-bottom: 3px;                     /* 要素と要素の間指定 */
    font-size: 20px;                        /* 文字サイズ指定 */
	list-style: none;
	margin-left: 1.5em;
	text-indent: -2.7em;
	font-size: 85%;
	background-color: #FFFACD;
}
.nolistpoint{
	list-style: none;
	padding-bottom: 12px;
	font-size: 85%;
}

.area01 {
    width: 100%;
/*    background-color: rgb(240,248,255);*/
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255,250,205, 0.95));
    padding: 20px 0px;
}
.area01 p{
    margin: 0px 30px;   
}

.area02::before {
    content: "";
    width: 100%;
    height: 80px;
/*    background-color: rgb(240,248,255);*/
	background-image: linear-gradient(180deg, rgba(255,250,205, 0.95), rgba(250,250,205, 0.95));
    position: absolute;
    top: -1px;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}
.area02 {
    width: 100%;
/*    background-image: url(../images/bg_triangle.png);*/
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 10px;
    position: relative;
}

.diagonal{
/*	
	background-color: rgba(248,248,248, 0.85);	
	width: 100%;
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
    background-size: 20px 20px;
    background-repeat: repeat;
    background-position: center center;
*/
	background-image: url("../images/bg.jpg");
	background-repeat: repeat-y;
	background-size: 100% auto;
}

.headline{	
  font-size: 120%; 
  font-weight: bold;
  padding-left: 1em;
  text-indent: -1em;
  position: relative;
  padding: 0.3rem 0.8rem;
  border-bottom: 3px solid #4169E1;
  border-radius: 0px;
}

/*** 画面2等分 **/
.full{
	width: 100%;
	height: auto;
/*	background: url('../images/bg_top_left.png') no-repeat 0 0;*/
    background-size: cover;
    background-position: center;
}
.full2{
	width: 100%;
	height: auto;
/*	background: url('../images/bg_bot_right.png') no-repeat 0 0;*/
    background-size: cover;
    background-position: center;
}

.box {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 40px;
  width: 100%;
  border-bottom: 2px solid lightgray;
}
.box2{
    position: relative;
}
.box2 p{
    position: absolute;
	width: 90%;
	height: auto;
    top: 50%;
    left: 47.2%;
	transform: translate(-50%,-50%);
	font-size: 1.8vw;
/*		
	background-color: #FFF;	
	padding: 5px 10px;
    border: 1px solid #606060;
    background-image:
        linear-gradient(#fff 0 100%),
        repeating-linear-gradient(135deg, #606060 0 5px, transparent 5px 10px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(100% - 10px) calc(100% - 10px), 100%;
    text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;	
*/	
    color: #FFF;
    font-weight: bold;
    text-align: center;	
	background-color: rgba(80,80,80,0.65);
	padding: 10px;
}
@media screen and (max-width:767px) {
.box2 p{	
	font-size: 3.2vw;	
	width: 90%;
	height: auto;
    top: 50%;
    left: 47.8%;
	}
}
.text{
  width: 55%;
}

.layer,.layer2{
	/*position: absolute;*/
	margin: 0px 0px -80px -50px;
	height: 30px;
	width: 120%;
	background-color: rgba(30,144,255,.7);
	z-index: -2;
}

.layer3{
	/*position: absolute;*/
	margin: 0px 0px -80px -50px;
	height: 25px;
	width: 120%;
	background-color: rgba(123,132,142,0.60);
	z-index: -2;
}

.pict {
  width: 45%;
}

.pict img {
  width: 100%;
  height:auto;
}

.box:nth-child(even) {
  flex-direction: row-reverse;
}
.box:nth-child(even) .text {
  text-align: left;
}
.box:nth-child(odd) .text {
  text-align: left;
}
.box:nth-child(even) .pict {
  margin-left: 0;
}
.strong{
  width: 100%;	
  padding: 0.3em 1.5em;
  margin: 15px 0px;
  background: linear-gradient(to top, rgb(39, 172, 217), #45c4ee);
  color: #fff;
  font-size: 2.2vw;
/*  font-weight: bold;*/
  text-shadow: -1px -1px 0 #191970, -1px 1px 0 #191970, 1px -1px 0 #191970, 3px 3px 0 #191970;
}
.strong-point{
  margin: 5px 2px;
/*  background-color: #F0FF00;
  background-image: linear-gradient(90deg, rgba(168, 202, 240, 1), rgba(233, 240, 250, 1));
  -webkit-text-stroke: 1.3px #000;
  text-stroke: 1.3px #000;
*/
  background-image: linear-gradient(90deg, rgba(192, 192, 192, 1),rgba(233, 233, 233, 1));	
  color: #FFF;

}

.moji{
  font-size: 280%;
	font-weight: bold;
}
.moji2{
  font-size: 210%;
  font-style: oblique;
}
.moji3{
  font-size: 150%;
  border-left:8px solid #1E90FF; 
  text-indent: -1.5rem; 
  padding-left: 1.2rem; 
  font-style: oblique;
}
.slanting{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
}
.arrow_box2{
	position: relative;
/*	margin-top: -250px;*/
	margin-left: 150px;
	width: 40%;
    padding: 10px;
    text-align:center;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
	z-index: 10;
}
@media (max-width:768px) {
  .box {
    flex-direction: column;
  }
  .box:nth-child(even) {
    flex-direction: column;
  }
  .text {
    text-align: center;
    width:100%;
  }
  .moji{
  font-size: 210%;
  }
  .moji2{
  font-size: 180%;
  }
  .moji3{
  font-size: 140%;
  }
  .layer{
	/*position: absolute;*/
	margin: 0px 0px -80px -50px;
  }
  .box:nth-child(even) .text {
    /*text-align: center;*/
  }
  .pict {
    width:100%;
    margin-left: 0;
    text-align: center;
  }
  .box:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 0%;
  }
  .pict img {
    width:90%;
    height:auto;
  }
}

/*== 強みのデザイン(新) ==*/
.strength_box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #4682B4;
    border-radius: 8px;
}
.strength_box .box-title {
    position: absolute;
    display: inline-block;
    top: -20px;
    left: 2px;
    padding: 10px 20px;
    line-height: 1;
    font-size: 21px;
	background: linear-gradient(90deg, rgba(70,130,180,1), rgba(255,255,255,1) 85%);
    color: #4682B4;
    font-weight: bold;
  color: #FFF;
  text-shadow:2px 2px 0 #000, -2px -2px 0 #000,
              -2px 2px 0 #000, 2px -2px 0 #000,
              0px 2px 0 #000,  0 -2px 0 #000,
              -2px 0 0 #000, 2px 0 0 #000;
}
.strength_box p {
    margin: 0; 
    padding: 35px 10px 20px;
}


/*== 背景グラデーション ==*/
.grad1{
    background: -moz-linear-gradient(-45deg, #E6E6FA, #FFF);
    background: -webkit-linear-gradient(-45deg, #E6E6FA, #FFF);
    background: linear-gradient(-45deg, #E6E6FA, #FFF);	
}
.grad2{
    background: -moz-linear-gradient(-45deg,  #F0FFFF, #FFF);
    background: -webkit-linear-gradient(-45deg,  #F0FFFF, #FFF);
    background: linear-gradient(-45deg,  #F0FFFF, #FFF);	
}
.grad3{
    background: -moz-linear-gradient(-45deg,  #F5F5DC, #FFF);
    background: -webkit-linear-gradient(-45deg,  #F5F5DC, #FFF);
    background: linear-gradient(-45deg,  #F5F5DC, #FFF);	
}
.grad4{
	background-color: #FFFAF0;
}

/*== サイドバーメニュー ==*/
#sidemenu{
		background:#000;
		opacity:0.75;
}
#sidemenu ul{
	transform: translate(0px);
}

#sidemenu ul li a{
		display:block;
		padding:15px;
		border-bottom:#333 solid 1px;
		color:#FFF;
		text-decoration:none;
	    align-items: center;
}
#sidemenu ul li limoji{
	width: 80%;
	height: auto;
	word-break: break-word;
}
#sidemenu ul li img{
	width: 25%;
	height: auto;
}
#sidemenu ul li a:hover{
	background:#333;
}
#sidemenu_key{
		border-radius:0 5px 5px 0;
		background:#000;
		opacity:0.75;
		color:#FFF;
		padding:40px 0;
		cursor:pointer;
		margin-top:70px;
	}
#sidemenu_key:hover{
		opacity:0.5;
}

#menu_wrap{
		display:block;
		position:fixed;
		top:0px;
		/* widthはメニュー幅+keyボタン幅 */
		width:270px;
		/* メニュー幅に合わせる */
		left:-220px;
	    z-index: 99;
}
#sidemenu{
		display:inline-block;
		width:220px;
		float:left;
}
#sidemenu_key{
		display:inline-block;
		width:50px;
		float:left;
}

/*===主要設備===*/
.hero{
  position: relative;
  margin: 0 auto;
  text-align: left;
}
.hero img{
    filter: brightness(.7);
	width: 65%;
    height: 65%;
    object-fit: cover;	
}
.hero_content p{
    position: absolute;
    top:50%;
    left:35%;
    /*transform: translate(-50%,-50%);*/
    font-size:25px;
    color: #fff;
    padding: 10px 25px;
    margin:0;
	background: linear-gradient(90deg, rgb(22, 135, 237), rgb(20, 55, 90)); 
	font-size: 110%;
	opacity: 0.9;
}
@media (max-width:768px) {
.hero{
	margin-bottom: 100px;
	}
.hero_content p{
	font-size: 95%;
    padding: 5px 15px;
	left: 25%;
	}
.hero img{
	width: 95%;
    height: 95%;	
	}
}

/*** 波打つアニメーション ***/
.linear{
    animation: wave 2.5s ease infinite;
}

@keyframes wave{
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-10px) }
  30% { transform:translateY(0) }
  60% { transform:translateY(0) }
  70% { transform:translateY(-10px) }
  80% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

/*** 改行インデント ***/
.indent-1 {
	padding-left: 1em;
	text-indent: -1em;
}
.emphasis{
	font-size: 110%;
	font-weight: bold;
	border-left: 5px solid #4169E1;
	margin-top: 15px;
	padding-left: 1.3em;
}

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

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

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

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

@media (max-width:888px) {
.balloon{
	margin-top: 30px;	
}		
.balloon::before,
.balloon::after {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}
.balloon::before {
    background-color: #2589d0;
	left: 10px;
}
.balloon::after {
    top: -8px;
	left: 10px;
    background-color: #fff;
 }
}

.feature{
  position: relative;
  padding: 0.5rem 1rem;
  color: #0075a9;
  border-radius: 0 10px 10px 10px;
  background: #d8ecf5;
  margin: 32px 10px;
}
.feature:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 15px;
  font-size: 1.5rem;
  position: absolute;
  top: -32px;
  left: 0;
  height: 32px;
  padding: 0 1em;
  content: '\f0a5  POINT';
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #0075a9;
}
.feature p{
  margin-top: 15px;
}
@media (max-width:888px) {
.feature:before {
  content: '\f0a6  POINT';	
	}
}

.dl_table {
    text-align: left;
/*    font-weight: bold;*/
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    border-bottom: none;
	font-size: 110%; 
	padding-left: 5px;
}

.dl_table dd {
    /* background: #fff; */
    padding: 5px;
    width: calc(100% - 95px);
    /*border-bottom: 1px solid #BDBDBD;*/
}

.dl_table dt {
    padding: 5px 3px 5px 8px;
    width: 95px;
	color: #233B6C;
	font-weight: bold;
    /*border-bottom: 1px solid #BDBDBD;*/
}
@media (max-width:768px) {
.dl_table {	
	font-size: 100%; 
	}
}

.delimiter{
	margin: 0 auto;
	text-align: center;
	color: #364e96;
	padding: 0.5em;
	border-top: solid 3px #364e96;
	border-bottom: solid 3px #364e96;
	font-size: 2em;
	font-weight: bold;
}


/*== 新ヘッダー css ==*/
#item-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.item {
  width: 100%;
  margin: 5px 7px;
  box-shadow: 4px 4px 4px #555;
}
.item span{
  font-size: 2.3vw;
}

@media (max-width:768px) {
#item-box {
  display: block;
  flex-direction: column;
	}
.item {
  margin: 5px auto;
}	
	
.item span{
  font-size: 5vw;
}	
}

.heading-021 {
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 5px solid #0000CD;
    color: #333333;
	font-size: 190%;
	font-weight: bold;
	text-align: center;
}

.heading-021::before,
.heading-021::after {
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 40px;
    height: 20px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.heading-021::before {
    background-color: #0000CD;
}

.heading-021::after {
    bottom: -11px;
    background-color: #fff;
}

.slant-bg{
/*
	width: 100%;
    margin: 0;
*/
	width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 30px 0;
    position: relative;
    top: 5px;
	text-align: center;
	text-align: center; 
	color: #364e96; 
	border-top: solid 6px #364e96; 
	border-bottom: solid 6px #364e96;
}
.slant-bg::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1));
/*    background-color: #D1E28A;*/
    transform: skewY(-2deg);
    z-index: -1;
	
}

.cta_btn05 {
  font-weight: bold; /* 文字の太さ */
  line-height: 0.5;
  position: relative;
  display: inline-block;
  padding: 0.7em 0.4em 0.7em calc(2.7em - 10px);
  transition: 0.3s;
  text-decoration: none;
  color: #fff; /* 文字色 */
  border-radius: 0.5rem;
  background: #45B173; /* 背景色 */
  box-shadow: 0 5px 0 #19934e;
  margin-left: 5px;
}

#inquiry-icon{
 	position: fixed;
	right: 10px;
	bottom:150px;
	z-index: 2;
	opacity: 0;
}
/*　左の動き　*/
#inquiry-icon.LeftMove{
	animation: LeftAnime 0.5s forwards;
	opacity: 1;
}
@media screen and (min-width:768px) {
 #inquiry-icon{
    display: none;
     }
}
@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(200px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/
#inquiry-icon.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(200px);
  }
}

.cta_btn05 p {
  margin: 0;
  color: #FFF;
  font-size: 60%;
}
.cta_btn05 div {
  margin: 0;
  color: #FFF;
  font-size: 60%;
  left: 10px;
}
.cta_btn05 .cta_btn05_copy {
  position: absolute;
  bottom: 1.2em;
  left: -12px;
  display: inline-block;
  width: 5.7em;
  height: 4.7em;
  line-height: 4em;
  text-align: center;
  color: #45B173;
  font-size: 50%;
  font-weight: bold;
  background: #fff;
  border: 3px solid #45B173;
  border-radius: 50%;
  box-sizing: border-box;
  transform: rotate(-10deg);
}

.cta_btn05 .cta_btn05_copy::before {
  position: absolute;
  content: "";
  bottom: -3px;
  right: -3px;
  border: 4px solid transparent;
  border-left: 9px solid #FFF;
  z-index: 0;
  transform: rotate(45deg);
}

/* マウスオーバーした際のデザイン */
.cta_btn05:hover {
  transform: translate(0, 3px);
  background: #45B173; /* 背景色 */
  box-shadow: 0 2px 0 #19934e;
}


.rogo{
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0 10px 30px;
	width: 25%;
}
.rogo img{
	width: 100%;
	height: auto;
}
.fix_menu{
	position: fixed;
	width: 100%;
	max-width: 1200px;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 90;
	padding: 30px 0;

}
.fix_menu_active {
  opacity: 0;
  visibility: visible;
}

nav {
  background-color: #fff;
  color: #003366;
  font-family: "Noto Sans JP", sans-serif;
}
nav ul .logo {
	width: 40%;
}
nav ul .logo img {
	width: 100%;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0px;
}
nav ul li {
/*  position: relative;*/
  padding: 12px 15px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: bold;
  font-size: 120%;
  border-left: 1px solid #444; 
/*  display: flex;
  align-items: center;
  height: 80px;	
  line-height: 80px;*/
}
nav ul li:hover {
  background-color: #FFFF99;
}

/* ▼ サブメニュー（製品一覧） ▼ */
nav ul li .submenu {
  display: none;
  position: absolute;
  left: 0px;
  top: 70%;
  width: 100vw; /* 画面幅いっぱい */
  background-color: #f8f8f8;
  color: #333;
  padding: 20px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
nav ul li:hover .submenu {
  display: flex;
/*  justify-content: space-around;*/
}

nav ul li.open .submenu {
  display: flex;
}
/* 各製品項目 */
.submenu .item {
  text-align: center;
  width: 11%;
  box-shadow: 1px 1px 1px #eee;	
  z-index: 10;
  margin: 0;	
  border-right: 1px solid #1e90ff;
  padding: 5px 0px;
}
.submenu .item2 {
  text-align: center;
  width: 22%;
  box-shadow: 1px 1px 1px #eee;	
  z-index: 10;
  margin: 0;	
  border-right: 1px solid #1e90ff;
  padding: 10px 0px;
}
.submenu .item3 {
  text-align: center;
  width: 15%;
  box-shadow: 1px 1px 1px #eee;	
  z-index: 10;
  margin: 0;	
  border-right: 1px solid #1e90ff;
  padding: 10px 0px;
}
.submenu .item:hover{
  background-color: lemonchiffon;	
}
.submenu .item2:hover{
  background-color: lemonchiffon;		
}
.submenu .item3:hover{
  background-color: lemonchiffon;		
}
.submenu .item img {
  width: 90px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 8px 0;
}
.submenu .item span {
  display: block;
  font-size: 11px;
  color: #364e96;
}

#navwrap{
	position: absolute;
	top: 0;
	right: 0;
/*	padding: 5px 10px 5px 0;
	width: 80%;*/
	width: 100%;
	height: auto;
}
#navwrap .pc{
	display: none;
}
nav li{
	display: block;	
	color: #003366;
	}

@media screen and (max-width:768px) {
#navwrap .pc{
	display: block;	
 }
	
nav li{
	display: block;	
	color: #FFFFFF;
	}
}
@media screen and (max-width:768px) {
nav ul{
	display: block;	
	color: #FFFFFF;
	}
	
nav ul .logo img {
    display: none;
   }	
	
nav ul li:hover {
    background-color: transparent; 
}		
nav ul li .submenu {
	top: 0%;
	position: static;
	left: 20px;
/*	display: block;*/
	width: auto;
	}

nav ul li:hover .submenu {
  display: block;
  color: #000000;	
}	
.submenu .item {
	width: 80%;
	margin-bottom: 10px;
	}
.submenu .item2 {
	width: 80%;
	margin-bottom: 10px;
	}	
.submenu .item3 {
	width: 80%;
	margin-bottom: 10px;
	}		
.submenu .item:hover {
	background-color: lemonchiffon;
	}
.submenu .item2:hover {
	background-color: lemonchiffon;
	}	
.submenu .item3:hover {
	background-color: lemonchiffon;
	}	
.submenu .item img {
	display: none;
	left: 50px;
	}
.submenu .item span {
  display: block;
  font-size: 14px;
  color: #000;
   }		
}

.header_menu{
	display: flex;
}
ul,li{
	list-style: none;
	margin: 0;
}
.header_menu li {
	cursor: pointer;
	padding: 3px 5px 3px 5px;
	margin-left: 3px;
	text-decoration: none;
	color: #333;
/*	font-weight: bold;*/
	font-size: 110%;
}
.header_menu li:hover {
    border-bottom: 3px solid #F0E475;
}
/*
.header_menu li::before {
	content: "l ";
	font-weight: bold;
	height: 30px;
	width: auto;
	vertical-align: -1px;
}
*/
.header_menu li a{
	text-decoration: none;
	color: #000000;
}
.header_menu li li a{
	text-decoration: none;
	color: #FFF;
}
#switch{
	display: none;
}
	
.header_menu li li {
 display: block;
 margin-top: 0;
 padding: 0 10px;
 height: 0;
 overflow: hidden;
 background: rgba(0,0,0,0.70);
 color: #FFF;
 font-size: 80%;
 transition:all .5s ease-out;
}
	
.header_menu > li:hover li {
 display: table;
 margin-top: 1px;
 padding: 10px;
 width: 100%;
 height: 1em;
 overflow: visible;
 transition:all .5s ease-out;

}

.header_menu > li:hover ul {
 height: auto;
}	
	
.menu > li:hover li a:hover {
 background: #b0e0e6;
 transition:all .5s ease-out;
}
.phone::after{
  content: '';/*何も入れない*/
  display: inline-block;
  width: 25px;/*画像の幅*/
  height: 20px;/*画像の高さ*/
  background-image: url("../images/tel.png");
  background-size: contain;
  vertical-align: middle;		
}	
.mail::after{
  content: '';/*何も入れない*/
  display: inline-block;
  width: 25px;/*画像の幅*/
  height: 20px;/*画像の高さ*/
  background-image: url("../images/mail.png");
  background-size: contain;
  vertical-align: middle;		
}		
	
.gnavi__wrap {
    margin: 0 auto;
}
.rogo2{
	width:20%;
	display: flex;
	align-items: center;
	display:inline-block;
}
.rogo2 img{
	width:90%;
	display: flex;
	padding-top: 10px;
}
.gnavi__lists {
    width: 100%;
    display: flex;
}
.gnavi__list {
    width: 20%;
    height: 60px;
    background-color: rgba(255,255,255,0.50);
    position: relative;
	border-left: 1.2px solid #999; 
    transition: all .3s;
}
.gnavi__list img{
    width: 90%;
    height: auto;
}
.gnavi__list:hover {
    background-color: #0071BB;
}
.gnavi__list:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}
.gnavi__list:hover::before {
    background-color: #0071BB;
}
.gnavi__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #1b4059;
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: all .3s;
}
.gnavi__list:hover a {
    color: #fff;
}
.dropdown__lists {
    display: none;/*デフォルトでは非表示の状態にしておく*/
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists {
    display: block;/*Gナビメニューにホバーしたら表示*/
}
.dropdown__list {
    background-color: #004d80;
    height: 60px;
    transition: all .3s;
    position: relative;
}
.dropdown__list:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    background-color: #3492d1;
    position: absolute;
    top: 0;
    left: 0;
	font-size: 90%;
}
.dropdown__list:hover {
    background-color: #003558;
}
.dropdown__list a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.dropdown__lists {
    visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
    opacity: 0;/*不透明度0*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists {
    visibility: visible;/*Gナビメニューにホバーしたら表示*/
    opacity: 1;/*不透明度1*/
}
.dropdown__lists {
    transform: scaleY(0);/*デフォルトでは非表示の状態にしておく*/
    transform-origin: center top;/*変形を適応する基準をtopとする*/
    transition: all .3s;/*表示の変化を0.3秒に指定*/
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
}
.gnavi__list:hover .dropdown__lists {
    transform: scaleY(1);/*Gナビメニューにホバーしたら表示*/
}

/*
@media screen and (max-width:1200px) {
	#navwrap{
		position: absolute;
		top: 30px;
		right: 50px;
		padding: 15px 30px 15px 0;
	}	
	}
*/
@media screen and (max-width:768px) {
	.fix_menu_active {
  	opacity: 1;
  	visibility: visible;
	}
	.rogo2{
		width: 55%;
	}
	.rogo2 img{
		width: 95%;
		height: auto;
		margin: 0 auto;
	}	
	#switch ~ label {
		padding: 12px 12px;
		width: 70px;
		height: 70px;
		background: #333;
		position: fixed;
		box-sizing: border-box;
		top: 0;
		right: 0;
		z-index: 90;
		cursor: pointer;
	}
	#switch ~ label span{
		display: block;
		width:22px;
		height:2px;
		top: 50%;
		left: 0;
		right: 0;
		margin:auto;
		background: #fff;
		position: absolute;
		-webkit-transition: 0.2s transform;
		transition: 0.2s transform;
	}
	#switch ~ label span:before,
	#switch ~ label span:after{
		content: "";
		display: block;
		background: #fff;
		position: absolute;
		width:22px;
		height:2px;
		left: 0;
		right: 0;
		margin: auto;
	}
	#switch ~ label span:before{
		top: -9px;
	}
	#switch ~ label span:after{
		top: 9px;
	}
	#navwrap{
		padding-top: 0;
		position: fixed;
		top: -100%;
		left: 0;
		width: calc(100% - 60px);
		height: 100%;
		background: rgba(0,0,0,0.8);
		transition: all 0.4s;
/*		padding: 60px;*/
		box-sizing: border-box;
	}
	#switch:checked ~ #navwrap { 
		display: block; 
		top: 0;
	}
	.gnavi__lists{
		display: flex;
		flex-direction: column;
	}
	.gnavi__list{	
        width: 50%;
        height: 100px;
/*		
		border-left: 0px solid #FFF;
		border-bottom: 1px solid #FFF;
*/
		color: #FFF;
		border: 2px solid #FFF;
		margin-bottom: 3px;
		background-color: transparent;

	}
	.gnavi__list a {
		color: #FFF;
/*		border: 2px solid #FFF;   */ 
		font-size: 120%;
	}
	.header_menu li{
		margin: 0 auto 30px;
		color: #FFF;
	}
	.header_menu li ul{
        height: 0;
        overflow: hidden;
	}
	.header_menu li a{
		color: #fff;
	}
	.scroll-prevent {
		position: fixed;
		z-index: -1;
		width: 100%;
		height: 100%;
	}
	.hidden{
		display: none;
	}
	.dropdown__lists{
		position:relative;
		left: 120%;
		top: -100px;
	}
}
@media screen and (max-width:480px) {
	.gnavi__list a {  
		font-size: 80%;
	}	
	
}

.arrow_box3{
    position:relative;
    width: 30%;
    height:85px;
    background:#0099FF;
    padding:8px 10px;
    text-align:center;
    color:#FFFFFF;
    font-size:15px;
    font-weight:bold;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
.arrow_box3:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(0, 153, 255, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    border-bottom-color:#0099FF;
    bottom:100%;
    left:65%;
}
.nightsupport{
	width: 20%;	
	height: auto;
	}
@media screen and (max-width:767px) {
.arrow_box3{
    width: 45%;	
    font-size:11px;
    height:65px;
	}
.nightsupport{
	width: 25%;	
	height: auto;	
	}
}
@media screen and (max-width:480px) {
.arrow_box3{
    width: 40%;	
    font-size:6px;
    height:50px;
    padding:3px 5px;
	}
.nightsupport{
	width: 30%;	
	height: auto;	
	}
}
a.btn_10 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 75%;
	white-space: nowrap;
	margin: auto;
	padding: 0.3rem 0.5rem;
	font-weight: bold;
	font-size: 80%;
	background-image: linear-gradient(to right, #27acd9 0%, #b4e12b 100%);
	border-radius: 100vh;
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn_10:hover {
	color: #fff;
	background-image: linear-gradient(to left, #27acd9 0%, #b4e12b 100%);
}
a.btn_11 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 75%;
	white-space: nowrap;
	margin: auto;
	padding: 0.3rem 0.5rem;
	font-weight: bold;
	font-size: 80%;
	background-image: linear-gradient(to left, #27acd9 0%, #b4e12b 100%);
	border-radius: 100vh;
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn_11:hover {
	color: #fff;
	background-image: linear-gradient(to right, #27acd9 0%, #b4e12b 100%);
}

/* 動画部分 */
.video-container {
    position: relative;
    width: 800px;
    height: 450px;
    overflow: hidden;
    border-radius: 10px;
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
@media (max-width: 768px) {
    .video-container {
        width: 90%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* ▼ ショート動画並べ */
    .video-grid{
      display: grid;
      grid-template-columns: 1fr; /* スマホ: 縦に並ぶ */
      gap: var(--gap);
    }
    @media (min-width: 900px){ /* PC相当の幅から3列 */
      .video-grid{
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* ▼ YouTube Shortsの9:16を維持するラッパー */
    .short{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--card-radius);
      overflow: hidden;
      /* 9:16（幅:高さ）。高さは自動で確保される */
      aspect-ratio: 9 / 16;
      position: relative;
      box-shadow: 0 6px 24px rgba(0,0,0,.25);
	  padding: 5px;
	  margin: 5px;
    }
    .short iframe{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* 角丸が効くようにiframeもクリップ */
    .short::after{
      content: "";
      position: absolute; inset: 0;
      border-radius: var(--card-radius);
      pointer-events: none;
    }



.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slider-text {
  position: absolute;
  color: #fff;/*文字は白に*/
  font-weight: bold;
  top: 55%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%); 
  text-shadow: 2px 2px 10px #777, -2px 2px 10px #777, 2px -2px 10px #777, -2px -2px 10px #777;
  z-index: 20;
  font-size: 2.4rem;
  padding: 0 auto;
  margin: 0 auto;	
  width: 100%;
  height: auto;
  text-align: center;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
.slider-text {
  font-size: 2.0rem;	
	}
}
.slider {
  margin-top: 70px; 	
  display: flex;
  width: 100%; /* 9枚分 */
  height: auto;	
  transition: transform 0.8s ease;
	
}

.slider a {
  flex-shrink: 0;
  width: 100%;
  display: block; /* または inline-block */
  text-align: center;
  background-image: url("../images/bg_gray3.png");
  background-size: cover;
}

.slider img {
  width: 50%;
  flex-shrink: 0;
  object-fit: cover;
  margin: 0 25%;	
  z-index: 10;
}

/* ボタン */
button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.6);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 7px 25px 10px;
  cursor: pointer;
  z-index: 30;
  border-radius: 50%;
}

button.prev { left: 20px; }
button.next { right: 20px; }

button:hover {
  background-color: rgba(0,0,0,0.8);
}

@media (max-width: 768px) {
/*	
button.prev, button.next {
  font-size: 1.2rem;	
  padding: 5px 16px 8px;	
	}
*/
.slider-text {
  font-size: 1.0rem;	
	}
button.prev {
  font-size: 1.2rem;	
  padding: 3px 12px 5px;		
  left: 5px;
  top: 60%;
	}
button.next {
  font-size: 1.2rem;	
  padding: 3px 12px 5px;	
  right: 5px;
  top: 60%;
	}
}

.container-6 {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    gap: 1px 1%; /* 画像の間に余白を設定 */
}

.container-6 a {
    display: block;
    width: 22%;
	margin-bottom: 20px;
}

.container-6 a img {
    width: 95%;
    height: auto;
	border: 1px solid #888;
}

@media (max-width: 768px) {
    .container-6 a {
        width: 48%;
    }
}