@charset "UTF-8";
/**
 * お年玉CSS（2019.12.16作成／2020.12.19改修／2021.12.21改修／2022.12.24改修／2023.12.24改修／2024.12.24改修／2025.12.14改修）
 */

/* ------------------------------------------------------------------------------------------------------------------ import */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');


/* ------------------------------------------------------------------------------------------------------------------ Recet */

.ny2026 {
font-size: 16px;
line-height: 1;
-webkit-text-size-adjust: 100%;
}

.ny2026 * {
font-family: "Lato", "YuGothic", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color:#000;
}

.ny2026 p, .ny2026 li, .ny2026 dt, .ny2026 dd {
line-height: 1.75em;
}

.ny2026 .section {
padding: 100px 0;
}

.section p {
text-align: justify;
margin-top: 0.75em;
}

.wrap.section p {
text-align: center;
}

.section p.notice {
font-size: 75%;
margin-top: 2em;
}

.ny2026 h2 + p, .ny2026 h3 + p, .ny2026 h4 + p, 
.section p:nth-child(1),
.ny2026 h2 + h3, .ny2026 h3 + h4 {
margin-top: 0;
}

.ny2026 a {
color: #d52027;
text-decoration: underline;
}

.ny2026 img {
vertical-align: bottom;
}

.ny2026 *::after, .ny2026 *::before {
box-sizing: border-box;
}


/* ------------------------------------------------------------------------------------------------------------------ Style */

.clearfix {
overflow: hidden;
position: relative;
}

span.br {
display: block;
}

.subhead:nth-child(1) {
margin-top: 0;
}


/* ------------------------------------------------------------------------------------------------------------------ Layout */

/**
 * main
 */

#main {
background: linear-gradient(180deg, #d29700 0%, #f6d741 50%, #f3c517 100%);
text-align: center;
padding-bottom: 2.5em;
position: relative;
z-index: 1;
}

#main::after {
background: url("../img/pat_jp.png") repeat center top;
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

#main .wrap {
width: 100%;
max-width: 1080px;
}

#main #pageId {
background: #d52027;
margin-bottom: 1.25em;
position: relative;
}

#main #pageId #headline {
display: block;
}

#main #pageId #headline img {
width: 100%;
height: auto;
}

#main #deadline {
display: block;
position: absolute;
right: 0;
bottom: 20px;
left: 0;
}

#main #deadline img {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
display: inline-block;
width: 140px;
height: auto;
}

#main #gift {
display: flex;
flex-wrap: wrap;
justify-content: right;
width: 80%;
margin-top: 1.25em;
margin-left: auto;
}

#main #gift #notes {
display: flex;
align-items: center;
justify-content: center;
}

#main #gift #notes .inner {
display: flex;
flex-direction: column;
justify-content: center;
width: calc(100% - 11.2%);
height: calc(100% - 11.2%);
position: relative;
z-index: 2;
}

#main > p.notice.wrap {
display: block;
font-size: 75%;
font-weight: 700;
text-align: right;
line-height: 1.375em;
margin-top: 1.125em;
}

#main #gift .row {
width: 31.25%;
height: auto;
max-width: 270px;
margin: 5px;
-webkit-perspective: 800px;
perspective: 800px;
position: relative;
}

.active {
-webkit-transform: translateZ(0px) rotateY(180deg) !important;
-moz-transform: translateZ(0px) rotateY(180deg) !important;
/*transform: translateZ(0px) rotateY(180deg) !important;*/
}

.miss .active {
-webkit-transform: translateZ(0px) rotateY(-180deg) !important;
-moz-transform: translateZ(0px) rotateY(-180deg) !important;
/*transform: translateZ(0px) rotateY(180deg) !important;*/
}

.active::after {
display: none;
}

.envelope {
cursor: pointer;
display: inline-block;
width: 100%;
height: auto;
-moz-backface-visibility: hidden;
/*backface-visibility: hidden;*/
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-100px);
-moz-transform: translateZ(-100px);
/*transform: translateZ(-100px);*/
transition: all 0.4s cubic-bezier(0.165, 0.8, 0.4, 1);
position: relative;
}

