@charset "utf-8";

/*--kobetuのスマホ設定--*/
/*--------------------------*/


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

	#condminium02-s.condminium-s .illu li:nth-child(1){
	    left: -70px;
	    top: 140px;
	}
	#condminium02-s.condminium-s .illu li:nth-child(2){
		left: 30px;
	    bottom: -220px;
	}

}
@media screen and (max-width: 1179px) {
	#conte05 .condminium-s div img {
    width: 100%;
	}



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

	.footer02.col02 .col01{
		width: calc((100% - 72px) / 2);
	}


	.mono .photo-tx-conte .conte-tx{
		max-width: calc((40% - 0px)/1);
		width: 100%;
	}
	.mono .photo-tx-conte .conte-ph{
		max-width: calc((60% - 72px)/1);
		width: 100%;
	}

	.mono .photo-tx-conte + .photo-tx-conte {
	    margin-top: 56px;
	}
	#conte04 #cebu01:before{
		right: -130px;
	    top: -60px;
	}
	#conte04 #cebu02{
		margin-top: 100px;
	}
	#conte04 #cebu03{
		margin-top: 16px;
	}

	#conte04 #cebu03 .illu {
	    top: 110px;
	    right: 30px;
	}
	.mono .title04 {
	    font-size: 28px;
	}

	#conte05.bg.bg_blue{
		padding-top: 132px;
	    padding-bottom: 120px;
	    /*margin-top: 56px;*/
	}
	#conte05 .title02 {
	    font-size: 20px;
	}
	.mono .photo-tx-conte.condminium{
		display: block;
	}
	.mono .photo-tx-conte.condminium .conte-ph,
	.mono .photo-tx-conte.condminium .conte-tx {
	    max-width: 680px;
	    width: 100%;
	    margin-left: auto;
	    margin-right: auto;
	}
	.mono .photo-tx-conte.condminium .conte-ph{
		margin-top: 36px;
	}



	.mono .condminium-s {
	    max-width: 680px;
	}
	.mono .photo-tx-conte.condminium-s .conte-ph iframe{
		height: 300px;
	}
	.mono .photo-tx-conte.condminium-s .conte-tx,
	.mono .photo-tx-conte.condminium-s .conte-ph {
	    max-width: calc((680px - 70px) / 2);
	}
	.mono .photo-tx-conte + #condminium02.photo-tx-conte{
		margin-top: 100px;
	}
	#condminium02-s.condminium-s .conte-ph:before,
	#condminium01-s.condminium-s .conte-ph:before{
		display: none;
	}
	#condminium01-s.condminium-s .illu li:nth-child(2) {
	    left: -70px;
	    bottom: -190px;
	}
	#condminium02-s.condminium-s .illu{
		display: none;
	}

	#conte06 .col03 .col01{
		width: calc((100% - 80px) / 3);
	}
	#conte06.conte-normal {
	    position: relative;
	    padding-top: 100px;
	    padding-bottom: 56px;
	}


	#conte08 .bg_w {
	    width: 70%;
	}


}


