@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap');
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
  margin: 0; /*ボックス外側の余白(値1つは上下左右をまとめて指定)*/
  padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
  border: 0; /*境界線指定*/
}
* {
  box-sizing: border-box
}
html {
  font-size: 62.5%;
}
body {
  line-height: 2; /*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
  font-family:  'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  color: #333333; /*文字色指定*/
  display: flex;
  flex-direction:column;
  min-height:100vh;
  position: relative;
  font-feature-settings: "palt";

}
ol, ul {
  list-style: none; /*リストマーカーの種類指定(noneはなし)*/
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.color1 {
  color: #FF0033; /*文字色指定*/
}

.sp{
  display: none;
}
.ssp{
  display: none;
}
@media screen and (max-width:768.98px) {
  .sp{
    display: contents;
  }
  .ssp{
    display: block;
  }
.pc{
  display: none;
}
}



/* ----- ヘッダー(ページの一番上の部分) ----- */
header, footer {
  width: 100%;
  background-color: rgb(240, 240, 240);
}

/* 通常時はホバー時の文字を非表示にする */
a .hover{
  display: none;
  }

  /* ホバー時は通常時の文字を非表示にする */
  a:hover .normal{
  display: none;
  }

  /* ホバー時に、ホバー時の文字を表示する */
  a:hover .hover{
  display: inline;
  }


.inheader {
  height: 80px;
  max-width: 1100px;
  margin: auto; /*ボックス外側の余白(autoはボックス幅や隣接する他ボックス幅による自動余白割り当て)*/
  color: #333333; /*文字色指定*/
}

/* ----- ナビゲーションメニュー(ヘッダー内のメインメニュー) ----- */
/*


/* menu */
nav{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp_offcm03 {
	position: relative;
	z-index: 500;
	top: 0;
	left: 0;
	overflow: auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
	height: 80px;
	padding-top: 0;
	-webkit-transition: transform 0.3s ease-in;
	        transition: transform 0.3s ease-in;
	text-align: center;
	color: #333;
	background-color:rgb(240, 240, 240);
  font-size: 1.6rem;
  font-weight: bold;
  padding-top: 10px;
}
.cp_offcm03 div.logo {
  width:135px;
  height: 54px;

}

.cp_offcm03 ul {
  width: calc(90% - (90% / 8));
	height: 100%;
  display: flex;
}
.cp_offcm03 li {
	display: inline-block;
  flex: 1 1;
  position: relative;
}
.cp_offcm03 li a {
  display: flex;
  flex: 1 1;
  position: relative;
  justify-content: center;
}

.cp_offcm03 li::after{
content: "";
    display: block;
    width: 2px;
    height: 20px;
    background-color: #666;
    position: absolute;
    right: -1px;
    top: calc((100% - 20px)/2);
  }
  .cp_offcm03 li:nth-child(6)::after{
    content: none;

  }
.cp_offcm03 a span:hover {
  color: #69A3D7;
  position: relative;
}
.cp_offcm03  a span:hover::after {
  content: "";
  position: absolute;
  display: block;
  height: 4px;
  width: 100%;
  bottom: 0;
  background-color: #69A3D7;
  border-radius: 5px;
}

/* menu toggle */
#cp_toggle03 {
	display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
	-webkit-transform: translateX(0);
					transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
	-webkit-transform: translateX(0);
					transform: translateX(0);
}
.cp_mobilebar {
	display: none;
}
/* content */
.cp_container {
	position: relative;
	top: 0;
	padding: 35px auto;
	-webkit-transition: transform .3s ease-in;
	        transition: transform .3s ease-in;
}
.cp_content {
	margin: 0 auto;
	padding: 20px;
	height: 65vh;
	text-align: center;
}
.fa-twitter{
  margin-right: 0.5em;
}

@media (max-width: 768.98px) {
	/* menu */
	.cp_offcm03 {
		position: fixed;
		left: -250px;
		overflow-y: hidden;
		width: 250px;
		height: 100%;
		padding-top: 45px;
		color: #ffffff;
    background-color: #898989;
	}
	.cp_offcm03 nav {
		background: #898989;
	}
  .cp_offcm03 ul {
  flex-direction: column;
  }
	.cp_offcm03 li {
		display: block;
		margin-right: 0;
		border-bottom: 1px solid #ffffff;
	}
  .cp_offcm03 li::after{
        display: none;
        width: 2px;
        height: 20px;
        background-color: #666;
        position: absolute;
        right: -1px;
        top: calc((100% - 20px)/2);
      }

  .cp_offcm03 a {
	display: flex;
	-webkit-transition: background-color .3s ease-in;
	        transition: background-color .3s ease-in;
          flex: 1 1;
}

	.cp_offcm03 a {
		padding: 20px;
	}
  .cp_offcm03  a span:hover::after {
    display:none;
  }
  .logo{
    width: 88px;
    height: 35.63px;
  }
  .logo a{
width: 100%;
  }

	/* menu toggle */
	.cp_mobilebar {
		display: flex;
    justify-content: space-between;
    align-items: center;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		padding: 0 25px;
		width: 100%;
		height: 45px;
		background-color: rgb(240, 240, 240);
	}
	.cp_menuicon {
		display: block;
		position: relative;
		width: 25px;
		height: 100%;
		cursor: pointer;
		-webkit-transition: transform .3s ease-in;
		        transition: transform .3s ease-in;
	}
	.cp_menuicon > span {
		display: block;
		position: absolute;
		top: 55%;
		margin-top: -0.3em;
		width: 100%;
		height: 0.2em;
		border-radius: 1px;
		background-color: #666;
		-webkit-transition: transform .3s ease;
		        transition: transform .3s ease;
	}
	.cp_menuicon > span:before,
	.cp_menuicon > span:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 1px;
		background-color: #666;
		-webkit-transition: transform .3s ease-in;
		        transition: transform .3s ease-in;
	}
	.cp_menuicon > span:before {
		-webkit-transform: translateY(-0.6em);
		        transform: translateY(-0.6em);
	}
	.cp_menuicon > span:after {
		-webkit-transform: translateY(0.6em);
		        transform: translateY(0.6em);
	}
	#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
		-webkit-transform: rotate(45deg);
		        transform: rotate(45deg);
	}
	#cp_toggle03:checked + .cp_mobilebar span:before,
	#cp_toggle03:checked + .cp_mobilebar span:after {
		-webkit-transform: rotate(90deg);
		        transform: rotate(90deg);
	}
	#cp_toggle03:checked ~ .cp_offcm03 {
		-webkit-transform: translateX(100%);
		        transform: translateX(100%);
	}
	#cp_toggle03:checked ~ .cp_container {
		-webkit-transform: translateX(250px);
		        transform: translateX(250px);
	}

  }
	/* content */
	.cp_container {
		top: 60px;
		height: 92vh;
	}