.envelope::after {
border-radius: 5px;
/*box-shadow: 0 10px 48px -4px rgba(0, 0, 0, 0.2);*/
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
content: "";
width: 100%;
height: 100%;
opacity: 0.5;
transition: all 0.5s cubic-bezier(0.165, 0.8, 0.4, 1.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}

.envelope:hover {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}

.envelope:hover::after {
opacity: 1;
}

.envelope .side {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #fff;
border-radius: 0;
border: 1px solid #f6d741;
box-sizing: border-box;
-ms-transition: 0.5s;
-ms-transform-style: preserve-3d;
width: 100%;
height: 100%;
}

.envelope.active .back {
-ms-transform: rotateY(0deg);
}

.envelope.active .front {
-ms-transform: rotateY(180deg);
}

.envelope .front {
z-index: 2;
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}

.envelope .front img {
width: 100%;
height: auto;
}

.envelope .back {
display: flex;
flex-direction: column;
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}

.bl .envelope .back {
background: url("../img/pat_bl.svg") repeat left top #32adc6;
}

.gr .envelope .back {
background: url("../img/pat_gr.svg") repeat left top #45b035;
}

.pi .envelope .back {
background: url("../img/pat_pi.svg") repeat left top #ed798e;
}

.or .envelope .back {
background: url("../img/pat_or.svg") repeat left top #ed6d00;
}

.back {
position: relative;
}

.envelope .result {
display: flex;
flex-direction: column;
position: relative;
}

.envelope .result .btn {
display: flex;
width: 74.075%;
height: 14.8149%;
margin-left: auto;
margin-right: auto;
position: absolute;
right: 0;
bottom: 20.3704%;
left: 0;
z-index: 100;
}

.back .btn-link {
display: flex;
align-items: center;
width: 100%;
line-height: 1;
}

.back .btn-link a {
background: #ed6d00;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 87.5%;
font-weight: 700;
color: #fff;
text-align: center;
text-decoration: none;
position: relative;
z-index: 200;
}

.back .btn-link input {
border: 1px solid #dcb84b;
border-radius: 0;
box-sizing: border-box;
-webkit-appearance: none;
width: 100%;
height: 100%;
font-family: "Lato", sans-serif;
font-size: 87.5%;
font-weight: 700;
text-align: center;
outline: none;
padding: 0;
}

#main #greeting p {
font-size: 87.5%;
font-weight: 700;
text-align: justify;
}

#main #greeting p.moreLink {
margin: 1.5em 0;
}

#main #greeting p.moreLink a {
background: #d52027;
display: inline-block;
width: calc(100% - 4px); 
height: 42px;
font-size: 87.5%;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 42px;
margin: 2px;
position: relative;
}

#main #greeting p.moreLink a::after {
border: 1px solid #d52027;
content: "";
display: block;
width: calc(100% + 4px); 
height: 46px;
position: absolute;
top: -2px;
left: -2px;
}

#main #greeting p.gift-notice {
font-size: 62.5%;
font-weight: 400;
text-align: left;
line-height: 1.5em;
}

/**
 * entry
 */

#entry {
background: url("../img/pat_square.svg") repeat center top #d52027;
padding: 60px 0;
}

#entry .subhead {
text-align: center;
margin-bottom: 40px;
}

#entry .subhead span {
display: inline-block;
}

#entry .wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 1080px;
text-align: center;
}

#entry div.lineup {
background: #fff;
display: flex;
flex-direction: column;
width: 30%;
max-width: 324px;
/*margin: 2.5em 0 0;*/
padding-top: 0.9375em;
padding-right: 0.9375em;
padding-bottom: calc(0.9375em + 2px);
padding-left: 0.9375em;
position: relative;
}

#entry div.lineup a.pic {
background: #fff;
display: block;
text-decoration: none;
margin-bottom: 1.25em;
overflow: hidden;
}

#entry div.lineup a.pic img {
display: block;
transition-duration: 0.25s;
width: 100%;
height: auto;
}

#entry div.lineup a.pic img:hover {
transform: scale(1.1);
transition-duration: 0.25s;
}

#entry div.lineup .course {
/*font-size: 93.75%;*/
font-size: clamp(0.844rem, 0.166vw + 0.805rem, 0.938rem);
font-weight: 700;
color: #d52027;
line-height: 1.5;
}

