html {
  box-sizing: border-box;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  tab-size: 4;
}

*,
::before,
::after {
  background-repeat: no-repeat;
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

* {
  padding: 0;
  margin: 0;
  min-height: 0; /* Safari clamp関数対策 */
  -webkit-text-size-adjust: 100%; /* Safari対策 */
}

hr {
  overflow: visible;
  height: 0;
  color: inherit;
}

details,
main {
  display: block;
  position: relative;
}

summary {
  display: list-item;
}

[hidden] {
  display: none;
}

abbr[title] {
  border-bottom: none;
  /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  text-decoration: underline dotted;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline-width: 0;
}

button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

pre {
  font-size: 1em;
}

sub,
sup {
  font-size: 65%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: inherit;
  text-indent: 0;
}

iframe {
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border-style: none;
  -webkit-backface-visibility: hidden;
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align:bottom;
}

/* ====================================================
   Accessibility
======================================================= */
/* Specify the progress cursor of updating elements */
[aria-busy=true] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled=true] {
  cursor: default;
}

ul,ol,li {
  list-style: none;
  padding-left: 0;
  zoom: normal;
}

html {
  overflow-x: hidden;
  width: 100%;
}

/*ベースとしてフォントはMontserratを読み込ませる*/
body {
  background:#FFF9F4;
  color: #5E5654;
  font-size: 1.6rem;
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 500;
  overflow-x: hidden;
  width: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; /* Safari */
}
body::before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background-image:url(../img/100milcp/back.jpg);
  background-repeat: no-repeat;
  background-position:center top;
  background-size:cover;
}

a {
  text-decoration: none;
}

address {
  font-style: normal;
}

/*ーーーーーーーーーー
 wrapper
ーーーーーーーーーーー*/

#wrapper {
  overflow: hidden;
}

.serif {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/*ーーーーーーーーーー
header
ーーーーーーーーーーー*/

.header {
  position: fixed;
  right: 0;
  top: 40px;
  z-index:99;
}

.nav a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.nav a:hover {
  transform: scale(0.95,0.95);
}

@media screen and (min-width: 768px) {
  main {
    position: relative;
    padding-top: 80px;
  }
  .header {
    top: 40px;
    position: fixed;
    right: 40px;
	margin: 0 auto;
  }
  .nav a {
    background: rgba(255,119,96,0.3);
    border-radius: 9999px;
    padding: 0.4em 1.6em 0.7em 1.6em;
  }
  .nav a img { 
	vertical-align: middle;
	width: auto; 
	height: 16px;
  }
}
@media screen and (min-width:768px) and ( max-width:1150px) {
.header {right: 4%;}
}
@media screen and (max-width: 767px) {
  .header {
    right: 18px;
    top: 18px;
  }
  .nav a {
    display: block;
    cursor: pointer;
    border: none;
    text-align:left;
    padding: 0;
  }
  .nav img {
    width: auto;
    max-width: 55px;
  }
}

/*ーーーーーーーーーー
.top
ーーーーーーーーーーー*/

#top {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.top-content {
  margin: 0 auto;
  padding: 100px 0 80px 0;
  position: relative;
  text-align: center;
}

#logo-box {
  position: relative;
  width: 58%;
  max-width: 624px;
  margin: -80px auto 45px auto;
  z-index: 2;
}

@media (max-width: 1020px) {
  .top-content { padding: 80px 0 3% 0;}
}
@media (max-width: 767px) {
  .top-content { padding: 70px 0 0 0;}
  #logo-box{ width: 90%; margin: 0 auto 2em auto;}
}

h1.logo_01 {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.logo_01.is-animated {
  animation: fadeup_logo01 0.4s ease-in 1s forwards;
  opacity: 0;
}
@keyframes fadeup_logo01 {
  0% {
    transform: scale(0.8);
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    transform: translateY(0);
  }
}

.logo_02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  mask-repeat: no-repeat;
  mask-origin: border-box;
  mask-clip: border-box;
  mask-image: url(../img/100milcp/logo_02_mask.png);
  mask-size: 100% auto;
  mask-position: 0 0;
  z-index: 2;
  opacity: 0;
  animation: slideTextureLineup 0.5s ease-in 1.6s forwards;
}
@keyframes slideTextureLineup {
  0% {
    opacity: 0;
    mask-position: -300px 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    mask-position: 0 0;
  }
}

h1.logo_01 img,
p.logo_02 img {
  width: 100%;
  height: auto;
}

