@charset "UTF-8";

/*共通
---------------------------------------------------------------------------*/
:root {
--themecolor: #f9be00;
--maincolor: #333333;
--bgcolor: #f7f4ef;
}

/* link
/* ------------------------------------- */
a {
transition: 0.5s;
}
a:hover {
opacity: 0.5;
}

#main img {
border: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
}

/*全体見出し
---------------------------------------------------------------------------*/
.section-title-f{
text-align:center;
font-size: 140%;
font-weight: normal;
line-height: 1.2;
margin: 0 0 20px 0;
white-space: nowrap;
padding: 0
}
.section-title-f span{
font-size: .5em;
display: block;
letter-spacing:.05em;
color: var(--themecolor);
padding-bottom: 10px
}
@media screen and (min-width: 1024px) {
.section-title-f{
font-size: 160%;
}
}

/* more ボタン */
.more_box0{
margin: 40px 0;
}
.more_box0 a{
display: inline-flex;
align-items: center;
gap: 15px;
color: var(--themecolor);
text-decoration: none;
font-size: 0.8em;
letter-spacing: .1em;
font-weight: 400;
}
.more_box0 a::after{
content: "→";
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background: var(--themecolor);
color: #fff;
border-radius: 50%;
font-size: 1em;
transition: .3s;
}
.more_box0 a:hover{
opacity: 1;
}
.more_box0 a:hover::after{
transform: translateX(5px);
}
.more_box0.center{
text-align: center;
}



/*画像
---------------------------------------------------------------------------*/
.slide_box{
width: 100%;
height: auto;
margin: 0 0 30px 0
}
.gazou:after{
content: "";
display: block;
clear: both}
.gazou {
display: flex;
justify-content: space-between;
padding: 0;
margin: auto;
position:relative;
}
.outside-right img,
#metaslider-id-20 img{
width: 100%;
height: 380px;
object-fit: cover;
border-radius:50px 0 0 50px;
}
.outside-right{
margin-right: calc(50% - 50vw);
margin-left: 20%;
}
.s-badge{
position: absolute;
top: 40px;
left: 20px;
/* 縦書きの指定（右から左） */
writing-mode: vertical-rl;
text-combine-upright: none;
font-size: 16px;
line-height: 1.8;
letter-spacing: 0.1em;
height: max-content;
text-align: start;
}
.s-badge .highlight {
color: var(--themecolor);
}
@media screen and (min-width: 600px) {
.outside-right{margin-left: 25%;
}
}
@media screen and (min-width: 768px) {
.outside-right{
margin-left: 15%;
}
.outside-right img,
#metaslider-id-20 img{
height: auto
}
.s-badge{
top: 20%;
left: 30px;
transform: translateY(-20%);
font-size: 20px;
}
}
@media screen and (min-width: 1024px) {
.gazou {
max-width: 1000px;
}
.s-badge{
font-size: 25px;
letter-spacing: 0.2em;
}
}
@media screen and (min-width: 1540px) {
.gazou {
max-width: 1100px;
}
.s-badge{
left: -80px;
font-size: 30px;
}
.outside-right{
margin-right: 0;
margin-left: 5%;
}
.outside-right img,
#metaslider-id-20 img{
width: 100%;
height: 700px;
object-fit: cover;
border-radius:50px;
}
}

/* message
---------------------------------------------------------------------------*/
.message section{
display: block;
max-width: 100%;
padding: 30px 0;
margin: auto;
}
.message_i{
width: 100%;
}
.message_i img{
width: 100%;
height: auto
}
.message_t {
width: 100%;
box-sizing: border-box;
padding: 6%;
position: relative;
}
.message_t .message_p {
margin: 10px 0 0 0;
}
.message h4 {
color: var(--maincolor);
font-size: 140%;
line-height:1.8em;
font-weight: normal;
margin: 0 auto;
text-align: left
}
.message h4 span{
font-size: .6em;
line-height:3em;
display: block;
letter-spacing:.05em;
color: var(--themecolor);
}
.message_p {
margin: 4% 0 6% 0;
text-align: justify;
line-height: 2.2em;
}
.message:after{content: "";
display: block;
clear: both
}
/* 右画像　*/
.message_right{
position: absolute;
right: -80px;
bottom: 0;
width: 45%;
z-index: -100
}
.message_right img{
width: 100%;
height: auto;
object-fit: cover;
border-radius: 30px 0 0 30px;
}

