@charset "UTF-8";

:root {
    --noto-serif-txt: 'Noto Serif JP', sans-serif;
}

.pane-contents .container {
    width: 100%;
    min-width: auto;
}
.pane-order-contents .container .pane-main, .pane-contents .container .pane-main {
	width: 100%;
	min-width:auto;
}
/* --------------------------------------------------------------------
	01: body設定
--------------------------------------------------------------------- */
body{
    font-family: Arial, "Helvetica Neue", "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    color: #333333;
}
.wrapper{
}
.block {
	display: flex;
}
.img_area{
    width: 100%;
    text-align: center;
}

.sp_only {
	display:none;
}
#main p{
    font-size: 14px;
    line-height: calc(24/14);
    font-weight:500;
    letter-spacing:0.02em;
}
#main a{
    text-decoration:underline;
}
#main .note{
    font-size: 11px;
    line-height: calc(17/11);
}
#main .section_block{
    width: 1200px;
    margin: 0 auto;
	padding-bottom: 80px;
}
/*H2見出し*/
#main h2 {
    padding:0px 0 17px;
    border-bottom:1px solid #222222;
    margin: 0 0 28px;
    font-size: 28px;
	line-height: calc(40/28);
    font-weight: normal;
	font-family: var(--noto-serif-txt);
}

#main h2:before {	
  	content: "";
 	display: inline-block;
	width: 28px;
	height: 38px;
    background: url(/dev/special/tanasita_img/icon_h2.png) no-repeat left 5px;
    margin-right:9px;
}

#main .section_block .text {
	font-size: 16px;
	margin-bottom: 40px;
}

#main .section_block .text + .note {
	margin-top: -32px;
	margin-bottom: 20px;
	font-size: 11px;
}

