@charset 'UTF-8';

.cmn_section h2+*{
  margin-top: 6.2rem;
}

/*  message  */
@media screen and (min-width: 768px){
  #message .pres header{
    position: relative;
  }
}
#message h3{
  padding-bottom: 4.2rem;
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: rgb(11, 16, 87);
}
@media screen and (min-width: 768px){
  #message h3{
    padding-bottom: 0;
    font-size: clamp(1.6rem, 27 / 1280 * 100vw, 2.7rem);
    line-height: 1.9;
    letter-spacing: 0.1em;
  }
  #message .pres header h3{
    position: absolute;
    top: calc(203 / 610 * 100%);
    left: calc(90 / 1200 * 100%);
  }
}
#message .image{
  margin: 0 auto;
  max-width: 457px;
  aspect-ratio: 3 / 2;
  text-align: center;
}
@media screen and (min-width: 768px){
  #message .image{
    margin: 0;
    max-width: none;
    aspect-ratio: auto;
  }
  #message .pres header .image{
    aspect-ratio: 1200 / 610;
  }
}
#message .image img{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: right top;
  object-position: right top;
  border-radius: 20px;
}
@media screen and (min-width: 768px){
  #message .pres .image img{
    border-radius: 0;
  }
  #message .direc .image img{
    width: auto;
    height: auto;
    -o-object-fit: fill;
    object-fit: fill;
  }
}
#message .desc{
  padding-top: 4.0rem;
}
#message .desc p{
  margin: 0;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px){
  #message .pres .desc p{
    text-indent: 1.1em;
  }
}
#message .desc p.sig{
  margin-top: 1.9rem;
  font-family: var(--NotoSerifJP);
  font-size: 3.0rem;
  line-height: 1.2;
  text-align: right;
}
#message .desc p.sig span{
  margin-right: 1.1em;
  font-size: 1.8rem;
}
#message .direc{
  padding-top: 17.6rem;
}
@media screen and (min-width: 768px){
  #message .direc{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-template-rows: auto 1fr;
  }
  #message .direc h3{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin-top: -.45em;
    padding-left: calc(100 / 1200 * 100%);
    box-sizing: border-box;
  }
  #message .direc .image{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
  #message .direc .desc{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    padding-left: calc(100 / 1200 * 100%);
    box-sizing: border-box;
  }
}

/*  philosophy  */
#philosophy{
  padding-bottom: 0;
}
#philosophy .column{
  padding: 8.6rem calc(86 / 1200 * 100%);
  border: solid 3px rgb(11, 16, 87);
  background-color: rgb(255, 255, 255);
  outline: solid 1px rgb(11, 16, 87);
  outline-offset: -10px;
}
#philosophy section:not(:first-of-type){
  padding-top: 9.2rem;
}
#philosophy h3{
  margin: 0;
  margin-bottom: 4.0rem;
  font-family: var(--ShipporiMincho);
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-align: center;
  color: rgb(247, 79, 124);
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
#philosophy h3::before{
  content: '\3010';
}
#philosophy h3::after{
  content: '\3011';
}
#philosophy h3.double::before,
#philosophy h3.double::after{
  -webkit-transform: scaleY(2.4);
  transform: scaleY(2.4);
}
@media screen and (min-width: 768px){
  #philosophy h3.double::before,
  #philosophy h3.double::after{
    -webkit-transform: none;
    transform: none
  }
}
#philosophy .desc p{
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: rgb(11, 16, 87);
}
@media screen and (min-width: 768px){
  #philosophy .desc p{
    font-size: 3.0rem;
    text-align: center;
  }
}
#philosophy ul{
  padding: 0;
  margin: 0;
  list-style: none;
}
#philosophy li{
  padding-left: 1.1em;
  font-family: var(--NotoSerifJP);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-indent: -1.1em;
  color: rgb(11, 16, 87);
}
@media screen and (min-width: 768px){
  #philosophy li{
    font-size: 3.0rem;
  }
}
#philosophy li:not(:first-of-type){
  padding-top: .3em;
}
#philosophy li:not(:last-of-type){
  padding-bottom: .3em;
}

/*  history  */
#history{
  padding-bottom: 0;
}
#history ol{
  padding: 0;
  margin-bottom: 0;
  list-style: none;
}
@media screen and (min-width: 768px){
  #history>ol{
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.6rem;
    column-gap: 1.6rem;
  }
}
@media screen and (min-width: 1280px){
  #history>ol{
    -webkit-column-gap: calc(100 / 1200 * 100%);
    column-gap: calc(100 / 1200 * 100%);
  }
}
#history>ol>li{
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}
#history li{
  display: -webkit-box;
  display: flex;
  font-size: 1.5rem;
  line-height: 1.4;
}
#history .year{
  padding: 1.6rem 0 1.6rem 1.6rem;
  min-width: 6.8rem;
  background-color: rgb(254, 230, 235);
}
#history li ol{
  -webkit-box-flex: 1;
  flex-grow: 1;
}
#history li li{
  background-color: rgb(255, 255, 255);
}
#history .month{
  padding: 1.6rem 1.6rem 1.6rem 0;
  min-width: 6.8rem;
  text-align: right;
  background-color: rgb(254, 230, 235);
}
#history li p{
  padding: 1.6rem;
  margin: 0;
  font-size: inherit;
}
@media screen and (min-width: 1280px){
  #history li p{
    padding-right: 0;
  }
}

/*  outline  */
#outline section{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8.8rem;
  max-width: 84.0rem;
}
#outline section h3{
  padding: .63rem 1.15rem .63rem calc(1.15rem + 2.28rem);
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.4;
  text-indent: -2.28rem;
  color: rgb(255, 255, 255);
  background-color: rgb(11, 16, 87);
}
#outline section h3::before{
  margin-top: -0.2em;
  margin-right: calc(11.5 / 21 * 1em);
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: calc(11.3 / 21 * 1em);
  height: calc(11.3 / 21 * 1em);
  background-color: rgb(255, 255, 255);
}
#outline dl{
  margin: 0;
  background-color: rgb(255, 255, 255, 0.8);
}
#outline dl div{
  display: -webkit-box;
  display: flex;
}
#outline dt{
  padding: 1.0rem .5em;
  flex-basis: 10.5rem;
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-align: center;
  background-color: rgb(237, 233, 237);
  box-sizing: border-box;
}
@media screen and (min-width: 768px){
  #outline dt{
    padding: 1.0rem 5.0rem;
    flex-basis: 25.5rem;
  }
}
#outline dl div:not(:first-of-type) dt{
  border-top: solid 1px rgb(255, 255, 255);
}
#outline dd{
  padding: 1.0rem 1em;
  -webkit-box-flex: 1;
  flex-grow: 1;
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.4;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}
@media screen and (min-width: 768px){
  #outline dd{
    padding: 1.0rem 5.0rem;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
  }
}
#outline dl div:not(:first-of-type) dd{
  border-top: solid 1px rgb(203, 194, 208);
}
#outline ul{
  padding: 0;
  margin: 0;
  list-style: none;
}
#outline li{
  padding-left: 1em;
  font-size: inherit;
  line-height: 1.9;
  text-indent: -1em;
}
#outline .ttl{
  padding-bottom: 5.6rem;
  margin: 0;
  font-family: var(--NotoSerifJP);
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: calc(1.25 / 25 * 1em);
  text-align: center;
  color: rgb(11, 16, 87);
}