@charset "utf-8";
/*
Theme Name: clovergroup.jp
Description: クローバー鍼灸接骨院
Author: ave(shikakudentatsu.com)
Version: 2.1
*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400&display=swap');


a{color:#5894AF;text-decoration:none;}
a:hover{color:#00696A;text-decoration:underline;}
a img{border:none;}
a:hover img{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter:"alpha( opacity=70 )";
}

h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
font-size:100%;
line-height:150%;
font-weight:normal;
}
p,form,
section,article,nav,
figure,figcaption{
margin:0;
padding:0;
}
p{
margin: 1em 0;
}
small{
display:block;
text-align:right;
}
address{font-style:normal;}

img{max-width: 100%;}
/* *{transition:0.4s;} */
html{scroll-behavior: smooth;}
body{
position:relative;
margin:0;
padding:0;
background:url(images/bg.jpg) fixed;
color:#333;
font-size:16px;
line-height:180%;
/*font-family:"Sawarabi Mincho","游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
font-family:'Zen Maru Gothic',"Sawarabi Gothic","Noto Sans JP","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.container{}

header{
margin: 5vh auto 3vh;
padding: 10px 0 0;
max-width: 1000px;
}
h1{
margin: 30px auto;
font-size: 300%;
line-height: 130%;
font-weight: bold;
text-align: center;
}
h2{
margin: 30px auto;
font-size: 200%;
line-height: 130%;
font-weight: bold;
text-align: center;
}
h3{
margin: 30px auto;
font-size: 200%;
line-height: 130%;
font-weight: bold;
text-align: center;
}

h4{
margin: 30px auto;
font-size: 150%;
line-height: 130%;
font-weight: bold;
text-align: center;
}

h5{
margin: 30px auto;
font-size: 100%;
line-height: 130%;
font-weight: bold;
text-align: center;
}

h6{
margin: 30px auto;
font-size: 150%;
line-height: 130%;
font-weight: bold;
text-align: center;
}


.logo1 img{
display: inline-block;
margin: 0 10px 0 0;
width: 100px;
max-width: 10vw;
vertical-align: middle;
}
h1{
font-size: 180%;
line-height: 130%;
}


header h2{
float: left;
width: 50%;
margin: auto;
padding:0 0 0 5vw;
font-size: 100%;
text-align: left;
}
header h2 img{
width: 50px;
vertical-align: middle;
}
header h1{
margin-top: 0;
}
header h3{
float: right;
margin: 0 5vw 0 0;
padding: 0;
width: 35%;
font-size: 130%;
line-height: 130%;
text-align: right;
}
header h3 a{
padding: 0 5px 10px;
color: #000;
text-decoration: none;
background: url(images/line01.png) center bottom no-repeat;
background-size: 100% auto;
}
header h3 a:hover{
color: #000;
text-decoration: none;
background: url(images/line01.png) center bottom no-repeat;
background-size: 100% auto;
}
header h3 img{
display: inline;
max-width: 70%;
vertical-align: text-bottom;
}

.catch{
display: inline;
padding: 0 0 10px 0;
line-height: 180%;
background: url(images/bg_line01.png) left bottom no-repeat;
background-size: 100% auto;
}
section{
margin:30px auto 80px;
padding: 0 0 10vw;
max-width: 1000px;
background: rgba(255,255,255,0.5)  url(images/deco_line.png) center bottom no-repeat;
background-size: 90% auto;
}

article{
margin: 50px auto;
padding: 0 5vw;
text-align: center;
}
article:last-child{
margin-bottom: 100px;
}

.nav1{
display: table;
margin: 20px auto;
padding: 20px 10vw;
text-align: left;
background: url(images/bg_box01.png) center center no-repeat;
background-size:100% 100%; 
}
.nav1 a{
display: flex;
align-items :center;
padding: 10px 0 10px;
line-height: 150%;
}
.nav1 a::before{
display: inline-block;
height: 50px;
width: 50px;
content: '　';
background: url(images/deco_ito1.png) left center no-repeat;
background-size: auto 100%;
text-decoration: none;
}
a[target="_blank"]::after{
display: inline-block;
margin-left: 5px;
content: '　';
background: url(images/ico_exp.png) center center no-repeat;
background-size:100% auto; 
}
a[href$=".pdf"]::after{
display: inline-block;
margin-left: 5px;
content: '　';
background: url(images/ico_pdf.png) center center no-repeat;
background-size:100% auto;
}
.nav1 h4{
margin: 10px auto 20px;
font-size: 150%;
font-weight: bold;
text-align: center;
}

.pgbtm{margin:50px auto 200px;}

.nav2{
margin: 20px auto;
padding: 10px;
background: #FCFCFC;
text-align: center;
}


.nav2 a{
display: inline-block;
margin:0 5px;
padding: 10px 10px 10px 25px;
font-size: 150%;
line-height: 100%;
letter-spacing: 5px;
font-weight: bold;
color:#666;
background: url(images/ico_arw_r.svg) left center no-repeat;
background-size: auto 40%;
}
.nav2 a:hover{color: #000;}
.nav2 a:hover::before{
text-decoration: none;
}

.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all  0.7s ease;
	max-width: 100%;
}
.googlemaps iframe:hover,
.googlemaps object:hover,
.googlemaps embed:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
}


figure{}
.prof figure{
display: flex;
justify-content:center;
margin: auto;
text-align: center;
width: 520px;
max-width: 80vw;
}
.prof img{
max-width:100px; 
margin: 0 15px 30px 0;
/*margin: 0 5% 0 0;
max-width: 300px;
align-self:baseline;
*/
}
.prof figcaption{
text-align: left;
width: 340px;
/*flex-basis: 40%;*/
}
.prof h4{
margin: 0 0 5px 0;
font-size: 140%;
font-weight: bold;
letter-spacing: 2px;
text-align: left;
padding: 20px;
}
.prof{
}
.prof details summary{
background: none;
padding:0;
}
.prof details[open] summary{
background:none;
}


