/*
Author: PrankPlan
Author URI: https://prankplan.jp
Description: タカシマ歯科 LP
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
body{-webkit-text-size-adjust: 100%;}
html{
	color: #484848;
	font-size: 16px;
	font-weight: normal;
	font-family: Meiryo, arial, clean, verdana, "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, sans-serif;
	line-height: 1.5;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}
#wrapper{
	width: 100%;
	height: 100%;
}
.section{
	position: relative;
}
.container{
	width: 100%;
	height: auto;
	padding: 0 20px;
}
img{vertical-align: bottom;}
.pc_only{display: none;}
img{width: 100%;}
.clear{clear:both;}
/* --------------------- font --------------------- */
.cta_box,
h2,
h3,
h4,
.price caption,
.access_box a,
.fcta_container{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* --------------------- font --------------------- */
/* --------------------- color --------------------- */
.gold_dark{color:#a5944e;}
.gold{color:#ac9817;}
.gold_light{color:#d2c870;}
.gold_gradation{
	color: #d2c870;
	position: relative;
	z-index: 1;
}
.gold_gradation::before{
	vertical-align: middle;
	z-index: 10;
	position: absolute;
	top: -10px;
	left: 0;
	display: inline-block;
	color: #a5944e;
	-webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,1) 23%,rgba(0,0,0,0) 47%, rgba(0,0,0,0) 53%, rgba(0,0,0,1) 77%,rgba(0,0,0,1));
	mask-image:linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,1) 23%,rgba(0,0,0,0) 47%, rgba(0,0,0,0) 53%, rgba(0,0,0,1) 77%,rgba(0,0,0,1));
}
#second .gold_gradation.one::before{content: '追加料金は一切ありません';top:-6px;}
#second .gold_gradation.two::before{content: '10年無料保証';top:-10px;left:-0.1px;}
#third .gold_gradation.one::before{content: '6';top: -20px;}
#third .gold_gradation.two::before{content: 'つのコンセプト';top: -10px;}
#fourth .gold_gradation::before{content: '治療の流れ';}
#fifth .gold_gradation::before{content: '院長紹介';}
#sixth .gold_gradation::before{content: '医院のご案内';}
/* --------------------- color --------------------- */
h2{
	text-align: center;
}
/* --------------------------------------- header --------------------------------------- */
header{
	width: 100%;
	height: 100%;
	background: #f5f2eb;
}
.header_box{
	padding: 15px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header_box h1{
	margin-right: 10px;
}
.header_box h1 img{
	width: 175px; 
	height:auto;
}
.cta_box a{
	color: #fff;
	display: block;
}
.cta_box{
	background: linear-gradient(45deg ,#a5944e, #b9ab36, #a5944e);
	color: #fff;
	padding:5px;
	margin-bottom: 5px;
}
.cta_outer{
	text-align: center;
	padding: 2px 6px 2px;
	border: 1px solid #fff;
}
.cta_inner{
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cta_inner span{
	font-size: 12px;
}
.cta_inner i{
	font-size: 30px;
	vertical-align: middle;
	margin-right: 5px;
}
/* --------------------------------------- header --------------------------------------- */

/* --------------------------------------- first --------------------------------------- */
#first{
	border-top: 2px solid #fff;
}
#first img{
	width: 100%;
	height: auto;
}
/* --------------------------------------- first --------------------------------------- */

/* --------------------------------------- second --------------------------------------- */
#second{
	padding: 60px 0;
}
#second h2{
	font-size: 20px;
	margin-bottom: 20px;
	font-weight: bold;
}
#second h2 span.one{
	font-size: 26px;
	font-weight: bold;
	vertical-align: -6px;
}
table.price{
	width: 100%;
	margin-bottom: 20px;
}
.price caption{
	font-size: 18px;
	text-align: center;
	margin-bottom: 20px;
}
.price th,
.price td{
	border: 1px solid #f5f2eb;
	text-align: center;
	padding: 10px 0;
	width: 25%;
}
.price th{
	background: #a59a67;
	font-weight: bold;
	color: #fff;
	font-size: 12px;
}
.price th img{
	width: 40px;
}
.price td{
	border: 1px solid #f5f2eb;
	border-bottom: none;
}
.price td img{
	width: 80px;
}
.price_inner td{
	background: rgb(245, 242, 235);
	border-right: 1px solid #fff;
	border-top: none;
	font-size: 10px;
}
.price_inner td:last-of-type{
	border-right: 2px solid #f5f2eb;
}
.price_item{
	font-weight: bold;
	color: #900;
	font-size: 14px;
}
.price_number{
	font-size: 22px;
}
.careful{
	font-size: 11.3px;
	text-align: justify;
}
.security{
	padding-top: 40px;
}
#second h2 span.two{
	font-size: 40px;
	font-weight: bold;
	vertical-align: -2px;
}
.security p{
	font-size: 14px;
	text-align: justify;
}
.security img{
	height: auto;
	margin: 20px 0 0;
}
.guarantee{
	padding-top: 40px;
}
.guarantee h2{
	font-size: 18px;
}
.guarantee_inner{
	display: flex;
	justify-content: center;
	align-items: center;
}
.guarantee_img1{
	width: 100px;
	margin-right: 50px;
}
.guarantee_img2{
	width: 80px;
}
/* --------------------------------------- second --------------------------------------- */

