@charset "UTF-8";

/*----------------------------------------

	- header
	- familycolor
	- aboutcaro
	- selectcolor
	- footer

-----------------------------------------*/

/*----------------------------------------
	header
-----------------------------------------*/

header>h1 {
	position: absolute;
	top: 20px;
	left: calc(50% - 117px);
	width: 235px;
	height: 68px;
	z-index: 3;
	user-select: none;
}

@media only screen and (max-width: 414px) {
	header>h1 {
		top: 10px;
		left: calc(50% - 58px);
		width: 117px;
		height: 34px;
	}
}

/*----------------------------------------
	content
-----------------------------------------*/

#content {
	overflow: hidden;
}

/*----------------------------------------
	familycolor
-----------------------------------------*/

#familycolor {
	max-width: 2000px;
	min-width: 1200px;
	width: calc(100% - 100px);
	margin: 0 auto;
}

#familycolor>h1 {
	position: relative;
	z-index: 10;
	width: 1000px;
	height: 40px;
	margin: 198px auto 109px;
}

#familycolor>h1::before {
	content: "";
	position: absolute;
	top: -144px;
	left: calc(50% - 200px);
	width: 400px;
	height: 400px;
	background: url(../img/i_01_logo01.png) no-repeat left top;
	z-index: 1;
}

#familycolor>h1>span:first-child {
	position: absolute;
	top: 0;
	left: calc(50% - 450px);
	letter-spacing: 0.08em;
}

#familycolor>h1>span:nth-child(2) {
	position: absolute;
	top: 0;
	left: calc(50% + 245px);
	letter-spacing: 0.08em;
}

@media only screen and (max-width:767px) {
	#familycolor {
		max-width: 100%;
		min-width: 100%;
		width: 100%;
		margin: 0 auto;
	}

	#familycolor>h1 {
		width: auto;
		height: auto;
		margin: 90px auto 27px;
		text-align: center;
	}

	#familycolor>h1::before {
		top: -80px;
		left: calc(50% - 60px);
		width: 120px;
		height: 120px;
		background-size: 120px 120px;
	}

	#familycolor>h1>span:first-child {
		position: relative;
		left: 0;
	}

	#familycolor>h1>span:nth-child(2) {
		position: relative;
		left: 0;
	}
}

#familycolor>#familycolor_visual>#familycolor_visual_01 {
	position: relative;
	/* 処理負荷をGPUへ */
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#familycolor>#familycolor_visual>#familycolor_visual_01 ul .slick-track li {
	min-width: 1200px;
	width: calc(100vw - 100px);
}

@media only screen and (max-width:767px) {
	#familycolor>#familycolor_visual>#familycolor_visual_01 ul .slick-track li {
		min-width: 100vw;
		width: 100vw;
	}
}

#familycolor>#familycolor_visual>#familycolor_visual_01 ul.slick-slider li img {
	width: 100%;
	height: auto;
}

#familycolor>#familycolor_visual>#familycolor_visual_01>.circle01 {
	position: absolute;
	top: -49px;
	left: 22px;
	width: 229px;
	height: 229px;
	border-radius: 50%;
	background: rgba(158, 208, 246, 0.3);
}

#familycolor>#familycolor_visual>#familycolor_visual_01>.circle02 {
	position: absolute;
	top: -172px;
	right: -2px;
	width: 93px;
	height: 93px;
	border-radius: 50%;
	background: rgba(214, 199, 141, 0.3);
}

#familycolor>#familycolor_visual>#familycolor_visual_01>.circle03 {
	position: absolute;
	top: -150px;
	right: -1px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: rgba(176, 220, 213, 0.4);
}

#familycolor>#familycolor_visual>#familycolor_visual_01>.circle04 {
	position: absolute;
	bottom: -79px;
	left: 37px;
	width: 331px;
	height: 331px;
	border-radius: 50%;
	background: rgba(236, 109, 116, 0.5);
}