p.top_txt {
  position: sticky;
  font-size: clamp( 21px, calc( 15px + 0.8750000000000001vw ), 28px );
  letter-spacing: 0.06em;
  line-height: 1.8;
  text-align: center;
  opacity: 0;
  animation: top_txt_fadein 0.6s ease 1.1s forwards;
}	
@keyframes top_txt_fadein {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.obje_01 {
  opacity: 0;
  width: 32%;
  display: block;
  position: absolute;
  left: -8%;
  top: -15px;
  z-index: 2;
}

.obje_02 {
  opacity: 0;
  width: 20%;
  position: absolute;
  left: 5%;
  top: 39%;
  z-index: 2;
}

.obje_03 {
  opacity: 0;
  width: 32%;
  position: absolute;
  right: -4.6%;
  bottom: -2%;
  z-index: 2;
}

.obje_01.is-animated {
  animation: fadeInScale 0.5s forwards 2.1s;
  max-width: 369px;
  height: auto;
}

.obje_02.is-animated {
  animation: fadeInScale 0.5s forwards 2.3s;
  max-width: 220px;
  height: auto;
}

.obje_03.is-animated {
  animation: fadeInScale 0.5s forwards 2.4s;
  max-width: 380px;
  height: auto;
}

@media screen and (min-width:768px) and ( max-width:1191px) {
.obje_01 { width: 29%; left: -4.5%;}
.obje_03 { width: 28%; right: -2%; bottom: 2%;}
}

@media screen and ( min-width:768px) {
.obje_05, .obje_06, .obje_07 { display:none;}
}

@media screen and ( max-width:767px) {
h1.logo{ width: 90%; margin: 0 auto 24px auto;}
p.top_txt { font-size: 4.1vw; margin-bottom: 34px;}
.obje_01, .obje_02, .obje_03 { display:none;}
.obje{ position: relative; width: 100%; margin-bottom:3em;}
.obje_05 {
  opacity: 0;
  width: 41.60%;
  margin: 0 0 0 9.6%;
  z-index: 2;
}
.obje_06 {
  opacity: 0;
  width: 66.67%;
  margin: -16% 0 0 32.53%;
  z-index: 1;
}
.obje_07 {
  opacity: 0;
  width: 41.60%;
  margin: -16% 0 0 9.6%;
  z-index: 1;
}
.obje_05.is-animated {
  animation: fadeInScale 0.5s forwards 2.4s;
  max-width: 760px;
  height: auto;
}
.obje_06.is-animated {
  animation: fadeInScale 0.5s forwards 0.1s;
  max-width: 736px;
  height: auto;
}
.obje_07.is-animated {
  animation: fadeInScale 0.5s forwards 0.2s;
  max-width: 440px;
  height: auto;
}
}
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*ーーーーーーーーーー
 campaign-01
ーーーーーーーーーーー*/

#campaign-01,
#campaign-02,
#campaign-02n,
#campaign-03 {
  width: 100%;
  opacity: 0;
}

#campaign-01 h2 {
  max-width: 180px;
  margin: 0 auto 50px auto;
  opacity: 0;
  text-align:center;
  width: 60%;
}

.campaign-01-1 {
  margin: 0 auto 14px auto;
  text-align:center;
  width: 90%;
  max-width: 1170px;
}

ul.campaign-01-1_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.campaign-01-1_box li {
  box-sizing: border-box;
  position: relative;
  width: 48.55%;
  max-width: 568px;
}

@media screen and ( max-width:767px) {
 #campaign-01 h2 { max-width: 144px; margin: 0 auto 30px auto;}
 #campaign-02 { margin-top: -80px; padding-top: 80px;}
 ul.campaign-01-1_box { flex-flow: column;}
 ul.campaign-01-1_box li { width: 100%; margin: 0 auto;}
}

@media screen and ( max-width:599px) {
 #campaign-01 {margin-top: -1.6em;}
 #campaign-01 h2 { max-width: 120px; margin: 0 auto 20px auto;}
 .campaign-02-1-btn { padding: 0.3em 0 0.4em 0;}
}

.detail_1 {
  background-color: #FFF9F4;
  clip-path: polygon(40px 0%, calc(100% - 40px) 0%, 100% 40px, 100% 95%, 55% 95%, 50% 100%, 45% 95%, 0 95%, 0% 40px);
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
  padding: 50px 30px 35px 30px;
  width: 100%;
  z-index: 2;
}

.detail_1_1 figure.detail_1_1_title {
  margin: 0 auto 1em auto;
  max-width: 488px;
  text-align: center;
}
.detail_1_1 figure.detail_2_1_title {
  margin: 0 auto;
  max-width: 392px;
  text-align: center;
}

