.fs08{font-size: 0.8em;}

/*** 区切り線 ***/
.maindesign hr.border_top {
	border-top: 1px solid #ccc;
    margin: 60px 0;
}

/*** テキスト中央揃え ***/
.maindesign .center {text-align: center;}

/* =============================================

margin・padding

============================================= */

.maindesign .mb15{margin-bottom: 15px!important;}
.maindesign .mt20 {
    margin-top: 20px !important;
}


/* =============================================

コメリのリアル人工芝人気のポイント4つ

============================================= */
/*** ※各アイコンをクリックすると詳細が表示されます。 ***/
.maindesign .border {
 	border: 1px solid #ccc;
	padding: 20px;
	text-align: center;
}

/* =============================================

モラヴィア

============================================= */
@media screen and (max-width: 767px) {
.maindesign .topBtn {
    margin: 0 10px;
	}
}

.maindesign .topBtn ul {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

.maindesign .topBtn ul li {
    width: 24%;
    margin-bottom: 15px;
    display: flex;
}
@media screen and (max-width: 767px) {
	.maindesign .topBtn ul li {
		width: 48%;
		margin-bottom: 4%;
		line-height: 1.3;
		display: flex;
	}
}

.maindesign .topBtn ul li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    background-image: url(/include_html/koukoku/21_curvemirror/img/arow_red.png);
    background-repeat: no-repeat;
    background-position: right 0.8em center;
    background-size: 7px;
    padding: 0.9em 0.8em;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.95em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-right: 1.5em;
    height: 60px;
}
@media screen and (max-width: 767px) {
	.maindesign .topBtn ul li a {
		background-position: right 0.5em center;
		padding: 0.9em 1.2em 0.9em 0.5em;
		display: block;
		font-size: 0.85em;
	}
}
@media screen and (max-width:767px) {
.maindesign .topBtn ul li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    background-image: url(/include_html/koukoku/21_curvemirror/img/arow_red.png);
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 7px;
    padding: 0.9em 1.2em 0.9em 0.5em;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.85em;
	}
}

.maindesign .topBtn a:hover {
    transition: 0.6s;
    border-color: #E5002D;
}

/* =============================================

モラヴィア

============================================= */