@media only screen and (max-width:767px) {
	#familycolor>#familycolor_visual>#familycolor_visual_01>.circle01 {
		top: -13px;
		left: 0;
		width: 62px;
		height: 62px;
	}

	#familycolor>#familycolor_visual>#familycolor_visual_01>.circle02 {
		top: -47px;
		right: 0;
		width: 25px;
		height: 25px;
	}

	#familycolor>#familycolor_visual>#familycolor_visual_01>.circle03 {
		top: -41px;
		right: 0;
		width: 57px;
		height: 57px;
	}

	#familycolor>#familycolor_visual>#familycolor_visual_01>.circle04 {
		bottom: -21px;
		left: 4px;
		width: 90px;
		height: 90px;
	}
}

#familycolor>#familycolor_visual>ul {
	float: right;
	padding: 20px 21px 0 0;
}

#familycolor>#familycolor_visual>ul li {
	float: left;
}

#familycolor>#familycolor_visual>ul li:nth-child(n+2) {
	padding-left: 11px;
}

#familycolor>#familycolor_visual>ul li a {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #b7b2b0;
	cursor: pointer;
}

#familycolor>#familycolor_visual>ul li.current a {
	background: #b9da84;
}

#familycolor>#familycolor_visual>ul li a:hover,
#familycolor>#familycolor_visual>ul li a:active {
	background: #b9da84;
}

@media only screen and (max-width:767px) {
	#familycolor>#familycolor_visual>ul {
		display: table;
		float: none;
		margin: 0 auto;
		padding: 10px 0 0;
	}

	#familycolor>#familycolor_visual>ul li:nth-child(n+2) {
		padding-left: calc(23px/2);
	}
}

#familycolor>section {
	display: table;
	width: 1000px;
	min-height: 544px;
	margin: 0 auto;
	padding: 85px 0 22px;
}

#familycolor>section>div {
	display: table-cell;
	width: 350px;
	padding: 0 0 190px 0;
	background: url(../img/i_02_bg01.png) no-repeat right 16px bottom;
	vertical-align: top;
}

#familycolor>section>div>h1 {
	padding-bottom: 20px;
	word-break: keep-all;
}

#familycolor>section>div>p {
	padding-top: 24px;
}

#familycolor>section>div>p:first-of-type {
	margin-right: -1em;
}

#familycolor>section>figure {
	display: table-cell;
	height: 544px;
	vertical-align: top;
}

#familycolor>section>figure>img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width:767px) {
	#familycolor>section {
		display: block;
		width: auto;
		min-height: auto;
		padding: 37px 0 35px;
	}

	#familycolor>section>div {
		display: block;
		/* width: 320px; 
		221208*/
		width: calc(100% - 30px);
		margin: 0 auto;
		padding: 0 0 34px;
		background: url(../img/i_02_bg01.png) no-repeat right top 53px;
		background-size: calc(216px/2) calc(205px/2);
	}

	#familycolor>section>div>h1 {
		padding-bottom: 0;
	}

	#familycolor>section>div>p {
		padding-top: 20px;
	}

	#familycolor>section>div>p:first-of-type {
		margin-right: 0;
		padding-top: 19px;
	}

	#familycolor>section>figure {
		display: block;
		max-width: 520px;
		/* width: calc(587px/2); */
		height: auto;
		margin: 0 auto;
	}
}

@media only screen and (max-width:320px) {
	#familycolor>section>div {
		width: calc(100vw - 20px);
	}
}



/*---------------------------------

相談会　250512

---------------------------------*/