/*  スライダー  */
.slider{
	margin-bottom:8rem;
  height: auto;
}
/*左右の矢印の色を変える*/
.slick-prev:before, .slick-next:before {
  color: #000;
}
/*左右の矢印の位置を変える*/
.slick-next {
  right: 18%;
  z-index: 99;
}
.slick-prev {
  left: 18%;
  z-index: 100;
}

@media screen and (max-width:1280px) {
  .slick-next {
    right: 7%;
  }
  .slick-prev {
    left: 7%;
  }
}

/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before, .slick-dots li button:before {
  color: #666;
}
/*スライド画像の横幅可変*/
img {
  max-width: 100%;
  height: auto;
}
.slick-slide:not(.slick-center) {
  -webkit-filter: opacity(50%);
  -moz-filter: opacity(50%);
  -o-filter: opacity(50%);
  -ms-filter: opacity(50%);
  filter: opacity(50%);
  transition: 0.2s linear;
}


.slick01{
  opacity: 0;
  /* overflow: visible;
 */
}

.slick-initialized{
  opacity: 1;
  transition: opacity .3s linear;
}


@media screen and (max-width:768.98px) {
	.slider{
    margin-bottom:4rem;
    margin-top: 45px;
  }
  .slick-slide:not(.slick-center) {
    -webkit-filter: opacity(100%);
    -moz-filter: opacity(100%);
    -o-filter: opacity(100%);
    -ms-filter: opacity(100%);
    filter: opacity(100%);
    transition: 0.2s linear;
  }

}