@media screen and (min-width: 768px) {
.message h4 {
font-size: 160%;
line-height:1.8em;
}
.message_p {
line-height:2.2em;
margin: 15px 0 30px 0;
}
}
@media screen and (min-width: 1024px) {
.message section{
padding: 60px 0;
}
.message_i {
width: 50%;
float: left;
}
.message_i img{
border-radius:0 50px 50px 0;
width: 100%;
height: auto
}
.message_t {
width: 45%;
float: right;
padding: 0 10% 0 0;
}
.message_p {
line-height:2.2em;
margin: 0 0 40px 0;
}
/* 右画像　*/
.message_right{
width: 25%;
}
}


/* treatment
---------------------------------------------------------------------------*/
.treatment_bg {
max-width: 90%;
margin: 30px auto;
text-align: left;
box-sizing: border-box;
margin-inline: auto;
}
.item_inner {
background-color: var(--bgcolor);
margin-right: calc(50% - 50vw);
padding-right: calc(50vw - 50%);
border-radius:50px 0 0 50px;
overflow:hidden;
}
.treatment_boxA{
padding: 30px 0 30px 30px;
box-sizing: border-box;
}
.treatment_boxA:after{
content: "";
display: block;
clear: both}
.boxC img{border-radius:50px}

.treatment_bg h4{
font-size: 140%;
font-weight: normal;
line-height: 1.2;
margin: 0 0 30px 0;
}
.treatment_bg h4 span{
font-size: .6em;
vertical-align: 5px;
}
.treatment{
font-size: .7em;
display: block;
letter-spacing:.05em;
color: var(--themecolor);
padding-bottom: 10px
}

@media screen and (min-width: 768px) {
.boxB{float: left;width: 40%;}
.boxC{float: right;width: 55%;
}
}
@media (max-width:767px){
.boxB{margin-bottom: 5%
}
}
@media screen and (min-width: 1024px) {
.treatment_bg {
max-width: 1000px;
margin: 60px auto;
}
.treatment_boxA{
padding: 50px 0 50px 100px;
}
.treatment_bg h4{
font-size: 160%;
line-height: 1.4;
}
}


/* info
---------------------------------------------------------------------------*/
.info_bg {
padding: 10% 0;
text-align: center;
}
@media screen and (min-width: 768px) {
.info_bg {
padding: 0 0 60px 0;
}
.news_list {
width: 750px;
}
}

/* map・お問い合わせ
---------------------------------------------------------------------------*/
.map_box {
display: flex;
margin-bottom: 60px;
flex-direction: column;
}
.map_box h3{
text-align:left;
font-size: 110%;
line-height: 1.5;
font-weight: bold;
margin-bottom: 10px;
}
.map_box p{
font-weight: normal;
line-height: 2.5;
}
.column {
height: auto;
width: 100%;
text-align: left;
display: flex;
align-items: stretch;
}
.flex_toiawase {
display: flex;
flex-wrap: wrap;
text-align: center;
margin-bottom: 20px;
margin-top:20px;
}

.flex-item {
width: calc((100% - 3%) / 2);
height: auto;
margin-right: 3%;
font-size: 100%;
color: #fff;
text-align: center
}

.flex-item:nth-child(2n) {
margin-right: 0;
}

.flex-item a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin:0 auto;
padding: .9em 0;
border: none;
border-radius: 100vh;
font-weight:normal;
font-size: .9em;
text-decoration:none;
color: #333;
}
.flex-item.yoyaku a{
background: var(--themecolor);
}
.flex-item.toi a{
background: #ffe560;
}

@media screen and (min-width: 768px) {
.map_box {
display: flex;
flex-direction: row;
gap: 30px;
}
.column {
flex: 1; /* 2つを均等幅に */
}
.flex-item a{
font-size: 1em;
}
}


@media screen and (max-width: 767px) {
  /* スマホ */
}
@media screen and (min-width: 768px) {
  /* タブレット以上 */
}