@charset "UTF-8";

/* reset.css */
*, *::before, *::after          { box-sizing: border-box; }
html                            { font-family: 'Zen Maru Gothic', sans-serif; color: #2F2F2F; }
body                            { width: 100%; margin: 0 auto; }
main                            { margin: 0 auto; text-align: center; }
ul, li                          { margin: 0; padding: 0; list-style: none; }
p, span, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; font-size: 1rem; }
p, span                         { line-height: 1.6; }
a                               { text-decoration: none; color: inherit; }
th                              { font-weight: normal; }
img                             { max-width: 100%; height: auto; display: block; }
button                          { all: unset }
@media screen and (max-width: 640px) {
    section                     { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
    section.fade-in             { opacity: 1; transform: translateY(0); }
}

/* display */
.block                            { display: block; }
.inline-block                     { display: inline-block; }
.flex                             { display: flex; }
.show                             { display: block !important; }
.hidden                           { display: none !important; }

.pc                               { display: block !important; }
.pc-flex                          { display: flex !important; }
.sp                               { display: none !important; }
.sp-flex                          { display: none !important; }

/* SP用（640px以下） */
@media (max-width: 640px) {
  .pc                             { display: none !important; }
  .pc-flex                        { display: none !important; }
  .sp                             { display: block !important; }
  .sp-flex                        { display: flex !important; }
}

/* background */
.bg-center-bottom                  { background-position: center bottom !important; }
.no-repeat                         { background-repeat: no-repeat !important; }

/* width height (rem換算: 1rem = 16px) */
.w100p                             { width: 100% !important; }
.w60                               { width: 3.75rem !important; }
.w94                               { width: 5.875rem !important; }
.w170                              { width: 10.625rem !important; }
.w174                              { width: 10.875rem !important; }
.w190                              { width: 11.875rem !important; }
.w204                              { width: 12.75rem !important; }
.w208                              { width: 13rem !important; }
.w320                              { width: 20rem !important; }

.h50p                              { height: 50% !important; }
.h100p                             { height: 100% !important; }
.h20                               { height: 1.25rem !important; }
.h30                               { height: 1.875rem !important; }
.h36                               { height: 2.25rem !important; }
.h40                               { height: 2.5rem !important; }
.h50                               { height: 3.125rem !important; }
.h65                               { height: 4.0625rem !important; }
.h74                               { height: 4.625rem !important; }
.h114                              { height: 7.125rem !important; }
.h128                              { height: 8rem !important; }
.h140                              { height: 8.75rem !important; }
.h169                              { height: 10.5625rem !important; }
.h180                              { height: 11.25rem !important; }
.h217                              { height: 13.5625rem !important; }
.h320                              { height: 20rem !important; }
.h592                              { height: 592px !important; }

.mw500                             { max-width: 31.25rem !important; }

/* padding margin (rem換算) */
.pt10                              { padding-top: 0.625rem !important; }
.pt30                              { padding-top: 1.875rem !important; }
.pb10                              { padding-bottom: 0.625rem !important; }
.pb20                              { padding-bottom: 1.25rem !important; }
.mt-10                             { margin-top: -0.625rem !important; }
.mt10                              { margin-top: 0.625rem !important; }
.mt20                              { margin-top: 1.25rem !important; }
.mt30                              { margin-top: 1.875rem !important; }
.m0                                { margin: 0 !important; }
.ml5                               { margin-left: 0.3125rem !important; }
.mb5                               { margin-bottom: 0.3125rem !important; }
.mb10                              { margin-bottom: 0.625rem !important; }
.mb15                              { margin-bottom: 0.9375rem !important; }
.mb20                              { margin-bottom: 1.25rem !important; }
.mb30                              { margin-bottom: 1.875rem !important; }
.mb50                              { margin-bottom: 3.125rem !important; }

/* line-height */
.lh1                               { line-height: 1 !important; }
.lh12                              { line-height: 1.2 !important; }
.lh16                              { line-height: 1.6 !important; }

/* font */
.bold                              { font-weight: bold !important; }
.fs12                              { font-size: 0.75rem !important; }
.fs14                              { font-size: 0.875rem !important; }
.fs16                              { font-size: 1rem !important; }
.fs18                              { font-size: 1.125rem !important; }
.fs20                              { font-size: 1.25rem !important; }
.fs22                              { font-size: 1.375rem !important; }
.fs24                              { font-size: 1.5rem !important; }
.fs26                              { font-size: 1.625rem !important; }
.fs28                              { font-size: 1.75rem !important; }
.fs30                              { font-size: 1.875rem !important; }
.fs32                              { font-size: 2rem !important; }
.fs40                              { font-size: 2.5rem !important; }

/* font-style */
.poppins                           { font-family: 'Poppins', sans-serif !important; }

/* color */
.blue                              { color: #0073ff !important; }
.red                               { color: #FF0000 !important; }
.light-blue                        { color: #3D93FF !important;}

/* align */
.t-left                            { text-align: left !important; }
.t-center                          { text-align: center !important; }
.t-right                           { text-align: right !important; }

/* rotate */
.deg5                              { display: inline-block; transform: rotate(5deg) !important; }
.deg10                             { display: inline-block; transform: rotate(10deg) !important; }