/************** WEBサイト全体設定・既定定義の上書き ****************/
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.5px;
	color: #333333;
}

em {
	font-style: normal;
}

dl {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	border: 1px solid #ccc;
	border-bottom: none;
	margin-bottom: 20px;
	line-height: 1.5;
}

dt {
	font-weight: normal;
	background: #f5f5f5;
	padding: 10px;
	width: 150px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

dd {
	background: #fff;
	padding: 10px;
	width: calc(100% - 150px);
	border-bottom: 1px solid #ccc;
}

.dt--dtlong{
	width: 400px
}

.dd--dtlong{
	width: calc(100% - 400px);
}

@media only screen and (max-width: 480px) {
	dt {
		width: 100%;
		border-right: none;
	}
	dd, .dt--dtlong, .dd--dtlong {
		width: 100%;
	}
}

input{
	text-rendering: auto;
	color: fieldtext;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	appearance: auto;
	-webkit-rtl-ordering: logical;
	cursor: text;
	background-color: field;
	margin: 0em;
	padding: 1px 0px;
	border-width: 1px;
	border-style: inset;
	border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
	border-image: initial;
	padding-block: 1px;
	padding-inline: 2px;
}
input[type="number" i] {
  border-width: 1px;
	border-style: inset;
	border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}

input[type="radio" i] {
    background-color: initial;
    cursor: default;
    appearance: auto;
    box-sizing: border-box;
    margin: 0;
    padding: initial;
    border: initial;
}

input[type="checkbox"] {
	margin-right:5px;
	width:16px;
	height:16px;
}

input:not([type="image" i]) {
    box-sizing: border-box;
}

select:not(:-internal-list-box) {
    overflow: visible !important;
}

select {
		font-size:1.0em;
    text-rendering: auto;
    color: fieldtext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    box-sizing: border-box;
    align-items: center;
    -webkit-rtl-ordering: logical;
    background-color: field;
    cursor: default;
    margin: 0em;
    white-space: pre;
    border-width: 1px;
    border-style: solid;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    border-radius: 0px;

}
@media screen and (max-width: 480px){
	select {
	    width: 100%;
	}
}

textarea{
	border: 1px solid #000;
	padding: 10px;
	line-height: 1.3;
}

hr {
	margin-top: 1rem;
	margin-bottom: 1rem;
	border: 0;
	border-top: 1px solid rgba(0,0,0,.1);
}

/************** カラー ****************/

/* フォント */
.fontColor--white{ color: #fff; }

.fontColor--lightBlue{ color: #45c9dc; }
.fontColor--blue{ color: #2253c0; }

.fontColor--darkRed{ color: #c83839; }

.fontColor--lightGreen{ color: #B2D235; }
.fontColor--green{ color: #008000; }
.fontColor--deepGreen{ color: #4D7C9A; }

.fontColor--orange{ color: #ee7800; }
.fontColor--yellow{ color: #F2C618; }

/* ボーダー：全体 */
.borderColor--deepGreen{ border: 1px solid #4D7C9A; }

/* ボーダー：下線 */
.underline--lightBlue{ border-bottom: 1px solid #45c9dc; padding-bottom:0.2em  }
.underline--blue{ border-bottom: 1px solid #2253c0; padding-bottom:0.2em  }
.underline--darkRed{ border-bottom: 1px solid #c83839; padding-bottom:0.2em }
.underline--lightGreen{ border-bottom: 1px solid #B2D235; padding-bottom:0.2em  }
.underline--green{ border-bottom: 1px solid #008000; padding-bottom:0.2em  }
.underline--orange{ border-bottom: 1px solid #ee7800; padding-bottom:0.2em  }
.underline--yellow{ border-bottom: 1px solid #F2C618; padding-bottom:0.2em  }


/************** 汎用定義 ****************/
/***** responsive *****/
.pc	{ display:block!important; }
.mb	{ display:none!important; }
@media screen and (max-width: 480px) {
.pc	{ display:none!important; }
.mb { display:block!important; }
}

.inner{
  max-width: 100%;
  margin: 0 auto;
}

@media (min-width: 1200px){
  .inner{
    max-width: 1140px;
  }
}

.row{
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 480px){
	.cl-reverse-mb{
		flex-direction: column-reverse;
	}
}



/* 汎用：display制御 */
.d-flex{
	display: flex;
}

.d-flex__wrap{
	flex-wrap: wrap;
}

.gap-5{
	gap: 5px;
}

/* 汎用：サイズ調整 */
.width-max, .img-fluid{
  width: 100%;
  height: auto;
}

.width-half{
  width: 49.7%;
  height: auto;
}

.width-two-thirds{
  width: 66.6%;
  height: auto;
}

@media screen and (max-width:480px){
	.width-sm-max {
	  width: 100%;
	  height: auto;
	}
}

@media screen and (min-width:500px){
	.max-h-300{
		max-height:300px;
		width: auto;
	}

	.max-h-500{
		max-height:500px;
		width: auto;
	}
}

.max-w-600{
	max-width:600px;
	height: auto;
}

@media screen and (max-width:480px){
	.max-w-600{
		max-width: 100%;
	}
}


/* 汎用：位置調整 */
.mt-1 { margin-top : 0.25rem ; }
.mt-2 { margin-top : 0.50rem ; }
.mt-3 { margin-top : 1.00rem ; }
.mt-4 { margin-top : 1.50rem ; }
.mt-5 { margin-top : 3.00rem ; }
.mt-6 { margin-top : 4.00rem ; }
.mr-1 { margin-right : 0.25rem ; }
.mr-2 { margin-right : 0.50rem ; }
.mr-3 { margin-right : 1.00rem ; }
.mr-4 { margin-right : 1.50rem ; }
.mr-5 { margin-right : 3.00rem ; }
.mb-1 { margin-bottom : 0.25rem ; }
.mb-2 { margin-bottom : 0.50rem ; }
.mb-3 { margin-bottom : 1.00rem ; }
.mb-4 { margin-bottom : 1.50rem ; }
.mb-5 { margin-bottom : 3.00rem ; }
.ml-1 { margin-left : 0.25rem ; }
.ml-2 { margin-left : 0.50rem ; }
.ml-3 { margin-left : 1.00rem ; }
.ml-4 { margin-left : 1.50rem ; }
.ml-5 { margin-left : 3.00rem ; }

.pd-1 { padding     : 0.25rem ; }
.pd-2 { padding     : 0.50rem ; }
.pd-3 { padding     : 1.00rem ; }
.pd-4 { padding     : 1.50rem ; }
.pd-5 { padding     : 3.00rem ; }

.pt-1 { padding-top : 0.25rem ; }
.pt-2 { padding-top : 0.50rem ; }
.pt-3 { padding-top : 1.00rem ; }
.pt-4 { padding-top : 1.50rem ; }
.pt-5 { padding-top : 3.00rem ; }
.pr-1 { padding-right : 0.25rem ; }
.pr-2 { padding-right : 0.50rem ; }
.pr-3 { padding-right : 1.00rem ; }
.pr-4 { padding-right : 1.50rem ; }
.pr-5 { padding-right : 3.00rem ; }
.pb-1 { padding-bottom : 0.25rem ; }
.pb-2 { padding-bottom : 0.50rem ; }
.pb-3 { padding-bottom : 1.00rem ; }
.pb-4 { padding-bottom : 1.50rem ; }
.pb-5 { padding-bottom : 3.00rem ; }
.pl-1 { padding-left : 0.25rem ; }
.pl-2 { padding-left : 0.50rem ; }
.pl-3 { padding-left : 1.00rem ; }
.pl-4 { padding-left : 1.50rem ; }
.pl-5 { padding-left : 3.00rem ; }

/* スペーサー */
.spacer-pc-3 {
  padding-top: 1.00rem;
}
@media screen and (max-width: 480px)
{
	.spacer-pc-3 {
	  padding-top: 0;
	}
}

/* 文字位置 */
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }

/* 汎用CSS：フォントカラー */
.font-white, .font_white{
  color:#fff;
}

.font-red, .font_red{
	color:red;
}

/* 汎用：フォント装飾 */
.f06em{	font-size:0.6em; }
.f07em{	font-size:0.7em; }
.f08em{	font-size:0.8em; }
.f09em{	font-size:0.9em; }
.f10em{	font-size:1.0em; }
.f12em{	font-size:1.2em; }
.f13em{	font-size:1.3em; }
.f14em{	font-size:1.4em; }
.f15em{	font-size:1.5em; }
.f20em{	font-size:2.0em; }

.bold{ font-weight: bold; }

.lineHeight--regular{
	line-height: 1.8em;
}

/* 汎用CSS：背景カラー */
.bg-white {
		background-color: #fff;
}

.bg-black2 {
    background-color: #292c2f;
}

.bg-gray3 {
    background-color: #f3f3f3;
}

.bg_red{
	background: #c83839;
}

.bg_darkblue{
	background:#3f4b54;
}

.bg_deepskyblue{
	background:#00bfff;
}


.bg_keycolor_deepGreen{
	background: #4D7C9A;
}

/* list装飾 */
.list--disc{
	padding-left: 2.0em;
	list-style: disc;
}

/*  汎用：boostrap風のflexサイズ制御 */
.col-4 {
    -ms-flex: 0 0 31%;
    flex: 0 0 31%;
    max-width: 31%;
}
.col-6 {
    -ms-flex: 0 0 48%;
    flex: 0 0 48%;
    max-width: 48%;
}
.col-8 {
    -ms-flex: 0 0 64%;
    flex: 0 0 64%;
    max-width: 64%;
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 576px){
	.col-sm-2 {
	    -ms-flex: 0 0 16.666667%;
	    flex: 0 0 16.666667%;
	    max-width: 16.666667%;
	}

  .col-sm-4 {
      -ms-flex: 0 0 31%;
      flex: 0 0 31%;
      max-width: 31%;
  }

	.col-sm-5 {
	    -ms-flex: 0 0 41.666667%;
	    flex: 0 0 41.666667%;
	    max-width: 41.666667%;
	}

  .col-sm-6 {
      -ms-flex: 0 0 48%;
      flex: 0 0 48%;
      max-width: 48%;
  }

	.col-sm-7 {
	    -ms-flex: 0 0 58.333333%;
	    flex: 0 0 58.333333%;
	    max-width: 58.333333%;
	}

	.col-sm-10 {
	    -ms-flex: 0 0 83.333333%;
	    flex: 0 0 83.333333%;
	    max-width: 83.333333%;
	}

  .col-sm-12 {
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}
}

/************** コンテナ制御 ****************/

.container{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

@media screen and (max-width: 480px) {
	.container{
			padding: 0 10px;
	}
}

@media (min-width:  576px){ .container { max-width: 540px; } }
@media (min-width:  768px){ .container { max-width: 720px; } }
@media (min-width:  992px){ .container { max-width: 960px; } }
@media (min-width: 1200px){ .container { max-width: 1140px; } }

@media (min-width: 576px){
	.container, .container-sm {
	    max-width: 540px;
	}
}
@media (min-width: 768px){
	.container, .container-md, .container-sm {
	    max-width: 720px;
	}
}
@media (min-width: 992px){
	.container, .container-lg, .container-md, .container-sm {
	    max-width: 960px;
	}
}
@media (min-width: 1200px){
	.container, .container-lg, .container-md, .container-sm, .container-xl {
	    max-width: 1140px;
	}
}

.container p {
	margin-bottom: 0.85em;
	line-height: 1.8;
}
@media screen and (max-width: 480px) {
	.container p {
		font-size:0.9em;
		line-height: 2.0;
	}
}

/*********** リンク関連 **********/
p a, table a, .txtLinker_Right a, dl a{
	color:#007bff;
	transition: 0s;
	text-decoration: underline;
}

a:hover, p a:hover, table a:hover, dl a:hover{
	text-decoration: none;
}

.txtLinker_Right { text-align: right; }

a img { transition: 0.3s; }

a:hover img {
  opacity:0.7;
  filter:alpha(opacity=70);
  -ms-filter:"alpha(opacity=70)";
}

a.LinkColorBlue {
    color: #41c0ed;
    text-decoration: underline;
}

/***************************/
/* パン屑リスト             */
/***************************/
.breadcrumb_wrap{ width: 100%; }

.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: 0.25rem;
		background-color: inherit;
    padding: 28px 0 0 0;
    font-size: 13px;
		line-height: 1.5em;
}

@media screen and (max-width:480px){
	.breadcrumb{
		padding: 1.0em 0;
	}
}

.breadcrumb a {	color: #007bff; }
.breadcrumb a:hover {
	opacity: 1.0;
	text-decoration: underline;
}

.breadcrumb-item.active { color: #6c757d; }
.breadcrumb-item+.breadcrumb-item { margin-left: 0.5rem; }
.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    margin-right: 0.5rem;
    color: #6c757d;
    content: "/";
}

/********** 画面最上部に戻るボタン *******************/
#page_top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom: 190px;
    background: #4D7C9A;
    opacity: 0.7;
    border-radius: 50%;
    z-index: 2;
}
@media screen and (max-width: 480px) {
	#page_top {
		bottom: 80px;
	}
}

#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f106';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -5px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

#page_top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}

/* ロールオーバーアニメーションの除外：グローバルナビ */
.gNav__multi a:hover{ text-decoration: none; }
.gNav__multi a, .gNav__multi img{ transition: 0.0s; }

/************** 共通ヘッダー ****************/
.header__h1tag h1, .header__h1tag p{
	font-size: 11px;
	font-weight: normal;
}

@media screen and (max-width: 480px) {
	.header__h1tag{ display:none; }
}

.header__topBox{
  margin: 0 59px;
	display: flex;
	justify-content: space-between;
}

.header__h1tag {
	display: flex;
	align-items: flex-end;
}

@media screen and (max-width:480px){
	.header__topBox{
		display: none;
	}
}

.header__top
{
  display:flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  margin: 0 59px 10px;
}
@media screen and (max-width: 1200px) {
	.header__top
	{
		margin: 0;
		padding: 0 10px;
	}
}

.header__rightBox{ display: flex; gap: 15px; }

.header__leftBox{
	display: flex;
}

.header__leftBox > *:not(:first-child){
  margin-right: 10px;
}

.siteLogo{
	display: flex;
	align-items: center;
}

.header__leftBox .siteLogo img{
  height:auto;
  width:290px;
	margin-right: 0.7em;
}

@media screen and (max-width: 1200px) {
  .header__leftBox .siteLogo img{
    height: 60px;
    width: auto;
  }
}
@media screen and (max-width: 480px) {

	.header__leftBox{
		width:100%;
		justify-content: space-between;
	}

  .header__leftBox .siteLogo img{
    height:50px;
    width:200px;
		margin:0;
		padding: 5px;
  }

	.header__top
	{
		flex-wrap: wrap;
		width: 100%;
		margin:0;
		padding:0;
		background: #fff;
	}

	.header__rightBox{
		background: #fff;
		gap: 0;
	}

	.header__rightBox{
		flex-wrap: wrap;
		width:100%;
	}
	.contactBanner{
		padding:5px;
		background: #fff;
		width: 100%;
	}
}/* @media */

.header__leftBox img, .header__rightBox, .header__rightBox img{
  height: 60px;
}
@media screen and (max-width:480px){
	.header__leftBox img, .header__rightBox, .header__rightBox img{
	  height: auto;
	}
}
.businessNegotiation {
		margin: auto 0;
		background: #47BBC5;
		color: #fff;
		height: 60px;
		width: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1.3em;
}
@media screen and (max-width: 480px){
	.businessNegotiation__pc {
			display: none;
	}
	.businessNegotiation {
			width: 100px;
			text-align: center;
	}
}
@media screen and (min-width: 481px){
	.businessNegotiation__mobile {
		display: none;
	}
}

@media screen and (max-width: 480px){
	.mobile_header_spacer {
		width: 15%;
	}
}

nav{
  height: 42px;
  background: #e1e1e1;
}

@media (min-width: 576px){
  .navbar-expand-sm {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

.navbar{
  position: relative;
}

.gNav {
  display: flex;
  width: 1140px;
  height: 40px;
  justify-content: space-between;
	font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.gNav > li {
  height: 42px;
  line-height: 42px;
}

.gNav__product-list, .gNav__guide-list {
  visibility: hidden;
  z-index: 2;
}

.gNav__product-list {
  position: absolute;
  top: 46px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background: rgba(255,255,255,1);
  display: flex;
  flex-wrap: wrap;
  box-shadow: rgba(0,0,0,0.2) 0px 3px 2px 1px;
}

.gNav__guide-list {
  position: absolute;
  top: 46px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background: rgba(255,255,255,1);
  display: flex;
  flex-wrap: wrap;
  box-shadow: rgba(0,0,0,0.2) 0px 3px 2px 1px;
}

.gNav__multi > a:hover{
  font-size:0.84em;
}

.gNav__multi > a{
  transition: 0.3s;
}

.gNav__multi:hover .gNav__product-list, .gNav__multi:hover .gNav__guide-list  {
  top: 40px;
  visibility: visible;
  background-color: #f3f3f3;
}

.gNav__product-list > li {
  position: relative;
  width: 16.6%;
  line-height: 1;
  text-align: center;
  padding:15px 40px;
  border-top: 1px solid #e1e1e1;
}

.gNav__guide-list > li {
  position: relative;
  width: 25.0%;
  line-height: 1;
  text-align: center;
	border-top: 1px solid #e1e1e1;
}

.gNav__product-list > li:not(:last-child):after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 20px;
  height: 80%;
  width: 1px;
  background-color: #e1e1e1;
}

.gNav__product-list > li:first-child , .gNav__product-list > li:last-child,
.gNav__guide-list > li:last-child {
  width: 100%;
  padding:0;
  height: 45px;
  line-height: 3.5;
  background-color: #f3f3f3;
  transition: 0.0s;
}

.gNav__guide-list li:hover{ background: #e1e1e1; }

.gNav__product-list > li:last-child > a,
.gNav__guide-list > li:last-child > a {
  display: block;
	padding: 0;
}

.gNav > li > a::before{
  content: "\f0da";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #7AAEB2;
  margin-right: 0.25em;
}

.gNav li a{
  color: #060203;
  font-size: 0.8em;
	font-weight: bold;
}

.gNav__product-list li a {
	padding: 20px 30px;
	display: block;
}

.gNav__guide-list li a {
	padding: 30px;
	display: block;
}

.gNav__product-list li img{
		width: 100%;
    margin-bottom:10px;
}

.button{
  height: 100%;
  text-align: center;
}

.header_inquiry_button{
	text-align: center;
	display: flex;
	align-items: end;
}
.header_inquiry_button a{
	display: flex;
	height: 40px;
	background: #4D7C9A;
	color: #fff;
	border-radius: 3px;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0 10px;
}
.header_inquiry_button a:hover{
	text-decoration: underline;
}

@media screen and (max-width: 480px) {
	.header_inquiry_button{
		display: none;
	}
}

.button a{
  display: block;
  height: 100%;
  padding: 1.3em 0;
  width: 8em;
	background: #4D7C9A;
	color:#fff;
}

.header_scrolled {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 100vw;
  min-height: unset;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  animation: header_drop .5s ease-out 0s 1 alternate none running;
}
@keyframes header_drop {
      0% { top: -63px }
    100% { top: 0 }
}

/**** ハンバーガーメニューボタン ******/
.hamburger { display:block; position:absolute; z-index:1001; left:5px; top:5px; width:42px; height: 42px; cursor: pointer; text-align: center; }
.hamburger span { display:block; position: absolute; width:25px; height :2px; left :6px; background:#BBBBBB; transition :0.3s ease-in-out; }
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 25px; }

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) { top:16px; left: 6px; background :#fff; transform :rotate(-45deg);}
.hamburger.active span:nth-child(2),.hamburger.active span:nth-child(3) { top: 16px; background :#fff; transform :rotate(45deg); }

/* モバイルヘッダー見積もりアイコン */
.header-icon-calc { display:block; position: absolute; z-index:3000; right:5px; top :5px; width:42px; height: 42px; cursor: pointer; text-align: center}
.header-icon-calc img { width:25px; height: auto; }

/* メニュー背景　*/
nav.globalMenuSp { position: absolute; z-index:2000; top :0; left:0; color: #fff; background: #333; text-align: center; width: 100%; transform: translateY(-100%); transition: all 0.6s; height:640px;}
nav.globalMenuSp ul { margin: 0 auto; padding: 0; width: 100%}
nav.globalMenuSp ul li { list-style-type: none; padding: 0; width: 100%; transition: .4s all}
nav.globalMenuSp ul li:first-child { background: #000; padding: 1em 0 }
nav.globalMenuSp ul li:last-child { padding-bottom: 0; }
nav.globalMenuSp ul li:hover{ background :#ddd; }
nav.globalMenuSp ul li a { display: block; color: #fff; padding: 1em 0; text-decoration :none; border-style: solid; border-width: 1px; border-color: #222;}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active { opacity: 100; display: block; transform: translateY(0%); }

/************** ヒーローヘッダー ****************/
.heroHeader{ padding: 14px 0; }
.heroHeader__textBox{
  margin: 20px auto 30px;
  background: #fff;
  max-width: 1140px;
  border: 2px solid #7AAEB2;
  text-align: center;
  padding: 10px;
  font-size: 16px;
	font-weight: bold;
	line-height: 1.5em;
}

.heroHeader > .container { height: auto; }

@media screen and (max-width: 480px) {
	.heroHeader{ padding: 0; margin-top: 10px;}
  .heroHeader__textBox{
    margin: 0px auto 10px;
    font-size: 14px;
    padding: 5px;
  }
	.heroHeader > .container { height: auto; }
}

/************* コンテンツエリア  ****************/
.sidebar{
  flex: 0 0 25%;
  max-width: 25%;
	padding: 0px;
}

.contentsBox{
  flex: 0 0 75%;
  max-width: 75%;
}

.contentsBox__full{
  flex: 0 0 100%;
  max-width: 100%;
}


.contentsBox-slider img{
	width:100%;
	height:100%;
	aspect-ratio: 57 / 16;
}

@media screen and (max-width: 480px){
	.contentsBox-slider img{
		width: 100%;
		height:auto;
		aspect-ratio: 5 / 6;
	}
}

.contentsBox, .contentsBox.topPage{ padding-left:20px; }

.sidebar img { width: 100%; height: auto; }

@media screen and (max-width: 480px) {
	.sidebar{
	  flex: 0 0 100%;
	  max-width: 100%;
		padding-right: 0px;
    margin-top:30px;
	}
	.contentsBox{
	  flex: 0 0 100%;
	  max-width: 100%;
	}
	.contentsBox, .contentsBox.topPage{	padding:0; }
}

.sidebar > a { display: block; }

/*** コンテンツエリア：サイドバー ***/
.sticky{ position: sticky; top: 60px; }
.sticky a{ display:block; }

.sidebar_contentBox > p {
	font-size: 1.2em;
	font-weight: bold;
	border-bottom: 1px solid black;
	padding-bottom: 10px;
	padding-left:43px;
	margin-bottom: 5px;
	position: relative;
}

.sidebar_contentBox span:before {
    position: absolute;
    left: 5px;
    bottom: 7px;
    display: block;
    content: "";
    width: 32px;
    height: 32px;
}

.sidebar_contentBox.price span:before{ background: url(../img/sidebar_price.png) no-repeat; }
.sidebar_contentBox.guide span:before{ background: url(../img/sidebar_guide.png) no-repeat; }
.sidebar_contentBox.company span:before, .sidebar_contentBox.column span:before{ background: url(../img/sidebar_realize.png) no-repeat; }
.sidebar_child.recommend { background-image: url(../img/productlist_recommend.jpg)}
.sidebar_child.backparts { background-image: url(../img/productlist_backparts.jpg)}
.sidebar_child.shape { background-image: url(../img/productlist_shape.jpg)}
.sidebar_child.size { background-image: url(../img/productlist_size.jpg)}
.sidebar_child.surface { background-image: url(../img/productlist_surface.jpg)}
.sidebar_child.special { background-image: url(../img/productlist_special.jpg)}
.sidebar_child.machine { background-image: url(../img/productlist_machine.png)}

.sidebar_child  {display: block; position: relative;}
.sidebar_child :after{
	content: "";
	position: absolute;
	right: 0.2em;
	top: 50%;
	margin-top: -4px;
	transition: all .2s;
	width: 6px;
	height: 6px;
	border-top: solid 1px black;
	border-right: solid 1px black;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.sidebar_itemLineupList .sidebar_child {
    background-size: 48px;
    background-position: left center;
    background-repeat: no-repeat;
}

.sidebar_itemLineupList .sidebar_child a { padding-left: 52px; }

.sidebar_child a {
	display: block;
	padding-left: 0;
}

.sidebar_child {
	line-height: 3.6;
  font-size: 14px;
  border-bottom: 1px solid #eeeeee;
  margin: 0 4px;
}

/*** コンテンツエリア：右側セクション */

.title {
	display: block;
	text-align: center;
	font-size: 1.5em;
	letter-spacing: 1px;
	margin-bottom: 1.5em;
	border-bottom: 1px dashed #4D7C9A;
	padding-bottom: 0.7em;
	line-height: 1;
}

@media screen and (max-width: 480px) {
  .title { font-size: 20px; }
}

.lineup__itemList {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2.5%;
	row-gap: 35px;
	margin-top:28px;
}

.lineup__itemList li{ flex: 18%; max-width: 18%; }

.lineup__img img {
	width: 100%;
	height: 205px;
	border: 1px solid #e1e1e1;
	object-fit: contain;
	background-color: #fff;
}

.lineup__label { font-weight: bold; margin-top:12px; font-size:0.9em; }
.lineup__label > .lineup__label__name { display: block; width: 100%; margin-bottom: 4px; }
.lineup__label > .lineup__label__valume{ display: block; color: #c83839; }

.lineup__itemList p{
	line-height: 1.7em;
	margin-top: 10px;
	font-size: 0.8em;
}

@media screen and (max-width: 480px) {
	.lineup__itemList li{	flex: 49.0%; max-width: 49.0%; }
	.lineup__img img { height: 190px; }
  .lineup__label{ line-height: 1.4; margin-top:7px; }
  .lineup__label > h2{ font-size: 15px; }
  .lineup__itemList{ row-gap:20px; column-gap: 2.0%; }
  .lineup__itemList p{ display: none; }
}

.lineup__itemContent, .lineup__itemContent__subTab{	display: none; }
.lineup__itemContent { margin-bottom: 3em; }
.lineup__itemContent > span{
	display: block;
	background: #7AAEB2;
	font-weight: bold;
	font-size: 1.2em;
	color: white;
	padding: 10px;
	margin-bottom: 20px;
	border-radius: 5px;
}

.itemCategoryTab{
  display: flex;
  cursor: pointer;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
	font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.itemCategoryTab .active{	background-color: #4D7C9A; color: #fff; }

.itemCategoryTab li{
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s ease;
  border: 1px solid #4D7C9A;
  cursor: pointer;
  width: 120px;
  color: #4D7C9A;
  height: 40px;
  border-radius: 20px;
  text-align: center;
  line-height: 2.8;
}

@media screen and (max-width: 480px) {
	.itemCategoryTab li{
		font-size: 12px;
    line-height:unset;
    width:auto;
    height:35px;
    border-radius: 10px;
    padding: 10px;
	}
}

.itemCategoryTab li a{
	display: block;
	width:100%;
	height:100%;
}

.itemCategoryTab li a:hover{ text-decoration: none; }

.itemCategory_subTab{
  display: flex;
  cursor: pointer;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  height:100%;
}

.itemCategory_subTab .active{ font-weight: bold; border-bottom: 2px solid; }

.itemCategory_subTab li{
  font-size: 14px;
  cursor: pointer;
  width: 120px;
  color: #000;
  line-height: 3.2;
  padding:0;
  height:45px;
}

.itemCategory_subTab li:hover{ background: #dcdcdc; }

@media screen and (max-width: 480px) {
	.itemCategory_subTab li{
		font-size: 12px;
    line-height:unset;
    width:auto;
    height:35px;
    padding: 10px;
	}
}

.itemCategory_subTab li a{ display: block; width:100%; height:100%; }
.itemCategory_subTab li a:hover{ text-decoration: none; }
.lineup__itemContent__subTab ul{ gap:0; margin:0; }
.lineup__itemContent__subTab li { flex:16.6%; max-width:16.6%; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; }

.gNav_usageGuideLists li
{
	border-right: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
}

.lineup__itemContent__subTab li:nth-child(6n){
  border-right: none;
}

.lineup__itemContent__subTab .lineup__label {
	margin-top: 0;
	font-size:14px;
	justify-content:center;
}

.lineup__itemContent__subTab img{
	border: none;
	background: #fff;
	height:150px;
}
.gNav__product-list > .subTab__mainBox{
	width:100%;
	padding: 0;
}

.lineup__itemContent__subTab.lineup__itemList{
	margin-top:0;
}

.lineup__itemContent > h3, .select_header {
	display: block;
  font-size: 20px;
  padding: 10px 15px;
  border-left: 5px solid #4D7C9A;
}

/* トップページのギャラリーカルーセル */
.indexGallery{ padding: 1.0em 0; }

.banner_menu_lists { display: flex; flex-wrap: wrap; gap: 10px; }
.banner_menu_item:nth-child(1), .banner_menu_item:nth-child(2){ width: 49.5%; }
.banner_menu_item:nth-child(n+3){ width: 32.7%; }
.banner_menu_image{ width: 100%; height:auto;}

@media screen and (max-width:480px){
	.banner_menu_item:nth-child(1), .banner_menu_item:nth-child(2), .banner_menu_item:nth-child(n+3) { width: 100%; }
}

[class*=swiper]:focus { outline: none; }

.slide-media, .thumb-media {
  position: relative;
  overflow: hidden;
}
.slide-media img, .thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.swiper-button-prev, .swiper-button-next {
  display: grid;
  place-content: center;
  width: 6.4rem;
  height: 6.4rem;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.swiper-button-disabled {
  pointer-events: none;
  opacity: 0;
}

.gallery01 {
  overflow: hidden;
}
.gallery01 .swiper {
  max-width: 100%;
  margin: auto;
}
.gallery01 .swiper-main {
  overflow: visible;
}
.gallery01 .swiper-thumb {
  padding-top: 12px;
}
.gallery01 .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  pointer-events: none;
}
.gallery01 .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.gallery01 .swiper-controller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 62.5%;
}
.gallery01 .swiper-button-prev, .gallery01 .swiper-button-next {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.gallery01 .swiper-button-prev {
  right: calc(100% + 3.2rem);
}
.gallery01 .swiper-button-next {
  left: calc(100% + 3.2rem);
}
.gallery01 .swiper-scrollbar {
  position: relative;
  margin-top: 1.6rem;
}

.gallery01 .swiper-scrollbar-drag {
  height: 20px;
  padding: 8px 0;
  cursor: pointer;
  background-color: var(--color-theme);
  background-clip: content-box;
}
.gallery01 .swiper-scrollbar-drag:active {
  background-color: var(--color-theme-darken);
}
.gallery01 .slide {
  display: block;
  overflow: hidden;
}
.gallery01 .slide-media {
  padding-top: 35.0%;
  border-radius: 4px;
}
.gallery01 .slide-media img {
  -o-object-fit: contain;
     object-fit: contain;
}
.gallery01 .slide-title {
  font-weight: bold;
  line-height: 1.6;
  padding: 3.2rem 0;
}
.gallery01 .thumb-media {
  padding-top: 100%;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 4px;
}
.gallery01 .thumb-media img {
  height: calc(100% + 8px);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
}
.gallery01 .swiper-slide-thumb-active {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0.3;
}
.gallery01 .swiper-slide-thumb-active .thumb-media {
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
}
.gallery01 .swiper-slide-thumb-active .thumb-media img {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

@media only screen and (max-width: 1024px) {
  .gallery01 .swiper-button-prev {
    right: calc(100% - 3.2rem);
  }
  .gallery01 .swiper-button-next {
    left: calc(100% - 3.2rem);
  }
}

@media only screen and (min-width: 1025px) {
  .gallery01 .swiper-scrollbar-drag:hover {
    background-color: var(--color-theme-darken);
  }
  .gallery01 .thumb-media:hover {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  .gallery01 .thumb-media:hover img {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* トップページのバナー表示エリア */
.bannerBlock--two{
	display: flex;
	justify-content: space-between;
	gap: 1em;
	flex-wrap: wrap;
}
.bannerBlock--two--value{	width: 48%; }

@media screen and (max-width:480px){
	.bannerBlock--two{ flex-wrap:wrap }
	.bannerBlock--two--value{ width: 100%; }
}

/** 説明文章用の調整 *****/
.explanation{ line-height: 1.5; }
.explanation__strong{ display: block; text-align: center; font-size:20px; font-weight: bold; }
@media screen and (max-width: 480px) {
  .explanation__strong{ font-size:18px; }
}

/** 包装について（トップページ用） **/
@media screen and (max-width: 480px) {
  .packing_image p{ font-size:13px; }
}

.packing_image{
	display: flex;
	flex-wrap: nowrap;
	text-align: center;
	justify-content: space-around;
}
.packing_image li{ width: 25%; }
.packing_image li img{ width: 100%; }

/***********************/
/* イベント出展のページ */
/***********************/
.eventHistoryList {
	display: flex;
	flex-wrap: wrap;
}

.eventHistoryList__card{
	display: flex;
	flex-wrap: wrap;
	background: #f9f9f9;
	width: 100%;
	margin-bottom: 1.5em;
	padding: 2.0em;
}

.eventHistoryList__title{
	width: 100%;
	font-size: 2.0em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #333333;
}

.eventHistoryList__date{
	padding-top: 0.2em;
  text-align: right;
	font-weight: bold;
}

.eventHistoryList__contents{
	width: 100%;
	display: flex;
}

.eventHistoryList__text{ width: 60%; }

.eventHistoryList__imageWrap{
	display: flex;
	flex-wrap: wrap;
  justify-content: flex-end;
	gap: 15px;
	width: 40%;
	padding-left: 1.0em;
}

.eventHistoryList__imageWrap img{
	max-height: 150px;
	max-width: 199px;
	height: 100%;
	width: auto;
}

@media screen and (max-width:480px){
	.eventHistoryList__contents{ flex-wrap: wrap; }
	.eventHistoryList__text{ width: 100%; font-size: 0.9em; }
	.eventHistoryList__imageWrap{ width: 100%; padding: 0; }
	.eventHistoryList__imageWrap img{ max-height: none; max-width: none; 	height: auto;	width: 100%; }
}

/********************************/
/* Wordpress記事のタイル表示 */
/********************************/
.new-character_header { font-size: 1.0em; font-weight: bold; line-height:1.4em; }
.carousel-area-desc p.text { font-size: 13px; line-height: 1.7em; margin-top: 0.5em; margin-bottom: 1em; }
.carousel-area-desc p.text{ overflow: hidden; }

/******************* 各製品ページ *******************/
/* 製品ページのイメージ画像表示エリアの右側の余白 */
.container > .row > div.col-12.col-sm-5{ padding-right: 30px; }
@media screen and (max-width: 480px) {
	.container > .row > div.col-12.col-sm-5{ padding-right:0px; }
}

.mx-auto { margin-right: auto!important; }

.product_desc .name{
	margin-bottom: 12px;
	font-size:32px;
	font-weight: bold;
}

.detailPrice {
	background: white;
	border-radius: 5px;
	padding: 7px 15px;
	display: block;
	font-size: 14px;
	line-height: 1.8;
	margin-bottom: 4.0em;
}

.detailPrice a {
	color: #007bff;
}

.detailPrice span {
	display: inline-block;
	font-size: 140%;
	font-weight: bold;
	color: #e51f58;
	padding: 0 3px;
}

.detailPrice a {
	text-decoration: none;
}
.detailPrice a:hover {
	text-decoration: underline;
}

.detailPrice .detailPriceMore::after {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 0 0 5px;
    content: "";
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border: 2px solid;
    border-color: #007bff #007bff transparent transparent;
}

.product_desc h2{
  margin-bottom: 0.7em;
	font-size: 19pt;
	line-height: 1.5em;
}

.product_desc p{
	font-size:14px;
	line-height: 1.8;
}

.productionSize {
  margin: 20px 0;
}
.productionSize p{
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.productionSize ol {
	margin-top: 5px;
	line-height: 1.5;
	font-size: 15px;
}

.productionSize ol span {
	font-size: 120%;
	font-weight: bold;
	color: #e51f58;
	padding: 0 3px;
}

.productionSize__lists{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size:0.95em;
  margin-top:0.5em;
  margin-bottom: 1em;
}

.productionSize__lists a{
  text-decoration: underline;
	color: #007bff;
}

.productionSize__lists a:hover{
  text-decoration: none;
}

.orderMenu{
  margin-bottom:20px;
  display: flex;
  column-gap:30px;
}

.orderMenu li{
  line-height: 2.0;
  color: #007bff;
  font-size: 18px;
}

.orderMenu i{
  color: #000;
  font-size: 14px;
}

i.far.fa-circle.fa-stack-2x{
  font-size:32px;
}
i.fas.fa-yen-sign.fa-stack-1x.yen{
font-size:20px;
}

.orderMenu li{
  background-size: 28px;
  background-position: left center;
  background-repeat: no-repeat;
  position: relative;
  display: block;
}

.orderMenu__price{ background-image: url(../img/icon_maruyen001.png); }
.orderMenu__shipping{ background-image: url(../img/icon_truck001.png); }
.orderMenu__package{ background-image: url(../img/icon_cardboard001.png); }
.orderMenu li a{ padding-left:38px; }
.orderMenu li a:hover{ text-decoration: underline; }
.orderMenu li a:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -3px;
    margin-left: 2px;
    width: 8px;
    height: 8px;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media screen and (max-width:480px){
	.orderMenu{ column-gap: 20px; }
  .orderMenu li{ background-size: 24px; font-size: 14px; }
  .orderMenu li a{ padding-left: 30px; }
  .orderMenu li a:after{ margin-top: -3px; width: 6px; height: 6px; }
}

a.estimateButton{
  font-size: 18px;
  line-height: 2.0;
  font-weight: bold;
  color:#fff;
  display: block;
	position: relative;
}

a.estimateButton:after{
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -6px;
	margin-left: 5px;
	width: 10px;
	height: 10px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.detailPrice.text-center.bg_keycolor_deepGreen{ background: #4D7C9A; }

@media screen and (max-width:480px){
	.text-left.box-left span, .text-left.box-right span { font-size: 30px; }
	.product_desc{ margin: 1em 0 2em; }
  .product_desc h2{ margin-top:10px; font-size:20px; font-weight: bold; }
}

.point h3, .price h3, .product_desc h3, .product_desc_lineup h3, .product_desc_option h3
{
  font-size: 17px;
  font-weight: 700;
  color: #c83839;
	margin-bottom:5px;
}

@media screen and (max-width:480px)
{
  .product_desc h3{ font-size:16px; line-height: 1.5; margin-bottom: 6px; }
}

.product_desc > p { font-size: 14px; line-height: 2.0em; }
.designViewMore{ display: block; border: 1px solid #e1e1e1; padding: 0.8em; text-align: center; background: white; font-size: 0.9em; position: relative; }
.designViewMore:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -6px;
    margin-left: 5px;
    width: 8px;
    height: 8px;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.designViewMore:hover { text-decoration: underline; }
.product_detail { padding-bottom: 48px; }

@media screen and (max-width:480px)
{
  .product_detail { padding-bottom: 20px; }
}

.product_detail.row.col-12.col-sm-5{ padding-right:0px; }
.product_detail .product_image_main img { border: 1px solid #e1e1e1; }

/*** 制作担当者からのコメント ***/
.adviceBox{ background-color: #ebebeb; padding:30px 50px 20px 20px; margin: 3rem 0; }

.adviceBox h2 {
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	margin-top: 5px;
	margin-bottom: 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid #c83839;
}

.adviceBox h3{
	font-size: 17px;
	font-weight: 700;
	color: #c83839;
	margin-top:1em;
	margin-bottom: 0.5em;
}

.adviceBox h4{
	font-weight: bold;
}


.adviceBox p {
	font-size: 14px;
	line-height: 2.2em;
	margin-bottom: 12px;
}

.avatar img{
	background-color: #fff;
	border-radius: 100%;
}

.adviceBox .description img{
	padding: 10px 20px;
	max-height:400px;
	max-width: 400px;
	width: auto;
}

@media screen and (max-width:480px){
  .adviceBox{
    padding: 20px 15px;
  }
	.adviceBox .description img{
		width: 100%;
	}

}

/************** フッター ****************/
.footer__top{
  padding: 28px 0;
}

.footer_postage_table {
  font-size: 12px;
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: 1px solid #dcdcdc;
}

.footer_postage_table thead{
  background: #aeaeae;
}


.footer_postage_table tbody{
  background: #fff;
}

.footer_postage_table th, .footer_postage_table td {
  border: 1px solid #dcdcdc;
  padding: 3px;
}
.footer_postage_table th, .table_cell_middle {
  text-align: center;
  vertical-align: middle;
}

.table_cell_right {
  text-align: right;
}

.footer__bottom{
  padding: 10px 60px 40px;
}

.footer__top__box ul{
  display: flex;
  flex-wrap: nowrap;
}

.footer__top__box ul > li{
  width: 33%;
  padding: 10px;
  line-height: 1.4em;
}

.ftTopLiTop{
  border-bottom: solid 1px #4D7C9A;
  color: #4D7C9A;
  font-weight: 700;
  font-size: 13.3pt;
  margin-bottom: 0.8em;
  line-height: 1.4em;
}

.footer_icon > .estimate_button a, .footer_icon > .inquiry a{
  display: block;
  position: relative;
  width: 196px;
  height: 45px;
  line-height: 45px;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 3px;
}

.footer_icon > .estimate_button a{ background: #dd2c73; }
.footer_icon > .inquiry a { background: #e1cc4f; }


.footer_icon > .estimate_button a:before, .sideStickyMenu > .estimate_button a:before, .footer_icon > .inquiry a:before, .sideStickyMenu > .inquiry a:before, .sideStickyMenu > .business a:before {
  position: absolute;
  left: 13px;
  display: block;
  content: "";
  width: 30px;
  height: 30px;
}

.footer_icon > .estimate_button a:before, .sideStickyMenu > .estimate_button a:before  {
  bottom: 6px;
  background: url(../img/sidebar_icon_estimate.png) no-repeat;
}


.footer_icon > .inquiry a:before, .sideStickyMenu > .inquiry a:before {
  bottom: 2px;
  background: url(../img/sidebar_icon_inquiry.png) no-repeat;
}


.sideStickyMenu > .business a:before {
  bottom: 7px;
  background: url(../img/sidebar_icon_building.png) no-repeat;
}


.footer_mainBox a:hover {
	text-decoration: underline;
}

.footer_mainBox > ul{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around
}

.footer_mainBox > ul > li {
  height: 280px;
}

.footer_mainBox > ul > li > p {
  font-weight: bold;
  font-size: 1em;
  margin-top: 10px;
}

.footer_mainBox > ul > li > ul {
  margin-top: 15px;
  font-size: 0.8em;
  line-height: 2em;
}

.footer_forrealize{
  text-align: left;
  margin-top: 20px;
  border-left: 1px solid #787878;
  border-right: 1px solid #787878;
  padding: 0 15px;
  width: 200px;
}
.footer_price {
  text-align: left;
  margin-top: 20px;
  border-right: 1px solid #787878;
  padding: 0 15px;
  width: 620px;
}

.footer_icon {
  width: auto;
  text-align: center;
  margin-top: 20px;
}

.footer_price__list{
  display: flex;
  margin-top: 15px;
  font-size: 0.8em;
  line-height: 2em;
}

.footer_price ul {
  margin-right: 65px;
}

.footer03{
	background: #222;
}

.footer03 .row{
		justify-content: space-evenly;
		margin-top:20px;
}

.footer03 .inner-block {
    padding: 0 10px 10px;
}
.footer03 .nav {
    width: calc(100% + 20px);
    margin-left: -10px;
}
.footer03 .nav li {
    border-top: 1px solid #555;
}
.footer03 .nav li > span, .footer03 .nav li > a  {
    display: block;
    padding: 12px 20px;
    background-size: 6px auto;
		color:#fff;
}
.footer03 li.footer03-desc {
    background-color: #fff;
    border-top: 1px solid #555;
}
.footer03_postage, .footer03_payment {
    box-sizing: border-box !important;
    width: 100%;
    padding: 10px;
		background: white;
}
.footer03 .nav li.last {
    border-bottom: 1px solid #555;
}
.footer03 .nav .nav-child li {
    background-color: #333;
}
.footer03 .nav .nav-child li a {
    font-size: 0.8rem;
}

@media only screen and (max-width: 480px){
	.footer03 .nav-child li {
	    background-color: #333;
	}
	.footer03 .nav li {
	    border-top: 1px solid #555;
	}
	.footer03 .nav-child li a {
			display: block;
	    font-size: 0.8rem;
			padding: 12px 20px;
			color: #fff;
	}
}

.footer_icon_estimate a, .footer_icon_inquiry a, .footer_icon_bussiness a {
    width: 95%;
    text-align: center;
    box-sizing: border-box!important;
}


.footer_icon_estimate a, .footer_icon_inquiry a, .footer_icon_bussiness a {
    display: block;
    position: relative;
    width: 165px;
    height: 45px;
    line-height: 45px;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 3px;
}
.footer_icon_estimate a {
	background: #dd2c73;
}
.footer_icon_inquiry a {
	background: #e1cc4f;
}

.footer_icon_bussiness a {
	background: #47BBC5;
}

.copy, .copy p small a {
		background: #292c2f;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 0.1em;
		padding-bottom: 1.5em;
}

.rules {
  text-align: left;
  margin-top: 10px;
  font-size: 0.75em;
  font-weight: normal;
  line-height:1.8em;
}

.rules a {
  display: block;
  position: relative;
}

.rules a:after {
  position: absolute;
  bottom: 9px;
  display: block;
  content: "";
  width: 9px;
  height: 10px;
  background: url(../img/right_arrow2.png) no-repeat;
}

.rules p {
  margin-left: 12px;
  margin-top: 2px;
}

/* 画面右下の追従メニュー.start */
.sideStickyMenu {
    position: fixed;
    right: 0;
    bottom: 77px;
    z-index: 2;
}
.sideStickyMenu a {
		display: block;
    position: relative;
		width: 150px;
    height: 45px;
    line-height: 45px;
		border-radius: 5px 0 0 5px;
		color: #fff;
    font-size: 0.8em;
    font-weight: bold;
		padding-left: 48px;
		opacity: 0.6;
		transition: 0.3s;
}

.sideStickyMenu a :hover{
	opacity: 1;
}

.sideStickyMenu > .inquiry, .sideStickyMenu > .business { margin-top: 6px; }
.sideStickyMenu > .estimate_button a { background: #dd2c73; }
.sideStickyMenu > .inquiry a { background: #e1cc4f; }
.sideStickyMenu > .business a { background: #47BBC5; }

.sideStickyMenu > .estimate_button a:hover,
.sideStickyMenu > .inquiry a:hover,
.sideStickyMenu > .business a:hover
{ opacity: 1; }

/* 画面右下の追従メニュー.end */


/* 2024.02.06追加 */
.visitors{
	width: 230px;
	display:flex;
}

.visitors__pc{
	display:flex;
}

.consultation{
	border-right: 1px solid #eee;
}

.consultation, .viewer{
	padding:10px;
}

.visitors__pc > .consultation{
	padding-right: 10px;
}
.visitors__pc > .viewer{
	padding-left: 10px;
}


.item_label, .item_value{
	font-size:13px;
}

.item_label span, .item_value span{
	font-size:24px;
	color: #e51f58;
	font-weight:bold;
}

.item_value{
	margin-top:2px;
}
@media screen and (max-width: 1200px) {
	.visitors__pc{
		display: none;
	}
	.item_label span, .item_value span{
		font-size:14px;
	}

}
@media screen and (max-width: 480px) {
	.visitors{
		float: unset;
		width:100%;
		margin-top:0px;
		justify-content:center;
		text-align:left;
	}

	.visitors__pc{
		display:none;
	}

	.consultation, .viewer{
		padding: 10px 40px;
	}
	.item_label, .item_value{
		font-size:15px;
	}
	.item_label span, .item_value span {
		font-size:30px;
	}

}

/********************************************************/
/* レスポンシブ時上部メニューのスクロール表示・非表示対応 */
/********************************************************/
header{
	height: 135px;
	width:100%;
	z-index: 2000;/*最前面へ*/
  background-color: #fff;
	padding-top: 10px;
}

@media screen and (max-width: 480px) {
	header{
/*		position: fixed; */
		height: 60px;
		padding-top: 0px;
	}

	/*　上に上がる動き　*/

	#header.UpMove{
/*		animation: UpAnime 0.5s forwards; */
	}

	@keyframes UpAnime{
		from {
			opacity: 1;
		transform: translateY(0);
		}
		to {
			opacity: 0;
			transform: translateY(-150px);
		}
	}

	/*　下に下がる動き　*/

	#header.DownMove{
/*		animation: DownAnime 0.5s forwards;*/
	}
	@keyframes DownAnime{
		from {
			opacity: 0;
		transform: translateY(-120px);
		}
		to {
			opacity: 1;
		transform: translateY(0);
		}
	}
}


/***** 2024.02.07 *****/
/* もっと見るボタン */
.moreView{
	padding: 0.7em 2em;
	border-radius: 20px;
	display:inline-block;
	position: relative;
}

.moreView a:hover{
	text-decoration:none;
	transition:0s;
}

.moreView a:after{
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -6px;
	margin-left: 5px;
	width: 8px;
	height: 8px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);

}

/* 各製品ページ内ローカルナビゲーションバー */
.product_navi {
  background: #3f4b54;
}

.product_navi ul{
 display:flex;
 justify-content:center;
 font-weight:bold;
 max-width:1140px;
 margin: 0 auto;
 text-align:center;
}

.product_navi ul li{
	height:45px;
	width:100%;
	background:#3f4b54;
  color:white;
  font-size:14px;

}

.product_navi ul li:hover{
 background: #78787866;
}

.product_navi ul li a{
 display:flex;
 width:100%;
 height:100%;
 justify-content: center;
 align-items: center;
}

.product_navi ul li a:hover{
 color:white;
 text-decoration:none;
 opacity:1.0;
}


@media screen and (max-width: 480px){
  .product_navi {
		background: none;
		padding: 0 10px;
    margin-bottom:4.0em;
  }

  .product_navi ul{
    flex-wrap: wrap;
		gap: 3px;
  }
  .product_navi ul li{
    width: 49%;
    border: 1px solid #fff;
		border-radius:5px;
  }

}

.product_detail{
	width: 100%;
	background-color: #f3f3f3;
}


.product-image_main{
	height: 445px;
}

/* 製品ページのイメージ画像部分 */
.product-image_main__imgBox{
	display: flex;
	height: 400px;
	border: 1px solid #e1e1e1;
	background: #fff;

}

.product-image_main img{
	width: 100%;
	max-height: 400px;
	object-fit: contain;
}

/* ライトボックス機能用のCSS */
.enlarged-img, .overlay {
  /* 初期状態では完全に透明に */
  opacity: 0;
  /* 透明度の変化に0.5秒かける */
  transition: opacity 0.5s;
}

.enlarged-img {
  position: fixed; /* 画像を画面中央に表示 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%; /* 画像の最大幅を画面の90%に設定 */
  max-height: 100%; /* 画像の最大高さも同様 */
  z-index: 100; /* 他の要素の上に表示 */
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 背景を暗くする */
  z-index: 99; /* 画像よりも少し下に */
}

/* サムネイル */
.product-image_thumb > div{
	max-width: 45px;
	max-height:45px;
	background: #fff;
	display: flex;
	justify-content: center;
	border:1px solid #e1e1e1;
}
.product-image_thumb > div > img{
	object-fit: contain;
}

.product-image_caption {
	text-align:center;
}

.product-image_thumb p.product-image_caption {
    visibility: hidden;
    height: 0;
    width: 0;
}

/* 製品ページの価格表見出し */
.price_header{
	font-size:32px;
	text-align:center;
	margin-bottom:20px;
}

@media screen and (max-width: 480px){

	.product-image_thumb > div{
		max-width:calc(100vw / 10);
	}

  .price_header{
    font-size:24px;
  }
}

/* 価格表 */
.scroll-table {
    overflow: auto;
    white-space: nowrap;
    border: none;
    margin: 0;
}

.table_striped tbody tr:nth-of-type(odd){
  background-color: rgba(0,0,0,.05);
}

.table_striped a{
	display: block;
}

.price_box a {
	text-decoration: none;
}

.price_box table {
	font-size: 0.9em;
	width: 100%;
	line-height:1.4;
	word-break: break-word;
}

.price_box table th:first-child {
/*    width: 120px;
    min-width: 120px;
		*/
}

@media screen and (max-width: 480px){
	.price_box table {
		font-size: 16px;
	}
}

.price_box thead {
	background-color: #506573;
	color: #fff;
}

.price_box th{
	padding: 1em 0;
/*	max-width: 100px; */
	text-align: center;
	vertical-align: middle;
	text-wrap: wrap;
}

@media screen and (max-width:480px){
	.price_box th{
		min-width: 130px;
	}

}

.price_box table td {
	text-align: right;
	color: #000;
	vertical-align: middle;
	padding-right: 10px;
}

.price_box__text__grey
{
	color: rgba(6, 2, 3, .5);
}

.price_box table td:first-child
{
	text-align: left;
	font-weight: bold;
	padding: 10px;
}

.price_box table td:first-child span
{
	font-weight: normal;
}

.postageTable {
	margin-top:24px;
}

.postageTable ol{
		margin-top:10px;
		font-size:14px;
		line-height: 1.7;
		text-align: center;
}

.postageTable a {
	text-decoration: underline;
	color: #007bff;
}
.postageTable a:hover {
	text-decoration: none;
}


.consult_btn {
    margin: 10px auto;
    text-align: center;
    line-height: 40px;
    border: none;
    border-radius: 3px;
    font-size: 1.05em;
    background: #e1cc4f;
    width: 195px;
    box-sizing: border-box !important;
}
.consult_btn a {
    text-decoration: none;
    color: #fff;
    display: block;
}

.price_box a{
	padding: 10px;
}

.price_box a:hover{
	background: #94da9b;
}

/* 送料表 */
.postage{
	width :100%;
	background: #fff;
	margin-bottom: 15px;
}

.postage_caption {
    text-align: center;
    color: #fff;
    padding: 8px 5px;
    background: #506573;
    border-radius: 5px 5px 0 0;
    font-size: 18px;
}
.postage tr {
  text-align: center;
  font-size: 15px;
}
.postage tr > td {
  border: 1px solid #506573;
  padding: 7px 0;
	vertical-align:middle;
}

@media screen and (max-width:480px){
	.postage tr > td{
		padding: 7px 5px;
	}
}

/* 製品ページ中段 */
.point{
	border: 1px solid #e1e1e1;
	padding: 2em;
}

.point .fa, .fukidashi__person .fas, .far {
    font-size: 100px;
    text-align: center;
    margin: 0 auto;
    color: rgba(6, 2, 3, .5);
}
.far{
  font-size: 130px;
}

@media screen and (max-width:480px){
  .col-4.col-sm-2.mx-auto.text-center{
    margin: 0 auto 15px;

  }
}

.point .subhead, .adviceBox .subhead, .aboutProduct_header__subheader {
	display: block;
	color: #c83839;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 1rem;
}

.point.advice h2 {
    color: #c83839;
}

.point h2 {
    font-size: 22px;
    font-weight: 700;
}

.point.advice h3 {
    color: #212529;
		margin-top:20px;
		margin-bottom:4px;
		font-size:17px;
}

.point .subhead_miniHeader{
	display: block;
  color: #212529;
	margin-top:20px;
	margin-bottom:4px;
	font-size:17px;
	font-weight: 700;
}

.point.advice b, .adviceBox b {
	display: inline;
	margin-top:15px;
	margin-bottom:4px;
}

.point p{
	font-size: 14px;
	line-height: 2.2em;
  margin-bottom: 10px;
}

@media screen and (max-width:480px){
  .point{
    padding: 15px 20px;
  }
  .col-sm-2.col-3.mx-auto.icon{
    margin:0 auto 15px;
  }
}

/* 製品ページ中段 */
.column_header, .contentsBox h2, .contentsBox__full h2, .aboutProduct_header
{
	display: block;
	border-bottom: 1px solid #c83839;
	padding-bottom: 0.25em;
	margin-bottom: 25px;
	font-weight: 700;
	font-size: 19pt;
	line-height: 1.5em;
}

.aboutProduct{
	margin-bottom: 3.0em;
}

.aboutProduct p{
	font-size:14px;
	line-height: 2.2;
}

.question_text, .aboutProduct h3, .faqBoxInProductPage ul li > span, .uservoiceInProductPage ul li > span{
	display: block;
	color:#cc3333;
	font-size: 17px;
	line-height: 1.4em;
	font-weight:bold;
	margin-top: 16px;
	margin-bottom: 14px;
}

.faqBoxInProductPage span {
	margin-top:25px;
}

.faqBoxInProductPage p, .uservoiceInProductPage p{
	font-size: 15px;
	line-height: 2.2em;
	margin-bottom:0;
}

@media screen and (max-width:480px){
	.aboutProduct p, .faqBoxInProductPage p, .uservoiceInProductPage p{
		font-size: 14px;
		line-height: 1.7;
	}
}


.question_text:before{
    color: #cc3333;
    content: "Q";
		padding-right:10px;
}

.uservoiceInProductPage li{
	padding-bottom: 30px;
}

.uservoiceInProductPage li:not(:last-child){
	border-bottom: 1px solid rgba(0,0,0,.1);
	margin-bottom:15px;
}

.faqBoxInProductPage ul li div{
	background:#f2f2f2;
	padding: 15px 25px;
}

.fukidashiBox{
	display: flex;
}

.fukidashi__person {
		width: 100px;
		margin-right: 20px;
}
.fukidashi__person img {
	width: 100%;
	height: auto;
	border-radius: 100%;
}
.fukidashi {
	display: inline-block;
	position: relative;
	padding: 17px 20px;
	border-radius: 12px;
	background: #d7ebfe;
	width: 100%;
}
.fukidashi :after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 18px;
	left: -24px;
	border: 12px solid transparent;
	border-right: 12px solid #d7ebfe;
}
.fukidashi__honbun {
	font-size: 14px;
	margin: 0;
	padding: 0;
}

@media screen and (max-width:480px){
  .fukidashi{
    padding: 10px;
  }
  .fukidashi__person .fas{
    font-size: 30px;
    padding-top:10px;
  }
  .fukidashi__person {
  		width: 30px;
  }
  .fukidashi :after{
      top: 12px;
  }

}

/* 包装 */
.packing_content {
  padding: 20px 0;
}

.packing_content h3 {
	margin-bottom: 10px;
  font-size: 20px;
  font-weight: 600;
  padding: 5px;
  color: #000;
  border-bottom: dashed 1px black;
  display: inline-block;
}

.packing p {
  line-height: 1.7em;
  font-size: 0.9em;
  margin-left: 5px;
	margin-bottom:20px;
}
.head_item {
  text-align: left;
  padding-left: 9px !important;
  min-width: 65px;
}
.packing img{
	max-height:250px;
}

/* カルーセル（関連基地一覧）' */
	.carouselBox{
		width:100%;
	}

	.carousel {
	  width: 100%;
	  height: 350px;
	  position: relative;
	  margin: 0 auto;
		overflow: hidden;
	}
	.carousel-area {
	  /* リスト数×リスト幅を計算してwidth指定してもいいが、汎用性を考慮してjQueryで計算代入する */
	  height: 100%;
	  position: absolute;
	  display: flex;
	}

	.carousel-list img{
		border-radius:10px;
		width: 100%;
		height: 150px;
		object-fit: cover;
	}

	.carousel-area-desc{
		margin-top:10px;
	}

	@media screen and (max-width: 480px) {
	  .carousel {
	    width: 100%;
	    height: 370px
	  }
	}


/************** 見積りページ ****************/
.estimate_wrapper{ max-width:1040px; margin:0 auto;}
.estimate, .contact { margin: 25px auto; width: 1040px; background: #fff; border-radius: 3px; padding: 35px 50px 30px;
	box-shadow: 2px 2px 3px 2px #ddd;
  border: #ebebeb 20px solid;
}
.main_caption { display: table; text-align: center; white-space: nowrap; margin: 20px auto 10px auto; font-weight: bold;}
.main_caption span{font-size: 1.5rem;}
.main_caption:after, .main_caption:before { content: ''; display: table-cell; width: 20%; background: -webkit-linear-gradient(transparent 50%, currentColor 50%, currentColor -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px)); background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, currentColor), color-stop(currentColor calc(50% + 1px)), to(transparent calc(50% + 1px))); background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px)); -webkit-background-clip: padding; background-clip: padding;}
.main_caption:after h1{border-left: 1em solid transparent;}
.main_caption:before h1{border-right: 1em solid transparent;}

.estimate_wrap_comment {padding: 0;margin: 0 auto; text-align: center; font-size: 0.9em; margin-top: 20px; line-height: 1.6;}

.form-block { position: relative; font-size: 12px; margin: 0 0 20px 0; background: #fff; box-shadow: 0 2px 3px 0 #ddd; border: 1px solid #d0d6d9; border-radius: 10px 10px 0 0; }
.form-block .close {
		background-color: #aaa;
		border-radius: 50%;
		box-shadow: 1px 1px 1px #ddc inset;
		color: #666;
		display: inline-block;
		font-size: 24px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		text-shadow: 1px 1px 0 #fff;
		top: 4px;
		position: absolute;
		right: 4px;
		width: 25px;
		cursor: pointer;
}

.form-block .add {
		position: absolute;
		background-color: #ddd;
		border-radius: 50%;
		color: #fff;
		display: inline-block;
		font-size: 32px;
		height: 20px;
		width: 20px;
		line-height: 15px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		cursor: pointer;
}

.itemLabel {
	display: inline-block;
	width:100%;
	position: relative;
	color: white;
	background: #47BBC5;
	line-height: 2.0;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0.2em 0.5em 0.2em 1.0em;
	border-radius: 10px 10px 0 0;
}

/* アイテムヘッダー（見積もりフォーム） */
.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	position: relative;
	color: white;
	background: #47BBC5;
	line-height: 2.0;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0.2em 0.5em 0.2em 1.0em;
	border-radius: 10px 10px 0 0;
	margin: 0;
}

.item-header h3 {
	margin: 0;
	color: white;
	font-size: 1.2rem;
	font-weight: bold;
}

/* 削除ボタン（見積もりフォーム） */
.delete-item-button {
	background: #f44336;
	color: white;
	border: none;
	padding: 8px 16px;
	font-size: 14px;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.3s ease;
}

.delete-item-button:hover {
	background: #d32f2f;
}

.delete-item-button.hidden {
	display: none;
}

.estimate_input_main {padding: 30px 6px 20px 6px; }
.estimate_input_main div {}
.estimate_input_main ul {width: 544px; float: left; margin-left:33px;}
.estimate_input_main li { padding:5px 0 0 30px; }
.estimate_input_main li input {text-align: center; width: 70px; height: 30px; font-size: 1.05em; cursor: pointer;}

.estimateItemBox{	display: flex; }
.product_image_box{	width:30%; padding-left:15px; }
.product_image { width:164px; height:158px; }
.product_select_box{ width:70%; }
.product_select_box table{ width: 100%; border: 1px solid #d0d6d9; }
.product_select_box table tr:first-child{ background:#f5f6f6; }
.product_select_box table td{ padding: 5px 10px; vertical-align: middle; font-size: 14px; }
.product_custom select{ width: 180px; }

.size_input { width: 50px; height: 30px;}
.input_number { height: 30px; size: 1.2em; }

input.delete_form_btn2 {
    display: block;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #d0d6d9;
    width: 80%;
    height: 35px;
    border-width: thin;
    border-radius: 20px;
    margin: 0 auto 20px;
    text-align: center;
}

span.required {
    font-size: .8em;
    color: #fff;
    font-weight: 700;
    margin-left: 1em;
    background-color: #ff5700;
    padding: 0.25em 0.5em;
}

input.change_form_btn2{
	cursor: pointer;
	font-size: 1.0em;
	width: 100%;
	padding: 10px 0;
	border: none;
	border-radius: 20px;
	border: 3px solid #ddd;
	text-align:center;
}

input.change_form_btn2:hover{
	opacity: 0.9;
}

.plus_button {
	display:inline-block;
	position:relative;
	transition:all 0.3s;
	width: 100%;
}

.plus_button::after {
	content: "\f067";
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	position: absolute;
	right: 37%;
	top: 51%;
	transform: translateY(-50%);
	transition: all 0.3s;
}
@media screen and (max-width: 480px){
	.plus_button::after {
		right: 20%;
		top: 52%;
	}
}

.estimate_extra_input_caption, .estimate_result_main_caption {
    position: relative;
    background: #d0d6d9;
    margin-top: 30px;
    font-weight: bold;
    height: 40px;
    padding-left: 10px;
    padding-top: 12px;
    border-radius: 3px 3px 0 0;
}

.estimate_extra_input_caption span:after {
    position: absolute;
    right: 10px;
    top: 8px;
    display: block;
    content: "";
    width: 24px;
    height: 23px;
    padding-right: 21px;
    background: url(../img/input_top_arrow.png) no-repeat;
}

.proof_plice_table__row{
	display: flex;
	flex-wrap: wrap;
	gap:1%;
	margin-bottom:5px;
}

.proof_plice_table__header{
	width: 35%;
	padding: 10px;
	background-color: #f5f6f6;
}
.proof_plice_table__price{
	width: 60%;
	padding: 10px;
	background-color: #fff;
}

@media screen and (max-width:480px){
	.proof_plice_table__header{
		width: 100%;
	}
	.proof_plice_table__price{
		width: 100%;
	}
}

.estimate_extra_input_main{
	padding: 15px 20px;
	border: 1px solid #d0d6d9;
	line-height: 1.6;
}


@media screen and (max-width: 480px) {
 .estimate, .contact { width: 100%; padding: 0 0 30px 0; margin-top:0; border:none; box-shadow: none;}

 .main_caption { white-space: normal; line-height: 1.8rem; margin: 15px auto }
 .main_caption span{font-size: 1.0rem;}
 .main_caption:after, .main_caption:before { content: ''; display: table-cell; width: 0%; background: -webkit-linear-gradient(transparent 50%, currentColor 50%, currentColor -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px)); background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, currentColor), color-stop(currentColor calc(50% + 1px)), to(transparent calc(50% + 1px))); background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px)); -webkit-background-clip: padding; background-clip: padding;}
 .title.dark { width: 100%; background-color: #222; color: #FFF; padding :10px 0 ; border-bottom: none; line-height: 1.4;}
 .main_caption.send { margin: 15px auto 0 auto }

 .estimate_wrap_comment {
	 	text-align: left;
	  padding: 0 10px;
    margin-top: 0;
    width: 100%;
    font-size: 0.8em;
    box-sizing: border-box!important;
	}
 .form-block { width: 95%; margin-right: auto; margin-left: auto;    }

 .estimate_input_main {padding: 0; }
 .estimate_input_main div {float: none; text-align: center;}
 .estimateItemBox{ flex-wrap: wrap; }
 .product_image_box{ width:100%; }
 .product_image { width:50% ; height:auto ; padding-left: 0 }
 .product_select_box{ width: 100%; }
 .product_select_box table{ width:100%; margin-bottom:20px; }
 .product_select_box table td{ display:block; }

	span.required {
	    margin-left: 0.5em;
	    padding: 0em 0.5em;
	}

	input.change_form_btn2 {
	    width: 95%;
			display: inherit;
	}

}

.packing_introduction{
	display: flex;
	margin-bottom: 1.5em;
	gap: 1.0em;
}

.packing_introduction_image{
	order: 1;
}

.packing_introduction_text{
		width: 100%;
		padding: 0;
		order: 2;
		margin-bottom: 1.0em;
}

.packing_introduction_header{
		display: block;
		font-weight: bold;
		font-size: 1.1em;
		margin-bottom: 0.2em;
}

@media screen and (max-width:480px){
	.packing_introduction{
		flex-wrap: wrap;
	}
	.packing_introduction_image{
		order: 2;
		margin: 0 auto;
	}
	.packing_introduction_text{
			width: 100%;
			padding: 0;
			order: 1;
	}
}
.packing_introduction_alumi_color{
	margin-bottom: 1.5em;
}

.packing_introduction_alumi_color_list{
	display: flex;
	flex-wrap: wrap;
}

.packing_introduction_alumi_color_list li{
	width: 12.5%;
	margin-bottom: 0.5em;
}

.packing_introduction_alumi_color_img{
		width: 100%;
		height: auto;
		margin-bottom: 0.25em;
}

.packing_introduction_alumi_color_name{
	text-align: center;
	font-size: 0.8em;
}

@media screen and (max-width: 480px){
	.packing_introduction_alumi_color_list li{
			width: 25%;
	}
}
.packing_introduction_width{
	margin-bottom: 1.5em;

}

.packing_introduction_width_img{
	max-width: 100%;
	max-height: 350px;
	width: auto;
}
.state_select{
	display: inline-block;
	width:95%;
}
.state_select select{
	font-size:15px;
	width: 100%;
}

@media screen and (ma-width:480px){
	.state_select{
		display: inline;
	}
}

.disp-none {
    display: none;
}
img.packaging {
    width: 200px;
    height: 200px;
}

.toolTip{ position: relative; }

 a.toolTip{
 color: #41c0ed;
 text-decoration: underline;
 font-size: 0.8rem;
 }

 .toolTip span{
 color: #333;
 position: absolute;
 display: block;
 padding: 8px;
 width: 320px;
 top: 30px;
 left: 0;
 font-size: .9em;
 line-height: 1.2em;
 border: 3px solid #BCB;
 border-radius: 10px;
 background-color: #efffef;
 box-shadow: 1px 1px 5px #CCC;
 z-index: 0;
 visibility: hidden;
 }
 .toolTip span:before {
 position: absolute;
 top: -8px; left: 25%;
 margin-left: -9px;
 display: block;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 9px 9px 9px;
 border-color: transparent transparent #efffef transparent;
 z-index: 0;
 }
 .toolTip span:after {
 content: "";
 position: absolute;
 top: -12px; left: 25%;
 margin-left: -10px;
 display: block;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 10px 10px 10px;
 border-color: transparent transparent #BCB transparent;
 z-index: -1;
 }
 .toolTip:hover{ cursor: help; opacity:1.0}
 .toolTip:hover span{
 visibility: visible;
 cursor: help;
 z-index: 20;
 line-height: 1.6;
 }

 .estimate_send_btn, .contact_send_btn {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 30px;
     margin-bottom: 10px;
 }
 .estimate_send_btn input, .contact_send_btn input {
     cursor: pointer;
     font-size: 1.05em;
		 font-weight: bold;
     color: #fff!important;
     background: #dd2c73;
     width: 200px;
     height: 40px;
     border: none;
     border-radius: 3px;
 		text-align:center;
 }

.estimate_send_btn input:hover, .contact_send_btn input:hover{
	opacity: 0.9;
}

 @media screen and (max-width: 480px){
 	.estimate_send_btn input, .contact_send_btn input {
 	    font-size: 14px;
 	    width: 95%;
 	}
 }
 .send_btn_single{
   margin: 10px 0 70px;
 }
 .send_btn_single a{
   display: block;
   font-size: 0.9em;
   color: #000;
   background: #fff;
   width: 100%;
   height: 40px;
   text-align: center;
   line-height: 37px;
   border: 3px solid #ddd;
   border-radius: 3px;
   box-sizing: border-box !important;
 }

 .send_btn_single a:hover{
   background: #ddd;
	 color: #fff;
	 font-weight: bold;
 }

 /********  見積もり内容確認ページ **********/
 .efface_btn input {
    display: block;
    padding: 0;
    font-size: 1.0em;
		font-weight: bold;
    color: #fff;
    background: #47BBC5;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 10px;
}

.estimate table {
    width: 100%;
    border: 1px solid #d0d6d9;
}
.estimate table tr:first-child, table.tbl-estimate tr.tbl-estimate-head {
    background: #f5f6f6;
}

table.tbl-estimate tr.tbl-estimate-head{
  text-align:center;
}

table.tbl-estimate span.tbl-estimate-span {
    display: block;
}

.estimate td {
    padding: 8px 10px;
    vertical-align: middle;
    font-size: 14px;
}
.table_border {
    border: 1px solid #d0d6d9;
}

.estimate_result_btn {
  width: 480px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

.pdf_download{
	width: 100%;
	margin-bottom: 20px;
  text-align: center;
}
.estimate_box{
	width: 200px;
}

.sub_btn {
    display: flex;
    justify-content:space-between;
    grid-gap: 7px;
    margin-top:20px;
}

.send_btn {
  width:48%;
}

.send_btn a {
    display: block;
    font-size: 0.9em;
    color: #000;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 37px;
    border: 3px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box !important;
}

.calculation {
    text-align: right;
    display: block;
}


table.tbl-estimate tr.tbl-estimate-end td {
    font-size: 21px;
		font-weight: bold;
}

@media screen and (max-width:480px){
  table.tbl-estimate tr.tbl-estimate-head {
    display: none;
  }
  table.tbl-estimate td.table_border.item-name {
      background-color: #e9727e;
      padding-top: 10px;
      padding-bottom: 10px;
      color: #FFF;
      font-weight: bold;
  }
  .estimate td {
      display: block;
  }
  table.tbl-estimate span.tbl-estimate-span {
      text-align: right;
  }

  table.tbl-estimate td:before {
      content: attr(data-label);
      display: block;
  }

  table.tbl-estimate tr.tbl-estimate-end {
    background-color: #03A9F4;
    font-weight: bold;
    color: #FFF;
  }

  .estimate_result_btn {
      width: 95%;
  }
}

/*** お客様情報入力画面 ***/
.estimate_flow{
	display:flex;
	width: 715px;
	margin: 30px auto;
	justify-content: space-between;
}

.estimate_flow li {
    width: 143px;
    position: relative;
    display: block;
}

.estimate_flow li:not(:last-child):after {
    left: 72px;
    bottom: 43px;
    width: 123px;
    height: 2px;
    margin: 0 15px;
    position: absolute;
    display: block;
    content: "";
    background: #d0d6d9;
}

.estimate_flow h5 {
    margin: 0 auto;
    font-weight: normal;
    text-align: center;
    color: #000;
    line-height: 30px;
    background: #d0d6d9;
    width: 30px;
    height: 30px;
    border-radius: 25px;
}

.estimate_flow p {
    text-align: center;
    font-size: 0.8em;
    margin: 0 auto;
    margin-top: 10px;
}
.color_change {
    background: #333333 !important;
    color: #fff !important;
}

.other_sender_wrapper h4, .other_deliv_wrapper h4{
	padding-left: 20px;
}

.estimate_send_wrap, .contact_send_wrap {
    width: 800px;
    border-bottom: 1px dotted #d0d6d9;
    padding: 10px 0 10px 0;
		display: flex;
}

.estimate_send_wrap h4, .contact_send_wrap h4 {
		padding-top:10px;
    width: 35%;
		font-weight: bold;
}

.estimate_send_wrap p, .contact_send_wrap p {
    margin: 10px 0;
		line-height: 1.6;
		font-size: 15px;
}

.estimate_send_left, .contact_send_right {
    font-size: 1.1em;
}
.estimate_send_left {
	width: 65%;
}

.estimate_send_left div {
    margin-bottom: 10px;
}

.estimate_send_left input, .contact_send_right input {
    height: 32px;
    padding-left: 5px;
    font-size: 14px;
}

.contactInputLimit{
	font-size: 13px;
	color: #7f7f7f;
}

.payment_text {
	font-size: 0.9em;
	color: #888;
	margin-top: 10px;
	padding-left: 0px;
	line-height: 1.4em;
}

textarea.deliv_demand{
	width: 100%;
	height:200px;
	border: 1px solid #000;
	padding:10px;
	line-height: 1.4;
}

.contact_checkbox, .estimate_checkbox {
    margin: 0 auto;
    width: 100%;
    font-size: 0.8em;
    text-align: center;
    margin-top: 20px;
		line-height: 1.6;
}
.estimate_send_left>p a, .contact_checkbox>label>a, .estimate_checkbox>label>a, .estimate_complete_comment a {
    color: #41c0ed;
    text-decoration: underline;
}

.goods_send{
	width:65%;
}

@media screen and (max-width: 480px){

	.estimate_send_main, .contact_send_main {
	    padding: 0 5px;
	}

	.estimate_send_wrap, .contact_send_wrap, .estimate_send_wrap p, .contact_send_wrap p {
	    width: 100%;
			flex-wrap:wrap;
	}

	.estimate_send_wrap h4, .contact_send_wrap h4 {
	    width: 100%;
	    height: 2.5em;
	    background-color: #47BBC5;
	    color: #FFF;
			padding-top: 10px;
	    padding-left: 10px;
	    margin-bottom: 1em;
	    box-sizing: border-box!important;
	}

	.estimate_flow {
	    width: 100%;
			margin:0 auto 15px;
	    padding-top: 10px;
			background-color: #333;
	    color: #fff;
	}

	.estimate_flow p {
    text-align: center;
    font-size: 0.7em;
    margin-top: 0px;
	}
	.color_change {
    background: red !important;
    color: #fff !important;
	}
	.estimate_flow li:not(:last-child):after{
		display: none;
	}

	.goods_send{
		width:100%;
	}

	.estimate_send_left {
	    padding-left: 5px;
			width:95%;
	}

	.goods_send_btn, .payment > p{
		padding-left:10px;
	}

}


.estimate_send_left select, .contact_send_right select {
    width: 200px;
    height: 39px;
    padding-left: 15px;
 		font-size: 0.8em;
}

.short {
    width: 62px !important;
    height: 35px !important;
    margin-right: 15px;
}

.long {
    width: 320px;
}
.state{
	width: 130px!important;
}

.deliv_day_box{
	margin-left: 5px;
}

.radio_buttons{
	margin: 10px 0;
}

.radio_buttons p{
	margin: 0px;
}

.filter_display{ display: none; margin: 0 !important; padding: 0; }
 .urgentDate_filter{ position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: table;
   z-index: 100;
 }
 .filter_layout{
   display: table-cell;
   vertical-align: middle;
 }
 .filter_layout div{
   max-width: 600px;
   margin: 0 auto 0;
   background: #fff;
   padding: 40px;
   border: 8px solid #4EBDC5;
   border-radius: 5px;
   position: relative;
 }
 .filter_layout div p.close{
   position: absolute;
   right: 0;
   top: 0;
   width: 40px;
   height: 40px;
   text-align: center;
   line-height: 40px;
   background: #DD2C73;
   color: #fff;
   border-radius: 5em;
   cursor: pointer;
 }

 .filter_layout div dl{ margin-bottom: 20px; }
 .filter_layout div dl:last-child{ margin-bottom: 0; }
 .filter_layout dl dt{ font-weight: bold; margin-bottom: 10px; }
 .filter_layout dl dd{ font-size: 16px; line-height: 1.6em; }

@media screen and (max-width: 480px) {
  .urgentDate_filter{ z-index: 2000; }
 .filter_layout div{ max-width: 90%; max-height: 75%; padding: 25px; }
 .filter_layout dl dd{ font-size: 13px; line-height: 1.3em; }
}

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  max-width: 500px;
  padding: 10px 30px;
  background-color: #fff;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}

/***** お客様情報確認ページ *****/
.estimate_comform_wrap, .contact_comform_wrap {
		width: 100%;
		border-bottom: 1px dotted #d0d6d9;
		padding: 5px 0 15px;
		display: flex;
}
.estimate_comform_wrap h4, .contact_comform_wrap>h4 {
	font-size: 16px;
	font-weight: bold;
	padding-top: 13px;
	width: 30%;
}
.estimate_comform_wrap p, .contact_comform_wrap>p {
	word-break: break-all;
	text-align: left;
	font-size: 1em;
	color: #000;
	width: 60%;
	padding-top: 13px;
	padding-left: 80px;
}
@media screen and (max-width: 480px){
.estimate form {
		padding: 0 5px;
}
.estimate_comform_wrap{
	flex-wrap: wrap;
}
.estimate_comform_wrap h4, .contact_comform_wrap>h4 {
	width: 100%;
	font-size: 14px;
	font-weight: normal;
	padding-top: 5px;
}
.estimate_comform_wrap p, .contact_comform_wrap>p {
		width: 100%;
		padding-top: 0;
		padding-left: 0;
		text-align: right;
}

}

/***  注文完了ページ ******************/
.estimate_complete_comment {margin: 0 auto; line-height: 1.6;}
.estimate_complete_comment span{ font-size: 24px;}
.submit_result { color:#fff; width:200px; padding: 4px 25px; height: 40px; background: #333333;text-align: center; line-height: 24px; border: none;border-radius: 3px;}
.submit_result:hover {background:  #c1ae46}

@media screen and (max-width: 480px) {
 .estimate_complete_comment {margin-top:0; font-size: 0.8em; line-height: 1.6; margin-bottom: 20px; padding: 0 10px;}
 .contact_comform_wrap{padding: 0 0 15px 0; flex-wrap:wrap;}
}


/**** データ入稿 *****/
.fileinput-button{
	padding-top:7px;
}
.design_upload_wrapper{
  line-height: 1.6;
}
.data_demand{
  width: 90%;height:150px;margin: 15px 10px;
}
.input_mailaddress{ width: 320px; height: 35px; padding: 5px; font-size:14px; }
.btn-default-next {font-size: 1em;  border: none; background: #dd2c73;  margin-top:30px; margin-bottom: 30px; width: 195px; height: 40px; color:#fff; margin: 0 auto; text-align: center; line-height: 40px; font-weight: normal; border-radius: 3px;}
.btn-default-next:hover {color: #fff; background: #ea4285}

@media screen and (max-width:480px){
  .design_upload_wrapper{
    padding:0 10px;
    font-size:14px;
  }
}


/*****************************
/* ご利用ガイド
/*****************************/
.usageGuideLists{
	margin-bottom:40px;
}

.usageGuideLists > ul {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.usageGuideLists > ul > li {
	display: flex;
	width: 212px;
	height: 120px;
	border-radius:10px;
	border: 2px solid #e1e1e1;
	text-align:center;
	flex-wrap:wrap;
}

.usageGuideLists > ul > li a {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 15px;
}

.usageGuideLists__icon {
	width:100%;
	margin-bottom:15px;
}

.usageGuideLists__icon > i {
	font-size: 50px;
	color: rgba(6, 2, 3, .5);
}

.usageGuideLists__label {
	width:100%;
	font-size:14px;
}

@media screen and (max-width:480px){
	.usageGuideLists > ul {
		gap: 0;
	}
	.usageGuideLists > ul > li {
		width: 100%;
		height: auto;
		border-radius: 0;
		border: none;
		border-top: 1px solid #e1e1e1;
		border-left: 1px solid #e1e1e1;
		border-right: 1px solid #e1e1e1;
	}

	.usageGuideLists > ul > li:last-child {
		border-bottom: 1px solid #e1e1e1;
	}

	.usageGuideLists > ul > li a {
		flex-wrap: nowrap;
		padding: 10px;
	}

	.usageGuideLists__icon {
	    width: 30px;
	    margin-bottom: 0px;
	}

	.usageGuideLists__icon > i {
		font-size: 24px;
	}

	.usageGuideLists__label {
 		position: relative;
		display: flex;
		align-items: center;
		padding-left: 15px;
		font-size: 16px;
	}

	.usageGuideLists__label:after {
		content: '';
	  width: 6px;
	  height: 6px;
	  border: 0;
	  border-top: solid 2px #333;
	  border-right: solid 2px #333;
	  transform: rotate(45deg);
	  position: absolute;
	  top: 0;
	  right: 5px;
	  bottom: 0;
	  margin: auto;
	}
}
.box {
		background-color: #ebebeb;
		padding: 1em 2em;
		margin-bottom: 3em;
}

.button_wrapper{
	display: flex;
	gap: 30px;
	flex-wrap: nowrap;
	justify-content: center;
}
.button_wrapper .button {
	width:25.0%;
}

.button_wrapper .button a {
	width:100%;
}

@media screen and (max-width:480px){
	.box{
		padding: 1em;
	}

	.button_wrapper{
		flex-wrap: wrap;
		gap: 15px;
	}
	.button_wrapper .button {
		width:100%;
	}
}

.guide p {
	font-size: 15px;
}

.guide img{
/*
	border: 1px solid #e1e1e1;
*/
	margin-bottom: 20px;
}

.reason > h2,	.reason > h3,	.reason > h4 {
	font-weight: bold;
	margin-top: 1.5em;
	margin-bottom: 1.0em;
}

.reason > h2 {
	font-size: 1.5em;
	padding: 25px;
	background-color: #f5f6f7;
}

.reason > h3 {
	border-left: 7px solid #888;
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	font-size: 22px;
	padding: 12px 20px;
}

.reason > h4 {
	border-top: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	font-size: 20px;
	padding: 9px 10px;
}

.reason img {
	max-height: 500px;
	max-width: 90%;
	width: auto;
}

@media screen and (max-width:480px){
	.reason img {
		height: auto;
		max-width: 100%;
	}
}

.reason_video_wrap{
	text-align:center ;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.reason_video{
	width: auto;
	height: 300px;
}
@media screen and (max-width:480px){
	.reason_video{
		width: 100%;
		height: auto;
	}
}

.faqCardList {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 15px 10px;
	margin: 30px 0 50px;

}
.faqCardList li {
	width: 23%;
}

.faqCardList li a{
	font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	display: block;
	border: 1px solid #4D7C9A;
	border-radius: 40px;
	text-align: center;
	font-size: 17px;
	margin: 0;
	padding: 10px 20px;
	color: #4D7C9A;
	font-weight: bold;
}

@media screen and (max-width:480px){
	.faqCardList li {
		width: 100%;
		gap: 10px;
	}
	.faqCardList li a {
		font-size: 15px;
		padding: 10px 20px;
	}
}

.guide_detail {
	margin-bottom: 3em;
}

.guide_detail h2:before, .header--levelSecond:before{
	content: "\f078";
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	color: #4D7C9A;
	margin-right: 0.25em;
}

.guide_detail h2, .header--levelSecond
{
	margin-bottom: 30px;
	padding-bottom:8px;
	font-size: 19pt;
	border-bottom: 1px silver dotted;
}

.guide_detail h3, .header--levelThree {
	display: table;
	font-size: 1.06em;
	font-weight: 700;
	color: #c83839;
	margin-top: 20px;
	margin-bottom: 15px;
	border-left: 12px solid #c83839;
	padding-left: 10px;
	height: 2.5em;
	line-height: 2.5em;
}

@media screen and (max-width:480px){
	.guide_detail h3, .header--levelThree{
		height: 1.7em;
		line-height: 1.7em;
	}
}

.header__design__tab{
	margin: 0em;
	display: inline-block;
	position: relative;
	top: 3px;
	padding: 0 .5em;
	height: 1.5em;
	line-height: 1.5em;
	color: #ffffff;
	background: #00bfff;
	font-weight: bold;
	text-align: center;
	border-radius: 5px 5px 0 0;
}
.textbox__deepBlueSky{
	margin-bottom: 2.0em;
	background: rgba(255, 255, 255, 0);
	border: solid 3px #00bfff;
	border-radius: 0 5px 5px;
	padding: 20px;
	font-size: 90%;
	counter-reset: list;
}

.textbox__deepBlueSky li {
	position: relative;
  padding: 0 0 0 30px;
  margin: 7px 0 7px 0px;
  font-weight: bold;
  font-size: 18px;
  line-height: 29px;
  border: dashed 1px transparent;
}

.textbox__deepBlueSky li:before {
	counter-increment: list;
	content: counter(list);
	position: absolute;
	left: -10px;
	width: 30px;
	height: 30px;
	text-align: center;
	color: #fff;
	line-height: 30px;
	background: #F6A38B;
	border-bottom-color: #F6A38B;
	border-radius: 50%;
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.designDataMakingMethodList h3 {
	font-size: 1.06em;
  font-weight: 700;
	margin-bottom:15px;
}

.guide_detail ul, .guide_detail ol  {
	font-size: 15px;
	line-height:1.8;
	margin-bottom: 20px;
}

.guide_detail a {
	color: #007bff;
	text-decoration: underline;
}

.guide_detail a:hover {
	text-decoration: none;
	opacity: 1.0;
}

/* ご注文の流れ */
.userguide_wrap_a, .userguide_wrap_b {
  background: #f9f9f9;
  margin: 20px 0;
	padding-bottom:5px;
  height: auto;
}
.userguide_wrap_b{
	margin-top:60px;
}
.userguide_wrap_a h3, .userguide_wrap_b h3 {
    font-size: 1.1em;
    position: relative;
    left: 7px;
    bottom: 21px;
    color: #fff;
    width: 160px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 40px;
    background: #42aacf;
}
.userguide_wrap_a h3 { background: #47BBC5; }
.userguide_wrap_b h3 { background: #cf425d; }

.userguide_btn {
    margin-top: 30px;
    border: 2px solid #000;
    float: right;
    border-radius: 3px;
    height: 31px;
    width: 200px;
    text-align: center;
    line-height: 31px;
}
.userguide_step > div {
    margin: 0 80px 100px;
    position: relative;
}
.userguide_step > div:before {
		content: "";
		background: #a9a9a9;
		display: block;
		position: absolute;
		width: 8px;
		bottom: -102px;
    left: 280px;
    height: 101px;
}

.userguide_step > .userguide_step4_main:before {
    bottom: -205px;
    left: 280px;
    height: 205px;
}
.userguide_step > .userguide_step6_main:before {
    bottom: 0;
    left: 0;
    height: 0;
}

.userguide_step > div > div {
    background: #fff;
    width: 100%;
    padding: 20px 20px 20px 86px;
    line-height: 1.7em;
    border-radius: 0 0 3px 3px;
}
.userguide_wrap_a h4, .userguide_wrap_b h4{
    padding-left: 50px;
    font-size: 1.3em;
    width: 100%;
    color: #fff;
    text-align: center;
    border-radius: 3px 3px 0 0;
    line-height: 55px;
}
.userguide_wrap_a h4 { background: #47BBC5; }
.userguide_wrap_b h4 { background: #DD2C73; }

.userguide_step > div:after {
    top: -5px;
    left: -75px;
    content: "";
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
		background-size: cover;
}

.userguide_step1_main:after { background: url(../img/flow_icon_step1_v02.png) no-repeat; }
.userguide_step2_main:after { background: url(../img/flow_icon_step2_v02.png) no-repeat; }
.userguide_step3_main:after { background: url(../img/flow_icon_step3_v02.png) no-repeat; }
.userguide_step4_main:after { background: url(../img/flow_icon_step4_v02.png) no-repeat; }
.userguide_step5_main:after { background: url(../img/flow_icon_step5.png) no-repeat; }
.userguide_step6_main:after { background: url(../img/flow_icon_step6.png) no-repeat; }

@media screen and (max-width:480px){
	.userguide_btn{
		float: left;
	}

	.userguide_wrap_a h4, .userguide_wrap_b h4{
		font-size:16px;
		line-height:32px;
		text-align: left;
	}

	.userguide_step > div {
		margin: 0 20px 70px;
	}

	.userguide_step > div > div {
		padding: 20px 15px;
	}

	.userguide_desc{
		font-size:14px;
	}

	.userguide_step > div:after {
		top: -5px;
    left: -20px;
    width: 60px;
    height: 60px;
	}
}

/********************************/
/* 会社概要                      */
/********************************/
.company_portrait_wrap {
}

.company_portrait_wrap iframe {
	width: 100%;
}

.company_portrait_wrap a{
	color: #0693e3;
	text-decoration: underline;
}
.company_portrait_wrap a:hover{
	text-decoration: none;
}

/*****************************/
/* スタッフ一覧               */
/*****************************/
.staff_list{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 4.0em;
	row-gap: 1.0em;
}

.staff_list__person{
	width:16.6%;
	gap: 0.9px;
}

.staff_list__name{
	font-size: 0.9em;
}

.staff_list__name, .staff_list_detail__name{
	display: block;
	text-align: center;
}

.staff_list_detail__person{
	display: flex;
	margin-bottom: 2.0em;
	gap: 3%;
}

.staff_list_detail__imageBox{
	width: 25%;
}

.staff_list_detail__contentBox{
	width: 70%;
}

.staff_list_faqList {
	border: 2px solid #000;
	padding: 1.5em 1.0em 1.0em;
	border-radius: 10px;
}

.staff_list_faqList__list{
	margin-bottom: 0.25em;
}

.staff_list_faqList__header{
	display: block;
	font-weight: bold;
	margin-bottom: 0.3em;
}

.staff_list_faqList__text{
	font-size: 0.9em;
	padding-left: 1.0em;
}

@media screen and (max-width: 480px){
	.staff_list__person{
		width:33.3%;
		gap: 0.9px;
	}

	.staff_list_detail__person{
		flex-wrap: wrap;
	}
	.staff_list_detail__imageBox, .staff_list_detail__contentBox {
		width: 100%;
	}
	.staff_list_detail__imageBox{
		margin-bottom: 1.0em;
	}
}

/****************************/
/* よくある質問              */
/*****************************/
.faqIndex {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		padding-left: 0;
		flex-flow: row wrap;
		margin: 20px 0px;
}
.faqIndex li {
		box-sizing: border-box;
		border-radius: 8px;
		border: solid 1px #4D7C9A;
		margin-right: 1%;
		padding: 10px;
		width: 49.5%;
}
.faqIndex li:nth-child(2n) {
		margin-right: 0px;
}
.faqIndex li:nth-child(n+3) {
		margin-top: 1%;
}
.faqIndex li a {
		display: block;
		position: relative;
		font-size: 16px;
		color: #4D7C9A;
		font-weight: bold;
		transition: 0.3s;
}
.faqIndex li a:hover {
		opacity: 0.7;
}
.faqIndex li a::after {
		border-bottom: solid 2px #aaa;
		border-right: solid 2px #aaa;
		width: 10px;
		height: 10px;
		transform: rotate(45deg);
		display: block;
		content: "";
		position: absolute;
		right: 15px;
		top: 5px;
}
@media (max-width: 768px) {
		.faqIndex li {
				width: 100%;
				margin-right: 0;
				padding: 8px;
				border-radius: 0px;
				border: none;
				border-top: dashed 1px black;
		}
		.faqIndex li:last-child {
				border-bottom: dashed 1px black;
		}
		.faqIndex li:nth-child(2n) {
				margin-right: 0;
		}
		.faqIndex li:nth-child(n+2), .faqIndex li:nth-child(n+3) {
				margin-top: 0%;
		}
		.faqIndex li a {
				font-size: 14px;
				padding-right: 20px;
		}
		.faqIndex li a::after {
				right: 5px;
				top: 6px;
		}
}
/*=========
accordion
=========*/
.accordion_area {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
}
.accordion_area .accordion_one .ac_header {
		background-color: #ffffff;
		border: 1px solid #ccc;
		padding: 1rem 4rem 1rem 1rem;
		position: relative;
		z-index: 0;
		cursor: pointer;
		transition: .2s;
}
.accordion_area .accordion_one .ac_header:not(.open):hover {
		background-color: #f1f8ff;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header {
		background-color: #f5f5f5;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header:not(.open):hover {
		background-color: #f1f8ff;
}
.accordion_area .accordion_one .ac_header .i_box {
		position: absolute;
		top: 50%;
		right: 2rem;
		width: 20px;
		height: 20px;
		margin-top: -10px;
}
.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 #014897;
		width: 20px;
		height: 0;
		top: 0;
		bottom: 0;
		right: 0;
}
.accordion_area .accordion_one .ac_header .i_box:after {
		border-left: 2px solid #014897;
		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: 1.5rem 2rem 0.5rem 1rem;
		box-sizing: border-box;
		background: #fff;
}
/*=========
faq
=========*/
.faqLabel {
    text-align: center;
    background-color: #4D7C9A;
    padding: 5px;
}

.faqLabel span {
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
}

.p-faq__headinner {
		display: block;
		padding-left: 35px;
		position: relative;
		line-height: 1.5;
}
.p-faq__headinner::before {
		position: absolute;
		left: 0;
		top: -5px;
		content: "Q．";
		color: #09357f;
		font-size: 20px;
		font-weight: bold;
}
.p-faq__headinner p.p-faq__q-txt {
		font-size: 16px;
		margin: 0;
		line-height: 1.5
}
.p-faq__bodyinner {
		display: block;
		padding-left: 35px;
		position: relative;
		line-height: 1.5;
}
.p-faq__bodyinner::before {
		position: absolute;
		left: 0;
		content: "A．";
		color: #de0000;
		font-size: 20px;
		font-weight: bold;
}
.p-faq__bodyinner p.p-faq__a-txt {
		font-size: 16px;
		line-height: 1.8em;
}
.p-faq__bodyinner p.p-faq__a-txt a {
		font-weight: bold;
}

/*** youtube wrapper ***/
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
	margin-bottom: 12px;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}


/*********************/
/* デザイン作成ガイド */
/*********************/
.twoRectangleList {
	display: flex;
  flex-wrap: wrap;
	gap: 10px;
  margin-bottom: 3em;
}

.twoRectangleList li {
	box-sizing: border-box;
	border-radius: 8px;
	padding: 8px 0 8px 10px;
	width: 49.5%;
}

.twoRectangleList li a {
	display: block;
	position: relative;
	font-weight: bold;
	transition: 0.3s;
}

.designDataMakingMethodList > li {
  border: 1px solid #e1e1e1;
  padding: 30px;
  margin-bottom: 20px;
}

.designDataMakingMethodList__title {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 20px;
}

.designDataMakingMethodList__text {
	font-size: 0.95em;
	padding: 0 0.5em;
}

.designDataMakingMethodList__buttonList{
	display: flex;
  flex-wrap: wrap;
	row-gap: 10px;
	column-gap: 100%;
	margin-top:2.0em;
}

.designDataMakingMethodList__buttonList li {
	width: 100%;
}

.designDataMakingMethodList__button {
	display: block;
	width: 100%;
	background: #4D7C9A;
	text-align: center;
	color: white;
	padding: 15px 20px;
	border-radius: 30px;
}

@media screen and (max-width:480px){
	.twoRectangleList li {
		width: 100%;
	}

	.designDataMakingMethodList > li {
		padding: 25px 15px;
	}

	.designDataMakingMethodList__title {
		font-size: 1.1em;
	}

	.designDataMakingMethodList__text {
		font-size: 0.85em;
	}
}

.design_tbl {
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 30px;
		font-size: 14px;
		line-height:1.8;
}
.design_tbl tr {
    border: 1px solid #ccc;
}
.design_tbl th {
    width: 150px;
    background-color: #cceafe;
}
.design_tbl, .design_tbl th, .design_tbl tr, .design_tbl td {
    padding: 10px;
}

/* デザインデータ作成の概要 */

.aboutTemplateFile__title {
	display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 0.5em;
}

.aboutTemplateFile{
	display: flex;
	flex-wrap: wrap;
	row-gap: 0.5em;
}

.aboutTemplateFile li {
	width: 50%;
}

.aboutTemplateFile p {
	font-size: 0.95em;
}

@media screen and (max-width:480px){
	.aboutTemplateFile li {
		width: 100%;
	}
	.designDataMakingMethodList p{
		font-size: 0.85em;
	}

}


.imageWrap {
	width: 100%;
	text-align: center;
	margin-bottom: 1.5em;
}


/****************/
/* デザイン事例 */
/****************/
.badgeDesginExample{
	display: flex;
	flex-wrap: wrap;
	gap: 1.3%;
	margin-bottom: 3em;
}

.badgeDesginExample__item{
	width:24%;
}

.badgeDesginExample__img{
	width: 100%;
}

.badgeDesginExample__text{
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width:480px){
	.badgeDesginExample{
		gap: 4%;
	}

	.badgeDesginExample__item{
		width:48%;
	}

}


/******************/
/*　包装について   */
/******************/
.packingImageList{
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	text-align: center;
 	align-items: flex-start;
}

.packingImageList__list{
	display: flex;
	flex-wrap: wrap;
	max-width: 23%;
	margin-bottom: 1em;
}

.packingList li {
	margin-bottom : 2.0em;
}

@media screen and (max-width:480px){
	.packingImageList__list__half {
		max-width: 45%;
	}
	.packingImageList__list__oneThird {
		max-width: 31%;
	}
}

.packingImageList__label, .packingImageList__image,  .packingImageList__price{
	width: 100%;
	margin-top: 0.3em;
}

.packingImageList__label{
	order: 2;
	font-size: 1.0em;
	font-weight: bold;
}

.packingImageList__image{
	order: 1;
	height: auto;
	width: 100%;
	margin: 0 auto 1.0em;
	border-radius: 50%;
}

.packingImageList__price{
	order: 3;
	font-size: 0.9em;
}

@media screen and (max-width:480px){
	.packingImageList{
		flex-wrap: wrap;
	}
}

.packingImageList_width{
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: 2.0em;
}
.packingImageList_width__list {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.packingImageList_width__list img{
	max-width: 1140px;
	max-height: 400px;
	width: auto;
}
.packingImageList_width__text{
	width: 100%;
	text-align: center;
}

@media screen and (max-width: 480px){
	.packingImageList_width__list img{
		max-width: 100%;

	}
}

.packingImageList__subHeader{
	background: #47BBC5;
	padding: 0.6em 1em;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	width: 1140px;
}

@media screen and (max-width:480px){
	.packingImageList__subHeader{
		font-size: 0.9em;
	}
}

/* レンタル */
.flexTwoWrapList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;;
}

.flexTwoWrapList p {
  font-size: 14px;
}

.flexTwoWrapList li {
	line-height: 1.8;
}

.flexTwoWrapList > li {
	width: 47%;
	margin-bottom: 30px;
	text-decoration: none;
	padding: 10px 20px 10px 15px;
	background: #f7f7f7;
	border-left: solid 6px #4D7C9A;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}

.flexTwoWrapList__title {
		font-size: 24px;
		border-bottom: 1px dashed #000;
		padding-left:10px;
		padding-bottom: 5px;
		margin-bottom: 15px;
}

.flexTwoWrapList__content{
	font-family: sans-serif;
	font-size: 15px;
}

.flexTwoWrapList__content__link{
	color:#007bff;
	text-decoration: underline;
}

.flexTwoWrapList__content__subhead {
	font-size: 18px;
	margin-bottom: 2px;
	font-weight: bold;
}

.flexTwoWrapList ol {
	margin-bottom: 15px;
}

@media screen and (max-width: 480px){
	.flexTwoWrapList li {
		width: 100%;
	}

	.flexTwoWrapList__title {
		font-size: 20px;
	}
}

.listStyle--disc {
	padding-left: 30px;
}

.listStyle--disc li{
	list-style:disc;
}

.rentalFlowList li {
	display: flex;
}
.rentalFlowList__icon {
	margin: auto 0;
	width: 200px;
	text-align: center;
}
.rentalFlowList__detail{
	padding: 10px;
}

.img__reverse{
  transform: scale(-1, 1);
}


/* ご注文の流れ */
.boxmi14 {
	margin: 40px 0 60px;
	border: dashed 2px #4D7C9A;
	border-radius: 8px;
	box-shadow: 0 0 0 10px #E8F7F7;
	padding: 20px 20px 10px;
	color: #4D7C9A;
	background: #E8F7F7;
}
.boxmi14-title {
	background: #E8F7F7;
	border-radius: 8px 8px 0 0;
	margin: -20px -20px 5px -20px;
	font-size: 1.3em;
	padding: 10px 0 10px 0;
	color: #4D7C9A;
	font-weight:bold;
	text-align: center;
}
.boxmi14 p {
	margin: 0;
	padding: 0;
}

.sen14 {
	background-color: #E8F7F7;
	background-image:
	linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #E8F7F7 0%, #E8F7F7 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #4D7C9A 100%);
	background-size: 8px 100%,100% 2em;
	line-height: 2;
		padding: 4px 10px 22px 10px;
}
@media screen and (max-width:480px){
	.sen14{
		background-size: 8px 100%, 100% 1.6em;
	}
}
.sen14 p{
	line-height: 2;
}

@media screen and (max-width:480px){
	.sen14{
		font-size: 14px;
		font-weight:normal;
	}
	.sen14 p{
		line-height: 1.75;
	}
}

/********************************/
/* 缶バッジ診断                  */
/********************************/
.introText{
	text-align: center;
}
@media screen and (max-width:480px){
	.introText{
		text-align: left;
	}
}

.diagnosisWrap{
	border: 1px solid #BEE6E8;
  width: 1140px;
  height: 640px;
  background: #BEE6E8;
  position: relative;
  z-index: 0;
	margin-bottom: 2.5em;
}

.diagnosis__designBase{
  width: 100%;
  height: 640px;
}

@media screen and (max-width:480px){
	.diagnosisWrap{
		width: 100%;
		height: 540px;
		display: flex;
		align-items: center;
	}
	.diagnosis__designBase{
		width: 100%;
		height: 540px;
	}
}

.question__base{
	position: relative;
  border: black 2px solid;
  background: #BEE6E8;
  width: 90%;
  height: 200px;
  padding: 10px;
  margin: 30px auto 50px;
}

.question__base:before{
	position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) skew(25deg);
  height: 25px;
  width: 15px;
  border-left: 3px solid #333;
  background-color: #BEE6E8;
  content: "";
}

.diagnosis__questionWrap{
  position: relative;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: white;
}

.diagnosis__answerWrap{
  text-align: center;
}

.diagnosis__questionNumber{
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 5.0em;
  font-family: 'FontAwesome';
  color: rgba(191, 231, 233, 0.7);
}

.diagnosis__questionText{
  position: relative;
  font-size: 2.0em;
  font-weight: bold;
  border-bottom: 10px solid yellow;
}

.diagnosis__answerButton{
  position: relative;
  background: white;
  padding: 15px 50px;
  border-radius: 40px;
  min-width: 600px;
  font-size: 1.5em;
  margin-bottom: 1.0em;
}

.diagnosis__answerButton:before{
  position: absolute;
  top: 10px;
  right: -10px;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, #5FC2C5 0px 5px, transparent 5px 10px);
  content: '';
  z-index: -1;
  border-radius: 30px;
}

.diagnosis__answerButton:after {
    position: absolute;
    top: 10px;
    right: -10px;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    z-index: -2;
    border-radius: 30px;
}

.diagnosisResultWrap {
    width: 100%; /* コンテナの幅 */
    height: 100%; /* コンテナの高さ */
    position: relative; /* 子要素の配置の基準点 */
    overflow: hidden; /* はみ出した画像を非表示に */
}

#resultImage, .resultImage {
    width: 100%;
		max-height: 640px;
    height: 100%;
    object-fit: contain;
}

.shareButtons {
    text-align: center;
    margin: 2em 0;
}

.linkButton {
		display: block;
		width: 250px;
		padding: 15px 20px;
		margin: 0 auto;
		background-color: #DD2C73;
		color: white;
		text-decoration: none;
		border-radius: 5px;
}

.linkButton.blue{	background-color: #1DA1F2; }
.linkButton.pink{ background-color: #DD2C73; }


@media screen and (max-width:480px){
	.question__base{ width: 95%; }
	.diagnosis__answerButton{ min-width: 90%; font-size: 1.2em; }
	.diagnosis__questionNumber{ font-size: 1.5em; }
	.diagnosis__questionText{ font-size: 1.2em; line-height: 2.5em;}
}

.fadeIn {
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
}

.fadeIn.visible {
	opacity: 1;
}


.diagnosisTitle{
	text-align: center;
	font-size:1.2em;
}

.diagnosisTitle__itemName{
	display: inline-block;
	font-size: 1.6em;
	margin: 0.7em 0 1em;
	border-bottom: #000000 dotted 4px;
	padding-bottom: 10px;
	border-top: #000000 dotted 4px;
	padding-top: 15px;
}

.additionalText{
	position: relative;
	padding: 1em 2em;
	margin-bottom: 2.0em;
	color: #0075a9;
	border-radius: 0 10px 10px 10px;
	background: #E8F7F7;
	text-align: center;
	letter-spacing: 0.5px;
}

.additionalText:before{
	font-family: 'Font Awesome 5 Free';
	line-height: 1.5em;
	font-size: 1.0em;
	position: absolute;
	top: -24px;
	left: 0;
	padding: 0 1em;
	content: '\f0a4  POINT';
	color: #fff;
	border-radius: 10px 10px 0 0;
	background: #4D7C9A;
}

.additionalText__text{
	line-height: 2em;
	font-size: 1.2em;
	text-align: center;
}

.additionalText__link{
	display: block;
	text-decoration: underline;
	color: #007bff;
	font-weight: bold;
	font-size: 1.2em;
	margin: 0.5em 0 0.7em;
}
.additionalText__link:hover{
	text-decoration: none;
}


@media screen and (max-width:480px){
	.additionalText{
		padding: 1.0em;
		text-align: left;
	}
	.additionalText__text{
		font-size: 1.0em;
	}
}

.startImage{
	width: 100%;
	height: auto;
	cursor: pointer;
	display: block;
}
@media screen and (max-width:480px){
	.startImage{
		width: 100%;
		height: auto;
	}
}

/********************************/
/* 離脱防止ポップアップウィンドウ */
/********************************/
/* ポップアップのスタイル */
.popup, .popup-background {
	display: none; /* 初期状態では非表示 */
	opacity: 0; /* 初期状態では透明 */
	transition: opacity 0.5s; /* フェードイン/フェードアウトのトランジション */
}

.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 480px;
	padding: 0px;
	background-color: white;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

@media screen and (max-width: 480px){
	.popup {
		width:300px;
	}
}

/* ポップアップの画像 */
.popup img {
	width: 100%;
}

/* 閉じるボタン */
.popup .close-btn {
	position: absolute;
	top: -35px;
	right: 0px;
	cursor: pointer;
	font-size: 30px;
	color: #fff;
}

/* ポップアップの背景 */
.popup-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}


/* 20241028.add */
/* テンプレートページ用 */
.label_list{
  color: #007bff;
  transition: 0s;
	line-height: 1.8;
	font-size: 1.1em;
}
.label_list li a{
  text-decoration: underline;
}
.label_list li a:hover{
	text-decoration: none;
}

.templateFileList{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dcdcdc;
}
.templateFileList thead{
	background: #f3f3f3;
}

.templateFileList th, .templateFileList td{
  border: 1px solid #dcdcdc;
	padding: 1em;
}

.templateFileList a{
	color: #007bff;
	text-decoration: underline;
}
.templateFileList a:hover{
	text-decoration: none;
}

/* 20241028.end */

/* 20241031.start */
.templateFile__titleBlock{
  background: #3f4b54;
  color: white;
  padding: 10px 15px;
  font-size: 15px;
  border-radius:5px;
  margin-top:0.5em;
}

.templateFile__titleBlock__text{
  display: inline-block;
  padding-left: 5px;
}
.templateFile__link{
  display: inline-block;
  margin-bottom:0.5em;
}
/* 20241031.end */

/* 20241108.start */
.error{
	border: 1px dotted red;
	padding: 20px;
}

.error_area{
	line-height:1.3em;
}

.error_head{
	font-weight: bold;
	text-align: center;
	margin-bottom: 1em;
}

.contact_send_wrap__leftBox{
	width: 30%;
}
.contact_send_wrap__rightBox{
	width: 70%;
}

@media screen and (max-width:480px){
	.contact_send_wrap__leftBox, .contact_send_wrap__rightBox, .contact_send_right, .contact_send_right input, .contact_send_right input[type="text"]
	{
		width: 100%;
	}
}

.contact_send_wrap__innerCardWrap{
		width: 800px;
    border-bottom: 1px dotted #d0d6d9;
		display: flex;
		justify-content: center;
}
.contact_send_wrap__innerCardBox{
	width: 780px;
	border: 1px solid black;
	margin-top:1em;
	margin-bottom:1em;
}

.contact_send_wrap__leftBox__label{
	display: block;
	font-weight: bold;
}

span.required{
	display: inline-block;
	margin-left: 0;
	margin-top: 0.4em;
	padding: 0.25em 0.3em
}

@media screen and (max-width: 480px){
	.contact_send_wrap__leftBox__label{
			display: inline-block;
			margin-bottom: 0.7em;
	}
	span.required{
		margin-top: 0;
		margin-bottom: 0.7em;
	}
}
/* 20241108.end */

.show{ display: block; opacity: 1; }

/********************************/
/* HTML5 <details>/<summary> アコーディオン */
/* Issue #79: accordion.jsから置き換え */
/********************************/

/* 見積フォーム用 details */
.estimate-details {
	margin-bottom: 1em;
}

.estimate-details summary {
	cursor: pointer;
	user-select: none;
	list-style: none; /* デフォルトの三角を非表示 */
}

.estimate-details summary::-webkit-details-marker {
	display: none; /* Webkit系のマーカーを非表示 */
}

.estimate-details .estimate_extra_input_caption {
	/* 既存のスタイルを維持 */
}

/* FAQ用 details */
.faq-details {
	/* 既存のaccordion_one構造を継承 */
}

/* summaryに元のac_headerスタイルを適用 */
.faq-details summary.ac_header {
	background-color: #ffffff;
	border: 1px solid #ccc;
	padding: 1rem 4rem 1rem 1rem;
	position: relative;
	z-index: 0;
	cursor: pointer;
	transition: .2s;
	user-select: none;
	list-style: none;
}

.faq-details summary.ac_header::-webkit-details-marker {
	display: none;
}

.faq-details summary.ac_header:not(.open):hover {
	background-color: #f1f8ff;
}

/* 奇数行の背景色（li:nth-child(odd)） */
.accordion_area li:nth-child(odd) .faq-details summary.ac_header {
	background-color: #f5f5f5;
}

.accordion_area li:nth-child(odd) .faq-details summary.ac_header:hover {
	background-color: #f1f8ff;
}

/* i_boxアイコン（+/-） */
.faq-details summary.ac_header .i_box {
	position: absolute;
	top: 50%;
	right: 2rem;
	width: 20px;
	height: 20px;
	margin-top: -10px;
}

.faq-details summary.ac_header .i_box:before,
.faq-details summary.ac_header .i_box:after {
	position: absolute;
	content: "";
	margin: auto;
	box-sizing: border-box;
	vertical-align: middle;
}

.faq-details summary.ac_header .i_box:before {
	border-top: 2px solid #014897;
	width: 20px;
	height: 0;
	top: 0;
	bottom: 0;
	right: 0;
}

.faq-details summary.ac_header .i_box:after {
	border-left: 2px solid #014897;
	width: 0;
	height: 20px;
	top: 0;
	bottom: 0;
	right: 9px;
	transition: .3s;
}

/* 開いた時は縦線を非表示（-表示） */
.faq-details[open] summary.ac_header .i_box:after {
	height: 0;
}

/* ac_innerスタイル */
.faq-details .ac_inner {
	padding: 1.5rem 2rem 0.5rem 1rem;
	box-sizing: border-box;
	background: #fff;
}

/* 開閉時のアニメーション（オプション） */
.estimate-details[open] .estimate-details-content,
.faq-details[open] .ac_inner {
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/********************************/
/* テキストリンクのCSS定義の集約 */
/********************************/
