@charset "utf-8";
/* CSS Document */
.furisode_name_container .f_name_img img {
	width: 100%;
}
body {
	margin: 0;
	padding: 0;
}
a:hover img {
	opacity: 0.5;
}
a img {
	transition: opacity 0.3s ease-out;
}
#body-inside {
    overflow-x: hidden;
}
.select_cate_container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.cate_item a {
	display: block;
    padding: 10px;
}
.cate_item i {
    position: relative;
    left: 45px;
}
h2.furisode_title_h3 {
	text-align: center;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	margin-bottom: 1em;
	padding: 30px 10px;
	line-height: 1.5;
	color: #000;
	text-shadow: 0 0 5px white;
	background: -webkit-repeating-linear-gradient(-45deg, #eaeaea, #eaeaea 3px,#f4f4f4 3px, #f4f4f4 7px);
	background: repeating-linear-gradient(-45deg, #eaeaea, #eaeaea 3px,#f4f4f4 3px, #f4f4f4 7px);
	font-size: 22px;
}
.color_first {
    max-width: 800px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
    width: 90%;
}
.color-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.color-grid {
    display: grid;
    grid-template-columns: repeat(6, 50px);
    grid-template-rows: repeat(2, 50px);
    gap: 12px;
}
.color-dot {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ccc;
}
.modal__trigger img {
    border-radius: 12px;
}

@media screen and (max-width: 750px) {
    #top__hero img{
		height: 450px;
		object-fit: cover;
	}
    #top__hero_index img {
		height: 350px;
		object-fit: cover;
	}
	h1.furisode_title_h1 {
		text-align: center;
		font-size: 1.7rem;
		width: 90%;
		margin: 0 auto;
		line-height: 1.5;
	}
	.cate_item {
		width: calc(100%/2 - 8px);
		border: 1px solid #666;
		margin: 0.2em;
		text-align: center;
        border-radius: 10rem;
	}
}

@media screen and (min-width:751px) and (max-width: 1024px) {
	h1.furisode_title_h1 {
		text-align: center;
		font-size: 1.7rem;
		line-height: 1.5;
	}
	.cate_item {
		width: calc(100%/4 - 8px);
		border: 1px solid #666;
		margin: 0.2em;
		text-align: center;
        border-radius: 10rem;
	}
}

@media screen and (min-width: 1025px) {
	h1.furisode_title_h1 {
		text-align: center;
		font-size: 1.7rem;
		line-height: 1.5;
	}
	.cate_item {
		width: calc(100%/4 - 8px);
		border: 1px solid #666;
		margin: 0.2em;
		text-align: center;
        border-radius: 10rem;
	}
}