@charset "UTF-8";

/* ==========================================
  FONTS
========================================== */
.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* ==========================================
  UTILITY CLASSES
========================================== */
.p-tamagonokimi-disp-sp-only {
    display: inline;
}

@media screen and (min-width: 769px) {
  .p-tamagonokimi-disp-sp-only {
    display: none;
  }
}


/* ==========================================
  PARTS
========================================== */
/* button */
.p-tamagonokimi-content-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 70px;
  margin: 7% auto 0;
  padding: 0 1em 0 0;
  background: #fff url("../img/arrow.svg") no-repeat right 1.25em center/35px auto;
  border: solid 2px #DC7D00;
  border-radius: 35px;
  line-height: 1;
  letter-spacing: 0.09em;
  text-decoration: none;
  font-size: 3.33vw;
  color: #DC7D00;
  transition: 0.3s;
}

.p-tamagonokimi-content-btn:hover,
.p-tamagonokimi-content-btn:active,
.p-tamagonokimi-content-btn:focus {
  background-position: center right 1em;
  color: #DC7D00;
}

@media screen and (min-width: 751px) {
  .p-tamagonokimi-content-btn {
    width: 554px;
    height: 68px;
    margin: 3.5% auto 0;
    font-size: 22.5px;
  }
}


/* ==========================================
  GLOBAL STYLES
========================================== */
html {
	overflow-x: hidden;
	width: 100%;
}

body {
    margin: 0;
    padding: 0;
}


/* ==========================================
  HEADER
========================================== */
header {
  position: relative;
  background-color: #FFF;
  top: 0;
  width: 100%;
  z-index: 10;
}

.l-roots__siteroot {
  max-width: 165px;
}

.l-roots__siteroot img {
  display: block;
  height: auto;
  width: 100%;
}

@media screen and (max-width:768px) {
  .header {
    position: absolute;
  }
  .header__inner {
    height: 65.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 16px;
  }
  .l-roots__siteroot {
    max-width: 152px;
  }
}

@media screen and (min-width:769px) {
  .header__inner {
    display: block;
    align-items: center;
    height: 55px;
    margin-inline: auto;
    padding: 16px 0 9px 40px;
    max-width: 1040px;
    width: 100%;
  }
  .l-roots__siteroot {
    margin-right: 97px;
  }
}


/* ==========================================
  MAIN CONTENT
========================================== */
.p-tamagonokimi .main {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 0;
  background-color: #fff;
}

.p-tamagonokimi-content {
  position: relative;
  color: #DC7D00;
  z-index: 1;
}

.p-tamagonokimi-video {
  position: relative;
  width: 640px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .p-tamagonokimi .main {
    height: 618vw;
  }
  .p-tamagonokimi-video {
    width: 82.1382007823vw;
  }
}
@media screen and (min-width: 769px) {
  .p-tamagonokimi .main {
    width: 1400px;
    padding: 0 0 130px;
    margin: 0 auto;
  }
  .p-tamagonokimi-video {
    width: 663px;
  }
}
@media screen and (min-width: 1400px) {
  .p-tamagonokimi .main {
    overflow: visible;
  }
}

.p-tamagonokimi-content .itm {
  width: 100%;
}
.p-tamagonokimi-content .itm1 {
  padding: 81% 0 0;
}
.p-tamagonokimi-content .itm2 {
  margin: 25% 0 0;
}
.p-tamagonokimi-content .itm3 {
  margin: 24% 0 0;
}
.p-tamagonokimi-content .itm4 {
  margin: 40% 0 0;
}
.p-tamagonokimi-content .itm4 {
  margin: 74% 0 0;
}
.p-tamagonokimi-content .itm5 {
  margin: 34% 0 0;
}
.p-tamagonokimi-content .itm6 {
  margin: 13% 0 0;
}
.p-tamagonokimi-content .itm7 {
  margin: 42% 0 0;
}
.p-tamagonokimi-content .itm8 {
  margin: 15% auto 0;
  max-width: 80%;
}
.p-tamagonokimi-content .itm9 {
  margin: 15% 0 0;
}