#main .btn {
    width:194px;
    height:40px;
    line-height:38px;
	border: 1px solid #000000;
	padding: 1px;
    border-radius:5px;
}
#main .btn a,
#main .btn span {
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background:#B81A1A;
    text-align:center;
    color:#FFFFFF;
    font-size:14px;
    border-radius: 3px;
    box-shadow: 1px 1px 0px 1px #000000;
 	position: relative;
}
#main .btn a::after,
#main .btn span::after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 18px;
	margin-top: -2px;
	transform: rotate(45deg);
}
#main .btn a:hover {
	text-decoration: underline;
}
/*---- mv ----*/
#main .mv_block {
    margin: 10px auto 80px;
	width: 100%;
    min-width: 1200px;
	height: 395px;
	background: url(/dev/special/tanasita_img/mv.png) no-repeat center;
}
#main .mv_block .mv{
    width: 1200px;
	height: 395px;
	position: relative;
    margin: 0 auto;
}
#main .mv_block .mv h1 {
    margin: 0 0 14px;
    padding: 0 0 8px;
    border-bottom: none;
    font-size: 43px;
	position: absolute;
	top:105px;
	left: 0;
	font-weight: normal;
	font-family: var(--noto-serif-txt);
}
#main .mv_block .mv p {
    font-size: 16px;
	line-height: clalc(32/16);
	position: absolute;
	top:210px;
	left: 0;
}
#main .mv_block .mv p span {
	background: linear-gradient(transparent 60%, #F4CC48 40%);
	font-weight: bold;
}
/*---- main01 ----*/
#main .main01{
}
#main .main01 .block {
	justify-content: space-around;
}
#main .main01 .block .box {
	width: 373px;
}
#main .main01 .block .box h3 {
	text-align: center;
	font-size: 16px;
	line-height: calc(30/16);
	padding: 5px;
	background: #F2F2F2;
	margin: 0;
	font-weight: bold;
}
#main .main01 .block .box img {
	margin-bottom: 24px;
}
#main .main01 .block .box .parts {
	font-size: 16px;
	line-height: calc(30/16);
	margin-bottom: 15px;
	
}
/*---- main02 ----*/
#main .main02{
}
/*---- main03 ----*/
#main .main03{
}
#main .main03 .note {
	text-align: right;
	width: 710px;
    display: inline-block;
	padding-top: 30px;
}
/*---- main04 ----*/
#main .main04 {
}
#main .main04 .gray_area {
	background: #F5F5F5;
	padding: 0 148px 40px;
}
#main .main04 .gray_area:not(last-child) {
	margin-bottom: 20px;
}
#main .main04 h3 {
	margin-bottom: 20px;	
}
#main .main04 h4 {
	font-size: 18px;
	font-weight: bold;
	line-height: calc(26/18);
	margin-bottom: 25px;
}
#main .main04 .block {
	justify-content: space-between;
}
#main .main04 .block .box .detail {
	margin-bottom: 25px;	
}
#main .main04 .block .box .inner {
	border: 1px solid #CCCCCC;
	padding: 20px;
	width: 491px;
}
#main .main04 .block .box .inner b {
	display: block;
	padding-bottom: 10px;
}
#main .main04 .white_area {
	background: #fff;
	margin-top: 30px;
}
#main .main04 .white_area .block {
	align-items: flex-start;
}
#main .main04 .white_area .block .box:last-child {
	width: 476px;
}
#main .main04 .white_area .block .box .title {
	font-size: 18px;
	line-height: calc(30/18);
}
#main .main04 .white_area .block .box .title b {
	display: block;
    padding: 5px 0 10px;
}
#main .main04 .white_area .block .box .btn {
	margin-top: 20px;
}
/*---- main05 ----*/
#main .main05 {
}
#main .main05 .block {
    justify-content: space-between;
	align-items: stretch;
	margin-bottom: 50px;
}
#main .main05 .block .box {
	width: 270px;
	height: 472px;
	position: relative;
}
#main .main05 .block .box img {
	margin-bottom: 15px;
}
#main .main05 .block .box p {
	letter-spacing: 0;
	font-weight: bold;
}
#main .main05 .block .box .title {
	font-size: 16px;
	line-height: calc(28/16);
	margin-bottom: 15px;
}
#main .main05 .block .box .btn {
    margin: 0 auto;
	display: block;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
	bottom:0;
}
#main .main05 .gray_area {
	background: #F5F5F5;
	padding: 30px 20px;	
}
#main .main05 .gray_area .title{
	font-size: 16px;
	font-weight: bold;
	line-height: calc(26/16);
	padding: 0 10px;
	background: transparent;
	border-left: solid 5px #222222;
}
#main .main05 .gray_area p:not(:last-child)  {
	margin-bottom: 20px;
}
#main .main05 .gray_area p b {
	display: block;
	font-weight: bold;
	padding-bottom: 15px;
}
/*---- main06 ----*/
#main .main06 {
}
#main .main06 h3 { 
	position: relative;
	display: inline-block;
	padding: 0 35px;
	font-size: 24px;
	line-height: calc(30/24);
  	text-align: center;
	width: 100%;
}
#main .main06 h3:before, #main .main06 h3:after {
	position: absolute;
	top: calc(50% - 3px);
	width: 420px;
	height: 6px;
	content: '';
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
}

#main .main06 h3:before {
	left:0;
}
#main .main06 h3:after {
	right: 0;
}
#main .main06 .block {
	justify-content: space-between;
	align-items: stretch;
	align-items: flex-end;
}
#main .main06 > .block > .box {
	width: 580px;
	padding: 30px;
	background: #F5F5F5;
}
#main .main06 > .block > .box .top_text {
	font-size: 18px;
	margin-bottom: 25px;
	height: 50px;
	display:flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#main .main06 > .block > .box > .block > .box {
	width: 250px;
	height: 474px;
	position: relative;
}
#main .main06 > .block > .box > .block > .box img {
	margin-bottom: 15px;
}
#main .main06 > .block > .box > .block > .box p {
	letter-spacing: 0;
	font-weight: bold;
}
#main .main06 > .block > .box > .block > .box .title {
	font-size: 16px;
	line-height: calc(28/16);
	margin-bottom: 15px;
}
#main .main06 > .block > .box > .block > .box .btn {
    margin: 0 auto;
	display: block;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
	bottom:0;
}

