@charset "utf-8";

/* ----------------------------------------------------
  ローディング
---------------------------------------------------- */
.fadeUp{
  animation-name: fadeUpAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.start {
  background: #f9f8f6;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
}
.start img {
  width: 40vw;        /* 画面幅の40% */
  max-width: 200px;   /* 上限 */
  min-width: 200px;   /* 下限 */
  height: auto;
}

/* 小さいスマホ用 */
@media only screen and (max-width: 480px) {
  .start img {
    width: 35vw;  /* 画面幅の60%に拡大 */
    max-width: none;
  }
}
.start p {
  position: fixed;
  left: 50%;
  top: 48%;
  transform: translate(-50%,-50%);
  display: none;
  z-index: 9999;
}
.loading { 
  position: fixed;
  top: 69%;
  transform: translate(-50%,-50%);
  display: none;
  z-index: 9999;
  left: 50%;
  color: #ccc;
  font-size: 22px;
}
.loading span {
  display: inline-block;
  margin: 0 -.075em 50px;
  animation: loading .7s infinite alternate;
}
.loading span:nth-child(2) {animation-delay: .1s;}
.loading span:nth-child(3) {animation-delay: .2s;}
.loading span:nth-child(4) {animation-delay: .3s;}
.loading span:nth-child(5) {animation-delay: .4s;}
.loading span:nth-child(6) {animation-delay: .5s;}
.loading span:nth-child(7) {animation-delay: .6s;}

@keyframes loading {
  0% { transform: scale(1); }
  100% { transform: scale(0.8); }
}


/* ----------------------------------------------------
  h2
---------------------------------------------------- */
/* 左寄せ　背景画像あり　文字アニメーション
---------------------------------------------------- */
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}	


.h2_02{background: url("../images/h2_02.jpg") no-repeat scroll 50% 0% / cover;}
.h2_03{background: url("../images/h2_03.jpg") no-repeat scroll 50% 0% / cover;}
.h2_04{background: url("../images/h2_04.jpg") no-repeat scroll 50% 0% / cover;}
.h2_05{background: url("../images/h2_05.jpg") no-repeat scroll 50% 0% / cover;}
.h2_06{background: url("../images/h2_06.jpg") no-repeat scroll 50% 0% / cover;}
.h2_07{background: url("../images/h2_07.jpg") no-repeat scroll 50% 0% / cover;}
.h2_08{background: url("../images/h2_08.jpg") no-repeat scroll 50% 0% / cover;}
.h2_09{background: url("../images/h2_09.jpg") no-repeat scroll 50% 0% / cover;}

.h2_midasi_01_bgimg {
  position: relative;
  color: white;
  z-index: 0;
  overflow: hidden;
}
  
@media only screen and (max-width: 767px) {
.h2_midasi_01_bgimg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* ここで暗さを調整 */
  z-index: -1; /* 背景の後ろに来ないように注意 */
  }
}  
@media print, screen and (min-width: 768px) {
.h2_midasi_01_bgimg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* ここで暗さを調整 */
  z-index: -1; /* 背景の後ろに来ないように注意 */
  }
}


@media print, screen and (min-width: 768px) {
.h2_midasi_01_bgimg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* ここで暗さを調整 */
  z-index: -1; /* 背景の後ろに来ないように注意 */
  }
}

.h2_midasi_01{
	padding:80px 0 25px 0;
	text-align: center;
	color: #fff;
}
@media print, screen and (min-width: 768px) {.h2_midasi_01{padding:80px 0 80px 0;}}
@media print, screen and (min-width: 992px) {.h2_midasi_01{padding:150px 0 90px 0;}}
@media print, screen and (min-width:1200px) {.h2_midasi_01{padding:160px 0 100px 0;}}

.h2_midasi_01 p{
	font-size: 30px;
	line-height:45px;
	letter-spacing:2px;
  font-weight: 600;
	}