section#soudan {
    max-width: 800px;
    margin: auto;
    padding-top: 9ex;

}

  h2.soudankai_text {
	text-align: center;
	font-size: 26px;
	/* background: #780e0e; */
	color: #333333;
  }
  
  #news_soudankai {
	position: relative;
	display: inline-block;
  }
  
  #news_soudankai img {
	display: block;
	width: 100%; /* 必要に応じて調整 */
	height: auto;
  }
  




  
  /* ホバー時の画像変化 */
  #news_soudankai img:hover,.detail-button:hover {
	filter: brightness(75%);
  transition: 0.5s;
  }
  
  
  a.detail-button {
    position: absolute;
    left: 3%;
    font-size: 22px;
    bottom: 3%;
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    width: 200px;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.3s;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(51, 51, 51);
    border-image: initial;
}
  
  a.detail-button:hover {
	opacity: 1;
	background-color: #000;
	color: #fff;
  }
  

          /* 相談会250512 */
		  .b-pageTop4 {
            position: relative;
            color: #fff;
            transition: 0.5s;
            background: #780e0e;
            position: fixed;
            z-index: 10;
            right: 0px;
            bottom: 24ex;
            width: 120px;
			padding: 7px 0px;
			text-align: center;
        }
		a.btn.btnーsoudan {
            position: relative;
            font-size: 13px;
            border-radius: 0px;
        }

        a.btn.btnーsoudan span {
            display: inline-block;
            width: 100%;
            padding-top: 5px;
            text-decoration: underline double;

        }

		.b-pageTop4:hover {
            color: #780e0e;
            background: #fff;
			text-decoration: none;
		}

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

  
	section#soudan {
	  max-width: auto;
	}
  
	a.detail-button {
	  width:140px;
	  font-size:15px;
	}
  
	h2.soudankai_text {
	  font-size: 19px;
	}

	#news_soudankai {
		position: relative;
		margin: 0ex 2ex;
	}

		.b-pageTop4 {
			bottom: 26ex;
			width: 105px;
		}

		/* .btn.btnーsoudan {
			font-size: 13px;
		} */

	}
  
  }








/*----------------------------------------
	aboutcaro
-----------------------------------------*/

#aboutcaro {
	position: relative;
	max-width: 2000px;
	min-width: 1200px;
	width: calc(100% - 100px);
	margin: 0 auto;
}

#aboutcaro>figure>img {
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

#aboutcaro>div {
	position: absolute;
	display: table;
	bottom: 37px;
	left: calc(50% - 500px);
	width: 1000px;
	margin: 0 auto;
}

@media only screen and (max-width:767px) {
	#aboutcaro {
		max-width: 100%;
		min-width: 100%;
		width: 100%;
		height: 320px;
		background: url(../img/i_04_bg01.png) no-repeat left top;
		background-size: 767px auto;
	}

	#aboutcaro>figure {
		display: none;
	}

	#aboutcaro>div {
		display: block;
		position: relative;
		bottom: 0;
		left: 0;
		width: 320px;
		height: calc(100% - 27px);
		padding: 27px 0 0;
	}
}

@media only screen and (max-width:320px) {
	#aboutcaro>div {
		width: calc(100vw - 20px);
	}
}

#aboutcaro>div>div {
	display: table-cell;
	width: 700px;
	vertical-align: top;
}

#aboutcaro>div>div>p:first-of-type {
	padding: 24px 0 34px;
}

#aboutcaro>div>div>p:last-of-type {
	color: rgba(255, 255, 255, 0.3);
	user-select: none;
}

#aboutcaro>div>p {
	display: table-cell;
	width: 300px;
	padding-top: 188px;
	vertical-align: top;
	text-align: center;
	user-select: none;
}

#aboutcaro>div>p>a {
	display: block;
	position: relative;
	padding: 19px 0 14px;
	border-radius: 30px;
	background: linear-gradient(45deg, #f18909 0%, #f7a431 100%);
	color: #fff;
}

#aboutcaro>div>p>a:hover,
#aboutcaro>div>p>a:active {
	background: #fff;
	color: #f18909;
	text-decoration: none;
}

#aboutcaro>div>p>a:link::after,
#aboutcaro>div>p>a:visited::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	border: 0 solid transparent;
	box-sizing: border-box;
	transition: border 0.2s linear;
}

#aboutcaro>div>p>a:hover::after,
#aboutcaro>div>p>a:active::after {
	border: 3px solid #f18909;
}

@media only screen and (max-width:767px) {
	#aboutcaro>div>div {
		display: block;
		width: auto;
	}

	#aboutcaro>div>div>p:first-of-type {
		padding: 10px 0 70px;
	}

	#aboutcaro>div>p {
		display: block;
		position: absolute;
		left: 10px;
		bottom: 45px;
		width: 300px;
		padding-top: 0;
	}

	#aboutcaro>div>p>a:hover,
	#aboutcaro>div>p>a:active {
		background: linear-gradient(45deg, #f18909 0%, #f7a431 100%);
		color: #fff;
	}

	#aboutcaro>div>p>a:hover::after,
	#aboutcaro>div>p>a:active::after {
		border: none;
	}
}