/*---- 230815 k.ishihara以下追記分 ----*/

#main .btn-box {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}
#main .btn-none{
    margin-top: 30px;
}

#main .btn-box li + li {
	margin-top: 10px;
}

#main .btn-box li a {
	position: relative;
	display: block;
	width: 279px;
	height: 83px;
	padding-top: 43px;
	background-repeat: no-repeat;
	background-size: contain;
	text-decoration: none;
	font-size: 16px;
	text-align: center;
	line-height: calc(24/16);
}

#main .btn-box .led-ss a {
	background-image: url('../../dev/special/tanasita_img/btn_61-754-33-1.png');
}

#main .btn-box .led-slim a {
	background-image: url('../../dev/special/tanasita_img/btn_61-661-5-1.png');
}

#main .btn-box .super-flat a {
	background-image: url('../../dev/special/tanasita_img/btn_61-802-56-1.png');
}

#main .btn-box .led-tanasita a {
	background-image: url('../../dev/special/tanasita_img/btn_61-784-62-1.png');
}

#main .btn-box .led-hight a {
	background-image: url('../../dev/special/tanasita_img/btn_61-815-64-1.png');
}
#main .btn-box .led-barhight a {
	background-image: url('../../dev/special/tanasita_img/btn_61-828-2-1.png');
}

#main .btn-box li.tag-recommend a::after {
	content: '';
	position: absolute;
	top: -18px;
	right: -18px;
	display: block;
	width: 71px;
	height: 71px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('../../dev/special/tanasita_img/tag_recommend.png');
}

/*---- main01 ----*/

#main .main01 .block .box {
	display: flex;
	flex-direction: column;
	padding-left: 48px;
	padding-right: 48px;
	padding-bottom: 44px;
	background: #F2F2F2;
}

#main .main01 .block .box .detail-box {
	margin-bottom: 20px;
}

#main .main01 .block .box .btn-box {
	min-height: 362px;
}

/*---- main02 ----*/

#main .main02 .gradation {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}

#main .main02 .gradation .grade-txt {
	text-align: center;
	line-height: 24px;
}

#main .main02 .gradation .grade-txt .bold {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}

#main .main02 .gradation .grade-txt .note {
	font-size: 14px;
}

#main .main02 .gradation-list {
	display: flex;
	justify-content: space-between;
}

#main .main02 .gradation-list li {
	width: 278px;
}

#main .main02 .gradation-list li .name {
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

#main .main02 .gradation-list li figure {
	width: 100%;
}

#main .main02 .gradation-list li figure img {
	width: 100%;
	height: auto;
}

#main .main02 .gradation-list li .label {
	display: flex;
	justify-content: center;
	align-items: center ;
	width: 100%;
	height: 33px;
	margin-bottom: 14px;
	font-size: 14px;
	background: #EBEBEB;
}

#main .main02 .gradation-list li .label.blue {
	background: #9FBFD7;
}

#main .main02 .gradation-list li .label.brown {
	background: #E9B86C;
}

#main .main02 .gradation-list li .text {
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	font-size: 14px;
}

#main .main02 .gradation-list li .text dt {
	position: relative;
	width: 102px;
	min-width: 102px;
	text-align: center;
	font-size: 12px;
	line-height: 24px;
	background: #CCCCCC;
	margin-right: 10px;
}

#main .main02 .gradation-list li .text dt::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -6px;
	width: 0;
	height: 0;
	margin-top: auto;
	margin-bottom: auto;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #CCCCCC;
}

#main .main02 .gradation-list li .text dd {
	font-size: 13px;
	line-height: calc(20/13);
	font-weight: bold;
}

#main .main02 .gradation-list li .btn-box {
	margin-top: 0;
}

/*---- main03 ----*/

#main .main03 .head {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	font-size: 14px;
}