@media screen and (max-width: 767px) {
	.bt.inqiry{
	  width: 140px;
	  height: 90px;
	  right: -30px;
	}


	.footer02.col02{
		display: block;
	}
	.footer02.col02 .col01{
		width: 100%;
	}
	.footer02.col02 .col01 + .col01{
		margin-top: 56px;
	}
	.footer02 .f-logo{
		text-align: center;
		border-bottom: solid 1px #AEC7FA;
		padding-bottom: 16px;
		margin-bottom: 8px;
	}
	.footer02 ul.sns.c-flex.jus-start{
		justify-content: center;
		border-bottom: solid 1px #AEC7FA;
		padding-bottom: 8px;
	}


	.mono .bg.bg_main {
	    padding-top: 150px;
	    padding-bottom: 150px;
	}
	#main-v .conte-tx{
		width: 100%;
		display: table;
		margin: 0 auto;
	}
	#main-v .image.c-flex li img,
	#main-v .title img{
	    /*width: 40%;*/
		width: 96%;
	    height: auto;
		/*top: 500px;*/
		top: 360px;
	}

	#main-v .image.c-flex{
		display: block;
		max-width: 80%;
		width: 100%;
		margin: 24px auto 0;
	}
	#main-v .conte-tx .image .col01 + .col01 {
	    margin-right: 0;
	}
	#main-v .title:after {
	    top: 100px;
	    right: 20%;
		width: 150px;
		height: 50px;
	}
	.mono #conte02.conte-normal{
		padding-top: 24px;
	}
	
	.mono .price{
	min-width: 400px;
    } 
	
	
	#conte02 .pd-70{
		padding-top: 0px;
	}

	.point .col03{
		display: block;
	}
	.point .col03 .col01 + .col01,
	.point .col03 + .col03{
		/*margin-top: 56px;*/
	}
	.point .col03 .col01 {
	    width: 100%;
	    padding-top: 30px;
	}
	.point .col03 .col01 + .col01 {
	    margin-left: 0px;
	}
	.mono #point01 .tx {
	    left: calc((100% - 280px) / 2);
	}
	.point .col03 .col01 .tx {
	    left: calc((100% - 300px) / 2);
	    top: -4px;
	}
	.point .col03 #point03.col01 .tx {
	    left: calc((100% - 205px) / 2);
	    top: -4px;
	}

	
	#conte03 .c-flex.col03{
		display: block;
	}
	#conte03 .c-flex.col03 .col01 + .col01{
		margin-top: 24px;
	}
	.mono .price dl {
	    /*max-width: calc(300px - 30px);*/
	    padding: 5px 15px;
	    margin: 0 auto;
	}

	.mono .photo-tx-conte.c-flex{
		display: block;
	}
	.mono .photo-tx-conte .conte-tx{
		max-width: 100%;
		width: 100%;
		margin-bottom: 24px;
	}
	.mono .photo-tx-conte .conte-ph{
		max-width: 100%;
		width: 100%;
	}
	.mono .photo-tx-conte + .photo-tx-conte{
		margin-top: 56px;
	}
	.mono .number:before {
	    width: 205px;
	    height: 140px;
	}


	#conte04 #cebu01:before{
		right: -70px;
		top: -40px;
	}

	
	#conte05.bg.bg_blue {
	    padding-top: 82px;
	    padding-bottom: 120px;
	    /*margin-top: 56px;*/
	}
	.mono #conte06 > h2,
	.mono #conte05 > h2 {
		left: auto;
	    top: -50px;
	    padding: 0 20px;
	    /*width: calc(100% - 40px);*/
	}

	#conte05 #conte-lead {
	    margin-bottom: 32px;
	}

	
	.mono #conte-lead .title02{
		display: flex;
		text-align: left;
	}

	#condminium02 .conte-tx:before {
	    right: -9%;
	    top: -60px;
	    width: 120px;
	    height: 110px;
	}
	#condminium01 .conte-tx:before {
	    right: 5%;
	    top: -80px;
	    width: 100px;
	    height: 100px;
	}
	.mono .photo-tx-conte.condminium .conte-ph,
	.mono .photo-tx-conte + .photo-tx-conte {
	    margin-top: 32px;
	}
	

	
	.mono .photo-tx-conte.condminium-s .conte-tx,
	.mono .photo-tx-conte.condminium-s .conte-ph {
	    max-width: 100%;
	}


	#conte06.conte-normal {
	    padding-top: 82px;
	    padding-bottom: 70px;
	}
	#conte06 .col03{
		display: block;
	}
	#conte06 .col03 .col01{
		width: 100%;
	}
	#conte06 .col03 .col01 + .col01{
		margin-top: 32px;
	}
	#conte06 #info-ph {
	    margin-top: 32px;
	}
	.mono .card01 {
	    padding: 56px 30px 30px;
	    /*width: calc(100% - 60px);*/
	}

	.mono table.normal th, .mono table td {
	    border: solid 1px #AEC7FA;
	    padding: 4px;
	    text-align: left;
	    font-weight: 700;
	    text-align: center;
	    font-size: 12px;
	    letter-spacing: 0.02px;
	}
	.mono .card01 table caption,
	.mono .card01 p{
		font-size: 14px;
		text-align: left;
	}

	.mono .card01 .title{
		font-size: 18px;
	}
	.mono #card01-1.card01 .illu li {
	    left: -35px;
	    top: -80px;
	}

	.mono #card01-4.card01 .illu li{
		display: none;
	}
	.mono #card01-4.card01 table th{
		min-width: 35%;
	}
	#conte07.bg_umi05:after{
		animation: surf-s 6s ease-in-out infinite reverse;
		width: 70px;
		height: 80px;
	}


	#conte08 .bg_w {
	    padding: 56px 30px;
	    width: 100%;
	    /*width: calc(100% - 60px);*/
	    margin: 0 auto; 
	}
	#conte08 #conte-line .c-flex{
		display: block;
	}
	#conte08 #conte-line ul{
		padding-left: 0;
		padding-top: 0px;
		background: none;
	}
	#conte08 #conte-line ul li{
		text-align: center;
	}

	#conte08 #conte-line .qr {
	    margin-left: auto;
	    margin-right: auto;
	    margin-top: 32px;
	    display: table;
	}


	#conte-mail .title{
		text-align: center;
	}


	#conte-mail .c-flex label span,
	#conte-mail .c-flex{
		display: block;
	}
	#conte-mail .c-flex select {
	    width: 100%;
	}
	#conte-mail .c-flex .wpcf7-form-control-wrap {
	    margin-left: 0px;
	}


}
@media screen and (max-width: 431px) {
	#main-v {
		width: 100%;
		height: 100vh;/*SPはSP専用ファーストビューをフル画面表示*/
		/*background-image: url('https://beauty.cebu-business-english-academy.com/wp-content/uploads/2025/07/bg_top_sp.jpg') !important;*/
		background-image: url('https://beauty.cebu-business-english-academy.com/wp-content/uploads/2025/07/bg_top_sp2.jpg') !important;
	}
	
	#main-v .title img{
		display:none ;
		/*top: 450px;SPのみメイン画像にテキスト入れてる
        max-width: 430px;
        width: 100%;*/
	}
	
	/*
	.mono .title.title_fukudashi {
	    font-size: 18px;
	    letter-spacing: 0.5px;
	    height: 80px;
	    padding-bottom: 15px;
	    margin-bottom: 32px;
	}
	
	.mono .number:before {
	    width: 160px;
	    height: 20px;
	}
	#conte04 #cebu04:before {
	    left: auto;
	    right: 0;
	    top: 0px;
	    width: 140px;
	    height: 150px;
	}
	#conte04 #cebu01:before {
		right: -10px;
		top: -80px;
		width: 30%;
	}
    */
	.mono .title03 {
		font-size: 22px;
	}
	
	.mono .title04 {
		font-size: 22px;
	}

	#conte02 .intro img{
        max-width: 400px;
        width: 100%;
	}
	
	#conte03 .detail{
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
	}
	
	#conte03 h3{
		max-width: 400px;
		width: 100%;
	}
	
	#conte03 section.c-flex.sp-2 {
		display: block;
	}
	
	#conte03 section ul{
		margin-bottom: 40px;
	}

}