@charset "utf-8";
/* CSS Document */

.mainarea {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
color: #666;
}
.mainarea h1 {
text-align: center;
margin-bottom: 10px;
letter-spacing: 0.2em;
font-size: 1.5em;
width: 100%;
font-weight: normal;
color: #666;
}
.ctttl1{
  position: relative;
  color: #666;
  line-height: 1.4;
  padding: 0.5em 0.5em 0.5em 2.3em;
  font-weight: normal;
  background-image: url("https://marilyn01.itembox.design/item/project/cotton100/img/01.gif");
  background-repeat: no-repeat;
  margin-left: 20px;
}
.font1{
font-size: 0.8em;
}
.font2{
  display: block;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 2%;
  color: #333333;
  font-size: 1.3em;
}
.font3 {
    color: #F95972;
}
h2{
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.2em;
  font-size: x-large;
  width: 100%;
  font-size: 1.3em;
  font-weight: normal;
  color: #666;
}
.sizebtn_box{
  list-style-type: none;
  padding-left: 0px;
  }
.sizebtn_box li{
width: 33%;
float: left;
list-style:none;
padding-left: 0px;
}

.btn,
a.btn,
button.btn {
margin: 5px;
padding: 3%;
width: 90%;
display: block;
  font-size: 1em;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  color: #ffffff;
  border-radius: 10px;
}
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #ff9a66;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #ff9a66;
}

.hyou{
width: 100%;
margin-left: auto;
margin-right: auto;
}
.hyou ul {
 list-style:none;
 }

.hyou ul li.first {
 width: 100%;
 border: 1px solid #ccc;
 background-color: #f5f5dc;
 }

.hyou ul li.next {
 width: 100%;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 background-color: #f5f5dc;
 }

span.dan {
 float: left;
 padding: 10px;
 width: 20%;
 word-break: break-all;
 }

span.dan2 {
 display: block;
 width: 70%;
 margin: 0 0 0 auto;
 padding: 10px;
 border-left: 1px solid #ccc;
 background-color: #fffff0;
 }
.hyoumidashi{
width: 100%;
background-color: #DCCE94;
list-style:none;
margin-left: 0;
padding-left: 0;
padding-top: 1%;
padding-bottom: 1%;
border-left: 2px solid #DCCE94;
text-align: center;
}
 
@media screen and (max-width: 768px) {
	img{
		width:100%;
	}
	
.mainarea {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.mainarea h1 {
letter-spacing: 0.2em;
width: 100%;
font-size: 1em;
}

.font2{
  width: 85%;
  margin-top: 10px;
  margin-bottom: 2%;
  font-size: 1em;
}
h2{
    font-size: 0.8em;
    line-height: 1.5em;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.sizebtn_box li{
width: 49%;
float: left;
list-style:none;
padding-left: 0px;
}
.btn,
a.btn,
button.btn {
  font-size: 0.8em;
}
span.dan {
 float: left;
 padding: 10px;
 width: 40%;
 word-break: break-all;
 }

span.dan2 {
 display: block;
 width: 50%;
 margin: 0 0 0 auto;
 padding: 10px;
 border-left: 1px solid #ccc;
 background-color: #fffff0;
 }
.font4 {
  font-size: 0.8em;
}