/* ----- レイアウト ----- */
#container {
  max-width: 1100px;
  margin: 5rem auto ;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#container a:hover img { /*画像にマウスをのせた時半透明にする*/
  filter: Alpha(opacity=70); /*視覚効果(IE独自) Alphaは透過表示 opacityは開始透明度*/
  opacity: 0.7; /*要素の透明度*/
}
#content {
  width: calc(100% - 20% - 5%);
  margin-bottom: 5rem;
}
@media screen and (max-width:767.98px) {
  #content {
    width: 98%;
    margin: 0 auto 3rem auto;
  }
}


/*  サイドメニュー  */
#leftside {
  width: 20%; /*幅指定*/
}
#links {
background-color: rgb(240, 240, 240);
}
.work-titles label{
  font-weight:bold;
  font-family:  'Noto Sans JP', sans-serif;
  font-size:2rem;
  line-height:0.6;
  color:#69A3D7;
}
.work-titles input {
  display: none;

}
#links li {
width: 100%;
font-size: 14px;
}

#links li a {
  position: relative;
  display: block;
  padding: 0.5em 1em 0.5em 2em;
  width: 100%;
  height: 100%;
}
#links li a:before {
  content: "";
  position: absolute;
  top: 50%;   /* 縦軸をセンタリングする */
  left: 1em;
  transform: translateY(-50%);   /* 縦軸をセンタリングする */
  border: 5px solid transparent;
  border-left: 8px solid #69A3D7;
}
#links li a:hover{
  background-color: #69A3D7;
  color: #FFF;
}

#links li.last {
background-color: #69A3D7 !important;
color: #fff !important;
}



@media screen and (max-width:768.98px) {
  #leftside{
    width: 100%;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 45px;
z-index: 300;
  }
  #leftside h2 {
    margin-left: 0.8em;
  }
  .menu{
		width:100%;
		margin-bottom:2rem;
	}
  .search {
    width: 100%;
  }
    #leftside {
      width: 100%;
    }

  /*  作品から探す　アコーディオンメニュー  */
  .work-titles {
   height: inherit !important;
  }
  #links li
  {
box-sizing: border-box;
padding:0;
font-size: 16px;
  }
  /* #links li:nth-child(n+10)
  {
display: none;
  } */


  #links li a {
      display: block;
      padding: 10px;
      text-decoration: none;
      width: 100%;
      padding-left: 2em;
      line-height: 1.5;
  }

  .work-titles label {
      display: block;
      margin: 0;
      padding : 15px 1em;
      cursor :pointer;
      color: #FFF;
      background-color: #69A3D7;
      font-size: 0.85em;
      margin: 0;
  }

  #links{
      margin: 0;
      padding: 0;
      background :#f4f4f4;
      list-style: none;
      width: 100%;
  }

  #links li {
      height: 0;
      overflow: hidden;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
  }


  #links li.last {
    display: block !important;
  background-color: #69A3D7 !important;
  color: #fff !important;
  }

  #content.scroll-prevent{
    overflow-y: hidden;
    height: 200px;
    z-index: -999;
  }


 .work-titles{
      width:100%;
    background-color: rgb(240, 240, 240);
      height:5.6rem;
      align-items:center;
      margin: 0 auto;
    }
  .works{width:90%;margin:0 auto;}
  .works li {
    width: 46%;
    margin-bottom:1rem;
  }
  .sns li{width:100%;}
}


#menu_bar:checked ~ #links li{
  height: 45px;
  opacity: 1;
}

#menu_bar:checked ~ ul#links{
  transform: none;
}


/*  フッター   */
#footer02 {
  background: linear-gradient(-45deg, #222 0%, #222 82%, #fff 82%, #fff 100%);
  align-items: center;
  width: 100%;
  padding: 0 100px 0 20px;
  color: #ccc;
  margin-top: auto;
}
#footer02 .wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#footer02 .cont {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
}

#footer02 .logo {
  width: 120px;
  margin-left: 20px;
  padding: 10px 0 0 0;
}

#footer02 .nav li a {
  padding: 15px;
}

#footer02 .c-btn {
  margin-left: 25px;
}
#footer02 .c-btn a{
  display: block;
  background-color: #69A3D7;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  color: #fff;
  padding: 0 1em !important;
}
.copyright{
  text-align: center;
  font-size: 12px;
}

  #footer02 .nav {
    display: inline-block;
  }

  #footer02 .nav li {
    display: inline-block;
  }
  /* ボタン全体 */