/***　ボタン　***/
.maindesign .latticeBtns02{
	display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.maindesign .latticeBtns02 li{
	flex-basis: 215px;
}

/* =============================================

人工芝のロール販売

============================================= */
.jinkoushiba_list{
	list-style-type: circle;
}

    .maindesign .eventbnr{
        display: flex;
        flex-wrap: wrap;
    }
    .maindesign .eventbnr li{
    width: calc(50% - 10px);
    margin: 0 10px 20px 0;
    position: relative;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    }
    .maindesign .eventbnr li a{
    display: flex;
	padding-bottom: 10px;
	padding-top: 10px;
    }
    .maindesign .eventbnr li .linksTxt{
    font-size: 1.2em;
    margin: auto auto auto 0;
    display: flex;
    flex-wrap: wrap;
    width: calc(80% - 20px);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    .maindesign .eventbnr li .linksTxt p{
    text-align: left;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
    padding: 0.5em 0;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.maindesign .eventbnr li .linksTxt p span {
    font-size: 0.75em;
    width: calc(100% - 20px);
    line-height: 1.2;
    font-weight: 400;
    padding-top: 0.5em;
    display: block;
}
    .maindesign .eventbnr li .linksImg{
    margin: auto 15px auto auto;
    width: calc(30% - 20px);
    display: flex;
    align-items: center;
    }
    .maindesign .eventbnr li .linksImg img {
    width: 100%;
}
    @media only screen and (max-width: 767px) {
    .maindesign .eventbnr li{
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0.3em;
    }
    .maindesign .eventbnr li .linksImg{
    margin: auto 2vw auto 2vw;
    width: 38%;
    display: flex;
    align-items: center;
    }
    .maindesign .eventbnr li a{
    display: flex;
    flex-direction: row-reverse;
	padding-bottom: 8px;
	padding-top: 8px;
    }
    .maindesign .eventbnr li .linksTxt p span {
    width: calc(100% - 20px);
}
        .maindesign .eventbnr li .linksTxt p.listHeading img{
margin-bottom: 10px;
}
.slick-prev, .slick-next {
    font-size: 0;
}		
}
.maindesign h3.checkPoint {
    position: relative;
    font-size: 1.25em;
    font-weight: bold;
    margin: 60px 0 20px 0;
    padding: 0 0 10px 0;
    text-align: left;
    border-bottom: #aaaaaa 2px solid;
    display: flex;
    align-items: center;
}
.maindesign h3.checkPoint .st0 {
    fill: #aaaaaa;
}
.maindesign h3.checkPoint .st1 {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-miterlimit: 10;
}
.maindesign h3.checkPoint.h2under {
    margin: 20px 0 20px 0;
}
.maindesign h3.checkPoint span {
    margin: 0 0 0 20px;
}
.maindesign .subTxt {
    line-height: 1.2;
    margin: 20px 0;
}
    @media only screen and (min-width: 768px) {
.maindesign .jBtn {
	width: 60%;
	margin: auto;
}
}

/* =============================================

人工芝の敷き方ページ kokoro用

============================================= */
.shikikata .heading01 {
    top: 36%;
}

.shikikata .headingsub {
    font-size: 50px;
    top: 68%;
}


.maindesign .goods {
    justify-content: flex-start;
}
@media screen and (max-width: 767px) {
	.maindesign .goods {
    	justify-content: space-between;
	}
}


.maindesign .subTxt {
    text-align: left;
}


/* =============================================

IEのみ

============================================= */

@media all and (-ms-high-contrast: none) {
  .slick-prev,
	.slick-next
	{
		font-size: 100px;
		line-height: 0;
		position: absolute;
		top: 54%;
		display: block;
		width: 24px;
		height: 69px;
		padding: 0;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);

		cursor: pointer;

		color: transparent;
		border: none;
		outline: none;
		background: transparent;
	}
}


/* =============================================

直書きされてたCSS

============================================= */
.maindesign h1 span {
    color: #fff;
    text-shadow: 0px 0px 5px rgb(10 10 10 / 70%);
    text-align: left;
    font-weight: bold;
    font-size: 70px;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
}

@media all and (-ms-high-contrast: none) {
  .maindesign h1 span {
    text-shadow:0px 0px 5px rgb(80, 80, 80);
	filter: drop-shadow(0 0 5px rgb(80, 80, 80));
  }
}

.maindesign h1 img {
    width: 100%
}
.maindesign .lb:target {
    opacity: 1;
    z-index: 103;
}
.maindesign .lb {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    z-index: -1;
}
.maindesign .lb img {
    width: auto;
    max-height: 100%!important;
    transform: scale(.7);
    transition: .4s transform ease;
    pointer-events: none;
}
.maindesign .lb:target {
    opacity: 1;
    z-index: 103;
}
.lb:target img {
    transform: scale(1);
}
.maindesign .lb::before, .lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height: 3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
}
.maindesign .lb::before {
    transform: rotate(-315deg);
}
.maindesign .lb::after {
    transform: rotate(315deg);
}
.maindesign .flex-box {
    display: flex;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.maindesign .two a {
    display: block;
    width: calc(50% - 5px);/*margin-right: 10px;*/
}
.maindesign .two a:nth-child(2n) {
    margin-right: 0;
}
.maindesign .txt01 {
    text-align: center;
    color: #595656;
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 1em;
	line-height: 1.5;
}
.maindesign .txt02 {
    text-align: left;
    color: #595656;
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 1.25em
}
.maindesign .txt03 {
    text-align: left;
    color: #595656;
    font-size: 20px;
    font-weight: bold;
}
.maindesign .txt04 {
    text-align: left;
    color: #595656;
    font-size: 30px;
    font-weight: bold;
    margin-left: 20px
}
.maindesign .kome {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
}
.maindesign .m01 {
    text-align: center;
    font-size: 60px;
    font-weight: bold;
}
.maindesign .mtb40 {
    margin: 40px 0;
}
.maindesign .chuou {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.maindesign .setumei3 {
    color: #595656;
    text-align: center;
    font-size: 30px;
    line-height: 40px;
    margin-top: 5px;
    font-weight: bold;
}
.maindesign .turf {
    margin-bottom: 50px;
}
.maindesign .turf table {
    font-size: 40px;
    text-align: center;
    font-weight: bold;
    border-collapse: collapse;
}
.maindesign table.Tbl01 {
    text-align: center;
    vertical-align: middle;
    width: 100%;
}
.maindesign .turf table td.img {
    width: 70%;
}
.maindesign .turf table td {
    text-align: center;
    border: solid 1px #000000;
    width: 30%;
}
.maindesign table td {
    vertical-align: middle;
}
/*.maindesign .goods {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}*/
.maindesign .goods.cols3-2 li img {
    margin-top: 2.5em;
    margin-bottom: 2.5em;
}
.maindesign .goods.cols3-2 .copy_text {
    font-family: "Noto Sans JP";
    position: absolute;
    font-weight: bold;
    top: 15%;
    left: 2%;
    color: #333;
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, 0px -1px 1px #ffffff;
    padding: 3px 0px;
    font-size: 1em;
    top: 0.5em;
    letter-spacing: -0.7px;
    line-height: 1.2em;
    width: 95%;
    box-sizing: border-box;
}
.maindesign .goods.cols3-2 .text_box {
    font-family: "Noto Sans JP";
    position: absolute;
    width: 90%;
    left: 5%;
    color: #333;
    bottom: 1em;
}
.maindesign .goods.cols3-2 .sTxt {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, 0px -1px 1px #ffffff;
}
.maindesign .listHead34 {
    font-size: 1.2em;
    font-family: "Noto Sans JP", "ＭＳ Ｐゴシック", "MS PGothic", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
    color: rgb(51, 51, 51);
    font-weight: bold;
    margin: 10px 0;
}
.maindesign .hanbai {
    margin-bottom: 50px;
}
.maindesign .cols2-1ex li {
    width: calc(80% / 2);
}
/*-- margin-right --*/ 
.maindesign .mr00 {
    margin-right: 0px !important;
}
.maindesign .mr05 {
    margin-right: 5px !important;
}
.maindesign .mr10 {
    margin-right: 10px !important;
}
.maindesign .mr15 {
    margin-right: 15px !important;
}
.maindesign .mr20 {
    margin-right: 20px !important;
}
/*-- margin-left --*/
.maindesign .ml00 {
    margin-left: 0px !important;
}
.maindesign .ml05 {
    margin-left: 5px !important;
}
.maindesign .ml10 {
    margin-left: 10px !important;
}
.maindesign .ml15 {
    margin-left: 15px !important;
}
.maindesign .ml20 {
    margin-left: 20px !important;
}
/*-- margin-top --*/
.maindesign .mt10 {
    margin-top: 10px !important;
}
.maindesign .mt20 {
    margin-top: 20px !important;
}
.maindesign .mt30 {
    margin-top: 30px !important;
}
.maindesign .mt40 {
    margin-top: 40px !important;
}
/*-- margin-bottom --*/ 
.maindesign .mb10 {
    margin-bottom: 10px !important;
}
.maindesign .mb20 {
    margin-bottom: 20px !important;
}
.maindesign .mb30 {
    margin-bottom: 30px !important;
}
.maindesign .mb40 {
    margin-bottom: 40px !important;
}
.maindesign .mb50 {
    margin-bottom: 50px !important;
}

@media screen and (max-width:767px) {
.maindesign h1 span {
    font-size: 12vw;
    top: 50%;
	left: 35%;
}
.maindesign img {
    border: none;
    width: 100% !important;
}
.maindesign .chuou {
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    margin-top: 40px;
}
.maindesign .chuou img {
    max-width: 250px;
    width: 50% !important;
}
.maindesign .txt01 {
    font-size: 1.1em
}
.maindesign .txt02 {
    font-size: 1.25em
}
.maindesign .txt03 {
    font-size: 1em
}
.maindesign .txt04 {
    color: #595656;
    font-size: 1.25em;
    font-weight: bold;
    margin: 10px auto;
}
.maindesign .kome {
    font-size: 1em;
    margin-bottom: 1em;
}
.maindesign .m01 {
    font-size: 1.85em;
}
.maindesign .turf table {
    font-size: 1.8em;
    text-align: center;
    font-weight: bold;
    border-collapse: collapse;
}
.maindesign .lb:target {
    opacity: 1;
    z-index: 103;
}
.maindesign .lb {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    z-index: -1;
}
.maindesign .lb::before {
    transform: rotate(-315deg);
}
.maindesign .lb::before, .lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height: 3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
}
.maindesign table.Tbl01 {
    text-align: center;
    vertical-align: middle;
    width: 100%;
}
.maindesign .turf table td.img {
    margin-top: 0;
    width: 100%;
}
.maindesign .turf table td {
    display: block;
    text-align: center;
    border: solid 1px #000000;
    margin-top: -1px;
    width: 100%
}
.maindesign .turf table td a {
    display: block;
}
.maindesign table td {
    vertical-align: middle;
}
.maindesign .setumei3 {
    text-align: left;
    font-size: 1.35em;
    line-height: 1.4;
    margin-top: 20px
}
.maindesign .goods {
    margin-bottom: 10px
}
.maindesign .cols3-2 li {
    width: calc(95% / 2);
    margin-right: 0;
}
.maindesign .cols2-1ex li {
    width: 100%
}
.maindesign .cols2-1ex .pd {
    padding-bottom: 0
}
}
.colsinframe {
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 40px;
    padding: 10px;
    overflow: hidden;
}
.bousouSeetTxt {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 1px 1px 1px #ffffff, -1px 1px 1px #ffffff, 1px -1px 1px #ffffff, -1px -1px 1px #ffffff, 1px 0px 1px #ffffff, 0px 1px 1px #ffffff, -1px 0px 1px #ffffff, 0px -1px 1px #ffffff;
    font-family: "Noto Sans JP";
    left: 5%;
    color: #333;
    margin: 0 0 10px 0;
}
.maindesign h3.checkPoint {
    position: relative;
    font-size: 1.25em;
    font-weight: bold;
    margin: 60px 0 20px 0;
    padding: 0 0 10px 0;
    text-align: left;
    border-bottom: #aaaaaa 2px solid;
    display: flex;
    align-items: center;
}
.maindesign h3.checkPoint .st0 {
    fill: #aaaaaa;
}
.maindesign h3.checkPoint .st1 {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-miterlimit: 10;
}
.maindesign h3.checkPoint.h2under {
    margin: 40px 0 20px 0;
}
.maindesign h3.checkPoint span {
    margin: 0 0 0 20px;
}
.maindesign .subTxt {
    line-height: 1.2;
    margin: 10px 0 20px;
	text-align: left;
}

.maindesign .subTxt span.smallTxt{
font-size:0.8em;
}
.maindesign .botton_box2.jbtn{
margin-bottom:60px;}





/*230216*/
.fs09 {
    font-size: 0.9em;
}
@media screen and (min-width:768px) {
.fs13pc {
    font-size: 1.2em;
}
	.maindesign .banner_list2-1 .w30 {
    width: calc(30% - 5px);
}
	.maindesign .banner_list2-1 .w70 {
    width: calc(70% - 5px);
}
}