.p-tamagonokimi-content .itm img {
  display: block;
  width: 100%;
  height: auto;
}

.p-tamagonokimi-content .p-kimi-content-logo {
  width: 58%;
  margin: 0 0 0 25%;
}

@media screen and (min-width: 769px) {
  .p-tamagonokimi-content .itm1 {
    padding: 35% 0 0;
  }
  .p-tamagonokimi-content .itm2 {
    margin: 14.5% 0 0;
  }
  .p-tamagonokimi-content .itm3 {
    margin: 16.5% 0 0;
  }
  .p-tamagonokimi-content .itm4 {
    margin: 40% 0 0;
  }
  .p-tamagonokimi-content .itm4 {
    margin: 43% 0 0;
  }
  .p-tamagonokimi-content .itm5 {
    margin: 26% 0 0;
  }
  .p-tamagonokimi-content .itm6 {
    margin: 4.5% 0 0;
  }
  .p-tamagonokimi-content .itm7 {
    margin: 23.53% 0 0;
  }
  .p-tamagonokimi-content .itm8 {
    margin: 11% 0 0;
    max-width: 100%;
  }
  .p-tamagonokimi-content .itm9 {
    margin: 12% 0 0;
  }
  .p-tamagonokimi-content .p-kimi-content-logo {
    width: 28%;
    margin: 0 0 0 38%;
  }
}

.p-tamagonokimi-content .itm h1 {
  width: 100%;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
  font-size: 73.5px;
}

.p-tamagonokimi-content .itm p {
  font-size: 30px;
  font-size: 4vw;
  line-height: 2.06;
  letter-spacing: 0.15em;
  text-align: left;
}

.p-tamagonokimi-content .itm h1 {
  font-size: 9.8vw;
}

.p-tamagonokimi-content .itm2 p {
  margin: 0 0 0 8.5%;
}
.p-tamagonokimi-content .itm3 p {
  margin: 0 0 0 27.5%;
  width: 100%;
}
.p-tamagonokimi-content .itm4 p {
  margin: 0 0 0 8.5%;
  width: 100%;
}
.p-tamagonokimi-content .itm5 p {
  margin: 0 0 0 44%;
  width: 100%;
}
.p-tamagonokimi-content .itm6 p {
  margin: 0 0 0 22%;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .p-tamagonokimi-content .itm h1 {
    margin: 0 0 0 .5%;
    letter-spacing: 0.2em;
    font-size: 73.54px;
  }
  .p-tamagonokimi-content .itm p {
    font-size: 27px;
    line-height: 2.037;
  }
  .p-tamagonokimi-content .itm2 p {
    margin: 0 0 0 12.5%;
  }
  .p-tamagonokimi-content .itm3 p {
    margin: 0 0 0 35.5%;
    width: 100%;
  }
  .p-tamagonokimi-content .itm4 p {
    margin: 0 0 0 12.5%;
    width: 100%;
  }
  .p-tamagonokimi-content .itm5 p {
    margin: 0 0 0 37%;
    width: 100%;
  }
  .p-tamagonokimi-content .itm6 p {
    margin: 0 0 0 36.5%;
    width: 100%;
  }
}


/* ==========================================
  TAMAGO NO KIMI ILLUSTRATIONS
========================================== */
.p-tamagonokimi-kimi-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.p-tamagonokimi-kimi-container .kimi {
  position: relative;
  width: 100%;
  height: 10.725%;
  margin: 0 0 0;
}

.p-tamagonokimi-kimi-container .kimi img {
  display: block;
  width: 100%;
  height: auto;
}