.h2_midasi_01 h2{
	font-size: 18px;
	letter-spacing:2px;
}
@media print, screen and (min-width: 768px) {
.h2_midasi_01 p{
	font-size: 45px;
	line-height:75px;
	letter-spacing:3px;  
	}
.h2_midasi_01 h2{
	font-size: 22px;
	letter-spacing:5px;
	}
}
@media print, screen and (min-width: 992px) {
.h2_midasi_01 p{
	font-size: 55px;
	line-height:90px;
	}
.h2_midasi_01 h2{
	font-size: 25px;
	}
}
@media print, screen and (min-width: 1200px) {
.h2_midasi_01 p{
	font-size: 70px;
	line-height:100px;
	}
.h2_midasi_01 h2{
	font-size: 27px;
	}
}

/* ----------------------------------------------------
    お知らせ：スクロールバー
---------------------------------------------------- */
#information-area_02::-webkit-scrollbar {
  width: 12px !important;
}
#information-area_02::-webkit-scrollbar-track {
  background: #999 !important;
  border-radius: 100px !important;
}
#information-area_02::-webkit-scrollbar-thumb {
  background: #999 !important;
  border-radius: 100px !important;
}
#information-area_02 {
  scrollbar-width: thin;
  scrollbar-color: #999 #f1f1f1;
}

/* ----------------------------------------------------
    お知らせ：ベース
---------------------------------------------------- */
#information-area_02 {
  line-height: 150%;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 100px;
  max-height: 300px;
  padding: 10px 20px;
}

@media print, screen and (min-width: 768px)  {
#information-area_02 {
  min-height: 100px;
  max-height: 400px;  
  padding: 20px 20px;
  }
}

@media print, screen and (min-width: 1200px) {
#information-area_02 {
  min-height: 100px;
  max-height: 500px;
  padding: 30px 40px; 
  }
}

.news_item{margin-bottom: 40px;}
@media print, screen and (min-width: 768px) {.news_item{margin-bottom: 50px;}}
/* ==========================================================================
   追加：一番最後のお知らせだけ、margin-bottomをゼロにする
   ========================================================================== */
.news_item:last-child {
  margin-bottom: 0 !important;
}

@media only screen and (max-width: 767px) {.news_item .btn01{margin-bottom: 10px;}}

.news_date i{
  font-size: 8px;
  margin-right: 10px;
  margin-bottom: 3px;
  vertical-align: middle;
}
.news_date .new{
  color: #2dccbe;
  font-weight: 900;
  font-size: 14px;
  margin-left: 15px;
}
.news_text{
  margin-bottom: 8px;
}
.news_item .photo-ofi{border-radius: 10px;}


/* ----------------------------------------------------
  カタログ　アイテムボックス（全体リンク）
---------------------------------------------------- */
/* アイテム
----------------------------- */
.item_panel_link{
  display: block;
  text-decoration: none;
  margin-bottom: 30px;
}
@media print, screen and (min-width: 768px) {
.item_panel_link{
  margin-bottom: 50px;
  }
}

/* アイテムボックス リンク
----------------------------- */
a.item_panel_link:hover .item_panel {
  border: 2px solid #2dccbe;
  /*box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);*/
  transition-duration: 300ms;
}
.item_panel_link:link,
.item_panel_link:visited,
.item_panel_link:hover,
.item_panel_link:active{
  text-decoration:none;
  color:#222 !important;
}

/* アイテム全体
----------------------------- */
.item_panel{
  background: #fff; /* 背景色 */  
  display:grid;
  grid-template-columns: 1fr;
  gap: 15px;
  padding: 20px;
  border: 2px solid #fff;
  border-radius: 10px;  
}
@media screen and (min-width: 768px) {
  .item_panel {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px;
  }
}
@media screen and (min-width: 992px) {
  .item_panel {
    grid-template-columns: 2fr 3fr;
    gap: 30px;
    padding: 40px;
  }
}
@media screen and (min-width: 1200px) {
  .item_panel {
    grid-template-columns: 1.5fr 3fr;
    gap: 50px;
    padding: 50px;
  }
}

/* アイテムボックス 横要素
----------------------------- */
.item_panel_box {box-sizing: border-box;}

