:root {
  --inner:700px;
  --wrap:990px;
  --box:1080px;
  --container:1280px;
  --maxWidth:1440px;
  --spHeaderHeight:50px;
  --pcHeaderHeight:80px;
  --baseColor:#ffffff;
  --mainColor:#450369;
  --subColor:#EAE8FA;
  --accentColor:#FF55DD;
  --whiteColor:#ffffff;
  --blackColor:#262626;
  --grayColor:#707070;
  --darkGrayColor:#383546;
  --beigeColor:#eadfcd;
  --beigeLightColor:#F7F6F3;
  --textColor:var(--blackColor);
  --textHoverColor:var(--mainColor);
  --blogPurple:#BE9AD1;
  --blogOrange:#D29826;
  --blogYellow:#BEC23F;
  --blogBlue:#9BC4C4;
  --blogRed:#CB4042;
  --blogPurpleBg:#F9F5FC;
  --blogOrangeBg:#FBF5E9;
  --blogYellowBg:#F9F9EB;
  --blogBlueBg:#F7F9F9;
  --blogRedBg:#FCF6F5;
  --animationSpeed:0.4s;
  --ioAnimationSpeed:1s;
  --spMargin:100px;
  --pcMargin:130px;
  --fontSerif:"Lusitana",serif;
  --fontGothic:"Roboto",sans-serif;
  --fontFamily:var(--fontGothic);
  --fontTitle:var(--fontSerif);
  --fontEn:var(--fontSerif);
}

/* ==========================================================================

	yakuyoke

========================================================================== */
/*--------------------------------
	introduction
--------------------------------*/
#introduction[data-bg=logo] {
  padding-top: var(--spMargin);
}
#introduction section dl div dd {
  margin-top: 0.3em;
}
@media print, screen and (max-width: 812px) {
  #introduction section.column {
    row-gap: 1em;
  }
}
@media print, screen and (min-width: 813px) {
  #introduction[data-bg=logo] {
    padding-top: var(--pcMargin);
  }
  #introduction section.column {
    direction: rtl;
    align-items: center;
    gap: 0.7em 4%;
  }
  #introduction section.column > div {
    direction: ltr;
    text-align: left;
  }
  #introduction section.column > div .link_btn {
    margin-top: 2em;
  }
}

