@charset "UTF-8";
/* CSS Document */
.bgcolor{
background: #EFEFEF;
padding: 0 2rem 20rem;
}


/* TITLE */
.top-img{
width: 100%;
height: 400px;
background-image: url("../img/cosme_main.jpg");
background-repeat: no-repeat;
background-size:cover;
background-position: center top;
}

@media (max-width: 768px) {
.top-img{
background-size: cover;
height: 200px;
margin-top: -2rem;	
}
}

#cosme{
margin-bottom: 0;
color: #5c2920;
}

/*イントロ*/
.main-title{
padding: 2rem 0rem;
text-align: center;
}
.main-title h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
font-size: 4.5rem;	
letter-spacing: 1.3rem;
color: #5c2920;
margin-top: 7rem;	
margin-bottom: 1rem;	
}
.main-title h2{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.3rem;
font-size: 1.6rem;
color: #5c2920;
position: relative;
display: inline-block;
margin-bottom: 1.5em;	
}
.main-title h2:before {
content: '';
position: absolute;
left: 50%;
bottom: -20px;/*線の上下位置*/
display: inline-block;
width: 60px;/*線の長さ*/
height: 1px;/*線の太さ*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: #CCB2A3;/*線の色*/
border-radius: 0.1px;/*線の丸み*/
}
.main-title p{
letter-spacing: 0.2rem;
color: #5c2920;
margin-top: 2rem;	
font-size: 2rem;
line-height: 3rem;
}

@media (max-width: 768px) {
.main-title h1{
letter-spacing: 0.8rem;
font-size: 3rem;
margin-top: 3rem;	
}
.main-title p{
font-size: 1.2rem;
text-align: left;
padding: 0 3rem;	
}
}

/*---subtitle---*/
h2.leftline{
position:relative;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.3rem;
line-height: 3rem;
text-align: left;
}
.leftline span{
position: absolute;
top: 0;
left: 0;
display: block;
color: #5c2920;
letter-spacing: 1rem;
white-space: nowrap;
}
.leftline span::before{
content: "";
display: inline-block;
width: 5em;
border-top: 1px solid #fff;
vertical-align: middle;
margin-right: 1em;
padding-bottom:4px;
}
.lead{
padding:0 2rem 0 20rem;
position: relative;
margin-top: 6rem;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight: 400;
font-size: 1.6rem;
}

/*---item---*/
.item{
margin: 10rem auto 0;
font-size: 2.0rem;
line-height: 4.3rem;
}
.item .container{
position: relative;
background: #fff;
box-shadow: 10px 10px #E7C1C9;
padding: 8rem 5rem 7rem;
}
.item-no{
position: absolute;
top:-37px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
width: 70px;
height: 70px;
background: #5C2920;
padding: 2.5rem;
font-size: 2.5rem;
line-height: 15px;
text-align: center;
color: #fff;
border-radius: 40px;
}
.item-point{
position: absolute;
top:20px;
right: 20px;
width: 310px;
z-index: 10;
}
.item-point img{
width: 100%;
}
.item h3{
margin: 4rem 0 5rem;
font-size: 2.8rem;
letter-spacing: 0.2rem;
}
.kuchikomi{
display: block;
width: 100%;
text-align: center;
}
button {
margin: 1rem auto 0;
border: none;
background: #5C2920;
padding: 2rem 2.5rem;
font-size: 2rem;
line-height: 2rem;
text-align: center;
color: #fff;
cursor: pointer;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
vertical-align: baseline;
}
button:hover {
background: #905D52;
}
button img {
width: 20px;
vertical-align: baseline;
}




@media (max-width: 768px) {
.bgcolor{padding-bottom: 10rem;}
.main-title p{text-align: center;}
.item{margin: 5rem auto 0;font-size: 1.5rem;line-height: 3rem;}

.item .container{padding: 5rem 3rem 3rem;}
.item-no{
position: absolute;
top:-20px;
width: 50px;
height: 50px;
padding: 1.5rem;
font-size: 2rem;
line-height: 2rem;
text-align: center;
}
.item-point{
position: absolute;
top:15px;
right:-10px;
width: 150px;
z-index: 0;
transform:rotate(-10deg);
}
.item h3{
margin: 2rem 0 2rem;
font-size:2rem;
letter-spacing: 0.2rem;
}
button {
margin: 1rem auto 0;
padding: 1rem 1.5rem;
font-size: 1.4rem;
letter-spacing: 0.1rem;
}
button:hover {
background: #905D52;
}
button img {
width: 20px;
vertical-align: baseline;
}

}