: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);
}

:root {
  --baseColor:#FEF5D8;
  --mainColor:#F9BE00;
  --subColor:#FEF5D8;
}

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

	imamasu

========================================================================== */
/*--------------------------------
	header
--------------------------------*/
header {
  border-bottom-color: transparent;
  background-color: transparent;
  transition: background-color var(--animationSpeed), border-bottom-color var(--animationSpeed);
}
header.bg-active {
  border-bottom-color: rgb(from var(--mainColor) r g b/0.2);
  background-color: var(--baseColor);
}
@media print, screen and (max-width: 812px) {
  header .container #header_nav ul {
    display: none;
  }
  header .container #header_nav #nav_btnwrapper {
    display: block;
  }
}
@media print, screen and (min-width: 813px) {
  header .container #header_nav ul {
    display: flex;
    padding: 0 2em;
  }
  header .container #header_nav ul li {
    margin-left: -0.5px;
  }
  header .container #header_nav ul li a {
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 1.28;
    padding: 0.5em 2em;
    background-color: var(--whiteColor);
    position: relative;
    z-index: 1;
  }
  header .container #header_nav ul li a:after {
    display: block;
    content: "";
    width: 2em;
    height: 1em;
    background-image: url("../images/icon-kitune-smile.png");
    background-repeat: no-repeat;
    background-position: left 15%;
    background-size: 100% auto;
    position: absolute;
    top: -1em;
    left: calc(50% - 1em);
    z-index: 0;
    opacity: 0;
    transition: opacity var(--animationSpeed);
    will-change: opacity;
  }
  header .container #header_nav ul li a:hover {
    color: var(--whiteColor);
    background-color: var(--mainColor);
  }
  header .container #header_nav ul li a:hover:after {
    opacity: 1;
  }
  header .container #header_nav ul li:first-child a {
    padding-left: 4em;
    border-radius: 30px 0 0 30px;
  }
  header .container #header_nav ul li:first-child a:after {
    left: 50%;
  }
  header .container #header_nav ul li:last-child a {
    padding-right: 4em;
    border-radius: 0 30px 30px 0;
  }
  header .container #header_nav ul li:last-child a:after {
    left: calc(50% - 2em);
  }
  header .container #header_nav #nav_btnwrapper {
    display: none;
  }
}

/*--------------------------------
	nav
--------------------------------*/
@media print, screen and (max-width: 812px) {
  #navigation > .nav_cnt #nav_info {
    display: block;
    padding-top: 1.5vh;
    border-top: solid 1px var(--mainColor);
  }
}
@media print, screen and (min-width: 813px) {
  #navigation > .nav_cnt #navigation {
    display: none;
  }
}