/*--------------------------------
	yakuyoke-taisai
--------------------------------*/
#yakuyoke-taisai > picture img {
  width: 100%;
}
#yakuyoke-taisai > div {
  background-image: url("../../assets/images/logomark_bg.svg"), url("../../assets/images/yakuyoke_bg.svg");
  background-repeat: no-repeat;
}
#yakuyoke-taisai > div .about_cnt section > div > div ul, #yakuyoke-taisai > div .about_cnt section > div > div p {
  margin-bottom: 0;
}
#yakuyoke-taisai > div #flow > div {
  padding: 2.5em 7%;
}
#yakuyoke-taisai > div #flow > div > .tt_main {
  margin-bottom: 1em;
  background-image: url("../../assets/images/yakuyoke_bg.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 2.6em auto;
}
#yakuyoke-taisai > div #flow > div ol {
  margin-bottom: 0;
}
#yakuyoke-taisai > div #flow > div ol li[data-arrow] {
  padding-bottom: 5em;
}
#yakuyoke-taisai > div #flow > div ol li[data-arrow]:after {
  bottom: calc(2.5em - var(--arrowWidth) / 2 / 2);
}
#yakuyoke-taisai > div #flow > div ol li > div ul[data-list] {
  margin-top: 0.5em;
}
#yakuyoke-taisai > div #flow > div ol li > div .link_btn + p {
  margin-top: 1em;
  margin-bottom: 0;
}
#yakuyoke-taisai > div #flow > div ol li > div[data-arrow] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
  column-gap: 1em;
  padding: 2em 0;
}
#yakuyoke-taisai > div #flow > div ol li > div[data-arrow]:after {
  position: static;
}
#yakuyoke-taisai > div #flow > div > .link_btn {
  margin-top: 3.2em;
}
#yakuyoke-taisai > div #flow > div > .link_btn a {
  color: var(--whiteColor);
  background-color: var(--mainColor);
}
#yakuyoke-taisai > div #flow > div > .link_btn a[data-arrow*=line] > span:after {
  background-color: var(--whiteColor);
}
@media print, screen and (max-width: 812px) {
  #yakuyoke-taisai > div {
    background-position: -40% -1%, 130% 5%;
    background-size: 50vw auto, 50vw auto;
  }
  #yakuyoke-taisai > div > *:first-child[data-margin=bottom] {
    margin-bottom: calc(var(--spMargin) * 0.75);
  }
  #yakuyoke-taisai > div .about_cnt section[data-margin=bottom] {
    margin-bottom: calc(var(--spMargin) / 2);
  }
  #yakuyoke-taisai > div .about_cnt section.column {
    row-gap: 0;
  }
  #yakuyoke-taisai > div .about_cnt section > div {
    color: var(--whiteColor);
    padding: 1.6em 5%;
    background-color: var(--mainColor);
  }
  #yakuyoke-taisai > div #flow > div .tt_main small {
    display: block;
    line-height: 1.6;
  }
  #yakuyoke-taisai > div #flow > div ol li.column {
    row-gap: 1em;
  }
  #yakuyoke-taisai > div #flow > div ol li .tt_main {
    margin-bottom: 0.4em;
  }
  #yakuyoke-taisai > div #flow > div ol li .tt_main span {
    font-size: 1.1rem;
  }
  #yakuyoke-taisai > div #flow > div ol li .link_btn {
    margin-top: 1.4em;
  }
  #yakuyoke-taisai > div #flow > div ol li .link_btn:not(:last-child) {
    margin-bottom: 1.4em;
  }
}
@media print, screen and (min-width: 813px) {
  #yakuyoke-taisai > div {
    background-position: -2% -1%, 103% 4%;
    background-size: min(25vw, 600px) auto, min(25vw, 600px) auto;
  }
  #yakuyoke-taisai > div .about_cnt > section {
    position: relative;
    gap: 0;
  }
  #yakuyoke-taisai > div .about_cnt > section picture {
    padding-bottom: 3em;
  }
  #yakuyoke-taisai > div .about_cnt > section picture img {
    display: block;
    width: 100%;
  }
  #yakuyoke-taisai > div .about_cnt > section > div {
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
  }
  #yakuyoke-taisai > div .about_cnt > section > div > div {
    width: 38.5%;
    color: var(--whiteColor);
    padding: clamp(2.5em, 6vw, 100px) 2.5em;
    background-color: var(--mainColor);
  }
  #yakuyoke-taisai > div .about_cnt > section:nth-child(odd) > div > div {
    margin-left: auto;
  }
  #yakuyoke-taisai > div .about_cnt > section:nth-child(even) {
    direction: rtl;
  }
  #yakuyoke-taisai > div .about_cnt > section:nth-child(even) > div {
    direction: ltr;
  }
  #yakuyoke-taisai > div .about_cnt > section:nth-child(even) > div > div {
    margin-right: auto;
  }
  #yakuyoke-taisai > div #flow > div {
    padding: 5em 5%;
  }
  #yakuyoke-taisai > div #flow > div > .tt_main {
    margin-bottom: 1.6em;
  }
  #yakuyoke-taisai > div #flow > div ol li.column {
    grid-template-columns: 1.3fr 1fr;
    gap: 0 6%;
  }
  #yakuyoke-taisai > div #flow > div ol li .link_btn {
    margin-top: 3em;
  }
  #yakuyoke-taisai > div #flow > div ol li .link_btn:not(:last-child) {
    margin-bottom: 3em;
  }
  #yakuyoke-taisai > div #flow > div ol li[data-arrow] {
    padding-bottom: 6em;
  }
  #yakuyoke-taisai > div #flow > div ol li[data-arrow]:after {
    bottom: calc(3em - var(--arrowWidth) / 2 / 2);
  }
  #yakuyoke-taisai > div #flow > div ol li > div[data-arrow] {
    grid-column: 1/-1;
    padding: 2.2em 0;
  }
  #yakuyoke-taisai > div #flow > div > .link_btn a:hover {
    color: var(--mainColor);
    background-color: var(--whiteColor);
  }
  #yakuyoke-taisai > div #flow > div > .link_btn a:hover[data-arrow*=line] > span:after {
    background-color: var(--mainColor);
  }
}

/*--------------------------------
	yakuyoke-hatsuhoryo
--------------------------------*/
#yakuyoke-hatsuhoryo > div > ol > li {
  padding: 7%;
}
#yakuyoke-hatsuhoryo > div > ol > li picture {
  margin-bottom: 1em;
}
#yakuyoke-hatsuhoryo > div > ol > li > div {
  margin-bottom: 1.6em;
}
#yakuyoke-hatsuhoryo > div > ol > li > div:last-child {
  margin-bottom: 0;
}
#yakuyoke-hatsuhoryo > div > ol > li > div p {
  font-weight: bold;
  letter-spacing: normal;
}
#yakuyoke-hatsuhoryo > div > ol > li > div dl > div > dt {
  margin-bottom: 0.5em;
}
#yakuyoke-hatsuhoryo > div > ol > li > div dl > div > dt:before {
  content: "<";
}
#yakuyoke-hatsuhoryo > div > ol > li > div dl > div > dt:after {
  content: ">";
}
#yakuyoke-hatsuhoryo > div > ol > li > div dl > div > dd ul {
  margin-bottom: 0;
}
#yakuyoke-hatsuhoryo > div > ol > li > ul {
  margin-bottom: 0;
}
#yakuyoke-hatsuhoryo > div > ol > li > ul li {
  margin-bottom: 1em;
}
#yakuyoke-hatsuhoryo > div > ol > li > ul li:last-child {
  margin-bottom: 0;
}
#yakuyoke-hatsuhoryo > div > ol > li > ul li.link_btn a {
  width: 100%;
}
@media print, screen and (min-width: 813px) {
  #yakuyoke-hatsuhoryo > div > ol > li > div {
    margin-bottom: 2em;
  }
  #yakuyoke-hatsuhoryo > div > ol > li > div p {
    font-size: min(2.6rem, 26px);
  }
  #yakuyoke-hatsuhoryo > div > ol > li > div dl > div {
    font-size: min(1.4rem, 14px);
  }
}

/*# sourceMappingURL=style.css.map */