#entry div.lineup .course span.goal {
display: block;
/*font-size: 125%;*/
font-size: clamp(1.125rem, 0.331vw + 1.047rem, 1.313rem);
font-weight: 700;
color: #000;
line-height: 1.5;
margin-top: 0.5em;
margin-bottom: 1em;
}

#entry .moreLink {
text-align: center;
margin-top: auto;
}

#entry .moreLink a {
background: #d52027;
display: inline-block;
width: calc(100% - 4px);
height: 36px;
font-size: 87.5%;
font-weight: 700;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 36px;
position: relative;
}

#entry .moreLink a::after {
border: 1px solid #d52027;
content: "";
display: block;
width: calc(100% + 4px);
height: 40px;
position: absolute;
top: -2px;
left: -2px;
}


/* ------------------------------------------------------------------------------------------------------------------ media queries */

@media only screen and (min-width: 1025px) {

#main .wrap {
display: flex;
margin: 0 auto;
}

#main #copy {
width: 17.5%;
max-width: 189px;
}

#main #gift .row:nth-child(3n) {
margin-right: 0;
}

}

@media only screen and (max-width: 1024px) {
	
#main #copy {
width: 100%;
}

#main #pageId {
margin-bottom: 2em;
}

#main #gift {
width: 100%;
justify-content: center;
}

#main #greeting {
width: 90%;
max-width: calc(840px - 10px);
margin: 0 auto;
}

#main #greeting p {
text-align: center;
}

#main > p.notice.wrap {
width: 90%;
max-width: calc(840px - 10px);
text-align: center;
}

#entry .wrap {
width: 90%;
max-width: calc(840px - 10px);
}

/*#entry div.lineup {
padding-top: 0;
padding-right: 0;
padding-left: 0;
}*/

#entry div.lineup .course {
/*font-size: min(2.25vw, 100%);*/
text-align: justify;
}

#entry div.lineup .course span.goal {
display: block;
}

/*#entry div.lineup .course span.goal .br {
display: inline-block;
}*/

/*#entry div.lineup .course, #entry .moreLink {
margin-right: 0.9375em;
margin-left: 0.9375em;
}*/

#entry .moreLink a {
font-size: 75%;
}

}

@media only screen and (max-width: 834px) {

#main::after {
background-size: 425px auto;
}

#main #greeting {
width: 93.75%;
max-width: inherit;
}

#main > p.notice.wrap {
width: 93.75%;
text-align: center;
max-width: inherit;
}

#main #gift {
max-width: 864px;
margin: 0 auto;
}

#main #gift .row {
max-width: 270px;
margin: 1%;
}

#entry .wrap {
width: 93.75%;
max-width: inherit;
}

}

@media only screen and (min-width: 641px) {

#entry .wrap {
column-gap: 5%;
row-gap: min(4.28175vw, 3.375rem);
}

/*#entry div.lineup:nth-child(-n+3) {
margin-top: 0;
margin-right: 0;
margin-left: 5%;
}

#entry div.lineup:nth-child(1) {
margin-left: 0;
}

#entry div.lineup:nth-child(3) {
margin-right: 0;
}*/

#notes {
order: 5;
}

#envelope1 {
order: 1;
}

#envelope2 {
order: 2;
}

#envelope3 {
order: 3;
}

#envelope4 {
order: 4;
}

#envelope5 {
order: 6;
}

#envelope6 {
order: 7;
}

#envelope7 {
order: 8;
}

#envelope8 {
order: 9;
}

}

@media only screen and (max-width: 640px) {

#main #gift .row {
width: 47.5%;
max-width: 270px;
margin: 1.25%;
}

#main #gift #notes {
margin: 0 26.25% 1.25%;
}

#entry .wrap {
column-gap: 2.5%;
row-gap: min(4.28175vw, 3.375rem);
}

}

@media only screen and (min-width: 481px) and (max-width: 834px) {

#entry div.lineup {
width: 47.5%;
}

/*#entry div.lineup .course {
font-size: 87.5%;
}

#entry div.lineup .course span.goal {
font-size: 112.5%;
}*/

}

@media only screen and (max-width: 480px) {

#main #copy {
max-width: inherit;
}

#entry .wrap {
width: 90%;
}

#entry div.lineup {
width: 100%;
margin: 5% 0 0 0;
}

#entry div.lineup:nth-child(1) {
margin-top: 0;
}

}