.p-tamagonokimi-kimi-container.kimi1 {
  margin: -10% 0 0;
}
.p-tamagonokimi-kimi-container .kimi2 { /* PCのみ表示 */
  display: none;
  margin: -18% 0 0;
}
.p-tamagonokimi-kimi-container .kimi3 {
  margin: -28% 0 0;
}
.p-tamagonokimi-kimi-container .kimi4 {
  margin: 15.5% 0 0;
}
.p-tamagonokimi-kimi-container .kimi5 { /* PCのみ表示 */
  display: none;
  margin: -35% 0 0;
}
.p-tamagonokimi-kimi-container .kimi6 {
  margin: -37% 0 0;
}
.p-tamagonokimi-kimi-container .kimi7 {
  margin: 15% 0 0;
}
.p-tamagonokimi-kimi-container .kimi8 {
  margin: 21.5% 0 0;
}
.p-tamagonokimi-kimi-container .kimi9 {
  margin: -24% 0 0;
}
.p-tamagonokimi-kimi-container .kimi10 {
  margin: 19% 0 0;
}
.p-tamagonokimi-kimi-container .kimi11 {
  margin: -7% 0 0;
}
.p-tamagonokimi-kimi-container .kimi12 {
  margin: -47% 0 0;
}

@media screen and (min-width: 769px) {
  .p-tamagonokimi-kimi-container .kimi {
    width: 100%;
    height: 510px;
  }
  .p-tamagonokimi-kimi-container .kimi1 {
    margin: -6.5% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi2 {
    display: block;
    margin: -18% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi3 {
    margin: -33% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi4 {
    margin: 0.5% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi5 {
    display: block;
    margin: -15% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi6 {
    margin: -17% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi7 {
    margin: -26% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi8 {
    margin: 2.25% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi9 {
    margin: -20% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi10 {
    margin: 6% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi11 {
    margin: -9% 0 0;
  }
  .p-tamagonokimi-kimi-container .kimi12 {
    margin: -22% 0 0;
  }
}

.p-tamagonokimi-kimi-container .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 68%;
  z-index: -1;
}

.p-tamagonokimi-kimi-container .kimi1 .circle {
  top: 0;
  left: 4.5%;
}
.p-tamagonokimi-kimi-container .kimi2 .circle { /* PCのみ表示 */
  top: 0;
  left: 0;
}
.p-tamagonokimi-kimi-container .kimi3 .circle {
  top: 0;
  left: 86%;
}
.p-tamagonokimi-kimi-container .kimi4 .circle {
  top: 0;
  left: 50.5%;
}
.p-tamagonokimi-kimi-container .kimi5 .circle { /* PCのみ表示 */
  top: 0;
  left: 0;
}
.p-tamagonokimi-kimi-container .kimi6 .circle {
  top: 0;
  left: -53.5%;
}
.p-tamagonokimi-kimi-container .kimi7 .circle {
  top: 0;
  left: 9%;
}
.p-tamagonokimi-kimi-container .kimi8 .circle {
  top: 0;
  left: 62%;
}
.p-tamagonokimi-kimi-container .kimi9 .circle {
  top: 0;
  left: -27%;
}
.p-tamagonokimi-kimi-container .kimi10 .circle {
  top: 0;
  left: 29%;
}
.p-tamagonokimi-kimi-container .kimi11 .circle {
  top: 0;
  left: -44%;
}
.p-tamagonokimi-kimi-container .kimi12 .circle {
  top: 0;
  left: 63%;
}
@media screen and (min-width: 769px) {
  .p-tamagonokimi-kimi-container .circle {
    width: 510px;
  }
  .p-tamagonokimi-kimi-container .kimi1 .circle {
    top: 0;
    left: 39%;
  }
  .p-tamagonokimi-kimi-container .kimi2 .circle { /* PCのみ表示 */
    top: 0;
    left: -11%;
  }
  .p-tamagonokimi-kimi-container .kimi3 .circle {
    top: 0;
    left: 85.5%;
  }
  .p-tamagonokimi-kimi-container .kimi4 .circle {
    top: 0;
    left: 57.5%;
  }
  .p-tamagonokimi-kimi-container .kimi5 .circle { /* PCのみ表示 */
    top: 0;
    left: -12.5%;
  }
  .p-tamagonokimi-kimi-container .kimi6 .circle {
    top: 0;
    left: 88.75%;
  }
  .p-tamagonokimi-kimi-container .kimi7 .circle {
    top: 0;
    left: 27%;
  }
  .p-tamagonokimi-kimi-container .kimi8 .circle {
    top: 0;
    left: 62.5%;
  }
  .p-tamagonokimi-kimi-container .kimi9 .circle {
    top: 0;
    left: -1.5%;
  }
  .p-tamagonokimi-kimi-container .kimi10 .circle {
    top: 0;
    left: 46%;
  }
  .p-tamagonokimi-kimi-container .kimi11 .circle {
    top: 0;
    left: -13%;
  }
  .p-tamagonokimi-kimi-container .kimi12 .circle {
    top: 0;
    left: 69%;
  }
}

.p-tamagonokimi-kimi-container .photo {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 48.14%;
  height: auto;
  z-index: 1;
}

.p-tamagonokimi-kimi-container .photo img {
  display: block;
  width: 100%;
  height: auto;
}

.p-tamagonokimi-kimi-container .kimi1 .photo {
  top: 7%;
  left: 14%;
}
.p-tamagonokimi-kimi-container .kimi2 .photo { /* PCのみ表示 */
  top: 4%;
  left: 3%;
  width: 50%;
}
.p-tamagonokimi-kimi-container .kimi4 .photo {
  top: 4.5%;
  left: 55%;
  width: 54.5%;
}
.p-tamagonokimi-kimi-container .kimi5 .photo { /* PCのみ表示 */
  top: 3%;
  left: 15%;
  width: 55%;
}
.p-tamagonokimi-kimi-container .kimi7 .photo {
  top: 3%;
  left: 15%;
  width: 55%;
}
.p-tamagonokimi-kimi-container .kimi8 .photo {
  top: 8%;
  left: 70.5%;
  width: 48.14%;
}
.p-tamagonokimi-kimi-container .kimi9 .photo {
  top: 6%;
  left: -19%;
  width: 49%;
}
.p-tamagonokimi-kimi-container .kimi10 .photo {
  top: -55%;
  left: 54%;
  width: 54%;
}

@media screen and (min-width: 769px) {
  .p-tamagonokimi-kimi-container .photo {
    width: 350px;
  }
  .p-tamagonokimi-kimi-container .kimi1 .photo {
    top: 6%;
    left: 44%;
    width: 26%;
  }
  .p-tamagonokimi-kimi-container .kimi2 .photo { /* PCのみ表示 */
    top: 6%;
    left: -6%;
    width: 26%;
  }
  .p-tamagonokimi-kimi-container .kimi4 .photo {
    top: 1.5%;
    left: 61%;
    width: 30%;
  }
  .p-tamagonokimi-kimi-container .kimi5 .photo { /* PCのみ表示 */
    top: 1%;
    left: -10.5%;
    width: 30%;
  }
  .p-tamagonokimi-kimi-container .kimi7 .photo {
    top: 2%;
    left: 30%;
    width: 30%;
  }
  .p-tamagonokimi-kimi-container .kimi8 .photo {
    top: 6%;
    left: 67.5%;
    width: 26%;
  }
  .p-tamagonokimi-kimi-container .kimi9 .photo {
    top: 6%;
    left: 3.5%;
    width: 26%;
  }
  .p-tamagonokimi-kimi-container .kimi10 .photo {
    top: -53%;
    left: 60%;
    width: 28%;
  }
}


/* ==========================================
  ANIMATIONS & EFFECTS
========================================== */
body.p-tamagonokimi {
  animation: fadein 1.5s ease-in-out forwards;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.p-tamagonokimi .fadein {
  opacity: 0;
  transition: 1s ease-in-out;
}

.p-tamagonokimi .fadein-delay {
  transition-delay: 1s;
}

.p-tamagonokimi .fadein-kimi {
  scale: 0.9;
  translate: 0 0;
}

.p-tamagonokimi .fadein-left {
  translate: -50px 0;
}

.p-tamagonokimi .fadein-right {
  translate: 50px 0;
}

.p-tamagonokimi .fadein-up {
  translate: 0 20px;
}

.p-tamagonokimi .fadein-inview {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}

.p-tamagonokimi .shake {
  transition: 0.3s;
}

/*
.p-tamagonokimi .shake {
  animation: shake 1s linear infinite;
}

@keyframes .p-tamagonokimi .shake {
  0% { transform: translateX(0); }
  50% { transform: rotate(-3deg); }
  100% { transform: translateX(0); }
}
*/