/* アイテムボックス タイトル
----------------------------- */
.item_panel_title{
  font-size: 20px;
  margin-bottom: 5px;
}
@media print, screen and (min-width: 768px) {
.item_panel_title{
  font-size: 25px;
  margin-bottom: 15px;
  }
}

/* アイテムボックス テーブル
----------------------------- */
@media only screen and (max-width: 767px) {
.item_table{
	width: 100%;
  font-size: 14px;
	border-collapse: collapse;
	background: #fff;
  margin-bottom: 15px;  
}
.item_table th{
  width: 105px;
	padding: 7px 0; 
	text-align: left;
	display: table-cell;
	font-weight: normal;
  vertical-align: middle;
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 1px solid #ddd;
}
.item_table td{
	padding: 7px 0 7px 7px;
  line-height: 22px;
	display: table-cell;
  vertical-align: middle;
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 1px solid #ddd;
	}
}
.item_table th i{
  color: #2dccbe;
  vertical-align: middle;  
  font-size: 20px;
  margin-right: 3px;
}

@media print, screen and (min-width: 768px) {
.item_table{
	width: 100%;
	border-collapse: collapse;
	background: #fff;
  margin-bottom: 30px;
}
.item_table th{
  width: 150px;
	padding: 10px 0;
	text-align: left;
	display: table-cell;
  vertical-align: middle;
	font-weight: normal;
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 1px solid #ddd;
}
.item_table td{
	padding: 10px 0 10px 10px;
	display: table-cell;
	vertical-align: middle;
	border-top: 0px;
	border-right: 0px;
	border-left: 0px;
	border-bottom: 1px solid #ddd;
	}
.item_table th i{
  font-size: 22px;
  margin-right: 8px;
  }  
}

/*  アイテムボックス 詳細ボタン
----------------------------- */
.item_link_btn {
  text-align: center;    
  display: inline-block;
  color: #fff;
  background: #222;  
  width: 230px;
  padding: 15px 2px;
  border: 0px;
  border-radius: 100px;
  transition-duration: 300ms;
}
.item_panel_link:hover .item_link_btn {
  color: #fff;  
  background: #2dccbe;
}
@media print, screen and (min-width: 768px) {
.item_link_btn {
  width: 270px;
  }
}

.panel_btn_position{text-align: center;}
@media print, screen and (min-width: 768px) {.panel_btn_position{text-align: right;}}


/* ----------------------------------------------------
   リンクカード
---------------------------------------------------- */
.linkcard_01{
  display:block;
  width:100%;
  padding:25px;
  border-radius: 15px;
  background:#fff;
  color:#5f655b;
  text-decoration:none;
  box-sizing:border-box;
  position:relative;
  border:2px solid #222;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .3s ease,
    color .3s ease;
}

@media print, screen and (min-width: 768px) {
.linkcard_01{
  margin-top: 70px;
  padding:30px;
  border:0px;  
  }
}
@media print, screen and (min-width: 992px) {
.linkcard_01{
  margin-top: 130px;
  padding:30px 40px;
  }
}
@media print, screen and (min-width: 1200px) {
.linkcard_01{
  margin-top: 130px;
  padding:50px 40px;
  }
}

.linkcard_01 p img{width:80px;}
@media print, screen and (min-width: 992px) {.linkcard_01 p img{width:100px;}}
@media print, screen and (min-width: 1200px) {.linkcard_01 p img{width:120px;}}

/* hover */
.linkcard_01:hover{
  background:#f1f9f8;
  transform:translateY(-6px);
  box-shadow:0 18px 35px rgba(0,0,0,.12);
}

/* hover
--------------------------- */
.linkcard_01:hover .company-title{
  color:#ccc;
}

/* PCで高さ揃える
--------------------------- */
@media print, screen and (min-width: 768px) {
.linkcard_01{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  width:100%;
  }
}


