@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
body{
    font-family: 'Zen Maru Gothic',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*
#page-top{
    position:absolute;
}
*/

/*--all page---------------------------
-------------------------------------*/

.linkStyle{
    color:#bf9d74;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

body{
    overflow:hidden;
    font-size:18px;
}
header{
    z-index:10;
}

#nav_menu{
    z-index:997;
}

.main_wrap{
    z-index:10;
}

.menu .nav ul li{
    border-left:0;
}

.bottom_menu{
    margin-left:20px;
}
.bottom_menu li a{
    font-size:17px;
}
.sns_links li {
    max-width: 35px;
}

#footer .svg_box{
    display:none;
}
#footer p{
    color:#333!important;
}

/*--top page---------------------------
-------------------------------------*/

.main_img_wrap .navi{
    display:none;
}


.catch {
    width:45vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#contents{
    background-image:url(./Dup/img/bg1.png),url(./Dup/img/bg2.png),url(./Dup/img/bg3.png);
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-size:30%,32%,13%;
    background-position:top left,bottom left,top 50% right;
}

#contents .box{
    position:relative;
}
#contents .box:before{
    content: '';
    position: absolute;
    display: block;
    z-index: 2;
}
/*
#contents .box1:before {
    width: 130px;
    height: 130px;
    background: url(./Dup/img/dog1.png) no-repeat;
    background-size: contain;
    background-position: bottom;
    bottom: -20px;
    right: 5%;
}
#contents .box2:before {
    width: 130px;
    height: 130px;
    background: url(./Dup/img/dog2.png) no-repeat;
    background-size: contain;
    background-position: bottom;
    bottom: -20px;
    left: 40%;
}
#contents .box3:before {
    width: 250px;
    height: 170px;
    background: url(./Dup/img/dog3.png) no-repeat;
    background-size: contain;
    bottom: -20px;
    left: 13%;
}
*/
#video{
    margin-top:150px;
}
#video .video{
    border-radius: 10px;
}

.concept_title,
.review_title,
.dental_title{
    font-size:4.5rem;
}
.t_cms_img1 img,.t_cms_img2 img,.t_cms_img3 img{
    border-radius:10px;
}

/*modal*/
.modal_wrap{
	top: 0;
	left: 0;
	opacity: 0.95;
	z-index: 999;
}
.modal_wrap .modal_scroll{
	overflow-y: auto;
}
.modal_wrap .close_bt{
	top: 20px;
	right: 20px;
	cursor: pointer
}

/*-----TOP CMS-----*/
.cms_title{
    position:relative;
}
.cms_title:before {
    content: '';
    position: absolute;
    display: block;
    width: 85px;
    height: 85px;
    background: url(./Dup/img/item1.png) no-repeat;
    background-size: contain;
    top: -24px;
    left: -42px;
    z-index: 0;
}

/*guide*/
.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 86px;
	/*color: #ebebeb;*/
	left: 0;
	top: -70px;
	z-index: -1;
}
#top_cms .flow_type3 .box_title1::before{
    color: #f6f5ee;
}
.flow_type3 .cate_box:nth-child(n + 10) .box_title1::before{
    content: ""counter(box);
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}



/*--under page---------------------------
-------------------------------------*/
.all_page{
    background:url(./Dup/img/bg4.png) no-repeat;
    background-position:bottom left;
    background-size:30%;
    background-color: #f6f5ee;
}
.all_page:before{
    display:none;
}

#page_title{
    margin-top:100px;
}
.page4 #page_title{
    margin-top:0;
}


/*guide page*/
.cate_img1{
    height: 500px;
    overflow: hidden;
    position: relative;
}
.cate_img1 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.cms_wrap .flow_type3 .box_title1::before{
    color:#fff;
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){

header .logo{
    width:18%;
}

.catch {
    width: 75vw;
}

.main_wrap {
    z-index: 9;
}

#contents{
    background-size: 50%,48%,21%;
    background-position: top left,bottom left,top 64% right;
}
#contents .box2:before {
    width: 110px;
    height: 110px;
    bottom: -88px;
    left: 30%;
}
#contents .box3:before {
    width: 250px;
    height: 150px;
    bottom: -55px;
    left: -1%;
}

#video{
    margin-top:50px;
}

.cms_title:before{
    left: -36px;
}

.all_header{
    background-color: #f6f5ee;
}
.all_page{
    background-size: 38%;
}
#page_title{
    padding-top:50px;
    margin-top:0;
}
.page4 #page_title{
    height: 270px;
}
#title_img{
    position:relative;
}
#title_img:after{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.3);
    top:0;
    left:0;
}

.cate_img1 {
    height: 300px;
}



}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){

body{
    font-size:16px;
}

.catch {
    width: 90vw;
}

.concept_title, .review_title, .dental_title {
    font-size: 3.2rem;
}

#contents{
    padding-bottom: 100px;
}
#contents .box h3{
    font-size:1.2rem;
}
#contents .box1:before {
    width: 80px;
    height: 80px;
}
#contents .box2:before {
    width: 75px;
    height: 75px;
    bottom: -50px;
    left: 15%;
}
#contents .box3:before {
    width: 200px;
    height: 100px;
}

#video{
    margin-top:30px;
}

.cms_title:before {
    left: -18px;
    width: 65px;
    height: 65px;
}

.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}

.all_page {
    background-size: 54%;
}
#page_title .img-container::after{
    background-color: rgba(255,255,255,0.4);
}
.page4 #page_title {
    height: 170px;
    padding-top: 20px;
}


.cate_img1 {
    height: 230px;
}

}