.detail_1_1 .detail_1_1_text {
  font-size: clamp( 18px, calc( 15px + 0.75vw ), 24px );
  margin: 0 auto 15px auto;
  text-align: center;
}

.detail_1_1 ul.coupon {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 1em auto;
  text-align:center;
  width: 94%;
}

.detail_1_1 ul.coupon li {
  width: 29.03%;
}

.detail_1_1 figure.detail_1_1_title img,
.detail_1_1 ul.coupon li figure img {
  width: 100%;
  height: auto;
}

.detail_1_1 figure.detail_2_1_title img {
  width: 90%;
  height: auto;
}

.detail_1_1 ul.coupon li p {
  font-size: 1.1rem;
  margin-top: 1em;
}	

.detail_2 {
  background-color: #FF6F52;
  clip-path: polygon(100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 0);
  display: flex;
  flex-direction: column;
  position: relative;
  top: -40px;
  width: 100%;
  padding-bottom: 1em;
  z-index: 1;
}

.campaign-02-1_box {
  padding-top: 50px;
  position: relative;
}

figure.obje-04 {
  position: absolute;
  top: 49%;
  left: -38px;
  width: 40%;
  z-index:5;
  opacity: 0;
}

figure.obje-04 img {
  opacity: 0;
  animation: fadeInScale 0.4s forwards;
  width: 100%;
  max-width: 220px;
}
@media screen and (min-width:1090px) and ( max-width:1146px) {
figure.obje-04 { top: 47%; left: -45px;}
}
@media screen and (min-width:1039px) and ( max-width:1089px) {
figure.obje-04 { top: 45%; left: -55px;}
.detail_1_1 .detail_1_1_text { font-size: clamp( 18px, calc( 15.5px + 0.375vw ), 21px );}
}
@media screen and (min-width:991px) and ( max-width:1038px) {
figure.obje-04 { top: 42%; left: -55px;}
figure.obje-04 img { width: 100%;}
.detail_1_1 .detail_1_1_text { font-size: clamp( 16px, calc( 18.5px + 0.375vw ), 18px );}
}
@media screen and (min-width:768px) and ( max-width:990px) {
figure.obje-04 { top: 41%; left: -55px;}
figure.obje-04 img { width: 100%;}
.detail_1_1 .detail_1_1_text { font-size: clamp( 16px, calc( 18.5px + 0.375vw ), 18px );}
}
@media screen and ( max-width:767px) {
figure.obje-04 { top: 47%; left: -45px;}
figure.obje-04 img { width: 100%;}
.detail_1 { padding: 38px 30px 35px 30px;}
.detail_1_1 .detail_1_1_text { font-size: clamp( 16px, calc( 15px + 0.375vw ), 21px );}
.detail_2 { padding-bottom: 1.5em;}
}
@media screen and ( max-width:375px) {
figure.obje-04 { top: 46%; left: -45px;}
figure.obje-04 img { width: 94%;}
.detail_1_1 .detail_1_1_text { font-size: 15px;}
}

.detail_2_1 figure {
  margin: 0 auto 0.8em auto;
  max-width: 366px;
  text-align: center;
}
.detail_2_1 figure img {
  width: 100%;
  height: auto;
}

.campaign-02-1_box h4  {
  color: #FFF;
  font-weight: normal;
  font-size: clamp( 26px, calc( 18px + 1.25vw ), 34px );
  margin-bottom: 5px;
}

.campaign-02-1_box h4.campaign-02-1_h4 {
  font-size: clamp( 24px, calc( 16px + 1.25vw ), 32px );
}

.campaign-02-1_box ul  {
  margin: 0 auto;
  max-width: 18em;
  text-align: center;
  width: 90%;
}

.campaign-02-1_box ul li  {
  border-bottom: 2px solid #FFF;
  color: #FFF;
  font-size: clamp( 16px, calc( 13.5px + 0.625vw ), 21px );
  padding:0.7em;
  width: 100%;
}
.campaign-02-1_box ul li:last-child  {
  border-bottom: none;
}

.detail_2_1_date {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 2em auto 1em auto;
}

.date1 {
  background: #FFF47F;
  border-radius: 60px;
  font-size: clamp( 14px, calc( 11px + 1.5vw ), 26px );
  padding: 0.6em 1em;
}

.date2 {
  font-size: clamp( 16px, calc( 12px + 1.25vw ), 26px );
  text-align:left;
  width: auto;
}