.flowbtn10{
  display:inline-block;
  font-size:35px;
  text-decoration:none;
  transition:.5s;
  color:#444;
  }
  /* Twitterマウスホバー時 */
  .flowbtn10 .fa-twitter:hover{
  color:#55acee;
  }

@media only screen and (max-width: 768.98px) {
  #footer02 {
    padding: 20px 0 0;
    background:#222;
  }

  #footer02 .wrap {
    flex-direction: column;
  }
  #footer02 .inner-block {
    padding: 0;
  }

  #footer02 .c-btn {
    margin-bottom: 0;
  }


  #footer02 .nav li a {
    padding: 12px 20px;
    display: block;
    background-size: 5px auto;
  }
}

@media only screen and (max-width: 600px) {
  #footer02 .cont {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }

  #footer02 .c-btn {
    margin-bottom: 20px;
    margin-left: 0px;
  }

  #footer02 .nav{
    width: 90%;
  }

  #footer02 .nav li {
    border-top: 1px solid #555;
    width: 100%;
    text-align: center;
  }
  #footer02 .nav li:last-child {
    border-bottom: 1px solid #555;
  }
  .copyright{
    padding: 1em 1em 1em 0em;
  }
}



#page_top {
  width: 90px;
  height: 90px;
  /* position: fixed; */
  right: 5px;
  bottom: 50px;
  background: #359ECA;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before {
  font-family:'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after {
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

@media screen and (max-width:768.98px) {
  #page_top {
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 5px;
    right: 5px
  }
  #page_top a {
    width: 60px;
    height: 60px;
  }
  #page_top a::before {
    top: -30px;
  }

  #page_top a::after {
    display: none;
  }


	.infooter{
		padding:1rem
	}
	.infooter ul{
		flex-wrap:wrap;
		font-size:90%;
		width:100%;
	}
	.copy{font-size:80%;text-align:right}

  #container {
    flex-wrap: wrap;
	  justify-content:center;
    margin: 0;
  }
}

/* twitter */
.twlist{
  width: 98%;
  max-width: 460px;
margin: 0 auto;
}


/* ----- コンテンツ ----- */
section{
  margin-bottom: 40px;
}
h2.title{
  padding: 0 0 0 0.3em;
  border-bottom: 3px solid #359ECA;
  font-family:'Noto Sans JP', sans-serif;
  font-weight: bolder;
  font-size: 2.0em;
  margin-bottom: 20px;
  line-height: 1.25;
  display: flex;
  align-items: center;
}

h2.title span{
  margin: 0 1em;
font-size: 0.7em;
font-family:'Noto Sans JP', sans-serif;
font-weight: normal;
}

@media screen and (max-width:768.98px) {
  h2.title{
    font-size: 1.25em;
    flex-direction: column;
  }
  h2.yoko{
    flex-direction: row;
  }
  }

  /* 一覧ボタン */
  .otherlist,.othernewslist{
    width: 100% !important;
  }

  .btn-flat-simple {
    padding: 0.25em;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #00BCD4;
    background: #ECECEC;
    transition: .4s;
    width: 100%;
    font-size: 1.2em;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif

  }
  .btn-flat-simple:hover {
    background: #00bcd4;
    color: white;
  }





@media screen and (max-width:768.98px) {
    .otherlist{
      width: 49% !important;
    }
    .btn-flat-simple {
      width: 90%;
      font-size: 1.0em;
      margin: 0 auto;
}
}