@media only screen and (max-width:320px) {
	#aboutcaro>div>p {
		left: 0;
	}
}

/*----------------------------------------
	selectcolor
-----------------------------------------*/

#selectcolor>#select_nav>div {
	width: 1000px;
	margin: 0 auto;
}

#selectcolor>#select_nav>div>h1 {
	padding: 94px 0 42px;
	text-align: center;
	letter-spacing: 0.08em;
}

#selectcolor>#select_nav>div>ul {
	/*display: table;*/
	display: none;
}

#selectcolor>#select_nav>div>ul>li {
	display: table-cell;
	width: 166px;
	text-align: center;
	user-select: none;
}

#selectcolor>#select_nav>div>ul>li>a {
	display: block;
	position: relative;
	height: 119px;
	color: #bfbfbf;
	text-decoration: none;
	transition: color 0.1s ease-out;
	-webkit-transition: color 0.1s ease-out;
}

#selectcolor>#select_nav>div>ul>li>a:hover {
	color: #f18909;
	transition: color 0.3s ease-in-out;
	-webkit-transition: color 0.3s ease-in-out;
}

#selectcolor>#select_nav>div>ul>li.current>a {
	color: #f18909;
}

#selectcolor>#select_nav>div>ul>li.current>a::after {
	content: "";
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 166px;
	height: 20px;
	background: url(../img/i_05_current01.png) no-repeat left top;
	background-size: 166px 20px;
}

@media only screen and (max-width: 414px) {
	#selectcolor>#select_nav>div {
		width: 100%;
	}

	#selectcolor>#select_nav>div>h1 {
		padding: 37px 0 27px;
	}

	#selectcolor>#select_nav>div>ul {
		/*display: block;*/
		display: none;
		position: relative;
	}

	#selectcolor>#select_nav>div>ul::before {
		content: "";
		position: absolute;
		bottom: calc(-23px/2);
		left: calc(50% - ((249px/2)/2));
		width: calc(249px/2);
		height: 15px;
		background: url(../img/i_05_current01.png) no-repeat left top;
		background-size: calc(249px/2) calc(30px/2);
	}

	#selectcolor>#select_nav>div>ul>li {
		display: block;
		float: left;
		width: calc(100%/3);
	}

	#selectcolor>#select_nav>div>ul>li:nth-child(n+4) {
		padding-top: 12px;
	}

	#selectcolor>#select_nav>div>ul>li>a {
		height: 82px;
	}

	#selectcolor>#select_nav>div>ul>li>a:hover {
		color: #bfbfbf;
	}

	#selectcolor>#select_nav>div>ul>li.current>a:hover {
		color: #f18909;
	}

	#selectcolor>#select_nav>div>ul>li.current>a::after {
		display: none;
	}
}

#selectcolor>#select_nav>div>ul>li>a>span {
	display: block;
}

#selectcolor>#select_nav>div>ul>li>a>span:nth-child(2) {
	padding: 10px 0 2px;
}

#selectcolor>#select_nav>div>ul>li:nth-child(5)>a>span:nth-child(2) {
	padding: 3px 0 0;
}

@media only screen and (max-width: 414px) {
	#selectcolor>#select_nav>div>ul>li>a>span:nth-child(2) {
		padding: 6px 0 0;
	}

	#selectcolor>#select_nav>div>ul>li:nth-child(5)>a>span:nth-child(2) {
		margin-bottom: -3px;
	}
}

#selectcolor>#select_item {
	max-width: 1400px;
	min-width: 1110px;
	width: calc(100% - 145px);
	margin: 0 auto;

}

#selectcolor>#select_item>ul {
	min-height: 540px;
	height: auto !important;
	margin: 0 auto 20px;
}

#selectcolor>#select_item>ul>li {
	float: left;
	width: 240px;
	height: 240px;
	margin: 0 0 30px 30px;
	user-select: none;
}

