@charset "UTF-8";

/* specialist.html page-specific styles */
body.specialist-page{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:#111}
.sp-serif{font-family:"Sterling Display","Times New Roman",serif;font-weight:400}
.sp-pillars{padding-bottom:120px}
.sp-pillar{max-width:800px;margin:0 auto 110px}
.sp-pillar>img{display:block;width:78%;margin:auto;border-radius:24px}
.sp-pillar h2{margin:35px 0;text-align:center;font-family:"Yu Mincho",serif;font-size:30px;line-height:1.45}
.sp-list{list-style:none;padding:0;counter-reset:item}
.sp-list li{display:grid;grid-template-columns:55px 1fr;gap:10px;margin:30px 0;font-size:var(--fs-body);line-height:1.7;counter-increment:item}
.sp-list li:before{content:counter(item) ".";font-family:"Sterling Display","Times New Roman",serif;font-size:54px;line-height:1}
.sp-pros{padding:110px 0;background:linear-gradient(145deg,#88aec9,#fff 35%)}
.sp-pros>div>header{text-align:center}

.sp-pros header p{font-family:"Yu Mincho",serif;font-size:27px}
.sp-pros header:after,.sp-workshop h2:after{content:"";display:block;width:82%;height:1px;margin:30px auto 45px;background:#28669a}
.sp-pros__lead{font-size:var(--fs-body);line-height:1.8}
.sp-role{display:inline-block;margin:55px 0 35px;padding:16px 60px;border:1px solid;font-family:"Yu Mincho",serif;font-size:25px}
.sp-profile{margin-bottom:85px}
.sp-profile h3{padding-bottom:10px;border-bottom:1px solid;font-family:"Yu Mincho",serif;font-size:27px}
.sp-profile h3 strong{float:right}
.sp-profile__license{color:#37689c;font-family:"Yu Mincho",serif;font-size:21px;line-height:1.7}
.sp-profile img{width:100%;margin:28px 0;border-radius:22px}
.sp-profile p{font-size:var(--fs-body);line-height:1.75}
.sp-workshop{padding:110px 0 0;background:linear-gradient(145deg,#f5f1e5,#fff 42%)}
.sp-workshop h2{text-align:center;}
.sp-workshop h2 small{display:block;margin-top:10px;font-family:"Yu Mincho",serif;font-size:26px}
.sp-workshop__main{width:100%;border-radius:24px}
.sp-workshop p{margin:45px 0;font-size:var(--fs-body);line-height:1.8}
.sp-workshop__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sp-workshop__thumbs img{width:100%;border-radius:18px}
.sp-nav{background:linear-gradient(90deg,#7ca4c2,#226697);color:#fff}
.sp-nav a{display:flex;justify-content:space-between;padding:24px;border-bottom:1px solid;color:inherit;text-decoration:none}
.sp-contact{padding:100px 0}
.sp-shop{padding:80px 0;background:#f7f7f7;text-align:center}
.sp-shop a{display:block;max-width:520px;margin:16px auto;padding:20px;background:#000;border-radius:40px;color:#fff;text-decoration:none}

@media(max-width:767px){
.sp-pros__lead,.sp-profile p,.sp-workshop p{font-size:14px}
.sp-pillar{margin-bottom:95px}
.sp-pillar>img{width:80%}
.sp-pillar h2{font-size:24px}
.sp-list li{grid-template-columns:38px 1fr;font-size:14px}
.sp-list li:before{font-size:42px}
.sp-pros{padding:90px 0}

.sp-pros header p,.sp-workshop h2 small{font-size:22px}
.sp-role{font-size:21px;padding:14px 45px}
.sp-profile h3{font-size:22px}
.sp-profile__license{font-size:17px}
.sp-workshop{padding:90px 0 0}
.sp-workshop__thumbs{gap:10px}
.sp-contact{padding:90px 0}
}


/* Use the image selected in the HTML for all three specialist pillars. */
.sp-pillars .sp-pillar > img{content:normal}


.sp-workshop__main {
  aspect-ratio: 460 / 330;
  object-fit: cover;
  object-position: center center;
}


.sp-nav a {
  position: relative;
  align-items: center;
  min-height: 106px;
  padding: 24px 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  font-family: "Yu Mincho", serif;
  font-size: 23px;
  line-height: 1.4;
}

.sp-nav a::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 20px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-3px) rotate(45deg);
  flex: 0 0 auto;
}

.sp-nav a:last-child { border-bottom: 0; }


@media (max-width: 767px) {
  .sp-nav a {
    min-height: 105px;
    padding: 22px 35px;
    font-size: 21px;
  }

}

/* 統合したPC表示 */
@media (min-width:768px){
  .specialist-page .section-spacing.sp-pros{padding-top:70px}

  .specialist-page .sp-role{display:block;width:fit-content;margin:52px auto 35px;padding:10px 60px;border:1px solid;font-family:"Yu Mincho",serif;font-size:25px;text-align:center}
  .specialist-page .sp-list li:before{font-family:"Sterling Display","Times New Roman",serif;font-size:30px;line-height:1}
  .sp-pillars .sp-pillar{max-width:none;margin:0}
  .sp-pillars .sp-pillar>img,.sp-pillars .sp-pillar>picture{width:100%;margin:0}
  .sp-pillars .sp-pillar h2{text-align:left}
  .sp-profile-group{margin-top:80px}
  .sp-profiles.about-grid{display:block}
  .sp-profile{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);column-gap:60px;margin-bottom:95px;align-items:start}
  .sp-profile h3,.sp-profile .sp-profile__license,.sp-profile>p{grid-column:2;margin-top:0}
  .sp-profile>img{grid-column:1;grid-row:1/4;width:100%;margin:0}
  .sp-profile:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,42%)}
  .sp-profile:nth-child(even)>img{grid-column:2}
  .sp-profile:nth-child(even) h3,.sp-profile:nth-child(even) .sp-profile__license,.sp-profile:nth-child(even)>p{grid-column:1}
  .sp-profile--image-missing{display:block;max-width:760px}
  .sp-profile--image-missing h3,.sp-profile--image-missing .sp-profile__license,.sp-profile--image-missing>p{margin-right:0;margin-left:0}
  .sp-workshop .sp-inner{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:0 64px;width:min(calc(100% - 80px),1120px);max-width:none}
  .sp-workshop h2{grid-column:1/-1}
  .sp-workshop__main{grid-column:1;grid-row:2/4}
  .sp-workshop p{grid-column:2;margin-top:0}
  .sp-workshop__thumbs{grid-column:2}
}