@charset "UTF-8";
/*
 * CSS Document 
   - artsmile ceramic LP 
   - responsive
*/
@media(max-width: 1024px){
    .mainV, header, .wrap{
        max-width: 100%;
    }
}

@media(max-width: 768px){
    body{
        margin-bottom: 17.5333vw;
    }
    .sp{
        display: block!important;
    }
    .pc{
        display: none!important;
    }
	.wrap{padding: 0 3.5555vw;}
	
	
	/* ---------------------------
	
		header

	 --------------------------- */
	header .logo, header .tel, header .reserve{
		display: none;}

	header .menu-btn{
		position: fixed;
		top: 0;
		right: 0;
		display: block;
		float: none;
		height: 60px;
		line-height: 60px;
		border: none;
		background: rgba(255,255,255,.8);
		z-index: 99999;
		width: 60px;
		border-bottom-left-radius : 15px;
		-webkit-border-bottom-left-radius: 15px;
		-moz-border-radius-bottomleft: 15px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
		-webkit-transform: none;
		transform: none;
	}
	.menu-trigger span:nth-of-type(2) {
		top: calc(50% - 1px);
		opacity: 1.0;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
		-webkit-transform: none;
		transform: none;
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(10px) rotate(-27deg);
		transform: translateY(10px) rotate(-27deg);
	}
	.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
	.menu-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-10px) rotate(27deg);
		transform: translateY(-10px) rotate(27deg);
	}
	.Gnav{
		display: none;
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		opacity: 0;
		transition: .3s;
		background: rgba(255,255,255,0.95);}
	.Gnav.active{
		visibility: visible;
		opacity: 1.0;
		display: block;
	}
	.Gnav.off{
		visibility: hidden;
		opacity: 0;
		display: none;
	}
	nav ul {
		text-align: center;
		margin: 0;
		padding-top: 80px;
	}
	nav ul li {
		display: block;
		padding: 20px 0;
		border-bottom: 1px solid #c2a051;
	}
	nav ul a {
		display: block;
		padding: 0 20px;
		border-right: none;
	}
	nav ul li:first-child{border-top: 1px solid #c2a051;}
	nav ul li:first-child a {
		border-left: none;
	}
	nav ul a:hover{text-decoration:none;}
	
	/* ---------------------------

		main

	 --------------------------- */
	.main_v{
		width: 100%;
		height: 89vh;
		min-height: auto;
        z-index: 10;
	}
	.main_vleft .mv01,.main_vleft .mv02, .main_vleft .mv03{
		height: calc(100%/3);
		width: 25.99vw;
	}
	.main_vleft .mv01{ 
		background-position: 80% 30%;
		transform: scale(-1, 1);
	}
	.main_vleft .mv02{ 
		background: url(../img/mv03.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 35% 0;
	}
	.main_vleft .mv03{ 
		background: url(../img/mv04.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 70% 0;
	}

	.main_vright .mv04,.main_vright .mv05, .main_vright .mv06{
		height: calc(100%/3);
		width: 25.99vw;
	}
	.main_vright .mv04{ 
		background: url(../img/mv05.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 20% 0;
	}
	.main_vright .mv05{ 
		background: url(../img/mv02.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 41% 10%;
	}
	.main_vright .mv06{ 
		background: url(../img/mv06.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 48% 10%;
	}

	.main_v img{
		left: calc(50% - 15vw);
		width: 30vw;
	}
	.main_v p{
		top: 25%;
		left: calc(50% - 69px);
		font-size: 1.6em;
	}
	
	/* sec1 -------------
	 ----------------- */
	.sec01{
		padding: 50px 0;
	}
	.sec01::before{
		bottom: -9.8999vh;
		border-top: 10vh solid #fbfbfb;
	}
	.row_in .row_inbox{
		flex-basis: calc(100%);
		height: auto;
		margin-top: 50px;
	}
	.row_in .row_inbox:first-of-type{margin-top: 0;}
	.row_in .row_inbox div{
		position: relative;
	}
	.sec01 .title{
		font-size: 1.5em;
		margin-bottom: 30px;
	}
	.sec01 .title::before, .sec01 .title::after{
		font-size: 0.8em;
	}
	
	/* sec2 -------------
	 ----------------- */
	.sec02{
		padding: 15vh 0 30vh;
	}
	.sec02::before{
		display: none;
	}
	.sec02::after{
		content: '';
		position: absolute;
		bottom: 0;
		right: auto;
		left: 0;
		background: url(../img/sp/case_all_sp.png);
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: contain;
		width: 100vw;
		height: 100vh;
	}
	.sec02 p.title{font-size: 1.7em;}
	.sec02 p.under_box{
		background: #fff;
		color: #76c7c4;
		display: inline-block!important;
		font-size: 1.0em;
		padding: 3px 15px;
		margin-top: 10px;}
	.sec02 p.txt{
		font-size: 1.0em;
		margin-top: 20px;}

	.sec02 .wrap{
		z-index: 1;
	}
	.sec02 .wrap::after{display: none;}
	
	/* sec3 -------------
	 ----------------- */
	.sec03{
		padding: 50px 0;
	}
	.sec03 .title{
		font-size: 1.5em;
    	margin-bottom: 30px;
	}
	.sec03 .title::before, .sec03 .title::after{
		font-size: 0.8em;
	}
	.standard{
		flex-basis: calc(100%/1);
		margin-top: 40px;
		padding: 80px 0 40px;
	}
	.standard:first-of-type{margin-top: 0;}
	.standard::before{
		font-size: 2.0em;
		line-height: 2.1;
		height: 40px;
	}
	.standard::after{
		top: 40px;
		border-left: calc(50vw - 3.5555vw) solid transparent;
		border-right: calc(50vw - 3.5555vw) solid transparent;
		border-top: 30px solid #76c7c4;
	}
	.standard img{
		height: 130px;
		width: auto;
		margin-top: 10px;}
	.standard p.tech_name{
		font-size: 1.5em;
		height: auto;
	}
	.standard p.tech_txt{
		padding: 0 20px;
		margin-top: 30px;
	}
	.standard .check{
		padding: 0 20px;
		height: auto;
	}
	
/* sec4 -------------
	 ----------------- */
	.sec04{
		padding: 0 0 50px;
	}
	.sec04::before {
		bottom: -10vh;
		border-top: 10vh solid #f2f9fb;
	}
	.sec04 .ethetic{
		width: 100vw;
	}
	.sec04 .ethetic::before,.sec04 .ethetic::after {
		border-bottom: 10vh solid #f2f9fb;
		bottom: -1px;
	}
	.sec04 .ethetic p{
		color: #fff;
		font-size: 1.6em;
		padding: 40px 0 60px;
	}
	.left,.right{float: none;}

	.half{
		width: 100%;
		margin-top: 30px;
	}
	.half img{
		width: 100%;
		height: 300px;
		object-fit: cover;
	}
	.half.txt.left{
		margin-left: 0;
	}
	.half.txt.right{
		margin-right: 0;
	}
	
	.half p {
		margin-top: 20px;
	}
	.half p.lead{
		color: #76c7c4;
		font-size: 1.4em;
		font-weight: bold;
		line-height: 1.5;
		margin-top: 0;
		text-align: center;
	}
	.half .intro{text-align: center;}

	.sec04 .title{
		font-size: 1.5em;
		margin-bottom: 0;
		margin-top: 40px;
	}
	.sec04 .title::before, .sec04 .title::after{
		font-size: 0.8em;
	}

	.half div{
		padding: 30px 25px;
		margin-top: 10px;
	}
	.half div p{
		margin-top: 0;
	}
	.half div .arrow{
		width: 0;
		height: 0;
		border-left: 25px solid transparent;
		border-right: 25px solid transparent;
		border-top: 25px solid #dcdcdc;
		padding: 0;
		margin: 27px auto;
	}

	.jidv{
		margin-top: 50px;
	}
	.jidv img {
	  width: 100%;
	}

	
/* sec5 -------------
	 ----------------- */
	.sec05{
		padding: 15vh 0 3vh;
	}
	.sec05::before{display: none;}
	.sec05::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		background: url(../img/sp/bg_sp.png);
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: contain;
		width: 100vw;
		height: 100vh;
	}
	.sec05 p.title{
		color: #fff;
		font-size: 1.7em;}
	.sec05 p.txt{
		color: #fff;
		font-size: 1.0em;
		margin-top: 30px;
	}
	a.btn{
		margin: 17vh 0 0;
		width: calc(100% - 48px);
		padding: 10px;
		z-index: 1;
	}
	a.btn2{
		margin: 5vh 0 0;
		width: calc(100% - 48px);
		padding: 10px;
		z-index: 1;
	}
	a.btn::before{
		content: '';
		position: absolute;
		top: 0;
		right: -24px;
		width: 0;
		height: 0;
		border-right: 24px solid transparent;
		border-bottom: 48px solid #c2a051;
		border-top: none;
		border-left: none;
	}
	a.btn2::before{
		content: '';
		position: absolute;
		top: 0;
		right: -24px;
		width: 0;
		height: 0;
		border-right: 24px solid transparent;
		border-bottom: 48px solid #c2a051;
		border-top: none;
		border-left: none;
	}
	a.btn::after,a.btn2::after{right: 0;}
	a.btn:hover::after,a.btn2:hover::after{right: 0;}

/* sec6 -------------
	 ----------------- */
	
	.sec06 .title{
		font-size: 1.5em;
    	margin-bottom: 30px;
	}
	.sec06{
		padding: 50px 0;
	}
	
	table.flow_t{
		margin-top: 30px;
		border-spacing: 0;
	}
	table.flow_t thead{
		display: block;
		float: left;
		width: 70px;
	}
	table.flow_t thead tr{
		width: 100%
	}
	table.flow_t tbody{
		display: block;
		float: right;
		width: calc(100% -  70px);
	}
	table.flow_t tbody tr{
		width: 100%;
	}
	table.flow_t th,
	table.flow_t td{
		display: block;
		height: 200px;
		width: 100%;
		margin-bottom: 15px;
	}
	table.flow_t td{
		width: 100%;
		padding: 80px 20px 20px;
		margin-right: 15px;
	}
	table.flow_t th{
		width: 100%;
		padding: 0;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	    
	table.flow_t th.a01{
		height: 200px;
		width: 60px;
		padding: 10px 15px 8px;
		line-height: 30px;
		text-align: left;
		text-orientation: upright;
	}
	table.flow_t th.a02{
		height: 415px;
		width: 60px;
		padding: 10px 15px;
	    line-height: 30px;
		text-align: left;
	}
	table.flow_t th.a03{
		height: 630px;
	    width: 60px;
		padding: 10px 15px;
	    line-height: 30px;
		text-align: left;
		text-orientation: upright;
	}
	table.flow_t th.a04{
		height: 845px;
	   	width: 60px;
		padding: 10px 15px;
	    line-height: 30px;
		text-align: left;
	}
	table.flow_t th.a05{
		display: none;
	}
	table.flow_t th.a06{
		height: 415px;
		width: 60px;
		padding: 10px 15px;
	    line-height: 30px;
		text-align: left;
		text-orientation: upright;
	}

	table.flow_t th.a01::before,
	table.flow_t th.a03::before,
	table.flow_t th.a05::before,
	table.flow_t th.a02::before,
	table.flow_t th.a04::before,
	table.flow_t th.a06::before{
		content: '';
		position: absolute;
		top: auto;
		right: auto;
		bottom: 0;
		left: 0;
		width: 0;
		height: 0;
		border-right: 35px solid transparent;
		border-bottom: 20px solid #fbfbfb;
		border-left: none;
		border-top: none;
	}
	table.flow_t th.a01::after,
	table.flow_t th.a03::after,
	table.flow_t th.a05::after,
	table.flow_t th.a02::after,
	table.flow_t th.a04::after,
	table.flow_t th.a06::after{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 0;
		height: 0;
		border-left: 35px solid transparent;
		border-bottom: 20px solid #fbfbfb;
	}
	
/* sec7 -------------
	 ----------------- */
	.sec07{
		padding: 50px 0;
	}
	.sec07::before,.sec07::after{
		display: none;
	}
	.sec07 .title{
		color: #c2a051;
		font-size: 1.50em;
		margin-bottom: 30px;
		text-align: center;}

	.sep_img{width: 100%;}
	.sep_txt{
		width: 100%;
		margin-left: 0;
	}
	.sep_txt .lead{
		font-size: 1.0em;
		padding: 10px 4px;
		margin: 17px 0;
	}
	.sep_txt p{font-size: 0.9em;}
	ruby{
		font-size: 2.0em;
		margin-top: 17px;
	}
	
/* sec8 -------------
	 ----------------- */
	.sec08{
		padding: 50px 0;
	}
	.sec08 .title{
		font-size: 1.5em;
	}
	.sec08 .title::before, .sec08 .title::after{
		font-size: 0.8em;
	}
	.sec08 .title:nth-of-type(2){
		margin-top: 50px;
	}
	.scroll{
		overflow: auto;
	}
	.scroll::-webkit-scrollbar{
		height: 5px;
	}
	.scroll::-webkit-scrollbar-track{
		background: #F6F6F6;
	}
	.scroll::-webkit-scrollbar-thumb {
		background: #C2C2C2;
	}
	.scroll table{
		width: 800px;
	}
	ul.pay{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 40px;
	}
	ul.pay li:nth-of-type(1),ul.pay li:nth-of-type(2),ul.pay li:nth-of-type(3){
		flex-basis: calc(100%/3 - 1px);
		margin-bottom: 1px;
	}
	ul.pay li:nth-of-type(4),ul.pay li:nth-of-type(5){
		flex-basis: calc(100%/2 - 1px);
	}
	ul.pay li img{
		height: 55px;
	}
	
/* sec9 -------------
	 ----------------- */
	.sec09{
		padding: 50px 0;
	}
	.sec09 .title{
		font-size: 1.5em;
	}
	.sec09 .title::before, .sec09 .title::after{
		font-size: 0.8em;
	}
	.sec09 .title:nth-of-type(2){
		margin-top: 50px;
	}
	.acc_txt{width: 100%;}
	.acc_txt img{
		width: 90%;
		margin: 0 auto;
	}
	.acc_img{
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
	}
	.acc_img img{width: 100%;}
	.sec09 p{
		font-size: 0.9em;
		font-weight: bold;
	}
	table.time thead th{
		font-size: 0.9em;
		padding: 8px 3px;
	}
	table.time tbody th,table.time tbody td{
		font-size: 0.9em;
		padding: 10px 3px;
	}
	
/* sec10 -------------
	 ----------------- */
	.sec10{
		padding: 50px 0;
	}
	.sec10 .title{
		font-size: 1.5em;
		margin: 0 auto 10px;
	}
	.sec10 .title::before, .sec10 .title::after{
		font-size: 0.8em;
	}
	
	.cover_box{display: none;}
	
/* sec_thanks -------------
	 ----------------- */
	.sec_thanks{
		padding: 30vh 0;
		height: 80vh;
	}
	.sec_thanks .title{
		font-size: 1.5em;
		margin-bottom: 30px;
	}
	.sec_thanks p{
		text-align: left;
	}
	
/* sec_case -------------
 ----------------- */
	.sec_case{
		padding: 0 0 20vh;
		position: relative;
	}
	.sec_case .case_mv{
		width: 100%;
		height: 250px;
		background: url(../img/case/case_mv_sp.png);
		background-position: center;
	}
	.sec_case .case_mv div{
		top: auto;
		bottom: 0;
		height: 100px;
		width: 100%;
	}
	.sec_case .case_mv div p{
		font-size: 30px;
		letter-spacing: 2.0px;
		line-height: 100px;
	}
	.sec_case .case_mv div p::before{
		font-size: 100px;
	}
	.sec_case .case_in{
		display: block;
	}

	.sec_case .case_in .case_inbox{
		height: 300px;
		position: relative;
		margin-top: 30px;
		-webkit-filter: grayscale(0%);
		filter: grayscale(0%);
	}
	.sec_case .case_in .case_inbox:hover{
		-webkit-filter: grayscale(0%);
		filter: grayscale(0%);
	}
	/*-- case13 --*/
	.sec_case .case_in .case_inbox:first-child div:nth-child(2) img{ margin-top: -40px;}
	.sec_case .case_in .case_inbox:first-child div:last-child img{ margin-top: -35px;}
	
	/* risk -------------
 	----------------- */
		.risk_box {
			padding: 0;
			position: relative;
			bottom: auto;
			left: auto;
			right: auto;
			width: 100%;
			margin-top: 30px;
		}
		.risk_box label{
			padding: 8px 10px;
		}
		.risk_box input:checked ~ .risk_show {
			padding: 10px 0 18px;
		}
		.risk_show p{
			font-size: 13px!important;
			margin-top: 10px;
		}
		.risk_show p span{
			display: block;
		}
		.risk_show p.tre_title{
			background: #000;
			color: #fff;
			display: inline-block;
			padding: 3px 8px;
			margin-left: 8px;
		}
		.risk_show p.anno{font-size:0.7em!important;}

	

/* ---------------------------
	
	contact

 --------------------------- */
	table.contact{
		width: 100%;
	}
	table.contact th{
		padding: 20px 0 5px;
		width: 100%;
		display: block;
	}
	table.contact th.must::after{
		position: relative;
		top: -2px;
		right: auto;
		line-height: 1.0em;
		padding: 5px 8px;
	}
	table.contact td{
		padding: 0;
		width: 100%;
		display: block;
	}
	table.contact td.diff{
		border-top: none;
		border-right: none;
		border-left: none;
		width: 100%;
	}
	table.contact td .white-wrap.date {
		font-size: 3.46666vw;
        padding: 4vw 1.3333vw;
        height: auto;
        align-items: unset;
		margin: 0 0 20px 0;
	}
	table.contact td .white-wrap.date > span{
        margin-top: 1vw;
    }
    table.contact td .white-wrap.date .inline span{
        margin-top: 6.6666vw;
        display: inline-block;
    }
    select{
		padding: 0 4.6vw;
        height: 50px;
        background-size: 1.46666vw;
        background-position: calc(100% - 1.0666vw) center;
        margin: 0px 1.3333vw 0 4vw;
		font-size: 16px;
    }
	.inline select:last-child{
		padding: 0 25.2vw 0 4.9vw;
	}
	textarea{
		width: 100%;
	}
	input[name=name],input[name=tel],input[name=mail]{
		width: 100%;
		height: 70px;
	}
	input[type="date"]{
		width: 78.8%;
		height: 50px;
	}
	input[type="submit"]{
		background:url(../img/sp/btn_sp.png);
		background-position: left;
		background-repeat: no-repeat;
		background-size: contain;
		width: 100%;
		padding: 10px;
		margin: 40px 0 0;
		z-index: 1;
		border-radius: none;
	}
	.confirm{
		width: 100%;
	}
	.confirm::before{
		display: none;
	}
	.confirm::after{
		content: '';
		position: absolute;
		top: calc(50% - 10px);
		right: 12vw;
		width: 70px;
		height: 20px;
		transition: all .2s;
	}
	.confirm:hover::after{
		right: 12vw;}
	
/* ---------------------------
	
	Footer

 --------------------------- */
	.ft_cont{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 10;
	}
	.ft_cont a{
		flex-basis: calc(100%/2 - 0.25px);
    	text-align: center;
		background: #fff;
		border-left: 1px solid #c2a051;
		border-right: 1px solid #c2a051;
		border-bottom: 1px solid #c2a051;
/*		border-left: 1px solid #fff;*/
		color: #c2a051;
		font-size: 3.466vw;
    	padding: 4vw 6.666vw 3vw;
    	white-space: nowrap;
	}
	.ft_cont a:last-child{border-left: none;}
	.ft_cont::before{
		content: '▼ セカンドオピニオン随時受付中 ▼';
		position: absolute;
		top: -28px;
		left: 0;
		width: 100%;
		text-align: center;
		background: #c2a051;
		color: #fff;
	}
	.ft_cont a::after{
		content: ' →';
	}
}

/* sec2 -------------
 ----------------- */
@media(max-width: 550px){
	.sec02{
		padding: 15vh 0 25vh;
		overflow: hidden;
	}
}