/*--------------------------------
	main
--------------------------------*/
main {
  padding-top: 0;
}
/*--------------------------------
	footer
--------------------------------*/
footer {
  padding-top: 3em;
  padding-bottom: 3em;
  background-color: var(--mainColor);
}
footer, footer a:link, footer a:visited {
  color: var(--whiteColor);
}
footer > div > div:last-child .footer-link .link_btn a {
  display: block;
  border-color: var(--whiteColor);
}
footer > div > div:last-child .footer-nav {
  display: flex;
  column-gap: 1em;
  font-size: 1.2rem;
  margin-top: 1.6em;
}
footer > div > div:last-child .footer_copyright {
  margin-top: 0.5em;
}
@media print, screen and (max-width: 812px) {
  footer > div > div:first-child picture img {
    width: 38vw;
  }
  footer > div > div:first-child .footer-info {
    margin-top: 1em;
    text-align: center;
  }
  footer > div > div:first-child .footer-info .tt_main {
    font-size: 2rem;
  }
  footer > div > div:last-child {
    margin-top: 1.6em;
  }
  footer > div > div:last-child .footer-link .column {
    row-gap: 0.7em;
  }
  footer > div > div:last-child .footer-link .link_btn a {
    width: 80%;
    margin: 0 auto;
  }
  footer > div > div:last-child .footer-link .link_btn a[data-arrow*=line] {
    --arrowLineWidth:20px;
    --arrowLineHeight:5px;
  }
  footer > div > div:last-child .footer-nav {
    justify-content: center;
  }
}
@media print, screen and (min-width: 813px) {
  footer > div.column[data-pc-col="2"] {
    grid-template-columns: 1.5fr 1fr;
    align-items: end;
  }
  footer > div > div:first-child {
    display: flex;
    column-gap: 3em;
  }
  footer > div > div:first-child picture {
    display: block;
    width: 10vw;
  }
  footer > div > div:first-child picture img {
    width: 100%;
  }
  footer > div > div:last-child .footer-link .link_btn a {
    width: 100%;
    min-width: initial;
  }
  footer > div > div:last-child .footer-link .link_btn a:hover {
    background-color: var(--mainColor);
  }
  footer > div > div:last-child .footer-nav {
    justify-content: flex-end;
  }
  footer > div > div:last-child .footer-nav > * {
    flex-shrink: 0;
  }
  footer > div > div:last-child .footer-nav > * a {
    border-bottom: solid 1px transparent;
  }
  footer > div > div:last-child .footer-nav > * a:hover {
    border-bottom-color: var(--whiteColor);
  }
  footer > div > div:last-child .footer_copyright {
    text-align: right;
  }
}

/*--------------------------------
	common
--------------------------------*/
*[data-bg][data-bg*=imamasu] {
  background-image: url("../images/bg_logo_pattern.svg");
  background-repeat: repeat-y;
  background-position: left top;
  background-size: 100% auto;
}
*[data-bg][data-bg*=orange] {
  background-color: var(--mainColor);
}
*[data-bg][data-bg*=orange][data-bg*=gradient] {
  background: linear-gradient(180deg, rgb(249, 190, 0) 0%, rgba(249, 190, 0, 0.9) 80%, rgba(249, 190, 0, 0) 100%);
}
*[data-bg][data-bg*=logo]:before {
  height: 40px;
  background-image: url("../images/logomark.svg");
  background-size: auto 100%;
}

.link_txt a > span i {
  border-radius: 4px;
  border-color: var(--mainColor);
}
.link_txt a > span i svg {
  fill: var(--mainColor);
  stroke: var(--mainColor);
}
.link_btn a {
  border-radius: 25px;
  border-color: var(--mainColor);
}
.link_btn a:not(:hover) {
  color: var(--mainColor);
}
.link_btn a:not(:hover)[data-arrow] > span:after {
  background-color: var(--mainColor);
}
@media print, screen and (max-width: 812px) {
  .link_btn a {
    padding-right: 1.5em;
    padding-left: 1.5em;
  }
}
@media print, screen and (min-width: 813px) {
  .link_btn a {
    padding-right: 1.5em;
    padding-left: 1.5em;
  }
}

/*--------------------------------
	top
--------------------------------*/
body {
  background-color: #FEF5D8;
}
/*--------------------------------
	mainvisual
--------------------------------*/
#mainvisual {
  height: 100vh;
  height: 100svh;
}
@media print, screen and (min-width: 813px) {
  #mainvisual img {
    height: 100%;
    object-fit: cover;
  }
}

/*--------------------------------
	introduction
--------------------------------*/
#introduction {
  position: relative;
}
#introduction:after {
  display: block;
  content: "";
  width: 100%;
  height: 90%;
  background: url("../images/logo_white.svg") no-repeat center center/50vw;
  mix-blend-mode: soft-light;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#introduction > div {
  position: relative;
  z-index: 1;
}
#introduction > div > * {
  line-height: 2.2;
}
#introduction > div > div {
  font-family: var(--fontTitle);
  font-size: 1.6rem;
}
@media print, screen and (max-width: 812px) {
  #introduction {
    padding-top: calc(var(--spMargin) / 2);
  }
  #introduction > div .tt_main {
    line-height: 1.6;
    font-weight: bold;
  }
}
@media print, screen and (min-width: 813px) {
  #introduction:after {
    background-size: 20vw;
  }
  #introduction > div {
    width: auto;
    white-space: nowrap;
    padding-bottom: var(--pcMargin);
    margin: 0 auto;
  }
  #introduction > div > div {
    margin-right: 2em;
  }
  #introduction > div > div > * {
    margin-bottom: 0;
    margin-left: 2em;
  }
  #introduction > div > div > *:last-child {
    margin-left: 0;
  }
}