/* 新商品 */
ul.newmainitemlist{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

  ul.newmainitemlist li{
  width: 30%;
  box-sizing: border-box;
  margin: 0 10px 60px 10px;
  }
  ul.newmainitemlist li a p{
    width: 98%;
    margin: 0 auto;
    font-size: 0.9em;
  }
  ul.newmainitemlist li a p:nth-child(2){
  font-weight: bold;
  border-top: #898989 1px dotted;
  }

  @media screen and (max-width: 600px){
  ul.newmainitemlist li{
    width: 44%;
    margin: 0 auto 60px auto;
    }
  }


/* お知らせ欄 */
.news-list{
  list-style: none outside;
  margin: 0;
  padding: 0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}
.news-list .item{
  border-bottom: 2px dotted rgb(240, 240, 240);
}
.news-list .item a{
  display: flex;
  flex-wrap: nowrap;
  text-decoration: none;
  padding: 20px 20px;
}
.news-list .item:nth-last-child(2){
  border-bottom: none;
}
.news-list .item .date{
  margin: 0;
  min-width: 100px;
  font-size:1em;
  padding: 0 20px 0 0;
  font-weight: bold;
}
.news-list .item .category{
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  min-width: 110px;
  color: #FFF;
  margin-right: 20px;
}
.news-list .item .oshirase{
background-color: orange;
}
.news-list .item .attention{
  background-color: red;
  }
  .news-list .item .press{
    background-color:#359ECA;
    }


.news-list .item .title{
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title{
  color: #00bcd4;
}

@media screen and (max-width: 767px){
.news-list .item a{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 10px;
}
}

/*  news本文非表示  */
ul.news-list li p.honbun, ul.news-list li a.honbun{
  display: none;
}
/*   news一覧表示設定   */
a.honbun{
  width: 70%;
  margin: 0 auto;
  flex-wrap: wrap;
}
a.honbun img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px){
  a.honbun{
    width: 100%;
  }
}


/* 会社概要 */
.company-t {
  width: 100%;
  border-collapse: collapse;
  }

  .company-t th,td {
  padding: 10px 15px;
  border: 1px solid rgb(240, 240, 240);
  }

  .company-t th {
  background: rgb(240, 240, 240);
  width: 15%;
  text-align: left;
  color: #333333;
  font-weight: normal;
  }
  p.location{
    padding-left:2em;
	text-indent:-1em;
  padding-right: 1em;
  }
  .spbr{
    display: none;
  }

  @media only screen and (max-width:600px) {
    section iframe{
            padding: 0 2%;
    }

    .company-t {
      width: 98%;
      margin: 0 auto;
      font-size: 14px;
      }
  .company-t th,.company-t td {
  width: auto;
  display: block;
  border-top: none;
  }
  .company-t tr:first-child {
  border-top: 1px solid #d5d5d5;
  }
  }
  @media only screen and (max-width:500px) {
  .spbr{
    display: block;
  }
  }




/*  商品ラインナップページ   */
ul.mainitemlist{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  }
  ul.mainitemlist li{
  width: 30%;
  box-sizing: border-box;
  margin: 0 10px 60px 10px;
  }
  ul.mainitemlist li a p{
    width: 90%;
    margin: 0 auto;
    font-size: 0.9em;
  }
  ul.mainitemlist li a p:nth-child(2){
  font-weight: bold;
  border-top: #898989 1px dotted;
  }
  ul.mainitemlist li:last-child{
    display: block;
    margin: 0 auto 60px auto;
  }
  ul.mainitemlist:after {
    content: "";
    display: block;
    width: 30%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}
h2.mt5{
  margin-top: 5em;
}

/* タイトル長いやつ用 */
.nagai{
  font-size: 1.7em !important;
}

  @media screen and (max-width: 600px){
  ul.mainitemlist li{
    width: 44%;
    }
    ul.mainitemlist:after {
      width: 44%;  /* .boxに指定したwidthと同じ幅を指定する */
  }
  .nagai {
    font-size: 1.25em !important;
  }

    /* ul.mainitemlist li:nth-child(9){
  display: none;
} */
ul.mainitemlist li a p{
  width: 102%;
}


  }

/* パンくずリスト */
.breadList{
  margin-bottom: 1em;
}
.breadList-Item {
  display: inline;
  font-size: 14px;
  }
  .breadList-Item::after {
  content: '＞';
  padding: 0 16px;
  }
  .breadList-Item:last-child::after {
  content: '';
  }
  .breadList-Item-Link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  }
.sec {
  width: 100%;
  padding: 5rem;
}
@media screen and (max-width: 767px){
  .breadList{
    margin-left: 1em;
    margin-top: 40px;
  }
  .sec {
    width: 90%;
    padding: 0;
    margin: 0 auto;
  }
}



/* 商品説明 */
.item-img{
  display: flex;
  margin-bottom: 2em;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px){
  .item-img{
    width: 96%;
    margin:0 auto;
      }
    }