.detail_2_2＿condition {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  text-align:center;
  width: 90%;
}

.detail_2_2＿condition .child {
  color: #FFF;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  width: 48%;
}

.detail_2_2＿condition .text h5 {
  background: #FFF9F4;
  color: #5E5654;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  margin: 16px 0;
  padding: 0.4em;
  width: 100%;
}

.detail_2_2＿condition .text p {
  color: #FFF;
  font-size: 1.45rem;
  line-height:1.8;
  text-align: left;
}

.detail_2_2＿condition .text p.cution {
  text-indent: -1em;
  padding-left: 1em;
}

@media screen and ( max-width:1037px) {
.detail_2_2＿condition { flex-flow: column;}
.detail_2_2＿condition .child { width: 100%;}
.detail_2_2＿condition .text p { padding: 0 1.5em;}
.detail_2_2＿condition .text p.cution { text-indent: -1em; padding-left: 2.5em;}
}

@media screen and ( max-width:899px) {
.date1 { font-size: clamp( 17px, calc( 9px + 1.25vw ), 26px ); padding: 0.6em 0.6em;}
.date2 { font-size: clamp( 18px, calc( 10px + 1.25vw ), 26px );}
}

@media screen and ( max-width:599px) {
.detail_2_1_date { margin: 1.5em auto 1em auto;}
}

.campaign-02-1-btn {
  background: #FFF47F;
  border-radius: 60px;
  color: #FF6F52;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  display: block;
  font-size: clamp( 16px, calc( 13.5px + 0.625vw ), 21px );
  font-weight: bold;
  line-height: 1.6;
  margin: 0.7em auto 1em auto;
  padding: 0.3em 0.3em 0.4em 0.3em;
  text-align: center;
  width: 100%;
  max-width: 270px;
}

.campaign-02-1-btn:hover {
  background: #FFF9F4;
  color: #FF6F52;
}

/*ーーーーーーーーーー
 campaign-02
ーーーーーーーーーーー*/

#campaign-02 {
  background-color: #FFF9F4;
  box-sizing: border-box;
  clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);
  margin: 0 auto 54px auto;
  padding: 2.3em 2em 3.2em 2em;
  text-align:center;
  width: 90%;
  max-width: 1170px;
}
#campaign-02 h2 {
  margin: 0 auto 0.8em auto;
  width: 90%;
  max-width: 507px;
}

h2.h2_campaign-02n {
  margin: 0 auto 30px auto;
  width: 90%;
  max-width: 181px;
}

#campaign-02 h2 img,
h2.h2_campaign-02n img {
  width: 100%;
  height: auto;
}

#campaign-02 p {
  font-size: 2rem;
  letter-spacing: 0.08em;
}

/*ーーーーーーーーーー
 campaign-02n
ーーーーーーーーーーー*/

#campaign-02n {
  background-color: #FFF9F4;
  box-sizing: border-box;
  clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);
  margin: 0 auto 54px auto;
  padding: 40px;
  text-align:center;
  width: 90%;
  max-width: 1170px;
}

.banner-wrapper {
    max-width: 1110px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.banner {
    flex: 1 1 calc(50% - 20px); /* 余白30pxを分割 */
    display: flex;
    align-items: center;
    justify-content: center;
}
	  
.new-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.new-label img, .banner img {
    width: 100%;
    height: auto;
}

.banner-wrapper a img:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

/*ーーーーーーーーーー
 campaign-03
ーーーーーーーーーーー*/

#campaign-03 {
  background-color: #FFF9F4;
  box-sizing: border-box;
  clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);
  margin: 0 auto 54px auto;
  padding: 2.3em 2em 3.2em 2em;
  text-align:center;
  width: 90%;
  max-width: 1170px;
}
#campaign-03 h2 {
  margin: 0 auto 0.8em auto;
  width: 90%;
  max-width: 251px;
}

#campaign-03 h2 img {
  width: 100%;
  height: auto;
}

#campaign-03 p {
  font-size: 2rem;
  letter-spacing: 0.08em;
}

 @media (max-width: 1108px) {
.new-label { top:-5px;}
}

@media only screen and (min-width: 768px) and (max-width: 1064px){
.new-label { top: 0;}
.new-label { width: 100px; height: 48px;}
}

 @media (max-width: 946px) {
.new-label { top:-8px;}
}

