@charset "UTF-8";
/*--------------------------------
予約表
---------------------------------*/
.reservation table,.reservation td,.reservation th{border-collapse: collapse;border:1px solid #ae9595;box-sizing: border-box;font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', arial, sans-serif, verdana, Helvetica;color: #333;margin: 20px auto;}
.reservation th {vertical-align: center;font-size: 12px;height: 35px;line-height: 18px;padding: 3px; }
.reservation th span{display: block;font-size: 11px;}
.reservation td {font-size: 12px;height: 35px;text-align: center;vertical-align: middle;}
.reservation td a {text-decoration: none;height: 35px;display: block;}
.reservation td a span {padding-top: 10px;display: block;}
.reservation td i{font-size: 12px;margin-top: 12px;}
.sun{background-color: #EEDDD9!important;color: #bb5555!important;}
.sat{background-color: #D9E3EC!important;color: #4466bb!important;}
.openCell{width: auto;height: 100%}
.closeCell{width: auto;height: 100%;background-color:#e8e1e1;}
.closeCellx{width: auto;height: 100%;background-color:#e8e1e1;}
.telCell{width: auto;height: 100%;font-weight: bold;}
.timeCell{padding: 3px 8px;background-color: #e1e1e1;}
.open {color: #CC4466;}
.close{color: #333333;}
.tel{color: #5f8808;}
.page-feed {display: flex;font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS P Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', arial, sans-serif, verdana, Helvetica;color: #333;width: 320px;margin: 30px auto 0 auto;}
.last-week{font-size: 10px;width: 100px;text-align: left;margin-top: 2px;}
.date{font-size: 14px;font-weight: bold;width: 100px;text-align: center;width: 120px;}
.next-week{font-size: 10px;width: 100px;text-align: right;margin-top: 2px;}
/* .page-feed a {text-decoration: none;color: #333;} */
.page-feed a {text-decoration: none;text-decoration: none;background-color: #51a237;color: white;padding: 0.5em 1em;border-radius: 0.2em;} 
.reservationhead{margin: 15px 20px;}
.reservationhead p {margin: 1em;}
.reservationhead p span {font-size: 12px; margin-left: 15px;}
.reservationhead form{display: flex;flex-wrap: wrap;justify-content: center;margin:15px auto 10px auto;width: 300px;}
.sl5 {margin-left:15px;margin-right: 10px;}

/*--------------------------------
フォーム
---------------------------------*/
.form-inputtext{width: 100%; padding: 10px 15px; border-radius: 5px; border: 1px solid #56a647;font-size: 16px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;outline: none;}
.form-textarea{width: 100%; padding: 10px 15px; border-radius: 5px; border: 1px solid #56a647;font-size: 16px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;outline: none;}
.btn {width: 150px;height: 50px;padding: 5px 8px; border-radius: 5px;border-top: none;border-left: none;border-right: none;border-bottom: 4px solid #2f4875;background-color: #56a647;font-size: 18px;color: #fff;font-weight: 500;outline: none;margin: 20px 10px;;}
.btn:active{border-bottom: none;background-color: #2f4875;}
.btn2 {width: 150px;height: 40px;padding: 5px 8px; border-radius: 5px;border-top: none;border-left: none;border-right: none;border-bottom: 4px solid #2f4875;background-color: #56a647;font-size: 18px;color: #fff;font-weight: 500;outline: none;margin: 0 10px;;}
.btn2:active{border-bottom: none;background-color: #2f4875;}
select {border:1px solid #56a647;border-radius: 5px; padding: 10px 25px 10px 15px;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;z-index: 1;background: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;font-size: medium;}
.sl {position: relative;}
/* .sl::after {position: absolute;left:50px;top: 15px;content: "▼";font-size: 12px;width: 5px;height: 15px;display: block;text-align: center;color: #56a647;z-index: -1;} */
.sl2 {position: relative;}
/* .sl2::after {position: absolute;left:55px;top: 13px;content: "▼";font-size: 12px;width: 5px;height: 15px;display: block;text-align: center;color: #56a647;z-index: -1;} */
.sl3 {position: relative;}
/* .sl3::after {position: absolute;left:87px;top: 13px;content: "▼";font-size: 12px;width: 5px;height: 15px;display: block;text-align: center;color: #56a647;z-index: -1;} */
.sl4 {position: relative;}
/* .sl4::after {position: absolute;left:80px;top: 13px;content: "▼";font-size: 12px;width: 5px;height: 15px;display: block;text-align: center;color: #56a647;z-index: -1;} */
.sl5 {position: relative;}
/* .sl5::after {position: absolute;left:62px;top: 13px;content: "▼";font-size: 12px;width: 5px;height: 15px;display: block;text-align: center;color: #56a647;z-index: -1;} */
.checkbox {display: none;}
.checkbox + .checkbox-icon {position: relative;vertical-align: middle;}
.checkbox + .checkbox-icon:before {content: '\f0c8';font-family: "Font Awesome 5 Free";color: #56a647;font-size: 25px;font-weight: 500;}
.checkbox2 + .checkbox-icon:before {content: '\f0c8';font-family: "Font Awesome 5 Free";color: #8c8c8c;font-size: 25px;font-weight: 500;}
.checkbox:checked + .checkbox-icon:before {content: '\f14a';color: #56a647;font-weight: 900;}
.radio {display: none;}
.radio + .radio-icon:before {content: "\f111";font-family: "Font Awesome 5 Free";color: #56a647;font-size: 18px;}
.radio:checked + .radio-icon:before {content: "\f192";color: #56a647;}
/*--------------------------------
フォームレイアウト
---------------------------------*/
.f-wrap {display: block;}
.f-wrap dd{margin-bottom: 15px;margin-left: 0px;}
.f-wrap dt {margin: 10px 0;}
.f-wrap dt span {font-size: 14px;color: red;font-weight: bold;}
.btnwrap {text-align: center;margin: 30px 0;}
.btnwrap2 {text-align: center;margin: 0 0;}
.ppcheck {text-align: center;margin-top: 30px;}
.radiowrap {margin: 30px 0;}
.radiowrap label{padding-right: 30px;}
/*--------------------------------
フォームレイアウト確認
---------------------------------*/
.fcheck-wrap {display: block;}
.fcheck-wrap dd{margin:0 0 20px 0;padding:0 0 15px 0;font-size: 16px;border-bottom: 1px solid #56a647;line-height: 150%;}
.fcheck-wrap dt {font-size: 16px; margin: 10px 0 15px 0;}

/*--------------------------------
フォームレイアウト完了
---------------------------------*/
.fthank-wrap{}
.fthank-wrap p{font-size: 16px;line-height: 170%;}
/* テキスト */
.text-area01{padding: 10px 10px 30px;max-width: 1100px; margin: 0 auto}

/*--------------------------------
七五三ご希望の衣装
---------------------------------*/
.listimg {text-align: center;overflow: hidden;}
.listimg div {height: 150px;background-size: contain;background-repeat: no-repeat;background-position:center;}
.listimg img:hover{transform: scale(1.3);transition-duration: 0.3s;}
.listdetail {width: 210px;padding-left: 1em;}
/* .list-warp {padding:1em;} */
.listcheck {text-align: center;}
.list-group{margin-bottom: 30px;border-bottom: 1px solid #ccc;padding-bottom: 10px;}
.costumename {font-weight: bold;}
.costumesize {font-size: 14px;}
.listcheck .lending{width: 60px;border-radius: 30px;background-color: red;color: #fff;text-align: center;font-size: 12px;font-weight: bold;padding: 3px 5px;margin: 25px auto 10px auto;letter-spacing:3px;}
.selecthead {margin: 15px 20px;}
.count {display: flex;margin-bottom: 15px;}
.count div {margin-left: 15px;margin-top: 15px;}
.selecthead .btnwrap2 { display: inline-block;margin-top: 15px;}

@media screen and (min-width: 601px) {
/*--------------------------------
フォームレイアウト600
---------------------------------*/
.infoarea2 {display: flex;flex-wrap: wrap;margin: 30px auto 0 auto;width: 550px;justify-content: space-between;}
/*--------------------------------
七五三ご希望の衣装600
---------------------------------*/
.select {width: 600px;margin: 0 auto;display: flex;flex-wrap: wrap;}
.list-warp {display: block;}
.list-group{width: 290px;border-bottom: 0;margin-bottom: 50px;margin: 0 5px;}
.listimg div { height: 300px;background-size: contain;background-repeat: no-repeat;background-position:center;}
.costumename {text-align: center;}
.costumesize {text-align: center;}
.listdetail {width: 100%;}
.selecthead  {width: 600px;margin: 15px auto 5px auto;display: flex;}
.selecthead .btnwrap2 {margin-top: 0;}
.sl3 {margin-left: 20px;margin-right: 20px;}
.last-week{font-size: 12px;width: 100px;text-align: left;margin-top: 2px;}
.next-week{font-size: 12px;width: 100px;text-align: right;margin-top: 2px;}


/*--------------------------------
予約表
---------------------------------*/
.reservationhead{width: 600px;margin: 150px auto 50px auto;}
.reservationkimonohead{width: 80%;margin: 150px auto 50px auto;}
.reservationhead form{display: flex;justify-content: left;width: 600px;}
.sl5 {margin-left:15px;margin-right: 10px;}

/*--------------------------------
セレクトの幅
---------------------------------*/

.sl3 select{ width: 400px;}
.sl3::after{ position: absolute; right: 15px; left: auto}


/*--------------------------------
ニュースページ
---------------------------------*/
.news-detailswrap {background-color: #fff;border-radius: 10px;box-shadow: 0px 0px 4px;margin: 30px 20px;padding: 20px;font-size: 16px;line-height: 150%;}






}
@media screen and (min-width: 1000px) {
/*--------------------------------
フォーム1000
---------------------------------*/
.sl::after {left:75px;top: 8px;}
/*--------------------------------
フォームレイアウト1000
---------------------------------*/
.f-wrap {width: 700px;margin: 0 auto;}
.f-wrap dl {display:flex;flex-wrap: wrap;}
.f-wrap dt{width: 100px;margin: 15px 0;padding-top: 3px;}
.f-wrap dd{width: 600px;margin: 15px 0;}
.radiowrap {margin: 0 0;}
/*--------------------------------
確認1000
---------------------------------*/
.fcheck-wrap {width: 700px;margin: 0 auto;}
.fcheck-wrap dl {display:flex;flex-wrap: wrap;}
.fcheck-wrap dd{width: 600px;margin: 15px 0;border-bottom: 1px solid #56a647;line-height: 150%;padding-top: 3px;}
.fcheck-wrap dt {width: 100px;margin: 15px 0;padding-top: 3px;border-bottom: 1px solid #56a647;}
/*--------------------------------
完了1000
---------------------------------*/
.fthank-wrap{width: 500px;margin: 0 auto;}

/*--------------------------------
七五三ご希望の衣装1000
---------------------------------*/
.select {width: 900px;}
.selecthead  {width: 900px;}
/*--------------------------------
ニュースページ960
---------------------------------*/
.news-detailswrap {width: 850px;margin: 0 auto 150px auto;}









}
@media screen and (min-width: 1279px) {
/*--------------------------------
七五三ご希望の衣装1000
---------------------------------*/
.select {width: 1200px;}
.selecthead  {width: 1200px;}
/*--------------------------------
ニューズページ1280
---------------------------------*/
.news-detailswrap {width: 1000px;margin: 0 auto;}


}


/* 画像サイズ */
.main-img {
	height: 400px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 100%;
  }
  .sub-img {
	height: 200px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
  }