@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/
body { background-color:#fff; }



/*ボタン*/
.BUTTONS {display: flex;margin-bottom: 70px;width: 800px;flex-wrap: wrap;margin: 0 auto;align-content: flex-start;margin-bottom: 50px;justify-content: center;}
.btn{position: relative;overflow: hidden;text-decoration: none;display: inline-block;border: 2px solid #555;text-align: centeroutline: nonetransition: ease .2s;width: 215px;text-align: center;margin: 10px;padding: 10px 0;box-shadow: 2px 2px 4px #ccc;}
.btn span {position: relative;z-index: 3;color:#333;font-size: 19px;letter-spacing: 2px;}
.btn:hover span{color:#fff;}
.bgskew::before {content: '';position: absolute;top: 0;left: -130%;background:#333;width:120%;height: 100%;transform: skewX(-25deg);}
.bgskew:hover::before {animation: skewanime .5s forwards;}
@keyframes skewanime {100% {left:-10%;}}
.BUTTONS small{font-size: 13px;letter-spacing: 1px;display: inline-block;line-height: 15px;margin-top: 5px;}

.COMING{width: 215px;text-align: center;margin: 10px;padding: 10px 0;box-shadow: 2px 2px 4px #ccc;border: 2px solid #c7c7c7;}
.COMING span{font-size: 19px;letter-spacing: 2px;color: #c7c7c7;}


/*プラン*/
.PLAN{position: relative;margin-bottom: 100px;}
.PLAN_lightgray{background: linear-gradient(#EDEDED 80%, white 50%);}
.PLAN_gray{background: linear-gradient(#898989 80%, white 50%);color: white;}
.PLAN_darkgray{background: linear-gradient(#233143 80%, white 50%);color: white;}
.PLAN_NUMBER{font-size: 150px;letter-spacing: 15px;transform: rotate(270deg);position: absolute;top: 200px;left: -5vw;color: rgba(255,255,255,0.5);left: -11vw;}

.PLAN_WRAP{width: 850px;margin: 0 auto;letter-spacing: 2px;padding-top: 50px;}
.PLAN_TOP{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
.PLAN_TYTLES{display: inline-block;position: relative;}
.PLAN_TYTLES:before {content: '';position: absolute;left: 10%;bottom: -10px;display: inline-block;width: 63px;height: 3px;transform: translate(-50%);background-color: #222426;}
.PLAN_TYTLES_W:before {background-color: white;}

.PLAN_TYTLES div{font-size: 27px;font-weight: bold;}
.PLAN_TYTLES small{font-size: 23px;letter-spacing: 3px;}
.PLAN_PRICE{display: flex;flex-direction: row;align-items: baseline;}
.PLAN_PRICE div{font-size: 30px;}

.PLAN_TEXTS{margin-bottom: 55px;}
.PLAN_TEXTS_TYTLE{font-size: 18px;font-weight: bold;margin-bottom: 5px;margin-top: 50px;}
.PLAN_TEXT p{margin: 10px 0;}
.PLAN_TEXT small{font-size: 9px;}
.PLAN_AREA{margin-bottom: 5px;}
.PLAN_IMG{background: white;position: relative;}
.PLAN_IMG div{width: 780px;margin: 0 auto;}
.PLAN_IMG .done{position: absolute;text-align: center;width: 850px;background: rgba(0,0,0,0.3);color: white;top: 0;height: 423px;z-index: 1;left: 0;font-size: 18px;display: flex;justify-content: center;align-items: center;}
.PLAN_IMG .done img{width: 9vw;}


.LINK{padding-top: 70px;margin-top: -70px;}



/*PC・SP*/
.pc{display: block;}
.sp{display: none;}



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

/*ボタン*/
.BUTTONS{width: 93vw;justify-content: flex-start;}
.BUTTONS small {font-size: 12px;letter-spacing: 1px;line-height: 15px;display: inline-block;margin-top: 5px;}
.btn{width: 43vw;margin: 1vw;}
.COMING{width: 43vw;margin: 1vw;}

/*プラン*/
.PLAN {margin-bottom: 0px;}
.PLAN_WRAP{width: 90vw;text-align: justify;padding-bottom: 60px;}
.PLAN_NUMBER {font-size: 80px;transform: rotate(0deg);top: 0px;left: -5vw;left: 0;line-height: 56px;letter-spacing: 10px;}
.PLAN_TOP{flex-direction: column;align-items: flex-start;border-bottom: 1px solid white;padding-bottom: 25px;margin-top: 30px;}
.PLAN_TOP_B{border-bottom: 1px solid #ccc;}
.PLAN_TOP_W{border-bottom: 1px solid white;}
.PLAN_TYTLES:before{display: none;}
.PLAN_TYTLES div{font-size: 23px;}
.PLAN_TEXTS_TYTLE {font-size: 19px;line-height: 35px;}
.PLAN_TYTLES small{display: none;}
.PLAN_IMG div{width: 90vw;}
.PLAN_IMG .done{width: 90vw; height: 398px;}
.PLAN_IMG .done img{width: 33vw;}


.LINK {padding-top: 55px;margin-top: -55px;}

/*PC・SP*/
.pc{display: none;}
.sp{display: block;}
#footer span.pc{display: none;}
#footer span.sp{display: block;}
#footer strong a{display: flex;justify-content: center;align-items: center;}
#footer strong a img{height: 24px;}


    }

   

/*ボタン*/
.BUTTONS{display: flex;margin-bottom: 70px;width: 960px;flex-wrap: wrap;margin: 0 auto;align-content: flex-start;margin-bottom: 80px;}
.btn{position: relative;overflow: hidden;text-decoration: none;display: inline-block;border: 2px solid #555;text-align: centeroutline: nonetransition: ease .2s;width: 215px;text-align: center;margin: 10px;padding: 10px 0;box-shadow: 2px 2px 4px #ccc;}
.btn span {position: relative;z-index: 3;color:#333;font-size: 19px;letter-spacing: 2px;}
.btn:hover span{color:#fff;}
.bgskew::before {content: '';position: absolute;top: 0;left: -130%;background:#333;width:120%;height: 100%;transform: skewX(-25deg);}
.bgskew:hover::before {animation: skewanime .5s forwards;}
@keyframes skewanime {100% {left:-10%;}}
.BUTTONS small{font-size: 13px;letter-spacing: 1px;}

.COMING{width: 215px;text-align: center;margin: 10px;padding: 10px 0;box-shadow: 2px 2px 4px #ccc;border: 2px solid #c7c7c7;}
.COMING span{font-size: 19px;letter-spacing: 2px;color: #c7c7c7;}


/*プラン*/
.PLAN{position: relative;margin-bottom: 100px;}
.PLAN_lightgray{background: linear-gradient(#EDEDED 80%, white 50%);}
.PLAN_gray{background: linear-gradient(#898989 80%, white 50%);color: white;}
.PLAN_darkgray{background: linear-gradient(#676767 80%, white 50%);color: white;}
.PLAN_NUMBER{font-size: 150px;letter-spacing: 15px;transform: rotate(270deg);position: absolute;top: 200px;left: -5vw;color: rgba(34,36,38,0.38);left: -11vw;}

.PLAN_WRAP{width: 850px;margin: 0 auto;letter-spacing: 2px;padding-top: 50px;}
.PLAN_TOP{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
.PLAN_TYTLES{display: inline-block;position: relative;}
.PLAN_TYTLES:before {content: '';position: absolute;left: 10%;bottom: -10px;display: inline-block;width: 63px;height: 3px;transform: translate(-50%);background-color: #222426;}
.PLAN_TYTLES_W:before {background-color: white;}

.PLAN_TYTLES div{font-size: 27px;font-weight: bold;}
.PLAN_TYTLES small{font-size: 23px;letter-spacing: 3px;}
.PLAN_PRICE{display: flex;flex-direction: row;align-items: baseline;}
.PLAN_PRICE div{font-size: 30px;}

.PLAN_TEXTS{margin-bottom: 55px;}
.PLAN_TEXTS_TYTLE{font-size: 18px;font-weight: bold;margin-bottom: 5px;margin-top: 50px;}
.PLAN_TEXT p{margin: 10px 0; text-align:left; padding:0; }
.PLAN_TEXT small{font-size: 9px;}
.PLAN_AREA{margin-bottom: 5px;}
.PLAN_IMG{background: white;position: relative;}
.PLAN_IMG div{width: 780px;margin: 0 auto;}
.PLAN_IMG .done{position: absolute;text-align: center;width: 850px;background: rgba(0,0,0,0.3);color: white;top: 0;height: 423px;z-index: 1;left: 0;font-size: 18px;display: flex;justify-content: center;align-items: center;}
.PLAN_IMG .done img{width: 9vw;}


.LINK{padding-top: 100px;margin-top: -70px;}



/*PC・SP*/
.pc{display: block;}
.sp{display: none;}
.pc_zumen { display:block; margin:0 auto; }
.sp_zumen { display:none; }



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

/*ボタン*/
.BUTTONS{width: 93vw;}
.BUTTONS small {font-size: 12px;letter-spacing: 1px;line-height: 15px;display: inline-block;margin-top: 5px;}
.btn{width: 43vw;margin: 1vw;}
.COMING{width: 43vw;margin: 1vw;}

/*プラン*/
.PLAN {margin-bottom: 0px;}
.PLAN_lightgray{background: #EDEDED;}
.PLAN_gray{background: #898989;}
.PLAN_darkgray{background:#676767;}
.PLAN_WRAP{width: 90vw;text-align: justify;padding-bottom: 60px;}
.PLAN_NUMBER {font-size: 80px;transform: rotate(0deg);top: 0px;left: -5vw;left: 0;line-height: 56px;letter-spacing: 10px;}
.PLAN_TOP{flex-direction: column;align-items: flex-start;border-bottom: 1px solid white;padding-bottom: 25px;margin-top: 30px;}
.PLAN_TOP_B{border-bottom: 1px solid #ccc;}
.PLAN_TOP_W{border-bottom: 1px solid white;}
.PLAN_TYTLES:before{display: none;}
.PLAN_TYTLES div{font-size: 23px;}
.PLAN_TEXTS_TYTLE {font-size: 17px;}
.PLAN_TYTLES small{display: none;}
.PLAN_IMG div{width: 90vw;}
.PLAN_IMG .done{width: 90vw; height: 398px;}
.PLAN_IMG .done img{width: 33vw;}


.LINK {padding-top: 55px;margin-top: -55px;}

/*PC・SP*/
.pc{display: none;}
.sp{display: block;}
.pc_zumen { display:none; }
.sp_zumen { display:block; }
#footer span.pc{display: none;}
#footer span.sp{display: block;}
#footer strong a{display: flex;justify-content: center;align-items: center;}
#footer strong a img{height: 24px;}


    }