/* ----------------------------------------------------
	   ページング
---------------------------------------------------- */
.paging { text-align: center; font-size: 90%;}
.paging span.current,
.paging span.paging-text{
	margin:0px 0.5px;
	color:#333;
	border:2px solid #333;
	zoom:1;
	display:inline-block;
	overflow:hidden;
	text-decoration:none;
	background: #fff;
  border-radius: 5px;  
}
.paging span.paging-text a{
	padding:5px 8.5px;
	display:block;
	color: #333;
}
.paging span.current{
	background: #333;
	border:2px solid #333;
	color:#fff;
	zoom:1;
	padding:5px 8.5px;
	text-decoration:none;
	display:inline-block;
	cursor:pointer;
  border-radius: 5px;
}
.paging span.paging-text a:hover{
	background: #333;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
	opacity: 1;
}

@media print, screen and (min-width: 768px) {
	.paging { font-size: 100%;}
	.paging span.current,
	.paging span.paging-text{margin:0px 2px;}
	.paging span.paging-text a{padding:10px 15px;}
	.paging span.current{padding:10px 15px;}
}


/* ----------------------------------------------------
	 カテゴリー（カタログ）
---------------------------------------------------- */
/* 共通余白　必須class
--------------------------- */
.tenkai_ctrg{
  padding:0 0 20px 0;
}

@media print, screen and (min-width: 1200px) {
.tenkai_ctrg{
    padding:0 0 30px 0;
  }
}

/* アコーディオン基本
--------------------------- */
.tenkai_ctrg .accordion dt{
  display:block;
  width:100%;
  padding:15px 20px;
  font-weight:normal;
  color:#fff;
  background:#2dccbe;/* 背景　メインカラー */
  cursor:pointer;
}

.tenkai_ctrg .accordion dd{
  display:none;
}

.tenkai_ctrg .accordion dd ul{
  list-style:none;
  padding:0;
  margin:0;
}

.tenkai_ctrg .accordion dd li a{
  display:block;
  padding:15px 40px 15px 20px;
  border-top:1px solid #eee;
  transition:.3s;
  position:relative;
}

/* 縦メニュー　角丸
--------------------------- */
@media only screen and (max-width: 767px) {
.tenkai_ctrg .accordion dt{
  border-radius:10px 10px 0 0;
  }
.tenkai_ctrg .accordion dd li:last-child a{
  border-radius:0 0 10px 10px;
  border-bottom:none;
  }
}

@media print, screen and (min-width: 768px) {
.tenkai_ctrg--b .accordion dd li:first-child a{
  border-radius:10px 10px 0 0;
  }
.tenkai_ctrg--b .accordion dd li:last-child a{
  border-radius:0 0 10px 10px;
  }
}

/* リンク
--------------------------- */
.tenkai_ctrg .accordion dd li a:link,
.tenkai_ctrg .accordion dd li a:visited{
  color:#222;
  background:#fff;
}

.tenkai_ctrg .accordion dd li a:hover{
  color:#222;
  background:#eee;  
}

/* アイコン
--------------------------- */
.tenkai_ctrg .accordionIcon{
  position:relative;
  float:right;
  width:24px;
  height:24px;
}

.tenkai_ctrg .accordionIcon span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:#fff;
  transition:.4s;
}

.tenkai_ctrg .accordionIcon span:nth-of-type(1){top:0;}
.tenkai_ctrg .accordionIcon span:nth-of-type(2){top:11px;}
.tenkai_ctrg .accordionIcon span:nth-of-type(3){bottom:0;}

.tenkai_ctrg .active .accordionIcon span:nth-of-type(1){
  transform:translateY(11px) rotate(-315deg);
}

.tenkai_ctrg .active .accordionIcon span:nth-of-type(2){
  opacity:0;
}

.tenkai_ctrg .active .accordionIcon span:nth-of-type(3){
  transform:translateY(-11px) rotate(315deg);
}

/* 現在選択中のカテゴリ
--------------------------- */
@media only screen and (max-width: 767px) {
.tenkai_ctrg .navon{
  background:#eee !important;
  color:#222 !important;
  }
}