@media only screen and (max-width: 767px) {
	#selectcolor>#select_item {
		max-width: 767px;
		min-width: 767px;
		width: 767px;
		overflow: scroll;
	}


	#selectcolor>#select_item>ul {
		margin: 0 0 15px -20px;
		margin: 1px;
	}

	#selectcolor>#select_item>ul>li {
		margin: 0 0 15px 20px;
	}

}


@media only screen and (max-width: 414px) {
	#selectcolor>#select_item {
		max-width: 320px;
		min-width: 320px;
		width: 320px;
	}

	#selectcolor>#select_item>ul {
		margin: 0 0 15px -20px;
	}

	#selectcolor>#select_item>ul>li {
		width: 150px;
		height: 150px;
		margin: 0 0 15px 20px;
	}
}

@media only screen and (max-width: 320px) {
	#selectcolor>#select_item>ul {
		margin: -10px 0 -10px -20px;
		transform: scale(0.9);
	}
}

#selectcolor>#select_item>ul>li>a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: -3px 0 0 -3px;
	border: 3px solid #fff;
	border-radius: 50%;
	text-decoration: none;
}

/* 背景色のパターンは仮です */
/* ブラック */
#selectcolor>#select_item>ul>li.pt_K>a {
	background: #a1a2a3;
}

/* チタン */
#selectcolor>#select_item>ul>li.pt_T>a {
	background: #dbdbdb;
}

/* ホワイト */
#selectcolor>#select_item>ul>li.pt_W>a {
	background: #f5f4f1;
}

/* オレンジ */
#selectcolor>#select_item>ul>li.pt_O>a {
	background: #fbdcb4;
}

/* ライム */
#selectcolor>#select_item>ul>li.pt_L>a {
	background: #d7eab9;
}

/* レッド */
#selectcolor>#select_item>ul>li.pt_R>a {
	background: #f4bfc3;
}

/* グレイシュブルー */
#selectcolor>#select_item>ul>li.pt_A>a {
	background: #c2d8e2;
}

/* ミントピンク */
#selectcolor>#select_item>ul>li.pt_P>a {
	background: #f9e4e8;
}

/* ミントブルー */
#selectcolor>#select_item>ul>li.pt_B>a {
	background: #e4edfc;
}

/* ミントグリーン */
#selectcolor>#select_item>ul>li.pt_G>a {
	background: #dfefe7;
}

/* サンドブルー */
#selectcolor>#select_item>ul>li.pt_N>a {
	background: #d0dae0;
}

/* サンドグリーン */
#selectcolor>#select_item>ul>li.pt_S>a {
	background: #e1e7e4;
}

/* ライトウッド */
#selectcolor>#select_item>ul>li.pt_M>a {
	background: #ede2d7;
}

#selectcolor>#select_item>ul>li>a:hover {
	margin: -3px 0 0 -3px;
	border: 3px solid #333;
	background: #fff;
}

#selectcolor>#select_item>ul>li>a::before {
	content: "";
	display: block;
	position: absolute;
	right: 9px;
	bottom: 16px;
	width: calc(50px - 6px);
	height: calc(50px - 6px);
	border-radius: 50%;
	border: 3px solid #333;
	background: #333 url(../img/i_05_arrow01.png) no-repeat left 50% top 50%;
	background-size: 9px 16px;
	transition: all 0.1s ease-out;
	-webkit-transition: all 0.1s ease-out;
}

#selectcolor>#select_item>ul>li>a:hover::before,
#selectcolor>#select_item>ul>li>a:active::before {
	right: 1px;
	bottom: 8px;
	width: 60px;
	height: 60px;
	border: 3px solid #333;
	background: #fff url(../img/i_05_arrow01_on.png) no-repeat left 50% top 50%;
	background-size: 9px 16px;
	transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
}

