@charset "UTF-8";

#page_header{background-image:url("../img/header_back_pc.webp");height: 460px;padding-top:  10%;}

.w90per{width: 90%;margin: 0 auto;}
.a_blue{display: inline-block;}
.mt100{margin-top: 100px;}

/* section_01 */
.section_01,.bg_breadcrumb{background-color: #ffffff;}
.flexbox a.box-item04 {
  position: relative;
  display: block;
  padding: 15px 0px 15px 2%;
  background-color: #ffffff;
  border: solid 1px #97cfac;
border-radius: 8px;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  text-align: left;
}
.box-item04{width: 22%;display: inline-block;margin:1% 0 3%;height: auto;}
/* アイコンのスタイル */
.flexbox a.box-item04::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  width: 15px;
  height: 15px;
  margin: auto;
  border-top: 1px solid #231815;
  border-right: 1px solid #231815;
  transform: translateY(0px) rotate(45deg);
  box-sizing: border-box;
}

/* コスチュームのスタイル */
.costume_box{margin-bottom: 3em;}
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 15px 10px;
  min-width: 100%;
  max-width: 100%;
  color: #555;
  font-size: 2.2em;
  background: #cee8d6;
	text-align: center;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -30px;
  border: 30px solid transparent;
  border-top: 30px solid #cee8d6;
}

.balloon1 h2 {
  margin: 0;
  padding: 0;
}

.costume_left{width: 48%;float: left;padding: 3%;box-sizing: border-box;}
.costume_right{width: 48%;float: right;padding: 3%;box-sizing: border-box;}
.costume_right img{width: 100%;}
.costume_h3{font-size: 1.6em; color:#1f1f1f;border-left: solid 5px #2c9f7d;padding: 0.6em 0 0.6em 0.6em;}
.yelow_h3{font-size: 1.3em; background-color: #fcf2c1; padding: 0.2em 0 0.2em 0.6em;}
.costume_ul li{display: inline-block;margin-right: 1em;font-size: 1.2em;line-height: 1.3em;margin-top: 0.4em;padding-left: 1em;}
.green_b_h3{font-size: 1.3em;color:#2c9f7d;border-bottom: solid 2px #2c9f7d; padding: 0.2em 0 0.2em 0.6em;}
/* メリット表のCSS */
.simple-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Noto Sans JP", sans-serif;
margin: 1.6em 0;
}

.simple-table th {
  background: #fcf2c1;
  text-align: left;
  padding: 10px;
  border: 1px solid #ddd;
  font-weight: bold;
}

.simple-table td {
  padding: 10px;
  border: 1px solid #ddd;
  vertical-align: top;
}

.simple-table ul {
  margin: 0;
  padding-left: 1em;
  list-style-type: "・";
}

/* 📱 スマホ対応 */
@media screen and (max-width: 640px) {
  .simple-table thead {
    display: none;
  }

  .simple-table, 
  .simple-table tbody, 
  .simple-table tr, 
  .simple-table td {
    display: block;
    width: 100%;
	 padding: 0px;
  }

  .simple-table tr {
    margin-bottom: 1em;
    border: 1px solid #ddd;
  }

  .simple-table td {
    border: none;
    border-bottom: 1px solid #eee;
  }

  .simple-table td::before {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
	 background: #fcf2c1; 
	  width: 96%;
	  padding: 0.6% 2%;
  }

  .simple-table td:first-child::before {
    content: "レンタルのメリット";
  }

  .simple-table td:last-child::before {
    content: "購入のメリット";
  }
	.simple-table ul {
  padding: 0.6em 0.6em 0.6em 1.4em;;
}
}
/* section_04 */
.section_04{background-color: rgba(244,234,236,0.8);}

/*
===================================================
 tb タブレット解像度
===================================================
*/
@media screen and (max-width:1000px) {
#page_header{background-image:url("../img/header_back_pc.webp");height: 300px;padding-top:  10%;}
	}
/*
===================================================
 sp スマホ解像度
===================================================
*/
@media screen and (max-width:640px) {
#page_header{background-image:url("../img/header_back_sp.webp");height: 200px;padding-top:  10%;}
	
.mt100{margin-top: 30px;}
	
.title_h3{font-size: 1.3em;margin-bottom: 1%;line-height: 1.2;}
.sp_mt3em{margin-top: 3em;}
.w90per{width: 100%;margin: 0 auto;}
.box-item04{width: 47%;display: inline-block;margin:1% 0 2%;height: auto;}

.balloon1 {
  font-size: 1.8em;
}
.costume_h3{font-size: 1.3em;border-left: solid 3px #2c9f7d;padding: 0.2em 0 0.23em 0.6em;line-height: 1.3em;}
.yelow_h3{font-size: 1.0em; padding: 0.2em 0 0.2em 0.2em;}
.costume_ul li{margin-right: 0.4em;font-size: 1.0em;line-height: 1.3em;margin-top: 0.4em;padding-left: 0.6em;}
.green_b_h3{font-size: 1.0em;border-bottom: solid 1.6px #2c9f7d; padding: 0.2em 0 0.2em 0.4em;margin-bottom: 0.4em;}	
/* section_01 */	
.costume_left{width: 100%;float: none;padding: 3%;box-sizing: border-box;}
.costume_right{width: 80%;float: none;padding: 3%;box-sizing: border-box;margin: 0 auto;}
}