@media only screen and (max-width: 1020px) and (min-width: 768px){
  .campaign-01-1-obje { top: 17%;}
}
@media screen and (max-width: 767px) {
  .campaign-01-1_main { border-radius: 0 14vw 0 0; padding: 19.6vw 0 15.5vw 0;}
  .campaign-01-1_sub { border-radius: 0 0 0 14vw; padding: -19.6vw 0 15.5vw 0;}
  .campaign-01-1-obje { width: 41%; top: -29%; z-index: 99;}
  .campaign-01-1 h2 {  width: 80%;}
  #campaign-02, #campaign-02n { clip-path: none;
  background-image: url(../img/anni-online/campaign-02_back01.png), url(../img/anni-online/campaign-02_back02.png),url(../img/anni-online/campaign-02_back03.png), url(../img/anni-online/campaign-02_back04.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  margin: 0 auto 60px auto; padding: 2.3em 2em 2.2em 2em;
  }
  #campaign-02 h2 { margin: 0 auto 0.8em auto; width: 100%; max-width: 588px;}
  #campaign-02n h2 { margin: 0 auto 0.8em auto; width: 100%; max-width: 181px;}
  .banner { flex: 1 1 100%;}
  .banner-wrapper { gap: 20px;}
 .new-label { position: relative; top: 0; width: 80px; height: auto;}
  #campaign-03 { clip-path: none;
  background-image: url(../img/anni-online/campaign-02_back01.png), url(../img/anni-online/campaign-02_back02.png),url(../img/anni-online/campaign-02_back03.png), url(../img/anni-online/campaign-02_back04.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  margin: 0 auto 60px auto; padding: 1.6em 2em;
  }
  #campaign-03 h2 { margin: 0 auto 0.8em auto; width: 90%;}
}
@media screen and (max-width: 599px) {
  .campaign-02box { margin: 0 auto 1em -50px;}
  .campaign-02box figure { max-width: 80px; margin: -50px 0 0 0;}
  .campaign-02box h2 { width: 60%; max-width: 160px; margin: -54px 0 0 0;}
  .campaign-01-1 { margin: 0 auto;}
  .campaign-01-1 p.campaign-01_sub { margin-bottom: 30px;}
  .campaign-02-1-btn { padding: 0.4em 0 0.5em 0;}
  #campaign-02n { margin: 0 auto 30px auto; padding: 1.4em 15px 2.2em 15px;}
  h2.h2_campaign-02n { width: 60%; max-width: 118px;}
 .banner-wrapper { flex-flow: column;}
 .new-label { width: 60px; height: auto;}
 .banner img { width: 90%;}

  #campaign-03 h2 img { width: 60%; max-width: 175px;}
  #campaign-03 p { font-size: 1.5rem;}
}

/*ーーーーーーーーーー
  footer
ーーーーーーーーーーー*/

.footer {
  background: #FF7760;
  margin: 0 auto;
  padding: 64px 0;
  text-align: center;
}

.footer-cont {
  margin:0 auto;
  width: min(100% - 32px, 1080px);
}

.footer-cont figure {
  margin: 0 auto 10px auto;
  width: 70%;
  max-width: 310px;
}
.footer-cont figure img {
  width: 100%;
  height: auto;
}
.footer-cont figure img:hover {
  opacity: 0.8;
  cursor: pointer;
}
.copy {
  margin:0 auto;
  width: min(100% - 32px, 1080px);
}
.copy small {
  color: #FFF;
  font-size: 12px;
  font-size: clamp(11px, calc(9.5px + 0.375vw), 14px);
  text-align:left;
}

@media (max-width: 767px) {
 button.btn { margin: 40px auto 30px auto; padding: 1rem 3rem;}
 .footer-cont figure { width: 200px;}
 .copy small { font-size: 1.1rem;}
}
@media screen and (max-width: 599px) {
 .footer { padding: 38px 0;}
 .footer-cont figure { margin: 0 auto 6px auto;}
}

/*ーーーーーーーーーー
  keyframes
ーーーーーーーーーーー*/

.fadein.is-animated {
  opacity: 0;
  animation: fadein 1.4s ease forwards;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeup.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}	
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}

.pc {display:block;}
.tb {display:none;}
.pctb {display:block;}
.tbmb {display:none;}
.mb {display:none;}

@media screen and (min-width:600px) and (max-width: 767px) {
.pc {display:none;}
.tb {display:block;}
.pctb {display:block;}
.tbmb {display:block;}
.mb {display:none;}
}

@media screen and (max-width: 599px) {
.pc {display:none;}
.tb {display:none;}
.pctb {display:none;}
.tbmb {display:block;}
.mb {display:block;}
}