#main .main03 .head span.label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 30px;
	margin-right: 20px;
	background: #F2F2F2;
}

#main .main03 .size-chart .line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 98px;
	padding-left: 11px;
	padding-right: 10px;
}

#main .main03 .size-chart .line .line-last{
    width: 600px;
}

#main .main03 .size-chart .line:nth-of-type(odd) {
	background: #F5F5F5;
}

#main .main03 .size-chart .line .left {
	display: flex;
	align-items: center;
}

#main .main03 .size-chart .line .left .text {
	width: 79px;
	margin-bottom: 0;
	font-size: 18px;
	font-weight: bold;
}

#main .main03 .size-chart .line .left img {
	width: auto;
	height: 50px;
}

#main .main03 .size-chart .line:first-of-type .left img {
	height: 33px;
}

#main .main03 .size-chart .line:last-of-type .left img {
	height: 49px;
}

#main .main03 .size-chart .line .line-btn-box {
	display: flex;
}

#main .main03 .size-chart .line .line-btn-box li {
	height: 41px;
}

#main .main03 .size-chart .line .line-btn-box li + li {
	margin-left: 10px;
}

#main .main03 .size-chart .line .line-btn-box li.led-ss {
	width: 144px;
}

#main .main03 .size-chart .line .line-btn-box li.led-slim {
	width: 140px;
}

#main .main03 .size-chart .line .line-btn-box li.super-flat {
	width: 155px;
}

#main .main03 .size-chart .line .line-btn-box li.led-tanasita {
	width: 112px;
}

#main .main03 .size-chart .line .line-btn-box li a {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 10px;
	font-size: 14px;
	background: #fff;
	border-radius: 3px;
	border: 1px solid #222222;
	box-shadow: 1px 1px 0 #000000;
	text-decoration: none;
}
#main .main03 .size-chart .line .line-last li a {
    font-size: 11.5px;
}

#main .main03 .size-chart .line .line-btn-box li a::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('../../dev/special/tanasita_img/arrow_btn_r.png');
}

#main .main03 .note {
	display: block;
	width: 100%;
	padding-top: 0;
}

/*---- main04 ----*/

#main .main04 .gray_area {
	padding-left: 0;
	padding-right: 0;
}

#main .main04 .gray_area:not(last-child) {
	margin-bottom: 30px;
}

#main .main04 .gray_area .example {
	width: 879px;
	margin-left: auto;
	margin-right: auto;
}

#main .main04 h3 {
	margin-top: 0;
	margin-bottom: 27px;
}

#main .main04 h4 {
	margin-bottom: 21px;
}

#main .main04 .example1 > .block {
	width: calc(100% + 18px);
	margin-right: -18px;
}

#main .main04 .example2 > .block {
	width: calc(100% + 24px);
	margin-right: -24px;
}

#main .main04 .example > .detail {
	margin-bottom: 20px;
}

#main .main04 .block .box .inner p.head {
	display: block;
	font-weight: bold;
	margin-bottom: 12px;
}

#main .main04 .block .box .inner li {
	display: flex;
	align-items: center;
	line-height: calc(24/14);
}

#main .main04 .block .box .inner li::before {
	content: '';
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	margin-right: 10px;
}

#main .main04 .block .box .inner li:first-of-type::before {
	background-image: url('../../dev/special/tanasita_img/num_01.png');
}

#main .main04 .block .box .inner li:nth-of-type(2)::before {
	background-image: url('../../dev/special/tanasita_img/num_02.png');
}

#main .main04 .block .box .inner li:nth-of-type(3)::before {
	background-image: url('../../dev/special/tanasita_img/num_03.png');
}

#main .main04 .block .box .inner li:nth-of-type(4)::before {
	background-image: url('../../dev/special/tanasita_img/num_04.png');
}

#main .main04 .example1 > .block .box > img {
	width: 372px;
	height: auto;
}

#main .main04 .example2 > .block .box > img {
	width: 360px;
	height: auto;
}

#main .main04 .example > .block .box > .note {
	margin-top: 10px;
	font-size: 11px;
}

