@charset "UTF-8";
@import url("under.css");
:root {
  --fnt-base:"Noto Sans JP", sans-serif;
  --fnt-maru:"Zen Maru Gothic", var(--fnt-base);
  --hero-h:100dvh;
  --head2:min(60px,calc(100vw/17));
  --head3:min(30px,calc(100vw/20));
  --head3_udr:min(36px,calc(100vw/22.5));
  --head4:min(23px,calc(100vw/25));
  --easing: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --transit: .5s var(--easing);
  
  --base-radius:min(145px, 15vw);
  --base-clr:#333333;
  --clr-blue:#0B6EB4;
  --clr-red:#E7241D;
  --clr-em-grn:#31D79C;
  --clr-org:#FF8E4F;
  --clr-grn:#2EB988;
  --title-grn:#2EB988;
  
  --wall-gry:#F5F5F5;
  --wall-b-gry:#D9E4EC;
  --wall-w-blue:#F1F9FF;
  --wall-pre-grn:#D0F4E8;
}
html {
  scroll-behavior: auto;
}
html, body {
/*  overscroll-behavior: none;*/
}
body {
  font-family: var(--fnt-base);
  width: 100%;
  color: var(--base-clr);
  font-size: clamp(14px, 2.5vw, 18px);
  transition:opacity var(--transit);
  opacity: 0;
  font-weight: 400;
  overflow-x: hidden;
}
body.is-load{
  opacity: 1;
}

.fnt-maru{
  font-family: var(--fnt-maru);
}
.fw-w{
  font-weight: 600;
}
#pagetop{
  position: fixed;
  right: min(50px,3vw);
  bottom: min(30px,3vw);
  width: min(80px,15vw);
  aspect-ratio:1;
  border-radius: 100vmax;
  background-color: var(--clr-blue);
  border: 2px solid #fff;
  cursor: pointer;
  display: grid;
  place-content:center;
  grid-template-columns: 25%;
  color: #fff;
  z-index: 2;
  translate:0 0;
  transition:translate .3s var(--easing);
}
#pagetop p{
  aspect-ratio:1;
  border: 2px solid;
  border-color: currentColor currentColor transparent transparent;
  border-radius: 2px;
  rotate:-45deg;
  translate: 0 25%;
}
#pagetop.is-fixed{
  position: absolute;
  bottom: 0;
  translate:0 50%;
}
/*#container +++++++++++++++++++++++++++++++++++*/
#container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  
}
.index-container{
  padding-top: var(--hero-h);
}
/*header  +++++++++++++++++++++++++++++++++++*/
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: min(40px,4vw) min(100vw,4vw) min(40px,10vw);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.h-logo{
  width: min(338px,50vw);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  opacity: 1;
  visibility: visible;
  transition:opacity var(--transit),visibility var(--transit);
  pointer-events: auto;
}
header.nav-open .h-logo{
  opacity: 0;
  visibility: hidden;
}
#hum-button{
  position: fixed;
  top: min(40px, 4vw);
  right: min(100vw, 4vw);
  width: min(80px,15vw);
  aspect-ratio:1;
  background-color: var(--clr-blue);
  border-radius: min(20px,4vw);
  display: grid;
  grid-template-columns: 55%;
  place-content:center;
  place-items:center;
  font-family: var(--fnt-maru);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}