#detail{
  width: 40%;
  min-height: 450px;
  border-collapse:collapse;
  font-size: 0.85em;
  margin-bottom: auto;
  text-align: left;
}
#detail tr {
  border-bottom: 1px dotted #898989;
}

#detail th,
#detail td {
  padding: 0.5em 0;
  border: none;
}

#detail th {
  width: 30%;
}

/* sp */
@media only screen and (max-width: 767px) {
  #detail {
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
    min-height: 350px;
}

  #detail th {
    width: 30%;
    padding: 0;
  }

  #detail td {
    width: 70%;
    padding: 0;
  }
}
/* 順番入れ替え */
@media screen and (max-width: 767px){
.item-img table#detail{
  order:3
}
.item-img ul.sub-img{
  order: 2;
}
}
/* ---- 画像リストの設定 ----- */
.imglist ul {
  margin-left: -26px; /*ボックス外側左の余白*/
}
.imglist ul li {
  padding: 0; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
  float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
  display: inline; /*要素の表示形式指定(inlineはインラインレベルで表示(リストを横並び))*/
  margin-left: 26px; /*ボックス外側左の余白*/
  margin-bottom: 26px; /*ボックス外側下の余白*/
}
#preview {
  position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
  border: solid 1px #16160e; /*境界線の一括指定(solidは1本線,線の太さ,線の色)*/
  background-color: #16160e; /*背景色指定*/
  padding: 2px; /*ボックス内側の余白(値1つは上下左右をまとめて指定)*/
  display: none; /*要素の表示形式指定(noneは表示しない)*/
  color: #ffffff; /*文字色指定*/
}

.main-img {
  width: 60%;
  margin: 0 auto 20px auto;
  min-height: 500px;
  height: auto;
  display: flex;
  align-items: center;
}
.main-img img {
  height: auto;
  width: 100%;
}
.sub-img {
  display: flex;
  flex-wrap: wrap;
}
.sub-img li {
  margin-right: 1%;
  width: calc(95% / 5);
}
.sub-img img {
  height: auto;
  width: 100%;
}
@media (max-width: 600px) {
  .main-img {
    width: 100%;
    min-height: 380px;
  }
}
.allitem{
  margin: 3em auto 5em auto;
}


/* リクルート */
.job-t{
  margin-bottom: 3em;
}
.job-title{
  background-color: #69A3D7 !important;
  text-align: center !important;
  font-size: 1.25em;
  color: #FFFFFF !important;
}
.job-b{
  background-color: #69A3D7;
padding: 0.3em 1em;
color: #FFFFFF;
border-radius: 20px;
border: 3px #69A3D7 solid;
margin: 0 auto 5em auto;
display: block;
width: 50%;
min-width: 200px;
text-align: center;
}
.job-b:hover{
  background-color: #FFFFFF;
  color: #69A3D7;
}

/* プライバシーポリシー */
dl.pplist dt{
font-weight: bold;
}
dl.pplist dd{
margin-bottom: 2em;
padding-left: 1em;
}
dl.pplist dd ol{
  list-style: decimal;
  padding-left: 2em;
  margin-bottom: 1em;
}
dl.pplist dd ol li ol{
  margin-top: 1em;
}

@media only screen and (max-width: 767px) {
section p,dl.pplist{
padding: 0 2.5%;
font-size: 0.9em;
}
section.ppolicy{
  font-size: 0.9em;
}
}

/* サイトマップ */
.maplist{
  display: flex;
  justify-content: space-between;
}

.maplist dl{
  width: 48%;
}
.maplist dl dt{
background-color: rgb(240, 240, 240);
color: #222;
width: 100%;
margin-bottom: 2em;
border-radius: 5px;
height: 50px;
}

.maplist dl dt a{
  width: 100%;
  height: 100%;
  padding: 0 0 0 1em;
display: flex;
align-items: center;
}
.maplist dl dt a:hover{
  background-color: #69A3D7;
  color: #FFF;
  border-radius: 5px;
}
.maplist dl dt span{
  font-size: 0.8em;
  padding: 0.25em 0 0 0;
}
.maplist dl dt span::before{
  font-family:'Font Awesome 5 Free';
  margin:0 0.5em 0 1em;
  font-weight: 900;
  content: '\f0da';
}
.maplist dl dd{
  display: flex;
  flex-direction: column;
font-size: 0.9em;
margin: 0.8em 0 0.8em 4em;
text-indent: -2em;
padding-left: 2em;
}