@media print, screen and (min-width: 768px) {
.tenkai_ctrg .navon{
  background:#2dccbe !important; /* 選択中　背景色 */
  color:#fff !important;
  }
}

/* ----------------------------------------------------
   カテゴリ Aタイプ（横並びボタン）
---------------------------------------------------- */
/* 矢印
--------------------------- */
@media only screen and (max-width: 767px) {
.tenkai_ctrg--a .accordion dd li a::after{
	font-family: "Font Awesome 5 Free";
  content:"\f054";
  font-weight:900;
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  }
}

@media print, screen and (min-width: 768px) {
.tenkai_ctrg--a .accordion dd{
  display:block;
  }

.tenkai_ctrg--a .accordion dd ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  }

.tenkai_ctrg--a .accordion dd li{
  width:auto;
  }

.tenkai_ctrg--a .accordion dd li a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 20px;
  border-radius:100px;
  border:1px solid #222;
  background:#fff;
  white-space:nowrap;
  }
}

@media print, screen and (min-width: 992px) {
.tenkai_ctrg--a .accordion dd ul{
  gap:20px;
  }
}

/* ----------------------------------------------------
   カテゴリ Bタイプ（縦メニュー）
---------------------------------------------------- */
.tenkai_ctrg--b .accordion dd li a::after{
	font-family: "Font Awesome 5 Free";
  content:"\f054";
  font-weight:900;
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  }

@media print, screen and (min-width: 768px) {
.tenkai_ctrg--b .accordion dd{
  display:block;
  }
.tenkai_ctrg--b .accordion dd ul{
  display:block;
  }
.tenkai_ctrg--b .accordion dd li{
  width:100%;
  }
.tenkai_ctrg--b .accordion dd li a{
  text-align:left;
  border-radius:0;
  }
}


/* ----------------------------------------------------
  よくある質問
---------------------------------------------------- */
.accordion_area .accordion_one .ac_header {
  background-color: #fcfcfc;
  padding: 20px 50px 20px 20px;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition: .2s;
/*  border:1px solid #222;*/
}

@media print, screen and (min-width: 768px) {
.accordion_area .accordion_one .ac_header {
  padding: 20px 50px 20px 20px;
  position: relative;
  }
}

.accordion_area .accordion_one1:nth-child(odd) .ac_header {background-color: #d6f2ee;}
.accordion_area .accordion_one .ac_header .i_box {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}

@media print, screen and (min-width: 768px) {
.accordion_area .accordion_one .ac_header .i_box {
  right: 2rem;
  }
}

.accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
  position: absolute;
  content: "";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}
.accordion_area .accordion_one .ac_header .i_box:before {
  border-top: 2px solid #222;
  width: 20px;
  height: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.accordion_area .accordion_one .ac_header .i_box:after {
  border-left: 2px solid #222;
  width: 0;
  height: 20px;
  top: 0;
  bottom: 0;
  right: 9px;
  transition: .3s;
}
.accordion_area .accordion_one .ac_header.open .i_box:after {
  height: 0;
}

.accordion_area .accordion_one .ac_inner {
  display: none;
  padding: 20px 20px 20px 20px;
  border-left: 1px solid #c6d8d6;
  border-right: 1px solid #c6d8d6;
  border-bottom: 1px solid #c6d8d6;
  box-sizing: border-box;
  background: #fff;
}

/* faq
---------------------------------------------------- */
.p-faq__headinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.p-faq__headinner::before {
  position: absolute;
  top:-1px;  
  left: 0;
  content: "Q．";
  color: #2dccbe;
  font-weight: bold;
}
.p-faq__bodyinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.p-faq__bodyinner::before {
  position: absolute;
  top:5px;
  left: 0;
  content: "A．";
  color: #2dccbe;
  font-weight: bold;
}

/* faq
----------------------------- */
.p-faq__headinner_02 {
  display: block;
  position: relative;
  line-height: 1.5;
}
.p-faq__bodyinner_02 {
  display: block;
  position: relative;
  line-height: 1.5;
}


/* ----------------------------------------------------
  ステップバー
---------------------------------------------------- */
.stepbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;
  padding:0;
/*  margin:40px 0;*/
}