#hum-button button{
  height: 3px;
  background-color: #fff;
  position: relative;
  translate:0 max(-10px,-1.5vw);
  transition:rotate .3s var(--easing);
}
#hum-button button::before
,#hum-button button::after{
  content: "";
  width: 100%;
  height: 3px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transition:rotate .3s var(--easing);
}
#hum-button button::before{
  translate:-50% -100%;
  top: max(-10px,-1.5vw);
}
#hum-button button::after{
  translate:-50% 100%;
  top: min(10px,1.5vw);
}
#hum-button .txt{
  position: absolute;
  left: 50%;
  bottom: min(10px,2vw);
  translate:-50% 0;
  white-space: nowrap;
  font-size: min(15px,3.2vw);
}
#hum-button.open button{
  rotate:45deg;
}
#hum-button.open button::before
,#hum-button.open button::after{
  rotate:90deg;
  top: 0;
  translate:-50% 0;
}
/*l-nav*/
#l-nav{
  background-color: #fff;
  position: fixed;
  right: 0;
  top: 0;
  max-height: 100dvh;
  overflow-y: scroll;
  z-index: 100;
  width: min(574px,100%);
  translate:100% 0%;
  transition:translate var(--transit);
}
.l-nav_inner{
  width: 100%;
  min-height: 100%;
  padding: min(40px, 4vw) min(70px,7vw) min(50px,12vw);
  font-size: min(20px,5vw);
}
.l-nav__dial a{
  display: grid;
  color: var(--clr-red);
  font-weight: 600;
  grid-template-columns: 1.7em auto;
  -ms-align-items: center;
  align-items: center;
  gap:.5em;
}
#l-nav.is-view{
  translate:0 0;
}
.l-nav__menu {
  margin-top: min(50px,12vw);
  position: relative;
}
.l-nav__menu li{
  padding-left: 2.15em;
  position: relative;
}
.l-nav__menu li a{
  color: var(--clr-blue);
  font-weight: 700;
  display: block;
}
.l-nav__menu li:nth-child(n+2){
  margin-top: .75em;
}
.l-nav__banner{
  margin-top: min(90px,12vw);
  display: grid;
  grid-template-columns: min(296px,65%) auto;
  gap:min(60px,12vw);
  -ms-align-items: center;
  align-items: center;
}
.l-nav__menu li.top::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  background-image: url("/image/image_directly/osaka-colorectal-center/icon/colon.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio:1/1.1194;
  width: 1.25em;
  translate:0 calc(-50% + var(--nav-marker-y, 0px));
  
}
/*main    +++++++++++++++++++++++++++++++++++*/
main {
  flex: 1;
  position: relative;
}
.inner{
  width: min(1380px,100%);/*20260210_edit*/
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
  margin-left: auto;
  margin-right: auto;
}
.lead-text
,.in-text{
  font-kerning: none;
}
.in-text{
  line-height: calc(32/18);
}
.fw-w{
  font-weight: 600;
}
.clr-blue{
  color: var(--clr-blue);
}
.clr-grn{
  color: var(--clr-grn);
}
.title-grn{
  color: var(--clr-grn);
}
.cvr {
  position: absolute;
  inset:0;
}
/*hero +++++++++++++++++++++++++++*/
.index-hero{
  position: fixed;
  inset:0;
  width: 100%;
   height: var(--vh);
/*  min-height: 100vh;*/
  pointer-events: none;
}
.hero-wall-movie{
  position: absolute;
  inset:0;
}
.hero-wall-movie video{
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}
.hero-title-area{
  height: 100%;
  display: grid;
  -ms-align-items: flex-end;
  align-items: flex-end;
  padding-bottom: min(50px,12vw);
}
.hero_title{
  font-size: min(105px,calc(100vw/13.5));
  font-weight: 700;
  text-align: center;
  line-height: calc(130/105);
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,.25);
}
.hero-blind-blc{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events: none;
/*  contain: layout paint;*/
}

/*
.hero-blind_item{
  --base:1.14;
  --sx:1;
  --bw:0px;
  position:absolute;
   inset:0;
  top: 0;
  left:50%;
  transform: translate(-50%,100%) scaleX(calc(var(--base) * var(--sx)));
  width:100%;
  transform-origin: center bottom;
  backface-visibility:hidden;
  box-sizing:content-box;
  isolation: isolate;
  overflow: hidden;
}
*/
.hero-blind_item{
  --sx:1.04;
  --bw:0px;
  position:absolute;
  inset:0;
  left:50%;
  transform: translate(-50%,100%);
  width:100%;
  height: var(--vh);
  transform-origin:center bottom;
  overflow:hidden;
  will-change: transform;
  contain: layout paint;
}
.hero-blind__bar{
  position: absolute;
  inset:0;
  
  /*border-top-style:solid;
  border-top-color:rgba(255,255,255,1);
  border-top-width:var(--bw);*/
  /*  border-radius:10% 10% 0 0;*/
  /*border-radius:min(125px,15vw) min(125px,15vw) 0 0;*/
  transform:scaleX(var(--sx));
  will-change: transform;
  isolation: isolate;
}
.hero-blind__bar img{
  object-fit: contain;
  object-position: center top;
  height: 100%;
}