@media only screen and (max-width: 414px) {
	#selectcolor>#select_item>ul>li>a {
		border: 3px solid transparent;
	}

	#selectcolor>#select_item>ul>li>a:hover {
		border: 3px solid transparent;
		background: transparent;
	}

	#selectcolor>#select_item>ul>li>a::before,
	#selectcolor>#select_item>ul>li>a:active::before {
		right: 5px;
		bottom: 10px;
		width: calc(63px/2 - 6px);
		height: calc(63px/2 - 6px);
		border: 3px solid transparent;
		background-size: calc(11px/2) calc(20px/2);
	}

	#selectcolor>#select_item>ul>li>a:hover::before,
	#selectcolor>#select_item>ul>li>a:active::before {
		right: 5px;
		bottom: 10px;
		width: calc(63px/2 - 6px);
		height: calc(63px/2 - 6px);
		border: 3px solid transparent;
		background: #333 url(../img/i_05_arrow01.png) no-repeat left 50% top 50%;
		background-size: calc(11px/2) calc(20px/2);
	}

	/* 背景色のパターンは仮です */
	#selectcolor>#select_item>ul>li.pt01>a:hover,
	#selectcolor>#select_item>ul>li.pt01>a:active {
		background: #d8ecfb;
	}

	#selectcolor>#select_item>ul>li.pt02>a:hover,
	#selectcolor>#select_item>ul>li.pt02>a:active {
		background: #fce3c3;
	}

	#selectcolor>#select_item>ul>li.pt03>a:hover,
	#selectcolor>#select_item>ul>li.pt03>a:active {
		background: #f7c5c7;
	}

	#selectcolor>#select_item>ul>li.pt04>a:hover,
	#selectcolor>#select_item>ul>li.pt04>a:active {
		background: #dff1ee;
	}

	#selectcolor>#select_item>ul>li.pt05>a:hover,
	#selectcolor>#select_item>ul>li.pt05>a:active {
		background: #efe9d1;
	}

	#selectcolor>#select_item>ul>li.pt06>a:hover,
	#selectcolor>#select_item>ul>li.pt06>a:active {
		background: #ebebeb;
	}

	#selectcolor>#select_item>ul>li.pt07>a:hover,
	#selectcolor>#select_item>ul>li.pt07>a:active {
		background: #fbeff1;
	}

	#selectcolor>#select_item>ul>li.pt08>a:hover,
	#selectcolor>#select_item>ul>li.pt08>a:active {
		background: #e2ebf9;
	}

	#selectcolor>#select_item>ul>li.pt09>a:hover,
	#selectcolor>#select_item>ul>li.pt09>a:active {
		background: #d5dee1;
	}

	#selectcolor>#select_item>ul>li.pt10>a:hover,
	#selectcolor>#select_item>ul>li.pt10>a:active {
		background: #fce3c3;
	}
}

#selectcolor>#select_item>ul>li>a span {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
}

#selectcolor>#select_item>ul>li>a:hover span {
	color: #333;
}

#selectcolor>#select_item>ul>li>a img {
	position: absolute;
	top: 78px;
	left: 39px;
	width: 175px;
	height: 114px;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

@media only screen and (max-width: 414px) {
	#selectcolor>#select_item>ul>li>a span {
		top: 15px;
	}

	#selectcolor>#select_item>ul>li>a:hover span {
		color: #fff;
	}

	#selectcolor>#select_item>ul>li>a img {
		position: absolute;
		top: 50px;
		left: 24px;
		width: calc(227px/2);
		height: calc(143px/2);
	}
}

#selectcolor>#select_item>#select_btn01 {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	user-select: none;
}

#selectcolor>#select_item>#select_btn01>a {
	display: block;
	padding: 16px 0 11px;
	border-radius: 30px;
	border: 3px solid #bfbfbf;
	color: #999;
	margin: 5ex 0;
}

#selectcolor>#select_item>#select_btn01>a:hover,
#selectcolor>#select_item>#select_btn01>a:active {
	border: 3px solid #333;
	color: #333;
	text-decoration: none;
}

@media only screen and (max-width: 414px) {
	#selectcolor>#select_item>#select_btn01 {
		width: 300px;
	}

	#selectcolor>#select_item>#select_btn01>a {
		padding: 14px 0 13px;
	}

	#selectcolor>#select_item>#select_btn01>a:hover,
	#selectcolor>#select_item>#select_btn01>a:active {
		border: 3px solid #bfbfbf;
		color: #999;
	}
}

@media only screen and (max-width: 320px) {
	#selectcolor>#select_item>#select_btn01>a {
		line-height: 1;
	}
}

/*----------------------------------------
	footer
-----------------------------------------*/

footer {
	position: relative;
	margin-top: 100px;
}

