@charset "utf-8";
@import url(cmn.css);
@import url(base.css);

/* ==========================================================================
	MAIN
	========================================================================== */

.main {
  color: #5a4d4a;
  background: url("../images/cmn-images/bg01.gif") 50% 100% no-repeat;
  margin-bottom: 50px;
}
.main h2 {
  font-size: 3rem;
  font-weight: 500;
  line-height: 200%;
}
.main .line {
  display: inline-block;
  border-bottom: solid 2px;
}
.main .line:first-child {
  margin-bottom: 20px;
}
.main .line .dot {
  display: inline-block;
  background: url("../images/index-images/dot.gif") 50% 0 no-repeat;
}

/* ==========================================================================
	CONTENTS
	========================================================================== */

.tit-bg01 {
	background-image: url("../images/cmn-images/ill01.gif");
	background-repeat: no-repeat;
	background-position: calc(50% - 180px) 0;
  background-size: 90px;
  padding-top: 20px;
  margin-bottom: 50px;
}
.tit-bg02 {
	background-image: url("../images/cmn-images/ill02.gif");
	background-repeat: no-repeat;
	background-position: calc(50% + 180px) 100%;
  background-size: 90px;
  padding-bottom: 40px;
}
.tit-bg02 h2 {
  margin-bottom: 0;
}

.info-bg {
  background: url("../images/cmn-images/bg02.gif") 50% 0 no-repeat;
  background-color: #fcfce4;
  margin-bottom: 80px;
}
.info li {
  font-family: 'Kiwi Maru', serif;
  text-align: center;
}
.info h3 {
  color: #73b5c8;
  font-size: 2.3rem;
  font-weight: normal;
  margin-bottom: 10px;
}

/* ==========================================================================
	PC 1025px -
	========================================================================== */

@media screen and (min-width: 1025px){


}


/* ==========================================================================
	TABLET - 1024px
	========================================================================== */

@media screen and (max-width:1024px){

/*MAIN*/

.main {
  background: url("../images/cmn-images/bg01.gif") 50% 20px no-repeat;
  background-size: 170%;
  margin-bottom: 40px;
}
.main h2 {
  font-size: 3vw;
  background-color: #fff;
}
.main .line:first-child {
  margin-bottom: 5px;
}
.main .line .dot {
  background-size: 25%;
}

.tit-bg01 {
	background-position: calc(50% - 120px) 0;
  background-size: 60px;
  margin-bottom: 40px;
}
.tit-bg02 {
	background-position: calc(50% + 120px) 100%;
  background-size: 60px;
  padding-bottom: 25px;
}
.info-bg {
  background-size: 170%;
  background-color: #fcfce4;
  margin-bottom: 60px;
}

}

/* ==========================================================================
	SP - 640px
	========================================================================== */

@media screen and (max-width: 640px) {

/*MAIN*/

.main {
  background: url("../images/cmn-images/bg01.gif") 50% 50px no-repeat;
  background-size: 150%;
  margin-bottom: 30px;
}
.main h2 {
  font-size: 4.5vw;
  font-weight: 500;
  line-height: 200%;
  background-color: #fff;
}
.main .line:first-child {
  margin-bottom: 5px;
}
.main .line .dot {
  background-size: 25%;
}

.tit-bg01 {
	background-position: calc(50% - 100px) 0;
  background-size: 40px;
  padding-top: 10px;
  margin-bottom: 30px;
}
.tit-bg02 {
	background-position: calc(50% + 100px) 100%;
  background-size: 40px;
  padding-bottom: 20px;
}
.tit-bg02 h2 {
  margin-bottom: 0;
}

.info-bg {
  background: url("../images/cmn-images/bg02.gif") 50% 0 no-repeat;
  background-size: 1000px;
  background-color: #fcfce4;
  margin-bottom: 40px;
}
.info h3 {
  font-size: 2rem;
  margin-bottom: 10px;
}
.info ul {
  width: 80%;
  margin: 0 auto;
}
.info ul li {
  float: none;
  width: 100%;
}
.info ul li:first-child {
  margin-bottom: 30px;
}

}