@charset "UTF-8";

/* font
------------------------------------------------------------*/
.feature-text,.implant-service li,.box-text,.charge-content-text,.oral-service-box,address,.flow-text,.flow-text02,.flow-text03,.price-text{font-family:  "游ゴシック体", "Yu Gothic", YuGothic, "Noto Sans Japanese","ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

/* start
------------------------------------------------------------*/
.start {background: #FFF;position: fixed;top: 0;left: 0;height: 100%;width: 100%;z-index: 9000;}
.start p {position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);display: none;z-index: 9999;width: 150px;}

/* scroll animation
------------------------------------------------------------*/
.animation{opacity : 0;visibility: hidden;transition: 1.6s;transform: translateY(80px);}
.active{opacity: 1;visibility: visible;transform: translateY(0);}

/* header
------------------------------------------------------------*/
.catch{-ms-writing-mode: tb-rl;writing-mode: vertical-rl;font-weight: bold;font-size: 1.8em;letter-spacing: 2px;line-height: 60px;margin: -84px 0 0 -25%;z-index: 99;text-shadow: 0px 0px 3px #fff;}

#slider {float: right;width: 70%;height: 350px;margin-top: 100px;}

.header-manu{width: 100%;margin: 480px auto 60px auto;text-align: center;font-size: 1.2em;}
.header-manu li{display: inline;padding: 0 1.5em;}

/* content
------------------------------------------------------------*/
.implant{background: url("../img/implant_bg.png") top left/auto 100% no-repeat;width: 100%;padding: 50px 0;float: left;position: relative;}
.oral{background: url("../img/oral_bg.png") top right/auto 100% no-repeat;width: 100%;padding: 50px 0;float: right;position: relative;}
.implant-box{float: right;margin-right: 20%;padding: 30px;background: #fff;width: 440px;height: 440px;text-align: center;}
.oral-box{float: left;margin-left: 20%;padding: 30px;background: #fff;width: 440px;height: 440px;text-align: center;}

.title{font-size: 2em;margin-top: 20px;letter-spacing: 4px;line-height: 30px;font-weight: bold;text-align: center;}
.title span{width: 100%;float: left;font-size: 0.4em;font-weight: normal;text-transform: uppercase;}
.line{border-bottom: 3px double #000;width: 150px;margin: 40px auto 20px auto;}
.icon{width: 30px;margin: 20px auto;}
.sub-title{margin-bottom: 20px;font-weight: bold;font-size: 1.2em;}
.box-text{text-align: left;line-height: 24px;font-size: 1.2em;}

.implant-content{width: 100%;padding: 200px 5% 100px 5%;background: #1E445B;margin-top: -100px;float: left;}
.implant-content > .title{color: #fff;}
.implant-content > .line{border-bottom: 3px double #fff;}
.oral-content{width: 100%;padding: 200px 5% 100px 5%;background: #34675C;margin-top: -100px;float: left;}
.oral-content > .title{color: #fff;}
.oral-content > .line{border-bottom: 3px double #fff;}

.implant-feature{width: 100%;max-width: 1280px; text-align: center;margin: 0 auto;}
.implant-feature li{display: inline-block;width: 24%;text-align: left;color: #fff;padding: 10px 10px 30px 10px;vertical-align: top;}
.feature-img01,.feature-img02,.feature-img03,.feature-img04,.feature-img05,.feature-img06,.feature-img07,.feature-img08{width: 100%;height: 210px;margin-bottom: 10px;}
.feature-img01{background:url("../img/feature01.jpg") center center/auto 100% no-repeat}
.feature-img02{background:url("../img/feature02.jpg") center center/auto 100% no-repeat}
.feature-img03{background:url("../img/feature03.jpg") center center/auto 100% no-repeat}
.feature-img04{background:url("../img/feature04.jpg") center center/auto 100% no-repeat}
.feature-img05{background:url("../img/feature05.jpg") center center/auto 100% no-repeat}
.feature-img06{background:url("../img/feature06.jpg") center center/auto 100% no-repeat}
.feature-img07{background:url("../img/feature07.jpg") center center/auto 100% no-repeat}
.feature-img08{background:url("../img/feature08.jpg") center center/auto 100% no-repeat}

.feature-title{font-size: 1.4em;}.feature-text{line-height: 20px;font-size: 1.2em;}

.implant-service{padding: 80px 0 0;width: 100%;max-width: 980px; margin: 0 auto;}
.implant-service > .title{color: #fff;}
.implant-service > .line{border-bottom: 3px double #fff;}
.oral-service{width:100%;max-width: 980px;margin: 0 auto;}
.oral-service > .title{color: #fff;}
.oral-service > .line{border-bottom: 3px double #fff;}

.reserve-box{width: 100%;}
.implant-service li{width: 26.6666%;display: inline-block;vertical-align: top;line-height: 20px;color: #fff;margin: 10px 3% 30px 3%;font-size: 1.2em;}
.oral-service li{width: 26.6666%;display: inline-block;vertical-align: top;line-height: 20px;color: #fff;margin: 10px 3% 30px 3%;font-size: 1.2em;}
.service-box li a,.oral-service-box li a{color: #fff;transition: .8s;}
.service-box li a:hover{color: #51748D;opacity: .8;}
.oral-service-box li a:hover{color: #669A8E;opacity: .8;}

.service-img01,.service-img02,.service-img03,.service-img04,.service-img05,.service-img06,.service-img07,.service-img08,.oral-img01,.oral-img02,.oral-img03,.oral-img04,.oral-img05,.oral-img06{width: 100%;height: 200px;margin-bottom: 10px;transition: .8s;}
.service-img01:hover,.service-img02:hover,.service-img03:hover,.service-img04:hover,.service-img05:hover,.service-img06:hover,.service-img07:hover,.service-img08:hover,.oral-img01:hover,.oral-img02:hover,.oral-img03:hover,.oral-img04:hover,.oral-img05:hover,.oral-img06:hover{background-color:rgba(255,255,255,0.2);background-blend-mode:lighten;}
.service-img01{background:url("../img/service01.jpg") center center/auto 100% no-repeat}
.service-img02{background:url("../img/service02.jpg") center center/auto 100% no-repeat}
.service-img03{background:url("../img/service03.jpg") center center/auto 100% no-repeat}
.service-img04{background:url("../img/service04.jpg") center center/auto 100% no-repeat}
.service-img05{background:url("../img/service05.jpg") center center/auto 100% no-repeat}
.service-img06{background:url("../img/service06.jpg") center center/auto 100% no-repeat}
.service-img07{background:url("../img/service07.jpg") center center/auto 100% no-repeat}
.service-img08{background:url("../img/service08.jpg") center center/auto 100% no-repeat}
.oral-img01{background:url("../img/oral01.jpg") center center/auto 100% no-repeat}
.oral-img02{background:url("../img/oral02.jpg") center center/auto 100% no-repeat}
.oral-img03{background:url("../img/oral03.jpg") center center/auto 100% no-repeat}
.oral-img04{background:url("../img/oral04.jpg") center center/auto 100% no-repeat}
.oral-img05{background:url("../img/oral05.jpg") center center/auto 100% no-repeat}
.oral-img06{background:url("../img/oral06.jpg") center center/auto 100% no-repeat}

.dr{padding: 80px 0;clear: both;}
.charge{width: 100%;max-width: 1000px; margin: 0 auto;margin-bottom: 20px;font-size: 1.2em;}
.charge li{display: inline-block;vertical-align: top;padding: 0 10px;line-height: 20px;}
.anzai{width: 445px;}
.morinaga{width: 400px;}.morinaga02{width: 370px;}
.fukunaga{width: 315px;}
.yoshida02{width: 300px;}.morinaga02{width: 370px;}

.name{font-size: 1.6em;padding-bottom: 10px;letter-spacing: 3px;}
.name span{font-size: 0.6em;color: #6C6C6C;margin-left: 15px;}
.charge-content-text{letter-spacing: 0px;}
.charge-content-text a{text-decoration: underline;}

/* flow
------------------------------------------------------------*/
.flow{width: 100%;max-width: 980px; margin: 80px auto 0 auto;color: #fff;}
.flow > .line{border-bottom: 3px double #fff;}
.flow > .first-li{padding: 40px 0 20px 0;}
.flow li{padding: 10px 0;}
.flow-title{font-size: 1.5em;border-bottom: 1px solid #fff;margin-bottom: 20px;padding-left: 10px;}
.flow-title span{font-size: 2em; padding-right: 15px;}
.flow-text,.flow-text02,.flow-text03{font-size: 1.2em;padding-bottom: 20px;text-indent: 1em;}
.flow-text02{width: 65%;float: left;}
.flow-text03{width: 40%;float: left;}
.flow-img{width: 35%;float: right;}
.flow-img02{width: 55%;float: right;}
.yajirushi{text-align: center;width: 100%;clear: both;}

/* price
------------------------------------------------------------*/
.price{width: 100%;max-width: 980px; margin: 80px auto 0 auto;color: #fff;}
.price > .line{border-bottom: 3px double #fff;}
.price-title{font-size: 1.5em;border-bottom: 1px solid #fff;margin: 40px 0 20px 0;padding: 0 0 10px;}
.price-text{font-size: 1.2em;}
.price-tb{border: 2px solid #fff;margin: 40px 0 0;}
.price-tb th,.price-tb td{font-size: 1.28em; padding: 10px;border: 1px solid #fff;}
.price-tb th{width: 40%;}
.price-tb td{width: 60%;text-align: right;font-weight: bold;}
.price-tb-kome{margin: 10px 0;}

/* button
------------------------------------------------------------*/
.btn-service{padding: 1px 10px 2px 10px;border: 1px solid #fff;font-size: 12px;letter-spacing: 0;border-radius:3px;float: right;margin-top: 20px;}
.bk-btn{width: 100%;text-align: center;margin: 100px auto 100px auto;}
.button{width: 25%;display: inline-block;text-align: center;height: 48px;line-height: 48px;background: #000;color: #fff;font-size: 1.2em;letter-spacing: 3px;margin: 0 5%;}
.button:hover{background-color: #333;color: #e1e1e1}

/* 20250123 */
.w-normal{font-weight: normal;}


@media (max-width: 519px) {

	/* header
	------------------------------------------------------------*/
	.catch{margin-left: 0;}
	#slider{width: 100%;}
	.header-manu,.header-manu li{padding: 0 .8em;}
	.header-manu li{line-height: 2em;}

	/* content
	------------------------------------------------------------*/
	.implant{padding: 0 5% 100px 5%;}
	.implant-box{width: 100%;height: auto; margin: -50px 0 0;}
	.implant-content{padding: 150px 5% 100px 5%;}
	.oral{padding: 0 5% 100px 5%}
	.oral-box{width: 100%;height: auto; margin: -50px 0}
	.oral-content{padding: 150px 5% 100px 5%;}

	.implant-feature li{width: 100%;padding:  10px 0;}
	.feature-img01,.feature-img02,.feature-img03,.feature-img04,.feature-img05,.feature-img06,.feature-img07,.feature-img08,.service-img01,.service-img02,.service-img03,.service-img04,.service-img05,.service-img06,.service-img07,.service-img08,.oral-img01,.oral-img02,.oral-img03,.oral-img04,.oral-img05,.oral-img06{width: 100%;background-size: 100% auto;}

	.implant-service,.oral-service{padding-top: 30px;}
	.implant-service li,.oral-service li{width: 100%;margin: 10px 0 30px 0;}

	.charge{padding: 0 5% 5%;}
	.charge li{padding: 0;width: 100%;}
	.dr-img img{width: 70%;padding-bottom: 20px;}

	.flow-title{font-size: 1.2em;padding: 0 0 10px 0;}
	.flow-title span{font-size: 1.4em;}
	.flow-text02,.flow-text03{width: 100%;float: none;}
	.flow-img,.flow-img02{width: 100%;float: none;}

	.price-tb th,.price-tb td{width: 100%;float: left;}
	.price-tb th{background-color: #51748D;}



	/* button
	------------------------------------------------------------*/
	.bk-btn{margin: 40px auto;}
	.button{width: 80%;margin-bottom: 20px}


}