@media only screen and (max-width: 414px) {
	footer {
		margin-top: 50px;
	}
}

/*----------------------------------------
	modalbox01
-----------------------------------------*/

/* モーダル コンテンツエリア */
#modalbox01 {
	display: none;
}

section.modalbox {
	padding: 25px 60px 40px;
	border-top: 5px solid #f18909;
	background-color: #ffffff;
}

section.modalbox h1 {
	width: 590px;
	margin: 0 auto 23px;
}

section.modalbox>div {
	width: 590px;
	margin: 0 auto;
}

section.modalbox>div figure {
	float: left;
	width: 285px;
}

section.modalbox>div table {
	display: inline-block;
	table-layout: fixed;
	float: right;
	width: 283px;
	margin-top: -3px;
	vertical-align: top;
}

section.modalbox>div table caption {
	margin-bottom: 7px;
}

section.modalbox>div table tr {
	border: 1px solid #e5e9e5;
}

section.modalbox>div table tr:first-child {
	background-color: #fff5f6;
}

section.modalbox>div table tr:nth-child(even) {
	background-color: #f6f8f6;
}

section.modalbox>div table tr:first-child th {
	background-color: #fff5f6;
}

section.modalbox>div table tr th {
	width: 61px;
	padding: 7px 9px;
}

section.modalbox>div table tr th+td {
	width: 185px;
	padding: 7px 9px;
	border-left: 1px solid #e5e9e5;
}

@media only screen and (max-width:767px) {
	section.modalbox {
		width: auto;
		padding: 20px 0;
	}

	section.modalbox h1 {
		width: 285px;
		margin: 0 auto 13px;
	}

	section.modalbox>div {
		width: 285px;
		margin: 0 auto;
	}

	section.modalbox>div figure {
		float: none;
		width: auto;
		margin-bottom: 15px;
	}

	section.modalbox>div table {
		float: none;
		width: auto;
		margin-bottom: 10px;
	}
}


/* modalclosebtn */

.modalclosebtn {
	position: absolute;
	top: 20px;
	right: 19px;
	height: 50px !important;
	width: 50px !important;
	vertical-align: middle;
	text-decoration: none;
	outline: none;
	transform: translate3d(0, 0, 0);
}

.modalclosebtn::before,
.modalclosebtn::after {
	position: absolute;
	top: 0;
	right: 0;
	margin: auto;
	content: "";
}

.modalclosebtn::before:hover,
.modalclosebtn::after:hover {}

.modalclosemark::before {
	position: absolute;
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 0 solid transparent;
	background: #333;
	transition: border 0.2s linear;
	transition: background 0.2s linear;
}

.modalclosebtn:hover.modalclosemark::before {
	width: 44px;
	height: 44px;
	border: 3px solid #333;
	background: #fff;
	transition: border 0.2s linear;
	transition: background 0.2s linear;
}

.modalclosebtn:hover.modalclosemark span {
	border-top: 1px solid #333;
}

.modalclosemark span {
	display: block;
	position: absolute;
	top: 24px;
	right: 7px;
	width: 35px;
	height: 1px;
	border-top: 1px solid #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.modalclosemark span+span {
	top: 25px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

@media only screen and (max-width:767px) {
	.modalclosebtn {
		top: 15px;
		right: 5px;
		height: 37px !important;
		width: 37px !important;
	}

	.modalclosebtn::before,
	.modalclosebtn::after {
		top: 0;
		right: 0;
		margin: auto;
		transition: none;
		content: "";
	}

	.modalclosemark::before {
		width: 37px;
		height: 37px;
	}

	.modalclosebtn:hover.modalclosemark::before {
		width: inherit;
		height: inherit;
		border: none;
		background: #333;
		transition: none;
	}

	.modalclosemark span {
		top: -3px;
		right: 15px;
		width: 25px;
		height: 25px;
	}

	.modalclosebtn:hover.modalclosemark span {
		border-top: 1px solid #fff;
	}

	.modalclosemark span+span {
		top: 15px;
	}
}

@media only screen and (max-width:320px) {
	#modalbox01>div.modalclosebtn {
		margin-left: 218px !important;
	}
}