/*--------------------------------
	about
--------------------------------*/
#about section picture img {
  border-radius: 10px;
}
#about section picture[data-icon*=kitsune] {
  position: relative;
}
#about section picture[data-icon*=kitsune]:before {
  display: block;
  content: "";
  width: 20vw;
  height: 20vw;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
  position: absolute;
  z-index: 1;
  opacity: 0;
}
#about section picture[data-icon*=kitsune][data-icon*=top]:before {
  top: -5.5vw;
}
#about section picture[data-icon*=kitsune][data-icon*=right]:before {
  right: -3vw;
}
#about section picture[data-icon*=kitsune][data-icon*=bottom]:before {
  bottom: -5vw;
}
#about section picture[data-icon*=kitsune][data-icon*=left]:before {
  left: -3vw;
}
#about section picture[data-icon*=kitsune][data-icon*=smile]:before {
  background-image: url("../images/icon-kitune-smile.png");
  --iconRotationStart:10deg;
  --iconRotation:-10deg;
}
#about section picture[data-icon*=kitsune][data-icon*=grin]:before {
  background-image: url("../images/icon-kitune-grin.png");
  --iconRotationStart:-10deg;
  --iconRotation:10deg;
}
#about section picture[data-icon*=kitsune].io.move:before {
  animation: bounce-in var(--animationSpeed) ease-out forwards, jiggle-laugh 0.15s ease-in-out calc(var(--animationSpeed) + 0.5s) 5;
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(var(--iconRotationStart));
  }
  80% {
    opacity: 1;
    transform: scale(1.1) rotate(var(--iconRotation));
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--iconRotation));
  }
}
@keyframes jiggle-laugh {
  0%, 100% {
    transform: scale(1) rotate(var(--iconRotation));
  }
  50% {
    transform: scale(1) rotate(calc(var(--iconRotation) + 7deg));
  }
}
#about section > figure {
  align-items: center;
  padding-bottom: 10vw;
}
#about section > figure > *:last-child {
  transform: translateY(10vw) !important;
}
@media print, screen and (max-width: 812px) {
  #about {
    padding-top: 0;
  }
  #about section[data-margin] {
    margin-bottom: calc(var(--spMargin) / 2);
  }
}
@media print, screen and (min-width: 813px) {
  #about section.column {
    grid-template-columns: 1fr 1.3fr;
    column-gap: 4%;
  }
  #about section > div .tt_main {
    margin-bottom: 1.6em;
  }
  #about section picture img {
    border-radius: 20px;
  }
  #about section picture[data-icon*=kitsune]:before {
    width: 10.4vw;
    height: 10.4vw;
  }
  #about section picture[data-icon*=kitsune][data-icon*=top]:before {
    top: -5.5vw;
  }
  #about section picture[data-icon*=kitsune][data-icon*=right]:before {
    right: -3vw;
  }
  #about section picture[data-icon*=kitsune][data-icon*=bottom]:before {
    bottom: -5vw;
  }
  #about section picture[data-icon*=kitsune][data-icon*=left]:before {
    left: -3vw;
  }
  #about section:nth-child(2n) {
    direction: rtl;
  }
  #about section:nth-child(2n) > div {
    direction: ltr;
  }
  #about section:nth-child(1) > picture {
    margin-top: 10vw;
  }
  #about section:nth-child(2) > div {
    margin-top: 8vw;
  }
  #about section:nth-child(3) > div {
    margin-top: 4vw;
  }
}

