@charset "utf-8";
/*汎用記述*/
*{margin:0; padding:0;}
*{font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}

ul li{list-style-type:none;}

a{text-decoration:none; color:#333;}


.w100p{width:100%; max-width:450px; margin:5px auto;}
.small{font-size:77.5%;}

.placeholder-shown {font-size:90%;}

.fs95p{font-size:95%;}
.fs90p{font-size:90%;}
.fs80p{font-size:80%;}
.fs75p{font-size:75%;}
.fs70p{font-size:70%; font-weight:normal;}
.fs60p{font-size:60%; font-weight:normal;}
.fs50p{font-size:50%; font-weight:normal;}

.mrauto{margin-right:auto;}
.mlauto{margin-left:auto;}

.ta_c{text-align:center;}

.ls_m3{letter-spacing:-3px;}
.ls_5{letter-spacing:5px;}

.nobr{white-space: nowrap;}

@media screen and ( min-width:800px ){.sp_only{display:none;} .pc_none{display:none;}}
@media screen and ( max-width:799px ){.pc_only{display:none;} .sp_none{display:none;}}

.fl{float:left;}
.fr{float:right;}
.clearfix::after{content: ""; display: block; clear: both;}

.altcolor_g01{color:#1c5d18;}
img{color:#1f376f; font-size:75%;}

/*全ページ共通記述*/

header, aside, #main, #main2, footer{ min-height:50px;}
header p{font-size:85%; text-indent:1em;}
#wrap{width:100%; max-width:2200px; margin:0 auto; overflow:hidden;}
header{width:100%; min-height:60px; margin:0 auto; background:#FCEFE0;}
header .inner{width:calc(100% - 40px); max-width:1600px; padding:10px 20px; margin:0 auto;}

@media screen and ( max-width:631px ){header #logo{display:none;}}


header .inner{display:flex; flex-wrap:wrap;}
#logo5489{width:300px; margin-right:160px;}
#logo{width:190px;}

header h3{color:#444; font-size:87.5%; font-weight:100;}

@media screen and ( max-width:799px ){
#logo5489{width:220px; margin-right:60px;}
#logo{width:160px;}
}

#footer_area_twon{width:100%; max-width:800px; margin:10px auto 30px auto; overflow:hidden; line-height:1.8; color:#eee;}
#footer_area_twon dd, #footer_area_twon dt{color:#fff6f3;}
#footer_area_twon dd{margin-left:30px;}
	@media screen and ( max-width:799px ){
#footer_area_twon dt{margin-left:10px; margin-right:10px;}
#footer_area_twon dd{margin-left:20px; margin-right:20px;}
}

main, #main{width:100%; margin:0 auto; background:#FCEFE0;}

#main1{padding:10px;}
	@media screen and ( max-width:799px ){#main1{padding:0px;}}
#main1 .btn img{border-radius:6px; width:33.33%; max-width:180px;}
	@media screen and ( max-width:799px ){#main1 .btn img{width:50%;}}

main h3, #main h3{line-height:1.8;}

#main0 .btn{max-width:300px; margin:20px auto;}
#main0 .btn img{max-width:100%;}

#main1 h2{line-height:1.8; text-align:center; text-shadow:1px 1px 1px #666; margin:15px auto;}
#main1 p, #main1 li{line-height:2.0;}
#main1 section{border-radius:20px; border:2px solid #666; padding:25px 50px; margin:20px 20px 60px 20px; box-shadow:1px 1px 1px #666; background:url(../img/background_5489work.png) no-repeat 5% 5%;}
	@media screen and ( max-width:799px ){#main1 section{padding:15px 10px; margin:20px 10px 40px 10px;}}


#main1 p a{text-decoration:none; border-radius:8px; padding:5px 20px; border:1px solid #333; box-shadow:1px 1px 1px #666;}

#pankuzu{line-height:3.0; margin-left:40px;}


footer{clear:both; width:100%; background:#f98; padding-bottom:5px;}


/*トップページ*/
#toppage #main0{ width:320px; margin-right:10px; background:#fff; padding:10px 10px; /*font-size:87.5%;*/}
#toppage #main1, #main2{ width:calc(100% - 380px);}

	@media screen and ( max-width:799px ){
	#toppage #main0{width:calc(100% - 20px); margin-right:0;}
	#toppage #main1{width:calc(100% - 20px);}
	}

#toppage main .inner, #toppage #main .inner{display:flex; flex-wrap:wrap; width:100%; max-width:1600px; margin:0 auto;}



/*サービスのページ*/

#point-box{width:calc(100% - 24px); margin:10px auto; /*padding:20px; border:2px solid #333; border-radius:20px;*/}
	@media screen and ( max-width:799px ){#point-box{padding-top:20px;}}

#point-box h1{font-size:3vw; text-shadow: 2px 2px 1px #ccc; text-align:center;}
	@media screen and ( max-width:799px ){#point-box h1{font-size:5vw; text-shadow: 1px 1px 1px #ccc; text-align:left;}}

.itembox:before {content:""; display: block; padding-top: 100%; /* 高さを幅の100%に固定 */}
.itembox>div{position: absolute; top: calc(42% - 4vw); left: 0; bottom: 0; right: 0; text-align:center; text-shadow:1px 1px 1px #eee, 1px -1px 1px #eee, 1px -1px 1px #eee, -1px -1px 1px #eee; font-size:1.6vw;}
.itembox{background:#faf; margin:5px; font-size:180%;}

.itembox{position:relative; width:calc(16.66% - 14px);}
	@media screen and ( max-width:1199px ){.itembox{width:calc(25% - 14px);} .itembox>div{font-size:2.2vw;}}
	@media screen and ( max-width:980px ){.itembox{width:calc(33.33% - 13px);} .itembox>div{font-size:2.8vw;}}
	@media screen and ( max-width:799px ){.itembox{width:calc(50% - 13px);} .itembox>div{font-size:3.8vw;}}


#point-box ul li{border:1px solid #ccc;}

.box01{background:url(../img/box01bk.png) no-repeat right bottom; background-size:50%;}
.box02{background:url(../img/box02bk.png) no-repeat right bottom; background-size:50%;}
.box03{background:url(../img/box03bk.png) no-repeat right bottom; background-size:50%;}
.box04{background:url(../img/box04bk.png) no-repeat right bottom; background-size:50%;}
.box05{background:url(../img/box05bk.png) no-repeat bottom; background-size:85%;}
.box06{background:url(../img/box06bk.png) no-repeat right bottom; background-size:85%;}
.box07{background:url(../img/box07bk.png) no-repeat right bottom; background-size:50%;}
.box08{background:url(../img/box08bk.png) no-repeat right bottom; background-size:50%;}
.box09{background:url(../img/box01bk.png) no-repeat left bottom; background-size:50%;}
.box10{background:url(../img/box10bk.png) no-repeat left bottom; background-size:50%;}
.box11{background:url(../img/box02bk.png) no-repeat right bottom; background-size:50%;}
.box12{background:url(../img/box12bk.png) no-repeat right bottom; background-size:50%;}

.point{width:calc(100% - 44px); max-width:1500px; margin:10px auto; padding:10px; border:1px solid #ccc; border-radius:20px; min-height:220px; background:url(../img/background_5489work.png) no-repeat left bottom;}
.point img.sasie{width:20%; overflow:hidden;}
	@media screen and ( max-width:799px ){.point img.sasie{width:30%;}}


.point h2{margin-bottom:20px;}
	@media screen and ( max-width:799px ){.point h2{font-size:5.4vw; line-height:1.6; font-weight:200;}}
.point p{text-indent:1em; line-height:1.8;}
.pc2sp2m15>div{width:calc(33.33% - 30px); margin:15px;}

.tab_none{display:block;}
	@media screen and ( max-width:1265px ){
	.pc2sp2m15>div{width:calc(50% - 30px);}
	.tab_none{display:none;}
}

.pc2sp2m15 img{width:100%; max-width:343px; margin:5px auto;}


#animarea{display:flex; width:70%; margin:5px auto; position:relative; animation: moving22 8s linear 0s;}
#animarea img{display:inline; width:11.11%; transform: scale(0.0);}


/*プライスページ*/
.planbox{width:calc(100% - 44px); max-width:1500px; margin:10px auto; padding:10px; border:1px solid #999; border-radius:20px; min-height:220px; background:url(../img/background_5489work.png) no-repeat 80% 30px;}

.plan_point{width:calc(50% - 20px); margin:10px; line-height:1.8;}
.plan_point ul li{list-style-type:circle; margin-left:1em;}
.option_point{width:calc(50% - 44px); margin:10px; line-height:1.8;}
	@media screen and ( max-width:799px ){
.plan_point, .option_point{width:calc(100% - 20px); margin:10px; line-height:1.8;}
}

.price{/*font-weight:bold;*/ font-size:150%; color:#333; text-shadow:1px 1px 1px #666;}

.price_sall_box{width:75%; margin:30px auto; background:#fbffa3; padding:8px 10px; font-size:95%; line-height:1.5;}

.option_point{border:1px solid #ccc; padding:5px 10px; font-size:90%; line-height:1.6;}
.option_point dt{margin-left:10px;}
.option_point dd{margin-left:30px;}

.planbox h1 .fs80p{font-size:70%;}


/*制作の流れページ*/
.step{font-size:250%; font-weight:bold; color:#666; text-align:center; width:100px;}
.step_setu{width:calc(100% - 102px); text-indent:1em; text-align:justify;}
@media screen and ( max-width:799px ){
.step{font-size:220%; font-weight:bold; color:#666; text-align:center; width:65px;}
.step_setu{width:calc(100% - 67px);}
}


.stepbox{width:calc(100% - 34px); max-width:1500px; margin:8px auto; padding:7px; border:1px solid #999; border-radius:20px; background:url(./img/background_5489work.png) no-repeat 95% 5px;}
.stepbox p{line-height:1.8;}
.pricefree{line-height:1.6; padding:0 12px; margin:5px 20px; background:#666; color:#fff; text-align:center;}

.fs3vw5{font-size:3vw;}
@media screen and ( max-width:799px ){.fs3vw5{font-size:5vw;}}



/*fontに冠する記述*/
@font-face {
  font-family: 'Pacifico-R';
  src: url('../font/Pacifico-Regular.eot'); /* IE9??~ */
  src: url('../font/Pacifico-Regular.eot?#iefix') format('embedded-opentype'), /* IE8??O */
       url('../font/Pacifico-Regular.woff') format('woff'), /* ???_???u???E?U */
       url('../font/Pacifico-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
           }
.fontb06{font-family:"Pacifico-R"; font-size:6vw; font-style:italic; font-weight:100; color:#f05238; text-shadow:1px 1px 1px #666;}
	@media screen and ( max-width:799px ){.fontb06{font-size:10vw;}}

@font-face {
  font-family: 'ShadowsIntoLight';
  src: url('../font/ShadowsIntoLight.eot'); /* IE9??~ */
  src: url('../font/ShadowsIntoLight.eot?#iefix') format('embedded-opentype'), /* IE8??O */
       url('../font/ShadowsIntoLight.woff') format('woff'), /* ???_???u???E?U */
       url('../font/ShadowsIntoLight.ttf')  format('truetype'); /* Safari, Android, iOS */
					}
.fontb08{ font-family: "ShadowsIntoLight"; font-size:6vw; font-weight:100; color:#f22; letter-spacing:5px; font-style:italic;}
	@media screen and ( max-width:799px ){.fontb08{font-size:10vw;  letter-spacing:2px;}}



/*pagetopボタンの記述 ---js必要---*/

	#pagetop {
	    position: fixed;
	    bottom:110px;
	    right: 2%;
	    text-align: center;
	    margin: 0 auto;
	    text-decoration: none;
	    background-color: #dda0dd;
	    width: 60px;
	    height: 60px;
	    border-radius: 50%;
	    transition: all 1s ease;
	    -webkit-transition: all 1s ease;
	}
	@media screen and ( max-width:799px ){#pagetop{right:5%;}}


	.to_top:hover {
            transform: rotate(720deg);
            -webkit-transform: rotate(720deg);
            transition-duration: 2s;
            -webkit-transition-duration: 2s;
	}


/*realcampusの記述*/

.rela{position:relative; height:15px;}
.rela img{position:absolute; top:0; left:140px; width:100px; }


					.flcon{display:flex; flex-wrap:wrap;}
					.flcon img{width:100%;}
					.flitem{width:100%;}
					.flitem2{width:calc(33.33% - 8px); margin:4px; background:#fff; border-radius:6px;}
						@media screen and ( max-width:1130px ){.flitem2{width:calc(50% - 8px);}}
						@media screen and ( max-width:799px ){.flitem2{width:calc(33.33% - 8px);}}
						@media screen and ( max-width:600px ){.flitem2{width:calc(50% - 8px);}}

					.flitem2 h3{margin:5px 10px;}
					.flitem2 p{margin:5px 10px;}

		.container2 {
		  overflow: hidden;
		  width: 100%;}

		.container2 h3{
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		  }
		.container2 p{
		    overflow: hidden;
				font-size:87.5%;
				line-height:1.4;
		  }

		#calenderTable input{display:none;}

		#copy{text-align:center; color:#fff; font-size:85%;}

/*追加*/
abbr{border:none;}