/* --------------------------------------- third --------------------------------------- */
#third{
	padding: 30px 0 60px;
	background-blend-mode: screen ;
	background-color: rgba(239, 239, 239, .6);
}
#third h2{
	font-size: 22px;
	vertical-align: middle;
	padding: 20px 0 0;
	font-weight: bold;
}
#third h2 span{
	vertical-align: middle;
}
#third h2 span.one{
	font-size: 80px;
	font-weight: bold;
	vertical-align: -15px;
}
#third h2 span.two{
	font-size: 40px;
	font-weight: bold;
	vertical-align: -7px;
}
#third .container > p{
	margin: 0 auto 30px;
	text-align: justify;
}
.concept_box{
	background: #f0ebdf;
	padding: 10px;
	width:  100%;
	margin-bottom:30px; 
}
.concept_outer{
	border: 1px solid #fff;
	padding: 10px;
	overflow: hidden;
}
.concept_img{
	float: left;
	width: 100%;
}
.concept_img img{
	width: 100%;
}
.concept_inner{
	float: right;
	width: 100%;
	height: auto;
	text-align: justify;
	padding: 5px;
}
.concept_inner h3{
	font-size: 20px;
	text-align: center;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #a5944e;
}
.concept_inner p{
	font-size: 14px;
	height: auto;
	line-height: 1.5;
}
/* --------------------------------------- third --------------------------------------- */

/* --------------------------------------- fourth --------------------------------------- */
#fourth{
	background: #f5f2eb;
	padding: 60px 0;
}
#fourth h2{
	font-weight: bold;
	font-size: 40px;
}
.flow_inner{
	margin-bottom: 15px;
}
.flow_inner h3{
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
.small{
	font-size: 16px;
}
.open_btn{
	width: 50px;
	height: auto;
	background: #a5944e;
	border-radius: 20px;
	padding: 8px;
	color: #fff;
	font-size: 14px;
	transition: .3s all;
}
.open_btn.active{
	color: #777;
	background: #d2c870;
}
.flow_inner p{
	margin-top: 15px;
	font-size: 16px;
	display: none;
}
.flow_box,
.flow_box2{
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	margin: 30px 0;
}
.flow_outer{
	position: relative;
	margin: 0 auto;
	z-index: 10;
	text-align: justify;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.flow_inner p{
	font-size: 16px;
}
/* --------------------------------------- fourth --------------------------------------- */

/* --------------------------------------- fifth --------------------------------------- */
#fifth{
	padding: 60px 0;
}
#fifth h2{
	font-weight: bold;
	font-size: 40px;
	margin-bottom: 40px;
}
#fifth h3{
	font-size: 26px;
	margin: 40px 0 20px;
}
#fifth h4{
	font-size: 22px;
	margin: 20px 0 15px;
	font-weight: bold;
}
.awardwrap_left > img{
	width: 100%;
	margin-bottom: 30px;
}
.awardwrap_left > p{
	margin-bottom: 15px;
	line-height: 1.75;
	text-align: justify;
}
.awardwrap_left table tr *{
	padding: 10px 0px 10px 0;
}
.awardwrap_left table th{
	width: 90px;
}
.award_box img,
.award_box2 img{
	border: 1px solid #a5944e;
}

.award_box img{
	width: 32.2%;
	margin-bottom: 10px;
	padding: 0;
}
.award_box img{
	margin-bottom: 26px;
}
.award_inner{
	width: 65.4%;
	display: inline-block;
	height: auto;
	margin-bottom: 36px;
}
.award_inner img{
	width: 48.7%;
}
.award_inner img:nth-child(odd){
	margin-right: 0;
}
.awardwrap_right > p{
	font-size: 14px;
	text-align: justify;
	margin: 30px 0 26px;
}
.award_box2 img{
	width: 49.2%;
	margin: 26px 0;
}


/* --------------------------------------- fifth --------------------------------------- */