.maplist dl dd:first-of-type{
  margin-top: -1em;
}

.maplist dl dd:last-child{
  margin-bottom: 2.4em;
}

.maplist dl dd a::before{
  font-family:'Font Awesome 5 Free';
  margin:0 0.5em 0 1em;
  font-weight: 900;
  content: '\f0da';
}
.maplist dl dd a:hover{
color: #69A3D7;
}


@media only screen and (max-width: 767px) {
  section .maplist{
    padding: 0 2.5%;
    }
    .maplist dl{
      width: 49%;
    }
    }
    @media only screen and (max-width: 500px) {
        .maplist{
          flex-direction: column;
        }
        .maplist dl{
          width: 100%;
        }
        .maplist dl dd{
        margin: 0.8em 0 0.8em 1em;
        }
        .maplist dl dd:last-child{
          margin-bottom: 2.4em;
        }
      }

      /* タイトル一覧 */
      .titlelist{
          display: flex;
          justify-content: space-between;
      }
      .titlelist dl{
        width: 48%;
      }
      .titlelist dl dt {
        background-color: rgb(240, 240, 240);
        color: #222;
        width: 100%;
        border-radius: 5px;
        width: 100%;
        padding: 0.5em 1em;
        margin-top: 2em;
        }
        .titlelist dl dt:first-child{
          margin-top: 0;
          }
          .titlelist dl dd{
            margin-top: 0.5em;
            text-indent: -2.5em;
            padding-left: 2.5em;
          }
          .titlelist dl dd a:before {
          font-family:'Font Awesome 5 Free';
          margin:0 0.5em 0 2em;
          font-weight: 900;
          content: '\f0da';
        }
        .titlelist dl dd a:hover{
          color: #69A3D7;
        }
        @media only screen and (max-width: 767px) {
          section .titlelist{
            padding: 0 2.5%;
            }
            .titlelist dl{
              width: 49%;
            }
            .titlelist dl dd a:before {
              margin:0 0.5em 0 1em;
            }

            }
            @media only screen and (max-width: 500px) {
                .titlelist{
                  flex-direction: column;
                }
                .titlelist dl{
                  width: 100%;
                }
                .titlelist dl dt:first-child{
                  margin-top: 2em;
                  }

                .titlelist dl dd{
                margin: 0.8em 0 0.8em 0em;
                }

                .titlelist dl dd:last-child{
                  margin-bottom: 2.4em;
                }
              }

              /* 問合せ */
              p.kakunin{
                margin-bottom: 1em;
                font-size: 1em;
              }

table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
  font-size: 0.95em;
}
table.formTable td,table.formTable th{
	border:1px solid rgb(240, 240, 240);
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:rgb(240, 240, 240);
	text-align:left;
}
table.formTable th span{
  font-size: 0.7em;
  margin-left: 0.5em;
  color: red;
}
form input[type="text"] {
border: #444 1px solid;
}
form textarea {
border: #444 1px solid;
max-width:500px;
width: 100%
}
div.soushin{
display: flex;
justify-content: space-evenly;
}
div.soushin input{
  width:40% ;
  padding: 1em;
  margin: 2em auto;
}
div.soushin input:hover{
background-color: #69A3D7;
color: #FFF;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:767px) {
  table.formTable{
    width:96%;
    margin-bottom: 2em;
  }
  div.soushin{
    flex-direction: column;
    }
    div.soushin input{
      width:80% ;
      margin: 1em auto;
    }

  }
@media screen and (max-width:600px) {
  table.formTable th, table.formTable td {
    width:auto;
    display:block;
  }
  table.formTable th {
    margin-top:5px;
    border-bottom:0;
  }
  form select, form input[type="text"], form textarea {
    width:98%;
    padding:5px;
    font-size:90%;
    display:block;
    margin: 0 auto;
  }
  form input[type="submit"], form input[type="reset"], form input[type="button"] {
    display:block;
    padding: 1em;
  }
  }

  /* 2025/10追加SNSアイコン */
  .fa-square-x-twitter{
  font-size: 60px;
    margin: 0 auto;
    display: block;
    width: fit-content;
  }