.dl01{
display: table;
margin: auto;
text-align: left;
width: auto;}
.dl01 dl{
display: table-row;
margin: auto;
padding: 0;
}
.dl01 dl:nth-child(2n+1){
background: #FAFAFA;
}
.dl01 dt,.dl01 dd{
display: table-cell;
margin: 0;
padding: 10px 10px;
vertical-align: middle;
word-break:break-all;
}
.dl01 .ico{
height: 30px;
vertical-align: middle;
max-width: fit-content;
}

ul.ul01{
display: flex;
justify-content:center;
margin: 0 auto 20px;
padding: 0;
list-style: none;
}
ul.ul01 li{
display: inline-block;
margin:0 20px;
padding: 0;
text-align: left;
}

ul.ul02{
display: table;
margin:30px auto;
padding: 0;
list-style: none;
text-align: left;
font-size: 85%;
line-height: 150%;
color: #666;
}
ul.ul02 li{
display: block;
margin: 0;
padding: 0 0 3px 1em;
text-indent: -1em;
list-style: none;
}
ul.ul02 li::before{
content: '※';	
}
ul.ul02 + h4{
margin-top: 50px;
}
details{
margin: 30px 0;
transition: 0.5s;
}

details summary{
display: inline-block;
margin: 0;
padding: 0 0 0 40px;
list-style: none;
background: url(images/deco_ito1.png) left center no-repeat;
cursor: pointer;
}
details[open] summary{
background: url(images/deco_ito2.png) left center no-repeat;
}

details#a0102 summary{
padding-left: 120px;
background: url(images/deco_jiko.png) left center no-repeat;
background-size: 120px auto;
}
details#a0103 summary,
details#a0105 summary{
padding-left: 100px;
background: url(images/deco_sejyutsu.png) left center no-repeat;
background-size: 100px auto;
}
details#a0104 summary{
padding-left: 100px;
background: url(images/deco_car.png) left center no-repeat;
background: url(images/deco_car.png) left center no-repeat;
background-size: 80px auto;
}
details#a0104[open] summary{
}
summary h3,
summary h4{
display: inline-block;
margin-bottom: 10px;
padding:25px;
background: url(images/bg_title01.png) left center no-repeat;
background-size: 100% 100%;
text-decoration: underline;
}
details[open] summary h3,
details[open] summary h4{
text-decoration: none;
}


footer{
position: fixed;
bottom: 0px;
left: 0;
right: 0;
margin: 0 auto;
padding: 5px 0; 
font-size: 80%;
line-height: 150%;
text-align: left;
background: rgba(255,255,255,0.9);
box-shadow: 0px -2px 4px rgba(0,0,0,0.1); 
}
footer address{
margin: 0 auto 5px;
padding: 0 0 0 10px;
}
footer address h6{
margin: 0;
font-size: 90%;
line-height: 120%;
font-weight: normal;
}
footer address h5{
margin: 5px 0;
font-size: 110%;
line-height: 120%;
}
p.copyright{
margin: 0;
padding: 0;
font-size: 80%;
line-height: 100%;
text-align: center;
}
footer a{
position: fixed;
right: 5px;
bottom: 0px;
width: 40px;
height: 50px;
}
footer a:nth-last-child(2){right: 53px;}
footer a:nth-last-child(3){right: 100px;}
footer a:nth-last-child(4){right: 153px;}

footer a[target="_blank"]::after{display: none;}

#a02cp{
max-width: 1000px;
}
/*
整体
*/
/*
body.seitai{background:url(images/bg2.jpg) fixed;}
.seitai section{
background: rgba(255,255,255,0.5)  url(images/deco_line2.png) center bottom no-repeat;
background-size: 90% auto;
}
.seitai .nav2{background: #EEF6FC;}

ul.ul03{
display: flex;
justify-content:space-around;
align-items:center;
flex-wrap:wrap;
margin: 30px auto;
padding: 0;
}
ul.ul03 li{
display: inline-block;
align-self :stretch;
flex-basis: calc((50% - 50px));
margin: 5px;
padding: 20px 0;
font-size: 300%;
line-height: 100%;
letter-spacing: 2px;
vertical-align:middle;
color: #FFF;
text-shadow: 1px 1px 5px rgba(0,70,20,1);
background: url(images/seitaibg01.png) center center no-repeat;
background-size: 100% 100%;
}
*/


/*
スマホ
*/
@media screen and ( max-width:768px) {
body{
font-size: 14px;
line-height: 150%;
}

header h3{
position: absolute;
top: -40px;
right: 0;
padding: 10px;
margin: 0;
width: 60%;
font-size: 80%;
line-height: 100%;
text-align: right;
}
header h3 img{
max-width: 60%;
}
header h2{
clear: both;
float: none;
width: auto;
margin: 10px auto;
}


h3{
font-size: 130%;
line-height: 150%;
}
h4{
font-size: 110%;
line-height: 150%;
}

.nav2 a{display: inline-block;}

ul.ul01{flex-direction:column;}
ul.ul01 li{margin: 10px auto;}

footer address h6,
footer address h5,
p.copyright{text-align: left;}

}