/* --------------------------------------- sixth --------------------------------------- */
#sixth{
	background: #f5f2eb;
	padding: 60px 0;
}
#sixth h2{
	font-weight: bold;
	font-size: 40px;
	margin-bottom: 40px;
}
.map{
	width: 100%;
	height: 360px;
	margin-bottom: 20px;
}
.map iframe{
	height: 300px;
}
#sixth h3{
	font-size: 26px;
	margin: 10px 0;
	font-weight: bold;
}
.panorama_wrap{
	margin-bottom: 30px;
	position: relative;
}
.panorama_wrap p{
	font-size: 14px;
	margin-bottom: 20px;
}
.panorama_wrap iframe{
	width: 100%;
	height: 300px;
	vertical-align: bottom;
	pointer-events: none;
}
.ifr_inner{
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 250px;
	height: 150px;
}
.access_box a{
	margin: 20px 0 30px;
	display: block;
	width: 100%;
	height: 50px;
	background: linear-gradient(45deg ,#a5944e, #b9ab36, #a5944e);
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 38px;
	padding:5px;
	transition: .3s all;
}
.access_box a span{
	display: block;
	border: 1px solid #fff;
	padding-left: 25px;
}
.about th{
	padding: 10px 0 0;
	width:  80px;
}
.about td{
	padding: 10px 0 0;
}
.about a{
	color: #a5944e;
	font-weight: bold;
}
.hours table{
	border: 1px solid #f5f2eb !important;
	width: 100%;
}
.hours th{
	padding: 10px 0px;
	font-weight: bold;
	text-align: center;
}
.hours td{
	padding: 10px 4px;
	text-align: center;
}
.hours thead th{
	border-left: 1px solid #a59a67;
	background: #a59a67;
	border-top: 1px solid #a59a67;
	border-bottom: 1px solid #a59a67;
	color: #fff;
}
.hours thead td{
	color: #fff;
	background: #a59a67;
	text-align: center;
	font-weight: bold;
	border-top: 1px solid #a59a67;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #a59a67;
	border-left: 1px solid #fff;
}
.hours thead td:last-child{
	border-right: 1px solid #a59a67;
}
.hours tbody th {
	background: #fff;
	border: 1px solid #f5f2eb;
	border-left: 1px solid #fff;
	font-weight: normal;
}
.hours tbody td {
	background: #fff;
	border: 1px solid #f5f2eb;
}
.hours tbody td:last-child{
	border-right: 1px solid #fff;
}
.hours > p{
	font-size: 14px ;
	margin-top: 10px;
}
/* --------------------------------------- sixth --------------------------------------- */

/* --------------------------------------- footer --------------------------------------- */
footer{
	padding: 60px 0;
	text-align: center;
}
.fcta_wrap{
	background: linear-gradient(45deg ,#a5944e, #d2c870, #a5944e);
	color: #fff;
	padding: 10px;
	margin:0 auto;
	width: 100%;
}
.fcta_container{
	border: 1px solid #fff;
	padding: 20px 10px;
}
.fcta_container h2{
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 1px;
	text-shadow: 1px 1px 2px #484848,-1px -1px 2px #484848,-1px 1px 2px #484848,1px -1px 2px #484848;
}
.fcta_container > p{
	margin-bottom: 20px;
}
.fcta_inner1 h3{
	font-size: 26px;
	font-weight: bold;
}

.fcta_inner2{
	margin-top: 15px;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 1px;
	text-shadow: 1px 1px 2px #666,-1px -1px 2px #666,-1px 1px 2px #666,1px -1px 2px #666;
}
.fcta_inner2 i{
	font-size: 30px;
}
footer > .container > p{
	margin-top:  50px;
	font-size: 14px;
}
/* --------------------------------------- footer --------------------------------------- */

@media screen and (max-width: 350px) {
header .container{
	padding: 0 5px;
}
.header_box h1 img{
	width: 150px;
}
#second .gold_gradation.one{color:#a5944e;}
#second .gold_gradation.one::before{content: '';top: -10px;}
#second .gold_gradation.two{color:#a5944e;}
#second .gold_gradation.two::before{content: '';top: -10px;left:-5px;}
#third .gold_gradation.two::before{content: '';top: -10px;}
table.price{
	margin-left: -10px;
}
#second h2{
	font-size: 16px;
}
#second h2 span.one{
	font-size: 20px;
}
#second h2 span.two{
	font-size: 36px;
}
#third h2{
	font-size: 18px;
}
#third h2 span.one{
	font-size: 60px;
}
#third .gold_gradation.one::before{top: -15px;}
#third h2 span.two{
	font-size: 32px;
}
.concept_inner h3{
	font-size: 18px;
}
#fifth h4{
	font-size: 20px;
}
#sixth h3{
	font-size: 22px;
}
.fcta_container h2{
	font-size: 30px;
}
.fcta_inner1 h3{
	font-size: 20px;
}
.fcta_inner1 p{
	font-size: 14px;
}
.fcta_inner2{
	font-size: 26px;
}
}