.stepbar li{
  flex:1;
  text-align:center;
  position:relative;
}

/* 進行バー
-------------------------- */
.stepbar li::before{
  content:"";
  position:absolute;
  top:12px;
  left:-50%;
  width:100%;
  height:4px;
  background:#ddd;
  z-index:0;
}

.stepbar li:first-child::before{
  display:none;
}

/* 過ぎたバー
-------------------------- */
.stepbar li.done::before{
/*  background:#2dccbe;*/
  background:#2dccbe;
}

/* 丸数字
-------------------------- */
.stepbar .num{
  display:flex;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  font-size:12px;
  border-radius:50%;
  background:#ddd;
  color:#fff;
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* 数字調整
-------------------------- */
.stepbar .num span{
  position:relative;
  left:1px;
  top:0.5px;
  }
@media print, screen and (min-width: 768px) {
.stepbar .num span{
  position:relative;
  left:1px;
  top:-1px;
  }
}

/* PC
-------------------------- */
/* ラベル */
.stepbar .label{
  display:inline-block;
  margin-top:8px;
  padding:0 4px 2px 4px;
  border:1px solid #ddd;
  text-align:center;
  color: #999;
  background:#ddd;
  font-size:10px;
  line-height: 19px;
  border-radius: 5px;
}

@media print, screen and (min-width: 768px) {
.stepbar .label{
  display:inline-block;
  margin-top:8px;
  padding:0 10px 2px 10px
  }
}

/* 完了ステップ
-------------------------- */
.stepbar li.done .num{
/*  background:#2dccbe;*/
  background:#2dccbe;
}

.stepbar li.done .label{
/*  background:#2dccbe;
  border-color:#2dccbe;*/
  background:#2dccbe;
  border-color:#2dccbe;  
  color:#fff;
}

/* 現在ステップ
-------------------------- */
.stepbar li.active .num{
/*  background:#2dccbe;*/
  background:#222;
}

.stepbar li.active .label{
/*  background:#2dccbe;
  border-color:#2dccbe;*/
  background:#222;
  border-color:#222;
  color:#fff;
}

/* タブレット以上
-------------------------- */
@media print, screen and (min-width:768px){
.stepbar li::before{
  top:16px;
  }
.stepbar .num{
  width:32px;
  height:32px;
  font-size:16px;
  }
.stepbar .label{
  margin-top:10px;
  padding:10px 14px;
  font-size:14px;
  min-width:70px;
  }
}

/* PC
-------------------------- */
@media print, screen and (min-width:992px){
.stepbar .label{
  min-width:200px;
  font-size:16px;
  }
}

/* ----------------------------------------------------
  質問ブロック
---------------------------------------------------- */
.question{
  border:1px solid #d9ece9;
  padding:20px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom: 20px;
  background: #fff;
}
@media print, screen and (min-width:768px){
.question{
  padding:30px;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom: 30px;
  }
}
@media print, screen and (min-width:992px){
.question{
  gap:20px;
  margin-bottom: 40px;
  }
}
@media print, screen and (min-width:1200px){
.question{
  padding:50px 60px 60px 60px;
  }
}

/* ----------------------------------------------------
  質問ブロック（条件無し）
---------------------------------------------------- */
.question_b{
  border:1px solid #d9ece9;
  padding:20px;
  border-radius:10px;
  margin-bottom: 20px;
  background: #fff;
}

/* タブレット */
@media print, screen and (min-width:768px){
.question_b{
  padding:30px;
  margin-bottom: 30px;
  }
}

/* PC */
@media print, screen and (min-width:992px){
.question_b{
  gap:20px;
  margin-bottom: 40px;
  }
}

/* 大画面 */
@media print, screen and (min-width:1200px){
.question_b{
  padding:50px 60px 60px 60px;
  }
}

/* ------------------------
  radio非表示
------------------------ */
.question input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* ------------------------
  見出し
------------------------ */
.question_title{
  width:100%;
  text-align:left;
  padding-bottom:10px;
  margin-bottom:5px;
  border-bottom:2px solid #2dccbe;
}
@media print, screen and (min-width:768px){
.question_title{
  font-size:25px;
  }
}

/* ------------------------
  文章
------------------------ */
.question_setsumei{width: 100%; text-align: center;}

/* ------------------------
  ラベル
------------------------ */
/*.question label{
  width:100%;
  max-width:350px;
}
@media print, screen and (min-width:768px){
.question label{
  flex:0 0 140px;
  }
}
@media print, screen and (min-width:992px){
.question label{
  flex:0 0 200px;
  }
}
@media print, screen and (min-width:1600px){
.question label{
  flex:0 0 250px;
  }
}*/

.sentaku_area label{
  width:100%;
}
@media print, screen and (min-width:768px){
.sentaku_area label{
  flex:0 0 150px;
  }
}
@media print, screen and (min-width:992px){
.sentaku_area label{
  flex:0 0 200px;
  }
}
@media print, screen and (min-width:1600px){
.sentaku_area label{
  flex:0 0 250px;
  }
}

/* ------------------------
  ボタン
------------------------ */
.question span{
  display:block;
  padding:12px 5px;
  border:1px solid #222;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  transition:.2s;
  text-align:center;
}
@media print, screen and (min-width:992px){
.question span{
  padding:20px 5px;
  font-size:20px;
  }
}

/* hover */
.question label:hover span{
  background:#2dccbe;
  border-color:#2dccbe;
  color:#fff;
}

/* 選択状態 */
.question input[type="radio"]:checked + span{
  background:#2dccbe;
  border-color:#2dccbe;
  color:#fff;
}

/* ----------------------------------------------------
  戻る　＆　次へボタン
---------------------------------------------------- */
.step-buttons{
  display:flex;
  justify-content:center;
  gap:20px;
}

/* ----------------------------------------------------
  postmailボタン
---------------------------------------------------- */
body:has([action*="postmail"]) .step-back-btn,
[id*="postmail"] .step-back-btn, .step-back-btn {
  box-shadow: none !important;
  border: none !important;
  background-image: none !important;
}

/* ----------------------------------------------------
  次へボタン
---------------------------------------------------- */
.step-next-btn{
  display:inline-block;
  width:250px;
  padding:15px 2px;
  text-align:center;
  letter-spacing:2px;
  color:#fff !important;
  background:#ddd;
  border-radius:10px;
  text-decoration:none;
  transition:.3s;
  
/* 立体感を消す */
  border: none;
  outline: none;
  appearance: none;  
}
.step-next-btn i{
  margin:0 0 0 3px;
}

@media print, screen and (min-width:992px){
.step-next-btn{
  width:300px;
  padding:20px 2px;
  font-size:20px;
  }
}

/* 選択完了 */
.step-next-btn:not(.disabled){
  background:#2dccbe;
}

/* 未回答 */
.step-next-btn.disabled{
  background:#ddd;
  color:#fff !important;
  pointer-events:none;
}

/* hover（有効時のみ） */
.step-next-btn:not(.disabled):hover{
  opacity:.85;
}

/* ----------------------------------------------------
  戻るボタン
---------------------------------------------------- */
.step-back-btn{
  display:inline-block;
  width:250px;
  padding:15px 2px;
  text-align:center;
  letter-spacing:2px;
  color:#fff !important;
  background:#999;
  border-radius:10px;
  text-decoration:none;
  transition:.3s;
}

@media print, screen and (min-width:992px){
.step-back-btn{
  width:300px;
  padding:20px 2px;
  font-size:20px;
  }
}

.step-back-btn:visited {
  color: #fff !important;
}
.step-back-btn:hover,
.step-back-btn:active {
  background: #bbb;
  letter-spacing: 3px;
  color: #fff !important;
  text-decoration: none !important;
}

.step-back-btn i{
  margin:0 3px 0 0;
}