.hero-blind_item:last-child{
  height: 100vh;
}
.hero-blind__fill{
  position:absolute;
  transform-origin: center bottom;
  width: 100%;
  top: 0;
  left: 50%;
  translate:-50% 0;
  height: 100%;
  background:#fff;
  pointer-events:none;
  background-image: url("../image/osaka-mc/bar05.svg");
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
/*
.hero-blind_item:last-child .hero-blind__bar{
  background-color: #fff;
}
*/
/*contents +++++++++++++++++++++++++++*/
.index-contents{
  padding-top:  min(50px,10vw);
}
.index-contents::before{
  content: "";
  position: absolute;
  width: 106%;
  height: 100%;
  top: 0;
  left: 50%;
  translate:-50% 0;
  border-radius:min(125px,15vw) min(125px,15vw) 0 0;
  background-color: #fff;
}
.sec-title{
  font-size: var(--head2);
  text-align: center;
  font-weight: 600;
  line-height: calc(93/60);
  word-break: keep-all;
}
.more-button{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  --btn-wall:var(--clr-blue);
  --btn-fc:#fff;
  --arw-clr:var(--btn-wall);
}
.more-button.grn{
  --btn-wall:var(--clr-grn);
}
.more-button a{
  display: grid;
  height: min(60px,14vw);
  border-radius: 100vmax;
  font-size: min(20px,4vw);
  font-weight: 600;
  background-color: var(--btn-wall);
  color: var(--btn-fc);
  place-content:center;
  padding: 10px 4em;
  border: 3px solid var(--btn-wall);
  transition:background .3s var(--easing),color .3s var(--easing);
}
.more-button.w-min a{
  padding: 10px 2.5em;
}
.more-button.w-auto a{
  padding: 10px 1em;
}
.more-button .arw{
  position: absolute;
  right: min(10px,2vw);
  top: 50%;
  translate:-20% -50%;
  width: .85em;
  opacity: 0;
  transition:opacity .3s var(--easing),translate .4s var(--easing);
}
@media(hover){
  .more-button a:hover{
    background-color: var(--btn-fc);
    color: var(--btn-wall);
  }
  .more-button a:hover .arw{
    opacity: 1;
    translate:0% -50%;
  }
}
/*index intro*/
.index-into-blc{
  text-align: center;
  display: grid;
  grid-template-columns: 100%;
  gap:min(90px,8vw);
  padding-bottom: min(200px,25vw);
}

.index-into-blc .lead-text{
  font-size: min(26px,calc(100vw/22.5));
  line-height: calc(47/26);
  font-weight: 600;
}
.index-into-blc .in-text{
  line-height: calc(40/18);
}
.index-feature-blc{
  width: 100%;
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
  display: grid;
  grid-template-columns: min(1280px,100%);/*20260210_edit*/
  justify-content: center;
}
.index-feature-wrap{
  padding-top: min(90px,12vw);
  padding-bottom: min(90px,12vw);
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:min(70px,6vw);
}
.index-feature-wrap::before{
  content: "";
  width: 100vw;
  height: 100%;
  background-color: var(--wall-clr);
  position: absolute;
  left: 50%;
  top: 0;
  translate:-50% 0;
  border-radius:min(145px,15vw);
}
.index-feature_link
,.about-colon-cancer{
  --wall-clr:var(--clr-blue);
}
.index-feature_detail
,.index-feature_staff{
  --wall-clr:var(--clr-em-grn);
}
.index-feature-blc .sec-title{
  color: #fff;
}
/*index news*/
.index-news-blc{
  width: min(1280px,calc(100vw - min(100px,8vw)));
  padding-top: min(34px,6vw);
  padding-bottom: min(150px, 15vw);
  border-top: min(3px,1.25vw) solid #707070;
}
.box-index-news{
  display: grid;
  grid-template-columns: auto 1fr;
  gap:min(30px,3vw) min(126px,6vw);
}
.box-index-news .in-title{
  font-size: var(--head3);
  font-weight: 600;
}
.index-news-archive{
  font-size: clamp(14px, 2.5vw, 20px);
}
.index-news-archive > li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap:10px 1em;
  line-height: calc(30/20);
}
.index-news-archive > li:nth-child(n+2){
  margin-top: .5em;
}
.index-news-archive > li .post-date{
  font-weight: 600;
}
/*link　++++++++++++++++++++++++++++++++++++++++++++++++*/
.index-feature_link{
  display: grid;
  grid-template-columns: min(1260px,100%);
  justify-content: center;
  align-content: flex-start;
}
.box-card-invest{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:min(90px,5vw) min(160px,10vw);
}
.invest-card-item{
  background-color: #fff;
  border-radius: min(45px,10vw);
  padding: 10px 10px min(45px,10vw);
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap:0;
  justify-items:center;
}
.invest-card-item .thumb{
  border-radius: min(40px,4vw);
  overflow: hidden;
  isolation: isolate;
  aspect-ratio:1/0.6776;
  width: 100%;
}
.invest-card-item .thumb img{
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center;
}
.invest-card-item .in-title
,.invest-card-item .in-text{
  width: min(260px,100%);
}
.invest-card-item .in-title{
  display: grid;
  -ms-align-items: center;
  align-items: center;
  font-weight: 600;
  font-size: clamp(16px, 2cqw, 23px); 
}

