@charset "UTF-8";
/****************************************
	common.cssにあったもの
*****************************************/



/****************************************
	html内にあったもの
*****************************************/

.column a:link,
.column a:visited,
.column a:active {
	color: #000;
}

.column a:hover {
	color: #000 !important;
}


.column {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

#undercolumn {
	background-color: inherit;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	font-size: 16px;
}
@media screen and (max-width:800px) {
		#undercolumn {
		font-size: 13px;
	}
}

h3 {
	position: relative;
	padding: 5px 5px 5px 1em;
	background: #ca0000;
	font-size: 1.5em;
	color: white;
	line-height: 1.3;
	z-index: 1;
	margin-bottom: 20px;
}

h3:before {
	position: absolute;
	content: '';
	right: -2px;
	top: 0px;
	border: none;
	border-left: solid 80px transparent;
	border-bottom: solid 42px white;
	z-index: 10;
}

.box {
	margin-bottom: 50px;
}
.box p{
	text-indent: 1em;
	line-height: 1.3em;
}
.center{
	text-align: center;
}
                
/* サイズラインナップ */

.haba{
    display: flex;
    justify-content: space-between;
}
.haba li{
    width: 30%;
    display: flex;
    flex-flow: column;
    text-align: center;
}
.haba li .gentei{
    position: absolute;
    top:0;
    left:0;
    display: block;
    max-width: 55px;
    width: 100%;
    height: auto;
}

.haba li p:nth-child(1){
    text-indent: initial;
    font-size: 3.2em;
    background: linear-gradient(transparent 70%, #fdf85a 70%);
    text-align: center;
    display: block;
    line-height: 1em;
    position: relative;
	margin:0.2em 0 0.3em 0;
	color: #000;
}
.haba li p:nth-child(2){
    text-indent: inherit;
}
.haba li p span{
    margin-left: 50px;
}

@media screen and (max-width:600px) {
    .haba{
		flex-direction: column;
    }
    .haba li{
		width: 100%;
		flex-flow: wrap;
		margin-bottom: 0.3em;
	}
	.haba li img{
		width: 50%;
	}
	.haba li div{
		width: 50%;
		text-align: center;
	}
	.haba li .gentei {
		top: -3px;
		left: 4px;
		max-width: 45px;
	}
}
@media screen and (max-width:400px) {
    .haba li p:nth-child(1){
		font-size: 2.5em;
	}
}




/* 長さ */

.nagasa{
    width: 30%;
    margin: 0 auto 0 0;
    text-align: end;
    font-size: 3em;
    color: #000;
    margin-bottom: 0.3em;
}

.nagasa p{
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 0 0 auto;
}

.nagasa p:first-child:after,
.nagasa p:nth-child(2):after
{
    content:"";
   display:block;
    position: absolute;
    top: 40%;
    left: 110%;
    background-color: #000;
    height: 0.3em;
}

.nagasa p:first-child:after{
    width: 360px;
}
.nagasa p:nth-child(2):after{
    width: 480px;
}

.nagasa .gentei2{
    position: absolute;
    top:7%;
    left:-20%;
    display: block;
    max-width: 55px;
    width: 100%;
    height: auto;
}
@media screen and (max-width:800px) {
    .nagasa{
        width: calc(27% + 45px);
	}
	.nagasa p{
	font-size: 30px!important;
	}
	.nagasa .gentei2{
	max-width: 45px;
	}
	.nagasa p:first-child:after{
		width: 150%;
	}
	.nagasa p:nth-child(2):after{
		width: 200%;
	}

}


@media screen and (max-width:500px) {
    .nagasa p:first-child:after{
		width: 150%;
	}
	.nagasa p:nth-child(2):after{
		width: 200%;
	}
}


/* 商品ラインナップ */
h5{
    font-size: 1.5em;
    background: linear-gradient(transparent 70%, #fdf85a 70%) !important;
    line-height: 1em;
    position: relative;
	margin:0 0 1em 0;
	color: #000 !important;
	text-indent: 1em;
	width: 100%;
	text-align: center;
}
.lineup{
    width: 100%;
}

.lineup li{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.lineup li a{
    width: 28%;
    height: auto;
    pointer-events: none;
}
.lineup li img{
    width: 100%;
    height: auto;
}
.lineup li p{
    display: block;
    width: 68%;
}
.lineup li p img{
    margin-top: 1em;
}

li .photo{
    display: none;
}
 .photo a{
    display: none;
    width: 24% !important;
}
.column a.btn {
	display: block;
	text-align: center;
	width: 90% !important;
	border: 2px solid #F00;
	font-size: 20px;
	color: #F00;
	text-decoration: none;
	font-weight: bold;
	padding: 0.5em 16px;
	border-radius: 25px;
	transition: .4s;
	margin: 20px auto 8em auto;
	line-height:1.3em;
	pointer-events: initial!important ;
}

.column a.btn:hover {
	background-color: #F00;
	border-color: #F00;
	color: #FFF !important;
}
@media screen and (max-width: 880px){
    .box p{
        font-size: 16px;
    }
    .lineup li a{
        width: 90%;
        margin: 0 auto 1em auto;
    }
    .lineup li p{
        width: 90%;
        margin: 0 auto;
    }
    .photo a{
		width: 48% !important;
	}
	a.btn {
		font-size: 16px;
		line-height: 1em;
		padding: 0.5em;
		margin: 20px auto 5em auto !important;
	}
}