#main .main04 .white_area + .white_area {
	margin-top: 20px;
}

#main .main04 .white_area a {
	display: block;
	padding: 31px 28px 26px;
	text-decoration: none;
}

#main .main04 .white_area .block {
	justify-content: space-between;
	align-items: normal;
}

#main .main04 .white_area .block:first-child img {
	width: 317px;
	height: auto;
}

#main .main04 .white_area .block .box:last-child {
	display: flex;
	flex-direction: column;
}

#main .main04 .white_area .block .box:last-child .copy {
	margin-bottom: 9px;
	font-size: 18px;
	line-height: calc(30/18);
}

#main .main04 .white_area .block .box:last-child .title {
	margin-bottom: 11px;
	font-size: 18px;
	font-weight: bold;
	line-height: calc(26/18);
}

#main .main04 .white_area .block .box:last-child .text {
	margin-bottom: 11px;
	font-size: 14px;
}

#main .main04 .white_area .block .box .btn {
	margin-top: auto;
}

#main .main04 .gray_area.note-area {
	display: flex;
	justify-content: space-between;
	background: #F5F5F5;
	margin-top: -10px;
	margin-bottom: 10px;
	padding: 25px 20px ;	
}

#main .main04 .gray_area.note-area .title {
	margin-bottom: 18px;
	font-size: 16px;
	font-weight: bold;
	line-height: calc(26/16);
	padding: 0 10px;
	background: transparent;
	border-left: solid 3px #222222;
}

#main .main04 .gray_area.note-area p.text {
	margin-bottom: 16px;
	font-size: 14px;
}

#main .main04 .gray_area.note-area p.head {
	display: block;
	font-weight: bold;
	padding-bottom: 12px;
}

#main .main04 .gray_area.note-area li {
	font-size: 14px;
	line-height: calc(24/14);
}

#main .main04 .gray_area.note-area .figure_box {
	display: flex;
	justify-content: space-between;
	width: 630px;
	min-width: 630px;
}

#main .main04 .gray_area.note-area .figure_box img {
	width: 305px;
}

/*---- main05 ----*/

#main .main05 h2 {
	margin-bottom: 40px;
}

#main .main05 .block .box a {
	display: block;
	text-decoration: none;
	height: 100%;
}

#main .main05 .block .box p {
	font-weight: normal;
}

#main .main05 .block .box p.title {
	font-weight: bold;
}

/*---- main06 ----*/

#main .main06 h3 {
	margin-bottom: 37px;
}

#main .main06 table {
	table-layout: fixed;
	max-width: 100%;
}

#main .main06 th,
#main .main06 td {
	text-align: center;
	vertical-align: middle;
	border: 1px solid #D5D5D5;
}

#main .main06 th {
	height: 30px;
	background: #F2F2F2;
	font-size: 12px;
}

#main .main06 tr:first-of-type + tr th {
	height: 32px;
}

#main .main06 th.valiation {
	width: 57px;
}

#main .main06 th.item {
	width: 123px;
	font-size: 15px;
}

#main .main06 th.name {
	width: 175px;
	font-size: 14px;
}

#main .main06 th.num {
	width: 68px;
	height: auto;
	padding: 0 6px;
}

#main .main06 th.yn {
	width: 94px;
	height: auto;
	padding: 0 6px;
}

#main .main06 td {
	height: 63px;
	font-size: 16px;
}

#main .main06 td.link-txt {
	text-align: left;
}

#main .main06 td.link-txt a {
	display: block;
	padding-left: 7px;
	padding-right: 7px;
	font-size: 12px;
	color: #29499C;
	line-height: calc(23/15);
}

#main .main06 td.check::after {
	content: '●';
}

#main .main06 td.item_img a {
	display: block;
	padding: 11px 10px 10px;
}

#main .main06 td img {
	width: 100%;
	height: auto;
}

#main .main06 td sup {
	font-size: 10px;
}

#main .main06 .note {
	margin-top: 15px;
	text-align: right;
}