@media(hover){
  .invest-card-item:hover > * {
    opacity: .6;
  }
}
/*detail ++++++++++++++++++++++++++++++++++++++++++++++++*/

.box-feature_detail{
  display: grid;
  grid-template-columns: auto 60%;
  -ms-align-items: center;
  align-items: center;
  gap:min(60px,5vw);
}
.box-feature_detail .comment{
  background-color: #fff;
  border-radius:min(100px,15vw);
  padding: min(50px,8vw) min(50px,5vw);
  display: grid;
  grid-template-columns: min(730px,100%);
  justify-content: center;
  gap:min(40px,6vw);
}
.box-feature_detail .comment .in-text{
  line-height: calc(40/18);
}

/*about colon-cancer +++++++++++++++++++++++++++++++++++++*/
.list-colon-cancer li:nth-child(n+2){
  margin-top: -5px;
}
.list-colon-cancer li{
  border-radius: var(--base-radius);
  background-color: #fff;
  padding: min(100px,8vw) min(60px,4vw);
  display: grid;
  grid-template-columns: auto 60%;
  gap:0 min(50px,4vw);
  -ms-align-items: center;
  align-items: center;
}
.list-colon-cancer li .thumb{
  grid-area: span 3;
}
.list-colon-cancer li .thumb img
,.list-colon-cancer li .thumb svg{
  object-fit: contain;
  object-position: center;
  height: 100%;
  width: 100%;
  max-height: min(447px,70vw);
}
.list-colon-cancer li .list-title{
  grid-area:1/2;
  font-size: var(--head3);
  font-weight: 600;
}
.list-colon-cancer li .comment{
  grid-area:2/2;
  margin-top: min(30px,3vw)
}
.list-colon-cancer li .comment > * + *{
  margin-top: 1em;
}
.list-colon-cancer li .comment > .in-text > span{
  font-weight: 600;
  display: block;
}
.list-colon-cancer li .more-button{
  grid-area:3/2;
  margin-top: min(60px,6vw);
}
/*staff　++++++++++++++++++++++++++++++++++++++++++++++++*/
.index-feature-blc > .index-feature_staff::before{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.box-feature_staff{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  -ms-align-items: center;
  align-items: center;
  gap:min(190px,10vw);
}
.feature-staff-intro{
  width: min(1070px,100%);
  display: grid;
  grid-template-columns: auto 38%;
  grid-template-rows: auto 1fr auto;
  -ms-align-items: center;
  align-items: center;
  border-radius: min(72px,7.5vw);
  overflow: hidden;
  isolation: isolate;
  background-color: #fff;
  padding-top: min(30px,3.5vw);
  padding-bottom: min(50px,6vw);
  font-size: clamp(16px, 2.5vw, 28px);
  gap:min(20px,4vw);
}
.feature-staff-intro .thumb{
  grid-row: span 3;
}
.feature-staff-intro .thumb figure{
  aspect-ratio:1/0.9487;
  width: 100%;
  overflow: hidden;
}
.feature-staff-intro .thumb figure img{
  object-fit: cover;
  height: 100%;
  object-position: center top;
}
.feature-staff-intro .comment{
  padding-left: min(50px,4vw);
  padding-right: min(50px,4vw);
  display: grid;
  grid-template-columns: 100%;
  gap:min(40px,5vw);
  
}
.feature-staff-intro .in-title{
  line-height: calc(60/43);
  font-weight: 600;
  text-align: center;
  font-size: 1.5em;
}
.feature-staff-intro .in-text{
  text-align: center;
  line-height: calc(47/28);
}
.feature-staff-intro .comment .more-button{
}
.feature-staff-list{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap:min(50px,5vw);
}
.feature-staff-list > li{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap:min(10px,2vw);
  background-color: #fff;
  padding: min(15px,3vw) min(30px,3vw) min(40px,6vw);
  border-radius: min(45px,10vw);
  overflow: hidden;
  isolation: isolate;
}
.feature-staff-list > li figure{
  aspect-ratio:1/0.9442;
  overflow: hidden;
  isolation: isolate;
}
.feature-staff-list > li figure img{
  object-fit: cover;
  height: 100%;
  object-position: top center;
}
.feature-staff-list > li .in-title{
  display: grid;
  grid-template-columns: 100%;
  -ms-align-items: center;
  align-items: center;
  font-size: clamp(18px, 1.35vw, 20px);/*20260210_edit*/
  font-weight: 600;
  line-height: calc(40/24);
}
@media(hover){
  .feature-staff-list > li:hover > *{
    opacity: .6;
  }
}
/*footer  +++++++++++++++++++++++++++++++++++*/
footer{
  background-color: #fff;
}
.footer-inner{
  width: min(1560px,100%);
  margin-left: auto;
  margin-right: auto;
  padding: min(40px,10vw) min(50px,6vw) min(55px,6vw);
  display: grid;
  -ms-align-items: center;
  align-items: center;
  gap:min(50px,8vw) min(100px,16vw);
  grid-template-columns: auto min(1100px,70%);
  font-size: min(16px,3.6vw);
  line-height: calc(24/16);
}
.foot_logo{
  display: grid;
  grid-template-columns: min(334px,100%);
  -ms-align-items: center;
  align-items: center;
}
.foot_contents{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap:min(30px,6vw) min(60px,6vw);
  -ms-align-items: center;
  align-items: center;
}
.foot_contents::before{
  content: "";
  width: 1px;
  height: 100%;
  background-color: currentColor;
  position: absolute;
  left: max(-50px,-8vw);
  top: 50%;
  translate:-50% -50%;
}
.foot__navigation {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  gap:.5em;
}
.foot__navigation .link-youtube a{
  display: inline-block;
  width: min(46px,8vw);
}
.foot__banner{
  display: grid;
  grid-template-columns: min(340px,20vw);
  justify-content: flex-end;
  gap: 25px; /*20260303_add*/
}
@media screen and (max-width: 480px) {
  .foot__banner {
    gap: 10px;
  }
} /*20260303_add*/
.foot__inquiry > div:nth-child(n+2){
  margin-top:1em;
}
.foot__inquiry > div > dt{
  font-weight: 600;
}
.foot__inquiry > div > dd dl{
  display: grid;
  grid-template-columns: 7em auto;
}
footer .copy{
  text-align: center;
  font-size: min(16px,3vw);
  padding: min(50px,10vw) min(30px,6vw) min(50px,5vw);
  line-height: calc(24/16);
}