/*--------------------------------
	juyohin
--------------------------------*/
@media print, screen and (min-width: 813px) {
  #juyohin {
    padding-bottom: calc(var(--pcMargin) * 1.43);
  }
}

/*--------------------------------
	hatsuumasai
--------------------------------*/
@media print, screen and (min-width: 813px) {
  #hatsuumasai > picture {
    margin-bottom: calc(var(--pcMargin) / 1.35);
  }
}

/*--------------------------------
	item_cnt
--------------------------------*/
.item_cnt {
  margin-top: 2em;
}
.item_cnt > * {
  position: relative;
}
.item_cnt > * picture {
  margin-bottom: 1em;
}
.item_cnt > * .link_btn > a {
  position: static;
  will-change: auto;
}
.item_cnt > * .link_btn > a:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media print, screen and (max-width: 812px) {
  .item_cnt.column {
    gap: 3em 3%;
  }
  .item_cnt > * {
    position: relative;
  }
  .item_cnt > * .tt_main {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 0.4em;
  }
  .item_cnt > * .link_btn > a {
    min-width: initial;
    width: 100%;
    padding-right: 0.7em;
    padding-left: 0.7em;
  }
  #omamori .item_cnt.column > *:nth-child(-n+2) {
    grid-column: 1/-1;
  }
  #omamori .item_cnt.column > *:nth-child(-n+2) .link_btn a {
    width: 80%;
  }
  #omamori .item_cnt.column > *:nth-child(-n+2) .link_btn a span {
    padding-left: calc(var(--arrowLineWidth) + 1em + var(--arrowLineHoverMove));
  }
}
@media print, screen and (min-width: 813px) {
  .item_cnt {
    margin-top: 3em;
  }
  .item_cnt.column {
    gap: 5em 10%;
  }
  .item_cnt > *:has(.link_btn) picture {
    overflow: hidden;
  }
  .item_cnt > *:has(.link_btn) picture img {
    transition: transform var(--animationSpeed), filter var(--animationSpeed);
    backface-visibility: hidden;
    will-change: opacity, transform;
  }
  .item_cnt > *:has(.link_btn):has(.link_btn):hover picture img {
    transform: scale(1.05);
    filter: brightness(105%);
  }
}

/*--------------------------------
	saiten_cnt
--------------------------------*/
.saiten_cnt > * {
  margin-top: 3em;
}
.saiten_cnt > *:first-child {
  margin-top: 0;
}
.saiten_cnt .information.column {
  row-gap: 0;
}
.saiten_cnt .information > div {
  padding: 1em 0;
  margin-bottom: 0;
  border-top: solid 1px var(--grayColor);
}
.saiten_cnt .information > div > dt {
  font-weight: 500;
}
.saiten_cnt .information > div > dd .link_btn {
  margin-top: 1em;
}
@media print, screen and (max-width: 812px) {
  .saiten_cnt .flow figure {
    display: flex;
    gap: 4%;
  }
  .saiten_cnt .flow figure picture {
    width: 40%;
  }
  .saiten_cnt .flow figure figcaption {
    width: 56%;
  }
  .saiten_cnt .information > div {
    display: block;
  }
  .saiten_cnt .information > div > dt {
    margin-bottom: 0.2em;
  }
}
@media print, screen and (min-width: 813px) {
  .saiten_cnt .flow figcaption {
    font-size: min(1.4rem, 14px);
    margin-top: 0.5em;
  }
  .saiten_cnt .information {
    grid-template-columns: max-content 1fr;
  }
  .saiten_cnt .information > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
    align-items: center;
    gap: 0 2em;
    padding: 1.6em 1em;
  }
  .saiten_cnt .information > div > dt {
    min-width: 300px;
  }
  .saiten_cnt .information > div > dd *:last-child {
    margin-bottom: 0;
  }
}

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