@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
}

html{
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	-webkit-box-sizing : border-box;
}

body{
	font-size:1.6rem;
	letter-spacing:0.1rem;
	line-height:1.8;
}

a{
    text-decoration: none;
}

img{
	max-width: 100%;
	vertical-align: bottom;
	height: auto;
	width /***/:auto;	/*IE8のみ適用*/
}
.sp_only{
    display: none;
}

.flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.flex.both{
justify-content: space-between;
}

.center{
    text-align: center;
}

.footer{
    text-align: center;
    font-size: 1.4rem;
    padding: 2% 2% 5%;
}

.l-main{
    width:100%;
    overflow: hidden;
    margin: 0 auto;
}
.l-inner{
    max-width: 1200px;
    width: 96%;
    margin: 0 auto;
}

.main-title{
    text-align: center;
    max-width: 240px;
    width: 60%;
    margin: 15px 0 1%;
}

.main img{
    width: 100%;
}


#075e43:#075e43;
#03442f:#03442f;
#eef8ef:#eef8ef;
#da2f68:#da2f68;
#ffe56a:#ffe56a;
#fffaf0:#fffaf0;
#1f2b27:#1f2b27;
#08c655:#08c655;

.campaign{overflow:hidden}
.inner{width:min(1100px,calc(100% - 40px));margin:auto}
.inner--narrow{width:min(900px,calc(100% - 40px))}
.section{position:relative;padding:70px 0}
.en{margin:0 0 8px;color:#075e43;font-size:12px;font-weight:900;letter-spacing:.2em;text-align:center}
h2{margin:0 0 38px;color:#03442f;font-size:36px;line-height:1.45;text-align:center}
.pink{color:#da2f68}
.btn{width: 100%;max-width: 400px; display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:12px 0;border-radius:999px;color:#fff;font-weight:900;box-shadow:0 9px 22px rgba(0,0,0,.12)}
.btn--pink{background:#da2f68}
.btn--line{background:#08c655}

.fv{position:relative;min-height:720px;background:#fffaf0}
.fv__photo{position:absolute;inset:0 0 0 42%;overflow:hidden}
.fv__photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fffaf0 0%,rgba(255,250,240,.12) 40%,rgba(255,250,240,0) 70%)}
.fv__photo img{width:100%;height:100%;object-fit:cover}
.fv__inner{position:relative;z-index:2;width:min(1200px,calc(100% - 40px));margin:auto;padding:70px 0}
.fv__panel{width:58%;padding:18px 0 35px}
.fv__tag{display:inline-block;margin:0 0 16px;padding:9px 22px;background:#075e43;color:#fff;font-size:20px;font-weight:900;transform:rotate(-2deg)}
.fv__tag strong{color:#ffe56a}
.fv__series{margin:0 0 8px;color:#da2f68;font-size:22px;font-weight:900}
.fv__title{margin:0 0 12px;line-height:1}
.fv__title>span:first-child{display:block;font-size:26px;font-weight:900}
.fv__title>span:first-child b{color:#da2f68;font-size:46px}
.fv__title>strong{display:flex;align-items:flex-end;color:#da2f68}
.fv__title>strong em{font-size:128px;font-style:normal;letter-spacing:-.08em}
.fv__title>strong small{margin:0 0 20px 8px;color:#111;font-size:34px}
.fv__title i{display:inline-block;padding:0 8px 8px;background:linear-gradient(transparent 72%,#ffe56a 0);color:#075e43;font-size:54px;font-style:normal;font-weight:900;letter-spacing:-.04em}
.fv__present{display:block;margin-top:10px;font-size:40px;font-weight:900}
.fv__sub{display:flex;align-items:center;gap:18px;margin:24px 0}
.fv__sub img{width:220px}
.fv__sub p{margin:0;padding:18px 22px;border-radius:50%;background:#075e43;color:#fff;text-align:center;font-weight:900}
.fv__sub strong{color:#ffe56a;font-size:24px}
.fv__desc{max-width:660px;font-size:14px}
.fv__desc strong{color:#da2f68}
.decor{position:absolute;z-index:1;opacity:.85}
.decor--fv{top:15px;left:-25px;width:220px}
.decor--left{left:-15px;bottom:10px;width:20%;z-index: -1;}
.decor--right{right:-20px;top:20px;width:20%;transform:scaleX(-1);z-index: -1;}

.intro{text-align:center}
.intro p:not(.en){margin:0 auto 10px;max-width:900px}
.total{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;width:fit-content;margin:32px auto 30px;padding:15px 26px;border-radius:10px;background:#fff6cc;font-weight:900}
.total b,.total strong{color:#da2f68;font-size:3rem;}

.howto{background:#fffaf0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;padding:26px 24px 30px;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(5,68,47,.08);text-align:center}
.step__no{position:absolute;top:16px;left:16px;display:flex;width:62px;height:62px;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#075e43;color:#fff;font-size:24px;font-weight:900;line-height:1}
.step__no small{font-size:9px;letter-spacing:.08em}
.step img{height:210px;margin:10px auto 18px}
.step h3{min-height:70px;margin:0 0 12px;color:#075e43;font-size:20px;line-height:1.5}
.step mark{background:linear-gradient(transparent 66%,#ffe56a 0)}
.step p{margin:0;font-size:14px;text-align:left}
.point{display:flex;align-items:center;justify-content:center;gap:18px;width:fit-content;margin:35px auto 0;padding:10px 20px;border:2px solid #da2f68;border-radius:999px;background:#fff}
.point b{padding:2px 16px;background:#da2f68;color:#fff}
.point strong{color:#da2f68}

.period__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.period__grid article{overflow:hidden;border:1px solid #f1ced9;border-radius:16px;background:#fff7fa;text-align:center}
.period__grid article>span{display:inline-block;margin-top:0;padding:8px 26px;border-radius:0 0 999px 999px;background:#da2f68;color:#fff;font-weight:900}
.period__grid p{margin:18px 10px 24px;font-weight:700}
.period__grid strong{font-size:1.9rem;}
.period__grid small{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:2px;border-radius:50%;background:#075e43;color:#fff;font-size:10px}
.ribbon{width:fit-content;margin:26px auto 0;padding:12px 32px;background:#ffe56a;font-weight:900}
.ribbon strong{color:#da2f68;font-size:28px}
.note{text-align:center;font-size:12px;color:#666;margin-top: 10px;}

.present{background:#eef8ef}
.present__card{display:grid;grid-template-columns:46% 54%;overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(0,0,0,.08)}
.present__photo{min-height:390px}
.present__photo img{width:100%;height:100%;object-fit:cover}
.present__copy{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px;text-align:center}
.present__copy>p{margin:0;font-size:20px;font-weight:900}
.present__copy>p strong{color:#da2f68}
.present__copy>div{display:flex;align-items:flex-end;color:#da2f68}
.present__copy>div strong{font-size:92px;line-height:1}
.present__copy>div span{margin-bottom:10px;font-size:28px;font-weight:900}
.present__copy h3{margin:6px 0 20px;color:#075e43;font-size:32px}
.present__copy img{width:320px}

.line__box{display:grid;grid-template-columns:1fr 220px;align-items:center;gap:40px;padding:48px 56px;border:3px solid #08c655;border-radius:26px;background:#f4fff7}
.line__lead{margin:0;color:#08c655;font-weight:900}
.line__box h2{margin:6px 0 20px;text-align:left;font-size:32px}
.line__box ul{padding-left:1.3em;margin-bottom: 15px;}
.line__qr{width:200px;margin:auto}

.notes{padding:40px 0;background:#03442f;color:#fff}
.notes h2{margin:0 0 22px;color:#fff;font-size:22px;text-align:left}
.notes ul{margin:0;padding-left:1.4em}
.notes li{margin:6px 0;font-size:13px;color:rgba(255,255,255,.92)}
.fixed-line{display:none}

@media(max-width:767px){
    html{
        font-size: 50%;
    }
    .pc_only{
        display: none;
    }
    .sp_only{
        display: block;
    }
    .main-title{
        width: 50%;
        margin: 10px 2%;
    }
    
.decor--left{width:50%;max-width: 200px;}
.decor--right{width: 40%;max-width: 200px;}
    
  .section{padding:68px 0}
  .inner,.inner--narrow,.fv__inner{width:min(100% - 28px,620px)}
  h2{margin-bottom:28px;font-size:3rem}
  .fv{min-height:auto;padding-bottom:44px}
  .fv__photo{position:relative;inset:auto;height:340px}
  .fv__photo:after{background:linear-gradient(0deg,#fffaf0 0%,rgba(255,250,240,0) 46%)}
  .fv__inner{padding:0}
  .fv__panel{width:100%;margin-top:-40px;padding:0;text-align:center}
  .fv__tag{font-size:15px}
  .fv__series{font-size:17px}
  .fv__title>span:first-child{font-size:21px}
  .fv__title>span:first-child b{font-size:38px}
  .fv__title>strong{justify-content:center}
  .fv__title>strong em{font-size:86px}
  .fv__title>strong small{margin-bottom:12px;font-size:24px}
  .fv__title i{font-size:37px}
  .fv__present{font-size:30px}
  .fv__sub{justify-content:center}
  .fv__sub img{width:170px}
  .fv__sub p{padding:14px;font-size:12px}
  .fv__sub strong{font-size:20px}
  .fv__desc{text-align:left}
  .btn{width:100%}
  .decor--fv{width:150px}
  .total{border-radius:18px}
  .steps{grid-template-columns:1fr}
  .step{display:grid;grid-template-columns:42% 58%;align-items:center;padding:18px;text-align:left}
  .step img{height:auto;margin:0}
  .step h3{min-height:0;margin:0 0 8px;padding-left:12px;font-size:16px}
  .step p{grid-column:2;padding-left:12px;font-size:12px}
  .step__no{width:52px;height:52px;font-size:20px;top:-5px;left: -5px;}
  .point{width:100%;border-radius:14px;align-items:flex-start;padding:12px 0;}
  .period__grid{grid-template-columns:1fr}
  .period__grid article{display:grid;grid-template-columns:90px 1fr;align-items:center}
  .period__grid article>span{margin:0;border-radius:0;padding:18px 10px}
  .period__grid p{margin:10px}
  .present__card{grid-template-columns:1fr}
  .present__photo{min-height:240px}
  .present__copy>div strong{font-size:72px}
  .present__copy h3{font-size:27px}
  .line__box{grid-template-columns:1fr;padding:32px 15px}
  .line__box h2{text-align:center;font-size:25px}
  .line__lead{text-align:center}
  .line__qr{order:-1;width:150px}

.total b,.total strong{;font-size:2.8rem;}
    .footer{padding-bottom: 90px;}

  .fixed-line{position:fixed;z-index:50;right:14px;bottom:12px;left:14px;display:flex;align-items:center;justify-content:center;height:54px;border-radius:999px;background:#08c655;color:#fff;font-weight:900;box-shadow:0 6px 20px rgba(0,0,0,.18)}
}